:root {
--noir: #0d0d0d;
--noir-2: #151515;
--noir-3: #1d1d1b;
--gris: #525252;
--gris-clair: #a8a8a8;
--texte-doux-sombre: #cfcfcf;
--ligne-claire: #e6e6e6;
--trait-clair: #d0d0d0;
--ligne: rgba(255, 255, 255, .1);
--fond: #f3f2ef;
--blanc: #fff;
--texte: #161616;
--texte-doux: #5c5c5c; --orange: #ef7c25;
--rouge: #ee3939; --orange-texte: #b93c0b; --erreur: #b3261e;
--erreur-fond: #fdf2f1;
--accent-texte: var(--orange-texte);
--focus: var(--noir);
--trait: linear-gradient(var(--orange), var(--orange)); --barres: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 26.8 154.6 104.5'%3E%3Cpath fill='%23000' d='M76.79 27.28.27 129.13c-.3.41-.36.96-.13 1.41.23.46.7.75 1.21.75h51.04c.42 0 .82-.2 1.09-.54l25.48-34.06c.18-.23.26-.52.26-.81V28.08c0-.58-.36-1.1-.92-1.28-.55-.18-1.16 0-1.5.47M152.54 27.28 75.96 129.13c-.31.41-.36.96-.13 1.41.23.46.7.75 1.21.75h51.05c.43 0 .82-.2 1.08-.54l25.53-34.06c.17-.23.27-.52.27-.81V28.08c0-.58-.37-1.1-.93-1.28-.55-.18-1.14 0-1.49.47'/%3E%3C/svg%3E");
--barres-orange: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 26.8 154.6 104.5'%3E%3Cpath fill='%23ef7c25' d='M76.79 27.28.27 129.13c-.3.41-.36.96-.13 1.41.23.46.7.75 1.21.75h51.04c.42 0 .82-.2 1.09-.54l25.48-34.06c.18-.23.26-.52.26-.81V28.08c0-.58-.36-1.1-.92-1.28-.55-.18-1.16 0-1.5.47M152.54 27.28 75.96 129.13c-.31.41-.36.96-.13 1.41.23.46.7.75 1.21.75h51.05c.43 0 .82-.2 1.08-.54l25.53-34.06c.17-.23.27-.52.27-.81V28.08c0-.58-.37-1.1-.93-1.28-.55-.18-1.14 0-1.49.47'/%3E%3C/svg%3E");
--police: "Albert Sans", "Segoe UI", system-ui, -apple-system, sans-serif; --rayon: 10px;
--rayon-petit: 6px;
--entete-h: 76px;
--infos-h: 40px;
--conteneur: 1280px;
--gouttiere: clamp(16px, 4vw, 40px);
--ease: cubic-bezier(.2, .7, .2, 1); --e-1: 4px;
--e-2: 8px;
--e-3: 12px;
--e-4: 16px;
--e-5: 24px;
--e-6: 32px;
--e-7: 48px;
--e-8: 64px;
--e-9: 96px; --section: clamp(72px, 9vw, 128px); --bandeau: clamp(56px, 7vw, 96px); --section-entete: clamp(32px, 4vw, 48px); --colonnes: clamp(32px, 5vw, 64px); --grille: clamp(16px, 2vw, 24px); --bloc: clamp(24px, 2.5vw, 32px);
--bloc-grand: clamp(24px, 4vw, 48px);
} [hidden] {
display: none !important;
} .zone-sombre {
--accent-texte: var(--orange);
--focus: var(--orange);
} *,
*::before,
*::after {
box-sizing: border-box;
}
html {
-webkit-text-size-adjust: 100%;
scroll-behavior: smooth;
scroll-padding-top: calc(var(--entete-h) + 16px);
} html:has([data-sommaire]) {
scroll-padding-top: calc(var(--entete-h) + var(--sommaire-h, 72px) + 16px);
}
body {
margin: 0;
font-family: var(--police);
font-size: 1rem;
line-height: 1.6;
color: var(--texte);
background: var(--fond);
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
}
body.menu-ouvert {
overflow: hidden;
}
img,
svg,
video,
iframe {
display: block;
max-width: 100%;
}
img {
height: auto;
}
h1,
h2,
h3,
h4 {
line-height: 1.1;
text-wrap: balance;
}
p {
text-wrap: pretty;
}
a {
color: inherit;
}
button {
font: inherit;
}
:focus-visible {
outline: 3px solid var(--focus);
outline-offset: 3px;
} ::selection {
background: var(--orange);
color: var(--noir);
}
mark {
padding: 0 .2em;
border-radius: 3px;
background: rgba(239, 124, 37, .28);
color: inherit;
-webkit-box-decoration-break: clone;
box-decoration-break: clone;
}
.zone-sombre mark {
background: rgba(239, 124, 37, .35);
}
.conteneur {
width: min(var(--conteneur), 100% - 2 * var(--gouttiere));
margin-inline: auto;
}
.conteneur--texte {
width: min(820px, 100% - 2 * var(--gouttiere));
}
.ecran-lecteur,
.lien-evitement:not(:focus) {
position: absolute !important;
width: 1px;
height: 1px;
overflow: hidden;
clip: rect(0 0 0 0);
white-space: nowrap;
}
.lien-evitement:focus {
position: fixed;
top: 12px;
left: 12px;
z-index: 100;
padding: 12px 18px;
background: var(--orange);
color: var(--noir);
font-weight: 700;
}
.icone {
width: 1.15em;
height: 1.15em;
flex: none;
}
.section {
padding-block: var(--section);
}
.section--claire {
--carte: var(--fond);
background: var(--blanc);
} .section__entete {
display: flex;
flex-wrap: wrap;
align-items: baseline;
justify-content: space-between;
gap: var(--e-3) var(--e-5);
margin-bottom: var(--section-entete);
}
.section__entete .surtitre {
flex-basis: 100%;
}
.section__titre {
margin: 0;
font-size: clamp(1.8rem, 3.2vw, 2.75rem);
font-weight: 800;
letter-spacing: -.025em;
line-height: 1.05;
}
.vide {
color: var(--texte-doux);
}
.vide .reseaux {
margin-top: 16px;
} .surtitre {
display: inline-flex;
align-items: center;
gap: 10px;
margin: 0;
font-size: 14px;
font-weight: 800;
letter-spacing: .14em;
text-transform: uppercase;
color: var(--accent-texte);
}
.barres {
display: inline-flex;
gap: 3px;
}
.barres::before,
.barres::after {
content: "";
width: 5px;
height: 14px;
background: currentColor;
transform: skewX(-22deg);
}
.barres::after {
opacity: .6;
} .a-completer {
padding: 16px 20px;
border: 1.5px dashed var(--orange);
border-radius: 8px;
background: repeating-linear-gradient(135deg, #fff6ee 0 12px, #ffedde 12px 24px);
color: #8a3a00;
font-weight: 600;
} .apparition-pret .apparition {
opacity: 0;
transform: translateY(24px);
transition: opacity .7s var(--ease), transform .7s var(--ease);
}
.apparition-pret .apparition.visible {
opacity: 1;
transform: none;
}  .bouton {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 10px;
min-height: 48px;
padding: 12px 22px;
border: 2px solid transparent;
border-radius: 6px;
background: transparent;
font-size: 15px;
font-weight: 800;
line-height: 1.2;
text-align: center;
text-decoration: none;
cursor: pointer;
transition: background-color .2s, color .2s, border-color .2s;
}
.bouton .icone--fleche {
transition: transform .25s var(--ease);
}
.bouton:hover .icone--fleche {
transform: translateX(4px);
}
.bouton--grand {
min-height: 56px;
padding: 14px 28px;
font-size: 16px;
}
.bouton--plein {
background: var(--orange);
color: var(--noir);
}
.bouton--plein:hover {
border-color: var(--orange);
background: var(--noir);
color: var(--orange);
}
.bouton--contour {
border-color: rgba(255, 255, 255, .55);
color: var(--blanc);
}
.bouton--contour:hover {
border-color: var(--blanc);
background: rgba(255, 255, 255, .1);
}
.bouton--noir {
background: var(--noir);
color: var(--blanc);
}
.bouton--noir:hover {
background: var(--noir-3);
color: var(--orange);
}
.bouton--contour-noir {
border-color: var(--noir);
color: var(--noir);
}
.bouton--contour-noir:hover {
background: var(--noir);
color: var(--blanc);
}
.lien-fleche {
display: inline-flex;
align-items: center;
gap: 8px;
min-height: 44px;
font-weight: 700;
text-decoration: none;
transition: color .2s;
}
.lien-fleche:hover {
color: var(--accent-texte);
}
.lien-fleche svg {
transition: transform .3s var(--ease);
}
.lien-fleche:hover svg:last-of-type {
transform: translateX(3px);
} .prose a:not(.bouton):not(.wp-block-button__link),
.contacts a,
.pied__mail,
.pied__credit a,
.case a,
.formulaire__envoi a,
.formulaire__recaptcha a,
.cookies__plus a,
.contact__bloc--standard a:not(.contact__tel) {
background: var(--trait) no-repeat left 100% / 0 2px;
transition: background-size .4s var(--ease), color .2s, text-decoration-color .2s;
}
.prose a:not(.bouton):not(.wp-block-button__link):is(:hover, :focus-visible),
.contacts a:is(:hover, :focus-visible),
.pied__mail:is(:hover, :focus-visible),
.pied__credit a:is(:hover, :focus-visible),
.case a:is(:hover, :focus-visible),
.formulaire__envoi a:is(:hover, :focus-visible),
.formulaire__recaptcha a:is(:hover, :focus-visible),
.cookies__plus a:is(:hover, :focus-visible),
.contact__bloc--standard a:not(.contact__tel):is(:hover, :focus-visible) {
background-size: 100% 2px;
text-decoration-color: transparent;
} .lien-fleche,
.pied__colonne ul a,
.pied__legal a,
.lien-bouton,
.client__voir,
.infos-haut__adresse {
position: relative;
}
.lien-fleche::before,
.pied__colonne ul a::before,
.pied__legal a::before,
.lien-bouton::before,
.client__voir::before,
.infos-haut__adresse::before {
content: "";
position: absolute;
left: 0;
right: 0;
top: calc(50% + .72em);
height: 2px;
border-radius: 2px;
background: var(--trait);
transform: scaleX(0);
transform-origin: left;
transition: transform .4s var(--ease);
pointer-events: none;
}
.lien-fleche:is(:hover, :focus-visible)::before,
.pied__colonne ul a:is(:hover, :focus-visible)::before,
.pied__legal a:is(:hover, :focus-visible)::before,
.lien-bouton:is(:hover, :focus-visible)::before,
.client:hover .client__voir::before,
.client__voir:focus-visible::before,
.infos-haut__adresse:is(:hover, :focus-visible)::before {
transform: scaleX(1);
}
.client__voir svg {
transition: transform .3s var(--ease);
}
.client:hover .client__voir svg {
transform: translateX(4px);
}
.lien-bouton:is(:hover, :focus-visible) {
text-decoration-color: transparent;
} .entete {
position: sticky;
top: 0;
z-index: 50;
border-bottom: 1px solid var(--ligne);
color: var(--blanc);
transition: box-shadow .3s;
} .infos-haut {
border-bottom: 1px solid var(--ligne);
background: #000;
color: var(--texte-doux-sombre);
font-size: 14px;
}
.infos-haut__barre {
display: flex;
align-items: center;
gap: 16px;
height: calc(var(--infos-h) - 1px);
}
.infos-haut .statut {
margin: 0;
padding: 3px 10px 3px 8px;
font-size: 13px;
white-space: nowrap;
}
.infos-haut__adresse {
display: inline-flex;
align-items: center;
gap: 6px;
min-height: 36px;
margin-left: auto;
color: var(--ligne-claire);
font-weight: 600;
text-decoration: none;
white-space: nowrap;
transition: color .2s;
}
.infos-haut__adresse:hover {
color: var(--orange);
}
.infos-haut__adresse .icone {
width: 16px;
height: 16px;
color: var(--orange);
}
.infos-haut__court {
display: none;
}
@media (max-width: 767px) {
.infos-haut__long {
display: none;
}
.infos-haut__court {
display: inline;
}
} @media (max-width: 400px) {
.infos-haut__barre {
gap: 10px;
}
.infos-haut .statut {
padding-inline: 6px 8px;
font-size: 12px;
}
.infos-haut__adresse {
font-size: 13px;
}
.infos-haut .lien-externe:not(.bouton)::after {
content: none;
}
} .entete::before {
content: "";
position: absolute;
inset: 0;
z-index: -1;
background: rgba(13, 13, 13, .94);
-webkit-backdrop-filter: blur(14px);
backdrop-filter: blur(14px);
}
.entete--defile,
.entete--deroule {
box-shadow: 0 12px 32px -14px rgba(0, 0, 0, .7);
}
.entete__barre {
display: flex;
align-items: center;
gap: 20px;
height: var(--entete-h);
}
.logo {
display: flex;
align-items: center;
gap: 14px;
color: var(--blanc);
text-decoration: none;
flex: none;
}
.logo__barres {
transition: fill .25s;
}
.logo:hover .logo__barres {
fill: var(--orange);
}
.logo__marque {
width: auto;
height: clamp(32px, 2.4vw + 22px, 40px);
}
.logo__base {
max-width: 10ch;
font-size: 11px;
font-weight: 600;
line-height: 1.25;
letter-spacing: .02em;
color: var(--gris-clair);
}
.logo__base span {
color: var(--orange);
font-weight: 800;
}
.nav {
align-self: stretch;
margin-inline: auto;
}
.nav__liste {
display: flex;
gap: 2px;
height: 100%;
margin: 0;
padding: 0;
list-style: none;
}
.nav__liste > li {
display: flex;
align-items: center;
}
.nav__lien {
position: relative;
display: inline-flex;
align-items: center;
gap: 6px;
min-height: 44px;
padding: 8px 14px;
border: 0;
border-radius: var(--rayon-petit);
background: none;
color: #ececec;
font-size: 15px;
font-weight: 700;
text-decoration: none;
cursor: pointer;
transition: color .2s, background-color .2s;
} .nav__lien::after {
content: "";
position: absolute;
left: 14px;
right: 14px;
bottom: 4px;
height: 2px;
border-radius: 2px;
background: var(--orange);
transform: scaleX(0);
transform-origin: left center;
transition: transform .25s var(--ease);
}
.nav__lien:hover,
.nav__bouton[aria-expanded="true"] {
color: var(--blanc);
}
.nav__lien:hover::after,
.nav__bouton[aria-expanded="true"]::after,
.nav__lien[aria-current="page"]::after,
.nav__lien.est-actif::after {
transform: scaleX(1);
}
.nav__lien[aria-current="page"],
.nav__lien.est-actif {
color: var(--orange);
}
.nav__chevron {
width: 16px;
height: 16px;
transition: transform .25s var(--ease);
}
.nav__bouton[aria-expanded="true"] .nav__chevron {
transform: rotate(180deg);
} .sous-menu {
position: absolute;
top: 100%;
left: 0;
right: 0;
max-height: calc(100vh - var(--entete-h));
overflow-y: auto;
padding-block: var(--e-6);
border-top: 1px solid var(--ligne);
border-bottom: 1px solid var(--ligne);
background: var(--noir-2);
box-shadow: 0 30px 50px -20px rgba(0, 0, 0, .6);
}
.sous-menu[hidden] {
display: none;
}
.sous-menu__titre {
margin: 0 0 var(--e-4);
color: var(--orange);
font-size: 14px;
font-weight: 800;
letter-spacing: .14em;
text-transform: uppercase;
} .sous-menu__liste {
display: grid;
grid-template-columns: repeat(7, 1fr);
gap: var(--e-5) var(--e-4);
margin: 0;
padding: 0;
list-style: none;
}
.sous-menu__liste a {
display: flex;
flex-direction: column;
gap: 10px;
color: #e4e4e4;
font-weight: 700;
text-decoration: none;
transition: color .2s;
}
.sous-menu__vignette {
display: block;
aspect-ratio: 4 / 3;
overflow: hidden;
border-radius: 10px;
background: var(--noir-3);
}
.sous-menu__vignette img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform .4s var(--ease);
}
.sous-menu__nom {
font-size: 14.5px;
line-height: 1.3;
}
.sous-menu__liste a:hover,
.sous-menu__liste a[aria-current="page"] {
color: var(--orange);
}
.sous-menu__liste a:hover .sous-menu__vignette img {
transform: scale(1.07);
} .sous-menu__bas {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: 16px 32px;
margin-top: var(--e-5);
padding-top: var(--e-5);
border-top: 1px solid var(--ligne);
}
.sous-menu__tous {
color: var(--blanc);
}
.sous-menu__appel {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 12px 24px;
color: var(--texte-doux-sombre);
}
.sous-menu__appel p {
margin: 0;
}
.sous-menu__tel {
display: inline-flex;
align-items: center;
gap: 8px;
min-height: 44px;
color: var(--blanc);
font-weight: 800;
text-decoration: none;
}
.sous-menu__tel .icone {
color: var(--orange);
}
.sous-menu__tel:hover {
color: var(--orange);
}
.entete__actions {
display: flex;
align-items: center;
gap: 16px;
}
.entete__tel {
display: inline-flex;
align-items: center;
gap: 10px;
min-height: 44px;
color: var(--blanc);
text-decoration: none;
white-space: nowrap;
}
.entete__tel-icone {
display: grid;
place-items: center;
width: 42px;
height: 42px;
border-radius: 50%;
background: rgba(239, 124, 37, .15);
color: var(--orange);
transition: background-color .2s, color .2s;
}
.entete__tel-texte {
display: grid;
font-size: 16px;
font-weight: 800;
line-height: 1.15;
}
.entete__tel-texte .entete__tel-mention {
color: var(--gris-clair);
font-size: 13px;
font-weight: 600;
}
.entete__tel:hover .entete__tel-icone {
background: var(--orange);
color: var(--noir);
}
.entete__burger {
display: none;
place-items: center;
width: 48px;
height: 48px;
padding: 0;
border: 1px solid rgba(255, 255, 255, .3);
border-radius: 50%;
background: transparent;
color: var(--blanc);
cursor: pointer;
}
.entete__burger .icone {
width: 22px;
height: 22px;
}
.entete__burger-ouvrir,
.entete__burger-fermer {
display: inline-flex;
}
.entete__burger-fermer,
.entete__burger[aria-expanded="true"] .entete__burger-ouvrir {
display: none;
}
.entete__burger[aria-expanded="true"] .entete__burger-fermer {
display: inline-flex;
}
.menu-mobile {
position: fixed;
inset: var(--entete-h) 0 0;
z-index: 40;
display: flex;
flex-direction: column;
gap: var(--e-6);
padding: 8px var(--gouttiere) 40px;
overflow-y: auto;
background: var(--noir);
}
.menu-mobile[hidden] {
display: none;
}
.menu-mobile__liste {
margin: 0;
padding: 0;
list-style: none;
}
.menu-mobile__liste > li > a,
.menu-mobile__produits > summary {
display: flex;
align-items: center;
justify-content: space-between;
min-height: 60px;
padding-block: 8px;
border-bottom: 1px solid var(--ligne);
color: var(--blanc);
font-size: clamp(1.4rem, 6.4vw, 2rem);
font-weight: 800;
letter-spacing: -.02em;
text-decoration: none;
list-style: none;
cursor: pointer;
}
.menu-mobile__produits > summary::-webkit-details-marker {
display: none;
}
.menu-mobile__produits > summary::after {
content: "+";
color: var(--orange);
font-weight: 400;
}
.menu-mobile__produits[open] > summary::after {
content: "\2212";
} .menu-mobile__grille {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: var(--e-5) var(--e-3);
margin: var(--e-4) 0 var(--e-2);
padding: 0;
list-style: none;
}
.menu-mobile__grille a {
display: flex;
flex-direction: column;
gap: 8px;
color: #e4e4e4;
font-size: .95rem;
font-weight: 700;
line-height: 1.25;
text-decoration: none;
}
.menu-mobile__vignette {
display: block;
aspect-ratio: 4 / 3;
overflow: hidden;
border-radius: 10px;
background: var(--noir-3);
}
.menu-mobile__vignette img {
width: 100%;
height: 100%;
object-fit: cover;
}
.menu-mobile__grille a[aria-current="page"] .menu-mobile__vignette {
outline: 2px solid var(--orange);
outline-offset: 2px;
}
.menu-mobile__tous {
display: inline-flex;
align-items: center;
gap: 8px;
min-height: 48px;
margin-bottom: 8px;
color: var(--orange);
font-size: 1.05rem;
font-weight: 800;
text-decoration: none;
}
@media (min-width: 600px) {
.menu-mobile__grille {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
}
.menu-mobile__liste a[aria-current="page"] {
color: var(--orange);
}
.menu-mobile__actions {
display: grid;
gap: 12px;
} .menu-mobile__infos {
display: grid;
gap: var(--e-3);
padding-top: var(--e-5);
border-top: 1px solid var(--ligne);
color: var(--trait-clair);
}
.menu-mobile__titre {
margin: 0;
color: var(--blanc);
font-size: 14px;
font-weight: 800;
letter-spacing: .14em;
text-transform: uppercase;
}
.menu-mobile__infos .statut {
justify-self: start;
margin: 0;
}
.menu-mobile__infos .horaires {
margin: 0;
}
.menu-mobile__adresse {
margin: 0;
font-size: 15px;
} .appel {
position: relative;
overflow: hidden;
background: var(--orange);
color: var(--noir);
} .appel::after {
content: "";
position: absolute;
top: -18%;
right: 3%;
height: 136%;
aspect-ratio: 154.6 / 104.5;
background: var(--noir);
opacity: .1;
-webkit-mask: var(--barres) center / contain no-repeat;
mask: var(--barres) center / contain no-repeat;
pointer-events: none;
}
.appel__grille {
position: relative;
z-index: 1;
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: var(--e-6);
padding-block: var(--bandeau);
}
.appel .surtitre {
color: var(--noir);
}
.appel__titre {
margin: 0 0 var(--e-3);
font-size: clamp(2rem, 4.4vw, 3.6rem);
font-weight: 800;
letter-spacing: -.035em;
}
.appel__texte {
max-width: 46ch;
margin: 0;
font-size: 1.1rem;
font-weight: 500;
}
.appel__actions {
display: flex;
flex-wrap: wrap;
gap: 12px;
}
.pied {
background: var(--noir);
color: #bdbdbd;
font-size: 16px;
}
.pied__grille {
display: grid;
grid-template-columns: 1.5fr 1fr 1fr 1.25fr;
gap: var(--colonnes);
padding-block: var(--bandeau) var(--e-7);
}
.pied__marque {
display: grid;
align-content: start;
justify-items: start;
gap: 8px;
}
.logo--pied {
flex-direction: column;
align-items: flex-start;
gap: 10px;
margin-bottom: 12px;
}
.logo--pied .logo__marque {
height: 44px;
}
.logo--pied .logo__base {
max-width: none;
font-size: 12px;
}
.pied__tel {
display: inline-flex;
align-items: center;
gap: 10px;
min-height: 48px;
color: var(--blanc);
font-size: 1.5rem;
font-weight: 800;
text-decoration: none;
}
.pied__tel .icone {
color: var(--orange);
}
.pied__mail {
color: var(--blanc);
}
.pied__adresse {
margin: 0;
}
.pied__titre {
margin: 0 0 var(--e-4);
color: var(--blanc);
font-size: 14px;
font-weight: 800;
letter-spacing: .14em;
text-transform: uppercase;
}
.pied__colonne ul {
display: grid;
gap: 2px;
margin: 0;
padding: 0;
list-style: none;
}
.pied__colonne ul a {
display: inline-flex;
align-items: center;
min-height: 36px;
}
.pied a {
text-decoration: none;
transition: color .2s;
}
.pied a:hover {
color: var(--orange);
}
.pied__tous {
color: var(--blanc);
font-weight: 700;
}
.reseaux {
display: flex;
flex-wrap: wrap;
gap: 10px;
margin: 12px 0 0;
padding: 0;
list-style: none;
}
.reseaux a {
display: grid;
place-items: center;
width: 44px;
height: 44px;
border: 1px solid rgba(255, 255, 255, .3);
border-radius: 50%;
color: var(--blanc);
transition: background-color .2s, color .2s, border-color .2s;
}
.reseaux a:hover {
border-color: var(--orange);
background: var(--orange);
color: var(--noir) !important;
}
.reseaux--clair {
margin: 0;
}
.reseaux--clair a {
border-color: rgba(0, 0, 0, .25);
color: var(--texte);
}
.reseaux--clair a:hover {
border-color: var(--noir);
background: var(--noir);
color: var(--blanc) !important;
}
.horaires {
display: grid;
gap: 8px;
margin: 0 0 var(--e-4);
}
.horaires div {
display: flex;
justify-content: space-between;
gap: 12px;
padding-bottom: 8px;
border-bottom: 1px dashed var(--ligne);
}
.horaires dt {
color: var(--blanc);
font-weight: 600;
}
.horaires dd {
margin: 0;
text-align: right;
white-space: nowrap;
}
.pied__bas {
border-top: 1px solid var(--ligne);
padding-block: 16px;
font-size: 14px;
}
.pied__bas .conteneur {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: 8px 24px;
}
.pied__bas p {
margin: 0;
}
.pied__legal {
display: flex;
flex-wrap: wrap;
gap: 0 18px;
margin: 0;
padding: 0;
list-style: none;
}
.pied__legal a {
display: inline-flex;
align-items: center;
min-height: 44px;
}
.pied__credit a {
color: var(--blanc);
font-weight: 700;
} .barre-action {
display: none;
} .hero {
position: relative;
isolation: isolate;
height: calc(100svh - var(--entete-h) - var(--infos-h));
min-height: 580px;
overflow: hidden;
background: var(--noir);
color: var(--blanc);
} .intro {
display: none;
} .js .hero[data-intro] .intro {
position: absolute;
inset: 0;
z-index: 4;
display: grid;
grid-template-rows: min(100%, 100svh - var(--entete-h) - var(--infos-h));
grid-template-columns: 100%;
align-content: start;
background: var(--noir);
cursor: pointer;
}
.intro__video {
grid-area: 1 / 1;
place-self: center;
display: block;
width: min(720px, 92vw, (100svh - var(--entete-h) - var(--infos-h) - 120px) * 4 / 3);
height: auto;
aspect-ratio: 4 / 3;
}
.intro__passer {
grid-area: 1 / 1;
place-self: end end;
margin: 0 var(--gouttiere) 24px 0;
min-height: 44px;
padding: 8px 16px;
border: 1px solid rgba(255, 255, 255, .2);
border-radius: var(--rayon-petit);
background: transparent;
color: #bdbdbd;
font-size: 13px;
font-weight: 600;
cursor: pointer;
transition: color .2s, border-color .2s;
}
.intro__passer:hover {
border-color: var(--blanc);
color: var(--blanc);
} .intro__rejouer {
order: 6;
justify-self: start;
display: inline-flex;
margin-top: var(--e-4);
align-items: center;
gap: 8px;
min-height: 40px;
padding: 8px 14px;
border: 1px solid rgba(255, 255, 255, .25);
border-radius: var(--rayon-petit);
background: rgba(13, 13, 13, .6);
color: var(--trait-clair);
font-size: 13px;
font-weight: 700;
cursor: pointer;
transition: color .2s, border-color .2s;
}
.intro__rejouer:hover {
border-color: var(--orange);
color: var(--blanc);
}
.intro__rejouer .icone {
width: 16px;
height: 16px;
color: var(--orange);
transition: transform .5s var(--ease);
}
.intro__rejouer:hover .icone {
transform: rotate(-200deg);
}
@media (min-width: 1024px) {
.intro__rejouer {
position: absolute;
right: var(--gouttiere);
bottom: 20px;
z-index: 3;
margin: 0;
}
} .hero[data-etat="sortie"] .intro {
opacity: 0;
pointer-events: none;
transition: opacity .6s .1s var(--ease);
}
.hero[data-etat="sortie"] .intro__video {
transform: scale(1.12);
transition: transform .8s var(--ease);
} .hero__video {
position: absolute;
inset: 0;
}
.js .hero[data-intro] .hero__video {
transform: scale(1.06);
}
.js .hero[data-intro][data-etat="sortie"] .hero__video,
.js .hero[data-intro][data-etat="video"] .hero__video {
opacity: 1;
transform: none;
transition: opacity .9s .3s var(--ease), transform 1.4s .3s var(--ease);
} .js .hero[data-intro]:not([data-etat]) .intro {
animation: secours-intro .4s 6s forwards;
}
.js .hero[data-intro]:not([data-etat]) .hero__video {
animation: secours-video .4s 6s forwards;
}
@keyframes secours-intro {
to {
opacity: 0;
visibility: hidden;
}
}
@keyframes secours-video {
to {
opacity: 1;
transform: none;
}
}
.hero__affiche,
.hero__affiche img,
.hero__motif {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
} .hero__motif {
display: block;
background:
radial-gradient(circle at 72% 42%, rgba(239, 124, 37, .22), transparent 42%),
linear-gradient(180deg, #161616, #0a0a0a);
} .hero__motif::after {
content: "";
position: absolute;
top: 50%;
right: 4%;
height: 84%;
aspect-ratio: 154.6 / 104.5;
max-width: 70%;
background: var(--orange);
opacity: .13;
transform: translateY(-50%);
-webkit-mask: var(--barres) center / contain no-repeat;
mask: var(--barres) center / contain no-repeat;
}
.hero__voile {
position: absolute;
inset: 0;
background: linear-gradient(90deg, rgba(10, 10, 10, .88) 0%, rgba(10, 10, 10, .45) 55%, rgba(10, 10, 10, .1) 100%);
} .hero__grille {
position: relative;
display: grid;
grid-template-columns: 1.4fr .6fr;
align-items: center;
gap: var(--e-6);
height: 100%;
padding-block: clamp(32px, 6vh, 72px);
}
.hero__titre {
max-width: 17ch;
margin: var(--e-4) 0 var(--e-5);
font-size: clamp(2.3rem, 5.4vw, 4.8rem);
font-weight: 800;
letter-spacing: -.035em;
line-height: 1;
}
.hero__texte {
max-width: 48ch;
margin: 0;
font-size: clamp(1.05rem, 1.4vw, 1.25rem);
color: var(--texte-doux-sombre);
}
.hero__actions {
display: flex;
flex-wrap: wrap;
gap: 12px;
margin-top: var(--e-6);
} .lecture {
display: flex;
flex-direction: column;
align-items: center;
gap: 16px;
align-self: center;
justify-self: center;
padding: 0;
border: 0;
background: none;
color: var(--blanc);
cursor: pointer;
}
.lecture__rond {
position: relative;
display: grid;
place-items: center;
width: clamp(84px, 10vw, 132px);
aspect-ratio: 1;
border-radius: 50%;
background: var(--orange);
color: var(--noir);
transition: transform .3s var(--ease), background-color .3s, color .3s;
}
.lecture__rond::before,
.lecture__rond::after {
content: "";
position: absolute;
inset: 0;
border: 2px solid rgba(255, 255, 255, .6);
border-radius: 50%;
animation: onde 2.4s 2;
}
.lecture__rond::after {
animation-delay: 1.2s;
}
@keyframes onde {
from {
opacity: .8;
transform: scale(1);
}
to {
opacity: 0;
transform: scale(1.8);
}
}
.lecture__vignette {
display: none;
}
.lecture .icone {
width: 36%;
height: 36%;
margin-left: 6%;
}
.lecture__texte {
font-size: 14px;
font-weight: 800;
letter-spacing: .14em;
text-transform: uppercase;
}
.lecture:hover .lecture__rond {
background: var(--blanc);
color: var(--noir);
transform: scale(1.06);
} .lecteur {
width: 100vw;
max-width: none;
height: 100dvh;
max-height: none;
margin: 0;
padding: 0;
border: 0;
background: #000;
color: var(--blanc);
}
.lecteur[open] {
display: grid;
grid-template-rows: 1fr auto;
place-items: center;
} .lecteur__transcription {
width: 100%;
max-height: 45dvh;
overflow-y: auto;
padding: var(--e-4) var(--gouttiere);
border-top: 1px solid var(--ligne);
background: var(--noir);
}
.lecteur__transcription summary {
min-height: 44px;
display: flex;
align-items: center;
color: var(--blanc);
font-weight: 800;
cursor: pointer;
}
.lecteur__transcription-texte {
max-width: 70ch;
color: var(--ligne-claire);
line-height: 1.6;
}
.lecteur::backdrop {
background: #000;
}
.lecteur__cadre,
.lecteur__cadre iframe,
.lecteur__cadre video {
width: 100%;
height: 100%;
border: 0;
}
.lecteur__cadre {
display: grid;
place-items: center;
}
.lecteur__cadre video {
object-fit: contain;
}
.lecteur__message {
margin: 0;
font-size: clamp(1.4rem, 3vw, 2.2rem);
font-weight: 800;
color: var(--gris-clair);
}
.lecteur__fermer {
position: absolute;
top: 16px;
right: 16px;
display: grid;
place-items: center;
width: 48px;
height: 48px;
padding: 0;
border: 0;
border-radius: 50%;
background: rgba(255, 255, 255, .12);
color: var(--blanc);
cursor: pointer;
}
.lecteur__fermer:hover {
background: var(--orange);
color: var(--noir);
} .atouts {
display: grid;
grid-template-columns: repeat(2, max-content);
gap: var(--e-3) var(--e-6);
margin: var(--e-6) 0 0;
padding: 0;
list-style: none;
color: var(--ligne-claire);
font-size: 16px;
font-weight: 600;
}
.atouts li {
display: inline-flex;
align-items: center;
gap: 8px;
}
.atouts .icone {
width: 20px;
height: 20px;
padding: 3px;
border-radius: 50%;
background: var(--orange);
color: var(--noir);
stroke-width: 3;
}
.references {
border-block: 1px solid rgba(0, 0, 0, .06);
background: var(--blanc);
color: var(--texte);
}
.references__grille {
display: grid;
grid-template-columns: 1fr auto;
grid-template-areas: "titre lien" "liste liste";
align-items: center;
gap: var(--e-5) var(--e-7);
padding-block: var(--e-7);
}
.references__titre {
grid-area: titre;
}
.references__grille > .lien-fleche {
grid-area: lien;
}
.references__titre {
margin: 0;
color: var(--texte-doux);
font-size: 14px;
font-weight: 800;
letter-spacing: .14em;
text-transform: uppercase;
}
.references__liste {
display: grid;
grid-area: liste; grid-template-columns: repeat(8, minmax(0, 1fr));
align-items: center;
justify-items: center;
gap: var(--e-6);
margin: 0;
padding: 0;
list-style: none;
color: #6b675f;
font-size: 1rem;
font-weight: 800;
}
.references__liste img {
width: auto;
max-width: 100%;
height: auto;
max-height: 44px;
filter: grayscale(1);
opacity: .7;
transition: filter .3s, opacity .3s;
}
.references__liste li:hover img {
filter: none;
opacity: 1;
}
.anniversaire {
position: relative;
overflow: hidden;
background: var(--noir);
color: var(--texte-doux-sombre);
} .anniversaire::before {
content: "30";
position: absolute;
right: -2vw;
bottom: -12vw;
color: transparent;
font-size: clamp(16rem, 34vw, 32rem);
font-weight: 800;
line-height: 1;
letter-spacing: -.06em;
-webkit-text-stroke: 2px rgba(239, 124, 37, .12);
pointer-events: none;
}
.anniversaire__grille {
position: relative;
display: grid;
grid-template-columns: 1fr 1fr;
align-items: center;
gap: var(--colonnes);
}
.anniversaire__visuel {
position: relative;
margin: 0;
}
.anniversaire__visuel img {
width: 100%;
aspect-ratio: 4 / 3;
object-fit: cover;
object-position: center;
border-radius: var(--rayon);
}
.anniversaire__badge {
position: absolute;
right: -22px;
bottom: -22px;
display: grid;
place-items: center;
align-content: center;
width: clamp(120px, 13vw, 168px);
aspect-ratio: 1;
margin: 0;
border: 6px solid var(--noir);
border-radius: 50%;
background: var(--orange);
color: var(--noir);
font-size: clamp(1rem, 1.4vw, 1.25rem);
font-weight: 800;
line-height: 1;
text-transform: uppercase;
letter-spacing: .08em;
transform: rotate(-8deg);
}
.anniversaire__badge span {
display: block;
font-size: 2.9em;
letter-spacing: -.04em;
}
.anniversaire .section__titre {
margin: var(--e-3) 0 var(--e-4);
color: var(--blanc);
font-size: clamp(2rem, 4vw, 3.4rem);
}
.anniversaire__texte > p {
max-width: 52ch;
margin: 0;
font-size: 1.08rem;
}
.anniversaire__chiffres {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: var(--e-5);
margin: var(--e-6) 0 0;
padding: var(--e-5) 0;
border-block: 1px solid var(--ligne);
}
.anniversaire__chiffres dt {
color: var(--orange);
font-size: clamp(1.5rem, 2.4vw, 2rem);
font-weight: 800;
letter-spacing: -.02em;
line-height: 1.1;
}
.anniversaire__chiffres dd {
margin: 4px 0 0;
font-size: 15px;
line-height: 1.35;
}
.anniversaire .bouton .icone--lecture {
width: 1em;
height: 1em;
}
.produits-grille--accueil .produit-carte__lien {
aspect-ratio: 1;
}
.etapes-accueil {
background: var(--noir);
color: var(--texte-doux-sombre);
}
.etapes-accueil .section__titre {
color: var(--blanc);
}
.etapes-accueil__liste {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: var(--grille);
margin: 0;
padding: 0;
list-style: none;
counter-reset: etape;
}
.etapes-accueil__liste li {
padding: var(--bloc);
border: 1px solid var(--ligne);
border-radius: var(--rayon);
background: var(--noir-2);
counter-increment: etape;
}
.etapes-accueil__liste li::before {
content: counter(etape, decimal-leading-zero);
display: block;
margin-bottom: var(--e-4);
color: transparent;
font-size: 48px;
font-weight: 800;
line-height: 1;
letter-spacing: -.04em;
-webkit-text-stroke: 1.5px var(--orange);
}
.etapes-accueil__liste h3 {
margin: 0 0 var(--e-2);
color: var(--blanc);
font-size: 1.3rem;
font-weight: 800;
}
.etapes-accueil__liste p {
margin: 0;
font-size: 16px;
line-height: 1.5;
}
.actus__liens {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 12px 24px;
}
.cartes {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
gap: var(--grille);
}
.cartes--actus {
grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
}
.carte__lien {
display: flex;
flex-direction: column;
height: 100%;
overflow: hidden;
border-radius: var(--rayon);
background: var(--blanc);
color: inherit;
text-decoration: none;
transition: transform .35s var(--ease), box-shadow .35s;
}
.carte__lien:hover {
transform: translateY(-4px);
box-shadow: 0 22px 40px -22px rgba(0, 0, 0, .35);
}
.carte__visuel {
aspect-ratio: 4 / 3;
overflow: hidden;
background: var(--noir-3);
}
.carte__visuel img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform .7s var(--ease);
}
.carte__lien:hover .carte__visuel img {
transform: scale(1.05);
} .carte__vide,
.produit-carte__vide {
display: block;
width: 100%;
height: 100%;
background: var(--barres-orange) center / 38% auto no-repeat, var(--noir-3);
}
.carte__corps {
padding: var(--e-5);
}
.carte__date {
color: var(--texte-doux);
font-size: 14px;
font-weight: 700;
}
.carte__titre {
margin: var(--e-2) 0;
font-size: 1.25rem;
font-weight: 800;
letter-spacing: -.01em;
}
.carte__texte {
margin: 0;
color: var(--texte-doux);
font-size: 16px;
} .page-entete {
position: relative;
overflow: hidden;
padding-block: var(--section) var(--bandeau);
background: var(--noir);
color: var(--blanc);
}
.page-entete::after {
content: "";
position: absolute;
top: -12%;
right: 5%;
height: 124%;
aspect-ratio: 154.6 / 104.5;
max-width: 45%;
background: var(--orange);
opacity: .16;
-webkit-mask: var(--barres) center / contain no-repeat;
mask: var(--barres) center / contain no-repeat;
pointer-events: none;
}
.page-entete .conteneur {
position: relative;
z-index: 1;
}
.page-entete__titre {
max-width: 18ch;
margin: var(--e-4) 0 0;
font-size: clamp(2.5rem, 6.4vw, 5.4rem);
font-weight: 800;
letter-spacing: -.04em;
line-height: .98;
}
.page-entete--article .page-entete__titre {
max-width: 24ch;
font-size: clamp(2rem, 4.6vw, 3.6rem);
}
.page-entete__accroche {
max-width: 54ch;
margin: var(--e-5) 0 0;
font-size: clamp(1.05rem, 1.5vw, 1.3rem);
color: #bdbdbd;
}
.sommaire {
position: sticky;
top: var(--entete-h);
z-index: 20;
border-bottom: 1px solid rgba(0, 0, 0, .08);
background: rgba(243, 242, 239, .92);
-webkit-backdrop-filter: blur(10px);
backdrop-filter: blur(10px);
}
.sommaire__liste {
display: flex;
gap: 6px;
margin: 0;
padding: 12px 0;
overflow-x: auto;
list-style: none;
scrollbar-width: none;
}
.sommaire__liste a {
display: flex;
align-items: center;
min-height: 44px;
padding: 8px 15px;
border-radius: var(--rayon-petit);
color: var(--texte);
font-size: 15px;
font-weight: 700;
white-space: nowrap;
text-decoration: none;
transition: background-color .2s, color .2s;
}
.sommaire__liste a:hover,
.sommaire__liste a.actif {
background: var(--noir);
color: var(--blanc);
}
.prose {
font-size: 1.125rem;
line-height: 1.7;
}
.prose > * {
margin-block: 0;
}
.prose > * + * {
margin-top: 1em;
}
.prose h2 {
margin-top: 2.25em;
font-size: clamp(1.75rem, 3vw, 2.5rem);
font-weight: 800;
letter-spacing: -.025em;
}
.prose h3 {
margin-top: 1.6em;
font-size: 1.3rem;
font-weight: 800;
}
.prose h2 + *,
.prose h3 + * {
margin-top: .6em;
}
.prose a:not(.bouton):not(.wp-block-button__link) {
color: var(--orange-texte);
text-decoration-thickness: 2px;
text-underline-offset: 3px;
}
.prose ul:not([class*="liste-"]):not(.contacts),
.prose ol {
padding-left: 1.2em;
}
.prose ul:not([class*="liste-"]) li::marker {
color: var(--orange);
}
.prose img {
border-radius: 10px;
}  .wp-block-button__link {
padding: 13px 22px;
border: 2px solid var(--noir);
border-radius: var(--rayon-petit);
background: transparent;
color: var(--noir);
font-weight: 800;
text-decoration: none;
transition: background-color .2s, color .2s;
}
.wp-block-button__link:hover {
background: var(--noir);
color: var(--blanc);
} .prose--sections {
counter-reset: section;
}
.prose--sections h2 {
display: flex;
align-items: baseline;
gap: 16px;
margin-top: 3em;
padding-top: 1.25em;
border-top: 1px solid rgba(0, 0, 0, .14);
counter-increment: section;
}
.prose--sections h2::before {
content: counter(section, decimal-leading-zero);
font-size: .42em;
font-weight: 800;
letter-spacing: .1em;
color: var(--orange-texte);
}
.prose--sections > h2:first-child {
margin-top: 0;
}
.prose--sections > p {
max-width: 70ch;
} .prose--process {
counter-reset: etape;
max-width: 980px;
}
.etape {
position: relative;
padding: var(--e-6) 0 var(--e-6) 120px;
border-top: 1px solid rgba(0, 0, 0, .12);
counter-increment: etape;
}
.etape:last-child {
border-bottom: 1px solid rgba(0, 0, 0, .12);
}
.etape::before {
content: counter(etape, decimal-leading-zero);
position: absolute;
top: 26px;
left: 0;
font-size: 64px;
font-weight: 800;
line-height: 1;
letter-spacing: -.04em;
color: var(--orange);
transition: color .3s;
}
.etape:hover::before,
.etape:target::before {
color: var(--orange-texte);
-webkit-text-stroke-color: var(--orange-texte);
}
.etape h2 {
margin: 0 0 var(--e-2);
font-size: 1.55rem;
letter-spacing: -.02em;
}
.etape p {
max-width: 64ch;
margin: 0 0 .6em;
} .produits-grille {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
gap: var(--grille);
} .produits-grille--accueil {
grid-template-columns: repeat(4, 1fr);
}
.produit-carte__lien {
position: relative;
isolation: isolate;
display: flex;
flex-direction: column;
justify-content: flex-end;
aspect-ratio: 4 / 5;
overflow: hidden;
border-radius: var(--rayon);
background: var(--noir-3);
color: var(--blanc);
text-decoration: none;
}
.produit-carte__visuel {
position: absolute;
inset: 0;
z-index: -1;
}
.produit-carte__visuel img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform .8s var(--ease);
}
.produit-carte__visuel::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(0deg, rgba(0, 0, 0, .88) 0%, rgba(0, 0, 0, .25) 55%, transparent);
}
.produit-carte__lien:hover .produit-carte__visuel img {
transform: scale(1.06);
}
.produit-carte__corps {
padding: var(--e-5);
}
.produit-carte__num {
font-size: 13px;
font-weight: 800;
letter-spacing: .12em;
color: var(--orange);
}
.produit-carte__titre {
margin: 6px 0 0;
font-size: clamp(1.15rem, 1.5vw, 1.45rem);
font-weight: 800;
letter-spacing: -.02em;
}
.produit-carte__texte {
max-height: 0;
margin: 0;
overflow: hidden;
color: var(--trait-clair);
font-size: 15px;
line-height: 1.5;
opacity: 0;
transition: max-height .45s var(--ease), opacity .45s, margin .45s;
}
.produit-carte__lien:hover .produit-carte__texte,
.produit-carte__lien:focus-visible .produit-carte__texte {
max-height: 16em;
margin-top: 8px;
opacity: 1;
}
.produit-carte__fleche {
position: absolute;
top: 20px;
right: 20px;
display: grid;
place-items: center;
width: 46px;
height: 46px;
border-radius: 50%;
background: var(--orange);
color: var(--noir);
transform: scale(0);
transition: transform .4s var(--ease);
}
.produit-carte__lien:hover .produit-carte__fleche,
.produit-carte__lien:focus-visible .produit-carte__fleche {
transform: scale(1) rotate(-45deg);
}
@media (hover: none) {
.produit-carte__texte {
max-height: none;
margin-top: 8px;
opacity: 1;
}
}
.fiche {
display: grid;
grid-template-columns: 1fr 340px;
gap: var(--colonnes);
align-items: start;
}
.fiche__visuel {
margin: 0 0 var(--e-6);
}
.fiche__visuel img {
width: 100%;
border-radius: var(--rayon);
}
.fiche__cote {
position: sticky;
top: calc(var(--entete-h) + 24px);
display: grid;
gap: var(--e-4);
}
.fiche__devis {
display: grid;
gap: var(--e-4);
padding: var(--bloc);
border-radius: var(--rayon);
background: var(--noir);
color: var(--texte-doux-sombre);
}
.fiche__devis p {
margin: 0;
}
.fiche__devis-titre {
margin: 0;
color: var(--blanc);
font-size: 1.5rem;
font-weight: 800;
}
.fiche__tel {
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
min-height: 44px;
border: 2px solid rgba(255, 255, 255, .4);
border-radius: 6px;
color: var(--blanc);
font-weight: 700;
text-decoration: none;
transition: border-color .2s;
}
.fiche__tel:hover {
border-color: var(--orange);
}
.fiche__tel .icone {
color: var(--orange);
}
.fiche__autres {
padding: var(--bloc);
border-radius: var(--rayon);
background: var(--blanc);
}
.fiche__autres-titre {
margin: 0 0 var(--e-3);
font-size: 14px;
font-weight: 800;
letter-spacing: .14em;
text-transform: uppercase;
}
.fiche__autres ul {
margin: 0;
padding: 0;
list-style: none;
}
.fiche__autres a {
display: block;
padding: 9px 0;
border-top: 1px solid rgba(0, 0, 0, .07);
color: var(--texte);
font-size: 16px;
font-weight: 600;
text-decoration: none;
transition: color .2s, padding .2s;
}
.fiche__autres a:hover {
padding-left: 6px;
color: var(--orange-texte);
} .filtres {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-bottom: var(--section-entete);
}
.filtre {
display: inline-flex;
align-items: center;
gap: 8px;
min-height: 44px;
padding: 10px 16px;
border: 1.5px solid #8c8880;
border-radius: var(--rayon-petit);
background: transparent;
color: var(--texte);
font-size: 14px;
font-weight: 700;
cursor: pointer;
transition: background-color .2s, color .2s, border-color .2s;
}
.filtre:hover {
border-color: var(--noir);
}
.filtre[aria-pressed="true"] {
border-color: var(--noir);
background: var(--noir);
color: var(--blanc);
}
.filtre__nb {
padding: 1px 8px;
border-radius: 4px;
background: rgba(0, 0, 0, .08);
font-size: 13px;
}
.filtre[aria-pressed="true"] .filtre__nb {
background: var(--orange);
color: var(--noir);
}
.clients-grille {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
gap: var(--grille);
margin: 0;
padding: 0;
list-style: none;
}
.client {
display: flex;
flex-direction: column;
gap: var(--e-3);
padding: var(--e-5);
border-radius: var(--rayon);
background: var(--blanc);
transition: box-shadow .3s, transform .3s var(--ease);
}
.client[hidden] {
display: none;
}
.client:hover {
transform: translateY(-3px);
box-shadow: 0 20px 36px -22px rgba(0, 0, 0, .35);
}
.client__logo {
display: grid;
place-items: center;
aspect-ratio: 16 / 9;
padding: var(--e-4);
border-radius: 10px;
background: var(--fond);
}
.client__logo img {
width: auto;
max-width: 85%;
max-height: 72px;
object-fit: contain;
filter: grayscale(1);
transition: filter .3s;
}
.client:hover .client__logo img {
filter: none;
}
.client__nom-logo {
color: #6b675f;
font-size: 1.35rem;
font-weight: 800;
letter-spacing: -.02em;
line-height: 1.1;
text-align: center;
}
.client__nom {
margin: 0;
font-size: 1.05rem;
font-weight: 800;
}
.client__secteur {
margin: 2px 0 0;
color: var(--texte-doux);
font-size: 14px;
}
.client__voir {
display: inline-flex;
align-items: center;
gap: 8px;
margin-top: auto;
padding: 0;
border: 0;
background: none;
min-height: 44px;
color: var(--orange-texte);
font-size: 14px;
font-weight: 800;
line-height: 1.3;
text-align: left;
cursor: pointer;
}
.fenetre {
width: 100vw;
max-width: none;
height: 100dvh;
max-height: none;
margin: 0;
padding: var(--bloc-grand) var(--gouttiere);
border: 0;
border-radius: 0;
background: var(--fond);
}
.fenetre__corps {
max-width: var(--conteneur);
margin: 0 auto;
} .fenetre__corps .fenetre__realisation {
flex-basis: 100%;
max-width: 70ch;
margin: 0;
font-size: 1.05rem;
line-height: 1.5;
} .fenetre__corps .wp-block-gallery.has-nested-images {
display: grid !important;
grid-template-columns: 1fr;
gap: var(--e-5) !important;
margin: 0;
}
.fenetre__corps .wp-block-gallery.has-nested-images figure.wp-block-image {
width: 100% !important;
margin: 0 !important;
flex: none !important;
}
.fenetre__corps .wp-block-gallery.has-nested-images figure.wp-block-image img {
display: block;
width: 100%;
height: auto !important;
max-height: 82vh;
object-fit: contain !important;
border-radius: var(--rayon);
background: var(--blanc);
cursor: zoom-in;
}
.fenetre__corps .wp-block-gallery figcaption {
margin-top: var(--e-2);
color: var(--texte-doux);
font-size: 14px;
text-align: left;
} .fenetre__zoom {
position: fixed;
inset: 0;
z-index: 2;
display: grid;
place-items: center;
padding: var(--e-5);
background: rgba(10, 10, 10, .92);
cursor: zoom-out;
}
.fenetre__zoom img {
max-width: 100%;
max-height: 100%;
object-fit: contain;
border-radius: var(--rayon-petit);
}
.fenetre__zoom figcaption {
position: absolute;
right: 0;
bottom: 0;
left: 0;
padding: 12px var(--e-5);
color: var(--blanc);
font-size: 14px;
text-align: center;
}
.fenetre__zoom-fermer {
position: absolute;
top: 12px;
right: 12px;
display: grid;
place-items: center;
width: 44px;
height: 44px;
padding: 0;
border: 0;
border-radius: 50%;
background: var(--orange);
color: var(--noir);
cursor: pointer;
}
.fenetre::backdrop {
background: rgba(10, 10, 10, .78);
-webkit-backdrop-filter: blur(4px);
backdrop-filter: blur(4px);
}
.fenetre__fermer {
position: absolute;
top: 12px;
right: 12px;
display: grid;
place-items: center;
width: 44px;
height: 44px;
padding: 0;
border: 0;
border-radius: 50%;
background: var(--fond);
cursor: pointer;
}
.fenetre__fermer:hover {
background: var(--orange);
}
.fenetre__titre {
margin: 0;
font-size: 2rem;
font-weight: 800;
letter-spacing: -.02em;
} .fenetre__entete {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 12px 20px;
margin-bottom: var(--e-5);
padding-right: 48px;
}
.bouton--petit {
min-height: 44px;
padding: 9px 16px;
font-size: 14px;
gap: 8px;
} .section--serree {
padding-top: var(--section-entete);
}
.contact {
display: grid;
grid-template-columns: 1fr 380px;
gap: var(--colonnes);
align-items: start;
}
.contact__formulaire {
padding: var(--bloc-grand);
border-radius: var(--rayon);
background: var(--blanc);
}
.contact__infos {
position: sticky;
top: calc(var(--entete-h) + 24px);
display: grid;
gap: var(--e-4);
}
.contact__bloc {
display: grid;
gap: var(--e-3);
padding: var(--bloc);
border-radius: var(--rayon);
background: var(--blanc);
}
.contact__bloc p {
margin: 0;
}
.contact__bloc--standard {
background: var(--noir);
color: var(--texte-doux-sombre);
}
.contact__bloc--standard a {
color: var(--blanc);
}
.contact__titre,
.contact__directs h2 {
margin: 0 0 4px;
color: var(--accent-texte);
font-size: 14px;
font-weight: 800;
letter-spacing: .14em;
text-transform: uppercase;
}
.contact__tel {
display: inline-flex;
align-items: center;
gap: 10px;
min-height: 48px;
font-size: 1.75rem;
font-weight: 800;
letter-spacing: -.01em;
text-decoration: none;
transition: color .2s;
}
.contact__tel .icone {
color: var(--orange);
}
.contact__bloc--standard .contact__tel:hover {
color: var(--orange);
}
.contact__bloc--standard .horaires {
margin: 8px 0 0;
}
.contacts {
margin: 0;
padding: 0;
list-style: none;
}
.contacts li {
padding: var(--e-4) 0;
border-top: 1px solid rgba(0, 0, 0, .08);
color: var(--texte-doux);
font-size: 16px;
line-height: 1.5;
}
.contacts li:first-child {
padding-top: 4px;
border-top: 0;
}
.contacts strong {
display: block;
color: var(--texte);
font-size: 1.05rem;
}
.contacts a {
display: inline-block;
padding-block: 4px;
color: var(--texte);
font-weight: 700;
text-decoration: underline;
text-decoration-color: rgba(0, 0, 0, .3);
text-underline-offset: 3px;
}
.contacts a:hover {
color: var(--orange-texte);
text-decoration-color: currentColor;
}
.formulaire {
position: relative;
display: grid;
gap: var(--e-5);
margin-top: var(--e-5);
}
.formulaire__note {
margin: 0;
color: var(--texte-doux);
font-size: 15px;
}
.formulaire__ligne {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--e-5);
}
.champ {
display: grid;
align-content: start;
gap: var(--e-2);
font-size: 16px;
font-weight: 700;
}
.champ__requis {
color: var(--orange-texte);
}
.champ__format {
margin-left: var(--e-1);
color: var(--texte-doux);
font-size: 15px;
font-weight: 400;
}
.champ__aide {
margin: 0;
color: var(--texte-doux);
font-size: 15px;
font-weight: 400;
} .champ input,
.champ select,
.champ textarea {
width: 100%;
min-height: 52px;
padding: 13px 16px;
border: 1.5px solid #8c8880;
border-radius: var(--rayon-petit);
background: var(--blanc);
color: var(--texte);
font: inherit;
font-size: 16px;
font-weight: 400;
transition: border-color .2s, box-shadow .2s, background-color .2s;
} .champ input:hover,
.champ select:hover,
.champ textarea:hover {
border-color: var(--noir);
background: #fffaf6;
}
.champ select {
cursor: pointer;
}
.champ textarea {
min-height: 150px;
resize: vertical;
}
.champ input:focus,
.champ select:focus,
.champ textarea:focus {
outline: none;
border-color: var(--noir);
box-shadow: 0 0 0 4px rgba(239, 124, 37, .45);
}
.champ--piege {
position: absolute;
left: -9999px;
} .champ--erreur input,
.champ--erreur select,
.champ--erreur textarea {
border-color: var(--erreur);
background: var(--erreur-fond);
}
.champ--erreur input:focus,
.champ--erreur textarea:focus {
border-color: var(--erreur);
box-shadow: 0 0 0 4px rgba(179, 38, 30, .2);
}
.champ__erreur {
display: flex;
align-items: flex-start;
gap: var(--e-2);
margin: 0;
color: var(--erreur);
font-size: 15px;
font-weight: 700;
line-height: 1.4;
}
.champ__erreur .icone {
width: 18px;
height: 18px;
margin-top: 1px;
}
.case-bloc {
display: grid;
gap: var(--e-2);
}
.case-bloc.champ--erreur .case input {
outline: 2px solid var(--erreur);
outline-offset: 2px;
}
.case {
display: flex;
align-items: flex-start;
gap: 12px;
color: var(--texte-doux);
font-size: 15px;
cursor: pointer;
}
.case input {
flex: none;
width: 24px;
height: 24px;
margin: 0;
accent-color: var(--orange-texte);
outline: 2px solid transparent;
outline-offset: 2px;
cursor: pointer;
transition: outline-color .2s;
}
.case:hover input {
outline-color: var(--orange);
}
.case a {
color: var(--texte);
font-weight: 700;
}
.formulaire__envoi {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 12px 24px;
}
.formulaire__envoi p {
margin: 0;
color: var(--texte-doux);
} .grecaptcha-badge {
visibility: hidden;
}
.formulaire__recaptcha {
margin: 0;
color: var(--texte-doux);
font-size: 14px;
}
.formulaire__recaptcha a {
color: inherit;
}
.formulaire__envoi a {
color: var(--texte);
font-weight: 800;
} .avis {
display: grid;
grid-template-columns: auto 1fr;
align-items: start;
gap: var(--e-4);
margin-bottom: var(--e-5);
padding: var(--e-5);
border-radius: var(--rayon);
font-size: 16px;
line-height: 1.5;
}
.formulaire .avis {
margin-bottom: 0;
} .contact__formulaire > .avis {
margin-top: var(--e-5);
}
.avis:focus-visible {
outline: 3px solid var(--erreur);
outline-offset: 3px;
}
.avis__icone {
display: grid;
place-items: center;
width: 40px;
height: 40px;
border-radius: 50%;
}
.avis__icone .icone {
width: 22px;
height: 22px;
}
.avis__titre {
margin: 0 0 var(--e-1);
font-size: 1.125rem;
font-weight: 800;
line-height: 1.3;
}
.avis p:not(.avis__titre) {
margin: 0;
}
.avis ul {
display: grid;
gap: var(--e-1);
margin: var(--e-2) 0 0;
padding-left: 1.1em;
}
.avis a {
color: inherit;
font-weight: 700;
text-underline-offset: 3px;
}
.avis--ok {
background: var(--noir);
color: var(--ligne-claire);
}
.avis--ok .avis__titre {
color: var(--blanc);
}
.avis--ok .avis__icone {
background: var(--orange);
color: var(--noir);
}
.avis--ok a {
color: var(--blanc);
}
.avis--erreur {
border: 1.5px solid rgba(179, 38, 30, .3);
background: var(--erreur-fond);
color: var(--texte);
}
.avis--erreur .avis__titre {
color: var(--erreur);
}
.avis--erreur .avis__icone {
background: var(--erreur);
color: var(--blanc);
}
.carte-plan iframe {
width: 100%;
height: 420px;
border: 0;
} .pagination .nav-links {
display: flex;
flex-wrap: wrap;
gap: 6px;
margin-top: var(--section-entete);
}
.page-numbers {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 44px;
min-height: 44px;
padding: 10px 14px;
border-radius: var(--rayon-petit);
background: var(--blanc);
color: var(--texte);
font-weight: 700;
text-decoration: none;
}
.page-numbers.current {
background: var(--noir);
color: var(--blanc);
}
.article__visuel {
margin: 0 0 var(--e-6);
}
.article__visuel img {
width: 100%;
border-radius: var(--rayon);
} .article__signature {
margin: var(--e-3) 0 0;
color: #bdbdbd;
font-size: 15px;
}
.article__signature a {
color: var(--blanc);
font-weight: 700;
}
.article__retour {
margin-top: var(--e-7);
} .colonnes-media {
gap: var(--colonnes);
}
.colonnes-media img {
width: 100%;
border-radius: var(--rayon);
}
.colonnes-media--logo img {
max-width: 220px;
border-radius: 0;
}
.prose .wp-block-gallery {
margin-block: 2em;
}
.prose .wp-block-gallery img {
border-radius: 10px;
}
.prose .wp-block-gallery.has-nested-images.logos figure.wp-block-image {
flex-direction: column;
align-items: center;
justify-content: center;
padding: 28px 24px 16px;
border-radius: var(--rayon);
background: var(--blanc);
}
.prose .wp-block-gallery.has-nested-images.logos figure.wp-block-image img {
width: auto;
height: auto;
max-height: 96px;
object-fit: contain;
border-radius: 0;
} .prose .wp-block-gallery.has-nested-images.logos figure.wp-block-image::before {
content: none;
}
.prose .wp-block-gallery.has-nested-images.logos figure.wp-block-image figcaption {
position: static;
flex: none;
max-height: none;
padding: 12px 0 0;
overflow: visible;
background: none;
color: var(--texte-doux);
font-size: 14px;
text-shadow: none;
} .prose .wp-block-gallery.has-nested-images {
justify-content: flex-start;
} .prose .wp-block-gallery.has-nested-images figure.wp-block-image:not(#individual-image) {
flex-direction: column;
flex-grow: 0;
justify-content: flex-start;
}
.prose .wp-block-gallery.has-nested-images figure.wp-block-image::before {
content: none;
}
.prose .wp-block-gallery.has-nested-images.is-cropped figure.wp-block-image:not(#individual-image) img {
flex: none;
height: auto;
aspect-ratio: 4 / 3;
}
.prose .wp-block-gallery.has-nested-images figure.wp-block-image figcaption {
position: static;
flex: none;
max-height: none;
margin: 0;
padding: 10px 2px 0;
overflow: visible;
background: none;
color: var(--texte);
font-size: 15px;
font-weight: 600;
line-height: 1.35;
text-align: left;
text-shadow: none;
} .prose ul.liste-lignes {
padding: 0;
list-style: none;
}
.liste-lignes li {
padding-block: var(--e-4);
border-bottom: 1px solid rgba(0, 0, 0, .1);
color: var(--texte-doux);
font-size: 16.5px;
line-height: 1.5;
}
.liste-lignes li:first-child {
padding-top: 0;
}
.liste-lignes li strong:first-child {
color: var(--texte);
}
.liste-lignes:not(.liste-lignes--2) li strong:first-child {
display: block;
margin-bottom: 2px;
font-size: 1.05rem;
}
.prose ul.liste-lignes--2 {
display: grid;
grid-template-columns: 1fr 1fr;
column-gap: var(--e-7);
}
.liste-lignes--2 li:nth-child(2) {
padding-top: 0;
} .video-carte {
position: relative;
margin: 0;
overflow: hidden;
border-radius: var(--rayon);
background: var(--noir);
}
.video-carte img {
width: 100%;
aspect-ratio: 4 / 3;
object-fit: cover;
object-position: left center;
border-radius: 0 !important;
opacity: .7;
transition: opacity .3s, transform .6s var(--ease);
}
.video-carte__lecture {
position: absolute;
inset: 0;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 14px;
padding: 0;
border: 0;
background: linear-gradient(0deg, rgba(10, 10, 10, .6), transparent 60%);
color: var(--blanc);
cursor: pointer;
}
.video-carte__lecture .lecture__rond {
width: 84px;
}
.video-carte__texte {
font-size: 14px;
font-weight: 800;
letter-spacing: .12em;
text-transform: uppercase;
}
.video-carte:hover img {
opacity: .85;
transform: scale(1.03);
}
.video-carte:hover .lecture__rond {
background: var(--orange);
color: var(--noir);
transform: scale(1.06);
} .etape::after {
content: "";
display: table;
clear: both;
}
.etape__visuel {
float: right;
width: 180px;
margin: 4px 0 12px 28px !important;
}
.etape__visuel img {
width: 100%;
border-radius: 10px;
}
.fiche__visuel figcaption {
margin-top: 10px;
color: var(--texte-doux);
font-size: 15px;
} .statut {
display: inline-flex;
align-items: center;
gap: 8px;
margin: 0 0 var(--e-4);
padding: 6px 12px 6px 10px;
border: 1px solid rgba(255, 255, 255, .18);
border-radius: var(--rayon-petit);
background: rgba(255, 255, 255, .05);
color: var(--trait-clair);
font-size: 14px;
font-weight: 700;
line-height: 1.2;
}
.statut__point {
width: 9px;
height: 9px;
border-radius: 50%;
background: #ef4444;
}
.statut--ouvert {
border-color: rgba(34, 197, 94, .45);
background: rgba(34, 197, 94, .14);
color: #4ade80;
}
.statut--ouvert .statut__point {
background: #22c55e;
box-shadow: 0 0 0 0 rgba(34, 197, 94, .6);
animation: pulsation 2s 2;
}
@keyframes pulsation {
70% {
box-shadow: 0 0 0 8px rgba(34, 197, 94, 0);
}
100% {
box-shadow: 0 0 0 0 rgba(34, 197, 94, 0);
}
} .page-entete {
text-align: center;
}
.page-entete__titre,
.page-entete__accroche {
margin-inline: auto;
}
.page-entete__retour {
margin-bottom: var(--e-4);
}
.page-entete__retour a {
display: inline-flex;
align-items: center;
gap: 8px;
min-height: 44px;
color: #c4c4c4;
font-size: 15px;
font-weight: 700;
text-decoration: none;
transition: color .2s;
}
.page-entete__retour a::before {
content: "\2190";
color: var(--orange);
}
.page-entete__retour a:hover {
color: var(--blanc);
}  .lien-externe:not(.bouton)::after {
content: "";
display: inline-block;
flex: none;
width: .8em;
height: .8em;
margin-left: .3em;
vertical-align: -.05em;
background: currentColor;
-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 4h6v6M20 4l-9 9M18 14v5a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V7a1 1 0 0 1 1-1h5'/%3E%3C/svg%3E") center / contain no-repeat;
mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 4h6v6M20 4l-9 9M18 14v5a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V7a1 1 0 0 1 1-1h5'/%3E%3C/svg%3E") center / contain no-repeat;
}
.reseaux .lien-externe::after {
content: none;
}
.sortie {
width: min(460px, 100vw - 32px);
padding: 32px;
border: 0;
border-radius: var(--rayon);
text-align: center;
}
.sortie::backdrop {
background: rgba(10, 10, 10, .72);
-webkit-backdrop-filter: blur(3px);
backdrop-filter: blur(3px);
}
.sortie__icone {
display: grid;
place-items: center;
width: 56px;
height: 56px;
margin: 0 auto 14px;
border-radius: 50%;
background: #fff0e4;
color: var(--orange-texte);
}
.sortie__icone .icone {
width: 26px;
height: 26px;
}
.sortie__titre {
margin: 0 0 8px;
font-size: 1.5rem;
font-weight: 800;
letter-spacing: -.01em;
}
.sortie__texte {
margin: 0 0 24px;
color: var(--texte-doux);
}
.sortie__texte strong {
color: var(--texte);
overflow-wrap: anywhere;
}
.sortie__boutons {
display: grid;
gap: 10px;
}
.cookies {
position: fixed;
left: 16px;
right: 16px;
bottom: 16px;
z-index: 70;
display: grid;
grid-template-columns: 1fr auto;
align-items: center;
gap: 16px 32px;
max-width: 1100px;
margin-inline: auto;
padding: 24px 28px;
border: 1px solid var(--ligne);
border-radius: var(--rayon);
background: var(--noir-2);
color: #d6d6d6;
box-shadow: 0 20px 50px -10px rgba(0, 0, 0, .6);
}
.cookies[hidden] {
display: none;
}
.cookies__titre {
margin: 0 0 6px;
color: var(--blanc);
font-size: 1.1rem;
font-weight: 800;
}
.cookies__texte {
margin: 0;
font-size: 16px;
line-height: 1.5;
}
.cookies__choix {
display: grid;
gap: 12px;
margin: 16px 0 0;
padding: 0;
border: 0;
}
.cookies__choix[hidden] {
display: none;
}
.cookies__option {
display: flex;
align-items: flex-start;
gap: 12px;
font-size: 15px;
cursor: pointer;
}
.cookies__option input {
flex: none;
width: 24px;
height: 24px;
margin: 0;
accent-color: var(--orange);
}
.cookies__option strong {
display: block;
color: var(--blanc);
}
.cookies__plus {
margin: 10px 0 0;
font-size: 14px;
}
.cookies__plus a {
color: var(--blanc);
font-weight: 700;
} .cookies__boutons {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px;
min-width: 330px;
}
.cookies__principal,
.cookies--choix [data-cookies="rien"] {
grid-column: 1 / -1;
}
.bouton--discret {
border-color: rgba(255, 255, 255, .5);
color: #dcdcdc;
font-weight: 700;
}
.bouton--discret:hover {
border-color: var(--blanc);
color: var(--blanc);
}
.lien-bouton {
min-height: 44px;
padding: 0;
border: 0;
background: none;
color: inherit;
font: inherit;
text-decoration: underline;
text-underline-offset: 3px;
cursor: pointer;
}
.lien-bouton:hover {
color: var(--orange);
}
@media (max-width: 767px) {
.cookies {
left: 8px;
right: 8px;
bottom: 8px;
grid-template-columns: 1fr;
max-height: calc(100dvh - 16px);
padding: 18px;
overflow-y: auto;
}
.cookies__boutons {
min-width: 0;
}
} @media (max-width: 1240px) {
.pied__grille {
grid-template-columns: repeat(3, 1fr);
}
.pied__marque {
grid-column: 1 / -1;
}
}
@media (max-width: 1240px) {
.sous-menu__liste {
grid-template-columns: repeat(5, 1fr);
}
}
@media (max-width: 1180px) {
.entete__tel-texte {
display: none;
}
.nav__lien {
padding-inline: 10px;
}
}
@media (max-width: 1023px) {
:root {
--entete-h: 68px;
}
.nav {
display: none;
}
.entete__burger {
display: grid;
}
.entete__actions {
margin-left: auto;
} .hero {
height: auto;
min-height: calc(100svh - var(--entete-h));
}
.hero__video {
position: relative;
min-height: inherit;
}
.hero__grille {
grid-template-columns: 1fr;
align-content: center;
height: auto;
min-height: inherit;
padding-block: var(--e-7);
} .hero__grille {
gap: 0;
}
.hero__contenu {
display: contents;
}
.hero__titre {
order: 1;
margin-top: 0;
}
.hero__texte {
order: 2;
}
.hero__actions {
order: 3;
}
.lecture {
order: 4;
position: relative;
justify-content: center;
gap: 10px;
width: 100%;
max-width: 560px;
aspect-ratio: 16 / 9;
margin-top: var(--e-6);
overflow: hidden;
border-radius: var(--rayon);
justify-self: start;
isolation: isolate;
}
.lecture__vignette {
position: absolute;
inset: 0;
z-index: -1;
display: block;
}
.lecture__vignette::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(0deg, rgba(10, 10, 10, .7), rgba(10, 10, 10, .2));
}
.lecture__vignette img {
width: 100%;
height: 100%;
object-fit: cover;
}
.lecture__rond {
width: 68px;
}
.lecture__texte {
font-size: 15px;
}
.atouts {
order: 5;
}
.references__grille {
grid-template-columns: 1fr;
grid-template-areas: "titre" "liste" "lien";
}
.references__liste {
grid-template-columns: repeat(4, minmax(0, 1fr));
}
.anniversaire__grille {
grid-template-columns: 1fr;
}
.anniversaire__badge {
right: 12px;
bottom: -18px;
}
.produits-grille--accueil,
.etapes-accueil__liste {
grid-template-columns: repeat(2, 1fr);
}
.contact,
.fiche {
grid-template-columns: 1fr;
}
.contact__infos,
.fiche__cote {
position: static;
}
.pied__grille {
grid-template-columns: 1fr 1fr;
}
} @media (max-width: 767px) {
.entete__devis {
display: none;
}
html {
scroll-padding-bottom: 80px;
}
.barre-action {
position: fixed;
left: 0;
right: 0;
bottom: 0;
z-index: 45;
display: grid;
grid-template-columns: 1fr 1.6fr;
gap: 8px;
padding: 6px 12px calc(6px + env(safe-area-inset-bottom));
border-top: 1px solid var(--ligne);
background: rgba(13, 13, 13, .96);
transition: transform .25s var(--ease), visibility .25s;
}
.js .barre-action:not(.est-visible) {
visibility: hidden;
transform: translateY(100%);
}
.menu-ouvert .barre-action,
body:has(.cookies:not([hidden])) .barre-action {
display: none;
}
.barre-action__lien {
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
min-height: 46px;
border: 2px solid rgba(255, 255, 255, .55);
border-radius: 8px;
color: var(--blanc);
font-size: 15px;
font-weight: 800;
text-decoration: none;
}
.barre-action__lien .icone {
color: var(--orange);
}
.barre-action__lien--devis {
border-color: var(--orange);
background: var(--orange);
color: var(--noir);
}
.pied__colonne ul {
gap: 0;
}
.pied__colonne ul a,
.pied__mail {
min-height: 44px;
}
.pied__mail {
display: inline-flex;
align-items: center;
}
}
@media (max-width: 767px) and (prefers-reduced-motion: reduce) {
.barre-action {
transition: none;
}
}
@media (max-width: 640px) {
.formulaire__ligne,
.etapes-accueil__liste {
grid-template-columns: 1fr;
} .pied__grille {
grid-template-columns: 1fr 1fr;
gap: var(--e-6) var(--e-5);
}
.pied__colonne:last-child {
grid-column: 1 / -1;
} .produits-grille--accueil {
grid-template-columns: none;
grid-auto-flow: column;
grid-auto-columns: 74%;
gap: var(--e-3);
margin-inline: calc(-1 * var(--gouttiere));
padding: 0 var(--gouttiere) 6px;
overflow-x: auto;
scroll-snap-type: x mandatory;
scroll-padding-inline: var(--gouttiere);
scrollbar-width: none;
}
.produits-grille--accueil::-webkit-scrollbar {
display: none;
}
.produits-grille--accueil > * {
scroll-snap-align: start;
}
.produits-grille--accueil .produit-carte__lien {
aspect-ratio: 4 / 5;
}
.produits-grille--accueil .produit-carte__titre {
font-size: 1.25rem;
}
.prose ul.liste-lignes--2 {
grid-template-columns: 1fr;
}
.liste-lignes--2 li:nth-child(2) {
padding-top: var(--e-4);
} .etapes-accueil__liste li {
display: grid;
grid-template-columns: 52px 1fr;
column-gap: var(--e-4);
padding: var(--e-5);
}
.etapes-accueil__liste li::before {
grid-row: span 2;
margin: 0;
font-size: 36px;
}
.etapes-accueil__liste h3 {
margin-bottom: var(--e-1);
font-size: 1.15rem;
} .filtres {
flex-wrap: nowrap;
margin-inline: calc(-1 * var(--gouttiere));
padding: 0 var(--gouttiere) 4px;
overflow-x: auto;
scrollbar-width: none;
}
.filtres::-webkit-scrollbar {
display: none;
}
.filtre {
flex: none;
}
.clients-grille {
grid-template-columns: repeat(2, 1fr);
gap: var(--e-3);
}
.client {
gap: var(--e-3);
padding: var(--e-4);
}
.client__logo {
padding: var(--e-3);
}
.client__logo img {
max-height: 52px;
}
.client__nom {
font-size: .95rem;
}
.client__voir {
font-size: 14px;
} .etape {
padding-left: 0;
}
.etape::before {
position: static;
display: block;
margin-bottom: 6px;
font-size: 34px;
}
.etape h2 {
font-size: 1.25rem;
}
.etape__visuel {
width: 96px;
margin: 0 0 8px 16px !important;
}
.atouts {
grid-template-columns: 1fr;
gap: 8px;
}
.hero__actions .bouton,
.appel__actions,
.appel__actions .bouton,
.formulaire__envoi .bouton {
width: 100%;
}
}
@media (prefers-reduced-motion: reduce) {
html {
scroll-behavior: auto;
}
*,
*::before,
*::after {
animation-duration: .01ms !important;
animation-iteration-count: 1 !important;
transition-duration: .01ms !important;
}
}  .tableau {
margin-block: var(--e-5);
overflow-x: auto;
border: 1px solid #d8d4cc;
border-radius: var(--rayon);
background: var(--blanc);
}
.tableau:focus-visible {
outline: 3px solid var(--focus);
outline-offset: 3px;
}
.tableau table {
width: 100%;
min-width: 640px;
border-collapse: collapse;
font-size: 15px;
line-height: 1.45;
}
.tableau caption {
padding: var(--e-4) var(--e-4) var(--e-2);
font-weight: 800;
text-align: left;
}
.tableau th,
.tableau td {
padding: var(--e-3) var(--e-4);
border-top: 1px solid #e3e0da;
text-align: left;
vertical-align: top;
}
.tableau thead th {
background: var(--noir);
color: var(--blanc);
font-size: 14px;
white-space: nowrap;
}
.tableau tbody th {
font-weight: 700;
white-space: nowrap;
} .resultat {
font-weight: 700;
white-space: nowrap;
}
.resultat--c {
color: #1e5e20;
}
.resultat--nc {
color: var(--erreur);
}
.resultat--na {
color: var(--texte-doux);
}
.resultat--nt {
color: #7a4b00;
}
.telechargements ul {
padding-left: 1.1em;
} @media print {
.lien-evitement,
.entete,
.menu-mobile,
.page-entete__retour,
.sommaire,
.appel,
.pied,
.barre-action,
.cookies,
.telechargements,
dialog {
display: none !important;
}
body {
background: #fff;
color: #000;
font-size: 11pt;
}
.page-entete {
padding: 0 0 12pt;
background: none;
color: #000;
}
.page-entete::before,
.page-entete::after {
content: none;
}
.page-entete__titre,
.page-entete__accroche {
color: #000;
}
.section {
padding-block: 0;
}
.conteneur {
width: 100%;
}
.apparition {
opacity: 1 !important;
transform: none !important;
}
.tableau {
overflow: visible;
border-color: #999;
}
.tableau table {
min-width: 0;
font-size: 9pt;
}
.tableau thead th {
background: var(--ligne-claire);
color: #000;
}
.tableau thead {
display: table-header-group;
}
.tableau tr {
break-inside: avoid;
}
h2,
h3 {
break-after: avoid;
}
} .carrousel__fleches {
display: flex;
justify-content: flex-end;
gap: var(--e-3);
margin-top: var(--e-4);
}
.carrousel__fleche {
display: grid;
place-items: center;
width: 48px;
height: 48px;
padding: 0;
border: 1.5px solid #8c8880;
border-radius: 50%;
background: var(--blanc);
color: var(--noir);
cursor: pointer;
transition: background-color .2s, border-color .2s, color .2s;
}
.carrousel__fleche:hover:not(:disabled) {
border-color: var(--noir);
background: var(--noir);
color: var(--blanc);
}
.carrousel__fleche:disabled {
opacity: .4;
cursor: default;
}
.carrousel__fleche--precedent .icone {
transform: rotate(180deg);
} @media (hover: hover) and (pointer: fine) {
.est-defilant,
.est-defilant a,
.est-defilant button {
cursor: grab;
}
.est-tenu,
.est-tenu a,
.est-tenu button {
cursor: grabbing;
user-select: none;
} .est-tenu {
scroll-snap-type: none;
scroll-behavior: auto;
}
} .visuel {
--v-fond: var(--blanc);
display: flex;
align-items: center;
justify-content: center;
aspect-ratio: 4 / 3;
padding: 12px 16px;
border: 1px solid var(--ligne-claire);
border-radius: var(--rayon);
background: var(--v-fond);
}
.picto {
width: 100%;
height: 100%;
overflow: visible;
color: var(--texte);
}
.picto__accent {
fill: var(--orange);
stroke: none;
}
.picto__orange {
stroke: var(--orange);
}
.picto__sombre {
stroke: var(--noir);
}
.picto__epais {
stroke-width: 4;
}
.picto__fin {
stroke-width: 2;
}
.picto__fond {
fill: var(--v-fond);
}
.picto__texte {
fill: var(--noir);
stroke: none;
font: 800 18px/1 var(--police);
}
.picto__texte--grand {
font-size: 24px;
} .etapes-accueil .visuel {
--v-fond: var(--noir-2);
margin-bottom: var(--e-4);
border-color: var(--ligne);
}
.etapes-accueil .picto {
color: var(--blanc);
}
.etapes-accueil .picto__texte {
fill: var(--blanc);
} .etape__visuel.visuel {
width: 200px;
padding: 10px 14px;
} .apparition-pret .picto__trace {
stroke-dasharray: 260;
stroke-dashoffset: 260;
}
.apparition-pret .est-anime .picto__trace {
animation: picto-trace 6s var(--ease) infinite;
}
.apparition-pret .picto__pop {
transform: scale(0);
transform-box: fill-box;
transform-origin: center;
}
.apparition-pret .est-anime .picto__pop {
animation: picto-pop 6s var(--ease) infinite;
}
.apparition-pret .picto__bras {
transform: rotate(24deg);
transform-box: view-box;
transform-origin: 40px 78px;
}
.apparition-pret .est-anime .picto__bras {
animation: picto-bras 6s var(--ease) infinite;
}
.apparition-pret .picto__tourne {
transform-box: view-box;
}
.apparition-pret .est-anime .picto__tourne {
animation: picto-tourne 6s linear infinite;
}
@keyframes picto-trace {
0% {
stroke-dashoffset: 260;
}
18% {
stroke-dashoffset: 0;
}
88% {
stroke-dashoffset: 0;
}
100% {
stroke-dashoffset: 260;
}
}
@keyframes picto-pop {
0% {
transform: scale(0);
}
10% {
transform: scale(1.15);
}
15% {
transform: scale(1);
}
90% {
transform: scale(1);
}
100% {
transform: scale(0);
}
}
@keyframes picto-bras {
0% {
transform: rotate(24deg);
}
22% {
transform: rotate(0);
}
85% {
transform: rotate(0);
}
100% {
transform: rotate(24deg);
}
}
@keyframes picto-tourne {
to {
transform: rotate(360deg);
}
} .parcours {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: var(--grille);
margin: var(--e-5) 0;
}
.parcours__etape {
display: flex;
flex-direction: column;
gap: 8px;
}
.parcours__numero {
color: var(--orange-texte);
font-size: 13px;
font-weight: 800;
letter-spacing: .04em;
}
.parcours__libelle {
color: var(--texte);
font-size: 14px;
font-weight: 700;
}
@media (min-width: 1240px) {
.parcours {
grid-template-columns: repeat(4, 1fr);
}
}
@media (max-width: 480px) {
.parcours {
grid-template-columns: 1fr;
}
}
@media (max-width: 767px) {
.etape__visuel.visuel {
float: none;
width: 100%;
max-width: 320px;
margin: 0 0 var(--e-4) !important;
}
} .secteur__reponse {
max-width: 70ch;
margin-bottom: var(--e-7);
}
.secteur__titre {
margin: 0 0 var(--e-5);
font-size: clamp(1.4rem, 3vw, 2.2rem);
font-weight: 800;
letter-spacing: -.02em;
}
.secteur .clients-grille {
margin-bottom: var(--e-8);
}
.client__realisation {
margin: var(--e-2) 0 0;
color: var(--texte-doux);
font-size: 14px;
line-height: 1.45;
}
.secteur__produits {
display: flex;
flex-wrap: wrap;
gap: var(--e-2);
margin: 0 0 var(--e-8);
padding: 0;
list-style: none;
}
.secteur__produits a {
display: inline-block;
padding: 10px 16px;
border: 1.5px solid var(--texte);
border-radius: var(--rayon-petit);
color: var(--texte);
font-weight: 600;
text-decoration: none;
transition: background-color .2s, color .2s, border-color .2s;
}
.secteur__produits a:is(:hover, :focus-visible) {
border-color: var(--noir);
background: var(--noir);
color: var(--orange);
}
.secteur__questions {
max-width: 70ch;
} .metiers {
margin-top: var(--e-8);
padding-top: var(--e-6);
border-top: 1px solid var(--ligne-claire);
}
.metiers__titre {
margin: 0 0 var(--e-4);
font-size: 1.3rem;
font-weight: 800;
}
.metiers__liste {
display: flex;
flex-wrap: wrap;
gap: var(--e-2);
margin: 0;
padding: 0;
list-style: none;
}
.metiers__liste a {
display: inline-block;
padding: 10px 16px;
border: 1.5px solid var(--texte);
border-radius: var(--rayon-petit);
color: var(--texte);
font-weight: 600;
text-decoration: none;
transition: background-color .2s, color .2s, border-color .2s;
}
.metiers__liste a:is(:hover, :focus-visible) {
border-color: var(--noir);
background: var(--noir);
color: var(--orange);
} .communes__texte {
max-width: 60ch;
margin: 0 0 var(--e-6);
color: var(--texte-doux);
}
.communes__liste {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
gap: var(--grille);
margin: 0;
padding: 0;
list-style: none;
}
.commune {
padding: var(--bloc);
border: 1px solid var(--ligne-claire);
border-radius: var(--rayon);
background: var(--blanc);
}
.commune__nom {
margin: 0 0 var(--e-3);
font-size: 1.15rem;
font-weight: 800;
}
.commune__chantiers {
display: grid;
gap: var(--e-2);
margin: 0;
padding: 0;
list-style: none;
}
.commune__chantiers li {
padding-left: 20px;
background: var(--barres-orange) 0 .4em / 12px no-repeat;
font-size: 15px;
line-height: 1.45;
} .temoignages__liste {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
gap: var(--grille);
margin: 0;
padding: 0;
list-style: none;
}
.temoignage {
padding: var(--bloc);
border: 1px solid var(--ligne-claire);
border-radius: var(--rayon);
background: var(--blanc);
}
.temoignage__texte {
margin: 0 0 var(--e-4);
padding: 0;
border: 0;
}
.temoignage__texte p {
margin: 0;
font-size: 17px;
line-height: 1.5;
}
.temoignage__auteur {
margin: 0;
font-weight: 700;
}
.temoignage__date {
margin-left: var(--e-2);
color: var(--texte-doux);
font-size: 14px;
font-weight: 400;
}
.temoignage--cote {
margin-top: var(--e-5);
} .organigramme {
margin: var(--e-5) 0 var(--e-7);
}
.organigramme__direction {
position: relative;
display: flex;
justify-content: center;
padding-bottom: var(--e-5);
}
.organigramme__direction .service {
min-width: min(100%, 320px);
}
.organigramme__services {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: var(--grille);
margin: 0;
padding: 0;
list-style: none;
}
.service {
height: 100%;
padding: var(--bloc);
border: 1px solid var(--ligne-claire);
border-radius: var(--rayon);
background: var(--blanc);
}
.prose .service__nom {
display: flex;
align-items: center;
gap: 8px;
margin: 0 0 var(--e-4);
padding: 8px 12px;
border-radius: var(--rayon-petit);
background: var(--orange);
color: var(--noir);
font-size: .9rem;
font-weight: 800;
letter-spacing: .04em;
line-height: 1.2;
text-transform: uppercase;
}
.service__icone {
flex: none;
width: 22px;
height: 22px;
}
.service__personnes {
display: grid;
gap: var(--e-3);
margin: 0;
padding: 0;
list-style: none;
}
.personne {
display: grid;
grid-template-columns: 44px 1fr;
grid-template-rows: auto auto;
column-gap: 12px;
align-items: center;
}
.personne__initiales {
grid-row: 1 / 3;
display: grid;
place-items: center;
width: 44px;
height: 44px;
border-radius: var(--rayon-petit);
background: var(--noir);
color: var(--orange);
font-size: 14px;
font-weight: 800;
letter-spacing: .02em;
}
.personne__nom {
font-weight: 700;
line-height: 1.25;
}
.personne__role {
color: var(--texte-doux);
font-size: 14px;
line-height: 1.3;
} .personne--vide .personne__initiales {
border: 2px dashed var(--trait-clair);
background: transparent;
}
.personne--vide .personne__nom {
display: none;
}
.personne--vide .personne__role {
grid-row: 1 / 3;
color: var(--texte);
font-size: 15px;
font-weight: 700;
} @media (min-width: 1240px) {
.organigramme__direction {
padding-bottom: var(--e-6);
}
.organigramme__direction::after {
content: "";
position: absolute;
bottom: 0;
left: 50%;
width: 2px;
height: var(--e-6);
background: var(--orange);
}
.organigramme__services {
grid-template-columns: repeat(5, 1fr);
padding-top: var(--e-5);
border-top: 2px solid var(--orange);
}
.organigramme__services > li::before {
content: "";
display: block;
width: 2px;
height: var(--e-5);
margin: calc(-1 * var(--e-5)) auto 0;
background: var(--orange);
}
} .contact__mail {
display: inline-flex;
align-items: center;
gap: 10px;
min-height: 48px;
margin-top: 4px;
font-size: clamp(1.1rem, 2vw, 1.5rem);
font-weight: 800;
letter-spacing: -.01em;
overflow-wrap: anywhere;
text-decoration: none;
transition: color .2s;
}
.contact__mail .icone {
flex: none;
color: var(--orange);
}
.contact__bloc--standard .contact__mail:hover {
color: var(--orange);
} .carte-plan__actions {
display: flex;
flex-wrap: wrap;
gap: var(--e-3);
justify-content: center;
padding: var(--e-5) var(--gouttiere);
} .formulaire__captcha {
margin-bottom: var(--e-4);
}
.formulaire__captcha:empty {
display: none;
}