/* BRAINROT-DETOX : charte "zombie cartoon"
   Couleurs tirées des personnages : peau de zombie vert-gris, blanc d'œil crème, contour aubergine,
   rose cervelle, menthe des cellules saines, jaune des dents, bouche bordeaux.
   Formes : gros contours, coins irréguliers, ombres décalées comme dans une BD. */
:root{
  --box:#F4F0DC;        /* blanc d'œil */
  --paper:#FFFDF2;
  --ink:#2B2433;        /* contour */
  --ink-soft:#5F5867;
  --rule:#D9D2B6;
  --skin:#9DB08A;       /* peau de zombie */
  --skin-dark:#748A68;
  --pill:#FF7393;       /* rose cervelle */
  --mint:#2CC9A0;       /* cellule saine */
  --warn:#F1D663;       /* dents */
  --mouth:#3A2626;
  --on-accent:#2B2433;
  --line:#2B2433;       /* contour BD, identique dans les deux thèmes */
  --display:"Lilita One", "Arial Rounded MT Bold", "Arial Black", sans-serif;
  --body:"Nunito", "Segoe UI", Arial, sans-serif;
  --mono:"IBM Plex Mono", ui-monospace, Menlo, monospace;
  --rot:#9DB08A;
  --cell-bg:#E9E4CB;
  --radius:18px 24px 16px 22px;
  color-scheme:light;
}
@media (prefers-color-scheme: dark){
  :root{
    --box:#1C2119;--paper:#262C21;--ink:#F1EDD8;--ink-soft:#B9B7A4;--rule:#3C4434;
    --skin:#A6B993;--skin-dark:#7F956F;--pill:#FF8AA6;--mint:#3EDDB3;
    --cell-bg:#141811;--line:#E9E4CB;color-scheme:dark;
  }
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--box);color:var(--ink);font-family:var(--body);font-size:1.0625rem;line-height:1.6;-webkit-font-smoothing:antialiased}
img,svg{max-width:100%}
.wrap{max-width:72rem;margin:0 auto;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
h1,h2,h3{font-family:var(--display);font-weight:400;line-height:1.02;text-wrap:balance;margin:0;letter-spacing:.005em}
p{margin:0}
a{color:inherit}
:focus-visible{outline:3px solid var(--pill);outline-offset:3px}
.label{font-family:var(--mono);font-size:.75rem;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-soft)}
.skip{position:absolute;left:-999px}
.skip:focus{left:16px;top:16px;background:var(--paper);padding:8px;z-index:99}

