/* =============================================================================
   Casino de l'Univers — l'établissement

   Ce n'est plus une page qui parle de casino : c'est une salle. Écran plein, rail
   de tables à gauche, plaque de jetons en haut, tapis éclairé au centre, console de
   mise sous la table, et le bandeau des dernières mises qui défile en bas.

   Palette : obsidienne chaude, laiton comme unique accent, feutre émeraude.
   Lumière : une seule source, au-dessus de la table. Grain argentique par-dessus.
   Mouvement : transform/opacity uniquement, 120–560 ms ; `prefers-reduced-motion`
   coupe l'accessoire sans jamais retenir une information.
   ============================================================================= */

:root {
    --obsidienne: #08070A;
    --nuit: #0D0C10;
    --surface: #15131A;
    --surface-haute: #1D1A22;
    --feutre: #123127;
    --feutre-clair: #1C4A3A;
    --feutre-vif: #245B47;

    --laiton: #C9A227;
    --laiton-clair: #F3DC9B;
    --laiton-sombre: #7E6417;

    --creme: #F0E9DC;
    --creme-doux: #A79D8B;
    --creme-faible: #6B6355;

    --gain: #5FBF7D;
    --perte: #C4554D;

    --trait: #241F2B;
    --trait-clair: #38313F;

    /* Surfaces sobres : un contour clair très léger, un creux noir, un relief
       à peine perceptible. Tout le vocabulaire des blocs tient là-dedans. */
    --bord: rgba(255, 255, 255, 0.07);
    --bord-fort: rgba(255, 255, 255, 0.14);
    --creux: rgba(0, 0, 0, 0.3);
    --relief: rgba(255, 255, 255, 0.04);

    --display: "Bodoni Moda", Georgia, serif;
    --ui: "Outfit", system-ui, sans-serif;
    --chiffres: "IBM Plex Mono", ui-monospace, monospace;

    --ombre-douce: 0 2px 8px rgba(0, 0, 0, 0.55);
    --ombre-carte: 0 20px 44px -26px rgba(0, 0, 0, 0.92);
    --ombre-table: 0 46px 90px -40px rgba(0, 0, 0, 1);
    --lueur: 0 0 0 1px rgba(201, 162, 39, 0.4), 0 16px 50px -14px rgba(201, 162, 39, 0.4);

    --ressort: cubic-bezier(0.22, 1.2, 0.36, 1);
    --sortie: cubic-bezier(0.4, 0, 0.2, 1);
    --rapide: 140ms;
    --moyen: 280ms;
    --ample: 560ms;

    --rail: 96px;
    --barre: 60px;
    --bande: 46px;
}

*, *::before, *::after { box-sizing: border-box; }

html, body { height: 100%; }

body {
    margin: 0;
    background: var(--obsidienne);
    color: var(--creme);
    font-family: var(--ui);
    font-size: 15px;
    line-height: 1.5;
    overflow: hidden;                 /* la salle ne défile pas : ce sont ses zones qui défilent */
    -webkit-font-smoothing: antialiased;
}

a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; }
::selection { background: rgba(201, 162, 39, 0.32); }
:focus-visible { outline: 2px solid var(--laiton-clair); outline-offset: 3px; border-radius: 4px; }

.saut-contenu {
    position: fixed; left: -9999px; top: 10px; z-index: 200;
    padding: 10px 18px; border-radius: 8px;
    background: var(--laiton); color: #120E06; font-weight: 600;
}
.saut-contenu:focus { left: 10px; }

/* Grain : au-dessus de tout, sans jamais intercepter un clic. */
.grain {
    position: fixed; inset: -50%; z-index: 90; pointer-events: none; opacity: 0.38;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)' opacity='0.3'/%3E%3C/svg%3E");
    animation: grain 5s steps(5) infinite;
}
@keyframes grain {
    0%, 100% { transform: translate(0, 0); }
    25% { transform: translate(-2%, 2%); }
    50% { transform: translate(2%, -2%); }
    75% { transform: translate(-1%, -2%); }
}

/* =============================================================================
   Ossature
   ============================================================================= */
.etablissement {
    display: grid;
    grid-template-columns: var(--rail) minmax(0, 1fr);
    height: 100dvh;
}

/* --- rail des tables ---------------------------------------------------- */
.rail {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 12px 8px;
    background: linear-gradient(180deg, #100E14, #0A0910);
    border-right: 1px solid var(--bord);
    overflow-y: auto;
    scrollbar-width: none;
}
.rail::-webkit-scrollbar { display: none; }

/* La marque : un jeton qui se retourne quand on le frôle. */
.rail-marque { display: grid; place-items: center; padding: 6px 0 14px; }
.jeton-marque {
    width: 40px; height: 40px; border-radius: 50%;
    background: repeating-conic-gradient(var(--laiton) 0 22.5deg, #221C10 0 45deg);
    box-shadow: inset 0 0 0 6px var(--nuit), inset 0 0 0 7px rgba(243, 220, 155, 0.6);
    transition: transform 700ms var(--ressort), box-shadow var(--moyen) var(--sortie);
}
.rail-marque:hover .jeton-marque {
    transform: rotate(180deg) scale(1.06);
    box-shadow: inset 0 0 0 6px var(--nuit), inset 0 0 0 7px var(--laiton-clair);
}

.rail-tables { display: flex; flex-direction: column; gap: 3px; width: 100%; }

/* Chaque table est une tuile : elle s'allume au survol, elle se pose à
   l'ouverture de la page, l'une après l'autre. */
.rail-table {
    position: relative;
    display: flex; flex-direction: column; align-items: center; gap: 7px;
    padding: 11px 4px 9px;
    border-radius: 12px;
    color: var(--creme-faible);
    animation: rail-entre 460ms var(--ressort) both;
    transition: color var(--moyen) var(--sortie), background var(--moyen) var(--sortie),
                transform var(--moyen) var(--ressort);
}
@keyframes rail-entre { from { opacity: 0; transform: translateX(-14px); } }
.rail-tables .rail-table:nth-child(1) { animation-delay: 40ms; }
.rail-tables .rail-table:nth-child(2) { animation-delay: 90ms; }
.rail-tables .rail-table:nth-child(3) { animation-delay: 140ms; }
.rail-tables .rail-table:nth-child(4) { animation-delay: 190ms; }
.rail-tables .rail-table:nth-child(5) { animation-delay: 240ms; }
.rail-tables .rail-table:nth-child(6) { animation-delay: 290ms; }

/* Le repère de la table ouverte : un trait qui se déplie sur le côté. */
.rail-table::before {
    content: "";
    position: absolute; left: -8px; top: 50%; width: 3px; height: 26px;
    border-radius: 0 3px 3px 0;
    background: var(--laiton);
    transform: translateY(-50%) scaleY(0);
    transition: transform var(--moyen) var(--ressort);
}
.rail-table .rail-nom {
    font-size: 9px; font-weight: 500; line-height: 1.3;
    letter-spacing: 0.07em; text-transform: uppercase; text-align: center;
}
.rail-table:hover { color: var(--creme-doux); background: rgba(255, 255, 255, 0.045); }
.rail-table:active { transform: scale(0.97); }
.rail-table.actif {
    color: var(--creme);
    background: rgba(255, 255, 255, 0.06);
}
.rail-table.actif::before { transform: translateY(-50%) scaleY(1); }
.rail-table.ferme { opacity: 0.28; pointer-events: none; }

/* --- les vignettes s'animent, chacune à sa façon -------------------------- */
.rail-table .vignette {
    filter: saturate(0.45) brightness(0.72);
    transition: filter var(--moyen) var(--sortie), transform var(--moyen) var(--ressort);
}
.rail-table:hover .vignette, .rail-table.actif .vignette { filter: none; }

/* La roue tourne, lentement, tant que le curseur reste dessus. */
@keyframes vignette-tourne { to { transform: rotate(360deg); } }
.rail-table:hover .vignette.roue { animation: vignette-tourne 7s linear infinite; }
.rail-table:hover .vignette.jeton { animation: vignette-tourne 3.4s linear infinite; }

/* La pièce se retourne. */
@keyframes vignette-pile {
    0%, 12% { transform: perspective(320px) rotateY(0deg) translateY(0); }
    50% { transform: perspective(320px) rotateY(180deg) translateY(-5px); }
    88%, 100% { transform: perspective(320px) rotateY(360deg) translateY(0); }
}
.rail-table:hover .vignette.piece-v { animation: vignette-pile 1.9s var(--sortie) infinite; }

/* Le dé roule sur lui-même. */
@keyframes vignette-de {
    0%, 20% { transform: rotate(0deg) translateY(0); }
    45% { transform: rotate(-22deg) translateY(-6px); }
    70% { transform: rotate(16deg) translateY(0); }
    100% { transform: rotate(0deg) translateY(0); }
}
.rail-table:hover .vignette.de { animation: vignette-de 1.5s var(--ressort) infinite; }

/* Les cartes s'ouvrent en éventail. */
.vignette.cartes::before, .vignette.cartes::after {
    transition: transform var(--moyen) var(--ressort);
}
.rail-table:hover .vignette.cartes::before { transform: rotate(-26deg) translate(-7px, -2px); }
.rail-table:hover .vignette.cartes::after { transform: rotate(20deg) translate(7px, -2px); }

/* La courbe monte, puis décroche. */
@keyframes vignette-courbe {
    0% { transform: translate(-7px, 7px); opacity: 0; }
    25%, 65% { transform: translate(0, 0); opacity: 1; }
    100% { transform: translate(7px, -7px); opacity: 0; }
}
.rail-table:hover .vignette.courbe-v::after { animation: vignette-courbe 1.8s var(--sortie) infinite; }

/* --- bas du rail : portefeuille, classement, équité, son ------------------ */
/* --- la boutique : une tuile dorée sous les tables ------------------------- */
.rail-boutique {
    position: relative; overflow: hidden;
    display: flex; flex-direction: column; align-items: center; gap: 6px;
    width: 100%; margin-top: 10px; padding: 12px 4px 10px;
    border-radius: 12px;
    color: #1E1604;
    background: linear-gradient(160deg, #FFE38A 0%, #E4B04A 45%, #B8801C 100%);
    box-shadow: 0 0 0 1px rgba(255, 226, 138, 0.35), 0 8px 22px -8px rgba(228, 176, 74, 0.75),
                inset 0 1px 0 rgba(255, 255, 255, 0.55);
    animation: rail-entre 460ms var(--ressort) both, rail-boutique-bat 3.2s ease-in-out infinite;
    animation-delay: 340ms, 1.4s;
    transition: transform var(--moyen) var(--ressort), box-shadow var(--moyen) var(--sortie);
}
.rail-boutique svg { width: 24px; height: 24px; position: relative; }
.rail-boutique .rail-nom {
    position: relative;
    font-size: 9px; font-weight: 800; line-height: 1.3;
    letter-spacing: 0.1em; text-transform: uppercase; text-align: center;
}
/* Un reflet qui balaie la tuile de temps en temps : l'œil y revient. */
.rail-boutique-lueur {
    position: absolute; inset: -40% -60%;
    background: linear-gradient(115deg, transparent 40%, rgba(255, 255, 255, 0.55) 50%, transparent 60%);
    transform: translateX(-70%);
    animation: rail-boutique-reflet 4.6s ease-in-out infinite;
    animation-delay: 2s;
    pointer-events: none;
}
@keyframes rail-boutique-reflet { 0%, 55% { transform: translateX(-70%); } 85%, 100% { transform: translateX(70%); } }
@keyframes rail-boutique-bat {
    0%, 100% { box-shadow: 0 0 0 1px rgba(255, 226, 138, 0.35), 0 8px 22px -8px rgba(228, 176, 74, 0.75), inset 0 1px 0 rgba(255, 255, 255, 0.55); }
    50%      { box-shadow: 0 0 0 1px rgba(255, 226, 138, 0.6), 0 10px 30px -6px rgba(228, 176, 74, 1), inset 0 1px 0 rgba(255, 255, 255, 0.55); }
}
.rail-boutique:hover { transform: translateY(-2px) scale(1.03); }
.rail-boutique:active { transform: scale(0.97); }
.rail-boutique.actif { box-shadow: 0 0 0 2px #FFF1B8, 0 10px 30px -6px rgba(228, 176, 74, 1); }
@media (prefers-reduced-motion: reduce) {
    .rail-boutique { animation: none; }
    .rail-boutique-lueur { animation: none; }
}

.rail-bas { margin-top: auto; display: flex; flex-direction: column; gap: 2px; align-items: center; padding-top: 10px; }
.rail-lien {
    width: 38px; height: 38px;
    display: grid; place-items: center;
    border: 0; border-radius: 11px;
    background: none; cursor: pointer;
    color: var(--creme-faible);
    transition: color var(--rapide) var(--sortie), background var(--rapide) var(--sortie),
                transform var(--rapide) var(--ressort);
}
.rail-lien svg { width: 17px; height: 17px; }
.rail-lien:hover { color: var(--creme); background: rgba(255, 255, 255, 0.06); }
.rail-lien:active { transform: scale(0.92); }
.rail-lien.actif { color: var(--laiton-clair); background: rgba(201, 162, 39, 0.12); }
/* Son coupé : l'icône barrée remplace l'icône pleine. */
.rail-lien .son-off { display: none; }
.rail-lien[aria-pressed="true"] { opacity: 0.55; }
.rail-lien[aria-pressed="true"] .son-on { display: none; }
.rail-lien[aria-pressed="true"] .son-off { display: block; }

@media (prefers-reduced-motion: reduce) {
    .rail-table { animation: none; }
    .rail-table:hover .vignette,
    .rail-table:hover .vignette.courbe-v::after { animation: none; }
}

.salle-colonne {
    display: grid;
    grid-template-rows: var(--barre) minmax(0, 1fr) var(--bande);
    min-width: 0;
    height: 100dvh;
}

.barre {
    display: flex; align-items: center; justify-content: space-between; gap: 20px;
    padding: 0 20px;
    background: rgba(11, 10, 15, 0.92);
    backdrop-filter: blur(14px);
    border-bottom: 1px solid var(--bord);
    z-index: 20;
}
.barre-titre { display: flex; align-items: center; gap: 14px; min-width: 0; }
.enseigne {
    font-family: var(--display); font-size: 19px; font-weight: 600; letter-spacing: -0.01em;
}
.barre-titre .sous { color: var(--creme-faible); font-size: 12.5px; }

/* Les limites de la table : une mention, pas un panneau. */
.limites {
    display: inline-flex; align-items: baseline; gap: 7px;
    padding-left: 14px;
    border-left: 1px solid var(--bord);
    white-space: nowrap;
}
.limites-nom {
    font-size: 9.5px; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase;
    color: var(--creme-faible);
}
.limites-valeur {
    font-family: var(--chiffres); font-size: 12.5px; font-variant-numeric: tabular-nums;
    color: var(--creme-doux);
}

/* --- la caisse du joueur : un seul bloc, pas quatre objets ---------------- */
.barre-actions {
    display: flex; align-items: center; gap: 4px;
    padding: 4px;
    border-radius: 12px;
    background: var(--relief);
    border: 1px solid var(--bord);
}
.solde {
    display: inline-flex; align-items: center; gap: 9px;
    padding: 6px 14px 6px 9px;
    border-radius: 9px;
    background: rgba(201, 162, 39, 0.1);
    font-family: var(--chiffres); font-size: 14.5px; font-weight: 500;
    font-variant-numeric: tabular-nums;
    color: var(--laiton-clair);
    transition: box-shadow var(--moyen) var(--sortie), transform var(--moyen) var(--ressort);
}
.jeton-mini {
    width: 18px; height: 18px; border-radius: 50%; flex-shrink: 0;
    background: repeating-conic-gradient(var(--laiton) 0 30deg, #2A2214 0 60deg);
    box-shadow: inset 0 0 0 3px var(--nuit), inset 0 0 0 4px rgba(243, 220, 155, 0.7);
}
.solde.gagne { animation: plaque-gain 760ms var(--ressort); }
.solde.perd { animation: plaque-perte 420ms var(--sortie); }
@keyframes plaque-gain {
    35% { transform: translateY(-3px) scale(1.05); box-shadow: 0 0 0 2px rgba(201, 162, 39, 0.5); }
}
@keyframes plaque-perte { 25% { transform: translateX(-4px); } 60% { transform: translateX(4px); } }

.bouton-jeton {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 6px 13px 6px 9px;
    border: 0; border-radius: 9px;
    background: rgba(201, 162, 39, 0.16);
    color: var(--laiton-clair); font-family: var(--ui);
    font-size: 12.5px; font-weight: 500;
    cursor: pointer;
    transition: background var(--rapide) var(--sortie);
}
.bouton-jeton .jeton-mini { width: 16px; height: 16px; box-shadow: inset 0 0 0 2.5px var(--nuit), inset 0 0 0 3.5px rgba(243, 220, 155, 0.7); }
.bouton-jeton:hover { background: rgba(201, 162, 39, 0.26); }

/* Quand la récompense n'est pas mûre, le compte à rebours tient sa place. */
.attente {
    display: inline-flex; align-items: baseline; gap: 7px;
    padding: 0 10px 0 8px;
    white-space: nowrap;
}
.attente-nom {
    font-size: 9.5px; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase;
    color: var(--creme-faible);
}
.attente-temps {
    font-family: var(--chiffres); font-size: 12.5px; font-variant-numeric: tabular-nums;
    color: var(--creme-doux);
}

.profil {
    display: flex; align-items: center; gap: 8px;
    padding: 4px 12px 4px 4px;
    border-radius: 9px;
    font-size: 13px; color: var(--creme-doux);
    transition: background var(--rapide) var(--sortie), color var(--rapide) var(--sortie);
}
.profil:hover { background: rgba(255, 255, 255, 0.05); color: var(--creme); }
.profil img, .pastille {
    width: 26px; height: 26px; border-radius: 7px;
    display: grid; place-items: center;
    background: var(--surface-haute);
    font-family: var(--ui); font-size: 12.5px; font-weight: 500; color: var(--creme-doux);
}
.lien-discret {
    width: 30px; height: 30px; border: 0; border-radius: 9px;
    background: none; cursor: pointer; color: var(--creme-faible); font-size: 13px;
    transition: color var(--rapide) var(--sortie), background var(--rapide) var(--sortie);
}
.lien-discret:hover { color: var(--perte); background: rgba(196, 85, 77, 0.12); }

@media (max-width: 1080px) { .limites { display: none; } }
@media (max-width: 860px) { .profil-nom, .attente { display: none; } }

/* --- scène --------------------------------------------------------------- */
.scene {
    position: relative;
    overflow-y: auto;
    padding: 28px 30px 24px;
    background:
        radial-gradient(900px 520px at 50% -8%, rgba(201, 162, 39, 0.1), transparent 66%),
        radial-gradient(1200px 800px at 50% 110%, rgba(18, 49, 39, 0.5), transparent 64%),
        var(--nuit);
    scrollbar-width: thin;
    scrollbar-color: var(--trait-clair) transparent;
}
.scene::-webkit-scrollbar { width: 9px; }
.scene::-webkit-scrollbar-thumb { background: var(--trait-clair); border-radius: 9px; }

/* À une table, la scène se centre sur le tapis : plus de mise en page de page web. */
/* `safe center` : la table est centrée quand elle tient à l'écran, mais reste
   alignée en haut dès qu'elle déborde — sinon on perd le haut du tapis dans une
   fenêtre courte, sans aucun moyen de remonter. */
body.a-table .scene { display: grid; align-content: safe center; padding: 34px 44px; }

/* --- bandeau de vie ------------------------------------------------------- */
.bande-vie {
    display: flex; align-items: center; gap: 16px;
    padding: 0 20px;
    background: #0A0910;
    border-top: 1px solid var(--trait);
    overflow: hidden;
    font-size: 12.5px;
}
.bande-titre {
    flex-shrink: 0;
    font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--creme-faible);
}
.bande-piste {
    display: flex; align-items: center; gap: 26px;
    white-space: nowrap;
    animation: defile 42s linear infinite;
}
.bande-vie:hover .bande-piste { animation-play-state: paused; }
@keyframes defile {
    from { transform: translateX(0); }
    to { transform: translateX(-50%); }
}
.mise-vie { display: inline-flex; align-items: center; gap: 8px; color: var(--creme-doux); }
.mise-vie .qui { color: var(--creme); }
.mise-vie .quoi { color: var(--creme-faible); }
.mise-vie .gain { font-family: var(--chiffres); color: var(--gain); }
.mise-vie .perte { font-family: var(--chiffres); color: var(--perte); }
.mise-vie.moi .qui { color: var(--laiton-clair); }
.etiquette-demo {
    flex-shrink: 0; margin-left: auto;
    padding: 3px 9px; border: 1px solid var(--trait-clair);
    font-size: 9.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--laiton);
}

/* =============================================================================
   La table
   ============================================================================= */
.cadre-table {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 320px;
    gap: 30px;
    width: min(1440px, 100%);
    margin: 0 auto;
    align-items: start;
}
/* Le carnet de coups défile dans sa propre colonne : sans ça, une longue série
   allongeait la page entière et il fallait descendre pour revoir la console. */
.cadre-table > aside {
    align-self: start;
    max-height: calc(100dvh - var(--barre) - var(--bande) - 70px);
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, 0.14) transparent;
}
.cadre-table > aside::-webkit-scrollbar { width: 6px; }
.cadre-table > aside::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.14); border-radius: 3px;
}
/* À une table, on veut tout voir d'un coup : la scène se resserre pour que la
   console tienne dans l'écran sans défilement. */
body.a-table .scene { padding-top: 20px; padding-bottom: 16px; }
body.a-table .console { margin-top: 18px; }
@media (max-width: 1240px) {
    .cadre-table { grid-template-columns: 1fr; }
    .cadre-table > aside { max-height: none; overflow: visible; }
}

