/* ============================================================
   LAMBERT & BECK — socle DA (da-brief.md = le contrat)
   Palette mesurée au pixel sur leurs ads. Jamais de couleur inventée.
   ============================================================ */

/* ── Fonts self-hostées ── */
@font-face{ font-family:'Poppins'; src:url('fonts/Poppins-500.woff2') format('woff2'); font-weight:500; font-style:normal; font-display:swap; }
@font-face{ font-family:'Poppins'; src:url('fonts/Poppins-600.woff2') format('woff2'); font-weight:600; font-style:normal; font-display:swap; }
@font-face{ font-family:'Poppins'; src:url('fonts/Poppins-700.woff2') format('woff2'); font-weight:700; font-style:normal; font-display:swap; }
@font-face{ font-family:'IBM Plex Sans'; src:url('fonts/IBMPlexSans-var.woff2') format('woff2'); font-weight:300 700; font-style:normal; font-display:swap; }
@font-face{ font-family:'Caveat'; src:url('fonts/Caveat-600.woff2') format('woff2'); font-weight:600; font-style:normal; font-display:swap; }
@font-face{ font-family:'Newsreader'; src:url('fonts/Newsreader-500.woff2') format('woff2'); font-weight:500; font-style:normal; font-display:swap; }
@font-face{ font-family:'Newsreader'; src:url('fonts/Newsreader-500-italic.woff2') format('woff2'); font-weight:500; font-style:italic; font-display:swap; }

/* ── Tokens (da-brief) ── */
:root{
  --ink:#141414; --paper:#FFFFFF; --panel:#F7F7F7;
  --brand:#FCBB2D;          /* jaune chevron — ACTION uniquement */
  --brand-2:#BEB822;        /* olive chevron — logo/puces */
  --alert:#EE0000;          /* rouge — signalement d'infraction UNIQUEMENT */
  --alert-sketch:#D34B3B;   /* variante croquis, grandes surfaces */
  --brand-2-deep:#6E6B14;   /* olive de marque assombri : les coches sur fond clair (l'olive vif y tombe a 1.95 de contraste) */
  --mute:#5A5A5A; --line:rgba(20,20,20,.10);
  --font-display:'Poppins',system-ui,sans-serif;
  --font-serif:'Newsreader',Georgia,serif;
  --font-body:'IBM Plex Sans',system-ui,sans-serif;
  --font-hand:'Caveat',cursive;
  --dash:1px dashed rgba(20,20,20,.35);
  /* échelle z (layers-and-mobile) */
  --z-base:0; --z-deco:1; --z-nav:100; --z-sticky-cta:200; --z-wa:210;
  --z-notifs:220; --z-popup:300; --z-cookie:400; --z-form-modal:10000;
}

*{ box-sizing:border-box; }
/* l'attribut hidden GAGNE toujours, même contre un display:flex explicite
   (sinon un overlay "fermé" continue d'intercepter tous les clics , classe d'incident EasyHome) */
[hidden]{ display:none !important; }
html{ scroll-behavior:smooth; }
body{ margin:0; font-family:var(--font-body); font-weight:400; color:var(--ink); background:var(--paper); font-size:16.5px; line-height:1.55; -webkit-font-smoothing:antialiased; }
h1,h2,h3{ font-family:var(--font-display); font-weight:600; line-height:1.12; letter-spacing:-.015em; margin:0; }
p{ margin:0; }
img{ max-width:100%; height:auto; }
a{ color:inherit; }

/* ── Titres ── */
.h-hero{ font-size:clamp(2.6rem,6vw,5.4rem); font-weight:600; line-height:1.06; letter-spacing:-.02em; }
.h-section{ font-size:clamp(1.6rem,3.6vw,3rem); font-weight:600; letter-spacing:-.018em; }
.h-monster{ font-size:clamp(2.6rem,8.5vw,7rem); font-weight:700; line-height:.98; letter-spacing:-.03em; }
.eyebrow{ font-family:var(--font-display); font-weight:600; font-size:.78rem; letter-spacing:.18em; text-transform:uppercase; color:var(--mute); display:inline-flex; align-items:center; gap:10px; }
.serif-note{ font-family:var(--font-serif); font-style:italic; font-weight:500; }

