:root{
  --fond:#060402;
  --fond-900:#040201;
  --fond-700:#432715;
  --accent:#FAD887;
  --accent-700:#F8C54C;
  --accent-texte:#030201;
  --ciel:#F4F4F4;
  --brume:#E4E3E3;
  --bord:#CDCDCC;
  --encre:#070707;
  --gris:#757473;
  --blanc:#FFFFFF;
}
/* Socle couvreur. Feuille de style unique.
   Les couleurs ne sont PAS ecrites ici : generer.py prepend un bloc :root
   construit a partir de palette.json, lui-meme releve sur le logo.
   Aucune requete vers un tiers : pas de police distante, pas d icone distante. */

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--blanc); color:var(--encre);
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  font-size:17px; line-height:1.65; -webkit-font-smoothing:antialiased;
}
/* Pas d overflow-x:hidden sur body : il masquerait un debordement reel au lieu
   de le corriger, et fausserait la mesure. Les debordements se traitent a la source. */
img{max-width:100%; height:auto; display:block}
svg{flex:0 0 auto}
a{color:var(--accent-700); text-decoration-thickness:1px; text-underline-offset:2px}
h1,h2,h3,h4{font-weight:800; line-height:1.14; letter-spacing:-.02em; text-wrap:balance; margin:0 0 .5em}
h1{font-size:clamp(1.9rem,4.4vw,3.2rem)}
h2{font-size:clamp(1.5rem,3vw,2.25rem)}
h3{font-size:clamp(1.08rem,1.6vw,1.28rem); font-weight:700; letter-spacing:-.01em}
p{margin:0 0 1em; overflow-wrap:break-word}
/* Double anneau : une seule teinte ne peut pas passer a la fois sur le blanc
   et sur le fond sombre. Le trait clair double le trait fonce. */
:focus-visible{outline:3px solid var(--accent); outline-offset:2px;
               box-shadow:0 0 0 6px rgba(255,255,255,.75); border-radius:5px}
.section--fond :focus-visible,.hero :focus-visible,.pied :focus-visible,.rappel :focus-visible{
  box-shadow:0 0 0 6px rgba(0,0,0,.55)}

.enveloppe{width:100%; max-width:1180px; margin:0 auto; padding:0 20px}
.section{padding:clamp(46px,6.5vw,84px) 0}
.section--ciel{background:var(--ciel)}
.surtitre{font-weight:700; font-size:.8rem; letter-spacing:.14em; text-transform:uppercase;
          color:var(--accent-700); margin:0 0 .6em}
