/* ============================================================
   CONSTRUISEZ — direction « cabinet » (refonte 2026)
   Matières : zinc des toits parisiens, meulière de Saint-Maur,
   papier calque, cote d'architecte.
   Chargée APRÈS tokens.css : redéfinit les variables et quelques composants.
   ============================================================ */

@font-face{font-family:'Bodoni Moda';font-style:normal;font-weight:400 600;font-display:swap;
  src:url('../assets/fonts/bodoni-moda-latin-var.woff2?v=979ddd1') format('woff2')}
@font-face{font-family:'Bodoni Moda';font-style:italic;font-weight:400 600;font-display:swap;
  src:url('../assets/fonts/bodoni-moda-latin-italic-var.woff2?v=979ddd1') format('woff2')}

:root{
  /* palette */
  --ardoise:#1D2629;        /* zinc, ardoise : texte, fonds sombres, boutons */
  --calque:#EEF0ED;         /* papier calque froid : fond de page */
  --papier:#F8F9F7;         /* feuille : cartes */
  --vert-de-gris:#3E6B5C;   /* patine du zinc : liens, accents */
  --meuliere:#8A6A3C;       /* meulière : cotes uniquement (contraste AA sur calque) */
  --mine:#7A8488;           /* mine de plomb : traits fins, légendes */

  /* variables historiques réaffectées */
  --ink:var(--ardoise); --ink-soft:#4B5559; --ink-faint:#5F696D;
  --paper:var(--calque); --surface:var(--papier); --surface-alt:#E3E7E3;
  --line:#D3D9D5; --line-strong:#B9C1BC;
  --accent:var(--vert-de-gris); --accent-deep:#2C5246; --accent-tint:#E0E8E3; --accent-soft:#A9C3B8;
  --amber:var(--meuliere);
  --wash:var(--accent-tint); --gold:#C9A66B;
  --shadow:none;
  --shadow-feat:0 1px 0 rgba(29,38,41,.06);
  --font-display:'Bodoni Moda','Times New Roman',serif;
  --radius:2px; --radius-lg:3px;
}

/* ---------- typographie ---------- */
body{background:var(--calque);font-size:16.5px;line-height:1.72}
h1,h2{font-family:var(--font-display);font-weight:450;letter-spacing:-.01em;line-height:1.1;font-optical-sizing:none;font-variation-settings:'opsz' 14}
h2{font-variation-settings:'opsz' 12}
h1 em,h2 em{font-style:italic;font-weight:400}
h3{font-family:var(--font-body);font-weight:600;letter-spacing:-.005em}
.hero--v2 h1{font-size:clamp(2.5rem,1.5rem + 3.4vw,4.3rem);line-height:1.08;max-width:15ch;padding-top:.08em}
.lead{color:var(--ink-soft)}
a{text-underline-offset:3px}

/* sur-titres : mine de plomb, filet court */
.eyebrow{color:var(--mine);letter-spacing:.22em;font-size:11px}
.eyebrow::before{background:var(--mine) !important}

/* ---------- en-tête ---------- */
.site-header{background:rgba(238,240,237,.9);border-bottom:1px solid var(--line)}
.nav__link{letter-spacing:.01em}
.site-header .hd-cta{padding:11px 20px;font-size:13.5px}
@media (max-width:880px){.site-header .hd-cta{padding:9px 14px;font-size:13px}}

/* ---------- boutons : rectangles d'ardoise ---------- */
.btn{border-radius:var(--radius);background:var(--ardoise);border:1px solid var(--ardoise);color:#F4F5F3;
  font-weight:500;font-size:14.5px;letter-spacing:.02em;padding:15px 28px;box-shadow:none;transition:background .25s,border-color .25s}
