@font-face{font-family:Manrope;font-weight:200 800;font-display:block;src:url(../assets/fonts/manrope-latin-wght-normal.woff2) format("woff2")}

:root{--paper:#fbfcfb;--cream:#faf9f4;--white:#fff;--ink:#203c32;--muted:#66716b;--green:#234f3e;--sage:#e7efe9;--sage-soft:#f0f5f1;--sage-deep:#456c55;--line:#e1e8e2;--coral:#e59b85;--coral-deep:#c9674d;--peach:#f4e7dc;--gold:#d7a64a}
*{box-sizing:border-box;margin:0;padding:0}
html,body{margin:0;background:var(--paper);font-family:Manrope,sans-serif;color:var(--ink)}
#stage{position:relative;width:1920px;height:1080px;overflow:hidden;transform-origin:0 0}
#root{position:absolute;inset:0;overflow:hidden;background:var(--paper)}
#dots{position:absolute;inset:-80px;background-image:radial-gradient(circle,#234f3e1a 1.6px,transparent 1.8px);background-size:34px 34px}
#blob{position:absolute;width:1100px;height:1100px;left:790px;top:-10px;border-radius:50%;background:radial-gradient(circle,#dfe9e1 0%,#e7efe9aa 38%,#fbfcfb00 68%)}
#blob2{position:absolute;width:520px;height:520px;left:1450px;top:620px;border-radius:50%;background:radial-gradient(circle,#f4e7dc 0%,#f4e7dc00 70%)}
#world{position:absolute;left:0;top:0;width:1920px;height:1080px;transform-origin:0 0}
#phone{position:absolute;transform-origin:50% 50%}
#interior,#overlay{position:absolute;left:0;top:0;overflow:visible}
.cover{position:absolute;transform-style:preserve-3d}
#body{position:absolute;left:0;top:0;overflow:visible}
.face{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden;overflow:hidden}
.faceB{transform:rotateY(180deg)}
#shadow{position:absolute;border-radius:60px;background:#234f3e;filter:blur(38px);opacity:.16}
#shade{position:absolute;left:0;top:0;width:1060px;height:1080px;background:linear-gradient(90deg,#fbfcfb 0%,#fbfcfbf2 60%,#fbfcfb00 100%)}
#topbar{position:absolute;left:120px;right:120px;top:48px;display:flex;justify-content:space-between;align-items:center}
.brand{display:flex;align-items:center;gap:14px}
.brand img{width:52px;height:52px;border-radius:12px;background:var(--cream)}
.brand b{font-weight:800;font-size:28px;letter-spacing:-.03em;color:#294437}
.brand b span{color:#5f775d}
.chip{display:inline-flex;align-items:center;gap:10px;padding:10px 18px;border-radius:999px;background:var(--white);border:1.5px solid var(--line);font-weight:700;font-size:18px;color:var(--ink);box-shadow:0 10px 30px #234f3e10}
.chip i{width:10px;height:10px;border-radius:50%;background:var(--sage-deep)}
.panel{position:absolute;left:120px;top:0;width:760px;height:1080px;display:flex;flex-direction:column;justify-content:center}
.ln{will-change:transform,opacity}
.kick{font-weight:800;font-size:19px;letter-spacing:.2em;color:var(--sage-deep);margin-bottom:22px;display:flex;align-items:center;gap:14px;text-transform:uppercase}
.kick i{display:inline-block;height:3px;width:52px;background:var(--coral);border-radius:2px}
.ttl{font-weight:800;font-size:74px;line-height:1.04;letter-spacing:-.035em;margin-bottom:28px;color:var(--ink)}
.ttl.sm{font-size:62px}
.cap{font-size:31px;line-height:1.45;color:var(--muted);font-weight:500;max-width:700px}
.meta{display:flex;gap:12px;flex-wrap:wrap;margin-top:34px}
.meta span{padding:10px 18px;border-radius:999px;background:var(--sage);font-weight:700;font-size:19px;color:var(--green)}
.list{display:grid;gap:14px;margin-top:6px}
.list div{display:flex;align-items:center;gap:16px;font-size:27px;font-weight:600;color:var(--ink)}
.list div b{flex:none;display:grid;place-items:center;width:40px;height:40px;border-radius:50%;background:var(--sage);color:var(--green);font-size:20px}
.list div b.ok{background:var(--green);color:#fff}
.wm{position:absolute;left:70px;top:70px;font-weight:800;font-size:470px;letter-spacing:-.06em;color:transparent;-webkit-text-stroke:2px #234f3e14;line-height:1}
#prog{position:absolute;left:120px;right:120px;bottom:52px;display:flex;gap:10px;align-items:center}
#prog .seg{flex:1;height:6px;border-radius:4px;background:#234f3e14;overflow:hidden}
#prog .seg i{display:block;height:100%;width:0;background:var(--green);border-radius:4px}
#hud{position:absolute;inset:0;pointer-events:none}
.tag{position:absolute;padding:10px 18px;border-radius:14px;background:var(--white);border:2px solid var(--green);font-size:22px;font-weight:800;white-space:nowrap;transform:translate(-50%,-50%);color:var(--ink);box-shadow:0 12px 30px #234f3e1c}
.tag.coral{border-color:var(--coral-deep)}
.card{position:absolute;width:250px;height:290px;border-radius:26px;background:var(--white);border:2px solid var(--line);box-shadow:0 20px 50px #234f3e18;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px}
.card svg{width:150px;height:150px}
.card b{font-size:22px;font-weight:800}
.card small{font-size:17px;color:var(--muted);font-weight:600;margin-top:-10px}
#eq{position:absolute;width:74px;height:74px;border-radius:50%;background:var(--green);color:#fff;display:grid;place-items:center;font-size:38px;font-weight:800;box-shadow:0 12px 30px #234f3e30}
#outro{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:26px;background:var(--paper)}
#outro .big{display:flex;align-items:center;gap:26px}
#outro .big img{width:120px;height:120px;border-radius:26px}
#outro .big b{font-size:96px;font-weight:800;letter-spacing:-.04em;color:#294437}
#outro .big b span{color:#5f775d}
#outro p{font-size:32px;color:var(--muted);font-weight:600;text-align:center;line-height:1.5}
#outro .url{font-weight:800;color:var(--green);font-size:28px;padding:12px 26px;border-radius:999px;background:var(--sage)}

.facts{display:grid;gap:18px;margin-top:4px}
.facts div{display:flex;gap:16px;font-size:26px;line-height:1.4;font-weight:600;color:var(--ink)}
.facts div b{flex:none;width:12px;height:12px;border-radius:50%;background:var(--coral);margin-top:13px}
#board{position:absolute;left:960px;top:200px;width:840px;height:680px;display:grid;grid-template-columns:1fr 1fr;gap:28px}
.bcard{border-radius:30px;background:var(--white);border:2px solid var(--line);box-shadow:0 20px 50px #234f3e14;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;transition:none}
.bcard svg{width:170px;height:170px}
.bcard b{font-size:24px;font-weight:800;text-align:center;padding:0 16px}
/* Lecteur (site) */
#player{position:relative;width:100%;aspect-ratio:16/9;overflow:hidden;background:var(--paper);border-radius:16px}
#controls{position:absolute;left:0;right:0;bottom:0;display:flex;align-items:center;gap:12px;padding:10px 14px;background:linear-gradient(0deg,#16241fcc,#16241f00);color:#fff;font:600 14px Manrope,sans-serif;opacity:1;transition:opacity .25s}
/* Les commandes s’effacent pendant la lecture seulement avec une souris ; au doigt, elles restent. */
@media (hover:hover){#player.playing:not(:hover):not(.compact) #controls{opacity:0}}
#controls button{flex:none;display:grid;place-items:center;width:36px;height:36px;border:0;border-radius:50%;background:#fff;color:#234f3e;cursor:pointer;font:800 15px Manrope,sans-serif}
#controls input{flex:1;accent-color:#e59b85}
#bigplay{position:absolute;inset:0;display:grid;place-items:center;border:0;background:transparent;cursor:pointer}
#bigplay span{display:grid;place-items:center;width:96px;height:96px;border-radius:50%;background:#234f3e;color:#fff;font-size:38px;box-shadow:0 18px 40px #234f3e55}
#player.playing #bigplay{display:none}
.fade-top{position:absolute;left:0;right:0;top:0;height:130px;background:linear-gradient(180deg,#fbfcfb 35%,#fbfcfb00)}
.fade-bottom{position:absolute;left:0;right:0;bottom:0;height:120px;background:linear-gradient(0deg,#fbfcfb 40%,#fbfcfb00)}
#cards .card,#eq{display:none}
#outro{display:none}
body.is-player{background:transparent;overflow:hidden}
body.is-player #player{border-radius:0;height:100vh;width:100vw;aspect-ratio:auto}
#player #stage{position:absolute;left:0;top:0}
#player:focus-visible{outline:3px solid var(--coral);outline-offset:-3px}
@media (prefers-reduced-motion:reduce){#controls{transition:none}}
#controls select{max-width:40%;border:0;border-radius:999px;padding:7px 12px;background:#fff;color:#234f3e;font:700 13px Manrope,sans-serif;cursor:pointer}
/* Scénarios pas à pas : outils, contrôle « c’est bon si », point d’attention */
.trow{display:flex;flex-wrap:wrap;gap:12px;margin-top:26px}
.tchip{display:inline-flex;align-items:center;gap:10px;padding:8px 16px 8px 10px;border-radius:16px;background:var(--white);border:2px solid var(--line);box-shadow:0 10px 26px #234f3e12}
.tchip b{font-size:21px;font-weight:700;color:var(--ink)}
.tgrid{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:4px}
.tchip.big{padding:12px 18px 12px 12px}
.tchip.big b{font-size:22px}
.check{display:flex;gap:14px;align-items:flex-start;margin-top:24px;padding:16px 20px;border-radius:18px;background:var(--sage);font-size:24px;line-height:1.4;font-weight:600;color:var(--green)}
.check b{flex:none;display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:var(--green);color:#fff;font-size:18px}
.check em{font-style:normal;font-weight:800}
.warn{display:flex;gap:14px;align-items:flex-start;margin-top:18px;font-size:22px;line-height:1.4;font-weight:600;color:var(--coral-deep)}
.warn b{flex:none;display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:var(--coral);color:#fff;font-size:18px}
.tag.tooltag{display:flex;align-items:center;gap:10px;padding:8px 16px 8px 8px;border-color:var(--sage-deep)}
.tag.tooltag span{font-size:20px}
/* Lecteur pas à pas */
#controls .nav{display:inline-flex;gap:6px;width:auto;padding:0 12px;border-radius:999px;font-size:13px}
#controls label{flex:none;display:flex;align-items:center;gap:6px;font-size:12px;white-space:nowrap;cursor:pointer}
#controls .short{display:none}
#time{flex:none;white-space:nowrap;font-variant-numeric:tabular-nums}
#caption{display:none}
#next{position:absolute;right:18px;bottom:64px;display:none;align-items:center;gap:10px;padding:12px 20px;border:0;border-radius:999px;background:var(--green);color:#fff;font:800 15px Manrope,sans-serif;box-shadow:0 14px 30px #234f3e44;cursor:pointer}
#player.waiting #next{display:flex}
#seekwrap{position:relative;flex:1;display:flex;align-items:center}
#seekwrap input{width:100%}
#ticks{position:absolute;left:0;right:0;top:50%;height:0;pointer-events:none}
#ticks i{position:absolute;top:-5px;width:2px;height:10px;background:#ffffffaa;border-radius:1px}
/* Guide écrit : lien vers la version écrite, et boucle d’une étape (?etape=n&boucle=1). */
#controls #written{flex:none;padding:7px 12px;border-radius:999px;background:#fff;color:#234f3e;font:700 13px Manrope,sans-serif;text-decoration:none;white-space:nowrap}
body.is-clip #controls,body.is-clip #bigplay,body.is-clip #next,body.is-clip #panels,body.is-clip #topbar,body.is-clip #prog,body.is-clip #outro{display:none!important}
body.is-clip #player{cursor:default}
/* Lecteur étroit (cadre 16:9 sur téléphone) : icônes seules, rien ne passe à la ligne. */
@media (max-width:560px){
#player:not(.compact) #controls{gap:7px;padding:6px 8px;font-size:12px}
#player:not(.compact) #controls button{width:32px;height:32px;font-size:13px}
#player:not(.compact) #controls .nav{width:32px;padding:0;justify-content:center}
#controls .lbl,#player:not(.compact) #ttot,#player:not(.compact) #controls #written,#player:not(.compact) #controls select{display:none}
#controls .short{display:inline}
#next{right:10px;bottom:50px;padding:8px 14px;font-size:13px}
#bigplay span{width:64px;height:64px;font-size:26px}
}
/* Lecteur en hauteur (téléphone, plein écran ou cadre haut) : appareil, texte, commandes. */
#player.compact{display:flex;flex-direction:column;padding-top:var(--stage-h)}
#player.compact #bigplay{bottom:auto;height:var(--stage-h)}
#player.compact #bigplay span{width:72px;height:72px;font-size:28px}
#player.compact #next{top:calc(var(--stage-h) - 58px);bottom:auto;right:12px;padding:10px 16px;font-size:14px}
#player.compact #caption{display:block;flex:1 1 auto;min-height:0;overflow-y:auto;padding:12px 16px;border-top:1px solid var(--line);background:var(--white);color:var(--ink)}
#caption .kick{font-size:10px;letter-spacing:.16em;margin-bottom:6px;gap:8px}
#caption .kick i{width:18px;height:2px}
#caption .ttl,#caption .ttl.sm{font-size:18px;line-height:1.25;letter-spacing:-.01em;margin-bottom:6px}
#caption .cap{font-size:14px;line-height:1.5;max-width:none}
#caption .meta{margin-top:10px;gap:6px}
#caption .meta span{padding:4px 10px;font-size:11px}
#caption .trow,#caption .tgrid{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
#caption .tchip,#caption .tchip.big{gap:6px;padding:3px 9px 3px 4px;border-width:1px;border-radius:10px;box-shadow:none}
#caption .tchip svg{width:20px;height:20px}
#caption .tchip b,#caption .tchip.big b{font-size:12px}
#caption .list,#caption .facts{gap:6px;margin-top:6px}
#caption .list div,#caption .facts div{gap:8px;font-size:13px;line-height:1.4}
#caption .list div b{width:20px;height:20px;font-size:11px}
#caption .facts div b{width:7px;height:7px;margin-top:6px}
#caption .warn{gap:8px;margin-top:8px;font-size:13px}
#caption .warn b{width:18px;height:18px;font-size:11px}
#caption .check{gap:8px;margin-top:10px;padding:8px 10px;border-radius:10px;font-size:13px}
#caption .check b{width:18px;height:18px;font-size:11px}
#player.compact #controls{position:static;flex:none;flex-wrap:wrap;gap:6px 10px;padding:6px 12px 8px;border-top:1px solid var(--line);background:var(--white);color:var(--ink);opacity:1}
#player.compact #seekwrap{order:-2;flex:1 1 calc(100% - 100px);height:24px}
#player.compact #time{order:-1;font-size:12px;color:var(--muted)}
#player.compact #ticks i{background:#234f3e66}
#player.compact #controls button{width:38px;height:38px;background:var(--sage);color:var(--green)}
#player.compact #controls #toggle{width:44px;height:44px;background:var(--green);color:#fff}
#player.compact #controls .nav{padding:0;justify-content:center}
#player.compact #controls label{margin-left:auto}
#player.compact #controls .short{display:none}
#player.compact #controls #pausewrap .lbl{display:inline}
#player.compact #controls #written,#player.compact #controls select{background:var(--sage)}
/* Dans une page du site (cadre), le guide écrit et le modèle sont déjà autour du lecteur. */
#player.compact.embedded #controls #written,#player.compact.embedded #controls select{display:none}
#player.compact #seek{accent-color:var(--green)}
/* Boucle d’une étape : ni filigrane ni voile du panneau de texte, l’appareil seul. */
body.is-clip #wms,body.is-clip #shade{display:none!important}
#player.compact #panels,#player.compact #wms,#player.compact #shade,#player.compact .brand,#player.compact #prog{display:none}