/* ================= CHARTE GRAPHIQUE (style board) =================
   Noir architectural, blanc pur, bleu technique pour l'information, rouge réservé à l'urgence.
   Titres en Montserrat (800), textes en Inter. Angles nets, repères de plan (équerres, grille). */
@font-face{font-family:"Montserrat";font-style:normal;font-weight:500 900;font-display:swap;src:url("../fonts/montserrat-latin.woff2") format("woff2")}
:root{
  --ink:#111111; --ink-2:#1B1D20; --ink-rgb:17,17,17; --ink-deep:#0B0B0B;
  --paper:#FFFFFF; --sand:#F4F5F7; --line:#E7E9EC; --muted:#5A5F67;
  --gold:#6F9BE8; --accent-rgb:111,155,232;        /* bleu clair : accents sur fond noir */
  --gold-deep:#2457A7; --blue:#2457A7; --blue-soft:#EAF0F9;
  --on-dark:#FFFFFF; --on-dark-muted:#B3B8C0;
  --urgence:#E53935; --mineral:#E7E9EC;
  --f-display:"Montserrat","Inter",ui-sans-serif,system-ui,sans-serif;
  --r-lg:6px; --r-md:4px; --r-sm:3px;
}
body{color:var(--ink)}
h1,h2,h3,h4,.h2{font-family:var(--f-display);text-wrap:balance}
h1,h2,.h2{font-weight:800!important;letter-spacing:-.025em!important}
h3,h4{font-weight:700!important;letter-spacing:-.01em!important}
.hero h1 .l2,.hub-intro h1 em,.page-hub em,.page-hub .em{font-family:var(--f-display)!important;font-style:normal!important;font-weight:800;color:var(--blue)!important;font-size:1em!important;line-height:inherit!important}
.on-dark h2 em,.page-hub .final h2 em,.page-hub .join-body h2 em,.chapter h2 span,.final h2 span,.join-body h2 span{color:var(--gold)!important}
.eyebrow{color:var(--muted);letter-spacing:.18em}
.eyebrow::before{background:var(--blue)!important;opacity:1!important;width:28px;height:2px}
.on-dark .eyebrow::before,.process-card .eyebrow::before{background:var(--gold)!important}

/* ---------- Logo : blanc sur l'en-tête noir ---------- */
.logo-word b{font-family:var(--f-display);font-weight:800;letter-spacing:-.02em}
.logo-word small{letter-spacing:.42em}

