/* ═══════════════════════════════════════════════════════════════════════════
   RENO VERDE — feuille de style unique
   ═══════════════════════════════════════════════════════════════════════════

   L'IDÉE DE LA PALETTE, en une phrase : dehors il fait froid, dedans il fait
   chaud. C'est littéralement le produit.

     · le VERT PIN porte l'identité — la sierra, l'hiver castillan, la marque ;
       il tient les fonds, l'en-tête, le pied de page ;
     · l'OCRE porte la chaleur et l'action — la tuile, le confort retrouvé ;
       il ne sert QUE aux boutons et aux points d'attention.

   Aucune couleur n'est définie dans un @media : uniquement des jetons
   redéfinis, sinon le mode sombre affiche le texte d'un thème sur le fond
   de l'autre.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ═══ POLICES — hébergées chez nous, pas chez Google ═══════════════════════
   Deux raisons, et la seconde est la vraie.

   1. Vitesse. Un @import Google Fonts enchaîne QUATRE allers-retours avant
      le premier caractère : HTML → reno.css → css2 → les .woff2. Ici il en
      reste deux, et le fichier est déjà sur le même domaine.

   2. Droit. Google Fonts servi depuis fonts.gstatic.com transmet l'adresse IP
      du visiteur aux États-Unis, sans son consentement et avant tout clic.
      C'est le point sur lequel l'AEPD et les tribunaux européens ont déjà
      tranché contre des sites équivalents. Une page qui collecte des
      coordonnées n'a aucune raison de prendre ce risque pour une police.

   Sous-ensemble « latin » : il contient á é í ó ú ñ ü ¿ ¡ — tout l'espagnol.
   `swap` : le texte s'affiche immédiatement dans la police système, puis
   bascule. Jamais d'écran vide en attendant une police. */
@font-face { font-family: 'Archivo'; font-style: normal; font-weight: 500; font-display: swap;
             src: url('../fonts/archivo-latin-500-normal.woff2') format('woff2'); }
@font-face { font-family: 'Archivo'; font-style: normal; font-weight: 600; font-display: swap;
             src: url('../fonts/archivo-latin-600-normal.woff2') format('woff2'); }
@font-face { font-family: 'Archivo'; font-style: normal; font-weight: 700; font-display: swap;
             src: url('../fonts/archivo-latin-700-normal.woff2') format('woff2'); }
@font-face { font-family: 'Archivo'; font-style: normal; font-weight: 800; font-display: swap;
             src: url('../fonts/archivo-latin-800-normal.woff2') format('woff2'); }
@font-face { font-family: 'IBM Plex Sans'; font-style: normal; font-weight: 400; font-display: swap;
             src: url('../fonts/ibm-plex-sans-latin-400-normal.woff2') format('woff2'); }
@font-face { font-family: 'IBM Plex Sans'; font-style: normal; font-weight: 500; font-display: swap;
             src: url('../fonts/ibm-plex-sans-latin-500-normal.woff2') format('woff2'); }
@font-face { font-family: 'IBM Plex Sans'; font-style: normal; font-weight: 600; font-display: swap;
             src: url('../fonts/ibm-plex-sans-latin-600-normal.woff2') format('woff2'); }

