/* ══════════════════════════════════════════════════════════
   0. POLICES AUTO-HÉBERGÉES (B1, 21/09/2026)
   Plus aucune requête vers Google Fonts : Fraunces (variable, axes
   opsz 9-144 et wght 100-900) et Roboto Slab (variable, wght 100-900),
   sous-ensemble latin, fichiers dans assets/fonts/ (licences jointes).
   Trois écritures de src : tech() pour les navigateurs récents,
   woff2-variations pour les anciens, woff2 en dernier recours.
   ══════════════════════════════════════════════════════════ */
@font-face{
  font-family:'Fraunces';font-style:normal;font-weight:100 900;font-display:swap;
  src:url(fonts/fraunces-latin.woff2) format('woff2') tech('variations'),
      url(fonts/fraunces-latin.woff2) format('woff2-variations'),
      url(fonts/fraunces-latin.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+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'Roboto Slab';font-style:normal;font-weight:100 900;font-display:swap;
  src:url(fonts/roboto-slab-latin.woff2) format('woff2') tech('variations'),
      url(fonts/roboto-slab-latin.woff2) format('woff2-variations'),
      url(fonts/roboto-slab-latin.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+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

/* ══════════════════════════════════════════════════════════
   1. CHARTE OFFICIELLE (guide graphique, p. Couleurs)
   ══════════════════════════════════════════════════════════ */
:root{
  --brique:#EB7952;        /* HEX eb7952 · RGB 235 121 82 */
  --brique-fonce:#C85F3C;  /* dérivé, états survolés */
  --basalte:#2B2A27;       /* HEX 2b2a27 · RGB 43 42 39 */
  --basalte-profond:#1F1E1C;
  --molasse:#9CBA9E;       /* HEX 9cba9e · RGB 156 186 158 */
  --molasse-fonce:#7FA882;
  --chaux:#FFFFF2;         /* HEX fffff2 · RGB 255 255 242 */
  --pierre:#F5F4F0;        /* fond alterné, dérivé chaux */
  --joint:#D5D3D0;
  --gris:#5A5856;

  /* Lot 1 boutons et pictos (maquette v2 validée par PYB le 24/09/2026) */
  --rayon:8px;                 /* angles des boutons */
  --rep:var(--brique-fonce);   /* repère des pictos sur fond clair */
  --rep-nuit:var(--brique);    /* repère des pictos sur fond sombre */

  --titre:'Fraunces',Georgia,'Times New Roman',serif;   /* ← Larken ExtraBold ici le jour venu */
  --texte:'Roboto Slab',Georgia,serif;

  --large:1280px;
  --marge:clamp(20px,5vw,64px);
  --bande:clamp(64px,9vw,120px);
}

/* ══════════════════════════════════════════════════════════
   2. SOCLE
   ══════════════════════════════════════════════════════════ */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--chaux);color:var(--basalte);
  font-family:var(--texte);font-weight:400;font-size:1.0625rem;line-height:1.75;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{color:inherit}

h1,h2,h3{
  font-family:var(--titre);font-weight:900;
  font-variation-settings:'SOFT' 0,'WONK' 0;   /* réglage sobre, proche Larken */
  line-height:1.04;letter-spacing:-.012em;margin:0;text-wrap:balance;
}
h1{font-size:clamp(2.6rem,6.2vw,4.9rem);color:var(--brique)} /* titres brique : usage charte p.13-14 */
h2{font-size:clamp(1.95rem,3.7vw,3.05rem);line-height:1.08}
h3{font-size:1.2rem;line-height:1.25;letter-spacing:-.008em;font-weight:700}
p{margin:0 0 1.1em}
p:last-child{margin-bottom:0}

.cnt{max-width:var(--large);margin:0 auto;padding-inline:var(--marge)}
.bande{padding-block:var(--bande)}

/* Souligné brique sous les mots-clés (usage charte p.15) */
.sligne{position:relative;white-space:nowrap}
.sligne::after{
  content:"";position:absolute;left:.02em;right:.02em;bottom:-.08em;height:.09em;
  background:var(--brique);
}

/* Œilleton de section : plomb + libellé */
.oeil{
  font-family:var(--texte);font-size:.7rem;font-weight:700;
  text-transform:uppercase;letter-spacing:.2em;color:var(--gris);
  margin:0 0 18px;display:flex;align-items:center;gap:10px;
}
.oeil .pl{width:9px;height:13px;color:var(--brique);flex:none}
.oeil.mat .pl{color:var(--molasse)}

.chapo{font-size:clamp(1.06rem,1.5vw,1.22rem);line-height:1.7;color:var(--gris);max-width:60ch}

a:focus-visible,button:focus-visible{outline:3px solid var(--brique);outline-offset:3px;border-radius:2px}
.btn:focus-visible,.burger:focus-visible{border-radius:var(--rayon)}
.saut{position:absolute;left:-9999px}
.saut:focus{left:var(--marge);top:8px;z-index:99;background:var(--basalte);color:var(--chaux);padding:10px 16px}

/* ══════════════════════════════════════════════════════════
   3. BOUTONS
   ══════════════════════════════════════════════════════════ */
/* Pictos « le trait du maçon » (_outils/pictos.html) : trait = couleur du texte,
   repère = var(--rep), réglé selon le fond. Toujours aria-hidden (décoratifs). */
.ic{
  width:1.5em;height:1.5em;flex:none;overflow:visible;
  fill:none;stroke:currentColor;stroke-width:2.1;stroke-linecap:round;stroke-linejoin:round;
}

/* Boutons (lot 1, maquette v2) : angles 8 px, picto intégré.
   .btn = taille courante (~62 px) ; .btn-brique = principal (~72 px, lit de pose). */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.6em;
  font-family:var(--texte);font-size:.95rem;font-weight:700;line-height:1.15;text-align:center;
  letter-spacing:.06em;text-transform:uppercase;text-decoration:none;
  padding:20px 34px;border:2px solid transparent;border-radius:var(--rayon);
  cursor:pointer;transition:background .18s,color .18s,border-color .18s,box-shadow .18s,transform .18s;
}
.btn:hover{transform:translateY(-2px)}
.btn-brique{
  background:var(--brique);color:var(--basalte);border-color:var(--brique);
  box-shadow:inset 0 -3px 0 var(--brique-fonce);--rep:var(--basalte);
  font-size:1.1rem;padding:24px 44px;min-height:72px;
}
.btn-brique:active{transform:none;box-shadow:inset 0 -1px 0 var(--brique-fonce)}
.btn-contour{background:transparent;color:var(--basalte);border-color:var(--basalte)}
.btn-contour:hover{background:var(--basalte);color:var(--chaux);--rep:var(--rep-nuit)}
/* vert sauge : réservé à ce qui mène à ANTANÉO Matériaux */
.btn-molasse{
  background:var(--molasse);color:var(--basalte);border-color:var(--molasse);
  box-shadow:inset 0 -3px 0 var(--molasse-fonce);--rep:var(--basalte);
}
.btn-molasse:active{transform:none;box-shadow:inset 0 -1px 0 var(--molasse-fonce)}

/* Lien fléché : flèche dessinée (picto suivant ou lien-externe), qui glisse de 4 px au survol */
.fleche{
  display:inline-flex;align-items:center;gap:10px;text-decoration:none;
  font-weight:700;font-size:.9rem;letter-spacing:.02em;
  border-bottom:2px solid var(--brique);padding-bottom:3px;
}
.fleche .ic{width:22px;height:22px;transition:transform .2s}
.fleche:hover .ic{transform:translateX(4px)}
.fleche.mat{border-color:var(--molasse);--rep:var(--molasse-fonce)}

/* ══════════════════════════════════════════════════════════
   4. BANDEAU MAISON COMMUNE + EN-TÊTE (logo officiel vectorisé)
   ══════════════════════════════════════════════════════════ */
.maison{background:var(--basalte-profond);color:rgba(255,255,242,.72);font-size:.73rem;letter-spacing:.09em}
.maison .cnt{display:flex;flex-wrap:wrap;gap:6px 20px;align-items:center;justify-content:center;padding-block:9px;text-align:center}
.maison strong{color:var(--chaux);font-weight:700;letter-spacing:.13em;text-transform:uppercase}
.maison .sep{color:rgba(255,255,242,.3)}
.maison a{color:var(--molasse);text-decoration:none;font-weight:500;border-bottom:1px solid transparent}
.maison a:hover{border-bottom-color:var(--molasse)}
.maison a .ic{width:15px;height:15px;vertical-align:-3px;--rep:var(--molasse)}

.tete{position:sticky;top:0;z-index:40;background:var(--chaux);border-bottom:1px solid var(--joint)}
.tete .cnt{display:flex;align-items:center;gap:28px;padding-block:14px}
.marque{display:flex;align-items:center;gap:13px;text-decoration:none;flex:none;color:var(--basalte)}
.marque .lg-sym{width:52px;height:32px;color:var(--brique)}
.marque .lg-mot{height:19px;width:auto;display:block}
.marque .lg-metier{height:8px;width:auto;display:block;margin-top:5px}
.nav{margin-left:auto;display:flex;align-items:center;gap:30px}
.nav a{text-decoration:none;font-size:.87rem;font-weight:500;padding-bottom:3px;border-bottom:2px solid transparent;transition:border-color .2s}
.nav a:hover{border-bottom-color:var(--brique)}
.nav a.vers-boutique{color:var(--molasse-fonce);font-weight:700}
.nav a.vers-boutique:hover{border-bottom-color:var(--molasse)}
.tete .btn{padding:16px 26px;font-size:.92rem;min-height:0}
.burger{
  display:none;align-items:center;justify-content:center;gap:.5em;
  min-height:44px;min-width:44px;padding:9px 12px;
  background:transparent;color:var(--basalte);border:2px solid var(--basalte);border-radius:var(--rayon);
  font:inherit;font-size:.75rem;font-weight:700;line-height:1.15;letter-spacing:.05em;text-transform:uppercase;
  cursor:pointer;
}
.burger .ic{width:22px;height:22px}

/* ══════════════════════════════════════════════════════════
   5. HÉROS — losange photo (usage charte p.14) + filigrane chevrons
   ══════════════════════════════════════════════════════════ */
.heros{position:relative;background:var(--chaux);overflow:hidden}
.filigrane{position:absolute;pointer-events:none;color:var(--brique);opacity:.16}
.heros .filigrane{right:-90px;top:-60px;width:520px;height:520px}
.heros-grille{
  max-width:var(--large);margin:0 auto;position:relative;
  display:grid;grid-template-columns:1.05fr .95fr;align-items:center;
  min-height:min(76vh,640px);
}
.heros-mots{padding:clamp(52px,7vw,96px) clamp(28px,4vw,48px) clamp(64px,8vw,110px) var(--marge);position:relative;z-index:2}
.heros h1{margin-bottom:26px}
.heros .chapo{margin-bottom:34px}
.heros-actions{display:flex;flex-wrap:wrap;gap:14px}

.heros-image{position:relative;align-self:stretch;min-height:480px}
.losange{
  position:absolute;top:50%;left:58%;transform:translate(-50%,-50%);
  width:min(46vw,640px);aspect-ratio:1;
  clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%);
}

