/* DropCashCasino — couche d'ambiance « Lounge » (chargée après app.css).
   Fond du site, univers propres à chaque section, illustrations néon et habillage commun des cartes.
   Couleurs : uniquement les jetons du kit ; les transparences sont mélangées avec color-mix() à partir de ces jetons.
   Tout est décoratif (pseudo-éléments, SVG aria-hidden) : le contenu, l'ordre de lecture et les contrastes ne changent pas. */

:root {
  --nl-haze: url("/assets/img/bg/lounge-haze-v1.jpg");
  --nl-grain: url("/assets/img/bg/grain-v2.png");
  --nl-line: color-mix(in srgb, var(--dc-lumiere) 7%, transparent);
  --nl-violet-glow: color-mix(in srgb, var(--dc-violet) 26%, transparent);
  --nl-vert-glow: color-mix(in srgb, var(--dc-vert) 16%, transparent);
  --nl-fade-y: linear-gradient(180deg, transparent, var(--dc-nuit) 14%, var(--dc-nuit) 86%, transparent);
  --nl-card-bg: color-mix(in srgb, var(--dc-velours) 94%, transparent);
  --nl-card-sheen: linear-gradient(180deg, color-mix(in srgb, var(--dc-lumiere) 4%, transparent), transparent 140px);
  --nl-card-shadow: inset 0 1px 0 color-mix(in srgb, var(--dc-lumiere) 8%, transparent), 0 26px 50px -30px var(--dc-nuit);
}

/* ---------- Fond du site : la salle vue à travers la brume ---------- */
body { background: transparent; position: relative; }
body::before, body::after { content: ""; position: fixed; inset: 0; pointer-events: none; }
body::before {
  z-index: -2;
  background:
    radial-gradient(130% 85% at 50% 38%, transparent 30%, color-mix(in srgb, var(--dc-nuit) 88%, transparent) 78%),
    linear-gradient(180deg, color-mix(in srgb, var(--dc-nuit) 35%, transparent), color-mix(in srgb, var(--dc-nuit) 70%, transparent)),
    var(--nl-haze) center 30% / cover no-repeat;
  background:
    radial-gradient(130% 85% at 50% 38%, transparent 30%, color-mix(in srgb, var(--dc-nuit) 88%, transparent) 78%),
    linear-gradient(180deg, color-mix(in srgb, var(--dc-nuit) 35%, transparent), color-mix(in srgb, var(--dc-nuit) 70%, transparent)),
    image-set(url("../img/bg/lounge-haze-v1.avif") type("image/avif"), url("../img/bg/lounge-haze-v1.webp") type("image/webp"), url("../img/bg/lounge-haze-v1.jpg") type("image/jpeg")) center 30% / cover no-repeat;
  opacity: .6;
}
body::after { z-index: -1; background: var(--nl-grain) 0 0 / 128px 128px repeat; opacity: .4; }

/* En-tête translucide : la brume reste visible sous la navigation */
/* Le flou est porté par un pseudo-élément : un backdrop-filter sur l'en-tête lui-même deviendrait le bloc conteneur
   des éléments fixes qu'il contient (menu mobile plein écran) et les réduirait à la hauteur de l'en-tête. */
.site-header { background: transparent; }
.site-header::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: var(--dc-nuit); /* repli sans color-mix() */
  background: color-mix(in srgb, var(--dc-nuit) 86%, transparent);
  -webkit-backdrop-filter: blur(16px) saturate(1.3); backdrop-filter: blur(16px) saturate(1.3);
}
.mobile-nav__panel { background: var(--dc-nuit); }

/* Pied de page : comptoir du bar, reflet violet sous la ligne néon */
.site-footer { position: relative; isolation: isolate; background: color-mix(in srgb, var(--dc-footer) 92%, transparent); }
.site-footer::before, .site-footer::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.site-footer::before { background: radial-gradient(60% 120px at 50% 0, color-mix(in srgb, var(--dc-violet) 18%, transparent), transparent 70%); }
.site-footer::after { background: var(--nl-grain) 0 0 / 128px 128px repeat; opacity: .35; }

