/* Base commune à toutes les directions. Aucune couleur ici : tout vient des variables. */
:root {
  --esp-1: .5rem; --esp-2: 1rem; --esp-3: 1.5rem; --esp-4: 2rem;
  --esp-5: 3rem; --esp-6: 4rem; --esp-7: clamp(4rem, 9vw, 6rem); --esp-8: clamp(5rem, 12vw, 8rem);
  --largeur: 72rem;
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 5rem; }
body { margin: 0; background: var(--c-fond); color: var(--c-texte); font-family: var(--police-texte); font-size: var(--t-3); line-height: 1.6; -webkit-font-smoothing: antialiased; overflow-wrap: break-word; }
img { max-width: 100%; }
h1, h2, h3 { font-family: var(--police-titre); color: var(--c-texte); text-wrap: balance; overflow-wrap: break-word; hyphens: manual; }
h3 { line-height: 1.25; }
p { text-wrap: pretty; }
a { color: var(--c-principale); text-underline-offset: .2em; }
.conteneur { width: min(100% - 2 * var(--esp-2), var(--largeur)); margin-inline: auto; }
/* les colonnes peuvent rétrécir : un mot très long passe à la ligne au lieu d'élargir la page */
.conteneur > *, .conteneur > * > * { min-width: 0; }
.s { padding-block: var(--esp-7); }
.titre-section { font-size: var(--t-5); line-height: 1.15; margin: 0 0 var(--esp-4); }
.ph { font-size: 1.15em; line-height: 1; }

/* Boutons : un principal, un secondaire */
.btn, .btn-2 { max-width: 100%; overflow-wrap: anywhere; display: inline-flex; align-items: center; gap: var(--esp-1); padding: .8rem 1.4rem; border-radius: var(--rayon); font: inherit; font-weight: 600; text-decoration: none; cursor: pointer; transition: background-color .2s ease, color .2s ease, border-color .2s ease; }
.btn { background: var(--c-principale); color: var(--c-sur-principale); border: 1px solid var(--c-principale); }
.btn:hover { background: var(--c-texte); border-color: var(--c-texte); color: var(--c-fond); }
.btn-2 { background: transparent; color: var(--c-texte); border: 1px solid var(--c-ligne); }
.btn-2:hover { border-color: var(--c-texte); }
:focus-visible { outline: 2px solid var(--c-principale); outline-offset: 3px; }

/* Seule animation autorisée : une apparition douce des sections. */
@keyframes apparition { from { opacity: 0; transform: translateY(var(--deplacement, 12px)); } }
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .s:not(.s-en-tete) > .conteneur { animation: apparition linear both; animation-timeline: view(); animation-range: entry 0% entry 35%; }
  }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; animation: none !important; }
}

/* Épuré : beaucoup d'air, une grotesque nette, aucun effet. */
:root {
  --police-titre: "Schibsted Grotesk", system-ui, sans-serif;
  --police-texte: "Hanken Grotesk", system-ui, sans-serif;
  --t-1: .8125rem; --t-2: .9375rem; --t-3: 1.0625rem;
  --t-4: clamp(1.15rem, 1.05rem + .4vw, 1.35rem);
  --t-5: clamp(1.6rem, 1.2rem + 1.8vw, 2.5rem);
  --t-6: clamp(2.5rem, 1.4rem + 5vw, 5.25rem);
  --rayon: 4px;
  --ombre: none;
  --c-fond: #FAFAF8; --c-surface: #F1F1EE; --c-texte: #141414; --c-texte-2: #5C5C58; --c-ligne: #E2E2DD;
  --c-voile: rgb(10 10 10 / .7); --c-sur-voile: #FFFFFF;
  --deplacement: 8px;
}
h1, h2 { letter-spacing: -.035em; font-weight: 700; }

/* Pages légales */
.s-legal .conteneur { max-width: 46rem; }
.s-legal h1 { font-size: var(--t-5); margin-top: 0; }
.s-legal h2 { font-size: var(--t-4); margin-top: var(--esp-5); }
.s-legal p { color: var(--c-texte-2); }

/* Mode aperçu (maquette avant paiement) */
.apercu-bandeau { background: var(--c-texte); color: var(--c-fond); font-size: var(--t-2); }
.apercu-bandeau .conteneur { padding-block: var(--esp-1); text-align: center; }
.apercu-barre { position: fixed; inset: auto 0 0 0; z-index: 20; background: var(--c-fond); border-top: 1px solid var(--c-ligne); box-shadow: 0 -4px 20px rgb(0 0 0 / .08); }
.apercu-barre .conteneur { display: flex; flex-wrap: wrap; align-items: center; gap: var(--esp-2); padding-block: var(--esp-2); }
.apercu-question { margin: 0; font-weight: 600; }
.apercu-question span { display: block; font-weight: 400; font-size: var(--t-2); color: var(--c-texte-2); }
.apercu-actions { display: flex; flex-wrap: wrap; gap: var(--esp-1); margin-left: auto; }
.apercu-changer { flex-basis: 100%; display: grid; gap: var(--esp-1); }
.apercu-changer label { display: grid; gap: var(--esp-1); font-weight: 600; }
.apercu-changer textarea { font: inherit; padding: var(--esp-1) var(--esp-2); border: 1px solid var(--c-ligne); border-radius: var(--rayon); background: var(--c-fond); color: var(--c-texte); width: 100%; }
.apercu-changer .btn { justify-self: start; }
.apercu-etat { flex-basis: 100%; margin: 0; color: var(--c-texte-2); }
.apercu-etat:empty { display: none; }
.apercu-changer[hidden], .apercu-actions[hidden] { display: none; }
@media (max-width: 560px) { .apercu-actions { margin-left: 0; } .apercu-actions .btn, .apercu-actions .btn-2 { padding: .6rem 1rem; } }
.apercu-barre button:disabled { opacity: .6; cursor: progress; }
body:has(.apercu-barre) { padding-bottom: 9rem; }