:root {
  /* ── Vert : ÉCHANTILLONNÉ SUR LE LOGO ────────────────────────────────
     --pin-900 est exactement le vert de la maison et du mot « Reno » ;
     --pin-500 exactement celui du mot « Verde ». Le site s'accorde à la
     marque, jamais l'inverse. */
  --pin-950: #05351f;
  --pin-900: #084d2e;   /* maison + « Reno » du logo */
  --pin-800: #0b6039;
  --pin-700: #14703f;   /* liens sur fond clair — 5,7:1 */
  --pin-600: #1a7d46;
  --pin-500: #2e8836;   /* « Verde » du logo */
  --pin-300: #8fd39a;   /* sur fond sombre — 7,8:1 */
  --pin-100: #d9f0de;
  --pin-50:  #eef8f1;

  /* ── Ocre : la chaleur, l'action ─────────────────────────────────────
     --ocre-400 est l'orange de la barre d'énergie du logo. Magnifique, mais
     2,3:1 avec du texte blanc : il ne portera JAMAIS de texte. Les boutons
     prennent --ocre-600, qui passe à 5:1. */
  --ocre-700: #8a4f0e;
  --ocre-600: #a35e11;
  --ocre-500: #c2751a;
  --ocre-400: #fb8f13;  /* décor seulement — barre de progression, filets */
  --ocre-300: #f6b45c;
  --ocre-100: #fdedd8;

  /* ── Neutres, biaisés vert : jamais un gris pur ──────────────────────── */
  --n-0:   #ffffff;
  --n-50:  #f4f7f3;
  --n-100: #e9ece6;
  --n-200: #dbe0d8;
  --n-300: #c2c9be;
  --n-500: #6e766c;
  --n-700: #3f473d;
  --n-900: #14211c;

  --bad:  #b3261e;
  --ok:   #2f7357;

  /* ── Jetons sémantiques (mode clair) ─────────────────────────────────── */
  --fond:        var(--n-50);
  --surface:     var(--n-0);
  --surface-2:   var(--pin-50);
  --encre:       var(--n-900);
  --encre-doux:  var(--n-700);
  --encre-faible:var(--n-500);
  --trait:       var(--n-200);
  --trait-fort:  var(--n-300);

  --marque:      var(--pin-900);
  --marque-clair:var(--pin-700);
  --sur-marque:  #ffffff;

  --action:      var(--ocre-600);   /* 5,04:1 avec du blanc */
  --action-survol: var(--ocre-700);
  --sur-action:  #ffffff;
  --action-doux: var(--ocre-100);

  --ombre:  0 1px 2px rgba(11,31,25,.05), 0 10px 30px -14px rgba(11,31,25,.22);
  --ombre-f:0 2px 6px rgba(11,31,25,.08), 0 24px 60px -24px rgba(11,31,25,.34);

  --rayon:   14px;
  --rayon-s: 9px;
  /* Largeurs de contenu.
     --large gouverne les sections courantes. --tres-large est réservé au
     héros et aux bandeaux illustrés : sur un écran de 1920-2560 px, un héros
     bloqué à 1320 px laisse deux marges vides qui font « page étroite posée
     au milieu ». Le texte courant, lui, reste borné : au-delà de ~90
     caractères par ligne, on relit deux fois la même. */
  --large:      1480px;
  --tres-large: 1720px;
  --etroit:     980px;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --fond:        #0a1a15;
    --surface:     #0f2720;
    --surface-2:   #143229;
    --encre:       #e8f0eb;
    --encre-doux:  #c2d2c9;
    --encre-faible:#8fa398;
    --trait:       #1f4034;
    --trait-fort:  #2c5344;
    --marque:      #0b1f19;
    --marque-clair:#8fc4ab;
    --sur-marque:  #e8f0eb;
    --action:      var(--ocre-500);
    --action-survol: var(--ocre-400);
    --sur-action:  #1a1206;
    --action-doux: #3a2a12;
    --ombre:  0 1px 2px rgba(0,0,0,.4), 0 10px 30px -14px rgba(0,0,0,.7);
    --ombre-f:0 2px 6px rgba(0,0,0,.5), 0 24px 60px -24px rgba(0,0,0,.8);
  }
}
:root[data-theme="dark"] {
  --fond:#0a1a15; --surface:#0f2720; --surface-2:#143229;
  --encre:#e8f0eb; --encre-doux:#c2d2c9; --encre-faible:#8fa398;
  --trait:#1f4034; --trait-fort:#2c5344;
  --marque:#0b1f19; --marque-clair:#8fc4ab; --sur-marque:#e8f0eb;
  --action:var(--ocre-500); --action-survol:var(--ocre-400); --sur-action:#1a1206;
  --action-doux:#3a2a12;
  --ombre:0 1px 2px rgba(0,0,0,.4), 0 10px 30px -14px rgba(0,0,0,.7);
  --ombre-f:0 2px 6px rgba(0,0,0,.5), 0 24px 60px -24px rgba(0,0,0,.8);
}

/* ═══ Base ═══════════════════════════════════════════════════════════════ */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration:.01ms !important; transition-duration:.01ms !important; }
}
body {
  margin: 0;
  background: var(--fond);
  color: var(--encre);
  font-family: "IBM Plex Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 16px; line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--marque-clair); text-underline-offset: 3px; }
:focus-visible { outline: 3px solid var(--action); outline-offset: 2px; border-radius: 4px; }

h1, h2, h3, h4 {
  font-family: Archivo, ui-sans-serif, system-ui, sans-serif;
  font-weight: 800; letter-spacing: -.025em; line-height: 1.1;
  margin: 0; text-wrap: balance;
}
h1 { font-size: clamp(34px, 5.2vw, 56px); }
h2 { font-size: clamp(26px, 3.4vw, 38px); }
h3 { font-size: clamp(18px, 2vw, 21px); letter-spacing: -.018em; }
p  { margin: 0; }

.env { width: 100%; max-width: var(--large); margin-inline: auto; padding-inline: clamp(20px, 4vw, 48px); }
/* Pour les blocs de LECTURE : une colonne large fatigue l'œil, quelle que
   soit la taille de l'écran. La page s'élargit, le texte non. */
.env-lire { max-width: var(--etroit); }
.env-vaste { max-width: var(--tres-large); }
.sect { padding-block: clamp(52px, 7vw, 88px); }
.sect-2 { background: var(--surface-2); }
.pile { display: flex; flex-direction: column; }
.mesure { max-width: 62ch; }

.surtitre {
  font-family: Archivo, sans-serif; font-size: 12px; font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase; color: var(--marque-clair);
  margin-bottom: 10px;
}
.chapo { font-size: clamp(16px, 1.7vw, 18.5px); color: var(--encre-doux); }

/* ═══ Boutons ════════════════════════════════════════════════════════════ */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  font-family: Archivo, sans-serif; font-size: 16px; font-weight: 700;
  padding: 14px 24px; border-radius: 999px; border: 2px solid transparent;
  cursor: pointer; text-decoration: none; transition: background .15s, color .15s, border-color .15s;
  min-height: 50px;
}
.btn-action { background: var(--action); color: var(--sur-action); }
.btn-action:hover { background: var(--action-survol); }
.btn-clair { background: transparent; color: var(--sur-marque); border-color: rgba(255,255,255,.34); }
.btn-clair:hover { border-color: rgba(255,255,255,.72); }
.btn-ligne { background: transparent; color: var(--encre); border-color: var(--trait-fort); }
.btn-ligne:hover { border-color: var(--marque-clair); color: var(--marque-clair); }
.btn-bloc { width: 100%; }

