/* ============================================================================
   RCF · MODE DÉMO (V0.1 → V0.2) — habillage des seules couches propres à la démo
   ----------------------------------------------------------------------------
   Tout le reste de ce qu'on voit pendant la démo est le jeu lui-même. Ici, il
   n'y a que ce qui n'existe pas dans le jeu : le bouclier anti-clic, la ligne
   de sous-titres, le bouton « Quitter la démo », l'indicateur de toucher et
   l'écran final. Les couleurs et polices sont les jetons RCF (tokens.css).

   Tout vit dans #rcfDemoCouche, posé sur <body> et recalé sur le rectangle
   exact de #rcfStage (demo-controller.js). Pourquoi pas DANS #rcfStage : le
   cadre crée un contexte d'empilement (transform), et le flash Uchronie
   (#wnFlash) est ajouté au <body> — il recouvrirait alors le bouton
   « Quitter la démo ». Sur le <body>, la couche démo reste au-dessus de tout,
   modales comprises, tout en restant dans le téléphone virtuel.
   ============================================================================ */

/* Entrée du menu Jouer — distincte des modes de jeu : pointillés, étiquette. */
/* La feuille du menu (menu-lot12.css / v1-menu.css) fixe la bordure pleine
   de toutes les cartes avec une spécificité supérieure : la variante démo doit
   donc la surclasser explicitement. */
#l12SheetJouer #l12BtnDemo.menu-btn{ border-style:dashed !important; margin-top:6px; }
#l12BtnDemo .rcf-demo-badge{
  margin-left:auto; margin-right:8px; padding:2px 7px; border-radius:6px;
  font:600 10px/1.4 var(--mono); letter-spacing:.08em; text-transform:uppercase;
  color:var(--hivis); border:1px solid rgba(255,189,25,.45);
}

#rcfDemoCouche{ position:fixed; z-index:2147483000; pointer-events:none; overflow:hidden; }
#rcfDemoCouche > *{ pointer-events:auto; }

/* Bouclier : intercepte les gestes du joueur pendant la démo. Transparent. */
#rcfDemoBouclier{
  position:absolute; inset:0; z-index:1; background:transparent;
  cursor:default; touch-action:none;
}

/* Barre haute : pastille DÉMO + bouton Quitter, toujours au-dessus de tout. */
#rcfDemoBarre{
  position:absolute; top:calc(8px + var(--rcf-safe-t, 0px)); left:10px; right:10px;
  z-index:6; display:flex; align-items:center; gap:8px; pointer-events:none !important;
}
#rcfDemoBarre .rcf-demo-pastille{
  font:700 10px/1 var(--mono); letter-spacing:.14em; color:#10283a;
  background:var(--hivis); padding:5px 8px; border-radius:6px;
  box-shadow:0 4px 14px rgba(0,0,0,.45);
}
#rcfDemoBarre .rcf-demo-progres{
  flex:1 1 auto; height:3px; border-radius:2px; background:rgba(255,255,255,.14); overflow:hidden;
}
#rcfDemoBarre .rcf-demo-progres i{
  display:block; height:100%; width:0; background:var(--hivis); transition:width .6s linear;
}
#rcfDemoQuitter{
  pointer-events:auto; cursor:pointer;
  font:600 10.5px/1 var(--mono); letter-spacing:.1em; text-transform:uppercase;
  color:var(--dim); background:rgba(4,11,19,.72); border:1px solid rgba(197,210,223,.35);
  padding:7px 10px; border-radius:8px; backdrop-filter:blur(6px);
}
#rcfDemoQuitter:hover{ color:var(--ink); border-color:var(--ink); }

