/* ============================================================================
   HOGWARTS DESTINY : SYSTÈME DE DESIGN
   ----------------------------------------------------------------------------
   Une seule langue visuelle pour tout le jeu.

     · Nuit indigo : #05041a au plus profond, #17133e sous la voûte.
     · Or pour ce qui compte, bleu Reliques pour la monnaie premium.
     · Angles vifs. Aucun arrondi, nulle part, sauf les blasons et les jetons
       de monnaie, qui sont des disques par nature.
     · Filets de 1px, jamais de bordure épaisse. Le trait sépare, il n’encadre pas.
     · Grain de papier sur les panneaux, pour que la surface ait une matière.
     · Progressions en crans segmentés, jamais en barre continue lisse.
     · Trois familles : Cinzel pour les titres, Cormorant Garamond pour le corps,
       Jost très interlettré pour les libellés techniques et les boutons.
   ============================================================================ */

/* ============================================================
   1. JETONS
   ============================================================ */
:root{
  /*, profondeurs de la nuit, */
  --bg-0:#05041a;
  --bg-1:#0c0a26;
  --bg-2:#12102410;
  --bg-3:#17133e;
  --ink:#04030f;

  /*, surfaces, */
  --surf-1:rgba(28,23,68,.58);
  --surf-2:rgba(34,28,80,.72);
  --surf-3:rgba(58,47,120,.80);
  --surf-solid:#0e0c26;
  --glass:rgba(9,7,28,.72);
  --glass-hi:rgba(28,23,68,.82);
  /* Le fond de carte des panneaux narratifs : du plus clair en haut vers
     le plus sombre en bas, comme une page éclairée par le dessus. */
  --carte-fond:linear-gradient(180deg, rgba(28,23,68,.72) 0%, rgba(12,10,34,.92) 100%);

  /*, traits, */
  --line:rgba(140,128,220,.16);
  --line-2:rgba(140,128,220,.28);
  --line-hi:rgba(230,200,119,.28);
  --line-or:rgba(230,200,119,.45);
  --hairline:rgba(255,255,255,.06);

  /*, encre, */
  --parchment:#e8e3f5;
  --parchment-dim:rgba(226,220,245,.72);
  --parchment-mute:rgba(200,190,230,.5);
  --faint:rgba(200,190,230,.34);

  /*, or, */
  --gold:#e6c877;
  --gold-bright:#f4dda0;
  --gold-pale:#f7ecca;
  --gold-warm:#f0d78c;
  --gold-dim:rgba(230,200,119,.45);
  --gold-deep:#9c7223;
  /* Le métal des boutons pleins : un dégradé, pas une couleur plate. */
  --or-massif:linear-gradient(180deg,#f7e6b4 0%, #e0bd6d 52%, #c99f45 100%);
  --or-encre:#241906;

  /*, accents fonctionnels, */
  --accent:#e6c877;
  --accent-2:#f4dda0;
  --accent-soft:rgba(230,200,119,.09);
  --accent-glow:rgba(230,200,119,.35);
  --reliques:#8fd0f0;
  --reliques-pale:#cfeaff;
  --good:#2f6ea8;
  --evil:#8e2f3c;
  --ok:#4fa88a;
  --up:#7fd8a8;
  --down:#c2545f;
  --arcane:#9a7ad8;
  --violet:#6f61b8;

  /*, teintes des matières et caractéristiques, */
  --t-courage:#c2545f;
  --t-intelligence:#7fb3e0;
  --t-charisme:#d98fb8;
  --t-ambition:#e0bd6d;
  --t-sortileges:#e0bd6d;
  --t-metamorphose:#9a7ad8;
  --t-potions:#4fa88a;
  --t-dcfm:#c2545f;
  --t-botanique:#6fae5c;
  --t-creatures:#c98a4a;
  --t-astronomie:#5f8ed8;
  --t-histoire:#a08b6a;
  --t-moldus:#d0a24a;
  --t-divination:#b06ec4;
  --t-vol:#8a94b8;

  /*, élévation, */
  --e1:0 2px 6px rgba(0,0,0,.6);
  --e2:0 10px 30px -14px rgba(0,0,0,.95);
  --e3:0 30px 70px -24px rgba(0,0,0,1);
  --e4:0 50px 110px -60px rgba(0,0,0,1);
  --inset-top:inset 0 1px 0 rgba(255,255,255,.06);
  --shadow:var(--e3);

  /*, rayons : il n’y en a pas. Les jetons ronds les redéclarent seuls. , */
  --r-xs:0px;
  --r-sm:0px;
  --r-md:0px;
  --r-lg:0px;
  --r-xl:0px;
  --radius:0px;

  /*, rythme, */
  --sp-1:6px;  --sp-2:10px; --sp-3:14px; --sp-4:20px;
  --sp-5:28px; --sp-6:38px; --sp-7:52px;

  /*, mouvement, */
  --ease:cubic-bezier(.22,.9,.3,1);
  --ease-out:cubic-bezier(.19,1,.22,1);
  --spring:cubic-bezier(.18,1.25,.35,1);
  --t-fast:.16s;
  --t:.25s;
  --t-slow:.5s;

  /*, typographie, */
  --font-title:'Cinzel',serif;
  --font-display:'Cinzel',serif;
  --font-body:'Cormorant Garamond',Garamond,serif;
  --font-quote:'Cormorant Garamond',Garamond,serif;
  --font-tech:'Jost',system-ui,sans-serif;
  --fs-micro:10px;
  --fs-cap:11px;
  --fs-sm:15px;
  --fs-base:19px;
  --fs-lg:21px;
  --track-cap:.26em;
  --track-wide:.34em;

  /*, chrome, */
  --topbar-h:78px;
  --footbar-h:46px;
  --charbar-w:314px;
  --scene-w:1800px;
  --carte-w:1240px;
  --lecture-w:860px;
}

/* Identité de maison : elle teinte les emblèmes et les liserés, elle ne
   repeint pas l’or. L’or reste l’or, dans les quatre maisons. */
body[data-house="gryffondor"]{
  --house-a:#7f1d1d; --house-b:#e0a03a; --house-tint:#c2545f;
}
body[data-house="serpentard"]{
  --house-a:#14532d; --house-b:#a9cfba; --house-tint:#4fa88a;
}
body[data-house="serdaigle"]{
  --house-a:#1e3a8a; --house-b:#b08d57; --house-tint:#7fb3e0;
}
body[data-house="poufsouffle"]{
  --house-a:#78350f; --house-b:#f5d76e; --house-tint:#e0bd6d;
}

/* ============================================================
   2. SOCLE
   ============================================================ */
*{margin:0;padding:0;box-sizing:border-box}
/* Un bouton, un champ, une liste déroulante n’héritent PAS de la police
   de la page : le navigateur leur impose la sienne. Sans cette ligne,
   chaque bouton qui oublie de déclarer sa famille sort en sans-serif du
   système, seul texte du jeu à ne pas être en Cormorant ou en Cinzel.
   C’est ce qui arrivait aux choix de la soirée de noces et à la liste
   des clubs. On n’hérite que la famille : la taille reste à chaque
   bouton, parce que beaucoup comptent sur la leur. */
button,input,select,textarea,optgroup{font-family:inherit}
/* La page ne défile jamais : c’est une règle du projet, et elle se tient
   ici plutôt que dans chaque écran. Le coupable était l’animation
   d’entrée, `screenIn`, qui part d’un `translateY(14px)` : pendant sa
   demi-seconde, l’écran actif dépassait le bas du viewport et rendait
   toute la page défilante de quatorze pixels, exactement, à chaque
   changement d’écran. Une transformation ne doit pas pouvoir créer une
   barre de défilement sur le document.
   Ce qui déborde vraiment défile dans son propre cadre : la scène, la
   Fiche, la boutique. La colonne de gauche, elle, ne déborde pas. */
html,body{height:100%;overflow:hidden}
html{scroll-behavior:smooth}
body{
  background:radial-gradient(110% 65% at 50% -10%, var(--bg-3) 0%, var(--bg-1) 46%, var(--bg-0) 100%);
  background-attachment:fixed;
  color:var(--parchment);
  font-family:var(--font-body);
  font-size:var(--fs-base);
  line-height:1.6;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
/* Le grain argentique reste, mais discret : il donne une matière au fond
   sans jamais salir le texte. */
body::before{
  content:'';position:fixed;inset:-50%;pointer-events:none;z-index:2;opacity:.035;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:grainShift 7s steps(6) infinite;
}
@keyframes grainShift{
  0%{transform:translate(0,0)}20%{transform:translate(-4%,3%)}40%{transform:translate(3%,-3%)}
  60%{transform:translate(-3%,-4%)}80%{transform:translate(4%,2%)}100%{transform:translate(0,0)}
}
body::after{
  content:'';position:fixed;inset:0;pointer-events:none;z-index:2;
  background:radial-gradient(ellipse at center, transparent 60%, rgba(0,0,0,.42) 100%);
}
::selection{background:rgba(217,180,90,.3)}

/* focus clavier, visible partout, jamais au clic souris. Angle vif, comme
   tout le reste. */
:focus{outline:none}
:focus-visible{
  outline:1px solid var(--gold-bright);
  outline-offset:3px;
  border-radius:0;
}

/* ---------- fond étoilé ----------
   Le calque déborde de huit pour cent de chaque côté : sur l’accueil il
   coulisse avec la souris, et sans cette marge il découvrirait une bande
   sans étoiles au bord de l’écran. */
#stars{
  position:fixed;inset:-8%;z-index:0;pointer-events:none;opacity:.5;
  transform:translate3d(var(--px,0px),var(--py,0px),0);
}
.star{
  position:absolute;border-radius:50%;background:#dcd8ff;opacity:.7;
  animation:twinkle 4s infinite ease-in-out;box-shadow:0 0 6px rgba(220,216,255,.7);
}
@keyframes twinkle{0%,100%{opacity:.12}50%{opacity:.9}}

/* ---------- écrans ---------- */
#app{position:relative;z-index:3;min-height:100vh}
.screen{display:none;min-height:100vh}
.screen.active{display:block;animation:screenIn .5s var(--ease-out)}
@keyframes screenIn{
  from{opacity:0;transform:translateY(14px)}
  to{opacity:1;transform:none}
}
@keyframes floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-13px)}}
@keyframes goldSweep{to{background-position:200% center}}
@keyframes cardIn{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
@keyframes fxPop{from{opacity:0;transform:scale(.62)}to{opacity:1;transform:scale(1)}}
@keyframes pulseSoft{0%,100%{opacity:.55}50%{opacity:1}}
/* Les quatre mouvements de la refonte. */
@keyframes rise{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}
@keyframes shimmer{0%{transform:translateX(-140%)}100%{transform:translateX(360%)}}
@keyframes segIn{from{transform:scaleX(0);opacity:.2}to{transform:scaleX(1);opacity:1}}
@keyframes glowPulse{0%,100%{box-shadow:0 0 0 rgba(230,200,119,0)}50%{box-shadow:0 0 14px rgba(230,200,119,.35)}}

/* ============================================================
   3. TYPOGRAPHIE PARTAGÉE
   ------------------------------------------------------------
   Trois familles, trois emplois, jamais mélangés :

     Cinzel              les titres, les noms propres, les chiffres qui comptent
     Cormorant Garamond  tout ce qui se lit en phrases
     Jost                les libellés techniques, très interlettrés, en capitales
   ============================================================ */

/* Le libellé technique : la brique la plus réutilisée du jeu. Petite,
   en capitales, très espacée, jamais en gras. */
.u-tech{
  font-family:var(--font-tech);font-size:var(--fs-micro);font-weight:400;
  letter-spacing:var(--track-cap);text-transform:uppercase;
  color:var(--parchment-mute);
}
.u-tech-or{color:rgba(230,200,119,.75)}
.u-tech-wide{letter-spacing:var(--track-wide)}

.u-cap,.sb-title,.ev-kicker,.step-label,.exam-progress,.tl-eyebrow{
  font-family:var(--font-tech);
  font-weight:400;
  text-transform:uppercase;
  letter-spacing:var(--track-cap);
}
.gold-text{color:var(--gold-warm)}
.mut{color:var(--parchment-dim)}
.center{text-align:center}
.warn-text{color:var(--down)}
.house-text-gryffondor{color:#ec6d5a}
.house-text-serpentard{color:#5fbe83}
.house-text-serdaigle{color:#7fa9ec}
.house-text-poufsouffle{color:#e5c04b}
hr.sep{
  border:none;height:1px;margin:var(--sp-5) 0;
  background:linear-gradient(90deg,transparent,var(--line-2) 22%,var(--line-2) 78%,transparent);
}

/* Le filet qui prolonge un intitulé jusqu’au bord, et s’éteint en route. */
.u-filet{flex:1;height:1px;background:linear-gradient(90deg,rgba(230,200,119,.25),rgba(230,200,119,0))}

/* Les titres ne sont plus dégradés : ils sont d’une seule couleur d’ivoire
   doré, avec une lueur derrière. Le dégradé faisait bavure aux petites
   tailles et mangeait les accents. */
.u-goldtitle,.step-title,.ev-title,.epi-title{
  font-family:var(--font-title);font-weight:600;
  color:var(--gold-pale);
  text-shadow:0 0 48px rgba(230,200,119,.2);
  background:none;-webkit-background-clip:border-box;background-clip:border-box;
}

/* Les quatre équerres. Un panneau les porte en écrivant `data-equerres`,
   et elles se dessinent seules aux quatre coins. */
.u-equerres{position:relative}
.u-equerres::before,.u-equerres::after{
  content:'';position:absolute;width:16px;height:16px;pointer-events:none;z-index:1;
  border-color:var(--line-or);border-style:solid;border-width:0;
}
.u-equerres::before{left:12px;top:12px;border-left-width:1px;border-top-width:1px}
.u-equerres::after{right:12px;bottom:12px;border-right-width:1px;border-bottom-width:1px}
/* Les deux coins restants passent par un enfant dédié, parce qu’un élément
   n’a que deux pseudos. */
.u-equerres > .eq2{position:absolute;inset:0;pointer-events:none;z-index:1}
.u-equerres > .eq2::before,.u-equerres > .eq2::after{
  content:'';position:absolute;width:16px;height:16px;
  border-color:var(--line-or);border-style:solid;border-width:0;
}
.u-equerres > .eq2::before{right:12px;top:12px;border-right-width:1px;border-top-width:1px}
.u-equerres > .eq2::after{left:12px;bottom:12px;border-left-width:1px;border-bottom-width:1px}

/* Le grain de papier des panneaux : deux trames croisées, presque invisibles,
   qui empêchent la surface d’être un aplat mort. */
.u-grain{position:relative}
.u-grain > .grain{
  position:absolute;inset:0;pointer-events:none;opacity:.5;z-index:0;
  background-image:
    repeating-linear-gradient(51deg, rgba(255,255,255,.022) 0 1px, transparent 1px 3px),
    repeating-linear-gradient(-38deg, rgba(0,0,0,.05) 0 1px, transparent 1px 4px);
}

/* ============================================================
   4. BOUTONS & CHAMPS
   ============================================================ */
/* Le bouton sobre : un cadre de 1px sur du verre sombre, un libellé Jost
   très interlettré. Il ne bombe pas, il ne s’arrondit pas. Au survol, le
   filet passe à l’or et le texte s’éclaircit. */
.btn{
  position:relative;overflow:hidden;
  font-family:var(--font-tech);font-weight:400;font-size:12px;letter-spacing:.26em;
  text-transform:uppercase;text-indent:.26em;
  padding:13px 24px;border-radius:0;border:1px solid var(--line-2);
  cursor:pointer;color:rgba(226,220,245,.72);
  background:linear-gradient(180deg, rgba(34,28,80,.5), rgba(14,11,38,.6));
  box-shadow:none;
  transition:color var(--t),border-color var(--t),background var(--t),transform var(--t) var(--ease);
}
.btn:hover{border-color:rgba(230,200,119,.5);color:var(--gold-bright);background:rgba(230,200,119,.07)}
.btn:active{transform:translateY(1px);transition-duration:.08s}
.btn:disabled{opacity:.34;cursor:not-allowed;transform:none;filter:saturate(.3)}

/* Le bouton d’or massif : c’est le seul aplat clair du jeu. On ne le sort
   que pour l’action qui fait avancer l’histoire, une par écran. Son reflet
   balaye lentement, en boucle, pour qu’on le voie même sans le survoler. */
.btn-gold{
  font-family:var(--font-title);font-weight:600;font-size:14px;letter-spacing:.28em;
  text-indent:.28em;text-transform:uppercase;
  padding:15px 34px;
  background:var(--or-massif);
  color:var(--or-encre);border:1px solid var(--gold-warm);
  text-shadow:none;
  box-shadow:0 18px 40px -22px rgba(230,200,119,.95);
}
.btn-gold::after{
  content:'';position:absolute;top:0;bottom:0;left:0;width:80px;pointer-events:none;
  background:linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,.4), rgba(255,255,255,0));
  animation:shimmer 5s ease-in-out infinite;
}
.btn-gold:hover{
  background:var(--or-massif);color:var(--or-encre);border-color:#fff3c8;
  transform:translateY(-2px);
  box-shadow:0 24px 48px -20px rgba(230,200,119,1);
}
/* Les équerres du bouton d’or : deux coins opposés seulement, en creux
   dans le métal. */
.btn-gold .eq{position:absolute;width:13px;height:13px;opacity:.45;border-color:currentColor;border-style:solid;border-width:0}
.btn-gold .eq-a{left:10px;top:10px;border-left-width:1px;border-top-width:1px}
.btn-gold .eq-b{right:10px;bottom:10px;border-right-width:1px;border-bottom-width:1px}

.btn-ghost{
  background:transparent;border-color:var(--line-2);color:rgba(226,220,245,.65);
  backdrop-filter:blur(8px);box-shadow:none;
}
.btn-ghost:hover{border-color:rgba(230,200,119,.5);color:var(--gold-bright);background:rgba(230,200,119,.07)}
/* Le bouton nu : rien qu’un libellé, pour Quitter et les liens de service. */
.btn-nu{
  padding:12px 14px;background:transparent;border:0;
  font-family:var(--font-tech);font-size:12px;letter-spacing:.24em;text-transform:uppercase;
  color:var(--parchment-mute);cursor:pointer;transition:color var(--t);
}
.btn-nu:hover{color:var(--gold-bright)}
.btn-big{font-size:17px;letter-spacing:.3em;text-indent:.3em;padding:22px 52px;border-radius:0}
.btn-block{width:100%;display:block}

/* Le rappel de touche : un petit cadre carré à côté d’un libellé. */
.u-touche{
  display:inline-block;padding:2px 5px;border:1px solid rgba(230,200,119,.3);
  font-family:var(--font-tech);font-size:9px;letter-spacing:.06em;
  color:rgba(230,200,119,.65);
}

/* ---------- champs ---------- */
.field{margin-bottom:var(--sp-4)}
.field label{
  display:block;font-family:var(--font-tech);font-size:var(--fs-micro);
  letter-spacing:var(--track-cap);text-transform:uppercase;color:rgba(230,200,119,.7);
  margin-bottom:9px;
}
.field input[type=text]{
  width:100%;max-width:440px;padding:14px 18px;
  font-family:var(--font-body);font-size:21px;color:var(--parchment);
  background:rgba(9,7,28,.6);border:1px solid var(--line-2);border-radius:0;
  box-shadow:none;
  transition:border-color var(--t),background var(--t);
}
.field input[type=text]::placeholder{color:var(--faint);font-style:italic}
.field input[type=text]:focus{
  border-color:var(--gold);background:rgba(14,11,38,.75);
  box-shadow:0 0 22px -8px rgba(230,200,119,.5);
}

/* ============================================================
   5. ÉCRAN TITRE : scène cinématique
   ============================================================ */
/* L’écran titre est une colonne : le décor derrière, le contenu qui
   occupe la place disponible, et le bas de page posé dessous. */
/* L’accueil tient dans l’écran, comme le jeu : rien à faire défiler pour
   voir la porte d’entrée. Les trois blocs se serrent au besoin, et si
   la fenêtre devient vraiment basse, c’est la colonne de droite qui
   défile toute seule, sans barre visible. */
#screen-title{display:none;position:relative;overflow:hidden}
#screen-title.active{
  display:flex;flex-direction:column;
  height:100vh;height:100dvh;min-height:0;overflow:hidden;
}

/* -- le décor de l’accueil --
   Tout est en formes découpées : pas une image à charger, et le décor
   reste net à n’importe quelle taille d’écran. Quatre plans, du fond
   vers l’avant : la voûte qui respire, la lune, les crêtes, le château.
   Un voile les noie tous à mesure qu’on descend, pour que le texte se
   lise sans effort par-dessus. */
.tl-scene{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden}

/* La voûte : un disque de lumière violette au-dessus de la page, qui
   respire lentement. C’est elle qui éclaire tout le reste. */
.tl-voute{
  position:absolute;top:-14vh;left:50%;transform:translateX(-50%);
  width:78vw;height:78vw;max-width:1500px;max-height:1500px;border-radius:50%;
  background:radial-gradient(circle, rgba(120,104,220,.20) 0%, rgba(80,68,180,.09) 38%, rgba(0,0,0,0) 68%);
  animation:respire 14s ease-in-out infinite;
}
@keyframes respire{0%,100%{opacity:.8;transform:translateX(-50%) scale(1)}50%{opacity:1;transform:translateX(-50%) scale(1.05)}}

/* La lune : un croissant obtenu par une ombre interne décalée, pas par
   un masque. Deux cercles fins autour, et un grain en biais dessus. */
.tl-lune{
  position:absolute;right:6%;top:5%;width:118px;height:118px;
  transform:translate3d(var(--px,0px),var(--py,0px),0);
}
.tl-lune-halo{
  position:absolute;left:50%;top:50%;width:300%;height:300%;
  transform:translate(-50%,-50%);border-radius:50%;
  background:radial-gradient(circle, rgba(196,214,244,.11) 0%, rgba(150,132,196,.05) 38%, rgba(150,132,196,0) 66%);
  animation:respire 11s ease-in-out infinite;
}
.tl-lune-corps{
  position:absolute;inset:0;border-radius:50%;
  box-shadow:inset -20px -7px 0 -3px rgba(232,236,246,.9), 0 0 44px rgba(206,218,244,.18);
}
.tl-lune-cercle{position:absolute;inset:0;border-radius:50%;border:1px solid rgba(230,200,119,.2)}
.tl-lune-cercle2{position:absolute;inset:9px;border-radius:50%;border:1px solid rgba(230,200,119,.09)}
.tl-lune-grain{
  position:absolute;inset:0;border-radius:50%;opacity:.5;
  background-image:repeating-linear-gradient(48deg, rgba(255,255,255,.03) 0 1px, transparent 1px 4px);
}

/* Les deux crêtes de collines, découpées au polygone. La première est
   claire et laisse passer le ciel, la seconde est presque noire. Elles
   débordent volontairement des deux côtés : c’est cette marge qui leur
   permet de coulisser à la souris sans découvrir le bord de l’écran. */
.tl-crete{
  position:absolute;left:-4%;right:-4%;bottom:0;height:56vh;
  transform:translate3d(var(--px,0px),var(--py,0px),0);
  background:linear-gradient(180deg, rgba(10,8,32,0) 0%, rgba(10,8,32,.35) 40%, #0a0820 100%);
  clip-path:polygon(0% 78%, 9% 66%, 18% 72%, 27% 55%, 34% 62%, 41% 44%, 47% 52%, 52% 30%, 57% 47%, 63% 38%, 70% 58%, 78% 48%, 86% 64%, 94% 56%, 100% 70%, 100% 100%, 0% 100%);
}
.tl-crete2{
  position:absolute;left:-6%;right:-6%;bottom:0;height:34vh;
  transform:translate3d(var(--px,0px),var(--py,0px),0);
  background:linear-gradient(180deg,#0b0922 0%, #070518 100%);
  clip-path:polygon(0% 62%, 12% 48%, 21% 58%, 30% 34%, 38% 46%, 46% 22%, 53% 40%, 61% 30%, 69% 52%, 79% 40%, 88% 56%, 96% 46%, 100% 58%, 100% 100%, 0% 100%);
}

/* Le château : une boîte de 1200 par 560, ancrée au bas de l’écran et
   centrée. Chaque tour est un bloc, chaque toit un triangle découpé.
   Le masque du haut fait disparaître les flèches dans la nuit.

   Le dessin est à taille fixe, mais la boîte, elle, se met à l’échelle
   de la fenêtre : c’est `ajusterDecor()` dans accueil.js qui pose `--k`
   et le débordement du bas. Sans ça, le château gardait ses 1200 px sur
   un écran de 1280 et sa base plongeait quatre-vingts pixels sous la
   fenêtre : les tours arrivaient au milieu du texte et le rocher avait
   disparu. Il doit se poser sur les collines, pas les traverser.

   Le masque n’est volontairement pas en no-repeat. Les flèches dépassent
   de la boîte, la trame du dégradé se recopie au-dessus, et elles
   s’effacent donc en montant vers la nuit. C’est exactement l’effet
   voulu : le château n’a pas de sommet net, il se dissout. */
.tl-chateau{
  position:absolute;left:50%;bottom:-2vh;width:1200px;height:560px;
  transform:translateX(-50%) translate3d(var(--px,0px),var(--py,0px),0) scale(var(--k,.86));
  transform-origin:bottom center;z-index:1;
  filter:brightness(.62) saturate(1.15);
  -webkit-mask-image:linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,.75) 11%, #000 26%);
  mask-image:linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,.75) 11%, #000 26%);
}
.tl-ch-boite{position:absolute;left:0;bottom:0;width:1200px;height:560px}
.tl-ch-boite i{position:absolute;display:block}

/* l’éperon sur lequel tout repose */
.c-roc{left:-60px;bottom:0;width:1320px;height:280px;
  background:linear-gradient(180deg,#141138 0%, #0b0926 55%, #08061c 100%);
  clip-path:polygon(0% 100%, 6% 62%, 14% 46%, 22% 40%, 30% 35%, 40% 31%, 52% 30%, 62% 32%, 70% 36%, 80% 46%, 90% 62%, 100% 82%, 100% 100%)}

/* l’aile est, la plus loin, la plus floue */
.c-e1{left:740px;bottom:118px;width:60px;height:190px;background:#1a1650;opacity:.62;filter:blur(.6px)}
.c-e2{left:726px;bottom:308px;width:88px;height:112px;background:#1d1858;opacity:.62;filter:blur(.6px);clip-path:polygon(50% 0, 100% 100%, 0 100%)}
.c-e3{left:820px;bottom:112px;width:104px;height:148px;background:#181450;opacity:.6;filter:blur(.6px)}
.c-e4{left:820px;bottom:260px;width:104px;height:15px;opacity:.6;
  background:repeating-linear-gradient(90deg,#1b1656 0 15px, transparent 15px 28px)}
.c-e5{left:944px;bottom:96px;width:54px;height:132px;background:#161248;opacity:.5;filter:blur(.8px)}
.c-e6{left:932px;bottom:228px;width:78px;height:92px;background:#191455;opacity:.5;filter:blur(.8px);clip-path:polygon(50% 0, 100% 100%, 0 100%)}
.c-e7{left:1024px;bottom:80px;width:42px;height:98px;background:#141040;opacity:.42;filter:blur(1px)}
.c-e8{left:1014px;bottom:178px;width:62px;height:66px;background:#171253;opacity:.42;filter:blur(1px);clip-path:polygon(50% 0, 100% 100%, 0 100%)}

/* le corps central : deux tours et le donjon qui les dépasse */
.c-c1{left:452px;bottom:150px;width:108px;height:206px;
  background:linear-gradient(100deg,#0d0b2b 0%, #191545 62%, #100d33 100%)}
.c-c2{left:436px;bottom:356px;width:140px;height:122px;
  background:linear-gradient(180deg,#1e1954 0%, #131038 100%);clip-path:polygon(50% 0, 100% 100%, 0 100%)}
.c-c3{left:576px;bottom:152px;width:62px;height:148px;
  background:linear-gradient(180deg,#151239 0%, #0a0822 100%)}
.c-c4{left:564px;bottom:300px;width:86px;height:96px;background:#18134a;clip-path:polygon(50% 0, 100% 100%, 0 100%)}
.c-c5{left:654px;bottom:148px;width:86px;height:286px;
  background:linear-gradient(100deg,#0c0a28 0%, #1a1650 62%, #0f0c31 100%);
  border-right:1px solid rgba(190,205,255,.13)}
.c-c6{left:636px;bottom:434px;width:122px;height:150px;
  background:linear-gradient(180deg,#211c5c 0%, #15123e 100%);clip-path:polygon(50% 0, 100% 100%, 0 100%)}
/* les créneaux de la courtine */
.c-c7{left:400px;bottom:150px;width:264px;height:48px;background:#0b0925;
  clip-path:polygon(0 0,100% 0,100% 42%, 93% 42%,93% 100%,86% 100%,86% 42%, 72% 42%,72% 100%,65% 100%,65% 42%, 51% 42%,51% 100%,44% 100%,44% 42%, 30% 42%,30% 100%,23% 100%,23% 42%, 9% 42%,9% 100%,2% 100%,2% 42%, 0 42%)}

/* l’aile ouest : la grande salle, ses contreforts et sa tour */
.c-o1{left:238px;bottom:126px;width:214px;height:172px;
  background:linear-gradient(100deg,#0a0822 0%, #14113a 70%, #0d0a2c 100%)}
.c-o2{left:228px;bottom:298px;width:234px;height:70px;
  background:linear-gradient(180deg,#191545 0%, #100d34 100%);clip-path:polygon(50% 0, 100% 100%, 0 100%)}
.c-o3{left:256px;bottom:126px;width:12px;height:78px;background:#0a0824}
.c-o4{left:316px;bottom:126px;width:12px;height:70px;background:#0a0824}
.c-o5{left:376px;bottom:126px;width:12px;height:74px;background:#0a0824}
.c-o6{left:298px;bottom:150px;width:64px;height:274px;
  background:linear-gradient(100deg,#0c0a28 0%, #191545 65%, #0e0b2e 100%);
  border-right:1px solid rgba(190,205,255,.11)}
.c-o7{left:282px;bottom:424px;width:96px;height:196px;
  background:linear-gradient(180deg,#221d60 0%, #141137 100%);clip-path:polygon(50% 0, 100% 100%, 0 100%)}

/* les dépendances de gauche */
.c-d1{left:146px;bottom:96px;width:80px;height:146px;background:linear-gradient(180deg,#100d31 0%, #07061c 100%)}
.c-d2{left:134px;bottom:242px;width:104px;height:74px;background:#16123f;clip-path:polygon(50% 0, 100% 100%, 0 100%)}
.c-d3{left:56px;bottom:88px;width:56px;height:96px;background:linear-gradient(180deg,#0d0a2a 0%, #060518 100%)}
.c-d4{left:46px;bottom:184px;width:76px;height:58px;background:#120f36;clip-path:polygon(50% 0, 100% 100%, 0 100%)}

/* le pont couvert, à l’extrême gauche */
.c-p1{left:-40px;bottom:74px;width:210px;height:12px;background:#08061e}
.c-p2{left:-40px;bottom:14px;width:210px;height:62px;background:#08061e;
  clip-path:polygon(0 0,100% 0,100% 100%, 92% 100%,92% 42%,74% 42%,74% 100%, 66% 100%,66% 42%,48% 42%,48% 100%, 40% 100%,40% 42%,22% 42%,22% 100%, 14% 100%,14% 42%,0 42%)}

/* la dernière ligne de collines, devant le château */
.c-avant{left:-140px;bottom:0;width:1480px;height:150px;
  background:linear-gradient(180deg,#07061a 0%, #050414 100%);
  clip-path:polygon(0% 62%, 7% 48%, 15% 56%, 24% 40%, 33% 50%, 43% 34%, 53% 44%, 62% 32%, 72% 46%, 81% 36%, 90% 52%, 97% 44%, 100% 58%, 100% 100%, 0% 100%)}

/* Les fenêtres allumées, posées par accueil.js sur la même grille que la
   maquette. Une sur six reste éteinte : un château plein à ras bord n’a
   plus l’air habité, il a l’air d’une vitrine. */
.tl-fenetres{position:absolute;inset:0}
.tl-fenetres span{position:absolute;display:block}
@keyframes respireFenetre{0%,100%{opacity:.35}50%{opacity:1}}

/* Le voile : deux dégradés qui noient le décor vers le bas et sur les
   côtés, pour que les panneaux se lisent sans effort par-dessus. */
.tl-voile{
  position:absolute;left:0;right:0;bottom:0;height:34vh;z-index:2;
  background:linear-gradient(180deg, rgba(7,6,26,0) 0%, rgba(9,7,28,.5) 40%, rgba(7,6,26,.88) 74%, #07061a 100%);
}
.tl-brume{
  position:absolute;left:0;right:0;bottom:12vh;height:26vh;z-index:2;
  background:linear-gradient(180deg, rgba(120,110,200,0) 0%, rgba(130,120,205,.08) 55%, rgba(120,110,200,0) 100%);
  filter:blur(18px);
}

/* Dix-huit braises montent du pied du château et s’éteignent en chemin.
   Elles passent sous le voile : on ne les voit qu’à mi-parcours, quand
   elles émergent de la nuit du bas. C’est ce qui empêche l’image d’être
   une carte postale figée. */
.tl-braises{position:absolute;left:0;right:0;bottom:0;height:60vh;overflow:hidden}
.tl-braises i{
  position:absolute;bottom:2%;display:block;width:2px;height:2px;border-radius:50%;
  background:#f0c778;box-shadow:0 0 8px 2px rgba(240,199,120,.5);opacity:0;
}
@keyframes braiseMonte{
  0%{transform:translateY(0) scale(1);opacity:0}
  12%{opacity:.8}
  100%{transform:translateY(-380px) scale(.4);opacity:0}
}

/* -- contenu --
   Deux colonnes : ce que le jeu promet à gauche, ce que la journée
   propose à droite. Le décor occupe le bas de l’écran et passe sous
   les deux, sans jamais gêner la lecture. */

/* L’en-tête : le blason, le nom, et les portes de service. */
.tl-entete{
  position:relative;z-index:5;flex:none;
  display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap;
  padding:clamp(16px,2.6vh,26px) clamp(20px,4vw,56px);
  max-width:1680px;margin:0 auto;width:100%;
}
.tl-marque{display:flex;align-items:center;gap:14px}
/* Un écu à quatre quartiers et un éclair : le blason en trente lignes,
   sans image à charger. */
.tl-ecu{
  position:relative;width:38px;height:44px;flex:none;
  background:linear-gradient(180deg,#f0d78c,#c9a44e);
  clip-path:polygon(0% 0%, 100% 0%, 100% 58%, 50% 100%, 0% 58%);
  filter:drop-shadow(0 0 14px rgba(217,180,90,.35));
}
.tl-ecu-quartiers{
  position:absolute;inset:2px;display:grid;
  grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr;
  clip-path:polygon(0% 0%, 100% 0%, 100% 58%, 50% 100%, 0% 58%);overflow:hidden;
}
.tl-ecu-quartiers i:nth-child(1){background:#b3312f}
.tl-ecu-quartiers i:nth-child(2){background:#1f7a45}
.tl-ecu-quartiers i:nth-child(3){background:#1f5fa8}
.tl-ecu-quartiers i:nth-child(4){background:#d4a017}
.tl-ecu-eclair{
  position:absolute;z-index:2;left:50%;top:48%;width:15px;height:24px;
  transform:translate(-50%,-50%);
  background:linear-gradient(180deg,#fff0bd,#e6c877);
  clip-path:polygon(60% 0%, 16% 54%, 44% 54%, 30% 100%, 84% 42%, 54% 42%, 78% 0%);
  box-shadow:0 0 10px rgba(255,225,150,.5);
}
.tl-marque-txt{display:flex;flex-direction:column;line-height:1}
.tl-marque-nom{
  font-family:var(--font-title);font-size:15px;letter-spacing:.24em;text-transform:uppercase;
  color:#f0e4c0;
}
.tl-marque-sub{
  font-family:var(--font-tech);font-size:10px;letter-spacing:.36em;text-transform:uppercase;
  color:rgba(200,190,230,.42);margin-top:7px;
}
.tl-nav{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.tl-nav-lien,.tl-nav-cadre{
  font-family:var(--font-tech);font-size:11px;letter-spacing:.28em;text-transform:uppercase;
  background:transparent;border:0;cursor:pointer;padding:10px 16px;border-radius:0;
  color:rgba(226,220,245,.62);transition:color var(--t),background var(--t),border-color var(--t);
}
.tl-nav-lien:hover{color:var(--gold-bright);background:rgba(230,200,119,.07)}
.tl-nav-cadre{
  color:var(--gold);padding:12px 22px;margin-left:10px;
  border:1px solid rgba(230,200,119,.38);
}
.tl-nav-cadre:hover{background:rgba(230,200,119,.12);border-color:rgba(230,200,119,.7);color:var(--gold-bright)}

/* Le salon Discord : un carré de 34 px, angle vif comme le reste, la
   marque dessinée en violet éteint. Elle ne passe à sa vraie couleur
   qu'au survol, pour qu'une marque étrangère ne tire pas l'oeil avant
   le bouton Jouer. */
.tl-discord{
  display:inline-flex;align-items:center;justify-content:center;
  width:34px;height:34px;flex:none;margin-left:4px;border-radius:0;
  border:1px solid rgba(140,128,220,.24);background:rgba(20,17,50,.55);
  color:rgba(200,190,230,.5);
  transition:color var(--t),border-color var(--t),background var(--t);
}
.tl-discord svg{width:17px;height:auto;display:block}
.tl-discord:hover{color:#8fa3f5;border-color:rgba(143,163,245,.55);background:rgba(88,101,242,.14)}

/* Le corps : deux colonnes qui se replient en une seule si l’écran
   est trop étroit pour les tenir toutes les deux. */
.tl-content{
  position:relative;z-index:4;flex:1 1 auto;min-height:0;
  max-width:1680px;margin:0 auto;width:100%;
  padding:0 clamp(20px,4vw,56px) clamp(12px,2vh,28px);
  display:grid;grid-template-columns:repeat(auto-fit, minmax(min(100%, 420px), 1fr));
  gap:clamp(24px,5vw,80px);align-items:center;
}
.tl-content > *{min-height:0;max-height:100%;overflow-y:auto}
.tl-content::before{display:none}

.tl-promesse{animation:rise .9s var(--ease-out) both;min-width:0}
.tl-eyebrow-ligne{display:flex;align-items:center;gap:14px;margin-bottom:clamp(14px,2.6vh,26px)}
.tl-eyebrow-filet{
  width:52px;height:1px;flex:none;
  background:linear-gradient(90deg, rgba(230,200,119,0), rgba(230,200,119,.8));
}
.tl-eyebrow{
  font-family:var(--font-tech);font-size:11px;letter-spacing:.42em;text-transform:uppercase;
  color:rgba(230,200,119,.75);margin:0;opacity:1;
}
.tl-title{
  margin:0;font-family:var(--font-title);font-weight:600;
  font-size:clamp(44px,6.4vw,116px);line-height:.94;letter-spacing:.005em;
  color:var(--gold-pale);
  text-shadow:0 0 60px rgba(230,200,119,.22), 0 2px 0 rgba(0,0,0,.35);
  background:none;
}
.tl-title span{color:var(--gold);font-style:normal}
.tl-tagline{
  margin:clamp(16px,2.6vh,26px) 0 0;max-width:560px;
  font-family:var(--font-body);font-size:clamp(19px,1.6vw,23px);line-height:1.55;
  color:rgba(226,220,245,.82);text-wrap:pretty;
}
.tl-tagline-mut{
  margin-top:16px;font-size:clamp(17px,1.45vw,21px);font-style:italic;line-height:1.5;
  color:rgba(200,188,235,.62);
}

/* La reprise de partie : une bande discrète au-dessus des deux portes.
   Elle n’existe que s’il y a une vie en cours. */
.tl-card-save{
  display:flex;align-items:center;gap:18px;width:100%;max-width:640px;
  margin-top:clamp(20px,3vh,34px);padding:16px 20px;cursor:pointer;text-align:left;
  border:1px solid rgba(230,200,119,.22);border-radius:0;
  background:linear-gradient(180deg, rgba(24,20,58,.6) 0%, rgba(11,9,32,.78) 100%);
  color:inherit;font:inherit;
  transition:border-color var(--t),background var(--t),transform var(--t);
}
.tl-card-save:hover{border-color:rgba(230,200,119,.55);background:rgba(230,200,119,.07);transform:translateX(4px)}
.tl-card-body{flex:1;min-width:0;display:flex;flex-direction:column;gap:5px}
.tl-card-title{
  font-family:var(--font-tech);font-size:11px;letter-spacing:.28em;text-transform:uppercase;
  color:rgba(240,224,170,.85);
}
.tl-card-sub{
  font-family:var(--font-body);font-size:18px;color:rgba(226,220,245,.75);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.tl-progress{display:block;height:2px;background:rgba(140,128,220,.18);margin-top:3px}
.tl-progress i{display:block;height:100%;background:var(--gold);transition:width .8s var(--ease)}
.tl-card-arrow{flex:none;font-size:20px;color:rgba(230,200,119,.6)}

/* Les deux portes. « Jouer » est celle qui compte : au survol elle
   passe entièrement à l’or. */
.tl-portes{display:flex;align-items:stretch;gap:18px;margin-top:clamp(22px,4vh,44px);flex-wrap:wrap}
.tl-jouer,.tl-duel{
  position:relative;overflow:hidden;cursor:pointer;border-radius:0;
  padding:clamp(18px,3vh,26px) clamp(24px,3vw,44px);
  transition:color .3s ease, border-color .3s ease, box-shadow .35s ease, transform .3s ease, background .35s ease;
}
.tl-jouer{
  flex:1 1 300px;min-width:260px;color:#f4e7c4;
  border:1px solid rgba(230,200,119,.42);
  background:linear-gradient(180deg, rgba(38,31,86,.85) 0%, rgba(15,12,40,.95) 100%);
  box-shadow:0 30px 70px -34px rgba(0,0,0,1), inset 0 1px 0 rgba(255,255,255,.07);
}
.tl-jouer:hover{
  color:var(--or-encre);border-color:var(--gold-warm);background:var(--or-massif);
  box-shadow:0 34px 70px -26px rgba(230,200,119,.6), inset 0 1px 0 rgba(255,255,255,.6);
  transform:translateY(-2px);
}
.tl-duel{
  flex:1 1 240px;min-width:200px;color:rgba(240,228,192,.9);
  padding-left:clamp(14px,1.8vw,32px);padding-right:clamp(14px,1.8vw,32px);
  border:1px solid rgba(230,200,119,.2);
  background:linear-gradient(180deg, rgba(24,20,58,.5) 0%, rgba(11,9,32,.7) 100%);
  backdrop-filter:blur(6px);
}
.tl-duel:hover{
  color:#fbf1d6;border-color:rgba(230,200,119,.55);
  background:linear-gradient(180deg, rgba(44,36,96,.72) 0%, rgba(18,14,48,.85) 100%);
  box-shadow:0 26px 60px -34px rgba(230,200,119,.5), inset 0 1px 0 rgba(255,255,255,.06);
  transform:translateY(-2px);
}
/* Les équerres : elles prennent la couleur du texte, donc elles suivent
   le bouton quand il bascule à l’or. */
.eq{position:absolute;width:14px;height:14px;pointer-events:none;border-color:currentColor;border-style:solid;border-width:0;opacity:.55}
.eq-tl{left:10px;top:10px;border-left-width:1px;border-top-width:1px}
.eq-tr{right:10px;top:10px;border-right-width:1px;border-top-width:1px}
.eq-bl{left:10px;bottom:10px;border-left-width:1px;border-bottom-width:1px}
.eq-br{right:10px;bottom:10px;border-right-width:1px;border-bottom-width:1px}
.tl-duel .eq{opacity:.3;width:12px;height:12px}
.tl-jouer-corps{position:relative;display:flex;flex-direction:column;align-items:center;gap:12px}
/* Les deux libellés tiennent sur une seule ligne, toujours. « Défier un
   ami » cassait en deux dès que la fenêtre descendait sous 1400 px, et
   les deux portes n’avaient plus la même allure. Ce sont l’interlettrage
   et la taille qui cèdent, jamais la ligne. */
.tl-jouer-txt,.tl-duel-txt{white-space:nowrap}
.tl-jouer-txt{
  display:block;font-family:var(--font-title);font-weight:600;
  font-size:clamp(22px,2.4vw,34px);line-height:1;
  letter-spacing:clamp(.22em,.42vw,.42em);text-indent:clamp(.22em,.42vw,.42em);
  text-shadow:0 1px 0 rgba(0,0,0,.35);text-transform:uppercase;
}
.tl-duel-txt{
  display:block;font-family:var(--font-title);font-weight:500;
  font-size:clamp(14px,1.35vw,19px);line-height:1;
  letter-spacing:clamp(.14em,.3vw,.3em);text-indent:clamp(.14em,.3vw,.3em);
  text-transform:uppercase;
}
/* Le sous-titre entre deux filets. Les filets prennent la couleur du
   texte, donc ils basculent avec le bouton quand « Jouer » passe à l’or.
   Ils s’éteignent vers l’extérieur : c’est le mot du milieu qu’on lit. */
.tl-jouer-ligne{display:flex;align-items:center;gap:14px;width:100%}
.tl-jouer-filet{flex:1;height:1px;background:linear-gradient(90deg,transparent,currentColor);opacity:.5}
.tl-jouer-filet + .tl-jouer-sub + .tl-jouer-filet,
.tl-jouer-ligne .tl-jouer-filet:last-child{background:linear-gradient(90deg,currentColor,transparent)}
.tl-jouer-sub{
  font-family:var(--font-tech);font-size:clamp(9px,.85vw,10px);letter-spacing:.34em;
  text-transform:uppercase;opacity:.8;white-space:nowrap;
}
.tl-jouer-reflet{
  position:absolute;top:0;bottom:0;left:0;width:90px;pointer-events:none;
  background:linear-gradient(90deg, rgba(240,215,140,0), rgba(240,215,140,.22), rgba(240,215,140,0));
  animation:shimmer 5s ease-in-out infinite;
}

/* Les trois compteurs, sous un filet. */
.tl-compteurs{
  display:flex;gap:clamp(24px,4vw,52px);flex-wrap:wrap;
  margin-top:clamp(24px,4.6vh,56px);padding-top:clamp(16px,2.6vh,28px);
  border-top:1px solid rgba(230,200,119,.14);max-width:640px;
}
.tl-compteur b{display:block;font-family:var(--font-title);font-weight:400;font-size:30px;color:var(--gold)}
.tl-compteur span{
  display:block;margin-top:8px;
  font-family:var(--font-tech);font-size:10px;letter-spacing:.3em;text-transform:uppercase;
  color:rgba(200,190,230,.45);
}

/* Quand une vie est en cours, la bande « Reprendre » s’ajoute à la colonne
   de gauche et la rend trop haute. Plutôt que de la faire défiler, on
   resserre le rythme vertical : le texte garde sa taille, ce sont les
   respirations qui rétrécissent. */

/* Sur un écran vraiment court, on serre encore d’un cran plutôt que de
   faire disparaître une quête ou un trait imposé : le design habille les
   données, il ne les filtre pas. */

/* Et si malgré tout ça déborde, la colonne le dit par un dégradé au bord,
   jamais par une barre. Les deux colonnes ont droit à la même marque :
   sans elle, les trois compteurs du bas disparaissaient en silence, et
   rien à l’écran n’indiquait qu’il restait quelque chose dessous. */
.tl-modules,.tl-promesse{
  -webkit-mask-image:linear-gradient(180deg,#000 calc(100% - 34px),transparent);
  mask-image:linear-gradient(180deg,#000 calc(100% - 34px),transparent);
}
.tl-modules:not(.deborde),.tl-promesse:not(.deborde){-webkit-mask-image:none;mask-image:none}

/* L’invitation du bas : ce qui attend derrière la porte, et un filet qui
   descend vers le décor. Elle se pose au-dessus du pied de page, centrée,
   et disparaît si l’écran devient trop court pour elle. */
.tl-attend{
  position:relative;z-index:4;flex:none;margin:0 0 clamp(8px,1.6vh,18px);
  display:flex;flex-direction:column;align-items:center;gap:8px;
  font-family:var(--font-body);font-size:13px;letter-spacing:.3em;text-transform:uppercase;
  color:rgba(200,190,230,.45);
}
.tl-attend i{display:block;width:1px;height:clamp(14px,2.4vh,26px);background:linear-gradient(180deg, rgba(230,200,119,.6), rgba(230,200,119,0))}
@media(max-height:760px){ .tl-attend{display:none} }

/* Le pied de page : une bande pleine largeur, posée sur le décor, qui
   arrête la nuit d’un filet. Le fond est plein et non dégradé : c’est
   lui qui fait le socle de la page, et un dégradé laissait la signature
   flotter dans le vide. Le contenu, lui, se cale sur la même laisse de
   1680 px que l’en-tête et que le corps. */
.tl-pied{
  position:relative;z-index:5;flex:none;width:100%;
  border-top:1px solid rgba(140,128,220,.12);
  background:rgba(6,5,20,.92);backdrop-filter:blur(8px);
}
/* La signature à gauche, les portes de service à droite, poussées aux
   extrémités. Ils étaient trois : le réglage du son occupait la gauche,
   et il a été retiré avec la musique. Les deux qui restent gardent des
   marges symétriques, cinquante et un pixels de chaque bord. */
.tl-pied-inner{
  max-width:1680px;margin:0 auto;
  padding:clamp(12px,2vh,18px) clamp(20px,4vw,56px);
  display:flex;align-items:center;justify-content:space-between;
  gap:clamp(14px,2vw,28px);flex-wrap:wrap;
}
.tl-pied-droite{display:flex;align-items:center;gap:18px;flex:none}
.tl-pied-sep{display:none}
/* La signature est la seule des trois zones qui a le droit de céder :
   c’est elle qui occupe le milieu, et une ligne de plus au pied de page
   grignote la hauteur du reste de l’accueil, qui ne défile pas. */
.tl-footer{
  flex:1 1 auto;min-width:0;
  font-family:var(--font-body);font-weight:400;font-size:clamp(12px,1.05vw,15px);
  color:rgba(200,190,230,.4);letter-spacing:.12em;text-transform:none;
  margin:0;text-align:center;
}
/* Le nom de l’auteur mène à sa page. Un filet d’un pixel sous la ligne, à
   peine visible, suffit à dire qu’on peut cliquer : c’est une signature,
   pas un appel. Au survol, le filet s’allume et le nom passe à l’or. */
.tl-signe{
  color:inherit;text-decoration:none;
  border-bottom:1px solid rgba(200,190,230,.26);
  transition:color var(--t),border-color var(--t);
}
.tl-signe:hover,.tl-signe:focus-visible{
  color:var(--gold-bright);border-bottom-color:rgba(230,200,119,.5);
}
/* Sous 980 px, elle passe seule sur sa propre ligne plutôt que de se
   faire écraser entre le son et les deux boutons. */
@media(max-width:980px){
  .tl-pied-inner{justify-content:center;gap:8px 16px}
  .tl-footer{order:3;flex:1 0 100%}
}
.tl-lien{
  background:transparent;border:0;cursor:pointer;padding:0;border-radius:0;
  font-family:var(--font-body);font-size:15px;letter-spacing:.14em;text-transform:none;
  color:rgba(200,190,230,.45);transition:color var(--t);
}
.tl-lien:hover{color:var(--gold-bright)}
/* La seule porte du pied qui se voit : un cadre d’or, plein mais discret. */
.tl-soutien{
  padding:12px 20px;cursor:pointer;border-radius:0;
  border:1px solid rgba(230,200,119,.3);background:rgba(230,200,119,.1);
  font-family:var(--font-tech);font-weight:400;font-size:12px;
  letter-spacing:.24em;text-transform:uppercase;
  color:var(--gold);white-space:nowrap;
  transition:background var(--t),border-color var(--t),color var(--t);
}
.tl-soutien:hover{background:rgba(230,200,119,.2);border-color:var(--gold);color:var(--gold-bright);transform:none;box-shadow:none}
/* Le bouton du son : le seul rond du pied, parce que c’est un bouton de
   lecteur et qu’on le reconnaît à sa forme avant de lire son signe. */
/* Le curseur du pied est le plus long du jeu : c’est le seul endroit où
   on le règle vraiment, en arrivant. La part parcourue est en or, le
   reste en violet éteint, pour qu’on voie où l’on en est sans lire. */


/* ============================================================
   6. CRÉATION DE PERSONNAGE
   ------------------------------------------------------------
   Un bandeau collant, un rail de six étapes coiffées d’un filet,
   puis deux colonnes calées en haut : la scène à gauche, les
   questions à droite, et le pied de navigation à l’intérieur de
   la colonne de droite, sous son propre filet.

   Toutes les mesures viennent de la maquette : colonne de 1240,
   gouttière de 48, titre de 56, récit de 40.
   ============================================================ */
#screen-creation{display:none;position:relative;overflow:hidden}
#screen-creation.active{
  display:flex;flex-direction:column;
  height:100vh;height:100dvh;min-height:0;
}
/* La page ne défile pas, jamais, pas même à la création. C'était le cas
   avant : les six familles de l'étape 03 mesuraient 1 475 px pour 720 px
   d'écran, et il fallait descendre pour retrouver « Continuer », qui était
   parti avec le reste. Trois bandes désormais : le bandeau en haut, le pied
   en bas, et entre les deux la seule zone qui bouge, la liste des choix.
   Elle défile sans barre et le dit par un dégradé au bord. */
#creation-hote{
  position:relative;z-index:3;flex:1;min-height:0;overflow:hidden;
  display:flex;flex-direction:column;
}

/* Le décor : le même ciel que l’accueil, sans le château. On n’y est pas
   encore, et le montrer maintenant gâcherait l’arrivée. */
.cr-decor{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.cr-voute{
  position:absolute;top:-18vh;left:50%;transform:translateX(-50%);
  width:86vw;height:86vw;max-width:1600px;max-height:1600px;border-radius:50%;
  background:radial-gradient(circle, rgba(120,104,220,.16) 0%, rgba(80,68,180,.07) 40%, rgba(0,0,0,0) 68%);
  animation:respire 16s ease-in-out infinite;
}
.cr-colline{
  position:absolute;left:-6%;right:-6%;bottom:0;height:34vh;
  background:linear-gradient(180deg, rgba(10,8,32,.35) 0%, #08061c 100%);
  clip-path:polygon(0% 74%, 10% 62%, 20% 70%, 31% 52%, 40% 60%, 50% 44%, 60% 56%, 70% 46%, 80% 60%, 90% 52%, 100% 64%, 100% 100%, 0% 100%);
}
/* La vignette qui assombrit les bords, comme sur la maquette. */
.cr-decor::after{
  content:'';position:absolute;inset:0;
  background:radial-gradient(120% 90% at 50% 40%, rgba(0,0,0,0) 40%, rgba(0,0,0,.6) 100%);
}

/* --- le bandeau, collant en haut --- */
.cr-tete{
  position:sticky;top:0;z-index:20;flex:none;
  background:rgba(5,4,26,.82);backdrop-filter:blur(14px);
  border-bottom:1px solid rgba(230,200,119,.14);
}
.cr-tete-inner{
  max-width:1240px;margin:0 auto;padding:0 clamp(20px,3vw,40px);height:72px;
  display:flex;align-items:center;justify-content:space-between;gap:32px;
}
.cr-quitter{padding:10px 0;font-size:11px;letter-spacing:.28em;color:rgba(232,227,245,.62)}
.cr-quitter::before{content:'← '}
.cr-tete-titre{
  display:flex;align-items:center;gap:16px;
  font-family:var(--font-title);font-size:14px;letter-spacing:.34em;text-transform:uppercase;
  color:#f0e4c0;
}
.cr-tete-titre i{display:block;width:24px;height:1px;background:rgba(230,200,119,.45)}
.cr-tete-etape{
  font-family:var(--font-tech);font-size:11px;letter-spacing:.24em;text-transform:uppercase;
  color:rgba(200,190,230,.5);white-space:nowrap;
}

/* La colonne des étapes prend toute la hauteur restante et la partage
   elle-même. Le fond de page qui traînait sous le pied, jusqu'à 96 px,
   n'a plus lieu d'être : c'est de la place prise à la liste. */
.creation-wrap{
  position:relative;z-index:2;flex:1 1 auto;min-height:0;
  display:flex;flex-direction:column;
  width:100%;max-width:1240px;margin:0 auto;
  padding:clamp(18px,2.6vh,30px) clamp(20px,3vw,40px) clamp(12px,1.8vh,22px);
}
.cr-corps{flex:1 1 auto;min-height:0}
.cr-form{min-height:0}
.cr-pied{flex:none}

/* La zone qui défile, et la seule : la liste des choix. Sans barre, avec
   un dégradé au bord quand il reste quelque chose dessous, et rien du
   tout quand tout tient. Même marque que les colonnes de l'accueil. */
.cr-rangs,.cr-cartes{flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain}
/* Le récapitulatif est une carte encadrée : c'est son intérieur qui défile,
   sinon le filet d'or se ferait manger par le dégradé. */
.cr-recap{flex:0 1 auto;min-height:0;display:flex;flex-direction:column}
.cr-recap-in{min-height:0;overflow-y:auto;overscroll-behavior:contain}
.cr-rangs.deborde,.cr-cartes.deborde,.cr-recap-in.deborde{
  -webkit-mask-image:linear-gradient(180deg,#000 calc(100% - 40px),transparent);
  mask-image:linear-gradient(180deg,#000 calc(100% - 40px),transparent);
}

/* --- le rail des six étapes --- */
/* Les airs de la création se mesurent en vh, et sur un écran court ils
   mangeaient la liste : 437 px de chrome pour 199 px de choix en 720 de
   haut. Les maxima ne bougent pas, un grand écran garde exactement ce
   qu'il avait ; seuls les minima et la pente se resserrent. */
.step-rail{
  display:flex;gap:10px;margin-bottom:clamp(14px,2.2vh,30px);
  animation:rise .5s var(--ease-out) both;
}
.step-node{
  flex:1;min-width:0;display:block;
  width:auto;height:auto;border-radius:0;border:0;background:none;font-size:inherit;color:inherit;
}
.step-trait{display:block;height:3px;background:rgba(140,128,220,.2)}
.step-ligne{display:flex;align-items:baseline;gap:8px;margin-top:12px;min-width:0}
.step-node b{
  font-family:var(--font-tech);font-weight:400;font-size:10px;letter-spacing:.2em;
  color:rgba(200,190,230,.3);
}
.step-node em{
  font-style:normal;font-family:var(--font-tech);font-size:10px;letter-spacing:.24em;
  text-transform:uppercase;color:rgba(200,190,230,.3);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.step-node.done .step-trait{background:rgba(230,200,119,.35)}
.step-node.done b,.step-node.done em{color:rgba(226,220,245,.5)}
.step-node.now .step-trait{background:var(--gold);box-shadow:0 0 12px -2px rgba(230,200,119,.7)}
.step-node.now b,.step-node.now em{color:#f4ecd6}
.step-link{display:none}

/* --- les deux colonnes, calées en haut --- */
.cr-corps{
  display:flex;flex-wrap:wrap;gap:clamp(24px,3.6vw,48px);align-items:flex-start;
}

/* --- la scène, à gauche --- */
.cr-recit{
  position:relative;flex:1 1 380px;min-width:0;
  padding:clamp(24px,3.4vh,40px) clamp(24px,2.6vw,40px) clamp(26px,3.8vh,44px);
  border:1px solid rgba(230,200,119,.18);
  background:linear-gradient(180deg, rgba(26,21,62,.6) 0%, rgba(12,10,34,.85) 100%);
  box-shadow:0 40px 90px -50px rgba(0,0,0,1), inset 0 1px 0 rgba(255,255,255,.05);
  animation:rise .7s var(--ease-out) both;
}
.cr-recit > *{position:relative}
.cr-date{
  display:block;font-family:var(--font-tech);font-size:10px;letter-spacing:.36em;
  text-transform:uppercase;color:rgba(230,200,119,.75);
}
.cr-titre{
  margin:20px 0 0;font-family:var(--font-title);font-weight:600;
  font-size:clamp(28px,2.9vw,40px);line-height:1.05;color:var(--gold-pale);
}
.cr-p{
  margin:24px 0 0;font-family:var(--font-body);font-size:clamp(18px,1.5vw,21px);line-height:1.6;
  color:rgba(226,220,245,.74);text-wrap:pretty;
}
.cr-p + .cr-p{margin-top:16px}
.cr-note{
  margin:16px 0 0;font-family:var(--font-body);font-size:clamp(17px,1.35vw,19px);
  font-style:italic;line-height:1.5;color:rgba(190,180,225,.55);
}
.cr-sceau{
  display:flex;align-items:center;gap:20px;
  margin-top:clamp(22px,3.4vh,36px);padding-top:clamp(18px,2.6vh,28px);
  border-top:1px solid rgba(230,200,119,.16);
}
/* Le cachet de cire : un disque violet, légèrement de travers, avec son
   liseré intérieur. C’est le seul rond de l’écran. */
.cr-sceau-rond{
  position:relative;flex:none;width:70px;height:70px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  border:2px solid rgba(160,90,180,.4);
  background:radial-gradient(circle at 38% 34%, rgba(120,60,150,.45), rgba(60,24,80,.5));
  transform:rotate(-8deg);
  font-family:var(--font-title);font-weight:400;font-size:20px;color:rgba(235,205,245,.75);
  animation:sceauIn .9s var(--ease-out) both;
}
.cr-sceau-rond::after{
  content:'';position:absolute;inset:6px;border-radius:50%;
  border:1px solid rgba(190,140,210,.3);
}
@keyframes sceauIn{from{opacity:0;transform:rotate(-30deg) scale(.7)}to{opacity:1;transform:rotate(-8deg) scale(1)}}
.cr-sceau-txt{display:flex;flex-direction:column;min-width:0}
.cr-sceau-txt b,.cr-sceau-txt i{
  font-style:normal;font-weight:400;
  font-family:var(--font-tech);font-size:11px;letter-spacing:.24em;line-height:2;
  text-transform:uppercase;color:rgba(200,190,230,.5);
}

/* --- les questions, à droite. Un peu plus large que la scène. --- */
.cr-form{
  flex:1.2 1 460px;min-width:0;display:flex;flex-direction:column;
  animation:rise .85s var(--ease-out) both;
}
.cr-lab{
  font-family:var(--font-tech);font-size:11px;letter-spacing:.42em;text-transform:uppercase;
  color:rgba(230,200,119,.75);
}
/* Le titre de l’étape. `balance` évite qu’un point d’interrogation
   se retrouve seul sur la seconde ligne, ce qui arrive dès que la
   question dépasse trois mots. */
.step-title{
  margin:clamp(10px,1.4vh,16px) 0 0;font-family:var(--font-title);font-weight:600;
  font-size:clamp(30px,3.6vw,56px);line-height:1.02;color:var(--gold-pale);
  text-shadow:0 0 48px rgba(230,200,119,.16);background:none;
  text-wrap:balance;
}
.cr-duo{display:flex;flex-wrap:wrap;gap:20px;margin-top:clamp(24px,3.8vh,40px)}
.cr-duo .field{flex:1 1 220px;min-width:0;margin:0}
.field label{
  display:block;font-family:var(--font-tech);font-size:10px;letter-spacing:.32em;
  text-transform:uppercase;color:rgba(240,228,192,.8);margin-bottom:12px;
}
.field input[type=text]{
  width:100%;max-width:none;padding:16px 18px;border-radius:0;
  font-family:var(--font-body);font-size:22px;color:#f4ecd6;
  background:rgba(16,13,44,.72);border:1px solid rgba(140,128,220,.22);
  transition:border-color .25s, background .25s;
}
.field input[type=text]:focus{border-color:rgba(230,200,119,.5);background:rgba(22,18,54,.85);box-shadow:none}
.cr-alea{
  align-self:flex-start;margin:16px 0 0;padding:12px 20px;border-radius:0;
  background:transparent;border:1px solid rgba(140,128,220,.25);
  font-family:var(--font-tech);font-size:10px;letter-spacing:.28em;text-transform:uppercase;
  color:rgba(226,220,245,.7);
  transition:border-color .25s, color .25s, background .25s;
}
.cr-alea:hover{border-color:rgba(230,200,119,.5);color:var(--gold-bright);background:rgba(230,200,119,.06)}
/* Le tirage des étapes 02 à 05 vit dans le pied, entre Retour et Continuer :
   c'est un geste de navigation, pas une option de l'étape. Il prend donc la
   hauteur et la langue de Retour, son voisin, et perd la marge du haut que
   lui donnait `.cr-alea`, faite pour un bouton posé sous un champ. */
.cr-alea-etape{
  align-self:auto;margin:0;padding:18px 26px;
  font-family:var(--font-title);font-weight:400;font-size:14px;letter-spacing:.26em;
  border-color:rgba(140,128,220,.25);color:rgba(226,220,245,.72);
}
.cr-alea-etape:hover{border-color:rgba(230,200,119,.5);color:var(--gold-bright);background:rgba(230,200,119,.06)}
.cr-champ-large{margin:clamp(24px,3.8vh,40px) 0 0}
.cr-champ-large > label{margin-bottom:16px}
.cr-precision{
  margin:16px 0 0;font-family:var(--font-body);font-size:19px;font-style:italic;
  color:rgba(190,180,225,.6);
}
.cr-precision b{font-style:normal;color:var(--gold-warm)}

/* --- les cartes de choix ---
   Cadre net, titre Cinzel interlettré, description au-dessous, et
   l’effet en petites capitales dorées. Aucune icône : le nom suffit,
   et les emojis sortaient à des tailles différentes selon la machine. */
.choice-grid{display:flex;flex-wrap:wrap;gap:16px;margin-top:16px}
.cr-grid-2{gap:16px}
.choice-card{
  position:relative;overflow:hidden;flex:1 1 260px;min-width:220px;
  display:flex;flex-direction:column;gap:8px;
  padding:26px 24px;cursor:pointer;text-align:left;border-radius:0;
  color:rgba(226,220,245,.75);
  border:1px solid rgba(140,128,220,.24);
  background:linear-gradient(180deg, rgba(26,21,62,.5), rgba(12,10,34,.62));
  transition:color .3s, border-color .3s, background .3s, box-shadow .3s;
}
.choice-card:hover{border-color:rgba(230,200,119,.55)}
.choice-card.selected{
  border-color:rgba(230,200,119,.7);
  background:linear-gradient(180deg, rgba(52,42,104,.6), rgba(20,16,50,.7));
  box-shadow:0 0 40px -14px rgba(230,200,119,.5);
  color:rgba(240,236,250,.92);
}
/* Les deux équerres de la carte, à la couleur du texte. */
.choice-card::before,.choice-card::after{
  content:'';position:absolute;width:11px;height:11px;pointer-events:none;opacity:.4;
  border-color:currentColor;border-style:solid;border-width:0;
}
.choice-card::before{left:9px;top:9px;border-left-width:1px;border-top-width:1px}
.choice-card::after{right:9px;bottom:9px;border-right-width:1px;border-bottom-width:1px}
.cc-icon{display:none}
.cc-title{
  display:block;font-family:var(--font-title);font-weight:500;font-size:21px;
  letter-spacing:.14em;line-height:1.2;color:var(--gold-pale);
}
.cc-sub{
  display:block;font-family:var(--font-body);font-size:18px;line-height:1.45;
  color:rgba(226,220,245,.7);
}
.cc-effet{
  display:block;margin-top:2px;
  font-family:var(--font-tech);font-size:10px;letter-spacing:.26em;text-transform:uppercase;
  line-height:1.8;color:rgba(230,200,119,.7);
}
.cc-warn{
  font-family:var(--font-body);font-size:16px;font-style:italic;line-height:1.4;
  color:#e2879a;padding-top:8px;margin-top:2px;border-top:1px solid rgba(212,101,124,.28);
}

/* Les deux origines de baguette. */
.wand-tabs{display:flex;gap:0;margin-top:clamp(24px,3.8vh,40px)}
.wand-tab{
  padding:12px 22px;cursor:pointer;border-radius:0;
  border:1px solid rgba(140,128,220,.25);background:transparent;
  font-family:var(--font-tech);font-size:10px;letter-spacing:.28em;text-transform:uppercase;
  color:rgba(226,220,245,.6);transition:color .25s, border-color .25s, background .25s;
}
.wand-tab + .wand-tab{border-left:0}
.wand-tab:hover{color:var(--gold-bright)}
/* L’onglet actif est un aplat d’or, pas un contour : c’est la seule
   façon de voir d’un coup laquelle des deux boutiques on regarde. */
.wand-tab.on{
  color:var(--or-encre);border-color:var(--gold-warm);background:var(--or-massif);
  box-shadow:0 14px 30px -18px rgba(230,200,119,.8);
}

.cr-recap{margin-top:clamp(24px,3.8vh,40px);border-top:1px solid rgba(230,200,119,.16)}

/* --- le pied, à l’intérieur de la colonne des questions --- */
.cr-pied{
  display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap;
  margin-top:clamp(14px,2.2vh,30px);padding-top:clamp(12px,1.8vh,22px);
  border-top:1px solid rgba(230,200,119,.16);
}
.cr-pied-mot{
  font-family:var(--font-body);font-size:19px;font-style:italic;color:rgba(190,180,225,.55);
}
.cr-pied-boutons{display:flex;align-items:center;gap:14px}
.cr-retour{padding:13px 22px}
/* Le bouton de suite : un cadre vide tant que l’étape n’est pas remplie,
   l’or massif dès qu’elle l’est. Dans les deux cas, ses deux équerres. */
.cr-suite{
  position:relative;overflow:hidden;cursor:pointer;padding:20px 40px;border-radius:0;
  border:1px solid rgba(140,128,220,.24);background:rgba(16,13,44,.5);
  color:rgba(200,190,230,.45);
  transition:color .3s, border-color .3s, background .35s, box-shadow .35s, transform .3s;
}
.cr-suite > span:not(.eq){
  position:relative;font-family:var(--font-title);font-weight:500;font-size:16px;
  letter-spacing:.3em;text-indent:.3em;text-transform:uppercase;
}
.cr-suite .eq{opacity:.45;width:12px;height:12px}
.cr-suite-prete{
  border-color:var(--gold-warm);background:var(--or-massif);color:var(--or-encre);
  box-shadow:0 26px 56px -28px rgba(230,200,119,.9);
}
.cr-suite-prete:hover{transform:translateY(-2px);box-shadow:0 32px 66px -26px rgba(230,200,119,1)}
.cr-suite:not(.cr-suite-prete):hover{border-color:rgba(230,200,119,.45);color:rgba(240,224,170,.75)}
.creation-nav{display:flex;align-items:center;gap:12px}

@media(max-width:900px){ .cr-recit{display:none} }



/* ------------------------------------------------------------
   6b. LES CINQ ÉTAPES QUI SUIVENT L’IDENTITÉ
   ------------------------------------------------------------
   Elles n’ont pas de carte de récit : elles prennent toute la
   largeur, parce qu’on doit pouvoir comparer les options ligne à
   ligne. Trois formes seulement :

     · trois cartes de front, pour le sang, qui n’a que trois voies
     · des rangées pleine largeur, pour la famille, la baguette et
       l’animal, où le nombre d’options varie
     · un panneau scellé, pour le récapitulatif

   Et partout les mêmes étiquettes d’effet : vert ce qu’on gagne,
   rouge ce qu’on paie, bleu ce qui comptera autrement.
   ------------------------------------------------------------ */
.cr-large{flex:1 1 100%;width:100%}
.cr-lead{
  margin:clamp(12px,1.8vh,20px) 0 0;max-width:680px;
  font-family:var(--font-body);font-size:clamp(18px,1.5vw,21px);font-style:italic;
  line-height:1.42;color:rgba(200,188,235,.62);text-wrap:pretty;
}

/* --- les étiquettes d’effet --- */
/* Plus large et plus serré : c'est cette colonne qui décidait de la
   hauteur d'une rangée, pas le texte. Quatre étiquettes empilées une par
   ligne faisaient 179 px à elles seules. */
.cr-tags{display:flex;flex-wrap:wrap;gap:5px;justify-content:flex-end;flex:0 1 400px;align-content:flex-start}
.cr-tag{
  display:inline-flex;padding:4px 9px;border:1px solid;
  font-family:var(--font-tech);font-size:11px;letter-spacing:.04em;
  white-space:nowrap;text-transform:none;
}
.cr-tag-up{color:#8fd0a4;border-color:rgba(120,190,150,.28);background:rgba(30,60,45,.3)}
.cr-tag-down{color:#e08a92;border-color:rgba(210,90,100,.3);background:rgba(50,16,28,.3)}
.cr-tag-info{color:#a8dcf5;border-color:rgba(140,190,240,.24);background:rgba(60,120,180,.1)}

/* --- trois cartes de front, pour le sang --- */
.cr-cartes{
  display:flex;flex-wrap:wrap;gap:clamp(14px,1.6vw,22px);
  align-items:flex-start;align-content:flex-start;
  margin-top:clamp(12px,2vh,26px);
}
/* Trois carrés, pas trois colonnes.
   Depuis que la liste est la zone qui défile, elle prend toute la hauteur
   restante, et les cartes s'étiraient avec elle : 372 de large pour 714 de
   haut, dont 390 de vide sous les étiquettes. Elles se calent maintenant en
   haut de la zone et prennent un format carré. Le carré n'est pas une
   contrainte dure, `fit-content` le laisse grandir si une description
   demande une ligne de plus : mieux vaut un carré imparfait qu'un texte
   coupé. Les étiquettes descendent au pied de la carte, ce qui donne aux
   trois le même filet à la même hauteur. */
.cr-carte{
  position:relative;flex:1 1 300px;min-width:260px;max-width:440px;
  aspect-ratio:1/1;min-height:fit-content;
  display:flex;flex-direction:column;gap:0;
  padding:28px 26px 24px;cursor:pointer;text-align:left;
  color:rgba(226,220,245,.62);
  border:1px solid rgba(140,128,220,.2);background:rgba(13,10,36,.68);
  box-shadow:0 30px 70px -50px rgba(0,0,0,1);
  transition:color .3s, border-color .3s, background .3s, box-shadow .3s;
}
.cr-carte:hover{border-color:rgba(230,200,119,.4)}
.cr-carte.on{
  color:#f4ecd6;border-color:rgba(230,200,119,.6);
  background:linear-gradient(180deg, rgba(52,42,110,.5), rgba(16,13,44,.85));
  box-shadow:0 30px 64px -36px rgba(230,200,119,.5);
}
.cr-carte::before,.cr-carte::after{
  content:'';position:absolute;width:11px;height:11px;pointer-events:none;opacity:.4;
  border-color:currentColor;border-style:solid;border-width:0;
}
.cr-carte::before{left:9px;top:9px;border-left-width:1px;border-top-width:1px}
.cr-carte::after{right:9px;bottom:9px;border-right-width:1px;border-bottom-width:1px}
.cr-carte-num{
  font-family:var(--font-tech);font-size:11px;letter-spacing:.16em;
  color:rgba(200,190,230,.4);
}
.cr-carte-titre{
  margin-top:14px;font-family:var(--font-title);font-weight:500;font-size:24px;
  letter-spacing:.04em;line-height:1.15;color:var(--gold-pale);
}
.cr-carte-desc{
  margin-top:14px;margin-bottom:20px;font-family:var(--font-body);font-size:18px;line-height:1.45;
  opacity:.78;
}
/* Le bloc d'étiquettes est collé en bas de la carte, ce qui aligne les
   filets tant que toutes les cartes ont le même nombre de rangées. Elles
   ne l'ont pas : « +70 Gallions · +4 Ambition · −5 Étude des Moldus »
   tient en deux rangées, « −4 Histoire de la magie » en pousse une
   troisième, et le filet remontait alors de 33 px sur deux cartes du sang
   sur trois. On réserve la place du cas le plus long : le filet tombe à la
   même hauteur partout, et le vide se fait au-dessus, là où la carte en a
   déjà. Les deux mesures suivent le corps du texte, elles ne le fixent
   pas : une étiquette de 11 px fait 28 px de haut avec ses marges. */
.cr-carte{--cr-tag-h:28px;--cr-tag-gap:5px}
.cr-carte .cr-tags{
  justify-content:flex-start;flex:none;
  min-height:calc(3 * var(--cr-tag-h) + 2 * var(--cr-tag-gap));
  margin-top:auto;padding-top:18px;border-top:1px solid rgba(140,128,220,.16);
}

/* --- la même carte, rangée par quatre ---
   Trois choix tiennent en trois grandes cartes. Sept n'y tiennent pas :
   la famille, la baguette et l'animal prennent la même carte à une autre
   échelle, quatre par ligne, deux lignes au plus. Rien n'est retiré. */
/* Quatre colonnes égales, ligne après ligne.
   Deux fausses pistes avant celle-ci. En `flex-wrap` avec `flex-grow`, la
   dernière ligne s'étirait pour combler le vide : trois cartes de 310 px
   sous quatre cartes de 274. En `grid`, les rangées se dimensionnent sur le
   contenu et ignorent le `aspect-ratio` des cartes, qui débordaient alors
   de 109 px sur la ligne suivante. La largeur se calcule donc à la main,
   sans croissance. */
.cr-grille{
  --cr-gap:clamp(12px,1.4vw,20px);
  gap:var(--cr-gap);align-content:flex-start;align-items:stretch;
}
/* La même typographie qu'à l'étape du sang, à la virgule près : titre 24,
   description 18, étiquettes 11. Elle était réduite d'un cran ici, et les
   quatre étapes de la création ne se lisaient pas dans la même police.
   Ce qui cède à la place, c'est le carré : une carte de 275 px ne tient
   pas ce corps de texte en 275 px de haut. Elle prend la hauteur de son
   contenu, et les quatre d'une rangée s'alignent sur la plus grande. */
.cr-grille .cr-carte{
  flex:0 0 calc((100% - 3 * var(--cr-gap)) / 4);
  min-width:0;max-width:none;
  aspect-ratio:auto;
  padding:20px 20px 18px;
}
/* En dessous de 1180 px la carte descendrait sous 230 : trois colonnes,
   puis deux, plutôt que quatre timbres-poste. */
@media(max-width:1180px){
  .cr-grille .cr-carte{flex-basis:calc((100% - 2 * var(--cr-gap)) / 3)}
}
@media(max-width:900px){
  .cr-grille .cr-carte{flex-basis:calc((100% - var(--cr-gap)) / 2)}
}
.cr-grille .cr-carte-num{font-size:11px;letter-spacing:.16em}
.cr-grille .cr-carte-titre{margin-top:11px;line-height:1.12}
.cr-grille .cr-carte-desc{margin-top:11px;margin-bottom:15px}
/* Même réserve à l'échelle de la grille : deux rangées, l'étiquette y est
   un peu plus courte parce que la carte est plus étroite. */
.cr-grille .cr-carte{--cr-tag-h:26px;--cr-tag-gap:4px}
.cr-grille .cr-tags{
  gap:var(--cr-tag-gap);padding-top:13px;
  min-height:calc(2 * var(--cr-tag-h) + var(--cr-tag-gap));
}
/* Une étiquette de grille s'enroule plutôt que de sortir de la carte :
   « Argent de poche compté au Noise » ne tient sur aucune ligne de 250 px. */
.cr-grille .cr-tag{
  padding:4px 8px;letter-spacing:.02em;
  white-space:normal;text-align:left;
}
/* La porte fermée, à l'échelle de la carte : le filet en pointillé passe
   du bord gauche au cadre entier, parce qu'une carte n'a pas de tranche. */
.cr-carte-ferme{
  cursor:default;color:rgba(226,220,245,.4);
  border-style:dashed;border-color:rgba(143,208,240,.3);
}
.cr-carte-ferme:hover{border-color:rgba(143,208,240,.42)}
.cr-carte-ferme .cr-carte-titre{color:rgba(213,205,240,.62)}
.cr-carte-ferme .cr-tags{opacity:.5}
/* Une seule ligne, toujours. Sur deux lignes le bandeau coûtait 61 px,
   et comme les cartes d'une rangée s'alignent sur la plus haute, la
   Dynastie verrouillée étirait à elle seule les six autres familles de sa
   rangée. La ligne ne se coupe plus et le libellé est court : 26 px, la
   hauteur d'une étiquette. */
.cr-carte-verrou{
  display:flex;align-items:center;gap:8px;flex-wrap:nowrap;white-space:nowrap;
  margin:0 0 12px;padding:4px 9px;
  border:1px solid rgba(143,208,240,.3);background:rgba(143,208,240,.07);
  font-family:var(--font-tech);font-size:9px;letter-spacing:.16em;
  text-transform:uppercase;color:rgba(143,208,240,.86);
}

/* --- les rangées pleine largeur --- */
.cr-rangs{
  display:flex;flex-direction:column;
  margin-top:clamp(12px,2vh,26px);border-top:1px solid rgba(230,200,119,.16);
}
/* Serré d'un cran depuis que l'étape 03 compte sept familles : six
   rangées demandaient déjà 1 475 px de page, la septième ne pouvait pas
   se payer les mêmes marges. Rien n'est retiré, tout est rapproché. */
.cr-rang{
  position:relative;display:flex;align-items:flex-start;gap:clamp(14px,1.8vw,24px);
  width:100%;cursor:pointer;text-align:left;padding:11px 20px;
  color:rgba(226,220,245,.66);
  border:0;border-bottom:1px solid rgba(140,128,220,.12);
  border-left:2px solid transparent;background:transparent;border-radius:0;
  transition:color .25s, background .25s, border-color .25s;
}
.cr-rang:hover{background:rgba(140,128,220,.07)}
.cr-rang.on{color:#f4ecd6;background:rgba(230,200,119,.07);border-left-color:var(--gold)}
.cr-rang-g{
  flex:none;width:38px;font-family:var(--font-tech);font-size:11px;letter-spacing:.16em;
  line-height:2.4;opacity:.55;white-space:nowrap;
}
.cr-rang-corps{flex:1 1 340px;min-width:0;display:flex;flex-direction:column}
.cr-rang-titre{
  display:block;font-family:var(--font-title);font-weight:500;font-size:21px;
  letter-spacing:.04em;line-height:1.2;
}
.cr-rang-desc{
  display:block;margin-top:5px;font-family:var(--font-body);font-size:17.5px;
  line-height:1.38;opacity:.72;
}
.cr-rang-alerte{
  display:block;margin-top:8px;font-family:var(--font-body);font-size:17px;
  font-style:italic;line-height:1.4;color:#e6a7ad;
}

/* --- une porte que la Boutique n'a pas encore ouverte ---
   La rangée se lit en entier, elle ne se clique pas. On la reconnaît à
   trois choses et pas une de plus : le filet de gauche en pointillé, le
   texte qui recule d'un cran, et la mention qui dit où ça s'ouvre. Elle
   ne s'éteint pas complètement : ce qu'on ne peut pas prendre doit
   quand même se lire, sinon ce n'est pas une porte. */
.cr-rang-ferme{
  cursor:default;color:rgba(226,220,245,.4);
  border-left:2px dashed rgba(143,208,240,.34);
}
.cr-rang-ferme:hover{background:rgba(143,208,240,.045)}
.cr-rang-ferme .cr-rang-desc{opacity:.55}
.cr-rang-ferme .cr-tags{opacity:.45}
.cr-rang-verrou{
  display:inline-flex;align-items:center;gap:10px;align-self:flex-start;
  margin-top:10px;padding:5px 11px;
  border:1px solid rgba(143,208,240,.3);background:rgba(143,208,240,.07);
  font-family:var(--font-tech);font-size:10px;letter-spacing:.2em;
  text-transform:uppercase;color:rgba(143,208,240,.86);
}
.cr-rang-prix{
  font-family:var(--font-title);font-style:normal;font-size:13px;
  letter-spacing:.06em;color:#8fd0f0;
}

/* --- la compatibilité de départ, en vingt crans --- */
/* La compatibilité tient sur une ligne : c'est un relevé, pas un choix,
   et les vingt-quatre pixels qu'elle prenait en trop faisaient basculer la
   dernière ligne de baguettes sous le pli. */
.cr-compat{
  display:flex;align-items:center;gap:14px;flex-wrap:wrap;
  margin-top:14px;padding:10px 18px;
  border:1px solid rgba(140,128,220,.16);background:rgba(12,10,32,.55);
}
.cr-compat-lab{
  font-family:var(--font-tech);font-size:10px;letter-spacing:.3em;text-transform:uppercase;
  color:rgba(240,228,192,.75);white-space:nowrap;
}
.cr-compat-crans{flex:1;display:flex;gap:3px;min-width:120px}
.cr-compat-crans i{flex:1;height:6px;display:block;background:rgba(140,128,220,.16)}
.cr-compat-crans i.on{background:var(--gold)}
.cr-compat-txt{font-family:var(--font-body);font-size:16.5px;line-height:1.35;color:rgba(226,220,245,.75)}

/* --- le récapitulatif, dans son panneau scellé --- */
.cr-recap{
  position:relative;margin-top:clamp(22px,3.2vh,32px);
  border:1px solid rgba(230,200,119,.28);
  background:linear-gradient(180deg, rgba(34,27,84,.6) 0%, rgba(14,11,40,.85) 100%);
  box-shadow:0 40px 90px -50px rgba(0,0,0,1), inset 0 1px 0 rgba(255,255,255,.05);
}
.cr-recap-in{padding:clamp(26px,3.6vh,44px) clamp(26px,3vw,48px)}
.cr-recap-lab{
  display:block;font-family:var(--font-tech);font-size:10px;letter-spacing:.32em;
  text-transform:uppercase;color:rgba(200,190,230,.5);
}
.cr-recap-nom{
  margin:14px 0 0;font-family:var(--font-title);font-weight:600;
  font-size:clamp(30px,3.6vw,48px);line-height:1;color:var(--gold-warm);
  text-shadow:0 0 48px rgba(230,200,119,.22);
}
.cr-recap-lignes{margin-top:clamp(20px,3vh,32px);border-top:1px solid rgba(230,200,119,.16)}
.cr-recap-ligne{
  display:flex;align-items:baseline;gap:clamp(14px,2vw,32px);
  padding:16px 0;border-bottom:1px solid rgba(140,128,220,.12);
}
.cr-recap-cle{
  flex:none;width:clamp(80px,9vw,130px);
  font-family:var(--font-tech);font-size:10px;letter-spacing:.26em;text-transform:uppercase;
  color:rgba(200,190,230,.45);
}
.cr-recap-val{flex:1;min-width:0;font-family:var(--font-body);font-size:20px;color:rgba(240,236,250,.9)}
.cr-recap-note{
  flex:none;font-family:var(--font-tech);font-size:10px;letter-spacing:.24em;
  text-transform:uppercase;color:rgba(200,190,230,.4);
}
.cr-recap-mot{
  margin:clamp(18px,2.6vh,26px) 0 0;font-family:var(--font-body);font-size:19px;
  font-style:italic;color:rgba(190,180,225,.55);
}

/* Les boutons du pied, aux mesures de la maquette. */
.cr-retour{
  padding:18px 30px;border-radius:0;
  background:transparent;border:1px solid rgba(140,128,220,.25);
  font-family:var(--font-title);font-weight:400;font-size:14px;letter-spacing:.26em;
  text-transform:uppercase;text-indent:0;color:rgba(226,220,245,.72);
}
.cr-retour::before{content:'\2190\00a0 '}
.cr-retour:hover{border-color:rgba(230,200,119,.5);color:var(--gold-bright);background:rgba(230,200,119,.06)}

@media(max-width:820px){
  .cr-rang{flex-wrap:wrap}
  .cr-rang .cr-tags{justify-content:flex-start;flex:1 1 100%;padding-left:52px}
}

/* ============================================================
   7. LE CHOIXPEAU
   ------------------------------------------------------------
   Il se joue dans le décor du jeu : bandeau, colonne et barre du
   bas sont déjà là, avec une maison encore indécise et des
   matières à zéro. C’est précisément ce que la scène raconte.

   Quatre temps, une seule scène. Le chapeau ne bouge pas de ses
   deux losanges : c’est la lumière autour de lui qui change, et
   la bande de parole qui passe des mots aux points.
   ============================================================ */
.sorting-wrap{
  display:flex;flex-direction:column;align-items:center;
  gap:clamp(6px,1.4vh,20px);width:100%;max-width:900px;margin:0 auto;
  text-align:center;
}

/* --- le chapeau, dans ses deux losanges --- */
.hat-stage{
  position:relative;flex:0 1 auto;aspect-ratio:1;
  width:clamp(120px,19vh,210px);max-height:clamp(120px,19vh,210px);
  min-height:clamp(88px,17vh,200px);
  display:flex;align-items:center;justify-content:center;
  margin-bottom:clamp(4px,1vh,12px);
}
/* La flaque de lumière au pied du chapeau : c’est elle qui le pose
   quelque part au lieu de le laisser flotter dans le noir. Elle respire
   lentement, et se met à battre quand il cherche. */
.hat-flaque{
  position:absolute;width:78%;height:36%;bottom:4%;border-radius:50%;
  background:radial-gradient(ellipse at center, rgba(230,200,119,.42), rgba(230,200,119,0) 70%);
  pointer-events:none;animation:flaqueRespire 5.5s ease-in-out infinite;
}
.hat-flaque.vive{animation:flaqueCherche 1.15s ease-in-out infinite}
@keyframes flaqueRespire{0%,100%{opacity:.42;transform:scale(1)}50%{opacity:.72;transform:scale(1.08)}}
@keyframes flaqueCherche{0%,100%{opacity:.5;transform:scale(1)}50%{opacity:1;transform:scale(1.22)}}
.hat-losange,.hat-losange2{
  position:absolute;transform:rotate(45deg);pointer-events:none;background:none;
}
.hat-losange{inset:6%;border:1px solid rgba(230,200,119,.26)}
.hat-losange2{inset:16%;border:1px solid rgba(140,128,220,.2)}
.hat-losange::after{display:none}
/* Les rayons du verdict : une roue de lumière qui tourne lentement et
   s’efface vers les bords. Elle n’apparaît qu’au moment où il pèse ses
   mots, et pâlit une fois qu’il a tranché. L’entrée se fait en opacité
   seule : la roue tourne déjà, une entrée qui touche à la transformation
   arrêterait la rotation le temps de son passage. */
.hat-rayons{
  position:absolute;width:190%;height:190%;pointer-events:none;opacity:.55;
  background:conic-gradient(from 0deg, rgba(230,200,119,.26) 0deg 6deg, transparent 6deg 30deg, rgba(230,200,119,.18) 30deg 34deg, transparent 34deg 60deg);
  -webkit-mask-image:radial-gradient(closest-side, #000 12%, rgba(0,0,0,.5) 50%, transparent 78%);
  mask-image:radial-gradient(closest-side, #000 12%, rgba(0,0,0,.5) 50%, transparent 78%);
  animation:rayonTourne 26s linear infinite, rayonParait 1.1s ease both;
}
@keyframes rayonTourne{to{transform:rotate(360deg)}}
@keyframes rayonParait{from{opacity:0}to{opacity:1}}

/* Le Choixpeau lui-même. Le fondu radial mange ses bords pour qu’il
   sorte de l’ombre au lieu d’être collé dessus, et le mode « screen »
   fait que le noir de l’image disparaît dans la nuit.

   Trois gestes, et un seul à la fois :
     au repos   il flotte, très lentement, en penchant à peine
     il parle   il part d’un coup d’un côté, puis reprend sa flottaison
     il cherche il s’agite de gauche à droite, sans repos

   Les deux gestes de parole existent en double, A et B, et on alterne :
   deux phrases de suite avec le même mouvement, et on verrait la boucle.
   Alterner la classe est aussi ce qui relance l’animation, qu’un simple
   changement de texte ne ferait pas. */
.hat-icon{
  position:relative;z-index:2;
  width:auto;height:auto;max-width:80%;max-height:90%;object-fit:contain;
  mix-blend-mode:screen;
  -webkit-mask-image:radial-gradient(closest-side ellipse at 50% 52%, #000 58%, transparent 96%);
  mask-image:radial-gradient(closest-side ellipse at 50% 52%, #000 58%, transparent 96%);
  filter:brightness(1.06) contrast(1.1) saturate(1.05);
  animation:hatFlotte 6.5s ease-in-out infinite;
}
.hat-icon.dit-a{animation:hatDitA .9s ease, hatFlotte 6.5s ease-in-out infinite .9s}
.hat-icon.dit-b{animation:hatDitB .9s ease, hatFlotte 6.5s ease-in-out infinite .9s}
.hat-icon.cherche,
.hat-icon.cherche.dit-a,
.hat-icon.cherche.dit-b{animation:hatCherche 1.15s ease-in-out infinite}
@keyframes hatFlotte{
  0%,100%{transform:translateY(0) rotate(-1.2deg)}
  50%{transform:translateY(-9px) rotate(1.4deg)}
}
@keyframes hatDitA{
  0%{transform:rotate(0) scale(1)}
  20%{transform:rotate(-7deg) scale(1.05)}
  45%{transform:rotate(5deg) scale(.99)}
  70%{transform:rotate(-3deg) scale(1.02)}
  100%{transform:rotate(0) scale(1)}
}
@keyframes hatDitB{
  0%{transform:rotate(0) scale(1)}
  20%{transform:rotate(6deg) scale(1.04)}
  45%{transform:rotate(-5deg) scale(1)}
  70%{transform:rotate(3deg) scale(1.02)}
  100%{transform:rotate(0) scale(1)}
}
@keyframes hatCherche{
  0%,100%{transform:rotate(-5deg) translateY(0)}
  25%{transform:rotate(4deg) translateY(-5px)}
  50%{transform:rotate(-6deg) translateY(2px)}
  75%{transform:rotate(5deg) translateY(-4px)}
}
.hat-glow{display:none}

/* --- le sur-titre et les crans --- */
.hat-tete{
  flex:none;display:flex;flex-direction:column;align-items:center;gap:9px;
}
.hat-bandeau{
  display:flex;align-items:center;gap:13px;
  font-family:var(--font-tech);font-size:10px;letter-spacing:.34em;text-transform:uppercase;
  color:rgba(230,200,119,.72);white-space:nowrap;
}
.hat-bandeau i{display:block;width:22px;height:1px;flex:none;background:rgba(230,200,119,.5)}
.hat-dots{display:flex;gap:5px}
.hat-dots i{width:34px;height:4px;display:block;background:rgba(140,128,220,.2)}
.hat-dots i.done{background:linear-gradient(90deg,#f4dda0,#cfa64c)}
.hat-dots i.now{background:rgba(230,200,119,.45);box-shadow:0 0 12px -2px rgba(230,200,119,.9)}

/* --- la bande de parole --- */
.hat-parole{
  position:relative;flex:none;max-width:min(760px,86%);
  padding:11px 30px;
  border-top:1px solid rgba(230,200,119,.28);
  border-bottom:1px solid rgba(230,200,119,.28);
  animation:rise .4s var(--ease-out) both;
}
.hat-guill{position:absolute;font-family:var(--font-title);font-size:22px;color:rgba(230,200,119,.4)}
.hat-guill-g{left:8px;top:2px}
.hat-guill-d{right:8px;bottom:0}
.hat-dit{
  font-family:var(--font-body);font-size:clamp(19px,2.3vh,25px);font-style:italic;
  line-height:1.35;color:rgba(244,236,214,.9);text-wrap:pretty;
}
/* La réflexion : le murmure, puis trois petits losanges d’or qui
   battent l’un après l’autre. Des losanges, pas des ronds : c’est la
   même forme que les jetons d’action et les crans du jeu. */
.hat-pense{
  display:flex;align-items:center;justify-content:center;gap:9px;
  min-height:clamp(27px,3.1vh,34px);
}
.hat-pense em{
  font-style:italic;font-family:var(--font-body);
  font-size:clamp(19px,2.3vh,25px);color:rgba(244,236,214,.72);
}
.hat-pense i{
  width:6px;height:6px;display:block;
  background:linear-gradient(135deg,#f7e6b4,#cfa64c);
  animation:penseBat 1.15s ease-in-out infinite;
}
.hat-pense i:nth-child(3){animation-delay:.18s}
.hat-pense i:nth-child(4){animation-delay:.36s}
@keyframes penseBat{
  0%,100%{opacity:.22;transform:rotate(45deg) scale(.7)}
  50%{opacity:1;transform:rotate(45deg) scale(1.15)}
}

/* ------------------------------------------------------------
   CE QUI SE VOIT, SELON LE TEMPS

   Un seul attribut décide, et le JavaScript ne fait que le poser.
   La question, elle, reste affichée pendant qu’il fouille : seules
   les réponses s’en vont, sinon on ne saurait plus à quoi il pense.
   ------------------------------------------------------------ */
.sorting-wrap .hat-rayons,
.sorting-wrap .hat-pense,
.sorting-wrap .hat-verdict{display:none}

.sorting-wrap[data-phase="think"] .hat-pense{display:flex}
.sorting-wrap[data-phase="think"] .hat-dit{display:none}
.sorting-wrap[data-phase="think"] .sorting-choices{display:none}

.sorting-wrap[data-phase="verdictWait"] .hat-rayons,
.sorting-wrap[data-phase="verdict"] .hat-rayons{display:block}

.sorting-wrap[data-phase="verdictWait"] .hat-bloc,
.sorting-wrap[data-phase="verdict"] .hat-bloc{display:none}
.sorting-wrap[data-phase="verdict"] .hat-verdict{display:flex}
/* Le sésame aligne cinq portes au lieu de quatre réponses, et chacune
   porte en plus sa devise. Le chapeau se fait donc plus petit, et les
   rangées se serrent : tout doit tenir, on ne coupe pas une maison. */
.sorting-wrap[data-phase="sesame"] .hat-dots{display:none}
.sorting-wrap[data-phase="sesame"] .hat-stage{
  width:clamp(96px,13vh,150px);max-height:clamp(96px,13vh,150px);
  min-height:clamp(80px,12vh,140px);margin-bottom:0;
}
.sorting-wrap[data-phase="sesame"] .hat-speech{padding:clamp(10px,1.5vh,16px) clamp(20px,2.4vw,34px)}
.sorting-wrap[data-phase="sesame"] .sort-choice{padding:clamp(7px,1vh,11px) 18px}

/* L’ancienne classe, gardée pour les écrans qui l’utilisent encore. */
.hat-whisper{
  margin-top:clamp(14px,2.2vh,22px);max-width:70ch;
  font-family:var(--font-body);font-size:clamp(17px,1.4vw,20px);font-style:italic;line-height:1.5;
  color:rgba(214,204,246,.72);
}

/* --- la question et les réponses --- */
.hat-bloc{
  display:flex;flex-direction:column;align-items:center;
  gap:clamp(10px,1.5vh,18px);width:100%;max-width:820px;
}
.hat-speech{
  position:relative;width:100%;
  padding:clamp(14px,2vh,22px) clamp(20px,2.4vw,34px);
  border:1px solid rgba(230,200,119,.24);
  background:linear-gradient(150deg, rgba(23,19,62,.72), rgba(9,7,30,.82));
  font-family:var(--font-title);font-weight:600;font-size:clamp(19px,2.5vh,27px);
  line-height:1.25;color:var(--gold-pale);text-wrap:balance;
}
/* Le grain, et les deux équerres opposées. */
.hat-speech::before{
  content:'';position:absolute;inset:0;pointer-events:none;opacity:.45;
  background-image:repeating-linear-gradient(115deg, rgba(255,255,255,.02) 0 1px, transparent 1px 5px);
}
.hat-speech::after{
  content:'';position:absolute;left:7px;top:7px;width:12px;height:12px;pointer-events:none;
  border-left:1px solid rgba(230,200,119,.42);border-top:1px solid rgba(230,200,119,.42);
}
.sorting-choices{
  width:100%;display:flex;flex-direction:column;gap:clamp(6px,1vh,10px);
}
.sort-choice{
  display:flex;align-items:center;gap:16px;width:100%;text-align:left;cursor:pointer;
  padding:clamp(9px,1.4vh,14px) 18px;border-radius:0;
  border:1px solid rgba(140,128,220,.24);
  border-left:2px solid rgba(230,200,119,.3);
  background:rgba(16,12,44,.55);
  color:rgba(236,230,252,.9);
  transition:background .18s, border-color .18s;
}
.sort-choice:hover{background:rgba(230,200,119,.09);border-color:rgba(230,200,119,.5);transform:none}
.sc-key{
  flex:none;width:28px;height:28px;display:flex;align-items:center;justify-content:center;
  border:1px solid rgba(230,200,119,.4);background:rgba(230,200,119,.1);
  font-family:var(--font-title);font-size:15px;color:var(--gold-warm);
}
.sort-choice:hover .sc-key{background:rgba(230,200,119,.2);color:var(--gold-bright)}
.sc-body{
  flex:1;min-width:0;font-family:var(--font-body);font-size:clamp(18px,2.1vh,23px);
  line-height:1.3;text-wrap:pretty;
}
.sc-body b{font-family:var(--font-title);font-weight:600;color:var(--gold-pale)}
/* La devise d’une maison, sur le sésame : elle se lit après, pas avant. */
.sc-note{
  display:block;margin-top:3px;font-style:italic;
  font-size:clamp(15px,1.7vh,18px);color:rgba(200,190,230,.55);
}
.sc-refus .sc-key{border-color:rgba(140,128,220,.4);background:none;color:rgba(200,190,230,.6)}

/* --- le verdict --- */
/* Le verdict prend un peu de champ : les rayons du chapeau descendent
   très bas, et le blason a besoin de ne pas être dedans. */
.hat-verdict{
  position:relative;z-index:3;
  display:flex;flex-direction:column;align-items:center;
  gap:clamp(12px,2vh,22px);width:100%;max-width:760px;
  margin-top:clamp(8px,1.6vh,18px);
}
/* Le bloc du verdict apparaît droit. L’animation du cachet de cire, elle,
   finit volontairement inclinée de huit degrés : c’est un cachet apposé à
   la main, pas un titre. Les deux ne doivent surtout pas partager la même
   image clé, sinon le nom de la maison s’affiche de travers. */
.hv-tete{display:flex;align-items:center;gap:18px;animation:verdictIn .7s ease both}
@keyframes verdictIn{from{opacity:0;transform:scale(.86)}to{opacity:1;transform:scale(1)}}
.hv-crest{flex:none;width:clamp(58px,8.4vh,92px);height:clamp(58px,8.4vh,92px);display:block}
.hv-crest img{width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 6px 20px rgba(0,0,0,.7))}
.hv-txt{display:flex;flex-direction:column;text-align:left}
.hv-lab{
  font-family:var(--font-tech);font-size:10px;letter-spacing:.34em;text-transform:uppercase;
  color:rgba(230,200,119,.7);
}
.hv-nom{
  margin-top:9px;font-family:var(--font-title);font-weight:600;
  font-size:clamp(28px,4.4vh,48px);line-height:1;letter-spacing:.04em;
  color:var(--gold-pale);text-shadow:0 0 46px rgba(230,200,119,.35);
  text-transform:uppercase;
}
.hv-mot{
  margin:0;max-width:60ch;
  font-family:var(--font-body);font-size:clamp(18px,2.1vh,23px);font-style:italic;
  line-height:1.45;color:rgba(226,220,245,.78);text-wrap:pretty;
}
.hv-boutons{display:flex;align-items:center;gap:12px;flex-wrap:wrap;justify-content:center}
/* La seconde porte, sobre : elle mène à la Fiche, pas à un second tour. */
.hv-second{
  padding:13px 22px;cursor:pointer;border-radius:0;
  background:transparent;border:1px solid rgba(140,128,220,.28);
  font-family:var(--font-tech);font-size:11px;letter-spacing:.26em;text-transform:uppercase;
  color:rgba(200,190,230,.6);
  transition:border-color .25s, color .25s;
}
.hv-second:hover{border-color:rgba(230,200,119,.5);color:var(--gold-bright)}
.hv-entrer{
  padding:13px 30px;cursor:pointer;border-radius:0;
  border:1px solid rgba(244,221,160,.6);
  background:linear-gradient(180deg,#f4dda0,#cfa64c);
  font-family:var(--font-tech);font-weight:500;font-size:11px;letter-spacing:.28em;
  text-transform:uppercase;color:#2b1d05;
  transition:background .25s, transform .25s;
}
.hv-entrer:hover{background:linear-gradient(180deg,#fbeec1,#dcb45c);transform:translateY(-2px)}

.hat-note{
  margin-top:clamp(12px,2vh,20px);max-width:64ch;
  font-family:var(--font-body);font-size:18px;font-style:italic;line-height:1.5;
  color:rgba(200,190,230,.55);
}

/* --- les vestiges de l’ancienne révélation, encore utilisés ailleurs --- */
.house-reveal{animation:rise .6s var(--ease-out) both}
.house-banner{
  display:flex;align-items:center;justify-content:center;gap:18px;
  margin:clamp(16px,2.6vh,26px) 0 0;padding:clamp(16px,2.6vh,26px) clamp(24px,4vw,48px);
  border-top:1px solid rgba(230,200,119,.3);border-bottom:1px solid rgba(230,200,119,.3);
  font-family:var(--font-title);font-weight:600;
  font-size:clamp(30px,4vw,54px);line-height:1;letter-spacing:.08em;text-transform:uppercase;
  color:var(--gold-pale);text-shadow:0 0 60px rgba(230,200,119,.35);
}
.hb-blason{width:1.15em;height:1.15em;flex:none;filter:drop-shadow(0 4px 14px rgba(0,0,0,.7))}
.house-facts{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,190px),1fr));
  gap:clamp(10px,1.4vw,18px);width:100%;
  margin:clamp(18px,2.8vh,28px) 0 clamp(20px,3vh,30px);
}
.hf{
  display:flex;flex-direction:column;gap:6px;text-align:left;
  padding:14px 16px;border:1px solid rgba(140,128,220,.2);background:rgba(12,10,34,.42);
}
.hf-ico{display:none}
.hf-k{
  font-family:var(--font-tech);font-size:9px;letter-spacing:.24em;text-transform:uppercase;
  color:rgba(230,200,119,.6);
}
.hf-v{font-family:var(--font-body);font-size:18px;line-height:1.35;color:rgba(232,227,245,.85)}


/* ============================================================
   8. HUD : barre supérieure
   ------------------------------------------------------------
   Le bandeau lui-même est décrit en 21.1, avec la colonne et le
   bandeau du bas : les trois forment un seul cadre et se lisent
   ensemble. Ici ne restent que les pièces partagées avec d’autres
   écrans.
   ============================================================ */
/* Une ressource qui change fait un battement : on doit voir que le
   chiffre a bougé, même en regardant ailleurs. */
.tb-chip.tick{animation:chipTick .6s var(--spring)}
@keyframes chipTick{
  0%{transform:scale(1)}30%{transform:scale(1.1)}
  100%{transform:scale(1)}
}
.tb-spacer{flex:1;min-width:8px}

/* ============================================================
   9. LAYOUT DE JEU : la scène, et rien d’autre
   ------------------------------------------------------------
   L’écran de jeu tient dans le viewport. La page ne défile jamais :
   si une scène est trop longue, c’est elle qui défile, pas le monde
   autour. Le bandeau et le socle restent toujours à leur place.
   ============================================================ */
body.game-mode{overflow:hidden}
#screen-game.active{
  display:flex;flex-direction:column;
  height:100vh;height:100dvh;min-height:0;overflow:hidden;
}
#game-layout{
  position:relative;z-index:2;
  flex:1 1 auto;min-height:0;
  display:flex;align-items:stretch;overflow:hidden;
}
/* (La colonne personnage est décrite en 21.2 : c’est elle qui porte sa
   largeur, son fond et son partage de hauteur.) */
#main-panel{
  position:relative;flex:1;
  min-width:0;min-height:0;
  width:100%;max-width:none;margin:0;
  padding:clamp(14px,2.4vh,24px) clamp(18px,2.4vw,28px) clamp(16px,2.4vh,28px);
  overflow-y:auto;overscroll-behavior:contain;
  scroll-behavior:smooth;
  display:flex;flex-direction:column;align-items:center;
  justify-content:flex-start;
  justify-content:safe center;
}
/* Le chiffre fantôme et la vignette : le décor de la scène, sous le contenu.
   Jamais une lettre, seulement un nombre qui veut dire quelque chose : le
   rang de l’année, 1998 pour le 2 mai, le 402 de la cellule, le numéro de
   la salle d’audience. Une scène ordinaire ne pose rien du tout, et la
   règle reste sans effet tant que data-initiale est absent. */
#main-panel::before{
  content:attr(data-initiale);position:absolute;left:50%;top:50%;
  transform:translate(-50%,-50%);pointer-events:none;user-select:none;z-index:0;
  font-family:var(--font-title);font-weight:700;font-size:min(46vh,420px);line-height:.8;
  color:rgba(230,200,119,.035);
}
#main-panel::after{
  content:'';position:absolute;inset:0;pointer-events:none;z-index:0;
  background:radial-gradient(75% 65% at 50% 45%, rgba(0,0,0,0) 40%, rgba(0,0,0,.5) 100%);
}
#main-panel > *{position:relative;z-index:1}
/* Quand la scène déborde, le bas s’estompe : le joueur sait qu’il reste
   quelque chose dessous, sans qu’on lui colle une barre au visage. La
   barre elle-même est tuée en 19, et rien ici ne doit la ressusciter :
   un sélecteur d’identifiant l’emporterait sur la règle universelle. */
#main-panel.a-defiler{
  -webkit-mask-image:linear-gradient(180deg,#000 calc(100% - 58px),transparent);
  mask-image:linear-gradient(180deg,#000 calc(100% - 58px),transparent);
}

/* Une scène courte se centre ; une scène longue remplit et défile. */
#main-panel>*{flex:0 0 auto;width:100%}

/* ---------- panneaux (réutilisés par la Fiche) ---------- */
.sb-section{
  margin-bottom:16px;padding:14px 14px 15px;border-radius:var(--r-md);
  background:linear-gradient(165deg,rgba(30,25,62,.42),rgba(14,12,32,.34));
  border:1px solid var(--line);
  box-shadow:var(--inset-top);
  animation:cardIn .4s var(--ease) both;
}
.sb-title{
  font-size:11.5px;letter-spacing:.24em;color:var(--gold);
  padding-bottom:9px;margin-bottom:12px;position:relative;
  display:flex;align-items:center;gap:8px;
}
.sb-title::before{content:'◆';font-size:7px;color:var(--accent);opacity:.9;letter-spacing:0}
.sb-title::after{
  content:'';position:absolute;left:0;bottom:0;width:100%;height:1px;
  background:linear-gradient(90deg,var(--accent),transparent 78%);opacity:.6;
}

/* lignes de statistiques */
.stat-row{display:flex;align-items:center;gap:9px;margin-bottom:8px}
.stat-row:last-child{margin-bottom:0}
.stat-row .st-icon{width:20px;text-align:center;font-size:15px;opacity:.92}
.stat-row .st-name{
  flex:1 1 auto;min-width:0;font-size:14.5px;color:var(--parchment-dim);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.stat-row .st-val{
  font-family:var(--font-title);font-size:13.5px;color:var(--gold-bright);
  min-width:24px;text-align:right;font-variant-numeric:tabular-nums;
}
.stat-bar{
  height:8px;flex:0 0 66px;border-radius:5px;overflow:hidden;position:relative;
  background:#171331;box-shadow:inset 0 1px 3px rgba(0,0,0,.6);
}
.stat-bar::after{ /* graduation par quarts */
  content:'';position:absolute;inset:0;pointer-events:none;z-index:2;
  background:repeating-linear-gradient(90deg,transparent 0 calc(25% - 1px),rgba(0,0,0,.45) calc(25% - 1px) 25%);
}
.stat-bar>div{
  height:100%;border-radius:5px;position:relative;overflow:hidden;
  background:linear-gradient(90deg,var(--gold-dim),var(--gold-bright));
  transition:width .7s var(--ease);
}
.stat-bar>div::after{
  content:'';position:absolute;inset:0;
  background:linear-gradient(100deg,transparent 30%,rgba(255,255,255,.32) 50%,transparent 70%);
  background-size:220% auto;animation:goldSweep 4.5s linear infinite;
}
.stat-bar.mental-bar>div{background:linear-gradient(90deg,#6d4fbc,#b39ae8)}
.st-val.st-solide{color:var(--gold-bright)}
.st-val.st-maitrise{color:#fff3c4;text-shadow:0 0 9px rgba(212,175,55,.7);font-weight:700}

/* alignement moral */
.moral-scale{
  position:relative;height:12px;border-radius:7px;margin:8px 0 6px;
  background:linear-gradient(90deg,#7c1f18 0%,#4a3a52 50%,#1c6ea8 100%);
  box-shadow:inset 0 1px 4px rgba(0,0,0,.6),0 0 0 1px rgba(0,0,0,.3);
}
.moral-cursor{
  position:absolute;top:-4px;width:9px;height:20px;border-radius:4px;
  background:linear-gradient(180deg,#fff6d8,var(--gold-bright));
  box-shadow:0 0 14px rgba(245,215,110,.9),0 1px 3px rgba(0,0,0,.6);
  transform:translateX(-50%);transition:left .8s var(--ease);
}
.moral-labels{
  display:flex;justify-content:space-between;font-size:11.5px;color:var(--parchment-mute);
  font-family:var(--font-title);letter-spacing:.06em;
}

/* relations */
.rel-row{display:flex;align-items:center;gap:8px;margin-bottom:6px;font-size:14.5px}
.rel-row:last-child{margin-bottom:0}
.rel-row .rel-name{
  flex:1;color:var(--parchment-dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.rel-hearts{font-size:12px;letter-spacing:.5px;white-space:nowrap}
.rel-pos{color:#e88ba0}.rel-neg{color:#8a94b8}

/* casier judiciaire */
.susp-row{display:flex;gap:8px;align-items:center;font-size:14.5px;color:var(--parchment);margin-bottom:7px}
.susp-label{flex:1}
.susp-bar{height:8px;flex:none;width:100%}
.susp-bar>div{background:linear-gradient(90deg,#6c2f2a,#e0563f)!important}
.susp-list{font-size:12.5px;color:var(--parchment-dim);margin-top:8px;line-height:1.55}

/* étiquettes */
.sb-tag{
  display:inline-block;font-size:12.5px;padding:3px 11px;border-radius:13px;
  background:var(--accent-soft);color:var(--parchment);
  margin:0 5px 5px 0;border:1px solid var(--line-2);
  transition:border-color var(--t),transform var(--t);
}
.sb-tag:hover{border-color:var(--line-hi);transform:translateY(-1px)}
.sb-tag.tag-off{opacity:.38;filter:grayscale(1)}

/* némésis */
.rival-card{
  background:linear-gradient(165deg,rgba(160,40,40,.16),rgba(18,15,38,.6));
  border:1px solid rgba(200,90,80,.34);border-radius:var(--r-sm);padding:13px 14px;
  box-shadow:var(--inset-top);
}
.rival-head{font-size:16px;font-family:var(--font-title)}
.rival-sub{font-size:13px;color:var(--parchment-dim);margin:2px 0 8px}
.rival-score{font-family:var(--font-title);font-size:15px;letter-spacing:.05em}
.rv-v{color:var(--up)}.rv-d{color:var(--down)}
.rival-att{font-size:13px;color:var(--parchment-dim);margin-top:6px}

/* ============================================================
   10. CARTE D’ÉVÉNEMENT
   ============================================================ */
/* (La carte, le sur-titre, le titre et les choix sont décrits en 21.3 et
   21.4 : c’est là que vit la mise en scène narrative. Ici ne restent que
   les ornements de texte réutilisés par les autres écrans.) */
.ev-text em{color:var(--gold-warm);font-style:italic}
.ev-text b{color:#fff6e0;font-weight:600}
.ev-text{white-space:pre-line}
.ev-callout{
  margin-top:20px;padding:14px 16px;border-radius:0;
  border-left:1px solid rgba(230,200,119,.5);background:rgba(230,200,119,.05);
  font-size:17px;line-height:1.6;
}
.ev-callout.ev-bad{border-left-color:#d4657c;background:rgba(212,101,124,.07);color:#f0b8ae}
.ev-callout.ev-good{border-left-color:#5fbf8b;background:rgba(95,191,139,.07);color:#a9e6c2}
/* Un choix marqué : un liseré de couleur à gauche, rien de plus. Le jeu ne
   dit jamais lequel est le bon. */
/* Le filet bleu du bien et le filet rouge du mal ne sont plus posés par
   personne, et la ligne d’indice n’existe plus. Rien ne colore un choix
   selon ce qu’il vaut. */
.choice-btn.ch-locked .ch-sous{color:var(--faint)}

/* ---------- conséquence ---------- */
.result-box{
  position:relative;
  background:rgba(10,8,30,.55);
  border:1px solid rgba(230,200,119,.28);border-radius:0;
  padding:26px 28px 24px;margin-top:32px;max-width:min(900px,100%);
  animation:rise .45s var(--ease-out) both;
  box-shadow:none;
}
/* résultat présenté seul, sans carte d’événement autour */
.result-box.rb-solo{
  margin-top:0;padding:clamp(26px,3.4vw,40px) clamp(24px,3.6vw,44px);
  border-radius:0;box-shadow:0 50px 110px -60px rgba(0,0,0,1);
  background:var(--carte-fond);border-color:rgba(230,200,119,.2);
}
.result-box .rb-text{font-size:20px;white-space:pre-line}
/* La ligne du bouton Continuer. Elle portait sa marge en style en dur, donc
   les crans de resserrement ne pouvaient pas la reprendre. Voir 21.9. */
.rb-suite{margin-top:26px}

/* ---------- la pastille d’effet, gabarit court ----------
   Elle sert encore partout où la conséquence tient en une ligne : hub,
   examens, ateliers, boutique. Les trois poids de la scène narrative,
   eux, vivent en 21.4b. */
.effects-list{display:flex;flex-wrap:wrap;gap:8px;margin-top:var(--sp-3)}
.effects-list:empty{margin-top:0}
.fx{
  font-family:var(--font-tech);font-size:11px;letter-spacing:.16em;text-transform:uppercase;
  padding:6px 12px;border-radius:0;white-space:nowrap;
  animation:rise .35s var(--ease-out) backwards;
}
.fx:nth-child(2){animation-delay:.06s}.fx:nth-child(3){animation-delay:.12s}
.fx:nth-child(4){animation-delay:.18s}.fx:nth-child(5){animation-delay:.24s}
.fx:nth-child(6){animation-delay:.3s}.fx:nth-child(7){animation-delay:.36s}
.fx:nth-child(8){animation-delay:.42s}
/* Les six classes de couleur, portées par la pastille seulement : les
   lignes de la scène narrative les réinterprètent à leur façon. */
.fx.fx-up{background:rgba(95,191,139,.13);color:#7fd8a8;border:1px solid rgba(95,191,139,.4)}
.fx.fx-down{background:rgba(212,101,124,.13);color:#e2879a;border:1px solid rgba(212,101,124,.4)}
.fx.fx-info{background:rgba(143,208,240,.12);color:var(--reliques-pale);border:1px solid rgba(143,208,240,.36)}
.fx.fx-gold{background:rgba(224,189,109,.13);color:var(--gold-bright);border:1px solid rgba(224,189,109,.42)}
.fx.fx-graine{background:rgba(185,163,238,.13);color:#cbb6f5;border:1px solid rgba(185,163,238,.44)}
.fx .fx-plafond{display:inline;margin:0;font-size:inherit}

/* ============================================================
   11. LE TEMPS LIBRE, ET LES GRILLES DE SÉLECTION
   ------------------------------------------------------------
   L’écran du temps libre est refait en 41, d’après la maquette.
   Ne reste ici que l’ancienne grille de cartes, encore utilisée
   par les modales de sélection (choisir une matière, un sort,
   un adversaire, une boutique du village).
   ============================================================ */

/* --- l’ancienne grille de cartes, encore utilisée par les modales
       de sélection (choisir une matière, un sort, un adversaire) --- */
.ap-banner{
  display:flex;align-items:center;gap:16px;
  border:1px solid rgba(230,200,119,.24);border-radius:0;
  background:rgba(230,200,119,.05);
  padding:15px 22px;margin-bottom:var(--sp-3);
  box-shadow:none;animation:rise .45s var(--ease-out) both;
}
.ap-count{
  flex:none;min-width:40px;height:40px;display:flex;align-items:center;justify-content:center;
  font-family:var(--font-title);font-weight:600;font-size:22px;color:var(--gold-warm);
  border:1px solid rgba(230,200,119,.4);
}
.ap-banner b{font-family:var(--font-title);font-weight:600;font-size:19px;color:var(--gold-pale)}

.hub-grid{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));
  gap:clamp(8px,1vw,12px);margin-top:var(--sp-3);
}
.hub-card{
  position:relative;display:flex;flex-direction:column;gap:7px;
  padding:16px 18px;cursor:pointer;border-radius:0;
  border:1px solid rgba(140,128,220,.24);
  background:linear-gradient(180deg, rgba(34,28,80,.44), rgba(14,11,38,.6));
  transition:border-color var(--t),background var(--t),transform var(--t);
  animation:rise .35s var(--ease-out) backwards;
}
.hub-card:hover{border-color:rgba(230,200,119,.5);background:rgba(230,200,119,.06);transform:translateY(-2px)}
.hc-icon{
  width:32px;height:32px;display:flex;align-items:center;justify-content:center;
  font-size:16px;border:1px solid rgba(140,128,220,.3);background:rgba(140,128,220,.07);
}
.hc-title{font-family:var(--font-title);font-weight:600;font-size:18px;line-height:1.2;color:var(--gold-pale)}
.hc-sub{font-family:var(--font-body);font-size:17px;line-height:1.4;color:rgba(226,220,245,.7)}
/* Ce qui se joue avec quelqu’un, et qu’on ne dit pas en chiffres. Une
   ligne rose sous le nom, un filet à gauche, et rien de plus : le
   joueur comprend qu’il y a quelque chose, pas combien il lui manque. */
.hc-coeur{
  margin-top:7px;padding-left:9px;border-left:1px solid rgba(217,143,184,.55);
  font-family:var(--font-body);font-style:italic;font-size:14.5px;line-height:1.3;
  color:rgba(224,167,199,.9);
}
.hc-coeur-loin{border-left-color:rgba(217,143,184,.28);color:rgba(210,180,205,.6)}
.hc-badge{
  align-self:flex-start;margin-top:auto;
  display:inline-flex;align-items:center;gap:6px;
  font-family:var(--font-tech);font-size:9px;letter-spacing:.2em;text-transform:uppercase;
  color:rgba(230,200,119,.75);padding:4px 9px;border:1px solid rgba(230,200,119,.28);
}
/* Un prix porte la pièce, pas la lettre. Le Gallion est un disque frappé
   partout ailleurs dans le jeu, dans le bandeau du haut comme sur chaque
   ligne d’effet : il n’avait pas de raison de redevenir une initiale
   dans une vitrine. Le chiffre reprend la graisse d’un nombre qui
   compte, et perd l’interlettrage des libellés. */
.hc-badge .cb-jeton{width:14px;height:14px}
.hc-badge .cb-jeton i{inset:1.5px}
.hc-badge .cb-jeton b{font-size:7.5px}
.hc-badge em{
  font-family:var(--font-title);font-style:normal;font-weight:600;
  font-size:12px;letter-spacing:.04em;color:var(--gold-pale);
}
/* La même pièce quand une somme se dit dans une phrase. */
.u-somme{display:inline-flex;align-items:center;gap:6px;vertical-align:baseline}
.u-somme .cb-jeton{width:15px;height:15px}
.u-somme .cb-jeton i{inset:2px}
.u-somme .cb-jeton b{font-size:8px}
.hc-badge.hc-risque{color:#e2879a;border-color:rgba(212,101,124,.4);background:rgba(212,101,124,.08)}
.summary-list{list-style:none;padding:0;margin:0}
.summary-list li{
  padding:9px 0 9px 16px;position:relative;font-family:var(--font-body);font-size:18px;line-height:1.5;
  border-bottom:1px solid rgba(140,128,220,.14);
}
.summary-list li:last-child{border-bottom:none}
.summary-list li::before{content:'';position:absolute;left:0;top:1.05em;width:6px;height:1px;background:rgba(230,200,119,.6)}


/* ============================================================
   12. MODALE & TOASTS
   ============================================================ */
#modal-zone{
  position:fixed;inset:0;z-index:300;display:none;align-items:center;justify-content:center;
  background:rgba(3,2,8,.76);backdrop-filter:blur(7px);padding:20px;
}
#modal-zone.open{display:flex;animation:fadeIn .22s ease}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
.modal{
  position:relative;display:flex;flex-direction:column;
  background:linear-gradient(168deg,rgba(33,28,62,.98),rgba(15,13,32,.99));
  border:1px solid var(--line-hi);border-radius:var(--r-xl);
  max-width:760px;width:100%;max-height:88vh;
  box-shadow:var(--e4),0 0 70px rgba(212,175,55,.08);
  animation:modalIn .38s var(--spring);
  overflow:hidden;
}
@keyframes modalIn{from{opacity:0;transform:translateY(22px) scale(.97)}to{opacity:1;transform:none}}
.modal::before{
  content:'';position:absolute;top:0;left:12%;right:12%;height:1px;z-index:2;
  background:linear-gradient(90deg,transparent,var(--gold-bright),transparent);
}
.modal-body{
  padding:32px 36px 8px;overflow-y:auto;flex:1;min-height:0;
  overscroll-behavior:contain;
}
.modal-foot{
  padding:16px 36px 22px;display:flex;justify-content:center;gap:12px;
  background:linear-gradient(180deg,transparent,rgba(0,0,0,.28));
}
.modal-x{
  position:absolute;top:12px;right:12px;z-index:3;
  width:34px;height:34px;border-radius:10px;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  font-size:15px;color:var(--parchment-mute);
  background:rgba(255,255,255,.04);border:1px solid var(--line);
  transition:all var(--t) var(--ease);
}
.modal-x:hover{color:var(--gold-bright);border-color:var(--line-hi);background:rgba(212,175,55,.1);transform:rotate(90deg)}
/* dans une modale, les grilles respirent moins */
.modal .hub-grid{grid-template-columns:repeat(auto-fill,minmax(212px,1fr));gap:11px}
.modal .hub-card{padding:15px}
.modal .hub-card .hc-icon{width:38px;height:38px;font-size:21px;margin-bottom:8px}
.modal .hub-card .hc-title{font-size:15.5px}
.modal .hub-card .hc-sub{font-size:13.5px}

#toast-zone{position:fixed;bottom:24px;right:24px;z-index:400;display:flex;flex-direction:column;gap:10px;pointer-events:none}
.toast{
  background:linear-gradient(165deg,var(--surf-3),var(--surf-1));
  border:1px solid var(--gold-dim);border-left:3px solid var(--gold);
  border-radius:var(--r-sm);padding:13px 19px;font-size:16px;
  box-shadow:var(--e3);backdrop-filter:blur(12px);max-width:340px;
  animation:toastIn .38s var(--spring);
}
@keyframes toastIn{from{opacity:0;transform:translateX(46px) scale(.92)}to{opacity:1;transform:none}}
.toast.out{opacity:0;transform:translateX(24px);transition:opacity .4s,transform .4s}

/* ============================================================
   13. EXAMENS
   ============================================================ */
.exam-progress{
  font-size:12px;color:var(--gold);letter-spacing:.2em;margin-bottom:var(--sp-3);
  display:flex;align-items:center;gap:10px;
}
.exam-progress::before{content:'';width:20px;height:1px;background:linear-gradient(90deg,var(--gold),transparent)}
.exam-q{font-size:21px;margin-bottom:var(--sp-4);line-height:1.45}

/* Le sablier des B.U.S.E. et des A.S.P.I.C. Il occupe une ligne, pas un
   écran : la question reste ce qu’on regarde. */
.sablier{
  display:flex;align-items:center;gap:10px;
  margin:0 0 var(--sp-3);padding:7px 11px;
  border:1px solid rgba(212,175,55,.16);border-radius:var(--r-xs);
  background:rgba(0,0,0,.18);
}
.sablier-ico{font-size:15px;flex:0 0 auto;line-height:1}
.sablier-piste{
  flex:1;height:4px;border-radius:2px;overflow:hidden;
  background:rgba(255,255,255,.07);
}
.sablier-piste i{
  display:block;height:100%;border-radius:2px;
  background:linear-gradient(90deg,var(--gold),var(--gold-bright));
  transition:width .1s linear;
}
.sablier-compte{
  flex:0 0 auto;min-width:42px;text-align:right;
  font-family:var(--font-title);font-size:12.5px;letter-spacing:.08em;
  color:var(--parchment-mute);font-variant-numeric:tabular-nums;
}
.sablier-fini{font-size:13.5px;color:var(--down)}
.sablier-urgent{border-color:rgba(192,57,43,.4);background:rgba(192,57,43,.07)}
.sablier-urgent .sablier-piste i{background:linear-gradient(90deg,#c0392b,#e8785e)}
.sablier-urgent .sablier-compte{color:#e8a25e}
.sablier-urgent .sablier-ico{animation:sablier-bat 1s ease-in-out infinite}
@keyframes sablier-bat{
  0%,100%{transform:scale(1);opacity:.85}
  50%{transform:scale(1.16);opacity:1}
}
@media (prefers-reduced-motion:reduce){
  .sablier-urgent .sablier-ico{animation:none}
  .sablier-piste i{transition:none}
}
.grade-big{
  font-family:var(--font-title);font-size:clamp(46px,8vw,62px);font-weight:900;
  text-align:center;margin:var(--sp-2) 0;line-height:1;
}
.grade-O{color:var(--up);text-shadow:0 0 26px rgba(124,231,162,.45)}
.grade-E{color:#9adcf9;text-shadow:0 0 22px rgba(154,220,249,.35)}
.grade-A{color:var(--gold-bright);text-shadow:0 0 22px rgba(248,224,142,.35)}
.grade-P{color:#e8a25e}.grade-D{color:var(--down)}.grade-T{color:#b0413e}
.grades-table{width:100%;border-collapse:collapse;margin-top:var(--sp-3)}
.grades-table td{padding:11px 12px;border-bottom:1px solid rgba(59,53,99,.5);font-size:17.5px}
.grades-table tr:last-child td{border-bottom:none}
.grades-table tr:hover td{background:rgba(255,255,255,.028)}
.grades-table td:last-child{text-align:right;font-family:var(--font-title);font-weight:700}

/* ============================================================
   14. QUIDDITCH
   ============================================================ */
.match-score{
  display:flex;justify-content:center;gap:22px;align-items:center;flex-wrap:wrap;
  font-family:var(--font-title);font-size:clamp(26px,4.4vw,34px);font-weight:900;
  margin:var(--sp-4) 0;padding:16px 20px;border-radius:var(--r-md);
  background:linear-gradient(180deg,rgba(0,0,0,.3),rgba(0,0,0,.14));
  border:1px solid var(--line);box-shadow:var(--inset-top);
  color:var(--gold-bright);text-shadow:0 0 24px rgba(212,175,55,.3);
  font-variant-numeric:tabular-nums;
}
.match-score .ms-team{
  font-size:15px;font-weight:600;color:var(--parchment-dim);
  letter-spacing:.1em;text-transform:uppercase;text-shadow:none;
}
.commentary{
  font-family:var(--font-quote);font-style:italic;color:var(--parchment-dim);
  margin:var(--sp-2) 0;font-size:18.5px;padding-left:16px;border-left:2px solid var(--line-2);
}

/* ============================================================
   15. DUEL : arène tour par tour
   ============================================================ */
.cbt-card{
  border-color:rgba(212,120,80,.28);
  box-shadow:var(--e3),0 0 70px rgba(200,80,60,.08),var(--inset-top);
}
.cbt-card::after{background:linear-gradient(90deg,transparent,#d4703f,transparent);opacity:.5}
.cbt-arena{
  display:grid;grid-template-columns:1fr auto 1fr;gap:14px;align-items:stretch;
  margin:var(--sp-4) 0 var(--sp-4);
}
.cbt-fighter{
  position:relative;overflow:hidden;
  background:linear-gradient(165deg,rgba(16,13,34,.8),rgba(9,7,20,.6));
  border:1px solid var(--line);border-radius:var(--r-md);padding:13px 15px;
  box-shadow:var(--inset-top);
  transition:box-shadow var(--t),border-color var(--t);
}
.cbt-fighter::before{
  content:'';position:absolute;top:0;left:0;right:0;height:2px;
  background:linear-gradient(90deg,transparent,currentColor,transparent);opacity:.5;
}
.cbt-me{border-color:rgba(122,180,230,.3);color:#7ab4e6}
.cbt-foe{border-color:rgba(200,90,80,.34);color:#e08a6f}
.cbt-fighter.hit{animation:hitFlash .4s var(--ease)}
@keyframes hitFlash{
  0%{transform:translateX(0)}
  20%{transform:translateX(-6px);box-shadow:0 0 0 2px rgba(224,90,74,.5),var(--e2)}
  45%{transform:translateX(5px)}70%{transform:translateX(-3px)}100%{transform:translateX(0)}
}
.cbt-head{display:flex;align-items:center;gap:9px;font-family:var(--font-title);font-size:15px;margin-bottom:9px}
.cbt-head b{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--parchment)}
.cbt-ico{
  font-size:18px;width:32px;height:32px;flex:0 0 auto;border-radius:9px;
  display:flex;align-items:center;justify-content:center;
  background:rgba(0,0,0,.35);border:1px solid currentColor;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08);
}
.cbt-pv{
  font-size:12.5px;color:var(--gold-bright);letter-spacing:.04em;
  font-family:var(--font-title);font-variant-numeric:tabular-nums;
}
.cbt-bar{
  height:12px;border-radius:7px;overflow:hidden;position:relative;
  background:#140f28;box-shadow:inset 0 1px 5px rgba(0,0,0,.7);
}
.cbt-bar::after{
  content:'';position:absolute;inset:0;pointer-events:none;z-index:3;
  background:repeating-linear-gradient(90deg,transparent 0 calc(20% - 1px),rgba(0,0,0,.45) calc(20% - 1px) 20%);
}
.cbt-ghost{ /* fantôme des dégâts subis : lisible sur barre verte comme rouge */
  position:absolute;top:0;bottom:0;left:0;z-index:1;border-radius:7px;
  background:rgba(255,238,200,.55);transition:width .85s ease .18s;
}
.cbt-bar>div{
  position:relative;z-index:2;height:100%;border-radius:7px;
  background:linear-gradient(90deg,#2f8f5c,#6fe0a0);
  box-shadow:0 0 12px rgba(111,224,160,.3);
  transition:width .42s var(--ease);
}
.cbt-foe .cbt-bar>div{background:linear-gradient(90deg,#8f2f2f,#e08a6f);box-shadow:0 0 12px rgba(224,138,111,.3)}
.cbt-bar>div.low{background:linear-gradient(90deg,#8a2222,#e05a4a);animation:pulseLow 1.1s ease-in-out infinite}
@keyframes pulseLow{0%,100%{filter:brightness(1)}50%{filter:brightness(1.55)}}
.cbt-statuts{display:flex;flex-wrap:wrap;gap:5px;margin-top:8px;min-height:19px}
.cbt-st{
  font-size:11.5px;padding:2px 8px;border-radius:11px;
  background:rgba(255,255,255,.05);border:1px solid var(--line);color:var(--parchment-dim);
  animation:fxPop .3s var(--spring);
}
.cbt-vs{
  font-family:var(--font-title);text-align:center;align-self:center;
  display:flex;flex-direction:column;align-items:center;gap:4px;
}
.cbt-vs b{
  font-size:20px;color:var(--gold-dim);width:46px;height:46px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;font-weight:400;
  border:1px solid var(--line-2);background:radial-gradient(circle,rgba(212,175,55,.1),transparent 70%);
}
.cbt-vs span{
  display:block;font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--parchment-mute);
}

.cbt-log{
  background:rgba(6,5,16,.66);border:1px solid var(--line);border-radius:var(--r-md);
  padding:12px 16px;max-height:230px;overflow-y:auto;font-size:16px;line-height:1.5;
  box-shadow:inset 0 2px 12px rgba(0,0,0,.5);scroll-behavior:smooth;
}
.cbt-line{
  padding:6px 0 6px 12px;border-bottom:1px solid rgba(59,53,99,.24);position:relative;
  animation:logIn .32s var(--ease) backwards;
}
@keyframes logIn{from{opacity:0;transform:translateX(-8px)}to{opacity:1;transform:none}}
.cbt-line::before{
  content:'';position:absolute;left:0;top:9px;bottom:9px;width:2px;border-radius:2px;
  background:currentColor;opacity:.55;
}
.cbt-line:last-child{border-bottom:none}
.cbt-line b{font-family:var(--font-title);font-size:14.5px}
.cbt-moi{color:#bfe3ff}.cbt-moi b{color:var(--up)}
.cbt-lui{color:#f0c8bd}.cbt-lui b{color:var(--down)}
.cbt-line.cbt-noir{color:#d9b6e8}.cbt-line.cbt-noir b{color:#c77ce0}
.cbt-neutre{color:var(--parchment-mute);font-style:italic}

.cbt-actions{display:grid;grid-template-columns:repeat(auto-fill,minmax(244px,1fr));gap:10px;margin-top:var(--sp-4)}
.cbt-act{
  display:flex;align-items:flex-start;gap:11px;text-align:left;cursor:pointer;
  background:linear-gradient(180deg,rgba(40,34,78,.82),rgba(22,18,44,.9));
  border:1px solid var(--line-2);border-radius:var(--r-sm);
  padding:12px 14px 12px 12px;color:var(--parchment);font-family:var(--font-body);
  position:relative;overflow:hidden;box-shadow:var(--e1);
  transition:transform var(--t-fast) var(--ease),border-color var(--t-fast),box-shadow var(--t-fast),background var(--t-fast);
  animation:cardIn .3s var(--ease) backwards;
}
.cbt-act:hover{transform:translateY(-2px);border-color:var(--gold);box-shadow:var(--e2)}
.cbt-act:active{transform:translateY(0) scale(.99)}
.cbt-act-ico{
  font-size:18px;flex:0 0 auto;width:34px;height:34px;border-radius:9px;
  display:flex;align-items:center;justify-content:center;
  background:rgba(0,0,0,.3);border:1px solid var(--line);
  box-shadow:var(--inset-top);
}
.cbt-act-body{flex:1;min-width:0}
.cbt-act-body b{display:block;font-family:var(--font-title);font-size:14.5px;letter-spacing:.02em}
.cbt-act-body span{display:block;font-size:13.5px;color:var(--parchment-dim);line-height:1.34;margin-top:3px}
.cbt-atk{border-left:3px solid #d4703f}
.cbt-atk .cbt-act-ico{border-color:rgba(212,112,63,.5)}
.cbt-def{border-left:3px solid #4f9fe0}
.cbt-def .cbt-act-ico{border-color:rgba(79,159,224,.5)}
.cbt-ruse{border-left:3px solid #b58fe0}
.cbt-ruse .cbt-act-ico{border-color:rgba(181,143,224,.5)}
.cbt-act.cbt-noir{border-left:3px solid #8b2f8b}
.cbt-act.cbt-interdit{
  background:linear-gradient(180deg,rgba(58,18,58,.88),rgba(24,10,28,.94));
  border-color:#6c2a6c;
}
.cbt-act.cbt-interdit:hover{border-color:#d06ad0;box-shadow:var(--e2),0 0 30px rgba(140,30,140,.35)}
.cbt-act.cbt-interdit .cbt-act-ico{border-color:rgba(208,106,208,.5)}
.cbt-act-tag{
  position:absolute;top:7px;right:9px;font-family:var(--font-title);font-size:9px;
  letter-spacing:.14em;text-transform:uppercase;color:#e08ae0;
}
.cbt-fuite{border-left:3px solid #6b6485;opacity:.86}
.cbt-fuite:hover{opacity:1}

.cbt-recap{
  display:flex;flex-wrap:wrap;gap:12px;justify-content:center;
  margin:var(--sp-3) 0 var(--sp-1);
}
.cbt-recap>span{
  font-size:14.5px;color:var(--parchment-dim);
  padding:6px 14px;border-radius:20px;
  background:rgba(255,255,255,.035);border:1px solid var(--line);
}
.cbt-recap b{color:var(--gold-bright);font-family:var(--font-title)}
.cbt-recap-noir{border-color:rgba(200,110,220,.35)!important}
.cbt-recap-noir b{color:#d98ae0}

/* secousse d’écran sur un coup dur */
.shake{animation:shake .34s ease}
@keyframes shake{
  0%,100%{transform:translate(0,0)}
  15%{transform:translate(-5px,2px)}35%{transform:translate(5px,-2px)}
  55%{transform:translate(-3px,1px)}80%{transform:translate(2px,0)}
}

/* ============================================================
   16. VERSUS (épilogue rival)
   ============================================================ */
.vs-block{margin-top:var(--sp-3);display:flex;flex-direction:column;gap:12px}
.vs-row{display:flex;align-items:center;gap:12px}
.vs-name{flex:0 0 42%;font-size:16px;color:var(--parchment-dim);text-align:right;line-height:1.3}
.vs-bar{
  flex:1;height:14px;border-radius:8px;overflow:hidden;
  background:#171331;box-shadow:inset 0 1px 4px rgba(0,0,0,.55);
}
.vs-bar>div{
  height:100%;border-radius:8px;position:relative;overflow:hidden;
  background:linear-gradient(90deg,var(--gold-dim),var(--gold-bright));
  transition:width 1s var(--ease);
}
.vs-bar>div::after{
  content:'';position:absolute;inset:0;
  background:linear-gradient(100deg,transparent 30%,rgba(255,255,255,.3) 50%,transparent 70%);
  background-size:220% auto;animation:goldSweep 4s linear infinite;
}
.vs-bar-rival>div{background:linear-gradient(90deg,#7c2f28,#e07a5f)}
.vs-num{
  font-family:var(--font-title);font-weight:700;color:var(--gold-bright);
  min-width:38px;font-variant-numeric:tabular-nums;
}

/* ============================================================
   17. COUPE DES QUATRE MAISONS
   ============================================================ */
.coupe-card{overflow:hidden;position:relative}
.coupe-card::after{background:linear-gradient(90deg,transparent,var(--gold-bright),transparent);opacity:.7}

/* sabliers */
.coupe-glasses{
  display:grid;grid-template-columns:repeat(4,1fr);gap:12px;
  margin:var(--sp-5) 0 var(--sp-4);
}
.coupe-glass{display:flex;flex-direction:column;align-items:center;gap:8px}
.cg-tube{
  position:relative;width:100%;max-width:74px;height:132px;border-radius:10px;overflow:hidden;
  background:linear-gradient(180deg,rgba(0,0,0,.45),rgba(0,0,0,.25));
  border:1px solid var(--line-2);
  box-shadow:inset 0 2px 12px rgba(0,0,0,.6),var(--inset-top);
}
.cg-fill{
  position:absolute;left:0;right:0;bottom:0;height:0;
  transition:height 1.3s cubic-bezier(.22,1,.36,1);
}
.cg-fill::after{ /* miroitement des gemmes */
  content:'';position:absolute;inset:0;
  background:linear-gradient(100deg,transparent 30%,rgba(255,255,255,.28) 50%,transparent 70%);
  background-size:220% auto;animation:goldSweep 4s linear infinite;
}
.cg-gry .cg-fill{background:linear-gradient(180deg,#e0a03a,#7f1d1d)}
.cg-sly .cg-fill{background:linear-gradient(180deg,#9ec9ae,#14532d)}
.cg-rav .cg-fill{background:linear-gradient(180deg,#b08d57,#1e3a8a)}
.cg-huf .cg-fill{background:linear-gradient(180deg,#f5d76e,#78350f)}
.cg-label{font-size:12px;font-family:var(--font-title);letter-spacing:.06em;color:var(--parchment-dim);text-align:center}
.cg-me .cg-label{color:var(--gold-bright)}
.cg-me .cg-tube{border-color:var(--line-hi);box-shadow:inset 0 2px 12px rgba(0,0,0,.6),0 0 26px var(--accent-soft)}

.coupe-board{margin:var(--sp-4) 0 var(--sp-2);display:flex;flex-direction:column;gap:10px}
.coupe-row{
  display:flex;align-items:center;gap:12px;
  opacity:0;transform:translateX(-26px);
  transition:opacity .55s var(--ease),transform .55s var(--ease);
  padding:8px 12px;border-radius:var(--r-sm);
  background:rgba(255,255,255,.02);border:1px solid transparent;
}
.coupe-row.coupe-in{opacity:1;transform:none}
.coupe-row.coupe-mine{border-color:var(--line-hi);background:var(--accent-soft)}
.coupe-rank{
  font-family:var(--font-title);font-size:13px;color:var(--parchment-mute);
  width:22px;text-align:center;flex:0 0 auto;
}
.coupe-ico{font-size:21px;width:26px;text-align:center;flex:0 0 auto}
.coupe-nom{flex:0 0 150px;font-size:15px;color:var(--parchment)}
.coupe-nom em{color:var(--gold-bright);font-style:normal}
.coupe-bar{
  flex:1;height:15px;border-radius:9px;overflow:hidden;
  background:rgba(0,0,0,.4);border:1px solid var(--line);
  box-shadow:inset 0 1px 4px rgba(0,0,0,.5);
}
.coupe-bar>i{display:block;height:100%;width:0;border-radius:9px;transition:width 1.15s cubic-bezier(.22,1,.36,1)}
.house-bar-gryffondor>i{background:linear-gradient(90deg,#7f1d1d,#e0a03a)}
.house-bar-serpentard>i{background:linear-gradient(90deg,#14532d,#9ec9ae)}
.house-bar-serdaigle>i{background:linear-gradient(90deg,#1e3a8a,#b08d57)}
.house-bar-poufsouffle>i{background:linear-gradient(90deg,#78350f,#f5d76e)}
.coupe-pts{
  flex:0 0 64px;text-align:right;font-family:var(--font-title);font-size:19px;
  color:var(--gold-bright);font-variant-numeric:tabular-nums;
}
.coupe-banner{
  position:relative;overflow:hidden;
  margin:var(--sp-5) auto var(--sp-2);padding:22px;border-radius:var(--r-md);text-align:center;
  font-family:var(--font-display),var(--font-title);
  font-size:clamp(22px,4vw,38px);letter-spacing:2px;
  border:1px solid var(--gold-dim);
  box-shadow:var(--e3),inset 0 1px 0 rgba(255,255,255,.18);
  animation:coupePop .7s var(--spring);
}
.coupe-banner::before{
  content:'';position:absolute;inset:-60%;pointer-events:none;opacity:.18;
  background:repeating-conic-gradient(from 0deg at 50% 50%, rgba(255,255,255,.55) 0deg 2.5deg, transparent 2.5deg 15deg);
  animation:rays 26s linear infinite;
}
@keyframes coupePop{from{transform:scale(.72);opacity:0}to{transform:scale(1);opacity:1}}

/* La Coupe empile beaucoup de choses : texte, sabliers, classement, bannière,
   verdict. Tout est calé sur la hauteur du viewport pour qu’elle tienne à
   l’écran sans qu’on ait à faire défiler une remise de prix. */
#main-panel>.coupe-card{
  min-height:0;
  padding:clamp(18px,2.4vh,34px) clamp(28px,3.4vw,56px);
}
.coupe-card .ev-text{font-size:clamp(17px,1.5vh,19.5px);line-height:1.5;margin-bottom:0}
.coupe-glasses{gap:10px;margin:clamp(12px,2vh,24px) 0 clamp(10px,1.6vh,20px)}
.coupe-glass{gap:5px}
.cg-tube{max-width:64px;height:clamp(56px,11vh,116px)}
.cg-label{font-size:clamp(10px,1.2vh,12px)}
.coupe-board{margin:clamp(10px,1.6vh,20px) 0 clamp(6px,1vh,10px);gap:clamp(5px,.8vh,9px)}
.coupe-row{padding:clamp(5px,.8vh,8px) 12px;gap:11px}
.coupe-ico{font-size:18px;width:22px}
.coupe-nom{font-size:14.5px}
.coupe-pts{flex-basis:58px;font-size:17px}
.coupe-banner{
  margin:clamp(12px,2vh,24px) auto clamp(6px,1vh,10px);
  padding:clamp(11px,1.8vh,20px);
  font-size:clamp(20px,3.2vh,34px);
}
.coupe-card .result-box,.coupe-card #coupe-verdict .ev-text{font-size:17px;line-height:1.5}

/* Deux temps sur le même écran : la cérémonie, puis le verdict. Quand le
   second arrive, le premier se replie au lieu de s’empiler. */
.coupe-glasses,.coupe-card>.ev-text{
  overflow:hidden;
  transition:opacity .45s var(--ease),max-height .6s var(--ease),margin .6s var(--ease);
  max-height:400px;
}
.coupe-card.coupe-final .coupe-glasses,
.coupe-card.coupe-final>.ev-text{
  opacity:0;max-height:0;margin-top:0;margin-bottom:0;pointer-events:none;
}

/* ============================================================
   18. BILAN : JOURNAL, ÉPILOGUE
   ============================================================ */
.bilan-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(124px,1fr));gap:12px;margin:var(--sp-4) 0 var(--sp-2)}
.bilan-case{
  background:linear-gradient(165deg,rgba(30,25,62,.55),rgba(14,12,32,.4));
  border:1px solid var(--line);border-radius:var(--r-sm);
  padding:15px 10px;text-align:center;box-shadow:var(--inset-top);
  animation:fxPop .4s var(--spring) backwards;
  transition:transform var(--t) var(--ease),border-color var(--t);
}
.bilan-case:nth-child(2){animation-delay:.06s}.bilan-case:nth-child(3){animation-delay:.12s}
.bilan-case:nth-child(4){animation-delay:.18s}.bilan-case:nth-child(5){animation-delay:.24s}
.bilan-case:nth-child(6){animation-delay:.3s}
.bilan-case:hover{transform:translateY(-3px);border-color:var(--line-hi)}
.bilan-case b{
  display:block;font-family:var(--font-title);font-size:23px;color:var(--gold-bright);
  margin-bottom:5px;font-variant-numeric:tabular-nums;
}
.bilan-case span{font-size:11.5px;color:var(--parchment-dim);letter-spacing:.06em;text-transform:uppercase}

.summary-list{list-style:none;margin-top:var(--sp-3)}
.summary-list li{
  padding:10px 0 10px 28px;position:relative;
  border-bottom:1px solid rgba(59,53,99,.42);font-size:18px;
}
.summary-list li:last-child{border-bottom:none}
.summary-list li::before{content:'✦';position:absolute;left:2px;color:var(--accent);font-size:13px;top:12px}
.summary-list li:hover{background:rgba(255,255,255,.02)}
.graines-list li{position:relative}

.epilogue-wrap{max-width:900px;margin:0 auto;padding:clamp(40px,8vh,76px) 24px 120px}
.epi-title{
  font-family:var(--font-display),var(--font-title);
  font-size:clamp(32px,5.2vw,56px);font-weight:900;text-align:center;line-height:1.1;
  background-image:linear-gradient(100deg,#fdf3d0,var(--gold-bright) 40%,#8a6d1f 55%,var(--gold-bright) 70%,#fdf3d0);
  background-size:200% auto;animation:goldSweep 8s linear infinite;
  margin-bottom:var(--sp-5);
}
.epi-section{margin-bottom:var(--sp-5)}
.game-subtitle{
  font-family:var(--font-quote);font-style:italic;font-size:20px;
  color:var(--parchment-dim);margin-bottom:var(--sp-5);
}
.ep-crest{text-align:center;font-size:64px;margin-bottom:var(--sp-2);filter:drop-shadow(0 8px 26px rgba(0,0,0,.7))}
.ep-title{
  font-family:var(--font-display),var(--font-title);font-size:clamp(30px,4.6vw,48px);
  font-weight:900;text-align:center;color:#cfc7e6;line-height:1.14;margin-bottom:var(--sp-2);
}
.ep-sub{text-align:center;color:var(--parchment-dim);font-style:italic;font-size:18px;margin-bottom:var(--sp-5)}
.mort-wrap{filter:saturate(.35)}
.mort-wrap .ep-title{color:#cfc7e6}

/* ============================================================
   19. BARRE DE DÉFILEMENT
   ============================================================ */
/* Aucune barre de défilement ne se voit, nulle part. Là où une zone
   peut déborder, elle défile toujours à la molette, au clavier et au
   pavé tactile, mais sans afficher de rail : une barre grise en travers
   d’un panneau d’or, c’est la seule chose qui trahissait le navigateur
   dans tout l’écran.

   Les zones qui débordent le disent autrement, par un dégradé au bord
   (voir .a-defiler sur la scène). */
*{scrollbar-width:none;-ms-overflow-style:none}
::-webkit-scrollbar{width:0;height:0;background:transparent}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:transparent;border:0}

/* ============================================================
   20. ADAPTATIF
   ============================================================ */
@media(max-width:900px){
  .vs-name{flex-basis:38%;font-size:14px}
  .coupe-nom{flex-basis:112px;font-size:14px}
  .tb-date{display:none}
}
@media(max-width:760px){
  .cbt-arena{grid-template-columns:1fr;gap:9px}
  .cbt-vs{flex-direction:row;gap:10px;justify-content:center}
  .cbt-vs b{width:34px;height:34px;font-size:16px}
  .cbt-actions{grid-template-columns:1fr}
  .coupe-glasses{gap:8px}
  .cg-tube{height:104px}
}
@media(max-width:640px){
  body{font-size:17.5px}
  :root{--fs-lg:18.5px}
  .tl-content{padding-top:28px}
  .tl-castle{bottom:6%}
  .tl-card-sub{white-space:normal}
  .tl-moon{width:120px;top:4vh;right:8vw}
  .hat-speech{padding:24px 22px}
  .modal-body{padding:26px 20px 6px}
  .modal-foot{padding:14px 20px 18px}
  .event-card{border-radius:var(--r-lg)}
  .coupe-nom{flex-basis:88px;font-size:13px}
  .coupe-pts{flex-basis:48px;font-size:16px}
  #topbar{gap:8px}
  .tb-res{order:3;width:100%}
  .ap-banner{align-items:flex-start;padding:14px 16px;gap:13px}
  .hub-grid{grid-template-columns:1fr}
  .choice-btn{padding-right:18px}
  .choice-btn::after{display:none}
}

@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.08s!important;scroll-behavior:auto!important;
  }
  body::before{display:none}
}

/* ============================================================================
   21. REFONTE « PREMIUM NARRATIVE »
   ----------------------------------------------------------------------------
   L'œil doit suivre : Histoire → Choix → Conséquences → Progression.
   Le style (violet, or, verre, étoiles) ne change pas. C’est la hiérarchie
   qui change : la scène occupe le centre, les mécaniques attendent dans
   la Fiche, et rien ne demande de faire défiler la page.
   ============================================================================ */

/* ------------------------------------------------------------
   21.1 BANDEAU HAUT : monnaies, chapitre, outils
   ------------------------------------------------------------
   Trois blocs sur une seule ligne, et rien ne passe à la ligne :
   les monnaies à gauche, le chapitre au centre avec ses deux
   progressions, les outils à droite.
   ------------------------------------------------------------ */
#topbar{
  position:relative;z-index:30;flex:none;
  display:flex;align-items:center;gap:24px;flex-wrap:nowrap;
  padding:12px clamp(16px,2.2vw,28px);min-height:var(--topbar-h);
  background:rgba(5,4,26,.86);backdrop-filter:blur(14px);
  border-bottom:1px solid rgba(230,200,119,.14);
}
.tb-res{flex:0 0 auto;display:flex;align-items:center;gap:0}

/* Les jetons de monnaie : deux vrais disques, un métal et une pierre.
   Ce sont les deux seuls arrondis autorisés dans le bandeau. */
.tb-chip{
  flex:none;display:flex;align-items:center;gap:10px;cursor:default;
  padding:0;background:none;border:0;
}
.tb-chip + .tb-chip{padding-left:14px;margin-left:14px;border-left:1px solid rgba(140,128,220,.16)}
.tb-chip i{
  position:relative;width:26px;height:26px;flex:none;border-radius:50%;
  display:flex;align-items:center;justify-content:center;font-style:normal;
}
.tb-chip b{font-family:var(--font-title);font-weight:400;font-size:19px;line-height:1}
.tb-chip em{
  font-style:normal;font-family:var(--font-tech);font-size:10px;letter-spacing:.26em;
  text-transform:uppercase;color:var(--parchment-mute);white-space:nowrap;
}
/* Le Gallion : un disque d’or frappé, avec son liseré gravé en creux. */
.tb-chip-gold i{
  background:radial-gradient(circle at 34% 30%, #fff3c9 0%, #f0d78c 30%, #d3a63f 62%, #9c7223 100%);
  box-shadow:0 2px 6px rgba(0,0,0,.6), inset 0 -2px 4px rgba(120,84,16,.7),
             inset 0 2px 3px rgba(255,245,205,.75), 0 0 14px rgba(224,189,109,.35);
  font-family:var(--font-title);font-weight:700;font-size:13px;
  color:rgba(94,64,12,.85);text-shadow:0 1px 0 rgba(255,240,190,.6);
}
.tb-chip-gold i::after{
  content:'';position:absolute;inset:3px;border-radius:50%;
  border:1px solid rgba(120,84,16,.45);
}
.tb-chip-gold b{color:var(--gold-warm)}
/* Les points de maison : une pierre bleue sertie. */
.tb-chip-house i,.tb-chip-reliques i{
  background:radial-gradient(circle at 34% 30%, rgba(70,110,160,.9) 0%, rgba(34,54,96,.95) 55%, rgba(14,20,46,1) 100%);
  box-shadow:0 2px 6px rgba(0,0,0,.6), inset 0 1px 2px rgba(190,225,255,.35), 0 0 14px rgba(120,190,240,.22);
  border:1px solid rgba(140,190,240,.4);
  color:var(--reliques-pale);font-size:13px;
}
.tb-chip-house b,.tb-chip-reliques b{color:var(--reliques-pale)}
.tb-chip svg{width:14px;height:14px;stroke:var(--reliques-pale);fill:none;stroke-width:1.6;stroke-linecap:square}



/* Le chapitre : le sur-titre et le titre du livre sur une ligne, puis les
   crans de l’année, puis le curseur d’alignement. */
.tb-chapter{
  flex:1 1 420px;min-width:0;display:flex;flex-direction:column;align-items:center;gap:8px;
  position:relative;
}
.tb-ch-tete{
  max-width:100%;min-width:0;display:flex;align-items:baseline;gap:12px;white-space:nowrap;
}
.tb-ch-1{
  flex:none;font-family:var(--font-tech);font-size:10px;letter-spacing:var(--track-wide);
  text-transform:uppercase;color:rgba(230,200,119,.7);
}
.tb-ch-2{
  min-width:0;overflow:hidden;text-overflow:ellipsis;
  font-family:var(--font-title);font-weight:400;font-size:15px;letter-spacing:.16em;
  color:#f0e4c0;text-shadow:none;
}

/* L’avancement de l’année en crans : vingt-huit segments qui s’allument.
   Une barre lisse ne dit pas combien il reste d’étapes ; des crans, si. */
.tb-ch-bar{
  display:flex;align-items:center;gap:20px;width:100%;max-width:560px;cursor:default;
  height:auto;margin:0;background:none;border-radius:0;overflow:visible;
}
.tb-crans{flex:1;display:flex;gap:3px;min-width:0}
.tb-crans i{
  flex:1;height:5px;background:rgba(140,128,220,.16);
  transition:background .5s var(--ease);
}
.tb-crans i.on{background:#e0bd6d}
.tb-ch-pct{
  font-family:var(--font-tech);font-size:10px;letter-spacing:.2em;
  color:var(--parchment-mute);white-space:nowrap;
}

/* L’alignement : une réglette rouge vers bleu, du plus sombre au plus clair,
   et un curseur d’or qui s’y déplace. */
.tb-align{
  position:relative;display:block;width:100%;max-width:560px;height:5px;
  margin:0;padding:0;border-radius:0;cursor:default;
  background:linear-gradient(90deg, var(--evil) 0%, rgba(60,50,110,.5) 50%, var(--good) 100%);
}
.tb-align:hover{background:linear-gradient(90deg, var(--evil) 0%, rgba(60,50,110,.5) 50%, var(--good) 100%)}
.tb-al-scale{display:block;position:relative;width:100%;height:100%;background:none;box-shadow:none;border-radius:0}
.tb-al-scale b{
  position:absolute;top:-4px;width:2px;height:13px;border-radius:0;
  background:var(--gold-bright);box-shadow:0 0 10px rgba(244,221,160,.9);
  transform:translateX(-50%);transition:left .8s var(--ease);
}

.tb-tools{
  flex:0 0 auto;display:flex;align-items:center;justify-content:flex-end;gap:2px;
  flex-wrap:nowrap;white-space:nowrap;
}
.tb-btn{
  padding:12px 13px;background:transparent;border:0;cursor:pointer;
  font-family:var(--font-tech);font-size:11px;letter-spacing:.22em;text-transform:uppercase;
  color:var(--parchment-mute);transition:color var(--t);
}
.tb-btn:hover{color:var(--gold-bright);background:transparent;border-color:transparent;transform:none}
.tb-btn-quit{margin-left:6px}
.tb-btn-quit:hover{color:#efb2a6}
.tb-btn kbd{
  font-family:var(--font-tech);font-size:9px;margin-left:6px;padding:1px 4px;
  border:1px solid rgba(230,200,119,.3);border-radius:0;
  color:rgba(230,200,119,.65);background:transparent;
}

/* ------------------------------------------------------------
   21.2 LA COLONNE PERSONNAGE
   ------------------------------------------------------------
   Trois zones. L’identité en haut et le bouton Fiche en bas ne
   bougent jamais. Entre les deux, l’état, les caractéristiques et
   les matières se partagent la hauteur restante : chaque ligne
   grandit ou se serre pour que la colonne tienne dans l’écran.
   ------------------------------------------------------------ */
#charbar{
  position:relative;z-index:20;flex:0 0 var(--charbar-w);
  display:flex;flex-direction:column;min-height:0;overflow:hidden;padding:0;
  border-right:1px solid rgba(140,128,220,.14);
  background:rgba(9,7,28,.72);
}
.cb-sep{display:none}

/* --- identité --- */
.cb-portrait{
  flex:none;display:block;width:100%;text-align:center;
  padding:clamp(10px,2vh,18px) 24px clamp(8px,1.6vh,14px);
  background:none;border:0;border-radius:0;cursor:pointer;color:inherit;font:inherit;
  transition:background var(--t);
}
.cb-portrait:hover{background:rgba(140,128,220,.05);border-color:transparent}
.cb-medaillon{
  display:inline-flex;align-items:center;justify-content:center;
  width:clamp(58px,7.4vh,74px);height:clamp(58px,7.4vh,74px);margin:0;padding:0;
  border-radius:50%;position:relative;
  border:1px solid rgba(230,200,119,.32);
  background:radial-gradient(circle at 50% 32%, rgba(54,46,116,.92), rgba(11,9,32,.96));
  box-shadow:0 10px 30px -14px rgba(0,0,0,.95), 0 0 34px -14px rgba(230,200,119,.5),
             inset 0 1px 0 rgba(255,255,255,.07);
}
.cb-medaillon::after{display:none}
.cb-portrait:hover .cb-medaillon{box-shadow:0 10px 30px -14px rgba(0,0,0,.95), 0 0 40px -10px rgba(230,200,119,.7), inset 0 1px 0 rgba(255,255,255,.07)}
.cb-crest{
  width:clamp(34px,4.4vh,44px);height:clamp(34px,4.4vh,44px);object-fit:contain;
  font-size:clamp(26px,3.4vh,34px);line-height:1;
  filter:drop-shadow(0 3px 8px rgba(0,0,0,.6));
}
/* Avant la Répartition, le médaillon porte un point d’interrogation :
   la maison n’existe pas encore, et l’interface le dit. */
.cb-crest-vide{
  display:flex;align-items:center;justify-content:center;
  font-family:var(--font-title);font-weight:400;
  color:rgba(200,190,230,.55);filter:none;
}
/* Au verdict, le blason ne se contente pas de remplacer le point
   d’interrogation : il se pose. C’est le seul endroit de l’écran qui
   change en même temps que la Répartition, il a le droit de se voir. */
.cb-crest.cb-scelle{animation:crestScelle .6s ease both}
@keyframes crestScelle{from{opacity:0;transform:scale(.86)}to{opacity:1;transform:scale(1)}}
.cb-nom{
  display:block;margin-top:12px;
  font-family:var(--font-title);font-weight:600;font-size:clamp(19px,2.5vh,24px);
  letter-spacing:.06em;color:var(--gold-warm);line-height:1.1;
  text-shadow:0 0 28px rgba(230,200,119,.3);
}
.cb-nom2{
  display:block;margin-top:1px;
  font-family:var(--font-title);font-weight:400;font-size:clamp(13px,1.7vh,16px);
  letter-spacing:.14em;color:rgba(232,226,248,.7);line-height:1.2;
}
.cb-maison{
  display:block;margin-top:8px;
  font-family:var(--font-tech);font-size:10px;letter-spacing:var(--track-wide);
  text-transform:uppercase;color:rgba(200,190,230,.42);
}

/* --- le corps de la colonne, qui se partage la hauteur ---
   Il ne défile jamais. Les quinze lignes qu’il contient se serrent
   jusqu’à tenir : chacune a une base de zéro et grandit dans ce qui
   reste, et les tailles de texte suivent la hauteur d’écran. Une
   barre de défilement dans cette colonne voudrait dire qu’on cache
   une matière, ce qui est exactement ce qu’on ne veut pas. */
.cb-corps{
  flex:1 1 auto;min-height:0;display:flex;flex-direction:column;
  padding:0 24px 8px;overflow:hidden;
}

/* --- état mental : une ligne cerclée de deux filets --- */
.cb-etats{flex:none;display:block}
.cb-etat{
  display:flex;align-items:center;gap:12px;cursor:default;
  padding:clamp(8px,1.7vh,16px) 0;margin:4px 0 2px;border:0;border-radius:0;
  border-top:1px solid rgba(140,128,220,.16);
  border-bottom:1px solid rgba(140,128,220,.16);
  background:none;
}
.cb-etat:hover{background:none;border-color:rgba(140,128,220,.16)}
.cb-etat>i{flex:none;width:16px;display:flex;justify-content:center;font-style:normal;font-size:15px}
.cb-etat>i svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round}
.cb-etat-jauge{
  flex:1 1 auto;height:6px;border-radius:0;overflow:hidden;
  background:rgba(140,128,220,.16);box-shadow:none;
}
.cb-etat-jauge b{display:block;height:100%;border-radius:0;transition:width .8s var(--ease),background .5s var(--ease)}
/* La jauge d’esprit part toujours du violet, à gauche, et arrive à la
   couleur de l’état, à droite. C’est ce dégradé qui la distingue de
   toutes les autres barres du jeu : le violet, c’est la magie de fond,
   la couleur d’arrivée, c’est comment tu vas. Trois paliers seulement,
   et ils sont les mêmes que dans la maquette.

     au-dessus de 60   vert     l’esprit tient
     de 31 à 60        or       il commence à fatiguer
     30 et en dessous  rouge    il lâche

   La lueur portée reprend la couleur d’arrivée : de loin, on voit le
   changement avant de lire le chiffre. */
.cb-j-mental{
  background:linear-gradient(90deg, rgba(150,130,235,.55), var(--esprit, #7cb377));
  box-shadow:0 0 12px -2px var(--esprit, #7cb377);
}
.cb-etat>em{
  font-style:normal;font-family:var(--font-title);font-size:15px;
  color:var(--esprit, #7cb377);flex:none;font-variant-numeric:tabular-nums;
}
.cb-etat>i{color:var(--esprit, #7cb377)}
.cb-etat[data-etat="bon"]{--esprit:#7cb377}
.cb-etat[data-etat="moyen"]{--esprit:#e0bd6d}
.cb-etat[data-etat="bas"]{--esprit:#d4657c}

/* --- caractéristiques : quatre lignes qui s’étirent ---
   Base zéro, croissance 1,7 : une caractéristique vaut un peu moins
   de deux matières en hauteur, quelle que soit la taille de l’écran. */
.cb-attrs{
  flex:1.7 1 0;min-height:0;display:flex;flex-direction:column;
  gap:0;padding:2px 0;
}
.cb-attr{
  position:relative;flex:1 1 0;min-height:0;
  display:flex;flex-direction:column;justify-content:center;gap:0;
  padding:clamp(3px,.55vh,7px) 8px;margin:0 -8px;border-radius:0;cursor:default;
  border-bottom:1px solid rgba(140,128,220,.12);
  transition:background var(--t);
}
.cb-attr:hover,.cb-attr:focus-visible{background:rgba(140,128,220,.08)}
.cb-a-tete{display:flex;align-items:center;justify-content:space-between;gap:12px}
.cb-a-gauche{display:flex;align-items:center;gap:11px;min-width:0}
.cb-a-nom{
  font-family:var(--font-body);font-size:clamp(17px,2.2vh,21px);
  color:rgba(226,220,245,.74);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.cb-a-val{
  font-family:var(--font-title);font-size:clamp(15px,1.9vh,18px);
  color:rgba(200,190,230,.6);font-variant-numeric:tabular-nums;
}
.cb-a-jauge{
  height:3px;margin-top:clamp(4px,.7vh,7px);border-radius:0;overflow:hidden;
  background:rgba(140,128,220,.13);box-shadow:none;
}
.cb-a-jauge i{display:block;height:100%;border-radius:0;background:var(--violet);transition:width .8s var(--ease)}
/* Au-delà de 80, la ligne passe à l’or : la maîtrise se voit sans chercher. */
.cb-attr.cb-haut .cb-a-nom{color:#f4ecd6}
.cb-attr.cb-haut .cb-a-val{color:var(--gold-warm);text-shadow:0 0 14px rgba(240,215,140,.7)}
.cb-attr.cb-haut .cb-a-jauge i{background:linear-gradient(90deg,#e0bd6d,#f7e6b4);box-shadow:0 0 10px rgba(230,200,119,.7)}

/* --- l’emblème d’une caractéristique ou d’une matière --- */
.cb-embleme{
  flex:none;width:18px;height:18px;display:flex;align-items:center;justify-content:center;
  border:1px solid;box-shadow:inset 0 1px 0 rgba(255,255,255,.06);
}
.cb-embleme svg{width:11px;height:11px;display:block;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
/* Dans la liste des matières, l’emblème suit la hauteur de sa rangée au
   lieu de l’imposer. C’était lui, et non le texte, qui réclamait un
   dix-huitième pixel quand treize matières se partagent la colonne en
   1366×768 : le carré tenait bon et les noms se faisaient rogner. */
.cb-mat .cb-embleme{width:clamp(15px,1.9vh,18px);height:clamp(15px,1.9vh,18px)}
.cb-mat .cb-embleme svg{width:clamp(9px,1.2vh,11px);height:clamp(9px,1.2vh,11px)}
/* Le jeton de Gallion : le même disque frappé qu’en haut de l’écran, à la
   taille d’un emblème. Il remplace le carré partout où une somme bouge. */
.cb-jeton{
  position:relative;flex:none;width:18px;height:18px;border-radius:50%;display:block;
  background:radial-gradient(circle at 34% 30%, #fff3c9 0%, #f0d78c 30%, #d3a63f 62%, #9c7223 100%);
  box-shadow:0 1px 4px rgba(0,0,0,.6), inset 0 -1px 3px rgba(120,84,16,.7),
    inset 0 1px 2px rgba(255,245,205,.75), 0 0 10px rgba(224,189,109,.32);
}
.cb-jeton i{position:absolute;inset:2px;border-radius:50%;border:1px solid rgba(120,84,16,.45)}
.cb-jeton b{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  font-family:var(--font-title);font-weight:700;font-size:9.5px;
  color:rgba(94,64,12,.85);text-shadow:0 1px 0 rgba(255,240,190,.6);
}
.cb-haut .cb-embleme{
  color:var(--or-encre);
  background:radial-gradient(circle at 34% 28%, #fff3c9 0%, #f0d78c 38%, #cfa64c 100%);
  border-color:rgba(240,215,140,.9);
  box-shadow:0 0 12px rgba(230,200,119,.55), inset 0 1px 0 rgba(255,255,255,.6);
}

/* --- matières (élève) ou relations (adulte) --- */
/* Le filet du haut marque la largeur de la colonne : il ne bouge pas.
   La coupe verticale, elle, est déléguée à `.cb-liste` juste en dessous,
   parce qu’une rangée de matière déborde de huit pixels de chaque côté
   et que couper ici lui mangeait son emblème. */
.cb-bloc{
  flex:2.9 1 0;min-height:0;display:flex;flex-direction:column;
  gap:0;padding:clamp(4px,.8vh,8px) 0 0;margin-top:4px;
  border-top:1px solid rgba(230,200,119,.16);
}
.cb-bloc-titre{
  flex:none;font-family:var(--font-tech);font-size:9px;letter-spacing:var(--track-cap);
  text-transform:uppercase;color:var(--parchment-mute);padding-bottom:5px;
}
/* C’est ici qu’on coupe, et la boîte se décale de huit pixels vers
   l’extérieur pour que la bande de survol d’une rangée, elle, ne soit
   pas coupée. Sans ce décalage, l’emblème de chaque matière perdait sa
   moitié gauche. */
.cb-liste{
  flex:1 1 0;display:flex;flex-direction:column;gap:0;min-height:0;
  padding:0 8px;margin:0 -8px;overflow:hidden;
}
.cb-vide{font-size:16px;color:var(--parchment-mute);font-style:italic;padding:6px 0}

/* Treize matières et non plus onze depuis que les runes et l’arithmancie
   existent dans l’état. En 1366×768 les deux lignes de plus dépassaient
   d’un pixel, et un pixel de trop est une matière rognée : la colonne ne
   défile jamais et ne cache rien. L’interligne et le plancher du corps de
   texte se resserrent juste assez pour que treize tiennent. */
.cb-mat{
  position:relative;flex:1 1 0;min-height:0;
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:0 8px;margin:0 -8px;border-radius:0;cursor:default;
  font-size:inherit;color:inherit;line-height:1.08;
  transition:background var(--t);
}
.cb-mat:hover{background:rgba(140,128,220,.08);color:inherit}
.cb-mat-gauche{display:flex;align-items:center;gap:11px;min-width:0}
/* L’interligne est posé ici, et pas hérité : le nom d’une matière tient
   sur une ligne, et sa boîte ne doit pas réclamer plus de hauteur que la
   rangée ne lui en donne. Sans ça, treize matières demandaient un pixel
   de plus chacune, et le bas de chaque nom se faisait rogner. */
.cb-mat-nom{
  flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  font-family:var(--font-body);font-size:clamp(15px,2vh,20px);line-height:1.02;
  color:rgba(226,220,245,.74);
}
.cb-mat-droite{display:flex;align-items:center;gap:10px;flex:none}
.cb-mat-jauge{width:34px;height:2px;background:rgba(140,128,220,.13);flex:none}
.cb-mat-jauge i{display:block;height:100%;background:var(--violet);transition:width .8s var(--ease)}
.cb-mat b{
  min-width:20px;text-align:right;
  font-family:var(--font-title);font-weight:400;font-size:clamp(14px,1.8vh,17px);line-height:1.02;
  color:rgba(200,190,230,.6);font-variant-numeric:tabular-nums;flex:none;
  transition:color var(--t),text-shadow var(--t);
}
.cb-mat.cb-haut .cb-mat-nom{color:#f4ecd6}
.cb-mat.cb-haut b,.cb-mat b.cb-fort{color:var(--gold-warm);text-shadow:0 0 14px rgba(240,215,140,.7)}
.cb-mat.cb-haut .cb-mat-jauge i{background:linear-gradient(90deg,#e0bd6d,#f7e6b4);box-shadow:0 0 10px rgba(230,200,119,.7)}

.cb-rel{
  flex:1 1 0;min-height:0;display:flex;align-items:center;gap:11px;
  padding:1px 8px;margin:0 -8px;border-radius:0;
  font-size:clamp(15px,1.9vh,19px);color:rgba(226,220,245,.74);transition:background var(--t);
}
.cb-rel:hover{background:rgba(140,128,220,.08)}
.cb-rel-ico{font-size:15px;flex:none;display:flex;align-items:center;justify-content:center}
.cb-rel-ico .portrait{width:22px;height:22px;vertical-align:middle;border-radius:50%}
/* L’écusson : un blason de maison, de famille, d’amour ou d’enseignement.
   Il n’est pas rond, c’est un blason : il garde ses pointes. */
.cb-ecu{width:24px;height:24px;flex:none;object-fit:contain;display:block;
  filter:drop-shadow(0 2px 5px rgba(0,0,0,.6))}
.cb-ecu-vide{width:24px;text-align:center;flex:none}
/* Un lien éteint : le blason perd sa couleur avec le nom. */
.cb-rel.cb-rel-eteint .cb-ecu{opacity:.38;filter:grayscale(1) brightness(.85)}

/* ------------------------------------------------------------
   L’écusson voyage. Il ne vit plus seulement dans la colonne de
   gauche : partout où le jeu nomme quelqu’un dans une scène, la même
   image se pose, et chaque endroit lui donne sa taille. Le carré vide
   garde le dessin de l’ancienne puce, pour que la ligne ne se creuse
   pas quand on ne sait vraiment pas de qui il s’agit.
   ------------------------------------------------------------ */
.gr-gens .cb-ecu{width:18px;height:18px}
.gr-gens .cb-ecu-vide{
  width:16px;height:16px;
  border:1px solid rgba(230,200,119,.4);background:rgba(230,200,119,.07);
}
/* Une figure barrée perd la couleur de son blason avec son nom. */
.gr-gens.mort .cb-ecu{opacity:.45;filter:grayscale(1) brightness(.9)}
.gr-gens.mort .cb-ecu-vide{border-color:rgba(180,172,205,.3);background:transparent}
.nc-badge .cb-ecu{width:17px;height:17px}
.hc-icon .cb-ecu{width:22px;height:22px}
#main-panel>.hub-grid .hc-icon .cb-ecu{width:34px;height:34px}
/* Dans une bande d’acquis, l’écusson est au fil du texte : il doit donc
   s’aligner sur la ligne de base, pas se poser en bloc. */
.fx2-nom .cb-ecu{display:inline-block;width:16px;height:16px;vertical-align:-3px}
.cb-rel-nom{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-family:var(--font-body)}
.cb-rel-note{flex:none}
.cb-rel-note .stars{font-size:10px;letter-spacing:1.5px;color:var(--gold-warm)}
/* Un lien éteint par la mort ou la rupture : le nom reste, barré. */
.cb-rel.cb-rel-eteint .cb-rel-nom{text-decoration:line-through;color:rgba(200,190,230,.4)}

/* --- bas de colonne : la Fiche, et rien d’autre --- */
.cb-bas{flex:none;margin-top:0;display:block;padding:0 20px}
/* width:100% est indispensable : un <button> ne s’étire pas tout seul dans
   un bloc, il se réduit à son contenu. */
.cb-fiche{
  display:flex;align-items:center;justify-content:center;gap:10px;width:100%;
  margin:clamp(6px,1.2vh,10px) 0 clamp(9px,1.6vh,14px);
  padding:clamp(8px,1.4vh,11px) 0;border-radius:0;cursor:pointer;
  border:1px solid rgba(230,200,119,.28);background:rgba(230,200,119,.07);
  font-family:var(--font-tech);font-size:11px;letter-spacing:.28em;text-transform:uppercase;
  color:rgba(240,224,170,.82);
  transition:background var(--t),color var(--t);
}
.cb-fiche:hover{background:rgba(230,200,119,.14);color:var(--gold-bright);border-color:rgba(230,200,119,.28)}
.cb-fiche kbd{
  font-family:var(--font-tech);font-size:9px;margin-left:0;padding:2px 5px;
  border:1px solid rgba(230,200,119,.3);border-radius:0;
  background:transparent;color:rgba(230,200,119,.65);letter-spacing:.06em;
}

/* ------------------------------------------------------------
   21.1b LE BANDEAU DU BAS : où l’on est, quand, et que c’est sauvé
   ------------------------------------------------------------ */
#gamebar{
  position:relative;z-index:30;flex:none;
  display:flex;align-items:center;justify-content:space-between;gap:24px;
  padding:0 clamp(16px,2.2vw,28px);height:var(--footbar-h);
  background:rgba(5,4,26,.86);backdrop-filter:blur(14px);
  border-top:1px solid rgba(140,128,220,.14);
}
.gb-situation{
  display:flex;align-items:center;gap:18px;min-width:0;
  font-family:var(--font-tech);font-size:10px;letter-spacing:.26em;text-transform:uppercase;
  color:var(--parchment-mute);
}
.gb-lieu{color:rgba(240,228,192,.75);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.gb-sep{width:1px;height:12px;background:rgba(140,128,220,.28);flex:none}
.gb-date{white-space:nowrap}
.gb-sauve{white-space:nowrap}

/* ------------------------------------------------------------
   21.2b L’INFOBULLE PARTAGÉE, une seule, dans <body>
   ------------------------------------------------------------ */
.cb-pop{
  position:fixed;z-index:200;width:290px;left:-9999px;top:0;
  display:flex;flex-direction:column;gap:0;
  padding:18px 20px;border-radius:0;
  background:rgba(9,7,28,.985);
  border:1px solid rgba(230,200,119,.4);
  box-shadow:0 30px 70px -24px rgba(0,0,0,1), inset 0 1px 0 rgba(255,255,255,.05);
  opacity:0;visibility:hidden;transform:translateX(-6px);
  /* La visibilité bascule tout de suite à l’apparition, et seulement à la
     fin du fondu à la disparition : mise en transition comme les autres
     propriétés, elle ferait attendre 240 ms avant d’afficher l’infobulle. */
  transition:opacity var(--t),transform var(--t) var(--ease),visibility 0s var(--t);
  pointer-events:none;
}
.cb-pop.on{
  opacity:1;visibility:visible;transform:none;
  transition:opacity var(--t),transform var(--t) var(--ease),visibility 0s;
}
.cb-pop b{
  font-family:var(--font-title);font-size:15px;color:var(--gold-warm);
  font-weight:600;letter-spacing:.06em;line-height:1.25;
}
.cb-pop span{
  font-family:var(--font-body);font-size:17px;line-height:1.5;
  color:rgba(226,220,245,.8);margin-top:12px;
}
/* L’intertitre « Derniers gains » : un filet, puis un libellé technique.
   C’est là qu’on lit d’où vient un chiffre, et ça ne se coupe jamais. */
.cb-pop u{
  text-decoration:none;font-family:var(--font-tech);font-size:9px;letter-spacing:.3em;
  text-transform:uppercase;color:rgba(230,200,119,.75);
  margin-top:14px;padding-top:12px;border-top:1px solid rgba(230,200,119,.18);
}
.cb-pop u + span{margin-top:7px}

/* ------------------------------------------------------------
   21.2c BLASONS & PORTRAITS
   ------------------------------------------------------------ */
.blason{
  width:100%;height:100%;object-fit:contain;display:block;
  filter:drop-shadow(0 3px 7px rgba(0,0,0,.55));user-select:none;
}
.portrait{
  width:22px;height:22px;object-fit:contain;display:inline-block;vertical-align:-5px;
  filter:drop-shadow(0 2px 4px rgba(0,0,0,.5));user-select:none;
}
.fr-ico .portrait{width:26px;height:26px;vertical-align:middle}
.fr-blason{width:24px;height:24px}
.hb-blason{
  width:1.1em;height:1.1em;display:inline-block;vertical-align:-.15em;margin-right:.15em;
}
/* Classements et paris : le vrai blason plutôt que l’emoji d’animal. */
.coupe-blason{width:clamp(20px,2.4vh,26px);height:clamp(20px,2.4vh,26px)}
.cg-blason{width:clamp(13px,1.5vh,16px);height:clamp(13px,1.5vh,16px);display:inline-block;vertical-align:-.2em}
.coupe-banner-blason{
  width:1em;height:1em;display:inline-block;vertical-align:-.12em;margin-right:.22em;
  filter:drop-shadow(0 2px 8px rgba(0,0,0,.65));
}
.hc-blason{width:70%;height:70%}

/* ------------------------------------------------------------
   21.2d LE VOLUME DE LA MUSIQUE
   ------------------------------------------------------------ */
/* La part parcourue est en or, le reste en violet éteint. Une barre
   entièrement dorée ne disait pas où l’on en était : on ne pouvait le
   déduire que de la position du curseur. */
/* Sur l’écran titre, il se fait tout petit sous le menu. */

/* ------------------------------------------------------------
   21.3 LA SCÈNE : la carte narrative prend toute la place
   ------------------------------------------------------------
   Un panneau unique, cerné d’un filet d’or et de quatre équerres,
   posé sur un fond dégradé du haut vers le bas. C’est une page,
   pas une boîte de dialogue.
   ------------------------------------------------------------ */
.event-card{
  position:relative;margin-bottom:0;padding:0;border-radius:0;
  border:1px solid rgba(230,200,119,.2);
  background:var(--carte-fond);
  box-shadow:0 50px 110px -60px rgba(0,0,0,1), inset 0 1px 0 rgba(255,255,255,.06);
  animation:rise .7s var(--ease-out) both;
}
.ev-corps{position:relative;z-index:1;padding:clamp(28px,5vh,64px) clamp(32px,5vw,88px)}

/* Sur la scène, la carte occupe la largeur utile et se centre en hauteur. */
#main-panel>.event-card,
#main-panel>.result-box.rb-solo{
  width:100%;max-width:min(var(--carte-w),100%);margin:0 auto;
  display:flex;flex-direction:column;justify-content:center;
}
#main-panel>.event-card>.ev-corps{width:100%}

/* Une seule colonne éditoriale : le sur-titre, le titre, le texte et les
   choix partagent exactement le même bord gauche. */
.ev-kicker,.ev-title{max-width:min(var(--lecture-w),100%);margin-left:0;margin-right:auto}
.ev-kicker{
  display:flex;align-items:center;gap:14px;margin-bottom:0;
  font-family:var(--font-tech);font-size:10px;font-weight:400;
  letter-spacing:.4em;text-transform:uppercase;color:rgba(230,200,119,.75);
}
.ev-kicker-filet{
  width:40px;height:1px;flex:none;
  background:linear-gradient(90deg, rgba(230,200,119,0), rgba(230,200,119,.7));
}
.ev-title{
  font-family:var(--font-title);font-weight:600;
  font-size:clamp(26px,3vw,40px);line-height:1.16;
  color:var(--gold-pale);text-shadow:0 0 48px rgba(230,200,119,.2);
  margin:22px 0 0;
}
/* Une scène centrée : le filet du sur-titre se dédouble de part et d’autre. */
.event-card.center .ev-kicker{justify-content:center}
.event-card.center .ev-kicker,.event-card.center .ev-title,
.event-card.center .ev-text{margin-left:auto;margin-right:auto;text-align:center}

.ev-text{
  font-size:clamp(18px,1.45vw,21px);
  line-height:1.7;
  max-width:min(var(--lecture-w),100%);
  margin:22px 0 0;
  color:rgba(226,220,245,.8);
  text-wrap:pretty;
}
.ev-quote,.ev-rappel,.ev-callout{max-width:min(var(--lecture-w),100%);margin-left:0;margin-right:auto}
.ev-rappel{
  margin-top:16px;padding-left:14px;border-left:1px solid rgba(185,163,238,.5);
  font-style:italic;font-size:17px;color:rgba(200,190,230,.62);
}
.ev-quote{
  margin-top:20px;padding-left:16px;border-left:1px solid rgba(230,200,119,.4);
  font-style:italic;font-size:19px;color:rgba(240,215,140,.8);
}
.result-box .rb-text{font-size:20px;line-height:1.65;max-width:min(var(--lecture-w),100%);margin:0}

/* Le bandeau « En jeu » ne s’affiche plus : il annonçait les relations
   qu’un choix pouvait changer avant qu’on ait lu les choix. Voir enJeu,
   dans hud.js. Le dessin part avec lui. */

/* Zone d’illustration : prévue, silencieuse tant qu’il n’y a rien dedans. */
.ev-art{
  margin:0 0 22px;max-width:min(var(--lecture-w),100%);
  border-radius:0;overflow:hidden;position:relative;
  border:1px solid var(--line);box-shadow:none;
  background:linear-gradient(160deg,rgba(40,34,80,.5),rgba(12,10,28,.7));
}
.ev-art img{display:block;width:100%;height:clamp(140px,22vh,240px);object-fit:cover;opacity:.94}
.ev-art::after{
  content:'';position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,transparent 45%,rgba(12,10,28,.85));
}
.ev-art-glyph{height:clamp(88px,13vh,130px);display:flex;align-items:center;justify-content:center}
.ev-art-glyph span{font-size:clamp(38px,5vh,58px);filter:drop-shadow(0 6px 18px rgba(0,0,0,.6));opacity:.9}

/* ------------------------------------------------------------
   21.4 LES CHOIX
   ------------------------------------------------------------
   Un rang de boutons plats, numérotés dans un carré d’or. Au survol,
   le filet passe à l’or et la ligne avance de quatre pixels : le
   choix vient vers toi.
   ------------------------------------------------------------ */
.choices{
  display:flex;flex-direction:column;gap:12px;
  margin:36px 0 0;max-width:min(900px,100%);
}
.choice-btn{
  position:relative;display:flex;align-items:center;gap:18px;width:100%;
  text-align:left;cursor:pointer;
  padding:18px 22px;border-radius:0;
  color:rgba(232,227,245,.88);
  border:1px solid rgba(140,128,220,.24);
  background:linear-gradient(180deg, rgba(34,28,80,.5), rgba(14,11,38,.6));
  box-shadow:none;
  transition:color .25s,border-color .25s,background .3s,transform .25s;
}
.choice-btn .ch-num{
  flex:none;width:26px;height:26px;min-width:26px;
  display:flex;align-items:center;justify-content:center;
  border:1px solid rgba(230,200,119,.4);border-radius:0;background:none;box-shadow:none;
  font-family:var(--font-tech);font-size:11px;letter-spacing:.04em;color:var(--gold);
  transition:color var(--t),border-color var(--t),background var(--t);
}
.choice-btn .ch-body{flex:1;min-width:0;display:flex;flex-direction:column;gap:8px}
.choice-btn .ch-txt{font-family:var(--font-body);font-size:19px;line-height:1.4}
.choice-btn .ch-meta{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px}
.choice-btn:hover{
  color:var(--gold-pale);border-color:rgba(230,200,119,.6);
  background:linear-gradient(180deg, rgba(58,47,120,.55), rgba(20,16,52,.7));
  transform:translateX(4px);
}
.choice-btn:hover .ch-num{
  background:rgba(230,200,119,.12);color:var(--gold-bright);border-color:rgba(230,200,119,.7);
  transform:none;text-shadow:none;
}
.choice-btn.ch-locked{opacity:.42;cursor:not-allowed}
.choice-btn.ch-locked:hover{transform:none;border-color:rgba(140,128,220,.24)}
/* La seconde ligne d’un menu de vie : elle DÉCRIT l’option ou en donne le
   prix, jamais ce qu’elle rapporte. Voir renderEvent, dans ui.js. */
.ch-sous{font-style:italic;font-size:16px;color:rgba(200,190,230,.55)}

/* Le jeton d’un choix. Il ne reste que deux emplois, et aucun ne parle
   de gain : le motif d’un bouton éteint, et le fait qu’un choix est
   risqué, sans dire combien. Le jet de caractéristique, qui affichait
   « Test de Sortilèges · 45 requis · Toi : 52 · Réussite » en vert, ne
   s’affiche plus : c’était la bonne réponse écrite sous le bouton. */
.ch-test{
  display:inline-flex;flex-wrap:wrap;align-items:center;gap:4px 12px;
  margin-top:0;padding:5px 11px;border-radius:0;
  font-family:var(--font-tech);font-size:10px;letter-spacing:.18em;text-transform:uppercase;
  line-height:1.5;
  border:1px solid var(--line-2);background:rgba(0,0,0,.24);
}
.ch-test b{font-weight:400;letter-spacing:.2em;text-transform:uppercase;font-size:10px}
.ch-test i{font-style:normal;color:var(--parchment-mute)}
.ch-test em{font-style:normal;margin-left:8px;font-weight:400;letter-spacing:.2em}
/* Le jeton vert de reussite n’existe plus : voir testChip, hud.js. */
.ch-test-ko{border-color:rgba(194,84,95,.4);background:rgba(194,84,95,.08)}
.ch-test-ko b,.ch-test-ko em{color:var(--down)}

/* ------------------------------------------------------------
   21.4b CE QUE ÇA CHANGE : les trois poids de conséquence
   ------------------------------------------------------------
   Poids 1, la variation : une ligne fine, sans cadre, qui peut tomber
   à huit dans la même rangée sans écraser la page.
   Poids 2, l’acquis : une bande pleine largeur, scellée.
   Poids 3, la marque : un filet vertical et une phrase, sans chiffre.

   Les six classes de couleur ne changent pas de sens : fx-up gain,
   fx-down perte, fx-info fait nouveau, fx-gold argent et compétences,
   fx-graine antécédent, fx-plafond mention interne.
   ------------------------------------------------------------ */
.fx-bloc{margin-top:26px;padding-top:18px;border-top:1px solid rgba(230,200,119,.2)}
.fx-entete{display:flex;align-items:center;gap:12px;margin-bottom:16px}

/* --- poids 1 : la rangée des variations --- */
.fx-rangee{
  display:grid;grid-template-columns:repeat(auto-fit, minmax(min(100%,250px), 1fr));
  gap:14px 32px;
}
.fx1{display:flex;align-items:flex-start;gap:12px;animation:rise .5s var(--ease-out) both}
.fx1 .cb-embleme{margin-top:3px}
.fx1-corps{flex:1;min-width:0}
.fx1-tete{display:flex;align-items:baseline;justify-content:space-between;gap:12px}
.fx1-nom{
  font-family:var(--font-body);font-size:18px;color:rgba(240,236,250,.9);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.fx1-chiffres{display:flex;align-items:baseline;gap:9px;white-space:nowrap;flex:none}
.fx1-lecture{
  font-family:var(--font-tech);font-size:11px;letter-spacing:.14em;
  color:var(--parchment-mute);font-variant-numeric:tabular-nums;
}
.fx1-delta{
  font-family:var(--font-title);font-weight:600;font-size:17px;line-height:1;
  font-variant-numeric:tabular-nums;
}
.fx1-jauge{position:relative;height:3px;margin-top:7px;background:rgba(140,128,220,.16)}
.fx1-base{position:absolute;left:0;top:0;bottom:0;background:rgba(140,128,220,.55)}
/* Le segment gagné, ou perdu, s’allume à la couleur de la classe. */
.fx1-seg{position:absolute;top:0;bottom:0;animation:segIn .6s var(--ease-out) both}
.fx-plafond{
  display:block;margin-top:5px;font-style:italic;opacity:.5;
  font-family:var(--font-body);font-size:15px;
}

/* Les six classes, appliquées au delta et au segment. */
.fx1.fx-up .fx1-delta{color:#5fbf8b;text-shadow:0 0 14px rgba(95,191,139,.5)}
.fx1.fx-up .fx1-seg{background:#5fbf8b;box-shadow:0 0 10px rgba(95,191,139,.7)}
.fx1.fx-down .fx1-delta{color:#d4657c;text-shadow:0 0 14px rgba(212,101,124,.5)}
.fx1.fx-down .fx1-seg{background:#d4657c;box-shadow:0 0 10px rgba(212,101,124,.7)}
.fx1.fx-info .fx1-delta{color:var(--reliques);text-shadow:0 0 14px rgba(143,208,240,.5)}
.fx1.fx-info .fx1-seg{background:var(--reliques);box-shadow:0 0 10px rgba(143,208,240,.7)}
.fx1.fx-gold .fx1-delta{color:#e0bd6d;text-shadow:0 0 14px rgba(224,189,109,.5)}
.fx1.fx-gold .fx1-seg{background:#e0bd6d;box-shadow:0 0 10px rgba(224,189,109,.7)}
.fx1.fx-graine .fx1-delta{color:#b9a3ee}
.fx1.fx-graine .fx1-seg{background:#b9a3ee}
/* Une variation sans emblème connu : un simple carré de la couleur. */
.fx-pastille{border-color:rgba(140,128,220,.4);background:rgba(140,128,220,.14)}

/* --- poids 2 : l’acquis, une bande scellée --- */
.fx-acquis{display:flex;flex-direction:column;gap:10px;margin-top:18px}
.fx2{
  display:flex;align-items:center;gap:16px;width:100%;
  padding:14px 18px;border:1px solid rgba(230,200,119,.28);
  background:rgba(230,200,119,.05);
  animation:rise .5s var(--ease-out) both;
}
.fx2-cachet{
  flex:none;width:26px;height:26px;position:relative;
  border:1px solid rgba(230,200,119,.55);
  background:radial-gradient(circle at 34% 28%, rgba(247,230,180,.35), rgba(200,160,70,.14));
}
.fx2-cachet::after{
  content:'';position:absolute;inset:5px;border:1px solid rgba(230,200,119,.45);
}
.fx2-corps{display:flex;flex-direction:column;gap:3px;min-width:0}
.fx2-famille{
  font-family:var(--font-tech);font-size:9px;letter-spacing:.3em;text-transform:uppercase;
  color:rgba(230,200,119,.7);
}
.fx2-nom{font-family:var(--font-title);font-weight:600;font-size:19px;color:var(--gold-pale)}
.fx2.fx-info{border-color:rgba(143,208,240,.3);background:rgba(143,208,240,.05)}
.fx2.fx-info .fx2-cachet{border-color:rgba(143,208,240,.55);background:radial-gradient(circle at 34% 28%, rgba(207,234,255,.3), rgba(70,130,180,.14))}
.fx2.fx-info .fx2-cachet::after{border-color:rgba(143,208,240,.45)}
.fx2.fx-info .fx2-famille{color:rgba(143,208,240,.75)}
.fx2.fx-info .fx2-nom{color:var(--reliques-pale)}

/* --- poids 3 : la marque, sans chiffre et sans cadre --- */
.fx-marques{
  display:flex;flex-direction:column;gap:14px;
  margin-top:20px;padding-top:16px;border-top:1px solid rgba(140,128,220,.2);
}
.fx3{
  display:flex;flex-direction:column;gap:4px;
  padding-left:16px;border-left:1px solid #d4657c;
  animation:rise .5s var(--ease-out) both;
}
.fx3.fx-graine{border-left-color:#b9a3ee}
.fx3.fx-info{border-left-color:var(--reliques)}
.fx3-famille{
  font-family:var(--font-tech);font-size:9px;letter-spacing:.3em;text-transform:uppercase;
  color:rgba(212,101,124,.85);
}
.fx3.fx-graine .fx3-famille{color:rgba(185,163,238,.85)}
.fx3.fx-info .fx3-famille{color:rgba(143,208,240,.85)}
.fx3-txt{
  font-family:var(--font-body);font-style:italic;font-size:19px;line-height:1.5;
  color:rgba(232,227,245,.85);max-width:62ch;text-wrap:pretty;
}

/* ------------------------------------------------------------
   21.5 LE HUB : des cartes qu’on a envie de cliquer
   Sur un grand écran, des vignettes de 220 px ont l’air perdues.
   ------------------------------------------------------------ */
.ap-banner{padding:15px 24px;margin-bottom:0}
.ap-banner .ap-count{min-width:46px;height:46px;font-size:26px}
/* Le nombre d’activités varie beaucoup (clubs, Quidditch, recherches…) :
   jusqu’à quinze cartes. On préfère une colonne de plus à des cartes
   rétrécies, elles restent grandes, et la grille tient à l’écran. */
#main-panel>.hub-grid{
  grid-template-columns:repeat(auto-fill,minmax(276px,1fr));
  gap:clamp(14px,1.6vw,20px);margin-top:clamp(14px,2vh,24px);
}
#main-panel>.hub-grid .hub-card{
  min-height:clamp(180px,22vh,214px);
  display:flex;flex-direction:column;
  padding:clamp(18px,2.2vh,24px) clamp(20px,1.6vw,26px);
}
#main-panel>.hub-grid .hc-icon{
  width:54px;height:54px;font-size:29px;margin-bottom:14px;border-radius:var(--r-md);
}
#main-panel>.hub-grid .hc-title{font-size:19px;margin-bottom:7px;line-height:1.2}
#main-panel>.hub-grid .hc-sub{font-size:15.5px;line-height:1.45}
#main-panel>.hub-grid .hc-badge{margin-top:auto;align-self:flex-start;font-size:12px}
#main-panel>.hub-grid .hub-card:hover{transform:translateY(-6px)}

/* ------------------------------------------------------------
   21.6 LA FICHE : une vraie fenêtre, comme dans un CRPG
   ------------------------------------------------------------ */
#sheet-zone{
  position:fixed;inset:0;z-index:320;display:none;
  align-items:center;justify-content:center;padding:clamp(16px,3vh,42px) clamp(16px,3vw,48px);
  background:rgba(3,2,8,.86);backdrop-filter:blur(8px);
}
#sheet-zone.open{display:flex;animation:fadeIn .2s ease}
/* La Fiche se pose sur la scène, elle ne la remplace pas.

   Elle occupait tout l’écran : 1600 de large pour une liste de onze
   entrées et un panneau de lecture, le reste étant du vide meublé. Elle
   tient maintenant dans une carte, la même que celle du combat, bordée
   d’un filet or et de ses quatre équerres. On voit le jeu autour, on sait
   qu’on est dans une parenthèse, et on sait comment en sortir. */
.sheet{
  position:relative;display:flex;flex-direction:column;
  width:100%;max-width:1180px;height:100%;max-height:820px;
  background:linear-gradient(180deg, rgba(16,12,44,.98), rgba(9,7,28,.98));
  border:1px solid rgba(230,200,119,.24);border-radius:0;
  box-shadow:0 50px 120px -40px rgba(0,0,0,.95);
  overflow:hidden;animation:rise .35s var(--ease-out) both;
}
.sheet > .grain{
  background-image:repeating-linear-gradient(0deg, rgba(255,255,255,.013) 0 1px, rgba(0,0,0,0) 1px 3px);
}

/* --- le bandeau : nom, sous-titre, quatre constantes vitales --- */
.sh-head{
  position:relative;flex:none;display:flex;align-items:center;
  gap:clamp(16px,2vw,28px);padding:0 clamp(18px,2vw,30px);height:84px;
  border-bottom:1px solid rgba(230,200,119,.2);
  background:linear-gradient(180deg, rgba(24,18,52,.7), rgba(8,6,26,.6));
}
.sh-head::after{display:none}
.sh-head > .grain{
  background-image:repeating-linear-gradient(115deg, rgba(255,255,255,.02) 0 1px, transparent 1px 5px);
}
.sh-crest{
  position:relative;flex:none;width:44px;height:44px;border-radius:0;
  display:flex;align-items:center;justify-content:center;
  border:0;background:none;box-shadow:none;
}
.sh-crest img{width:100%;height:100%;object-fit:contain}
.sh-crest-vide{
  width:36px;height:36px;display:flex;align-items:center;justify-content:center;
  border:1px solid var(--line-2);font-family:var(--font-title);font-size:18px;color:var(--parchment-mute);
}
.sh-crest-mini{width:100%;height:100%;object-fit:contain}
/* Le nom passe avant les quatre chiffres : c’est la fiche de quelqu’un.
   Il cédait la place en premier, et « Gordon Galloway » se lisait
   « Gordon Gall… » pendant que les vitales gardaient leurs 650 px. */
.sh-id{position:relative;flex:1 1 auto;min-width:min(268px,42%);display:flex;flex-direction:column;gap:6px}
.sh-id b{
  font-family:var(--font-title);font-weight:600;font-size:clamp(20px,1.8vw,26px);
  letter-spacing:.02em;line-height:1.05;color:var(--gold-pale);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.sh-meta{
  font-family:var(--font-tech);font-size:9px;letter-spacing:.28em;text-transform:uppercase;
  color:var(--parchment-mute);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
/* Le bouton de sortie. Il portait « Quitter » sans cadre, au bout du
   bandeau, et un second « Retour au jeu » vivait en bas du rail : deux
   sorties pour une porte. Il n’en reste qu’une, encadrée, avec sa touche
   affichée, au coin où l’on cherche toujours à fermer. */
.sh-x{
  position:relative;flex:none;margin-left:clamp(10px,1.4vw,18px);width:auto;height:auto;
  display:flex;align-items:center;gap:9px;
  padding:9px 14px;border-radius:0;cursor:pointer;
  background:rgba(230,200,119,.06);border:1px solid rgba(230,200,119,.28);
  font-family:var(--font-tech);font-size:11px;letter-spacing:.26em;text-transform:uppercase;
  color:rgba(240,224,170,.82);transition:background .2s, color .2s, border-color .2s;
}
.sh-x:hover{
  color:var(--gold-bright);background:rgba(230,200,119,.14);
  border-color:rgba(230,200,119,.5);transform:none;
}
.sh-x kbd{
  padding:2px 5px;border:1px solid rgba(230,200,119,.3);
  font-family:var(--font-tech);font-size:9px;letter-spacing:.06em;color:rgba(230,200,119,.65);
}

/* Les quatre constantes vitales : libellé, valeur, palier, dix crans. */
.fi-vitales{position:relative;flex:0 1 auto;min-width:0;display:flex;align-items:stretch;overflow:hidden}
.fi-vital{
  flex:0 1 auto;min-width:0;max-width:clamp(132px,13vw,178px);
  display:flex;flex-direction:column;gap:6px;
  padding:0 clamp(10px,1.1vw,16px);border-left:1px solid rgba(140,128,220,.18);
}
.fv-lab{
  max-width:100%;font-family:var(--font-tech);font-size:8px;letter-spacing:.26em;
  text-transform:uppercase;color:rgba(200,190,230,.42);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.fv-ligne{display:flex;align-items:baseline;gap:8px;max-width:100%;overflow:hidden}
.fv-ligne b{flex:none;font-family:var(--font-title);font-weight:600;font-size:21px;line-height:1}
.fv-ligne i{
  min-width:0;font-family:var(--font-body);font-size:15px;font-style:italic;
  color:rgba(200,188,235,.46);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.fv-jeton{
  flex:none;width:16px;height:16px;border-radius:50%;align-self:center;
  display:flex;align-items:center;justify-content:center;
  font-family:var(--font-title);font-weight:700;font-size:9px;color:rgba(94,64,12,.85);
  background:radial-gradient(circle at 34% 30%, #fff3c9 0%, #f0d78c 30%, #d3a63f 62%, #9c7223 100%);
}
.fv-crans{display:flex;gap:2px}
.fv-crans span{width:7px;height:3px;display:block}

/* --- les trois colonnes --- */
/* --- les sept onglets, en rang --- */
/* Ils etaient dans un rail vertical de 246 px, avec un titre au-dessus et
   un bouton de retour en dessous : une colonne entiere pour sept mots. En
   rang sous le bandeau, ils prennent 46 px de haut, se lisent comme des
   onglets, et rendent la largeur a ce qu’on est venu lire. */
.sh-onglets{
  position:relative;flex:none;display:flex;align-items:stretch;
  padding:0 clamp(14px,1.6vw,22px);
  border-bottom:1px solid rgba(140,128,220,.2);
  background:rgba(7,5,24,.42);
}
.sh-tab{
  position:relative;flex:1 1 0;min-width:0;
  display:flex;align-items:center;justify-content:center;gap:9px;
  padding:12px 8px 11px;
  background:transparent;border:0;border-bottom:2px solid transparent;
  cursor:pointer;text-align:center;transition:background .18s, border-color .18s;
}
.sh-tab:hover{background:rgba(230,200,119,.06);color:inherit}
.sh-tab.on{background:rgba(230,200,119,.07);border-bottom-color:var(--gold)}
.sh-tab-g{
  flex:none;width:22px;height:22px;display:flex;align-items:center;justify-content:center;
  color:rgba(200,190,230,.45);border:0;background:none;filter:none;font-size:inherit;
  transition:color .18s;
}
.sh-tab-g svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.sh-tab.on .sh-tab-g{color:var(--gold-warm)}
.sh-tab-n{
  flex:none;min-width:0;font-family:var(--font-title);font-size:15px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  color:rgba(226,220,245,.66);letter-spacing:.02em;text-transform:none;
  transition:color .18s;
}
.sh-tab.on .sh-tab-n{color:var(--gold-pale)}
.sh-tab-c{
  flex:none;font-family:var(--font-tech);font-size:9px;letter-spacing:.14em;
  color:rgba(200,190,230,.3);
}
.sh-tab.on .sh-tab-c{color:rgba(230,200,119,.72)}

/* --- le corps : on choisit a gauche, on lit a droite --- */
.sh-corps{
  position:relative;flex:1;min-height:0;display:grid;
  grid-template-columns:clamp(268px,26%,330px) minmax(0,1fr);
}

/* --- la liste des entrees --- */
.sh-liste{
  min-height:0;overflow-y:auto;padding:8px 0 14px;
  border-right:1px solid rgba(140,128,220,.18);
  background:rgba(7,5,24,.34);
}
/* Quand la liste déborde, elle le dit par un dégradé au bord, jamais par
   une barre : c’est la règle de toutes les zones qui débordent ici. */
.sh-liste.deborde{
  -webkit-mask-image:linear-gradient(180deg,#000 calc(100% - 34px),transparent);
  mask-image:linear-gradient(180deg,#000 calc(100% - 34px),transparent);
}
/* L’intitule d’un groupe. Il ne se clique pas, et il ne doit donc
   ressembler a rien de cliquable : pas de cadre, pas de fond. */
.sh-groupe{
  padding:16px clamp(14px,1.4vw,20px) 7px;
  font-family:var(--font-tech);font-size:9px;letter-spacing:.3em;text-transform:uppercase;
  color:rgba(230,200,119,.55);
}
.sh-groupe:first-child{padding-top:10px}
.sh-item{
  position:relative;width:100%;display:flex;align-items:center;gap:11px;
  padding:8px clamp(14px,1.4vw,20px);
  background:transparent;border:0;border-left:2px solid transparent;
  cursor:pointer;text-align:left;transition:background .16s, border-color .16s;
}
.sh-item:hover{background:rgba(230,200,119,.06);color:inherit}
.sh-item.on{background:rgba(230,200,119,.1);border-left-color:var(--gold)}
.sh-item-g{
  flex:none;width:20px;height:20px;display:flex;align-items:center;justify-content:center;
  opacity:.75;transition:opacity .16s;
}
.sh-item-g svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.sh-item.on .sh-item-g{opacity:1}
/* La barre d’alignement reprise du bandeau de jeu. Elle garde son
   dégradé et son curseur ; seule sa largeur s’adapte à l’endroit où on
   la pose : pleine largeur dans le panneau, à la taille d’une jauge de
   proche dans une ligne de parent. */
.sh-morale{max-width:none;margin:0}
.sh-kin .sh-morale{flex:1;min-width:0;max-width:none;align-self:center}

/* Le jeton de Gallion garde son disque, sans le cadre carré des autres
   emblèmes : c’est l’une des deux exceptions à l’angle vif du jeu. */
.sh-item-jeton{opacity:1}
.sh-item-jeton .cb-jeton{width:20px;height:20px}
.sh-item-jeton .cb-jeton b{font-size:10.5px}
.sh-det-jeton{flex:none;display:flex;align-items:center;justify-content:center}
.sh-det-jeton .cb-jeton{width:34px;height:34px}
.sh-det-jeton .cb-jeton i{inset:3px}
.sh-det-jeton .cb-jeton b{font-size:17px}
.sh-item-crest{flex:none;width:20px;height:20px;display:block;opacity:.85}
.sh-item-crest img{width:100%;height:100%;object-fit:contain}
.sh-item-txt{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}
.sh-item-txt b{
  font-family:var(--font-body);font-weight:400;font-size:19px;line-height:1.15;
  color:rgba(226,220,245,.8);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.sh-item.on .sh-item-txt b{color:var(--gold-pale)}
.sh-item-txt i{
  font-family:var(--font-tech);font-style:normal;font-size:9px;letter-spacing:.14em;text-transform:uppercase;
  color:rgba(200,190,230,.36);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.sh-item.mort .sh-item-txt b{color:rgba(200,190,230,.45);text-decoration:line-through;text-decoration-color:rgba(200,190,230,.3)}
.sh-item-croix{color:rgba(200,190,230,.5)}
/* La piste ne fait que trois pixels : c’est un reperage, pas une jauge.
   Le chiffre a droite reste la valeur. */
.sh-item-piste{flex:none;width:44px;height:3px;background:rgba(140,128,220,.18)}
.sh-item-piste i{display:block;height:100%}
.sh-item-val{
  flex:none;min-width:26px;text-align:right;
  font-family:var(--font-title);font-weight:600;font-size:16px;line-height:1;
  font-variant-numeric:tabular-nums;
}
/* Une note se lit en neutre et passe à l’or au-delà de 80, exactement
   comme dans la colonne de gauche du jeu. Une matière doit se lire pareil
   des deux côtés, sinon on doute d’en lire la même. */
.sh-item.neutre .sh-item-piste i{background:var(--violet)}
.sh-item.neutre .sh-item-val{color:rgba(200,190,230,.6);font-weight:400}
.sh-item.haut .sh-item-txt b{color:#f4ecd6}
.sh-item.haut .sh-item-val{color:var(--gold-warm);text-shadow:0 0 14px rgba(240,215,140,.7)}
.sh-item.haut .sh-item-piste i{
  background:linear-gradient(90deg,#e0bd6d,#f7e6b4);box-shadow:0 0 10px rgba(230,200,119,.7);
}
/* Le chevron des entrees sans chiffre : il dit que la ligne mene
   quelque part, et c’est tout ce qu’il a a dire. */
.sh-item-fleche{
  flex:none;min-width:26px;text-align:right;font-size:15px;line-height:1;
  color:rgba(200,190,230,.22);transition:color .16s;
}
.sh-item:hover .sh-item-fleche,.sh-item.on .sh-item-fleche{color:rgba(230,200,119,.6)}

.sh-pied{
  position:relative;flex:none;display:flex;align-items:center;gap:12px;
  padding:0 clamp(16px,1.8vw,26px);height:36px;
  border-top:1px solid rgba(140,128,220,.18);background:rgba(7,5,24,.4);
  font-family:var(--font-tech);font-size:9px;letter-spacing:.24em;text-transform:uppercase;
  color:rgba(200,190,230,.4);
}
.sh-pos{color:rgba(230,200,119,.7);white-space:nowrap}
.sh-pied-filet{flex:1;height:1px;background:rgba(140,128,220,.2)}


/* --- le panneau de détail --- */
.sh-detail{
  min-height:0;overflow-y:auto;
  background:linear-gradient(180deg, rgba(18,13,48,.62), rgba(7,5,24,.78));
}
/* Le panneau a gagné toute la largeur que la grille de tuiles prenait.
   Une ligne de prose de neuf cents pixels ne se lit pas : le contenu est
   donc borné, et ce sont les listes qui profitent de la place en passant
   sur deux colonnes. */
.sh-det{
  position:relative;max-width:760px;
  padding:clamp(18px,2.4vh,26px) clamp(20px,2.2vw,34px) 40px;
  animation:rise .35s var(--ease-out) both;
}
.sh-det-vide{display:flex;align-items:center;min-height:100%}
.sh-det > .grain{
  background-image:repeating-linear-gradient(0deg, rgba(255,255,255,.013) 0 1px, rgba(0,0,0,0) 1px 3px);
}
.sh-det > *{position:relative}
.sh-det-eyebrow{display:flex;align-items:center;gap:14px}
.sh-det-eyebrow > span:first-child{
  flex:none;font-family:var(--font-tech);font-size:9px;letter-spacing:.3em;text-transform:uppercase;
}
.sh-det-titre{display:flex;align-items:flex-start;gap:16px;margin:15px 0 0}
.sh-det-g{
  flex:none;width:44px;height:44px;display:flex;align-items:center;justify-content:center;
  border:1px solid;
}
.sh-det-g svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.sh-det-titre h2{
  flex:1;min-width:0;margin:0;
  font-family:var(--font-title);font-weight:600;font-size:clamp(22px,2vw,30px);line-height:1.08;
  color:var(--gold-pale);text-wrap:balance;overflow-wrap:break-word;
}
.sh-det-big{display:flex;align-items:baseline;gap:14px;margin-top:18px}
.sh-det-big > span{
  font-family:var(--font-title);font-weight:600;font-size:clamp(38px,3.6vw,54px);line-height:.9;
  text-shadow:0 0 40px rgba(230,200,119,.2);
}
.sh-det-big em{
  font-style:normal;font-family:var(--font-tech);font-size:10px;letter-spacing:.24em;
  text-transform:uppercase;color:rgba(200,190,230,.5);text-wrap:pretty;
}
.sh-det-bar{margin-top:16px}
.sh-det-piste{position:relative;height:4px;background:rgba(140,128,220,.16)}
.sh-det-piste i{
  position:absolute;top:0;bottom:0;left:0;display:block;
  transform-origin:left;animation:segIn .7s var(--ease-out) both;
}
.sh-det-tick{position:absolute;top:-4px;bottom:-4px;left:50%;width:1px;background:rgba(230,200,119,.4)}
.sh-det-bornes{
  display:flex;justify-content:space-between;margin-top:8px;
  font-family:var(--font-tech);font-size:9px;letter-spacing:.2em;text-transform:uppercase;
  color:rgba(200,190,230,.36);
}
.sh-det-prose{
  margin:22px 0 0;max-width:62ch;
  font-family:var(--font-body);font-size:20px;font-style:italic;line-height:1.55;
  color:rgba(214,204,246,.78);text-wrap:pretty;
}
.sh-det-faits{margin-top:22px;border-top:1px solid rgba(230,200,119,.2)}
.sh-fait{
  display:flex;align-items:flex-start;gap:16px;padding:12px 0;
  border-bottom:1px solid rgba(140,128,220,.12);
}
.sh-fait-lab{
  flex:none;width:96px;font-family:var(--font-tech);font-size:9px;letter-spacing:.22em;
  text-transform:uppercase;color:rgba(230,200,119,.55);line-height:1.7;
}
.sh-fait-val{flex:1;min-width:0;font-family:var(--font-body);font-size:18px;line-height:1.45;color:rgba(232,227,245,.85)}
.sh-det-kin{display:flex;flex-direction:column;margin-top:22px;border-top:1px solid rgba(230,200,119,.2)}
.sh-kin{display:flex;align-items:center;gap:16px;padding:12px 0;border-bottom:1px solid rgba(140,128,220,.12)}
.sh-kin-role{
  flex:none;width:88px;font-family:var(--font-tech);font-size:9px;letter-spacing:.22em;
  text-transform:uppercase;color:rgba(230,200,119,.55);
}
.sh-kin-corps{flex:1;min-width:0}
.sh-kin-nom{display:block;font-family:var(--font-title);font-size:15px;color:rgba(247,236,202,.9)}
.sh-kin-bar{display:block;position:relative;height:3px;margin-top:8px;background:rgba(140,128,220,.16)}
.sh-kin-bar i{position:absolute;left:0;top:0;bottom:0;display:block}
.sh-kin-tick{position:absolute;left:50%;top:-3px;bottom:-3px;width:1px;background:rgba(230,200,119,.4)}
.sh-kin-note{display:block;margin-top:6px;font-family:var(--font-body);font-size:16px;font-style:italic;color:rgba(200,190,230,.55)}
.sh-kin-val{flex:none;font-family:var(--font-title);font-weight:600;font-size:19px}
.sh-det-tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:22px}
.sh-det-lignes{margin-top:22px;border-top:1px solid rgba(230,200,119,.2)}
.sh-ligne{
  display:flex;align-items:baseline;gap:12px;padding:10px 0;
  border-bottom:1px solid rgba(140,128,220,.12);
}
.sh-ligne-nom{flex:1;min-width:0;font-family:var(--font-body);font-size:18px;color:rgba(232,227,245,.85)}
.sh-ligne-sub{
  flex:none;font-family:var(--font-tech);font-size:9px;letter-spacing:.2em;text-transform:uppercase;
  color:rgba(200,190,230,.4);
}
.sh-ligne-val{flex:none;font-family:var(--font-title);font-weight:600;font-size:17px}
.sh-ligne.mort .sh-ligne-nom{text-decoration:line-through;color:rgba(200,190,230,.45)}

/* --- la carte du Ministère --- */
.sh-pp{
  position:relative;margin:0 0 26px;padding:3px;
  border:1px solid rgba(230,200,119,.34);
  background:linear-gradient(158deg, rgba(58,44,92,.72) 0%, rgba(16,11,40,.94) 68%);
}
.sh-pp-in{border:1px solid rgba(230,200,119,.16);padding:15px 17px 13px}
.sh-pp-tete{display:flex;align-items:center;gap:11px;padding-bottom:12px;border-bottom:1px solid rgba(230,200,119,.2)}
.sh-pp-sceau{
  flex:none;width:30px;height:30px;display:flex;align-items:center;justify-content:center;
  font-family:var(--font-title);font-weight:700;font-size:17px;color:rgba(244,221,160,.9);
  border:1px solid rgba(230,200,119,.4);
}
.sh-pp-qui{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.sh-pp-qui b{
  font-family:var(--font-title);font-weight:600;font-size:11px;letter-spacing:.16em;
  text-transform:uppercase;color:rgba(244,221,160,.9);
}
.sh-pp-qui i{
  font-style:normal;font-family:var(--font-tech);font-size:8px;letter-spacing:.24em;
  text-transform:uppercase;color:rgba(200,190,230,.45);
}
.sh-pp-code{
  flex:none;display:flex;flex-direction:column;text-align:right;
  font-family:var(--font-tech);font-size:8px;letter-spacing:.24em;text-transform:uppercase;
  color:rgba(200,190,230,.4);line-height:1.7;
}
.sh-pp-corps{display:flex;align-items:flex-start;gap:13px;padding:11px 0 9px}
.sh-pp-photo{
  flex:none;width:50px;height:62px;display:flex;align-items:center;justify-content:center;
  border:1px solid rgba(230,200,119,.26);
  background:linear-gradient(180deg, rgba(70,110,180,.2), rgba(8,6,26,.85));
  font-family:var(--font-title);font-weight:600;font-size:18px;color:rgba(232,227,245,.7);
}
.sh-pp-champs{flex:1;min-width:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(118px,1fr));gap:7px 14px}
.sh-pp-champ{min-width:0}
.sh-pp-lab{
  display:block;font-family:var(--font-tech);font-size:7px;letter-spacing:.18em;
  text-transform:uppercase;color:rgba(230,200,119,.5);
}
.sh-pp-val{
  display:block;margin-top:1px;font-family:var(--font-title);font-size:12.5px;line-height:1.2;
  color:rgba(232,227,245,.82);overflow-wrap:break-word;
}
.sh-pp-val.or{color:var(--gold-warm)}
.sh-pp-mrz{
  padding-top:8px;border-top:1px dashed rgba(230,200,119,.24);
  font-family:var(--font-tech);font-size:9px;letter-spacing:.12em;line-height:1.7;
  color:rgba(214,204,246,.4);overflow-wrap:break-word;
}

/* --- une rubrique sans entrée --- */
.sh-liste .fi-vide{padding:22px clamp(14px,1.4vw,20px);font-size:18px}
.fi-vide{color:var(--parchment-mute);font-style:italic;font-family:var(--font-body)}
.fi-tag{
  display:inline-block;padding:5px 11px;border:1px solid rgba(140,128,220,.3);
  background:rgba(140,128,220,.08);
  font-family:var(--font-tech);font-size:10px;letter-spacing:.18em;text-transform:uppercase;
  color:rgba(226,220,245,.75);
}
.fi-tag-mal{border-color:rgba(212,101,124,.4);background:rgba(212,101,124,.09);color:#e2879a}
.fi-tag-on{border-color:rgba(95,191,139,.4);background:rgba(95,191,139,.09);color:#7fd8a8}
.fi-tag-off{opacity:.5}

/* --- contenus de la Fiche --- */
.fc-block{
  margin-bottom:20px;padding:16px 18px 17px;border-radius:var(--r-md);
  background:linear-gradient(165deg,rgba(30,25,62,.42),rgba(14,12,32,.34));
  border:1px solid var(--line);box-shadow:var(--inset-top);
  animation:cardIn .34s var(--ease) both;
}
.fc-block:last-child{margin-bottom:0}
.fc-legend{font-size:14.5px;color:var(--parchment-dim);margin-top:8px;line-height:1.55}
.fc-vide{color:var(--parchment-mute);font-style:italic}

.fc-stat{display:flex;align-items:center;gap:11px;margin-bottom:9px}
.fc-stat:last-child{margin-bottom:0}
.fc-stat .fs-ico{width:22px;text-align:center;font-size:16px}
.fc-stat .fs-nom{flex:0 0 auto;min-width:190px;font-size:15.5px;color:var(--parchment-dim)}
.fc-stat .fs-bar{
  flex:1 1 auto;height:9px;border-radius:5px;overflow:hidden;position:relative;
  background:#171331;box-shadow:inset 0 1px 3px rgba(0,0,0,.6);
}
.fc-stat .fs-bar i{
  display:block;height:100%;border-radius:5px;
  background:linear-gradient(90deg,var(--gold-dim),var(--gold-bright));
  transition:width .8s var(--ease);
}
.fc-stat.fs-mental .fs-bar i{background:linear-gradient(90deg,#6d4fbc,#b39ae8)}
.fc-stat.fs-susp .fs-bar i{background:linear-gradient(90deg,#6c2f2a,#e0563f)}
.fc-stat .fs-val{
  flex:0 0 34px;text-align:right;font-family:var(--font-title);font-size:14.5px;
  color:var(--gold-bright);font-variant-numeric:tabular-nums;
}

.fc-attr{padding:11px 0;border-bottom:1px solid var(--hairline);position:relative}
.fc-attr:last-child{border-bottom:none;padding-bottom:0}
.fc-attr-d{font-size:14px;color:var(--parchment-mute);margin:5px 0 0 33px;line-height:1.5;max-width:60ch}
.fc-palier{
  position:absolute;top:-2px;right:0;font-family:var(--font-title);font-size:10.5px;
  letter-spacing:.16em;text-transform:uppercase;color:var(--accent);opacity:.85;
}
.fc-mat{position:relative;padding-right:58px}
.fc-niv{
  position:absolute;right:0;top:2px;font-family:var(--font-title);font-size:11px;
  letter-spacing:.1em;color:var(--parchment-mute);
}

.fc-facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:11px}
.fc-fact{
  display:flex;flex-direction:column;align-items:center;gap:3px;text-align:center;
  padding:13px 10px;border-radius:var(--r-sm);
  background:rgba(0,0,0,.24);border:1px solid var(--hairline);
}
.fc-fact span{font-size:21px}
.fc-fact b{font-family:var(--font-title);font-size:15px;color:var(--gold-bright);line-height:1.2}
.fc-fact i{
  font-style:normal;font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;
  font-family:var(--font-title);color:var(--parchment-mute);
}

.fc-rels{display:flex;flex-direction:column;gap:2px}
.fc-rel{
  display:flex;align-items:center;gap:12px;padding:9px 8px;border-radius:var(--r-xs);
  transition:background var(--t);
}
.fc-rel:hover{background:rgba(255,255,255,.03)}
.fc-rel .fr-ico{font-size:19px;width:26px;text-align:center;flex:0 0 auto}
.fc-rel .fr-txt{flex:1;min-width:0;display:flex;flex-direction:column;line-height:1.28}
.fc-rel .fr-txt b{font-size:16.5px;font-weight:600}
.fc-rel .fr-txt i{font-style:normal;font-size:13px;color:var(--parchment-mute)}
.fc-rel .fr-note{flex:0 0 auto;display:flex;flex-direction:column;align-items:flex-end;gap:1px}
.fc-rel .fr-note em{
  font-style:normal;font-family:var(--font-title);font-size:10.5px;letter-spacing:.13em;
  text-transform:uppercase;color:var(--parchment-mute);
}
/* Absent, pas mort : la ligne pâlit un peu, le lien reste noté. */
.fc-rel-absent{opacity:.78}
.fc-rel-absent .fr-ico{filter:grayscale(.6)}
.fc-rel-absent .fr-txt i{font-size:12.5px;line-height:1.35}

/* Ceux qui ne sont plus là : présents, mais éteints. Pas de note, pas
   d’éclat, la ligne se retire d’un pas sans disparaître. */
.fc-rel-mort{opacity:.62}
.fc-rel-mort .fr-ico{filter:grayscale(1)}
.fc-rel-mort .fr-txt b{font-weight:500}
.fc-rel-mort .fr-txt i{font-size:12.5px;line-height:1.35}
.fc-rel-mort .fr-note em{color:var(--faint);white-space:nowrap}

.stars{color:var(--gold-bright);font-size:14px;letter-spacing:1.5px;text-shadow:0 0 12px var(--accent-glow)}
.stars-off{color:var(--faint);text-shadow:none;opacity:.5}
.fr-neg{color:#e08b7d}
.fr-neg .stars{color:#e08b7d}

.fc-list{list-style:none;padding:0;margin:0}
.fc-list li{
  padding:7px 0 7px 18px;position:relative;font-size:16px;line-height:1.55;
  border-bottom:1px solid var(--hairline);
}
.fc-list li:last-child{border-bottom:none}
.fc-list li::before{content:'◆';position:absolute;left:0;top:9px;font-size:7px;color:var(--accent);opacity:.7}

.fc-objs{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:10px}
.fc-obj{
  display:flex;align-items:flex-start;gap:11px;padding:12px 13px;border-radius:var(--r-sm);
  background:rgba(0,0,0,.24);border:1px solid var(--hairline);
}
.fc-obj .fo-ico{font-size:21px;flex:0 0 auto}
.fc-obj .fo-txt{display:flex;flex-direction:column;min-width:0;line-height:1.34}
.fc-obj .fo-txt b{font-size:15.5px}
.fc-obj .fo-txt i{font-style:normal;font-size:13.5px;color:var(--parchment-mute)}
.fc-obj.fo-illegal{border-color:rgba(192,57,43,.3);background:rgba(192,57,43,.06)}
/* Ce que l’objet fait vraiment, en clair, sous sa description. */
.fo-effet{
  display:block;text-decoration:none;margin-top:5px;font-size:13px;line-height:1.4;
  color:var(--up);
}
/* Un exercice qu’on a une vraie chance de rater se signale. */
.hc-badge.hc-risque{color:var(--down);border-color:rgba(192,69,60,.5);background:rgba(192,57,43,.1)}
.fc-club{margin-bottom:14px;font-size:16px}
.fc-club:last-child{margin-bottom:0}

/* ------------------------------------------------------------
   21.7 NOTIFICATIONS : la conséquence se voit tout de suite
   ------------------------------------------------------------ */
#toast-zone{bottom:22px;right:22px;max-width:360px}
.toast{font-size:15.5px;padding:11px 17px;border-left-width:3px;font-family:var(--font-body)}
.toast b{font-family:var(--font-title);font-size:14.5px;color:var(--gold-bright);font-weight:700}
.toast.tst-up{border-left-color:var(--up);border-color:rgba(62,207,122,.34)}
.toast.tst-up b{color:var(--up)}
.toast.tst-down{border-left-color:var(--down);border-color:rgba(192,57,43,.36)}
.toast.tst-down b{color:var(--down)}
.toast.tst-arcane{border-left-color:#a98cf0;border-color:rgba(160,130,235,.4)}
.toast.tst-arcane b{color:#cbb6f5}
.toast.tst-gold{border-left-color:var(--gold);border-color:rgba(212,175,55,.44)}

/* ------------------------------------------------------------
   21.8 ADAPTATIF : la scène rétrécit avant que le défilement n’arrive
   ------------------------------------------------------------ */
/* Très grands écrans : c’est la TYPOGRAPHIE qui grandit, pas le vide.
   Sinon on retrouve une petite carte perdue au milieu de 2560 px. */
@media(min-width:2100px){
  :root{--charbar-w:308px;--scene-w:2000px;--carte-w:1500px;--lecture-w:930px}
  .ev-text{font-size:24px;line-height:1.66}
  .ev-title{font-size:clamp(36px,2.3vw,50px)}
  .choice-btn{font-size:20.5px;padding-top:18px;padding-bottom:18px}
  .result-box .rb-text{font-size:22px}
  #main-panel>.hub-grid{grid-template-columns:repeat(auto-fill,minmax(340px,1fr))}
  #main-panel>.hub-grid .hc-title{font-size:21px}
  #main-panel>.hub-grid .hc-sub{font-size:17px}
  #main-panel>.hub-grid .hc-icon{width:60px;height:60px;font-size:32px}
  /* Il reste beaucoup de hauteur libre : on la donne à l’air entre les blocs
     plutôt que d’agrandir encore un texte déjà à sa bonne taille. */
  .cb-sep{margin:22px 0}
  .cb-attrs{gap:13px}
  .cb-liste{gap:3px}
  .cb-etats{gap:14px}
  .cb-nom{font-size:22px}
  .cb-nom2{font-size:16px}
  .tb-ch-2{font-size:18px}
  .tb-ch-1{font-size:12px}
  .tb-ch-3{font-size:14px}
  .cb-fiche{font-size:12px;padding:11px 12px}
}
/* Écran large mais pas immense : on privilégie le nombre de colonnes,
   sinon la grille descend plus bas que la scène.
   (Ce bloc passe AVANT ceux fondés sur la hauteur : à spécificité égale,
   c’est le dernier déclaré qui gagne, et la hauteur doit gagner.) */
@media(max-width:1800px){
  #main-panel>.hub-grid{grid-template-columns:repeat(auto-fill,minmax(248px,1fr))}
}
@media(max-height:900px){
  :root{--lecture-w:740px;--topbar-h:70px}
  .ev-title{font-size:clamp(24px,2.2vw,32px)}
  .ev-text{font-size:19.5px;line-height:1.64}
  /* C'est le corps qui porte le rembourrage, pas la carte : posé sur la
     carte, il s'ajoutait à celui du corps et la scène perdait quarante
     pixels de haut pour rien. */
  .ev-corps{padding:clamp(20px,2.6vh,34px) clamp(26px,3.6vw,48px)}
  .choice-btn{padding-top:13px;padding-bottom:13px;font-size:17.5px}
  /* Écran court : une colonne de plus vaut mieux qu’une rangée de plus. */
  #main-panel>.hub-grid{gap:13px;grid-template-columns:repeat(auto-fill,minmax(236px,1fr))}
  #main-panel>.hub-grid .hub-card{min-height:156px;padding:15px 17px 16px}
  #main-panel>.hub-grid .hc-icon{width:44px;height:44px;font-size:24px;margin-bottom:9px}
  #main-panel>.hub-grid .hc-title{font-size:17.5px}
  #main-panel>.hub-grid .hc-sub{font-size:14.5px}
  .ap-banner{padding:12px 20px}
  .ap-banner .ap-count{min-width:40px;height:40px;font-size:23px}
}
/* La colonne ne défile jamais : sur un écran court, c’est elle qui se
   resserre, pas le joueur qui fait défiler. */
@media(max-height:830px){
  .cb-medaillon{width:clamp(48px,6.2vh,62px);height:clamp(48px,6.2vh,62px);margin-bottom:6px;padding:10px}
  .cb-nom{font-size:16px}
  .cb-nom2{font-size:12.5px}
  .cb-portrait{padding:4px 8px 7px}
  .cb-sep{margin:clamp(5px,.8vh,10px) 0}
  .cb-attrs{gap:4px}
  .cb-attr{padding:1px 4px}
  .cb-mat{padding:1px 7px;font-size:12.5px;line-height:1.26}
  .cb-rel{padding:2px 6px;font-size:13px}
  .cb-bas{gap:5px;padding-top:8px}
  .cb-fiche{padding:7px 10px}
}
@media(max-height:800px){
  :root{--lecture-w:700px}
  /* Ordinateur portable : plus de colonnes et des cartes plus basses,
     sinon la grille du hub descend sous la ligne de flottaison. */
  #main-panel>.hub-grid{grid-template-columns:repeat(auto-fill,minmax(208px,1fr));gap:11px}
  #main-panel>.hub-grid .hub-card{min-height:146px;padding:13px 15px 14px}
  #main-panel>.hub-grid .hc-icon{width:38px;height:38px;font-size:21px;margin-bottom:8px}
  #main-panel>.hub-grid .hc-title{font-size:16px;margin-bottom:5px}
  #main-panel>.hub-grid .hc-sub{font-size:13.5px;line-height:1.38}
  #main-panel>.hub-grid .hc-badge{font-size:11px;margin-top:8px}
  .ev-text{font-size:18.5px;line-height:1.58}
  .ev-kicker{margin-bottom:7px}
  .ev-title{margin-bottom:12px}
  .choices{gap:8px}
  .choice-btn{padding-top:11px;padding-bottom:11px;font-size:17px}
  .ch-test{margin-top:7px;padding:5px 10px}
}
@media(max-width:1180px){
  :root{--scene-w:100%;--carte-w:100%;--lecture-w:660px;--charbar-w:250px}
}
/* Sous 900 px de large, la colonne ne peut plus cohabiter avec une scène
   lisible : elle disparaît et tout passe par la Fiche. */
@media(max-width:900px){
  #charbar{display:none}
  #game-layout{grid-template-columns:minmax(0,1fr)}
  .tb-res{min-width:0}
  .tb-chapter{display:none}
  .sh-body{padding:18px 16px 22px}
  .fc-stat .fs-nom{min-width:120px;font-size:14.5px}
  #main-panel>.hub-grid{grid-template-columns:repeat(auto-fill,minmax(260px,1fr))}
}
@media(max-width:640px){
  #topbar{gap:8px;flex-wrap:wrap}
  .tb-res{order:3;width:100%;justify-content:center}
  .tb-btn kbd{display:none}
  .ev-corps{padding:20px 18px}
  .ev-text{font-size:18px}
  .choices,.ev-text,.result-box .rb-text,.ev-art,.effects-list{max-width:none}
  #toast-zone{left:14px;right:14px;max-width:none}
  .sh-id b{font-size:18px}
  .fc-stat{flex-wrap:wrap}
  .fc-stat .fs-nom{min-width:0;flex:1 1 auto}
  .fc-stat .fs-bar{flex-basis:100%;order:3}
}

/* ------------------------------------------------------------
   21.9 LES CRANS DE RESSERREMENT : la scène se serre avant de défiler
   ------------------------------------------------------------
   La 21.8 regarde l’écran, celle-ci regarde le texte. Deux scènes de
   même longueur d’écran ne font pas la même hauteur : quatre choix
   plutôt que deux, une conséquence de huit lignes plutôt que trois, et
   la carte passait de 700 à 1050 pixels. Sur un portable, le bouton
   Continuer tombait sous la ligne de flottaison d’une scène qu’on
   venait de finir de lire, et il fallait faire défiler pour tourner la
   page. Mesuré : 1046 px de carte pour 636 px de panneau en 1366×768.

   `serrerScene` (hud.js) mesure après chaque rendu et pose data-serre
   sur le panneau, de 1 à 3, jusqu’à ce que la scène tienne. On serre
   dans cet ordre, du moins coûteux au plus visible : le vide d’abord,
   l’interligne ensuite, la taille des lettres en dernier.

   Rien ne disparaît jamais : aucun choix, aucune ligne d’effet, aucune
   marque. Et une scène vraiment trop longue défile encore, avec son
   dégradé au bord, exactement comme avant.
   ------------------------------------------------------------ */

/* --- cran 1 : on reprend le vide, rien d’autre --- */
#main-panel[data-serre] .ev-corps{
  padding-top:clamp(20px,3vh,34px);padding-bottom:clamp(20px,3vh,34px);
}
#main-panel[data-serre] .ev-title{margin-top:14px}
#main-panel[data-serre] .ev-text{margin-top:16px}
#main-panel[data-serre] .ev-quote{margin-top:14px}
#main-panel[data-serre] .ev-rappel{margin-top:12px}
#main-panel[data-serre] .ev-art{margin-bottom:14px}
#main-panel[data-serre] .choices{margin-top:22px;gap:9px}
#main-panel[data-serre] .choice-btn{padding-top:13px;padding-bottom:13px}
#main-panel[data-serre] .result-box{margin-top:20px;padding:20px 24px 18px}
#main-panel[data-serre] .fx-bloc{margin-top:18px}
#main-panel[data-serre] .rb-suite{margin-top:18px}

/* --- cran 2 : l’interligne, et le titre d’un ton en dessous --- */
#main-panel[data-serre="2"] .ev-corps,
#main-panel[data-serre="3"] .ev-corps{
  padding-top:clamp(16px,2.2vh,24px);padding-bottom:clamp(16px,2.2vh,24px);
}
#main-panel[data-serre="2"] .ev-title,
#main-panel[data-serre="3"] .ev-title{font-size:clamp(24px,2.4vw,32px);margin-top:10px}
#main-panel[data-serre="2"] .ev-text,
#main-panel[data-serre="3"] .ev-text{line-height:1.55;margin-top:13px}
#main-panel[data-serre="2"] .result-box .rb-text,
#main-panel[data-serre="3"] .result-box .rb-text{line-height:1.5}
#main-panel[data-serre="2"] .choice-btn .ch-txt,
#main-panel[data-serre="3"] .choice-btn .ch-txt{line-height:1.32}
#main-panel[data-serre="2"] .choices,
#main-panel[data-serre="3"] .choices{margin-top:16px;gap:7px}
#main-panel[data-serre="2"] .choice-btn,
#main-panel[data-serre="3"] .choice-btn{padding-top:11px;padding-bottom:11px}
#main-panel[data-serre="2"] .result-box,
#main-panel[data-serre="3"] .result-box{margin-top:16px;padding:18px 22px 16px}
#main-panel[data-serre="2"] .fx-bloc,
#main-panel[data-serre="3"] .fx-bloc{margin-top:14px}
#main-panel[data-serre="2"] .rb-suite,
#main-panel[data-serre="3"] .rb-suite{margin-top:14px}

/* --- cran 3 : la taille des lettres, en dernier recours --- */
#main-panel[data-serre="3"] .ev-corps{
  padding-top:clamp(14px,1.8vh,20px);padding-bottom:clamp(14px,1.8vh,20px);
}
#main-panel[data-serre="3"] .ev-title{font-size:clamp(22px,2vw,28px)}
#main-panel[data-serre="3"] .ev-text{font-size:clamp(16.5px,1.25vw,18px);line-height:1.5}
#main-panel[data-serre="3"] .result-box .rb-text{font-size:18px}
#main-panel[data-serre="3"] .choice-btn .ch-txt{font-size:17px}
#main-panel[data-serre="3"] .choices{margin-top:14px;gap:6px}
#main-panel[data-serre="3"] .choice-btn{padding-top:10px;padding-bottom:10px}
/* Les lignes d’effet gardent leur rangée, leur cachet et leur filet : c’est
   l’air autour d’elles qui se reprend, jamais le nombre de lignes. */
#main-panel[data-serre="3"] .result-box{padding:14px 20px 13px}
#main-panel[data-serre="3"] .result-box .rb-text{line-height:1.44}
#main-panel[data-serre="3"] .fx-bloc{margin-top:12px;padding-top:10px}
#main-panel[data-serre="3"] .fx-entete{margin-bottom:9px}

/* ============================================================================
   22. ÉCRAN TITRE : LES MODULES
   ----------------------------------------------------------------------------
   Même matière que le reste : verre fumé, filets d’or, capitales gravées.
   Les modules à venir se distinguent par leur sobriété, pas par une couleur
   criarde : ils sont là, ils n’insistent pas.
   ============================================================================ */

/* (Le bouton d.entrée, les pastilles et le bloc d.introduction de
   l.ancien accueil vivaient ici. Ils sont décrits en section 5 avec le
   reste de l.écran titre : deux définitions du même bouton, c.était une
   de trop, et c.est celle-ci qui repeignait « Jouer » en olive.) */

/* ---------- les modules du jour, en damier ---------- */
/* Deux colonnes dès qu’il y a la place : empilés, les quatre modules
   font huit cents pixels de haut et l’accueil ne tient plus dans un
   écran, quelle que soit sa hauteur. */
/* La colonne de droite : une pile de panneaux, jamais une grille. Ce
   sont trois offres du jour, on les lit de haut en bas. */
.tl-modules{
  display:flex;flex-direction:column;gap:clamp(12px,2vh,20px);
  margin:0;text-align:left;min-width:0;
  animation:rise 1.1s var(--ease-out) both;
}

.tl-mod{
  container-type:inline-size;
  /* flex:none est indispensable : dans une colonne flex, un panneau se
     laisse compresser par défaut, et comme il masque son débordement,
     c’est la dernière quête qui disparaissait sans prévenir. */
  flex:none;
  position:relative;border-radius:0;overflow:hidden;
  padding:clamp(18px,2.6vh,26px) clamp(20px,2vw,28px) clamp(20px,2.8vh,28px);
  border:1px solid rgba(140,128,220,.14);
  background:rgba(15,12,40,.92);
  box-shadow:none;backdrop-filter:blur(10px);
  animation:rise .5s var(--ease-out) both;
}
/* La carte de tête porte le filet d’or, le grain, et un trait lumineux
   qui court sur son bord supérieur. C’est celle des quêtes : c’est la
   seule de la colonne sur laquelle il y a quelque chose à faire. */
.tl-mod-quetes{
  border-color:rgba(230,200,119,.2);
  background:linear-gradient(180deg, rgba(30,25,70,.96) 0%, rgba(16,13,42,.97) 100%);
  box-shadow:0 30px 70px -30px rgba(0,0,0,.9), inset 0 1px 0 rgba(255,255,255,.05);
}
.tl-mod-filet{
  position:absolute;top:0;left:24px;right:24px;height:1px;
  background:linear-gradient(90deg, rgba(230,200,119,0), rgba(230,200,119,.55), rgba(230,200,119,0));
}
.tl-mod-tete{
  position:relative;display:flex;align-items:baseline;justify-content:space-between;gap:12px;
  padding:0;background:none;border:0;
}
.tl-mod-tete h2{
  font-family:var(--font-title);font-weight:400;font-size:13px;letter-spacing:.28em;
  text-transform:uppercase;color:rgba(240,228,192,.85);margin:0;
}
.tl-mod-quetes .tl-mod-tete h2{color:var(--gold)}
.tl-mod-tag{
  font-family:var(--font-tech);font-size:10px;letter-spacing:.26em;text-transform:uppercase;
  color:rgba(200,190,230,.42);border:0;padding:0;background:none;
}
.tl-mod-tag-compte{
  font-size:11px;letter-spacing:.14em;color:var(--gold);
  padding:5px 11px;border:1px solid rgba(230,200,119,.28);
}
.tl-mod-corps{
  position:relative;padding:0;margin-top:14px;
  display:flex;flex-direction:column;gap:14px;align-items:stretch;
}
.tl-mod-txt{font-family:var(--font-body);font-size:18px;line-height:1.45;color:rgba(226,220,245,.7)}

/* Le bouton d’un module : un cadre qui bascule à l’or au survol. */
.tl-mod-btn{
  position:relative;overflow:hidden;width:100%;cursor:pointer;
  padding:16px 0;border-radius:0;
  color:#f2dda2;border:1px solid rgba(230,200,119,.4);
  background:linear-gradient(180deg, rgba(46,36,96,.5) 0%, rgba(14,11,38,.72) 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05);
  transition:color .3s ease, border-color .3s ease, background .35s ease, box-shadow .35s ease;
}
.tl-mod-btn > span:not(.eq){
  position:relative;font-family:var(--font-title);font-weight:500;font-size:15px;
  letter-spacing:.3em;text-indent:.3em;text-transform:uppercase;
}
.tl-mod-btn:hover{
  color:var(--or-encre);border-color:var(--gold-warm);background:var(--or-massif);
  box-shadow:0 22px 46px -22px rgba(230,200,119,.85), inset 0 1px 0 rgba(255,255,255,.55);
}
.tl-mod-btn .eq{opacity:.4;width:11px;height:11px}
.tl-mod-btn-nu{
  color:rgba(226,220,245,.7);border-color:rgba(140,128,220,.28);background:transparent;
  box-shadow:none;
}
.tl-mod-btn-nu:hover{
  color:var(--gold-bright);border-color:rgba(230,200,119,.5);
  background:rgba(230,200,119,.07);box-shadow:none;
}
.tl-mod-bientot{opacity:.8;transition:opacity var(--t)}
.tl-mod-bientot:hover{opacity:1}

/* Les traits imposés du défi du jour : un point de couleur et un mot,
   dans un cadre. Le point dit la famille du trait, pas l’objet. */
.tl-chips{display:flex;flex-wrap:wrap;gap:8px}
.tl-chip{
  display:inline-flex;align-items:center;gap:8px;padding:8px 14px;border-radius:0;
  background:rgba(12,10,34,.6);border:1px solid rgba(230,200,119,.16);
  font-family:var(--font-body);font-size:16px;color:rgba(232,227,245,.9);
}
.tl-chip i{
  font-style:normal;width:7px;height:7px;border-radius:50%;flex:none;
  background:rgba(200,190,230,.5);
}
.tl-chip.house-gryffondor i{background:#b3312f}
.tl-chip.house-serpentard i{background:#1f7a45}
.tl-chip.house-serdaigle i{background:#1f5fa8}
.tl-chip.house-poufsouffle i{background:#d4a017}

/* Les quêtes du jour : un intitulé, son compte, et douze crans dessous.
   Les crans se comptent, une barre lisse ne se compte pas. */
.tl-mod-quetes .tl-mod-corps{gap:0}
.qt-serie{
  margin:0 0 4px;font-family:var(--font-body);font-size:17px;
  color:rgba(200,190,230,.6);
}
.qt-serie b{font-family:var(--font-title);font-weight:400;font-size:15px;letter-spacing:.06em;color:var(--gold-warm)}
.qt-serie-off{font-style:italic}
.qt-liste{list-style:none;margin:0;padding:0}
.qt-ligne{
  display:block;padding:14px 0 12px;background:none;
  border:0;border-bottom:1px solid rgba(140,128,220,.1);
}
.qt-puce{display:none}
.qt-tete{display:flex;align-items:baseline;justify-content:space-between;gap:14px}
.qt-nom{
  font-family:var(--font-body);font-size:18px;line-height:1.35;
  color:rgba(232,227,245,.88);
}
.qt-val{
  flex:none;font-family:var(--font-body);font-size:15px;letter-spacing:.08em;
  color:rgba(200,190,230,.5);white-space:nowrap;
}
.qt-crans{display:flex;gap:3px;margin-top:11px}
.qt-crans i{flex:1;height:5px;display:block;background:rgba(140,128,220,.14)}
/* Une quête accomplie : l’intitulé s’éteint, les crans restent allumés. */
.qt-faite .qt-nom{color:rgba(200,190,230,.5);text-decoration:line-through;text-decoration-color:rgba(140,128,220,.5)}
.qt-plus{
  display:inline-block;margin-top:14px;padding:0;background:none;border:0;cursor:pointer;
  font-family:var(--font-tech);font-size:12px;letter-spacing:.24em;text-transform:uppercase;
  color:rgba(230,200,119,.8);transition:color var(--t);
}
.qt-plus::after{content:' →'}
.qt-plus:hover{color:var(--gold-bright)}

/* Le mode histoire : une seule ligne, le bouton à droite du texte. */
.tl-mod-histoire{
  display:flex;align-items:center;justify-content:space-between;gap:18px;
  background:linear-gradient(100deg, rgba(24,20,58,.7), rgba(16,13,42,.5));
}
.tl-mod-gauche{display:flex;flex-direction:column;gap:8px;min-width:0}
.tl-mod-tete-inline{justify-content:flex-start;gap:10px}
.tl-mod-tag-cadre{
  padding:4px 9px;border:1px solid rgba(140,128,220,.28);
  color:rgba(200,190,230,.5);letter-spacing:.26em;
}
.tl-mod-histoire .tl-mod-btn{
  width:auto;flex:none;padding:13px 20px;white-space:nowrap;
  border-color:rgba(230,200,119,.3);color:var(--gold);
}
.tl-mod-histoire .tl-mod-btn > span:not(.eq){
  font-family:var(--font-tech);font-weight:400;font-size:12px;letter-spacing:.24em;text-indent:.24em;
}
.tl-mod-histoire .tl-mod-btn:hover{background:rgba(230,200,119,.1);color:var(--gold-bright);border-color:rgba(230,200,119,.5)}


/* ---------- défier un ami ----------
   La fenêtre du duel parlait encore l'ancienne langue : coins arrondis,
   cartes molles, un gros bouton d'or. Elle prend celle du reste du jeu.
   Angles vifs partout, filets d'un pixel, équerres aux coins, Jost très
   interlettré pour les libellés techniques, Cormorant pour ce qui se lit
   en phrases, Cinzel pour les noms et les chiffres qui comptent. */
.du{display:flex;flex-direction:column}
.du-lab{display:flex;align-items:center;gap:14px}
.du-lab span{
  font-family:var(--font-tech);font-size:10px;letter-spacing:.4em;text-transform:uppercase;
  color:rgba(230,200,119,.75);white-space:nowrap;
}
.du-lab i{flex:1;height:1px;background:rgba(230,200,119,.22)}
.du-titre{
  margin:12px 0 0;font-family:var(--font-title);font-weight:600;
  font-size:clamp(26px,3vw,38px);letter-spacing:.04em;line-height:1.06;
  color:var(--gold-pale);text-shadow:0 0 44px rgba(230,200,119,.16);
}
.du-lead{
  margin:14px 0 0;max-width:640px;
  font-family:var(--font-body);font-size:19px;font-style:italic;line-height:1.45;
  color:rgba(200,188,235,.66);
}

/* --- les deux colonnes : ton code, le sien --- */
.du-cols{display:flex;flex-wrap:wrap;gap:18px;margin-top:clamp(18px,2.6vh,28px)}
.du-col{
  position:relative;flex:1 1 280px;min-width:0;
  display:flex;flex-direction:column;gap:12px;
  padding:20px 22px 22px;border-radius:0;
  border:1px solid rgba(140,128,220,.2);background:rgba(9,7,26,.5);
}
.du-col-lab{display:flex;align-items:center;gap:12px}
.du-col-lab span{
  font-family:var(--font-tech);font-size:10px;letter-spacing:.3em;text-transform:uppercase;
  color:rgba(230,200,119,.7);white-space:nowrap;
}
.du-col-lab i{flex:1;height:1px;background:rgba(230,200,119,.18)}
.du-col-lab-c{margin:clamp(20px,3vh,30px) 0 14px}
.du-col-txt{
  margin:0;font-family:var(--font-body);font-size:18px;line-height:1.42;
  color:rgba(214,206,240,.72);
}
.du-col-txt b{color:var(--gold-warm);font-weight:500}
.du-vide{font-style:italic;color:rgba(200,190,230,.5)}

/* Le code : on doit pouvoir le sélectionner d'un geste, et voir qu'il
   est long sans qu'il pousse la fenêtre. */
.du-code{
  font-family:var(--font-tech);font-size:12px;letter-spacing:.06em;line-height:1.5;
  word-break:break-all;user-select:all;cursor:text;
  max-height:104px;overflow-y:auto;overscroll-behavior:contain;
  padding:12px 14px;border:1px dashed rgba(230,200,119,.3);
  background:rgba(0,0,0,.34);color:rgba(240,228,192,.9);
}
.du-champ{
  width:100%;resize:vertical;min-height:78px;border-radius:0;
  padding:12px 14px;border:1px solid rgba(140,128,220,.28);
  background:rgba(0,0,0,.34);color:rgba(240,236,255,.9);
  font-family:var(--font-tech);font-size:12px;letter-spacing:.05em;line-height:1.5;
}
.du-champ:focus{outline:none;border-color:rgba(230,200,119,.5)}
.du-champ::placeholder{color:rgba(190,182,225,.35)}
.du-erreur{
  margin:0;min-height:1.2em;
  font-family:var(--font-body);font-size:17px;font-style:italic;color:#e08a92;
}

.du-btn{
  align-self:stretch;padding:14px 20px;border-radius:0;cursor:pointer;
  background:transparent;border:1px solid rgba(140,128,220,.28);
  font-family:var(--font-title);font-weight:400;font-size:13px;letter-spacing:.26em;
  text-transform:uppercase;color:rgba(226,220,245,.76);
  transition:border-color .25s, color .25s, background .25s;
}
.du-btn:hover{border-color:rgba(230,200,119,.5);color:var(--gold-bright);background:rgba(230,200,119,.06)}
.du-btn-or{border-color:rgba(230,200,119,.42);color:var(--gold-pale);background:rgba(230,200,119,.07)}

/* --- les deux vies face à face --- */
.du-face{
  display:flex;flex-wrap:wrap;align-items:stretch;gap:14px;
  margin-top:clamp(16px,2.4vh,26px);
}
.du-vie{
  position:relative;flex:1 1 240px;min-width:0;
  display:flex;flex-direction:column;gap:7px;align-items:center;text-align:center;
  padding:22px 18px 20px;border:1px solid rgba(140,128,220,.22);
  background:linear-gradient(180deg,rgba(24,19,52,.6),rgba(9,7,24,.72));
}
.du-vie[data-camp="moi"]{border-color:rgba(230,200,119,.34)}
.du-vie-camp{
  font-family:var(--font-tech);font-size:9px;letter-spacing:.32em;text-transform:uppercase;
  color:rgba(200,190,230,.45);
}
.du-vie-tete{display:flex;align-items:center;gap:12px;margin-top:4px}
.du-blason{width:38px;height:38px;flex:none;object-fit:contain}
.du-vie-nom{
  font-family:var(--font-title);font-weight:600;font-size:22px;letter-spacing:.02em;
  line-height:1.15;color:#f2ecda;
}
.du-vie-sous{
  font-family:var(--font-body);font-size:17px;color:rgba(206,198,235,.6);line-height:1.35;
}
.du-vie-titre{
  margin-top:2px;font-family:var(--font-title);font-weight:500;font-size:14px;
  letter-spacing:.18em;text-transform:uppercase;color:var(--gold-warm);
}
.du-vie-note{display:flex;align-items:baseline;gap:8px;margin-top:8px}
.du-vie-note b{
  font-family:var(--font-title);font-weight:700;font-size:46px;line-height:1;
  color:var(--gold-pale);text-shadow:0 0 34px rgba(230,200,119,.28);
}
.du-vie-note i{
  font-family:var(--font-tech);font-style:normal;font-size:10px;letter-spacing:.26em;
  text-transform:uppercase;color:rgba(200,190,230,.45);
}
.du-vie-fin{
  font-family:var(--font-body);font-size:16px;font-style:italic;color:#e08a92;
}
.du-versus{
  flex:0 0 auto;display:flex;flex-direction:column;align-items:center;gap:10px;
  justify-content:center;padding:0 4px;
}
.du-versus i{flex:1;width:1px;min-height:26px;background:rgba(230,200,119,.22)}
.du-versus span{
  font-family:var(--font-tech);font-size:10px;letter-spacing:.28em;text-transform:uppercase;
  color:rgba(230,200,119,.6);
}

/* --- les six axes, en miroir ---
   La jauge de gauche part de la droite, celle de droite part de la
   gauche : les deux vies se rejoignent au milieu, sur le nom de l'axe. */
.du-axes{display:flex;flex-direction:column;border-top:1px solid rgba(140,128,220,.14)}
.du-axe{
  display:flex;align-items:center;gap:12px;padding:9px 4px;
  border-bottom:1px solid rgba(140,128,220,.14);
}
.du-axe-v{
  flex:none;width:34px;text-align:center;
  font-family:var(--font-title);font-weight:600;font-size:17px;
  color:rgba(214,206,240,.55);
}
.du-axe-v.gagne{color:var(--gold-bright);text-shadow:0 0 16px rgba(230,200,119,.45)}
.du-axe-jauge{flex:1;height:4px;background:rgba(255,255,255,.06);display:flex;justify-content:flex-end}
.du-axe-jauge i{display:block;height:100%;background:rgba(230,200,119,.5)}
.du-axe-jauge-d{justify-content:flex-start}
.du-axe-jauge-d i{background:rgba(143,208,240,.5)}
.du-axe-nom{
  flex:0 0 auto;min-width:118px;text-align:center;
  font-family:var(--font-tech);font-size:10px;letter-spacing:.16em;text-transform:uppercase;
  color:rgba(200,190,230,.55);
}

/* --- le verdict --- */
.du-verdict{
  position:relative;margin-top:clamp(18px,2.6vh,28px);padding:20px 24px;
  border:1px solid rgba(140,128,220,.22);background:rgba(9,7,26,.5);
}
.du-verdict[data-qui="moi"]{border-color:rgba(230,200,119,.38);background:rgba(230,200,119,.05)}
.du-verdict[data-qui="lui"]{border-color:rgba(143,208,240,.34);background:rgba(143,208,240,.045)}
.du-verdict p{
  margin:0;font-family:var(--font-body);font-size:20px;font-style:italic;line-height:1.45;
  color:rgba(232,226,250,.86);text-align:center;
}
.du-retour{display:flex;justify-content:center;margin-top:18px}
.du-retour .du-btn{align-self:auto;min-width:220px}

@media(max-width:640px){
  .du-cols{flex-direction:column}
  .du-versus{flex-direction:row;width:100%}
  .du-versus i{width:auto;height:1px;min-height:0;flex:1}
  .du-axe-nom{min-width:92px;font-size:9px}
}

/* ---------- le bas de page ---------- */
/* Le pied de l’accueil se décrit en section 5, avec le reste de l’écran
   titre. Il vivait aussi ici, en second, et c’est cette copie qui
   gagnait : elle recentrait les trois groupes en un tas, rendait la
   bande translucide, et repeignait « Soutenir le projet » en pilule de
   vingt-deux pixels, contre la règle des angles vifs. Elle est partie.
   Ne reste que ce qui n’appartient qu’à la fenêtre des cookies. */
.tl-lien-danger:hover{color:#efb2a6;border-color:rgba(192,69,60,.45);background:rgba(192,57,43,.1)}
.tl-lien-mini{font-size:15px}

/* ---------- score de fin d’année en défi ou en duel ---------- */
.bilan-score{
  display:flex;align-items:center;gap:14px;flex-wrap:wrap;
  margin-top:var(--sp-3);padding:13px 18px;border-radius:var(--r-md);
  background:linear-gradient(150deg,rgba(212,175,55,.1),transparent 70%);
  border:1px solid var(--line-2);border-left:3px solid var(--gold-dim);
}
.bilan-score.bilan-record{border-left-color:var(--up);background:linear-gradient(150deg,rgba(62,207,122,.11),transparent 70%)}
.bs-quoi{font-family:var(--font-title);font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--parchment-mute)}
.bs-pts{font-family:var(--font-title);font-size:26px;color:var(--gold-bright);line-height:1}
.bs-pts i{font-style:normal;font-size:13px;color:var(--parchment-mute)}
.bilan-record .bs-pts{color:var(--up)}
.bs-note{font-size:14px;color:var(--parchment-dim);margin-left:auto}

/* Écran court : l’accueil se resserre plutôt que de demander à défiler.
   Le seuil est haut (950 px) parce que c’est vers 860 que la colonne de
   droite dépasse : en dessous, mieux vaut resserrer que faire défiler. */
@media(max-height:950px){
  .tl-content{padding:min(2vh,20px) 24px min(1.2vh,12px)}
  .tl-crest{width:clamp(46px,5.4vh,62px);margin-bottom:4px}
  .tl-title{font-size:clamp(30px,3.8vw,46px)}
  .tl-tagline{font-size:15px}
  .tl-rule{margin:5px auto 4px}
  .tl-jouer{padding:12px 22px 11px}
  .tl-jouer-txt{font-size:clamp(21px,2.6vw,27px)}
  .tl-jouer-sub{font-size:13.5px}
  .tl-menu{gap:8px}
  .tl-corps{margin-top:clamp(32px,5.5vh,54px);gap:14px}
  .tl-mod-tete{padding:7px 13px}
  .tl-mod-corps{padding:8px 13px 9px;gap:6px}
  .tl-mod-txt{font-size:13.5px}
  .tl-mod-btn{padding-top:7px;padding-bottom:7px}
  .tl-pastille{padding:7px 12px;font-size:11.5px}
  .tl-content{padding-top:clamp(12px,2vh,24px);padding-bottom:clamp(8px,1.4vh,16px)}
  .tl-pied{padding-top:9px;padding-bottom:8px}
  .tl-pied-inner{margin-bottom:6px;gap:10px}
  /* Sur un écran court, le château redevient une frise basse : il ne doit
     pas monter derrière les cartes. */
  .tl-castle{height:min(340px,44vh);bottom:16%}
  .tl-moon{width:min(190px,17vw);bottom:26vh}
  .tl-halo{height:40vh;bottom:16vh}
  /* Les modules sont déjà côte à côte : sur un écran court ils se
     resserrent en plus. */
  .tl-modules{gap:11px}
  .tl-intro-corps{padding:10px 14px 11px;gap:6px}
  .tl-intro-corps p{font-size:13.5px;line-height:1.45}
  .tl-intro-mut{font-size:12.5px!important}
  /* La taille ne bouge pas : cet en-tête doit rester identique à celui
     des modules de droite, qui ne se resserre pas non plus. */
  .tl-intro-tete{padding:7px 14px}
  .tl-chip{padding:3px 8px;font-size:11.5px}
}
@media(max-height:950px) and (max-width:1100px){
  .tl-modules{grid-template-columns:1fr}
}

@media(max-width:640px){
  .tl-modules{margin-top:var(--sp-4)}
  .tl-mod-corps{padding:13px 14px 15px}
}

/* Sous 900 px de large, les deux colonnes se remettent l’une sous l’autre. */
@media(max-width:900px){
  .tl-corps{grid-template-columns:1fr}
  .tl-modules{grid-template-columns:1fr}
  .tl-modules .tl-mod-histoire{grid-column:auto}
}

/* ============================================================================
   23. ATELIERS : les activités en plusieurs gestes
   ============================================================================ */
.atelier-rail{
  display:flex;align-items:center;gap:7px;
  max-width:min(var(--lecture-w),100%);margin:0 auto clamp(12px,1.8vh,18px);
}
.at-pas{
  width:34px;height:3px;border-radius:2px;flex:0 0 auto;
  background:rgba(255,255,255,.10);transition:background var(--t),box-shadow var(--t);
}
.at-pas.fait{background:linear-gradient(90deg,var(--gold-dim),var(--gold-bright))}
.at-pas.ici{background:var(--gold-bright);box-shadow:0 0 12px var(--accent-glow)}
.at-compte{
  margin-left:6px;font-family:var(--font-title);font-size:10px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--parchment-mute);
}
/* Ce qu’on a réussi ou manqué jusqu’ici, sans commentaire. */
.atelier-notes{
  display:flex;flex-wrap:wrap;gap:7px;
  max-width:min(var(--lecture-w),100%);margin:0 auto clamp(10px,1.6vh,16px);
}
.atelier-notes span{
  font-size:12.5px;font-family:var(--font-title);letter-spacing:.04em;
  padding:3px 10px;border-radius:12px;
  background:rgba(0,0,0,.28);border:1px solid var(--hairline);color:var(--parchment-mute);
}
.atelier-notes span:first-letter{font-size:14px}

.atelier-verdict{
  display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;
  max-width:min(var(--lecture-w),100%);margin:0 auto clamp(14px,2vh,20px);
  padding:12px 16px;border-radius:var(--r-md);
  border:1px solid var(--line-2);border-left:3px solid var(--gold-dim);
  background:linear-gradient(150deg,rgba(212,175,55,.09),transparent 70%);
}
.av-label{font-family:var(--font-title);font-size:17px;color:var(--gold-bright)}
.av-qualite{
  margin-left:auto;font-family:var(--font-title);font-size:12px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--parchment-mute);
}
.atelier-verdict.at-bien{border-left-color:var(--up);background:linear-gradient(150deg,rgba(62,207,122,.12),transparent 70%)}
.atelier-verdict.at-bien .av-label{color:var(--up)}
.atelier-verdict.at-moyen{border-left-color:var(--gold-dim)}
.atelier-verdict.at-mal{border-left-color:var(--down);background:linear-gradient(150deg,rgba(192,57,43,.11),transparent 70%)}
.atelier-verdict.at-mal .av-label{color:var(--down)}
.atelier-verdict.at-pire{border-left-color:#c0392b;background:linear-gradient(150deg,rgba(192,57,43,.2),transparent 70%)}
.atelier-verdict.at-pire .av-label{color:#f0b8ae}

/* ============================================================================
   24. ORIENTATION : l’avis du Bureau, à la sortie de Poudlard
   ============================================================================ */
.orientation{
  margin:0 0 var(--sp-4);padding:16px 20px 17px;border-radius:var(--r-md);
  border:1px solid var(--line-2);border-left:3px solid var(--gold-dim);
  background:linear-gradient(150deg,rgba(30,25,62,.6),rgba(13,11,30,.5));
}
.or-tete{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;margin-bottom:8px}
.or-label{
  font-family:var(--font-title);font-size:11px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--gold);
}
.or-note{
  margin-left:auto;font-family:var(--font-title);font-size:12.5px;color:var(--parchment-mute);
  font-variant-numeric:tabular-nums;
}
.or-txt{font-size:16px;line-height:1.55;color:var(--parchment-dim);margin-bottom:12px}
.or-choix{
  display:flex;align-items:center;gap:14px;
  padding:12px 14px;border-radius:var(--r-sm);
  background:rgba(0,0,0,.3);border:1px solid var(--line);
}
.or-ico{font-size:28px;flex:0 0 auto}
.or-corps{display:flex;flex-direction:column;min-width:0;line-height:1.35}
.or-corps b{font-family:var(--font-title);font-size:19px;color:var(--gold-bright)}
.or-corps i{font-style:normal;font-size:14.5px;color:var(--parchment-mute)}
.or-second{margin-top:10px;font-size:14.5px;color:var(--parchment-dim)}
.or-second b{color:var(--parchment)}
/* ============================================================
   LA CARTE D’UNE VIE : la note sur cent et ses six piliers
   ============================================================ */
.carte-vie{border-left:3px solid var(--gold)}
.cv-tete{display:flex;align-items:center;gap:22px;flex-wrap:wrap}
.cv-note{
  flex:0 0 auto;display:flex;flex-direction:column;align-items:center;justify-content:center;
  min-width:118px;padding:10px 16px;border-radius:var(--r-sm);
  background:rgba(0,0,0,.22);border:1px solid rgba(212,175,55,.22);
}
.cv-note b{
  font-family:var(--font-title);font-size:clamp(44px,7vw,60px);line-height:1;
  color:var(--gold-bright);text-shadow:0 0 26px var(--accent-glow);
}
.cv-note span{font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--parchment-mute);margin-top:4px}
.cv-id{flex:1;min-width:230px}
.cv-rang{
  font-family:var(--font-title);font-size:clamp(21px,3vw,27px);color:var(--parchment);
  display:block;line-height:1.2;
}
.cv-mot{margin-top:6px;font-size:15px;color:var(--parchment-dim);font-style:italic}
.cv-record{margin-top:8px;font-size:14px;color:var(--gold-bright)}

.cv-piliers{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));
  gap:14px;margin-top:20px;
}
.cv-pilier{padding:12px 14px;border-radius:var(--r-xs);background:rgba(255,255,255,.025);border:1px solid rgba(255,255,255,.05)}
.cv-p-tete{display:flex;justify-content:space-between;align-items:baseline;gap:10px}
.cv-p-tete span{font-size:14.5px;color:var(--parchment)}
.cv-p-tete b{font-family:var(--font-title);font-size:19px;color:var(--gold-bright)}
.cv-p-tete b i{font-style:normal;font-size:12.5px;color:var(--parchment-mute)}
.cv-p-piste{height:4px;border-radius:2px;background:rgba(255,255,255,.07);margin:8px 0 8px;overflow:hidden}
.cv-p-piste i{display:block;height:100%;border-radius:2px;background:linear-gradient(90deg,var(--gold),var(--gold-bright))}
.cv-p-detail{font-size:12.5px;line-height:1.45;color:var(--parchment-mute)}

/* Le filet de la carte prend la couleur du rang atteint. */
.carte-vie.sc-legende{border-left-color:var(--up)}
.carte-vie.sc-legende .cv-note b{color:var(--up);text-shadow:0 0 26px rgba(124,231,162,.45)}
.carte-vie.sc-grande{border-left-color:#9adcf9}
.carte-vie.sc-grande .cv-note b{color:#9adcf9;text-shadow:0 0 24px rgba(154,220,249,.35)}
.carte-vie.sc-belle{border-left-color:var(--gold)}
.carte-vie.sc-honnete{border-left-color:var(--parchment-mute)}
.carte-vie.sc-honnete .cv-note b{color:var(--parchment)}
.carte-vie.sc-difficile{border-left-color:#e8a25e}
.carte-vie.sc-difficile .cv-note b{color:#e8a25e;text-shadow:none}
.carte-vie.sc-gachee{border-left-color:var(--down)}
.carte-vie.sc-gachee .cv-note b{color:var(--down);text-shadow:none}

/* Un volet de l’épilogue : replié, il tient sur une ligne. */
.epi-volet{padding-top:14px;padding-bottom:14px}
.epi-volet>summary{
  cursor:pointer;list-style:none;display:flex;align-items:center;gap:10px;
  margin:0;user-select:none;
}
.epi-volet>summary::-webkit-details-marker{display:none}
.epi-volet>summary::after{
  content:'⌄';margin-left:auto;font-size:15px;color:var(--parchment-mute);
  transition:transform var(--t);letter-spacing:0;
}
.epi-volet[open]>summary::after{transform:rotate(180deg)}
.epi-volet>summary:hover{color:var(--gold-bright)}
.epi-volet-corps{margin-top:14px}

/* Le bulletin des sept années */
.bulletin td{vertical-align:middle}
.bulletin .bl-tete td{
  font-family:var(--font-title);font-size:11px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--parchment-mute);
}
.bl-niv{display:flex;align-items:center;gap:10px;min-width:150px}
.bl-piste{flex:1;height:4px;border-radius:2px;background:rgba(255,255,255,.07);overflow:hidden}
.bl-piste i{display:block;height:100%;background:linear-gradient(90deg,var(--gold),var(--gold-bright))}
.bl-niv b{font-family:var(--font-title);font-size:14px;color:var(--parchment);min-width:26px;text-align:right}

/* ============================================================
   LA PENSINE : les vies déjà versées
   ============================================================ */
.pensine-liste{display:flex;flex-direction:column;gap:6px;margin-top:14px;max-height:52vh;overflow-y:auto}
.pensine-vie{
  display:flex;align-items:center;gap:14px;padding:11px 12px;
  border-radius:var(--r-xs);background:rgba(255,255,255,.025);
  border:1px solid rgba(255,255,255,.05);
}
.pensine-vie.pv-record{border-color:rgba(212,175,55,.4);background:rgba(212,175,55,.06)}
.pv-blason{flex:0 0 auto;width:30px;text-align:center;font-size:19px}
.pv-crest{width:26px;height:26px}
.pv-txt{flex:1;min-width:0;display:flex;flex-direction:column;line-height:1.3}
.pv-txt b{font-size:16px}
.pv-txt i{font-style:normal;font-size:13px;color:var(--parchment-mute)}
.pv-txt .pv-date{font-size:11.5px;color:var(--faint)}
.pv-note{flex:0 0 auto;display:flex;flex-direction:column;align-items:flex-end}
.pv-note b{font-family:var(--font-title);font-size:26px;color:var(--gold-bright);line-height:1}
.pv-note em{
  font-style:normal;font-size:10.5px;letter-spacing:.11em;text-transform:uppercase;
  color:var(--parchment-mute);margin-top:3px;
}

.or-regret{margin-top:8px;font-size:14px;color:#e08b7d}
.or-regret b{color:#efa495}
.or-libre{margin-top:8px;font-size:13.5px;font-style:italic;color:var(--faint)}
/* Le ton du dossier se voit à la couleur du filet. */
.orientation.or-excellent{border-left-color:var(--up)}
.orientation.or-excellent .or-label{color:var(--up)}
.orientation.or-bon{border-left-color:var(--gold)}
.orientation.or-moyen{border-left-color:var(--parchment-mute)}
.orientation.or-moyen .or-label{color:var(--parchment-mute)}
.orientation.or-faible{border-left-color:var(--down)}
.orientation.or-faible .or-label{color:var(--down)}

/* ============================================================
   PARENTS : deux métiers, deux camps, deux jauges
   ============================================================ */
.par-wrap { display: flex; flex-direction: column; gap: 10px; }
.par-bloc {
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 10px 12px;
  background: rgba(255, 255, 255, .015);
}
.par-bloc.par-mort { opacity: .55; }
.par-tete {
  display: flex; align-items: baseline; gap: 8px;
  flex-wrap: wrap; margin-bottom: 3px;
}
.par-faction { margin-left: auto; font-size: .82rem; white-space: nowrap; }
.par-metier { font-size: .95rem; color: var(--gold-soft, #d9c48a); }
.par-desc { font-size: .82rem; line-height: 1.35; margin-top: 2px; }
.par-jauge {
  margin-top: 7px; height: 5px; border-radius: 3px;
  background: rgba(255, 255, 255, .08); overflow: hidden;
}
.par-jauge i { display: block; height: 100%; border-radius: 3px; }
.par-jauge .par-noir { background: linear-gradient(90deg, #6b2740, #a8324f); }
.par-jauge .par-clair { background: linear-gradient(90deg, #4a7c59, #86c08f); }

/* ============================================================
   CHOIX RISQUÉS : un seul jeton, une seule couleur
   ------------------------------------------------------------
   Trois paliers de rouge classaient les choix d’une scène avant
   qu’on les ait lus. Il n’en reste qu’un : le même jeton pour un
   choix à 1 % et un choix à 15 %.
   ============================================================ */
.ch-test.ch-risk { border-color: rgba(200, 70, 70, .45); }
.ch-test.ch-risk b { color: #e08b8b; }
.choice-btn:hover .ch-test.ch-risk { background: rgba(200, 30, 30, .12); }

/* ============================================================
   23. LA FICHE PERSONNAGE
   ------------------------------------------------------------
   Une grille à deux colonnes, des cartes à en-tête, et une
   hiérarchie stricte : un chiffre qui compte est gros, le reste
   est discret. Aucun panneau ne se ressemble par hasard.
   ============================================================ */

/* (La coquille de la Fiche et ses constantes vitales sont décrites en 21.6 :
   plein écran, trois colonnes, un classeur qu.on parcourt. Ce qui suit ne
   concerne plus que les briques de contenu réutilisées par d.autres écrans.) */

/* --- grille et cartes --- */
.fi-grille{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:16px;align-items:start;
}
.fi-carte{
  display:flex;flex-direction:column;min-width:0;
  border-radius:var(--r-md);border:1px solid var(--line);
  background:linear-gradient(168deg,rgba(32,27,64,.5),rgba(13,11,30,.42));
  box-shadow:var(--inset-top);overflow:hidden;
  animation:cardIn .3s var(--ease) both;
}
.fi-carte.fi-large{grid-column:1 / -1}
.fi-tete{
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  padding:12px 16px 11px;border-bottom:1px solid var(--hairline);
  background:linear-gradient(180deg,rgba(255,255,255,.035),transparent);
}
.fi-t-ico{font-size:15px;opacity:.95;filter:grayscale(.25)}
.fi-tete h3{
  margin:0;font-family:var(--font-title);font-size:12.5px;font-weight:700;
  letter-spacing:.17em;text-transform:uppercase;color:var(--gold-bright);
}
.fi-t-val{
  margin-left:auto;font-family:var(--font-title);font-size:11px;letter-spacing:.09em;
  color:var(--parchment-mute);padding:3px 10px;border-radius:99px;
  border:1px solid var(--hairline);background:rgba(255,255,255,.03);white-space:nowrap;
}
.fi-chapo{
  margin:0;padding:11px 16px 0;font-size:13px;line-height:1.55;
  color:var(--parchment-mute);font-style:italic;
}
.fi-corps{padding:14px 16px 16px}
.fi-carte.fi-danger{border-color:rgba(200,70,70,.34)}
.fi-carte.fi-danger .fi-tete h3{color:#e8a0a0}
.fi-carte.fi-danger .fi-tete{background:linear-gradient(180deg,rgba(180,40,40,.09),transparent)}
.fi-carte.fi-rare{border-color:rgba(212,175,55,.34)}
.fi-carte.fi-coeur .fi-tete h3{color:#e9a7c0}
.fi-carte.fi-memoire{opacity:.85}

/* --- faits : une valeur, un libellé --- */
.fi-faits{display:grid;grid-template-columns:repeat(auto-fit,minmax(152px,1fr));gap:10px}
.fi-fait{
  display:flex;flex-direction:column;gap:2px;padding:12px 13px;
  border-radius:var(--r-sm);border:1px solid var(--hairline);
  background:rgba(255,255,255,.022);min-width:0;
}
.ff-ico{font-size:19px;line-height:1;margin-bottom:4px;display:block;width:22px;height:22px}
.ff-ico img,.ff-blason{width:22px;height:22px;object-fit:contain;display:block}
.fi-fait b{
  font-family:var(--font-title);font-size:15px;color:var(--gold-bright);
  line-height:1.2;overflow-wrap:anywhere;
}
.fi-fait i{
  font-family:var(--font-title);font-size:9.5px;letter-spacing:.15em;text-transform:uppercase;
  color:var(--parchment-mute);font-style:normal;
}
.fi-fait u{
  text-decoration:none;font-size:11.5px;line-height:1.4;color:var(--parchment-dim);
  margin-top:4px;
}

/* --- jauges --- */
.fi-jauge{
  display:grid;grid-template-columns:22px 1fr 110px 44px;
  align-items:center;gap:10px;padding:7px 0;
}
.fi-jauge + .fi-jauge{border-top:1px solid var(--hairline)}
.fj-ico{font-size:15px;text-align:center}
.fj-nom{font-size:14px;color:var(--parchment-dim);min-width:0;overflow-wrap:anywhere}
.fj-piste{height:6px;border-radius:99px;background:rgba(255,255,255,.07);overflow:hidden}
.fj-piste i{
  display:block;height:100%;border-radius:99px;
  background:linear-gradient(90deg,#8a7020,var(--accent));
  transition:width .5s var(--ease);
}
.fj-val{
  font-family:var(--font-title);font-size:14px;color:var(--gold-bright);
  text-align:right;white-space:nowrap;
}
.fj-palier,.fj-note{
  grid-column:2 / -1;font-size:11.5px;color:var(--parchment-mute);margin-top:-3px;
}
.fi-jauge.fj-mental .fj-piste i{background:linear-gradient(90deg,#6d4fbc,#b39ae8)}
.fi-jauge.fj-susp .fj-piste i{background:linear-gradient(90deg,#6c2f2a,#e0563f)}

/* --- échelle d’alignement --- */
.fi-echelle{padding:6px 0 2px}
.fe-piste{
  position:relative;display:grid;grid-template-columns:repeat(5,1fr);
  height:34px;border-radius:8px;border:1px solid var(--hairline);
  background:linear-gradient(90deg,#5a1d2e,#8a3149 22%,#4a4a6a 50%,#8a7a3a 78%,#d4af37);
}
.fe-zone{
  display:flex;align-items:center;justify-content:center;
  font-family:var(--font-title);font-size:9px;letter-spacing:.14em;text-transform:uppercase;
  color:rgba(255,255,255,.62);border-right:1px solid rgba(0,0,0,.28);
}
.fe-zone:last-of-type{border-right:none}
.fe-curseur{
  position:absolute;top:-9px;bottom:-9px;width:3px;margin-left:-1.5px;
  background:#fff;border-radius:2px;box-shadow:0 0 12px rgba(255,255,255,.8);
  transition:left .5s var(--ease);
}
.fe-curseur em{
  position:absolute;top:-20px;left:50%;transform:translateX(-50%);
  font-size:14px;font-style:normal;filter:drop-shadow(0 2px 4px rgba(0,0,0,.7));
}
.fe-curseur.fe-second{
  width:2px;background:#f0d98a;box-shadow:0 0 8px rgba(240,217,138,.7);top:-2px;bottom:-16px;
}
.fe-curseur.fe-second em{top:auto;bottom:-19px;font-size:12px;opacity:.95}
.fe-legende{
  display:flex;flex-wrap:wrap;gap:18px;margin-top:34px;
  font-size:12.5px;color:var(--parchment-dim);
}
.fe-legende b{color:var(--gold-bright);font-family:var(--font-title)}

/* --- personnes --- */
.fi-pers-liste{display:flex;flex-direction:column}
.fi-pers{
  display:flex;align-items:center;gap:12px;padding:11px 2px;
  border-bottom:1px solid var(--hairline);
}
.fi-pers:last-child{border-bottom:none}
.fp-ico{
  width:38px;height:38px;flex:0 0 auto;border-radius:11px;font-size:18px;
  display:flex;align-items:center;justify-content:center;overflow:hidden;
  background:rgba(255,255,255,.04);border:1px solid var(--hairline);
}
.fp-ico img,.fp-blason{width:100%;height:100%;object-fit:cover}
.fp-txt{display:flex;flex-direction:column;min-width:0;flex:1 1 auto;line-height:1.32}
.fp-txt b{font-size:14.5px;color:var(--parchment)}
.fp-txt i{font-size:12.5px;color:#cbb277;font-style:normal}
.fp-txt u{text-decoration:none;font-size:11.5px;color:var(--parchment-mute);line-height:1.45;margin-top:2px}
.fp-droite{
  margin-left:auto;flex:0 0 auto;display:flex;flex-direction:column;
  align-items:flex-end;gap:4px;text-align:right;
}
.fp-droite em{font-size:11px;font-style:normal;color:var(--parchment-mute);white-space:nowrap}
.fp-hostile{color:#e07a7a;font-size:13px;letter-spacing:1px}
.fi-pers-mort{opacity:.52}
.fi-pers-absent{opacity:.72}
.fi-pers-hostile .fp-txt b{color:#e8b0b0}
.fp-align{
  position:relative;display:block;width:96px;height:4px;border-radius:99px;margin-top:2px;
  background:linear-gradient(90deg,#7a2740,#4a4a6a 50%,#c9a83a);
}
.fp-align i{
  position:absolute;top:-3px;width:2px;height:10px;border-radius:2px;background:#fff;
  box-shadow:0 0 6px rgba(255,255,255,.75);margin-left:-1px;
}

/* --- pastilles de niveau --- */
.fi-pips{display:inline-flex;gap:3px;align-items:center}
.fi-pips i{
  width:7px;height:7px;border-radius:2px;display:block;
  background:rgba(255,255,255,.13);transition:background var(--t);
}
.fi-pips i.on{background:var(--accent);box-shadow:0 0 6px var(--accent-soft)}

/* --- étiquettes --- */
.fi-marques{display:flex;flex-wrap:wrap;gap:7px;margin-top:10px}
.fi-marques-lg{gap:8px;margin-top:0}
.fi-tag{
  display:inline-flex;align-items:center;gap:5px;
  padding:5px 11px;border-radius:99px;font-size:12.5px;
  color:var(--parchment-dim);background:rgba(255,255,255,.035);
  border:1px solid var(--hairline);
}
.fi-tag-mal{color:#e6a5a5;border-color:rgba(200,70,70,.3);background:rgba(180,40,40,.08)}
.fi-tag-on{color:var(--gold-bright);border-color:var(--line-hi);background:var(--accent-soft)}
.fi-tag-off{opacity:.42}
.fi-tag.fx-up{color:#8fd6a0;border-color:rgba(90,190,120,.3);background:rgba(60,160,90,.08)}
.fi-tag.fx-down{color:#e6a5a5;border-color:rgba(200,70,70,.3);background:rgba(180,40,40,.08)}
.fi-tag.fx-info{color:var(--parchment-dim)}

/* --- caractéristiques --- */
.fi-attr{padding:13px 0;border-bottom:1px solid var(--hairline)}
.fi-attr:last-child{border-bottom:none}
.fa-tete{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.fa-ico{font-size:17px}
.fa-tete b{font-size:15px;color:var(--parchment)}
.fa-val{
  margin-left:auto;font-family:var(--font-title);font-size:19px;color:var(--gold-bright);
}
.fa-tete em{
  font-family:var(--font-title);font-size:10px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--parchment-mute);font-style:normal;flex:0 0 auto;min-width:88px;text-align:right;
}
.fa-piste{height:6px;border-radius:99px;background:rgba(255,255,255,.07);margin:9px 0 7px;overflow:hidden}
.fa-piste i{display:block;height:100%;border-radius:99px;background:linear-gradient(90deg,#8a7020,var(--accent));transition:width .5s var(--ease)}
.fa-desc{margin:0;font-size:12.5px;line-height:1.5;color:var(--parchment-mute)}
.fi-attr-fort .fa-piste i{background:linear-gradient(90deg,var(--accent),#f0d98a)}
.fi-attr-fort .fa-tete b{color:var(--gold-bright)}
.fi-attr-faible .fa-piste i{background:linear-gradient(90deg,#5a4a6a,#8a7a9a)}

/* --- matières --- */
.fi-mats{display:flex;flex-direction:column}
.fi-mat{
  display:grid;grid-template-columns:22px minmax(0,1fr) 1fr 34px auto;
  align-items:center;gap:11px;padding:8px 0;border-bottom:1px solid var(--hairline);
}
.fi-mat:last-child{border-bottom:none}
.fm-ico{font-size:15px;text-align:center}
.fm-nom{font-size:13.5px;color:var(--parchment-dim);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fm-piste{height:5px;border-radius:99px;background:rgba(255,255,255,.07);overflow:hidden}
.fm-piste i{display:block;height:100%;border-radius:99px;background:linear-gradient(90deg,#8a7020,var(--accent))}
.fm-val{font-family:var(--font-title);font-size:13.5px;color:var(--gold-bright);text-align:right}
.fi-mat-top .fm-nom{color:var(--gold-bright)}
.fi-mat-top .fm-piste i{background:linear-gradient(90deg,var(--accent),#f0d98a)}

/* --- notes d’examen --- */
.fi-notes{display:flex;flex-direction:column}
.fi-note{
  display:flex;align-items:center;gap:10px;padding:8px 0;
  border-bottom:1px solid var(--hairline);
}
.fi-note:last-child{border-bottom:none}
.fi-note b{flex:1 1 auto;font-size:13.5px;font-weight:400;color:var(--parchment-dim)}
.fi-note em{
  font-family:var(--font-title);font-size:16px;font-style:normal;font-weight:700;
  width:34px;text-align:center;border-radius:7px;padding:2px 0;
  border:1px solid var(--hairline);background:rgba(255,255,255,.03);
}

/* --- sorts, objets, clubs --- */
.fi-sorts{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:9px}
.fi-sort{
  padding:9px 11px;border-radius:var(--r-sm);border:1px solid var(--hairline);
  background:rgba(255,255,255,.022);
}
.fi-sort b{display:block;font-size:13.5px;color:var(--parchment);font-weight:600}
.fi-sort i{display:block;font-size:11.5px;line-height:1.45;color:var(--parchment-mute);font-style:normal;margin-top:2px}
.fi-objs{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:10px}
.fi-obj{
  display:flex;gap:11px;padding:11px 12px;border-radius:var(--r-sm);
  border:1px solid var(--hairline);background:rgba(255,255,255,.022);
}
.fi-obj .fo-ico{font-size:20px;flex:0 0 auto;line-height:1.2}
.fi-obj .fo-txt{display:flex;flex-direction:column;min-width:0;line-height:1.35}
.fi-obj .fo-txt b{font-size:13.5px;color:var(--parchment)}
.fi-obj .fo-txt b em{font-style:normal;color:var(--gold-bright)}
.fi-obj .fo-txt i{font-size:11.5px;color:var(--parchment-mute);font-style:normal;margin-top:2px}
.fi-obj .fo-txt u{text-decoration:none;font-size:11.5px;color:#8fd6a0;margin-top:4px}
.fi-obj-illegal{border-color:rgba(200,70,70,.3);background:rgba(180,40,40,.055)}
.fi-club{padding:11px 0;border-bottom:1px solid var(--hairline)}
.fi-club:last-child{border-bottom:none}
.fcl-tete{display:flex;align-items:baseline;gap:9px;margin-bottom:8px}
.fcl-tete b{font-size:14.5px;color:var(--parchment)}

.fi-vide{
  margin:0;padding:14px 4px;text-align:center;font-style:italic;
  font-size:13.5px;color:var(--parchment-mute);
}

/* --- adaptation --- */
@media (max-width:1080px){
  .fi-grille{grid-template-columns:1fr}
  .fi-carte.fi-large{grid-column:auto}
}
@media (max-width:860px){
  .fi-vitales{grid-template-columns:repeat(2,1fr)}
  .fv-corps u{max-width:22ch}
}
@media (max-width:620px){
  .sh-id b{font-size:20px}
  .sh-crest{width:44px;height:44px;font-size:22px}
  .fi-jauge{grid-template-columns:20px 1fr 46px;gap:8px}
  .fj-piste{grid-column:1 / -1;order:3}
  .fi-mat{grid-template-columns:20px 1fr 34px;gap:8px}
  .fi-mat .fm-piste{grid-column:1 / -1;order:4}
  .fi-mat .fi-pips{grid-column:1 / -1;order:5}
  .fa-tete em{min-width:0}
}

/* ============================================================
   24. QUÊTES DU JOUR, ÉCLATS ET BOUTIQUE
   ------------------------------------------------------------
   Les Éclats ne se voient jamais en jeu : tout ce qui suit vit
   à l’accueil, sauf la carte d’accomplissement, qui glisse en
   surimpression sans couper la scène.
   ============================================================ */

/* --- le panneau de l’accueil : trois lignes et une porte --- */
.tl-mod-quetes .tl-mod-corps{display:flex;flex-direction:column;gap:11px;align-items:stretch}
.tl-mod-ico{font-size:15px;line-height:1;filter:saturate(.85)}
.tl-mod-tag-compte{
  color:var(--gold-bright);border-color:var(--line-hi);background:var(--accent-soft);
  font-size:11px;letter-spacing:.12em;
}
/* (Idem : la liste des quêtes de l.accueil vit en section 22.) */

/* --- la carte d’accomplissement, en jeu --- */
#quete-zone{
  position:fixed;right:18px;bottom:18px;z-index:400;
  display:flex;flex-direction:column;gap:10px;align-items:flex-end;
  pointer-events:none;
}
.qt-pop{
  display:flex;align-items:center;gap:13px;
  min-width:320px;max-width:400px;padding:13px 16px;
  border-radius:var(--r-md);border:1px solid var(--line-hi);
  background:linear-gradient(150deg,rgba(38,32,72,.97),rgba(15,12,32,.97));
  box-shadow:var(--e4),0 0 40px rgba(212,175,55,.18);
  transform:translateX(120%);opacity:0;
  transition:transform .46s var(--spring),opacity .3s var(--ease);
}
.qt-pop.on{transform:none;opacity:1}
.qt-pop.off{transform:translateX(120%);opacity:0}
.qt-pop-eclair{
  font-size:22px;color:var(--gold-bright);flex:0 0 auto;
  animation:qtPulse 1.1s var(--ease) infinite;
}
@keyframes qtPulse{
  0%,100%{transform:scale(1);opacity:.85}
  50%{transform:scale(1.22);opacity:1}
}
.qt-pop-corps{display:flex;flex-direction:column;min-width:0;gap:2px;flex:1 1 auto}
.qt-pop-sur{
  font-family:var(--font-title);font-size:9.5px;letter-spacing:.17em;text-transform:uppercase;
  color:var(--gold-bright);
}
.qt-pop-nom{font-size:15px;color:var(--parchment);line-height:1.2}
.qt-pop-desc{font-size:11.5px;color:var(--parchment-mute);line-height:1.4}
.qt-pop-gain{
  flex:0 0 auto;display:flex;flex-direction:column;align-items:center;gap:1px;
  padding:7px 12px;border-radius:10px;
  border:1px dashed rgba(212,175,55,.45);background:rgba(212,175,55,.07);
}
.qt-pop-gain i{font-style:normal;font-size:15px}
.qt-pop-gain b{font-family:var(--font-title);font-size:16px;color:var(--gold-bright)}
.qt-pop.q-facile{border-color:rgba(110,190,140,.5)}
.qt-pop.q-inter{border-color:rgba(110,165,215,.5)}
.qt-pop.q-difficile{border-color:rgba(215,165,75,.55)}
.qt-pop.q-expert{border-color:rgba(200,80,110,.6);box-shadow:var(--e4),0 0 46px rgba(200,80,110,.25)}

@media (max-width:620px){
  #quete-zone{left:12px;right:12px;bottom:12px;align-items:stretch}
  .qt-pop{min-width:0;max-width:none}
}

/* ============================================================================
   25. LA PAGE DES QUÊTES
   ----------------------------------------------------------------------------
   Refaite en 39, d’apres la maquette. Ne reste ici que le socle de l’ecran :
   la page tient sa propre mise en page, bandeau compris.
   ============================================================================ */
#screen-quetes{padding:0}

/* ============================================================================
   26. LA BOUTIQUE
   ----------------------------------------------------------------------------
   Refaite en 38, d’apres la maquette. Ne reste ici que le socle de l’ecran :
   la page tient sa propre mise en page, bandeau compris.
   ============================================================================ */
#screen-boutique{padding:0}

/* ============================================================================
   27. LES ÉCRANS SPÉCIAUX, REMIS AU DESSIN DE LA REFONTE
   ----------------------------------------------------------------------------
   Les sections 12 à 26 décrivent la mécanique de chaque écran : ce qui
   s’affiche, dans quel ordre, avec quelle information. Rien n’y a été
   retiré. Cette section-ci ne change que le dessin, et le remet dans la
   langue de la refonte :

     · aucun arrondi, aucun bombé, aucune ombre portée colorée
     · des filets de 1px, des équerres, du grain
     · Cinzel pour les titres et les chiffres, Cormorant pour les phrases,
       Jost très interlettré pour les libellés techniques
     · des crans segmentés à la place des barres lisses

   Elle vient en dernier pour une raison simple : le dessin doit pouvoir
   changer sans qu’on ait à toucher aux règles du jeu qui le précèdent.
   ============================================================================ */

/* ------------------------------------------------------------
   27.1 RÈGLES GÉNÉRALES : on coupe les angles, partout
   ------------------------------------------------------------ */
.modal,.toast,.notif,.hub-card,.choice-card,.coupe-card,.cbt-card,.cbt-act,
.qg-etat,.bq-fiche,.bq-ligne,.at-pas,.or-choix,.carte-vie,
.epi-volet,.par-bloc,.cv-pilier,.bulletin,.pensine-vie,.bq-rayon,
.coupe-glass,.cg-tube,.vs-block,.bilan-case,.sablier,.qt-ligne,
.grades-table td,.match-score,.cbt-arena,.cbt-log,.cbt-pv,.cbt-bar{
  border-radius:0;
}

/* ------------------------------------------------------------
   27.2 MODALE ET NOTIFICATIONS
   ------------------------------------------------------------ */
#modal-zone{background:rgba(4,3,16,.84);backdrop-filter:blur(7px)}
.modal{
  background:linear-gradient(165deg, rgba(28,22,56,.97), rgba(7,6,22,.99));
  border:1px solid rgba(230,200,119,.34);
  box-shadow:0 50px 110px -50px rgba(0,0,0,1), inset 0 1px 0 rgba(255,255,255,.06);
  animation:rise .3s var(--ease-out) both;
}
.modal::before{display:none}
/* L’équerre de la modale, comme sur la carte de scène. */
.modal::after{
  content:'';position:absolute;left:9px;top:9px;width:14px;height:14px;pointer-events:none;
  border-left:1px solid var(--line-or);border-top:1px solid var(--line-or);
}
.modal-body{padding:clamp(24px,3.4vh,40px) clamp(24px,3vw,42px) clamp(8px,1.4vh,14px)}
.modal-body .ev-title{
  font-family:var(--font-title);font-weight:600;font-size:clamp(20px,2vw,27px);
  letter-spacing:.05em;color:var(--gold-bright);margin-bottom:14px;
}
.modal-body .ev-text{font-size:clamp(16px,1.4vw,20px);line-height:1.55;color:rgba(232,228,248,.86)}
.modal-foot{
  padding:clamp(14px,2vh,20px) clamp(24px,3vw,42px) clamp(20px,2.6vh,28px);
  background:none;border-top:1px solid rgba(230,200,119,.18);
}
.modal-x{
  top:14px;right:14px;width:28px;height:28px;
  background:transparent;border:1px solid rgba(140,128,220,.3);
  color:rgba(226,220,245,.65);font-size:13px;
}
.modal-x:hover{border-color:rgba(230,200,119,.5);color:var(--gold-bright);background:transparent;transform:none}

/* Une notification est un panneau du jeu, pas une bulle de navigateur.
   Elle porte donc ce que porte n'importe quel panneau : l'angle vif, le
   filet de 1px, l'équerre en haut à gauche, le grain de papier, et les
   trois familles typographiques chacune à son emploi.

     · le libellé technique en Jost très interlettré dit de quoi on parle
     · le nom en Cinzel dit qui ou quoi
     · la phrase en Cormorant dit ce qui a changé
     · les crans segmentés, les mêmes que la colonne de gauche, disent
       où on en est

   Elle entre par la droite en se dévoilant depuis son filet, sans rebond
   ni changement d'échelle : un panneau se pose, il ne saute pas. */
#toast-zone{
  bottom:calc(var(--footbar-h) + 16px);right:20px;gap:9px;
  align-items:flex-end;max-width:none;
}
.toast,.notif{
  position:relative;overflow:hidden;
  display:flex;align-items:center;gap:13px;
  width:auto;max-width:402px;padding:11px 17px 11px 15px;
  background:linear-gradient(160deg, rgba(26,21,58,.97), rgba(7,6,22,.98));
  border:1px solid var(--line-or);border-left:2px solid var(--gold);
  font-family:var(--font-body);font-size:16px;line-height:1.2;
  color:rgba(232,227,245,.84);
  box-shadow:0 30px 70px -26px rgba(0,0,0,1), inset 0 1px 0 rgba(255,255,255,.05);
  backdrop-filter:blur(12px);
  animation:tstEntre .42s var(--ease-out) both;
}
@keyframes tstEntre{
  from{opacity:0;transform:translateX(28px);clip-path:inset(0 0 0 86%)}
  to{opacity:1;transform:none;clip-path:inset(0 0 0 0)}
}
.toast.out{
  opacity:0;transform:translateX(18px);
  transition:opacity .42s var(--ease-out), transform .42s var(--ease-out);
}
/* L'équerre, comme sur la carte de scène et sur la modale. */
.toast::after{
  content:'';position:absolute;left:6px;top:6px;width:11px;height:11px;pointer-events:none;
  border-left:1px solid rgba(230,200,119,.4);border-top:1px solid rgba(230,200,119,.4);
}
.toast > .grain{
  position:absolute;inset:0;pointer-events:none;opacity:.55;
  background-image:
    repeating-linear-gradient(51deg, rgba(255,255,255,.022) 0 1px, transparent 1px 3px),
    repeating-linear-gradient(-38deg, rgba(0,0,0,.05) 0 1px, transparent 1px 4px);
}
/* L'emblème dessiné de la colonne de gauche, ou l'écusson de la personne
   quand la notification parle de quelqu'un. Jamais un emoji. */
.tst-ico{position:relative;z-index:1;flex:none;display:flex;align-items:center}
.tst-ico .cb-embleme{width:24px;height:24px}
.tst-ico .cb-embleme svg{width:14px;height:14px}
.tst-ico .cb-ecu{width:26px;height:26px;display:block}
.tst-corps{position:relative;z-index:1;min-width:0;display:flex;flex-direction:column;gap:3px}
.tst-lab{
  font-family:var(--font-tech);font-size:8.5px;font-weight:500;
  letter-spacing:.3em;text-transform:uppercase;
  color:rgba(230,200,119,.6);
}
.tst-dit{
  font-family:var(--font-body);font-size:16.5px;line-height:1.2;
  color:rgba(232,227,245,.82);
}
/* Un nom propre ne se coupe pas : quand la phrase est trop longue, c'est
   elle qui passe à la ligne, jamais le nom en Cinzel. */
.tst-nom{
  font-family:var(--font-title);font-weight:700;font-size:14px;letter-spacing:.015em;
  color:var(--gold-bright);white-space:nowrap;
}
.tst-sep{color:rgba(230,200,119,.42);margin:0 3px;font-size:12px;vertical-align:1px}
.tst-crans{position:relative;z-index:1;margin-left:auto;padding-left:6px}

/* Les quatre tons. Le filet de gauche donne la couleur, le libellé la
   reprend en sourdine, et l'or reste à ce qui compte. */
.toast.tst-up{border-left-color:var(--up);border-color:rgba(127,216,168,.3)}
.toast.tst-up::after{border-color:rgba(127,216,168,.4)}
.toast.tst-up .tst-lab{color:rgba(127,216,168,.72)}
.toast.tst-down{border-left-color:var(--down);border-color:rgba(194,84,95,.34)}
.toast.tst-down::after{border-color:rgba(194,84,95,.42)}
.toast.tst-down .tst-lab{color:rgba(216,124,133,.8)}
.toast.tst-down .tst-nom{color:#e8a4ab}
.toast.tst-arcane{border-left-color:#8f7fd8;border-color:rgba(160,130,235,.34)}
.toast.tst-arcane::after{border-color:rgba(185,163,238,.42)}
.toast.tst-arcane .tst-lab{color:rgba(185,163,238,.76)}
.toast.tst-arcane .tst-nom{color:#cbb6f5}
.toast.tst-gold{border-left-color:var(--gold);border-color:var(--line-or)}

/* Sur un écran étroit, le panneau prend toute la largeur plutôt que de se
   serrer contre le bord droit : le nom en Cinzel ne doit jamais se couper. */
@media(max-width:640px){
  #toast-zone{left:14px;right:14px;align-items:stretch}
  .toast,.notif{max-width:none}
}

.notif-up{border-left-color:#5fbf8b}
.notif-down{border-left-color:#d4657c}
.notif-info{border-left-color:var(--reliques)}

/* ------------------------------------------------------------
   27.3 EXAMENS : le sablier, la mention, le relevé
   ------------------------------------------------------------ */
.exam-progress{
  font-family:var(--font-tech);font-size:10px;letter-spacing:.3em;text-transform:uppercase;
  color:rgba(230,200,119,.7);margin-bottom:18px;
}
.exam-progress::before{width:34px;background:rgba(230,200,119,.5)}
.exam-q{font-family:var(--font-title);font-weight:600;font-size:clamp(19px,1.8vw,24px);line-height:1.3;color:var(--gold-pale)}
.sablier{
  border:1px solid rgba(230,200,119,.2);background:rgba(9,7,28,.5);
  padding:9px 14px;margin-bottom:20px;
}
.sablier-piste{height:3px;background:rgba(140,128,220,.16)}
.sablier-piste i{border-radius:0;background:linear-gradient(90deg,#c99f45,var(--gold-bright))}
.sablier-compte{
  font-family:var(--font-tech);font-size:10px;letter-spacing:.2em;color:var(--parchment-mute);
}
.sablier-urgent{border-color:rgba(212,101,124,.45);background:rgba(212,101,124,.07)}
.sablier-urgent .sablier-piste i{background:linear-gradient(90deg,#8e2f3c,#d4657c)}
.sablier-urgent .sablier-compte{color:#e2879a}
/* La mention : un caractère unique, énorme, sans ombre criarde. */
.grade-big{
  font-family:var(--font-title);font-weight:600;
  font-size:clamp(56px,9vw,96px);line-height:.9;letter-spacing:.04em;
}
.grade-O{color:#5fbf8b;text-shadow:0 0 46px rgba(95,191,139,.35)}
.grade-E{color:var(--reliques);text-shadow:0 0 46px rgba(143,208,240,.3)}
.grade-A{color:var(--gold-warm);text-shadow:0 0 46px rgba(224,189,109,.3)}
.grade-P{color:#c98a4a}.grade-D{color:#d4657c}.grade-T{color:#8e2f3c}
.grades-table td{
  padding:12px 14px;border-bottom:1px solid rgba(140,128,220,.16);
  font-family:var(--font-body);font-size:18px;
}
.grades-table tr:hover td{background:rgba(230,200,119,.04)}
.grades-table td:last-child{font-family:var(--font-title);font-weight:600;font-size:20px}

/* ------------------------------------------------------------
   27.4 QUIDDITCH : le tableau d’affichage
   ------------------------------------------------------------ */
.match-score{
  border:1px solid rgba(230,200,119,.24);background:rgba(9,7,28,.55);
  box-shadow:none;padding:20px 26px;
  font-family:var(--font-title);font-weight:600;font-size:clamp(32px,5vw,54px);
  color:var(--gold-pale);text-shadow:0 0 40px rgba(230,200,119,.22);
}
.match-score .ms-team{
  font-family:var(--font-title);font-weight:400;font-size:clamp(15px,1.6vw,21px);
  letter-spacing:.14em;color:rgba(232,227,245,.8);
}
.commentary{
  font-family:var(--font-body);font-style:italic;font-size:19px;line-height:1.55;
  color:rgba(214,204,246,.75);padding-left:18px;border-left:1px solid rgba(230,200,119,.4);
}

/* ------------------------------------------------------------
   27.5 DUEL : l’arène, le journal, les familles de sorts
   ------------------------------------------------------------ */
.cbt-arena{
  border:1px solid rgba(230,200,119,.2);background:rgba(9,7,28,.5);box-shadow:none;
}
.cbt-fighter{background:rgba(12,10,34,.55);border:1px solid rgba(140,128,220,.2)}
.cbt-me{border-color:rgba(230,200,119,.3)}
.cbt-head{font-family:var(--font-title);font-weight:600;font-size:20px;color:var(--gold-pale)}
.cbt-pv{
  font-family:var(--font-title);font-weight:600;font-size:clamp(28px,3.4vw,42px);
  color:var(--gold-pale);
}
/* La barre de vie en crans : on compte ce qu’il reste, on ne l’estime pas.
   Le fantôme derrière garde le tracé de l’ancienne valeur, le temps d’un
   battement : c’est ce qui rend le coup encaissé lisible. */
.cbt-bar{position:relative;height:9px;background:rgba(140,128,220,.16);border:0;overflow:hidden}
.cbt-bar > div{
  position:relative;height:100%;border-radius:0;
  background:repeating-linear-gradient(90deg,#5fbf8b 0 7px, rgba(9,7,28,.85) 7px 10px);
  transition:width .45s var(--ease);
}
.cbt-bar > div.low{background:repeating-linear-gradient(90deg,#d4657c 0 7px, rgba(9,7,28,.85) 7px 10px)}
.cbt-ghost{
  position:absolute;left:0;top:0;bottom:0;
  background:repeating-linear-gradient(90deg,rgba(212,101,124,.55) 0 7px, rgba(9,7,28,.85) 7px 10px);
  transition:width .8s var(--ease) .25s;
}
.cbt-vs{
  border:1px solid rgba(230,200,119,.35);background:rgba(9,7,28,.7);
  font-family:var(--font-title);font-weight:600;color:var(--gold-warm);
}
.cbt-log{
  border:1px solid rgba(140,128,220,.2);background:rgba(7,5,24,.55);
  font-family:var(--font-body);font-size:18px;line-height:1.5;
}
.cbt-line{border-bottom:1px solid rgba(140,128,220,.12);padding:9px 0}
.cbt-line b{
  font-family:var(--font-tech);font-size:9px;letter-spacing:.24em;text-transform:uppercase;
  color:rgba(230,200,119,.6);font-weight:400;
}
.cbt-act{
  border:1px solid rgba(140,128,220,.24);
  background:linear-gradient(180deg, rgba(34,28,80,.44), rgba(14,11,38,.6));
  transition:border-color var(--t),background var(--t),transform var(--t);
}
.cbt-act:hover{border-color:rgba(230,200,119,.5);background:rgba(230,200,119,.06);transform:translateY(-2px)}
.cbt-act-body b{font-family:var(--font-title);font-weight:600;font-size:18px;color:var(--gold-pale)}
.cbt-act-tag{
  font-family:var(--font-tech);font-size:9px;letter-spacing:.18em;text-transform:uppercase;
  color:rgba(200,190,230,.5);
}
/* Franchir la ligne : les sorts noirs se signalent en rouge, et restent
   utilisables. Le jeu prévient, il n’interdit pas. */
.cbt-act.cbt-noir,.cbt-recap-noir{
  border-color:rgba(142,47,60,.6);
  background:linear-gradient(180deg, rgba(80,20,32,.4), rgba(20,8,18,.7));
}
.cbt-act.cbt-noir:hover{border-color:rgba(212,101,124,.75);background:rgba(142,47,60,.28)}
.cbt-st{
  font-family:var(--font-tech);font-size:9px;letter-spacing:.2em;text-transform:uppercase;
  border:1px solid rgba(140,128,220,.3);background:rgba(140,128,220,.08);
  padding:4px 9px;border-radius:0;
}

/* ------------------------------------------------------------
   27.6 COUPE DES QUATRE MAISONS
   ------------------------------------------------------------ */
.coupe-card{border:1px solid rgba(230,200,119,.2);background:var(--carte-fond);box-shadow:none}
.coupe-row{
  border:1px solid rgba(140,128,220,.2);background:rgba(12,10,34,.42);
  padding:12px 16px;border-radius:0;
}
.coupe-row.coupe-mine,.coupe-row.coupe-me{border-color:rgba(230,200,119,.45);background:rgba(230,200,119,.06)}
.coupe-nom em{font-style:normal;font-size:.72em;letter-spacing:.16em;color:rgba(200,190,230,.55)}
.coupe-rank sup{font-size:.6em;letter-spacing:.1em}
.coupe-blason{width:clamp(20px,2.4vh,26px);height:clamp(20px,2.4vh,26px);object-fit:contain}
.coupe-rank{
  font-family:var(--font-title);font-weight:600;font-size:19px;color:rgba(230,200,119,.7);
}
.coupe-nom{
  font-family:var(--font-title);font-weight:600;font-size:clamp(17px,1.7vw,23px);
  letter-spacing:.08em;text-transform:uppercase;color:rgba(240,236,250,.9);
}
.coupe-pts{
  font-family:var(--font-title);font-weight:600;font-size:clamp(20px,2.2vw,30px);
  color:var(--gold-pale);font-variant-numeric:tabular-nums;
}
.coupe-bar{height:8px;background:rgba(140,128,220,.16);border-radius:0;overflow:hidden}
.coupe-bar > i,.coupe-bar > div,.coupe-bar > span{border-radius:0}
.house-bar-gryffondor{background:linear-gradient(90deg,#7f1d1d,#c2545f)}
.house-bar-serpentard{background:linear-gradient(90deg,#14532d,#4fa88a)}
.house-bar-serdaigle{background:linear-gradient(90deg,#1e3a8a,#7fb3e0)}
.house-bar-poufsouffle{background:linear-gradient(90deg,#78350f,#e0bd6d)}
.coupe-banner{
  font-family:var(--font-title);font-weight:600;
  font-size:clamp(26px,3.6vw,48px);letter-spacing:.08em;text-transform:uppercase;
  color:var(--gold-pale);text-shadow:0 0 50px rgba(230,200,119,.3);
}
.cg-tube{border:1px solid rgba(140,128,220,.28);background:rgba(9,7,28,.5)}
.cg-label{
  font-family:var(--font-tech);font-size:9px;letter-spacing:.2em;text-transform:uppercase;
  color:rgba(200,190,230,.5);
}

/* ------------------------------------------------------------
   27.7 BILAN D’ANNÉE, ÉPILOGUE, PENSINE
   ------------------------------------------------------------ */
.bilan-grid{gap:clamp(10px,1.4vw,16px)}
.bilan-case{
  border:1px solid rgba(140,128,220,.22);background:rgba(12,10,34,.45);
  padding:16px 18px;
}
.bilan-case b{
  font-family:var(--font-title);font-weight:600;font-size:clamp(26px,3vw,38px);
  color:var(--gold-pale);line-height:1;
}
.bilan-case i,.bilan-case em{
  font-family:var(--font-tech);font-size:9px;letter-spacing:.22em;text-transform:uppercase;
  color:rgba(200,190,230,.5);font-style:normal;
}
.epi-title,.ep-title{
  font-family:var(--font-title);font-weight:600;
  font-size:clamp(34px,5vw,64px);line-height:1;color:var(--gold-pale);
  text-shadow:0 0 60px rgba(230,200,119,.25);background:none;
}
.ep-sub,.game-subtitle{
  font-family:var(--font-body);font-size:20px;font-style:italic;color:rgba(200,190,230,.62);
}
.epi-section{
  border:0;border-top:1px solid rgba(230,200,119,.2);border-radius:0;
  background:none;padding:22px 0 0;margin-top:26px;
}
.cv-pilier{border:1px solid rgba(140,128,220,.2);background:rgba(12,10,34,.4);padding:16px 18px}
.cv-p-tete{font-family:var(--font-title);font-weight:600;font-size:19px;color:var(--gold-pale)}
/* Le pilier en crans, comme sur la maquette d’épilogue. */
.cv-p-piste{height:6px;background:rgba(140,128,220,.16);border-radius:0;overflow:hidden}
.cv-p-piste > i,.cv-p-piste > div,.cv-p-piste > span{
  border-radius:0;
  background:repeating-linear-gradient(90deg,var(--gold) 0 8px, rgba(9,7,28,.9) 8px 11px);
}
.cv-rang{
  font-family:var(--font-title);font-weight:600;font-size:clamp(48px,7vw,84px);
  color:var(--gold-pale);line-height:.9;
}
.cv-mot{font-family:var(--font-body);font-size:20px;font-style:italic;color:rgba(214,204,246,.78)}
.pensine-vie,.carte-vie,.par-bloc,.epi-volet{
  border:1px solid rgba(140,128,220,.2);background:rgba(12,10,34,.45);
}
.graines-list li{
  border-bottom:1px solid rgba(140,128,220,.14);padding:10px 0;
  font-family:var(--font-body);font-size:18px;
}

/* ------------------------------------------------------------
   27.8 ATELIERS ET ORIENTATION
   ------------------------------------------------------------ */
.atelier-rail{gap:8px}
.at-pas{
  border:1px solid rgba(140,128,220,.24);background:rgba(12,10,34,.45);
  padding:14px 16px;
}
.at-pas.on{border-color:rgba(230,200,119,.5);background:rgba(230,200,119,.07)}
.at-compte{
  font-family:var(--font-tech);font-size:9px;letter-spacing:.24em;text-transform:uppercase;
  color:rgba(230,200,119,.65);
}
.av-qualite{
  font-family:var(--font-title);font-weight:600;font-size:clamp(30px,4vw,52px);
  color:var(--gold-pale);
}
.av-label{
  font-family:var(--font-tech);font-size:10px;letter-spacing:.26em;text-transform:uppercase;
  color:var(--parchment-mute);
}
.or-choix{
  border:1px solid rgba(140,128,220,.24);
  background:linear-gradient(180deg, rgba(34,28,80,.44), rgba(14,11,38,.6));
}
.or-choix:hover{border-color:rgba(230,200,119,.5);background:rgba(230,200,119,.06)}
.or-tete{font-family:var(--font-title);font-weight:600;font-size:19px;color:var(--gold-pale)}
.or-label{
  font-family:var(--font-tech);font-size:9px;letter-spacing:.22em;text-transform:uppercase;
  color:rgba(230,200,119,.65);
}
.or-txt,.or-note{font-family:var(--font-body);font-size:18px;line-height:1.45;color:rgba(226,220,245,.75)}
.or-regret{font-style:italic;color:rgba(200,190,230,.55)}

/* ------------------------------------------------------------
   27.9 QUÊTES ET BOUTIQUE
   ------------------------------------------------------------
   Les deux écrans sont partis en 38 et 39, refaits d’après les
   maquettes : ils tiennent leur dessin eux-mêmes, et ne partagent
   plus rien avec le reste. Les quêtes de l’accueil, elles, sont
   décrites en section 22 avec le reste de l’écran titre.
   ------------------------------------------------------------ */

/* ------------------------------------------------------------
   27.10 CE QUI TRAÎNAIT ENCORE
   ------------------------------------------------------------ */
.fi-carte{
  border:1px solid rgba(140,128,220,.2);background:rgba(12,10,34,.45);
  border-radius:0;box-shadow:none;
}
.fi-tete h3{font-family:var(--font-title);font-weight:600;font-size:19px;color:var(--gold-pale)}
.fi-fait b{font-family:var(--font-title);font-weight:600;color:var(--gold-warm)}
.stars{color:var(--gold-warm);font-size:11px;letter-spacing:1.5px;text-shadow:none}
.stars-off{color:rgba(140,128,220,.4);opacity:.6}
.ev-art{border-radius:0}
kbd{font-family:var(--font-tech)}

/* ------------------------------------------------------------
   27.11 LA CONVOCATION D’EXAMEN
   ------------------------------------------------------------
   B.U.S.E. et A.S.P.I.C. ne sont pas des scenes : ce sont des
   documents officiels. Le sigle se lit lettre par lettre, dans des
   cases, comme sur une convocation du Ministere.
   ------------------------------------------------------------ */
/* La convocation doit tenir d’un seul tenant : on ne fait pas défiler un
   document officiel. Les marges se resserrent avant que le texte ne
   rétrécisse, et le texte ne descend jamais sous 16px. */
.exam-conv .ev-corps{
  text-align:center;
  padding:clamp(20px,3.2vh,44px) clamp(28px,5vw,80px);
}
.exam-conv .exam-prose p{font-size:clamp(16px,1.3vw,19px);line-height:1.55;margin-bottom:12px}
.exam-conv .exam-avert{font-size:16px;padding:11px 16px;margin-top:clamp(10px,1.6vh,18px)}
.exam-conv .exam-titre{font-size:clamp(22px,2.4vw,34px);margin-top:clamp(10px,1.6vh,18px)}
.exam-conv .exam-lettres{margin-top:clamp(12px,2vh,20px)}
.exam-conv .exam-lettres span{width:clamp(30px,3.4vh,40px);height:clamp(30px,3.4vh,40px);font-size:clamp(15px,1.8vh,20px)}
.exam-conv .exam-session{margin-top:clamp(8px,1.4vh,14px)}
.exam-conv .exam-prose{margin-top:clamp(12px,2vh,22px)}
.exam-conv .exam-faits{margin-top:clamp(12px,2vh,22px)}
.exam-conv .exam-fait{padding:11px 16px}
.exam-conv .exam-pied{margin-top:clamp(12px,2vh,22px)}
.exam-sceau{display:flex;align-items:center;justify-content:center;gap:clamp(12px,1.6vw,22px)}
/* La marque du Ministère est un dessin, pas une lettre dans un cadre :
   deux M imbriqués sous une couronne, à l’or mat. Elle ne porte aucune
   bordure, elle porte son ombre. */
.exam-sceau-m{
  flex:none;width:clamp(40px,4vw,56px);height:clamp(40px,4vw,56px);
  object-fit:contain;opacity:.9;
  filter:drop-shadow(0 4px 12px rgba(0,0,0,.7));
  border:0;background:none;
}
.rl-sceau .exam-sceau-m{width:clamp(32px,3vw,42px);height:clamp(32px,3vw,42px)}
.exam-sceau-txt{display:flex;flex-direction:column;gap:3px;text-align:left}
.exam-sceau-txt b{
  font-family:var(--font-tech);font-size:10px;letter-spacing:.3em;text-transform:uppercase;
  color:rgba(244,221,160,.9);font-weight:400;
}
.exam-sceau-txt i{
  font-style:normal;font-family:var(--font-tech);font-size:9px;letter-spacing:.26em;
  text-transform:uppercase;color:rgba(200,190,230,.45);
}
.exam-lettres{display:flex;justify-content:center;gap:10px;margin-top:clamp(18px,2.6vh,28px)}
.exam-lettres span{
  width:clamp(34px,4vh,44px);height:clamp(34px,4vh,44px);
  display:flex;align-items:center;justify-content:center;
  border:1px solid rgba(230,200,119,.3);background:rgba(230,200,119,.06);
  font-family:var(--font-title);font-weight:600;font-size:clamp(17px,2vh,22px);
  color:var(--gold-pale);
}
.exam-titre{
  margin:clamp(14px,2.2vh,22px) auto 0;max-width:20ch;
  font-family:var(--font-title);font-weight:600;font-size:clamp(24px,2.8vw,38px);
  line-height:1.14;color:var(--gold-pale);text-shadow:0 0 48px rgba(230,200,119,.2);
}
.exam-session{
  display:flex;align-items:center;justify-content:center;gap:14px;
  margin-top:clamp(12px,2vh,18px);
  font-family:var(--font-tech);font-size:9px;letter-spacing:.34em;text-transform:uppercase;
  color:rgba(230,200,119,.7);
}
.exam-session i{display:block;width:40px;height:1px;background:rgba(230,200,119,.35)}
/* Le corps sur deux colonnes, avec une lettrine sur le premier bloc. */
.exam-prose{
  columns:2;column-gap:clamp(24px,4vw,56px);text-align:left;
  margin-top:clamp(18px,2.8vh,28px);
}
@media(max-width:900px){ .exam-prose{columns:1} }
.exam-prose p{
  font-family:var(--font-body);font-size:clamp(17px,1.4vw,20px);line-height:1.6;
  color:rgba(226,220,245,.8);margin:0 0 14px;break-inside:avoid;
}
.exam-prose p b{color:var(--gold-pale);font-weight:600}
.exam-p1::first-letter{
  float:left;font-family:var(--font-title);font-weight:600;
  font-size:3.1em;line-height:.82;padding:4px 10px 0 0;color:var(--gold-warm);
}
.exam-avert{
  display:flex;align-items:flex-start;gap:14px;text-align:left;
  margin-top:clamp(14px,2.2vh,22px);padding:13px 18px;
  border:1px solid rgba(230,200,119,.26);background:rgba(230,200,119,.05);
  font-family:var(--font-body);font-size:17px;font-style:italic;line-height:1.5;
  color:rgba(226,220,245,.78);
}
/* Le sablier de l’avertissement est dessiné : deux triangles opposés,
   deux traverses. Le caractère typographique qui servait avant n’existe
   pas dans les trois familles du jeu et tombait sur une police de
   secours différente à chaque machine. */
.exam-avert-ico{
  flex:none;margin-top:4px;display:flex;align-items:center;justify-content:center;
  font-style:normal;font-family:var(--font-title);font-size:15px;
  color:#e0bd6d;
}
.exam-avert-ico svg{display:block}
.exam-avert-mal{border-color:rgba(212,101,124,.4);background:rgba(212,101,124,.06)}
.exam-avert-mal .exam-avert-ico{color:#e2879a}
.exam-faits{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,160px),1fr));
  gap:0;margin-top:clamp(18px,2.8vh,28px);text-align:left;
  border-top:1px solid rgba(140,128,220,.2);border-bottom:1px solid rgba(140,128,220,.2);
}
.exam-fait{
  display:flex;flex-direction:column;gap:6px;padding:14px 18px;
  border-left:1px solid rgba(140,128,220,.14);
}
.exam-fait:first-child{border-left:0}
.exam-fait span{
  font-family:var(--font-tech);font-size:9px;letter-spacing:.24em;text-transform:uppercase;
  color:rgba(200,190,230,.45);
}
.exam-fait b{font-family:var(--font-title);font-weight:400;font-size:17px;color:rgba(240,236,250,.9)}
.exam-aucune{color:#d4657c}
.exam-pied{
  display:flex;align-items:flex-end;justify-content:space-between;gap:22px;flex-wrap:wrap;
  margin-top:clamp(18px,2.8vh,28px);text-align:left;
}
.exam-signature{display:flex;flex-direction:column;gap:4px;min-width:0}
.exam-signature b{font-family:var(--font-body);font-style:italic;font-size:20px;font-weight:400;color:rgba(232,227,245,.85)}
.exam-signature i{
  font-style:normal;font-family:var(--font-tech);font-size:9px;letter-spacing:.22em;
  text-transform:uppercase;color:rgba(200,190,230,.42);
}
.exam-signature em{
  align-self:flex-start;margin-top:6px;font-style:normal;
  font-family:var(--font-tech);font-size:9px;letter-spacing:.24em;text-transform:uppercase;
  color:rgba(230,200,119,.7);padding:4px 10px;border:1px solid rgba(230,200,119,.3);
}
/* La signature à gauche, la porte à droite, sur la même ligne : c’est un
   bas de document officiel, pas une pile. La porte prend les deux tiers. */
.exam-signature{flex:1 1 210px;min-width:180px}
.exam-pied .btn-gold{flex:2 1 340px;text-align:center}
/* Le cachet de serment penche : il a été apposé à la main. Il déborde
   donc un peu de sa ligne, et il lui faut la place de pencher. */
.exam-signature em{
  transform:rotate(-7deg);transform-origin:left center;
  margin-bottom:6px;padding:6px 12px 5px;
  border-color:rgba(226,132,140,.5);color:rgba(226,132,140,.78);
}
.rl-pied .exam-signature em{border-color:rgba(230,200,119,.5);color:rgba(230,200,119,.8)}

/* ------------------------------------------------------------
   27.12 LE CHOIX DE MÉTIER
   ------------------------------------------------------------
   Refait en 40, d’après la maquette. L’écran tient son dessin
   lui-même, et ne partage plus rien avec le reste.
   ------------------------------------------------------------ */
/* ------------------------------------------------------------
   27.13 LE BILAN DE FIN D’ANNÉE
   ------------------------------------------------------------
   Refait en 42, d’après la maquette. L’écran tient son dessin
   lui-même, et ne partage plus rien avec le reste.
   ------------------------------------------------------------ */

/* ------------------------------------------------------------
   27.14 L’ÉPILOGUE
   ------------------------------------------------------------
   Un dossier clos, pas une carte de fin. Le nom occupe la page, la
   note se lit dans un encadré à droite, et les six piliers en crans
   disent d’où elle vient.
   ------------------------------------------------------------ */
#screen-epilogue{overflow-y:auto}
.epilogue-wrap{
  width:100%;max-width:1240px;margin:0 auto;
  padding:0 clamp(20px,4vw,56px) clamp(30px,5vh,60px);
}
.epi-entete{
  display:flex;align-items:center;justify-content:space-between;gap:20px;
  padding:clamp(16px,2.6vh,26px) 0;border-bottom:1px solid rgba(140,128,220,.18);
}
.epi-ministere{
  display:flex;align-items:center;gap:12px;
  font-family:var(--font-tech);font-size:9px;letter-spacing:.28em;text-transform:uppercase;
  color:rgba(200,190,230,.5);
}
.epi-m{
  flex:none;width:24px;height:24px;display:flex;align-items:center;justify-content:center;
  font-family:var(--font-title);font-weight:700;font-size:14px;color:rgba(230,200,119,.8);
  border:1px solid rgba(230,200,119,.35);
}
.epi-date{
  font-family:var(--font-tech);font-size:9px;letter-spacing:.28em;text-transform:uppercase;
  color:rgba(200,190,230,.45);
}
.epi-haut{
  display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);
  gap:clamp(20px,3vw,48px);align-items:center;
  padding:clamp(22px,4vh,48px) 0;
}
@media(max-width:900px){ .epi-haut{grid-template-columns:1fr} }
.epi-promo{
  display:flex;align-items:center;gap:11px;
  font-family:var(--font-tech);font-size:9px;letter-spacing:.28em;text-transform:uppercase;
  color:rgba(200,190,230,.5);
}
.epi-crest{flex:none;width:22px;height:22px;display:block}
.epi-crest img{width:100%;height:100%;object-fit:contain}
.epi-title{
  margin:clamp(12px,2vh,20px) 0 0;
  font-family:var(--font-title);font-weight:600;
  font-size:clamp(38px,5.4vw,80px);line-height:.98;color:var(--gold-pale);
  text-shadow:0 0 60px rgba(230,200,119,.25);background:none;
}
.epi-age{display:flex;align-items:center;gap:16px;margin-top:clamp(10px,1.8vh,18px);flex-wrap:wrap}
.epi-age b{
  font-family:var(--font-title);font-weight:400;font-size:clamp(17px,1.8vw,24px);
  letter-spacing:.1em;text-transform:uppercase;color:rgba(232,227,245,.82);
}
.epi-age i{display:block;width:34px;height:1px;background:rgba(230,200,119,.45)}
.epi-age em{font-style:italic;font-family:var(--font-body);font-size:clamp(17px,1.6vw,22px);color:rgba(214,204,246,.78)}
.epi-filiation{
  margin:12px 0 0;font-family:var(--font-body);font-size:18px;font-style:italic;
  color:rgba(200,190,230,.55);
}
.epi-note{
  display:flex;align-items:stretch;gap:0;
  border:1px solid rgba(230,200,119,.28);background:rgba(12,10,34,.5);
}
.epi-note-chiffre{
  flex:none;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;
  padding:clamp(16px,2.4vh,26px) clamp(16px,2vw,28px);
  border-right:1px solid rgba(230,200,119,.22);
}
.epi-note-chiffre b{
  font-family:var(--font-title);font-weight:600;font-size:clamp(38px,4.6vw,64px);line-height:.9;
  color:var(--gold-warm);text-shadow:0 0 40px rgba(230,200,119,.3);
}
.epi-note-chiffre i{
  font-style:normal;font-family:var(--font-tech);font-size:8px;letter-spacing:.24em;
  text-transform:uppercase;color:rgba(200,190,230,.45);
}
.epi-note-txt{display:flex;flex-direction:column;gap:7px;padding:clamp(16px,2.4vh,26px) clamp(16px,2vw,24px);min-width:0}
.epi-note-txt b{font-family:var(--font-title);font-weight:600;font-size:clamp(19px,2vw,26px);color:var(--gold-pale)}
.epi-note-txt p{margin:0;font-family:var(--font-body);font-size:18px;font-style:italic;line-height:1.45;color:rgba(214,204,246,.75)}
.epi-note-txt em{
  font-style:normal;font-family:var(--font-tech);font-size:9px;letter-spacing:.2em;
  text-transform:uppercase;color:rgba(230,200,119,.65);
}
.epi-lab{
  display:block;font-family:var(--font-tech);font-size:9px;letter-spacing:.3em;
  text-transform:uppercase;color:rgba(230,200,119,.65);
  padding-bottom:10px;border-bottom:1px solid rgba(140,128,220,.18);margin-bottom:clamp(16px,2.4vh,24px);
}
.epi-bilan,.epi-choixpeau{margin-top:clamp(20px,3.4vh,40px)}
.cv-piliers{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,230px),1fr));
  gap:clamp(16px,2.4vw,36px);
}
.cv-pilier{border:0;background:none;padding:0}
.cv-p-tete{display:flex;align-items:baseline;justify-content:space-between;gap:12px}
.cv-p-tete span{
  font-family:var(--font-title);font-weight:600;font-size:19px;letter-spacing:.04em;
  color:rgba(240,236,250,.9);
}
.cv-p-tete b{font-family:var(--font-title);font-weight:600;font-size:22px;color:var(--gold-warm)}
.cv-p-tete b i{font-style:normal;font-size:.6em;color:rgba(200,190,230,.4)}
.cv-p-piste{height:6px;margin-top:9px}
.cv-p-detail{
  margin:10px 0 0;font-family:var(--font-body);font-size:17px;line-height:1.45;
  color:rgba(200,190,230,.62);
}
.epi-mot{
  margin:0;font-family:var(--font-body);font-size:clamp(18px,1.6vw,22px);font-style:italic;
  line-height:1.55;color:rgba(214,204,246,.8);max-width:74ch;
}
.epi-align{margin-top:clamp(14px,2.4vh,22px)}
.epi-align-piste{
  position:relative;display:block;height:5px;
  background:linear-gradient(90deg, var(--evil) 0%, rgba(60,50,110,.5) 50%, var(--good) 100%);
}
.epi-align-piste b{
  position:absolute;top:-5px;width:2px;height:15px;transform:translateX(-50%);
  background:var(--gold-bright);box-shadow:0 0 10px rgba(244,221,160,.9);
}
.epi-align-bornes{
  display:flex;justify-content:space-between;margin-top:9px;
  font-family:var(--font-tech);font-size:9px;letter-spacing:.24em;text-transform:uppercase;
  color:rgba(200,190,230,.4);
}

/* ------------------------------------------------------------
   27.15 LES GRANDES SCÈNES
   ------------------------------------------------------------
   Une poignée de moments qu’on ne rejoue pas : la bataille, le
   procès, les noces, une naissance, la première nuit à Azkaban.
   Même carte que les autres scènes, mais un en-tête chiffré et
   deux colonnes de contexte sous le texte.
   ------------------------------------------------------------ */
.event-grande .ev-corps{padding:clamp(22px,3.6vh,48px) clamp(26px,4vw,64px)}
.gr-tete{display:flex;align-items:baseline;justify-content:space-between;gap:20px;flex-wrap:wrap}
.gr-kicker{
  display:flex;align-items:center;gap:14px;min-width:0;
  font-family:var(--font-tech);font-size:10px;letter-spacing:.34em;text-transform:uppercase;
  color:rgba(230,200,119,.75);
}
.gr-kicker i{display:block;width:34px;height:1px;flex:none;background:rgba(230,200,119,.6)}
.gr-note{
  font-family:var(--font-tech);font-size:9px;letter-spacing:.26em;text-transform:uppercase;
  color:rgba(200,190,230,.45);white-space:nowrap;
}
.gr-titre{
  margin:clamp(12px,2vh,20px) 0 0;
  font-size:clamp(28px,3.4vw,48px);line-height:1.06;
}
.gr-chiffres{
  display:flex;flex-wrap:wrap;gap:clamp(18px,3vw,44px);
  margin-top:clamp(14px,2.2vh,22px);
}
.gr-chiffre{display:flex;flex-direction:column;gap:4px;min-width:0}
.gr-chiffre b{
  font-family:var(--font-title);font-weight:600;font-size:clamp(24px,2.8vw,38px);line-height:1;
  color:var(--gold-warm);
}
.gr-chiffre span{
  font-family:var(--font-tech);font-size:9px;letter-spacing:.24em;text-transform:uppercase;
  color:rgba(200,190,230,.5);
}
.gr-chiffre em{
  font-style:normal;font-family:var(--font-tech);font-size:8px;letter-spacing:.2em;
  text-transform:uppercase;color:rgba(200,190,230,.35);
}

.gr-cols{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr));
  gap:clamp(18px,3vw,44px);margin-top:clamp(18px,2.8vh,28px);
  padding-top:clamp(14px,2.2vh,22px);border-top:1px solid rgba(140,128,220,.18);
}
.gr-col{display:flex;flex-direction:column;min-width:0}
.gr-col-titre{
  font-family:var(--font-tech);font-size:9px;letter-spacing:.28em;text-transform:uppercase;
  color:rgba(230,200,119,.65);padding-bottom:8px;
}
.gr-ligne,.gr-gens{
  display:flex;align-items:center;gap:12px;padding:9px 0;
  border-bottom:1px solid rgba(140,128,220,.12);
}
.gr-ligne-nom{flex:1;min-width:0;font-family:var(--font-body);font-size:18px;color:rgba(232,227,245,.85)}
.gr-ligne-val{
  flex:none;font-family:var(--font-title);font-weight:600;font-size:17px;
  color:var(--gold-warm);font-variant-numeric:tabular-nums;
}
.gr-pips{display:flex;gap:3px;flex:none}
.gr-pips i{width:9px;height:9px;display:block;background:rgba(140,128,220,.2)}
.gr-pips i.on{background:var(--gold)}
.gr-gens-puce{
  flex:none;width:16px;height:16px;
  border:1px solid rgba(230,200,119,.4);background:rgba(230,200,119,.07);
}
.gr-gens-nom{flex:1;min-width:0;font-family:var(--font-body);font-size:18px;color:rgba(232,227,245,.85)}
.gr-gens-role{
  flex:none;font-family:var(--font-tech);font-size:8px;letter-spacing:.22em;text-transform:uppercase;
  color:rgba(200,190,230,.42);
}
/* Une figure barrée est une figure qu’on ne reverra pas. */
.gr-gens.mort .gr-gens-nom{
  text-decoration:line-through;text-decoration-color:rgba(180,172,205,.45);
  text-decoration-thickness:1px;color:rgba(214,208,232,.5);
}
.gr-gens.mort .gr-gens-puce{border-color:rgba(180,172,205,.3);background:transparent}
.gr-mot{
  margin:14px 0 0;font-family:var(--font-body);font-size:17px;font-style:italic;line-height:1.5;
  color:rgba(200,190,230,.55);
}


/* ------------------------------------------------------------
   28. L.ACCUEIL SUR UN ÉCRAN COURT
   ------------------------------------------------------------
   Trois crans de resserrement, en toute fin de feuille pour qu.ils
   passent après les définitions qu.ils corrigent. Aucune quête,
   aucun trait imposé, aucun compteur ne disparaît : ce sont les
   respirations qui rétrécissent, jamais l.information.
   ------------------------------------------------------------ */

/* Premier cran, et il ne se déclenche pas sur la hauteur. Entre 940 et
   1100 px de haut sur un écran large, le titre a déjà pris sa taille
   maximale alors que la hauteur, elle, n’a pas suivi : la colonne de
   gauche réclame une centaine de pixels de plus qu’elle n’en a, et ce
   sont les trois compteurs du bas qui sortaient du cadre sans un mot.
   À 1440 par 900, la maquette rend le titre à 92 px : c’est exactement
   ce qu’on lui rend ici. */
@media(min-height:941px) and (max-height:1100px){
  .tl-title{font-size:clamp(52px,5.4vw,92px)}
  .tl-eyebrow-ligne{margin-bottom:clamp(10px,1.4vh,16px)}
  .tl-tagline{margin-top:clamp(12px,1.7vh,18px)}
  .tl-card-save{margin-top:clamp(14px,1.9vh,22px)}
  .tl-portes{margin-top:clamp(14px,2vh,24px)}
  .tl-compteurs{margin-top:clamp(16px,2.2vh,26px);padding-top:clamp(11px,1.6vh,18px)}
}

@media(max-height:940px){
  /* Sur un écran court, on gagne d’abord sur le décor et sur le chrome,
     pas sur le contenu : l’invitation du bas s’efface, l’en-tête et le
     pied se resserrent, et les panneaux du jour tiennent enfin ensemble
     sans qu’aucun ne soit coupé. */
  .tl-attend{display:none}
  .tl-entete{padding-top:clamp(10px,1.6vh,18px);padding-bottom:clamp(10px,1.6vh,18px)}
  /* La bande du pied n’a pas de marge à elle : tout se joue sur sa
     doublure, sinon le filet du haut se décollerait du contenu. */
  .tl-pied-inner{padding-top:clamp(8px,1.4vh,14px);padding-bottom:clamp(8px,1.4vh,14px)}
  .tl-content{padding-bottom:clamp(8px,1.4vh,18px)}
  .tl-chips{gap:6px}

  .tl-tagline{margin-top:clamp(12px,2vh,18px);font-size:clamp(18px,1.5vw,21px)}
  .tl-tagline-mut{margin-top:10px;font-size:clamp(16px,1.3vw,19px)}
  .tl-card-save{margin-top:clamp(14px,2vh,20px);padding:13px 18px}
  .tl-portes{margin-top:clamp(14px,2.2vh,24px)}
  .tl-jouer,.tl-duel{padding:clamp(14px,2.2vh,20px) clamp(20px,2.6vw,36px)}
  .tl-compteurs{margin-top:clamp(16px,2.6vh,28px);padding-top:clamp(12px,2vh,18px)}
  .tl-compteur b{font-size:26px}
  .tl-eyebrow-ligne{margin-bottom:clamp(10px,1.8vh,16px)}
  /* La colonne de droite se resserre autant que la gauche : les panneaux
     du jour doivent tenir ensemble, sans qu’aucun bouton ne passe sous la
     ligne de flottaison. */
  .tl-modules{gap:clamp(6px,1vh,10px)}
  .tl-mod{padding:clamp(11px,1.7vh,16px) clamp(15px,1.7vw,22px)}
  .tl-mod-corps{margin-top:8px;gap:8px}
  .tl-mod-btn{padding:11px 0}
  .tl-chip{padding:6px 11px;font-size:15px}
  .tl-mod-txt{font-size:17px}
  /* Les quêtes gardent leurs douze crans et leur compte : ce sont les
     respirations autour qui rétrécissent, jamais l’information. */
  .qt-serie{font-size:16px;margin-bottom:0}
  .qt-ligne{padding:9px 0 8px}
  .qt-nom{font-size:17px}
  .qt-crans{margin-top:8px}
  .qt-plus{margin-top:10px}
  .tl-mod-tag-compte{padding:4px 9px}
}
@media(max-height:820px){
  /* Dernier cran : à 768 px de haut, l’écran est plus court que la
     maquette. On serre encore d’un demi-cran, et les deux panneaux
     restent entiers, lisibles, et au-dessus de la ligne de flottaison. */
  .tl-mod{padding:11px 16px}
  .tl-modules{gap:8px}
  .tl-mod-corps{margin-top:8px;gap:8px}
  .tl-mod-btn{padding:10px 0}
  .tl-mod-btn > span:not(.eq){font-size:13px;letter-spacing:.24em;text-indent:.24em}
  .tl-chip{padding:5px 9px;font-size:14px;gap:6px}
  .tl-mod-txt{font-size:16px}
  .tl-mod-tete h2{font-size:12px}
  .tl-mod-tag-cadre{padding:3px 7px;font-size:9px}
  .qt-serie{font-size:15px}
  .qt-ligne{padding:7px 0 6px}
  .qt-nom{font-size:16px}
  .qt-val{font-size:13px}
  .qt-crans{margin-top:6px}
  .qt-crans i{height:4px}
  .qt-plus{margin-top:8px;font-size:11px}
  .tl-mod-histoire .tl-mod-btn{padding:10px 16px}
}

/* ============================================================================
   29. L.INFOBULLE
   ----------------------------------------------------------------------------
   Le troisième niveau d.information : ce qu.on ne montre que si on le
   demande. Un seul panneau pour tout l.écran, posé en position fixe, qui
   ne prend jamais le clic. Il vient après la section 28 sans la gêner :
   celle-là ne parle que des `.tl-`, celle-ci ne parle que d.elle-même.
   ============================================================================ */
.infobulle{
  position:fixed;z-index:200;left:0;top:0;width:296px;
  padding:17px 20px;pointer-events:none;
  border:1px solid rgba(230,200,119,.4);
  background:rgba(9,7,28,.985);
  box-shadow:0 30px 70px -24px rgba(0,0,0,1), inset 0 1px 0 rgba(255,255,255,.05);
  opacity:0;visibility:hidden;transition:opacity .18s ease;
}
.infobulle.on{opacity:1;visibility:visible}
.ib-titre{
  display:block;font-family:var(--font-title);font-weight:600;font-size:15px;
  letter-spacing:.06em;color:var(--gold-warm);
}
.ib-txt{
  margin:11px 0 0;font-family:var(--font-body);font-size:17px;line-height:1.5;
  color:rgba(226,220,245,.8);text-wrap:pretty;
}
.ib-note{
  margin-top:13px;padding-top:11px;border-top:1px solid rgba(230,200,119,.18);
  display:flex;flex-direction:column;gap:6px;
}
.ib-note .u-tech{font-size:9px;letter-spacing:.3em;color:rgba(230,200,119,.75)}
.ib-note > span:last-child{font-family:var(--font-body);font-size:17px;color:rgba(226,220,245,.8)}

/* ============================================================================
   30. LE COMBAT
   ----------------------------------------------------------------------------
   Une seule carte, cinq bandes empilées, et chacune ne dit qu.une chose :
   qui se bat, où en sont les vigueurs, ce qui vient de se passer, ce que
   tu peux faire, et où en est le compte des tours.

   La bande du milieu se lit en miroir : le joueur de gauche à droite,
   l.adversaire de droite à gauche. Ils se font face, l.écran aussi.
   ============================================================================ */
/* La carte occupe toute la hauteur de la scène, et rien ne sort d’elle :
   c’est ce qui garantit qu’on voit ses actions sans faire défiler la
   page à chaque tour. L’emporte volontairement sur la règle générale
   de la scène, qui pose ses enfants en `flex:0 0 auto`.

   Quand il n’y a pas la place, deux bandes cèdent dans cet ordre : le
   journal se resserre jusqu’à cent pixels, puis la liste des actions se
   met à défiler. Aucun sort ne disparaît de la liste, jamais. */
.cbt-carte{
  position:relative;flex:1 1 auto!important;align-self:center;
  width:100%;max-width:1240px;overflow:hidden;
  display:flex;flex-direction:column;min-height:0;
  border:1px solid rgba(230,200,119,.24);
  background:linear-gradient(180deg, rgba(16,12,44,.97), rgba(9,7,28,.97));
  box-shadow:0 40px 120px rgba(0,0,0,.6);
  animation:rise .5s var(--ease-out) both;
}
/* Deux secousses, pour que deux coups de suite ne se ressemblent pas. */
.cbt-carte.secousse-a{animation:cbtSecousseA .43s ease}
.cbt-carte.secousse-b{animation:cbtSecousseB .43s ease}
@keyframes cbtSecousseA{
  0%,100%{transform:translate(0,0)}15%{transform:translate(-7px,2px)}
  35%{transform:translate(6px,-2px)}55%{transform:translate(-4px,1px)}75%{transform:translate(3px,0)}
}
@keyframes cbtSecousseB{
  0%,100%{transform:translate(0,0)}15%{transform:translate(7px,-2px)}
  35%{transform:translate(-6px,2px)}55%{transform:translate(4px,-1px)}75%{transform:translate(-3px,0)}
}

/* --- l’en-tête : où on est, contre qui, et sous quelle règle --- */
.cbt-entete{
  position:relative;flex:none;
  display:flex;align-items:flex-end;justify-content:space-between;gap:28px;flex-wrap:wrap;
  padding:15px clamp(18px,2.6vw,34px) 14px;
  border-bottom:1px solid rgba(230,200,119,.16);
}
.cbt-entete-g{min-width:0}
.cbt-kicker{
  display:flex;align-items:center;gap:12px;
  font-family:var(--font-tech);font-size:10px;letter-spacing:.34em;text-transform:uppercase;
  color:rgba(230,200,119,.7);
}
.cbt-kicker i{display:block;width:26px;height:1px;flex:none;background:rgba(230,200,119,.6)}
.cbt-titre{
  margin:11px 0 0;font-family:var(--font-title);font-weight:600;
  font-size:clamp(22px,3vh,34px);line-height:1;color:var(--gold-pale);
  text-shadow:0 1px 0 rgba(0,0,0,.6), 0 0 44px rgba(230,200,119,.15);
}
.cbt-sous{
  margin:7px 0 0;font-family:var(--font-body);font-size:18px;font-style:italic;
  color:rgba(200,188,235,.6);text-wrap:pretty;max-width:70ch;
}
.cbt-entete-d{display:flex;align-items:stretch;gap:26px;padding-bottom:4px}
.cbt-fait{display:flex;flex-direction:column;gap:6px}
.cbt-fait .u-tech{font-size:9px;letter-spacing:.26em;color:rgba(200,190,230,.4)}
.cbt-fait b{font-family:var(--font-title);font-weight:400;font-size:15px;color:rgba(240,236,250,.85)}
.cbt-fait-filet{width:1px;background:rgba(140,128,220,.2)}

/* --- l’arène : moi, le tour, lui --- */
.cbt-arene{
  position:relative;flex:none;
  display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);
  align-items:stretch;gap:20px;
  padding:16px clamp(18px,2.6vw,34px) 18px;
  border-bottom:1px solid rgba(140,128,220,.16);
  background:radial-gradient(560px 220px at 50% 130%, rgba(230,200,119,.06), rgba(0,0,0,0) 72%);
}
.cbt-camp{
  position:relative;min-width:0;padding:14px 18px 13px;cursor:default;
  border:1px solid rgba(230,200,119,.2);
  background:linear-gradient(180deg, rgba(26,21,62,.72), rgba(11,8,32,.86));
  transition:border-color .25s, background .25s;
}
/* Le cadre s’éclaire au survol : c’est lui qui porte l’infobulle, et une
   zone qui répond est une zone qu’on pense à interroger. */
.cbt-camp:hover{
  border-color:rgba(230,200,119,.45);
  background:linear-gradient(180deg, rgba(34,27,78,.8), rgba(13,10,38,.9));
}
.cbt-camp .eq{
  position:absolute;left:7px;top:7px;width:11px;height:11px;pointer-events:none;
  border-left:1px solid rgba(230,200,119,.4);border-top:1px solid rgba(230,200,119,.4);
}
.cbt-lui{
  border-color:rgba(212,101,124,.22);
  background:linear-gradient(180deg, rgba(46,20,48,.5), rgba(11,8,32,.86));
}
.cbt-lui:hover{
  border-color:rgba(212,101,124,.5);
  background:linear-gradient(180deg, rgba(58,24,58,.6), rgba(13,10,38,.9));
}
.cbt-lui .eq{
  left:auto;right:7px;
  border-left:0;border-right:1px solid rgba(212,101,124,.45);
  border-top-color:rgba(212,101,124,.45);
}
.cbt-camp.touche{border-color:rgba(212,101,124,.6)}
.cbt-ident{display:flex;align-items:center;gap:14px}
.cbt-ecu{flex:none;width:42px;height:42px;object-fit:contain;filter:drop-shadow(0 3px 8px rgba(0,0,0,.6))}
.cbt-ecu-nu{
  display:flex;align-items:center;justify-content:center;font-size:24px;
  border:1px solid rgba(212,101,124,.35);background:rgba(212,101,124,.08);
}
.cbt-nom{flex:1;min-width:0}
.cbt-nom b{
  display:block;font-family:var(--font-title);font-weight:600;font-size:21px;line-height:1.1;
  color:#f4ecd6;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.cbt-nom span{
  display:block;margin-top:3px;
  font-family:var(--font-tech);font-size:9px;letter-spacing:.26em;text-transform:uppercase;
  color:rgba(200,190,230,.42);
}
.cbt-lui .cbt-nom{text-align:right}
.cbt-lui .cbt-nom b{color:#f0cdd6}
.cbt-vigueur{display:flex;align-items:center;gap:13px;margin-top:12px}
.cbt-vig{flex:none;display:flex;align-items:baseline;gap:4px}
.cbt-vig b{font-family:var(--font-title);font-weight:600;font-size:28px;line-height:1}
.cbt-vig em{font-family:var(--font-tech);font-size:10px;font-style:normal;color:rgba(200,190,230,.34)}
.cbt-crans{flex:1;min-width:0;display:flex;gap:3px}
.cbt-crans i{
  flex:1;height:7px;display:block;background:rgba(140,128,220,.16);
  transition:background .35s, box-shadow .35s;
}
.cbt-puces{display:flex;flex-wrap:wrap;gap:6px;margin-top:9px;min-height:19px}
.cbt-lui .cbt-puces{justify-content:flex-end}
.cbt-puce{
  padding:3px 9px;border:1px solid;
  font-family:var(--font-tech);font-size:9px;letter-spacing:.18em;text-transform:uppercase;
}
.cbt-puce.p-info{border-color:#8fd0f055;background:#8fd0f012;color:#8fd0f0}
.cbt-puce.p-down{border-color:#d4657c55;background:#d4657c12;color:#d4657c}
.cbt-puce.p-seed{border-color:#b9a3ee55;background:#b9a3ee12;color:#b9a3ee}
.cbt-puce.p-rien{border-color:rgba(200,190,230,.2);background:none;color:rgba(200,190,230,.32)}

/* Le tour, au milieu, dans un losange qui respire. */
.cbt-tour{
  flex:none;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;
  cursor:default;
}
.cbt-tour-losange{
  width:46px;height:46px;display:flex;align-items:center;justify-content:center;
  transform:rotate(45deg);
  border:1px solid rgba(230,200,119,.5);
  background:linear-gradient(180deg, rgba(230,200,119,.16), rgba(8,6,26,.9));
  animation:cbtAnneau 3.2s ease-in-out infinite;
}
.cbt-tour-losange i{
  transform:rotate(-45deg);font-style:normal;
  font-family:var(--font-title);font-weight:600;font-size:18px;color:var(--gold-warm);
}
.cbt-tour .u-tech{font-size:9px;letter-spacing:.3em;color:rgba(230,200,119,.55)}
@keyframes cbtAnneau{
  0%,100%{box-shadow:0 0 0 0 rgba(230,200,119,.28)}
  50%{box-shadow:0 0 0 9px rgba(230,200,119,0)}
}

/* --- ce qu’il prépare --- */
/* Un seul filet entre l’arène et le journal : le tour ne se joue pas sur
   les barres, il se joue là. La couleur vient de l’intention lue ; à
   l’aveugle elle s’éteint, et c’est déjà une information. */
.cbt-lecture{
  position:relative;flex:none;
  display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;
  padding:11px clamp(18px,2.6vw,34px) 12px;cursor:default;
  border-bottom:1px solid rgba(140,128,220,.16);
  border-left:2px solid var(--ton);
  background:linear-gradient(90deg, color-mix(in srgb, var(--ton) 9%, transparent), rgba(7,5,24,.35) 62%);
  transition:background .3s, border-color .3s;
}
.cbt-lecture .cbt-losange{
  align-self:center;width:6px;height:6px;flex:none;transform:rotate(45deg);
  background:var(--ton);box-shadow:0 0 8px var(--ton);
}
.cbt-lecture .u-tech{flex:none;font-size:9px;letter-spacing:.28em;color:var(--ton)}
.cbt-lecture-txt{
  flex:1 1 260px;min-width:0;
  font-family:var(--font-body);font-size:19px;font-style:italic;line-height:1.35;
  color:rgba(240,236,250,.88);text-wrap:pretty;
}
.cbt-lecture-clef{
  flex:0 1 auto;
  font-family:var(--font-body);font-size:16px;font-style:italic;
  color:rgba(200,188,235,.5);text-wrap:pretty;
}
/* Une lecture claire pulse une fois par tour, sans bouger : c’est la
   seule chose de l’écran qui demande qu’on la lise avant de cliquer. */
.cbt-lecture[data-rang="clair"]{animation:cbtLecture .5s var(--ease-out) both}
.cbt-lecture[data-rang="aveugle"] .cbt-lecture-txt{color:rgba(200,188,235,.5)}
@keyframes cbtLecture{
  from{background-color:color-mix(in srgb, var(--ton) 22%, transparent)}
  to{background-color:transparent}
}

/* --- le journal --- */
/* Le journal prend tout ce que les actions ne prennent pas, et jamais
   moins que deux échanges : en dessous, on ne lit plus un duel. Quand un
   duelliste connaît vingt sorts, les deux zones défilent un peu, chacune
   avec son dégradé de bord. Aucun sort, aucune ligne ne disparaît. */
.cbt-journal{
  position:relative;flex:1 1 0;min-height:clamp(104px,13vh,180px);
  display:flex;flex-direction:column;
  padding:14px clamp(18px,2.6vw,34px) 16px;
  border-bottom:1px solid rgba(140,128,220,.16);
  background:rgba(7,5,24,.5);
}
.cbt-journal-tete{flex:none;display:flex;align-items:center;gap:12px;margin-bottom:9px}
.cbt-journal-tete .u-tech{font-size:9px;letter-spacing:.32em}
/* Le journal se remplit du haut vers le bas : le duel s’écrit sous les
   yeux, il ne remonte pas dans le cadre à chaque ligne. Quand il déborde,
   c’est le début de l’échange qui s’en va, et la vue suit le bas. */
.cbt-lignes{
  flex:1 1 0;min-height:0;overflow-y:auto;
  display:flex;flex-direction:column;gap:3px;
}
.cbt-ligne{
  flex:none;display:flex;align-items:baseline;gap:13px;
  padding:6px 12px 6px 13px;
  border-left:2px solid rgba(160,148,235,.5);
  background:rgba(140,128,220,.045);
  animation:logIn .4s var(--ease-out) both;
}
.cbt-ligne.ici{background:rgba(230,200,119,.05)}
.cbt-qui{
  flex:none;font-family:var(--font-tech);font-size:9px;letter-spacing:.2em;text-transform:uppercase;
}
.cbt-txt{
  flex:1;min-width:0;font-family:var(--font-body);font-size:19px;font-style:italic;
  line-height:1.4;color:rgba(200,188,235,.62);text-wrap:pretty;
}
.cbt-ligne.ici .cbt-txt{font-size:21px}
.cbt-degat{flex:none;font-family:var(--font-title);font-weight:600;font-size:18px}
.cbt-ligne.v-moi{border-left-color:#e0bd6d}
.cbt-ligne.v-moi .cbt-qui,.cbt-ligne.v-moi .cbt-degat{color:#e0bd6d}
.cbt-ligne.v-moi.ici .cbt-txt{color:rgba(240,236,250,.9)}
.cbt-ligne.v-lui{border-left-color:#d4657c}
.cbt-ligne.v-lui .cbt-qui,.cbt-ligne.v-lui .cbt-degat{color:#d4657c}
.cbt-ligne.v-lui.ici .cbt-txt{color:rgba(238,224,232,.82)}
.cbt-ligne.v-neutre{border-left-color:rgba(160,148,235,.5)}
.cbt-ligne.v-neutre .cbt-qui{color:rgba(160,148,235,.5)}
.cbt-ligne.v-noir{border-left-color:#b9a3ee}
.cbt-ligne.v-noir .cbt-qui,.cbt-ligne.v-noir .cbt-degat{color:#b9a3ee}
.cbt-ligne.v-noir.ici .cbt-txt{color:#ded2f7}
/* La cinquième voix, et la seule qui agit au lieu de commenter : le lieu
   qui s’invite au milieu du duel. Elle ne parle qu’une fois par combat,
   elle se lit droite, et elle prend toute la largeur. */
.cbt-ligne.v-fait{
  border-left-width:3px;border-left-color:#e0bd6d;
  background:linear-gradient(90deg, rgba(230,200,119,.13), rgba(230,200,119,.02) 68%);
  opacity:1!important;
}
.cbt-ligne.v-fait .cbt-qui{color:#f0d78c}
.cbt-ligne.v-fait .cbt-txt{font-style:normal;color:rgba(244,236,214,.94)}

/* --- les actions, rangées par famille --- */
.cbt-actions{
  position:relative;flex:0 1 auto;min-height:0;overflow-y:auto;
  padding:15px clamp(18px,2.6vw,34px) 18px;
  /* Les cinq familles doivent tenir côte à côte : c’est ce qui permet de
     lire « frapper, se protéger, ruser, franchir la ligne, partir » d’un
     seul regard. La maquette pose 196 px sur une toile sans colonne de
     gauche ; ici la scène en perd 314, et il faut descendre à 170 pour
     que la cinquième famille ne bascule pas sous les autres en 1366. */
  display:grid;grid-template-columns:repeat(auto-fit, minmax(min(100%,170px), 1fr));
  align-content:start;gap:13px 18px;
}
.cbt-actions.deborde{
  -webkit-mask-image:linear-gradient(180deg,#000 calc(100% - 42px),transparent);
  mask-image:linear-gradient(180deg,#000 calc(100% - 42px),transparent);
}
.cbt-famille-tete{
  display:flex;align-items:center;gap:9px;
  padding-bottom:7px;border-bottom:1px solid;
}
.cbt-famille-tete .u-tech{font-size:9px;letter-spacing:.28em}
.cbt-losange{width:6px;height:6px;flex:none;transform:rotate(45deg)}
.cbt-liste{display:flex;flex-direction:column;gap:6px;margin-top:8px}
.cbt-act{
  display:flex;align-items:center;gap:11px;width:100%;text-align:left;cursor:pointer;
  padding:8px 11px;border-radius:0;
  border:1px solid rgba(140,128,220,.2);
  background:linear-gradient(180deg, rgba(20,16,52,.85), rgba(11,8,32,.9));
  transition:border-color .18s, background .18s, transform .18s, box-shadow .18s;
}
.cbt-act:hover{
  border-color:var(--ton);
  background:linear-gradient(180deg, rgba(30,24,70,.9), rgba(14,10,38,.92));
  transform:translateY(-2px);box-shadow:0 10px 22px -12px var(--ton);
}

/* L’Impardonnable ne se présente pas comme les autres : hachures de
   ruban de police, nom rosé, et deux clics au lieu d’un. Le premier ne
   lance rien, il remplace les chiffres par ce que le sort va coûter. */
.cbt-act.cbt-interdit{
  border-color:rgba(212,101,124,.42);
  background:repeating-linear-gradient(135deg,
    rgba(60,14,28,.6) 0 7px, rgba(28,8,20,.75) 7px 14px);
}
.cbt-act.cbt-interdit:hover{
  border-color:#d4657c;
  background:repeating-linear-gradient(135deg,
    rgba(86,18,38,.72) 0 7px, rgba(34,10,24,.85) 7px 14px);
}
.cbt-act.cbt-interdit .cbt-act-corps b{color:#f0cdd6}
.cbt-act.arme{
  border-color:#d4657c;
  box-shadow:0 0 0 1px rgba(212,101,124,.4), 0 12px 26px -14px #d4657c;
  animation:cbtArme 1.4s ease-in-out infinite;
}
.cbt-act.arme .cbt-act-corps span{color:#f0899c}
/* Armé, le bouton s’autorise deux lignes : c’est le seul avertissement du
   jeu qui engage un casier judiciaire, il ne se lit pas en points de
   suspension. Il grandit, et c’est très bien qu’il se voie. */
.cbt-act.arme .cbt-act-corps b,
.cbt-act.arme .cbt-act-corps span{
  white-space:normal;overflow:visible;text-overflow:clip;line-height:1.25;
}
@keyframes cbtArme{
  0%,100%{box-shadow:0 0 0 1px rgba(212,101,124,.4), 0 12px 26px -14px #d4657c}
  50%{box-shadow:0 0 0 1px rgba(212,101,124,.85), 0 12px 30px -10px #d4657c}
}
.cbt-act-ico{
  flex:none;width:30px;height:30px;display:flex;align-items:center;justify-content:center;
  color:var(--ton);border:1px solid color-mix(in srgb, var(--ton) 48%, transparent);
  background:linear-gradient(180deg, color-mix(in srgb, var(--ton) 15%, transparent) 0%, rgba(10,8,30,.8) 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05);
}
.cbt-act-corps{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.cbt-act-corps b{
  font-family:var(--font-title);font-weight:500;font-size:15px;line-height:1.1;
  color:rgba(240,236,250,.92);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.cbt-act-corps span{
  font-family:var(--font-tech);font-size:9px;letter-spacing:.1em;text-transform:uppercase;
  color:rgba(200,190,230,.4);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.cbt-famille[data-t="noir"] .cbt-act-corps span{color:rgba(212,101,124,.75)}
/* Ces deux familles n’ont qu’un bouton et les libellés les plus longs du
   jeu : « Rompre le combat », et l’Impardonnable qui doit afficher ses
   dégâts, son effet ET son prix en moralité. Elles s’autorisent donc deux
   lignes plutôt que d’escamoter un chiffre en points de suspension. */
.cbt-famille[data-t="noir"] .cbt-act-corps b,
.cbt-famille[data-t="noir"] .cbt-act-corps span,
.cbt-famille[data-t="fuite"] .cbt-act-corps b,
.cbt-famille[data-t="fuite"] .cbt-act-corps span{
  white-space:normal;overflow:visible;text-overflow:clip;line-height:1.2;
}

/* La marque de réponse : ce que ce sort vaut contre ce qu’il prépare.
   Elle n’apparaît que si tu lis l’intention en clair. Sinon il n’y a rien
   à annoncer, et l’incertitude est exactement la difficulté du duel. */
.cbt-act-marque{
  flex:none;align-self:stretch;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;
  padding:0 5px;margin:-8px -11px -8px 0;
  border-left:1px solid color-mix(in srgb, var(--m) 45%, transparent);
  background:color-mix(in srgb, var(--m) 12%, transparent);
  font-family:var(--font-tech);font-size:9px;letter-spacing:.02em;
  color:var(--m);text-align:center;line-height:1;white-space:nowrap;
}
.cbt-act-marque i{
  font-style:normal;font-size:7.5px;letter-spacing:.1em;text-transform:uppercase;opacity:.85;
}
/* La marque prend de la largeur au nom du sort. Sur une carte marquée, le
   nom descend d’un point plutôt que de finir en points de suspension :
   « Expelliarmus » doit se lire en entier, marque ou pas. */
.cbt-act[data-rep] .cbt-act-corps b{font-size:14px}
/* Sous 1500 px, cinq colonnes ne laissent plus la place au mot : la marque
   garde son chiffre, qui est l’information, et sa couleur, qui est le
   qualificatif. Le mot revient dès que la scène est assez large. */
@media(max-width:1500px){
  .cbt-act-marque i{display:none}
  .cbt-act-marque{padding:0 4px}
  .cbt-act[data-rep] .cbt-act-corps b{font-size:13px}
}
.cbt-act[data-rep="juste"]{border-color:rgba(95,191,139,.5)}
.cbt-act[data-rep="expose"]{border-color:rgba(212,101,124,.4)}

/* --- le pied technique --- */
.cbt-pied{
  position:relative;flex:none;
  display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;
  padding:11px clamp(18px,2.6vw,34px);
  border-top:1px solid rgba(140,128,220,.16);background:rgba(8,6,26,.6);
  font-family:var(--font-tech);font-size:10px;letter-spacing:.24em;text-transform:uppercase;
  color:rgba(200,190,230,.34);
}

/* --- la fin du duel --- */
.cbt-fin{
  position:relative;flex:1 1 0;min-height:0;
  display:flex;align-items:flex-start;gap:28px;flex-wrap:wrap;
  padding:clamp(18px,3vh,28px) clamp(18px,2.6vw,34px) clamp(20px,3vh,30px);
}
.cbt-fin-marque{
  flex:none;width:96px;height:96px;display:flex;align-items:center;justify-content:center;
  font-family:var(--font-title);font-size:44px;border:1px solid;
}
.cbt-fin-corps{flex:1;min-width:260px}
.cbt-fin-corps > .u-tech{display:block;font-size:10px;letter-spacing:.34em}
.cbt-fin-titre{
  margin:12px 0 0;font-family:var(--font-title);font-weight:600;font-size:clamp(24px,3.6vh,34px);
  line-height:1.05;color:var(--gold-pale);
}
.cbt-fin-txt{
  margin:12px 0 0;max-width:62ch;
  font-family:var(--font-body);font-size:clamp(17px,2.2vh,20px);font-style:italic;line-height:1.5;
  color:rgba(200,188,235,.62);text-wrap:pretty;
}
.cbt-fin-chiffres{
  display:flex;flex-wrap:wrap;gap:34px;margin-top:20px;padding-top:16px;
  border-top:1px solid rgba(140,128,220,.16);
}
.cbt-fin-chiffre{display:flex;flex-direction:column;gap:6px}
.cbt-fin-chiffre .u-tech{font-size:9px;letter-spacing:.26em;color:rgba(200,190,230,.42)}
.cbt-fin-chiffre b{font-family:var(--font-title);font-weight:600;font-size:26px;line-height:1}
.cbt-fin-corps .fx-bloc{margin-top:20px}
.cbt-fin-porte{margin-top:24px}

/* Sur un écran court, un septième année a onze sorts et la carte n’a plus
   la hauteur de la maquette. Plutôt que de faire défiler la moitié des
   actions, tout se resserre d’un cran : mêmes règles, mêmes couleurs,
   deux ou trois pixels de moins partout. Aucun sort ne disparaît. */
@media(max-height:820px){
  .cbt-arene{padding:11px clamp(18px,2.6vw,34px) 12px}
  .cbt-camp{padding:10px 15px 9px}
  .cbt-vigueur{margin-top:9px}
  .cbt-puces{margin-top:7px;min-height:0}
  .cbt-actions{padding-top:11px;padding-bottom:13px;gap:10px 16px}
  .cbt-act{padding:6px 10px;gap:9px}
  .cbt-act-ico{width:26px;height:26px}
  .cbt-liste{gap:5px;margin-top:6px}
  .cbt-journal{min-height:96px;padding-top:11px;padding-bottom:12px}
  .cbt-lecture{padding-top:9px;padding-bottom:9px}
  .cbt-lecture-txt{font-size:17px}
  .cbt-lecture-clef{font-size:15px}
}

@media(max-width:900px){
  .cbt-arene{grid-template-columns:1fr;gap:12px}
  .cbt-tour{flex-direction:row;gap:12px}
  .cbt-tour-losange{width:36px;height:36px}
}

/* ============================================================================
   31. LE RELEVÉ OFFICIEL DES RÉSULTATS
   ----------------------------------------------------------------------------
   La convocation était un document. Le relevé en est un autre, du même
   bureau : même en-tête d.autorité, même signature, même cachet. Ce qui
   change, c.est qu.il porte des chiffres, et que ces chiffres ferment
   des portes. Les deux colonnes disent exactement ça : à gauche ce que
   tu as obtenu, à droite ce que ça décide.
   ============================================================================ */
.releve{
  position:relative;width:100%;max-width:1240px;margin:0 auto;
  display:flex;flex-direction:column;
  padding:clamp(14px,2.4vh,30px) clamp(20px,4vw,64px) clamp(16px,2.4vh,28px);
  border:1px solid rgba(230,200,119,.2);
  background:linear-gradient(180deg, rgba(28,23,68,.72) 0%, rgba(12,10,34,.92) 100%);
  box-shadow:0 50px 110px -60px rgba(0,0,0,1), inset 0 1px 0 rgba(255,255,255,.06);
  animation:rise .7s var(--ease-out) both;
}
.releve > .eq{position:absolute;width:16px;height:16px;pointer-events:none}
.releve > .eq-tl{left:12px;top:12px;border-left:1px solid rgba(230,200,119,.45);border-top:1px solid rgba(230,200,119,.45)}
.releve > .eq-tr{right:12px;top:12px;border-right:1px solid rgba(230,200,119,.45);border-top:1px solid rgba(230,200,119,.45)}
.releve > .eq-bl{left:12px;bottom:12px;border-left:1px solid rgba(230,200,119,.45);border-bottom:1px solid rgba(230,200,119,.45)}
.releve > .eq-br{right:12px;bottom:12px;border-right:1px solid rgba(230,200,119,.45);border-bottom:1px solid rgba(230,200,119,.45)}

.rl-sceau{
  position:relative;flex:none;
  display:flex;align-items:center;justify-content:center;gap:clamp(12px,1.6vw,22px);
}
.rl-titre{
  position:relative;flex:none;margin:clamp(8px,1.4vh,14px) auto 0;max-width:34ch;
  font-family:var(--font-title);font-weight:600;font-size:clamp(19px,2vw,28px);
  line-height:1.14;text-align:center;color:var(--gold-pale);
  text-shadow:0 0 48px rgba(230,200,119,.2);text-wrap:balance;
}
.rl-session{
  position:relative;flex:none;
  display:flex;align-items:center;justify-content:center;gap:14px;margin-top:8px;
}
.rl-session i{
  display:block;flex:1;max-width:clamp(30px,5vw,80px);height:1px;
  background:linear-gradient(90deg, rgba(230,200,119,0), rgba(230,200,119,.6));
}
.rl-session i:last-child{background:linear-gradient(90deg, rgba(230,200,119,.6), rgba(230,200,119,0))}
.rl-session span{
  font-family:var(--font-tech);font-size:9.5px;letter-spacing:.34em;
  color:rgba(230,200,119,.7);white-space:nowrap;
}

/* Deux colonnes dès qu’il y a la place. Le seuil est à 380 et pas à 430 :
   à 1366 de large, la scène offre 884 pixels, et un seuil de 430 ratait
   la seconde colonne de trois pixels. Le relevé se dépliait alors sur
   deux mètres de haut pour rien. */
.rl-cols{
  position:relative;display:grid;
  grid-template-columns:repeat(auto-fit, minmax(min(100%,380px),1fr));
  gap:clamp(14px,2vw,30px);align-items:start;
  margin-top:clamp(10px,1.8vh,18px);
}

/* --- le tableau des épreuves --- */
.rl-tableau{
  min-width:0;display:flex;flex-direction:column;
  border-top:1px solid rgba(230,200,119,.22);
  border-bottom:1px solid rgba(230,200,119,.22);
}
.rl-tete{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:5px 14px;background:rgba(230,200,119,.06);
  font-family:var(--font-tech);font-size:9px;letter-spacing:.3em;text-transform:uppercase;
  color:rgba(200,190,230,.5);
}
.rl-ligne{
  display:flex;align-items:center;gap:16px;
  padding:clamp(4px,.75vh,8px) 14px;cursor:default;
  border-top:1px solid rgba(140,128,220,.13);
  transition:background .2s;
}
.rl-ligne:hover{background:rgba(140,128,220,.08)}
.rl-ico{
  flex:none;width:26px;height:26px;display:flex;align-items:center;justify-content:center;
  border:1px solid;
}
.rl-ico svg{display:block}
.rl-nom{
  flex:1;min-width:0;font-family:var(--font-body);font-size:clamp(17px,1.4vw,21px);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:rgba(236,230,252,.9);
}
.rl-lab{
  flex:none;font-family:var(--font-title);font-size:clamp(13px,1.1vw,15px);
  letter-spacing:.08em;white-space:nowrap;
}
.rl-chip{
  flex:none;width:30px;height:30px;display:flex;align-items:center;justify-content:center;
  border:1px solid;font-family:var(--font-title);font-weight:600;font-size:16px;
}
/* Une matière ratée teinte toute sa rangée : le relevé se lit d’un coup
   d'œil, sans avoir à décoder les six lettres. */
.rl-ligne[data-rate]{background:rgba(212,101,124,.05)}

/* --- ce que ces notes décident --- */
.rl-droite{min-width:0;display:flex;flex-direction:column}
.rl-cases{
  display:grid;grid-template-columns:repeat(auto-fit, minmax(140px,1fr));
  gap:1px;background:rgba(140,128,220,.2);
}
.rl-case{padding:9px 16px;background:rgba(10,8,30,.72);display:flex;flex-direction:column;gap:6px}
.rl-case .u-tech{font-size:9px;letter-spacing:.28em;color:rgba(200,190,230,.45)}
.rl-case b{font-family:var(--font-title);font-weight:400;font-size:18px;color:rgba(240,236,250,.88)}
.rl-mot{
  max-width:74ch;margin:clamp(10px,1.7vh,18px) auto 0;
  font-family:var(--font-body);font-size:clamp(15px,1.3vw,19px);font-style:italic;
  line-height:1.5;text-align:center;color:rgba(240,224,170,.85);text-wrap:pretty;
}
.rl-portes{
  display:grid;grid-template-columns:repeat(auto-fit, minmax(min(100%,190px),1fr));
  gap:clamp(10px,1.2vw,16px);align-items:stretch;margin-top:clamp(10px,1.7vh,18px);
}
.rl-porte{padding:10px 16px;display:flex;flex-direction:column;gap:5px;border-left:1px solid}
.rl-porte .u-tech{font-size:9px;letter-spacing:.28em;margin-bottom:4px}
.rl-porte span:not(.u-tech){font-family:var(--font-body);font-size:clamp(15px,1.3vw,19px)}
.rl-ouvertes{border-left-color:rgba(143,214,165,.5);background:rgba(143,214,165,.05)}
.rl-ouvertes .u-tech{color:rgba(143,214,165,.8)}
.rl-ouvertes span:not(.u-tech){color:rgba(232,240,235,.85)}
.rl-fermees{border-left-color:rgba(212,101,124,.5);background:rgba(212,101,124,.05)}
.rl-fermees .u-tech{color:rgba(212,101,124,.85)}
.rl-fermees span:not(.u-tech){color:rgba(240,224,228,.82)}
/* Une matière à remonter n’est pas une porte fermée : elle sort en or,
   la couleur de ce qui compte, pas en rouge, la couleur de ce qui est
   perdu. Un bulletin de deuxième année ne condamne personne. */
.rl-aremonter{border-left-color:rgba(230,200,119,.55);background:rgba(230,200,119,.05)}
.rl-aremonter .u-tech{color:rgba(230,200,119,.85)}
.rl-aremonter span:not(.u-tech){color:rgba(240,234,220,.85)}
.rl-note-annuelle{
  margin:clamp(9px,1.5vh,15px) 0 0;font-family:var(--font-body);font-style:italic;
  font-size:clamp(13px,1.2vw,17px);line-height:1.5;color:rgba(200,190,230,.55);text-wrap:pretty;
}
.rl-rien{font-style:italic;opacity:.7}
.rl-pied{
  display:flex;align-items:flex-end;justify-content:space-between;gap:clamp(14px,2vw,26px);
  flex-wrap:wrap;margin-top:clamp(12px,2vh,22px);
}
.rl-pied .exam-signature{flex:1 1 200px}
.rl-pied .hv-entrer{flex:1 1 220px;text-align:center}

/* ============================================================================
   32. LA COUPE DES QUATRE MAISONS
   ----------------------------------------------------------------------------
   Une cérémonie, pas un tableau. Sept temps, et chacun a son mouvement :

     le rang      arrive par la gauche, et l.eclat le frappe une fois
     la bannière  s.ouvre en largeur, avec une roue de lumière derrière
     la coupe     monte de vingt pixels, respire, et un reflet la traverse
     les lignes   de conséquence montent l.une après l.autre
     la voix      change de phrase à chaque temps, et remonte à chaque fois

   Les seize bougies du plafond enchanté flottent par-dessus tout, chacune
   à son rythme. Elles ne s.arrêtent jamais : c.est le plafond, pas un effet.
   ============================================================================ */
/* La carte prend toute la hauteur du panneau : c’est le seul moyen pour
   que le bloc du prix reçoive la place qui reste et n’ait pas à défiler
   ses conséquences. */
.cq{
  position:relative;flex:1 1 auto!important;align-self:stretch;
  width:100%;max-width:1240px;min-height:0;height:100%;margin:0 auto;
  display:flex;flex-direction:column;gap:clamp(4px,1.6vh,14px);
}

/* --- le plafond enchanté --- */
.cq-bougies{position:absolute;inset:0;pointer-events:none;z-index:1;display:block}
.cq-bougies i{
  position:absolute;display:block;border-radius:50%;
  background:rgba(255,232,170,.9);
  box-shadow:0 0 12px 3px rgba(240,205,130,.45);
  animation-name:cqBougie;animation-timing-function:ease-in-out;animation-iteration-count:infinite;
}
@keyframes cqBougie{
  0%,100%{transform:translateY(0);opacity:.5}
  50%{transform:translateY(-14px);opacity:1}
}

/* --- l’en-tête --- */
.cq-tete{
  position:relative;z-index:2;flex:none;
  display:flex;align-items:flex-end;justify-content:space-between;gap:26px;
}
.cq-tete-g{min-width:0}
.cq-kicker{
  display:flex;align-items:center;gap:12px;
  font-family:var(--font-tech);font-size:10px;letter-spacing:.34em;text-transform:uppercase;
  color:rgba(230,200,119,.7);
}
.cq-kicker i{display:block;width:26px;height:1px;flex:none;background:rgba(230,200,119,.5)}
.cq-titre{
  margin:9px 0 0;font-family:var(--font-title);font-weight:600;
  font-size:clamp(20px,3.4vh,38px);line-height:1.05;color:var(--gold-pale);
  text-shadow:0 0 46px rgba(230,200,119,.28);
}
.cq-passer{
  flex:none;cursor:pointer;padding:11px 18px;border-radius:0;
  background:transparent;border:1px solid rgba(140,128,220,.24);
  font-family:var(--font-tech);font-size:10px;letter-spacing:.26em;text-transform:uppercase;
  color:rgba(200,190,230,.55);transition:border-color .25s, color .25s;
}
.cq-passer:hover{border-color:rgba(230,200,119,.5);color:var(--gold-bright)}
.cq[data-pas="6"] .cq-passer{opacity:.4;pointer-events:none}

/* --- la voix de Dumbledore : deux animations jumelles qui alternent,
       pour qu.une phrase qui en remplace une autre bouge quand même --- */
.cq-comment{
  position:relative;z-index:2;flex:none;margin:0;
  font-family:var(--font-body);font-size:clamp(15px,1.9vh,18px);font-style:italic;
  line-height:1.4;color:rgba(200,190,230,.6);text-wrap:pretty;
}
.cq-comment.dit-a{animation:cqDitA .6s var(--ease-out) both}
.cq-comment.dit-b{animation:cqDitB .6s var(--ease-out) both}
@keyframes cqDitA{from{opacity:0;transform:translateY(7px)}to{opacity:1;transform:none}}
@keyframes cqDitB{from{opacity:0;transform:translateY(7px)}to{opacity:1;transform:none}}

/* --- les quatre rangs --- */
.cq-rangs{
  position:relative;z-index:2;flex:none;
  display:flex;flex-direction:column;gap:clamp(5px,1vh,9px);
}
.cq-rang{
  position:relative;display:flex;align-items:center;gap:18px;
  padding:clamp(5px,1.1vh,11px) 18px;cursor:default;
  opacity:.5;border:1px solid rgba(140,128,220,.18);background:rgba(12,10,34,.7);
  transition:border-color .4s, background .4s, box-shadow .4s, opacity .4s;
}
/* Une ligne pas encore annoncée ne dit rien : ni blason, ni nom, ni total.
   Le cadre est là, quatre lignes vides qui attendent, et c’est tout. On
   ne lit le classement qu’au moment où Dumbledore le prononce. */
.cq-rang:not(.vu) .cq-ecu,
.cq-rang:not(.vu) .cq-nom,
.cq-rang:not(.vu) .cq-place,
.cq-rang:not(.vu) .cq-pts{visibility:hidden}
.cq-rang:not(.vu) .cq-jauge{opacity:.25}
.cq-rang:not(.vu)::after{
  content:'';position:absolute;left:18px;right:18px;top:50%;height:1px;
  background:repeating-linear-gradient(90deg, rgba(140,128,220,.3) 0 10px, transparent 10px 22px);
}
.cq-rang.vu{opacity:1;animation:cqRangIn .55s cubic-bezier(.16,.9,.28,1) both}
.cq-rang.vu.eclat{animation:cqRangIn .55s cubic-bezier(.16,.9,.28,1) both, cqEclat .8s ease-out}
@keyframes cqRangIn{from{opacity:0;transform:translateX(-26px)}to{opacity:1;transform:none}}
@keyframes cqEclat{
  0%{box-shadow:0 0 0 0 rgba(240,215,140,.6), 0 0 46px rgba(240,215,140,.5);transform:scale(1.014)}
  100%{box-shadow:0 0 0 0 rgba(240,215,140,0);transform:scale(1)}
}
/* Le vainqueur ne se distingue qu’une fois annoncé. */
.cq[data-pas="5"] .cq-rang.cq-premier.vu,
.cq[data-pas="6"] .cq-rang.cq-premier.vu{
  border-color:rgba(230,200,119,.7);
  background:linear-gradient(90deg, rgba(47,79,142,.4), rgba(16,12,44,.9));
  box-shadow:0 20px 50px -22px rgba(230,200,119,.6);
}
.cq-place{
  flex:none;width:42px;font-family:var(--font-title);font-weight:600;font-size:15px;
  letter-spacing:.08em;color:rgba(200,190,230,.5);
}
.cq-premier.vu .cq-place{color:var(--gold-warm)}
.cq-ecu{flex:none;width:clamp(24px,3.4vh,34px);height:clamp(24px,3.4vh,34px);display:block}
.cq-ecu img{width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 3px 7px rgba(0,0,0,.6))}
.cq-nom{
  flex:0 0 200px;min-width:0;font-family:var(--font-title);font-weight:600;
  font-size:clamp(15px,2.1vh,20px);letter-spacing:.04em;color:rgba(240,236,250,.88);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.cq-nom em{font-family:var(--font-body);font-style:italic;font-size:.8em;color:rgba(200,190,230,.5)}
.cq-premier.vu .cq-nom{color:var(--gold-pale)}
.cq-jauge{
  flex:1;min-width:0;height:9px;
  background:rgba(140,128,220,.13);border:1px solid rgba(140,128,220,.16);
}
.cq-jauge i{display:block;height:100%;transition:width 1s cubic-bezier(.16,.9,.28,1)}
.cq-premier.vu .cq-jauge i{box-shadow:0 0 16px rgba(230,200,119,.6)}
.cq-pts{
  flex:none;width:78px;text-align:right;
  font-family:var(--font-title);font-weight:600;font-size:clamp(15px,2.2vh,21px);
  color:rgba(226,220,245,.8);font-variant-numeric:tabular-nums;
}
.cq-premier.vu .cq-pts{color:var(--gold-warm);text-shadow:0 0 22px rgba(240,215,140,.6)}

/* --- la bannière du vainqueur --- */
.cq-banniere{
  position:relative;z-index:2;flex:none;height:0;opacity:0;overflow:hidden;
  display:flex;align-items:center;justify-content:center;
  border:1px solid transparent;background:transparent;
  transition:height .1s;
}
.cq[data-pas="5"] .cq-banniere,
.cq[data-pas="6"] .cq-banniere{
  height:clamp(56px,9vh,92px);opacity:1;
  border-color:rgba(230,200,119,.55);
  background:linear-gradient(90deg, rgba(28,22,66,.5), rgba(60,48,18,.45), rgba(28,22,66,.5));
  animation:cqBanniere .8s cubic-bezier(.16,.9,.28,1) both;
}
@keyframes cqBanniere{
  0%{opacity:0;transform:scaleX(.72)}60%{opacity:1}100%{opacity:1;transform:none}
}
.cq-rayons{
  position:absolute;left:50%;top:50%;width:900px;height:900px;margin:-450px 0 0 -450px;
  opacity:.2;pointer-events:none;
  background:repeating-conic-gradient(from 0deg, rgba(230,200,119,.55) 0deg 5deg, rgba(0,0,0,0) 5deg 12deg);
  -webkit-mask-image:radial-gradient(circle at center, #000 0%, transparent 52%);
  mask-image:radial-gradient(circle at center, #000 0%, transparent 52%);
  animation:cqRayons 44s linear infinite;
}
@keyframes cqRayons{to{transform:rotate(360deg)}}
.cq-banniere-corps{position:relative;display:flex;align-items:center;gap:20px}
.cq-banniere-ecu{flex:none;width:clamp(30px,4.8vh,46px);height:clamp(30px,4.8vh,46px);display:block}
.cq-banniere-ecu img{width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 4px 10px rgba(0,0,0,.7))}
.cq-banniere-txt{display:flex;flex-direction:column;gap:3px}
.cq-banniere-txt b{
  font-family:var(--font-title);font-weight:700;font-size:clamp(20px,4vh,38px);line-height:1;
  letter-spacing:.24em;color:#fdf3d4;text-shadow:0 0 40px rgba(230,200,119,.7);
}
.cq-banniere-txt span{
  font-family:var(--font-tech);font-size:9px;letter-spacing:.3em;text-transform:uppercase;
  color:rgba(250,238,205,.72);
}

/* --- le prix : la coupe, et ce que ça change --- */
.cq-prix{
  position:relative;z-index:2;flex:1 1 auto;min-height:0;overflow:hidden;
  display:flex;align-items:stretch;gap:20px;opacity:0;pointer-events:none;
}
.cq[data-pas="6"] .cq-prix{opacity:1;pointer-events:auto;animation:cqPrix .7s cubic-bezier(.16,.9,.28,1) both}
@keyframes cqPrix{0%{opacity:0;transform:translateY(22px) scale(.9)}100%{opacity:1;transform:none}}

.cq-coupe{
  position:relative;flex:0 0 clamp(130px,15vw,232px);min-height:0;overflow:hidden;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:clamp(6px,1.2vh,12px);
  border:1px solid rgba(230,200,119,.26);
  background:linear-gradient(180deg, rgba(28,22,66,.85), rgba(10,8,30,.9));
}
.cq[data-pas="6"] .cq-coupe{animation:cqLueur 5s ease-in-out infinite}
@keyframes cqLueur{
  0%,100%{box-shadow:0 0 60px -18px rgba(230,200,119,.5)}
  50%{box-shadow:0 0 90px -14px rgba(230,200,119,.85)}
}
.cq-svg{
  display:block;width:auto;height:clamp(84px,15vh,150px);
  filter:drop-shadow(0 10px 22px rgba(0,0,0,.6));
}
.cq[data-pas="6"] .cq-svg{animation:cqCoupeIn .8s cubic-bezier(.16,.9,.28,1) both}
@keyframes cqCoupeIn{0%{opacity:0;transform:translateY(22px) scale(.9)}100%{opacity:1;transform:none}}
.cq-annees{
  margin-top:4px;padding:5px 12px;border:1px solid rgba(230,200,119,.34);
  font-family:var(--font-tech);font-size:9px;letter-spacing:.28em;
  color:rgba(240,215,140,.85);
}
.cq-lueur{position:absolute;inset:0;overflow:hidden;pointer-events:none}
.cq-lueur i{
  position:absolute;left:0;top:0;bottom:0;width:30%;display:block;will-change:transform;
  background:linear-gradient(90deg, rgba(255,247,220,0), rgba(255,247,220,.18), rgba(255,247,220,0));
  transform:translateX(-160%) skewX(-16deg);
}
.cq[data-pas="6"] .cq-lueur i{animation:cqReflet 3.4s ease-in-out 1.1s infinite}
@keyframes cqReflet{
  from{transform:translateX(-160%) skewX(-16deg)}
  to{transform:translateX(400%) skewX(-16deg)}
}

.cq-panneau{
  position:relative;flex:1;min-width:0;display:flex;flex-direction:column;
  gap:clamp(6px,1.2vh,12px);padding:clamp(10px,1.8vh,20px) clamp(14px,1.8vw,24px);
  border:1px solid rgba(140,128,220,.2);background:rgba(11,9,32,.78);
  overflow:hidden auto;
}
.cq-panneau > *{position:relative;z-index:1}
/* Un voile de lumière traverse le panneau une fois le prix posé, comme
   un reflet de bougie qui passe sur le parchemin. Il ne prend jamais le
   clic, et il ne part qu’au sixième temps. */
.cq-voile{
  position:absolute;left:0;top:0;bottom:0;width:30%;z-index:0;pointer-events:none;
  will-change:transform;opacity:0;
  background:linear-gradient(90deg, rgba(255,247,220,0), rgba(255,247,220,.18), rgba(255,247,220,0));
}
.cq[data-pas="6"] .cq-voile{opacity:1;animation:cqVoile 5s linear .6s infinite}
@keyframes cqVoile{
  from{transform:translateX(-160%) skewX(-16deg)}
  to{transform:translateX(400%) skewX(-16deg)}
}
.cq-histoire{
  margin:0;font-family:var(--font-body);font-size:clamp(15px,2vh,19px);line-height:1.45;
  color:rgba(226,220,245,.8);text-wrap:pretty;
}
/* Les conséquences gardent leurs trois poids et leur ordre : ce sont les
   mêmes lignes que partout ailleurs, elles montent seulement une à une. */
/* Ce que ça change, en jetons plutôt qu’en rangée : la Coupe tombe une
   fois par an et le panneau doit tenir d’un seul regard. Rien n’est
   retiré, la jauge seule s’efface, parce que le total et le delta
   disent déjà ce qu’elle montrait. */
.cq-panneau .fx-bloc{margin-top:0}
.cq-panneau .fx-rangee{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,200px),1fr));
  gap:clamp(6px,1vh,10px) clamp(8px,1vw,14px);
}
.cq-panneau .fx1{
  align-items:center;gap:10px;padding:clamp(6px,1vh,9px) clamp(9px,.9vw,13px);
  border:1px solid rgba(140,128,220,.24);background:rgba(18,14,48,.6);
}
.cq-panneau .fx1 .cb-embleme,.cq-panneau .fx1 .cb-jeton{margin-top:0}
.cq-panneau .fx1-jauge{display:none}
.cq-panneau .fx1-tete{gap:10px}
.cq-panneau .fx1-nom{font-size:16px}
.cq-panneau .fx1-lecture{font-size:10px}
.cq-panneau .fx1-delta{font-size:15px}
.cq-panneau .fx-plafond{margin-top:2px;font-size:12px}
.cq-panneau .fx-acquis{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,200px),1fr));
  gap:clamp(6px,1vh,10px) clamp(8px,1vw,14px);margin-top:clamp(6px,1vh,10px);
}
.cq-panneau .fx2{padding:clamp(6px,1vh,9px) clamp(9px,.9vw,13px);gap:10px}
.cq-panneau .fx2-cachet{width:20px;height:20px}
.cq-panneau .fx2-cachet::after{inset:4px}
.cq-panneau .fx2-nom{font-size:15px}
.cq-panneau .fx3{margin-top:clamp(6px,1vh,10px);padding-left:12px}
.cq-panneau .fx3-txt{font-size:15px}

.cq[data-pas="6"] .cq-panneau .fx-rangee > *{animation:cqChip .5s var(--ease-out) both}
.cq[data-pas="6"] .cq-panneau .fx-rangee > *:nth-child(2){animation-delay:.08s}
.cq[data-pas="6"] .cq-panneau .fx-rangee > *:nth-child(3){animation-delay:.16s}
.cq[data-pas="6"] .cq-panneau .fx-rangee > *:nth-child(4){animation-delay:.24s}
.cq[data-pas="6"] .cq-panneau .fx-rangee > *:nth-child(5){animation-delay:.32s}
.cq[data-pas="6"] .cq-panneau .fx-rangee > *:nth-child(n+6){animation-delay:.4s}
.cq[data-pas="6"] .cq-panneau .fx-acquis > *{animation:cqChip .5s var(--ease-out) .46s both}
@keyframes cqChip{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

/* --- le pied --- */
.cq-pied{
  position:relative;z-index:2;flex:none;
  display:flex;align-items:center;gap:16px;flex-wrap:wrap;
}
.cq-etat{
  flex:1;min-width:0;
  font-family:var(--font-tech);font-size:10px;letter-spacing:.26em;text-transform:uppercase;
  color:rgba(200,190,230,.4);
}
.cq-revoir{
  flex:none;cursor:pointer;padding:clamp(9px,1.7vh,13px) 20px;border-radius:0;
  background:transparent;border:1px solid rgba(140,128,220,.24);
  font-family:var(--font-tech);font-size:10px;letter-spacing:.26em;text-transform:uppercase;
  color:rgba(200,190,230,.55);transition:border-color .25s, color .25s;
}
.cq-revoir:hover{border-color:rgba(230,200,119,.5);color:var(--gold-bright)}
/* Tant que l.annonce n.est pas terminée, la porte de sortie reste éteinte :
   on ne quitte pas la Grande Salle avant le verdict. */
.cq-suite{flex:none;opacity:.25;pointer-events:none;transition:opacity .5s}
.cq[data-pas="6"] .cq-suite{opacity:1;pointer-events:auto}

@media(max-height:820px){
  .cq-prix{gap:12px}
  .cq-rang{padding:5px 12px;gap:12px}
  .cq-nom{flex:0 0 150px}
  .cq-place{width:34px}
}
@media(max-width:900px){
  .cq-prix{flex-direction:column}
  .cq-coupe{flex:none;padding:12px 0}
}

/* ============================================================================
   33. L’ATELIER
   ----------------------------------------------------------------------------
   Un document qui se remplit à mesure. À gauche l’objet de la matière, ce
   qu’on a déjà posé et où en est le travail ; à droite le geste en cours,
   puis le verdict.

   L’écran est le même pour les onze ateliers, et c’est voulu : on apprend
   une fois à le lire. Ce qui change, c’est l’objet de gauche, les mots de
   la jauge et le bouton de sortie, tout cela déclaré par matière dans
   js/ateliers_decor.js.

   L’objet est dessiné, jamais illustré, et il porte la jauge à lui seul :
   la coupe qui est encore un rat, la lampe qui ne s’allume pas, la fente
   du placard qui s’élargit, le mur qui approche. Sa teinte suit la
   justesse des gestes déjà faits, du vert au rose.

   Les animations sont toutes ici. Elles ne se relancent qu’entre deux
   gestes : rien ne repart de zéro au milieu d’un clic.
   ============================================================================ */

/* --- les Potions : le chaudron --- */
@keyframes atBulle{
  0%{transform:translateY(0);opacity:0}20%{opacity:.85}
  100%{transform:translateY(-34px);opacity:0}
}
@keyframes atVapeur{
  0%{transform:translateY(4px);opacity:0}40%{opacity:.6}
  100%{transform:translateY(-12px);opacity:0}
}
/* --- la Botanique : la terre qui tombe, les feuilles, le cri --- */
@keyframes atTerre{
  0%{transform:translateY(-7px);opacity:0}22%{opacity:.9}
  100%{transform:translateY(15px);opacity:0}
}
@keyframes atFeuille{0%,100%{transform:rotate(-3.5deg)}50%{transform:rotate(4deg)}}
@keyframes atCri{
  0%{transform:scale(.55);opacity:0}45%{opacity:.55}
  100%{transform:scale(1.3);opacity:0}
}
/* --- les Sortilèges : la plume qui frémit, décolle, ou tient --- */
@keyframes atFremir{
  0%,100%{transform:translate(0,0) rotate(-1deg)}
  25%{transform:translate(.5px,-1px) rotate(1.5deg)}
  60%{transform:translate(-.5px,0) rotate(-1.5deg)}
}
@keyframes atDecoller{
  0%,100%{transform:translateY(0) rotate(-1deg)}
  40%{transform:translateY(-9px) rotate(2deg)}
  62%{transform:translateY(-6px) rotate(0deg)}
}
@keyframes atTenir{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}
@keyframes atSouffle{
  0%{transform:scale(.6);opacity:0}45%{opacity:.5}
  100%{transform:scale(1.35);opacity:0}
}
/* --- les Créatures : le sabot, les plumes du cou, la tête qui s’incline --- */
@keyframes atSabot{
  0%,62%,100%{transform:translateX(0)}
  74%{transform:translateX(-3px)}86%{transform:translateX(1px)}
}
@keyframes atPlumes{0%,100%{transform:scaleY(.7);opacity:.45}50%{transform:scaleY(1.25);opacity:.95}}
@keyframes atInclin{0%,100%{transform:rotate(0deg)}50%{transform:rotate(9deg)}}
/* --- la Métamorphose : ce qui respire alors que ça ne devrait pas --- */
@keyframes atRespire{0%,100%{transform:scale(1)}45%{transform:scale(1.045)}}
@keyframes atRespireFaible{0%,100%{transform:scale(1)}45%{transform:scale(1.015)}}
@keyframes atPoil{0%,100%{transform:rotate(-2deg)}50%{transform:rotate(3deg)}}
@keyframes atMatiere{
  0%{transform:translateY(0);opacity:0}25%{opacity:.9}
  100%{transform:translateY(-44px);opacity:0}
}
/* --- la Défense : la porte qui bat, la fente, l’ombre qui déborde --- */
@keyframes atPorte{
  0%,100%{transform:translateX(0) skewY(0deg)}
  30%{transform:translateX(2.5px) skewY(.5deg)}
  65%{transform:translateX(-1px) skewY(-.3deg)}
}
@keyframes atFente{0%,100%{opacity:.5}50%{opacity:1}}
@keyframes atOmbre{0%,100%{transform:scaleX(1);opacity:.35}50%{transform:scaleX(1.22);opacity:.7}}
@keyframes atReplie{0%,100%{transform:scaleX(.9);opacity:.28}50%{transform:scaleX(1);opacity:.42}}
/* --- l’Astronomie : l’encre qui se pose, l’instrument qui dérive --- */
@keyframes atEncre{from{opacity:0;transform:scale(.4)}to{opacity:1;transform:scale(1)}}
@keyframes atTremble{
  0%,100%{transform:rotate(-.5deg) translateX(0)}
  35%{transform:rotate(.7deg) translateX(1px)}
  70%{transform:rotate(-.8deg) translateX(-1px)}
}
@keyframes atDerive{0%{transform:rotate(0deg)}100%{transform:rotate(2.4deg)}}
@keyframes atBuee{
  0%{transform:translate(0,0) scale(.6);opacity:0}45%{opacity:.45}
  100%{transform:translate(-7px,-5px) scale(1.3);opacity:0}
}
/* --- la Divination : la vapeur, le marc, et les formes qui hésitent --- */
@keyframes atThe{
  0%{transform:translateY(4px);opacity:0}40%{opacity:.55}
  100%{transform:translateY(-14px);opacity:0}
}
@keyframes atMarc{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}
@keyframes atHesite{0%,42%{opacity:.12}58%,100%{opacity:.85}}
/* --- l’Étude des Moldus : la lampe qui clignote, prend, ou ne fait rien --- */
@keyframes atClignote{
  0%,42%{opacity:.06}46%,54%{opacity:.55}58%{opacity:.1}72%{opacity:.42}100%{opacity:.08}
}
@keyframes atFaisceau{0%,100%{opacity:.34}50%{opacity:.5}}
@keyframes atAmpoule{0%,100%{opacity:.55}50%{opacity:1}}
@keyframes atMontage{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}
/* --- le Vol : le vent, le sol qui défile, la secousse --- */
@keyframes atVent{
  0%{transform:translateX(28px);opacity:0}25%{opacity:.85}
  100%{transform:translateX(-42px);opacity:0}
}
@keyframes atSol{0%{transform:translateX(0)}100%{transform:translateX(-24px)}}
@keyframes atSecousse{
  0%,100%{transform:translate(0,0)}
  30%{transform:translate(-1px,1.5px)}65%{transform:translate(1px,-1px)}
}
@keyframes atMesure{0%,100%{opacity:.4}50%{opacity:.9}}

.atelier{
  position:relative;width:100%;max-width:1240px;margin:0 auto;
  display:flex;flex-direction:column;
  padding:clamp(14px,2.4vh,34px) clamp(20px,4vw,66px) clamp(16px,2.4vh,32px);
  border:1px solid rgba(230,200,119,.2);
  background:var(--carte-fond);
  box-shadow:var(--e4), var(--inset-top);
  animation:rise .7s var(--ease-out) both;
}
.atelier > .grain{opacity:.5}
.atelier > .eq{position:absolute;width:16px;height:16px;pointer-events:none;z-index:2}
.atelier > .eq-tl{left:12px;top:12px;border-left:1px solid rgba(230,200,119,.45);border-top:1px solid rgba(230,200,119,.45)}
.atelier > .eq-tr{right:12px;top:12px;border-right:1px solid rgba(230,200,119,.45);border-top:1px solid rgba(230,200,119,.45)}
.atelier > .eq-bl{left:12px;bottom:12px;border-left:1px solid rgba(230,200,119,.45);border-bottom:1px solid rgba(230,200,119,.45)}
.atelier > .eq-br{right:12px;bottom:12px;border-right:1px solid rgba(230,200,119,.45);border-bottom:1px solid rgba(230,200,119,.45)}

.at-kicker{
  position:relative;flex:none;display:flex;align-items:center;gap:13px;
  font-family:var(--font-tech);font-size:10px;letter-spacing:.34em;text-transform:uppercase;
  color:rgba(230,200,119,.72);
}
.at-kicker > i{display:block;width:26px;height:1px;flex:none;background:rgba(230,200,119,.6)}
.at-kicker > span:not(.u-filet){white-space:nowrap}
.at-kicker em{
  font-style:normal;font-size:9px;letter-spacing:.26em;
  color:var(--parchment-mute);white-space:nowrap;
}
.at-titre{
  position:relative;flex:none;margin:clamp(9px,1.5vh,14px) 0 0;
  font-family:var(--font-title);font-weight:600;font-size:clamp(20px,2.6vw,36px);
  line-height:1.1;color:var(--gold-pale);text-shadow:0 0 48px rgba(230,200,119,.2);
}
.at-crans{
  position:relative;flex:none;display:flex;align-items:center;gap:9px;
  margin-top:clamp(9px,1.4vh,13px);
}
.at-crans > span{width:52px;height:4px;display:block;background:rgba(140,128,220,.2)}
.at-crans > span.fait{background:linear-gradient(90deg,#f4dda0,#cfa64c)}
.at-crans > span.ici{background:rgba(230,200,119,.45);box-shadow:0 0 12px -2px rgba(230,200,119,.9)}
.at-crans em{
  margin-left:6px;font-style:normal;
  font-family:var(--font-tech);font-size:9px;letter-spacing:.24em;text-transform:uppercase;
  color:var(--parchment-mute);white-space:nowrap;
}

.at-cols{
  position:relative;display:grid;
  grid-template-columns:repeat(auto-fit, minmax(min(100%,270px),1fr));
  gap:clamp(16px,2.4vw,38px);align-items:start;
  margin-top:clamp(14px,2.2vh,24px);
}
/* Au verdict, la colonne de droite porte le récit, les conséquences et le
   bouton : elle prend les trois cinquièmes. L’objet, lui, n’a plus rien à
   dire de nouveau. */
.atelier[data-phase="verdict"] .at-cols{
  grid-template-columns:minmax(0,1fr) minmax(0,1.5fr);
}

/* --- la colonne de l’objet --- */
.at-gauche{
  min-width:0;display:flex;flex-direction:column;align-items:center;
  gap:clamp(10px,1.6vh,16px);
}
/* L’objet de la matière. Il n’est pas centré par hasard : c’est la seule
   chose de l’écran qu’on regarde sans lire. */
.at-objet{position:relative;width:clamp(150px,15vw,212px);display:block}
.at-objet svg{display:block;width:100%}

.at-jetons{width:100%;display:flex;flex-wrap:wrap;gap:6px;justify-content:center}
.at-jeton{
  display:flex;align-items:center;gap:7px;cursor:default;
  padding:5px 11px;border:1px solid var(--t);background:rgba(10,8,30,.6);
  font-family:var(--font-tech);font-size:9px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--t);white-space:nowrap;
  animation:rise .4s var(--ease-out) both;
}
.at-jeton i{width:5px;height:5px;flex:none;transform:rotate(45deg);background:var(--t)}
.at-jauge{width:100%;display:flex;align-items:center;gap:11px;cursor:default}
.at-jauge .u-tech{font-size:9px;letter-spacing:.24em;color:rgba(200,190,230,.45);white-space:nowrap}
.at-crans-jauge{flex:1;display:flex;gap:2px}
.at-crans-jauge i{flex:1;height:4px;display:block;background:rgba(140,128,220,.16);transition:background .5s}
.at-jauge b{font-family:var(--font-title);font-weight:400;font-size:14px;white-space:nowrap}

/* --- la colonne du geste --- */
.at-droite{min-width:0;display:flex;flex-direction:column}
.at-geste,.at-fiole{display:flex;flex-direction:column}
/* L’intro se lit en entier, tous ses paragraphes, et seulement au premier
   geste. Le filet d’or à gauche dit que c’est une voix, pas une consigne. */
.at-intro{
  display:flex;flex-direction:column;gap:9px;
  margin:0 0 clamp(11px,1.7vh,17px);padding-left:15px;
  border-left:1px solid rgba(230,200,119,.32);
}
.at-intro p{
  margin:0;font-family:var(--font-body);font-size:clamp(15px,1.3vw,19px);
  line-height:1.55;font-style:italic;color:rgba(206,196,234,.66);text-wrap:pretty;
}
.at-texte{
  margin:0;font-family:var(--font-body);font-size:clamp(16px,1.4vw,20px);line-height:1.6;
  color:rgba(226,220,245,.82);text-wrap:pretty;
}
.at-texte b{font-weight:600;color:#f4ecd6}
.at-choix{display:flex;flex-direction:column;gap:clamp(7px,1.1vh,11px);margin-top:clamp(12px,1.9vh,18px)}
.at-option{
  position:relative;cursor:pointer;text-align:left;width:100%;border-radius:0;
  display:flex;flex-direction:column;gap:6px;
  padding:clamp(10px,1.5vh,14px) clamp(14px,1.6vw,20px);
  border:1px solid rgba(140,128,220,.24);
  border-left:2px solid rgba(140,128,220,.26);
  background:linear-gradient(165deg, rgba(30,24,74,.55), rgba(11,9,32,.7));
  transition:background .2s, border-color .2s, transform .2s;
}
.at-option:hover{
  background:linear-gradient(165deg, rgba(46,37,104,.7), rgba(14,11,38,.8));
  border-color:rgba(230,200,119,.5);transform:translateX(4px);
}
.at-option.ch-locked{opacity:.45;cursor:not-allowed}
.at-option.ch-locked:hover{transform:none}
/* Le numéro se lit partout pareil dans le jeu : un carré de 26 px, filet
   d’or, Jost interlettré. Un chiffre nu en Cinzel faisait de l’atelier le
   seul écran où une réponse ne ressemblait pas à une réponse. */
.at-option-tete{display:flex;align-items:center;gap:14px}
.at-option-num{
  flex:none;width:26px;height:26px;min-width:26px;
  display:flex;align-items:center;justify-content:center;
  border:1px solid rgba(230,200,119,.4);border-radius:0;background:none;
  font-family:var(--font-tech);font-size:11px;letter-spacing:.04em;color:var(--gold);
  transition:color var(--t),border-color var(--t),background var(--t);
}
.at-option:hover .at-option-num{
  background:rgba(230,200,119,.12);color:var(--gold-bright);border-color:rgba(230,200,119,.7);
}
/* Une réponse d’atelier se lit exactement comme une réponse de scène :
   Cormorant 19 px, interligne 1,4, même encre. Elle ne rétrécit sur aucun
   écran, sinon l’atelier devient le seul endroit du jeu où l’on répond en
   plus petit qu’ailleurs. */
.at-option-txt{
  flex:1;min-width:0;font-family:var(--font-body);font-size:19px;
  line-height:1.4;color:rgba(232,227,245,.88);text-wrap:pretty;
}
/* Aucun jeton de test sur la ligne d’un atelier : un « RÉUSSITE » en vert
   désigne la bonne réponse avant qu’on ait lu la question. Le seuil se lit
   dans l’infobulle, et un geste hors de portée se voit à son grisé. */
.at-option .ch-test{display:none}

/* --- le verdict --- */
.at-fiole-tete{display:flex;align-items:center;gap:clamp(12px,2vw,26px);flex-wrap:wrap}
.at-sceau{
  flex:none;width:clamp(66px,6.6vw,86px);height:clamp(66px,6.6vw,86px);
  display:flex;align-items:center;justify-content:center;
  border:1px solid var(--sc);
  background:linear-gradient(160deg, color-mix(in srgb, var(--sc) 13%, transparent), rgba(9,7,28,.8));
  box-shadow:0 0 40px -18px var(--sc);
  animation:sceauPose .6s var(--ease-out) both;
}
@keyframes sceauPose{from{opacity:0;transform:scale(.86)}to{opacity:1;transform:scale(1)}}
.at-fiole-txt{flex:1 1 200px;min-width:180px;display:flex;flex-direction:column;gap:7px}
.at-fiole-txt .u-tech{font-size:9.5px;letter-spacing:.3em}
.at-fiole-txt b{
  font-family:var(--font-title);font-weight:600;font-size:clamp(20px,2.2vw,30px);line-height:1.08;
  color:var(--gold-pale);
}
.at-fiole-txt em{
  font-style:normal;font-family:var(--font-tech);font-size:9px;letter-spacing:.24em;
  text-transform:uppercase;color:rgba(200,190,230,.45);
}
.at-fiole .at-texte{margin-top:clamp(11px,1.8vh,18px);max-width:52ch}

/* Les trois poids de conséquence gardent leur forme et leur ordre : ils
   se serrent seulement en lignes, une par ligne, nom à gauche et chiffre
   à droite, comme sur la maquette. Rien n’est retiré. */
.at-fiole .fx-bloc{margin-top:clamp(12px,1.9vh,18px);padding-top:0;border-top:0}
.at-fiole .fx-rangee{display:flex;flex-direction:column;gap:0}
.at-fiole .fx1{
  align-items:center;gap:11px;padding-bottom:7px;margin-bottom:9px;
  border-bottom:1px solid rgba(140,128,220,.16);
}
.at-fiole .fx1 .cb-embleme,.at-fiole .fx1 .cb-jeton{margin-top:0}
.at-fiole .fx1-jauge{display:none}
.at-fiole .fx1-nom{font-size:clamp(16px,1.3vw,19px)}
.at-fiole .fx1-lecture{font-size:10px}
.at-fiole .fx1-delta{font-family:var(--font-title);font-weight:600;font-size:17px}

/* --- le bouton de sortie, et son reflet qui passe --- */
.at-porte{display:flex;margin-top:clamp(14px,2.2vh,22px)}
.at-suite{
  position:relative;overflow:hidden;cursor:pointer;flex:1 1 240px;text-align:center;border-radius:0;
  padding:clamp(13px,1.9vh,18px) clamp(18px,2.4vw,34px);
  color:var(--or-encre);border:1px solid var(--gold-warm);background:var(--or-massif);
  box-shadow:0 26px 56px -26px rgba(230,200,119,.95);
  transition:transform .3s, box-shadow .3s;
}
.at-suite span{
  position:relative;font-family:var(--font-title);font-weight:600;
  font-size:clamp(12px,1.1vw,15px);letter-spacing:.26em;text-indent:.26em;text-transform:uppercase;
}
.at-suite:hover{transform:translateY(-2px);box-shadow:0 32px 66px -24px rgba(230,200,119,1)}
.at-lustre{
  position:absolute;top:0;bottom:0;width:80px;pointer-events:none;
  background:linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,.4), rgba(255,255,255,0));
  animation:shimmer 5s ease-in-out infinite;
}

@media(max-height:820px){
  .at-titre{font-size:clamp(19px,2.2vw,30px)}
  .at-intro p{font-size:15px;line-height:1.45}
  .at-texte{font-size:16px;line-height:1.5}
  /* La réponse, elle, ne bouge pas : c’est le seul texte de l’écran qui
     doit rester identique au reste du jeu. C’est l’air autour qui cède. */
  .at-option{padding:9px clamp(13px,1.5vw,18px)}
  .at-objet{width:clamp(120px,12vw,168px)}
  .at-sceau{width:clamp(54px,5.4vw,68px);height:clamp(54px,5.4vw,68px)}
  .at-fiole-txt b{font-size:clamp(18px,1.9vw,24px)}
  .at-fiole .fx1{margin-bottom:6px;padding-bottom:5px}
  .at-fiole .fx1-nom{font-size:16px}
  .at-porte{margin-top:12px}
  .at-suite{padding:11px clamp(16px,2vw,28px)}
}
@media(max-width:900px){
  .at-cols{grid-template-columns:1fr}
  .at-objet{width:clamp(110px,32vw,160px)}
}
@media(prefers-reduced-motion:reduce){
  .at-objet svg *{animation:none !important}
  .at-lustre,.at-jeton{animation:none}
}
/* ============================================================================
   34. LE MATCH DE QUIDDITCH
   ----------------------------------------------------------------------------
   Un tableau d.affichage : les deux blasons de part et d.autre du score, la
   dynamique du match sur un axe, et le Vif d.or qui dérive au fond tant qu.il
   n.est pas attrapé. Ses deux ailes battent séparément.
   ============================================================================ */
.qm{
  position:relative;width:100%;max-width:1240px;margin:0 auto;overflow:hidden;
  display:flex;flex-direction:column;
  padding:clamp(14px,2.4vh,34px) clamp(26px,4vw,66px) clamp(16px,2.4vh,32px);
  border:1px solid rgba(230,200,119,.2);
  background:linear-gradient(180deg, rgba(28,23,68,.72) 0%, rgba(12,10,34,.92) 100%);
  box-shadow:0 50px 110px -60px rgba(0,0,0,1), inset 0 1px 0 rgba(255,255,255,.06);
  animation:rise .7s var(--ease-out) both;
}
.qm > .eq{position:absolute;width:16px;height:16px;pointer-events:none;z-index:2}
.qm > .eq-tl{left:12px;top:12px;border-left:1px solid rgba(230,200,119,.45);border-top:1px solid rgba(230,200,119,.45)}
.qm > .eq-tr{right:12px;top:12px;border-right:1px solid rgba(230,200,119,.45);border-top:1px solid rgba(230,200,119,.45)}
.qm > .eq-bl{left:12px;bottom:12px;border-left:1px solid rgba(230,200,119,.45);border-bottom:1px solid rgba(230,200,119,.45)}
.qm > .eq-br{right:12px;bottom:12px;border-right:1px solid rgba(230,200,119,.45);border-bottom:1px solid rgba(230,200,119,.45)}

/* --- le Vif d’or, au fond --- */
.qm-vif{
  position:absolute;right:7%;top:3%;width:132px;pointer-events:none;opacity:.17;
  animation:qmDerive 22s ease-in-out infinite;
}
@keyframes qmDerive{
  0%{transform:translate(0,0) rotate(-3deg)}
  22%{transform:translate(-38px,26px) rotate(4deg)}
  45%{transform:translate(14px,54px) rotate(-2deg)}
  68%{transform:translate(-24px,18px) rotate(5deg)}
  100%{transform:translate(0,0) rotate(-3deg)}
}
.qm-aile{animation:qmBat 2.6s ease-in-out infinite}
.qm-aile-g{transform-origin:50px 26px}
.qm-aile-d{transform-origin:82px 26px}
@keyframes qmBat{0%,100%{transform:scaleY(1)}50%{transform:scaleY(.72)}}
/* Le Vif attrapé ne dérive plus : il est dans une main. */
.qm.vif-tombe .qm-vif{animation-play-state:paused;opacity:.08}
.qm.vif-tombe .qm-aile{animation:none}

/* --- l’en-tête --- */
.qm-kicker{
  position:relative;z-index:2;flex:none;display:flex;align-items:center;gap:13px;
  font-family:var(--font-tech);font-size:10px;letter-spacing:.34em;text-transform:uppercase;
  color:rgba(230,200,119,.72);
}
.qm-kicker > i{display:block;width:26px;height:1px;flex:none;background:rgba(230,200,119,.6)}
.qm-kicker > span:not(.u-filet):not(.qm-vif-etat){white-space:nowrap}
.qm-vif-etat{display:flex;align-items:center;gap:9px;white-space:nowrap}
.qm-vif-etat em{
  font-style:normal;font-size:9px;letter-spacing:.26em;color:rgba(230,200,119,.7);
}
.qm-vif-chip{
  flex:none;width:20px;height:20px;display:flex;align-items:center;justify-content:center;
  border:1px solid rgba(230,200,119,.45);background:rgba(230,200,119,.1);
  animation:glowPulse 2.6s ease-in-out infinite;
}
.qm.vif-tombe .qm-vif-chip{animation:none;border-color:rgba(230,200,119,.25)}

/* Les temps du match, en crans, dans l’en-tête : un match dure deux à
   quatre moments décisifs, et on sait toujours où l’on en est. */
.qm-pas{display:flex;align-items:center;gap:4px;flex:none}
.qm-pas i{display:block;width:14px;height:3px;background:rgba(140,128,220,.24);transition:background .4s}
.qm-pas i.fait{background:rgba(230,200,119,.5)}
.qm-pas i.ici{background:#f4dda0;box-shadow:0 0 8px rgba(244,221,160,.75)}

/* --- le tableau d’affichage --- */
.qm-tableau{
  position:relative;z-index:2;flex:none;
  display:grid;grid-template-columns:1fr auto 1fr;align-items:center;
  gap:clamp(12px,2.4vw,36px);
  margin-top:clamp(10px,2vh,20px);
  padding:clamp(12px,2.2vh,22px) clamp(14px,2.4vw,34px);
  border:1px solid rgba(230,200,119,.24);
  background:linear-gradient(180deg, rgba(30,24,74,.6), rgba(11,9,32,.8));
}
.qm-tableau > .eq{position:absolute;width:12px;height:12px;pointer-events:none}
.qm-tableau > .eq-tl{left:7px;top:7px;border-left:1px solid rgba(230,200,119,.42);border-top:1px solid rgba(230,200,119,.42)}
.qm-tableau > .eq-br{right:7px;bottom:7px;border-right:1px solid rgba(230,200,119,.42);border-bottom:1px solid rgba(230,200,119,.42)}
.qm-camp{min-width:0;display:flex;align-items:center;gap:clamp(10px,1.6vw,22px)}
.qm-nous{justify-content:flex-end}
.qm-camp-txt{min-width:0}
.qm-nous .qm-camp-txt{text-align:right}
.qm-camp-txt b{
  display:block;font-family:var(--font-title);font-weight:600;
  font-size:clamp(17px,1.7vw,24px);letter-spacing:.08em;color:#f4ecd6;white-space:nowrap;
}
.qm-eux .qm-camp-txt b{color:rgba(226,220,245,.85)}
.qm-camp-txt span{
  display:block;margin-top:4px;
  font-family:var(--font-tech);font-size:9px;letter-spacing:.26em;text-transform:uppercase;
  color:rgba(200,190,230,.45);white-space:nowrap;
}
/* Le blason garde son disque : c’est l’une des deux exceptions à
   l’angle vif, et la maquette le pose en médaillon, pas en image
   posée à plat. */
.qm-ecu{
  flex:none;width:clamp(46px,5.4vw,72px);height:clamp(46px,5.4vw,72px);
  display:flex;align-items:center;justify-content:center;border-radius:50%;
  border:1px solid rgba(230,200,119,.3);
  background:radial-gradient(circle at 50% 32%, rgba(54,46,116,.9), rgba(11,9,32,.95));
  box-shadow:0 10px 30px -14px rgba(0,0,0,.95), inset 0 1px 0 rgba(255,255,255,.06);
}
.qm-ecu img,.qm-ecu .blason{
  width:62%;height:62%;object-fit:contain;filter:drop-shadow(0 3px 8px rgba(0,0,0,.6));
}
.qm-score{display:flex;flex-direction:column;align-items:center;gap:6px}
.qm-chiffres{display:flex;align-items:baseline;gap:clamp(9px,1.4vw,18px)}
.qm-chiffres b{
  font-family:var(--font-title);font-weight:600;font-size:clamp(34px,4vw,54px);line-height:1;
  color:var(--gold-pale);text-shadow:0 0 34px rgba(230,200,119,.45);
  font-variant-numeric:tabular-nums;transition:color .4s;
}
/* Un but ne se contente pas de changer un chiffre : le chiffre le dit.
   Deux classes jumelles, parce que rejouer une animation demande que
   le nom de l’animation change, et pas seulement le texte. */
@keyframes qmButA{
  0%{transform:scale(1)}
  30%{transform:scale(1.2);text-shadow:0 0 44px rgba(230,200,119,.95)}
  100%{transform:scale(1)}
}
@keyframes qmButB{
  0%{transform:scale(1)}
  30%{transform:scale(1.2);text-shadow:0 0 44px rgba(230,200,119,.95)}
  100%{transform:scale(1)}
}
.qm-chiffres b.but-a{animation:qmButA .85s var(--ease-out)}
.qm-chiffres b.but-b{animation:qmButB .85s var(--ease-out)}
.qm-chiffres .qm-eux-pts{color:rgba(226,220,245,.82);text-shadow:none}
.qm-chiffres em{
  font-style:normal;font-family:var(--font-tech);font-size:11px;letter-spacing:.3em;
  text-transform:uppercase;color:rgba(230,200,119,.6);
}
.qm-avance{
  font-family:var(--font-tech);font-size:9px;letter-spacing:.26em;text-transform:uppercase;
  white-space:nowrap;
}
.qm-avance.devant{color:rgba(143,214,165,.8)}
.qm-avance.derriere{color:rgba(212,101,124,.8)}

/* --- la dynamique --- */
.qm-dynamique{
  position:relative;z-index:2;flex:none;cursor:default;
  display:flex;align-items:center;gap:14px;margin-top:clamp(8px,1.6vh,16px);
}
.qm-dynamique .u-tech{font-size:9px;letter-spacing:.26em;color:rgba(200,190,230,.45);white-space:nowrap}
.qm-dynamique em{
  font-style:normal;font-family:var(--font-tech);font-size:9px;letter-spacing:.22em;
  text-transform:uppercase;color:rgba(230,200,119,.7);white-space:nowrap;
}
.qm-axe{
  position:relative;flex:1;height:5px;
  background:linear-gradient(90deg, #2f6ea8 0%, rgba(60,50,110,.5) 50%, #3f8f5f 100%);
}
.qm-axe i{
  position:absolute;top:-4px;width:2px;height:13px;display:block;
  background:#f4dda0;box-shadow:0 0 10px rgba(244,221,160,.9);
  transition:left .9s cubic-bezier(.16,.9,.28,1);
}

/* --- le moment décisif --- */
.qm-jeu{position:relative;z-index:2;flex:none;display:flex;flex-direction:column;margin-top:clamp(10px,2vh,20px)}
.qm:not([data-etat="jeu"]) .qm-jeu{display:none}
/* Le bloc de jeu reste en place d’un temps à l’autre : ce sont ses
   deux classes jumelles qui rejouent l’entrée quand le texte change. */
@keyframes qmDitA{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@keyframes qmDitB{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.qm-jeu.qm-dit-a{animation:qmDitA .5s var(--ease-out) both}
.qm-jeu.qm-dit-b{animation:qmDitB .5s var(--ease-out) both}
.qm-texte{
  margin:0;max-width:76ch;
  font-family:var(--font-body);font-size:clamp(16px,1.4vw,20px);line-height:1.6;
  color:rgba(226,220,245,.82);text-wrap:pretty;
}
.qm-texte em{font-style:italic;color:var(--gold-warm)}
.qm-actions{display:flex;flex-direction:column;gap:clamp(7px,1.1vh,12px);margin-top:clamp(10px,2vh,20px)}
.qm-action{
  position:relative;cursor:pointer;width:100%;text-align:left;border-radius:0;
  display:flex;align-items:center;gap:clamp(12px,1.6vw,22px);
  padding:clamp(10px,1.6vh,16px) clamp(14px,1.8vw,24px);
  border:1px solid rgba(140,128,220,.24);border-left:2px solid var(--ton);
  background:linear-gradient(165deg, rgba(30,24,74,.55), rgba(11,9,32,.7));
  transition:background .2s, border-color .2s, transform .2s;
}
.qm-action:hover{
  background:linear-gradient(165deg, rgba(46,37,104,.7), rgba(14,11,38,.8));
  border-color:rgba(230,200,119,.5);transform:translateX(4px);
}
.qm-num{
  flex:none;width:30px;height:30px;display:flex;align-items:center;justify-content:center;
  border:1px solid rgba(230,200,119,.4);background:rgba(230,200,119,.1);
  font-family:var(--font-title);font-size:15px;color:var(--gold-warm);
}
.qm-action-corps{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:4px}
.qm-action-txt{
  font-family:var(--font-body);font-size:clamp(16px,1.45vw,21px);line-height:1.3;
  color:rgba(240,236,252,.9);text-wrap:pretty;
}
.qm-action-corps .u-tech{font-size:9px;letter-spacing:.2em;color:rgba(200,190,230,.45)}
/* La cote du geste et ce qu’il rapporte ne s’affichent plus : voir
   poserTemps, dans js/activities.js. */

/* --- le résultat d’un geste --- */
.qm-res{position:relative;z-index:2;flex:none;display:none;flex-direction:column;margin-top:clamp(10px,2vh,20px)}
.qm[data-etat="resultat"] .qm-res{display:flex;animation:rise .5s var(--ease-out) both}
.qm-res-tete{display:flex;align-items:center;gap:14px}
.qm-res-tete .u-tech{font-size:10px;letter-spacing:.32em;white-space:nowrap}
.qm-res-titre{
  margin-top:clamp(7px,1.4vh,14px);
  font-family:var(--font-title);font-weight:600;font-size:clamp(19px,2vw,28px);line-height:1.14;
  color:var(--gold-pale);
}
.qm-verdict{
  font-family:var(--font-title);font-weight:600;font-size:clamp(18px,2vw,26px);
  letter-spacing:.1em;text-transform:uppercase;white-space:nowrap;
}
.qm-res .qm-texte{margin-top:clamp(8px,1.5vh,14px)}
.qm-res .fx-bloc,.qm-final .fx-bloc{margin-top:clamp(10px,2vh,20px)}

/* --- le dernier écran : qui gagne, et où en est la saison --- */
.qm-final{position:relative;z-index:2;flex:none;display:none;flex-direction:column;margin-top:clamp(10px,2vh,20px)}
.qm[data-etat="fini"] .qm-final{display:flex;animation:rise .5s var(--ease-out) both}
.qm-fin-tete{display:flex;align-items:center;gap:clamp(12px,1.6vw,20px)}
.qm-sceau{
  flex:none;width:46px;height:46px;display:flex;align-items:center;justify-content:center;
  border:1px solid;font-family:var(--font-title);font-size:20px;
}
.qm-fin-txt{min-width:0;display:flex;flex-direction:column;gap:3px}
.qm-fin-txt .u-tech{font-size:10px;letter-spacing:.3em}
.qm-fin-txt b{
  font-family:var(--font-title);font-weight:600;font-size:clamp(20px,2.2vw,30px);
  letter-spacing:.05em;color:var(--gold-pale);
}
.qm-fin-txt em{
  font-style:normal;font-family:var(--font-tech);font-size:9px;letter-spacing:.24em;
  text-transform:uppercase;color:rgba(200,190,230,.5);
}
.qm-final .qm-texte{margin-top:clamp(9px,1.6vh,15px)}
/* Le bilan et le classement se lisent côte à côte : ce qui t’arrive à
   gauche, ce qu’il en reste à la saison à droite. Sous mille pixels,
   ils reprennent la colonne, l’un sous l’autre. */
.qm-fin-cols{display:grid;grid-template-columns:1fr;gap:clamp(12px,2vh,20px);margin-top:clamp(10px,2vh,18px)}
.qm-fin-cols > .fx-bloc,.qm-fin-cols > .qm-classement{margin-top:0;min-width:0}
@media(min-width:1000px){
  .qm-fin-cols{grid-template-columns:1fr 1fr;gap:clamp(20px,2.6vw,38px);align-items:start}
}

/* Le classement de la saison : quatre lignes, la tienne en or, et les
   points marqués en crans, jamais en barre lisse. */
.qm-classement{display:flex;flex-direction:column;margin-top:clamp(12px,2vh,20px)}
.qm-cl-tete{display:flex;align-items:center;gap:14px}
.qm-cl-tete em{
  font-style:normal;font-family:var(--font-tech);font-size:9px;letter-spacing:.2em;
  text-transform:uppercase;color:rgba(200,190,230,.42);white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis;max-width:44%;
}
.qm-cl-ligne{
  display:flex;align-items:center;gap:clamp(9px,1.2vw,16px);cursor:default;
  padding:7px 10px;margin:0 -10px;border-bottom:1px solid rgba(140,128,220,.14);
  transition:background .2s;
}
.qm-cl-ligne:hover{background:rgba(140,128,220,.08)}
.qm-cl-ligne.moi{background:rgba(230,200,119,.06);border-bottom-color:rgba(230,200,119,.24)}
.qm-cl-rang{
  flex:none;width:22px;font-family:var(--font-title);font-size:15px;
  color:rgba(200,190,230,.5);text-align:center;
}
.qm-cl-ligne.moi .qm-cl-rang{color:var(--gold-warm)}
.qm-cl-ecu{flex:none;width:26px;height:26px;display:flex;align-items:center;justify-content:center}
.qm-cl-ecu .blason{width:100%;height:100%;object-fit:contain}
.qm-cl-nom{
  flex:1 1 auto;min-width:0;font-family:var(--font-body);font-size:clamp(16px,1.3vw,19px);
  color:rgba(226,220,245,.78);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.qm-cl-ligne.moi .qm-cl-nom{color:#f4ecd6}
.qm-cl-bilan{
  flex:none;font-family:var(--font-tech);font-size:9px;letter-spacing:.2em;text-transform:uppercase;
  color:rgba(200,190,230,.45);white-space:nowrap;
}
.qm-cl-crans{flex:none;display:flex;gap:2px}
.qm-cl-crans i{display:block;width:9px;height:4px;background:rgba(140,128,220,.16)}
.qm-cl-crans i.on{background:#6f61b8}
.qm-cl-ligne.moi .qm-cl-crans i.on{background:linear-gradient(90deg,#e0bd6d,#f7e6b4)}
.qm-cl-pts{
  flex:none;min-width:44px;text-align:right;font-family:var(--font-title);font-size:17px;
  color:rgba(200,190,230,.6);font-variant-numeric:tabular-nums;
}
.qm-cl-ligne.moi .qm-cl-pts{color:var(--gold-warm);text-shadow:0 0 14px rgba(240,215,140,.5)}
.qm-porte{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-top:clamp(12px,2.2vh,24px)}
.qm-porte .hv-entrer{flex:1 1 240px;text-align:center}
.qm-mot{
  flex:2 1 280px;font-family:var(--font-body);font-size:clamp(14px,1.2vw,18px);
  font-style:italic;color:rgba(200,190,230,.5);text-wrap:pretty;
}

@media(max-width:900px){
  .qm-tableau{grid-template-columns:1fr;gap:12px;text-align:center}
  .qm-nous,.qm-eux{justify-content:center}
  .qm-nous .qm-camp-txt{text-align:center}
  .qm-vif{display:none}
  .qm-action{flex-wrap:wrap}
  .qm-cl-bilan,.qm-cl-crans{display:none}
}
/* Un match tient en un écran, jusqu’au dernier temps où s’ajoutent le
   verdict et le classement. Sur un écran court, on resserre les
   respirations : on ne retire ni une ligne du classement, ni un effet. */
@media(max-height:860px){
  .qm{padding:clamp(12px,2vh,24px) clamp(20px,3.4vw,52px) clamp(12px,1.8vh,24px)}
  .qm-tableau{padding:clamp(10px,1.6vh,16px) clamp(14px,2vw,26px)}
  .qm-action{padding:clamp(8px,1.2vh,12px) clamp(12px,1.6vw,20px)}
  .qm-cl-ligne{padding:4px 10px}
  .qm-classement{margin-top:12px}
  .qm-sceau{width:38px;height:38px;font-size:17px}
  .qm-final .qm-texte{font-size:clamp(15px,1.3vw,18px);margin-top:8px}
  .qm-fin-txt b{font-size:clamp(18px,2vw,26px)}
  .qm-fin-cols{margin-top:10px}
  .qm-porte{margin-top:12px}
}

/* Les six destins, sur l’écran d’accueil : une annonce, pas des
   conséquences. Ils n’empruntent donc pas le vocabulaire des trois
   poids, qui est réservé à ce qui vient de t’arriver. */
.sb-destins{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.sb-destins span{
  padding:6px 12px;border:1px solid rgba(140,128,220,.24);
  font-family:var(--font-tech);font-size:10px;letter-spacing:.22em;text-transform:uppercase;
  color:rgba(226,220,245,.72);
}

/* Le relevé sur un écran court. Un examen a onze matières, deux colonnes
   de portes et une signature : c’est un document dense par nature. On
   resserre les respirations, on ne retire ni une matière ni une porte.

   Premier cran dès mille pixels de haut : à neuf cents, le document
   dépassait encore de deux cents pixels, et personne ne fait défiler un
   bulletin de notes pour trouver le bouton. */
@media(max-height:1000px){
  .releve{padding:clamp(12px,2vh,22px) clamp(18px,3.4vw,48px) clamp(14px,2vh,22px)}
  .rl-titre{font-size:clamp(18px,1.8vw,25px)}
  .rl-cols{margin-top:12px}
  .rl-ligne{padding:4px 13px}
  .rl-nom{font-size:18px}
  .rl-chip{width:27px;height:27px;font-size:15px}
  .rl-mot{margin-top:12px;font-size:16px}
  .rl-portes{margin-top:12px}
  .rl-porte span:not(.u-tech){font-size:16px}
}
@media(max-height:820px){
  .releve{padding:clamp(10px,1.8vh,18px) clamp(16px,3vw,40px) clamp(12px,1.8vh,18px)}
  .rl-titre{font-size:clamp(17px,1.7vw,22px);margin-top:6px}
  .rl-session{margin-top:6px}
  .rl-cols{margin-top:10px;gap:14px}
  .rl-ligne{padding:3px 12px;gap:12px}
  .rl-nom{font-size:16px}
  .rl-chip{width:24px;height:24px;font-size:14px}
  .rl-case{padding:7px 12px}
  .rl-case b{font-size:16px}
  .rl-mot{margin-top:10px;font-size:15px}
  .rl-portes{margin-top:10px;gap:10px}
  .rl-porte{padding:8px 12px}
  .rl-porte span:not(.u-tech){font-size:15px}
  .rl-pied{margin-top:10px}
}

/* ============================================================================
   35. LES SÉLECTIONS DE QUIDDITCH
   ----------------------------------------------------------------------------
   Le même document que le match, plus tôt dans l.année : le Vif d.or dérive
   déjà au fond, et ton niveau de vol est encadré en haut à droite parce que
   c.est lui, et lui seul, qui décide de ce que le capitaine voit.

   Les quatre postes sont des cartes, pas des lignes : on les compare d.un
   coup d.œil, avec leur cote et leur exigence.
   ============================================================================ */
.qs{
  position:relative;width:100%;max-width:1240px;margin:0 auto;overflow:hidden;
  display:flex;flex-direction:column;
  padding:clamp(14px,2.8vh,40px) clamp(20px,4.4vw,72px) clamp(16px,2.8vh,36px);
  border:1px solid rgba(230,200,119,.2);
  background:linear-gradient(180deg, rgba(28,23,68,.72) 0%, rgba(12,10,34,.92) 100%);
  box-shadow:0 50px 110px -60px rgba(0,0,0,1), inset 0 1px 0 rgba(255,255,255,.06);
  animation:rise .7s var(--ease-out) both;
}
.qs > .eq{position:absolute;width:16px;height:16px;pointer-events:none;z-index:2}
.qs > .eq-tl{left:12px;top:12px;border-left:1px solid rgba(230,200,119,.45);border-top:1px solid rgba(230,200,119,.45)}
.qs > .eq-tr{right:12px;top:12px;border-right:1px solid rgba(230,200,119,.45);border-top:1px solid rgba(230,200,119,.45)}
.qs > .eq-bl{left:12px;bottom:12px;border-left:1px solid rgba(230,200,119,.45);border-bottom:1px solid rgba(230,200,119,.45)}
.qs > .eq-br{right:12px;bottom:12px;border-right:1px solid rgba(230,200,119,.45);border-bottom:1px solid rgba(230,200,119,.45)}
.qs .qm-vif{opacity:.14}

.qs-tete{
  position:relative;z-index:2;flex:none;
  display:flex;align-items:flex-end;justify-content:space-between;
  gap:clamp(14px,3vw,40px);flex-wrap:wrap;
  padding-bottom:clamp(9px,1.8vh,18px);border-bottom:1px solid rgba(230,200,119,.2);
}
.qs-tete-g{flex:1 1 420px;min-width:280px}
.qs-kicker{
  display:flex;align-items:center;gap:13px;
  font-family:var(--font-tech);font-size:10px;letter-spacing:.34em;text-transform:uppercase;
  color:rgba(230,200,119,.72);white-space:nowrap;
}
.qs-kicker i{display:block;width:26px;height:1px;flex:none;background:rgba(230,200,119,.6)}
.qs-titre{
  margin:clamp(8px,1.5vh,14px) 0 0;
  font-family:var(--font-title);font-weight:600;font-size:clamp(20px,2.6vw,36px);
  line-height:1.1;color:var(--gold-pale);text-shadow:0 0 48px rgba(230,200,119,.2);
}
.qs-texte{
  margin:clamp(7px,1.4vh,14px) 0 0;max-width:62ch;
  font-family:var(--font-body);font-size:clamp(16px,1.35vw,20px);line-height:1.6;
  color:rgba(226,220,245,.8);text-wrap:pretty;
}
.qs-vol{
  flex:none;cursor:default;display:flex;flex-direction:column;align-items:flex-end;gap:8px;
  padding:12px 18px;border:1px solid rgba(140,128,220,.28);background:rgba(10,8,30,.6);
}
.qs-vol .u-tech{font-size:9px;letter-spacing:.3em;color:rgba(200,190,230,.5);white-space:nowrap}
.qs-vol-chiffre{display:flex;align-items:baseline;gap:9px}
.qs-vol-chiffre b{
  font-family:var(--font-title);font-weight:600;font-size:clamp(22px,2.6vw,34px);line-height:1;
  color:var(--gold-warm);text-shadow:0 0 26px rgba(230,200,119,.4);
}
.qs-vol-chiffre em{
  font-style:normal;font-family:var(--font-tech);font-size:10px;letter-spacing:.24em;
  text-transform:uppercase;color:rgba(200,190,230,.45);
}
.qs-vol-crans{display:flex;gap:2px}
.qs-vol-crans i{width:9px;height:5px;display:block;background:rgba(140,128,220,.16)}
.qs-vol-crans i.on{background:linear-gradient(180deg,#f4dda0,#cfa64c);box-shadow:0 0 8px -2px rgba(230,200,119,.9)}

.qs-postes{
  position:relative;z-index:2;flex:none;display:grid;
  grid-template-columns:repeat(auto-fit, minmax(min(100%,250px),1fr));
  gap:clamp(10px,1.4vw,18px);margin-top:clamp(14px,2.4vh,26px);
}
.qs[data-etat="fini"] .qs-postes,.qs[data-etat="fini"] .qs-refus{display:none}
.qs-poste{
  position:relative;cursor:pointer;text-align:left;border-radius:0;
  display:flex;flex-direction:column;gap:9px;
  padding:clamp(11px,1.9vh,18px) clamp(12px,1.4vw,20px);
  border:1px solid rgba(140,128,220,.26);
  background:linear-gradient(165deg, rgba(30,24,74,.6), rgba(11,9,32,.78));
  transition:border-color .2s, transform .2s, background .2s;
}
.qs-poste:hover{
  border-color:rgba(230,200,119,.6);transform:translateY(-3px);
  background:linear-gradient(165deg, rgba(44,35,100,.7), rgba(14,11,38,.82));
}
.qs-poste.ferme{cursor:not-allowed;opacity:.6}
.qs-poste.ferme:hover{transform:none;border-color:rgba(212,101,124,.4)}
.qs-poste > .eq{position:absolute;width:10px;height:10px;pointer-events:none}
.qs-poste > .eq-tl{left:6px;top:6px;border-left:1px solid var(--ton);border-top:1px solid var(--ton)}
.qs-poste > .eq-br{right:6px;bottom:6px;border-right:1px solid var(--ton);border-bottom:1px solid var(--ton)}
.qs-poste-tete{display:flex;align-items:center;justify-content:space-between;gap:10px}
.qs-poste-ico{
  width:30px;height:30px;display:flex;align-items:center;justify-content:center;
  color:var(--ton);border:1px solid color-mix(in srgb, var(--ton) 45%, transparent);
  background:linear-gradient(180deg, color-mix(in srgb, var(--ton) 14%, transparent), rgba(10,8,30,.8));
}
.qs-poste-tete .u-tech{font-size:9px;letter-spacing:.24em;color:rgba(200,190,230,.42)}
.qs-poste-nom{
  font-family:var(--font-title);font-weight:600;font-size:clamp(17px,1.6vw,22px);line-height:1.1;
  color:#f4ecd6;
}
.qs-poste-desc{
  font-family:var(--font-body);font-size:clamp(15px,1.25vw,18px);font-style:italic;
  line-height:1.4;color:rgba(200,190,230,.6);text-wrap:pretty;
}
.qs-poste-pied{
  margin-top:auto;padding-top:9px;border-top:1px solid rgba(140,128,220,.16);
  display:flex;align-items:center;justify-content:space-between;gap:10px;
}
.qs-poste-pied .u-tech{font-size:9px;letter-spacing:.2em;color:rgba(200,190,230,.45);white-space:nowrap}
.qs-poste-cote{font-family:var(--font-title);font-size:14px;letter-spacing:.06em;white-space:nowrap}
/* Les dix crans de la cote d’être pris ne s’affichent plus : voir
   renderQuidditchSelection, dans js/activities.js. */

.qs-refus{
  position:relative;z-index:2;flex:none;cursor:pointer;width:100%;text-align:left;border-radius:0;
  display:flex;align-items:center;gap:16px;
  margin-top:clamp(9px,1.6vh,16px);padding:clamp(10px,1.6vh,15px) 20px;
  border:1px solid rgba(140,128,220,.2);border-left:2px solid rgba(212,101,124,.5);
  background:rgba(12,10,34,.5);transition:background .2s, border-color .2s;
}
.qs-refus:hover{background:rgba(212,101,124,.07);border-color:rgba(212,101,124,.45)}
.qs-refus > span{
  flex:1;min-width:0;font-family:var(--font-body);font-size:clamp(16px,1.35vw,20px);
  color:rgba(226,220,245,.78);
}
.qs-refus em{
  flex:none;font-family:var(--font-body);font-size:clamp(14px,1.2vw,17px);font-style:italic;
  color:rgba(200,190,230,.45);
}

.qs-res{position:relative;z-index:2;flex:none;display:none;flex-direction:column;margin-top:clamp(12px,2.4vh,26px)}
.qs[data-etat="fini"] .qs-res{display:flex;animation:rise .5s var(--ease-out) both}
.qs-res-tete{display:flex;align-items:center;gap:clamp(14px,2.4vw,32px);flex-wrap:wrap}
.qs-sceau{
  flex:none;width:clamp(56px,7vw,80px);height:clamp(56px,7vw,80px);
  display:flex;align-items:center;justify-content:center;
  font-family:var(--font-title);font-size:clamp(26px,3vw,38px);border:1px solid;
  animation:sceauPose .6s var(--ease-out) both;
}
.qs-res-txt{flex:1 1 300px;min-width:260px;display:flex;flex-direction:column;gap:8px}
.qs-res-txt .u-tech{font-size:10px;letter-spacing:.34em}
.qs-res-txt b{
  font-family:var(--font-title);font-weight:600;font-size:clamp(20px,2.6vw,36px);line-height:1.08;
  color:var(--gold-pale);text-shadow:0 0 44px rgba(230,200,119,.22);
}
.qs-res .qs-texte{margin-top:clamp(10px,2vh,20px);max-width:74ch}
.qs-res .fx-bloc{margin-top:clamp(12px,2.2vh,24px)}
.qs-porte{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-top:clamp(14px,2.6vh,28px)}
.qs-porte .hv-entrer{flex:1 1 260px;text-align:center}
.qs-mot{
  flex:2 1 300px;font-family:var(--font-body);font-size:clamp(14px,1.2vw,18px);
  font-style:italic;color:rgba(200,190,230,.5);text-wrap:pretty;
}
@media(max-width:900px){ .qs .qm-vif{display:none} .qs-refus{flex-wrap:wrap} }

/* ============================================================================
   36. LA SALLE D.EXAMEN
   ----------------------------------------------------------------------------
   Le même document que la convocation et le relevé, entre les deux. Son
   en-tête tient en trois choses : quelle épreuve, combien de secondes, et
   combien de sable il reste. Le sablier est dessiné et il coule vraiment :
   le sable du haut descend, celui du bas monte, et le filet entre les deux
   ne s.arrête qu.au moment où la copie est jugée.
   ============================================================================ */
.examen{
  position:relative;width:100%;max-width:1240px;margin:0 auto;
  display:flex;flex-direction:column;
  padding:clamp(14px,2.6vh,36px) clamp(20px,4vw,64px) clamp(16px,2.6vh,34px);
  border:1px solid rgba(230,200,119,.2);
  background:linear-gradient(180deg, rgba(28,23,68,.72) 0%, rgba(12,10,34,.92) 100%);
  box-shadow:0 50px 110px -60px rgba(0,0,0,1), inset 0 1px 0 rgba(255,255,255,.06);
  animation:rise .5s var(--ease-out) both;
}
.examen > .eq{position:absolute;width:16px;height:16px;pointer-events:none}
.examen > .eq-tl{left:12px;top:12px;border-left:1px solid rgba(230,200,119,.45);border-top:1px solid rgba(230,200,119,.45)}
.examen > .eq-tr{right:12px;top:12px;border-right:1px solid rgba(230,200,119,.45);border-top:1px solid rgba(230,200,119,.45)}
.examen > .eq-bl{left:12px;bottom:12px;border-left:1px solid rgba(230,200,119,.45);border-bottom:1px solid rgba(230,200,119,.45)}
.examen > .eq-br{right:12px;bottom:12px;border-right:1px solid rgba(230,200,119,.45);border-bottom:1px solid rgba(230,200,119,.45)}

.ex-tete{
  position:relative;flex:none;
  display:flex;align-items:center;gap:clamp(12px,2vw,26px);flex-wrap:wrap;
  padding-bottom:clamp(9px,1.6vh,16px);border-bottom:1px solid rgba(230,200,119,.2);
}
.ex-matiere{flex:1 1 260px;min-width:220px;display:flex;align-items:center;gap:13px}
.ex-ico{
  flex:none;width:34px;height:34px;display:flex;align-items:center;justify-content:center;
  border:1px solid;
}
.ex-compte{
  display:block;font-size:9.5px;letter-spacing:.32em;color:rgba(200,190,230,.5);white-space:nowrap;
}
.ex-sujet{
  display:block;margin-top:4px;font-family:var(--font-title);
  font-size:clamp(16px,1.5vw,20px);letter-spacing:.1em;color:var(--gold-warm);white-space:nowrap;
}
.ex-chrono{flex:none;display:flex;align-items:center;gap:clamp(10px,1.4vw,18px)}
.ex-sablier{flex:none;display:block}
.ex-sablier-svg{display:block}
.ex-secondes{display:flex;flex-direction:column;align-items:flex-end;gap:5px}
.ex-secondes b{
  font-family:var(--font-title);font-weight:600;font-size:clamp(22px,2.4vw,30px);line-height:1;
  color:var(--gold-warm);font-variant-numeric:tabular-nums;
}
.ex-secondes .u-tech{font-size:9px;letter-spacing:.3em;color:rgba(200,190,230,.45)}
/* Les vingt crans de sable, une seconde chacun. */
.ex-sable{flex:1 1 100%;display:flex;gap:2px}
.ex-sable i{flex:1;height:4px;display:block;background:rgba(140,128,220,.16)}
.ex-sable i.on{background:linear-gradient(90deg,#f4dda0,#cfa64c)}
.ex-sable i.urgent{background:#d4657c}

.ex-question{
  flex:none;margin-top:clamp(14px,2.6vh,30px);
  font-family:var(--font-title);font-weight:600;font-size:clamp(19px,2.2vw,30px);
  line-height:1.3;color:var(--gold-pale);text-wrap:balance;
}
.ex-options{
  flex:none;display:flex;flex-direction:column;gap:clamp(7px,1.1vh,12px);
  margin-top:clamp(14px,2.4vh,26px);
}
.ex-option{
  display:flex;align-items:center;gap:18px;width:100%;text-align:left;cursor:pointer;border-radius:0;
  padding:clamp(9px,1.5vh,15px) 20px;
  border:1px solid rgba(140,128,220,.24);border-left:2px solid rgba(230,200,119,.3);
  background:rgba(16,12,44,.55);
  transition:background .18s, border-color .18s;
}
.ex-option:hover{background:rgba(230,200,119,.09)}
.ex-lettre{
  flex:none;width:28px;height:28px;display:flex;align-items:center;justify-content:center;
  border:1px solid rgba(230,200,119,.4);background:rgba(230,200,119,.1);
  font-family:var(--font-title);font-size:15px;color:var(--gold-warm);
}
.ex-txt{
  flex:1;min-width:0;font-family:var(--font-body);font-size:clamp(17px,1.5vw,22px);
  line-height:1.3;color:rgba(236,230,252,.9);text-wrap:pretty;
}
.ex-mark{flex:none;font-size:9px;letter-spacing:.24em;white-space:nowrap;color:transparent}

/* Une fois la copie jugée, chaque option dit ce qu.elle était. */
.examen[data-juge] .ex-option{cursor:default}
.examen[data-juge] .ex-option:hover{background:inherit}
.ex-option.attendue{
  border-color:rgba(143,214,165,.55);border-left-color:rgba(143,214,165,.9);
  background:rgba(143,214,165,.08);
}
.ex-option.attendue .ex-txt{color:#f2f7f3}
.ex-option.attendue .ex-lettre{border-color:rgba(143,214,165,.7);background:rgba(143,214,165,.14);color:#a8e0bb}
.ex-option.attendue .ex-mark{color:rgba(143,214,165,.9)}
.ex-option.copie{
  border-color:rgba(212,101,124,.55);border-left-color:rgba(212,101,124,.9);
  background:rgba(212,101,124,.08);
}
.ex-option.copie .ex-txt{color:rgba(240,224,228,.85)}
.ex-option.copie .ex-lettre{border-color:rgba(212,101,124,.7);background:rgba(212,101,124,.14);color:#e8929f}
.ex-option.copie .ex-mark{color:rgba(212,101,124,.9)}
.ex-option.ecartee{
  border-color:rgba(140,128,220,.16);border-left-color:transparent;background:rgba(12,10,34,.45);
}
.ex-option.ecartee .ex-txt{color:rgba(200,190,230,.42)}
.ex-option.ecartee .ex-lettre{border-color:rgba(140,128,220,.24);background:transparent;color:rgba(200,190,230,.4)}

/* La bande de verdict : deux filets, le mot, la phrase, et la porte. */
.ex-juge{
  flex:none;display:none;align-items:flex-start;gap:14px;
  margin-top:clamp(12px,2.2vh,22px);padding:12px 18px;
  background:rgba(230,200,119,.04);
  animation:rise .35s var(--ease-out) both;
}
.examen[data-juge="ok"] .ex-juge{display:flex;border-top:1px solid rgba(143,214,165,.6);border-bottom:1px solid rgba(143,214,165,.6)}
.examen[data-juge="faux"] .ex-juge,
.examen[data-juge="temps"] .ex-juge{display:flex;border-top:1px solid rgba(212,101,124,.6);border-bottom:1px solid rgba(212,101,124,.6)}
.ex-juge-lab{flex:none;font-size:9px;letter-spacing:.28em;padding-top:4px}
.examen[data-juge="ok"] .ex-juge-lab{color:rgba(143,214,165,.9)}
.examen[data-juge="faux"] .ex-juge-lab,
.examen[data-juge="temps"] .ex-juge-lab{color:rgba(212,101,124,.9)}
.ex-juge-txt{
  flex:1;min-width:0;font-family:var(--font-body);font-size:clamp(16px,1.35vw,20px);
  font-style:italic;line-height:1.5;color:rgba(240,236,252,.85);text-wrap:pretty;
}
.ex-suivant{
  flex:none;cursor:pointer;padding:10px 22px;border-radius:0;
  border:1px solid rgba(244,221,160,.6);
  background:linear-gradient(180deg,#f4dda0,#cfa64c);
  font-family:var(--font-tech);font-weight:500;font-size:10px;letter-spacing:.26em;
  text-transform:uppercase;color:#2b1d05;
  transition:background .25s;
}
.ex-suivant:hover{background:linear-gradient(180deg,#fbeec1,#dcb45c)}

@media(max-width:900px){
  .ex-tete{gap:12px}
  .ex-option{flex-wrap:wrap;gap:12px}
}

/* La convocation sur un écran de neuf cents pixels : elle porte deux
   paragraphes, un avertissement, quatre faits, une signature et une
   porte. On resserre les respirations, rien ne sort. */
@media(max-height:1000px){
  .exam-conv .ev-corps{padding-top:clamp(10px,1.6vh,18px);padding-bottom:clamp(10px,1.6vh,18px)}
  .exam-titre{font-size:clamp(19px,2vw,28px)}
  .exam-lettres{margin-top:clamp(9px,1.6vh,16px)}
  .exam-session{margin-top:8px}
  .exam-prose{margin-top:clamp(10px,1.7vh,18px)}
  .exam-avert{margin-top:clamp(9px,1.5vh,16px);padding:9px 15px}
  .exam-faits{margin-top:clamp(10px,1.7vh,18px)}
  .exam-fait{padding:9px 14px}
  .exam-pied{margin-top:clamp(11px,1.8vh,20px)}
}


/* ============================================================================
   37. LA CELLULE 402 : LES ANNÉES À AZKABAN
   ----------------------------------------------------------------------------
   Une prison ne se dessine pas comme une salle de classe. Le panneau
   n’est plus violet mais gris de mer : bordure d’ardoise, fond qui va du
   bleu de nuit au noir, quatre rais de froid qui balaient lentement, des
   coulées d’eau sur le mur, la mer qui respire au bas du cadre et sept
   paquets de bâtons gravés en bas à gauche.

   Tout ce décor se pose une fois. Du choix au résultat, seul
   `data-phase` change sur la carte : la pluie ne repart pas de zéro au
   milieu d’une décision.
   ============================================================================ */

/* Le fond de l’écran : les 402 de la cellule au lieu du chiffre habituel,
   en gris de mer plutôt qu’en or, et la vignette se resserre. */
#main-panel[data-scene="azkaban"]::before{
  font-size:min(40vh,360px);color:rgba(159,180,196,.04);
}
#main-panel[data-scene="azkaban"]::after{
  background:radial-gradient(72% 62% at 50% 42%, rgba(0,0,0,0) 34%, rgba(0,0,0,.62) 100%);
}

.az{
  position:relative;width:100%;max-width:1240px;margin:0 auto;overflow:hidden;
  display:flex;flex-direction:column;
  border:1px solid rgba(159,180,196,.24);
  background:linear-gradient(180deg, rgba(20,24,44,.78) 0%, rgba(7,8,22,.94) 100%);
  box-shadow:0 50px 110px -60px rgba(0,0,0,1), inset 0 1px 0 rgba(255,255,255,.05);
  animation:rise .7s var(--ease-out) both;
}
/* Le grain de la pierre, pas celui du papier : deux trames croisées. */
.az > .grain{
  background-image:
    repeating-linear-gradient(51deg, rgba(255,255,255,.02) 0 1px, transparent 1px 3px),
    repeating-linear-gradient(-38deg, rgba(0,0,0,.06) 0 1px, transparent 1px 4px);
  opacity:.6;
}

/* --- les rais de froid : quatre colonnes de jour qui balaient --- */
.az-rais,.az-gouttes,.az-mer,.az-batons{position:absolute;pointer-events:none;z-index:0}
.az-rais,.az-gouttes{inset:0;overflow:hidden}
.az-rais i{
  position:absolute;top:-14%;bottom:-14%;width:16px;
  background:linear-gradient(180deg, rgba(186,214,236,.3), rgba(186,214,236,0) 74%);
  filter:blur(6px);transform-origin:50% 0;
  animation-name:azFroid;animation-timing-function:ease-in-out;animation-iteration-count:infinite;
}
@keyframes azFroid{
  0%,100%{opacity:.10;transform:translateX(0) skewX(9deg)}
  50%{opacity:.22;transform:translateX(10px) skewX(11deg)}
}

/* --- les coulées : neuf gouttes qui descendent le mur --- */
.az-gouttes i{
  position:absolute;top:-8px;width:1.5px;height:9px;
  background:linear-gradient(180deg, rgba(190,220,240,0), rgba(190,220,240,.8));
  animation-name:azCoulee;animation-timing-function:linear;animation-iteration-count:infinite;
}
@keyframes azCoulee{
  0%{transform:translateY(0);opacity:0}
  8%{opacity:.8}
  92%{opacity:.55}
  100%{transform:translateY(46vh);opacity:0}
}

/* --- la mer, derrière le mur : elle respire, elle ne bouge pas --- */
.az-mer{
  left:0;right:0;bottom:0;height:34%;
  background:linear-gradient(0deg, rgba(120,160,190,.22), rgba(120,160,190,0) 76%);
  animation:azMer 9s ease-in-out infinite;
}
@keyframes azMer{
  0%,100%{opacity:.18;transform:translateY(6px)}
  50%{opacity:.38;transform:translateY(0)}
}

/* --- les bâtons gravés : sept paquets de cinq, et puis on arrête --- */
.az-batons{
  left:clamp(20px,2.4vw,46px);bottom:clamp(58px,8vh,112px);
  display:flex;gap:9px;opacity:.28;
}
.az-paquet{position:relative;display:flex;gap:4px}
.az-paquet i{
  display:block;width:1.5px;height:22px;background:rgba(214,226,238,.5);
  transform-origin:50% 100%;animation:azGrave .5s var(--ease-out) both;
}
.az-paquet em{
  position:absolute;left:-3px;right:-3px;top:48%;height:1.5px;
  background:rgba(214,226,238,.5);animation:azBarre .5s var(--ease-out) both;
}
@keyframes azGrave{from{opacity:0;transform:scaleY(.2)}to{opacity:1;transform:scaleY(1)}}
@keyframes azBarre{
  from{opacity:0;transform:rotate(-24deg) scaleX(.2)}
  to{opacity:1;transform:rotate(-24deg) scaleX(1)}
}

/* --- le corps de la carte --- */
.az-corps{
  position:relative;z-index:2;display:flex;flex-direction:column;
  padding:clamp(9px,2.2vh,32px) clamp(22px,4vw,64px) clamp(10px,2.2vh,30px);
}
.az-filet{flex:1;height:1px;background:linear-gradient(90deg, rgba(159,180,196,.3), rgba(159,180,196,0))}
.az-note{
  flex:none;font-family:var(--font-tech);font-size:9px;letter-spacing:.26em;text-transform:uppercase;
  color:rgba(200,190,230,.45);white-space:nowrap;
}

.az-kicker{
  flex:none;display:flex;align-items:center;gap:13px;
  font-family:var(--font-tech);font-size:10px;letter-spacing:.34em;text-transform:uppercase;
  color:rgba(178,198,212,.85);
  animation:rise .8s var(--ease-out) both;
}
.az-kicker > i{display:block;flex:none;width:26px;height:1px;background:rgba(159,180,196,.75)}
.az-kicker > span:first-of-type{white-space:nowrap}

.az-tete{
  flex:none;display:flex;align-items:flex-end;justify-content:space-between;
  gap:clamp(14px,2.4vw,34px);flex-wrap:wrap;margin-top:clamp(5px,1.2vh,12px);
}
.az-titre{
  margin:0;font-family:var(--font-title);font-weight:600;
  font-size:clamp(22px,3vw,42px);line-height:1;color:#eef2f6;
  text-shadow:0 0 60px rgba(159,180,196,.4);
  animation:rise .9s var(--ease-out) .1s both;
}
/* Trois chiffres qui résument un dossier : la peine, les jours, la cellule. */
.az-faits{
  display:flex;align-items:center;gap:clamp(11px,1.4vw,18px);cursor:default;
  animation:rise 1s var(--ease-out) .2s both;
}
.az-fait{display:flex;flex-direction:column;gap:3px}
.az-fait b{
  font-family:var(--font-title);font-weight:600;font-size:clamp(15px,1.5vw,21px);
  line-height:1;white-space:nowrap;
}
.az-fait span{
  font-family:var(--font-tech);font-size:8.5px;letter-spacing:.22em;text-transform:uppercase;
  color:rgba(200,190,230,.45);white-space:nowrap;
}

.az-texte{
  flex:none;max-width:84ch;margin:clamp(7px,1.6vh,17px) 0 0;
  font-family:var(--font-body);font-size:clamp(15px,1.35vw,20px);line-height:1.6;
  color:rgba(220,228,238,.82);text-wrap:pretty;
  animation:rise 1.1s var(--ease-out) .25s both;
}

/* --- les colonnes : le résultat (fermé au départ), les jauges, l’aile --- */
/* Les colonnes s’étirent à la même hauteur : c’est ce qui permet à la
   porte de l’année suivante de tomber en bas de la dernière colonne,
   dans le vide que la liste des voisins laisse derrière elle, plutôt
   que de barrer toute la largeur sous le récit. */
.az-grille{
  flex:none;display:grid;align-items:stretch;
  grid-template-columns:repeat(auto-fit, minmax(min(100%,240px),1fr));
  gap:clamp(10px,2vw,32px);margin-top:clamp(8px,1.6vh,18px);
}
.az-bloc,.az-res{min-width:0;display:flex;flex-direction:column}
.az-col-titre{display:flex;align-items:center;gap:11px}
.az-col-titre > span:first-child{
  font-family:var(--font-tech);font-size:9.5px;letter-spacing:.3em;text-transform:uppercase;
  color:rgba(178,198,212,.85);white-space:nowrap;
}

.az-jauges{display:flex;flex-direction:column;gap:clamp(5px,1vh,11px);margin-top:clamp(7px,1.4vh,14px)}
.az-jauge{display:flex;flex-direction:column;gap:5px;cursor:default;animation:rise .7s var(--ease-out) both}
.az-jauge-tete{display:flex;align-items:baseline;justify-content:space-between;gap:12px}
.az-jauge-nom{font-family:var(--font-body);font-size:clamp(14px,1.3vw,19px);color:rgba(230,236,246,.85);white-space:nowrap}
.az-jauge-tete b{font-family:var(--font-title);font-weight:600;font-size:16px;font-variant-numeric:tabular-nums}
.az-crans{display:flex;gap:3px}
.az-crans i{flex:1;height:5px;background:rgba(140,128,220,.14);transition:background .45s var(--ease-out)}

.az-voisins{display:flex;flex-direction:column;margin-top:clamp(6px,1.3vh,13px);border-top:1px solid rgba(140,128,220,.14)}
.az-voisin{
  display:flex;align-items:center;gap:11px;cursor:default;
  padding:clamp(2px,.6vh,7px) 9px;border-bottom:1px solid rgba(140,128,220,.11);
  transition:background .2s;animation:rise .7s var(--ease-out) both;
}
.az-voisin:hover{background:rgba(159,180,196,.06)}
.az-badge{
  flex:none;width:24px;height:24px;display:flex;align-items:center;justify-content:center;
  border:1px solid rgba(159,180,196,.3);
  background:linear-gradient(180deg, rgba(159,180,196,.12), rgba(10,8,30,.85));
}
.az-voisin-nom{
  flex:1;min-width:0;font-family:var(--font-body);font-size:clamp(14px,1.3vw,19px);
  color:rgba(238,242,248,.88);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.az-voisin-etat{
  flex:none;font-family:var(--font-tech);font-size:8.5px;letter-spacing:.2em;text-transform:uppercase;
  color:rgba(159,180,196,.75);white-space:nowrap;
}
/* Ceux dont on n’attend plus rien : le nom pâlit, l’état passe au rouge. */
.az-voisin-sourd .az-voisin-nom{color:rgba(186,181,206,.62)}
.az-voisin-sourd .az-voisin-etat{color:rgba(212,101,124,.7)}
.az-mot{
  margin:6px 0 0;font-family:var(--font-body);font-size:clamp(13px,1.2vw,17px);
  font-style:italic;color:rgba(200,190,230,.5);text-wrap:pretty;
}

/* --- ce que tu fais de cette année --- */
.az-jeu{flex:none;display:flex;flex-direction:column;margin-top:clamp(9px,1.7vh,20px)}
.az-choix-liste{display:flex;flex-direction:column;gap:clamp(7px,1.2vh,13px);margin-top:clamp(8px,1.5vh,16px)}
.az-choix{
  display:flex;align-items:center;gap:clamp(13px,1.6vw,20px);width:100%;text-align:left;
  padding:clamp(9px,1.5vh,15px) clamp(15px,1.7vw,22px);
  border:1px solid rgba(140,128,220,.26);
  background:linear-gradient(165deg, rgba(28,32,62,.6), rgba(9,10,26,.76));
  color:inherit;cursor:pointer;
  transition:background .2s, border-color .2s, transform .2s;
  animation:rise .8s var(--ease-out) both;
}
.az-choix:hover,.az-choix:focus-visible{
  background:linear-gradient(165deg, rgba(44,52,92,.78), rgba(12,14,34,.86));
  border-color:rgba(178,198,212,.55);transform:translateX(5px);outline:none;
}
.az-choix-num{
  flex:none;width:28px;height:28px;display:flex;align-items:center;justify-content:center;
  border:1px solid rgba(230,200,119,.4);
  font-family:var(--font-tech);font-size:11px;color:var(--gold);
}
.az-choix-corps{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.az-choix-txt{
  font-family:var(--font-body);font-size:clamp(15px,1.4vw,20px);line-height:1.3;
  color:rgba(238,242,248,.9);text-wrap:pretty;
}
.az-choix-hint{
  font-family:var(--font-tech);font-size:9px;letter-spacing:.16em;text-transform:uppercase;
  color:rgba(178,198,212,.55);
}

/* --- le résultat : il prend la première colonne, et chasse les choix --- */
.az-res{display:none}
.az[data-phase="resultat"] .az-res{display:flex}
.az[data-phase="resultat"] .az-jeu{display:none}
/* La porte de l’année suivante n’existe qu’une fois le choix fait, et
   elle garde un peu d’air au-dessus d’elle quand la colonne est courte. */
.az[data-phase="resultat"] .az-suite{display:block}
.az[data-phase="resultat"] .az-mot{margin-bottom:clamp(12px,2vh,22px)}
.az-res-titre{
  margin-top:clamp(6px,1.3vh,14px);
  font-family:var(--font-title);font-weight:600;font-size:clamp(18px,2vw,27px);line-height:1.12;
  color:#eef2f6;animation:rise .7s var(--ease-out) both;
}
.az-res-txt{
  margin:clamp(6px,1.4vh,15px) 0 0;max-width:58ch;
  font-family:var(--font-body);font-size:clamp(15px,1.4vw,20px);line-height:1.6;
  color:rgba(220,228,238,.82);text-wrap:pretty;animation:rise .8s var(--ease-out) .1s both;
}
/* Les trois poids tiennent dans une colonne étroite : la variation garde
   son avant, son après et son segment, l’acquis garde son cachet, la
   marque garde son filet. Rien ne se perd, tout se resserre. */
.az-res-fx{margin-top:clamp(8px,1.6vh,17px)}
.az-res-fx .fx-bloc{margin-top:0}
.az-res-fx .fx-entete{display:none}
.az-res-fx .fx-rangee{grid-template-columns:1fr;gap:7px}
.az-res-fx .fx1{
  gap:10px;padding:0 0 6px;border:0;
  border-bottom:1px solid rgba(140,128,220,.16);background:none;
}
.az-res-fx .fx1-nom{font-size:16px}
.az-res-fx .fx1-delta{font-size:15px}
.az-res-fx .fx1-jauge{margin-top:5px}
.az-res-fx .fx-plafond{margin-top:3px;font-size:13px}
.az-res-fx .fx2{margin-top:9px;gap:12px;padding:9px 13px}
.az-res-fx .fx2-cachet{width:20px;height:20px}
.az-res-fx .fx2-cachet::after{inset:4px}
.az-res-fx .fx2-nom{font-size:16px}
.az-res-fx .fx3{margin-top:9px;padding-left:13px}
.az-res-fx .fx3-txt{font-size:15px}

.az-suite{
  display:none;
  position:relative;overflow:hidden;width:100%;text-align:center;cursor:pointer;
  margin-top:auto;padding:clamp(10px,1.6vh,16px) clamp(16px,2.2vw,30px);
  color:var(--or-encre);border:1px solid var(--gold-warm);background:var(--or-massif);
  box-shadow:0 26px 56px -26px rgba(230,200,119,.9);
  transition:transform .3s var(--ease-out), box-shadow .3s var(--ease-out);
}
.az-suite > span{
  position:relative;font-family:var(--font-title);font-weight:600;
  font-size:clamp(12px,1.15vw,16px);letter-spacing:.3em;text-indent:.3em;text-transform:uppercase;
}
.az-suite:hover{transform:translateY(-2px);box-shadow:0 32px 66px -24px rgba(230,200,119,1)}
.az-lueur{
  position:absolute;top:0;bottom:0;width:80px;pointer-events:none;
  background:linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,.4), rgba(255,255,255,0));
  animation:azLueur 5s ease-in-out infinite;
}
@keyframes azLueur{0%{transform:translateX(-140%)}100%{transform:translateX(360%)}}

/* --- les crans d’un lien, dans la colonne de gauche --- */
.cb-crans{display:flex;align-items:center;gap:3px;flex:none}
.cb-crans i{
  width:6px;height:6px;display:block;transform:rotate(45deg);
  background:transparent;border:1px solid rgba(140,128,220,.32);
}
.cb-crans i.on{
  background:linear-gradient(135deg,#f7e6b4,#cfa64c);
  border-color:rgba(244,221,160,.9);box-shadow:0 0 9px -2px rgba(230,200,119,.8);
}
.cb-crans-eteint i{border-color:rgba(150,145,170,.28)}
.cb-crans-eteint i.on{
  background:rgba(186,181,206,.3);border-color:rgba(186,181,206,.45);box-shadow:none;
}

/* --- la cellule sur un écran court ---
   Quatre choix, trois jauges, quatre voisins et un récit : rien de tout
   cela ne peut sortir. On resserre les respirations par crans, du plus
   grand écran au plus petit, et les bâtons gravés ne disparaissent qu’en
   tout dernier recours, quand il n’y a plus de mur pour eux. */
@media(max-height:1120px){
  /* Premier cran, pour les écrans de mille quatre-vingts : seule l’année
     à cinq options le demande, et seule la liste des choix y répond. */
  .az[data-phase="choix"] .az-corps{padding:clamp(9px,1.6vh,20px) clamp(22px,4vw,64px) clamp(10px,1.6vh,20px)}
  .az[data-phase="choix"] .az-jeu{margin-top:clamp(9px,1.4vh,16px)}
  .az[data-phase="choix"] .az-choix-liste{gap:clamp(7px,1vh,11px)}
  .az[data-phase="choix"] .az-choix{padding:clamp(8px,1.2vh,13px) clamp(15px,1.7vw,22px)}
}
@media(max-height:1010px){
  /* Ce qui est commun aux deux temps : le haut de carte se resserre un
     peu, sans jamais coller le titre au récit ni le récit aux colonnes. */
  .az-corps{padding-top:12px;padding-bottom:13px}
  .az-tete{margin-top:5px}
  .az-titre{font-size:clamp(19px,2.2vw,29px)}
  .az-texte{font-size:15px;line-height:1.52;margin-top:10px}
  .az-grille{margin-top:13px}
  .az-jauges{gap:9px}

  /* Le temps du choix est le plus chargé de l’écran : quatre ou cinq
     options sous le récit et les trois colonnes. C’est le seul moment
     qui se serre vraiment, et il ne se serre que là. */
  .az[data-phase="choix"] .az-corps{padding-top:8px;padding-bottom:9px}
  .az[data-phase="choix"] .az-texte{font-size:14.5px;line-height:1.44;margin-top:7px}
  .az[data-phase="choix"] .az-grille{margin-top:9px}
  .az[data-phase="choix"] .az-jauges{gap:6px}
  .az[data-phase="choix"] .az-mot{display:none}
  .az-jeu{margin-top:10px}
  .az-choix-liste{gap:7px;margin-top:9px}
  .az-choix{padding:6px clamp(13px,1.5vw,18px)}
  .az-choix-txt{font-size:16px}
  .az-choix-corps{gap:1px}
  .az-choix-hint{font-size:8.5px}
  .az-choix-num{width:24px;height:24px}
  /* Cinq options, c’est l’année où l’évasion se prépare : la liste se
     serre d’un cran de plus plutôt que de pousser la carte dehors. */
  .az-choix-liste:has(> :nth-child(5)){gap:5px}

  /* Le temps de la conséquence : les choix sont partis, et toute la place
     qu’ils occupaient revient au récit. Le rappel de l’année se replie en
     trois lignes, en retrait, parce qu’il vient d’être lu. */
  .az[data-phase="resultat"] .az-texte{
    display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;
    color:rgba(206,198,236,.62);
  }
  .az-res-titre{font-size:20px;margin-top:10px}
  .az-res-txt{font-size:15px;line-height:1.55;margin-top:11px}
  .az-res-fx{margin-top:14px}
  .az-res-fx .fx-rangee{gap:10px}
  .az-res-fx .fx1{padding-bottom:8px}
  .az-res-fx .fx1-nom{font-size:16px}
  .az-res-fx .fx2{padding:10px 14px;margin-top:12px}
  .az-res-fx .fx3{margin-top:12px}
  .az-suite{padding:11px 18px}
  /* Cinq variations ou plus : elles se rangent deux par deux plutôt que
     de pousser la carte hors de l’écran. Aucune ne disparaît. */
  .az-res-fx .fx-rangee:has(> :nth-child(5)){grid-template-columns:1fr 1fr;gap:9px 24px}
}
@media(max-height:820px){
  /* Le dernier cran, celui des écrans de 768 : on rend au résultat le
     même corps de texte qu’au choix, et les rangées se resserrent d’un
     pas. Au-delà, on préfère laisser la scène défiler que l’illisible. */
  .az[data-phase="resultat"] .az-corps{padding-top:9px;padding-bottom:10px}
  .az[data-phase="resultat"] .az-texte{-webkit-line-clamp:2}
  .az-res-titre{font-size:18px;margin-top:8px}
  .az-res-txt{font-size:14.5px;line-height:1.5;margin-top:9px}
  .az-res-fx{margin-top:11px}
  .az-res-fx .fx-rangee{gap:7px}
  .az-res-fx .fx1{padding-bottom:6px}
  .az-res-fx .fx2{padding:8px 12px;margin-top:9px}
  .az-res-fx .fx3{margin-top:9px}
  .az-suite{padding:9px 16px}
  /* À 768, quatre variations suffisent à demander deux colonnes. */
  .az-res-fx .fx-rangee:has(> :nth-child(4)){grid-template-columns:1fr 1fr;gap:7px 22px}
}
@media(max-height:700px){
  .az-batons{display:none}
}
@media(max-width:1000px){
  .az-tete{align-items:flex-start;flex-direction:column;gap:10px}
  .az-batons{display:none}
}


/* ============================================================================
   38. LA BOUTIQUE : LA RÉSERVE DES RELIQUES
   ----------------------------------------------------------------------------
   Un bandeau collant qui ne porte que trois choses : la sortie, le nom du
   lieu, et ce qu’on a en caisse. Puis le catalogue à gauche, une seule porte
   à droite en grand, et deux rappels dessous.

   Pas de grand titre au-dessus du catalogue : la boutique se nomme déjà dans
   le bandeau, et la page commence mieux par les portes elles-mêmes.

   Ici le bleu des Reliques prime sur l’or : c’est la seule monnaie qui compte
   dans cet écran, et le prix doit se lire avant le nom.
   ============================================================================ */
/* LA PAGE TIENT DANS L'ÉCRAN, TOUJOURS.
   Elle mesurait 1 228 pixels de haut à la Boutique et 1 475 aux Quêtes dans
   un écran de 768, et `body` est en `overflow:hidden` : le bas était coupé et
   rien ne permettait d'aller le voir. La coque est donc une colonne de la
   hauteur exacte de l'écran, et ce qui ne rentre pas se serre plutôt que de
   déborder. Voir `stabiliserCarte` et la section 38.9. */
.bq{
  position:relative;height:100vh;height:100dvh;overflow:hidden;
  display:flex;flex-direction:column;
}

/* --- le bandeau, collé en haut --- */
.bq-bandeau{
  position:sticky;top:0;z-index:20;
  background:rgba(5,4,26,.82);backdrop-filter:blur(14px);
  border-bottom:1px solid rgba(230,200,119,.14);
}
.bq-bandeau-in{
  max-width:1320px;margin:0 auto;padding:0 clamp(18px,3vw,40px);
  height:72px;display:flex;align-items:center;justify-content:space-between;gap:clamp(16px,3vw,32px);
}
.bq-retour{
  display:flex;align-items:center;gap:10px;cursor:pointer;
  border:0;background:transparent;padding:0;
  font-family:var(--font-tech);font-size:11px;letter-spacing:.28em;text-transform:uppercase;
  color:rgba(232,227,245,.62);transition:color var(--t);
}
.bq-retour:hover,.bq-retour:focus-visible{color:var(--gold-bright);outline:none}
.bq-retour i{font-style:normal;font-size:13px}
.bq-marque{
  display:flex;align-items:center;gap:16px;
  font-family:var(--font-title);font-size:14px;letter-spacing:.34em;text-transform:uppercase;
  color:#f0e4c0;white-space:nowrap;
}
.bq-marque i{display:block;width:24px;height:1px;background:rgba(230,200,119,.45)}
.bq-caisse{
  display:flex;align-items:center;gap:10px;white-space:nowrap;
  font-family:var(--font-tech);font-size:11px;letter-spacing:.22em;text-transform:uppercase;
  color:rgba(168,220,245,.75);
}
.bq-caisse b{color:var(--reliques);font-size:13px;font-weight:400}
.bq-caisse em{
  font-family:var(--font-title);font-style:normal;font-size:16px;letter-spacing:.06em;
  color:var(--reliques-pale);
}

/* --- la page --- */
.bq-page{
  position:relative;z-index:2;flex:1;min-height:0;width:100%;max-width:1320px;margin:0 auto;
  display:flex;flex-direction:column;
  padding:clamp(20px,3.2vh,44px) clamp(18px,3vw,40px) clamp(20px,3.2vh,44px);
}

/* --- l’en-tête de la réserve --- */
.bq-hero{
  display:flex;align-items:flex-end;justify-content:space-between;gap:32px;flex-wrap:wrap;
  margin-bottom:clamp(26px,4.4vh,48px);
  animation:rise .6s var(--ease-out) both;
}
.bq-hero-txt{min-width:0}
.bq-hero-lib{
  display:block;
  font-family:var(--font-tech);font-size:11px;letter-spacing:.42em;text-transform:uppercase;
  color:rgba(230,200,119,.75);
}
.bq-hero-titre{
  margin:16px 0 0;font-family:var(--font-title);font-weight:600;
  font-size:clamp(38px,4.6vw,64px);line-height:.92;color:var(--gold-pale);
  text-shadow:0 1px 0 rgba(0,0,0,.6), 0 0 48px rgba(230,200,119,.16);
}
.bq-hero-mot{
  margin:16px 0 0;
  font-family:var(--font-body);font-size:21px;font-style:italic;line-height:1.5;
  color:rgba(200,188,235,.62);
}
/* Les deux seuls chiffres du haut : ce qui est ouvert, ce que ça a coûté. */
.bq-compteurs{
  display:flex;flex-direction:column;align-items:flex-end;text-align:right;
  font-family:var(--font-tech);font-size:11px;letter-spacing:.24em;text-transform:uppercase;
  line-height:2;color:rgba(200,190,230,.42);
}
/* Les deux colonnes prennent toute la place qui reste, et pas un pixel de
   plus : c'est elles qui portent la contrainte de hauteur. */
/* Pas de `flex-wrap` ici, volontairement : une ligne qui peut se replier
   prend la hauteur de son contenu au lieu de celle de son cadre, et les deux
   colonnes repassaient au-dessus de l'écran. L'empilement sur écran étroit
   se fait par `flex-direction`, plus bas. */
.bq-cols{
  flex:1;min-height:0;
  display:flex;gap:clamp(20px,3vw,40px);align-items:stretch;
}
.bq-cols > *{max-height:100%}

/* --- le catalogue --- */
.bq-cat{
  flex:1 1 320px;min-width:0;min-height:0;overflow:hidden;
  display:flex;flex-direction:column;
  animation:rise .75s var(--ease-out) both;
}
.bq-rayon{margin-bottom:clamp(18px,2.6vh,32px)}
.bq-rayon-tete{
  display:flex;align-items:baseline;justify-content:space-between;gap:12px;
  padding-bottom:14px;border-bottom:1px solid rgba(230,200,119,.18);
}
.bq-rayon-tete span{
  font-family:var(--font-tech);font-size:10px;letter-spacing:.36em;text-transform:uppercase;
  color:rgba(240,228,192,.8);
}
.bq-rayon-tete em{
  font-family:var(--font-tech);font-style:normal;font-size:10px;letter-spacing:.18em;
  color:rgba(200,190,230,.4);
}
.bq-ligne{
  width:100%;cursor:pointer;text-align:left;
  display:flex;align-items:baseline;justify-content:space-between;gap:16px;
  padding:16px 16px 16px 18px;
  border:0;border-bottom:1px solid rgba(140,128,220,.12);border-left:2px solid transparent;
  background:transparent;transition:background var(--t),border-color var(--t);
}
.bq-ligne:hover,.bq-ligne:focus-visible{background:rgba(140,128,220,.07);outline:none}
/* La porte qu’on regarde : un filet d’or à gauche, et le nom qui s’éclaire. */
.bq-ligne.on{border-left-color:var(--gold-warm);background:rgba(230,200,119,.08)}
.bq-ligne-nom{
  font-family:var(--font-body);font-size:19px;color:rgba(232,227,245,.72);
  min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.bq-ligne.on .bq-ligne-nom{color:#f4ecd6}
.bq-ligne-prix{
  flex:none;white-space:nowrap;
  font-family:var(--font-tech);font-size:12px;letter-spacing:.06em;
  color:rgba(168,220,245,.42);
}
/* Une porte qu’on peut se payer se lit en bleu franc. Les autres restent
   là, lisibles, éteintes : on ne cache pas ce qu’on ne peut pas encore. */
.bq-ligne-payable .bq-ligne-prix{color:#a8dcf5}
.bq-ligne-ok .bq-ligne-prix{
  color:rgba(230,200,119,.75);letter-spacing:.2em;text-transform:uppercase;font-size:10px;
}
.bq-ligne-ok{border-left-color:rgba(230,200,119,.4)}
.bq-ligne-ok .bq-ligne-nom{color:rgba(244,236,214,.9)}

/* Le geste du bas de colonne est collé au bas de la colonne : où que
   s'arrête le catalogue, on le retrouve toujours au même endroit. */
.bq-gagner:first-of-type{margin-top:auto}
.bq-gagner{
  display:block;width:100%;flex:none;text-align:center;cursor:pointer;
  padding:16px 0;border:1px solid rgba(230,200,119,.28);background:transparent;
  font-family:var(--font-tech);font-size:11px;letter-spacing:.28em;text-transform:uppercase;
  color:var(--gold);transition:background var(--t),color var(--t);
}
.bq-gagner:hover,.bq-gagner:focus-visible{background:rgba(230,200,119,.1);color:var(--gold-bright);outline:none}
.bq-gagner i{font-style:normal;margin-left:10px}

/* --- la porte, en grand --- */
.bq-scene{
  flex:2 1 620px;min-width:0;min-height:0;
  display:flex;flex-direction:column;
  animation:rise .9s var(--ease-out) both;
}
/* La fiche remplit ce qui reste. Toutes les fiches ont donc la même hauteur
   PAR CONSTRUCTION, ce qui remplace le verrou mesuré d'avant : plus rien à
   calculer, et plus rien qui saute quand on change d'article. */
.bq-fiche{
  position:relative;flex:1;min-height:0;overflow:hidden;
  border:1px solid rgba(230,200,119,.18);
  background:linear-gradient(180deg, rgba(26,21,62,.72) 0%, rgba(12,10,34,.9) 100%);
  box-shadow:0 40px 90px -50px rgba(0,0,0,1), inset 0 1px 0 rgba(255,255,255,.06);
}
.bq-fiche > .grain{
  background-image:
    repeating-linear-gradient(51deg, rgba(255,255,255,.022) 0 1px, transparent 1px 3px),
    repeating-linear-gradient(-38deg, rgba(0,0,0,.05) 0 1px, transparent 1px 4px);
  opacity:.5;
}
.bq-fiche-tete{
  position:relative;z-index:1;
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:16px clamp(18px,2.6vw,32px);
  border-bottom:1px solid rgba(230,200,119,.14);
}
.bq-kicker{
  font-family:var(--font-tech);font-size:10px;letter-spacing:.32em;text-transform:uppercase;
  color:rgba(230,200,119,.75);
}
.bq-rang{
  font-family:var(--font-tech);font-size:10px;letter-spacing:.24em;text-transform:uppercase;
  color:rgba(200,190,230,.4);white-space:nowrap;
}
.bq-fiche-corps{position:relative;z-index:1;padding:clamp(24px,3.4vh,40px) clamp(20px,3vw,40px) clamp(22px,2.8vh,32px)}
.bq-nom{
  margin:0;font-family:var(--font-title);font-weight:600;
  font-size:clamp(28px,3.4vw,44px);line-height:1.05;color:var(--gold-pale);
  text-shadow:0 0 40px rgba(230,200,119,.18);
}
.bq-citation{
  margin:clamp(16px,2.2vh,24px) 0 0;padding-left:20px;
  border-left:1px solid rgba(230,200,119,.35);
  font-family:var(--font-body);font-size:clamp(18px,1.5vw,21px);font-style:italic;line-height:1.55;
  color:rgba(226,220,245,.78);
}

/* Les effets : la même langue que « ce que ça change », en plus court.
   Le gain est vert, le revers est rouge, et le signe est dans la pastille. */
.bq-effets{display:flex;flex-wrap:wrap;gap:8px;margin-top:clamp(20px,2.8vh,32px)}
.bq-effet{
  display:inline-flex;align-items:center;gap:8px;padding:8px 14px;
  border:1px solid rgba(120,190,150,.28);background:rgba(30,60,45,.32);color:#8fd0a4;
  font-family:var(--font-body);font-size:17px;
}
.bq-effet i{font-family:var(--font-tech);font-style:normal;font-size:12px}
.bq-effet-mal{border-color:rgba(210,90,100,.3);background:rgba(50,16,28,.32);color:#e08a92}

.bq-contrainte{
  margin-top:clamp(16px,2.2vh,24px);padding:18px 22px;
  border:1px solid rgba(210,90,100,.28);background:rgba(50,16,28,.35);
}
.bq-contrainte-lib{
  font-family:var(--font-tech);font-size:10px;letter-spacing:.3em;text-transform:uppercase;
  color:#e08a92;
}
.bq-contrainte p{
  margin:10px 0 0;font-family:var(--font-body);font-size:19px;line-height:1.5;
  color:rgba(232,214,220,.78);
}

/* La condition d’accès d’un métier : ce n’est ni un gain ni un revers,
   c’est une porte. Elle se lit donc en or et non en rouge, et le texte
   affiché est celui du moteur, mot pour mot. */
.bq-porte{
  margin-top:clamp(16px,2.2vh,24px);padding:18px 22px;
  border:1px solid rgba(230,200,119,.26);background:rgba(230,200,119,.05);
}
.bq-porte-lib{
  font-family:var(--font-tech);font-size:10px;letter-spacing:.3em;text-transform:uppercase;
  color:rgba(240,228,192,.8);
}
.bq-porte p{
  margin:10px 0 0;font-family:var(--font-body);font-size:19px;line-height:1.5;
  color:rgba(232,227,245,.76);
}

/* Les deux encadrés d’un métier tiennent côte à côte : empilés, ils
   faisaient à eux seuls deux cents pixels de plus que toute autre
   fiche, et la carte changeait de taille en changeant d’article. */
.bq-duo{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:12px}
.bq-duo .bq-porte{margin-top:clamp(16px,2.2vh,24px)}

/* Les cinq échelons d’un métier, dans l’ordre où on les gravit. Le
   numéro compte plus que la puce : c’est une échelle, pas une liste.
   Deux colonnes, parce que cinq lignes pleines déséquilibraient la
   carte à elles seules. */
.bq-echelons{margin-top:clamp(16px,2.2vh,24px)}
.bq-echelons ol{
  list-style:none;margin:10px 0 0;padding:0;counter-reset:ech;
  display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  gap:0 20px;
}
.bq-echelons li{
  counter-increment:ech;display:flex;align-items:baseline;gap:12px;
  padding:8px 2px;border-bottom:1px solid rgba(140,128,220,.14);
  font-family:var(--font-body);font-size:17px;color:rgba(226,220,245,.72);
}
.bq-echelons li::before{
  content:counter(ech,decimal-leading-zero);flex:none;
  font-family:var(--font-tech);font-size:10px;letter-spacing:.18em;
  color:rgba(230,200,119,.55);
}
/* Le premier est celui où l’on entre : c’est le seul qui soit acquis. */
.bq-echelons li:first-child{color:#f4ecd6}
.bq-echelons li:first-child::before{color:var(--gold-warm)}

/* UNE SEULE HAUTEUR POUR LES NEUF PORTES.
   La hauteur est verrouillée en JS sur la plus haute des fiches
   (voir `stabiliserFiche`), et la rangée d’achat est poussée en bas :
   d’un article à l’autre, plus rien ne bouge, et le bouton reste
   exactement là où la main l’a laissé. */
.bq-fiche{display:flex;flex-direction:column}
.bq-fiche-corps{display:flex;flex-direction:column;flex:1}
/* Sélecteur descendant volontaire : la règle d’achat de la section 38
   vient plus bas dans le fichier et gagnerait à égalité. */
.bq-fiche-corps > .bq-achat{margin-top:auto}

/* ----------------------------------------------------------------------------
   38.9 LES QUATRE CRANS DE SERRAGE
   ----------------------------------------------------------------------------
   `stabiliserCarte` mesure après la pose et pose `data-serre` de 1 à 4 sur la
   coque, jusqu'à ce que le catalogue ET la plus longue des fiches tiennent.
   On reprend le vide, puis l'interligne, puis le corps des lettres, dans cet
   ordre : c'est la règle de `serrerScene` pour les scènes de jeu, et il n'y a
   aucune raison d'en avoir deux.

   RIEN N'EST JAMAIS RETIRÉ DE L'AFFICHAGE, à aucun cran. Une porte qui perd
   son revers ou un objectif qui perd son compteur parce que la fenêtre est
   basse, ce serait mentir sur ce qu'on vend.
   ---------------------------------------------------------------------------- */

/* Cran 1 : le vide. Les marges d'aération, et elles seules. */
.bq[data-serre] .bq-hero{margin-bottom:16px}
.bq[data-serre] .bq-hero-titre{margin-top:8px;font-size:clamp(30px,3.2vw,44px)}
.bq[data-serre] .bq-hero-mot{margin-top:8px}
.bq[data-serre] .bq-rayon{margin-bottom:12px}
.bq[data-serre] .bq-rayon-tete{padding-bottom:9px}
.bq[data-serre] .bq-ligne{padding:11px 14px 11px 16px}
.bq[data-serre] .bq-gagner{padding:12px 0}
.bq[data-serre] .bq-fiche-tete{padding:11px clamp(16px,2.2vw,28px)}
.bq[data-serre] .bq-fiche-corps{padding:clamp(16px,2.2vh,26px) clamp(18px,2.6vw,34px) clamp(15px,2vh,22px)}
.bq[data-serre] .bq-citation{margin-top:14px}
.bq[data-serre] .bq-effets{margin-top:14px;gap:6px}
.bq[data-serre] .bq-effet{padding:6px 11px}
.bq[data-serre] .bq-duo .bq-porte,
.bq[data-serre] .bq-porte,
.bq[data-serre] .bq-contrainte,
.bq[data-serre] .bq-echelons,
.bq[data-serre] .qg-jauge{margin-top:13px}
.bq[data-serre] .bq-porte,
.bq[data-serre] .bq-contrainte{padding:12px 16px}
.bq[data-serre] .bq-achat{margin-top:16px;padding-top:14px}
.bq[data-serre] .bq-acheter,
.bq[data-serre] .qg-etat{padding:13px 26px}
.bq[data-serre] .bq-note{margin-top:12px}
.bq[data-serre] .bq-echelons li{padding:6px 2px}

/* Cran 2 : l'interligne, et le titre qui cesse d'être un titre d'affiche. */
.bq[data-serre="2"] .bq-hero-titre,
.bq[data-serre="3"] .bq-hero-titre,
.bq[data-serre="4"] .bq-hero-titre{font-size:clamp(26px,2.6vw,36px)}
.bq[data-serre="2"] .bq-citation,
.bq[data-serre="3"] .bq-citation,
.bq[data-serre="4"] .bq-citation{line-height:1.4}
.bq[data-serre="2"] .bq-porte p,
.bq[data-serre="3"] .bq-porte p,
.bq[data-serre="4"] .bq-porte p,
.bq[data-serre="2"] .bq-contrainte p,
.bq[data-serre="3"] .bq-contrainte p,
.bq[data-serre="4"] .bq-contrainte p{line-height:1.35}
.bq[data-serre="2"] .bq-note,
.bq[data-serre="3"] .bq-note,
.bq[data-serre="4"] .bq-note{line-height:1.35}
.bq[data-serre="2"] .bq-ligne,
.bq[data-serre="3"] .bq-ligne,
.bq[data-serre="4"] .bq-ligne{padding:8px 12px 8px 14px}
.bq[data-serre="2"] .bq-rayon,
.bq[data-serre="3"] .bq-rayon,
.bq[data-serre="4"] .bq-rayon{margin-bottom:9px}

/* Cran 3 : le corps des lettres. C'est le dernier levier honnête. */
.bq[data-serre="3"] .bq-nom,
.bq[data-serre="4"] .bq-nom{font-size:clamp(24px,2.6vw,34px)}
.bq[data-serre="3"] .bq-citation,
.bq[data-serre="4"] .bq-citation{font-size:17px}
.bq[data-serre="3"] .bq-effet,
.bq[data-serre="4"] .bq-effet{font-size:15px}
.bq[data-serre="3"] .bq-porte p,
.bq[data-serre="4"] .bq-porte p,
.bq[data-serre="3"] .bq-contrainte p,
.bq[data-serre="4"] .bq-contrainte p{font-size:16px}
.bq[data-serre="3"] .bq-note,
.bq[data-serre="4"] .bq-note{font-size:16px}
.bq[data-serre="3"] .bq-ligne-nom,
.bq[data-serre="4"] .bq-ligne-nom{font-size:16px}
.bq[data-serre="3"] .bq-echelons li,
.bq[data-serre="4"] .bq-echelons li{font-size:15px;padding:5px 2px}
.bq[data-serre="3"] .qg-ratio,
.bq[data-serre="4"] .qg-ratio{font-size:18px}

/* Cran 4 : la phrase d'ambiance de l'en-tête part, elle seule. Elle ne dit
   rien qu'on ne puisse relire ailleurs, et c'est le seul texte de la page
   dans ce cas. */
.bq[data-serre="4"] .bq-hero-mot{display:none}
.bq[data-serre="4"] .bq-hero-lib{font-size:10px;letter-spacing:.3em}
.bq[data-serre="4"] .bq-fiche-corps{padding:14px 18px 12px}
.bq[data-serre="4"] .bq-citation{font-size:16px;margin-top:10px}
.bq[data-serre="4"] .bq-achat{margin-top:12px;padding-top:11px}

/* Changer de porte ne refait que cette fiche, jamais la page. Ses
   enfants sont neufs à chaque fois, donc le fondu repart tout seul ;
   `bq-vire` dit seulement qu’on n’en est plus à la première pose, pour
   que l’ouverture de l’écran garde sa seule animation d’entrée. */
.bq-vire .bq-fiche-tete,
.bq-vire .bq-fiche-corps{animation:bqVire .32s var(--ease-out) both}
@keyframes bqVire{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

/* --- l’achat --- */
.bq-achat{
  display:flex;align-items:center;gap:clamp(14px,2vw,24px);flex-wrap:wrap;
  margin-top:clamp(24px,3.4vh,36px);padding-top:clamp(18px,2.6vh,28px);
  border-top:1px solid rgba(230,200,119,.16);
}
.bq-acheter{
  padding:18px 34px;cursor:not-allowed;
  border:1px solid rgba(140,128,220,.2);background:rgba(140,128,220,.06);
  font-family:var(--font-tech);font-weight:500;font-size:12px;letter-spacing:.26em;
  text-transform:uppercase;color:rgba(200,190,230,.4);
  transition:transform .25s var(--ease-out),box-shadow .25s var(--ease-out);
}
/* Payable : le bouton passe à l’or massif, et lui seul. */
.bq-acheter-on{
  cursor:pointer;color:var(--or-encre);
  border-color:rgba(230,200,119,.6);background:var(--or-massif);
  box-shadow:0 22px 48px -26px rgba(230,200,119,.9);
}
.bq-acheter-on:hover,.bq-acheter-on:focus-visible{transform:translateY(-2px);outline:none}
/* Déjà ouverte : ni or ni gris mort, un vert de quittance. */
.bq-acheter-ok{
  color:#8fd0a4;border-color:rgba(120,190,150,.35);background:rgba(30,60,45,.3);
}
.bq-prix{
  display:inline-flex;align-items:baseline;gap:10px;
  font-family:var(--font-tech);font-size:12px;letter-spacing:.16em;text-transform:uppercase;
  color:rgba(200,190,230,.5);
}
.bq-prix b{
  font-family:var(--font-title);font-weight:400;font-size:22px;letter-spacing:.04em;
  color:var(--reliques-pale);
}
.bq-vide{flex:1}
.bq-caisse-mini{
  font-family:var(--font-tech);font-size:11px;letter-spacing:.18em;text-transform:uppercase;
  color:rgba(200,190,230,.42);white-space:nowrap;
}
.bq-note{
  margin:clamp(16px,2.2vh,24px) 0 0;
  font-family:var(--font-body);font-size:18px;font-style:italic;line-height:1.5;
  color:rgba(190,180,225,.5);
}

/* Les deux rappels qui vivaient sous la porte ont été retirés : 162 pixels
   de hauteur pour redire ce que la fiche dit déjà, alors que la page doit
   tenir dans l'écran. Leurs règles partent avec eux. */

/* --- la réserve sur un écran étroit ---
   Les deux colonnes s'empilent, et la page ne peut plus tenir dans la
   hauteur : elle redevient une page ordinaire, qui défile. Le verrou de
   hauteur n'a de sens que tant que les colonnes sont côte à côte. */
@media (max-width:1080px){
  .bq{height:auto;min-height:100vh;overflow:visible}
  .bq-cat,.bq-fiche{overflow:visible}
  .bq-cols{flex-direction:column}
  .bq-cat,.bq-scene{flex:1 1 auto;width:100%}
  .bq-gagner:first-of-type{margin-top:12px}
  /* La porte regardée passe devant son catalogue : c’est elle qu’on est
     venu voir, et la liste sert à en changer. */
  .bq-scene{order:1}
  .bq-cat{order:2}
}
@media (max-width:620px){
  .bq-hero{gap:18px}
  .bq-hero-titre{font-size:clamp(30px,9vw,42px);margin-top:12px}
  .bq-hero-mot{font-size:18px;margin-top:12px}
  .bq-compteurs{align-items:flex-start;text-align:left;line-height:1.9}
  .bq-bandeau-in{height:60px;gap:12px}
  .bq-marque{font-size:12px;letter-spacing:.24em}
  .bq-marque i{width:14px}
  .bq-retour span{display:none}
  .bq-nom{font-size:clamp(24px,7vw,32px)}
  .bq-citation{font-size:17px;padding-left:14px}
  .bq-acheter{width:100%;padding:15px 20px}
  .bq-vide{display:none}
}


/* ============================================================================
   39. LES QUÊTES : LE REGISTRE DU CHÂTEAU
   ----------------------------------------------------------------------------
   CET ÉCRAN N'A PLUS DE COQUE À LUI. Il reprend celle de la section 38, la
   Boutique, classe pour classe : bandeau collant, en-tête, catalogue à gauche,
   une seule fiche à droite. Les deux pages font le même geste, montrer une
   liste et détailler un élément, elles se répondent (l'une gagne les Reliques,
   l'autre les dépense), et un bouton mène de chacune à l'autre. Deux dessins
   pour un seul geste, c'était deux fois plus à apprendre.

   Il ne reste donc ici que ce qui n'appartient qu'aux quêtes : la jauge de
   progression en crans, l'état d'un objectif, la semaine en sept cases, les
   sabliers des Retourneurs, et les trois panneaux du bas.

   Trois couleurs, trois sens : l'or pour le temps et la fidélité, le bleu des
   Reliques pour tout ce qui se gagne, le rose de la grande quête pour ce qui
   se compte sur toute une vie de joueur. Elles viennent du JS, pas d'ici : la
   couleur d'un objectif est celle de sa difficulté.
   ============================================================================ */

/* --- la jauge d'un objectif : jamais une barre lisse ---
   Vingt-quatre crans, pour qu'on puisse compter ce qui reste plutôt que
   l'estimer. Les crans franchis prennent la couleur de la difficulté, posée
   en style en ligne par `cransPage` ; les autres restent violets et éteints. */
.qg-jauge{
  display:flex;align-items:center;gap:clamp(14px,2vw,24px);flex-wrap:wrap;
  margin-top:clamp(20px,2.8vh,30px);
}
.qg-crans{flex:1;min-width:160px;display:flex;gap:4px}
.qg-crans i{flex:1;height:8px;background:rgba(140,128,220,.16)}
.qg-ratio{
  flex:none;white-space:nowrap;
  font-family:var(--font-title);font-size:22px;letter-spacing:.04em;
  color:var(--parchment);
}
.qg-ratio i{font-style:normal;font-size:14px;color:rgba(200,190,230,.4);margin:0 2px}

/* --- l'état, à la place où la Boutique met son bouton d'achat ---
   Ce n'est pas un bouton : rien ne se clique ici, l'objectif se remplit tout
   seul en jouant. Il en garde la forme et la place, pour que l'oeil retrouve
   la même ligne d'un écran à l'autre. */
.qg-etat{
  display:inline-flex;align-items:center;padding:18px 34px;
  border:1px solid rgba(140,128,220,.2);background:rgba(140,128,220,.06);
  font-family:var(--font-tech);font-weight:500;font-size:12px;letter-spacing:.26em;
  text-transform:uppercase;color:rgba(200,190,230,.5);
}
/* Accompli : ni or ni gris mort, le vert de quittance de la Boutique. */
.qg-etat-ok{color:#8fd0a4;border-color:rgba(120,190,150,.35);background:rgba(30,60,45,.3)}
/* Un objectif accompli ne disparaît pas du catalogue : il se scelle. */
.qg .bq-ligne-ok .bq-ligne-prix{color:#8fd0a4}

/* Le second bouton du catalogue est une porte de service : même forme que le
   premier, sans son or, pour qu'on voie lequel des deux est le geste. */
.qg-second{
  margin-top:10px;border-color:rgba(140,128,220,.24);color:rgba(200,190,230,.62);
}
.qg-second:hover,.qg-second:focus-visible{
  background:rgba(140,128,220,.08);color:var(--parchment);
}

/* Les trois panneaux du bas ont ete retires avec leurs regles : la page
   doit tenir dans l ecran, et sept cases de calendrier qui redisent un
   chiffre deja ecrit sont la premiere chose a enlever. La serie, les
   Retourneurs et le coffre tiennent maintenant sur une ligne de l en-tete. */

@media (max-width:620px){
  .qg-etat{padding:15px 22px;letter-spacing:.18em}
}


/* ============================================================================
   40. LE CHOIX DE MÉTIER : QUE FAIRE DE TA VIE
   ----------------------------------------------------------------------------
   Un seul écran, jamais de défilement de page : un bandeau de titre avec la
   voie que ton dossier appelle, le catalogue des quinze voies à gauche, et la
   voie regardée à droite en deux colonnes, le dossier et les cinq échelons.

   Ce sont les deux colonnes intérieures qui défilent, pas la page : on doit
   pouvoir comparer une voie à l’autre sans jamais perdre la liste de vue.

   Quatre états, quatre couleurs, et pas une de plus : l’or pour ce qui est
   ouvert, le rouge pour ce qui est fermé, le bleu des Reliques pour ce qui
   s’achète, le violet éteint pour ce qui demande une autre vie.
   ============================================================================ */
.mt{
  position:relative;width:100%;height:100%;min-height:0;
  display:flex;flex-direction:column;gap:clamp(12px,1.8vh,18px);
  animation:rise .6s var(--ease-out) both;
}
.mt .eq{position:absolute;width:12px;height:12px;pointer-events:none;z-index:2}
.mt .eq-tl{left:7px;top:7px;border-left:1px solid rgba(230,200,119,.34);border-top:1px solid rgba(230,200,119,.34)}
.mt .eq-br{right:7px;bottom:7px;border-right:1px solid rgba(230,200,119,.34);border-bottom:1px solid rgba(230,200,119,.34)}

/* --- le bandeau de titre --- */
.mt-tete{
  flex:none;display:flex;align-items:flex-end;gap:22px clamp(16px,2vw,24px);flex-wrap:wrap;
  padding:0 4px clamp(10px,1.6vh,14px);
  border-bottom:1px solid rgba(230,200,119,.18);
}
.mt-tete-g{flex:none;min-width:0}
.mt-kicker{
  display:block;white-space:nowrap;
  font-family:var(--font-tech);font-size:10px;letter-spacing:.32em;text-transform:uppercase;
  color:rgba(230,200,119,.7);
}
.mt-titre{
  margin:5px 0 0;white-space:nowrap;
  font-family:var(--font-title);font-weight:600;font-size:clamp(18px,2vw,21px);letter-spacing:.04em;
  color:#f4ecd6;
}
/* L’intro n’a pas de cadre : un filet à gauche suffit à la détacher. */
.mt-intro{
  flex:1 1 260px;min-width:220px;max-width:60ch;
  margin:2px 0 2px 6px;padding:3px 0 3px 16px;
  border-left:1px solid rgba(230,200,119,.3);
  font-family:var(--font-body);font-size:19px;font-style:italic;line-height:1.5;
  color:rgba(226,220,245,.82);text-wrap:pretty;
}
/* La voie que le dossier appelle : la seule chose dorée du haut d’écran,
   et elle se clique, parce qu’une suggestion qu’on ne peut pas suivre
   d’un geste n’est pas une suggestion. */
.mt-sugg{
  position:relative;flex:none;cursor:pointer;
  display:flex;align-items:stretch;gap:0;padding:0;text-align:left;
  border:1px solid rgba(244,221,160,.55);
  background:linear-gradient(150deg, rgba(230,200,119,.2), rgba(230,200,119,.05));
  box-shadow:0 0 34px -14px rgba(230,200,119,.75), inset 0 1px 0 rgba(255,245,205,.14);
  transition:background var(--t);
}
.mt-sugg:hover,.mt-sugg:focus-visible{
  background:linear-gradient(150deg, rgba(230,200,119,.32), rgba(230,200,119,.1));outline:none;
}
.mt-sugg .eq{width:11px;height:11px;left:5px;top:5px;border-color:rgba(244,221,160,.7)}
.mt-sugg .eq-br{left:auto;top:auto;right:5px;bottom:5px;border-color:rgba(244,221,160,.7)}
.mt-sugg-lab{
  flex:none;display:flex;align-items:center;padding:0 13px;white-space:nowrap;
  background:linear-gradient(180deg,#f4dda0,#cfa64c);
  font-family:var(--font-tech);font-weight:500;font-size:10px;letter-spacing:.3em;
  text-transform:uppercase;color:#2b1d05;
}
.mt-sugg-val{display:flex;flex-direction:column;justify-content:center;gap:2px;padding:9px 18px 9px 15px}
.mt-sugg-l1{display:flex;align-items:baseline;gap:11px;white-space:nowrap}
.mt-sugg-l1 b{
  font-family:var(--font-title);font-weight:600;font-size:22px;letter-spacing:.03em;
  color:var(--gold-pale);text-shadow:0 0 26px rgba(230,200,119,.55);
}
.mt-sugg-l1 i{font-style:normal;font-family:var(--font-title);font-size:15px;color:var(--gold-warm)}
.mt-sugg-val em{
  font-style:normal;white-space:nowrap;
  font-family:var(--font-tech);font-size:9px;letter-spacing:.22em;text-transform:uppercase;
  color:rgba(230,200,119,.65);
}

/* Les avertissements : ce sont eux qui expliquent les portes fermées, et
   ils ne disparaissent jamais, même quand l’écran se serre. */
.mt-alertes{
  flex:none;display:flex;flex-direction:column;gap:5px;
  padding:9px 14px;border-left:2px solid rgba(212,101,124,.5);background:rgba(212,101,124,.07);
}
.mt-alertes p{
  margin:0;font-family:var(--font-body);font-size:16px;line-height:1.4;
  color:rgba(232,214,220,.82);
}

/* --- le corps : la liste, et la voie regardée --- */
.mt-corps{
  flex:1;min-height:0;display:grid;
  grid-template-columns:minmax(0,clamp(228px,24%,326px)) minmax(0,1fr);
  gap:clamp(16px,2vw,28px);
}
.mt-liste,.mt-fiche{
  position:relative;min-width:0;min-height:0;
  border:1px solid rgba(140,128,220,.26);
  background:linear-gradient(155deg, rgba(23,19,62,.62), rgba(9,7,30,.78));
}
.mt-liste::before,.mt-fiche::before{
  content:'';position:absolute;inset:0;pointer-events:none;opacity:.45;
  background-image:repeating-linear-gradient(115deg, rgba(255,255,255,.02) 0 1px, transparent 1px 5px);
}
.mt-liste{display:flex;flex-direction:column;padding:clamp(12px,1.7vh,17px) 14px clamp(10px,1.4vh,14px) 15px}
.mt-liste-tete{
  position:relative;flex:none;display:flex;align-items:center;gap:10px;
  padding-bottom:clamp(9px,1.3vh,13px);margin-bottom:clamp(9px,1.3vh,13px);
  border-bottom:1px solid rgba(230,200,119,.2);
}
.mt-liste-tete > span{
  font-family:var(--font-tech);font-size:10px;letter-spacing:.3em;text-transform:uppercase;
  color:rgba(230,200,119,.78);white-space:nowrap;
}
.mt-liste-tete > i{flex:1;height:1px;background:rgba(230,200,119,.18)}
.mt-liste-tete > b{
  font-family:var(--font-title);font-weight:400;font-size:15px;color:rgba(240,228,192,.6);
  white-space:nowrap;
}
/* Les quinze voies tiennent dans la colonne, toujours : on ne fait pas
   défiler un catalogue qu’on est venu comparer d’un seul regard. Les
   lignes se serrent jusqu’à tenir, comme la colonne personnage. */
.mt-liste-defil{
  position:relative;flex:1;min-height:0;padding-right:4px;
  display:flex;flex-direction:column;justify-content:flex-start;
}

.mt-groupe{display:flex;flex-direction:column;flex:0 1 auto;min-height:0}
.mt-groupe-tete{flex:none;display:flex;align-items:center;gap:10px;padding-top:clamp(3px,.7vh,9px)}
.mt-groupe-tete > span{
  font-family:var(--font-tech);font-size:9px;letter-spacing:.28em;text-transform:uppercase;
  color:rgba(200,190,230,.5);white-space:nowrap;
}
.mt-groupe-tete > i{flex:1;height:1px;background:rgba(140,128,220,.2)}
/* Sous le nouvel ordre, deux familles se signalent : celle qui traque et
   celle qui refuse. Le reste de l’écran ne change pas d’un pixel. */
.mt-g-rouge > span{color:rgba(226,132,140,.72)}
.mt-g-rouge > i{background:rgba(226,132,140,.22)}
.mt-g-bleu > span{color:rgba(143,208,240,.7)}
.mt-g-bleu > i{background:rgba(143,208,240,.2)}
/* La ligne s’étire quand il reste de la place et se serre quand il en
   manque, mais jamais au-delà d’une hauteur de ligne confortable : huit
   voies ne doivent pas s’éparpiller sur toute la colonne comme quinze. */
.mt-item{
  width:100%;cursor:pointer;text-align:left;
  flex:1 1 auto;min-height:0;max-height:clamp(27px,4.6vh,40px);
  display:flex;align-items:center;gap:10px;
  padding:clamp(2px,.55vh,7px) 8px clamp(2px,.55vh,7px) 10px;
  border:0;border-bottom:1px solid rgba(140,128,220,.12);border-left:2px solid transparent;
  background:transparent;transition:background .18s;
}
.mt-item:hover,.mt-item:focus-visible{background:rgba(230,200,119,.07);outline:none}
.mt-item.on{background:rgba(230,200,119,.09);border-left-color:var(--gold)}
.mt-item-n{
  flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  font-family:var(--font-body);font-size:clamp(15px,1.9vh,19px);line-height:1.15;
  color:rgba(210,203,238,.6);
}
.mt-ok .mt-item-n{color:rgba(236,231,250,.86)}
.mt-item.on .mt-item-n{color:var(--gold-pale)}
.mt-item-e{
  flex:none;white-space:nowrap;
  font-family:var(--font-tech);font-size:8.5px;letter-spacing:.18em;text-transform:uppercase;
}
/* Les quatre états, une seule fois pour toute la feuille. */
.mt-ok .mt-item-e,.mt-det-etat.mt-ok{color:rgba(143,214,165,.85)}
.mt-ferme .mt-item-e,.mt-det-etat.mt-ferme{color:#e2848c}
.mt-shop .mt-item-e,.mt-det-etat.mt-shop{color:var(--reliques)}
.mt-sombre .mt-item-e,.mt-det-etat.mt-sombre{color:rgba(200,190,230,.4)}

/* --- la voie regardée --- */
.mt-fiche{
  display:grid;grid-template-columns:repeat(auto-fit, minmax(258px, 1fr));
  gap:clamp(16px,2vw,32px);
  padding:clamp(14px,2vh,20px) clamp(16px,1.8vw,24px);
  overflow:hidden;
}
.mt-fiche .eq{width:13px;height:13px;left:8px;top:8px;border-color:rgba(230,200,119,.4)}
.mt-fiche .eq-br{left:auto;top:auto;right:8px;bottom:8px;border-color:rgba(230,200,119,.4)}
.mt-det,.mt-ech-col{position:relative;min-width:0;min-height:0;overflow:hidden auto;display:flex;flex-direction:column}
.mt-ech-col{padding-left:clamp(14px,1.6vw,24px);border-left:1px solid rgba(230,200,119,.16)}

.mt-det-tete{flex:none;display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.mt-det-lieu{
  font-family:var(--font-tech);font-size:9px;letter-spacing:.26em;text-transform:uppercase;
  color:rgba(200,190,230,.5);
}
.mt-det-etat{
  padding:2px 8px;border:1px solid currentColor;
  font-family:var(--font-tech);font-size:8px;letter-spacing:.2em;text-transform:uppercase;
  white-space:nowrap;
}
.mt-det-nom{
  flex:none;margin:8px 0 0;
  font-family:var(--font-title);font-weight:600;font-size:clamp(21px,2.4vh,27px);line-height:1.06;
  color:var(--gold-pale);text-wrap:balance;
}
.mt-det-desc{
  flex:none;max-width:46ch;margin:9px 0 0;
  font-family:var(--font-body);font-size:clamp(17px,2vh,19px);line-height:1.45;
  color:rgba(224,218,246,.78);text-wrap:pretty;
}

.mt-lab{display:flex;align-items:center;gap:10px}
.mt-lab > span{
  font-family:var(--font-tech);font-size:9px;letter-spacing:.28em;text-transform:uppercase;
  color:rgba(230,200,119,.7);white-space:nowrap;
}
.mt-lab > i{flex:1;height:1px;background:rgba(230,200,119,.2)}
.mt-lab-bleu > span{font-size:10px;color:rgba(143,208,240,.75)}
.mt-lab-bleu > i{background:rgba(143,208,240,.18)}
.mt-sous{
  display:block;margin-top:9px;
  font-family:var(--font-tech);font-size:9px;letter-spacing:.24em;text-transform:uppercase;
  color:rgba(200,190,230,.45);
}

.mt-compat{flex:none;margin-top:clamp(12px,1.8vh,18px)}
.mt-compat-l{display:flex;align-items:center;gap:12px;margin-top:9px}
/* Dix crans, pas vingt : à cette taille, vingt ne se comptent plus. */
.mt-crans{flex:1;display:flex;gap:3px}
.mt-crans i{flex:1;height:6px;background:rgba(140,128,220,.14)}
.mt-crans i.on{background:linear-gradient(180deg,rgba(190,178,240,.95),rgba(120,106,190,.9))}
/* Au-delà de quatre-vingts, la compatibilité passe à l’or : c’est le seuil
   à partir duquel le dossier parle de lui-même. */
.mt-crans.haut i.on{
  background:linear-gradient(180deg,#f7e6b4,#cfa64c);box-shadow:0 0 10px -2px rgba(230,200,119,.7);
}
.mt-compat-l b{flex:none;font-family:var(--font-title);font-weight:600;font-size:18px}
.mt-or{color:var(--gold-warm)}
.mt-pale{color:rgba(214,206,248,.9)}
.mt-mal{color:#e2848c}
.mt-cond{
  margin:5px 0 0;font-family:var(--font-body);font-size:17px;line-height:1.4;text-wrap:pretty;
  color:rgba(224,218,246,.78);
}
.mt-cond.mt-ferme,.mt-cond.mt-sombre{color:rgba(226,132,140,.82)}
.mt-cond.mt-shop{color:rgba(143,208,240,.85)}
/* La paye tombe en bas de colonne : c’est la dernière chose qu’on lit
   avant de regarder les échelons. */
.mt-paye{flex:none;margin-top:auto;padding-top:clamp(12px,1.8vh,18px)}
.mt-paye p{margin:5px 0 0;font-family:var(--font-body);font-size:17px;color:rgba(240,232,205,.82)}

.mt-echelons{flex:none;margin-top:7px}
.mt-ech{
  display:flex;align-items:baseline;gap:10px;padding:5px 0;
  border-bottom:1px solid rgba(140,128,220,.12);
}
/* Un losange, pas un rond : le premier échelon est plein, les autres
   attendent. */
.mt-ech > i{
  flex:none;width:7px;height:7px;transform:rotate(45deg);
  background:transparent;border:1px solid rgba(140,128,220,.35);
}
.mt-ech.on > i{background:linear-gradient(135deg,#f7e6b4,#cfa64c);border-color:rgba(244,221,160,.9)}
.mt-ech > span{
  flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  font-family:var(--font-body);font-size:19px;color:rgba(210,203,238,.62);
}
.mt-ech.on > span{color:rgba(244,236,214,.9)}
.mt-ech > em{
  flex:none;font-style:normal;white-space:nowrap;
  font-family:var(--font-tech);font-size:9px;letter-spacing:.16em;text-transform:uppercase;
  color:rgba(200,190,230,.45);
}
.mt-mot{
  flex:none;margin:clamp(10px,1.6vh,16px) 0 0;
  font-family:var(--font-body);font-size:18px;font-style:italic;line-height:1.4;
  color:rgba(200,190,230,.55);text-wrap:pretty;
}
.mt-mot.mt-ferme,.mt-mot.mt-sombre{color:rgba(226,132,140,.7)}

.mt-choisir{
  flex:none;margin-top:auto;width:100%;cursor:pointer;
  padding:13px 18px;border:1px solid transparent;
  font-family:var(--font-tech);font-weight:500;font-size:11px;letter-spacing:.26em;
  text-transform:uppercase;transition:filter .2s;
}
.mt-choisir:hover:not(:disabled),.mt-choisir:focus-visible:not(:disabled){filter:brightness(1.08);outline:none}
.mt-choisir-on{
  border-color:rgba(244,221,160,.8);background:linear-gradient(180deg,#f4dda0,#cfa64c);color:#2b1d05;
}
.mt-choisir-shop{
  border-color:rgba(143,208,240,.45);background:rgba(143,208,240,.12);color:var(--reliques-pale);
}
.mt-choisir-ferme{
  border-color:rgba(226,132,140,.35);background:transparent;color:rgba(226,132,140,.8);
}
.mt-choisir:disabled{cursor:not-allowed}
/* Une voie déjà prise ne se reprend pas : le bouton devient une quittance. */
.mt-choisir-pris{
  border-color:rgba(143,214,165,.5);background:rgba(143,214,165,.14);color:rgba(184,232,200,.9);
  cursor:default;
}

/* --- l’écran étroit ou court --- */
@media(max-height:820px){
  .mt{gap:10px}
  .mt-titre{font-size:19px}
  .mt-intro{font-size:17px;line-height:1.42}
  .mt-sugg-l1 b{font-size:19px}
  .mt-det-desc{font-size:17px}
  .mt-ech{padding:4px 0}
  .mt-ech > span{font-size:17px}
  .mt-mot{font-size:16px}
}
@media(max-width:1100px){
  .mt-corps{grid-template-columns:1fr;grid-template-rows:minmax(0,34%) minmax(0,1fr)}
  .mt-tete{align-items:flex-start}
  .mt-intro{flex-basis:100%;margin-left:0}
}
@media(max-width:760px){
  .mt-fiche{grid-template-columns:1fr;grid-template-rows:minmax(0,1fr) minmax(0,auto)}
  .mt-ech-col{padding-left:0;padding-top:14px;border-left:0;border-top:1px solid rgba(230,200,119,.16)}
  .mt-sugg{width:100%}
}


/* ============================================================================
   41. LE TEMPS LIBRE
   ----------------------------------------------------------------------------
   Trois points d’action par trimestre, et une liste d’occupations qui n’est
   jamais la même : les clubs rejoints, les années passées et ce qu’on a déjà
   osé en ouvrent d’autres, et en referment certaines.

   À gauche le catalogue, groupé par famille et sans le moindre pictogramme :
   une occupation se nomme, elle ne se dessine pas. À droite l’occupation
   regardée, en deux colonnes : ce qu’elle raconte et ce qu’elle change d’un
   côté, ce qu’elle touche et ce qui reste du trimestre de l’autre.

   Chaque famille porte une couleur, et cette couleur revient dans le halo du
   panneau de droite : on sait de quel registre on parle avant même de lire.
   ============================================================================ */
.tl{
  position:relative;width:100%;height:100%;min-height:0;
  display:flex;flex-direction:column;gap:clamp(10px,1.6vh,18px);
  animation:rise .6s var(--ease-out) both;
}

/* --- le bandeau : le trimestre, et ce qu’il en reste --- */
.tl-tete{
  flex:none;display:flex;align-items:flex-end;gap:16px;flex-wrap:wrap;
  padding:0 4px clamp(8px,1.4vh,14px);
}
.tl-tete-g{min-width:0}
.tl-trim{
  display:block;white-space:nowrap;
  font-family:var(--font-tech);font-size:10px;letter-spacing:.34em;text-transform:uppercase;
  color:rgba(230,200,119,.7);
}
.tl-titre{
  margin:5px 0 0;white-space:nowrap;
  font-family:var(--font-title);font-weight:600;font-size:clamp(18px,2vw,21px);letter-spacing:.04em;
  color:#f4ecd6;
}
.tl-espace{flex:1;min-width:12px}
.tl-pts{flex:none;display:flex;align-items:center;gap:16px}
.tl-pts-txt{text-align:right;min-width:0}
.tl-pts-lab{
  display:block;white-space:nowrap;
  font-family:var(--font-tech);font-size:9px;letter-spacing:.3em;text-transform:uppercase;
  color:rgba(200,190,230,.42);
}
.tl-pts-mot{
  display:block;margin-top:5px;
  font-family:var(--font-body);font-size:16px;font-style:italic;color:rgba(200,190,230,.6);
}
/* Les points d’action : des losanges, comme les crans d’un lien. Un point
   dépensé s’éteint, il ne disparaît pas : on doit voir ce qu’on a fait. */
.tl-jetons{
  flex:none;display:flex;align-items:center;gap:9px;
  padding-left:16px;border-left:1px solid rgba(140,128,220,.2);
}
.tl-jetons i{
  width:15px;height:15px;transform:rotate(45deg);
  background:transparent;border:1px solid rgba(140,128,220,.4);
}
.tl-jetons i.on{
  background:linear-gradient(135deg,#f7e6b4,#cfa64c);border-color:rgba(244,221,160,.9);
  box-shadow:0 0 14px -3px rgba(230,200,119,.8);
}

/* --- le corps --- */
.tl-corps{
  flex:1;min-height:0;display:grid;align-items:stretch;
  grid-template-columns:minmax(0,clamp(226px,23%,330px)) minmax(0,1fr);
  gap:clamp(16px,2.2vw,30px);
}

/* --- le catalogue --- */
.tl-liste{
  min-width:0;min-height:0;display:flex;flex-direction:column;gap:2px;
  padding-right:6px;
}
.tl-groupe{display:flex;flex-direction:column;flex:0 1 auto;min-height:0}
.tl-groupe-tete{
  flex:none;display:flex;align-items:center;gap:10px;padding:clamp(4px,.9vh,9px) 0 4px;
}
.tl-groupe-tete > span{
  font-family:var(--font-tech);font-size:9px;letter-spacing:.32em;text-transform:uppercase;
  color:rgba(200,190,230,.5);white-space:nowrap;
}
.tl-groupe-tete > i{flex:1;height:1px;background:rgba(140,128,220,.2)}
/* Quatre familles, quatre couleurs : l’or de l’étude, le rouge du terrain,
   le rose des liens, le sang de ce qui est interdit. */
.tl-g-or > span{color:rgba(230,200,119,.75)}   .tl-g-or > i{background:rgba(230,200,119,.22)}
.tl-g-rouge > span{color:rgba(194,84,95,.8)}   .tl-g-rouge > i{background:rgba(194,84,95,.22)}
.tl-g-rose > span{color:rgba(217,143,184,.8)}  .tl-g-rose > i{background:rgba(217,143,184,.2)}
.tl-g-sang > span{color:rgba(212,101,124,.85)} .tl-g-sang > i{background:rgba(212,101,124,.24)}

.tl-item{
  position:relative;flex:1 1 auto;min-height:27px;max-height:clamp(27px,4.4vh,38px);
  display:flex;align-items:center;gap:11px;
  padding:3px 10px 3px 12px;margin:0 -10px 0 -12px;
  border:0;border-left:2px solid transparent;background:transparent;
  text-align:left;cursor:pointer;
  transition:background .2s, border-color .2s;
}
.tl-item:hover,.tl-item:focus-visible{background:rgba(140,128,220,.09);outline:none}
.tl-item.on{
  border-left-color:rgba(230,200,119,.85);
  background:linear-gradient(90deg, rgba(230,200,119,.13), rgba(230,200,119,.02));
}
.tl-item-n{
  flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  font-family:var(--font-body);font-size:clamp(16px,2vh,19px);line-height:1.15;
  color:rgba(236,231,250,.88);
}
.tl-item.on .tl-item-n{color:var(--gold-pale)}
/* Ce qui est déjà fait ce trimestre, et ce qu’on n’a plus le temps de
   faire : les deux s’éteignent, mais aucun ne disparaît de la liste. */
.tl-faite,.tl-hors{opacity:.42}
.tl-faite .tl-item-n{color:rgba(200,190,230,.6)}
.tl-item-fait{
  flex:none;font-family:var(--font-tech);font-size:8px;letter-spacing:.2em;text-transform:uppercase;
  color:rgba(124,179,119,.9);
}
/* Le prix d’une occupation, dans la même langue que les points du bandeau :
   un losange par point d’action. Une journée à Pré-au-Lard en montre deux,
   et on n’a pas besoin de lire pour le savoir. */
.tl-item-cout{flex:none;display:flex;gap:4px}
.tl-item-cout i{
  width:7px;height:7px;transform:rotate(45deg);
  background:linear-gradient(135deg,rgba(247,230,180,.75),rgba(207,166,76,.7));
  border:1px solid rgba(244,221,160,.45);
}
.tl-item.on .tl-item-cout i{
  background:linear-gradient(135deg,#f7e6b4,#cfa64c);border-color:rgba(244,221,160,.95);
  box-shadow:0 0 8px -2px rgba(230,200,119,.8);
}
/* Trop cher pour ce qu’il reste : les losanges se vident, ils ne partent pas. */
.tl-hors .tl-item-cout i{background:transparent;border-color:rgba(212,101,124,.5)}
.tl-liste-mot{
  flex:none;margin:12px 0 0;padding-top:10px;
  border-top:1px solid rgba(140,128,220,.16);
  font-family:var(--font-body);font-size:16px;font-style:italic;line-height:1.4;
  color:rgba(200,190,230,.42);text-wrap:pretty;
}
/* Renoncer au reste du trimestre. Sous la liste, dans la langue des
   libellés techniques et non dans celle des occupations : ce n’est pas
   une sixième occupation, c’est la sortie. Le premier clic l’arme et le
   fait passer au sang, le second ferme le trimestre.

   Il portait la même graisse et la même opacité que la note en italique
   juste au-dessus, et se lisait comme une légende de bas de colonne : le
   joueur qui cherchait comment finir son trimestre ne le voyait pas. Il a
   donc son cadre à lui, un filet d’or complet et un montant à gauche, plus
   large que les occupations : c’est le seul élément encadré de la colonne,
   et rien d’autre ne peut être confondu avec lui. */
.tl-passer{
  position:relative;flex:none;
  display:flex;flex-direction:column;align-items:flex-start;gap:3px;
  margin:11px 0 1px;padding:9px 13px;
  border:1px solid rgba(230,200,119,.3);
  border-left:3px solid rgba(230,200,119,.6);
  background:linear-gradient(90deg, rgba(230,200,119,.11), rgba(230,200,119,.015));
  text-align:left;cursor:pointer;
  transition:background .2s, border-color .2s, box-shadow .2s;
}
.tl-passer:hover,.tl-passer:focus-visible{
  border-color:rgba(230,200,119,.55);border-left-color:rgba(244,221,160,.95);
  background:linear-gradient(90deg, rgba(230,200,119,.2), rgba(230,200,119,.04));
  box-shadow:0 0 18px -8px rgba(230,200,119,.7);outline:none;
}
/* Deux lignes, pas deux colonnes : à 226 px de colonne, le libellé et le
   compte côte à côte cassaient le libellé en deux et la hauteur du bouton
   changeait avec la résolution. Empilés, le libellé tient sur une ligne
   partout, de 1280 à 2560. */
.tl-passer-n{
  min-width:0;font-family:var(--font-tech);font-size:10px;letter-spacing:.26em;
  text-transform:uppercase;line-height:1.4;color:rgba(244,221,160,.82);
  text-wrap:balance;transition:color .2s;
}
.tl-passer:hover .tl-passer-n{color:var(--gold-pale)}
/* Le prix rendu, dans la langue des losanges de la liste : ce n’est pas un
   gain annoncé, c’est ce qu’on laisse sur la table. */
.tl-passer-c{
  flex:none;font-family:var(--font-tech);font-size:9px;letter-spacing:.16em;
  color:rgba(230,200,119,.5);
}
.tl-passer[data-arme="1"]{
  border-color:rgba(212,101,124,.6);border-left-color:rgba(212,101,124,.95);
  background:linear-gradient(90deg, rgba(212,101,124,.2), rgba(212,101,124,.04));
  box-shadow:0 0 18px -8px rgba(212,101,124,.8);
}
/* Armé, le libellé devient une phrase de trente-six signes : il prend
   toute la largeur, et le compte de jetons s’efface le temps de la
   question. Une confirmation ne se lit pas sur deux colonnes. */
.tl-passer[data-arme="1"] .tl-passer-n,
.tl-passer[data-arme="1"]:hover .tl-passer-n{
  color:rgba(233,150,167,.98);letter-spacing:.16em;
}
.tl-passer[data-arme="1"] .tl-passer-c{display:none}

/* --- l’occupation regardée --- */
.tl-fiche{
  position:relative;min-width:0;min-height:0;
  display:grid;grid-template-columns:repeat(auto-fit, minmax(290px, 1fr));
  grid-auto-rows:minmax(0, 1fr);align-items:stretch;
  gap:clamp(18px,2.4vw,40px);
  padding:clamp(18px,2.6vh,28px) clamp(20px,2.4vw,34px) clamp(16px,2.4vh,24px);
  border:1px solid rgba(230,200,119,.24);
  background:linear-gradient(155deg, rgba(30,24,72,.9) 0%, rgba(14,11,40,.94) 46%, rgba(9,7,28,.96) 100%);
  box-shadow:0 30px 80px -40px rgba(0,0,0,1), inset 0 1px 0 rgba(255,255,255,.05);
  overflow:hidden;
}
/* Le halo prend la couleur de la famille, et change en douceur quand on
   passe d’une occupation à l’autre. C’est la seule chose qui bouge. */
.tl-halo{
  position:absolute;left:-30%;top:-60%;width:120%;height:160%;
  pointer-events:none;opacity:.5;
  background:radial-gradient(closest-side at 30% 35%, rgba(230,200,119,.16) 0%, rgba(0,0,0,0) 100%);
  transition:background .45s var(--ease-out);
}
.tl-halo[data-fam="corps"]{background:radial-gradient(closest-side at 30% 35%, rgba(194,84,95,.16) 0%, rgba(0,0,0,0) 100%)}
.tl-halo[data-fam="liens"]{background:radial-gradient(closest-side at 30% 35%, rgba(217,143,184,.15) 0%, rgba(0,0,0,0) 100%)}
.tl-halo[data-fam="interdit"]{background:radial-gradient(closest-side at 30% 35%, rgba(212,101,124,.17) 0%, rgba(0,0,0,0) 100%)}
.tl-fiche > .eq{position:absolute;width:13px;height:13px;pointer-events:none;z-index:2}
.tl-fiche > .eq-tl{left:11px;top:11px;border-left:1px solid rgba(230,200,119,.5);border-top:1px solid rgba(230,200,119,.5)}
.tl-fiche > .eq-tr{right:11px;top:11px;border-right:1px solid rgba(230,200,119,.5);border-top:1px solid rgba(230,200,119,.5)}
.tl-fiche > .eq-bl{left:11px;bottom:11px;border-left:1px solid rgba(230,200,119,.5);border-bottom:1px solid rgba(230,200,119,.5)}
.tl-fiche > .eq-br{right:11px;bottom:11px;border-right:1px solid rgba(230,200,119,.5);border-bottom:1px solid rgba(230,200,119,.5)}

.tl-det,.tl-cote{position:relative;z-index:1;min-width:0;min-height:0;display:flex;flex-direction:column}
.tl-cote{
  max-width:52ch;gap:clamp(14px,2.2vh,24px);
  padding-left:clamp(18px,2.2vw,32px);border-left:1px solid rgba(230,200,119,.16);
}

.tl-det-tete{flex:none;display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.tl-det-fam{
  font-family:var(--font-tech);font-size:9px;letter-spacing:.3em;text-transform:uppercase;
  color:rgba(200,190,230,.45);
}
.tl-det-tag{
  padding:2px 8px;border:1px solid currentColor;white-space:nowrap;
  font-family:var(--font-tech);font-size:9px;letter-spacing:.22em;text-transform:uppercase;
}
.tl-tag-or{color:rgba(230,200,119,.85)}
.tl-tag-bleu{color:rgba(143,208,240,.85)}
.tl-tag-vert{color:rgba(124,179,119,.9)}
.tl-tag-rouge{color:rgba(212,101,124,.9)}
.tl-det-titre{
  flex:none;margin:8px 0 0;
  font-family:var(--font-title);font-weight:600;font-size:clamp(21px,2.9vh,30px);line-height:1.14;
  letter-spacing:.02em;color:var(--gold-pale);text-wrap:pretty;
}
.tl-det-histoire{
  flex:none;max-width:62ch;margin:clamp(10px,1.8vh,18px) 0 0;
  font-family:var(--font-body);font-size:clamp(15px,2.1vh,20px);font-style:italic;line-height:1.5;
  color:rgba(226,220,245,.78);text-wrap:pretty;
}

.tl-lab{display:flex;align-items:center;gap:12px}
.tl-lab > span{
  font-family:var(--font-tech);font-size:9px;letter-spacing:.3em;text-transform:uppercase;
  color:rgba(230,200,119,.7);white-space:nowrap;
}
.tl-lab > i{flex:1;height:1px;background:rgba(230,200,119,.2)}
.tl-lab-bleu > span{color:rgba(143,208,240,.75)}
.tl-lab-bleu > i{background:rgba(143,208,240,.18)}

/* Ce que ça change : la valeur d’abord, en gros, le libellé après. On lit
   le chiffre avant de lire ce qu’il concerne. */
.tl-change{flex:none;margin-top:auto;padding-top:clamp(14px,2.4vh,24px)}
.tl-tuiles{
  max-width:62ch;margin-top:clamp(8px,1.5vh,14px);
  display:grid;grid-template-columns:repeat(auto-fit, minmax(150px, 1fr));
  gap:clamp(7px,1.2vh,12px) 22px;
}
.tl-tuile{
  display:flex;align-items:baseline;gap:11px;min-width:0;
  padding-bottom:8px;border-bottom:1px solid rgba(140,128,220,.16);
}
.tl-tuile b{
  flex:none;font-family:var(--font-title);font-weight:600;
  font-size:clamp(19px,2.6vh,24px);line-height:1;
}
.tl-tuile span{
  min-width:0;font-family:var(--font-tech);font-size:9px;letter-spacing:.22em;
  text-transform:uppercase;line-height:1.5;color:rgba(200,190,230,.55);
}
.tl-up{color:#7fd8a8;text-shadow:0 0 20px rgba(127,216,168,.28)}
.tl-down{color:#e2848c;text-shadow:0 0 20px rgba(226,132,140,.28)}
.tl-info{color:var(--reliques);text-shadow:0 0 20px rgba(143,208,240,.26)}
.tl-gold{color:var(--gold-warm);text-shadow:0 0 20px rgba(230,200,119,.3)}

.tl-enjeu{
  max-width:62ch;margin:clamp(9px,1.6vh,16px) 0 0;
  font-family:var(--font-body);font-size:16px;line-height:1.45;color:rgba(200,190,230,.55);
}
.tl-enjeu-lab{
  margin-right:10px;
  font-family:var(--font-tech);font-size:9px;letter-spacing:.26em;text-transform:uppercase;
}
.tl-lab-or{color:rgba(230,200,119,.75)}
.tl-lab-bleu{color:rgba(143,208,240,.75)}
.tl-lab-rouge{color:rgba(212,101,124,.85)}

.tl-agir{flex:none;margin-top:clamp(10px,1.7vh,18px);display:flex;align-items:center;gap:18px}
.tl-cout-lab{
  flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  font-family:var(--font-tech);font-size:9px;letter-spacing:.26em;text-transform:uppercase;
  color:rgba(200,190,230,.4);
}
.tl-go{
  flex:none;cursor:pointer;
  padding:clamp(10px,1.7vh,15px) clamp(20px,2.4vw,34px);
  border:1px solid rgba(244,221,160,.8);background:linear-gradient(180deg,#f4dda0,#cfa64c);
  font-family:var(--font-tech);font-weight:500;font-size:11px;letter-spacing:.3em;
  text-transform:uppercase;color:#2b1d05;
  transition:filter .2s, transform .2s;
}
.tl-go:hover:not(:disabled),.tl-go:focus-visible:not(:disabled){filter:brightness(1.07);transform:translateY(-1px);outline:none}
.tl-go:disabled{
  cursor:not-allowed;background:transparent;color:rgba(200,190,230,.4);
  border-color:rgba(140,128,220,.3);
}

/* --- ce que ça touche --- */
.tl-bloc{flex:none;min-width:0}
.tl-bloc-bas{margin-top:auto}
.tl-touches{margin-top:clamp(10px,1.7vh,16px);display:flex;flex-direction:column;gap:clamp(10px,1.7vh,16px)}
.tl-touche{min-width:0}
.tl-touche-l{display:flex;align-items:baseline;justify-content:space-between;gap:12px}
.tl-touche-n{
  min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  font-family:var(--font-body);font-size:18px;color:rgba(232,227,250,.82);
}
.tl-touche-v{
  flex:none;display:flex;align-items:baseline;gap:7px;
  font-family:var(--font-title);font-size:15px;color:rgba(200,190,230,.5);
}
.tl-touche-v i{font-style:normal;color:rgba(200,190,230,.3)}
.tl-touche-v b{font-weight:400;font-size:18px}
/* La jauge : le socle atteint, puis le segment gagné qui s’allume. Même
   langue que les variations de « ce que ça change ». */
.tl-touche-jauge{margin-top:7px;height:4px;display:flex;background:rgba(140,128,220,.14)}
.tl-touche-jauge u{height:100%;text-decoration:none;background:rgba(140,128,220,.55)}
.tl-touche-jauge s{height:100%;text-decoration:none;animation:segIn .6s var(--ease-out) both}
.tl-seg-up{background:#7fd8a8;box-shadow:0 0 12px -2px #7fd8a8}
.tl-seg-down{background:#e2848c;box-shadow:0 0 12px -2px #e2848c}
.tl-cote-vide{
  margin:clamp(10px,1.7vh,16px) 0 0;
  font-family:var(--font-body);font-size:17px;font-style:italic;line-height:1.45;
  color:rgba(200,190,230,.5);text-wrap:pretty;
}

.tl-prog{display:flex;align-items:center;gap:14px;margin-top:11px}
.tl-prog-crans{flex:1;display:flex;gap:3px}
.tl-prog-crans i{flex:1;height:7px;background:rgba(140,128,220,.16)}
.tl-prog-crans i.on{background:var(--reliques);box-shadow:0 0 12px -3px var(--reliques)}
.tl-prog b{flex:none;font-family:var(--font-title);font-weight:400;font-size:15px;color:var(--reliques-pale)}
.tl-prog-mot{
  margin:8px 0 0;font-family:var(--font-body);font-size:16px;font-style:italic;line-height:1.4;
  color:rgba(200,190,230,.5);text-wrap:pretty;
}

.tl-creneaux{margin-top:clamp(8px,1.5vh,13px);display:flex;flex-direction:column}
.tl-creneau{
  display:flex;align-items:center;gap:11px;padding:6px 0;
  border-bottom:1px solid rgba(140,128,220,.12);
}
.tl-creneau > i{
  flex:none;width:9px;height:9px;transform:rotate(45deg);
  background:transparent;border:1px solid rgba(140,128,220,.35);
}
.tl-creneau > span{
  flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  font-family:var(--font-body);font-size:17px;color:rgba(210,203,238,.6);
}
.tl-creneau.pris > i{background:linear-gradient(135deg,#f7e6b4,#cfa64c);border-color:rgba(244,221,160,.9)}
.tl-creneau.pris > span{color:rgba(244,236,214,.8)}
.tl-ou{
  display:block;margin-top:clamp(9px,1.6vh,14px);
  font-family:var(--font-tech);font-size:9px;letter-spacing:.24em;text-transform:uppercase;
  color:rgba(200,190,230,.34);
}

/* --- l’écran court ou étroit --- */
@media(max-height:820px){
  .tl{gap:9px}
  .tl-titre{font-size:19px}
  .tl-pts-mot{font-size:15px}
  .tl-jetons i{width:12px;height:12px}
  .tl-det-histoire{font-size:16px;margin-top:9px}
  .tl-liste-mot{margin-top:9px;padding-top:8px;font-size:15px}
  .tl-touches{gap:10px}
  .tl-creneau{padding:4px 0}
}
@media(max-width:1100px){
  .tl-corps{grid-template-columns:1fr;grid-template-rows:minmax(0,38%) minmax(0,1fr)}
  .tl-liste{overflow:hidden auto}
  .tl-pts{width:100%;justify-content:space-between}
  .tl-pts-txt{text-align:left}
}
@media(max-width:760px){
  .tl-fiche{grid-template-columns:1fr;grid-template-rows:minmax(0,1fr) minmax(0,auto)}
  .tl-cote{max-width:none;padding-left:0;padding-top:14px;border-left:0;border-top:1px solid rgba(230,200,119,.16)}
}


/* ============================================================================
   42. LE BILAN DE FIN D’ANNÉE
   ----------------------------------------------------------------------------
   Un document, pas un tableau de scores. Le blason d’un côté, le cachet du
   verdict de l’autre, penché comme un tampon posé à la main. Entre les deux,
   trois piliers chiffrés et leur colonne de crans, trois lignes secondaires,
   ce que l’année laisse derrière elle, et les quatre moments qu’on retiendra.

   Des braises montent lentement derrière tout ça : c’est un feu de fin de
   trimestre, pas une animation d’écran de victoire. Elles sont lentes, rares,
   et personne ne doit les remarquer tout de suite.
   ============================================================================ */
.bl{
  position:relative;width:100%;max-width:1240px;margin:0 auto;overflow:hidden;
  display:flex;flex-direction:column;
  border:1px solid rgba(230,200,119,.2);
  background:linear-gradient(180deg, rgba(28,23,68,.72) 0%, rgba(12,10,34,.92) 100%);
  box-shadow:0 50px 110px -60px rgba(0,0,0,1), inset 0 1px 0 rgba(255,255,255,.06);
  animation:rise .7s var(--ease-out) both;
}
.bl > .grain{
  background-image:
    repeating-linear-gradient(51deg, rgba(255,255,255,.022) 0 1px, transparent 1px 3px),
    repeating-linear-gradient(-38deg, rgba(0,0,0,.05) 0 1px, transparent 1px 4px);
  opacity:.5;
}
.bl > .eq{position:absolute;width:16px;height:16px;pointer-events:none;z-index:2}
.bl > .eq-tl{left:12px;top:12px;border-left:1px solid rgba(230,200,119,.45);border-top:1px solid rgba(230,200,119,.45)}
.bl > .eq-tr{right:12px;top:12px;border-right:1px solid rgba(230,200,119,.45);border-top:1px solid rgba(230,200,119,.45)}
.bl > .eq-bl{left:12px;bottom:12px;border-left:1px solid rgba(230,200,119,.45);border-bottom:1px solid rgba(230,200,119,.45)}
.bl > .eq-br{right:12px;bottom:12px;border-right:1px solid rgba(230,200,119,.45);border-bottom:1px solid rgba(230,200,119,.45)}

/* --- les braises --- */
.bl-braises{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0}
.bl-braises i{
  position:absolute;bottom:-6px;width:2px;height:2px;border-radius:50%;
  background:rgba(240,215,140,.75);box-shadow:0 0 8px rgba(230,200,119,.8);
  animation-name:blBraise;animation-timing-function:linear;animation-iteration-count:infinite;
}
@keyframes blBraise{
  0%{transform:translateY(0) translateX(0);opacity:0}
  12%{opacity:.7}
  70%{opacity:.5}
  100%{transform:translateY(-72vh) translateX(26px);opacity:0}
}

.bl-corps{
  position:relative;z-index:1;display:flex;flex-direction:column;
  padding:clamp(12px,2.2vh,30px) clamp(20px,3.6vw,60px) clamp(14px,2.2vh,28px);
}

/* --- l’en-tête : blason, titre, cachet --- */
.bl-tete{flex:none;display:flex;align-items:center;justify-content:center;gap:clamp(12px,2vw,30px)}
.bl-filet{flex:1;height:1px;max-width:190px}
.bl-filet-g{background:linear-gradient(90deg, rgba(230,200,119,0), rgba(230,200,119,.55))}
.bl-filet-d{background:linear-gradient(90deg, rgba(230,200,119,.55), rgba(230,200,119,0))}
/* Le blason garde son disque : c’est l’une des deux exceptions à l’angle vif. */
.bl-crest{
  flex:none;width:clamp(52px,6vw,84px);height:clamp(52px,6vw,84px);
  display:flex;align-items:center;justify-content:center;border-radius:50%;
  border:1px solid rgba(230,200,119,.35);
  background:radial-gradient(circle at 50% 32%, rgba(54,46,116,.92), rgba(11,9,32,.96));
  box-shadow:0 12px 34px -16px rgba(0,0,0,.95), 0 0 40px -16px rgba(230,200,119,.55),
    inset 0 1px 0 rgba(255,255,255,.07);
}
.bl-crest img,.bl-crest .blason{width:58%;height:58%;object-fit:contain;filter:drop-shadow(0 3px 8px rgba(0,0,0,.6))}
.bl-tete-txt{text-align:center;min-width:0}
.bl-kicker{
  display:block;white-space:nowrap;
  font-family:var(--font-tech);font-size:9.5px;letter-spacing:.42em;text-transform:uppercase;
  color:rgba(230,200,119,.7);
}
.bl-titre{
  margin:clamp(5px,1vh,10px) 0 0;white-space:nowrap;
  font-family:var(--font-title);font-weight:600;font-size:clamp(24px,3vw,44px);line-height:1;
  letter-spacing:.06em;text-transform:uppercase;
  color:var(--gold-pale);text-shadow:0 0 54px rgba(230,200,119,.3);
}
.bl-sous{
  display:block;margin-top:clamp(4px,.9vh,9px);white-space:nowrap;
  font-family:var(--font-body);font-size:clamp(15px,1.3vw,19px);font-style:italic;
  color:rgba(200,190,230,.6);
}
/* Le cachet : posé de travers, comme un tampon qu’on n’a pas pris le temps
   d’aligner. Il tombe en place à l’ouverture, et ne bouge plus. */
.bl-cachet{
  flex:none;display:flex;flex-direction:column;align-items:center;gap:3px;
  padding:9px 15px 8px;
  border:1px solid rgba(230,200,119,.5);background:rgba(230,200,119,.06);
  box-shadow:0 0 30px -14px rgba(230,200,119,.8);
  animation:blCachet .7s var(--ease-out) .35s both;
}
@keyframes blCachet{
  from{opacity:0;transform:rotate(-26deg) scale(1.35)}
  to{opacity:1;transform:rotate(-8deg) scale(1)}
}
.bl-cachet b{
  font-family:var(--font-tech);font-weight:400;font-size:8px;letter-spacing:.3em;
  text-transform:uppercase;color:rgba(200,190,230,.5);white-space:nowrap;
}
.bl-cachet i{
  font-style:normal;white-space:nowrap;
  font-family:var(--font-title);font-weight:600;font-size:clamp(14px,1.4vw,19px);letter-spacing:.04em;
  color:#f4ecd6;
}
.bl-cachet em{
  font-style:italic;white-space:nowrap;
  font-family:var(--font-body);font-size:14px;color:rgba(200,190,230,.55);
}

.bl-prose{
  flex:none;max-width:78ch;margin:clamp(10px,1.8vh,18px) auto 0;text-align:center;
  font-family:var(--font-body);font-size:clamp(16px,1.35vw,20px);line-height:1.6;
  color:rgba(226,220,245,.8);text-wrap:pretty;
}

/* --- les deux colonnes --- */
.bl-grille{
  flex:none;display:grid;align-items:start;
  grid-template-columns:repeat(auto-fit, minmax(min(100%,420px),1fr));
  gap:clamp(16px,2.4vw,38px);margin-top:clamp(12px,2vh,22px);
}
.bl-gauche{min-width:0;display:flex;flex-direction:column;gap:clamp(9px,1.5vh,15px)}
.bl-droite{min-width:0;display:flex;flex-direction:column}

/* --- les trois piliers --- */
.bl-piliers{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(8px,1.2vw,14px)}
.bl-pilier{
  position:relative;display:flex;gap:clamp(8px,1vw,13px);
  padding:clamp(11px,1.8vh,18px) clamp(10px,1.1vw,15px);
  border:1px solid rgba(230,200,119,.22);
  background:linear-gradient(165deg, rgba(32,26,78,.6), rgba(11,9,32,.8));
  transition:border-color .2s, transform .2s;
}
.bl-pilier:hover{border-color:rgba(230,200,119,.5);transform:translateY(-3px)}
.bl-pilier > .eq{position:absolute;width:10px;height:10px;pointer-events:none}
.bl-pilier > .eq-tl{left:5px;top:5px;border-left:1px solid var(--ton);border-top:1px solid var(--ton)}
.bl-pilier > .eq-br{right:5px;bottom:5px;border-right:1px solid var(--ton);border-bottom:1px solid var(--ton)}
/* La colonne de crans se remplit par le bas, comme une éprouvette. */
.bl-pilier-col{flex:none;display:flex;flex-direction:column-reverse;gap:2px;width:6px}
.bl-pilier-col i{width:100%;height:6px;background:rgba(140,128,220,.16)}
.bl-pilier-col i.on{background:var(--ton)}
.bl-pilier-col i.on:last-of-type{box-shadow:0 0 10px -2px var(--ton)}
.bl-pilier-txt{flex:1;min-width:0;display:flex;flex-direction:column;gap:6px}
.bl-pilier-v{display:flex;align-items:baseline;gap:6px;min-width:0}
.bl-pilier-v b{
  font-family:var(--font-title);font-weight:600;font-size:clamp(22px,2.7vw,38px);line-height:.92;
  color:var(--gold-pale);text-shadow:0 0 26px var(--ton);
}
.bl-pilier-v u{
  text-decoration:none;
  font-family:var(--font-tech);font-size:9px;letter-spacing:.18em;text-transform:uppercase;
  color:rgba(200,190,230,.4);
}
.bl-pilier-lab{
  font-family:var(--font-tech);font-size:9px;letter-spacing:.24em;text-transform:uppercase;
  color:rgba(200,190,230,.5);text-wrap:pretty;
}
.bl-tend{
  font-family:var(--font-tech);font-size:9px;letter-spacing:.2em;text-transform:uppercase;
  white-space:nowrap;
}
.bl-t-up{color:rgba(143,214,165,.8)}
.bl-t-down{color:rgba(212,101,124,.8)}
.bl-t-neutre{color:rgba(200,190,230,.42)}

/* --- les trois lignes secondaires --- */
.bl-mineurs{
  display:flex;flex-direction:column;
  border-top:1px solid rgba(230,200,119,.2);border-bottom:1px solid rgba(230,200,119,.2);
}
.bl-mineur{
  display:flex;align-items:center;gap:13px;
  padding:clamp(6px,1.1vh,11px) 13px;
  border-top:1px solid rgba(140,128,220,.12);transition:background .2s;
}
.bl-mineur:first-child{border-top:0}
.bl-mineur:hover{background:rgba(140,128,220,.07)}
.bl-mineur-lab{
  flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  font-family:var(--font-body);font-size:clamp(15px,1.3vw,19px);color:rgba(232,226,248,.86);
}
.bl-mineur-bar{flex:none;display:flex;gap:2px}
.bl-mineur-bar i{width:7px;height:4px;background:rgba(140,128,220,.16)}
.bl-mineur-bar i.on{background:var(--ton)}
.bl-mineur-v{flex:none;display:flex;align-items:center;justify-content:flex-end;gap:6px;min-width:56px}
.bl-mineur-v b{
  font-family:var(--font-title);font-weight:600;font-size:clamp(16px,1.4vw,20px);color:var(--gold-warm);
}
/* Le jeton de Gallion : un disque, comme dans le bandeau du haut. */
.bl-piece{
  position:relative;flex:none;width:17px;height:17px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:radial-gradient(circle at 34% 30%, #fff3c9 0%, #f0d78c 30%, #d3a63f 62%, #9c7223 100%);
  box-shadow:0 1px 4px rgba(0,0,0,.6), inset 0 -1px 3px rgba(120,84,16,.7),
    inset 0 1px 2px rgba(255,245,205,.75), 0 0 10px rgba(224,189,109,.3);
  font-family:var(--font-title);font-weight:700;font-size:9px;
  color:rgba(94,64,12,.85);text-shadow:0 1px 0 rgba(255,240,190,.6);
}
.bl-mineur .bl-tend{flex:none;min-width:46px;text-align:right}

/* --- ce que l’année laisse --- */
.bl-laisse{
  display:flex;flex-direction:column;gap:5px;padding:10px 16px;
  border-left:1px solid rgba(212,101,124,.5);background:rgba(212,101,124,.05);
}
.bl-laisse-lab{
  font-family:var(--font-tech);font-size:9px;letter-spacing:.28em;text-transform:uppercase;
  color:rgba(212,101,124,.85);margin-bottom:3px;
}
.bl-laisse-l{
  font-family:var(--font-body);font-size:clamp(15px,1.3vw,19px);line-height:1.4;
  color:rgba(240,224,228,.82);text-wrap:pretty;
}

/* --- ce que tu retiendras --- */
.bl-lab{flex:none;display:flex;align-items:center;gap:11px}
.bl-lab > span{
  font-family:var(--font-tech);font-size:9.5px;letter-spacing:.3em;text-transform:uppercase;
  color:rgba(230,200,119,.72);white-space:nowrap;
}
.bl-lab > i{flex:1;height:1px;background:linear-gradient(90deg, rgba(230,200,119,.25), rgba(230,200,119,0))}

.bl-timeline{
  position:relative;flex:none;
  margin-top:clamp(10px,1.7vh,16px);padding-left:26px;
  display:flex;flex-direction:column;gap:clamp(9px,1.7vh,17px);
}
.bl-fil{
  position:absolute;left:6px;top:8px;bottom:10px;width:1px;
  background:linear-gradient(180deg, rgba(230,200,119,.55), rgba(230,200,119,.06));
}
.bl-moment{position:relative;padding-left:2px;animation:rise .6s var(--ease-out) both}
.bl-moment:nth-child(2){animation-delay:.08s}
.bl-moment:nth-child(3){animation-delay:.16s}
.bl-moment:nth-child(4){animation-delay:.24s}
.bl-moment:nth-child(5){animation-delay:.32s}
/* La puce prend la couleur du poids : un deuil ne se signale pas comme un
   sort appris. C’est le seul endroit où le classement se voit. */
.bl-puce{
  position:absolute;left:-25px;top:6px;width:9px;height:9px;transform:rotate(45deg);
  background:rgba(10,8,30,.9);border:1px solid rgba(230,200,119,.9);
  box-shadow:0 0 12px -2px rgba(230,200,119,.9);
}
.bl-tiret{position:absolute;left:-15px;top:10px;width:11px;height:1px;background:rgba(230,200,119,.9);opacity:.5}
.bl-moment[data-poids="lourd"] .bl-puce{border-color:rgba(212,101,124,.95);box-shadow:0 0 12px -2px rgba(212,101,124,.95)}
.bl-moment[data-poids="lourd"] .bl-tiret{background:rgba(212,101,124,.95)}
.bl-moment[data-poids="simple"] .bl-puce{border-color:rgba(143,208,240,.9);box-shadow:0 0 12px -2px rgba(143,208,240,.9)}
.bl-moment[data-poids="simple"] .bl-tiret{background:rgba(143,208,240,.9)}
.bl-moment-tete{display:flex;align-items:baseline;gap:11px;flex-wrap:wrap}
.bl-quand{
  font-family:var(--font-tech);font-size:9px;letter-spacing:.24em;text-transform:uppercase;
  color:rgba(200,190,230,.45);white-space:nowrap;
}
.bl-moment-titre{
  font-family:var(--font-title);font-size:clamp(14px,1.25vw,19px);letter-spacing:.04em;
  color:var(--gold-warm);
}
.bl-moment-txt{
  margin:4px 0 0;
  font-family:var(--font-body);font-size:clamp(15px,1.3vw,19px);line-height:1.45;
  color:rgba(226,220,245,.78);text-wrap:pretty;
}

/* --- la porte de l’été --- */
.bl-suite{
  position:relative;overflow:hidden;flex:none;cursor:pointer;
  display:flex;align-items:center;justify-content:center;gap:16px;
  margin-top:clamp(12px,2.2vh,24px);
  padding:clamp(12px,2vh,20px) clamp(18px,2.6vw,38px);
  color:var(--or-encre);border:1px solid var(--gold-warm);background:var(--or-massif);
  box-shadow:0 26px 56px -26px rgba(230,200,119,.95);
  transition:transform .3s var(--ease-out), box-shadow .3s var(--ease-out);
}
.bl-suite:hover,.bl-suite:focus-visible{
  transform:translateY(-2px);box-shadow:0 32px 66px -24px rgba(230,200,119,1);outline:none;
}
.bl-suite > .eq{position:absolute;width:12px;height:12px;opacity:.45;pointer-events:none}
.bl-suite > .eq-tl{left:9px;top:9px;border-left:1px solid currentColor;border-top:1px solid currentColor}
.bl-suite > .eq-br{right:9px;bottom:9px;border-right:1px solid currentColor;border-bottom:1px solid currentColor}
.bl-suite > span{
  position:relative;
  font-family:var(--font-title);font-weight:600;font-size:clamp(12px,1.15vw,16px);
  letter-spacing:.3em;text-indent:.3em;text-transform:uppercase;
}
.bl-lueur{
  position:absolute;top:0;bottom:0;width:80px;pointer-events:none;
  background:linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,.4), rgba(255,255,255,0));
  animation:blLueur 5s ease-in-out infinite;
}
@keyframes blLueur{0%{transform:translateX(-140%)}100%{transform:translateX(360%)}}
.bl-apres{
  display:block;margin-top:8px;text-align:center;
  font-family:var(--font-body);font-size:clamp(14px,1.2vw,17px);font-style:italic;
  color:rgba(200,190,230,.45);text-wrap:pretty;
}

/* --- le bilan sur un écran court --- */
@media(max-height:900px){
  .bl-corps{padding-top:clamp(10px,1.6vh,20px);padding-bottom:clamp(10px,1.6vh,20px)}
  .bl-titre{font-size:clamp(22px,2.6vw,34px)}
  .bl-prose{font-size:clamp(15px,1.2vw,18px);margin-top:clamp(8px,1.3vh,13px)}
  .bl-grille{margin-top:clamp(9px,1.5vh,16px)}
  .bl-pilier{padding:clamp(9px,1.4vh,14px) 10px}
  .bl-moment-txt{font-size:clamp(14px,1.2vw,17px)}
  .bl-timeline{gap:clamp(7px,1.3vh,13px)}
  .bl-suite{margin-top:clamp(9px,1.6vh,18px);padding:clamp(10px,1.6vh,15px) clamp(16px,2.2vw,30px)}
}
@media(max-height:780px){
  .bl-crest{width:clamp(44px,5vw,60px);height:clamp(44px,5vw,60px)}
  .bl-prose{display:none}
  .bl-laisse{padding:8px 13px}
  .bl-moment-txt{font-size:15px;line-height:1.38}
}
@media(max-width:900px){
  .bl-tete{flex-wrap:wrap;gap:14px}
  .bl-filet{display:none}
  .bl-piliers{grid-template-columns:1fr}
}

/* ============================================================================
   43. L’ÉPILOGUE : LE DOSSIER CLOS
   ----------------------------------------------------------------------------
   Ce n’est pas une carte de fin de partie, c’est une chemise que le Ministère
   referme : un en-tête administratif, un nom qui occupe la moitié de la page,
   et un cachet de note à droite.

   Tout ce qui suit se lit d’une traite, sans un seul volet à déplier : le
   bilan en six axes crantés, le mot du Choixpeau et son curseur d’alignement,
   la vie en chiffres, les faits d’armes datés, les sept années ligne à ligne,
   le duel d’une vie contre le rival, la dernière page du journal, et ce qui
   reste après toi.

   Trois images clés, et pas une de plus : le ciel qui scintille derrière, le
   cachet de la note qui tombe en place, les crans qui se remplissent de la
   gauche vers la droite. Le reste monte simplement, section après section.
   ============================================================================ */
#screen-epilogue{
  position:relative;overflow-y:auto;
  background:radial-gradient(120% 80% at 50% -10%, #17133e 0%, #0a0827 45%, #05041a 100%);
}

/* --- le ciel : deux calques fixes qui ne prennent jamais le clic --- */
.dos-ciel,.dos-trame{position:fixed;inset:0;pointer-events:none;z-index:0}
.dos-ciel{
  opacity:.75;animation:dosCiel 7s ease-in-out infinite;
  background-image:
    radial-gradient(1.4px 1.4px at 12% 18%, rgba(255,255,255,.9), transparent),
    radial-gradient(1px 1px at 27% 62%, rgba(200,220,255,.7), transparent),
    radial-gradient(1.6px 1.6px at 44% 12%, rgba(255,255,255,.75), transparent),
    radial-gradient(1px 1px at 63% 34%, rgba(230,240,255,.6), transparent),
    radial-gradient(1.3px 1.3px at 78% 8%, rgba(255,255,255,.85), transparent),
    radial-gradient(1px 1px at 88% 48%, rgba(210,225,255,.6), transparent),
    radial-gradient(1.5px 1.5px at 8% 78%, rgba(255,255,255,.7), transparent),
    radial-gradient(1px 1px at 36% 88%, rgba(220,230,255,.55), transparent),
    radial-gradient(1.2px 1.2px at 57% 72%, rgba(255,255,255,.7), transparent),
    radial-gradient(1px 1px at 71% 92%, rgba(210,225,255,.5), transparent),
    radial-gradient(1.4px 1.4px at 93% 76%, rgba(255,255,255,.65), transparent),
    radial-gradient(1px 1px at 19% 40%, rgba(230,240,255,.5), transparent);
}
@keyframes dosCiel{0%,100%{opacity:.25}50%{opacity:.8}}
.dos-trame{
  opacity:.4;
  background-image:
    repeating-linear-gradient(0deg, rgba(255,255,255,.018) 0 1px, transparent 1px 3px),
    repeating-linear-gradient(90deg, rgba(255,255,255,.014) 0 1px, transparent 1px 4px);
}

.dos{
  position:relative;z-index:1;width:100%;max-width:1220px;margin:0 auto;
  padding:clamp(20px,3vw,42px) clamp(18px,3vw,44px) clamp(46px,6vh,84px);
  font-family:var(--font-body);color:#e8e3f5;
}

/* --- l’en-tête administratif --- */
.dos-entete{
  display:flex;align-items:center;gap:16px;
  padding-bottom:14px;border-bottom:1px solid rgba(230,200,119,.2);
}
.dos-marque{flex:none;width:26px;height:26px;object-fit:contain;opacity:.85}
.dos-service{
  flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  font-family:var(--font-tech);font-size:10px;letter-spacing:.34em;text-transform:uppercase;
  color:rgba(230,200,119,.72);
}
.dos-cloture{
  flex:none;font-family:var(--font-tech);font-size:10px;letter-spacing:.28em;
  text-transform:uppercase;color:rgba(200,190,230,.42);
}

/* --- le nom, et le cachet de la note --- */
.dos-tete{
  margin-top:clamp(26px,4vh,46px);display:grid;align-items:center;
  grid-template-columns:repeat(auto-fit, minmax(min(100%,300px),1fr));gap:clamp(24px,3vw,52px);
  animation:rise .8s var(--ease-out) both;
}
.dos-identite{min-width:0}
.dos-promo{display:flex;align-items:center;gap:12px}
.dos-promo span{
  font-family:var(--font-tech);font-size:10px;letter-spacing:.32em;text-transform:uppercase;
  color:rgba(200,190,230,.62);
}
.dos-crest{flex:none;width:26px;height:26px;display:block}
.dos-crest img,.dos-crest .blason{width:100%;height:100%;object-fit:contain}
.dos-nom{
  margin:clamp(14px,2vh,20px) 0 0;
  font-family:var(--font-title);font-weight:600;
  font-size:clamp(38px,4.6vw,68px);line-height:1;letter-spacing:.01em;
  color:var(--gold-pale);text-wrap:balance;
  text-shadow:0 1px 0 rgba(0,0,0,.6), 0 0 60px rgba(230,200,119,.18);
}
.dos-etat{
  margin-top:clamp(10px,1.6vh,16px);
  display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;
}
.dos-age{
  font-family:var(--font-title);font-size:clamp(16px,1.5vw,20px);letter-spacing:.06em;
  text-transform:uppercase;color:rgba(240,228,192,.82);
}
/* Le filet et le métier ne se séparent jamais : un titre de poste un peu
   long passait à la ligne en laissant le trait pendre au bout du vide. */
.dos-metier{display:flex;align-items:baseline;gap:14px;min-width:0}
.dos-filet{flex:none;width:34px;height:1px;background:rgba(230,200,119,.35)}
.dos-poste{min-width:0;font-size:clamp(19px,1.8vw,23px);font-style:italic;color:rgba(200,190,235,.72)}
.dos-filiation{
  margin:clamp(9px,1.4vh,14px) 0 0;max-width:56ch;
  font-size:18px;font-style:italic;line-height:1.45;color:rgba(200,190,230,.52);
}

.dos-cachet-hote{min-width:0;display:flex;justify-content:flex-end}
.dos-cachet{
  position:relative;display:flex;align-items:stretch;gap:clamp(16px,2vw,26px);
  padding:clamp(16px,2.4vh,24px) clamp(20px,2.4vw,30px);
  border:1px solid rgba(230,200,119,.4);
  background:linear-gradient(150deg, rgba(23,19,62,.9), rgba(10,8,32,.86));
  animation:dosCachet 1s var(--ease-out) .15s both;
}
@keyframes dosCachet{
  from{opacity:0;transform:scale(.9) rotate(-3deg)}
  to{opacity:1;transform:none}
}
.dos-cachet > i{position:absolute;inset:4px;pointer-events:none;border:1px solid rgba(230,200,119,.14)}
.dos-note{
  position:relative;flex:none;display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding-right:clamp(16px,2vw,26px);border-right:1px solid rgba(230,200,119,.24);
}
.dos-note b{
  font-family:var(--font-title);font-weight:600;font-size:clamp(50px,5.6vw,76px);line-height:.86;
  color:var(--gold-bright);animation:dosLueur 5s ease-in-out infinite;
}
@keyframes dosLueur{
  0%,100%{text-shadow:0 0 34px rgba(230,200,119,.4)}
  50%{text-shadow:0 0 62px rgba(230,200,119,.75)}
}
.dos-note i{
  margin-top:10px;font-style:normal;
  font-family:var(--font-tech);font-size:9px;letter-spacing:.32em;text-transform:uppercase;
  color:rgba(200,190,230,.5);
}
.dos-verdict{
  position:relative;min-width:0;max-width:34ch;
  display:flex;flex-direction:column;justify-content:center;
}
.dos-verdict b{font-family:var(--font-title);font-weight:400;font-size:clamp(20px,1.9vw,26px);color:var(--gold-pale)}
.dos-verdict p{
  margin:8px 0 0;font-size:19px;font-style:italic;line-height:1.45;
  color:rgba(200,190,230,.66);text-wrap:pretty;
}
.dos-verdict em{
  margin-top:9px;font-style:normal;
  font-family:var(--font-tech);font-size:9px;letter-spacing:.22em;text-transform:uppercase;
  color:rgba(230,200,119,.7);
}

/* --- le libellé de rubrique, et son filet --- */
.dos-lab{display:flex;align-items:center;gap:14px}
.dos-lab > span{
  white-space:nowrap;
  font-family:var(--font-tech);font-size:10px;letter-spacing:.34em;text-transform:uppercase;
  color:rgba(230,200,119,.75);
}
.dos-lab > i{flex:1;height:1px;background:rgba(230,200,119,.22)}
.dos-lab > b{
  flex:none;font-family:var(--font-tech);font-weight:400;font-size:10px;letter-spacing:.2em;
  color:rgba(200,190,230,.4);
}

/* Chaque rubrique monte à son tour, dans l’ordre où on la lit. Le
   raccourci `animation` remettrait le retard à zéro : on nomme donc
   chaque propriété, pour que la classe de rang garde la main. */
.dos-sec,.dos-duo{
  animation-name:rise;animation-duration:.8s;
  animation-timing-function:var(--ease-out);animation-fill-mode:both;
}
.dos-sec{margin-top:clamp(34px,5vh,58px)}
.dos-sec-1{animation-delay:.1s}
.dos-sec-2{animation-delay:.16s}
.dos-sec-3{animation-delay:.22s}
.dos-sec-4{animation-delay:.28s}
.dos-sec-5{animation-delay:.34s}
.dos-sec-6{animation-delay:.4s}

/* --- le bilan : six axes, quatorze crans chacun --- */
.dos-axes{
  margin-top:clamp(18px,2.6vh,26px);display:grid;
  grid-template-columns:repeat(auto-fit, minmax(min(100%,272px),1fr));
  gap:clamp(20px,2.4vw,40px) clamp(24px,3vw,52px);
}
.dos-axe{min-width:0}
.dos-axe-tete{display:flex;align-items:baseline;justify-content:space-between;gap:12px}
.dos-axe-nom{
  min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  font-family:var(--font-title);font-size:17px;letter-spacing:.04em;color:rgba(240,232,205,.9);
}
.dos-axe-val{flex:none;display:flex;align-items:baseline;gap:2px}
.dos-axe-val b{font-family:var(--font-title);font-weight:600;font-size:24px;color:var(--ton)}
.dos-axe-val u{
  text-decoration:none;
  font-family:var(--font-tech);font-size:11px;letter-spacing:.12em;color:rgba(200,190,230,.42);
}
.dos-crans{margin-top:9px;display:flex;gap:3px}
.dos-crans i{flex:1;height:6px;background:rgba(140,128,220,.14);transform-origin:50% 100%}
.dos-crans i.on{
  background:linear-gradient(180deg, rgba(190,178,240,.95), rgba(120,106,190,.9));
  animation:dosCran .45s var(--ease-out) both;animation-delay:calc(var(--i) * 36ms + .35s);
}
.dos-axe[data-haut] .dos-crans i.on{
  background:linear-gradient(180deg, #f7e6b4, #cfa64c);
  box-shadow:0 0 10px -2px rgba(230,200,119,.75);
}
@keyframes dosCran{from{opacity:0;transform:scaleY(.15)}to{opacity:1;transform:none}}
.dos-axe-d{margin-top:10px;font-size:17px;line-height:1.45;color:rgba(200,190,230,.56);text-wrap:pretty}

/* --- le mot du Choixpeau --- */
.dos-choixpeau{
  position:relative;padding:clamp(22px,3vh,34px) clamp(22px,3vw,40px);
  border:1px solid rgba(140,128,220,.24);
  background:linear-gradient(155deg, rgba(23,19,62,.72), rgba(9,7,30,.8));
}
.dos-choixpeau > .grain{
  position:absolute;inset:0;pointer-events:none;opacity:.5;
  background-image:repeating-linear-gradient(115deg, rgba(255,255,255,.02) 0 1px, transparent 1px 5px);
}
.dos-choixpeau .dos-lab{position:relative}
.dos-choixpeau .dos-lab > span{color:rgba(143,208,240,.8)}
.dos-choixpeau .dos-lab > i{background:rgba(143,208,240,.2)}
.dos-mot{
  position:relative;max-width:64ch;margin:clamp(14px,2.2vh,20px) 0 0;
  font-size:clamp(21px,2.1vw,26px);font-style:italic;line-height:1.5;
  color:rgba(240,236,252,.9);text-wrap:pretty;
}
.dos-align{position:relative;margin-top:clamp(20px,3vh,30px);max-width:760px}
.dos-align-piste{
  position:relative;display:block;height:7px;
  background:linear-gradient(90deg, #8c1f2c 0%, #4a2a58 42%, #2b3f74 64%, #2f79c7 100%);
}
.dos-align-piste b{
  position:absolute;top:-6px;width:3px;height:19px;margin-left:-1.5px;
  background:#f7e6b4;box-shadow:0 0 16px rgba(244,221,160,.9);
  animation:dosCurseur .9s var(--ease-out) .5s both;
}
@keyframes dosCurseur{from{opacity:0;transform:scaleY(0)}to{opacity:1;transform:none}}
.dos-align-bornes{
  display:flex;align-items:center;justify-content:space-between;margin-top:11px;
  font-family:var(--font-tech);font-size:9px;letter-spacing:.3em;text-transform:uppercase;
}
.dos-align-bornes span:first-child{color:rgba(220,140,150,.7)}
.dos-align-bornes b{font-weight:400;color:rgba(240,228,192,.8)}
.dos-align-bornes span:last-child{color:rgba(150,200,240,.75)}

/* --- deux colonnes : les chiffres, et les faits d’armes --- */
.dos-duo{
  margin-top:clamp(34px,5vh,58px);display:grid;align-items:start;
  grid-template-columns:repeat(auto-fit, minmax(min(100%,330px),1fr));
  gap:clamp(26px,3vw,54px);
}
.dos-col{min-width:0}
.dos-liste{margin-top:clamp(12px,2vh,18px)}
.dos-chiffre{
  display:flex;align-items:baseline;justify-content:space-between;gap:18px;
  padding:12px 0;border-bottom:1px solid rgba(140,128,220,.16);
}
.dos-chiffre > span{
  flex:none;font-family:var(--font-tech);font-size:10px;letter-spacing:.24em;text-transform:uppercase;
  color:rgba(200,190,230,.5);
}
.dos-chiffre > b{
  min-width:0;text-align:right;font-weight:400;
  font-family:var(--font-title);font-size:17px;letter-spacing:.02em;
  color:var(--ton);text-wrap:balance;
}
.dos-fait{
  display:flex;align-items:baseline;gap:14px;
  padding:12px 0;border-bottom:1px solid rgba(140,128,220,.16);
}
.dos-losange{
  flex:none;width:8px;height:8px;margin-top:6px;transform:rotate(45deg);
  background:linear-gradient(135deg, #f7e6b4, #cfa64c);
}
.dos-fait-txt{flex:1;min-width:0;font-size:19px;line-height:1.4;color:rgba(236,231,250,.86);text-wrap:pretty}
.dos-fait > i{
  flex:none;font-style:normal;
  font-family:var(--font-tech);font-size:9px;letter-spacing:.22em;color:rgba(200,190,230,.4);
}
/* Une vie très remplie allongerait la colonne bien au-delà de sa voisine.
   Elle se resserre plutôt que de perdre une ligne : aucun fait ne
   disparaît, ils se serrent, exactement comme la colonne personnage. */
.dos-liste[data-dense] .dos-fait{padding:8px 0}
.dos-liste[data-dense] .dos-fait-txt{font-size:17px;line-height:1.35}
.dos-liste[data-dense] .dos-losange{width:7px;height:7px;margin-top:5px}
.dos-vide{margin:clamp(12px,2vh,18px) 0 0;font-size:18px;font-style:italic;color:rgba(200,190,230,.45)}

/* --- le bulletin des sept années --- */
.dos-bulletin{margin-top:clamp(12px,2vh,18px)}
.dos-an,.dos-an-tete{
  display:grid;gap:clamp(10px,1.6vw,22px);
  grid-template-columns:clamp(58px,7vw,88px) clamp(64px,8vw,96px) minmax(0,1fr) clamp(88px,11vw,132px);
}
.dos-an-tete{
  padding-bottom:9px;border-bottom:1px solid rgba(230,200,119,.22);
  font-family:var(--font-tech);font-size:9px;letter-spacing:.26em;text-transform:uppercase;
  color:rgba(200,190,230,.45);
}
.dos-an-tete span:last-child{text-align:right}
.dos-an{align-items:baseline;padding:11px 0;border-bottom:1px solid rgba(140,128,220,.14)}
.dos-an-n{font-family:var(--font-title);font-size:15px;color:rgba(240,232,205,.8)}
.dos-an-m{font-family:var(--font-title);font-weight:600;font-size:17px;color:var(--ton)}
.dos-an-m.inconnu{
  font-family:var(--font-tech);font-weight:400;font-size:10px;letter-spacing:.16em;
  text-transform:uppercase;color:rgba(200,190,230,.35);
}
.dos-an-d{min-width:0;font-size:18px;line-height:1.4;color:rgba(214,208,238,.72);text-wrap:pretty}
.dos-an-r{
  text-align:right;font-family:var(--font-tech);font-size:10px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--ton);
}

/* --- le duel d’une vie --- */
.dos-rival{margin-top:clamp(12px,2vh,18px)}
.dos-rival-txt{margin:0;max-width:74ch;font-size:19px;line-height:1.5;color:rgba(226,220,245,.78);text-wrap:pretty}
.dos-rival-score{
  margin:clamp(12px,2vh,16px) 0 0;display:flex;align-items:center;gap:14px;flex-wrap:wrap;
  font-family:var(--font-tech);font-size:9px;letter-spacing:.24em;text-transform:uppercase;
  color:rgba(200,190,230,.45);
}
.dos-rival-score b{font-weight:400;color:rgba(240,228,192,.8)}
.dos-lice{margin-top:clamp(14px,2.2vh,20px);display:flex;flex-direction:column;gap:12px;max-width:860px}
.dos-lice-l{
  display:grid;align-items:center;gap:clamp(12px,2vw,22px);
  grid-template-columns:minmax(0,1fr) clamp(120px,26vw,320px) auto;
}
.dos-lice-nom{
  min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  font-size:19px;color:rgba(236,231,250,.86);
}
.dos-lice-nom i{font-style:italic;color:rgba(200,190,230,.5)}
.dos-lice-crans{display:flex;gap:3px}
.dos-lice-crans i{flex:1;height:6px;background:rgba(140,128,220,.14)}
.dos-lice-crans i.on{background:var(--ton);box-shadow:0 0 10px -3px var(--ton)}
.dos-lice-v{
  font-family:var(--font-title);font-weight:600;font-size:19px;color:var(--ton);
  min-width:3ch;text-align:right;
}
.dos-rival-verdict{
  margin:clamp(14px,2.2vh,20px) 0 0;max-width:74ch;
  font-size:19px;line-height:1.5;color:rgba(226,220,245,.8);text-wrap:pretty;
}
.dos-rival-verdict b{font-weight:600;color:var(--ton)}

/* --- la dernière page, et la génération suivante --- */
.dos-journal{
  position:relative;min-width:0;
  padding:clamp(20px,2.8vh,30px) clamp(20px,2.4vw,32px);
  border:1px solid rgba(230,200,119,.26);
  background:linear-gradient(150deg, rgba(26,21,58,.7), rgba(9,7,30,.82));
}
.dos-journal > .grain{
  position:absolute;inset:0;pointer-events:none;opacity:.45;
  background-image:repeating-linear-gradient(115deg, rgba(255,255,255,.02) 0 1px, transparent 1px 5px);
}
.dos-journal-lab{
  position:relative;display:block;
  font-family:var(--font-tech);font-size:10px;letter-spacing:.32em;text-transform:uppercase;
  color:rgba(230,200,119,.7);
}
.dos-journal p{
  position:relative;margin:clamp(14px,2vh,20px) 0 0;
  font-size:clamp(19px,1.9vw,23px);font-style:italic;line-height:1.55;
  color:rgba(240,236,252,.88);text-wrap:pretty;
}
.dos-signature{position:relative;margin-top:16px;display:flex;align-items:center;gap:12px}
.dos-signature i{display:block;width:26px;height:1px;background:rgba(230,200,119,.4)}
.dos-signature span{font-family:var(--font-title);font-size:14px;letter-spacing:.06em;color:rgba(240,228,192,.72)}

.dos-enfant{
  display:flex;align-items:center;gap:16px;width:100%;text-align:left;
  padding:13px 0;border:0;border-bottom:1px solid rgba(140,128,220,.16);
  background:none;color:inherit;font:inherit;
}
.dos-enfant-crest{flex:none;width:26px;height:26px;display:block;opacity:.9}
.dos-enfant-crest img,.dos-enfant-crest .blason{width:100%;height:100%;object-fit:contain}
.dos-enfant-txt{flex:1;min-width:0}
.dos-enfant-txt b{
  display:block;font-family:var(--font-title);font-weight:400;font-size:17px;
  color:rgba(244,236,214,.9);
}
.dos-enfant-txt i{display:block;margin-top:3px;font-size:17px;font-style:italic;color:rgba(200,190,230,.55)}
.dos-enfant-age{
  flex:none;white-space:nowrap;
  font-family:var(--font-tech);font-size:10px;letter-spacing:.2em;text-transform:uppercase;
  color:rgba(200,190,230,.42);
}
button.dos-enfant{cursor:pointer;transition:background .2s, padding-left .2s}
button.dos-enfant:hover{background:rgba(230,200,119,.07);padding-left:10px}
button.dos-enfant:hover .dos-enfant-age{color:var(--gold-warm)}
.dos-lignee{
  max-width:52ch;margin:clamp(14px,2vh,18px) 0 0;
  font-size:17px;font-style:italic;line-height:1.5;color:rgba(200,190,230,.5);text-wrap:pretty;
}

/* --- le pied : trois portes --- */
.dos-pied{
  margin-top:clamp(36px,5vh,64px);padding-top:clamp(20px,3vh,28px);
  border-top:1px solid rgba(230,200,119,.24);
  display:flex;align-items:center;gap:clamp(12px,1.6vw,20px);flex-wrap:wrap;
  animation:rise .8s var(--ease-out) .46s both;
}
.dos-porte{
  text-align:center;padding:16px 26px;border:0;cursor:pointer;
  font-family:var(--font-tech);font-size:11px;letter-spacing:.3em;text-transform:uppercase;
  transition:filter .2s, border-color .2s, color .2s;
}
.dos-porte-or{
  flex:1 1 260px;font-weight:500;
  background:linear-gradient(180deg, #f4dda0, #cfa64c);color:#2b1d05;
}
.dos-porte-or:hover{filter:brightness(1.12)}
.dos-porte-b{
  flex:0 1 240px;letter-spacing:.26em;background:none;
  border:1px solid rgba(230,200,119,.34);color:rgba(240,228,192,.82);
}
.dos-porte-b:hover{border-color:rgba(230,200,119,.7);color:var(--gold-pale)}
.dos-porte-c{
  flex:0 1 200px;letter-spacing:.26em;background:none;
  border:1px solid rgba(140,128,220,.3);color:rgba(200,190,230,.7);
}
.dos-porte-c:hover{border-color:rgba(140,128,220,.6);color:#e8e3f5}

@media(max-width:900px){
  .dos-cachet-hote{justify-content:flex-start}
  .dos-an,.dos-an-tete{grid-template-columns:52px 58px minmax(0,1fr)}
  .dos-an-tete span:last-child,.dos-an-r{display:none}
  .dos-lice-l{grid-template-columns:minmax(0,1fr) auto}
  .dos-lice-crans{display:none}
}
@media(prefers-reduced-motion:reduce){
  .dos-ciel,.dos-note b,.dos-crans i.on,.dos-align-piste b{animation:none}
}


/* ============================================================================
   44. LES NOCES : une soirée sous la tente, et un seul choix
   ----------------------------------------------------------------------------
   Un mariage ne se dessine pas comme une salle de classe, et pas non plus
   comme une cellule. Le panneau garde le violet de nuit, mais une voûte
   de lumière chaude s’ouvre au-dessus du chapiteau et respire, quatorze
   lanternes dérivent dans le cadre, treize pétales tombent en tournant,
   et le sol renvoie la lueur des guirlandes.

   Tout ce décor se pose une fois. Du choix au résultat, seul `data-phase`
   change sur la carte : les lanternes ne se rallument pas au milieu d’une
   décision, et les pétales ne remontent pas en haut du cadre.

   La grille du bas tient en trois colonnes qui se ramènent d’elles-mêmes :
   ce que ce jour a laissé, fermée tant qu’on n’a pas choisi, la journée,
   et qui est là.
   ============================================================================ */

/* Le fond de l’écran : l’année en chiffre fantôme, et la vignette se
   resserre pour que la tente sorte du noir. */
#main-panel[data-scene="noces"]::before{
  font-size:min(40vh,340px);color:rgba(240,215,140,.04);
}
#main-panel[data-scene="noces"]::after{
  background:radial-gradient(70% 58% at 50% 38%, rgba(0,0,0,0) 32%, rgba(0,0,0,.66) 100%);
}

/* Toute la respiration de l’écran tient dans une seule mesure. Les blocs
   s’en écartent d’un cran entier, les lignes d’une fraction. Serrer la
   tente sur un écran court, c’est changer cette mesure et rien d’autre :
   plus jamais quinze réglages qui finissent par se marcher dessus. */
.nc{
  --nc-air:clamp(15px,2.5vh,32px);
  position:relative;width:100%;max-width:1240px;margin:0 auto;overflow:hidden;
  display:flex;flex-direction:column;
  border:1px solid rgba(230,200,119,.26);
  background:linear-gradient(180deg, rgba(32,25,58,.8) 0%, rgba(8,7,24,.95) 100%);
  box-shadow:0 50px 110px -60px rgba(0,0,0,1), inset 0 1px 0 rgba(255,255,255,.05);
  animation:rise .7s var(--ease-out) both;
}
/* Le grain de la toile de tente : deux trames croisées. */
.nc > .grain{
  background-image:
    repeating-linear-gradient(51deg, rgba(255,255,255,.02) 0 1px, transparent 1px 3px),
    repeating-linear-gradient(-38deg, rgba(0,0,0,.06) 0 1px, transparent 1px 4px);
  opacity:.6;
}

/* --- la voûte : la lumière du chapiteau, qui respire lentement --- */
.nc-voute,.nc-lanternes,.nc-petales,.nc-sol{position:absolute;pointer-events:none;z-index:0}
.nc-voute{
  left:0;right:0;top:0;height:62%;
  background:radial-gradient(78% 100% at 50% 0%,
    rgba(240,215,140,.16) 0%, rgba(240,215,140,.05) 44%, rgba(0,0,0,0) 78%);
  animation:ncVoute 9s ease-in-out infinite;
}
@keyframes ncVoute{0%,100%{opacity:.42}50%{opacity:.66}}

/* --- quatorze lanternes : elles dérivent, et elles battent --- */
.nc-lanternes,.nc-petales{inset:0;overflow:hidden}
.nc-lanternes i{
  position:absolute;width:5px;height:7px;border-radius:46%;
  background:radial-gradient(circle at 40% 30%, #fff4cd, #e6c877 58%, rgba(200,150,50,.5));
  animation-name:ncDerive,ncLueur;
  animation-timing-function:ease-in-out;animation-iteration-count:infinite;
}
@keyframes ncDerive{
  0%{transform:translate(0,0)}
  33%{transform:translate(9px,-14px)}
  66%{transform:translate(-7px,-6px)}
  100%{transform:translate(0,0)}
}
@keyframes ncLueur{
  0%,100%{opacity:.5;box-shadow:0 0 14px rgba(240,215,140,.4)}
  50%{opacity:.95;box-shadow:0 0 26px rgba(240,215,140,.75)}
}

/* --- treize pétales : ils tombent en tournant, et jamais en cadence --- */
.nc-petales i{
  position:absolute;top:-10px;width:6px;height:4px;
  border-radius:60% 40% 55% 45%;
  background:rgba(226,210,240,.55);
  animation-name:ncPetale;animation-timing-function:linear;animation-iteration-count:infinite;
}
.nc-petales i.pale{background:rgba(240,224,236,.75)}
@keyframes ncPetale{
  0%{transform:translateY(-10px) rotate(0deg);opacity:0}
  12%{opacity:.75}
  88%{opacity:.5}
  100%{transform:translateY(52vh) rotate(280deg);opacity:0}
}

/* --- le sol : la lueur des guirlandes, renvoyée par l’herbe --- */
.nc-sol{
  left:0;right:0;bottom:0;height:26%;
  background:linear-gradient(0deg, rgba(240,215,140,.1), rgba(240,215,140,0) 82%);
}

/* --- le corps de la carte --- */
.nc-corps{
  position:relative;z-index:2;display:flex;flex-direction:column;
  padding:clamp(9px,2.2vh,32px) clamp(22px,4vw,64px) clamp(10px,2.2vh,30px);
}
.nc-filet{flex:1;height:1px;background:linear-gradient(90deg, rgba(230,200,119,.3), rgba(230,200,119,0))}
.nc-note{
  flex:none;font-family:var(--font-tech);font-size:9px;letter-spacing:.26em;text-transform:uppercase;
  color:rgba(200,190,230,.45);white-space:nowrap;
}
.nc-lab{
  font-family:var(--font-tech);font-size:9px;letter-spacing:.26em;text-transform:uppercase;
  color:rgba(198,186,236,.7);white-space:nowrap;
}

.nc-kicker{
  flex:none;display:flex;align-items:center;gap:13px;
  font-family:var(--font-tech);font-size:10px;letter-spacing:.34em;text-transform:uppercase;
  color:rgba(240,215,140,.85);
  animation:rise .8s var(--ease-out) both;
}
.nc-kicker > i{display:block;flex:none;width:26px;height:1px;background:rgba(240,215,140,.75)}
.nc-kicker > span:first-of-type{white-space:nowrap}

.nc-tete{
  flex:none;display:flex;align-items:flex-end;justify-content:space-between;
  gap:clamp(18px,2.6vw,40px);flex-wrap:wrap;margin-top:calc(var(--nc-air)*.55);
}
.nc-titre{
  margin:0;font-family:var(--font-title);font-weight:600;
  font-size:clamp(22px,3vw,42px);line-height:1;color:#f7ecca;
  text-shadow:0 0 60px rgba(230,200,119,.45);
  animation:rise .9s var(--ease-out) .1s both;
}
.nc-faits{
  display:flex;align-items:center;gap:clamp(11px,1.4vw,18px);cursor:default;
  animation:rise 1s var(--ease-out) .2s both;
}
.nc-fait{display:flex;flex-direction:column;gap:3px}
.nc-fait b{
  font-family:var(--font-title);font-weight:600;font-size:clamp(15px,1.5vw,21px);
  line-height:1;white-space:nowrap;
}
.nc-fait span{
  font-family:var(--font-tech);font-size:8.5px;letter-spacing:.22em;text-transform:uppercase;
  color:rgba(200,190,230,.45);white-space:nowrap;
}

.nc-texte{
  flex:none;max-width:76ch;margin:var(--nc-air) 0 0;
  font-size:clamp(15px,1.35vw,20px);line-height:1.65;color:rgba(224,220,244,.82);
  text-wrap:pretty;animation:rise 1.1s var(--ease-out) .25s both;
}

/* --- les trois colonnes : elles se ramènent seules quand ça serre.
       L’écart entre colonnes est franc : trois listes de chiffres à
       trente pixels l’une de l’autre se lisent comme une seule. --- */
.nc-grille{
  flex:none;display:grid;align-items:start;
  grid-template-columns:repeat(auto-fit, minmax(min(100%,270px),1fr));
  column-gap:clamp(24px,3.4vw,58px);row-gap:calc(var(--nc-air)*1.2);
  margin-top:calc(var(--nc-air)*1.15);
}
.nc-bloc,.nc-res{min-width:0;display:flex;flex-direction:column}
.nc-res{display:none}
.nc[data-phase="resultat"] .nc-res{display:flex}
.nc[data-phase="resultat"] .nc-jeu{display:none}

/* Le titre de colonne porte parfois une mention à droite, « trente-et-un
   debout ». Les deux sont en capitales interlettrées et ne se coupent
   pas : quand la colonne se resserre, la mention passe à la ligne plutôt
   que de déborder sur la colonne voisine. Elle ne disparaît jamais, elle
   descend d’un cran. */
.nc-col-titre{
  display:flex;align-items:center;flex-wrap:wrap;gap:5px 11px;min-width:0;
  font-family:var(--font-tech);font-size:9.5px;letter-spacing:.3em;text-transform:uppercase;
  color:rgba(198,186,236,.8);
}
.nc-col-titre > span:first-child{white-space:nowrap}
.nc-col-titre .nc-note{max-width:100%;white-space:normal}
.nc-res .nc-col-titre,.nc-jeu .nc-col-titre{color:rgba(230,200,119,.8)}
.nc-vote{color:rgba(230,200,119,.7)}

/* --- la journée : cinq lignes, quatre crans, et un filet vertical pour
       ce qui restera dans l’épilogue --- */
.nc-liste{
  display:flex;flex-direction:column;
  margin-top:calc(var(--nc-air)*.55);border-top:1px solid rgba(140,128,220,.14);
}
.nc-ligne{
  display:flex;align-items:center;gap:14px;cursor:default;
  padding:clamp(6px,1.05vh,12px) 10px;
  border-bottom:1px solid rgba(140,128,220,.11);
  border-left:2px solid transparent;
  animation:rise .7s var(--ease-out) both;transition:background .2s;
}
.nc-ligne:hover{background:rgba(178,162,224,.07)}
.nc-ligne-forte{border-left-color:rgba(230,200,119,.6)}
.nc-ligne-nom{
  flex:1;min-width:0;font-size:clamp(14px,1.3vw,19px);color:rgba(232,228,248,.86);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.nc-ligne-forte .nc-ligne-nom{color:#f7ecca}
.nc-pips{flex:none;display:flex;align-items:center;gap:3px}
.nc-pips i{width:5px;height:12px;background:rgba(140,128,220,.16)}
/* La valeur de la ligne : en Cinzel, en capitales, jamais un pavé de
   couleur. Le cran, lui, est un rectangle plein : c’est le même ton,
   mais l’un le porte en fond et l’autre en encre. */
.nc-ligne b{
  flex:none;min-width:22px;text-align:right;
  font-family:var(--font-title);font-weight:600;font-size:15px;
  text-transform:uppercase;letter-spacing:.04em;background:none;
  transition:color .35s var(--ease-out);
}
.nc-pips i.nc-sev4{background:#f0d78c}
.nc-pips i.nc-sev3{background:rgba(230,200,119,.75)}
.nc-pips i.nc-sev2,.nc-pips i.nc-sev1{background:rgba(198,186,236,.8)}
.nc-ligne b.nc-sev4{color:#f0d78c}
.nc-ligne b.nc-sev3{color:rgba(230,200,119,.75)}
.nc-ligne b.nc-sev2,.nc-ligne b.nc-sev1{color:rgba(198,186,236,.8)}

/* --- la soirée : seize crans, jamais une barre lisse --- */
.nc-soiree{
  display:flex;flex-direction:column;gap:9px;cursor:default;
  margin-top:var(--nc-air);
}
.nc-soiree-tete{display:flex;align-items:baseline;justify-content:space-between;gap:12px}
.nc-soiree-tete b{
  font-family:var(--font-title);font-weight:600;font-size:15px;color:#9fb4c4;white-space:nowrap;
}
.nc-crans{display:flex;gap:3px}
.nc-crans i{flex:1;height:5px;background:rgba(140,128,220,.14);transition:background .45s var(--ease-out)}
.nc-crans i.on{background:#e0bd6d}
.nc-mot{
  margin:calc(var(--nc-air)*.6) 0 0;line-height:1.5;
  font-size:clamp(13px,1.2vw,17px);font-style:italic;
  color:rgba(200,190,230,.5);text-wrap:pretty;
}
.nc-soiree .nc-mot{margin-top:2px}

/* --- qui est là : un écu par visage, et les absents en gris --- */
.nc-gens{
  display:flex;flex-direction:column;
  margin-top:calc(var(--nc-air)*.55);border-top:1px solid rgba(140,128,220,.14);
}
.nc-gen{
  display:flex;align-items:center;gap:14px;cursor:default;
  padding:clamp(6px,1.05vh,12px) 10px;border-bottom:1px solid rgba(140,128,220,.11);
  animation:rise .7s var(--ease-out) both;transition:background .2s;
}
.nc-gen:hover{background:rgba(178,162,224,.07)}
.nc-badge{
  flex:none;width:24px;height:24px;display:flex;align-items:center;justify-content:center;
  color:var(--ton);border:1px solid rgba(230,200,119,.3);
  background:linear-gradient(180deg, rgba(90,80,140,.16), rgba(10,8,30,.85));
}
.nc-gen-nom{
  flex:1;min-width:0;font-size:clamp(14px,1.3vw,19px);color:rgba(238,234,252,.88);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.nc-gen-etat{
  flex:none;font-family:var(--font-tech);font-size:8.5px;letter-spacing:.2em;text-transform:uppercase;
  color:rgba(230,200,119,.7);white-space:nowrap;
}
.nc-gen-absent .nc-badge{border-color:rgba(140,128,220,.26)}
.nc-gen-absent .nc-gen-nom{color:rgba(198,186,236,.6)}
.nc-gen-absent .nc-gen-etat{color:rgba(200,190,230,.42)}

/* --- les choix --- */
.nc-jeu{flex:none;display:flex;flex-direction:column;margin-top:calc(var(--nc-air)*1.15)}
.nc-choix-liste{
  display:flex;flex-direction:column;gap:calc(var(--nc-air)*.5);
  margin-top:calc(var(--nc-air)*.7);
}
/* Un bouton n’hérite pas de la police de la page : sans cette ligne, les
   choix de la soirée sortiraient en sans-serif du système, et ce serait
   le seul endroit du jeu où le texte narratif ne serait pas en Cormorant. */
.nc-choix{
  font-family:var(--font-body);color:inherit;
  display:flex;align-items:center;gap:clamp(13px,1.6vw,20px);cursor:pointer;text-align:left;
  padding:clamp(11px,1.7vh,17px) clamp(15px,1.7vw,22px);border-radius:0;
  border:1px solid rgba(140,128,220,.26);
  background:linear-gradient(165deg, rgba(30,24,60,.62), rgba(9,8,26,.78));
  animation:rise .8s var(--ease-out) both;
  transition:background .2s, border-color .2s, transform .2s;
}
.nc-choix:hover{
  background:linear-gradient(165deg, rgba(48,38,92,.8), rgba(12,10,32,.88));
  border-color:rgba(230,200,119,.5);transform:translateX(5px);
}
.nc-choix-num{
  flex:none;width:28px;height:28px;display:flex;align-items:center;justify-content:center;
  border:1px solid rgba(230,200,119,.4);
  font-family:var(--font-tech);font-size:11px;color:var(--gold);
}
.nc-choix-corps{flex:1;min-width:0;display:flex;flex-direction:column;gap:5px}
.nc-choix-txt{
  font-family:var(--font-body);font-size:clamp(15px,1.4vw,20px);line-height:1.3;
  color:rgba(238,234,252,.92);text-wrap:pretty;
}
.nc-choix-hint{
  font-family:var(--font-tech);font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;
  color:rgba(200,190,230,.5);
}

/* --- le résultat : un titre, un cachet qui tombe, et la suite --- */
.nc-res-titre{
  margin-top:calc(var(--nc-air)*.65);
  font-family:var(--font-title);font-weight:600;font-size:clamp(18px,1.9vw,26px);
  line-height:1.24;color:#f7ecca;animation:rise .7s var(--ease-out) both;
}
.nc-res-titre::after{content:'';display:block;clear:both}
/* Le cachet ne se pose plus par-dessus le titre : il flotte à droite, et
   les lignes du titre le contournent. Posé en absolu, il tombait sur la
   première ligne dès que le titre en faisait deux, et mordait la mention
   de la rangée du dessus. Flottant, il ne peut plus rien recouvrir, et il
   ne coûte de la place que sur les lignes qu’il occupe vraiment. */
.nc-cachet{
  float:right;margin:1px -1px 5px 14px;padding:5px 11px;
  border:2px solid var(--ton,#e0bd6d);color:var(--ton,#e0bd6d);
  font-family:var(--font-tech);font-style:normal;font-size:10px;letter-spacing:.24em;
  text-transform:uppercase;opacity:.85;white-space:nowrap;
  animation:ncCachet .55s cubic-bezier(.2,1.5,.4,1) .35s both;
}
@keyframes ncCachet{
  0%{opacity:0;transform:scale(1.9) rotate(-13deg)}
  55%{opacity:1;transform:scale(.94) rotate(-7deg)}
  100%{opacity:.85;transform:scale(1) rotate(-7deg)}
}
.nc-res-txt{
  margin:calc(var(--nc-air)*.65) 0 0;max-width:58ch;
  font-size:clamp(15px,1.35vw,19px);line-height:1.65;color:rgba(224,220,244,.82);
  text-wrap:pretty;animation:rise .8s var(--ease-out) .1s both;
}
/* Une noce rend jusqu’à huit lignes : trois caractéristiques et un lien
   par ami présent. Plutôt que d’allonger la carte au delà de l’écran, la
   colonne défile toute seule et le dit par un dégradé au bord. Aucune
   ligne ne disparaît : elles sont toutes là, sous la molette. */
.nc-res-fx{
  margin-top:var(--nc-air);
  max-height:min(34vh,340px);overflow-y:auto;overscroll-behavior:contain;
}
.nc-res-fx.nc-deborde{
  -webkit-mask-image:linear-gradient(180deg,#000 calc(100% - 26px),transparent);
  mask-image:linear-gradient(180deg,#000 calc(100% - 26px),transparent);
}
.nc-res-fx .fx-bloc{margin-top:0}
/* Le bouton vit au bas de la colonne des visages, la plus courte des
   trois. Il ne paraît qu’au résultat, et il se colle au bas de la rangée :
   sans cela, il flotterait au milieu du vide qu’il est venu combler. Son
   logement porte l’écart et la poussée vers le bas, pas lui : une marge
   automatique sur le bouton tomberait à zéro quand la colonne est pleine,
   et le bouton viendrait coller la dernière phrase. */
.nc-suite-place{display:none}
.nc[data-phase="resultat"] .nc-grille{align-items:stretch}
.nc[data-phase="resultat"] .nc-suite-place{
  display:flex;flex-direction:column;justify-content:flex-end;
  margin-top:auto;padding-top:calc(var(--nc-air)*1.3);
}
.nc-suite{
  font-family:var(--font-title);
  position:relative;overflow:hidden;cursor:pointer;text-align:center;
  padding:clamp(11px,1.9vh,19px) clamp(18px,2.6vw,38px);border-radius:0;
  color:#241906;border:1px solid #f0d78c;
  background:linear-gradient(180deg,#f7e6b4 0%, #e0bd6d 52%, #c99f45 100%);
  box-shadow:0 26px 56px -26px rgba(230,200,119,.9);
  transition:transform .3s, box-shadow .3s;
}
.nc-suite:hover{transform:translateY(-2px);box-shadow:0 32px 66px -24px rgba(230,200,119,1)}
.nc-suite span{
  position:relative;font-family:var(--font-title);font-weight:600;
  font-size:clamp(12px,1.15vw,16px);letter-spacing:.3em;text-indent:.3em;text-transform:uppercase;
}
.nc-lueur{
  position:absolute;top:0;bottom:0;width:80px;pointer-events:none;
  background:linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,.4), rgba(255,255,255,0));
  animation:ncFile 5s ease-in-out infinite;
}
@keyframes ncFile{0%{transform:translateX(-140%)}100%{transform:translateX(360%)}}

/* --- adaptatif : la tente rétrécit avant que le défilement n’arrive --- */
@media(max-width:1180px){
  .nc-faits{gap:11px}
  .nc-fait span{font-size:8px;letter-spacing:.16em}
}
@media(max-width:900px){
  .nc-tete{align-items:flex-start;flex-direction:column;gap:9px}
  .nc-gen-etat{display:none}
}
/* Sur un écran court, la tente se resserre d’un cran, sans jamais aller
   jusqu’au tassement : c’est une soirée, pas un tableau d’affichage. Si
   après ça elle dépasse encore, elle défile, et elle le dit par son
   dégradé au bord. La page, elle, ne bouge pas.

   On ne touche qu’à la mesure de respiration et à deux ou trois corps de
   texte. Quinze réglages séparés, c’est exactement comme ça que le titre
   avait fini par toucher la ligne du dessus. */
@media(max-height:940px){
  .nc{--nc-air:clamp(12px,1.9vh,22px)}
  .nc-corps{padding:clamp(10px,1.7vh,22px) clamp(20px,3.4vw,52px) clamp(11px,1.7vh,22px)}
  .nc-titre{font-size:clamp(20px,2.3vw,32px)}
  .nc-texte{font-size:clamp(14px,1.2vw,18px)}
  .nc-ligne,.nc-gen{padding:clamp(5px,.85vh,9px) 10px}
  .nc-ligne-nom,.nc-gen-nom{font-size:clamp(14px,1.2vw,17px)}
  .nc-choix{padding:clamp(10px,1.5vh,15px) clamp(14px,1.6vw,20px)}
  .nc-choix-txt{font-size:clamp(14px,1.25vw,18px)}
  .nc-res-titre{font-size:clamp(17px,1.75vw,23px)}
  .nc-res-txt{font-size:clamp(14px,1.25vw,18px)}
  .nc-res-fx{max-height:min(28vh,250px)}
}
@media(max-height:780px){
  .nc{--nc-air:clamp(10px,1.6vh,17px)}
  .nc-corps{padding:clamp(9px,1.4vh,16px) clamp(18px,3vw,44px) clamp(10px,1.4vh,16px)}
  .nc-titre{font-size:clamp(19px,2.1vw,27px)}
  .nc-res-fx{max-height:min(25vh,200px)}
  .nc-lanternes i,.nc-petales i{opacity:.7}
}
@media(prefers-reduced-motion:reduce){
  .nc-lanternes i,.nc-petales i,.nc-voute,.nc-lueur,.nc-cachet{animation:none}
  .nc-cachet{opacity:.85;transform:rotate(-7deg)}
}


/* ============================================================================
   45. L’OUVERTURE D’UNE ANNÉE : le frontispice
   ----------------------------------------------------------------------------
   Ce n’était pas un écran, c’était une carte d’événement avec un bouton
   collé dessous : bord à bord, sans équerre, sans grain, et le rang de
   l’année écrit « 1ᵉ » au milieu de son propre titre.

   C’est une page de garde. Elle se lit d’un coup : le millésime entre
   deux filets, le rang en toutes lettres, le titre du livre en italique
   dessous, le paragraphe de l’année, et les trois choses qui changent
   d’une année sur l’autre. Un rai de lumière tombe de la voûte, neuf
   poussières y montent, et rien d’autre ne bouge.
   ============================================================================ */

#main-panel[data-scene="ouverture"]::before{
  font-size:min(52vh,460px);color:rgba(230,200,119,.035);
}
#main-panel[data-scene="ouverture"]::after{
  background:radial-gradient(64% 58% at 50% 42%, rgba(0,0,0,0) 30%, rgba(0,0,0,.6) 100%);
}

.ouv{
  position:relative;width:100%;max-width:920px;margin:0 auto;overflow:hidden;
  display:flex;flex-direction:column;
  border:1px solid rgba(230,200,119,.24);
  background:linear-gradient(180deg, rgba(30,24,58,.78) 0%, rgba(8,7,24,.94) 100%);
  box-shadow:0 50px 110px -60px rgba(0,0,0,1), inset 0 1px 0 rgba(255,255,255,.05);
  animation:rise .7s var(--ease-out) both;
}
.ouv > .grain{
  background-image:
    repeating-linear-gradient(74deg, rgba(255,255,255,.02) 0 1px, transparent 1px 4px),
    repeating-linear-gradient(-16deg, rgba(0,0,0,.05) 0 1px, transparent 1px 5px);
  opacity:.55;
}

/* --- le rai de la voûte, et la poussière qui y monte --- */
.ouv-rai,.ouv-poussiere{position:absolute;pointer-events:none;z-index:0}
.ouv-rai{
  left:50%;top:-12%;width:min(46%,380px);height:82%;transform:translateX(-50%);
  background:linear-gradient(180deg, rgba(240,215,140,.16), rgba(240,215,140,.04) 52%, rgba(0,0,0,0) 88%);
  filter:blur(14px);animation:ouvRai 11s ease-in-out infinite;
}
@keyframes ouvRai{0%,100%{opacity:.5}50%{opacity:.85}}
.ouv-poussiere{inset:0;overflow:hidden}
.ouv-poussiere i{
  position:absolute;width:2px;height:2px;border-radius:50%;
  background:rgba(244,221,160,.8);
  animation-name:ouvPoussiere;animation-timing-function:linear;animation-iteration-count:infinite;
}
@keyframes ouvPoussiere{
  0%{transform:translate(0,0);opacity:0}
  22%{opacity:.7}
  100%{transform:translate(18px,-52px);opacity:0}
}

/* --- le corps : tout centré, sauf le paragraphe, qui se lit --- */
.ouv-corps{
  position:relative;z-index:2;display:flex;flex-direction:column;align-items:center;
  padding:clamp(22px,4.2vh,52px) clamp(24px,4.4vw,66px) clamp(20px,3.6vh,44px);
  text-align:center;
}

.ouv-kicker{
  display:flex;align-items:center;gap:14px;align-self:stretch;
  font-family:var(--font-tech);font-size:10px;letter-spacing:.4em;text-transform:uppercase;
  color:rgba(230,200,119,.8);
  animation:rise .8s var(--ease-out) both;
}
.ouv-kicker i{flex:1;height:1px;background:linear-gradient(90deg, rgba(230,200,119,0), rgba(230,200,119,.45))}
.ouv-kicker i:last-child{background:linear-gradient(90deg, rgba(230,200,119,.45), rgba(230,200,119,0))}
.ouv-kicker span{flex:none;white-space:nowrap;text-indent:.4em}

.ouv-rang{
  margin:clamp(12px,2.2vh,26px) 0 0;
  font-family:var(--font-title);font-weight:600;
  font-size:clamp(28px,3.6vw,52px);line-height:1;letter-spacing:.02em;color:#f7ecca;
  text-shadow:0 0 70px rgba(230,200,119,.5);
  animation:rise .9s var(--ease-out) .1s both;
}
.ouv-livre{
  margin:clamp(7px,1.2vh,13px) 0 0;
  font-family:var(--font-body);font-style:italic;
  font-size:clamp(17px,1.7vw,25px);line-height:1.2;color:rgba(240,215,140,.78);
  animation:rise 1s var(--ease-out) .18s both;
}

.ouv-texte{
  max-width:64ch;margin:clamp(16px,2.8vh,34px) 0 0;text-align:left;
  font-size:clamp(15px,1.35vw,20px);line-height:1.7;color:rgba(224,220,244,.84);
  text-wrap:pretty;animation:rise 1.1s var(--ease-out) .26s both;
}

/* --- les trois choses qui changent d’une année sur l’autre --- */
.ouv-faits{
  display:flex;align-items:stretch;justify-content:center;flex-wrap:wrap;
  gap:clamp(10px,1.6vw,26px);align-self:stretch;
  margin-top:clamp(18px,3vh,36px);padding-top:clamp(15px,2.4vh,28px);
  border-top:1px solid rgba(230,200,119,.16);
  animation:rise 1.2s var(--ease-out) .34s both;
}
.ouv-fait{
  flex:1 1 150px;min-width:0;display:flex;flex-direction:column;align-items:center;gap:7px;
  padding:0 clamp(6px,1vw,14px);
}
.ouv-fait + .ouv-fait{border-left:1px solid rgba(140,128,220,.18)}
.ouv-fait-large{flex:1.6 1 210px}
.ouv-fait > b{
  font-family:var(--font-title);font-weight:600;font-size:clamp(15px,1.45vw,20px);
  line-height:1.2;color:#f0d78c;text-wrap:balance;
}
.ouv-fait > span{
  font-family:var(--font-tech);font-size:8.5px;letter-spacing:.24em;text-transform:uppercase;
  color:rgba(200,190,230,.45);line-height:1.4;text-wrap:balance;
}
/* Les sept années en crans, jamais en barre lisse : celles qui sont
   faites restent allumées, plus sourdes ; celle qu’on ouvre bat. */
.ouv-crans{display:flex;align-items:center;gap:4px}
.ouv-crans i{
  width:7px;height:14px;background:rgba(140,128,220,.18);
  animation:ouvCran .45s var(--ease-out) both;
}
.ouv-crans i.faite{background:rgba(230,200,119,.45)}
.ouv-crans i.on{
  background:#f0d78c;box-shadow:0 0 12px rgba(240,215,140,.6);
  animation:ouvCran .45s var(--ease-out) both, ouvCranBat 3.2s ease-in-out infinite;
}
@keyframes ouvCran{from{opacity:0;transform:scaleY(.2)}to{opacity:1;transform:scaleY(1)}}
@keyframes ouvCranBat{0%,100%{opacity:1}50%{opacity:.62}}

/* --- la porte : elle ne touche plus les bords de la carte --- */
.ouv-porte{
  position:relative;overflow:hidden;cursor:pointer;
  margin-top:clamp(18px,3vh,36px);
  padding:clamp(12px,2vh,19px) clamp(30px,4.4vw,66px);border-radius:0;
  color:#241906;border:1px solid #f0d78c;font-family:var(--font-title);
  background:linear-gradient(180deg,#f7e6b4 0%, #e0bd6d 52%, #c99f45 100%);
  box-shadow:0 26px 60px -28px rgba(230,200,119,.95);
  transition:transform .3s, box-shadow .3s;
  animation:rise 1.3s var(--ease-out) .42s both;
}
.ouv-porte:hover{transform:translateY(-2px);box-shadow:0 34px 70px -26px rgba(230,200,119,1)}
.ouv-porte > span{
  position:relative;font-family:var(--font-title);font-weight:600;
  font-size:clamp(12px,1.15vw,16px);letter-spacing:.3em;text-indent:.3em;text-transform:uppercase;
}
.ouv-lueur{
  position:absolute;top:0;bottom:0;width:80px;pointer-events:none;
  background:linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,.42), rgba(255,255,255,0));
  animation:ouvFile 5s ease-in-out infinite;
}
@keyframes ouvFile{0%{transform:translateX(-140%)}100%{transform:translateX(420%)}}

/* --- adaptatif --- */
@media(max-height:820px){
  .ouv-corps{padding:clamp(16px,2.8vh,32px) clamp(20px,3.6vw,48px) clamp(15px,2.4vh,30px)}
  .ouv-rang{font-size:clamp(25px,3vw,40px);margin-top:clamp(9px,1.6vh,18px)}
  .ouv-livre{font-size:clamp(16px,1.5vw,21px)}
  .ouv-texte{font-size:clamp(14px,1.2vw,18px);line-height:1.6;margin-top:clamp(12px,2vh,22px)}
  .ouv-faits{margin-top:clamp(13px,2.2vh,24px);padding-top:clamp(11px,1.8vh,20px)}
  .ouv-porte{margin-top:clamp(13px,2.2vh,24px);padding:clamp(10px,1.6vh,15px) clamp(26px,3.8vw,52px)}
}
@media(max-width:760px){
  .ouv-fait + .ouv-fait{border-left:0}
  .ouv-faits{gap:14px}
}
@media(prefers-reduced-motion:reduce){
  .ouv-rai,.ouv-poussiere i,.ouv-lueur,.ouv-crans i{animation:none}
}


/* ============================================================================
   46. L’ÉTÉ, LOIN DU CHÂTEAU
   ----------------------------------------------------------------------------
   Le seul écran de l’année qui ne se passe pas à Poudlard. C’était une
   carte d’événement générique avec des vignettes de hub collées dedans :
   trois emojis multicolores dans des carrés, sans équerre ni grain, et un
   bouton posé au milieu.

   C’est désormais un écran à part entière. La lumière change : la nuit
   indigo laisse passer un jour d’août, chaud, haut à droite, et la
   poussière y monte au lieu d’y tomber. Les quatre destinations sont des
   cartes cliquables à angles vifs, avec un glyphe tracé à la plume, et
   chacune dit ce qu’elle coûte : une course se refait, un été ne se
   refait pas.
   ============================================================================ */

/* L’écran d’été ne pose aucun chiffre au fond : la règle reste, sans
   contenu à afficher, et seule la vignette compte ici. */
#main-panel[data-scene="ete"]::before{
  font-size:min(34vh,300px);color:rgba(240,215,140,.045);
}
#main-panel[data-scene="ete"]::after{
  background:radial-gradient(76% 64% at 50% 44%, rgba(0,0,0,0) 36%, rgba(0,0,0,.55) 100%);
}

.ete{
  position:relative;width:100%;max-width:1080px;margin:0 auto;overflow:hidden;
  display:flex;flex-direction:column;
  border:1px solid rgba(230,200,119,.24);
  background:linear-gradient(180deg, rgba(36,29,60,.8) 0%, rgba(9,8,24,.94) 100%);
  box-shadow:0 50px 110px -60px rgba(0,0,0,1), inset 0 1px 0 rgba(255,255,255,.05);
  animation:rise .7s var(--ease-out) both;
}
.ete > .grain{
  background-image:
    repeating-linear-gradient(66deg, rgba(255,255,255,.02) 0 1px, transparent 1px 4px),
    repeating-linear-gradient(-24deg, rgba(0,0,0,.05) 0 1px, transparent 1px 5px);
  opacity:.55;
}

/* --- le jour d’août : chaud, haut à droite, et il respire lentement --- */
.ete-jour,.ete-poussiere{position:absolute;pointer-events:none;z-index:0}
.ete-jour{
  right:-8%;top:-22%;width:62%;height:82%;
  background:radial-gradient(58% 58% at 70% 24%,
    rgba(244,221,160,.2) 0%, rgba(230,200,119,.07) 46%, rgba(0,0,0,0) 76%);
  filter:blur(10px);animation:eteJour 12s ease-in-out infinite;
}
@keyframes eteJour{0%,100%{opacity:.55}50%{opacity:.92}}
.ete-poussiere{inset:0;overflow:hidden}
.ete-poussiere i{
  position:absolute;width:2px;height:2px;border-radius:50%;
  background:rgba(244,221,160,.75);
  animation-name:etePoussiere;animation-timing-function:linear;animation-iteration-count:infinite;
}
@keyframes etePoussiere{
  0%{transform:translate(0,0);opacity:0}
  20%{opacity:.7}
  100%{transform:translate(-22px,-46px);opacity:0}
}

/* --- le corps --- */
.ete-corps{
  position:relative;z-index:2;display:flex;flex-direction:column;
  padding:clamp(16px,3vh,38px) clamp(22px,4vw,60px) clamp(16px,2.8vh,34px);
}
.ete-filet{flex:1;height:1px;background:linear-gradient(90deg, rgba(230,200,119,.3), rgba(230,200,119,0))}
.ete-note{
  flex:none;font-family:var(--font-tech);font-size:9px;letter-spacing:.26em;text-transform:uppercase;
  color:rgba(200,190,230,.45);white-space:nowrap;
}

.ete-kicker{
  flex:none;display:flex;align-items:center;gap:13px;
  font-family:var(--font-tech);font-size:10px;letter-spacing:.34em;text-transform:uppercase;
  color:rgba(240,215,140,.85);
  animation:rise .8s var(--ease-out) both;
}
.ete-kicker > i{display:block;flex:none;width:26px;height:1px;background:rgba(240,215,140,.75)}
.ete-kicker > span:first-of-type{white-space:nowrap}

.ete-tete{
  flex:none;display:flex;align-items:flex-end;justify-content:space-between;
  gap:clamp(16px,2.4vw,34px);flex-wrap:wrap;margin-top:clamp(8px,1.6vh,16px);
}
.ete-titre{
  margin:0;font-family:var(--font-title);font-weight:600;
  font-size:clamp(24px,3vw,42px);line-height:1;color:#f7ecca;
  text-shadow:0 0 60px rgba(230,200,119,.45);
  animation:rise .9s var(--ease-out) .1s both;
}
/* La bourse : c’est elle qui décide de ce qu’on peut se payer à Londres,
   donc elle a droit à sa place, pas à une parenthèse dans le texte. */
.ete-bourse{
  display:flex;flex-direction:column;align-items:flex-end;gap:3px;
  animation:rise 1s var(--ease-out) .18s both;
}
.ete-bourse b{
  font-family:var(--font-title);font-weight:600;font-size:clamp(18px,1.8vw,26px);
  line-height:1;color:#f0d78c;
}
.ete-bourse span{
  font-family:var(--font-tech);font-size:8.5px;letter-spacing:.22em;text-transform:uppercase;
  color:rgba(200,190,230,.45);white-space:nowrap;
}

.ete-texte{
  flex:none;max-width:74ch;margin:clamp(10px,1.9vh,20px) 0 0;
  font-size:clamp(15px,1.35vw,20px);line-height:1.65;color:rgba(224,220,244,.82);
  text-wrap:pretty;animation:rise 1.1s var(--ease-out) .25s both;
}

.ete-col-titre{
  display:flex;align-items:center;flex-wrap:wrap;gap:5px 11px;min-width:0;
  margin-top:clamp(15px,2.6vh,30px);
  font-family:var(--font-tech);font-size:9.5px;letter-spacing:.3em;text-transform:uppercase;
  color:rgba(230,200,119,.8);
}
.ete-col-titre > span:first-child{white-space:nowrap}

/* --- les quatre destinations --- */
.ete-choix{
  display:grid;grid-template-columns:repeat(auto-fit, minmax(min(100%,220px),1fr));
  gap:clamp(10px,1.4vw,18px);margin-top:clamp(10px,1.8vh,18px);
}
.ete-carte{
  display:flex;flex-direction:column;gap:8px;cursor:pointer;text-align:left;
  padding:clamp(12px,1.8vh,18px) clamp(14px,1.5vw,20px);border-radius:0;
  border:1px solid rgba(140,128,220,.26);
  background:linear-gradient(165deg, rgba(32,26,62,.64), rgba(9,8,26,.8));
  font-family:var(--font-body);color:inherit;
  animation:rise .8s var(--ease-out) both;
  transition:background .2s, border-color .2s, transform .2s, box-shadow .2s;
}
.ete-carte:hover{
  background:linear-gradient(165deg, rgba(50,40,94,.82), rgba(12,10,32,.9));
  border-color:rgba(230,200,119,.5);transform:translateY(-3px);
  box-shadow:0 24px 44px -28px rgba(230,200,119,.7);
}
.ete-carte-tete{display:flex;align-items:center;gap:11px}
.ete-ico{
  flex:none;width:30px;height:30px;display:flex;align-items:center;justify-content:center;
  color:#e0bd6d;border:1px solid rgba(230,200,119,.3);
  background:linear-gradient(180deg, rgba(230,200,119,.14), rgba(10,8,30,.85));
  transition:color .2s, border-color .2s;
}
.ete-carte:hover .ete-ico{color:#f7ecca;border-color:rgba(230,200,119,.65)}
.ete-carte-nom{
  flex:1;min-width:0;font-family:var(--font-title);font-weight:600;
  font-size:clamp(15px,1.35vw,19px);line-height:1.2;color:#f4dda0;text-wrap:balance;
}
.ete-carte-sub{
  font-size:clamp(14px,1.25vw,18px);line-height:1.45;color:rgba(224,220,244,.78);text-wrap:pretty;
}
/* Le pied de carte : ce que ça coûte à gauche, l’avertissement à droite.
   Mis sur la ligne du titre, le badge « Illégal » poussait « L’allée des
   Embrumes » sur trois lignes pendant que les autres en tenaient une. */
.ete-carte-pied{
  display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;
  margin-top:auto;padding-top:6px;
}
.ete-carte-note{
  font-family:var(--font-tech);font-size:8.5px;letter-spacing:.22em;text-transform:uppercase;
  color:rgba(200,190,230,.42);
}
.ete-badge{
  flex:none;padding:3px 8px;border:1px solid rgba(212,101,124,.6);
  font-family:var(--font-tech);font-size:8.5px;letter-spacing:.22em;text-transform:uppercase;
  color:#e8929f;white-space:nowrap;
}
/* L’allée des Embrumes ne se présente pas comme une boutique : elle a sa
   propre bordure, et elle le dit avant qu’on clique. */
.ete-carte-noire{border-color:rgba(212,101,124,.3)}
.ete-carte-noire .ete-ico{color:#e8929f;border-color:rgba(212,101,124,.35);
  background:linear-gradient(180deg, rgba(212,101,124,.14), rgba(10,8,30,.85))}
.ete-carte-noire .ete-carte-nom{color:#f0c6cd}
.ete-carte-noire:hover{border-color:rgba(212,101,124,.62);
  box-shadow:0 24px 44px -28px rgba(212,101,124,.7)}
.ete-carte-noire:hover .ete-ico{color:#f4dde1;border-color:rgba(212,101,124,.7)}

/* --- la porte du train --- */
.ete-porte{
  position:relative;overflow:hidden;cursor:pointer;text-align:center;align-self:center;
  margin-top:clamp(14px,2.4vh,28px);
  padding:clamp(11px,1.9vh,18px) clamp(26px,3.8vw,56px);border-radius:0;
  color:#241906;border:1px solid #f0d78c;font-family:var(--font-title);
  background:linear-gradient(180deg,#f7e6b4 0%, #e0bd6d 52%, #c99f45 100%);
  box-shadow:0 26px 58px -28px rgba(230,200,119,.95);
  transition:transform .3s, box-shadow .3s;
}
.ete-porte:hover{transform:translateY(-2px);box-shadow:0 34px 68px -26px rgba(230,200,119,1)}
.ete-porte > span{
  position:relative;font-family:var(--font-title);font-weight:600;
  font-size:clamp(12px,1.15vw,16px);letter-spacing:.3em;text-indent:.3em;text-transform:uppercase;
}
.ete-lueur{
  position:absolute;top:0;bottom:0;width:80px;pointer-events:none;
  background:linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,.42), rgba(255,255,255,0));
  animation:eteFile 5s ease-in-out infinite;
}
@keyframes eteFile{0%{transform:translateX(-140%)}100%{transform:translateX(420%)}}

/* --- adaptatif --- */
@media(max-height:880px){
  .ete-corps{padding:clamp(12px,2vh,26px) clamp(20px,3.4vw,48px) clamp(12px,2vh,24px)}
  .ete-titre{font-size:clamp(22px,2.6vw,34px)}
  .ete-texte{font-size:clamp(14px,1.2vw,18px);line-height:1.55;margin-top:clamp(8px,1.4vh,15px)}
  .ete-col-titre{margin-top:clamp(11px,1.9vh,22px)}
  .ete-carte{padding:clamp(10px,1.4vh,14px) clamp(12px,1.4vw,17px);gap:6px}
  .ete-carte-sub{font-size:clamp(13px,1.15vw,16px)}
  .ete-porte{margin-top:clamp(11px,1.8vh,20px);padding:clamp(9px,1.5vh,14px) clamp(22px,3.2vw,44px)}
}
@media(prefers-reduced-motion:reduce){
  .ete-jour,.ete-poussiere i,.ete-lueur{animation:none}
}


/* ============================================================================
   47. LE PANNEAU D’AFFICHAGE : le choix d’un club
   ----------------------------------------------------------------------------
   C’étaient cinq boutons de choix pleine largeur, numérotés de 1 à 5,
   chacun portant un emoji et la même formule « S’inscrire au » répétée
   cinq fois. Ça faisait défiler l’écran, et on s’inscrivait sans savoir
   ce que le club allait travailler.

   Ce n’est pas un choix de scène, c’est un panneau d’affichage : une
   grille de vignettes à angles vifs, un tracé à la plume par club, et
   sous chaque affiche ce qu’elle entraîne. Le refus n’est plus une
   option numérotée mais une ligne discrète, pleine largeur, dessous.
   ============================================================================ */

.clb-titre{
  display:flex;align-items:center;flex-wrap:wrap;gap:5px 11px;min-width:0;
  margin-top:clamp(12px,2.2vh,24px);
  font-family:var(--font-tech);font-size:9.5px;letter-spacing:.3em;text-transform:uppercase;
  color:rgba(230,200,119,.8);
  animation:rise .7s var(--ease-out) both;
}
.clb-titre > span:first-child{white-space:nowrap}
.clb-filet{flex:1;height:1px;background:linear-gradient(90deg, rgba(230,200,119,.3), rgba(230,200,119,0))}
.clb-note{
  flex:none;font-family:var(--font-tech);font-size:9px;letter-spacing:.26em;
  color:rgba(200,190,230,.45);white-space:nowrap;
}

.clb-grille{
  display:grid;grid-template-columns:repeat(auto-fit, minmax(min(100%,250px),1fr));
  gap:clamp(9px,1.2vw,15px);margin-top:clamp(9px,1.6vh,16px);
}
.clb-carte{
  display:flex;flex-direction:column;gap:7px;cursor:pointer;text-align:left;
  padding:clamp(11px,1.6vh,16px) clamp(13px,1.4vw,18px);border-radius:0;
  border:1px solid rgba(140,128,220,.26);
  background:linear-gradient(165deg, rgba(32,26,62,.62), rgba(9,8,26,.8));
  font-family:var(--font-body);color:inherit;
  animation:rise .7s var(--ease-out) both;
  transition:background .2s, border-color .2s, transform .2s, box-shadow .2s;
}
.clb-carte:hover,.clb-carte:focus-visible{
  outline:none;
  background:linear-gradient(165deg, rgba(50,40,94,.82), rgba(12,10,32,.9));
  border-color:rgba(230,200,119,.5);transform:translateY(-3px);
  box-shadow:0 22px 42px -28px rgba(230,200,119,.7);
}
.clb-tete{display:flex;align-items:center;gap:11px}
.clb-ico{
  flex:none;width:30px;height:30px;display:flex;align-items:center;justify-content:center;
  color:#e0bd6d;border:1px solid rgba(230,200,119,.3);
  background:linear-gradient(180deg, rgba(230,200,119,.14), rgba(10,8,30,.85));
  transition:color .2s, border-color .2s;
}
.clb-carte:hover .clb-ico{color:#f7ecca;border-color:rgba(230,200,119,.65)}
.clb-nom{
  flex:1;min-width:0;font-family:var(--font-title);font-weight:600;
  font-size:clamp(14px,1.25vw,18px);line-height:1.2;color:#f4dda0;text-wrap:balance;
}
.clb-desc{
  font-size:clamp(13.5px,1.2vw,17px);line-height:1.45;
  color:rgba(224,220,244,.78);text-wrap:pretty;
}
.clb-pied{
  display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;
  margin-top:auto;padding-top:5px;
}
.clb-forme{
  font-family:var(--font-tech);font-size:8.5px;letter-spacing:.22em;text-transform:uppercase;
  color:rgba(230,200,119,.62);
}
.clb-badge{
  flex:none;padding:3px 8px;border:1px solid rgba(212,101,124,.6);
  font-family:var(--font-tech);font-size:8.5px;letter-spacing:.22em;text-transform:uppercase;
  color:#e8929f;white-space:nowrap;
}
/* Ce qui ouvre cette année se signale en or, pas en sang : c’est une
   nouveauté du panneau, pas une clandestinité. */
.clb-badge-neuf{border-color:rgba(230,200,119,.55);color:var(--gold-pale)}
/* Le Cercle ne s’affiche pas au même panneau que la chorale. */
.clb-carte-noire{border-color:rgba(212,101,124,.3)}
.clb-carte-noire .clb-ico{color:#e8929f;border-color:rgba(212,101,124,.35);
  background:linear-gradient(180deg, rgba(212,101,124,.14), rgba(10,8,30,.85))}
.clb-carte-noire .clb-nom{color:#f0c6cd}
.clb-carte-noire .clb-forme{color:rgba(232,146,159,.6)}
.clb-carte-noire:hover{border-color:rgba(212,101,124,.62);
  box-shadow:0 22px 42px -28px rgba(212,101,124,.7)}
.clb-carte-noire:hover .clb-ico{color:#f4dde1;border-color:rgba(212,101,124,.7)}

/* Refuser n’est pas une option parmi six : c’est une ligne, dessous. */
.clb-passer{
  display:block;width:100%;cursor:pointer;text-align:center;border-radius:0;
  margin-top:clamp(9px,1.5vh,15px);padding:clamp(9px,1.4vh,14px) 18px;
  border:1px solid rgba(140,128,220,.24);background:transparent;
  font-family:var(--font-body);font-size:clamp(14px,1.2vw,18px);
  color:rgba(200,190,230,.6);
  animation:rise .8s var(--ease-out) .5s both;
  transition:border-color .2s, color .2s, background .2s;
}
.clb-passer:hover{
  border-color:rgba(230,200,119,.45);color:rgba(240,228,192,.85);
  background:rgba(230,200,119,.05);
}

/* Le seuil est haut : la scène n’a pas la hauteur de la fenêtre, le
   bandeau et le socle lui prennent déjà cent trente pixels, et six
   affiches sur deux rangs se lisent mal quand il faut faire défiler. */
@media(max-height:1000px){
  .clb-titre{margin-top:clamp(9px,1.6vh,17px)}
  .clb-grille{gap:8px;margin-top:clamp(7px,1.2vh,12px)}
  .clb-carte{padding:clamp(8px,1.2vh,12px) clamp(10px,1.2vw,14px);gap:4px}
  .clb-nom{font-size:clamp(13.5px,1.15vw,16px)}
  .clb-desc{font-size:clamp(12.5px,1.05vw,15px);line-height:1.4}
  .clb-ico{width:25px;height:25px}
  .clb-pied{padding-top:3px}
  .clb-passer{margin-top:clamp(6px,1vh,10px);padding:clamp(6px,1vh,10px) 16px;font-size:clamp(13px,1.1vw,16px)}
}


/* ============================================================================
   48. LA NAISSANCE : une chambre trop chaude, et un nom à donner
   ----------------------------------------------------------------------------
   Une naissance ne se dessine ni comme une noce ni comme une salle
   d’examen. Le panneau quitte le violet chaud du chapiteau pour le bleu de
   quatre heures du matin : un halo de veilleuse qui respire au-dessus de la
   carte, quinze poussières qui montent dans la lampe, un berceau qui balance
   en haut à gauche, et un pouls qui bat en bas à droite.

   Tout ce décor se pose une fois. La carte traverse trois phases sans jamais
   se reconstruire : `nom`, puis `choix`, puis `resultat`. Le berceau ne se
   remet pas droit au milieu d’une décision, et le cœur ne repart pas de zéro
   parce qu’on a tapé un prénom.

   Le nom est le seul endroit du jeu où l’on nomme quelqu’un d’autre que soi.
   Il a donc son propre bloc, pleine largeur, avec son aperçu en Cinzel : ce
   qu’on est en train d’écrire se lit en grand avant d’être scellé.
   ============================================================================ */

/* Le fond de l’écran : l’année en chiffre fantôme, et la vignette se
   resserre pour que la chambre sorte du noir. */
#main-panel[data-scene="naissance"]::before{
  font-size:min(40vh,340px);color:rgba(190,214,244,.045);
}
#main-panel[data-scene="naissance"]::after{
  background:radial-gradient(70% 58% at 50% 38%, rgba(0,0,0,0) 32%, rgba(0,0,0,.66) 100%);
}

/* Une seule mesure de respiration, comme sous la tente : les blocs s’en
   écartent d’un cran entier, les lignes d’une fraction. Serrer la chambre
   sur un écran court, c’est changer cette mesure et rien d’autre. */
.na{
  --na-air:clamp(14px,2.3vh,30px);
  position:relative;width:100%;max-width:1240px;margin:0 auto;overflow:hidden;
  display:flex;flex-direction:column;
  border:1px solid rgba(178,200,236,.26);
  background:linear-gradient(180deg, rgba(24,26,58,.8) 0%, rgba(7,7,24,.95) 100%);
  box-shadow:0 50px 110px -60px rgba(0,0,0,1), inset 0 1px 0 rgba(255,255,255,.05);
  animation:rise .7s var(--ease-out) both;
}
/* Le grain du drap : deux trames croisées, comme sous la tente. */
.na > .grain{
  background-image:
    repeating-linear-gradient(51deg, rgba(255,255,255,.02) 0 1px, transparent 1px 3px),
    repeating-linear-gradient(-38deg, rgba(0,0,0,.06) 0 1px, transparent 1px 4px);
  opacity:.6;
}

/* --- le halo de la veilleuse : il respire, il ne clignote pas --- */
.na-halo,.na-motes,.na-berceau,.na-sol,.na-pouls{position:absolute;pointer-events:none;z-index:0}
.na-halo{
  left:50%;top:-6%;width:min(58%,660px);height:52%;transform:translateX(-50%);
  background:radial-gradient(60% 70% at 50% 0%,
    rgba(226,216,190,.2) 0%, rgba(198,206,240,.07) 46%, rgba(0,0,0,0) 80%);
  filter:blur(3px);animation:naHalo 7s ease-in-out infinite;
}
@keyframes naHalo{0%,100%{opacity:.42}50%{opacity:.66}}

/* --- quinze poussières : elles montent dans la lampe, jamais en cadence --- */
.na-motes{inset:0;overflow:hidden}
.na-motes i{
  position:absolute;width:2.5px;height:2.5px;border-radius:50%;
  background:rgba(206,222,246,.8);box-shadow:0 0 8px rgba(206,222,246,.6);
  animation-name:naMote;animation-timing-function:linear;animation-iteration-count:infinite;
}
.na-motes i.or{background:rgba(240,224,180,.85)}
@keyframes naMote{
  0%{transform:translateY(0) translateX(0);opacity:0}
  18%{opacity:.8}
  100%{transform:translateY(-46vh) translateX(18px);opacity:0}
}

/* --- le berceau : il balance, doucement, et il ne s’arrête pas ---
       Le seul arrondi de l’écran, et il est mérité : un berceau à angles
       vifs n’est plus un berceau, c’est une caisse. */
.na-berceau{
  left:clamp(20px,3vw,54px);top:clamp(16px,3vh,42px);
  display:flex;flex-direction:column;align-items:center;gap:3px;opacity:.3;
  transform-origin:50% 0;animation:naBerceau 9s ease-in-out infinite;
}
.na-berceau i{
  display:block;width:46px;height:24px;border-radius:0 0 46% 46%;
  border-bottom:1.5px solid rgba(206,222,246,.6);
  border-left:1.5px solid rgba(206,222,246,.6);
  border-right:1.5px solid rgba(206,222,246,.6);
}
.na-berceau b{display:block;width:30px;height:1.5px;background:rgba(206,222,246,.45)}
@keyframes naBerceau{0%,100%{transform:rotate(-1.4deg)}50%{transform:rotate(1.4deg)}}

/* --- le pouls : cent trente-huit, et il bat vraiment --- */
.na-pouls{
  right:clamp(20px,3vw,54px);bottom:clamp(20px,3.6vh,50px);
  display:flex;align-items:center;gap:8px;
}
.na-pouls i{
  display:block;width:9px;height:9px;border-radius:50%;
  background:radial-gradient(circle at 38% 32%, #ffd8e0, #d98fb8 62%, rgba(160,60,100,.5));
  animation:naPouls 1.9s ease-in-out infinite;
}
.na-pouls span{
  font-family:var(--font-tech);font-size:8.5px;letter-spacing:.24em;text-transform:uppercase;
  color:rgba(217,143,184,.6);
}
@keyframes naPouls{
  0%,100%{transform:scale(1);opacity:.5}
  14%{transform:scale(1.5);opacity:.95}
  28%{transform:scale(1.05);opacity:.6}
  42%{transform:scale(1.32);opacity:.85}
}

/* --- le sol : la lueur froide du couloir, renvoyée par le carrelage --- */
.na-sol{
  left:0;right:0;bottom:0;height:30%;
  background:linear-gradient(0deg, rgba(178,200,236,.11), rgba(178,200,236,0) 84%);
}

/* --- le corps de la carte --- */
.na-corps{
  position:relative;z-index:2;display:flex;flex-direction:column;
  padding:clamp(9px,2.2vh,32px) clamp(22px,4vw,64px) clamp(10px,2.2vh,30px);
}
.na-filet{flex:1;height:1px;background:linear-gradient(90deg, rgba(230,200,119,.3), rgba(230,200,119,0))}
.na-note{
  flex:none;font-family:var(--font-tech);font-size:9px;letter-spacing:.26em;text-transform:uppercase;
  color:rgba(200,190,230,.45);white-space:nowrap;
}
.na-lab{
  font-family:var(--font-tech);font-size:9px;letter-spacing:.26em;text-transform:uppercase;
  color:rgba(198,186,236,.7);white-space:nowrap;
}

.na-kicker{
  flex:none;display:flex;align-items:center;gap:13px;
  font-family:var(--font-tech);font-size:10px;letter-spacing:.34em;text-transform:uppercase;
  color:rgba(240,215,140,.85);
  animation:rise .8s var(--ease-out) both;
}
.na-kicker > i{display:block;flex:none;width:26px;height:1px;background:rgba(198,214,244,.8)}
.na-kicker > span:first-of-type{white-space:nowrap}

.na-tete{
  flex:none;display:flex;align-items:flex-end;justify-content:space-between;
  gap:clamp(14px,2.4vw,34px);flex-wrap:wrap;margin-top:calc(var(--na-air)*.5);
}
.na-titre{
  margin:0;font-family:var(--font-title);font-weight:600;
  font-size:clamp(22px,3vw,42px);line-height:1;color:#f7ecca;
  text-shadow:0 0 60px rgba(230,200,119,.45);
  animation:rise .9s var(--ease-out) .1s both;
  transition:color .5s var(--ease-out);
}
.na-faits{
  display:flex;align-items:center;gap:clamp(11px,1.4vw,18px);cursor:default;
  animation:rise 1s var(--ease-out) .2s both;
}
.na-fait{display:flex;flex-direction:column;gap:3px}
.na-fait b{
  font-family:var(--font-title);font-weight:600;font-size:clamp(15px,1.5vw,21px);
  line-height:1;white-space:nowrap;
}
.na-fait span{
  font-family:var(--font-tech);font-size:8.5px;letter-spacing:.22em;text-transform:uppercase;
  color:rgba(200,190,230,.45);white-space:nowrap;
}

.na-texte{
  flex:none;max-width:84ch;margin:calc(var(--na-air)*.65) 0 0;
  font-size:clamp(15px,1.35vw,20px);line-height:1.6;color:rgba(224,220,244,.82);
  text-wrap:pretty;animation:rise 1.1s var(--ease-out) .25s both;
}

/* --- les trois colonnes : elles se ramènent d’elles-mêmes --- */
.na-grille{
  flex:none;display:grid;align-items:start;
  grid-template-columns:repeat(auto-fit, minmax(min(100%,260px),1fr));
  column-gap:clamp(20px,3.2vw,52px);row-gap:calc(var(--na-air)*1.1);
  margin-top:calc(var(--na-air)*.75);
}
.na-bloc,.na-res{min-width:0;display:flex;flex-direction:column}
.na-res{display:none}
.na[data-phase="resultat"] .na-res{display:flex}
.na[data-phase="resultat"] .na-jeu,
.na[data-phase="resultat"] .na-nom{display:none}
.na[data-phase="nom"] .na-jeu{display:none}
.na[data-phase="choix"] .na-nom{display:none}

.na-col-titre{
  display:flex;align-items:center;flex-wrap:wrap;gap:5px 11px;min-width:0;
  font-family:var(--font-tech);font-size:9.5px;letter-spacing:.3em;text-transform:uppercase;
  color:rgba(198,186,236,.8);
}
.na-col-titre > span:first-child{white-space:nowrap}
.na-col-titre .na-note{max-width:100%;white-space:normal}
.na-res .na-col-titre,.na-jeu .na-col-titre,.na-nom .na-col-titre{color:rgba(230,200,119,.8)}
.na-vote{color:rgba(198,214,244,.7)}

/* --- la nuit : cinq lignes, quatre crans, et un filet bleu pour ce qui
       restera dans l’épilogue --- */
.na-liste{
  display:flex;flex-direction:column;
  margin-top:calc(var(--na-air)*.5);border-top:1px solid rgba(140,128,220,.14);
}
.na-ligne{
  display:flex;align-items:center;gap:11px;cursor:default;
  padding:clamp(4px,.85vh,9px) 9px;
  border-bottom:1px solid rgba(140,128,220,.11);
  border-left:2px solid transparent;
  animation:rise .7s var(--ease-out) both;transition:background .2s;
}
.na-ligne:hover{background:rgba(178,162,224,.07)}
.na-ligne-forte{border-left-color:rgba(198,214,244,.6)}
.na-ligne-nom{
  flex:1;min-width:0;font-size:clamp(14px,1.3vw,19px);color:rgba(232,228,248,.86);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.na-ligne-forte .na-ligne-nom{color:#f2f6fc}
.na-pips{flex:none;display:flex;align-items:center;gap:3px}
.na-pips i{width:5px;height:12px;background:rgba(140,128,220,.16)}
/* La valeur de la ligne : en Cinzel, en capitales, jamais un pavé de
   couleur. Un nom de famille peut être long : il se coupe plutôt que de
   pousser la colonne, et l’infobulle le porte en entier. */
.na-ligne b{
  flex:none;max-width:11ch;min-width:22px;text-align:right;
  font-family:var(--font-title);font-weight:600;font-size:15px;
  text-transform:uppercase;letter-spacing:.04em;background:none;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  transition:color .35s var(--ease-out);
}
.na-pips i.na-sev4{background:#cfe2f7}
.na-pips i.na-sev3{background:rgba(198,214,244,.75)}
.na-pips i.na-sev2,.na-pips i.na-sev1{background:rgba(198,186,236,.75)}
.na-ligne b.na-sev4{color:#cfe2f7}
.na-ligne b.na-sev3{color:rgba(198,214,244,.75)}
.na-ligne b.na-sev2,.na-ligne b.na-sev1{color:rgba(198,186,236,.75)}

/* Une valeur qui attend qu’on la remplisse le dit : elle respire en or et
   ne fait pas semblant d’être une donnée. */
.na-ligne b.na-attente{
  color:rgba(230,200,119,.6);text-transform:none;letter-spacing:.02em;
  animation:naAttente 2.6s ease-in-out infinite;
}
@keyframes naAttente{0%,100%{opacity:.55}50%{opacity:1}}
/* Deux classes jumelles : changer le texte ne relance rien, alterner
   la classe le fait. */
.na-dit-a,.na-dit-b{animation:naDit .7s var(--ease-out) both}
@keyframes naDit{
  0%{opacity:0;transform:translateY(-5px);color:#f7e6b4}
  60%{opacity:1;color:#f7e6b4}
  100%{opacity:1;transform:translateY(0)}
}

/* --- les vingt-quatre premières heures : seize crans --- */
.na-heures{
  display:flex;flex-direction:column;gap:7px;cursor:default;
  margin-top:calc(var(--na-air)*.7);
}
.na-heures-tete{display:flex;align-items:baseline;justify-content:space-between;gap:12px}
.na-heures-tete b{
  font-family:var(--font-title);font-weight:600;font-size:15px;color:#9fb4c4;white-space:nowrap;
}
.na-crans{display:flex;gap:3px}
.na-crans i{flex:1;height:5px;background:rgba(140,128,220,.14);transition:background .45s var(--ease-out)}
.na-crans i.on{background:#9fc4ea}
.na-mot{
  margin:calc(var(--na-air)*.4) 0 0;line-height:1.5;
  font-size:clamp(13px,1.2vw,17px);font-style:italic;
  color:rgba(200,190,230,.5);text-wrap:pretty;
}
.na-heures .na-mot{margin-top:0}

/* --- qui veille : un écu par visage, et celui du couloir en gris --- */
.na-gens{
  display:flex;flex-direction:column;
  margin-top:calc(var(--na-air)*.5);border-top:1px solid rgba(140,128,220,.14);
}
.na-gen{
  display:flex;align-items:center;gap:11px;cursor:default;
  padding:clamp(4px,.85vh,9px) 9px;border-bottom:1px solid rgba(140,128,220,.11);
  animation:rise .7s var(--ease-out) both;transition:background .2s;
}
.na-gen:hover{background:rgba(178,162,224,.07)}
.na-badge{
  flex:none;width:24px;height:24px;display:flex;align-items:center;justify-content:center;
  color:var(--ton);border:1px solid rgba(178,200,236,.3);
  background:linear-gradient(180deg, rgba(90,110,160,.16), rgba(10,8,30,.85));
}
.na-gen-nom{
  flex:1;min-width:0;font-size:clamp(14px,1.3vw,19px);color:rgba(238,240,252,.88);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.na-gen-etat{
  flex:none;font-family:var(--font-tech);font-size:8.5px;letter-spacing:.2em;text-transform:uppercase;
  color:rgba(198,214,244,.7);white-space:nowrap;
}
.na-gen-absent .na-badge{border-color:rgba(140,128,220,.26)}
.na-gen-absent .na-gen-nom{color:rgba(198,186,236,.62)}
.na-gen-absent .na-gen-etat{color:rgba(200,190,230,.42)}

/* ============================================================================
   LE NOM : six prénoms, un champ libre, et le nom de famille en trois
   possibilités. Le bloc tient toute la largeur : c’est le seul moment du
   jeu où l’on décide de l’identité de quelqu’un d’autre, et il ne se
   loge pas dans une colonne de deux cent soixante pixels.
   ============================================================================ */
.na-nom{flex:none;display:flex;flex-direction:column;margin-top:calc(var(--na-air)*1.1)}
.na-nom-grille{
  display:grid;align-items:start;
  grid-template-columns:repeat(auto-fit, minmax(min(100%,258px),1fr));
  column-gap:clamp(20px,3.2vw,52px);row-gap:calc(var(--na-air)*.8);
  margin-top:calc(var(--na-air)*.6);
}
.na-nom-bloc,.na-nom-pied{min-width:0;display:flex;flex-direction:column;gap:calc(var(--na-air)*.45)}
.na-jetons{display:flex;flex-wrap:wrap;gap:7px}
.na-jeton{
  font-family:var(--font-body);cursor:pointer;text-align:center;border-radius:0;
  padding:clamp(6px,1vh,10px) clamp(11px,1.2vw,17px);
  border:1px solid rgba(140,128,220,.3);
  background:linear-gradient(165deg, rgba(30,24,60,.62), rgba(9,8,26,.78));
  font-size:clamp(14px,1.25vw,18px);line-height:1.15;color:rgba(232,228,248,.84);
  animation:rise .6s var(--ease-out) both;
  transition:background .2s, border-color .2s, color .2s, box-shadow .25s;
}
.na-jeton:hover{
  border-color:rgba(230,200,119,.5);color:#f6e3ae;
  background:linear-gradient(165deg, rgba(48,38,92,.8), rgba(12,10,32,.88));
}
.na-jeton.on{
  border-color:#e0bd6d;color:#f7ecca;
  background:linear-gradient(165deg, rgba(84,64,26,.5), rgba(20,15,32,.9));
  box-shadow:0 0 20px -6px rgba(230,200,119,.75), inset 0 1px 0 rgba(255,255,255,.07);
}
/* Le jeton du nom de famille porte deux étages : le nom, et d’où il vient. */
.na-jeton-large{
  display:flex;flex-direction:column;align-items:flex-start;gap:4px;
  padding:clamp(8px,1.2vh,13px) clamp(13px,1.4vw,19px);text-align:left;
}
.na-jeton-large > span{
  font-family:var(--font-title);font-weight:600;font-size:clamp(15px,1.35vw,19px);
  letter-spacing:.04em;line-height:1;
}
.na-jeton-large > em{
  font-family:var(--font-tech);font-style:normal;font-size:8.5px;
  letter-spacing:.22em;text-transform:uppercase;color:rgba(200,190,230,.5);
}
.na-jeton-large.on > em{color:rgba(230,200,119,.7)}

.na-champ-rang{display:flex;align-items:stretch;gap:8px;flex-wrap:wrap}
/* Le champ libre : un filet sous le texte, pas une boîte. On écrit un
   prénom sur une ligne, pas dans un formulaire du Ministère. */
.na-champ{
  flex:1 1 200px;min-width:0;border-radius:0;
  padding:clamp(6px,1vh,10px) 3px;
  border:0;border-bottom:1px solid rgba(230,200,119,.32);
  background:transparent;color:#f4ecd6;
  font-family:var(--font-body);font-size:clamp(15px,1.35vw,19px);line-height:1.2;
  transition:border-color .25s, box-shadow .25s;
}
.na-champ::placeholder{color:rgba(200,190,230,.4);font-style:italic}
.na-champ:focus{
  outline:none;border-bottom-color:#e0bd6d;
  box-shadow:0 10px 24px -22px rgba(230,200,119,.9);
}
.na-relance{
  flex:none;cursor:pointer;border-radius:0;padding:0 13px;
  border:1px solid rgba(140,128,220,.3);background:transparent;
  font-family:var(--font-tech);font-size:9px;letter-spacing:.24em;text-transform:uppercase;
  color:rgba(200,190,230,.6);white-space:nowrap;
  transition:border-color .2s, color .2s, background .2s;
}
.na-relance:hover{border-color:rgba(230,200,119,.5);color:#f6e3ae;background:rgba(230,200,119,.07)}

/* --- l’aperçu et le sceau : la troisième colonne du bloc du nom --- */
.na-apercu{
  display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;min-width:0;
  padding:calc(var(--na-air)*.35) 0 calc(var(--na-air)*.45);
  border-bottom:1px solid rgba(230,200,119,.16);
}
.na-apercu b:first-child{
  font-family:var(--font-title);font-weight:600;font-size:clamp(19px,2.2vw,30px);
  line-height:1;letter-spacing:.04em;color:#f0d78c;
  text-shadow:0 0 34px rgba(230,200,119,.4);
  transition:color .4s var(--ease-out);
}
.na-apercu b:last-child{
  font-family:var(--font-title);font-weight:400;font-size:clamp(14px,1.4vw,19px);
  line-height:1;letter-spacing:.16em;text-transform:uppercase;color:rgba(232,226,248,.72);
  transition:color .4s var(--ease-out);
}
.na-apercu b.na-vide{
  color:rgba(200,190,230,.26);text-shadow:none;font-weight:400;
}
.na-sceller{
  font-family:var(--font-title);align-self:stretch;
  position:relative;overflow:hidden;cursor:pointer;text-align:center;border-radius:0;
  padding:clamp(9px,1.5vh,15px) clamp(18px,2.4vw,34px);
  color:#241906;border:1px solid #f0d78c;
  background:linear-gradient(180deg,#f7e6b4 0%, #e0bd6d 52%, #c99f45 100%);
  box-shadow:0 22px 48px -26px rgba(230,200,119,.9);
  transition:transform .3s, box-shadow .3s, opacity .3s;
}
.na-sceller span{
  position:relative;font-family:var(--font-title);font-weight:600;
  font-size:clamp(11px,1.05vw,14px);letter-spacing:.3em;text-indent:.3em;text-transform:uppercase;
}
.na-sceller:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 28px 58px -24px rgba(230,200,119,1)}
/* Tant que le nom n’est pas entier, le bouton est là et il se voit : il
   n’a pas à disparaître, il a à dire qu’il attend quelque chose. */
.na-sceller:disabled{
  cursor:not-allowed;color:rgba(200,190,230,.4);
  border-color:rgba(140,128,220,.3);background:rgba(20,16,44,.7);
  box-shadow:none;
}
.na-sceller:disabled .na-lueur{display:none}

/* --- les choix --- */
.na-jeu{flex:none;display:flex;flex-direction:column;margin-top:calc(var(--na-air)*1.1)}
.na-choix-liste{
  display:flex;flex-direction:column;gap:calc(var(--na-air)*.45);
  margin-top:calc(var(--na-air)*.6);
}
/* Un bouton n’hérite pas de la police de la page : sans cette ligne, les
   choix sortiraient en sans-serif du système. */
.na-choix{
  font-family:var(--font-body);color:inherit;
  display:flex;align-items:center;gap:clamp(13px,1.6vw,20px);cursor:pointer;text-align:left;
  padding:clamp(11px,1.7vh,17px) clamp(15px,1.7vw,22px);border-radius:0;
  border:1px solid rgba(140,128,220,.26);
  background:linear-gradient(165deg, rgba(30,24,60,.62), rgba(9,8,26,.78));
  animation:rise .8s var(--ease-out) both;
  transition:background .2s, border-color .2s, transform .2s;
}
.na-choix:hover{
  background:linear-gradient(165deg, rgba(48,38,92,.8), rgba(12,10,32,.88));
  border-color:rgba(230,200,119,.5);transform:translateX(5px);
}
.na-choix-num{
  flex:none;width:28px;height:28px;display:flex;align-items:center;justify-content:center;
  border:1px solid rgba(230,200,119,.4);
  font-family:var(--font-tech);font-size:11px;color:var(--gold);
}
.na-choix-corps{flex:1;min-width:0;display:flex;flex-direction:column;gap:5px}
.na-choix-txt{
  font-family:var(--font-body);font-size:clamp(15px,1.4vw,20px);line-height:1.3;
  color:rgba(238,234,252,.92);text-wrap:pretty;
}
.na-choix-hint{
  font-family:var(--font-tech);font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;
  color:rgba(200,190,230,.5);
}

/* --- le résultat : un titre, un cachet qui tombe, et la suite --- */
.na-res-titre{
  margin-top:calc(var(--na-air)*.6);
  font-family:var(--font-title);font-weight:600;font-size:clamp(18px,2vw,27px);
  line-height:1.14;color:#f7ecca;animation:rise .7s var(--ease-out) both;
}
.na-res-titre::after{content:'';display:block;clear:both}
/* Le cachet flotte à droite : les lignes du titre le contournent, et il
   ne peut rien recouvrir. */
.na-cachet{
  float:right;margin:1px -1px 5px 14px;padding:5px 11px;
  border:2px solid var(--ton,#9fc4ea);color:var(--ton,#9fc4ea);
  font-family:var(--font-tech);font-style:normal;font-size:10px;letter-spacing:.24em;
  text-transform:uppercase;opacity:.85;white-space:nowrap;
  animation:naCachet .55s cubic-bezier(.2,1.5,.4,1) .35s both;
}
@keyframes naCachet{
  0%{opacity:0;transform:scale(1.9) rotate(-13deg)}
  55%{opacity:1;transform:scale(.94) rotate(-7deg)}
  100%{opacity:.85;transform:scale(1) rotate(-7deg)}
}
/* Les textes de résultat sont écrits en paragraphes, séparés par une
   ligne vide. Sans cette règle, les deux paragraphes se recollent et le
   souffle de la phrase disparaît. */
.na-res-txt{
  margin:calc(var(--na-air)*.6) 0 0;max-width:58ch;white-space:pre-line;
  font-size:clamp(15px,1.35vw,19px);line-height:1.6;color:rgba(224,220,244,.82);
  text-wrap:pretty;animation:rise .8s var(--ease-out) .1s both;
}
/* Une naissance rend jusqu’à huit lignes : les caractéristiques, le
   couple, le nom, et l’enfant scellé. La colonne défile toute seule et le
   dit par un dégradé au bord. Aucune ligne ne disparaît. */
.na-res-fx{
  margin-top:calc(var(--na-air)*.85);
  max-height:min(34vh,340px);overflow-y:auto;overscroll-behavior:contain;
}
.na-res-fx.na-deborde{
  -webkit-mask-image:linear-gradient(180deg,#000 calc(100% - 26px),transparent);
  mask-image:linear-gradient(180deg,#000 calc(100% - 26px),transparent);
}
.na-res-fx .fx-bloc{margin-top:0}
/* Le bouton vit au bas de la colonne des visages, la plus courte des
   trois. Son logement porte l’écart et la poussée vers le bas, pas lui. */
.na-suite-place{display:none}
.na[data-phase="resultat"] .na-grille{align-items:stretch}
.na[data-phase="resultat"] .na-suite-place{
  display:flex;flex-direction:column;justify-content:flex-end;
  margin-top:auto;padding-top:calc(var(--na-air)*1.2);
}
.na-suite{
  font-family:var(--font-title);
  position:relative;overflow:hidden;cursor:pointer;text-align:center;border-radius:0;
  padding:clamp(11px,1.9vh,19px) clamp(18px,2.6vw,38px);
  color:#241906;border:1px solid #f0d78c;
  background:linear-gradient(180deg,#f7e6b4 0%, #e0bd6d 52%, #c99f45 100%);
  box-shadow:0 26px 56px -26px rgba(230,200,119,.9);
  transition:transform .3s, box-shadow .3s;
}
.na-suite:hover{transform:translateY(-2px);box-shadow:0 32px 66px -24px rgba(230,200,119,1)}
.na-suite span{
  position:relative;font-family:var(--font-title);font-weight:600;
  font-size:clamp(12px,1.15vw,16px);letter-spacing:.3em;text-indent:.3em;text-transform:uppercase;
}
.na-lueur{
  position:absolute;top:0;bottom:0;width:80px;pointer-events:none;
  background:linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,.4), rgba(255,255,255,0));
  animation:naFile 5s ease-in-out infinite;
}
@keyframes naFile{0%{transform:translateX(-140%)}100%{transform:translateX(360%)}}

/* --- adaptatif : la chambre se resserre avant que le défilement n’arrive --- */
@media(max-width:1180px){
  .na-faits{gap:11px}
  .na-fait span{font-size:8px;letter-spacing:.16em}
}
@media(max-width:900px){
  .na-tete{align-items:flex-start;flex-direction:column;gap:9px}
  .na-gen-etat{display:none}
  .na-berceau,.na-pouls{display:none}
}
/* Sur un écran court, la chambre se resserre d’un cran. On ne touche qu’à
   la mesure de respiration et à deux ou trois corps de texte : quinze
   réglages séparés finissent toujours par se marcher dessus. */
@media(max-height:940px){
  .na{--na-air:clamp(11px,1.8vh,21px)}
  .na-corps{padding:clamp(10px,1.7vh,22px) clamp(20px,3.4vw,52px) clamp(11px,1.7vh,22px)}
  .na-titre{font-size:clamp(20px,2.3vw,32px)}
  .na-texte{font-size:clamp(14px,1.2vw,18px)}
  .na-ligne,.na-gen{padding:clamp(3px,.7vh,7px) 9px}
  .na-ligne-nom,.na-gen-nom{font-size:clamp(14px,1.2vw,17px)}
  .na-choix{padding:clamp(10px,1.5vh,15px) clamp(14px,1.6vw,20px)}
  .na-choix-txt{font-size:clamp(14px,1.25vw,18px)}
  .na-res-titre{font-size:clamp(17px,1.75vw,23px)}
  .na-res-txt{font-size:clamp(14px,1.25vw,18px)}
  .na-res-fx{max-height:min(28vh,250px)}
  .na-apercu b:first-child{font-size:clamp(18px,1.9vw,25px)}
}
/* À partir de neuf cents pixels de haut, la chambre est serrée : le bloc
   du nom coûte une rangée entière que la maquette n’avait pas, et il ne
   doit pas pousser le sceau sous le bandeau du bas. Le seuil est à 910 et
   pas à 780 pour que le 1440x900 et le 1600x900 en profitent aussi : ce
   sont les deux tailles où la carte débordait le plus.

   On ne rogne que les respirations et les corps de texte. Aucune ligne ne
   disparaît, aucun chiffre ne se cache. */
@media(max-height:910px){
  .na{--na-air:clamp(9px,1.4vh,16px)}
  .na-corps{padding:clamp(9px,1.4vh,16px) clamp(18px,3vw,44px) clamp(10px,1.4vh,16px)}
  .na-titre{font-size:clamp(19px,2.1vw,27px)}
  .na-texte{font-size:clamp(13px,1.1vw,16px);line-height:1.5}
  .na-mot{font-size:clamp(12px,1.05vw,15px)}
  .na-ligne,.na-gen{padding:clamp(2px,.5vh,5px) 9px}
  .na-heures{gap:5px;margin-top:calc(var(--na-air)*.5)}
  .na-jetons{gap:5px}
  .na-tete{margin-top:calc(var(--na-air)*.35)}
  .na-texte{margin-top:calc(var(--na-air)*.5)}
  .na-grille{margin-top:calc(var(--na-air)*.55)}
  .na-liste,.na-gens{margin-top:calc(var(--na-air)*.35)}
  .na-nom{margin-top:calc(var(--na-air)*.7)}
  .na-nom-grille{row-gap:calc(var(--na-air)*.5);margin-top:calc(var(--na-air)*.45)}
  .na-apercu{padding:calc(var(--na-air)*.25) 0 calc(var(--na-air)*.35)}
  .na-apercu b:first-child{font-size:clamp(17px,1.7vw,22px)}
  .na-champ{padding:clamp(4px,.8vh,7px) 3px}
  .na-sceller{padding:clamp(7px,1.2vh,11px) clamp(14px,2vw,26px)}
  .na-res-fx{max-height:min(25vh,200px)}
  .na-motes i{opacity:.7}
  .na-jeton{padding:clamp(5px,.8vh,8px) clamp(10px,1.1vw,14px);font-size:clamp(13px,1.15vw,16px)}
}
@media(prefers-reduced-motion:reduce){
  .na-motes i,.na-halo,.na-berceau,.na-pouls i,.na-lueur,.na-cachet{animation:none}
  .na-cachet{opacity:.85;transform:rotate(-7deg)}
  .na-ligne b.na-attente{animation:none}
}


/* ============================================================================
   49. LA BATAILLE DE POUDLARD : la nuit du 2 mai 1998
   ----------------------------------------------------------------------------
   C’était une grande scène comme les autres : un en-tête chiffré, deux
   colonnes de contexte, et des choix génériques dessous. La plus grande
   nuit du jeu se lisait exactement comme un cours de Botanique.

   Elle a maintenant son écran. La nuit indigo prend feu par le bas : une
   lueur rouge monte du bord inférieur du cadre, douze braises montent, six
   cendres tombent, et le VII fantôme reste derrière tout. Le sur-titre est
   rose, pas or : ce n’est pas une réussite qu’on annonce.

   Trois jauges en crans tiennent à droite du titre. Elles ne décorent pas :
   le dôme porte un cran d’or, le seuil sous lequel la position choisie
   cède. La règle est donc lisible avant le clic. Le bandeau « À tes côtés »
   dit qui se bat avec toi, et à quel point.

   Tout le décor se pose une fois. Du choix au résultat, seul `data-phase`
   change sur la carte : les braises ne redescendent pas au milieu d’une
   décision. Les jauges, elles, s’éteignent cran par cran, parce que c’est
   exactement ce que la nuit leur fait.
   ============================================================================ */

/* Le fond de l’écran : le chiffre de l’année, et une vignette plus serrée
   que d’ordinaire, pour que le feu sorte du noir. */
#main-panel[data-scene="bataille"]::before{
  font-size:min(46vh,420px);color:rgba(230,200,119,.035);
}
#main-panel[data-scene="bataille"]::after{
  background:radial-gradient(75% 65% at 50% 45%, rgba(0,0,0,0) 40%, rgba(0,0,0,.5) 100%);
}

/* Toute la respiration de l’écran tient dans une seule mesure. Serrer la
   nuit sur un écran court, c’est changer cette mesure, et rien d’autre. */
.bt{
  --bt-air:clamp(11px,1.8vh,20px);
  position:relative;width:100%;max-width:1240px;margin:0 auto;overflow:hidden;
  display:flex;flex-direction:column;
  border:1px solid rgba(230,200,119,.2);
  background:linear-gradient(180deg, rgba(28,23,68,.72) 0%, rgba(12,10,34,.92) 100%);
  box-shadow:0 50px 110px -60px rgba(0,0,0,1), inset 0 1px 0 rgba(255,255,255,.06);
  animation:rise .7s var(--ease-out) both;
}
.bt > .grain{opacity:.5}

/* --- l’incendie : la lueur qui monte du bas du cadre --- */
.bt-incendie,.bt-flammeches{position:absolute;inset:0;pointer-events:none;z-index:0;overflow:hidden}
.bt-incendie{
  background:radial-gradient(120% 46% at 50% 108%,
    rgba(226,116,88,.20) 0%, rgba(212,101,124,.09) 40%, rgba(0,0,0,0) 74%);
  animation:btIncendie 7s ease-in-out infinite;
}
@keyframes btIncendie{0%,100%{opacity:.55}50%{opacity:.95}}

/* --- douze braises montent, six cendres tombent, jamais en cadence --- */
.bt-flammeches i{position:absolute;width:2px;height:2px;border-radius:50%;
  animation-timing-function:linear;animation-iteration-count:infinite}
.bt-braise{
  bottom:-6px;background:rgba(240,170,120,.85);
  box-shadow:0 0 8px rgba(226,132,124,.8);
  animation-name:btBraise;
}
.bt-cendre{
  top:-6px;width:3px;height:3px;background:rgba(190,182,210,.35);
  animation-name:btCendre;
}
@keyframes btBraise{
  0%{transform:translate(0,0);opacity:0}
  12%{opacity:.7}
  70%{opacity:.5}
  100%{transform:translate(26px,-72vh);opacity:0}
}
@keyframes btCendre{
  0%{transform:translate(0,0);opacity:0}
  15%{opacity:.5}
  100%{transform:translate(-30px,74vh);opacity:0}
}

.bt-corps{
  position:relative;z-index:2;display:flex;flex-direction:column;
  padding:calc(var(--bt-air) * 1.5) clamp(26px,4vw,64px) calc(var(--bt-air) * 1.4);
}

/* --- le sur-titre : rose, et l’heure à droite --- */
.bt-kicker{display:flex;align-items:center;gap:13px;flex:none}
.bt-kicker > i{flex:none;width:26px;height:1px;background:rgba(212,101,124,.7)}
.bt-kicker > span:not(.bt-filet):not(.bt-horloge){
  font-family:var(--font-tech);font-size:10px;letter-spacing:.34em;text-transform:uppercase;
  color:rgba(226,132,140,.8);white-space:nowrap;
}
.bt-filet{flex:1;height:1px;min-width:12px;
  background:linear-gradient(90deg,rgba(212,101,124,.35),rgba(212,101,124,0))}
.bt-horloge{
  flex:none;font-family:var(--font-tech);font-size:9px;letter-spacing:.26em;text-transform:uppercase;
  color:var(--parchment-mute);white-space:nowrap;transition:color .4s;
}
.bt[data-phase="resultat"] .bt-horloge{color:rgba(240,224,170,.8)}

/* --- le titre, et les trois jauges qui le suivent --- */
.bt-tete{
  flex:none;display:flex;align-items:flex-end;justify-content:space-between;
  gap:clamp(16px,2.6vw,36px);flex-wrap:wrap;margin-top:calc(var(--bt-air) * .7);
}
.bt-titre{
  margin:0;font-family:var(--font-title);font-weight:600;
  font-size:clamp(26px,3vw,42px);line-height:1;color:var(--gold-pale);
  text-shadow:0 0 54px rgba(212,101,124,.35);
}
.bt-jauges{display:flex;align-items:flex-end;gap:clamp(12px,1.6vw,22px);flex-wrap:wrap}
.bt-jauge{display:flex;flex-direction:column;gap:5px;cursor:default}
.bt-jauge-tete{display:flex;align-items:baseline;gap:7px}
.bt-jauge-tete b{
  font-family:var(--font-title);font-weight:600;font-size:clamp(17px,1.5vw,21px);
  line-height:1;color:var(--ton);transition:color .4s;
}
.bt-jauge-tete span{
  font-family:var(--font-tech);font-size:9px;letter-spacing:.22em;text-transform:uppercase;
  color:var(--parchment-mute);white-space:nowrap;
}
/* Des crans, jamais une barre lisse. Ils s’allument un par un en entrant,
   et ils s’éteignent un par un quand la nuit les prend. */
.bt-crans{display:flex;gap:2px}
.bt-crans i{
  width:9px;height:4px;background:rgba(140,128,220,.16);
  transform-origin:left center;animation:segIn .4s var(--ease-out) both;
  transition:background .45s, box-shadow .45s;
}
.bt-crans i.on{background:var(--ton);box-shadow:0 0 9px -2px var(--ton)}

/* --- le bandeau : qui se bat à côté de toi --- */
.bt-cotes{
  flex:none;display:flex;align-items:center;gap:clamp(12px,1.6vw,22px);flex-wrap:wrap;
  margin-top:var(--bt-air);padding:calc(var(--bt-air) * .55) 0;
  border-top:1px solid rgba(230,200,119,.18);
  border-bottom:1px solid rgba(230,200,119,.18);
}
.bt-cotes-lab{
  flex:none;font-family:var(--font-tech);font-size:9px;letter-spacing:.3em;text-transform:uppercase;
  color:rgba(230,200,119,.7);white-space:nowrap;
}
.bt-allie{
  display:flex;align-items:center;gap:10px;white-space:nowrap;cursor:default;
  animation:rise .6s var(--ease-out) both;
}
/* Le badge accueille indifféremment un blason de maison, l’écusson des
   professeurs, ou le tracé à la plume quand on ne sait pas de qui il
   s’agit : tous trois se calent au même gabarit. */
.bt-allie-badge{
  flex:none;width:28px;height:28px;display:flex;align-items:center;justify-content:center;
  border:1px solid var(--ton-trait);
  background:linear-gradient(180deg, var(--ton-fond), rgba(10,8,30,.85));
}
.bt-allie-badge .cb-ecu{width:19px;height:19px}
.bt-allie-corps{display:flex;flex-direction:column;gap:3px}
.bt-allie-nom{
  font-family:var(--font-body);font-size:clamp(16px,1.3vw,19px);line-height:1;
  color:rgba(240,236,252,.88);
}
/* Quatre losanges : un allié se compte en crans, pas en pourcentage. */
.bt-losanges{display:flex;gap:3px}
.bt-losanges i{
  width:6px;height:6px;transform:rotate(45deg);
  background:transparent;border:1px solid rgba(140,128,220,.32);
}
.bt-losanges i.on{
  background:linear-gradient(135deg,#f7e6b4,#cfa64c);
  border-color:rgba(244,221,160,.9);
}

/* --- le texte, puis les positions --- */
.bt-jeu{flex:none;display:flex;flex-direction:column}
.bt[data-phase="resultat"] .bt-jeu{display:none}
.bt-texte{
  margin:var(--bt-air) 0 0;max-width:86ch;
  font-family:var(--font-body);font-size:clamp(17px,1.35vw,20px);line-height:1.6;
  color:rgba(226,220,245,.82);text-wrap:pretty;
}
/* Une position se lit exactement comme une action de match : le filet
   de couleur à gauche donne la cote avant même qu’on lise, le libellé
   et sa ligne de conseil au milieu, la cote et le gain à droite, sur
   la même ligne. Les jetons empilés dessous prenaient une hauteur que
   cinq positions ne pouvaient pas payer. */
.bt-choix-liste{display:flex;flex-direction:column;gap:calc(var(--bt-air) * .6);margin-top:var(--bt-air)}
.bt-choix{
  position:relative;display:flex;align-items:center;width:100%;
  gap:clamp(12px,1.6vw,22px);
  cursor:pointer;text-align:left;border-radius:0;
  padding:calc(var(--bt-air) * .7) clamp(14px,1.8vw,24px);
  border:1px solid rgba(140,128,220,.24);border-left:2px solid var(--ton,rgba(140,128,220,.5));
  background:linear-gradient(165deg, rgba(30,24,74,.55), rgba(11,9,32,.7));
  animation:rise .6s var(--ease-out) both;
  transition:background .2s, border-color .2s, transform .2s;
}
.bt-choix:hover,.bt-choix:focus-visible{
  background:linear-gradient(165deg, rgba(46,37,104,.7), rgba(14,11,38,.8));
  border-color:rgba(230,200,119,.5);border-left-color:var(--ton,rgba(230,200,119,.5));
  transform:translateX(4px);outline:none;
}
.bt-choix-noire{border-color:rgba(212,101,124,.3)}
.bt-choix-noire:hover,.bt-choix-noire:focus-visible{border-color:rgba(212,101,124,.62)}
.bt-num{
  flex:none;width:30px;height:30px;display:flex;align-items:center;justify-content:center;
  border:1px solid rgba(230,200,119,.4);background:rgba(230,200,119,.1);
  font-family:var(--font-title);font-size:15px;color:var(--gold-warm);
}
.bt-choix-noire .bt-num{border-color:rgba(212,101,124,.45);background:rgba(212,101,124,.1);color:#e8929f}
.bt-choix-corps{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:4px}
.bt-choix-txt{
  font-family:var(--font-body);font-size:clamp(16px,1.45vw,21px);line-height:1.3;
  color:rgba(240,236,252,.9);text-wrap:pretty;
}
.bt-choix-corps .u-tech{font-size:9px;letter-spacing:.2em;color:rgba(200,190,230,.45)}
/* Le pourcentage d’y rester est le seul mot rouge de la ligne : c’est
   le seul qui parle de mourir. */
.bt-choix-corps .u-tech b{font-weight:400;color:rgba(226,132,140,.9)}
/* La cote d’une position et ce qu’elle rapporte ne s’affichent plus :
   voir renderBataille, dans js/bataille.js. */

/* --- le résultat : il n’existe pas tant qu’on n’a pas choisi --- */
.bt-res{display:none;flex-direction:column;margin-top:calc(var(--bt-air) * .8)}
.bt[data-phase="resultat"] .bt-res{display:flex}
.bt-res-tete{display:flex;align-items:center;gap:clamp(16px,2.2vw,30px);flex-wrap:wrap}
.bt-sceau{
  flex:none;width:clamp(66px,6.6vw,88px);height:clamp(66px,6.6vw,88px);
  display:flex;align-items:center;justify-content:center;
  border:1px solid rgba(212,101,124,.6);
  background:linear-gradient(160deg, rgba(212,101,124,.18), rgba(9,7,28,.85));
  box-shadow:0 0 40px -18px rgba(212,101,124,.9);
  animation:btSceau .6s var(--ease-out) both;
}
.bt[data-tenu="oui"] .bt-sceau{
  border-color:rgba(143,214,165,.6);
  background:linear-gradient(160deg, rgba(143,214,165,.18), rgba(9,7,28,.85));
  box-shadow:0 0 40px -18px rgba(143,214,165,.9);
}
@keyframes btSceau{from{opacity:0;transform:scale(.82)}to{opacity:1;transform:scale(1)}}
.bt-res-mots{flex:1 1 300px;min-width:260px;display:flex;flex-direction:column;gap:8px}
.bt-res-lab{
  font-family:var(--font-tech);font-size:10px;letter-spacing:.32em;text-transform:uppercase;
  color:var(--ton,rgba(226,132,140,.9));
}
.bt-res-titre{
  font-family:var(--font-title);font-weight:600;font-size:clamp(22px,2.3vw,32px);
  line-height:1.08;color:var(--gold-pale);
}
.bt-res-txt{
  margin:var(--bt-air) 0 0;max-width:82ch;
  font-family:var(--font-body);font-size:clamp(17px,1.4vw,20px);line-height:1.6;
  color:rgba(226,220,245,.82);text-wrap:pretty;
}
/* Les trois poids de conséquence gardent leur forme : cet écran ne les
   remplace pas par une grille de deux colonnes, il les héberge. */
.bt-res-fx .fx-bloc{margin-top:var(--bt-air);padding-top:calc(var(--bt-air) * .8)}

/* --- ce que la nuit emporte : sans un chiffre, comme toute marque --- */
.bt-emporte{
  margin-top:var(--bt-air);padding:11px 16px;
  border-left:1px solid rgba(212,101,124,.5);
  background:rgba(212,101,124,.05);
}
.bt-emporte-lab{
  display:block;font-family:var(--font-tech);font-size:9px;letter-spacing:.28em;
  text-transform:uppercase;color:rgba(212,101,124,.85);
}
.bt-emporte-liste{display:flex;flex-direction:column;gap:5px;margin-top:8px}
.bt-emporte-liste span{
  font-family:var(--font-body);font-size:clamp(16px,1.3vw,19px);line-height:1.4;
  color:rgba(240,224,228,.82);text-wrap:pretty;
  animation:rise .5s var(--ease-out) both;
}
.bt-emporte-liste span:nth-child(2){animation-delay:.1s}
.bt-emporte-liste span:nth-child(3){animation-delay:.2s}
.bt-emporte-liste span:nth-child(4){animation-delay:.3s}

/* --- le bouton d’or, et son reflet qui passe --- */
.bt-suite{
  position:relative;overflow:hidden;cursor:pointer;text-align:center;border-radius:0;
  margin-top:calc(var(--bt-air) * 1.1);
  padding:clamp(14px,2vh,19px) clamp(20px,2.6vw,38px);
  color:var(--or-encre);border:1px solid var(--gold-warm);background:var(--or-massif);
  box-shadow:0 26px 56px -26px rgba(230,200,119,.95);
  transition:transform .3s, box-shadow .3s;
}
.bt-suite span{
  position:relative;font-family:var(--font-title);font-weight:600;
  font-size:clamp(13px,1.15vw,16px);letter-spacing:.3em;text-indent:.3em;text-transform:uppercase;
}
.bt-suite:hover{transform:translateY(-2px);box-shadow:0 32px 66px -24px rgba(230,200,119,1)}
.bt-lustre{
  position:absolute;top:0;bottom:0;width:80px;pointer-events:none;
  background:linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,.4), rgba(255,255,255,0));
  animation:shimmer 5s ease-in-out infinite;
}

/* Le seuil est haut : le bandeau et le socle prennent déjà cent trente
   pixels, et cinq positions ne tiennent pas en 768 aux mesures pleines. */
@media(max-height:900px){
  .bt{--bt-air:clamp(7px,1.15vh,13px)}
  .bt-titre{font-size:clamp(22px,2.3vw,31px)}
  .bt-texte{font-size:clamp(15px,1.15vw,17.5px);line-height:1.48}
  .bt-choix-txt{font-size:clamp(15px,1.2vw,18px)}
  .bt-num{width:27px;height:27px;font-size:14px}
  .bt-allie-nom{font-size:clamp(15px,1.15vw,17px)}
  .bt-allie-badge{width:25px;height:25px}
  .bt-sceau{width:clamp(54px,5vw,66px);height:clamp(54px,5vw,66px)}
  .bt-res-titre{font-size:clamp(19px,1.9vw,26px)}
}
@media(max-height:780px){
  .bt{--bt-air:clamp(6px,.95vh,11px)}
  .bt-titre{font-size:clamp(21px,2vw,27px)}
  .bt-texte{font-size:15px;line-height:1.44}
  .bt-choix-txt{font-size:15.5px}
  .bt-jauge-tete b{font-size:17px}
  .bt-cote b{font-size:13px}
}
@media(max-width:1100px){
  .bt-tete{align-items:flex-start;flex-direction:column;gap:var(--bt-air)}
  .bt-jauges{width:100%}
}
@media(max-width:900px){
  .bt-choix{flex-wrap:wrap}
}
@media(max-width:700px){
  .bt-crans i{width:7px}
}
@media(prefers-reduced-motion:reduce){
  .bt-flammeches i,.bt-incendie,.bt-lustre,.bt-crans i,.bt-sceau{animation:none}
  .bt-sceau{opacity:1;transform:none}
}


/* ============================================================================
   50. LA VICTOIRE DES TÉNÈBRES : la matinée du 2 mai, dans l’autre sens
   ----------------------------------------------------------------------------
   L’autre fin. Elle passait par la grande scène ordinaire, avec son
   en-tête chiffré et ses deux colonnes : la bascule du monde entier se
   lisait exactement comme un bilan de Quidditch.

   Elle a maintenant son écran, et il est l’exact envers de la bataille.
   La bataille brûle par le bas : une lueur rouge monte du bord inférieur
   du cadre. Celui-ci fume par le haut. La Marque des Ténèbres flotte en
   haut à droite, elle dérive sur vingt-six secondes, son halo vert
   respire dessous, et la vignette rouge du fond bat lentement, comme
   une salle où l’air ne circule plus. Dix fumées montent du bas, seize
   braises avec elles, et le VII fantôme reste derrière tout.

   Le rose remplace l’or partout où il y aurait eu de l’or : sur-titre,
   sceau, filets, bandeau du verdict, libellés. Ce n’est pas une réussite
   qu’on annonce, et l’écran ne doit jamais avoir l’air de féliciter.

   Deux zones seulement, et une bascule entre les deux. Tant que
   `data-phase` vaut `choix`, on lit le récit, le verdict et les options.
   Quand il passe à `resultat`, le jeu disparaît et deux colonnes
   prennent sa place : ce qu’on te dit à gauche, ce que ça pose à droite,
   avec le bouton d’or au bout. La Marque, elle, ne se repose pas : le
   décor est posé une fois, sa dérive continue exactement où elle en
   était.

   `data-statut` porte la teinte du matin choisi : or pour le favori,
   mauve pour le baron, bleu pour le fantôme, vert pour l’infiltré,
   rouge pour le surveillé. Le sceau et le libellé s’y accordent seuls.
   ============================================================================ */

/* Le fond de l’écran : le chiffre de l’année reste, et la vignette se
   resserre pour que la fumée sorte du noir. */
#main-panel[data-scene="tenebres"]::before{
  font-size:min(46vh,420px);color:rgba(230,200,119,.035);
}
#main-panel[data-scene="tenebres"]::after{
  background:radial-gradient(75% 65% at 50% 45%, rgba(0,0,0,0) 40%, rgba(0,0,0,.5) 100%);
}

/* Toute la respiration de l’écran tient dans une seule mesure, comme
   sous la tente et dans la chambre. Serrer la matinée sur un écran
   court, c’est changer cette mesure, et rien d’autre. */
.vt{
  --vt-air:clamp(10px,1.9vh,24px);
  --vt-rose:#d4657c;
  --vt-rose-clair:rgba(226,132,140,.85);
  --vt-ton-statut:#e0bd6d;
  position:relative;width:100%;max-width:1240px;margin:0 auto;overflow:hidden;
  display:flex;flex-direction:column;
  border:1px solid rgba(230,200,119,.2);
  background:linear-gradient(180deg, rgba(28,23,68,.72) 0%, rgba(12,10,34,.92) 100%);
  box-shadow:0 50px 110px -60px rgba(0,0,0,1), inset 0 1px 0 rgba(255,255,255,.06);
  animation:rise .7s var(--ease-out) both;
}
.vt > .grain{opacity:.5}

/* --- le voile : la salle bat lentement, elle ne clignote pas --- */
.vt-voile{
  position:absolute;inset:0;pointer-events:none;z-index:0;
  background:radial-gradient(80% 60% at 50% 40%, rgba(60,20,40,.22), rgba(6,4,18,.55) 78%);
  animation:vtVoile 8s ease-in-out infinite alternate;
}
@keyframes vtVoile{0%{opacity:.75}100%{opacity:1}}

/* --- seize braises montent, dix fumées avec elles --- */
.vt-braises,.vt-fumees{position:absolute;inset:0;pointer-events:none;z-index:0;overflow:hidden}
.vt-braises i{
  position:absolute;bottom:-6px;width:2px;height:2px;border-radius:50%;
  background:rgba(226,132,124,.75);box-shadow:0 0 8px rgba(226,132,124,.8);
  animation-name:vtBraise;animation-timing-function:linear;animation-iteration-count:infinite;
}
@keyframes vtBraise{
  0%{transform:translate(0,0);opacity:0}
  12%{opacity:.7}
  70%{opacity:.5}
  100%{transform:translate(26px,-72vh);opacity:0}
}
/* Les fumées sont les seuls disques de cet écran, et elles ne sont pas
   des formes : ce sont des dégradés sans bord. */
.vt-fumees i{
  position:absolute;bottom:-40px;border-radius:50%;
  background:radial-gradient(circle, rgba(120,60,90,.16), rgba(120,60,90,0) 70%);
  animation-name:vtFumee;animation-timing-function:linear;animation-iteration-count:infinite;
}
@keyframes vtFumee{
  0%{transform:translate(0,0) scale(1);opacity:0}
  25%{opacity:.5}
  100%{transform:translate(46px,-34px) scale(1.5);opacity:0}
}

/* --- la Marque des Ténèbres : elle dérive, elle ne tourne pas ---
   L’image est masquée par un dégradé elliptique : aucun bord droit ne
   doit trahir un fichier posé sur la carte. Le mode écran la fait
   sortir du fond au lieu de s’y coller. */
.vt-marque{
  position:absolute;right:4%;top:4%;width:clamp(150px,16vw,230px);
  pointer-events:none;z-index:0;animation:vtDerive 26s ease-in-out infinite;
}
.vt-marque-halo{
  position:absolute;inset:-18%;
  background:radial-gradient(circle, rgba(122,214,150,.22), rgba(122,214,150,0) 66%);
  animation:vtHalo 6s ease-in-out infinite;
}
.vt-marque img{
  position:relative;display:block;width:100%;height:auto;
  mix-blend-mode:screen;opacity:.5;
  filter:grayscale(.35) brightness(.95) contrast(1.15) hue-rotate(-8deg);
  -webkit-mask-image:radial-gradient(closest-side ellipse at 50% 50%, #000 42%, transparent 86%);
  mask-image:radial-gradient(closest-side ellipse at 50% 50%, #000 42%, transparent 86%);
}
@keyframes vtDerive{
  0%,100%{transform:translate(0,0) rotate(-1.5deg)}
  30%{transform:translate(-18px,14px) rotate(1.5deg)}
  65%{transform:translate(12px,26px) rotate(-1deg)}
}
@keyframes vtHalo{0%,100%{opacity:.5;transform:scale(1)}50%{opacity:1;transform:scale(1.12)}}

.vt-corps{
  position:relative;z-index:2;display:flex;flex-direction:column;
  padding:calc(var(--vt-air) * 1.4) clamp(24px,4.4vw,72px) calc(var(--vt-air) * 1.3);
}

/* --- le sur-titre : rose, jamais or --- */
.vt-kicker{flex:none;display:flex;align-items:center;gap:13px;animation:rise .8s var(--ease-out) both}
.vt-kicker > i{flex:none;width:26px;height:1px;background:rgba(212,101,124,.75)}
.vt-kicker > span:not(.vt-filet){
  font-family:var(--font-tech);font-size:10px;letter-spacing:.34em;text-transform:uppercase;
  color:var(--vt-rose-clair);white-space:nowrap;
}
.vt-filet{
  flex:1;min-width:12px;height:1px;
  background:linear-gradient(90deg, rgba(212,101,124,.3), rgba(212,101,124,0));
}

/* --- le sceau et le titre, sur la même ligne --- */
.vt-tete{
  flex:none;display:flex;align-items:center;gap:clamp(13px,1.8vw,24px);
  margin-top:calc(var(--vt-air) * .6);
}
.vt-sceau{
  flex:none;width:clamp(38px,3.8vw,52px);height:clamp(38px,3.8vw,52px);
  display:flex;align-items:center;justify-content:center;
  border:1px solid rgba(212,101,124,.5);
  background:linear-gradient(160deg, rgba(212,101,124,.2), rgba(9,7,28,.85));
  box-shadow:0 0 34px -14px rgba(212,101,124,.9);
  animation:vtSceau .8s var(--ease-out) both;
}
@keyframes vtSceau{from{opacity:0;transform:scale(.82)}to{opacity:1;transform:scale(1)}}
.vt-titre{
  margin:0;max-width:24ch;
  font-family:var(--font-title);font-weight:600;font-size:clamp(22px,3vw,44px);
  line-height:1.02;color:#f4ecd6;text-shadow:0 0 60px rgba(212,101,124,.4);
  text-wrap:balance;animation:rise .9s var(--ease-out) .1s both;
}

/* --- le récit : trois paragraphes de canon, un quatrième qui te situe --- */
.vt-recit{
  flex:none;max-width:82ch;display:flex;flex-direction:column;
  gap:clamp(5px,1.1vh,12px);margin-top:clamp(8px,1.7vh,20px);
}
.vt-recit p{
  margin:0;font-family:var(--font-body);font-size:clamp(15px,1.35vw,20px);line-height:1.6;
  color:rgba(226,220,245,.82);text-wrap:pretty;animation:rise .9s var(--ease-out) both;
}
.vt-recit p.vt-fort{color:rgba(240,236,252,.9)}

/* --- le verdict : la seule phrase en Cinzel du corps de l’écran --- */
.vt-verdict{
  flex:none;display:flex;align-items:center;gap:clamp(12px,1.6vw,20px);flex-wrap:wrap;
  margin-top:clamp(9px,1.8vh,22px);
  padding:clamp(7px,1.3vh,14px) clamp(14px,1.6vw,22px);
  border-top:1px solid rgba(212,101,124,.4);
  border-bottom:1px solid rgba(212,101,124,.4);
  background:rgba(212,101,124,.06);cursor:default;
  animation:rise 1s var(--ease-out) .45s both;
}
.vt-verdict-mot{
  font-family:var(--font-title);font-weight:600;font-size:clamp(17px,1.7vw,24px);
  color:#f4ecd6;white-space:nowrap;
}
.vt-verdict .vt-filet{min-width:120px}
.vt-verdict-lab{
  font-family:var(--font-tech);font-size:9.5px;letter-spacing:.28em;text-transform:uppercase;
  color:rgba(226,132,140,.8);white-space:nowrap;transition:color .4s;
}
.vt[data-phase="resultat"] .vt-verdict-lab{color:rgba(240,224,170,.85)}

/* --- la barre du jeu : ce qu’on te demande, et l’avertissement --- */
.vt-jeu{flex:none;display:flex;flex-direction:column;margin-top:clamp(10px,1.9vh,24px)}
.vt[data-phase="resultat"] .vt-jeu{display:none}
.vt-barre{display:flex;align-items:center;gap:11px}
.vt-lab{
  flex:none;font-family:var(--font-tech);font-size:9.5px;letter-spacing:.3em;text-transform:uppercase;
  color:rgba(226,132,140,.8);white-space:nowrap;
}
.vt-note{
  flex:none;font-family:var(--font-tech);font-size:9px;letter-spacing:.24em;text-transform:uppercase;
  color:var(--parchment-mute);white-space:nowrap;
}

/* --- les options : rien d’autre que le numéro et la phrase ---
   Cet écran est le seul du jeu où l’on n’annonce ni jet, ni cote, ni
   gain avant le clic. Le bandeau le dit en toutes lettres, et c’est le
   sujet même de la scène : personne, ce matin-là, ne sait ce qu’il
   signe. Tout ressort après, entier, dans « Ce que ça pose ». */
.vt-choix-liste{
  display:flex;flex-direction:column;gap:clamp(7px,1.3vh,14px);
  margin-top:clamp(8px,1.6vh,18px);
}
.vt-choix{
  position:relative;display:flex;align-items:center;width:100%;text-align:left;
  gap:clamp(14px,1.7vw,22px);cursor:pointer;border-radius:0;
  padding:clamp(10px,1.6vh,17px) clamp(16px,1.8vw,24px);
  border:1px solid rgba(140,128,220,.26);
  background:linear-gradient(165deg, rgba(30,20,60,.6), rgba(11,7,28,.74));
  animation:rise .8s var(--ease-out) both;
  transition:background .2s, border-color .2s, transform .2s;
}
.vt-choix:hover,.vt-choix:focus-visible{
  background:linear-gradient(165deg, rgba(56,30,84,.76), rgba(14,9,34,.84));
  border-color:rgba(226,132,140,.55);transform:translateX(5px);outline:none;
}
.vt-num{
  flex:none;width:28px;height:28px;display:flex;align-items:center;justify-content:center;
  border:1px solid rgba(230,200,119,.4);
  font-family:var(--font-tech);font-size:11px;letter-spacing:.06em;color:var(--gold);
}
.vt-choix-txt{
  flex:1;min-width:0;font-family:var(--font-body);
  font-size:clamp(16px,1.45vw,21px);line-height:1.35;
  color:rgba(240,236,252,.9);text-wrap:pretty;
}

/* --- le résultat : deux colonnes, et il n’existe pas avant le choix --- */
.vt-res{
  display:none;margin-top:clamp(10px,1.9vh,24px);
  grid-template-columns:repeat(auto-fit, minmax(min(100%,300px), 1fr));
  gap:clamp(14px,2.2vw,34px);align-items:start;
}
.vt[data-phase="resultat"] .vt-res{display:grid}
.vt-res-dit,.vt-res-pose{min-width:0;display:flex;flex-direction:column}
.vt-res-tete{display:flex;align-items:center;gap:clamp(13px,1.8vw,24px);flex-wrap:wrap}
.vt-res-sceau{
  flex:none;width:clamp(58px,5.8vw,78px);height:clamp(58px,5.8vw,78px);
  display:flex;align-items:center;justify-content:center;
  border:1px solid var(--vt-ton-statut);
  background:linear-gradient(160deg, var(--vt-fond-statut, rgba(28,22,58,.6)), rgba(9,7,28,.85));
  box-shadow:0 0 38px -16px var(--vt-ton-statut);
  animation:vtSceau .6s var(--ease-out) both;
}
.vt-res-mots{flex:1 1 180px;min-width:160px;display:flex;flex-direction:column;gap:6px}
.vt-res-lab{
  font-family:var(--font-tech);font-size:9.5px;letter-spacing:.3em;text-transform:uppercase;
  color:var(--vt-ton-statut);
}
.vt-res-titre{
  font-family:var(--font-title);font-weight:600;font-size:clamp(19px,2vw,28px);
  line-height:1.1;color:var(--gold-pale);
}
.vt-res-txt{display:flex;flex-direction:column;gap:clamp(6px,1.1vh,12px);margin-top:clamp(8px,1.5vh,16px)}
.vt-res-txt p{
  margin:0;font-family:var(--font-body);font-size:clamp(15px,1.35vw,19px);line-height:1.6;
  color:rgba(226,220,245,.84);text-wrap:pretty;animation:rise .8s var(--ease-out) .1s both;
}

/* Les trois poids de conséquence gardent leur forme exacte : cette
   colonne les héberge, elle ne les remplace pas. Seul l’or de leur
   en-tête passe au rose, pour rester dans la couleur du matin. */
.vt-res-pose .fx-bloc{margin-top:0;padding-top:0;border-top:0}
.vt-res-pose .fx-entete .u-tech-or{color:rgba(226,132,140,.85)}
.vt-res-pose .fx-entete .u-filet{
  background:linear-gradient(90deg, rgba(212,101,124,.3), rgba(212,101,124,0));
}

/* --- le bouton d’or, et son reflet qui passe --- */
.vt-suite{
  position:relative;overflow:hidden;cursor:pointer;text-align:center;border-radius:0;
  margin-top:clamp(10px,1.9vh,22px);
  padding:clamp(12px,1.9vh,19px) clamp(18px,2.6vw,38px);
  color:var(--or-encre);border:1px solid var(--gold-warm);background:var(--or-massif);
  box-shadow:0 26px 56px -26px rgba(230,200,119,.95);
  transition:transform .3s, box-shadow .3s;
}
.vt-suite span{
  position:relative;font-family:var(--font-title);font-weight:600;
  font-size:clamp(12px,1.15vw,16px);letter-spacing:.3em;text-indent:.3em;text-transform:uppercase;
}
.vt-suite:hover{transform:translateY(-2px);box-shadow:0 32px 66px -24px rgba(230,200,119,1)}
.vt-lustre{
  position:absolute;top:0;bottom:0;width:80px;pointer-events:none;
  background:linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,.4), rgba(255,255,255,0));
  animation:shimmer 5s ease-in-out infinite;
}

/* Le seuil est haut : quatre paragraphes, un bandeau et quatre options
   ne tiennent pas en 768 aux mesures pleines. */
@media(max-height:900px){
  .vt{--vt-air:clamp(7px,1.2vh,15px)}
  .vt-titre{font-size:clamp(21px,2.4vw,34px)}
  .vt-recit{gap:clamp(4px,.9vh,10px)}
  .vt-recit p{font-size:clamp(14.5px,1.15vw,17.5px);line-height:1.48}
  .vt-verdict{padding:clamp(6px,1.1vh,12px) clamp(14px,1.6vw,22px)}
  .vt-choix-liste{gap:clamp(6px,1.1vh,12px)}
  .vt-verdict-mot{font-size:clamp(16px,1.45vw,20px)}
  .vt-choix-txt{font-size:clamp(15px,1.2vw,18px)}
  .vt-num{width:26px;height:26px}
  .vt-res-sceau{width:clamp(50px,4.8vw,64px);height:clamp(50px,4.8vw,64px)}
  .vt-res-titre{font-size:clamp(17px,1.8vw,24px)}
  .vt-res-txt p{font-size:clamp(14.5px,1.15vw,17px);line-height:1.48}
}
/* En 768 de haut, quatre paragraphes, un bandeau et quatre options ne
   tiennent qu’en resserrant aussi les intervalles, pas seulement les
   corps de texte. La matinée doit se lire d’un coup d'œil : c’est le
   dernier écran de la scolarité, il ne se fait pas défiler. */
@media(max-height:780px){
  .vt{--vt-air:clamp(6px,1vh,12px)}
  .vt-titre{font-size:clamp(20px,2.1vw,29px)}
  .vt-recit{gap:4px;margin-top:8px}
  .vt-recit p{font-size:14.5px;line-height:1.42}
  .vt-tete{margin-top:5px}
  .vt-verdict{margin-top:9px;padding:6px clamp(12px,1.4vw,18px)}
  .vt-jeu{margin-top:9px}
  .vt-choix-liste{gap:6px;margin-top:8px}
  .vt-choix{padding:8px clamp(14px,1.6vw,20px)}
  .vt-choix-txt{font-size:15.5px}
  .vt-res{margin-top:9px}
  .vt-res-txt{margin-top:8px;gap:5px}
  .vt-suite{margin-top:10px;padding:11px clamp(16px,2.2vw,30px)}
  .vt-marque{width:clamp(120px,12vw,180px)}
}
@media(max-width:1100px){
  .vt-marque{opacity:.7}
  .vt-verdict{gap:10px}
}
@media(max-width:820px){
  .vt-tete{align-items:flex-start}
  .vt-verdict-mot{white-space:normal}
  .vt-note{white-space:normal;text-align:right}
}
@media(prefers-reduced-motion:reduce){
  .vt-braises i,.vt-fumees i,.vt-voile,.vt-marque,.vt-marque-halo,.vt-lustre,
  .vt-sceau,.vt-res-sceau{animation:none}
  .vt-sceau,.vt-res-sceau{opacity:1;transform:none}
}


/* ============================================================================
   51. LE MATIN D’APRÈS : le 2 mai 1998, quand le soleil se lève
   ----------------------------------------------------------------------------
   La nuit a son écran, la défaite a le sien. Le premier matin de la vie
   d’adulte passait encore par la grande scène ordinaire : un en-tête
   chiffré, deux colonnes, et des choix génériques dessous.

   Il a maintenant son dessin, et c’est l’exact envers de la bataille.
   Celle-ci brûle par le bas : une lueur rouge monte du bord inférieur du
   cadre. Ici, la lumière vient d’en haut. Trois rais de soleil traversent
   la carte en biais et oscillent sur douze à vingt secondes, vingt-deux
   poussières montent dedans, douze cendres retombent encore de la nuit,
   et une lueur d’aube respire au bas du cadre sur onze secondes. Le VII
   fantôme reste derrière tout.

   L’or revient partout où la nuit avait mis du rose : sur-titre, filets,
   libellés, chiffres. C’est un matin, pas une veillée.

   Deux zones, et une bascule entre les deux. Tant que `data-phase` vaut
   `choix`, la salle occupe toute la largeur et les gestes s’alignent
   dessous. Quand il passe à `resultat`, les gestes disparaissent et la
   colonne de gauche prend leur place à côté de la salle : ce que tu as
   fait à gauche, qui est là à droite, le bouton d’or au bout. Le décor,
   lui, ne se repose pas : les rais de soleil continuent exactement où ils
   en étaient.
   ============================================================================ */

/* Le fond de l’écran : le chiffre de l’année reste, et la vignette garde
   la mesure de la nuit, pour que le jour sorte du noir. */
#main-panel[data-scene="aube"]::before{
  font-size:min(46vh,420px);color:rgba(230,200,119,.035);
}
#main-panel[data-scene="aube"]::after{
  background:radial-gradient(75% 65% at 50% 45%, rgba(0,0,0,0) 40%, rgba(0,0,0,.5) 100%);
}

/* Toute la respiration de l’écran tient dans une seule mesure, comme sous
   la tente, dans la chambre et dans la nuit. Serrer le matin sur un écran
   court, c’est changer cette mesure, et rien d’autre. */
.au{
  --au-air:clamp(8px,1.4vh,19px);
  position:relative;width:100%;max-width:1240px;margin:0 auto;overflow:hidden;
  display:flex;flex-direction:column;
  border:1px solid rgba(230,200,119,.2);
  background:var(--carte-fond);
  box-shadow:var(--e4), var(--inset-top);
  animation:rise .7s var(--ease-out) both;
}
.au > .grain{opacity:.5}

/* --- la lueur d’aube : elle monte du bas du cadre et respire --- */
.au-lueur{
  position:absolute;left:0;right:0;bottom:0;height:64%;pointer-events:none;z-index:0;
  background:linear-gradient(0deg, rgba(244,200,130,.2), rgba(244,200,130,0) 72%);
  animation:auAube 11s ease-in-out infinite alternate;
}
@keyframes auAube{
  0%{opacity:.5;transform:translateY(14px)}
  100%{opacity:1;transform:translateY(0)}
}

/* --- trois rais de soleil, et la poussière qui monte dedans --- */
.au-rais,.au-cendres{position:absolute;inset:0;pointer-events:none;z-index:0;overflow:hidden}
.au-rai{
  position:absolute;top:-12%;bottom:-12%;transform-origin:50% 0;filter:blur(9px);
  background:linear-gradient(180deg, rgba(250,215,150,.22), rgba(250,215,150,0) 78%);
  animation-name:auRai;animation-timing-function:ease-in-out;animation-iteration-count:infinite;
}
@keyframes auRai{
  0%,100%{opacity:.16;transform:translateX(0) skewX(-14deg)}
  50%{opacity:.3;transform:translateX(16px) skewX(-11deg)}
}
.au-poussiere{
  position:absolute;width:2px;height:2px;border-radius:50%;background:rgba(250,230,190,.7);
  animation-name:auPoussiere;animation-timing-function:linear;animation-iteration-count:infinite;
}
@keyframes auPoussiere{
  0%{transform:translate(0,0);opacity:0}
  20%{opacity:.7}
  100%{transform:translate(24px,-40px);opacity:0}
}
/* Douze cendres tombent encore : la nuit ne s’arrête pas au lever du jour. */
.au-cendre{
  position:absolute;top:-6px;width:3px;height:3px;border-radius:50%;
  background:rgba(214,206,226,.26);
  animation-name:auCendre;animation-timing-function:linear;animation-iteration-count:infinite;
}
@keyframes auCendre{
  0%{transform:translate(0,0);opacity:0}
  15%{opacity:.5}
  100%{transform:translate(-30px,74vh);opacity:0}
}

.au-corps{
  position:relative;z-index:2;display:flex;flex-direction:column;
  padding:calc(var(--au-air) * 1.4) clamp(22px,4vw,64px) calc(var(--au-air) * 1.3);
}

/* --- le sur-titre : or, et la mention à droite --- */
.au-kicker{display:flex;align-items:center;gap:13px;flex:none;animation:rise .8s var(--ease-out) both}
.au-kicker > i{flex:none;width:26px;height:1px;background:rgba(244,210,150,.75)}
.au-kicker > span:not(.au-filet):not(.au-mention){
  font-family:var(--font-tech);font-size:10px;letter-spacing:.34em;text-transform:uppercase;
  color:rgba(244,210,150,.8);white-space:nowrap;
}
.au-filet{flex:1;height:1px;min-width:12px;
  background:linear-gradient(90deg,rgba(244,210,150,.3),rgba(244,210,150,0))}
.au-mention{
  flex:none;font-family:var(--font-tech);font-size:9px;letter-spacing:.26em;text-transform:uppercase;
  color:var(--parchment-mute);white-space:nowrap;transition:color .5s;
}
.au[data-phase="resultat"] .au-mention{color:rgba(240,224,170,.8)}

/* --- le titre, et les trois chiffres qui le suivent --- */
.au-tete{
  flex:none;display:flex;align-items:flex-end;justify-content:space-between;
  gap:clamp(14px,2.4vw,34px);flex-wrap:wrap;margin-top:calc(var(--au-air) * .6);
}
.au-titre{
  margin:0;font-family:var(--font-title);font-weight:600;
  font-size:clamp(22px,3vw,42px);line-height:1;color:var(--gold-pale);
  text-shadow:0 0 60px rgba(244,210,150,.4);
  animation:rise .9s var(--ease-out) .1s both;
}
.au-chiffres{display:flex;align-items:flex-end;gap:clamp(11px,1.4vw,18px);flex-wrap:wrap}
.au-chiffre{
  display:flex;flex-direction:column;gap:3px;cursor:default;
  animation:rise 1s var(--ease-out) both;
}
.au-chiffre b{
  font-family:var(--font-title);font-weight:600;font-size:clamp(15px,1.5vw,21px);
  line-height:1;color:var(--ton);white-space:nowrap;
}
.au-chiffre span{
  font-family:var(--font-tech);font-size:8.5px;letter-spacing:.22em;text-transform:uppercase;
  color:var(--parchment-mute);white-space:nowrap;
}

.au-texte{
  flex:none;max-width:84ch;margin:calc(var(--au-air) * .8) 0 0;
  font-family:var(--font-body);font-size:clamp(15px,1.35vw,20px);line-height:1.6;
  color:rgba(226,220,245,.84);text-wrap:pretty;
  animation:rise 1.1s var(--ease-out) .25s both;
}

/* --- les deux colonnes ---
   Une seule est visible tant qu’aucun geste n’est fait : la salle prend
   alors toute la largeur, sans qu’on ait à le lui dire. */
.au-colonnes{
  flex:none;display:grid;grid-template-columns:repeat(auto-fit, minmax(min(100%,210px),1fr));
  gap:clamp(10px,2vw,32px);align-items:start;margin-top:var(--au-air);
}
.au-res,.au-salle{min-width:0;display:flex;flex-direction:column}
.au[data-phase="choix"] .au-res{display:none}
.au[data-phase="resultat"] .au-jeu{display:none}
/* Une fois le geste posé, la colonne de gauche porte le récit ET les
   trois poids de conséquence : elle prend donc les deux tiers. Les
   variations se rangent en rangée, et une rangée a besoin de largeur,
   sinon chaque chiffre se retrouve seul sur sa ligne. */
.au[data-phase="resultat"] .au-colonnes{
  grid-template-columns:minmax(0,1.62fr) minmax(0,1fr);
}

/* --- le petit bandeau qui coiffe chaque zone --- */
.au-barre{display:flex;align-items:center;gap:11px}
.au-lab{
  font-family:var(--font-tech);font-size:9.5px;letter-spacing:.3em;text-transform:uppercase;
  color:rgba(244,210,150,.78);white-space:nowrap;
}
.au-barre .au-filet{background:linear-gradient(90deg,rgba(244,210,150,.28),rgba(244,210,150,0))}

/* --- la salle : qui est là, qui manque --- */
.au-gens{
  display:flex;flex-direction:column;margin-top:clamp(6px,1.3vh,13px);
  border-top:1px solid var(--line);
}
.au-gen{
  display:flex;align-items:center;gap:11px;cursor:default;
  padding:clamp(2px,.6vh,7px) 9px;
  border-bottom:1px solid rgba(140,128,220,.11);
  animation:rise .7s var(--ease-out) both;transition:background .2s;
}
.au-gen:hover{background:rgba(244,210,150,.05)}
.au-gen-badge{
  flex:none;width:24px;height:24px;display:flex;align-items:center;justify-content:center;
  border:1px solid var(--ton-trait);
  background:linear-gradient(180deg, var(--ton-fond), rgba(10,8,30,.85));
}
.au-gen-badge .cb-ecu{width:16px;height:16px}
.au-gen-nom{
  flex:1;min-width:0;font-family:var(--font-body);font-size:clamp(14px,1.3vw,19px);
  color:rgba(240,236,252,.9);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.au-gen-etat{
  flex:none;font-family:var(--font-tech);font-size:8.5px;letter-spacing:.2em;text-transform:uppercase;
  color:rgba(143,214,165,.75);white-space:nowrap;transition:color .5s;
}
/* Celui qui n’est plus là garde sa ligne, en retrait, jamais barrée. */
.au-gen-loin .au-gen-nom{color:rgba(186,181,206,.6)}
.au-gen-loin .au-gen-etat{color:rgba(212,101,124,.75)}
.au-gen-loin .au-gen-badge{opacity:.7}
/* Un nom qu’on vient d’apprendre : la ligne s’éclaire une fois, puis
   redevient une ligne comme les autres. */
.au-gen-su{animation:auSu 1.4s var(--ease-out) both}
@keyframes auSu{
  0%{background:rgba(212,101,124,.16)}
  100%{background:transparent}
}
/* La dernière ligne : trois cents personnes qu’on ne va pas nommer. Elle
   garde la forme d’une ligne de salle, sans écusson et sans infobulle,
   pour qu’on la lise comme une fin de liste et non comme quelqu’un. */
.au-gen-plus{cursor:default;padding-left:44px}
.au-gen-plus .au-gen-nom{font-style:italic;color:rgba(186,181,206,.5)}
.au-gen-plus .au-gen-etat{color:rgba(200,190,230,.38)}
.au-gen-plus:hover{background:transparent}
.au-gens-mot{
  margin-top:6px;font-family:var(--font-body);font-size:clamp(13px,1.2vw,17px);
  font-style:italic;color:var(--parchment-mute);text-wrap:pretty;
}

/* --- les gestes --- */
.au-jeu{flex:none;display:flex;flex-direction:column;margin-top:var(--au-air)}
.au-choix-liste{
  display:flex;flex-direction:column;gap:clamp(7px,1.2vh,13px);margin-top:clamp(8px,1.5vh,16px);
}
.au-choix{
  cursor:pointer;text-align:left;border-radius:0;
  display:flex;align-items:center;gap:clamp(13px,1.6vw,20px);
  padding:clamp(10px,1.6vh,16px) clamp(15px,1.7vw,22px);
  border:1px solid var(--line-2);
  background:linear-gradient(165deg, rgba(32,26,78,.55), rgba(11,9,32,.72));
  animation:rise .8s var(--ease-out) both;
  transition:background .2s, border-color .2s, transform .2s;
}
.au-choix:hover{
  background:linear-gradient(165deg, rgba(50,40,112,.72), rgba(14,11,38,.82));
  border-color:rgba(244,210,150,.55);transform:translateX(5px);
}
.au-num{
  flex:none;width:28px;height:28px;display:flex;align-items:center;justify-content:center;
  border:1px solid var(--gold-dim);
  font-family:var(--font-tech);font-size:11px;color:var(--gold);
}
.au-choix-txt{
  flex:1;min-width:0;font-family:var(--font-body);font-size:clamp(15px,1.4vw,20px);
  line-height:1.35;color:rgba(240,236,252,.9);text-wrap:pretty;
}
/* Rien n’est annoncé avant le clic sur cet écran : on ne va pas consoler
   des gens pour quatre points de charisme. Les conséquences s’affichent
   en entier une fois le geste posé, et aucune ne manque à l’appel. */

/* --- ce que le matin a fait de toi --- */
.au-res-titre{
  margin-top:clamp(6px,1.3vh,14px);
  font-family:var(--font-title);font-weight:600;font-size:clamp(18px,2vw,27px);
  line-height:1.12;color:var(--gold-pale);
  animation:rise .7s var(--ease-out) both;
}
.au-res-txt{display:flex;flex-direction:column;gap:clamp(4px,.85vh,10px);margin-top:clamp(5px,1.1vh,13px)}
.au-res-txt p{
  margin:0;max-width:58ch;font-family:var(--font-body);font-size:clamp(15px,1.4vw,20px);
  line-height:1.6;color:rgba(226,220,245,.84);text-wrap:pretty;
  animation:rise .8s var(--ease-out) .1s both;
}
/* Les trois poids de conséquence gardent leur forme exacte : cette
   colonne les héberge, elle ne les remplace pas. Rien n’est retiré,
   pas même le segment gagné sur la jauge ; les variations se serrent
   simplement à deux par rangée, comme sur le panneau de la Coupe, pour
   qu’une colonne de six cents pixels n’en mette pas une par ligne. */
.au-res-fx .fx-bloc{margin-top:clamp(6px,1.2vh,14px);padding-top:0;border-top:0}
.au-res-fx .fx-rangee{
  grid-template-columns:repeat(auto-fit, minmax(min(100%,200px),1fr));
  gap:clamp(6px,1vh,11px) clamp(12px,1.2vw,20px);
}
.au-res-fx .fx1-nom{font-size:17px}
.au-res-fx .fx1-lecture{font-size:10px}

/* --- le bouton d’or, et son reflet qui passe --- */
.au-suite{
  position:relative;overflow:hidden;cursor:pointer;text-align:center;border-radius:0;
  margin-top:clamp(8px,1.4vh,18px);
  padding:clamp(10px,1.6vh,17px) clamp(18px,2.6vw,38px);
  color:var(--or-encre);border:1px solid var(--gold-warm);background:var(--or-massif);
  box-shadow:0 26px 56px -26px rgba(230,200,119,.95);
  transition:transform .3s, box-shadow .3s;
}
.au-suite span{
  position:relative;font-family:var(--font-title);font-weight:600;
  font-size:clamp(12px,1.15vw,16px);letter-spacing:.3em;text-indent:.3em;text-transform:uppercase;
}
.au-suite:hover{transform:translateY(-2px);box-shadow:0 32px 66px -24px rgba(230,200,119,1)}
.au-lustre{
  position:absolute;top:0;bottom:0;width:80px;pointer-events:none;
  background:linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,.4), rgba(255,255,255,0));
  animation:shimmer 5s ease-in-out infinite;
}

/* Six lignes de salle, un paragraphe et cinq gestes ne tiennent pas en
   768 aux mesures pleines : c’est la mesure d’air qui cède, jamais une
   ligne d’information. */
@media(max-height:900px){
  .au{--au-air:clamp(6px,1.1vh,15px)}
  .au-titre{font-size:clamp(21px,2.4vw,34px)}
  .au-texte{font-size:clamp(14.5px,1.15vw,17.5px);line-height:1.48}
  .au-choix-txt{font-size:clamp(15px,1.2vw,18px)}
  .au-choix{padding:10px clamp(15px,1.7vw,22px)}
  .au-choix-liste{gap:9px;margin-top:11px}
  .au-num{width:26px;height:26px}
  .au-res-titre{font-size:clamp(17px,1.8vw,24px)}
  .au-res-txt p{font-size:clamp(14.5px,1.15vw,17px);line-height:1.48}
}
@media(max-height:780px){
  .au{--au-air:clamp(5px,.9vh,12px)}
  .au-titre{font-size:clamp(20px,2.1vw,29px)}
  .au-texte{font-size:14px;line-height:1.4}
  .au-choix-txt{font-size:15.5px}
  .au-choix{padding:7px clamp(14px,1.6vw,20px)}
  .au-choix-liste{gap:6px;margin-top:8px}
  .au-gen{padding:2px 8px}
  .au-res-titre{font-size:18px}
  .au-res-txt p{font-size:14.5px;line-height:1.44}
  .au-res-fx .fx1-nom{font-size:15.5px}
  .au-suite{margin-top:8px;padding:9px clamp(16px,2.2vw,30px)}
}
@media(max-width:1100px){
  .au-gain{display:none}
}
@media(max-width:820px){
  .au-tete{align-items:flex-start}
  .au-chiffres{gap:12px}
}
@media(prefers-reduced-motion:reduce){
  .au-rai,.au-poussiere,.au-cendre,.au-lueur,.au-lustre{animation:none}
  .au-gen,.au-choix,.au-chiffre,.au-res-titre,.au-res-txt p{animation:none}
}


/* ============================================================================
   52. LE PROCÈS : une salle circulaire, un faisceau, et un seul mot
   ----------------------------------------------------------------------------
   La bataille brûle par le bas, le matin d’après s’éclaire par le haut,
   la victoire des Ténèbres fume. Celui-ci ne fait rien de tout ça : c’est
   le plus froid des écrans du jeu, et il doit l’être.

   Un seul faisceau blanc tombe de la voûte, en cône, depuis un point situé
   au-dessus du cadre. Il ne bouge pas : il respire, sur huit secondes,
   entre 42 et 66 pour cent d’opacité. Seize poussières flottent dedans,
   remontent de vingt-quatre pixels et disparaissent. Aucune flamme, aucune
   braise, aucune cendre. Le X fantôme derrière tout est le numéro de la
   salle d’audience, et sous le régime il devient IX.

   Trois colonnes, et une bascule entre deux états. Tant que `data-phase`
   vaut `plaidoyer`, la grille n’a que deux colonnes remplies : ce que le
   greffier lit à gauche, qui siège à droite, et les plaidoyers sur toute
   la largeur en dessous. Quand il passe à `verdict`, les plaidoyers
   disparaissent, le verdict prend la première colonne, et les trois se
   partagent la largeur. Le faisceau, lui, continue exactement où il en
   était : reconstruire le remettrait à zéro pendant qu’on prononce une
   peine.

   Deux couleurs, deux emplois, jamais mélangés : l’or pour ce que la cour
   te demande et pour ce qu’elle décide (le verdict, la question, le
   bouton), le lavande pour ce que le greffe expose (les chefs, la salle,
   les libellés techniques). Le rose ne sert qu’à la gravité : un chef
   impardonnable, un dossier chargé, une condamnation.

   Le cachet du verdict est la seule chose qui tourne dans tout le jeu :
   sept degrés, posés en 0,55 seconde avec un rebond, comme un tampon
   qu’on abat. `data-rang` teinte la carte selon ce qui a été prononcé.
   ============================================================================ */

/* Le fond de l’écran : le numéro de la salle en chiffre fantôme, et une
   vignette plus serrée qu’ailleurs, pour que le faisceau sorte du noir. */
#main-panel[data-scene="proces"]::before{
  font-size:min(42vh,380px);color:rgba(150,132,196,.035);
}
#main-panel[data-scene="proces"]::after{
  background:radial-gradient(70% 58% at 50% 38%, rgba(0,0,0,0) 32%, rgba(0,0,0,.66) 100%);
}

/* Toute la respiration de l’écran tient dans une seule mesure, comme sous
   la tente, dans la chambre et dans la nuit. Serrer l’audience sur un
   écran court, c’est changer cette mesure, et rien d’autre. */
.pg{
  --pg-air:clamp(8px,1.6vh,22px);
  --pg-lavande:rgba(198,186,236,.8);
  --pg-trait:rgba(140,128,220,.14);
  --pg-rose:#d4657c;
  position:relative;width:100%;max-width:1240px;margin:0 auto;overflow:hidden;
  display:flex;flex-direction:column;
  border:1px solid rgba(150,132,196,.26);
  background:linear-gradient(180deg, rgba(26,20,52,.8) 0%, rgba(7,6,22,.95) 100%);
  box-shadow:var(--e4), var(--inset-top);
  animation:rise .7s var(--ease-out) both;
}
.pg > .grain{opacity:.6}

/* --- le faisceau : il tombe de la voûte et il respire --- */
.pg-faisceau{
  position:absolute;left:50%;top:0;width:min(74%,880px);height:56%;
  transform:translateX(-50%);pointer-events:none;z-index:0;filter:blur(9px);
  background:conic-gradient(from 158deg at 50% -12%,
    rgba(0,0,0,0) 0deg, rgba(212,226,244,.16) 11deg, rgba(0,0,0,0) 22deg);
  animation:pgFaisceau 8s ease-in-out infinite;
}
@keyframes pgFaisceau{0%,100%{opacity:.42}50%{opacity:.66}}

/* --- seize poussières, et rien d’autre qui bouge dans la salle --- */
.pg-poussieres{position:absolute;inset:0;pointer-events:none;z-index:0;overflow:hidden}
.pg-poussieres i{
  position:absolute;width:2px;height:2px;border-radius:50%;
  background:rgba(226,214,246,.75);
  animation-name:pgPoussiere;animation-timing-function:linear;animation-iteration-count:infinite;
}
@keyframes pgPoussiere{
  0%{transform:translate(0,0);opacity:0}
  20%{opacity:.7}
  100%{transform:translate(24px,-40px);opacity:0}
}

.pg-corps{
  position:relative;z-index:2;display:flex;flex-direction:column;
  padding:calc(var(--pg-air) * 1.4) clamp(22px,4vw,64px) calc(var(--pg-air) * 1.3);
}

/* --- le sur-titre : lavande, et la mention de régime à droite --- */
.pg-kicker{flex:none;display:flex;align-items:center;gap:13px;animation:rise .8s var(--ease-out) both}
.pg-kicker > i{flex:none;width:26px;height:1px;background:rgba(178,162,224,.75)}
.pg-kicker > span:not(.pg-filet):not(.pg-mention){
  font-family:var(--font-tech);font-size:10px;letter-spacing:.34em;text-transform:uppercase;
  color:rgba(198,186,236,.85);white-space:nowrap;
}
.pg-filet{
  flex:1;min-width:12px;height:1px;
  background:linear-gradient(90deg, rgba(178,162,224,.3), rgba(178,162,224,0));
}
.pg-filet-or{background:linear-gradient(90deg, rgba(230,200,119,.3), rgba(230,200,119,0))}
.pg-mention{
  flex:none;font-family:var(--font-tech);font-size:9px;letter-spacing:.26em;text-transform:uppercase;
  color:var(--parchment-mute);white-space:nowrap;transition:color .5s;
}
.pg[data-phase="verdict"] .pg-mention{color:rgba(240,224,170,.8)}

/* --- le titre, et les trois chiffres qui le suivent --- */
.pg-tete{
  flex:none;display:flex;align-items:flex-end;justify-content:space-between;
  gap:clamp(14px,2.4vw,34px);flex-wrap:wrap;margin-top:calc(var(--pg-air) * .55);
}
.pg-titre{
  margin:0;font-family:var(--font-title);font-weight:600;
  font-size:clamp(22px,3vw,42px);line-height:1;color:var(--gold-pale);
  text-shadow:0 0 60px rgba(230,200,119,.45);
  animation:rise .9s var(--ease-out) .1s both;
}
.pg-faits{display:flex;align-items:flex-end;gap:clamp(11px,1.4vw,18px);flex-wrap:wrap}
.pg-fait{display:flex;flex-direction:column;gap:3px;cursor:default;animation:rise 1s var(--ease-out) both}
.pg-fait b{
  font-family:var(--font-title);font-weight:600;font-size:clamp(15px,1.5vw,21px);
  line-height:1;color:var(--ton);white-space:nowrap;
}
.pg-fait span{
  font-family:var(--font-tech);font-size:8.5px;letter-spacing:.22em;text-transform:uppercase;
  color:var(--parchment-mute);white-space:nowrap;
}

.pg-texte{
  flex:none;max-width:84ch;margin:calc(var(--pg-air) * .75) 0 0;
  font-family:var(--font-body);font-size:clamp(15px,1.35vw,20px);line-height:1.6;
  color:rgba(224,220,244,.82);text-wrap:pretty;
  animation:rise 1.1s var(--ease-out) .25s both;
}

/* --- les trois colonnes ---
   Le verdict n’existe pas avant le plaidoyer : la grille se réduit alors
   d’elle-même à deux colonnes, sans qu’on ait à le lui dire. */
.pg-colonnes{
  flex:none;display:grid;grid-template-columns:repeat(auto-fit, minmax(min(100%,260px),1fr));
  gap:clamp(10px,2vw,32px);align-items:start;margin-top:calc(var(--pg-air) * .8);
}
.pg-res,.pg-greffe,.pg-salle{min-width:0;display:flex;flex-direction:column}
.pg[data-phase="plaidoyer"] .pg-res{display:none}
.pg[data-phase="verdict"] .pg-jeu{display:none}

/* --- le petit bandeau qui coiffe chaque colonne --- */
.pg-barre{display:flex;align-items:center;gap:11px}
.pg-lab{
  flex:none;font-family:var(--font-tech);font-size:9.5px;letter-spacing:.3em;text-transform:uppercase;
  color:var(--pg-lavande);white-space:nowrap;
}
.pg-lab-or{color:rgba(230,200,119,.8)}
.pg-note{
  flex:none;font-family:var(--font-tech);font-size:9px;letter-spacing:.24em;text-transform:uppercase;
  color:var(--parchment-mute);white-space:nowrap;
}
.pg-voix{
  flex:none;font-family:var(--font-tech);font-size:9px;letter-spacing:.24em;text-transform:uppercase;
  white-space:nowrap;
}

/* --- ce que le greffier lit : un chef, sa gravité, son nombre ---
   Le filet vertical rouge ne se pose que sur un chef de gravité quatre :
   c’est le seul endroit de la colonne où l'œil doit s’arrêter seul. */
.pg-chefs{
  display:flex;flex-direction:column;margin-top:clamp(6px,1.3vh,13px);
  border-top:1px solid var(--pg-trait);
}
.pg-chef{
  display:flex;align-items:center;gap:11px;cursor:default;
  padding:clamp(2px,.6vh,7px) 9px;
  border-bottom:1px solid rgba(140,128,220,.11);
  border-left:2px solid transparent;
  animation:rise .7s var(--ease-out) both;transition:background .2s;
}
.pg-chef-lourd{border-left-color:var(--pg-rose)}
.pg-chef:hover{background:rgba(178,162,224,.07)}
.pg-chef-nom{
  flex:1;min-width:0;font-family:var(--font-body);font-size:clamp(14px,1.3vw,19px);
  color:rgba(232,228,248,.86);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.pg-chef-lourd .pg-chef-nom{color:#f3dfe3}
/* Quatre crans debout, jamais une barre continue : la gravité se compte. */
.pg-pips{flex:none;display:flex;align-items:center;gap:3px}
.pg-pips i{width:5px;height:12px;background:rgba(140,128,220,.16)}
.pg-pips i.pg-pip-on{background:var(--ton)}
.pg-chef-n{
  flex:none;min-width:22px;text-align:right;
  font-family:var(--font-title);font-weight:600;font-size:15px;color:var(--ton);
}

/* --- le niveau de dossier : seize crans, et un mot dessous --- */
.pg-dossier{display:flex;flex-direction:column;gap:6px;margin-top:clamp(7px,1.4vh,14px);cursor:default}
.pg-dossier-tete{display:flex;align-items:baseline;justify-content:space-between;gap:12px}
.pg-lab-fin{
  font-family:var(--font-tech);font-size:9px;letter-spacing:.26em;text-transform:uppercase;
  color:rgba(198,186,236,.7);white-space:nowrap;
}
.pg-dossier-val{
  font-family:var(--font-title);font-weight:600;font-size:15px;color:var(--ton);white-space:nowrap;
}
.pg-crans{display:flex;gap:3px}
.pg-crans i{
  flex:1;height:5px;background:rgba(140,128,220,.14);
  transform-origin:left center;
}
.pg-crans i.pg-cran-on{background:var(--ton);animation:pgCran .4s var(--ease-out) both}
@keyframes pgCran{from{transform:scaleX(0);opacity:.2}to{transform:scaleX(1);opacity:1}}
.pg-dossier-mot{
  font-family:var(--font-body);font-size:clamp(13px,1.2vw,17px);font-style:italic;
  color:var(--parchment-mute);text-wrap:pretty;
}

/* --- qui siège : un écusson dessiné, un nom, un état --- */
.pg-gens{
  display:flex;flex-direction:column;margin-top:clamp(6px,1.3vh,13px);
  border-top:1px solid var(--pg-trait);
}
.pg-gen{
  display:flex;align-items:center;gap:11px;cursor:default;
  padding:clamp(2px,.6vh,7px) 9px;
  border-bottom:1px solid rgba(140,128,220,.11);
  animation:rise .7s var(--ease-out) both;transition:background .2s;
}
.pg-gen:hover{background:rgba(178,162,224,.07)}
.pg-gen-badge{
  flex:none;width:24px;height:24px;display:flex;align-items:center;justify-content:center;
  border:1px solid var(--ton-trait);
  background:linear-gradient(180deg, var(--ton-fond), rgba(10,8,30,.85));
}
.pg-gen-nom{
  flex:1;min-width:0;font-family:var(--font-body);font-size:clamp(14px,1.3vw,19px);
  color:rgba(238,234,252,.88);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.pg-gen-loin .pg-gen-nom{color:rgba(198,186,236,.7)}
.pg-gen-etat{
  flex:none;font-family:var(--font-tech);font-size:8.5px;letter-spacing:.2em;text-transform:uppercase;
  color:rgba(230,200,119,.7);white-space:nowrap;
}
.pg-gen-loin .pg-gen-etat{color:rgba(212,101,124,.7)}
.pg-gens-mot{
  margin-top:6px;font-family:var(--font-body);font-size:clamp(13px,1.2vw,17px);font-style:italic;
  color:var(--parchment-mute);text-wrap:pretty;
}

/* --- les plaidoyers ---
   La maquette laisse la ligne nue. Le jeu, lui, n’a pas le droit de
   cacher une cote : elle tient à droite, en Jost minuscule, et le
   troisième niveau donne le détail des trois issues. */
.pg-jeu{flex:none;display:flex;flex-direction:column;margin-top:calc(var(--pg-air) * .85)}
.pg-choix-liste{
  display:flex;flex-direction:column;gap:clamp(7px,1.2vh,13px);
  margin-top:clamp(8px,1.5vh,16px);
}
.pg-choix{
  position:relative;display:flex;align-items:center;width:100%;text-align:left;
  gap:clamp(13px,1.6vw,20px);cursor:pointer;border-radius:0;
  padding:clamp(11px,1.7vh,17px) clamp(15px,1.7vw,22px);
  border:1px solid rgba(140,128,220,.26);
  background:linear-gradient(165deg, rgba(30,24,60,.62), rgba(9,8,26,.78));
  animation:rise .8s var(--ease-out) both;
  transition:background .2s, border-color .2s, transform .2s;
}
.pg-choix:hover,.pg-choix:focus-visible{
  background:linear-gradient(165deg, rgba(48,38,92,.8), rgba(12,10,32,.88));
  border-color:rgba(230,200,119,.5);transform:translateX(5px);outline:none;
}
.pg-num{
  flex:none;width:28px;height:28px;display:flex;align-items:center;justify-content:center;
  border:1px solid rgba(230,200,119,.4);
  font-family:var(--font-tech);font-size:11px;letter-spacing:.06em;color:var(--gold);
}
.pg-choix-txt{
  flex:1;min-width:0;font-family:var(--font-body);font-size:clamp(15px,1.4vw,20px);
  line-height:1.3;color:rgba(238,234,252,.92);text-wrap:pretty;
}

/* --- le verdict : il n’existe pas avant le plaidoyer --- */
.pg-res-titre{
  position:relative;margin-top:clamp(6px,1.3vh,14px);padding-right:96px;
  font-family:var(--font-title);font-weight:600;font-size:clamp(18px,2vw,27px);
  line-height:1.12;color:var(--gold-pale);
  animation:rise .7s var(--ease-out) both;
}
/* Le cachet : la seule chose qui tourne dans tout le jeu, et elle ne
   tourne qu’une fois, parce qu’on l’abat comme un tampon. */
.pg-cachet{
  position:absolute;right:-4px;top:-14px;padding:5px 11px;
  border:2px solid var(--ton-cachet, #d4657c);
  font-family:var(--font-tech);font-size:10px;letter-spacing:.24em;text-transform:uppercase;
  color:var(--ton-cachet, #d4657c);opacity:.85;
  animation:pgCachet .55s cubic-bezier(.2,1.5,.4,1) .35s both;
}
@keyframes pgCachet{
  0%{opacity:0;transform:scale(1.9) rotate(-13deg)}
  55%{opacity:1;transform:scale(.94) rotate(-7deg)}
  100%{opacity:.85;transform:scale(1) rotate(-7deg)}
}
.pg-res-txt{display:flex;flex-direction:column;gap:clamp(5px,1vh,11px);margin-top:clamp(6px,1.4vh,15px)}
.pg-res-txt p{
  margin:0;max-width:58ch;font-family:var(--font-body);font-size:clamp(15px,1.4vw,20px);
  line-height:1.6;color:rgba(224,220,244,.82);text-wrap:pretty;
  animation:rise .8s var(--ease-out) .1s both;
}
/* --- ce que le greffe inscrit, sur toute la largeur ---
   Les trois poids de conséquence gardent leur forme exacte : cette bande
   les héberge, elle ne les remplace pas. Elle prend la place qu’occupaient
   les plaidoyers, parce que la rangée de variations est faite pour être
   large : dans une colonne de trois cents pixels elle s’empile et pousse
   la scène dehors, en pleine largeur elle tient sur une ligne. */
.pg-pose{display:none;flex-direction:column;margin-top:calc(var(--pg-air) * .85)}
.pg[data-phase="verdict"] .pg-pose{display:flex}
.pg-res-fx .fx-bloc{margin-top:0;padding-top:0;border-top:0}

/* --- le bouton d’or, et son reflet qui passe --- */
.pg-suite{
  position:relative;overflow:hidden;cursor:pointer;text-align:center;border-radius:0;
  align-self:flex-start;min-width:min(340px,100%);
  margin-top:clamp(9px,1.8vh,22px);
  padding:clamp(11px,1.9vh,19px) clamp(18px,2.6vw,38px);
  color:var(--or-encre);border:1px solid var(--gold-warm);background:var(--or-massif);
  box-shadow:0 26px 56px -26px rgba(230,200,119,.9);
  transition:transform .3s, box-shadow .3s;
}
.pg-suite span{
  position:relative;font-family:var(--font-title);font-weight:600;
  font-size:clamp(12px,1.15vw,16px);letter-spacing:.3em;text-indent:.3em;text-transform:uppercase;
}
.pg-suite:hover{transform:translateY(-2px);box-shadow:0 32px 66px -24px rgba(230,200,119,1)}
.pg-lustre{
  position:absolute;top:0;bottom:0;width:80px;pointer-events:none;
  background:linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,.4), rgba(255,255,255,0));
  animation:shimmer 5s ease-in-out infinite;
}

/* Ce qui a été prononcé teinte le cadre, une fois, et discrètement : une
   condamnation ne doit pas repeindre la salle en rouge. */
.pg[data-rang="lourd"]{border-color:rgba(212,101,124,.34)}
.pg[data-rang="leger"]{border-color:rgba(124,179,119,.3)}

/* Cinq lignes de chefs, cinq de salle, un paragraphe et quatre plaidoyers.
   Le bandeau du haut et celui du bas prennent cent trente pixels : la
   scène dispose donc de bien moins que la fenêtre, et les seuils sont
   calés là-dessus, pas sur la hauteur affichée. C’est la mesure d’air qui
   cède, puis les intervalles, jamais une ligne d’information. */
@media(max-height:1100px){
  .pg{--pg-air:clamp(7px,1.3vh,17px)}
  .pg-titre{font-size:clamp(21px,2.6vw,36px)}
  .pg-texte{font-size:clamp(14.5px,1.2vw,18px);line-height:1.5}
  .pg-chef,.pg-gen{padding:clamp(2px,.5vh,6px) 9px}
  .pg-choix{padding:clamp(10px,1.4vh,15px) clamp(15px,1.7vw,22px)}
  .pg-choix-liste{gap:clamp(6px,1vh,11px);margin-top:clamp(7px,1.2vh,13px)}
  .pg-res-txt p{font-size:clamp(14.5px,1.2vw,18px);line-height:1.5}
}
@media(max-height:900px){
  .pg{--pg-air:clamp(5px,.9vh,12px)}
  .pg-titre{font-size:clamp(20px,2.2vw,30px)}
  .pg-texte{font-size:clamp(14.5px,1.1vw,17px);line-height:1.44}
  .pg-chef-nom,.pg-gen-nom{font-size:clamp(13.5px,1.1vw,16.5px)}
  .pg-chef,.pg-gen{padding:clamp(1px,.35vh,4px) 9px}
  .pg-choix{padding:clamp(8px,1.1vh,12px) clamp(14px,1.6vw,20px)}
  .pg-choix-txt{font-size:clamp(15px,1.15vw,17.5px)}
  .pg-choix-liste{gap:clamp(5px,.8vh,9px);margin-top:clamp(6px,1vh,11px)}
  .pg-num{width:26px;height:26px}
  .pg-res-titre{font-size:clamp(17px,1.8vw,24px)}
  .pg-res-txt p{font-size:clamp(14.5px,1.1vw,17px);line-height:1.44}
  .pg-dossier-mot,.pg-gens-mot{font-size:clamp(12.5px,1.05vw,15px)}
  .pg-dossier{gap:4px;margin-top:clamp(5px,1vh,10px)}
}
@media(max-height:780px){
  .pg{--pg-air:clamp(4px,.7vh,10px)}
  .pg-titre{font-size:clamp(19px,2vw,27px)}
  .pg-texte{font-size:14px;line-height:1.4}
  .pg-choix{padding:7px clamp(13px,1.5vw,19px)}
  .pg-choix-txt{font-size:15px}
  .pg-choix-liste{gap:5px;margin-top:7px}
  .pg-chef,.pg-gen{padding:1px 8px}
  .pg-gen-badge{width:21px;height:21px}
  .pg-suite{margin-top:9px;padding:10px clamp(16px,2.2vw,30px)}
  .pg-faisceau{height:48%}
}
@media(max-width:820px){
  .pg-tete{align-items:flex-start}
  .pg-faits{gap:12px}
  .pg-note{white-space:normal;text-align:right}
  .pg-res-titre{padding-right:0}
  .pg-cachet{position:static;display:inline-block;margin-left:10px;animation:none;opacity:.85}
}
@media(prefers-reduced-motion:reduce){
  .pg-faisceau,.pg-poussieres i,.pg-lustre{animation:none}
  .pg-cachet,.pg-crans i.pg-cran-on,.pg-chef,.pg-gen,.pg-choix,.pg-fait,
  .pg-res-titre,.pg-res-txt p{animation:none}
  .pg-cachet{opacity:.85;transform:rotate(-7deg)}
}


/* ============================================================================
   53. L’AVERTISSEMENT : une vie est déjà en cours
   ----------------------------------------------------------------------------
   La seule fenêtre du jeu qui demande la permission de détruire quelque
   chose. Elle ne crie pas : elle nomme. Un sceau brisé, une fiche encadrée
   de ses quatre équerres, et la vie enregistrée écrite en toutes lettres
   avec ce qu’elle a accumulé.

   Deux gestes, et rien ne les confond. Garder, c’est le bouton sobre, celui
   qui a le focus. Effacer, c’est un filet carmin qui ne se remplit qu’au
   survol, et à ce moment-là seulement le nom de la fiche se biffe d’un
   trait, pour qu’on voie ce qu’on est en train de faire avant de le faire.
   Aucun or ici : l’or est la couleur de ce qui fait avancer une histoire,
   jamais de ce qui en supprime une.
   ============================================================================ */

.modal-nu{max-width:min(620px,94vw)}
.modal-nu .modal-body{padding:clamp(26px,3.6vh,42px) clamp(24px,3vw,40px) clamp(24px,3.4vh,38px)}

.avv{--avv-carmin:#c2545f;position:relative;display:block}
.avv > .grain{opacity:.45}

/* --- l’en-tête : le sceau brisé, puis le libellé et le titre --- */
.avv-tete{
  position:relative;z-index:1;
  display:grid;grid-template-columns:auto 1fr;align-items:center;
  column-gap:16px;row-gap:2px;margin-bottom:clamp(16px,2.2vh,22px);
}
.avv-sceau{
  grid-row:1/3;width:46px;height:46px;color:var(--avv-carmin);
  display:flex;align-items:center;justify-content:center;
}
.avv-sceau svg{width:100%;height:100%;stroke-width:1;stroke-linecap:square}
.avv-kick{
  font-family:var(--font-tech);font-size:11px;letter-spacing:.3em;text-transform:uppercase;
  color:rgba(194,84,95,.78);
}
.avv-titre{
  font-family:var(--font-title);font-weight:600;
  font-size:clamp(21px,2vw,28px);letter-spacing:.03em;line-height:1.15;
  color:var(--gold-pale);text-shadow:0 0 48px rgba(230,200,119,.18);margin:0;
}

/* --- la fiche : ce qui disparaîtrait --- */
.avv-fiche{
  position:relative;z-index:1;padding:clamp(18px,2.4vh,24px) clamp(18px,2.2vw,26px);
  border:1px solid rgba(140,128,220,.22);
  background:linear-gradient(180deg, rgba(28,23,68,.5) 0%, rgba(10,8,30,.72) 100%);
}
.avv-fiche-lab{
  display:block;font-family:var(--font-tech);font-size:10.5px;letter-spacing:.28em;
  text-transform:uppercase;color:rgba(200,190,230,.42);margin-bottom:7px;
}
.avv-nom{
  position:relative;display:inline-block;
  font-family:var(--font-title);font-weight:600;font-size:clamp(20px,1.9vw,26px);
  letter-spacing:.04em;color:var(--parchment);
}
/* La biffure : elle ne part que quand la main est sur le geste qui efface. */
.avv-nom::after{
  content:'';position:absolute;left:0;top:52%;height:1px;width:0;
  background:var(--avv-carmin);transition:width .45s var(--ease-out);
}
.avv:has(.avv-effacer:hover) .avv-nom::after,
.avv:has(.avv-effacer:focus-visible) .avv-nom::after{width:100%}

/* Le libellé au-dessus, la valeur en dessous : côte à côte, « 5ᵉ année ·
   L’Ordre du Phénix » se cassait sur trois lignes dans une demi-colonne.
   La ligne qui dit où en est la vie prend toute la largeur, les trois
   chiffres se partagent celle du dessous. */
.avv-lignes{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:1px;margin-top:clamp(14px,1.9vh,18px);
  background:rgba(140,128,220,.14);
}
.avv-ligne{
  display:flex;flex-direction:column;align-items:flex-start;gap:4px;
  padding:10px 13px;background:rgba(9,7,28,.66);min-width:0;
}
.avv-ligne-large{grid-column:1/-1}
.avv-cle{
  font-family:var(--font-tech);font-size:10.5px;letter-spacing:.22em;
  text-transform:uppercase;color:rgba(200,190,230,.5);white-space:nowrap;
}
.avv-val{
  font-family:var(--font-body);font-size:17px;line-height:1.2;
  color:var(--parchment-dim);
}

/* Le chemin parcouru, en crans : jamais une barre lisse. */
.avv-avance{display:flex;align-items:center;gap:14px;margin-top:clamp(12px,1.6vh,16px)}
.avv-crans{display:flex;gap:3px;flex:1}
.avv-crans i{flex:1;height:8px;background:rgba(140,128,220,.16)}
.avv-crans i.on{background:linear-gradient(180deg, var(--gold-bright), var(--gold-deep))}

/* --- ce qui est en jeu, dit une fois, en phrases --- */
.avv-mot{
  position:relative;z-index:1;margin:clamp(16px,2.2vh,22px) 0 0;
  padding-left:14px;border-left:1px solid rgba(194,84,95,.45);
  font-family:var(--font-body);font-size:clamp(16px,1.35vw,19px);line-height:1.5;
  color:rgba(226,220,245,.78);
}

/* --- les deux gestes --- */
.avv-actes{
  position:relative;z-index:1;display:flex;flex-wrap:wrap;gap:12px;
  align-items:center;justify-content:flex-end;
  margin-top:clamp(20px,2.8vh,28px);padding-top:clamp(16px,2.2vh,20px);
  border-top:1px solid rgba(230,200,119,.16);
}
.avv-garder{flex:0 0 auto}
/* Les deux gestes tiennent sur une seule ligne, et il s’en fallait de
   trois pixels : celui qui efface est donc un peu moins large que le
   goût ne l’aurait voulu. Passer à la ligne aurait fait de lui le geste
   du bas, celui qu’on croit principal. */
.avv-effacer{
  position:relative;overflow:hidden;cursor:pointer;flex:0 0 auto;
  padding:13px 20px;border-radius:0;
  border:1px solid rgba(194,84,95,.5);background:rgba(58,18,26,.34);
  color:rgba(226,164,170,.9);
  font-family:var(--font-title);font-weight:600;font-size:12.5px;
  letter-spacing:.2em;text-indent:.2em;text-transform:uppercase;
  transition:color var(--t),border-color var(--t),background var(--t),box-shadow var(--t);
}
.avv-effacer:hover,.avv-effacer:focus-visible{
  border-color:var(--avv-carmin);background:linear-gradient(180deg,#8e2f3c,#5d1c26);
  color:#f6dfe1;box-shadow:0 18px 40px -22px rgba(194,84,95,.95);
}
.avv-effacer:active{transform:translateY(1px)}
.avv-effacer .eq{
  position:absolute;width:12px;height:12px;opacity:.5;
  border-color:currentColor;border-style:solid;border-width:0;
}
.avv-effacer .eq-a{left:8px;top:8px;border-left-width:1px;border-top-width:1px}
.avv-effacer .eq-b{right:8px;bottom:8px;border-right-width:1px;border-bottom-width:1px}

@media(max-width:560px){
  .avv-lignes{grid-template-columns:minmax(0,1fr)}
  .avv-actes{justify-content:stretch}
  .avv-garder,.avv-effacer{flex:1 1 auto;text-align:center}
}
@media(prefers-reduced-motion:reduce){
  .avv-nom::after{transition:none}
}

/* Ce que les résultats déplacent : le bloc d'effets se pose sous le
   relevé, dans le même cadre, avant la signature. C'est la B.U.S.E.
   qui réoriente une scolarité, et ça doit se lire là où on lit ses
   notes, pas dans une carte séparée. */
.rl-mouvements{
  grid-column:1 / -1;margin-top:clamp(10px,1.6vh,18px);
  padding-top:clamp(10px,1.6vh,18px);border-top:1px solid rgba(230,200,119,.2);
}
.rl-mouvements .fx-bloc{margin-top:0}

/* ============================================================
   53. L’ENSEIGNE : quand un commerçant ouvre sa boutique
   ------------------------------------------------------------
   Deux phases sur une seule carte, comme la naissance : ce qu’on
   vend, puis comment ça s’appelle. Le commerce choisi ne dit
   jamais ce qu’il rapporte, seulement ce qu’il est.
   Voir renderEnseigne, dans js/carriere_commercant.js.
   ============================================================ */
.en-grille{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(228px,1fr));
  gap:10px;margin-top:clamp(14px,2.4vh,26px);
}
.en-commerce{
  position:relative;display:flex;flex-direction:column;gap:6px;
  padding:13px 15px;border-radius:0;cursor:pointer;text-align:left;
  border:1px solid var(--line-2);background:rgba(0,0,0,.24);
  transition:border-color .18s var(--ease-out),background .18s var(--ease-out),transform .18s var(--ease-out);
  animation:rise .45s var(--ease-out) both;
}
.en-commerce:hover{border-color:rgba(230,200,119,.5);background:rgba(46,37,104,.4);transform:translateX(3px)}
.en-commerce.en-actif{border-color:var(--gold-warm);background:rgba(230,200,119,.09)}
.en-commerce b{font-family:var(--font-title);font-weight:600;font-size:17px;color:var(--gold-pale)}
.en-commerce span{font-family:var(--font-tech);font-size:9px;letter-spacing:.2em;text-transform:uppercase;color:rgba(200,190,230,.5)}
.en-commerce em{font-family:var(--font-body);font-style:italic;font-size:15px;line-height:1.35;color:var(--parchment-dim)}

.en-nom{margin-top:clamp(16px,2.6vh,28px);padding-top:clamp(12px,2vh,20px);border-top:1px solid rgba(230,200,119,.24)}
.en-lab{
  display:block;font-family:var(--font-tech);font-size:9px;letter-spacing:.3em;
  text-transform:uppercase;color:rgba(230,200,119,.75);margin-bottom:10px;
}
.en-jetons{display:flex;flex-wrap:wrap;gap:8px}
.en-jeton{
  padding:8px 13px;border-radius:0;cursor:pointer;
  border:1px solid var(--line-2);background:rgba(0,0,0,.24);
  font-family:var(--font-title);font-size:15px;color:var(--parchment-dim);
  transition:border-color .18s var(--ease-out),color .18s var(--ease-out);
  animation:rise .4s var(--ease-out) both;
}
.en-jeton:hover{border-color:rgba(230,200,119,.5);color:var(--gold-pale)}
.en-jeton.en-actif{border-color:var(--gold-warm);color:var(--gold-pale);background:rgba(230,200,119,.09)}

.en-champ-rang{display:flex;gap:8px;margin-top:12px;align-items:stretch}
.en-champ{
  flex:1 1 auto;min-width:0;padding:9px 13px;border-radius:0;
  border:1px solid var(--line-2);background:rgba(0,0,0,.3);
  font-family:var(--font-title);font-size:15px;color:var(--parchment);
}
.en-champ:focus{outline:none;border-color:var(--gold-warm)}
.en-champ::placeholder{color:var(--faint);font-family:var(--font-body);font-style:italic}
.en-relance{
  flex:none;padding:9px 14px;border-radius:0;cursor:pointer;
  border:1px solid var(--line-2);background:rgba(0,0,0,.24);
  font-family:var(--font-tech);font-size:9px;letter-spacing:.2em;text-transform:uppercase;
  color:rgba(200,190,230,.6);
}
.en-relance:hover{border-color:rgba(230,200,119,.5);color:var(--gold-pale)}
.en-signer{margin-top:14px}
.en-signer:disabled{opacity:.4;cursor:not-allowed}
.en-signer:disabled:hover{transform:none;border-color:rgba(140,128,220,.24)}


/* ============================================================================
   54. LA VITRINE : le comptoir d'une boutique, Traverse ou Embrumes
   ----------------------------------------------------------------------------
   C'était une grille de vignettes arrondies, un emoji de couleur par
   article et le prix en pastille dans un coin : du rouge, du vert et du
   bleu au milieu d'un écran d'or, sans qu'on sache jamais dans quelle
   boutique on se tenait.

   C'est un comptoir : l'enseigne dessinée à la plume en tête avec son
   adresse, la bourse à droite comme au-dessus d'une caisse, et les
   articles en étiquettes à angles vifs. Le prix reste, parce que c'est
   le prix de l'option et non ce qu'elle rapporte. Un article éteint dit
   pourquoi il l'est : déjà dans la malle, ou hors de la bourse.

   Le même dessin sert les cinq boutiques ; l'allée des Embrumes le
   reprend en carmin par `.vit-noire`, et rien d'autre ne change.
   ============================================================================ */

.modal-vitrine{max-width:min(940px,96vw);width:100%}
.modal-vitrine .modal-body{padding:0;overflow:hidden;display:flex}
/* La croix reprend les angles vifs de tout le reste. */
.modal-vitrine .modal-x{
  top:0;right:0;width:38px;height:38px;border-radius:0;border:0;
  border-left:1px solid var(--line);border-bottom:1px solid var(--line);
  background:rgba(0,0,0,.28);
}
.modal-vitrine .modal-x:hover{transform:none;background:rgba(230,200,119,.12)}

.vit{
  position:relative;display:flex;flex-direction:column;min-height:0;width:100%;
  max-height:min(84vh,860px);
  padding:clamp(20px,2.8vh,30px) clamp(20px,2.6vw,36px) 0;
}
.vit > *{position:relative;z-index:1}

/* --- l'enseigne, l'adresse, la caisse --- */
.vit-tete{
  display:flex;align-items:center;gap:clamp(12px,1.4vw,18px);
  padding-bottom:clamp(12px,1.6vh,16px);border-bottom:1px solid var(--line-hi);
  animation:rise .6s var(--ease-out) both;
}
.vit-enseigne{
  flex:none;width:46px;height:46px;display:flex;align-items:center;justify-content:center;
  color:var(--gold);border:1px solid rgba(230,200,119,.32);
  background:linear-gradient(180deg, rgba(230,200,119,.13), rgba(10,8,30,.86));
}
.vit-ident{display:flex;flex-direction:column;gap:3px;min-width:0;flex:1}
.vit-ou{
  font-family:var(--font-tech);font-size:9px;letter-spacing:.28em;text-transform:uppercase;
  color:rgba(200,190,230,.5);
}
.vit-nom{
  font-family:var(--font-title);font-weight:600;line-height:1.1;
  font-size:clamp(19px,1.9vw,27px);color:var(--gold-bright);text-wrap:balance;
}
.vit-bourse{
  flex:none;display:flex;flex-direction:column;align-items:flex-end;gap:2px;
  padding-left:clamp(12px,1.4vw,18px);border-left:1px solid var(--line);
}
.vit-bourse-lib{
  font-family:var(--font-tech);font-size:8.5px;letter-spacing:.26em;text-transform:uppercase;
  color:rgba(200,190,230,.45);
}
.vit-bourse-somme{display:flex;align-items:center;gap:7px}
.vit-bourse-somme em{
  font-family:var(--font-title);font-weight:600;font-style:normal;
  font-size:clamp(17px,1.5vw,22px);color:var(--gold-warm);
}

/* --- ce que la boutique est, en une phrase --- */
.vit-mot{
  margin:clamp(11px,1.5vh,15px) 0 0;max-width:74ch;
  font-family:var(--font-body);font-size:clamp(15px,1.25vw,18.5px);line-height:1.5;
  color:var(--parchment-dim);text-wrap:pretty;
  animation:rise .6s var(--ease-out) .06s both;
}

/* --- la ligne des étals --- */
.vit-barre{
  display:flex;align-items:center;gap:11px;flex-wrap:wrap;
  margin-top:clamp(13px,1.9vh,20px);
  font-family:var(--font-tech);font-size:9.5px;letter-spacing:.3em;text-transform:uppercase;
  color:rgba(230,200,119,.78);
  animation:rise .6s var(--ease-out) .1s both;
}
.vit-barre > span:first-child{white-space:nowrap}
.vit-filet{flex:1;min-width:20px;height:1px;background:linear-gradient(90deg, rgba(230,200,119,.3), rgba(230,200,119,0))}
.vit-note{flex:none;letter-spacing:.24em;color:rgba(200,190,230,.45);white-space:nowrap}
.vit-remise{
  flex:none;padding:3px 9px;border:1px solid rgba(230,200,119,.4);
  font-size:8.5px;letter-spacing:.2em;color:var(--gold-warm);white-space:nowrap;
}

/* --- les étals : ils défilent, et ça ne se voit pas --- */
.vit-etals{
  flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;
  margin-top:clamp(9px,1.4vh,14px);
}
.vit-etals.vit-defile{
  -webkit-mask-image:linear-gradient(180deg,#000 calc(100% - 46px),transparent);
  mask-image:linear-gradient(180deg,#000 calc(100% - 46px),transparent);
}
.vit-grille{
  display:grid;grid-template-columns:repeat(auto-fill, minmax(min(100%,264px),1fr));
  gap:clamp(8px,1vw,12px);padding-bottom:clamp(10px,1.4vh,16px);
}

.vit-etal{
  position:relative;display:flex;flex-direction:column;gap:6px;text-align:left;cursor:pointer;
  padding:clamp(11px,1.5vh,15px) clamp(12px,1.2vw,16px);border-radius:0;
  border:1px solid rgba(140,128,220,.24);
  background:linear-gradient(165deg, rgba(32,26,62,.6), rgba(9,8,26,.82));
  font-family:var(--font-body);color:inherit;
  animation:rise .6s var(--ease-out) both;
  transition:background .2s, border-color .2s, transform .2s, box-shadow .2s;
}
.vit-etal:hover,.vit-etal:focus-visible{
  outline:none;transform:translateY(-2px);
  background:linear-gradient(165deg, rgba(50,40,94,.82), rgba(12,10,32,.9));
  border-color:rgba(230,200,119,.5);
  box-shadow:0 22px 40px -28px rgba(230,200,119,.75);
}
/* Le liseré d'or de l'article survolé : il court sur le bord gauche,
   comme le trait d'une étiquette qu'on décolle. */
.vit-etal::before{
  content:'';position:absolute;left:-1px;top:0;bottom:0;width:1px;
  background:linear-gradient(180deg, transparent, var(--gold), transparent);
  opacity:0;transition:opacity .2s;
}
.vit-etal:hover::before,.vit-etal:focus-visible::before{opacity:1}

.vit-etal-tete{display:flex;align-items:center;gap:10px;min-width:0}
.vit-etal-ico{
  flex:none;width:30px;height:30px;display:flex;align-items:center;justify-content:center;
  color:#e0bd6d;border:1px solid rgba(230,200,119,.28);
  background:linear-gradient(180deg, rgba(230,200,119,.12), rgba(10,8,30,.85));
  transition:color .2s, border-color .2s;
}
.vit-etal:hover .vit-etal-ico{color:var(--gold-pale);border-color:rgba(230,200,119,.62)}
.vit-etal-nom{
  flex:1;min-width:0;font-family:var(--font-title);font-weight:600;
  font-size:clamp(13.5px,1.1vw,15.5px);line-height:1.2;color:var(--gold-bright);text-wrap:balance;
}
.vit-etal-mot{
  font-size:clamp(13.5px,1.15vw,16px);line-height:1.42;
  color:rgba(224,220,244,.74);text-wrap:pretty;
}
.vit-etal-pied{
  display:flex;align-items:center;gap:8px;flex-wrap:wrap;
  margin-top:auto;padding-top:7px;border-top:1px solid rgba(140,128,220,.14);
}
.vit-etal-etat{
  flex:1;min-width:0;
  font-family:var(--font-tech);font-size:8.5px;letter-spacing:.22em;text-transform:uppercase;
  color:rgba(200,190,230,.42);
}
.vit-prix{flex:none;display:flex;align-items:center;gap:6px}
.vit-prix em{
  font-family:var(--font-title);font-weight:600;font-style:normal;
  font-size:15px;color:var(--gold-warm);
}
/* Un article hors la loi le dit avant qu'on clique, jamais après. */
.vit-marque{
  flex:none;padding:2px 7px;border:1px solid rgba(212,101,124,.55);
  font-family:var(--font-tech);font-size:8px;letter-spacing:.22em;text-transform:uppercase;
  color:#e8929f;white-space:nowrap;
}

/* Un étal éteint garde son motif lisible : c'est une porte fermée, pas
   un bouton mort. */
.vit-etal:disabled{cursor:not-allowed;transform:none;box-shadow:none}
.vit-etal-cher{opacity:.46}
.vit-etal-cher:hover{border-color:rgba(140,128,220,.24);background:linear-gradient(165deg, rgba(32,26,62,.6), rgba(9,8,26,.82))}
.vit-etal-cher .vit-etal-etat{color:rgba(212,101,124,.72)}
.vit-etal-pris{border-color:rgba(230,200,119,.3);background:linear-gradient(165deg, rgba(44,36,80,.6), rgba(11,9,30,.86))}
.vit-etal-pris:hover{transform:none;border-color:rgba(230,200,119,.3);box-shadow:none}
.vit-etal-pris .vit-etal-etat{color:rgba(230,200,119,.62)}
.vit-etal-pris .vit-prix{opacity:.4}
/* Le cachet de ce qui est déjà acquis : un filet en travers du coin. */
.vit-etal-pris::after{
  content:'';position:absolute;top:0;right:0;width:16px;height:16px;
  border-top:1px solid rgba(230,200,119,.5);border-right:1px solid rgba(230,200,119,.5);
}

/* --- le pied : ce qu'on emporte, et la porte --- */
.vit-pied{
  flex:none;display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;
  margin:0 calc(-1 * clamp(20px,2.6vw,36px));
  padding:clamp(12px,1.7vh,17px) clamp(20px,2.6vw,36px);
  border-top:1px solid var(--line);background:linear-gradient(180deg,transparent,rgba(0,0,0,.3));
}
.vit-pied-mot{
  flex:1;min-width:180px;
  font-family:var(--font-body);font-style:italic;font-size:clamp(13.5px,1.1vw,16px);
  color:rgba(200,190,230,.5);
}
.vit-sortir{
  flex:none;cursor:pointer;padding:11px 26px;border-radius:0;
  border:1px solid var(--gold-warm);background:var(--or-massif);color:var(--or-encre);
  box-shadow:0 20px 44px -26px rgba(230,200,119,.9);
  transition:transform .25s, box-shadow .25s;
}
.vit-sortir:hover{transform:translateY(-2px);box-shadow:0 28px 54px -24px rgba(230,200,119,1)}
.vit-sortir:active{transform:translateY(0)}
.vit-sortir > span{
  font-family:var(--font-title);font-weight:600;font-size:11.5px;
  letter-spacing:.3em;text-indent:.3em;text-transform:uppercase;
}

/* --- l'allée des Embrumes : le même comptoir, une autre encre --- */
.vit-noire .vit-enseigne{
  color:#e8929f;border-color:rgba(212,101,124,.35);
  background:linear-gradient(180deg, rgba(212,101,124,.14), rgba(10,8,30,.86));
}
.vit-noire .vit-nom{color:#f0c6cd}
.vit-noire .vit-tete{border-bottom-color:rgba(212,101,124,.3)}
.vit-noire .vit-barre{color:rgba(226,164,170,.78)}
.vit-noire .vit-filet{background:linear-gradient(90deg, rgba(212,101,124,.3), rgba(212,101,124,0))}
.vit-noire .vit-etal:hover,.vit-noire .vit-etal:focus-visible{
  border-color:rgba(212,101,124,.55);box-shadow:0 22px 40px -28px rgba(212,101,124,.75);
}
.vit-noire .vit-etal::before{background:linear-gradient(180deg, transparent, #c2545f, transparent)}
.vit-noire .vit-etal:hover .vit-etal-ico{color:#f4dde1;border-color:rgba(212,101,124,.62)}

/* --- adaptatif : en 1366x768 le comptoir se serre, il ne se coupe pas --- */
@media(max-height:820px){
  .vit{padding-top:clamp(14px,2vh,22px)}
  .vit-enseigne{width:40px;height:40px}
  .vit-mot{font-size:clamp(14px,1.15vw,17px);line-height:1.45}
  .vit-etal{padding:clamp(9px,1.2vh,12px) clamp(11px,1.1vw,14px);gap:5px}
  .vit-etal-mot{font-size:clamp(13px,1.05vw,15px);line-height:1.36}
}
@media(max-width:620px){
  .vit-tete{flex-wrap:wrap}
  .vit-bourse{padding-left:0;border-left:0;align-items:flex-start}
  .vit-pied{justify-content:stretch}
  .vit-sortir{flex:1 1 auto;text-align:center}
}
@media(prefers-reduced-motion:reduce){
  .vit-tete,.vit-mot,.vit-barre,.vit-etal{animation:none}
}

/* --- Pré-au-Lard et le bookmaker : le même comptoir, deux réglages ---
   Le village n'est pas une boutique, mais il donne sur la même rue et il
   gagne à se lire dans le même dessin. Deux différences seulement : un
   étal peut n'avoir aucun prix, et la mise porte un blason plutôt qu'un
   glyphe. */

/* Une mise n'a pas de description : la carte se referme sur deux lignes,
   et il en tient douze sans faire défiler. */
.vit-grille-serree{grid-template-columns:repeat(auto-fill, minmax(min(100%,204px),1fr))}
.vit-etal-mise{gap:9px}
.vit-etal-mise .vit-etal-pied{padding-top:8px}
.vit-etal-mise .vit-etal-etat{letter-spacing:.16em}

/* Le blason est un disque par nature : il garde sa forme, et il perd le
   cadre carré que porte un glyphe tracé. */
.vit-etal-ecu{border:0;background:none;width:32px;height:32px}
.vit-blason{width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 3px 7px rgba(0,0,0,.6))}
.vit-etal:hover .vit-etal-ecu{border:0}


/* ============================================================================
   55. LE CONSENTEMENT : le bandeau de première visite, et la page Cookies
   ----------------------------------------------------------------------------
   Le modèle vient d'un bandeau ordinaire du web, blanc et arrondi, avec un
   bouton vert. Le contenu était bon, le dessin n'est pas d'ici : tout repasse
   dans la matière du jeu, nuit indigo, filets d'un pixel, équerres aux coins,
   grain de papier, angles vifs, et les trois familles typographiques chacune
   à son emploi. Aucun disque nulle part, ce n'est ni un blason ni un jeton.

   ET SURTOUT, C'EST COURT. La première version faisait 700 sur 634 pixels,
   avec trois blocs, une liste de quatre points et trois rangées de boutons :
   une page de conditions générales, pas un réglage. Un consentement se lit en
   cinq lignes et se répond en un clic. Ne pas rallonger.

   Le bandeau ne recouvre pas le pied de l'accueil, il se pose au-dessus : sa
   hauteur est lue à l'exécution et posée dans `--bm-bas`, parce qu'elle dépend
   de la largeur, du réglage du volume et du retour à la ligne de la signature.
   Voir `calerBandeauMesure`, dans `js/mesure.js`.
   ============================================================================ */

/* ---------- le bandeau de première visite ---------- */
.bm{
  position:fixed;z-index:80;
  left:50%;bottom:var(--bm-bas,96px);
  transform:translate(-50%,12px);
  width:min(540px,calc(100vw - 40px));
  padding:15px 19px 14px;border-radius:0;
  background:linear-gradient(162deg, rgba(28,22,56,.98), rgba(7,6,22,.99));
  border:1px solid rgba(230,200,119,.34);
  box-shadow:0 40px 88px -42px rgba(0,0,0,1), inset 0 1px 0 rgba(255,255,255,.06);
  opacity:0;pointer-events:none;
  transition:opacity .3s var(--ease-out), transform .3s var(--ease-out);
}
.bm-la{opacity:1;transform:translate(-50%,0);pointer-events:auto}
/* Les équerres se rapprochent des coins : sur un panneau de cette taille,
   celles de douze pixels tombaient au milieu du texte. */
.bm.u-equerres::before,.bm.u-equerres::after,
.bm.u-equerres > .eq2::before,.bm.u-equerres > .eq2::after{width:8px;height:8px}
.bm.u-equerres::before{left:6px;top:6px}
.bm.u-equerres::after{right:6px;bottom:6px}
.bm.u-equerres > .eq2::before{right:6px;top:6px}
.bm.u-equerres > .eq2::after{left:6px;bottom:6px}
.bm-lab{display:block;margin-bottom:7px}
.bm-txt{
  font-family:var(--font-body);font-size:15.5px;line-height:1.45;
  color:rgba(226,220,245,.8);margin:0;
}
.bm-txt b{color:var(--parchment);font-weight:600}
.bm-gestes{display:flex;align-items:center;justify-content:flex-end;gap:10px;margin-top:13px}
.bm-gestes .btn{padding:9px 20px;font-size:11px}
/* Écran étroit : les deux gestes prennent la largeur plutôt que de se serrer
   dans un coin, et le bandeau se colle aux bords. */
@media(max-width:560px){
  .bm{width:calc(100vw - 24px);padding:14px 15px 13px}
  .bm-gestes .btn{flex:1 1 0;padding:11px 10px}
}

/* ---------- la page Cookies ---------- */
/* Une fenêtre de réglage, pas une page de scène : le corps se resserre et la
   largeur descend bien sous celle d'une modale ordinaire. */
.modal-cookies{max-width:min(540px,94vw)}
.modal-cookies .modal-body{padding:20px 22px 18px}
.ck-tete{display:flex;align-items:center;gap:12px;margin-bottom:10px}
.ck-titre{
  flex:1;min-width:0;
  font-family:var(--font-title);font-weight:600;font-size:19px;line-height:1.2;
  letter-spacing:.03em;color:var(--gold-pale);
}
.ck-txt{
  font-family:var(--font-body);font-size:15.5px;line-height:1.5;
  color:rgba(226,220,245,.8);margin:0;
}
.ck-txt b{color:var(--parchment);font-weight:600}
.ck-bloc{margin-top:14px;padding-top:12px;border-top:1px solid rgba(140,128,220,.16)}
.ck-lab{display:flex;align-items:center;gap:11px;margin-bottom:9px}
.ck-lab .u-filet{min-width:24px}
/* L'état de la réponse, à droite du titre. Un mot, jamais un chiffre. */
.ck-etat{
  flex:none;font-style:normal;
  font-family:var(--font-tech);font-size:9px;font-weight:400;
  letter-spacing:.18em;text-transform:uppercase;
  padding:4px 8px;border:1px solid var(--line-2);border-radius:0;
  color:var(--parchment-mute);white-space:nowrap;
}
.ck-etat-oui{color:var(--gold);border-color:rgba(230,200,119,.42)}
.ck-etat-attend{color:var(--gold-bright);border-color:rgba(230,200,119,.55)}
.ck-etat-non{color:var(--parchment-dim)}
.ck-etat-dort{color:var(--faint);border-color:rgba(140,128,220,.2)}
.ck-note{
  font-family:var(--font-body);font-style:italic;
  font-size:14.5px;line-height:1.45;color:rgba(200,190,230,.55);
  margin:9px 0 0;
}
.ck-gestes{display:flex;align-items:center;justify-content:flex-end;gap:10px;margin-top:13px}
.ck-gestes .btn{padding:9px 20px;font-size:11px}
/* La réponse en cours porte un liseré intérieur : elle se voit sans qu'on ait
   à teindre le bouton d'une couleur qui voudrait dire bien ou mal. */
.ck-choisi{box-shadow:inset 0 0 0 1px rgba(230,200,119,.55)}
/* Effacer se tient sous le bloc, en simple mot. Il n'a pas droit à un bouton,
   sinon il pèse autant que la réponse elle-même. Et il n'y a plus de bande de
   pied : répondre referme la fenêtre, donc plus rien à confirmer. */
.ck-effacer{
  display:block;margin-top:16px;
  background:none;border:0;border-bottom:1px solid transparent;
  padding:0;border-radius:0;cursor:pointer;
  font-family:var(--font-body);font-size:14.5px;letter-spacing:.02em;
  color:rgba(200,190,230,.45);transition:color var(--t),border-color var(--t);
}
.ck-effacer:hover{color:#efb2a6;border-bottom-color:rgba(192,69,60,.45)}
@media(max-width:560px){
  .ck-gestes .btn{flex:1 1 0}
}