/* ---------- Univers des sections ----------
   .zone + .zone--{univers} sur une section existante : la bande décorative déborde sur toute la largeur de l'écran
   (100vw, sans défilement horizontal grâce à overflow-x: clip sur body) et s'efface en haut et en bas. */
.zone { position: relative; isolation: isolate; }
.zone::before, .zone::after {
  content: ""; position: absolute; z-index: -1; pointer-events: none;
  top: -64px; bottom: -64px; left: 50%; width: 100vw; margin-left: -50vw;
  -webkit-mask-image: var(--nl-fade-y); mask-image: var(--nl-fade-y);
}
@media (max-width: 767px) { .zone::before, .zone::after { top: -28px; bottom: -28px; } }

/* Registre : page de grand livre, lignes réglées et marge rouge… ici violette */
.zone--ledger::before {
  background:
    linear-gradient(90deg, transparent calc(50% - 660px), color-mix(in srgb, var(--dc-violet) 30%, transparent) calc(50% - 660px), color-mix(in srgb, var(--dc-violet) 30%, transparent) calc(50% - 658px), transparent calc(50% - 658px)),
    repeating-linear-gradient(180deg, transparent 0 35px, color-mix(in srgb, var(--dc-violet-texte) 9%, transparent) 35px 36px);
}
.zone--ledger::after { background: radial-gradient(45% 60% at 12% 30%, var(--nl-violet-glow), transparent 70%); opacity: .55; }

/* Catalogue : feutre de table et bord de table en néon (vert et violet, comme sur la photo du héros) */
.zone--felt::before {
  background:
    radial-gradient(75% 55% at 50% 45%, color-mix(in srgb, var(--dc-violet-fond) 26%, transparent), transparent 75%),
    radial-gradient(40% 30% at 50% 100%, color-mix(in srgb, var(--dc-violet) 14%, transparent), transparent 80%);
}
.zone--felt::after {
  background:
    radial-gradient(130% 75% at 50% 132%, transparent 62.6%, color-mix(in srgb, var(--dc-violet) 55%, transparent) 62.8%, color-mix(in srgb, var(--dc-violet) 55%, transparent) 63.05%, transparent 63.3%),
    radial-gradient(130% 75% at 50% 132%, transparent 61.2%, color-mix(in srgb, var(--dc-violet) 22%, transparent) 62.9%, transparent 64.8%),
    radial-gradient(130% 75% at 50% 132%, transparent 60.1%, color-mix(in srgb, var(--dc-vert) 32%, transparent) 60.2%, color-mix(in srgb, var(--dc-vert) 32%, transparent) 60.32%, transparent 60.45%);
}

/* Comparatif : tableau d'affichage à LED (matrice de points) */
.zone--board::before {
  background: radial-gradient(circle, color-mix(in srgb, var(--dc-lumiere) 9%, transparent) 1.1px, transparent 1.7px) 0 0 / 14px 14px;
  -webkit-mask-image: radial-gradient(70% 70% at 50% 50%, var(--dc-nuit), transparent 85%); mask-image: radial-gradient(70% 70% at 50% 50%, var(--dc-nuit), transparent 85%);
}
.zone--board::after { background: radial-gradient(40% 55% at 88% 70%, var(--nl-vert-glow), transparent 70%); }

