/* Rénova Clean — feuille de style unique.
   Direction visuelle validée le 20/10/2026 : fond clair, structure nette, tuiles et cartes à bord fin
   (style « corporate », inspiré des sites de services aux entreprises). Mêmes couleurs que le logo.
   Couleurs : bleu et vert du logo, déclinés en variantes accessibles (contrastes vérifiés,
   voir LISEZMOI-interne.md). Polices hébergées : Bricolage Grotesque (titres), Figtree (texte). */

@font-face {
  font-family: 'Bricolage';
  src: url('/assets/fonts/bricolage-grotesque.woff2') format('woff2-variations');
  font-weight: 200 800;
  font-display: swap;
}
@font-face {
  font-family: 'Figtree';
  src: url('/assets/fonts/figtree.woff2') format('woff2-variations');
  font-weight: 300 900;
  font-display: swap;
}

:root {
  --encre: #0A2540;          /* texte principal, panneaux profonds */
  --encre-2: #3E4F60;        /* texte secondaire (8,4:1 sur blanc) */
  --bleu-900: #0A2540;
  --bleu-800: #0E3456;
  --bleu-700: #11487A;
  --bleu-600: #1766B0;       /* liens, surtitres (5,9:1 sur blanc) */
  --bleu-400: #3A93DD;       /* bleu du logo, décoratif */
  --bleu-200: #B9D9F2;
  --bleu-100: #E6F1FA;
  --vert-500: #8CC63F;       /* vert du logo : fonds de boutons (texte encre), accents sur fond sombre */
  --vert-600: #6FA82A;
  --vert-700: #3D7413;       /* vert lisible sur fond clair (5,3 à 5,7:1) */
  --vert-100: #EDF6E1;
  --fond: #F5F7F3;           /* sections alternées, sur un corps de page blanc */
  --papier: #FFFFFF;
  --ligne: #D5DDE3;
  --ligne-forte: #6E8091;    /* bordure des champs (4,1:1 sur blanc) */
  --erreur: #B3261E;
  --etoile: #F5B301;         /* étoiles des avis (décoratives, la note est écrite en toutes lettres) */
  --rayon: 22px;
  --rayon-petit: 12px;
  --rayon-carte: 18px;
  --ombre: 0 1px 2px rgb(10 37 64 / .06), 0 12px 32px -12px rgb(10 37 64 / .18);
  --gouttiere: clamp(16px, 4vw, 48px);
  --titres: 'Bricolage', 'Avenir Next', 'Segoe UI', system-ui, sans-serif;
  --texte: 'Figtree', 'Segoe UI', system-ui, -apple-system, sans-serif;
  --barre-mobile: 0px;
  --entete: 72px;
  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: calc(var(--entete) + 16px); }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body {
  margin: 0;
  font-family: var(--texte);
  font-size: clamp(1rem, .96rem + .2vw, 1.0875rem);
  line-height: 1.6;
  color: var(--encre);
  background: var(--papier);
  padding-bottom: var(--barre-mobile);
  overflow-x: clip;
}
img, svg, picture { display: block; max-width: 100%; }
img { height: auto; }
a { color: var(--bleu-600); text-underline-offset: .18em; text-decoration-thickness: 1px; }
a:hover { text-decoration-thickness: 2px; }
h1, h2, h3 { font-family: var(--titres); font-weight: 700; line-height: 1.08; letter-spacing: -.025em; margin: 0; text-wrap: balance; }
p { margin: 0 0 1em; text-wrap: pretty; }
ul, ol { margin: 0; padding: 0; }
button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid var(--bleu-600); outline-offset: 3px; border-radius: 4px; }
main:focus { outline: none; }

