/* =====================================================
   KAVAE — tokens
   ===================================================== */
:root{
  --ink:#060404;
  --ink-2:#0E0807;
  --ink-3:#180D0B;
  --ink-4:#22120F;
  --chalk:#F3E7E3;
  --chalk-2:#180D0B;
  --chalk-3:#22120F;
  --signal:#E3122A;
  --signal-2:#FF4B44;
  --hazard:#8F241E;
  --green:#F3E7E3;
  --mute:#C9A29C;
  --mute-2:#8C6862;

  --disp:'Bricolage Grotesque', system-ui, sans-serif;
  --body:'Inter Tight', system-ui, sans-serif;

  --r:5px;
  --wrap:1240px;
  --e:cubic-bezier(.22,.61,.36,1);
  --e-soft:cubic-bezier(.4,0,.2,1);
}

*{box-sizing:border-box;}
html{scroll-behavior:auto;}
html.lenis,html.lenis body{height:auto;}
.lenis.lenis-smooth{scroll-behavior:auto !important;}
.lenis.lenis-stopped{overflow:hidden;}
body{
  margin:0;background:var(--ink);color:var(--chalk);
  font-family:var(--body);font-size:17px;line-height:1.55;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
h1,h2,h3,h4{font-family:var(--disp);font-weight:800;margin:0;line-height:1.02;letter-spacing:-.025em;}
p{margin:0;}
ul,ol{margin:0;padding:0;list-style:none;}
a{color:inherit;text-decoration:none;}
button{font-family:var(--body);cursor:pointer;border:none;background:none;color:inherit;}
input{font-family:var(--body);}
::selection{background:var(--signal);color:var(--chalk);}
:focus-visible{outline:2px solid var(--hazard);outline-offset:3px;}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 28px;}

/* =====================================================
   reveal / cursor / scroll bar
   ===================================================== */
.rv{opacity:0;transform:translate3d(0,28px,0);}
.rv.in{opacity:1;transform:none;animation:rvIn 1.05s cubic-bezier(.16,1,.3,1) backwards;animation-delay:calc(var(--i,0) * 90ms);}
@keyframes rvIn{from{opacity:0;transform:translate3d(0,28px,0) scale(.985);}}

.scroll-bar{position:fixed;top:0;left:0;height:2px;width:100%;transform:scaleX(0);transform-origin:0 50%;
  background:var(--signal);z-index:120;pointer-events:none;}

.cursor{
  position:fixed;top:0;left:0;width:26px;height:26px;border-radius:50%;
  border:1.5px solid var(--signal);pointer-events:none;z-index:110;
  transform:translate(-50%,-50%);transition:width .25s var(--e),height .25s var(--e),background-color .25s var(--e),opacity .25s var(--e);
  opacity:0;
}
.cursor.live{opacity:1;}
.cursor.grow{width:52px;height:52px;background:rgba(227,18,42,.12);}
@media (hover:none),(pointer:coarse){.cursor{display:none;}}

@media (prefers-reduced-motion: reduce){
  html:not(.force-motion) *{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important;}
  html{scroll-behavior:auto;}
  html:not(.force-motion) .rv{opacity:1;transform:none;}
  html:not(.force-motion) .rv.in{animation:none;}
}

/* =====================================================
   dot nav
   ===================================================== */
.dotnav{
  position:fixed;right:26px;top:50%;transform:translateY(-50%);z-index:70;
  display:flex;flex-direction:column;gap:2px;
}
.dotnav a{position:relative;display:flex;align-items:center;justify-content:center;width:26px;height:26px;}
.dotnav span{width:8px;height:8px;border-radius:50%;background:rgba(243,231,227,.28);
  transition:background-color .3s var(--e),transform .3s var(--e);flex:none;}
.dotnav em{
  position:absolute;right:32px;font-style:normal;font-size:.74rem;color:var(--chalk);white-space:nowrap;
  background:rgba(15,16,18,.9);padding:5px 10px;border-radius:5px;
  opacity:0;transform:translateX(6px);transition:opacity .25s var(--e),transform .25s var(--e);pointer-events:none;
}
.dotnav a:hover em{opacity:1;transform:none;}
.dotnav a:hover span{background:rgba(243,231,227,.6);}
.dotnav a.active span{background:var(--signal);transform:scale(1.4);}
@media (max-width:900px){.dotnav{display:none;}}

/* =====================================================
   header
   ===================================================== */