/* Caisse : barreaux du guichet */
.zone--vault::before {
  background:
    repeating-linear-gradient(90deg, transparent 0 26px, color-mix(in srgb, var(--dc-violet-texte) 8%, transparent) 26px 28px),
    linear-gradient(180deg, transparent 20%, color-mix(in srgb, var(--dc-violet-texte) 14%, transparent) 20%, color-mix(in srgb, var(--dc-violet-texte) 14%, transparent) calc(20% + 2px), transparent calc(20% + 2px));
  -webkit-mask-image: radial-gradient(60% 75% at 50% 50%, var(--dc-nuit), transparent 90%); mask-image: radial-gradient(60% 75% at 50% 50%, var(--dc-nuit), transparent 90%);
}
.zone--vault::after { background: radial-gradient(35% 50% at 20% 80%, var(--nl-vert-glow), transparent 70%); }

/* Méthode : plan technique (quadrillage fin et mailles majeures) */
.zone--blueprint::before {
  background:
    linear-gradient(color-mix(in srgb, var(--dc-violet-texte) 13%, transparent) 1px, transparent 1px) 0 0 / 120px 120px,
    linear-gradient(90deg, color-mix(in srgb, var(--dc-violet-texte) 13%, transparent) 1px, transparent 1px) 0 0 / 120px 120px,
    linear-gradient(var(--nl-line) 1px, transparent 1px) 0 0 / 24px 24px,
    linear-gradient(90deg, var(--nl-line) 1px, transparent 1px) 0 0 / 24px 24px;
  -webkit-mask-image: radial-gradient(65% 75% at 50% 45%, var(--dc-nuit), transparent 88%); mask-image: radial-gradient(65% 75% at 50% 45%, var(--dc-nuit), transparent 88%);
  opacity: .55;
}
.zone--blueprint::after { background: radial-gradient(40% 50% at 85% 20%, var(--nl-violet-glow), transparent 70%); opacity: .8; }

/* Guides : murs de la salle, rubans LED verticaux à gauche (violet) et à droite (vert) */
.zone--library::before {
  background:
    linear-gradient(90deg, transparent calc(50% - 700px), var(--dc-violet) calc(50% - 700px), var(--dc-violet) calc(50% - 698px), transparent calc(50% - 698px), transparent calc(50% + 698px), var(--dc-vert) calc(50% + 698px), var(--dc-vert) calc(50% + 700px), transparent calc(50% + 700px)),
    linear-gradient(90deg, transparent calc(50% - 730px), color-mix(in srgb, var(--dc-violet) 20%, transparent) calc(50% - 699px), transparent calc(50% - 668px), transparent calc(50% + 668px), color-mix(in srgb, var(--dc-vert) 14%, transparent) calc(50% + 699px), transparent calc(50% + 730px));
}
.zone--library::after { background: radial-gradient(50% 40% at 50% 0%, color-mix(in srgb, var(--dc-lumiere) 5%, transparent), transparent 75%); }

/* Salle calme : aucune lumière colorée (affiliation, jeu responsable) */
.zone--calm::before { background: radial-gradient(60% 60% at 50% 50%, color-mix(in srgb, var(--dc-champ) 70%, transparent), transparent 80%); }

/* Vigilance : hachures orange très discrètes (réservé aux pages de vigilance) */
.zone--alert::before {
  background: repeating-linear-gradient(135deg, transparent 0 18px, color-mix(in srgb, var(--dc-alerte) 6%, transparent) 18px 20px);
  -webkit-mask-image: radial-gradient(60% 70% at 50% 40%, var(--dc-nuit), transparent 85%); mask-image: radial-gradient(60% 70% at 50% 40%, var(--dc-nuit), transparent 85%);
}

/* Recherche : lignes de balayage */
.zone--scan::before {
  background:
    linear-gradient(180deg, transparent 38%, color-mix(in srgb, var(--dc-vert) 10%, transparent) 40%, transparent 42%),
    repeating-linear-gradient(180deg, transparent 0 5px, color-mix(in srgb, var(--dc-lumiere) 3.5%, transparent) 5px 6px);
}

