[hidden] { display: none !important; }
:root {
  --velours: #1a0d10; --velours-2: #26141a; --laiton: #e9b949; --creme: #f3e6c8; --encre: #2a1519;
  --brun: #6d5246; --texte: #f6ecdc; --doux: #c9b4a3; --rideau: #8e1b2c; --ligne: rgba(233,185,73,.25);
  color-scheme: dark;
}
* { box-sizing: border-box; }
html, body { margin: 0; background: var(--velours); color: var(--texte); font-family: Figtree, system-ui, sans-serif; font-size: 15px; line-height: 1.45; }
body { min-height: 100dvh; padding-bottom: calc(70px + env(safe-area-inset-bottom, 0px)); }
button { font: inherit; cursor: pointer; }
.haut { position: sticky; top: 0; z-index: 5; background: linear-gradient(var(--velours) 70%, transparent); padding: calc(10px + env(safe-area-inset-top, 0px)) 16px 8px; display: flex; justify-content: center; }
.fronton { padding: 6px 22px; border-radius: 8px; background-color: #a8730f;
  background-image: radial-gradient(circle,#fff3c4 0 1.4px,rgba(233,185,73,.25) 2.2px,transparent 3px), linear-gradient(135deg,#ffe9a8,#c98d14 40%,#ffe28a 60%,#9a650a);
  background-size: 9px 9px, auto; box-shadow: 0 0 26px rgba(255,214,120,.3); }
.fronton span { display: block; background: var(--velours); color: var(--laiton); font-family: Limelight, serif; font-size: 22px; padding: 2px 16px; border-radius: 4px; letter-spacing: .04em; }
main { max-width: 760px; margin: 0 auto; padding: 8px max(16px, env(safe-area-inset-left, 0px)) 24px max(16px, env(safe-area-inset-right, 0px)); display: flex; flex-direction: column; gap: 18px; }
.chargement { text-align: center; color: var(--doux); margin-top: 30vh; }
h1, h2 { font-family: 'Big Shoulders Display', sans-serif; font-weight: 800; text-transform: uppercase; line-height: 1; margin: 0; text-wrap: balance; }
h1 { font-size: 34px; } h2 { font-size: 24px; color: var(--laiton); }
p { margin: 0; color: var(--doux); }
.kicker { font-size: 11px; letter-spacing: .22em; text-transform: uppercase; color: var(--laiton); font-weight: 700; }
.btn { background: var(--laiton); color: var(--encre); border: 0; border-radius: 10px; padding: 13px 18px; font-weight: 700; font-size: 16px; }
.btn:disabled { opacity: .45; cursor: default; }
.btn.fantome { background: transparent; color: var(--texte); border: 1px solid var(--ligne); }
.panneau { background: var(--velours-2); border: 1px solid var(--ligne); border-radius: 14px; padding: 16px; display: flex; flex-direction: column; gap: 12px; }
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px; }
.stat { background: var(--velours-2); border: 1px solid var(--ligne); border-radius: 12px; padding: 12px; }
.stat b { display: block; font-family: 'Big Shoulders Display', sans-serif; font-size: 28px; color: var(--texte); line-height: 1; }
.stat span { font-size: 12px; color: var(--doux); }
.pellicule { height: 10px; border-radius: 5px; background: repeating-linear-gradient(90deg, #3a2a2e 0 6px, #2a1b1f 6px 12px); overflow: hidden; }
.pellicule i { display: block; height: 100%; background: repeating-linear-gradient(90deg, var(--laiton) 0 6px, #c98d14 6px 12px); }

/* Billet / booster */
.billet { position: relative; margin: 0 auto; width: min(320px, 100%); aspect-ratio: 16 / 9; display: flex; }
.billet .souche, .billet .corps { background: var(--creme); color: var(--encre); display: flex; flex-direction: column; justify-content: center; padding: 14px; }
.billet .corps { flex: 1; border-radius: 12px 0 0 12px; border-right: 2px dashed rgba(42,21,25,.35); }
.billet .souche { width: 30%; border-radius: 0 12px 12px 0; align-items: center; text-align: center; font-family: 'IBM Plex Mono', monospace; font-size: 11px; transition: transform .6s cubic-bezier(.3,1.4,.6,1), opacity .6s; }
.billet .titre { font-family: Limelight, serif; font-size: 24px; color: var(--rideau); }
.billet.dechire .souche { transform: translate(40px, 30px) rotate(18deg); opacity: 0; }
.billet.dechire .corps { animation: tremble .3s; }
@keyframes tremble { 50% { transform: rotate(-1.5deg); } }
.amorce { font-family: 'Big Shoulders Display', sans-serif; font-size: 120px; text-align: center; color: var(--laiton); width: 180px; height: 180px; margin: 0 auto; border-radius: 50%; display: grid; place-items: center; border: 4px solid var(--laiton); background: radial-gradient(circle, transparent 60%, rgba(233,185,73,.15)); }

/* Cartes */
.grille { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 14px; }
.tirage { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 12px; }
.carte { --cadre: #cfc2a6; --ombre: 0 8px 18px rgba(0,0,0,.45); --reflet: transparent; --encre-r: var(--brun);
  border-radius: 11px; padding: 5px; background: var(--cadre); box-shadow: var(--ombre); border: 0; text-align: left; color: var(--encre); width: 100%; perspective: 800px; position: relative; }
.carte .int { background: var(--creme); border-radius: 7px; overflow: hidden; position: relative; }
.carte .clap { height: 20px; display: flex; align-items: center; justify-content: space-between; padding: 0 6px; background: repeating-linear-gradient(135deg, #16110f 0 8px, var(--metier, #c2412d) 8px 16px); }
.carte .clap span { background: #16110f; color: var(--creme); font-family: 'IBM Plex Mono', monospace; font-size: 8.5px; letter-spacing: .12em; padding: 2px 5px; border-radius: 2px; }
.carte .clap span + span { color: var(--laiton); letter-spacing: 0; }
.carte .photo { aspect-ratio: 4 / 4.2; background: #b9a47c radial-gradient(rgba(0,0,0,.18) 1px, transparent 1.2px) 0 0 / 3px 3px; display: flex; align-items: flex-end; justify-content: center; position: relative; overflow: hidden; }
.carte .photo img { width: 100%; height: 100%; object-fit: cover; object-position: center 20%; display: block; }
.carte .photo svg { width: 62%; height: auto; }
.carte .photo::after { content: ""; position: absolute; inset: 0; background: var(--reflet); pointer-events: none; }
.carte .credit { position: absolute; left: 5px; right: 5px; bottom: 3px; font-size: 7px; color: rgba(255,255,255,.85); text-shadow: 0 0 3px #000; z-index: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.carte .nom { padding: 6px 8px 0; font-family: 'Big Shoulders Display', sans-serif; font-weight: 800; font-size: 17px; line-height: 1; text-transform: uppercase; min-height: 2em; }
.carte .films { padding: 3px 8px 0; font-size: 9.5px; color: var(--brun); min-height: 2.6em; line-height: 1.3; }
.carte .talon { margin-top: 6px; border-top: 1.5px dashed rgba(42,21,25,.3); padding: 4px 8px 6px; display: flex; justify-content: space-between; align-items: baseline; }
.carte .talon b { font-family: Limelight, serif; font-weight: 400; font-size: 12px; color: var(--encre-r); }
.carte .talon i { font-style: normal; font-family: 'IBM Plex Mono', monospace; font-size: 9px; color: var(--brun); }
.carte .nb { position: absolute; top: -7px; right: -7px; background: var(--laiton); color: var(--encre); font-weight: 700; font-size: 12px; border-radius: 999px; padding: 1px 7px; box-shadow: 0 2px 6px rgba(0,0,0,.5); }
.r-peu_commune { --cadre: linear-gradient(135deg,#f2f2f2,#9da3a8 50%,#e4e6e8); --encre-r: #5d646b; }
.r-rare { --cadre: linear-gradient(135deg,#2f5f9e,#162f52); --ombre: 0 8px 22px rgba(47,95,158,.35); --encre-r: #2f5f9e; }
.r-epique { --cadre: linear-gradient(135deg,#b993e6,#4a2479 55%,#8a5cc9); --ombre: 0 8px 24px rgba(139,92,201,.45); --reflet: linear-gradient(120deg,transparent 40%,rgba(255,255,255,.18) 50%,transparent 60%); --encre-r: #6b3fa8; }
.r-legendaire { --cadre: radial-gradient(circle,#fff3c4 0 1.4px,transparent 2.4px) 0 0/9px 9px, linear-gradient(135deg,#ffe9a8,#c98d14 45%,#ffe28a 60%,#9a650a); --ombre: 0 0 26px rgba(255,214,120,.45), 0 10px 24px rgba(0,0,0,.5); --reflet: linear-gradient(120deg,transparent 35%,rgba(255,240,200,.28) 50%,transparent 65%); --encre-r: #9a650a; }
.r-mythique { --cadre: linear-gradient(90deg,#4a0b16,#9e1b32 10%,#5a0f1c 20%,#9e1b32 30%,#4a0b16 40%,#9e1b32 50%,#5a0f1c 60%,#9e1b32 70%,#4a0b16 80%,#9e1b32 90%,#5a0f1c); --ombre: 0 0 0 2px #e9b949, 0 0 30px rgba(158,27,50,.7); --reflet: linear-gradient(115deg,rgba(255,120,120,.2),rgba(255,230,120,.2),rgba(120,220,255,.2),rgba(200,120,255,.2)); --encre-r: #9e1b32; }
.r-legendaire .photo::after { background-size: 250% 100%; animation: reflet 4s linear infinite; }
@keyframes reflet { from { background-position: 100% 0; } to { background-position: -150% 0; } }

/* Retournement au tirage */
.dos { position: absolute; inset: 5px; border-radius: 7px; background: var(--rideau) repeating-linear-gradient(90deg, rgba(0,0,0,.25) 0 8px, transparent 8px 16px); display: grid; place-items: center; color: var(--laiton); font-family: Limelight, serif; font-size: 20px; backface-visibility: hidden; transition: opacity .35s; z-index: 2; }
.carte.cachee .int { visibility: hidden; }
.carte.cachee { --cadre: #3a1d24; --ombre: 0 6px 16px rgba(0,0,0,.5); }
.carte.revele { animation: retourne .5s ease-out; }
@keyframes retourne { from { transform: rotateY(90deg) scale(.95); } to { transform: none; } }
.flash { position: fixed; inset: 0; background: radial-gradient(circle, rgba(255,240,200,.9), rgba(255,240,200,0) 70%); pointer-events: none; animation: flash .7s ease-out forwards; z-index: 20; }
@keyframes flash { from { opacity: 1; } to { opacity: 0; } }

/* Détail d'une carte */
.voile { position: fixed; inset: 0; background: rgba(10,4,6,.85); z-index: 15; display: grid; place-items: center; padding: 20px; overflow-y: auto; }
.detail { width: min(340px, 100%); display: flex; flex-direction: column; gap: 14px; }
.saviez { background: var(--creme); color: var(--encre); border-radius: 10px; padding: 14px; font-size: 14.5px; }
.saviez b { display: block; font-family: Limelight, serif; font-weight: 400; color: var(--rideau); margin-bottom: 4px; }

/* Coffret */
.films-coffret { display: flex; flex-direction: column; gap: 8px; }
.film { display: grid; grid-template-columns: 24px 1fr; gap: 10px; background: var(--creme); color: var(--encre); border-radius: 9px; padding: 10px 12px; border: 2px solid transparent; text-align: left; }
.film.choisi { border-color: var(--laiton); box-shadow: 0 0 0 2px rgba(233,185,73,.4); }
.film .t { font-family: 'Big Shoulders Display', sans-serif; font-weight: 800; font-size: 18px; text-transform: uppercase; line-height: 1.05; }
.film .m { font-size: 12.5px; color: var(--brun); }
.film .coche { width: 20px; height: 20px; border-radius: 50%; border: 2px solid var(--brun); margin-top: 2px; }
.film.choisi .coche { background: var(--laiton); border-color: #9a650a; }

.filtres { display: flex; flex-wrap: wrap; gap: 6px; }
.puce { border: 1px solid var(--ligne); background: transparent; color: var(--texte); border-radius: 999px; padding: 5px 11px; font-size: 13px; }
.puce[aria-pressed="true"] { background: var(--laiton); color: var(--encre); border-color: var(--laiton); font-weight: 700; }

.bas { position: fixed; left: 0; right: 0; bottom: 0; z-index: 10; display: flex; background: var(--velours-2); border-top: 1px solid var(--ligne); padding: 6px max(16px, env(safe-area-inset-left, 0px)) calc(6px + env(safe-area-inset-bottom, 0px)) max(16px, env(safe-area-inset-right, 0px)); }
.bas button { flex: 1; background: none; border: 0; color: var(--doux); padding: 10px; font-weight: 700; letter-spacing: .04em; }
.bas button[aria-current="page"] { color: var(--laiton); }
#toast { position: fixed; left: 50%; transform: translateX(-50%); bottom: calc(80px + env(safe-area-inset-bottom, 0px)); background: var(--creme); color: var(--encre); padding: 10px 16px; border-radius: 10px; z-index: 30; box-shadow: 0 6px 20px rgba(0,0,0,.5); max-width: 90vw; }
.centre { text-align: center; display: flex; flex-direction: column; gap: 14px; align-items: center; }
.rangee { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; }

.carte.doublure .photo { background-color: #3a2a2e; }
.carte.doublure .photo svg { opacity: .55; }
.carte.doublure .point { position: absolute; top: 38%; left: 50%; transform: translate(-50%, -50%); font-family: Limelight, serif; font-size: 44px; color: var(--laiton); text-shadow: 0 0 12px rgba(233,185,73,.8); }

/* Films à étoiles : affiches typographiques générées (pas d'affiches sous droits) */
.grille-films { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 16px; }
.film-vignette { background: none; border: 0; padding: 0; color: var(--texte); text-align: left; display: flex; flex-direction: column; gap: 6px; }
.affiche { aspect-ratio: 2 / 3; border-radius: 6px; padding: 6px; background: #2a2224; box-shadow: 0 8px 18px rgba(0,0,0,.5); position: relative; }
.affiche .aff-int { height: 100%; border-radius: 3px; background: var(--fond); color: var(--ink); display: flex; flex-direction: column; justify-content: space-between; padding: 10px; position: relative; overflow: hidden;
  background-image: linear-gradient(160deg, rgba(255,255,255,.08), transparent 40%), repeating-linear-gradient(0deg, rgba(0,0,0,.06) 0 2px, transparent 2px 4px); }
.aff-annee { font-family: 'IBM Plex Mono', monospace; font-size: 11px; letter-spacing: .2em; }
.aff-titre { font-family: 'Big Shoulders Display', sans-serif; font-weight: 800; text-transform: uppercase; font-size: 22px; line-height: .95; text-wrap: balance; }
.aff-etoiles { font-size: 14px; letter-spacing: .1em; }
.affiche.grande { width: min(200px, 45vw); flex: none; }
.affiche.grande .aff-titre { font-size: 26px; }
.affiche.e0 .aff-int { filter: grayscale(1) brightness(.55); }
.affiche.e0::after { content: "En préparation"; position: absolute; inset: auto 6px 40% 6px; text-align: center; font-family: 'IBM Plex Mono', monospace; font-size: 10px; letter-spacing: .15em; text-transform: uppercase; color: var(--doux); }
.affiche.e1 .aff-int { filter: grayscale(1) contrast(1.1); }
.affiche.e2 .aff-int { filter: sepia(.85) saturate(1.2); }
.affiche.e4 { background: linear-gradient(135deg,#f2f2f2,#9da3a8 50%,#e4e6e8); }
.affiche.e5 { background: radial-gradient(circle,#fff3c4 0 1.4px,transparent 2.4px) 0 0/9px 9px, linear-gradient(135deg,#ffe9a8,#c98d14 45%,#ffe28a 60%,#9a650a); box-shadow: 0 0 26px rgba(255,214,120,.45); }
.tampon { position: absolute; top: 66%; left: 50%; transform: translate(-50%, -50%) rotate(-14deg); border: 2px solid #b3262f; color: #b3262f; background: rgba(255,255,255,.75); font-family: 'IBM Plex Mono', monospace; font-weight: 500; font-size: 10px; letter-spacing: .12em; text-transform: uppercase; padding: 3px 6px; white-space: nowrap; }
.barre { display: flex; gap: 2px; }
.barre i { flex: 1; height: 5px; border-radius: 1px; background: #3a2a2e; }
.barre i.plein { background: var(--laiton); }
.pts { font-size: 12px; color: var(--doux); }
.fiche-film { display: flex; gap: 16px; align-items: flex-start; flex-wrap: wrap; }
.fiche-info { flex: 1; min-width: 200px; display: flex; flex-direction: column; gap: 8px; }
.jauge { position: relative; height: 12px; border-radius: 6px; background: #3a2a2e; margin: 14px 0 6px; }
.jauge i { position: absolute; inset: 0 auto 0 0; border-radius: 6px; background: linear-gradient(90deg, #c98d14, var(--laiton)); }
.cran { position: absolute; top: -16px; transform: translateX(-50%); font-size: 10px; color: var(--doux); }
.cran::after { content: ""; position: absolute; left: 50%; top: 14px; width: 1px; height: 14px; background: rgba(246,236,220,.5); }
/* Séries (étape 25) : affiche « écran » aux coins arrondis, mention Série, crans de saisons */
.affiche.serie .aff-int { border-radius: 16px / 11px; }
.aff-type { font-family: 'IBM Plex Mono', monospace; font-size: 9px; letter-spacing: .25em; text-transform: uppercase; opacity: .8; }
.aff-type::before { content: "📺 "; letter-spacing: 0; }
.affiche.serie .aff-etoiles { font-family: 'IBM Plex Mono', monospace; font-size: 12px; letter-spacing: .08em; }
.jauge.saisons .cran { font-size: 9px; }
.postes { display: flex; flex-direction: column; gap: 8px; }
.poste { background: var(--velours-2); border: 1px solid var(--ligne); border-left: 5px solid var(--metier); border-radius: 9px; padding: 10px 12px; display: flex; flex-direction: column; gap: 6px; }
.poste.vide { opacity: .8; border-style: dashed; border-left-style: solid; }
.poste.doublure { border-color: var(--laiton); }
.poste-tete { display: flex; justify-content: space-between; gap: 8px; font-size: 12px; color: var(--doux); }
.poste-tete .metier { font-family: 'IBM Plex Mono', monospace; letter-spacing: .1em; color: var(--texte); }
.req { color: var(--laiton); }
.poste-cartes { display: flex; flex-wrap: wrap; gap: 6px; }
.nom-carte { border: 1px solid var(--r); border-radius: 6px; padding: 3px 8px; font-size: 13px; color: var(--doux); opacity: .65; }
.nom-carte small { color: var(--r); font-size: 10px; }
.nom-carte.a { opacity: 1; color: var(--texte); background: rgba(233,185,73,.08); font-weight: 700; }
.nom-carte.a::before { content: "✓ "; color: var(--laiton); }
.poste-action { font-size: 13px; color: var(--doux); display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.btn.petit { padding: 6px 10px; font-size: 13px; border-radius: 7px; }
.annonce { border-color: var(--laiton); }
.ligne-film { background: none; border: 0; color: var(--texte); text-align: left; display: flex; justify-content: space-between; gap: 10px; padding: 6px 0; border-top: 1px solid var(--ligne); }
.ligne-film span { color: var(--laiton); white-space: nowrap; }

.onglets { display: flex; gap: 4px; border-bottom: 1px solid var(--ligne); }
.onglets button { background: none; border: 0; color: var(--doux); padding: 8px 14px; font-weight: 700; border-bottom: 3px solid transparent; margin-bottom: -1px; }
.onglets button[aria-current="page"] { color: var(--laiton); border-bottom-color: var(--laiton); }
div.carte { cursor: default; }
.formulaire { display: flex; gap: 8px; flex-wrap: wrap; }
.formulaire input { flex: 1; min-width: 0; background: var(--velours); color: var(--texte); border: 1px solid var(--ligne); border-radius: 10px; padding: 12px; font: inherit; }
.panneau.admin { border-color: #b3262f; }
.carte .nom .original { display: block; font-family: Figtree, system-ui, sans-serif; font-weight: 500; font-size: 10px; text-transform: none; color: var(--brun); margin-top: 2px; }

/* Ciné-chaîne : salle de montage (gris acier, ambre tungstène, pellicule perforée) */
body.montage { --velours: #141619; --velours-2: #1d2024; --laiton: #f2b33d; --ligne: rgba(242,179,61,.25); --doux: #b9b3a6; background: #141619; }
body.montage .haut { background: linear-gradient(#141619 70%, transparent); }
.regles p { font-size: 14px; }
.chaine-tete { display: flex; justify-content: space-between; gap: 12px; align-items: flex-end; flex-wrap: wrap; }
.compteurs { display: flex; flex-direction: column; gap: 2px; font-family: 'IBM Plex Mono', monospace; font-size: 12px; color: var(--doux); text-align: right; }
.compteurs b { color: var(--laiton); font-size: 15px; }
.mini { display: flex; gap: 8px; align-items: center; background: #e9e4d8; color: #1b1d20; border-radius: 6px; padding: 4px 8px 4px 4px; border-left: 4px solid var(--metier); box-shadow: inset 0 0 0 1px var(--r); cursor: pointer; min-width: 0; }
.mini-photo { width: 34px; height: 40px; flex: none; border-radius: 3px; overflow: hidden; background: #b9a47c; display: grid; place-items: end center; }
.mini-photo img { width: 100%; height: 100%; object-fit: cover; object-position: center 20%; }
.mini-photo svg { width: 80%; }
.mini-txt { display: flex; flex-direction: column; min-width: 0; line-height: 1.15; }
.mini-txt b { font-size: 13px; overflow-wrap: anywhere; hyphens: auto; }  /* le nom entier, sur deux lignes s'il le faut */
.mini-txt small { font-family: 'IBM Plex Mono', monospace; font-size: 9.5px; color: #5c5f66; letter-spacing: .06em; }
.mini.origine { box-shadow: 0 0 0 2px var(--laiton); }
.pellicule-chaine { display: flex; gap: 0; overflow-x: auto; padding: 18px 10px; background: #0b0c0e; border-radius: 6px; position: relative; scroll-snap-type: x proximity;
  background-image: radial-gradient(circle, #2a2d33 0 3px, transparent 3.5px), radial-gradient(circle, #2a2d33 0 3px, transparent 3.5px);
  background-size: 14px 14px, 14px 14px; background-position: 0 4px, 0 calc(100% - 4px); background-repeat: repeat-x; }
.maillon { flex: none; width: 170px; display: flex; flex-direction: column; gap: 4px; padding: 0 6px; border-left: 1px dashed rgba(242,179,61,.35); scroll-snap-align: end; }
.maillon.depart { border-left: 0; }
.maillon .via { font-size: 10.5px; color: var(--laiton); font-family: 'IBM Plex Mono', monospace; min-height: 2.6em; line-height: 1.25; }
.maillon .qui { font-size: 10px; color: var(--doux); font-family: 'IBM Plex Mono', monospace; }
.maillon.ia .mini { opacity: .92; box-shadow: inset 0 0 0 1px var(--r), 0 0 0 1px #6b7280; }
.maillon.boucle .mini { box-shadow: 0 0 0 2px var(--laiton), 0 0 16px rgba(242,179,61,.6); }
.maillon.neuf { animation: entre .45s ease-out both; animation-delay: var(--delai); }
@keyframes entre { from { opacity: 0; transform: translateX(20px); } to { opacity: 1; transform: none; } }
.alerte { background: #3a1d1d; border: 1px solid #b3262f; color: #f6d6d6; border-radius: 8px; padding: 8px 12px; margin: 0; }
.chrono-zone { display: flex; gap: 10px; align-items: center; }
.chrono { flex: 1; height: 10px; border-radius: 5px; background: #2a2d33; overflow: hidden; }
.chrono i { display: block; height: 100%; background: var(--laiton); transition: width .25s linear; }
.chrono.urgent i { background: #e0573a; }
#chrono-txt { font-family: 'IBM Plex Mono', monospace; font-size: 12px; color: var(--doux); min-width: 110px; text-align: right; }
.actions { justify-content: flex-start; }
.btn.boucler { background: #e0573a; color: #fff; }
.btn.boucler.eclairee, .mini.eclairee { box-shadow: 0 0 0 3px #f2b33d, 0 0 18px rgba(242,179,61,.8); }
.programme { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 6px; }
.mini.choisie { outline: 3px solid #2f8f6b; outline-offset: 1px; }
.props { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 8px; }
.prop { display: flex; flex-direction: column; gap: 3px; }
.prop .via { font-size: 11px; color: var(--laiton); font-family: 'IBM Plex Mono', monospace; }
.fin.gagne { border-color: var(--laiton); }
.fin.perdu { border-color: #6b7280; }
.bas button { padding: 10px 2px; font-size: 13px; letter-spacing: 0; min-width: 0; }

/* Bouton retour des sous-pages */
.retour { align-self: flex-start; background: none; border: 1px solid var(--ligne); color: var(--laiton); border-radius: 999px; padding: 6px 14px 6px 10px; font-weight: 700; font-size: 14px; }
.retour span { font-size: 18px; line-height: 0; margin-right: 2px; }

/* Étiquette d'une carte tirée : nouvelle, ou utile à un film commencé */
.carte .etiquette { position: absolute; top: 5px; right: 5px; z-index: 1; max-width: calc(100% - 10px); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  background: #16110f; color: var(--creme); font-family: 'IBM Plex Mono', monospace; font-size: 8.5px; letter-spacing: .08em; text-transform: uppercase; padding: 3px 6px; border-radius: 3px; }
.carte .etiquette.utile { left: 5px; right: 5px; text-align: center; background: var(--laiton); color: var(--encre); font-weight: 700; box-shadow: 0 2px 8px rgba(0,0,0,.45); animation: bulle .5s .4s ease-out both; }
@keyframes bulle { from { transform: translateY(-6px) scale(.9); opacity: 0; } to { transform: none; opacity: 1; } }
.ligne-film b small { font-weight: 400; color: var(--doux); }

/* Ciné-chaîne : la carte à relier, en grand, et le choix du niveau */
.a-relier { display: flex; flex-direction: column; gap: 6px; }
.mini.grande { padding: 6px 12px 6px 6px; }
.mini.grande .mini-photo { width: 52px; height: 62px; }
.mini.grande .mini-txt b { font-size: 18px; }
.mini.grande .mini-txt small { font-size: 11px; }
.niveaux { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; }
.niveau { display: flex; flex-direction: column; gap: 4px; align-items: flex-start; text-align: left; background: var(--velours-2); color: var(--texte); border: 1px solid var(--ligne); border-radius: 10px; padding: 14px; }
.niveau b { font-family: 'Big Shoulders Display', sans-serif; font-size: 22px; text-transform: uppercase; color: var(--laiton); }
.niveau span { font-size: 13px; color: var(--doux); }
.niveau i { font-style: normal; font-family: 'IBM Plex Mono', monospace; font-size: 11px; color: var(--laiton); }
.niveau:disabled { opacity: .5; }

/* Dos de la carte : nationalité et palmarès */
.fiche-carte { display: flex; flex-direction: column; gap: 6px; font-size: 14px; }
.fiche-carte p { margin: 0; }
.fiche-carte b { display: block; font-family: Limelight, serif; font-weight: 400; color: var(--laiton); font-size: 13px; }
.fiche-carte ul { margin: 0; padding-left: 0; list-style: none; display: flex; flex-direction: column; gap: 3px; font-size: 13px; color: var(--doux); }
.fiche-carte li.gagne { color: var(--texte); }

/* Plateaux de tournage */
.carte .etiquette.tournage { left: 5px; right: 5px; text-align: center; background: #16110f; color: var(--laiton); border: 1px solid var(--laiton); font-weight: 700; }
.rang-plateaux { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.plateau { background: none; border: 0; color: var(--texte); display: flex; flex-direction: column; gap: 4px; padding: 0; text-align: left; min-width: 0; }
.plateau small { font-size: 11px; color: var(--doux); }
.plateau .pts { font-size: 12px; color: var(--laiton); }
.plateau.vide { border: 1.5px dashed var(--ligne); border-radius: 8px; padding: 10px; justify-content: center; aspect-ratio: 2 / 3; }
.plateau.vide span { font-weight: 700; color: var(--laiton); }
.zone-tournage { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 6px; }
.en-tournage { color: var(--laiton); font-weight: 700; margin: 0; }
.prochaine { font-size: 14px; color: var(--doux); border-left: 3px solid var(--laiton); padding-left: 10px; }
.prochaine b { color: var(--texte); }
.personnage { text-transform: none; letter-spacing: 0; color: var(--texte); font-family: Figtree, sans-serif; font-weight: 700; }

/* Booster rare, boutique, doubles */
.btn.dore { background: linear-gradient(135deg, #f7d77a, #c98d14); color: var(--encre); }
.billet.rare .corps, .billet.rare .souche { background: linear-gradient(135deg, #f7e2a3, #e0b04a); }
.billet.rare .titre { color: #6b3a00; }
.billet.rare .kicker { color: #6b3a00; }
.stat.lien { color: inherit; text-align: left; cursor: pointer; font: inherit; }
.stat.lien span { color: var(--laiton); }
.articles { display: flex; flex-direction: column; gap: 10px; }
.article { display: flex; gap: 12px; align-items: center; justify-content: space-between; background: var(--velours-2); border: 1px solid var(--ligne); border-radius: 10px; padding: 12px 14px; }
.article > div { min-width: 0; }
.article b { font-family: 'Big Shoulders Display', sans-serif; font-size: 20px; text-transform: uppercase; color: var(--laiton); }
.article p { margin: 2px 0 0; font-size: 13px; color: var(--doux); }
.article .btn { flex: none; }
.bobines { color: var(--laiton); }
.double { display: flex; flex-direction: column; gap: 6px; }

/* Collection : filtres par famille, navigation entre les cartes */
.filtres-collection { display: flex; flex-direction: column; gap: 10px; }
.groupe-filtre { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.etiquette-filtre { font-size: 10.5px; letter-spacing: .18em; text-transform: uppercase; color: var(--doux); font-weight: 700; }
.rangee-selects { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.rangee-selects select { width: 100%; background: var(--velours-2); color: var(--texte); border: 1px solid var(--ligne); border-radius: 8px; padding: 8px; font: inherit; font-size: 14px; }
.nav-carte { display: flex; align-items: center; justify-content: space-between; color: var(--doux); font-size: 13px; }
.fleche { background: var(--velours-2); border: 1px solid var(--ligne); color: var(--laiton); width: 44px; height: 44px; border-radius: 50%; font-size: 26px; line-height: 1; }
.fleche:disabled { opacity: .3; }

/* Bulles d'aide et retours des testeurs */
.astuce { background: var(--creme); color: var(--encre); border-radius: 12px; padding: 14px; display: flex; flex-direction: column; gap: 8px; box-shadow: 0 8px 20px rgba(0,0,0,.4); border-left: 5px solid var(--laiton); }
.astuce .kicker { color: var(--rideau); }
.astuce p { margin: 0; font-size: 14.5px; line-height: 1.45; color: var(--encre); }
.astuce .btn { align-self: flex-end; }
.haut { position: sticky; }
.ancien-bouton-idee { position: absolute; right: max(12px, env(safe-area-inset-right, 0px)); top: calc(14px + env(safe-area-inset-top, 0px)); width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--ligne); background: var(--velours-2); font-size: 18px; line-height: 1; }
.retour-form textarea { width: 100%; box-sizing: border-box; background: var(--velours-2); color: var(--texte); border: 1px solid var(--ligne); border-radius: 10px; padding: 10px; font: inherit; font-size: 15px; resize: vertical; }
.retour-form h2 { margin: 0; }
.retour-ligne { border-top: 1px solid var(--ligne); padding: 8px 0; display: flex; flex-direction: column; gap: 4px; }
.retour-ligne p { margin: 0; white-space: pre-wrap; }
.retour-ligne small { color: var(--doux); }
.retour-ligne.traite { opacity: .5; }
.gain { font-size: 13.5px; color: var(--texte); }
.gain b { color: var(--laiton); }
.bareme summary { cursor: pointer; color: var(--laiton); font-weight: 700; }
.bareme ul { margin: 8px 0 0; padding-left: 0; list-style: none; display: flex; flex-direction: column; gap: 4px; font-size: 14px; }
.bareme li b { color: var(--laiton); font-weight: 400; margin-right: 6px; }

/* Passe de design : rareté discrète (gemme près du nom), silhouettes par métier */
.carte .nom { display: flex; gap: 5px; align-items: flex-start; }
.carte .nom > span { min-width: 0; }
.gemme { flex: none; width: 14px; height: 14px; margin-top: 0; background: var(--gemme, #b9a47c); -webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20d%3D%22M1.00%2012.00a11%2011%200%201%200%2022%200a11%2011%200%201%200%20-22%200zM10.20%2012.00a1.8%201.8%200%201%200%203.6%200a1.8%201.8%200%201%200%20-3.6%200zM9.30%206.00a2.7%202.7%200%201%200%205.4%200a2.7%202.7%200%201%200%20-5.4%200zM15.01%2010.15a2.7%202.7%200%201%200%205.4%200a2.7%202.7%200%201%200%20-5.4%200zM12.83%2016.85a2.7%202.7%200%201%200%205.4%200a2.7%202.7%200%201%200%20-5.4%200zM5.77%2016.85a2.7%202.7%200%201%200%205.4%200a2.7%202.7%200%201%200%20-5.4%200zM3.59%2010.15a2.7%202.7%200%201%200%205.4%200a2.7%202.7%200%201%200%20-5.4%200z%22/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20d%3D%22M1.00%2012.00a11%2011%200%201%200%2022%200a11%2011%200%201%200%20-22%200zM10.20%2012.00a1.8%201.8%200%201%200%203.6%200a1.8%201.8%200%201%200%20-3.6%200zM9.30%206.00a2.7%202.7%200%201%200%205.4%200a2.7%202.7%200%201%200%20-5.4%200zM15.01%2010.15a2.7%202.7%200%201%200%205.4%200a2.7%202.7%200%201%200%20-5.4%200zM12.83%2016.85a2.7%202.7%200%201%200%205.4%200a2.7%202.7%200%201%200%20-5.4%200zM5.77%2016.85a2.7%202.7%200%201%200%205.4%200a2.7%202.7%200%201%200%20-5.4%200zM3.59%2010.15a2.7%202.7%200%201%200%205.4%200a2.7%202.7%200%201%200%20-5.4%200z%22/%3E%3C/svg%3E") center / contain no-repeat; }  /* petite bobine aux couleurs de la rareté */
.r-peu_commune { --gemme: #9da3a8; }
.r-rare { --gemme: #2f5f9e; }
.r-epique { --gemme: #8a5cc9; }
.r-legendaire { --gemme: #d39b1c; }
.r-mythique { --gemme: #c2203d; }
.r-commune .gemme { --gemme: #9c8660; }
.r-legendaire .gemme, .r-mythique .gemme { filter: drop-shadow(0 0 2.5px var(--gemme)); }
.carte .photo.sil { background-color: var(--fond, #b9a47c); }
.carte .photo.sil svg { width: 82%; }
.mini-photo svg { width: 100%; }

/* Toutes les cartes ont la même taille : nom sur 2 lignes au plus, films sur 2 lignes, le reste coupé. */
.carte { display: flex; flex-direction: column; }
.carte .int { flex: 1; display: flex; flex-direction: column; }
.carte .nom { height: 2.15em; min-height: 0; overflow: hidden; }
.carte .nom > span { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.carte .nom > span.long { font-size: 14.5px; line-height: 1.02; }
.carte .films { height: 2.6em; min-height: 0; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.carte .films em { font-style: normal; font-weight: 700; color: var(--encre); }
.carte .talon { margin-top: auto; }
.grille, .tirage { align-items: start; }
.carte .clap .pierres { letter-spacing: 1px; font-size: 8px; }

/* Défis du jour */
.defis { display: flex; flex-direction: column; gap: 10px; }
.defis .sous { font-size: 12.5px; color: var(--doux); margin: 0; }
.defi { display: flex; gap: 12px; align-items: center; border-top: 1px solid var(--ligne); padding-top: 10px; }
.defi-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.defi-txt b { font-size: 14.5px; font-weight: 500; }
.defi-txt small { font-size: 11px; color: var(--doux); font-family: 'IBM Plex Mono', monospace; }
.defi .btn { flex: none; }
.defi.fini { opacity: .6; }
.defi-ok { color: var(--laiton); font-weight: 700; font-size: 13px; flex: none; }

/* Film du jour */
.fdj { display: flex; gap: 14px; align-items: flex-start; background: none; border: 0; padding: 0; color: var(--texte); text-align: left; width: 100%; }
.fdj-affiche { width: 96px; flex: none; }
.fdj-txt { display: flex; flex-direction: column; gap: 5px; min-width: 0; font-size: 14px; }
.fdj-txt > b { font-family: 'Big Shoulders Display', sans-serif; font-size: 24px; text-transform: uppercase; line-height: 1; }
.fdj-txt small { color: var(--doux); font-size: 12px; }
.film-du-jour { border-color: var(--laiton); }

/* Harmonisation des écrans : même en-tête partout (sur-titre, titre, phrase d'introduction) */
.entete { display: flex; flex-direction: column; gap: 6px; }
.entete h1 { margin: 0; text-wrap: balance; }
.entete p, .intro { margin: 0; color: var(--doux); font-size: 14.5px; line-height: 1.5; max-width: 62ch; }
.intro b { color: var(--texte); }
.onglets + .intro { margin-top: -6px; }
.affiche.e0::after { content: none; }  /* l'affiche grisée suffit ; le statut est écrit à côté */
.grille > p, .tirage > p { grid-column: 1 / -1; }

/* Recherche, casting, série de visites */
.recherche { display: flex; align-items: center; gap: 8px; background: var(--velours-2); border: 1px solid var(--ligne); border-radius: 10px; padding: 0 12px; }
.recherche input { flex: 1; min-width: 0; background: none; border: 0; color: var(--texte); font: inherit; font-size: 15px; padding: 11px 0; outline: none; }
.recherche:focus-within { border-color: var(--laiton); }
.casting .sous, .serie .sous { font-size: 12.5px; color: var(--doux); margin: 0; }
.casting { display: flex; flex-direction: column; gap: 8px; }
.casting-nom { border-color: var(--r); }
.casting-nom small { color: var(--doux); font-size: 11px; }
.nom-carte.visable { cursor: pointer; border-style: dashed; }
.nom-carte.au-casting { border-style: solid; box-shadow: 0 0 0 1px var(--laiton); }
.serie { display: flex; flex-direction: column; gap: 10px; }
.serie-jours { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
.serie-jours span { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 6px 2px; border-radius: 8px; border: 1px solid var(--ligne); text-align: center; }
.serie-jours b { font-size: 12px; color: var(--doux); }
.serie-jours small { font-size: 9.5px; line-height: 1.15; color: var(--doux); }
.serie-jours .passe { opacity: .5; }
.serie-jours .aujourdhui { border-color: var(--laiton); background: rgba(233,185,73,.12); }
.serie-jours .aujourdhui b, .serie-jours .aujourdhui small { color: var(--laiton); }
.panneau .sous { font-size: 12.5px; color: var(--doux); margin: 0; }

/* Jouer : choix du jeu */
.jeux { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; }
.jeu { display: flex; flex-direction: column; gap: 6px; align-items: flex-start; text-align: left; background: var(--velours-2); color: var(--texte); border: 1px solid var(--ligne); border-radius: 14px; padding: 18px; }
.jeu-ico { font-size: 30px; }
.jeu b { font-family: 'Big Shoulders Display', sans-serif; font-size: 26px; text-transform: uppercase; color: var(--laiton); }
.jeu span { font-size: 14px; color: var(--doux); line-height: 1.45; }
.jeu i { font-style: normal; font-size: 12px; font-weight: 700; color: var(--encre); background: var(--laiton); border-radius: 999px; padding: 2px 10px; }

/* Quiz de projection */
.niveau[aria-pressed="true"] { border-color: var(--laiton); box-shadow: 0 0 0 2px rgba(233,185,73,.35); }
.budget { margin: 0; color: var(--doux); }
.budget b { color: var(--texte); }
.budget .trop { color: #ff8a7a; }
.film-vignette.choisi .affiche { outline: 3px solid var(--laiton); outline-offset: 2px; }
.bas-fixe { position: sticky; bottom: calc(70px + env(safe-area-inset-bottom, 0px)); z-index: 3; }
.quiz-tete { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.scores { display: flex; align-items: center; gap: 10px; }
.scores span { display: flex; flex-direction: column; align-items: center; }
.scores small { font-size: 10px; letter-spacing: .15em; text-transform: uppercase; color: var(--doux); }
.scores b { font-family: 'Big Shoulders Display', sans-serif; font-size: 26px; line-height: 1; }
.scores .vs { color: var(--doux); }
.projection { display: flex; flex-direction: column; gap: 2px; background: linear-gradient(180deg, rgba(233,185,73,.12), transparent); border-top: 2px solid var(--laiton); border-radius: 6px; padding: 10px 12px; }
.projection b { font-family: 'Big Shoulders Display', sans-serif; font-size: 22px; text-transform: uppercase; }
.projection small { color: var(--doux); }
.question { display: flex; flex-direction: column; gap: 12px; }
.question h2 { color: var(--texte); font-size: 24px; text-transform: none; font-family: Figtree, sans-serif; font-weight: 700; line-height: 1.25; }
.q-info { display: flex; justify-content: space-between; font-size: 12px; color: var(--doux); font-family: 'IBM Plex Mono', monospace; }
.q-info span:last-child { color: var(--laiton); letter-spacing: 2px; }
.q-info i { font-style: normal; color: rgba(233,185,73,.25); }
.question .chrono { height: 6px; border-radius: 3px; background: rgba(255,255,255,.08); overflow: hidden; }
.question .chrono i { display: block; height: 100%; background: var(--laiton); transition: width .1s linear; }
.question .chrono.urgent i { background: #e0603a; }
.reponses { display: grid; gap: 8px; }
.reponse { background: var(--creme); color: var(--encre); border: 0; border-radius: 10px; padding: 14px; font: inherit; font-weight: 700; font-size: 16px; text-align: left; }
.reponse.juste { background: #3f8f5a; color: #fff; }
.reponse.faux { background: #a8323e; color: #fff; }
.reponse:disabled:not(.juste):not(.faux) { opacity: .55; }
.retour-q { display: flex; flex-direction: column; gap: 10px; }
.verdict { margin: 0; font-weight: 700; font-size: 16px; }
.verdict.ok { color: #7fd69a; } .verdict.ko { color: #ff8a7a; }
.q-carte { display: flex; flex-direction: column; gap: 4px; }
.q-carte small { color: var(--doux); font-size: 12px; }
.detail-ia { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.detail-ia li { display: flex; gap: 10px; font-size: 14px; }
.detail-ia li > span:first-child { flex: none; width: 1.4em; font-weight: 700; }
.detail-ia li.ok > span:first-child { color: #7fd69a; } .detail-ia li.ko > span:first-child { color: #ff8a7a; }
.detail-ia small { display: block; color: var(--doux); font-size: 12px; }
.serie.compacte { padding-block: 10px; }
.serie.compacte .kicker { margin-right: 6px; }
.film-du-jour + section.centre { margin-top: 4px; }

/* En-tête : profil et retours à gauche, Bobines à droite */
.haut { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 8px; }
.haut .fronton { grid-column: 2; }
.haut .gauche { grid-column: 1; justify-self: start; display: flex; gap: 6px; }
.haut .gauche[hidden], .haut .bourse[hidden] { display: none !important; }
.rond { width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--ligne); background: var(--velours-2); font-size: 16px; line-height: 1; padding: 0; display: grid; place-items: center; }
.bourse { grid-column: 3; justify-self: end; display: flex; align-items: center; gap: 6px; background: var(--velours-2); border: 1px solid var(--ligne); border-radius: 99px; padding: 4px 4px 4px 11px; color: var(--laiton); }
.bourse b { font-family: 'IBM Plex Mono', monospace; font-size: 14px; font-weight: 500; }
.bobine-ic { width: 24px; height: 24px; display: block; }
@media (max-width: 400px) {
  .haut .fronton { padding: 4px 12px; } .haut .fronton span { font-size: 17px; padding: 1px 10px; }
  .rond { width: 32px; height: 32px; font-size: 14px; } .bourse b { font-size: 13px; } .bourse { padding-left: 9px; }
}

/* Accueil */
.vedette { display: flex; flex-direction: column; gap: 10px; width: min(420px, 100%); margin: 0 auto; }
.vedette .billet { width: 100%; aspect-ratio: 16 / 8.4; }
.vedette .billet .numero { font-family: 'IBM Plex Mono', monospace; font-size: 10px; letter-spacing: .14em; color: var(--brun); margin-top: 6px; }
.vedette .souche { gap: 2px; }
.vedette .souche .dispo { font-family: 'Big Shoulders Display', sans-serif; font-weight: 800; font-size: 42px; line-height: 1; color: var(--rideau); }
.vedette .souche .rebours { margin-top: 8px; padding-top: 6px; border-top: 1px dashed rgba(42,21,25,.35); line-height: 1.25; }
.vedette .souche .rebours b { font-size: 13px; }
.duo { display: flex; gap: 8px; }
.duo .btn { flex: 1; padding-inline: 8px; }
.jauges { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; font-size: 11px; color: var(--doux); }
.jauges > div { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.jauges .pellicule { height: 7px; }
.tuiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; width: min(420px, 100%); margin: 0 auto; }
.tuile { position: relative; background: var(--velours-2); border: 1px solid var(--ligne); border-radius: 12px; padding: 12px 6px 10px; display: flex; flex-direction: column; align-items: center; gap: 5px; text-align: center; color: var(--texte); min-width: 0; min-height: 96px; justify-content: center; }
.tuile .ic { font-size: 24px; line-height: 1; }
.tuile .nm { font-family: 'Big Shoulders Display', sans-serif; font-weight: 800; font-size: 14px; line-height: 1; text-transform: uppercase; }
.tuile .vl { font-family: 'IBM Plex Mono', monospace; font-size: 11px; color: var(--laiton); }
.tuile.attente { border-color: var(--laiton); box-shadow: 0 0 16px rgba(233,185,73,.22); }
.tuile.affichee { background: linear-gradient(transparent 20%, rgba(20,10,12,.92) 75%), var(--fond, var(--velours-2)); justify-content: flex-end; }
.tuile .titre-fdj { font-family: Limelight, serif; font-size: 12px; color: var(--ink, var(--creme)); line-height: 1.1; margin-bottom: auto; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.pastille { position: absolute; top: -5px; right: -5px; width: 13px; height: 13px; border-radius: 50%; background: #ff5a4e; box-shadow: 0 0 0 2px var(--velours); }
.bas button { position: relative; }
.bas button.signal::after { content: ""; position: absolute; top: 6px; right: calc(50% - 30px); width: 8px; height: 8px; border-radius: 50%; background: #ff5a4e; }
.alertes { display: flex; flex-direction: column; gap: 8px; width: min(420px, 100%); margin: 0 auto; }
.alertes:empty { display: none; }
.alerte { display: flex; align-items: center; gap: 10px; background: var(--velours-2); border: 1px solid var(--ligne); border-radius: 12px; padding: 8px 10px; color: var(--texte); text-align: left; }
.alerte .mini-affiche { width: 34px; aspect-ratio: 2 / 3; flex: none; border-radius: 4px; background: var(--fond); color: var(--ink); font-family: Limelight, serif; font-size: 7px; line-height: 1.1; display: grid; place-items: center; text-align: center; padding: 2px; overflow: hidden; }
.alerte-ic { width: 34px; text-align: center; font-size: 20px; flex: none; }
.alerte-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.alerte-txt b { color: var(--laiton); font-size: 13px; }
.alerte-txt small { color: var(--doux); font-size: 12px; }
.fleche-alerte { color: var(--laiton); font-size: 20px; }

/* Tiroir du jour */
.tiroir-fond { position: fixed; inset: 0; z-index: 20; background: rgba(10,4,6,0); transition: background .25s; display: flex; align-items: flex-end; justify-content: center; }
.tiroir-fond.ouvert { background: rgba(10,4,6,.6); }
.tiroir { width: min(560px, 100%); max-height: 82dvh; background: var(--velours-2); border-top: 1px solid var(--laiton); border-radius: 18px 18px 0 0; box-shadow: 0 -12px 30px rgba(0,0,0,.5); display: flex; flex-direction: column; gap: 10px; padding: 8px max(14px, env(safe-area-inset-right, 0px)) calc(14px + env(safe-area-inset-bottom, 0px)) max(14px, env(safe-area-inset-left, 0px)); transform: translateY(100%); transition: transform .25s ease-out; }
.tiroir-fond.ouvert .tiroir { transform: translateY(0); }
.poignee { width: 42px; height: 4px; border-radius: 2px; background: var(--brun); margin: 2px auto 2px; flex: none; }
.tiroir-onglets { display: flex; gap: 6px; flex-wrap: wrap; }
.tiroir-onglets button { font-size: 12.5px; padding: 6px 11px; border-radius: 99px; border: 1px solid var(--ligne); background: none; color: var(--doux); }
.tiroir-onglets button[aria-pressed="true"] { background: var(--laiton); color: var(--encre); border-color: var(--laiton); font-weight: 700; }
.tiroir-corps { overflow-y: auto; min-height: 0; }
.tiroir-corps > .panneau { background: none; border: 0; padding: 4px 0 0; }
body.tiroir-ouvert { overflow: hidden; }
@media (max-width: 400px) { .bas { padding-inline: max(4px, env(safe-area-inset-left, 0px)) max(4px, env(safe-area-inset-right, 0px)); } .bas button { font-size: 12px; padding: 10px 0; } .bas button.signal::after { right: 4px; } }
.alerte.piste .alerte-txt b { color: var(--texte); }
.q-temps { display: flex; align-items: center; gap: 10px; }
.q-temps .chrono { flex: 1; height: 10px; border-radius: 5px; }
.q-temps .secondes { font-family: 'Big Shoulders Display', sans-serif; font-weight: 800; font-size: 30px; line-height: 1; min-width: 2ch; text-align: right; color: var(--laiton); font-variant-numeric: tabular-nums; }
.q-temps .secondes.urgent { color: #e0603a; animation: battement 1s infinite; }
@keyframes battement { 50% { transform: scale(1.15); } }

/* Bêta et pages légales */
.beta { border: 1px dashed var(--laiton); border-radius: 12px; padding: 10px 12px; font-size: 13px; color: var(--doux); }
.beta b { display: block; color: var(--laiton); font-family: 'IBM Plex Mono', monospace; font-size: 11px; letter-spacing: .18em; text-transform: uppercase; margin-bottom: 2px; }
.liens-legaux { text-align: center; font-size: 12.5px; }
.liens-legaux button { background: none; border: 0; color: var(--doux); text-decoration: underline; padding: 4px; }
.legal h3 { margin: 6px 0 0; font-family: 'Big Shoulders Display', sans-serif; font-weight: 800; font-size: 18px; text-transform: uppercase; color: var(--laiton); }
.legal p, .legal li { font-size: 14px; color: var(--doux); max-width: 65ch; }
.legal ul { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 4px; }
.legal b { color: var(--texte); }
.selection { user-select: all; }
.tmdb { display: flex; flex-direction: column; gap: 8px; }
.tmdb img { width: 110px; height: auto; }
.supprimer summary { cursor: pointer; color: #e0805f; font-size: 13px; margin-top: 4px; }
.supprimer[open] { display: flex; flex-direction: column; gap: 8px; }
.btn.rouge { background: #b3263c; color: #fff; }
.entete .ligne-doublures { font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Carrière */
.jauge-grade { width: min(420px, 100%); margin: 0 auto; background: none; border: 0; padding: 0; color: var(--texte); display: flex; flex-direction: column; gap: 5px; text-align: left; }
.jg-haut { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.jg-haut b { font-family: 'Big Shoulders Display', sans-serif; font-weight: 800; font-size: 16px; text-transform: uppercase; color: var(--laiton); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.jg-haut small { font-family: 'IBM Plex Mono', monospace; font-size: 11px; color: var(--doux); white-space: nowrap; }
.jauge-grade .pellicule { height: 7px; }
.annonce-grade { text-align: center; align-items: center; background: var(--velours-2); border: 1px solid var(--laiton); border-radius: 16px; padding: 20px 18px; gap: 10px; }
.annonce-grade .grade-n { font-family: 'Big Shoulders Display', sans-serif; font-weight: 800; font-size: 72px; line-height: 1; color: var(--laiton); text-shadow: 0 0 24px rgba(233,185,73,.4); }
.annonce-grade ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; width: 100%; text-align: left; max-height: 40vh; overflow-y: auto; }
.annonce-grade li { display: flex; justify-content: space-between; gap: 10px; font-size: 13px; border-bottom: 1px dashed var(--ligne); padding-bottom: 4px; }
.annonce-grade li span { color: var(--laiton); text-align: right; }
.ligne-grade { display: grid; grid-template-columns: 28px minmax(0, 1fr) minmax(0, 44%); gap: 10px; align-items: center; padding: 6px 0; border-bottom: 1px dashed var(--ligne); font-size: 13px; }
.ligne-grade:last-child { border-bottom: 0; }
.ligne-grade .gn { font-family: 'Big Shoulders Display', sans-serif; font-weight: 800; font-size: 20px; color: var(--doux); text-align: center; }
.ligne-grade .gnom { display: flex; flex-direction: column; min-width: 0; }
.ligne-grade .gnom small { font-family: 'IBM Plex Mono', monospace; font-size: 10.5px; color: var(--doux); }
.ligne-grade .grec { font-size: 12px; line-height: 1.3; color: var(--doux); text-align: right; }
.ligne-grade.passe { opacity: .55; }
.ligne-grade.actuel { background: rgba(233,185,73,.1); border-radius: 8px; padding-inline: 6px; border-bottom-color: transparent; }
.ligne-grade.actuel .gn, .ligne-grade.actuel b { color: var(--laiton); }
.jauge-grade.brille .pellicule { box-shadow: 0 0 14px rgba(233,185,73,.7); }
.jauge-grade.brille b { animation: battement .6s 3; }
.champ-code { font-family: 'IBM Plex Mono', monospace; font-size: 20px; letter-spacing: .3em; text-align: center; }
.code-zone { display: flex; flex-direction: column; gap: 10px; }
.champ-code::placeholder { letter-spacing: 0; font-size: 15px; font-family: Figtree, sans-serif; }

/* ------------------------------------------------------------------ amis et duels (étape 18) */
.entre-amis { gap: 10px; }
.duels-bloc { display: flex; flex-direction: column; gap: 6px; }
.dl-titre { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--doux); }
.duel-ligne { display: flex; align-items: center; gap: 10px; background: var(--velours); border: 1px solid var(--ligne); border-radius: 12px; padding: 9px 10px; color: var(--texte); text-align: left; width: 100%; }
.duel-ligne.a-moi { border-color: var(--laiton); box-shadow: 0 0 0 1px rgba(233,185,73,.35); }
.duel-ligne.gagne .dl-txt small { color: #7fd69a; }
.dl-ic { width: 30px; text-align: center; font-size: 20px; flex: none; }
.dl-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.dl-txt b { font-size: 14px; overflow-wrap: anywhere; }
.dl-txt small { color: var(--doux); font-size: 12px; }
.dl-txt small b { color: var(--laiton); font-size: 12px; }
.ami-ligne { display: flex; align-items: center; gap: 8px; padding: 6px 0; border-top: 1px solid var(--ligne); }
.ami-ligne:first-of-type { border-top: 0; }
.ami-nom { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.ami-nom b { overflow-wrap: anywhere; }
.ami-nom small { color: var(--doux); font-size: 12px; }
.badge { font-style: normal; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--encre); background: var(--laiton); border-radius: 999px; padding: 1px 7px; vertical-align: middle; }
.lien-boite { background: var(--velours); border: 1px dashed var(--ligne); border-radius: 10px; padding: 10px 12px; overflow-wrap: anywhere; }
.lien-boite code { font-family: 'IBM Plex Mono', monospace; font-size: 13px; color: var(--laiton); user-select: all; }
.parrainage summary { cursor: pointer; color: var(--texte); font-weight: 700; font-size: 14px; }
.parrainage p { margin-top: 8px; }
.invitation-ami { border-color: var(--laiton); }
.duel-tete { display: flex; justify-content: space-between; align-items: flex-end; gap: 12px; }
.annonce-duel { background: rgba(233,185,73,.1); border-left: 3px solid var(--laiton); border-radius: 6px; padding: 8px 12px; color: var(--texte); }
.ouvrir-tour { border-color: var(--laiton); align-items: flex-start; }
.ouvrir-tour p b { color: var(--texte); }
.attente p b { color: var(--texte); }
.maillon.cachee .mini-cachee { background: #2a2d33; color: var(--doux); border-left-color: #6b7280; cursor: default; }
.mini-cachee .mini-photo { background: #3a3d44; color: var(--laiton); font-weight: 800; font-size: 20px; place-items: center; }
.mini-cachee .mini-txt b, .mini-cachee .mini-txt small { color: var(--doux); }
.jeu[aria-pressed="true"] { border-color: var(--laiton); box-shadow: 0 0 0 2px rgba(233,185,73,.35); }
.defi-suite { display: flex; flex-direction: column; gap: 12px; scroll-margin-top: 80px; }
.programme-quiz { display: flex; flex-direction: column; gap: 10px; }
.films-duel { display: flex; flex-direction: column; gap: 8px; }
.film-vignette.projete { opacity: .55; }
.film-vignette.secret { display: grid; place-items: center; aspect-ratio: 2 / 3; border: 1px dashed var(--ligne); border-radius: 8px; background: var(--velours-2); color: var(--doux); font-family: Limelight, serif; font-size: 34px; }
.detail-ia details summary { cursor: pointer; font-size: 12px; color: var(--laiton); margin-top: 2px; }
.detail-ia details .detail-ia { margin-top: 6px; }

/* ------------------------------------------------------------------ prêts et échanges (étape 19) */
.ami-ligne { flex-wrap: wrap; }
.ami-actions { display: flex; gap: 6px; flex-wrap: wrap; width: 100%; }
.ami-actions .btn { flex: 1 1 auto; }
.echange { display: flex; flex-direction: column; gap: 8px; padding: 10px 0; border-top: 1px solid var(--ligne); }
.echange:first-of-type { border-top: 0; }
.echange p b { color: var(--texte); }
.echange-cotes { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.echange-cotes small, .cote-col .kicker { display: block; margin-bottom: 4px; color: var(--doux); font-size: 11.5px; }
.mini-liste { display: flex; flex-direction: column; gap: 4px; }
.mini-x { position: relative; }
.mini-x .fois { position: absolute; top: -6px; right: -4px; background: var(--laiton); color: var(--encre); border-radius: 999px; font-size: 11px; padding: 0 6px; }
.mini-x .retirer { position: absolute; top: -6px; right: -4px; background: #b3263c; color: #fff; border-radius: 50%; width: 18px; height: 18px; font-size: 11px; display: grid; place-items: center; cursor: pointer; }
.composer { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.cote-col { display: flex; flex-direction: column; gap: 6px; background: var(--velours-2); border: 1px solid var(--ligne); border-radius: 12px; padding: 10px; }
.cote-col .choix { display: flex; flex-direction: column; gap: 5px; min-height: 40px; }
.balance { display: flex; flex-direction: column; gap: 4px; align-items: center; text-align: center; }
.plateaux { display: flex; align-items: center; gap: 10px; font-family: 'IBM Plex Mono', monospace; font-size: 13px; }
.plateaux .fleau { font-size: 22px; font-weight: 700; color: #ff8a7a; }
.balance.juste .fleau { color: #7fd69a; }
.aide-balance { font-size: 13px; }
.avert-etoiles { background: #3a1d1d; border: 1px solid #b3262f; border-radius: 10px; padding: 10px 12px; color: #f6d6d6; font-size: 13px; }
.avert-etoiles ul { margin: 6px 0; padding-left: 18px; }
.avert-etoiles small { color: #e7bcbc; }
.choix-carte { gap: 10px; }
.recherche { background: var(--velours); color: var(--texte); border: 1px solid var(--ligne); border-radius: 10px; padding: 10px 12px; font: inherit; width: 100%; }
.liste-choix { display: flex; flex-direction: column; gap: 6px; max-height: 55vh; overflow-y: auto; }
.ligne-choix { display: grid; grid-template-columns: 1fr auto; gap: 8px; align-items: center; background: none; border: 0; padding: 0; text-align: left; color: var(--texte); }
.ligne-choix:disabled { opacity: .4; }
.ligne-choix.choisi .mini { outline: 3px solid #2f8f6b; outline-offset: 1px; }
.ligne-choix .sous { font-size: 11.5px; }
.pret-ligne { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 8px; align-items: center; }
.pret-ligne .sous b { color: var(--texte); }
.pret-tag { font-style: normal; font-size: 11px; color: var(--laiton); }
.nom-carte.pretee { opacity: .6; text-decoration: line-through; }
.avec-pret { font-size: 13px; color: var(--laiton); }
@media (max-width: 420px) { .composer, .echange-cotes { grid-template-columns: 1fr; } }
.pied-echange { background: var(--velours); border-top: 1px solid var(--ligne); padding: 8px 0 10px; gap: 6px; }

/* ------------------------------------------------------------------ joueurs inscrits (administrateurs, étape 20) */
.liste-joueurs { display: flex; flex-direction: column; gap: 10px; }
.stats-joueurs { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 13px; color: var(--doux); }
.stats-joueurs b { color: var(--texte); font-size: 16px; }
.joueurs { display: flex; flex-direction: column; max-height: 60vh; overflow-y: auto; }
.joueur-ligne { display: flex; flex-direction: column; gap: 2px; padding: 8px 0; border-top: 1px solid var(--ligne); font-size: 14px; }
.joueur-ligne small { color: var(--doux); font-size: 12px; }
.joueur-ligne .selection { user-select: all; color: var(--laiton); overflow-wrap: anywhere; font-family: 'IBM Plex Mono', monospace; font-size: 12.5px; }

/* ------------------------------------------------------------------ la Salle (étape 21) */
.avatar { width: var(--t); height: var(--t); border-radius: 50%; padding: calc(var(--t) * .05); box-sizing: border-box; display: inline-grid; flex: none; }
.avatar-in { border-radius: 50%; background: #2a1519; color: var(--laiton); display: grid; place-items: center; width: 100%; height: 100%; }
.avatar-in svg { width: 58%; height: 58%; }
.cadre-laiton { background: conic-gradient(#f7d77a, #c98d14, #ffe28a, #9a650a, #f7d77a); box-shadow: 0 0 calc(var(--t) * .3) rgba(255,214,120,.3); }
.cadre-argent { background: conic-gradient(#f2f2f2, #9da3a8, #e6e6e6, #7d8288, #f2f2f2); }
.cadre-argent .avatar-in { color: #e6e6e6; }
.cadre-rubis { background: conic-gradient(#e2445c, #8e1b2c, #ff7b8e, #6b1220, #e2445c); }
.cadre-rubis .avatar-in { color: #ff9aa9; }
.cadre-neon { background: #7fe8ff; box-shadow: 0 0 calc(var(--t) * .2) rgba(127,232,255,.8); }
.cadre-neon .avatar-in { background: #111c3a; color: #ff6fae; }
.cadre-holo { background: conic-gradient(#ff8ad8, #8ae0ff, #c6ff8a, #ffe08a, #ff8ad8); }
.cadre-holo .avatar-in { color: #ffe08a; }
#bouton-profil { padding: 0; overflow: hidden; }
#bouton-profil .avatar { width: 100%; height: 100%; }

.salle { --s-fond: #1a0d10; --s-carte: rgba(38,20,26,.88); --s-accent: #e9b949; --s-texte: #f6ecdc; --s-doux: #c9b4a3; --s-ligne: rgba(233,185,73,.3); --s-nom: Limelight, serif;
  margin: -8px calc(-1 * max(16px, env(safe-area-inset-left, 0px))) -24px; padding: 8px max(16px, env(safe-area-inset-left, 0px)) 28px; min-height: 100dvh;
  display: flex; flex-direction: column; gap: 22px; color: var(--s-texte); }
.salle .kicker { color: var(--s-accent); }
.salle.theme-velours { background-color: #1a0d10; background-image: repeating-linear-gradient(90deg, rgba(0,0,0,.28) 0px, rgba(255,255,255,.03) 14px, rgba(0,0,0,.28) 28px), linear-gradient(180deg, #5a1220 0px, #2a0b12 420px, #1a0d10 900px); }
.salle.theme-artdeco { --s-carte: rgba(28,27,34,.9); --s-accent: #d8b25a; --s-texte: #f1ead9; --s-doux: #a9a294; --s-ligne: rgba(216,178,90,.5); --s-nom: 'Poiret One', sans-serif;
  background-color: #0e0e11; background-image: repeating-conic-gradient(from 0deg at 50% 220px, rgba(216,178,90,.1) 0deg 5deg, transparent 5deg 15deg), linear-gradient(180deg, #17161c, #0e0e11 600px); }
.salle.theme-drivein { --s-carte: rgba(17,28,58,.88); --s-accent: #7fe8ff; --s-texte: #eef2fb; --s-doux: #a7b3d1; --s-ligne: rgba(127,232,255,.35); --s-nom: Monoton, sans-serif;
  background-color: #0b1328; background-image: radial-gradient(circle at 12% 4%, #fff 0 1px, transparent 1.6px), radial-gradient(circle at 70% 8%, #fff 0 1px, transparent 1.6px), radial-gradient(circle at 40% 14%, rgba(255,255,255,.8) 0 1px, transparent 1.6px), radial-gradient(circle at 88% 20%, #fff 0 1px, transparent 1.6px), linear-gradient(180deg, #0b1328 0px, #1b2a55 520px, #0b1328 1100px); }
.salle .retour { border-color: var(--s-ligne); color: var(--s-accent); }
.salle-haut { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.rangee-g { display: flex; gap: 8px; align-items: center; }
.rond-reglage { width: 42px; height: 42px; padding: 0; border-radius: 50%; display: grid; place-items: center; color: var(--s-accent); border-color: var(--s-ligne); }
.salle-fronton { display: flex; flex-direction: column; align-items: center; gap: 14px; text-align: center; }
.salle-nom span { display: inline-block; font-family: var(--s-nom); font-size: 30px; letter-spacing: .04em; color: var(--s-accent); overflow-wrap: anywhere; }
.theme-velours .salle-nom { padding: 6px 20px; border-radius: 8px; background-color: #a8730f; background-image: radial-gradient(circle, #fff3c4 0 1.4px, rgba(233,185,73,.25) 2.2px, transparent 3px), linear-gradient(135deg, #ffe9a8, #c98d14 40%, #ffe28a 60%, #9a650a); background-size: 9px 9px, auto; box-shadow: 0 0 26px rgba(255,214,120,.3); max-width: 100%; box-sizing: border-box; }
.theme-velours .salle-nom span { background: #1a0d10; padding: 2px 20px; border-radius: 4px; }
.theme-artdeco .salle-nom { display: flex; align-items: center; gap: 10px; }
.theme-artdeco .salle-nom::before, .theme-artdeco .salle-nom::after { content: ""; width: 30px; height: 2px; background: var(--s-accent); }
.theme-artdeco .salle-nom span { font-size: 34px; letter-spacing: .16em; text-transform: uppercase; color: #f1d58d; }
.theme-drivein .salle-nom span { color: #ff6fae; font-size: 34px; text-shadow: 0 0 8px rgba(255,111,174,.9), 0 0 22px rgba(255,111,174,.6); text-transform: uppercase; }
.salle-grade { display: flex; flex-direction: column; gap: 2px; }
.salle-grade b { font-family: 'Big Shoulders Display', sans-serif; font-weight: 800; font-size: 24px; text-transform: uppercase; }
.salle-grade small { font-size: 13px; color: var(--s-doux); }
.salle-carte { background: var(--s-carte); border: 1px solid var(--s-ligne); border-radius: 14px; padding: 12px; display: flex; flex-direction: column; gap: 10px; }
.theme-artdeco .salle-carte { border-radius: 2px; }
.salle-carte p { color: var(--s-doux); }
.salle-carte.vide { color: var(--s-doux); font-size: 14px; }
.salle-ligne { display: flex; justify-content: space-between; align-items: baseline; }
.bilan { font-family: 'Big Shoulders Display', sans-serif; font-size: 22px; }
.salle-boutons { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.salle-boutons .btn { padding: 12px 4px; font-size: 15px; }
.salle .btn:not(.fantome), .salle-bulle .btn { background: var(--s-accent); color: var(--s-btn, #17161c); }
.salle .btn.fantome { color: var(--s-texte); border-color: var(--s-ligne); }
.salle-chiffres { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; text-align: center; }
.salle-chiffres > div { background: var(--s-carte); border: 1px solid var(--s-ligne); border-radius: 10px; padding: 10px 2px; }
.salle-chiffres b { display: block; font-family: 'Big Shoulders Display', sans-serif; font-size: 24px; }
.salle-chiffres b.or { color: var(--s-accent); }
.salle-chiffres span { font-size: 11px; color: var(--s-doux); }
.salle-bloc { display: flex; flex-direction: column; gap: 10px; }
.salle-fp { flex-direction: row; align-items: center; gap: 14px; cursor: default; }
.salle-fp .affiche { width: 120px; flex: none; }
.salle-fp b { display: block; font-size: 16px; }
.salle-fp small { color: var(--s-doux); font-size: 13px; }
.salle-vitrine { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.salle-film { display: flex; flex-direction: column; gap: 6px; cursor: pointer; }
.salle-film .aff-titre { font-size: 15px; }
.salle-film .aff-etoiles { display: none; }
.etoiles-film { text-align: center; font-size: 12px; color: var(--s-accent); }
.cartes-vitrine { justify-items: center; }
.cartes-vitrine .carte { width: 150px; zoom: .72; }
.salle-fp .aff-etoiles, .salle-fp .tampon { display: none; }
.salle-fp .aff-int { filter: none !important; }
.salle-lien { flex-direction: row; align-items: center; border-style: dashed; }
.salle-lien code { flex: 1; min-width: 0; font-family: 'IBM Plex Mono', monospace; font-size: 12px; color: var(--s-accent); overflow-wrap: anywhere; }
.salle-garde { text-align: center; font-size: 12px; color: var(--s-doux); }
.lien-discret { background: none; border: 0; color: var(--s-doux); text-decoration: underline; font-size: 12px; padding: 6px; }
.ami-nom[data-salle] { cursor: pointer; }
.ami-nom[data-salle] b { text-decoration: underline dotted; text-underline-offset: 3px; }

.grille-avatars { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.choix-deco { aspect-ratio: 1; border-radius: 12px; background: var(--velours); border: 1px solid var(--ligne); color: var(--texte); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; padding: 4px; }
.choix-deco svg { width: 56%; height: 56%; }
.choix-deco.equipe { border: 2px solid var(--laiton); color: var(--laiton); box-shadow: 0 0 12px rgba(233,185,73,.4); }
.choix-deco.verrou { border-style: dashed; color: var(--brun); }
.choix-deco .prix, .choix-cadre .prix { font-size: 10px; color: var(--doux); line-height: 1.1; text-align: center; }
.choix-deco.confirmer, .choix-cadre.confirmer, .choix-theme.confirmer { border-color: var(--laiton); }
.choix-deco.confirmer .prix, .choix-cadre.confirmer .prix, .choix-theme.confirmer .prix { color: var(--laiton); font-weight: 700; }
.grille-cadres { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; }
.choix-cadre { background: none; border: 1px solid transparent; border-radius: 10px; color: var(--texte); display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 6px 2px; }
.choix-cadre.equipe { border-color: var(--laiton); }
.choix-cadre.verrou .avatar { opacity: .45; }
.choix-cadre small { font-size: 11px; }
.grille-themes { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; }
.choix-theme { border-radius: 12px; overflow: hidden; border: 1px solid var(--ligne); background: var(--velours-2); padding: 0; color: var(--texte); text-align: left; }
.choix-theme.equipe { border: 2px solid var(--laiton); }
.choix-theme .apercu { height: 72px; display: grid; place-items: center; }
.choix-theme.theme-velours .apercu { background-image: repeating-linear-gradient(90deg, rgba(0,0,0,.3) 0px, rgba(255,255,255,.04) 8px, rgba(0,0,0,.3) 16px), linear-gradient(180deg, #6a1626, #2a0b12); font-family: Limelight, serif; color: #e9b949; font-size: 18px; }
.choix-theme.theme-artdeco .apercu { background-color: #0e0e11; background-image: repeating-conic-gradient(from 0deg at 50% 100%, rgba(216,178,90,.25) 0deg 5deg, transparent 5deg 15deg); font-family: 'Poiret One', sans-serif; color: #f1d58d; font-size: 18px; letter-spacing: .1em; }
.choix-theme.theme-drivein .apercu { background: linear-gradient(180deg, #0b1328, #1b2a55); font-family: Monoton, sans-serif; color: #ff6fae; font-size: 15px; text-shadow: 0 0 8px rgba(255,111,174,.9); }
.theme-pied { display: flex; justify-content: space-between; align-items: center; gap: 6px; padding: 8px 10px; }
.theme-pied b { font-size: 13px; }
.choix-theme .prix { font-size: 11px; color: var(--laiton); font-weight: 700; }
.ligne-film { display: block; width: 100%; text-align: left; background: none; border: 0; border-top: 1px solid var(--ligne); color: var(--texte); padding: 10px 2px; font-size: 14px; }
.ligne-film small { color: var(--doux); }
.grille-films.petite { grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); gap: 10px; }
.grille-films.petite .aff-titre { font-size: 13px; }
.interrupteur { display: flex; justify-content: space-between; align-items: center; gap: 12px; font-size: 15px; }
.interrupteur input { width: 22px; height: 22px; accent-color: var(--laiton); }

/* ------------------------------------------------------------------ thèmes ajoutés (étape 22) */
.salle.theme-montage, .salle-bulle.theme-montage { --s-carte: rgba(29,32,36,.92); --s-accent: #f2b33d; --s-texte: #ece7dc; --s-doux: #b9b3a6; --s-ligne: rgba(242,179,61,.3); --s-nom: 'IBM Plex Mono', monospace; }
.salle.theme-montage { background-color: #141619; background-image: repeating-linear-gradient(90deg, #1d2024 0 6px, transparent 6px 26px), linear-gradient(180deg, #23262b, #141619 500px); background-size: 26px 18px, auto; background-repeat: repeat-y, no-repeat; background-position: 6px 0, 0 0; }
.theme-montage .salle-nom span { font-size: 26px; letter-spacing: .12em; text-transform: uppercase; border: 2px solid var(--s-accent); padding: 4px 14px; border-radius: 4px; }
.theme-montage .salle-nom span::before { content: "REC ● "; color: #e0573a; font-size: 14px; vertical-align: middle; }
.salle.theme-nouvellevague, .salle-bulle.theme-nouvellevague { --s-carte: rgba(255,255,255,.88); --s-accent: #111; --s-btn: #f4f2ee; --s-texte: #111; --s-doux: #4a4a4a; --s-ligne: rgba(0,0,0,.25); --s-nom: 'Big Shoulders Display', sans-serif; }
.salle.theme-nouvellevague { background-color: #e8e5de; background-image: radial-gradient(rgba(0,0,0,.1) 1px, transparent 1.2px), linear-gradient(180deg, #f4f2ee, #d9d5cc); background-size: 4px 4px, auto; }
.salle.theme-nouvellevague .avatar-in { background: #111; color: #f4f2ee; }
.theme-nouvellevague .salle-nom span { font-weight: 800; font-size: 40px; letter-spacing: .06em; text-transform: uppercase; color: #111; border-top: 3px solid #111; border-bottom: 3px solid #111; padding: 2px 10px; }
.salle.theme-nouvellevague .affiche .aff-int { filter: grayscale(1) contrast(1.15) !important; }
.salle.theme-quartier, .salle-bulle.theme-quartier { --s-carte: rgba(43,27,15,.9); --s-accent: #f0c46a; --s-texte: #f6ead2; --s-doux: #cdb79a; --s-ligne: rgba(240,196,106,.35); --s-nom: Limelight, serif; }
.salle.theme-quartier { background-color: #1d120a; background-image: repeating-linear-gradient(0deg, rgba(0,0,0,.18) 0 2px, transparent 2px 22px), linear-gradient(180deg, #4a2c16, #2a1a0d 450px, #1d120a 900px); }
.theme-quartier .salle-nom { background: #f3e6c8; padding: 6px 18px; border-radius: 4px; box-shadow: 0 0 0 4px #b3263c, 0 0 22px rgba(240,196,106,.35); max-width: 100%; box-sizing: border-box; }
.theme-quartier .salle-nom span { color: #b3263c; font-size: 30px; }
.salle.theme-palais, .salle-bulle.theme-palais { --s-carte: rgba(255,255,255,.9); --s-accent: #b3263c; --s-btn: #fff; --s-texte: #2a1519; --s-doux: #6d5246; --s-ligne: rgba(179,38,60,.3); --s-nom: 'Big Shoulders Display', sans-serif; }
.salle.theme-palais { background-color: #f4efe4; background-image: linear-gradient(90deg, transparent 32%, #b3263c 32%, #b3263c 68%, transparent 68%), linear-gradient(180deg, #fbf7ee, #e8dcc3); background-size: 100% 100%, auto; background-position: 0 640px, 0 0; background-repeat: no-repeat; }
.theme-palais .salle-nom span { font-weight: 800; font-size: 36px; letter-spacing: .14em; text-transform: uppercase; color: #6b1f2a; }
.choix-theme.theme-montage .apercu { background: #141619; background-image: repeating-linear-gradient(90deg, #2a2d33 0 6px, transparent 6px 22px); font-family: 'IBM Plex Mono', monospace; color: #f2b33d; font-size: 14px; letter-spacing: .1em; }
.choix-theme.theme-nouvellevague .apercu { background: #e8e5de; background-image: radial-gradient(rgba(0,0,0,.12) 1px, transparent 1.2px); background-size: 4px 4px; font-family: 'Big Shoulders Display', sans-serif; font-weight: 800; color: #111; font-size: 20px; letter-spacing: .06em; text-transform: uppercase; }
.choix-theme.theme-quartier .apercu { background: linear-gradient(180deg, #4a2c16, #1d120a); font-family: Limelight, serif; color: #f3e6c8; font-size: 16px; }
.choix-theme.theme-palais .apercu { background: linear-gradient(90deg, transparent 35%, #b3263c 35%, #b3263c 65%, transparent 65%) 0 100% / 100% 16px no-repeat, linear-gradient(180deg, #f4efe4, #d9cdb5); font-family: 'Big Shoulders Display', sans-serif; font-weight: 800; color: #6b1f2a; font-size: 15px; letter-spacing: .1em; text-transform: uppercase; }
.choix-theme.verrou .apercu { opacity: .75; }

/* salle réservée aux amis : décor factice flouté et bulle */
.salle-privee { position: relative; }
.salle-privee > .retour { position: relative; z-index: 3; }
.salle-floue { filter: blur(9px) saturate(1.1); pointer-events: none; user-select: none; margin-top: 8px; }
.salle-floue .faux { display: block; height: 12px; border-radius: 6px; background: var(--s-doux); opacity: .5; margin: 6px auto; }
.salle-floue .faux-carte { aspect-ratio: 2 / 3; border-radius: 8px; background: #f3e6c8; opacity: .8; }
.salle-floue .affiche .aff-int { background: var(--s-accent); opacity: .5; }
.salle-bulle { position: absolute; z-index: 2; left: 50%; top: 140px; transform: translateX(-50%); width: min(340px, calc(100% - 8px)); box-sizing: border-box;
  --s-carte: rgba(26,13,16,.92); --s-accent: #e9b949; --s-texte: #f6ecdc; --s-doux: #c9b4a3; --s-ligne: rgba(233,185,73,.4);
  background: var(--s-carte); color: var(--s-texte); border: 1px solid var(--s-ligne); border-radius: 18px; padding: 22px 18px; text-align: center;
  display: flex; flex-direction: column; align-items: center; gap: 10px; box-shadow: 0 20px 60px rgba(0,0,0,.55); backdrop-filter: blur(4px); }
.salle-bulle .kicker { color: var(--s-accent); }
.salle-bulle h2 { color: var(--s-texte); font-family: var(--s-nom, 'Big Shoulders Display'), sans-serif; overflow-wrap: anywhere; }
.salle-bulle p { color: var(--s-doux); font-size: 14px; }
.salle-bulle .btn { width: 100%; }
.salle-bulle.theme-artdeco { --s-carte: rgba(23,22,28,.94); --s-accent: #d8b25a; --s-texte: #f1ead9; --s-doux: #a9a294; --s-ligne: rgba(216,178,90,.5); --s-nom: 'Poiret One'; border-radius: 2px; }
.salle-bulle.theme-drivein { --s-carte: rgba(17,28,58,.94); --s-accent: #7fe8ff; --s-texte: #eef2fb; --s-doux: #a7b3d1; --s-ligne: rgba(127,232,255,.4); }

/* ------------------------------------------------------------------ Générique mystère (étape 23) */
.jeu-quotidien { width: 100%; border-color: var(--laiton); }
.jeu-quotidien i.a-jouer { background: #ff5a4e; color: #fff; }
.generique-ecran { background: #0b0708; border: 1px solid var(--ligne); border-radius: 14px; padding: 18px 14px; display: flex; flex-direction: column; gap: 12px; text-align: center; box-shadow: inset 0 0 40px rgba(0,0,0,.8); }
.gen-ligne { display: flex; flex-direction: column; gap: 2px; }
.gen-poste { font-family: 'IBM Plex Mono', monospace; font-size: 10.5px; letter-spacing: .2em; text-transform: uppercase; color: var(--doux); }
.gen-nom { font-family: 'Big Shoulders Display', sans-serif; font-weight: 700; font-size: 21px; letter-spacing: .04em; color: var(--creme); }
.gen-nom small { font-family: Figtree, sans-serif; font-size: 12px; color: var(--doux); letter-spacing: 0; }
.gen-ligne[data-id] { cursor: pointer; }
.gen-ligne.cachee .gen-nom { color: #3a2a2e; letter-spacing: -.05em; }
.gen-ligne.neuve { animation: entre .6s ease-out both; }
.gen-ligne.neuve .gen-nom { color: var(--laiton); }
.gen-coll { font-size: 11px; color: var(--laiton); }
.gen-essais { display: flex; flex-wrap: wrap; gap: 6px; }
.essai { font-size: 12.5px; padding: 4px 10px; border-radius: 999px; border: 1px solid var(--ligne); color: var(--doux); }
.essai.faux { text-decoration: line-through; color: #ff8a7a; border-color: rgba(255,138,122,.4); }
.essai.juste { color: #7fd69a; border-color: rgba(127,214,154,.5); }
.gen-gain { font-size: 14px; color: var(--doux); }
.gen-gain b { color: var(--laiton); }
.gen-revele { display: flex; gap: 14px; align-items: center; text-align: left; }
.gen-revele .affiche { width: 110px; }
.gen-revele .aff-etoiles, .gen-revele .tampon { display: none; }
.gen-revele .aff-int { filter: none !important; }
.gen-cases { font-size: 22px; letter-spacing: 2px; text-align: center; }

/* ------------------------------------------------------------------ Box-office (étape 24) */
.plateau-box { display: flex; flex-direction: column; gap: 16px; }
.fiches-box { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
.fiche-box { background: var(--velours); border: 1px solid var(--ligne); border-radius: 12px; padding: 8px; display: flex; flex-direction: column; gap: 8px; cursor: pointer; }
.fiche-box.choisie { border: 2px solid var(--laiton); box-shadow: 0 0 14px rgba(233,185,73,.35); }
.fiche-box .affiche { width: 100%; }
.fiche-box .aff-titre { font-size: 15px; }
.valeurs-box { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.valeurs-box li { display: flex; justify-content: space-between; gap: 6px; font-size: 11.5px; padding: 4px 6px; border-radius: 6px; color: var(--doux); }
.valeurs-box li b { color: var(--texte); font-weight: 700; white-space: nowrap; }
.valeurs-box li.choisissable { background: var(--velours-2); cursor: pointer; }
.valeurs-box li.choisissable:hover { background: #3a1d26; }
.valeurs-box li.crit-on, .valeurs-box li.crit-on:hover { background: var(--laiton); color: var(--encre); }
.valeurs-box li.crit-on b { color: var(--encre); }
.action-box h2 { font-size: 30px; }
.action-box.defense { border-color: var(--laiton); }
.confirmer-box { position: sticky; bottom: calc(76px + env(safe-area-inset-bottom, 0px)); background: var(--velours); border: 1px solid var(--laiton); border-radius: 12px; padding: 10px 12px; display: flex; align-items: center; justify-content: space-between; gap: 10px; z-index: 2; }
.confirmer-box p { font-size: 13.5px; color: var(--texte); }
.confirmer-box[hidden] { display: none; }
.revelation-box { display: flex; flex-direction: column; gap: 10px; align-items: center; text-align: center; }
.duo-box { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 10px; align-items: center; width: 100%; max-width: 420px; }
.cote-box { display: flex; flex-direction: column; gap: 6px; align-items: center; opacity: .65; animation: entre .5s ease-out both; }
.cote-box.gagne { opacity: 1; }
.cote-box.gagne .affiche { box-shadow: 0 0 0 3px var(--laiton), 0 0 26px rgba(233,185,73,.5); }
.cote-box .affiche { width: 100%; }
.cote-box b { font-family: 'Big Shoulders Display', sans-serif; font-size: 22px; color: var(--laiton); }
.cote-box small { color: var(--doux); font-size: 12px; }
.vs-box { font-family: 'Big Shoulders Display', sans-serif; font-size: 34px; color: var(--laiton); }
/* Panneau admin : adresses en attente de confirmation (étape 20b) */
.stats-joueurs .attente b { color: #f0a35e; }
.en-attente { border: 1px solid rgba(240,163,94,.4); border-radius: 8px; padding: 8px 12px; margin: 10px 0; }
.en-attente summary { cursor: pointer; font-weight: 700; color: #f0a35e; }
.joueur-ligne.attente .selection { color: #f0a35e; }
/* Box-office : la confirmation reste visible au-dessus de la barre du bas */
.action-box .confirmer-box { position: sticky; bottom: 78px; z-index: 6; background: var(--velours); border: 1px solid var(--laiton); border-radius: 12px; padding: 10px 12px; margin-top: 12px; box-shadow: 0 6px 22px rgba(0,0,0,.6); display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.action-box .confirmer-box[hidden] { display: none; }
.action-box .confirmer-box p { flex: 1; min-width: 160px; margin: 0; }
.programme-quiz .recherche, .films-recherche { margin: 4px 0; }
.grille-films [hidden] { display: none; }
/* Chronologie (étape 26) : la frise verticale, du plus ancien au plus récent */
.chrono-tete .vies { font-size: 14px; letter-spacing: 0; white-space: nowrap; }
.chrono-carte { position: sticky; top: 8px; z-index: 6; display: flex; flex-direction: column; gap: 3px; padding: 12px 14px; border-radius: 12px;
  background: var(--fond); color: var(--ink); box-shadow: 0 8px 24px rgba(0,0,0,.6); border: 2px solid var(--laiton); margin: 8px 0 14px; }
.chrono-carte .kicker { color: inherit; opacity: .75; }
.chrono-carte .cc-titre { font-family: 'Big Shoulders Display', sans-serif; font-weight: 800; text-transform: uppercase; font-size: 24px; line-height: 1; }
.chrono-carte small { font-size: 12.5px; opacity: .85; }
.chrono-carte .indice { opacity: 1; font-weight: 700; }
.chrono-carte .sous { color: inherit; opacity: .7; }
.chrono-verdict { margin: 4px 0; padding: 8px 12px; border-radius: 8px; font-size: 14px; }
.chrono-verdict.ok { background: rgba(47,143,107,.2); border: 1px solid #2f8f6b; }
.chrono-verdict.ko { background: rgba(179,38,60,.18); border: 1px solid #b3263c; }
.frise { display: flex; flex-direction: column; gap: 4px; position: relative; padding-left: 4px; margin-bottom: 14px; }
.frise-film { display: grid; grid-template-columns: 58px 1fr auto; align-items: center; gap: 10px; padding: 9px 12px; border-radius: 8px;
  background: var(--velours-2); border-left: 4px solid var(--laiton); }
.frise-film.depart { border-left-color: #9da3a8; }
.frise-film.rate { border-left-color: #b3263c; opacity: .8; }
.frise-film.neuf { box-shadow: 0 0 0 2px var(--laiton), 0 0 18px rgba(233,185,73,.45); animation: frise-entree .5s ease-out; }
@keyframes frise-entree { from { opacity: 0; transform: translateX(-10px); } }
.frise-annee { font-family: 'IBM Plex Mono', monospace; font-weight: 700; font-size: 16px; color: var(--laiton); }
.frise-titre { font-weight: 700; font-size: 14px; overflow-wrap: anywhere; }
.frise-marque { font-size: 12px; color: var(--doux); }
.fente { background: none; border: 1px dashed rgba(233,185,73,.45); color: var(--laiton); border-radius: 8px; padding: 7px 10px; font: inherit; font-size: 13px; text-align: left; cursor: pointer; }
.fente:hover, .fente:focus-visible { background: rgba(233,185,73,.12); border-style: solid; }
.fente.choisie { background: var(--laiton); color: var(--encre); border-style: solid; }
.fente:disabled { cursor: default; }
/* Succès (étape 27) */
.medaille { display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; flex: none; font-size: 15px;
  background: radial-gradient(circle at 35% 30%, #fff8, transparent 45%), var(--m); color: rgba(0,0,0,.45); box-shadow: 0 0 0 2px rgba(0,0,0,.35) inset, 0 2px 8px rgba(0,0,0,.4); }
.medaille.m5 { box-shadow: 0 0 0 2px rgba(0,0,0,.25) inset, 0 0 14px rgba(185,242,255,.8); }
.medaille.vide { background: var(--velours-2); color: var(--doux); box-shadow: 0 0 0 1px var(--ligne) inset; }
.medaille.petite { width: 16px; height: 16px; font-size: 8px; }
.bloc-succes { display: flex; flex-direction: column; gap: 10px; }
.succes { display: flex; flex-direction: column; gap: 6px; padding: 10px 0; border-top: 1px solid var(--ligne); }
.succes:first-of-type { border-top: 0; }
.succes-tete { display: flex; align-items: center; gap: 10px; }
.succes-tete > div { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.succes-tete small { color: var(--doux); font-size: 12px; }
.succes-val { font-family: 'IBM Plex Mono', monospace; font-size: 12px; color: var(--laiton); white-space: nowrap; }
.succes .pellicule { height: 6px; }
.succes-paliers { display: flex; justify-content: space-between; gap: 4px; font-size: 10.5px; color: var(--doux); }
.succes-paliers span { display: inline-flex; align-items: center; gap: 3px; }
.succes-paliers .fait { color: var(--texte); }
.succes-prochain, .titre-obtenu { font-size: 12px; color: var(--doux); }
.titre-obtenu { color: var(--laiton); font-style: italic; }
.succes.a-recuperer { background: rgba(233,185,73,.07); border-radius: 10px; padding: 10px; }
.succes.cache { opacity: .6; }
.recuperer { align-self: flex-start; }
.salle-titre { font-family: 'Poiret One', 'Figtree', sans-serif; font-style: italic; color: var(--laiton); text-align: center; margin-top: -4px; }
.vitrine-trophees { display: flex; flex-wrap: wrap; gap: 10px; }
.trophee { display: flex; flex-direction: column; align-items: center; gap: 4px; width: 72px; text-align: center; }
.trophee small { font-size: 10.5px; line-height: 1.15; color: var(--doux); }
.cadre-diamant { background: conic-gradient(#e8fbff, #8fd3e8, #ffffff, #b9f2ff, #6fb7d6, #e8fbff); box-shadow: 0 0 calc(var(--t) * .35) rgba(185,242,255,.6); }
.cadre-diamant .avatar-in { color: #c9f6ff; }
/* Codes cadeaux (étape 28) */
.code-cadeau form { flex-wrap: nowrap; }
.code-cadeau input { text-transform: uppercase; letter-spacing: .08em; font-family: 'IBM Plex Mono', monospace; }
.cadeau-revele { display: flex; flex-direction: column; gap: 8px; align-items: center; text-align: center; margin-top: 10px; padding: 12px; border: 1px solid var(--laiton); border-radius: 12px; background: rgba(233,185,73,.08); }
.cadeau-boite { font-size: 42px; animation: frise-entree .6s ease-out; }
.cadeau-carte { width: min(180px, 60vw); cursor: pointer; }
.gros-code { font-size: 20px; letter-spacing: .08em; }
.form-code { display: flex; flex-direction: column; gap: 10px; }
.grille-code { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 8px; }
.grille-code label, .groupe-code label, .ligne-code { display: flex; flex-direction: column; gap: 3px; font-size: 12px; color: var(--doux); }
.grille-code input, .groupe-code input[type="number"] { background: var(--velours); color: var(--texte); border: 1px solid var(--ligne); border-radius: 8px; padding: 8px; font: inherit; }
.groupe-code { display: flex; flex-direction: column; gap: 8px; }
.groupe-code[hidden] { display: none; }
.groupe-code .case, .usage-code label { flex-direction: row; align-items: center; gap: 6px; font-size: 13px; color: var(--texte); }
.usage-code { flex-wrap: wrap; gap: 6px 14px; }
/* Chronologie solo (étape 29) : compte à rebours, partie du jour, classement */
.chrono-carte .cc-haut { display: flex; justify-content: space-between; align-items: center; }
.chrono-carte .cc-chrono { font-family: 'IBM Plex Mono', monospace; font-size: 20px; min-width: 28px; text-align: right; }
.chrono-carte .cc-barre { height: 5px; border-radius: 3px; background: rgba(0,0,0,.25); overflow: hidden; margin-top: 6px; }
.chrono-carte .cc-barre i { display: block; height: 100%; background: currentColor; transition: width .1s linear; }
.chrono-carte.urgent { border-color: #e2445c; animation: urgence .5s ease-in-out infinite alternate; }
@keyframes urgence { to { box-shadow: 0 0 22px rgba(226,68,92,.7); } }
.chrono-du-jour .gen-cases { font-size: 15px; letter-spacing: 1px; overflow-wrap: anywhere; }
.classement-niveau { margin-top: 8px; }
.classement-niveau ol { list-style: none; margin: 6px 0 0; padding: 0; display: flex; flex-direction: column; gap: 3px; }
.classement-niveau li { display: grid; grid-template-columns: 24px 1fr auto; gap: 8px; padding: 6px 10px; border-radius: 8px; background: var(--velours-2); font-size: 14px; }
.classement-niveau li.moi { border: 1px solid var(--laiton); }
.classement-niveau li span:first-child { color: var(--laiton); font-weight: 700; }
/* Onglet Jouer (étape 30) : billets du jour, duels qui attendent, grille des jeux */
.bloc-jouer { display: flex; flex-direction: column; gap: 10px; margin-top: 6px; }
.billets-jour { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.billet-jour { position: relative; display: flex; flex-direction: column; gap: 4px; align-items: flex-start; text-align: left; min-width: 0;
  padding: 14px 14px 12px; border-radius: 12px; color: var(--encre); border: 0;
  background: radial-gradient(circle at 0 calc(100% - 40px), var(--velours) 0 8px, transparent 8.5px),
              radial-gradient(circle at 100% calc(100% - 40px), var(--velours) 0 8px, transparent 8.5px),
              linear-gradient(160deg, #f6e9c9, #e9d3a0); box-shadow: 0 6px 18px rgba(0,0,0,.45); }
.billet-jour b { font-family: 'Big Shoulders Display', sans-serif; font-weight: 800; font-size: 19px; line-height: 1; text-transform: uppercase; }
.billet-jour small { font-size: 12px; line-height: 1.3; opacity: .8; min-height: 2.6em; }
.billet-jour .bj-haut { display: flex; width: 100%; justify-content: space-between; align-items: center; }
.billet-jour .bj-ic { font-size: 22px; }
.billet-jour .bj-num { font-family: 'IBM Plex Mono', monospace; font-size: 11px; letter-spacing: .15em; }
.billet-jour .bj-etat { margin-top: auto; padding-top: 12px; width: 100%; border-top: 2px dashed rgba(26,13,16,.25); font-size: 12px; font-weight: 800; height: 40px; display: flex; align-items: center; }
.billet-jour small { margin-bottom: 8px; }
.billet-jour .bj-etat.a-faire { color: #b3263c; }
.billet-jour .bj-etat.ok { color: #2f6b4f; }
.billet-jour.fait { filter: saturate(.55) brightness(.92); }
.billet-jour:not(.fait) { animation: frise-entree .4s ease-out; }
.a-jouer-bloc .dl-titre { color: var(--laiton); }
details.duels-bloc summary { cursor: pointer; list-style: none; }
details.duels-bloc summary::before { content: "▸ "; }
details.duels-bloc[open] summary::before { content: "▾ "; }
.actions-amis { display: flex; flex-wrap: wrap; gap: 8px; }
.actions-amis .btn { flex: 1 1 auto; }
.grille-jeux { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.carte-jeu { display: flex; flex-direction: column; gap: 5px; align-items: flex-start; text-align: left; min-width: 0; padding: 14px; border-radius: 14px;
  background: var(--velours-2); border: 1px solid var(--ligne); color: var(--texte); }
.carte-jeu:hover, .carte-jeu:focus-visible { border-color: var(--laiton); }
.carte-jeu .cj-haut { display: flex; width: 100%; justify-content: space-between; align-items: center; }
.carte-jeu .cj-ic { font-size: 26px; }
.carte-jeu .cj-tag { font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--doux); border: 1px solid var(--ligne); border-radius: 999px; padding: 2px 8px; }
.carte-jeu b { font-family: 'Big Shoulders Display', sans-serif; font-weight: 800; font-size: 18px; max-width: 100%; overflow-wrap: anywhere; line-height: 1; text-transform: uppercase; color: var(--laiton); }
.carte-jeu small { font-size: 12.5px; color: var(--doux); line-height: 1.35; }
.carte-jeu .cj-encours { font-style: normal; font-size: 11px; font-weight: 700; color: var(--encre); background: var(--laiton); border-radius: 999px; padding: 2px 9px; margin-top: 2px; }

/* ---------- Mort subite (étape 32) ---------- */
.mort-subite { text-align: center; }
.mort-subite h2 { line-height: 1.35; }
.ms-titre { color: var(--laiton); font-size: 1.15em; }
.ms-bandeau { align-self: center; padding: 4px 14px; border-radius: 999px; background: linear-gradient(90deg, #8a1f1f, #c2412b); color: #fff; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; font-size: .78rem; animation: ms-pulse 1.4s ease-in-out infinite; }
@keyframes ms-pulse { 50% { box-shadow: 0 0 0 6px rgba(194,65,43,.18); } }
.ms-annee { display: flex; align-items: center; justify-content: center; gap: 18px; }
.ms-annee output { font-size: 2.6rem; font-weight: 700; font-variant-numeric: tabular-nums; min-width: 4ch; color: var(--laiton); }
.ms-annee .btn { width: 52px; height: 52px; font-size: 1.5rem; padding: 0; }
.ms-curseur { width: 100%; accent-color: var(--laiton); }
.ms-decennies { display: flex; justify-content: center; gap: 6px; flex-wrap: wrap; }
.ms-resultat { display: flex; flex-direction: column; gap: 6px; align-items: center; }

/* ---------- Premiers pas guidés (étape 33) ---------- */
.projo { position: fixed; inset: 0; z-index: 25; }
.projo-trou { position: fixed; border-radius: 14px; box-shadow: 0 0 0 200vmax rgba(10,4,6,.78); outline: 2px solid var(--laiton); transition: all .25s ease; animation: projo-pulse 1.6s ease-in-out infinite; pointer-events: none; }
@keyframes projo-pulse { 50% { outline-color: rgba(233,185,73,.35); outline-offset: 4px; } }
.projo-bulle { position: fixed; left: 50%; transform: translateX(-50%); width: min(340px, calc(100vw - 32px)); box-sizing: border-box; background: var(--creme); color: var(--encre);
  border-radius: 14px; padding: 14px 16px 12px; box-shadow: 0 10px 30px rgba(0,0,0,.6); animation: projo-in .25s ease-out; }
.projo-bulle p { margin: 0 0 10px; font-size: 14px; line-height: 1.45; color: var(--encre); opacity: 1; }
.projo-bulle p b { color: #7a1420; }
.projo-bulle .rangee { justify-content: flex-end; gap: 8px; margin: 0; }
.projo-bulle .btn.fantome { color: var(--encre); border-color: rgba(0,0,0,.25); }
@keyframes projo-in { from { opacity: 0; margin-top: 8px; } }

.premiers-pas { display: flex; flex-direction: column; gap: 8px; border-color: var(--laiton); }
.pp-tete { display: flex; justify-content: space-between; align-items: baseline; }
.pp-tete small { color: var(--laiton); font-weight: 700; }
.pp-liste { list-style: none; margin: 4px 0 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.pp { display: flex; align-items: center; gap: 10px; padding: 6px 0; }
.pp + .pp { border-top: 1px solid var(--ligne); }
.pp-ic { flex: none; width: 22px; height: 22px; border-radius: 50%; border: 2px solid var(--ligne); display: grid; place-items: center; font-size: 12px; font-weight: 700; }
.pp.fait .pp-ic { background: var(--laiton); border-color: var(--laiton); color: var(--encre); }
.pp.a-prendre .pp-ic { border-color: var(--laiton); color: var(--laiton); }
.pp.prochaine .pp-ic { border-color: var(--laiton); box-shadow: 0 0 0 3px rgba(233,185,73,.2); }
.pp-txt { flex: 1; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.pp-txt small { color: var(--s-doux); font-size: 12px; line-height: 1.35; }
.pp.fait .pp-txt b { color: var(--s-doux); text-decoration: line-through; font-weight: 500; }
.pp .btn.petit { flex: none; white-space: nowrap; display: inline-flex; align-items: center; gap: 4px; }
.pp .btn .bobine-ic { width: 14px; height: 14px; }
.pp-gain { color: var(--s-doux); }
.pp-fin { text-align: center; }
.premiers-pas .lien-discret { align-self: center; }

/* ---------- Suivi des tests (étape 34) ---------- */
.sv-tuiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 14px; }
.sv-tuile { background: var(--velours-2); border: 1px solid var(--ligne); border-radius: 12px; padding: 10px 8px; display: flex; flex-direction: column; gap: 2px; text-align: center; }
.sv-tuile b { font-size: 22px; color: var(--laiton); font-variant-numeric: tabular-nums; }
.sv-tuile span { font-size: 11px; line-height: 1.25; }
.sv-tuile small { font-size: 10px; color: var(--s-doux); }
.onglets-sv { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 4px; margin: 6px 0 10px; }
.onglets-sv .puce { white-space: nowrap; font-size: 12px; }
.sv-barres { display: grid; grid-template-columns: repeat(14, 1fr); gap: 2px; height: 150px; align-items: end; }
.sv-col { height: 100%; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; gap: 3px; min-width: 0; }
.sv-col i { display: block; width: 72%; background: var(--laiton); border-radius: 4px 4px 0 0; transition: height .3s; }
.sv-col:last-child i { background: #f7d77a; }
.sv-val { font-size: 10px; color: var(--s-doux); font-variant-numeric: tabular-nums; }
.sv-col small { font-size: 10px; color: var(--s-doux); height: 12px; border-top: 1px solid var(--ligne); width: 100%; text-align: center; padding-top: 2px; }
.sv-marche { display: grid; grid-template-columns: 1fr 34px 40px; gap: 2px 8px; align-items: center; font-size: 13px; padding: 4px 0; }
.sv-marche span { grid-column: 1 / -1; }
.sv-marche b { text-align: right; font-variant-numeric: tabular-nums; }
.sv-marche small { color: var(--s-doux); text-align: right; font-variant-numeric: tabular-nums; }
.sv-jauge { height: 8px; border-radius: 4px; background: rgba(255,255,255,.07); overflow: hidden; }
.sv-jauge i { display: block; height: 100%; background: var(--laiton); border-radius: 4px; }
.sv-retour { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 10px; }
.sv-retour > div { border: 1px solid var(--ligne); border-radius: 10px; padding: 10px; display: flex; flex-direction: column; gap: 2px; }
.sv-retour b { font-size: 22px; color: var(--laiton); }
.sv-retour span { font-size: 12px; }
.sv-retour small { font-size: 10px; color: var(--s-doux); }
.sv-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.sv-table th { text-align: left; font-weight: 600; color: var(--s-doux); font-size: 11px; padding: 4px 0; border-bottom: 1px solid var(--ligne); }
.sv-table td { padding: 6px 0; border-bottom: 1px solid var(--ligne); font-variant-numeric: tabular-nums; }
.sv-table th:not(:first-child), .sv-table td:not(:first-child) { text-align: right; }
.sv-joueurs { display: flex; flex-direction: column; margin-top: 8px; }
.sv-joueur { display: flex; flex-direction: column; gap: 2px; padding: 8px 0; border-bottom: 1px solid var(--ligne); }
.sv-joueur small { font-size: 12px; }
.sv-joueur small.sous { font-size: 11px; }

/* ---------- Notifications (étape 35) ---------- */
.ok-notifs { color: var(--laiton); font-weight: 600; }
.reglages-notifs { display: flex; flex-direction: column; margin: 6px 0 8px; }
.bascule { display: flex; align-items: center; gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--ligne); cursor: pointer; }
.bascule span { display: flex; flex-direction: column; gap: 1px; flex: 1; }
.bascule small { color: var(--s-doux); font-size: 12px; }
.bascule input { appearance: none; -webkit-appearance: none; flex: none; width: 44px; height: 26px; border-radius: 13px; background: rgba(255,255,255,.12); position: relative; transition: background .2s; margin: 0; order: 2; }
.bascule input::after { content: ""; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: var(--creme); transition: transform .2s; }
.bascule input:checked { background: var(--laiton); }
.bascule input:checked::after { transform: translateX(18px); }
.liste-etat { list-style: none; padding: 0; margin: 6px 0; display: flex; flex-direction: column; gap: 4px; font-size: 13px; }
.liste-etat .ok { color: #8fd18f; }
.liste-etat .ko { color: #e0603a; }
.cles-push { display: flex; flex-direction: column; gap: 10px; margin-top: 10px; }
.cle-push { display: flex; flex-direction: column; gap: 4px; border: 1px solid var(--ligne); border-radius: 10px; padding: 8px 10px; }
.cle-push small { color: var(--s-doux); font-size: 11px; }
.cle-push code { font-size: 11px; word-break: break-all; background: rgba(0,0,0,.3); padding: 6px; border-radius: 6px; }
.cle-push .btn { align-self: flex-start; }
.banniere-push { border-color: var(--laiton); }
.banniere-push p { margin: 0 0 8px; }
.sv-joueur .raz { display: flex; }
.sv-joueur .raz .lien-discret { padding: 2px 0; color: #e07a6a; }
.raz-confirmer { display: flex; flex-direction: column; gap: 8px; margin-top: 6px; padding: 10px; border: 1px solid #b3263c; border-radius: 10px; background: rgba(179,38,60,.08); }
.raz-confirmer p { margin: 0; font-size: 13px; }

/* Films : recherche, filtre par étoiles et tri (page Films, programmes du Quiz et du Box-office) */
.outils-films { display: flex; flex-direction: column; gap: 10px; margin: 4px 0 8px; }
.puces-etoiles .puce small { opacity: .65; font-size: 11px; margin-left: 2px; }
.puces-etoiles .puce[aria-pressed="true"] small { opacity: .8; }
.tri-films select { width: 100%; background: var(--velours-2); color: var(--texte); border: 1px solid var(--ligne); border-radius: 8px; padding: 8px; font: inherit; font-size: 14px; }
.film-vignette.hors-budget { opacity: .38; }
.budget .reste { color: var(--doux); font-size: 13px; }
.vide-filtre { color: var(--doux); font-size: 14px; }

/* Cartes Mythiques : rideau qui ondule, filet doré qui court, reflet holographique, paillettes, inclinaison */
@property --ang { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
.carte.r-mythique { --reflet: transparent; --px: 50%; --py: 50%; --rx: 0deg; --ry: 0deg;
  background-size: 160% 100%; animation: rideau 9s ease-in-out infinite alternate;
  transform: perspective(700px) rotateX(var(--rx)) rotateY(var(--ry)); transition: transform .25s ease-out;
  box-shadow: 0 0 0 2px #e9b949, 0 0 22px rgba(158,27,50,.75), 0 0 46px rgba(233,185,73,.18); }
@keyframes rideau { from { background-position: 0 0; } to { background-position: 100% 0; } }
.carte.r-mythique.revele { animation: retourne .5s ease-out, rideau 9s ease-in-out .5s infinite alternate; }
.r-mythique .holo, .r-mythique .paillettes, .r-mythique .filet { position: absolute; pointer-events: none; }
/* Reflet : bandes arc-en-ciel fondues dans la carte, plus un éclat blanc qui suit la lumière */
.r-mythique .holo { inset: 0; z-index: 0; mix-blend-mode: soft-light; opacity: .85;
  background:
    radial-gradient(circle at var(--px) var(--py), rgba(255,255,255,.5), rgba(255,255,255,0) 40%),
    repeating-linear-gradient(115deg, #ff6b8a 0%, #ffcf6b 7%, #7dffb2 14%, #6bd3ff 21%, #b58cff 28%, #ff6b8a 35%);
  background-size: 100% 100%, 260% 260%; background-position: 0 0, var(--px) var(--py);
  -webkit-mask: linear-gradient(115deg, rgba(0,0,0,.25), #000 45%, rgba(0,0,0,.35)); mask: linear-gradient(115deg, rgba(0,0,0,.25), #000 45%, rgba(0,0,0,.35));
  animation: holo-glisse 7s ease-in-out infinite alternate; }
@keyframes holo-glisse { from { background-position: 0 0, 0% 30%; } to { background-position: 0 0, 100% 70%; } }
.r-mythique.suivi .holo, .gyro .r-mythique .holo { animation: none; opacity: 1; }
/* Double filet doré : cadre extérieur + liseré autour de la carte, le velours rouge entre les deux */
.carte.r-mythique .int { box-shadow: 0 0 0 1.5px #e9b949; }
/* Paillettes dorées qui scintillent */
.r-mythique .paillettes { inset: 0; z-index: 0; mix-blend-mode: screen;
  background:
    radial-gradient(circle at 18% 22%, #fff6c8 0 1.2px, transparent 2.2px), radial-gradient(circle at 78% 14%, #fff 0 1px, transparent 2px),
    radial-gradient(circle at 64% 58%, #ffe28a 0 1.3px, transparent 2.4px), radial-gradient(circle at 30% 70%, #fff 0 1px, transparent 2px),
    radial-gradient(circle at 86% 82%, #fff6c8 0 1.2px, transparent 2.2px), radial-gradient(circle at 46% 36%, #fff 0 .9px, transparent 1.8px);
  animation: scintille 2.6s ease-in-out infinite; }
@keyframes scintille { 0%, 100% { opacity: .15; } 50% { opacity: .9; } }
/* Filet doré : une lueur fait le tour du cadre */
.r-mythique .filet { inset: -2px; border-radius: 13px; padding: 3px; z-index: 4; filter: drop-shadow(0 0 4px rgba(255,226,138,.9));
  background: conic-gradient(from var(--ang), transparent 0 55%, rgba(255,226,138,0) 60%, #fff6c8 72%, #ffffff 75%, #e9b949 79%, transparent 90%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  animation: filet 3.2s linear infinite; }
@keyframes filet { to { --ang: 360deg; } }
.carte.r-mythique .nb { z-index: 5; }
.r-mythique .talon b { background: linear-gradient(90deg, #8e1b2c, #b8860b 50%, #8e1b2c); -webkit-background-clip: text; background-clip: text; color: transparent; background-size: 200% 100%; animation: reflet 4s linear infinite; }
.carte.cachee .holo, .carte.cachee .paillettes, .carte.cachee .filet { display: none; }
.carte.r-mythique.cachee { animation: none; transform: none; box-shadow: var(--ombre); }
@media (prefers-reduced-motion: reduce) {
  .carte.r-mythique, .r-mythique .holo, .r-mythique .paillettes, .r-mythique .filet, .r-mythique .talon b { animation: none !important; transform: none; }
  .r-mythique .paillettes { opacity: .6; }
}

/* Ouverture des boosters : amorce courte */
.amorce-film { position: relative; width: 190px; height: 190px; margin: 18vh auto 0; border-radius: 50%; display: grid; place-items: center; overflow: hidden;
  background: radial-gradient(circle, #3a2a20 0 58%, #241812 59%); border: 4px solid var(--laiton); box-shadow: 0 0 30px rgba(233,185,73,.25); cursor: pointer; }
.amorce-film .balai { position: absolute; inset: 0; background: conic-gradient(rgba(243,230,200,.32) 0deg, rgba(243,230,200,0) 120deg, transparent 360deg); animation: balai .32s linear infinite; }
.amorce-film .croix { position: absolute; inset: 0; background: linear-gradient(var(--laiton), var(--laiton)) center / 2px 100% no-repeat, linear-gradient(var(--laiton), var(--laiton)) center / 100% 2px no-repeat; opacity: .45; }
.amorce-film span { position: relative; font-family: 'Big Shoulders Display', sans-serif; font-weight: 800; font-size: 110px; color: var(--creme); line-height: 1; }
@keyframes balai { to { transform: rotate(360deg); } }

/* Défilé une carte à la fois */
.pile { display: flex; flex-direction: column; align-items: center; gap: 12px; padding-top: 4px; }
.pile-tete { width: min(280px, 74vw); display: flex; justify-content: space-between; align-items: baseline; }
.pile-compte { font-family: 'IBM Plex Mono', monospace; font-size: 13px; color: var(--doux); }
.pile-scene { position: relative; width: min(260px, 70vw); margin-bottom: 18px; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.pile-fond { position: absolute; inset: 0; border-radius: 11px; background: #3a1d24;
  box-shadow: calc(var(--reste, 0) * 2px) calc(var(--reste, 0) * 3px) 0 -1px #2c151b, calc(var(--reste, 0) * 4px) calc(var(--reste, 0) * 6px) 0 -2px #22100f, 0 10px 24px rgba(0,0,0,.5); }
.pile-carte { position: relative; }
.pile-carte .carte { pointer-events: none; }
.pile-carte .carte .nom { font-size: 21px; }
.pile-carte .carte .films { font-size: 11px; }
.pile-aide { margin: 0; color: var(--doux); font-size: 14px; min-height: 1.4em; }
.pile-bande { display: flex; gap: 6px; min-height: 12px; }
.pastille-r { width: 12px; height: 12px; border-radius: 50%; box-shadow: 0 0 0 1.5px rgba(243,230,200,.35); animation: bulle .3s ease-out both; }
.pile-carte.arrive { animation: arrive .35s cubic-bezier(.2,1.2,.4,1) both; }
@keyframes arrive { from { transform: translate(10px, 18px) rotate(2deg) scale(.96); opacity: .6; } to { transform: none; opacity: 1; } }
.carte.part { animation: part .22s ease-in forwards !important; }
@keyframes part { to { transform: translateX(-120%) rotate(-12deg); opacity: 0; } }
/* Le dos laisse filtrer la rareté */
.carte.cachee.lueur-rare { box-shadow: 0 0 0 2px #2f5f9e, 0 0 26px rgba(47,95,158,.8); }
.carte.cachee.lueur-epique { box-shadow: 0 0 0 2px #8a5cc9, 0 0 30px rgba(139,92,201,.85); animation: lueur 1.6s ease-in-out infinite; }
.carte.cachee.lueur-legendaire { box-shadow: 0 0 0 2px #e9b949, 0 0 36px rgba(255,214,120,.9); animation: lueur 1.1s ease-in-out infinite, frisson 2.2s ease-in-out infinite; }
.carte.cachee.lueur-mythique { box-shadow: 0 0 0 2px #e9b949, 0 0 26px 8px rgba(214,28,62,.9), 0 0 64px 6px rgba(158,27,50,.7); animation: lueur .9s ease-in-out infinite, frisson 1.4s ease-in-out infinite; }
.carte.cachee.lueur-legendaire .dos, .carte.cachee.lueur-mythique .dos { text-shadow: 0 0 12px #ffe28a; }
@keyframes lueur { 50% { filter: brightness(1.25); } }
@keyframes frisson { 0%, 80%, 100% { transform: none; } 84% { transform: rotate(-1.5deg); } 88% { transform: rotate(1.5deg); } 92% { transform: rotate(-1deg); } 96% { transform: rotate(.6deg); } }

/* Grand moment : Légendaire (ampoules) et Mythique (rideau) */
.grand-moment { position: fixed; inset: 0; z-index: 40; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; padding: 20px;
  background: radial-gradient(circle at 50% 45%, #2a1418, #0b0507 70%); overflow: hidden; animation: gm-entre .25s ease-out; cursor: pointer; }
.grand-moment.ferme { animation: gm-sort .25s ease-in forwards; }
@keyframes gm-entre { from { opacity: 0; } }
@keyframes gm-sort { to { opacity: 0; } }
.gm-titre { position: relative; z-index: 2; font-family: Limelight, serif; font-size: 34px; letter-spacing: .04em; color: var(--laiton); text-shadow: 0 0 18px rgba(255,214,120,.7); animation: gm-titre .6s 1.1s both; }
@keyframes gm-titre { from { opacity: 0; transform: scale(1.4); letter-spacing: .3em; } }
.gm-scene { position: relative; z-index: 2; width: min(250px, 66vw); }
.gm-carte { position: relative; }
.gm-carte .carte { pointer-events: none; }
.gm-carte .carte .nom { font-size: 20px; }
.gm-nom { position: relative; z-index: 2; font-family: 'Big Shoulders Display', sans-serif; font-weight: 800; font-size: 22px; text-transform: uppercase; color: var(--creme); animation: bulle .4s 1.5s both; }
.gm-aide { position: relative; z-index: 2; margin: 0; color: var(--doux); font-size: 13px; animation: bulle .4s 2s both; }
/* Légendaire : la carte arrive, puis les ampoules s'allument une à une autour d'elle */
.gm-legendaire .halo { position: absolute; inset: 0; background: radial-gradient(circle at 50% 45%, rgba(255,214,120,.35), transparent 55%); animation: gm-entre 1.2s .9s both; }
.gm-legendaire .gm-carte { animation: gm-leg .7s .1s cubic-bezier(.2,1.3,.4,1) both; }
@keyframes gm-leg { from { transform: scale(.4) rotateY(90deg); opacity: 0; } }
.ampoule { position: absolute; width: 11px; height: 11px; margin: -5.5px; border-radius: 50%; background: #5a4520; box-shadow: inset 0 0 2px rgba(0,0,0,.6); z-index: 3;
  animation: allume .25s ease-out both; }
@keyframes allume { from { background: #5a4520; box-shadow: none; } to { background: #fff3c4; box-shadow: 0 0 8px 3px rgba(255,214,120,.85); } }
.gm-legendaire .gm-scene { padding: 14px; }
.gm-legendaire .ampoule { margin: -5.5px; }
/* Mythique : le rideau s'ouvre, la carte tourne sous le projecteur */
.gm-mythique .faisceau { position: absolute; left: 50%; top: -10%; width: 140vmax; height: 140vmax; transform: translateX(-50%); z-index: 1;
  background: conic-gradient(from 160deg at 50% 0%, transparent 0deg, rgba(255,240,200,.16) 12deg, rgba(255,240,200,.22) 20deg, rgba(255,240,200,.16) 28deg, transparent 40deg); animation: gm-entre 1s .8s both; }
.gm-mythique .rideau-g, .gm-mythique .rideau-d { position: absolute; top: 0; bottom: 0; width: 51%; z-index: 3;
  background: repeating-linear-gradient(90deg, #5a0f1c 0 14px, #9e1b32 26px, #6e1222 40px); box-shadow: inset 0 -30px 40px rgba(0,0,0,.5);
  animation: .1s both; animation-duration: 1.3s; animation-delay: .35s; animation-timing-function: cubic-bezier(.6,0,.3,1); }
.gm-mythique .rideau-g { left: 0; border-right: 3px solid #e9b949; animation-name: rideau-g; }
.gm-mythique .rideau-d { right: 0; border-left: 3px solid #e9b949; animation-name: rideau-d; }
@keyframes rideau-g { to { transform: translateX(-102%); } }
@keyframes rideau-d { to { transform: translateX(102%); } }
.gm-mythique .gm-carte { animation: gm-myth 1.5s .6s cubic-bezier(.2,.9,.3,1) both; }
@keyframes gm-myth { from { transform: perspective(800px) rotateY(-540deg) scale(.5); } 70% { transform: perspective(800px) rotateY(-10deg) scale(1.06); } to { transform: none; } }
.gm-mythique .gm-titre { font-size: 40px; background: linear-gradient(90deg, #e9b949, #fff6c8, #e9b949); -webkit-background-clip: text; background-clip: text; color: transparent; animation: gm-titre .7s 1.6s both; }
.gm-mythique .gm-nom { animation-delay: 2s; }
.gm-mythique .gm-aide { animation-delay: 2.4s; }
@media (prefers-reduced-motion: reduce) {
  .amorce-film .balai, .carte.cachee[class*="lueur-"], .pile-carte.arrive, .grand-moment *, .grand-moment { animation-duration: .01s !important; animation-delay: 0s !important; animation-iteration-count: 1 !important; }
}

/* Lien vers le serveur Discord */
.btn.discord { background: #5865f2; color: #fff; border-color: #5865f2; text-decoration: none; display: inline-flex; align-items: center; justify-content: center; }
.btn.discord:hover { background: #4752c4; }
.double .reserve { color: var(--doux); font-size: 12px; text-align: center; }

/* Classement du jour de tous les joueurs */
.classement { list-style: none; margin: 6px 0 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.classement li { display: flex; align-items: center; gap: 8px; padding: 7px 8px; border-radius: 8px; }
.classement li:nth-child(odd) { background: rgba(243,230,200,.04); }
.classement li.moi { background: rgba(233,185,73,.16); outline: 1px solid rgba(233,185,73,.5); }
.classement .rg { width: 24px; text-align: right; font-family: 'IBM Plex Mono', monospace; color: var(--laiton); font-weight: 600; }
.classement .nm, .classement .lien-joueur { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: left; }
.classement .lien-joueur { background: none; border: 0; padding: 0; color: var(--texte); font: inherit; text-decoration: underline dotted rgba(243,230,200,.5); text-underline-offset: 3px; cursor: pointer; }
.classement .res { color: var(--doux); font-size: 13px; white-space: nowrap; }