.hdr{
  position:fixed;top:0;left:0;right:0;z-index:90;height:68px;
  display:flex;align-items:center;justify-content:space-between;padding:0 28px;
  background:transparent;border-bottom:1px solid transparent;
  transition:background-color .4s var(--e),border-color .4s var(--e),height .4s var(--e);
}
.hdr.stuck{background:rgba(6,4,4,.8);backdrop-filter:blur(16px);border-bottom-color:rgba(243,231,227,.09);height:62px;}
.logo{font-family:var(--disp);font-weight:800;font-size:1.32rem;letter-spacing:-.04em;display:inline-flex;}
.logo-k{color:var(--signal);}
.logo-sm{font-size:1.1rem;}
.hdr-nav{display:flex;gap:32px;}
.hdr-nav a{font-size:.92rem;color:#C9A29C;transition:color .25s var(--e);}
.hdr-nav a span{position:relative;display:inline-block;padding-bottom:3px;}
.hdr-nav a span::after{
  content:'';position:absolute;left:0;bottom:0;height:1px;width:100%;background:var(--signal);
  transform:scaleX(0);transform-origin:100% 50%;transition:transform .4s var(--e);
}
.hdr-nav a:hover{color:var(--chalk);}
.hdr-nav a:hover span::after{transform:scaleX(1);transform-origin:0 50%;}
@media (max-width:860px){.hdr-nav{display:none;}}

/* pills */
.pill{
  position:relative;display:inline-flex;align-items:center;justify-content:center;
  padding:11px 22px;border-radius:100px;font-weight:600;font-size:.9rem;
  border:1px solid transparent;white-space:nowrap;overflow:hidden;isolation:isolate;
  transition:color .3s var(--e),border-color .3s var(--e),transform .25s var(--e);
}
.pill::before{
  content:'';position:absolute;inset:0;z-index:-1;border-radius:inherit;
  transform:scaleY(0);transform-origin:50% 0;transition:transform .5s var(--e);
}
.pill-lg{padding:16px 32px;font-size:1rem;}
.pill-signal{background:var(--signal);color:var(--chalk);}
.pill-signal::before{background:var(--ink);}
.pill-signal:hover{color:var(--signal);}
.pill-signal:hover::before{transform:scaleY(1);transform-origin:50% 100%;}
.pill-ghost{border-color:rgba(243,231,227,.24);color:var(--chalk);}
.pill-ghost::before{background:var(--signal);}
.pill-ghost:hover{color:var(--chalk);border-color:var(--signal);}
.pill-ghost:hover::before{transform:scaleY(1);transform-origin:50% 100%;}

/* =====================================================
   hero — scène 3D plein cadre
   ===================================================== */
.hero{position:relative;min-height:100svh;display:flex;align-items:flex-end;overflow:hidden;}
.hero-stage{position:absolute;inset:0;z-index:1;}
.hero-stage canvas{width:100%;height:100%;display:block;touch-action:none;}
.hero-word{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:0;
  font-family:var(--disp);font-weight:800;font-size:min(30vw,440px);letter-spacing:-.05em;
  color:var(--signal);opacity:.06;white-space:nowrap;pointer-events:none;user-select:none;
}
.hero-veil{
  position:absolute;inset:0;z-index:2;pointer-events:none;
  background:
    linear-gradient(90deg, rgba(6,4,4,.94) 0%, rgba(6,4,4,.86) 34%, rgba(6,4,4,0) 62%),
    linear-gradient(0deg, rgba(6,4,4,.92) 0%, rgba(6,4,4,0) 38%);
}
@media (max-width:940px){
  .hero-veil{background:linear-gradient(0deg, rgba(6,4,4,.96) 30%, rgba(6,4,4,.4) 62%, rgba(6,4,4,0) 88%);}
}

.hero-copy{position:relative;z-index:3;max-width:620px;padding:0 28px 132px;margin-left:max(0px,calc((100% - var(--wrap)) / 2));}
@media (max-width:940px){.hero-copy{padding-bottom:120px;margin-left:0;}}

.kicker{
  display:inline-block;font-size:.76rem;font-weight:600;letter-spacing:.05em;
  color:var(--hazard);margin-bottom:22px;border-left:2px solid var(--signal);padding-left:10px;
}
.kicker-dark{color:#E3122A;}

.hero-title{font-size:clamp(2.7rem,6vw,5rem);}
.hero-title .lw{display:block;overflow:hidden;padding-bottom:.12em;margin-bottom:-.12em;}
.hero-title .l{display:block;transform:translateY(105%);animation:up .9s var(--e) forwards;}
.hero-title .lw:nth-child(1) .l{animation-delay:.1s;}
.hero-title .lw:nth-child(2) .l{animation-delay:.19s;}
.hero-title .lw:nth-child(3) .l{animation-delay:.28s;}
.hero-title .lw:nth-child(4) .l{animation-delay:.37s;}
.hero-title em{font-style:normal;color:var(--signal);}
@keyframes up{to{transform:none;}}
.hero-lede{margin-top:24px;color:#C9A29C;font-size:1.06rem;max-width:46ch;}
.hero-cta{display:flex;gap:12px;margin-top:32px;flex-wrap:wrap;}

.scroll-cue{position:absolute;right:38px;bottom:118px;z-index:4;display:flex;flex-direction:column;align-items:center;gap:12px;color:var(--mute-2);}
.cue-line{width:1px;height:58px;background:rgba(243,231,227,.2);position:relative;overflow:hidden;}
.cue-line::after{content:'';position:absolute;top:0;left:0;width:100%;height:40%;background:var(--signal);animation:cue 1.9s var(--e-soft) infinite;}
@keyframes cue{0%{transform:translateY(-100%);}60%,100%{transform:translateY(250%);}}
.cue-txt{font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;writing-mode:vertical-rl;}
.scroll-cue:hover{color:var(--chalk);}
@media (max-width:940px){.scroll-cue{display:none;}}

.hero-foot{position:absolute;left:0;right:0;bottom:0;z-index:4;}
.ticker{overflow:hidden;border-top:1px solid rgba(243,231,227,.09);padding:13px 0;background:rgba(6,4,4,.5);backdrop-filter:blur(6px);}
.ticker-track{display:flex;align-items:center;gap:26px;width:max-content;animation:slide 38s linear infinite;}
.ticker-track span{font-size:.75rem;letter-spacing:.06em;color:var(--mute-2);white-space:nowrap;}
.ticker-track i{width:4px;height:4px;border-radius:50%;background:var(--signal);flex:none;}
@keyframes slide{to{transform:translateX(-50%);}}

/* loader */
.loader{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;z-index:6;transition:opacity .5s var(--e);}
.loader.done{opacity:0;pointer-events:none;}
.loader-bar{width:96px;height:2px;background:rgba(243,231,227,.16);position:relative;overflow:hidden;}
.loader-bar::after{content:'';position:absolute;inset:0;width:38%;background:var(--signal);animation:sb 1.15s ease-in-out infinite;}
.loader-light .loader-bar{background:rgba(6,4,4,.14);}
@keyframes sb{0%{transform:translateX(-100%);}100%{transform:translateX(260%);}}

/* =====================================================
   sections
   ===================================================== */
.sec{--blend:clamp(160px,26vh,270px);position:relative;isolation:isolate;padding:calc(var(--blend) + 16px) 0 120px;}
.sec::before{
  content:'';position:absolute;left:0;right:0;top:0;height:var(--blend);z-index:-1;pointer-events:none;
  background:linear-gradient(to bottom,var(--from) 0%,
    color-mix(in srgb,var(--to) 4%,var(--from)) 12.5%,color-mix(in srgb,var(--to) 16%,var(--from)) 25%,
    color-mix(in srgb,var(--to) 32%,var(--from)) 37.5%,color-mix(in srgb,var(--to) 50%,var(--from)) 50%,
    color-mix(in srgb,var(--to) 68%,var(--from)) 62.5%,color-mix(in srgb,var(--to) 84%,var(--from)) 75%,
    color-mix(in srgb,var(--to) 96%,var(--from)) 87.5%,var(--to) 100%);
}
.sec-ink{background:var(--ink);--to:var(--ink);}
.sec-chalk{background:var(--ink-2);color:var(--chalk);--to:var(--ink-2);}
#methode{--from:var(--ink);} #audit{--from:var(--ink-2);} #atelier{--from:var(--ink);} #normes{--from:var(--ink-2);}
.sec-head{margin-bottom:70px;max-width:840px;}
.sec-head-split{display:flex;justify-content:space-between;align-items:flex-end;gap:44px;max-width:none;}
.sec-title{font-size:clamp(2.1rem,4vw,3.4rem);}
.sec-lede{color:var(--mute);max-width:32ch;font-size:.96rem;}
.sec-lede-dark{color:#8C6862;}
@media (max-width:760px){.sec{--blend:130px;padding-bottom:88px;}.sec-head-split{flex-direction:column;align-items:flex-start;gap:18px;}}

/* steps */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:rgba(243,231,227,.12);
  border-top:1px solid rgba(243,231,227,.12);border-bottom:1px solid rgba(243,231,227,.12);}
@media (max-width:820px){.steps{grid-template-columns:1fr;}}
.steps li{position:relative;background:var(--ink-3);padding:40px 36px 46px;overflow:hidden;
  transition:background-color .4s var(--e),transform .4s var(--e);}
.steps li:hover{background:var(--ink-4);}
.step-n{font-family:var(--disp);font-weight:800;font-size:2.6rem;color:var(--signal);display:block;margin-bottom:16px;
  transition:transform .5s var(--e);}
.steps li:hover .step-n{transform:translateX(6px);}
.steps h3{font-size:1.28rem;margin-bottom:10px;}
.steps p{color:#8C6862;font-size:.95rem;}
.step-line{position:absolute;left:0;bottom:0;height:3px;width:100%;background:var(--signal);
  transform:scaleX(0);transform-origin:0 50%;transition:transform .55s var(--e);}
.steps li:hover .step-line{transform:scaleX(1);}

/* =====================================================
   wizard
   ===================================================== */
.wizard{color-scheme:dark;background:var(--ink-2);border:1px solid rgba(243,231,227,.09);border-radius:12px;overflow:hidden;}
.rail{position:relative;display:grid;grid-template-columns:repeat(4,1fr);border-bottom:1px solid rgba(243,231,227,.09);}
.rail-ink{position:absolute;top:0;left:0;height:100%;width:25%;background:var(--ink-3);
  transition:transform .5s var(--e);z-index:0;}
.rail-ink::after{content:'';position:absolute;left:0;bottom:0;height:2px;width:100%;background:var(--signal);}
.rail-step{
  position:relative;z-index:1;display:flex;align-items:center;gap:10px;justify-content:center;
  padding:19px 10px;font-size:.88rem;color:var(--mute-2);
  border-right:1px solid rgba(243,231,227,.09);transition:color .3s var(--e);
}
.rail-step:last-child{border-right:none;}
.rail-step i{font-family:var(--disp);font-weight:700;font-size:.76rem;font-style:normal;}
.rail-step:hover{color:#D9B6B0;}
.rail-step.active{color:var(--chalk);}
.rail-step.done{color:var(--signal);}
@media (max-width:700px){.rail-step{flex-direction:column;gap:3px;font-size:.72rem;padding:13px 4px;}}

.panels{position:relative;transition:height .55s var(--e);}
.panels.tween{overflow:hidden;}
.step-panel.leaving{display:block;animation:panelOut .23s cubic-bezier(.4,0,1,1) forwards;}
@keyframes panelOut{to{opacity:0;transform:translateX(calc(var(--dir,1) * -22px));}}
.step-panel{display:none;padding:48px;}
.step-panel.active{display:block;}
.step-panel.slide-in{animation:slideIn .45s var(--e);}
.step-panel.slide-in-rev{animation:slideInRev .45s var(--e);}
@keyframes slideIn{from{opacity:0;transform:translateX(26px);}to{opacity:1;transform:none;}}
@keyframes slideInRev{from{opacity:0;transform:translateX(-26px);}to{opacity:1;transform:none;}}
@media (max-width:700px){.step-panel{padding:28px 20px;}}

.panel-q{font-size:1.32rem;margin-bottom:18px;}
.panel-q + .choice-grid{margin-bottom:40px;}
.panel-hint{color:var(--mute);font-size:.92rem;margin-bottom:26px;max-width:62ch;}
.panel-top{display:flex;justify-content:space-between;align-items:flex-start;gap:24px;}
.live-count{transform-origin:100% 0;font-family:var(--disp);font-weight:800;font-size:1.5rem;flex:none;transition:transform .3s var(--e);}
.live-count strong{color:var(--signal);transition:color .3s var(--e);}
.live-count span{color:var(--mute-2);font-size:1.05rem;}
.live-count.full{transform:scale(1.08);}
.live-count.full strong{color:var(--green);}

/* choices */
.choice-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;}
.choice-grid-4{grid-template-columns:repeat(4,1fr);}
@media (max-width:760px){.choice-grid,.choice-grid-4{grid-template-columns:repeat(2,1fr);}}
.choice{
  position:relative;text-align:left;padding:22px;border:1px solid rgba(243,231,227,.14);border-radius:var(--r);
  background:var(--ink-3);display:flex;flex-direction:column;gap:5px;overflow:hidden;isolation:isolate;
  transition:border-color .3s var(--e),transform .12s linear,box-shadow .3s var(--e);
  backface-visibility:hidden;will-change:transform;
}
.choice.settling{transition:border-color .3s var(--e),transform .45s var(--e),box-shadow .3s var(--e);}
.choice::before{
  content:'';position:absolute;inset:0;z-index:-1;background:linear-gradient(135deg,rgba(227,18,42,.16),rgba(227,18,42,0));
  opacity:0;transition:opacity .45s var(--e);
}
.choice:hover{border-color:rgba(243,231,227,.34);box-shadow:0 12px 30px -18px rgba(0,0,0,.9);}
.choice:hover::before{opacity:1;}
.choice.on{border-color:var(--signal);}
.choice.on::before{opacity:1;}
.choice-title{font-family:var(--disp);font-weight:700;font-size:1.06rem;}
.choice-sub{font-size:.82rem;color:var(--mute);}
.choice-mark{
  position:absolute;right:16px;top:16px;width:16px;height:16px;border-radius:50%;
  border:1.5px solid rgba(243,231,227,.24);transition:background-color .3s var(--e),border-color .3s var(--e),transform .3s var(--e);
}
.choice.on .choice-mark{background:var(--signal);border-color:var(--signal);transform:scale(1.12);}
.choice-sm{padding:18px;}

.panel-q-sp{margin-top:44px;}

.choice-grid-3{grid-template-columns:repeat(3,1fr);}
@media (max-width:760px){.choice-grid-3{grid-template-columns:repeat(2,1fr);}}
@media (max-width:460px){.choice-grid-3{grid-template-columns:1fr;}}
.choice-ico{width:34px;height:34px;color:var(--signal-2);margin-bottom:6px;transition:transform .35s var(--e);}
.choice-ico svg{width:100%;height:100%;}
.choice:hover .choice-ico{transform:scale(1.12) rotate(-4deg);}

.room-note{
  margin-top:22px;padding:16px 18px;border-radius:var(--r);font-size:.9rem;
  border-left:3px solid var(--signal-2);background:rgba(255,75,68,.08);color:#F2C9C4;
  animation:noteIn .4s var(--e);
}

.link-toggle{
  display:inline-flex;align-items:center;gap:6px;margin-top:16px;font-size:.86rem;
  color:var(--mute);border-bottom:1px dashed rgba(243,231,227,.3);padding-bottom:2px;
  transition:color .25s var(--e),border-color .25s var(--e);
}
.link-toggle span{display:inline-block;transition:transform .35s var(--e);font-size:1rem;line-height:1;}
.link-toggle:hover{color:var(--chalk);border-color:rgba(243,231,227,.6);}
.link-toggle.open span{transform:rotate(45deg);}

.advanced-toggle{margin-top:8px;}
.manual-panel,.agent-help,.date-help{
  display:grid;grid-template-rows:0fr;margin-top:0;opacity:0;visibility:hidden;
  transition:grid-template-rows .55s var(--e),margin-top .55s var(--e),opacity .4s var(--e),visibility 0s .55s;
}
.advanced-toggle.open .manual-panel,.agent-help.show,.date-help.show{grid-template-rows:1fr;margin-top:16px;opacity:1;visibility:visible;transition-delay:0s;}
.collapse-in{overflow:hidden;min-height:0;}
.manual-panel .collapse-in{padding:4px;margin:-4px;}
.norm-body .collapse-in{overflow:hidden;min-height:0;}
.agent-help p,.date-help p{font-size:.88rem;color:var(--mute);padding:10px 0;border-top:1px solid rgba(243,231,227,.09);}
.agent-help p:first-child,.date-help p:first-child{border-top:none;padding-top:0;}
.agent-help strong,.date-help strong{color:var(--chalk);}

.match-note{
  margin-top:28px;padding:16px 18px;border-radius:var(--r);font-size:.92rem;
  border-left:3px solid var(--hazard);background:rgba(143,36,30,.08);color:#E7B9B4;
  animation:noteIn .4s var(--e);
}
@keyframes noteIn{from{opacity:0;transform:translateY(-6px);}to{opacity:1;transform:none;}}
.match-note.good{border-color:var(--green);background:rgba(243,231,227,.08);color:#F3E7E3;}
.match-note.bad{border-color:var(--signal);background:rgba(227,18,42,.1);color:#F2C9C4;}

.panel-nav{display:flex;justify-content:space-between;align-items:center;gap:14px;margin-top:42px;
  padding-top:28px;border-top:1px solid rgba(243,231,227,.09);}
.nav-right{display:flex;gap:10px;flex-wrap:wrap;}

/* fields */
.field-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:22px;}
@media (max-width:700px){.field-grid{grid-template-columns:1fr;}}
.field{display:flex;flex-direction:column;gap:8px;}
.field-label{font-size:.86rem;color:#C9A29C;transition:color .25s var(--e);}
.field:focus-within .field-label{color:var(--chalk);}
.opt{color:var(--mute-2);}
.field input{
  background:var(--ink-3);border:1px solid rgba(243,231,227,.14);border-radius:var(--r);
  padding:14px 15px;color:var(--chalk);font-size:.95rem;width:100%;
  transition:border-color .25s var(--e),background-color .25s var(--e);
}
.field input:hover{border-color:rgba(243,231,227,.28);}
.field input:focus{border-color:var(--signal);background:var(--ink-4);outline:none;}
.field input::-webkit-calendar-picker-indicator{filter:invert(.7);cursor:pointer;}
.field-flag{font-size:.82rem;min-height:20px;color:var(--mute);transition:color .25s var(--e);}
.field-flag.ok{color:var(--green);}
.field-flag.warn{color:var(--hazard);}
.field-flag.bad{color:var(--signal);}

/* checklist */
.checklist{display:flex;flex-direction:column;gap:1px;background:rgba(243,231,227,.09);
  border:1px solid rgba(243,231,227,.09);border-radius:var(--r);overflow:hidden;}
.ck{position:relative;display:flex;gap:15px;align-items:flex-start;padding:17px 19px;background:var(--ink-2);
  text-align:left;width:100%;transition:background-color .25s var(--e);}
.ck::before{content:'';position:absolute;left:0;top:0;bottom:0;width:2px;background:var(--signal);
  transform:scaleY(0);transform-origin:50% 0;transition:transform .35s var(--e);}
.ck:hover{background:var(--ink-3);}
.ck-toggle,.ck-main{transition:transform .3s var(--e);}
.ck:hover .ck-toggle,.ck:hover .ck-main{transform:translateX(4px);}
.ck:hover::before{transform:scaleY(1);}
.ck.on{background:var(--ink-3);}
.ck.on::before{transform:scaleY(1);}
.ck-toggle{flex:none;padding:0;margin-top:1px;}
.ck-box{width:21px;height:21px;flex:none;border:1.5px solid rgba(243,231,227,.28);
  border-radius:4px;display:flex;align-items:center;justify-content:center;
  transition:background-color .25s var(--e),border-color .25s var(--e);}
.ck-box svg{width:12px;height:12px;stroke-dasharray:24;stroke-dashoffset:24;transition:stroke-dashoffset .3s var(--e);}
.ck.on .ck-box{background:var(--signal);border-color:var(--signal);}
.ck.on .ck-box svg{stroke-dashoffset:0;}
.ck-main{flex:1;cursor:pointer;text-align:left;}
.ck-text{font-size:.95rem;display:block;}
.ck-ref{display:block;margin-top:4px;font-size:.78rem;color:var(--mute-2);}
.ck-tag{font-size:.7rem;padding:3px 9px;border-radius:100px;flex:none;margin-top:1px;}
.ck-tag.req{background:rgba(227,18,42,.14);color:#FF6B62;}
.ck-tag.rec{background:rgba(143,36,30,.13);color:var(--hazard);}
.ck-help{display:block;margin-top:6px;font-size:.85rem;color:#D9B6B0;}
.ck-link{
  display:inline-flex;align-items:center;gap:5px;margin-top:8px;font-size:.78rem;
  color:var(--signal-2);border-bottom:1px dotted rgba(255,75,68,.5);padding-bottom:1px;width:fit-content;
  transition:color .2s var(--e),border-color .2s var(--e),transform .2s var(--e);
}
.ck-link:hover{color:var(--signal-2);border-color:var(--signal-2);transform:translateX(2px);}

@keyframes bump{
  0%{transform:scale(1);} 35%{transform:scale(1.35);} 60%{transform:scale(.9);} 100%{transform:scale(1);}
}
.ck-box.bump{animation:bump .38s var(--e);}

/* confetti */
.confetti-layer{position:fixed;inset:0;pointer-events:none;z-index:200;overflow:hidden;}
.confetti-bit{
  position:absolute;top:-10px;width:8px;height:12px;border-radius:1px;
  animation:confetti-fall linear forwards;
}
@keyframes confetti-fall{
  to{ transform: translateY(105vh) rotate(var(--rot)); opacity:.9; }
}

/* report */
.report{background:var(--ink-3);border-radius:10px;padding:40px;}
@media (max-width:700px){.report{padding:24px;}}
.report-head{display:flex;gap:36px;align-items:center;flex-wrap:wrap;padding-bottom:32px;border-bottom:1px solid rgba(243,231,227,.1);}
.score{position:relative;width:126px;height:126px;flex:none;}
.score-ring{transform:rotate(-90deg);width:126px;height:126px;}
.ring-bg{fill:none;stroke:rgba(243,231,227,.1);stroke-width:8;}
.ring-fill{fill:none;stroke:var(--signal);stroke-width:8;stroke-linecap:round;
  stroke-dasharray:327;stroke-dashoffset:327;transition:stroke-dashoffset 1s var(--e),stroke .5s var(--e);}
.score-mid{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;gap:1px;}
.score-mid strong{font-family:var(--disp);font-weight:800;font-size:2.2rem;}
.score-mid span{font-size:.9rem;color:var(--mute);margin-top:7px;}
.report-verdict{flex:1;min-width:250px;}
.report-status{font-family:var(--disp);font-weight:800;font-size:2rem;line-height:1.05;}
.report-status.ok{color:var(--green);}
.report-status.warn{color:var(--hazard);}
.report-status.bad{color:var(--signal);}
.report-desc{color:#C9A29C;margin-top:9px;font-size:.95rem;max-width:56ch;}
.report-meta{display:flex;flex-wrap:wrap;gap:8px 26px;margin:20px 0 0;}
.report-meta div{display:flex;gap:7px;font-size:.84rem;}
.report-meta dt{color:var(--mute-2);}
.report-meta dd{margin:0;}
.report-body{display:grid;grid-template-columns:1.15fr .85fr;gap:36px;padding-top:30px;}
@media (max-width:800px){.report-body{grid-template-columns:1fr;}}
.findings h4{font-size:.95rem;margin-bottom:14px;color:var(--signal);}
.findings-ok h4{color:var(--green);}
.findings li{display:flex;gap:10px;padding:11px 0;border-bottom:1px solid rgba(243,231,227,.07);font-size:.9rem;
  opacity:0;transform:translateX(-10px);animation:fIn .45s var(--e) forwards;animation-delay:calc(var(--i,0) * 45ms);}
@keyframes fIn{to{opacity:1;transform:none;}}
.findings li::before{content:'';width:6px;height:6px;border-radius:50%;background:var(--signal);flex:none;margin-top:7px;}
.findings-ok li::before{background:var(--green);}
.findings li em{display:block;font-style:normal;color:var(--mute-2);font-size:.8rem;margin-top:3px;}
.findings .none{color:var(--mute-2);font-size:.9rem;}
.report-legal{margin-top:32px;padding-top:20px;border-top:1px solid rgba(243,231,227,.1);color:var(--mute-2);font-size:.8rem;}

/* =====================================================
   atelier 3D — grande scène
   ===================================================== */
.sec-atelier{padding-bottom:110px;}
.stage{will-change:transform;}
.atelier{margin-top:8px;}
.stage{
  position:relative;height:min(84svh,880px);width:100%;
  background:radial-gradient(circle at 50% 42%,var(--ink-4) 0%,var(--ink-2) 55%,var(--ink) 100%);
  border-top:1px solid rgba(243,231,227,.1);border-bottom:1px solid rgba(243,231,227,.1);overflow:hidden;
}
.stage canvas{width:100%;height:100%;display:block;touch-action:none;}
.stage-hint{position:absolute;left:24px;bottom:20px;font-size:.74rem;color:var(--mute-2);pointer-events:none;}
@media (max-width:760px){.stage{height:66svh;}.stage-hint{left:16px;font-size:.7rem;}}

.tabs{position:absolute;left:50%;top:24px;transform:translateX(-50%);z-index:5;
  display:inline-flex;padding:4px;gap:2px;border-radius:100px;
  background:rgba(6,4,4,.66);backdrop-filter:blur(10px);border:1px solid rgba(243,231,227,.12);}
.tab-ink{position:absolute;top:4px;left:4px;height:calc(100% - 8px);border-radius:100px;background:var(--signal);
  z-index:0;}
.tab-ink.ready{transition:transform .5s var(--e),width .5s var(--e);}
.tab{position:relative;z-index:1;padding:10px 22px;border-radius:100px;font-size:.88rem;font-weight:600;color:var(--mute);
  transition:color .3s var(--e);}
.tab.active{color:var(--chalk);}
.tab:not(.active):hover{color:var(--signal-2);}
@media (max-width:600px){.tab{padding:9px 14px;font-size:.8rem;}}

.spin-btn{position:absolute;right:24px;top:24px;z-index:5;width:42px;height:42px;border-radius:50%;
  background:rgba(6,4,4,.66);backdrop-filter:blur(10px);border:1px solid rgba(243,231,227,.14);color:var(--mute);font-size:1.1rem;
  display:flex;align-items:center;justify-content:center;transition:color .3s var(--e),border-color .3s var(--e),transform .5s var(--e);}
.spin-btn svg{width:18px;height:18px;}
.spin-btn:hover{color:var(--chalk);}
.spin-btn.on svg{animation:spinIco 3s linear infinite;}
@keyframes spinIco{to{transform:rotate(360deg);}}
.spin-btn.on{color:var(--signal);border-color:var(--signal);}

/* hotspots */
.hotspots{position:absolute;inset:0;pointer-events:none;z-index:4;}
.hot{
  position:absolute;transform:translate(-50%,-50%);pointer-events:auto;
  width:30px;height:30px;border-radius:50%;border:1.5px solid var(--signal);
  background:rgba(6,4,4,.8);color:var(--chalk);
  font-family:var(--disp);font-weight:700;font-size:.8rem;
  display:flex;align-items:center;justify-content:center;
  transition:background-color .3s var(--e),color .3s var(--e),border-color .3s var(--e),opacity .35s var(--e),transform .3s var(--e);
}
.hot:not(.placed){opacity:0;pointer-events:none;}
.hot::after{
  content:'';position:absolute;inset:-6px;border-radius:50%;border:1px solid var(--signal);
  opacity:0;transform:scale(.7);transition:opacity .4s var(--e),transform .4s var(--e);
}
.hot:hover{background:var(--signal);color:var(--chalk);transform:translate(-50%,-50%) scale(1.12);}
.hot.on{background:var(--signal);border-color:var(--signal);color:var(--chalk);}
.hot.on::after{opacity:1;transform:scale(1);animation:pulse 2.4s var(--e-soft) infinite;}
@keyframes pulse{0%{transform:scale(1);opacity:.9;}70%{transform:scale(1.5);opacity:0;}100%{opacity:0;}}
.hot.behind{opacity:.18;pointer-events:none;}

.hot-card{
  position:absolute;right:24px;bottom:24px;z-index:6;width:min(390px,calc(100% - 48px));
  background:rgba(6,4,4,.88);backdrop-filter:blur(14px);border:1px solid rgba(243,231,227,.12);
  border-radius:10px;padding:24px 26px;color:var(--chalk);
  opacity:0;transform:translateY(18px);pointer-events:none;
  transition:opacity .45s var(--e),transform .45s var(--e);
  box-shadow:0 24px 50px -30px rgba(0,0,0,.7);
}
.hot-card.show{opacity:1;transform:none;pointer-events:auto;}
.hot-card h4{font-size:1.15rem;margin-bottom:8px;}
.hot-n{font-family:var(--disp);font-weight:700;font-size:.76rem;color:var(--signal);margin-bottom:6px;}
.hot-text{font-size:.9rem;color:var(--mute);}
.hot-ref{margin-top:12px;font-size:.76rem;color:var(--mute-2);}
.hot-close{position:absolute;right:14px;top:10px;font-size:1.3rem;line-height:1;color:var(--mute-2);transition:color .25s var(--e);}
.hot-close:hover{color:var(--chalk);}
@media (max-width:760px){.hot-card{left:16px;right:16px;bottom:16px;width:auto;padding:18px 20px;}}

.atelier-bottom{display:grid;grid-template-columns:1.1fr .9fr;gap:44px;padding-top:48px;}
@media (max-width:880px){.atelier-bottom{grid-template-columns:1fr;gap:34px;}}
.hot-list{display:flex;flex-direction:column;gap:1px;background:rgba(243,231,227,.1);
  border:1px solid rgba(243,231,227,.1);border-radius:var(--r);overflow:hidden;}
.hot-list li{background:var(--ink-3);}
.hot-list button{position:relative;display:flex;gap:14px;align-items:center;width:100%;text-align:left;
  padding:14px 18px;font-size:.92rem;transition:background-color .25s var(--e);}
.hot-list button:hover{background:var(--ink-4);}
.hot-list button > span{transition:transform .3s var(--e);}
.hot-list button:hover > span{transform:translateX(6px);}
.hot-list li.on button{background:var(--signal);color:var(--chalk);}
.hot-list .n{font-family:var(--disp);font-weight:700;font-size:.76rem;color:var(--signal);flex:none;}
.hot-list li.on .n{color:var(--chalk);}

.specs{border-top:2px solid var(--signal);padding-top:20px;}
.spec-row{display:flex;justify-content:space-between;gap:16px;padding:11px 0;border-bottom:1px solid rgba(243,231,227,.1);font-size:.88rem;}
.spec-row span:first-child{color:var(--mute-2);}
.spec-row span:last-child{text-align:right;max-width:62%;}
.classes{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:20px;}
.cls{font-size:.76rem;padding:5px 12px;border-radius:100px;border:1px solid rgba(243,231,227,.2);color:var(--mute-2);
  transition:background-color .3s var(--e),color .3s var(--e),border-color .3s var(--e);}
.cls.on{background:var(--signal);color:var(--chalk);border-color:var(--signal);}

/* =====================================================
   normes — accordéon
   ===================================================== */
.norms{border-top:1px solid rgba(243,231,227,.12);}
.norm{border-bottom:1px solid rgba(243,231,227,.12);}
.norm-head{display:flex;gap:26px;align-items:center;width:100%;text-align:left;padding:26px 0;
  transition:color .3s var(--e);}
.norm-ref,.norm-name{transition:transform .4s var(--e);}
.norm-head:hover .norm-ref,.norm-head:hover .norm-name{transform:translateX(10px);}
.norm-ref{font-family:var(--disp);font-weight:700;color:var(--signal);font-size:1rem;min-width:190px;flex:none;}
.norm-name{font-size:1.18rem;font-family:var(--disp);font-weight:500;flex:1;}
.norm-plus{position:relative;width:16px;height:16px;flex:none;}
.norm-plus::before,.norm-plus::after{content:'';position:absolute;background:var(--chalk);transition:transform .45s var(--e),opacity .3s var(--e);}
.norm-plus::before{left:0;top:7.5px;width:16px;height:1.5px;}
.norm-plus::after{left:7.5px;top:0;width:1.5px;height:16px;}
.norm.open .norm-plus::after{transform:rotate(90deg);opacity:0;}
.norm-body{display:grid;grid-template-rows:0fr;transition:grid-template-rows .5s var(--e);}
.norm.open .norm-body{grid-template-rows:1fr;}
.norm-body p{color:var(--mute);max-width:88ch;font-size:.95rem;padding:0 0 28px 216px;}
@media (max-width:760px){
  .norm-head{flex-wrap:wrap;gap:4px 12px;}
  .norm-ref{min-width:0;width:100%;}
  .norm-body p{padding-left:0;}
}

/* footer */
.ftr{padding:64px 0;border-top:1px solid rgba(243,231,227,.09);}
.ftr-inner{display:flex;flex-direction:column;gap:14px;}
.ftr p{color:var(--mute-2);font-size:.82rem;max-width:70ch;}

/* =====================================================
   impression — rapport seul
   ===================================================== */
@media print{
  .sec::before{display:none !important;}
  .hdr,.hero,.sec-chalk,#normes,.ftr,.rail,.no-print,.loader,.cursor,.scroll-bar{display:none !important;}
  body{background:#fff;color:#000;}
  .sec{padding:0;}
  .sec-head{display:none;}
  .wizard{border:none;background:#fff;}
  .step-panel{display:none !important;padding:0;}
  .step-panel[data-step="3"]{display:block !important;}
  .report{background:#fff;color:#000;padding:0;}
  .report-desc,.findings li em,.report-legal,.report-meta dt{color:#444;}
  .findings li{opacity:1 !important;transform:none !important;animation:none !important;}
  .ring-bg{stroke:#ddd;}
}

/* tactile : pas d'état de survol collé après un tap */
@media (hover:none){
  .pill::before,.choice::before{transition:none;}
  .pill:hover::before{transform:scaleY(0);}
  .pill-signal:hover{color:var(--chalk);}
  .pill-ghost:hover{color:var(--chalk);border-color:rgba(243,231,227,.24);}
  .sec-chalk .pill-ghost:hover{color:var(--ink);border-color:rgba(6,4,4,.24);}
  .choice:hover{box-shadow:none;border-color:rgba(243,231,227,.14);}
  .choice:not(.on):hover::before{opacity:0;}
  .choice.on:hover{border-color:var(--signal);}
}

/* =====================================================
   rideau de transition entre pages
   ===================================================== */
.wipe{position:fixed;inset:0;z-index:300;background:var(--signal);pointer-events:none;clip-path:inset(100% 0 0 0);visibility:hidden;}
.wipe.run{visibility:visible;pointer-events:auto;}
.wipe-in{position:absolute;inset:0;background:var(--ink);clip-path:inset(100% 0 0 0);
  display:flex;flex-direction:column;justify-content:center;gap:14px;padding:0 max(28px,8vw);overflow:hidden;}
.wipe-n{font-family:var(--disp);font-weight:700;font-size:1rem;color:var(--signal);letter-spacing:.08em;}
.wipe-t{font-family:var(--disp);font-weight:800;font-size:clamp(3.2rem,11vw,10rem);line-height:.95;letter-spacing:-.04em;color:var(--chalk);display:block;}
.sec > .wrap,.sec > .atelier{will-change:transform,opacity;}
@media print{.wipe{display:none !important;}}

/* =====================================================
   méthode : section épinglée, pilotée par le défilement
   ===================================================== */
.pin-count{display:none;}
@media (min-width:821px){
  .pin-track{height:340vh;}
  .pin-sticky{position:sticky;top:0;height:100svh;display:flex;align-items:center;overflow:hidden;}
  .pin-sticky > .wrap{width:100%;}
  .pin-sticky .sec-head{margin-bottom:44px;}
  .pin-count{display:block;position:absolute;right:max(28px,6vw);top:110px;font-family:var(--disp);font-weight:800;
    font-size:clamp(3rem,7vw,7rem);letter-spacing:-.05em;color:rgba(243,231,227,.07);line-height:1;}
  .pin-track .steps li{opacity:.18 !important;transform:scale(.94) !important;transition:opacity .55s var(--e),transform .55s var(--e),background-color .45s var(--e),color .45s var(--e);animation:none !important;}
  .pin-track .steps li.cur{opacity:1 !important;transform:scale(1.03) !important;background:var(--signal);color:var(--chalk);z-index:2;}
  .pin-track .steps li.cur p{color:rgba(243,231,227,.82);}
  .pin-track .steps li.cur .step-n{transform:translateX(8px);color:var(--chalk);}
  .pin-track .steps li.cur .step-line{background:var(--chalk);}
  .pin-track .step-line{transform:scaleX(var(--fill,0)) !important;transition:none !important;}
}
.warn-banner{position:fixed;left:0;right:0;bottom:0;z-index:400;background:var(--signal);color:var(--chalk);padding:14px 22px;font-size:.9rem;text-align:center;}
.ftr .ver{color:var(--signal-2);font-weight:600;}
.motion-banner{background:var(--ink-4);border-top:2px solid var(--signal);}
.motion-banner button{margin-left:12px;padding:7px 16px;border-radius:100px;background:var(--signal);color:var(--chalk);font-weight:600;}