/* ==========================================================================
   K&B Consulting — Design System
   Zéro dépendance, zéro CDN. Tout est local.
   Famille de polices : Space Grotesk (display) + Geist (texte) + Geist Mono (labels)
   Accent unique verrouillé : bleu #2563EB. Rayon unique : pilule (boutons) / 16-24px (cartes).
   ========================================================================== */

/* ---------- Polices auto-hébergées ---------- */
@font-face { font-family:"Geist"; src:url("../fonts/geist-400.woff2") format("woff2"); font-weight:400; font-display:swap; }
@font-face { font-family:"Geist"; src:url("../fonts/geist-500.woff2") format("woff2"); font-weight:500; font-display:swap; }
@font-face { font-family:"Geist"; src:url("../fonts/geist-600.woff2") format("woff2"); font-weight:600; font-display:swap; }
@font-face { font-family:"Geist"; src:url("../fonts/geist-700.woff2") format("woff2"); font-weight:700; font-display:swap; }
@font-face { font-family:"Space Grotesk"; src:url("../fonts/spacegrotesk-500.woff2") format("woff2"); font-weight:500; font-display:swap; }
@font-face { font-family:"Space Grotesk"; src:url("../fonts/spacegrotesk-600.woff2") format("woff2"); font-weight:600; font-display:swap; }
@font-face { font-family:"Space Grotesk"; src:url("../fonts/spacegrotesk-700.woff2") format("woff2"); font-weight:700; font-display:swap; }
@font-face { font-family:"Geist Mono"; src:url("../fonts/geistmono-500.woff2") format("woff2"); font-weight:500; font-display:swap; }

/* ---------- Tokens ---------- */
:root{
  --ink:#0E1A2B;          /* texte principal / fonds sombres */
  --ink-soft:#1E2C40;
  --paper:#F6F7F9;        /* fond de page */
  --surface:#FFFFFF;      /* cartes */
  --muted:#586374;        /* texte secondaire — contraste AA sur paper */
  --muted-soft:#8A95A4;
  --line:#E4E8ED;         /* hairlines */
  --accent:#2563EB;       /* accent UNIQUE */
  --accent-ink:#1D4ED8;   /* hover accent */
  --accent-wash:#EDF2FE;  /* fond accent clair */
  --good:#0F9D58;

  --r-sm:10px;
  --r:16px;
  --r-lg:24px;
  --r-pill:999px;

  --shadow-sm:0 1px 2px rgba(14,26,43,.05), 0 1px 1px rgba(14,26,43,.04);
  --shadow:0 12px 30px -12px rgba(14,26,43,.18);
  --shadow-lg:0 30px 60px -24px rgba(14,26,43,.30);

  --maxw:1200px;
  --font-display:"Space Grotesk", system-ui, sans-serif;
  --font-sans:"Geist", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-mono:"Geist Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
}

/* ---------- Reset ---------- */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
[hidden]{display:none!important}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  font-family:var(--font-sans);
  background:var(--paper);
  color:var(--ink);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
button{font-family:inherit;cursor:pointer;border:none;background:none}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:4px}
::selection{background:rgba(37,99,235,.18)}

/* ---------- Layout ---------- */
.wrap{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:24px}
.section{padding-block:clamp(72px,10vw,128px)}
/* Décalage pour la nav fixe lors des sauts d'ancre.
   Base = juste de quoi dégager la nav flottante (les sections ont déjà leur padding haut). */
section[id]{scroll-margin-top:72px}
/* Sections cibles du menu : padding haut réduit pour que le titre arrive juste sous
   la nav (sinon gros vide en arrivant). Le bas garde son espace, donc le rythme
   entre sections reste aéré au scroll normal. */
#constat,#calcul,#automatisation,#confidentialite{padding-top:clamp(16px,2vw,24px)}
/* #methode n'a pas de padding-top : on compense via le scroll-margin. */
#methode{scroll-margin-top:96px}
.eyebrow{
  font-family:var(--font-mono);font-size:12px;font-weight:500;
  letter-spacing:.12em;text-transform:uppercase;color:var(--accent);
  display:inline-flex;align-items:center;gap:8px;
}
.eyebrow::before{content:"";width:18px;height:1px;background:var(--accent);display:inline-block}

/* ---------- Typo ---------- */
h1,h2,h3,h4{font-family:var(--font-display);font-weight:600;line-height:1.05;letter-spacing:-.02em;color:var(--ink)}
.display{font-size:clamp(2.4rem,5.4vw,4.2rem);line-height:1.02;letter-spacing:-.03em}
.h2{font-size:clamp(1.9rem,3.6vw,3rem)}
.h3{font-size:clamp(1.25rem,2vw,1.6rem);letter-spacing:-.02em}
.lead{font-size:clamp(1.05rem,1.5vw,1.22rem);color:var(--muted);max-width:60ch}
.muted{color:var(--muted)}
.accent{color:var(--accent)}
.mono{font-family:var(--font-mono)}