/* Bandeau d'avertissement : ruban de quarantaine */
.warning{background:repeating-linear-gradient(-45deg,var(--warn) 0 22px,#E4C64E 22px 44px);color:var(--on-accent);font-family:var(--mono);font-weight:500;font-size:.78rem;padding-block:7px;text-align:center;border-bottom:1.5px solid var(--line)}

/* En-tête */
header{position:sticky;top:0;z-index:20;background:var(--box);border-bottom:1.5px solid var(--line)}
.nav{display:flex;align-items:center;justify-content:space-between;gap:12px 24px;padding-block:10px;flex-wrap:wrap}
.logo{display:flex;align-items:center;gap:10px;text-decoration:none;font-family:var(--display);font-size:1.35rem;letter-spacing:.01em}
.logo img{width:44px;height:44px;flex:none;transition:transform .2s}
.logo:hover img{transform:rotate(-12deg)}
.logo sup{font-size:.55em;color:var(--pill)}
.nav ul{display:flex;gap:6px 20px;list-style:none;margin:0;padding:0;flex-wrap:wrap;font-weight:800;font-size:.95rem}
.nav ul a{text-decoration:none;padding-block:4px}
.nav ul a:hover{box-shadow:inset 0 -5px 0 var(--skin)}
.lang{font-family:var(--mono);font-size:.78rem;text-decoration:none;border:1.5px solid var(--line);background:var(--paper);padding:3px 10px;border-radius:999px;font-weight:500;box-shadow:3px 3px 0 var(--line)}
.lang:hover{background:var(--skin);color:var(--on-accent)}

/* Hero */
.hero{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:48px;align-items:center;padding-block:56px 64px}
.hero h1{font-size:clamp(2.6rem,6.4vw,5rem);margin-top:16px;color:var(--ink)}
.hero h1 em{font-style:normal;color:var(--on-accent);background:var(--skin);padding:0 .14em;border:1.5px solid var(--line);border-radius:12px 18px 10px 16px;box-shadow:3px 3px 0 var(--line);box-decoration-break:clone;-webkit-box-decoration-break:clone;display:inline-block;transform:rotate(-2deg)}
.lede{margin-top:22px;font-size:1.2rem;max-width:36rem;color:var(--ink-soft)}
.cta{display:flex;gap:14px;margin-top:30px;flex-wrap:wrap}
.btn{display:inline-flex;align-items:center;gap:8px;font-family:var(--display);font-size:1.15rem;letter-spacing:.02em;padding:12px 24px;border:1.5px solid var(--line);background:var(--pill);color:var(--on-accent);text-decoration:none;border-radius:999px;cursor:pointer;box-shadow:3px 3px 0 var(--line);transition:transform .15s,box-shadow .15s}
.btn:hover{transform:translate(-2px,-2px) rotate(-1.5deg);box-shadow:3px 3px 0 var(--line)}
.btn:active{transform:translate(2px,2px);box-shadow:1px 1px 0 var(--line)}
.btn.ghost{background:var(--paper);color:var(--on-accent)}

/* Illustration principale */
.mascot{position:relative;max-width:420px;margin-inline:auto;width:100%}
.mascot svg{display:block;width:100%;height:auto;overflow:visible}
.mascot .head-group{transform-origin:160px 250px;animation:sway 3.2s ease-in-out infinite}
@keyframes sway{0%,100%{transform:rotate(-3deg)}50%{transform:rotate(3deg)}}
.bubble{position:absolute;top:-1%;right:-4%;background:var(--paper);color:var(--ink);border:1.5px solid var(--line);border-radius:22px 26px 20px 24px;padding:10px 16px;font-family:var(--display);font-size:clamp(1.1rem,2.4vw,1.45rem);box-shadow:3px 3px 0 var(--line);transform:rotate(-5deg);max-width:50%}
.bubble::after{content:"";position:absolute;left:18%;bottom:-17px;width:22px;height:22px;background:var(--paper);border-right:1.5px solid var(--line);border-bottom:1.5px solid var(--line);transform:skewX(25deg) rotate(45deg)}
.bubble s{text-decoration-color:var(--pill);text-decoration-thickness:3px;color:var(--ink-soft)}
.bracelet{position:absolute;left:50%;bottom:-2%;translate:-50% 0;background:var(--paper);color:var(--ink);border:1.5px solid var(--line);border-radius:10px;padding:6px 12px;font-family:var(--mono);font-size:.72rem;line-height:1.35;box-shadow:3px 3px 0 var(--line);transform:rotate(4deg)}
.bracelet b{display:block;font-family:var(--display);font-weight:400;font-size:1rem;color:var(--pill);letter-spacing:.02em}

/* Sections */
section{padding-block:72px;scroll-margin-top:80px}
.head{display:grid;grid-template-columns:auto 1fr;gap:6px 18px;align-items:end;margin-bottom:40px}
.head .num{grid-row:span 2;align-self:start;display:grid;place-items:center;width:52px;height:52px;border:1.5px solid var(--line);border-radius:50% 46% 52% 44%;background:var(--skin);color:var(--on-accent);font-family:var(--display);font-size:1.1rem;box-shadow:3px 3px 0 var(--line);transform:rotate(-6deg)}
.head h2{font-size:clamp(2rem,4.4vw,3.2rem)}
.head p{color:var(--ink-soft);max-width:40rem}

/* Cartes BD */
.pole,.box,.q,form,.steps li{background:var(--paper);border:1.5px solid var(--line);border-radius:var(--radius);box-shadow:3px 3px 0 var(--line)}

/* Indications */
.poles{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:32px}
.pole{padding:26px}
.pole:nth-child(2){transform:rotate(.6deg)}
.pole:first-child{transform:rotate(-.6deg)}
.pole h3{font-size:1.75rem;margin:12px 0 10px}
.pole p{color:var(--ink-soft)}
.pole ul{margin:18px 0 0;padding:0;list-style:none}
.pole li{display:flex;gap:12px;padding:10px 0;border-top:2px dashed var(--rule)}
.pole li::before{content:"";flex:none;width:14px;height:14px;margin-top:5px;border-radius:50%;border:1.5px solid var(--line);background:var(--dot,var(--pill))}
.pole.mint{--dot:var(--mint)}
.tag{display:inline-block;font-family:var(--mono);font-size:.72rem;letter-spacing:.06em;text-transform:uppercase;padding:3px 10px;border-radius:999px;border:1.5px solid var(--line);background:var(--pill);color:var(--on-accent)}
.pole.mint .tag{background:var(--mint)}

/* Posologie : bandeau couleur peau de zombie */
.dosage{background:var(--skin);color:var(--on-accent);border-block:1.5px solid var(--line)}
.dosage .head p{color:var(--on-accent);opacity:.8}
.dosage .head .num{background:var(--paper)}
.steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px}
.steps li{padding:20px;background:#FFFDF2;color:#2B2433;border-color:#2B2433;box-shadow:4px 4px 0 #2B2433}
.steps li:nth-child(odd){transform:rotate(-1deg)}
.steps li:nth-child(even){transform:rotate(1deg)}
.steps .when{font-family:var(--mono);font-size:.75rem;letter-spacing:.06em;text-transform:uppercase;color:#5F5867}
.steps h3{font-size:1.5rem;margin:6px 0 8px}
.steps p{font-size:.98rem}

/* Effets indésirables + contre-indications */
.leaflet{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:32px}
.box{padding:26px}
.box h3{font-size:1.5rem;margin-bottom:14px}
.effects{list-style:none;margin:0;padding:0}
.effects li{display:grid;grid-template-columns:7.5rem 1fr;gap:14px;padding:10px 0;border-top:2px dashed var(--rule)}
.effects .freq{font-family:var(--mono);font-size:.75rem;color:var(--ink-soft);padding-top:3px}
.box.contra{background:var(--warn);color:#2B2433;border-color:#2B2433;transform:rotate(1.2deg)}
.box.contra p+p{margin-top:12px}

/* Quiz */
.quiz{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.q{padding:22px;display:flex;flex-direction:column;gap:14px;transition:transform .2s,box-shadow .2s,background .2s}
.q blockquote{margin:0;font-family:var(--display);font-size:1.35rem;line-height:1.15;flex:1}
.q .choices{display:flex;gap:10px}
.q button{flex:1;font-family:var(--display);font-size:1.05rem;padding:8px;border:1.5px solid var(--line);border-radius:999px;background:var(--box);color:var(--ink);cursor:pointer;box-shadow:3px 3px 0 var(--line)}
.q button:hover{background:var(--skin);color:var(--on-accent)}
.q .answer{font-size:.95rem;min-height:3em;color:var(--ink-soft)}
.q .answer strong{color:var(--ink)}
.q.right{background:color-mix(in srgb,var(--mint) 22%,var(--paper));transform:rotate(-1deg)}
.q.wrong{background:color-mix(in srgb,var(--pill) 22%,var(--paper));transform:rotate(1deg)}

/* Contact */
.contact{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);gap:48px}
.contact .intro p{color:var(--ink-soft);margin-top:14px;max-width:30rem}
form{display:grid;gap:16px;padding:26px}
.row{display:grid;grid-template-columns:1fr 1fr;gap:16px}
label{display:grid;gap:6px;font-family:var(--mono);font-size:.75rem;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-soft)}
input,textarea,select{font:inherit;font-family:var(--body);font-size:1rem;text-transform:none;letter-spacing:0;color:var(--ink);background:var(--box);border:1.5px solid var(--rule);padding:11px 12px;border-radius:12px;width:100%}
input:focus,textarea:focus,select:focus{border-color:var(--line);outline:none;box-shadow:3px 3px 0 var(--skin)}
textarea{min-height:130px;resize:vertical}
.hp{display:none}
.fine{font-size:.85rem;color:var(--ink-soft)}

/* Pages simples */
.page{padding-block:56px 80px;max-width:46rem}
.page h1{font-size:clamp(2.2rem,5vw,3.4rem);margin-bottom:24px}
.page h2{font-size:1.45rem;margin:32px 0 10px}
.page p+p{margin-top:10px}
.todo{background:var(--warn);color:#2B2433;padding:0 4px;border-radius:4px}

footer{border-top:1.5px solid var(--line);padding-block:28px 36px;font-size:.92rem;color:var(--ink-soft)}
footer .wrap{display:flex;justify-content:space-between;gap:12px 24px;flex-wrap:wrap}
footer nav{display:flex;gap:16px;flex-wrap:wrap}
footer .disclaimer{flex-basis:100%;font-family:var(--mono);font-size:.75rem}

/* Épidémie de cellules zombies (canvas) */
.outbreak{padding-block:0;border-block:1.5px solid var(--line);background:var(--cell-bg)}
.outbreak .bar{display:flex;justify-content:space-between;align-items:baseline;gap:6px 20px;flex-wrap:wrap;padding-block:14px}
.outbreak .phase{font-family:var(--display);font-size:1.35rem}
.outbreak .stats{font-family:var(--mono);font-size:.8rem;color:var(--ink-soft);font-variant-numeric:tabular-nums}
.outbreak canvas{display:block;width:100%;height:236px;border-top:2px dashed var(--rule)}
.legend{display:flex;gap:16px;font-family:var(--mono);font-size:.75rem;color:var(--ink-soft)}
.legend span::before{content:"";display:inline-block;width:12px;height:12px;border-radius:50%;margin-right:6px;vertical-align:-1px;background:var(--mint);box-shadow:inset 0 0 0 1px #2B2433}
.legend span.z::before{background:var(--rot)}

@media (max-width:900px){
  .hero,.poles,.leaflet,.contact{grid-template-columns:1fr}
  .steps{grid-template-columns:repeat(2,minmax(0,1fr))}
  .quiz{grid-template-columns:1fr}
  .hero{padding-block:40px 56px}
  .mascot{max-width:340px}
  section{padding-block:56px}
}
@media (max-width:560px){
  .steps,.row{grid-template-columns:1fr}
  .effects li{grid-template-columns:1fr;gap:2px}
  .nav ul{gap:4px 14px;font-size:.9rem}
  .head{grid-template-columns:1fr}
  .head .num{grid-row:auto}
  .outbreak canvas{height:196px}
  .bubble{right:0}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .btn,.q,.logo img{transition:none}
  .mascot .head-group{animation:none}
}

/* Dézombification de la mascotte : data-stage 0 (zombie) → 3 (guéri, bonnet de Marianne, drapeaux) */
.mascot svg *{transition:fill 1.4s ease,stroke 1.4s ease,opacity .9s ease,transform 1s cubic-bezier(.3,1.4,.5,1)}
.mascot .pupil-l,.mascot .pupil-r,.mascot .lid,.mascot .cap,.mascot .flags,.mascot .flag{transform-box:fill-box}
.mascot .mouth-smile,.mascot .blush{opacity:0}
.mascot .cap{opacity:0;transform:translateY(-140px) rotate(-20deg);transform-origin:50% 100%}
.mascot .flags{opacity:0;transform:translateY(60px);transform-origin:50% 100%}
.mascot[data-stage="1"] .skin,.mascot[data-stage="1"] .lid{fill:#A8BB90}
.mascot[data-stage="1"] .skin-s{stroke:#A8BB90}
.mascot[data-stage="2"] .skin,.mascot[data-stage="3"] .skin,.mascot[data-stage="2"] .lid,.mascot[data-stage="3"] .lid{fill:#B8CA9C}
.mascot[data-stage="2"] .skin-s,.mascot[data-stage="3"] .skin-s{stroke:#B8CA9C}
.mascot:not([data-stage="0"]) .veins,.mascot:not([data-stage="0"]) .drool{opacity:0}
.mascot:not([data-stage="0"]) .lid{transform:translateY(-6px) scaleY(.6)}
.mascot[data-stage="2"] .rot,.mascot[data-stage="3"] .rot{opacity:.35}
.mascot[data-stage="2"] .pupil-l,.mascot[data-stage="3"] .pupil-l{transform:translate(13px,-12px)}
.mascot[data-stage="2"] .pupil-r,.mascot[data-stage="3"] .pupil-r{transform:translate(-12px,-6px)}
.mascot[data-stage="2"] .lid,.mascot[data-stage="3"] .lid{opacity:0}
.mascot[data-stage="2"] .mouth-zombie,.mascot[data-stage="3"] .mouth-zombie{opacity:0}
.mascot[data-stage="2"] .mouth-smile,.mascot[data-stage="3"] .mouth-smile{opacity:1}
.mascot[data-stage="2"] .blush,.mascot[data-stage="3"] .blush{opacity:.5}
.mascot[data-stage="3"] .cap{opacity:1;transform:none}
.mascot[data-stage="3"] .flags{opacity:1;transform:none}
.mascot[data-stage="3"] .flag{animation:wave 1.6s ease-in-out infinite alternate}
.mascot .flag-fr{transform-origin:0 50%}
.mascot .flag-eu{transform-origin:100% 50%;animation-delay:.4s}
@keyframes wave{from{transform:skewY(-4deg) scaleX(.96)}to{transform:skewY(4deg) scaleX(1)}}
.bubble{transition:transform .3s}
.bubble.pop{animation:pop .45s cubic-bezier(.3,1.6,.5,1)}
@keyframes pop{from{transform:rotate(-5deg) scale(.6)}to{transform:rotate(-5deg) scale(1)}}
.bracelet b{transition:color .6s}
.mascot[data-stage="3"] .bracelet b{color:var(--mint)}
@media (prefers-reduced-motion:reduce){.mascot svg *{transition:none}.mascot[data-stage="3"] .flag{animation:none}.bubble.pop{animation:none}}

/* Trousse de secours anti-ingérence */
.tools{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.tool{background:var(--paper);border:1.5px solid var(--line);border-radius:var(--radius);box-shadow:3px 3px 0 var(--line);padding:22px;display:flex;flex-direction:column;gap:10px}
.tool:nth-child(3n+1){transform:rotate(-.8deg)}
.tool:nth-child(3n){transform:rotate(.8deg)}
.tool h3{font-size:1.5rem}
.tool p{color:var(--ink-soft);flex:1;font-size:1rem}
.tool a{font-family:var(--mono);font-size:.82rem;font-weight:500;text-decoration-color:var(--pill);text-decoration-thickness:2px;text-underline-offset:3px;overflow-wrap:anywhere}
.tool .tag{align-self:flex-start;background:var(--skin)}
@media (max-width:900px){.tools{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.tools{grid-template-columns:1fr}.bracelet{font-size:.62rem;bottom:-8%}}

/* Missions : 4 remèdes */
.pole.skin{--dot:var(--skin)}
.pole.skin .tag{background:var(--skin)}
.pole.warn{--dot:var(--warn)}
.pole.warn .tag{background:var(--warn);color:#2B2433}
.pole:nth-child(3){transform:rotate(.5deg)}
.pole:nth-child(4){transform:rotate(-.5deg)}

/* Encarts Ressources / MOOC sur l'accueil */
.promos{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:32px}
.promo{background:var(--paper);border:1.5px solid var(--line);border-radius:var(--radius);box-shadow:3px 3px 0 var(--line);padding:26px;display:flex;flex-direction:column;gap:12px;align-items:flex-start}
.promo h3{font-size:1.9rem}
.promo p{color:var(--ink-soft)}
.promo.mint{background:color-mix(in srgb,var(--mint) 18%,var(--paper));transform:rotate(.6deg)}
.promo.mint .tag{background:var(--mint)}

/* Pages Ressources et MOOC */
.page-hero{padding-block:56px 16px}
.page-hero h1{font-size:clamp(2.6rem,6vw,4.4rem);margin-top:12px}
.chips{display:flex;flex-wrap:wrap;gap:10px;margin-top:26px}
.chip{font-weight:800;text-decoration:none;border:1.5px solid var(--line);border-radius:999px;padding:6px 14px;background:var(--paper);box-shadow:3px 3px 0 var(--line);font-size:.92rem}
.chip:hover{background:var(--skin);color:#2B2433}
.tool .meta{font-family:var(--mono);font-size:.74rem;color:var(--ink-soft);flex:0}
.modules{grid-template-columns:repeat(4,minmax(0,1fr))}
@media (max-width:900px){.promos{grid-template-columns:1fr}}

/* Accueil : réseau de neurones vu au microscope ; des têtes de zombie remplacent les neurotransmetteurs */
.neurons{position:relative;max-width:500px;margin:0 auto;width:100%}
.neurons svg{display:block;width:100%;height:auto;overflow:visible}
.neurons .lens-bg{fill:var(--paper)}
.neurons .lens-rim{fill:none;stroke:var(--line);stroke-width:1.5}
.neurons .lens-rim2{fill:none;stroke:var(--line);stroke-width:1;stroke-dasharray:2 6;opacity:.5}
.neurons .ghost{fill:none;stroke:var(--line);stroke-width:1;opacity:.16}
.neurons .axon{fill:none;stroke:var(--line);stroke-width:1.6}
.neurons .twig{fill:none;stroke:var(--line);stroke-width:1.3;stroke-linecap:round}
.neurons .myelin-o,.neurons .myelin{fill:none;stroke-linecap:round;stroke-linejoin:round}
.neurons .myelin-o{stroke:var(--line);stroke-width:8}
.neurons .myelin{stroke:var(--warn);stroke-width:5}
.neurons .sil-o use{fill:var(--line);stroke:var(--line);stroke-width:3;stroke-linejoin:round}
.neurons .thin{fill:none;stroke:var(--line);stroke-width:1.1;stroke-linecap:round}
.neurons .boutons circle{fill:var(--pill);stroke:var(--line);stroke-width:1.4}
.neurons .cup{fill:none;stroke:var(--line);stroke-width:1.6;stroke-linecap:round}
.neurons .soma{transform-box:view-box;transition:transform .4s cubic-bezier(.3,1.6,.5,1)}
.neurons .soma .body{fill:var(--mint);transition:fill .6s}
.neurons .soma .shine{fill:none;stroke:var(--paper);stroke-width:2.2;stroke-linecap:round;opacity:.55}
.neurons .soma .nucleus{fill:var(--paper);stroke:var(--line);stroke-width:1.3}
.neurons .soma .nucleolus{fill:var(--line)}

.neurons .soma.fire .body{fill:var(--skin)}
.neurons .nr-fx circle{fill:none;stroke:var(--pill);stroke-width:1.5}
.neurons .scale path{fill:none;stroke:var(--line);stroke-width:1.3}
.neurons .scale text{font-family:var(--mono);font-size:11px;fill:var(--ink-soft)}
.neurons .bracelet{left:-3%;right:auto;bottom:-3%;translate:none}
@media (max-width:900px){.neurons{max-width:380px}}
@media (prefers-reduced-motion:reduce){.neurons .soma,.neurons .soma .body{transition:none}}