/* ═══ En-tête — transparent sur la bannière, plein une fois défilé ═══════
   Deux états, une seule barre. Au chargement elle flotte sur la photo et ne
   coupe rien ; dès qu'on défile, elle devient blanche et opaque pour rester
   lisible sur le contenu. C'est ce basculement qui fait « site travaillé »
   plutôt que « gabarit ». */
.tete {
  position: fixed; top: 0; left: 0; right: 0; z-index: 60;
  background: transparent; border-bottom: 1px solid transparent;
  padding-top: env(safe-area-inset-top, 0px);
  transition: background .35s ease, border-color .35s ease, box-shadow .35s ease;
}
.tete.fija {
  background: rgba(255,255,255,.92);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  border-bottom-color: var(--trait);
  box-shadow: 0 4px 24px -12px rgba(5,53,31,.32);
}
:root[data-theme="dark"] .tete.fija { background: rgba(15,39,32,.92); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .tete.fija { background: rgba(15,39,32,.92); }
}

.tete-in { display: flex; align-items: center; gap: 16px; min-height: 76px;
           transition: min-height .35s ease; }
.tete.fija .tete-in { min-height: 64px; }

.logo { display: block; position: relative; margin-right: auto; line-height: 0; }
.logo img {
  height: 40px; width: auto; transition: height .35s ease, opacity .3s ease;
}
/* Les deux versions du logo se superposent et se relaient : la claire sur la
   photo, la sombre sur la barre blanche. Aucune ne clignote. */
.logo .sur-sombre { position: absolute; inset: 0; opacity: 1; }
.logo .sur-clair  { opacity: 0; }
.tete.fija .sur-sombre { opacity: 0; }
.tete.fija .sur-clair  { opacity: 1; }
.tete.fija .logo img { height: 34px; }

.tete-tel {
  display: inline-flex; align-items: center; gap: 8px; text-decoration: none;
  color: #fff; font-weight: 700; font-size: 15px; white-space: nowrap;
  transition: color .35s ease;
}
.tete.fija .tete-tel { color: var(--pin-900); }
.tete-tel:hover { opacity: .82; }
.tete .btn { padding: 11px 20px; min-height: 44px; font-size: 14.5px; white-space: nowrap; }

