/* Espace de cours « Construire sa structure IA avec Claude » · direction artistique : site-src/design.md */
@font-face{font-family:"Montserrat";font-weight:400;font-display:swap;src:url(fonts/montserrat-latin-400.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Montserrat";font-weight:400;font-display:swap;src:url(fonts/montserrat-latin-ext-400.woff2) format("woff2");unicode-range:U+0100-02AF,U+0304,U+0308,U+0329,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Montserrat";font-weight:500;font-display:swap;src:url(fonts/montserrat-latin-500.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Montserrat";font-weight:500;font-display:swap;src:url(fonts/montserrat-latin-ext-500.woff2) format("woff2");unicode-range:U+0100-02AF,U+0304,U+0308,U+0329,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Montserrat";font-weight:600;font-display:swap;src:url(fonts/montserrat-latin-600.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Montserrat";font-weight:600;font-display:swap;src:url(fonts/montserrat-latin-ext-600.woff2) format("woff2");unicode-range:U+0100-02AF,U+0304,U+0308,U+0329,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Montserrat";font-weight:700;font-display:swap;src:url(fonts/montserrat-latin-700.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Montserrat";font-weight:700;font-display:swap;src:url(fonts/montserrat-latin-ext-700.woff2) format("woff2");unicode-range:U+0100-02AF,U+0304,U+0308,U+0329,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Cormorant";font-style:italic;font-weight:500;font-display:swap;src:url(fonts/cormorant-latin-500-italic.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Cormorant";font-style:italic;font-weight:500;font-display:swap;src:url(fonts/cormorant-latin-ext-500-italic.woff2) format("woff2");unicode-range:U+0100-02AF,U+0304,U+0308,U+0329,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Cormorant";font-style:italic;font-weight:600;font-display:swap;src:url(fonts/cormorant-latin-600-italic.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Cormorant";font-style:italic;font-weight:600;font-display:swap;src:url(fonts/cormorant-latin-ext-600-italic.woff2) format("woff2");unicode-range:U+0100-02AF,U+0304,U+0308,U+0329,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}

:root{
  --navy:#0E1E3F;--navy-soft:#1D3057;--navy-line:#2A3D66;
  --gold:#C9A24A;--gold-soft:#E9D9AE;--gold-ink:#8A6A20;
  --paper:#FBF9F2;--card:#FFFFFF;--tint:#F4EFE2;
  --ink:#2E3744;--ink-soft:#4A5563;--mute:#6B7280;--line:#E6E1D3;
  --ok:#2F6B4F;--ok-bg:#EDF4EF;--ko:#A23B2A;--ko-bg:#F8ECE9;
  --serif:"Cormorant","Cormorant Garamond",Georgia,serif;
  --sans:"Montserrat","Segoe UI",-apple-system,Arial,sans-serif;
  --mono:"SF Mono",Menlo,Consolas,monospace;
  --side:300px;--read:720px;--r:10px;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font:400 16px/1.65 var(--sans);-webkit-font-smoothing:antialiased}
img{max-width:100%}
a{color:var(--navy)}
:focus-visible{outline:2px solid var(--gold);outline-offset:3px;border-radius:4px}
.skip{position:absolute;left:-999px;top:8px;background:var(--navy);color:#fff;padding:8px 14px;border-radius:6px;z-index:20}
.skip:focus{left:8px}
.ico{display:inline-flex;width:20px;height:20px;flex:none}
.ico svg{width:100%;height:100%}
.kicker{font:600 11px/1.4 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--gold-ink);margin:0 0 8px}

/* ─── structure ─── */
.topbar{display:none}
.layout{display:grid;grid-template-columns:var(--side) minmax(0,1fr);min-height:100vh}
.sidebar{position:sticky;top:0;height:100vh;overflow-y:auto;background:var(--card);border-right:1px solid var(--line);padding:28px 18px 24px;display:flex;flex-direction:column}
main{padding:56px clamp(24px,5vw,72px) 96px}
main:focus,main:focus-visible{outline:none}
.page{max-width:var(--read);margin:0 auto}
.page-accueil{max-width:1000px}

/* ─── barre latérale ─── */
.brand{display:flex;align-items:center;gap:10px;text-decoration:none}
.brand img{height:28px;width:auto}
.wordmark{font:700 17px/1 var(--sans);color:var(--navy);letter-spacing:-.01em}
.wordmark i{font-style:normal;color:var(--gold)}
.side-head{padding:0 8px 20px;border-bottom:1px solid var(--line);margin-bottom:16px}
.side-home{display:flex;align-items:center;gap:10px;padding:10px;border-radius:8px;text-decoration:none;color:var(--navy);font-weight:600;font-size:14px}
.side-home em,.side-mods em{margin-left:auto;font:500 12px/1 var(--sans);color:var(--mute);font-style:normal}
.side-home:hover,.side-mods a:hover{background:var(--tint)}
.side-home.is-active{background:var(--tint)}
.side-home .ico{color:var(--gold-ink)}
.side-label{font:600 11px/1 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--mute);margin:22px 10px 8px}
.side-mods,.side-steps{list-style:none;margin:0;padding:0}
.side-mods>li>a{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:8px;text-decoration:none;color:var(--ink);font-size:14px;line-height:1.35}
.side-mods>li.is-open>a{color:var(--navy);font-weight:600}
.side-mods a[aria-current]{background:var(--tint)}
.side-num{display:inline-grid;place-items:center;width:24px;height:24px;border-radius:50%;border:1px solid var(--line);font:600 12px/1 var(--sans);color:var(--ink-soft);flex:none;background:var(--card)}
.side-num.is-done{background:var(--navy);border-color:var(--navy);color:var(--gold)}
.side-num .ico{width:14px;height:14px}
.side-steps{margin:2px 0 8px 22px;border-left:1px solid var(--line);padding-left:10px}
.side-steps a{display:flex;align-items:center;gap:9px;padding:5px 8px;border-radius:6px;text-decoration:none;color:var(--ink-soft);font-size:13px}
.side-steps a:hover{color:var(--navy);background:var(--tint)}
.side-steps a[aria-current]{color:var(--navy);font-weight:600;background:var(--tint)}
.dot{width:8px;height:8px;border-radius:50%;border:1.5px solid var(--mute);flex:none}
.side-steps a.is-done .dot{background:var(--gold);border-color:var(--gold)}
.side-foot{margin-top:auto;padding:20px 10px 0;border-top:1px solid var(--line)}
.side-foot a{display:flex;align-items:center;gap:10px;padding:7px 0;color:var(--navy);text-decoration:none;font-size:14px;font-weight:500}
.side-foot a:hover{color:var(--gold-ink)}
.side-foot a[aria-current]{font-weight:700}
.side-foot .ico{width:18px;height:18px;color:var(--gold-ink)}
.side-foot p{font-size:12px;line-height:1.5;color:var(--mute);margin:12px 0 0}

/* ─── boutons ─── */
.btn{display:inline-flex;align-items:center;gap:10px;font:600 15px/1 var(--sans);padding:15px 22px;border-radius:999px;border:1px solid transparent;cursor:pointer;text-decoration:none;transition:background-color .12s,border-color .12s,color .12s}
.btn .ico{width:18px;height:18px}
.btn-primary{background:var(--navy);color:#fff}
.btn-primary:hover{background:var(--navy-soft)}
.btn-primary .ico{color:var(--gold)}
.btn-ghost{background:transparent;color:var(--navy);border-color:var(--line)}
.btn-ghost:hover{border-color:var(--gold);background:var(--card)}
.btn-ghost.is-danger{color:var(--ko);border-color:var(--ko)}
.row{display:flex;flex-wrap:wrap;gap:12px;margin-top:24px}

/* ─── accueil ─── */
.hero{padding:0 0 40px}
.hero h1,.page-head h1{font:500 italic clamp(40px,5.4vw,64px)/1.02 var(--serif);color:var(--navy);letter-spacing:-.01em;margin:0 0 32px;max-width:21ch}
.resume{display:flex;align-items:center;justify-content:space-between;gap:24px;background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:22px 24px}
.resume .kicker{margin-bottom:6px}
.resume-m{font:700 18px/1.3 var(--sans);color:var(--navy);margin:0}
.resume-s{margin:4px 0 0;color:var(--ink-soft);font-size:15px}
.resume .btn{flex:none}
.bureau{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:40px;background:var(--navy);color:#E8EBF2;border-radius:14px;padding:40px;margin:0 0 56px}
.bureau .kicker{color:var(--gold)}
.bureau-phrase{font:500 italic clamp(28px,3vw,36px)/1.15 var(--serif);color:#fff;margin:4px 0 20px}
.bureau-count{font-size:14px;color:#C5CCDA;margin:0 0 14px}
.bureau-count b{font:600 italic 30px/1 var(--serif);color:var(--gold);margin-right:4px;font-variant-numeric:lining-nums}
.bureau-help{font-size:14px;line-height:1.6;color:#AEB7C9;margin:0;max-width:44ch}
.parcours h2,.h-sec{font:500 italic 34px/1.1 var(--serif);color:var(--navy);margin:0 0 20px}
.h-sec{font-size:28px;margin:48px 0 16px}
.mod-list{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.mod-row{display:grid;grid-template-columns:64px minmax(0,1fr) 200px;align-items:center;gap:20px;padding:18px 8px;border-bottom:1px solid var(--line);text-decoration:none;color:inherit;transition:background-color .12s}
.mod-row:hover{background:var(--card)}
.mod-num{font:500 italic 44px/1 var(--serif);color:var(--gold-ink);text-align:center;font-variant-numeric:lining-nums}
.mod-t{display:block;font:600 17px/1.3 var(--sans);color:var(--navy)}
.mod-o{display:flex;align-items:center;gap:8px;margin-top:4px;font-size:14px;color:var(--ink-soft)}
.mod-o .ico{width:16px;height:16px;color:var(--gold-ink)}
.mod-st{display:flex;flex-direction:column;gap:8px;font-size:13px;color:var(--mute)}
.mod-row.is-done .mod-st{color:var(--ok);font-weight:600}
.bar{display:block;height:4px;background:var(--line);border-radius:4px;overflow:hidden}
.bar span{display:block;height:100%;background:var(--gold);transition:width .2s}
.mod-row.is-done .bar span{background:var(--ok)}

/* ─── en-têtes de page ─── */
.crumbs{display:flex;flex-wrap:wrap;gap:8px;font-size:13px;color:var(--mute);margin:0 0 28px}
.crumbs a{color:var(--ink-soft);text-decoration:none}
.crumbs a:hover{color:var(--navy);text-decoration:underline}
.crumbs .sep{color:var(--line)}
.page-head{margin:0 0 36px}
.page-head h1{font-size:clamp(36px,4.4vw,52px);margin:0 0 16px;max-width:none}
.page-head .btn{margin-top:8px}
.meta{font-size:14px;color:var(--mute);margin:0 0 8px}
.note{display:flex;gap:10px;align-items:flex-start;font-size:14px;line-height:1.55;color:var(--ink-soft);background:var(--tint);border-radius:8px;padding:12px 14px;margin:0}
.note .ico{width:18px;height:18px;color:var(--gold-ink);margin-top:1px}

/* ─── page module ─── */
.prize{display:flex;align-items:center;gap:18px;border:1px dashed var(--gold);border-radius:var(--r);padding:18px 20px;margin:0 0 28px;background:var(--card)}
.prize .ico-lg{width:40px;height:40px;color:var(--gold-ink)}
.prize .kicker{margin-bottom:2px;color:var(--mute)}
.prize-t{font:500 italic 28px/1.15 var(--serif);color:var(--navy);margin:0}
.prize.is-won{border-style:solid;background:var(--navy)}
.prize.is-won .ico-lg,.prize.is-won .kicker{color:var(--gold)}
.prize.is-won .prize-t{color:#fff}
.steps{list-style:none;margin:0 0 48px;padding:0;display:grid;gap:8px}
.step{display:flex;align-items:center;gap:16px;padding:14px 16px;background:var(--card);border:1px solid var(--line);border-radius:var(--r);text-decoration:none;color:inherit;transition:border-color .12s}
.step:hover{border-color:var(--gold)}
.step-dot{display:grid;place-items:center;width:26px;height:26px;border-radius:50%;border:1.5px solid var(--line);flex:none;color:#fff}
.step-dot .ico{width:15px;height:15px}
.step.is-done .step-dot{background:var(--navy);border-color:var(--navy);color:var(--gold)}
.step-body{display:flex;flex-direction:column;min-width:0}
.step-l{font:600 15px/1.35 var(--sans);color:var(--navy)}
.step-t{font-size:14px;color:var(--ink-soft);line-height:1.45}
.step-go{margin-left:auto;color:var(--mute)}
.step:hover .step-go{color:var(--gold-ink)}

/* ─── texte des leçons et fiches ─── */
.prose{font-size:17px;line-height:1.75;color:var(--ink)}
.prose>*:first-child{margin-top:0}
.prose p{margin:0 0 18px}
.prose h2{font:500 italic 32px/1.15 var(--serif);color:var(--navy);margin:48px 0 16px}
.prose h3{font:700 19px/1.35 var(--sans);color:var(--navy);margin:40px 0 12px}
.prose h4{font:700 16px/1.4 var(--sans);color:var(--navy);margin:28px 0 8px}
.prose strong{color:var(--navy);font-weight:700}
.prose ul,.prose ol{margin:0 0 18px;padding-left:24px}
.prose li{margin:6px 0}
.prose li::marker{color:var(--gold-ink)}
.prose hr{border:0;border-top:1px solid var(--line);margin:36px 0}
.prose code{font:500 .86em/1.4 var(--mono);background:var(--tint);color:var(--navy);padding:2px 6px;border-radius:4px;overflow-wrap:anywhere}
.prose pre{background:var(--card);border:1px solid var(--line);border-radius:8px;padding:16px 18px;overflow-x:auto;margin:0 0 20px}
.prose pre code{background:none;padding:0;font-size:14px;line-height:1.6;color:var(--ink);overflow-wrap:normal;white-space:pre-wrap}
.prose blockquote{margin:0 0 20px;padding:12px 18px;border-left:3px solid var(--gold);background:var(--card);border-radius:0 8px 8px 0}
.prose blockquote p:last-child{margin:0}
.table-wrap{overflow-x:auto;margin:0 0 24px;border:1px solid var(--line);border-radius:8px;background:var(--card)}
.prose table{border-collapse:collapse;width:100%;font-size:14.5px;line-height:1.5}
.prose th{text-align:left;font-weight:700;color:var(--navy);background:var(--tint);padding:10px 12px;border-bottom:1px solid var(--line)}
.prose td{padding:10px 12px;border-bottom:1px solid var(--line);vertical-align:top}
.prose tr:last-child td{border-bottom:0}
.prose .box{color:var(--navy)}
.prose .field{display:inline-block;min-width:120px;border-bottom:1px dotted var(--mute);color:transparent}
.prose .ecran{font-size:14px;line-height:1.55;color:var(--mute);font-style:italic;border-left:2px solid var(--gold-soft);padding:2px 0 2px 12px;margin:0 0 18px}
.prose .ecran b{font:600 10.5px/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;font-style:normal;color:var(--gold-ink);margin-right:4px}
figure.capture{margin:8px 0 28px}
figure.capture img{display:block;border:1px solid var(--line);border-radius:8px}
figure.capture figcaption{font-size:14px;line-height:1.5;color:var(--ink-soft);margin-top:10px}

/* ─── fin de page ─── */
.done-bar{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;margin:48px 0 0;padding:24px 0 0;border-top:1px solid var(--line)}
.done-ok{display:flex;align-items:center;gap:8px;margin:0;font-weight:600;color:var(--ok)}
.done-ok .ico{width:18px;height:18px}
.pager{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:32px}
.pager a{display:flex;align-items:center;gap:12px;padding:14px 16px;border:1px solid var(--line);border-radius:var(--r);text-decoration:none;color:var(--navy);font-weight:600;font-size:14px;line-height:1.35;transition:border-color .12s}
.pager a:hover{border-color:var(--gold)}
.pager small{display:block;font-weight:500;font-size:12px;color:var(--mute)}
.pager .ico{color:var(--gold-ink);width:18px;height:18px}
.pager-next{justify-content:flex-end;text-align:right;grid-column:2}

/* ─── exercice ─── */
.livrables{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:22px 22px 18px;margin:0 0 44px}
.livrables ul,.files ul{list-style:none;margin:0;padding:0}
.livrables>ul>li+li{border-top:1px solid var(--line)}
.check{display:flex;gap:14px;padding:12px 0;cursor:pointer;line-height:1.5}
.check input{position:absolute;opacity:0;width:1px;height:1px}
.check .box{display:grid;place-items:center;width:24px;height:24px;border:1.5px solid var(--mute);border-radius:6px;flex:none;margin-top:1px;color:transparent;background:var(--card)}
.check .box .ico{width:15px;height:15px}
.check input:checked+.box{background:var(--navy);border-color:var(--navy);color:var(--gold)}
.check input:focus-visible+.box{outline:2px solid var(--gold);outline-offset:2px}
.check b{display:block;color:var(--navy);font-weight:600}
.check small{display:block;font-size:14px;color:var(--ink-soft);margin-top:2px}
.check code{font:500 .9em var(--mono);background:var(--tint);padding:1px 5px;border-radius:4px}
.files{margin-top:16px;padding-top:16px;border-top:1px solid var(--line)}
.livrables .files .kicker{margin-bottom:6px}
.files a{display:flex;align-items:center;gap:10px;padding:7px 0;text-decoration:none;color:var(--navy);font-size:14px}
.files a:hover code,.files a:hover span{text-decoration:underline}
.files .ico{width:17px;height:17px;color:var(--gold-ink)}
.files code{font:500 13.5px/1.3 var(--mono)}
.files span{color:var(--ink-soft)}
.page-ressources>.files,.page-ressources .files:first-of-type{border-top:0;padding-top:0}

/* ─── quiz ─── */
.quiz-card{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:32px}
.quiz-intro p{font-size:17px;margin:0 0 16px}
.pips{list-style:none;display:flex;gap:6px;margin:0 0 24px;padding:0}
.pips li{flex:1;height:5px;border-radius:5px;background:var(--line)}
.pips li.is-cur{background:var(--gold-soft);box-shadow:inset 0 0 0 1px var(--gold)}
.pips li.is-ok{background:var(--ok)}
.pips li.is-ko{background:var(--ko)}
.q{font:600 20px/1.4 var(--sans);color:var(--navy);margin:0 0 22px}
.choices{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.choice{display:flex;gap:14px;align-items:flex-start;width:100%;text-align:left;font:400 16px/1.5 var(--sans);color:var(--ink);background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:14px 16px;cursor:pointer;transition:border-color .12s,background-color .12s}
.choice:hover:not(:disabled){border-color:var(--navy);background:var(--paper)}
.choice:disabled{cursor:default}
.letter{display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:var(--tint);color:var(--navy);font-weight:700;font-size:14px;flex:none}
.choice code{font:500 .9em var(--mono);background:var(--tint);padding:1px 5px;border-radius:4px}
.choice.is-ok{border-color:var(--ok);background:var(--ok-bg)}
.choice.is-ok .letter{background:var(--ok);color:#fff}
.choice.is-ko{border-color:var(--ko);background:var(--ko-bg)}
.choice.is-ko .letter{background:var(--ko);color:#fff}
.choice.is-off{opacity:.55}
.verdict{display:block;font:600 12px/1 var(--sans);letter-spacing:.1em;text-transform:uppercase;margin-top:8px}
.is-ok>span>.verdict{color:var(--ok)}
.is-ko>span>.verdict{color:var(--ko)}
.expl{margin:22px 0 0;padding:16px 18px;border-radius:var(--r);border-left:3px solid}
.expl.is-ok{background:var(--ok-bg);border-color:var(--ok)}
.expl.is-ko{background:var(--ko-bg);border-color:var(--ko)}
.expl p{margin:0;font-size:15.5px;line-height:1.6}
.expl .expl-t{font-weight:700;margin-bottom:4px}
.expl.is-ok .expl-t{color:var(--ok)}
.expl.is-ko .expl-t{color:var(--ko)}
.score{font:500 italic 96px/1 var(--serif);color:var(--navy);margin:8px 0 8px;font-variant-numeric:lining-nums}
.score span{font-size:40px;color:var(--mute)}
.score-t{font:700 20px/1.3 var(--sans);margin:0 0 8px}
.quiz-end.is-ok .score-t{color:var(--ok)}
.quiz-end.is-ko .score-t{color:var(--ko)}
.quiz-end p:not(.score):not(.score-t){font-size:16px}


/* ─── ressources ─── */
.res-cards{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.res-card{display:flex;flex-direction:column;gap:8px;height:100%;padding:20px;background:var(--card);border:1px solid var(--line);border-radius:var(--r);text-decoration:none;color:var(--ink-soft);font-size:14px;line-height:1.5;transition:border-color .12s}
.res-card:hover{border-color:var(--gold)}
.res-t{font:500 italic 24px/1.15 var(--serif);color:var(--navy)}

/* ─── tablette et mobile ─── */
@media (max-width:1100px){
  .bureau{grid-template-columns:1fr;gap:28px}
}
@media (max-width:900px){
  .topbar{display:flex;align-items:center;justify-content:space-between;position:sticky;top:0;z-index:10;background:var(--card);border-bottom:1px solid var(--line);padding:12px 16px}
  .menu-btn{font:600 14px/1 var(--sans);color:var(--navy);background:var(--tint);border:1px solid var(--line);border-radius:999px;padding:10px 16px;cursor:pointer}
  .layout{display:block}
  .sidebar{display:none;position:fixed;top:57px;left:0;right:0;bottom:0;height:auto;z-index:9;border-right:0}
  .sidebar .side-head{display:none}
  body.nav-open .sidebar{display:flex}
  body.nav-open{overflow:hidden}
  main{padding:32px 16px 72px}
  .resume{flex-direction:column;align-items:stretch}
  .resume .btn{justify-content:center}
  .bureau{padding:28px 20px;border-radius:12px}
  .mod-row{grid-template-columns:44px minmax(0,1fr);gap:14px}
  .mod-num{font-size:36px}
  .mod-st{grid-column:2}
  .res-cards{grid-template-columns:1fr}
}
@media (max-width:560px){
  .prose{font-size:16px}
  .quiz-card{padding:22px 16px}
  .q{font-size:18px}
  .pager{grid-template-columns:1fr}
  .pager-next{grid-column:1}
  .score{font-size:76px}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}
@media print{.sidebar,.topbar,.pager,.done-bar{display:none}.layout{display:block}}

/* ═══════════════ couche de jeu ═══════════════ */
:root{--xp:#B8892F;--terra:#C8643F;--terra-bg:#FBEDE6}

/* le stagiaire parle */
.avatar{display:inline-grid;place-items:center;width:44px;height:44px;border-radius:50%;background:var(--tint);border:2px solid var(--gold);overflow:hidden;flex:none}
.avatar img{width:100%;height:100%;object-fit:cover}
.avatar .ico{width:22px;height:22px;color:var(--navy)}
.dit{display:flex;align-items:flex-end;gap:12px;margin:0 0 28px}
.dit .avatar{width:52px;height:52px}
.bulle{position:relative;margin:0;background:var(--card);border:1px solid var(--line);border-radius:16px 16px 16px 4px;padding:12px 16px;font-size:15.5px;line-height:1.5;color:var(--ink);max-width:560px;box-shadow:0 2px 0 rgba(14,30,63,.04)}
.bulle b{display:block;font:700 11px/1.3 var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--gold-ink);margin-bottom:3px}
.dit-hero{margin-bottom:20px}
.dit-hero .avatar{width:72px;height:72px}
.dit-hero .bulle{font-size:18px;padding:16px 20px}
.quiz-card .dit{margin:18px 0 0}
.quiz-card .dit .avatar{width:40px;height:40px}

/* XP */
.xp-tag{display:inline-flex;align-items:center;font:700 11.5px/1 var(--sans);letter-spacing:.02em;color:var(--xp);background:#FBF3DF;border:1px solid #EAD6A4;border-radius:999px;padding:4px 8px;white-space:nowrap;vertical-align:middle}
.btn-primary .xp-tag{background:rgba(201,162,74,.18);border-color:rgba(201,162,74,.45);color:var(--gold-soft);margin-left:4px}
.step .xp-tag{margin-left:auto}
.step .xp-tag+.step-go{margin-left:6px}
.check .xp-tag{margin-left:auto;align-self:flex-start}
.check-t{flex:1}
.btn-lg{padding:17px 26px;font-size:16px}

/* HUD */
.hud{display:flex;align-items:center;gap:12px;padding:12px;margin:0 0 14px;border-radius:12px;background:var(--navy);color:#fff;text-decoration:none;transition:background-color .12s}
.hud:hover{background:var(--navy-soft)}
.avatar-hud{width:48px;height:48px}
.hud-body{display:flex;flex-direction:column;gap:4px;min-width:0;flex:1}
.hud-nom{display:flex;align-items:center;justify-content:space-between;gap:8px;font:700 15px/1.2 var(--sans)}
.niv{font:700 10.5px/1 var(--sans);letter-spacing:.08em;text-transform:uppercase;color:var(--navy);background:var(--gold);border-radius:999px;padding:4px 7px;white-space:nowrap}
.hud-grade{font-size:12px;color:#C5CCDA;line-height:1.3}
.xpbar{display:block;height:7px;border-radius:7px;background:rgba(255,255,255,.14);overflow:hidden}
.xpbar span{display:block;height:100%;border-radius:7px;background:linear-gradient(90deg,#B8892F,#E2C177);transition:width .6s cubic-bezier(.2,.8,.2,1)}
.hud-xp{display:flex;justify-content:space-between;font-size:11.5px;color:#AEB7C9;font-variant-numeric:tabular-nums}
.flamme{display:inline-flex;align-items:center;gap:3px;color:#F2B36B;font-weight:700}
.flamme .ico{width:13px;height:13px}
.hud-top{display:none}
.side-wait{font-size:13px;color:var(--mute);padding:0 10px}

/* accueil */
.resume{align-items:flex-end}
.resume .xp-tag{margin-left:6px}
.resume-o{display:flex;align-items:center;gap:10px;margin:14px 0 0;font-size:14px;color:var(--ink-soft)}
.resume-o b{color:var(--navy)}
.mini-obj{width:34px;height:34px;object-fit:contain;flex:none}
.mini-obj.is-dim{filter:grayscale(1);opacity:.45}
.mod-o .mini-obj{width:26px;height:26px}
.mod-stat{font:600 10.5px/1 var(--sans);letter-spacing:.1em;text-transform:uppercase;color:var(--gold-ink);background:var(--tint);border-radius:999px;padding:4px 8px;margin-left:4px}

/* le bureau illustré */
.objets{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;align-content:start}
.objet a{display:flex;flex-direction:column;align-items:center;text-align:center;gap:4px;height:100%;padding:12px 10px 12px;border-radius:12px;text-decoration:none;color:inherit;transition:transform .15s,border-color .15s,background-color .15s}
.objet-img{display:grid;place-items:center;width:100%;aspect-ratio:1.25;margin-bottom:2px}
.objet .ico-obj{width:78%;height:100%;object-fit:contain}
.objet-n{font:600 12.5px/1.3 var(--sans)}
.objet-m{font:600 10px/1 var(--sans);letter-spacing:.14em;text-transform:uppercase}
.objet.is-won a{background:#F7F1E3;border:1px solid var(--gold)}
.objet.is-won .objet-n{color:var(--navy)}
.objet.is-won .objet-m{color:var(--gold-ink)}
.objet.is-won a:hover{transform:translateY(-3px)}
.objet.is-won .ico-obj{filter:drop-shadow(0 6px 6px rgba(14,30,63,.18))}
.objet.is-todo a{border:1px dashed var(--navy-line);background:rgba(255,255,255,.02)}
.objet.is-todo .ico-obj{filter:brightness(0) invert(1);opacity:.13}
.objet.is-todo .objet-n{color:#8E9AB3}
.objet.is-todo .objet-m{color:#6F7E9E}
.objet.is-todo a:hover{border-color:#6F7E9E;background:rgba(255,255,255,.05)}
.objet.is-todo a:hover .ico-obj{opacity:.22}

/* hauts faits */
.hf-list{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.derniers-hf{margin:0 0 56px}
.derniers-hf .hf-list{grid-template-columns:repeat(3,minmax(0,1fr))}
.hf-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
.hf{display:flex;align-items:center;gap:12px;padding:14px;border-radius:12px;background:var(--card);border:1px solid var(--line)}
.hf .hf-ico{display:grid;place-items:center;width:42px;height:42px;padding:9px;border-radius:50%;flex:none}
.hf b{display:block;font-size:14px;color:var(--navy);line-height:1.3}
.hf small{display:block;font-size:12.5px;color:var(--ink-soft);line-height:1.4;margin-top:2px}
.hf-xp{margin-left:auto;font:700 11.5px/1 var(--sans);color:var(--xp);white-space:nowrap;align-self:flex-start}
.hf.is-won{border-color:#EAD6A4;background:linear-gradient(180deg,#FFFDF7,#FBF3DF)}
.hf.is-won .hf-ico{background:var(--navy);color:var(--gold)}
.hf.is-todo .hf-ico{background:var(--tint);color:var(--mute)}
.hf.is-todo b{color:var(--ink-soft)}
.hf.is-todo .hf-xp{color:var(--mute)}
.more a{display:inline-flex;align-items:center;gap:6px;font-weight:600;font-size:14px;text-decoration:none;margin-top:6px}
.more .ico{width:16px;height:16px;color:var(--gold-ink)}
.h-sec small{font:600 14px var(--sans);color:var(--mute);margin-left:8px;font-style:normal}

/* fiche du stagiaire */
.page-stagiaire,.page-attestation{max-width:1000px}
.perso{display:grid;grid-template-columns:300px minmax(0,1fr);gap:40px;align-items:end;background:var(--navy);border-radius:16px;padding:32px 40px 0;margin:0 0 24px;overflow:hidden;color:#E8EBF2}
.perso-img img{display:block;width:100%;height:auto}
.perso-id{padding-bottom:36px}
.perso .kicker{color:var(--gold)}
.perso h1{font:500 italic clamp(44px,5vw,64px)/1 var(--serif);color:#fff;margin:0 0 12px}
.perso-grade{display:flex;align-items:center;gap:12px;font:600 17px/1.3 var(--sans);color:#fff;margin:0 0 18px}
.niv-lg{font-size:12px;padding:6px 10px}
.xpbar-lg{height:12px;max-width:440px;margin-bottom:8px}
.perso .meta{color:#AEB7C9}
.perso-tuteur{font-size:14px;color:#C5CCDA;margin:16px 0 0}
.perso-tuteur b{color:var(--gold)}
.perso-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.panel{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:22px 24px}
.panel-t{font:500 italic 26px/1.1 var(--serif);color:var(--navy);margin:0 0 16px}
.stats{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.stats li{display:grid;grid-template-columns:120px 1fr 32px;align-items:center;gap:12px;font-size:14px}
.stat-n{font-weight:600;color:var(--navy)}
.stat-bar{height:10px;border-radius:10px;background:var(--tint);overflow:hidden}
.stat-bar span{display:block;height:100%;background:linear-gradient(90deg,var(--navy),var(--navy-soft));border-radius:10px}
.stat-v{text-align:right;font-weight:700;color:var(--gold-ink);font-variant-numeric:tabular-nums}
.inventaire{list-style:none;margin:0 0 18px;padding:0;display:grid;grid-template-columns:repeat(5,1fr);gap:8px}
.inv a{display:grid;place-items:center;aspect-ratio:1;border-radius:10px;padding:6px}
.inv img{width:100%;height:100%;object-fit:contain}
.inv.is-won a{background:#F7F1E3;border:1px solid var(--gold)}
.inv.is-todo a{background:var(--tint);border:1px dashed var(--line)}
.inv.is-todo img{filter:brightness(0);opacity:.12}
.chiffres{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:0}
.chiffres div{background:var(--paper);border-radius:10px;padding:10px 12px}
.chiffres dt{font-size:12px;color:var(--mute)}
.chiffres dd{margin:2px 0 0;font:500 italic 26px/1.1 var(--serif);color:var(--navy);font-variant-numeric:lining-nums}
.grades{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(5,1fr);gap:8px}
.grades li{display:flex;flex-direction:column;gap:4px;padding:12px;border-radius:10px;background:var(--card);border:1px solid var(--line);font-size:13px;line-height:1.3;color:var(--ink-soft)}
.g-niv{font:500 italic 26px/1 var(--serif);color:var(--mute);font-variant-numeric:lining-nums}
.grades small{color:var(--mute);font-size:11.5px}
.grades li.is-past{background:#F7F1E3;border-color:#EAD6A4}
.grades li.is-past .g-niv{color:var(--gold-ink)}
.grades li.is-cur{background:var(--navy);border-color:var(--navy);color:#fff}
.grades li.is-cur .g-niv{color:var(--gold)}
.grades li.is-cur small{color:#AEB7C9}
.reglages{display:flex;flex-wrap:wrap;gap:12px;align-items:flex-end}
.reglages label{display:flex;flex-direction:column;gap:6px;font-size:13px;font-weight:600;color:var(--ink-soft)}
input[type=text],input:not([type]){font:500 16px/1.2 var(--sans);color:var(--navy);background:var(--card);border:1px solid var(--line);border-radius:10px;padding:12px 14px;min-width:220px}
input:not([type]):focus{outline:2px solid var(--gold);outline-offset:1px;border-color:var(--gold)}

/* premier accueil */
body.is-onboard .layout{grid-template-columns:1fr}
body.is-onboard .sidebar{display:none}
.page-nouveau{max-width:1080px}
.onboard{display:grid;grid-template-columns:minmax(0,1fr) 400px;align-items:end;gap:24px;min-height:calc(100vh - 140px);background:var(--navy);border-radius:20px;padding:48px 48px 0;overflow:hidden}
.onboard-card{align-self:center;padding-bottom:48px;color:#E8EBF2}
.onboard .kicker{color:var(--gold)}
.onboard h1{font:500 italic clamp(44px,5.4vw,68px)/1.02 var(--serif);color:#fff;margin:0 0 18px}
.onboard-lede{font-size:17px;line-height:1.65;color:#C5CCDA;max-width:52ch;margin:0 0 28px}
.onboard-form{display:flex;flex-direction:column;gap:8px;max-width:420px;margin:0 0 18px}
.onboard-form label{font-size:13px;font-weight:600;color:#fff;margin-top:8px}
.onboard-form input{background:#fff;border-color:transparent}
.onboard-form .btn{margin-top:18px;align-self:flex-start;background:var(--gold);color:var(--navy)}
.onboard-form .btn:hover{background:#D9B663}
.onboard-form .btn .ico{color:var(--navy)}
.onboard .meta{color:#8E9AB3}
.onboard-perso{display:block;width:100%;height:auto;align-self:end}
.chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:4px}
.chip{font:600 13px/1 var(--sans);color:#E8EBF2;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.18);border-radius:999px;padding:8px 12px;cursor:pointer}
.chip:hover{background:rgba(255,255,255,.16);border-color:var(--gold)}

/* module */
.prize-img{display:grid;place-items:center;width:84px;height:84px;flex:none}
.prize .ico-lg{width:84px;height:84px;object-fit:contain}
.prize:not(.is-won) .prize-img img{filter:grayscale(.85);opacity:.6}
.prize .meta{margin:4px 0 0}
.prize.is-won .meta{color:#AEB7C9}

/* quiz */
.quiz-regles{list-style:none;margin:0 0 24px;padding:0;display:grid;gap:10px}
.quiz-regles li{display:flex;align-items:center;gap:10px;font-size:16px}
.quiz-regles .ico{color:var(--gold-ink)}
.quiz-top{display:flex;align-items:center;justify-content:space-between;gap:12px}
.serie{display:inline-flex;align-items:center;gap:6px;margin:0 0 8px;font:700 13px/1 var(--sans);color:var(--terra);background:var(--terra-bg);border-radius:999px;padding:6px 10px}
.serie .ico{width:15px;height:15px}
.quiz-end-top{display:flex;align-items:flex-end;justify-content:space-between;gap:16px}
.quiz-perso{width:170px;height:auto;margin:-20px -8px -32px 0}

/* toasts */
.toasts{position:fixed;right:20px;bottom:20px;z-index:40;display:flex;flex-direction:column;gap:8px;align-items:flex-end;pointer-events:none}
.toast{display:flex;align-items:center;gap:12px;max-width:360px;background:var(--navy);color:#E8EBF2;border-radius:14px;padding:12px 16px 12px 12px;box-shadow:0 10px 30px rgba(14,30,63,.28);font-size:13.5px;line-height:1.4;animation:toast-in .35s cubic-bezier(.2,.9,.3,1.3) both}
.toast p{margin:0}
.toast-xp{display:grid;place-items:center;min-width:64px;height:40px;padding:0 8px;border-radius:10px;background:var(--gold);color:var(--navy);font:800 14px/1 var(--sans);white-space:nowrap}
.toast-dit{color:var(--gold-soft);font-style:italic;margin-top:2px!important}
.toast-t{font-weight:700;color:var(--gold);font-size:11px;letter-spacing:.12em;text-transform:uppercase}
.toast-ico{display:grid;place-items:center;width:40px;height:40px;padding:9px;border-radius:50%;background:var(--gold);color:var(--navy)}
.toast.is-hf{background:linear-gradient(135deg,#0E1E3F,#24396A);border:1px solid var(--gold)}
.toast.is-out{animation:toast-out .35s ease-in both}
@keyframes toast-in{from{opacity:0;transform:translateY(16px) scale(.96)}to{opacity:1;transform:none}}
@keyframes toast-out{to{opacity:0;transform:translateX(24px)}}

/* scènes : objet gagné, nouveau grade */
.layer{position:fixed;inset:0;z-index:50;display:none;place-items:center;padding:16px;background:rgba(9,18,40,.72);backdrop-filter:blur(3px)}
.layer.is-open{display:grid;animation:fade .25s ease both}
.scene{position:relative;width:min(520px,100%);max-height:calc(100vh - 32px);overflow:auto;text-align:center;background:var(--paper);border-radius:20px;padding:36px 32px 32px;box-shadow:0 30px 80px rgba(0,0,0,.35);animation:pop .45s cubic-bezier(.2,.9,.3,1.2) both}
.scene .kicker{color:var(--gold-ink)}
.scene h2{font:500 italic 40px/1.05 var(--serif);color:var(--navy);margin:8px 0 10px}
.scene-p{font-size:16px;color:var(--ink-soft);margin:0 0 18px}
.scene-pose{display:grid;place-items:center;width:200px;height:200px;margin:8px auto 0;border-radius:50%;background:radial-gradient(circle,#FFF6DD 0%,#F7EBCB 55%,rgba(247,235,203,0) 72%)}
.scene-pose .ico-xl{width:170px;height:170px;object-fit:contain;animation:pose .7s cubic-bezier(.2,.9,.3,1.25) .15s both;filter:drop-shadow(0 12px 10px rgba(14,30,63,.22))}
.scene .dit{justify-content:center;text-align:left;margin:0 0 16px}
.scene-xp{display:inline-block;font:800 15px/1 var(--sans);color:var(--navy);background:var(--gold);border-radius:999px;padding:8px 14px;margin:0 0 20px}
.scene .btn{display:flex;width:100%;justify-content:center}
.scene-grade{padding:0 0 28px}
.scene-top{display:flex;align-items:flex-end;justify-content:center;gap:8px;background:var(--navy);padding:24px 24px 0;margin:0 0 22px}
.scene-perso{display:block;width:210px;height:auto;animation:pose .6s cubic-bezier(.2,.9,.3,1.2) .1s both}
.scene-niv{text-align:left;padding:0 0 28px;color:#C5CCDA}
.scene-niv .kicker{color:var(--gold);margin:0 0 6px}
.scene-niv p:not(.kicker){font:600 13px/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;margin:0}
.scene-niv b{display:block;font:500 italic 96px/.9 var(--serif);color:#fff;font-variant-numeric:lining-nums}
.scene-grade>h2,.scene-grade>p,.scene-grade>.btn{margin-left:32px;margin-right:32px}
.scene-grade>.btn{width:calc(100% - 64px)}
.expl-t .xp-tag{margin-left:8px}
@keyframes fade{from{opacity:0}to{opacity:1}}
@keyframes pop{from{opacity:0;transform:translateY(20px) scale(.94)}to{opacity:1;transform:none}}
@keyframes pose{0%{opacity:0;transform:translateY(-60px) rotate(-8deg) scale(.8)}70%{opacity:1;transform:translateY(4px) rotate(1deg) scale(1.03)}100%{transform:none}}

/* attestation de fin de stage */
.cert{position:relative;text-align:center;background:#FFFDF8;border:2px solid var(--gold);outline:1px solid var(--gold);outline-offset:-10px;border-radius:6px;padding:56px 48px 40px;margin:8px 0 24px}
.cert-logo{height:44px;width:auto;margin:0 auto 18px;display:block}
.cert-k{font:600 13px/1 var(--sans);letter-spacing:.3em;text-transform:uppercase;color:var(--gold-ink);margin:0 0 26px}
.cert-txt{font-size:17px;color:var(--ink-soft);max-width:56ch;margin:0 auto 10px}
.cert-txt b{color:var(--navy)}
.cert-n{font:500 italic clamp(52px,7vw,84px)/1 var(--serif);color:var(--navy);margin:6px 0 18px}
.cert-objs{display:flex;justify-content:center;flex-wrap:wrap;gap:6px;margin:26px 0}
.cert-objs img,.cert-objs .ico{width:64px;height:64px;object-fit:contain}
.cert-objs .is-dim img{filter:brightness(0);opacity:.1}
.cert-sign{display:grid;grid-template-columns:1fr auto 1fr;gap:16px;align-items:end;font-size:13px;color:var(--mute);margin-top:26px}
.cert-sign b{display:block;font:500 italic 26px/1.2 var(--serif);color:var(--navy);border-top:1px solid var(--line);padding-top:8px;margin-top:6px}
.cert-note{font-size:12px;color:var(--mute);margin:26px 0 0}
.cert-lock{opacity:.55}

@media (max-width:1100px){
  .derniers-hf .hf-list,.hf-grid{grid-template-columns:1fr 1fr}
  .grades{grid-template-columns:repeat(5,1fr)}
}
@media (max-width:900px){
  .hud-top{display:block;flex:1;min-width:0;margin:0 12px}
  .hud-compact{padding:4px 10px 4px 4px;margin:0;gap:8px;border-radius:999px}
  .hud-compact .avatar-hud{width:34px;height:34px}
  .hud-compact .hud-nom{font-size:13px}
  .hud-compact .hud-xp{display:none}
  .hud-compact .xpbar{height:5px}
  .topbar .wordmark{display:none}
  .sidebar .hud{display:none}
  .perso{grid-template-columns:1fr;padding:24px 24px 0;gap:0}
  .perso-img{order:2;max-width:260px;margin:0 auto}
  .perso-id{padding-bottom:16px}
  .perso-grid{grid-template-columns:1fr}
  .grades{grid-template-columns:repeat(2,1fr)}
  .onboard{grid-template-columns:1fr;padding:32px 22px 0;min-height:0}
  .onboard-card{padding-bottom:8px}
  .onboard-perso{max-width:280px;margin:0 auto}
  .dit-hero .avatar{width:56px;height:56px}
  .dit-hero .bulle{font-size:16px}
  .quiz-perso{width:120px}
}
@media (max-width:560px){
  .derniers-hf .hf-list,.hf-grid{grid-template-columns:1fr}
  .stats li{grid-template-columns:100px 1fr 28px}
  .inventaire{grid-template-columns:repeat(5,1fr);gap:6px}
  .cert{padding:40px 18px 28px}
  .cert-objs img{width:44px;height:44px}
  .cert-sign{grid-template-columns:1fr;text-align:center}
  .toasts{left:12px;right:12px;bottom:12px;align-items:stretch}
  .toast{max-width:none}
  .scene{padding:28px 20px 22px}
  .scene h2{font-size:32px}
  .step .xp-tag{display:none}
}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}
@media print{
  body{background:#fff}
  .no-print,.toasts,.layer{display:none!important}
  main{padding:0}
  .page{max-width:none}
  .cert{margin:0;break-inside:avoid}
}
body.is-onboard .menu-btn{display:none}
.nowrap{white-space:nowrap}
@media (max-width:560px){.mod-stat{display:none}}

/* ═══════════════ stagiaire personnalisé, dialogues ═══════════════ */
.bulle p{margin:0}
.bulle p code{font:500 .88em var(--mono);background:var(--tint);padding:1px 5px;border-radius:4px}
.expr{display:block;width:96px;flex:none;align-self:flex-end}
.expr img{display:block;width:100%;height:auto}
.dit-expr{align-items:flex-end}
.dit-question{margin:0 0 20px}
.dit-question .bulle{font-size:17px;background:#FFFDF7;border-color:#EAD6A4}
.dit-q .bulle{font:600 18px/1.45 var(--sans);color:var(--navy);max-width:none}
.dit-q .bulle b{font-weight:700}
.dit-reaction{margin:18px 0 0}
.dit-reaction .bulle{background:#FFFDF7}

/* accueil avec le personnage */
.hero-perso{display:grid;grid-template-columns:190px minmax(0,1fr);gap:20px;align-items:end}
.hero-img{display:block;width:100%;height:auto;align-self:end;margin-bottom:-40px;position:relative;z-index:1}
.hero-body{min-width:0}
.hero-perso .dit-hero .avatar{display:none}

/* premier accueil : création du stagiaire */
.page-nouveau{max-width:1080px}
.onboard{display:block;min-height:0;padding:44px 48px 40px}
.onboard-card{padding:0;max-width:720px}
.onboard-form{max-width:none;gap:0;margin:0}
.onboard-form fieldset,.reglages fieldset{border:0;padding:0;margin:0 0 28px;min-width:0}
.onboard-form legend,.reglages legend{display:flex;align-items:center;gap:10px;font:700 15px/1.3 var(--sans);color:#fff;margin:0 0 12px;padding:0}
.reglages legend{color:var(--navy)}
.etape{display:inline-grid;place-items:center;width:26px;height:26px;border-radius:50%;background:var(--gold);color:var(--navy);font-size:13px}
.onboard-form input:not([type]),.onboard-form input[name]{max-width:360px}
.onboard-form>.btn{margin-top:4px}
.onboard-form .meta{margin-top:14px}
.casting{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:10px}
.casting-c{position:relative;display:flex;flex-direction:column;align-items:center;gap:6px;cursor:pointer}
.casting-c input{position:absolute;opacity:0;width:1px;height:1px}
.casting-img{display:block;width:100%;aspect-ratio:.82;border-radius:14px;overflow:hidden;background:rgba(255,255,255,.06);border:2px solid rgba(255,255,255,.12);transition:border-color .15s,background-color .15s,transform .15s}
.casting-img img{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 0}
.casting-l{font:600 12px/1.3 var(--sans);color:#C5CCDA;text-align:center}
.casting-c:hover .casting-img{border-color:rgba(201,162,74,.6);transform:translateY(-2px)}
.casting-c input:checked+.casting-img{border-color:var(--gold);background:rgba(201,162,74,.16)}
.casting-c input:checked~.casting-l{color:var(--gold)}
.casting-c input:focus-visible+.casting-img{outline:2px solid var(--gold);outline-offset:3px}
.reglages .casting-img{background:var(--tint);border-color:var(--line)}
.reglages .casting-l{color:var(--ink-soft)}
.reglages .casting-c input:checked+.casting-img{background:#F7F1E3}
.reglages .casting-c input:checked~.casting-l{color:var(--gold-ink)}
.onboard-row{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.onboard-row legend{width:100%}
.seg{display:inline-flex;border-radius:999px;background:rgba(255,255,255,.1);padding:4px}
.seg label{cursor:pointer}
.seg input{position:absolute;opacity:0;width:1px;height:1px}
.seg span{display:block;padding:9px 18px;border-radius:999px;font:600 14px/1 var(--sans);color:#C5CCDA}
.seg input:checked+span{background:var(--gold);color:var(--navy)}
.seg input:focus-visible+span{outline:2px solid var(--gold);outline-offset:2px}
.reglages .seg{background:var(--tint)}
.reglages .seg span{color:var(--ink-soft)}
.temps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.temp{cursor:pointer}
.temp input{position:absolute;opacity:0;width:1px;height:1px}
.temp>span{display:block;height:100%;padding:14px 16px;border-radius:12px;border:2px solid rgba(255,255,255,.12);background:rgba(255,255,255,.05);transition:border-color .15s}
.temp b{display:block;font-size:15px;color:#fff;margin-bottom:4px}
.temp small{display:block;font-size:13px;line-height:1.45;color:#AEB7C9;font-style:italic}
.temp input:checked+span{border-color:var(--gold);background:rgba(201,162,74,.14)}
.temp input:focus-visible+span{outline:2px solid var(--gold);outline-offset:2px}
.reglages .temp>span{background:var(--card);border-color:var(--line)}
.reglages .temp b{color:var(--navy)}
.reglages .temp small{color:var(--ink-soft)}
.reglages .temp input:checked+span{border-color:var(--gold);background:#FBF3DF}
.reglages{display:block}
.reglages input:not([type]){min-width:220px}

/* « Expliquez-le » */
.explique{margin:48px 0 0;padding:28px;border-radius:16px;background:var(--card);border:1px solid var(--line)}
.explique>.kicker{margin-bottom:14px}
.explique .dit-situation .bulle{font-size:17px;max-width:none}
.explique .choices{margin-top:4px}
.retry{margin:14px 0 0}
.retiens{display:flex;gap:14px;align-items:flex-start;margin:22px 0 0;padding:16px 18px;border-radius:12px;background:#FBF3DF;border:1px dashed var(--gold)}
.retiens>.ico{width:26px;height:26px;color:var(--gold-ink);margin-top:2px}
.retiens .kicker{margin:0 0 4px}
.retiens p:not(.kicker){margin:0;font:500 italic 21px/1.35 var(--serif);color:var(--navy)}
.explique .done-bar{margin-top:24px}

/* le carnet */
.page-carnet{max-width:820px}
.carnet{background:#FFFDF7;border:1px solid #EAD6A4;border-radius:6px 16px 16px 6px;padding:28px 32px 28px 56px;position:relative;
  background-image:linear-gradient(90deg,transparent 38px,#F0C9B8 38px,#F0C9B8 40px,transparent 40px),repeating-linear-gradient(180deg,transparent 0,transparent 33px,#EFE6CF 33px,#EFE6CF 34px)}
.carnet-m h2{font:500 italic 26px/1.2 var(--serif);color:var(--navy);margin:8px 0 10px}
.carnet-m ol{list-style:none;margin:0 0 18px;padding:0}
.carnet-m li{display:flex;gap:12px;font:500 italic 19px/1.75 var(--serif);color:var(--ink)}
.carnet-n{font:600 12px/2.7 var(--sans);color:var(--gold-ink);min-width:28px;font-style:normal}
.carnet-m li.is-todo{color:var(--mute)}
.carnet-m li.is-todo a{font:500 14px/2.4 var(--sans);font-style:normal;color:var(--mute)}

/* garde-robe */
.garde-robe{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.tenue button{display:flex;flex-direction:column;align-items:center;gap:4px;width:100%;padding:14px;border-radius:14px;background:var(--card);border:1px solid var(--line);cursor:pointer;font:inherit;color:inherit;transition:border-color .15s}
.tenue button:hover:not(:disabled){border-color:var(--gold)}
.tenue button:disabled{cursor:default}
.tenue-img{position:relative;display:block;width:100%;aspect-ratio:1;border-radius:10px;overflow:hidden;background:var(--tint)}
.tenue-img img{width:100%;height:100%;object-fit:cover;object-position:50% 0}
.tenue.is-lock .tenue-img img{filter:brightness(0);opacity:.14}
.tenue-lock{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;font:700 13px/1 var(--sans);color:var(--ink-soft)}
.tenue b{font-size:14px;color:var(--navy);margin-top:6px}
.tenue small{font-size:12.5px;color:var(--mute)}
.tenue.is-on button{border:2px solid var(--gold);background:#FFFDF7}
.tenue.is-on small{color:var(--gold-ink);font-weight:700}
.scene-tenue{display:flex;align-items:center;justify-content:center;gap:8px;font-size:15px;color:var(--navy);background:#FBF3DF;border-radius:10px;padding:10px 12px}
.scene-tenue .ico{color:var(--gold-ink);width:18px;height:18px}
.scene-grade>.btn-ghost{width:calc(100% - 64px);display:flex;justify-content:center;margin-bottom:10px}
.cert-perso{display:block;width:150px;height:auto;margin:-6px auto 4px}

@media (max-width:1100px){
  .casting{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (max-width:900px){
  .hero-perso{grid-template-columns:110px minmax(0,1fr);gap:12px}
  .hero-img{margin-bottom:-20px}
  .onboard{padding:28px 18px 24px}
  .temps{grid-template-columns:1fr}
  .garde-robe{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
  .explique{padding:20px 16px}
  .carnet{padding:20px 16px 20px 48px}
}
@media (max-width:560px){
  .hero-perso{grid-template-columns:1fr}
  .hero-img{display:none}
  .hero-perso .dit-hero .avatar{display:inline-grid}
  .expr{width:72px}
  .casting{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
  .tenue small{display:none}
}
.onboard-form input:not([type]),.reglages input:not([type]){width:100%;max-width:340px}
.dit-q{margin-bottom:18px}
.onboard-reprise{margin:24px 0 0;padding-top:20px;border-top:1px solid rgba(255,255,255,.12);font-size:14px;color:#AEB7C9}
.onboard-reprise .lien{color:var(--gold);font-weight:600;cursor:pointer;text-decoration:underline;text-underline-offset:3px}
.carnet{padding-top:34px;padding-bottom:34px}
.carnet-m h2{line-height:34px;margin:0 0 34px;font-variant-numeric:lining-nums}
.carnet-m ol{margin:0 0 34px}
.carnet-m li{line-height:34px}
.carnet-n{line-height:34px}
.carnet-m li.is-todo a{line-height:34px}
.quiz-card .dit-q{margin:0 0 18px}

/* ═══════════════ fin de formation ═══════════════ */
.btn-sm{padding:9px 14px;font-size:13.5px}
.btn.is-disabled{opacity:.45;pointer-events:none}
.btn:disabled{opacity:.45;cursor:not-allowed}
.lien-btn{background:none;border:0;padding:0;font:inherit;color:var(--navy);font-weight:600;text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.choix-corr{display:block;margin-top:4px}
.scene-niv .b-mot{font-size:60px;line-height:1}
.fin-etapes{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.fin-etapes li{display:flex;align-items:center;gap:16px;padding:14px 16px;background:var(--card);border:1px solid var(--line);border-radius:var(--r)}
.fin-etapes li.is-done .step-dot{background:var(--navy);border-color:var(--navy);color:var(--gold)}
.fin-etapes .btn{margin-left:auto;flex:none}
.embauche{background:var(--navy);color:#E8EBF2;border-radius:16px;padding:32px;margin:0 0 40px}
.embauche .kicker{color:var(--gold)}
.embauche h2{font:500 italic 36px/1.1 var(--serif);color:#fff;margin:0 0 20px}
.competences{list-style:none;margin:0 0 24px;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:10px}
.competences li{display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:12px;background:var(--navy-soft);border:1px solid var(--navy-line);font-size:15px;line-height:1.45}
.competences small{display:block;font:600 10.5px/1.4 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--gold)}
.competences .mini-obj{width:44px;height:44px}
.embauche .dit .bulle{color:var(--ink)}
.embauche .btn-primary{background:var(--gold);color:var(--navy)}
.embauche .btn-primary:hover{background:#D9B663}
.embauche .btn-primary .ico{color:var(--navy)}
.rdvs{margin:0 0 48px}
.rdvs ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.rdv{display:flex;align-items:center;gap:12px;height:100%;padding:16px;border-radius:12px;background:var(--card);border:1px solid var(--line);text-decoration:none;color:inherit;transition:border-color .12s}
.rdv:hover{border-color:var(--gold)}
.rdv b{display:block;font-size:15px;color:var(--navy)}
.rdv small{display:block;font-size:13px;color:var(--mute);margin-top:2px}
.rdv-ico{display:grid;place-items:center;width:40px;height:40px;padding:9px;border-radius:50%;background:var(--tint);color:var(--gold-ink);flex:none}
.rdv.is-du{border-color:var(--gold);background:#FFFDF7}
.rdv.is-du small{color:var(--terra);font-weight:700}
.rdv.is-du .rdv-ico{background:var(--gold);color:var(--navy)}
.depot-envoi{margin:0 0 20px}
.depot-envoi p{margin:0 0 12px;font-size:15.5px;line-height:1.6}
.depot-envoi code{font:500 .9em var(--mono);background:var(--tint);padding:1px 5px;border-radius:4px}
.livrables .meta{margin:12px 0 0}
.changements{list-style:none;margin:0 0 24px;padding:0;display:grid;gap:10px}
.chg-q{font:700 16px/1.4 var(--sans);color:var(--navy);margin:0 0 6px}
.chg-r{font-size:15px;line-height:1.6;margin:0 0 4px}
.chg-r code,.jamais code{font:500 .9em var(--mono);background:var(--tint);padding:1px 5px;border-radius:4px}
.changements .row{margin-top:10px;align-items:center}
.jamais ul{margin:0;padding-left:20px}
.jamais li{margin:6px 0}
/* questionnaires */
.q-intro{font-size:16px}
.questionnaire{margin-top:8px}
.q-section h2{font:500 italic 30px/1.15 var(--serif);color:var(--navy);margin:40px 0 14px}
.q-bloc{border:1px solid var(--line);background:var(--card);border-radius:14px;padding:20px 22px;margin:0 0 12px;min-width:0}
.q-bloc legend{display:flex;gap:10px;align-items:baseline;float:left;width:100%;font:600 16.5px/1.45 var(--sans);color:var(--navy);margin:0 0 12px;padding:0}
.q-bloc legend+*{clear:both}
.q-n{display:inline-grid;place-items:center;min-width:26px;height:26px;border-radius:50%;background:var(--tint);color:var(--gold-ink);font-size:13px;flex:none}
.q-sous{font-size:14.5px;color:var(--ink-soft);margin:14px 0 8px}
.opts{display:flex;flex-wrap:wrap;gap:8px}
.opt{cursor:pointer}
.opt input{position:absolute;opacity:0;width:1px;height:1px}
.opt span{display:block;padding:9px 14px;border-radius:999px;border:1px solid var(--line);background:var(--paper);font-size:14.5px;color:var(--ink);transition:border-color .12s,background-color .12s}
.opt:hover span{border-color:var(--gold)}
.opt input:checked+span{background:var(--navy);border-color:var(--navy);color:#fff}
.opt input:focus-visible+span{outline:2px solid var(--gold);outline-offset:2px}
.opt-precise{font:400 14.5px/1.3 var(--sans);border:1px solid var(--line);border-radius:999px;padding:8px 14px;min-width:200px}
.questionnaire textarea{display:block;width:100%;font:400 15.5px/1.5 var(--sans);color:var(--ink);background:var(--paper);border:1px solid var(--line);border-radius:10px;padding:10px 12px;resize:vertical}
.questionnaire textarea:focus,.opt-precise:focus{outline:2px solid var(--gold);outline-offset:1px}
.echelle{display:flex;flex-wrap:wrap;gap:6px}
.echelle label{cursor:pointer}
.echelle input{position:absolute;opacity:0;width:1px;height:1px}
.echelle span{display:grid;place-items:center;width:40px;height:40px;border-radius:10px;border:1px solid var(--line);background:var(--paper);font-weight:600;color:var(--navy)}
.echelle input:checked+span{background:var(--gold);border-color:var(--gold)}
.echelle input:focus-visible+span{outline:2px solid var(--gold);outline-offset:2px}
.matrice{border-collapse:collapse;width:100%;font-size:14px}
.matrice th,.matrice td{padding:9px 10px;border-bottom:1px solid var(--line);text-align:center}
.matrice thead th{font-size:12.5px;color:var(--ink-soft);font-weight:600;background:var(--tint)}
.matrice tbody th{text-align:left;font-weight:500;color:var(--ink)}
.matrice input{width:18px;height:18px;accent-color:var(--navy)}
/* et maintenant ? */
.suites{list-style:none;margin:20px 0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:12px}
.suite{position:relative;display:flex;flex-direction:column;gap:6px}
.suite h2{font:500 italic 28px/1.15 var(--serif);color:var(--navy);margin:0}
.suite p{margin:0;font-size:15px;line-height:1.6;color:var(--ink-soft)}
.suite .check{margin-top:auto;padding-top:14px}
.suite-ico{display:grid;place-items:center;width:46px;height:46px;padding:10px;border-radius:50%;background:var(--tint);color:var(--gold-ink)}
.suite-etat{position:absolute;top:20px;right:22px;font:700 10.5px/1 var(--sans)!important;letter-spacing:.12em;text-transform:uppercase;color:var(--gold-ink)!important;background:#FBF3DF;border-radius:999px;padding:6px 9px}
.suite.is-on{border-color:var(--gold);background:#FFFDF7}
@media (max-width:900px){
  .competences,.suites,.rdvs ul{grid-template-columns:1fr}
  .embauche{padding:22px 16px}
  .fin-etapes li{flex-wrap:wrap}
  .fin-etapes .btn{margin-left:42px}
  .q-bloc{padding:16px 14px}
}
.scene-grade>.dit{margin:0 32px 16px}
.embauche .btn-primary .xp-tag{background:rgba(14,30,63,.12);border-color:rgba(14,30,63,.25);color:var(--navy)}

/* plateforme en ligne : dépôt, questions, compte */
.form-l{display:block;font:600 13px/1.4 var(--sans);color:var(--navy);margin:16px 0 6px}
.form-i{width:100%;box-sizing:border-box;font:400 15px/1.5 var(--sans);padding:10px 12px;border:1px solid var(--line);border-radius:8px;background:#fff;color:var(--ink)}
.depot-form input[type=file]{display:block;font:400 14px/1.4 var(--sans);color:var(--ink-soft)}
.depot-form .row{margin-top:18px}
.depot-etat{min-height:1.4em}
.questions{list-style:none;padding:0;margin:0;display:grid;gap:14px}
.question p{margin:0 0 8px}
.reponse{border-left:3px solid var(--gold);background:var(--tint);padding:10px 14px;border-radius:0 8px 8px 0;margin-top:10px}
.reponse p:last-child{margin:0}
.pastille-new{display:inline-block;font:600 10px/1 var(--sans);letter-spacing:.04em;text-transform:uppercase;background:var(--gold);color:var(--navy);padding:3px 6px;border-radius:99px;margin-left:6px}
.side-out{font-size:13px;color:var(--mute);padding:6px 10px;text-align:left}

.video-lecon{margin:0 0 24px}
.video-lecon video{display:block;width:100%;aspect-ratio:16/9;background:var(--navy);border-radius:12px}
.transcription{margin:0 0 24px;border:1px solid var(--line);border-radius:10px;background:var(--card);padding:0 18px}
.transcription summary{cursor:pointer;padding:14px 0;font:600 14px/1.4 var(--sans);color:var(--navy)}
.transcription[open] summary{border-bottom:1px solid var(--line);margin-bottom:12px}

/* avec une vidéo, les gestes sont montrés : les lignes « Faites-le avec moi » disparaissent du texte déplié */
.transcription .ecran{display:none}
.video-lecon figcaption{margin-top:8px}