/* ---------- Boutons (pilule, règle unique) ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  font-weight:600;font-size:15px;line-height:1;white-space:nowrap;
  padding:14px 24px;border-radius:var(--r-pill);
  transition:transform .15s ease, background .2s ease, box-shadow .2s ease, color .2s ease;
}
.btn:active{transform:translateY(1px) scale(.99)}
.btn-primary{background:var(--accent);color:#fff;box-shadow:0 6px 18px -6px rgba(37,99,235,.55)}
.btn-primary:hover{background:var(--accent-ink);box-shadow:0 10px 24px -8px rgba(37,99,235,.6)}
.btn-dark{background:var(--ink);color:#fff}
.btn-dark:hover{background:var(--ink-soft)}
.btn-ghost{background:transparent;color:var(--ink);border:1px solid var(--line)}
.btn-ghost:hover{border-color:var(--ink);background:var(--surface)}
.btn-lg{padding:17px 30px;font-size:16px}
.btn svg{width:18px;height:18px}

/* ---------- Navigation ---------- */
.nav{
  position:fixed;top:16px;left:50%;transform:translateX(-50%);
  width:min(100% - 32px, var(--maxw));z-index:60;
  display:flex;align-items:center;justify-content:space-between;
  height:64px;padding:0 12px 0 18px;
  background:rgba(255,255,255,.82);
  -webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);
  border:1px solid rgba(228,232,237,.9);border-radius:var(--r-pill);
  box-shadow:0 8px 30px -16px rgba(14,26,43,.18);
  transition:height .3s ease, box-shadow .3s ease, top .3s ease;
}
.nav.scrolled{height:56px;top:10px;box-shadow:0 14px 40px -18px rgba(14,26,43,.28)}
.nav__links{display:flex;align-items:center;gap:28px}
.nav__link{font-size:14.5px;font-weight:500;color:var(--muted);transition:color .2s}
.nav__link:hover{color:var(--ink)}
.brand{display:flex;align-items:center;gap:10px}
.brand__mark{
  width:38px;height:38px;border-radius:11px;background:var(--ink);
  display:flex;align-items:center;justify-content:center;flex-shrink:0;
}
.brand__mark svg{width:20px;height:20px;color:#fff}
.brand__name{font-family:var(--font-display);font-weight:700;font-size:21px;line-height:1;letter-spacing:-.04em;color:var(--ink)}
.brand__sub{font-family:var(--font-mono);font-size:9px;font-weight:500;letter-spacing:.32em;color:var(--accent);text-transform:uppercase;margin-top:3px;display:block}
.nav__cta{display:flex;align-items:center;gap:10px}
.nav__burger{display:none;width:42px;height:42px;border-radius:12px;align-items:center;justify-content:center;color:var(--ink)}
.nav__burger svg{width:22px;height:22px}

/* ---------- Hero ---------- */
.hero{padding-top:148px;padding-bottom:clamp(60px,8vw,96px)}
.hero__grid{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(32px,5vw,72px);align-items:center}
.hero__title{margin:22px 0 22px}
.hero__title em{font-style:italic;color:var(--accent);font-weight:600}
.hero__actions{display:flex;gap:14px;flex-wrap:wrap;margin-top:34px}
.hero__meta{display:grid;grid-template-columns:repeat(3,1fr);margin-top:38px;border-top:1px solid var(--line);padding-top:22px}
.hero__meta-item{position:relative;padding:0 22px}
.hero__meta-item:first-child{padding-left:0}
.hero__meta-item:not(:last-child)::after{content:"";position:absolute;right:0;top:1px;bottom:3px;width:1px;background:var(--line)}
.hero__meta .num{font-family:var(--font-display);font-size:1.05rem;font-weight:700;color:var(--ink);letter-spacing:-.02em;line-height:1.1;display:flex;align-items:center;gap:8px;white-space:nowrap}
.hero__meta .num::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--accent);flex-shrink:0}
.hero__meta .lbl{font-size:12.5px;color:var(--muted);line-height:1.4;margin-top:8px;max-width:22ch}
.hero__visual{position:relative}
.hero__img{
  width:100%;aspect-ratio:4/5;object-fit:cover;border-radius:var(--r-lg);
  box-shadow:var(--shadow-lg);border:1px solid rgba(255,255,255,.6);
}
.hero__chip{
  position:absolute;left:-18px;bottom:34px;background:var(--surface);
  border:1px solid var(--line);border-radius:var(--r);padding:14px 16px;
  box-shadow:var(--shadow);display:flex;align-items:center;gap:12px;max-width:240px;
}
.hero__chip .dot{width:34px;height:34px;border-radius:9px;background:var(--accent-wash);color:var(--accent);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.hero__chip .dot svg{width:18px;height:18px}
.hero__chip b{font-size:14px;display:block;line-height:1.2}
.hero__chip span{font-size:12.5px;color:var(--muted)}

/* ---------- Bandeau problème ---------- */
.problem{background:var(--ink);color:#fff}
.problem .eyebrow{color:#7FA8FF}
.problem .eyebrow::before{background:#7FA8FF}
.problem h2{color:#fff;max-width:18ch}
.problem__lead{color:#A9B5C6;max-width:54ch;margin-top:20px;font-size:1.1rem}
.problem__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;margin-top:56px}
.problem__item{border-top:1px solid rgba(255,255,255,.14);padding-top:20px}
.problem__item .num{font-family:var(--font-display);font-size:2.6rem;font-weight:700;color:#fff;letter-spacing:-.03em}
.problem__item p{color:#A9B5C6;font-size:14.5px;margin-top:6px}

/* ---------- Bento solutions ---------- */
.bento{display:grid;grid-template-columns:repeat(6,1fr);gap:18px;margin-top:54px}
.cell{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:30px;display:flex;flex-direction:column;
  transition:transform .3s cubic-bezier(.2,.8,.2,1), box-shadow .3s ease;
}
.cell:hover{transform:translateY(-4px);box-shadow:var(--shadow)}
.cell__ic{width:46px;height:46px;border-radius:12px;background:var(--accent-wash);color:var(--accent);display:flex;align-items:center;justify-content:center;margin-bottom:18px}
.cell__ic svg{width:22px;height:22px}
.cell h3{margin-bottom:8px}
.cell p{color:var(--muted);font-size:15px}
.cell--wide{grid-column:span 4}
.cell--tall{grid-column:span 2;row-span:2}
.cell--3{grid-column:span 3}
.cell--2{grid-column:span 2}
.cell--feature{
  grid-column:span 4;background:var(--ink);color:#fff;position:relative;overflow:hidden;
  min-height:300px;justify-content:flex-end;border-color:transparent;
}
.cell--feature h3{color:#fff}
.cell--feature p{color:#A9B5C6;max-width:42ch}
.cell--feature .cell__ic{background:rgba(127,168,255,.16);color:#9DBBFF}
.cell--img{grid-column:span 2;padding:0;overflow:hidden;min-height:300px}
.cell--img img{width:100%;height:100%;object-fit:cover}
.cell--accent{grid-column:span 2;background:var(--accent);color:#fff;border-color:transparent}
.cell--accent h3{color:#fff}.cell--accent p{color:rgba(255,255,255,.85)}
.cell--accent .cell__ic{background:rgba(255,255,255,.18);color:#fff}

/* ---------- Étapes ---------- */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:0;margin-top:54px;border-top:1px solid var(--line)}
.step{padding:34px 28px 34px 0;border-right:1px solid var(--line);position:relative}
.step:last-child{border-right:none;padding-right:0}
.step__n{font-family:var(--font-mono);font-size:13px;color:var(--accent);font-weight:500}
.step h3{margin:14px 0 10px}
.step p{color:var(--muted);font-size:15px;max-width:34ch}

/* ---------- Spotlight base de données ---------- */
.spot{display:grid;grid-template-columns:.95fr 1.05fr;gap:clamp(32px,5vw,72px);align-items:center}
.spot__panel{
  background:var(--ink);border-radius:var(--r-lg);padding:8px;box-shadow:var(--shadow-lg);
}
.spot__bar{display:flex;gap:6px;padding:14px 16px}
.spot__bar i{width:11px;height:11px;border-radius:50%;background:rgba(255,255,255,.18)}
.spot__rows{background:#0A1322;border-radius:18px;padding:10px;font-family:var(--font-mono);font-size:13px}
.spot__row{display:grid;grid-template-columns:84px 1fr 92px;gap:12px;align-items:center;padding:13px 14px;border-radius:10px;color:#C6D2E4}
.spot__row+.spot__row{margin-top:6px}
.spot__row:nth-child(odd){background:rgba(255,255,255,.03)}
.spot__row .ref{color:#7FA8FF}
.spot__tag{justify-self:start;font-size:11px;padding:4px 10px;border-radius:999px;background:rgba(15,157,88,.16);color:#5FD49A}
.spot__tag.warn{background:rgba(255,184,0,.14);color:#FFC95C}
.spot__list{margin-top:24px;display:flex;flex-direction:column;gap:18px}
.spot__li{display:flex;gap:14px;align-items:flex-start}
.spot__li .ic{width:34px;height:34px;border-radius:9px;background:var(--accent-wash);color:var(--accent);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.spot__li .ic svg{width:18px;height:18px}
.spot__li b{display:block;font-size:15.5px}
.spot__li span{font-size:14px;color:var(--muted)}

/* ---------- Citation ---------- */
.quote{background:var(--ink);color:#fff;text-align:center}
.quote__mark{font-family:var(--font-display);font-size:4rem;color:var(--accent);line-height:1;opacity:.5}
.quote blockquote{font-family:var(--font-display);font-weight:600;font-size:clamp(1.6rem,3.2vw,2.5rem);line-height:1.18;letter-spacing:-.02em;max-width:20ch;margin:14px auto 26px}
.quote cite{font-style:normal;color:var(--muted-soft);font-size:14.5px}
.quote cite b{color:#fff;display:block;font-size:15.5px;margin-bottom:2px}

/* ---------- CTA finale ---------- */
.cta{text-align:center}
.cta__card{
  background:var(--accent);border-radius:var(--r-lg);padding:clamp(44px,6vw,80px) 32px;
  position:relative;overflow:hidden;color:#fff;box-shadow:0 30px 60px -28px rgba(37,99,235,.7);
}
.cta__card h2{color:#fff;max-width:18ch;margin-inline:auto}
.cta__card p{color:rgba(255,255,255,.88);max-width:48ch;margin:18px auto 32px;font-size:1.08rem}
.cta__card .btn-primary{background:#fff;color:var(--accent)}
.cta__card .btn-primary:hover{background:#F0F4FF}

/* ---------- Footer ---------- */
.footer{background:var(--paper);border-top:1px solid var(--line);padding-block:56px 40px}
.footer__top{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:40px;padding-bottom:40px;border-bottom:1px solid var(--line)}
.footer p{color:var(--muted);font-size:14.5px;max-width:34ch;margin-top:16px}
.footer h4{font-family:var(--font-sans);font-size:12px;text-transform:uppercase;letter-spacing:.1em;color:var(--muted-soft);margin-bottom:16px;font-weight:600}
.footer__col a{display:block;color:var(--ink);font-size:14.5px;padding:6px 0;transition:color .2s}
.footer__col a:hover{color:var(--accent)}
.footer__bottom{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;padding-top:28px;font-size:13.5px;color:var(--muted)}

/* ---------- Reveal au scroll ---------- */
.reveal{opacity:0;transform:translateY(24px);transition:opacity .7s cubic-bezier(.2,.8,.2,1), transform .7s cubic-bezier(.2,.8,.2,1)}
.reveal.in{opacity:1;transform:none}
.reveal[data-d="1"]{transition-delay:.08s}
.reveal[data-d="2"]{transition-delay:.16s}
.reveal[data-d="3"]{transition-delay:.24s}

/* ==========================================================================
   FORMULAIRE — Ouvrir un dossier
   ========================================================================== */
.form-page{min-height:100dvh;display:flex;align-items:flex-start;justify-content:center;padding:104px 20px 60px}
.form-shell{width:100%;max-width:760px}
.form-back{display:inline-flex;align-items:center;gap:8px;color:var(--muted);font-size:14px;font-weight:500;margin-bottom:22px;transition:color .2s}
.form-back:hover{color:var(--ink)}
.form-back svg{width:16px;height:16px}
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--shadow);overflow:hidden}
.card__head{padding:30px 34px;border-bottom:1px solid var(--line);display:flex;justify-content:space-between;align-items:flex-start;gap:16px}
.card__head h1{font-size:1.6rem}
.card__head p{color:var(--muted);font-size:14.5px;margin-top:6px}
.badge{font-family:var(--font-mono);font-size:11.5px;font-weight:500;padding:7px 13px;border-radius:999px;background:var(--accent-wash);color:var(--accent);display:inline-flex;align-items:center;gap:7px;white-space:nowrap}
.badge .dot{width:7px;height:7px;border-radius:50%;background:var(--accent)}
.form-body{padding:30px 34px;display:flex;flex-direction:column;gap:26px}
.field{display:flex;flex-direction:column;gap:8px}
.field>label{font-size:14px;font-weight:600;color:var(--ink)}
.field .hint{font-size:13px;color:var(--muted-soft)}
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.input,.select,.textarea{
  width:100%;padding:13px 15px;font-size:15px;font-family:inherit;color:var(--ink);
  background:var(--paper);border:1px solid var(--line);border-radius:var(--r-sm);
  transition:border-color .2s, box-shadow .2s, background .2s;
}
.input::placeholder,.textarea::placeholder{color:var(--muted-soft)}
.input:focus,.select:focus,.textarea:focus{outline:none;border-color:var(--accent);background:var(--surface);box-shadow:0 0 0 3px rgba(37,99,235,.14)}
.textarea{resize:vertical;min-height:110px;line-height:1.5}

/* dictée vocale */
.field__labelrow{display:flex;align-items:center;justify-content:space-between;gap:12px}
.dictate{display:inline-flex;align-items:center;gap:7px;padding:6px 13px;border-radius:var(--r-pill);border:1px solid var(--line);background:var(--surface);font-size:13px;font-weight:600;color:var(--muted);transition:border-color .2s,color .2s,background .2s}
.dictate[hidden]{display:none}
.dictate:hover{border-color:var(--accent);color:var(--accent)}
.dictate svg{width:15px;height:15px}
.dictate__dot{display:none;width:8px;height:8px;border-radius:50%;background:#DC2626;flex-shrink:0}
.dictate.recording{border-color:#DC2626;color:#DC2626;background:#FEF2F2}
.dictate.recording .dictate__mic{display:none}
.dictate.recording .dictate__dot{display:inline-block;animation:pulse-rec 1s ease-in-out infinite}
@keyframes pulse-rec{0%,100%{opacity:1}50%{opacity:.25}}
.dictate-hint{display:flex;align-items:center;gap:7px;font-size:12.5px;color:var(--muted-soft);margin-top:2px}
.dictate-hint[hidden]{display:none}
.dictate-hint svg{width:13px;height:13px;flex-shrink:0}
.select{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23586374' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 14px center;padding-right:42px;cursor:pointer}
.field .err{font-size:13px;color:#DC2626;display:none}
.field.invalid .input,.field.invalid .select,.field.invalid .textarea{border-color:#DC2626;box-shadow:0 0 0 3px rgba(220,38,38,.12)}
.field.invalid .err{display:block}

/* chips radio (urgence) */
.chips{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.chip{position:relative;cursor:pointer}
.chip input{position:absolute;opacity:0;inset:0;cursor:pointer}
.chip__box{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;min-height:72px;border:1px solid var(--line);border-radius:var(--r-sm);padding:12px 14px;background:var(--paper);transition:all .2s;text-align:center}
.chip__box b{font-size:14.5px;display:block}
.chip__box span{font-size:12.5px;color:var(--muted)}
.chip input:checked+.chip__box{border-color:var(--accent);background:var(--accent-wash)}
.chip input:checked+.chip__box b{color:var(--accent-ink)}
.chip input:focus-visible+.chip__box{box-shadow:0 0 0 3px rgba(37,99,235,.18)}

/* matières (boutons pilule sélectionnables) */
.matieres{display:flex;flex-wrap:wrap;gap:10px}
.mat{position:relative;cursor:pointer}
.mat input{position:absolute;opacity:0}
.mat__b{display:inline-flex;align-items:center;gap:7px;padding:10px 16px;border-radius:var(--r-pill);border:1px solid var(--line);background:var(--paper);font-size:14px;font-weight:500;color:var(--muted);transition:all .2s}
.mat input:checked+.mat__b{border-color:var(--accent);background:var(--accent);color:#fff}
.mat input:focus-visible+.mat__b{box-shadow:0 0 0 3px rgba(37,99,235,.18)}

/* consentement */
.consent{display:flex;flex-wrap:wrap;gap:12px;align-items:flex-start;background:var(--paper);border:1px solid var(--line);border-radius:var(--r-sm);padding:14px 16px}
.consent input{order:0}.consent label{flex:1}
.consent input{width:18px;height:18px;margin-top:2px;accent-color:var(--accent);flex-shrink:0;cursor:pointer}
.consent label{font-size:13.5px;color:var(--muted);line-height:1.5}
.consent a{color:var(--accent);text-decoration:underline}
.consent .err{display:none;flex-basis:100%;font-size:13px;color:#DC2626;margin-top:2px}
.consent.invalid{border-color:#DC2626;box-shadow:0 0 0 3px rgba(220,38,38,.12)}
.consent.invalid .err{display:block}

.form-foot{padding:24px 34px 32px;border-top:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}
.form-foot .note{font-size:13px;color:var(--muted-soft);display:flex;align-items:center;gap:8px}
.form-foot .note svg{width:15px;height:15px}

/* notice config supabase */
.notice{display:none;align-items:flex-start;gap:12px;background:#FFF8E6;border:1px solid #FCE3A3;color:#7A5A00;border-radius:var(--r-sm);padding:14px 16px;font-size:13.5px;line-height:1.5;margin-bottom:22px}
.notice.show{display:flex}
.notice svg{width:18px;height:18px;flex-shrink:0;margin-top:1px}
.notice code{font-family:var(--font-mono);background:rgba(0,0,0,.06);padding:1px 6px;border-radius:5px;font-size:12.5px}

/* état succès */
.success{display:none;flex-direction:column;align-items:center;text-align:center;padding:56px 34px 60px}
.success.show{display:flex}
.success__ring{width:74px;height:74px;border-radius:50%;background:rgba(15,157,88,.12);color:var(--good);display:flex;align-items:center;justify-content:center;margin-bottom:24px;animation:pop .5s cubic-bezier(.2,.9,.3,1.4)}
.success__ring svg{width:36px;height:36px}
@keyframes pop{0%{transform:scale(.6);opacity:0}100%{transform:scale(1);opacity:1}}
.success h2{font-size:1.7rem;margin-bottom:10px}
.success p{color:var(--muted);max-width:44ch;margin-bottom:24px}
.success__ref{font-family:var(--font-mono);font-size:15px;background:var(--paper);border:1px dashed var(--line);border-radius:var(--r-sm);padding:12px 20px;margin-bottom:30px;color:var(--ink)}
.success__ref b{color:var(--accent)}
.btn[disabled]{opacity:.6;pointer-events:none}
.spin{width:17px;height:17px;border:2px solid rgba(255,255,255,.4);border-top-color:#fff;border-radius:50%;animation:rot .7s linear infinite}
@keyframes rot{to{transform:rotate(360deg)}}

/* ==========================================================================
   PAGE DE LANCEMENT (splash)
   ========================================================================== */
.splash{position:fixed;inset:0;background:var(--ink);display:flex;align-items:center;justify-content:center;overflow:hidden}
.splash__glow{position:absolute;width:680px;height:680px;border-radius:50%;background:radial-gradient(circle,rgba(37,99,235,.22),rgba(14,26,43,0) 70%);animation:breathe 5s ease-in-out infinite alternate}
@keyframes breathe{0%{transform:scale(.92);opacity:.7}100%{transform:scale(1.08);opacity:1}}
.splash__inner{position:relative;z-index:2;text-align:center;display:flex;flex-direction:column;align-items:center}
.splash__mark{width:80px;height:80px;border-radius:22px;background:var(--ink-soft);display:flex;align-items:center;justify-content:center;border:1px solid rgba(255,255,255,.1);box-shadow:0 0 50px rgba(37,99,235,.35)}
.splash__mark svg{width:40px;height:40px;color:#fff}
.splash__name{font-family:var(--font-display);font-weight:700;font-size:2rem;color:#fff;letter-spacing:-.04em;margin-top:20px}
.splash__sub{font-family:var(--font-mono);font-size:11px;letter-spacing:.34em;color:var(--accent);text-transform:uppercase;margin-top:6px}
.splash__tag{margin-top:36px;font-family:var(--font-display);font-weight:500;font-size:clamp(1.4rem,3vw,2rem);color:#C6D2E4;letter-spacing:-.02em}
.splash__tag b{color:#fff;font-weight:600}
.splash__bar{width:200px;height:3px;border-radius:99px;background:rgba(255,255,255,.12);margin-top:44px;overflow:hidden}
.splash__bar i{display:block;height:100%;width:40%;background:var(--accent);border-radius:99px;animation:load 1.6s ease-in-out infinite}
@keyframes load{0%{transform:translateX(-120%)}100%{transform:translateX(360%)}}
.splash__enter{margin-top:38px}

.fade-up{opacity:0;transform:translateY(18px);animation:fadeUp 1.1s cubic-bezier(.16,1,.3,1) forwards}
.fade-up.d1{animation-delay:.2s}.fade-up.d2{animation-delay:.6s}.fade-up.d3{animation-delay:1s}
@keyframes fadeUp{to{opacity:1;transform:none}}

/* ==========================================================================
   CALCULATEUR — temps & argent perdus
   ========================================================================== */
.calc{display:grid;grid-template-columns:1fr .92fr;gap:22px;margin-top:44px;align-items:stretch}
.calc__inputs{display:flex;flex-direction:column;gap:30px;justify-content:center;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:34px}
.calc__field label{display:flex;justify-content:space-between;align-items:baseline;gap:12px;font-size:14.5px;font-weight:600;color:var(--ink)}
.calc__field output{font-family:var(--font-display);font-weight:700;font-size:1.15rem;color:var(--accent);letter-spacing:-.02em;white-space:nowrap}
.calc__field input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:6px;border-radius:999px;background:var(--line);outline:none;margin-top:14px;cursor:pointer}
.calc__field input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:22px;height:22px;border-radius:50%;background:var(--accent);border:3px solid #fff;box-shadow:0 2px 8px rgba(37,99,235,.45);cursor:pointer}
.calc__field input[type=range]::-moz-range-thumb{width:18px;height:18px;border-radius:50%;background:var(--accent);border:3px solid #fff;box-shadow:0 2px 8px rgba(37,99,235,.45);cursor:pointer}
.calc__result{background:var(--ink);color:#fff;border-radius:var(--r-lg);padding:38px 34px;display:flex;flex-direction:column;justify-content:center;box-shadow:var(--shadow-lg)}
.calc__res-block{display:flex;flex-direction:column;gap:8px}
.calc__res-label{font-size:13.5px;color:#A9B5C6}
.calc__res-num{font-family:var(--font-display);font-weight:700;font-size:clamp(2.1rem,4vw,2.9rem);letter-spacing:-.03em;line-height:1;color:#fff}
.calc__res-num.accent-num{color:#7FA8FF}
.calc__divider{height:1px;background:rgba(255,255,255,.12);margin:22px 0}
.calc__cta{margin-top:28px;width:100%}
.calc__note{font-size:12px;color:#8A95A4;margin-top:16px;line-height:1.5}

/* Widget d'estimation compact (formulaire d'audit) */
.est{display:grid;grid-template-columns:1fr auto;gap:22px;align-items:center;border:1px solid var(--line);border-radius:var(--r);background:var(--paper);padding:18px 22px}
.est__sliders{display:flex;flex-direction:column;gap:13px;min-width:0}
.est__row{display:grid;grid-template-columns:128px 1fr 52px;gap:12px;align-items:center;font-size:13px}
.est__row>span{color:var(--muted)}
.est__row b{text-align:right;font-family:var(--font-mono);font-size:12.5px;color:var(--accent)}
.est__row input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:5px;border-radius:999px;background:var(--line);outline:none;cursor:pointer}
.est__row input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:17px;height:17px;border-radius:50%;background:var(--accent);border:3px solid #fff;box-shadow:0 1px 5px rgba(37,99,235,.5);cursor:pointer}
.est__row input[type=range]::-moz-range-thumb{width:14px;height:14px;border-radius:50%;background:var(--accent);border:3px solid #fff;cursor:pointer}
.est__result{text-align:right;padding-left:22px;border-left:1px solid var(--line);white-space:nowrap}
.est__big{display:block;font-family:var(--font-display);font-weight:700;font-size:1.5rem;letter-spacing:-.02em;color:var(--ink);line-height:1.1}
.est__big small,.est__val small{font-size:.58em;color:var(--muted);font-weight:500;letter-spacing:0}
.est__val{display:block;font-family:var(--font-display);font-weight:700;font-size:1.1rem;color:var(--accent);margin-top:4px;line-height:1.1}

/* ==========================================================================
   CONFIANCE & CONFIDENTIALITÉ
   ========================================================================== */
.trust-section{background:var(--accent-wash)}
.trust-head{display:flex;gap:22px;align-items:flex-start;max-width:780px}
.trust-shield{flex-shrink:0;width:58px;height:58px;border-radius:16px;background:var(--accent);color:#fff;display:flex;align-items:center;justify-content:center;box-shadow:0 10px 24px -8px rgba(37,99,235,.5)}
.trust-shield svg{width:28px;height:28px}
.trust-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:18px;margin-top:46px}
.trust-card{background:var(--surface);border:1px solid rgba(37,99,235,.14);border-radius:var(--r);padding:26px;display:flex;gap:16px;align-items:flex-start}
.trust-card .ic{flex-shrink:0;width:42px;height:42px;border-radius:11px;background:var(--accent-wash);color:var(--accent);display:flex;align-items:center;justify-content:center}
.trust-card .ic svg{width:21px;height:21px}
.trust-card b{display:block;font-size:16px;margin-bottom:5px;font-family:var(--font-display);letter-spacing:-.01em}
.trust-card p{font-size:14px;color:var(--muted);line-height:1.55}

/* ==========================================================================
   À PROPOS
   ========================================================================== */
.about{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(32px,5vw,72px);align-items:center}
.about__cta{margin-top:28px}
.about__panel{background:var(--ink);border-radius:var(--r-lg);padding:12px;box-shadow:var(--shadow-lg)}
.about__stat{display:flex;align-items:center;gap:18px;padding:24px 22px}
.about__stat+.about__stat{border-top:1px solid rgba(255,255,255,.1)}
.about__stat .n{font-family:var(--font-display);font-weight:700;font-size:1.9rem;color:#fff;letter-spacing:-.03em;min-width:118px}
.about__stat .t{font-size:14px;color:#A9B5C6;line-height:1.4}

/* CTA — actions multiples */
.cta__actions{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}
.cta__ghost{background:transparent;color:#fff;border:1px solid rgba(255,255,255,.55)}
.cta__ghost:hover{background:rgba(255,255,255,.12);border-color:#fff}

/* ==========================================================================
   TABLEAU DE BORD (admin.html)
   ========================================================================== */
.dash{max-width:1100px;margin:0 auto;padding:104px 20px 64px}
.dash-login{min-height:72vh;display:flex;align-items:center;justify-content:center}
.login-card{width:100%;max-width:400px;padding:36px 34px;text-align:center}
.login-icon{width:54px;height:54px;border-radius:15px;background:var(--accent-wash);color:var(--accent);display:flex;align-items:center;justify-content:center;margin:0 auto 18px}
.login-icon svg{width:26px;height:26px}
.login-card h1{font-size:1.5rem}
.login-card>p{color:var(--muted);font-size:14.5px;margin:6px 0 24px}
.login-card .field{text-align:left;margin-bottom:16px}
.login-err{color:#DC2626;font-size:13.5px;min-height:18px;margin:2px 0 12px;text-align:left}

.dash-head{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;flex-wrap:wrap}
.dash-head h1{font-size:1.7rem}
.dash-actions{display:flex;gap:10px;flex-wrap:wrap}
.dash-stats{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;margin:26px 0 40px}
.dash-stat{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:22px 24px;display:flex;flex-direction:column;gap:4px}
.dash-stat .n{font-family:var(--font-display);font-weight:700;font-size:2.2rem;letter-spacing:-.03em;line-height:1;color:var(--ink)}
.dash-stat .t{font-size:14px;color:var(--muted)}
.dash-section{margin-bottom:40px}
.dash-section h2{margin-bottom:16px}
.dtable-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--r);background:var(--surface)}
.dtable{width:100%;border-collapse:collapse;font-size:13.5px}
.dtable th{text-align:left;font-weight:600;color:var(--muted);background:var(--paper);padding:13px 16px;white-space:nowrap;border-bottom:1px solid var(--line)}
.dtable td{padding:13px 16px;border-bottom:1px solid var(--line);white-space:nowrap;color:var(--ink)}
.dtable tbody tr:last-child td{border-bottom:none}
.dtable tbody tr:hover td{background:var(--paper)}
.dtable .ref{font-family:var(--font-mono);color:var(--accent);font-size:12.5px}
.empty-row{padding:32px!important;text-align:center;color:var(--muted-soft);white-space:normal!important}
.dtable td strong{font-weight:700}

/* Sélecteur de statut */
.status-select{font-family:var(--font-sans);font-size:12.5px;font-weight:600;padding:5px 28px 5px 12px;border-radius:999px;border:1px solid var(--line);cursor:pointer;-webkit-appearance:none;appearance:none;background-color:var(--paper);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23586374' stroke-width='2.5'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 9px center;transition:background-color .2s,color .2s,border-color .2s}
.status-select:disabled{opacity:.6}
.status-select.s-new{color:#1D4ED8;background-color:#EDF2FE;border-color:#C7D7FE}
.status-select.s-progress{color:#92600A;background-color:#FFF6E5;border-color:#FCE3A3}
.status-select.s-done{color:#0F7A43;background-color:#E7F6EE;border-color:#B7E4C7}
.status-select.s-archived{color:#586374;background-color:#EEF1F5;border-color:#DDE3EA}
.status-select.s-lost{color:#B42318;background-color:#FEECEC;border-color:#FAD1CF}

/* Bouton supprimer une ligne */
.col-actions{text-align:right}
.row-del{width:32px;height:32px;border-radius:9px;display:inline-flex;align-items:center;justify-content:center;color:var(--muted-soft);border:1px solid transparent;transition:color .2s,background .2s}
.row-del:hover{color:#DC2626;background:#FEECEC}
.row-del:disabled{opacity:.5}
.row-del svg{width:16px;height:16px}

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width:900px){
  .hero__grid{grid-template-columns:1fr;gap:40px}
  .hero__visual{order:-1;max-width:440px}
  .spot{grid-template-columns:1fr;gap:36px}
  .spot__panel{order:2}
  .problem__grid{grid-template-columns:1fr;gap:0}
  .problem__item{padding-block:18px}
  .steps{grid-template-columns:1fr}
  .step{border-right:none;border-bottom:1px solid var(--line);padding:26px 0}
  .step:last-child{border-bottom:none}
  .footer__top{grid-template-columns:1fr 1fr;gap:32px}
  .calc{grid-template-columns:1fr}
  .trust-grid{grid-template-columns:1fr}
  .about{grid-template-columns:1fr;gap:36px}
  .about__panel{order:2}
}
@media (max-width:760px){
  .nav__links{display:none}
  .nav__burger{display:flex}
  .nav__links.open{
    display:flex;position:absolute;top:72px;left:0;right:0;flex-direction:column;gap:4px;
    background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:12px;box-shadow:var(--shadow)
  }
  .nav__links.open .nav__link{padding:10px 12px;width:100%}
  .hero__meta{grid-template-columns:1fr;border-top:none;padding-top:4px}
  .hero__meta-item{padding:16px 0;border-top:1px solid var(--line)}
  .hero__meta-item:not(:last-child)::after{display:none}
  .bento{grid-template-columns:1fr}
  .cell,.cell--wide,.cell--feature,.cell--img,.cell--accent,.cell--3,.cell--2{grid-column:span 1}
  .grid-2,.chips{grid-template-columns:1fr}
  .calc__inputs,.calc__result{padding:26px 22px}
  .est{grid-template-columns:1fr;gap:16px}
  .est__result{padding-left:0;border-left:none;border-top:1px solid var(--line);padding-top:14px;text-align:left}
  .est__row{grid-template-columns:120px 1fr 48px}
  .cta__actions{flex-direction:column}
  .cta__actions .btn{width:100%}
  .footer__top{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important;scroll-behavior:auto!important}
  .reveal{opacity:1;transform:none}
}

/* ==========================================================================
   MODULE ENQUÊTE AVOCATS (enquete.html + onglet admin)
   100 % construit sur les tokens existants : aucune couleur, police ou rayon
   nouveau. Ne fait qu'ajouter les primitives manquantes (stepper, onglets,
   agrégations, modale) que le système ne possédait pas encore.
   ========================================================================== */

/* ---- En-tête court & neutre de la page (pas de cellule sombre marketing) ---- */
.enq-head{margin-bottom:24px}
.enq-head h1{font-size:clamp(1.7rem,3.2vw,2.4rem);margin-top:14px}
.enq-head p{color:var(--muted);font-size:15px;margin-top:12px;max-width:56ch}

/* ---- Barre de progression fine sous l'en-tête de la carte ---- */
.enq-prog{height:4px;background:var(--line)}
.enq-prog i{display:block;height:100%;width:33.33%;background:var(--accent);transition:width .3s ease}

/* ---- Étapes (affichage conditionnel via l'attribut hidden) ---- */
.enq-step{display:flex;flex-direction:column;gap:26px}

/* ---- Compteur de sélection multiple (« 2 / 3 ») ---- */
.pick-count{font-family:var(--font-mono);font-size:12px;color:var(--muted-soft);font-weight:500}
.pick-count.full{color:var(--accent)}
/* Pilule .mat désactivée quand le maximum est atteint */
.mat input:disabled+.mat__b{opacity:.4;cursor:not-allowed}

/* ---- Champ révélé (input « Autre », précision « automatisation ») ---- */
.reveal-input{margin-top:4px}

/* ---- Micro-rassurance sous le formulaire ---- */
.enq-reassure{display:flex;align-items:flex-start;gap:10px;color:var(--muted-soft);font-size:12.5px;line-height:1.55;margin-top:22px;padding:0 6px}
.enq-reassure svg{width:15px;height:15px;flex-shrink:0;margin-top:2px}

/* ==========================================================================
   TABLEAU DE BORD — onglets, agrégations & modale détail (admin.html)
   ========================================================================== */

/* ---- Onglets ---- */
.dash-tabs{display:flex;gap:6px;border-bottom:1px solid var(--line);margin:26px 0 30px;flex-wrap:wrap}
.dash-tab{padding:11px 18px;font-size:14.5px;font-weight:600;color:var(--muted);border-bottom:2px solid transparent;margin-bottom:-1px;transition:color .2s,border-color .2s}
.dash-tab:hover{color:var(--ink)}
.dash-tab.active{color:var(--accent);border-bottom-color:var(--accent)}
.dash-tab .pill{font-family:var(--font-mono);font-size:11px;color:var(--muted-soft);margin-left:7px}
.dash-tab.active .pill{color:var(--accent)}

/* ---- Variante stats à 3 colonnes (réutilise .dash-stat) ---- */
.dash-stats--3{grid-template-columns:repeat(3,1fr)}

/* ---- Mini-agrégations (top matières / tâches / tailles — texte pur) ---- */
.agg-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-bottom:34px}
.agg-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:20px 22px}
.agg-card h3{font-family:var(--font-sans);font-size:12px;text-transform:uppercase;letter-spacing:.09em;color:var(--muted-soft);font-weight:600;margin-bottom:14px}
.agg-list{display:flex;flex-direction:column;gap:10px}
.agg-row{display:flex;justify-content:space-between;align-items:baseline;gap:12px;font-size:14px}
.agg-row>span{color:var(--ink);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.agg-row b{font-family:var(--font-mono);font-size:12.5px;color:var(--accent);white-space:nowrap}
.agg-empty{color:var(--muted-soft);font-size:13.5px}

/* ---- Ligne de table cliquable (ouvre le détail) ---- */
.dtable tr.clickable{cursor:pointer}

/* ---- Modale de détail ---- */
.modal{position:fixed;inset:0;z-index:80;display:none;align-items:flex-start;justify-content:center;padding:40px 20px;overflow-y:auto}
.modal.open{display:flex}
.modal__backdrop{position:fixed;inset:0;background:rgba(14,26,43,.5);-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}
.modal__card{position:relative;z-index:1;width:100%;max-width:620px;margin:auto 0;animation:pop .28s cubic-bezier(.2,.9,.3,1.2)}
.modal__head{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;padding:24px 28px;border-bottom:1px solid var(--line)}
.modal__head h2{font-size:1.3rem}
.modal__head p{color:var(--muted);font-size:13.5px;margin-top:5px}
.modal__close{width:36px;height:36px;border-radius:10px;display:flex;align-items:center;justify-content:center;color:var(--muted);border:1px solid var(--line);flex-shrink:0;transition:color .2s,background .2s}
.modal__close:hover{color:var(--ink);background:var(--paper)}
.modal__close svg{width:18px;height:18px}
.modal__body{padding:24px 28px;display:flex;flex-direction:column;gap:18px}
.dl-row{display:flex;flex-direction:column;gap:5px}
.dl-row dt{font-size:11.5px;text-transform:uppercase;letter-spacing:.07em;color:var(--muted-soft);font-weight:600}
.dl-row dd{font-size:14.5px;color:var(--ink);line-height:1.55}
.dl-row dd.empty{color:var(--muted-soft)}
.tag-list{display:flex;flex-wrap:wrap;gap:7px}
.tag-list span{font-size:12.5px;padding:4px 11px;border-radius:var(--r-pill);background:var(--accent-wash);color:var(--accent-ink)}

/* ---- Statut « enquête » : réutilise les classes s-* existantes ---- */

@media (max-width:760px){
  .dash-stats--3,.agg-grid{grid-template-columns:1fr}
  .dash-tabs{gap:2px}
  .dash-tab{padding:10px 13px;font-size:14px}
}