/* Sous-titre : court, lisible, en bas de la scène sans cacher les réponses. */
#rcfDemoTexte{
  position:absolute; left:14px; right:14px; bottom:calc(18px + var(--rcf-safe-b, 0px));
  z-index:4; pointer-events:none !important; text-align:center;
  opacity:0; transform:translateY(10px); transition:opacity .45s ease, transform .45s ease;
}
#rcfDemoTexte.on{ opacity:1; transform:none; }
#rcfDemoTexte span{
  display:inline-block; padding:10px 16px; border-radius:12px;
  font:600 17px/1.25 var(--disp); letter-spacing:.02em; text-transform:uppercase;
  color:var(--ink); background:rgba(4,11,19,.86);
  border:1px solid rgba(255,189,25,.55); box-shadow:0 14px 34px rgba(0,0,0,.6);
}
/* V0.2 — quand un toast du jeu occupe le bas de l'écran, le contrôleur pose
   le sous-titre juste au-dessus de lui (style `bottom` calculé,
   surveillerSousTitre) ; la transition rend ce déplacement doux. */
#rcfDemoTexte{ transition:opacity .45s ease, transform .45s ease, bottom .35s ease; }

/* Carton plein écran (introduction). */
#rcfDemoCarton{
  position:absolute; inset:0; z-index:3; display:flex; align-items:center; justify-content:center;
  padding:32px; text-align:center; background:radial-gradient(circle at 50% 40%, rgba(16,40,61,.96), rgba(4,11,19,.99));
  opacity:0; transition:opacity .6s ease; pointer-events:none !important;
}
#rcfDemoCarton.on{ opacity:1; }
#rcfDemoCarton p{
  margin:0; font:600 30px/1.15 var(--disp); text-transform:uppercase; color:var(--ink); letter-spacing:.01em;
}
#rcfDemoCarton p em{ font-style:normal; color:var(--hivis); }
/* V0.7 — « Une partie ≈ 10 minutes » : un titre, trois lignes calmes. */
#rcfDemoCarton.rcf-demo-carton--partie10 p{ display:flex; flex-direction:column; align-items:center; gap:22px; }
#rcfDemoCarton .rcf-demo-10-t{ display:block; font:700 34px/1.1 var(--disp); letter-spacing:.02em; }
#rcfDemoCarton .rcf-demo-10-l{
  display:block; padding-top:18px; border-top:1px solid rgba(255,189,25,.45);
  font:500 17px/1.6 var(--body); text-transform:none; letter-spacing:.01em; color:#dfe8f1;
}

/* V0.2 — le curseur fantôme porte le geste ; la cible ne reçoit plus qu'un
   petit focus, le temps du clic. */
.rcf-demo-tap{
  outline:2px solid rgba(255,189,25,.85) !important; outline-offset:2px;
  box-shadow:0 0 0 4px rgba(255,189,25,.16) !important;
  transition:outline-color .15s, box-shadow .15s;
}

/* Curseur fantôme : il se déplace d'une cible à l'autre (transform piloté par
   le contrôleur), puis s'enfonce légèrement au clic avec une onde. */
#rcfDemoCurseur{
  position:absolute; left:0; top:0; z-index:7; width:26px; height:26px;
  margin:-3px 0 0 -4px;              /* la pointe de la flèche est le point visé */
  pointer-events:none !important; opacity:0; will-change:transform;
  filter:drop-shadow(0 3px 5px rgba(0,0,0,.55));
}
#rcfDemoCurseur.on{ opacity:1; }
#rcfDemoCurseur svg{ display:block; transform-origin:4px 3px; }
#rcfDemoCurseur.clic svg{ animation:rcfDemoClic .26s ease-out; }
#rcfDemoCurseur .onde{
  position:absolute; left:-10px; top:-11px; width:28px; height:28px; border-radius:50%;
  border:2px solid rgba(255,189,25,.9); opacity:0; transform:scale(.3);
}
#rcfDemoCurseur.clic .onde{ animation:rcfDemoOnde .42s ease-out; }
@keyframes rcfDemoClic{ 0%{transform:scale(1)} 45%{transform:scale(.8)} 100%{transform:scale(1)} }
@keyframes rcfDemoOnde{ 0%{opacity:.9; transform:scale(.3)} 100%{opacity:0; transform:scale(1.35)} }

/* Voile de chapitre : un fondu au noir très court. `rupture` (Uchronie) ajoute
   un éclat bref, sans rallonger la transition. */