/* Documents (légal, à propos) : tampon en filigrane */
.zone--document::before {
  background:
    radial-gradient(circle at calc(50% + 470px) 120px, transparent 118px, color-mix(in srgb, var(--dc-violet-texte) 14%, transparent) 119px, transparent 121px, transparent 134px, color-mix(in srgb, var(--dc-violet-texte) 10%, transparent) 135px, transparent 137px),
    repeating-linear-gradient(180deg, transparent 0 47px, color-mix(in srgb, var(--dc-lumiere) 4%, transparent) 47px 48px);
}

/* Brouillard (404, région) : deux nappes de lumière */
.zone--fog::before {
  background:
    radial-gradient(40% 45% at 25% 40%, color-mix(in srgb, var(--dc-violet) 20%, transparent), transparent 70%),
    radial-gradient(35% 40% at 75% 65%, color-mix(in srgb, var(--dc-vert) 10%, transparent), transparent 70%);
}

/* ---------- Cartes : base commune (surface en relief du système de design, reflet haut, élévation douce) ----------
   Les interactions (survol, appui, lumière de pointeur) sont centralisées dans system.css. */
.card, .casino-card, .pending, .filters, .table-wrap, .notice:not(.notice--alert), .home-kpis {
  background: var(--nl-card-sheen), var(--ds-surface-raised);
  box-shadow: var(--ds-elev-1);
}
.card--dashed, .pending { background: color-mix(in srgb, var(--dc-velours) 72%, transparent); }
.card--lit, .casino-card.card--lit { box-shadow: var(--ds-elev-2), var(--dc-halo-carte); }
a.card:focus-visible, .pending-row:has(:focus-visible) { box-shadow: var(--dc-focus), var(--ds-elev-1); }

/* ---------- Illustrations néon (App\View\NeonArt) ---------- */
.na { display: block; width: 100%; height: 100%; }
.na * { vector-effect: non-scaling-stroke; }
.na-glow > *, .na-core > *, .na-refl, .na-glow g > *, .na-core g > *, .na-refl * { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.na-glow { opacity: .16; }
.na-glow * { stroke-width: 8px; }
.na-core * { stroke-width: 1.8px; }
.na-refl { opacity: .1; }
.na-refl * { stroke-width: 2px; }
.na.tint-v .na-glow .na-p, .na.tint-g .na-glow .na-s { stroke: var(--dc-violet); }
.na.tint-v .na-core .na-p, .na.tint-g .na-core .na-s, .na.tint-v .na-refl .na-p { stroke: var(--dc-violet-texte); }
.na.tint-g .na-glow .na-p, .na.tint-v .na-glow .na-s { stroke: var(--dc-vert); }
.na.tint-g .na-core .na-p, .na.tint-v .na-core .na-s, .na.tint-g .na-refl .na-p { stroke: var(--dc-vert-clair); }
.na.tint-w .na-glow * { stroke: var(--dc-lumiere); }
.na.tint-w .na-core *, .na.tint-w .na-refl * { stroke: var(--dc-lumiere); }
.na.tint-w .na-glow { opacity: .07; }
.na-core .na-s { opacity: .8; }
.na-dots .na-d { fill: var(--dc-lumiere); opacity: .5; }
.na.tint-v .na-dots .na-dp { fill: var(--dc-violet-texte); }
.na.tint-g .na-dots .na-dp, .na.tint-w .na-dots .na-dp { fill: var(--dc-vert-clair); }
.na.tint-w .na-dots .na-dp { fill: var(--dc-lumiere); }
.na-pool ellipse { stroke: none; }
.na.tint-v .na-pool ellipse { fill: color-mix(in srgb, var(--dc-violet) 9%, transparent); }
.na.tint-g .na-pool ellipse { fill: color-mix(in srgb, var(--dc-vert) 7%, transparent); }
.na.tint-w .na-pool ellipse { fill: color-mix(in srgb, var(--dc-lumiere) 4%, transparent); }

@media print {
  body::before, body::after, .zone::before, .zone::after, .na { display: none; }
}