/* ═══════════════════════════════════════════════════════════════════════════
   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;
  /* Mesuré, pas choisi à l'œil. #6e766c donnait 4,35:1 sur le fond clair —
     sous les 4,5:1 exigés par la WCAG pour du texte courant, et axe-core le
     signalait sur les huit pages auditées. #656d63 monte à 4,96:1, avec de la
     marge : à 4,52 le moindre ajustement de fond repasserait sous la barre. */
  --n-500: #656d63;
  --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. */
/* Les deux versions sont maintenant des <picture> (WebP + repli PNG) : les
   règles de superposition portent donc sur le conteneur, et la hauteur sur
   l'image qu'il contient. */
.logo picture { display: block; line-height: 0; }
.logo .sur-sombre { position: absolute; inset: 0; opacity: 1; }
.logo .sur-clair  { opacity: 0; }
.logo .sur-sombre, .logo .sur-clair { transition: opacity .3s ease; }
.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; }
/* Les pastilles sont devenues des LIENS vers la page de chaque province.
   Elles gardent l'apparence de pastilles — on ne souligne pas, on ne colore
   pas en bleu : ce sont trente-deux liens côte à côte, un traitement de lien
   classique ferait une bouillie. Le survol dit que c'est cliquable. */
.prov span, .prov a {
  background: var(--surface); border: 1px solid var(--trait);
  border-radius: 999px; padding: 6px 14px; font-size: 14px; font-weight: 500;
  color: var(--encre); text-decoration: none;
  transition: border-color .2s ease, color .2s ease, transform .15s ease;
}
.prov a:hover {
  border-color: var(--marque-clair); color: var(--marque-clair);
  text-decoration: none; transform: translateY(-1px);
}
.prov span b, .prov a 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, .pied .pied-t { 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. */

/* ⚠ POURQUOI TOUT CE QUI SUIT EST PRÉFIXÉ PAR html.js
 *
 * Ces effets partent d'un état CACHÉ (opacity: 0) et c'est le JavaScript qui
 * révèle. Sans le préfixe, le jour où reno.js ne se charge pas — fichier
 * absent, envoi FTP incomplet, extension du navigateur, réseau coupé — le
 * titre, les arguments et LE FORMULAIRE restent invisibles pour toujours.
 * La photo, elle, s'affiche : on obtient une belle image et rien d'autre.
 *
 * C'est exactement ce qui est arrivé en production.
 *
 * La classe `js` est posée sur <html> par un script en ligne dans le <head>,
 * AVANT le premier affichage. Donc :
 *   · JavaScript présent  → état caché appliqué, puis animation ;
 *   · JavaScript absent   → aucune de ces règles ne s'applique, la page
 *                           s'affiche entièrement, sans animation.
 *
 * Un contenu ne doit JAMAIS dépendre du JavaScript pour être visible.
 * L'animation est un bonus ; le formulaire est le métier.
 */

/* ── Apparition au défilement ─────────────────────────────────────────── */
html.js .rev { opacity: 0; transform: translateY(26px); }
html.js .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. */
html.js .rev-suite > * { opacity: 0; transform: translateY(22px); }
html.js .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 ───────────────────────────── */
html.js .heros-points li { opacity: 0; transform: translateX(-14px); }
html.js .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 }

html.js .heros .surtitre, html.js .heros h1, html.js .heros .chapo { opacity: 0; transform: translateY(18px); }
html.js .heros.pret .surtitre, html.js .heros.pret h1, html.js .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 }

/* ⚠ Cadrée SUR LE HÉROS, et pas sur .carte-f en général.
   La même carte de formulaire est maintenant posée sur les 32 pages
   provinciales, qui n'ont pas de héros. Sans ce cadrage, elle y partait à
   opacity: 0 et rien ne la révélait jamais : le formulaire invisible, sur
   les pages faites pour le remplir. */
html.js .heros .carte-f { opacity: 0; transform: translateY(26px) scale(.985); }
html.js .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; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   PAGES DE ZONES — le hub et les 32 provinces
   ═══════════════════════════════════════════════════════════════════════════
   Ces pages n'ont pas de héros photo : elles commencent par un titre sur fond
   clair. Le visiteur y arrive par Google en cherchant sa province, pas par la
   page d'accueil — il doit comprendre où il est en une ligne. */