#rcfDemoVoile{
  position:absolute; inset:0; z-index:2; background:#02070d; opacity:0;
  transition:opacity .24s ease; pointer-events:none !important;
}
#rcfDemoVoile.on{ opacity:1; }
#rcfDemoVoile.rupture.on{ animation:rcfDemoRupture .3s ease-out; }
@keyframes rcfDemoRupture{ 0%{background:#02070d} 45%{background:#3a2f12} 100%{background:#02070d} }

/* Carte de démo (fin de formation) : petite, en haut, jamais sur les réponses. */
#rcfDemoCarte{
  position:absolute; left:50%; top:calc(46px + var(--rcf-safe-t, 0px)); z-index:5;
  transform:translate(-50%,-8px); opacity:0; pointer-events:none !important;
  min-width:220px; max-width:88%; padding:10px 14px; border-radius:12px; text-align:center;
  background:rgba(8,26,40,.94); border:1px solid rgba(69,211,148,.6);
  box-shadow:0 14px 30px rgba(0,0,0,.55); transition:opacity .35s ease, transform .35s ease;
  font:500 12.5px/1.35 var(--body); color:var(--ink);
}
#rcfDemoCarte.on{ opacity:1; transform:translate(-50%,0); }
#rcfDemoCarte b{ display:block; font:700 13px/1.2 var(--disp); letter-spacing:.06em; text-transform:uppercase; color:var(--green); }
#rcfDemoCarte em{ display:block; font-style:normal; color:var(--dim); margin:2px 0 6px; }
#rcfDemoCarte p{ margin:0; display:flex; flex-wrap:wrap; gap:5px; justify-content:center; }
#rcfDemoCarte p span{ padding:2px 7px; border-radius:6px; background:rgba(69,211,148,.14); color:var(--green); font:600 11.5px/1.4 var(--mono); }
.rcf-demo-focus{
  outline:2px solid rgba(255,189,25,.9) !important; outline-offset:3px; border-radius:12px;
  box-shadow:0 0 0 9999px rgba(2,8,14,.42) !important; position:relative; z-index:2;
  transition:box-shadow .35s ease;
}

/* V0.5 — Pause au clic. Le joueur touche la scène : tout s'arrête là où il
   en est. Pas de fenêtre opaque — un voile léger et une étiquette, le jeu
   reste lisible derrière. Les animations propres à la démo sont gelées
   (le curseur, lui, est figé par le contrôleur). */
#rcfDemoPause{
  position:absolute; inset:0; z-index:4; display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:6px;
  background:rgba(2,8,14,.34); opacity:0; visibility:hidden;
  transition:opacity .2s ease, visibility 0s linear .2s; pointer-events:none !important;
}
#rcfDemoPause b{
  font:700 22px/1 var(--disp); letter-spacing:.12em; color:var(--hivis);
  padding:10px 16px 8px; border-radius:12px; background:rgba(4,11,19,.72);
  border:1px solid rgba(255,189,25,.5); box-shadow:0 10px 26px rgba(0,0,0,.45);
}
#rcfDemoPause span{
  font:600 11px/1.3 var(--mono); letter-spacing:.1em; text-transform:uppercase; color:var(--ink);
  padding:4px 9px; border-radius:7px; background:rgba(4,11,19,.62);
}
#rcfDemoCouche.rcf-demo-en-pause #rcfDemoPause{ opacity:1; visibility:visible; transition:opacity .2s ease; }
#rcfDemoCouche.rcf-demo-en-pause #rcfDemoBouclier{ cursor:pointer; }
#rcfDemoCouche.rcf-demo-en-pause *,
#rcfDemoCouche.rcf-demo-en-pause *::before,
#rcfDemoCouche.rcf-demo-en-pause *::after{ animation-play-state:paused !important; }
#rcfDemoCouche.rcf-demo-en-pause .rcf-demo-progres i{ transition:none; }

/* Écran final — V0.7.1 : une fin de bande-annonce (~10 s), puis l'appel à
   jouer. Le fond : de vraies images du jeu, floutées, assombries, en fondus
   lents ; le texte domine toujours. Pas de sommaire des modules. */
