/* =========================================================================
   Annuaire Réparation de téléphones à domicile — feuille de style.
   Base : l'annuaire modèle (_exemple template) — Poppins pour le texte,
   boutons en pilule, cards arrondies à ombres douces. Identité « charge » :
   titres h1 et h2 en Bricolage Grotesque (le mot clé du titre d'accueil souligné d'une
   barre de charge bleu ciel), carmin pour les boutons et les liens, fond
   gris perle, bleu ciel 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 : photos des prestations dans un cadre de
   smartphone (bords épais, encoche), carte OpenStreetMap sur chaque fiche,
   raccourcis « Devis direct » vers le formulaire prérempli, aide au choix
   « Votre situation », barre d'action mobile et retour en haut.
   ========================================================================= */

:root{
  --accent:#9E1F35;
  --accent-hover:#7E1829;
  --accent-soft:#F8EBEE;
  --accent-ring:rgba(179,38,62,.24);
  --accent-strong:#B3263E;
  --accent-strong-hover:#931F33;
  /* Accent lisible sur les fonds sombres (bannières, bloc d'appel). */
  --accent-lumineux:#C6E1FF;

  --bg:#F6F6F8;
  --bg-alt:#ECECF0;
  --surface:#FFFFFF;
  --surface-2:#FAFAFC;

  --ink:#141519;
  --ink-2:#373941;
  --ink-3:#5D5F69;
  --line:#E2E2E8;
  --line-strong:#CBCBD4;

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

  --shadow-xs:0 1px 2px rgba(20,21,25,.04);
  --shadow-sm:0 2px 8px rgba(20,21,25,.06);
  --shadow-md:0 8px 24px rgba(20,21,25,.08);
  --shadow-lg:0 20px 48px rgba(20,21,25,.12);
  --shadow-accent:0 8px 24px rgba(158,31,53,.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(246,246,248,.86);
  --logo-degrade:linear-gradient(140deg,#D35A6F,#9E1F35 55%,#7E1829);
  --nav-survol:rgba(158,31,53,.09);
  --danger-soft:rgba(192,57,43,.08);
  --success-bordure:rgba(46,125,79,.28);
  --motif-degrade:linear-gradient(145deg,#F8EBEE 0%,#8EC5FF 55%,#ECECF0 100%);
  --banniere-fond:linear-gradient(160deg,#0D0E11 0%,#16171D 55%,#2A2C36 100%);
  --banniere-voile:linear-gradient(90deg,rgba(11,12,15,.90) 0%,rgba(11,12,15,.82) 44%,rgba(20,21,27,.56) 62%,rgba(20,21,27,.34) 80%,rgba(20,21,27,.20) 100%);
  --banniere-voile-accueil:linear-gradient(90deg,rgba(10,11,14,.92) 0%,rgba(10,11,14,.84) 42%,rgba(18,19,25,.54) 64%,rgba(18,19,25,.22) 84%,rgba(18,19,25,.06) 100%);
  --banniere-voile-etroit:linear-gradient(180deg,rgba(10,11,14,.88) 0%,rgba(11,12,15,.82) 60%,rgba(20,21,27,.76) 100%);
  --appel-degrade:linear-gradient(135deg,#0D0E11 0%,#16171D 55%,#931F33 100%);
  --appel-voile:linear-gradient(120deg,rgba(11,12,15,.90) 0%,rgba(16,17,22,.80) 55%,rgba(147,31,51,.56) 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;

  /* Bleu ciel : l'accent vif (bouton de recherche, barre de charge du titre
     et du logo). Jamais en texte sur fond clair. */
  --signal:#8EC5FF;
  --signal-fort:#1D5C9E;


  --police:'Poppins',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  /* Titres en Bricolage Grotesque : une display expressive, aux formes vives. */
  --police-titres:'Bricolage Grotesque','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{font-family:var(--police-titres)}
/* Bricolage Grotesque reste réservé aux grands titres : h3 en Poppins, plus lisible. */
h3{font-family:var(--police)}
h1{font-weight:700;font-size:52px;line-height:1.06;letter-spacing:-.025em}
h2{font-weight:700;font-size:38px;line-height:1.12;letter-spacing:-.02em;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:60px}
@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:800;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(142,197,255,.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(142,197,255,.55)}
.choix-departement select:focus{outline:none;border-color:var(--signal);box-shadow:0 0 0 4px rgba(142,197,255,.25)}
/* Bouton bleu ciel, 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(142,197,255,.35);
}
.choix-departement .bouton:hover{background:#B5D8FF;transform:translateY(-1px);box-shadow:0 14px 34px rgba(142,197,255,.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(142,197,255,.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(142,197,255,.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(142,197,255,.55)}80%,100%{box-shadow:0 0 0 9px rgba(142,197,255,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:400;color:var(--line);line-height:1}
/* Étapes sans icône : le numéro prend sa place, au-dessus du titre. */
.etape-sans-icone .etape-numero{position:static;display:block;margin-bottom:14px;font-size:44px;color:var(--accent);opacity:.35}
.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 carbone : les questions à se poser avant de faire réparer, puis le
   choix de la formule avec l'aide « Votre situation ». */
.section-diagnostic{position:relative;overflow:hidden;background:linear-gradient(165deg,#0D0E11 0%,#16171D 70%,#24262F 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(179,38,62,.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(142,197,255,.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(142,197,255,.38)}
.bouton-vif:hover{background:#B5D8FF;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 » */
/* Puces à cocher sous le titre du tableau : les lignes qui répondent à la
   situation décrite s'allument, les autres s'effacent légèrement. */
.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{
  font:inherit;font-size:13.5px;font-weight:500;color:var(--ink-2);cursor:pointer;
  background:var(--surface);border:1.5px solid var(--line-strong);border-radius:999px;padding:8px 14px;
  transition:background .18s ease,border-color .18s ease,color .18s ease,transform .18s ease;
}
.situation:hover{border-color:var(--accent);color:var(--accent)}
.situation[aria-pressed="true"]{background:var(--accent-strong);border-color:var(--accent-strong);color:#fff}
.situation[aria-pressed="true"]::before{content:'✓ '}
.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}
.supports-table tr.support-attenue{opacity:.42}
.supports-table tr.support-conseille{background:var(--accent-soft)}
.supports-table tr.support-conseille th{box-shadow:inset 3px 0 0 var(--signal)}
.support-badge{
  display:block;width:fit-content;margin-top:6px;font-size:10.5px;font-weight:700;
  letter-spacing:.05em;text-transform:uppercase;color:var(--ink);background:var(--signal);
  padding:3px 8px;border-radius:999px;white-space:nowrap;
}
@media (prefers-reduced-motion:reduce){.situation,.supports-table tr{transition: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(142,197,255,.34) 0%,rgba(142,197,255,.10) 38%,rgba(142,197,255,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}}

/* ------------------------------------------------ Bannière « plan » */
/* Écran partagé : la photo occupe la moitié gauche sur toute la hauteur, le
   texte, la recherche et le sélecteur d'implantation la moitié droite sur
   fond anthracite. Un bandeau façon plan de travail (chant laiton) ferme la
   bannière ; les compteurs viennent s'y poser. */
.hero-plan{
  min-height:0;padding:calc(var(--entete-h) + 56px) 0 112px;
  background:var(--banniere-fond);overflow:hidden;
}
.hero-plan-photo{position:absolute;top:0;bottom:22px;left:0;width:46%;overflow:hidden;border-radius:0 0 140px 0}
.hero-plan-photo img{width:100%;height:100%;object-fit:cover;object-position:50% 50%}
.hero-plan-photo::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(21,24,23,.62) 0%,rgba(21,24,23,0) 24%),linear-gradient(90deg,rgba(0,0,0,0) 60%,rgba(25,28,27,.28) 100%)}
.hero-plan-grille{position:relative;z-index:2;display:grid;grid-template-columns:42% 1fr;gap:56px;color:#fff}
.hero-plan .banniere-texte{max-width:600px}
.hero-plan h1{font-size:56px}
.hero-plan .banniere-labels svg{color:var(--signal)}
.hero-plan-plinthe{
  position:absolute;left:0;right:0;bottom:0;height:22px;z-index:1;
  background:linear-gradient(180deg,#E9E3D6 0%,#D9D1BF 100%);
  box-shadow:inset 0 3px 0 var(--signal),0 -10px 24px rgba(0,0,0,.25);
}
/* Sélecteur d'implantation : quatre plans dessinés, conseil lu à l'écran. */
.implantation{margin:-4px 0 26px;max-width:600px}
.implantation-titre{font-size:13px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:rgba(255,255,255,.66);margin-bottom:10px}
.implantation-choix{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.implantation-bouton{
  display:flex;flex-direction:column;align-items:center;gap:6px;cursor:pointer;
  font:inherit;font-size:12.5px;font-weight:600;color:rgba(255,255,255,.85);
  background:rgba(255,255,255,.05);border:1.5px solid rgba(255,255,255,.16);border-radius:var(--r-md);padding:10px 6px 9px;
  transition:background .18s ease,border-color .18s ease,color .18s ease;
}
.implantation-bouton svg{width:52px;height:46px;fill:rgba(255,255,255,.55);transition:fill .18s ease}
.implantation-bouton .plan-piece{fill:none;stroke:rgba(255,255,255,.28);stroke-width:1.5;stroke-dasharray:3 3}
.implantation-bouton:hover{border-color:rgba(142,197,255,.6)}
.implantation-bouton[aria-checked="true"]{background:rgba(142,197,255,.14);border-color:var(--signal);color:#fff}
.implantation-bouton[aria-checked="true"] svg{fill:var(--signal)}
.implantation-bouton:focus-visible{outline:3px solid var(--accent-ring);outline-offset:2px}
.implantation-texte{margin-top:10px;font-size:14px;line-height:1.5;color:rgba(255,255,255,.82);min-height:3em}
@media (max-width:1100px){.hero-plan h1{font-size:46px}.hero-plan-grille{grid-template-columns:38% 1fr;gap:40px}.hero-plan-photo{width:42%}}
@media (max-width:960px){
  .hero-plan{padding-top:var(--entete-h);flex-direction:column;align-items:stretch}
  .hero-plan-photo{position:relative;width:100%;height:280px;border-radius:0 0 90px 0;margin-bottom:36px}
  .hero-plan-grille{grid-template-columns:1fr}
  .hero-plan-vide{display:none}
}
@media (max-width:720px){
  .hero-plan{padding-bottom:96px}
  .hero-plan h1{font-size:36px}
  .hero-plan-photo{height:220px;border-radius:0 0 64px 0}
  .implantation-choix{grid-template-columns:repeat(2,1fr)}
}
@media (prefers-reduced-motion:reduce){.implantation-bouton,.implantation-bouton svg{transition:none}}

/* ------------------------------------------------ Bannière « matières » */
/* Mise en page centrée sur la photo sous voile : titre, recherche et rangée
   d'échantillons au centre. Un seuil métallique (barre de transition entre
   deux sols) ferme la bannière ; les compteurs s'y posent. */
.hero-matieres{min-height:0;padding:calc(var(--entete-h) + 60px) 0 120px;text-align:center}
.hero-matieres .banniere-voile{background:radial-gradient(ellipse 70% 60% at 50% 42%,rgba(24,18,13,.80) 0%,rgba(24,18,13,.62) 60%,rgba(24,18,13,.50) 100%)}
.hero-matieres-centre{display:flex;flex-direction:column;align-items:center;max-width:900px}
.hero-matieres h1{font-size:58px;max-width:820px}
.hero-matieres .banniere-accroche{max-width:700px;margin-left:auto;margin-right:auto}
.hero-matieres .choix-departement{width:100%;max-width:680px;text-align:left}
.hero-matieres .banniere-labels{justify-content:center}
.hero-matieres .banniere-labels svg{color:var(--signal)}
.hero-matieres-seuil{
  position:absolute;left:0;right:0;bottom:0;height:14px;z-index:1;
  background:linear-gradient(180deg,#E3E1DC 0%,#B9B5AD 45%,#D9D6CF 55%,#A9A49B 100%);
  box-shadow:0 -8px 22px rgba(0,0,0,.28);
}
/* Échantillons : vignette de matière, nom, et fiche lue à l'écran. */
.matieres{width:100%;max-width:760px;margin:2px 0 28px}
.matieres-titre{font-size:13px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:rgba(255,255,255,.66);margin-bottom:12px}
.matieres-choix{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.matiere{
  display:flex;flex-direction:column;align-items:center;gap:8px;cursor:pointer;font:inherit;
  background:rgba(255,255,255,.06);border:1.5px solid rgba(255,255,255,.18);border-radius:var(--r-lg);padding:10px 10px 12px;
  color:rgba(255,255,255,.88);transition:background .18s ease,border-color .18s ease,transform .18s ease;
}
.matiere:hover{transform:translateY(-2px);border-color:rgba(142,197,255,.6)}
.matiere[aria-checked="true"]{background:rgba(142,197,255,.16);border-color:var(--signal);color:#fff}
.matiere:focus-visible{outline:3px solid var(--accent-ring);outline-offset:2px}
.matiere-echantillon{display:block;width:100%;aspect-ratio:16/9;border-radius:calc(var(--r-lg) - 6px);overflow:hidden;box-shadow:inset 0 0 0 1px rgba(255,255,255,.18)}
.matiere-echantillon img,.matiere-uni{display:block;width:100%;height:100%;object-fit:cover}
.matiere-nom{font-size:14px;font-weight:600}
.matieres-fiche{
  display:grid;grid-template-columns:repeat(3,1fr);gap:1px;margin-top:14px;text-align:left;
  background:rgba(255,255,255,.14);border-radius:var(--r-md);overflow:hidden;
}
.matieres-fiche div{background:rgba(24,18,13,.72);padding:12px 14px}
.matieres-fiche dt{font-size:11.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--signal);margin-bottom:4px}
.matieres-fiche dd{font-size:13.5px;line-height:1.45;color:rgba(255,255,255,.88);margin:0}
@media (max-width:960px){.hero-matieres h1{font-size:44px}}
@media (max-width:720px){
  .hero-matieres{padding:calc(var(--entete-h) + 40px) 0 96px}
  .hero-matieres h1{font-size:34px}
  .matieres-choix{grid-template-columns:repeat(2,1fr);gap:8px}
  .matieres-fiche{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){.matiere{transition:none}.matiere:hover{transform:none}}

/* ------------------------------------------------ Bannière « marche » */
/* Texte et recherche à gauche ; la photo occupe la droite et déborde
   jusqu'au bord de l'écran (coins arrondis côté texte). L'estimateur de
   surface est posé sur la photo. Le bas de la bannière dessine une marche :
   la partie droite descend d'un niveau, comme la marche d'une terrasse. */
.hero-marche{
  min-height:0;padding:calc(var(--entete-h) + 60px) 0 140px;
  background:var(--banniere-fond);overflow:hidden;
  clip-path:polygon(0 0,100% 0,100% 100%,54% 100%,54% calc(100% - 56px),0 calc(100% - 56px));
}
.hero-marche-photo{position:absolute;top:calc(var(--entete-h) + 24px);bottom:56px;right:0;width:46%;overflow:hidden;border-radius:28px 0 0 28px}
.hero-marche-photo img{width:100%;height:100%;object-fit:cover;object-position:50% 50%}
.hero-marche-photo::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(12,26,32,0) 45%,rgba(12,26,32,.55) 100%)}
.hero-marche-grille{position:relative;z-index:2;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.86fr);gap:48px;align-items:end;color:#fff}
.hero-marche .banniere-texte{max-width:600px}
.hero-marche h1{font-size:54px}
.hero-marche .banniere-labels svg{color:var(--signal)}
.hero-marche-outil{display:flex;justify-content:flex-end;padding-bottom:8px}
/* Estimateur : deux curseurs, plan à l'échelle, surface et conseil. */
.estimateur{
  width:100%;max-width:400px;background:rgba(255,255,255,.97);color:var(--ink);
  border-radius:var(--r-lg);padding:18px 20px 16px;box-shadow:0 28px 60px -18px rgba(0,0,0,.6);
}
.estimateur-titre{display:flex;align-items:center;gap:8px;font-size:14px;font-weight:700;margin-bottom:12px}
.estimateur-titre svg{color:var(--accent-strong)}
.estimateur-corps{display:grid;grid-template-columns:1fr 92px;gap:16px;align-items:center}
.estimateur-champ{display:grid;grid-template-columns:1fr auto;align-items:center;gap:2px 10px;margin-bottom:10px;font-size:13px;color:var(--ink-2)}
.estimateur-champ output{font-weight:700;color:var(--ink);font-variant-numeric:tabular-nums}
.estimateur-champ input{grid-column:1 / -1;width:100%;accent-color:var(--accent-strong);cursor:pointer}
.estimateur-plan{width:92px;height:92px;display:flex;align-items:center;justify-content:center;background:var(--bg-alt);border-radius:var(--r-md)}
.estimateur-rect{
  display:block;max-width:80px;max-height:80px;width:80%;height:60%;
  background:repeating-linear-gradient(90deg,#D8A866 0 7px,#C99550 7px 8px);
  border-radius:3px;box-shadow:0 2px 6px rgba(0,0,0,.18);transition:width .15s ease,height .15s ease;
}
.estimateur-resultat{display:flex;align-items:baseline;gap:10px;margin-top:6px;padding-top:12px;border-top:1px solid var(--line)}
.estimateur-resultat b{font-family:var(--police-titres);font-size:26px;font-weight:800;color:var(--accent);white-space:nowrap;font-variant-numeric:tabular-nums}
.estimateur-resultat span{font-size:13px;line-height:1.4;color:var(--ink-2)}
@media (max-width:1100px){.hero-marche h1{font-size:44px}.hero-marche-grille{gap:28px}}
@media (max-width:960px){
  .hero-marche{padding-top:var(--entete-h);padding-bottom:110px;clip-path:polygon(0 0,100% 0,100% 100%,60% 100%,60% calc(100% - 36px),0 calc(100% - 36px));flex-direction:column;align-items:stretch}
  .hero-marche-photo{position:relative;top:auto;bottom:auto;width:100%;height:260px;border-radius:0 0 28px 28px;margin-bottom:32px}
  .hero-marche-grille{grid-template-columns:1fr}
  .hero-marche-outil{justify-content:stretch}
  .estimateur{max-width:none}
}
@media (max-width:720px){.hero-marche h1{font-size:34px}.hero-marche-photo{height:210px}}
@media (prefers-reduced-motion:reduce){.estimateur-rect{transition:none}}

/* ------------------------------------------------ Bannière « coupe » */
/* Photo de chantier sous voile ; texte et recherche à gauche ; à droite la
   coupe de sol : couches géologiques (informatives), graduations de
   profondeur, tige de forage qui descend et plage de profondeur indicative
   en cyan. Une ligne de sol (bande herbe/terre) ferme la bannière. */
.hero-coupe{min-height:0;padding:calc(var(--entete-h) + 56px) 0 112px}
.hero-coupe-grille{position:relative;z-index:2;display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:56px;align-items:center;color:#fff}
.hero-coupe .banniere-texte{max-width:600px}
.hero-coupe .banniere-labels svg{color:var(--signal)}
.hero-coupe-sol{
  position:absolute;left:0;right:0;bottom:0;height:16px;z-index:1;
  background:linear-gradient(180deg,#5E8F3A 0 5px,#6B4A2E 5px 100%);
  box-shadow:0 -10px 24px rgba(0,0,0,.3);
}
.coupe{
  justify-self:end;width:100%;max-width:440px;background:rgba(255,255,255,.97);color:var(--ink);
  border-radius:var(--r-lg);padding:18px 20px 14px;box-shadow:0 28px 64px -18px rgba(0,0,0,.65);
}
.coupe-titre{display:flex;align-items:center;gap:8px;font-size:14px;font-weight:700;margin-bottom:12px}
.coupe-titre svg{color:var(--accent-strong)}
.coupe-choix{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;background:var(--bg-alt);border-radius:var(--r-md);padding:4px;margin-bottom:14px}
.coupe-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;
}
.coupe-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)}
.coupe-bouton:focus-visible{outline:3px solid var(--accent-ring);outline-offset:1px}
.coupe-schema{position:relative;height:240px;margin-left:46px}
.coupe-couches{position:absolute;inset:0;display:flex;flex-direction:column;border-radius:8px;overflow:hidden}
.couche{position:relative;display:flex;align-items:center;justify-content:space-between;padding:0 10px 0 34px;font-size:11.5px;color:rgba(255,255,255,.92);border-bottom:1px solid rgba(0,0,0,.18)}
.couche span{font-weight:600}
.couche em{font-style:normal;opacity:.8}
.coupe-graduations{position:absolute;left:-46px;top:0;bottom:0;width:40px}
.coupe-graduations li{position:absolute;right:0;transform:translateY(-50%);font-size:10.5px;font-weight:600;color:var(--ink-3);font-variant-numeric:tabular-nums}
.coupe-graduations li:first-child{transform:none}
.coupe-tige{position:absolute;left:14px;top:0;width:6px;background:linear-gradient(180deg,#D6DBE4,#8C96A8);border-radius:0 0 3px 3px;box-shadow:0 0 0 1px rgba(0,0,0,.25);transition:height .6s cubic-bezier(.3,.7,.2,1);z-index:2}
.coupe-tige::after{content:'';position:absolute;left:-3px;bottom:-6px;width:12px;height:8px;background:#8C96A8;clip-path:polygon(0 0,100% 0,50% 100%)}
.coupe-zone{position:absolute;left:0;right:0;background:rgba(142,197,255,.32);box-shadow:inset 3px 0 0 var(--signal),inset 0 1px 0 var(--signal),inset 0 -1px 0 var(--signal);transition:top .6s cubic-bezier(.3,.7,.2,1),height .6s cubic-bezier(.3,.7,.2,1);z-index:1;pointer-events:none}
.coupe-fiche{display:grid;grid-template-columns:1fr 1.35fr;gap:12px;margin-top:12px;padding-top:12px;border-top:1px solid var(--line)}
.coupe-fiche dt{font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--accent);margin-bottom:3px}
.coupe-fiche dd{margin:0;font-size:13px;line-height:1.45;color:var(--ink-2)}
.coupe-fiche dd[data-coupe-profondeur]{font-family:var(--police-titres);font-size:20px;font-weight:800;color:var(--ink);line-height:1.2}
.coupe-note{margin-top:8px;font-size:11px;color:var(--ink-3)}
@media (max-width:1100px){.hero-coupe-grille{gap:32px}.hero-coupe h1{font-size:44px}}
@media (max-width:960px){.hero-coupe-grille{grid-template-columns:1fr}.coupe{justify-self:stretch;max-width:none}}
@media (max-width:720px){.hero-coupe{padding:calc(var(--entete-h) + 40px) 0 96px}.hero-coupe h1{font-size:34px}.coupe-schema{height:200px}.coupe-fiche{grid-template-columns:1fr}}
@media (prefers-reduced-motion:reduce){.coupe-tige,.coupe-zone,.coupe-bouton{transition:none}}

/* -------------------------------------------- Bannière « charge » (accueil) */
/* Bannière classique, photo d'atelier en fond. Le mot clé du titre est
   souligné d'une barre de charge bleu ciel aux trois quarts remplie ; sous
   la recherche, des raccourcis mènent droit au formulaire prérempli. */
/* Interligne plus ample pour loger la barre de charge sous le mot clé. */
.banniere-accueil h1{line-height:1.2}
.banniere h1 em{font-style:normal;color:#fff;position:relative;white-space:nowrap;padding-bottom:.06em;
  background:
    linear-gradient(90deg,var(--signal) 0 74%,rgba(142,197,255,.22) 74% 100%) 0 100%/100% .11em no-repeat}
.compteur-valeur{font-weight:700;letter-spacing:-.02em}
.raccourcis{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin:26px 0 0}
h1,h2,h3,h4,.compteur-valeur{font-variant-numeric:lining-nums}
/* Libellé seul sur sa ligne, raccourcis légers en dessous : un bloc aéré. */
.raccourcis span{flex-basis:100%;font-size:11.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.6);margin-bottom:2px}
.raccourcis a{
  padding:8px 16px;border-radius:999px;border:1px solid rgba(255,255,255,.22);
  background:transparent;color:rgba(255,255,255,.92);font-size:13.5px;font-weight:500;
  transition:background .2s,border-color .2s,color .2s;
}
.raccourcis a:hover{background:var(--signal);border-color:var(--signal);color:var(--ink)}
/* Sur grand écran, les cinq raccourcis tiennent sur une seule ligne. */
@media (min-width:961px){.raccourcis{width:760px;max-width:calc(100vw - 96px)}}
.raccourcis a:focus-visible{outline:3px solid var(--signal);outline-offset:2px}
/* Les photos des prestations s'affichent dans un cadre de smartphone :
   bords épais carbone et encoche. */
.carte-prestation .visuel{margin:12px 12px 0;border-radius:26px;border:7px solid #16171D;box-shadow:0 0 0 1px #2A2C36}
.carte-prestation .visuel::before{
  content:'';position:absolute;top:6px;left:50%;transform:translateX(-50%);width:54px;height:12px;
  border-radius:8px;background:#16171D;z-index:2;
}

/* ------------------------------------- Carte OpenStreetMap des fiches */
.fiche-osm{margin:20px 0 0;border-radius:var(--r-md);overflow:hidden;border:1px solid var(--line);background:var(--bg-alt)}
.fiche-osm iframe{display:block;width:100%;height:280px;border:0}
.fiche-osm figcaption{padding:8px 12px;font-size:12px;color:var(--ink-3);background:var(--surface)}
.fiche-osm figcaption a{color:var(--accent)}

@media (max-width:960px){.banniere-accueil h1{font-size:46px}}
@media (max-width:720px){
  .banniere-accueil h1{font-size:36px}
  h1{font-size:32px}
  h2{font-size:27px}
  .banniere h1 em{white-space:normal}
  .raccourcis{gap:8px;margin:22px 0 0}
  .raccourcis a{padding:7px 14px;font-size:13px}
  .fiche-osm iframe{height:220px}
}