/* ============================================================
   sondIA — « Le dossier d'enquête »
   Le site est un dossier administratif posé sur un bureau :
   chaque section est une feuille qui se remplit au stylo bille.
   Palette : bureau gris-vert, papier blanc, encre noire,
   bic bleu, tampon rouge, surligneur jaune.
   ============================================================ */

@font-face{font-family:"Fraunces";font-style:normal;font-weight:300 900;font-display:swap;src:url("assets/vendor/fonts/fraunces-var.woff2") format("woff2")}
@font-face{font-family:"Figtree";font-style:normal;font-weight:300 900;font-display:swap;src:url("assets/vendor/fonts/figtree-var.woff2") format("woff2")}
@font-face{font-family:"Courier Prime";font-style:normal;font-weight:400;font-display:swap;src:url("assets/vendor/fonts/courier-prime.woff2") format("woff2")}
@font-face{font-family:"Courier Prime";font-style:normal;font-weight:700;font-display:swap;src:url("assets/vendor/fonts/courier-prime-700.woff2") format("woff2")}
@font-face{font-family:"Caveat";font-style:normal;font-weight:400 700;font-display:swap;src:url("assets/vendor/fonts/caveat-var.woff2") format("woff2")}

:root{
  --desk:#E6E7DE;          /* bureau gris-vert administratif */
  --desk-deep:#D8DACC;
  --paper:#FDFDFA;
  --paper-edge:#E2E1D6;
  --ink:#20222A;
  --ink-soft:#5A5C66;
  --bic:#2447C5;           /* stylo bille bleu */
  --bic-deep:#183188;
  --red:#C43425;           /* tampon encreur */
  --hl:#FFE24A;            /* surligneur */
  --ok:#207A43;
  --line:#C9CCD8;          /* lignes de champ */
  --disp:"Fraunces",Georgia,serif;
  --body:"Figtree",system-ui,sans-serif;
  --mono:"Courier Prime",ui-monospace,monospace;
  --hand:"Caveat",cursive;
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  font-family:var(--body);color:var(--ink);background:var(--desk);
  background-image:
    radial-gradient(ellipse 90% 60% at 50% -10%, rgba(255,255,255,.55), transparent 60%),
    repeating-linear-gradient(0deg, transparent 0 3px, rgba(32,34,42,.012) 3px 4px);
  font-size:17px;line-height:1.6;overflow-x:hidden;
}
::selection{background:var(--hl);color:var(--ink)}
a{color:var(--bic)}
img{max-width:100%}