.sect-tete { padding-block: clamp(120px, 13vh, 156px) clamp(30px, 4vw, 44px); }
.sect-tete h1 { max-width: 19ch; }

/* Fil d'Ariane : discret, mais c'est lui qui dit « tu es dans une sous-page
   d'un vrai site », pas sur une page d'atterrissage isolée. */
.migas { font-size: 13.5px; color: var(--encre-faible); margin-bottom: 14px; }
.migas a { color: var(--encre-faible); text-decoration: none; }
.migas a:hover { color: var(--marque-clair); text-decoration: underline; }

.tete-acciones { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; }

/* ── Le tableau des zones ──────────────────────────────────────────────
   Sur mobile il déborde : on le laisse défiler DANS son cadre plutôt que de
   faire déborder la page entière — un tableau de chiffres illisible vaut
   mieux qu'une page qui glisse latéralement à chaque geste. */
/* Le cadre est borné : un tableau de trois colonnes étiré sur 1 400 px oblige
   l'œil à traverser tout l'écran pour relier une altitude à sa zone. */
.tabla-env { overflow-x: auto; margin-top: 26px; max-width: 720px;
             border-radius: var(--rayon); box-shadow: var(--ombre);
             background: var(--surface); }
.tabla-zonas { width: 100%; min-width: 440px; margin: 0;
               border-collapse: collapse; font-size: 15px; }
.tabla-zonas th, .tabla-zonas td {
  padding: 12px 16px; text-align: left;
  border-bottom: 1px solid var(--trait);
}
.tabla-zonas thead th {
  background: var(--surface-2); font-family: Archivo, sans-serif;
  font-size: 13px; letter-spacing: .03em; text-transform: uppercase;
  color: var(--encre-doux); font-weight: 700;
}
.tabla-zonas tbody tr:last-child th,
.tabla-zonas tbody tr:last-child td { border-bottom: 0; }
.tabla-zonas tbody tr:hover { background: var(--surface-2); }
.tabla-zonas td:first-child { font-weight: 600; }
.tabla-zonas code { font-family: ui-monospace, Menlo, Consolas, monospace;
                    font-size: 13.5px; background: var(--surface-2);
                    padding: 2px 7px; border-radius: 5px; }

/* Les pastilles de zone. Elles ne portent PAS de couleur « chaud/froid » au
   sens sémantique du site : une zone E n'est ni un succès ni une alerte,
   c'est un fait. D'où une échelle propre, du plus tempéré au plus froid. */
.pastilla { display: inline-block; padding: 3px 11px 4px; border-radius: 999px;
            font-size: 12.5px; font-weight: 700; letter-spacing: .02em; }