/* Zone photo : basalte + appareillage de pierre dessiné */
.photo{
  background-color:var(--basalte);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='128' height='64'%3E%3Cg stroke='white' stroke-opacity='.085' fill='none' stroke-width='1'%3E%3Cpath d='M0 .5h128M0 32.5h128M0 63.5h128'/%3E%3Cpath d='M.5 0v32M64.5 0v32M127.5 0v32'/%3E%3Cpath d='M32.5 32v32M96.5 32v32'/%3E%3C/g%3E%3C/svg%3E");
  position:relative;display:flex;align-items:center;justify-content:center;
}
.photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}

/* Le tampon officiel, à cheval sur la couture (usage charte p.15) */
.tampon-zone{position:relative;height:0;z-index:6;pointer-events:none}
.tampon{
  position:absolute;left:clamp(20px,7vw,130px);top:-74px;
  width:clamp(120px,12.5vw,160px);aspect-ratio:1;
}
.tampon svg{width:100%;height:100%;display:block;filter:drop-shadow(0 6px 20px rgba(43,42,39,.16))}

/* ══════════════════════════════════════════════════════════
   6. RASSURANCE + PREUVES
   ══════════════════════════════════════════════════════════ */
.rassurance{background:var(--pierre);border-top:1px solid var(--joint);position:relative;overflow:hidden}
.rassurance .filigrane{right:-120px;bottom:-140px;width:460px;height:460px;opacity:.12}
.rassurance .cnt{max-width:1080px;position:relative}
.rassurance h2{margin-bottom:22px;max-width:20ch}
.rassurance .corps{max-width:62ch;font-size:1.08rem}