#rcfDemoFin{
  position:absolute; inset:0; z-index:5; overflow:hidden; background:#03080e;
  opacity:0; transition:opacity .9s ease; container-type:inline-size;
}
#rcfDemoFin.on{ opacity:1; }
#rcfDemoFin .rcf-fin-fonds, #rcfDemoFin .rcf-fin-fonds i, #rcfDemoFin .rcf-fin-lumiere{ position:absolute; inset:0; pointer-events:none; }
#rcfDemoFin .rcf-fin-fonds i{
  inset:-6%; background:center/cover no-repeat;
  filter:blur(2.5px) brightness(.32) saturate(.8);
  opacity:0; transform:scale(1.1); transition:opacity 1.6s ease, transform 9s linear;
}
#rcfDemoFin .rcf-fin-fonds i.on{ opacity:1; transform:scale(1); }
/* Lumière d'atelier : un halo ambre en hauteur, une vignette qui tient le texte. */
#rcfDemoFin .rcf-fin-lumiere{
  background:
    radial-gradient(70% 38% at 50% 12%, rgba(255,184,28,.16), transparent 70%),
    radial-gradient(120% 70% at 50% 50%, transparent 35%, rgba(2,6,11,.82) 100%),
    linear-gradient(180deg, rgba(3,8,14,.35), rgba(3,8,14,.2) 45%, rgba(3,8,14,.85));
}
#rcfDemoFin .rcf-fin-scene{
  position:relative; z-index:1; height:100%; box-sizing:border-box;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:clamp(14px, 3.4cqi, 22px); padding:48px 20px 28px; text-align:center; text-wrap:balance;
}
/* 0 → 2 s : l'identité, imposante. */
#rcfDemoFin .rcf-fin-marque{ display:flex; flex-direction:column; align-items:center; gap:6px;
  transform:translateY(var(--rcf-fin-dy, 0px)) scale(1.06);
  transition:transform 1.1s cubic-bezier(.4,0,.2,1), opacity 1s ease; }