@media (max-width: 620px) {
  .logo img { height: 30px; }
  .tete.fija .logo img { height: 27px; }
  .tete-in { gap: 10px; min-height: 64px; }
  .tete .btn { display: none; }
  .tete-tel {
    background: rgba(255,255,255,.16); border: 1px solid rgba(255,255,255,.3);
    padding: 8px 14px; border-radius: 999px; font-size: 13.5px;
    backdrop-filter: blur(8px);
  }
  .tete.fija .tete-tel { background: var(--pin-900); border-color: transparent; color: #fff; }
  .tete-tel .trou { background: none; border-color: rgba(255,255,255,.45); color: #fff; }
}

/* ═══ Héros — la photo prend l'écran ═════════════════════════════════════
   Hauteur d'écran quasi pleine : la bannière n'est plus un bandeau décoratif,
   c'est la première impression. Le voile reste dégradé pour que le titre se
   lise sans effacer le chantier. */
.heros {
  position: relative; isolation: isolate; overflow: hidden;
  color: var(--sur-marque);
  /* Le héros occupe l'écran. Plafond à 1040 px pour qu'un moniteur 1440 px de
     haut ne pousse pas le reste de la page hors de vue. `svh` est la hauteur
     visible RÉELLE sur mobile, barre d'URL comprise : avec `vh`, Safari iOS
     calcule sur la fenêtre dépliée et coupe le bas du formulaire. */
  min-height: min(92vh, 1040px);
  min-height: min(92svh, 1040px);
  display: flex; align-items: center;
  padding-block: clamp(120px, 14vh, 168px) clamp(64px, 9vh, 104px);
}
.heros-fond {
  position: absolute; inset: 0; z-index: -2;
  width: 100%; height: 100%; object-fit: cover; object-position: 40% 46%;
  /* Un zoom très lent : l'image n'est jamais tout à fait immobile, et on ne
     saurait pas dire pourquoi la page paraît vivante. */
  animation: respiraFondo 26s ease-in-out infinite alternate;
  will-change: transform;
}
@keyframes respiraFondo {
  from { transform: scale(1.04) translate3d(0,0,0); }
  to   { transform: scale(1.14) translate3d(-1.4%, -1%, 0); }
}
.heros::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(94deg,
      rgba(4,42,25,.96) 0%, rgba(5,53,31,.90) 24%,
      rgba(6,62,37,.58) 46%, rgba(6,62,37,.22) 66%, rgba(6,62,37,.08) 100%),
    radial-gradient(120% 80% at 8% 42%, rgba(4,42,25,.55), transparent 62%),
    linear-gradient(to bottom, rgba(4,42,25,.55), rgba(5,53,31,0) 26%, rgba(4,42,25,.5));
}
/* Un halo turquoise-vert très diffus derrière le formulaire : il décolle la
   carte du fond sans ajouter de cadre. */
.heros::after {
  content: ""; position: absolute; z-index: -1; pointer-events: none;
  right: -8%; top: 10%; width: 62%; height: 88%;
  background: radial-gradient(closest-side, rgba(65,152,48,.24), transparent 72%);
  filter: blur(10px);
}
@media (max-width: 900px) {
  .heros {
    min-height: auto;
    padding-block: clamp(96px, 16vh, 130px) 44px;
  }
  .heros::before {
    background: linear-gradient(to bottom,
      rgba(4,42,25,.40) 0%, rgba(5,53,31,.88) 18%,
      rgba(5,53,31,.92) 72%, rgba(4,42,25,.96) 100%);
  }
  .heros::after { display: none; }
  .heros-fond { object-position: 36% 46%; animation-duration: 34s; }
}
@media (max-width: 900px) {
  /* Sur mobile le texte passe SUR la photo : le voile doit couvrir partout,
     sinon le titre devient illisible dès que l'image s'éclaircit. */
  .heros::before {
    background: linear-gradient(to bottom,
      rgba(5,53,31,.42) 0%,     /* la photo respire sous l'en-tête */
      rgba(5,53,31,.86) 16%,    /* puis le voile se ferme pour le titre */
      rgba(5,53,31,.90) 70%,
      rgba(5,53,31,.95) 100%);
  }
  .heros-fond { object-position: 34% 46%; }
}
.heros-grille { display: grid; grid-template-columns: 1.02fr minmax(370px, .78fr); gap: clamp(28px, 4vw, 60px); align-items: center; }
.heros .surtitre { color: var(--pin-300); }
.heros h1 { color: #fff; text-shadow: 0 2px 24px rgba(3,30,18,.5); }
.heros .chapo { color: #e2f2e8; margin-top: 16px; text-shadow: 0 1px 14px rgba(3,30,18,.5); max-width: 33ch; }
.heros-points { list-style: none; margin: 22px 0 0; padding: 0; display: grid; gap: 9px; }
.heros-points li { display: flex; gap: 11px; align-items: center; font-size: 15.5px; color: var(--pin-100); }
.coche {
  flex: none; width: 21px; height: 21px; border-radius: 50%; margin-top: 2px;
  background: var(--pin-600); color: #fff;
  display: grid; place-items: center; font-size: 12px; font-weight: 700;
}
.heros-bas { margin-top: 26px; display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.heros-note { font-size: 13px; color: var(--pin-300); margin-top: 14px; }
@media (max-width: 900px) { .heros-grille { grid-template-columns: 1fr; } }

/* ═══ Le formulaire ══════════════════════════════════════════════════════ */
.carte-f {
  background: var(--surface); color: var(--encre);
  border-radius: 20px;
  box-shadow: 0 2px 8px rgba(3,30,18,.18), 0 30px 70px -24px rgba(3,30,18,.6);
  padding: 24px 24px 22px; position: relative;
  border: 1px solid rgba(255,255,255,.28);
  backdrop-filter: blur(2px);
}
.f-tete { margin-bottom: 16px; }
.f-tete h2 { font-size: 22px; }
.f-tete p { font-size: 13.5px; color: var(--encre-faible); margin-top: 5px; }

.jauge { display: flex; gap: 5px; margin-bottom: 18px; }
.jauge i { flex: 1; height: 4px; border-radius: 3px; background: var(--trait); transition: background .25s; }
.jauge i.on { background: var(--ocre-400); }

.etape { display: none; }
.etape.on { display: block; animation: entre .22s ease-out; }
@keyframes entre { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

.q { font-family: Archivo, sans-serif; font-weight: 700; font-size: 17px; margin-bottom: 4px; }
.q-aide { font-size: 13px; color: var(--encre-faible); margin-bottom: 14px; }

.choix { display: grid; gap: 9px; }
.choix.deux { grid-template-columns: 1fr 1fr; }
.opt {
  display: flex; flex-direction: column; align-items: flex-start; gap: 2px; width: 100%;
  padding: 14px 15px; border: 2px solid var(--trait); border-radius: var(--rayon-s);
  background: var(--surface); color: var(--encre); cursor: pointer; text-align: left;
  font: inherit; font-weight: 600; font-size: 15px;
  transition: border-color .14s, background .14s;
}
.opt:hover { border-color: var(--marque-clair); background: var(--surface-2); }
.opt.on { border-color: var(--action); background: var(--action-doux); }
.opt small { display: block; font-weight: 400; font-size: 12.5px; color: var(--encre-faible); margin-top: 2px; }

.champ { margin-bottom: 13px; }
.champ label { display: block; font-size: 13.5px; font-weight: 600; margin-bottom: 5px; }
.saisie {
  width: 100%; padding: 13px 14px; font: inherit; font-size: 16px;
  border: 2px solid var(--trait); border-radius: var(--rayon-s);
  background: var(--surface); color: var(--encre);
}
.saisie:focus { border-color: var(--marque-clair); outline: none; }
.saisie.faux { border-color: var(--bad); }
.err { color: var(--bad); font-size: 12.5px; margin-top: 5px; display: none; }
.err.on { display: block; }

.rgpd { display: flex; gap: 10px; align-items: start; font-size: 12.5px; color: var(--encre-faible); margin: 4px 0 14px; }
.rgpd input { margin-top: 3px; width: 17px; height: 17px; flex: none; accent-color: var(--action); }
.rgpd a { color: var(--marque-clair); }

.f-nav { display: flex; gap: 10px; margin-top: 6px; }
.f-nav .btn { flex: 1; }
.f-retour { flex: 0 0 auto !important; padding-inline: 16px; }

.miel {  /* piège à robots : jamais visible, jamais focusable */
  position: absolute; left: -9999px; width: 1px; height: 1px;
  opacity: 0; pointer-events: none;
}

.merci { text-align: center; padding: 12px 4px 6px; }
.merci .rond {
  width: 54px; height: 54px; border-radius: 50%; margin: 0 auto 14px;
  background: var(--pin-100); color: var(--pin-700);
  display: grid; place-items: center; font-size: 26px; font-weight: 700;
}
.merci h2 { font-size: 23px; margin-bottom: 8px; }
.merci p { color: var(--encre-doux); font-size: 15px; }

/* ═══ Blocs de contenu ═══════════════════════════════════════════════════ */
.grille { display: grid; gap: 20px; }
.g3 { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.g4 { grid-template-columns: repeat(auto-fit, minmax(215px, 1fr)); }

.bloc {
  background: var(--surface); border: 1px solid var(--trait);
  border-radius: var(--rayon); padding: 22px; box-shadow: var(--ombre);
}
.bloc h3 { margin-bottom: 7px; }
.bloc p { color: var(--encre-doux); font-size: 15px; }

/* Les étapes sont numérotées parce que l'ORDRE compte réellement :
   on ne pose pas avant d'avoir vérifié, et on ne vérifie pas avant l'appel. */
.pas { position: relative; padding-left: 58px; }
.pas-n {
  position: absolute; left: 0; top: 0;
  width: 42px; height: 42px; border-radius: 12px;
  background: var(--marque); color: #fff;
  display: grid; place-items: center;
  font-family: Archivo, sans-serif; font-weight: 800; font-size: 18px;
}
.pas h3 { margin-bottom: 6px; }
.pas p { color: var(--encre-doux); font-size: 15px; }

/* Critères : la table que les autres ne publient pas. */
.crit { display: grid; gap: 0; border: 1px solid var(--trait); border-radius: var(--rayon); overflow: hidden; background: var(--surface); }
.crit-l { display: grid; grid-template-columns: 190px 1fr; gap: 4px 22px; padding: 15px 20px; border-bottom: 1px solid var(--trait); }
.crit-l:last-child { border-bottom: 0; }
.crit-l dt { font-family: Archivo, sans-serif; font-weight: 700; font-size: 15px; }
.crit-l dd { margin: 0; color: var(--encre-doux); font-size: 15px; }
@media (max-width: 620px) { .crit-l { grid-template-columns: 1fr; } }

/* Provinces */
.prov { display: flex; flex-wrap: wrap; gap: 7px; }
.prov span {
  background: var(--surface); border: 1px solid var(--trait);
  border-radius: 999px; padding: 6px 14px; font-size: 14px; font-weight: 500;
}
.prov span b { font-weight: 700; color: var(--marque-clair); }

/* FAQ — <details> natif : aucun script, ouvrable au clavier. */
.faq { display: grid; gap: 10px; }
.faq details {
  background: var(--surface); border: 1px solid var(--trait);
  border-radius: var(--rayon-s); overflow: hidden;
}
.faq summary {
  cursor: pointer; padding: 16px 20px; list-style: none;
  font-family: Archivo, sans-serif; font-weight: 700; font-size: 16px;
  display: flex; justify-content: space-between; gap: 14px; align-items: center;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-size: 22px; color: var(--marque-clair); flex: none; line-height: 1; }
.faq details[open] summary::after { content: "–"; }
.faq-r { padding: 0 20px 17px; color: var(--encre-doux); font-size: 15px; }

/* Bandeau d'appel */
.bandeau {
  background: var(--marque); color: var(--sur-marque);
  border-radius: var(--rayon); padding: clamp(28px, 4vw, 44px);
  display: flex; flex-wrap: wrap; gap: 22px; align-items: center; justify-content: space-between;
}
.bandeau .surtitre { color: var(--pin-300); }
.bandeau h2 { color: #fff; max-width: 20ch; }
.bandeau p { color: var(--pin-100); margin-top: 8px; max-width: 46ch; font-size: 15.5px; }

/* ═══ Pied de page ═══════════════════════════════════════════════════════ */
.pied { background: var(--pin-950); color: #b9cfc5; padding-block: 48px 30px; margin-top: 0; }
.pied a { color: #b9cfc5; text-decoration: none; }
.pied a:hover { color: #fff; text-decoration: underline; }
.pied-grille { display: grid; grid-template-columns: 1.6fr 1fr 1fr; gap: 32px; }
.pied h4 { font-size: 13px; letter-spacing: .1em; text-transform: uppercase; color: #7f9a8e; margin-bottom: 12px; font-weight: 700; }
.pied ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; font-size: 14.5px; }
.pied-bas {
  margin-top: 34px; padding-top: 18px; border-top: 1px solid #1c3a30;
  display: flex; flex-wrap: wrap; gap: 12px; justify-content: space-between;
  font-size: 13px; color: #7f9a8e;
}
.pied-logo { height: 74px; width: auto; margin-bottom: 12px; }
@media (max-width: 780px) { .pied-grille { grid-template-columns: 1fr; gap: 26px; } }

/* ═══ Pages de contenu (légal) ═══════════════════════════════════════════ */
/* Les pages de contenu n'ont pas de bannière : la barre y est posée dès le
   départ, sinon le logo clair s'afficherait sur du blanc. */
body:not(:has(.heros)) .tete {
  background: rgba(255,255,255,.92);
  backdrop-filter: saturate(180%) blur(14px);
  border-bottom-color: var(--trait);
}
body:not(:has(.heros)) .sur-sombre { opacity: 0; }
body:not(:has(.heros)) .sur-clair  { opacity: 1; }
body:not(:has(.heros)) .tete-tel   { color: var(--pin-900); }
body:not(:has(.heros)) main.sect   { padding-top: clamp(104px, 12vh, 140px); }

.doc { max-width: 760px; margin-inline: auto; }
.doc h2 { font-size: 22px; margin-top: 34px; margin-bottom: 10px; }
.doc h3 { margin-top: 22px; margin-bottom: 6px; }
.doc p, .doc li { color: var(--encre-doux); font-size: 15.5px; }
.doc p + p { margin-top: 12px; }
.doc ul { margin: 10px 0; padding-left: 22px; display: grid; gap: 7px; }
.doc table { width: 100%; border-collapse: collapse; margin: 14px 0; font-size: 14.5px; }
.doc th, .doc td { border: 1px solid var(--trait); padding: 9px 12px; text-align: left; vertical-align: top; }
.doc th { background: var(--surface-2); font-family: Archivo, sans-serif; font-size: 13.5px; }
.doc .maj { font-size: 13px; color: var(--encre-faible); }

/* À REMPLIR : ce qui manque doit SAUTER AUX YEUX, pas se fondre dans le
   texte. Un site publié avec « [RAISON SOCIALE] » en gris passerait. */
.trou {
  background: var(--ocre-100); color: var(--ocre-700);
  border: 1px dashed var(--ocre-500); border-radius: 5px;
  padding: 1px 7px; font-weight: 700; font-size: .92em; white-space: nowrap;
}

/* ═══ Divers ═════════════════════════════════════════════════════════════ */
.saut {
  position: absolute; left: -9999px; background: var(--action); color: var(--sur-action);
  padding: 12px 20px; border-radius: 0 0 8px 0; font-weight: 700; z-index: 100;
}
.saut:focus { left: 0; top: 0; }

/* ═══════════════════════════════════════════════════════════════════════════
   BLOC AVANT / APRÈS
   ═══════════════════════════════════════════════════════════════════════════
   Le seul visuel qui explique le produit sans une phrase : la chaleur sort
   par le toit, puis elle ne sort plus. C'est aussi le seul endroit du site
   où l'on peut être spectaculaire sans rien affirmer de faux. */
.comp { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-top: 30px; }
.comp-c {
  background: var(--marque); border-radius: var(--rayon); overflow: hidden;
  box-shadow: var(--ombre); position: relative;
}
.comp-c img { width: 100%; display: block; }
.comp-t {
  position: absolute; top: 14px; left: 14px;
  display: inline-flex; align-items: center; gap: 7px;
  background: rgba(5,53,31,.82); color: #fff;
  padding: 6px 14px; border-radius: 999px;
  font-family: Archivo, sans-serif; font-weight: 700; font-size: 13px;
  letter-spacing: .04em; text-transform: uppercase;
  backdrop-filter: blur(4px);
}
.comp-t i { width: 8px; height: 8px; border-radius: 50%; flex: none; }
.comp-t.mal i { background: #e73618; }
.comp-t.bien i { background: #419830; }
.comp-p { padding: 15px 18px 18px; background: var(--surface); }
.comp-p h3 { font-size: 17px; margin-bottom: 5px; }
.comp-p p { font-size: 14.5px; color: var(--encre-doux); }
@media (max-width: 760px) { .comp { grid-template-columns: 1fr; } }

/* ═══ Bandeau de chiffres — DES FAITS, pas des chiffres de vente ═══════════
   Aucune statistique inventée ici : uniquement ce qui est vérifiable dans le
   texte réglementaire ou dans le devis. */
.faits {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 1px; background: var(--trait);
  border: 1px solid var(--trait); border-radius: var(--rayon); overflow: hidden;
}
.fait { background: var(--surface); padding: 22px 20px; }
.fait b {
  display: block; font-family: Archivo, sans-serif; font-weight: 800;
  font-size: clamp(26px, 3.4vw, 34px); letter-spacing: -.03em;
  color: var(--marque-clair); line-height: 1;
}
.fait span { display: block; margin-top: 7px; font-size: 14px; color: var(--encre-doux); }

/* ═══ Emplacements photo ═══════════════════════════════════════════════════
   Même principe que les repères orange du texte : ce qui manque doit SAUTER
   AUX YEUX. Une photo d'illustration achetée serait pire que pas de photo —
   on ne fait pas passer le chantier d'un autre pour le sien. */
.fotos { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; margin-top: 28px; }
.foto {
  aspect-ratio: 4 / 3; border-radius: var(--rayon); overflow: hidden;
  background: var(--surface-2); position: relative;
  margin: 0;                      /* <figure> porte une marge par défaut */
  box-shadow: 0 10px 30px -18px rgba(5,53,31,.5);
}
.foto picture { display: block; width: 100%; height: 100%; }
.foto img { display: block; width: 100%; height: 100%; object-fit: cover;
            transition: transform .7s cubic-bezier(.2,.7,.2,1); }
.foto:hover img { transform: scale(1.05); }

/* La pastille dit d'un coup d'œil où on en est dans le chantier : c'est ce
   qui transforme trois photos en une séquence. */
.etiq {
  display: inline-block; margin-right: 9px; padding: 2px 9px 3px;
  border-radius: 999px; font-size: 11.5px; font-weight: 700;
  letter-spacing: .04em; text-transform: uppercase; vertical-align: 1px;
}
/* Les pastilles se posent sur le voile sombre du bas de photo : elles sont
   donc CLAIRES avec du texte foncé. Contrastes mesurés : 8,9:1 · 8,4:1 · 13:1. */
.etiq.mal    { background: #ffdbd5; color: #8a1b14; }
.etiq.bien   { background: #d4f0d9; color: #115c32; }
.etiq.neutro { background: rgba(255,255,255,.94); color: #08301d; }

.fotos-nota { margin-top: 14px; font-size: 14px; color: var(--encre-faible); }
.foto-hueco {
  border: 2px dashed var(--ocre-500); background: var(--ocre-100);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 6px; text-align: center; padding: 20px; color: var(--ocre-700);
}
.foto-hueco b { font-family: Archivo, sans-serif; font-size: 14.5px; }
.foto-hueco span { font-size: 12.5px; opacity: .85; font-family: ui-monospace, monospace; }
.foto-pie {
  position: absolute; left: 0; right: 0; bottom: 0;
  background: linear-gradient(transparent, rgba(5,53,31,.9));
  color: #fff; padding: 26px 14px 12px; font-size: 13.5px; font-weight: 600;
}

/* ═══ Le héros reçoit l'illustration ══════════════════════════════════════ */


/* ═══ Étapes en ligne, avec un fil qui les relie ══════════════════════════ */
.pasos { position: relative; }
.pasos::before {
  content: ""; position: absolute; left: 21px; top: 42px; bottom: 42px; width: 2px;
  background: var(--trait); border-radius: 2px;
}
@media (min-width: 861px) {
  .pasos::before { left: 42px; right: 42px; top: 21px; bottom: auto; width: auto; height: 2px; }
}
.pasos .pas { position: relative; z-index: 1; }
.pasos .pas-n { box-shadow: 0 0 0 6px var(--surface-2); }
@media (min-width: 861px) {
  .pasos .pas { padding-left: 0; padding-top: 58px; }
  .pasos .pas-n { left: 0; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   ACCÈS PROFESSIONNEL
   ═══════════════════════════════════════════════════════════════════════════
   Une porte de service, pas une entrée principale. Elle s'adresse aux
   conseillers, pas aux clients : discrète, en bas, et volontairement sans
   promesse. Un visiteur qui la voit comprend qu'elle n'est pas pour lui. */
.pro {
  display: inline-flex; align-items: center; gap: 7px;
  color: #7f9a8e; text-decoration: none; font-size: 13px;
  padding: 6px 12px; border: 1px solid #1c3a30; border-radius: 999px;
  transition: color .15s, border-color .15s;
}
.pro:hover { color: #fff; border-color: #2c5344; text-decoration: none; }
.pro svg { flex: none; opacity: .8; }

/* ═══════════════════════════════════════════════════════════════════════════
   EFFETS — apparitions, relief, verre
   ═══════════════════════════════════════════════════════════════════════════
   Règle unique : rien ne bouge pour le plaisir de bouger. Chaque effet sert
   à hiérarchiser (ce qui arrive attire l'œil), à donner du relief (ce qui se
   soulève est cliquable), ou à séparer (le verre décolle du fond).
   Tout est coupé net pour qui a demandé moins d'animations. */

/* ── Apparition au défilement ─────────────────────────────────────────── */
.rev { opacity: 0; transform: translateY(26px); }
.rev.vu {
  opacity: 1; transform: none;
  transition: opacity .7s cubic-bezier(.22,.61,.36,1),
              transform .7s cubic-bezier(.22,.61,.36,1);
}
/* En cascade : les enfants arrivent l'un après l'autre, pas en bloc. */
.rev-suite > * { opacity: 0; transform: translateY(22px); }
.rev-suite.vu > * {
  opacity: 1; transform: none;
  transition: opacity .62s cubic-bezier(.22,.61,.36,1),
              transform .62s cubic-bezier(.22,.61,.36,1);
}
.rev-suite.vu > *:nth-child(1) { transition-delay: .04s }
.rev-suite.vu > *:nth-child(2) { transition-delay: .12s }
.rev-suite.vu > *:nth-child(3) { transition-delay: .20s }
.rev-suite.vu > *:nth-child(4) { transition-delay: .28s }
.rev-suite.vu > *:nth-child(5) { transition-delay: .36s }
.rev-suite.vu > *:nth-child(6) { transition-delay: .44s }

/* ── Le formulaire, en verre sur la photo ─────────────────────────────── */
.carte-f {
  background: rgba(255,255,255,.94);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  border: 1px solid rgba(255,255,255,.5);
  box-shadow: 0 1px 2px rgba(3,26,15,.2),
              0 18px 40px -18px rgba(3,26,15,.5),
              0 44px 90px -40px rgba(3,26,15,.65);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .carte-f {
    background: rgba(15,39,32,.94); border-color: rgba(143,211,154,.16);
  }
}
:root[data-theme="dark"] .carte-f {
  background: rgba(15,39,32,.94); border-color: rgba(143,211,154,.16);
}

/* ── Relief au survol : ce qui se soulève invite à cliquer ────────────── */
.bloc, .comp-c, .faq details, .foto {
  transition: transform .32s cubic-bezier(.22,.61,.36,1),
              box-shadow .32s ease, border-color .32s ease;
}
.bloc:hover, .comp-c:hover {
  transform: translateY(-5px);
  box-shadow: 0 2px 4px rgba(5,53,31,.06), 0 22px 46px -20px rgba(5,53,31,.34);
}
.bloc:hover { border-color: var(--pin-300); }
.faq details:hover { border-color: var(--pin-300); }
.faq details[open] { border-color: var(--marque-clair); box-shadow: var(--ombre); }
.faq-r { animation: abrir .3s cubic-bezier(.22,.61,.36,1); }
@keyframes abrir { from { opacity:0; transform: translateY(-6px) } to { opacity:1; transform:none } }

/* ── Boutons : un déplacement, pas un clignotement ────────────────────── */
.btn-action {
  box-shadow: 0 2px 10px -2px rgba(163,94,17,.5);
  transition: background .2s, transform .2s cubic-bezier(.22,.61,.36,1), box-shadow .2s;
}
.btn-action:hover { transform: translateY(-2px); box-shadow: 0 8px 22px -6px rgba(163,94,17,.62); }
.btn-action:active { transform: translateY(0); }

/* ── Les puces du héros arrivent en cascade ───────────────────────────── */
.heros-points li { opacity: 0; transform: translateX(-14px); }
.heros.pret .heros-points li {
  opacity: 1; transform: none;
  transition: opacity .6s ease, transform .6s cubic-bezier(.22,.61,.36,1);
}
.heros.pret .heros-points li:nth-child(1) { transition-delay: .55s }
.heros.pret .heros-points li:nth-child(2) { transition-delay: .67s }
.heros.pret .heros-points li:nth-child(3) { transition-delay: .79s }

.heros .surtitre, .heros h1, .heros .chapo { opacity: 0; transform: translateY(18px); }
.heros.pret .surtitre, .heros.pret h1, .heros.pret .chapo {
  opacity: 1; transform: none;
  transition: opacity .8s cubic-bezier(.22,.61,.36,1), transform .8s cubic-bezier(.22,.61,.36,1);
}
.heros.pret .surtitre { transition-delay: .08s }
.heros.pret h1        { transition-delay: .16s }
.heros.pret .chapo    { transition-delay: .3s }

.carte-f { opacity: 0; transform: translateY(26px) scale(.985); }
.heros.pret .carte-f {
  opacity: 1; transform: none;
  transition: opacity .8s cubic-bezier(.22,.61,.36,1) .22s,
              transform .8s cubic-bezier(.22,.61,.36,1) .22s;
}

/* ── Repère de défilement ─────────────────────────────────────────────── */
.baja {
  position: absolute; left: 50%; bottom: 26px; transform: translateX(-50%);
  display: grid; place-items: center; gap: 6px;
  color: rgba(255,255,255,.62); font-size: 11px; letter-spacing: .14em;
  text-transform: uppercase; font-family: Archivo, sans-serif; font-weight: 700;
  text-decoration: none; z-index: 2;
}
.baja:hover { color: #fff; text-decoration: none; }
.baja i {
  width: 24px; height: 38px; border: 2px solid currentColor; border-radius: 14px;
  position: relative;
}
.baja i::after {
  content: ""; position: absolute; left: 50%; top: 7px; width: 3px; height: 7px;
  margin-left: -1.5px; border-radius: 2px; background: currentColor;
  animation: rueda 2s ease-in-out infinite;
}
@keyframes rueda { 0%{opacity:0;transform:translateY(0)} 30%{opacity:1} 70%{opacity:1} 100%{opacity:0;transform:translateY(13px)} }
@media (max-width: 900px) { .baja { display: none; } }

/* ── Titres : un filet qui se déploie ─────────────────────────────────── */
.sect h2 { position: relative; padding-bottom: 14px; }
.sect h2::after {
  content: ""; position: absolute; left: 0; bottom: 0; height: 3px; width: 0;
  border-radius: 3px;
  background: linear-gradient(90deg, var(--ocre-400), var(--pin-500));
  transition: width .8s cubic-bezier(.22,.61,.36,1) .2s;
}
.sect .rev.vu h2::after, .sect h2.vu::after { width: 72px; }

/* ── Le bandeau de faits s'anime au survol ────────────────────────────── */
.fait { transition: background .3s ease; position: relative; }
.fait::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
  background: var(--ocre-400); transform: scaleY(0); transform-origin: top;
  transition: transform .34s cubic-bezier(.22,.61,.36,1);
}
.fait:hover { background: var(--surface-2); }
.fait:hover::before { transform: scaleY(1); }

/* ── Respect du réglage système ───────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .rev, .rev-suite > *, .heros-points li,
  .heros .surtitre, .heros h1, .heros .chapo, .carte-f {
    opacity: 1 !important; transform: none !important; transition: none !important;
  }
  .heros-fond, .baja i::after { animation: none !important; }
  .sect h2::after { width: 72px; transition: none; }
  .bloc:hover, .comp-c:hover, .btn-action:hover { transform: none; }
}