/* ── LE MOTIF : marquage d'infraction + annotations de plan ── */
/* contour pointillé rouge autour de l'élément fautif (photo ou texte) */
.mark-red{ position:relative; display:inline-block; }
.mark-red::after{ content:''; position:absolute; inset:-.08em -.22em; border:2px dashed var(--alert); border-radius:10px; pointer-events:none; }
/* zone détourée sur photo */
.mark-zone{ position:absolute; border:3px dashed var(--alert); border-radius:14px; background:rgba(238,0,0,.10); box-shadow:0 0 0 4px rgba(238,0,0,.06); pointer-events:none; }
/* annotation manuscrite */
.annot{ font-family:var(--font-hand); font-weight:600; font-size:clamp(1.15rem,2vw,1.6rem); line-height:1.1; color:var(--ink); }
.annot--alert{ color:var(--alert); }
.annot--paper{ color:#fff; }
/* filet "plan" */
.dash-rule{ border:0; border-top:var(--dash); }
/* surligneur jaune (chiffres-clés, avec parcimonie) */
.hl-y{ background:linear-gradient(transparent 55%, rgba(252,187,45,.55) 55%, rgba(252,187,45,.55) 92%, transparent 92%); padding:0 .1em; }
/* marks ✗ / ✓ */
.mk{ font-weight:700; display:inline-block; width:1.35em; }
.mk--x{ color:var(--alert); } .mk--v{ color:var(--brand-2-deep); }
/* sur fond sombre, l'olive vif reprend la main (le fonce y disparaitrait) */
.ink-rich .mk--v{ color:var(--brand-2); }
/* ... sauf dans un panneau CLAIR pose sur la bande sombre : on retombe sur le fonce */
.ink-rich .panel .mk--v{ color:var(--brand-2-deep); }

/* ── Le chevron bicolore (seul substitut de logo admis — hex mesurés) ── */
.chev{ display:inline-block; width:.62em; height:.86em; flex:none; }
.chev svg{ display:block; width:100%; height:100%; }

/* ── CTA : pill plein jaune + chevron, capitales espacées (hérité de leurs ads) ── */
.btn{ appearance:none; border:0; cursor:pointer; text-decoration:none; display:inline-flex; align-items:center; justify-content:center; gap:12px; font-family:var(--font-display); font-weight:600; letter-spacing:.12em; text-transform:uppercase; font-size:.92rem; border-radius:999px; padding:1.02rem 1.9rem; min-height:44px; transition:transform .15s ease, box-shadow .15s ease, background .15s ease; }
.btn-cta{ background:var(--brand); color:var(--ink); box-shadow:0 10px 26px -12px rgba(252,187,45,.55); }
.btn-cta:active{ transform:translateY(2px); box-shadow:0 4px 12px -8px rgba(252,187,45,.5); }
.btn-ghost{ background:transparent; color:var(--ink); border:1.5px solid var(--ink); }
.btn-ghost--paper{ color:#fff; border-color:rgba(255,255,255,.85); }
@media (hover:hover) and (pointer:fine){
  .btn-cta:hover{ transform:translateY(-2px); box-shadow:0 16px 34px -12px rgba(252,187,45,.65); }
  .btn-ghost:hover{ background:rgba(20,20,20,.05); }
}

/* ── Fonds ── */
.panel{ background:var(--panel); border-radius:24px; }
/* sombre riche (jamais d'aplat, NEVER-DO 20douze) — base ink + glows chevron */
.ink-rich{ position:relative; background:
  radial-gradient(ellipse 60% 50% at 15% 15%, rgba(255,255,255,.07) 0%, transparent 70%),
  radial-gradient(ellipse 42% 42% at 86% 80%, rgba(252,187,45,.13) 0%, transparent 70%),
  radial-gradient(ellipse 40% 40% at 82% 6%, rgba(190,184,34,.09) 0%, transparent 65%),
  linear-gradient(155deg,#232323 0%,#161616 50%,#0d0d0d 100%); color:#fff; }
.ink-rich::before{ content:''; position:absolute; inset:0; background-image:radial-gradient(rgba(255,255,255,.05) 1px, transparent 1px); background-size:26px 26px; pointer-events:none; }
.ink-rich::after{ content:''; position:absolute; inset:0; box-shadow:inset 0 1px 0 rgba(255,255,255,.07), inset 0 -40px 80px -40px rgba(0,0,0,.5); pointer-events:none; }
.ink-rich > *{ position:relative; z-index:1; }
/* clair à matière : grille de plan très fine + halo chevron */
.plan-grid{ position:relative; background:
  linear-gradient(rgba(20,20,20,.045) 1px, transparent 1px),
  linear-gradient(90deg, rgba(20,20,20,.045) 1px, transparent 1px),
  radial-gradient(ellipse 55% 45% at 78% 18%, rgba(252,187,45,.10) 0%, transparent 60%),
  var(--paper);
  background-size:30px 30px, 30px 30px, auto, auto; }
.mesh-soft{ background:
  radial-gradient(ellipse 900px 600px at 85% 5%, rgba(252,187,45,.10), transparent 55%),
  radial-gradient(ellipse 700px 500px at 5% 90%, rgba(190,184,34,.07), transparent 55%),
  linear-gradient(180deg, var(--panel) 0%, var(--paper) 100%); }

/* ── Reveals & dessins (transform/opacity only, ease-out) ── */
.reveal{ opacity:0; transform:translateY(22px); transition:opacity .6s cubic-bezier(.22,1,.36,1), transform .6s cubic-bezier(.22,1,.36,1); }
.reveal.is-in{ opacity:1; transform:none; }
.draw-path{ stroke-dasharray:var(--len,600); stroke-dashoffset:var(--len,600); transition:stroke-dashoffset 1.4s cubic-bezier(.22,1,.36,1) .15s; }
.is-in .draw-path, .draw-path.is-in{ stroke-dashoffset:0; }
@media (prefers-reduced-motion:reduce){ .reveal,.draw-path{ transition:none; opacity:1; transform:none; stroke-dashoffset:0; } }

/* ── Layers & mobile (MUST-DO 22) ── */
.site-header,.nav-sticky{ z-index:var(--z-nav); }
.sticky-cta,#sticky-cta{ z-index:var(--z-sticky-cta); }
.wa-bubble,#wa-bubble{ z-index:var(--z-wa); }
#live-notif{ z-index:var(--z-notifs); }
.exit-popup,#exit-popup{ z-index:var(--z-popup); }
#cookie-banner,#cookie-wall{ z-index:var(--z-cookie); }
#form-modal,#modal{ z-index:var(--z-form-modal); }
.sticky-cta,#sticky-cta,#cookie-banner{ padding-bottom:max(1rem, env(safe-area-inset-bottom)); }
.wa-bubble,#wa-bubble,#live-notif{ bottom:max(20px, calc(env(safe-area-inset-bottom) + 12px)); }
#form-modal .modal__panel{ padding-top:max(1.25rem, env(safe-area-inset-top)); padding-bottom:max(1.25rem, env(safe-area-inset-bottom)); }
.hero--full{ min-height:100vh; min-height:100dvh; min-height:100svh; }
.btn,.cta,button,input[type="submit"],.opt-chip,.faq__question{ min-height:44px; }
.icon-btn,.modal__close{ position:relative; }
.icon-btn::before,.modal__close::before{ content:""; position:absolute; inset:-10px; }
.consent-wrap{ display:flex; align-items:flex-start; gap:12px; min-height:44px; cursor:pointer; }
.consent-wrap input[type="checkbox"]{ width:22px; height:22px; flex:0 0 22px; margin-top:2px; accent-color:var(--brand); }
.btn,.cta,button,a,.opt-chip,label{ touch-action:manipulation; }
#form-modal,.modal__panel,.modal__body{ overscroll-behavior:contain; -webkit-overflow-scrolling:touch; }

/* ── Layout helpers ── */
.wrap{ max-width:1200px; margin:0 auto; padding:0 clamp(1.25rem,4vw,3rem); }
.section-pad{ padding:clamp(4rem,8vw,7rem) 0; }