/* =========================================================================
   SÉVÉA — Formation IA · Deck HTML immersif (Horizon Experience)
   Charte deck Horizon : Golos Text / Open Sans · navy #05091F · bleu #03A1EF
   corail #E46F71 · Canvas 1440×810 (16:9). Ambiance : starfield, halos,
   transitions cinématiques, chorégraphie d'apparition.
   ========================================================================= */

/* ---- Polices auto-hébergées --------------------------------------------- */
@font-face{font-family:'Golos Text';src:url('../assets/fonts/GolosText-400.woff2') format('woff2');font-weight:400;font-display:block}
@font-face{font-family:'Golos Text';src:url('../assets/fonts/GolosText-500.woff2') format('woff2');font-weight:500;font-display:block}
@font-face{font-family:'Golos Text';src:url('../assets/fonts/GolosText-600.woff2') format('woff2');font-weight:600;font-display:block}
@font-face{font-family:'Golos Text';src:url('../assets/fonts/GolosText-700.woff2') format('woff2');font-weight:700;font-display:block}
@font-face{font-family:'Golos Text';src:url('../assets/fonts/GolosText-800.woff2') format('woff2');font-weight:800;font-display:block}
@font-face{font-family:'Golos Text';src:url('../assets/fonts/GolosText-900.woff2') format('woff2');font-weight:900;font-display:block}
@font-face{font-family:'Open Sans';src:url('../assets/fonts/OpenSans-400.woff2') format('woff2');font-weight:400;font-style:normal;font-display:block}
@font-face{font-family:'Open Sans';src:url('../assets/fonts/OpenSans-700.woff2') format('woff2');font-weight:700;font-style:normal;font-display:block}
@font-face{font-family:'Open Sans';src:url('../assets/fonts/OpenSans-400i.woff2') format('woff2');font-weight:400;font-style:italic;font-display:block}
@font-face{font-family:'Cinzel';src:url('../assets/fonts/Cinzel-400.woff2') format('woff2');font-weight:400;font-display:block}
@font-face{font-family:'Cinzel';src:url('../assets/fonts/Cinzel-600.woff2') format('woff2');font-weight:600;font-display:block}
@font-face{font-family:'Ovo';src:url('../assets/fonts/Ovo-400.woff2') format('woff2');font-weight:400;font-display:block}