/* ---------- barre « taux de complétion de lecture » ---------- */
.readbar{position:fixed;top:0;left:0;right:0;z-index:60;height:34px;background:var(--ink);color:#EDEEE6;display:flex;align-items:center;gap:12px;padding:0 14px;font-family:var(--mono);font-size:11.5px;letter-spacing:.06em}
.readbar .track{flex:1;height:8px;border:1px solid #4A4C55;border-radius:99px;overflow:hidden;background:#2B2D36}
.readbar .fill{height:100%;width:0%;background:linear-gradient(90deg,var(--bic),#5F7FE8);border-radius:99px;transition:width .15s linear}
.readbar b{font-weight:700;min-width:88px;text-align:right;font-variant-numeric:tabular-nums}
.readbar .rb-done{display:none;color:var(--hl)}
.readbar.done .rb-done{display:inline}

/* ---------- entête ---------- */
header{position:sticky;top:34px;z-index:50;background:color-mix(in srgb,var(--desk) 82%,transparent);backdrop-filter:blur(10px);border-bottom:1px solid rgba(32,34,42,.1)}
.nav{max-width:1140px;margin:0 auto;padding:12px 22px;display:flex;align-items:center;justify-content:space-between;gap:16px}
.logo{display:inline-flex;align-items:baseline;gap:2px;text-decoration:none;color:var(--ink)}
.logo .s1{font-family:var(--disp);font-weight:800;font-size:27px;letter-spacing:-.02em}
.logo .s2{font-family:var(--mono);font-weight:700;font-size:18px;color:var(--red);border:2.5px solid var(--red);border-radius:5px;padding:0 6px 1px;margin-left:4px;transform:rotate(-3deg) translateY(-2px);display:inline-block}
.logo .by{font-family:var(--mono);font-size:10.5px;color:var(--ink-soft);margin-left:9px;letter-spacing:.05em}
.nav-cta{display:flex;align-items:center;gap:16px}
.nav-cta .lk{font-weight:600;font-size:14.5px;color:var(--ink-soft);text-decoration:none}
.nav-cta .lk:hover{color:var(--bic)}
.btn{display:inline-flex;align-items:center;gap:9px;font-family:var(--body);font-weight:800;font-size:15.5px;text-decoration:none;border-radius:10px;padding:12px 22px;border:2px solid var(--ink);cursor:pointer;transition:transform .15s ease,box-shadow .15s ease}
.btn-ink{background:var(--ink);color:#fff;box-shadow:0 4px 0 rgba(32,34,42,.35)}
.btn-ink:hover{transform:translateY(-2px);box-shadow:0 6px 0 rgba(32,34,42,.35)}
.btn-ghost{background:transparent;color:var(--ink)}
.btn-ghost:hover{background:rgba(32,34,42,.06)}
.btn-bic{background:var(--bic);border-color:var(--bic-deep);color:#fff;box-shadow:0 4px 0 var(--bic-deep)}
.btn-bic:hover{transform:translateY(-2px);box-shadow:0 6px 0 var(--bic-deep)}

/* ---------- feuilles ---------- */
main{max-width:1140px;margin:0 auto;padding:44px 22px 90px;display:flex;flex-direction:column;gap:54px}
.sheet{
  position:relative;background:var(--paper);border:1px solid var(--paper-edge);border-radius:4px;
  box-shadow:0 1px 0 #fff inset, 0 14px 34px -18px rgba(32,34,42,.4), 0 3px 8px rgba(32,34,42,.08);
  padding:clamp(26px,4.5vw,58px);
}
.sheet::before{ /* trous de classeur */
  content:"";position:absolute;top:0;bottom:0;left:26px;width:1px;
  background:repeating-linear-gradient(180deg, transparent 0 110px, transparent 110px 110px);
}
.sheet:nth-child(odd){transform:rotate(.25deg)}
.sheet:nth-child(even){transform:rotate(-.25deg)}
.sheet-head{display:flex;justify-content:space-between;align-items:baseline;gap:14px;border-bottom:2px solid var(--ink);padding-bottom:10px;margin-bottom:30px;flex-wrap:wrap}
.sheet-head .ref{font-family:var(--mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-soft)}
.sheet-head .ref b{color:var(--ink)}
.sheet-head .date{font-family:var(--mono);font-size:12px;color:var(--ink-soft)}

h1,h2{font-family:var(--disp);font-variation-settings:"opsz" 100;letter-spacing:-.02em;line-height:1.06;font-weight:750}
h1{font-size:clamp(38px,6.2vw,74px);max-width:19ch}
h2{font-size:clamp(28px,4vw,46px);max-width:24ch;margin-bottom:18px}
.lead{font-size:clamp(17px,1.6vw,20.5px);color:var(--ink-soft);max-width:62ch;font-weight:500}
.hl{background:linear-gradient(104deg, transparent .6em, var(--hl) .6em 96%, transparent 96%);background-size:200% 100%;background-position:100% 0;background-repeat:no-repeat;border-radius:2px;padding:0 .08em}
.in .hl,.hl.now{background-position:0 0;transition:background-position .8s cubic-bezier(.22,1,.36,1) .25s}

/* ---------- champs de formulaire ---------- */
.fields{display:flex;flex-direction:column;gap:22px;margin:30px 0 8px;max-width:620px}
.field label{display:block;font-family:var(--mono);font-size:11.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-soft);margin-bottom:5px}
.field .line{border-bottom:2px dotted var(--line);min-height:36px;display:flex;align-items:flex-end;padding-bottom:4px}
.field .ans{font-family:var(--hand);font-size:26px;font-weight:600;color:var(--bic);line-height:1.1}
.field .caret{display:inline-block;width:2px;height:22px;background:var(--bic);margin-left:2px;animation:blink 1s steps(1) infinite}
@keyframes blink{50%{opacity:0}}

/* cases à cocher (coche dessinée au bic) */
.checks{display:flex;flex-wrap:wrap;gap:12px 26px;margin-top:22px}
.check{display:inline-flex;align-items:center;gap:10px;font-weight:700;font-size:16px}
.check .box{width:24px;height:24px;border:2.5px solid var(--ink);border-radius:5px;position:relative;flex:none;background:#fff}
.check svg{position:absolute;inset:-6px -8px;width:36px;height:32px;overflow:visible}
.check svg path{stroke:var(--bic);stroke-width:3.4;fill:none;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:34;stroke-dashoffset:34}
.check.on svg path{stroke-dashoffset:0;transition:stroke-dashoffset .45s cubic-bezier(.6,0,.4,1)}
.check small{font-family:var(--mono);font-size:11px;color:var(--ink-soft);font-weight:400;display:block}

/* ---------- tampons ---------- */
.stamp{
  display:inline-block;font-family:var(--mono);font-weight:700;text-transform:uppercase;letter-spacing:.1em;
  color:var(--red);border:3px double var(--red);border-radius:8px;padding:7px 16px;font-size:14.5px;line-height:1.25;
  transform:rotate(-6deg) scale(1);mix-blend-mode:multiply;opacity:.92;filter:url(#rough);white-space:nowrap;
}
.stamp.ok{color:var(--ok);border-color:var(--ok)}
.stamp.blue{color:var(--bic);border-color:var(--bic)}
.stamp.big{font-size:clamp(15px,2vw,21px);padding:10px 22px}
.reveal-stamp{opacity:0;transform:rotate(-6deg) scale(2.4)}
.in .reveal-stamp,.reveal-stamp.now{opacity:.92;transform:rotate(-6deg) scale(1);transition:transform .3s cubic-bezier(.3,1.6,.5,1),opacity .18s ease}

/* annotation manuscrite */
.annot{font-family:var(--hand);font-size:clamp(20px,2.2vw,25px);font-weight:600;color:var(--bic);line-height:1.15;transform:rotate(-1.6deg);display:inline-block}
.annot.red{color:var(--red)}

/* ---------- section constat (ancien monde) ---------- */
.pv{display:flex;flex-direction:column;gap:0;margin-top:8px;border-top:1.5px solid var(--line)}
.pv-row{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:17px 4px;border-bottom:1.5px solid var(--line);flex-wrap:wrap}
.pv-row .what{font-size:clamp(16px,1.7vw,19px);font-weight:650;position:relative;padding-right:8px}
.pv-row .why{font-family:var(--mono);font-size:12.5px;color:var(--ink-soft);flex:1;min-width:180px}
.pv-row .what .strike{position:absolute;left:-2%;right:-2%;top:54%;height:3px;background:var(--red);transform:scaleX(0) rotate(-1deg);transform-origin:left}
.pv-row.in .strike{transform:scaleX(1) rotate(-1deg);transition:transform .5s cubic-bezier(.6,0,.4,1) .15s}
.pv-row .stamp{font-size:12px;padding:5px 10px}

/* ---------- étapes ---------- */
.step-tag{display:inline-flex;align-items:center;gap:10px;font-family:var(--mono);font-size:12.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--ink);margin-bottom:14px}
.step-tag .n{width:30px;height:30px;border:2.5px solid var(--ink);border-radius:50%;display:grid;place-items:center;font-size:14px;background:#fff}
.two-col{display:grid;grid-template-columns:1.05fr .95fr;gap:44px;align-items:center}
.two-col > .txt .lead{margin-bottom:16px}
.feats{list-style:none;display:flex;flex-direction:column;gap:12px;margin-top:20px}
.feats li{display:flex;gap:11px;align-items:flex-start;font-size:16px}
.feats li i{color:var(--bic);font-size:19px;margin-top:3px}
.feats li b{font-weight:750}

/* démo « questionnaire généré » */
.gen{border:1.5px solid var(--line);border-radius:10px;overflow:hidden;background:#fff}
.gen-head{background:var(--ink);color:#EDEEE6;font-family:var(--mono);font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;padding:9px 14px;display:flex;justify-content:space-between;gap:8px}
.gen-body{padding:8px 16px 14px}
.gq{display:flex;gap:12px;padding:11px 2px;border-bottom:1px dashed var(--line);align-items:baseline;opacity:0;transform:translateY(6px)}
.gq:last-child{border-bottom:none}
.gq.show{opacity:1;transform:none;transition:opacity .35s ease,transform .35s ease}
.gq .qn{font-family:var(--mono);font-weight:700;color:var(--ink-soft);font-size:12.5px;flex:none}
.gq .qt{font-size:15px;font-weight:600;flex:1}
.gq .qk{font-family:var(--mono);font-size:10.5px;text-transform:uppercase;letter-spacing:.08em;color:var(--bic);border:1.5px solid var(--bic);border-radius:99px;padding:2px 9px;flex:none;white-space:nowrap}

/* ---------- diffusion : 3 canaux ---------- */
.canaux{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:30px;align-items:start}
.canal{border:1.5px solid var(--line);border-radius:12px;padding:20px;background:#fff;display:flex;flex-direction:column;gap:12px}
.canal .c-head{display:flex;align-items:center;gap:10px;font-weight:800;font-size:16.5px}
.canal .c-head i{font-size:22px;color:var(--bic)}
.canal p{font-size:14.5px;color:var(--ink-soft)}
.canal.star{border:2.5px solid var(--bic);box-shadow:0 10px 26px -14px rgba(36,71,197,.45);position:relative}
.canal.star .badge{position:absolute;top:-13px;right:14px;background:var(--bic);color:#fff;font-family:var(--mono);font-size:10.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;border-radius:99px;padding:4px 11px}

/* mock WhatsApp */
.wa{background:#E7E1D6;border-radius:10px;padding:12px;display:flex;flex-direction:column;gap:8px;font-size:13.5px}
.wa .b{max-width:90%;padding:8px 11px;border-radius:9px;line-height:1.45;box-shadow:0 1px 1px rgba(0,0,0,.08)}
.wa .in-b{background:#fff;align-self:flex-start;border-top-left-radius:2px}
.wa .out-b{background:#D6F3C8;align-self:flex-end;border-top-right-radius:2px}
.wa .meta{font-size:10px;color:#7A7E74;text-align:right;margin-top:3px}

/* mock appel vocal */
.call{background:var(--ink);border-radius:12px;padding:16px;color:#EDEEE6;display:flex;flex-direction:column;gap:11px;min-height:230px}
.call .c-top{display:flex;align-items:center;gap:10px;font-family:var(--mono);font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;color:#B9BCC7}
.call .dot{width:9px;height:9px;border-radius:50%;background:#3ECF6E;animation:pulse 1.6s ease infinite}
@keyframes pulse{50%{opacity:.35}}
.call .wave{display:flex;align-items:center;gap:3px;height:26px;margin:2px 0}
.call .wave span{width:3.5px;background:#5F7FE8;border-radius:2px;height:6px;animation:wv 1.1s ease-in-out infinite}
.call .wave span:nth-child(2n){animation-delay:.15s}.call .wave span:nth-child(3n){animation-delay:.32s}.call .wave span:nth-child(5n){animation-delay:.5s}
@keyframes wv{50%{height:22px}}
@media (prefers-reduced-motion:reduce){.call .wave span,.call .dot{animation:none}}
.call .cb{font-size:13.5px;line-height:1.5;padding:8px 11px;border-radius:9px;max-width:94%;opacity:0;transform:translateY(6px)}
.call .cb.show{opacity:1;transform:none;transition:opacity .4s ease,transform .4s ease}
.call .ia-b{background:#2B2D36;align-self:flex-start;border:1px solid #3A3D49}
.call .hu-b{background:#5F7FE8;color:#fff;align-self:flex-end}
.call .cb small{display:block;font-family:var(--mono);font-size:9.5px;text-transform:uppercase;letter-spacing:.1em;opacity:.65;margin-bottom:3px}

/* ---------- conformité ---------- */
.conf{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:16px;margin-top:26px}
.conf .c-item{border:1.5px solid var(--line);border-left:4px solid var(--bic);border-radius:8px;padding:15px 16px;background:#fff}
.conf .c-item b{display:flex;gap:8px;align-items:center;font-size:15.5px;margin-bottom:4px}
.conf .c-item b i{color:var(--bic)}
.conf .c-item p{font-size:13.5px;color:var(--ink-soft)}

/* ---------- dashboard ---------- */
.dash{display:grid;grid-template-columns:1.1fr .9fr;gap:26px;margin-top:28px;align-items:stretch}
.panel{border:1.5px solid var(--line);border-radius:12px;background:#fff;padding:18px}
.panel .p-title{font-family:var(--mono);font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-soft);margin-bottom:14px;display:flex;justify-content:space-between;align-items:center}
.panel .live{color:var(--ok);display:inline-flex;align-items:center;gap:5px}
.panel .live::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--ok);animation:pulse 1.6s ease infinite}
.bars{display:flex;flex-direction:column;gap:12px}
.bar-row{display:grid;grid-template-columns:150px 1fr 46px;gap:10px;align-items:center;font-size:13.5px;font-weight:600}
.bar-row .tr{height:13px;border-radius:3px;background:repeating-linear-gradient(90deg,#F0F0EA 0 6px,#fff 6px 12px);overflow:hidden;border:1px solid var(--line)}
.bar-row .fl{display:block;height:100%;width:0;background:repeating-linear-gradient(115deg,var(--bic) 0 5px,#3B5CD9 5px 9px);border-radius:2px;transition:width 1s cubic-bezier(.22,1,.36,1)}
.bar-row .val{font-family:var(--mono);font-size:12.5px;text-align:right;color:var(--bic);font-weight:700}
.kv{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.kv .k{border:1.5px dashed var(--line);border-radius:9px;padding:12px;text-align:left}
.kv .k b{font-family:var(--disp);font-size:29px;font-weight:800;display:block;line-height:1;font-variant-numeric:tabular-nums}
.kv .k span{font-family:var(--mono);font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-soft)}
.verbatim{border-left:4px solid var(--hl);background:#FFFDF0;border-radius:0 9px 9px 0;padding:13px 15px;margin-top:14px}
.verbatim p{font-size:14px;font-style:italic;color:var(--ink)}
.verbatim .who{font-family:var(--mono);font-size:11px;color:var(--ink-soft);margin-top:6px}

/* ---------- pipeline enquête → formation ---------- */
.chain{display:flex;align-items:stretch;gap:0;margin-top:30px;flex-wrap:wrap}
.chain .node{flex:1;min-width:190px;border:2px solid var(--ink);border-radius:12px;background:#fff;padding:18px;position:relative}
.chain .node h3{font-family:var(--disp);font-size:19px;margin-bottom:6px}
.chain .node p{font-size:13.5px;color:var(--ink-soft)}
.chain .lnk{flex:none;width:54px;display:grid;place-items:center;font-size:26px;color:var(--bic)}
.chain .node.last{border-color:var(--bic);background:#F4F7FF}

/* ---------- cas d'usage ---------- */
.cases{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:28px}
.case{border:1.5px solid var(--line);border-radius:11px;background:#fff;padding:18px;position:relative}
.case i{font-size:24px;color:var(--bic)}
.case h3{font-size:16.5px;font-weight:800;margin:9px 0 5px}
.case p{font-size:13.8px;color:var(--ink-soft)}
.case .tag{position:absolute;top:14px;right:14px;font-family:var(--mono);font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-soft)}

/* ---------- sondage démo ---------- */
.poll{max-width:640px;margin:26px auto 0}
.poll-q{font-family:var(--disp);font-size:clamp(20px,2.6vw,27px);font-weight:700;margin-bottom:18px;text-align:center}
.poll-opts{display:flex;flex-direction:column;gap:10px}
.poll-opt{position:relative;display:flex;align-items:center;gap:12px;border:2px solid var(--ink);border-radius:10px;background:#fff;padding:13px 16px;font-size:15.5px;font-weight:700;cursor:pointer;text-align:left;transition:transform .12s ease;overflow:hidden;font-family:var(--body)}
.poll-opt:hover{transform:translateX(4px)}
.poll-opt .fillr{position:absolute;inset:0;background:#EDF1FF;width:0;z-index:0;transition:width .9s cubic-bezier(.22,1,.36,1)}
.poll-opt .t,.poll-opt .pc{position:relative;z-index:1}
.poll-opt .pc{margin-left:auto;font-family:var(--mono);color:var(--bic);opacity:0}
.poll.voted .poll-opt{cursor:default}
.poll.voted .poll-opt:hover{transform:none}
.poll.voted .pc{opacity:1;transition:opacity .4s ease .4s}
.poll-note{text-align:center;font-family:var(--mono);font-size:11px;color:var(--ink-soft);margin-top:12px;letter-spacing:.05em}

/* ---------- formulaire final ---------- */
.demo-form{display:grid;grid-template-columns:1fr 1fr;gap:20px 26px;margin-top:26px;max-width:820px}
.demo-form .fw{grid-column:1/-1}
.demo-form label{display:block;font-family:var(--mono);font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-soft);margin-bottom:6px}
.demo-form input,.demo-form textarea{width:100%;border:none;border-bottom:2px dotted var(--line);background:transparent;padding:8px 2px;font-family:var(--hand);font-size:23px;font-weight:600;color:var(--bic);outline:none;resize:vertical}
.demo-form input:focus,.demo-form textarea:focus{border-bottom-color:var(--bic)}
.demo-form input::placeholder,.demo-form textarea::placeholder{color:#B9BCC7;font-family:var(--body);font-size:15px;font-weight:400}
.form-foot{grid-column:1/-1;display:flex;align-items:center;gap:22px;flex-wrap:wrap;margin-top:6px}
.form-msg{font-weight:700}
.form-msg.ok{color:var(--ok)}
.form-msg.err{color:var(--red)}
.hpot{position:absolute;left:-9999px;opacity:0}

/* ---------- pied ---------- */
footer{border-top:1px solid rgba(32,34,42,.14);margin-top:26px}
.foot{max-width:1140px;margin:0 auto;padding:30px 22px 44px;display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;font-size:13.5px;color:var(--ink-soft)}
.foot a{color:var(--ink-soft)}
.foot a:hover{color:var(--bic)}
.foot .col{display:flex;flex-direction:column;gap:7px;min-width:170px}
.foot .col b{font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink)}

/* ---------- index du dossier (desktop) ---------- */
.dossier-index{position:fixed;right:18px;top:50%;transform:translateY(-50%);z-index:40;display:flex;flex-direction:column;gap:9px;background:var(--paper);border:1.5px solid var(--paper-edge);border-radius:10px;padding:13px 14px;box-shadow:0 10px 30px -14px rgba(32,34,42,.35);font-family:var(--mono);font-size:10.5px;letter-spacing:.04em}
.dossier-index a{display:flex;align-items:center;gap:8px;color:var(--ink-soft);text-decoration:none}
.dossier-index a .bx{width:13px;height:13px;border:1.8px solid var(--ink-soft);border-radius:3px;position:relative;flex:none}
.dossier-index a.done{color:var(--ink)}
.dossier-index a.done .bx{border-color:var(--bic)}
.dossier-index a.done .bx::after{content:"✓";position:absolute;top:-6px;left:0;color:var(--bic);font-size:14px;font-weight:700}
@media(max-width:1420px){.dossier-index{display:none}}

/* ---------- apparitions ---------- */
.reveal{opacity:0;transform:translateY(18px)}
.reveal.in{opacity:1;transform:none;transition:opacity .6s ease,transform .6s cubic-bezier(.22,1,.36,1)}
.d1{transition-delay:.08s!important}.d2{transition-delay:.16s!important}.d3{transition-delay:.24s!important}
@media (prefers-reduced-motion:reduce){
  .reveal,.gq,.call .cb{opacity:1!important;transform:none!important}
  .reveal-stamp{opacity:.92!important;transform:rotate(-6deg)!important}
  .hl{background-position:0 0!important}
  .check svg path{stroke-dashoffset:0!important}
}

/* ---------- hero spécifique ---------- */
.hero-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:44px;align-items:start}
.hero-side{display:flex;flex-direction:column;gap:18px}
.counter-card{border:2px solid var(--ink);border-radius:12px;background:#fff;padding:18px}
.counter-card .p-title{font-family:var(--mono);font-size:10.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-soft);display:flex;justify-content:space-between;margin-bottom:8px}
.counter-card b{font-family:var(--disp);font-size:clamp(40px,4.6vw,56px);font-weight:800;line-height:1;font-variant-numeric:tabular-nums;display:block}
.counter-card .sub{font-family:var(--mono);font-size:11px;color:var(--ink-soft);margin-top:6px}
.hero-ctas{display:flex;gap:14px;flex-wrap:wrap;margin-top:30px}
.hero-stamp{position:absolute;top:clamp(60px,8vw,86px);right:clamp(18px,4vw,56px)}

@media(max-width:960px){
  .two-col,.hero-grid,.dash{grid-template-columns:1fr}
  .canaux{grid-template-columns:1fr}
  .cases{grid-template-columns:1fr 1fr}
  .sheet:nth-child(odd),.sheet:nth-child(even){transform:none}
  .hero-stamp{position:static;margin-top:18px;display:inline-block}
}
@media(max-width:640px){
  .cases,.demo-form{grid-template-columns:1fr}
  main{padding:26px 12px 70px;gap:34px}
  .readbar b{min-width:60px}
  .readbar .rb-label{display:none}
  .nav-cta .lk{display:none}
  .logo .by{display:none}
  .nav .btn{padding:9px 13px;font-size:13.5px}
  h1{font-size:clamp(30px,9vw,38px)}
  h2{font-size:clamp(24px,7vw,30px)}
  .hero-stamp{margin:0 0 14px}
  .hero-stamp .stamp{font-size:13px;padding:7px 14px}
  .field .ans{font-size:22px}
  .bar-row{grid-template-columns:110px 1fr 40px;font-size:12.5px}
}