/* En-tête et menu */
.s-en-tete { padding-block: 0; position: sticky; top: 0; z-index: 10; background: var(--c-fond); border-bottom: 1px solid var(--c-ligne); }
.s-en-tete .conteneur { display: flex; align-items: center; gap: var(--esp-4); padding-block: var(--esp-2); }
.s-en-tete .marque { display: inline-flex; align-items: center; color: var(--c-texte); text-decoration: none; flex: 0 1 auto; min-width: 0; }
.s-en-tete .logo { height: 2.5rem; width: auto; }
.s-en-tete .nom { font-family: var(--police-titre); font-size: var(--t-4); font-weight: 700; line-height: 1.1; overflow-wrap: anywhere; }
.s-en-tete nav { flex: 1; min-width: 0; }
.s-en-tete ul { display: flex; gap: var(--esp-3); list-style: none; margin: 0; padding: 0; overflow-x: auto; scrollbar-width: none; }
.s-en-tete nav a { display: block; padding: var(--esp-1) 0; color: var(--c-texte-2); text-decoration: none; white-space: nowrap; }
.s-en-tete nav a:hover, .s-en-tete nav a[aria-current] { color: var(--c-texte); text-decoration: underline; text-underline-offset: .3em; }
.s-en-tete .appel { flex: 0 1 auto; min-width: 0; }
.s-en-tete.v-b .conteneur { flex-wrap: wrap; justify-content: center; text-align: center; }
.s-en-tete.v-b .marque { width: 100%; justify-content: center; }
.s-en-tete.v-b nav { flex: 0 1 auto; min-width: 0; max-width: 100%; }
.s-en-tete.v-b ul { justify-content: safe center; }
@media (max-width: 720px) {
  .s-en-tete .conteneur { flex-wrap: wrap; gap: var(--esp-2); }
  .s-en-tete nav { order: 3; flex-basis: 100%; }
  .s-en-tete .appel { margin-left: auto; }
}

/* Haut de page */
.s-haut-de-page { padding-block: var(--esp-7); }
.s-haut-de-page .conteneur { display: grid; gap: var(--esp-6); align-items: center; }
.s-haut-de-page h1 { font-family: var(--police-titre); font-size: var(--t-6); line-height: 1.05; margin: 0; }
.s-haut-de-page .sous-titre { font-size: var(--t-4); color: var(--c-texte-2); max-width: 38ch; margin: var(--esp-3) 0 0; }
.s-haut-de-page .btn { margin-top: var(--esp-5); max-width: 100%; overflow-wrap: anywhere; }
.s-haut-de-page .visuel { margin: 0; aspect-ratio: 4 / 5; border-radius: var(--rayon); overflow: hidden; background: var(--c-surface); }
.s-haut-de-page .visuel img { width: 100%; height: 100%; object-fit: cover; display: block; }
@media (min-width: 860px) {
  .s-haut-de-page.v-a .conteneur { grid-template-columns: 1.1fr .9fr; }
}
.s-haut-de-page.v-b { position: relative; padding: 0; }
.s-haut-de-page.v-b .conteneur { display: grid; min-height: min(86vh, 760px); padding-block: var(--esp-7); align-content: end; }
.s-haut-de-page.v-b .visuel { position: absolute; inset: 0; aspect-ratio: auto; border-radius: 0; z-index: 0; }
.s-haut-de-page.v-b .visuel::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, var(--c-voile), transparent 70%); }
.s-haut-de-page.v-b .texte { position: relative; z-index: 1; }
/* texte clair seulement quand une photo et son voile sont dessous */
.s-haut-de-page.v-b:has(.visuel) .texte, .s-haut-de-page.v-b:has(.visuel) h1 { color: inherit; }
.s-haut-de-page.v-b:has(.visuel) .texte { color: var(--c-sur-voile); }
.s-haut-de-page.v-b:has(.visuel) .sous-titre { color: inherit; opacity: .9; }

/* Présentation */
.s-presentation .conteneur { display: grid; gap: var(--esp-6); align-items: center; }
.s-presentation .texte p { max-width: 62ch; color: var(--c-texte-2); }
.s-presentation .visuel { margin: 0; aspect-ratio: 4 / 3; border-radius: var(--rayon); overflow: hidden; background: var(--c-surface); }
.s-presentation .visuel img { width: 100%; height: 100%; object-fit: cover; display: block; }
@media (min-width: 860px) { .s-presentation.v-a .conteneur { grid-template-columns: 1fr 1fr; } }
.s-presentation.v-b .texte { max-width: 52rem; }
.s-presentation.v-b .accroche p { font-family: var(--police-titre); font-size: var(--t-5); line-height: 1.25; color: var(--c-texte); max-width: none; }

/* Prestations et tarifs */
.s-prestations .elements { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--esp-3); }
.s-prestations .ligne { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: var(--esp-3); }
.s-prestations h3 { font-size: var(--t-4); margin: 0; min-width: 0; flex: 1 1 10rem; }
.s-prestations .prix { flex: 0 1 auto; min-width: 0; font-weight: 600; color: var(--c-principale); overflow-wrap: anywhere; }
.s-prestations .element p { margin: var(--esp-1) 0 0; color: var(--c-texte-2); }
.s-prestations.v-a .elements { grid-template-columns: repeat(auto-fill, minmax(min(100%, 16rem), 1fr)); }
.s-prestations.v-a .element { padding: var(--esp-4); background: var(--c-surface); border: 1px solid var(--c-ligne); border-radius: var(--rayon); }
.s-prestations.v-b .elements { gap: 0; max-width: 46rem; }
.s-prestations.v-b .element { padding-block: var(--esp-3); border-bottom: 1px dashed var(--c-ligne); }

/* Galerie */
.s-galerie .photos { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--esp-2); }
.s-galerie figure { margin: 0; }
.s-galerie img { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: var(--rayon); background: var(--c-surface); }
.s-galerie figcaption { font-size: var(--t-2); color: var(--c-texte-2); margin-top: var(--esp-1); }
.s-galerie.v-a .photos { grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); }
.s-galerie.v-a img { aspect-ratio: 1; }
.s-galerie.v-b .photos { grid-template-columns: repeat(2, 1fr); }
.s-galerie.v-b img { aspect-ratio: 4 / 5; }
@media (min-width: 860px) {
  .s-galerie.v-b .photos { grid-template-columns: repeat(3, 1fr); }
  .s-galerie.v-b li:nth-child(5n + 1) { grid-column: span 2; }
  .s-galerie.v-b li:nth-child(5n + 1) img { aspect-ratio: 8 / 5; }
}

/* Avis clients */
.s-avis .liste-avis { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--esp-3); }
.s-avis figure { margin: 0; height: 100%; padding: var(--esp-4); background: var(--c-surface); border-radius: var(--rayon); }
.s-avis blockquote { margin: 0; }
.s-avis blockquote p { margin: 0; overflow-wrap: break-word; hyphens: auto; }
.s-avis figcaption { margin-top: var(--esp-3); font-size: var(--t-2); color: var(--c-texte-2); }
.s-avis figcaption span { display: block; }
.s-avis.v-a .liste-avis { grid-template-columns: repeat(auto-fill, minmax(min(100%, 18rem), 1fr)); }
.s-avis.v-b li:first-child blockquote p { font-family: var(--police-titre); font-size: var(--t-5); line-height: 1.3; }
@media (min-width: 860px) { .s-avis.v-b .liste-avis { grid-template-columns: repeat(2, 1fr); } .s-avis.v-b li:first-child { grid-column: 1 / -1; } }