.preuves{background:var(--basalte);color:var(--chaux)}
.preuves .cnt{padding-block:44px}
.preuves ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,1fr);gap:30px 24px}
.preuves li{border-left:2px solid var(--brique);padding-left:16px}
.preuves .val{font-family:var(--titre);font-weight:900;font-size:1.6rem;line-height:1.1;display:block;margin-bottom:5px}
.preuves .lib{font-size:.79rem;color:rgba(255,255,242,.62);line-height:1.5}
@media(max-width:760px){.preuves ul{grid-template-columns:1fr}}

/* ══════════════════════════════════════════════════════════
   7. LES DEUX MÉTIERS — symbole officiel, code Brique / Molasse
   ══════════════════════════════════════════════════════════ */
.metiers h2{margin-bottom:16px}
.duo{display:grid;grid-template-columns:repeat(auto-fit,minmax(310px,1fr));gap:26px;margin-top:44px}
.carte-metier{
  background:var(--chaux);border:1px solid var(--joint);border-top:4px solid var(--brique);
  padding:38px 34px 34px;display:flex;flex-direction:column;gap:16px;
  transition:box-shadow .24s,transform .24s;
}
.carte-metier.mat{border-top-color:var(--molasse)}
.carte-metier:hover{box-shadow:0 14px 38px rgba(43,42,39,.09);transform:translateY(-3px)}
.carte-metier .ecu{width:56px;height:35px;color:var(--brique)}
.carte-metier.mat .ecu{color:var(--molasse)}
.carte-metier h3{font-family:var(--titre);font-size:1.55rem;font-weight:900}
.carte-metier p{color:var(--gris);font-size:.97rem;flex:1}
.carte-metier .fleche{align-self:flex-start;margin-top:4px}