/* ---- Tokens -------------------------------------------------------------- */
:root{
  --navy:#05091F; --navy-deep:#02051B; --navy-card:#070B21; --white:#FFFFFF;
  --blue:#03A1EF; --coral:#E46F71; --slate:#7488B0; --slate-light:#9DB0D9;
  --ink:#0B0F25; --ink-muted:#5A6173;
  --line:#E3E4E7; --pill:#EDEEF1;
  --gold:#F6C444;
  --grad: linear-gradient(90deg, var(--blue) 0%, var(--coral) 100%);
  --grad-diag: linear-gradient(118deg, #16A3EA 0%, #8A86AD 50%, #E4706F 100%);
  --halo: radial-gradient(1300px 900px at 16% 26%, #2A2E45 0%, #181C30 34%, #080C22 68%, var(--navy-deep) 100%);
  --r-card:24px; --r-pill:48px; --r-sm:14px;
  --font-display:'Golos Text', system-ui, sans-serif;
  --font-body:'Open Sans', system-ui, sans-serif;
  --ease-out:cubic-bezier(.22,.85,.3,1);
  --ease-soft:cubic-bezier(.33,1,.68,1);
}

*{margin:0;padding:0;box-sizing:border-box}
html,body{height:100%}
body{background:#02030C;overflow:hidden;font-family:var(--font-body);
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img{display:block;max-width:none}
a{color:inherit}

/* ---- Scène 1440×810 mise à l'échelle ------------------------------------- */
#stage{position:absolute;left:50%;top:50%;width:1440px;height:810px;
  transform:translate(-50%,-50%) scale(1);transform-origin:center;z-index:1}

/* =========================================================================
   TRANSITIONS DE SLIDES (cinématique directionnelle)
   ========================================================================= */
.slide{position:absolute;inset:0;overflow:hidden;background:var(--white);color:var(--ink);
  font-family:var(--font-body);font-size:26px;line-height:1.45;
  opacity:0;visibility:hidden;transition:opacity .4s ease, visibility 0s linear .4s}
.slide.is-active{opacity:1;visibility:visible;transition:none;
  animation:slideIn .6s var(--ease-soft) both}
#stage.back .slide.is-active{animation-name:slideInBack}
@keyframes slideIn{
  from{opacity:0;transform:translateX(38px) scale(.986);filter:blur(10px)}
  60%{filter:blur(0)}
  to{opacity:1;transform:none;filter:none}}
@keyframes slideInBack{
  from{opacity:0;transform:translateX(-38px) scale(.986);filter:blur(10px)}
  60%{filter:blur(0)}
  to{opacity:1;transform:none;filter:none}}

/* fonds : blanc vivant (voiles bleu/corail) et navy */
.slide:not(.slide--dark){background:
  radial-gradient(900px 520px at 10% -4%, rgba(3,161,239,.055), transparent 62%),
  radial-gradient(860px 540px at 98% 104%, rgba(228,111,113,.05), transparent 62%),
  linear-gradient(180deg,#FFFFFF 0%,#F8FAFE 100%)}
.slide--dark{background:var(--navy);color:var(--white)}
.slide--dark.halo{background:var(--halo)}

/* ---- Chorégraphie d'entrée ------------------------------------------------ */
@keyframes riseIn{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@keyframes popIn{0%{opacity:0;transform:scale(.72)}62%{transform:scale(1.05)}100%{opacity:1;transform:scale(1)}}
.slide.is-active .rise{animation:riseIn .6s var(--ease-out) both;animation-delay:.12s}
.slide.is-active .rise.d1{animation-delay:.26s}
.slide.is-active .rise.d2{animation-delay:.4s}
.slide.is-active .rise.d3{animation-delay:.54s}
.slide.is-active .fade{animation:fadeIn .7s ease both;animation-delay:.15s}
.slide.is-active .topbar{animation:topIn .55s var(--ease-soft) both}
@keyframes topIn{from{transform:translateY(-104px)}to{transform:none}}

/* cascade automatique des listes / grilles / timelines */
.slide.is-active :is(.rule-item,.badge-item,.tile,.tl-item,.xcard li,ul.cascade li){
  animation:riseIn .55s var(--ease-out) both}
.slide.is-active :is(.rule-item,.badge-item,.tile,.tl-item,.xcard li,ul.cascade li):nth-child(1){animation-delay:.28s}
.slide.is-active :is(.rule-item,.badge-item,.tile,.tl-item,.xcard li,ul.cascade li):nth-child(2){animation-delay:.4s}
.slide.is-active :is(.rule-item,.badge-item,.tile,.tl-item,.xcard li,ul.cascade li):nth-child(3){animation-delay:.52s}
.slide.is-active :is(.rule-item,.badge-item,.tile,.tl-item,.xcard li,ul.cascade li):nth-child(4){animation-delay:.64s}
.slide.is-active :is(.rule-item,.badge-item,.tile,.tl-item,.xcard li,ul.cascade li):nth-child(5){animation-delay:.76s}
.slide.is-active :is(.rule-item,.badge-item,.tile,.tl-item,.xcard li,ul.cascade li):nth-child(6){animation-delay:.88s}
.slide.is-active :is(.rule-item,.badge-item,.tile,.tl-item,.xcard li,ul.cascade li):nth-child(7){animation-delay:1s}
.slide.is-active :is(.rule-item,.badge-item,.tile,.tl-item,.xcard li,ul.cascade li):nth-child(8){animation-delay:1.12s}

/* =========================================================================
   AMBIANCE — starfield + aurora (injectés par deck.js sur les slides sombres)
   ========================================================================= */
.fx-stars,.fx-aurora{position:absolute;inset:0;pointer-events:none;display:block}
.fx-stars{z-index:0;opacity:.85;background-image:
  radial-gradient(1.6px 1.6px at 8% 18%, rgba(255,255,255,.6), transparent 55%),
  radial-gradient(1.4px 1.4px at 22% 64%, rgba(255,255,255,.4), transparent 55%),
  radial-gradient(2px 2px at 31% 12%, rgba(255,255,255,.5), transparent 55%),
  radial-gradient(1.4px 1.4px at 44% 42%, rgba(255,255,255,.35), transparent 55%),
  radial-gradient(1.8px 1.8px at 58% 8%, rgba(255,255,255,.55), transparent 55%),
  radial-gradient(1.3px 1.3px at 66% 76%, rgba(255,255,255,.38), transparent 55%),
  radial-gradient(2px 2px at 76% 28%, rgba(255,255,255,.5), transparent 55%),
  radial-gradient(1.4px 1.4px at 87% 60%, rgba(255,255,255,.42), transparent 55%),
  radial-gradient(1.7px 1.7px at 93% 14%, rgba(255,255,255,.5), transparent 55%),
  radial-gradient(1.3px 1.3px at 14% 86%, rgba(255,255,255,.34), transparent 55%),
  radial-gradient(1.8px 1.8px at 51% 90%, rgba(255,255,255,.4), transparent 55%),
  radial-gradient(1.5px 1.5px at 81% 88%, rgba(3,161,239,.5), transparent 55%),
  radial-gradient(1.5px 1.5px at 38% 74%, rgba(228,111,113,.45), transparent 55%)}
.fx-stars::after{content:"";position:absolute;inset:0;background-image:
  radial-gradient(1.4px 1.4px at 17% 34%, rgba(255,255,255,.5), transparent 55%),
  radial-gradient(1.2px 1.2px at 39% 22%, rgba(255,255,255,.34), transparent 55%),
  radial-gradient(1.7px 1.7px at 63% 52%, rgba(255,255,255,.45), transparent 55%),
  radial-gradient(1.2px 1.2px at 72% 90%, rgba(255,255,255,.3), transparent 55%),
  radial-gradient(1.6px 1.6px at 90% 40%, rgba(255,255,255,.45), transparent 55%),
  radial-gradient(1.2px 1.2px at 27% 94%, rgba(255,255,255,.3), transparent 55%),
  radial-gradient(1.6px 1.6px at 48% 62%, rgba(255,255,255,.4), transparent 55%)}
.slide.is-active .fx-stars{animation:starBreathe 9s ease-in-out infinite}
.slide.is-active .fx-stars::after{animation:starBreathe 9s ease-in-out -4.5s infinite reverse}
@keyframes starBreathe{0%,100%{opacity:.55}50%{opacity:1}}
.fx-aurora{z-index:0}
.fx-aurora::before,.fx-aurora::after{content:"";position:absolute;width:820px;height:620px;
  border-radius:50%;filter:blur(70px);opacity:.16}
.fx-aurora::before{left:-240px;top:-220px;background:radial-gradient(closest-side, var(--ambA, var(--blue)), transparent 70%)}
.fx-aurora::after{right:-260px;bottom:-260px;background:radial-gradient(closest-side, var(--ambB, var(--coral)), transparent 70%)}
.slide.is-active .fx-aurora::before{animation:auroraA 21s ease-in-out infinite alternate}
.slide.is-active .fx-aurora::after{animation:auroraB 24s ease-in-out infinite alternate}
@keyframes auroraA{from{transform:translate(0,0) scale(1)}to{transform:translate(120px,70px) scale(1.18)}}
@keyframes auroraB{from{transform:translate(0,0) scale(1.12)}to{transform:translate(-130px,-80px) scale(1)}}

/* étincelle ✦ vivante */
.slide.is-active .sparkle{animation:twinkle 3.6s ease-in-out .4s infinite}
@keyframes twinkle{0%,100%{transform:scale(1) rotate(0deg);opacity:.95}
  50%{transform:scale(1.22) rotate(14deg);opacity:1}
  72%{transform:scale(.92) rotate(6deg);opacity:.8}}

/* Ken Burns pour les photos plein cadre */
.slide.is-active .kb{animation:kb 24s linear .3s infinite alternate both}
@keyframes kb{from{transform:scale(1.03)}to{transform:scale(1.1) translate(-1.1%,-.9%)}}

/* tracé animé des schémas (SVG avec pathLength="1" + classe draw) */
.slide.is-active .draw{stroke-dasharray:1;stroke-dashoffset:1;
  animation:draw .8s var(--ease-soft) .55s forwards}
.slide.is-active .draw.dd1{animation-delay:.75s}
.slide.is-active .draw.dd2{animation-delay:.95s}
@keyframes draw{to{stroke-dashoffset:0}}

/* ---- Typo ----------------------------------------------------------------- */
.display{font-family:var(--font-display);font-weight:800;letter-spacing:-.01em}
.title-xl{font-family:var(--font-display);font-weight:800;font-size:96px;line-height:1.02}
.title-lg{font-family:var(--font-display);font-weight:800;font-size:78px;line-height:1.04}
.title-md{font-family:var(--font-display);font-weight:700;font-size:44px;line-height:1.1}
.heading{font-family:var(--font-display);font-weight:800;font-size:44px;line-height:1.15}
.subtitle{color:var(--slate);font-family:var(--font-display);font-weight:400;font-size:32px}
.lead{font-size:30px;line-height:1.5}
.body{font-size:24px;line-height:1.55}
.small{font-size:18px;color:var(--ink-muted)}
.muted{color:var(--ink-muted)}
.slide--dark .muted{color:var(--slate)}
strong,b{font-weight:700}
.u{text-decoration:underline;text-underline-offset:3px}
.center{text-align:center}
.abs{position:absolute}
.strike{position:relative}
.strike::after{content:"";position:absolute;left:-2%;right:-2%;top:52%;height:4px;background:currentColor;border-radius:2px}

.source{position:absolute;left:0;right:0;bottom:34px;text-align:center;font-family:var(--font-body);
  font-style:italic;font-size:17px;color:var(--ink-muted)}
.source .u{text-decoration:underline}

/* ---- Éléments de marque --------------------------------------------------- */
.sparkle{display:inline-block;width:34px;height:34px;vertical-align:super;background:no-repeat center/contain;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><path d='M50 0 C53 30 70 47 100 50 C70 53 53 70 50 100 C47 70 30 53 0 50 C30 47 47 30 50 0 Z' fill='white'/></svg>")}
.hand-arrow{position:absolute;width:120px;height:90px;background:no-repeat center/contain;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 90'><path d='M8 6 C50 0 92 18 96 64' fill='none' stroke='white' stroke-width='3.2' stroke-linecap='round'/><path d='M83 56 L97 66 L84 74' fill='none' stroke='white' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'/></svg>")}
.hand-arrow--slate{background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 90'><path d='M8 6 C50 0 92 18 96 64' fill='none' stroke='%238DA0C8' stroke-width='3.2' stroke-linecap='round'/><path d='M83 56 L97 66 L84 74' fill='none' stroke='%238DA0C8' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'/></svg>")}
.hand-arrow--ink{background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 90'><path d='M8 6 C50 0 92 18 96 64' fill='none' stroke='%230B0F25' stroke-width='4' stroke-linecap='round'/><path d='M83 56 L97 66 L84 74' fill='none' stroke='%230B0F25' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'/></svg>")}
.slide.is-active .hand-arrow{animation:fadeIn .6s ease .85s both}
.logo-corner{position:absolute;right:84px;bottom:64px;width:200px;opacity:.96}
.slide.is-active .logo-corner{animation:fadeIn .8s ease .9s both}
.ghost-num{position:absolute;left:96px;top:78px;font-family:var(--font-display);font-weight:900;
  font-size:300px;line-height:.78;color:rgba(141,151,191,.17);user-select:none}
.slide.is-active .ghost-num{animation:ghostIn 1s var(--ease-soft) both}
@keyframes ghostIn{from{opacity:0;transform:translateY(-26px) scale(1.12)}to{opacity:1;transform:none}}

/* ---- Bandeau de titre (slides contenu) ------------------------------------ */
.topbar{position:absolute;top:0;left:0;width:100%;height:104px;background:var(--navy);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;
  color:var(--white);z-index:4}
.topbar::after{content:"";position:absolute;left:0;right:0;bottom:-3px;height:3px;
  background:var(--grad);opacity:.85}
.topbar__title{font-family:var(--font-display);font-weight:700;font-size:34px;line-height:1}
.topbar__sub{font-family:var(--font-display);font-weight:600;font-size:16px;letter-spacing:2.5px;
  text-transform:uppercase;color:#C7CDDF}
.topbar__sub--n{text-transform:none;letter-spacing:.4px;font-weight:400;font-size:19px}
.topbar__num{position:absolute;left:46px;top:50%;transform:translateY(-50%);
  font-family:var(--font-display);font-weight:900;font-size:64px;color:var(--white)}

/* ---- Corps de slide ------------------------------------------------------- */
.sb{position:absolute;inset:150px 100px 60px}
.sb--center{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center}
.sb--full{inset:104px 0 0}

/* =========================================================================
   INTERCALAIRES — moments cinématiques
   ========================================================================= */
.s-divider .d-wrap,.s-section .d-wrap{position:absolute;inset:0;display:flex;flex-direction:column;
  align-items:center;justify-content:center;text-align:center;gap:22px;z-index:1}
.d-title{font-family:var(--font-display);font-weight:800;font-size:72px;line-height:1.06}
.d-title i{font-style:normal;display:inline-block;white-space:pre}
.slide.is-active .d-title i{animation:letterIn .6s var(--ease-out) both;
  animation-delay:calc(.12s + var(--i,0)*.03s)}
@keyframes letterIn{from{opacity:0;transform:translateY(.42em);filter:blur(8px)}
  to{opacity:1;transform:none;filter:none}}
.d-sub{font-family:var(--font-display);font-weight:400;font-size:32px;color:#B9C3DC}
.slide.is-active .d-sub{animation:riseIn .7s var(--ease-out) .55s both}
.d-rule{display:flex;align-items:center;gap:14px;height:34px}
.d-rule::before{content:"";width:120px;height:5px;border-radius:3px;background:var(--grad);
  transform-origin:left center}
.slide.is-active .d-rule::before{animation:ruleSweep .7s var(--ease-soft) .5s both}
@keyframes ruleSweep{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.d-rule .sparkle{width:20px;height:20px;vertical-align:middle}
.slide.is-active .d-rule .sparkle{animation:popIn .5s var(--ease-out) .95s both, twinkle 3.6s ease-in-out 1.6s infinite}
.d-ghost{position:absolute;left:50%;top:50%;transform:translate(-50%,-54%);z-index:0;
  font-family:var(--font-display);font-weight:900;font-size:250px;line-height:1;
  color:rgba(141,151,191,.055);white-space:nowrap;user-select:none;pointer-events:none;letter-spacing:-.02em}
.slide.is-active .d-ghost{animation:ghostDrift 14s ease-in-out .2s infinite alternate, fadeIn 1.4s ease both}
@keyframes ghostDrift{from{transform:translate(-51.5%,-54%) scale(1)}to{transform:translate(-48.5%,-54%) scale(1.035)}}

/* ---- Slides de section (chiffre fantôme) ---------------------------------- */
.s-section .d-title{font-size:56px}
.s-section .d-sub{color:#9AA6C6}

/* ---- Pauses / Repas ------------------------------------------------------- */
.s-break{background:var(--navy)}
.s-break::before{content:"";position:absolute;inset:0;
  background:linear-gradient(112deg, rgba(3,161,239,.8) 0%, rgba(3,161,239,.22) 16%, transparent 36%),
             linear-gradient(292deg, rgba(228,111,113,.85) 0%, rgba(228,111,113,.24) 16%, transparent 36%)}
.slide.is-active.s-break::before{animation:wedgeBreathe 8s ease-in-out infinite alternate}
@keyframes wedgeBreathe{from{opacity:.82;transform:scale(1)}to{opacity:1;transform:scale(1.035)}}
.s-break .logo-top{position:absolute;left:50%;top:96px;transform:translateX(-50%);width:300px}
.slide.is-active .logo-top{animation:fadeIn .9s ease .25s both}
.s-break .d-title{position:absolute;left:0;right:0;top:44%;text-align:center;font-size:96px;font-weight:800;font-family:var(--font-display)}

/* fond dégradé animé (Tour de table) */
.bg-grad-anim{background:linear-gradient(118deg,#16A3EA 0%,#8A86AD 46%,#E4706F 100%);
  background-size:170% 170%;background-position:0% 50%}
.slide.is-active.bg-grad-anim{animation:slideIn .6s var(--ease-soft) both, gradDrift 13s ease-in-out .6s infinite alternate}
@keyframes gradDrift{from{background-position:0% 40%}to{background-position:100% 60%}}

/* ---- Citations ------------------------------------------------------------ */
.quote-mark{position:absolute;font-family:var(--font-display);font-weight:900;font-size:150px;
  line-height:.6;color:var(--navy);user-select:none}
.slide.is-active .quote-mark{animation:popIn .6s var(--ease-out) .5s both}
.s-quote .q-title{font-family:var(--font-display);font-weight:800;font-size:44px;text-align:center}
.s-quote .q-text{font-size:31px;line-height:1.5;text-align:center;max-width:1020px}

/* ---- Ateliers ------------------------------------------------------------- */
.atelier-num{position:absolute;left:96px;top:168px;font-family:var(--font-display);
  font-weight:900;font-size:110px;line-height:1;color:var(--navy)}
.slide.is-active .atelier-num{animation:popIn .55s var(--ease-out) .2s both}
.atelier-title{font-family:var(--font-display);font-weight:800;font-size:48px;text-align:center}
.chrono{position:absolute;right:112px;top:170px;text-align:center;
  font-family:var(--font-display);font-weight:700;font-size:20px;color:var(--navy)}
.chrono::before{content:"";display:block;width:58px;height:58px;margin:0 auto 8px;background:no-repeat center/contain;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><circle cx='13' cy='13.5' r='8' fill='none' stroke='%230B0F25' stroke-width='1.7'/><path d='M13 13.5V9 M10 2.5h6 M19.5 7l1.5-1.5 M5.5 13.5h-4 M6 10.5H3.4 M6 16.5H3.4' fill='none' stroke='%230B0F25' stroke-width='1.7' stroke-linecap='round'/></svg>")}
.slide.is-active .chrono{animation:riseIn .6s var(--ease-out) .45s both}
.slide.is-active .chrono::before{animation:tictac 2.4s ease-in-out 1.1s infinite}
@keyframes tictac{0%,100%{transform:rotate(0)}12%{transform:rotate(-7deg)}24%{transform:rotate(5deg)}36%{transform:rotate(0)}}
.atelier-body{position:absolute;left:190px;right:150px;top:300px;font-size:31px;line-height:1.5}
.atelier-body p+p{margin-top:44px}

/* ---- Listes à badges ------------------------------------------------------ */
.rule-list{display:flex;flex-direction:column;gap:44px;justify-content:center;height:100%}
.rule-item{display:flex;gap:34px;align-items:center}
.badge-sm{width:88px;height:88px;border-radius:50%;flex:0 0 auto;display:flex;align-items:center;
  justify-content:center;font-family:var(--font-display);font-weight:700;font-size:38px;color:#fff}
.rule-item h4{font-family:var(--font-display);font-size:34px;margin-bottom:2px;font-weight:400}
.rule-item h4 b{font-weight:700}
.rule-item p{font-size:25px;color:var(--ink)}
.bg-blue{background:var(--blue)} .bg-slate{background:var(--slate)} .bg-coral{background:var(--coral)}
.bg-navy{background:var(--navy)}
.badge-sm.bg-blue{box-shadow:0 10px 30px rgba(3,161,239,.35)}
.badge-sm.bg-slate{box-shadow:0 10px 30px rgba(116,136,176,.35)}
.badge-sm.bg-coral{box-shadow:0 10px 30px rgba(228,111,113,.35)}

/* ---- Badges ronds (missions) ---------------------------------------------- */
.badge-grid{display:flex;gap:90px;justify-content:center;align-items:flex-start}
.badge-item{width:310px;text-align:center}
.badge{width:190px;height:190px;border-radius:50%;margin:0 auto 40px;display:flex;align-items:center;
  justify-content:center;font-family:var(--font-display);font-weight:800;font-size:56px;color:var(--white)}
.badge.bg-blue{box-shadow:0 18px 50px rgba(3,161,239,.4)}
.badge.bg-slate{box-shadow:0 18px 50px rgba(116,136,176,.4)}
.badge.bg-coral{box-shadow:0 18px 50px rgba(228,111,113,.4)}
.badge-item__text{font-size:27px;line-height:1.4;color:var(--ink)}

/* ---- Mockup de prompt ----------------------------------------------------- */
.prompt-mock{display:flex;align-items:center;gap:22px;background:var(--pill);
  border-radius:var(--r-pill);padding:26px 26px 26px 44px;font-family:var(--font-body);
  font-size:27px;color:#2A2F3C;text-align:left;box-shadow:0 20px 48px rgba(5,9,31,.1)}
.prompt-mock .send{margin-left:auto;flex:0 0 auto;width:58px;height:58px;border-radius:50%;
  background:#0d1021;display:flex;align-items:center;justify-content:center}
.prompt-mock .send::after{content:"";width:20px;height:20px;background:no-repeat center/contain;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 20V5 M5 12l7-7 7 7' fill='none' stroke='white' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/></svg>")}
.slide.is-active .prompt-mock .send{animation:sendPulse 2.6s ease-in-out 1.2s infinite}
@keyframes sendPulse{0%,100%{transform:scale(1);box-shadow:0 0 0 0 rgba(3,161,239,.45)}
  50%{transform:scale(1.06);box-shadow:0 0 0 14px rgba(3,161,239,0)}}

/* ---- Cartes exemple (gris clair) ------------------------------------------ */
.xcard{position:relative;background:var(--pill);border-radius:40px;padding:44px 60px;
  font-size:24px;line-height:1.55;text-align:left;box-shadow:0 24px 60px rgba(5,9,31,.1)}
.xcard h5{font-family:var(--font-display);font-weight:700;font-size:24px;letter-spacing:.5px;margin-bottom:6px}
.xcard ul{margin:0 0 18px 30px}
.xcard ol{margin:0 0 6px 34px}
.xcard li{margin:3px 0}
.xcard .send{position:absolute;right:44px;bottom:40px;width:58px;height:58px;border-radius:50%;
  background:#0d1021;display:flex;align-items:center;justify-content:center}
.xcard .send::after{content:"";width:20px;height:20px;background:no-repeat center/contain;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 20V5 M5 12l7-7 7 7' fill='none' stroke='white' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/></svg>")}
.slide.is-active .xcard .send{animation:sendPulse 2.6s ease-in-out 1.4s infinite}

/* ---- Bandeaux pleine largeur ---------------------------------------------- */
.strip{border-radius:6px;padding:26px 40px;color:var(--white);font-size:25px;line-height:1.45;text-align:center}
.strip b{font-weight:700}
.strip--coral{background:var(--coral);box-shadow:0 16px 44px rgba(228,111,113,.35)}
.strip--blue{background:var(--blue);box-shadow:0 16px 44px rgba(3,161,239,.35)}
.strip--navy{background:var(--navy)}

/* ---- Cadres à étiquette ---------------------------------------------------- */
.frame{position:relative;border:3px solid var(--ink);border-radius:22px;padding:44px 40px 36px}
.frame__label{position:absolute;left:50%;transform:translate(-50%,-50%);top:0;background:var(--white);
  padding:0 22px;font-family:var(--font-display);font-weight:800;font-size:26px;white-space:nowrap}
.frame__label--bottom{top:auto;bottom:0;transform:translate(-50%,50%)}
.pills{display:flex;gap:34px;justify-content:center;flex-wrap:wrap}
.pillbtn{min-width:150px;padding:20px 32px;border-radius:16px;text-align:center;color:#fff;
  font-family:var(--font-display);font-weight:700;font-size:26px}
.pillbtn.bg-blue{box-shadow:0 12px 30px rgba(3,161,239,.32)}
.pillbtn.bg-coral{box-shadow:0 12px 30px rgba(228,111,113,.32)}
.slide.is-active .pills .pillbtn{animation:popIn .5s var(--ease-out) both}
.slide.is-active .pills .pillbtn:nth-child(1){animation-delay:.45s}
.slide.is-active .pills .pillbtn:nth-child(2){animation-delay:.55s}
.slide.is-active .pills .pillbtn:nth-child(3){animation-delay:.65s}
.slide.is-active .pills .pillbtn:nth-child(4){animation-delay:.75s}
.slide.is-active .pills .pillbtn:nth-child(5){animation-delay:.85s}

/* ---- Tuiles usages -------------------------------------------------------- */
.tiles{display:grid;grid-template-columns:repeat(4,212px);gap:54px;justify-content:center}
.tile{height:212px;border-radius:34px;background:var(--navy);color:#fff;display:flex;
  align-items:center;justify-content:center;font-family:var(--font-display);font-weight:700;font-size:26px;
  box-shadow:0 22px 50px rgba(5,9,31,.22)}
.tile--grad{background:var(--grad-diag);background-size:170% 170%;box-shadow:0 22px 55px rgba(228,111,113,.35)}
.slide.is-active .tile--grad{animation:riseIn .55s var(--ease-out) 1.12s both, gradDrift 6s ease-in-out 1.8s infinite alternate}

/* ---- Figures / captures --------------------------------------------------- */
.figure{border-radius:18px;overflow:hidden;box-shadow:0 22px 50px rgba(5,9,31,.16)}
.figure--flat{box-shadow:none}
.figure img{width:100%;height:auto}
.figcap{font-family:var(--font-display);font-weight:700;font-size:26px;text-align:center;margin-top:22px}
.imgcap{background:var(--navy);color:#fff;text-align:center;font-family:var(--font-display);
  font-weight:700;font-size:22px;padding:12px 6px}

/* ---- Timelines ------------------------------------------------------------ */
.tl{position:absolute;left:112px;right:150px;top:190px;display:flex;flex-direction:column;gap:52px}
.tl-item .y{font-family:var(--font-display);font-weight:900;font-size:64px;line-height:1;
  background:linear-gradient(105deg,var(--ink) 55%, #37415f);-webkit-background-clip:text;background-clip:text}
.tl-item .t{font-size:27px;margin-top:8px}

/* ---- Diagrammes ----------------------------------------------------------- */
.diagram-note{color:#8A93A8;font-family:var(--font-body);font-size:24px}
.fbox{border-radius:26px;display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;font-family:var(--font-display);color:#fff;background:var(--navy);padding:18px 26px;
  box-shadow:0 18px 42px rgba(5,9,31,.18)}
.fbox b{font-weight:800}
.fbox--blue{background:var(--blue);box-shadow:0 18px 42px rgba(3,161,239,.3)}
.fbox--coral{background:var(--coral);box-shadow:0 18px 42px rgba(228,111,113,.3)}
.fbox--grad{background:var(--grad-diag)}
.dotp{position:absolute;border-radius:50%}
.slide.is-active .dotp{animation:dotPulse 2.2s ease-in-out 1s infinite}
@keyframes dotPulse{0%,100%{box-shadow:0 0 0 0 rgba(255,255,255,.45)}50%{box-shadow:0 0 0 12px rgba(255,255,255,0)}}

/* ---- Sid ------------------------------------------------------------------ */
.s-sid .band{position:absolute;top:0;left:0;width:100%;height:128px;background:var(--navy);
  display:flex;align-items:center;justify-content:center;z-index:2}
.s-sid .band::after{content:"";position:absolute;left:0;right:0;bottom:-3px;height:3px;background:var(--grad);opacity:.85}
.s-sid .band span{font-family:var(--font-display);font-weight:700;font-size:36px;color:#fff}
.s-sid img.sidbg{position:absolute;left:0;right:0;top:128px;width:100%;height:682px;object-fit:fill}
.s-sid .sidword{position:absolute;left:96px;top:210px;font-family:var(--font-display);font-weight:800;
  font-size:88px;color:#fff;letter-spacing:2px;text-shadow:0 4px 26px rgba(5,9,31,.55);z-index:2}
.s-sid .sidword b{color:var(--slate-light);font-weight:800}
.slide.is-active .sidword{animation:wordSpace .9s var(--ease-soft) .25s both}
@keyframes wordSpace{from{opacity:0;letter-spacing:26px;filter:blur(10px)}to{opacity:1;letter-spacing:2px;filter:none}}

/* ---- Étoiles feedback ------------------------------------------------------ */
.stars{display:flex;gap:34px}
.stars i{width:74px;height:74px;background:no-repeat center/contain;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 2l2.9 6.3 6.9.8-5.1 4.7 1.4 6.8L12 17.2 5.9 20.6l1.4-6.8L2.2 9.1l6.9-.8z' fill='%23F6C444'/></svg>")}
.slide.is-active .stars i{animation:popIn .5s var(--ease-out) both, starGlow 2.8s ease-in-out infinite}
.slide.is-active .stars i:nth-child(1){animation-delay:.5s,1.1s}
.slide.is-active .stars i:nth-child(2){animation-delay:.64s,1.24s}
.slide.is-active .stars i:nth-child(3){animation-delay:.78s,1.38s}
.slide.is-active .stars i:nth-child(4){animation-delay:.92s,1.52s}
.slide.is-active .stars i:nth-child(5){animation-delay:1.06s,1.66s}
@keyframes starGlow{0%,100%{filter:drop-shadow(0 0 4px rgba(246,196,68,.25)) }50%{filter:drop-shadow(0 0 16px rgba(246,196,68,.75))}}

/* ---- Logos flottants (prise de température) -------------------------------- */
.floaty img{animation:none}
.slide.is-active .floaty img{animation:floatY 5.2s ease-in-out infinite alternate}
.slide.is-active .floaty img:nth-of-type(2n){animation-duration:6.1s;animation-delay:-2.2s}
.slide.is-active .floaty img:nth-of-type(3n){animation-duration:5.6s;animation-delay:-3.4s}
.slide.is-active .floaty img:nth-of-type(4n){animation-duration:6.6s;animation-delay:-1.1s}
@keyframes floatY{from{transform:translateY(-7px)}to{transform:translateY(7px)}}

/* =========================================================================
   HUD (hors scène)
   ========================================================================= */
#progress{position:fixed;left:0;top:0;height:4px;width:100%;z-index:60;background:rgba(255,255,255,.07)}
#progress i{display:block;height:100%;width:0;background:var(--grad);transition:width .45s var(--ease-soft);
  box-shadow:0 0 12px rgba(3,161,239,.55)}
#hud{position:fixed;right:14px;bottom:12px;z-index:60;display:flex;align-items:center;gap:6px;
  font-family:var(--font-display);font-size:13px;color:#fff;opacity:.45;transition:opacity .25s}
#hud:hover{opacity:1}
#hud .chip,#hud button{background:rgba(5,9,31,.66);border:1px solid rgba(255,255,255,.14);
  color:#fff;border-radius:10px;padding:7px 12px;font:600 13px var(--font-display);cursor:pointer;
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);transition:border-color .2s, background .2s}
#hud button:hover{background:rgba(3,161,239,.4);border-color:rgba(3,161,239,.6)}
#secchip{position:fixed;left:14px;bottom:12px;z-index:60;background:rgba(5,9,31,.66);
  border:1px solid rgba(255,255,255,.14);color:#fff;border-radius:10px;padding:7px 12px;
  font:600 13px var(--font-display);opacity:.45;transition:opacity .25s;
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
#secchip:hover{opacity:1}
#tapL,#tapR{position:fixed;top:0;bottom:0;width:9%;z-index:50;cursor:pointer}
#tapL{left:0}#tapR{right:0}

/* ---- Sommaire -------------------------------------------------------------- */
#menu{position:fixed;inset:0;z-index:80;background:rgba(2,5,27,.94);color:#fff;
  display:flex;flex-direction:column;align-items:center;justify-content:center;padding:5vh 6vw;
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
#menu[hidden]{display:none}
#menu:not([hidden]){animation:fadeIn .28s ease both}
#menu h2{font:800 clamp(20px,2.6vw,34px) var(--font-display);margin-bottom:1.2vh}
#menu h2::after{content:"";display:block;width:90px;height:4px;border-radius:2px;background:var(--grad);margin:1.4vh auto 0}
#menu .grid{display:grid;grid-template-columns:repeat(3,minmax(200px,1fr));gap:.55vh 3vw;max-width:1200px;width:100%;margin-top:2.2vh}
#menu a{display:flex;gap:10px;align-items:baseline;text-decoration:none;color:#C9D2E8;
  font:500 clamp(12px,1.35vw,17px) var(--font-display);padding:.55vh 8px;border-radius:8px;
  transition:background .18s, color .18s, transform .18s}
#menu a:hover{background:rgba(3,161,239,.18);color:#fff;transform:translateX(4px)}
#menu a b{color:var(--slate);font-weight:700;min-width:2.2em;text-align:right}
#menu a.on{color:#fff;background:rgba(3,161,239,.28)}
#menu .hint{margin-top:3.2vh;color:var(--slate);font:400 13px var(--font-body)}

/* =========================================================================
   LA TRAVERSÉE — enveloppe d'expérience (cosmos.js + experience.js)
   Tout ce bloc est additif : sans les modules JS, rien ne s'active.
   ========================================================================= */

/* ---- Ciel persistant + effets plein écran --------------------------------- */
#cosmos{position:fixed;inset:0;z-index:0;pointer-events:none}
#fx{position:fixed;inset:0;z-index:56;pointer-events:none}

/* ---- Grain photographique -------------------------------------------------- */
body.exp::after{content:"";position:fixed;inset:-8%;z-index:46;pointer-events:none;
  opacity:.045;mix-blend-mode:overlay;
  background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='240' height='240' filter='url(%23n)'/></svg>");
  animation:grainShift .7s steps(1) infinite}
@keyframes grainShift{
  0%{transform:translate(0,0)}12.5%{transform:translate(-2.2%,1.6%)}
  25%{transform:translate(1.8%,-2.4%)}37.5%{transform:translate(-1.4%,-1.8%)}
  50%{transform:translate(2.4%,1.2%)}62.5%{transform:translate(-2.6%,.6%)}
  75%{transform:translate(1.2%,2.2%)}87.5%{transform:translate(-.8%,-2.6%)}100%{transform:translate(0,0)}}

/* ---- Dérive chromatique de la journée -------------------------------------- */
@property --ambA{syntax:'<color>';inherits:true;initial-value:#03A1EF}
@property --ambB{syntax:'<color>';inherits:true;initial-value:#6E86C8}
body{--ambA:#03A1EF;--ambB:#6E86C8;transition:--ambA 2.6s ease,--ambB 2.6s ease}
body[data-part="1"]{--ambA:#2FB3EE;--ambB:#8A86AD}
body[data-part="2"]{--ambA:#7488B0;--ambB:#9C8ABF}
body[data-part="3"]{--ambA:#4EA6E6;--ambB:#D97F8F}
body[data-part="4"]{--ambA:#7FA4E0;--ambB:#E46F71}
body[data-part="5"]{--ambA:#C98FA2;--ambB:#F09A5E}
body[data-part="6"]{--ambA:#F6C444;--ambB:#E46F71}

/* ---- Grammaire des coupes --------------------------------------------------- */
#stage[data-cut="1"] .slide.is-active{animation-duration:.45s}
#stage[data-cut="2"] .slide.is-active{animation-duration:.7s}
#stage[data-cut="3"] .slide.is-active{animation-name:hyperIn;animation-duration:.95s}
#stage.back[data-cut="3"] .slide.is-active{animation-name:hyperInBack}
@keyframes hyperIn{
  from{opacity:0;transform:translateX(90px) scale(.58);filter:blur(26px) brightness(1.6)}
  55%{filter:blur(6px) brightness(1.12)}
  to{opacity:1;transform:none;filter:none}}
@keyframes hyperInBack{
  from{opacity:0;transform:translateX(-90px) scale(.58);filter:blur(26px) brightness(1.6)}
  55%{filter:blur(6px) brightness(1.12)}
  to{opacity:1;transform:none;filter:none}}
#stage[data-cut="3"] .slide.is-active .ghost-num{animation:ghostWarp 1.15s var(--ease-soft) both}
@keyframes ghostWarp{from{opacity:0;transform:translateY(34px) scale(.3);filter:blur(18px)}
  to{opacity:1;transform:none;filter:none}}

/* ---- Parallaxe des ciels (curseur) ----------------------------------------- */
.slide.is-active .fx-stars{transform:translate3d(var(--pax,0px),var(--pay,0px),0)}
.slide.is-active .fx-aurora{transform:translate3d(calc(var(--pax,0px)*1.8),calc(var(--pay,0px)*1.8),0)}

/* ---- Micro-étoiles des bandeaux navy ---------------------------------------- */
.topbar::before,.s-sid .band::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.55;
  background-image:
    radial-gradient(1.3px 1.3px at 8% 34%,rgba(255,255,255,.5),transparent 55%),
    radial-gradient(1.1px 1.1px at 21% 68%,rgba(255,255,255,.35),transparent 55%),
    radial-gradient(1.5px 1.5px at 34% 22%,rgba(255,255,255,.42),transparent 55%),
    radial-gradient(1.1px 1.1px at 68% 74%,rgba(255,255,255,.32),transparent 55%),
    radial-gradient(1.4px 1.4px at 81% 30%,rgba(255,255,255,.45),transparent 55%),
    radial-gradient(1.2px 1.2px at 93% 60%,rgba(124,199,245,.45),transparent 55%)}
.topbar__title,.topbar__sub{position:relative}
.s-sid .band span{position:relative}

/* ---- Skyline — constellation de progression --------------------------------- */
body.exp #progress{display:none}
#skyline{position:fixed;left:0;top:0;right:0;height:22px;z-index:60;opacity:.92;
  transition:height .25s var(--ease-soft),background .25s,opacity .4s}
#skyline::before{content:"";position:absolute;left:0;right:0;top:8px;height:2px;background:rgba(255,255,255,.08)}
.sk-fill{position:absolute;left:0;top:8px;height:2px;
  background:linear-gradient(90deg,var(--blue),var(--ambB,#E46F71));
  box-shadow:0 0 10px rgba(3,161,239,.55);transition:width .45s var(--ease-soft)}
.sk-comet{position:absolute;top:9px;width:7px;height:7px;margin:-3px 0 0 -4px;border-radius:50%;background:#fff;
  box-shadow:0 0 10px 2px rgba(3,161,239,.9),-16px 0 20px -2px rgba(3,161,239,.5);
  transition:left .45s var(--ease-soft)}
.sk-m{position:absolute;top:9px;transform:translate(-50%,-50%);cursor:pointer}
.sk-min{width:4px;height:4px;border-radius:50%;background:rgba(255,255,255,.32)}
.sk-min.passed{background:#9DD4F8}
.sk-at{width:7px;height:7px;background:rgba(246,196,68,.55);transform:translate(-50%,-50%) rotate(45deg)}
.sk-at.passed{background:var(--gold);box-shadow:0 0 8px rgba(246,196,68,.7)}
.sk-br{width:6px;height:6px;border-radius:50%;background:rgba(228,111,113,.55)}
.sk-br.passed{background:var(--coral)}
.sk-maj{width:13px;height:13px;opacity:.65;background:no-repeat center/contain;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><path d='M50 0 C53 30 70 47 100 50 C70 53 53 70 50 100 C47 70 30 53 0 50 C30 47 47 30 50 0 Z' fill='white'/></svg>")}
.sk-maj.passed{opacity:1;filter:drop-shadow(0 0 7px rgba(3,161,239,.9))}
.sk-m:hover{scale:1.5}
.sk-lab{position:absolute;top:15px;left:50%;transform:translateX(-50%);white-space:nowrap;
  font:600 11px var(--font-display);color:#C9D2E8;letter-spacing:.4px;opacity:0;
  transition:opacity .2s;text-shadow:0 2px 8px rgba(2,5,27,.9);pointer-events:none}
#skyline.open{height:46px;background:linear-gradient(180deg,rgba(2,5,27,.88),rgba(2,5,27,0))}
#skyline.open .sk-lab{opacity:1}

/* ---- HUD verre + odomètre + horloge ----------------------------------------- */
#hud .chip,#hud button,#secchip{background:rgba(6,10,30,.55);border-color:rgba(255,255,255,.17);
  -webkit-backdrop-filter:blur(20px) saturate(1.5);backdrop-filter:blur(20px) saturate(1.5)}
#hud{transition:opacity .4s}
#clockchip{opacity:.85;letter-spacing:.5px}
#counter.odo{display:inline-flex;align-items:baseline}
.od{display:inline-block;height:1.15em;overflow:hidden;width:.64em;transition:width .3s var(--ease-soft)}
.od.od-blank{width:0}
.od-strip{display:block;white-space:pre-line;line-height:1.15;font-style:normal;
  transition:transform .5s var(--ease-soft);will-change:transform}
.od-sep{margin:0 5px;opacity:.55}
.od-tot{opacity:.7}

/* ---- Veille (écran pur) ------------------------------------------------------ */
body.idle{cursor:none}
body.idle #hud,body.idle #secchip,body.idle #skyline,body.idle #cursorstar{opacity:0}
#secchip{transition:opacity .4s}

/* ---- Rideau noir (B) --------------------------------------------------------- */
#curtain{position:fixed;inset:0;z-index:58;background:#02030C;opacity:0;pointer-events:none;
  transition:opacity .45s ease}
body.curtain #curtain{opacity:1;pointer-events:auto;cursor:pointer}
body.curtain #cosmos{z-index:59}
body.curtain #hud,body.curtain #skyline,body.curtain #secchip,body.curtain #timerchip,
body.booting #hud,body.booting #skyline,body.booting #secchip{opacity:0;visibility:hidden}

/* ---- Minuteurs d'atelier ----------------------------------------------------- */
.chrono--live{transform:scale(1.5);transform-origin:top right}
.slide.is-active .chrono--live{animation:none}  /* riseIn (fill both) écraserait le scale */
.chrono--live::before{display:none}
.tring{position:relative;display:block;width:96px;height:96px;margin:0 auto}
.tring svg{width:100%;height:100%;transform:rotate(-90deg)}
.tbg{fill:none;stroke:rgba(5,9,31,.12);stroke-width:7}
.tfg{fill:none;stroke:var(--blue);stroke-width:7;stroke-linecap:round;stroke-dasharray:1;
  transition:stroke-dashoffset .4s linear,stroke .4s}
.tdigits{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  font:800 23px var(--font-display);color:var(--navy);letter-spacing:.5px;font-style:normal}
.tstate{display:block;margin-top:9px;font:700 12px var(--font-display);color:var(--slate);
  text-transform:uppercase;letter-spacing:1.6px;text-align:center}
.t-warn .tfg{stroke:var(--gold)}
.t-last .tfg{stroke:var(--coral)}
.t-last .tdigits{color:var(--coral);animation:lastPulse 1.1s ease-in-out infinite}
@keyframes lastPulse{0%,100%{transform:scale(1)}50%{transform:scale(1.06)}}
.t-paused .tfg{stroke:var(--slate)}
.t-paused .tdigits{opacity:.6}
.t-done .tdigits{color:var(--coral)}
.t-done .tstate{color:var(--coral)}
.chrono--live.t-done{animation:doneFlash .9s ease 3}
@keyframes doneFlash{50%{filter:drop-shadow(0 0 20px rgba(228,111,113,.85))}}

/* ---- Reprise à heure fixe (pauses / repas) ----------------------------------- */
.reprise{position:absolute;left:0;right:0;top:57%;text-align:center;color:#fff;z-index:3}
.r-lab{font:400 25px var(--font-display);color:#B9C3DC}
.r-time{font:800 88px/1.12 var(--font-display);text-shadow:0 6px 40px rgba(3,161,239,.35)}
.r-count{font:700 29px var(--font-display);color:var(--blue);margin-top:4px}
.r-hint{font:400 15px var(--font-body);color:rgba(255,255,255,.42);margin-top:12px;letter-spacing:.5px}
.s-break.t-last .r-count{color:var(--coral)}
.s-break.t-last .r-time{animation:lastPulse 1.2s ease-in-out infinite}
.s-break.t-done .r-time{color:var(--gold);animation:lastPulse 1.4s ease-in-out infinite}
.now-clock{position:absolute;left:0;right:0;bottom:34px;text-align:center;
  font:600 20px var(--font-display);color:rgba(255,255,255,.5);z-index:3}

/* ---- Pastilles flottantes ----------------------------------------------------- */
#timerchip{position:fixed;left:50%;bottom:14px;transform:translateX(-50%);z-index:62;
  background:rgba(5,9,31,.72);border:1px solid rgba(255,255,255,.16);color:#fff;border-radius:12px;
  padding:9px 16px;font:700 14px var(--font-display);letter-spacing:.5px;cursor:pointer;
  -webkit-backdrop-filter:blur(16px) saturate(1.4);backdrop-filter:blur(16px) saturate(1.4)}
#timerchip.t-last{border-color:rgba(228,111,113,.75);color:#FFC3C4;animation:chipPulse 1.2s infinite}
@keyframes chipPulse{0%,100%{box-shadow:0 0 0 0 rgba(228,111,113,.4)}50%{box-shadow:0 0 0 8px rgba(228,111,113,0)}}
#timerchip[hidden],#gotochip[hidden]{display:none}
#gotochip{position:fixed;left:50%;bottom:64px;transform:translateX(-50%);z-index:62;
  background:rgba(5,9,31,.82);border:1px solid rgba(3,161,239,.55);color:#fff;border-radius:12px;
  padding:10px 24px;font:800 22px var(--font-display);letter-spacing:2px;
  -webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px)}

/* ---- Carte de la traversée (sommaire M) --------------------------------------- */
#menu.menu--map{padding:3vh 2vw;gap:0;background:rgba(2,5,27,.965)}
#menu.menu--map h2{margin-bottom:0}
.starmap{width:min(94vw,138vh);max-height:78vh;height:auto;display:block}
.mp-base{fill:none;stroke:rgba(255,255,255,.13);stroke-width:2;stroke-dasharray:.5 7;stroke-linecap:round}
.mp-lit{fill:none;stroke:url(#skg);stroke-width:3;stroke-linecap:round;
  filter:drop-shadow(0 0 6px rgba(3,161,239,.65));transition:stroke-dashoffset .7s var(--ease-soft)}
.mapnode{cursor:pointer;pointer-events:bounding-box}
.mn-hit{fill:transparent}
.mn-dot{fill:rgba(255,255,255,.26);transition:fill .3s}
.mp-at .mn-dot{fill:rgba(246,196,68,.5)}
.mp-br .mn-dot{fill:rgba(228,111,113,.55)}
.mapnode.done .mn-dot{fill:#BFE3FA}
.mp-at.done .mn-dot{fill:var(--gold)}
.mp-br.done .mn-dot{fill:var(--coral)}
.mn-star{fill:rgba(255,255,255,.45);transition:fill .3s}
.mapnode.done .mn-star{fill:#fff;filter:drop-shadow(0 0 10px rgba(3,161,239,.85))}
.mn-lab{fill:#8FA0C4;font:500 13px var(--font-display);opacity:.85;transition:fill .2s,opacity .2s}
.mn-lab--maj{fill:#DCE6FA;font:800 20px var(--font-display);opacity:1}
.mapnode.done .mn-lab{fill:#C9D6F0}
.mapnode:hover .mn-lab,.mapnode.focus .mn-lab{fill:#fff;opacity:1}
.mapnode:hover .mn-dot{fill:#fff}
.mapnode.focus .mn-dot{fill:var(--blue)}
.mapnode.focus .mn-star{fill:var(--blue)}
.mapnode.here .mn-lab{fill:#fff}
.mp-cur{fill:#fff;filter:drop-shadow(0 0 12px rgba(3,161,239,.95));pointer-events:none;
  animation:curPulse 2.4s ease-in-out infinite}
@keyframes curPulse{0%,100%{opacity:1}50%{opacity:.5}}

/* cérémonie de clôture : la carte se rejoue */
.ceremony .mn-dot{fill:rgba(255,255,255,.13);transition:fill .45s}
.ceremony .mn-star{fill:rgba(255,255,255,.16);transition:fill .45s,filter .45s}
.ceremony .mn-lab{opacity:.4;transition:opacity .45s,fill .45s}
.ceremony .mapnode.lit .mn-dot{fill:#BFE3FA}
.ceremony .mp-at.lit .mn-dot{fill:var(--gold)}
.ceremony .mp-br.lit .mn-dot{fill:var(--coral)}
.ceremony .mapnode.lit .mn-star{fill:#fff;filter:drop-shadow(0 0 12px rgba(246,196,68,.9))}
.ceremony .mapnode.lit .mn-lab{opacity:1;fill:#EAF1FF}

/* ---- Curseur-étoile ------------------------------------------------------------ */
body.exp.cursorfx #stage,body.exp.cursorfx #tapL,body.exp.cursorfx #tapR{cursor:none}
#cursorstar{position:fixed;left:0;top:0;width:22px;height:22px;z-index:66;pointer-events:none;
  background:no-repeat center/contain;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><path d='M50 0 C53 30 70 47 100 50 C70 53 53 70 50 100 C47 70 30 53 0 50 C30 47 47 30 50 0 Z' fill='white'/></svg>");
  filter:drop-shadow(0 0 6px rgba(3,161,239,.9));scale:1;
  transition:scale .18s var(--ease-out),opacity .35s,filter .18s}
#cursorstar.point{scale:2.1;filter:drop-shadow(0 0 15px rgba(228,111,113,.95))}
#cursorstar.cstill{opacity:0}
.ctrail{position:fixed;left:0;top:0;width:6px;height:6px;border-radius:50%;background:#9BD4F8;
  z-index:65;pointer-events:none;opacity:0;filter:blur(1px)}
body.nocursor #cursorstar,body.nocursor .ctrail{display:none}

/* ---- Générique d'ouverture ------------------------------------------------------ */
#boot{position:fixed;inset:0;z-index:90;background:#02030C;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:40px;transition:opacity .95s ease}
#boot.boot-out{opacity:0;pointer-events:none}
.b-star{width:118px;height:118px;overflow:visible}
.b-glow{fill:rgba(3,161,239,0);filter:blur(16px);animation:bGlow 1.5s ease 1.6s both}
@keyframes bGlow{to{fill:rgba(3,161,239,.5)}}
.b-core{fill:none;stroke:#fff;stroke-width:1.6;stroke-dasharray:1;stroke-dashoffset:1;
  animation:bDraw 1.5s var(--ease-soft) .5s forwards,bFill .8s ease 2s forwards}
@keyframes bDraw{to{stroke-dashoffset:0}}
@keyframes bFill{to{fill:#fff}}
.b-motto{display:flex;font:400 23px/1 var(--font-display);letter-spacing:6px;color:#C9D2E8}
.b-motto i{font-style:normal;opacity:0;white-space:pre;animation:letterIn .6s var(--ease-out) both;
  animation-delay:calc(2.15s + var(--i)*.035s)}
body.booting #hud,body.booting #skyline,body.booting #secchip{opacity:0}

/* ---- Générique de clôture -------------------------------------------------------- */
#credits{position:fixed;inset:0;z-index:85;background:rgba(2,5,27,.97);display:flex;
  flex-direction:column;align-items:center;justify-content:center;gap:1.5vh;
  opacity:0;transition:opacity .5s ease}
body.credits #fx{z-index:86}  /* la célébration passe devant le générique */
#credits.c-run{opacity:1}
#credits.c-out{opacity:0}
.c-map{width:min(92vw,132vh)}
.c-map svg{width:100%;height:auto;display:block}
.c-motto{display:flex;justify-content:center;font:400 clamp(18px,2.3vw,30px)/1 var(--font-display);
  letter-spacing:8px;color:var(--gold);min-height:36px}
.c-motto i{font-style:normal;opacity:0;white-space:pre}
#credits.c-motto-in .c-motto i{animation:letterIn .6s var(--ease-out) both;
  animation-delay:calc(var(--i)*.04s)}
.c-hint{position:absolute;left:26px;bottom:22px;color:rgba(255,255,255,.38);
  font:500 13px var(--font-display)}

/* ---- Mouvement réduit ------------------------------------------------------ */
@media (prefers-reduced-motion: reduce){
  .slide,.slide.is-active,#stage.back .slide.is-active{animation:none;transition:opacity .2s}
  .slide.is-active *,.slide.is-active *::before,.slide.is-active *::after{animation:none!important}
  .slide.is-active .rise,.slide.is-active .fade,.slide.is-active .topbar,
  .slide.is-active .d-title i,.slide.is-active .d-sub{animation:none}
  /* La Traversée */
  #stage[data-cut] .slide.is-active{animation:none;transition:opacity .2s}
  .slide.is-active,.slide.is-active::before,.slide.is-active::after{animation:none!important}
  body.exp::after{animation:none}
  body{transition:none}
  #credits{transition:none}
  #cursorstar,.ctrail{display:none!important}
  .sk-fill,.sk-comet,.od-strip,.mp-lit{transition:none}
  .mp-cur,#timerchip.t-last,.t-last .tdigits,.s-break.t-last .r-time,
  .s-break.t-done .r-time,.chrono--live.t-done{animation:none}
  #boot .b-core,#boot .b-glow,#boot .b-motto i{animation:none;opacity:1;stroke-dashoffset:0;fill:#fff}
  #credits .c-motto i{animation:none;opacity:1}
}