:root{
  --fond:#0D1F38;
  --fond-900:#091525;
  --fond-700:#1A3F72;
  --accent:#C25F36;
  --accent-700:#A34F2E;
  --accent-texte:#060E19;
  --ciel:#F4F5F6;
  --brume:#E4E6E9;
  --bord:#CFD2D7;
  --encre:#0A1422;
  --gris:#6C7683;
  --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)}
.section--fond{background:var(--fond); color:#E3E9EF}
.section--fond h2,.section--fond h3{color:#fff}
.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:#C3CEDA; 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:46px; max-width:52vw; flex:0 1 auto; object-fit:contain}
@media (max-width:560px){ .marque img{height:38px} }
/* Le nom ecrit a cote du pictogramme doit pouvoir RETRECIR, sinon il garde sa
   largeur de contenu minimale, deborde de .marque et passe SOUS les boutons
   d action : min-width:0 sur le conteneur flex ne suffit pas, il le faut aussi
   sur l enfant. */
.marque span{min-width:0; overflow:hidden}
.marque b{font-size:1.1rem; font-weight:800; letter-spacing:-.02em; line-height:1.15; display:block;
          white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.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}

/* Menu mobile en <details> : il fonctionne sans JavaScript. */
.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-panneau{position:absolute; right:0; top:calc(100% + 8px); width:min(78vw,280px);
              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:11px 13px; border-radius:8px; text-decoration:none;
                color:var(--fond); font-weight:600}
.menu-panneau a:hover{background:var(--ciel)}
@media (max-width:1040px){ .nav{display:none} .menu{display:block} }
@media (max-width:560px){ .entete-tel-texte{display:none} .marque small{display:none} }
/* Sous 620 px l en-tete porte deja trois actions : le nom en toutes lettres ne
   tient plus a cote du pictogramme. Il disparait, pas le sens : l attribut alt
   de l image porte le nom et la baseline. */
@media (max-width:620px){ .marque span{display:none} }
@media (max-width:380px){ .marque b{font-size:1rem} }

/* ---------- 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:#B4C2CF; font-size:.92rem; padding:50px 0 24px}
.pied a{color:#DCE5ED; 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}