/* Horaires et accès */
.s-horaires .grille { display: grid; gap: var(--esp-5); }
.s-horaires table { border-collapse: collapse; width: 100%; max-width: 30rem; }
.s-horaires th, .s-horaires td { text-align: left; padding: var(--esp-2) 0; border-bottom: 1px solid var(--c-ligne); }
.s-horaires th { font-weight: 600; padding-right: var(--esp-4); }
.s-horaires .ferme td { color: var(--c-texte-2); }
.s-horaires .adresse { display: flex; gap: var(--esp-2); align-items: flex-start; font-weight: 600; margin-top: 0; }
.s-horaires .adresse i { margin-top: .2em; color: var(--c-principale); }
.s-horaires .precisions { color: var(--c-texte-2); }
.s-horaires .acces { display: flex; flex-wrap: wrap; gap: var(--esp-2); align-items: center; }
.s-horaires .acces p { flex-basis: 100%; margin: 0; min-width: 0; overflow-wrap: anywhere; }
.s-horaires .carte { flex-basis: 100%; display: flex; align-items: center; justify-content: center; gap: var(--esp-2); aspect-ratio: 16 / 9; max-height: 22rem; margin-top: var(--esp-2); border: 1px dashed var(--c-ligne); border-radius: var(--rayon); background: var(--c-surface); color: var(--c-texte-2); font: inherit; cursor: pointer; }
.s-horaires .carte:hover { color: var(--c-texte); border-color: var(--c-texte-2); }
.s-horaires iframe { flex-basis: 100%; width: 100%; aspect-ratio: 16 / 9; max-height: 22rem; margin-top: var(--esp-2); border: 0; border-radius: var(--rayon); }
@media (min-width: 860px) { .s-horaires.v-b .grille { grid-template-columns: 1fr 1fr; align-items: start; } }

/* Contact */
.s-contact .conteneur { display: grid; gap: var(--esp-6); }
.s-contact .intro p { color: var(--c-texte-2); max-width: 46ch; }
.s-contact .coordonnees { list-style: none; padding: 0; margin: var(--esp-4) 0 0; display: grid; gap: var(--esp-2); }
.s-contact .coordonnees li { display: flex; gap: var(--esp-2); align-items: center; overflow-wrap: anywhere; }
.s-contact .coordonnees i { color: var(--c-principale); }
.s-contact .formulaire { display: grid; gap: var(--esp-3); }
.s-contact label { display: grid; gap: var(--esp-1); font-weight: 600; }
.s-contact .facultatif { font-weight: 400; color: var(--c-texte-2); }
.s-contact input, .s-contact textarea { font: inherit; color: var(--c-texte); background: var(--c-fond); border: 1px solid var(--c-ligne); border-radius: var(--rayon); padding: var(--esp-2) var(--esp-3); width: 100%; }
.s-contact input:focus-visible, .s-contact textarea:focus-visible { outline: 2px solid var(--c-principale); outline-offset: 1px; }
.s-contact .consentement { display: flex; gap: var(--esp-2); align-items: flex-start; font-weight: 400; font-size: var(--t-2); color: var(--c-texte-2); }
.s-contact .consentement input { width: auto; margin-top: .25em; }
.s-contact .piege { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.s-contact .btn { justify-self: start; }
@media (min-width: 860px) { .s-contact.v-a .conteneur { grid-template-columns: 1fr 1.2fr; align-items: start; } }
.s-contact.v-b .conteneur { max-width: 40rem; }

/* état de l'envoi du formulaire */
.s-contact .etat-envoi:empty{display:none}
.s-contact .etat-envoi,.s-contact .merci{margin:0;font-weight:600}

/* Actualités */
.s-actualites .articles { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--esp-5); max-width: 52rem; }
.s-actualites article { display: grid; gap: var(--esp-3); }
.s-actualites article > * { min-width: 0; overflow-wrap: anywhere; }
.s-actualites time { font-size: var(--t-2); color: var(--c-texte-2); }
.s-actualites h3 { font-size: var(--t-4); margin: var(--esp-1) 0; }
.s-actualites p { color: var(--c-texte-2); margin: 0 0 var(--esp-2); }
.s-actualites figure { margin: 0; aspect-ratio: 3 / 2; border-radius: var(--rayon); overflow: hidden; background: var(--c-surface); }
.s-actualites figure img { width: 100%; height: 100%; object-fit: cover; display: block; }
@media (min-width: 720px) { .s-actualites.v-a article:has(figure) { grid-template-columns: 14rem 1fr; } }
.s-actualites.v-b .articles { gap: 0; border-left: 2px solid var(--c-ligne); }
.s-actualites.v-b li { position: relative; padding: 0 0 var(--esp-5) var(--esp-4); }
.s-actualites.v-b li::before { content: ""; position: absolute; left: -7px; top: .4em; width: 12px; height: 12px; border-radius: 50%; background: var(--c-principale); }

/* Questions fréquentes */
.s-faq .questions { max-width: 46rem; border-top: 1px solid var(--c-ligne); }
.s-faq details { border-bottom: 1px solid var(--c-ligne); }
.s-faq summary { display: flex; justify-content: space-between; align-items: center; gap: var(--esp-3); padding-block: var(--esp-3); cursor: pointer; font-weight: 600; list-style: none; overflow-wrap: anywhere; }
.s-faq summary::-webkit-details-marker { display: none; }
.s-faq summary i { flex: none; transition: transform .2s ease; }
.s-faq details[open] summary i { transform: rotate(45deg); }
.s-faq .reponse { padding-bottom: var(--esp-3); color: var(--c-texte-2); }
.s-faq .reponse p { margin: 0 0 var(--esp-2); }
@media (min-width: 860px) { .s-faq.v-b .conteneur { display: grid; grid-template-columns: 1fr 2fr; gap: var(--esp-6); align-items: start; } }

/* Pied de page */
.s-pied-de-page { margin-top: var(--esp-7); padding-block: var(--esp-6); background: var(--c-surface); border-top: 1px solid var(--c-ligne); font-size: var(--t-2); color: var(--c-texte-2); }
.s-pied-de-page .conteneur { display: flex; flex-wrap: wrap; gap: var(--esp-4) var(--esp-6); justify-content: space-between; }
.s-pied-de-page p { margin: 0; }
.s-pied-de-page .conteneur > * { min-width: 0; max-width: 100%; overflow-wrap: anywhere; }
.s-pied-de-page .nom { font-family: var(--police-titre); font-weight: 700; color: var(--c-texte); }
.s-pied-de-page ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--esp-2) var(--esp-4); }
.s-pied-de-page a { color: inherit; }
.s-pied-de-page a:hover { color: var(--c-texte); }
.s-pied-de-page.v-b .conteneur { flex-direction: column; }
.s-pied-de-page.v-b .nom { font-size: var(--t-6); line-height: 1; overflow-wrap: anywhere; }