.section--fond .surtitre{color:var(--accent)}
.chapeau{font-size:1.07rem; color:var(--gris); max-width:66ch}
.section--fond .chapeau{color:#B9C6D2}
.centre{text-align:center}
.centre .chapeau{margin-left:auto; margin-right:auto}
.ico{width:19px; height:19px; stroke:currentColor; fill:none; stroke-width:2.2;
     stroke-linecap:round; stroke-linejoin:round}

/* ---------- boutons ---------- */
.bouton{display:inline-flex; align-items:center; gap:10px; justify-content:center;
        font-weight:700; font-size:1rem; padding:14px 22px; border-radius:10px;
        border:2px solid transparent; text-decoration:none; cursor:pointer;
        transition:transform .12s ease, background .2s ease, border-color .2s ease}
.bouton:active{transform:translateY(1px)}
.bouton--tel{background:var(--accent); color:var(--accent-texte)}
.bouton--tel:hover{background:var(--accent-700); color:#fff}
.bouton--devis{background:var(--fond); color:#fff}
.bouton--devis:hover{background:var(--fond-700)}
.bouton--fantome{background:transparent; color:#fff; border-color:rgba(255,255,255,.5)}
.bouton--fantome:hover{border-color:#fff; background:rgba(255,255,255,.1)}
.bouton--clair{background:#fff; color:var(--fond); border-color:var(--bord)}
.bouton--clair:hover{border-color:var(--fond)}

/* ---------- bandeau + entete ---------- */
.bandeau{background:var(--fond-900); color:#EDE3CC; font-size:.85rem; padding:7px 0}
.bandeau .enveloppe{display:flex; gap:8px 26px; flex-wrap:wrap; justify-content:center; align-items:center}
.bandeau span{display:inline-flex; align-items:center; gap:7px}
.bandeau .ico{width:15px; height:15px; stroke:var(--accent)}
.bandeau a{color:#fff; font-weight:600; text-decoration:none}

.entete{position:sticky; top:0; z-index:50; background:rgba(255,255,255,.97);
        border-bottom:1px solid var(--bord)}
.entete .enveloppe{display:flex; align-items:center; justify-content:space-between;
                   gap:12px; padding-top:10px; padding-bottom:10px}
.marque{display:flex; align-items:center; gap:11px; text-decoration:none; color:var(--fond); min-width:0}
.marque img{width:auto; height:92px; max-width:52vw; flex:0 1 auto; object-fit:contain}
@media (max-width:560px){ .marque img{height:64px} }
.marque b{font-size:1.1rem; font-weight:800; letter-spacing:-.02em; line-height:1.15; display:block}
.marque small{display:block; font-size:.72rem; color:var(--gris); letter-spacing:.05em;
              text-transform:uppercase; font-weight:600}
.nav{display:flex; align-items:center; gap:20px; min-width:0}
.nav a{color:var(--fond); font-weight:600; font-size:.94rem; text-decoration:none; white-space:nowrap}
.nav a:hover,.nav a[aria-current]{color:var(--accent-700)}
.entete-actions{display:flex; align-items:center; gap:9px}
.entete .bouton{padding:11px 16px; font-size:.94rem}

/* ---------- Navigation en menus deroulants groupes (tache 107) ----------
   Tout repose sur <details>/<summary>. Sans JavaScript le menu s ouvre et se
   ferme quand meme, a la souris comme au clavier (Entree ou Espace sur le
   resume). script.js n ajoute que le confort : Echap, clic au dehors, un seul
   tiroir ouvert a la fois, et la hauteur disponible reelle du panneau mobile.
   Les tiroirs du bureau sont ancres sur le bord DROIT de .nav : leur bord
   droit est donc toujours dans l ecran, quelle que soit la largeur. */
.nav{position:relative; gap:24px}
.nav-groupe{position:static}
.nav-groupe>summary{list-style:none; cursor:pointer; display:inline-flex; align-items:center;
                    gap:6px; color:var(--fond); font-weight:600; font-size:.94rem;
                    white-space:nowrap; padding:10px 0}
.nav-groupe>summary::-webkit-details-marker{display:none}
.nav-groupe>summary::marker{content:""}
.nav-groupe>summary:hover,.nav-groupe[open]>summary{color:var(--accent-700)}
.nav-groupe>summary .ico{width:16px; height:16px; transition:transform .18s ease}
.nav-groupe[open]>summary .ico{transform:rotate(180deg)}
.nav-tiroir{position:absolute; top:calc(100% + 10px); right:0; left:auto; z-index:70;
            width:max-content; max-width:min(640px, calc(100vw - 40px));
            max-height:min(72vh, 560px); overflow-y:auto; overscroll-behavior:contain;
            background:#fff; border:1px solid var(--bord); border-radius:12px;
            box-shadow:0 18px 44px rgba(0,0,0,.16); padding:12px; display:block}
.nav-grille{display:flex; gap:18px; align-items:flex-start}
.nav-colonne{min-width:0; flex:1 1 0}
.nav-colonne--duo{columns:2; column-gap:18px}
.nav-colonne-titre{font-size:.71rem; letter-spacing:.12em; text-transform:uppercase;
                   color:var(--gris); font-weight:700; margin:2px 0 6px 11px}
.nav-tiroir a{display:block; padding:8px 11px; border-radius:8px; text-decoration:none;
              color:var(--fond); font-weight:600; font-size:.93rem; break-inside:avoid;
              overflow-wrap:break-word; hyphens:auto}
.nav-tiroir a:hover{background:var(--ciel); color:var(--accent-700)}
.nav-tiroir a[aria-current]{color:var(--accent-700); background:var(--ciel)}
.nav-tiroir a.nav-tout{font-weight:700; margin-bottom:8px; padding-bottom:10px;
                       border-bottom:1px solid var(--bord); border-radius:8px 8px 0 0}

/* Menu mobile : des sections repliables, pas une liste a plat.
   max-height + overflow-y : le panneau ne depasse jamais du bas de l ecran. */
.menu{display:none; position:relative}
.menu>summary{list-style:none; cursor:pointer; display:flex; align-items:center; gap:8px;
              font-weight:700; color:var(--fond); padding:11px 14px;
              border:1px solid var(--bord); border-radius:10px}
.menu>summary::-webkit-details-marker{display:none}
.menu>summary::marker{content:""}
.menu-panneau{position:absolute; right:0; top:calc(100% + 8px); width:min(92vw,332px);
              max-height:calc(100vh - 220px); overflow-y:auto; overscroll-behavior:contain;
              -webkit-overflow-scrolling:touch;
              background:#fff; border:1px solid var(--bord); border-radius:12px;
              box-shadow:0 18px 44px rgba(0,0,0,.16); padding:8px; display:grid; gap:2px; z-index:70}
.menu-panneau>a{display:block; padding:12px 13px; border-radius:8px; text-decoration:none;
                color:var(--fond); font-weight:700}
.menu-panneau>a:hover{background:var(--ciel)}
.menu-panneau>a.menu-devis{background:var(--fond); color:#fff; text-align:center; margin-top:5px}
.menu-panneau>a.menu-devis:hover{background:var(--fond-700)}
.menu-groupe>summary{list-style:none; cursor:pointer; display:flex; align-items:center;
                     justify-content:space-between; gap:8px; padding:12px 13px;
                     border-radius:8px; color:var(--fond); font-weight:700; font-size:.97rem}
.menu-groupe>summary::-webkit-details-marker{display:none}
.menu-groupe>summary::marker{content:""}
.menu-groupe>summary:hover{background:var(--ciel)}
.menu-groupe>summary .ico{width:17px; height:17px; transition:transform .18s ease}
.menu-groupe[open]>summary{background:var(--ciel); color:var(--accent-700)}
.menu-groupe[open]>summary .ico{transform:rotate(180deg)}
.menu-sous{display:grid; gap:1px; margin:1px 0 6px 13px; padding-left:9px;
           border-left:2px solid var(--brume)}
.menu-sous a{display:block; padding:9px 10px; border-radius:7px; text-decoration:none;
             color:var(--fond); font-weight:500; font-size:.92rem}
.menu-sous a:hover{background:var(--ciel)}
.menu-sous-titre{font-size:.69rem; letter-spacing:.12em; text-transform:uppercase;
                 color:var(--gris); font-weight:700; margin:9px 0 2px 10px}
.menu-panneau a[aria-current],.menu-sous a[aria-current]{color:var(--accent-700); font-weight:700}
@media (max-width:1040px){ .nav{display:none} .menu{display:block} }
@media (max-width:560px){ .entete-tel-texte{display:none} .marque small{display:none} }
@media (max-width:380px){ .marque b{font-size:1rem} }
/* Sous 760 px, la barre basse porte deja « Nos agences » et « Devis ».
   Les deux memes boutons dans l en-tete faisaient double emploi et,
   faute de place, recouvraient le nom de la marque : on les retire la. */
@media (max-width:760px){ .entete .bouton--tel, .entete .bouton--devis{display:none} }

/* ---------- heros ---------- */
.hero{position:relative; background:var(--fond); color:#fff; isolation:isolate}
.hero-image{position:absolute; inset:0 0 0 auto; width:56%; height:100%; object-fit:cover; z-index:0}
.hero::after{content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:linear-gradient(100deg,var(--fond) 0%,var(--fond) 44%,rgba(0,0,0,.55) 62%,rgba(0,0,0,.15) 100%)}
.hero .enveloppe{position:relative; z-index:2; padding-top:clamp(44px,6vw,88px); padding-bottom:clamp(44px,6vw,88px)}
.hero-texte{max-width:620px}
.hero h1{color:#fff; margin-bottom:.4em}
.hero h1 em{font-style:normal; color:var(--accent); display:block}
.hero-chapeau{font-size:1.12rem; color:#D3DCE5; max-width:56ch; margin-bottom:1.5em}
.hero-actions{display:flex; gap:12px; flex-wrap:wrap; margin-bottom:24px}
.hero-preuves{display:flex; gap:9px 28px; flex-wrap:wrap; font-size:.93rem; color:#C2CEDA;
              padding-top:19px; border-top:1px solid rgba(255,255,255,.18)}
.hero-preuves span{display:inline-flex; align-items:center; gap:8px}
.hero-preuves .ico{stroke:var(--accent); width:17px; height:17px}
@media (max-width:900px){
  .hero-image{position:relative; width:100%; height:220px}
  .hero::after{background:linear-gradient(180deg,rgba(0,0,0,.3),var(--fond) 76%)}
  .hero .enveloppe{padding-top:32px}
}
.hero--page{background:var(--fond); padding:clamp(32px,4.5vw,56px) 0 clamp(28px,3.5vw,46px)}
.hero--page h1{color:#fff; margin-bottom:.35em}
.hero--page .chapeau{color:#C2CEDA; margin-bottom:1.2em}
.fil{font-size:.84rem; color:#9DAEBE; margin-bottom:1em}
.fil a{color:#C9D6E2; text-decoration:none}
.fil a:hover{text-decoration:underline}

/* ---------- grilles et cartes ---------- */
.grille{display:grid; gap:22px}
.grille>*{min-width:0}
.g2{grid-template-columns:repeat(2,minmax(0,1fr))}
.g3{grid-template-columns:repeat(3,minmax(0,1fr))}
.g4{grid-template-columns:repeat(4,minmax(0,1fr))}
@media (max-width:900px){ .g3,.g4{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:640px){ .g2,.g3,.g4{grid-template-columns:minmax(0,1fr)} }
.carte{background:#fff; border:1px solid var(--bord); border-radius:14px; padding:25px;
       box-shadow:0 1px 2px rgba(0,0,0,.04),0 10px 26px rgba(0,0,0,.05);
       display:flex; flex-direction:column; min-width:0}
.carte h3{margin-bottom:.45em}
.carte p{color:var(--gris); margin-bottom:0}
.carte-lien{margin-top:auto; padding-top:16px; font-weight:700; color:var(--accent-700);
            text-decoration:none; display:inline-flex; align-items:center; gap:7px}
.carte-lien:hover{gap:11px}
.pastille{width:46px; height:46px; border-radius:12px; background:var(--ciel);
          display:flex; align-items:center; justify-content:center; margin-bottom:15px; flex:0 0 auto}
.pastille .ico{width:23px; height:23px; stroke:var(--accent-700)}
/* La carte-photo garde sa direction propre : une variante ne doit pas heriter
   en silence du flex-direction de .carte. */
.carte-photo{padding:0; overflow:hidden; display:flex; flex-direction:column}
.carte-photo>img{width:100%; aspect-ratio:3/2; object-fit:cover}
.carte-photo-corps{padding:21px 23px 23px; display:flex; flex-direction:column; flex:1; min-width:0}

/* ---------- duo texte + image ---------- */
.duo{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr);
     gap:clamp(26px,3.6vw,52px); align-items:center}
.duo--inverse .duo-media{order:-1}
.duo-media{margin:0; min-width:0}
.duo-media img{width:100%; border-radius:14px; aspect-ratio:4/3; object-fit:cover;
               box-shadow:0 2px 6px rgba(0,0,0,.08),0 18px 44px rgba(0,0,0,.12)}
.duo-media figcaption{font-size:.85rem; color:var(--gris); margin-top:10px}
.section--fond .duo-media figcaption{color:#9DAEBE}
@media (max-width:820px){ .duo{grid-template-columns:minmax(0,1fr)} .duo--inverse .duo-media{order:0} }
.bandeau-photo img{width:100%; border-radius:14px; aspect-ratio:21/9; object-fit:cover}

/* ---------- listes a coches ---------- */
.coches{list-style:none; padding:0; margin:0; display:grid; gap:11px}
.coches li{display:flex; gap:11px; align-items:flex-start}
.coches .ico{width:20px; height:20px; margin-top:3px; stroke:var(--accent-700)}
.section--fond .coches .ico{stroke:var(--accent)}

/* ---------- etapes ---------- */
.etapes{counter-reset:e; display:grid; gap:20px; grid-template-columns:repeat(4,minmax(0,1fr))}
@media (max-width:900px){ .etapes{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:560px){ .etapes{grid-template-columns:minmax(0,1fr)} }
.etape{position:relative; padding-top:52px; min-width:0}
.etape::before{counter-increment:e; content:counter(e,decimal-leading-zero);
  position:absolute; top:0; left:0; font-weight:800; font-size:1.02rem;
  width:40px; height:40px; border-radius:11px; background:var(--accent); color:var(--accent-texte);
  display:flex; align-items:center; justify-content:center}
.etape h3{font-size:1.1rem}
.etape p{color:#B9C6D2; font-size:.96rem; margin:0}

/* ---------- communes ---------- */
.villes{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px}
@media (max-width:900px){ .villes{grid-template-columns:repeat(3,minmax(0,1fr))} }
@media (max-width:640px){ .villes{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:400px){ .villes{grid-template-columns:minmax(0,1fr)} }
.ville-lien{display:flex; flex-direction:column; gap:1px; padding:13px 15px; background:#fff;
            border:1px solid var(--bord); border-radius:10px; text-decoration:none;
            color:var(--fond); font-weight:600; min-width:0;
            transition:border-color .15s ease, transform .15s ease}
.ville-lien:hover{border-color:var(--accent); transform:translateY(-2px)}
.ville-lien span{overflow-wrap:anywhere}
.ville-lien small{color:var(--gris); font-weight:500; font-size:.8rem}

/* ---------- FAQ ---------- */
.faq{display:grid; gap:12px; max-width:860px; margin:0 auto}
.faq details{background:#fff; border:1px solid var(--bord); border-radius:12px}
.faq summary{cursor:pointer; list-style:none; padding:17px 21px; font-weight:700; font-size:1.02rem;
             color:var(--fond); display:flex; justify-content:space-between; align-items:center; gap:16px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+"; font-size:1.5rem; color:var(--accent-700); line-height:1; flex:0 0 auto}
.faq details[open] summary::after{content:"\2212"}
.faq .reponse{padding:0 21px 19px; color:var(--gris)}
.faq .reponse p:last-child{margin-bottom:0}

/* ---------- formulaire ---------- */
.devis{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr);
       gap:clamp(26px,3.6vw,50px); align-items:start}
@media (max-width:860px){ .devis{grid-template-columns:minmax(0,1fr)} }
.formulaire{background:#fff; border:1px solid var(--bord); border-radius:14px;
            padding:clamp(20px,2.6vw,30px); box-shadow:0 2px 6px rgba(0,0,0,.06),0 20px 48px rgba(0,0,0,.1);
            position:relative}
.champ{margin-bottom:15px; min-width:0}
.champ label{display:block; font-weight:600; font-size:.89rem; margin-bottom:6px; color:var(--fond)}
.champ input,.champ select,.champ textarea{width:100%; max-width:100%; padding:12px 14px;
  border:1px solid var(--bord); border-radius:9px; font:inherit; font-size:1rem;
  color:var(--encre); background:#fff}
.champ input:focus,.champ select:focus,.champ textarea:focus{border-color:var(--accent); outline:none}
.champ textarea{min-height:104px; resize:vertical}
.champ--duo{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:15px}
@media (max-width:480px){ .champ--duo{grid-template-columns:minmax(0,1fr)} }
/* Le pot de miel est cale sur le formulaire, pas sur la page : un element
   pousse a -9999px dans un conteneur non positionne etire la page. */
.pot-de-miel{position:absolute; left:-9999px; top:0; width:1px; height:1px; overflow:hidden}
.formulaire .bouton{width:100%; margin-top:6px}
.mention{font-size:.81rem; color:var(--gris); margin:12px 0 0}
.retour{margin-top:14px; padding:12px 14px; border-radius:9px; font-size:.93rem; display:none}
.retour--ok{display:block; background:#E7F6EC; color:#10602E; border:1px solid #A8DEBC}
.retour--ko{display:block; background:#FDECEC; color:#8A1C1C; border:1px solid #F3B9B9}

/* ---------- rappel ---------- */
.rappel{background:var(--fond-900); color:#fff}
.rappel .enveloppe{display:flex; align-items:center; justify-content:space-between; gap:24px;
                   flex-wrap:wrap; padding-top:38px; padding-bottom:38px}
.rappel h2{margin-bottom:.25em; color:#fff}
.rappel p{color:#B9C6D2; margin:0; max-width:52ch}

/* ---------- pied ---------- */
.pied{background:var(--fond); color:#D7CDB6; font-size:.92rem; padding:50px 0 24px}
.pied a{color:#F3E9D2; text-decoration:none}
.pied a:hover{text-decoration:underline}
.pied h4{color:#fff; font-size:.8rem; letter-spacing:.13em; text-transform:uppercase; margin:0 0 13px}
.pied-grille{display:grid; grid-template-columns:1.6fr 1fr 1fr 1.2fr; gap:30px}
@media (max-width:860px){ .pied-grille{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:520px){ .pied-grille{grid-template-columns:minmax(0,1fr)} }
.pied-grille>*{min-width:0}
.pied ul{list-style:none; padding:0; margin:0; display:grid; gap:8px}
.pied li{display:flex; gap:9px; align-items:flex-start}
.pied .ico{width:17px; height:17px; margin-top:4px; stroke:var(--accent)}
.pied-marque{display:flex; align-items:center; gap:12px; margin-bottom:15px}
/* Le pictogramme peut etre exactement du ton du pied : pose tel quel il
   disparait. Il repose donc sur une pastille claire. */
.pied-pastille{background:#fff; border-radius:12px; padding:6px; display:flex; flex:0 0 auto}
.pied-pastille img{width:42px; height:42px; display:block; object-fit:contain}
.pied-marque b{color:#fff; font-size:1.15rem; letter-spacing:-.02em}
.pied-bas{border-top:1px solid rgba(255,255,255,.15); margin-top:34px; padding-top:19px;
          display:flex; justify-content:space-between; gap:14px; flex-wrap:wrap;
          font-size:.85rem; color:#9DAEBE}
.pied-villes{font-size:.85rem; line-height:1.9; overflow-wrap:break-word}
.pied-villes a{color:#B4C2CF}

/* ---------- barre mobile ---------- */
.barre-mobile{position:fixed; left:0; right:0; bottom:0; z-index:60; display:none;
  background:rgba(255,255,255,.98); border-top:1px solid var(--bord);
  padding:9px 12px calc(9px + env(safe-area-inset-bottom)); gap:9px}
.barre-mobile .bouton{flex:1; padding:13px 10px; font-size:.96rem; min-width:0}
@media (max-width:760px){ .barre-mobile{display:flex} body{padding-bottom:76px} }

/* ---------- apparition ---------- */
/* L animation ne masque le contenu QUE si le script a pose la classe js sur
   <html>. Deux pannes sont possibles, les deux sont couvertes :
   1. aucun JavaScript ne tourne : la classe js n est jamais posee, aucune de
      ces regles ne s applique, tout est visible ;
   2. le script en ligne pose la classe js mais script.js ne charge pas (404,
      CSP, bloqueur, cache) : plus personne ne pose la classe vu, et le
      contenu resterait invisible pour toujours. Le meme script en ligne arme
      donc un filet, js-secours, qui rend tout visible au bout de 2,2 s. */
.js .apparait{opacity:0; transform:translateY(16px); transition:opacity .5s ease, transform .5s ease}
.js .apparait.vu,
.js-secours .apparait{opacity:1; transform:none}
@media (prefers-reduced-motion:reduce){
  .js .apparait{opacity:1; transform:none; transition:none}
  html{scroll-behavior:auto}
}
.saut{position:absolute; left:-9999px; top:0}
.saut:focus{position:static; display:inline-block; margin:8px; padding:10px 14px;
            background:var(--accent); color:var(--accent-texte); font-weight:700; border-radius:8px}

/* ======================================================================
   Agences : la carte de France et les neuf fiches.
   La carte est un SVG inline fabrique par outils/carte_france.py a partir
   de donnees officielles. Aucune requete vers un tiers.
   ====================================================================== */
.agences-bloc{display:grid; grid-template-columns:minmax(0,1fr); gap:34px; align-items:start}
@media (min-width:900px){
  .agences-bloc{grid-template-columns:minmax(0,420px) minmax(0,1fr); gap:44px}
}
.agences-carte{min-width:0}
.carte-fr{width:100%; height:auto; display:block}
.carte-fr .dep{fill:rgba(255,255,255,.14); stroke:rgba(255,255,255,.3); stroke-width:1.4;
               vector-effect:non-scaling-stroke}
.carte-fr .dep--couvert{fill:var(--accent); stroke:var(--accent-700)}
.carte-fr .halo{fill:#fff; opacity:.22}
.carte-fr .point{fill:#fff; stroke:var(--fond); stroke-width:2.6}
.agences-legende{margin:12px 0 0; font-size:.86rem; color:#B9C6D2; text-align:center}

.agences-liste{display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,228px),1fr));
               gap:14px; min-width:0}
.agence-carte{background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.16);
              border-radius:12px; padding:16px 16px 14px; min-width:0}
.agence-carte p{margin:0 0 6px}
.agence-ville{display:flex; align-items:center; gap:7px; font-weight:800; color:#fff;
              font-size:1.04rem; letter-spacing:-.01em}
.agence-ville .ico{width:17px; height:17px; flex:0 0 auto; color:var(--accent)}
.agence-adresse{font-size:.88rem; color:#B9C6D2; line-height:1.5}
.agence-tel a{display:inline-flex; align-items:center; gap:7px; font-weight:800;
              color:var(--accent); text-decoration:none; font-size:1.02rem}
.agence-tel a:hover{text-decoration:underline}
.agence-tel .ico{width:16px; height:16px; flex:0 0 auto}
.agence-zone{margin:8px 0 0}
.agence-zone a{display:inline-flex; align-items:center; gap:6px; font-size:.84rem;
               color:#B9C6D2; text-decoration:none}
.agence-zone a:hover{color:#fff; text-decoration:underline}
.agence-zone .ico{width:14px; height:14px; flex:0 0 auto}

/* Sur fond clair : pages departement et pages commune */
.section:not(.section--fond) .agence-carte{background:var(--ciel); border-color:var(--bord)}
.section:not(.section--fond) .agence-ville{color:var(--fond)}
.section:not(.section--fond) .agence-adresse,
.section:not(.section--fond) .agence-zone a{color:var(--gris)}
.section:not(.section--fond) .agence-tel a{color:var(--accent-texte)}
.section:not(.section--fond) .agence-zone a:hover{color:var(--fond)}
.agences-liste--serree{grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr));
                       max-width:860px; margin:0 auto}

.carte-meta{font-size:.86rem; color:var(--gris); margin:0 0 10px}
.carte-meta a{color:var(--accent-texte); font-weight:700; text-decoration:none}
.carte-meta a:hover{text-decoration:underline}
.carte h3 small{font-weight:600; color:var(--gris); font-size:.84em}

/* Pied : les communes groupees par departement */
.pied-villes{font-size:.82rem; line-height:1.85; color:#9FB0BE; margin:0 0 10px}
.pied-villes b a{color:#fff; text-decoration:none}
.pied-villes b a:hover{text-decoration:underline}
.pied-grille{grid-template-columns:repeat(auto-fit,minmax(min(100%,190px),1fr))}

/* Prestations groupees par famille */
.famille{margin:0 0 42px}
.famille:last-child{margin-bottom:0}
.famille-titre{display:flex; align-items:baseline; gap:12px; margin:0 0 18px;
               padding-bottom:10px; border-bottom:2px solid var(--bord);
               font-size:clamp(1.15rem,2vw,1.42rem); letter-spacing:-.015em}
.famille-titre small{font-weight:600; font-size:.74rem; color:var(--gris);
                     text-transform:uppercase; letter-spacing:.08em; white-space:nowrap}
.section--fond .famille-titre{border-bottom-color:rgba(255,255,255,.2)}

/* ======================================================================
   2026-10-09, retours du client.
   1. « c est trop sombre » : les sections de milieu de page quittent le
      presque noir pour un sable chaud. ATTENTION : le jeton --fond sert A
      LA FOIS de fond sombre ET de couleur de texte (.marque, .nav a,
      .champ label). On ne touche donc pas au jeton, on change les fonds de
      section, et on reprend ici TOUT ce qui avait ete ecrit pour du sombre
      a l interieur de ces sections. Ce bloc est volontairement le dernier
      du fichier : a specificite egale, c est le dernier ecrit qui gagne.
   2. la carte des agences devient pilotable : il fallait de toute facon la
      redessiner pour un fond clair, ses blancs transparents disparaissaient.
   ====================================================================== */
.section--fond{background:#F8F3E9; color:var(--encre)}
.section--fond h2,.section--fond h3,.section--fond h4{color:var(--fond)}
.section--fond p{color:var(--encre)}
.section--fond .surtitre{color:#7A5B12}
.section--fond .chapeau{color:#5C5853}
.section--fond a{color:#7A5B12}
.section--fond .carte,.section--fond .bloc{background:#fff; border:1px solid #E9DFC8}
.section--fond .bouton--clair{background:var(--fond); color:#fff; border-color:var(--fond)}
.section--fond .bouton--fantome{color:var(--fond); border-color:rgba(6,4,2,.35)}
.section--fond .bouton--fantome:hover{border-color:var(--fond); background:rgba(6,4,2,.06)}
.section--fond .famille-titre{border-bottom-color:#E0D4BA}
.section--fond .etape p{color:#5C5853}
.section--fond .etape::before{background:var(--fond); color:#fff}

/* Les fiches agence : le jeu de couleurs clair devient le cas general,
   il n y a plus de section sombre qui en contienne. */
.agence-carte{background:#fff; border:1px solid #E9DFC8}
.agence-ville{color:var(--fond)}
.agence-adresse,.agence-zone a{color:#5C5853}
.agence-tel a{color:#7A5B12}
.agence-zone a:hover{color:var(--fond)}
.agence-ville .ico{color:#7A5B12}
.agences-legende{color:#5C5853}

/* ---------- la carte ---------- */
/* Les deux gris ci-dessous ne sont pas des couleurs de marque : ce sont les
   teintes du sable de la section, assombries, pour les departements que
   l entreprise ne couvre pas. */
.carte-fr .dep{fill:#EDE5D3; stroke:#D9CCB2; stroke-width:1.2}
.carte-fr .dep--couvert{fill:var(--fond-700); stroke:var(--fond); cursor:pointer}
.carte-fr .halo{fill:var(--fond-700); opacity:.18}
.carte-fr .point{fill:#fff; stroke:var(--fond-700); stroke-width:2.6}
/* Un point de 7 px ne se vise pas au doigt : une cible invisible de 22 px. */
.carte-fr .cible{fill:transparent; stroke:none}
.carte-fr .agence{cursor:pointer}
.carte-fr .agence:focus{outline:none}
.carte-fr .agence:focus-visible .cible{fill:rgba(122,91,18,.14);
  stroke:var(--fond); stroke-width:2.5; stroke-dasharray:4 3}
@media (prefers-reduced-motion: no-preference){
  .carte-fr .dep--couvert,.carte-fr .point,.carte-fr .halo,.agence-carte{
    transition:fill .18s ease, opacity .18s ease, border-color .18s ease,
               box-shadow .18s ease, transform .18s ease}
}
/* Quand un territoire est choisi, les autres reculent sans disparaitre. */
.agences-bloc.a-un-actif .carte-fr .dep--couvert{opacity:.55}
.agences-bloc.a-un-actif .carte-fr .agence{opacity:.45}
.agences-bloc.a-un-actif .agence-carte{opacity:.62}
.carte-fr .dep--couvert.est-actif{fill:var(--accent); stroke:var(--fond);
  stroke-width:2.4; opacity:1}
.carte-fr .agence.est-actif{opacity:1}
.carte-fr .agence.est-actif .point{fill:var(--accent); stroke:var(--fond); r:9}
.carte-fr .agence.est-actif .halo{fill:var(--fond); opacity:.3}
.agence-carte.est-actif{opacity:1; border-color:var(--fond-700); background:#FFFaF0;
  box-shadow:0 10px 26px rgba(6,4,2,.14)}
.agence-carte:focus{outline:none}
.agence-carte:focus-visible{outline:3px solid var(--fond); outline-offset:3px}
/* La phrase qui parle de toucher la carte ne s affiche que si le script
   tourne vraiment : sans lui, elle promettrait une chose inexistante. */
.js-seulement{display:none}
.carte-vivante .js-seulement{display:inline}

/* ---------- le pied : le vrai logo, pas un pictogramme de repli ---------- */
.pied-marque{display:block; margin-bottom:18px}
.pied-marque img{height:86px; width:auto; max-width:100%; display:block}

/* ======================================================================
   2026-10-09, DEUXIEME serie de retours du client.
     « sortir le noir des boutons d appel a l action, du heros et de la
       bande du haut, passer sur du clair qui claque »
     « revoir le heros mobile, il ne va pas »

   Regles de ce fichier, apprises au tour precedent :
     - le jeton --fond sert A LA FOIS de fond sombre ET de couleur de TEXTE
       (.marque, .nav a, .champ label). On ne l eclaircit jamais : on change
       les fonds des blocs, un par un ;
     - a specificite egale, c est le DERNIER ecrit qui gagne. Ce bloc est
       donc, et doit rester, le dernier du fichier.

   Mesures qui ont commande ces valeurs (releve sur le rendu servi) :
     bande du haut   #040201, soit du quasi noir, 36 px sur ordinateur et
                     128 px sur telephone, quatre lignes empilees ;
     heros           #060402 sur 567 px (ordinateur) et 776 px (telephone) ;
     bouton Devis    #060402, bouton fantome blanc sur noir ;
     bandeau de bas  .rappel #040201.
   Toutes les couleurs posees ici sont des derives des jetons de la marque,
   verifies un par un au rapport de contraste (seuil 4,5 pour le texte,
   3,0 pour un trait d interface).
   ====================================================================== */

/* ---------- 1. la bande du haut : de l or, pas du noir ---------- */
.bandeau{background:var(--accent); color:#2A1C06;
         border-bottom:1px solid rgba(26,18,6,.22)}          /* 12,02 pour 1 */
.bandeau a{color:#2A1C06; font-weight:700; text-decoration:underline;
           text-underline-offset:2px}
.bandeau .ico{stroke:#5E4409}                                 /* 6,61 pour 1 */
.bandeau :focus-visible{outline-color:#2A1C06;
                        box-shadow:0 0 0 5px rgba(255,255,255,.9)}
/* Sur telephone la bande ne garde qu une ligne, celle qui porte le lien
   vers les agences : les quatre lignes mangeaient 128 px avant le logo. */
@media (max-width:760px){
  .bandeau{padding:6px 0; font-size:.84rem}
  .bandeau .enveloppe{gap:0; justify-content:center}
  .bandeau span:not(.bandeau-cle){display:none}
}

/* ---------- 2. les boutons d appel a l action ---------- */
/* Plus aucun aplat noir : l or de la marque pour l appel, le blanc cercle
   d or pour le devis. Le trait #9A6F0D tient 4,19 pour 1 sur le creme et
   3,27 sur l or, au-dessus du seuil de 3 des elements d interface. */
.bouton--tel{background:var(--accent); color:#2A1C06; border-color:#9A6F0D}
.bouton--tel:hover{background:var(--accent-700); color:#2A1C06; border-color:#7A5B12}
.bouton--devis{background:#fff; color:var(--fond); border-color:#9A6F0D}
.bouton--devis:hover{background:#FFF6DF; color:var(--fond); border-color:#7A5B12}
.bouton--fantome{background:#fff; color:var(--fond); border-color:#9A6F0D}
.bouton--fantome:hover{background:#FFF6DF; border-color:#7A5B12}
.bouton--clair,.section--fond .bouton--clair{background:#fff; color:var(--fond);
                                             border-color:#9A6F0D}
.bouton--clair:hover,.section--fond .bouton--clair:hover{background:#FFF6DF;
                                                         border-color:#7A5B12}
/* Le pied colore tous ses liens en #F3E9D2. Pose sur un bouton or, ce ton
   donnait 1,14 pour 1 : le libelle du bouton etait invisible. */
.pied .bouton{color:#2A1C06}
.pied .bouton--devis,.pied .bouton--fantome,.pied .bouton--clair{color:var(--fond)}

/* ---------- 3. le heros ---------- */
/* La photo est passee DANS l enveloppe (voir generer.py) : plus besoin du
   voile noir en degrade qui servait a poser du texte blanc sur une image. */
.hero{background:#FBF6EC; color:var(--encre)}
.hero::after{content:none}
.hero .enveloppe{display:grid; grid-template-columns:minmax(0,1.04fr) minmax(0,.96fr);
                 gap:clamp(26px,3.4vw,50px); align-items:center;
                 padding-top:clamp(30px,3.6vw,58px);
                 padding-bottom:clamp(30px,3.6vw,58px)}
.hero-texte{max-width:620px; min-width:0}
.hero-media{margin:0; min-width:0}
.hero-image{position:static; width:100%; height:auto; aspect-ratio:4/3;
            object-fit:cover; border-radius:16px;
            box-shadow:0 2px 6px rgba(26,18,6,.10),0 20px 46px rgba(26,18,6,.17)}
.hero h1{color:var(--fond)}                                  /* 19,00 pour 1 */
.hero h1 em{color:#7A5B12}                                    /* 5,85 pour 1 */
.hero-chapeau{color:#4A443C}                                  /* 8,93 pour 1 */
.hero-preuves{color:#4A443C; border-top-color:#E6DAC0}
.hero-preuves .ico{stroke:#7A5B12}
/* Les pages interieures portent le meme bandeau de titre : meme traitement,
   sinon le site redevient noir des qu on quitte l accueil. */
.hero--page{background:#FBF6EC; color:var(--encre);
            border-bottom:1px solid #EEE3CC}
.hero--page h1{color:var(--fond)}
.hero--page .chapeau{color:#4A443C}
.fil{color:#6B6358}                                           /* 5,49 pour 1 */
.fil a{color:#7A5B12}
/* Le halo du liseré de focus doit etre clair sur ces fonds clairs. */
.hero :focus-visible,.hero--page :focus-visible,.rappel :focus-visible{
  box-shadow:0 0 0 6px rgba(255,255,255,.85)}
.hero :focus-visible,.hero--page :focus-visible{outline-color:#7A5B12}

/* ---------- 4. le heros sur telephone ---------- */
/* Avant : bande de photo de 220 px coincee entre l en-tete et le titre,
   chapeau de 177 px sur cinq lignes, et les deux boutons repousses sous la
   pliure, derriere la barre basse. Apres : titre, chapeau court, boutons,
   preuves, puis la photo. */
@media (max-width:860px){
  .hero .enveloppe{grid-template-columns:minmax(0,1fr); gap:22px;
                   padding-top:26px; padding-bottom:30px}
  .hero-image{position:static; width:100%; height:auto; aspect-ratio:16/10}
  .hero-texte{max-width:none}
}
@media (max-width:760px){
  .hero-suite{display:none}
  .hero-actions{gap:10px}
  .hero-actions .bouton{flex:1 1 150px}
  .hero-preuves{gap:7px 20px; padding-top:15px}
}
/* Sous 560 px, l en-tete seul masque le libelle du bouton d appel, faute de
   place a cote du logo. Ailleurs, le bouton doit garder son libelle : il
   etait reduit a une epingle de 67 px de large dans le heros. */
@media (max-width:560px){
  .bouton--tel .entete-tel-texte{display:inline}
  .entete .bouton--tel .entete-tel-texte{display:none}
}

/* ---------- 5. le bandeau de rappel, au-dessus du pied ---------- */
.rappel{background:#FBF6EC; color:var(--encre); border-top:1px solid #EEE3CC}
.rappel h2{color:var(--fond)}
.rappel p{color:#4A443C}

/* ---------- 6. deux paires texte/fond qui passaient sous 4,5 ---------- */
/* Mesurees dans le navigateur le 2026-10-09 : le surtitre en #F8C54C donnait
   1,46 pour 1 sur le gris clair, et le chapeau gris 4,24. */
.surtitre{color:#7A5B12}
.chapeau{color:#4A443C}
.saut{color:var(--fond)}

/* ---------- 7. la galerie de l accueil ---------- */
.galerie{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px}
@media (max-width:860px){ .galerie{grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px} }
@media (max-width:520px){ .galerie{grid-template-columns:minmax(0,1fr)} }
.galerie .vignette{margin:0; min-width:0}
.galerie img{width:100%; aspect-ratio:4/3; object-fit:cover; border-radius:14px;
             box-shadow:0 1px 3px rgba(26,18,6,.08),0 12px 28px rgba(26,18,6,.11)}
.galerie figcaption{font-size:.86rem; color:#4A443C; margin-top:9px; line-height:1.45}

/* ---------- 8. le lien des cartes, et la couleur de lien par defaut ---------- */
/* Mesure : #F8C54C sur blanc donne 1,61 pour 1. Le defaut du socle etait
   l accent-700, pense pour un fond sombre. Sur fond clair il faut l or
   fonce, 6,30 pour 1. Le pied garde sa propre couleur de lien. */
a{color:#7A5B12}
.carte-lien{color:#7A5B12}
.pastille .ico{stroke:#7A5B12}
.coches .ico{stroke:#7A5B12}

/* ---------- 9. les deux boutons du heros sur un telephone ---------- */
/* Cote a cote, « Nos 9 agences » tombait sur deux lignes : 170 px de large
   pour 179 px de libelle, bouton de 85 px de haut. Empiles, ils font toute
   la largeur et 54 px de haut. */
@media (max-width:600px){
  .hero-actions{flex-direction:column; align-items:stretch}
  .hero-actions .bouton{flex:0 0 auto; width:100%}
}

/* ---------- 10. deux dernieres paires sous 4,5, mesurees page par page ---------- */
/* /zones-d-intervention/ : le lien de la page courante dans la navigation
   etait en #F8C54C sur blanc, 1,61 pour 1.
   /couvreur-nantes/ : l adresse des fiches agence en #757473 sur #F4F4F4,
   4,24 pour 1. La regle fautive a trois classes, la correction aussi. */
.nav a:hover,.nav a[aria-current]{color:#7A5B12}
.section:not(.section--fond) .agence-adresse,
.section:not(.section--fond) .agence-zone a{color:#5C5853}
.section:not(.section--fond) .agence-tel a{color:#7A5B12}

/* ---------- 11. cohabitation avec les menus deroulants (tache 107) ----------
   Les menus deroulants sont poses APRES coup sur le site servi, par
   ~/t107_menus.py sur le VPS : ils inserent leur CSS entre deux reperes
   situes au MILIEU de ce fichier. Ce bloc-ci reste donc le dernier ecrit et
   l emporte a specificite egale ou superieure.
   Deux choses a reprendre chez eux :
     - le bouton « Devis » du menu telephone est un aplat noir, c est
       exactement ce que le client demande de supprimer ;
     - leurs liens de survol et de page courante sont en #F8C54C, soit
       1,61 pour 1 sur le blanc du panneau. */
.menu-panneau>a.menu-devis{background:var(--accent); color:#2A1C06;
                           border:2px solid #9A6F0D}
.menu-panneau>a.menu-devis:hover{background:var(--accent-700); color:#2A1C06}
.nav-groupe>summary:hover,.nav-groupe[open]>summary{color:#7A5B12}
.nav-tiroir a:hover,.nav-tiroir a[aria-current]{color:#7A5B12}
.menu-groupe>summary:hover,.menu-panneau a:hover{color:#7A5B12}
/* Le panneau telephone de la tache 107 marque la page courante en #F8C54C
   sur blanc : 1,61 pour 1, mesure sur le rendu servi. */
.menu-panneau a[aria-current],.menu-sous a[aria-current]{color:#7A5B12}
.menu-groupe[open]>summary{color:#7A5B12}