.pastilla.z-c { background: #fdedd8; color: #8a4f0e; }
.pastilla.z-d { background: #dce9f5; color: #1d4f7c; }
.pastilla.z-e { background: #d6e4ff; color: #1e3a8a; }

.fuente { margin-top: 12px; font-size: 13.5px; color: var(--encre-faible);
          max-width: 68ch; }

/* Encadré d'explication : le « pourquoi ça compte » qui suit le tableau. */
.aviso { margin-top: 30px; padding: 22px 24px; border-radius: var(--rayon);
         background: var(--surface); border-left: 4px solid var(--marque-clair);
         box-shadow: var(--ombre); max-width: 74ch; }
.aviso h3 { margin: 0 0 8px; font-size: 17px; }
.aviso p { margin: 0; }

/* ── Les villes desservies ─────────────────────────────────────────── */
.ciudades { list-style: none; margin: 24px 0 0; padding: 0;
            display: flex; flex-wrap: wrap; gap: 10px; }
.ciudades li { background: var(--surface); border: 1px solid var(--trait);
               border-radius: 999px; padding: 7px 16px; font-size: 14.5px; }
.ciudades li.mas { background: none; border-style: dashed;
                   color: var(--encre-faible); }

/* ── Le hub : les provinces groupées par communauté ────────────────── */
.comunidades { margin-top: 30px; display: grid; gap: 34px; }
.com h3 { font-size: 16px; margin: 0 0 14px; display: flex; align-items: center; gap: 10px; }
.com-n { font-size: 12px; font-weight: 700; color: var(--encre-faible);
         background: var(--surface-2); border-radius: 999px; padding: 2px 9px; }

.rejilla-prov { display: grid; gap: 12px;
                grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); }
.tarjeta-prov {
  display: block; text-decoration: none; color: inherit;
  background: var(--surface); border: 1px solid var(--trait);
  border-radius: var(--rayon-s); padding: 15px 17px;
  transition: border-color .2s ease, transform .2s ease, box-shadow .2s ease;
}
.tarjeta-prov:hover { border-color: var(--marque-clair); transform: translateY(-2px);
                      box-shadow: var(--ombre); text-decoration: none; }
.tp-nombre { display: block; font-family: Archivo, sans-serif; font-weight: 700;
             font-size: 16px; color: var(--encre); }
.tp-detalle { display: block; font-size: 13px; color: var(--encre-faible); margin-top: 3px; }

/* Pour les lecteurs d'écran seulement : la légende du tableau. Masquée à
   l'œil, mais annoncée à la voix — `display:none` la supprimerait des deux. */
.visualmente-oculto {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* Le pied de page est passé de trois colonnes à quatre. */
.pied-grille { grid-template-columns: 1.5fr 1fr 1fr 1fr; }
@media (max-width: 900px) { .pied-grille { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .pied-grille { grid-template-columns: 1fr; } }

/* ═══════════════════════════════════════════════════════════════════════════
   PAGES DE FOND — le CAE expliqué, le déroulé, la FAQ
   ═══════════════════════════════════════════════════════════════════════════ */

/* Prose longue : la largeur est bornée en CARACTÈRES, pas en pixels. Au-delà
   d'environ 70 signes, l'œil rate le début de la ligne suivante et relit deux
   fois la même — le lecteur croit que le texte est confus, pas qu'il est large. */
.prosa { max-width: 68ch; margin-top: 22px; }
.prosa p { color: var(--encre-doux); font-size: 16.5px; line-height: 1.72; }
.prosa p + p { margin-top: 16px; }
.prosa em { font-style: normal; color: var(--marque-clair); font-weight: 600; }

/* Les références au BOE. Elles ouvrent dans un onglet neuf : le visiteur part
   vérifier une loi, il ne doit pas perdre la page en le faisant. */
.fuentes { list-style: none; margin: 22px 0 0; padding: 0;
           display: grid; gap: 11px; max-width: 74ch; }
.fuentes li { padding-left: 20px; position: relative; font-size: 15.5px;
              color: var(--encre-doux); }
.fuentes li::before { content: "§"; position: absolute; left: 0;
                      color: var(--marque-clair); font-weight: 700; }

/* Les blocs « signal d'alerte » : le même bloc que partout, avec un filet
   ocre. L'ocre est déjà la couleur de l'attention sur ce site — on ne crée
   pas un rouge d'alarme pour six conseils de bon sens. */
.bloc-alerta { border-left: 3px solid var(--ocre-500); }

/* ── Le déroulé en sept étapes ──────────────────────────────────────────
   Vertical, pas horizontal : sept cases côte à côte deviennent sept colonnes
   de deux mots. Le fil relie les numéros et donne la continuité. */
.etapas { list-style: none; margin: 0; padding: 0; position: relative;
          display: grid; gap: 0; max-width: 760px; }
.etapa { display: grid; grid-template-columns: 46px 1fr; gap: 20px;
         position: relative; padding-bottom: 30px; }
.etapa:last-child { padding-bottom: 0; }
/* Le fil vertical, tiré depuis chaque numéro sauf le dernier. */
.etapa:not(:last-child)::before {
  content: ""; position: absolute; left: 22px; top: 46px; bottom: 0;
  width: 2px; background: var(--trait-fort);
}
.etapa-n {
  width: 46px; height: 46px; border-radius: 50%;
  background: var(--marque); color: #fff;
  display: grid; place-items: center;
  font-family: Archivo, sans-serif; font-weight: 800; font-size: 18px;
  position: relative; z-index: 1;
}
.etapa-txt h3 { margin: 9px 0 6px; font-size: 18px; }
.etapa-txt p { color: var(--encre-doux); margin: 0; }
.etapa-dur {
  margin-top: 9px !important; display: inline-block;
  font-size: 13px; font-weight: 600; color: var(--marque-clair);
  background: var(--surface-2); border-radius: 999px; padding: 3px 12px 4px;
}
@media (max-width: 560px) {
  .etapa { grid-template-columns: 38px 1fr; gap: 15px; }
  .etapa-n { width: 38px; height: 38px; font-size: 16px; }
  .etapa:not(:last-child)::before { left: 18px; top: 38px; }
}

/* ── La navigation principale ────────────────────────────────────────────
   Elle vit sur la photo du héros puis sur la barre blanche : la couleur du
   texte suit la barre, comme le logo. Sur mobile elle disparaît — quatre
   liens de plus dans 390 px pousseraient le bouton hors écran, et le bouton
   est ce qui rapporte. Les mêmes liens sont dans le pied de page. */
.menu { display: flex; gap: 4px; margin-right: 18px; }
.menu a {
  font-family: Archivo, sans-serif; font-size: 14.5px; font-weight: 600;
  color: #e2f2e8; text-decoration: none;
  padding: 8px 13px; border-radius: 999px;
  transition: background .2s ease, color .2s ease;
  white-space: nowrap;
}
.menu a:hover { background: rgba(255,255,255,.14); color: #fff; text-decoration: none; }
.tete.fija .menu a { color: var(--encre-doux); }
.tete.fija .menu a:hover { background: var(--surface-2); color: var(--marque-clair); }
/* Sur les pages sans héros, la barre est blanche dès le départ. */
body:not(:has(.heros)) .menu a { color: var(--encre-doux); }
body:not(:has(.heros)) .menu a:hover { background: var(--surface-2); color: var(--marque-clair); }
@media (max-width: 1080px) { .menu { display: none; } }

/* Sur un téléphone, 440 px de largeur minimale poussaient la colonne « Zona »
   hors du cadre — et c'est la seule qui compte vraiment pour le visiteur. On
   laisse donc les colonnes se resserrer et les en-têtes passer à la ligne
   plutôt que de faire défiler la réponse hors de vue. */
@media (max-width: 560px) {
  .tabla-zonas { min-width: 0; font-size: 14px; }
  .tabla-zonas th, .tabla-zonas td { padding: 10px 9px; }
  .tabla-zonas thead th { font-size: 11px; letter-spacing: 0; }
  .pastilla { padding: 3px 8px 4px; font-size: 11.5px; }
  .tabla-zonas code { padding: 2px 5px; font-size: 12.5px; }
}

/* ── Le formulaire sur les pages provinciales ────────────────────────────
   Deux colonnes : l'argument à gauche, le formulaire à droite. Sur fond
   sombre, parce que c'est le seul bloc de la page où l'on demande quelque
   chose — il doit se détacher de tout ce qui précède. */
.sect-form { background: var(--marque); color: var(--sur-marque); }
.sect-form .surtitre { color: var(--pin-300); }
.sect-form h2 { color: #fff; }
.sect-form .chapo { color: var(--pin-100); max-width: 44ch; }
.sect-form .heros-points li { color: var(--pin-100); opacity: 1; transform: none; }
.form-dos {
  display: grid; grid-template-columns: 1fr minmax(380px, .82fr);
  gap: clamp(28px, 4vw, 56px); align-items: center;
}
@media (max-width: 920px) { .form-dos { grid-template-columns: 1fr; } }
/* Sur ces pages la carte n'a pas de photo derrière elle : le verre dépoli
   n'aurait rien à dépolir. Fond plein, plus lisible. */
.sect-form .carte-f { background: var(--surface); backdrop-filter: none;
                      -webkit-backdrop-filter: none; }
.sect-form .carte-f h2 { color: var(--encre); }