:root{
  --ardoise:#151C22;
  --ardoise-claire:#26323B;
  --ardoise-nuit:#0E141A;
  --laiton:#C2A15A;
  --laiton-survol:#D6B975;
  --laiton-profond:#806326;
  --pierre:#F4F1E9;
  --pierre-ombre:#EAE5DA;
  --blanc:#FFFFFF;
  --zinc:#55616A;
  --ligne:#D8D2C6;
  --erreur:#A43232;
  --succes:#266146;
  --fond:#151C22;
  --fond-900:#0E141A;
  --fond-700:#26323B;
  --accent:#C2A15A;
  --accent-700:#806326;
  --accent-texte:#151C22;
  --ciel:#F4F1E9;
  --brume:#EAE5DA;
  --bord:#D8D2C6;
  --encre:#151C22;
  --gris:#55616A;
}
/* ======================================================================
   COUVREUR DANGLADE — direction ARDOISE ET LAITON
   Charte du 10/10/2026, plus les TROIS ECARTS arbitres par Arthur le meme
   jour, qui priment sur le PDF partout ou ils le contredisent :
     1. le pied n est PAS sombre : fond pierre, texte ardoise, filet laiton ;
     2. le laiton monte a 20 pour cent au lieu des 10 de la charte ;
     3. un heros photo sur CHAQUE type de page, ordinateur ET mobile.

   Les couleurs ne sont pas ecrites ici : generer.py prepend un bloc :root
   construit a partir de palette.json. Aucune requete vers un tiers : les
   polices sont servies depuis /assets/polices/, en WOFF2, et rien d autre
   n est charge de l exterieur.

   Rapports de contraste verifies au calcul WCAG avant d etre ecrits :
     ardoise sur laiton ............ 6,99
     ardoise sur laiton survol ..... 9,05
     pierre sur ardoise ............ 15,23
     blanc sur ardoise ............. 19,00
     blanc sur ardoise claire ...... 13,11
     laiton sur ardoise ............ 6,99
     laiton sur ardoise claire ..... 5,33
     zinc sur pierre ............... 5,63
     zinc sur blanc ................ 6,40
     laiton profond sur pierre ..... 4,99
     laiton profond sur blanc ...... 5,67
     ardoise sur pierre ............ 15,23
   ====================================================================== */

/* ---------------------------------------------------------------- polices */
@font-face{font-family:"Barlow Condensed"; font-style:normal; font-weight:700;
  font-display:swap; src:url(/assets/polices/barlowcondensed-700-latin-ext-f22149af.woff2) format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Barlow Condensed"; font-style:normal; font-weight:700;
  font-display:swap; src:url(/assets/polices/barlowcondensed-700-latin-4cdd4b39.woff2) format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Manrope"; font-style:normal; font-weight:400; font-display:swap;
  src:url(/assets/polices/manrope-400-latin-ext-f0f3d418.woff2) format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Manrope"; font-style:normal; font-weight:400; font-display:swap;
  src:url(/assets/polices/manrope-400-latin-c8eafee8.woff2) format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Manrope"; font-style:normal; font-weight:500; font-display:swap;
  src:url(/assets/polices/manrope-500-latin-ext-f0f3d418.woff2) format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Manrope"; font-style:normal; font-weight:500; font-display:swap;
  src:url(/assets/polices/manrope-500-latin-c8eafee8.woff2) format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Manrope"; font-style:normal; font-weight:600; font-display:swap;
  src:url(/assets/polices/manrope-600-latin-ext-f0f3d418.woff2) format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Manrope"; font-style:normal; font-weight:600; font-display:swap;
  src:url(/assets/polices/manrope-600-latin-c8eafee8.woff2) format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Manrope"; font-style:normal; font-weight:700; font-display:swap;
  src:url(/assets/polices/manrope-700-latin-ext-f0f3d418.woff2) format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Manrope"; font-style:normal; font-weight:700; font-display:swap;
  src:url(/assets/polices/manrope-700-latin-c8eafee8.woff2) format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

:root{
  --titre:"Barlow Condensed",Impact,"Haettenschweiler","Arial Narrow",system-ui,sans-serif;
  --texte:"Manrope",system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --larg:1240px;      /* conteneur maximum de la charte */
  --r-bouton:4px;     /* rayon des boutons et des champs */
  --r-photo:8px;      /* rayon maximum sur photos et cartes */
}

/* ------------------------------------------------------------------ socle */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--pierre); color:var(--ardoise);
  font-family:var(--texte); font-size:17px; line-height:1.6; font-weight:400;
  -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. */
img{max-width:100%; height:auto; display:block}
svg{flex:0 0 auto}
a{color:var(--laiton-profond); text-decoration-thickness:1px; text-underline-offset:2px}

h1,h2,h3,h4{margin:0 0 .5em; text-wrap:balance}
h1,h2{font-family:var(--titre); font-weight:700; text-transform:uppercase;
      line-height:1; letter-spacing:0; color:var(--ardoise)}
h1{font-size:clamp(2.75rem,6.2vw,5.5rem); line-height:.98}   /* 44 -> 88 px */
h2{font-size:clamp(2.125rem,3.6vw,3.5rem); line-height:1.02} /* 34 -> 56 px */
h3{font-family:var(--texte); font-weight:700; letter-spacing:-.01em;
   font-size:clamp(1.5rem,1.6vw,1.75rem); line-height:1.25; color:var(--ardoise)}
h4{font-family:var(--texte); font-weight:700; font-size:1.0625rem; line-height:1.3}
p{margin:0 0 1em; overflow-wrap:break-word}
@media (max-width:420px){ h1{font-size:clamp(2.5rem,11vw,3.25rem)} }

/* Double anneau de focus. Une seule teinte ne peut pas passer a la fois sur
   la pierre et sur l ardoise : le laiton porte l anneau interieur, l anneau
   exterieur change de camp selon le fond. */
:focus-visible{outline:3px solid var(--laiton); outline-offset:2px;
               box-shadow:0 0 0 6px rgba(21,28,34,.75); border-radius:4px}
.sombre :focus-visible,.rappel :focus-visible{
  box-shadow:0 0 0 6px rgba(255,255,255,.85)}

.enveloppe{width:100%; max-width:var(--larg); margin:0 auto; padding:0 20px}
@media (min-width:768px){ .enveloppe{padding:0 32px} .menu-panneau{right:32px} }
@media (min-width:1200px){ .enveloppe{padding:0 64px} }