/* ══════════════════════════════════════════════════════════
   8. CHANTIERS — gabarit figé
   ══════════════════════════════════════════════════════════ */
.chantiers{background:var(--pierre);border-top:1px solid var(--joint);border-bottom:1px solid var(--joint)}
.chantiers-tete{display:flex;flex-wrap:wrap;gap:20px;align-items:flex-end;justify-content:space-between;margin-bottom:44px}
.chantiers-tete h2{max-width:16ch}
.grille-chantiers{display:grid;grid-template-columns:repeat(auto-fit,minmax(290px,1fr));gap:26px}
.carte-chantier{
  background:var(--chaux);border:1px solid var(--joint);
  display:flex;flex-direction:column;overflow:hidden;
  transition:box-shadow .24s,transform .24s;
}
.carte-chantier:hover{box-shadow:0 14px 38px rgba(43,42,39,.09);transform:translateY(-3px)}
.carte-chantier .photo{aspect-ratio:4/3}
.carte-chantier .dedans{padding:24px 24px 26px;display:flex;flex-direction:column;gap:11px;flex:1}
.carte-chantier .lieu{
  font-size:.68rem;letter-spacing:.17em;text-transform:uppercase;color:var(--gris);font-weight:700;
  display:flex;gap:9px;align-items:center;
}
.carte-chantier .lieu .an{color:var(--brique-fonce)}
.carte-chantier p{font-size:.93rem;color:var(--gris);line-height:1.65;flex:1}
.materiau{font-size:.8rem;border-top:1px dashed var(--joint);padding-top:13px;margin-top:2px;color:var(--gris)}
.materiau a{color:var(--molasse-fonce);font-weight:700;text-decoration:none;border-bottom:1px solid var(--molasse)}
.materiau a:hover{color:var(--basalte)}

/* ══════════════════════════════════════════════════════════
   9. PRESCRIPTEURS — puces plomb, soulignés brique sur basalte
   ══════════════════════════════════════════════════════════ */
.prescripteurs{background:var(--basalte);color:var(--chaux);position:relative;overflow:hidden}
.prescripteurs .filigrane{left:-140px;bottom:-160px;width:500px;height:500px;opacity:.1;color:var(--chaux)}
.prescripteurs .cnt{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(34px,6vw,84px);align-items:center;position:relative}
.prescripteurs .oeil{color:rgba(255,255,242,.55)}
.prescripteurs h2{margin-bottom:22px;color:var(--chaux)}
.prescripteurs p{color:rgba(255,255,242,.76);font-size:1.03rem}
.prescripteurs ul{list-style:none;margin:0;padding:0;display:grid;gap:2px}
.prescripteurs li{
  padding:15px 0;border-bottom:1px solid rgba(255,255,242,.14);
  display:flex;gap:14px;align-items:baseline;font-size:.95rem;color:rgba(255,255,242,.86);
}
.prescripteurs .li-pl{width:10px;height:14px;flex:none;color:var(--brique);position:relative;top:1px}

/* ══════════════════════════════════════════════════════════
   10. APPEL FINAL — ornement fil à plomb (usage charte p.13)
   ══════════════════════════════════════════════════════════ */
.final{background:var(--brique);color:var(--basalte);text-align:center}
.final .cnt{max-width:760px}
.ornement{width:16px;height:64px;margin:0 auto 26px;color:var(--basalte);display:block}
.final h2{margin-bottom:18px}
.final p{font-size:1.08rem;margin-bottom:32px}
.final-actions{display:flex;flex-wrap:wrap;gap:14px;justify-content:center}
.final .btn-contour{border-color:var(--basalte)}
.final .btn-contour:hover{background:var(--basalte);color:var(--brique)}
/* bande brique ou verte : repère des pictos et contour de focus en basalte (le brique s'y perdrait) */
.final{--rep:var(--basalte)}
.final a:focus-visible,.final button:focus-visible{outline-color:var(--basalte)}
.tel-gros{
  font-family:var(--titre);font-weight:900;font-size:clamp(1.5rem,3vw,2.1rem);
  text-decoration:none;border-bottom:3px solid rgba(43,42,39,.3);
  display:inline-flex;align-items:center;gap:12px;margin-top:30px;
}
.tel-gros .ic{width:30px;height:30px}
.tel-gros:hover{border-bottom-color:var(--basalte)}

/* ══════════════════════════════════════════════════════════
   11. PIED DE PAGE — bloc-marque officiel empilé
   ══════════════════════════════════════════════════════════ */
