/* ═══════════════════════════════════════════════════════════════════
   NUÉE DE TÉMOINS — la lumière (habillage v2, 20 septembre 2026)

   Troisième couche, chargée après nuee-jeu.css et nuee-jeu-habillage.css.
   Elle n'invente pas une autre identité : elle donne de la matière à
   celle qui existe. Le vélin a du grain, l'or a du relief, la nuit a de
   la profondeur, et chaque geste a une réponse.

   Tout tient en CSS : ni image, ni police de plus. Les animations ne
   touchent que transform et opacity, pour rester fluides sur un
   téléphone d'entrée de gamme, et s'effacent si l'appareil demande
   moins de mouvement.
   ═══════════════════════════════════════════════════════════════════ */

:root{
  --or-clair:#FFE9A8; --or-vif:#D9BD7A; --or-sombre:#8C6A2A;
  --velin-haut:#FFFDF7; --velin-bas:#EFE2C8;
  --nuit:#070B1C; --nuit-claire:#151D42;
  --ombre-portee:0 18px 40px rgba(0,0,0,.55),0 4px 10px rgba(0,0,0,.4);
  --ressort:cubic-bezier(.22,1.2,.36,1);
}

/* ── La nuit : trois plans, un grain, une vignette ─────────────────── */
body{
  background-color:var(--nuit);
  background-image:
    radial-gradient(ellipse 70% 50% at 18% -10%, rgba(72,104,210,.30), transparent 60%),
    radial-gradient(ellipse 60% 45% at 88% 108%, rgba(126,84,168,.22), transparent 60%),
    radial-gradient(ellipse 90% 60% at 50% 50%, rgba(20,28,68,.55), transparent 70%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cg fill='%23FFF4D6'%3E%3Ccircle cx='18' cy='26' r='.8' opacity='.5'/%3E%3Ccircle cx='96' cy='52' r='.55' opacity='.35'/%3E%3Ccircle cx='150' cy='120' r='.9' opacity='.45'/%3E%3Ccircle cx='58' cy='146' r='.5' opacity='.3'/%3E%3Ccircle cx='128' cy='16' r='.6' opacity='.35'/%3E%3Ccircle cx='8' cy='96' r='.45' opacity='.3'/%3E%3C/g%3E%3C/svg%3E");
  background-attachment:fixed,fixed,fixed,fixed;
}
/* Le grain du papier et la vignette : au-dessus du fond, sous le jeu. */
body::before{
  content:"";position:fixed;inset:-10%;z-index:0;pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23g)' opacity='.5'/%3E%3C/svg%3E");
  opacity:.035;mix-blend-mode:overlay;
  transform:translate3d(calc(var(--px,0) * -6px),calc(var(--py,0) * -6px),0);
}
body::after{
  content:"";position:fixed;inset:0;z-index:0;pointer-events:none;
  background:radial-gradient(ellipse 80% 70% at 50% 45%,transparent 40%,rgba(3,6,18,.55) 100%);
}
/* Le jeu passe au-dessus du grain et de la vignette. Les éléments flottants
   (en-tête, bulles, bandeaux, choix) gardent leur propre position. */
.jeu{position:relative;z-index:1}

/* ── L'en-tête : un bandeau de nuit, un filet d'or ─────────────────── */
.haut{
  background:linear-gradient(180deg,rgba(7,11,28,.96),rgba(10,15,38,.82));
  border-bottom:1px solid transparent;
  border-image:linear-gradient(90deg,transparent,rgba(217,189,122,.55),transparent) 1;
  box-shadow:0 10px 30px rgba(0,0,0,.45);
}
.marque-nom{text-shadow:0 0 18px rgba(217,189,122,.35)}
.haut-actions button,.menu-btn{
  background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.02));
  border-color:rgba(217,189,122,.28);border-radius:6px;transition:border-color .2s,background .2s,transform .12s
}
.haut-actions button:hover,.menu-btn:hover{background:rgba(217,189,122,.12);transform:translateY(-1px)}

