/* =========================================================================
   Annuaire Photovoltaïque — feuille de style.
   Base : l'annuaire modèle (_exemple template) — Poppins pour le texte,
   boutons en pilule, cards arrondies à ombres douces. Identité solaire :
   titres en Lexend, orange solaire pour les boutons et les liens, bleu nuit
   pour les fonds sombres, jaune soleil pour l'accent vif.
   Les couleurs du bloc :root sont remplacées au build par la palette du
   métier (config.theme).
   Détails propres à cet annuaire : bannière « arche » (photo découpée en
   soleil levant, outil « orientation du toit », bas de bannière arrondi),
   aide au choix « Votre situation », barre d'action mobile et retour en
   haut à anneau de progression (fin de feuille).
   ========================================================================= */

:root{
  --accent:#B23A08;
  --accent-hover:#8A2C05;
  --accent-soft:#FFF1E8;
  --accent-ring:rgba(217,72,15,.24);
  --accent-strong:#D9480F;
  --accent-strong-hover:#B23A08;
  /* Accent lisible sur les fonds sombres (bannières, bloc d'appel). */
  --accent-lumineux:#FFD43B;

  --bg:#F8F7F3;
  --bg-alt:#F1EEE6;
  --surface:#FFFFFF;
  --surface-2:#FBFAF7;

  --ink:#14202E;
  --ink-2:#33404F;
  --ink-3:#5A6573;
  --line:#E6E2D8;
  --line-strong:#D2CCBE;

  --success:#2E7D4F;
  --success-soft:rgba(46,125,79,.10);
  --danger:#C0392B;

  --shadow-xs:0 1px 2px rgba(20,32,46,.04);
  --shadow-sm:0 2px 8px rgba(20,32,46,.06);
  --shadow-md:0 8px 24px rgba(20,32,46,.08);
  --shadow-lg:0 20px 48px rgba(20,32,46,.12);
  --shadow-accent:0 8px 24px rgba(178,58,8,.28);

  /* Composés : recalculés au build depuis `theme` de generator/config.js.
     Les valeurs ci-dessous sont celles du site, figées au dernier build. */
  --entete-fond:rgba(248,247,243,.86);
  --logo-degrade:linear-gradient(140deg,#F08C00,#B23A08 55%,#8A2C05);
  --nav-survol:rgba(178,58,8,.09);
  --danger-soft:rgba(192,57,43,.08);
  --success-bordure:rgba(46,125,79,.28);
  --motif-degrade:linear-gradient(145deg,#FFF1E8 0%,#FCC419 55%,#F1EEE6 100%);
  --banniere-fond:linear-gradient(160deg,#08131F 0%,#0F2236 55%,#1A3350 100%);
  --banniere-voile:linear-gradient(90deg,rgba(8,19,31,.90) 0%,rgba(8,19,31,.84) 44%,rgba(15,34,54,.60) 62%,rgba(15,34,54,.38) 80%,rgba(15,34,54,.26) 100%);
  --banniere-voile-accueil:linear-gradient(90deg,rgba(7,16,26,.92) 0%,rgba(7,16,26,.84) 40%,rgba(15,34,54,.56) 58%,rgba(15,34,54,.26) 78%,rgba(15,34,54,.10) 100%);
  --banniere-voile-etroit:linear-gradient(180deg,rgba(7,16,26,.90) 0%,rgba(8,19,31,.84) 60%,rgba(15,34,54,.78) 100%);
  --appel-degrade:linear-gradient(135deg,#08131F 0%,#0F2236 55%,#B23A08 100%);
  --appel-voile:linear-gradient(120deg,rgba(8,19,31,.94) 0%,rgba(12,28,44,.86) 55%,rgba(80,32,8,.70) 100%);

  /* Angles du modèle couvreur : cards arrondies, boutons en pilule. */
  --r-sm:8px;
  --r-md:14px;
  --r-lg:20px;
  --r-xl:28px;
  --r-pill:999px;

  /* Jaune soleil : l'accent vif (bouton de recherche, soleil du logo,
     solutions conseillées). Jamais en texte sur fond clair. */
  --signal:#FCC419;
  --signal-fort:#946200;


  --police:'Poppins',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  /* Titres en Lexend : large, lumineux, très lisible. */
  --police-titres:'Lexend','Poppins',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --conteneur:1200px;
  --pad-x:32px;
  --section-y:88px;
  --entete-h:72px;
}

*{box-sizing:border-box;margin:0;padding:0}
/* Un élément masqué l'est pour de bon : sans cette règle, tout display
   explicite (flex, grid) l'emporte sur l'attribut hidden, et la recherche
   « masquait » des résultats qui restaient à l'écran. */
[hidden]{display:none !important}
/* Pendant une recherche, ni ligne vide ni titre de groupe orphelin. */
.villes-colonnes li:has(> [hidden]){display:none}
.groupe-alpha:not(:has([data-carte]:not([hidden]))){display:none}
html{scroll-behavior:smooth;scroll-padding-top:calc(var(--entete-h) + 20px)}
body{
  font-family:var(--police);
  background:var(--bg);
  color:var(--ink);
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
ul,ol{list-style:none}
button{font-family:inherit}
:focus-visible{outline:3px solid var(--accent-ring);outline-offset:2px;border-radius:4px}

/* ---------------------------------------------------------- Typographie */
h1,h2,h3{font-family:var(--police-titres)}
h1{font-weight:700;font-size:52px;line-height:1.08;letter-spacing:-.03em}
h2{font-weight:700;font-size:35px;line-height:1.16;letter-spacing:-.025em;color:var(--ink)}
h3{font-weight:600;font-size:20px;line-height:1.3;color:var(--ink);letter-spacing:-.005em}
h4{font-weight:600;font-size:16px;line-height:1.35;color:var(--ink)}
p{color:var(--ink-2);font-size:16px}
strong{font-weight:600;color:var(--ink)}

.surtitre{
  font-size:12px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--accent-hover);font-weight:700;margin-bottom:14px;display:block;
}
.accroche{color:var(--ink-2);font-size:18px;line-height:1.62}

.conteneur{width:100%;max-width:var(--conteneur);margin:0 auto;padding:0 var(--pad-x)}
.conteneur-etroit{max-width:820px}
.section{padding:var(--section-y) 0}
.section-alternee{background:var(--bg-alt)}
.section-entete{max-width:720px;margin:0 auto 48px;text-align:center}
.section-entete h2{margin-bottom:14px}
.section-entete .surtitre{margin-left:auto;margin-right:auto}
.surtitre-sombre{color:var(--accent-lumineux)}
.section-entete p{font-size:17px}
.section-entete-ligne{
  display:flex;align-items:flex-end;justify-content:space-between;
  gap:24px;margin-bottom:36px;flex-wrap:wrap;
}
.section-entete-ligne h2{margin-bottom:6px}

/* -------------------------------------------------------------- Boutons */
.bouton{
  font-weight:600;font-size:14.5px;border-radius:var(--r-pill);
  padding:13px 26px;cursor:pointer;border:1px solid transparent;
  transition:background .18s ease,color .18s ease,border-color .18s ease,transform .18s ease,box-shadow .18s ease;
  display:inline-flex;align-items:center;justify-content:center;gap:9px;white-space:nowrap;
}
.bouton svg{flex-shrink:0}
.bouton-principal{background:var(--accent-strong);color:#fff;box-shadow:var(--shadow-accent)}
.bouton-principal:hover{background:var(--accent-strong-hover);transform:translateY(-1px)}
.bouton-secondaire{background:var(--surface);color:var(--ink);border-color:var(--line-strong)}
.bouton-secondaire:hover{border-color:var(--ink);background:var(--surface-2)}
.bouton-clair{background:rgba(255,255,255,.14);color:#fff;border-color:rgba(255,255,255,.34);backdrop-filter:blur(6px)}
.bouton-clair:hover{background:rgba(255,255,255,.22);border-color:#fff}
.bouton-discret{background:transparent;color:var(--accent-hover);padding-left:6px;padding-right:6px}
.bouton-discret:hover{color:var(--accent-strong)}
.bouton-grand{font-size:16px;padding:16px 32px}
.bouton-petit{font-size:13px;padding:9px 18px}
.bouton-large{width:100%}

/* --------------------------------------------------------------- Entête */
.entete{
  position:fixed;top:0;left:0;right:0;z-index:100;height:var(--entete-h);
  display:flex;align-items:center;background:transparent;
  transition:background .3s ease,box-shadow .3s ease,backdrop-filter .3s ease;
}
.entete.defile,body.page-claire .entete{
  background:var(--entete-fond);
  backdrop-filter:saturate(160%) blur(12px);
  -webkit-backdrop-filter:saturate(160%) blur(12px);
  box-shadow:var(--shadow-sm);border-bottom:1px solid var(--line);
}
.entete-contenu{display:flex;align-items:center;justify-content:space-between;gap:24px}

.logo{display:inline-flex;align-items:center;gap:11px;font-size:17px;font-weight:700;letter-spacing:-.015em}
.logo-icone{
  width:38px;height:38px;border-radius:11px;flex-shrink:0;
  background:var(--logo-degrade);
  color:#fff;display:grid;place-items:center;box-shadow:var(--shadow-accent);
}
.logo-icone svg{width:21px;height:21px}
/* Marque dessinée (config.theme.logo) : plus grande que les pictogrammes. */
.logo-icone .logo-marque{width:30px;height:30px}
.logo-texte{line-height:1.15}
.logo-texte b{display:block;font-weight:700}
.logo-texte span{display:block;font-size:11px;font-weight:500;letter-spacing:.09em;text-transform:uppercase;color:var(--ink-3)}

.navigation{display:flex;gap:4px}
.navigation a{
  font-size:14.5px;font-weight:500;color:var(--ink-2);padding:8px 14px;
  border-radius:var(--r-pill);transition:color .18s,background .18s;
}
.navigation a:hover{color:var(--ink);background:var(--nav-survol)}
.navigation a[aria-current]{color:var(--accent-strong);background:var(--accent-soft);font-weight:600}
.entete-actions{display:flex;align-items:center;gap:14px}

/* Entête transparent au-dessus d'un hero sombre */
body:not(.page-claire) .entete:not(.defile) .logo{color:#fff}
body:not(.page-claire) .entete:not(.defile) .logo-texte span{color:rgba(255,255,255,.72)}
body:not(.page-claire) .entete:not(.defile) .navigation a{color:rgba(255,255,255,.88)}
body:not(.page-claire) .entete:not(.defile) .navigation a:hover{color:#fff;background:rgba(255,255,255,.15)}
body:not(.page-claire) .entete:not(.defile) .navigation a[aria-current]{color:#fff;background:rgba(255,255,255,.18)}
body:not(.page-claire) .entete:not(.defile) .bascule span{background:#fff}
body:not(.page-claire) .entete:not(.defile) .bouton-principal{background:#fff;color:var(--ink);box-shadow:var(--shadow-sm)}
body:not(.page-claire) .entete:not(.defile) .bouton-principal:hover{background:var(--surface-2)}

.bascule{display:none;flex-direction:column;gap:5px;background:none;border:none;cursor:pointer;padding:8px}
.bascule span{width:24px;height:2px;background:var(--ink);border-radius:2px;transition:transform .25s,opacity .25s,background .3s}
.bascule[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.bascule[aria-expanded="true"] span:nth-child(2){opacity:0}
.bascule[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* ------------------------------------------------------------ Bannières */
/* Le fond combine un dégradé et une photo : si la photo n'est pas encore
   déposée dans assets/img/, le dégradé tient seul le rendu. */
.banniere{position:relative;display:flex;align-items:center;overflow:hidden;
  padding:calc(var(--entete-h) + 72px) 0 80px;
  background:var(--banniere-fond);
}
.banniere-fond{position:absolute;inset:0;overflow:hidden}
.banniere-photo{width:100%;height:100%;object-fit:cover;object-position:center}
/* La photo peut être lumineuse : sous le texte il faut
   tenir ~0.84 d'opacité pour rester au-dessus de 4.5:1 en blanc. Le voile
   ne s'allège qu'une fois passée la colonne de texte, ce qui laisse l'image
   pleinement visible sur la droite. */
.banniere-voile{
  position:absolute;inset:0;
  background:var(--banniere-voile);
}
/* Accueil : le texte occupe la moitié gauche, la photo reste pleinement
   visible à droite. Le voile ne reste dense que sous le texte. */
.banniere-accueil{min-height:min(76vh,720px);padding:calc(var(--entete-h) + 96px) 0 104px}
.banniere-accueil .banniere-voile{
  background:var(--banniere-voile-accueil);
}
.banniere-accueil .banniere-texte{max-width:660px}
.banniere-accueil h1{font-size:58px}
@media (max-width:960px){
  /* Sans colonne libre à droite, le voile doit couvrir toute la largeur. */
  .banniere-accueil{min-height:auto}
  .banniere-accueil h1{font-size:44px}
  .banniere-accueil .banniere-voile{
    background:var(--banniere-voile-etroit);
  }
}
@media (max-width:720px){.banniere-accueil{padding:calc(var(--entete-h) + 52px) 0 60px}.banniere-accueil h1{font-size:34px}}
.banniere-contenu{position:relative;z-index:2;color:#fff}
.banniere h1{color:#fff;margin-bottom:20px}
.banniere-accroche{color:rgba(255,255,255,.86);font-size:19px;margin-bottom:30px;max-width:620px}
.banniere-actions{display:flex;gap:14px;flex-wrap:wrap;margin-bottom:34px}
.banniere-labels{display:flex;gap:26px;flex-wrap:wrap}
.banniere-labels li{display:inline-flex;align-items:center;gap:9px;font-size:14px;font-weight:500;color:rgba(255,255,255,.9)}
.banniere-labels svg{width:18px;height:18px;color:var(--accent)}

.banniere-texte{max-width:620px}

/* Hero de page intérieure, plus compact */
.banniere-compacte{padding:calc(var(--entete-h) + 62px) 0 62px}
.banniere-compacte h1{font-size:42px;margin-bottom:14px}
.banniere-compacte .banniere-accroche{font-size:17px;margin-bottom:24px}

/* ------------------------------------------------------- Fil d'Ariane */
.fil{display:flex;flex-wrap:wrap;gap:8px;align-items:center;font-size:13px;margin-bottom:22px}
.fil a,.fil span{color:rgba(255,255,255,.72)}
.fil a:hover{color:#fff}
.fil li+li::before{content:"›";margin-right:8px;color:rgba(255,255,255,.45)}
.fil li{display:inline-flex;align-items:center}
.fil [aria-current]{color:#fff;font-weight:500}
.fil-sombre a,.fil-sombre span{color:var(--ink-3)}
.fil-sombre a:hover{color:var(--accent-strong)}
.fil-sombre li+li::before{color:var(--line-strong)}
.fil-sombre [aria-current]{color:var(--ink-2)}

/* ------------------------------------------------------------ Compteurs */
.compteurs{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.compteur{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:24px 26px;box-shadow:var(--shadow-sm);
  transition:transform .2s ease,box-shadow .2s ease;
}
.compteur:hover{transform:translateY(-3px);box-shadow:var(--shadow-md)}
.compteur-icone{
  width:44px;height:44px;border-radius:12px;background:var(--accent-soft);
  color:var(--accent-strong);display:grid;place-items:center;margin-bottom:16px;
}
.compteur-icone svg{width:22px;height:22px}
.compteur-valeur{font-family:var(--police-titres);font-size:38px;font-weight:700;line-height:1;letter-spacing:-.02em;
  color:var(--accent-strong);background:linear-gradient(100deg,var(--accent-strong) 0%,var(--accent) 45%,var(--signal-fort) 100%);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.compteur-libelle{font-size:13.5px;color:var(--ink-3);margin-top:7px}

/* Compteurs posés à cheval sur le hero */
.compteurs-chevauchants{position:relative;z-index:3;margin-top:-56px;margin-bottom:0}
.compteurs-chevauchants .compteur{box-shadow:var(--shadow-lg)}

/* --------------------------------------------------- Cards entreprises */
.entreprises-grille{display:grid;grid-template-columns:repeat(2,1fr);gap:20px}
.entreprises-grille-3{grid-template-columns:repeat(3,1fr)}

.carte-entreprise{
  position:relative;display:flex;flex-direction:column;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:24px;box-shadow:var(--shadow-xs);overflow:hidden;
  transition:transform .22s ease,box-shadow .22s ease,border-color .22s ease;
}
.carte-entreprise::before{
  content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--accent);
  transform:scaleY(0);transform-origin:top;transition:transform .25s ease;
}
.carte-entreprise:hover{transform:translateY(-3px);box-shadow:var(--shadow-md);border-color:var(--line-strong)}
.carte-entreprise:hover::before{transform:scaleY(1)}

.carte-entete{display:flex;align-items:flex-start;gap:15px;margin-bottom:18px}
.carte-avatar{
  width:52px;height:52px;flex-shrink:0;border-radius:15px;
  background:linear-gradient(140deg,#F9A94A 0%,var(--accent) 48%,var(--accent-hover) 100%);
  color:#fff;display:grid;place-items:center;font-weight:700;font-size:17px;
  box-shadow:var(--shadow-accent);letter-spacing:.01em;
}
.carte-titre{flex:1;min-width:0}
.carte-titre h3{font-size:18px;margin-bottom:5px;letter-spacing:-.01em;transition:color .18s}
/* Pas de lien étendu à toute la card : il couvrait l'adresse et le SIRET,
   qu'on ne pouvait plus sélectionner ni copier sur mobile. Seuls le nom et
   le bouton mènent à la fiche. */
.carte-titre h3 a{text-decoration:none}
.carte-titre h3 a:hover{text-decoration:underline;text-underline-offset:3px}
.infos-liste{user-select:text;-webkit-user-select:text}
.carte-entreprise:hover .carte-titre h3{color:var(--accent-strong)}
.carte-lieu{display:inline-flex;align-items:center;gap:6px;font-size:13.5px;color:var(--ink-3)}
.carte-lieu svg{width:15px;height:15px;color:var(--accent);flex-shrink:0}

/* Étiquettes posées sur les cards : activité, qualification, effectif… */
.etiquettes{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:16px}
.etiquette{
  display:inline-flex;align-items:center;gap:5px;
  font-size:12px;font-weight:600;padding:5px 11px;border-radius:var(--r-pill);
  background:var(--bg-alt);color:var(--ink-2);border:1px solid var(--line);
}
.etiquette svg{width:13px;height:13px}
.etiquette-accent{background:var(--accent-soft);color:var(--accent-strong);border-color:var(--accent-ring)}
.etiquette-verte{background:var(--success-soft);color:var(--success);border-color:rgba(46,158,91,.24)}
.etiquette-pleine{background:var(--accent-strong);color:#fff;border-color:transparent}

/* Lignes d'information à icône */
.infos-liste{display:flex;flex-direction:column;gap:11px;margin-bottom:20px}
.info-ligne{display:flex;align-items:flex-start;gap:11px;font-size:14px;color:var(--ink-2);line-height:1.45}
.info-icone{
  width:30px;height:30px;flex-shrink:0;border-radius:9px;
  background:var(--accent-soft);color:var(--accent-strong);
  display:grid;place-items:center;
}
.info-icone svg{width:16px;height:16px}
.info-texte{padding-top:4px;min-width:0}
.info-texte b{display:block;font-size:11px;font-weight:600;letter-spacing:.07em;text-transform:uppercase;color:var(--ink-3);margin-bottom:1px}
.info-valeur{word-break:break-word}

.carte-pied{
  display:flex;align-items:center;justify-content:space-between;gap:14px;
  margin-top:auto;padding-top:18px;border-top:1px solid var(--line);
}
.carte-pied .bouton{position:relative}
.carte-fleche{
  width:38px;height:38px;border-radius:var(--r-pill);border:1px solid var(--line-strong);
  color:var(--ink-3);display:grid;place-items:center;flex-shrink:0;
  transition:transform .25s ease,background .25s,border-color .25s,color .25s;
}
.carte-fleche svg{width:17px;height:17px}
.carte-fleche:hover,.carte-fleche:focus-visible{background:var(--accent);border-color:var(--accent);color:#fff;transform:translateX(3px)}

/* Photo de l'établissement : colonne de droite de la card, quand il en a une */
.carte-haut{display:flex;align-items:flex-start;gap:20px}
.carte-corps{flex:1;min-width:0}
.carte-photo{
  flex:0 0 40%;max-width:280px;aspect-ratio:4/3;align-self:stretch;max-height:260px;
  border-radius:var(--r-md);overflow:hidden;border:1px solid var(--line);
  background:var(--bg-alt);box-shadow:var(--shadow-sm);
}
.carte-photo img{width:100%;height:100%;object-fit:cover;transition:transform .45s ease}
.carte-entreprise:hover .carte-photo img{transform:scale(1.04)}
/* Trois cards par ligne : trop étroites pour deux colonnes, la photo passe au-dessus. */
.entreprises-grille-3 .carte-haut{flex-direction:column;gap:16px}
.entreprises-grille-3 .carte-photo{order:-1;flex-basis:auto;width:100%;max-width:none;max-height:none;aspect-ratio:16/9}

/* ------------------------------------------------ Barre de recherche */
.barre-outils{
  display:flex;gap:14px;align-items:center;flex-wrap:wrap;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:16px 18px;box-shadow:var(--shadow-sm);margin-bottom:28px;
}
.champ-recherche{position:relative;flex:1;min-width:230px}
.champ-recherche svg{position:absolute;left:15px;top:50%;transform:translateY(-50%);width:18px;height:18px;color:var(--ink-3);pointer-events:none}
.champ-recherche input{
  width:100%;font-family:var(--police);font-size:15px;color:var(--ink);
  background:var(--surface-2);border:1px solid var(--line-strong);border-radius:var(--r-pill);
  padding:12px 16px 12px 44px;transition:border-color .18s,box-shadow .18s,background .18s;
}
.champ-recherche input:focus{outline:none;background:var(--surface);border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-ring)}
.champ-recherche input::placeholder{color:var(--ink-3)}

.filtres{display:flex;gap:8px;flex-wrap:wrap}
.filtre{
  font-size:13px;font-weight:600;padding:9px 16px;border-radius:var(--r-pill);
  background:var(--surface-2);color:var(--ink-2);border:1px solid var(--line-strong);
  cursor:pointer;transition:all .18s ease;display:inline-flex;align-items:center;gap:6px;
}
.filtre svg{width:14px;height:14px}
.filtre:hover{border-color:var(--ink-3);color:var(--ink)}
.filtre[aria-pressed="true"]{background:var(--accent-strong);color:#fff;border-color:var(--accent-strong);box-shadow:var(--shadow-accent)}
.compte-resultats{font-size:14px;color:var(--ink-3);margin-bottom:20px}
.compte-resultats b{color:var(--ink);font-weight:600}
.aucun-resultat{
  text-align:center;padding:56px 24px;background:var(--surface);
  border:1px dashed var(--line-strong);border-radius:var(--r-lg);color:var(--ink-3);
}
.aucun-resultat svg{width:40px;height:40px;color:var(--line-strong);margin:0 auto 14px}

/* Choix du département, dans la bannière d'accueil */
.choix-departement{
  max-width:640px;margin-bottom:28px;padding:20px 20px 22px;
  background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.20);
  border-radius:var(--r-xl);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  box-shadow:0 24px 60px rgba(8,6,18,.35),inset 0 1px 0 rgba(255,255,255,.10);
}
.choix-departement-libelle{display:flex;align-items:center;gap:9px;font-size:15px;font-weight:600;color:#fff;margin-bottom:14px;padding-left:4px}
.choix-departement-libelle svg{color:var(--signal);flex-shrink:0}
.choix-departement-ligne{display:flex;gap:14px;align-items:stretch}
.choix-departement select{
  flex:1;min-width:0;font-family:var(--police);font-size:16px;color:var(--ink);
  background-color:#fff;border:4px solid rgba(252,196,25,.35);border-radius:var(--r-pill);
  padding:13px 46px 13px 20px;cursor:pointer;background-clip:padding-box;
  appearance:none;-webkit-appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23332D47' stroke-width='2.5'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 20px center;
  transition:border-color .18s ease,box-shadow .18s ease;
}
.choix-departement select:hover{border-color:rgba(252,196,25,.55)}
.choix-departement select:focus{outline:none;border-color:var(--signal);box-shadow:0 0 0 4px rgba(252,196,25,.25)}
/* Bouton jaune soleil, texte sombre : le seul endroit où l'accent vif porte du texte. */
.choix-departement .bouton{
  white-space:nowrap;font-size:16px;font-weight:700;padding:14px 30px;
  background:var(--signal);color:var(--ink);border:none;
  box-shadow:0 10px 30px rgba(252,196,25,.35);
}
.choix-departement .bouton:hover{background:#FFD95A;transform:translateY(-1px);box-shadow:0 14px 34px rgba(252,196,25,.45)}
.choix-departement .bouton svg{color:var(--ink)}

/* ------------------------------------------- Fiche de chantier de la bannière */
/* Carte vitrée posée sur la photo à droite. Décorative : masquée aux
   lecteurs d'écran et sous 1100 px. */
.banniere-accueil .banniere-contenu{position:relative}
.tableau-bord{
  position:absolute;right:var(--pad-x);bottom:-6px;width:290px;z-index:2;
  background:rgba(20,17,31,.62);border:1px solid rgba(255,255,255,.16);
  border-radius:var(--r-lg);padding:18px 18px 16px;color:#fff;
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  box-shadow:0 30px 70px rgba(8,6,18,.45);
  animation:tb-flotte 7s ease-in-out infinite;
}
.tb-entete{display:flex;align-items:center;gap:10px;font-size:13px;font-weight:600;letter-spacing:.02em;margin-bottom:14px}
.tb-point{width:9px;height:9px;border-radius:50%;background:var(--signal);box-shadow:0 0 0 0 rgba(252,196,25,.6);animation:tb-pouls 2.2s ease-out infinite}
.tb-entete em{margin-left:auto;font-style:normal;font-size:11px;font-weight:600;color:var(--signal);background:rgba(252,196,25,.12);border-radius:var(--r-pill);padding:3px 9px}
.tb-grille{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.tb-grille li{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.08);border-radius:var(--r-md);padding:10px 12px}
.tb-grille span{display:block;font-size:11.5px;color:rgba(255,255,255,.66)}
.tb-grille b{display:block;font-size:17px;font-weight:600;letter-spacing:-.01em;margin-top:2px}
.tb-scenario{display:flex;gap:8px;align-items:flex-start;margin-top:12px;font-size:12px;line-height:1.45;color:rgba(255,255,255,.80)}
.tb-scenario::before{content:'';flex-shrink:0;width:6px;height:6px;margin-top:6px;border-radius:50%;background:var(--accent-lumineux)}
@keyframes tb-pouls{0%{box-shadow:0 0 0 0 rgba(252,196,25,.55)}80%,100%{box-shadow:0 0 0 9px rgba(252,196,25,0)}}
@keyframes tb-flotte{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
@media (prefers-reduced-motion:reduce){.tableau-bord,.tb-point{animation:none}}
@media (max-width:1100px){.tableau-bord{display:none}}

/* ---------------------------------------------------------- Pagination */
.pagination{display:flex;justify-content:center;align-items:center;gap:8px;margin-top:44px;flex-wrap:wrap}
.pagination a,.pagination span{
  min-width:42px;height:42px;padding:0 13px;border-radius:var(--r-md);
  display:inline-flex;align-items:center;justify-content:center;
  font-size:14.5px;font-weight:600;border:1px solid var(--line);
  background:var(--surface);color:var(--ink-2);transition:all .18s ease;
}
.pagination a:hover{border-color:var(--accent);color:var(--accent-strong);box-shadow:var(--shadow-sm)}
.pagination [aria-current]{background:var(--accent-strong);color:#fff;border-color:var(--accent-strong);box-shadow:var(--shadow-accent)}
.pagination .ellipse{border:none;background:none;color:var(--ink-3)}

/* -------------------------------------------------------- Grille villes */
.villes-grille{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.carte-ville{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);
  padding:15px 18px;box-shadow:var(--shadow-xs);
  transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease;
}
.carte-ville:hover{transform:translateY(-2px);box-shadow:var(--shadow-md);border-color:var(--accent);}
.carte-ville-nom{font-weight:600;font-size:15px;color:var(--ink);line-height:1.25}
.carte-ville-nom span{display:block;font-size:12px;font-weight:400;color:var(--ink-3);margin-top:2px}
.carte-ville-compte{
  flex-shrink:0;min-width:32px;height:32px;padding:0 10px;border-radius:var(--r-pill);
  background:var(--accent-soft);color:var(--accent-strong);
  display:grid;place-items:center;font-size:13px;font-weight:700;
  transition:background .2s,color .2s;
}
.carte-ville:hover .carte-ville-compte{background:var(--accent-strong);color:#fff}

/* Liste compacte, toutes communes */
.villes-colonnes{columns:4;column-gap:32px}
.villes-colonnes li{break-inside:avoid;margin-bottom:9px}
.villes-colonnes a{
  display:flex;align-items:baseline;justify-content:space-between;gap:10px;
  font-size:14.5px;color:var(--ink-2);padding:4px 0;transition:color .16s,padding-left .16s;
}
.villes-colonnes a:hover{color:var(--accent-strong);padding-left:4px}
.villes-colonnes em{font-style:normal;font-size:12.5px;color:var(--ink-3);flex-shrink:0}

/* Index alphabétique */
.index-alpha{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:30px}
.index-alpha a{
  width:36px;height:36px;border-radius:var(--r-sm);display:grid;place-items:center;
  font-size:14px;font-weight:600;background:var(--surface);border:1px solid var(--line);
  color:var(--ink-2);transition:all .16s ease;
}
.index-alpha a:hover{background:var(--accent-strong);color:#fff;border-color:var(--accent-strong)}
.groupe-alpha{margin-bottom:38px;scroll-margin-top:calc(var(--entete-h) + 24px)}
.groupe-alpha-titre{
  display:flex;align-items:center;gap:14px;margin-bottom:18px;
  font-size:22px;font-weight:700;color:var(--accent-strong);
}
.groupe-alpha-titre::after{content:"";flex:1;height:1px;background:var(--line)}

/* ---------------------------------------------------- Fiche entreprise */
.fiche-vignette{
  width:62px;height:62px;border-radius:18px;object-fit:cover;flex-shrink:0;
  border:2px solid rgba(255,255,255,.7);box-shadow:var(--shadow-md);
}
.fiche-photo{
  position:relative;margin:0 0 24px;border-radius:var(--r-lg);overflow:hidden;
  border:1px solid var(--line);background:var(--bg-alt);box-shadow:var(--shadow-sm);
}
.fiche-photo img{display:block;width:100%;aspect-ratio:16/9;object-fit:cover}
/* Petite galerie des photos suivantes, sous l'image principale. */
.fiche-photo-principale{position:relative}
.fiche-galerie{display:grid;grid-template-columns:repeat(5,1fr);gap:8px;padding:8px;background:var(--surface)}
.fiche-galerie a{display:block;border-radius:var(--r-sm);overflow:hidden}
.fiche-galerie img{aspect-ratio:1/1;transition:transform .3s ease}
.fiche-galerie a:hover img{transform:scale(1.05)}
@media (max-width:560px){.fiche-galerie{grid-template-columns:repeat(3,1fr)}}
.fiche-photo figcaption{
  position:absolute;right:12px;bottom:12px;font-size:11.5px;color:#fff;
  background:rgba(30,20,25,.62);padding:4px 10px;border-radius:var(--r-pill);
}
.fiche-grille{display:grid;grid-template-columns:1fr 372px;gap:32px;align-items:start}
.fiche-bloc{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:30px;box-shadow:var(--shadow-sm);margin-bottom:24px;
}
.fiche-bloc h2{font-size:22px;margin-bottom:6px}
.fiche-bloc-entete{display:flex;align-items:center;gap:13px;margin-bottom:24px}
.fiche-bloc-entete-icone{
  width:42px;height:42px;border-radius:12px;flex-shrink:0;
  background:var(--accent-soft);color:var(--accent-strong);display:grid;place-items:center;
}
.fiche-bloc-entete-icone svg{width:21px;height:21px}
.fiche-bloc-entete h2{margin-bottom:0}
.fiche-bloc-entete p{font-size:13.5px;color:var(--ink-3)}

/* Grille d'informations détaillées, une icône par donnée */
.fiche-infos{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}
.fiche-info{
  display:flex;gap:13px;align-items:flex-start;
  background:var(--surface-2);border:1px solid var(--line);border-radius:var(--r-md);
  padding:15px 17px;transition:border-color .2s,background .2s;
}
.fiche-info:hover{border-color:var(--line-strong);background:var(--surface)}
.fiche-info-icone{
  width:36px;height:36px;flex-shrink:0;border-radius:10px;
  background:var(--surface);color:var(--accent-strong);border:1px solid var(--line);
  display:grid;place-items:center;box-shadow:var(--shadow-xs);
}
.fiche-info-icone svg{width:18px;height:18px}
.fiche-info-corps{min-width:0;flex:1}
.fiche-info-cle{font-size:11px;font-weight:600;letter-spacing:.07em;text-transform:uppercase;color:var(--ink-3);margin-bottom:3px}
.fiche-info-valeur{font-size:15px;font-weight:500;color:var(--ink);line-height:1.4;word-break:break-word}
.fiche-info-valeur small{display:block;font-size:12.5px;font-weight:400;color:var(--ink-3);margin-top:2px}
.fiche-info-large{grid-column:1 / -1}

.fiche-carte-lien{
  display:flex;align-items:center;gap:14px;padding:18px 20px;margin-top:18px;
  background:linear-gradient(135deg,var(--accent-soft),var(--surface-2));
  border:1px solid rgba(242,140,31,.24);border-radius:var(--r-md);
  transition:transform .2s,box-shadow .2s;
}
.fiche-carte-lien:hover{transform:translateY(-2px);box-shadow:var(--shadow-md)}
.fiche-carte-lien-icone{width:44px;height:44px;border-radius:12px;background:var(--accent-strong);color:#fff;display:grid;place-items:center;flex-shrink:0;box-shadow:var(--shadow-accent)}
/* La pastille est orange : le tracé doit être explicitement blanc, sinon il
   hérite de la couleur du texte environnant et disparaît sur le fond. */
.fiche-carte-lien-icone svg{width:22px;height:22px;color:#fff;stroke:#fff}
.fiche-carte-lien b{display:block;font-size:15px;color:var(--ink)}
.fiche-carte-lien span{font-size:13px;color:var(--ink-3)}

/* Colonne latérale collante */
.fiche-cote{position:sticky;top:calc(var(--entete-h) + 24px)}
.encart-devis{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:26px;box-shadow:var(--shadow-lg);
}
.encart-devis h2{font-size:21px;margin-bottom:6px}
.encart-devis>p{font-size:14px;color:var(--ink-3);margin-bottom:20px}
.encart-atouts{display:flex;flex-direction:column;gap:12px;margin-bottom:22px}
.encart-atouts li{display:flex;align-items:center;gap:10px;font-size:14px;color:var(--ink-2)}
.encart-atouts svg{width:18px;height:18px;color:var(--success);flex-shrink:0}
/* Dans l'encart, le formulaire est déjà porté par la carte : lui redonner
   bordure, ombre et fond créerait une carte dans la carte. */
.encart-devis .formulaire{background:transparent;border:none;box-shadow:none;padding:0}
.encart-devis .formulaire::before{content:"";display:block;height:1px;background:var(--line);margin-bottom:4px}

/* ----------------------------------------------------- Cards prestations */
.prestations-grille{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.prestations-grille>:last-child:nth-child(3n+1){grid-column:2}
.carte-prestation{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);
  overflow:hidden;box-shadow:var(--shadow-xs);display:flex;flex-direction:column;
  transition:transform .22s ease,box-shadow .22s ease,border-color .22s ease;
}
.carte-prestation:hover{transform:translateY(-4px);box-shadow:var(--shadow-md);border-color:var(--line-strong)}
.carte-prestation-corps{padding:24px;display:flex;flex-direction:column;flex:1}
.carte-prestation h3{margin-bottom:9px;transition:color .18s}
.carte-prestation:hover h3{color:var(--accent-strong)}
.carte-prestation p{font-size:14.5px;flex:1}
.carte-prestation-icone{
  width:50px;height:50px;border-radius:14px;margin-bottom:18px;
  background:var(--accent-strong);color:#fff;display:grid;place-items:center;
  box-shadow:var(--shadow-accent);
}
.carte-prestation-icone svg{width:25px;height:25px}

/* Emplacement photo : le placeholder décoratif reste si l'image manque. */
.visuel{
  position:relative;aspect-ratio:3/2;overflow:hidden;flex-shrink:0;
  background:var(--motif-degrade);
}
.visuel-motif{position:absolute;inset:0;opacity:.5}
.visuel img{position:relative;width:100%;height:100%;object-fit:cover;transition:transform .45s ease}
.carte-prestation:hover .visuel img{transform:scale(1.05)}
.visuel-carre{aspect-ratio:1}
.visuel-portrait{aspect-ratio:4/3}
.visuel-large{aspect-ratio:21/9}
.visuel-arrondi{border-radius:var(--r-lg);border:1px solid var(--line);box-shadow:var(--shadow-md)}

/* -------------------------------------------------- Bloc éditorial 2 col */
.duo{display:grid;grid-template-columns:1.02fr .98fr;gap:56px;align-items:center}
.duo-inverse .duo-visuel{order:-1}
.duo-texte p{margin-bottom:16px}
.duo-liste{display:flex;flex-direction:column;gap:14px;margin-top:26px}
.duo-liste li{display:flex;gap:13px;align-items:flex-start}
.duo-liste-icone{
  width:34px;height:34px;flex-shrink:0;border-radius:10px;
  background:var(--accent-soft);color:var(--accent-strong);display:grid;place-items:center;
}
.duo-liste-icone svg{width:17px;height:17px}
.duo-liste b{display:block;font-size:15px;color:var(--ink);margin-bottom:1px}
.duo-liste span{font-size:14px;color:var(--ink-2)}
.duo-visuel{position:relative}
.duo-flottant{
  position:absolute;left:-24px;bottom:30px;display:flex;align-items:center;gap:13px;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);
  padding:14px 18px;box-shadow:var(--shadow-lg);
}
.duo-flottant-icone{width:40px;height:40px;border-radius:11px;flex-shrink:0;background:var(--accent-soft);color:var(--accent-strong);display:grid;place-items:center}
.duo-flottant b{display:block;font-size:14px;color:var(--ink)}
.duo-flottant span{font-size:12.5px;color:var(--ink-3)}

/* ------------------------------------------------------------- Étapes */
.etapes{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.etape{
  position:relative;background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r-lg);padding:32px 28px;box-shadow:var(--shadow-sm);overflow:hidden;
  transition:transform .2s ease,box-shadow .2s ease;
}
.etape:hover{transform:translateY(-4px);box-shadow:var(--shadow-md)}
.etape-numero{position:absolute;top:14px;right:22px;font-family:var(--police-titres);font-size:54px;font-weight:700;color:var(--line);line-height:1}
.etape-icone{
  width:54px;height:54px;border-radius:15px;margin-bottom:20px;position:relative;z-index:1;
  background:var(--accent);color:#fff;display:grid;place-items:center;box-shadow:var(--shadow-accent);
}
.etape-icone svg{width:26px;height:26px}
.etape h3{margin-bottom:9px}
.etape p{font-size:14.5px}

/* --------------------------------------------------------------- Tarifs */
.tableau-tarifs{
  width:100%;border-collapse:separate;border-spacing:0;
  background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--shadow-sm);
}
.tableau-tarifs th,.tableau-tarifs td{padding:15px 22px;text-align:left;font-size:15px;border-bottom:1px solid var(--line)}
.tableau-tarifs thead th{background:var(--bg-alt);font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3);font-weight:600}
.tableau-tarifs tbody tr:last-child td{border-bottom:none}
.tableau-tarifs tbody tr:hover{background:var(--surface-2)}
.tableau-tarifs td:first-child{font-weight:500;color:var(--ink)}
.tarif-prix{font-weight:700;color:var(--accent-strong);white-space:nowrap}
.tarif-unite{color:var(--ink-3);font-size:13.5px;white-space:nowrap}

/* ------------------------------------------------------------------ FAQ */
.faq-liste{display:flex;flex-direction:column;gap:13px}
.faq-item{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);
  box-shadow:var(--shadow-xs);overflow:hidden;transition:border-color .2s,box-shadow .2s;
}
.faq-item[open]{border-color:var(--line-strong);box-shadow:var(--shadow-sm)}
.faq-item summary{
  list-style:none;cursor:pointer;padding:19px 24px;font-weight:600;font-size:16px;
  color:var(--ink);display:flex;align-items:center;justify-content:space-between;gap:16px;
}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::after{
  content:"";width:10px;height:10px;flex-shrink:0;
  border-right:2px solid var(--accent);border-bottom:2px solid var(--accent);
  transform:rotate(45deg);transition:transform .25s ease;margin-top:-3px;
}
.faq-item[open] summary::after{transform:rotate(-135deg);margin-top:3px}
.faq-reponse{padding:0 24px 21px}
.faq-reponse p{font-size:15px}

/* ------------------------------------------------------------ Formulaire */
.formulaire{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:28px;box-shadow:var(--shadow-lg);display:grid;gap:15px;
}
.formulaire-entete{margin-bottom:2px}
.formulaire-entete h2{font-size:23px;margin-bottom:4px}
.formulaire-entete p{font-size:14px;color:var(--ink-3)}
.formulaire-large{grid-template-columns:repeat(6,1fr);padding:36px 42px;gap:18px}
.formulaire-large .formulaire-entete{grid-column:1 / -1}
.champ{display:flex;flex-direction:column;gap:7px}
.champ-duo{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.champ label{font-weight:500;font-size:13.5px;color:var(--ink-2)}
.champ label .requis{color:var(--accent-strong)}
.champ input,.champ select,.champ textarea{
  font-family:var(--police);font-size:15px;color:var(--ink);background:var(--surface);
  border:1px solid var(--line-strong);border-radius:var(--r-sm);padding:12px 14px;
  transition:border-color .18s,box-shadow .18s;width:100%;
}
.champ textarea{resize:vertical;min-height:96px}
.champ input::placeholder,.champ textarea::placeholder{color:var(--ink-3)}
.champ input:focus,.champ select:focus,.champ textarea:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-ring)}
.champ input.invalide,.champ select.invalide,.champ textarea.invalide{border-color:var(--danger)}
.erreur{font-size:12.5px;color:var(--danger)}
.champ-1{grid-column:span 1}.champ-2{grid-column:span 2}.champ-3{grid-column:span 3}.champ-4{grid-column:span 4}.champ-6{grid-column:span 6}

/* Choix multiple d'un questionnaire : des étiquettes cliquables plutôt qu'une
   colonne de cases, plus rapide à parcourir du regard et au pouce. */
.champ-cases{border:0;padding:0;margin:0;min-width:0}
.champ-cases legend{font-weight:500;font-size:13.5px;color:var(--ink-2);padding:0;margin-bottom:7px}
.cases{display:flex;flex-wrap:wrap;gap:8px}
.case{
  display:inline-flex;align-items:center;gap:8px;cursor:pointer;
  font-size:13.5px;font-weight:400;color:var(--ink-2);
  background:var(--surface);border:1px solid var(--line-strong);
  border-radius:var(--r-pill);padding:9px 14px;
  transition:border-color .18s,background .18s,color .18s;
}
.case:hover{border-color:var(--accent)}
.case input[type="checkbox"]{width:15px;height:15px;flex:0 0 15px;accent-color:var(--accent-strong);cursor:pointer}
.case:has(input:checked){border-color:var(--accent);background:var(--accent-soft);color:var(--ink)}
.case:focus-within{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-ring)}
.consentement{display:flex;align-items:flex-start;gap:10px;font-size:12.5px;color:var(--ink-3);line-height:1.5}
.consentement input[type="checkbox"]{width:16px;height:16px;flex:0 0 16px;margin-top:2px;accent-color:var(--accent-strong);cursor:pointer}
.consentement label{font-size:12.5px;color:var(--ink-3);font-weight:400;cursor:pointer}
.consentement a{color:var(--accent-hover);text-decoration:underline}
.consentement.invalide label{color:var(--danger)}
.formulaire-message{
  grid-column:1 / -1;font-size:14.5px;font-weight:500;border-radius:var(--r-sm);
  padding:13px 16px;text-align:center;display:none;
}
.formulaire-message.succes{display:block;color:var(--success);background:var(--success-soft)}
.formulaire-message.echec{display:block;color:var(--danger);background:var(--danger-soft)}

/* ------------------------------------------------------- Questionnaire */
.conteneur-formulaire{max-width:880px;margin:0 auto;padding:0 var(--pad-x)}
.formulaire-devis{background:transparent;border:none;box-shadow:none;padding:0;display:flex;flex-direction:column;gap:22px}

/* Le champ piège doit rester atteignable par les robots mais invisible et
   hors du parcours au clavier : d'où le retrait du flux plutôt que display:none. */
.pot-de-miel{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

.formulaire-destinataire{
  display:flex;gap:10px;align-items:flex-start;
  background:var(--accent-soft);border:1px solid var(--accent-ring);
  border-radius:var(--r-md);padding:14px 18px;font-size:14px;color:var(--ink-2);
}
.formulaire-destinataire strong{color:var(--accent-strong)}
/* Un display explicite l'emporte sur la règle par défaut de [hidden] : sans
   cette ligne, le bandeau resterait visible et vide hors contexte fiche. */
.formulaire-destinataire[hidden]{display:none}

.formulaire-section{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:28px 30px;box-shadow:var(--shadow-sm);
}
.formulaire-legende{
  display:flex;align-items:center;gap:13px;
  font-size:20px;font-weight:600;color:var(--ink);
  padding:0;margin-bottom:22px;width:100%;
}
.formulaire-numero{
  width:32px;height:32px;border-radius:var(--r-pill);flex-shrink:0;
  background:var(--accent-strong);color:#fff;display:grid;place-items:center;
  font-size:14px;font-weight:700;box-shadow:var(--shadow-accent);
}
.formulaire-champs{display:grid;grid-template-columns:repeat(6,1fr);gap:18px}
.champ-aide{font-size:12.5px;color:var(--ink-3);line-height:1.45}

.formulaire-pied{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:26px 30px;box-shadow:var(--shadow-sm);display:flex;flex-direction:column;gap:18px;
}
.formulaire-mention{font-size:12.5px;color:var(--ink-3);line-height:1.55;margin:0}
.formulaire-obligatoires{font-size:12.5px;color:var(--ink-3);margin:0;text-align:center}
.formulaire-obligatoires .requis{color:var(--accent-strong);font-weight:600}
.formulaire-pied .formulaire-message{margin:0}

/* --------------------------------------------------- Appel au devis */
.appel-devis{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:28px;box-shadow:var(--shadow-lg);
}
.appel-devis h2{font-size:24px;line-height:1.2;margin-bottom:10px}
.appel-devis-texte{font-size:15px;color:var(--ink-2);margin-bottom:20px}
.appel-devis .encart-atouts{margin-bottom:22px}
.appel-devis-mention{
  font-size:12px;color:var(--ink-3);line-height:1.5;margin-top:14px;
  padding-top:14px;border-top:1px solid var(--line);
}
.appel-devis-mention strong{color:var(--ink-2);font-weight:600}
.appel-devis-bandeau{display:grid;grid-template-columns:1.1fr auto;gap:32px;align-items:center;padding:32px 36px}
.appel-devis-bandeau .encart-atouts{margin-bottom:0}

/* ------------------------------------------------------------ Appel CTA */
.appel{
  position:relative;overflow:hidden;border-radius:var(--r-xl);
  background:var(--appel-degrade);
  padding:56px 56px;display:flex;align-items:center;justify-content:space-between;
  gap:40px;flex-wrap:wrap;box-shadow:var(--shadow-lg);
}
.appel-photo{position:absolute;inset:0;background-size:cover;background-position:center}
.appel-voile{position:absolute;inset:0;background:var(--appel-voile)}
.appel-texte{position:relative;z-index:1;max-width:620px}
.appel h2{color:#fff;margin-bottom:10px}
.appel p{color:rgba(255,255,255,.84);font-size:16.5px}
.appel-actions{position:relative;z-index:1;display:flex;gap:14px;flex-wrap:wrap}

/* --------------------------------------------------------------- Encarts */
.encart-info{
  display:flex;gap:16px;align-items:flex-start;
  background:var(--surface);border:1px solid var(--line);border-left:3px solid var(--accent);
  border-radius:var(--r-md);padding:20px 24px;box-shadow:var(--shadow-xs);
}
.encart-info-icone{width:38px;height:38px;flex-shrink:0;border-radius:11px;background:var(--accent-soft);color:var(--accent-strong);display:grid;place-items:center}
.encart-info h3{font-size:16px;margin-bottom:5px}
.encart-info p{font-size:14.5px}

/* ----------------------------------------------------------------- Pied */
.pied{background:var(--ink);color:rgba(255,255,255,.9);margin-top:0;position:relative}
.pied>*{position:relative}
.pied-appel{
  display:flex;align-items:center;justify-content:space-between;gap:32px;flex-wrap:wrap;
  padding:52px var(--pad-x);border-bottom:1px solid rgba(255,255,255,.09);
  max-width:var(--conteneur);margin:0 auto;width:100%;
}
.pied-appel h2{color:#fff;max-width:540px;font-size:30px}
.pied-principal{
  display:grid;grid-template-columns:1.7fr 1fr 1fr 1.1fr;gap:44px;
  padding:60px var(--pad-x) 44px;max-width:var(--conteneur);margin:0 auto;width:100%;
}
.pied .logo{color:#fff;margin-bottom:18px}
.pied .logo-texte span{color:rgba(255,255,255,.78)}
.pied-marque p{color:rgba(255,255,255,.86);font-size:14.5px;max-width:330px;margin-bottom:20px}
.pied-labels{display:flex;gap:8px;flex-wrap:wrap}
.pied-labels span{
  font-size:11px;letter-spacing:.04em;color:rgba(255,255,255,.80);
  border:1px solid rgba(255,255,255,.16);border-radius:var(--r-pill);padding:5px 12px;
}
.pied-colonne h3{
  font-family:var(--police);font-size:12.5px;font-weight:600;color:#fff;text-transform:uppercase;
  letter-spacing:.09em;margin-bottom:15px;
}
.pied-colonne a{display:block;font-size:14.5px;color:rgba(255,255,255,.88);padding:5px 0;transition:color .18s,padding-left .18s}
.pied-colonne a:hover{color:var(--accent);padding-left:4px}
.pied-bas{
  display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;
  padding:22px var(--pad-x);border-top:1px solid rgba(255,255,255,.09);
  font-size:12.5px;color:rgba(255,255,255,.86);max-width:var(--conteneur);margin:0 auto;width:100%;
}
/* La règle globale p{color:var(--ink-2)} l'emportait sur la couleur héritée
   du pied : le paragraphe de copyright s'affichait en gris foncé sur fond
   sombre, donc illisible. */
.pied-bas p{color:inherit}
.pied-legal{display:flex;gap:20px;flex-wrap:wrap}
.pied-legal a{color:rgba(255,255,255,.86);transition:color .18s}
.pied-legal a:hover{color:var(--accent)}

/* --------------------------------------------------- Page de confirmation */
.merci-section{padding-top:calc(var(--entete-h) + 64px);min-height:70vh;display:flex;align-items:center}
.merci-carte{
  max-width:680px;margin:0 auto;text-align:center;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-xl);
  padding:52px 56px;box-shadow:var(--shadow-lg);
}
.merci-coche{
  width:88px;height:88px;border-radius:50%;margin:0 auto 26px;
  background:var(--success-soft);color:var(--success);
  display:grid;place-items:center;
  border:2px solid var(--success-bordure);
}
.merci-coche svg{width:38px;height:38px;stroke-width:2.4}
.merci-carte h1{font-size:34px;line-height:1.15;margin-bottom:14px}
.merci-message{font-size:17px;color:var(--ink-2);margin-bottom:34px}
.merci-message strong{color:var(--accent-strong)}

.merci-etapes{
  display:flex;flex-direction:column;gap:14px;text-align:left;
  background:var(--surface-2);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:22px 24px;margin-bottom:32px;
}
.merci-etapes li{display:flex;align-items:flex-start;gap:13px}
.merci-etape-numero{
  width:22px;height:22px;border-radius:50%;flex-shrink:0;margin-top:5px;
  background:var(--accent-soft);color:var(--accent-strong);
  display:grid;place-items:center;font-size:11.5px;font-weight:700;
}
.merci-etape-icone{
  width:34px;height:34px;border-radius:10px;flex-shrink:0;
  background:var(--surface);border:1px solid var(--line);color:var(--accent-strong);
  display:grid;place-items:center;box-shadow:var(--shadow-xs);
}
.merci-etapes b{display:block;font-size:15px;color:var(--ink);margin-bottom:1px}
.merci-etapes span{font-size:14px;color:var(--ink-2);line-height:1.5}

.merci-actions{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin-bottom:26px}
.merci-note{font-size:13px;color:var(--ink-3);margin:0}
.merci-note a{color:var(--accent-hover);text-decoration:underline}

@media (max-width:720px){
  .choix-departement{padding:14px}
  .choix-departement-ligne{flex-direction:column}
  .choix-departement .bouton{width:100%}
  .merci-section{padding-top:calc(var(--entete-h) + 36px);min-height:auto}
  .merci-carte{padding:32px 22px;border-radius:var(--r-lg)}
  .merci-carte h1{font-size:25px}
  .merci-message{font-size:15.5px}
  .merci-coche{width:70px;height:70px}
  .merci-coche svg{width:31px;height:31px}
  .merci-etapes{padding:18px}
  .merci-actions{flex-direction:column}
  .merci-actions .bouton{width:100%}
}

/* ----------------------------------------------------------- Page texte */
.page-texte{padding:calc(var(--entete-h) + 52px) 0 var(--section-y)}
.page-texte h1{font-size:40px;margin-bottom:10px}
.page-texte h2{font-size:22px;margin:36px 0 12px}
.page-texte h3{font-size:17px;margin:24px 0 8px}
.page-texte p,.page-texte li{font-size:15.5px;color:var(--ink-2);line-height:1.72}
.page-texte p{margin-bottom:14px}
.page-texte ul,.page-texte ol{margin:0 0 16px 20px;list-style:disc}
.page-texte ol{list-style:decimal}
.page-texte li{margin-bottom:7px}
.page-texte a{color:var(--accent-hover);text-decoration:underline;text-underline-offset:2px}
.page-texte a:hover{color:var(--accent-strong)}
.page-texte .maj{font-size:13px;color:var(--ink-3);margin-bottom:26px}

/* ------------------------------------------------------------ Animations */
.apparition{opacity:0;transform:translateY(16px);transition:opacity .55s ease,transform .55s ease}
.apparition.visible{opacity:1;transform:none}
.grille-animee>*:nth-child(2){transition-delay:.06s}
.grille-animee>*:nth-child(3){transition-delay:.12s}
.grille-animee>*:nth-child(4){transition-delay:.18s}
.grille-animee>*:nth-child(5){transition-delay:.06s}
.grille-animee>*:nth-child(6){transition-delay:.12s}

@media (prefers-reduced-motion:reduce){
  .apparition{opacity:1;transform:none;transition:none}
  html{scroll-behavior:auto}
  *{animation-duration:.01ms !important;transition-duration:.01ms !important}
}

/* ------------------------------------------------------------- Responsive */
@media (max-width:1080px){
  .fiche-grille{grid-template-columns:1fr}
  .fiche-cote{position:static}
  .villes-grille{grid-template-columns:repeat(3,1fr)}
  .villes-colonnes{columns:3}
}
@media (max-width:960px){
  :root{--section-y:72px}
  h1{font-size:44px}
  .banniere-texte{max-width:640px}
  .compteurs{grid-template-columns:repeat(2,1fr)}
  .compteurs-chevauchants{margin-top:-40px}
  .entreprises-grille,.entreprises-grille-3{grid-template-columns:1fr}
  .prestations-grille{grid-template-columns:repeat(2,1fr)}
  .prestations-grille>:last-child:nth-child(3n+1){grid-column:auto}
  .etapes{grid-template-columns:1fr}
  .duo{grid-template-columns:1fr;gap:36px}
  .duo-inverse .duo-visuel{order:0}
  .duo-flottant{left:0}
  .formulaire-large{grid-template-columns:repeat(2,1fr);padding:28px}
  .formulaire-champs{grid-template-columns:repeat(2,1fr)}
  .champ-2,.champ-3,.champ-4{grid-column:auto}
  .champ-6{grid-column:1 / -1}
  .appel-devis-bandeau{grid-template-columns:1fr;gap:22px;padding:26px}
  .pied-principal{grid-template-columns:1fr 1fr;gap:34px}
}
@media (max-width:720px){
  :root{--pad-x:20px;--section-y:56px}
  h1{font-size:34px}
  h2{font-size:25px}
  .accroche,.banniere-accroche{font-size:16.5px}
  /* Le bouton de devis reste visible : c'est l'action principale du site, et
     la masquer derrière le menu burger coûtait des demandes sur mobile, où
     se fait l'essentiel des consultations. */
  .navigation{display:none}
  .bascule{display:flex}
  .entete-actions{gap:8px}
  .entete-actions .bouton{padding:10px 16px;font-size:13.5px}
  .logo-texte span{display:none}
  .navigation.ouvert{
    display:flex;flex-direction:column;gap:2px;position:absolute;top:var(--entete-h);
    left:0;right:0;background:var(--surface);border-bottom:1px solid var(--line);
    box-shadow:var(--shadow-md);padding:14px var(--pad-x);
  }
  .navigation.ouvert a,
  body:not(.page-claire) .entete:not(.defile) .navigation.ouvert a{padding:12px 14px;color:var(--ink-2);background:transparent}
  body:not(.page-claire) .entete:not(.defile) .navigation.ouvert a[aria-current]{color:var(--accent-strong);background:var(--accent-soft)}
  /* Menu ouvert en haut d'une bannière : l'entête passe en clair pour que le
     panneau ne flotte pas sous une barre transparente. */
  .entete:has(.navigation.ouvert){background:var(--surface);box-shadow:var(--shadow-sm)}
  body:not(.page-claire) .entete:has(.navigation.ouvert) .logo{color:var(--ink)}
  body:not(.page-claire) .entete:has(.navigation.ouvert) .logo-texte span{color:var(--ink-3)}
  body:not(.page-claire) .entete:has(.navigation.ouvert) .bascule span{background:var(--ink)}
  .banniere{padding:calc(var(--entete-h) + 52px) 0 56px}
  .banniere-compacte{padding:calc(var(--entete-h) + 40px) 0 44px}
  .banniere-compacte h1{font-size:30px}
  .banniere-actions{gap:10px}
  /* Les boutons refusent le retour à la ligne par défaut : sur un libellé
     long (« Devis à Bourg-en-Bresse ») cela élargissait tout le document. */
  .banniere-actions{flex-direction:column;align-items:stretch}
  .banniere-actions .bouton{width:100%;padding:14px 18px;font-size:15px;white-space:nowrap}
  .appel-actions{width:100%;flex-direction:column}
  .appel-actions .bouton{width:100%;white-space:nowrap}
  .section-entete-ligne .bouton{white-space:normal;text-align:center}
  .banniere-labels{gap:12px 20px}
  .compteurs{grid-template-columns:repeat(2,1fr);gap:12px}
  .compteur{padding:18px 18px}
  .compteur-valeur{font-size:28px}
  .compteurs-chevauchants{margin-top:-30px}
  .carte-entreprise{padding:20px}
  .carte-haut{flex-direction:column;gap:16px}
  .carte-photo{order:-1;flex-basis:auto;width:100%;max-width:none;max-height:none;aspect-ratio:16/9}
  .barre-outils .champ-select{flex:1 1 100%}
  .fiche-infos{grid-template-columns:1fr}
  .fiche-bloc{padding:22px}
  .prestations-grille{grid-template-columns:1fr}
  .villes-grille{grid-template-columns:repeat(2,1fr)}
  .villes-colonnes{columns:2;column-gap:20px}
  .appel{padding:36px 26px;text-align:left}
  .appel h2{font-size:24px}
  .formulaire-large{grid-template-columns:1fr;padding:22px}
  .formulaire-champs{grid-template-columns:1fr}
  .formulaire-champs>.champ{grid-column:auto}
  .formulaire-section,.formulaire-pied{padding:20px}
  .formulaire-legende{font-size:18px}
  .appel-devis{padding:22px}
  .appel-devis h2{font-size:21px}
  .champ-duo{grid-template-columns:1fr}
  .tableau-tarifs th,.tableau-tarifs td{padding:12px 14px;font-size:14px}
  .pied-principal{grid-template-columns:1fr;gap:30px;padding-top:44px}
  .pied-appel{padding:40px var(--pad-x)}
  .pied-appel h2{font-size:24px}
  .pied-bas{flex-direction:column;align-items:flex-start}
  .page-texte h1{font-size:29px}
  .barre-outils{padding:14px}
  .index-alpha a{width:32px;height:32px;font-size:13px}
}
@media (max-width:420px){
  .entete-actions .bouton{padding:10px 13px}
  .bouton-devis-long{display:none}
  .villes-grille{grid-template-columns:1fr}
  .villes-colonnes{columns:1}
  /* Deux compteurs par ligne même sur petit écran : empilés un par un, les
     quatre cases repoussaient le contenu d'un écran entier. */
  .compteurs{grid-template-columns:repeat(2,1fr);gap:10px}
  .compteur{padding:16px 14px}
  .compteur-icone{width:38px;height:38px;margin-bottom:12px}
  .compteur-valeur{font-size:24px}
  .compteur-libelle{font-size:12px;line-height:1.35}
}

/* ------------------------------------------ Section « Reconnaître les signaux » */
/* Fond bleu nuit : les questions à se poser avant de se lancer, puis le
   choix de l'installation avec l'aide « Votre situation ». */
.section-diagnostic{position:relative;overflow:hidden;background:linear-gradient(165deg,#0A1726 0%,#0F2236 70%,#173252 100%);color:#fff}
.section-diagnostic::after{
  content:'';position:absolute;left:0;right:0;bottom:0;height:40%;pointer-events:none;
  background:linear-gradient(180deg,transparent,rgba(217,72,15,.16));
}
.section-diagnostic .conteneur{position:relative;z-index:1}
.section-diagnostic h2{color:#fff}
.section-diagnostic .section-entete p{color:rgba(255,255,255,.80)}

.signes{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-bottom:56px}
.signe{
  position:relative;display:flex;flex-direction:column;
  background:rgba(255,255,255,.045);border:1px solid rgba(255,255,255,.10);
  border-radius:var(--r-lg);padding:26px 22px 24px;
  transition:background .2s ease,border-color .2s ease,transform .2s ease;
}
.signe:hover{background:rgba(255,255,255,.075);border-color:rgba(252,196,25,.40);transform:translateY(-3px)}
.signe-numero{
  position:absolute;top:16px;right:18px;font-family:var(--police-titres);
  font-size:15px;font-weight:600;color:rgba(255,255,255,.40);letter-spacing:.04em;
}
.signe-icone{
  width:48px;height:48px;border-radius:var(--r-md);margin-bottom:18px;
  background:var(--accent);color:#fff;display:grid;place-items:center;
}
.signe h3{color:#fff;font-size:18.5px;margin-bottom:10px}
.signe-diagnostic{
  align-self:flex-start;font-size:11.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:var(--signal);border-top:2px solid var(--signal);padding-top:7px;margin-bottom:12px;
}
.signe p{color:rgba(255,255,255,.80);font-size:14.5px}

.supports{
  display:grid;grid-template-columns:.8fr 1.2fr;gap:34px 44px;align-items:start;
  background:var(--surface);color:var(--ink);border-radius:var(--r-xl);
  padding:38px 40px;box-shadow:var(--shadow-lg);
}
.supports-entete h3{font-size:25px;margin-bottom:12px}
.supports-entete p{font-size:15px}
.supports-table{width:100%;border-collapse:collapse;font-size:14.5px}
.supports-table thead th{
  text-align:left;font-size:11.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink-3);padding:0 12px 12px;border-bottom:2px solid var(--line-strong);
}
.supports-table tbody th,.supports-table td{padding:14px 12px;border-bottom:1px solid var(--line);vertical-align:middle}
.supports-table tbody tr:last-child th,.supports-table tbody tr:last-child td{border-bottom:none}
.supports-table tbody th{font-weight:600;color:var(--ink);text-align:left;white-space:nowrap}
.supports-table td{color:var(--ink-2)}
.supports-table tbody tr{transition:background .18s}
.supports-table tbody tr:hover{background:var(--accent-soft)}
.supports-technique{
  display:inline-block;white-space:nowrap;font-weight:600;font-size:13px;color:var(--accent-strong);
  background:var(--accent-soft);border:1px solid var(--accent-ring);border-radius:var(--r-pill);padding:4px 11px;
}
.supports-note{
  grid-column:1/-1;display:flex;gap:10px;align-items:flex-start;font-size:13.5px;color:var(--ink-3);
  border-top:1px solid var(--line);padding-top:18px;
}
.supports-note svg{flex-shrink:0;margin-top:3px;color:var(--accent)}

@media (max-width:1080px){
  .signes{grid-template-columns:repeat(2,1fr)}
  .supports{grid-template-columns:1fr}
}
@media (max-width:640px){
  .signes{grid-template-columns:1fr;gap:12px;margin-bottom:36px}
  .supports{padding:26px 20px;border-radius:var(--r-lg)}
  /* Sur mobile, chaque support devient une petite fiche : le tableau à
     trois colonnes ne tiendrait pas sans défilement horizontal. */
  .supports-table thead{display:none}
  .supports-table,.supports-table tbody,.supports-table tr,.supports-table th,.supports-table td{display:block}
  .supports-table tbody tr{padding:14px 0;border-bottom:1px solid var(--line)}
  .supports-table tbody tr:last-child{border-bottom:none}
  .supports-table tbody th,.supports-table td{padding:2px 0;border:none}
  .supports-table td:last-child{margin-top:8px}
}

/* ------------------------------------------------------------- Impression */
@media print{
  .entete,.pied-appel,.appel,.formulaire,.encart-devis,.bascule,.pagination,.barre-outils{display:none !important}
  body{background:#fff}
  .fiche-bloc{box-shadow:none;border-color:#ccc;break-inside:avoid}
}

/* ------------------------------------------------ Appel de l'accueil (avant la FAQ) */
/* Carte sombre sur photo, texte puis boutons empilés, grand pictogramme
   translucide à droite. */
.section-appel-accueil{padding-bottom:24px}
.appel-empile{flex-direction:column;align-items:flex-start;justify-content:center;gap:34px;padding:72px 84px;min-height:360px}
.appel-empile .appel-texte{max-width:640px}
.appel-empile h2{font-size:40px;line-height:1.14;margin-bottom:14px}
.appel-empile p{font-size:18px}
.appel-decor{
  position:absolute;right:5%;top:50%;transform:translateY(-50%);z-index:1;pointer-events:none;
  color:var(--signal);opacity:.32;line-height:0;
}
.appel-decor svg{width:300px;height:300px;stroke-width:1.4}
.bouton-vif{background:var(--signal);color:var(--ink);box-shadow:0 12px 30px rgba(252,196,25,.38)}
.bouton-vif:hover{background:#FFD95A;transform:translateY(-1px)}
.bouton-vif svg{color:var(--ink)}
@media (max-width:960px){
  .appel-empile{padding:48px 36px;min-height:0}
  .appel-empile h2{font-size:30px}
  .appel-decor{right:-40px;opacity:.18}
  .appel-decor svg{width:220px;height:220px}
}
@media (max-width:640px){
  .appel-empile{padding:36px 22px;gap:24px}
  .appel-empile h2{font-size:25px}
  .appel-empile p{font-size:16px}
  .appel-empile .appel-actions{width:100%;flex-direction:column}
  .appel-empile .appel-actions .bouton{width:100%}
  .appel-decor{display:none}
}

/* ------------------------------------------------ Saison en cours (calendrier) */
/* La carte du mois courant s'allume : liseré lumineux, fond plus franc et
   badge « En ce moment » posé en haut à droite. */
.signe-actuel{
  background:rgba(255,255,255,.09);border-color:var(--signal);
  box-shadow:0 0 0 1px var(--signal),0 18px 40px -18px rgba(0,0,0,.55);
}
.signe-badge{
  position:absolute;top:-11px;right:18px;display:inline-flex;align-items:center;gap:6px;
  background:var(--signal);color:var(--ink);font-size:11px;font-weight:700;
  letter-spacing:.06em;text-transform:uppercase;padding:5px 11px;border-radius:999px;
}
.signe-badge::before{content:'';width:6px;height:6px;border-radius:50%;background:currentColor;animation:pouls 1.8s ease-in-out infinite}
@keyframes pouls{0%,100%{opacity:1}50%{opacity:.25}}

/* ------------------------------------------------ Barre d'action mobile */
/* Deux gestes à portée de pouce une fois la bannière dépassée : chercher un
   professionnel, demander un devis. Masquée sur grand écran. */
.barre-mobile{display:none}
@media (max-width:720px){
  .barre-mobile{
    position:fixed;left:12px;right:12px;bottom:calc(12px + env(safe-area-inset-bottom));z-index:90;
    display:grid;grid-template-columns:1fr 1.15fr;gap:8px;padding:8px;
    background:rgba(255,255,255,.92);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
    border:1px solid var(--line);border-radius:999px;box-shadow:0 14px 34px -12px rgba(0,0,0,.35);
    transform:translateY(140%);transition:transform .32s cubic-bezier(.2,.8,.2,1);
  }
  .barre-mobile.visible{transform:none}
  .barre-mobile-lien{
    display:flex;align-items:center;justify-content:center;gap:8px;min-height:46px;
    border-radius:999px;font-weight:600;font-size:14px;color:var(--ink);text-decoration:none;white-space:nowrap;
  }
  .barre-mobile-devis{background:var(--accent-strong);color:#fff}
  .avec-barre-mobile .pied{padding-bottom:84px}
  .avec-barre-mobile .retour-haut{bottom:calc(84px + env(safe-area-inset-bottom))}
}

/* ------------------------------------------------ Retour en haut */
/* L'anneau se remplit au fil de la lecture. */
.retour-haut{
  position:fixed;right:20px;bottom:24px;z-index:89;width:48px;height:48px;border-radius:50%;
  display:grid;place-items:center;border:0;cursor:pointer;color:var(--accent-strong);
  background:var(--surface);box-shadow:0 10px 26px -10px rgba(0,0,0,.35);
  opacity:0;pointer-events:none;transform:translateY(10px);transition:opacity .25s ease,transform .25s ease;
}
.retour-haut.visible{opacity:1;pointer-events:auto;transform:none}
.retour-haut:hover{color:var(--accent)}
.retour-haut svg:not(.retour-haut-anneau){transform:rotate(-90deg)}
.retour-haut-anneau{position:absolute;inset:0;width:100%;height:100%;transform:rotate(-90deg)}
.retour-haut-anneau circle{fill:none;stroke:var(--line);stroke-width:3}
.retour-haut-anneau .retour-haut-progres{stroke:var(--signal);stroke-linecap:round;stroke-dasharray:100;stroke-dashoffset:100;transition:stroke-dashoffset .1s linear}
.retour-haut:focus-visible{outline:3px solid var(--accent-ring);outline-offset:3px}
@media (prefers-reduced-motion:reduce){.barre-mobile,.retour-haut{transition:none}.signe-badge::before{animation:none}}
@media print{.barre-mobile,.retour-haut{display:none}}

/* ------------------------------------------------ Aide au choix « situation » */
/* Chaque situation est un interrupteur : en position allumée, la pastille
   passe en bleu nuit et le curseur en jaune soleil. Les formules qui
   répondent s'éclairent d'un dégradé solaire et reçoivent le badge soleil,
   les autres passent en grisé. */
.situations{margin-top:22px;padding-top:20px;border-top:1px solid var(--line)}
.situations-titre{display:block;font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3);margin-bottom:12px}
.situations-liste{display:flex;flex-wrap:wrap;gap:8px}
.situation{
  display:inline-flex;align-items:center;gap:10px;text-align:left;
  font:inherit;font-size:13.5px;font-weight:500;line-height:1.3;color:var(--ink-2);cursor:pointer;
  background:var(--surface);border:1.5px solid var(--line-strong);border-radius:999px;padding:6px 14px 6px 6px;
  transition:background .2s ease,border-color .2s ease,color .2s ease;
}
.situation::before{
  content:'';flex-shrink:0;width:32px;height:20px;border-radius:999px;
  background:radial-gradient(circle,#fff 0 6px,transparent 6.5px) no-repeat 3px 50%/14px 14px,var(--line-strong);
  box-shadow:inset 0 1px 2px rgba(0,0,0,.14);
  transition:background-position .22s ease,background-color .22s ease,box-shadow .22s ease;
}
.situation:hover{border-color:var(--accent);color:var(--ink)}
.situation[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:#fff}
.situation[aria-pressed="true"]::before{
  background-position:15px 50%;background-color:var(--signal);
  box-shadow:0 0 0 3px rgba(252,196,25,.22),0 0 12px rgba(252,196,25,.55);
}
.situation:focus-visible{outline:3px solid var(--accent-ring);outline-offset:2px}
.situations-aide{margin-top:12px;font-size:13.5px;color:var(--ink-3);min-height:2.6em}

.supports-table tr{transition:opacity .25s ease,background .25s ease,filter .25s ease}
.supports-table tr.support-attenue{opacity:.45;filter:grayscale(1)}
.supports-table tr.support-conseille{background:linear-gradient(90deg,rgba(252,196,25,.3) 0%,rgba(252,196,25,.08) 55%,rgba(252,196,25,0) 100%)}
.supports-table tr.support-conseille th{background:linear-gradient(var(--signal),var(--accent-strong)) left/4px 100% no-repeat}
.supports-table tr.support-conseille .supports-technique{background:var(--signal);border-color:var(--signal);color:var(--ink)}
.support-badge{
  display:flex;align-items:center;gap:6px;width:fit-content;margin-top:7px;
  font-size:10.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  color:var(--accent-lumineux);background:var(--ink);border-radius:999px;padding:4px 10px 4px 7px;
  white-space:nowrap;animation:badge-soleil .4s ease both;
}
.support-badge::before{
  content:'';width:13px;height:13px;background:var(--signal);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='4' fill='%23000'/%3E%3Cpath d='M12 2v2.5M12 19.5V22M2 12h2.5M19.5 12H22M4.9 4.9l1.8 1.8M17.3 17.3l1.8 1.8M4.9 19.1l1.8-1.8M17.3 6.7l1.8-1.8'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='4' fill='%23000'/%3E%3Cpath d='M12 2v2.5M12 19.5V22M2 12h2.5M19.5 12H22M4.9 4.9l1.8 1.8M17.3 17.3l1.8 1.8M4.9 19.1l1.8-1.8M17.3 6.7l1.8-1.8'/%3E%3C/svg%3E") center/contain no-repeat;
}
@keyframes badge-soleil{from{opacity:0;transform:scale(.85)}to{opacity:1;transform:none}}
@media (max-width:640px){
  .supports-table tr.support-conseille{margin:0 -12px;padding-left:16px;padding-right:12px;border-radius:12px}
  .supports-table tr.support-conseille th{background:none}
  .supports-table tr.support-conseille{box-shadow:inset 4px 0 0 var(--signal)}
}
@media (prefers-reduced-motion:reduce){.situation,.situation::before,.supports-table tr{transition:none}.support-badge{animation:none}}

/* ------------------------------------------------ Bannière « fenêtre » */
/* Fond uni ardoise, texte et recherche à gauche, photo encadrée à droite :
   dormant clair, croisillons qui la découpent en carreaux, reflet léger et
   appui de fenêtre. Le bas de la bannière est coupé en biais ; les
   compteurs viennent chevaucher la coupe. */
.hero-fenetre{
  min-height:0;padding:calc(var(--entete-h) + 64px) 0 128px;
  background:var(--banniere-fond);
  clip-path:polygon(0 0,100% 0,100% calc(100% - 64px),0 100%);
}
.hero-fenetre-grille{
  position:relative;z-index:2;display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);
  gap:64px;align-items:center;color:#fff;
}
.hero-fenetre .banniere-texte{max-width:620px}
.hero-fenetre h1{font-size:54px}
.hero-fenetre-cadre{
  position:relative;padding:16px;border-radius:20px;
  background:linear-gradient(160deg,#F5F7F9 0%,#DCE2E7 100%);
  box-shadow:0 44px 90px -20px rgba(0,0,0,.6),inset 0 0 0 1px rgba(255,255,255,.7);
}
.hero-fenetre-vitre{
  position:relative;aspect-ratio:5/5.4;max-height:540px;width:100%;
  border-radius:9px;overflow:hidden;background:#C8DCE8;
}
.hero-fenetre-vitre img{width:100%;height:100%;object-fit:cover;object-position:50% 40%}
/* Croisillons : un montant central et une traverse, couleur du dormant. */
.hero-fenetre-croisillon{
  position:absolute;inset:0;pointer-events:none;
  background:
    linear-gradient(#E6EBEF,#E6EBEF) 50% 0/12px 100% no-repeat,
    linear-gradient(#E6EBEF,#E6EBEF) 0 44%/100% 12px no-repeat;
  filter:drop-shadow(0 0 1px rgba(0,0,0,.25));
}
.hero-fenetre-reflet{
  position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(118deg,rgba(255,255,255,.26) 0%,rgba(255,255,255,.06) 30%,rgba(255,255,255,0) 46%);
}
.hero-fenetre-appui{
  position:absolute;left:-22px;right:-22px;bottom:-16px;height:18px;border-radius:5px;
  background:linear-gradient(#F1F4F6,#C3CBD2);box-shadow:0 14px 26px -6px rgba(0,0,0,.45);
}
.hero-fenetre .tableau-bord{left:auto;right:-40px;bottom:-34px;width:262px}
.hero-fenetre .banniere-labels svg{color:var(--signal)}
/* Accès rapide : raccourcis vers les départements les mieux pourvus. */
.acces-rapide{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:-6px 0 28px;max-width:640px}
.acces-rapide span{font-size:13px;font-weight:600;color:rgba(255,255,255,.66);margin-right:2px}
.acces-rapide a{
  font-size:13.5px;font-weight:500;color:#fff;text-decoration:none;padding:6px 13px;border-radius:999px;
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.22);
  transition:background .18s ease,color .18s ease,border-color .18s ease;
}
.acces-rapide a:hover,.acces-rapide a:focus-visible{background:var(--signal);border-color:var(--signal);color:var(--ink);outline:none}
@media (max-width:1100px){.hero-fenetre-grille{gap:44px}.hero-fenetre h1{font-size:46px}}
@media (max-width:960px){
  .hero-fenetre-grille{grid-template-columns:1fr;gap:40px}
  .hero-fenetre-cadre{max-width:520px;width:100%;margin:0 auto}
  .hero-fenetre-vitre{aspect-ratio:16/10}
}
@media (max-width:720px){
  .hero-fenetre{padding:calc(var(--entete-h) + 44px) 0 100px;clip-path:polygon(0 0,100% 0,100% calc(100% - 32px),0 100%)}
  .hero-fenetre h1{font-size:34px}
  .hero-fenetre-cadre{padding:10px;border-radius:14px}
  .hero-fenetre-appui{left:-12px;right:-12px;height:12px;bottom:-10px}
}

/* ------------------------------------------------ Bannière « arche » */
/* Fond bleu nuit uni, texte et recherche à gauche ; à droite, la photo
   découpée en arche de soleil levant, un halo doré derrière, et l'outil
   « orientation du toit » posé dessus. Le bas de la bannière s'arrondit. */
.hero-arche{
  min-height:0;padding:calc(var(--entete-h) + 64px) 0 132px;
  background:var(--banniere-fond);
  clip-path:ellipse(150% 100% at 50% 0%);
}
.hero-arche-grille{
  position:relative;z-index:2;display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
  gap:60px;align-items:center;color:#fff;
}
.hero-arche .banniere-texte{max-width:620px}
.hero-arche h1{font-size:52px}
.hero-arche .banniere-labels svg{color:var(--signal)}
.hero-arche-visuel{position:relative}
.hero-arche-halo{
  position:absolute;left:50%;top:-6%;width:118%;aspect-ratio:1;transform:translateX(-50%);
  border-radius:50%;pointer-events:none;
  background:radial-gradient(circle at 50% 40%,rgba(252,196,25,.34) 0%,rgba(252,196,25,.10) 38%,rgba(252,196,25,0) 64%);
}
.hero-arche-photo{
  position:relative;aspect-ratio:4/4;max-height:460px;width:88%;margin:0 auto;
  border-radius:999px 999px 26px 26px;overflow:hidden;
  border:6px solid rgba(255,255,255,.92);box-shadow:0 40px 80px -24px rgba(0,0,0,.65);
  background:#1A3350;
}
.hero-arche-photo img{width:100%;height:100%;object-fit:cover;object-position:50% 78%}
/* Outil « orientation du toit » : boutons radio, résultat lu à l'écran. */
.orientation{
  position:relative;z-index:2;margin:-54px auto 0;max-width:430px;
  background:rgba(255,255,255,.97);color:var(--ink);border-radius:var(--r-lg);
  padding:18px 20px 16px;box-shadow:0 26px 60px -18px rgba(0,0,0,.55);
}
.orientation-titre{display:flex;align-items:center;gap:8px;font-size:14px;font-weight:600;margin-bottom:12px}
.orientation-titre svg{color:var(--accent-strong)}
.orientation-choix{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;background:var(--bg-alt);border-radius:var(--r-md);padding:4px}
.orientation-bouton{
  font:inherit;font-size:12.5px;font-weight:600;line-height:1.2;color:var(--ink-2);cursor:pointer;
  background:transparent;border:0;border-radius:calc(var(--r-md) - 3px);padding:9px 4px;
  transition:background .18s ease,color .18s ease,box-shadow .18s ease;
}
.orientation-bouton:hover{color:var(--ink)}
.orientation-bouton[aria-checked="true"]{background:#fff;color:var(--ink);box-shadow:0 2px 8px rgba(0,0,0,.12),inset 0 -3px 0 var(--signal)}
.orientation-bouton:focus-visible{outline:3px solid var(--accent-ring);outline-offset:1px}
.orientation-resultat{display:flex;align-items:baseline;gap:10px;margin-top:12px}
.orientation-resultat b{font-family:var(--police-titres);font-size:26px;font-weight:700;color:var(--accent);white-space:nowrap}
.orientation-resultat span{font-size:13.5px;color:var(--ink-2);line-height:1.4}
.orientation-note{margin-top:8px;font-size:11.5px;color:var(--ink-3)}
@media (max-width:1100px){.hero-arche-grille{gap:40px}.hero-arche h1{font-size:44px}}
@media (max-width:960px){
  .hero-arche-grille{grid-template-columns:1fr;gap:36px}
  .hero-arche-visuel{max-width:520px;width:100%;margin:0 auto}
  .hero-arche-photo{aspect-ratio:4/3.4}
}
@media (max-width:720px){
  .hero-arche{padding:calc(var(--entete-h) + 44px) 0 104px;clip-path:ellipse(220% 100% at 50% 0%)}
  .hero-arche h1{font-size:34px}
  .hero-arche-photo{width:100%;border-width:4px}
  .orientation{max-width:none}
  .orientation-bouton{font-size:11.5px;padding:9px 2px}
}
@media (prefers-reduced-motion:reduce){.orientation-bouton{transition:none}}