.tapis-jeu {
    position: relative;
    border-radius: 28px;
    padding: 46px 46px 38px;
    overflow: hidden;
    /* Feutre : dégradé + trame fine, et la lumière tombe d'en haut. */
    background:
        radial-gradient(620px 300px at 50% -14%, rgba(70, 150, 120, 0.42), transparent 66%),
        repeating-linear-gradient(45deg, rgba(255, 255, 255, 0.012) 0 2px, transparent 2px 4px),
        linear-gradient(175deg, var(--feutre-vif), #0B211B 72%);
    box-shadow: var(--ombre-table), inset 0 0 140px rgba(0, 0, 0, 0.6),
                inset 0 2px 0 rgba(255, 255, 255, 0.06);
    animation: table-entre var(--ample) var(--ressort) both;
}
@keyframes table-entre { from { opacity: 0; transform: translateY(16px) scale(0.985); } }

/* Cône de lumière au-dessus du tapis */
.tapis-jeu::before {
    content: "";
    position: absolute; left: 50%; top: -180px;
    width: 640px; height: 420px; transform: translateX(-50%);
    background: radial-gradient(ellipse at 50% 0%, rgba(255, 236, 190, 0.16), transparent 62%);
    pointer-events: none;
}
/* Couture dorée du tapis */
.tapis-jeu::after {
    content: "";
    position: absolute; inset: 12px;
    border: 1px dashed rgba(201, 162, 39, 0.2);
    border-radius: 18px;
    pointer-events: none;
}
.tapis-jeu.secousse { animation: secousse 460ms var(--sortie); }
@keyframes secousse {
    20% { transform: translate(-7px, 4px) rotate(-0.3deg); }
    45% { transform: translate(6px, -3px) rotate(0.25deg); }
    70% { transform: translate(-3px, 2px); }
    100% { transform: none; }
}

.aire {
    position: relative; z-index: 1;
    display: grid; align-content: center; justify-items: center;
    gap: 26px; min-height: 380px;
}
/* Le comptoir n'a pas besoin du plancher minimal d'une table de jeu. */
.comptoir .aire { gap: 16px; min-height: 0; }

.resultat { min-height: 68px; display: grid; place-items: center; text-align: center; }
.resultat .chiffre-resultat {
    font-family: var(--chiffres); font-variant-numeric: tabular-nums;
    font-size: 34px; font-weight: 600; line-height: 1;
    animation: resultat-entre 440ms var(--ressort) both;
}
.resultat .plus { color: var(--gain); }
.resultat .moins { color: var(--perte); }
.resultat .detail { margin-top: 5px; color: rgba(240, 233, 220, 0.62); font-size: 13px; }
@keyframes resultat-entre { from { opacity: 0; transform: translateY(8px) scale(0.95); } }

/* --- console de mise ------------------------------------------------------
   Tous les organes de commande ont la même hauteur, le même rayon, le même
   contour et le même fond. Les intitulés partagent une seule ligne de base, et
   chaque poste se termine en bas de la console : plus rien ne flotte. */
.console {
    --h-controle: 46px;
    display: grid;
    /* La colonne de mise doit tenir sur une seule ligne : champ + quatre jetons. */
    grid-template-columns: minmax(340px, 0.9fr) minmax(0, 1.3fr) 230px;
    gap: 28px;
    align-items: end;
    margin-top: 24px;
    padding: 22px 24px 24px;
    border-radius: 14px;
    background: var(--surface);
    border: 1px solid var(--bord);
    box-shadow: 0 18px 40px -30px rgba(0, 0, 0, 0.9);
}
@media (max-width: 1080px) { .console { grid-template-columns: 1fr; } }

.poste { display: flex; flex-direction: column; gap: 9px; min-width: 0; }

/* Une table à nombreuses options (la roulette) prend toute la largeur sur une
   première ligne ; la mise et le bouton se partagent la ligne du dessous. */
.poste.large { grid-column: 1 / -1; order: -1; }
.console:has(.poste.large) .poste:first-of-type { grid-column: span 2; }
/* Intitulé de poste : gravé en serif, comme les titres de plaque. */
.poste-titre {
    font-size: 10.5px; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase;
    color: var(--creme-faible);
}
.rangee { display: flex; align-items: stretch; gap: 7px; flex-wrap: wrap; }
.rangee > .jetons { flex: 0 0 auto; }

/* Champ de mise : le jeton dans le champ dit de quoi on parle sans étiquette. */
.saisie {
    position: relative;
    display: flex; align-items: center; gap: 10px;
    flex: 1 1 130px;
    height: var(--h-controle);
    padding: 0 14px;
    border: 1px solid var(--trait-clair); border-radius: 11px;
    background: #0B0A0E;
    transition: border-color var(--rapide) var(--sortie), box-shadow var(--rapide) var(--sortie);
}
.saisie:focus-within { border-color: var(--laiton); box-shadow: 0 0 0 3px rgba(201, 162, 39, 0.16); }
.saisie input {
    width: 100%; min-width: 0;
    border: none; background: none; color: var(--creme);
    font-family: var(--chiffres); font-size: 16px; font-variant-numeric: tabular-nums;
}
.saisie input:focus { outline: none; }
.saisie .suffixe { font-size: 11px; letter-spacing: 0.1em; color: var(--creme-faible); }
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
input[type="number"] { -moz-appearance: textfield; }

/* Mises rapides : un seul bloc segmenté, pas quatre boutons épars — ça tient sur
   la même ligne que le champ et ça se lit comme un seul organe. */
.jetons {
    display: flex;
    flex: 0 0 auto;
    height: var(--h-controle);
    border: 1px solid var(--trait-clair);
    border-radius: 11px;
    background: #0B0A0E;
    overflow: hidden;
}
.jetons button {
    min-width: 40px !important;
    padding: 0 9px !important;
    border: none !important;
    border-radius: 0 !important;
    background: none !important;
}
.jetons button + button { box-shadow: inset 1px 0 0 var(--trait-clair); }
.jetons button:hover { background: rgba(201, 162, 39, 0.12) !important; }

.jetons button, .choix button {
    height: var(--h-controle);
    min-width: 44px;
    padding: 0 11px;
    border: 1px solid var(--trait-clair); border-radius: 11px;
    background: #0B0A0E;
    color: var(--creme-doux);
    font-family: var(--chiffres); font-size: 12.5px;
    cursor: pointer;
    transition: color var(--rapide) var(--sortie), border-color var(--rapide) var(--sortie),
                background var(--rapide) var(--sortie), transform var(--rapide) var(--ressort);
}
.choix button { font-family: var(--ui); font-size: 13px; font-weight: 500; }
.jetons button:hover, .choix button:hover { color: var(--creme); border-color: var(--laiton-sombre); }
.jetons button:active, .choix button:active { transform: translateY(1px) scale(0.98); }
/* Les options de mise forment une grille régulière : tous les boutons ont la même
   largeur, quel que soit leur libellé, et personne ne se retrouve seul sur sa ligne. */
.choix { display: grid; grid-template-columns: repeat(auto-fit, minmax(86px, 1fr)); gap: 7px; }
.choix button { width: 100%; }

/* display:flex/grid l'emporte sur le display:none de l'attribut hidden : sans cette
   règle, un champ masqué (le numéro plein de la roulette) resterait visible. */
[hidden] { display: none !important; }
.choix button[aria-pressed="true"] {
    border-color: var(--laiton);
    background: linear-gradient(180deg, rgba(201, 162, 39, 0.26), rgba(201, 162, 39, 0.08));
    color: var(--laiton-clair);
}
.choix button.rouge[aria-pressed="true"] { border-color: #A8403A; background: rgba(168, 64, 58, 0.32); color: #F4C4C0; }
.choix button.noir[aria-pressed="true"] { border-color: #7A7264; background: rgba(255, 255, 255, 0.09); color: var(--creme); }

/* Curseur : même hauteur de rangée que le reste, poignée en jeton. */
.rangee .glissiere { display: flex; align-items: center; height: var(--h-controle); flex: 1 1 200px; }
input[type="range"] {
    width: 100%; -webkit-appearance: none; appearance: none;
    height: 4px; border-radius: 999px;
    background: linear-gradient(90deg, var(--laiton) var(--remplissage, 50%), var(--trait-clair) var(--remplissage, 50%));
}
input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none; width: 22px; height: 22px; border-radius: 50%;
    background: repeating-conic-gradient(var(--laiton) 0 30deg, #241D12 0 60deg);
    box-shadow: inset 0 0 0 4px var(--nuit), inset 0 0 0 5px rgba(243, 220, 155, 0.7), var(--ombre-douce);
    cursor: grab;
    transition: transform var(--rapide) var(--ressort);
}
input[type="range"]:active::-webkit-slider-thumb { transform: scale(1.15); cursor: grabbing; }

.bouton-mise {
    position: relative;
    height: var(--h-controle);
    width: 100%;
    border: none; border-radius: 11px;
    background: linear-gradient(170deg, var(--laiton-clair), var(--laiton) 46%, var(--laiton-sombre));
    color: #17110A;
    font-family: var(--ui); font-size: 13px; font-weight: 600;
    letter-spacing: 0.12em; text-transform: uppercase;
    cursor: pointer; overflow: hidden;
    box-shadow: 0 12px 28px -14px rgba(201, 162, 39, 0.95), inset 0 1px 0 rgba(255, 255, 255, 0.45);
    transition: transform var(--rapide) var(--ressort), box-shadow var(--moyen) var(--sortie);
}
.bouton-mise::after {
    content: ""; position: absolute; top: 0; bottom: 0; left: -60%; width: 42%;
    background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.55), transparent);
    transform: skewX(-18deg); transition: left 700ms var(--sortie);
}
.bouton-mise:hover::after { left: 130%; }
.bouton-mise:active { transform: translateY(2px) scale(0.99); }
.bouton-mise:disabled { opacity: 0.45; cursor: progress; filter: saturate(0.35); }

/* Second rang d'options (douzaines, numéro plein…) sous la rangée principale. */
.rangee.secondaire { margin-top: 2px; }
.rangee .large { flex: 1 1 100%; }

/* --- panneau latéral de la table ------------------------------------------ */
.panneau {
    padding: 20px;
    border-radius: 14px;
    background: var(--surface);
    border: 1px solid var(--bord);
    box-shadow: 0 18px 40px -30px rgba(0, 0, 0, 0.9);
}
.panneau + .panneau { margin-top: 16px; }

/* Titre de bloc : lisible, sans effet. Un filet le prolonge jusqu'au bord. */
.panneau .intitule {
    display: flex; align-items: center; gap: 12px; margin: 0 0 16px;
    font-family: var(--ui);
    font-size: 13.5px; font-weight: 600; font-style: normal;
    letter-spacing: 0.005em; text-transform: none;
    color: var(--creme);
}
.panneau .intitule::after {
    content: ""; flex: 1; height: 1px; background: var(--bord);
}

.intitule {
    display: flex; align-items: center; gap: 10px; margin: 0 0 14px;
    font-size: 10.5px; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase;
    color: var(--creme-faible);
}
.intitule::after { content: ""; flex: 1; height: 1px; background: var(--bord); }

.liste { display: flex; flex-direction: column; }
.ligne {
    display: flex; align-items: center; gap: 12px;
    padding: 11px 6px; font-size: 13px;
}
.ligne + .ligne { border-top: 1px solid rgba(255, 255, 255, 0.04); }
.ligne .nom { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--creme-doux); }
.ligne .montant { font-family: var(--chiffres); font-variant-numeric: tabular-nums; }
.montant.plus { color: var(--gain); }
.montant.moins { color: var(--perte); }
.ligne.neuve { animation: ligne-entre 420ms var(--ressort) both; }
@keyframes ligne-entre { from { opacity: 0; transform: translateX(-12px); } }

.rang { width: 24px; height: 24px; border-radius: 7px; display: grid; place-items: center;
        background: rgba(255, 255, 255, 0.05); font-family: var(--chiffres); font-size: 11px; color: var(--creme-doux); }