/* ---------- En-tête noir ---------- */
.topbar{background:#0A0A0A;border-bottom:1px solid #222}
.uni-plomb,.uni-salon{--uni-c:var(--gold)}
.nav{background:var(--ink)!important;backdrop-filter:none;-webkit-backdrop-filter:none}
.scrolled .nav{border-bottom-color:#2A2A2A}
.site-head .logo{color:#fff}
.navlinks{color:rgba(255,255,255,.82)}
.navlinks a:hover,.navlinks a.current{color:#fff}
.navlinks a::after{background:var(--gold)}
.menu-btn{background:transparent;border-color:#333;color:#fff}
.nav .btn-primary{background:var(--paper);color:var(--ink)}
.nav .btn-primary:hover{background:var(--blue);color:#fff}

/* ---------- Boutons ---------- */
.btn-primary{background:var(--ink);color:#fff}
.btn-primary:hover{background:var(--blue);color:#fff}
.btn-gold{background:var(--blue);color:#fff}
.btn-gold:hover{background:#1C4787;color:#fff}
.page-hub .btn-gold{background:var(--paper)!important;color:var(--ink)!important}
.page-hub .btn-gold:hover{background:var(--blue)!important;color:#fff!important}
.btn-ghost{border-color:var(--ink)}
.btn-urgence,.nav .btn-urgence{display:inline-flex;align-items:center;gap:9px;background:var(--urgence);color:#fff;border-radius:999px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;font-size:13.5px;padding:14px 22px;border:0}
.btn-urgence:hover,.nav .btn-urgence:hover{background:#C62828;color:#fff}
.btn-urgence svg{width:17px;height:17px}
.btn-outline-light{display:inline-flex;align-items:center;justify-content:center;gap:10px;border:1.5px solid rgba(255,255,255,.85);color:#fff;padding:15px 24px;font-weight:600;font-size:15px;transition:background .3s,color .3s}
.btn-outline-light:hover{background:#fff;color:var(--blue)}
.btn-outline-light svg{width:17px;height:17px}

/* ---------- Repères d'architecte : équerres aux coins ---------- */
.corners{position:relative}
.corners::before,.corners::after{content:"";position:absolute;width:22px;height:22px;pointer-events:none;border-color:var(--c-corner,var(--blue));border-style:solid}
.corners::before{left:-1px;top:-1px;border-width:2px 0 0 2px}
.corners::after{right:-1px;bottom:-1px;border-width:0 2px 2px 0}

/* ---------- Hero « urgence » (plomberie, salons) ---------- */
.c-hero{background:var(--ink);color:#fff}
.c-hero-grid{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(0,1fr);min-height:clamp(480px,64vh,640px)}
.c-hero-main{position:relative;overflow:hidden;display:flex;align-items:center}
.c-hero-main img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:grayscale(.35) brightness(.55)}
.c-hero-main::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(10,10,10,.92) 0%,rgba(10,10,10,.65) 55%,rgba(10,10,10,.35))}
.c-hero-in{position:relative;z-index:1;padding:clamp(40px,6vw,88px) clamp(20px,5vw,72px);display:grid;gap:22px;max-width:680px}
.c-kicker{display:flex;align-items:center;gap:14px;font-family:var(--f-body);font-size:12px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:rgba(255,255,255,.8);margin-bottom:18px}
.c-kicker::after{content:"";width:34px;height:2px;background:var(--gold);order:-1}
.c-hero h1{font-size:clamp(40px,5.4vw,74px);line-height:1.02;margin:0;color:#fff}
.c-hero h1 .c-title{display:block}
.c-hero p{color:rgba(255,255,255,.85);font-size:clamp(16px,1.3vw,18px);max-width:52ch}
.c-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:6px}
.c-hero-panel{background:var(--blue);color:#fff;padding:clamp(36px,4.5vw,64px) clamp(24px,4vw,56px);display:grid;align-content:center;gap:22px;--c-corner:#fff}
.c-hero-panel .c-panel-head{display:flex;align-items:center;gap:18px}
.c-hero-panel .c-panel-head svg{width:56px;height:56px;flex:none;color:#fff}
.c-hero-panel h2{font-size:clamp(24px,2.3vw,32px);color:#fff;line-height:1.1}
.c-checks{list-style:none;margin:0;padding:0;display:grid;gap:14px}
.c-checks li{display:flex;gap:12px;align-items:flex-start;font-size:15.5px;line-height:1.45}
.c-checks svg{width:19px;height:19px;flex:none;margin-top:2px;color:#fff}
.c-checks small{display:block;color:rgba(255,255,255,.75);font-size:13.5px}
.c-figs{padding-block:clamp(36px,5vw,56px)}
.c-figs .figures{margin-top:0;border-top:0;padding-top:0}
.figure strong sup{color:var(--blue)}
@media (max-width:900px){.c-hero-grid{grid-template-columns:1fr}.c-hero-main{min-height:440px}}

/* ---------- Cartes, icônes, blocs d'information ---------- */
.trust-item,.need,.tarif,.offer{border:1px solid var(--line)}
.trust-item .ic,.need .ic,.others-ic,.acompte-ic{background:var(--blue-soft)!important;color:var(--blue)!important;border-radius:4px}
.trust-item.feature,.tarif.feature,.offer.feature{background:var(--ink);border-color:var(--ink)}
.trust-item.feature .ic{background:rgba(255,255,255,.08)!important;color:#fff!important}
.float-card .ic{background:var(--blue);color:#fff}
.svc-kicker,.tarif-sub,.offer-kicker,.door-kicker,.work-meta,.also-label{color:var(--blue)!important}
.tarif.feature .tarif-sub,.offer.feature .offer-kicker{color:var(--gold)!important}
.svc li svg,.offer li svg,.hero-meta svg,.contact-points svg{color:var(--blue)!important}
.badge-urgent,.c-badge{display:inline-flex;align-items:center;gap:6px;background:var(--urgence)!important;color:#fff!important;font-size:11px!important;font-weight:700;letter-spacing:.08em;text-transform:uppercase;padding:6px 11px!important;border-radius:3px!important}
.badge-urgent::before{display:none}
.acompte,.c-info{background:var(--blue-soft)!important;border:0!important}
.acompte strong{color:var(--blue)}
.step.on .dot{background:var(--blue)!important;border-color:var(--blue)!important;color:#fff!important}
.steps::after{background:var(--gold)!important}
.step small{color:var(--gold)!important}
.stars{color:var(--blue)}
.review .avatar{background:var(--ink);color:#fff}
.page-hub .stars{color:var(--blue)!important}
.page-hub .review .avatar{color:#fff!important}
.door{border-radius:var(--r-md)}
.door-plomb.door-dark{background:var(--ink);color:#fff}
.door-plomb.door-dark .door-kicker,.door-plomb.door-dark .door-cta{color:var(--gold)!important}
.door-salon{background:var(--paper);border:1px solid var(--line)}
.door-salon .door-kicker,.door-salon .door-cta{color:var(--blue)!important}
.door .door-photo::after{display:none!important}
.door-photo .c-badge{position:absolute;left:16px;bottom:16px}
.choice-group button[aria-pressed="true"]{background:var(--blue);border-color:var(--blue)}
.field input:focus,.field textarea:focus{border-color:var(--blue)}
.work-tag,.door-tag{border-radius:3px}
.site-foot{background:var(--ink)}
.scroll-progress{background:var(--blue)!important}
mark.todo{border-radius:2px}

/* ---------- Accueil : manifeste + plan d'architecte ---------- */
.c-manifesto{padding-block:clamp(80px,10vw,140px);border-top:1px solid var(--line)}
.c-manifesto-grid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:clamp(32px,6vw,90px);align-items:center}
.c-manifesto .c-small{font-family:var(--f-display);font-weight:700;font-size:15px;margin-bottom:22px}
.c-manifesto h2{font-size:clamp(38px,5vw,68px);line-height:1.02;margin:0}
.c-manifesto h2 span{color:var(--blue)}
.c-rule{width:46px;height:3px;background:var(--blue);margin:30px 0 22px}
.c-manifesto p{color:var(--muted);font-size:17px;max-width:44ch}
.c-values{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px;margin-top:44px;max-width:560px}
.c-value{display:grid;justify-items:center;gap:10px;text-align:center;font-weight:600;font-size:14px}
.c-value svg{width:40px;height:40px;color:var(--blue)}
.c-plan{position:relative;padding:22px}
.c-plan svg{width:100%;height:auto;display:block}
@media (max-width:900px){.c-manifesto-grid{grid-template-columns:1fr}.c-values{grid-template-columns:repeat(2,minmax(0,1fr))}}
.c-tagline{padding-block:clamp(60px,8vw,100px)}
.c-tagline-in{max-width:760px;margin:0 auto;padding:36px 28px;text-align:center;font-family:var(--f-body);font-weight:600;font-size:clamp(14px,1.4vw,17px);letter-spacing:.2em;text-transform:uppercase;line-height:1.9}
.c-tagline-in b{color:var(--blue);font-weight:700}