.btn:hover{background:var(--vert-de-gris);border-color:var(--vert-de-gris);color:#fff;transform:none;box-shadow:none}
.btn--ghost{background:transparent;color:var(--ardoise);border:1px solid var(--line-strong)}
.btn--ghost:hover{background:transparent;color:var(--ardoise);border-color:var(--ardoise)}
.btn:focus-visible{outline:2px solid var(--vert-de-gris);outline-offset:3px}

/* ---------- surfaces ---------- */
.card{border-radius:var(--radius-lg);box-shadow:none;border:1px solid var(--line);background:var(--papier)}
.card:hover{transform:none;box-shadow:none;border-color:var(--line-strong)}
.card::after{display:none}
.section--alt{background:var(--surface-alt)}
.section--ink{background:var(--ardoise)}
.chip{border-radius:var(--radius);background:transparent;border:1px solid var(--line-strong);font-size:13.5px}
.shot,.shot img,.hero__media,.hero__media img,.pf figure,.pf img,.prj figure,figure img{border-radius:var(--radius)}
.blueprint{background-image:none !important}
.blueprint::before,.blueprint::after{display:none !important}

/* ---------- signature : la cote d'architecte ----------
   Ligne fine bornée par deux traits obliques, mesure au centre.
   Toujours porteuse d'un fait réel (dimension, surface, date). */
.cote{--cote-bg:var(--calque);position:relative;display:flex;justify-content:center;align-items:center;
  min-height:22px;color:var(--meuliere);font-family:var(--font-mono);font-size:11px;letter-spacing:.16em;
  text-transform:uppercase;border-left:1px solid currentColor;border-right:1px solid currentColor;
  background:
    linear-gradient(135deg,transparent 44%,currentColor 44% 56%,transparent 56%) left center/12px 12px no-repeat,
    linear-gradient(135deg,transparent 44%,currentColor 44% 56%,transparent 56%) right center/12px 12px no-repeat}
.cote::before{content:"";position:absolute;left:0;right:0;top:50%;height:1px;background:currentColor;opacity:.85}
.cote span{position:relative;background:var(--cote-bg);padding:0 14px;line-height:1.4;text-align:center;max-width:calc(100% - 56px)}
.cote--vert{flex-direction:column;border:0;border-top:1px solid currentColor;border-bottom:1px solid currentColor;
  min-height:0;width:22px;background:
    linear-gradient(135deg,transparent 44%,currentColor 44% 56%,transparent 56%) center top/12px 12px no-repeat,
    linear-gradient(135deg,transparent 44%,currentColor 44% 56%,transparent 56%) center bottom/12px 12px no-repeat}
.cote--vert::before{left:50%;right:auto;top:0;bottom:0;width:1px;height:auto}
.cote--vert span{writing-mode:vertical-rl;transform:rotate(180deg);padding:14px 0}

/* ---------- accueil : en-tête de page ---------- */
.hero--v2{padding-block:clamp(2.5rem,6vw,5.5rem)}
.hero--v2 .hero__grid{grid-template-columns:5fr 6fr;gap:clamp(2rem,5vw,5rem);align-items:end}
.hero__media{box-shadow:none !important}
.hero__media::before,.hero__media::after{display:none !important}
.hero-tag{display:none}
.hero__cote{margin-top:16px}
.trust-line{font-family:var(--font-mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-soft);
  border-top:1px solid var(--line);padding-top:18px;gap:10px 26px}
.trust-line strong{color:var(--ardoise);font-weight:500}
.trust-line b{color:var(--meuliere);letter-spacing:.1em}

/* ---------- barre d'action mobile : sobre ---------- */
.mobile-actions{left:0;right:0;bottom:0;gap:0;grid-template-columns:1fr auto auto;background:var(--ardoise);
  border-top:1px solid rgba(255,255,255,.08);padding:8px 10px calc(8px + env(safe-area-inset-bottom))}
.mobile-actions a{border-radius:var(--radius);box-shadow:none;font-weight:500;font-size:14.5px;letter-spacing:.02em}
.mobile-actions a.ma-cta{background:#F4F5F3;color:var(--ardoise);border-radius:var(--radius);font-weight:500}
.mobile-actions .ma-cta:hover{color:var(--ardoise)}
.mobile-actions a.ma-call,.mobile-actions a.ma-wa{background:transparent;color:#E8ECEA !important;width:52px;flex:0 0 52px;padding:13px 0;font-weight:500}

/* ---------- pied de page ---------- */
footer, .site-footer{background:var(--ardoise)}

@media (max-width:880px){
  .hero--v2 .hero__grid{grid-template-columns:1fr}
  .cote{font-size:10px;letter-spacing:.04em}
  .cote span{white-space:nowrap;padding:0 10px}
  .hero--v2 h1{max-width:none}
}
@media (prefers-reduced-motion:reduce){ .btn{transition:none} }

/* ---------- le didone reste réservé aux grands formats ---------- */
h3,.shot figcaption span,.faq summary,.priceband h3,.collage figcaption b,.gal figcaption b,.glass-stats b,
.svc b,.pcard .bd b,.pcart b,.zones b,.eng-band strong{font-family:var(--font-body);font-weight:600;letter-spacing:-.005em}
.engage .big,.hstep .ghost,.eng-band b{font-weight:450;letter-spacing:-.01em;font-variation-settings:'opsz' 14}
.engage .big{color:var(--ardoise)}

/* ---------- bandeau d'appel final ---------- */
.foot-cta{background:var(--ardoise);border-bottom:1px solid rgba(255,255,255,.08)}
.foot-cta h2{font-weight:450;font-size:clamp(22px,2.8vw,30px);font-variation-settings:'opsz' 14}
.foot-cta .f-cta-btn{background:var(--calque);color:var(--ardoise);border-radius:var(--radius);font-weight:500;letter-spacing:.02em}
.foot-cta .f-cta-btn:hover{transform:none;color:var(--ardoise);background:#fff}
.foot-cta .fc-stars b{color:#C9A66B}

/* ---------- pages départements (gabarit autonome) ---------- */
.hdr{background:rgba(238,240,237,.92);border-bottom:1px solid var(--line)}
.hdr__cta{border-radius:var(--radius) !important}
.ftr{background:var(--ardoise)}
.hero__fig,.hero__fig img,.projet img{border-radius:var(--radius)}
.mono{color:var(--mine)}

/* ---------- formulaire d'étude (#cz) : palette de la refonte ---------- */
#cz{--ink:var(--ardoise);--ink-soft:#4B5559;--paper:var(--papier);--panel:#E8ECE9;--panel-2:#DDE3DF;
  --line:#D3D9D5;--line-2:#B9C1BC;--accent:var(--vert-de-gris);--accent-d:#2C5246;--amber:var(--meuliere);--radius:3px}
#cz .cz-opt.sel{background:var(--accent-tint);border-color:var(--vert-de-gris)}

/* ---------- ajustements après revue ---------- */
/* en-tête des pages départements : menu en police de texte, bouton ardoise */
.hdr .nav>a,.hdr .nav .drop>span{font-family:var(--font-body);font-weight:500;border-radius:var(--radius)}
.hdr .hdr__cta{background:var(--ardoise);border:1px solid var(--ardoise);font-weight:500;letter-spacing:.02em}
.hdr .hdr__cta:hover{background:var(--vert-de-gris)}
.hdr .burger-btn{border-radius:var(--radius)}
.hero::before{display:none} /* trame quadrillée des pages départements */
.hdr .hdr__in > .btn{display:none} /* doublon du bouton d'en-tête (.hdr__cta suffit) */
.container.crumb{padding:16px 22px 0}
/* l'alignement bas de l'en-tête de page n'est voulu qu'avec une photo (accueil) */
.hero--v2 .hero__grid{align-items:start}
.hero--v2 .hero__grid:has(> .hero__media){align-items:end}

.hero__grid:has(> .card){align-items:start} /* contact : titre en haut, face au formulaire */

/* pages à styles intégrés dans le corps de page : priorité renforcée */
body .btn{font-family:var(--font-body)}
body .mobile-actions{left:0;right:0;bottom:0;gap:0;background:var(--ardoise);padding:8px 10px calc(8px + env(safe-area-inset-bottom))}
body .mobile-actions a{border-radius:var(--radius);box-shadow:none}
body .mobile-actions a.ma-cta{background:#F4F5F3;color:var(--ardoise);font-weight:500}
body .mobile-actions a.ma-call,body .mobile-actions a.ma-wa{background:transparent;color:#E8ECEA !important}