#rcfDemoFin.leve .rcf-fin-marque{ transform:none; }
#rcfDemoFin .rcf-fin-logo{
  width:min(74%, 300px); height:auto;
  filter:blur(6px) drop-shadow(0 0 22px rgba(120,170,255,.3)) drop-shadow(0 0 30px rgba(255,184,28,.3));
  opacity:0; transform:scale(.9) translateY(10px);
  transition:opacity 1.3s ease, transform 1.5s cubic-bezier(.2,.7,.2,1), filter 1.3s ease;
}
#rcfDemoFin .rcf-fin-logo.on{ opacity:1; transform:none; filter:blur(0) drop-shadow(0 0 22px rgba(120,170,255,.3)) drop-shadow(0 0 30px rgba(255,184,28,.3)); }
#rcfDemoFin .rcf-fin-titre{
  margin:0; font:700 clamp(22px, 7.6cqi, 34px)/1.05 var(--disp); text-transform:uppercase;
  letter-spacing:.34em; color:var(--ink); text-shadow:0 2px 24px rgba(0,0,0,.7);
  opacity:0; transition:opacity 1.2s ease, letter-spacing 1.6s cubic-bezier(.2,.7,.2,1);
}
#rcfDemoFin .rcf-fin-titre.on{ opacity:1; letter-spacing:.12em; }
/* 2 → 5 s : la promesse. */
#rcfDemoFin .rcf-fin-promesse{ transition:opacity 1s ease, transform 1s ease, filter 1s ease; }
#rcfDemoFin .rcf-fin-accroche{
  margin:0 0 12px; font:500 clamp(15px, 4.4cqi, 18px)/1.4 var(--body); letter-spacing:.02em; color:#e4ecf3;
  opacity:0; transform:translateY(8px); transition:opacity .8s ease, transform .8s ease;
}
#rcfDemoFin .rcf-fin-accroche span{ display:inline-block; }
#rcfDemoFin .rcf-fin-lignes{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:6px; }
#rcfDemoFin .rcf-fin-lignes li{
  font:700 clamp(21px, 6.6cqi, 28px)/1.15 var(--disp); text-transform:uppercase; letter-spacing:.03em;
  color:var(--ink); text-shadow:0 2px 18px rgba(0,0,0,.65);
  opacity:0; transform:translateY(14px) scale(1.04); filter:blur(4px);
  transition:opacity .7s ease, transform .8s cubic-bezier(.2,.7,.2,1), filter .7s ease;
}
#rcfDemoFin .rcf-fin-accroche.on, #rcfDemoFin .rcf-fin-lignes li.on{ opacity:1; transform:none; filter:none; }
/* 5 s : la promesse recule, l'invitation prend la place. */
#rcfDemoFin.recul .rcf-fin-promesse{ opacity:.3; transform:scale(.94); filter:blur(1px); }
#rcfDemoFin.recul .rcf-fin-marque{ opacity:.75; transform:scale(.92); }
/* 5 → 8 s : l'invitation, la vraie conclusion. */
#rcfDemoFin .rcf-fin-invitation{ min-height:88px; }
#rcfDemoFin .rcf-fin-pret{
  margin:0 0 6px; font:700 clamp(30px, 9.6cqi, 40px)/1.05 var(--disp); text-transform:uppercase; letter-spacing:.02em;
  color:var(--hivis); text-shadow:0 0 28px rgba(255,184,28,.45), 0 2px 20px rgba(0,0,0,.7);
  opacity:0; transform:scale(1.08); filter:blur(5px);
  transition:opacity .9s ease, transform 1.1s cubic-bezier(.2,.7,.2,1), filter .9s ease;
}
#rcfDemoFin .rcf-fin-suite{
  margin:0; font:600 clamp(17px, 5cqi, 21px)/1.3 var(--body); color:var(--ink);
  opacity:0; transform:translateY(8px); transition:opacity .8s ease, transform .8s ease;
}
#rcfDemoFin .rcf-fin-pret.on, #rcfDemoFin .rcf-fin-suite.on{ opacity:1; transform:none; filter:none; }
/* 8 → 10 s : l'appel à jouer. */
#rcfDemoFin .rcf-demo-cta{ width:100%; max-width:330px; display:flex; flex-direction:column; align-items:center; gap:6px; margin-top:4px; }
#rcfDemoFin .rcf-demo-cta button{ cursor:pointer; opacity:0; pointer-events:none; transform:translateY(10px);
  transition:opacity .7s ease, transform .7s cubic-bezier(.2,.7,.2,1), filter .2s ease, box-shadow .2s ease; }
#rcfDemoFin .rcf-demo-cta button.on{ opacity:1; pointer-events:auto; transform:none; }
#rcfDemoFin .rcf-demo-go{
  position:relative; overflow:hidden; width:100%; min-height:62px; border-radius:15px;
  background:var(--yellowgrad); border:1px solid #ffd96a; color:#10283a;
  font:800 17px/1 var(--disp); letter-spacing:.12em; text-transform:uppercase;
  box-shadow:0 1px 0 rgba(255,255,255,.6) inset, 0 0 0 4px rgba(255,189,25,.12), 0 20px 44px -14px rgba(255,170,0,.85);
}
/* Un seul reflet qui traverse le bouton à son apparition — pas de boucle. */
#rcfDemoFin .rcf-demo-go::after{
  content:""; position:absolute; top:0; bottom:0; left:-40%; width:30%;
  background:linear-gradient(100deg, transparent, rgba(255,255,255,.55), transparent);
  transform:skewX(-18deg); opacity:0;
}
#rcfDemoFin .rcf-demo-go.on::after{ animation:rcfFinReflet 1.1s .5s ease-out 1 both; }
@keyframes rcfFinReflet{ 0%{ left:-40%; opacity:1 } 100%{ left:120%; opacity:0 } }
#rcfDemoFin .rcf-demo-go:hover, #rcfDemoFin .rcf-demo-go:focus-visible{
  filter:brightness(1.06); box-shadow:0 1px 0 rgba(255,255,255,.6) inset, 0 0 0 5px rgba(255,189,25,.2), 0 22px 48px -12px rgba(255,170,0,.95);
}
#rcfDemoFin .rcf-demo-go:active{ transform:translateY(1px) scale(.985); }
#rcfDemoFin .rcf-demo-menu{
  min-height:44px; padding:8px 14px; background:none; border:0; color:var(--dim);
  font:600 13px/1 var(--body); letter-spacing:.04em; text-decoration:underline; text-decoration-color:rgba(197,210,223,.35);
  text-underline-offset:4px;
}
#rcfDemoFin .rcf-demo-menu:hover, #rcfDemoFin .rcf-demo-menu:focus-visible{ color:var(--ink); }