/* ── Les cartes en main : du vélin, un cadre gravé, de l'or vivant ── */
.main{perspective:1400px;padding-top:26px}
.carte-btn{
  --rx:0deg; --ry:0deg; --lift:0px;
  transform:perspective(1000px) rotateX(var(--rx)) rotateY(var(--ry)) translate3d(0,var(--lift),0) rotate(var(--incline,0deg));
  transition:transform .28s var(--ressort),filter .2s;
  transform-style:preserve-3d;
}
.carte-btn:not(:disabled):hover{--lift:-14px;z-index:3}
.carte-btn[aria-pressed="true"]{--lift:-20px;z-index:4}
.carte-btn.attrape{--lift:-8px;opacity:.35}
.carte{
  border-radius:14px;
  background:
    linear-gradient(180deg,var(--velin-haut),var(--velin-bas)),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='80'%3E%3Cfilter id='p'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.2' numOctaves='1'/%3E%3C/filter%3E%3Crect width='80' height='80' filter='url(%23p)' opacity='.35'/%3E%3C/svg%3E");
  background-blend-mode:multiply;
  box-shadow:
    inset 0 0 0 2px rgba(255,255,255,.85),
    inset 0 0 0 3.5px color-mix(in srgb,var(--c) 55%,var(--or-vif)),
    inset 0 2px 10px rgba(255,255,255,.7),
    inset 0 -14px 24px rgba(120,96,48,.18),
    var(--ombre-portee);
  position:relative;overflow:hidden;
}
/* Le filet gravé, à l'intérieur du cadre */
.carte::before{
  content:"";position:absolute;inset:7px;border-radius:9px;pointer-events:none;
  border:1px solid color-mix(in srgb,var(--c) 30%,rgba(140,106,42,.45));
  box-shadow:inset 0 0 12px rgba(140,106,42,.14);
}
/* L'or et l'argent respirent : un reflet lent traverse la carte */
.carte.fin-or::after,.carte.fin-argent::after{
  content:"";position:absolute;inset:0;pointer-events:none;border-radius:14px;
  background:linear-gradient(112deg,transparent 34%,var(--reflet) 47%,transparent 62%);
  background-size:280% 100%;animation:reflet-carte 7s ease-in-out infinite;mix-blend-mode:screen;opacity:.9;
}
.carte.fin-or{--reflet:rgba(255,231,160,.55)}
.carte.fin-argent{--reflet:rgba(226,235,255,.45)}
@keyframes reflet-carte{0%{background-position:130% 0}55%,100%{background-position:-40% 0}}
.c-bande{
  background:linear-gradient(180deg,color-mix(in srgb,var(--c) 72%,#fff),var(--c) 60%,color-mix(in srgb,var(--c) 80%,#000));
  box-shadow:0 2px 6px rgba(0,0,0,.25),inset 0 1px 0 rgba(255,255,255,.45);
  border-radius:8px 8px 3px 3px;
}
.c-fam{text-shadow:0 1px 1px rgba(0,0,0,.35)}
.c-cout,.c-ray{box-shadow:0 1px 3px rgba(0,0,0,.35),inset 0 1px 0 rgba(255,255,255,.9)}
.c-cout{background:radial-gradient(circle at 35% 30%,#fff,var(--velin-bas))}
.c-niche{
  box-shadow:inset 0 0 18px rgba(201,165,90,.35),inset 0 -6px 12px rgba(140,106,42,.18),0 1px 0 rgba(255,255,255,.8);
  position:relative;overflow:hidden;
}
.c-niche::after{content:"";position:absolute;inset:0;background:radial-gradient(ellipse at 50% 18%,rgba(255,255,255,.85),transparent 55%);pointer-events:none}
.c-niche .embleme{filter:drop-shadow(0 1px 1px rgba(140,106,42,.45))}
.c-titre{text-shadow:0 1px 0 rgba(255,255,255,.7)}
.c-effet{border-top-color:color-mix(in srgb,var(--c) 45%,transparent)}

/* ── La table : chaque mission est une scène éclairée ─────────────── */
.plateau{perspective:1600px}
.mission{
  background:
    radial-gradient(ellipse 120% 60% at 50% 0%,color-mix(in srgb,var(--c) 16%,transparent),transparent 70%),
    linear-gradient(180deg,rgba(24,32,72,.92),rgba(9,14,36,.94));
  border:1px solid rgba(217,189,122,.28);
  box-shadow:0 20px 45px rgba(0,0,0,.45),inset 0 1px 0 rgba(255,255,255,.06);
  transition:box-shadow .3s,transform .3s var(--ressort);
}
.mission::before{
  background:
    radial-gradient(ellipse 70% 40% at 50% 12%,color-mix(in srgb,var(--c) 26%,transparent),transparent 65%),
    radial-gradient(ellipse 80% 45% at 50% 92%,color-mix(in srgb,var(--c) 14%,transparent),transparent 70%);
}
.cote-moi.cible{outline:none;background:color-mix(in srgb,var(--c) 14%,transparent);box-shadow:inset 0 0 0 2px color-mix(in srgb,var(--c) 60%,var(--or-vif)),inset 0 0 40px color-mix(in srgb,var(--c) 22%,transparent)}
.mission.survol{transform:translateY(-4px);box-shadow:0 26px 60px rgba(0,0,0,.5),0 0 0 2px var(--or-vif),0 0 40px color-mix(in srgb,var(--c) 45%,transparent)}
.plaque{
  background:linear-gradient(180deg,#FFFDF6 0%,#F6EBD3 55%,#EADFC2 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9),inset 0 -2px 8px rgba(140,106,42,.22),0 3px 10px rgba(0,0,0,.35);
}
.plaque h3{text-shadow:0 1px 0 rgba(255,255,255,.85)}
/* Le seuil devient un anneau qui se remplit */
.seuil{position:relative;border-color:color-mix(in srgb,var(--c) 22%,transparent);background:radial-gradient(circle at 40% 30%,#FFFDF6,#F0E4CA);box-shadow:0 2px 6px rgba(0,0,0,.3),inset 0 0 0 1px rgba(255,255,255,.9)}
.seuil .anneau{position:absolute;inset:-4px;transform:rotate(-90deg)}
.seuil .anneau circle{fill:none;stroke-width:3.5;stroke-linecap:round}
.seuil .anneau .fond{stroke:rgba(140,106,42,.18)}
.seuil .anneau .plein{stroke:var(--c);transition:stroke-dashoffset .6s var(--ressort);filter:drop-shadow(0 0 4px color-mix(in srgb,var(--c) 70%,transparent))}
.seuil.atteint .anneau .plein{stroke:var(--or-vif);filter:drop-shadow(0 0 8px rgba(255,233,168,.9))}

/* ── Les saints posés : médaillons de lumière ─────────────────────── */
.tuiles{perspective:900px}
.tuile{
  background:linear-gradient(180deg,#FFFDF7,#F0E5CE);
  border:1px solid color-mix(in srgb,var(--sc-c) 40%,rgba(201,165,90,.6));
  border-top-width:4px;
  box-shadow:0 8px 18px rgba(0,0,0,.4),inset 0 1px 0 rgba(255,255,255,.9),inset 0 -8px 14px rgba(140,106,42,.12);
  transition:transform .25s var(--ressort),box-shadow .25s;
  transform-style:preserve-3d;
}
.tuile:not(.dos):not(.prevue):hover{transform:translateY(-5px) scale(1.06) rotateX(6deg);box-shadow:0 16px 30px rgba(0,0,0,.5),0 0 22px color-mix(in srgb,var(--sc-c) 45%,transparent)}
.tuile .t-emb{
  background:radial-gradient(circle at 50% 30%,#FFFDF8 0 28%,color-mix(in srgb,var(--sc-c) 18%,#F6EBD3) 100%);
  box-shadow:inset 0 0 10px color-mix(in srgb,var(--sc-c) 28%,transparent),0 1px 2px rgba(0,0,0,.2);
}
.tuile .pts{
  background:linear-gradient(145deg,color-mix(in srgb,var(--sc-c) 78%,#fff),var(--sc-c));
  box-shadow:0 3px 8px rgba(0,0,0,.45),inset 0 1px 0 rgba(255,255,255,.6);
}
.tuile.dos,.tuile.a-reveler{
  background-color:#0C1330;
  background-image:
    radial-gradient(circle at 50% 42%,rgba(217,189,122,.22),transparent 60%),
    radial-gradient(circle at 50% 50%,rgba(217,189,122,.35) 0 1.4px,transparent 2.2px);
  background-size:auto,13px 13px;
  box-shadow:0 8px 18px rgba(0,0,0,.5),inset 0 0 0 1px rgba(217,189,122,.3);
}
/* La révélation : la carte se retourne, puis une lumière la traverse */
.tuile.revelee{animation:retourner-lumiere .62s cubic-bezier(.3,.8,.35,1)}
@keyframes retourner-lumiere{
  0%{transform:perspective(600px) rotateY(96deg) scale(.92);filter:brightness(2.2)}
  60%{transform:perspective(600px) rotateY(-8deg) scale(1.04);filter:brightness(1.15)}
  100%{transform:none;filter:none}
}
.tuile.revelee::after{
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:linear-gradient(115deg,transparent 30%,rgba(255,244,214,.85) 48%,transparent 66%);
  background-size:240% 100%;animation:balayage .7s ease-out .18s both;mix-blend-mode:screen;
}
@keyframes balayage{from{background-position:130% 0;opacity:0}30%{opacity:1}to{background-position:-50% 0;opacity:0}}
.tuile.eclaire{box-shadow:0 0 0 2px var(--or-vif),0 0 26px rgba(255,233,168,.7),0 10px 22px rgba(0,0,0,.45)}

/* ── Les étincelles ────────────────────────────────────────────────── */
.etincelles{position:fixed;z-index:44;pointer-events:none;width:0;height:0}
.etincelle{
  position:absolute;width:6px;height:6px;border-radius:50%;
  background:radial-gradient(circle,#FFF6DA,rgba(255,220,140,.1) 70%);
  animation:etincelle var(--duree,900ms) ease-out forwards;
}
@keyframes etincelle{
  0%{transform:translate(0,0) scale(.4);opacity:0}
  20%{opacity:1}
  100%{transform:translate(var(--dx),var(--dy)) scale(0);opacity:0}
}

/* ── Le score : des perles de lumière ─────────────────────────────── */
.camp{background:linear-gradient(180deg,rgba(24,32,72,.9),rgba(9,14,36,.92));border-color:rgba(217,189,122,.24);box-shadow:inset 0 1px 0 rgba(255,255,255,.05)}
.pips i{border-color:rgba(217,189,122,.55);box-shadow:inset 0 0 6px rgba(0,0,0,.4)}
.pips i.plein{background:radial-gradient(circle at 34% 30%,#FFF6DA,var(--or-vif) 58%,var(--or-sombre));box-shadow:0 0 12px rgba(255,233,168,.85),inset 0 1px 0 rgba(255,255,255,.7)}
.jauge{background:rgba(255,255,255,.07);height:5px;border-radius:3px;overflow:hidden}
.jauge i{background:linear-gradient(90deg,color-mix(in srgb,var(--c) 70%,#000),var(--c));box-shadow:0 0 10px color-mix(in srgb,var(--c) 80%,transparent)}
.tot{text-shadow:0 0 14px rgba(255,233,168,.35)}

/* ── La pose : un bandeau de velours ──────────────────────────────── */
.pose{
  background:linear-gradient(180deg,rgba(20,27,62,.94),rgba(8,12,32,.97));
  border:1px solid rgba(217,189,122,.22);
  box-shadow:0 -10px 30px rgba(0,0,0,.45),inset 0 1px 0 rgba(255,255,255,.05);
}
.elan i.plein{background:radial-gradient(circle at 34% 30%,#FFF6DA,var(--or-vif) 58%,var(--or-sombre));box-shadow:0 0 10px rgba(255,233,168,.8)}
.btn{
  background:linear-gradient(180deg,#FFE9A8,#D9BD7A 55%,#B9974A);
  box-shadow:0 2px 0 #8C6A2A,0 8px 20px rgba(201,165,90,.3),inset 0 1px 0 rgba(255,255,255,.7);
  transition:transform .15s var(--ressort),filter .15s,box-shadow .15s;
}
.btn:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 4px 0 #8C6A2A,0 12px 26px rgba(201,165,90,.4),inset 0 1px 0 rgba(255,255,255,.8)}
.btn:active:not(:disabled){transform:translateY(1px);box-shadow:0 1px 0 #8C6A2A,0 6px 14px rgba(201,165,90,.3)}

/* ── Glisser-déposer ──────────────────────────────────────────────── */
.fantome{
  position:fixed;z-index:60;pointer-events:none;margin:0;
  transform:translate(-50%,-50%) rotate(-3deg) scale(1.04);
  filter:drop-shadow(0 22px 34px rgba(0,0,0,.6));
  transition:transform .12s ease-out;
}
.fantome.pose-ok{transform:translate(-50%,-50%) rotate(0deg) scale(1.1)}
body.glisse{cursor:grabbing}
body.glisse .cote-moi.cible{animation:none}
.onde{position:fixed;z-index:43;width:10px;height:10px;border-radius:50%;pointer-events:none;border:2px solid rgba(255,233,168,.9);animation:onde .55s ease-out forwards}
@keyframes onde{from{transform:translate(-50%,-50%) scale(.4);opacity:.9}to{transform:translate(-50%,-50%) scale(9);opacity:0}}

/* ── Fenêtres et récit ────────────────────────────────────────────── */
.dlg{
  background:linear-gradient(180deg,#182055,#0A0F28);
  border:1px solid rgba(217,189,122,.35);
  box-shadow:0 30px 80px rgba(0,0,0,.7),inset 0 1px 0 rgba(255,255,255,.06);
}
.dlg::backdrop{background:rgba(3,6,18,.72);backdrop-filter:blur(3px)}
.recit-zone{background:linear-gradient(180deg,rgba(22,30,68,.9),rgba(8,12,32,.94));border-color:rgba(217,189,122,.22);box-shadow:inset 0 1px 0 rgba(255,255,255,.05)}
.recit li.mission{background:linear-gradient(90deg,rgba(217,189,122,.18),transparent)}
.deck-choix,.mode-choix{transition:transform .18s var(--ressort),border-color .18s,background .18s}
.deck-choix:hover,.mode-choix:hover{transform:translateY(-3px)}

/* ── Écrans fins : on allège les effets coûteux ───────────────────── */
@media (max-width:760px){
  body::before{display:none}
  .carte{box-shadow:inset 0 0 0 2px rgba(255,255,255,.85),inset 0 0 0 3px color-mix(in srgb,var(--c) 55%,var(--or-vif)),0 10px 22px rgba(0,0,0,.5)}
  .mission{box-shadow:0 12px 26px rgba(0,0,0,.45)}
  .carte-btn:not(:disabled):hover{--lift:0px}
}
@media (prefers-reduced-motion:reduce){
  .carte.fin-or::after,.carte.fin-argent::after,.tuile.revelee::after,.etincelle,.onde{animation:none!important;display:none}
  .carte-btn,.tuile,.mission,.btn{transition:none!important}
}

/* Au doigt, le balayage horizontal fait défiler la main ; le mouvement
   vers le haut, lui, emporte la carte vers une mission. */
.carte-btn{touch-action:pan-x}

/* La bulle d'aide se pose sous l'en-tête, jamais sur ses boutons. */
@media (min-width:761px){
  .guide{top:calc(var(--haut-h,72px) + 12px);max-height:calc(100vh - var(--haut-h,72px) - 24px);overflow:auto}
}

/* ── Mise en page de l'écran d'ordinateur (22 septembre) ───────────────
   La table était une grille à lignes numérotées : la ligne « Fêté
   aujourd'hui », ajoutée ensuite, a décalé le compte, et le score
   recevait tout l'espace libre au lieu des missions. Une colonne souple
   ne dépend plus du nombre de lignes affichées. */
@media (min-width:761px) and (min-height:560px){
  .table{display:flex;flex-direction:column}
  .table > *{flex:none}
  .table > .plateau{flex:1 1 0;height:auto;min-height:0}
  /* La main défile en largeur seulement : plus d'ascenseur vertical parasite. */
  .main{overflow-y:hidden}
}
/* Sur les écrans bas, la règle du lieu passe sur deux lignes au lieu d'être coupée. */
@media (min-width:761px) and (min-height:560px) and (max-height:980px){
  .plaque .lieu,.plaque .forme{white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;line-height:1.3}
}

/* ── Écrans d'ordinateur bas ou étroits ────────────────────────────────
   Un couloir de mission y fait de 50 à 150 px : les
   saints posés deviennent des médailles couchées, emblème, nom et points
   sur une seule ligne, au lieu de tuiles hautes qu'il fallait faire défiler.
   Depuis le 03/10/2026, les grands écrans (1500 × 1000 et plus, dont le
   1920 × 1080) en sont dispensés : leurs couloirs font 230 px sur 186 au
   moins, et les saints y restent de vraies petites cartes (voir plus bas). */
@media (min-width:761px) and (min-height:560px) and (max-height:999px), (min-width:761px) and (max-width:1499px) and (min-height:560px) and (max-height:1200px){
  .tuiles{gap:4px;align-items:center}
  .tuile{flex-direction:row;align-items:center;width:auto;max-width:100%;min-height:0;height:30px;padding:2px 28px 2px 3px;border-top-width:1px;border-left:4px solid var(--sc-c);border-radius:15px 7px 7px 15px;gap:5px;text-align:left}
  .tuile.prevue,.tuile.dos,.tuile.a-reveler{min-height:0;height:30px}
  .tuile.dos{padding:2px 10px;font-size:10.5px;white-space:nowrap}
  .tuile.dos br{display:none}
  .tuile .t-emb{width:24px;height:24px;border-radius:50%;padding:3px}
  .tuile .n{font-size:11.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:96px}
  .tuile .n small{display:none}
  .tuile .pts{top:50%;bottom:auto;left:auto;right:4px;margin:-10px 0 0;width:20px;height:20px}
  .tuile .pts b{font-size:11px}
  .tuile.prevue{padding-right:22px}
  .tuile.prevue .retirer{top:50%;right:4px;transform:translateY(-50%)}
  .tuile:not(.dos):not(.prevue):hover{transform:translateY(-2px) scale(1.04)}
}

/* ═══ La fierté (22 septembre) ═══════════════════════════════════════ */

/* Le sceau d'or : il tombe sur la mission que vous accomplissez. */
.fx-sceau{z-index:7;background:radial-gradient(circle,rgba(255,236,170,.25),transparent 60%)}
.sceau-or{
  width:96px;height:96px;border-radius:50%;display:grid;place-items:center;
  background:radial-gradient(circle at 35% 30%,#FFF4CF,#E3C57E 45%,#A9812F 100%);
  box-shadow:0 0 0 5px rgba(255,244,207,.55),0 0 0 9px rgba(169,129,47,.5),0 18px 40px rgba(0,0,0,.55),0 0 60px rgba(255,220,140,.8);
  color:#5A3F0E;animation:sceau-tombe var(--duree,1.9s) cubic-bezier(.2,1.4,.4,1) both;
}
.sceau-or > span{width:54px;height:54px;display:grid;place-items:center}
.sceau-or svg{width:100%;height:100%;stroke-width:3.2}
@keyframes sceau-tombe{
  0%{transform:scale(2.6) rotate(-25deg);opacity:0}
  22%{transform:scale(.92) rotate(4deg);opacity:1}
  30%{transform:scale(1.04) rotate(0)}
  78%{transform:scale(1);opacity:1}
  100%{transform:scale(1.25);opacity:0}
}

/* Le nouveau rang */
.rang-neuf{
  display:flex;align-items:center;gap:16px;margin:4px auto 6px;padding:12px 22px;border-radius:14px;
  background:linear-gradient(90deg,rgba(217,189,122,.08),rgba(217,189,122,.24),rgba(217,189,122,.08));
  border:1px solid rgba(217,189,122,.55);animation:rang-arrive .9s var(--ressort) both .3s;
}
.rang-neuf p{margin:0;display:grid}
.rang-neuf small{font-family:var(--sc);letter-spacing:.12em;color:#D9BD7A;font-size:12px}
.rang-neuf b{font-family:var(--display);font-style:italic;font-size:30px;color:#FFF3C4;line-height:1.1;text-shadow:0 0 18px rgba(255,220,140,.55)}
.rang-neuf span{color:#C9CEE3;font-size:14px}
.rang-sceau{font-size:30px;color:#FFE9A8;text-shadow:0 0 16px rgba(255,220,140,.9);animation:rang-tourne 6s linear infinite}
@keyframes rang-arrive{from{transform:scale(.8) translateY(10px);opacity:0}to{transform:none;opacity:1}}
@keyframes rang-tourne{to{transform:rotate(360deg)}}

/* La fresque de votre Nuée */
.fresque{text-align:center;padding:16px 8px 10px;border-radius:14px;margin:4px 0 2px;
  background:radial-gradient(ellipse 80% 90% at 50% 100%,rgba(217,189,122,.16),transparent 70%);
  border-top:1px solid rgba(217,189,122,.25);border-bottom:1px solid rgba(217,189,122,.25)}
.fresque .rubrique{margin:0 0 10px}
.fresque-arc{display:flex;flex-wrap:wrap;justify-content:center;gap:12px 10px;padding-bottom:6px}
.medaillon{
  background:none;border:0;padding:0;cursor:pointer;display:grid;justify-items:center;gap:6px;width:78px;
  transform:translateY(var(--y,0px));animation:medaillon .7s var(--ressort) both;animation-delay:calc(var(--k) * 90ms + .25s);
}
.m-disque{
  width:64px;height:64px;border-radius:50%;display:grid;place-items:center;padding:12px;box-sizing:border-box;color:var(--c);
  background:radial-gradient(circle at 50% 32%,#FFFDF6,#EADFC2);
  box-shadow:0 0 0 3px var(--c),0 0 0 5px rgba(255,255,255,.5),0 10px 20px rgba(0,0,0,.45);
  transition:transform .2s var(--ressort),box-shadow .2s;
}
.m-disque svg{width:100%;height:100%}
.m-disque b{font-family:var(--display);font-size:26px}
.medaillon.fin-or .m-disque{box-shadow:0 0 0 3px #D9BD7A,0 0 0 6px rgba(255,236,170,.45),0 0 22px rgba(255,220,140,.7),0 10px 20px rgba(0,0,0,.45)}
.medaillon.fin-argent .m-disque{box-shadow:0 0 0 3px #C9D2E6,0 0 0 6px rgba(226,235,255,.35),0 0 18px rgba(226,235,255,.5),0 10px 20px rgba(0,0,0,.45)}
.medaillon i{font-family:var(--display);font-size:12.5px;line-height:1.15;color:#ECE6D6}
.medaillon:hover .m-disque,.medaillon:focus-visible .m-disque{transform:translateY(-4px) scale(1.08)}
@keyframes medaillon{from{transform:translateY(calc(var(--y,0px) + 24px)) scale(.3);opacity:0}to{transform:translateY(var(--y,0px));opacity:1}}
.fresque-phrase{margin:8px 0 0;font-family:var(--display);font-style:italic;font-size:19px;color:#FFE9A8}
.fresque-defaite .fresque-phrase,.fresque-egalite .fresque-phrase{color:#C9CEE3}

/* L'accueil : la vitrine et le rang */
.vitrine{display:flex;justify-content:center;height:150px;margin:2px 0 4px;perspective:900px}
.vitrine:empty{display:none}
.vitrine-carte{
  width:112px;margin:0 -16px;transform-origin:50% 120%;
  transform:rotate(calc(var(--k) * 9deg)) translateY(calc(var(--k) * var(--k) * 8px));
  animation:vitrine-entre .9s var(--ressort) both;animation-delay:calc((var(--k) + 1) * 110ms);
  transition:transform .3s var(--ressort);
}
.vitrine-carte .carte{zoom:.42}
.vitrine:hover .vitrine-carte{transform:rotate(calc(var(--k) * 14deg)) translateY(calc(var(--k) * var(--k) * 10px - 6px))}
@keyframes vitrine-entre{from{transform:translateY(40px) rotate(0) scale(.8);opacity:0}}
.rang-ligne{margin:-4px 0 2px;color:#C9CEE3;font-size:14px}
.rang-ligne:empty{display:none}
.rang-ligne b{font-family:var(--display);font-style:italic;font-size:17px;color:#FFE9A8}

/* La loupe : la carte survolée, en grand */
.loupe{position:fixed;z-index:70;pointer-events:none;width:max-content;
  filter:drop-shadow(0 26px 40px rgba(0,0,0,.65));animation:loupe .18s ease-out both}
.loupe .carte{zoom:1.05}
@keyframes loupe{from{opacity:0;transform:translateY(8px) scale(.96)}}

@media (max-width:760px){
  .vitrine{height:118px}
  .vitrine-carte{width:90px;margin:0 -14px}
  .vitrine-carte .carte{zoom:.34}
  .medaillon{width:66px}
  .m-disque{width:54px;height:54px;padding:10px}
  .rang-neuf b{font-size:24px}
}
@media (prefers-reduced-motion:reduce){
  .sceau-or,.rang-neuf,.rang-sceau,.medaillon,.vitrine-carte,.loupe{animation:none!important}
}
/* Les fenêtres défilent avec une barre discrète, aux couleurs de la nuit. */
.dlg,.dlg-corps,.recit,.cote{scrollbar-width:thin;scrollbar-color:rgba(217,189,122,.45) transparent}

/* La loupe au doigt : la carte au centre, la table dans l'ombre. */
.loupe.au-doigt{box-shadow:0 0 0 100vmax rgba(3,6,18,.72);border-radius:14px;animation:loupe-doigt .22s var(--ressort) both}
.loupe.au-doigt .carte{zoom:1.35}
@keyframes loupe-doigt{from{opacity:0;transform:scale(.85)}}
@media (max-width:400px){ .loupe.au-doigt .carte{zoom:1.2} }
@media (max-height:620px){ .loupe.au-doigt .carte{zoom:1} }
.carte-btn,.tuile{-webkit-touch-callout:none;-webkit-user-select:none;user-select:none}
/* Dans la loupe, la carte grandit pour montrer tout son effet. */
.loupe .carte{height:auto;min-height:266px}
.loupe .c-effet{overflow:visible;max-height:none;-webkit-line-clamp:unset;display:block;flex:none}

/* Écrans de 800 à 980 px de haut (la plupart des ordinateurs) : score et
   appels sur une seule ligne, main un peu plus compacte — la loupe montre
   chaque carte en grand —, pour rendre la hauteur aux missions. */
@media (min-width:761px) and (min-height:801px) and (max-height:980px){
  .score{grid-template-columns:minmax(0,1fr) minmax(0,1fr) minmax(0,1.8fr)}
  .appels{grid-column:auto;align-content:center}
  .appel-lui{display:none}
  .main .carte{zoom:.6}
  .main{padding-top:14px}
}

/* ── Les remarques des testeurs ─────────────────────────────────────── */
.haut-actions .btn-remarque{border-color:rgba(217,189,122,.7);color:#FFE9A8;background:linear-gradient(180deg,rgba(217,189,122,.22),rgba(217,189,122,.08))}
.lien-remarque{background:none;border:0;padding:0;color:#D9BD7A;font:inherit;text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.lien-remarque:hover{color:#FFE9A8}
.fin-remarque{text-align:center;margin:6px 0 0}
#remarque .dlg-corps{max-width:520px}
.humeurs{display:flex;flex-wrap:wrap;gap:8px}
.humeurs button{padding:6px 14px;border-radius:999px;border:1px solid rgba(217,189,122,.45);background:rgba(255,255,255,.04);color:#ECE6D6;font:inherit;cursor:pointer;transition:background .15s,border-color .15s}
.humeurs button[aria-pressed="true"]{background:linear-gradient(180deg,#FFE9A8,#D9BD7A);color:#1A2040;border-color:#D9BD7A}
.remarque-label{font-family:var(--sc);letter-spacing:.06em;color:#D9BD7A;font-size:13px;margin-top:4px}
#remarque-texte{width:100%;box-sizing:border-box;min-height:110px;resize:vertical;padding:10px 12px;border-radius:10px;border:1px solid rgba(217,189,122,.4);background:rgba(3,6,18,.5);color:#F4EEDD;font:inherit;line-height:1.45}
#remarque-texte:focus{outline:2px solid #D9BD7A;outline-offset:1px}
.remarque-note{font-size:13px;color:#9BA3C7;margin:0}
.remarque-etat{min-height:1.2em;margin:0;color:#FFE9A8}
.remarque-etat a{color:#FFE9A8}

/* La page sans partie : l'en-tête reste, et un mot pour repartir. */
.vide{position:relative;z-index:1;max-width:560px;margin:12vh auto 0;padding:28px 26px;text-align:center;border-radius:16px;
  background:linear-gradient(180deg,rgba(24,32,72,.92),rgba(9,14,36,.94));border:1px solid rgba(217,189,122,.3);box-shadow:0 24px 60px rgba(0,0,0,.5)}
.vide h2{font-family:var(--display);font-style:italic;font-size:32px;margin:4px 0 8px;color:#FFF6DA}
.vide p{color:#C9CEE3}
@media (max-width:760px){.vide{margin:6vh 14px 0;padding:22px 18px}.vide h2{font-size:26px}}

/* Le bouton « Menu » : habillage le déclarait caché APRÈS les règles qui
   devaient l'afficher, si bien que sur tablette et sur les écrans bas,
   l'en-tête n'avait plus aucun bouton. Il revient là où le menu se replie. */
@media (min-width:761px) and (max-width:1100px), (min-width:761px) and (min-height:560px) and (max-height:800px){
  .menu-btn{display:inline-block}
}

/* La ligne d'identité, dans la fiche d'un saint : état de vie, reconnaissance
   de l'Église, ce qu'on lui confie. Elle remplace la première phrase de la vie,
   qui était recopiée juste au-dessus d'elle et coupée au milieu d'un mot. */
.f-id{font-family:var(--sc);font-size:13px;letter-spacing:.08em;line-height:1.5;color:#D9BD7A;margin:0}

/* Les cartes du choix de deck étaient rétrécies en largeur et en hauteur, mais
   pas leur contenu : l'effet n'avait plus que six pixels de haut et se coupait
   au milieu d'un mot, sous le pied de carte. On réduit la carte entière d'un
   seul geste, comme la vitrine de l'accueil : tout reste à sa place. */
.livre-petit .carte{zoom:.72}
.livre-petit .carte .c-effet{font-size:12px}
@media (max-width:760px){ .livre-petit .carte{zoom:.6} }

/* Maintenant que chaque saint a son propre effet, les textes sont plus longs
   que les mots-clés de famille : dans la collection et l'atelier, où la place
   ne manque pas, la carte s'allonge et sa niche se resserre pour que l'effet
   tienne en entier. Sur la table, la carte garde sa taille. */
.c-effet{flex:1 1 auto;min-height:0}

/* Le sceau de saison se « portait » sans rien changer à l'écran : il donne
   maintenant sa couleur au sceau qui tombe sur une mission accomplie. */
body[data-sceau="sceau-pelerin"] .sceau-or{
  background:radial-gradient(circle at 35% 30%,#EAF1FF,#8FA9DC 45%,#3B5590 100%);
  box-shadow:0 0 0 5px rgba(234,241,255,.5),0 0 0 9px rgba(59,85,144,.5),0 18px 40px rgba(0,0,0,.55),0 0 60px rgba(140,175,235,.7);color:#1B2A4E
}
body[data-sceau="sceau-avent"] .sceau-or{
  background:radial-gradient(circle at 35% 30%,#F3E6FF,#B396D2 45%,#5E3F84 100%);
  box-shadow:0 0 0 5px rgba(243,230,255,.5),0 0 0 9px rgba(94,63,132,.5),0 18px 40px rgba(0,0,0,.55),0 0 60px rgba(180,140,225,.7);color:#301C4A
}

/* Le carnet : ce que la saison apporte de nouveau. */
.fournee{margin:6px 0 10px;padding:8px 12px;border-left:3px solid #D9BD7A;background:rgba(217,189,122,.08);border-radius:0 6px 6px 0}
.fournee b{color:#F1E6C4;font-family:var(--sc);letter-spacing:.06em;font-weight:600}

/* ── Les deux chemins ───────────────────────────────────────────────── */
/* À côté des points d'œuvre, les harmonies de la Nuée : l'autre manière de
   l'emporter. Elles sont publiques, chacun voit où en est l'autre. */
.graces{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;padding:8px 12px;border-radius:10px;
  background:linear-gradient(180deg,rgba(217,189,122,.10),rgba(217,189,122,.04));border:1px solid rgba(217,189,122,.22)}
.graces .qui{font-family:var(--sc);font-size:12.5px;letter-spacing:.1em;color:#D9BD7A;flex-basis:100%}
.grace{display:inline-flex;align-items:center;gap:4px;padding:3px 9px;border-radius:12px;font-size:13px;
  border:1px solid rgba(217,189,122,.28);color:#C9CEE3;cursor:help}
.grace b{font-weight:500}
.grace.fait{background:rgba(217,189,122,.22);border-color:#D9BD7A;color:#FFF3C4}
.grace.lui i{font-style:normal;color:#F0B8A8}
.grace-note{font-family:var(--sc);font-size:12px;letter-spacing:.06em;color:#9AA2C4}

/* Confier un saint à la Nuée : une étoile discrète sur la tuile. */
.tuile{position:relative}
.confier{position:absolute;top:2px;right:2px;z-index:2;width:20px;height:20px;padding:0;line-height:1;
  border-radius:50%;border:1px solid rgba(217,189,122,.5);background:rgba(14,20,48,.85);color:#D9BD7A;
  font-size:12px;cursor:pointer;opacity:.55;transition:opacity .15s,transform .15s}
.confier:hover,.confier:focus-visible{opacity:1;transform:scale(1.15);background:#D9BD7A;color:#1A1530}
@media (max-width:760px){ .confier{width:24px;height:24px;opacity:.8} }

/* Le choix des decks : la compagnie du mois se détache, les autres se replient. */
.decks-titre{flex-basis:100%;margin:14px 0 0;font-family:var(--sc);font-size:13px;letter-spacing:.12em;color:#D9BD7A}
.deck-choix.du-mois{border-color:#D9BD7A;box-shadow:0 0 0 1px rgba(217,189,122,.35),0 0 24px rgba(217,189,122,.18)}
.decks-plus{flex-basis:100%;margin-top:12px}
.decks-plus summary{cursor:pointer;font-family:var(--sc);font-size:13.5px;letter-spacing:.08em;color:#C9CEE3;padding:6px 0}
.decks-plus summary:hover{color:#F1E6C4}
.decks-grille{display:flex;flex-wrap:wrap;gap:10px;padding-top:8px}
.diff-douce{color:#8FD3B0}
.diff-juste{color:#D9BD7A}
.diff-exigeante{color:#E8C07A}
.diff-rude{color:#F0B8A8}

/* Sur un téléphone, la barre des harmonies ne doit pas repousser le plateau :
   des pastilles serrées sur une ligne, et la note disparaît. */
@media (max-width:760px){
  .graces{gap:4px 6px;padding:6px 8px}
  .graces .qui{font-size:11.5px;letter-spacing:.06em}
  .grace{font-size:11.5px;padding:2px 7px}
  .grace-note{display:none}
}

/* ── La Chronique ───────────────────────────────────────────────────── */
/* Le monde appelle : un lieu, une date, une œuvre. On envoie des saints, et
   ce qui compte est leur justesse, pas leur force. */
.ch-oeuvre{font-family:var(--sc);letter-spacing:.06em;color:#C9CEE3;margin:10px 0 6px}
.ch-jauge{height:8px;border-radius:5px;background:rgba(255,255,255,.08);overflow:hidden;border:1px solid rgba(217,189,122,.25)}
.ch-jauge i{display:block;height:100%;background:linear-gradient(90deg,#8C6A2A,#E6CB86);transition:width .3s ease}
.ch-total{margin:8px 0 2px;color:#C9CEE3}
.ch-detail{display:grid;gap:4px;margin:8px 0 4px;font-size:14px}
.ch-detail > div{display:flex;flex-wrap:wrap;gap:4px 10px;justify-content:space-between;border-bottom:1px solid rgba(255,255,255,.07);padding-bottom:3px}
.ch-detail .raisons{color:#9AA2C4;font-family:var(--sc);font-size:12.5px;letter-spacing:.04em}
/* align-content:start et des lignes à leur contenu : sans cela, la grille,
   qui a une hauteur définie, comprimait les soixante lignes à 14 pixels. */
.ch-liste{display:grid;gap:6px;align-content:start;grid-auto-rows:min-content;max-height:44vh;overflow:auto;padding-right:4px}
.ch-saint{display:flex;align-items:center;gap:10px;text-align:left;padding:6px 10px;border-radius:8px;min-width:0;overflow:hidden;
  border:1px solid rgba(217,189,122,.22);background:rgba(255,255,255,.03);color:#ECE6D6;cursor:pointer}
.ch-saint:hover:not(:disabled){border-color:#D9BD7A;background:rgba(217,189,122,.1)}
.ch-saint:disabled{opacity:.4;cursor:default}
.ch-saint.pris{border-color:#D9BD7A;background:rgba(217,189,122,.2)}
.ch-emb{width:26px;height:26px;flex:none;color:var(--c);display:grid;place-items:center}
.ch-nom{flex:1;min-width:0;font-family:var(--display);font-size:16px;line-height:1.15}
.ch-nom small{display:block;font-family:var(--sc);font-size:11.5px;letter-spacing:.05em;color:#9AA2C4;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ch-pts{font-family:var(--display);font-size:18px;color:#F1E6C4;flex:none}
.ch-carnet{list-style:none;padding:0;margin:6px 0 0;display:grid;gap:4px;font-size:14.5px}
.ch-carnet li{display:flex;justify-content:space-between;gap:10px;border-left:2px solid rgba(217,189,122,.4);padding-left:10px}
.ch-carnet span{font-family:var(--sc);font-size:12.5px;letter-spacing:.06em;color:#9AA2C4}
.ch-bravo{color:#FFF3C4;font-family:var(--sc);letter-spacing:.06em}
@media (max-width:760px){ .ch-liste{max-height:38vh} .ch-nom{font-size:15px} }

/* « Où j'en suis » : appels, harmonies et Nuée, lisibles à tout moment. */
.etat-liste{list-style:none;padding:0;margin:6px 0 0;display:grid;gap:8px}
.etat-liste li{display:grid;gap:2px;padding:8px 12px;border-radius:8px;
  border:1px solid rgba(217,189,122,.2);background:rgba(255,255,255,.03)}
.etat-liste li.fait{border-color:#D9BD7A;background:rgba(217,189,122,.14)}
.etat-liste b{font-family:var(--display);font-weight:500;font-size:17px;color:#F1E6C4}
.etat-liste span{color:#C9CEE3;font-size:14.5px}
.etat-liste em{font-family:var(--sc);font-style:normal;font-size:12px;letter-spacing:.08em;color:#9AA2C4}
.etat-liste li.fait em{color:#E6CB86}
.appels,.graces{cursor:pointer}

/* ── Six œuvres, et qu'on les voie ──────────────────────────────────── */
/* Sur deux rangées, chaque couloir tombait à 27 pixels : on ne voyait plus
   les saints. Sur un écran large, les six œuvres tiennent sur UNE rangée, et
   chaque couloir retrouve toute la hauteur. La plaque se resserre en
   conséquence : titre plus court, ligne du lieu sur deux lignes au plus. */
@media (min-width:1240px){
  .plateau{grid-template-columns:repeat(6,minmax(0,1fr));gap:8px}
  .plaque h3{font-size:16px;line-height:1.12}
  .plaque .aff{font-size:11px;letter-spacing:.04em}
  .plaque .aff .aff-mot{display:none}
  .plaque .lieu{font-size:10.5px;line-height:1.25;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
  .plaque .seuil{transform:scale(.88);transform-origin:top right}
}
@media (min-width:1600px){
  .plateau{gap:10px}
  .plaque h3{font-size:17.5px}
}
/* Entre les deux : deux rangées de trois, mais une plaque allégée pour que les
   couloirs gardent de la place. */
@media (min-width:761px) and (max-width:1239px){
  .plateau{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
  .plaque h3{font-size:16px;line-height:1.12}
  .plaque .aff{font-size:11px}
  .plaque .aff .aff-mot,.plaque .aff .oeuvre{display:none}
  .plaque .lieu{font-size:10.5px;line-height:1.25;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden}
}

/* Sur un écran bas, le bandeau du haut mangeait un tiers de la table (186 px
   sur 647) et les couloirs tombaient à rien. On le réduit à l'essentiel :
   les points, les titres des appels, les pastilles des harmonies. Le détail est
   à un clic, dans « Où j'en suis ». */
@media (min-width:761px) and (max-height:860px){
  .score{grid-template-columns:auto auto minmax(0,1fr);gap:6px;align-items:stretch}
  .camp{padding:4px 10px}
  .camp .nuee{font-size:11.5px}
  .appels{padding:4px 10px;font-size:12.5px;gap:4px 8px}
  .appels .qui{font-size:11px}
  .appel small{display:none}
  .graces{grid-column:1 / -1;padding:4px 10px;gap:3px 8px}
  .graces .qui{flex-basis:auto;font-size:11px}
  .grace{font-size:11.5px;padding:1px 7px}
  .grace-note{display:none}
  /* La main aussi se resserre : c'est le plateau qui doit respirer. */
  .pose{padding:6px 10px;gap:4px}
  .main{padding-top:14px}
}
@media (min-width:761px) and (max-height:700px){
  .score{grid-template-columns:auto auto minmax(0,1fr) minmax(0,1fr)}
  .graces{grid-column:auto}
  .fete-jour{display:none}
}

/* ── Le menu : un seul bouton, cinq groupes nommés ──────────────────── */
/* Quinze entrées alignées au même niveau visuel, c'était trop d'un coup pour
   qui arrive. L'en-tête ne garde que ce qui sert pendant la partie ; le reste
   s'ouvre en panneau, rangé par intention. */
.haut{position:relative}
.menu-btn{display:inline-block!important}
.haut-actions{
  display:none;position:absolute;top:calc(100% + 6px);right:16px;z-index:40;
  width:min(620px,calc(100vw - 32px));max-height:min(70vh,560px);overflow:auto;
  flex-direction:column;gap:14px;padding:16px;border-radius:14px;
  background:linear-gradient(180deg,rgba(24,32,72,.98),rgba(9,14,36,.99));
  border:1px solid rgba(217,189,122,.35);box-shadow:0 26px 70px rgba(0,0,0,.6)
}
.haut-actions.ouvert{display:grid}
.menu-groupe{display:flex;flex-wrap:wrap;gap:6px 8px;align-items:center}
.menu-groupe .titre{flex-basis:100%;font-family:var(--sc);font-size:11.5px;letter-spacing:.14em;color:#D9BD7A}
.menu-groupe + .menu-groupe{border-top:1px solid rgba(217,189,122,.16);padding-top:12px}
.haut-raccourci{background:transparent;border:1px solid rgba(217,189,122,.28);color:#E4DCC6;border-radius:6px;
  padding:6px 12px;font-family:var(--sc);letter-spacing:.05em;font-size:14px;cursor:pointer}
.haut-raccourci:hover{border-color:#D9BD7A;background:rgba(217,189,122,.12)}
@media (max-width:760px){
  .haut-actions{right:8px;width:calc(100vw - 16px);padding:12px;gap:10px}
  .menu-groupe button{flex:1 1 calc(50% - 6px)}
  .haut-raccourci{padding:5px 9px;font-size:13px}
}

/* ── L'accueil, comme une page de jeu ───────────────────────────────── */
/* En quittant une partie, on arrive ici : on voit où l'on peut aller, et ce
   que la version en cours apporte. */
.portes{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin:16px 0 4px}
.porte{display:grid;gap:3px;text-align:left;padding:11px 14px;border-radius:10px;cursor:pointer;
  background:linear-gradient(180deg,rgba(255,255,255,.055),rgba(255,255,255,.02));
  border:1px solid rgba(217,189,122,.24);color:#ECE6D6;transition:border-color .2s,transform .12s,background .2s}
.porte:hover{border-color:#D9BD7A;background:rgba(217,189,122,.12);transform:translateY(-1px)}
.porte strong{font-family:var(--display);font-style:italic;font-weight:500;font-size:19px;color:#F1E6C4}
.porte span{font-size:13.5px;color:#C9CEE3;line-height:1.35}
.quoi-neuf{margin-top:18px;padding:12px 14px;border-radius:10px;
  background:rgba(217,189,122,.07);border:1px solid rgba(217,189,122,.22)}
.quoi-neuf .rubrique{margin-bottom:6px}
.quoi-neuf ul{margin:0;padding-left:18px;display:grid;gap:5px;font-size:14px;color:#C9CEE3}
.quoi-neuf p:last-child{margin:8px 0 0}
.lien-nouveautes{font-family:var(--sc);font-size:13px;letter-spacing:.06em;color:#D9BD7A;text-decoration:none}
.lien-nouveautes:hover{text-decoration:underline}
@media (max-width:760px){ .portes{grid-template-columns:minmax(0,1fr)} .porte strong{font-size:17px} }

/* ── La vitrine du jeu : l'accueil prend tout l'écran ───────────────── */
/* « Un vrai menu de jeu, qui donne envie de cliquer pour en savoir plus et
   pour jouer. » Une barre en haut, une scène en deux colonnes, les portes en
   bas, et le reste (choix du deck, crédits, règle) plus bas encore. */
.accueil-plein{
  width:100vw;max-width:100vw;height:100dvh;max-height:100dvh;margin:0;padding:0;border:0;border-radius:0;
  background:radial-gradient(120% 90% at 50% -10%,#1B2450 0%,#0E1430 55%,#080C20 100%)
}
.accueil-plein::backdrop{background:#080C20}
.accueil-plein .dlg-corps{
  height:100%;overflow:auto;padding:22px clamp(16px,4vw,54px) 40px;
  display:flex;flex-direction:column;gap:0;max-width:1480px;margin:0 auto
}
/* Une nuée d'étoiles discrète, comme au-dessus de la table. */
.accueil-plein::before{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:0;
  background:radial-gradient(1.5px 1.5px at 20% 22%,rgba(255,244,207,.5),transparent 60%),
             radial-gradient(1.5px 1.5px at 72% 16%,rgba(255,244,207,.35),transparent 60%),
             radial-gradient(1.5px 1.5px at 40% 68%,rgba(255,244,207,.3),transparent 60%),
             radial-gradient(1.5px 1.5px at 86% 74%,rgba(255,244,207,.4),transparent 60%),
             radial-gradient(1.5px 1.5px at 12% 84%,rgba(255,244,207,.3),transparent 60%)
}
.accueil-plein .dlg-corps > *{position:relative;z-index:1}

.acc-barre{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 20px;
  padding-bottom:12px;border-bottom:1px solid rgba(217,189,122,.2);margin-bottom:clamp(14px,3vh,34px)}
.acc-marque{display:flex;flex-direction:column;line-height:1.05;margin-right:auto}
.acc-marque span{font-family:var(--sc);font-size:11.5px;letter-spacing:.2em;color:#9AA2C4}
.acc-marque b{font-family:var(--display);font-style:italic;font-weight:500;font-size:clamp(20px,2.4vw,26px);color:#F1E6C4}
.acc-barre .rang-ligne{margin:0;font-size:14px;color:#C9CEE3}
.acc-version{margin:0;font-size:12px;letter-spacing:.14em;color:#D9BD7A}

.acc-scene{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(280px,.75fr);
  gap:clamp(20px,4vw,56px);align-items:start;flex:1 1 auto}
.acc-gauche{display:grid;gap:10px;align-content:start;justify-items:start}
.acc-gauche .vitrine{justify-self:center;margin-bottom:4px}
.acc-gauche h1{font-size:clamp(34px,5vw,58px);line-height:1;margin:0}
.acc-gauche .chapeau{max-width:56ch;margin:2px 0 6px}
.acc-gauche .jouer-zone{margin-top:6px}
.acc-gauche .btn-jouer{font-size:clamp(19px,2vw,24px);padding:14px 46px;letter-spacing:.14em}
.acc-droite{display:grid;gap:14px;align-content:start}
.acc-droite .quoi-neuf{margin:0}

.accueil-plein .portes{margin-top:clamp(18px,3vh,32px);grid-template-columns:repeat(4,minmax(0,1fr))}
.accueil-plein .porte{padding:14px 16px}
.accueil-plein .options,.accueil-plein .comment{margin-top:22px}

@media (max-width:1000px){
  .acc-scene{grid-template-columns:minmax(0,1fr)}
  .accueil-plein .portes{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:760px){
  .accueil-plein .dlg-corps{padding:16px 14px 32px}
  .acc-gauche{justify-items:stretch;text-align:left}
  .accueil-plein .portes{grid-template-columns:minmax(0,1fr)}
}

/* La vitrine devient l'image de la page : trois cartes en éventail, en grand. */
.accueil-plein .vitrine{height:clamp(190px,26vh,260px);justify-self:start;margin:0 0 6px}
.accueil-plein .vitrine-carte{width:clamp(120px,10vw,150px);margin:0 clamp(-14px,-1vw,-10px)}
.accueil-plein .vitrine-carte .carte{zoom:.64}
.accueil-plein .vitrine:hover .vitrine-carte{transform:rotate(calc(var(--k) * 9deg)) translateY(calc(var(--k) * var(--k) * 8px - 10px))}
.accueil-plein .btn-jouer{box-shadow:0 10px 30px rgba(217,189,122,.28),0 0 0 1px rgba(255,244,207,.35) inset}
.accueil-plein .btn-jouer:hover{transform:translateY(-2px)}
/* Sur téléphone, l'éventail prend la largeur de l'écran et son halo d'or (20 octobre 2026). */
@media (max-width:760px){
  .accueil-plein .vitrine{height:auto;justify-self:center;margin:6px 0 30px;position:relative}
  .accueil-plein .vitrine::before{content:"";position:absolute;inset:-12% -10%;background:radial-gradient(closest-side,rgba(217,189,122,.2),rgba(217,189,122,.05) 55%,transparent 72%);pointer-events:none}
  .accueil-plein .vitrine-carte{width:min(31vw,122px);margin:0 -16px;position:relative}
  .accueil-plein .vitrine-carte .carte{zoom:.55}
}
@media (max-width:360px){ .accueil-plein .vitrine-carte .carte{zoom:.48} }
.vitrine-legende{margin:0 0 4px;font-family:var(--sc);font-size:13px;letter-spacing:.05em;color:#C9CEE3}
.vitrine-legende b{color:#F1E6C4;font-weight:500}
.vitrine-legende:empty{display:none}

/* « Quitter la partie » se voit : c'est un bouton d'en-tête, pas une entrée
   de menu qu'il faut aller chercher. */
.haut-quitter{border-color:rgba(240,184,168,.45);color:#F0B8A8}
.haut-quitter:hover{border-color:#F0B8A8;background:rgba(240,184,168,.14);color:#FFE7DF}
.haut-raccourci[hidden]{display:none}

/* ── Les couloirs vides se replient ─────────────────────────────────── */
/* À six œuvres, les trois quarts des couloirs sont déserts à tout moment
   (mesuré). L'espace va donc à ceux qui sont habités : un couloir sans
   personne se réduit à une bande, et l'œuvre reste lisible. */
.cote-vide .tuiles{min-height:0!important}
.cote-vide{padding-top:5px!important;padding-bottom:5px!important}
.mission.haut-vide{grid-template-rows:auto auto minmax(0,1fr)}
.mission.bas-vide{grid-template-rows:minmax(0,1fr) auto auto}
.mission.deux-vides{grid-template-rows:auto auto minmax(0,1fr)}
/* Le mot « personne encore » suffit à dire qu'on peut y poser. */
.cote-vide .cote-tete{opacity:.75}

/* Les appels ouverts : on choisit celui auquel on répond. */
.ch-choix{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:12px}
.ch-onglet{display:grid;gap:1px;text-align:left;padding:6px 12px;border-radius:8px;cursor:pointer;
  border:1px solid rgba(217,189,122,.24);background:rgba(255,255,255,.03);color:#C9CEE3;font-size:14px}
.ch-onglet small{font-family:var(--sc);font-size:11px;letter-spacing:.06em;color:#9AA2C4}
.ch-onglet:hover{border-color:#D9BD7A}
.ch-onglet.actif{border-color:#D9BD7A;background:rgba(217,189,122,.18);color:#FFF3C4}
.ch-onglet.actif small{color:#E6CB86}
/* La trace d'un saint qui a servi dans la Chronique. */
.f-trace{margin:0;font-family:var(--sc);font-size:12.5px;letter-spacing:.06em;color:#E6CB86}

/* ── Le ruban du calendrier, sur la carte en main ─────────────────── */
.carte-btn{position:relative}
.carte-btn .ruban{position:absolute;left:50%;top:-9px;transform:translateX(-50%) translateZ(1px);white-space:nowrap;
  font:600 11px/1.5 var(--sc,serif);letter-spacing:.03em;color:#2a1d05;background:linear-gradient(180deg,#F3DE9C,#D9BD7A);
  border-radius:999px;padding:0 8px;box-shadow:0 2px 6px rgba(0,0,0,.35);pointer-events:none}
@media (max-width:760px){.carte-btn .ruban{font-size:10px;padding:0 6px;top:-8px}.carte-btn .ruban .r-long{display:none}}
/* La bulle de l'initiation vit en bas, au-dessus de la barre d'Élan (placée par table.js). */
.initiation{top:auto;bottom:180px}
@media (min-width:761px){.initiation{left:16px;transform:none;width:min(420px,calc((100% - 48px) / 3))}}
@media (max-width:760px){.initiation{top:auto}}

/* ── Écrans bas en deux rangées (1024 × 768…) : la carte posée doit se voir ─
   Mesuré le 27 septembre : une mission y fait 162 px ; le couloir vide en
   prenait 52, la plaque 71, et il restait 36 px au couloir habité — juste son
   titre, la carte posée tombait dans un défilement invisible. Le couloir vide
   n'est plus qu'une ligne, et les missions gardent une hauteur minimale :
   c'est le plateau qui défile, pas le couloir. */
.cote-vide .jauge{display:none}
.cote-vide{padding-top:3px!important;padding-bottom:3px!important}
@media (min-width:761px) and (max-width:1239px) and (min-height:560px){
  .table > .plateau{grid-auto-rows:minmax(190px,1fr);overflow-y:auto;overscroll-behavior:contain}
  .table .cote{padding-top:3px;padding-bottom:3px;gap:3px}
}
@media (min-width:761px) and (min-height:560px) and (max-height:900px){
  .table .cote{padding-top:3px;padding-bottom:3px;gap:3px}
}
/* Une médaille ne dépasse jamais la largeur de son couloir (colonnes de 150 px). */
@media (min-width:761px){
  .table .cote{overflow-x:hidden}
  .table .tuiles{min-width:0}
  .table .tuile{max-width:100%;box-sizing:border-box}
}

/* ── Soutenir : discret, sous les crédits de l'accueil ────────────────── */
.soutenir{font-size:13.5px;line-height:1.5;color:#9AA2C4;margin-top:6px}
.soutenir a{color:#E6CB86;text-decoration:underline;text-underline-offset:2px}
.soutenir a:hover,.soutenir a:focus-visible{color:#FFF3C4}

/* ── Défier un ami ─────────────────────────────────────────────────── */
.duel-champ{display:grid;gap:4px;margin:10px 0;font-size:14px;color:#C9CEE6}
.duel-champ input,.duel-champ select{font:inherit;font-size:16px;padding:8px 10px;border-radius:8px;border:1px solid rgba(217,189,122,.4);background:#0E1430;color:#F3E7C4}
.duel-lien{background:rgba(217,189,122,.1);border:1px dashed rgba(217,189,122,.5);border-radius:10px;padding:10px 12px;word-break:break-all}
.duel-lien code{font-size:14px;color:#F3E7C4}
.duel-liste{list-style:none;padding:0;margin:6px 0 0;display:grid;gap:6px}
.duel-liste li{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:6px 10px;border:1px solid rgba(217,189,122,.25);border-radius:8px}
.duel-horloge{font-family:var(--sc,serif);letter-spacing:.04em;font-size:13px;color:#D9BD7A;margin:0}
.duel-horloge.presse{color:#F0B8A8}

/* ── Les missions ne se mangent plus (28 septembre) ─────────────────────
   Mesuré à 1536 × 864, une table chargée (lieux, formes, quatre saints par
   camp) : le bandeau du haut prenait 237 px, la main 241, il restait 224 px
   au plateau. Entre l'emblème (40 px) et le seuil (46 px), le titre n'avait
   que 58 px de large et tenait sur quatre lignes ; la plaque montait à 246 px,
   les couloirs habités tombaient à 6 px et leurs saints passaient sous elle.
   Désormais : sur six colonnes, le titre prend la largeur de l'emblème ; le
   bandeau tient sur une ligne jusqu’à 1200 px de haut ; un couloir habité
   garde de quoi montrer un saint ; et si tout ne tient pas, c'est le plateau
   qui défile, jamais un couloir qui s'écrase. */
/* La plaque a deux colonnes partout où l'emblème se cache ; le seuil, resté en
   troisième colonne, en créait une vide, et le lieu comme la forme n'occupaient
   plus que la moitié de la largeur (d'où « Œuvre commune… » coupé). */
.plaque .seuil{grid-column:2}
@media (min-width:1240px){
  .plaque{grid-template-columns:minmax(0,1fr) auto}
  .plaque .m-embleme{display:none}
  .plaque h3,.plaque .aff{grid-column:1}
}
@media (min-width:1240px) and (min-height:560px) and (max-height:1200px){
  .score{grid-template-columns:minmax(0,.85fr) minmax(0,.85fr) minmax(0,1.15fr) minmax(0,1.15fr);gap:6px;align-items:stretch}
  .camp{flex-wrap:wrap;row-gap:0}
  .camp{padding:4px 10px}
  .camp .nuee{font-size:11.5px}
  .appels{grid-column:auto;padding:4px 10px;font-size:12.5px;gap:4px 8px}
  .appels .qui{font-size:11px}
  .appel small{display:none}
  .graces{grid-column:auto;padding:4px 10px;gap:3px 8px}
  .graces .qui{flex-basis:auto;font-size:11px}
  .grace{font-size:11.5px;padding:1px 7px}
  .grace-note{display:none}
}
@media (min-width:761px) and (min-height:560px){
  .table > .plateau{overflow-y:auto;overscroll-behavior:contain}
  /* overflow:hidden en faisait un conteneur défilant, dont la hauteur minimale
     tombe à zéro : clip garde les coins arrondis sans écraser la mission. */
  .table .plateau > .mission{overflow:clip;min-height:auto}
  /* Un couloir habité ne réclame pas la hauteur de tous ses saints : il en
     montre au moins deux (88 px) et défile au-delà ; la mission reste entière. */
  .table .cote:not(.cote-vide){contain:size}
  .table .mission:not(.haut-vide):not(.bas-vide):not(.deux-vides){grid-template-rows:minmax(88px,1fr) auto minmax(88px,1fr)}
  .table .mission.haut-vide{grid-template-rows:auto auto minmax(88px,1fr)}
  .table .mission.bas-vide{grid-template-rows:minmax(88px,1fr) auto auto}
}
/* La ligne du lieu ou de la forme, rognée à deux lignes, débordait sur le
   couloir du dessous : le texte entier reste à un clic (data-info). */
@media (min-width:761px) and (min-height:560px) and (max-height:980px){
  .plaque .lieu,.plaque .forme{overflow:hidden}
}
/* Deux rangées (761–1239 px de large) : la rangée avait 190 px fixes, et une
   mission chargée y perdait son couloir du bas. Elle prend désormais la hauteur
   de son contenu (couloirs à 88 px au moins), et c'est le plateau qui défile. */
@media (min-width:761px) and (max-width:1239px) and (min-height:560px){
  .table > .plateau{grid-auto-rows:minmax(min-content,1fr)}
}
/* Colonnes étroites (six œuvres sur 1240–1400 px) ou écran bas : la plaque
   garde la vertu et laisse « œuvre corporelle / spirituelle » au détail. */
@media (min-width:1240px) and (max-width:1400px), (min-width:761px) and (max-height:800px){
  .plaque .aff .oeuvre,.plaque .aff .aff-mot{display:none}
  .plaque h3{font-size:15px;line-height:1.1}
}

/* ── Les deux chemins de la victoire, dans chaque camp (28 septembre) ── */
.camp .chemin{display:inline-flex;align-items:center;gap:6px}
.camp .chemin small{font-family:var(--sc,serif);font-size:10.5px;letter-spacing:.08em;color:#9AA2C4;text-transform:lowercase}
.chemin-graces .pips i{border-radius:3px;transform:rotate(45deg) scale(.82);border-color:rgba(190,170,240,.6)}
.chemin-graces .pips i.plein{background:radial-gradient(circle at 34% 30%,#F4EEFF,#B9A6F0 58%,#6E5AB8);box-shadow:0 0 10px rgba(185,166,240,.8)}
.chemin-graces .alerte{font-style:normal;font-family:var(--sc,serif);font-size:11px;letter-spacing:.04em;color:#F0B8A8;white-space:nowrap}
.chemin-graces .alerte.moi{color:#E6CB86}
.chemin-graces.presque .pips{animation:presque 1.6s ease-in-out infinite}
@keyframes presque{50%{filter:drop-shadow(0 0 6px rgba(240,184,168,.9))}}
@media (prefers-reduced-motion:reduce){.chemin-graces.presque .pips{animation:none}}
@media (max-width:760px){
  .camp .chemin{flex-wrap:wrap;gap:3px 5px;min-width:0}
  .camp .chemin small{font-size:9.5px}
  .chemin-graces .alerte{white-space:normal;font-size:10px}
}

/* ── « Poser ici » dit ce que le saint apporterait, et pourquoi (28 septembre) ── */
.poser-ici{display:inline-block;text-align:center;max-width:100%}
.poser-ici b{font-size:1.15em;color:#3A2A08}
.poser-ici .apport{display:block;font-family:var(--serif,Georgia,serif);font-size:10.5px;letter-spacing:0;line-height:1.2;font-weight:400;opacity:.85;text-transform:none;white-space:normal}
.poser-ici.meilleur{box-shadow:0 0 0 2px #FFF3C4,0 0 16px rgba(255,233,168,.85)}

/* ── Le chantier (mode coopératif, caché) ─────────────────────────────── */
.recit li.monde{color:#C9BEF0;border-left:3px solid #8C7AD0;padding-left:8px}
.recit li.regret{color:#F0B8A8;font-style:italic;border-left:3px solid rgba(240,184,168,.6);padding-left:8px}
#score .monde{display:flex;flex-wrap:wrap;align-items:center;gap:4px 10px;padding:6px 12px;border-radius:10px;border:1px dashed rgba(185,166,240,.45);
  background:linear-gradient(180deg,rgba(40,32,80,.85),rgba(18,14,40,.9));font-size:12.5px;color:#C9CEE3}
#score .monde .qui{font-family:var(--sc,serif);letter-spacing:.08em;color:#C9BEF0}
#score .monde .regrets{color:#F0B8A8;font-style:italic}
.main-compagnon{max-width:60%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
@media (min-width:1240px) and (min-height:560px) and (max-height:1200px){
  #score:has(.camp-equipe){grid-template-columns:minmax(0,1.2fr) minmax(0,1fr)}
}
@media (max-width:760px){ .main-compagnon{max-width:100%;white-space:normal} }

/* ── L'accueil du premier venu : « Jouer », et rien d'autre (28 septembre) ── */
.debutant-seul{display:none}
.accueil-plein.debutant .debutant-seul{display:block;text-align:left;margin-top:6px}
.accueil-plein.debutant .portes,.accueil-plein.debutant .options,.accueil-plein.debutant .quoi-neuf,
.accueil-plein.debutant .rang-ligne,.accueil-plein.debutant .pas-debutant{display:none}

/* ── L'ouverture de la pochette : un rituel, pas un tirage (28 septembre) ── */
dialog.ouverture{position:fixed;inset:0;width:100vw;max-width:none;height:100dvh;max-height:none;margin:0;padding:0;border:0;
  background:radial-gradient(ellipse at 50% 42%,rgba(90,70,30,.55),rgba(8,10,28,.97) 62%),#080A1C;color:#F3E7C4;overflow:auto}
dialog.ouverture::backdrop{background:rgba(4,6,18,.85)}
.ouv-scene{min-height:100%;box-sizing:border-box;display:grid;place-items:center;align-content:center;gap:18px;padding:24px 16px;text-align:center}
.ouv-rubrique{margin:0;font-family:var(--sc,serif);letter-spacing:.14em;font-size:13px;color:#D9BD7A}
.ouv-consigne{margin:0;font-size:14px;color:#B8BEDA}
.ouv-pochette{--dechire:0;position:relative;width:min(240px,62vw);aspect-ratio:5/7;border-radius:14px;cursor:grab;touch-action:none;user-select:none;
  background:linear-gradient(160deg,#2B2358 0%,#1A1640 55%,#120F2E 100%);border:1px solid rgba(217,189,122,.7);
  box-shadow:0 30px 80px rgba(0,0,0,.6),0 0 60px rgba(217,189,122,.25),inset 0 0 0 6px rgba(217,189,122,.12);animation:ouv-flotte 3.2s ease-in-out infinite}
.ouv-pochette::before{content:"";position:absolute;inset:10px;border-radius:9px;border:1px dashed rgba(217,189,122,.35);
  background:repeating-linear-gradient(45deg,rgba(217,189,122,.05) 0 8px,transparent 8px 16px)}
.ouv-rabat{position:absolute;left:0;right:0;top:0;height:42%;border-radius:14px 14px 50% 50% / 14px 14px 38% 38%;
  background:linear-gradient(180deg,#342A6A,#231C4E);border-bottom:1px solid rgba(217,189,122,.55);transform-origin:top;transition:transform .7s cubic-bezier(.3,.7,.4,1)}
.ouv-trace{position:absolute;left:10%;top:42%;height:3px;width:calc(var(--dechire) * 80%);background:linear-gradient(90deg,#FFF3C4,#E6CB86);box-shadow:0 0 12px #FFE9A8;border-radius:2px}
.ouv-sceau{position:absolute;left:50%;top:42%;width:70px;height:70px;margin:-35px 0 0 -35px;border-radius:50%;display:grid;place-items:center;font-size:30px;color:#3A1F06;
  background:radial-gradient(circle at 35% 30%,#F6D88A,#C98A2E 55%,#7A4A12);box-shadow:0 4px 14px rgba(0,0,0,.5),inset 0 -3px 6px rgba(0,0,0,.35);
  transform:rotate(calc(var(--dechire) * 40deg)) scale(calc(1 + var(--dechire) * .12));transition:transform .15s}
.ouv-pochette.rompue{animation:ouv-rompre .9s ease forwards}
.ouv-pochette.rompue .ouv-rabat{transform:rotateX(180deg) translateY(-6px)}
.ouv-pochette.rompue .ouv-sceau{animation:ouv-sceau .6s ease forwards}
@keyframes ouv-flotte{50%{transform:translateY(-8px) rotate(-.6deg)}}
@keyframes ouv-sceau{to{transform:scale(1.8) rotate(80deg);opacity:0}}
@keyframes ouv-rompre{40%{transform:scale(1.05);box-shadow:0 0 140px rgba(255,233,168,.9)}100%{transform:scale(.9) translateY(30px);opacity:0}}
.ouv-pile{display:flex;gap:18px;justify-content:center;flex-wrap:wrap;perspective:1200px}
.ouv-carte{position:relative;width:190px;height:266px;padding:0;border:0;background:none;cursor:pointer;transform-style:preserve-3d;
  transition:transform .8s cubic-bezier(.3,.7,.4,1);animation:ouv-sort .7s cubic-bezier(.3,.7,.4,1) backwards;animation-delay:calc(var(--k) * .18s)}
.ouv-carte.retournee{transform:rotateY(180deg)}
.ouv-dos,.ouv-face{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden;border-radius:12px;overflow:hidden}
.ouv-dos{display:grid;place-items:center;background:radial-gradient(circle at 50% 45%,#3A2F78,#1A1640 70%);border:1px solid rgba(217,189,122,.7);
  box-shadow:0 18px 40px rgba(0,0,0,.5),inset 0 0 0 8px rgba(217,189,122,.12)}
.ouv-dos b{font-size:40px;color:#E6CB86;text-shadow:0 0 18px rgba(255,233,168,.8);animation:ouv-pulse 1.6s ease-in-out infinite}
.ouv-carte:hover .ouv-dos,.ouv-carte:focus-visible .ouv-dos{box-shadow:0 18px 40px rgba(0,0,0,.5),0 0 0 2px #FFF3C4,0 0 30px rgba(255,233,168,.6)}
.ouv-face{transform:rotateY(180deg)}
.ouv-face .carte{margin:0}
.ouv-face.fin-or::after,.ouv-face.fin-argent::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(115deg,transparent 30%,var(--reflet) 48%,transparent 66%);background-size:250% 100%;animation:ouv-reflet 2.4s ease-in-out .9s infinite}
.ouv-face.fin-or{--reflet:rgba(255,226,140,.75)}
.ouv-face.fin-argent{--reflet:rgba(225,232,255,.7)}
.ouv-carte.retournee::before{content:"";position:absolute;inset:-18px;border-radius:24px;background:radial-gradient(closest-side,rgba(255,233,168,.45),transparent);
  transform:translateZ(-1px);animation:ouv-halo 1.2s ease-out both;pointer-events:none}
@keyframes ouv-sort{from{transform:translateY(60px) scale(.7);opacity:0}}
@keyframes ouv-pulse{50%{opacity:.6;transform:scale(.92)}}
@keyframes ouv-reflet{0%{background-position:150% 0}60%,100%{background-position:-60% 0}}
@keyframes ouv-halo{from{opacity:0}to{opacity:1}}
.ouv-legende{min-height:160px;max-width:480px;display:grid;gap:6px;justify-items:center;align-content:start}
.ouv-legende h2{margin:0;font-family:var(--display);font-style:italic;font-weight:500;font-size:clamp(24px,5vw,34px);color:#FFF3C4;animation:ouv-titre .6s ease both}
.ouv-identite{margin:0;font-family:var(--sc,serif);letter-spacing:.05em;font-size:13px;color:#D9BD7A}
.ouv-fait{margin:0;font-size:15px;line-height:1.45;color:#E4E6F2}
.ouv-ruban{display:inline-block;font:600 12px/1.6 var(--sc,serif);letter-spacing:.05em;color:#2a1d05;background:linear-gradient(180deg,#F3DE9C,#D9BD7A);border-radius:999px;padding:0 10px}
.ouv-legende .btn{margin-top:8px}
@keyframes ouv-titre{from{opacity:0;transform:translateY(8px)}}
@media (max-width:480px){.ouv-carte{width:150px;height:210px}.ouv-face .carte{transform:scale(.79);transform-origin:top left}.ouv-pile{gap:12px}}
@media (prefers-reduced-motion:reduce){.ouv-pochette,.ouv-dos b,.ouv-face::after,.ouv-carte::before{animation:none!important}.ouv-carte{transition:none;animation:none}}

/* ── La collection par ensembles (28 septembre) ── */
.filtres button.ensemble{position:relative;overflow:hidden}
.filtres button.ensemble::after{content:"";position:absolute;left:0;bottom:0;height:3px;width:var(--av,0%);background:linear-gradient(90deg,#8C6A2A,#E6CB86);border-radius:0 2px 2px 0}
.filtres button.ensemble small{font-size:11px;opacity:.8;margin-left:2px}
.filtres button.complet{border-color:#D9BD7A;color:#FFF3C4;box-shadow:0 0 10px rgba(217,189,122,.35)}
.filtres button[aria-pressed="true"].ensemble::after{background:#1A1530}
/* Sur téléphone, les filtres du livre tiennent sur une rangée qui défile, au lieu de onze
   rangées de pastilles avant la première carte (20 octobre 2026). */
@media (max-width:760px){
  #collection > .dlg-corps{grid-auto-rows:max-content}
  #collection-filtres{display:flex;flex-wrap:nowrap;gap:6px;
    overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:none;padding-bottom:4px;margin-inline:-14px;padding-inline:14px;
    -webkit-mask-image:linear-gradient(90deg,transparent,#000 14px,#000 calc(100% - 36px),transparent);mask-image:linear-gradient(90deg,transparent,#000 14px,#000 calc(100% - 36px),transparent)}
  #collection-filtres::-webkit-scrollbar{display:none}
  #collection-filtres > *{flex:none;white-space:nowrap;margin:0}
}
.ensembles-complets{align-self:center;font-family:var(--sc,serif);font-size:12.5px;letter-spacing:.05em;color:#E6CB86;margin-left:4px}
/* Le monde s'annonce (chantier) */
.plaque .menace{grid-column:1 / -1;margin:3px 0 0;font-size:12px;line-height:1.3;padding:2px 8px;border-radius:4px;color:#3A2A6A;
  background:repeating-linear-gradient(135deg,rgba(140,122,208,.18) 0 6px,rgba(140,122,208,.08) 6px 12px);border:1px solid rgba(140,122,208,.6);cursor:help}
.plaque .menace b{font-family:var(--sc,serif);letter-spacing:.04em;color:#5A3FB0}
#score .monde .annonce-monde b{color:#E4DCFF}
#score .monde .niveau-monde{font-size:11px;opacity:.7}

/* ── Les aides ne recouvrent plus le plateau (retour de Jason, 29 septembre) ── */
.consigne.consigne-guide{display:block!important;color:#1A2040;background:linear-gradient(180deg,#FFFCF4,#F4EAD4);border-left:4px solid #D9BD7A;
  border-radius:8px;padding:6px 12px;font-size:14.5px;line-height:1.4;box-shadow:0 4px 14px rgba(0,0,0,.35)}
.consigne.consigne-guide::before{content:"✦ Initiation · ";font-family:var(--sc,serif);letter-spacing:.06em;color:#8C6A2A;font-size:12px}
.table > .guide{position:static!important;inset:auto!important;transform:none!important;width:auto!important;max-height:none!important;
  margin:0 0 6px;padding:8px 14px;display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:4px 12px;border-radius:10px;
  animation:none;box-shadow:0 4px 14px rgba(0,0,0,.3)}
.table > .guide[hidden]{display:none}
.table > .guide .guide-titre{grid-column:1 / -1;margin:0}
.table > .guide #guide-texte{margin:0;font-size:14px;line-height:1.4}
.table > .guide .guide-actions{display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end}
@media (max-width:760px){
  .table > .guide{grid-template-columns:minmax(0,1fr);padding:8px 10px}
  .table > .guide .guide-actions{justify-content:flex-start}
  .consigne.consigne-guide{font-size:13.5px}
}
/* Ce qu'il manque, dans votre couloir */
.cote-tete .manque{margin-left:auto;margin-right:8px;font-family:var(--sc,serif);font-size:11.5px;letter-spacing:.04em;color:#E6CB86;white-space:nowrap}
.cote-tete .manque b{font-size:13px;color:#FFF3C4}
.cote-tete .manque.ok{color:#9FE0B0}
@media (max-width:760px){.cote-tete .manque{font-size:10px;margin-right:4px}}
/* Le compte, sur l'accueil */
.compte-connecte{display:inline-block;margin-right:6px;padding:1px 10px;border-radius:999px;border:1px solid rgba(217,189,122,.6);color:#E6CB86;font-family:var(--sc,serif);font-size:12.5px;letter-spacing:.04em}
.compte-connecte b{color:#FFF3C4}

/* ── Le récit, tour par tour (retour de Jason, 29 septembre) ── */
.recit-tete{display:flex;align-items:center;justify-content:space-between;gap:8px;flex-wrap:wrap}
.recit-tete h2{margin:0}
.recit-nav{display:flex;align-items:center;gap:4px}
.recit-nav button{min-width:30px;height:28px;padding:0 8px;border-radius:8px;border:1px solid rgba(217,189,122,.4);background:rgba(255,255,255,.04);
  color:#E6CB86;font-family:var(--sc,serif);font-size:12px;letter-spacing:.04em;cursor:pointer}
.recit-nav button:disabled{opacity:.35;cursor:default}
.recit-nav #recit-tour.actif{background:#D9BD7A;color:#1A1530;border-color:#D9BD7A}
.recit li[hidden]{display:none}
@media (max-width:760px){
  .pose-tete{flex-wrap:wrap}
  .pose-tete .consigne.consigne-guide{flex:1 1 100%;order:5;min-width:0;font-size:13px;line-height:1.35;padding:5px 10px;max-height:5.6em;overflow:auto}
}

/* ── Le téléphone : les missions dès l'ouverture de l'écran (29 septembre) ──
   Mesuré sur 375 × 812 : en-tête 123 px, fête 43, scores-appels-harmonies 319, et la
   barre de la main fixée en bas (253) : les missions commençaient sous elle, on
   n'en voyait aucune sans faire défiler (« beaucoup plus agréable sur PC », Jason).
   Le haut se resserre à l'essentiel ; le détail reste à un toucher (« Où j'en
   suis », dans le menu), et les harmonies se lisent déjà en losanges dans chaque camp. */
@media (max-width:760px){
  .haut{row-gap:2px;padding-top:6px;padding-bottom:6px}
  .haut .marque-sur{display:none}
  .haut .marque-nom{font-size:19px}
  .haut .haut-raccourci{display:none!important}
  .haut .etat{font-size:12px;letter-spacing:.02em;margin:0}
  #adversaire{font-size:11.5px;gap:2px 8px}
  .fete-jour{font-size:11.5px;padding:3px 8px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  #score .graces{display:none}
  #score .appels{padding:3px 8px;gap:3px 6px}
  #score .appels .qui,#score .appel-lui{display:none}
  #score .appel{font-size:11.5px;padding:1px 8px}
  #score .camp{padding:4px 8px}
  #score .camp .nuee{display:none}
  .pose .main .carte-btn{zoom:.82}
}
@media (max-width:760px){ .cote-tete .manque .long{display:none} .cote-tete{flex-wrap:nowrap} }

/* ── Téléphone : les missions restent alignées (29 septembre) ─────────────
   Chaque mission avait sa propre grille : dès que l'ordinateur posait un saint
   au-dessus d'une seule mission, celle-ci descendait, et la rangée se tordait
   (« ça s'emboîte, ça se mange »). Les trois étages (couloir adverse, plaque,
   votre couloir) sont désormais partagés par toute la rangée : les plaques
   restent sur une même ligne. Sans subgrid (vieux navigateurs), rien ne change. */
@media (max-width:760px){
  @supports (grid-template-rows:subgrid){
    .table > .plateau{row-gap:0}
    .table .plateau > .mission{grid-row:span 3;grid-template-rows:subgrid!important;margin-bottom:8px}
  }
  /* Le texte de l'initiation se lit en entier : bridé à cinq lignes, il défilait
     dans sa boîte, et la fin de la consigne restait invisible. */
  .pose-tete .consigne.consigne-guide{max-height:none;overflow:visible}
}

/* Le bilan d'une mission passe devant le sceau d'or (29 septembre) : les deux
   s'affichent ensemble, et dans une colonne de téléphone (117 px) le sceau de
   96 px couvrait « Vous l'emportez » et le nom des saints. Le sceau brille
   désormais derrière le voile du bilan. */
.fx.fx-bilan{z-index:8}

/* La Nuée de fin de partie, au téléphone (29 septembre) : l'arc suppose une seule
   rangée ; à 375 px, sept médaillons passent sur deux lignes, et les décalages de
   l'arc les faisaient se chevaucher (noms cachés). En colonnes étroites, la
   fresque est une grille droite. */
@media (max-width:760px){
  .fresque-arc{padding-bottom:6px!important}
  .fresque-arc .medaillon{--y:0px!important}
}

/* ── Un seul bouton plein : le meilleur endroit (03/10/2026) ──────────────
   Six boutons d'or plein côte à côte : le bon choix ne se distinguait que par
   un halo. Les emplacements ordinaires deviennent des boutons à contour ; seul
   le meilleur reste en or plein. */
.poser-ici:not(.meilleur){background:rgba(230,203,134,.09);color:#F1E6C4;border:1px solid rgba(230,203,134,.5);font-weight:500;transition:background .15s ease,border-color .15s ease}
.poser-ici:not(.meilleur) b{color:#FFE9A8}
.poser-ici:not(.meilleur):hover,.poser-ici:not(.meilleur):focus-visible{background:rgba(230,203,134,.2);border-color:#E6CB86}
.poser-ici.meilleur{transition:transform .15s ease}
.poser-ici.meilleur:hover{transform:translateY(-1px)}

/* ── L'accueil d'un premier venu, sur grand écran (03/10/2026) ────────────
   Sans la colonne des nouveautés (masquée la première fois), tout se tassait
   dans le tiers gauche et les deux tiers de l'écran restaient vides. Les trois
   cartes prennent la colonne de droite, en grand, comme l'illustration d'un
   écran-titre ; le titre et « Jouer » restent à gauche. */
@media (min-width:1100px) and (min-height:620px){
  .accueil-plein.debutant .acc-scene{grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:48px;row-gap:12px;align-content:center;align-items:start}
  .accueil-plein.debutant .acc-gauche{display:contents}
  .accueil-plein.debutant .acc-gauche > *{grid-column:1}
  .accueil-plein.debutant .acc-droite{display:none}
  .accueil-plein.debutant .vitrine{grid-column:2;grid-row:1 / span 7;align-self:center;justify-self:center;height:auto;margin:0;position:relative}
  .accueil-plein.debutant .vitrine::before{content:"";position:absolute;inset:-12% -18%;background:radial-gradient(closest-side,rgba(217,189,122,.22),rgba(217,189,122,.06) 55%,transparent 72%);pointer-events:none}
  .accueil-plein.debutant .vitrine-carte{width:clamp(170px,15vw,220px);margin:0 clamp(-26px,-1.6vw,-18px);position:relative}
  .accueil-plein.debutant .vitrine-carte .carte{zoom:.95}
  .accueil-plein.debutant .acc-gauche h1{font-size:clamp(48px,5.6vw,76px)}
  .accueil-plein.debutant .acc-gauche .chapeau{font-size:19px;max-width:44ch}
}

/* ── La main se lit d'un coup d'œil (03/10/2026) ──────────────────────────
   Dans la main, la carte est réduite de moitié : le texte de l'effet faisait
   moins de 6 px de haut, illisible, et brouillait la carte. On y garde ce qui
   se lit d'un regard : coût, apport, nom, emblème, et le NOM de l'effet, en
   grand. Le texte entier reste à un geste : survol, ou appui long (la loupe),
   où la carte s'affiche complète. Les événements montrent leur titre et leur
   emblème. */
#main .carte-btn .carte:not(.evt) .c-effet{font-size:0;line-height:0;display:flex;align-items:center;justify-content:center;text-align:center}
#main .carte-btn .carte:not(.evt) .c-effet b{font-size:21px;line-height:1.12;display:block;letter-spacing:.01em}
#main .carte-btn .carte:not(.evt) .c-effet i{display:none}
#main .carte-btn .carte.evt .c-effet{display:none}
#main .carte-btn .carte.evt .c-nom{padding:6px 8px 0}
#main .carte-btn .carte.evt .c-nom .c-titre{font-size:25px;line-height:1.1}
#main .carte-btn .carte.evt .c-niche{flex:0 0 auto;margin-top:auto;margin-bottom:auto;transform:scale(1.25)}

/* ── Grands écrans : les saints posés sont de petites cartes (03/10/2026) ──
   À 1920 × 1080, un saint posé n'était qu'une pastille perdue dans un couloir
   de 230 px de large. Il redevient une carte, emblème et valeur visibles, et sa
   largeur suit le nombre de saints du couloir (quatre au plus) pour tenir sur
   une seule rangée : 84 px pour un ou deux, un tiers du couloir pour trois,
   un quart pour quatre. Au-delà de 1300 px de haut, la carte s'agrandit. */
@media (min-width:1500px) and (min-height:1000px){
  .tuiles{container-type:inline-size;flex-wrap:nowrap;gap:6px;justify-content:flex-start;align-items:flex-start;padding-bottom:8px}
  .tuile{width:min(84px,48cqw);min-height:76px;padding:5px 4px 12px;gap:2px}
  .tuile.prevue,.tuile.dos,.tuile.a-reveler{min-height:76px}
  .tuile .t-emb{width:28px;height:30px;padding:4px}
  .tuile .n{font-size:11px}
  .tuile .n small{display:none}
  .tuiles:has(> .tuile:nth-child(3 of .tuile)) > .tuile{width:31cqw}
  .tuiles:has(> .tuile:nth-child(3 of .tuile)) > .tuile .n{font-size:10.5px}
  .tuiles:has(> .tuile:nth-child(3 of .tuile)) > .tuile .pts{width:22px;height:22px;margin-left:-11px;bottom:-7px}
  .tuiles:has(> .tuile:nth-child(3 of .tuile)) > .tuile .pts b{font-size:12px}
  .tuiles:has(> .tuile:nth-child(4 of .tuile)) > .tuile{width:23cqw;min-height:68px;padding:4px 2px 11px}
  .tuiles:has(> .tuile:nth-child(4 of .tuile)) > .tuile.prevue,.tuiles:has(> .tuile:nth-child(4 of .tuile)) > .tuile.dos,.tuiles:has(> .tuile:nth-child(4 of .tuile)) > .tuile.a-reveler{min-height:68px}
  .tuiles:has(> .tuile:nth-child(4 of .tuile)) > .tuile .t-emb{width:24px;height:26px;padding:3px}
  .tuiles:has(> .tuile:nth-child(4 of .tuile)) > .tuile .n{font-size:9.5px;line-height:1.05;overflow-wrap:anywhere}
}
@media (min-width:1500px) and (min-height:1300px){
  .tuiles:not(:has(> .tuile:nth-child(3 of .tuile))) > .tuile{min-height:104px;padding:6px 4px 14px;gap:3px}
  .tuiles:not(:has(> .tuile:nth-child(3 of .tuile))) > .tuile .t-emb{width:36px;height:40px}
  .tuiles:not(:has(> .tuile:nth-child(3 of .tuile))) > .tuile .n{font-size:12px}
  .tuiles:not(:has(> .tuile:nth-child(3 of .tuile))) > .tuile .n small{display:block}
}

/* ── Ordinateur : trois lignes nettes sur le plateau (04/10/2026) ──────────
   Chaque mission avait sa propre grille : celle où l'ordinateur posait un
   saint descendait, et la rangée des six missions se mettait en dents de scie
   (le défaut déjà corrigé sur téléphone le 29/09). Les trois étages sont
   désormais partagés par toute la rangée : les saints de l'adversaire sur une
   ligne, la bande des missions sur une ligne, vos saints sur une ligne. Tant
   que l'adversaire n'a rien posé, son étage reste une simple bande. Une seule
   rangée de missions est concernée (1240 px et plus) ; sans subgrid, rien ne
   change. */
@media (min-width:1240px) and (min-height:560px){
  @supports (grid-template-rows:subgrid){
    .table > .plateau{grid-template-rows:auto auto minmax(0,1fr);grid-auto-rows:unset;row-gap:0}
    .table > .plateau:has(.cote-lui:not(.cote-vide)){grid-template-rows:minmax(0,1fr) auto minmax(0,1fr)}
    .table .plateau > .mission{grid-row:1 / span 3;grid-template-rows:subgrid!important}
  }
}

/* ── Ordinateur : la fin de partie et la pochette prennent leur place (04/10/2026) ──
   La fenêtre de fin faisait 640 px de large sur un écran de 1366 : la Nuée s'y
   empilait sur deux rangées, et la pochette du jour, la récompense, tombait sous
   le bas de la fenêtre. Élargie, tout tient sans défiler. La pochette et ses
   cartes, petites et collées en haut, s'agrandissent : c'est le moment attendu. */
@media (min-width:1100px) and (min-height:600px){
  #fin{width:min(1060px,94vw);max-width:none}
}
@media (min-width:1100px) and (min-height:700px){
  .ouv-pochette{width:290px}
  .ouv-pile{zoom:1.3;gap:22px}
  .ouv-rubrique{font-size:15px}
  .ouv-consigne{font-size:16px}
}
@media (min-width:1100px) and (min-height:950px){
  .ouv-pochette{width:340px}
  .ouv-pile{zoom:1.55}
}

/* ── Le cadre d'un camp ne déborde plus (04/10/2026) ──────────────────────
   À 1366 px, le cadre fait 220 px : « plus qu'une ! » sortait du cadre et
   mordait sur le voisin, et une Nuée de plus de sept saints passait sur deux
   lignes, ce qui grandissait tout le bandeau et poussait le plateau. Quand
   l'alerte s'affiche, le mot « harmonies » lui laisse la place (les losanges le
   disent déjà) ; les pastilles de la Nuée se chevauchent pour tenir en une
   ligne. */
@media (min-width:761px){
  .camp .chemin-graces.presque small{display:none}
  .camp .chemin-graces .alerte{margin-left:2px}
  .camp .nuee{white-space:nowrap;overflow:hidden;display:flex;align-items:center;gap:3px;min-width:0;max-width:100%}
  .camp .nuee:has(.point-vertu:nth-of-type(8)) .point-vertu{margin-left:-7px}
  .camp .nuee:has(.point-vertu:nth-of-type(8)) .point-vertu:first-of-type{margin-left:0}
  .camp .nuee:has(.point-vertu:nth-of-type(13)) .point-vertu{margin-left:-11px}
  .camp .nuee:has(.point-vertu:nth-of-type(13)) .point-vertu:first-of-type{margin-left:0}
}

/* ── La Chronique : des saints, pas des lignes de liste (04/10/2026) ──────
   Les saints à envoyer n'étaient que des lignes de texte, loin des cartes du
   reste du jeu. Chacun porte désormais son emblème dans un médaillon de vélin
   à sa couleur, et sa force dans le losange d'or des cartes. Sur ordinateur,
   la liste passe sur deux colonnes : deux fois plus de saints sous les yeux. */
.ch-saint{padding:7px 12px 7px 8px;border-radius:10px;gap:11px;transition:border-color .15s ease,background .15s ease,transform .15s ease}
.ch-saint:hover:not(:disabled){transform:translateY(-1px)}
.ch-saint.pris{box-shadow:0 0 0 1px #D9BD7A,0 0 14px rgba(217,189,122,.28)}
.ch-emb{width:38px;height:38px;border-radius:50%;padding:7px;box-sizing:border-box;
  background:radial-gradient(circle at 50% 40%,#FFFDF6 0 34%,color-mix(in srgb,var(--c) 18%,#F7EEDB) 100%);
  border:1.5px solid color-mix(in srgb,var(--c) 62%,#C9A55A);box-shadow:0 2px 6px rgba(0,0,0,.35)}
.ch-emb .mini{width:100%;height:100%}
.ch-pts{width:26px;height:26px;display:grid;place-items:center;transform:rotate(45deg);border-radius:4px;margin:0 6px;
  background:linear-gradient(135deg,#F3DE9C,#C9A55A);border:1.5px solid #FBF7EE;box-shadow:0 2px 6px rgba(0,0,0,.35);color:#2A1D05}
.ch-pts b{transform:rotate(-45deg);font-size:14px;line-height:1}
@media (min-width:761px){
  .ch-liste{grid-template-columns:repeat(2,minmax(0,1fr));gap:7px 10px}
}

/* ── Accueil sur tablette (761–1000 px) : composition centrée, éventail entier, croix dégagée ── */
.accueil-plein .acc-barre{padding-right:30px}
@media (min-width:761px) and (max-width:1000px){
  .accueil-plein .acc-gauche{justify-items:center;text-align:center}
  .accueil-plein .vitrine{justify-self:center;height:auto;margin:10px 0 20px;position:relative}
  .accueil-plein .vitrine::before{content:"";position:absolute;inset:-14% -22%;background:radial-gradient(closest-side,rgba(217,189,122,.2),rgba(217,189,122,.05) 55%,transparent 72%);pointer-events:none}
  .accueil-plein .vitrine-carte{width:150px;margin:0 -12px;position:relative}
  .accueil-plein .vitrine-carte .carte{zoom:.8}
  .accueil-plein .acc-gauche h1{font-size:64px}
  .accueil-plein .acc-gauche .chapeau{margin-inline:auto;font-size:19px;max-width:46ch}
  .accueil-plein .jouer-zone{justify-items:center}
}
/* En-tête de la table sur tablette : les boutons sur une ligne, l'état de la partie dessous. */
@media (min-width:761px) and (max-width:1000px){
  .haut .etat{order:9;flex:1 0 100%;text-align:left;margin:0}
  .haut .marque{margin-right:auto}
  .accueil-plein .vitrine{margin-bottom:34px}
}
@media (min-width:761px) and (max-width:1000px){ .accueil-plein .reprendre-ligne{justify-content:center} }

/* ── Tablette et petit ordinateur (761–1239 px) : les rangées du plateau s'alignent aussi (05/10/2026) ──
   Même principe qu'au-dessus de 1240 px, mais les missions peuvent ici tenir sur
   deux rangées de trois : les étages se répètent donc par groupes de trois lignes. */
@media (min-width:761px) and (max-width:1239px) and (min-height:560px){
  @supports (grid-template-rows:subgrid){
    .table > .plateau{grid-template-rows:none;grid-auto-rows:auto auto minmax(min-content,1fr);row-gap:0}
    .table > .plateau:has(.cote-lui:not(.cote-vide)){grid-auto-rows:minmax(min-content,1fr) auto minmax(min-content,1fr)}
    .table .plateau > .mission{grid-row:span 3;grid-template-rows:subgrid!important}
    .table .plateau > .mission:nth-child(n+4){margin-top:8px}
    /* Quand la place manque (six missions), chaque étage garde sa hauteur utile et c'est le plateau
       entier qui défile : un seul défilement au doigt, au lieu d'une petite barre dans chaque case. */
    .table .plateau > .mission > .cote{overflow:visible;min-height:38px;contain:none;grid-template-rows:auto auto minmax(min-content,1fr)}
    .table .plateau > .mission > .cote .tuiles{min-height:min-content}
  }
}
#fin h2{margin-bottom:10px}
/* La pochette sur tablette : la récompense prend sa place, comme sur ordinateur. */
@media (min-width:700px) and (max-width:1099px) and (min-height:900px){
  .ouv-pochette{width:300px}
  .ouv-pile{zoom:1.4;gap:20px}
}
@media (min-width:700px) and (max-width:1099px) and (min-height:900px){
  .ouv-pile:has(.ouv-carte:nth-child(3)){zoom:1.15}
}
/* Lisibilité : le sur-titre de l'accueil ne descend plus sous 12 px. */
.acc-marque span{font-size:12px}

/* ── Bandeau des camps entre 761 et 1239 px, écran bas (iPad couché, petit portable) — 06/10/2026 ──
   Les deux camps prenaient toute la largeur et les appels secrets, relégués dans une troisième
   colonne de largeur nulle, sortaient de l'écran : le joueur ne voyait plus ses appels, et la
   rangée s'étirait en hauteur. Deux colonnes pour les camps, les appels sur leur propre ligne. */
@media (min-width:761px) and (max-width:1239px) and (max-height:860px){
  .score{grid-template-columns:repeat(2,minmax(0,1fr))}
  .score > .appels{grid-column:1 / -1}
}

/* ── Retouches du balayage d'affichage (06/10/2026) ──
   Le « × » qui retire une carte posée faisait 16 × 15 px : trop petit pour un doigt. */
.tuile.prevue{padding-right:30px}
.tuile.prevue .retirer{top:50%;right:0;transform:translateY(-50%);width:30px;height:30px;display:grid;place-items:center;padding:0;font-size:18px}
#atelier-liste .retirer{min-width:30px;min-height:30px}
/* Le récit en tiroir : opaque, pour qu'on ne lise pas le plateau à travers. */
.recit-zone.ouvert{background:linear-gradient(180deg,#171f47,#090d22);box-shadow:0 18px 50px rgba(0,0,0,.55)}
/* Le titre de l'en-tête reste une cible confortable. */
.haut .marque{min-height:30px;align-content:center}
@media (max-width:760px){
  /* Sur téléphone la tuile posée est étroite : le « × » va dans le coin, sans rogner le nom. */
  .tuile.prevue{padding-right:0}
  .tuile.prevue .retirer{top:0;right:0;transform:none;width:28px;height:28px}
  /* La règle du lieu, coupée à deux lignes, laissait voir le haut de la troisième dans sa marge basse. */
  .plaque .lieu{padding-bottom:0;border-bottom:2px solid transparent}
}

/* ── Le récit : la ligne « œuvre accomplie » redevient lisible (06/10/2026) ──
   Elle porte la classe « mission », comme les tuiles du plateau, et héritait de leur grille à
   trois étages et de leur débordement masqué : écrasée à 14 px de haut, son texte ne se voyait
   plus. C'est la ligne la plus importante du récit. */
.recit li.mission{display:block;overflow:visible;grid-template-rows:none;min-height:auto;flex:none;border-top:0;border-right:0;border-radius:0;box-shadow:none;transition:none}
/* Confier un saint à la Nuée : le « ✦ » faisait 24 × 24 px. */
.tuile .confier,.confier{min-width:30px;min-height:30px}
/* Le total d'un camp sur une mission (« 0 / 10 ») ne se coupe plus en deux lignes dans une colonne
   étroite : c'est la mention « encore N » qui cède la place. */
/* (Corrigé le jour même : tenir le total sur une ligne sans le laisser passer à la suivante élargissait
   la case au-delà de sa colonne, et rognait total et boutons. Le total reste insécable, mais l'en-tête
   peut se replier ; rien dans la case ne dépasse plus sa largeur.) */
.cote-tete .tot{white-space:nowrap}
.cote-tete .manque{min-width:0;overflow:hidden;text-overflow:ellipsis}
@media (min-width:761px){ .cote-tete{flex-wrap:wrap;row-gap:0} }
.cote > *{min-width:0;max-width:100%}
/* Une carte en vol part parfois d'un bout de main hors écran : elle ne doit pas élargir la page. */
html{overflow-x:clip}
/* « Poser ici » ne descend plus sous 30 px de haut (il tombait à 26 px sur un plateau chargé). */
.poser-ici{min-height:30px}
/* Le ruban « Fêté ce mois · −1 Élan » dépasse au-dessus de la carte : sur un écran bas (1024 × 768),
   la main n'avait pas assez de marge et le coupait de moitié. */
.main:has(.ruban){padding-top:25px}   /* 25 px : la carte choisie se soulève, son ruban avec elle */

/* ── L'accueil d'un joueur confirmé prend la même allure que celui du premier venu (07/10/2026) ──
   Il gardait trois petites cartes en haut à gauche, un grand vide au milieu, et le journal des
   versions en guise de colonne de droite. Les cartes du jour deviennent l'illustration, à droite et
   en grand ; le titre et « Jouer » à gauche ; les façons de jouer dessous ; les nouveautés ensuite,
   sur toute la largeur (le bloc a été descendu sous les portes dans la page). */
.acc-scene{grid-template-columns:minmax(0,1fr)}
.acc-droite{margin-top:clamp(16px,2.6vh,26px)}
@media (min-width:900px){ .acc-droite .quoi-neuf ul{grid-template-columns:repeat(3,minmax(0,1fr));gap:6px 26px} }
@media (min-width:1100px) and (min-height:620px){
  .accueil-plein:not(.debutant) .acc-scene{grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);column-gap:48px;row-gap:10px;align-items:start}
  .accueil-plein:not(.debutant) .acc-gauche{display:contents}
  .accueil-plein:not(.debutant) .acc-gauche > *{grid-column:1}
  .accueil-plein:not(.debutant) .vitrine{grid-column:2;grid-row:1 / span 7;align-self:center;justify-self:center;height:auto;margin:0;position:relative}
  .accueil-plein:not(.debutant) .vitrine::before{content:"";position:absolute;inset:-12% -18%;background:radial-gradient(closest-side,rgba(217,189,122,.2),rgba(217,189,122,.05) 55%,transparent 72%);pointer-events:none}
  .accueil-plein:not(.debutant) .vitrine-carte{width:clamp(150px,12.5vw,190px);margin:0 clamp(-22px,-1.4vw,-16px);position:relative}
  .accueil-plein:not(.debutant) .vitrine-carte .carte{zoom:.82}
  .accueil-plein:not(.debutant) .acc-gauche h1{font-size:clamp(46px,5vw,68px)}
  .accueil-plein:not(.debutant) .acc-gauche .chapeau{font-size:18px;max-width:46ch}
  .accueil-plein:not(.debutant) .portes{grid-template-columns:repeat(3,minmax(0,1fr))}
}
/* Les portes de l'accueil : une flèche qui invite, un relief qui répond au survol et au toucher. */
.accueil-plein .porte{position:relative;padding-right:40px;transition:transform .18s ease,border-color .18s ease,background .18s ease,box-shadow .18s ease}
.accueil-plein .porte::after{content:"→";position:absolute;right:14px;top:50%;transform:translateY(-50%);font-size:18px;color:#D9BD7A;opacity:.5;transition:transform .18s ease,opacity .18s ease}
.accueil-plein .porte:hover,.accueil-plein .porte:focus-visible{transform:translateY(-2px);box-shadow:0 10px 26px rgba(0,0,0,.35),0 0 0 1px rgba(217,189,122,.35) inset}
.accueil-plein .porte:hover::after,.accueil-plein .porte:focus-visible::after{opacity:1;transform:translate(4px,-50%)}
.accueil-plein .porte:active{transform:translateY(0) scale(.99)}
@media (prefers-reduced-motion:reduce){ .accueil-plein .porte,.accueil-plein .porte::after{transition:none} }
/* Entre 1001 et 1099 px (iPad couché, petit portable), l'accueil gardait l'ancienne mise en page, la
   première carte rognée par le bord : même écran-titre, à l'échelle. */
@media (min-width:1001px) and (max-width:1099px) and (min-height:620px){
  .accueil-plein .acc-scene{grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);column-gap:28px;row-gap:10px;align-items:start}
  .accueil-plein .acc-gauche{display:contents}
  .accueil-plein .acc-gauche > *{grid-column:1}
  .accueil-plein .vitrine{grid-column:2;grid-row:1 / span 7;align-self:center;justify-self:center;height:auto;margin:0;position:relative}
  .accueil-plein .vitrine::before{content:"";position:absolute;inset:-12% -14%;background:radial-gradient(closest-side,rgba(217,189,122,.2),rgba(217,189,122,.05) 55%,transparent 72%);pointer-events:none}
  .accueil-plein .vitrine-carte{width:138px;margin:0 -14px;position:relative}
  .accueil-plein .vitrine-carte .carte{zoom:.74}
  .accueil-plein .acc-gauche h1{font-size:50px}
  .accueil-plein .portes{grid-template-columns:repeat(3,minmax(0,1fr))}
}
/* Le bandeau « Fêté aujourd'hui » coupait les noms sur téléphone les jours à plusieurs saints : il se replie. */
@media (max-width:760px){ .fete-jour{white-space:normal;overflow:visible;text-overflow:clip} }

/* ── Plateau à six colonnes (1240 px et plus) : l'en-tête de votre côté, pareil dans chaque colonne ──
   Selon la longueur des nombres, « Vous · encore 12 · 0 / 12 » tenait sur une ligne ici et se repliait
   là : les colonnes ne s'alignaient plus. Partout : « Vous » et le total sur la première ligne,
   « encore N » dessous, à droite. */
@media (min-width:1240px){
  .cote-moi .cote-tete{flex-wrap:wrap;row-gap:1px}
  .cote-moi .cote-tete .tot{margin-left:auto}
  .cote-moi .cote-tete .manque{order:3;flex:1 0 100%;margin:0;text-align:right}
}

/* Effets longs : un corps un peu plus petit, pour que la dernière ligne tienne dans la carte. */
.carte .c-effet.long{font-size:10.8px;line-height:1.22}
.carte .c-effet.tres-long{font-size:10.2px;line-height:1.2}

/* ── La règle : un sommaire en tête (09/10/2026) ── */
.regle-sommaire{display:flex;flex-wrap:wrap;gap:6px;margin:10px 0 16px;padding-bottom:12px;border-bottom:1px solid rgba(217,189,122,.2)}
.regle-sommaire button{font:inherit;font-family:var(--sc,serif);font-size:12.5px;letter-spacing:.04em;color:#E6CB86;background:rgba(217,189,122,.08);border:1px solid rgba(217,189,122,.3);border-radius:999px;padding:5px 12px;min-height:30px;cursor:pointer;white-space:nowrap;transition:background .15s ease,border-color .15s ease}
.regle-sommaire button:hover,.regle-sommaire button:focus-visible{background:rgba(217,189,122,.2);border-color:#D9BD7A;color:#FFF3C4}
#regle .regle-texte h3{scroll-margin-top:14px}
@media (max-width:760px){
  /* Sur téléphone : une seule rangée qui défile au doigt et reste en vue pendant la lecture. */
  .regle-sommaire{flex-wrap:nowrap;overflow-x:auto;position:sticky;top:0;z-index:2;margin:6px -4px 12px;padding:8px 4px;background:linear-gradient(180deg,#10173a 78%,rgba(16,23,58,0));scrollbar-width:none}
  .regle-sommaire::-webkit-scrollbar{display:none}
  #regle .regle-texte h3{scroll-margin-top:58px}
}

/* ── La carte fait de la place à son effet (10/10/2026) ──
   L'effet occupait « ce qui reste » sous l'emblème : dans les cartes les plus petites (fiche d'un
   saint, réponse de la Chronique), un effet long perdait sa dernière ligne. C'est maintenant
   l'emblème qui cède un peu de hauteur quand le texte en a besoin, jamais le texte qui est coupé. */
.carte .c-niche{flex:0 1 auto;min-height:46px}
.carte .c-effet{flex:0 0 auto}
.carte .c-pied{margin-top:auto}
/* Sur téléphone, la carte d'une fiche (ou d'une réponse de la Chronique) était réduite à 160 × 240 :
   trop petite pour les effets longs. Elle garde sa taille de base, où tout tient. */
@media (max-width:760px){ .fiche-grille .carte{width:190px;height:265px} }

/* ── L'éclat des cartes, comme dans l'album (11 octobre 2026) ──────────
   L'Or et l'Argent : la bande de lumière qui traverse la carte porte maintenant des
   paillettes et une teinte de métal. En main, la carte survolée prend un reflet qui suit
   le curseur. La finition reste un habit : elle ne donne aucun avantage. */
.carte.fin-or{--reflet:rgba(236,176,58,.26);--reflet2:rgba(255,238,176,.6)}
.carte.fin-argent{--reflet:rgba(132,164,230,.24);--reflet2:rgba(238,244,255,.62)}
.carte.fin-or::after,.carte.fin-argent::after{
  background:radial-gradient(circle,#fff 0 .7px,transparent 1.7px) 0 0/13px 13px,
    radial-gradient(circle,#fff 0 .5px,transparent 1.4px) 6px 4px/19px 19px,
    linear-gradient(112deg,var(--reflet),var(--reflet2) 50%,var(--reflet));
  -webkit-mask:linear-gradient(112deg,transparent 34%,#000 47%,transparent 62%) 130% 0/280% 100%;
  mask:linear-gradient(112deg,transparent 34%,#000 47%,transparent 62%) 130% 0/280% 100%;
  animation:reflet-masque 7s ease-in-out infinite;mix-blend-mode:normal;opacity:1;
}
@keyframes reflet-masque{0%{-webkit-mask-position:130% 0;mask-position:130% 0}55%,100%{-webkit-mask-position:-40% 0;mask-position:-40% 0}}
.carte-btn::after{content:"";position:absolute;inset:0;border-radius:14px;pointer-events:none;opacity:0;transition:opacity .25s;mix-blend-mode:soft-light;
  background:radial-gradient(circle at var(--gx,50%) var(--gy,30%),rgba(255,255,255,.55),rgba(255,255,255,.14) 28%,transparent 54%)}
@media (hover:hover){ .carte-btn:not(:disabled):hover::after{opacity:1} }
@media (prefers-reduced-motion:reduce){ .carte-btn::after{display:none} }

/* ── Le témoin mystère : la devinette du jour (12 octobre 2026) ───────── */
.my-regle{color:#C9CFE8;max-width:62ch;margin-top:6px}
.my-liste{list-style:none;padding:0;margin:14px 0 0;display:grid;gap:8px}
.my-essai{display:grid;gap:7px;padding:10px 12px;border:1px solid rgba(217,189,122,.22);border-radius:10px;background:rgba(255,255,255,.03)}
.my-essai b{font-family:var(--display);font-style:italic;font-weight:500;font-size:19px;line-height:1.15}
.my-essai.my-bon{border-color:#D9BD7A;box-shadow:0 0 18px rgba(217,189,122,.3)}
.my-cases{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px}
.my-case{display:grid;align-content:start;gap:1px;padding:6px 8px;border-radius:8px;font-size:14px;line-height:1.2;background:rgba(255,255,255,.07);color:#E8EAF6;min-width:0;overflow-wrap:anywhere}
.my-case small{font-family:var(--sc);font-size:11.5px;letter-spacing:.1em;opacity:.85}
.my-case i{font-size:12.5px;opacity:.95}
.my-case.my-oui{background:#2F6B4A;color:#fff}
.my-case.my-proche{background:#8A6A1F;color:#fff}
.my-indices{list-style:none;padding:12px 14px;margin:14px 0 0;display:grid;gap:10px;border-left:3px solid #D9BD7A;background:rgba(217,189,122,.07);border-radius:0 10px 10px 0}
.my-indices li{display:flex;align-items:center;gap:12px;color:#E8EAF6}
.my-emb{flex:none;width:54px;height:60px;border-radius:27px 27px 5px 5px;background:radial-gradient(circle at 50% 45%,#FFFDF6 0 30%,#F2E6CB 100%);color:var(--c);padding:9px 8px 7px;display:grid;place-items:center}
.my-emb svg{width:100%;height:100%}
.my-saisie{margin-top:16px;display:grid;gap:6px}
.my-saisie label{font-family:var(--sc);font-size:13px;letter-spacing:.1em;color:#D9BD7A}
.my-saisie > div{display:flex;gap:8px;flex-wrap:wrap}
.my-saisie input{flex:1 1 220px;min-width:0;font:inherit;font-size:17px;padding:10px 12px;border-radius:8px;border:1px solid rgba(217,189,122,.5);background:#0E1430;color:#F6EFD9}
.my-saisie input::placeholder{color:#8F97BC}
.my-saisie input:focus-visible{outline:2px solid #D9BD7A;outline-offset:2px}
.my-fin{margin-top:16px;display:grid;gap:10px}
.my-revele{display:flex;gap:18px;flex-wrap:wrap;align-items:flex-start}
.my-revele .emplacement{background:none;border:0;padding:0;cursor:pointer;flex:none}
.my-revele > div{flex:1 1 240px;display:grid;gap:8px;justify-items:start}
.my-revele h3{font-family:var(--display);font-style:italic;font-weight:500;font-size:24px;line-height:1.1}
@media (max-width:600px){
  .my-cases{grid-template-columns:repeat(2,minmax(0,1fr))}
  .my-revele{justify-content:center}
  .my-revele .carte{zoom:.8}
}

/* Le lien de soutien : une cible assez haute pour le doigt. */
.soutenir a{display:inline-block;padding:4px 0}

/* La fiche d'un saint dit à qui il est lié (12 octobre 2026). */
.f-liens{margin:0;display:flex;flex-wrap:wrap;align-items:center;gap:6px 8px;font-size:14.5px;color:#C9CFE8}
.f-liens b{font-family:var(--sc);font-size:12.5px;letter-spacing:.1em;color:#D9BD7A;font-weight:500}
.f-liens span{flex:1 0 100%;font-size:13px;font-style:italic;color:#9EA6C8}
.lien-saint{background:rgba(217,189,122,.1);border:1px solid rgba(217,189,122,.4);color:#F1E6C4;border-radius:999px;padding:5px 12px;font:inherit;font-size:14px;min-height:30px;cursor:pointer}
.lien-saint:hover,.lien-saint:focus-visible{background:rgba(217,189,122,.22)}

/* ── Les fils de la Nuée : la chaîne à relier (12 octobre 2026) ───────── */
.fi-but{display:flex;align-items:center;justify-content:center;gap:14px;margin:14px 0 4px;padding:12px;border:1px solid rgba(217,189,122,.25);border-radius:12px;background:rgba(255,255,255,.03)}
.fi-saint{display:grid;justify-items:center;gap:4px;text-align:center;flex:1 1 0;min-width:0}
.fi-saint b{font-family:var(--display);font-style:italic;font-weight:500;font-size:18px;line-height:1.15}
.fi-saint small{font-size:12.5px;color:#9EA6C8}
.fi-fleche{font-size:26px;color:#D9BD7A;flex:none}
.fi-chaine{margin:12px 0 0;padding:10px 14px 10px 34px;display:grid;gap:5px;border-left:3px solid #D9BD7A;background:rgba(217,189,122,.07);border-radius:0 10px 10px 0;color:#E8EAF6;font-size:15px;line-height:1.4}
.fi-ou{margin:14px 0 8px;color:#E8EAF6}
.fi-ou i{color:#E6CB86}
.fi-choix{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:8px}
.fi-choix button{display:grid;gap:3px;text-align:left;padding:10px 12px;border-radius:10px;border:1px solid rgba(217,189,122,.35);background:rgba(255,255,255,.04);color:#F1E6C4;font:inherit;cursor:pointer;min-height:44px}
.fi-choix button:hover,.fi-choix button:focus-visible{background:rgba(217,189,122,.16);border-color:#D9BD7A}
.fi-choix b{font-family:var(--display);font-style:italic;font-weight:500;font-size:17px}
.fi-choix span{font-size:13.5px;line-height:1.35;color:#B9C0DE}
.fi-fin{margin-top:14px;display:grid;gap:8px;color:#E8EAF6}
.fi-noms{display:flex;flex-wrap:wrap;gap:6px}
@media (max-width:600px){ .fi-but{gap:8px;padding:10px 8px} .fi-saint b{font-size:16px} }

/* L'emblème se trace à la plume quand la carte s'ouvre en grand : fiche, loupe, pochette, devinette (12 octobre 2026). */
.fiche-grille .c-niche svg path.trait,.loupe .c-niche svg path.trait,.ouv-carte.retournee .c-niche svg path.trait,.my-revele .c-niche svg path.trait,.my-emb svg path.trait{stroke-dasharray:1;stroke-dashoffset:1;animation:trace-embleme 1s cubic-bezier(.4,0,.2,1) .15s forwards}
.fiche-grille .c-niche svg path.trait:nth-of-type(2),.loupe .c-niche svg path.trait:nth-of-type(2),.ouv-carte.retournee .c-niche svg path.trait:nth-of-type(2),.my-emb svg path.trait:nth-of-type(2){animation-delay:.4s}
.fiche-grille .c-niche svg path.trait:nth-of-type(n+3),.loupe .c-niche svg path.trait:nth-of-type(n+3),.ouv-carte.retournee .c-niche svg path.trait:nth-of-type(n+3),.my-emb svg path.trait:nth-of-type(n+3){animation-delay:.6s}
@keyframes trace-embleme{to{stroke-dashoffset:0}}
@media (prefers-reduced-motion:reduce){ .c-niche svg path.trait,.my-emb svg path.trait{animation:none!important;stroke-dashoffset:0!important} }

/* ── Un cadre pour une carte (12 octobre 2026) : quatre enluminures offertes à tous, plus les cadres du carnet. ── */
body .carte.enl-filet{box-shadow:inset 0 0 0 2px #FBF7EE,inset 0 0 0 3.5px #C9A55A,inset 0 0 0 6px #FBF7EE,inset 0 0 0 7px #C9A55A,inset 0 -14px 24px rgba(120,96,48,.18),var(--ombre-portee)}
body .carte.enl-nuit{box-shadow:inset 0 0 0 5px #1A2452,inset 0 0 0 6.5px #D9BD7A,inset 0 -14px 24px rgba(26,36,82,.16),var(--ombre-portee)}
body .carte.enl-rubrique{box-shadow:inset 0 0 0 2px #FBF7EE,inset 0 0 0 5px #B5402E,inset 0 0 0 6px #F3DEA0,inset 0 -14px 24px rgba(120,96,48,.18),var(--ombre-portee)}
body .carte.enl-lierre{box-shadow:inset 0 0 0 2px #FBF7EE,inset 0 0 0 5px #4E7A52,inset 0 0 0 6px #F3DEA0,inset 0 -14px 24px rgba(120,96,48,.18),var(--ombre-portee)}
body .carte.cadre-aube{box-shadow:inset 0 0 0 3px #FBF7EE,inset 0 0 0 4.5px #E8A48F,0 6px 18px rgba(0,0,0,.45)}
body .carte.cadre-vitrail{box-shadow:inset 0 0 0 3px #FBF7EE,inset 0 0 0 4.5px #6A8FD4,0 6px 18px rgba(0,0,0,.45)}
body .carte.cadre-couronne{box-shadow:inset 0 0 0 3px #FBF7EE,inset 0 0 0 5px #D9BD7A,0 0 14px rgba(217,189,122,.45),0 6px 18px rgba(0,0,0,.45)}
.carte[class*="enl-"]::before,.carte[class*="cadre-"]::before{inset:9px}
.f-cadres{display:flex;flex-wrap:wrap;align-items:center;gap:6px 8px;margin-top:4px;padding-top:12px;border-top:1px solid rgba(217,189,122,.2)}
.f-cadres b{font-family:var(--sc);font-size:12.5px;letter-spacing:.1em;color:#D9BD7A;font-weight:500;margin-right:2px}
.f-cadres span{flex:1 0 100%;font-size:13px;font-style:italic;color:#9EA6C8}
.f-cadres button{background:rgba(255,255,255,.05);border:1px solid rgba(217,189,122,.35);border-left-width:6px;color:#F1E6C4;border-radius:8px;padding:5px 12px;font:inherit;font-size:14px;min-height:32px;cursor:pointer}
.f-cadres button[aria-pressed="true"]{background:rgba(217,189,122,.24);border-color:#D9BD7A}
.f-cadres .enl-filet{border-left-color:#C9A55A}.f-cadres .enl-nuit{border-left-color:#3A4C9A}.f-cadres .enl-rubrique{border-left-color:#B5402E}.f-cadres .enl-lierre{border-left-color:#4E7A52}
.f-cadres .cadre-aube{border-left-color:#E8A48F}.f-cadres .cadre-vitrail{border-left-color:#6A8FD4}.f-cadres .cadre-couronne{border-left-color:#D9BD7A}

/* ── Le tournoi d'un soir (12 octobre 2026) ───────────────────────────── */
.to-invite{margin:16px 0 0;padding-top:12px;border-top:1px solid rgba(217,189,122,.2);color:#C9CFE8;font-size:14.5px;display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px}
.to-saisie{display:grid;gap:8px;margin-top:14px}
.to-saisie label{font-family:var(--sc);font-size:13px;letter-spacing:.1em;color:#D9BD7A}
.to-saisie textarea{font:inherit;font-size:17px;line-height:1.5;padding:10px 12px;border-radius:8px;border:1px solid rgba(217,189,122,.5);background:#0E1430;color:#F6EFD9;resize:vertical;min-width:0}
.to-saisie textarea::placeholder{color:#8F97BC}
.to-saisie textarea:focus-visible{outline:2px solid #D9BD7A;outline-offset:2px}
.to-tableau{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:14px 18px;margin:14px 0 6px;align-items:start}
.to-tableau section{display:grid;gap:8px;align-content:start}
.to-tableau h3{font-family:var(--sc);font-size:13px;letter-spacing:.12em;color:#D9BD7A;font-weight:500}
.to-match{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;gap:6px;padding:6px;border:1px solid rgba(217,189,122,.22);border-radius:10px;background:rgba(255,255,255,.03)}
.to-match > span{color:#8F97BC}
.to-match button{min-height:38px;padding:6px 8px;border-radius:8px;border:1px solid rgba(217,189,122,.35);background:rgba(255,255,255,.05);color:#F1E6C4;font:inherit;font-size:15px;cursor:pointer;min-width:0;overflow-wrap:anywhere}
.to-match button[aria-pressed="true"]{background:#2F6B4A;border-color:#7FC79D;color:#fff;font-weight:600}
.to-match button:disabled{opacity:.55;cursor:default}
.to-office{margin:0;padding:8px 10px;border:1px dashed rgba(217,189,122,.3);border-radius:10px;color:#E8EAF6;font-size:15px}
.to-office span{color:#9EA6C8;font-style:italic;font-size:13.5px}

/* Le bouton « Fermer » au pied d'une fenêtre ne colle plus à son angle (peigne fin du 13 octobre). */
.dlg > .dlg-actions{padding:0 24px 20px;margin-top:0}

/* ── Les tableaux (15 octobre 2026) ───────────────────────────────────
   L'emblème ne tient plus dans une petite niche : il rayonne dans un tableau qui prend toute
   la largeur de la carte (un lieu, une heure, la lumière de la vertu ; voir tableaux.js).
   Le nom est posé sur le bas du tableau comme le cartouche d'un retable. L'ordre de lecture
   ne change pas : on lit le nom, puis l'effet. Le tableau cède de la hauteur à un effet long. */
.carte:has(.c-niche.tableau) .c-bande{order:1}
.carte .c-niche.tableau{order:2;flex:1 1 auto;width:auto;height:auto;min-height:62px;margin:5px 6px 0;padding:0;
  border:0;border-radius:8px 8px 3px 3px;background:#1a1f3a;color:inherit;isolation:isolate;
  box-shadow:0 0 0 1px color-mix(in srgb,var(--c) 40%,#C9A55A),0 0 0 2.5px rgba(255,250,235,.85),0 2px 5px rgba(0,0,0,.28)}
.carte .c-niche.tableau::after{background:linear-gradient(180deg,rgba(255,255,255,.18),transparent 30%);border-radius:inherit}
.carte .c-niche.tableau .tableau-svg{position:absolute;inset:0;width:100%;height:100%;display:block}
.carte:has(.c-niche.tableau) .c-nom{order:3;position:relative;z-index:2;margin:-21px 16px 0;padding:3px 6px 4px;border-radius:3px;
  background:linear-gradient(180deg,#FFFDF6,var(--velin));
  box-shadow:0 0 0 1px color-mix(in srgb,var(--c) 45%,#C9A55A),0 3px 8px rgba(10,14,40,.3)}
.carte:has(.c-niche.tableau) .c-effet{order:4}
.carte:has(.c-niche.tableau) .c-pied{order:5}
.carte.fin-or:has(.c-niche.tableau) .c-nom{box-shadow:0 0 0 1px #C9A55A,0 0 0 2.5px #F3DC94,0 3px 8px rgba(10,14,40,.3)}
.carte.fin-argent:has(.c-niche.tableau) .c-nom{box-shadow:0 0 0 1px #9FB2D8,0 0 0 2.5px #E3EAF7,0 3px 8px rgba(10,14,40,.3)}
/* Les événements ont aussi leur tableau : un ciel de nuées, sans lieu. L'ancien agrandissement de leur niche ne s'applique plus. */
#main .carte-btn .carte.evt .c-niche.tableau{flex:1 1 auto;margin:5px 6px 0;transform:none}
/* La mention du vrai visage, sous la vie du saint (15 octobre 2026). */
/* La légende du tableau (22 octobre 2026) : ce que montre le lieu peint, pour le collectionneur curieux. */
.f-lieu{font-size:14px;font-style:italic;color:#C9CEE3;margin-top:8px}
.f-meme{margin-top:6px}
/* À l'ouverture de la pochette, la légende du tableau sous le nom du saint (24 octobre 2026). */
.ouv-lieu{margin:4px auto 0;max-width:46ch;font-size:13.5px;font-style:italic;color:#D9BD7A;opacity:.9}
.f-lieu b{font-style:normal;font-family:var(--sc);font-weight:500;letter-spacing:.1em;color:#D9BD7A;margin-right:4px}
.f-photo{font-size:13px;color:#9EA6C8;margin-top:6px}
.f-photo a{color:#C9CFE8;text-decoration:underline;text-underline-offset:2px}
/* Une carte à découvrir porte son étiquette au milieu du tableau, et non sur le cartouche du nom. */
.livre .manquante::after{inset:auto 0 66% 0}
/* Le livre de collection (20 octobre 2026) : un tableau de bord, et des cartes à découvrir épurées,
   leur tableau en grisaille et leur nom, sans le texte qui faisait un mur gris. */
.livre-bord{display:flex;flex-wrap:wrap;align-items:center;gap:14px 28px;margin:6px 0 4px}
.lb-anneau{display:flex;align-items:center;gap:12px}
.lb-anneau svg{width:56px;height:56px;transform:rotate(-90deg)}
.lb-fond{fill:none;stroke:rgba(217,189,122,.18);stroke-width:6}
.lb-plein{fill:none;stroke:#D9BD7A;stroke-width:6;stroke-linecap:round}
.lb-anneau b{display:block;font-family:var(--display);font-size:30px;line-height:1;color:#F6F0E0}
.lb-anneau span{font-size:13.5px;color:#C9CEE3}
.lb-fin{display:grid;gap:4px;min-width:min(100%,260px);flex:1;max-width:360px}
.lb-ligne{display:grid;grid-template-columns:56px minmax(0,1fr) auto;align-items:center;gap:8px;font-size:13.5px;color:#C9CEE3}
.lb-ligne i{height:6px;border-radius:99px;background:rgba(217,189,122,.16);overflow:hidden}
.lb-ligne i b{display:block;height:100%;border-radius:99px}
.lb-or i b{background:linear-gradient(90deg,#B98A2E,#F0D58A)}
.lb-argent i b{background:linear-gradient(90deg,#8C9BBE,#E3EAF7)}
.lb-image i b{background:#D9BD7A}
.lb-aide{font-size:13.5px;color:#9EA6C8;margin-top:6px}
.livre .manquante .carte .c-effet,.livre .manquante .carte .c-pied{visibility:hidden}
.livre .manquante .carte{filter:grayscale(1) brightness(.62) contrast(.9);opacity:.6}
/* Les modes de l'accueil ont leur vignette peinte (20 octobre 2026). */
.porte:has(.porte-art){grid-template-columns:64px minmax(0,1fr);grid-template-rows:auto 1fr;column-gap:12px;align-items:start}
.porte .porte-art{grid-row:1 / span 2;position:relative;width:64px;height:64px;border-radius:10px;overflow:hidden;
  box-shadow:0 0 0 1px rgba(217,189,122,.35),0 4px 12px rgba(0,0,0,.35);font-size:0}
.porte .porte-art .tableau-svg{position:absolute;inset:0;width:100%;height:100%}
.porte:has(.porte-art) strong,.porte:has(.porte-art) > span:not(.porte-art){grid-column:2}
.porte:hover .porte-art,.porte:focus-visible .porte-art{box-shadow:0 0 0 1px #D9BD7A,0 6px 16px rgba(0,0,0,.4)}
@media (max-width:760px){ .porte:has(.porte-art){grid-template-columns:52px minmax(0,1fr)} .porte .porte-art{width:52px;height:52px} }
/* La profondeur du tableau en grand (20 octobre 2026) : fiche, loupe, pochette. */
@property --dx{syntax:'<number>';inherits:true;initial-value:0}
@property --dy{syntax:'<number>';inherits:true;initial-value:0}
:is(.fiche-grille,.loupe,.ouv-carte) .carte .tableau-svg g[class^="tb-"]{transform-box:view-box;transform-origin:50% 60%;transition:transform .14s ease-out}
:is(.fiche-grille,.loupe,.ouv-carte) .carte .tb-c{transform:translate(calc(var(--dx) * -3px),calc(var(--dy) * -2px))}
:is(.fiche-grille,.loupe,.ouv-carte) .carte .tb-l{transform:translate(calc(var(--dx) * 4px),calc(var(--dy) * 2px)) scale(1.04)}
:is(.fiche-grille,.loupe,.ouv-carte) .carte .tb-p{transform:translate(calc(var(--dx) * 9px),calc(var(--dy) * 4px)) scale(1.1)}
:is(.fiche-grille,.loupe,.ouv-carte) .carte .tb-s{transform:translate(calc(var(--dx) * 12px),calc(var(--dy) * 7px))}
:is(.fiche-grille,.loupe,.ouv-carte) .carte:not(.profonde){animation:respire-profond 9s ease-in-out infinite}
@keyframes respire-profond{0%,100%{--dx:-.36;--dy:-.28}50%{--dx:.36;--dy:.22}}
/* Sur grand écran, la carte de la fiche se regarde en grand. */
@media (min-width:900px) and (min-height:700px){ .fiche-grille > .carte{zoom:1.3} }
@media (prefers-reduced-motion:reduce){ .carte .tableau-svg g[class^="tb-"]{transform:none!important} :is(.fiche-grille,.loupe,.ouv-carte) .carte{animation:none} }
/* Le nom ne fait plus étiquette collée (remarques de Mickaël, 15 octobre) : ni cartouche posé sur l'image, ni fondu
   qui la voile. Le tableau reste net jusqu'à son bord, fermé par un filet d'or, et le nom se pose dessous, sur le papier. */
.carte .c-niche.tableau{border-radius:8px 8px 2px 2px;box-shadow:0 0 0 1px color-mix(in srgb,var(--c) 35%,#C9A55A),0 2px 0 -0.5px #C9A55A}
.carte.fin-argent .c-niche.tableau{box-shadow:0 0 0 1px #9FB2D8,0 2px 0 -0.5px #B8C6E2}
.carte:has(.c-niche.tableau) .c-nom,.carte.fin-or:has(.c-niche.tableau) .c-nom,.carte.fin-argent:has(.c-niche.tableau) .c-nom{margin:5px 8px 0;padding:0 4px;background:none;box-shadow:none;border-radius:0;text-shadow:none}
/* Le nom d'une carte ne se laisse plus comprimer (remarque de Mickaël, 19 octobre : le texte des événements débordait par le bas) :
   c'est le tableau qui cède sa hauteur. Dans la main, la source d'un événement, illisible à cette taille, laisse sa place au titre. */
.carte:has(.c-niche.tableau) .c-nom{flex:0 0 auto}
.carte .c-niche.tableau{min-height:44px}
#main .carte-btn .carte.evt .c-pied{display:none}
#main .carte-btn .carte.evt .c-niche.tableau{min-height:40px}
#main .carte-btn .carte.evt:has(.c-niche.tableau) .c-nom{margin:6px 8px 8px;padding:0 6px}
#main .carte-btn .carte.evt .c-nom .c-titre{font-size:22px;line-height:1.15;text-wrap:balance;overflow-wrap:anywhere}
/* L'emblème de l'œuvre de miséricorde revient en filigrane, au coin de la plaque : il n'avait
   plus de colonne à aucune taille d'écran (24 octobre 2026). */
.plaque{position:relative;isolation:isolate}
.plaque .m-embleme{display:block!important;position:absolute;right:6px;bottom:5px;width:42px;height:42px;opacity:.17;z-index:-1;pointer-events:none;margin:0}
@media (max-width:760px){ .plaque .m-embleme{width:30px;height:30px;right:4px;bottom:3px;opacity:.2} }
@media (min-width:761px){ .plaque .m-embleme{right:52px;bottom:4px;width:32px;height:32px} }
/* Le bandeau peint des fenêtres des modes (24 octobre 2026). */
.mode-bandeau{position:relative;height:clamp(104px,24vw,150px);overflow:hidden;border-bottom:1px solid rgba(217,189,122,.35)}
.mode-bandeau .tableau-svg{position:absolute;inset:0;width:100%;height:100%;display:block}
.mode-bandeau::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(10,15,40,0) 45%,rgba(20,27,62,.95));pointer-events:none}

/* La fresque de fin de partie (24 octobre 2026) : chaque médaillon montre le tableau du saint, son lieu et son signe. */
.m-disque.peint{padding:0;overflow:hidden;background:#0B1030}
.m-disque.peint .tableau-svg{width:100%;height:100%;display:block}
.temoin-emb.peint{padding:0;overflow:hidden;background:#0B1030;width:76px;height:92px}
.temoin-emb.peint .tableau-svg{width:100%;height:100%;display:block}
/* Le témoin mystère : l'indice du paysage (24 octobre 2026). */
.my-tab{flex:none;width:96px;height:66px;border-radius:8px;overflow:hidden;box-shadow:0 0 0 1px rgba(217,189,122,.45),0 4px 12px rgba(0,0,0,.35)}
.my-tab .tableau-svg{width:100%;height:100%;display:block}
/* Les fils de la Nuée : les deux saints du chemin montrent leur arche peinte (24 octobre 2026). */
.my-emb.peint{padding:0;overflow:hidden;background:#0B1030}
.my-emb.peint .tableau-svg{width:100%;height:100%;display:block}
/* ══ L'accueil, à la manière d'un jeu d'aujourd'hui (24 octobre 2026) ══════════════════════
   Un fond peint (le paysage du saint du jour), le rang en médaille avec sa progression, le bandeau
   « Aujourd'hui », et les modes en grandes cartes illustrées avec leur état. */
.accueil-plein .dlg-corps{position:relative;isolation:isolate}
.accueil-plein .dlg-corps > .acc-fond{position:absolute;left:0;right:0;top:0;height:min(82vh,680px);z-index:0;overflow:hidden;pointer-events:none;opacity:.55;
  -webkit-mask-image:linear-gradient(180deg,#000 35%,transparent 100%),linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);-webkit-mask-composite:source-in;mask-image:linear-gradient(180deg,#000 35%,transparent 100%),linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);mask-composite:intersect}
.acc-fond .tableau-svg{position:absolute;inset:0;width:100%;height:100%;display:block}
.acc-fond::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(10,15,40,.94) 0%,rgba(10,15,40,.62) 42%,rgba(10,15,40,.2) 100%)}
@media (max-width:760px){ .accueil-plein .dlg-corps > .acc-fond{height:520px;opacity:.45} .acc-fond::after{background:linear-gradient(180deg,rgba(10,15,40,.35),rgba(10,15,40,.85))} }
.accueil-plein .acc-barre{position:relative}

/* Le rang : une médaille, deux lignes, une barre vers le rang suivant. */
.accueil-plein .acc-barre .rang-ligne:not(:empty){display:inline-flex;align-items:center;gap:10px;padding:5px 14px 5px 5px;border-radius:999px;
  background:rgba(10,15,40,.6);border:1px solid rgba(217,189,122,.35);backdrop-filter:blur(6px);font-size:13px}
.rang-sceau{flex:none;width:30px;height:30px;border-radius:50%;display:grid;place-items:center;font-size:14px;color:#2A1A08;
  background:radial-gradient(circle at 38% 32%,#FFF1C2,#D9B25A 55%,#9C7224);box-shadow:0 0 0 1px rgba(255,236,170,.5),0 2px 8px rgba(0,0,0,.4)}
.rang-txt{display:grid;line-height:1.1}
.accueil-plein .rang-ligne .rang-txt b{font-family:var(--display);font-style:italic;font-weight:500;font-size:17px;color:#FFE9A8}
.rang-txt small{font-size:12px;color:#C9CEE3}
.rang-barre{flex:none;width:84px;height:5px;border-radius:99px;background:rgba(217,189,122,.18);overflow:hidden}
.rang-barre i{display:block;height:100%;border-radius:99px;background:linear-gradient(90deg,#B98A2E,#F0D58A)}

/* Aujourd'hui : des puces qui se cochent. */
.aujourdhui{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:16px 0 2px}
.aujourdhui:empty,.accueil-plein.debutant .aujourdhui{display:none}
.aj-titre{font-family:var(--sc);font-size:12.5px;letter-spacing:.14em;color:#D9BD7A;margin-right:4px}
.aj{display:inline-flex;align-items:center;gap:8px;padding:7px 14px 7px 9px;border-radius:999px;cursor:pointer;font:inherit;font-size:14px;color:#ECE6D6;
  background:rgba(20,27,62,.72);border:1px solid rgba(217,189,122,.28);backdrop-filter:blur(6px);transition:border-color .15s,transform .15s}
.aj i{flex:none;width:18px;height:18px;border-radius:50%;display:grid;place-items:center;font-style:normal;font-size:11px;border:1.5px solid rgba(217,189,122,.6)}
.aj small{font-size:12px;color:#9EA6C8}
.aj.fait{color:#C9CEE3}
.aj.fait i{background:#D9BD7A;border-color:#D9BD7A;color:#1A1530}
.aj:hover,.aj:focus-visible{border-color:#D9BD7A;transform:translateY(-1px)}

/* Les modes : de grandes cartes peintes. */
.accueil-plein .portes{grid-template-columns:repeat(auto-fill,minmax(min(100%,258px),1fr))!important;gap:14px}
.accueil-plein .porte:has(.porte-art){display:flex;flex-direction:column;align-items:stretch;padding:0 0 14px;overflow:hidden;border-radius:14px;
  background:linear-gradient(180deg,rgba(24,32,85,.9),rgba(12,17,44,.95))}
.accueil-plein .porte .porte-art{position:relative;width:100%;height:auto;aspect-ratio:2/1;max-height:150px;flex:none;border-radius:0;box-shadow:none}
.accueil-plein .porte .porte-art::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(12,17,44,0) 35%,rgba(12,17,44,.96))}
.accueil-plein .porte:hover .porte-art,.accueil-plein .porte:focus-visible .porte-art{box-shadow:none}
.accueil-plein .porte:has(.porte-art) strong{position:relative;z-index:1;margin:-28px 16px 0;font-size:22px;text-shadow:0 2px 10px rgba(0,0,0,.6)}
.accueil-plein .porte:has(.porte-art) > span:not(.porte-art):not(.porte-etat){padding:4px 40px 0 16px}
.accueil-plein .porte::after{top:auto;bottom:14px;transform:none}
.accueil-plein .porte:hover::after,.accueil-plein .porte:focus-visible::after{transform:translateX(4px)}
.porte-etat{position:absolute;top:10px;right:10px;z-index:2;padding:3px 10px;border-radius:999px;font-family:var(--sc);font-size:12px;letter-spacing:.05em;
  color:#F1E6C4;background:rgba(10,15,40,.72);border:1px solid rgba(217,189,122,.45);backdrop-filter:blur(4px)}
.porte-etat.fait{background:#D9BD7A;border-color:#D9BD7A;color:#1A1530}
@media (max-width:760px){ .accueil-plein .porte .porte-art{aspect-ratio:5/2} .accueil-plein .porte:has(.porte-art) strong{font-size:20px} }
/* Sur téléphone : « Aujourd'hui » en une rangée qui défile, et les modes en grille de deux, comme les
   écrans d'accueil des jeux mobiles (l'image, le nom, l'état ; la phrase revient dès 521 px). */
@media (max-width:520px){
  .aujourdhui{flex-wrap:nowrap;overflow-x:auto;scroll-snap-type:x proximity;margin-right:-14px;padding:2px 14px 6px 0;scrollbar-width:none}
  .aujourdhui::-webkit-scrollbar{display:none}
  .aujourdhui > *{flex:none;scroll-snap-align:start}
  .accueil-plein .portes{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:10px}
  .accueil-plein .porte .porte-art{aspect-ratio:4/3}
  .accueil-plein .porte:has(.porte-art){padding-bottom:12px}
  .accueil-plein .porte:has(.porte-art) strong{margin:-22px 10px 0;font-size:17px;line-height:1.1}
  .accueil-plein .porte:has(.porte-art) > span:not(.porte-art):not(.porte-etat){display:none}
  .accueil-plein .porte::after{display:none}
  .porte-etat{top:7px;right:7px;font-size:11px;padding:2px 8px}
}
/* Au-delà du téléphone, le titre « Aujourd'hui » passe au-dessus des puces : les quatre tiennent sur une
   ligne ; sur tablette, où l'accueil est centré, la rangée l'est aussi. */
@media (min-width:521px){ .aj-titre{flex-basis:100%;margin:0 0 -2px} }
@media (min-width:761px) and (max-width:1000px){ .aujourdhui{justify-content:center} .aj-titre{text-align:center} }
@media (min-width:1001px){ .aujourdhui{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));max-width:540px;gap:8px} .aj-titre{grid-column:1/-1} .aj{border-radius:12px} .aj small{margin-left:auto} }

/* ══ Le compte, les nouveautés et le pied de l'accueil (26 octobre 2026) ═══════════════════════════
   Une carte de joueur, les nouveautés en cartes numérotées, les réglages et la règle en volets,
   les liens du pied en vrais boutons. */
.accueil-plein .compte-ligne{display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px;margin:16px 0 0;padding:10px 12px;
  border-radius:16px;background:linear-gradient(135deg,rgba(28,37,88,.82),rgba(14,20,50,.82));border:1px solid rgba(217,189,122,.3);
  backdrop-filter:blur(6px);box-shadow:0 10px 30px rgba(0,0,0,.25);max-width:620px;font-size:14px;color:#C9CEE3}
.compte-avatar{flex:none;width:42px;height:42px;border-radius:50%;display:grid;place-items:center;font-family:var(--display);font-style:italic;
  font-size:21px;color:#2A1A08;background:radial-gradient(circle at 38% 32%,#FFF1C2,#D9B25A 55%,#9C7224);box-shadow:0 0 0 2px rgba(10,15,40,.8),0 0 0 3px rgba(217,189,122,.55)}
.compte-avatar.sans{background:rgba(217,189,122,.12);color:#D9BD7A;font-style:normal;font-size:16px}
.compte-qui{display:grid;line-height:1.15;min-width:0;flex:1 1 140px}
.compte-qui small{font-family:var(--sc);font-size:11.5px;letter-spacing:.1em;color:#9EA6C8}
.compte-qui b{font-family:var(--display);font-style:italic;font-weight:500;font-size:18px;color:#F1E6C4}
.compte-ligne:has(.compte-avatar.sans) .compte-qui b{font-family:inherit;font-style:normal;font-size:14.5px;font-weight:500;color:#ECE6D6}
.compte-stat{display:grid;line-height:1.05;text-align:center;padding:0 14px;border-left:1px solid rgba(217,189,122,.22);border-right:1px solid rgba(217,189,122,.22)}
.compte-stat b{font-family:var(--display);font-size:24px;font-weight:500;color:#FFE9A8}
.compte-stat small{font-size:11.5px;color:#9EA6C8}
.compte-btn{flex:none;padding:9px 16px;border-radius:999px;font-family:var(--sc);font-size:13.5px;letter-spacing:.05em;text-decoration:none;
  color:#1A1530!important;background:linear-gradient(180deg,#F6E3A1,#D9B25A);box-shadow:0 2px 10px rgba(217,178,90,.25);transition:transform .15s,box-shadow .15s}
.compte-btn:hover,.compte-btn:focus-visible{transform:translateY(-1px);box-shadow:0 4px 16px rgba(217,178,90,.4)}
@media (max-width:520px){
  .accueil-plein .compte-ligne{gap:10px 12px}
  .compte-stat{border-right:0;padding-right:0}
  .compte-btn{flex:1 1 100%;text-align:center}
}

/* Les nouveautés : trois cartes numérotées. */
.accueil-plein .quoi-neuf{margin-top:clamp(22px,4vh,40px);padding:0;border:0;background:none;box-shadow:none}
.qn-tete{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;margin-bottom:12px}
.qn-neuf{padding:3px 10px;border-radius:999px;font-family:var(--sc);font-size:11.5px;letter-spacing:.1em;color:#1A1530;background:linear-gradient(180deg,#F6E3A1,#D9B25A)}
.qn-titre{margin:0;font-family:var(--sc);font-size:15px;letter-spacing:.06em;color:#F1E6C4}
.qn-titre i{font-family:var(--display);font-size:17px;letter-spacing:0;color:#E6CB86}
.qn-tete .lien-nouveautes{margin-left:auto;padding:8px 0}
.accueil-plein .quoi-neuf ul.qn-cartes{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr));gap:14px}
.qn-cartes a{position:relative;display:grid;align-content:start;gap:6px;height:100%;box-sizing:border-box;padding:16px 18px 18px;border-radius:14px;text-decoration:none;color:#C9CEE3;font-size:14px;line-height:1.5;
  background:linear-gradient(180deg,rgba(28,37,88,.75),rgba(14,20,50,.85));border:1px solid rgba(217,189,122,.22);transition:border-color .15s,transform .15s}
.qn-cartes a:hover,.qn-cartes a:focus-visible{border-color:rgba(217,189,122,.6);transform:translateY(-2px)}
.qn-num{font-family:var(--display);font-style:italic;font-size:26px;line-height:1;color:rgba(217,189,122,.5)}
.qn-cartes b{font-family:var(--display);font-style:italic;font-weight:500;font-size:19px;line-height:1.2;color:#F1E6C4}
.qn-texte{align-self:start;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:4;line-clamp:4;overflow:hidden}

/* Réglages et règle : deux volets côte à côte. */
.acc-pied{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr));gap:14px;align-items:start;margin-top:22px}
.accueil-plein .acc-volet{margin:0;padding:0;border:1px solid rgba(217,189,122,.22);border-radius:14px;background:rgba(14,20,50,.6)}
.accueil-plein .acc-volet[open]{grid-column:1/-1;background:rgba(14,20,50,.8)}
.acc-volet > summary{list-style:none;display:flex;align-items:center;gap:14px;padding:14px 16px;cursor:pointer;font-family:inherit;letter-spacing:0;color:inherit}
.acc-volet > summary::-webkit-details-marker{display:none}
.acc-volet > summary::after{content:"";margin-left:auto;width:9px;height:9px;border-right:2px solid #D9BD7A;border-bottom:2px solid #D9BD7A;transform:rotate(45deg) translateY(-3px);transition:transform .2s}
.acc-volet[open] > summary::after{transform:rotate(225deg) translateY(-3px)}
.acc-volet > summary:hover{background:rgba(217,189,122,.06);border-radius:13px}
.volet-ico{flex:none;width:40px;height:40px;border-radius:12px;display:grid;place-items:center;background:rgba(217,189,122,.12);border:1px solid rgba(217,189,122,.3)}
.volet-ico svg,.acc-action svg{width:20px;height:20px;fill:none;stroke:#E6CB86;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.volet-txt{display:grid;line-height:1.2}
.volet-txt b{font-family:var(--display);font-style:italic;font-weight:500;font-size:19px;color:#F1E6C4}
.volet-txt small{font-size:13px;color:#9EA6C8}
.acc-volet > :not(summary){margin-left:16px;margin-right:16px}
.acc-volet > :last-child{margin-bottom:16px}
.volet-astuce{text-align:left;margin-top:2px;padding:10px 12px;border-radius:10px;background:rgba(217,189,122,.07);border-left:3px solid rgba(217,189,122,.5)}

/* Le pied : deux boutons, une phrase, les remerciements. */
.acc-fin{margin-top:26px;padding-top:20px;border-top:1px solid rgba(217,189,122,.16);display:grid;gap:10px;justify-items:center;text-align:center}
.acc-actions{display:flex;flex-wrap:wrap;justify-content:center;gap:10px}
.acc-action{display:inline-flex;align-items:center;gap:9px;padding:10px 18px;border-radius:999px;font:inherit;font-size:14.5px;cursor:pointer;text-decoration:none;
  color:#F1E6C4;background:rgba(20,27,62,.7);border:1px solid rgba(217,189,122,.4);transition:border-color .15s,background .15s,transform .15s}
.acc-action:hover,.acc-action:focus-visible{border-color:#D9BD7A;background:rgba(217,189,122,.1);transform:translateY(-1px)}
.acc-fin .soutenir{margin:0;font-size:13px;color:#9AA2C4}
.acc-fin .credits{margin:0;padding:0;border:0;font-size:14px;color:rgba(217,189,122,.75);max-width:62ch}
@media (max-width:520px){
  .accueil-plein .acc-droite{grid-template-columns:minmax(0,1fr);min-width:0}
  .accueil-plein .quoi-neuf{min-width:0}
  .accueil-plein .quoi-neuf ul.qn-cartes{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:82%;overflow-x:auto;scroll-snap-type:x mandatory;
    margin-right:-14px;padding:2px 14px 8px 0;scrollbar-width:none}
  .qn-cartes::-webkit-scrollbar{display:none}
  .qn-cartes li{scroll-snap-align:start}
  .qn-texte{-webkit-line-clamp:3;line-clamp:3}
}

/* ══ Le haut de la table en tableau de score (26 octobre 2026) ═════════════════════════════════ */
.hud-lu{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
.etat .hud{display:inline-flex;align-items:center;justify-content:center;gap:10px;flex-wrap:nowrap;font-family:var(--sc);letter-spacing:.04em}
.hud small{font-size:10.5px;letter-spacing:.12em;color:#9EA6C8}
.hud-tour{display:inline-grid;grid-template-columns:auto auto auto;align-items:baseline;column-gap:4px;padding:4px 12px 6px;border-radius:12px;position:relative;
  background:rgba(20,27,62,.75);border:1px solid rgba(217,189,122,.3)}
.hud-tour b{font-family:var(--display);font-size:20px;line-height:1;color:#F1E6C4}
.hud-tour > i{font-style:normal;font-size:13px;color:#9EA6C8}
.hud-jauge{position:absolute;left:10px;right:10px;bottom:3px;height:2px;border-radius:2px;background:rgba(217,189,122,.15);overflow:hidden}
.hud-jauge i{display:block;height:100%;background:linear-gradient(90deg,#B98A2E,#F0D58A)}
.hud-score{display:inline-flex;align-items:stretch;border-radius:12px;overflow:hidden;border:1px solid rgba(217,189,122,.3);background:rgba(20,27,62,.75)}
.hud-camp{display:inline-flex;align-items:center;gap:8px;padding:3px 12px}
.hud-camp b{font-family:var(--display);font-size:24px;line-height:1;font-weight:500}
.hud-camp.moi{background:linear-gradient(90deg,rgba(217,189,122,.16),transparent)}
.hud-camp.moi b{color:#FFE9A8}
.hud-camp.lui{background:linear-gradient(270deg,rgba(150,160,210,.14),transparent)}
.hud-camp.lui b{color:#D5DAF0}
.hud-score.equipe .hud-camp b{color:#FFE9A8}
.hud-obj{display:inline-grid;justify-items:center;align-content:center;padding:2px 10px;border-left:1px solid rgba(217,189,122,.22);border-right:1px solid rgba(217,189,122,.22);line-height:1}
.hud-score.equipe .hud-obj{border-right:0}
.hud-obj small{font-size:9.5px}
.hud-obj b{font-size:15px;color:#E6CB86}
.hud-init{display:inline-flex;align-items:center;gap:6px;padding:4px 12px;border-radius:999px;border:1px solid rgba(150,160,210,.3);color:#C9CEE3}
.hud-init > span{font-size:14px;color:#9EA6C8}
.hud-init b{font-weight:600;color:#ECE6D6}
.hud-init.moi{border-color:rgba(217,189,122,.55);background:rgba(217,189,122,.1)}
.hud-init.moi > span{color:#F0D58A}
@media (max-width:760px){
  .etat .hud{gap:6px;justify-content:flex-start}
  .hud small{font-size:9.5px;letter-spacing:.08em}
  .hud-tour{padding:2px 9px 5px}
  .hud-tour b{font-size:17px}
  .hud-camp{padding:2px 8px;gap:5px}
  .hud-camp b{font-size:19px}
  .hud-camp.lui small{max-width:17ch;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .hud-tour small{display:none}
  .hud-init{padding:3px 9px;gap:4px}
  .hud-init small{display:none}
}
.hud-drap{display:none}
@media (max-width:760px){
  .hud:has(.hud-score:not(.equipe)) .hud-init{display:none}
  .hud-drap{display:inline;font-size:12px;color:#F0D58A}
  .hud-camp.lui .hud-drap{color:#C9CEE3}
}

/* ══ Fin de partie : les récompenses en cartes, « Rejouer » en grand (26 octobre 2026) ══════════ */
.succes-neufs{background:none;border:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr));gap:10px}
.recompense{margin:0;display:flex;align-items:center;gap:14px;padding:12px 16px;border-radius:14px;position:relative;overflow:hidden;
  background:linear-gradient(110deg,rgba(217,189,122,.2),rgba(28,37,88,.85) 55%);border:1px solid rgba(217,189,122,.55);
  animation:rc-entre .5s ease-out both}
.recompense::after{content:"";position:absolute;inset:0;background:linear-gradient(105deg,transparent 30%,rgba(255,240,200,.18) 45%,transparent 60%);
  transform:translateX(-100%);animation:rc-lustre 1.6s .4s ease-out both;pointer-events:none}
.rc-sceau{flex:none;width:42px;height:42px;border-radius:50%;display:grid;place-items:center;font-size:18px;color:#2A1A08;
  background:radial-gradient(circle at 38% 32%,#FFF1C2,#D9B25A 55%,#9C7224);box-shadow:0 0 0 2px rgba(10,15,40,.7),0 0 18px rgba(240,213,138,.35)}
.rc-txt{display:grid;line-height:1.25;min-width:0}
.rc-txt small{font-family:var(--sc);font-size:11.5px;letter-spacing:.12em;color:#E6CB86}
.rc-txt b{font-family:var(--display);font-style:italic;font-weight:500;font-size:19px;color:#FFF3C4}
.rc-txt > span{font-size:13.5px;color:#C9CEE3}
@keyframes rc-entre{from{opacity:0;transform:translateY(8px) scale(.98)}to{opacity:1;transform:none}}
@keyframes rc-lustre{to{transform:translateX(100%)}}
@media (prefers-reduced-motion:reduce){ .recompense,.recompense::after{animation:none} .recompense::after{display:none} }

.fin-actions{flex-wrap:wrap;gap:10px}
.fin-actions #fin-rejouer,.fin-actions #fin-revanche{order:-1;flex:1 1 100%;max-width:340px;margin:0 auto 4px;padding:14px 28px;font-size:18px;letter-spacing:.14em;border-radius:999px}
.fin-actions .btn-doux{border-radius:999px;padding:9px 18px}

/* ══ Les deux camps de la table : chacun sa couleur (26 octobre 2026) ═════════════════════════════
   Le vôtre en or, celui d'en face en argent bleuté, comme le tableau de score du haut. */
#score .camp{border-radius:12px;position:relative;overflow:hidden}
#score .camp::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px}
#score .camp-moi{border-color:rgba(217,189,122,.45);background:linear-gradient(100deg,rgba(217,189,122,.13),rgba(24,32,72,.9) 45%,rgba(9,14,36,.92))}
#score .camp-moi::before{background:linear-gradient(180deg,#F6E3A1,#B98A2E)}
#score .camp-moi .qui{color:#FFE9A8}
#score .camp-lui{border-color:rgba(150,160,210,.32);background:linear-gradient(100deg,rgba(150,160,210,.1),rgba(24,32,72,.9) 45%,rgba(9,14,36,.92))}
#score .camp-lui::before{background:linear-gradient(180deg,#DDE2F5,#7E88B8)}
#score .camp-lui .qui{color:#D5DAF0}
#score .camp .qui{font-family:var(--display);font-style:italic;letter-spacing:0;font-size:16px}

/* ══ Le Pèlerinage en chemin (26 octobre 2026) : la progression, l'étape en cours, la route entre
   les tampons, le cadenas des étapes à venir. ═════════════════════════════════════════════════════ */
.pel-progres{display:flex;align-items:center;gap:12px;margin:4px 0 14px;font-size:14px;color:#C9CEE3}
.pel-progres b{font-family:var(--display);font-size:20px;color:#FFE9A8}
.pel-barre{flex:1;height:6px;border-radius:99px;background:rgba(217,189,122,.15);overflow:hidden}
.pel-barre i{display:block;height:100%;border-radius:99px;background:linear-gradient(90deg,#B98A2E,#F0D58A)}
.etapes{gap:12px}
.etape{position:relative;border-radius:14px}
.etape + .etape::before{content:"";position:absolute;left:32px;top:-13px;height:12px;border-left:2px dashed rgba(217,189,122,.35)}
.etape.faite + .etape::before{border-left-style:solid;border-color:#D9BD7A}
.etape.actuelle{border-color:#E6CB86;background:linear-gradient(100deg,rgba(217,189,122,.14),rgba(255,255,255,.03) 60%);box-shadow:0 0 0 1px rgba(230,203,134,.25),0 8px 26px rgba(0,0,0,.3)}
.etape.actuelle .tampon{border-style:solid;border-color:#F0D58A;color:#FFE9A8;animation:etape-appel 2.4s ease-in-out infinite}
@keyframes etape-appel{50%{box-shadow:0 0 0 6px rgba(240,213,138,.12),0 0 16px rgba(240,213,138,.35)}}
@media (prefers-reduced-motion:reduce){ .etape.actuelle .tampon{animation:none} }
.etape .ferme{display:inline-flex;align-items:center;gap:5px}
.etape .ferme svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round}
@media (max-width:760px){ .etape + .etape::before{left:30px} }

/* ══ La Chronique : l'équipe à composer (26 octobre 2026) — une place par saint qu'on peut envoyer,
   l'emblème et son apport une fois choisi (un toucher le retire), le compte en grand. ════════════ */
.ch-equipe{display:flex;align-items:center;justify-content:space-between;gap:14px;margin:8px 0 10px}
.ch-places{display:flex;flex-wrap:wrap;gap:10px}
.ch-place{position:relative;width:54px;height:54px;border-radius:50%;display:grid;place-items:center;padding:0;
  border:2px dashed rgba(217,189,122,.35);background:rgba(255,255,255,.03)}
.ch-place.pleine{border:2px solid #D9BD7A;background:radial-gradient(circle at 40% 35%,rgba(255,243,196,.18),rgba(20,27,62,.9));cursor:pointer;
  box-shadow:0 0 14px rgba(217,189,122,.3);animation:ch-pose .3s ease-out}
.ch-place.pleine:hover,.ch-place.pleine:focus-visible{border-color:#FFE9A8}
.ch-place .ch-emb{width:34px;height:34px}
.ch-place b{position:absolute;right:-6px;bottom:-4px;min-width:22px;padding:1px 5px;border-radius:999px;font-size:11.5px;line-height:1.4;
  color:#1A1530;background:linear-gradient(180deg,#F6E3A1,#D9B25A)}
@keyframes ch-pose{from{transform:scale(.7);opacity:.3}to{transform:none;opacity:1}}
@media (prefers-reduced-motion:reduce){ .ch-place.pleine{animation:none} }
.ch-compte{display:flex;align-items:baseline;gap:4px;flex:none}
.ch-compte b{font-family:var(--display);font-size:38px;line-height:1;color:#F1E6C4;transition:color .2s}
.ch-compte small{font-size:16px;color:#9EA6C8}
.ch-compte.atteint b{color:#FFE9A8;text-shadow:0 0 16px rgba(240,213,138,.5)}
.ch-jauge.pleine{border-color:#E6CB86;box-shadow:0 0 12px rgba(230,203,134,.35)}
.ch-jauge.pleine i{background:linear-gradient(90deg,#D9B25A,#FFF1C2)}
@media (max-width:520px){ .ch-place{width:46px;height:46px} .ch-place .ch-emb{width:28px;height:28px} .ch-compte b{font-size:30px} }

/* ══ Le témoin mystère : les six essais en « vies », la légende des couleurs (26 octobre 2026) ═══ */
.my-etat{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 16px;margin:4px 0 10px}
.my-vies{display:inline-flex;gap:6px}
.my-vies i{width:14px;height:14px;border-radius:50%;background:radial-gradient(circle at 38% 32%,#FFF1C2,#D9B25A 60%,#9C7224);box-shadow:0 0 8px rgba(240,213,138,.4);transition:all .3s}
.my-vies i.pris{background:rgba(255,255,255,.08);box-shadow:inset 0 0 0 1.5px rgba(217,189,122,.35)}
.my-vies i.bon{background:radial-gradient(circle at 38% 32%,#C8F0D6,#2F6B4A 70%);box-shadow:0 0 10px rgba(80,180,120,.5)}
.my-legende{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;color:#9EA6C8}
.my-legende i{width:11px;height:11px;border-radius:3px;margin-left:6px;background:rgba(255,255,255,.12)}
.my-legende i.my-oui{background:#2F6B4A}
.my-legende i.my-proche{background:#8A6A1F}

/* ══ Le prologue (28 octobre 2026) ═══════════════════════════════════════════════════════════════
   Plein écran, noir d'abord ; la porte (entrer avec ou sans musique), puis les tableaux qui se fondent
   l'un dans l'autre en avançant lentement, le texte au tiers bas, et la page blanche pour finir. */
.prologue{position:fixed;inset:0;width:100vw;height:100dvh;max-width:none;max-height:none;margin:0;padding:0;border:0;background:#04060F;color:#F1E6C4;overflow:hidden}
.prologue::backdrop{background:#04060F}
.pro-scenes,.pro-scene,.pro-voile,.pro-poussiere{position:absolute;inset:0}
.pro-scene{opacity:0;transition:opacity 1.8s ease;overflow:hidden}
.pro-scene .tableau-svg{position:absolute;inset:-4%;width:108%;height:108%;transform:scale(1.02);transform-origin:50% 45%}
.pro-scene.active{opacity:1}
.pro-scene.active .tableau-svg{animation:pro-avance 14s ease-out forwards}
@keyframes pro-avance{from{transform:scale(1.02) translateY(0)}to{transform:scale(1.13) translateY(-1.5%)}}
.pro-voile{background:radial-gradient(120% 90% at 50% 40%,transparent 35%,rgba(4,6,15,.75) 100%),linear-gradient(180deg,rgba(4,6,15,0) 38%,rgba(4,6,15,.82) 66%,rgba(4,6,15,.95) 100%);pointer-events:none;transition:background 1.5s}
.pro-poussiere{pointer-events:none;overflow:hidden}
.pro-poussiere span{position:absolute;bottom:-12px;width:3px;height:3px;border-radius:50%;background:#FFE9A8;box-shadow:0 0 8px 1px rgba(255,233,168,.8);opacity:0;animation:pro-poussiere linear infinite}
@keyframes pro-poussiere{0%{transform:translate(0,0);opacity:0}12%{opacity:.85}70%{opacity:.5}100%{transform:translate(28px,-92vh);opacity:0}}
.pro-porte,.pro-titre{position:absolute;inset:0;display:grid;place-content:center;justify-items:center;text-align:center;gap:10px;padding:24px;transition:opacity 1.1s ease}
.pro-sur{margin:0;font-family:var(--sc);font-size:13px;letter-spacing:.32em;color:#9AA2C4;text-transform:lowercase}
.pro-nom{margin:0;font-family:var(--display);font-style:italic;font-weight:500;font-size:clamp(44px,8vw,96px);line-height:1;color:#FFF1C9;
  text-shadow:0 0 40px rgba(240,213,138,.35),0 2px 0 rgba(0,0,0,.4);animation:pro-nom 2.6s ease-out both}
@keyframes pro-nom{from{opacity:0;letter-spacing:.12em;filter:blur(6px)}to{opacity:1;letter-spacing:0;filter:none}}
.pro-sous{margin:0 0 18px;font-family:var(--display);font-style:italic;font-size:clamp(17px,2.2vw,22px);color:#D9BD7A}
.pro-entrer{display:flex;flex-wrap:wrap;justify-content:center;gap:12px}
.pro-avec{padding:14px 30px;font-size:17px;letter-spacing:.1em;border-radius:999px}
.pro-sans{border-radius:999px;padding:12px 22px}
.pro-conseil{margin:10px 0 0;font-size:13px;color:#7F87A8}
.prologue.ouverte .pro-porte{opacity:0;pointer-events:none}
.pro-texte{position:absolute;left:50%;bottom:clamp(90px,16vh,170px);transform:translateX(-50%);width:min(92vw,820px);text-align:center;transition:opacity .9s ease}
.pro-texte.pale{opacity:0}
.pro-ligne{margin:0 0 12px;font-family:var(--display);font-style:italic;font-size:clamp(21px,3vw,34px);line-height:1.3;color:#FFF3D6;
  text-shadow:0 2px 18px rgba(0,0,0,.85);animation:pro-ligne 1.6s ease-out both}
.pro-ligne + .pro-ligne{font-size:clamp(18px,2.4vw,27px);color:#F1E6C4}
.pro-source{margin:4px 0 0;font-family:var(--sc);font-size:13px;letter-spacing:.14em;color:#D9BD7A;animation:pro-ligne 1.6s ease-out both}
@keyframes pro-ligne{from{opacity:0;transform:translateY(10px);filter:blur(3px)}to{opacity:1;transform:none;filter:none}}
.pro-titre{opacity:0;pointer-events:none;background:radial-gradient(70% 60% at 50% 45%,rgba(4,6,15,.25),rgba(4,6,15,.7))}
.prologue.au-titre .pro-titre{opacity:1;pointer-events:auto}
.prologue.au-titre .pro-titre .pro-nom{animation:pro-nom 2.6s .8s ease-out both}
.pro-verset{margin:0 0 14px;max-width:46ch;font-family:var(--display);font-style:italic;font-size:clamp(17px,2.3vw,24px);line-height:1.45;color:#2A2140;
  text-shadow:0 0 18px rgba(255,255,255,.7);animation:pro-ligne 2s ease-out both}
.pro-verset small{display:block;margin-top:8px;font-family:var(--sc);font-style:normal;font-size:13px;letter-spacing:.16em;color:#6B5420}
.prologue.au-titre .pro-titre .pro-nom{color:#3A2A10;text-shadow:0 0 30px rgba(255,255,255,.9)}
.pro-fin{margin-top:16px;padding:14px 32px;font-size:17px;letter-spacing:.1em;border-radius:999px;animation:pro-ligne 1.4s 2.6s ease-out both}
.prologue.au-titre .pro-voile{background:radial-gradient(90% 80% at 50% 45%,rgba(255,255,255,.18),transparent 70%)}
.pro-bas{position:absolute;left:0;right:0;bottom:0;display:flex;align-items:center;justify-content:space-between;padding:16px clamp(16px,4vw,40px);opacity:0;transition:opacity 1s}
.prologue.ouverte .pro-bas{opacity:1}
.pro-points{display:inline-flex;gap:8px}
.pro-points i{width:7px;height:7px;border-radius:50%;background:rgba(241,230,196,.25);transition:background .6s}
.pro-points i.vu{background:#E6CB86}
.pro-passer{background:none;border:1px solid rgba(241,230,196,.35);color:#F1E6C4;border-radius:999px;padding:8px 18px;font:inherit;font-family:var(--sc);letter-spacing:.1em;cursor:pointer}
.pro-passer:hover,.pro-passer:focus-visible{border-color:#E6CB86;color:#FFE9A8}
.prologue.au-titre .pro-passer{color:#3A2A10;border-color:rgba(58,42,16,.4)}
.prologue.sortie{animation:pro-sortie .9s ease-in forwards}
@keyframes pro-sortie{to{opacity:0}}
@media (prefers-reduced-motion:reduce){
  .pro-scene.active .tableau-svg,.pro-poussiere span,.pro-nom,.pro-ligne,.pro-source,.pro-verset,.pro-fin,.prologue.sortie{animation:none}
  .pro-poussiere{display:none}
}

/* ══ L'accueil qui respire (28 octobre 2026) : le fond peint avance lentement, la poussière d'or monte
   dans la lumière, le verset d'Hébreux sous le titre, et le bouton de l'hymne. ═════════════════════ */
.accueil-plein .dlg-corps > .acc-fond .tableau-svg{inset:-5%;width:110%;height:110%;transform-origin:62% 38%;animation:acc-respire 46s ease-in-out infinite alternate}
@keyframes acc-respire{from{transform:scale(1)}to{transform:scale(1.1) translate(-1.2%,.8%)}}
.acc-poussiere{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:1}
.acc-poussiere span{position:absolute;bottom:-10px;width:3px;height:3px;border-radius:50%;background:#FFE9A8;box-shadow:0 0 7px 1px rgba(255,233,168,.75);opacity:0;animation:acc-poussiere linear infinite}
.acc-poussiere span:nth-child(3n){width:2px;height:2px}
@keyframes acc-poussiere{0%{transform:translate(0,0);opacity:0}15%{opacity:.7}75%{opacity:.35}100%{transform:translate(34px,-560px);opacity:0}}
.acc-verset{margin:-2px 0 4px;font-family:var(--display);font-style:italic;font-size:clamp(16px,1.6vw,19px);color:#E6CB86;letter-spacing:.01em}
.acc-verset small{margin-left:10px;font-family:var(--sc);font-style:normal;font-size:12px;letter-spacing:.14em;color:#9EA6C8}
.acc-musique{display:inline-flex;align-items:center;gap:7px;padding:6px 14px 6px 10px;border-radius:999px;cursor:pointer;font:inherit;font-family:var(--sc);font-size:13px;letter-spacing:.08em;
  color:#C9CEE3;background:rgba(10,15,40,.55);border:1px solid rgba(150,160,210,.3);backdrop-filter:blur(6px);transition:border-color .15s,color .15s}
.acc-musique svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.acc-musique[aria-pressed="true"]{color:#FFE9A8;border-color:rgba(230,203,134,.6);background:rgba(217,189,122,.12)}
.acc-musique[aria-pressed="true"] svg{animation:acc-note 2.4s ease-in-out infinite}
@keyframes acc-note{50%{transform:translateY(-2px) rotate(-6deg)}}
.acc-musique:hover,.acc-musique:focus-visible{border-color:#D9BD7A;color:#FFE9A8}
.acc-action svg path[d^="M8 5.5"]{fill:#E6CB86;stroke:none}
@media (max-width:760px){ .acc-musique span{display:none} .acc-musique{padding:7px} }
@media (prefers-reduced-motion:reduce){ .accueil-plein .dlg-corps > .acc-fond .tableau-svg,.acc-poussiere span,.acc-musique[aria-pressed="true"] svg{animation:none} .acc-poussiere{display:none} }
/* La page blanche : un halo de lumière derrière le verset et le titre, la foule autour. */
.prologue.au-titre .pro-titre{background:radial-gradient(58% 42% at 50% 48%,rgba(255,253,246,.94),rgba(255,251,238,.72) 52%,rgba(255,251,238,0) 82%)}
.prologue.au-titre .pro-voile{background:radial-gradient(110% 90% at 50% 45%,transparent 50%,rgba(110,79,23,.35) 100%)}
.pro-verset{max-width:62ch}
.prologue.au-titre .pro-passer{visibility:hidden}

/* ══ L'histoire de la Nuée (28 octobre 2026) : sept chapitres courts, en deux colonnes sur grand écran. ══ */
.recit{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,340px),1fr));gap:6px 34px;margin-top:6px}
.recit section{padding:10px 0 6px;border-top:1px solid rgba(217,189,122,.16)}
.recit h3{margin:0 0 6px;font-family:var(--display);font-style:italic;font-weight:500;font-size:20px;color:#F1E6C4}
.recit h3::before{content:"✦";margin-right:8px;font-style:normal;font-size:12px;color:#D9BD7A;vertical-align:3px}
.recit p{margin:0;font-size:15px;line-height:1.6;color:#C9CEE3}
.recit section:last-child{grid-column:1/-1;text-align:center;border-top-color:rgba(217,189,122,.35)}
.recit section:last-child h3{color:#FFE9A8}
.fin-recit{margin:6px auto 0;max-width:52ch;font-family:var(--display);font-style:italic;font-size:16px;line-height:1.45;color:#E6CB86}
/* Les crédits de l'hymne enregistré (licence CC BY 3.0 : l'attribution est due). */
.pro-credit{margin:6px 0 0;max-width:60ch;font-size:12px;line-height:1.4;color:#6F7799}
.pro-credit i{font-style:italic}
.acc-fin .credits-musique{margin:0;max-width:70ch;font-size:12.5px;line-height:1.5;color:#7F87A8}
.acc-fin .credits-musique a{color:#B8A57A;text-underline-offset:2px}
.ch-veillee{margin:0 0 10px;font-style:italic;font-size:16px;line-height:1.5;color:#E6CB86;text-wrap:pretty}
.ch-veillee::before{content:"";display:inline-block;width:18px;height:1px;margin:0 8px 4px 0;vertical-align:middle;background:currentColor;opacity:.6}

/* ══ Le prologue en profondeur (29 octobre 2026) ══════════════════════════════════════════════════
   Trois plans peints d'avance (ciel, lointain, proche) glissent chacun à sa vitesse : on ne fait plus
   que déplacer des images déjà prêtes, sans flou animé — d'où la fluidité. Un éclat de lumière au
   passage d'un tableau, le titre de chaque scène, les mots qui arrivent un à un, une barre qui se
   remplit scène après scène, et sur la porte un halo de rayons qui tourne lentement. */
.pro-scene{transition:opacity 1.8s cubic-bezier(.4,0,.2,1);contain:strict}
.pro-plan{position:absolute;left:-8%;top:-8%;width:116%;height:116%;display:block;will-change:transform;backface-visibility:hidden}
.pro-scene.active .pro-ciel{animation:pro-ciel 16s cubic-bezier(.25,.1,.25,1) both}
.pro-scene.active .pro-loin{animation:pro-loin 16s cubic-bezier(.25,.1,.25,1) both}
.pro-scene.active .pro-pres{animation:pro-pres 16s cubic-bezier(.25,.1,.25,1) both}
.pro-scene.sens-inverse.active .pro-loin{animation-name:pro-loin-inv}
.pro-scene.sens-inverse.active .pro-pres{animation-name:pro-pres-inv}
@keyframes pro-ciel{from{transform:scale(1.02)}to{transform:scale(1.06) translate3d(-.8%,-1%,0)}}
@keyframes pro-loin{from{transform:scale(1.03) translate3d(1.4%,0,0)}to{transform:scale(1.09) translate3d(-1.4%,-.6%,0)}}
@keyframes pro-pres{from{transform:scale(1.05) translate3d(3%,1%,0)}to{transform:scale(1.14) translate3d(-3%,0,0)}}
@keyframes pro-loin-inv{from{transform:scale(1.03) translate3d(-1.4%,0,0)}to{transform:scale(1.09) translate3d(1.4%,-.6%,0)}}
@keyframes pro-pres-inv{from{transform:scale(1.05) translate3d(-3%,1%,0)}to{transform:scale(1.14) translate3d(3%,0,0)}}
.pro-scene.vectorielle .tableau-svg{will-change:transform}
.pro-eclat{position:absolute;inset:0;pointer-events:none;opacity:0;background:radial-gradient(62% 52% at 50% 40%,rgba(255,236,190,.42),rgba(255,236,190,0) 72%)}
.pro-eclat.vif{animation:pro-eclat 2.4s ease-out}
@keyframes pro-eclat{0%{opacity:0}30%{opacity:.75}100%{opacity:0}}
.prologue.au-titre .pro-eclat{display:none}
/* Le texte : le titre de la scène, puis les mots un à un (sans flou : il coûte cher à chaque image). */
.pro-chapitre{display:flex;align-items:center;justify-content:center;gap:14px;margin:0 0 16px;font-family:var(--sc);font-size:13px;letter-spacing:.32em;text-transform:uppercase;color:#E6CB86;animation:pro-apparait 1.2s ease-out both}
.pro-chapitre::before,.pro-chapitre::after{content:"";width:clamp(28px,8vw,72px);height:1px;background:linear-gradient(90deg,rgba(230,203,134,0),rgba(230,203,134,.75))}
.pro-chapitre::after{transform:scaleX(-1)}
.pro-chapitre span{margin-right:.7em;font-family:var(--display);font-size:16px;letter-spacing:.06em;color:#FFF1C9}
.pro-ligne{animation:none}
.pro-mot{display:inline-block;opacity:0;animation:pro-mot .9s cubic-bezier(.2,.7,.2,1) forwards}
.pro-ligne{text-shadow:0 1px 3px rgba(4,6,15,.7),0 0 26px rgba(4,6,15,.45)}
@keyframes pro-mot{from{opacity:0;transform:translate3d(0,.45em,0)}to{opacity:1;transform:none}}
@keyframes pro-apparait{from{opacity:0;transform:translate3d(0,8px,0)}to{opacity:1;transform:none}}
@keyframes pro-ligne{from{opacity:0;transform:translate3d(0,10px,0)}to{opacity:1;transform:none}}
@keyframes pro-nom{from{opacity:0;transform:scale(1.05)}to{opacity:1;transform:none}}
/* La barre : un segment par scène, qui se remplit pendant qu'on la regarde. */
.pro-points{gap:6px;align-items:center}
.pro-points i,.pro-points i.vu{position:relative;width:clamp(22px,5vw,46px);height:3px;border-radius:3px;background:rgba(241,230,196,.2);overflow:hidden}
.pro-points i::after{content:"";position:absolute;inset:0;border-radius:inherit;background:#E6CB86;transform:scaleX(0);transform-origin:left}
.pro-points i.vu::after{transform:scaleX(1)}
.pro-points i.en-cours::after{animation:pro-seg var(--d,8s) linear forwards}
@keyframes pro-seg{to{transform:scaleX(1)}}
/* La porte : un halo de rayons tourne lentement derrière le titre, une lueur l'éclaire. */
.pro-porte{isolation:isolate}
.pro-porte::before{content:"";position:absolute;inset:0;z-index:-2;background:radial-gradient(42% 36% at 50% 46%,rgba(217,189,122,.16),rgba(217,189,122,0) 72%)}
.pro-halo{position:absolute;inset:0;margin:auto;width:min(980px,150vmin);height:min(980px,150vmin);z-index:-1;border-radius:50%;pointer-events:none;
  background:repeating-conic-gradient(from 0deg,rgba(230,203,134,.11) 0deg 1.6deg,rgba(230,203,134,0) 1.6deg 11.25deg);
  -webkit-mask:radial-gradient(closest-side,#000 12%,rgba(0,0,0,.6) 45%,transparent 100%);mask:radial-gradient(closest-side,#000 12%,rgba(0,0,0,.6) 45%,transparent 100%);
  animation:pro-halo 120s linear infinite;will-change:transform}
@keyframes pro-halo{to{transform:rotate(1turn)}}
.pro-avec{box-shadow:0 0 0 1px rgba(255,241,201,.25),0 10px 30px -10px rgba(217,189,122,.6)}
.pro-sans{background:rgba(10,15,40,.4);backdrop-filter:blur(4px)}
/* L'accueil peint : la même règle, le fond est déplacé sans être repeint. */
.accueil-plein .dlg-corps > .acc-fond .tableau-svg{will-change:transform}
@media (prefers-reduced-motion:reduce){
  .pro-plan,.pro-mot,.pro-chapitre,.pro-halo,.pro-eclat.vif,.pro-points i.en-cours::after{animation:none}
  .pro-mot{opacity:1}
}
/* Le passage d'un tableau à l'autre (30 octobre 2026) : le nouveau se pose par-dessus l'ancien, resté
   entier dessous, sans creux de lumière ; la scène suivante attend derrière, déjà à l'écran. Le mouvement
   d'une scène dure tant qu'elle est vue (classe « vue »), même pendant qu'elle s'efface. */
.pro-scenes{z-index:0;isolation:isolate}
.pro-scene{opacity:0;z-index:0;transition:none}
.pro-scene.prete{opacity:1;z-index:1}
.pro-scene.sortante{opacity:1;z-index:2}
.pro-scene.entree{opacity:0;z-index:3;transition:none}
.pro-scene.active{opacity:1;z-index:3;transition:opacity 1.6s cubic-bezier(.4,0,.2,1)}
.pro-scene.active .pro-plan,.pro-scene.sens-inverse.active .pro-plan{animation:none}
.pro-scene.vue .pro-ciel{animation:pro-ciel 16s cubic-bezier(.25,.1,.25,1) both}
.pro-scene.vue .pro-loin{animation:pro-loin 16s cubic-bezier(.25,.1,.25,1) both}
.pro-scene.vue .pro-pres{animation:pro-pres 16s cubic-bezier(.25,.1,.25,1) both}
.pro-scene.sens-inverse.vue .pro-loin{animation-name:pro-loin-inv}
.pro-scene.sens-inverse.vue .pro-pres{animation-name:pro-pres-inv}
.pro-scene.vectorielle.vue .tableau-svg{animation:pro-avance 14s ease-out forwards}
.pro-eclat.vif{animation:pro-eclat 2.4s ease-out}
@keyframes pro-eclat{0%{opacity:0}35%{opacity:.45}100%{opacity:0}}
@media (prefers-reduced-motion:reduce){ .pro-scene.vue .pro-plan{animation:none} }
/* Le prologue dessiné sur une seule toile (30 octobre 2026) : les tableaux, la lumière et la poussière y
   sont composés à chaque image ; il ne reste que le voile, le texte et les boutons par-dessus. */
.pro-toile{position:absolute;inset:0;width:100%;height:100%;display:block}

/* ══ La visite des façons de jouer (31 octobre 2026) ═══════════════════════════════════════════════
   Une carte au centre, un tableau par mode qui avance doucement, le nom, des repères (chaque jour,
   la durée), deux lignes, et l'on glisse d'un mode à l'autre. */
.visite{position:fixed;inset:0;z-index:80;display:grid;place-items:center;padding:16px;background:rgba(4,6,15,.8);backdrop-filter:blur(6px);animation:vis-entre .45s ease-out both}
.visite.sortie{animation:vis-sort .3s ease-in both}
@keyframes vis-entre{from{opacity:0}to{opacity:1}}
@keyframes vis-sort{to{opacity:0}}
.vis-carte{width:min(600px,100%);max-height:calc(100dvh - 32px);display:flex;flex-direction:column;background:linear-gradient(180deg,#121A3C,#0B1028);
  border:1px solid rgba(217,189,122,.38);border-radius:18px;overflow:hidden;box-shadow:0 30px 80px -20px rgba(0,0,0,.8),0 0 0 1px rgba(255,241,201,.05) inset;animation:vis-carte .55s cubic-bezier(.2,.7,.2,1) both}
@keyframes vis-carte{from{transform:translateY(18px) scale(.97)}to{transform:none}}
.vis-fenetre{overflow:hidden;flex:1;min-height:0}
.vis-piste{display:flex;height:100%;transition:transform .55s cubic-bezier(.2,.7,.2,1);will-change:transform}
.vis-diapo{flex:0 0 100%;min-width:0;display:flex;flex-direction:column;overflow-y:auto}
.vis-art{position:relative;aspect-ratio:16/8.5;overflow:hidden;flex:none;background:#0B1028}
.vis-art-in{position:absolute;inset:-4%;will-change:transform}
.vis-art-in .tableau-svg{display:block;width:100%;height:100%}
.vis-diapo.active .vis-art-in{animation:vis-avance 9s cubic-bezier(.25,.1,.25,1) both}
@keyframes vis-avance{from{transform:scale(1)}to{transform:scale(1.08) translate3d(-1.5%,-1%,0)}}
.vis-art::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(11,16,40,0) 45%,rgba(18,26,60,.96) 100%);pointer-events:none}
.vis-diapo.vis-fin{justify-content:center}
.vis-fin .vis-art{display:grid;place-items:center;aspect-ratio:16/6;background:radial-gradient(60% 80% at 50% 60%,rgba(217,189,122,.28),transparent 70%)}
.vis-sceau{font-size:44px;color:#F1D48A;text-shadow:0 0 30px rgba(241,212,138,.7);position:relative;z-index:1}
.vis-texte{position:relative;padding:0 26px 10px;margin-top:-34px;z-index:1}
.vis-rang{margin:0;font-family:var(--sc);font-size:12.5px;letter-spacing:.24em;text-transform:uppercase;color:#E6CB86}
.vis-texte h2{margin:4px 0 8px;font-family:var(--display);font-weight:500;font-size:clamp(28px,5vw,38px);line-height:1.05;color:#FFF6DE}
.vis-marques{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 10px}
.vis-marques span{padding:3px 10px;border-radius:999px;font-size:12.5px;letter-spacing:.04em;color:#F1E6C4;background:rgba(217,189,122,.12);border:1px solid rgba(217,189,122,.3)}
.vis-mot{margin:0;font-size:16px;line-height:1.55;color:#C9CEE3;text-wrap:pretty}
.vis-diapo.active .vis-texte > *{animation:vis-texte .6s cubic-bezier(.2,.7,.2,1) both}
.vis-diapo.active .vis-texte > :nth-child(2){animation-delay:.06s}
.vis-diapo.active .vis-texte > :nth-child(3){animation-delay:.12s}
.vis-diapo.active .vis-texte > :nth-child(4){animation-delay:.18s}
@keyframes vis-texte{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.vis-pied{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:12px 16px 16px;border-top:1px solid rgba(217,189,122,.14)}
.vis-passer{background:none;border:0;padding:8px 4px;color:#9AA2C4;font:inherit;font-family:var(--sc);font-size:13.5px;letter-spacing:.08em;cursor:pointer}
.vis-passer:hover{color:#F1E6C4}
.vis-points{display:flex;gap:5px;flex:1;justify-content:center;min-width:0}
.vis-points i{width:clamp(10px,3.5vw,22px);height:3px;border-radius:3px;background:rgba(241,230,196,.18);transition:background .35s}
.vis-points i.vu{background:#E6CB86}
.vis-nav{display:flex;gap:8px;align-items:center}
.vis-prec{width:40px;height:40px;border-radius:999px;border:1px solid rgba(217,189,122,.35);background:rgba(10,15,40,.5);color:#F1E6C4;font-size:22px;line-height:1;cursor:pointer}
.vis-prec:disabled{opacity:.35;cursor:default}
.vis-suiv{border-radius:999px;padding:11px 22px;white-space:nowrap}
.lien-visite{background:none;border:0;padding:4px 0;margin-top:2px;color:#E6CB86;font:inherit;font-family:var(--sc);font-size:14px;letter-spacing:.08em;cursor:pointer;text-align:left}
.lien-visite:hover{text-decoration:underline}
@media (max-width:560px){
  .visite{padding:10px}
  .vis-texte{padding:0 18px 8px}
  .vis-mot{font-size:15px}
  .vis-pied{padding:10px 12px 12px}
  .vis-suiv{padding:10px 16px}
}
@media (prefers-reduced-motion:reduce){ .visite,.vis-carte,.vis-diapo.active .vis-art-in,.vis-diapo.active .vis-texte > *{animation:none} .vis-piste{transition:none} }
/* Le compte (1er novembre 2026) : se déconnecter d'ici, et pour l'administrateur, la Nuée en direct. */
button.compte-btn{border:0;cursor:pointer;font:inherit;font-family:var(--sc);font-size:13.5px;letter-spacing:.05em}
.compte-liens{flex:1 1 100%;display:flex;justify-content:flex-end;gap:16px;margin-top:-4px}
.compte-liens a,.compte-liens button{background:none;border:0;padding:2px 0;color:#9AA2C4;font:inherit;font-family:var(--sc);font-size:12.5px;letter-spacing:.06em;text-decoration:none;cursor:pointer}
.compte-liens a:hover,.compte-liens button:hover{color:#F1E6C4;text-decoration:underline}
.compte-liens a{color:#E6CB86}
@media (max-width:560px){ .compte-liens{justify-content:center} }