.pied{background:var(--basalte-profond);color:rgba(255,255,242,.62);font-size:.9rem}
.pied .cnt{padding-block:64px 0}
.pied-grille{display:grid;grid-template-columns:1.5fr 1fr 1fr 1.2fr;gap:40px 32px}
.pied h4{font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;color:var(--chaux);margin:0 0 16px;font-family:var(--texte);font-weight:700}
.pied ul{list-style:none;margin:0;padding:0;display:grid;gap:9px}
.pied a{color:rgba(255,255,242,.62);text-decoration:none;border-bottom:1px solid transparent}
.pied a:hover{color:var(--chaux);border-bottom-color:var(--brique)}
.bloc-marque{color:var(--chaux);display:grid;justify-items:start;gap:8px}
.bloc-marque .lg-sym{width:56px;height:35px;color:var(--brique)}
.bloc-marque .lg-mot{height:22px;width:auto}
.bloc-marque .lg-metier{height:9px;width:auto}
.pied .baseline{font-family:var(--titre);font-weight:700;font-size:1.02rem;color:var(--chaux);line-height:1.35;margin:16px 0 12px;max-width:22ch}
.pied .zone{font-size:.82rem;line-height:1.7}
.pied .encart-mat{border:1px solid rgba(156,186,158,.3);padding:20px;background:rgba(156,186,158,.06)}
.pied .encart-mat p{font-size:.85rem;line-height:1.6;margin-bottom:14px}
/* bouton « ANTANÉO Matériaux » du pied : la règle .pied a ne doit pas l'éclaircir */
.pied .btn-molasse,.pied .btn-molasse:hover{color:var(--basalte);border-color:var(--molasse)}
.pied .btn-pied{font-size:.84rem;padding:13px 16px}
.legal{
  margin-top:52px;border-top:1px solid rgba(255,255,242,.12);
  padding-block:22px 30px;font-size:.78rem;line-height:1.7;color:rgba(255,255,242,.45);
  display:flex;flex-wrap:wrap;gap:8px 26px;justify-content:space-between;
}

/* ══════════════════════════════════════════════════════════
   12. RESPONSIVE + MOUVEMENT
   ══════════════════════════════════════════════════════════ */
@media(max-width:1000px){
  .nav{display:none}
  .tete .cnt{gap:12px}
  /* « Demander un devis » reste visible, en version courte « Devis », à côté de « Menu » */
  .tete .btn{margin-left:auto;padding:9px 12px;font-size:.75rem;letter-spacing:.05em;min-height:44px}
  .tete .btn .long{display:none}
  .burger{display:inline-flex}
  .prescripteurs .cnt{grid-template-columns:1fr}
  .pied-grille{grid-template-columns:1fr 1fr}
}
@media(max-width:760px){
  .heros-grille{grid-template-columns:1fr;min-height:0}
  .heros-mots{padding:44px var(--marge) 40px;order:1}
  .heros-image{order:2;min-height:0;height:clamp(250px,52vw,360px)}
  .losange{position:relative;inset:auto;transform:none;left:auto;top:auto;
    width:100%;height:100%;aspect-ratio:auto;
    clip-path:polygon(0 12%,50% 0,100% 12%,100% 100%,0 100%)}
  .heros .filigrane{width:300px;height:300px;right:-70px;top:-40px}
  .tampon{left:auto;right:var(--marge);top:-58px;width:106px}
  .pied-grille{grid-template-columns:1fr}
  .chantiers-tete{flex-direction:column;align-items:flex-start}
}
@media(max-width:560px){
  .burger .burger-mot{display:none}   /* Menu en picto seul (étiquette accessible sur le bouton) */
}
@media(max-width:480px){
  .btn{padding-inline:22px}
  .btn-brique{padding:20px 24px}
}
.monte{opacity:0;transform:translateY(16px);transition:opacity .7s ease,transform .7s ease}
.monte.vu{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}
  html{scroll-behavior:auto}
  .monte{opacity:1;transform:none}
  .btn,.btn:hover,.btn:active,.fleche .ic,.fleche:hover .ic{transition:none;transform:none}
}

/* ══════════════════════════════════════════════════════════
   13. SOCLE COMMUN S2 — ajouts pour les pages intérieures
   (gabarits dérivés de la maquette accueil validée le 25/08/2026 ;
   aucune règle ci-dessus n'a été modifiée)
   ══════════════════════════════════════════════════════════ */

/* 13a. Menu mobile (complète le bouton « Menu » déjà présent dans la maquette) */
.tete .cnt{position:relative}
.nav a[aria-current="page"]{border-bottom-color:var(--brique)}
.nav a.vers-boutique[aria-current="page"]{border-bottom-color:var(--molasse)}
.nav .nav-devis{display:none}
.nav.ouvert{
  display:flex;position:absolute;left:0;right:0;top:100%;
  background:var(--chaux);border-bottom:1px solid var(--joint);
  flex-direction:column;align-items:stretch;gap:0;
  padding:8px var(--marge) 18px;box-shadow:0 18px 40px rgba(43,42,39,.12);
}
.nav.ouvert a{padding:13px 0;border-bottom:1px solid var(--joint);font-size:1rem}
.nav.ouvert a:last-child{border-bottom:none}
.nav.ouvert .nav-devis{display:block;color:var(--brique-fonce);font-weight:700}
.burger[aria-expanded="true"]{background:var(--basalte);color:var(--chaux);border-color:var(--basalte);--rep:var(--rep-nuit)}
.nav-devis .ic{width:1.2em;height:1.2em;vertical-align:-.22em;margin-left:.35em}

