/* =====================================================================
   CYBERLUCIDE — pages publiques (Accueil, Concrètement, À propos)
   Fil rouge : la vigie, le guetteur et sa lanterne dans la nuit.
   ===================================================================== */
:root{
  --mk-ink:#0A1628; --mk-deep:#071120; --mk-surf:#10223A; --mk-surf2:#0D1D32;
  --mk-line:#1E3656; --mk-rule:#15294A;
  --mk-foam:#F3F7FB; --mk-text:#AEC0D4; --mk-mist:#7F96B1; --mk-dim:#5D7692;
  --mk-amber:#FFB547; --mk-amber-2:#FFCB7A; --mk-safe:#2FE6D6; --mk-threat:#FF6B6B; --mk-team:#8B9BFF;
  --mk-ease:cubic-bezier(.2,.8,.2,1);
  --mx:70vw; --my:30vh;
}

/* ---------- Fond : la nuit + la lanterne qui suit le curseur ---------- */
body.mk-on{ background:var(--mk-ink) !important; background-image:none !important }
#mk-field, #mk-lantern{ position:fixed; pointer-events:none; z-index:0; opacity:0; transition:opacity .8s ease }
#mk-field{ inset:0;
  background-image:
    radial-gradient(rgba(255,181,71,.7) 1px, rgba(255,181,71,0) 1.6px),
    linear-gradient(rgba(127,150,177,.09) 1px, transparent 1px),
    linear-gradient(90deg, rgba(127,150,177,.09) 1px, transparent 1px);
  background-size:24px 24px, 96px 96px, 96px 96px;
  -webkit-mask-image:radial-gradient(300px circle at var(--mx) var(--my), #000 0%, rgba(0,0,0,.45) 40%, transparent 72%);
          mask-image:radial-gradient(300px circle at var(--mx) var(--my), #000 0%, rgba(0,0,0,.45) 40%, transparent 72%) }
#mk-lantern{ left:0; top:0; width:1000px; height:1000px; margin:-500px 0 0 -500px;
  transform:translate3d(var(--mx), var(--my), 0);
  background:radial-gradient(circle, rgba(255,181,71,.13) 0%, rgba(255,181,71,.05) 30%, rgba(255,181,71,0) 60%) }
body.mk-on #mk-field, body.mk-on #mk-lantern{ opacity:1 }
body.mk-on main, body.mk-on footer{ position:relative; z-index:1 }
body.mk-on footer{ background:transparent; border-top:1px solid var(--mk-rule) }

/* ---------- Vues publiques ---------- */
.mk{ color:var(--mk-text); font-family:var(--body); background:transparent; position:relative }
.mk *:focus-visible{ outline:2px solid var(--mk-amber); outline-offset:3px; border-radius:6px }
.mk-wrap{ width:100%; max-width:1180px; margin:0 auto; padding:0 32px; box-sizing:border-box }
.mk-narrow{ max-width:820px }
.mk-section{ padding:120px 0 }
.mk-section-alt{ background:linear-gradient(180deg, rgba(16,34,58,0), rgba(16,34,58,.65) 18%, rgba(16,34,58,.65) 82%, rgba(16,34,58,0)) }

.mk-kicker{ color:var(--mk-amber); font-size:15px; font-weight:500; margin:0 0 22px }
.mk-display{ font-family:var(--disp); font-weight:700; color:var(--mk-foam); margin:0;
  font-size:clamp(2.75rem, 7.2vw, 6.4rem); line-height:.96; letter-spacing:-.03em; max-width:15ch }
.mk-h2{ font-family:var(--disp); font-weight:700; color:var(--mk-foam); margin:0 0 16px;
  font-size:clamp(2rem, 4.6vw, 3.6rem); line-height:1; letter-spacing:-.025em; max-width:20ch }
.mk-lead{ font-size:clamp(17px, 1.6vw, 20px); line-height:1.6; max-width:56ch; margin:28px 0 0 }
.mk-sub{ font-size:18px; line-height:1.6; max-width:60ch; margin:0 0 56px; color:var(--mk-mist) }

/* ---------- Boutons ---------- */
.mk-actions{ display:flex; gap:14px; flex-wrap:wrap }
.mk-btn{ position:relative; font:600 16px/1 var(--body); padding:17px 26px; border-radius:12px; cursor:pointer;
  border:1px solid transparent; transition:background .25s, border-color .25s, box-shadow .3s, color .25s, transform .35s var(--mk-ease) }
.mk-btn-main{ background:var(--mk-amber); color:#1D1404; box-shadow:0 10px 40px -12px rgba(255,181,71,.6) }
.mk-btn-main:hover{ background:var(--mk-amber-2); box-shadow:0 0 0 7px rgba(255,181,71,.16), 0 14px 50px -10px rgba(255,181,71,.7) }
.mk-btn-ghost{ background:rgba(10,22,40,.4); color:var(--mk-foam); border-color:#2C4A70; backdrop-filter:blur(6px) }
.mk-btn-ghost:hover{ border-color:var(--mk-amber); color:#fff }

/* ---------- Titres mot à mot ---------- */
[data-split] .w{ display:inline-block; overflow:hidden; vertical-align:top; padding:0 .02em .1em; margin-bottom:-.1em }
[data-split] .w > span{ display:inline-block; transform:translate3d(0,108%,0) rotate(5deg); transform-origin:0 100%;
  transition:transform 1s var(--mk-ease); transition-delay:var(--wd,0ms) }
[data-split].in .w > span{ transform:none }

/* ---------- Apparitions au défilement ---------- */
[data-reveal]{ opacity:0; transform:translate3d(0,34px,0); filter:blur(8px);
  transition:opacity .9s var(--mk-ease), transform .9s var(--mk-ease), filter .9s var(--mk-ease); transition-delay:var(--d,0s) }
[data-reveal].in{ opacity:1; transform:none; filter:none }

/* ===================== ACCUEIL ===================== */
.mk-hero{ width:100%; max-width:1180px; margin:0 auto; padding:110px 32px 80px; box-sizing:border-box; position:relative }
.mk-hero-home{ padding-top:96px }

/* Interrupteur de mode */
.mk-modes{ margin-top:52px; max-width:1000px }
.mk-switch{ position:relative; display:inline-grid; grid-template-columns:1fr 1fr; padding:6px; border-radius:16px;
  background:rgba(16,34,58,.8); border:1px solid var(--mk-line); backdrop-filter:blur(10px) }
.mk-switch button{ position:relative; z-index:1; background:none; border:0; cursor:pointer; padding:14px 24px;
  font:600 15px/1 var(--body); color:var(--mk-mist); border-radius:11px; transition:color .4s; white-space:nowrap }
.mk-switch button[aria-selected="true"]{ color:#1D1404 }
.mk-switch-thumb{ position:absolute; z-index:0; top:6px; bottom:6px; left:6px; width:calc(50% - 6px); border-radius:11px;
  background:var(--mk-amber); box-shadow:0 8px 30px -8px rgba(255,181,71,.7); transition:transform .55s var(--mk-ease) }
.mk-modes[data-mode="manual"] .mk-switch-thumb{ transform:translateX(100%) }

.mk-board{ margin-top:18px; padding:34px 34px 30px; border-radius:22px; border:1px solid var(--mk-line);
  background:linear-gradient(160deg, rgba(20,42,70,.85), rgba(11,25,44,.85)); backdrop-filter:blur(12px);
  box-shadow:0 50px 120px -50px rgba(0,0,0,.9) }
.mk-track{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(4,1fr); gap:12px; position:relative }
.mk-track li{ position:relative; z-index:1; display:flex; flex-direction:column; gap:4px; transition:opacity .5s }
.mk-track li b{ color:var(--mk-foam); font-family:var(--disp); font-size:18px; font-weight:600; margin-top:16px }
.mk-track li small{ color:var(--mk-dim); font-size:13px }
.mk-track-line{ position:absolute !important; left:12px; right:12px; top:11px; height:2px; background:var(--mk-line); z-index:0 !important }
.mk-track-line i{ display:block; height:100%; width:0; background:linear-gradient(90deg, var(--mk-safe), var(--mk-amber)); transition:width .9s var(--mk-ease) }
.mk-node{ width:24px; height:24px; border-radius:50%; background:var(--mk-ink); border:2px solid var(--mk-line);
  transition:border-color .5s, background .5s, box-shadow .5s, transform .5s var(--mk-ease) }
.mk-track li.done .mk-node{ border-color:var(--mk-safe); background:var(--mk-safe) }
.mk-track li.now .mk-node{ border-color:var(--mk-amber); background:var(--mk-amber); transform:scale(1.15);
  box-shadow:0 0 0 8px rgba(255,181,71,.18), 0 0 30px rgba(255,181,71,.6) }
.mk-track li.now b{ color:var(--mk-amber) }

.mk-panels{ display:grid; margin-top:30px }
.mk-panel{ grid-area:1 / 1; transition:opacity .5s var(--mk-ease), transform .5s var(--mk-ease), visibility .5s }
.mk-modes[data-mode="auto"] .mk-panel-manual, .mk-modes[data-mode="manual"] .mk-panel-auto{ opacity:0; visibility:hidden; transform:translateY(12px); pointer-events:none }
.mk-status{ display:flex; align-items:center; gap:12px; margin:0; color:var(--mk-foam); font-size:19px; font-weight:500; min-height:1.6em }
.mk-live{ flex:0 0 10px; width:10px; height:10px; border-radius:50%; background:var(--mk-safe); animation:mk-pulse 2s ease-out infinite }
@keyframes mk-pulse{ 0%{box-shadow:0 0 0 0 rgba(47,230,214,.6)} 80%,100%{box-shadow:0 0 0 12px rgba(47,230,214,0)} }
#mk-status-txt{ transition:opacity .3s }
#mk-status-txt.swap{ opacity:0 }
.mk-panel-note{ margin:10px 0 0 22px; color:var(--mk-mist); font-size:15px }

.mk-ctrl{ display:grid; grid-template-columns:130px 1fr; gap:14px; align-items:center; margin-bottom:14px }
.mk-ctrl > span{ color:var(--mk-mist); font-size:14px }
.mk-chips{ display:flex; flex-wrap:wrap; gap:8px }
.mk-chips button{ background:transparent; border:1px solid var(--mk-line); color:var(--mk-text); border-radius:999px;
  padding:9px 15px; font:500 14px/1 var(--body); cursor:pointer; transition:all .3s var(--mk-ease) }
.mk-chips button:hover{ border-color:var(--mk-amber); color:var(--mk-foam) }
.mk-chips button.on{ background:rgba(255,181,71,.14); border-color:var(--mk-amber); color:var(--mk-amber-2) }
.mk-launch-row{ display:flex; align-items:center; gap:18px; flex-wrap:wrap; margin-top:20px }
.mk-summary{ margin:0; color:var(--mk-mist); font-size:14.5px; max-width:48ch }
.mk-summary b{ color:var(--mk-foam); font-weight:600 }

/* Trois atouts */
.mk-trio{ display:grid; grid-template-columns:repeat(3,1fr); gap:0 }
.mk-trio article{ padding:8px 40px 8px 0; margin-right:40px; border-right:1px solid var(--mk-rule) }
.mk-trio article:last-child{ border-right:0; margin-right:0 }
.mk-ico{ width:46px; height:46px; fill:none; stroke:var(--mk-amber); stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; margin-bottom:22px }
.mk-ico path{ stroke-dasharray:140; stroke-dashoffset:140; transition:stroke-dashoffset 1.6s var(--mk-ease) .3s }
.in .mk-ico path{ stroke-dashoffset:0 }
.mk-trio h3{ font-family:var(--disp); color:var(--mk-foam); font-size:24px; line-height:1.15; margin:0 0 12px; font-weight:600 }
.mk-trio p{ margin:0; font-size:16px; line-height:1.6 }

/* Bandeau des menaces */
.mk-marquee{ padding:40px 0 110px; overflow:hidden }
.mk-marquee-foot{ text-align:center; color:var(--mk-mist); font-size:14px; margin:18px 0 0; padding:0 16px }
.mk-marquee-title{ text-align:center; color:var(--mk-mist); font-size:15px; margin:0 0 28px }
.mk-mq{ overflow:hidden; white-space:nowrap; -webkit-mask-image:linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); mask-image:linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent) }
.mk-mq-track{ display:inline-flex; gap:56px; animation:mk-scroll 46s linear infinite; padding-right:56px }
.mk-mq-rev .mk-mq-track{ animation-direction:reverse; animation-duration:58s }
.mk-mq span{ font-family:var(--disp); font-weight:700; font-size:clamp(2.2rem, 5.4vw, 4.6rem); line-height:1.15; letter-spacing:-.02em;
  color:transparent; -webkit-text-stroke:1.2px rgba(174,192,212,.32); transition:color .4s, -webkit-text-stroke-color .4s; cursor:default }
.mk-mq span:hover{ color:var(--mk-amber); -webkit-text-stroke-color:var(--mk-amber) }
.mk-mq-rev span{ -webkit-text-stroke-color:rgba(174,192,212,.16) }
.mk-mq:hover .mk-mq-track{ animation-play-state:paused }
@keyframes mk-scroll{ to{ transform:translateX(-50%) } }

/* Appel final */
.mk-cta{ padding:140px 0 160px; text-align:center; position:relative; overflow:hidden }
.mk-cta::before{ content:""; position:absolute; left:50%; bottom:-280px; width:900px; height:560px; transform:translateX(-50%);
  background:radial-gradient(ellipse at center, rgba(255,181,71,.18), rgba(255,181,71,0) 65%); pointer-events:none }
.mk-cta .mk-h2{ margin:0 auto 18px; max-width:18ch }
.mk-cta p{ max-width:52ch; margin:0 auto 36px; font-size:18px; line-height:1.6 }
.mk-cta .mk-actions{ justify-content:center; position:relative }

/* ===================== CONCRÈTEMENT ===================== */
.mk-hero-sub{ padding:120px 32px 60px }
.mk-scrollcue{ display:flex; align-items:center; gap:12px; margin:56px 0 0; color:var(--mk-mist); font-size:14px }
.mk-scrollcue span{ width:1px; height:46px; background:linear-gradient(var(--mk-amber), transparent); position:relative; overflow:hidden }
.mk-scrollcue span::after{ content:""; position:absolute; left:-1px; top:-20px; width:3px; height:20px; background:var(--mk-amber-2); animation:mk-drop 1.8s var(--mk-ease) infinite }
@keyframes mk-drop{ to{ top:46px } }

.mk-story{ position:relative; display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.05fr); gap:72px;
  width:100%; max-width:1180px; margin:0 auto; padding:0 32px 80px 64px; box-sizing:border-box }
.mk-story-rail{ position:absolute; left:32px; top:0; bottom:80px; width:2px; background:var(--mk-rule) }
.mk-story-rail i{ position:sticky; top:0; display:block; width:2px; height:0; background:linear-gradient(var(--mk-safe), var(--mk-amber)) }
.mk-step{ min-height:88vh; display:flex; flex-direction:column; justify-content:center; padding:40px 0; opacity:.22;
  transform:translateX(-10px); transition:opacity .7s var(--mk-ease), transform .7s var(--mk-ease) }
.mk-step.active{ opacity:1; transform:none }
.mk-day{ color:var(--mk-amber); font-weight:600; font-size:15px; margin:0 0 14px }
.mk-step h2{ font-family:var(--disp); color:var(--mk-foam); font-size:clamp(2rem, 3.6vw, 3rem); line-height:1.02; letter-spacing:-.02em; margin:0 0 20px }
.mk-step p{ font-size:18px; line-height:1.62; margin:0 0 16px; max-width:46ch }
.mk-gain{ color:var(--mk-safe) !important; font-size:16px !important; padding-left:14px; border-left:2px solid var(--mk-safe) }

.mk-story-stage{ position:relative }
.mk-stage-frame{ position:sticky; top:14vh; height:72vh; min-height:440px; border-radius:26px; border:1px solid var(--mk-line); overflow:hidden;
  background:radial-gradient(120% 80% at 80% 0%, rgba(255,181,71,.10), rgba(255,181,71,0) 55%), linear-gradient(160deg, #11243D, #0A182B);
  box-shadow:0 60px 140px -60px rgba(0,0,0,.95) }
.mk-scene{ position:absolute; inset:0; display:grid; place-items:center; padding:34px;
  opacity:0; visibility:hidden; transform:scale(.94) translateY(24px); filter:blur(10px);
  transition:opacity .7s var(--mk-ease), transform .8s var(--mk-ease), filter .7s var(--mk-ease), visibility .7s }
.mk-scene.active{ opacity:1; visibility:visible; transform:none; filter:none }

/* scène 0 : e-mail */
.mk-mail{ position:relative; width:min(420px, 100%); background:#F6F8FB; color:#1A2433; border-radius:14px; padding:22px 22px 24px; box-shadow:0 30px 60px -20px rgba(0,0,0,.6) }
.mk-mail-head{ display:flex; flex-direction:column; gap:2px; padding-bottom:12px; border-bottom:1px solid #E1E7EF }
.mk-mail-head b{ font-size:15px } .mk-mail-head span{ font-size:13px; color:#C2410C }
.mk-mail-subj{ font-weight:700; margin:14px 0 8px; font-size:15px }
.mk-mail-body{ font-size:14px; line-height:1.55; color:#425066; margin:0 0 16px }
.mk-mail-body mark{ background:rgba(255,107,107,.18); color:#B42318; padding:0 3px; border-radius:3px }
.mk-mail-btn{ display:inline-block; background:#2563EB; color:#fff; font-size:13px; font-weight:600; padding:9px 14px; border-radius:7px }
.mk-pin{ position:absolute; background:var(--mk-threat); color:#fff; font-size:12px; font-weight:700; padding:6px 10px; border-radius:8px; white-space:nowrap;
  box-shadow:0 8px 20px -6px rgba(255,107,107,.7); opacity:0; transform:scale(.6); transition:opacity .45s var(--mk-ease), transform .55s var(--mk-ease) }
.mk-pin::before{ content:""; position:absolute; width:8px; height:8px; background:inherit; transform:rotate(45deg) }
.mk-pin-1{ top:30px; right:-24px } .mk-pin-1::before{ left:-3px; top:11px }
.mk-pin-2{ top:118px; left:-30px } .mk-pin-2::before{ right:-3px; top:11px }
.mk-pin-3{ bottom:6px; right:-14px } .mk-pin-3::before{ left:-3px; top:11px }
.mk-scene.active .mk-pin{ opacity:1; transform:none }
.mk-scene.active .mk-pin-1{ transition-delay:.5s } .mk-scene.active .mk-pin-2{ transition-delay:.85s } .mk-scene.active .mk-pin-3{ transition-delay:1.2s }

/* scène 1 : résultats */
.mk-res{ width:min(440px,100%) }
.mk-res-big{ margin:0; display:flex; align-items:baseline; gap:12px; color:var(--mk-foam) }
.mk-res-big b{ font-family:var(--disp); font-size:clamp(4rem, 9vw, 7rem); line-height:.9; color:var(--mk-threat) }
.mk-res-big span{ font-size:20px; color:var(--mk-text) }
.mk-res-ok{ color:var(--mk-safe); margin:10px 0 30px; font-weight:600 }
.mk-barrow{ display:grid; grid-template-columns:130px 1fr 26px; gap:14px; align-items:center; margin-bottom:14px; font-size:14px }
.mk-barrow > div{ height:12px; border-radius:6px; background:rgba(255,255,255,.06); overflow:hidden }
.mk-barrow i{ display:block; height:100%; width:0; border-radius:6px; background:linear-gradient(90deg, #FF8A65, var(--mk-threat)); transition:width 1.2s var(--mk-ease) .3s }
.mk-scene.active .mk-barrow i{ width:var(--w) }
.mk-barrow em{ font-style:normal; color:var(--mk-foam); font-weight:700; text-align:right }

/* scène 2 : cours rédigé */
.mk-course{ width:min(440px,100%); background:rgba(10,22,40,.75); border:1px solid rgba(47,230,214,.35); border-radius:18px; padding:26px }
.mk-course-tag{ margin:0 0 12px; color:var(--mk-safe); font-size:13px; font-weight:600 }
.mk-type{ font-family:var(--disp); color:var(--mk-foam); font-size:26px; line-height:1.12; margin:0 0 20px; min-height:2.3em }
.mk-type::after{ content:""; display:inline-block; width:2px; height:.95em; background:var(--mk-amber); margin-left:3px; vertical-align:-.1em; animation:mk-caret .9s steps(1) infinite }
@keyframes mk-caret{ 50%{ opacity:0 } }
.mk-course-steps{ margin:0; padding:0 0 0 20px; color:var(--mk-text); font-size:14.5px; line-height:1.5 }
.mk-course-steps li{ margin-bottom:8px; opacity:0; transform:translateX(-10px); transition:opacity .5s var(--mk-ease), transform .5s var(--mk-ease) }
.mk-scene.typed .mk-course-steps li{ opacity:1; transform:none }
.mk-scene.typed .mk-course-steps li:nth-child(2){ transition-delay:.15s } .mk-scene.typed .mk-course-steps li:nth-child(3){ transition-delay:.3s } .mk-scene.typed .mk-course-steps li:nth-child(4){ transition-delay:.45s }
.mk-course-meta{ margin:14px 0 0; color:var(--mk-dim); font-size:13px }

/* scène 3 : progression */
.mk-prog{ width:min(420px,100%) }
.mk-prow{ display:grid; grid-template-columns:44px 1fr; gap:14px; align-items:center; margin-bottom:16px }
.mk-av{ width:44px; height:44px; border-radius:50%; display:grid; place-items:center; background:#1B3354; color:var(--mk-foam); font-weight:700; font-size:14px }
.mk-prow > div{ height:14px; border-radius:7px; background:rgba(255,255,255,.06); overflow:hidden }
.mk-prow i{ display:block; height:100%; width:0; border-radius:7px; background:linear-gradient(90deg, var(--mk-safe), #7CF0A8); transition:width 1.3s var(--mk-ease) }
.mk-scene.active .mk-prow i{ width:var(--w) }
.mk-scene.active .mk-prow:nth-child(2) i{ transition-delay:.12s } .mk-scene.active .mk-prow:nth-child(3) i{ transition-delay:.24s } .mk-scene.active .mk-prow:nth-child(4) i{ transition-delay:.36s }
.mk-badge{ display:flex; gap:14px; align-items:center; margin-top:28px; padding:14px 18px; border-radius:14px; background:rgba(255,181,71,.12); border:1px solid rgba(255,181,71,.4);
  opacity:0; transform:scale(.7) rotate(-4deg); transition:opacity .5s var(--mk-ease) 1.3s, transform .7s cubic-bezier(.34,1.56,.64,1) 1.3s }
.mk-scene.active .mk-badge{ opacity:1; transform:none }
.mk-badge > span{ font-size:30px }
.mk-badge b{ display:block; color:var(--mk-amber-2) } .mk-badge small{ color:var(--mk-text); font-size:13px }

/* scène 4 : rapport */
.mk-report{ width:min(420px,100%); display:flex; flex-direction:column; align-items:center; gap:26px }
.mk-report-mail{ width:100%; display:grid; gap:4px; padding:16px 18px; border-radius:14px; background:rgba(10,22,40,.75); border:1px solid var(--mk-line);
  opacity:0; transform:translateY(-16px); transition:opacity .6s var(--mk-ease), transform .7s var(--mk-ease) }
.mk-scene.active .mk-report-mail{ opacity:1; transform:none }
.mk-report-mail b{ color:var(--mk-foam) } .mk-report-mail span{ font-size:14px } .mk-report-mail em{ font-style:normal; color:var(--mk-amber); font-size:13px }
.mk-gauge{ position:relative; width:220px; height:220px }
.mk-gauge svg{ width:100%; height:100%; transform:rotate(-90deg) }
.mk-gauge circle{ fill:none; stroke-width:9; stroke-linecap:round }
.mk-g-bg{ stroke:rgba(255,255,255,.07) }
.mk-g-fg{ stroke:var(--mk-safe); stroke-dasharray:100; stroke-dashoffset:46; transition:stroke-dashoffset 1.8s var(--mk-ease) .4s, stroke 1.8s .4s }
.mk-scene.active .mk-g-fg{ stroke-dashoffset:19; stroke:#5BE3A0 }
.mk-gauge p{ position:absolute; inset:0; margin:0; display:flex; flex-direction:column; align-items:center; justify-content:center }
.mk-gauge b{ font-family:var(--disp); font-size:64px; line-height:1; color:var(--mk-foam) }
.mk-gauge p > span{ color:var(--mk-dim); font-size:16px } .mk-gauge small{ color:var(--mk-mist); font-size:13px; margin-top:6px }

/* Avant / après */
.mk-compare{ position:relative; --pos:50%; border-radius:24px; overflow:hidden; border:1px solid var(--mk-line); min-height:380px; user-select:none }
.mk-cmp{ position:absolute; inset:0; padding:48px 52px; box-sizing:border-box }
.mk-cmp h3{ font-family:var(--disp); font-size:clamp(1.6rem, 3vw, 2.3rem); margin:0 0 24px }
.mk-cmp ul{ list-style:none; margin:0; padding:0; display:grid; gap:14px; font-size:17px }
.mk-cmp li{ position:relative; padding-left:28px }
.mk-cmp-before{ background:repeating-linear-gradient(135deg, #0C1626 0 14px, #0E1A2C 14px 28px); color:#7C8A9C }
.mk-cmp-before h3{ color:#93A2B4 }
.mk-cmp-before li::before{ content:""; position:absolute; left:0; top:.55em; width:12px; height:2px; background:#5D6B7D }
.mk-cmp-after{ background:linear-gradient(135deg, #12304F, #0D2240); color:var(--mk-foam); clip-path:inset(0 0 0 var(--pos)); text-align:right }
.mk-cmp-after h3{ color:var(--mk-amber) }
.mk-cmp-after ul{ justify-items:end }
.mk-cmp-after li{ padding:0 28px 0 0 }
.mk-cmp-after li::before{ content:""; position:absolute; right:0; top:.4em; width:12px; height:7px; border:solid var(--mk-safe); border-width:0 0 2px 2px; transform:rotate(-45deg) }
.mk-cmp-handle{ position:absolute; top:0; bottom:0; left:var(--pos); width:2px; margin-left:-1px; background:var(--mk-amber); pointer-events:none; box-shadow:0 0 20px rgba(255,181,71,.7) }
.mk-cmp-handle span{ position:absolute; top:50%; left:50%; width:52px; height:52px; margin:-26px 0 0 -26px; border-radius:50%; background:var(--mk-amber);
  box-shadow:0 0 0 8px rgba(255,181,71,.18) }
.mk-cmp-handle span::before, .mk-cmp-handle span::after{ content:""; position:absolute; top:50%; width:8px; height:8px; margin-top:-4px; border:solid #1D1404; border-width:0 0 2px 2px }
.mk-cmp-handle span::before{ left:12px; transform:rotate(45deg) } .mk-cmp-handle span::after{ right:12px; transform:rotate(-135deg) }
.mk-cmp-range{ position:absolute; inset:0; width:100%; height:100%; margin:0; opacity:0; cursor:ew-resize }

/* FAQ */
.mk-faq{ margin-top:40px; border-top:1px solid var(--mk-rule) }
.mk-faq details{ border-bottom:1px solid var(--mk-rule) }
.mk-faq summary{ list-style:none; cursor:pointer; display:flex; justify-content:space-between; align-items:center; gap:20px; padding:26px 0;
  font-family:var(--disp); font-size:clamp(1.15rem, 2vw, 1.45rem); color:var(--mk-foam); font-weight:600; transition:color .3s }
.mk-faq summary::-webkit-details-marker{ display:none }
.mk-faq summary::after{ content:""; flex:0 0 14px; width:14px; height:14px; background:
    linear-gradient(var(--mk-amber),var(--mk-amber)) center/14px 2px no-repeat,
    linear-gradient(var(--mk-amber),var(--mk-amber)) center/2px 14px no-repeat; transition:transform .45s var(--mk-ease) }
.mk-faq details[open] summary::after{ transform:rotate(135deg) }
.mk-faq summary:hover{ color:var(--mk-amber-2) }
.mk-faq-a{ overflow:hidden; transition:height .5s var(--mk-ease) }
.mk-faq-a p{ margin:0 0 26px; font-size:17px; line-height:1.65; max-width:62ch }

/* ===================== À PROPOS ===================== */
.mk-manifesto{ padding:60px 0 140px }
.mk-scrub{ font-family:var(--disp); font-weight:600; font-size:clamp(1.8rem, 3.6vw, 3rem); line-height:1.2; letter-spacing:-.015em; margin:0; max-width:28ch }
.mk-scrub .sw{ color:rgba(174,192,212,.16); transition:color .35s }
.mk-scrub .sw.lit{ color:var(--mk-foam) }
.mk-scrub .sw.hot{ color:var(--mk-amber) }

.mk-pipe{ position:relative; display:grid; grid-template-columns:repeat(4,1fr); gap:32px; margin-top:10px }
.mk-pipe-line{ position:absolute; left:14px; right:14px; top:7px; width:calc(100% - 28px); height:20px; overflow:visible }
.mk-pipe-line path{ fill:none; stroke:var(--mk-amber); stroke-width:2; vector-effect:non-scaling-stroke; stroke-dasharray:1; stroke-dashoffset:var(--draw,1) }
.mk-pipe::before{ content:""; position:absolute; left:14px; right:14px; top:16px; height:2px; background:var(--mk-rule) }
.mk-station{ position:relative; padding-top:52px; opacity:.35; transform:translateY(14px); transition:opacity .6s var(--mk-ease), transform .6s var(--mk-ease) }
.mk-station.on{ opacity:1; transform:none }
.mk-st-dot{ position:absolute; left:4px; top:6px; width:22px; height:22px; border-radius:50%; background:var(--mk-ink); border:2px solid var(--mk-line); transition:all .5s var(--mk-ease); z-index:1 }
.mk-station.on .mk-st-dot{ border-color:var(--mk-safe); background:var(--mk-safe); box-shadow:0 0 22px rgba(47,230,214,.5) }
.mk-station.on .mk-st-ai{ border-color:var(--mk-amber); background:var(--mk-amber); box-shadow:0 0 0 8px rgba(255,181,71,.16), 0 0 30px rgba(255,181,71,.6) }
.mk-station h3{ font-family:var(--disp); color:var(--mk-foam); font-size:21px; margin:0 0 10px; font-weight:600 }
.mk-station p{ margin:0; font-size:15.5px; line-height:1.6 }
.mk-never{ margin-top:70px; padding:34px 38px; border-radius:20px; border:1px solid rgba(255,107,107,.3); background:rgba(255,107,107,.05) }
.mk-never h3{ font-family:var(--disp); color:var(--mk-foam); font-size:24px; margin:0 0 18px }
.mk-never ul{ list-style:none; margin:0 0 18px; padding:0; display:flex; flex-wrap:wrap; gap:10px }
.mk-never li{ padding:10px 16px; border-radius:999px; border:1px solid rgba(255,107,107,.35); color:#FFC2C2; font-size:15px; text-decoration:line-through; text-decoration-color:rgba(255,107,107,.7) }
.mk-never p{ margin:0; color:var(--mk-mist); font-size:15px; line-height:1.6; max-width:70ch }

.mk-principles{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px }
.mk-glow{ --gx:50%; --gy:50%; position:relative; padding:30px 28px; border-radius:18px; border:1px solid var(--mk-line); background:rgba(13,29,50,.7); overflow:hidden }
.mk-glow::before{ content:""; position:absolute; inset:0; opacity:0; transition:opacity .4s; pointer-events:none;
  background:radial-gradient(360px circle at var(--gx) var(--gy), rgba(255,181,71,.16), rgba(255,181,71,0) 60%) }
.mk-glow:hover::before{ opacity:1 }
.mk-glow:hover{ border-color:#35557E }
.mk-glow h3{ position:relative; font-family:var(--disp); color:var(--mk-foam); font-size:20px; line-height:1.2; margin:0 0 12px; font-weight:600 }
.mk-glow p{ position:relative; margin:0; font-size:15.5px; line-height:1.6 }

.mk-refuse{ list-style:none; margin:30px 0 0; padding:0 }
.mk-refuse li{ display:block; width:fit-content; max-width:100%; font-family:var(--disp); font-weight:600; color:var(--mk-foam);
  font-size:clamp(1.4rem, 3vw, 2.4rem); line-height:1.35; padding:14px 0; letter-spacing:-.01em;
  text-decoration-line:line-through; text-decoration-thickness:3px;
  text-decoration-color:transparent; transition:text-decoration-color .6s var(--mk-ease) .45s }
.mk-refuse li.in{ text-decoration-color:var(--mk-threat) }

/* ---------- Transition de page : le coup de faisceau ---------- */
#mk-curtain{ position:fixed; inset:0; z-index:9999; pointer-events:none; visibility:hidden }
#mk-curtain::before{ content:""; position:absolute; inset:0; background:var(--mk-ink); transform:translateX(-101%) }
#mk-curtain i{ position:absolute; top:0; bottom:0; width:3px; left:0; background:var(--mk-amber);
  box-shadow:0 0 40px 10px rgba(255,181,71,.55), 0 0 120px 30px rgba(255,181,71,.25); transform:translateX(-10px) }
#mk-curtain.go-in, #mk-curtain.go-out{ visibility:visible; pointer-events:all }
#mk-curtain.go-in::before{ animation:mk-cur-in .42s cubic-bezier(.7,0,.3,1) forwards }
#mk-curtain.go-in i{ animation:mk-beam-in .42s cubic-bezier(.7,0,.3,1) forwards }
#mk-curtain.go-out::before{ transform:none; animation:mk-cur-out .6s cubic-bezier(.7,0,.3,1) forwards }
#mk-curtain.go-out i{ transform:translateX(0); animation:mk-beam-out .6s cubic-bezier(.7,0,.3,1) forwards }
@keyframes mk-cur-in{ from{ transform:translateX(-101%) } to{ transform:none } }
@keyframes mk-beam-in{ from{ transform:translateX(-10px) } to{ transform:translateX(100vw) } }
@keyframes mk-cur-out{ from{ transform:none } to{ transform:translateX(101%) } }
@keyframes mk-beam-out{ from{ transform:translateX(0) } to{ transform:translateX(100vw) } }

/* ---------- Responsive ---------- */
@media (max-width:980px){
  .mk-wrap{ padding:0 22px }
  .mk-hero, .mk-hero-sub{ padding:72px 22px 56px }
  .mk-section{ padding:84px 0 }
  .mk-board{ padding:26px 20px 24px }
  .mk-track{ grid-template-columns:repeat(2,1fr); row-gap:22px }
  .mk-track-line{ display:none }
  .mk-trio{ grid-template-columns:1fr; gap:38px }
  .mk-trio article{ border-right:0; margin-right:0; padding:0 0 0 0 }
  .mk-story{ grid-template-columns:1fr; gap:0; padding:0 22px 60px 46px }
  .mk-story-rail{ left:22px }
  .mk-story-stage{ order:-1; position:sticky; top:62px; z-index:2; height:42vh; margin:0 0 10px }
  .mk-stage-frame{ position:relative; top:0; height:100%; min-height:280px }
  /* le texte de l'étape s'affiche sous la scène fixe, jamais derrière */
  .mk-step{ min-height:88vh; justify-content:flex-end; padding:0 0 5vh }
  .mk-pin-1{ right:8px; top:-14px } .mk-pin-2{ left:8px; top:112px } .mk-pin-3{ right:8px; bottom:-14px }
  .mk-pin::before{ display:none }
  .mk-scene{ padding:20px; transform:scale(.86) }
  .mk-scene.active{ transform:scale(.86) }
  .mk-pipe{ grid-template-columns:1fr; gap:30px; padding-left:40px }
  .mk-pipe::before{ left:15px; right:auto; top:0; bottom:0; width:2px; height:auto }
  .mk-pipe-line{ display:none }
  .mk-station{ padding-top:0 } .mk-st-dot{ left:-36px; top:2px }
  .mk-principles{ grid-template-columns:1fr }
  .mk-cmp{ padding:30px 26px } .mk-cmp ul{ font-size:15px }
  .mk-compare{ min-height:440px }
  .mk-ctrl{ grid-template-columns:1fr; gap:8px }
}
@media (max-width:560px){
  .mk-switch{ display:grid; width:100% } .mk-switch button{ padding:13px 10px; font-size:14px }
  .mk-btn{ width:100% } .mk-actions{ flex-direction:column }
  .mk-pin{ display:none }
  .mk-stage-frame{ min-height:260px }
}
@media (prefers-reduced-motion:reduce){
  [data-split] .w > span, [data-reveal], .mk-step, .mk-scene, .mk-station, .mk-ico path, .mk-refuse li::after{ transition:none !important; transform:none !important; filter:none !important }
  [data-reveal], .mk-step, .mk-station{ opacity:1 !important }
  .mk-mq-track, .mk-live, .mk-scrollcue span::after, .mk-type::after{ animation:none !important }
  #mk-lantern, #mk-field{ display:none }
}