/* theme.css */
:root {
--mob-vert: var(--wp--preset--color--vert);
--mob-vert-fonce: var(--wp--preset--color--vert-fonce);
--mob-vert-clair: var(--wp--preset--color--vert-clair);
--mob-anthracite: var(--wp--preset--color--anthracite);
--mob-encre: var(--wp--preset--color--encre);
--mob-gris: var(--wp--preset--color--gris);
--mob-gris-clair: var(--wp--preset--color--gris-clair);
--mob-gris-brume: var(--wp--preset--color--gris-brume);
--mob-blanc: var(--wp--preset--color--blanc);
--mob-rayon: var(--wp--custom--rayon);
--mob-transition: var(--wp--custom--transition);
--mob-entete-h: var(--wp--custom--entete--hauteur);
--mob-entete-total: calc(var(--wp--custom--entete--hauteur) + 1px);
--mob-marge: clamp(1rem, 4vw, 2.5rem);
}
.wp-site-blocks > header,
.wp-site-blocks > main,
.wp-site-blocks > footer {
margin-block: 0;
}
html {
overflow-x: clip;
}
body {
overflow-x: clip;
}
header.wp-block-template-part {
position: sticky;
top: 0;
z-index: 60;
background: var(--mob-blanc);
border-bottom: 1px solid var(--mob-gris-brume);
}
.mob-entete {
position: relative;
}
.mob-entete__barre {
max-width: calc(var(--wp--style--global--wide-size) + 2 * var(--mob-marge));
margin-inline: auto;
padding-inline: var(--mob-marge);
min-height: var(--mob-entete-h);
gap: clamp(1rem, 3vw, 2rem);
}
.mob-entete__logo {
flex: none;
}
.mob-entete__logo img {
display: block;
height: auto;
max-width: 190px;
}
@media (max-width: 600px) {
.mob-entete__logo img {
max-width: 148px;
}
}
.mob-section {
padding-inline: 0;
}
.mob-prose > * + * {
margin-block-start: 1.25rem;
}
.mob-prose > h2 {
margin-block-start: 2.5rem;
}
.mob-prose > h3 {
margin-block-start: 1.75rem;
}
.mob-grille {
gap: clamp(1.25rem, 3vw, 2rem);
}
.mob-pied {
--mob-pied-lien: var(--wp--preset--color--blanc-casse);
--mob-pied-filet: rgba(173, 213, 64, 0.35);
}
.mob-pied > .wp-block-columns,
.mob-pied > .mob-pied__barre {
max-width: var(--wp--style--global--wide-size);
}
.mob-pied__cols {
gap: clamp(1.75rem, 4vw, 3rem);
}
.mob-pied__logo img {
height: auto;
max-width: 210px;
}
.mob-pied__baseline {
max-width: 42ch;
font-size: var(--wp--preset--font-size--petit);
}
.mob-pied__region {
display: flex;
align-items: center;
gap: 0.9rem;
margin-block: 1.25rem 0;
max-width: 42ch;
font-size: var(--wp--preset--font-size--petit);
}
.mob-pied__region-lien {
flex: none;
display: block;
padding: 0.45rem 0.55rem;
background: var(--wp--preset--color--blanc);
border-radius: var(--wp--custom--rayon);
line-height: 0;
}
.mob-pied__region-lien img {
display: block;
width: 88px;
height: auto;
}
.mob-pied__titre {
margin-block-end: 1rem;
font-size: 1.1rem;
font-weight: 600;
letter-spacing: 0;
}
.mob-pied__liste {
list-style: none;
padding-left: 0;
margin: 0;
display: flex;
flex-direction: column;
gap: 0.7rem;
font-size: var(--wp--preset--font-size--petit);
}
.mob-reseaux {
list-style: none;
margin: 1.5rem 0 0;
padding: 0;
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
}
.mob-pied .mob-reseaux__lien {
display: inline-flex;
align-items: center;
justify-content: center;
width: 34px;
height: 34px;
border-radius: var(--wp--custom--rayon);
background: var(--mob-vert);
color: var(--mob-blanc) !important;
transition: background-color var(--mob-transition);
}
.mob-pied .mob-reseaux__lien:hover,
.mob-pied .mob-reseaux__lien:focus-visible {
background: var(--mob-vert-fonce);
color: var(--mob-blanc) !important;
text-decoration: none;
}
.mob-coord {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 0.85rem;
font-size: var(--wp--preset--font-size--petit);
}
.mob-coord__item {
display: flex;
align-items: flex-start;
gap: 0.7rem;
margin: 0;
}
.mob-coord__item .mob-picto {
flex: none;
margin-top: 0.12em;
color: var(--wp--preset--color--vert-lime);
}
.mob-coord__texte {
line-height: 1.55;
}
.mob-coord__tel {
font-weight: 500;
display: inline-flex;
align-items: center;
min-height: 24px;
}
@media (max-width: 781px) {
.mob-pied__liste--liens a,
.mob-pied__legal a {
display: inline-flex;
align-items: center;
min-height: 36px;
}
.mob-pied__liste {
gap: 0.2rem;
}
.mob-coord {
gap: 0.35rem;
}
.mob-coord__item {
align-items: center;
min-height: 44px;
}
.mob-coord__item .mob-picto {
margin-top: 0;
}
.mob-coord__tel {
min-height: 44px;
flex: 1;
}
.mob-pied .mob-reseaux__lien {
width: 44px;
height: 44px;
}
.mob-reseaux {
gap: 0.6rem;
}
}
.mob-pied a {
color: var(--mob-pied-lien) !important;
text-decoration: none;
transition: color var(--mob-transition);
}
.mob-pied a:hover,
.mob-pied a:focus-visible {
color: var(--mob-blanc) !important;
text-decoration: underline;
}
.mob-pied a:focus-visible {
outline: 2px solid var(--mob-vert-clair);
outline-offset: 2px;
border-radius: var(--wp--custom--rayon);
}
.mob-pied__barre {
margin-block-start: clamp(2rem, 5vw, 3rem);
padding-block-start: 1.5rem;
border-top: 1px solid var(--mob-pied-filet);
gap: 0.6rem clamp(1.5rem, 3vw, 2.5rem);
font-size: var(--wp--preset--font-size--petit);
}
.mob-pied__copyright,
.mob-pied__legal {
margin: 0;
font-size: inherit;
}
.mob-pied__legal a + a {
margin-left: clamp(1rem, 2.5vw, 2rem);
}
@media (max-width: 781px) {
.mob-pied__cols {
gap: 2rem;
}
.mob-pied__barre {
flex-direction: column;
align-items: center;
text-align: center;
}
.mob-pied__legal a + a {
margin-left: 1rem;
}
}
html body .cookieadmin_consent_inside,
html body .cookieadmin_btn,
html body .cookieadmin_cookie_modal,
html body .cookieadmin-modal-cookies-list,
html body .cookieadmin_slider,
html body .cookieadmin_slider::before,
html body .cookieadmin_re_consent {
border-radius: var(--wp--custom--rayon) !important;
}
/* mega-menu.css */
.mob-mega {
--mob-mega-bascule: 1200px;
display: flex;
align-items: center;
flex: 1 1 auto;
justify-content: flex-end;
min-width: 0;
}
.mob-mega__liste {
list-style: none;
margin: 0;
padding: 0;
display: flex;
align-items: center;
gap: clamp(0.25rem, 1.4vw, 1rem);
}
.mob-mega__item {
position: static;
margin: 0;
}
.mob-mega__declencheur,
.mob-mega__lien,
.mob-mega__bouton,
.mob-mega__liens a,
.mob-mega__panneau-inner,
.mob-mega__tiroir-tete {
box-sizing: border-box;
}
.mob-mega__declencheur,
.mob-mega__lien {
display: inline-flex;
align-items: center;
gap: 0.35rem;
background: none;
border: 0;
padding: 0.6rem 0.5rem;
font: inherit;
font-size: 0.95rem;
font-weight: 600;
color: var(--wp--preset--color--encre);
text-decoration: none;
cursor: pointer;
border-radius: var(--wp--custom--rayon);
transition: color var(--wp--custom--transition);
white-space: nowrap;
}
.mob-mega__declencheur:hover,
.mob-mega__lien:hover,
.mob-mega__item.est-ouvert > .mob-mega__declencheur {
color: var(--wp--preset--color--vert-fonce);
}
.mob-mega__item.est-ouvert > .mob-mega__declencheur .mob-mega__chevron {
transform: rotate(180deg);
}
.mob-mega__chevron {
transition: transform var(--wp--custom--transition);
flex: none;
}
.mob-mega__bouton {
display: inline-flex;
align-items: center;
background: var(--wp--preset--color--vert);
color: var(--wp--preset--color--anthracite);
font-weight: 700;
font-size: 0.95rem;
text-decoration: none;
padding: 0.7rem 1.35rem;
border-radius: var(--wp--custom--rayon);
white-space: nowrap;
transition: background-color var(--wp--custom--transition);
}
.mob-mega__bouton:hover {
background: var(--wp--preset--color--vert-clair);
color: var(--wp--preset--color--anthracite);
}
.mob-mega__declencheur:focus-visible,
.mob-mega__lien:focus-visible,
.mob-mega__bouton:focus-visible,
.mob-mega__burger:focus-visible,
.mob-mega__fermer:focus-visible,
.mob-carte:focus-visible,
.mob-mega__liens a:focus-visible,
.mob-mega__tout a:focus-visible {
outline: 2px solid var(--wp--preset--color--vert-fonce);
outline-offset: 2px;
}
.mob-mega__panneau {
position: absolute;
top: 100%;
left: 0;
right: 0;
background: var(--wp--preset--color--blanc);
border-top: 1px solid var(--wp--preset--color--gris-brume);
box-shadow: 0 18px 40px rgba(28, 29, 31, 0.13);
z-index: 50;
}
.mob-mega__panneau[hidden] {
display: none;
}
.mob-mega__panneau-inner {
max-width: calc(var(--wp--style--global--wide-size) + 2 * var(--mob-marge));
margin-inline: auto;
padding: clamp(1.5rem, 3vw, 2.25rem) var(--mob-marge) clamp(1.25rem, 2.5vw, 1.75rem);
}
.mob-mega__grille {
list-style: none;
margin: 0;
padding: 0;
display: grid;
grid-template-columns: repeat(6, minmax(0, 1fr));
gap: clamp(0.85rem, 1.6vw, 1.35rem);
}
.mob-mega__cellule {
margin: 0;
}
.mob-carte {
display: flex;
flex-direction: column;
height: 100%;
text-decoration: none;
color: inherit;
border: 1px solid var(--wp--preset--color--gris-brume);
border-radius: var(--wp--custom--rayon);
overflow: hidden;
background: var(--wp--preset--color--blanc);
transition: border-color var(--wp--custom--transition), box-shadow var(--wp--custom--transition), transform var(--wp--custom--transition);
}
.mob-carte:hover,
.mob-carte:focus-visible {
border-color: var(--wp--preset--color--vert);
box-shadow: var(--wp--preset--shadow--carte-survol);
transform: translateY(-2px);
}
.mob-carte.is-courant {
border-color: var(--wp--preset--color--vert);
background: var(--wp--preset--color--vert-brume);
}
.mob-carte__media {
position: relative;
display: block;
aspect-ratio: 16 / 9;
background: var(--wp--preset--color--gris-nuage);
overflow: hidden;
}
.mob-carte__img,
.mob-carte__vide {
position: absolute;
inset: 0;
display: block;
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 320ms cubic-bezier(0.2, 0.7, 0.3, 1);
}
.mob-carte__vide {
background: linear-gradient(135deg, var(--wp--preset--color--gris-nuage), var(--wp--preset--color--gris-brume));
}
.mob-carte:hover .mob-carte__img {
transform: scale(1.04);
}
.mob-carte__texte {
display: flex;
flex-direction: column;
gap: 0.15rem;
padding: 0.7rem 0.8rem 0.85rem;
}
.mob-carte__titre {
font-size: 0.9375rem;
font-weight: 600;
line-height: 1.3;
color: var(--wp--preset--color--anthracite);
}
.mob-carte__nombre {
font-size: 0.8125rem;
color: var(--wp--preset--color--gris-fonce);
}
.mob-mega__tout {
margin: clamp(1rem, 2vw, 1.5rem) 0 0;
padding-top: 0.9rem;
border-top: 1px solid var(--wp--preset--color--gris-brume);
font-size: 0.9375rem;
font-weight: 600;
}
.mob-mega__tout a {
color: var(--wp--preset--color--vert-fonce);
text-decoration: none;
}
.mob-mega__tout a:hover {
text-decoration: underline;
}
.mob-mega__panneau--simple .mob-mega__panneau-inner {
padding-block: 1.25rem 1.5rem;
}
.mob-mega__liens {
list-style: none;
margin: 0;
padding: 0;
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 0.6rem clamp(1rem, 2vw, 2rem);
}
.mob-mega__liens a {
display: block;
padding: 0.55rem 0.7rem;
border-radius: var(--wp--custom--rayon);
color: var(--wp--preset--color--encre);
text-decoration: none;
font-weight: 600;
font-size: 0.9375rem;
transition: background-color var(--wp--custom--transition), color var(--wp--custom--transition);
}
.mob-mega__liens a:hover {
background: var(--wp--preset--color--vert-pale);
color: var(--wp--preset--color--vert-profond);
}
.mob-mega__burger,
.mob-mega__tiroir-tete,
.mob-mega__voile {
display: none;
}
@media (max-width: 1199.98px) {
.mob-mega__burger {
display: inline-flex;
align-items: center;
gap: 0.5rem;
background: none;
border: 1px solid var(--wp--preset--color--gris-brume);
border-radius: var(--wp--custom--rayon);
padding: 0.55rem 0.85rem;
font: inherit;
font-size: 0.875rem;
font-weight: 700;
color: var(--wp--preset--color--anthracite);
cursor: pointer;
margin-left: auto;
}
.mob-mega__burger-barres {
display: flex;
flex-direction: column;
gap: 4px;
width: 18px;
}
.mob-mega__burger-barres span {
display: block;
height: 2px;
background: currentColor;
border-radius: 0;
}
.mob-mega__scene {
position: fixed;
inset: 0;
z-index: 90;
overflow: clip;
pointer-events: none;
}
.mob-mega__tiroir {
position: absolute;
inset: 0 0 0 auto;
width: min(92vw, 420px);
background: var(--wp--preset--color--blanc);
pointer-events: auto;
transform: translateX(100%);
transition: transform 260ms cubic-bezier(0.2, 0.7, 0.3, 1);
overflow-y: auto;
overflow-x: clip;
overscroll-behavior: contain;
flex-direction: column;
box-shadow: -8px 0 32px rgba(28, 29, 31, 0.18);
}
.mob-mega.est-deploye .mob-mega__tiroir {
transform: translateX(0);
}
.mob-mega__voile {
display: block;
position: fixed;
inset: 0;
background: rgba(28, 29, 31, 0.55);
z-index: 80;
}
.mob-mega__voile[hidden] {
display: none;
}
.mob-mega__tiroir-tete {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
padding: 1.1rem 1.25rem;
border-bottom: 1px solid var(--wp--preset--color--gris-brume);
position: sticky;
top: 0;
background: var(--wp--preset--color--blanc);
z-index: 2;
}
.mob-mega__tiroir-titre {
font-weight: 700;
font-size: 1rem;
color: var(--wp--preset--color--anthracite);
}
.mob-mega__fermer {
display: inline-flex;
align-items: center;
justify-content: center;
width: 44px;
height: 44px;
border: 0;
background: var(--wp--preset--color--gris-nuage);
border-radius: var(--wp--custom--rayon);
color: var(--wp--preset--color--anthracite);
cursor: pointer;
flex: none;
}
.mob-mega__liste {
flex-direction: column;
align-items: stretch;
gap: 0;
padding: 0.5rem 0 2rem;
}
.mob-mega__item {
border-bottom: 1px solid var(--wp--preset--color--gris-brume);
}
.mob-mega__item--cta {
border-bottom: 0;
padding: 1.1rem 1.25rem 0;
}
.mob-mega__declencheur,
.mob-mega__lien {
width: 100%;
justify-content: space-between;
padding: 1rem 1.25rem;
font-size: 1rem;
border-radius: 0;
min-height: 52px;
}
.mob-mega__bouton {
width: 100%;
justify-content: center;
padding-block: 0.9rem;
}
.mob-mega__panneau {
position: static;
border-top: 0;
box-shadow: none;
background: var(--wp--preset--color--gris-nuage);
}
.mob-mega__panneau-inner {
padding: 1rem 1.25rem 1.25rem;
max-width: none;
margin-inline: 0;
}
.mob-mega__grille {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 0.75rem;
}
.mob-mega__liens {
grid-template-columns: 1fr;
gap: 0.2rem;
}
.mob-mega__liens a {
padding-block: 0.7rem;
}
.mob-carte__texte {
padding: 0.55rem 0.65rem 0.7rem;
}
.mob-carte__titre {
font-size: 0.875rem;
}
.mob-carte__nombre {
font-size: 0.75rem;
}
}
.mob-menu-ouvert,
.mob-menu-ouvert body {
overflow: hidden;
}
@media (max-width: 400px) {
.mob-mega__grille {
grid-template-columns: 1fr;
}
.mob-mega__tiroir {
width: 100vw;
}
}
@media (min-width: 1200px) and (max-width: 1519.98px) {
.mob-mega__declencheur,
.mob-mega__lien {
font-size: 0.875rem;
padding: 0.55rem 0.25rem;
gap: 0.2rem;
}
.mob-mega__liste {
gap: 0.1rem;
}
.mob-mega__bouton {
font-size: 0.875rem;
padding: 0.6rem 1rem;
}
.mob-entete .mob-entete__logo img {
max-width: 150px;
}
.mob-entete .mob-entete__barre {
gap: 1rem;
}
}
@media (min-width: 1200px) and (max-width: 1339.98px) {
.mob-mega__grille {
grid-template-columns: repeat(4, minmax(0, 1fr));
}
}
@media (prefers-reduced-motion: reduce) {
.mob-carte,
.mob-carte__img,
.mob-mega__tiroir,
.mob-mega__chevron {
transition: none;
}
.mob-carte:hover {
transform: none;
}
.mob-carte:hover .mob-carte__img {
transform: none;
}
}
.mob-mega__panneau--entreprise .mob-mega__panneau-inner {
display: grid;
grid-template-columns: minmax(0, 7fr) minmax(0, 3fr);
align-items: start;
gap: clamp(1.25rem, 2.6vw, 2.25rem);
}
.mob-mega__grille--trois {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.mob-mega__identite {
padding: clamp(1rem, 2vw, 1.35rem);
border: 1px solid rgba(173, 213, 64, 0.3);
border-radius: var(--wp--custom--rayon);
background: rgba(122, 154, 34, 0.08);
}
.mob-mega__identite > .mob-mega__identite-cle {
margin: 0 0 0.5rem;
font-size: var(--wp--preset--font-size--micro);
font-weight: 700;
letter-spacing: 0.09em;
text-transform: uppercase;
color: var(--wp--preset--color--vert-fonce);
}
.mob-mega__identite > .mob-mega__identite-txt {
margin: 0 0 0.7rem;
font-size: var(--wp--preset--font-size--petit);
line-height: 1.55;
color: var(--wp--preset--color--gris-fonce);
text-wrap: pretty;
}
.mob-mega__identite-txt strong {
color: var(--wp--preset--color--anthracite);
}
.mob-mega__identite > .mob-mega__identite-devise {
margin: 0 0 0.7rem;
padding-block-start: 0.7rem;
border-block-start: 1px solid rgba(122, 154, 34, 0.28);
font-size: var(--wp--preset--font-size--micro);
font-weight: 700;
letter-spacing: 0.05em;
text-transform: uppercase;
color: var(--wp--preset--color--vert-profond);
}
.mob-mega__identite > .mob-mega__identite-lien {
margin: 0;
}
.mob-mega__identite-lien a {
display: inline-flex;
align-items: center;
min-height: 44px;
font-size: var(--wp--preset--font-size--petit);
font-weight: 700;
color: var(--wp--preset--color--vert-profond);
}
@media (max-width: 1199.98px) {
.mob-mega__panneau--entreprise .mob-mega__panneau-inner {
grid-template-columns: 1fr;
}
.mob-mega__grille--trois {
grid-template-columns: 1fr;
}
}
.mob-mega__cellule--appel {
display: none;
}
@media (min-width: 1340px) {
.mob-mega__cellule--appel.est-six {
display: block;
grid-column: span var(--mob-libres-six);
}
}
@media (min-width: 1200px) and (max-width: 1339.98px) {
.mob-mega__cellule--appel.est-quatre {
display: block;
grid-column: span var(--mob-libres-quatre);
}
}
.mob-mega__cellule--appel {
container-type: inline-size;
}
.mob-mega-appel {
box-sizing: border-box;
height: 100%;
display: flex;
flex-direction: column;
justify-content: center;
gap: 0.5rem;
padding: clamp(1.1rem, 1.8vw, 1.6rem);
border-radius: var(--wp--custom--rayon);
background: var(--wp--preset--color--ardoise);
}
.mob-mega-appel__corps {
display: flex;
flex-direction: column;
gap: 0.4rem;
}
.mob-mega-appel__titre {
margin: 0;
font-size: var(--wp--preset--font-size--titre-s);
font-weight: 800;
line-height: 1.2;
color: var(--wp--preset--color--blanc);
text-wrap: balance;
}
.mob-mega-appel__texte {
margin: 0;
font-size: var(--wp--preset--font-size--petit);
line-height: 1.55;
color: var(--wp--preset--color--blanc-casse);
text-wrap: pretty;
}
.mob-mega-appel__actions {
margin: 0.5rem 0 0;
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.5rem 1.25rem;
}
.mob-mega-appel__btn {
display: inline-flex;
align-items: center;
min-height: 44px;
padding: 0.55rem 1.15rem;
border-radius: var(--wp--custom--rayon);
background: var(--wp--preset--color--vert);
color: var(--wp--preset--color--anthracite);
font-size: var(--wp--preset--font-size--petit);
font-weight: 700;
text-decoration: none;
transition: background-color 200ms ease;
}
.mob-mega-appel__btn:hover,
.mob-mega-appel__btn:focus-visible {
background: var(--wp--preset--color--vert-lime);
}
.mob-mega-appel__lien {
display: inline-flex;
align-items: center;
min-height: 44px;
font-size: var(--wp--preset--font-size--petit);
font-weight: 600;
color: var(--wp--preset--color--vert-lime);
text-decoration: underline;
text-underline-offset: 0.22em;
}
.mob-mega-appel__lien:hover,
.mob-mega-appel__lien:focus-visible {
color: var(--wp--preset--color--blanc);
}
@container (min-width: 30rem) {
.mob-mega-appel {
flex-direction: row;
align-items: center;
gap: clamp(1.5rem, 3vw, 3rem);
padding-inline: clamp(1.5rem, 2.6vw, 2.4rem);
}
.mob-mega-appel__corps {
flex: 1 1 auto;
min-width: 0;
}
.mob-mega-appel__titre {
font-size: var(--wp--preset--font-size--titre-m);
}
.mob-mega-appel__texte {
font-size: var(--wp--preset--font-size--corps);
}
.mob-mega-appel__actions {
margin: 0;
flex: none;
flex-direction: column;
align-items: stretch;
gap: 0.65rem;
}
.mob-mega-appel__btn,
.mob-mega-appel__lien {
justify-content: center;
}
}
@container (min-width: 52rem) {
.mob-mega-appel__actions {
flex-direction: row;
align-items: center;
gap: 0.5rem 1.5rem;
}
}
/* hero.css */
.mob-hero {
position: relative;
isolation: isolate;
background-size: cover;
background-position: 50% 45%;
background-repeat: no-repeat;
color: var(--wp--preset--color--blanc);
overflow: clip;
padding: 0;
}
.wp-block-group.mob-hero > * {
margin-block: 0;
}
.mob-diapo {
position: absolute;
inset: 0;
z-index: -2;
--mob-diapo-duree: calc(var(--mob-diapo-n, 5) * 6s);
}
.mob-diapo__img {
position: absolute;
inset: 0;
display: block;
width: 100%;
height: 100%;
object-fit: cover;
object-position: 50% 45%;
opacity: 0;
}
.mob-diapo__img:first-child {
opacity: 1;
}
@media (prefers-reduced-motion: no-preference) {
.mob-diapo.est-prete .mob-diapo__img {
animation: mob-diapo-fondu var(--mob-diapo-duree) linear infinite;
animation-delay: var(--mob-diapo-delai, 0s);
}
}
@keyframes mob-diapo-fondu {
0%   { opacity: 1; }
16%  { opacity: 1; }
20%  { opacity: 0; }
96%  { opacity: 0; }
100% { opacity: 1; }
}
.mob-hero::before {
content: "";
position: absolute;
inset: 0;
z-index: -1;
background:
linear-gradient(96deg, rgba(20, 26, 33, 0.74) 0%, rgba(20, 26, 33, 0.7) 55%, rgba(20, 26, 33, 0.64) 78%, rgba(20, 26, 33, 0.22) 90%, rgba(20, 26, 33, 0.04) 100%);
}
.mob-hero::after {
content: "";
position: absolute;
inset: auto 0 0 0;
height: 46%;
z-index: -1;
background: linear-gradient(180deg, rgba(20, 26, 33, 0) 0%, rgba(20, 26, 33, 0.34) 50%, rgba(20, 26, 33, 0.6) 100%);
}
.mob-hero__inner {
max-width: calc(var(--wp--style--global--wide-size) + 2 * var(--mob-marge));
margin-inline: auto;
padding-inline: var(--mob-marge);
padding-block: clamp(2.25rem, 5.5vw, 4rem);
display: flex;
flex-direction: column;
align-items: flex-start;
}
@media (min-width: 901px) {
.mob-hero {
min-height: calc(100svh - var(--mob-entete-total));
display: flex;
align-items: stretch;
}
.mob-hero__inner {
width: 100%;
display: grid;
grid-template-rows: 1fr auto;
row-gap: clamp(2rem, 4vw, 3.25rem);
align-items: stretch;
align-self: stretch;
min-height: calc(100svh - var(--mob-entete-total));
}
.mob-hero__texte {
align-self: center;
width: 100%;
}
}
.mob-hero__texte {
max-width: min(58rem, 74vw);
}
.mob-hero__texte > .mob-hero__titre {
margin-block: 0;
}
.mob-hero__texte > .mob-hero__chapo {
margin-block: 1.6rem 0;
}
.mob-hero__texte > .mob-hero__actions {
margin-block: clamp(2rem, 4vw, 2.75rem) 0;
}
.mob-hero .mob-hero__titre {
margin: 0;
color: var(--wp--preset--color--blanc);
text-wrap: balance;
}
.mob-hero__chapo {
margin: 1.6rem 0 0;
color: var(--wp--preset--color--blanc-casse);
font-size: clamp(1.0625rem, 1.35vw, 1.25rem);
line-height: 1.5;
max-width: min(58rem, 74vw);
text-wrap: pretty;
}
@media (min-width: 901px) {
.mob-hero .mob-hero__titre {
font-size: clamp(2.125rem, 3.05vw, 2.875rem);
}
}
@media (min-width: 901px) and (max-height: 760px) {
.mob-hero .mob-hero__titre {
font-size: clamp(1.875rem, 2.7vw, 2.375rem);
}
.mob-hero__inner {
padding-block: clamp(1.5rem, 3vw, 2.25rem);
}
}
.mob-hero__actions {
display: flex;
flex-wrap: wrap;
gap: 0.85rem;
margin-top: clamp(2rem, 4vw, 2.75rem);
}
.mob-hero__cta .wp-block-button__link,
.mob-hero__cta--secondaire .wp-block-button__link {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
box-sizing: border-box;
min-height: 48px;
padding: 0.85rem 1.75rem;
border-radius: var(--wp--custom--rayon);
font-weight: 700;
font-size: var(--wp--preset--font-size--corps);
text-decoration: none;
transition: background-color var(--mob-transition), border-color var(--mob-transition);
}
.mob-hero__cta .wp-block-button__link {
background: var(--wp--preset--color--vert);
color: var(--wp--preset--color--anthracite);
border: 2px solid var(--wp--preset--color--vert);
}
.mob-hero__cta .wp-block-button__link:hover,
.mob-hero__cta .wp-block-button__link:focus-visible {
background: var(--wp--preset--color--vert-clair);
border-color: var(--wp--preset--color--vert-clair);
color: var(--wp--preset--color--anthracite);
}
.mob-hero__cta--secondaire .wp-block-button__link {
background: transparent;
color: var(--wp--preset--color--blanc);
border: 2px solid rgba(255, 255, 255, 0.55);
}
.mob-hero__cta--secondaire .wp-block-button__link:hover,
.mob-hero__cta--secondaire .wp-block-button__link:focus-visible {
background: rgba(255, 255, 255, 0.12);
border-color: var(--wp--preset--color--blanc);
color: var(--wp--preset--color--blanc);
}
.mob-hero a:focus-visible {
outline: 3px solid var(--wp--preset--color--vert-lime);
outline-offset: 3px;
}
.mob-preuves {
list-style: none;
margin: clamp(2.25rem, 5vw, 3rem) 0 0;
padding: clamp(1.4rem, 2.4vw, 1.85rem) 0 0;
border-top: 1px solid rgba(173, 213, 64, 0.35);
display: flex;
flex-wrap: wrap;
gap: 0.85rem clamp(1.5rem, 3.5vw, 3rem);
width: 100%;
font-size: var(--wp--preset--font-size--petit);
color: var(--wp--preset--color--blanc-casse);
}
.mob-hero__inner > .mob-preuves {
margin-block-start: clamp(2.25rem, 5vw, 3rem);
}
@media (min-width: 901px) {
.mob-hero__inner > .mob-preuves {
margin-block-start: 0;
}
}
.mob-preuves__item {
display: flex;
align-items: center;
gap: 0.5rem;
margin: 0;
}
.mob-preuves__coche {
flex: none;
color: var(--wp--preset--color--vert-lime);
}
.mob-preuves strong {
color: var(--wp--preset--color--blanc);
font-weight: 700;
}
@media (max-width: 900px) {
.mob-hero::before {
background: linear-gradient(178deg, rgba(20, 26, 33, 0.72) 0%, rgba(20, 26, 33, 0.68) 55%, rgba(20, 26, 33, 0.6) 100%);
}
.mob-hero__texte,
.mob-hero__chapo {
max-width: none;
}
}
@media (max-width: 600px) {
.mob-hero .mob-hero__titre {
font-size: clamp(1.75rem, 7.4vw, 2.125rem);
letter-spacing: -0.015em;
}
.mob-hero__chapo {
font-size: var(--wp--preset--font-size--corps);
}
.mob-hero__inner {
padding-block: clamp(2rem, 7vw, 3rem);
}
.mob-hero__actions {
width: 100%;
}
.mob-hero__cta,
.mob-hero__cta--secondaire {
flex: 1 1 100%;
}
.mob-preuves {
flex-direction: column;
gap: 0.65rem;
}
}
@media (prefers-reduced-motion: reduce) {
.mob-hero__cta,
.mob-hero__cta--secondaire {
transition: none;
}
}
/* accueil.css */
.mob-sec {
padding-block: clamp(3.5rem, 7vw, 6rem);
padding-inline: 0;
}
.mob-sec__inner {
max-width: calc(var(--wp--style--global--wide-size) + 2 * var(--mob-marge));
margin-inline: auto;
padding-inline: var(--mob-marge);
}
.entry-content > .mob-sec,
.entry-content > .mob-hero,
.mob-main > .mob-sec,
.mob-main > .mob-hero {
margin-block: 0;
}
.mob-sec--claire {
background: var(--wp--preset--color--gris-nuage);
}
.mob-sec--verte {
background: var(--wp--preset--color--vert-brume);
}
.mob-sec--sombre {
background: var(--wp--preset--color--ardoise);
color: var(--wp--preset--color--blanc-casse);
}
.mob-sec--sombre :is(h2, h3) {
color: var(--wp--preset--color--blanc);
}
.mob-tete {
max-width: 60rem;
margin-block-end: clamp(2rem, 4vw, 3rem);
}
.mob-tete--centree {
margin-inline: auto;
text-align: center;
}
.mob-tete > .wp-block-heading:first-child {
margin-block-start: 0;
}
.mob-tete__chapo {
margin-block: 1rem 0;
font-size: var(--wp--preset--font-size--intro);
color: var(--wp--preset--color--gris-fonce);
line-height: 1.6;
text-wrap: pretty;
}
.mob-sec--sombre .mob-tete__chapo {
color: var(--wp--preset--color--blanc-casse);
}
.mob-logos__intro {
margin-block: 0 clamp(1.75rem, 3vw, 2.5rem);
font-size: var(--wp--preset--font-size--titre-s);
font-weight: 700;
color: var(--wp--preset--color--anthracite);
}
.mob-logos__piste {
--mob-logos-duree: 30s;
display: flex;
width: 100%;
overflow: hidden;
gap: var(--mob-logos-ecart, clamp(0.75rem, 2vw, 1.25rem));
mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
-webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
.mob-logos__liste {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex: none;
align-items: stretch;
gap: var(--mob-logos-ecart, clamp(0.75rem, 2vw, 1.25rem));
min-width: max-content;
animation: mob-defile var(--mob-logos-duree) linear infinite;
}
@keyframes mob-defile {
from { transform: translateX(0); }
to { transform: translateX(calc(-100% - var(--mob-logos-ecart, 1.25rem))); }
}
.mob-logos__piste:hover .mob-logos__liste,
.mob-logos__piste:focus-within .mob-logos__liste {
animation-play-state: paused;
}
.mob-logos__item {
margin: 0;
flex: none;
}
.mob-logos__plaque {
display: flex;
align-items: center;
justify-content: center;
box-sizing: border-box;
width: 220px;
height: 100%;
min-height: 132px;
padding: 1rem 1.5rem;
background: var(--wp--preset--color--blanc);
border: 1px solid var(--wp--preset--color--gris-brume);
border-radius: var(--wp--custom--rayon);
transition: border-color var(--mob-transition), box-shadow var(--mob-transition);
}
.mob-logos__plaque--sombre {
background: var(--wp--preset--color--ardoise);
border-color: var(--wp--preset--color--ardoise);
}
.mob-logos__plaque--lien:hover,
.mob-logos__plaque--lien:focus-visible {
border-color: var(--wp--preset--color--vert);
box-shadow: var(--wp--preset--shadow--carte);
}
.mob-logos__plaque--lien:focus-visible {
outline: 2px solid var(--wp--preset--color--vert-fonce);
outline-offset: 3px;
}
.mob-logos__img {
max-width: 100%;
width: auto;
object-fit: contain;
}
@media (prefers-reduced-motion: reduce) {
.mob-logos__liste {
animation: none;
}
.mob-logos__piste {
overflow-x: auto;
}
}
.mob-familles,
.mob-realisations,
.mob-articles {
list-style: none;
margin: 0;
padding: 0;
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: clamp(1.25rem, 2.5vw, 2rem);
}
.mob-famille,
.mob-realisation,
.mob-article {
margin: 0;
}
@media (min-width: 1080px) {
.mob-familles--quatre {
grid-template-columns: repeat(4, minmax(0, 1fr));
}
}
.mob-familles + .mob-familles__note {
margin-block: 1.1rem 0;
font-size: var(--wp--preset--font-size--petit);
color: var(--wp--preset--color--gris-fonce);
}
.mob-famille__carte,
.mob-realisation__lien,
.mob-article__lien {
display: flex;
flex-direction: column;
height: 100%;
background: var(--wp--preset--color--blanc);
border: 1px solid var(--wp--preset--color--gris-brume);
border-radius: var(--wp--custom--rayon);
overflow: hidden;
text-decoration: none !important;
color: inherit;
transition: border-color var(--mob-transition), box-shadow var(--mob-transition), transform var(--mob-transition);
}
.mob-famille__carte:hover,
.mob-famille__carte:focus-within {
border-color: var(--wp--preset--color--vert);
box-shadow: var(--wp--preset--shadow--carte-survol);
}
.mob-realisation__lien:hover,
.mob-realisation__lien:focus-visible,
.mob-article__lien:hover,
.mob-article__lien:focus-visible {
border-color: var(--wp--preset--color--vert);
box-shadow: var(--wp--preset--shadow--carte-survol);
transform: translateY(-3px);
}
.mob-realisation__lien:focus-visible,
.mob-article__lien:focus-visible,
.mob-faq__question:focus-visible,
.mob-famille__titre a:focus-visible,
.mob-famille__cat a:focus-visible,
.mob-famille__tout:focus-visible {
outline: 2px solid var(--wp--preset--color--vert-fonce);
outline-offset: 3px;
}
.mob-famille__media,
.mob-realisation__media,
.mob-article__media {
position: relative;
display: block;
aspect-ratio: 16 / 10;
background: var(--wp--preset--color--gris-nuage);
overflow: hidden;
}
.mob-famille__img,
.mob-realisation__img,
.mob-article__img,
.mob-famille__vide,
.mob-realisation__vide,
.mob-article__vide {
display: block;
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 380ms cubic-bezier(0.2, 0.7, 0.3, 1);
}
.mob-famille__carte:hover .mob-famille__img,
.mob-realisation__lien:hover .mob-realisation__img,
.mob-article__lien:hover .mob-article__img {
transform: scale(1.04);
}
.mob-famille__corps,
.mob-realisation__corps,
.mob-article__corps {
display: flex;
flex-direction: column;
flex: 1;
gap: 0.5rem;
padding: clamp(1.1rem, 2vw, 1.5rem);
}
.mob-famille__titre,
.mob-realisation__titre,
.mob-article__titre {
font-size: var(--wp--preset--font-size--titre-s);
font-weight: 700;
line-height: 1.25;
color: var(--wp--preset--color--anthracite);
}
.mob-famille__intro,
.mob-article__extrait {
font-size: var(--wp--preset--font-size--petit);
color: var(--wp--preset--color--gris-fonce);
line-height: 1.6;
flex: 1;
}
.mob-famille__corps > .mob-famille__intro {
flex: none;
}
@media (min-width: 701px) {
.mob-famille__corps > .mob-famille__intro {
min-height: calc(3 * 1.6em);
}
}
.mob-famille__titre {
margin-block: 0;
}
.mob-famille__titre a {
color: inherit;
text-decoration: none;
}
.mob-famille__titre a:hover {
color: var(--wp--preset--color--vert-fonce);
}
.mob-famille__intro {
margin-block: 0;
}
.mob-famille__cats {
list-style: none;
margin: 0.35rem 0 0;
padding: 0;
display: flex;
flex-direction: column;
flex: 1;
}
.mob-famille__cat {
margin: 0;
}
.mob-famille__cat + .mob-famille__cat {
border-top: 1px solid var(--wp--preset--color--gris-brume);
}
.mob-famille__cat a {
position: relative;
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
align-items: center;
gap: 0.75rem;
min-height: 38px;
padding: 0.35rem 0.6rem;
margin-inline: -0.6rem;
border-radius: var(--wp--custom--rayon);
font-size: var(--wp--preset--font-size--petit);
line-height: 1.3;
text-decoration: none;
transition: background-color var(--mob-transition), color var(--mob-transition);
}
.mob-famille__cat a::before {
content: "";
position: absolute;
inset-inline-start: 0;
top: 50%;
width: 2px;
height: 0;
transform: translateY(-50%);
border-radius: var(--wp--custom--rayon);
background: linear-gradient(180deg, var(--wp--preset--color--vert), var(--wp--preset--color--vert-lime));
transition: height 320ms cubic-bezier(0.22, 0.7, 0.28, 1);
}
.mob-famille__cat-nom {
font-weight: 600;
color: var(--wp--preset--color--encre);
overflow-wrap: anywhere;
transition: color var(--mob-transition);
}
.mob-famille__cat-n {
font-size: var(--wp--preset--font-size--micro);
font-weight: 700;
font-variant-numeric: tabular-nums;
letter-spacing: 0.02em;
color: var(--wp--preset--color--gris-fonce);
transition: color var(--mob-transition);
}
.mob-famille__cat a:hover,
.mob-famille__cat a:focus-visible {
background: var(--wp--preset--color--vert-brume);
}
.mob-famille__cat a:hover::before,
.mob-famille__cat a:focus-visible::before {
height: 58%;
}
.mob-famille__cat a:hover .mob-famille__cat-nom,
.mob-famille__cat a:focus-visible .mob-famille__cat-nom,
.mob-famille__cat a:hover .mob-famille__cat-n,
.mob-famille__cat a:focus-visible .mob-famille__cat-n {
color: var(--wp--preset--color--vert-profond);
}
.mob-famille__cat--reste {
border-top: 1px solid var(--wp--preset--color--gris-brume);
}
.mob-famille__cat--reste .mob-famille__cat-nom {
display: block;
padding-block: 0.55rem 0.15rem;
font-size: var(--wp--preset--font-size--micro);
font-weight: 600;
color: var(--wp--preset--color--gris-fonce);
}
.mob-famille__pied {
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
gap: 0.5rem 1rem;
margin-block: 0.75rem 0;
padding-top: 0.85rem;
border-top: 1px solid var(--wp--preset--color--gris-brume);
}
.mob-famille__corps > .mob-famille__pied {
margin-block-start: auto;
}
.mob-famille__nombre {
font-size: var(--wp--preset--font-size--petit);
font-weight: 700;
color: var(--wp--preset--color--vert-fonce);
}
.mob-famille__tout {
display: inline-flex;
align-items: center;
min-height: 32px;
font-size: var(--wp--preset--font-size--petit);
font-weight: 700;
color: var(--wp--preset--color--vert-fonce);
text-decoration: none;
white-space: nowrap;
}
.mob-famille__tout span[aria-hidden] {
display: inline-block;
transition: transform var(--mob-transition);
}
.mob-famille__tout:hover {
text-decoration: underline;
}
.mob-famille__tout:hover span[aria-hidden] {
transform: translateX(4px);
}
.mob-realisation__meta,
.mob-article__date {
font-size: var(--wp--preset--font-size--micro);
font-weight: 700;
letter-spacing: 0.07em;
text-transform: uppercase;
color: var(--wp--preset--color--vert-fonce);
}
.mob-cartes {
list-style: none;
margin: 0;
padding: 0;
display: grid;
gap: clamp(1.25rem, 2.5vw, 2rem);
}
.mob-cartes--trois {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.mob-cartes--cinq {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.mob-carte-simple {
margin: 0;
padding: clamp(1.35rem, 2.5vw, 1.85rem);
background: var(--wp--preset--color--blanc);
border: 1px solid var(--wp--preset--color--gris-brume);
border-radius: var(--wp--custom--rayon);
border-top: 3px solid var(--wp--preset--color--vert);
}
.mob-sec--sombre .mob-carte-simple {
background: rgba(255, 255, 255, 0.05);
border-color: rgba(255, 255, 255, 0.14);
border-top-color: var(--wp--preset--color--vert-lime);
}
.mob-carte-simple__titre {
margin-block: 0 0.6rem;
font-size: var(--wp--preset--font-size--titre-s);
font-weight: 700;
line-height: 1.3;
color: var(--wp--preset--color--anthracite);
}
.mob-sec--sombre .mob-carte-simple__titre {
color: var(--wp--preset--color--blanc);
}
.mob-carte-simple__texte {
margin: 0;
font-size: var(--wp--preset--font-size--petit);
line-height: 1.65;
color: var(--wp--preset--color--gris-fonce);
}
.mob-sec--sombre .mob-carte-simple__texte {
color: var(--wp--preset--color--blanc-casse);
}
.mob-cta {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: clamp(1.5rem, 3vw, 2.5rem);
padding: clamp(1.75rem, 4vw, 3rem);
background: var(--wp--preset--color--ardoise);
border-radius: var(--wp--custom--rayon);
}
.mob-cta__texte {
flex: 1 1 22rem;
}
.mob-cta__titre {
margin-block: 0 0.6rem;
font-size: var(--wp--preset--font-size--titre-m);
font-weight: 700;
line-height: 1.25;
color: var(--wp--preset--color--blanc);
}
.mob-cta__chapo {
margin: 0;
color: var(--wp--preset--color--blanc-casse);
line-height: 1.6;
}
.mob-cta__actions {
display: flex;
flex-wrap: wrap;
gap: 0.85rem;
flex: none;
}
.mob-btn,
.mob-btn--secondaire {
display: inline-flex;
align-items: center;
justify-content: center;
box-sizing: border-box;
min-height: 48px;
padding: 0.85rem 1.75rem;
border-radius: var(--wp--custom--rayon);
font-weight: 700;
text-decoration: none !important;
transition: background-color var(--mob-transition), border-color var(--mob-transition);
}
.mob-btn {
background: var(--wp--preset--color--vert);
color: var(--wp--preset--color--anthracite) !important;
border: 2px solid var(--wp--preset--color--vert);
}
.mob-btn:hover,
.mob-btn:focus-visible {
background: var(--wp--preset--color--vert-clair);
border-color: var(--wp--preset--color--vert-clair);
}
.mob-btn--secondaire {
background: transparent;
color: var(--wp--preset--color--blanc) !important;
border: 2px solid rgba(255, 255, 255, 0.55);
}
.mob-btn--secondaire:hover,
.mob-btn--secondaire:focus-visible {
background: rgba(255, 255, 255, 0.12);
border-color: var(--wp--preset--color--blanc);
}
.mob-sec__inner > p > a:only-child:not(.mob-lien-fleche) {
display: inline-flex;
align-items: center;
gap: 0.45rem;
min-height: 44px;
font-weight: 700;
text-decoration: none;
color: var(--wp--preset--color--vert-fonce);
}
.mob-sec__inner > p > a:only-child:not(.mob-lien-fleche)::after {
content: "\2192";
transition: transform var(--mob-transition);
}
.mob-sec__inner > p > a:only-child:not(.mob-lien-fleche):hover {
text-decoration: underline;
}
.mob-sec__inner > p > a:only-child:not(.mob-lien-fleche):hover::after {
transform: translateX(4px);
}
@media (max-width: 1079.98px) {
.mob-familles,
.mob-realisations,
.mob-articles,
.mob-cartes--trois,
.mob-cartes--cinq {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (max-width: 700px) {
.mob-familles,
.mob-realisations,
.mob-articles,
.mob-cartes--trois,
.mob-cartes--cinq {
grid-template-columns: 1fr;
}
.mob-logos__plaque {
width: 170px;
min-height: 108px;
padding: 0.85rem 1.1rem;
}
.mob-logos__intro {
font-size: var(--wp--preset--font-size--corps);
}
.mob-cta {
flex-direction: column;
align-items: flex-start;
}
.mob-cta__actions {
width: 100%;
}
.mob-btn,
.mob-btn--secondaire {
flex: 1 1 100%;
}
.mob-faq__question {
font-size: var(--wp--preset--font-size--corps);
}
}
@media (prefers-reduced-motion: reduce) {
.mob-famille__carte,
.mob-realisation__lien,
.mob-article__lien,
.mob-famille__img,
.mob-realisation__img,
.mob-article__img,
.mob-faq__chevron,
.mob-famille__tout span[aria-hidden] {
transition: none;
}
.mob-realisation__lien:hover,
.mob-article__lien:hover {
transform: none;
}
.mob-famille__carte:hover .mob-famille__img {
transform: none;
}
}
.mob-appel {
margin: 0;
}
.mob-appel__carte {
position: relative;
isolation: isolate;
overflow: clip;
display: flex;
flex-direction: column;
height: 100%;
box-sizing: border-box;
padding: clamp(1.4rem, 2.6vw, 2rem);
border-radius: var(--wp--custom--rayon);
background: var(--wp--preset--color--ardoise);
color: var(--wp--preset--color--blanc-casse);
}
.mob-appel__carte::before {
content: "";
position: absolute;
inset: -40% -30% auto auto;
width: 22rem;
height: 20rem;
z-index: -1;
pointer-events: none;
background: radial-gradient(closest-side, rgba(173, 213, 64, 0.22), transparent);
}
.mob-appel__carte > .mob-appel__titre {
margin: 0 0 0.6rem;
font-size: var(--wp--preset--font-size--titre-s);
font-weight: 700;
line-height: 1.25;
color: var(--wp--preset--color--blanc);
}
.mob-appel__carte > .mob-appel__texte {
margin: 0;
font-size: var(--wp--preset--font-size--petit);
line-height: 1.6;
color: var(--wp--preset--color--blanc-casse);
text-wrap: pretty;
}
.mob-appel__carte > .mob-appel__actions {
display: flex;
flex-wrap: wrap;
gap: 0.6rem;
margin: auto 0 0;
padding-block-start: 1.25rem;
}
.mob-appel__actions > a {
flex: 1 1 auto;
justify-content: center;
min-height: 44px;
padding-inline: 1rem;
font-size: var(--wp--preset--font-size--petit);
}
.mob-appel__carte > .mob-appel__coord {
list-style: none;
margin: 1rem 0 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 0.15rem;
}
.mob-appel__coord li {
margin: 0;
}
.mob-appel__tel,
.mob-appel__horaires {
display: inline-flex;
align-items: center;
gap: 0.55rem;
min-height: 44px;
font-size: var(--wp--preset--font-size--petit);
color: var(--wp--preset--color--blanc-casse);
text-decoration: none;
}
.mob-appel__tel {
font-weight: 700;
color: var(--wp--preset--color--blanc);
overflow-wrap: anywhere;
}
.mob-appel__tel .mob-picto,
.mob-appel__horaires .mob-picto {
color: var(--wp--preset--color--vert-lime);
flex: none;
}
.mob-appel__coord a:hover,
.mob-appel__coord a:focus-visible {
text-decoration: underline;
text-underline-offset: 3px;
}
/* editorial.css */
.mob-sec--photo {
position: relative;
isolation: isolate;
overflow: clip;
padding-block: clamp(4rem, 8vw, 7rem);
color: var(--wp--preset--color--blanc-casse);
}
.mob-fond {
position: absolute;
inset: 0;
z-index: 0;
}
.mob-fond__img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
object-position: 60% 50%;
}
.mob-fond__voile {
position: absolute;
inset: 0;
background:
linear-gradient(97deg, rgba(14, 19, 25, 0.95) 0%, rgba(14, 19, 25, 0.9) 46%, rgba(14, 19, 25, 0.68) 74%, rgba(14, 19, 25, 0.55) 100%),
linear-gradient(0deg, rgba(14, 19, 25, 0.6) 0%, rgba(14, 19, 25, 0) 55%);
}
.mob-sec--photo > .mob-sec__inner {
position: relative;
z-index: 1;
}
.wp-block-group.mob-editorial {
display: grid;
grid-template-columns: minmax(0, 7fr) minmax(0, 4fr);
align-items: center;
gap: clamp(1.5rem, 3vw, 2.5rem);
}
.wp-block-group.mob-editorial > * {
margin-block: 0;
}
.wp-block-group.mob-verre {
position: relative;
overflow: clip;
padding: clamp(1.6rem, 3.2vw, 2.9rem);
border: 1px solid rgba(255, 255, 255, 0.18);
border-radius: var(--wp--custom--rayon);
background: rgba(18, 25, 33, 0.52);
backdrop-filter: blur(18px) saturate(135%);
-webkit-backdrop-filter: blur(18px) saturate(135%);
box-shadow: 0 24px 60px rgba(6, 10, 14, 0.42);
}
@supports not ((backdrop-filter: blur(2px)) or (-webkit-backdrop-filter: blur(2px))) {
.wp-block-group.mob-verre {
background: rgba(18, 25, 33, 0.86);
}
}
.wp-block-group.mob-verre::before {
content: "";
position: absolute;
inset: 0;
border-radius: inherit;
pointer-events: none;
background:
linear-gradient(142deg, rgba(255, 255, 255, 0.17) 0%, rgba(255, 255, 255, 0.05) 26%, rgba(255, 255, 255, 0) 52%),
linear-gradient(180deg, rgba(255, 255, 255, 0.22) 0%, rgba(255, 255, 255, 0) 2px);
}
.wp-block-group.mob-verre > * + * {
margin-block-start: 1.15rem;
}
.wp-block-group.mob-verre > h2 {
margin-block: 0.6rem 0;
color: var(--wp--preset--color--blanc);
max-width: 22ch;
}
.wp-block-group.mob-verre > p {
color: var(--wp--preset--color--blanc-casse);
line-height: 1.65;
text-wrap: pretty;
}
.wp-block-group.mob-verre > .mob-editorial__actions {
display: flex;
flex-wrap: wrap;
gap: 0.85rem;
margin-block-start: clamp(1.4rem, 2.5vw, 1.9rem);
}
.mob-reperes {
padding: clamp(1.4rem, 2.6vw, 2rem);
border: 1px solid rgba(255, 255, 255, 0.16);
border-radius: var(--wp--custom--rayon);
background: rgba(18, 25, 33, 0.46);
backdrop-filter: blur(14px) saturate(130%);
-webkit-backdrop-filter: blur(14px) saturate(130%);
}
@supports not ((backdrop-filter: blur(2px)) or (-webkit-backdrop-filter: blur(2px))) {
.mob-reperes {
background: rgba(18, 25, 33, 0.85);
}
}
.mob-reperes__tete {
display: flex;
flex-direction: column;
margin: 0 0 1.1rem;
padding-block-end: 1.1rem;
border-bottom: 1px solid rgba(255, 255, 255, 0.16);
}
.mob-reperes__total {
font-size: clamp(2.4rem, 5vw, 3.25rem);
font-weight: 700;
line-height: 1;
letter-spacing: -0.02em;
color: var(--wp--preset--color--vert-lime);
font-variant-numeric: tabular-nums;
}
.mob-reperes__legende {
margin-block-start: 0.35rem;
font-size: var(--wp--preset--font-size--petit);
color: var(--wp--preset--color--blanc-casse);
}
.mob-reperes__liste {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 0.35rem;
}
.mob-reperes__item {
margin: 0;
}
.mob-reperes__lien {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
box-sizing: border-box;
min-height: 44px;
padding: 0.45rem 0.75rem;
border: 1px solid transparent;
border-radius: var(--wp--custom--rayon);
font-size: var(--wp--preset--font-size--petit);
font-weight: 600;
color: var(--wp--preset--color--blanc) !important;
text-decoration: none;
transition: background-color var(--mob-transition), border-color var(--mob-transition), transform var(--mob-transition);
}
.mob-reperes__lien:hover,
.mob-reperes__lien:focus-visible {
background: rgba(255, 255, 255, 0.12);
border-color: rgba(255, 255, 255, 0.28);
text-decoration: none;
}
.mob-reperes__n {
flex: none;
min-width: 2.4em;
padding: 0.15rem 0.5rem;
border-radius: var(--wp--custom--rayon);
background: rgba(255, 255, 255, 0.14);
font-variant-numeric: tabular-nums;
text-align: center;
}
.mob-reperes__note {
margin: 0.9rem 0 0;
font-size: var(--wp--preset--font-size--micro);
line-height: 1.5;
color: rgba(255, 255, 255, 0.78);
}
@media (prefers-reduced-motion: no-preference) {
.mob-js .mob-anim {
opacity: 0;
transform: translateY(22px);
transition: opacity 760ms cubic-bezier(0.22, 0.7, 0.28, 1), transform 760ms cubic-bezier(0.22, 0.7, 0.28, 1);
transition-delay: calc((var(--mob-anim-rang, 1) - 1) * 130ms);
}
.mob-js .mob-anim.est-visible {
opacity: 1;
transform: none;
}
.mob-sec--photo .mob-fond__img {
animation: mob-derive 34s ease-in-out infinite alternate;
}
}
@keyframes mob-derive {
from { transform: scale(1.045) translate3d(-0.6%, 0, 0); }
to   { transform: scale(1.08) translate3d(0.6%, -0.8%, 0); }
}
@media (max-width: 1023.98px) {
.wp-block-group.mob-editorial {
grid-template-columns: 1fr;
gap: clamp(1.25rem, 3vw, 1.75rem);
}
.wp-block-group.mob-verre > h2 {
max-width: none;
}
.mob-reperes__liste {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 0.5rem;
}
}
@media (max-width: 600px) {
.mob-fond__voile {
background:
linear-gradient(180deg, rgba(14, 19, 25, 0.92) 0%, rgba(14, 19, 25, 0.86) 60%, rgba(14, 19, 25, 0.9) 100%);
}
.mob-reperes__liste {
grid-template-columns: 1fr;
}
.wp-block-group.mob-verre > .mob-editorial__actions > a {
flex: 1 1 100%;
}
}
/* cartes.css */
.mob-sec--atelier {
position: relative;
isolation: isolate;
overflow: clip;
background: #E3E9F1;
}
.mob-sec--atelier .mob-cx {
border-color: rgba(44, 60, 79, 0.16);
box-shadow: 0 2px 10px rgba(20, 27, 35, 0.07);
}
.mob-cartes-x {
list-style: none;
margin: 0;
padding: 0;
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: clamp(1rem, 2.2vw, 1.75rem);
perspective: 1400px;
}
.mob-cartes-x--six {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.mob-cx {
position: relative;
overflow: clip;
margin: 0;
padding: clamp(1.5rem, 2.6vw, 2.1rem);
border: 1px solid var(--wp--preset--color--gris-brume);
border-radius: var(--wp--custom--rayon);
background: var(--wp--preset--color--blanc);
box-shadow: 0 1px 2px rgba(20, 27, 35, 0.05);
transition:
transform 420ms cubic-bezier(0.22, 0.7, 0.28, 1),
box-shadow 420ms cubic-bezier(0.22, 0.7, 0.28, 1),
border-color 420ms ease;
}
.mob-cx::before {
content: "";
position: absolute;
inset: 0 auto auto 0;
width: 34%;
height: 3px;
background: var(--wp--preset--color--vert);
transition: width 520ms cubic-bezier(0.22, 0.7, 0.28, 1);
}
.mob-cx__picto {
display: inline-flex;
align-items: center;
justify-content: center;
width: 54px;
height: 54px;
margin-block-end: 1.1rem;
border: 1px solid rgba(122, 154, 34, 0.28);
border-radius: var(--wp--custom--rayon);
background: rgba(122, 154, 34, 0.12);
color: var(--wp--preset--color--vert-profond);
transition: background-color 420ms ease, border-color 420ms ease;
}
.mob-cx__picto svg {
width: 26px;
height: 26px;
display: block;
}
.mob-cx--nu .mob-cx__texte {
font-size: var(--wp--preset--font-size--corps);
}
.mob-cx__titre {
margin: 0 0 0.55rem;
font-size: var(--wp--preset--font-size--titre-s);
font-weight: 700;
line-height: 1.25;
color: var(--wp--preset--color--anthracite);
}
.mob-cx__texte {
margin: 0;
font-size: var(--wp--preset--font-size--petit);
line-height: 1.65;
color: var(--wp--preset--color--gris-fonce);
text-wrap: pretty;
}
@media (hover: hover) and (pointer: fine) {
.mob-cx:hover {
transform: translateY(-3px);
border-color: rgba(122, 154, 34, 0.55);
box-shadow: 0 10px 22px rgba(20, 27, 35, 0.1);
}
.mob-cx:hover::before {
width: 100%;
}
.mob-cx:hover .mob-cx__picto {
background: rgba(122, 154, 34, 0.2);
border-color: rgba(122, 154, 34, 0.5);
}
}
.mob-sec--sombre {
overflow: clip;
}
.mob-cx--sombre {
border-color: rgba(255, 255, 255, 0.14);
background: rgba(255, 255, 255, 0.045);
box-shadow: none;
}
.mob-cx--sombre .mob-cx__titre {
color: var(--wp--preset--color--blanc);
}
.mob-cx--sombre .mob-cx__texte {
color: var(--wp--preset--color--blanc-casse);
}
.mob-cx--sombre .mob-cx__picto {
color: var(--wp--preset--color--vert-lime);
border-color: rgba(173, 213, 64, 0.34);
background: rgba(173, 213, 64, 0.13);
}
@media (hover: hover) and (pointer: fine) {
.mob-cx--sombre:hover {
border-color: rgba(173, 213, 64, 0.5);
background: rgba(255, 255, 255, 0.075);
box-shadow: 0 10px 22px rgba(6, 10, 14, 0.4);
}
}
.mob-reals {
list-style: none;
margin: 0;
padding: 0;
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: clamp(1rem, 2.2vw, 1.75rem);
perspective: 1400px;
}
.mob-real {
margin: 0;
}
.mob-real__lien {
position: relative;
display: block;
overflow: clip;
aspect-ratio: 4 / 5;
border-radius: var(--wp--custom--rayon);
background: var(--wp--preset--color--ardoise);
text-decoration: none !important;
transition: transform 460ms cubic-bezier(0.22, 0.7, 0.28, 1), box-shadow 460ms cubic-bezier(0.22, 0.7, 0.28, 1);
}
.mob-real__media,
.mob-real__img,
.mob-real__vide {
position: absolute;
inset: 0;
display: block;
width: 100%;
height: 100%;
}
.mob-real__img {
object-fit: cover;
transform: scale(1.02);
filter: saturate(0.82) contrast(1.02);
transition: transform 900ms cubic-bezier(0.22, 0.7, 0.28, 1), filter 620ms ease;
}
.mob-real__vide {
background: linear-gradient(140deg, var(--wp--preset--color--ardoise), var(--wp--preset--color--anthracite));
}
.mob-real__voile {
position: absolute;
inset: 0;
background: linear-gradient(180deg, rgba(14, 19, 25, 0.05) 0%, rgba(14, 19, 25, 0.28) 40%, rgba(14, 19, 25, 0.85) 70%, rgba(14, 19, 25, 0.96) 100%);
}
.mob-real__lien::after {
content: "";
position: absolute;
inset: 0 0 46% 0;
z-index: 1;
background: linear-gradient(180deg, rgba(14, 19, 25, 0.34), rgba(14, 19, 25, 0));
transition: opacity 520ms ease;
}
.mob-real__lien::before {
content: "";
position: absolute;
inset: 0 0 auto;
height: 3px;
z-index: 2;
transform: scaleX(0);
transform-origin: 0 50%;
background: var(--wp--preset--color--vert);
transition: transform 520ms cubic-bezier(0.22, 0.7, 0.28, 1);
}
.mob-real__corps {
position: absolute;
inset: auto 0 0;
z-index: 2;
display: block;
padding: clamp(1.1rem, 2.2vw, 1.6rem);
transition: transform 460ms cubic-bezier(0.22, 0.7, 0.28, 1);
}
.mob-real__meta {
display: block;
margin-block-end: 0.4rem;
font-size: var(--wp--preset--font-size--micro);
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--wp--preset--color--vert-lime);
}
.mob-real__titre {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
line-clamp: 3;
overflow: hidden;
font-size: var(--wp--preset--font-size--titre-s);
font-weight: 700;
line-height: 1.28;
color: var(--wp--preset--color--blanc);
text-wrap: pretty;
}
.mob-real__fleche {
display: inline-flex;
align-items: center;
justify-content: center;
width: 38px;
height: 38px;
margin-block-start: 0.9rem;
border: 1px solid rgba(255, 255, 255, 0.34);
border-radius: var(--wp--custom--rayon);
color: var(--wp--preset--color--blanc);
transition: background-color 420ms ease, border-color 420ms ease, transform 460ms cubic-bezier(0.22, 0.7, 0.28, 1);
}
@media (hover: hover) and (pointer: fine) {
.mob-real__lien:hover {
transform: translateY(-6px);
box-shadow: 0 26px 48px rgba(20, 27, 35, 0.24);
}
.mob-real__lien:hover::before {
transform: scaleX(1);
}
.mob-real__lien:hover .mob-real__img {
transform: scale(1.09);
filter: saturate(1.04) contrast(1);
}
.mob-real__lien:hover::after {
opacity: 0;
}
.mob-real__lien:hover .mob-real__corps {
transform: translateY(-4px);
}
.mob-real__lien:hover .mob-real__fleche {
background: var(--wp--preset--color--vert);
border-color: var(--wp--preset--color--vert);
color: var(--wp--preset--color--anthracite);
transform: translateX(4px);
}
}
.mob-real__lien:focus-visible {
outline: 3px solid var(--wp--preset--color--vert-fonce);
outline-offset: 3px;
}
.mob-real__lien:focus-visible::before {
transform: scaleX(1);
}
.mob-real__lien:focus-visible .mob-real__fleche {
background: var(--wp--preset--color--vert);
border-color: var(--wp--preset--color--vert);
color: var(--wp--preset--color--anthracite);
}
.mob-reals__pied {
margin: clamp(1.5rem, 3vw, 2.25rem) 0 0;
}
.mob-lien-fleche {
display: inline-flex;
align-items: center;
gap: 0.55rem;
min-height: 44px;
font-weight: 700;
color: var(--wp--preset--color--vert-profond);
text-decoration: none;
}
.mob-lien-fleche svg {
transition: transform 380ms cubic-bezier(0.22, 0.7, 0.28, 1);
}
.mob-lien-fleche:hover svg,
.mob-lien-fleche:focus-visible svg {
transform: translateX(5px);
}
@media (max-width: 1023.98px) {
.mob-reals {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (max-width: 700px) {
.mob-reals {
grid-template-columns: 1fr;
}
.mob-real__lien {
aspect-ratio: 4 / 3;
}
}
.mob-posts {
list-style: none;
margin: 0;
padding: 0;
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: clamp(1rem, 2.2vw, 1.75rem);
perspective: 1400px;
}
.mob-post {
margin: 0;
}
.mob-post__lien {
position: relative;
display: flex;
flex-direction: column;
height: 100%;
overflow: clip;
border: 1px solid var(--wp--preset--color--gris-brume);
border-radius: var(--wp--custom--rayon);
background: var(--wp--preset--color--blanc);
box-shadow: 0 1px 2px rgba(20, 27, 35, 0.05);
text-decoration: none !important;
transition: transform 460ms cubic-bezier(0.22, 0.7, 0.28, 1), box-shadow 460ms cubic-bezier(0.22, 0.7, 0.28, 1), border-color 420ms ease;
}
.mob-post__media {
position: relative;
display: block;
overflow: clip;
aspect-ratio: 16 / 10;
background: var(--wp--preset--color--gris-nuage);
}
.mob-post__img,
.mob-post__vide {
display: block;
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 900ms cubic-bezier(0.22, 0.7, 0.28, 1);
}
.mob-post__vide {
background: linear-gradient(140deg, var(--wp--preset--color--gris-brume), var(--wp--preset--color--gris-nuage));
}
.mob-post__cat {
position: absolute;
inset: auto auto 0.75rem 0.75rem;
display: inline-flex;
align-items: center;
padding: 0.35rem 0.7rem;
border: 1px solid rgba(255, 255, 255, 0.14);
border-radius: var(--wp--custom--rayon);
background: rgba(16, 22, 29, 0.88);
backdrop-filter: blur(8px) saturate(120%);
-webkit-backdrop-filter: blur(8px) saturate(120%);
font-size: var(--wp--preset--font-size--micro);
font-weight: 700;
letter-spacing: 0.05em;
text-transform: uppercase;
color: var(--wp--preset--color--blanc);
}
.mob-post__corps {
position: relative;
display: flex;
flex-direction: column;
flex: 1;
padding: clamp(1.15rem, 2.2vw, 1.6rem);
}
.mob-post__corps::before {
content: "";
position: absolute;
inset: 0 0 auto;
height: 3px;
transform: scaleX(0);
transform-origin: 0 50%;
background: var(--wp--preset--color--vert);
transition: transform 520ms cubic-bezier(0.22, 0.7, 0.28, 1);
}
.mob-post__meta {
display: block;
margin-block-end: 0.5rem;
font-size: var(--wp--preset--font-size--micro);
font-weight: 600;
letter-spacing: 0.02em;
color: var(--wp--preset--color--gris-fonce);
}
.mob-post__titre {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
line-clamp: 3;
overflow: hidden;
font-size: var(--wp--preset--font-size--titre-s);
font-weight: 700;
line-height: 1.28;
color: var(--wp--preset--color--anthracite);
text-wrap: pretty;
transition: color 380ms ease;
}
.mob-post__extrait {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
line-clamp: 3;
overflow: hidden;
margin-block-start: 0.6rem;
font-size: var(--wp--preset--font-size--petit);
line-height: 1.6;
color: var(--wp--preset--color--gris-fonce);
text-wrap: pretty;
}
.mob-post__lire {
display: inline-flex;
align-items: center;
gap: 0.45rem;
min-height: 32px;
margin-block-start: auto;
padding-block-start: 0.9rem;
font-size: var(--wp--preset--font-size--petit);
font-weight: 700;
color: var(--wp--preset--color--vert-profond);
}
.mob-post__lire svg {
transition: transform 380ms cubic-bezier(0.22, 0.7, 0.28, 1);
}
@media (hover: hover) and (pointer: fine) {
.mob-post__lien:hover {
transform: translateY(-8px);
border-color: rgba(122, 154, 34, 0.5);
box-shadow: 0 26px 48px rgba(20, 27, 35, 0.14);
}
.mob-post__lien:hover .mob-post__img {
transform: scale(1.07);
}
.mob-post__lien:hover .mob-post__corps::before {
transform: scaleX(1);
}
.mob-post__lien:hover .mob-post__titre {
color: var(--wp--preset--color--vert-profond);
}
.mob-post__lien:hover .mob-post__lire svg {
transform: translateX(5px);
}
}
.mob-post__lien:focus-visible {
outline: 3px solid var(--wp--preset--color--vert-fonce);
outline-offset: 3px;
}
.mob-post__lien:focus-visible .mob-post__corps::before {
transform: scaleX(1);
}
.mob-posts__pied {
margin: clamp(1.5rem, 3vw, 2.25rem) 0 0;
}
@media (max-width: 1023.98px) {
.mob-posts {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (max-width: 700px) {
.mob-posts {
grid-template-columns: 1fr;
}
}
@media (prefers-reduced-motion: no-preference) {
.mob-js .mob-cx.mob-anim,
.mob-js .mob-real.mob-anim,
.mob-js .mob-post.mob-anim {
opacity: 0;
transform: translateY(38px) rotateX(9deg);
transform-origin: 50% 0;
filter: blur(7px);
transition:
opacity 720ms cubic-bezier(0.22, 0.7, 0.28, 1),
transform 720ms cubic-bezier(0.22, 0.7, 0.28, 1),
filter 720ms ease;
transition-delay: calc((var(--mob-anim-rang, 1) - 1) * 110ms);
}
.mob-js .mob-cx.mob-anim.est-visible,
.mob-js .mob-real.mob-anim.est-visible,
.mob-js .mob-post.mob-anim.est-visible {
opacity: 1;
transform: none;
filter: none;
}
}
@media (max-width: 1023.98px) {
.mob-cartes-x,
.mob-cartes-x--six {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (max-width: 700px) {
.mob-cartes-x,
.mob-cartes-x--six {
grid-template-columns: 1fr;
}
}
/* faq.css */
.mob-faq-duo {
display: grid;
grid-template-columns: minmax(0, 4fr) minmax(0, 7fr);
gap: clamp(1.5rem, 3.5vw, 3rem);
}
.wp-block-group.mob-faq-duo > * {
margin-block: 0;
}
.mob-faq-aside {
display: flex;
flex-direction: column;
}
.wp-block-group.mob-faq-aside > .mob-tete {
margin-block-end: clamp(1.25rem, 2.5vw, 1.75rem);
max-width: none;
}
.mob-faq-aide {
position: sticky;
top: calc(var(--wp--custom--entete--hauteur) + 1.5rem);
overflow: clip;
padding: clamp(1.4rem, 2.6vw, 2rem);
border-radius: var(--wp--custom--rayon);
background: var(--wp--preset--color--ardoise);
color: var(--wp--preset--color--blanc-casse);
}
.mob-faq-aide::before {
content: "";
position: absolute;
inset: -40% -30% auto auto;
width: 22rem;
height: 22rem;
pointer-events: none;
background: radial-gradient(closest-side, rgba(173, 213, 64, 0.22), transparent);
}
.mob-faq-aide__titre {
position: relative;
margin: 0 0 0.6rem;
font-size: var(--wp--preset--font-size--titre-s);
font-weight: 700;
line-height: 1.3;
color: var(--wp--preset--color--blanc);
}
.mob-faq-aide__texte {
position: relative;
margin: 0 0 1.25rem;
font-size: var(--wp--preset--font-size--petit);
line-height: 1.65;
text-wrap: pretty;
}
.mob-faq-aide__actions {
position: relative;
display: flex;
flex-wrap: wrap;
gap: 0.75rem;
}
.mob-faq {
display: flex;
flex-direction: column;
gap: 0.7rem;
}
.mob-faq__item {
position: relative;
overflow: clip;
border: 1px solid var(--wp--preset--color--gris-brume);
border-radius: var(--wp--custom--rayon);
background: var(--wp--preset--color--blanc);
transition: border-color 380ms ease, box-shadow 380ms ease, background-color 380ms ease;
}
.mob-faq__item::before {
content: "";
position: absolute;
inset: 0 auto 0 0;
width: 3px;
transform: scaleY(0);
transform-origin: 50% 0;
background: linear-gradient(180deg, var(--wp--preset--color--vert), var(--wp--preset--color--vert-lime));
transition: transform 460ms cubic-bezier(0.22, 0.7, 0.28, 1);
}
.mob-faq__item[open] {
border-color: rgba(122, 154, 34, 0.45);
box-shadow: 0 14px 34px rgba(20, 27, 35, 0.08);
}
.mob-faq__item[open]::before {
transform: scaleY(1);
}
.mob-faq__question {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
min-height: 56px;
padding: 1rem clamp(1rem, 2vw, 1.4rem);
font-size: var(--wp--preset--font-size--corps);
font-weight: 700;
line-height: 1.35;
color: var(--wp--preset--color--anthracite);
cursor: pointer;
list-style: none;
transition: color 320ms ease;
}
.mob-faq__question::-webkit-details-marker {
display: none;
}
.mob-faq__question:hover {
color: var(--wp--preset--color--vert-profond);
}
.mob-faq__item:hover {
border-color: rgba(122, 154, 34, 0.4);
}
.mob-faq__question:focus-visible {
outline: 3px solid var(--wp--preset--color--vert-fonce);
outline-offset: -3px;
border-radius: var(--wp--custom--rayon);
}
.mob-faq__signe {
position: relative;
flex: none;
width: 34px;
height: 34px;
border: 1px solid var(--wp--preset--color--gris-brume);
border-radius: var(--wp--custom--rayon);
background: var(--wp--preset--color--gris-nuage);
transition: background-color 380ms ease, border-color 380ms ease, transform 460ms cubic-bezier(0.22, 0.7, 0.28, 1);
}
.mob-faq__signe::before,
.mob-faq__signe::after {
content: "";
position: absolute;
inset: 50% auto auto 50%;
width: 13px;
height: 2px;
background: var(--wp--preset--color--anthracite);
translate: -50% -50%;
transition: opacity 320ms ease, background-color 320ms ease;
}
.mob-faq__signe::after {
rotate: 90deg;
}
.mob-faq__item[open] .mob-faq__signe {
background: var(--wp--preset--color--vert);
border-color: var(--wp--preset--color--vert);
transform: rotate(180deg);
}
.mob-faq__item[open] .mob-faq__signe::after {
opacity: 0;
}
.mob-faq__reponse {
padding: 0 clamp(1rem, 2vw, 1.4rem) 1.25rem;
}
.mob-faq__reponse p {
margin: 0;
font-size: var(--wp--preset--font-size--petit);
line-height: 1.7;
color: var(--wp--preset--color--gris-fonce);
text-wrap: pretty;
}
@media (prefers-reduced-motion: no-preference) {
@supports (interpolate-size: allow-keywords) {
:root {
interpolate-size: allow-keywords;
}
.mob-faq__item::details-content {
block-size: 0;
overflow: clip;
opacity: 0;
transition:
block-size 420ms cubic-bezier(0.22, 0.7, 0.28, 1),
opacity 320ms ease,
content-visibility 420ms allow-discrete;
}
.mob-faq__item[open]::details-content {
block-size: auto;
opacity: 1;
}
}
}
@media (max-width: 1023.98px) {
.mob-faq-duo {
grid-template-columns: 1fr;
}
.mob-faq-aide {
position: relative;
top: auto;
}
}
@media (max-width: 600px) {
.mob-faq-aide__actions > a {
flex: 1 1 100%;
}
}
/* produit.css */
.mob-fil {
margin-block-end: 1.1rem;
font-size: var(--wp--preset--font-size--micro);
color: var(--wp--preset--color--gris-fonce);
}
.mob-fil ul {
list-style: none;
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.35rem 0.6rem;
margin: 0;
padding: 0;
}
.mob-fil li + li::before {
content: "";
display: inline-block;
width: 5px;
height: 5px;
margin-inline-end: 0.6rem;
border-top: 1px solid currentColor;
border-right: 1px solid currentColor;
transform: rotate(45deg);
opacity: 0.6;
vertical-align: 1px;
}
.mob-fil a {
display: inline-flex;
align-items: center;
min-height: 24px;
color: inherit;
text-decoration: none;
}
.mob-fil a:hover {
color: var(--wp--preset--color--vert-profond);
text-decoration: underline;
}
.mob-fil li[aria-current] {
color: var(--wp--preset--color--anthracite);
font-weight: 600;
}
.mob-pdt {
display: grid;
grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
align-items: start;
gap: clamp(1.5rem, 3.5vw, 3.25rem);
}
.mob-pdt__galerie {
position: sticky;
top: calc(var(--wp--custom--entete--hauteur) + 1.5rem);
}
.mob-pdt__vues {
list-style: none;
margin: 0;
padding: 0;
position: relative;
aspect-ratio: 4 / 3;
overflow: clip;
border: 1px solid var(--wp--preset--color--gris-brume);
border-radius: var(--wp--custom--rayon);
background: var(--wp--preset--color--blanc);
}
.mob-pdt__vue {
position: absolute;
inset: 0;
margin: 0;
opacity: 0;
visibility: hidden;
transition: opacity 380ms ease, visibility 380ms;
}
.mob-pdt__vue.est-active {
opacity: 1;
visibility: visible;
}
.mob-pdt__vues:not(.est-pilotee) .mob-pdt__vue:first-child {
opacity: 1;
visibility: visible;
}
.mob-pdt__image {
width: 100%;
height: 100%;
object-fit: contain;
padding: clamp(0.75rem, 2vw, 1.5rem);
box-sizing: border-box;
}
.mob-pdt__puces {
list-style: none;
display: flex;
flex-wrap: wrap;
gap: 0.6rem;
margin: 0.75rem 0 0;
padding: 0;
}
.mob-pdt__puce {
margin: 0;
}
.mob-pdt__puce-btn {
display: block;
width: 84px;
height: 68px;
padding: 0;
overflow: clip;
border: 1px solid var(--wp--preset--color--gris-brume);
border-radius: var(--wp--custom--rayon);
background: var(--wp--preset--color--blanc);
cursor: pointer;
transition: border-color 320ms ease, box-shadow 320ms ease, transform 320ms ease;
}
.mob-pdt__puce-img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.mob-pdt__puce-btn:hover,
.mob-pdt__puce-btn:focus-visible {
border-color: var(--wp--preset--color--vert);
transform: translateY(-2px);
}
.mob-pdt__puce-btn.est-active {
border-color: var(--wp--preset--color--vert);
box-shadow: 0 0 0 2px rgba(122, 154, 34, 0.35);
}
.mob-pdt__categorie {
margin: 0 0 0.5rem;
font-size: var(--wp--preset--font-size--micro);
font-weight: 700;
letter-spacing: 0.09em;
text-transform: uppercase;
color: var(--wp--preset--color--vert-profond);
}
.mob-pdt__categorie a {
display: inline-flex;
align-items: center;
min-height: 24px;
color: inherit;
text-decoration: none;
}
.mob-pdt__categorie a:hover {
text-decoration: underline;
}
.mob-pdt__titre {
margin: 0;
font-size: clamp(1.9rem, 3.4vw, 2.75rem);
font-weight: 700;
line-height: 1.15;
letter-spacing: -0.015em;
color: var(--wp--preset--color--anthracite);
text-wrap: balance;
}
.mob-pdt__jetons {
display: flex;
flex-wrap: wrap;
gap: 0.6rem;
margin: 1.1rem 0 0;
}
.mob-pdt__jeton {
display: inline-flex;
flex-direction: column;
gap: 0.1rem;
padding: 0.5rem 0.85rem;
border: 1px solid var(--wp--preset--color--gris-brume);
border-radius: var(--wp--custom--rayon);
background: var(--wp--preset--color--gris-nuage);
}
.mob-pdt__jeton-cle {
font-size: var(--wp--preset--font-size--micro);
font-weight: 700;
letter-spacing: 0.07em;
text-transform: uppercase;
color: var(--wp--preset--color--gris-fonce);
}
.mob-pdt__jeton-val {
font-weight: 700;
color: var(--wp--preset--color--anthracite);
font-variant-numeric: tabular-nums;
}
.mob-pdt__courte {
margin-block-start: 1.25rem;
font-size: var(--wp--preset--font-size--corps);
line-height: 1.7;
color: var(--wp--preset--color--gris-fonce);
text-wrap: pretty;
}
.mob-pdt__courte > * + * {
margin-block-start: 0.85rem;
}
.mob-pdt__actions {
display: flex;
flex-wrap: wrap;
gap: 0.75rem;
margin-block: clamp(1.4rem, 3vw, 2rem) 0;
}
.mob-pdt__action {
gap: 0.55rem;
}
.mob-pdt__picto {
flex: none;
}
.mob-btn--fantome {
display: inline-flex;
align-items: center;
justify-content: center;
box-sizing: border-box;
min-height: 48px;
padding: 0.85rem 1.5rem;
border: 2px solid var(--wp--preset--color--gris-brume);
border-radius: var(--wp--custom--rayon);
background: var(--wp--preset--color--blanc);
color: var(--wp--preset--color--anthracite) !important;
font-weight: 700;
text-decoration: none !important;
transition: border-color var(--mob-transition), background-color var(--mob-transition);
}
.mob-btn--fantome:hover,
.mob-btn--fantome:focus-visible {
border-color: var(--wp--preset--color--vert);
background: var(--wp--preset--color--vert-brume);
}
.mob-pdt__poids {
margin-inline-start: 0.5rem;
font-size: var(--wp--preset--font-size--micro);
font-weight: 600;
color: var(--wp--preset--color--gris-fonce);
}
.mob-pdt__reperes {
list-style: none;
margin: clamp(1.4rem, 3vw, 2rem) 0 0;
padding: clamp(1rem, 2vw, 1.4rem);
border: 1px solid var(--wp--preset--color--gris-brume);
border-radius: var(--wp--custom--rayon);
background: var(--wp--preset--color--gris-nuage);
display: flex;
flex-direction: column;
gap: 0.7rem;
font-size: var(--wp--preset--font-size--petit);
color: var(--wp--preset--color--gris-fonce);
}
.mob-pdt__reperes li {
display: flex;
align-items: flex-start;
gap: 0.65rem;
margin: 0;
}
.mob-pdt__reperes .mob-pdt__picto {
color: var(--wp--preset--color--vert-profond);
margin-top: 0.1em;
}
.mob-pdt-corps {
display: grid;
grid-template-columns: minmax(0, 3fr) minmax(0, 9fr);
gap: clamp(1.5rem, 3.5vw, 3rem);
}
.mob-pdt-corps--simple {
grid-template-columns: minmax(0, 1fr);
}
.mob-pdt__sommaire {
position: sticky;
top: calc(var(--wp--custom--entete--hauteur) + 1.5rem);
align-self: start;
}
.mob-pdt__sommaire ul {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 0.15rem;
}
.mob-pdt__sommaire a {
display: block;
padding: 0.6rem 0.8rem;
border-left: 2px solid var(--wp--preset--color--gris-brume);
border-radius: 0 var(--wp--custom--rayon) var(--wp--custom--rayon) 0;
font-size: var(--wp--preset--font-size--petit);
font-weight: 600;
color: var(--wp--preset--color--gris-fonce);
text-decoration: none;
transition: color 300ms ease, border-color 300ms ease, background-color 300ms ease;
}
.mob-pdt__sommaire a:hover,
.mob-pdt__sommaire a:focus-visible {
border-color: var(--wp--preset--color--vert);
background: var(--wp--preset--color--blanc);
color: var(--wp--preset--color--vert-profond);
}
.mob-pdt-corps__blocs {
display: flex;
flex-direction: column;
gap: clamp(1rem, 2vw, 1.5rem);
}
.mob-pdt__bloc {
padding: clamp(1.35rem, 2.6vw, 2rem);
border: 1px solid var(--wp--preset--color--gris-brume);
border-radius: var(--wp--custom--rayon);
background: var(--wp--preset--color--blanc);
scroll-margin-top: calc(var(--wp--custom--entete--hauteur) + 1.5rem);
}
.mob-pdt__bloc-titre {
display: flex;
align-items: center;
gap: 0.6rem;
margin: 0 0 1.1rem;
font-size: var(--wp--preset--font-size--titre-s);
font-weight: 700;
color: var(--wp--preset--color--anthracite);
}
.mob-pdt__bloc-titre .mob-pdt__picto {
color: var(--wp--preset--color--vert-profond);
}
.mob-pdt__prose {
line-height: 1.75;
color: var(--wp--preset--color--gris-fonce);
text-wrap: pretty;
}
.mob-pdt__prose > * + * {
margin-block-start: 0.9rem;
}
.mob-pdt__prose h3 {
font-size: var(--wp--preset--font-size--intro);
font-weight: 700;
line-height: 1.35;
color: var(--wp--preset--color--anthracite);
padding-inline-start: 0.7rem;
border-inline-start: 3px solid var(--wp--preset--color--vert);
}
.mob-pdt__prose > * + h3 {
margin-block-start: 1.6rem;
}
.mob-pdt__prose ul {
margin: 0.6rem 0 0;
padding-left: 1.2rem;
}
.mob-pdt__prose li + li {
margin-block-start: 0.3rem;
}
.mob-pdt__specs {
margin: 0;
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 0.5rem 1rem;
}
.mob-pdt__spec {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 1rem;
padding: 0.6rem 0.75rem;
border-radius: var(--wp--custom--rayon);
background: var(--wp--preset--color--gris-nuage);
}
.mob-pdt__spec dt {
font-size: var(--wp--preset--font-size--petit);
color: var(--wp--preset--color--gris-fonce);
}
.mob-pdt__spec dd {
margin: 0;
font-weight: 700;
text-align: right;
color: var(--wp--preset--color--anthracite);
font-variant-numeric: tabular-nums;
}
.mob-pdt__mentions {
list-style: none;
margin: 1rem 0 0;
padding: 0;
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
}
.mob-pdt__mentions li {
margin: 0;
padding: 0.4rem 0.75rem;
border: 1px solid var(--wp--preset--color--gris-brume);
border-radius: var(--wp--custom--rayon);
font-size: var(--wp--preset--font-size--petit);
color: var(--wp--preset--color--anthracite);
}
.mob-carrousel {
position: relative;
}
.mob-carrousel__cmd {
display: flex;
justify-content: flex-end;
gap: 0.5rem;
margin-block-end: 0.9rem;
}
.mob-carrousel__fleche {
display: inline-flex;
align-items: center;
justify-content: center;
width: 44px;
height: 44px;
padding: 0;
border: 1px solid var(--wp--preset--color--gris-brume);
border-radius: var(--wp--custom--rayon);
background: var(--wp--preset--color--blanc);
color: var(--wp--preset--color--anthracite);
cursor: pointer;
transition: border-color 300ms ease, background-color 300ms ease, color 300ms ease;
}
.mob-carrousel__fleche:hover:not(:disabled),
.mob-carrousel__fleche:focus-visible {
border-color: var(--wp--preset--color--vert);
background: var(--wp--preset--color--vert);
color: var(--wp--preset--color--anthracite);
}
.mob-carrousel__fleche:disabled {
opacity: 0.4;
cursor: default;
}
.mob-similaires {
--mob-carr-ecart: clamp(1rem, 2.2vw, 1.5rem);
list-style: none;
margin: 0;
overflow-x: auto;
overflow-y: clip;
padding: 0.5rem 0 1.75rem;
display: grid;
grid-auto-flow: column;
grid-auto-columns: calc((100% - 3 * var(--mob-carr-ecart)) / 4);
grid-template-columns: none;
gap: var(--mob-carr-ecart);
scroll-snap-type: x mandatory;
scroll-padding-inline: 0;
scrollbar-width: none;
}
.mob-similaires::-webkit-scrollbar {
display: none;
}
.mob-similaires:focus-visible {
outline: 3px solid var(--wp--preset--color--vert-fonce);
outline-offset: 4px;
}
.mob-simil {
margin: 0;
scroll-snap-align: start;
}
.mob-simil__lien {
display: flex;
flex-direction: column;
height: 100%;
overflow: clip;
border: 1px solid var(--wp--preset--color--gris-brume);
border-radius: var(--wp--custom--rayon);
background: var(--wp--preset--color--blanc);
text-decoration: none !important;
transition: transform 420ms cubic-bezier(0.22, 0.7, 0.28, 1), box-shadow 420ms ease, border-color 320ms ease;
}
.mob-simil__media {
position: relative;
display: block;
aspect-ratio: 4 / 3;
overflow: clip;
background: var(--wp--preset--color--blanc);
}
.mob-simil__img,
.mob-simil__vide {
position: absolute;
inset: 0;
box-sizing: border-box;
width: 100%;
height: 100%;
padding: 0.75rem;
object-fit: contain;
display: block;
transition: transform 800ms cubic-bezier(0.22, 0.7, 0.28, 1);
}
.mob-simil__corps {
display: block;
padding: 0.9rem 1rem 1.1rem;
}
.mob-simil__ref {
display: block;
margin-block-end: 0.3rem;
font-size: var(--wp--preset--font-size--micro);
font-weight: 700;
letter-spacing: 0.06em;
color: var(--wp--preset--color--gris-fonce);
}
.mob-simil__titre {
display: block;
font-weight: 700;
line-height: 1.3;
color: var(--wp--preset--color--anthracite);
transition: color 320ms ease;
}
@media (hover: hover) and (pointer: fine) {
.mob-simil__lien:hover {
transform: translateY(-4px);
border-color: rgba(122, 154, 34, 0.5);
box-shadow: 0 10px 24px rgba(20, 27, 35, 0.13);
}
.mob-simil__lien:hover .mob-simil__img {
transform: scale(1.04);
}
.mob-simil__lien:hover .mob-simil__titre {
color: var(--wp--preset--color--vert-profond);
}
}
.mob-simil__lien:focus-visible {
outline: 3px solid var(--wp--preset--color--vert-fonce);
outline-offset: 3px;
}
.mob-devis {
display: grid;
grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
align-items: start;
gap: clamp(1.5rem, 3.5vw, 3rem);
}
.mob-devis__produit {
display: flex;
gap: 1rem;
padding: clamp(1rem, 2vw, 1.4rem);
border: 1px solid var(--wp--preset--color--gris-brume);
border-radius: var(--wp--custom--rayon);
background: var(--wp--preset--color--gris-nuage);
}
.mob-devis__vignette {
flex: none;
width: 88px;
height: 88px;
object-fit: cover;
border-radius: var(--wp--custom--rayon);
background: var(--wp--preset--color--blanc);
}
.mob-devis__produit-cle {
margin: 0 0 0.2rem;
font-size: var(--wp--preset--font-size--micro);
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--wp--preset--color--gris-fonce);
}
.mob-devis__produit-nom {
margin: 0;
font-weight: 700;
line-height: 1.3;
color: var(--wp--preset--color--anthracite);
}
.mob-devis__produit-ref {
margin: 0.25rem 0 0;
font-size: var(--wp--preset--font-size--petit);
color: var(--wp--preset--color--gris-fonce);
font-variant-numeric: tabular-nums;
}
.mob-devis__produit-lien {
margin: 0.5rem 0 0;
font-size: var(--wp--preset--font-size--petit);
}
.mob-devis__grille {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 1rem;
}
.mob-devis__champ {
margin: 0;
display: flex;
flex-direction: column;
gap: 0.4rem;
}
.mob-devis__champ--large {
grid-column: 1 / -1;
}
.mob-devis__champ label {
font-size: var(--wp--preset--font-size--petit);
font-weight: 700;
color: var(--wp--preset--color--anthracite);
}
.mob-devis__champ input,
.mob-devis__champ textarea {
box-sizing: border-box;
width: 100%;
min-height: 48px;
padding: 0.7rem 0.9rem;
border: 1px solid var(--wp--custom--couleur--bordure-champ);
border-radius: var(--wp--custom--rayon);
background: var(--wp--preset--color--blanc);
font: inherit;
font-size: var(--wp--preset--font-size--petit);
color: var(--wp--preset--color--anthracite);
transition: border-color 260ms ease, box-shadow 260ms ease;
}
.mob-devis__champ textarea {
min-height: 140px;
resize: vertical;
}
.mob-devis__champ input:focus-visible,
.mob-devis__champ textarea:focus-visible {
outline: none;
border-color: var(--wp--preset--color--vert);
box-shadow: 0 0 0 3px rgba(122, 154, 34, 0.28);
}
.mob-devis__piege {
position: absolute;
width: 1px;
height: 1px;
overflow: hidden;
clip-path: inset(50%);
white-space: nowrap;
}
.mob-devis__pied {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: 1rem;
margin: 1.25rem 0 0;
}
.mob-devis__requis {
font-size: var(--wp--preset--font-size--micro);
color: var(--wp--preset--color--gris-fonce);
}
.mob-devis__form .mob-btn {
border: 2px solid var(--wp--preset--color--vert);
cursor: pointer;
}
.mob-devis__alerte {
margin: 0 0 1.25rem;
padding: 0.85rem 1rem;
border-left: 3px solid var(--wp--custom--couleur--erreur);
border-radius: 0 var(--wp--custom--rayon) var(--wp--custom--rayon) 0;
background: #FDF2F1;
color: var(--wp--preset--color--anthracite);
font-size: var(--wp--preset--font-size--petit);
}
.mob-devis__message {
padding: clamp(1.25rem, 3vw, 2rem);
border: 1px solid rgba(21, 115, 71, 0.35);
border-radius: var(--wp--custom--rayon);
background: #F1F8F3;
}
.mob-devis__message-titre {
margin: 0 0 0.4rem;
font-size: var(--wp--preset--font-size--titre-s);
font-weight: 700;
color: var(--wp--custom--couleur--succes);
}
.mob-devis__message p:last-child {
margin: 0;
color: var(--wp--preset--color--gris-fonce);
}
@media (max-width: 1023.98px) {
.mob-pdt,
.mob-pdt-corps,
.mob-devis {
grid-template-columns: 1fr;
}
.mob-pdt__galerie,
.mob-pdt__sommaire {
position: static;
}
.mob-pdt__sommaire ul {
flex-direction: row;
flex-wrap: wrap;
gap: 0.5rem;
}
.mob-pdt__sommaire a {
border-left: 0;
border: 1px solid var(--wp--preset--color--gris-brume);
border-radius: var(--wp--custom--rayon);
}
.mob-similaires {
grid-auto-columns: calc((100% - var(--mob-carr-ecart)) / 2);
}
}
@media (max-width: 700px) {
.mob-pdt__specs,
.mob-devis__grille {
grid-template-columns: 1fr;
}
.mob-pdt__actions > a {
flex: 1 1 100%;
}
.mob-devis__form .mob-btn {
width: 100%;
}
.mob-fil a,
.mob-pdt__categorie a {
min-height: 36px;
}
.mob-similaires {
grid-auto-columns: 78%;
}
}
/* devis.css */
.mob-sec--devis {
position: relative;
isolation: isolate;
overflow: clip;
background: var(--wp--preset--color--ardoise);
color: var(--wp--preset--color--blanc-casse);
}
.mob-sec--devis::before {
content: "";
position: absolute;
inset: -30% -20% auto auto;
width: 44rem;
height: 34rem;
z-index: -1;
pointer-events: none;
background:
radial-gradient(closest-side, rgba(173, 213, 64, 0.22), transparent);
}
.mob-sec--devis h1 {
margin: 0;
font-size: clamp(2rem, 4vw, 3rem);
font-weight: 700;
line-height: 1.12;
letter-spacing: -0.02em;
color: var(--wp--preset--color--blanc);
text-wrap: balance;
}
.mob-sec--devis .mob-tete__chapo {
color: var(--wp--preset--color--blanc-casse);
}
.mob-sec--devis-corps {
background: linear-gradient(180deg, #EEF2F7 0%, #E4EAF2 100%);
}
.mob-dv {
display: grid;
grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
align-items: start;
gap: clamp(1.5rem, 3vw, 2.5rem);
}
.wp-block-group .mob-dv > * {
margin-block: 0;
}
.mob-dv__carte {
position: relative;
overflow: clip;
padding: clamp(1.5rem, 3vw, 2.5rem);
border: 1px solid rgba(44, 60, 79, 0.14);
border-radius: var(--wp--custom--rayon);
background: var(--wp--preset--color--blanc);
box-shadow: 0 26px 60px rgba(20, 27, 35, 0.12);
}
.mob-dv__carte::before {
content: "";
position: absolute;
inset: 0 0 auto;
height: 4px;
background: linear-gradient(90deg, var(--wp--preset--color--vert), var(--wp--preset--color--vert-lime));
}
.mob-dv__carte-titre {
margin: 0.35rem 0 0.4rem;
font-size: var(--wp--preset--font-size--titre-m);
font-weight: 700;
line-height: 1.2;
color: var(--wp--preset--color--anthracite);
}
.mob-dv__carte-chapo {
margin: 0 0 1.5rem;
font-size: var(--wp--preset--font-size--petit);
line-height: 1.6;
color: var(--wp--preset--color--gris-fonce);
text-wrap: pretty;
}
.mob-dv__aside {
position: sticky;
top: calc(var(--wp--custom--entete--hauteur) + 1.5rem);
display: flex;
flex-direction: column;
gap: 1rem;
}
.mob-dv__bloc {
position: relative;
padding: clamp(1.1rem, 2.2vw, 1.5rem);
border: 1px solid rgba(44, 60, 79, 0.14);
border-radius: var(--wp--custom--rayon);
background: var(--wp--preset--color--blanc);
}
.mob-dv__bloc--contact {
background: var(--wp--preset--color--ardoise);
border-color: rgba(255, 255, 255, 0.14);
color: var(--wp--preset--color--blanc-casse);
}
.mob-dv__bloc-titre {
margin: 0 0 0.9rem;
font-size: var(--wp--preset--font-size--micro);
font-weight: 700;
letter-spacing: 0.09em;
text-transform: uppercase;
color: var(--wp--preset--color--gris-fonce);
}
.mob-dv__bloc--contact .mob-dv__bloc-titre {
color: var(--wp--preset--color--vert-lime);
}
.mob-dv__etapes {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 0.9rem;
counter-reset: none;
}
.mob-dv__etape {
display: flex;
align-items: flex-start;
gap: 0.75rem;
margin: 0;
}
.mob-dv__num {
display: inline-flex;
align-items: center;
justify-content: center;
flex: none;
width: 26px;
height: 26px;
border-radius: var(--wp--custom--rayon);
background: var(--wp--preset--color--vert);
color: var(--wp--preset--color--anthracite);
font-size: var(--wp--preset--font-size--micro);
font-weight: 700;
font-variant-numeric: tabular-nums;
}
.mob-dv__etape-titre {
display: block;
font-size: var(--wp--preset--font-size--petit);
font-weight: 700;
line-height: 1.35;
color: var(--wp--preset--color--anthracite);
}
.mob-dv__etape-detail {
display: block;
margin-block-start: 0.15rem;
font-size: var(--wp--preset--font-size--micro);
line-height: 1.55;
color: var(--wp--preset--color--gris-fonce);
}
.mob-dv__tels {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 0.4rem;
}
.mob-dv__tels a {
display: inline-flex;
align-items: center;
gap: 0.6rem;
min-height: 44px;
font-size: var(--wp--preset--font-size--corps);
font-weight: 700;
color: var(--wp--preset--color--blanc) !important;
text-decoration: none;
}
.mob-dv__tels a:hover,
.mob-dv__tels a:focus-visible {
text-decoration: underline;
}
.mob-dv__tels .mob-picto {
color: var(--wp--preset--color--vert-lime);
flex: none;
}
.mob-devis__champ input,
.mob-devis__champ textarea,
.mob-devis__champ select {
background: #F7F9FB;
border-color: #7C8288;
}
.mob-devis__champ select {
box-sizing: border-box;
width: 100%;
min-height: 48px;
padding: 0.7rem 0.9rem;
border: 1px solid #7C8288;
border-radius: var(--wp--custom--rayon);
font: inherit;
font-size: var(--wp--preset--font-size--petit);
color: var(--wp--preset--color--anthracite);
}
.mob-devis__champ input:hover,
.mob-devis__champ textarea:hover,
.mob-devis__champ select:hover {
border-color: rgba(122, 154, 34, 0.6);
}
.mob-devis__champ input::placeholder,
.mob-devis__champ textarea::placeholder {
color: #6B6E72;
}
.mob-devis__pied {
flex-direction: column;
align-items: stretch;
gap: 0.6rem;
}
.mob-devis__envoi {
width: 100%;
gap: 0.55rem;
min-height: 56px;
font-size: var(--wp--preset--font-size--corps);
}
.mob-devis__requis {
text-align: center;
}
.mob-devis__consent {
display: flex;
align-items: flex-start;
gap: 0.7rem;
margin: 1.25rem 0 0;
padding: 0.9rem 1rem;
border: 1px solid rgba(44, 60, 79, 0.16);
border-radius: var(--wp--custom--rayon);
background: #F7F9FB;
}
.mob-devis__consent input[type="checkbox"] {
flex: none;
width: 24px;
height: 24px;
margin: 0;
accent-color: var(--wp--preset--color--vert-fonce);
border: 1px solid #7C8288;
cursor: pointer;
}
.mob-devis__consent input[type="checkbox"]:focus-visible {
outline: 3px solid var(--wp--preset--color--vert-fonce);
outline-offset: 2px;
}
.mob-devis__consent label {
font-size: var(--wp--preset--font-size--micro);
line-height: 1.55;
color: var(--wp--preset--color--gris-fonce);
cursor: pointer;
}
.mob-devis__consent a {
color: var(--wp--preset--color--vert-profond);
}
.mob-devis__mention {
margin: 1rem 0 0;
font-size: var(--wp--preset--font-size--micro);
line-height: 1.55;
color: var(--wp--preset--color--gris-fonce);
}
.mob-devis__mention a,
.mob-devis__produit-lien a {
display: inline-flex;
align-items: center;
min-height: 24px;
}
.mob-devis__coche {
color: var(--wp--custom--couleur--succes);
margin-block-end: 0.5rem;
}
.mob-devis__message-suite {
margin-block-start: 1.25rem;
}
@media (max-width: 1023.98px) {
.mob-dv {
grid-template-columns: 1fr;
}
.mob-dv__aside {
position: relative;
top: auto;
}
.mob-devis__mention a,
.mob-devis__produit-lien a {
min-height: 36px;
}
}
/* contact.css */
.mob-sec--ct-entete {
position: relative;
isolation: isolate;
overflow: clip;
padding-block: clamp(2.25rem, 4.4vw, 3.5rem);
background: var(--wp--preset--color--ardoise);
color: var(--wp--preset--color--blanc-casse);
}
.mob-sec--ct-entete::before {
content: "";
position: absolute;
inset: -40% -14% auto auto;
width: 40rem;
height: 32rem;
z-index: -1;
pointer-events: none;
background:
radial-gradient(closest-side, rgba(173, 213, 64, 0.2), transparent);
}
.mob-sec--ct-entete h1 {
margin: 0;
font-size: clamp(1.9rem, 3.6vw, 2.75rem);
font-weight: 700;
line-height: 1.14;
letter-spacing: -0.02em;
color: var(--wp--preset--color--blanc);
text-wrap: balance;
}
.mob-sec--ct-entete .mob-tete {
margin-block-end: 0;
}
.mob-sec--ct-entete .mob-tete__chapo {
color: var(--wp--preset--color--blanc-casse);
}
.mob-sec--ct-entete.mob-sec--photo {
display: grid;
align-items: center;
min-height: clamp(26rem, 38vw, 34rem);
padding-block: clamp(3rem, 5vw, 4.5rem);
}
.mob-sec--ct-entete.mob-sec--photo > .mob-sec__inner {
width: 100%;
box-sizing: border-box;
}
.mob-sec--ct-entete.mob-sec--photo::before {
content: none;
}
.mob-sec--ct-corps {
position: relative;
isolation: isolate;
overflow: clip;
padding-block: clamp(2rem, 4vw, 3.25rem) clamp(3.5rem, 7vw, 6rem);
background: linear-gradient(180deg, #EEF2F7 0%, #E2E9F2 100%);
}
.mob-sec--ct-corps::before {
content: "";
position: absolute;
inset: -18% -10% auto;
height: 128%;
z-index: -1;
pointer-events: none;
background:
radial-gradient(40rem 26rem at 88% 6%, rgba(122, 154, 34, 0.12), transparent 62%);
}
.mob-ct {
display: grid;
grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
align-items: start;
gap: clamp(1.5rem, 3vw, 2.5rem);
}
.wp-block-group .mob-ct > * {
margin-block: 0;
}
.mob-ct__carte {
position: relative;
overflow: clip;
padding: clamp(1.5rem, 3vw, 2.5rem);
border: 1px solid rgba(44, 60, 79, 0.14);
border-radius: var(--wp--custom--rayon);
background: var(--wp--preset--color--blanc);
box-shadow: 0 26px 60px rgba(20, 27, 35, 0.12);
}
.mob-ct__carte::before {
content: "";
position: absolute;
inset: 0 0 auto;
height: 4px;
background: linear-gradient(90deg, var(--wp--preset--color--vert), var(--wp--preset--color--vert-lime));
}
.mob-ct__carte > .mob-ct__carte-titre {
margin: 0.35rem 0 0.4rem;
font-size: var(--wp--preset--font-size--titre-m);
font-weight: 700;
line-height: 1.2;
color: var(--wp--preset--color--anthracite);
}
.mob-ct__carte > .mob-ct__carte-chapo {
margin: 0 0 1.5rem;
font-size: var(--wp--preset--font-size--petit);
line-height: 1.6;
color: var(--wp--preset--color--gris-fonce);
text-wrap: pretty;
}
.mob-ct__rappel {
display: none;
}
.mob-ct__profils {
margin: 0 0 1.4rem;
padding: 0;
border: 0;
}
.mob-ct__legende {
display: block;
width: 100%;
margin: 0 0 0.7rem;
padding: 0;
font-size: var(--wp--preset--font-size--petit);
font-weight: 700;
color: var(--wp--preset--color--anthracite);
}
.mob-ct__tuiles {
display: grid;
grid-template-columns: repeat(6, minmax(0, 1fr));
gap: 0.6rem;
}
.mob-ct__tuile {
position: relative;
grid-column: span 2;
}
.mob-ct__tuile:nth-child(4),
.mob-ct__tuile:nth-child(5) {
grid-column: span 3;
}
.mob-ct__tuile input {
position: absolute;
width: 1px;
height: 1px;
margin: 0;
opacity: 0;
pointer-events: none;
}
.mob-ct__tuile label {
position: relative;
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 0.5rem;
overflow: clip;
height: 100%;
box-sizing: border-box;
min-height: 44px;
padding: 0.85rem 0.9rem 0.95rem;
border: 1px solid #7C8288;
border-radius: var(--wp--custom--rayon);
background: #F7F9FB;
cursor: pointer;
transition:
border-color var(--mob-transition),
background-color var(--mob-transition),
box-shadow var(--mob-transition);
}
.mob-ct__tuile label::before {
content: "";
position: absolute;
inset: 0 0 auto 0;
height: 3px;
transform: scaleX(0);
transform-origin: 0 50%;
background: linear-gradient(90deg, var(--wp--preset--color--vert), var(--wp--preset--color--vert-lime));
transition: transform 420ms cubic-bezier(0.22, 0.7, 0.28, 1);
}
.mob-ct__tuile-picto {
display: inline-flex;
align-items: center;
justify-content: center;
flex: none;
width: 40px;
height: 40px;
border: 1px solid rgba(122, 154, 34, 0.3);
border-radius: var(--wp--custom--rayon);
background: linear-gradient(145deg, rgba(122, 154, 34, 0.14), rgba(173, 213, 64, 0.1));
color: var(--wp--preset--color--vert-profond);
transition: transform 460ms cubic-bezier(0.22, 0.7, 0.28, 1), background-color var(--mob-transition);
}
.mob-ct__tuile-nom {
font-size: var(--wp--preset--font-size--petit);
font-weight: 700;
line-height: 1.3;
color: var(--wp--preset--color--anthracite);
}
.mob-ct__tuile-txt {
font-size: var(--wp--preset--font-size--micro);
line-height: 1.5;
color: var(--wp--preset--color--gris-fonce);
text-wrap: pretty;
}
@media (hover: hover) and (pointer: fine) {
.mob-ct__tuile label:hover {
border-color: var(--wp--preset--color--vert-fonce);
background: #FFFFFF;
box-shadow: 0 10px 24px rgba(20, 27, 35, 0.09);
}
.mob-ct__tuile label:hover .mob-ct__tuile-picto {
transform: translateY(-2px) rotate(-4deg);
}
}
.mob-ct__tuile input:checked + label {
border-color: var(--wp--preset--color--vert-fonce);
background: rgba(122, 154, 34, 0.09);
box-shadow: inset 0 0 0 1px var(--wp--preset--color--vert-fonce);
}
.mob-ct__tuile input:checked + label::before {
transform: scaleX(1);
}
.mob-ct__tuile input:checked + label .mob-ct__tuile-picto {
background: linear-gradient(145deg, rgba(122, 154, 34, 0.26), rgba(173, 213, 64, 0.18));
border-color: rgba(85, 112, 25, 0.6);
}
.mob-ct__tuile input:focus-visible + label {
outline: 3px solid var(--wp--preset--color--vert-fonce);
outline-offset: 2px;
}
.mob-ct__conditionnel {
margin-block-end: 0.4rem;
}
@supports selector(:has(*)) {
.mob-ct__conditionnel {
display: none;
}
.mob-ct__form:has(#mob-profil-administration:checked) .mob-ct__conditionnel--administration,
.mob-ct__form:has(#mob-profil-entreprise:checked) .mob-ct__conditionnel--entreprise,
.mob-ct__form:has(#mob-profil-amenageur:checked) .mob-ct__conditionnel--amenageur,
.mob-ct__form:has(#mob-profil-autre:checked) .mob-ct__conditionnel--autre {
display: block;
}
@media (prefers-reduced-motion: no-preference) {
.mob-ct__form:has(#mob-profil-administration:checked) .mob-ct__conditionnel--administration,
.mob-ct__form:has(#mob-profil-entreprise:checked) .mob-ct__conditionnel--entreprise,
.mob-ct__form:has(#mob-profil-amenageur:checked) .mob-ct__conditionnel--amenageur,
.mob-ct__form:has(#mob-profil-autre:checked) .mob-ct__conditionnel--autre {
animation: mob-ct-ouvre 380ms cubic-bezier(0.22, 0.7, 0.28, 1);
}
}
}
@keyframes mob-ct-ouvre {
from {
opacity: 0;
transform: translateY(-6px);
}
to {
opacity: 1;
transform: none;
}
}
.mob-ct__aside {
position: sticky;
top: calc(var(--wp--custom--entete--hauteur) + 1.5rem);
display: flex;
flex-direction: column;
gap: 1rem;
}
.mob-ct__infos {
position: relative;
isolation: isolate;
overflow: clip;
padding: clamp(1.35rem, 2.6vw, 1.9rem);
border: 1px solid rgba(255, 255, 255, 0.14);
border-radius: var(--wp--custom--rayon);
background: var(--wp--preset--color--ardoise);
color: var(--wp--preset--color--blanc-casse);
}
.mob-ct__infos::before {
content: "";
position: absolute;
inset: -40% -30% auto auto;
width: 22rem;
height: 18rem;
z-index: -1;
pointer-events: none;
background: radial-gradient(closest-side, rgba(173, 213, 64, 0.2), transparent);
}
.mob-ct__infos > .mob-ct__infos-titre {
margin: 0 0 0.35rem;
font-size: var(--wp--preset--font-size--titre-s);
font-weight: 700;
line-height: 1.25;
color: var(--wp--preset--color--blanc);
}
.mob-ct__infos > .mob-ct__infos-chapo {
margin: 0 0 1.25rem;
font-size: var(--wp--preset--font-size--micro);
line-height: 1.55;
color: var(--wp--preset--color--blanc-casse);
}
.mob-ct__entrees {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 1rem;
}
.mob-ct__entree {
display: flex;
align-items: flex-start;
gap: 0.85rem;
margin: 0;
}
.mob-ct__entree + .mob-ct__entree {
padding-block-start: 1rem;
border-block-start: 1px solid rgba(173, 213, 64, 0.24);
}
.mob-ct__entree-picto {
display: inline-flex;
align-items: center;
justify-content: center;
flex: none;
width: 40px;
height: 40px;
border: 1px solid rgba(173, 213, 64, 0.32);
border-radius: var(--wp--custom--rayon);
background: rgba(173, 213, 64, 0.12);
color: var(--wp--preset--color--vert-lime);
}
.mob-ct__entree-corps {
display: block;
min-width: 0;
}
.mob-ct__entree-cle {
display: block;
margin-block-end: 0.2rem;
font-size: var(--wp--preset--font-size--micro);
font-weight: 700;
letter-spacing: 0.09em;
text-transform: uppercase;
color: var(--wp--preset--color--vert-lime);
}
.mob-ct__entree-val {
display: block;
font-size: var(--wp--preset--font-size--petit);
line-height: 1.55;
color: var(--wp--preset--color--blanc-casse);
}
.mob-ct__adresse {
display: block;
font-style: normal;
}
.mob-ct__tels {
display: flex;
flex-direction: column;
gap: 0.35rem;
}
.mob-ct__infos .mob-ct__tel {
display: flex;
flex-direction: column;
justify-content: center;
min-height: 44px;
color: var(--wp--preset--color--blanc);
text-decoration: none;
}
.mob-ct__tel-num {
font-size: var(--wp--preset--font-size--intro);
font-weight: 700;
line-height: 1.2;
letter-spacing: 0.01em;
}
.mob-ct__tel-cle {
font-size: var(--wp--preset--font-size--micro);
color: var(--wp--preset--color--blanc-casse);
}
.mob-ct__infos .mob-ct__tel:hover .mob-ct__tel-num,
.mob-ct__infos .mob-ct__tel:focus-visible .mob-ct__tel-num {
text-decoration: underline;
text-underline-offset: 3px;
}
.mob-ct__infos .mob-ct__courriel {
display: inline-flex;
align-items: center;
min-height: 44px;
color: var(--wp--preset--color--blanc);
font-weight: 700;
word-break: break-word;
}
.mob-ct__plan {
padding: clamp(1.1rem, 2.2vw, 1.5rem);
border: 1px solid rgba(44, 60, 79, 0.16);
border-radius: var(--wp--custom--rayon);
background: var(--wp--preset--color--blanc);
}
.mob-ct__plan > .mob-ct__plan-titre {
margin: 0 0 0.85rem;
font-size: var(--wp--preset--font-size--titre-s);
font-weight: 700;
line-height: 1.25;
color: var(--wp--preset--color--anthracite);
}
.mob-ct__plan-cadre {
position: relative;
overflow: clip;
aspect-ratio: 4 / 3;
border: 1px solid rgba(44, 60, 79, 0.16);
border-radius: var(--wp--custom--rayon);
background:
radial-gradient(60% 60% at 50% 40%, rgba(122, 154, 34, 0.1), transparent 70%),
linear-gradient(180deg, #F2F5F9 0%, #E7ECF3 100%);
}
.mob-ct__plan-cadre::before {
content: "";
position: absolute;
inset: 0;
pointer-events: none;
opacity: 0.6;
background-image:
linear-gradient(rgba(44, 60, 79, 0.07) 1px, transparent 1px),
linear-gradient(90deg, rgba(44, 60, 79, 0.07) 1px, transparent 1px);
background-size: 34px 34px;
mask-image: radial-gradient(78% 70% at 50% 45%, #000 20%, transparent 82%);
-webkit-mask-image: radial-gradient(78% 70% at 50% 45%, #000 20%, transparent 82%);
}
.mob-ct__plan-repere {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 0.6rem;
height: 100%;
box-sizing: border-box;
padding: clamp(0.9rem, 2.4vw, 1.4rem);
text-align: center;
}
.mob-ct__plan-picto {
display: inline-flex;
align-items: center;
justify-content: center;
width: 52px;
height: 52px;
border: 1px solid rgba(122, 154, 34, 0.3);
border-radius: var(--wp--custom--rayon);
background: linear-gradient(145deg, rgba(122, 154, 34, 0.16), rgba(173, 213, 64, 0.1));
color: var(--wp--preset--color--vert-profond);
}
.mob-ct__plan-repere > .mob-ct__plan-lieu {
margin: 0;
font-size: var(--wp--preset--font-size--petit);
font-weight: 700;
line-height: 1.45;
color: var(--wp--preset--color--anthracite);
text-wrap: balance;
}
.mob-ct__plan-repere > .mob-ct__plan-btn {
margin: 0.15rem 0 0;
cursor: pointer;
}
.mob-ct__plan-repere > .mob-ct__plan-note {
margin: 0;
max-width: 30rem;
font-size: var(--wp--preset--font-size--micro);
line-height: 1.5;
color: var(--wp--preset--color--gris-fonce);
text-wrap: pretty;
}
.mob-ct__plan-cadre iframe {
display: block;
width: 100%;
height: 100%;
border: 0;
}
.mob-ct__plan > .mob-ct__plan-pied {
margin: 0.85rem 0 0;
}
.mob-ct__plan-pied .mob-lien-fleche {
gap: 0.5rem;
min-height: 44px;
}
.mob-sec--ct-suite {
background: var(--wp--preset--color--blanc);
}
.mob-ct__porte .mob-cx__titre {
margin-block-end: 0.5rem;
}
.mob-ct__porte-lien {
color: var(--wp--preset--color--anthracite);
text-decoration: none;
}
.mob-ct__porte-lien::after {
content: "";
position: absolute;
inset: 0;
}
.mob-ct__porte-lien:hover,
.mob-ct__porte-lien:focus-visible {
color: var(--wp--preset--color--vert-profond);
text-decoration: underline;
text-underline-offset: 3px;
}
.mob-ct__porte:focus-within {
border-color: rgba(122, 154, 34, 0.55);
box-shadow: 0 18px 36px rgba(20, 27, 35, 0.12);
}
@media (max-width: 1023.98px) {
.mob-ct {
grid-template-columns: 1fr;
}
.mob-ct__aside {
position: relative;
top: auto;
}
.mob-ct__rappel {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.5rem;
margin: 0 0 1.35rem;
padding: 0.75rem 0.85rem;
border: 1px solid rgba(44, 60, 79, 0.16);
border-radius: var(--wp--custom--rayon);
background: #F7F9FB;
font-size: var(--wp--preset--font-size--micro);
color: var(--wp--preset--color--gris-fonce);
}
.mob-ct__rappel a {
display: inline-flex;
align-items: center;
gap: 0.4rem;
min-height: 44px;
font-size: var(--wp--preset--font-size--petit);
font-weight: 700;
color: var(--wp--preset--color--vert-profond);
text-decoration: none;
}
.mob-ct__rappel a:hover,
.mob-ct__rappel a:focus-visible {
text-decoration: underline;
text-underline-offset: 3px;
}
}
@media (max-width: 700px) {
.mob-ct__tuile,
.mob-ct__tuile:nth-child(4) {
grid-column: span 3;
}
.mob-ct__tuile:nth-child(5) {
grid-column: span 6;
}
}
@media (max-width: 430px) {
.mob-ct__tuile,
.mob-ct__tuile:nth-child(4),
.mob-ct__tuile:nth-child(5) {
grid-column: span 6;
}
.mob-ct__tuile label {
flex-direction: row;
align-items: center;
gap: 0.75rem;
padding-block: 0.7rem;
}
.mob-ct__tuile-txt {
display: none;
}
}
/* erreur.css */
.mob-sec--erreur {
position: relative;
isolation: isolate;
overflow: clip;
padding-block: clamp(2.5rem, 5vw, 4rem);
background: var(--wp--preset--color--ardoise);
color: var(--wp--preset--color--blanc-casse);
}
.mob-sec--erreur::before {
content: "";
position: absolute;
inset: -34% -12% auto auto;
width: 42rem;
height: 34rem;
z-index: -1;
pointer-events: none;
background:
radial-gradient(closest-side, rgba(173, 213, 64, 0.22), transparent);
}
.mob-erreur {
position: relative;
}
.mob-erreur__filigrane {
position: absolute;
inset-block-start: 50%;
inset-inline-end: -1.5rem;
transform: translateY(-50%);
z-index: -1;
pointer-events: none;
font-size: clamp(9rem, 19vw, 17rem);
font-weight: 700;
line-height: 0.8;
letter-spacing: -0.05em;
color: transparent;
-webkit-text-stroke: 2px rgba(173, 213, 64, 0.26);
user-select: none;
}
.mob-erreur__texte {
max-width: 60rem;
}
.mob-erreur__texte > .mob-erreur__titre {
margin: 0;
font-size: clamp(1.9rem, 3.6vw, 2.75rem);
font-weight: 700;
line-height: 1.14;
letter-spacing: -0.02em;
color: var(--wp--preset--color--blanc);
text-wrap: balance;
}
.mob-erreur__texte > .mob-erreur__chapo {
margin-block: 0.9rem 0;
font-size: var(--wp--preset--font-size--intro);
line-height: 1.6;
color: var(--wp--preset--color--blanc-casse);
text-wrap: pretty;
}
.mob-erreur__texte > .mob-erreur__adresse {
display: flex;
flex-wrap: wrap;
align-items: baseline;
gap: 0.5rem 0.75rem;
margin-block: 1.35rem 0;
padding: 0.6rem 0.85rem;
border: 1px solid rgba(173, 213, 64, 0.3);
border-radius: var(--wp--custom--rayon);
background: rgba(255, 255, 255, 0.05);
}
.mob-erreur__adresse-cle {
flex: none;
font-size: var(--wp--preset--font-size--micro);
font-weight: 700;
letter-spacing: 0.09em;
text-transform: uppercase;
color: var(--wp--preset--color--vert-lime);
}
.mob-erreur__adresse-val {
min-width: 0;
font-size: var(--wp--preset--font-size--petit);
color: var(--wp--preset--color--blanc);
overflow-wrap: anywhere;
}
.mob-erreur__texte > .mob-erreur__recherche {
margin-block: 1.5rem 0;
}
.mob-erreur__label {
display: block;
margin-block-end: 0.55rem;
font-size: var(--wp--preset--font-size--petit);
font-weight: 700;
color: var(--wp--preset--color--blanc);
}
.mob-erreur__champ {
display: flex;
flex-wrap: wrap;
gap: 0.6rem;
}
.mob-erreur__champ input[type="search"] {
flex: 1 1 18rem;
box-sizing: border-box;
min-width: 0;
min-height: 52px;
padding: 0.7rem 0.95rem;
border: 1px solid #7C8288;
border-radius: var(--wp--custom--rayon);
background: var(--wp--preset--color--blanc);
font: inherit;
font-size: var(--wp--preset--font-size--corps);
color: var(--wp--preset--color--anthracite);
transition: border-color var(--mob-transition), box-shadow var(--mob-transition);
}
.mob-erreur__champ input[type="search"]::placeholder {
color: #6B6E72;
}
.mob-erreur__champ input[type="search"]:focus-visible {
outline: none;
border-color: var(--wp--preset--color--vert-lime);
box-shadow: 0 0 0 3px rgba(173, 213, 64, 0.4);
}
.mob-erreur__envoi {
flex: 0 0 auto;
gap: 0.5rem;
min-height: 52px;
cursor: pointer;
}
.mob-erreur__texte > .mob-erreur__portes {
list-style: none;
display: flex;
flex-wrap: wrap;
gap: 0.6rem;
margin-block: 1.5rem 0;
padding: 0;
}
.mob-erreur__portes li {
margin: 0;
}
.mob-erreur__porte {
display: inline-flex;
align-items: center;
gap: 0.5rem;
box-sizing: border-box;
min-height: 44px;
padding: 0.5rem 0.9rem;
border: 1px solid rgba(255, 255, 255, 0.32);
border-radius: var(--wp--custom--rayon);
font-size: var(--wp--preset--font-size--petit);
font-weight: 700;
color: var(--wp--preset--color--blanc);
text-decoration: none;
transition: background-color var(--mob-transition), border-color var(--mob-transition);
}
.mob-erreur__porte .mob-picto {
color: var(--wp--preset--color--vert-lime);
flex: none;
transition: transform 420ms cubic-bezier(0.22, 0.7, 0.28, 1);
}
.mob-erreur__porte:hover,
.mob-erreur__porte:focus-visible {
background: rgba(255, 255, 255, 0.12);
border-color: var(--wp--preset--color--vert-lime);
}
@media (hover: hover) and (pointer: fine) {
.mob-erreur__porte:hover .mob-picto {
transform: translateY(-2px);
}
}
.mob-sec--erreur-pistes {
background: var(--wp--preset--color--blanc);
}
.mob-erreur-pistes > .mob-erreur__gammes {
margin-block: 0 clamp(1.5rem, 3vw, 2.25rem);
}
.mob-sec--erreur-suite {
position: relative;
isolation: isolate;
overflow: clip;
background: linear-gradient(180deg, #E6ECF4 0%, #DCE4EE 100%);
}
.mob-sec--erreur-suite::before {
content: "";
position: absolute;
inset: -20% -10% auto;
height: 130%;
z-index: -1;
pointer-events: none;
background:
radial-gradient(40rem 26rem at 12% 8%, rgba(44, 60, 79, 0.1), transparent 62%);
}
@media (max-height: 780px) {
.mob-sec--erreur {
padding-block: clamp(1.75rem, 3.4vw, 2.75rem);
}
.mob-erreur__texte > .mob-erreur__adresse,
.mob-erreur__texte > .mob-erreur__recherche,
.mob-erreur__texte > .mob-erreur__portes {
margin-block-start: 1.1rem;
}
}
@media (max-width: 900px) {
.mob-erreur__filigrane {
inset-block-start: -0.5rem;
inset-inline-end: -0.75rem;
transform: none;
font-size: clamp(6rem, 26vw, 11rem);
-webkit-text-stroke-width: 1.5px;
}
}
@media (max-width: 600px) {
.mob-erreur__envoi {
width: 100%;
}
}
/* categorie.css */
.mob-sec--cat-entete {
position: relative;
isolation: isolate;
overflow: clip;
min-height: 26rem;
}
.mob-cat-entete__decor {
position: absolute;
inset: 0;
z-index: -1;
}
.mob-cat-entete__img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center 55%;
}
.mob-cat-entete__decor::before,
.mob-cat-entete__decor::after {
content: "";
position: absolute;
inset: 0;
}
.mob-cat-entete__decor::before {
background: linear-gradient(96deg,
rgba(29, 41, 55, 0.92) 0%,
rgba(29, 41, 55, 0.82) 50%,
rgba(29, 41, 55, 0.28) 78%,
rgba(29, 41, 55, 0.10) 100%);
}
.mob-cat-entete__decor::after {
background: linear-gradient(178deg,
rgba(29, 41, 55, 0.08) 0%,
rgba(29, 41, 55, 0.05) 46%,
rgba(29, 41, 55, 0.58) 78%,
rgba(29, 41, 55, 0.90) 100%);
}
.mob-cat-entete__decor--nu {
background:
radial-gradient(58rem 34rem at 88% -10%, rgba(122, 154, 34, 0.30), transparent 62%),
linear-gradient(160deg, #33455A 0%, #2C3C4F 46%, #253445 100%);
}
.mob-cat-entete__decor--nu::after {
content: none;
}
.mob-fil--cat > ul {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.25rem 0.5rem;
margin: 0;
padding: 0;
list-style: none;
font-size: var(--wp--preset--font-size--petit);
}
.mob-fil--cat li {
display: flex;
align-items: center;
min-height: 24px;
color: var(--wp--preset--color--blanc-casse);
}
.mob-fil--cat li + li::before {
content: "";
display: inline-block;
width: 7px;
height: 7px;
margin-inline-end: 0.6rem;
border-top: 1.5px solid currentColor;
border-right: 1.5px solid currentColor;
transform: rotate(45deg);
opacity: 0.8;
vertical-align: 1px;
}
.mob-fil--cat a {
color: inherit;
text-decoration-color: rgba(255, 255, 255, 0.45);
text-underline-offset: 0.2em;
}
.mob-fil--cat a:hover,
.mob-fil--cat a:focus-visible {
color: var(--wp--preset--color--vert-lime);
text-decoration-color: currentColor;
}
.mob-sec--cat-entete .mob-fil--cat li[aria-current] {
font-weight: 600;
color: #FFFFFF;
}
.mob-cat-entete {
position: relative;
display: grid;
gap: clamp(1.25rem, 2.5vw, 2rem);
}
.mob-cat-entete__texte {
max-width: 60rem;
}
.mob-cat-entete__texte > .mob-cat-entete__titre {
margin-block: 0.5rem 0;
font-size: clamp(2rem, 4.2vw, 3.25rem);
line-height: 1.08;
color: #FFFFFF;
}
.mob-cat-entete__texte > .mob-cat-entete__chapo {
margin-block: 1rem 0;
font-size: clamp(1rem, 1.5vw, 1.125rem);
line-height: 1.65;
color: var(--wp--preset--color--blanc-casse);
}
.mob-cat-entete__texte > .mob-cat-entete__actions {
margin-block: 1.75rem 0;
display: flex;
flex-wrap: wrap;
gap: 0.75rem 1rem;
}
.mob-cat-reperes {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.5rem 1.5rem;
margin: 0;
padding-block-start: clamp(1rem, 2vw, 1.5rem);
border-block-start: 1px solid rgba(173, 213, 64, 0.35);
list-style: none;
font-size: var(--wp--preset--font-size--petit);
color: var(--wp--preset--color--blanc-casse);
}
.mob-cat-reperes li {
display: flex;
align-items: center;
gap: 0.5rem;
}
.mob-cat-reperes li::before {
content: "";
inline-size: 14px;
block-size: 2px;
border-radius: 0;
background: var(--wp--preset--color--vert-lime);
flex: none;
}
@media (max-width: 640px) {
.mob-sec--cat-entete {
min-height: 0;
}
.mob-cat-reperes {
gap: 0.5rem 1rem;
}
}
.mob-sec--cat-catalogue {
background: var(--wp--preset--color--blanc, #FFFFFF);
}
.mob-cat-barre {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: 1rem;
margin-block-end: clamp(1.5rem, 3vw, 2.25rem);
padding-block-end: 1rem;
border-block-end: 1px solid color-mix(in srgb, var(--wp--preset--color--ardoise) 16%, transparent);
}
.mob-cat-total {
margin: 0;
font-weight: 700;
font-size: clamp(1.05rem, 1.6vw, 1.25rem);
color: var(--wp--preset--color--anthracite);
}
.mob-cat-outils {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.75rem 1.25rem;
}
.mob-cat-filtres {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
}
.mob-jeton {
display: inline-flex;
align-items: center;
gap: 0.4rem;
min-block-size: 34px;
padding: 0.35rem 0.75rem;
border: 1px solid #7C8288;
border-radius: var(--wp--custom--rayon);
background: #FFFFFF;
font-family: inherit;
font-size: 0.875rem;
font-weight: 600;
color: var(--wp--preset--color--anthracite);
cursor: pointer;
transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}
.mob-jeton:hover {
border-color: var(--wp--preset--color--vert-profond);
background: color-mix(in srgb, var(--wp--preset--color--vert) 10%, #FFFFFF);
}
.mob-jeton.is-actif {
border-color: var(--wp--preset--color--vert-profond);
background: var(--wp--preset--color--vert);
color: var(--wp--preset--color--anthracite);
}
.mob-jeton__nb {
padding-inline: 0.35rem;
border-radius: var(--wp--custom--rayon);
background: color-mix(in srgb, var(--wp--preset--color--ardoise) 10%, transparent);
font-size: 0.75rem;
font-weight: 700;
}
.mob-jeton.is-actif .mob-jeton__nb {
background: rgba(255, 255, 255, 0.55);
}
.mob-cat-tri {
display: inline-flex;
align-items: center;
gap: 0.5rem;
font-size: 0.875rem;
color: var(--wp--preset--color--gris-fonce);
}
.mob-cat-tri__champ {
min-block-size: 34px;
padding: 0.35rem 0.6rem;
border: 1px solid #7C8288;
border-radius: var(--wp--custom--rayon);
background: #FFFFFF;
font-family: inherit;
font-size: 0.875rem;
color: var(--wp--preset--color--anthracite);
}
.mob-pcarte[hidden] {
display: none;
}
.mob-pgrille {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: clamp(1rem, 1.8vw, 1.75rem);
}
.mob-pcarte {
display: flex;
flex-direction: column;
background: #FFFFFF;
border: 1px solid color-mix(in srgb, var(--wp--preset--color--ardoise) 14%, transparent);
border-radius: var(--wp--custom--rayon);
overflow: clip;
transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}
.mob-pcarte:hover,
.mob-pcarte:focus-within {
transform: translateY(-4px);
border-color: color-mix(in srgb, var(--wp--preset--color--vert) 55%, transparent);
box-shadow: 0 18px 34px -22px rgba(28, 29, 31, 0.45);
}
.mob-pcarte__media {
position: relative;
display: block;
box-sizing: border-box;
aspect-ratio: 4 / 3;
background: linear-gradient(180deg, #F4F6F9 0%, #EAEEF3 100%);
border-block-end: 1px solid color-mix(in srgb, var(--wp--preset--color--ardoise) 10%, transparent);
}
.mob-pcarte__media::after {
content: "";
position: absolute;
inset-block-start: 0;
inset-inline: 0;
block-size: 3px;
background: linear-gradient(90deg, var(--wp--preset--color--vert), var(--wp--preset--color--vert-lime));
transform: scaleX(0);
transform-origin: left;
transition: transform 0.3s ease;
}
.mob-pcarte:hover .mob-pcarte__media::after,
.mob-pcarte:focus-within .mob-pcarte__media::after {
transform: scaleX(1);
}
.mob-pcarte__img {
position: absolute;
inset: 0;
inline-size: 100%;
block-size: 100%;
object-fit: contain;
padding: 0.75rem;
box-sizing: border-box;
transition: transform 0.35s ease;
}
.mob-pcarte:hover .mob-pcarte__img {
transform: scale(1.04);
}
.mob-pcarte__corps {
display: flex;
flex-direction: column;
flex: 1;
gap: 0.5rem;
padding: clamp(0.9rem, 1.4vw, 1.2rem);
}
.mob-pcarte__ref {
margin: 0;
font-size: 0.75rem;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--wp--preset--color--gris-fonce);
}
.mob-pcarte__titre {
margin: 0;
font-size: clamp(1rem, 1.25vw, 1.125rem);
line-height: 1.3;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.mob-pcarte__titre a {
color: var(--wp--preset--color--anthracite);
text-decoration: none;
padding-block: 3px;
}
.mob-pcarte__titre a:hover,
.mob-pcarte__titre a:focus-visible {
color: var(--wp--preset--color--vert-profond);
text-decoration: underline;
text-underline-offset: 0.18em;
}
.mob-pcarte__reperes {
display: flex;
flex-wrap: wrap;
gap: 0.35rem;
margin: 0;
padding: 0;
list-style: none;
}
.mob-pcarte__reperes li {
padding: 0.2rem 0.5rem;
border: 1px solid color-mix(in srgb, var(--wp--preset--color--ardoise) 22%, transparent);
border-radius: var(--wp--custom--rayon);
background: color-mix(in srgb, var(--wp--preset--color--ardoise) 5%, transparent);
font-size: 0.75rem;
color: var(--wp--preset--color--gris-fonce);
}
.mob-pcarte__accroche {
margin: 0;
font-size: 0.875rem;
line-height: 1.55;
color: var(--wp--preset--color--gris-fonce);
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
}
.mob-pcarte__lien {
margin-block-start: auto;
padding-block-start: 0.5rem;
display: inline-flex;
align-items: center;
gap: 0.4rem;
box-sizing: border-box;
font-weight: 700;
font-size: 0.875rem;
color: var(--wp--preset--color--vert-profond);
text-decoration: none;
}
.mob-pcarte__lien::after {
content: "";
inline-size: 14px;
block-size: 2px;
background: currentColor;
transition: transform 0.25s ease;
}
.mob-pcarte:hover .mob-pcarte__lien::after {
transform: translateX(4px);
}
.mob-cat-vide {
max-width: 46rem;
padding: clamp(1.5rem, 3vw, 2.5rem);
border: 1px solid color-mix(in srgb, var(--wp--preset--color--ardoise) 16%, transparent);
border-radius: var(--wp--custom--rayon);
background: #FFFFFF;
}
.mob-cat-vide > .mob-cat-vide__titre {
margin-block: 0 0.75rem;
font-weight: 700;
font-size: clamp(1.15rem, 1.8vw, 1.4rem);
color: var(--wp--preset--color--anthracite);
}
.mob-cat-vide > .mob-cat-vide__texte {
margin-block: 0 1.5rem;
color: var(--wp--preset--color--gris-fonce);
}
.mob-cat-vide > .mob-cat-vide__actions {
margin-block: 0;
display: flex;
flex-wrap: wrap;
gap: 0.75rem 1rem;
}
@media (max-width: 1199.98px) {
.mob-pgrille {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
}
@media (max-width: 899.98px) {
.mob-pgrille {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (max-width: 599.98px) {
.mob-pgrille {
grid-template-columns: minmax(0, 1fr);
}
.mob-pcarte__lien {
min-block-size: 44px;
}
.mob-pcarte__titre a {
padding-block: 6px;
}
.mob-jeton,
.mob-cat-tri__champ {
min-block-size: 44px;
}
}
.mob-guide__grille {
display: grid;
grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
gap: clamp(1.5rem, 3vw, 3rem);
}
.mob-guide__corps > .mob-guide__chapo {
margin-block: 0 clamp(1.5rem, 3vw, 2.25rem);
font-size: clamp(1.0625rem, 1.5vw, 1.25rem);
line-height: 1.65;
color: var(--wp--preset--color--anthracite);
}
.mob-guide__chapo p {
margin: 0;
}
.mob-guide__chapo p + p {
margin-block-start: 0.85rem;
}
.mob-guide__blocs {
display: grid;
gap: clamp(1rem, 2vw, 1.5rem);
}
.mob-guide__bloc {
position: relative;
isolation: isolate;
overflow: clip;
padding: clamp(1.25rem, 2.4vw, 2rem);
background: #FFFFFF;
border: 1px solid color-mix(in srgb, var(--wp--preset--color--ardoise) 12%, transparent);
border-radius: var(--wp--custom--rayon);
box-shadow: 0 14px 30px -26px rgba(28, 29, 31, 0.35);
color: var(--wp--preset--color--gris-fonce);
line-height: 1.7;
}
.mob-guide__num {
position: absolute;
inset-block-start: -0.35em;
inset-inline-end: 0.15em;
z-index: -1;
font-size: clamp(4.5rem, 9vw, 7rem);
font-weight: 800;
line-height: 1;
color: color-mix(in srgb, var(--wp--preset--color--ardoise) 7%, transparent);
pointer-events: none;
}
.mob-guide__bloc > .mob-guide__bloc-titre {
margin-block: 0 0.85rem;
max-width: 34rem;
font-size: clamp(1.1rem, 1.6vw, 1.3rem);
line-height: 1.3;
color: var(--wp--preset--color--anthracite);
}
.mob-guide__bloc p {
margin: 0;
max-width: 40rem;
}
.mob-guide__bloc p + p {
margin-block-start: 0.85rem;
}
.mob-guide__liste {
display: flex;
flex-wrap: wrap;
gap: 0.5rem 1.25rem;
margin: 0;
padding: 0;
list-style: none;
color: var(--wp--preset--color--gris-fonce);
font-size: 0.9375rem;
}
.mob-guide__liste li {
display: inline-flex;
align-items: baseline;
gap: 0.4rem;
}
.mob-guide__nb {
font-weight: 700;
font-size: 1.05rem;
color: var(--wp--preset--color--vert-profond);
}
.mob-guide__bloc > .mob-guide__note {
margin-block: 0.85rem 0;
max-width: 40rem;
font-size: 0.8125rem;
line-height: 1.5;
color: var(--wp--preset--color--gris-fonce);
}
.mob-guide__bloc--volet {
padding-block: clamp(1rem, 1.8vw, 1.35rem);
}
.mob-guide__criteres {
position: sticky;
inset-block-start: calc(var(--wp--custom--entete--hauteur, 5rem) + 1.5rem);
padding: clamp(1.25rem, 2.2vw, 1.75rem);
background: var(--wp--preset--color--ardoise);
border-radius: var(--wp--custom--rayon);
color: var(--wp--preset--color--blanc-casse);
}
.mob-guide__criteres > .mob-guide__criteres-titre {
margin-block: 0 1rem;
font-size: clamp(1rem, 1.4vw, 1.125rem);
color: #FFFFFF;
}
.mob-guide__criteres ul {
display: grid;
gap: 0.85rem;
margin: 0;
padding: 0;
list-style: none;
font-size: 0.9375rem;
line-height: 1.6;
}
.mob-guide__criteres li {
display: grid;
grid-template-columns: 14px minmax(0, 1fr);
gap: 0.75rem;
align-items: start;
}
.mob-guide__criteres li::before {
content: "";
inline-size: 14px;
block-size: 2px;
margin-block-start: 0.65em;
background: var(--wp--preset--color--vert-lime);
}
.mob-guide__criteres > .mob-guide__panneau-pied {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.75rem 1rem;
margin-block: 1.5rem 0;
padding-block-start: 1.25rem;
border-block-start: 1px solid rgba(173, 213, 64, 0.35);
}
.mob-guide__retour {
display: inline-flex;
align-items: center;
min-block-size: 24px;
color: var(--wp--preset--color--vert-lime);
font-size: 0.875rem;
font-weight: 600;
text-underline-offset: 0.2em;
}
@media (max-width: 599.98px) {
.mob-guide__retour {
min-block-size: 44px;
}
}
@media (max-width: 899.98px) {
.mob-guide__grille {
grid-template-columns: minmax(0, 1fr);
}
.mob-guide__criteres {
position: relative;
inset-block-start: auto;
}
}
.mob-voisines__grille {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: clamp(1rem, 1.8vw, 1.5rem);
}
.mob-voisine {
display: flex;
flex-direction: column;
overflow: clip;
background: #FFFFFF;
border: 1px solid color-mix(in srgb, var(--wp--preset--color--ardoise) 12%, transparent);
border-radius: var(--wp--custom--rayon);
transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}
.mob-voisine:hover,
.mob-voisine:focus-within {
transform: translateY(-4px);
border-color: color-mix(in srgb, var(--wp--preset--color--vert) 55%, transparent);
box-shadow: 0 18px 34px -22px rgba(28, 29, 31, 0.45);
}
.mob-voisine__media {
display: block;
position: relative;
box-sizing: border-box;
aspect-ratio: 4 / 3;
overflow: clip;
background: linear-gradient(180deg, #F4F6F9 0%, #EAEEF3 100%);
}
.mob-voisine__vide {
position: absolute;
inset: 0;
background:
radial-gradient(18rem 12rem at 78% -12%, rgba(122, 154, 34, 0.20), transparent 62%),
linear-gradient(160deg, #EEF2F7 0%, #E2E8F0 100%);
}
.mob-voisine__img {
inline-size: 100%;
block-size: 100%;
object-fit: cover;
transition: transform 0.35s ease;
}
.mob-voisine__img--produit {
object-fit: contain;
padding: 0.6rem;
box-sizing: border-box;
}
.mob-voisine:hover .mob-voisine__img {
transform: scale(1.05);
}
.mob-voisine__corps {
display: flex;
flex-direction: column;
gap: 0.3rem;
padding: clamp(0.85rem, 1.3vw, 1.1rem);
}
.mob-voisine__titre {
margin: 0;
font-size: clamp(0.95rem, 1.2vw, 1.0625rem);
line-height: 1.3;
}
.mob-voisine__titre a {
padding-block: 3px;
color: var(--wp--preset--color--anthracite);
text-decoration: none;
}
.mob-voisine__titre a:hover,
.mob-voisine__titre a:focus-visible {
color: var(--wp--preset--color--vert-profond);
text-decoration: underline;
text-underline-offset: 0.18em;
}
.mob-voisine__nb {
margin: 0;
font-size: 0.8125rem;
font-weight: 600;
color: var(--wp--preset--color--gris-fonce);
}
.mob-voisines > .mob-voisines__pied {
margin-block: clamp(1.5rem, 3vw, 2rem) 0;
}
.mob-faq-duo > .mob-faq-aside > .mob-tete {
margin-block-end: clamp(1.25rem, 2.5vw, 1.75rem);
max-width: none;
}
@media (max-width: 1199.98px) {
.mob-voisines__grille {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
}
@media (max-width: 899.98px) {
.mob-voisines__grille {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (max-width: 519.98px) {
.mob-voisines__grille {
grid-template-columns: minmax(0, 1fr);
}
.mob-voisine__titre a {
padding-block: 6px;
}
}
.mob-sec:has(> .mob-sec__inner > .mob-sec-vide) {
display: none;
}
.mob-cat-apercu {
margin: 0;
padding: 1rem 1.25rem;
border: 1px dashed color-mix(in srgb, var(--wp--preset--color--ardoise) 35%, transparent);
border-radius: var(--wp--custom--rayon);
color: color-mix(in srgb, var(--wp--preset--color--ardoise) 80%, transparent);
font-size: var(--wp--preset--font-size--petit);
}
/* pilier.css */
.mob-sec--pil-hero {
position: relative;
isolation: isolate;
overflow: clip;
padding-block: 0;
background: var(--wp--preset--color--ardoise);
color: var(--wp--preset--color--blanc-casse);
}
.mob-sec--pil-hero::before {
content: "";
position: absolute;
inset: -30% -18% auto auto;
width: 46rem;
height: 38rem;
z-index: -1;
pointer-events: none;
background:
radial-gradient(closest-side, rgba(173, 213, 64, 0.22), transparent);
}
.wp-block-group.mob-sec--pil-hero > * {
margin-block: 0;
}
.mob-pil-hero {
box-sizing: border-box;
display: grid;
grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
align-items: center;
gap: clamp(1.75rem, 4vw, 3.5rem);
padding-block: clamp(2.5rem, 5vw, 4rem);
}
.mob-pil-hero__texte > .mob-pil-hero__titre {
margin: 0;
font-size: clamp(2rem, 3.8vw, 3.1rem);
font-weight: 700;
line-height: 1.1;
letter-spacing: -0.025em;
color: var(--wp--preset--color--blanc);
text-wrap: balance;
}
.mob-pil-hero__texte > .mob-pil-hero__chapo {
margin-block: 1.1rem 0;
font-size: var(--wp--preset--font-size--intro);
line-height: 1.6;
color: var(--wp--preset--color--blanc-casse);
text-wrap: pretty;
}
.mob-pil-hero__texte > .mob-pil-hero__actions {
display: flex;
flex-wrap: wrap;
gap: 0.85rem;
margin-block: 1.6rem 0;
}
.mob-pil-hero__texte > .mob-pil-reperes {
list-style: none;
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 0.75rem;
margin-block: clamp(1.75rem, 3.5vw, 2.75rem) 0;
padding: 0;
}
.mob-pil-repere {
position: relative;
display: flex;
flex-direction: column;
gap: 0.3rem;
margin: 0;
padding: 0.9rem 0.95rem;
border: 1px solid rgba(255, 255, 255, 0.16);
border-radius: var(--wp--custom--rayon);
background: rgba(255, 255, 255, 0.045);
backdrop-filter: blur(10px) saturate(120%);
-webkit-backdrop-filter: blur(10px) saturate(120%);
}
.mob-pil-repere__picto {
color: var(--wp--preset--color--vert-lime);
line-height: 0;
}
.mob-pil-repere__n {
font-size: clamp(1.4rem, 2.2vw, 1.9rem);
font-weight: 700;
line-height: 1.05;
letter-spacing: -0.02em;
font-variant-numeric: tabular-nums;
color: var(--wp--preset--color--blanc);
}
.mob-pil-repere__cle {
font-size: var(--wp--preset--font-size--micro);
line-height: 1.35;
color: var(--wp--preset--color--blanc-casse);
text-wrap: pretty;
}
.mob-pil-hero__mosaique {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: clamp(0.6rem, 1.4vw, 1rem);
}
.mob-pil-hero__vignette {
position: relative;
display: block;
overflow: clip;
aspect-ratio: 4 / 3;
border: 1px solid rgba(255, 255, 255, 0.14);
border-radius: var(--wp--custom--rayon);
background: rgba(255, 255, 255, 0.05);
}
.mob-pil-hero__img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
}
@media (min-width: 601px) {
.mob-pil-hero__vignette:nth-child(2),
.mob-pil-hero__vignette:nth-child(4) {
transform: translateY(clamp(0.75rem, 2vw, 1.75rem));
}
}
.mob-sec--pil-familles {
background: var(--wp--preset--color--blanc);
}
.mob-sec--pil-index {
position: relative;
isolation: isolate;
overflow: clip;
background: linear-gradient(180deg, #E6ECF4 0%, #DCE4EE 100%);
}
.mob-sec--pil-index::before {
content: "";
position: absolute;
inset: -20% -10% auto;
height: 130%;
z-index: -1;
pointer-events: none;
background:
radial-gradient(40rem 26rem at 10% 6%, rgba(44, 60, 79, 0.1), transparent 62%);
}
.mob-pil-index {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: clamp(1rem, 2.2vw, 1.75rem);
align-items: start;
}
.mob-pil-groupe {
display: flex;
flex-direction: column;
padding: clamp(1.15rem, 2.2vw, 1.6rem);
border: 1px solid rgba(44, 60, 79, 0.16);
border-radius: var(--wp--custom--rayon);
background: var(--wp--preset--color--blanc);
box-shadow: 0 2px 10px rgba(20, 27, 35, 0.07);
}
.mob-pil-groupe > .mob-pil-groupe__tete {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 0.75rem;
margin: 0 0 0.5rem;
padding-block-end: 0.7rem;
border-block-end: 2px solid var(--wp--preset--color--vert);
}
.mob-pil-groupe__nom {
font-size: var(--wp--preset--font-size--titre-s);
font-weight: 700;
line-height: 1.25;
color: var(--wp--preset--color--anthracite);
}
.mob-pil-groupe__n {
flex: none;
font-size: var(--wp--preset--font-size--micro);
font-weight: 700;
font-variant-numeric: tabular-nums;
color: var(--wp--preset--color--vert-fonce);
}
.mob-pil-cats {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
}
.mob-pil-cat {
margin: 0;
}
.mob-pil-cat + .mob-pil-cat {
border-block-start: 1px solid var(--wp--preset--color--gris-brume);
}
.mob-pil-cat a {
position: relative;
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
align-items: center;
gap: 0.75rem;
min-height: 38px;
padding: 0.35rem 0.55rem;
margin-inline: -0.55rem;
border-radius: var(--wp--custom--rayon);
font-size: var(--wp--preset--font-size--petit);
line-height: 1.3;
text-decoration: none;
transition: background-color var(--mob-transition), color var(--mob-transition);
}
.mob-pil-cat a::before {
content: "";
position: absolute;
inset-inline-start: 0;
top: 50%;
width: 2px;
height: 0;
transform: translateY(-50%);
border-radius: var(--wp--custom--rayon);
background: linear-gradient(180deg, var(--wp--preset--color--vert), var(--wp--preset--color--vert-lime));
transition: height 320ms cubic-bezier(0.22, 0.7, 0.28, 1);
}
.mob-pil-cat__nom {
font-weight: 600;
color: var(--wp--preset--color--encre);
overflow-wrap: anywhere;
transition: color var(--mob-transition);
}
.mob-pil-cat__n {
font-size: var(--wp--preset--font-size--micro);
font-weight: 700;
font-variant-numeric: tabular-nums;
color: var(--wp--preset--color--gris-fonce);
transition: color var(--mob-transition);
}
.mob-pil-cat a:hover,
.mob-pil-cat a:focus-visible {
background: var(--wp--preset--color--vert-brume);
}
.mob-pil-cat a:hover::before,
.mob-pil-cat a:focus-visible::before {
height: 58%;
}
.mob-pil-cat a:hover .mob-pil-cat__nom,
.mob-pil-cat a:focus-visible .mob-pil-cat__nom,
.mob-pil-cat a:hover .mob-pil-cat__n,
.mob-pil-cat a:focus-visible .mob-pil-cat__n {
color: var(--wp--preset--color--vert-profond);
}
.mob-pil-catalogue > .mob-pil-note {
margin-block: clamp(1.25rem, 2.5vw, 1.75rem) 0;
font-size: var(--wp--preset--font-size--micro);
line-height: 1.6;
color: var(--wp--preset--color--gris-fonce);
}
.mob-sec--pil-guide {
background: var(--wp--preset--color--blanc);
}
.mob-pil-guide {
display: grid;
grid-template-columns: minmax(0, 4fr) minmax(0, 7fr);
gap: clamp(1.5rem, 3.5vw, 3rem);
}
.mob-pil-guide__aside {
display: block;
}
.mob-pil-guide__aside > .mob-tete {
position: sticky;
top: calc(var(--wp--custom--entete--hauteur) + 1.5rem);
max-width: none;
margin-block-end: 0;
}
.mob-pil-guide__texte > h3.mob-pil-releve {
counter-increment: none;
}
.mob-pil-guide__texte > h3.mob-pil-releve::before {
content: none;
}
.wp-block-group.mob-pil-guide > * {
margin-block: 0;
}
.mob-pil-guide__texte {
counter-reset: mob-etape;
}
.mob-pil-guide__texte > h3 {
counter-increment: mob-etape;
display: flex;
align-items: baseline;
gap: 0.75rem;
margin-block: clamp(2rem, 3.5vw, 2.75rem) 0.6rem;
font-size: var(--wp--preset--font-size--titre-m);
font-weight: 700;
line-height: 1.25;
color: var(--wp--preset--color--anthracite);
}
.mob-pil-guide__texte > h3:first-child {
margin-block-start: 0;
}
.mob-pil-guide__texte > h3::before {
content: counter(mob-etape, decimal-leading-zero);
flex: none;
font-size: var(--wp--preset--font-size--petit);
font-weight: 700;
font-variant-numeric: tabular-nums;
color: var(--wp--preset--color--vert-fonce);
letter-spacing: 0.04em;
}
.mob-pil-guide__texte > p {
margin-block: 0 0.9rem;
line-height: 1.7;
color: var(--wp--preset--color--gris-fonce);
text-wrap: pretty;
}
.mob-pil-guide__texte > ul {
margin-block: 0 0.9rem;
padding-inline-start: 1.15rem;
line-height: 1.7;
color: var(--wp--preset--color--gris-fonce);
}
.mob-pil-guide__texte > ul li {
margin-block-end: 0.35rem;
}
.mob-pil-guide__texte > ul li::marker {
color: var(--wp--preset--color--vert);
}
.mob-pil-guide__texte > .mob-pil-matieres {
margin-block-start: clamp(1.75rem, 3vw, 2.5rem);
}
.mob-pil-matieres {
padding: clamp(1.15rem, 2.2vw, 1.6rem);
border: 1px solid rgba(44, 60, 79, 0.16);
border-radius: var(--wp--custom--rayon);
background: var(--wp--preset--color--gris-nuage);
}
.mob-pil-matieres__liste {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 0.65rem;
}
.mob-pil-matiere {
display: grid;
grid-template-columns: minmax(6.5rem, auto) minmax(0, 1fr) auto;
align-items: center;
gap: 0.85rem;
margin: 0;
font-size: var(--wp--preset--font-size--petit);
}
.mob-pil-matiere__nom {
font-weight: 700;
color: var(--wp--preset--color--anthracite);
}
.mob-pil-matiere__barre {
position: relative;
display: block;
height: 8px;
border-radius: var(--wp--custom--rayon);
background: var(--wp--preset--color--gris-brume);
overflow: clip;
}
.mob-pil-matiere__barre::before {
content: "";
position: absolute;
inset: 0 auto 0 0;
width: var(--mob-part, 0%);
border-radius: var(--wp--custom--rayon);
background: linear-gradient(90deg, var(--wp--preset--color--vert), var(--wp--preset--color--vert-lime));
}
.mob-pil-matiere__n {
font-size: var(--wp--preset--font-size--micro);
font-weight: 700;
font-variant-numeric: tabular-nums;
color: var(--wp--preset--color--gris-fonce);
white-space: nowrap;
}
.mob-sec--pil-faq {
background: var(--wp--preset--color--blanc);
}
.mob-sec--pil-cta {
position: relative;
isolation: isolate;
overflow: clip;
background: linear-gradient(180deg, #E6ECF4 0%, #DCE4EE 100%);
}
.mob-sec--pil-cta::before {
content: "";
position: absolute;
inset: -22% -10% auto;
height: 130%;
z-index: -1;
pointer-events: none;
background:
radial-gradient(36rem 24rem at 88% 8%, rgba(122, 154, 34, 0.12), transparent 62%);
}
@media (min-width: 1000px) {
.mob-pil-hero {
min-height: calc(100svh - var(--mob-entete-total));
}
}
@media (max-height: 920px) {
.mob-pil-hero {
padding-block: clamp(1.5rem, 3vw, 2.25rem);
}
.mob-pil-hero__texte > .mob-pil-hero__titre {
font-size: clamp(1.75rem, 3vw, 2.5rem);
}
.mob-pil-hero__texte > .mob-pil-hero__chapo {
margin-block-start: 0.75rem;
}
.mob-pil-hero__texte > .mob-pil-hero__actions {
margin-block-start: 1.1rem;
}
.mob-pil-hero__texte > .mob-pil-reperes {
margin-block-start: 1.25rem;
}
.mob-pil-repere {
padding: 0.65rem 0.8rem;
}
}
@media (max-height: 700px) {
.mob-pil-hero {
padding-block: clamp(1rem, 2vw, 1.35rem);
}
.mob-pil-hero__texte > .mob-pil-hero__titre {
font-size: clamp(1.6rem, 2.6vw, 2.05rem);
}
.mob-pil-hero__texte > .mob-pil-hero__chapo {
margin-block-start: 0.6rem;
font-size: var(--wp--preset--font-size--corps);
}
.mob-pil-hero__texte > .mob-pil-hero__actions {
margin-block-start: 0.9rem;
}
.mob-pil-hero__texte > .mob-pil-reperes {
margin-block-start: 0.9rem;
}
.mob-pil-repere {
padding: 0.5rem 0.7rem;
}
.mob-pil-repere__n {
font-size: clamp(1.2rem, 1.8vw, 1.5rem);
}
}
@media (max-width: 1079.98px) {
.mob-pil-index {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (max-width: 999.98px) {
.mob-pil-hero {
grid-template-columns: 1fr;
}
.mob-pil-guide {
grid-template-columns: 1fr;
}
.mob-pil-guide__aside > .mob-tete {
position: relative;
top: auto;
}
.mob-pil-hero__mosaique {
order: 2;
}
}
@media (max-width: 700px) {
.mob-pil-index {
grid-template-columns: 1fr;
}
.mob-pil-hero__texte > .mob-pil-reperes {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.mob-pil-hero__actions > a {
flex: 1 1 100%;
}
}
@media (max-width: 520px) {
.mob-pil-matiere {
grid-template-columns: minmax(0, 1fr) auto;
gap: 0.35rem 0.75rem;
}
.mob-pil-matiere__barre {
grid-column: 1 / -1;
order: 3;
}
}
/* entreprise.css */
.mob-sec--ent-hero {
position: relative;
isolation: isolate;
overflow: clip;
padding-block: clamp(2.5rem, 5vw, 4.25rem);
background: var(--wp--preset--color--ardoise);
color: var(--wp--preset--color--blanc-casse);
}
.mob-sec--ent-hero::before {
content: "";
position: absolute;
inset: -32% -16% auto auto;
width: 44rem;
height: 36rem;
z-index: -1;
pointer-events: none;
background:
radial-gradient(closest-side, rgba(173, 213, 64, 0.22), transparent);
}
.mob-ent-hero {
display: grid;
grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
align-items: center;
gap: clamp(1.75rem, 4vw, 3.25rem);
}
.mob-ent-hero__texte > .mob-ent-hero__titre {
margin: 0;
font-size: clamp(1.9rem, 3.6vw, 2.9rem);
font-weight: 700;
line-height: 1.12;
letter-spacing: -0.025em;
color: var(--wp--preset--color--blanc);
text-wrap: balance;
}
.mob-ent-hero__texte > .mob-ent-hero__chapo {
margin-block: 1.1rem 0;
font-size: var(--wp--preset--font-size--intro);
line-height: 1.6;
color: var(--wp--preset--color--blanc-casse);
text-wrap: pretty;
}
.mob-ent-hero__texte > .mob-ent-hero__actions {
display: flex;
flex-wrap: wrap;
gap: 0.85rem;
margin-block: 1.6rem 0;
}
.mob-ent-hero__cadre {
position: relative;
display: block;
overflow: clip;
aspect-ratio: 5 / 4;
border: 1px solid rgba(255, 255, 255, 0.14);
border-radius: var(--wp--custom--rayon);
background: rgba(255, 255, 255, 0.05);
}
.mob-ent-hero__img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
}
.mob-sec--ent-marque {
background: var(--wp--preset--color--blanc);
}
.mob-ent-duo {
list-style: none;
margin: 0;
padding: 0;
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: clamp(1rem, 2.4vw, 1.75rem);
}
.mob-ent-duo__item {
position: relative;
overflow: clip;
display: flex;
flex-direction: column;
margin: 0;
padding: clamp(1.35rem, 2.6vw, 2rem);
border: 1px solid rgba(44, 60, 79, 0.16);
border-radius: var(--wp--custom--rayon);
background: var(--wp--preset--color--gris-nuage);
}
.mob-ent-duo__item::before {
content: "";
position: absolute;
inset: 0 0 auto;
height: 3px;
background: linear-gradient(90deg, var(--wp--preset--color--vert), var(--wp--preset--color--vert-lime));
}
.mob-ent-duo__picto {
display: inline-flex;
align-items: center;
justify-content: center;
width: 48px;
height: 48px;
margin-block-end: 1rem;
border: 1px solid rgba(122, 154, 34, 0.3);
border-radius: var(--wp--custom--rayon);
background: linear-gradient(145deg, rgba(122, 154, 34, 0.14), rgba(173, 213, 64, 0.1));
color: var(--wp--preset--color--vert-profond);
}
.mob-ent-duo__cle {
font-size: var(--wp--preset--font-size--micro);
font-weight: 700;
letter-spacing: 0.09em;
text-transform: uppercase;
color: var(--wp--preset--color--vert-fonce);
}
.mob-ent-duo__nom {
margin-block: 0.2rem 0.55rem;
font-size: var(--wp--preset--font-size--titre-m);
font-weight: 700;
line-height: 1.15;
letter-spacing: -0.01em;
color: var(--wp--preset--color--anthracite);
}
.mob-ent-duo__txt {
font-size: var(--wp--preset--font-size--petit);
line-height: 1.65;
color: var(--wp--preset--color--gris-fonce);
text-wrap: pretty;
}
.mob-ent-reperes {
list-style: none;
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: clamp(0.75rem, 1.8vw, 1.25rem);
margin: clamp(1.5rem, 3vw, 2.25rem) 0 0;
padding: 0;
}
.mob-ent-repere {
display: flex;
flex-direction: column;
gap: 0.3rem;
margin: 0;
padding: 1rem 1.1rem;
border: 1px solid rgba(44, 60, 79, 0.16);
border-radius: var(--wp--custom--rayon);
background: var(--wp--preset--color--blanc);
}
.mob-ent-repere__picto {
color: var(--wp--preset--color--vert-fonce);
line-height: 0;
}
.mob-ent-repere__n {
font-size: clamp(1.4rem, 2.2vw, 1.9rem);
font-weight: 700;
line-height: 1.05;
letter-spacing: -0.02em;
font-variant-numeric: tabular-nums;
color: var(--wp--preset--color--anthracite);
}
.mob-ent-repere__cle {
font-size: var(--wp--preset--font-size--micro);
line-height: 1.35;
color: var(--wp--preset--color--gris-fonce);
text-wrap: pretty;
}
.mob-sec--ent-frise {
position: relative;
isolation: isolate;
overflow: clip;
background: linear-gradient(180deg, #E6ECF4 0%, #DCE4EE 100%);
}
.mob-sec--ent-frise::before {
content: "";
position: absolute;
inset: -20% -10% auto;
height: 130%;
z-index: -1;
pointer-events: none;
background:
radial-gradient(38rem 26rem at 8% 6%, rgba(44, 60, 79, 0.1), transparent 62%);
}
.mob-ent-frise {
display: grid;
grid-template-columns: minmax(0, 4fr) minmax(0, 7fr);
gap: clamp(1.5rem, 3.5vw, 3rem);
}
.wp-block-group.mob-ent-frise > * {
margin-block: 0;
}
.mob-ent-frise__aside > .mob-tete {
position: sticky;
top: calc(var(--wp--custom--entete--hauteur) + 1.5rem);
max-width: none;
margin-block-end: 0;
}
.mob-ent-frise__texte {
position: relative;
padding-inline-start: clamp(1.5rem, 3vw, 2.25rem);
}
.mob-ent-frise__texte::before {
content: "";
position: absolute;
inset-block: 0.9rem 1rem;
inset-inline-start: 0;
width: 2px;
border-radius: var(--wp--custom--rayon);
background: linear-gradient(180deg, var(--wp--preset--color--vert), rgba(122, 154, 34, 0.18));
}
.mob-ent-frise__texte > h3 {
position: relative;
margin-block: clamp(2rem, 3.5vw, 2.75rem) 0.6rem;
font-size: var(--wp--preset--font-size--titre-m);
font-weight: 700;
line-height: 1.25;
color: var(--wp--preset--color--anthracite);
}
.mob-ent-frise__texte > h3:first-child {
margin-block-start: 0;
}
.mob-ent-frise__texte > h3::before {
content: "";
position: absolute;
inset-inline-start: calc(-1 * clamp(1.5rem, 3vw, 2.25rem) - 5px);
top: 0.55em;
width: 12px;
height: 12px;
border: 2px solid var(--wp--preset--color--vert);
border-radius: var(--wp--custom--rayon);
background: var(--wp--preset--color--blanc);
}
.mob-ent-frise__texte > p {
margin-block: 0 0.9rem;
line-height: 1.7;
color: var(--wp--preset--color--gris-fonce);
text-wrap: pretty;
}
.mob-ent-frise__texte > p a {
color: var(--wp--preset--color--vert-profond);
}
.mob-sec--ent-valeurs {
background: var(--wp--preset--color--blanc);
}
.mob-sec--ent-cta {
position: relative;
isolation: isolate;
overflow: clip;
background: linear-gradient(180deg, #E6ECF4 0%, #DCE4EE 100%);
}
.mob-sec--ent-cta::before {
content: "";
position: absolute;
inset: -22% -10% auto;
height: 130%;
z-index: -1;
pointer-events: none;
background:
radial-gradient(34rem 24rem at 90% 8%, rgba(122, 154, 34, 0.12), transparent 62%);
}
@media (max-width: 999.98px) {
.mob-ent-hero {
grid-template-columns: 1fr;
}
.mob-ent-frise {
grid-template-columns: 1fr;
}
.mob-ent-frise__aside > .mob-tete {
position: relative;
top: auto;
}
}
@media (max-width: 700px) {
.mob-ent-duo {
grid-template-columns: 1fr;
}
.mob-ent-reperes {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.mob-ent-hero__actions > a {
flex: 1 1 100%;
}
}
/* realisation.css */
.mob-sec.mob-sec--rhero {
padding-block: 0;
padding-inline: 0;
position: relative;
isolation: isolate;
overflow: clip;
background: var(--wp--preset--color--ardoise);
}
.mob-rhero {
position: relative;
display: grid;
grid-template-columns: minmax(0, 1fr);
}
.mob-rhero__volet {
position: relative;
z-index: 1;
display: flex;
justify-content: flex-end;
background: var(--wp--preset--color--ardoise);
}
.mob-rhero__inner {
box-sizing: border-box;
width: 100%;
display: flex;
flex-direction: column;
gap: clamp(1.5rem, 3vw, 2.5rem);
padding-block: clamp(2rem, 5vw, 3.25rem);
padding-inline: var(--mob-marge);
}
.mob-rhero__haut {
display: flex;
flex-direction: column;
}
.mob-rhero__haut > .mob-rhero__fil {
margin-block: 0 clamp(1.25rem, 2.5vw, 1.75rem);
}
.mob-rhero__haut > .mob-rhero__gamme {
margin-block: 0 0.75rem;
font-size: var(--wp--preset--font-size--petit);
font-weight: 600;
color: var(--wp--preset--color--vert-lime);
}
.mob-rhero__haut > .mob-rhero__titre {
margin-block: 0;
font-size: clamp(1.75rem, 3.4vw, 3rem);
line-height: 1.08;
letter-spacing: -0.02em;
color: #FFFFFF;
text-wrap: balance;
}
.mob-rhero__haut > .mob-rhero__chapo {
margin-block: clamp(0.85rem, 1.6vw, 1.25rem) 0;
font-size: clamp(0.9375rem, 1.15vw, 1.0625rem);
line-height: 1.62;
color: var(--wp--preset--color--blanc-casse);
text-wrap: pretty;
}
.mob-rhero__haut > .mob-rhero__identite {
margin-block: clamp(1.25rem, 2.4vw, 1.75rem) 0;
display: flex;
flex-wrap: wrap;
gap: 0.75rem clamp(1.5rem, 3vw, 2.5rem);
padding-block-start: clamp(1.25rem, 2.4vw, 1.75rem);
border-block-start: 1px solid rgba(173, 213, 64, 0.35);
}
.mob-rhero__item {
display: grid;
gap: 0.2rem;
min-inline-size: 0;
}
.mob-rhero__cle {
font-size: 0.6875rem;
font-weight: 700;
letter-spacing: 0.09em;
text-transform: uppercase;
color: var(--wp--preset--color--vert-lime);
}
.mob-rhero__val {
margin: 0;
font-size: 1rem;
font-weight: 600;
line-height: 1.35;
color: #FFFFFF;
}
.mob-rhero__haut > .mob-rhero__actions {
margin-block: clamp(1.5rem, 3vw, 2.25rem) 0;
display: flex;
flex-wrap: wrap;
gap: 0.75rem;
}
.mob-rhero__descente {
display: inline-flex;
align-items: center;
gap: 0.6rem;
min-block-size: 44px;
font-size: 0.8125rem;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
text-decoration: none;
color: var(--wp--preset--color--blanc-casse);
}
.mob-rhero__descente:hover,
.mob-rhero__descente:focus-visible {
color: #FFFFFF;
}
.mob-rhero__chevron {
display: inline-flex;
align-items: center;
justify-content: center;
inline-size: 34px;
block-size: 34px;
border: 1px solid rgba(255, 255, 255, 0.5);
border-radius: var(--wp--custom--rayon);
transition: transform var(--mob-transition), border-color var(--mob-transition);
}
.mob-rhero__descente:hover .mob-rhero__chevron {
transform: translateY(3px);
border-color: var(--wp--preset--color--vert-lime);
}
@media (prefers-reduced-motion: reduce) {
.mob-rhero__chevron {
transition: none;
}
.mob-rhero__descente:hover .mob-rhero__chevron {
transform: none;
}
}
.mob-rhero__fil ul {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.4rem 0.55rem;
margin: 0;
padding: 0;
list-style: none;
font-size: 0.8125rem;
}
.mob-rhero__fil li {
display: flex;
align-items: center;
gap: 0.55rem;
min-block-size: 24px;
color: var(--wp--preset--color--blanc-casse);
}
.mob-rhero__fil li + li::before {
content: "";
inline-size: 5px;
block-size: 5px;
border-radius: 50%;
background: rgba(236, 236, 236, 0.5);
flex: none;
}
.mob-rhero__fil a {
color: var(--wp--preset--color--blanc-casse);
text-decoration: none;
}
.mob-rhero__fil a:hover,
.mob-rhero__fil a:focus-visible {
text-decoration: underline;
}
.mob-sec--rhero .mob-rhero__fil li[aria-current] {
font-weight: 600;
color: #FFFFFF;
}
.mob-rhero__photo {
position: relative;
overflow: clip;
background: linear-gradient(160deg, #33455A 0%, #2C3C4F 100%);
order: -1;
block-size: clamp(230px, 46vw, 380px);
}
.mob-rhero__img {
inline-size: 100%;
block-size: 100%;
object-fit: cover;
display: block;
}
.mob-rhero__photo--nue {
background:
radial-gradient(48rem 30rem at 78% -10%, rgba(122, 154, 34, 0.32), transparent 62%),
linear-gradient(160deg, #33455A 0%, #2C3C4F 46%, #253445 100%);
}
.mob-rhero__photo::before {
content: "";
position: absolute;
inset: auto 0 0 0;
block-size: 3px;
z-index: 2;
background: linear-gradient(90deg, var(--wp--preset--color--vert) 0%, var(--wp--preset--color--vert-lime) 100%);
}
@media (min-width: 901px) {
.mob-rhero {
grid-template-columns: minmax(0, 54fr) minmax(0, 46fr);
min-block-size: calc(100svh - var(--mob-entete-h) - 1px);
}
.mob-rhero__photo {
order: 0;
block-size: auto;
}
.mob-rhero__img {
position: absolute;
inset: 0;
}
.mob-rhero__photo::before {
inset: 0 auto 0 0;
inline-size: 3px;
block-size: auto;
background: linear-gradient(180deg, var(--wp--preset--color--vert) 0%, var(--wp--preset--color--vert-lime) 100%);
}
.mob-rhero__volet {
padding-inline-start: max(var(--mob-marge), calc((100% - var(--wp--style--global--wide-size)) / 2));
}
.mob-rhero__inner {
padding-inline-start: 0;
padding-inline-end: clamp(1.75rem, 3.4vw, 3.25rem);
padding-block: clamp(1.25rem, 2.4vw, 2rem);
display: grid;
grid-template-rows: 1fr auto;
row-gap: clamp(0.75rem, 1.6vw, 1.25rem);
align-items: stretch;
min-block-size: calc(100svh - var(--mob-entete-h) - 1px);
}
.mob-rhero__haut {
align-self: center;
}
.mob-rhero__haut > .mob-rhero__fil {
margin-block-end: clamp(0.75rem, 1.4vw, 1.1rem);
}
.mob-rhero__haut > .mob-rhero__gamme {
margin-block-end: 0.5rem;
}
.mob-rhero__haut > .mob-rhero__chapo {
margin-block-start: clamp(0.7rem, 1.2vw, 1rem);
}
.mob-rhero__haut > .mob-rhero__identite {
margin-block-start: clamp(0.9rem, 1.6vw, 1.25rem);
padding-block-start: clamp(0.9rem, 1.6vw, 1.25rem);
}
.mob-rhero__haut > .mob-rhero__actions {
margin-block-start: clamp(1rem, 2vw, 1.5rem);
}
.mob-rhero__chapo {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 6;
overflow: hidden;
}
}
@media (min-width: 901px) and (max-height: 900px) {
.mob-rhero__chapo {
-webkit-line-clamp: 5;
}
.mob-rhero__haut > .mob-rhero__titre {
font-size: clamp(1.625rem, 2.6vw, 2.375rem);
}
}
@media (min-width: 901px) and (max-height: 800px) {
.mob-rhero__chapo {
-webkit-line-clamp: 3;
}
.mob-rhero__haut > .mob-rhero__titre {
font-size: clamp(1.5rem, 2.2vw, 2rem);
}
.mob-rhero__inner {
padding-block: clamp(1rem, 1.8vw, 1.4rem);
}
.mob-rhero__haut > .mob-rhero__identite {
margin-block-start: 0.85rem;
padding-block-start: 0.85rem;
}
.mob-rhero__haut > .mob-rhero__actions {
margin-block-start: 1rem;
}
}
.mob-sec--rplanche {
background: var(--wp--preset--color--blanc);
}
.mob-rplanche__tete {
margin-block-end: clamp(1.5rem, 3vw, 2.25rem);
}
.mob-rplanche__tete > .mob-rplanche__titre {
margin-block: 0;
}
.mob-rplanche__tete > .mob-rplanche__aide {
margin-block: 0.75rem 0;
max-inline-size: 42rem;
color: var(--wp--preset--color--gris-fonce);
}
.mob-rplanche__piste {
--mob-piste-h: clamp(240px, 32vw, 440px);
display: flex;
gap: clamp(0.75rem, 1.6vw, 1.25rem);
padding-inline: max(var(--mob-marge), calc((100% - var(--wp--style--global--wide-size)) / 2));
overflow-x: auto;
overflow-y: clip;
scroll-snap-type: x proximity;
scroll-padding-inline-start: max(var(--mob-marge), calc((100% - var(--wp--style--global--wide-size)) / 2));
scrollbar-width: none;
-webkit-overflow-scrolling: touch;
}
.mob-rplanche__piste::-webkit-scrollbar {
display: none;
}
.mob-rplanche__piste:focus-visible {
outline: 3px solid var(--wp--preset--color--vert-fonce);
outline-offset: 4px;
}
.mob-rplanche__vue {
position: relative;
flex: none;
margin: 0;
block-size: var(--mob-piste-h);
aspect-ratio: var(--mob-ratio, 1.333);
max-inline-size: min(86vw, 60rem);
overflow: clip;
border-radius: var(--wp--custom--rayon);
background: linear-gradient(180deg, #F4F6F9 0%, #EAEEF3 100%);
scroll-snap-align: start;
}
.mob-rplanche__img {
inline-size: 100%;
block-size: 100%;
object-fit: cover;
display: block;
transition: transform 0.5s ease;
}
.mob-rplanche__vue:hover .mob-rplanche__img {
transform: scale(1.03);
}
@media (prefers-reduced-motion: reduce) {
.mob-rplanche__img,
.mob-rplanche__vue:hover .mob-rplanche__img {
transition: none;
transform: none;
}
}
.mob-rplanche__rang {
position: absolute;
inset-block-start: 0;
inset-inline-start: 0;
z-index: 1;
display: inline-flex;
align-items: center;
justify-content: center;
min-inline-size: 2.5rem;
block-size: 2.5rem;
padding-inline: 0.5rem;
border-end-end-radius: var(--wp--custom--rayon);
background: rgba(20, 26, 33, 0.82);
color: #FFFFFF;
font-size: 0.8125rem;
font-weight: 700;
letter-spacing: 0.06em;
}
.mob-rrecit__grille {
display: grid;
grid-template-columns: minmax(0, 18rem) minmax(0, 1fr);
gap: clamp(1.5rem, 3.4vw, 3rem);
}
.mob-rrecit--seul .mob-rrecit__grille {
grid-template-columns: minmax(0, 1fr);
}
.mob-rfrise {
position: sticky;
top: calc(var(--wp--custom--entete--hauteur) + 1.5rem);
}
.mob-rfrise__intro {
margin-block: 0 1rem;
font-size: 0.6875rem;
font-weight: 700;
letter-spacing: 0.09em;
text-transform: uppercase;
color: var(--wp--preset--color--vert-profond);
}
.mob-rfrise__liste {
list-style: none;
margin: 0;
padding: 0;
display: grid;
gap: 0.25rem;
border-inline-start: 2px solid color-mix(in srgb, var(--wp--preset--color--ardoise) 16%, transparent);
}
.mob-rfrise__lien {
display: grid;
grid-template-columns: 2.25rem minmax(0, 1fr);
gap: 0.5rem;
align-items: baseline;
padding: 0.55rem 0.75rem;
margin-inline-start: -2px;
border-inline-start: 2px solid transparent;
min-block-size: 44px;
box-sizing: border-box;
text-decoration: none;
color: var(--wp--preset--color--gris-fonce);
transition: color var(--mob-transition), border-color var(--mob-transition);
}
.mob-rfrise__num {
font-size: 0.75rem;
font-weight: 700;
letter-spacing: 0.06em;
color: var(--wp--preset--color--vert-profond);
}
.mob-rfrise__texte {
font-size: 0.875rem;
line-height: 1.45;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
overflow: hidden;
}
.mob-rfrise__lien:hover,
.mob-rfrise__lien:focus-visible {
color: var(--wp--preset--color--anthracite);
border-inline-start-color: var(--wp--preset--color--vert);
}
.mob-rfrise__item--actif > .mob-rfrise__lien {
color: var(--wp--preset--color--anthracite);
font-weight: 600;
border-inline-start-color: var(--wp--preset--color--vert);
}
.mob-rrecit__chapo {
font-size: clamp(1.0625rem, 1.4vw, 1.1875rem);
line-height: 1.65;
color: var(--wp--preset--color--anthracite);
}
.mob-rrecit__chapo > p {
margin-block: 0 1rem;
}
.mob-rrecit__etape {
position: relative;
margin-block-start: clamp(2rem, 4vw, 3rem);
padding-block-start: clamp(1.25rem, 2.4vw, 1.75rem);
border-block-start: 1px solid color-mix(in srgb, var(--wp--preset--color--ardoise) 14%, transparent);
scroll-margin-top: calc(var(--wp--custom--entete--hauteur) + 1.5rem);
}
.mob-rrecit__num {
margin-block: 0 0.35rem;
font-size: 0.8125rem;
font-weight: 700;
letter-spacing: 0.1em;
color: var(--wp--preset--color--vert-profond);
}
.mob-rrecit__titre {
margin-block: 0 0.85rem;
font-size: clamp(1.25rem, 1.9vw, 1.5rem);
line-height: 1.25;
color: var(--wp--preset--color--anthracite);
text-wrap: balance;
}
.mob-rrecit__etape p {
margin-block: 0 1rem;
line-height: 1.7;
color: var(--wp--preset--color--gris-fonce);
}
.mob-rrecit__etape p:last-child {
margin-block-end: 0;
}
.mob-rrecit__etape ul,
.mob-rrecit__etape ol {
margin-block: 0 1rem;
padding-inline-start: 1.25rem;
line-height: 1.7;
color: var(--wp--preset--color--gris-fonce);
}
.mob-rrecit__etape li + li {
margin-block-start: 0.35rem;
}
.mob-rmob__liste {
list-style: none;
margin: 0;
padding: 0;
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: clamp(1rem, 2vw, 1.5rem);
}
.mob-rmob__liste--1 {
grid-template-columns: minmax(0, 26rem);
}
.mob-rmob__liste--2 {
grid-template-columns: repeat(2, minmax(0, 1fr));
max-inline-size: 54rem;
}
.mob-rmob__liste--3 {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.mob-rverre {
position: relative;
display: flex;
border-radius: var(--wp--custom--rayon);
border: 1px solid rgba(255, 255, 255, 0.5);
background: rgba(255, 255, 255, 0.045);
backdrop-filter: blur(10px) saturate(120%);
-webkit-backdrop-filter: blur(10px) saturate(120%);
overflow: clip;
transition: transform var(--mob-transition), border-color var(--mob-transition), background-color var(--mob-transition);
}
.mob-rverre:hover,
.mob-rverre:focus-within {
transform: translateY(-3px);
border-color: rgba(173, 213, 64, 0.6);
background: rgba(255, 255, 255, 0.085);
}
@media (prefers-reduced-motion: reduce) {
.mob-rverre {
transition: none;
}
.mob-rverre:hover,
.mob-rverre:focus-within {
transform: none;
}
}
.mob-rverre__lien {
display: flex;
flex-direction: column;
inline-size: 100%;
box-sizing: border-box;
text-decoration: none;
}
.mob-rverre__media {
position: relative;
display: block;
overflow: clip;
aspect-ratio: 4 / 3;
background: rgba(255, 255, 255, 0.92);
}
.mob-rverre__img {
position: absolute;
inset: 0;
inline-size: 100%;
block-size: 100%;
object-fit: contain;
padding: 0.5rem;
box-sizing: border-box;
display: block;
}
.mob-rverre__vide {
display: block;
block-size: 100%;
background: linear-gradient(160deg, #F4F6F9 0%, #E4EAF2 100%);
}
.mob-rverre__corps {
display: flex;
flex-direction: column;
gap: 0.3rem;
padding: clamp(0.85rem, 1.6vw, 1.15rem);
min-inline-size: 0;
}
.mob-rverre__cat {
font-size: 0.6875rem;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--wp--preset--color--vert-lime);
}
.mob-rverre__nom {
font-size: 1rem;
font-weight: 700;
line-height: 1.3;
color: #FFFFFF;
}
.mob-rverre__ref {
font-size: 0.8125rem;
color: var(--wp--preset--color--blanc-casse);
}
.mob-rverre__cta {
display: inline-flex;
align-items: center;
gap: 0.4rem;
min-block-size: 24px;
margin-block-start: auto;
padding-block-start: 0.6rem;
font-size: 0.8125rem;
font-weight: 700;
color: var(--wp--preset--color--blanc-casse);
}
.mob-rverre__fleche {
display: inline-flex;
transition: transform var(--mob-transition);
}
.mob-rverre:hover .mob-rverre__fleche {
transform: translateX(4px);
}
@media (prefers-reduced-motion: reduce) {
.mob-rverre__fleche,
.mob-rverre:hover .mob-rverre__fleche {
transition: none;
transform: none;
}
}
.mob-sec--rmob:has(> .mob-sec__inner > .mob-sec-vide) + .mob-sec--voisines {
background: linear-gradient(180deg, #DCE4EE 0%, #CFDAE8 100%);
}
.mob-sec--cat-entete--nu {
background:
radial-gradient(58rem 34rem at 88% -10%, rgba(122, 154, 34, 0.30), transparent 62%),
linear-gradient(160deg, #33455A 0%, #2C3C4F 46%, #253445 100%);
}
.mob-rliste > .mob-cat-total {
margin-block: 0 clamp(1.25rem, 2.5vw, 1.75rem);
padding-block-end: 1rem;
border-block-end: 1px solid color-mix(in srgb, var(--wp--preset--color--ardoise) 16%, transparent);
}
.mob-reals--archive {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
@media (max-width: 1079.98px) {
.mob-rmob__liste,
.mob-rmob__liste--3 {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (max-width: 899.98px) {
.mob-rrecit__cote {
display: none;
}
.mob-rrecit__grille {
grid-template-columns: minmax(0, 1fr);
}
.mob-reals--archive {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (max-width: 599.98px) {
.mob-rmob__liste,
.mob-rmob__liste--2,
.mob-rmob__liste--3,
.mob-reals--archive {
grid-template-columns: minmax(0, 1fr);
}
.mob-rmob__liste--2 {
max-inline-size: none;
}
.mob-rplanche__piste {
--mob-piste-h: clamp(220px, 58vw, 300px);
}
.mob-rverre__lien {
flex-direction: row;
align-items: stretch;
}
.mob-rverre__media {
flex: none;
inline-size: 38%;
aspect-ratio: auto;
}
}
/* blog.css */
.mob-sec--bhero {
position: relative;
isolation: isolate;
overflow: clip;
background: var(--wp--preset--color--ardoise);
}
.mob-sec--bhero::before {
content: "";
position: absolute;
inset: -30% -20% auto auto;
inline-size: 44rem;
block-size: 34rem;
z-index: -1;
pointer-events: none;
background:
radial-gradient(closest-side, rgba(173, 213, 64, 0.20), transparent);
}
.mob-bhero {
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: clamp(1.75rem, 3.4vw, 3rem);
align-items: center;
}
.mob-bhero__texte > .mob-bhero__fil {
margin-block: 0 clamp(1rem, 2vw, 1.5rem);
}
.mob-bhero__texte > .mob-bhero__titre {
margin-block: 0;
font-size: clamp(1.875rem, 3.2vw, 2.75rem);
line-height: 1.1;
letter-spacing: -0.02em;
color: #FFFFFF;
text-wrap: balance;
}
.mob-bhero__texte > .mob-bhero__chapo {
margin-block: clamp(0.85rem, 1.6vw, 1.25rem) 0;
font-size: clamp(0.9375rem, 1.15vw, 1.0625rem);
line-height: 1.62;
color: var(--wp--preset--color--blanc-casse);
text-wrap: pretty;
}
.mob-bhero__texte > .mob-bhero__reperes {
margin-block: clamp(1.25rem, 2.4vw, 1.75rem) 0;
padding: clamp(1rem, 2vw, 1.35rem) 0 0;
list-style: none;
display: flex;
flex-wrap: wrap;
gap: 0.6rem clamp(1.25rem, 2.6vw, 2.25rem);
border-block-start: 1px solid rgba(173, 213, 64, 0.35);
}
.mob-bhero__reperes li {
display: flex;
align-items: center;
gap: 0.55rem;
font-size: 0.9375rem;
font-weight: 600;
color: #FFFFFF;
}
.mob-bhero__reperes li::before {
content: "";
inline-size: 6px;
block-size: 6px;
border-radius: 50%;
background: var(--wp--preset--color--vert-lime);
flex: none;
}
.mob-bhero__reperes a {
display: inline-flex;
align-items: center;
min-block-size: 24px;
border-block-end: 1px solid rgba(173, 213, 64, 0.55);
text-decoration: none;
color: #FFFFFF;
transition: border-color var(--mob-transition);
}
.mob-bhero__reperes a:hover,
.mob-bhero__reperes a:focus-visible {
border-block-end-color: var(--wp--preset--color--vert-lime);
}
.mob-bhero__fil ul {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.4rem 0.55rem;
margin: 0;
padding: 0;
list-style: none;
font-size: 0.8125rem;
}
.mob-bhero__fil li {
display: flex;
align-items: center;
gap: 0.55rem;
min-block-size: 24px;
color: var(--wp--preset--color--blanc-casse);
}
.mob-bhero__fil li + li::before {
content: "";
inline-size: 5px;
block-size: 5px;
border-radius: 50%;
background: rgba(236, 236, 236, 0.5);
flex: none;
}
.mob-bhero__fil a {
color: var(--wp--preset--color--blanc-casse);
text-decoration: none;
}
.mob-bhero__fil a:hover,
.mob-bhero__fil a:focus-visible {
text-decoration: underline;
}
.mob-sec--bhero .mob-bhero__fil li[aria-current] {
font-weight: 600;
color: #FFFFFF;
}
.mob-bhero__etiquette {
margin-block: 0 0.75rem;
font-size: 0.6875rem;
font-weight: 700;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--wp--preset--color--vert-lime);
}
.mob-bune {
display: flex;
flex-direction: column;
box-sizing: border-box;
overflow: clip;
border-radius: var(--wp--custom--rayon);
border: 1px solid rgba(255, 255, 255, 0.5);
background: rgba(255, 255, 255, 0.045);
backdrop-filter: blur(10px) saturate(120%);
-webkit-backdrop-filter: blur(10px) saturate(120%);
text-decoration: none;
transition: transform var(--mob-transition), border-color var(--mob-transition), background-color var(--mob-transition);
}
.mob-bune:hover,
.mob-bune:focus-visible {
transform: translateY(-3px);
border-color: rgba(173, 213, 64, 0.6);
background: rgba(255, 255, 255, 0.085);
}
.mob-bune__media {
position: relative;
display: block;
overflow: clip;
aspect-ratio: 16 / 10;
background: rgba(255, 255, 255, 0.08);
}
.mob-bune__img,
.mob-bune__vide {
display: block;
position: absolute;
inset: 0;
inline-size: 100%;
block-size: 100%;
object-fit: cover;
transition: transform 900ms cubic-bezier(0.22, 0.7, 0.28, 1);
}
.mob-bune__vide {
background: linear-gradient(140deg, #33455A, #253445);
}
.mob-bune:hover .mob-bune__img {
transform: scale(1.04);
}
.mob-bune__cat {
position: absolute;
inset: auto auto 0.75rem 0.75rem;
display: inline-flex;
align-items: center;
min-block-size: 24px;
padding: 0.35rem 0.7rem;
border: 1px solid rgba(255, 255, 255, 0.14);
border-radius: var(--wp--custom--rayon);
background: rgba(20, 26, 33, 0.86);
font-size: 0.6875rem;
font-weight: 700;
letter-spacing: 0.07em;
text-transform: uppercase;
color: #FFFFFF;
}
.mob-bune__corps {
display: flex;
flex-direction: column;
flex: 1;
gap: 0.5rem;
padding: clamp(1.15rem, 2.2vw, 1.6rem);
}
.mob-bune__meta {
font-size: 0.8125rem;
color: var(--wp--preset--color--blanc-casse);
}
.mob-bune__titre {
font-size: clamp(1.125rem, 1.7vw, 1.375rem);
font-weight: 700;
line-height: 1.28;
color: #FFFFFF;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
overflow: hidden;
}
.mob-bune__extrait {
font-size: 0.9375rem;
line-height: 1.6;
color: var(--wp--preset--color--blanc-casse);
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
overflow: hidden;
}
.mob-bune__lire {
display: inline-flex;
align-items: center;
gap: 0.4rem;
min-block-size: 24px;
margin-block-start: auto;
padding-block-start: 0.35rem;
font-size: 0.875rem;
font-weight: 700;
color: #FFFFFF;
}
.mob-bune__lire svg {
transition: transform var(--mob-transition);
}
.mob-bune:hover .mob-bune__lire svg {
transform: translateX(4px);
}
@media (prefers-reduced-motion: reduce) {
.mob-bune,
.mob-bune__img,
.mob-bune__lire svg {
transition: none;
}
.mob-bune:hover,
.mob-bune:focus-visible,
.mob-bune:hover .mob-bune__img,
.mob-bune:hover .mob-bune__lire svg {
transform: none;
}
}
@media (min-width: 901px) {
.mob-bhero {
grid-template-columns: minmax(0, 47fr) minmax(0, 53fr);
}
.mob-bhero--seul {
grid-template-columns: minmax(0, 1fr);
}
}
.mob-sec--bliste {
background: var(--wp--preset--color--blanc);
}
.mob-posts--archive.mob-posts--n2 {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.mob-posts--archive.mob-posts--n1 {
grid-template-columns: minmax(0, 1fr);
}
.mob-posts--n1 .mob-post__lien {
flex-direction: row;
align-items: stretch;
}
.mob-posts--n1 .mob-post__media {
flex: none;
inline-size: 42%;
aspect-ratio: auto;
}
.mob-posts--n1 .mob-post__corps {
justify-content: center;
padding: clamp(1.35rem, 2.6vw, 2.25rem);
}
.mob-bliste__vide {
margin: 0;
max-inline-size: 46rem;
font-size: var(--wp--preset--font-size--intro);
line-height: 1.6;
color: var(--wp--preset--color--gris-fonce);
}
.mob-bliste--vide > .mob-bsujets__pied {
margin-block: 1.25rem 0;
}
.mob-bpage {
margin-block-start: clamp(1.75rem, 3.4vw, 2.5rem);
}
.mob-bpage ul {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 0.5rem;
margin: 0;
padding: 0;
list-style: none;
}
.mob-bpage a,
.mob-bpage span {
display: inline-flex;
align-items: center;
justify-content: center;
box-sizing: border-box;
min-inline-size: 44px;
min-block-size: 44px;
padding-inline: 0.85rem;
border: 1px solid var(--wp--preset--color--gris-brume);
border-radius: var(--wp--custom--rayon);
font-weight: 700;
text-decoration: none;
color: var(--wp--preset--color--anthracite);
transition: border-color var(--mob-transition), background-color var(--mob-transition);
}
.mob-bpage a:hover,
.mob-bpage a:focus-visible {
border-color: var(--wp--preset--color--vert);
background: var(--wp--preset--color--gris-nuage);
}
.mob-bpage .current {
border-color: var(--wp--preset--color--vert);
background: var(--wp--preset--color--vert);
color: var(--wp--preset--color--anthracite);
}
.mob-bsujets__liste {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-wrap: wrap;
gap: 0.6rem;
}
.mob-bsujet {
display: inline-flex;
align-items: center;
gap: 0.55rem;
box-sizing: border-box;
min-block-size: 44px;
padding: 0.5rem 0.9rem;
border: 1px solid color-mix(in srgb, var(--wp--preset--color--ardoise) 20%, transparent);
border-radius: var(--wp--custom--rayon);
background: var(--wp--preset--color--blanc);
font-size: 0.9375rem;
font-weight: 600;
text-decoration: none;
color: var(--wp--preset--color--anthracite);
transition: border-color var(--mob-transition), transform var(--mob-transition), box-shadow var(--mob-transition);
}
.mob-bsujet:hover,
.mob-bsujet:focus-visible {
transform: translateY(-2px);
border-color: var(--wp--preset--color--vert);
box-shadow: 0 6px 18px rgba(20, 27, 35, 0.10);
}
.mob-bsujet__n {
display: inline-flex;
align-items: center;
justify-content: center;
min-inline-size: 1.5rem;
padding-inline: 0.35rem;
border-radius: var(--wp--custom--rayon);
background: var(--wp--preset--color--gris-nuage);
font-size: 0.75rem;
font-weight: 700;
color: var(--wp--preset--color--gris-fonce);
}
.mob-bsujets__pied {
margin-block: clamp(1.5rem, 3vw, 2rem) 0;
}
@media (prefers-reduced-motion: reduce) {
.mob-bsujet,
.mob-bsujet:hover,
.mob-bsujet:focus-visible {
transition: none;
transform: none;
}
}
@media (max-width: 899.98px) {
.mob-posts--archive.mob-posts--n2,
.mob-posts--archive.mob-posts--n3 {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (max-width: 699.98px) {
.mob-posts--n1 .mob-post__lien {
flex-direction: column;
}
.mob-posts--n1 .mob-post__media {
inline-size: 100%;
aspect-ratio: 16 / 10;
}
}
@media (max-width: 599.98px) {
.mob-posts--archive.mob-posts--n1,
.mob-posts--archive.mob-posts--n2,
.mob-posts--archive.mob-posts--n3 {
grid-template-columns: minmax(0, 1fr);
}
}
/* article.css */
.mob-main--article {
--mob-ahero-ecart: clamp(1rem, 2vw, 1.5rem);
--mob-ahero-marge: clamp(1.5rem, 3vw, 2.5rem);
}
.mob-sec.mob-sec--ahero {
position: relative;
isolation: isolate;
overflow: visible;
background: var(--wp--preset--color--ardoise);
}
.mob-sec--ahero::before {
content: "";
position: absolute;
inset: 0;
z-index: -1;
pointer-events: none;
background:
radial-gradient(38rem 26rem at 82% 8%, rgba(173, 213, 64, 0.18), transparent 62%);
}
@keyframes mob-a-monte {
from {
opacity: 0;
transform: translateY(18px);
}
}
@keyframes mob-a-image {
from {
opacity: 0;
transform: scale(1.04);
clip-path: inset(14% 0 0 0);
}
}
.mob-ahero__fil,
.mob-ahero__cat,
.mob-ahero__titre,
.mob-ahero__chapo,
.mob-ahero__metas {
animation: mob-a-monte 0.75s cubic-bezier(0.22, 0.7, 0.28, 1) backwards;
}
.mob-ahero__fil   { animation-delay: 0.05s; }
.mob-ahero__cat   { animation-delay: 0.14s; }
.mob-ahero__titre { animation-delay: 0.22s; }
.mob-ahero__chapo { animation-delay: 0.32s; }
.mob-ahero__metas { animation-delay: 0.42s; }
.mob-ahero__media {
animation: mob-a-image 1.1s cubic-bezier(0.22, 0.7, 0.28, 1) 0.3s backwards;
}
@media (prefers-reduced-motion: reduce) {
.mob-ahero__fil,
.mob-ahero__cat,
.mob-ahero__titre,
.mob-ahero__chapo,
.mob-ahero__metas,
.mob-ahero__media {
animation: none;
}
}
.mob-ahero__texte {
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: var(--mob-ahero-ecart);
}
.mob-ahero__texte > * {
margin-block: 0;
}
.mob-ahero__fil {
display: none;
}
.mob-ahero__fil ul {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.4rem 0.55rem;
margin: 0;
padding: 0;
list-style: none;
font-size: 0.8125rem;
}
.mob-ahero__fil li {
display: flex;
align-items: center;
gap: 0.55rem;
min-block-size: 24px;
color: var(--wp--preset--color--blanc-casse);
}
.mob-ahero__fil li + li::before {
content: "";
inline-size: 5px;
block-size: 5px;
border-radius: 50%;
background: rgba(236, 236, 236, 0.5);
flex: none;
}
.mob-ahero__fil a {
color: var(--wp--preset--color--blanc-casse);
text-decoration: none;
}
.mob-ahero__fil a:hover,
.mob-ahero__fil a:focus-visible {
text-decoration: underline;
}
.mob-sec--ahero .mob-ahero__fil li[aria-current] {
font-weight: 600;
color: #FFFFFF;
}
.mob-ahero__cat {
display: inline-flex;
align-items: center;
gap: 0.5rem;
justify-self: start;
box-sizing: border-box;
min-block-size: 32px;
padding: 0.35rem 0.85rem;
border: 1px solid rgba(173, 213, 64, 0.45);
border-radius: var(--wp--custom--rayon);
background: rgba(173, 213, 64, 0.10);
font-size: 0.75rem;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
text-decoration: none;
color: var(--wp--preset--color--vert-lime);
transition: background-color var(--mob-transition), border-color var(--mob-transition);
}
.mob-ahero__cat:hover,
.mob-ahero__cat:focus-visible {
background: rgba(173, 213, 64, 0.20);
border-color: rgba(173, 213, 64, 0.75);
}
.mob-ahero__pastille {
inline-size: 7px;
block-size: 7px;
transform: rotate(45deg);
background: var(--wp--preset--color--vert-lime);
flex: none;
}
.mob-ahero__titre {
margin: 0;
font-size: clamp(1.875rem, 4vw, 3.25rem);
line-height: 1.06;
letter-spacing: -0.025em;
color: #FFFFFF;
text-wrap: balance;
}
.mob-ahero__chapo {
margin: 0;
font-size: clamp(1rem, 1.3vw, 1.1875rem);
line-height: 1.6;
color: var(--wp--preset--color--blanc-casse);
text-wrap: pretty;
}
.mob-ahero__metas {
display: flex;
flex-wrap: wrap;
gap: 0.5rem clamp(1rem, 2.2vw, 1.75rem);
margin: 0;
padding-block-start: var(--mob-ahero-ecart);
border-block-start: 1px solid rgba(173, 213, 64, 0.35);
list-style: none;
}
.mob-ahero__metas li {
display: flex;
align-items: center;
gap: 0.5rem;
font-size: 0.875rem;
font-weight: 600;
color: #FFFFFF;
}
.mob-ahero__metas li::before {
content: "";
inline-size: 5px;
block-size: 5px;
border-radius: 50%;
background: var(--wp--preset--color--vert-lime);
flex: none;
}
.mob-ahero__media {
position: relative;
z-index: 2;
margin: clamp(1.5rem, 3vw, 2.25rem) 0 0;
overflow: clip;
border-radius: var(--wp--custom--rayon);
box-shadow: 0 24px 60px rgba(11, 16, 21, 0.34);
aspect-ratio: 16 / 9;
background: linear-gradient(160deg, #33455A, #253445);
}
.mob-ahero__img {
inline-size: 100%;
block-size: 100%;
object-fit: cover;
display: block;
}
.mob-sec--acorps {
background: var(--wp--preset--color--blanc);
padding-block-start: clamp(2rem, 4vw, 4rem);
}
.mob-art__grille {
display: grid;
grid-template-columns: minmax(0, 19rem) minmax(0, 1fr);
gap: clamp(1.75rem, 3.6vw, 3.25rem);
}
.mob-art--seul .mob-art__grille {
grid-template-columns: minmax(0, 1fr);
}
.mob-art__collant {
position: sticky;
top: calc(var(--wp--custom--entete--hauteur) + 1.5rem);
display: grid;
gap: clamp(1.25rem, 2.4vw, 1.75rem);
}
.mob-somm__intro {
margin: 0 0 0.85rem;
font-size: 0.6875rem;
font-weight: 700;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--wp--preset--color--vert-profond);
}
.mob-somm__liste {
list-style: none;
margin: 0;
padding: 0;
display: grid;
gap: 0.15rem;
border-inline-start: 2px solid color-mix(in srgb, var(--wp--preset--color--ardoise) 14%, transparent);
counter-reset: none;
}
.mob-somm__lien {
display: grid;
grid-template-columns: 2rem minmax(0, 1fr);
gap: 0.5rem;
align-items: baseline;
box-sizing: border-box;
min-block-size: 44px;
padding: 0.5rem 0.75rem;
margin-inline-start: -2px;
border-inline-start: 2px solid transparent;
text-decoration: none;
color: var(--wp--preset--color--gris-fonce);
transition: color var(--mob-transition), border-color var(--mob-transition);
}
.mob-somm__num {
font-size: 0.6875rem;
font-weight: 700;
letter-spacing: 0.06em;
color: var(--wp--preset--color--vert-profond);
}
.mob-somm__texte {
font-size: 0.875rem;
line-height: 1.45;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
overflow: hidden;
}
.mob-somm__lien:hover,
.mob-somm__lien:focus-visible {
color: var(--wp--preset--color--anthracite);
border-inline-start-color: var(--wp--preset--color--vert);
}
.mob-somm__item--actif > .mob-somm__lien {
color: var(--wp--preset--color--anthracite);
font-weight: 600;
border-inline-start-color: var(--wp--preset--color--vert);
}
.mob-part {
padding-block-start: clamp(1rem, 2vw, 1.35rem);
border-block-start: 1px solid color-mix(in srgb, var(--wp--preset--color--ardoise) 14%, transparent);
}
.mob-part__titre {
margin: 0 0 0.75rem;
font-size: 0.6875rem;
font-weight: 700;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--wp--preset--color--vert-profond);
}
.mob-part__liste {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
}
.mob-part__lien {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
box-sizing: border-box;
inline-size: 44px;
min-block-size: 44px;
padding: 0;
border: 1px solid color-mix(in srgb, var(--wp--preset--color--ardoise) 22%, transparent);
border-radius: var(--wp--custom--rayon);
background: var(--wp--preset--color--blanc);
color: var(--wp--preset--color--anthracite);
text-decoration: none;
cursor: pointer;
transition: transform var(--mob-transition), border-color var(--mob-transition), background-color var(--mob-transition);
}
.mob-part__lien:hover,
.mob-part__lien:focus-visible {
transform: translateY(-2px);
border-color: var(--wp--preset--color--vert);
background: var(--wp--preset--color--gris-nuage);
}
.mob-part__nom {
position: absolute;
inline-size: 1px;
block-size: 1px;
margin: -1px;
padding: 0;
overflow: hidden;
clip-path: inset(50%);
white-space: nowrap;
border: 0;
}
.mob-part__lien--copie-ok {
border-color: var(--wp--preset--color--vert);
background: var(--wp--preset--color--vert);
}
@media (prefers-reduced-motion: reduce) {
.mob-part__lien,
.mob-part__lien:hover,
.mob-part__lien:focus-visible {
transition: none;
transform: none;
}
}
.mob-prose-article {
font-size: clamp(1rem, 1.15vw, 1.0625rem);
line-height: 1.75;
color: var(--wp--preset--color--gris-fonce);
}
.mob-prose-article > * + * {
margin-block-start: 1.15rem;
}
.mob-prose-article p {
margin-block: 0;
text-wrap: pretty;
}
.mob-prose-article > p + p {
margin-block-start: 1.15rem;
}
.mob-prose-article > p:first-child {
font-size: clamp(1.0625rem, 1.35vw, 1.1875rem);
color: var(--wp--preset--color--anthracite);
}
.mob-prose-article .mob-art__h2,
.mob-prose-article h2 {
margin-block: clamp(2.25rem, 4vw, 3rem) 0.85rem;
font-size: clamp(1.375rem, 2.1vw, 1.75rem);
line-height: 1.22;
color: var(--wp--preset--color--anthracite);
text-wrap: balance;
scroll-margin-top: calc(var(--wp--custom--entete--hauteur) + 1.5rem);
}
.mob-prose-article h2::before {
content: "";
display: block;
inline-size: 42px;
block-size: 3px;
margin-block-end: 0.85rem;
border-radius: var(--wp--custom--rayon);
background: linear-gradient(90deg, var(--wp--preset--color--vert) 0%, var(--wp--preset--color--vert-lime) 100%);
}
.mob-prose-article h3 {
margin-block: clamp(1.6rem, 2.8vw, 2.1rem) 0.6rem;
font-size: clamp(1.125rem, 1.5vw, 1.3125rem);
line-height: 1.3;
color: var(--wp--preset--color--anthracite);
scroll-margin-top: calc(var(--wp--custom--entete--hauteur) + 1.5rem);
}
.mob-prose-article h4 {
margin-block: 1.5rem 0.5rem;
font-size: 1.0625rem;
color: var(--wp--preset--color--anthracite);
}
.mob-prose-article a:not(.mob-btn):not(.mob-btn--fantome) {
color: var(--wp--preset--color--vert-fonce);
text-underline-offset: 3px;
text-decoration-thickness: 1px;
}
.mob-prose-article a:not(.mob-btn):hover {
text-decoration-thickness: 2px;
}
.mob-prose-article strong {
color: var(--wp--preset--color--anthracite);
}
.mob-cta-lien,
.mob-prose-article .mob-cta-lien,
.mob-prose-article > a {
display: inline-flex;
align-items: center;
gap: 0.45rem;
min-block-size: 44px;
font-weight: 700;
text-decoration: none;
color: var(--wp--preset--color--vert-fonce);
}
.mob-prose-article li > a:only-child {
display: inline-flex;
align-items: center;
min-block-size: 44px;
}
.mob-cta-lien::after,
.mob-prose-article > a::after {
content: "\2192";
transition: transform var(--mob-transition);
}
.mob-cta-lien:hover,
.mob-cta-lien:focus-visible,
.mob-prose-article > a:hover,
.mob-prose-article > a:focus-visible {
text-decoration: underline;
}
.mob-cta-lien:hover::after,
.mob-prose-article > a:hover::after {
transform: translateX(4px);
}
@media (prefers-reduced-motion: reduce) {
.mob-cta-lien::after,
.mob-cta-lien:hover::after,
.mob-prose-article > a::after,
.mob-prose-article > a:hover::after {
transition: none;
transform: none;
}
}
.mob-prose-article ul,
.mob-prose-article ol {
margin-block: 1.25rem;
padding: 0;
list-style: none;
display: grid;
gap: 0.7rem;
}
.mob-prose-article li {
position: relative;
padding-inline-start: 2.15rem;
line-height: 1.7;
}
.mob-prose-article ul > li::before {
content: "";
position: absolute;
inset-inline-start: 0.4rem;
inset-block-start: 0.62em;
inline-size: 9px;
block-size: 9px;
transform: rotate(45deg);
background: linear-gradient(135deg, var(--wp--preset--color--vert) 0%, var(--wp--preset--color--vert-lime) 100%);
}
.mob-prose-article ol {
counter-reset: mob-ol;
}
.mob-prose-article ol > li {
counter-increment: mob-ol;
padding-inline-start: 2.6rem;
}
.mob-prose-article ol > li::before {
content: counter(mob-ol, decimal-leading-zero);
position: absolute;
inset-inline-start: 0;
inset-block-start: 0.15em;
display: inline-flex;
align-items: center;
justify-content: center;
min-inline-size: 1.85rem;
block-size: 1.5rem;
padding-inline: 0.3rem;
box-sizing: border-box;
border-radius: var(--wp--custom--rayon);
background: color-mix(in srgb, var(--wp--preset--color--vert) 16%, transparent);
color: var(--wp--preset--color--vert-profond);
font-size: 0.75rem;
font-weight: 700;
letter-spacing: 0.04em;
}
.mob-prose-article li > ul,
.mob-prose-article li > ol {
margin-block: 0.6rem 0;
}
.mob-prose-article li > ul > li::before {
transform: none;
border-radius: 50%;
inline-size: 7px;
block-size: 7px;
background: var(--wp--preset--color--gris);
}
.mob-prose-article svg {
inline-size: 1.05em;
block-size: 1.05em;
max-inline-size: 100%;
flex: none;
}
.mob-prose-article li:has(> svg) {
display: flex;
align-items: flex-start;
gap: 0.7rem;
padding-inline-start: 0;
}
.mob-prose-article li:has(> svg)::before {
content: none;
}
.mob-prose-article li > svg {
margin-block-start: 0.32em;
color: var(--wp--preset--color--vert-fonce);
}
.mob-prose-article details {
margin-block: 0.75rem;
border: 1px solid color-mix(in srgb, var(--wp--preset--color--ardoise) 16%, transparent);
border-radius: var(--wp--custom--rayon);
background: var(--wp--preset--color--blanc);
}
.mob-prose-article summary {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
box-sizing: border-box;
min-block-size: 44px;
padding: 0.9rem 1.1rem;
cursor: pointer;
font-weight: 700;
color: var(--wp--preset--color--anthracite);
list-style: none;
}
.mob-prose-article summary::-webkit-details-marker {
display: none;
}
.mob-prose-article summary::marker {
content: "";
}
.mob-prose-article summary:hover {
color: var(--wp--preset--color--vert-profond);
}
.mob-prose-article summary > svg {
color: var(--wp--preset--color--vert-fonce);
transition: transform var(--mob-transition);
}
.mob-prose-article details[open] > summary > svg {
transform: rotate(180deg);
}
.mob-prose-article details > *:not(summary) {
margin-block: 0;
padding: 0 1.1rem 1.1rem;
}
@media (prefers-reduced-motion: reduce) {
.mob-prose-article summary > svg {
transition: none;
}
}
.mob-prose-article table {
inline-size: 100%;
border-collapse: collapse;
margin-block: 1.5rem;
font-size: 0.9375rem;
}
.mob-prose-article th,
.mob-prose-article td {
padding: 0.7rem 0.85rem;
border: 1px solid color-mix(in srgb, var(--wp--preset--color--ardoise) 16%, transparent);
text-align: start;
vertical-align: top;
}
.mob-prose-article th {
background: var(--wp--preset--color--gris-nuage);
color: var(--wp--preset--color--anthracite);
font-weight: 700;
}
.mob-prose-article tbody tr:nth-child(even) td {
background: color-mix(in srgb, var(--wp--preset--color--gris-nuage) 45%, transparent);
}
.mob-prose-article .mob-art__table {
overflow-x: auto;
overflow-y: clip;
}
.mob-prose-article .mob-art__definition {
margin-block: 1.5rem;
padding: 1.1rem 1.35rem;
border: 1px solid color-mix(in srgb, var(--wp--preset--color--ardoise) 16%, transparent);
border-radius: var(--wp--custom--rayon);
background: var(--wp--preset--color--gris-nuage);
}
.mob-prose-article .mob-art__definition > p {
margin: 0;
}
.mob-prose-article .mob-art__definition > p + p {
margin-block-start: 0.6rem;
}
.mob-prose-article blockquote {
margin-block: 1.5rem;
padding: 0.25rem 0 0.25rem 1.25rem;
border-inline-start: 3px solid var(--wp--preset--color--vert);
font-size: 1.0625rem;
color: var(--wp--preset--color--anthracite);
}
.mob-prose-article img {
max-inline-size: 100%;
block-size: auto;
border-radius: var(--wp--custom--rayon);
}
.mob-art__pied {
margin-block-start: clamp(2.5rem, 5vw, 3.5rem);
padding: clamp(1.5rem, 3vw, 2.25rem);
border: 1px solid color-mix(in srgb, var(--wp--preset--color--ardoise) 16%, transparent);
border-radius: var(--wp--custom--rayon);
background: linear-gradient(180deg, var(--wp--preset--color--gris-nuage) 0%, #EDF1F6 100%);
}
.mob-art__pied-titre {
margin: 0;
font-size: clamp(1.125rem, 1.7vw, 1.375rem);
font-weight: 700;
color: var(--wp--preset--color--anthracite);
}
.mob-art__pied-texte {
margin: 0.6rem 0 0;
max-inline-size: 46rem;
color: var(--wp--preset--color--gris-fonce);
}
.mob-art__pied-actions {
margin: clamp(1.1rem, 2.2vw, 1.5rem) 0 0;
display: flex;
flex-wrap: wrap;
gap: 0.75rem;
}
.mob-art-progres {
position: fixed;
inset-block-start: 0;
inset-inline: 0;
block-size: 3px;
z-index: 60;
transform: scaleX(var(--mob-progres, 0));
transform-origin: 0 50%;
background: linear-gradient(90deg, var(--wp--preset--color--vert) 0%, var(--wp--preset--color--vert-lime) 100%);
pointer-events: none;
}
@media (prefers-reduced-motion: reduce) {
.mob-art-progres {
transition: none;
}
}
@media (min-width: 1000px) {
.mob-sec.mob-sec--ahero {
padding-block: var(--mob-ahero-marge);
}
.mob-ahero {
display: grid;
grid-template-columns: minmax(0, 54fr) minmax(0, 46fr);
column-gap: clamp(2rem, 4vw, 3.5rem);
align-items: center;
min-block-size: calc(100svh - var(--mob-entete-h) - 1px - 2 * var(--mob-ahero-marge));
}
.mob-ahero__media {
margin-block-start: 0;
aspect-ratio: 5 / 4;
}
}
@media (max-width: 899.98px) {
.mob-art__grille {
grid-template-columns: minmax(0, 1fr);
}
.mob-art__collant {
position: static;
}
.mob-somm__texte {
-webkit-line-clamp: 2;
}
}
@media (max-width: 999.98px) {
.mob-ahero__media {
aspect-ratio: 2 / 1;
}
}
@media (max-width: 599.98px) {
.mob-ahero__media {
aspect-ratio: 2 / 1;
}
.mob-prose-article li {
padding-inline-start: 1.85rem;
}
.mob-prose-article ol > li {
padding-inline-start: 2.4rem;
}
}
.mob-prose-article .mob-art__produits {
margin-block: 2rem;
}
.mob-prose-article .mob-art__produits-titre {
margin: 0 0 0.9rem;
font-weight: 700;
color: var(--wp--preset--color--anthracite);
}
.mob-pgrille--article {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.mob-prose-article .mob-art__produits ul {
margin: 0;
display: flex;
gap: 0.35rem;
}
.mob-prose-article .mob-art__produits li {
padding: 0.2rem 0.5rem;
line-height: 1.4;
}
.mob-prose-article .mob-art__produits ul > li::before {
content: none;
}
.mob-prose-article .mob-art__produits .mob-pcarte__titre {
margin: 0;
font-size: clamp(1rem, 1.25vw, 1.125rem);
line-height: 1.3;
}
.mob-prose-article .mob-art__produits .mob-pcarte a:not(.mob-btn):not(.mob-btn--fantome) {
text-decoration: none;
color: var(--wp--preset--color--anthracite);
}
.mob-prose-article .mob-art__produits .mob-pcarte__titre a:hover,
.mob-prose-article .mob-art__produits .mob-pcarte__titre a:focus-visible {
color: var(--wp--preset--color--vert-profond);
text-decoration: underline;
}
.mob-prose-article .mob-art__produits .mob-pcarte__lien {
color: var(--wp--preset--color--vert-profond);
}
.mob-prose-article .mob-art__produits .mob-pcarte__img {
border-radius: 0;
position: absolute;
inset: 0;
max-inline-size: 100%;
inline-size: 100%;
block-size: 100%;
object-fit: contain;
}
@media (max-width: 899.98px) {
.mob-pgrille--article {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (max-width: 599.98px) {
.mob-pgrille--article {
grid-template-columns: minmax(0, 1fr);
}
}
.mob-prose-article .mob-art__cta {
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
gap: 1.25rem 2rem;
margin-block: clamp(2rem, 4vw, 2.75rem);
padding: clamp(1.4rem, 2.6vw, 2rem) clamp(1.4rem, 2.8vw, 2.25rem);
border-radius: var(--wp--custom--rayon);
background:
radial-gradient(34rem 18rem at 100% 0%, rgba(173, 213, 64, 0.16), transparent 60%),
var(--wp--preset--color--ardoise);
color: var(--wp--preset--color--blanc-casse);
}
.mob-prose-article .mob-art__cta-texte {
flex: 1 1 26rem;
min-inline-size: 0;
}
.mob-prose-article .mob-art__cta-titre {
margin: 0;
font-size: clamp(1.25rem, 1.9vw, 1.5rem);
font-weight: 700;
line-height: 1.2;
color: var(--wp--preset--color--blanc);
text-wrap: balance;
}
.mob-prose-article .mob-art__cta-corps {
margin: 0.55rem 0 0;
font-size: 0.9375rem;
line-height: 1.6;
color: var(--wp--preset--color--blanc-casse);
}
.mob-prose-article .mob-art__cta-actions {
display: flex;
flex-wrap: wrap;
gap: 0.75rem;
margin: 0;
flex: 0 0 auto;
}
@media (max-width: 599.98px) {
.mob-prose-article .mob-art__cta-actions {
inline-size: 100%;
}
.mob-prose-article .mob-art__cta-actions > a {
flex: 1 1 100%;
}
}