.section{padding:48px 0}
@media (min-width:768px){ .section{padding:64px 0} }
@media (min-width:1100px){ .section{padding:96px 0} }
.section--ciel{background:var(--blanc)}
.section--fond,.sombre{background:var(--ardoise); color:var(--pierre)}

.surtitre{font-family:var(--texte); font-weight:600; font-size:.8125rem;
          letter-spacing:.16em; text-transform:uppercase;
          color:var(--laiton-profond); margin:0 0 .7em;
          display:inline-flex; align-items:center; gap:10px}
/* Le trait oblique a 18 degres : la pente d un toit, en decoration ponctuelle.
   Jamais sur du texte, jamais sur un bouton. */
.surtitre::before{content:""; width:14px; height:2px; background:var(--laiton);
                  transform:skewX(-18deg) scaleX(1.3); flex:0 0 auto}
:is(.sombre,.section--fond,.hero,.rappel) .surtitre,:is(.sombre,.section--fond,.hero,.rappel) .surtitre{color:var(--laiton)}
.chapeau{font-size:1.0625rem; color:var(--zinc); max-width:66ch}
:is(.sombre,.section--fond,.hero,.rappel) .chapeau,:is(.sombre,.section--fond,.hero,.rappel) .chapeau{color:#C6CED4}
.centre{text-align:center}
.centre .surtitre{justify-content:center}
.centre .chapeau{margin-left:auto; margin-right:auto}
.ico{width:20px; height:20px; stroke:currentColor; fill:none; stroke-width:1.9;
     stroke-linecap:round; stroke-linejoin:round}

/* Un filet oblique, utilise comme fin de separateur. */
.filet{height:3px; border:0; margin:0 0 24px; padding:0; width:72px;
       background:var(--laiton); transform:skewX(-18deg)}

/* --------------------------------------------------------------- boutons */
.bouton{display:inline-flex; align-items:center; gap:10px; justify-content:center;
        font-family:var(--texte); font-weight:700; font-size:.9375rem;
        min-height:52px; padding:13px 24px; border-radius:var(--r-bouton);
        border:2px solid transparent; text-decoration:none; cursor:pointer;
        transition:background .16s ease, border-color .16s ease, color .16s ease}
.bouton .ico{width:18px; height:18px}
/* Bouton principal : laiton, texte ardoise. 6,99 pour 1. */
.bouton--devis{background:var(--laiton); color:var(--ardoise); border-color:var(--laiton)}
.bouton--devis:hover,.bouton--devis:focus-visible{background:var(--laiton-survol);
  border-color:var(--laiton-survol); color:var(--ardoise)}          /* 9,05 */
/* Bouton secondaire sur fond clair : contour ardoise, texte ardoise. 15,23. */
.bouton--tel,.bouton--clair{background:transparent; color:var(--ardoise);
  border-color:var(--ardoise)}
.bouton--tel:hover,.bouton--clair:hover{background:var(--ardoise); color:var(--pierre)}
/* Bouton secondaire sur fond ardoise. */
.bouton--fantome{background:transparent; color:var(--blanc);
  border-color:rgba(255,255,255,.55)}
.bouton--fantome:hover{background:rgba(255,255,255,.12); border-color:var(--blanc)}
:is(.sombre,.section--fond,.hero,.rappel) .bouton--tel,.hero--sombre .bouton--tel,:is(.sombre,.section--fond,.hero,.rappel) .bouton--tel,
:is(.sombre,.section--fond,.hero,.rappel) .bouton--clair,:is(.sombre,.section--fond,.hero,.rappel) .bouton--clair{
  color:var(--blanc); border-color:rgba(255,255,255,.55); background:transparent}
:is(.sombre,.section--fond,.hero,.rappel) .bouton--tel:hover,.hero--sombre .bouton--tel:hover,
:is(.sombre,.section--fond,.hero,.rappel) .bouton--tel:hover,:is(.sombre,.section--fond,.hero,.rappel) .bouton--clair:hover,
:is(.sombre,.section--fond,.hero,.rappel) .bouton--clair:hover{background:rgba(255,255,255,.12);
  border-color:var(--blanc); color:var(--blanc)}

/* -------------------------------------------- bande utilitaire + en-tete */
.bandeau{background:var(--ardoise-nuit); color:#C6CED4; font-size:.8125rem;
         padding:5px 0; line-height:1.5}
.bandeau .enveloppe{display:flex; gap:6px 26px; flex-wrap:wrap;
                    justify-content:center; align-items:center; min-height:22px}
.bandeau span{display:inline-flex; align-items:center; gap:7px}
.bandeau .ico{width:14px; height:14px; stroke:var(--laiton)}
.bandeau a{color:var(--laiton); font-weight:600; text-decoration:none}
.bandeau a:hover{text-decoration:underline}
@media (max-width:760px){
  .bandeau .enveloppe{gap:0; justify-content:center}
  .bandeau span:not(.bandeau-cle){display:none}
}

.entete{position:sticky; top:0; z-index:50; background:var(--ardoise);
        border-bottom:1px solid rgba(255,255,255,.12)}
.entete .enveloppe{display:flex; align-items:center; justify-content:space-between;
                   gap:16px; padding-top:8px; padding-bottom:8px; min-height:80px}
.marque{display:flex; align-items:center; gap:12px; text-decoration:none;
        color:var(--blanc); min-width:0}
.marque img{width:auto; height:64px; max-width:46vw; flex:0 0 auto; object-fit:contain;
            background:var(--blanc); border-radius:4px; padding:4px}
.marque-mot{display:block; min-width:0}
.marque-mot b{display:block; font-family:var(--titre); font-weight:700;
              font-size:1.75rem; line-height:1; letter-spacing:.01em;
              text-transform:uppercase; color:var(--blanc)}
.marque-mot small{display:block; font-size:.625rem; letter-spacing:.2em;
                  text-transform:uppercase; font-weight:600; color:var(--laiton);
                  margin-top:3px}
@media (max-width:1040px){ .marque img{height:52px} }
@media (max-width:420px){ .marque img{height:44px} .marque-mot b{font-size:1.375rem} }

/* ======================================================================
   NAVIGATION : UN SEUL ARBRE DANS LE DOM.
   Mesure du 10/10/2026 AVANT refonte : 61 liens dans l en-tete. La moitie
   venait de ce que nav_bureau() et menu_mobile() ecrivaient CHACUN la liste
   complete, l un masque par CSS. Un en-tete portait donc ses liens deux fois,
   et un lecteur d ecran les lisait deux fois.
   Ici il n y a qu un arbre : <details class="menu"> contenant deux tiroirs
   courts (4 familles + la liste complete, 6 departements) et deux liens.
     - sur TELEPHONE, c est un menu replie derriere un bouton ;
     - sur ORDINATEUR, le bouton disparait et le panneau redevient une barre
       horizontale, les deux tiroirs devenant des deroulants d un seul niveau.
   Trois filets pour que le menu de bureau soit visible partout :
     a) l attribut open est pose dans le HTML ;
     b) ::details-content est force visible (Chrome 131+, Safari 18.4+,
        Firefox 139+) ;
     c) un script en ligne, place juste apres l en-tete, retire open quand la
        fenetre est etroite, avant le premier rendu.
   Sans JavaScript sur un telephone, le menu reste deploye : tous les liens
   sont atteignables, rien n est piege.
   ====================================================================== */
/* Le panneau est ancre sur l ENVELOPPE de l en-tete, pas sur le bouton.
   Mesure du 10/10/2026 : ancre sur le bouton, qui tombe au milieu de la
   barre quand le bouton Devis est masque, le panneau de 328 px partait a
   left = -162 px a 390 px de large, soit 162 px hors de l ecran a gauche.
   Un debordement a GAUCHE n augmente pas scrollWidth : le controle de
   debordement horizontal ne le voyait pas. */
.entete .enveloppe{position:relative}
.menu{position:static; min-width:0}
@media (max-width:1100px){ .menu{margin-left:auto} }
.menu>summary{list-style:none; cursor:pointer; display:inline-flex; align-items:center;
              gap:8px; font-weight:700; font-size:.9375rem; color:var(--blanc);
              min-height:48px; padding:12px 16px; border-radius:var(--r-bouton);
              border:2px solid rgba(255,255,255,.55)}
.menu>summary::-webkit-details-marker{display:none}
.menu>summary::marker{content:""}
.menu[open]>summary{background:var(--ardoise-claire); border-color:var(--laiton)}
.menu-panneau{position:absolute; right:20px; left:auto; top:calc(100% - 4px);
              width:min(calc(100vw - 40px),328px);
              max-height:calc(100vh - 180px); overflow-y:auto; overscroll-behavior:contain;
              -webkit-overflow-scrolling:touch;
              background:var(--blanc); border:1px solid var(--ligne);
              border-top:3px solid var(--laiton);
              border-radius:0 0 var(--r-photo) var(--r-photo);
              box-shadow:0 20px 48px rgba(21,28,34,.26); padding:8px;
              display:grid; gap:2px; z-index:70}
.menu-panneau>a{display:block; min-height:48px; padding:14px 13px;
                border-radius:var(--r-bouton); text-decoration:none;
                color:var(--ardoise); font-weight:700; font-size:.9375rem}
.menu-panneau>a:hover{background:var(--pierre); color:var(--laiton-profond)}
.menu-groupe{min-width:0}
.menu-groupe>summary{list-style:none; cursor:pointer; display:flex; align-items:center;
                     justify-content:space-between; gap:8px; min-height:48px;
                     padding:14px 13px; border-radius:var(--r-bouton);
                     color:var(--ardoise); font-weight:700; font-size:.9375rem}
.menu-groupe>summary::-webkit-details-marker{display:none}
.menu-groupe>summary::marker{content:""}
.menu-groupe>summary:hover{background:var(--pierre)}
.menu-groupe>summary .ico{width:17px; height:17px; transition:transform .18s ease;
                          flex:0 0 auto}
.menu-groupe[open]>summary{background:var(--pierre); color:var(--laiton-profond)}
.menu-groupe[open]>summary .ico{transform:rotate(180deg)}
.menu-sous{display:grid; gap:1px; margin:1px 0 6px 12px; padding-left:10px;
           border-left:2px solid var(--laiton)}
.menu-sous a{display:block; min-height:46px; padding:12px 10px;
             border-radius:var(--r-bouton); text-decoration:none;
             color:var(--ardoise); font-weight:500; font-size:.9375rem}
.menu-sous a small{display:block; font-weight:500; font-size:.8125rem; color:var(--zinc)}
.menu-sous a:hover{background:var(--pierre); color:var(--laiton-profond)}
.menu-sous a:hover small{color:var(--laiton-profond)}
.menu-sous a.nav-tout{font-weight:700; color:var(--laiton-profond)}
.menu-panneau a[aria-current],.menu-sous a[aria-current]{color:var(--laiton-profond);
  font-weight:700; background:var(--pierre)}

/* --------------------------- ORDINATEUR : la meme chose, deployee -------- */
@media (min-width:1101px){
  .menu>summary{display:none}
  .menu::details-content{content-visibility:visible; block-size:auto; opacity:1}
  .menu-panneau{position:static; width:auto; max-height:none; overflow:visible;
                background:none; border:0; box-shadow:none; padding:0;
                display:flex; align-items:center; gap:4px}
  .menu-panneau>a,.menu-groupe>summary{display:inline-flex; align-items:center; gap:7px;
    min-height:44px; padding:12px 14px; border-radius:var(--r-bouton);
    color:var(--blanc); font-weight:600; font-size:.9375rem; white-space:nowrap;
    background:none}
  .menu-panneau>a:hover,.menu-panneau>a[aria-current],
  .menu-groupe>summary:hover,.menu-groupe[open]>summary{
    background:var(--ardoise-claire); color:var(--laiton)}
  .menu-groupe{position:relative}
  /* Le deroulant est borne a droite comme a gauche : son bord ne sort jamais
     de l ecran, de 1101 a 1440 px et au-dela. */
  .menu-sous{position:absolute; top:calc(100% + 8px); left:0; right:auto;
             width:max-content; min-width:240px;
             max-width:min(380px, calc(100vw - 48px));
             margin:0; padding:8px; border-left:0;
             background:var(--blanc); border:1px solid var(--ligne);
             border-top:3px solid var(--laiton);
             border-radius:0 0 var(--r-photo) var(--r-photo);
             box-shadow:0 20px 48px rgba(21,28,34,.22); z-index:70; gap:2px}
  .menu-sous a{display:flex; align-items:baseline; gap:8px; min-height:auto;
               padding:11px 13px; font-weight:600; color:var(--ardoise)}
  .menu-sous a small{display:inline}
  .menu-groupe:nth-last-of-type(1) .menu-sous{left:auto; right:0}
}

/* Les actions de l en-tete. Sous 1100 px la barre basse porte deja
   « Nos agences » et « Devis » : le meme bouton dans l en-tete fait double
   emploi et, faute de place a cote du logo, il passait sur deux lignes et
   recouvrait la marque (mesure du 10/10/2026, 390 px). */
.entete-actions{display:flex; align-items:center; gap:10px}
.entete-actions .bouton{min-height:48px; padding:12px 18px; font-size:.9375rem;
                        white-space:nowrap}
@media (max-width:1100px){ .entete-actions{display:none} }

/* ------------------------------------------------------------------ heros
   ECART 3 : chaque type de page a son heros photo, ordinateur ET mobile.
   Composition 55/45 sur grand ecran. Sur telephone, une colonne : titre,
   chapeau court, LES DEUX ACTIONS, puis la photo en 4/3. Aucune hauteur
   figee en 100vh. */
.hero{background:var(--ardoise); color:var(--pierre); position:relative; isolation:isolate}
.hero .enveloppe{position:relative; z-index:2; display:grid;
                 grid-template-columns:minmax(0,55fr) minmax(0,45fr);
                 gap:clamp(24px,3.2vw,56px); align-items:center;
                 padding-top:48px; padding-bottom:48px}
@media (min-width:1100px){ .hero .enveloppe{padding-top:72px; padding-bottom:72px} }
.hero-texte{min-width:0; max-width:34em}
.hero h1{color:var(--blanc); margin-bottom:.22em}
.hero h1 em{font-style:normal; color:var(--laiton); display:block}
.hero-chapeau{font-size:1.0625rem; color:#C6CED4; max-width:52ch; margin-bottom:28px}
.hero-actions{display:flex; gap:12px; flex-wrap:wrap; margin-bottom:24px}
.hero-preuves{display:flex; gap:8px 28px; flex-wrap:wrap; font-size:.875rem;
              color:#C6CED4; padding-top:20px;
              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(--laiton); width:17px; height:17px}
.hero-media{margin:0; min-width:0; position:relative}
.hero-media img,.hero-image{width:100%; height:auto; aspect-ratio:4/3;
  object-fit:cover; object-position:center 42%; border-radius:var(--r-photo);
  box-shadow:0 2px 8px rgba(0,0,0,.3),0 24px 56px rgba(0,0,0,.35)}
@media (min-width:1100px){
  .hero-media img,.hero-image{aspect-ratio:5/4}
}
/* Le trait oblique de la charte, pose au coin de la photo. */
.hero-media::after{content:""; position:absolute; left:-10px; bottom:26px;
  width:76px; height:6px; background:var(--laiton); transform:skewX(-18deg)}
.fil{font-size:.8125rem; color:#B3BDC6; margin-bottom:1em}
.fil a{color:var(--laiton); text-decoration:none}
.fil a:hover{text-decoration:underline}

@media (max-width:900px){
  .hero .enveloppe{grid-template-columns:minmax(0,1fr); gap:24px;
                   padding-top:32px; padding-bottom:32px}
  .hero-texte{max-width:none}
  .hero-media{order:2}
  .hero-media img,.hero-image{aspect-ratio:4/3}
  .hero-media::after{left:-6px; bottom:18px; width:58px; height:5px}
}
@media (max-width:600px){
  .hero-actions{gap:10px}
  .hero-actions .bouton{flex:1 1 100%}
  .hero-preuves{gap:6px 18px; padding-top:16px; font-size:.8125rem}
}
/* Les pages interieures : meme heros, un cran plus bas en hauteur. */
.hero--page .enveloppe{padding-top:40px; padding-bottom:40px}
@media (min-width:1100px){ .hero--page .enveloppe{padding-top:56px; padding-bottom:56px} }
.hero--page h1{font-size:clamp(2.25rem,4.6vw,4rem)}

/* ------------------------------------------------------- grilles et cartes */
.grille{display:grid; gap:24px}
.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))} .grille{gap:16px} }
@media (max-width:640px){ .g2,.g3,.g4{grid-template-columns:minmax(0,1fr)} }
.carte{background:var(--blanc); border:1px solid var(--ligne);
       border-radius:var(--r-photo); padding:24px; display:flex;
       flex-direction:column; min-width:0; position:relative;
       transition:border-color .16s ease}
