/* PAVES */ #accueil-paves-conteneur {max-width: 1920px; margin: 0 auto; margin: 25px 0; position:relative; z-index:10; } #accueil-paves-conteneur .global {text-align:left; height:100%; max-width: 100%; display:flex; flex-wrap:wrap; justify-content:center; align-items:stretch; gap: 25px; } #accueil-paves-conteneur .accueil-pave {position:relative; z-index:10; background: var(--secondary-color-soft); width: 450px; height: 300px; border-radius: 3px; transition: box-shadow 200ms ease-out; box-sizing: border-box; container-type: inline-size; container-name: container-pave; } #accueil-paves-conteneur .accueil-pave > div {padding: 20px 50px 30px; display:flex; justify-content: space-between; align-items:flex-start; flex-direction:column;} #accueil-paves-conteneur .accueil-pave-numero {font-family:var(--secondary-font); font-size: 25px; line-height: 20px; letter-spacing: 0.5px; color: var(--secondary-color); margin-bottom: 30px; text-align: left; } #accueil-paves-conteneur .accueil-pave-numero span {border-bottom: 1px solid var(--primary-color); padding-bottom: 7px; } #accueil-paves-conteneur .accueil-pave-contenu { } #accueil-paves-conteneur .accueil-pave-nom {text-align: left; } #accueil-paves-conteneur .accueil-pave-nom a, #accueil-paves-conteneur .accueil-pave-nom a:visited {font-family:var(--secondary-font); font-size: 28px; line-height: 28px; color: var(--primary-color); text-decoration:none; } #accueil-paves-conteneur .accueil-pave-nom em {font-style: normal; font-size: 35px; line-height: 35px; display:block; } #accueil-paves-conteneur .accueil-pave-texte {font-size: 12px; text-align: left; letter-spacing: 1px; margin-top: 20px; } #accueil-paves-conteneur .accueil-pave-texte p {text-align: left; line-height: 20px; margin-left: 0; } #accueil-paves-conteneur .accueil-pave-suite {color: var(--secondary-color); display:flex; flex-wrap:wrap; justify-content:flex-start; align-items:center; margin-top: 20px; } #accueil-paves-conteneur .accueil-pave-suite span {font-size: 14px; ; display:inline-block; max-width:0; opacity:0; overflow:hidden; white-space:nowrap; transform:translateX(-6px); transition:max-width 760ms cubic-bezier(0.16, 1, 0.3, 1), opacity 620ms ease, transform 760ms cubic-bezier(0.16, 1, 0.3, 1); } #accueil-paves-conteneur .accueil-pave-suite i {background-color: var(--secondary-color); -webkit-mask-image: url('../images/icone-fleche-gauche.svg'); mask-image: url('../images/icone-fleche-gauche.svg'); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; -webkit-mask-size: contain; mask-size: contain; transform: rotate(180deg); width: 18px; height: 17px; display: block; transition: margin-left 760ms cubic-bezier(0.16, 1, 0.3, 1); } #accueil-paves-conteneur .accueil-pave:nth-child(2n) {background: var(--primary-color-soft); } #accueil-paves-conteneur .accueil-pave:nth-child(2n) .accueil-pave-numero {color: var(--primary-color); } #accueil-paves-conteneur .accueil-pave:nth-child(2n) .accueil-pave-numero span {border-color: #fff; } #accueil-paves-conteneur .accueil-pave:nth-child(2n) .accueil-pave-nom a, #accueil-paves-conteneur .accueil-pave:nth-child(2n) .accueil-pave-nom a:visited, #accueil-paves-conteneur .accueil-pave:nth-child(2n) .accueil-pave-texte {color: #fff; } #accueil-paves-conteneur .accueil-pave:nth-child(2n) .accueil-pave-suite {color: var(--primary-color); } #accueil-paves-conteneur .accueil-pave:nth-child(2n) .accueil-pave-suite i {background-color: var(--primary-color); } #accueil-paves-conteneur .accueil-pave:hover {box-shadow: 0 0 10px rgba(0, 0, 0, 0.3); } #accueil-paves-conteneur .accueil-pave:hover .accueil-pave-suite span {max-width: 220px; opacity:1; transform:translateX(0); transition:max-width 900ms cubic-bezier(0.33, 0, 0.2, 1), opacity 680ms ease 80ms, transform 900ms cubic-bezier(0.33, 0, 0.2, 1); } #accueil-paves-conteneur .accueil-pave:hover .accueil-pave-suite i {margin-left: 10px; transition:margin-left 900ms cubic-bezier(0.33, 0, 0.2, 1); } #accueil-bande-ressources { max-width: 1875px; margin: 0 auto; background: #f4f4f3; position:relative; z-index:20; width:100%; overflow:hidden; padding: 25px 0; } #accueil-bande-ressources .global { max-width: 1530px; margin: 0 auto; position:relative; z-index:25; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; } #accueil-bande-ressources #accueil-bande-ressources-gauche {width: 65%; } #accueil-bande-ressources #accueil-bande-ressources-gauche h2 {margin-top:0; } #accueil-bande-ressources #accueil-bande-ressources-gauche p {margin-left:0; } #accueil-bande-ressources #accueil-bande-ressources-droite { width: 25%; text-align: center; } #accueil-bande-ressources #accueil-bande-ressources-droite p {margin-left:0; text-align:left; } #accueil-actualites {background: var(--bg-main); padding: 50px 0; margin: 20px 0;} #accueil-actualites .global { max-width: 1530px; } #accueil-actualites-haut {display:flex; justify-content: space-between; align-items: center; gap:20px; max-width: 1440px; flex-wrap: wrap;} #accueil-actualites-categories {display:flex; flex-wrap: wrap; gap:10px;} #accueil-actualites-categories .accueil-actualites-categorie { cursor:pointer; padding:8px 16px; font-size: 15px; transition: all 0.25s ease;} #accueil-actualites-categories .accueil-actualites-categorie span {color: var(--primary-color);} #accueil-actualites-categories .accueil-actualites-categorie:hover span, #accueil-actualites-categories .accueil-actualites-categorie.active span {color:var(--secondary-color);} #global #accueil-actualites-bouton .bouton.bouton-gros .circle, #global #accueil-actualites-bouton .bouton.bouton-gros:visited .circle, #global #accueil-actualites-bouton a.bouton.bouton-gros .circle, #global #accueil-actualites-bouton a.bouton.bouton-gros:visited .circle {background: var(--secondary-color);} #global #accueil-actualites-bouton .bouton.bouton-gros .button-text, #global #accueil-actualites-bouton .bouton.bouton-gros:visited .button-text, #global #accueil-actualites-bouton a.bouton.bouton-gros .button-text, #global #accueil-actualites-bouton a.bouton.bouton-gros:visited .button-text {color:var(--secondary-color);} #global #accueil-actualites-bouton .bouton.bouton-gros .circle .icon.arrow::before, #global #accueil-actualites-bouton .bouton.bouton-gros:visited .circle .icon.arrow::before, #global #accueil-actualites-bouton a.bouton.bouton-gros .circle .icon.arrow::before, #global #accueil-actualites-bouton a.bouton.bouton-gros:visited .circle .icon.arrow::before {border-color: #fff; } #global #accueil-actualites-bouton .bouton.bouton-gros:hover .circle .icon.arrow, #global #accueil-actualites-bouton a.bouton.bouton-gros:hover .circle .icon.arrow {background: #fff;} #global #accueil-actualites-bouton .bouton.bouton-gros:hover .circle .icon.arrow::before, #global #accueil-actualites-bouton a.bouton.bouton-gros:hover .circle .icon.arrow::before {border-color: #fff; } #global #accueil-actualites-bouton .bouton.bouton-gros:hover .button-text, #global #accueil-actualites-bouton a.bouton.bouton-gros:hover .button-text {color: #fff; } #accueil-actualites-bas { margin-top: 30px; display:flex; justify-content: space-between; align-items: center; gap:20px; max-width: 1440px; flex-wrap: wrap;} #global #accueil-actualites-toutes a.bouton, #global #accueil-actualites-toutes .bouton {background: var(--secondary-color); border: 1px solid var(--secondary-color); padding: 10px; border-radius: 65px; margin: 0;} #global #accueil-actualites-toutes a.bouton .circle, #global #accueil-actualites-toutes .bouton .circle {left: 10px !important; width: 32px !important; height: 32px !important; color: var(--secondary-color); background: #fff;} #global #accueil-actualites-toutes a.bouton .circle .icon.arrow, #global #accueil-actualites-toutes .bouton .circle .icon.arrow { transform: translate3d(0, 0, 0) !important;} #global #accueil-actualites-toutes a.bouton .circle .icon.arrow::before, #global #accueil-actualites-toutes .bouton .circle .icon.arrow::before {border-color: var(--secondary-color); } #global #accueil-actualites-toutes a.bouton .button-text, #global #accueil-actualites-toutes .bouton .button-text {color: #fff; line-height: 16px;} #global #accueil-actualites-toutes a.bouton:hover, #global #accueil-actualites-toutes .bouton:hover {background: #fff;} #global #accueil-actualites-toutes a.bouton:hover .circle, #global #accueil-actualites-toutes .bouton:hover .circle { color: #fff; background: var(--secondary-color);} #global #accueil-actualites-toutes a.bouton:hover .circle .icon.arrow, #global #accueil-actualites-toutes .bouton:hover .circle .icon.arrow {background: var(--secondary-color); } #global #accueil-actualites-toutes a.bouton:hover .circle .icon.arrow::before, #global #accueil-actualites-toutes .bouton:hover .circle .icon.arrow::before {border-color: #fff; } #global #accueil-actualites-toutes a.bouton:hover .button-text, #global #accueil-actualites-toutes .bouton:hover .button-text {color: var(--secondary-color);} #accueil-voirplus { padding: 30px 0; } #accueil-voirplus .global > *:first-child { margin-top: 0px !important; } #accueil-voirplus-bouton { width: 100%; text-align: center; } #accueil-voirplus-bouton i { content: ""; display: block; color: var(--primary-color); width: 42px; height: 42px; border: 3px solid var(--primary-color); box-sizing: border-box; border-radius: 30px; position: relative; cursor: pointer; margin: 0 auto; } #accueil-voirplus-bouton i::before, #accueil-voirplus-bouton i::after { content:''; position:absolute; background: var(--primary-color); transform-origin:center; -webkit-transition:all 0.4s linear; -o-transition:all 0.4s linear; transition:all 0.4s linear; -webkit-transform:rotateZ(0); -ms-transform:rotate(0); transform:rotateZ(0); opacity:1 } #accueil-voirplus-bouton i::before { width:2px; height:calc(100% - 10px); top:5px; left:calc(50% - 1px) } #accueil-voirplus-bouton i::after { left:5px; width:calc(100% - 10px); height:2px; top:calc(50% - 1px) } #accueil-voirplus-bouton i.active::before, #accueil-voirplus-bouton i.active::after { -webkit-transform:rotateZ(90deg); -ms-transform:rotate(90deg); transform:rotateZ(90deg) } #accueil-voirplus-bouton i.active::after { opacity:0 } #accueil-voirplus-suite {display:grid; grid-template-rows:0fr; overflow:hidden; transition : grid-template-rows 200ms; } #accueil-voirplus-suite.visible { grid-template-rows:1fr; } #accueil-voirplus-suite > div {min-height:0; } /* Logos */ #accueil-logos-conteneur {max-width: 1920px; padding: 45px 0; position: relative; background: #fff; } #accueil-logos-conteneur #accueil-logos {overflow: hidden; margin:0 auto; } #accueil-logos-conteneur #accueil-logos .bx-wrapper { margin: 0 auto; box-shadow: unset; border: none; background: none; } #accueil-logos-conteneur #accueil-logos .bxslider {height: 100%; } #accueil-logos-conteneur #accueil-logos .bxslider li { float: left !important; width: auto !important; height: 100%; white-space: normal !important; padding: 0; margin: 0 30px; max-width: 240px; width: auto !important; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; } #accueil-logos-conteneur #accueil-logos .bxslider li::before {display: none; } #accueil-logos-conteneur #accueil-logos .bxslider img { display:block; height:auto; width:auto; object-fit:contain; max-height: 180px; } #accueil-logos-texte {margin-top: 20px;} #accueil-logos-texte .global p {margin-left:0; text-align: center;} @container container-pave (max-width: 420px) { #accueil-paves-conteneur .accueil-pave > div { padding: 20px 30px 30px;} } @container container-pave (max-width: 380px) { #accueil-paves-conteneur .accueil-pave > div { padding: 20px 20px 30px;} } @container container-pave (max-width: 330px) { #accueil-paves-conteneur .accueil-pave-nom a, #accueil-paves-conteneur .accueil-pave-nom a:visited { font-size: 25px; line-height: 26px; } #accueil-paves-conteneur .accueil-pave-nom em { font-size: 35px; line-height: 35px; } } @container container-pave (max-width: 300px) { #accueil-paves-conteneur .accueil-pave > div { padding: 15px 15px 20px;} #accueil-paves-conteneur .accueil-pave-nom a, #accueil-paves-conteneur .accueil-pave-nom a:visited { font-size: 22px; line-height: 23px; } #accueil-paves-conteneur .accueil-pave-nom em { font-size: 32px; line-height: 32px; } } @container container-pave (max-width: 240px) { #accueil-paves-conteneur .accueil-pave-nom a, #accueil-paves-conteneur .accueil-pave-nom a:visited { font-size: 28px; line-height: 28px;} #accueil-paves-conteneur .accueil-pave-nom em { font-size: 30px; line-height: 30px;} } @media all and (max-width:1940px) { #accueil-paves-conteneur .accueil-pave {width: calc(25% - 19px);} } @media all and (max-width:1490px) { #accueil-paves-conteneur .global { gap: 15px;} #accueil-paves-conteneur .accueil-pave { width: calc(25% - 12px); height: auto;} } @media all and (max-width:1330px) { #accueil-actualites { padding: 20px 0;} #accueil-actualites-haut, #accueil-actualites-categories {justify-content:center;} #global #accueil-actualites-haut h2.h1 {width: 100%; text-align: center; margin: 15px 0; } } @media all and (max-width:1190px) { #accueil-bande-ressources #accueil-bande-ressources-gauche {width: 70%;} } @media all and (max-width:1100px) { #accueil-paves-conteneur .accueil-pave { width: calc(33.333% - 10px); } } @media all and (max-width:990px) { #accueil-paves-conteneur .accueil-pave { width: calc(50% - 8px); } #accueil-paves-conteneur .accueil-pave:nth-child(2n) {background: var(--secondary-color-soft); } #accueil-paves-conteneur .accueil-pave:nth-child(2n) .accueil-pave-numero {color: var(--secondary-color); } #accueil-paves-conteneur .accueil-pave:nth-child(2n) .accueil-pave-numero span {border-color: var(--primary-color); } #accueil-paves-conteneur .accueil-pave:nth-child(2n) .accueil-pave-nom a, #accueil-paves-conteneur .accueil-pave:nth-child(2n) .accueil-pave-nom a:visited, #accueil-paves-conteneur .accueil-pave:nth-child(2n) .accueil-pave-texte {color: var(--primary-color); } #accueil-paves-conteneur .accueil-pave:nth-child(2n) .accueil-pave-suite {color: var(--secondary-color); } #accueil-paves-conteneur .accueil-pave:nth-child(2n) .accueil-pave-suite i {background-color: var(--secondary-color); } /* Mettre les pavés 1 et 4 en beige et 2 et 3 en gris */ #accueil-paves-conteneur .accueil-pave:nth-child(4n+2), #accueil-paves-conteneur .accueil-pave:nth-child(4n+3) {background: var(--primary-color-soft); } #accueil-paves-conteneur .accueil-pave:nth-child(4n+2) .accueil-pave-numero, #accueil-paves-conteneur .accueil-pave:nth-child(4n+3) .accueil-pave-numero {color: var(--primary-color); } #accueil-paves-conteneur .accueil-pave:nth-child(4n+2) .accueil-pave-numero span, #accueil-paves-conteneur .accueil-pave:nth-child(4n+3) .accueil-pave-numero span {border-color: #fff; } #accueil-paves-conteneur .accueil-pave:nth-child(4n+2) .accueil-pave-nom a, #accueil-paves-conteneur .accueil-pave:nth-child(4n+2) .accueil-pave-nom a:visited, #accueil-paves-conteneur .accueil-pave:nth-child(4n+3) .accueil-pave-nom a, #accueil-paves-conteneur .accueil-pave:nth-child(4n+3) .accueil-pave-nom a:visited, #accueil-paves-conteneur .accueil-pave:nth-child(4n+3) .accueil-pave-texte, #accueil-paves-conteneur .accueil-pave:nth-child(4n+2) .accueil-pave-texte {color: #fff; } #accueil-paves-conteneur .accueil-pave:nth-child(4n+3) .accueil-pave-suite {color: var(--primary-color); } #accueil-paves-conteneur .accueil-pave:nth-child(4n+2) .accueil-pave-suite i, #accueil-paves-conteneur .accueil-pave:nth-child(4n+3) .accueil-pave-suite i {background-color: var(--primary-color); } #accueil-bande-ressources #accueil-bande-ressources-gauche, #accueil-bande-ressources #accueil-bande-ressources-droite {width: 100%;} #accueil-bande-ressources #accueil-bande-ressources-droite p {margin-bottom: 0px; text-align: center; } #accueil-logos-conteneur #accueil-logos .bxslider li { margin: 0 15px; } } @media all and (max-width:780px) { #global #accueil-actualites-toutes a.bouton, #global #accueil-actualites-toutes .bouton { padding: 5px 10px;} } @media all and (max-width:700px) { #accueil-actualites-bas {flex-direction: column; gap: 40px; align-items: center; justify-content: center; } } @media all and (max-width:580px) { #accueil-paves-conteneur .global { padding: 0 10px; gap: 10px;} #accueil-paves-conteneur .accueil-pave { width: calc(50% - 5px); } } @media all and (max-width:430px) { #accueil-paves-conteneur .accueil-pave { width: 100%; } #accueil-paves-conteneur .accueil-pave:nth-child(4n+1), #accueil-paves-conteneur .accueil-pave:nth-child(4n+3) {background: var(--secondary-color-soft); } #accueil-paves-conteneur .accueil-pave:nth-child(4n+1) .accueil-pave-numero, #accueil-paves-conteneur .accueil-pave:nth-child(4n+3) .accueil-pave-numero{color: var(--secondary-color); } #accueil-paves-conteneur .accueil-pave:nth-child(4n+1) .accueil-pave-numero span, #accueil-paves-conteneur .accueil-pave:nth-child(4n+3) .accueil-pave-numero span {border-color: var(--primary-color); } #accueil-paves-conteneur .accueil-pave:nth-child(4n+1) .accueil-pave-nom a, #accueil-paves-conteneur .accueil-pave:nth-child(4n+1) .accueil-pave-nom a:visited, #accueil-paves-conteneur .accueil-pave:nth-child(4n+3) .accueil-pave-nom a, #accueil-paves-conteneur .accueil-pave:nth-child(4n+3) .accueil-pave-nom a:visited, #accueil-paves-conteneur .accueil-pave:nth-child(4n+1) .accueil-pave-texte, #accueil-paves-conteneur .accueil-pave:nth-child(4n+3) .accueil-pave-texte {color: var(--primary-color); } #accueil-paves-conteneur .accueil-pave:nth-child(4n+1) .accueil-pave-suite, #accueil-paves-conteneur .accueil-pave:nth-child(4n+3) .accueil-pave-suite {color: var(--secondary-color); } #accueil-paves-conteneur .accueil-pave:nth-child(4n+1) .accueil-pave-suite i, #accueil-paves-conteneur .accueil-pave:nth-child(4n+3) .accueil-pave-suite i {background-color: var(--secondary-color); } /* Mettre les pavés 1 et 4 en beige et 2 et 3 en gris */ #accueil-paves-conteneur .accueil-pave:nth-child(4n+2), #accueil-paves-conteneur .accueil-pave:nth-child(4n+4) {background: var(--primary-color-soft); } #accueil-paves-conteneur .accueil-pave:nth-child(4n+2), #accueil-paves-conteneur .accueil-pave:nth-child(4n+4) .accueil-pave-numero {color: var(--primary-color); } #accueil-paves-conteneur .accueil-pave:nth-child(4n+2) .accueil-pave-numero span, #accueil-paves-conteneur .accueil-pave:nth-child(4n+4) .accueil-pave-numero span {border-color: #fff; } #accueil-paves-conteneur .accueil-pave:nth-child(4n+2) .accueil-pave-nom a, #accueil-paves-conteneur .accueil-pave:nth-child(4n+2) .accueil-pave-nom a:visited, #accueil-paves-conteneur .accueil-pave:nth-child(4n+4) .accueil-pave-nom a, #accueil-paves-conteneur .accueil-pave:nth-child(4n+4) .accueil-pave-nom a:visited, #accueil-paves-conteneur .accueil-pave:nth-child(4n+4) .accueil-pave-texte, #accueil-paves-conteneur .accueil-pave:nth-child(4n+2) .accueil-pave-texte {color: #fff; } #accueil-paves-conteneur .accueil-pave:nth-child(4n+4) .accueil-pave-suite {color: var(--primary-color); } #accueil-paves-conteneur .accueil-pave:nth-child(4n+2) .accueil-pave-suite i, #accueil-paves-conteneur .accueil-pave:nth-child(4n+4) .accueil-pave-suite i {background-color: var(--primary-color); } }