/* Haut de page ECE : fond blanc, titre net, photo du rouleau bleu */
.s-ouverture { padding-block: var(--esp-5) var(--esp-6); background: var(--c-fond); }
.s-ouverture .conteneur { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: var(--esp-6); align-items: center; }
.s-ouverture .surtitre { display: inline-flex; align-items: center; gap: var(--esp-2); margin: 0 0 var(--esp-3); font-size: var(--t-2); font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--c-texte-2); }
/* le coup de rouleau du logo, en petit */
.s-ouverture .surtitre::before { content: ""; width: 2.5rem; height: .55rem; background: var(--c-accent); border-radius: var(--rayon); }
.s-ouverture h1 { font-size: clamp(2.5rem, 1.2rem + 3.6vw, 4.4rem); line-height: 1.02; margin: 0; max-width: 15ch; }
.s-ouverture .sous-titre { font-size: var(--t-4); line-height: 1.5; color: var(--c-texte-2); margin: var(--esp-3) 0 0; max-width: 38ch; }
.s-ouverture .actions { display: flex; flex-wrap: wrap; gap: var(--esp-2); margin-top: var(--esp-4); }
.s-ouverture .mention { display: flex; align-items: center; gap: var(--esp-1); margin: var(--esp-4) 0 0; font-size: var(--t-2); color: var(--c-texte-2); }
.s-ouverture .mention .ph { color: var(--c-accent); }
.s-ouverture .visuel { margin: 0; position: relative; }
.s-ouverture .visuel img { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; object-position: 70% 50%; border-radius: var(--rayon); }
/* les carrés du logo, en bandeau sous la photo */
.s-ouverture .visuel::after { content: ""; position: absolute; left: var(--esp-3); right: var(--esp-3); bottom: calc(-1 * var(--esp-2)); height: var(--esp-2);
  background: linear-gradient(90deg, var(--c-metier-1) 0 16.66%, var(--c-metier-2) 0 33.33%, var(--c-metier-3) 0 50%, var(--c-metier-4) 0 66.66%, var(--c-metier-5) 0 83.33%, var(--c-metier-6) 0); }

/* Variante b : photo plein écran, titre blanc par-dessus */
.s-ouverture.v-b { position: relative; padding: 0; color: var(--c-sur-voile); overflow: hidden; }
.s-ouverture.v-b .conteneur { grid-template-columns: 1fr; min-height: min(86vh, 760px); align-content: end; padding-block: var(--esp-7) var(--esp-6); }
.s-ouverture.v-b > .conteneur { animation: none !important; }
.s-ouverture.v-b .texte { position: relative; z-index: 1; }
.s-ouverture.v-b .visuel { position: absolute; inset: 0; z-index: 0; }
.s-ouverture.v-b .visuel img { height: 100%; aspect-ratio: auto; border-radius: 0; }
.s-ouverture.v-b .visuel::after { inset: 0; height: auto; background: linear-gradient(to top, var(--c-voile) 20%, rgb(20 20 20 / .25)); }
.s-ouverture.v-b h1, .s-ouverture.v-b .surtitre, .s-ouverture.v-b .sous-titre, .s-ouverture.v-b .mention { color: inherit; }
.s-ouverture.v-b .btn-2 { color: inherit; border-color: rgb(255 255 255 / .6); }

@media (max-width: 860px) {
  .s-ouverture .conteneur { grid-template-columns: 1fr; gap: var(--esp-5); }
  .s-ouverture .visuel img { aspect-ratio: 4 / 3; }
}
@media (max-width: 600px) {
  .s-ouverture { padding-top: var(--esp-4); }
  .s-ouverture h1 { font-size: clamp(2.1rem, 10vw, 2.8rem); }
  .s-ouverture .conteneur { gap: var(--esp-4); }
  .s-ouverture .visuel img { aspect-ratio: 2 / 1; }
  .s-ouverture .actions > * { flex: 1 1 100%; justify-content: center; }
}

/* Avant / après au rouleau : la signature d'ECE travaux */
.s-rouleau { background: var(--c-surface); padding-block: var(--esp-6) var(--esp-7); }
.s-rouleau .tete { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--esp-2) var(--esp-6); align-items: end; margin-bottom: var(--esp-4); }
.s-rouleau .tete .titre-section { margin: 0; }
.s-rouleau .intro { margin: 0; color: var(--c-texte-2); max-width: 44ch; }
.s-rouleau .choix { position: absolute; opacity: 0; pointer-events: none; }

/* onglets */
.s-rouleau .onglets { display: flex; flex-wrap: wrap; gap: var(--esp-1); margin-bottom: var(--esp-3); }
.s-rouleau .onglets label { padding: .6rem 1.1rem; border: 1px solid var(--c-ligne); border-radius: var(--rayon); background: var(--c-fond); font-weight: 600; cursor: pointer; transition: background-color .2s ease, color .2s ease, border-color .2s ease; }
.s-rouleau .onglets label:hover { border-color: var(--c-texte); }
#rl-0:checked ~ .onglets [for="rl-0"], #rl-1:checked ~ .onglets [for="rl-1"], #rl-2:checked ~ .onglets [for="rl-2"], #rl-3:checked ~ .onglets [for="rl-3"],
#rl-4:checked ~ .onglets [for="rl-4"], #rl-5:checked ~ .onglets [for="rl-5"], #rl-6:checked ~ .onglets [for="rl-6"], #rl-7:checked ~ .onglets [for="rl-7"] { background: var(--c-principale); border-color: var(--c-principale); color: var(--c-sur-principale); }
#rl-0:focus-visible ~ .onglets [for="rl-0"], #rl-1:focus-visible ~ .onglets [for="rl-1"], #rl-2:focus-visible ~ .onglets [for="rl-2"], #rl-3:focus-visible ~ .onglets [for="rl-3"],
#rl-4:focus-visible ~ .onglets [for="rl-4"], #rl-5:focus-visible ~ .onglets [for="rl-5"], #rl-6:focus-visible ~ .onglets [for="rl-6"], #rl-7:focus-visible ~ .onglets [for="rl-7"] { outline: 2px solid var(--c-principale); outline-offset: 3px; }

/* un chantier visible à la fois */
.s-rouleau .chantier { display: none; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: var(--esp-4); align-items: start; }
#rl-0:checked ~ .chantiers .c-0, #rl-1:checked ~ .chantiers .c-1, #rl-2:checked ~ .chantiers .c-2, #rl-3:checked ~ .chantiers .c-3,
#rl-4:checked ~ .chantiers .c-4, #rl-5:checked ~ .chantiers .c-5, #rl-6:checked ~ .chantiers .c-6, #rl-7:checked ~ .chantiers .c-7 { display: grid; animation: rl-fondu .3s ease; }
@keyframes rl-fondu { from { opacity: 0; } to { opacity: 1; } }