/* 13b. En-tête de page intérieure (œilleton + titre + chapô, filigrane chevrons) */
.page-tete{position:relative;background:var(--chaux);overflow:hidden;border-bottom:1px solid var(--joint)}
.page-tete .filigrane{right:-90px;top:-80px;width:440px;height:440px}
.page-tete .cnt{position:relative;padding-block:clamp(48px,6vw,84px) clamp(44px,5vw,72px)}
.page-tete h1{font-size:clamp(2.3rem,5vw,4rem);margin-bottom:22px;max-width:18ch}
.page-tete .chapo{max-width:62ch}
@media(max-width:760px){.page-tete .filigrane{width:280px;height:280px;right:-70px;top:-40px}}

/* 13c. Récit en colonnes (À propos) */
.deux-col{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(34px,6vw,84px);align-items:start}
.recit{display:grid;gap:34px}
.recit h3{font-family:var(--titre);font-size:1.5rem;font-weight:900;margin-bottom:12px}
.recit p{font-size:1.02rem}
.citation{margin:0;border-left:3px solid var(--brique);padding:6px 0 6px 26px;font-size:1.04rem;line-height:1.75}
.citation .qui{display:block;margin-top:14px;font-size:.74rem;letter-spacing:.14em;text-transform:uppercase;font-weight:700;color:var(--gris)}
.portrait{max-width:540px;aspect-ratio:2/3;clip-path:polygon(0 0,100% 7%,100% 100%,0 93%)}
.paysage{aspect-ratio:16/10;clip-path:polygon(0 0,100% 0,100% 88%,0 100%)}
/* Photo paysage à garder entière (Matériaux, maison rénovée) : cadre 4:3 = proportion de la photo */
.paysage.entiere{aspect-ratio:4/3}
@media(max-width:1000px){.deux-col{grid-template-columns:1fr}}

/* 13d. Piliers du savoir-faire (cartes + listes à puces plomb) */
.piliers{display:grid;grid-template-columns:repeat(auto-fit,minmax(310px,1fr));gap:26px;margin-top:44px}
.pilier{background:var(--chaux);border:1px solid var(--joint);border-top:4px solid var(--brique);display:flex;flex-direction:column}
.pilier.tradi{border-top-color:var(--basalte)}
.pilier .photo{aspect-ratio:16/9}
.pilier .dedans{padding:32px 34px 34px;display:flex;flex-direction:column;gap:14px;flex:1}
.pilier h3{font-family:var(--titre);font-size:1.55rem;font-weight:900}
.pilier .intro{color:var(--gris);font-size:.97rem}
.puces{list-style:none;margin:0;padding:0;display:grid;gap:2px}
.puces li{padding:12px 0;border-bottom:1px solid var(--joint);display:flex;gap:14px;align-items:baseline;font-size:.97rem}
.puces li:last-child{border-bottom:none}
.puces .li-pl{width:10px;height:14px;flex:none;color:var(--brique);position:relative;top:1px}
.pilier.tradi .puces .li-pl{color:var(--basalte)}

/* 13e. Ponts entre les deux métiers (encart Molasse = matériaux, Brique = maçonnerie) */
.pont{background:var(--pierre);border-top:1px solid var(--joint);border-bottom:1px solid var(--joint)}
.pont .cnt{display:grid;grid-template-columns:1fr auto;gap:28px 48px;align-items:center;padding-block:48px}
.pont .ecu{width:56px;height:35px;color:var(--molasse);margin-bottom:16px}
.pont.mac .ecu{color:var(--brique)}
.pont p{font-family:var(--titre);font-weight:700;font-size:clamp(1.15rem,1.8vw,1.45rem);line-height:1.4;max-width:36ch}
.pont-actions{display:flex;flex-wrap:wrap;gap:14px;align-items:center}
@media(max-width:760px){.pont .cnt{grid-template-columns:1fr}}

/* 13f. Atouts du négoce (trois blocs) */
.atouts{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:26px;margin-top:44px}
.atout{border-top:4px solid var(--molasse);padding-top:22px}
.atout h3{font-family:var(--titre);font-size:1.3rem;font-weight:900;margin-bottom:10px}
.atout p{color:var(--gris);font-size:.97rem}
.final.mat{background:var(--molasse)}
.final.mat .btn-contour:hover{background:var(--basalte);color:var(--molasse);--rep:var(--molasse)}