.conteneur { width: 100%; max-width: 1320px; margin-inline: auto; padding-inline: var(--gouttiere); }
.conteneur--etroit { max-width: 820px; }
.visuellement-cache { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.evitement { position: absolute; left: 12px; top: -60px; z-index: 100; background: var(--encre); color: #fff; padding: 10px 16px; border-radius: 8px; }
.evitement:focus { top: 12px; }
.icone { width: 1.1em; height: 1.1em; fill: currentColor; flex: none; }

/* Surtitre bleu, sans trait : le repère de chaque section */
.surtitre { font-family: var(--texte); font-weight: 700; font-size: .8rem; letter-spacing: .12em; text-transform: uppercase; color: var(--bleu-600); margin: 0 0 .8rem; }
.surtitre--clair { color: var(--vert-500); }
.titre-section { font-size: clamp(1.9rem, 1.2rem + 2.4vw, 3.1rem); margin-bottom: .5em; }
.titre-section--grand { font-size: clamp(2.3rem, 1.2rem + 3.6vw, 4.4rem); letter-spacing: -.03em; }
.titre-section--clair { color: #fff; }
.tete-section { max-width: 44em; margin-bottom: clamp(1.8rem, 3.5vw, 3rem); }
.tete-section__intro { color: var(--encre-2); font-size: 1.1rem; margin: 0; }
.pastille { display: inline-flex; align-items: center; gap: .5rem; padding: .4rem .9rem; border-radius: 999px; background: var(--bleu-100); color: var(--bleu-700); font-weight: 700; font-size: .85rem; margin: 0 0 1.4rem; }
.pastille::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--vert-500); flex: none; }
.etoiles { display: inline-flex; gap: 2px; vertical-align: middle; }
.etoiles svg { width: 17px; height: 17px; fill: var(--etoile); }

/* ------------------------------------------------------------ Boutons */
.bouton {
  --fond-b: var(--vert-500); --texte-b: var(--encre);
  display: inline-flex; align-items: center; justify-content: center; gap: .65rem;
  min-height: 52px; padding: .8rem 1.35rem; border-radius: 999px;
  font-weight: 700; font-size: 1rem; line-height: 1.2; text-decoration: none; text-align: center;
  background: var(--fond-b); color: var(--texte-b); border: 2px solid var(--fond-b);
  cursor: pointer; transition: background-color .2s, border-color .2s, color .2s, transform .2s;
}
.bouton:hover { text-decoration: none; transform: translateY(-1px); }
.bouton:active { transform: translateY(0); }
.bouton--plein:hover { --fond-b: #9FD254; }
.bouton--contour { --fond-b: transparent; --texte-b: var(--encre); border-color: var(--encre); }
.bouton--contour:hover { --fond-b: var(--encre); --texte-b: #fff; }
.bouton--clair { --fond-b: var(--vert-500); --texte-b: var(--encre); }
.bouton--clair:hover { --fond-b: #fff; border-color: #fff; }
.bouton--texte { --fond-b: transparent; --texte-b: var(--bleu-700); border-color: transparent; padding-inline: .6rem; text-decoration: underline; text-underline-offset: .2em; }
.bouton--texte:hover { --texte-b: var(--encre); transform: none; }
.bouton__fleche { width: 1.1em; height: 1.1em; position: relative; flex: none; }
.bouton__fleche::before { content: ""; position: absolute; inset: 0; background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M13.2 5.3 19.9 12l-6.7 6.7-1.4-1.4 4.3-4.3H4v-2h12.1l-4.3-4.3z'/%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'%3E%3Cpath d='M13.2 5.3 19.9 12l-6.7 6.7-1.4-1.4 4.3-4.3H4v-2h12.1l-4.3-4.3z'/%3E%3C/svg%3E") center/contain no-repeat;
  transition: transform .2s; }
.bouton:hover .bouton__fleche::before { transform: translateX(3px); }
.lien-fleche { font-weight: 700; color: var(--bleu-700); display: inline-flex; align-items: center; gap: .5rem; text-decoration: underline; text-underline-offset: .25em; }
.lien-fleche::after { content: "→"; text-decoration: none; transition: transform .2s; }
.lien-fleche:hover::after { transform: translateX(3px); }
.lien-fleche--clair { color: #fff; }

/* ------------------------------------------------------------ En-tête */
.entete { position: sticky; top: 0; z-index: 50; background: rgb(255 255 255 / .9); backdrop-filter: saturate(1.4) blur(14px); -webkit-backdrop-filter: saturate(1.4) blur(14px); border-bottom: 1px solid transparent; transition: border-color .3s, box-shadow .3s; }
.entete.est-defile { border-bottom-color: var(--ligne); }
.entete__barre { display: flex; align-items: center; gap: 1.5rem; min-height: var(--entete); }
.logo { display: inline-flex; flex-direction: column; text-decoration: none; line-height: 1; margin-right: auto; padding: 6px 0; }
.logo__mot { font-family: var(--titres); font-weight: 800; font-size: 1.55rem; letter-spacing: -.03em; white-space: nowrap; }
.logo__renova { color: var(--bleu-700); }
.logo__clean { color: var(--vert-700); }
.logo__image { height: 64px; width: 64px; align-self: flex-start; }
.logo__lieu { font-size: .68rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--encre-2); margin-top: .3rem; }
.navigation { display: flex; align-items: center; gap: 1.6rem; }
.navigation ul { display: flex; list-style: none; gap: .3rem; }
.navigation ul a { display: block; padding: .55rem .7rem; border-radius: 999px; color: var(--encre); text-decoration: none; font-weight: 600; font-size: .98rem; }
.navigation ul a:hover { background: var(--bleu-100); }
.navigation ul a[aria-current="page"] { background: var(--encre); color: #fff; }
.navigation__actions { display: flex; align-items: center; gap: 1rem; }
.entete__tel { font-weight: 700; color: var(--encre); text-decoration: none; white-space: nowrap; }
.entete__tel:hover { text-decoration: underline; }
.navigation__actions .bouton { min-height: 46px; padding: .6rem 1.1rem; }
.entete__menu { display: none; }

@media (max-width: 1180px) {
  .navigation ul a { padding: .5rem .5rem; font-size: .94rem; }
  .entete__tel { display: none; }
}
@media (max-width: 960px) {
  .avec-js .entete__menu {
    display: inline-flex; align-items: center; gap: .6rem; min-height: 46px; padding: 0 1rem;
    border: 2px solid var(--encre); border-radius: 999px; background: transparent; font-weight: 700; cursor: pointer;
  }
  .entete__menu-traits, .entete__menu-traits::before, .entete__menu-traits::after { display: block; width: 18px; height: 2px; background: currentColor; border-radius: 2px; position: relative; transition: transform .25s, background-color .25s; }
  .entete__menu-traits::before, .entete__menu-traits::after { content: ""; position: absolute; left: 0; }
  .entete__menu-traits::before { top: -6px; }
  .entete__menu-traits::after { top: 6px; }
  .entete__menu[aria-expanded="true"] .entete__menu-traits { background: transparent; }
  .entete__menu[aria-expanded="true"] .entete__menu-traits::before { transform: translateY(6px) rotate(45deg); }
  .entete__menu[aria-expanded="true"] .entete__menu-traits::after { transform: translateY(-6px) rotate(-45deg); }
  .avec-js .navigation {
    position: fixed; inset: var(--entete) 0 auto 0; max-height: calc(100dvh - var(--entete)); overflow-y: auto;
    flex-direction: column; align-items: stretch; gap: 1.2rem; padding: 1.2rem var(--gouttiere) 2rem;
    background: var(--papier); border-bottom: 1px solid var(--ligne); box-shadow: var(--ombre);
    visibility: hidden; opacity: 0; transform: translateY(-8px); transition: opacity .2s, transform .2s, visibility 0s .2s;
  }
  .avec-js .navigation.est-ouverte { visibility: visible; opacity: 1; transform: none; transition: opacity .2s, transform .2s; }
  .avec-js .navigation ul { flex-direction: column; gap: 0; }
  .avec-js .navigation ul a { font-family: var(--titres); font-size: 1.6rem; font-weight: 700; padding: .7rem 0; border-radius: 0; border-bottom: 1px solid var(--ligne); }
  .avec-js .navigation ul a:hover, .avec-js .navigation ul a[aria-current="page"] { background: none; color: var(--bleu-700); }
  .navigation__actions { flex-direction: column; align-items: stretch; }
  .avec-js .entete__tel { display: block; font-size: 1.25rem; padding: .4rem 0; }
  /* Sans JavaScript : la navigation reste visible sous le logo */
  .sans-js .entete__barre { flex-wrap: wrap; padding-block: .6rem; }
  .sans-js .navigation { width: 100%; flex-wrap: wrap; gap: .6rem; }
  .sans-js .navigation ul { flex-wrap: wrap; }
}

/* ------------------------------------------------------------ Cadre « vitre » (photo réelle, ou scène dessinée en attendant) */
.vitre { margin: 0; position: relative; }
.vitre__cadre {
  position: relative; overflow: hidden; border-radius: var(--rayon); aspect-ratio: 4 / 3;
  background: var(--bleu-100); isolation: isolate;
  box-shadow: inset 0 0 0 1px rgb(10 37 64 / .1);
}
.vitre__cadre > .scene, .vitre__cadre > picture, .vitre__cadre > picture img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.vitre__buee { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; pointer-events: none; }
.vitre__passage { stroke-dasharray: 1 1; stroke-dashoffset: 1; }
@media (prefers-reduced-motion: no-preference) {
  .vitre__passage { animation: raclette 2.4s .5s cubic-bezier(.65, .05, .25, 1) forwards; }
}
@media (prefers-reduced-motion: reduce) { .vitre__passage { stroke-dashoffset: 0; } }
.vitre__passage--fixe, .anim .vitre__passage--fixe { stroke-dashoffset: 0; animation: none; }
@keyframes raclette { to { stroke-dashoffset: 0; } }
.vitre__lustre { position: absolute; inset: -20%; z-index: 2; pointer-events: none;
  background: linear-gradient(115deg, transparent 38%, rgb(255 255 255 / .28) 46%, transparent 54%);
  transform: translateX(-30%); transition: transform 1.1s cubic-bezier(.2, .7, .2, 1); }
.vitre:hover .vitre__lustre { transform: translateX(30%); }
@media (prefers-reduced-motion: reduce) { .vitre__lustre { display: none; } }
.vitre figcaption { font-size: .88rem; color: var(--encre-2); margin-top: .6rem; }
.vitre--hero .vitre__cadre { aspect-ratio: 5 / 4.4; border-radius: 28px; box-shadow: inset 0 0 0 1px rgb(10 37 64 / .1), var(--ombre); }
.vitre--tete .vitre__cadre { aspect-ratio: 4 / 3.4; border-radius: 28px; }
.vitre--haute .vitre__cadre { aspect-ratio: 4 / 3; }
.vitre--portrait .vitre__cadre { aspect-ratio: 4 / 5; border-radius: 28px; }

/* ------------------------------------------------------------ Accueil : hero */
.hero { padding: clamp(1.5rem, 4vw, 4rem) 0 clamp(2rem, 4vw, 3.5rem); }
.hero__grille { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: clamp(2rem, 5vw, 5rem); align-items: center; }
.hero__titre { font-size: clamp(2.3rem, 1.2rem + 3.6vw, 4.4rem); line-height: 1.04; letter-spacing: -.03em; margin-bottom: 1.4rem; }
.hero__intro { font-size: clamp(1.05rem, 1rem + .35vw, 1.25rem); color: var(--encre-2); max-width: 36em; margin-bottom: 1.8rem; }
.hero__actions { display: flex; flex-wrap: wrap; gap: .8rem; margin-bottom: 1.6rem; }
.hero__preuve { margin: 0; display: flex; align-items: center; flex-wrap: wrap; gap: .5rem; color: var(--encre-2); font-size: .98rem; }
.hero__preuve strong { color: var(--encre); }
.hero__preuve-date { font-size: .85rem; }
.hero__visuel { position: relative; }
.hero__carte { position: absolute; left: -6%; bottom: 8%; z-index: 4; max-width: 300px; background: var(--papier); border: 1px solid var(--ligne); border-radius: 16px; padding: 1rem 1.2rem; box-shadow: var(--ombre); }
.hero__carte p { margin: 0; font-size: .92rem; color: var(--encre-2); }
.hero__carte-titre { font-family: var(--titres); font-weight: 700; font-size: 1.05rem; color: var(--encre) !important; margin-bottom: .25rem !important; display: flex; align-items: center; gap: .5rem; }
.hero__carte-titre::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--vert-500); box-shadow: 0 0 0 4px var(--vert-100); flex: none; }

@media (max-width: 899px) {
  .hero__grille { grid-template-columns: 1fr; }
  .hero__visuel { margin-top: .5rem; }
  .vitre--hero .vitre__cadre { aspect-ratio: 4 / 3; border-radius: 22px; }
  .hero__carte { position: static; max-width: none; margin-top: 1rem; }
}
@media (max-width: 479px) {
  .hero__actions .bouton { width: 100%; }
}

/* ------------------------------------------------------------ Accueil : repères (tuiles) */
.preuves { padding: 0 0 clamp(3rem, 6vw, 5rem); }
.preuves__grille { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; }
.preuve { background: var(--papier); border: 1px solid var(--ligne); border-radius: 16px; padding: 1.3rem 1.5rem; }
.preuve strong { display: block; font-family: var(--titres); font-size: 1.75rem; letter-spacing: -.02em; line-height: 1.1; margin-bottom: .3rem; }
.preuve__sur { font-size: 1rem; color: var(--encre-2); font-weight: 600; margin-left: .1rem; }
.preuve > span { color: var(--encre-2); font-size: .93rem; }
@media (max-width: 899px) { .preuves__grille { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .preuves__grille { grid-template-columns: 1fr; } }

/* ------------------------------------------------------------ Accueil : pour qui (segments) */
.segments { padding: clamp(3rem, 6vw, 5rem) 0; background: var(--fond); }
.segments__grille { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; }
.segment { display: flex; flex-direction: column; gap: .5rem; background: var(--papier); border: 1px solid var(--ligne); border-radius: var(--rayon-carte); padding: 1.5rem; color: inherit; text-decoration: none; transition: border-color .2s, box-shadow .2s, transform .2s; }
.segment:hover { border-color: var(--bleu-400); box-shadow: var(--ombre); transform: translateY(-2px); }
.segment__titre { font-size: 1.25rem; }
.segment__qui { color: var(--encre-2); font-size: .95rem; margin: 0; }
.segment__promesse { margin: 0; flex: 1; font-size: .98rem; }
.segment .lien-fleche { margin-top: .6rem; }
@media (max-width: 899px) { .segments__grille { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .segments__grille { grid-template-columns: 1fr; } }

/* ------------------------------------------------------------ Avis Google (module connecté à l'API officielle) */
.avis { padding: clamp(3rem, 6vw, 5rem) 0; background: var(--fond); }
.avis__tete { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 1rem; margin-bottom: 2rem; }
.avis__titre { font-size: clamp(1.8rem, 1.2rem + 2vw, 2.8rem); }
.avis__note { margin: 0; font-weight: 700; font-size: 1.1rem; }
.avis__liste { list-style: none; display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1rem; }
.avis__item { background: var(--papier); border: 1px solid var(--ligne); border-radius: var(--rayon-carte); padding: 1.4rem; display: flex; flex-direction: column; gap: .7rem; }
.avis__auteur { display: flex; align-items: center; gap: .7rem; font-weight: 700; }
.avis__auteur img { width: 36px; height: 36px; border-radius: 50%; }
.avis__etoiles { color: #A15C00; letter-spacing: .1em; }
.avis__texte { margin: 0; color: var(--encre-2); }
.avis__meta { font-size: .85rem; color: var(--encre-2); margin: 0; }
.avis__liens { margin: 1.5rem 0 0; display: flex; flex-wrap: wrap; gap: 1.2rem; align-items: center; }
.avis__attribution { font-family: Roboto, Arial, sans-serif; font-size: .9rem; color: #5E5E5E; }

/* ------------------------------------------------------------ Avis recopiés à la main (contenu/site.js, avisManuels) */
.temoignages { padding: clamp(3rem, 6vw, 5rem) 0; background: var(--fond); }
.temoignages__tete { display: flex; justify-content: space-between; align-items: end; gap: 2rem; flex-wrap: wrap; margin-bottom: 2rem; }
.temoignages__tete .titre-section { margin-bottom: 0; }
.note { display: flex; align-items: center; gap: 1rem; background: var(--papier); border: 1px solid var(--ligne); border-radius: 16px; padding: 1rem 1.4rem; line-height: 1.35; }
.note__chiffre { font-family: var(--titres); font-weight: 800; font-size: 3rem; letter-spacing: -.04em; line-height: 1; }
.note__chiffre span { font-size: 1.1rem; color: var(--encre-2); font-weight: 600; }
.note small { color: var(--encre-2); }
.temoignages__grille { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.temoignage { background: var(--papier); border: 1px solid var(--ligne); border-radius: var(--rayon-carte); padding: 1.6rem; display: flex; flex-direction: column; gap: 1rem; }
.temoignage__texte { flex: 1; margin: 0; }
.temoignage__pied { display: flex; align-items: center; gap: .8rem; }
.temoignage__pied small { display: flex; align-items: center; flex-wrap: wrap; gap: .4rem; color: var(--encre-2); font-size: .82rem; margin-top: .3rem; }
.temoignage__pied .etoiles svg { width: 13px; height: 13px; }
.avatar { width: 42px; height: 42px; border-radius: 50%; display: inline-grid; place-items: center; font-family: var(--titres); font-weight: 800; font-size: .95rem; color: var(--bleu-700); background: var(--bleu-100); flex: none; }
.temoignage:nth-child(3n + 2) .avatar { background: var(--vert-100); color: var(--vert-700); }
.temoignage:nth-child(3n) .avatar { background: var(--bleu-200); color: var(--encre); }
.temoignages__pied { display: flex; align-items: center; flex-wrap: wrap; gap: 1rem 1.5rem; margin: 1.6rem 0 0; color: var(--encre-2); font-size: .9rem; }
@media (max-width: 899px) { .temoignages__grille { grid-template-columns: 1fr; } }

/* ------------------------------------------------------------ Accueil : entretien régulier (rangées) */
.prestations { padding: clamp(3rem, 6vw, 5rem) 0 0; }
.rangees { display: grid; }
.rangee { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(2rem, 5vw, 5rem); align-items: center; padding: clamp(2rem, 4vw, 3.5rem) 0; border-top: 1px solid var(--ligne); }
.rangee--inverse .rangee__visuel { order: 2; }
.rangee__titre { font-size: clamp(1.6rem, 1.2rem + 1.4vw, 2.3rem); margin-bottom: .7rem; }
.rangee__accroche { font-size: 1.1rem; margin-bottom: 1rem; }
.rangee__frequence { color: var(--encre-2); font-size: .95rem; }
.rangee__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1.2rem; margin-top: 1.2rem; }
.rangee .vitre__cadre { aspect-ratio: 4 / 3; border-radius: 28px; }
@media (max-width: 899px) {
  .rangee { grid-template-columns: 1fr; }
  .rangee--inverse .rangee__visuel { order: 0; }
  .rangee .vitre__cadre { aspect-ratio: 16 / 10; border-radius: 22px; }
}

.coches { list-style: none; display: grid; gap: .45rem; margin: 0 0 1rem; }
.coches li { position: relative; padding-left: 1.9rem; }
.coches li::before { content: ""; position: absolute; left: 0; top: .2em; width: 1.2rem; height: 1.2rem; border-radius: 50%; background: var(--vert-100); box-shadow: inset 0 0 0 1.5px var(--vert-600); }
.coches li::after { content: ""; position: absolute; left: .42rem; top: .42em; width: .32rem; height: .6rem; border: solid var(--vert-700); border-width: 0 2px 2px 0; transform: rotate(45deg); }
.coches--clair li::before { background: rgb(140 198 63 / .16); box-shadow: inset 0 0 0 1.5px var(--vert-500); }
.coches--clair li::after { border-color: var(--vert-500); }

/* ------------------------------------------------------------ Accueil : interventions ponctuelles (bande claire) */
.ponctuel { padding: clamp(2rem, 4vw, 3rem) 0 clamp(3rem, 6vw, 5rem); }
.bande { background: var(--bleu-100); border-radius: 28px; padding: clamp(1.8rem, 4vw, 3.5rem); }
.cartes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.carte { background: var(--papier); border-radius: var(--rayon-carte); padding: 1.6rem; display: flex; flex-direction: column; gap: .6rem; }
.carte__titre { font-size: 1.25rem; }
.carte p { color: var(--encre-2); margin: 0; flex: 1; font-size: .98rem; }
.carte__icone { width: 48px; height: 48px; border-radius: 12px; background: var(--bleu-100); color: var(--bleu-700); display: grid; place-items: center; margin-bottom: .4rem; }
.carte__icone svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.ponctuel__autres { margin: clamp(1.6rem, 3vw, 2.4rem) 0 0; padding-top: 1.4rem; border-top: 1px solid rgb(10 37 64 / .12); color: var(--encre-2); }
.ponctuel__autres span { font-weight: 700; color: var(--encre); }
.ponctuel__autres a { font-weight: 700; margin-left: .3rem; }
@media (max-width: 899px) { .cartes { grid-template-columns: 1fr; } .bande { border-radius: 22px; } }

/* ------------------------------------------------------------ Déroulement (étapes numérotées) */
.deroulement { padding: clamp(3rem, 6vw, 5rem) 0; border-top: 1px solid var(--ligne); }
.deroulement__etapes { list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(1.2rem, 3vw, 2.5rem); }
.deroulement__num { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; border: 1.5px solid var(--encre); font-family: var(--titres); font-weight: 700; margin-bottom: 1rem; }
.deroulement__etape h3 { font-size: 1.15rem; margin-bottom: .5rem; }
.deroulement__etape p { color: var(--encre-2); margin: 0; font-size: .96rem; }
.deroulement__actions { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: clamp(2rem, 4vw, 3rem); }
@media (max-width: 899px) {
  .deroulement__etapes { grid-template-columns: 1fr; gap: 1.6rem; }
  .deroulement__etape { display: grid; grid-template-columns: 40px 1fr; gap: .2rem 1rem; align-items: start; }
  .deroulement__num { grid-row: span 2; margin: 0; }
}
@media (max-width: 560px) { .deroulement__actions .bouton { width: 100%; } }

/* ------------------------------------------------------------ Dirigeant, recrutement, réseaux */
.dirigeant { padding: clamp(3rem, 6vw, 5rem) 0; }
.dirigeant__grille { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(2rem, 5vw, 5rem); align-items: center; }
/* Sans portrait : le nom en grand dans un panneau sobre (jamais de photo de substitution) */
.dirigeant__nom-grand { display: flex; flex-direction: column; justify-content: end; aspect-ratio: 4 / 3.6; padding: clamp(1.4rem, 3vw, 2.4rem); border-radius: 28px; border: 1px solid var(--ligne); background: linear-gradient(160deg, var(--bleu-100), var(--fond));
  font-family: var(--titres); font-weight: 800; line-height: .9; letter-spacing: -.045em; font-size: clamp(2.6rem, 1.2rem + 4.6vw, 5.2rem); }
.dirigeant__nom-grand span:first-child { color: var(--bleu-700); }
.dirigeant__nom-grand span:last-child { color: var(--vert-700); }
.dirigeant__texte p:not(.surtitre):not(.dirigeant__contact) { font-size: 1.08rem; color: var(--encre-2); max-width: 36em; }
.dirigeant__contact { display: flex; flex-wrap: wrap; gap: .6rem 1.6rem; font-weight: 700; font-size: 1.1rem; }
.recrute { margin-top: 1.6rem; padding: 1.2rem 1.4rem; border: 1px solid var(--ligne); border-radius: 16px; display: flex; justify-content: space-between; align-items: center; gap: 1.5rem; flex-wrap: wrap; }
.recrute__titre { font-family: var(--titres); font-weight: 700; font-size: 1.1rem; color: var(--encre) !important; margin: 0 0 .2rem !important; }
.recrute p:not(.recrute__titre) { margin: 0 0 .4rem !important; font-size: .95rem !important; }
.recrute__hashtag { color: var(--vert-700); font-weight: 700; }
.reseaux { list-style: none; display: flex; gap: .5rem; }
.reseaux a { width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--ligne); color: var(--encre); display: grid; place-items: center; transition: background-color .2s; }
.reseaux a:hover { background: var(--bleu-100); }
.reseaux svg { width: 18px; height: 18px; fill: currentColor; }
.reseaux--pied { margin-top: 1rem; }
.reseaux--pied a { color: #fff; border-color: rgb(255 255 255 / .3); }
.reseaux--pied a:hover { background: rgb(255 255 255 / .12); }
@media (max-width: 899px) { .dirigeant__grille { grid-template-columns: 1fr; } .dirigeant__nom-grand { aspect-ratio: auto; min-height: 220px; } }

/* ------------------------------------------------------------ Zone d'intervention (liste de communes + carte stylisée) */
.zone { padding: clamp(3rem, 6vw, 5rem) 0; background: var(--fond); }
.zone__grille { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: clamp(2rem, 5vw, 5rem); align-items: center; }
.zone__texte { font-size: 1.05rem; color: var(--encre-2); max-width: 34em; }
.communes { display: flex; flex-wrap: wrap; gap: .5rem; list-style: none; margin: 0 0 1.4rem; }
.communes li { background: var(--papier); border: 1px solid var(--ligne); border-radius: 999px; padding: .35rem .85rem; font-weight: 600; font-size: .9rem; }
.communes li.est-siege { background: var(--encre); color: #fff; border-color: var(--encre); }
.zone__visuel { border-radius: 28px; overflow: hidden; border: 1px solid var(--ligne); background: #EEF3F7; }
.zone__carte { width: 100%; height: auto; display: block; }
@media (max-width: 899px) { .zone__grille { grid-template-columns: 1fr; } .zone__visuel { border-radius: 22px; } }

/* ------------------------------------------------------------ FAQ */
.faq { padding: clamp(3rem, 6vw, 5rem) 0; }
.faq__grille { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: clamp(2rem, 6vw, 6rem); align-items: start; }
.faq__appel { font-weight: 600; }
.faq__appel a { font-weight: 700; }
.faq__item { border-bottom: 1px solid var(--ligne); }
.faq__item:first-child { border-top: 1px solid var(--ligne); }
.faq__item summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: 1.25rem 0; font-family: var(--titres); font-weight: 650; font-size: clamp(1.1rem, 1rem + .4vw, 1.3rem); }
.faq__item summary::-webkit-details-marker { display: none; }
.faq__signe { width: 32px; height: 32px; border-radius: 50%; border: 1.5px solid var(--encre); position: relative; flex: none; transition: background-color .2s; }
.faq__signe::before, .faq__signe::after { content: ""; position: absolute; left: 50%; top: 50%; width: 12px; height: 2px; background: currentColor; transform: translate(-50%, -50%); transition: transform .25s; }
.faq__signe::after { transform: translate(-50%, -50%) rotate(90deg); }
.faq__item[open] .faq__signe { background: var(--vert-500); border-color: var(--vert-500); }
.faq__item[open] .faq__signe::after { transform: translate(-50%, -50%) rotate(0); }
.faq__item p { color: var(--encre-2); max-width: 40em; padding-bottom: 1.25rem; margin: 0; }
@media (max-width: 899px) { .faq__grille { grid-template-columns: 1fr; } }

/* ------------------------------------------------------------ Appel final */
.appel-final { background: var(--bleu-900); color: #fff; padding: clamp(3.5rem, 8vw, 7rem) 0; position: relative; overflow: hidden; }
.appel-final::before { content: ""; position: absolute; right: -10%; top: -40%; width: 70%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, rgb(58 147 221 / .35), transparent 65%); pointer-events: none; }
.appel-final__grille { position: relative; display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 2rem clamp(2rem, 6vw, 6rem); align-items: end; }
.appel-final__titre { font-size: clamp(2.2rem, 1.2rem + 3.6vw, 4.4rem); letter-spacing: -.035em; margin-bottom: 1.2rem; }
.appel-final__texte { color: rgb(255 255 255 / .86); font-size: 1.15rem; max-width: 32em; margin: 0; }
.appel-final__actions { display: flex; flex-direction: column; align-items: flex-start; gap: 1.2rem; }
.appel-final__tel { color: #fff; text-decoration: none; display: flex; flex-direction: column; }
.appel-final__tel-libelle { font-size: .8rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--vert-500); }
.appel-final__tel-numero { font-family: var(--titres); font-weight: 700; font-size: clamp(1.8rem, 1.3rem + 1.6vw, 2.6rem); letter-spacing: -.02em; }
.appel-final__tel:hover .appel-final__tel-numero { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: .15em; }
.appel-final__mail { color: rgb(255 255 255 / .9); }
.appel-final :focus-visible { outline-color: var(--vert-500); }
@media (max-width: 899px) { .appel-final__grille { grid-template-columns: 1fr; } }

/* ------------------------------------------------------------ Pied de page */
.pied { background: #071A2E; color: rgb(255 255 255 / .82); padding: clamp(3rem, 6vw, 5rem) 0 2rem; font-size: .95rem; }
.pied a { color: #fff; text-decoration: none; }
.pied a:hover { text-decoration: underline; }
.pied :focus-visible { outline-color: var(--vert-500); }
.pied__grille { display: grid; grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr)); gap: 2rem; }
.pied__logo { margin-bottom: .8rem; }
.pied__logo .logo__renova { color: #fff; }
.pied__logo .logo__clean { color: var(--vert-500); }
.pied__contact { font-weight: 700; font-size: 1.05rem; line-height: 1.9; }
.pied__titre { font-family: var(--texte); font-size: .8rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--vert-500); margin-bottom: 1rem; }
.pied__colonne ul:not(.reseaux) { list-style: none; display: grid; gap: .5rem; }
.pied__bas { margin-top: 3rem; padding-top: 1.5rem; border-top: 1px solid rgb(255 255 255 / .14); font-size: .85rem; color: rgb(255 255 255 / .7); }
.pied__bas p { margin: 0; }
@media (max-width: 899px) { .pied__grille { grid-template-columns: 1fr 1fr; } .pied__marque { grid-column: 1 / -1; } }
@media (max-width: 479px) { .pied__grille { grid-template-columns: 1fr; } }

/* ------------------------------------------------------------ Barre mobile */
.barre-mobile { display: none; }
@media (max-width: 899px) {
  :root { --barre-mobile: calc(68px + env(safe-area-inset-bottom, 0px)); }
  .barre-mobile {
    display: grid; grid-template-columns: 1fr 1fr; gap: 8px; position: fixed; z-index: 40; left: 0; right: 0; bottom: 0;
    padding: 8px var(--gouttiere) calc(8px + env(safe-area-inset-bottom, 0px)); background: rgb(255 255 255 / .96);
    border-top: 1px solid var(--ligne); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
    transition: transform .25s;
  }
  .barre-mobile a { display: flex; align-items: center; justify-content: center; gap: .5rem; min-height: 52px; border-radius: 999px; font-weight: 700; text-decoration: none; }
  .barre-mobile__appel { border: 2px solid var(--encre); color: var(--encre); }
  .barre-mobile__devis { background: var(--vert-500); color: var(--encre); }
  .barre-mobile--devis { grid-template-columns: 1fr; }
  .barre-mobile.est-masquee { transform: translateY(110%); }
}

/* ------------------------------------------------------------ Pages intérieures */
.fil { font-size: .88rem; margin-bottom: 1.5rem; }
.fil ol { list-style: none; display: flex; flex-wrap: wrap; gap: .4rem; }
.fil li + li::before { content: "/"; margin-right: .4rem; color: var(--encre-2); }
.fil a { color: var(--encre-2); }
.fil [aria-current] { color: var(--encre); font-weight: 600; }
.tete-page { padding: clamp(1.5rem, 3vw, 2.5rem) 0 clamp(3rem, 6vw, 5rem); }
.tete-page__grille { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: clamp(2rem, 5vw, 5rem); align-items: center; }
.tete-page__titre { font-size: clamp(2.2rem, 1.2rem + 3.4vw, 4.2rem); letter-spacing: -.03em; line-height: 1.04; margin-bottom: 1.4rem; }
.tete-page__intro { font-size: clamp(1.05rem, 1rem + .35vw, 1.25rem); color: var(--encre-2); max-width: 36em; margin-bottom: 2rem; }
.tete-page__texte .reseaux { margin-top: -.6rem; margin-bottom: 1.6rem; }
@media (max-width: 899px) { .tete-page__grille { grid-template-columns: 1fr; } .vitre--tete .vitre__cadre { aspect-ratio: 16 / 10; border-radius: 22px; } }

.sommaire { margin-bottom: clamp(2rem, 4vw, 3rem); }
.sommaire ul { list-style: none; display: flex; flex-wrap: wrap; gap: .5rem; }
.sommaire a { display: inline-block; padding: .55rem 1rem; border-radius: 999px; background: var(--papier); border: 1px solid var(--ligne); color: var(--encre); text-decoration: none; font-weight: 600; }
.sommaire a:hover { border-color: var(--encre); }

.details { display: grid; gap: clamp(3rem, 6vw, 6rem); padding-bottom: clamp(3rem, 7vw, 7rem); }
.detail { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(2rem, 5vw, 5rem); align-items: start; }
.detail--inverse .detail__visuel { order: 2; }
.detail__visuel { position: sticky; top: calc(var(--entete) + 24px); }
.detail__titre { font-size: clamp(1.8rem, 1.2rem + 2vw, 3rem); margin-bottom: .8rem; }
.detail__accroche { font-size: 1.2rem; }
.detail__infos { display: grid; gap: 1rem; margin: 1.5rem 0; padding: 1.2rem 0; border-block: 1px solid var(--ligne); }
.detail__infos dt { font-weight: 700; font-size: .8rem; letter-spacing: .12em; text-transform: uppercase; color: var(--bleu-600); }
.detail__infos dd { margin: .2rem 0 0; }
.detail__soustitre { font-size: 1.2rem; margin-bottom: .8rem; }
.detail__note { color: var(--encre-2); font-size: .95rem; margin-bottom: 1.5rem; }
.detail .vitre__cadre { border-radius: 28px; }
@media (max-width: 899px) { .detail { grid-template-columns: 1fr; } .detail--inverse .detail__visuel { order: 0; } .detail__visuel { position: static; } .detail .vitre__cadre { aspect-ratio: 16 / 10; border-radius: 22px; } }

.engagements { padding: clamp(3rem, 6vw, 5rem) 0; background: var(--fond); }
.engagements__grille { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; }
.engagements__grille > div { padding: 1.6rem; border-radius: var(--rayon-carte); background: var(--papier); border: 1px solid var(--ligne); }
.engagements__grille h3 { font-size: 1.25rem; margin-bottom: .6rem; }
.engagements__grille p { margin: 0; color: var(--encre-2); }
@media (max-width: 1023px) { .engagements__grille { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 479px) { .engagements__grille { grid-template-columns: 1fr; } }

.renvois { padding-bottom: clamp(3rem, 6vw, 5rem); }
.renvois__grille { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.renvoi { display: flex; flex-direction: column; gap: .8rem; padding: clamp(1.6rem, 3vw, 2.6rem); border-radius: var(--rayon); background: var(--vert-100); color: var(--encre); text-decoration: none; transition: transform .25s; }
.renvoi:hover { transform: translateY(-3px); }
.renvoi--sombre { background: var(--bleu-900); color: #fff; }
.renvoi__surtitre { font-size: .8rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--vert-700); }
.renvoi--sombre .renvoi__surtitre { color: var(--vert-500); }
.renvoi__titre { font-family: var(--titres); font-weight: 700; font-size: clamp(1.5rem, 1.1rem + 1.4vw, 2.2rem); line-height: 1.08; letter-spacing: -.02em; }
@media (max-width: 699px) { .renvois__grille { grid-template-columns: 1fr; } }

.autres { padding-bottom: clamp(3rem, 6vw, 5rem); max-width: 900px; }
.autres p { font-size: 1.1rem; color: var(--encre-2); }

.duo { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; padding-bottom: clamp(3rem, 6vw, 5rem); }
.duo__bloc { padding: clamp(1.6rem, 3.5vw, 3rem); border-radius: var(--rayon); background: var(--papier); border: 1px solid var(--ligne); display: flex; flex-direction: column; align-items: flex-start; }
.duo__bloc .coches { margin-bottom: 1.8rem; }
.duo__bloc .bouton { margin-top: auto; }
.duo__bloc--sombre { background: var(--bleu-900); border-color: var(--bleu-900); color: #fff; }
.duo__bloc--sombre :focus-visible { outline-color: var(--vert-500); }
@media (max-width: 899px) { .duo { grid-template-columns: 1fr; } }

.infos-utiles { padding: clamp(3rem, 6vw, 5rem) 0; background: var(--fond); }
.infos-utiles__grille { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); gap: 2rem clamp(2rem, 6vw, 6rem); }
.infos-utiles__liste { list-style: none; display: grid; gap: 1rem; }
.infos-utiles__liste li { padding: 1.1rem 0; border-bottom: 1px solid var(--ligne); font-size: 1.08rem; color: var(--encre-2); }
.infos-utiles__liste strong { color: var(--encre); }
@media (max-width: 899px) { .infos-utiles__grille { grid-template-columns: 1fr; } }

.message-page { padding: clamp(3rem, 8vw, 7rem) var(--gouttiere); max-width: 900px; }
.message-page p { font-size: 1.15rem; color: var(--encre-2); }

.texte-legal { padding-top: clamp(1.5rem, 3vw, 2.5rem); padding-bottom: clamp(3rem, 6vw, 5rem); }
.texte-legal h2 { font-size: 1.6rem; margin: 2.2rem 0 .8rem; }
.texte-legal p { color: var(--encre-2); }

/* ------------------------------------------------------------ Carrière */
.carriere { padding-bottom: clamp(3rem, 7vw, 6rem); }
.carriere__grille { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); gap: clamp(2rem, 6vw, 6rem); align-items: start; }
.carriere__postes { position: sticky; top: calc(var(--entete) + 24px); }
.postes { list-style: none; display: grid; gap: 1rem; margin-bottom: 2rem; }
.poste { background: var(--papier); border: 1px solid var(--ligne); border-radius: var(--rayon-carte); padding: 1.5rem; }
.poste__titre { font-size: 1.3rem; margin-bottom: .3rem; }
.poste__infos { color: var(--encre-2); font-size: .92rem; font-weight: 600; margin-bottom: .8rem; }
.poste__description { color: var(--encre-2); }
.postes__aucun { background: var(--bleu-100); border-radius: var(--rayon-carte); padding: 1.5rem; margin-bottom: 2rem; }
.postes__titre { font-size: 1.3rem; margin-bottom: .6rem; }
.postes__aucun p { margin: 0; }
.carriere__soustitre { font-size: 1.2rem; margin-bottom: .8rem; }
.carriere__infos .coches { margin-bottom: 0; }
@media (max-width: 899px) { .carriere__grille { grid-template-columns: 1fr; } .carriere__postes { position: static; } }

/* ------------------------------------------------------------ Réalisations (comparateur avant/après) */
.realisations { padding: clamp(3rem, 7vw, 6rem) 0; }
.realisations__liste { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 1.5rem; }
.comparateur { margin: 0; }
.comparateur__cadre { position: relative; overflow: hidden; border-radius: var(--rayon); aspect-ratio: 4 / 3; --position: 50%; }
.comparateur__cadre img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.comparateur__avant { position: absolute; inset: 0; clip-path: inset(0 calc(100% - var(--position)) 0 0); }
.comparateur__poignee { position: absolute; top: 0; bottom: 0; left: var(--position); width: 3px; background: #fff; transform: translateX(-50%); }
.comparateur__reglage input { width: 100%; margin-top: .8rem; accent-color: var(--bleu-600); min-height: 32px; }
.comparateur figcaption { color: var(--encre-2); }

/* ------------------------------------------------------------ Devis */
.devis { padding: clamp(1.5rem, 3vw, 2.5rem) 0 clamp(3rem, 7vw, 6rem); }
.devis__grille { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr); gap: clamp(2rem, 6vw, 6rem); align-items: start; }
.devis__intro { position: sticky; top: calc(var(--entete) + 24px); }
.devis__titre { font-size: clamp(2.2rem, 1.2rem + 3.4vw, 4.2rem); letter-spacing: -.03em; margin-bottom: 1rem; }
.devis__intro > p { font-size: 1.12rem; color: var(--encre-2); }
.devis__alternative a { font-weight: 700; }
.devis__suite { list-style: none; display: grid; gap: .8rem; margin-top: 2rem; padding-top: 1.5rem; border-top: 1px solid var(--ligne); counter-reset: suite; }
.devis__suite li { position: relative; padding-left: 2.6rem; color: var(--encre-2); counter-increment: suite; }
.devis__suite li::before { content: counter(suite); position: absolute; left: 0; top: -.1em; width: 1.8rem; height: 1.8rem; border-radius: 50%; background: var(--vert-100); color: var(--vert-700); font-weight: 800; display: grid; place-items: center; font-size: .9rem; }
.devis__formulaire { background: var(--papier); border: 1px solid var(--ligne); border-radius: var(--rayon); padding: clamp(1.2rem, 3.5vw, 3rem); box-shadow: var(--ombre); }
@media (max-width: 899px) { .devis__grille { grid-template-columns: 1fr; } .devis__intro { position: static; } .devis__suite { display: none; } }

.formulaire fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
.etape + .etape { margin-top: 2.5rem; padding-top: 2.5rem; border-top: 1px solid var(--ligne); }
.avec-js .etape + .etape { margin-top: 0; padding-top: 0; border-top: 0; }
.avec-js .formulaire.est-pas-a-pas .etape:not(.est-active) { display: none; }
.etape__titre { font-family: var(--titres); font-weight: 700; font-size: clamp(1.6rem, 1.2rem + 1.2vw, 2.2rem); letter-spacing: -.02em; margin-bottom: 1.4rem; padding: 0; display: flex; flex-direction: column; gap: .4rem; }
.etape__num { font-family: var(--texte); font-weight: 700; font-size: .78rem; letter-spacing: .12em; text-transform: uppercase; color: var(--bleu-600); }
.etape__titre:focus { outline: none; }
.groupe { margin-bottom: 1.6rem !important; }
.groupe__titre { font-weight: 700; margin-bottom: .7rem; padding: 0; }
.requis, .facultatif { font-weight: 500; font-size: .82rem; color: var(--encre-2); margin-left: .35rem; }
.choix-grille { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 230px), 1fr)); gap: .6rem; }
.choix-grille--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.choix-grille--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 479px) { .choix-grille--3 { grid-template-columns: 1fr; } }
.choix { position: relative; display: flex; align-items: center; gap: .75rem; min-height: 56px; padding: .7rem 1rem; border: 1.5px solid var(--ligne-forte); border-radius: var(--rayon-petit); background: var(--papier); cursor: pointer; transition: border-color .15s, background-color .15s, box-shadow .15s; }
.choix:hover { border-color: var(--encre); }
.choix input { appearance: none; -webkit-appearance: none; width: 22px; height: 22px; margin: 0; border-radius: 50%; border: 2px solid var(--ligne-forte); flex: none; display: grid; place-items: center; background: #fff; transition: border-color .15s; }
.choix input::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--bleu-700); transform: scale(0); transition: transform .15s; }
.choix input:checked { border-color: var(--bleu-700); }
.choix input:checked::before { transform: scale(1); }
.choix:has(input:checked) { border-color: var(--bleu-700); background: var(--bleu-100); box-shadow: inset 0 0 0 1px var(--bleu-700); }
.choix:has(input:focus-visible) { outline: 3px solid var(--bleu-600); outline-offset: 2px; }
.choix input:focus-visible { outline: none; }
.choix__libelle { font-weight: 600; line-height: 1.3; }
.choix[hidden] { display: none; }
.champ { margin-bottom: 1.4rem; }
.champ[hidden] { display: none; }
.champ__libelle { display: block; font-weight: 700; margin-bottom: .45rem; }
.champ__saisie { display: block; width: 100%; min-height: 52px; padding: .75rem 1rem; border: 1.5px solid var(--ligne-forte); border-radius: var(--rayon-petit); background: #fff; font-size: 1rem; transition: border-color .15s, box-shadow .15s; }
textarea.champ__saisie { min-height: 120px; resize: vertical; }
select.champ__saisie { appearance: none; -webkit-appearance: none; padding-right: 2.6rem; background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%230A2540'%3E%3Cpath d='M7 10l5 5 5-5z'/%3E%3C/svg%3E") right .7rem center/24px no-repeat; }
.champ__saisie:hover { border-color: var(--encre); }
.champ__saisie:focus { outline: none; border-color: var(--bleu-700); box-shadow: 0 0 0 3px rgb(23 102 176 / .3); }
.champ__saisie[aria-invalid="true"] { border-color: var(--erreur); box-shadow: 0 0 0 1px var(--erreur); }
.champ__aide { font-size: .9rem; color: var(--encre-2); margin: .4rem 0 0; }
.groupe--contact .champ__aide { margin: -.3rem 0 .9rem; }
.champ__erreur { color: var(--erreur); font-weight: 600; font-size: .92rem; margin: .45rem 0 0; display: flex; gap: .4rem; }
.champ__erreur::before { content: "!"; flex: none; width: 1.2rem; height: 1.2rem; border-radius: 50%; background: var(--erreur); color: #fff; font-size: .75rem; font-weight: 800; display: grid; place-items: center; margin-top: .1rem; }
.champ__erreur[hidden] { display: none; }
.piege { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.etape__nav { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 1rem; margin-top: 2rem; }
.etape__nav .bouton--plein { margin-left: auto; }
.sans-js .etape__nav [data-suivant], .sans-js .etape__nav [data-precedent] { display: none; }
.formulaire__rgpd { font-size: .9rem; color: var(--encre-2); margin-top: 1.4rem; }
.bouton--envoi[aria-busy="true"] { opacity: .75; cursor: progress; }
.bouton--envoi[aria-busy="true"] .bouton__fleche::before { -webkit-mask: none; mask: none; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: tourne .8s linear infinite; }
@keyframes tourne { to { transform: rotate(360deg); } }
/* Rendez-vous : type, agenda de créneaux, relance après un devis */
.rdv-type { display: grid; gap: .6rem; }
.rdv-type .choix { align-items: flex-start; padding: .9rem 1rem; }
.rdv-type .choix input { margin-top: .15rem; }
.rdv-type__detail { display: block; font-weight: 400; color: var(--encre-2); font-size: .92rem; margin-top: .15rem; }
.agenda { margin-top: .6rem; }
.agenda__repli { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: .8rem; }
.agenda__repli + .agenda__repli { margin-top: .4rem; }
.agenda__semaine { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; margin: 1.2rem 0 .7rem; }
.agenda__semaine h3 { font-family: var(--titres); font-size: 1.05rem; font-weight: 720; margin: 0; }
.agenda__semaine span { color: var(--encre-2); font-size: .92rem; }
.agenda__grille { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: .5rem; }
.jour { display: grid; gap: .4rem; }
.jour__nom { text-align: center; font-weight: 700; font-size: .95rem; padding: .3rem 0; color: var(--encre); }
.jour__nom small { display: block; font-weight: 600; color: var(--encre-2); font-size: .78rem; letter-spacing: .06em; text-transform: uppercase; }
.creneau { position: relative; display: flex; align-items: center; justify-content: center; min-height: 48px; padding: .4rem .5rem; border: 1.5px solid var(--ligne-forte); border-radius: var(--rayon-petit); background: var(--papier); cursor: pointer; font-weight: 600; font-size: .92rem; text-align: center; transition: border-color .15s, background-color .15s; }
.creneau input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.creneau:hover { border-color: var(--encre); }
.creneau:has(input:checked) { background: var(--bleu-900); border-color: var(--bleu-900); color: #fff; }
.creneau:has(input:checked)::before { content: "✓ "; color: var(--vert-500); }
.creneau:has(input:disabled) { color: var(--ligne-forte); border-style: dashed; cursor: default; background: transparent; }
.creneau:has(input:disabled) input { cursor: default; }
.creneau:has(input:focus-visible) { outline: 3px solid var(--bleu-600); outline-offset: 2px; }
.agenda__compteur:not([hidden]) { display: block; margin-top: 1.2rem; padding: .9rem 1.1rem; border-radius: var(--rayon-petit); background: var(--vert-100); }
.agenda__compteur strong { color: var(--vert-700); }
.agenda__ou { margin-top: 1rem; }
.suite-rdv { margin: 1.6rem 0; padding: clamp(1.4rem, 3vw, 2.2rem); border-radius: var(--rayon); background: var(--bleu-900); color: #fff; display: grid; gap: 1rem; grid-template-columns: minmax(0, 1fr) auto; align-items: center; }
.suite-rdv__titre { font-family: var(--titres); font-size: clamp(1.3rem, 1rem + 1.2vw, 1.8rem); margin: 0 0 .4rem; letter-spacing: -.02em; color: #fff; }
.suite-rdv p { margin: 0; color: rgb(255 255 255 / .82); font-size: 1.02rem; }
.suite-rdv .bouton { white-space: nowrap; }
.suite-rdv :focus-visible { outline-color: var(--vert-500); }
@media (max-width: 640px) {
  .agenda__grille { grid-template-columns: 1fr; gap: .45rem; }
  .jour { grid-template-columns: 5.2rem 1fr 1fr; align-items: center; }
  .jour__nom { text-align: left; }
  .jour__nom small { display: inline; margin-right: .3rem; }
  .agenda__repli { grid-template-columns: 1fr; gap: .4rem; }
  .suite-rdv { grid-template-columns: 1fr; }
}
.avis-essai { margin: 0 0 1.4rem; padding: .9rem 1.1rem; border-radius: var(--rayon-petit); background: var(--bleu-100); border: 1px solid var(--bleu-200); color: var(--bleu-900); font-weight: 600; }
.avis-essai a { color: var(--bleu-700); }
.etat { margin-top: 1.4rem; padding: 1rem 1.2rem; border-radius: var(--rayon-petit); font-weight: 600; }
.etat--erreur { background: #FCEEEE; color: #8A1C15; border: 1px solid #F0C4C1; }
.etat--erreur a { color: #8A1C15; }

.progression { margin-bottom: 2rem; }
.progression__etapes { list-style: none; display: grid; grid-template-columns: repeat(3, 1fr); gap: .5rem; margin-bottom: .8rem; }
.progression__etapes li { display: flex; align-items: center; gap: .5rem; font-size: .9rem; font-weight: 600; color: var(--encre-2); }
.progression__num { width: 1.8rem; height: 1.8rem; border-radius: 50%; display: grid; place-items: center; border: 1.5px solid var(--ligne-forte); font-weight: 800; font-size: .85rem; flex: none; transition: background-color .2s, border-color .2s, color .2s; }
.progression__etapes li.est-faite .progression__num { background: var(--vert-500); border-color: var(--vert-500); color: var(--encre); }
.progression__etapes li[aria-current="step"] { color: var(--encre); }
.progression__etapes li[aria-current="step"] .progression__num { background: var(--encre); border-color: var(--encre); color: #fff; }
.progression__barre { height: 4px; border-radius: 4px; background: var(--ligne); overflow: hidden; }
.progression__barre span { display: block; height: 100%; width: 33.333%; background: var(--vert-600); border-radius: 4px; transition: width .4s cubic-bezier(.2, .7, .2, 1); }
@media (max-width: 479px) { .progression__nom { display: none; } .progression__etapes li[aria-current="step"] .progression__nom { display: inline; } }

.recap { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem 1rem; padding: 1rem 1.2rem; border-radius: var(--rayon-petit); background: var(--bleu-100); margin-bottom: 1.6rem; }
.recap__titre { font-weight: 800; margin: 0; flex-basis: 100%; font-size: .85rem; letter-spacing: .1em; text-transform: uppercase; color: var(--bleu-700); }
.recap__texte { margin: 0; flex: 1; font-weight: 600; }
.recap .bouton { min-height: 40px; padding: .3rem .4rem; }

.succes { padding: clamp(1rem, 3vw, 2rem) 0; }
.succes:focus { outline: none; }
.succes__titre { font-size: clamp(1.9rem, 1.3rem + 2.2vw, 3rem); margin-bottom: 1rem; }
.succes p { font-size: 1.1rem; color: var(--encre-2); }

/* ------------------------------------------------------------ Apparitions (seulement si main.js a démarré) */
@media (prefers-reduced-motion: no-preference) {
  .anim [data-apparition] { opacity: 0; transform: translateY(26px); transition: opacity .8s cubic-bezier(.2, .7, .2, 1), transform .8s cubic-bezier(.2, .7, .2, 1); }
  .anim [data-apparition].est-visible { opacity: 1; transform: none; }
  /* Le titre principal n'est pas animé : il s'affiche tout de suite (LCP) */
  .anim .hero__intro, .anim .hero__actions, .anim .hero__preuve { animation: entree .9s .1s cubic-bezier(.2, .7, .2, 1) both; }
  .anim .hero__actions { animation-delay: .2s; }
  .anim .hero__preuve { animation-delay: .3s; }
}
@keyframes entree { from { opacity: 0; transform: translateY(18px); } }

@media print {
  .entete, .barre-mobile, .appel-final::before { display: none; }
  body { background: #fff; padding: 0; }
}