.carte:hover{border-color:var(--laiton)}
.carte h3{margin-bottom:.4em}
.carte p{color:var(--zinc); margin-bottom:0}
.carte-lien{margin-top:auto; padding-top:16px; font-weight:700;
            color:var(--laiton-profond); text-decoration:none;
            display:inline-flex; align-items:center; gap:8px; font-size:.9375rem}
.carte-lien:hover{text-decoration:underline}
.carte-lien .ico{width:17px; height:17px}
.pastille{width:48px; height:48px; border-radius:var(--r-bouton);
          background:var(--ardoise); display:flex; align-items:center;
          justify-content:center; margin-bottom:16px; flex:0 0 auto}
.pastille .ico{width:24px; height:24px; stroke:var(--laiton); stroke-width:1.9}
.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:20px 22px 22px; display:flex; flex-direction:column;
                   flex:1; min-width:0}
:is(.sombre,.section--fond,.hero,.rappel) .carte{background:var(--ardoise-claire);
  border-color:rgba(255,255,255,.18)}
:is(.sombre,.section--fond,.hero,.rappel) .carte p,:is(.sombre,.section--fond,.hero,.rappel) .carte p{color:#C6CED4}
:is(.sombre,.section--fond,.hero,.rappel) .carte-lien,:is(.sombre,.section--fond,.hero,.rappel) .carte-lien{color:var(--laiton)}
:is(.sombre,.section--fond,.hero,.rappel) .pastille,:is(.sombre,.section--fond,.hero,.rappel) .pastille{background:rgba(255,255,255,.1)}

/* --------------------------------------------- les quatre besoins d entree */
.besoins{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:16px}
@media (max-width:900px){ .besoins{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:480px){ .besoins{grid-template-columns:minmax(0,1fr)} }
.besoin{display:flex; align-items:center; gap:14px; min-height:52px;
        padding:20px 22px; background:var(--blanc); border:1px solid var(--ligne);
        border-left:3px solid var(--laiton); border-radius:var(--r-bouton);
        text-decoration:none; color:var(--ardoise); font-weight:700;
        font-size:1.0625rem; min-width:0;
        transition:background .16s ease, border-color .16s ease}
.besoin:hover{background:var(--ardoise); color:var(--blanc); border-color:var(--laiton)}
.besoin .ico{width:24px; height:24px; stroke:var(--laiton-profond); flex:0 0 auto}
.besoin:hover .ico{stroke:var(--laiton)}
.besoin span{min-width:0}
.besoin small{display:block; font-weight:500; font-size:.8125rem; color:var(--zinc);
              margin-top:2px}
.besoin:hover small{color:#C6CED4}

/* ------------------------------------------------------ duo texte + image */
.duo{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr);
     gap:clamp(24px,3.6vw,56px); align-items:center}
.duo--inverse .duo-media{order:-1}
.duo-media{margin:0; min-width:0}
.duo-media img{width:100%; border-radius:var(--r-photo); aspect-ratio:4/3;
               object-fit:cover}
.duo-media figcaption{font-size:.875rem; color:var(--zinc); margin-top:10px}
:is(.sombre,.section--fond,.hero,.rappel) .duo-media figcaption,:is(.sombre,.section--fond,.hero,.rappel) .duo-media figcaption{color:#C6CED4}
@media (max-width:820px){ .duo{grid-template-columns:minmax(0,1fr)} .duo--inverse .duo-media{order:0} }
.bandeau-photo img{width:100%; border-radius:var(--r-photo); aspect-ratio:21/9;
                   object-fit:cover}

/* ------------------------------------------------------- listes a coches */
.coches{list-style:none; padding:0; margin:0; display:grid; gap:12px}
.coches li{display:flex; gap:12px; align-items:flex-start}
.coches .ico{width:20px; height:20px; margin-top:3px; stroke:var(--laiton-profond);
             flex:0 0 auto}
:is(.sombre,.section--fond,.hero,.rappel) .coches .ico,:is(.sombre,.section--fond,.hero,.rappel) .coches .ico{stroke:var(--laiton)}

/* ------------------------------------------------------------- la methode */
.etapes{counter-reset:e; display:grid; gap:24px;
        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:16px; min-width:0;
       border-top:3px solid var(--laiton)}
.etape::before{counter-increment:e; content:counter(e,decimal-leading-zero);
  display:block; font-family:var(--titre); font-weight:700; font-size:2.75rem;
  line-height:1; color:var(--laiton); margin-bottom:10px}
.etape h3{font-size:1.25rem; margin-bottom:.35em}
.etape p{font-size:.9375rem; margin:0; color:var(--zinc)}
:is(.sombre,.section--fond,.hero,.rappel) .etape p,:is(.sombre,.section--fond,.hero,.rappel) .etape p{color:#C6CED4}
:is(.sombre,.section--fond,.hero,.rappel) .etape h3,:is(.sombre,.section--fond,.hero,.rappel) .etape h3{color:var(--blanc)}

/* ------------------------------------------------------------- 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:14px 16px;
            background:var(--blanc); border:1px solid var(--ligne);
            border-radius:var(--r-bouton); text-decoration:none;
            color:var(--ardoise); font-weight:600; min-width:0;
            transition:border-color .16s ease}
.ville-lien:hover{border-color:var(--laiton); background:var(--pierre)}
.ville-lien span{overflow-wrap:anywhere}
.ville-lien small{color:var(--zinc); font-weight:500; font-size:.8125rem}

/* ------------------------------------------------------------------- FAQ */
.faq{display:grid; gap:12px; max-width:860px; margin:0 auto}
.faq details{background:var(--blanc); border:1px solid var(--ligne);
             border-radius:var(--r-photo)}
.faq details[open]{border-left:3px solid var(--laiton)}
.faq summary{cursor:pointer; list-style:none; padding:18px 22px; font-weight:700;
             font-size:1.0625rem; color:var(--ardoise); display:flex;
             justify-content:space-between; align-items:center; gap:16px;
             min-height:52px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::marker{content:""}
.faq summary::after{content:"+"; font-size:1.5rem; color:var(--laiton-profond);
                    line-height:1; flex:0 0 auto}
.faq details[open] summary::after{content:"\2212"}
.faq .reponse{padding:0 22px 20px; color:var(--zinc)}
.faq .reponse p:last-child{margin-bottom:0}

/* ----------------------------------------------------- devis + formulaire */
.devis{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr);
       gap:clamp(24px,3.6vw,56px); align-items:start}
@media (max-width:860px){ .devis{grid-template-columns:minmax(0,1fr)} }
.formulaire{background:var(--blanc); border:1px solid var(--ligne);
            border-top:3px solid var(--laiton);
            border-radius:var(--r-photo); padding:clamp(20px,2.6vw,32px);
            position:relative}
.champ{margin-bottom:16px; min-width:0}
.champ label{display:block; font-weight:600; font-size:.875rem; margin-bottom:6px;
             color:var(--ardoise)}
.champ input,.champ select,.champ textarea{width:100%; max-width:100%;
  min-height:52px; padding:14px 16px; border:1px solid var(--zinc);
  border-radius:var(--r-bouton); font:inherit; font-size:1rem;
  color:var(--ardoise); background:var(--blanc)}
.champ input:focus,.champ select:focus,.champ textarea:focus{
  border-color:var(--laiton-profond); outline:3px solid var(--laiton);
  outline-offset:1px}
.champ textarea{min-height:112px; resize:vertical}
.champ--duo{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:16px}
@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:8px}
.mention{font-size:.8125rem; color:var(--zinc); margin:12px 0 0}
.retour{margin-top:16px; padding:14px 16px; border-radius:var(--r-bouton);
        font-size:.9375rem; display:none}
.retour--ok{display:block; background:var(--blanc); color:var(--succes);
            border:2px solid var(--succes)}
.retour--ko{display:block; background:var(--blanc); color:var(--erreur);
            border:2px solid var(--erreur)}

/* ------------------------------------------------- bandeau de rappel */
.rappel{background:var(--ardoise); color:var(--pierre)}
.rappel .enveloppe{display:flex; align-items:center; justify-content:space-between;
                   gap:24px; flex-wrap:wrap; padding-top:40px; padding-bottom:40px}
.rappel h2{margin-bottom:.2em; color:var(--blanc)}
.rappel p{color:#C6CED4; margin:0; max-width:52ch}

/* ====================================================================== */
/* ECART 1 : LE PIED N EST PAS SOMBRE.                                    */
/* La charte prevoyait l ardoise, Arthur la refuse le 10/10/2026.         */
/* Fond pierre, texte ardoise, filet laiton. Mesure avant : #060402.      */
/* ====================================================================== */
.pied{background:var(--pierre); color:var(--ardoise); font-size:.9375rem;
      padding:56px 0 24px; border-top:4px solid var(--laiton)}
.pied a{color:var(--laiton-profond); text-decoration:none}   /* 4,99 pour 1 */
.pied a:hover{text-decoration:underline}
.pied h4{color:var(--ardoise); font-family:var(--titre); font-weight:700;
         font-size:1.125rem; letter-spacing:.04em; text-transform:uppercase;
         margin:0 0 14px; padding-bottom:8px; border-bottom:2px solid var(--ligne)}
.pied-grille{display:grid; gap:32px;
             grid-template-columns:repeat(auto-fit,minmax(min(100%,190px),1fr))}
.pied-grille>*{min-width:0}
.pied ul{list-style:none; padding:0; margin:0; display:grid; gap:9px}
.pied li{display:flex; gap:9px; align-items:flex-start}
.pied .ico{width:17px; height:17px; margin-top:4px; stroke:var(--laiton-profond);
           flex:0 0 auto}
.pied-marque{display:block; margin-bottom:18px}
.pied-marque img{height:88px; width:auto; max-width:100%; display:block}
.pied p{color:var(--zinc)}
.pied small{color:var(--zinc)}
.pied-bas{border-top:2px solid var(--ligne); margin-top:36px; padding-top:20px;
          display:flex; justify-content:space-between; gap:14px; flex-wrap:wrap;
          font-size:.875rem; color:var(--zinc)}
.pied-villes{font-size:.875rem; line-height:1.8; color:var(--zinc);
             margin:0 0 10px; overflow-wrap:break-word}
.pied-villes a{color:var(--laiton-profond)}
.pied-villes b a{color:var(--ardoise); font-weight:700}
.pied-communes>summary{cursor:pointer; list-style:none; font-family:var(--titre);
  font-weight:700; font-size:1.125rem; letter-spacing:.04em; text-transform:uppercase;
  color:var(--ardoise); padding:10px 0; border-bottom:2px solid var(--ligne);
  display:flex; justify-content:space-between; align-items:center; gap:12px;
  min-height:48px}
.pied-communes>summary::-webkit-details-marker{display:none}
.pied-communes>summary::marker{content:""}
.pied-communes>summary::after{content:"+"; font-size:1.5rem; color:var(--laiton-profond);
  line-height:1}
.pied-communes[open]>summary::after{content:"\2212"}
.pied-communes .pied-villes{margin-top:14px}

/* ------------------------------------------------------- barre du bas */
.barre-mobile{position:fixed; left:0; right:0; bottom:0; z-index:60; display:none;
  background:var(--ardoise); border-top:3px solid var(--laiton);
  padding:10px 12px calc(10px + env(safe-area-inset-bottom)); gap:10px}
.barre-mobile .bouton{flex:1; min-height:48px; padding:12px 10px;
                      font-size:.9375rem; min-width:0}
.barre-mobile .bouton--tel{color:var(--blanc); border-color:rgba(255,255,255,.6);
                           background:transparent}
.barre-mobile .bouton--tel:hover{background:rgba(255,255,255,.12); color:var(--blanc)}
@media (max-width:900px){ .barre-mobile{display:flex} body{padding-bottom:84px} }

/* ------------------------------------------------------------ apparition */
/* L animation ne masque le contenu QUE si le script a pose la classe js sur
   <html>, et un filet js-secours rend tout visible au bout de 2,2 s si
   script.js ne charge pas. */
.js .apparait{opacity:0; transform:translateY(10px);
              transition:opacity .22s ease, transform .22s 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}
  *{animation-duration:.01ms !important; transition-duration:.01ms !important}
}
.saut{position:absolute; left:-9999px; top:0}
.saut:focus{position:static; display:inline-block; margin:8px; padding:12px 16px;
            background:var(--laiton); color:var(--ardoise); font-weight:700;
            border-radius:var(--r-bouton)}

/* ======================================================================
   LA CARTE DES AGENCES
   Redessinee dans la palette : les six departements couverts en laiton sur
   un fond pierre, les autres en gris tres discret, les points d agence
   lisibles, l etat actif franc. Le repli en liste HTML reste la verite :
   tout ce que fait la carte, la liste le fait aussi, au clavier comme au
   telephone.
   ====================================================================== */
.agences-bloc{display:grid; grid-template-columns:minmax(0,1fr); gap:32px;
              align-items:start}
@media (min-width:900px){
  .agences-bloc{grid-template-columns:minmax(0,420px) minmax(0,1fr); gap:48px}
}
.agences-carte{min-width:0; background:var(--pierre); border:1px solid var(--ligne);
               border-radius:var(--r-photo); padding:20px}
:is(.sombre,.section--fond,.hero,.rappel) .agences-carte,:is(.sombre,.section--fond,.hero,.rappel) .agences-carte{background:var(--ardoise-claire);
  border-color:rgba(255,255,255,.18)}
.carte-fr{width:100%; height:auto; display:block}
/* Les departements non couverts : un gris tres discret, jamais du bruit. */
.carte-fr .dep{fill:#E6E1D6; stroke:#C9C1AF; stroke-width:1;
               vector-effect:non-scaling-stroke}
:is(.sombre,.section--fond,.hero,.rappel) .carte-fr .dep,:is(.sombre,.section--fond,.hero,.rappel) .carte-fr .dep{fill:#39444D; stroke:#4C5962}
/* Les six departements couverts : laiton plein. */
/* Les six departements couverts : laiton plein, cercle d ardoise. Le laiton
   et la pierre ne peuvent pas atteindre 3 pour 1 entre eux, ce sont deux tons
   moyens : c est le TRAIT d ardoise qui porte la lisibilite de la forme
   (15,2 pour 1 contre la pierre), et la liste HTML qui porte l information. */
.carte-fr .dep--couvert{fill:var(--laiton); stroke:var(--ardoise); stroke-width:2.4;
                        vector-effect:non-scaling-stroke; cursor:pointer}
.carte-fr .halo{fill:var(--ardoise); opacity:.16}
.carte-fr .point{fill:var(--ardoise); stroke:var(--blanc); stroke-width:2.4}
:is(.sombre,.section--fond,.hero,.rappel) .carte-fr .point,:is(.sombre,.section--fond,.hero,.rappel) .carte-fr .point{fill:var(--ardoise);
  stroke:var(--laiton-survol)}
/* 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(21,28,34,.12);
  stroke:var(--ardoise); stroke-width:2.6; 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,
               transform .18s ease}
}
/* Etat actif franc : le territoire choisi passe en laiton survol cercle
   d ardoise, les autres reculent sans disparaitre. */
.agences-bloc.a-un-actif .carte-fr .dep--couvert{opacity:.45}
.agences-bloc.a-un-actif .carte-fr .agence{opacity:.4}
.agences-bloc.a-un-actif .agence-carte{opacity:.6}
.carte-fr .dep--couvert.est-actif{fill:var(--laiton-survol); stroke:var(--ardoise);
  stroke-width:4; opacity:1}
.carte-fr .agence.est-actif{opacity:1}
.carte-fr .agence.est-actif .point{fill:var(--ardoise); stroke:var(--blanc); r:9}
.carte-fr .agence.est-actif .halo{fill:var(--ardoise); opacity:.34}
.agences-legende{margin:14px 0 0; font-size:.875rem; color:var(--zinc);
                 text-align:center}
:is(.sombre,.section--fond,.hero,.rappel) .agences-legende,:is(.sombre,.section--fond,.hero,.rappel) .agences-legende{color:#C6CED4}
/* 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}

.agences-liste{display:grid;
               grid-template-columns:repeat(auto-fit,minmax(min(100%,228px),1fr));
               gap:16px; min-width:0}
.agences-liste--serree{grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr));
                       max-width:880px; margin:0 auto}
.agence-carte{background:var(--blanc); border:1px solid var(--ligne);
              border-left:3px solid var(--laiton); border-radius:var(--r-photo);
              padding:18px 18px 16px; min-width:0}
.agence-carte p{margin:0 0 6px}
.agence-ville{display:flex; align-items:center; gap:8px; font-weight:700;
              color:var(--ardoise); font-size:1.0625rem}
.agence-ville .ico{width:18px; height:18px; flex:0 0 auto; stroke:var(--laiton-profond)}
.agence-adresse{font-size:.875rem; color:var(--zinc); line-height:1.5}
.agence-tel a{display:inline-flex; align-items:center; gap:8px; font-weight:700;
              color:var(--laiton-profond); text-decoration:none; font-size:1.0625rem}
.agence-tel a:hover{text-decoration:underline}
.agence-tel .ico{width:17px; height:17px; flex:0 0 auto}
.agence-zone{margin:8px 0 0}
.agence-zone a{display:inline-flex; align-items:center; gap:7px; font-size:.875rem;
               color:var(--zinc); text-decoration:none}
.agence-zone a:hover{color:var(--ardoise); text-decoration:underline}
.agence-zone .ico{width:15px; height:15px; flex:0 0 auto}
.agence-carte.est-actif{opacity:1; border-color:var(--laiton);
  border-left-color:var(--laiton); background:var(--pierre)}
.agence-carte:focus{outline:none}
.agence-carte:focus-visible{outline:3px solid var(--laiton); outline-offset:3px;
  box-shadow:0 0 0 6px rgba(21,28,34,.6)}
:is(.sombre,.section--fond,.hero,.rappel) .agence-carte,:is(.sombre,.section--fond,.hero,.rappel) .agence-carte{background:var(--ardoise-claire);
  border-color:rgba(255,255,255,.18); border-left-color:var(--laiton)}
:is(.sombre,.section--fond,.hero,.rappel) .agence-ville,:is(.sombre,.section--fond,.hero,.rappel) .agence-ville{color:var(--blanc)}
:is(.sombre,.section--fond,.hero,.rappel) .agence-ville .ico,:is(.sombre,.section--fond,.hero,.rappel) .agence-ville .ico{stroke:var(--laiton)}
:is(.sombre,.section--fond,.hero,.rappel) .agence-adresse,:is(.sombre,.section--fond,.hero,.rappel) .agence-adresse,
:is(.sombre,.section--fond,.hero,.rappel) .agence-zone a,:is(.sombre,.section--fond,.hero,.rappel) .agence-zone a{color:#C6CED4}
:is(.sombre,.section--fond,.hero,.rappel) .agence-tel a,:is(.sombre,.section--fond,.hero,.rappel) .agence-tel a{color:var(--laiton)}
:is(.sombre,.section--fond,.hero,.rappel) .agence-zone a:hover,:is(.sombre,.section--fond,.hero,.rappel) .agence-zone a:hover{color:var(--blanc)}
:is(.sombre,.section--fond,.hero,.rappel) .agence-carte.est-actif,:is(.sombre,.section--fond,.hero,.rappel) .agence-carte.est-actif{
  background:rgba(194,161,90,.16); border-color:var(--laiton)}

.carte-meta{font-size:.875rem; color:var(--zinc); margin:0 0 10px}
.carte-meta a{color:var(--laiton-profond); font-weight:700; text-decoration:none}
.carte-meta a:hover{text-decoration:underline}
:is(.sombre,.section--fond,.hero,.rappel) .carte-meta,:is(.sombre,.section--fond,.hero,.rappel) .carte-meta{color:#C6CED4}
:is(.sombre,.section--fond,.hero,.rappel) .carte-meta a,:is(.sombre,.section--fond,.hero,.rappel) .carte-meta a{color:var(--laiton)}
.carte h3 small{font-weight:600; color:var(--zinc); font-size:.84em}
:is(.sombre,.section--fond,.hero,.rappel) .carte h3 small,:is(.sombre,.section--fond,.hero,.rappel) .carte h3 small{color:#C6CED4}

/* ------------------------------------------- prestations par famille */
.famille{margin:0 0 48px}
.famille:last-child{margin-bottom:0}
.famille-titre{display:flex; align-items:baseline; gap:14px; margin:0 0 20px;
               padding-bottom:10px; border-bottom:2px solid var(--laiton);
               font-family:var(--titre); font-weight:700; text-transform:uppercase;
               font-size:clamp(1.75rem,2.4vw,2.25rem); letter-spacing:.01em;
               line-height:1.05}
.famille-titre small{font-family:var(--texte); font-weight:600; font-size:.8125rem;
                     color:var(--zinc); text-transform:uppercase;
                     letter-spacing:.1em; white-space:nowrap}
:is(.sombre,.section--fond,.hero,.rappel) .famille-titre,:is(.sombre,.section--fond,.hero,.rappel) .famille-titre{color:var(--blanc)}
:is(.sombre,.section--fond,.hero,.rappel) .famille-titre small,:is(.sombre,.section--fond,.hero,.rappel) .famille-titre small{color:#C6CED4}

/* ------------------------------------------------- realisations selectionnees */
.galerie{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px}
.galerie .vignette{margin:0; min-width:0}
/* Une photo plus grande que les autres, comme le prevoit la charte. */
.galerie .vignette--large{grid-column:span 2}
.galerie .vignette--large img{aspect-ratio:16/9}
@media (max-width:860px){
  .galerie{grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px}
  .galerie .vignette--large{grid-column:span 2}
}
@media (max-width:520px){
  .galerie{grid-template-columns:minmax(0,1fr)}
  .galerie .vignette--large{grid-column:span 1}
  .galerie .vignette--large img{aspect-ratio:4/3}
}
.galerie img{width:100%; aspect-ratio:4/3; object-fit:cover;
             border-radius:var(--r-photo)}
.galerie figcaption{font-size:.875rem; color:var(--zinc); margin-top:10px;
                    line-height:1.45}
:is(.sombre,.section--fond,.hero,.rappel) .galerie figcaption,:is(.sombre,.section--fond,.hero,.rappel) .galerie figcaption{color:#C6CED4}

/* --------- heros sans photo : mentions legales, et repli de securite ----- */
.hero--plein .enveloppe{grid-template-columns:minmax(0,1fr)}
.hero--plein .hero-texte{max-width:64ch}

/* --------- le hub des prestations : les familles s ancrent ici ----------- */
/* scroll-margin-top : l en-tete est sticky, une ancre atterrirait dessous. */
.famille[id]{scroll-margin-top:128px}
@media (max-width:1100px){ .famille[id]{scroll-margin-top:104px} }


/* ======================================================================
   Paires texte sur fond relevees sous le seuil dans le navigateur, sur le
   rendu servi, et corrigees ici. Mesure du 10/10/2026 :
     surtitre laiton profond sur ardoise ....... 3,06 pour 1
     h2 ardoise sur ardoise (section ardoise) .. 1,00 pour 1
     bouton tel, texte ardoise sur ardoise ..... 1,00 pour 1
   Ce bloc est le DERNIER du fichier : a specificite egale, c est le dernier
   ecrit qui gagne.
   ====================================================================== */
:is(.sombre,.section--fond,.hero,.rappel) h1,:is(.sombre,.section--fond,.hero,.rappel) h2,:is(.sombre,.section--fond,.hero,.rappel) h3,:is(.sombre,.section--fond,.hero,.rappel) h4{color:var(--blanc)}
:is(.sombre,.section--fond,.hero,.rappel) .surtitre{color:var(--laiton)}                 /* 6,99 pour 1 */
:is(.sombre,.section--fond,.hero,.rappel) p,:is(.sombre,.section--fond,.hero,.rappel) li,:is(.sombre,.section--fond,.hero,.rappel) .chapeau{color:#C6CED4}   /* 10,79 */
:is(.sombre,.section--fond,.hero,.rappel) a{color:var(--laiton)}
:is(.sombre,.section--fond,.hero,.rappel) .bouton--tel,:is(.sombre,.section--fond,.hero,.rappel) .bouton--clair{
  color:var(--blanc); border-color:rgba(255,255,255,.55); background:transparent}
:is(.sombre,.section--fond,.hero,.rappel) .bouton--tel:hover,:is(.sombre,.section--fond,.hero,.rappel) .bouton--clair:hover{
  background:rgba(255,255,255,.12); border-color:var(--blanc); color:var(--blanc)}
:is(.sombre,.section--fond,.hero,.rappel) .bouton--devis{background:var(--laiton); color:var(--ardoise);
  border-color:var(--laiton)}
:is(.sombre,.section--fond,.hero,.rappel) .bouton--devis:hover{background:var(--laiton-survol);
  color:var(--ardoise); border-color:var(--laiton-survol)}
:is(.sombre,.section--fond,.hero,.rappel) .coches .ico{stroke:var(--laiton)}
:is(.sombre,.section--fond,.hero,.rappel) .ville-lien{background:var(--ardoise-claire);
  border-color:rgba(255,255,255,.18); color:var(--blanc)}
:is(.sombre,.section--fond,.hero,.rappel) .ville-lien small{color:#C6CED4}
:is(.sombre,.section--fond,.hero,.rappel) .ville-lien:hover{background:rgba(194,161,90,.16);
  border-color:var(--laiton)}
:is(.sombre,.section--fond,.hero,.rappel) .faq details{background:var(--ardoise-claire);
  border-color:rgba(255,255,255,.18)}
:is(.sombre,.section--fond,.hero,.rappel) .faq summary{color:var(--blanc)}
:is(.sombre,.section--fond,.hero,.rappel) .faq summary::after{color:var(--laiton)}
:is(.sombre,.section--fond,.hero,.rappel) .faq .reponse{color:#C6CED4}
:is(.sombre,.section--fond,.hero,.rappel) .besoin{background:var(--ardoise-claire);
  border-color:rgba(255,255,255,.18); border-left-color:var(--laiton);
  color:var(--blanc)}
:is(.sombre,.section--fond,.hero,.rappel) .besoin small{color:#C6CED4}
:is(.sombre,.section--fond,.hero,.rappel) .pastille .ico{stroke:var(--laiton)}
/* Le pied est clair : il reprend donc le jeu de couleurs clair, meme si une
   regle de contexte sombre venait a l attraper. */
.pied h1,.pied h2,.pied h3,.pied h4{color:var(--ardoise)}
.pied p,.pied li{color:var(--zinc)}
.pied a{color:var(--laiton-profond)}
.pied .bouton--tel{color:var(--ardoise); border-color:var(--ardoise);
                   background:transparent}
.pied .bouton--tel:hover{background:var(--ardoise); color:var(--pierre)}