/* 13g. Coordonnées (cartes) */
.coordonnees{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:22px}
.coord{background:var(--chaux);border:1px solid var(--joint);border-top:4px solid var(--brique);padding:26px 26px 28px}
.coord.mat{border-top-color:var(--molasse)}
.coord h3{font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;font-family:var(--texte);font-weight:700;color:var(--gris);margin-bottom:14px}
.coord .gros{font-family:var(--titre);font-weight:900;font-size:1.3rem;line-height:1.25;display:block;text-decoration:none;color:var(--basalte);margin-bottom:6px;word-break:break-word}
.coord a.gros:hover{color:var(--brique)}
.coord p{font-size:.93rem;color:var(--gris)}
/* Coordonnée avec son picto dans un cadre carré (lot 1) ; cadre vert sauge pour le dépôt */
.coord-pic{display:grid;grid-template-columns:48px minmax(0,1fr);gap:0 16px;align-items:start}
.coord .pic{width:48px;height:48px;display:grid;place-items:center;border:2px solid var(--basalte);border-radius:var(--rayon);background:#fff;color:var(--basalte)}
.coord .pic .ic{width:26px;height:26px}
.coord.mat .pic{border-color:var(--molasse-fonce);--rep:var(--molasse-fonce)}

/* 13h. Formulaire de contact (posé, envoi branché en S4) */
.formulaire{display:grid;gap:18px}
.champ{display:grid;gap:7px}
.champ label{font-size:.76rem;letter-spacing:.12em;text-transform:uppercase;font-weight:700;color:var(--gris)}
.champ label .opt{font-weight:400;text-transform:none;letter-spacing:0}
.champ input,.champ textarea{
  font:inherit;font-size:1rem;padding:13px 15px;width:100%;
  border:1px solid var(--joint);border-radius:2px;background:#fff;color:var(--basalte);
}
.champ input:focus,.champ textarea:focus{outline:3px solid var(--brique);outline-offset:1px;border-color:var(--brique)}
.champ textarea{min-height:160px;resize:vertical}
.champs-2{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.formulaire .note{font-size:.82rem;color:var(--gris);line-height:1.6}
.formulaire .btn{justify-self:start}
.avis{display:none;background:var(--pierre);border-left:3px solid var(--brique);padding:14px 18px;font-size:.92rem}
.avis.visible{display:block}
/* champ piège anti-robot du formulaire (contact.php) : hors écran, jamais rempli par un humain */
.piege{position:absolute;left:-10000px;top:auto;width:1px;height:1px;overflow:hidden}
@media(max-width:600px){.champs-2{grid-template-columns:1fr}}

/* 13i. Repère du lieu (bloc adresse sur basalte, lien vers la carte) */
.carte-lieu{
  background:var(--basalte);color:var(--chaux);padding:34px 30px;position:relative;overflow:hidden;
  min-height:260px;display:flex;flex-direction:column;justify-content:flex-end;gap:10px;
}
.carte-lieu .filigrane{color:var(--chaux);opacity:.1;right:-60px;top:-60px;width:320px;height:320px}
.carte-lieu .ou{font-family:var(--titre);font-weight:900;font-size:1.5rem;line-height:1.2;position:relative}
.carte-lieu p{color:rgba(255,255,242,.75);font-size:.92rem;position:relative}
.carte-lieu{--rep:var(--rep-nuit)}
.carte-lieu .ttl{display:flex;align-items:center;gap:10px;position:relative}
.carte-lieu .ttl .ic{width:26px;height:26px}
/* repère brique : le vert sauge est réservé à ce qui mène à ANTANÉO Matériaux */
.carte-lieu .fleche{color:var(--chaux);border-color:var(--brique);position:relative;align-self:flex-start}


/* ── S5-2 (10/09/2026) : vidéo des quinze ans, logo Maître artisan ── */
.video .lecteur{margin-top:28px;background:var(--basalte);aspect-ratio:16/9;overflow:hidden}
.video video{display:block;width:100%;height:100%;object-fit:cover;background:var(--basalte)}
.video .duree{margin-top:12px;font-size:.8rem;color:var(--gris);letter-spacing:.06em}
.gerant-grille{display:grid;grid-template-columns:1fr 220px;gap:36px 56px;align-items:center}
.label-artisan{margin:0;text-align:center}
.label-artisan img{width:220px;max-width:100%;height:auto;display:block;margin:0 auto}
.label-artisan figcaption{margin-top:12px;font-size:.74rem;letter-spacing:.14em;text-transform:uppercase;font-weight:700;color:var(--gris)}
@media(max-width:760px){.gerant-grille{grid-template-columns:1fr;gap:28px}}

/* ── Lot A (25/09/2026) : pages légales (mentions légales, confidentialité) ── */
.juridique{max-width:74ch;display:grid;gap:44px}
.juridique h2{font-size:clamp(1.4rem,2.4vw,1.8rem);margin-bottom:16px}
.juridique p{font-size:.99rem}
.juridique p a{color:var(--brique-fonce);text-underline-offset:.18em;overflow-wrap:anywhere}
.juridique p a:hover{color:var(--basalte)}
.juridique .puces{margin:0 0 1.1em}
.juridique .maj{font-size:.8rem;color:var(--gris);letter-spacing:.06em;border-top:1px dashed var(--joint);padding-top:18px}

/* ── Lot B (25/09/2026) : réalisations générées depuis _outils/chantiers.ini ── */
.carte-chantier .lieu,.carte-chantier .materiau{flex:none}   /* seul le texte absorbe la hauteur d'une carte étirée */
.carte-chantier h3 a{color:inherit;text-decoration:none}
.carte-chantier h3 a:hover{color:var(--brique-fonce)}
.carte-chantier h2{font-size:1.2rem;line-height:1.25;letter-spacing:-.008em;font-weight:700}
.page-realisations .carte-chantier{scroll-margin-top:24px}
.carte-chantier .photos{display:grid;gap:3px;background:var(--joint)}
.carte-chantier .photos.n2{grid-template-columns:1fr 1fr}
.carte-chantier .photos.n3{grid-template-columns:1fr 1fr 1fr}
.carte-chantier figure.photo{margin:0;aspect-ratio:4/3}
.carte-chantier figcaption{
  position:absolute;left:0;right:0;bottom:0;padding:22px 12px 9px;
  font-size:.74rem;line-height:1.4;color:var(--chaux);
  background:linear-gradient(to top,rgba(31,30,28,.78),rgba(31,30,28,0));
}
.carte-chantier .badge{
  position:absolute;top:10px;left:10px;background:var(--chaux);color:var(--basalte);
  font-size:.62rem;letter-spacing:.16em;text-transform:uppercase;font-weight:700;
  padding:4px 9px;border-radius:var(--rayon);
}
@media(min-width:761px){.page-realisations .carte-chantier.multi{grid-column:span 2}}
@media(max-width:480px){
  .carte-chantier .photos.n3{grid-template-columns:1fr 1fr}
  .carte-chantier .photos.n3 .photo:first-child{grid-column:span 2}
  .carte-chantier figcaption{font-size:.68rem;padding:18px 9px 7px}
}

/* ── Lot D (25/09/2026) : page d'entrée = ex-À propos (maquette validée par PYB) ── */
/* texte lu par les lecteurs d'écran seulement (ex. « (nouvelle fenêtre) » des liens vers la boutique) */
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
/* en-tête de la page d'entrée : passage M2A -> ANTANÉO MAÇONNERIE (règles limitées à .passage-tete) */
.passage-tete h1{max-width:none;font-size:clamp(2.1rem,4.4vw,3.7rem);line-height:1.06;margin-bottom:34px}
.passage-tete .ancien-nom{display:block}
.passage-tete h1{color:var(--basalte)}
.passage-tete .nouveau-nom{color:var(--brique);text-transform:uppercase}
@media(min-width:761px){.passage-tete .nouveau-nom{white-space:nowrap}}
.passage{margin:0 0 34px;display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:stretch;gap:18px;max-width:1000px}
/* cartes : mêmes règles que .carte-metier (angles vifs, bordure joint, filet brique de 4 px) */
.passage-carte{padding:30px 28px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;min-height:190px}
.passage-carte .oeil{margin:0}
.passage-carte.hier{background:var(--basalte)}
.passage-carte.hier .oeil{color:rgba(255,255,242,.55)}   /* comme .prescripteurs .oeil */
.passage-carte.aujourdhui{background:var(--chaux);border:1px solid var(--joint);border-top:4px solid var(--brique)}
.passage-carte img{display:block;height:auto}
.passage-carte.hier img{width:min(100%,330px)}
.passage-carte.aujourdhui img{width:min(100%,230px)}
.passage-fleche{display:flex;align-items:center;justify-content:center}
.passage-fleche .ic{width:44px;height:44px;color:var(--basalte)}   /* repère = --rep du site (brique foncé sur fond clair) */
.passage-accueil{margin-top:18px;max-width:62ch;padding:14px 18px;border-left:3px solid var(--brique);background:var(--pierre);font-size:.98rem;line-height:1.6}
@media(max-width:760px){
  .passage{grid-template-columns:1fr;gap:8px}
  .passage-fleche .ic{transform:rotate(90deg);width:34px;height:34px}
  .passage-carte{min-height:0;padding:22px 18px}
  .passage-carte.hier img{width:min(100%,280px)}
  .passage-carte.aujourdhui img{width:min(100%,190px)}
}

/* ── Photos de Pierre-André, paquet 2 (01/10/2026) : photo de chantier debout (portrait) ──
   gardée entière dans le cadre 4:3 de la carte, sur le fond basalte appareillé de .photo */
.carte-chantier .photo.debout img{object-fit:contain}