.rang.or { background: linear-gradient(160deg, var(--laiton-clair), var(--laiton-sombre)); color: #17110A; }
.rang.argent { background: linear-gradient(160deg, #D8D2C4, #9C968A); color: #17110A; }
.rang.bronze { background: linear-gradient(160deg, #C08A57, #8A5F38); color: #17110A; }

.muet { color: var(--creme-doux); font-size: 13.5px; max-width: 64ch; text-wrap: pretty; }
.faible { color: var(--creme-faible); font-size: 12px; }
.chiffre { font-family: var(--chiffres); font-variant-numeric: tabular-nums; }
code.graine {
    display: block; padding: 10px 12px; border-radius: 8px;
    background: #0B0A0E; border: 1px solid var(--trait);
    font-family: var(--chiffres); font-size: 11px; color: var(--creme-doux); word-break: break-all;
}

/* =============================================================================
   Lobby
   ============================================================================= */
.lobby { width: min(1240px, 100%); margin: 0 auto; }
.lobby-tete {
    display: flex; align-items: flex-end; justify-content: space-between; gap: 30px;
    margin-bottom: 26px;
}
.lobby-tete h1 {
    margin: 0;
    font-family: var(--display); font-size: clamp(30px, 4.4vw, 50px);
    font-weight: 600; line-height: 1; letter-spacing: -0.025em;
}
.lobby-tete h1 em {
    font-style: italic;
    background: linear-gradient(150deg, var(--laiton-clair), var(--laiton) 60%, var(--laiton-sombre));
    -webkit-background-clip: text; background-clip: text; color: transparent;
}
.lobby-tete p { margin: 8px 0 0; color: var(--creme-doux); }

.grille-tables { display: grid; grid-template-columns: repeat(6, 1fr); gap: 16px; }
.table-lien { grid-column: span 2; }
.table-lien.vedette { grid-column: span 3; }
@media (max-width: 1080px) { .table-lien, .table-lien.vedette { grid-column: span 3; } }
@media (max-width: 720px) { .table-lien, .table-lien.vedette { grid-column: span 6; } }

/* Chaque carte est une table vue de haut : feutre, lumière, jeton posé dessus. */
.table-carte {
    position: relative;
    display: flex; flex-direction: column; gap: 8px;
    height: 100%; min-height: 188px;
    padding: 24px;
    border-radius: 20px; overflow: hidden;
    background:
        radial-gradient(420px 180px at 50% -20%, rgba(70, 150, 120, 0.35), transparent 70%),
        linear-gradient(175deg, #17392E, #0A1B16 78%);
    box-shadow: var(--ombre-carte), inset 0 0 60px rgba(0, 0, 0, 0.45);
    transition: transform var(--moyen) var(--ressort), box-shadow var(--moyen) var(--sortie);
}
.table-carte::after {
    content: "";
    position: absolute; inset: 0; pointer-events: none;
    background: radial-gradient(240px circle at var(--x, 50%) var(--y, 0%), rgba(243, 220, 155, 0.14), transparent 60%);
    opacity: 0; transition: opacity var(--moyen) var(--sortie);
}
.table-lien:hover .table-carte { transform: translateY(-5px); box-shadow: var(--ombre-table), inset 0 0 60px rgba(0, 0, 0, 0.45); }
.table-lien:hover .table-carte::after { opacity: 1; }
.table-carte h3 { margin: 0; font-family: var(--display); font-size: 22px; font-weight: 600; }
.table-carte p { margin: 0; color: rgba(240, 233, 220, 0.6); font-size: 13px; }
.table-carte .entrer {
    margin-top: auto; display: inline-flex; align-items: center; gap: 8px;
    font-size: 11.5px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase;
    color: var(--laiton-clair);
}
.table-carte .entrer svg { transition: transform var(--moyen) var(--ressort); }
.table-lien:hover .entrer svg { transform: translateX(5px); }
.table-lien.fermee { pointer-events: none; }
.table-lien.fermee .table-carte { opacity: 0.4; filter: grayscale(0.7); }

/* Vignettes dessinées : aucune icône d'emoji dans l'habillage. */
.vignette { width: 42px; height: 42px; position: relative; flex-shrink: 0; }
.vignette.jeton {
    border-radius: 50%;
    background: repeating-conic-gradient(var(--laiton) 0 18deg, #241D12 0 36deg);
    box-shadow: inset 0 0 0 6px #10150F, inset 0 0 0 8px rgba(243, 220, 155, 0.55);
}
.vignette.roue {
    border-radius: 50%;
    background: conic-gradient(#A8403A 0 12.5%, #17140F 0 25%, #A8403A 0 37.5%, #17140F 0 50%,
                #A8403A 0 62.5%, #17140F 0 75%, #A8403A 0 87.5%, var(--feutre-clair) 0 100%);
    box-shadow: inset 0 0 0 4px #10150F, inset 0 0 0 5px rgba(243, 220, 155, 0.5);
}
.vignette.cartes::before, .vignette.cartes::after {
    content: ""; position: absolute; inset: 3px 11px; border-radius: 4px;
    background: linear-gradient(160deg, #F3ECDD, #C9C0AC); box-shadow: var(--ombre-douce);
}
.vignette.cartes::before { transform: rotate(-15deg) translateX(-4px); }
.vignette.cartes::after { transform: rotate(10deg) translateX(4px); }
.vignette.piece-v {
    border-radius: 50%;
    background: radial-gradient(circle at 34% 28%, var(--laiton-clair), var(--laiton) 46%, var(--laiton-sombre));
    box-shadow: inset 0 -3px 8px rgba(0, 0, 0, 0.4);
}
.vignette.de {
    border-radius: 9px; background: linear-gradient(160deg, #F3ECDD, #C4BBA7);
    box-shadow: var(--ombre-douce);
}
.vignette.de::before, .vignette.de::after {
    content: ""; position: absolute; width: 6px; height: 6px; border-radius: 50%; background: #14110B;
}
.vignette.de::before { top: 9px; left: 9px; }
.vignette.de::after { bottom: 9px; right: 9px; }
.vignette.courbe-v { border-radius: 9px; background: rgba(201, 162, 39, 0.12); overflow: hidden; }
.vignette.courbe-v::after {
    content: ""; position: absolute; inset: 7px;
    background: linear-gradient(45deg, transparent 45%, var(--laiton-clair) 45% 55%, transparent 55%);
}

.colonnes-lobby { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 20px; align-items: start; margin-top: 22px; }
@media (max-width: 1080px) { .colonnes-lobby { grid-template-columns: 1fr; } }

/* =============================================================================
   Jeux
   ============================================================================= */
/* -- l'allée des machines --------------------------------------------------
   Une borne ne se pose pas sur un feutre vert : elle est alignée dans une allée,
   sous un plafonnier, avec ses voisines qui se perdent dans le flou. */
.tapis-jeu.salle-machines {
    background:
        radial-gradient(130% 62% at 50% -10%, rgba(240, 212, 150, 0.16), transparent 62%),
        radial-gradient(90% 55% at 50% 118%, rgba(201, 162, 39, 0.05), transparent 70%),
        linear-gradient(180deg, #17161E 0%, #100F15 46%, #0A090E 100%);
    box-shadow: var(--ombre-table), inset 0 0 160px rgba(0, 0, 0, 0.75),
                inset 0 1px 0 rgba(255, 255, 255, 0.05);
}
/* Le plafonnier : un cône chaud qui tombe droit sur la borne. */
.salle-machines::before {
    width: 760px; height: 520px; top: -230px;
    background: radial-gradient(ellipse at 50% 0%, rgba(255, 234, 186, 0.2), transparent 64%);
}
/* Le sol de l'allée : moquette sombre, ligne de plinthe, et la lumière du
   plafonnier qui s'y étale. */
.salle-machines::after {
    content: "";
    position: absolute; left: 0; right: 0; bottom: 0; height: 30%;
    border: 0; border-radius: 0;
    background:
        radial-gradient(60% 120% at 50% 0%, rgba(240, 212, 150, 0.07), transparent 70%),
        repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.014) 0 2px, transparent 2px 7px),
        linear-gradient(180deg, #191820 0%, #0D0C11 100%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
    pointer-events: none;
}

/* Les bornes voisines : silhouettes floues, juste assez pour qu'on devine
   l'allée. Leur fronton est allumé, comme celui du premier plan. */
.voisine {
    position: absolute; bottom: 12%;
    width: 132px; height: 320px;
    border-radius: 16px 16px 5px 5px;
    background: linear-gradient(180deg, #26242F 0%, #1A1922 40%, #0F0E13 100%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 30px 50px -30px rgba(0, 0, 0, 1);
    filter: blur(3.5px);
    opacity: 0.6;
    pointer-events: none;
    z-index: 0;
}
.voisine::before {
    content: "";
    position: absolute; left: 12px; right: 12px; top: 16px; height: 22px;
    border-radius: 5px;
    background: linear-gradient(180deg, rgba(240, 212, 150, 0.32), rgba(201, 162, 39, 0.08));
}
/* Leur bloc de tambours, éteint. */
.voisine::after {
    content: "";
    position: absolute; left: 14px; right: 14px; top: 58px; height: 104px;
    border-radius: 7px;
    background: linear-gradient(180deg, #08070C, #121118);
    box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.05);
}
.voisine.gauche { left: -18px; transform: perspective(700px) rotateY(19deg); }
.voisine.droite { right: -18px; transform: perspective(700px) rotateY(-19deg); }
@media (max-width: 1100px) { .voisine { display: none; } }

/* -- machine à sous : la borne ---------------------------------------------
   Un vrai meuble : fronton éclairé, cadre de métal brossé autour des tambours,
   levier sur le flanc, socle qui porte la table des gains et le bac. Le pas du
   rouleau (--pas) sert au CSS ET au script : la bande s'arrête donc toujours
   pile sur la figure tirée. */
.borne {
    --case: 116px;
    --pas: 120px;
    --hublot: 196px;
    --metal-vif: #4A4854;
    --metal: #2B2933;
    --metal-sombre: #17161C;

    position: relative;
    display: flex; flex-direction: column; align-items: stretch;
    width: fit-content;
    margin: 0 auto;
    border-radius: 22px 22px 16px 16px;
    background: linear-gradient(180deg, var(--metal) 0%, var(--metal-sombre) 100%);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.14),
        inset 0 0 0 1px rgba(255, 255, 255, 0.05),
        0 40px 70px -40px rgba(0, 0, 0, 1);
    z-index: 1;
}
/* L'ombre portée au pied de la borne, sur la moquette. */
.borne::after {
    content: "";
    position: absolute; left: 6%; right: 6%; bottom: -22px; height: 30px;
    background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.8), transparent 72%);
    filter: blur(6px);
    pointer-events: none;
}

/* Le fronton : la plaque éclairée en haut du meuble. */
.borne-fronton {
    display: flex; align-items: center; justify-content: center; gap: 16px;
    padding: 13px 26px 12px;
    border-radius: 21px 21px 0 0;
    background: linear-gradient(180deg, #34323D, #22202A);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.16),
                inset 0 -1px 0 rgba(0, 0, 0, 0.55);
}
.fronton-nom {
    font-family: var(--ui);
    font-size: 12px; font-weight: 600; letter-spacing: 0.3em; text-transform: uppercase;
    color: var(--creme);
    text-shadow: 0 0 14px rgba(240, 233, 220, 0.25);
}
.fronton-lampe {
    width: 8px; height: 8px; border-radius: 50%;
    background: radial-gradient(circle at 35% 30%, #FFF3D0, var(--laiton));
    box-shadow: 0 0 10px rgba(201, 162, 39, 0.75);
    animation: lampe 2.4s ease-in-out infinite;
}
.borne-fronton .fronton-lampe:last-child { animation-delay: 1.2s; }
@keyframes lampe { 50% { opacity: 0.32; box-shadow: 0 0 4px rgba(201, 162, 39, 0.3); } }

/* Le corps : le cadre de métal et, sur le flanc, le levier. */
.borne-corps { position: relative; padding: 16px 18px; }

.machine {
    position: relative;
    display: flex; gap: 8px;
    padding: 14px;
    border-radius: 12px;
    /* Métal brossé : quatre vis aux angles, le grain vertical du brossage, puis
       le dégradé clair en haut / sombre en bas. */
    background-image:
        radial-gradient(circle 3.4px at 10px 10px, #7D7B88 38%, #1B1A20 72%, transparent),
        radial-gradient(circle 3.4px at calc(100% - 10px) 10px, #7D7B88 38%, #1B1A20 72%, transparent),
        radial-gradient(circle 3.4px at 10px calc(100% - 10px), #7D7B88 38%, #1B1A20 72%, transparent),
        radial-gradient(circle 3.4px at calc(100% - 10px) calc(100% - 10px), #7D7B88 38%, #1B1A20 72%, transparent),
        repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.03) 0 1px, transparent 1px 3px),
        linear-gradient(180deg, var(--metal-vif) 0%, #2E2C37 34%, #1C1A22 100%);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.22),
        inset 0 -1px 0 rgba(0, 0, 0, 0.7),
        0 12px 26px -14px rgba(0, 0, 0, 0.95);
}
/* Le hublot est plus haut qu'une figure : on aperçoit le bas de la précédente et
   le haut de la suivante, exactement comme devant un vrai tambour. C'est ce
   débord, plus que tout le reste, qui fait cylindre au lieu d'image plate. */
.fenetre {
    position: relative;
    width: var(--case); height: var(--hublot);
    border-radius: 7px; overflow: hidden;
    background: #0A0910;
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.9),
                0 0 0 1px rgba(255, 255, 255, 0.07);
    transition: box-shadow var(--moyen) var(--sortie);
}
/* La courbure : le cylindre s'enfonce dans le noir en haut et en bas, une bande
   de lumière court sur la rangée qui compte, et le verre renvoie un reflet. */
.fenetre::before {
    content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none;
    background:
        linear-gradient(106deg, rgba(255, 255, 255, 0.09) 0 14%, transparent 38%),
        linear-gradient(180deg,
            rgba(4, 3, 7, 0.98) 0 4%,
            rgba(4, 3, 7, 0.82) 14%,
            rgba(4, 3, 7, 0.3) 28%,
            rgba(255, 255, 255, 0.055) 47%,
            rgba(255, 255, 255, 0.055) 53%,
            rgba(4, 3, 7, 0.3) 72%,
            rgba(4, 3, 7, 0.82) 86%,
            rgba(4, 3, 7, 0.98) 100%);
}
/* La bande est centrée sur le hublot : translateY(0) place la première figure
   pile sur la ligne de paiement, et le calcul du script reste inchangé. */
.bande {
    position: absolute; left: 0; right: 0; top: 50%;
    margin-top: calc(var(--pas) / -2);
    display: flex; flex-direction: column; align-items: center;
    will-change: transform;
}
/* Au repos la bande porte trois cases : c'est celle du milieu qui est sur la
   ligne de paiement. */
.bande.pose { margin-top: calc(var(--pas) * -1.5); }
.bande.tourne { filter: url(#flou-rouleau); }
.bande span {
    height: var(--pas); width: var(--case);
    display: grid; place-items: center;
}
.filtres { position: absolute; width: 0; height: 0; }
.figure { display: block; width: 60px; height: 60px; }
.figure svg { display: block; width: 100%; height: 100%; }

/* La ligne de paiement et ses deux repères, comme sur le cadre d'une vraie
   machine : deux flèches qui pointent la rangée qui compte. */
.ligne-paiement {
    position: absolute; left: 14px; right: 14px; top: 50%; height: 1px; z-index: 3;
    background: linear-gradient(90deg, transparent, rgba(240, 233, 220, 0.2), transparent);
}
.repere {
    position: absolute; top: 50%; z-index: 4;
    width: 0; height: 0;
    border-top: 6px solid transparent; border-bottom: 6px solid transparent;
    transform: translateY(-50%);
}
.repere.gauche { left: 3px; border-left: 8px solid var(--laiton); }
.repere.droite { right: 3px; border-right: 8px solid var(--laiton); }

.fenetre.gagnante {
    box-shadow: inset 0 0 0 1px rgba(201, 162, 39, 0.5),
                0 0 0 1px rgba(201, 162, 39, 0.6),
                0 0 18px -6px rgba(201, 162, 39, 0.5);
    animation: fenetre-gagne 760ms var(--sortie);
}
@keyframes fenetre-gagne { 35% { background: rgba(201, 162, 39, 0.16); } }

/* L'afficheur du meuble : trois compteurs sur fond d'ardoise, chiffres ambrés
   comme les vieux afficheurs à segments. */
.ecran {
    display: flex; gap: 1px;
    margin-top: 12px;
    border-radius: 8px; overflow: hidden;
    background: rgba(0, 0, 0, 0.75);
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.9),
                inset 0 4px 10px -5px rgba(0, 0, 0, 1),
                0 1px 0 rgba(255, 255, 255, 0.07);
}
.ecran-case {
    flex: 1;
    display: flex; flex-direction: column; align-items: center; gap: 2px;
    padding: 7px 8px 8px;
    background: #07060B;
}
.ecran-case em {
    font-style: normal; font-size: 8px; font-weight: 500;
    letter-spacing: 0.18em; text-transform: uppercase;
    color: rgba(240, 233, 220, 0.3);
}
.ecran-case b {
    font-family: var(--chiffres); font-size: 15px; font-weight: 500;
    font-variant-numeric: tabular-nums; line-height: 1;
    color: #F0B44E;
    text-shadow: 0 0 9px rgba(240, 180, 78, 0.55);
}

/* --- le levier ------------------------------------------------------------ */
.levier {
    position: absolute; right: -30px; top: 22px;
    width: 30px; height: 140px;
    border: 0; background: none; padding: 0;
    cursor: pointer;
}
/* L'embase : la pièce de métal boulonnée sur le flanc du meuble, d'où sort le
   bras. Sans elle, le levier a l'air posé dans le vide. */
.levier-axe {
    position: absolute; left: -10px; top: -4px;
    width: 30px; height: 34px;
    border-radius: 4px 9px 9px 4px;
    background: linear-gradient(160deg, #5C5A66, #26252E 60%, #1A191F);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.28),
                inset 0 -1px 0 rgba(0, 0, 0, 0.7),
                0 4px 10px -4px rgba(0, 0, 0, 0.95);
}
/* Le boulon central, sur lequel le bras pivote. */
.levier-axe::after {
    content: "";
    position: absolute; right: 7px; top: 12px;
    width: 10px; height: 10px; border-radius: 50%;
    background: radial-gradient(circle at 34% 30%, #7E7C88, #1C1B22);
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.6);
}
/* Le bras pivote autour du boulon : c'est lui qui descend quand on tire. */
.levier-bras {
    position: absolute; left: 6px; top: 13px;
    width: 9px; height: 106px;
    border-radius: 5px;
    background: linear-gradient(90deg, #7E7C88, #45434F 42%, #232229);
    box-shadow: 0 3px 10px -5px rgba(0, 0, 0, 0.95);
    transform-origin: 50% 4px;
    transition: transform 520ms var(--ressort);
}
.levier-boule {
    position: absolute; left: 50%; bottom: -11px;
    width: 30px; height: 30px; margin-left: -15px;
    border-radius: 50%;
    background: radial-gradient(circle at 33% 27%, #EC8C82, #A8332B 56%, #61150F);
    box-shadow: inset 0 -4px 8px rgba(0, 0, 0, 0.5),
                inset 0 2px 5px rgba(255, 255, 255, 0.25),
                0 6px 14px -5px rgba(0, 0, 0, 0.95);
}
.levier:hover .levier-bras { transform: rotate(7deg); }
.levier:active .levier-bras { transform: rotate(26deg); transition-duration: 120ms; }
/* Tiré : il plonge, puis remonte tout seul. */
.levier.tire .levier-bras { animation: levier-tire 900ms var(--ressort); }
@keyframes levier-tire {
    0% { transform: rotate(0deg); }
    22% { transform: rotate(32deg); }
    100% { transform: rotate(0deg); }
}

/* --- le socle : table des gains et bac à jetons ---------------------------- */
.borne-socle {
    position: relative;
    display: flex; flex-direction: column; align-items: center; gap: 12px;
    padding: 14px 18px 16px;
}
/* La gorge entre le bloc des tambours et le panneau du bas. */
.borne-socle::before {
    content: "";
    position: absolute; left: 18px; right: 18px; top: 2px; height: 2px;
    border-radius: 2px;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.8), rgba(255, 255, 255, 0.07));
}
/* Trois combinaisons de largeur égale : la grille garantit que les intitulés
   et les multiplicateurs tombent sur la même ligne d'une carte à l'autre. */
.table-gains {
    display: grid; grid-template-columns: repeat(3, 1fr);
    gap: 8px; width: 100%;
}
.gain {
    display: flex; flex-direction: column; align-items: center; gap: 9px;
    padding: 10px 9px 11px;
    border-radius: 10px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.015));
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.07),
                inset 0 1px 0 rgba(255, 255, 255, 0.07);
}
/* La combinaison est posée dans une fenêtre, comme sur les tambours. */
.gain-figures {
    display: flex; align-items: center; justify-content: center; gap: 5px;
    width: 100%; height: 36px;
    border-radius: 7px;
    background: #0A0910;
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.85),
                inset 0 7px 14px -7px rgba(0, 0, 0, 1),
                0 1px 0 rgba(255, 255, 255, 0.05);
}
.gain-figures .figure { width: 22px; height: 22px; flex: 0 0 auto; }
/* L'emplacement libre : un rond en pointillé, n'importe quelle figure y va. */
.gain-figures .figure.libre {
    border-radius: 50%;
    border: 1px dashed rgba(240, 233, 220, 0.28);
}
.gain-nom {
    font-size: 9px; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase;
    color: var(--creme-faible); text-align: center; white-space: nowrap;
}
.gain-valeur {
    font-family: var(--chiffres); font-size: 16px; font-weight: 500;
    font-variant-numeric: tabular-nums; line-height: 1;
    color: var(--creme);
}
/* Le jackpot se distingue : un liseré et le chiffre en or. */
.gain.jackpot {
    box-shadow: inset 0 0 0 1px rgba(201, 162, 39, 0.4),
                inset 0 1px 0 rgba(243, 220, 155, 0.16);
}
.gain.jackpot .gain-valeur { color: var(--laiton-clair); }

/* Le pupitre : les touches encastrées dans le bas du meuble. Bombées, avec
   l'arête claire en haut, et elles s'enfoncent quand on appuie. */
.pupitre {
    display: grid; grid-template-columns: repeat(4, 1fr) 1.5fr;
    gap: 7px; width: 100%;
}
.touche {
    padding: 11px 6px 12px;
    border: 0; border-radius: 8px;
    background: linear-gradient(180deg, #3C3A46, #23222B 60%, #191820);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22),
                inset 0 -2px 0 rgba(0, 0, 0, 0.6),
                0 3px 0 #0D0C11, 0 6px 12px -6px rgba(0, 0, 0, 0.9);
    font-family: var(--ui);
    font-size: 10px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase;
    color: var(--creme-doux);
    cursor: pointer;
    transition: background var(--rapide) var(--sortie), color var(--rapide) var(--sortie),
                transform var(--rapide) var(--sortie), box-shadow var(--rapide) var(--sortie);
}
.touche:hover:not(:disabled) { background: linear-gradient(180deg, #474551, #2A2833 60%, #1D1C24); color: var(--creme); }
.touche:active:not(:disabled) {
    transform: translateY(3px);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12), inset 0 -1px 0 rgba(0, 0, 0, 0.5);
}
.touche:disabled { opacity: 0.38; cursor: default; }
/* La touche de lancement : la seule éclairée du pupitre. */
.touche.lancer {
    background: linear-gradient(180deg, #E8C468, #C9A227 55%, #8A6F1A);
    box-shadow: inset 0 1px 0 rgba(255, 249, 220, 0.6),
                inset 0 -2px 0 rgba(0, 0, 0, 0.35),
                0 3px 0 #5C4910, 0 8px 18px -8px rgba(201, 162, 39, 0.7);
    color: #241C05; letter-spacing: 0.16em;
}
.touche.lancer:hover:not(:disabled) {
    background: linear-gradient(180deg, #F3DC9B, #D8AF2C 55%, #96791C);
}
.touche.lancer:active:not(:disabled) { box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.45); }

/* Console à deux postes (mise + lancer) : sans ce réglage, la colonne du milieu
   resterait vide et le bouton se retrouverait à l'étroit. */
.console-deux { grid-template-columns: minmax(320px, 1fr) 240px !important; }

/* La console commune n'a plus lieu d'être : tout est sur la borne. */
.console-masquee { display: none !important; }

/* Le bac : la fente d'où tombent les jetons, creusée dans le bas du meuble. */
.bac {
    width: 150px; height: 14px;
    border-radius: 7px;
    background: #08070C;
    box-shadow: inset 0 3px 6px rgba(0, 0, 0, 1),
                0 1px 0 rgba(255, 255, 255, 0.07);
}

@media (prefers-reduced-motion: reduce) {
    .fronton-lampe { animation: none; }
    .levier.tire .levier-bras { animation: none; }
}
@media (max-width: 720px) {
    .borne { --case: 92px; --pas: 98px; --hublot: 158px; }
    .figure { width: 48px; height: 48px; }
    .levier { display: none; }
}

/* -- le comptoir --------------------------------------------------------
   Une pièce ne se lance pas sur un feutre : elle claque sur un comptoir. Bois
   sombre ciré, veines, et la lampe qui fait une flaque de lumière au centre. */
.tapis-jeu.comptoir {
    /* Table compacte : tout — tapis, plaques et console — doit tenir dans la
       hauteur de l'écran sans avoir à faire défiler la page. */
    padding: 26px 30px 24px;
    background:
        radial-gradient(64% 46% at 50% 22%, rgba(255, 233, 183, 0.15), transparent 66%),
        repeating-linear-gradient(94deg, rgba(0, 0, 0, 0.16) 0 2px, transparent 2px 11px),
        repeating-linear-gradient(88deg, rgba(255, 255, 255, 0.015) 0 1px, transparent 1px 7px),
        linear-gradient(178deg, #32211700 0%, #2A1B13 12%, #190F0A 58%, #0D0805 100%);
    box-shadow: var(--ombre-table), inset 0 0 150px rgba(0, 0, 0, 0.72),
                inset 0 1px 0 rgba(255, 226, 170, 0.09);
}
.comptoir::before {
    width: 700px; height: 460px; top: -210px;
    background: radial-gradient(ellipse at 50% 0%, rgba(255, 231, 178, 0.22), transparent 62%);
}
.comptoir::after { border-color: rgba(201, 162, 39, 0.12); }

/* -- la piste de lancer ----------------------------------------------------
   Un tapis de cuir posé sur le comptoir : la piece y tombe, les deux plaques de
   pari l'encadrent, la série des tirages court en tête. */
.cuir {
    position: relative;
    width: 100%; max-width: 600px;
    padding: 13px 18px 16px;
    border-radius: 20px;
    background:
        radial-gradient(90% 60% at 50% 0%, rgba(255, 231, 178, 0.07), transparent 62%),
        repeating-linear-gradient(46deg, rgba(0, 0, 0, 0.16) 0 2px, transparent 2px 5px),
        linear-gradient(180deg, #241611 0%, #170E0A 60%, #100907 100%);
    box-shadow: inset 0 0 0 1px rgba(255, 226, 170, 0.09),
                inset 0 20px 50px -30px rgba(0, 0, 0, 1),
                0 26px 50px -34px rgba(0, 0, 0, 1);
}
/* La couture du cuir */
.cuir::before {
    content: "";
    position: absolute; inset: 8px;
    border: 1px dashed rgba(201, 162, 39, 0.22);
    border-radius: 14px;
    pointer-events: none;
}

.cuir-tete {
    position: relative; z-index: 1;
    display: flex; align-items: center; gap: 12px;
    padding: 0 4px 2px;
}
.cuir-titre {
    flex-shrink: 0;
    font-size: 9px; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase;
    color: rgba(240, 233, 220, 0.34);
}
.serie { display: flex; flex-wrap: wrap; gap: 5px; }
.serie:empty::after {
    content: "aucun pour l'instant";
    font-size: 11px; color: rgba(240, 233, 220, 0.22);
}
.jeton-serie {
    width: 21px; height: 21px; border-radius: 50%;
    display: grid; place-items: center;
    font-family: var(--chiffres); font-size: 10px; font-weight: 500;
    color: #3A2C0B;
    background: radial-gradient(circle at 34% 28%, #F6E6AE, #C9A227 58%, #7E6417);
    box-shadow: inset 0 0 0 1px rgba(110, 84, 18, 0.5);
}
.jeton-serie.face {
    color: #E8DCC0;
    background: radial-gradient(circle at 34% 28%, #46403A, #221E19 58%, #120F0C);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12);
}
.serie .jeton-serie:first-child { box-shadow: inset 0 0 0 1px rgba(255, 249, 214, 0.65), 0 0 0 2px rgba(201, 162, 39, 0.25); }
.jeton-serie.neuf { animation: jeton-serie-entre 420ms var(--ressort) both; }
@keyframes jeton-serie-entre { from { opacity: 0; transform: scale(0.4) rotate(-50deg); } }

/* Les deux plaques de pari, gravées et serties de laiton. */
.plaques {
    position: relative; z-index: 1;
    display: grid; grid-template-columns: 1fr 1fr; gap: 14px;
}
.plaque {
    display: flex; flex-direction: column; align-items: center; gap: 4px;
    padding: 10px 10px 11px;
    border: 0; border-radius: 12px;
    background: linear-gradient(180deg, #2E1D15, #1A100B 70%);
    box-shadow: inset 0 1px 0 rgba(255, 226, 170, 0.14),
                inset 0 0 0 1px rgba(201, 162, 39, 0.18),
                0 8px 18px -12px rgba(0, 0, 0, 1);
    cursor: pointer;
    transition: transform var(--rapide) var(--ressort), box-shadow var(--moyen) var(--sortie),
                background var(--moyen) var(--sortie);
}
.plaque:hover { background: linear-gradient(180deg, #3A2519, #20140D 70%); }
.plaque:active { transform: translateY(2px); }
.plaque-sceau {
    width: 30px; height: 30px; border-radius: 50%;
    display: grid; place-items: center;
    background: radial-gradient(circle at 34% 28%, #FDF3C8, #D8B444 46%, #8A6F1B);
    box-shadow: inset 0 0 0 1px rgba(110, 84, 18, 0.55), 0 2px 6px -2px rgba(0, 0, 0, 0.9);
    font-size: 15px; line-height: 1; color: #5E4710;
}
.plaque-sceau.pique::before { content: "\2660"; }
.plaque-sceau.coeur::before { content: "\2665"; }
.plaque-nom {
    font-family: var(--display); font-size: 17px; font-weight: 600;
    color: var(--creme-doux);
}
.plaque-cote {
    font-family: var(--chiffres); font-size: 11px;
    color: rgba(240, 233, 220, 0.34);
}
/* Celle sur laquelle on a misé */
.plaque[aria-pressed="true"] {
    background: linear-gradient(180deg, #3E2A17, #241609 70%);
    box-shadow: inset 0 1px 0 rgba(255, 243, 196, 0.24),
                inset 0 0 0 1px rgba(243, 220, 155, 0.55),
                0 0 22px -10px rgba(201, 162, 39, 0.8);
}
.plaque[aria-pressed="true"] .plaque-nom { color: var(--creme); }
/* Celle qui vient de sortir */
.plaque.sortie { animation: plaque-sortie 900ms var(--sortie); }
@keyframes plaque-sortie {
    0%, 100% { box-shadow: inset 0 1px 0 rgba(255, 226, 170, 0.14), inset 0 0 0 1px rgba(201, 162, 39, 0.18); }
    30%, 70% { box-shadow: inset 0 0 0 1px rgba(243, 220, 155, 0.9), 0 0 28px -6px rgba(201, 162, 39, 0.75); }
}

/* -- pièce frappée --------------------------------------------------------
   Deux faces gravées, une tranche striée faite de lames en couronne, une ombre
   portée qui suit la hauteur et un reflet sur le bois. Tout est en 3D : pendant
   le lancer on voit réellement la tranche passer, ce qu'aucun retournement
   d'image plate ne donne. */
.scene-piece {
    position: relative; z-index: 1;
    height: 248px; width: 100%;
    display: grid; place-items: center;
    perspective: 1100px;
    perspective-origin: 50% 40%;
}
/* Deux ombres : la tache large qui dit la hauteur, et le contact serré sous la
   pièce — sans lui, elle flotte. */
.ombre-piece {
    position: absolute; bottom: 40px;
    width: 152px; height: 26px; border-radius: 50%;
    background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0) 70%);
    filter: blur(6px);
}
.ombre-piece::after {
    content: "";
    position: absolute; left: 50%; top: 42%;
    width: 96px; height: 13px; margin-left: -48px;
    border-radius: 50%;
    background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.92), rgba(0, 0, 0, 0) 72%);
}

/* Le pivot : inclinaison permanente, et le reflet de la pièce sur le bois ciré.
   -webkit-box-reflect reflète l'objet 3D tel qu'il tourne ; les navigateurs qui
   ne le connaissent pas se contentent de la pièce, sans rien casser. */
.pivot {
    transform-style: preserve-3d;
    transform: rotateX(-17deg);
    -webkit-box-reflect: below 10px
        linear-gradient(transparent 58%, rgba(0, 0, 0, 0.42));
}
.piece {
    position: relative;
    width: 182px; height: 182px;
    transform-style: preserve-3d;
    will-change: transform;
}
.piece .face {
    position: absolute; inset: 0;
    border-radius: 50%;
    overflow: hidden;
    backface-visibility: hidden;
    box-shadow: inset 0 0 0 1px rgba(255, 245, 200, 0.45),
                inset 0 -12px 26px rgba(80, 60, 10, 0.5),
                inset 0 8px 18px rgba(255, 249, 214, 0.2);
}
.piece .face svg { width: 100%; height: 100%; display: block; }
.piece .avers { transform: translateZ(7px); }
.piece .revers { transform: rotateX(180deg) translateZ(7px); }

/* Reflet spéculaire : une bande claire en diagonale, comme sur du métal poli.
   Elle tourne pendant le vol, ce qui fait « rouler » la lumière sur le métal. */
.piece .brillance {
    position: absolute; inset: 0; border-radius: 50%;
    background: linear-gradient(118deg, transparent 32%, rgba(255, 252, 230, 0.55) 46%,
                rgba(255, 252, 230, 0.12) 54%, transparent 66%);
    mix-blend-mode: screen;
    pointer-events: none;
}
.scene-piece.en-vol .brillance { animation: reflet-metal 850ms linear infinite; }
@keyframes reflet-metal { to { transform: rotate(360deg); } }

.piece .legende {
    font-family: "Outfit", sans-serif; font-size: 13px; font-weight: 600; letter-spacing: 2.4px;
}
.piece .valeur-frappee {
    font-family: "Bodoni Moda", Georgia, serif; font-size: 20px; font-weight: 600; letter-spacing: 3px;
}

.tranche { position: absolute; inset: 0; transform-style: preserve-3d; }
.tranche i {
    position: absolute; left: 50%; top: 50%;
    width: 14px; height: 14px;
    margin: -7px 0 0 -7px;
    display: block;
}

/* Les deux plaquettes du pari : chacune porte la face frappée en miniature. */
.pari-faces button { gap: 9px; }
.mini-piece {
    width: 19px; height: 19px; border-radius: 50%;
    display: inline-grid; place-items: center;
    background: radial-gradient(circle at 34% 28%, #FDF3C8, #D8B444 46%, #8A6F1B);
    box-shadow: inset 0 0 0 1px rgba(110, 84, 18, 0.55);
    font-size: 10px; line-height: 1; color: #5E4710;
}
.mini-piece.pique::before { content: "\2660"; }
.mini-piece.coeur::before { content: "\2665"; }

@media (prefers-reduced-motion: reduce) {
    .scene-piece.en-vol .brillance { animation: none; }
}

/* -- roulette -- */
.scene-roulette { position: relative; width: 320px; height: 320px; display: grid; place-items: center; }
.roue-svg {
    width: 100%; height: 100%;
    filter: drop-shadow(0 26px 44px rgba(0, 0, 0, 0.85));
}
.roue-svg .plateau-roue { transform-origin: 160px 160px; }
.bille {
    position: absolute; width: 14px; height: 14px; border-radius: 50%;
    background: radial-gradient(circle at 32% 30%, #fff, #B5AE9E);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.8);
}
.numero-sorti {
    position: absolute; width: 84px; height: 84px; border-radius: 50%;
    box-shadow: 0 0 0 3px rgba(201, 162, 39, 0.75), 0 10px 26px rgba(0, 0, 0, 0.8);
    display: grid; place-items: center;
    font-family: var(--chiffres); font-size: 32px; font-weight: 600;
    background: #0B0A0E; box-shadow: inset 0 0 0 1px var(--trait-clair);
    animation: resultat-entre 420ms var(--ressort) both;
}
.numero-sorti.rouge { background: linear-gradient(170deg, #8E2F2A, #5E1B18); color: #FFE9E7; }
.numero-sorti.noir { background: linear-gradient(170deg, #22201C, #0F0E0C); color: var(--creme); }
.numero-sorti.vert { background: linear-gradient(170deg, var(--feutre-clair), var(--feutre)); color: #DFF3E9; }

/* -- dés -- */
/* -- la table de dés ---------------------------------------------------------
   Le feutre est cerné d'un rail de cuir, comme une table de craps : les dés
   ont un bord contre lequel s'arrêter, et la piste du pari est peinte dessus. */
.tapis-jeu.table-des {
    padding: 34px 40px 28px;
    box-shadow:
        var(--ombre-table),
        inset 0 0 0 14px #2A1B13,
        inset 0 0 0 15px rgba(255, 226, 170, 0.12),
        inset 0 0 0 17px rgba(0, 0, 0, 0.55),
        inset 0 0 140px 17px rgba(0, 0, 0, 0.55);
}
.table-des::after { inset: 24px; border-color: rgba(201, 162, 39, 0.18); }
.table-des .aire { gap: 14px; }

/* L'aire de lancer : la scène. La caméra est dans les cubes eux-mêmes
   (rotateX(-34deg)), la perspective ici ne fait que donner la fuite. */
.lancer-des {
    position: relative; z-index: 1;
    width: 100%; height: 210px;
    display: grid; place-items: center;
    perspective: 1100px;
    perspective-origin: 50% 30%;
}
/* Un dé : un cube de 80px, six faces. */
.de3d {
    position: absolute;
    width: 80px; height: 80px;
    transform-style: preserve-3d;
    will-change: transform;
    filter: drop-shadow(0 22px 18px rgba(0, 0, 0, 0.55));
}
.cube {
    position: absolute; inset: 0;
    transform-style: preserve-3d;
    will-change: transform;
}
.face {
    position: absolute; inset: 0;
    display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(3, 1fr);
    padding: 11px;
    border-radius: 6px;
    background:
        radial-gradient(80% 70% at 24% 20%, rgba(255, 255, 255, 0.22), transparent 62%),
        linear-gradient(150deg, #CD4438 0%, #A9291F 50%, #7E1A13 100%);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12), inset 0 0 12px rgba(0, 0, 0, 0.35);
    backface-visibility: hidden;
}
/* Les faces de côté et du dessous sont dans l'ombre : le cube a du volume même
   à l'arrêt. Le dessus (f3 au repos) reçoit la lumière. */
.face.f1 { transform: rotateY(0deg)   translateZ(40px); }
.face.f6 { transform: rotateY(180deg) translateZ(40px); }
.face.f2 { transform: rotateY(90deg)  translateZ(40px); }
.face.f5 { transform: rotateY(-90deg) translateZ(40px); }
.face.f3 { transform: rotateX(90deg)  translateZ(40px); }
.face.f4 { transform: rotateX(-90deg) translateZ(40px); }
.face i {
    place-self: center;
    width: 13px; height: 13px; border-radius: 50%;
    background: radial-gradient(circle at 40% 35%, #FFFFFF, #E0D8C6 75%);
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.6), 0 1px 0 rgba(255, 255, 255, 0.2);
    opacity: 0;
}
/* Disposition classique des points, cases 1..9 de gauche à droite et de haut en bas. */
.face[data-valeur="1"] i:nth-child(5),
.face[data-valeur="2"] i:nth-child(3), .face[data-valeur="2"] i:nth-child(7),
.face[data-valeur="3"] i:nth-child(3), .face[data-valeur="3"] i:nth-child(5), .face[data-valeur="3"] i:nth-child(7),
.face[data-valeur="4"] i:nth-child(1), .face[data-valeur="4"] i:nth-child(3), .face[data-valeur="4"] i:nth-child(7), .face[data-valeur="4"] i:nth-child(9),
.face[data-valeur="5"] i:nth-child(1), .face[data-valeur="5"] i:nth-child(3), .face[data-valeur="5"] i:nth-child(5), .face[data-valeur="5"] i:nth-child(7), .face[data-valeur="5"] i:nth-child(9),
.face[data-valeur="6"] i:nth-child(1), .face[data-valeur="6"] i:nth-child(3), .face[data-valeur="6"] i:nth-child(4), .face[data-valeur="6"] i:nth-child(6), .face[data-valeur="6"] i:nth-child(7), .face[data-valeur="6"] i:nth-child(9) {
    opacity: 1;
}
/* Les ombres au sol suivent chaque dé et pâlissent quand il s'envole. */
.ombre-de {
    position: absolute; bottom: 30px; left: 50%;
    width: 110px; height: 26px; margin-left: -55px;
    border-radius: 50%;
    background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.8), transparent 70%);
    filter: blur(5px);
    opacity: 0.75;
    pointer-events: none;
}
/* Le verdict se lit sur les dés eux-mêmes. */
.lancer-des.gagne .de3d { filter: drop-shadow(0 22px 18px rgba(0, 0, 0, 0.55)) drop-shadow(0 0 22px rgba(95, 191, 125, 0.75)); }
.lancer-des.perd .de3d { filter: drop-shadow(0 22px 18px rgba(0, 0, 0, 0.55)) saturate(0.45) brightness(0.8); }

/* --- le gobelet de cuir ------------------------------------------------------- */
.gobelet {
    position: absolute; right: 6%; top: -4px;
    width: 96px; height: 128px;
    transform-origin: 50% 92%;
    transform: translateX(180px);
    opacity: 0;
    pointer-events: none;
    filter: drop-shadow(0 24px 22px rgba(0, 0, 0, 0.6));
}
/* Le corps : un cylindre légèrement évasé, le cuir marqué de deux cerclages. */
.gobelet-corps {
    position: absolute; left: 0; right: 0; top: 8px; bottom: 6px;
    clip-path: polygon(6% 0, 94% 0, 100% 100%, 0 100%);
    background:
        linear-gradient(90deg, rgba(0, 0, 0, 0.55) 0%, rgba(0, 0, 0, 0.1) 22%, rgba(255, 255, 255, 0.14) 42%,
                        rgba(0, 0, 0, 0) 60%, rgba(0, 0, 0, 0.35) 85%, rgba(0, 0, 0, 0.65) 100%),
        repeating-linear-gradient(0deg, rgba(0, 0, 0, 0.06) 0 2px, transparent 2px 5px),
        linear-gradient(180deg, #6A3F2A 0%, #4A2A1B 50%, #2E1810 100%);
}
.gobelet-corps::before, .gobelet-corps::after {
    content: ""; position: absolute; left: 0; right: 0; height: 7px;
    background: linear-gradient(90deg, #5A4410, #F3DC9B 45%, #C9A227 60%, #5A4410);
    box-shadow: 0 1px 0 rgba(0, 0, 0, 0.6);
}
.gobelet-corps::before { top: 14px; }
.gobelet-corps::after { bottom: 14px; }
/* Le fond, une ellipse sombre. */
.gobelet-fond {
    position: absolute; left: 0; right: 0; bottom: 0; height: 14px;
    border-radius: 50%;
    background: linear-gradient(180deg, #24140C, #120906);
}
/* La bouche : l'ellipse claire du rebord, et le noir dedans. */
.gobelet-bouche {
    position: absolute; left: 6%; right: 6%; top: 0; height: 18px;
    border-radius: 50%;
    background: radial-gradient(ellipse at center, #0A0608 0 52%, #3A2318 66%, #8A5A3E 100%);
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.9), 0 0 0 1.5px rgba(255, 226, 170, 0.2);
}
/* La séquence : il entre, secoue trois fois, se renverse, verse, et ressort. */
.lancer-des.secoue .gobelet { animation: gobelet 2.6s cubic-bezier(0.3, 0.6, 0.3, 1) both; }
@keyframes gobelet {
    0%   { transform: translateX(180px) rotate(0deg); opacity: 0; }
    10%  { transform: translateX(0) rotate(0deg); opacity: 1; }
    16%  { transform: translateX(0) rotate(-16deg); }
    22%  { transform: translateX(0) rotate(16deg); }
    28%  { transform: translateX(0) rotate(-16deg); }
    33%  { transform: translateX(0) rotate(0deg); }
    42%  { transform: translateX(-24px) rotate(-122deg) translateY(12px); opacity: 1; }
    62%  { transform: translateX(-24px) rotate(-122deg) translateY(12px); opacity: 1; }
    80%  { transform: translateX(180px) rotate(-60deg); opacity: 0; }
    100% { transform: translateX(180px) rotate(0deg); opacity: 0; }
}

/* La somme, en chiffres pleins : « 3 + 4 » en petit, le total en grand. */
.cadran { text-align: center; width: min(520px, 100%); }
.somme { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.somme-detail {
    font-family: var(--chiffres); font-size: 14px; font-variant-numeric: tabular-nums;
    color: var(--creme-faible);
    min-height: 18px;
}
.somme-total {
    font-family: var(--chiffres); font-size: 54px; font-weight: 500; line-height: 1;
    font-variant-numeric: tabular-nums; letter-spacing: -0.03em;
    color: var(--creme);
    transition: color var(--moyen) var(--sortie);
}
.somme.gagne .somme-total { color: var(--gain); }
.somme.perd .somme-total { color: var(--perte); }

/* --- les paris peints sur le feutre ------------------------------------------ */
.zones {
    position: relative; z-index: 1;
    display: grid; grid-template-columns: 1.4fr 1fr 1.4fr; gap: 10px;
    width: min(700px, 100%);
}
.zone {
    position: relative;
    display: flex; flex-direction: column; align-items: center; gap: 2px;
    padding: 14px 12px 12px;
    border: 1.5px solid rgba(240, 233, 220, 0.42); border-radius: 12px;
    background: rgba(0, 0, 0, 0.12);
    color: rgba(240, 233, 220, 0.8);
    cursor: pointer;
    /* Peint sur le feutre : les traits ont un léger flou et pas d'ombre. */
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.25);
    transition: background var(--rapide) var(--sortie), border-color var(--rapide) var(--sortie),
                transform var(--rapide) var(--ressort), box-shadow var(--moyen) var(--sortie);
}
.zone:hover { background: rgba(255, 255, 255, 0.05); transform: translateY(-2px); }
.zone.sept { border-color: rgba(243, 220, 155, 0.6); }
.zone-nom { font-family: var(--display); font-size: 19px; font-weight: 600; letter-spacing: 0.02em; color: var(--creme); }
.zone-detail { font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; color: rgba(240, 233, 220, 0.55); }
.zone-cote { margin-top: 4px; font-family: var(--chiffres); font-size: 14px; font-weight: 600; color: var(--laiton-clair); }
/* La zone jouée : un jeton posé dessus. */
.zone[aria-pressed="true"] {
    border-color: var(--laiton-clair);
    background: rgba(201, 162, 39, 0.16);
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.25), 0 0 30px -6px rgba(201, 162, 39, 0.7);
}
.zone[aria-pressed="true"]::after {
    content: ""; position: absolute; right: 10px; top: 10px; width: 22px; height: 22px; border-radius: 50%;
    background: repeating-conic-gradient(var(--laiton) 0 30deg, #2A2214 0 60deg);
    box-shadow: inset 0 0 0 3px var(--nuit), inset 0 0 0 4px rgba(243, 220, 155, 0.8), 0 3px 6px rgba(0, 0, 0, 0.7);
}
/* La zone qui sort s'allume, et clignote deux fois. */
.zone.sortie { animation: zone-sortie 1.2s ease-out both; border-color: #8AD6A5; }
@keyframes zone-sortie {
    0%, 40%, 80% { background: rgba(95, 191, 125, 0.35); box-shadow: 0 0 40px -4px rgba(95, 191, 125, 0.8); }
    20%, 60%, 100% { background: rgba(95, 191, 125, 0.12); box-shadow: 0 0 20px -6px rgba(95, 191, 125, 0.4); }
}
.table-des .aire { gap: 12px; }
@media (max-width: 720px) { .zones { grid-template-columns: 1fr; } }

/* -- crash : le ciel de nuit ----------------------------------------------
   Pas de feutre ici : la fusée décolle dans un ciel étoilé, au-dessus d'une
   lueur d'horizon. */
.tapis-jeu.ciel {
    padding: 22px 26px 20px;
    background:
        radial-gradient(1.5px 1.5px at 12% 22%, rgba(255, 255, 255, 0.55), transparent 60%),
        radial-gradient(1px 1px at 28% 68%, rgba(255, 255, 255, 0.4), transparent 60%),
        radial-gradient(1.5px 1.5px at 41% 14%, rgba(255, 255, 255, 0.5), transparent 60%),
        radial-gradient(1px 1px at 57% 44%, rgba(255, 255, 255, 0.35), transparent 60%),
        radial-gradient(1.5px 1.5px at 66% 78%, rgba(255, 255, 255, 0.45), transparent 60%),
        radial-gradient(1px 1px at 79% 26%, rgba(255, 255, 255, 0.4), transparent 60%),
        radial-gradient(1.5px 1.5px at 88% 58%, rgba(255, 255, 255, 0.5), transparent 60%),
        radial-gradient(1px 1px at 22% 88%, rgba(255, 255, 255, 0.3), transparent 60%),
        radial-gradient(1px 1px at 93% 12%, rgba(255, 255, 255, 0.35), transparent 60%),
        radial-gradient(90% 55% at 50% 112%, rgba(201, 162, 39, 0.14), transparent 62%),
        linear-gradient(180deg, #06070F 0%, #0A0C1A 55%, #12111C 100%);
    box-shadow: var(--ombre-table), inset 0 0 0 1px rgba(255, 255, 255, 0.05),
                inset 0 0 120px rgba(0, 0, 0, 0.6);
}
.ciel::before { display: none; }
.ciel::after { border-color: rgba(255, 255, 255, 0.06); }
.ciel .aire { gap: 10px; min-height: 0; }

.vol { width: 100%; max-width: 720px; display: flex; flex-direction: column; gap: 10px; }

/* Les derniers points de crash : rouge quand la courbe a cassé tôt, vert
   ensuite, or pour les envolées. */
.vol-historique { display: flex; flex-wrap: wrap; gap: 6px; min-height: 22px; }
.crash-tag {
    padding: 3px 9px;
    border-radius: 6px;
    font-family: var(--chiffres); font-size: 11.5px; font-variant-numeric: tabular-nums;
    background: rgba(255, 255, 255, 0.05);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06);
    color: var(--creme-doux);
}
.crash-tag.bas   { color: #E48B84; background: rgba(196, 85, 77, 0.14); }
.crash-tag.moyen { color: #8AD6A5; background: rgba(95, 191, 125, 0.13); }
.crash-tag.haut  { color: var(--laiton-clair); background: rgba(201, 162, 39, 0.16); }
.crash-tag.neuf  { animation: ligne-entre 420ms var(--ressort) both; }

/* L'écran de vol : le cadre dans lequel la courbe et la fusée évoluent. */
.vol-ecran {
    position: relative;
    width: 100%; aspect-ratio: 720 / 300;
    border-radius: 12px;
    overflow: hidden;
    background: rgba(0, 0, 0, 0.28);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06);
}
.courbe { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.courbe .grille-fond line { stroke: rgba(255, 255, 255, 0.055); stroke-width: 1; }

/* L'axe des multiplicateurs, à gauche. */
.axe-y { position: absolute; left: 8px; top: 0; bottom: 0; width: 48px; pointer-events: none; }
.axe-y span {
    position: absolute; left: 0; transform: translateY(-50%);
    font-family: var(--chiffres); font-size: 10px; font-variant-numeric: tabular-nums;
    color: rgba(240, 233, 220, 0.3);
}

/* La lecture : l'état du vol en petit, le multiplicateur en grand. */
.vol-lecture {
    position: absolute; left: 0; right: 0; top: 14px; z-index: 2;
    display: flex; flex-direction: column; align-items: center; gap: 2px;
    pointer-events: none;
}
.vol-etat {
    font-size: 9.5px; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase;
    color: var(--creme-faible);
}
.multiplicateur {
    font-family: var(--chiffres); font-variant-numeric: tabular-nums;
    font-size: 54px; font-weight: 600; line-height: 1; letter-spacing: -0.035em;
    color: var(--creme);
    text-shadow: 0 0 30px rgba(240, 233, 220, 0.25);
    transition: color var(--moyen) var(--sortie);
}
.vol-lecture.sorti .multiplicateur { color: var(--gain); text-shadow: 0 0 30px rgba(95, 191, 125, 0.45); }
.vol-lecture.sorti .vol-etat { color: var(--gain); }
.vol-lecture.casse .multiplicateur { color: var(--perte); text-shadow: 0 0 30px rgba(196, 85, 77, 0.5); }
.vol-lecture.casse .vol-etat { color: var(--perte); }

/* La fusée : sa flamme vacille tant qu'elle vole, elle disparaît au crash. */
.fusee .flamme { transform-origin: -9px 0; }
.vol.en-vol .fusee .flamme { animation: flamme-fusee 90ms linear infinite alternate; }
@keyframes flamme-fusee { from { transform: scaleX(0.8) scaleY(0.85); } to { transform: scaleX(1.25) scaleY(1.1); } }
.vol:not(.en-vol):not(.casse) .fusee .flamme { opacity: 0.35; }
.fusee.detruite { opacity: 0; transition: opacity 80ms linear; }

/* La sortie du joueur, marquée sur la courbe. */
.repere-sortie line { stroke: rgba(95, 191, 125, 0.55); stroke-width: 1; stroke-dasharray: 5 5; }
.repere-sortie[hidden] { display: none; }
.etiquette-sortie {
    position: absolute; right: 10px; transform: translateY(-50%);
    padding: 3px 9px;
    border-radius: 6px;
    background: rgba(95, 191, 125, 0.16);
    box-shadow: inset 0 0 0 1px rgba(95, 191, 125, 0.4);
    font-family: var(--chiffres); font-size: 11px; font-variant-numeric: tabular-nums;
    color: #8AD6A5;
    pointer-events: none;
}
.etiquette-sortie[hidden] { display: none; }

/* L'explosion : un éclair, puis seize étincelles qui partent dans toutes les
   directions et s'éteignent. */
.explosion { position: absolute; width: 0; height: 0; z-index: 3; pointer-events: none; }
.explosion[hidden] { display: none; }
.eclair {
    position: absolute; left: -30px; top: -30px; width: 60px; height: 60px;
    border-radius: 50%;
    background: radial-gradient(circle, #FFF6DF 0%, #FFB347 30%, rgba(196, 85, 77, 0) 70%);
    animation: eclair 420ms var(--sortie) both;
}
@keyframes eclair { from { transform: scale(0.2); opacity: 1; } to { transform: scale(2.4); opacity: 0; } }
.etincelle {
    position: absolute; left: -3px; top: -3px; width: 6px; height: 6px;
    border-radius: 50%;
    background: #FFD27A;
    box-shadow: 0 0 8px #FFB347;
    animation: etincelle calc(520ms * var(--r)) var(--sortie) both;
}
@keyframes etincelle {
    from { transform: rotate(var(--a)) translateX(0) scale(1.2); opacity: 1; }
    to   { transform: rotate(var(--a)) translateX(var(--d)) scale(0.3); opacity: 0; }
}
/* Pendant le vol, le bouton de lancement devient le bouton pour encaisser :
   vert, avec le gain du moment qui grimpe dedans. */
.bouton-mise.encaisser {
    background: linear-gradient(180deg, #7FD39A, #4FA96C 55%, #2F7A49);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.45), inset 0 -2px 0 rgba(0, 0, 0, 0.3),
                0 10px 26px -10px rgba(95, 191, 125, 0.8);
    color: #08170D;
    animation: encaisser-pulse 900ms ease-in-out infinite;
}
.bouton-mise.encaisser:disabled { animation: none; }
@keyframes encaisser-pulse { 50% { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.45), inset 0 -2px 0 rgba(0, 0, 0, 0.3), 0 10px 30px -6px rgba(95, 191, 125, 0.95); } }
.bouton-mise .gain-vif { font-family: var(--chiffres); font-variant-numeric: tabular-nums; margin-left: 8px; }

@media (prefers-reduced-motion: reduce) {
    .vol.en-vol .fusee .flamme { animation: none; }
    .bouton-mise.encaisser { animation: none; }
}

/* =============================================================================
   Annonce de gain, jetons, messages
   ============================================================================= */
.annonce {
    position: fixed; inset: 0; z-index: 80;
    display: grid; place-items: center;
    background: rgba(5, 4, 8, 0.72);
    backdrop-filter: blur(3px);
    animation: annonce-fond 220ms var(--sortie) both;
}
.annonce[hidden] { display: none; }
@keyframes annonce-fond { from { opacity: 0; } }
.annonce-halo {
    position: absolute; width: 900px; height: 900px;
    background: conic-gradient(from 0deg, transparent 0 8%, rgba(243, 220, 155, 0.16) 9% 11%,
                transparent 12% 20%, rgba(243, 220, 155, 0.16) 21% 23%, transparent 24% 33%,
                rgba(243, 220, 155, 0.16) 34% 36%, transparent 37% 50%,
                rgba(243, 220, 155, 0.16) 51% 53%, transparent 54% 66%,
                rgba(243, 220, 155, 0.16) 67% 69%, transparent 70% 83%,
                rgba(243, 220, 155, 0.16) 84% 86%, transparent 87% 100%);
    /* Les rayons doivent se deviner, pas se découper : on les estompe vers
       l'extérieur et on les floute légèrement. */
    opacity: 0.55;
    filter: blur(14px);
    -webkit-mask-image: radial-gradient(circle, #000 12%, transparent 62%);
    mask-image: radial-gradient(circle, #000 12%, transparent 62%);
    animation: rayons 9s linear infinite;
}
@keyframes rayons { to { transform: rotate(360deg); } }
.annonce-carte {
    position: relative; text-align: center; padding: 40px 64px;
    border-radius: 24px;
    background: linear-gradient(170deg, rgba(34, 29, 20, 0.96), rgba(16, 13, 9, 0.96));
    box-shadow: 0 0 0 1px rgba(201, 162, 39, 0.5), 0 40px 90px -30px rgba(0, 0, 0, 1);
    animation: annonce-carte 520ms var(--ressort) both;
}
@keyframes annonce-carte { from { opacity: 0; transform: scale(0.86) translateY(20px); } }
.annonce-titre {
    display: block; font-family: var(--display); font-style: italic;
    font-size: 22px; color: var(--laiton-clair); letter-spacing: 0.02em;
}
.annonce-montant {
    display: block; margin: 6px 0 4px;
    font-size: clamp(48px, 9vw, 86px); font-weight: 600; line-height: 1;
    color: var(--creme);
    text-shadow: 0 0 40px rgba(243, 220, 155, 0.35);
}
.annonce-detail { display: block; color: var(--creme-faible); font-size: 13px; }

.jeton-vol {
    position: fixed; z-index: 85; width: 22px; height: 22px; border-radius: 50%;
    background: repeating-conic-gradient(var(--laiton) 0 24deg, #241D12 0 48deg);
    box-shadow: inset 0 0 0 4px var(--laiton-clair), 0 4px 12px rgba(0, 0, 0, 0.7);
    pointer-events: none;
}

.toast {
    position: fixed; left: 50%; bottom: calc(var(--bande) + 22px); z-index: 70;
    padding: 13px 24px; border-radius: 12px;
    background: linear-gradient(170deg, var(--surface-haute), var(--surface));
    border: 1px solid var(--trait-clair); box-shadow: var(--ombre-carte);
    font-size: 13.5px;
    opacity: 0; transform: translate(-50%, 16px); pointer-events: none;
    transition: opacity var(--moyen) var(--sortie), transform var(--moyen) var(--ressort);
}
.toast.visible { opacity: 1; transform: translate(-50%, 0); }
.toast.erreur { border-color: rgba(196, 85, 77, 0.6); color: #F2BBB7; }
.toast.jackpot { border-color: var(--laiton); color: var(--laiton-clair); }

.bandeau {
    display: flex; align-items: center; gap: 12px;
    padding: 14px 18px; margin-bottom: 20px;
    border-radius: 12px; border-left: 2px solid var(--laiton);
    background: linear-gradient(90deg, rgba(201, 162, 39, 0.12), transparent);
    font-size: 13.5px;
}
.bandeau.alerte { border-left-color: var(--perte); background: linear-gradient(90deg, rgba(196, 85, 77, 0.14), transparent); }
.vide { padding: 22px 10px; text-align: center; color: var(--creme-faible); font-size: 12.5px; }
.vide .motif { display: block; margin-bottom: 8px; font-size: 20px; letter-spacing: 0.4em; color: rgba(201, 162, 39, 0.35); }

table.tableau { width: 100%; border-collapse: collapse; font-size: 13px; }
table.tableau th {
    text-align: left; padding: 11px 12px;
    font-size: 10px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase;
    color: var(--creme-faible); border-bottom: 1px solid var(--trait);
}
table.tableau td { padding: 11px 12px; border-bottom: 1px solid rgba(255, 255, 255, 0.035); }
table.tableau tbody tr:hover { background: rgba(255, 255, 255, 0.025); }

.page { width: min(1100px, 100%); margin: 0 auto; }
.page h1 { font-family: var(--display); font-size: 30px; font-weight: 600; margin: 0 0 20px; }

/* =============================================================================
   Entrée (hors salle)
   ============================================================================= */
.tapis {
    position: fixed; inset: 0; z-index: 0; pointer-events: none;
    background:
        radial-gradient(900px 520px at 50% -10%, rgba(201, 162, 39, 0.12), transparent 66%),
        radial-gradient(1100px 760px at 50% 112%, rgba(18, 49, 39, 0.55), transparent 62%);
}
body:has(.tapis) { overflow: auto; }
body:has(.tapis) .scene { height: 100dvh; display: grid; place-items: center; }
.portail { position: relative; z-index: 2; max-width: 460px; text-align: center; }
.portail h1 {
    margin: 0 0 10px; font-family: var(--display); font-size: 48px; font-weight: 600;
    line-height: 1.02; letter-spacing: -0.03em;
}
.portail h1 em {
    font-style: italic;
    background: linear-gradient(150deg, var(--laiton-clair), var(--laiton-sombre));
    -webkit-background-clip: text; background-clip: text; color: transparent;
}
.filets-deco { display: flex; align-items: center; gap: 14px; justify-content: center; margin: 20px 0; }
.filets-deco::before, .filets-deco::after {
    content: ""; height: 1px; width: 70px; background: linear-gradient(90deg, transparent, rgba(201, 162, 39, 0.6));
}
.filets-deco::after { background: linear-gradient(90deg, rgba(201, 162, 39, 0.6), transparent); }
.filets-deco span { color: rgba(201, 162, 39, 0.7); letter-spacing: 0.4em; font-size: 12px; }
.bouton-discord {
    display: inline-flex; align-items: center; gap: 10px;
    margin-top: 26px; padding: 15px 28px; border-radius: 12px;
    background: #5865F2; color: #fff; font-weight: 600; font-size: 14.5px;
    box-shadow: 0 16px 34px -18px rgba(88, 101, 242, 0.95);
    transition: transform var(--rapide) var(--ressort);
}
.bouton-discord:hover { transform: translateY(-2px); }
.retour {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 9px 15px; border-radius: 999px; border: 1px solid var(--trait-clair);
    font-size: 12.5px; color: var(--creme-doux);
    transition: all var(--rapide) var(--sortie);
}
.retour:hover { border-color: var(--laiton); color: var(--laiton-clair); }

/* =============================================================================
   Réglages d'accessibilité
   ============================================================================= */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
    .bande-piste { animation: none; }
}

@media (max-width: 720px) {
    :root { --rail: 68px; }
    .rail-table .rail-nom { display: none; }
    .profil-nom { display: none; }
    .scene { padding: 18px 14px; }
}

/* =============================================================================
   Pages secondaires (portefeuille, classement, équité) : mêmes surfaces que la
   salle, sans le décor de table.
   ============================================================================= */
.carte {
    padding: 20px;
    border-radius: 18px;
    background: linear-gradient(180deg, var(--surface-haute), var(--surface));
    box-shadow: var(--ombre-carte);
}
.fil-ariane { display: flex; align-items: center; gap: 16px; margin-bottom: 22px; }
.fil-ariane h1 {
    margin: 0; font-family: var(--display); font-size: 30px; font-weight: 600; letter-spacing: -0.02em;
}
.deux-colonnes { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 20px; align-items: start; }
@media (max-width: 1080px) { .deux-colonnes { grid-template-columns: 1fr; } }
.scene > .fil-ariane, .scene > .carte, .scene > .deux-colonnes,
.scene > .grille-tables, .scene > .bandeau { width: min(1180px, 100%); margin-left: auto; margin-right: auto; }

/* =============================================================================
   Roulette : la roue et le tapis de mise, tous deux posés sur le feutre.
   ============================================================================= */
/* Sur un grand écran, la roue se place à gauche et le tapis à sa droite, comme au
   bout d'une vraie table. Deux colonnes, centrées l'une sur l'autre : le chrono
   vit désormais autour de la roue, plus rien ne décale les deux blocs. */
.roulette-scene {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    justify-items: center;
    gap: 46px;
    width: 100%;
}
.roulette-scene .colonne-roue {
    position: relative;
    display: flex; flex-direction: column; align-items: center;
}
/* La pastille du croupier est posée SOUS la roue, hors du flux : sinon elle
   allonge la colonne et la roue se retrouve décalée vers le haut par rapport au
   tapis. Avec `position: absolute`, la colonne fait exactement la hauteur de la
   roue et les deux blocs s'alignent au pixel. */
.roulette-scene .annonce-tour {
    position: absolute;
    top: 100%; left: 50%;
    transform: translate(-50%, 30px);
    white-space: nowrap;
}
.roulette-scene .scene-roulette { width: 320px; height: 320px; }

/* En dessous de 1450 px, la roue et le tapis côte à côte comprimeraient le drap
   (cases sous 40 px, libellés qui passent à la ligne) : on empile. */
@media (max-width: 1450px) {
    .roulette-scene { grid-template-columns: 1fr; gap: 28px; }
    .roulette-scene .scene-roulette { width: 280px; height: 280px; }
    /* Empilé, plus rien ne justifie de sortir la pastille du flux : hors flux elle
       passerait derrière le tapis placé juste en dessous. */
    .roulette-scene .annonce-tour {
        position: static; transform: none; margin-top: 16px;
    }
}
.roulette-scene .numero-sorti { width: 76px; height: 76px; font-size: 27px; }

/* Le tapis : un drap de feutre imprimé, pas une grille d'interface. Les traits
   sont peints en blanc cassé, les cases des numéros sont teintes dans la masse, et
   le tissu transparaît partout ailleurs. */
.tapis-mises {
    position: relative;
    display: grid;
    grid-template-columns: 44px repeat(12, minmax(0, 1fr)) 58px;
    grid-template-rows: repeat(3, 48px) 42px 42px;
    gap: 0;
    width: 100%;
    max-width: 920px;
    padding: 14px;
    border-radius: 6px;
    background:
        repeating-linear-gradient(46deg, rgba(255, 255, 255, 0.014) 0 3px, transparent 3px 7px),
        radial-gradient(120% 140% at 50% 0%, rgba(58, 130, 104, 0.35), transparent 70%),
        rgba(8, 32, 25, 0.55);
    box-shadow: inset 0 0 0 2px rgba(246, 241, 230, 0.45),
                inset 0 0 0 5px rgba(8, 32, 25, 0.6),
                inset 0 0 0 6px rgba(246, 241, 230, 0.18),
                inset 0 0 60px rgba(0, 0, 0, 0.55);
}

.case {
    position: relative;
    display: grid; place-items: center;
    margin: -0.5px;                       /* les traits se superposent, comme peints */
    border: 1px solid rgba(246, 241, 230, 0.42);
    border-radius: 0;
    background: transparent;
    color: #F6F1E6;
    font-family: "Montserrat", var(--ui);
    font-size: 15px; font-weight: 600; letter-spacing: 0.01em;
    line-height: 1;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
    cursor: pointer;
    transition: background var(--rapide) var(--sortie), box-shadow var(--rapide) var(--sortie);
}
.case:hover { background: rgba(246, 241, 230, 0.1); }
.case:active { background: rgba(246, 241, 230, 0.16); }

/* Cases teintes : le rouge et le noir d'un vrai drap, matés par le tissu. */
.case.rouge { background: linear-gradient(175deg, #9E3A33, #77241F); }
.case.noir { background: linear-gradient(175deg, #1C1A16, #0C0B09); }
.case.rouge:hover { background: linear-gradient(175deg, #B4443C, #8A2C26); }
.case.noir:hover { background: linear-gradient(175deg, #272420, #141310); }
.case.zero {
    background: linear-gradient(175deg, #17563F, #0D3529);
    font-size: 18px;
}

.case.exterieure {
    font-size: 12.5px; font-weight: 600; letter-spacing: 0.06em;
    color: rgba(246, 241, 230, 0.9);
    text-transform: uppercase;
}
.case.verticale {
    font-size: 9.5px; letter-spacing: 0.1em;
    writing-mode: vertical-rl; transform: rotate(180deg);
}

/* Rouge et Noir sont des losanges peints, comme sur les draps français. */
/* Le libellé disparaît derrière le losange, mais `text-shadow` continuait de
   dessiner un texte fantôme : on coupe les deux. */
.case.losange { color: transparent; text-shadow: none; }
.case.losange::before {
    content: "";
    width: 24px; height: 24px;
    transform: rotate(45deg);
    border: 1px solid rgba(246, 241, 230, 0.75);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.5);
}
.case.losange.rouge { background: transparent; }
.case.losange.noir { background: transparent; }
.case.losange.rouge::before { background: linear-gradient(160deg, #B4443C, #7C2621); }
.case.losange.noir::before { background: linear-gradient(160deg, #26231E, #0C0B09); }
.case.losange:hover { background: rgba(246, 241, 230, 0.08); }

.case.choisie {
    box-shadow: inset 0 0 0 2px var(--laiton-clair), 0 0 20px rgba(243, 220, 155, 0.3);
    z-index: 2;
}
.case.misee { box-shadow: inset 0 0 0 1px rgba(243, 220, 155, 0.5); }
.case.sortie {
    z-index: 3;
    box-shadow: inset 0 0 0 2px #FFF6DF, 0 0 26px rgba(255, 246, 223, 0.55);
    animation: case-sortie 1.6s var(--sortie);
}
@keyframes case-sortie {
    0%, 100% { filter: brightness(1); }
    30% { filter: brightness(1.9); }
    60% { filter: brightness(1.2); }
}

/* --- jetons posés sur le tapis --------------------------------------------
   Mêmes jetons que dans le râteau : tranche à encoches, face claire, ombre portée
   sur le drap. Ils s'empilent, le plus récent au-dessus. */
.pile-jetons {
    position: absolute; z-index: 4;
    width: 38px; height: 38px;
    margin: -19px 0 0 -19px;
    pointer-events: none;
    transition: left var(--moyen) var(--ressort), top var(--moyen) var(--ressort);
}
.pile-jetons .disque {
    position: absolute; left: 0;
    width: 38px; height: 38px; border-radius: 50%;
    background: repeating-conic-gradient(var(--jeton-fond) 0 22.5deg,
                                         var(--jeton-encoche) 0 45deg);
    box-shadow: 0 3px 7px rgba(0, 0, 0, 0.7), inset 0 0 0 1px rgba(0, 0, 0, 0.35);
}
.pile-jetons .disque::after {
    content: "";
    position: absolute; inset: 6px; border-radius: 50%;
    background: radial-gradient(circle at 36% 30%, var(--jeton-face-clair), var(--jeton-face));
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.28);
}
.pile-jetons .valeur-pile {
    position: absolute; left: 0; width: 38px; height: 38px;
    display: grid; place-items: center;
    z-index: 2;
    font-family: "Montserrat", var(--ui);
    font-size: 11.5px; font-weight: 700; letter-spacing: -0.01em;
    color: var(--jeton-texte, #241C05);
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.25);
}
/* Le dessus de pile donne sa couleur au texte du montant. */
.pile-jetons .disque.v0 ~ .valeur-pile { color: #2A2620; }
.pile-jetons .disque.v5 ~ .valeur-pile { color: #241C05; }
.pile-jetons .disque.v1 ~ .valeur-pile,
.pile-jetons .disque.v2 ~ .valeur-pile,
.pile-jetons .disque.v3 ~ .valeur-pile,
.pile-jetons .disque.v4 ~ .valeur-pile { color: #FFF6E8; }

/* Mêmes familles de couleurs que le râteau. */
.pile-jetons .disque.v0 { --jeton-fond: #6E6A62; --jeton-encoche: #F4F0E6; --jeton-face: #E8E2D4; --jeton-face-clair: #FFFDF6; }
.pile-jetons .disque.v1 { --jeton-fond: #8E2F2A; --jeton-encoche: #F0D9D6; --jeton-face: #A8433C; --jeton-face-clair: #C96A62; }
.pile-jetons .disque.v2 { --jeton-fond: #1F5A47; --jeton-encoche: #DCEFE7; --jeton-face: #2C7259; --jeton-face-clair: #4A9C7C; }
.pile-jetons .disque.v3 { --jeton-fond: #27456E; --jeton-encoche: #DAE5F2; --jeton-face: #365B8C; --jeton-face-clair: #5480B8; }
.pile-jetons .disque.v4 { --jeton-fond: #23201B; --jeton-encoche: #CFC9BC; --jeton-face: #33302A; --jeton-face-clair: #4D4940; }
.pile-jetons .disque.v5 { --jeton-fond: #7E6417; --jeton-encoche: #F7EDCB; --jeton-face: #C9A227; --jeton-face-clair: #F3DC9B; }

.pile-jetons.tombe { animation: jeton-tombe 340ms var(--ressort); }
@keyframes jeton-tombe {
    0% { transform: translateY(-30px) scale(1.2) rotate(-16deg); opacity: 0.55; }
    70% { transform: translateY(3px) scale(0.97) rotate(3deg); opacity: 1; }
    100% { transform: none; }
}
.pile-jetons.payee { animation: pile-payee 900ms var(--sortie) 2; }
@keyframes pile-payee {
    50% { transform: translateY(-7px) scale(1.1); filter: brightness(1.35); }
}
.pile-jetons.ramassee { animation: pile-ramassee 500ms var(--sortie) forwards; }
@keyframes pile-ramassee {
    to { transform: translate(-46px, -34px) scale(0.45) rotate(-28deg); opacity: 0; }
}
.gain-pile {
    position: absolute; left: 50%; top: -24px; transform: translateX(-50%);
    padding: 2px 9px; border-radius: 999px;
    background: rgba(16, 13, 9, 0.92);
    color: var(--gain); font-family: "Montserrat", var(--ui);
    font-size: 11px; font-weight: 700; white-space: nowrap;
    animation: gain-monte 2.4s var(--sortie) forwards;
}
@keyframes gain-monte {
    0% { opacity: 0; transform: translate(-50%, 6px); }
    12% { opacity: 1; transform: translate(-50%, 0); }
    80% { opacity: 1; }
    100% { opacity: 0; transform: translate(-50%, -12px); }
}

/* Rappel de la mise dans la console */
.mise-posee {
    display: flex; align-items: center; gap: 10px;
    height: var(--h-controle);
    padding: 0 14px;
    border: 1px solid var(--trait-clair); border-radius: 11px;
    background: #0B0A0E;
    font-size: 13.5px;
}
.pastille-mise {
    width: 26px; height: 26px; border-radius: 8px;
    display: grid; place-items: center;
    background: rgba(255, 255, 255, 0.07);
    font-family: var(--chiffres); font-size: 12px; color: var(--creme-doux);
}
.pastille-mise.rouge { background: #8E2F2A; color: #FFE9E7; }
.pastille-mise.noir { background: #1E1B16; color: var(--creme); }
.mise-posee .cote { margin-left: auto; font-family: var(--chiffres); color: var(--laiton-clair); }

@media (max-width: 900px) {
    .tapis-mises { grid-template-columns: 28px repeat(12, minmax(0, 1fr)) 40px; }
    .case { font-size: 11px; }
    .case.exterieure { font-size: 9.5px; }
}

/* --- le bord de table : rail à jetons, caisse et gestes -------------------- */
/* Console de la roulette : ni champ de mise ni bouton de lancement — le râteau
   fait la mise, la minuterie lance la bille. */
.console-tapis { grid-template-columns: minmax(0, 1fr) !important; gap: 14px !important; }
.console-tapis .poste:first-of-type, .console-tapis .poste:last-of-type { display: none; }
.console-tapis .poste:not(:first-of-type):not(:last-of-type) { display: flex; }

/* Le bord de la table d'une seule pièce : les jetons à gauche, la caisse au
   bout. Un creux sombre, un contour discret, rien de plus. */
.poste-rateau {
    flex-direction: row !important;
    align-items: center;
    gap: 18px;
    flex-wrap: wrap;
    padding: 8px 14px;
    border-radius: 12px;
    background: var(--creux);
    border: 1px solid var(--bord);
}
.gorge-titre {
    flex-shrink: 0;
    padding-right: 16px;
    border-right: 1px solid var(--bord);
    font-size: 10.5px; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase;
    color: var(--creme-faible);
}

.caisse {
    display: flex; align-items: stretch; gap: 8px;
    flex: 0 1 auto; margin-left: auto;
    padding-left: 16px;
    border-left: 1px solid var(--bord);
}
.gestes { display: flex; flex-direction: column; gap: 6px; }
.geste {
    flex: 1;
    min-width: 104px;
    padding: 0 16px;
    border: 1px solid var(--bord); border-radius: 8px;
    background: var(--relief);
    font-family: var(--ui);
    font-size: 11px; font-weight: 500; letter-spacing: 0.06em;
    color: var(--creme-doux);
    cursor: pointer;
    transition: background var(--rapide) var(--sortie), color var(--rapide) var(--sortie),
                border-color var(--rapide) var(--sortie), transform var(--rapide) var(--ressort);
}
.geste:hover:not(:disabled) {
    background: rgba(255, 255, 255, 0.08); border-color: var(--bord-fort); color: var(--creme);
}
.geste:active:not(:disabled) { transform: translateY(1px); }
.geste:disabled { opacity: 0.3; cursor: default; }

/* Le râteau : des jetons alignés sur la même ligne que le reste de la console.
   Chaque jeton a une face claire au centre — sans elle, la valeur se perd dans le
   motif de la tranche et devient illisible. */
.rateau {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1 1 260px; min-width: 0;
    height: 58px;
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
    /* Marge intérieure indispensable : le jeton sélectionné grossit et gagne un
       anneau de laiton ; sans elle, le premier et le dernier sont rognés par le
       bord de la gorge. */
    padding: 6px 9px;
}
.rateau::-webkit-scrollbar { display: none; }

.jeton-rateau {
    position: relative;
    flex: 0 0 auto;
    width: 44px; height: 44px; border-radius: 50%;
    border: none; padding: 0;
    display: grid; place-items: center;
    /* Tranche : alternance de la couleur du jeton et des encoches claires. */
    background: repeating-conic-gradient(var(--jeton-fond) 0 22.5deg,
                                         var(--jeton-encoche) 0 45deg);
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.55);
    cursor: pointer;
    transition: transform var(--rapide) var(--ressort), box-shadow var(--rapide) var(--sortie);
}
/* La face, où se lit la valeur. */
.jeton-rateau::before {
    content: "";
    position: absolute; inset: 7px;
    border-radius: 50%;
    background: radial-gradient(circle at 36% 30%, var(--jeton-face-clair), var(--jeton-face));
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.25);
}
/* Montserrat : bien plus lisible qu'un chiffre mono à cette taille, et la taille
   s'adapte à la longueur pour que « 250 » ou « 5k » remplissent la face sans
   toucher la tranche. */
.jeton-rateau .valeur {
    position: relative; z-index: 1;
    font-family: "Montserrat", var(--ui);
    font-weight: 700; letter-spacing: -0.01em;
    color: var(--jeton-texte);
    text-shadow: 0 1px 0 rgba(0, 0, 0, 0.18);
}
.jeton-rateau .valeur.l1, .jeton-rateau .valeur.l2 { font-size: 13px; }
.jeton-rateau .valeur.l3 { font-size: 11.5px; }
.jeton-rateau .valeur.l4 { font-size: 10px; }
.jeton-rateau .valeur.l5 { font-size: 9px; }
/* Sélection : un anneau doré et un léger grossissement — surtout pas de décalage
   vertical, qui casserait l'alignement de toute la rangée. */
.jeton-rateau[aria-pressed="true"] {
    transform: scale(1.09);
    box-shadow: 0 0 0 2px rgba(240, 233, 220, 0.85), 0 6px 16px rgba(0, 0, 0, 0.7);
}
.jeton-rateau:hover { transform: scale(1.05); }
.jeton-rateau[aria-pressed="true"]:hover { transform: scale(1.11); }

/* Couleurs classiques d'un râteau de casino. */
.jeton-rateau.v0 { --jeton-fond: #6E6A62; --jeton-encoche: #F4F0E6; --jeton-face: #E8E2D4; --jeton-face-clair: #FFFDF6; --jeton-texte: #2A2620; }
.jeton-rateau.v1 { --jeton-fond: #8E2F2A; --jeton-encoche: #F0D9D6; --jeton-face: #A8433C; --jeton-face-clair: #C96A62; --jeton-texte: #FFF1EF; }
.jeton-rateau.v2 { --jeton-fond: #1F5A47; --jeton-encoche: #DCEFE7; --jeton-face: #2C7259; --jeton-face-clair: #4A9C7C; --jeton-texte: #EDFBF4; }
.jeton-rateau.v3 { --jeton-fond: #27456E; --jeton-encoche: #DAE5F2; --jeton-face: #365B8C; --jeton-face-clair: #5480B8; --jeton-texte: #EEF5FF; }
.jeton-rateau.v4 { --jeton-fond: #23201B; --jeton-encoche: #CFC9BC; --jeton-face: #33302A; --jeton-face-clair: #4D4940; --jeton-texte: #F2EDE1; }
.jeton-rateau.v5 { --jeton-fond: #7E6417; --jeton-encoche: #F7EDCB; --jeton-face: #C9A227; --jeton-face-clair: #F3DC9B; --jeton-texte: #241C05; }

.mise-tapis {
    display: flex; flex-direction: column; justify-content: center; gap: 1px;
    min-width: 164px;
    padding: 8px 16px 9px;
    border-radius: 8px;
    background: var(--relief);
    border: 1px solid var(--bord);
    text-align: right;
}
.mise-tapis .etiquette {
    font-size: 9px; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase;
    color: var(--creme-faible);
}
.mise-tapis strong {
    font-family: var(--chiffres); font-weight: 500; font-size: 22px;
    font-variant-numeric: tabular-nums; line-height: 1.15;
    color: var(--creme);
}
.mise-detail {
    font-family: var(--chiffres); font-size: 10.5px; font-variant-numeric: tabular-nums;
    color: var(--creme-faible);
}
.aide-tapis {
    padding-left: 2px;
    font-size: 11px; color: var(--creme-faible);
}
.aide-tapis em { font-style: normal; color: var(--trait-clair); margin: 0 4px; }

/* Écran étroit : la barre se plie en deux étages. Le râteau garde sa hauteur —
   sans cette règle, sa base de 260px devient une hauteur et la gorge s'étire. */
@media (max-width: 900px) {
    .poste-rateau { flex-direction: column !important; align-items: stretch; }
    .gorge-titre {
        padding: 0 0 9px; border-right: 0;
        border-bottom: 1px solid var(--bord);
    }
    .rateau { flex: 0 0 58px; }
    .caisse {
        justify-content: space-between; margin-left: 0;
        padding: 12px 0 0; border-left: 0;
        border-top: 1px solid var(--bord);
    }
}

/* --- chrono du tour : anneau autour de la roue --------------------------- */
/* L'anneau est tracé SUR le pourtour de la roue, dans le bois de la cuvette :
   c'est là qu'il s'intègre. Pas de halo, seulement un trait franc. */
.anneau-chrono {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    transform: rotate(-90deg);           /* départ en haut, sens des aiguilles */
    pointer-events: none;
}
.anneau-fond {
    fill: none;
    stroke: rgba(0, 0, 0, 0.35);         /* creux discret, dans le bois */
    stroke-width: 6;
}
.anneau-jauge {
    fill: none;
    stroke: #F3DC9B;
    stroke-width: 6;
    stroke-linecap: butt;
    transition: stroke-dashoffset 120ms linear, stroke 320ms var(--sortie);
}
.colonne-roue:has(.annonce-tour.urgence) .anneau-jauge { stroke: #E07069; }
.colonne-roue:has(.annonce-tour.ferme) .anneau-jauge { stroke: rgba(196, 85, 77, 0.5); }

/* L'annonce du croupier, sous la roue */
.annonce-tour {
    display: flex; align-items: center; gap: 14px;
    padding: 10px 20px;
    border-radius: 999px;
    border: 1px solid rgba(243, 220, 155, 0.3);
    background: rgba(9, 18, 15, 0.72);
    backdrop-filter: blur(6px);
    box-shadow: 0 10px 26px -14px rgba(0, 0, 0, 0.9);
}
.annonce-texte {
    font-family: "Montserrat", var(--ui);
    font-size: 11.5px; font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase;
    color: var(--laiton-clair);
}
.annonce-secondes {
    min-width: 34px;
    padding: 2px 0;
    border-left: 1px solid rgba(243, 220, 155, 0.25);
    padding-left: 14px;
    font-family: "Montserrat", var(--ui);
    font-size: 19px; font-weight: 700; font-variant-numeric: tabular-nums;
    color: var(--creme);
    text-align: center;
}
.annonce-secondes[hidden] { display: none; }
.annonce-tour.urgence { border-color: rgba(224, 112, 105, 0.6); }
.annonce-tour.urgence .annonce-texte { color: #F0B8B4; }
.annonce-tour.urgence .annonce-secondes {
    color: #F0B8B4;
    animation: battement 1s ease-in-out infinite;
}
@keyframes battement { 50% { transform: scale(1.18); } }
.annonce-tour.ferme {
    border-color: rgba(196, 85, 77, 0.65);
    animation: annonce-ferme 520ms var(--ressort);
}
.annonce-tour.ferme .annonce-texte { color: var(--perte); letter-spacing: 0.3em; }
@keyframes annonce-ferme {
    from { opacity: 0; transform: translateY(-6px) scale(0.94); }
}

/* Piles posées sur les cases */
.pile-jetons {
    position: absolute; z-index: 4;
    width: 34px; height: 34px;
    margin: -17px 0 0 -17px;
    pointer-events: none;
    transition: left var(--moyen) var(--ressort), top var(--moyen) var(--ressort);
}
.pile-jetons .disque {
    position: absolute; left: 0; width: 34px; height: 34px; border-radius: 50%;
    background: repeating-conic-gradient(#7E6417 0 22.5deg, #F7EDCB 0 45deg);
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.7);
}
/* Face claire sur le jeton du dessus : c'est là qu'on lit le montant posé. */
.pile-jetons .disque:last-of-type::after {
    content: "";
    position: absolute; inset: 6px; border-radius: 50%;
    background: radial-gradient(circle at 36% 30%, #F3DC9B, #C9A227);
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.3);
}
.pile-jetons .valeur-pile {
    position: absolute; inset: 0; display: grid; place-items: center;
    z-index: 2;
    font-family: "Montserrat", var(--ui);
    color: #241C05; font-size: 10.5px; font-weight: 700; letter-spacing: -0.01em;
}
.pile-jetons.tombe { animation: jeton-tombe 320ms var(--ressort); }
.pile-jetons.payee { animation: pile-payee 900ms var(--sortie) 2; }
@keyframes pile-payee {
    50% { transform: translateY(-6px) scale(1.12); filter: brightness(1.5); }
}
.pile-jetons.ramassee { animation: pile-ramassee 500ms var(--sortie) forwards; }
@keyframes pile-ramassee {
    to { transform: translate(-40px, -30px) scale(0.5) rotate(-25deg); opacity: 0; }
}
.gain-pile {
    position: absolute; left: 50%; top: -22px; transform: translateX(-50%);
    padding: 2px 8px; border-radius: 999px;
    background: rgba(16, 13, 9, 0.92);
    color: var(--gain); font-size: 11px; white-space: nowrap;
    animation: gain-monte 2.4s var(--sortie) forwards;
}
@keyframes gain-monte {
    0% { opacity: 0; transform: translate(-50%, 6px); }
    12% { opacity: 1; transform: translate(-50%, 0); }
    80% { opacity: 1; }
    100% { opacity: 0; transform: translate(-50%, -10px); }
}
.case.misee { box-shadow: inset 0 0 0 1px rgba(243, 220, 155, 0.55); }

/* =============================================================================
   Panneau de table : la marque, le registre des coups, l'équité
   ============================================================================= */
.panneau-tete {
    display: flex; align-items: center; justify-content: space-between; gap: 14px;
    margin-bottom: 16px;
}
.panneau-tete .intitule { margin: 0; flex: 1; }

/* Le cumul de la séance */
.seance {
    display: inline-flex; align-items: baseline; gap: 7px;
    padding: 4px 10px;
    border-radius: 7px;
    background: var(--relief);
    font-family: var(--chiffres);
    font-size: 13px; font-weight: 500; font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
.seance::before {
    content: "séance";
    font-family: var(--ui); font-size: 9px; font-weight: 500;
    letter-spacing: 0.12em; text-transform: uppercase;
    color: var(--creme-faible);
}
.seance.plus { color: var(--gain); }
.seance.moins { color: var(--perte); }

/* --- la marque : les derniers numéros sortis ------------------------------- */
.chapelet {
    display: flex; flex-wrap: wrap; gap: 7px;
    padding: 12px; margin-bottom: 16px;
    border-radius: 10px;
    background: var(--creux);
    border: 1px solid var(--bord);
}
.chapelet:empty { display: none; }

.perle {
    width: 26px; height: 26px; border-radius: 50%;
    display: grid; place-items: center;
    flex-shrink: 0;
    font-family: var(--chiffres);
    font-size: 11.5px; font-weight: 500; font-variant-numeric: tabular-nums;
    color: #F6F1E6;
    background: #26232C;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
}
.perle.rouge { background: #A03A32; }
.perle.noir  { background: #1C1A22; }
.perle.vert  { background: #1C6047; }
.perle.jeton {
    background: repeating-conic-gradient(#6E6A62 0 22.5deg, #E8E2D4 0 45deg);
    box-shadow: inset 0 0 0 5px var(--surface), inset 0 0 0 6px rgba(255, 255, 255, 0.1);
}
/* Le dernier tombé garde un liseré clair. */
.chapelet .perle:first-child { box-shadow: inset 0 0 0 1px rgba(240, 233, 220, 0.5), 0 0 0 2px var(--relief); }
.perle.neuve { animation: perle-entre 400ms var(--ressort) both; }
@keyframes perle-entre { from { opacity: 0; transform: scale(0.5); } }

/* --- le registre des coups -------------------------------------------------- */
.coup {
    display: grid;
    grid-template-columns: 26px minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;
    padding: 9px 8px;
    margin: 0 -8px;
    border-radius: 8px;
    transition: background var(--rapide) var(--sortie);
}
.coup:hover { background: var(--relief); }
.coup + .coup { box-shadow: inset 0 1px 0 var(--bord); }
.coup-mise {
    display: flex; align-items: baseline; gap: 7px;
    font-family: var(--chiffres); font-size: 12.5px; font-variant-numeric: tabular-nums;
    color: var(--creme-doux);
}
.coup-mise::before {
    content: "mise";
    font-family: var(--ui); font-size: 9px; font-weight: 500;
    letter-spacing: 0.12em; text-transform: uppercase;
    color: var(--creme-faible);
}
.coup-net {
    font-family: var(--chiffres);
    font-size: 13px; font-weight: 500; font-variant-numeric: tabular-nums;
}
.coup-net.plus { color: var(--gain); }
.coup-net.moins { color: var(--perte); }
.coup.neuve { animation: ligne-entre 400ms var(--ressort) both; }

/* --- l'équité ---------------------------------------------------------------- */
.sceau {
    display: inline-flex; align-items: center; gap: 7px;
    padding: 3px 10px;
    border-radius: 7px;
    background: var(--relief);
    font-size: 9.5px; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase;
    color: var(--creme-doux);
}
.sceau::before {
    content: ""; width: 5px; height: 5px; border-radius: 50%;
    background: var(--gain);
}
.empreinte {
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
    width: 100%;
    padding: 11px 13px;
    border: 1px solid var(--bord); border-radius: 8px;
    background: var(--creux);
    font-family: var(--chiffres); font-size: 11px;
    color: var(--creme-doux);
    cursor: pointer;
    transition: border-color var(--rapide) var(--sortie), color var(--rapide) var(--sortie);
}
.empreinte span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.empreinte:hover { border-color: var(--bord-fort); color: var(--creme); }
.empreinte svg { flex-shrink: 0; opacity: 0.6; }
.lien-equite {
    display: inline-flex; align-items: center; gap: 6px; margin-top: 12px;
    font-size: 12.5px; color: var(--creme-faible);
    transition: color var(--rapide) var(--sortie);
}
.lien-equite:hover { color: var(--creme-doux); }

/* =============================================================================
   Boutique : la boutique de jeu
   Un bandeau vedette, puis de grandes tuiles, une par article, l'objet en héros
   sur un fond coloré selon sa famille. La tuile s'incline sous la souris, le
   reflet la suit, et le bouton monte au survol.
   ============================================================================= */
.boutique {
    width: min(1180px, 100%); margin: 0 auto;
    display: flex; flex-direction: column; gap: 34px;
    /* Les trois familles ont chacune leur lumière. */
    --role-1: #F3C64B;  --role-2: #8A5A0E;  --role-3: rgba(243, 198, 75, 0.55);
    --acces-1: #5FD1D4; --acces-2: #0E4A5A; --acces-3: rgba(95, 209, 212, 0.5);
    --don-1: #F06C9B;   --don-2: #5A0E3A;   --don-3: rgba(240, 108, 155, 0.5);
    --tinder-1: #FF5E7E; --tinder-2: #5A0E22; --tinder-3: rgba(255, 94, 126, 0.5);
}
.boutique-fermee { text-align: center; }
.tuile.role, .bandeau.role       { --c1: var(--role-1);  --c2: var(--role-2);  --c3: var(--role-3); }
.tuile.channel, .bandeau.channel { --c1: var(--acces-1); --c2: var(--acces-2); --c3: var(--acces-3); }
.tuile.manual, .bandeau.manual   { --c1: var(--don-1);   --c2: var(--don-2);   --c3: var(--don-3); }
.tuile.tinder, .bandeau.tinder   { --c1: var(--tinder-1); --c2: var(--tinder-2); --c3: var(--tinder-3); }

/* --- le bandeau vedette --------------------------------------------------- */
.bandeau {
    position: relative; overflow: hidden;
    display: grid; grid-template-columns: minmax(0, 1fr) 320px;
    align-items: center; gap: 20px;
    min-height: 280px;
    padding: 36px 40px;
    border-radius: 22px;
    background:
        radial-gradient(70% 120% at 100% 50%, var(--c3), transparent 60%),
        linear-gradient(115deg, #17151D 0%, #0E0D13 55%, var(--c2) 140%);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08), 0 40px 80px -40px rgba(0, 0, 0, 1);
    transform: perspective(1400px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
    transition: transform var(--moyen) var(--sortie);
    will-change: transform;
}
/* Les rayons obliques qui traversent le bandeau, comme dans une vitrine de jeu. */
.bandeau::before {
    content: ""; position: absolute; inset: 0;
    background: repeating-linear-gradient(-58deg, rgba(255, 255, 255, 0.035) 0 2px, transparent 2px 46px);
    pointer-events: none;
}
.bandeau-lueur {
    position: absolute; inset: 0; pointer-events: none;
    background: radial-gradient(420px 320px at var(--mx, 70%) var(--my, 50%), rgba(255, 255, 255, 0.1), transparent 60%);
}
.bandeau-texte { position: relative; z-index: 1; min-width: 0; }
.bandeau-etiquette {
    display: inline-block; margin-bottom: 12px;
    padding: 5px 11px; border-radius: 6px;
    background: var(--c1); color: #0B0A0E;
    font-size: 10px; font-weight: 800; letter-spacing: 0.18em; text-transform: uppercase;
}
.bandeau-nom {
    margin: 0 0 10px;
    font-family: var(--ui); font-size: clamp(34px, 4.6vw, 54px); font-weight: 800;
    letter-spacing: -0.03em; line-height: 0.98; text-transform: uppercase;
    color: #fff;
    text-shadow: 0 0 40px var(--c3);
}
.bandeau-desc { margin: 0 0 20px; max-width: 54ch; font-size: 15px; line-height: 1.5; color: var(--creme-doux); }
.bandeau-ligne { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.bandeau-heros {
    position: relative; z-index: 1;
    display: grid; place-items: center;
    height: 220px;
    filter: drop-shadow(0 30px 40px rgba(0, 0, 0, 0.8));
    animation: heros-flotte 6s ease-in-out infinite;
}
.bandeau-heros img { max-width: 100%; max-height: 100%; object-fit: contain; }
.bandeau-heros .tuile-embleme { width: 200px; height: 200px; }
@keyframes heros-flotte { 50% { transform: translateY(-10px) rotate(-2deg); } }
@media (max-width: 900px) {
    .bandeau { grid-template-columns: 1fr; padding: 28px 24px; }
    .bandeau-heros { height: 150px; order: -1; }
    .bandeau-heros .tuile-embleme { width: 130px; height: 130px; }
}

/* --- les rayons ------------------------------------------------------------- */
.rayon-titre {
    display: flex; align-items: center; gap: 12px; margin: 0 0 16px;
    font-family: var(--ui); font-size: 22px; font-weight: 800; letter-spacing: -0.02em;
    text-transform: uppercase; color: #fff;
}
.rayon-barre { width: 5px; height: 24px; border-radius: 3px; background: var(--laiton); box-shadow: 0 0 14px rgba(201, 162, 39, 0.6); }
.rayon-nombre {
    padding: 2px 9px; border-radius: 6px;
    background: rgba(255, 255, 255, 0.07); font-family: var(--chiffres); font-size: 12px; color: var(--creme-faible);
}
.rayon-grille {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 18px;
}

/* --- une tuile ---------------------------------------------------------------- */
.tuile {
    position: relative;
    aspect-ratio: 3 / 4;
    perspective: 1000px;
    outline: none;
}
.tuile-face {
    position: absolute; inset: 0;
    display: flex; flex-direction: column;
    border-radius: 18px; overflow: hidden;
    background:
        radial-gradient(90% 55% at 50% 30%, var(--c3), transparent 70%),
        linear-gradient(180deg, #1A1821 0%, #0F0E14 62%, var(--c2) 170%);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08), 0 24px 50px -30px rgba(0, 0, 0, 1);
    transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translateZ(0);
    transition: transform var(--moyen) var(--sortie), box-shadow var(--moyen) var(--sortie);
    will-change: transform;
}
/* Les rayons obliques, comme sur le bandeau. */
.tuile-face::before {
    content: ""; position: absolute; inset: 0;
    background: repeating-linear-gradient(-58deg, rgba(255, 255, 255, 0.03) 0 2px, transparent 2px 34px);
    pointer-events: none;
}
/* Le reflet qui suit la souris. */
.tuile-lueur {
    position: absolute; inset: 0; pointer-events: none; z-index: 2;
    background: radial-gradient(260px 220px at var(--mx, 50%) var(--my, 30%), rgba(255, 255, 255, 0.14), transparent 60%);
    opacity: 0; transition: opacity var(--moyen) var(--sortie);
}
.tuile:hover .tuile-face, .tuile:focus-visible .tuile-face {
    box-shadow: inset 0 0 0 1.5px var(--c1), 0 0 0 4px var(--c3), 0 0 60px -10px var(--c3),
                0 40px 60px -30px rgba(0, 0, 0, 1);
}
.tuile:hover .tuile-lueur, .tuile:focus-visible .tuile-lueur { opacity: 1; }
.tuile-haut {
    position: relative; z-index: 1;
    display: flex; justify-content: space-between; align-items: center;
    padding: 14px 16px 0;
}
.tuile-famille {
    padding: 4px 9px; border-radius: 5px;
    background: rgba(0, 0, 0, 0.45); box-shadow: inset 0 0 0 1px var(--c3);
    font-size: 9.5px; font-weight: 800; letter-spacing: 0.16em; text-transform: uppercase; color: var(--c1);
}
.tuile-duree { font-family: var(--chiffres); font-size: 11px; color: var(--creme-faible); }
/* L'objet en héros, qui grossit et se soulève au survol. */
.tuile-heros {
    position: relative; z-index: 1;
    flex: 1; display: grid; place-items: center;
    padding: 6px 18px 0;
    transform: translateY(0) scale(1);
    transition: transform var(--ample) var(--ressort);
    filter: drop-shadow(0 20px 26px rgba(0, 0, 0, 0.75));
}
.tuile:hover .tuile-heros, .tuile:focus-visible .tuile-heros { transform: translateY(-8px) scale(1.12); }
.tuile-heros img { max-width: 100%; max-height: 100%; object-fit: contain; }
.tuile-embleme {
    display: block; width: 118px; height: 118px;
    color: var(--c1);
    filter: drop-shadow(0 0 22px var(--c3));
}
.tuile-embleme svg { width: 100%; height: 100%; display: block; }
.tuile-bas {
    position: relative; z-index: 1;
    padding: 12px 16px 16px;
    background: linear-gradient(180deg, transparent, rgba(0, 0, 0, 0.55) 40%);
    transition: transform var(--moyen) var(--sortie);
}
.tuile:hover .tuile-bas, .tuile:focus-visible .tuile-bas { transform: translateY(-44px); }
.tuile-nom {
    margin: 0 0 4px;
    font-family: var(--ui); font-size: 18px; font-weight: 800; letter-spacing: -0.02em; line-height: 1.1;
    text-transform: uppercase; color: #fff;
}
.tuile-desc {
    margin: 0 0 10px; font-size: 12px; line-height: 1.4; color: var(--creme-doux);
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.tuile-ligne { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.tuile-prix {
    display: inline-flex; align-items: center; gap: 7px;
    font-family: var(--chiffres); font-size: 16px; font-weight: 600; font-variant-numeric: tabular-nums;
    color: var(--laiton-clair); white-space: nowrap;
}
.tuile-prix.grand { font-size: 24px; }
.tuile-prix .jeton-mini { width: 17px; height: 17px; box-shadow: inset 0 0 0 2.5px var(--nuit), inset 0 0 0 3.5px rgba(243, 220, 155, 0.7); }
.tuile-prix.trop-cher { color: var(--creme-faible); }
.tuile-note { font-size: 10.5px; letter-spacing: 0.04em; color: var(--creme-faible); white-space: nowrap; }

/* Le bouton, caché sous la tuile, qui monte au survol. */
.tuile .acheter {
    position: absolute; left: 16px; right: 16px; bottom: 14px; z-index: 3;
    transform: translateY(70px);
    transition: transform var(--moyen) var(--ressort);
}
.tuile:hover .acheter, .tuile:focus-visible .acheter, .tuile:focus-within .acheter { transform: translateY(0); }
.acheter {
    padding: 12px 20px;
    border: 0; border-radius: 10px;
    background: var(--c1, var(--laiton));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.45), 0 10px 26px -10px var(--c3, rgba(201, 162, 39, 0.6));
    font-family: var(--ui); font-size: 12px; font-weight: 800; letter-spacing: 0.16em; text-transform: uppercase;
    color: #0B0A0E;
    cursor: pointer;
    transition: transform var(--rapide) var(--ressort), filter var(--rapide) var(--sortie);
}
.acheter.grand { padding: 14px 28px; font-size: 13px; }
.acheter:hover:not(:disabled) { filter: brightness(1.12); }
.acheter:active:not(:disabled) { transform: scale(0.97); }
.acheter:disabled {
    background: rgba(255, 255, 255, 0.08); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1);
    color: var(--creme-faible); cursor: default; letter-spacing: 0.04em; text-transform: none;
}
.tuile .acheter:disabled { transform: translateY(70px); }
.tuile:hover .acheter:disabled { transform: translateY(0); }

/* Épuisé ou déjà acquis : la tuile s'assombrit, sans bouton. */
.tuile.indisponible .tuile-face { filter: saturate(0.35) brightness(0.7); }
.tuile.indisponible:hover .tuile-bas { transform: none; }
.tuile.indisponible:hover .tuile-heros { transform: none; }

/* --- le registre des achats --------------------------------------------------- */
.registre { padding: 4px 0 0; }
.achat {
    display: grid; grid-template-columns: minmax(0, 1fr) auto auto auto;
    align-items: center; gap: 14px;
    padding: 12px 16px;
    border-radius: 12px;
    background: var(--surface); border: 1px solid var(--bord);
}
.achat + .achat { margin-top: 8px; }
.achat-nom { font-size: 14px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.achat-date { font-size: 11.5px; font-family: var(--chiffres); }
.achat-prix { font-size: 13px; color: var(--creme-doux); }
.achat-etat {
    padding: 4px 10px; border-radius: 6px;
    font-size: 10px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
    background: var(--relief); color: var(--creme-faible);
}
.achat-etat.pending { background: rgba(201, 162, 39, 0.16); color: var(--laiton-clair); }
.achat-etat.done { color: #8AD6A5; background: rgba(95, 191, 125, 0.13); }
.achat-etat.cancelled { color: #E48B84; background: rgba(196, 85, 77, 0.13); }
.achat.neuf { animation: ligne-entre 420ms var(--ressort) both; }
.registre .vide { padding: 18px; border-radius: 12px; background: var(--surface); border: 1px solid var(--bord); }

/* --- la confirmation ---------------------------------------------------------- */
.confirmation {
    border: 1px solid var(--bord-fort); border-radius: 18px;
    padding: 0; width: min(420px, calc(100% - 32px));
    color: var(--creme); background: var(--surface-haute);
    box-shadow: 0 40px 80px -30px rgba(0, 0, 0, 1);
}
.confirmation::backdrop { background: rgba(5, 4, 8, 0.72); backdrop-filter: blur(4px); }
.confirmation form { padding: 22px 24px 20px; display: flex; flex-direction: column; gap: 8px; }
.confirmation-etiquette { font-size: 9.5px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--creme-faible); }
.confirmation-nom { margin: 0; font-family: var(--ui); font-size: 26px; font-weight: 800; letter-spacing: -0.02em; text-transform: uppercase; }
.confirmation-detail { margin: 0 0 6px; font-size: 13.5px; line-height: 1.5; color: var(--creme-doux); }
.confirmation-detail b { color: var(--creme); font-family: var(--chiffres); font-weight: 500; }
.confirmation-boutons { display: flex; justify-content: flex-end; gap: 8px; }
.confirmation-boutons .geste { flex: 0 0 auto; padding: 10px 16px; }
.confirmation-boutons .bouton-mise { width: auto; padding: 10px 22px; }

@media (prefers-reduced-motion: reduce) {
    .bandeau-heros { animation: none; }
    .tuile:hover .tuile-heros { transform: scale(1.04); }
}

/* =============================================================================
   Boutique : ça claque.
   Entrée en scène en cascade 3D, inclinaison franche, reflet holographique,
   gerbe d'étincelles et anneau d'énergie au survol, faisceaux sur le bandeau,
   onde de choc à l'achat.
   ============================================================================= */

/* --- l'entrée en scène ------------------------------------------------------- */
.bandeau { animation: bandeau-entre 820ms cubic-bezier(0.2, 1.1, 0.3, 1) both; }
@keyframes bandeau-entre {
    from { opacity: 0; transform: perspective(1400px) scale(1.08) translateY(28px); filter: blur(16px) brightness(2); }
    60%  { filter: blur(0) brightness(1.15); }
    to   { opacity: 1; transform: perspective(1400px) scale(1) translateY(0); filter: blur(0) brightness(1); }
}
.tuile {
    animation: tuile-entre 760ms cubic-bezier(0.2, 1.25, 0.3, 1) both;
    animation-delay: calc(180ms + var(--i, 0) * 90ms);
}
@keyframes tuile-entre {
    from { opacity: 0; transform: perspective(900px) rotateX(-42deg) translateY(90px) scale(0.86); filter: blur(8px); }
    55%  { filter: blur(0); }
    to   { opacity: 1; transform: perspective(900px) rotateX(0) translateY(0) scale(1); filter: blur(0); }
}
.rayon-titre { animation: titre-entre 600ms var(--ressort) both; }
@keyframes titre-entre { from { opacity: 0; transform: translateX(-24px); } }
.rayon-barre { animation: barre-pulse 2.2s ease-in-out infinite; }
@keyframes barre-pulse { 50% { box-shadow: 0 0 22px rgba(201, 162, 39, 1); transform: scaleY(1.15); } }

/* --- l'inclinaison franche --------------------------------------------------- */
.tuile-face { transition: transform 160ms var(--sortie), box-shadow var(--moyen) var(--sortie); }
.tuile:hover .tuile-face, .tuile:focus-visible .tuile-face {
    transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translateZ(40px) scale(1.06);
    box-shadow: inset 0 0 0 2px var(--c1), 0 0 0 6px var(--c3), 0 0 90px -6px var(--c3),
                0 60px 80px -30px rgba(0, 0, 0, 1);
}
.tuile:hover { z-index: 5; }

/* Le reflet holographique : un arc-en-ciel froid qui tourne avec le curseur. */
.tuile-holo {
    position: absolute; inset: -40%; z-index: 2; pointer-events: none;
    background: conic-gradient(from var(--angle, 0deg) at var(--mx, 50%) var(--my, 50%),
        transparent 0deg, rgba(255, 70, 190, 0.32) 60deg, rgba(60, 230, 255, 0.32) 130deg,
        rgba(255, 240, 90, 0.28) 200deg, rgba(120, 90, 255, 0.28) 270deg, transparent 360deg);
    mix-blend-mode: color-dodge;
    opacity: 0; transition: opacity var(--moyen) var(--sortie);
}
.tuile:hover .tuile-holo, .tuile:focus-visible .tuile-holo { opacity: 0.55; }

/* Le flash à l'entrée du curseur. */
.tuile-flash {
    position: absolute; inset: 0; z-index: 3; pointer-events: none;
    background: #fff; opacity: 0;
}
.tuile:hover .tuile-flash { animation: flash-tuile 520ms ease-out both; }
@keyframes flash-tuile { 0% { opacity: 0.55; } 100% { opacity: 0; } }

/* --- l'objet : pop, anneau d'énergie, gerbe d'étincelles -------------------- */
.tuile-heros { position: relative; }
.tuile:hover .tuile-heros, .tuile:focus-visible .tuile-heros { transform: translateY(-14px) scale(1.22); }
.tuile:hover .tuile-embleme { animation: pop-embleme 700ms var(--ressort) both; }
@keyframes pop-embleme {
    0% { transform: scale(0.8) rotate(-8deg); }
    50% { transform: scale(1.15) rotate(5deg); }
    100% { transform: scale(1) rotate(0); }
}
.anneau {
    position: absolute; left: 50%; top: 50%; width: 150px; height: 150px; margin: -75px 0 0 -75px;
    border-radius: 50%; pointer-events: none;
    border: 2px solid var(--c1);
    opacity: 0;
}
.tuile:hover .anneau, .tuile:focus-visible .anneau { animation: anneau 1.1s ease-out infinite; }
@keyframes anneau {
    0% { transform: scale(0.55); opacity: 0.9; border-width: 3px; }
    100% { transform: scale(1.7); opacity: 0; border-width: 1px; }
}
.gerbe { position: absolute; left: 50%; top: 50%; width: 0; height: 0; pointer-events: none; }
.gerbe i {
    position: absolute; left: -3px; top: -3px; width: 6px; height: 6px; border-radius: 50%;
    background: #fff; box-shadow: 0 0 10px 2px var(--c1);
    opacity: 0;
}
.tuile:hover .gerbe i, .tuile:focus-visible .gerbe i { animation: gerbe 900ms ease-out infinite; }
.gerbe i:nth-child(1)  { --a: 0deg;   animation-delay: 0ms; }
.gerbe i:nth-child(2)  { --a: 36deg;  animation-delay: 90ms; }
.gerbe i:nth-child(3)  { --a: 72deg;  animation-delay: 180ms; }
.gerbe i:nth-child(4)  { --a: 108deg; animation-delay: 270ms; }
.gerbe i:nth-child(5)  { --a: 144deg; animation-delay: 360ms; }
.gerbe i:nth-child(6)  { --a: 180deg; animation-delay: 450ms; }
.gerbe i:nth-child(7)  { --a: 216deg; animation-delay: 540ms; }
.gerbe i:nth-child(8)  { --a: 252deg; animation-delay: 630ms; }
.gerbe i:nth-child(9)  { --a: 288deg; animation-delay: 720ms; }
.gerbe i:nth-child(10) { --a: 324deg; animation-delay: 810ms; }
@keyframes gerbe {
    0%   { transform: rotate(var(--a)) translateX(30px) scale(1.4); opacity: 1; }
    100% { transform: rotate(var(--a)) translateX(110px) scale(0.2); opacity: 0; }
}
/* Le bouton claque en montant. */
.tuile:hover .acheter, .tuile:focus-visible .acheter { transition: transform 420ms cubic-bezier(0.2, 1.6, 0.3, 1); }
/* Le bouton de la tuile est positionné en absolu par ailleurs : ici on ne
   touche qu'au débordement, sinon `left/right` se mettent à le décaler. */
.acheter:not(:disabled) { overflow: hidden; }
.bandeau .acheter { position: relative; }
.acheter:not(:disabled)::after {
    content: ""; position: absolute; inset: 0;
    background: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, 0.6) 50%, transparent 70%);
    background-size: 240% 100%;
    animation: balaye-bouton 1.6s ease-in-out infinite;
}
@keyframes balaye-bouton { 0%, 40% { background-position: 130% 0; } 100% { background-position: -40% 0; } }

/* --- le bandeau : faisceaux et halo --------------------------------------- */
.faisceau {
    position: absolute; inset: -30% -20%; z-index: 0; pointer-events: none;
    background: linear-gradient(100deg, transparent 42%, rgba(255, 255, 255, 0.13) 50%, transparent 58%);
    background-size: 220% 100%;
    animation: faisceau 4.2s cubic-bezier(0.6, 0, 0.3, 1) infinite;
}
.faisceau.second { animation-delay: 1.6s; animation-duration: 5.8s; opacity: 0.6; }
@keyframes faisceau { 0%, 20% { background-position: 140% 0; } 80%, 100% { background-position: -40% 0; } }
.bandeau-heros { position: relative; }
.halo {
    position: absolute; left: 50%; top: 50%; width: 260px; height: 260px; margin: -130px 0 0 -130px;
    border-radius: 50%; pointer-events: none;
    background: conic-gradient(from 0deg, transparent 0 20%, var(--c1) 30%, transparent 40%, transparent 60%, var(--c1) 70%, transparent 80%);
    -webkit-mask: radial-gradient(circle, transparent 60%, #000 62%, #000 66%, transparent 68%);
    mask: radial-gradient(circle, transparent 60%, #000 62%, #000 66%, transparent 68%);
    animation: halo-tourne 5s linear infinite;
    filter: drop-shadow(0 0 12px var(--c3));
}
@keyframes halo-tourne { to { transform: rotate(360deg); } }
.bandeau-heros .tuile-embleme { animation: respire 3s ease-in-out infinite; }
@keyframes respire { 50% { filter: drop-shadow(0 0 46px var(--c1)); transform: scale(1.04); } }
.bandeau:hover .bandeau-heros .tuile-embleme { animation: pop-embleme 700ms var(--ressort) both; }
.bandeau-nom { animation: nom-entre 900ms var(--ressort) both 200ms; }
@keyframes nom-entre { from { opacity: 0; transform: translateX(-30px) skewX(-8deg); letter-spacing: 0.1em; } }

/* --- l'achat : onde de choc ----------------------------------------------- */
.tuile-onde {
    position: absolute; inset: 0; z-index: 4; pointer-events: none;
    border-radius: 18px; border: 3px solid var(--c1); opacity: 0;
}
.tuile.achete .tuile-face { animation: achete-face 900ms var(--ressort); }
.tuile.achete .tuile-onde, .bandeau.achete .bandeau-lueur { animation: onde 900ms ease-out both; }
.tuile.achete .tuile-flash { animation: flash-tuile 700ms ease-out both; }
@keyframes achete-face {
    0% { transform: scale(1); }
    30% { transform: scale(1.12) rotate(-2deg); filter: brightness(1.8); }
    60% { transform: scale(0.97) rotate(1deg); }
    100% { transform: scale(1); }
}
@keyframes onde { 0% { transform: scale(1); opacity: 1; } 100% { transform: scale(1.5); opacity: 0; } }
.eclat-page {
    position: fixed; inset: 0; z-index: 90; pointer-events: none;
    background: radial-gradient(60% 60% at 50% 50%, rgba(255, 240, 180, 0.55), transparent 70%);
    animation: eclat-page 900ms ease-out both;
}
@keyframes eclat-page { 0% { opacity: 1; } 100% { opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
    .bandeau, .tuile, .rayon-titre, .rayon-barre, .faisceau, .halo, .bandeau-heros .tuile-embleme,
    .bandeau-nom, .acheter:not(:disabled)::after { animation: none; }
    .tuile:hover .tuile-flash, .tuile:hover .anneau, .tuile:hover .gerbe i, .tuile:hover .tuile-embleme { animation: none; }
    .tuile-holo { display: none; }
}

/* --- le bouton de la tuile, bien dans son cadre --------------------------- */
.tuile .acheter { left: 18px; right: 18px; bottom: 18px; border-radius: 12px; }
.tuile:hover .tuile-bas, .tuile:focus-visible .tuile-bas { transform: translateY(-62px); }
.tuile-bas { padding-bottom: 18px; }

/* =============================================================================
   Confirmation d'achat : une scène, pas une boîte
   ============================================================================= */
.confirmation.role    { --c1: #F3C64B; --c2: #8A5A0E; --c3: rgba(243, 198, 75, 0.55); }
.confirmation.channel { --c1: #5FD1D4; --c2: #0E4A5A; --c3: rgba(95, 209, 212, 0.5); }
.confirmation.manual  { --c1: #F06C9B; --c2: #5A0E3A; --c3: rgba(240, 108, 155, 0.5); }
.confirmation.tinder  { --c1: #FF5E7E; --c2: #5A0E22; --c3: rgba(255, 94, 126, 0.5); }
.confirmation {
    border: 2px solid var(--c1, var(--laiton)); border-radius: 24px;
    padding: 0; width: min(460px, calc(100% - 32px));
    color: var(--creme);
    background:
        radial-gradient(90% 60% at 50% 0%, var(--c3, rgba(201, 162, 39, 0.4)), transparent 70%),
        linear-gradient(180deg, #17151D, #0B0A0E 60%, var(--c2, #2A2214) 200%);
    box-shadow: 0 0 0 8px var(--c3, rgba(201, 162, 39, 0.3)), 0 0 120px -10px var(--c3, rgba(201, 162, 39, 0.5)),
                0 60px 100px -30px rgba(0, 0, 0, 1);
    overflow: hidden;
}
.confirmation[open] { animation: confirmation-entre 620ms cubic-bezier(0.2, 1.3, 0.3, 1) both; }
@keyframes confirmation-entre {
    from { opacity: 0; transform: perspective(1200px) rotateX(-22deg) scale(0.72) translateY(40px); filter: blur(12px) brightness(2.4); }
    55%  { filter: blur(0) brightness(1.2); }
    to   { opacity: 1; transform: perspective(1200px) rotateX(0) scale(1) translateY(0); filter: blur(0) brightness(1); }
}
.confirmation::backdrop { background: rgba(4, 3, 8, 0.78); backdrop-filter: blur(6px); animation: eclat-page 700ms ease-out both; }
.confirmation form {
    position: relative;
    padding: 28px 28px 24px;
    display: flex; flex-direction: column; align-items: center; gap: 8px;
    text-align: center;
}
/* Les rayons qui tournent derrière l'objet. */
.confirmation-rayons {
    position: absolute; left: 50%; top: 110px; width: 600px; height: 600px; margin: -300px 0 0 -300px;
    background: conic-gradient(from 0deg, transparent 0 7%, var(--c3, rgba(201, 162, 39, 0.4)) 8% 10%,
        transparent 11% 24%, var(--c3, rgba(201, 162, 39, 0.4)) 25% 27%, transparent 28% 41%,
        var(--c3, rgba(201, 162, 39, 0.4)) 42% 44%, transparent 45% 57%, var(--c3, rgba(201, 162, 39, 0.4)) 58% 60%,
        transparent 61% 74%, var(--c3, rgba(201, 162, 39, 0.4)) 75% 77%, transparent 78% 90%,
        var(--c3, rgba(201, 162, 39, 0.4)) 91% 93%, transparent 94% 100%);
    -webkit-mask: radial-gradient(circle, #000 10%, transparent 55%);
    mask: radial-gradient(circle, #000 10%, transparent 55%);
    opacity: 0.6;
    animation: halo-tourne 14s linear infinite;
    pointer-events: none;
}
.confirmation-faisceau {
    position: absolute; inset: -30% -20%; pointer-events: none;
    background: linear-gradient(100deg, transparent 42%, rgba(255, 255, 255, 0.14) 50%, transparent 58%);
    background-size: 220% 100%;
    animation: faisceau 3.6s cubic-bezier(0.6, 0, 0.3, 1) infinite;
}
/* L'objet, en gros, dans son halo et son anneau. */
.confirmation-heros {
    position: relative;
    width: 150px; height: 150px;
    display: grid; place-items: center;
    margin-bottom: 4px;
}
.confirmation-heros .tuile-embleme {
    width: 118px; height: 118px; color: var(--c1, var(--laiton));
    filter: drop-shadow(0 0 30px var(--c3, rgba(201, 162, 39, 0.5)));
    animation: pop-embleme 800ms var(--ressort) both 150ms, respire 3s ease-in-out infinite 950ms;
}
.confirmation-heros img { max-width: 100%; max-height: 100%; object-fit: contain; }
.confirmation-heros .halo {
    position: absolute; left: 50%; top: 50%; width: 190px; height: 190px; margin: -95px 0 0 -95px;
    border-radius: 50%;
    background: conic-gradient(from 0deg, transparent 0 20%, var(--c1, var(--laiton)) 30%, transparent 40%, transparent 60%, var(--c1, var(--laiton)) 70%, transparent 80%);
    -webkit-mask: radial-gradient(circle, transparent 60%, #000 62%, #000 66%, transparent 68%);
    mask: radial-gradient(circle, transparent 60%, #000 62%, #000 66%, transparent 68%);
    animation: halo-tourne 5s linear infinite;
}
.confirmation-heros .anneau {
    position: absolute; left: 50%; top: 50%; width: 150px; height: 150px; margin: -75px 0 0 -75px;
    border-radius: 50%; border: 2px solid var(--c1, var(--laiton)); opacity: 0;
    animation: anneau 1.6s ease-out infinite;
}
.confirmation-etiquette {
    font-size: 10px; font-weight: 800; letter-spacing: 0.22em; text-transform: uppercase;
    color: var(--c1, var(--laiton));
}
.confirmation-nom {
    margin: 0; font-family: var(--ui); font-size: 32px; font-weight: 800; letter-spacing: -0.03em; line-height: 1;
    text-transform: uppercase; color: #fff; text-shadow: 0 0 30px var(--c3, rgba(201, 162, 39, 0.5));
}
.confirmation-prix {
    display: inline-flex; align-items: center; gap: 10px; margin-top: 6px;
    font-family: var(--chiffres); font-size: 38px; font-weight: 600; font-variant-numeric: tabular-nums;
    letter-spacing: -0.02em; line-height: 1; color: var(--laiton-clair);
    text-shadow: 0 0 24px rgba(243, 220, 155, 0.55);
}
.confirmation-prix .jeton-mini { width: 26px; height: 26px; box-shadow: inset 0 0 0 4px var(--nuit), inset 0 0 0 5px rgba(243, 220, 155, 0.8); }
.confirmation-detail { margin: 4px 0 14px; font-size: 13.5px; line-height: 1.5; color: var(--creme-doux); max-width: 34ch; }
.confirmation-detail b { color: var(--creme); font-family: var(--chiffres); font-weight: 500; }
.confirmation-boutons { display: flex; gap: 10px; width: 100%; }
.confirmation-non {
    flex: 0 0 auto; padding: 14px 18px;
    border: 1px solid rgba(255, 255, 255, 0.14); border-radius: 12px;
    background: rgba(255, 255, 255, 0.05); color: var(--creme-doux);
    font-family: var(--ui); font-size: 12px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
    cursor: pointer; transition: background var(--rapide) var(--sortie);
}
.confirmation-non:hover { background: rgba(255, 255, 255, 0.1); color: var(--creme); }
.confirmation-oui {
    position: relative; overflow: hidden;
    flex: 1; padding: 14px 24px;
    border: 0; border-radius: 12px;
    background: linear-gradient(180deg, #fff 0%, var(--c1, var(--laiton)) 22%, var(--c1, var(--laiton)) 70%, var(--c2, #7E6417) 160%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6), 0 0 0 1px rgba(0, 0, 0, 0.4), 0 12px 34px -8px var(--c1, var(--laiton));
    font-family: var(--ui); font-size: 15px; font-weight: 800; letter-spacing: 0.2em; text-transform: uppercase;
    color: #0B0A0E;
    cursor: pointer;
    animation: payer-pulse 1.4s ease-in-out infinite;
    transition: transform var(--rapide) var(--ressort), filter var(--rapide) var(--sortie);
}
.confirmation-oui::after {
    content: ""; position: absolute; inset: 0;
    background: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, 0.7) 50%, transparent 70%);
    background-size: 240% 100%;
    animation: balaye-bouton 1.4s ease-in-out infinite;
}
@keyframes payer-pulse { 50% { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6), 0 0 0 1px rgba(0, 0, 0, 0.4), 0 12px 48px -4px var(--c1, var(--laiton)); transform: scale(1.02); } }
.confirmation-oui:hover:not(:disabled) { filter: brightness(1.12); transform: scale(1.04); }
.confirmation-oui:active:not(:disabled) { transform: scale(0.97); }
.confirmation-oui:disabled { animation: none; filter: saturate(0.4); cursor: progress; }

@media (prefers-reduced-motion: reduce) {
    .confirmation[open], .confirmation-rayons, .confirmation-faisceau, .confirmation-heros .tuile-embleme,
    .confirmation-heros .halo, .confirmation-heros .anneau, .confirmation-oui, .confirmation-oui::after { animation: none; }
}

/* =============================================================================
   Le triomphe : la scène plein écran après un paiement validé
   ============================================================================= */
.triomphe.role    { --c1: #F3C64B; --c2: #8A5A0E; --c3: rgba(243, 198, 75, 0.55); --c4: #FFF1B8; }
.triomphe.channel { --c1: #5FD1D4; --c2: #0E4A5A; --c3: rgba(95, 209, 212, 0.5);  --c4: #D6FBFC; }
.triomphe.manual  { --c1: #F06C9B; --c2: #5A0E3A; --c3: rgba(240, 108, 155, 0.5); --c4: #FFD9E6; }
.triomphe.tinder  { --c1: #FF5E7E; --c2: #5A0E22; --c3: rgba(255, 94, 126, 0.5);  --c4: #FFD6DE; }
.triomphe {
    position: fixed; inset: 0; z-index: 95;
    display: grid; place-items: center;
    overflow: hidden;
    background:
        radial-gradient(60% 60% at 50% 50%, var(--c3), transparent 70%),
        rgba(4, 3, 8, 0.86);
    backdrop-filter: blur(8px);
    animation: triomphe-fond 500ms ease-out both;
    cursor: pointer;
}
.triomphe[hidden] { display: none; }
.triomphe.sortie { animation: triomphe-sortie 420ms ease-in both; pointer-events: none; }
@keyframes triomphe-fond { from { opacity: 0; } 30% { opacity: 1; background-color: rgba(255, 255, 255, 0.5); } to { opacity: 1; } }
@keyframes triomphe-sortie { to { opacity: 0; transform: scale(1.06); } }

/* Les rayons, qui tournent derrière tout le reste. */
.triomphe-rayons {
    position: absolute; left: 50%; top: 50%; width: 1600px; height: 1600px; margin: -800px 0 0 -800px;
    background: repeating-conic-gradient(from 0deg, var(--c3) 0 6deg, transparent 6deg 18deg);
    -webkit-mask: radial-gradient(circle, #000 0%, transparent 55%);
    mask: radial-gradient(circle, #000 0%, transparent 55%);
    opacity: 0.7;
    animation: halo-tourne 26s linear infinite, triomphe-rayons 900ms var(--ressort) both;
}
@keyframes triomphe-rayons { from { transform: scale(0.2) rotate(-40deg); opacity: 0; } }
/* Trois ondes de choc qui partent du centre. */
.triomphe-onde {
    position: absolute; left: 50%; top: 50%; width: 220px; height: 220px; margin: -110px 0 0 -110px;
    border-radius: 50%; border: 3px solid var(--c1);
    box-shadow: 0 0 40px var(--c3), inset 0 0 40px var(--c3);
    opacity: 0;
    animation: triomphe-onde 1300ms cubic-bezier(0.1, 0.8, 0.3, 1) both;
}
.triomphe-onde:nth-child(3) { animation-delay: 180ms; }
.triomphe-onde:nth-child(4) { animation-delay: 360ms; border-width: 1px; }
@keyframes triomphe-onde { 0% { transform: scale(0.2); opacity: 1; } 100% { transform: scale(7); opacity: 0; } }
/* La pluie de particules. */
.triomphe-particules { position: absolute; left: 50%; top: 50%; width: 0; height: 0; }
.triomphe-particules i {
    position: absolute; left: 0; top: 0;
    width: var(--t); height: var(--t); margin: calc(var(--t) / -2) 0 0 calc(var(--t) / -2);
    background: var(--c1);
    box-shadow: 0 0 10px var(--c3);
    opacity: 0;
    animation: particule 1400ms cubic-bezier(0.15, 0.8, 0.3, 1) both;
}
.triomphe-particules i.rond { border-radius: 50%; }
.triomphe-particules i.carre { background: var(--c4); border-radius: 2px; }
.triomphe-particules i:nth-child(3n) { background: #fff; }
@keyframes particule {
    0%   { transform: rotate(var(--a)) translateX(0) rotate(0deg) scale(0.4); opacity: 1; }
    70%  { opacity: 1; }
    100% { transform: rotate(var(--a)) translateX(var(--d)) rotate(var(--r)) scale(1); opacity: 0; }
}

/* La scène : l'objet, le titre, le nom. */
.triomphe-scene {
    position: relative; z-index: 1;
    display: flex; flex-direction: column; align-items: center; gap: 6px;
    text-align: center; padding: 20px;
}
.triomphe-heros {
    width: 240px; height: 240px;
    display: grid; place-items: center;
    animation: heros-eclate 900ms cubic-bezier(0.2, 1.5, 0.3, 1) both 80ms;
    filter: drop-shadow(0 0 60px var(--c1)) drop-shadow(0 30px 40px rgba(0, 0, 0, 0.8));
}
.triomphe-heros .tuile-embleme { width: 220px; height: 220px; color: var(--c1); animation: respire 2.4s ease-in-out infinite 1s; }
.triomphe-heros img { max-width: 100%; max-height: 100%; object-fit: contain; }
@keyframes heros-eclate {
    0%   { transform: scale(0) rotate(-40deg); opacity: 0; filter: blur(20px) brightness(3); }
    60%  { transform: scale(1.35) rotate(6deg); opacity: 1; filter: blur(0) brightness(1.6); }
    100% { transform: scale(1) rotate(0); opacity: 1; filter: blur(0) brightness(1); }
}
.triomphe-titre {
    font-family: var(--ui); font-size: clamp(38px, 7vw, 76px); font-weight: 800;
    letter-spacing: -0.04em; line-height: 1; text-transform: uppercase;
    color: #fff;
    text-shadow: 0 0 40px var(--c1), 0 0 90px var(--c3);
    animation: titre-claque 700ms cubic-bezier(0.2, 1.3, 0.3, 1) both 420ms;
}
@keyframes titre-claque {
    0%   { transform: scale(3.2) skewX(-14deg); opacity: 0; filter: blur(14px); letter-spacing: 0.2em; }
    60%  { transform: scale(0.94) skewX(0); opacity: 1; filter: blur(0); letter-spacing: -0.04em; }
    100% { transform: scale(1); opacity: 1; }
}
.triomphe-nom {
    margin-top: 4px;
    font-family: var(--ui); font-size: clamp(20px, 3vw, 30px); font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase;
    color: var(--c1);
    animation: monte 600ms var(--ressort) both 720ms;
}
.triomphe-note { font-size: 14px; color: var(--creme-doux); animation: monte 600ms var(--ressort) both 880ms; }
.triomphe-continuer {
    margin-top: 22px;
    padding: 12px 28px;
    border: 1px solid rgba(255, 255, 255, 0.25); border-radius: 999px;
    background: rgba(255, 255, 255, 0.08); color: #fff;
    font-family: var(--ui); font-size: 12px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase;
    cursor: pointer;
    animation: monte 600ms var(--ressort) both 1300ms;
    transition: background var(--rapide) var(--sortie);
}
.triomphe-continuer:hover { background: rgba(255, 255, 255, 0.16); }
@keyframes monte { from { opacity: 0; transform: translateY(18px); } }

@media (prefers-reduced-motion: reduce) {
    .triomphe, .triomphe-rayons, .triomphe-onde, .triomphe-particules i, .triomphe-heros,
    .triomphe-heros .tuile-embleme, .triomphe-titre, .triomphe-nom, .triomphe-note, .triomphe-continuer { animation: none; }
    .triomphe-onde, .triomphe-particules { display: none; }
}

/* =============================================================================
   Le hall : la salle d'accueil, dans le langage de la boutique
   ============================================================================= */
.hall {
    width: min(1180px, 100%); margin: 0 auto;
    display: flex; flex-direction: column; gap: 34px;
}
/* Chaque table a sa lumière. */
.table-tuile.slots     { --c1: #F3C64B; --c2: #8A5A0E; --c3: rgba(243, 198, 75, 0.55); }
.table-tuile.roulette  { --c1: #FF6B5E; --c2: #6E1410; --c3: rgba(255, 107, 94, 0.5); }
.table-tuile.blackjack { --c1: #6FE0A6; --c2: #0E4A2E; --c3: rgba(111, 224, 166, 0.5); }
.table-tuile.coinflip  { --c1: #FFD27A; --c2: #7A4A0A; --c3: rgba(255, 210, 122, 0.5); }
.table-tuile.dice      { --c1: #9FB8FF; --c2: #1C2A6E; --c3: rgba(159, 184, 255, 0.5); }
.table-tuile.crash     { --c1: #B48CFF; --c2: #3A1A7A; --c3: rgba(180, 140, 255, 0.5); }

/* --- le bandeau d'accueil ------------------------------------------------- */
.hall-bandeau {
    --c1: #F3C64B; --c2: #8A5A0E; --c3: rgba(243, 198, 75, 0.45);
    position: relative; overflow: hidden;
    display: grid; grid-template-columns: minmax(0, 1fr) auto;
    align-items: center; gap: 28px;
    padding: 40px 44px;
    border-radius: 24px;
    background:
        radial-gradient(70% 120% at 100% 50%, var(--c3), transparent 60%),
        linear-gradient(115deg, #17151D 0%, #0E0D13 55%, var(--c2) 150%);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08), 0 40px 80px -40px rgba(0, 0, 0, 1);
    transform: perspective(1400px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
    transition: transform var(--moyen) var(--sortie);
    animation: bandeau-entre 820ms cubic-bezier(0.2, 1.1, 0.3, 1) both;
}
.hall-bandeau::before {
    content: ""; position: absolute; inset: 0; pointer-events: none;
    background: repeating-linear-gradient(-58deg, rgba(255, 255, 255, 0.035) 0 2px, transparent 2px 46px);
}
.hall-lueur {
    position: absolute; inset: 0; pointer-events: none;
    background: radial-gradient(420px 320px at var(--mx, 70%) var(--my, 50%), rgba(255, 255, 255, 0.09), transparent 60%);
}
.hall-texte { position: relative; z-index: 1; min-width: 0; }
.hall-etiquette {
    display: inline-block; margin-bottom: 14px;
    padding: 5px 11px; border-radius: 6px;
    background: rgba(243, 198, 75, 0.14); box-shadow: inset 0 0 0 1px rgba(243, 198, 75, 0.4);
    font-size: 10px; font-weight: 800; letter-spacing: 0.18em; text-transform: uppercase; color: var(--c1);
}
.hall-titre {
    margin: 0 0 12px;
    font-family: var(--ui); font-size: clamp(38px, 5.4vw, 64px); font-weight: 800;
    letter-spacing: -0.04em; line-height: 0.95; text-transform: uppercase; color: #fff;
    animation: nom-entre 900ms var(--ressort) both 200ms;
}
.hall-titre em { font-style: normal; color: var(--c1); text-shadow: 0 0 40px var(--c3); }
.hall-sous { margin: 0; font-size: 15px; color: var(--creme-doux); max-width: 52ch; }
/* Les chiffres du joueur, en colonne à droite. */
.hall-chiffres { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 8px; min-width: 210px; }
.hall-chiffre {
    display: flex; align-items: center; justify-content: space-between; gap: 18px;
    padding: 12px 16px;
    border-radius: 12px;
    background: rgba(0, 0, 0, 0.35); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
    animation: monte 600ms var(--ressort) both;
}
.hall-chiffre:nth-child(2) { animation-delay: 120ms; }
.hall-chiffre:nth-child(3) { animation-delay: 240ms; }
.hall-chiffre-nom { font-size: 10px; font-weight: 800; letter-spacing: 0.16em; text-transform: uppercase; color: var(--creme-faible); }
.hall-chiffre-valeur {
    display: inline-flex; align-items: center; gap: 7px;
    font-family: var(--chiffres); font-size: 17px; font-weight: 600; font-variant-numeric: tabular-nums; color: #fff;
}
.hall-chiffre-valeur small { font-family: var(--ui); font-size: 11px; font-weight: 500; color: var(--creme-faible); }
.hall-chiffre-valeur.or { color: var(--laiton-clair); }
.hall-chiffre.prete { box-shadow: inset 0 0 0 1.5px var(--c1), 0 0 30px -6px var(--c3); animation: monte 600ms var(--ressort) both 240ms, encaisser-pulse 1.4s ease-in-out infinite 1s; }
.hall-recompense {
    padding: 8px 14px; border: 0; border-radius: 8px;
    background: var(--c1); color: #0B0A0E;
    font-family: var(--ui); font-size: 11px; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase;
    cursor: pointer; transition: transform var(--rapide) var(--ressort);
}
.hall-recompense:hover { transform: scale(1.05); }
@media (max-width: 860px) {
    .hall-bandeau { grid-template-columns: 1fr; padding: 28px 24px; }
    .hall-chiffres { flex-direction: row; flex-wrap: wrap; }
    .hall-chiffre { flex: 1 1 140px; }
}

/* --- les tables ------------------------------------------------------------- */
.tables { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 18px; }
.table-tuile {
    position: relative; display: block;
    aspect-ratio: 3 / 4;
    perspective: 1000px;
    text-decoration: none; color: inherit; outline: none;
    animation: tuile-entre 760ms cubic-bezier(0.2, 1.25, 0.3, 1) both;
    animation-delay: calc(180ms + var(--i, 0) * 90ms);
}
.table-face {
    position: absolute; inset: 0;
    display: flex; flex-direction: column;
    border-radius: 18px; overflow: hidden;
    background:
        radial-gradient(90% 55% at 50% 30%, var(--c3), transparent 70%),
        linear-gradient(180deg, #1A1821 0%, #0F0E14 62%, var(--c2) 170%);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08), 0 24px 50px -30px rgba(0, 0, 0, 1);
    transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translateZ(0);
    transition: transform 160ms var(--sortie), box-shadow var(--moyen) var(--sortie);
    will-change: transform;
}
.table-face::before {
    content: ""; position: absolute; inset: 0; pointer-events: none;
    background: repeating-linear-gradient(-58deg, rgba(255, 255, 255, 0.03) 0 2px, transparent 2px 34px);
}
.table-tuile:hover .table-face, .table-tuile:focus-visible .table-face {
    transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translateZ(40px) scale(1.06);
    box-shadow: inset 0 0 0 2px var(--c1), 0 0 0 6px var(--c3), 0 0 90px -6px var(--c3), 0 60px 80px -30px rgba(0, 0, 0, 1);
}
.table-tuile:hover { z-index: 5; }
.table-tuile:hover .tuile-lueur, .table-tuile:hover .tuile-holo { opacity: 1; }
.table-tuile:hover .tuile-holo { opacity: 0.55; }
.table-tuile:hover .tuile-flash { animation: flash-tuile 520ms ease-out both; }
.table-haut {
    position: relative; z-index: 1;
    display: flex; justify-content: space-between; align-items: center;
    padding: 14px 16px 0;
}
.table-etiquette {
    padding: 4px 9px; border-radius: 5px;
    background: rgba(0, 0, 0, 0.45); box-shadow: inset 0 0 0 1px var(--c3);
    font-size: 9.5px; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; color: var(--c1);
}
.table-etat { font-size: 10px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--creme-faible); }
/* L'objet en héros : la vignette dessinée, agrandie. */
.table-heros {
    position: relative; z-index: 1;
    flex: 1; display: grid; place-items: center;
    transition: transform var(--ample) var(--ressort);
    filter: drop-shadow(0 20px 26px rgba(0, 0, 0, 0.75)) drop-shadow(0 0 22px var(--c3));
}
.table-heros .vignette { transform: scale(2.4); }
.table-tuile:hover .table-heros { transform: translateY(-12px) scale(1.16); }
.table-tuile:hover .table-heros .vignette { animation: pop-vignette 700ms var(--ressort) both; }
@keyframes pop-vignette {
    0% { transform: scale(2) rotate(-8deg); }
    50% { transform: scale(2.7) rotate(5deg); }
    100% { transform: scale(2.4) rotate(0); }
}
.table-tuile:hover .anneau { animation: anneau 1.1s ease-out infinite; }
.table-tuile:hover .gerbe i { animation: gerbe 900ms ease-out infinite; }
.table-bas {
    position: relative; z-index: 1;
    padding: 12px 16px 18px;
    background: linear-gradient(180deg, transparent, rgba(0, 0, 0, 0.55) 40%);
    transition: transform var(--moyen) var(--sortie);
}
.table-tuile:hover .table-bas { transform: translateY(-58px); }
.table-nom {
    margin: 0 0 4px;
    font-family: var(--ui); font-size: 20px; font-weight: 800; letter-spacing: -0.02em; line-height: 1.1;
    text-transform: uppercase; color: #fff;
}
.table-desc { margin: 0; font-size: 12.5px; line-height: 1.4; color: var(--creme-doux); }
/* « Prendre place » monte au survol, comme le bouton d'achat. */
.table-entrer {
    position: absolute; left: 18px; right: 18px; bottom: 18px; z-index: 3;
    display: flex; align-items: center; justify-content: center; gap: 10px;
    padding: 12px 20px; border-radius: 12px;
    background: var(--c1); color: #0B0A0E;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.45), 0 10px 26px -10px var(--c3);
    font-family: var(--ui); font-size: 12px; font-weight: 800; letter-spacing: 0.16em; text-transform: uppercase;
    transform: translateY(70px);
    transition: transform 420ms cubic-bezier(0.2, 1.6, 0.3, 1);
}
.table-tuile:hover .table-entrer, .table-tuile:focus-visible .table-entrer { transform: translateY(0); }
.table-entrer svg { transition: transform var(--moyen) var(--ressort); }
.table-tuile:hover .table-entrer svg { transform: translateX(5px); }
.table-tuile.fermee { pointer-events: none; }
.table-tuile.fermee .table-face { filter: saturate(0.3) brightness(0.6); }

/* --- le podium --------------------------------------------------------------- */
/* Trois marches centrées ; s'il n'y a qu'un ou deux joueurs classés, les
   marches restent au milieu au lieu de s'étaler à gauche. */
.podium {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 300px)); gap: 14px;
    justify-content: center; align-items: end;
}
.marche {
    position: relative;
    display: flex; flex-direction: column; align-items: center; gap: 6px;
    padding: 22px 16px 18px;
    border-radius: 16px;
    background: linear-gradient(180deg, #1A1821, #0F0E14);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08), 0 24px 50px -30px rgba(0, 0, 0, 1);
    animation: monte 700ms var(--ressort) both;
}
.marche.m1 { order: 2; padding-top: 30px; --m1: #F3C64B; --m3: rgba(243, 198, 75, 0.5); box-shadow: inset 0 0 0 1.5px var(--m1), 0 0 60px -10px var(--m3), 0 24px 50px -30px rgba(0, 0, 0, 1); animation-delay: 80ms; }
.marche.m2 { order: 1; --m1: #D8DEE8; --m3: rgba(216, 222, 232, 0.35); animation-delay: 200ms; }
.marche.m3 { order: 3; --m1: #D48A5A; --m3: rgba(212, 138, 90, 0.4); animation-delay: 320ms; }
.marche-rang {
    width: 44px; height: 44px; border-radius: 50%;
    display: grid; place-items: center;
    background: var(--m1); color: #0B0A0E;
    font-family: var(--ui); font-size: 18px; font-weight: 800;
    box-shadow: 0 0 30px -4px var(--m3), inset 0 1px 0 rgba(255, 255, 255, 0.5);
}
.marche.m1 .marche-rang { width: 56px; height: 56px; font-size: 22px; }
.marche-nom { font-family: var(--ui); font-size: 15px; font-weight: 800; text-transform: uppercase; letter-spacing: -0.01em; color: #fff; text-align: center; }
.marche.m1 .marche-nom { font-size: 18px; }
.marche-solde {
    display: inline-flex; align-items: center; gap: 7px;
    font-family: var(--chiffres); font-size: 15px; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--laiton-clair);
}
.suite { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; }
.suite .achat { grid-template-columns: minmax(0, 1fr) auto; }
.suite-rang { display: inline-block; width: 22px; margin-right: 10px; font-family: var(--chiffres); font-weight: 500; color: var(--creme-faible); }
@media (max-width: 700px) { .podium { grid-template-columns: 1fr; } .marche { order: initial !important; } }

@media (prefers-reduced-motion: reduce) {
    .hall-bandeau, .hall-titre, .hall-chiffre, .table-tuile, .marche { animation: none; }
    .table-tuile:hover .table-heros .vignette, .table-tuile:hover .anneau, .table-tuile:hover .gerbe i, .table-tuile:hover .tuile-flash { animation: none; }
}

/* =============================================================================
   La salle d'accueil : la rampe et l'anneau des tables
   ============================================================================= */
.salle-accueil {
    width: min(1240px, 100%); margin: 0 auto;
    display: flex; flex-direction: column; gap: 26px;
}
.affiche.slots     { --c1: #F3C64B; --c2: #8A5A0E; --c3: rgba(243, 198, 75, 0.55); }
.affiche.roulette  { --c1: #FF6B5E; --c2: #6E1410; --c3: rgba(255, 107, 94, 0.5); }
.affiche.blackjack { --c1: #6FE0A6; --c2: #0E4A2E; --c3: rgba(111, 224, 166, 0.5); }
.affiche.coinflip  { --c1: #FFD27A; --c2: #7A4A0A; --c3: rgba(255, 210, 122, 0.5); }
.affiche.dice      { --c1: #9FB8FF; --c2: #1C2A6E; --c3: rgba(159, 184, 255, 0.5); }
.affiche.crash     { --c1: #B48CFF; --c2: #3A1A7A; --c3: rgba(180, 140, 255, 0.5); }

/* --- la rampe ---------------------------------------------------------------- */
.rampe {
    display: flex; align-items: flex-end; justify-content: space-between; gap: 30px; flex-wrap: wrap;
    padding: 6px 8px 0;
}
.rampe-etiquette {
    display: inline-block; margin-bottom: 10px;
    font-size: 10px; font-weight: 800; letter-spacing: 0.22em; text-transform: uppercase; color: var(--laiton);
    animation: monte 600ms var(--ressort) both;
}
.rampe-titre {
    margin: 0 0 8px;
    font-family: var(--ui); font-size: clamp(36px, 5vw, 60px); font-weight: 800;
    letter-spacing: -0.04em; line-height: 0.95; text-transform: uppercase; color: #fff;
    animation: nom-entre 900ms var(--ressort) both 120ms;
}
.rampe-titre em { font-style: normal; color: var(--laiton-clair); text-shadow: 0 0 40px rgba(243, 220, 155, 0.5); }
.rampe-sous { margin: 0; font-size: 15px; color: var(--creme-doux); max-width: 50ch; animation: monte 600ms var(--ressort) both 300ms; }
.rampe-chiffres { display: flex; gap: 10px; flex-wrap: wrap; }
.compteur {
    display: flex; flex-direction: column; align-items: flex-end; gap: 2px;
    min-width: 150px;
    padding: 14px 18px 12px;
    border-radius: 14px;
    background: var(--surface); border: 1px solid var(--bord);
    animation: monte 600ms var(--ressort) both;
}
.compteur:nth-child(2) { animation-delay: 120ms; }
.compteur:nth-child(3) { animation-delay: 240ms; }
.compteur-valeur {
    font-family: var(--chiffres); font-size: 30px; font-weight: 600; font-variant-numeric: tabular-nums;
    letter-spacing: -0.03em; line-height: 1; color: #fff;
}
.compteur-valeur.or { color: var(--laiton-clair); text-shadow: 0 0 24px rgba(243, 220, 155, 0.45); }
.compteur-nom { font-size: 10px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--creme-faible); }
.compteur.prete { border-color: var(--laiton); box-shadow: 0 0 40px -8px rgba(201, 162, 39, 0.8); animation: monte 600ms var(--ressort) both 240ms, encaisser-pulse 1.4s ease-in-out infinite 1s; }
.compteur-bouton {
    padding: 8px 16px; border: 0; border-radius: 8px;
    background: var(--laiton); color: #0B0A0E;
    font-family: var(--ui); font-size: 12px; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase;
    cursor: pointer; transition: transform var(--rapide) var(--ressort);
}
.compteur-bouton:hover { transform: scale(1.05); }

/* --- la scène : l'anneau des tables ------------------------------------------ */
.scene-tables {
    position: relative;
    height: 560px;
    perspective: 1300px;
    perspective-origin: 50% 40%;
    overflow: hidden;
    border-radius: 24px;
    background:
        radial-gradient(60% 40% at 50% 0%, rgba(255, 255, 255, 0.06), transparent 70%),
        linear-gradient(180deg, #0F0E14 0%, #08070A 100%);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06), inset 0 -120px 160px -100px rgba(0, 0, 0, 1);
    user-select: none; cursor: grab;
    animation: scene-entre 900ms cubic-bezier(0.2, 1.1, 0.3, 1) both;
    touch-action: pan-y;
}
.scene-tables:active { cursor: grabbing; }
@keyframes scene-entre { from { opacity: 0; transform: translateY(30px) scale(0.98); filter: blur(10px); } }
/* Le nom de la table de devant, en géant derrière l'anneau. */
.scene-nom {
    position: absolute; left: 50%; top: 42%; transform: translate(-50%, -50%);
    font-family: var(--ui); font-size: clamp(90px, 16vw, 210px); font-weight: 800;
    letter-spacing: -0.06em; line-height: 1; text-transform: uppercase; white-space: nowrap;
    color: transparent; -webkit-text-stroke: 1px rgba(255, 255, 255, 0.1);
    pointer-events: none;
}
.scene-nom.change { animation: scene-nom 700ms cubic-bezier(0.2, 1.2, 0.3, 1) both; }
@keyframes scene-nom {
    from { opacity: 0; transform: translate(-50%, -50%) scale(1.3); -webkit-text-stroke-color: rgba(255, 255, 255, 0.5); filter: blur(8px); }
}
/* Le sol : une nappe de lumière sous l'anneau, avec les reflets. */
.scene-sol {
    position: absolute; left: 50%; bottom: 40px; width: 900px; height: 160px; margin-left: -450px;
    border-radius: 50%;
    background: radial-gradient(ellipse at center, rgba(255, 255, 255, 0.07), transparent 65%);
    transform: perspective(600px) rotateX(70deg);
    pointer-events: none;
}
.anneau3d {
    position: absolute; left: 50%; top: 50%;
    width: 280px; height: 380px; margin: -190px 0 0 -140px;
    transform-style: preserve-3d;
    will-change: transform;
}
/* Une affiche : une grande carte de table, orientée sur l'anneau. */
.affiche {
    position: absolute; inset: 0;
    display: flex; flex-direction: column;
    border-radius: 20px; overflow: hidden;
    text-decoration: none; color: inherit;
    background:
        radial-gradient(90% 55% at 50% 30%, var(--c3), transparent 70%),
        linear-gradient(180deg, #1A1821 0%, #0F0E14 62%, var(--c2) 170%);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1), 0 40px 60px -30px rgba(0, 0, 0, 1);
    backface-visibility: hidden;
    /* Les affiches de côté et de derrière s'assombrissent avec `--recul`. */
    filter: brightness(calc(1 - var(--recul, 0) * 0.75)) saturate(calc(1 - var(--recul, 0) * 0.6));
    transition: filter var(--moyen) var(--sortie), box-shadow var(--moyen) var(--sortie);
    outline: none;
}
.affiche::before {
    content: ""; position: absolute; inset: 0; pointer-events: none;
    background: repeating-linear-gradient(-58deg, rgba(255, 255, 255, 0.03) 0 2px, transparent 2px 34px);
}
/* Le reflet sur le sol : la même affiche, renversée et fondue. */
.affiche { -webkit-box-reflect: below 14px linear-gradient(transparent 70%, rgba(0, 0, 0, 0.35)); }
.affiche.devant {
    box-shadow: inset 0 0 0 2px var(--c1), 0 0 0 6px var(--c3), 0 0 100px -10px var(--c3), 0 60px 80px -30px rgba(0, 0, 0, 1);
}
.affiche-lueur {
    position: absolute; inset: 0; pointer-events: none;
    background: radial-gradient(240px 200px at 50% 30%, rgba(255, 255, 255, 0.1), transparent 60%);
    opacity: 0; transition: opacity var(--moyen) var(--sortie);
}
.affiche.devant .affiche-lueur { opacity: 1; }
.affiche-haut {
    position: relative; z-index: 1;
    display: flex; justify-content: space-between; align-items: center;
    padding: 16px 18px 0;
}
.affiche-etiquette {
    padding: 4px 9px; border-radius: 5px;
    background: rgba(0, 0, 0, 0.45); box-shadow: inset 0 0 0 1px var(--c3);
    font-size: 9.5px; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; color: var(--c1);
}
.affiche-etat { font-size: 10px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--creme-faible); }
.affiche-heros {
    position: relative; z-index: 1;
    flex: 1; display: grid; place-items: center;
    filter: drop-shadow(0 20px 26px rgba(0, 0, 0, 0.75)) drop-shadow(0 0 22px var(--c3));
}
.affiche-heros .vignette { transform: scale(2.6); transition: transform var(--ample) var(--ressort); }
.affiche.devant .affiche-heros .vignette { animation: affiche-heros 3.2s ease-in-out infinite; }
@keyframes affiche-heros { 50% { transform: scale(2.8) translateY(-6px) rotate(-3deg); } }
/* L'orbite : un anneau qui tourne autour de l'objet de la table de devant. */
.orbite {
    position: absolute; left: 50%; top: 50%; width: 190px; height: 190px; margin: -95px 0 0 -95px;
    border-radius: 50%;
    background: conic-gradient(from 0deg, transparent 0 22%, var(--c1) 30%, transparent 38%, transparent 62%, var(--c1) 70%, transparent 78%);
    -webkit-mask: radial-gradient(circle, transparent 62%, #000 64%, #000 67%, transparent 69%);
    mask: radial-gradient(circle, transparent 62%, #000 64%, #000 67%, transparent 69%);
    opacity: 0; transition: opacity var(--moyen) var(--sortie);
}
.affiche.devant .orbite { opacity: 1; animation: halo-tourne 6s linear infinite; }
.affiche-bas {
    position: relative; z-index: 1;
    padding: 12px 18px 18px;
    background: linear-gradient(180deg, transparent, rgba(0, 0, 0, 0.6) 40%);
}
.affiche-nom {
    margin: 0 0 4px;
    font-family: var(--ui); font-size: 22px; font-weight: 800; letter-spacing: -0.02em; line-height: 1.1;
    text-transform: uppercase; color: #fff;
}
.affiche-desc { margin: 0 0 12px; font-size: 12.5px; line-height: 1.4; color: var(--creme-doux); }
.affiche-entrer {
    display: flex; align-items: center; justify-content: center; gap: 10px;
    padding: 12px 20px; border-radius: 12px;
    background: var(--c1); color: #0B0A0E;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.45), 0 10px 26px -10px var(--c3);
    font-family: var(--ui); font-size: 12px; font-weight: 800; letter-spacing: 0.16em; text-transform: uppercase;
    opacity: 0; transform: translateY(10px);
    transition: opacity var(--moyen) var(--sortie), transform 420ms cubic-bezier(0.2, 1.6, 0.3, 1);
}
.affiche.devant .affiche-entrer { opacity: 1; transform: translateY(0); }
.affiche.devant:hover .affiche-entrer { filter: brightness(1.1); }
.affiche.devant:hover .affiche-entrer svg { transform: translateX(5px); }
.affiche-entrer svg { transition: transform var(--moyen) var(--ressort); }
.affiche.fermee { filter: brightness(0.35) saturate(0.2); }
.affiche.fermee .affiche-entrer { background: rgba(255, 255, 255, 0.1); color: var(--creme-faible); box-shadow: none; }

/* Les flèches et les points. */
.scene-fleche {
    position: absolute; top: 50%; z-index: 5;
    width: 52px; height: 52px; margin-top: -26px;
    border: 1px solid rgba(255, 255, 255, 0.14); border-radius: 50%;
    background: rgba(8, 7, 10, 0.7); color: #fff;
    backdrop-filter: blur(6px);
    display: grid; place-items: center;
    cursor: pointer;
    transition: background var(--rapide) var(--sortie), transform var(--rapide) var(--ressort);
}
.scene-fleche svg { width: 22px; height: 22px; }
.scene-fleche.gauche { left: 22px; }
.scene-fleche.droite { right: 22px; }
.scene-fleche:hover { background: rgba(255, 255, 255, 0.12); transform: scale(1.08); }
.scene-fleche:active { transform: scale(0.94); }
.scene-points {
    position: absolute; left: 50%; bottom: 18px; transform: translateX(-50%); z-index: 5;
    display: flex; gap: 8px;
}
.scene-point {
    width: 8px; height: 8px; border: 0; border-radius: 50%; padding: 0;
    background: rgba(255, 255, 255, 0.22); cursor: pointer;
    transition: transform var(--rapide) var(--ressort), background var(--rapide) var(--sortie), width var(--moyen) var(--sortie);
}
.scene-point.actif { width: 26px; border-radius: 4px; background: var(--laiton-clair); }
.scene-point:hover { transform: scale(1.3); }

/* --- le mur des fortunes ------------------------------------------------------ */
.mur-titre {
    display: flex; align-items: center; gap: 12px; margin: 6px 0 16px;
    font-family: var(--ui); font-size: 22px; font-weight: 800; letter-spacing: -0.02em; text-transform: uppercase; color: #fff;
}
.mur-titre::before { content: ""; width: 5px; height: 24px; border-radius: 3px; background: var(--laiton); box-shadow: 0 0 14px rgba(201, 162, 39, 0.6); }

@media (max-width: 720px) {
    .scene-tables { height: 480px; }
    .anneau3d { width: 230px; height: 330px; margin: -165px 0 0 -115px; }
    .scene-nom { font-size: 70px; }
}
@media (prefers-reduced-motion: reduce) {
    .scene-tables, .rampe-titre, .rampe-sous, .rampe-etiquette, .compteur, .scene-nom.change,
    .affiche.devant .affiche-heros .vignette, .affiche.devant .orbite { animation: none; }
}