/* la photo et le rouleau */
.s-rouleau .comparateur { --pos: 50%; position: relative; aspect-ratio: 4 / 3; overflow: hidden; border-radius: var(--rayon); background: var(--c-texte); touch-action: pan-y; cursor: ew-resize; user-select: none; -webkit-user-select: none; }
.s-rouleau .comparateur img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; display: block; pointer-events: none; -webkit-user-drag: none; }
.s-rouleau .apres { position: absolute; inset: 0; clip-path: inset(0 calc(100% - var(--pos)) 0 0); }
.s-rouleau .comparateur:has(.curseur:focus-visible) { outline: 2px solid var(--c-principale); outline-offset: 3px; }
.s-rouleau .curseur { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; pointer-events: none; }
.s-rouleau .etiquette { position: absolute; top: var(--esp-2); padding: .3rem .7rem; border-radius: var(--rayon); font-size: var(--t-1); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; background: rgb(20 20 20 / .72); color: #FFFFFF; }
.s-rouleau .e-apres { left: var(--esp-2); background: var(--c-principale); }
.s-rouleau .e-avant { right: var(--esp-2); }
.s-rouleau .poignee { position: absolute; top: 0; bottom: 0; left: var(--pos); width: 0; pointer-events: none; }
/* la bande de peinture fraîche, comme celle du rouleau du logo */
.s-rouleau .bande { position: absolute; top: 0; bottom: 0; left: -5px; width: 10px; background: var(--c-accent); box-shadow: 0 0 0 1px rgb(255 255 255 / .35), 0 0 18px rgb(0 0 0 / .25); }
.s-rouleau .tete-rouleau { position: absolute; top: 50%; left: 0; width: 3.5rem; height: 3.5rem; transform: translate(-50%, -50%); display: grid; place-items: center; border-radius: 50%; background: var(--c-accent); color: #FFFFFF; font-size: 1.6rem; box-shadow: 0 0 0 4px rgb(255 255 255 / .9), 0 6px 18px rgb(0 0 0 / .3); transition: transform .2s ease; }
.s-rouleau .comparateur.tire .tete-rouleau { transform: translate(-50%, -50%) scale(1.08); }
.s-rouleau .aide { position: absolute; top: calc(50% + 2.6rem); left: 0; transform: translateX(-50%); padding: .2rem .6rem; border-radius: var(--rayon); background: rgb(20 20 20 / .72); color: #FFFFFF; font-size: var(--t-1); font-weight: 600; white-space: nowrap; transition: opacity .3s ease; }
.s-rouleau .comparateur.touche .aide { opacity: 0; }

/* la fiche du chantier */
.s-rouleau .fiche { background: var(--c-fond); border: 1px solid var(--c-ligne); border-radius: var(--rayon); padding: var(--esp-4); }
.s-rouleau .fiche h3 { font-size: var(--t-4); margin: 0 0 var(--esp-1); }
.s-rouleau .lieu { display: flex; align-items: center; gap: var(--esp-1); margin: 0 0 var(--esp-2); color: var(--c-texte-2); font-size: var(--t-2); }
.s-rouleau .travaux { list-style: none; margin: var(--esp-2) 0 var(--esp-4); padding: 0; display: grid; gap: var(--esp-1); }
.s-rouleau .travaux li { display: grid; grid-template-columns: .75rem 1fr; gap: var(--esp-1); align-items: baseline; }
.s-rouleau .travaux li::before { content: ""; width: .75rem; height: .75rem; border-radius: 2px; background: var(--c-accent); transform: translateY(.1rem); }
.s-rouleau .note { margin: var(--esp-3) 0 0; font-size: var(--t-1); color: var(--c-texte-2); }

/* Variante b : photo sur toute la largeur, fiche dessous */
.s-rouleau.v-b .chantier { grid-template-columns: 1fr; }
.s-rouleau.v-b .comparateur { aspect-ratio: 16 / 9; }

@media (max-width: 860px) {
  .s-rouleau .tete { grid-template-columns: 1fr; }
  .s-rouleau .chantier { grid-template-columns: 1fr; gap: var(--esp-3); }
  .s-rouleau .comparateur { aspect-ratio: 4 / 3; }
  .s-rouleau .fiche { padding: var(--esp-3); }
  .s-rouleau .onglets { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .s-rouleau .onglets label { flex: 0 0 auto; padding: .55rem .85rem; }
}
@media (max-width: 600px) {
  .s-rouleau .onglets { flex-wrap: wrap; overflow: visible; }
  .s-rouleau .onglets label { flex: 1 1 auto; padding: .55rem .6rem; text-align: center; white-space: nowrap; font-size: var(--t-2); }
  .s-rouleau .comparateur { aspect-ratio: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .s-rouleau .chantier, .s-rouleau .tete-rouleau, .s-rouleau .aide { animation: none !important; transition: none; }
}

/* Métiers en carrés de couleur, d'après la rangée de carrés du logo */
.s-metiers .tete { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--esp-2) var(--esp-6); align-items: end; margin-bottom: var(--esp-5); }
.s-metiers .tete .titre-section { margin: 0; }
.s-metiers .intro { margin: 0; color: var(--c-texte-2); max-width: 44ch; }
.s-metiers .carres { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(10.5rem, 1fr)); gap: var(--esp-4) var(--esp-2); }
.s-metiers .carre { --fond: var(--c-metier-1); --encre: var(--c-texte); margin: 0; aspect-ratio: 1; display: flex; align-items: flex-end; padding: var(--esp-2); border-radius: var(--rayon); background: var(--fond); color: var(--encre); font-family: var(--police-titre); font-size: var(--t-4); font-weight: 700; line-height: 1.15; letter-spacing: -.01em; transition: transform .25s ease; }
.s-metiers li:nth-child(6n + 2) .carre { --fond: var(--c-metier-2); --encre: #FFFFFF; }
.s-metiers li:nth-child(6n + 3) .carre { --fond: var(--c-metier-3); --encre: #FFFFFF; }
.s-metiers li:nth-child(6n + 4) .carre { --fond: var(--c-metier-4); }
.s-metiers li:nth-child(6n + 5) .carre { --fond: var(--c-metier-5); }
.s-metiers li:nth-child(6n + 6) .carre { --fond: var(--c-metier-6); }
.s-metiers li:hover .carre { transform: translateY(-4px); }
.s-metiers .texte { margin: var(--esp-2) 0 0; font-size: var(--t-2); color: var(--c-texte-2); }

/* Variante b : liste, petit carré de couleur devant chaque métier */
.s-metiers.v-b .carres { grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr)); gap: var(--esp-4) var(--esp-5); }
.s-metiers.v-b .carre { aspect-ratio: auto; padding: 0; background: none; color: var(--c-texte); align-items: center; gap: var(--esp-2); }
.s-metiers.v-b .carre::before { content: ""; flex: 0 0 auto; width: 2.25rem; height: 2.25rem; border-radius: var(--rayon); background: var(--fond); }
.s-metiers.v-b li:hover .carre { transform: none; }

@media (max-width: 860px) {
  .s-metiers .tete { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
  .s-metiers .carres { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--esp-3) var(--esp-2); }
  .s-metiers .carre { font-size: var(--t-3); aspect-ratio: 4 / 3; }
}
@media (prefers-reduced-motion: reduce) { .s-metiers .carre { transition: none; } }

/* Étapes d'un chantier : numéros, reliés par la bande bleue du rouleau */
.s-etapes { background: var(--c-surface); }
.s-etapes .tete { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--esp-2) var(--esp-6); align-items: end; margin-bottom: var(--esp-5); }
.s-etapes .tete .titre-section { margin: 0; }
.s-etapes .intro { margin: 0; color: var(--c-texte-2); max-width: 44ch; }
.s-etapes .liste { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); gap: var(--esp-4); position: relative; }
.s-etapes .liste li { position: relative; padding-top: var(--esp-6); }
/* la bande du rouleau, d'une étape à l'autre */
.s-etapes .liste li::before { content: ""; position: absolute; top: 1.15rem; left: 0; right: calc(-1 * var(--esp-4)); height: 6px; background: var(--c-accent); border-radius: var(--rayon); }
.s-etapes .liste li:last-child::before { right: 0; }
.s-etapes .num { position: absolute; top: 0; left: 0; display: grid; place-items: center; width: 2.6rem; height: 2.6rem; border-radius: var(--rayon); background: var(--c-principale); color: var(--c-sur-principale); font-family: var(--police-titre); font-weight: 700; font-size: var(--t-2); }
.s-etapes h3 { font-size: var(--t-4); margin: 0 0 var(--esp-1); }
.s-etapes li p { margin: 0; color: var(--c-texte-2); font-size: var(--t-2); }

/* Variante b : l'une sous l'autre, trait vertical */
.s-etapes.v-b .liste { grid-template-columns: 1fr; max-width: 44rem; gap: var(--esp-4); }
.s-etapes.v-b .liste li { padding: 0 0 0 4rem; }
.s-etapes.v-b .liste li::before { top: 0; bottom: calc(-1 * var(--esp-4)); left: 1.1rem; right: auto; width: 6px; height: auto; }
.s-etapes.v-b .liste li:last-child::before { bottom: 0; }

@media (max-width: 860px) {
  .s-etapes .tete { grid-template-columns: 1fr; }
  .s-etapes .liste { grid-template-columns: 1fr; gap: var(--esp-4); }
  .s-etapes .liste li { padding: 0 0 0 4rem; }
  .s-etapes .liste li::before { top: 0; bottom: calc(-1 * var(--esp-4)); left: 1.1rem; right: auto; width: 6px; height: auto; }
  .s-etapes .liste li:last-child::before { bottom: 0; }
}

/* Votre projet en 3 clics */
.s-projet .tete { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--esp-2) var(--esp-6); align-items: end; margin-bottom: var(--esp-5); }
.s-projet .tete .titre-section { margin: 0; }
.s-projet .intro { margin: 0; color: var(--c-texte-2); max-width: 44ch; }
.s-projet .outil { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: var(--esp-5); align-items: start; }
.s-projet .questions { display: grid; gap: var(--esp-4); }
.s-projet .q { border: 0; margin: 0; padding: 0; min-width: 0; }
.s-projet legend { display: flex; align-items: center; gap: var(--esp-2); padding: 0; margin-bottom: var(--esp-2); font-family: var(--police-titre); font-weight: 700; font-size: var(--t-4); }
.s-projet legend { flex-wrap: wrap; }
.s-projet legend small { flex-basis: 100%; padding-left: calc(2rem + var(--esp-2)); margin-top: calc(-1 * var(--esp-2)); font-family: var(--police-texte); font-weight: 400; font-size: var(--t-2); color: var(--c-texte-2); }
.s-projet .n { display: grid; place-items: center; flex: 0 0 auto; width: 2rem; height: 2rem; border-radius: var(--rayon); background: var(--c-principale); color: var(--c-sur-principale); font-size: var(--t-2); }
.s-projet .puces { display: flex; flex-wrap: wrap; gap: var(--esp-1); }
.s-projet .puces label { position: relative; cursor: pointer; }
.s-projet .puces input, .s-projet .ne-sait-pas input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.s-projet .puces span { display: inline-flex; align-items: center; gap: var(--esp-1); padding: .6rem 1rem; border: 1px solid var(--c-ligne); border-radius: var(--rayon); background: var(--c-fond); font-weight: 600; transition: background-color .2s ease, border-color .2s ease, color .2s ease; }
.s-projet .puces label:hover span { border-color: var(--c-texte); }
.s-projet .puces input:checked + span { background: var(--c-principale); border-color: var(--c-principale); color: var(--c-sur-principale); }
.s-projet .puces input:focus-visible + span, .s-projet .ne-sait-pas input:focus-visible + span { outline: 2px solid var(--c-principale); outline-offset: 3px; }
/* les travaux cochés prennent les couleurs des carrés du logo */
.s-projet .q-travaux label:nth-child(6n + 1) input:checked + span { background: var(--c-metier-1); border-color: var(--c-metier-1); color: var(--c-texte); }
.s-projet .q-travaux label:nth-child(6n + 2) input:checked + span { background: var(--c-metier-2); border-color: var(--c-metier-2); color: #FFFFFF; }
.s-projet .q-travaux label:nth-child(6n + 3) input:checked + span { background: var(--c-metier-3); border-color: var(--c-metier-3); color: #FFFFFF; }
.s-projet .q-travaux label:nth-child(6n + 4) input:checked + span { background: var(--c-metier-4); border-color: var(--c-metier-4); color: var(--c-texte); }
.s-projet .q-travaux label:nth-child(6n + 5) input:checked + span { background: var(--c-metier-5); border-color: var(--c-metier-5); color: var(--c-texte); }
.s-projet .q-travaux label:nth-child(6n + 6) input:checked + span { background: var(--c-metier-6); border-color: var(--c-metier-6); color: var(--c-texte); }
.s-projet .q-travaux input:checked + span::before { content: "\2713"; font-weight: 700; }
.s-projet .reglette { display: flex; align-items: center; gap: var(--esp-3); max-width: 30rem; }
.s-projet .reglette input { flex: 1; accent-color: var(--c-principale); height: 2rem; }
.s-projet .reglette input:disabled { opacity: .35; }
.s-projet .valeur-surface { min-width: 4.5rem; font-family: var(--police-titre); font-weight: 700; font-size: var(--t-4); text-align: right; }
.s-projet .ne-sait-pas { position: relative; display: inline-flex; margin-top: var(--esp-1); cursor: pointer; }
.s-projet .ne-sait-pas span { display: inline-flex; align-items: center; gap: var(--esp-1); color: var(--c-texte-2); font-size: var(--t-2); }
.s-projet .ne-sait-pas span::before { content: ""; width: 1.1rem; height: 1.1rem; border: 1px solid var(--c-texte-2); border-radius: 3px; background: var(--c-fond); }
.s-projet .ne-sait-pas input:checked + span::before { background: var(--c-principale); border-color: var(--c-principale); box-shadow: inset 0 0 0 3px var(--c-fond); }

/* le résumé */
.s-projet .resume { position: sticky; top: 7rem; padding: var(--esp-4); border-radius: var(--rayon); background: var(--c-surface); border-top: 6px solid var(--c-accent); }
.s-projet .titre-resume { margin: 0 0 var(--esp-2); font-family: var(--police-titre); font-weight: 700; font-size: var(--t-4); }
.s-projet dl { margin: 0 0 var(--esp-4); display: grid; gap: var(--esp-2); }
.s-projet dl > div { display: grid; grid-template-columns: 5.5rem 1fr; gap: var(--esp-2); padding-bottom: var(--esp-2); border-bottom: 1px solid var(--c-ligne); }
.s-projet dt { color: var(--c-texte-2); font-size: var(--t-2); }
.s-projet dd { margin: 0; font-weight: 600; }
.s-projet .resume .btn { width: 100%; justify-content: center; }
.s-projet:not(.complet) .resume .btn { background: var(--c-texte-2); border-color: var(--c-texte-2); }
.s-projet .petit { margin: var(--esp-2) 0 0; font-size: var(--t-1); color: var(--c-texte-2); }
.s-projet .pret { display: flex; align-items: center; gap: var(--esp-1); margin: var(--esp-2) 0 0; font-weight: 600; color: var(--c-principale); }
.s-projet .pret[hidden] { display: none; }

/* Variante b : résumé sous les questions */
.s-projet.v-b .outil { grid-template-columns: 1fr; }
.s-projet.v-b .resume { position: static; max-width: 32rem; }

@media (max-width: 860px) {
  .s-projet .tete, .s-projet .outil { grid-template-columns: 1fr; }
  .s-projet .resume { position: static; }
}
@media (prefers-reduced-motion: reduce) { .s-projet .puces span { transition: none; } }

/* Barre d'appel : seulement sur téléphone, collée en bas de l'écran */
.s-barre-appel { display: none; }
@media (max-width: 720px) {
  .s-barre-appel { display: block; position: fixed; left: 0; right: 0; bottom: 0; z-index: 20; padding: var(--esp-1) 0 calc(var(--esp-1) + env(safe-area-inset-bottom)); background: var(--c-fond); border-top: 1px solid var(--c-ligne); box-shadow: 0 -6px 18px rgb(0 0 0 / .08); animation: none !important; }
  .s-barre-appel > .conteneur { animation: none !important; transform: none !important; opacity: 1 !important; }
  .s-barre-appel .conteneur { display: grid; grid-template-columns: 1.4fr 1fr; gap: var(--esp-1); }
  .s-barre-appel.v-b .conteneur { grid-template-columns: 1fr; }
  .s-barre-appel .btn, .s-barre-appel .btn-2 { justify-content: center; padding-block: .85rem; background-color: var(--c-fond); }
  .s-barre-appel .btn { background: var(--c-principale); }
  /* la barre ne cache jamais le bas de la page */
  body:has(.s-barre-appel) { padding-bottom: 4.5rem; }
}

/* Galerie qui défile : une bande de photos en boucle, lente et continue */
.s-galerie-defilante { overflow: hidden; }
.s-galerie-defilante .defilement { margin-inline: calc(50% - 50vw); overflow: hidden; }
.s-galerie-defilante .rail { display: flex; width: max-content; animation: gd-defile 60s linear infinite; }
.s-galerie-defilante .defilement:hover .rail, .s-galerie-defilante .defilement:active .rail { animation-play-state: paused; }
.s-galerie-defilante .bande { display: flex; gap: var(--esp-2); list-style: none; margin: 0; padding: 0 var(--esp-2) 0 0; }
.s-galerie-defilante figure { margin: 0; }
.s-galerie-defilante img { display: block; height: 18rem; width: auto; max-width: none; border-radius: var(--rayon); }
.s-galerie-defilante figcaption { margin-top: var(--esp-1); font-size: var(--t-2); color: var(--c-texte-2); }
.s-galerie-defilante.v-b img { height: 24rem; }
.s-galerie-defilante .n-1 .rail { animation-duration: 6s; }
.s-galerie-defilante .n-2 .rail { animation-duration: 12s; }
.s-galerie-defilante .n-3 .rail { animation-duration: 18s; }
.s-galerie-defilante .n-4 .rail { animation-duration: 24s; }
.s-galerie-defilante .n-5 .rail { animation-duration: 30s; }
.s-galerie-defilante .n-6 .rail { animation-duration: 36s; }
.s-galerie-defilante .n-7 .rail { animation-duration: 42s; }
.s-galerie-defilante .n-8 .rail { animation-duration: 48s; }
.s-galerie-defilante .n-9 .rail { animation-duration: 54s; }
.s-galerie-defilante .n-10 .rail { animation-duration: 60s; }
.s-galerie-defilante .n-11 .rail { animation-duration: 66s; }
.s-galerie-defilante .n-12 .rail { animation-duration: 72s; }
.s-galerie-defilante .n-13 .rail { animation-duration: 78s; }
.s-galerie-defilante .n-14 .rail { animation-duration: 84s; }
.s-galerie-defilante .n-15 .rail { animation-duration: 90s; }
.s-galerie-defilante .n-16 .rail { animation-duration: 96s; }
.s-galerie-defilante .n-17 .rail { animation-duration: 102s; }
.s-galerie-defilante .n-18 .rail { animation-duration: 108s; }
.s-galerie-defilante .n-19 .rail { animation-duration: 114s; }
.s-galerie-defilante .n-20 .rail { animation-duration: 120s; }
.s-galerie-defilante .n-21 .rail { animation-duration: 126s; }
.s-galerie-defilante .n-22 .rail { animation-duration: 132s; }
.s-galerie-defilante .n-23 .rail { animation-duration: 138s; }
.s-galerie-defilante .n-24 .rail { animation-duration: 144s; }
@keyframes gd-defile { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (max-width: 600px) { .s-galerie-defilante img { height: 13rem; } }
/* sans animation : on fait défiler la bande à la main, la copie disparaît */
@media (prefers-reduced-motion: reduce) {
  .s-galerie-defilante .defilement { overflow-x: auto; scroll-snap-type: x mandatory; }
  .s-galerie-defilante .rail { animation: none; }
  .s-galerie-defilante .bande[aria-hidden] { display: none; }
  .s-galerie-defilante li { scroll-snap-align: start; }
}

/* Contacts sur le côté : trois petits carrés collés au bord gauche, qui s'allongent au survol */
.s-contacts-lateraux { display: none; }
/* seulement quand la marge à gauche du contenu (72rem centrés) laisse la place aux carrés */
@media (min-width: 1240px) and (hover: hover) {
  .s-contacts-lateraux { display: block; position: fixed; left: 0; top: 50%; transform: translateY(-50%); z-index: 15; }
  .s-contacts-lateraux ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }
  .s-contacts-lateraux a { display: flex; align-items: center; height: 2.5rem; padding: 0 .65rem; border-radius: 0 var(--rayon) var(--rayon) 0;
    background: var(--c-principale); color: var(--c-sur-principale); text-decoration: none; font-size: var(--t-2); font-weight: 600; white-space: nowrap;
    box-shadow: 0 2px 8px rgb(0 0 0 / .12); transition: box-shadow .25s ease; }
  .s-contacts-lateraux.v-b a { background: var(--c-metier-2); }
  .s-contacts-lateraux .ph { font-size: 1.2rem; flex: 0 0 auto; }
  /* le texte est replié : il se déplie en douceur au survol ou au clavier */
  .s-contacts-lateraux span { display: inline-block; max-width: 0; overflow: hidden; opacity: 0; margin-left: 0;
    transition: max-width .35s cubic-bezier(.2, .7, .2, 1), opacity .25s ease, margin-left .35s cubic-bezier(.2, .7, .2, 1); }
  .s-contacts-lateraux a:hover span, .s-contacts-lateraux a:focus-visible span { max-width: 16rem; opacity: 1; margin-left: .6rem; }
  /* fine bande du bleu du logo au bord, au survol */
  .s-contacts-lateraux a:hover, .s-contacts-lateraux a:focus-visible { box-shadow: inset 4px 0 0 var(--c-accent), 0 2px 8px rgb(0 0 0 / .12); }
  .s-contacts-lateraux a:focus-visible { outline: 2px solid var(--c-texte); outline-offset: 2px; }
}
@media (prefers-reduced-motion: reduce) {
  .s-contacts-lateraux span, .s-contacts-lateraux a { transition: none; }
}

/* Bandeau de fermeture exceptionnelle */
.fermeture { background: var(--c-principale); color: var(--c-sur-principale); }
.fermeture .conteneur { display: flex; gap: var(--esp-2); align-items: center; padding-block: var(--esp-2); }
.fermeture p { margin: 0; font-weight: 600; }

/* Couleurs du client (remplies par /maquette). Texte sur la couleur principale : contraste 4,5:1 minimum. */
/* ECE travaux : couleurs relevées sur le logo, posées sur un site blanc et net. */
:root {
  --c-principale: #1A6CA6;   /* bleu du rouleau, assombri pour le texte blanc (5,6:1) */
  --c-accent: #249AD7;       /* bleu du rouleau tel quel : bande du rouleau, puces, jamais du texte */
  --c-sur-principale: #FFFFFF;
  --c-fond: #FFFFFF; --c-surface: #F3F3F1; --c-texte: #1E1E22; --c-texte-2: #5E5D63; --c-ligne: #E3E3E0;
  --c-voile: rgb(20 20 22 / .75); --c-sur-voile: #FFFFFF;
  /* les carrés du logo */
  --c-metier-1: #249AD7; --c-metier-2: #727177; --c-metier-3: #D61F5F;
  --c-metier-4: #D7DA31; --c-metier-5: #8EC047; --c-metier-6: #F18F06;
}
.s-en-tete { background: var(--c-fond); }
.s-en-tete .logo { height: 4.25rem; width: auto; }
@media (max-width: 720px) { .s-en-tete .logo { height: 3.5rem; } }
.titre-section { letter-spacing: -.03em; }
.s-presentation { background: var(--c-fond); }
.s-projet { background: var(--c-surface); }
.s-pied-de-page { background: var(--c-texte); color: #FFFFFF; }
.s-pied-de-page a, .s-pied-de-page .nom { color: inherit; }
/* bouton d'appel bien visible dans l'en-tête, toujours affiché (même sans numéro : « Être rappelé ») */
.s-en-tete .appel { margin-left: auto; padding: .85rem 1.4rem; font-size: var(--t-3); box-shadow: 0 0 0 4px rgb(36 154 215 / .18); }
.s-en-tete .appel .ph { font-size: 1.25em; }
@media (max-width: 720px) {
  html { scroll-padding-top: 7.5rem; }
  .s-en-tete .conteneur { padding-block: var(--esp-1) 0; row-gap: 0; }
  .s-en-tete .logo { height: 2.75rem; }
  .s-en-tete .appel { padding: .6rem .95rem; font-size: var(--t-2); }
  .s-en-tete .appel .numero { display: none; }
}
@media (max-width: 720px) { body:has(.s-barre-appel) { padding-bottom: 4.5rem; } }
/* derniers chantiers (si Eddie en publie depuis son admin) */
@media (min-width: 720px) { .s-actualites.v-a article:has(figure) { grid-template-columns: 22rem 1fr; align-items: center; } }
.s-actualites h3 { font-size: var(--t-5); letter-spacing: -.02em; }
/* pendant l'aperçu final, la barre de validation prend le bas de l'écran : la barre d'appel s'efface */
body:has(.apercu-barre) .s-barre-appel { display: none !important; }
/* prestations : 3 colonnes de tuiles larges aux couleurs du logo */
@media (min-width: 861px) { .s-metiers .carres { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--esp-2); } .s-metiers .carre { aspect-ratio: 5 / 2; } }
/* horaires et zone : la zone d'intervention passe devant l'adresse */
.s-horaires .acces { flex-direction: column; flex-wrap: nowrap; align-items: stretch; }
.s-horaires .acces > * { flex-basis: auto; width: 100%; }
.s-horaires .acces .carte, .s-horaires .acces iframe { width: 100%; height: auto; }
.s-horaires .precisions { order: -1; font-family: var(--police-titre); font-size: var(--t-4); font-weight: 700; color: var(--c-texte); line-height: 1.35; }
.s-horaires .adresse { font-weight: 400; color: var(--c-texte-2); font-size: var(--t-2); }
.s-horaires .acces .btn-2 { align-self: flex-start; width: auto; }
@media (min-width: 860px) { .s-horaires.v-b .grille { grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: var(--esp-6); } }
/* horaires et carte : la carte prend exactement la hauteur du tableau, les deux colonnes finissent ensemble */
@media (min-width: 860px) {
  .s-horaires.v-b .grille { align-items: stretch; }
  .s-horaires.v-b .acces { height: 100%; }
  .s-horaires.v-b .acces .carte, .s-horaires.v-b .acces iframe { flex: 1 1 auto; aspect-ratio: auto; max-height: none; min-height: 14rem; height: auto; }
}