@media (prefers-reduced-motion: reduce){
  #rcfDemoTexte, #rcfDemoCarton, #rcfDemoFin, #rcfDemoVoile, #rcfDemoCarte,
  #rcfDemoFin *{ transition:none !important; }
  #rcfDemoFin .rcf-demo-go.on::after{ animation:none; }
  #rcfDemoCurseur{ transition:none !important; }
  #rcfDemoCurseur.clic svg, #rcfDemoCurseur.clic .onde, #rcfDemoVoile.rupture.on{ animation:none; }
}

/* V0.7.2 — Barre jaune navigable : une piste haute (zone de toucher), des
   repères discrets pour les checkpoints, le nom du chapitre au survol. */
#rcfDemoBarre .rcf-demo-piste{
  position:relative; flex:1 1 auto; display:flex; align-items:center; padding:10px 0;
  pointer-events:auto !important; cursor:pointer; touch-action:none;
}
#rcfDemoBarre .rcf-demo-piste .rcf-demo-progres{ position:relative; width:100%; height:4px; overflow:visible; }
#rcfDemoBarre .rcf-demo-piste .rcf-demo-progres i{ border-radius:2px; }
#rcfDemoBarre .rcf-demo-progres b{
  position:absolute; top:-1px; width:2px; height:6px; margin-left:-1px; border-radius:1px;
  background:rgba(255,255,255,.38); pointer-events:none;
}
#rcfDemoBarre .rcf-demo-piste:hover .rcf-demo-progres{ height:6px; }
#rcfDemoBarre .rcf-demo-bulle{
  position:absolute; top:calc(100% - 2px); transform:translateX(-50%); white-space:nowrap;
  font:600 10px/1 var(--mono); letter-spacing:.08em; font-style:normal; text-transform:uppercase;
  color:#10283a; background:var(--hivis); padding:4px 6px; border-radius:5px;
  opacity:0; transition:opacity .15s ease; pointer-events:none;
}
#rcfDemoBarre .rcf-demo-piste:hover .rcf-demo-bulle{ opacity:1; }

/* Avance rapide vers un checkpoint : les écrans défilent derrière ce voile. */
#rcfDemoSaut{
  position:absolute; inset:0; z-index:6; display:flex; flex-direction:column; align-items:center;
  justify-content:center; gap:10px; background:#03080e; opacity:0; visibility:hidden;
  transition:opacity .25s ease, visibility 0s linear .25s; pointer-events:none !important;
}
#rcfDemoSaut.on{ opacity:1; visibility:visible; transition:opacity .15s ease; }
#rcfDemoSaut b{ font-size:28px; color:var(--hivis); }
#rcfDemoSaut span{ font:700 22px/1.1 var(--disp); text-transform:uppercase; letter-spacing:.06em; color:var(--ink); }
#rcfDemoSaut i{ font:500 12px/1 var(--mono); letter-spacing:.12em; text-transform:uppercase; color:var(--dim); font-style:normal; }
#rcfDemoCouche.rcf-demo-en-saut #rcfDemoCurseur,
#rcfDemoCouche.rcf-demo-en-saut #rcfDemoTexte,
#rcfDemoCouche.rcf-demo-en-saut #rcfDemoCarton{ visibility:hidden !important; }