/* ============================================================
   Roulette FnB — Design System
   ============================================================ */

/* ── Variables ───────────────────────────────────────────── */
:root {
  /* ── Le Deli Bar — thème sombre "jungle nights" ─────────────
     Le design system est piloté par variables : on inverse ici la
     palette claire d'origine en palette sombre. --white sert de
     SURFACE (cartes, header, inputs) ; le texte sur accent est
     forcé en blanc via un bloc d'override en fin de fichier. */
  --red:        #d12f3f;   /* neon-red Delibar */
  --red-dark:   #a5202e;
  --red-light:  #e9606d;
  --dark:       #050608;
  --dark-card:  #0f1118;

  /* Échelle de gris INVERSÉE : 900 = plus clair (texte), 50 = surface */
  --gray-900:   #f5f7ff;   /* titres / texte fort  */
  --gray-800:   #e8ecf7;   /* texte courant        */
  --gray-700:   #d3d9e8;
  --gray-600:   #b3bacb;   /* texte atténué        */
  --gray-500:   #9198ac;   /* texte atténué        */
  --gray-400:   #727a90;
  --gray-300:   #363c49;   /* filets / séparateurs */
  --gray-200:   #262b37;   /* bordures             */
  --gray-100:   #1a1f2a;   /* remplissages subtils */
  --gray-50:    #0d0f16;   /* fonds de section     */
  --white:      #141824;   /* SURFACE (cartes...)  */

  --shadow-sm:  0 1px 3px rgba(0,0,0,.40), 0 1px 2px rgba(0,0,0,.30);
  --shadow:     0 18px 60px rgba(0,0,0,.55);   /* valeur exacte ledelibar.ch */
  --shadow-lg:  0 24px 60px rgba(0,0,0,.60), 0 8px 16px rgba(0,0,0,.45);
  --shadow-red: 0 8px 24px rgba(209,47,63,.40);

  /* ledelibar.ch n'utilise AUCUN arrondi : les angles droits sont l'un des
     marqueurs d'identité du site. Le design system étant piloté par variables,
     mettre les rayons à 0 bascule toute l'app d'un coup.
     --radius-full reste circulaire (pastilles de couleur, avatars, roue). */
  --radius-sm:  0;
  --radius:     0;
  --radius-lg:  0;
  --radius-xl:  0;
  --radius-full:9999px;

  --font: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --mono: 'JetBrains Mono', 'Fira Code', 'Courier New', monospace;

  --header-h:   70px;   /* .nav-inner min-height du site */
  --max:        1220px; /* .container du site */
  --trans:      .2s cubic-bezier(.4,0,.2,1);

  /* Tokens Delibar (repris du site ledelibar.ch) */
  --bg:         #07080a;
  --bg-soft:    #0f1118;
  --panel:      #0a0c12;
  --ink:        #f5f7ff;
  --muted:      #afb7cb;
  --line:       rgba(255,255,255,.14);
  --neon-red:   #d12f3f;
  --terracotta: #bf5f41;
  --electric:   #936349;   /* valeur exacte du site : aplats, dégradés, gros titres */
  /* Le bronze du site ne donne que 3.93:1 sur --bg : insuffisant (WCAG AA exige
     4.5:1) pour les petits textes en capitales (kickers ~12px, liens de nav).
     Variante éclaircie à teinte (21°) et saturation identiques → 4.56:1.
     Écart visuel imperceptible ; repasser à --electric pour du pixel-perfect. */
  --electric-text: #a16c50;

  /* Accent par établissement (surchargé inline). */
  --accent:     #d12f3f;
  --accent-ink: #ffffff;
}

/* ── Reset ───────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--font);
  font-size: 15px;
  line-height: 1.6;
  color: var(--ink);
  /* Halos radiaux du site : bleu en haut à droite, rouge Delibar à gauche. */
  background:
    radial-gradient(circle at 85% -20%, rgba(39,107,255,.26), transparent 55%),
    radial-gradient(circle at -5% 20%, rgba(209,47,63,.20), transparent 45%),
    var(--bg);
  /* Pas de background-attachment: fixed — bogué sur iOS Safari, et le site ne
     l'utilise pas non plus (le grain fixe de body::before suffit à l'effet). */
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

/* ── Effet jungle ────────────────────────────────────────────
   Canopée de fougères (jungle-texture.jpg, 11 Ko, dérivée de l'image hero du
   site par scripts/fetch_brand_assets.py) posée en vignette : dense sur les
   bords, effacée au centre par un masque radial pour ne jamais gêner la
   lecture. z-index -1 = au-dessus des halos du body, sous tout le contenu.
   Le flou est cuit dans le fichier (pas de filter: blur(), trop coûteux
   en GPU sur mobile). Sans support de mask-image, dégrade en texture
   uniforme très discrète — acceptable. */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image: url('../img/jungle-texture.jpg');
  background-size: cover;
  background-position: center;
  opacity: .22;
  -webkit-mask-image: radial-gradient(ellipse 62% 58% at 50% 45%, transparent 35%, #000 100%);
  mask-image: radial-gradient(ellipse 62% 58% at 50% 45%, transparent 35%, #000 100%);
}

/* Grain + scanlines : texture "festival underground" reprise du site.
   Fixe, non cliquable, sous le header (z-index 100) pour ne rien intercepter. */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  opacity: .08;
  z-index: 3;
  background-image:
    linear-gradient(transparent 96%, rgba(255,255,255,.2) 100%),
    radial-gradient(circle at 20% 20%, rgba(255,255,255,.2) 1px, transparent 1px);
  background-size: 3px 3px, 4px 4px;
}
a { color: inherit; text-decoration: none; }
img, svg, video { display: block; max-width: 100%; }
button, input, select, textarea {
  font: inherit;
  border: none;
  outline: none;
  background: transparent;
}
/* Signature typographique du site : titres en CAPITALES, interlettrage ouvert,
   interlignage serré (line-height .95). Appliqué à h1–h3 comme sur ledelibar.ch ;
   h4–h6 restent en casse normale (libellés de formulaires, colonnes de tableaux). */
h1, h2, h3, .brand {
  font-family: var(--font);
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  line-height: .95;
}
h4,h5,h6 { line-height: 1.25; font-weight: 700; }
ul, ol { list-style: none; }

/* Sur-titre du site : petites capitales très espacées, couleur bronze. */
.kicker {
  display: inline-block;
  margin-bottom: .75rem;
  font-size: .75rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--electric-text);
}

/* ── Typography ──────────────────────────────────────────── */
.text-xs   { font-size: 12px; }
.text-sm   { font-size: 13px; }
.text-base { font-size: 15px; }
.text-lg   { font-size: 17px; }
.text-xl   { font-size: 20px; }
.text-2xl  { font-size: 24px; }
.text-3xl  { font-size: 30px; }
.text-4xl  { font-size: 36px; }
.text-5xl  { font-size: 48px; }
.font-medium { font-weight: 500; }
.font-semibold { font-weight: 600; }
.font-bold   { font-weight: 700; }
.font-extrabold { font-weight: 800; }
.font-mono { font-family: var(--mono); }
.text-center { text-align: center; }
.text-left   { text-align: left; }
.text-right  { text-align: right; }
.tracking-wide { letter-spacing: .04em; }
.tracking-widest { letter-spacing: .15em; }
.uppercase { text-transform: uppercase; }
.truncate { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.underline { text-decoration: underline; }
.leading-tight { line-height: 1.25; }

/* ── Colors ──────────────────────────────────────────────── */
.text-white   { color: var(--white); }
.text-red     { color: var(--red); }
.text-gray-400 { color: var(--gray-400); }
.text-gray-500 { color: var(--gray-500); }
.text-gray-600 { color: var(--gray-600); }
.text-gray-700 { color: var(--gray-700); }
.text-gray-800 { color: var(--gray-800); }
.text-green   { color: #16a34a; }
.text-blue    { color: #2563eb; }
.text-orange  { color: #ea580c; }

.bg-white     { background: var(--white); }
.bg-dark      { background: var(--dark); }
.bg-red       { background: var(--red); }
.bg-gray-50   { background: var(--gray-50); }
.bg-gray-100  { background: var(--gray-100); }

/* ── Layout ──────────────────────────────────────────────── */
.container     { width: min(100% - 2rem, var(--max)); margin: 0 auto; }
.container-sm  { width: 100%; max-width: 560px;  margin: 0 auto; padding: 0 20px; }
.container-md  { width: 100%; max-width: 800px;  margin: 0 auto; padding: 0 20px; }
.flex          { display: flex; }
.flex-col      { flex-direction: column; }
.flex-1        { flex: 1; }
.flex-wrap     { flex-wrap: wrap; }
.items-center  { align-items: center; }
.items-start   { align-items: flex-start; }
.justify-center { justify-content: center; }
.justify-between { justify-content: space-between; }
.justify-end   { justify-content: flex-end; }
.gap-1   { gap: 4px; }
.gap-2   { gap: 8px; }
.gap-3   { gap: 12px; }
.gap-4   { gap: 16px; }
.gap-6   { gap: 24px; }
.gap-8   { gap: 32px; }
.grid    { display: grid; }
.grid-2  { grid-template-columns: repeat(2, 1fr); }
.grid-3  { grid-template-columns: repeat(3, 1fr); }
.grid-4  { grid-template-columns: repeat(4, 1fr); }
.hidden  { display: none; }
.block   { display: block; }
.inline  { display: inline; }
.inline-flex { display: inline-flex; }

/* ── Spacing ─────────────────────────────────────────────── */
.p-2   { padding: 8px; }
.p-3   { padding: 12px; }
.p-4   { padding: 16px; }
.p-6   { padding: 24px; }
.p-8   { padding: 32px; }
.px-3  { padding-left: 12px; padding-right: 12px; }
.px-4  { padding-left: 16px; padding-right: 16px; }
.px-6  { padding-left: 24px; padding-right: 24px; }
.py-2  { padding-top: 8px;  padding-bottom: 8px; }
.py-3  { padding-top: 12px; padding-bottom: 12px; }
.py-4  { padding-top: 16px; padding-bottom: 16px; }
.py-8  { padding-top: 32px; padding-bottom: 32px; }
.py-12 { padding-top: 48px; padding-bottom: 48px; }
.py-16 { padding-top: 64px; padding-bottom: 64px; }
.pt-4  { padding-top: 16px; }
.pb-4  { padding-bottom: 16px; }
.m-0   { margin: 0; }
.mt-1  { margin-top: 4px; }
.mt-2  { margin-top: 8px; }
.mt-3  { margin-top: 12px; }
.mt-4  { margin-top: 16px; }
.mt-6  { margin-top: 24px; }
.mt-8  { margin-top: 32px; }
.mb-1  { margin-bottom: 4px; }
.mb-2  { margin-bottom: 8px; }
.mb-3  { margin-bottom: 12px; }
.mb-4  { margin-bottom: 16px; }
.mb-6  { margin-bottom: 24px; }
.mb-8  { margin-bottom: 32px; }
.ml-auto { margin-left: auto; }
.mr-auto { margin-right: auto; }
.mx-auto { margin-left: auto; margin-right: auto; }
.mt-auto { margin-top: auto; }

/* ── Sizing ──────────────────────────────────────────────── */
.w-full  { width: 100%; }
.h-full  { height: 100%; }
.min-h-screen { min-height: 100vh; }
.max-w-xs  { max-width: 320px; }
.max-w-sm  { max-width: 480px; }
.max-w-md  { max-width: 640px; }
.max-w-lg  { max-width: 800px; }
.max-w-xl  { max-width: 1024px; }

/* ── Borders ─────────────────────────────────────────────── */
.border   { border: 1px solid var(--gray-200); }
.border-t { border-top: 1px solid var(--gray-200); }
.border-b { border-bottom: 1px solid var(--gray-200); }
.rounded-sm { border-radius: var(--radius-sm); }
.rounded    { border-radius: var(--radius); }
.rounded-lg { border-radius: var(--radius-lg); }
.rounded-xl { border-radius: var(--radius-xl); }
.rounded-full { border-radius: var(--radius-full); }
.overflow-hidden { overflow: hidden; }

/* ── Shadows ─────────────────────────────────────────────── */
.shadow-sm { box-shadow: var(--shadow-sm); }
.shadow    { box-shadow: var(--shadow); }
.shadow-lg { box-shadow: var(--shadow-lg); }

/* ── Position ────────────────────────────────────────────── */
.relative { position: relative; }
.absolute { position: absolute; }
.sticky   { position: sticky; }
.fixed    { position: fixed; }
.inset-0  { inset: 0; }
.top-0    { top: 0; }
.z-10     { z-index: 10; }
.z-50     { z-index: 50; }

/* ── Transitions ─────────────────────────────────────────── */
.transition { transition: all var(--trans); }

/* ── Opacity ─────────────────────────────────────────────── */
.opacity-0   { opacity: 0; }
.opacity-50  { opacity: .5; }
.opacity-100 { opacity: 1; }

/* ── Space Y ─────────────────────────────────────────────── */
.space-y-2 > * + * { margin-top: 8px; }
.space-y-3 > * + * { margin-top: 12px; }
.space-y-4 > * + * { margin-top: 16px; }
.space-y-6 > * + * { margin-top: 24px; }

/* ============================================================
   COMPONENTS
   ============================================================ */

/* ── Buttons ─────────────────────────────────────────────── */
/* Boutons du site : rectangulaires, CAPITALES, interlettrage .16em, gras 700,
   et surtout un lift de -3px au survol (pas de changement de couleur). */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  padding: .85rem 1.1rem;
  border-radius: 0;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  cursor: pointer;
  transition: transform 240ms ease, border-color 240ms ease, background 240ms ease, color 240ms ease;
  white-space: nowrap;
  border: 1px solid transparent;
  text-decoration: none;
  line-height: 1;
}
.btn:hover:not(:disabled) { transform: translateY(-3px); }
.btn:active:not(:disabled) { transform: translateY(0); }
.btn:disabled { opacity: .5; cursor: not-allowed; }

/* Le CTA du site est le dégradé bronze → terracotta, PAS le rouge néon
   (le rouge reste réservé aux halos de fond et aux états d'erreur). */
.btn-primary {
  background: linear-gradient(100deg, var(--electric), var(--terracotta));
  color: #fff;
}

.btn-secondary {
  background: var(--white);
  color: var(--gray-800);
  border-color: var(--line);
}
.btn-secondary:hover:not(:disabled) { color: var(--electric-text); border-color: var(--electric); }

/* .btn-ghost du site : totalement transparent, bordé par --line. */
.btn-ghost {
  background: transparent;
  border-color: var(--line);
  color: var(--ink);
}
.btn-ghost:hover:not(:disabled) { border-color: var(--electric); color: var(--electric-text); }

/* Bouton clair inversé (fond --ink, texte sombre) : le .btn nu du site. */
.btn-dark {
  background: var(--ink);
  color: #06070c;
}
.btn-dark:hover:not(:disabled) { background: #fff; }

.btn-sm { padding: .55rem .85rem; font-size: 11px; letter-spacing: .12em; }
.btn-lg { padding: 1rem 1.5rem; font-size: 13px; }
.btn-xl { padding: 1.15rem 2rem; font-size: 14px; }
.btn-icon { padding: .6rem; letter-spacing: 0; }

/* ── Cards ───────────────────────────────────────────────── */
/* Panneaux du site (.skew-panel / .info-card) : dégradé sombre en diagonale,
   filet clair à 14 %, ombre portée large, angles vifs. */
.card {
  background: linear-gradient(130deg, rgba(7,8,10,.95), rgba(13,16,24,.95));
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
  overflow: hidden;
}
.card-body { padding: 24px; }
.card-header {
  padding: 16px 24px;
  border-bottom: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.card-footer {
  padding: 16px 24px;
  border-top: 1px solid var(--line);
  background: rgba(0,0,0,.25);
}

/* Panneau mat du site (.menu-panel) : fond plein --panel, sans dégradé. */
.panel {
  background: var(--panel);
  border: 1px solid var(--line);
}

/* Ligne d'information du site : libellé à gauche, valeur à droite,
   séparateur pointillé. Utilisé pour les récapitulatifs de lot. */
.info-line {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: .6rem;
  border-bottom: 1px dashed rgba(255,255,255,.18);
  padding: .58rem 0;
  color: #e5e9f6;
}
.info-line span {
  color: var(--muted);
  font-size: .83rem;
  text-transform: uppercase;
  letter-spacing: .11em;
}

/* ── Form elements ───────────────────────────────────────── */
.form-group { display: flex; flex-direction: column; gap: 6px; }
.form-label { font-size: 13px; font-weight: 600; color: var(--gray-700); }
.form-input {
  width: 100%;
  padding: 11px 14px;
  border: 1.5px solid var(--gray-200);
  border-radius: var(--radius);
  font-size: 15px;
  color: var(--gray-800);
  background: var(--white);
  transition: border-color var(--trans), box-shadow var(--trans);
}
.form-input:focus {
  border-color: var(--red);
  box-shadow: 0 0 0 3px rgba(230,57,70,.12);
}
.form-input::placeholder { color: var(--gray-400); }
.form-select {
  width: 100%;
  padding: 11px 14px;
  border: 1.5px solid var(--gray-200);
  border-radius: var(--radius);
  font-size: 15px;
  color: var(--gray-800);
  background: var(--white);
  cursor: pointer;
  transition: border-color var(--trans);
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  padding-right: 36px;
}
.form-select:focus { border-color: var(--red); }
.form-textarea {
  width: 100%;
  padding: 11px 14px;
  border: 1.5px solid var(--gray-200);
  border-radius: var(--radius);
  font-size: 15px;
  color: var(--gray-800);
  background: var(--white);
  resize: vertical;
  min-height: 80px;
  transition: border-color var(--trans);
}
.form-textarea:focus { border-color: var(--red); box-shadow: 0 0 0 3px rgba(230,57,70,.12); }
.form-hint { font-size: 12px; color: var(--gray-500); }

.form-checkbox {
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  font-size: 14px;
  color: var(--gray-700);
}
.form-checkbox input { width: 17px; height: 17px; cursor: pointer; accent-color: var(--red); }

/* ── Badges ──────────────────────────────────────────────── */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  border-radius: 0;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
}
/* Pastilles retravaillées pour le fond sombre : teinte translucide + filet de la
   même couleur, capitales espacées (les fonds pastel clairs d'origine
   ressortaient comme des blocs lumineux sur le thème nuit). */
.badge-red    { background: rgba(209,47,63,.16);  color: #f08a95; border: 1px solid rgba(209,47,63,.35); }
.badge-green  { background: rgba(34,197,94,.14);  color: #6ee7a0; border: 1px solid rgba(34,197,94,.32); }
.badge-blue   { background: rgba(59,130,246,.14); color: #8ab4f8; border: 1px solid rgba(59,130,246,.32); }
.badge-gray   { background: rgba(255,255,255,.07); color: var(--muted); border: 1px solid var(--line); }
.badge-yellow { background: rgba(234,179,8,.14);  color: #e8c86a; border: 1px solid rgba(234,179,8,.32); }
.badge-purple { background: rgba(168,85,247,.14); color: #c39bf5; border: 1px solid rgba(168,85,247,.32); }
.badge-bronze { background: rgba(147,99,73,.20);  color: #d8a184; border: 1px solid rgba(147,99,73,.45); }

/* ── Alerts / Flash ──────────────────────────────────────── */
.alert {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 18px;
  border-radius: var(--radius);
  font-size: 14px;
  font-weight: 500;
  border: 1px solid;
  animation: slideDown .25s ease;
}
.alert-success { background: rgba(34,197,94,.12);  color: #7ceaa8; border-color: rgba(34,197,94,.34); }
.alert-error   { background: rgba(209,47,63,.14);  color: #f59aa4; border-color: rgba(209,47,63,.38); }
.alert-info    { background: rgba(59,130,246,.12); color: #9cc0fa; border-color: rgba(59,130,246,.34); }
.alert-warning { background: rgba(234,179,8,.12);  color: #ecd07c; border-color: rgba(234,179,8,.34); }

/* ── Tabs ────────────────────────────────────────────────── */
.tabs { display: flex; gap: 4px; padding: 4px; background: var(--gray-100); border-radius: var(--radius); }
.tab {
  flex: 1;
  padding: 8px 16px;
  border-radius: calc(var(--radius) - 4px);
  font-size: 14px;
  font-weight: 500;
  color: var(--gray-600);
  cursor: pointer;
  transition: all var(--trans);
  text-align: center;
  border: none;
  background: transparent;
  text-decoration: none;
}
.tab.active, .tab:hover { background: var(--white); color: var(--gray-800); box-shadow: var(--shadow-sm); }
.tab.active { color: var(--red); font-weight: 600; }

/* ── Table ───────────────────────────────────────────────── */
.table-wrap { overflow-x: auto; border-radius: var(--radius-lg); border: 1px solid var(--gray-200); }
table { width: 100%; border-collapse: collapse; background: var(--white); }
thead th {
  padding: 12px 16px;
  text-align: left;
  font-size: 12px;
  font-weight: 600;
  color: var(--gray-500);
  text-transform: uppercase;
  letter-spacing: .05em;
  background: var(--gray-50);
  border-bottom: 1px solid var(--gray-200);
}
tbody td { padding: 14px 16px; border-bottom: 1px solid var(--gray-100); font-size: 14px; vertical-align: middle; }
tbody tr:last-child td { border-bottom: none; }
tbody tr:hover { background: var(--gray-50); }

/* ── Divider ─────────────────────────────────────────────── */
.divider { height: 1px; background: var(--gray-200); margin: 20px 0; }
.divider-text {
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--gray-400);
  font-size: 13px;
  margin: 20px 0;
}
.divider-text::before, .divider-text::after { content: ''; flex: 1; height: 1px; background: var(--gray-200); }

/* ── Avatar ──────────────────────────────────────────────── */
.avatar {
  width: 36px; height: 36px;
  border-radius: var(--radius-full);
  background: linear-gradient(135deg, var(--red), var(--red-dark));
  color: var(--white);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 700;
  flex-shrink: 0;
}

/* ── Stat card ───────────────────────────────────────────── */
.stat-card {
  background: var(--white);
  border-radius: var(--radius-lg);
  border: 1px solid var(--gray-200);
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  box-shadow: var(--shadow-sm);
  transition: transform var(--trans), box-shadow var(--trans);
}
.stat-card:hover { transform: translateY(-2px); box-shadow: var(--shadow); }
.stat-label { font-size: 12px; font-weight: 600; color: var(--gray-500); text-transform: uppercase; letter-spacing: .05em; }
.stat-value { font-size: 32px; font-weight: 800; color: var(--gray-900); line-height: 1; }
.stat-change { font-size: 12px; color: var(--gray-500); }
.stat-icon { font-size: 24px; margin-bottom: 4px; }

/* ── Color dot ───────────────────────────────────────────── */
.color-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; display: inline-block; }

/* ── Pill nav ────────────────────────────────────────────── */
.pill-nav { display: flex; gap: 6px; flex-wrap: wrap; }
.pill-nav a {
  padding: 6px 16px;
  border-radius: var(--radius-full);
  font-size: 13px;
  font-weight: 500;
  color: var(--gray-600);
  background: var(--white);
  border: 1.5px solid var(--gray-200);
  transition: all var(--trans);
  text-decoration: none;
}
.pill-nav a:hover, .pill-nav a.active {
  background: var(--red);
  color: var(--white);
  border-color: var(--red);
}

/* ── Empty state ─────────────────────────────────────────── */
.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 48px 24px;
  text-align: center;
  color: var(--gray-400);
  gap: 12px;
}
.empty-state .empty-icon { font-size: 48px; }
.empty-state p { font-size: 14px; }

/* ── Overlay / Modal ─────────────────────────────────────── */
.overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.55);
  backdrop-filter: blur(4px);
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  animation: fadeIn .2s ease;
}
.modal {
  background: var(--white);
  border-radius: var(--radius-xl);
  padding: 32px;
  max-width: 420px;
  width: 100%;
  box-shadow: var(--shadow-lg);
  animation: scaleIn .25s cubic-bezier(.34,1.56,.64,1);
}

/* ============================================================
   HEADER
   ============================================================ */
/* Header du site : translucide + backdrop-blur, bordure basse transparente qui
   n'apparaît qu'au scroll (.scrolled). On reste en `sticky` plutôt qu'en `fixed`
   comme le site : le rendu est identique mais aucune page n'a besoin d'un
   padding-top compensatoire. */
.site-header {
  height: var(--header-h);
  background: rgba(3,4,9,.45);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid transparent;
  position: sticky;
  top: 0;
  z-index: 100;
  transition: border-color 220ms ease, background 220ms ease;
}
.site-header.scrolled {
  background: rgba(3,4,9,.8);
  border-bottom-color: var(--line);
}
.site-header .inner {
  width: min(100% - 2rem, var(--max));
  margin: 0 auto;
  height: 100%;
  display: flex;
  align-items: center;
  gap: 16px;
}
/* Logotype du site : "Le DELI Bar" en capitales, "Deli" en bronze, sans icône. */
.site-logo {
  display: flex;
  align-items: center;
  font-size: clamp(1.15rem, 4vw, 1.5rem);
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  line-height: .95;
  color: var(--ink);
  text-decoration: none;
}
.site-logo .logo-text span { color: var(--electric-text); }

.site-nav {
  display: flex;
  align-items: center;
  gap: 1.2rem;
  margin-left: auto;
}
.site-nav a {
  font-size: .78rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink);
  opacity: .82;
  transition: color var(--trans), opacity var(--trans);
  text-decoration: none;
}
.site-nav a:hover,
.site-nav a.active { opacity: 1; color: var(--electric-text); }
/* Les boutons de la nav gardent leur pleine opacité et leur propre couleur. */
.site-nav a.btn { opacity: 1; }
.site-nav a.btn:hover { color: #fff; }
.site-nav a.btn-ghost:hover { color: var(--electric-text); }
.site-nav .divider-v { width: 1px; height: 20px; background: var(--line); }

.burger-btn {
  display: none;
  padding: 8px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  margin-left: auto;
  color: var(--gray-600);
  transition: all var(--trans);
}
.burger-btn:hover { background: var(--gray-100); color: var(--gray-900); }
.burger-btn svg { width: 22px; height: 22px; stroke: currentColor; fill: none; }

/* Menu mobile du site : fond #05070e, liens en capitales espacées. */
.mobile-nav {
  display: none;
  background: #05070e;
  border-bottom: 1px solid var(--line);
  padding: 0 1rem .8rem;
  flex-direction: column;
  position: sticky;
  top: var(--header-h);
  z-index: 99;
}
.mobile-nav.open { display: flex; }
.mobile-nav a {
  display: block;
  padding: .9rem 0;
  text-transform: uppercase;
  letter-spacing: .14em;
  font-size: .76rem;
  color: var(--muted);
  text-decoration: none;
  transition: color var(--trans);
}
.mobile-nav a:hover,
.mobile-nav a.active { color: var(--electric-text); }
.mobile-nav a.btn { color: #fff; }

/* ── Flash messages ──────────────────────────────────────── */
.flash-stack {
  width: min(100% - 2rem, var(--max));
  margin: 12px auto 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* ── Main content ────────────────────────────────────────── */
main { flex: 1; }

/* ============================================================
   FOOTER
   ============================================================ */
/* Footer du site : une seule ligne centrée, filet haut, texte atténué .78rem.
   Pas de fond plein : il repose sur les halos du body. */
.site-footer {
  border-top: 1px solid var(--line);
  padding: 1.2rem 0 2.2rem;
  color: var(--muted);
  text-align: center;
  font-size: .78rem;
  margin-top: auto;
}
.site-footer a { color: var(--muted); transition: color var(--trans); }
.site-footer a:hover { color: var(--electric-text); }
.footer-sep { opacity: .45; margin: 0 .55rem; }

/* ============================================================
   HERO
   ============================================================ */
/* Hero du site : plein écran, contenu aligné en bas, photo de fond assombrie
   en dégradé et animée d'un zoom lent de 22 s. */
.hero {
  position: relative;
  min-height: 78vh;
  display: flex;
  align-items: flex-end;
  padding: 5rem 0 3rem;
  overflow: hidden;
}
/* Le dégradé noir 82%/55% est celui du site : il noie le logo incrusté dans
   l'image et garantit la lisibilité du titre par-dessus.
   --hero-img est surchargée en inline par la photo vitrine du gérant ; à défaut,
   l'image jungle embarquée dans l'image Docker sert de fond par défaut. */
.hero-media {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(10deg, rgba(0,0,0,.82), rgba(0,0,0,.55)),
    var(--hero-img, url('../img/jungle-hero.jpg'));
  background-size: cover;
  background-position: center;
  transform: scale(1.08);
  animation: slow-zoom 22s linear infinite alternate;
}
@keyframes slow-zoom {
  from { transform: scale(1.08) translateY(0); }
  to   { transform: scale(1.17) translateY(-14px); }
}
.hero-inner { position: relative; z-index: 1; display: grid; gap: 1.2rem; }
.hero h1 {
  font-size: clamp(2.6rem, 13vw, 7.5rem);
  color: var(--ink);
  margin: 0;
}
.hero h1 span { color: var(--electric); }
.hero p.hero-tag {
  max-width: 32ch;
  font-size: 1rem;
  color: var(--muted);
  margin: 0;
}
.hero-actions { display: flex; gap: .8rem; flex-wrap: wrap; align-items: center; margin-top: .45rem; }
.hero-stats { display: flex; gap: 2rem; margin-top: 1.5rem; flex-wrap: wrap; }
.hero-stat-val {
  font-size: 1.75rem;
  font-weight: 700;
  color: var(--ink);
  letter-spacing: .05em;
  text-transform: uppercase;
  line-height: .95;
}
.hero-stat-lbl {
  font-size: .7rem;
  color: var(--muted);
  margin-top: .35rem;
  letter-spacing: .16em;
  text-transform: uppercase;
}

/* Grille photo du site : 4 tuiles carrées, filet clair, zoom au survol. */
.photo-grid { display: grid; gap: .8rem; grid-template-columns: repeat(4, 1fr); }
.photo-tile {
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border: 1px solid var(--line);
  position: relative;
  margin: 0;
}
.photo-tile img { height: 100%; width: 100%; object-fit: cover; transition: transform 1.4s ease; }
.photo-tile:hover img { transform: scale(1.07); }

/* Apparition au scroll du site. Le masquage n'est actif que si le JS a posé
   .js-reveal sur <html> : sans JS, le contenu reste visible. */
.js-reveal .reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .65s ease, transform .65s ease;
}
.js-reveal .reveal.is-visible { opacity: 1; transform: none; }

/* ── Sections (rythme vertical du site : 4.5rem, 6rem ≥760px) ───────── */
.section { padding: 4.5rem 0; }
/* Translucide (et non var(--bg-soft) opaque) : garde le contraste de la bande
   tout en laissant passer la vignette jungle de body::after. */
.section-soft {
  background: rgba(15,17,24,.72);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.section-head { margin-bottom: 2rem; }
.section-head h2 { font-size: clamp(1.9rem, 6vw, 3rem); }

.intro-wrap { display: grid; gap: 1rem; }
.intro-card h2 { font-size: clamp(1.6rem, 5vw, 2.4rem); }
.intro-lead { color: #d7dcee; font-size: 1.05rem; margin-top: .9rem; }

.cta-band {
  background:
    radial-gradient(ellipse 70% 100% at 50% 0%, rgba(147,99,73,.20), transparent 65%),
    linear-gradient(180deg, rgba(11,13,20,.85) 0%, rgba(7,8,10,.55) 70%);
  border-top: 1px solid var(--line);
}
.cta-band h2 { font-size: clamp(1.7rem, 5vw, 2.6rem); margin-bottom: .9rem; }
.cta-lead { color: var(--muted); font-size: 1rem; max-width: 46ch; margin: 0 auto 2rem; }

/* ── How it works ────────────────────────────────────────── */
.steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
}
.step {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: .9rem;
  border-left: 1px solid var(--line);
  padding-left: 1.2rem;
}
/* Numéro d'étape : carré bronze, comme les accents du site. */
.step-num {
  width: 44px; height: 44px;
  background: linear-gradient(100deg, var(--electric), var(--terracotta));
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  font-weight: 700;
  color: #fff;
  letter-spacing: .05em;
}
.step h3 { font-size: 1.1rem; color: var(--ink); }
.step p { font-size: .95rem; color: var(--muted); line-height: 1.65; }

/* ── Establishment card ──────────────────────────────────── */
.estab-card {
  background: var(--white);
  border-radius: var(--radius-lg);
  border: 1px solid var(--gray-200);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  transition: transform var(--trans), box-shadow var(--trans);
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
}
.estab-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.estab-thumb {
  height: 160px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 48px;
}
.estab-body { padding: 20px; flex: 1; display: flex; flex-direction: column; gap: 8px; }
.estab-name { font-size: 17px; font-weight: 700; color: var(--gray-900); }
.estab-desc { font-size: 13px; color: var(--gray-500); line-height: 1.5; flex: 1; }
.estab-footer { padding: 16px 20px; border-top: 1px solid var(--gray-100); display: flex; justify-content: space-between; align-items: center; }

/* ============================================================
   AUTH PAGES
   ============================================================ */
.auth-page {
  min-height: calc(100vh - var(--header-h));
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px 20px;
  background:
    radial-gradient(ellipse 70% 60% at 80% 0%, rgba(147,99,73,.18) 0%, transparent 65%),
    radial-gradient(ellipse 60% 60% at 0% 100%, rgba(209,47,63,.14) 0%, transparent 60%);
}
.auth-card {
  width: 100%;
  max-width: 420px;
  background: var(--white);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}
.auth-card-header {
  background: linear-gradient(135deg, var(--dark), #1a0a14);
  padding: 32px;
  text-align: center;
}
.auth-card-header .auth-icon {
  width: 64px; height: 64px;
  background: rgba(230,57,70,.2);
  border: 2px solid rgba(230,57,70,.4);
  border-radius: var(--radius-lg);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  margin: 0 auto 16px;
}
.auth-card-header h1 { color: var(--white); font-size: 22px; margin-bottom: 6px; }
.auth-card-header p { color: rgba(255,255,255,.55); font-size: 13px; }
.auth-card-body { padding: 32px; }

.otp-input {
  width: 100%;
  text-align: center;
  font-size: 36px;
  font-weight: 700;
  letter-spacing: .4em;
  padding: 16px 20px;
  border: 2px solid var(--gray-200);
  border-radius: var(--radius-lg);
  color: var(--gray-900);
  transition: border-color var(--trans), box-shadow var(--trans);
  font-family: var(--mono);
}
.otp-input:focus {
  border-color: var(--red);
  box-shadow: 0 0 0 4px rgba(230,57,70,.12);
}

/* ============================================================
   PLAY PAGE
   ============================================================ */
/* Fond transparent : les halos radiaux et le grain du body traversent la page,
   comme sur le site (aucune section n'a de fond plein opaque). */
.play-page {
  min-height: calc(100vh - var(--header-h));
  padding: 3rem 1rem;
}
.play-container {
  max-width: 960px;
  margin: 0 auto;
}
.play-header {
  text-align: center;
  margin-bottom: 40px;
  color: var(--white);
}
.play-logo {
  width: 72px; height: 72px;
  border-radius: var(--radius-lg);
  margin: 0 auto 16px;
  object-fit: cover;
}
/* Interlettrage POSITIF (.05em) comme tous les titres du site, pas négatif. */
.play-title { font-size: clamp(1.9rem, 7vw, 3rem); margin-bottom: .5rem; }
.play-desc { color: var(--muted); font-size: 1rem; max-width: 52ch; margin: 0 auto; }

.play-layout {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: 32px;
  align-items: start;
}

.wheel-wrapper {
  background: linear-gradient(130deg, rgba(7,8,10,.95), rgba(13,16,24,.95));
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
  padding: 32px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 28px;
  backdrop-filter: blur(8px);
}
.wheel-canvas-wrap { position: relative; }
#wheel { max-width: 100%; height: auto; filter: drop-shadow(0 8px 32px rgba(0,0,0,.6)); }

/* CTA de la roue : conserve la couleur d'établissement (--accent, réglable par
   le gérant) mais adopte la forme des boutons du site — carré, capitales,
   interlettrage .16em, lift de -3px. */
.spin-btn {
  padding: 1.15rem 3rem;
  font-size: 15px;
  font-weight: 700;
  background: var(--accent);
  color: var(--accent-ink);
  border-radius: 0;
  box-shadow: 0 10px 30px color-mix(in srgb, var(--accent) 45%, transparent);
  cursor: pointer;
  border: 1px solid transparent;
  transition: transform 240ms ease, box-shadow 240ms ease, filter 240ms ease;
  letter-spacing: .16em;
  text-transform: uppercase;
}
.spin-btn:hover:not(:disabled) {
  transform: translateY(-3px);
  filter: brightness(1.06);
  box-shadow: 0 16px 40px color-mix(in srgb, var(--accent) 55%, transparent);
}
.spin-btn:active:not(:disabled) { transform: translateY(0); }
.spin-btn:disabled { opacity: .5; cursor: not-allowed; }

.prizes-panel {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.prizes-panel-title {
  color: var(--electric-text);
  font-size: .75rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: .22em;
  margin-bottom: .5rem;
}
.prize-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: var(--radius);
  backdrop-filter: blur(4px);
}
.prize-color { width: 12px; height: 12px; border-radius: 3px; flex-shrink: 0; }
.prize-label { flex: 1; color: var(--white); font-size: 14px; font-weight: 500; }
.prize-prob { color: rgba(255,255,255,.4); font-size: 12px; font-weight: 600; }

.login-prompt {
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: var(--radius-xl);
  padding: 28px;
  text-align: center;
  backdrop-filter: blur(8px);
}
.login-prompt p { color: rgba(255,255,255,.7); margin-bottom: 16px; font-size: 15px; }

/* ── Fav button ──────────────────────────────────────────── */
.fav-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 18px;
  border-radius: var(--radius-full);
  font-size: 13px;
  font-weight: 600;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.15);
  color: rgba(255,255,255,.8);
  cursor: pointer;
  transition: all var(--trans);
}
.fav-btn:hover { background: rgba(255,255,255,.14); }
.fav-btn.active {
  background: color-mix(in srgb, var(--accent) 24%, transparent);
  border-color: color-mix(in srgb, var(--accent) 50%, transparent);
  color: color-mix(in srgb, var(--accent) 70%, white);
}

/* ── Classes accent (couleur établissement) ─────────────────── */
.btn-accent {
  background: var(--accent);
  color: var(--accent-ink);
  box-shadow: 0 8px 24px color-mix(in srgb, var(--accent) 38%, transparent);
}
.btn-accent:hover:not(:disabled) { filter: brightness(.93); transform: translateY(-1px); }
.text-accent { color: var(--accent) !important; }
.bg-accent   { background: var(--accent) !important; color: var(--accent-ink) !important; }
.border-accent { border-color: var(--accent) !important; }

/* ============================================================
   MANAGER / ADMIN PAGES
   ============================================================ */
.page-header {
  padding: 32px 0 24px;
  border-bottom: 1px solid var(--gray-200);
  margin-bottom: 32px;
}
.page-title { font-size: 26px; font-weight: 800; color: var(--gray-900); letter-spacing: -.02em; }
.page-subtitle { font-size: 14px; color: var(--gray-500); margin-top: 4px; }

.section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
}
.section-title { font-size: 17px; font-weight: 700; color: var(--gray-800); }

/* Item row (prizes, players, bans list) */
.item-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 20px;
  border-bottom: 1px solid var(--gray-100);
  transition: background var(--trans);
}
.item-row:last-child { border-bottom: none; }
.item-row:hover { background: var(--gray-50); }
.item-row-main { flex: 1; min-width: 0; }
.item-row-title { font-size: 15px; font-weight: 600; color: var(--gray-900); }
.item-row-sub { font-size: 13px; color: var(--gray-500); margin-top: 2px; }
.item-row-actions { display: flex; gap: 8px; align-items: center; flex-shrink: 0; }

/* Action link */
.action-link {
  font-size: 13px;
  font-weight: 500;
  color: var(--gray-500);
  cursor: pointer;
  background: none;
  border: none;
  padding: 4px 8px;
  border-radius: var(--radius-sm);
  transition: all var(--trans);
  text-decoration: none;
}
.action-link:hover { color: var(--gray-900); background: var(--gray-100); }
.action-link.danger:hover { color: #f08a95; background: rgba(209,47,63,.16); }
.action-link.primary:hover { color: #2563eb; background: #eff6ff; }

/* Nav shortcuts */
.quick-nav {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 12px;
  margin-bottom: 32px;
}
.quick-nav a {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 20px 16px;
  background: var(--white);
  border: 1.5px solid var(--gray-200);
  border-radius: var(--radius-lg);
  font-size: 13px;
  font-weight: 600;
  color: var(--gray-700);
  text-decoration: none;
  transition: all var(--trans);
  text-align: center;
}
.quick-nav a .nav-icon { font-size: 24px; }
.quick-nav a:hover { border-color: var(--red); color: var(--red); transform: translateY(-2px); box-shadow: var(--shadow); }

/* Probability bar */
.prob-bar-wrap { height: 6px; background: var(--gray-200); border-radius: 3px; overflow: hidden; }
.prob-bar { height: 100%; border-radius: 3px; transition: width .4s ease; }

/* Color picker group */
.color-group { display: flex; align-items: center; gap: 10px; }
.color-preview {
  width: 36px; height: 36px;
  border-radius: var(--radius-sm);
  border: 2px solid var(--gray-200);
  flex-shrink: 0;
}

/* ============================================================
   PASS PAGE
   ============================================================ */
.pass-page {
  min-height: 100vh;
  background: linear-gradient(160deg, #0f172a 0%, #1a0810 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.pass-card {
  width: 100%;
  max-width: 380px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: var(--radius-xl);
  padding: 32px;
  text-align: center;
  backdrop-filter: blur(16px);
  box-shadow: 0 32px 64px rgba(0,0,0,.4);
}
.pass-estab { color: rgba(255,255,255,.5); font-size: 13px; margin-bottom: 8px; }
.pass-prize { font-size: 26px; font-weight: 800; color: var(--white); margin-bottom: 6px; }
.pass-desc { color: rgba(255,255,255,.6); font-size: 14px; margin-bottom: 20px; }
.pass-qr {
  background: var(--white);
  padding: 16px;
  border-radius: var(--radius-lg);
  display: inline-block;
  margin-bottom: 20px;
}
.pass-qr img { width: 180px; height: 180px; }
.pass-code-label { color: rgba(255,255,255,.4); font-size: 11px; text-transform: uppercase; letter-spacing: .1em; margin-bottom: 6px; }
.pass-code { font-family: var(--mono); font-size: 22px; font-weight: 800; color: var(--white); letter-spacing: .2em; }
.pass-expires { color: rgba(255,255,255,.35); font-size: 12px; margin-top: 10px; }
.pass-wallet-row { display: flex; gap: 8px; justify-content: center; margin-top: 20px; flex-wrap: wrap; }

/* Status chip */
.status-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 14px;
  border-radius: var(--radius-full);
  font-size: 13px;
  font-weight: 600;
  margin-bottom: 24px;
}
.status-valid    { background: rgba(22,163,74,.2); color: #4ade80; border: 1px solid rgba(22,163,74,.3); }
.status-claimed  { background: rgba(37,99,235,.2); color: #93c5fd; border: 1px solid rgba(37,99,235,.3); }
.status-expired  { background: rgba(220,38,38,.2); color: #f87171; border: 1px solid rgba(220,38,38,.3); }
.status-cancelled{ background: rgba(107,114,128,.2); color: #9ca3af; border: 1px solid rgba(107,114,128,.3); }

/* ============================================================
   DASHBOARD
   ============================================================ */
.dashboard-header {
  background: linear-gradient(135deg, var(--dark), #1a0a14);
  padding: 40px 0;
  margin-bottom: 40px;
}
.dashboard-header h1 { font-size: 26px; font-weight: 800; color: var(--white); margin-bottom: 4px; }
.dashboard-header p { color: rgba(255,255,255,.55); font-size: 14px; }

.dashboard-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; align-items: start; }
.dashboard-col { display: flex; flex-direction: column; gap: 24px; }

/* Spin history row */
.spin-item {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 0;
  border-bottom: 1px solid var(--gray-100);
}
.spin-item:last-child { border-bottom: none; }
.spin-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.spin-info { flex: 1; min-width: 0; }
.spin-prize { font-size: 14px; font-weight: 600; color: var(--gray-900); }
.spin-estab { font-size: 12px; color: var(--gray-500); }
.spin-date { font-size: 12px; color: var(--gray-400); }

/* ============================================================
   ANIMATIONS
   ============================================================ */
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes slideDown { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }
@keyframes scaleIn { from { opacity: 0; transform: scale(.92); } to { opacity: 1; transform: none; } }
@keyframes pulse { 0%,100% { opacity: 1; } 50% { opacity: .5; } }
@keyframes spin { to { transform: rotate(360deg); } }

.animate-pulse { animation: pulse 2s ease-in-out infinite; }
.animate-spin  { animation: spin 1s linear infinite; }
.fade-in { animation: fadeIn .3s ease; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
/* Le site passe à 6rem de respiration au-delà de 760px. */
@media (min-width: 760px) {
  .section { padding: 6rem 0; }
  .container, .flash-stack, .site-header .inner { width: min(100% - 3rem, var(--max)); }
}

@media (max-width: 900px) {
  .site-nav { display: none; }
  .burger-btn { display: flex; }
  /* Pas de font-size fixe ici : le clamp() du hero gère l'échelle,
     comme le clamp(3.1rem, 20vw, 9.6rem) du site. */
  .hero { min-height: 68vh; padding: 3.5rem 0 2.5rem; }
  .steps { grid-template-columns: 1fr; gap: 1.5rem; }
  .play-layout { grid-template-columns: 1fr; }
  .prizes-panel { display: grid; grid-template-columns: 1fr 1fr; }
  .stat-value { font-size: 26px; }
  .dashboard-grid { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
  :root { --header-h: 60px; }
  .hero { min-height: 62vh; padding: 2.5rem 0 2rem; }
  .hero-stats { gap: 1.25rem; }
  .hero-stat-val { font-size: 1.4rem; }
  .photo-grid { grid-template-columns: repeat(2, 1fr); }
  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
  .modal { padding: 24px; }
  .auth-card-body { padding: 24px; }
  .auth-card-header { padding: 24px; }
  .prizes-panel { grid-template-columns: 1fr; }
  .quick-nav { grid-template-columns: repeat(3, 1fr); }
  .site-footer .footer-sep { display: block; visibility: hidden; height: 0; margin: 0; }
}

/* ── Utilities ───────────────────────────────────────────── */
.cursor-pointer { cursor: pointer; }
.select-none { user-select: none; }
.pointer-events-none { pointer-events: none; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); }

/* ============================================================
   DASHBOARD LAYOUT (Espace gérant / admin)
   Inspiré de Stripe / Linear / Vercel : sidebar persistante
   + contenu à largeur contenue.
   ============================================================ */
:root { --dash-sidebar-w: 250px; --dash-topbar-h: 56px; }

.dash-body { background: var(--gray-50); }

.dash { min-height: 100vh; }

/* ── Sidebar ─────────────────────────────────────────────── */
.dash-sidebar {
  position: fixed;
  top: 0; left: 0; bottom: 0;
  width: var(--dash-sidebar-w);
  background: #0f172a;
  display: flex;
  flex-direction: column;
  z-index: 90;
  border-right: 1px solid rgba(255,255,255,.06);
}
.dash-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 18px 20px;
  text-decoration: none;
  border-bottom: 1px solid rgba(255,255,255,.06);
}
.dash-brand .logo-icon {
  width: 34px; height: 34px;
  background: linear-gradient(100deg, var(--electric), var(--terracotta));
  display: flex; align-items: center; justify-content: center;
  font-size: 17px;
}
.dash-brand .brand-text {
  font-size: 15px; font-weight: 700; color: var(--ink);
  letter-spacing: .05em; text-transform: uppercase;
}
.dash-brand .brand-text span { color: var(--electric-text); }

/* Switcher établissement */
.dash-estab {
  padding: 16px 16px 8px;
}
.dash-estab-label {
  font-size: 10px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .08em; color: rgba(255,255,255,.35); margin-bottom: 8px;
  padding: 0 4px;
}
.dash-estab select {
  width: 100%;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.1);
  color: #fff;
  padding: 9px 12px;
  border-radius: 9px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-opacity='.5' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
}
.dash-estab-name {
  padding: 10px 12px;
  font-size: 14px;
  font-weight: 700;
  color: #fff;
}

/* Navigation */
.dash-nav {
  flex: 1;
  padding: 8px 12px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.dash-nav-section {
  font-size: 10px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .08em; color: rgba(255,255,255,.3);
  padding: 14px 12px 6px;
}
.dash-nav-item {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 9px 12px;
  border-radius: 9px;
  font-size: 14px;
  font-weight: 500;
  color: rgba(255,255,255,.65);
  text-decoration: none;
  transition: all .15s ease;
}
.dash-nav-item .nav-ic {
  width: 18px; height: 18px;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 16px;
  flex-shrink: 0;
}
.dash-nav-item:hover { background: rgba(255,255,255,.06); color: #fff; }
.dash-nav-item.active {
  background: rgba(230,57,70,.16);
  color: #fff;
  font-weight: 600;
}
.dash-nav-item.active .nav-ic { filter: none; }

/* Sidebar footer */
.dash-sidebar-foot {
  padding: 12px;
  border-top: 1px solid rgba(255,255,255,.06);
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.dash-foot-link {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 9px 12px;
  border-radius: 9px;
  font-size: 13px;
  font-weight: 500;
  color: rgba(255,255,255,.5);
  text-decoration: none;
  background: none;
  border: none;
  cursor: pointer;
  width: 100%;
  text-align: left;
  transition: all .15s ease;
}
.dash-foot-link:hover { background: rgba(255,255,255,.06); color: #fff; }

/* ── Content ─────────────────────────────────────────────── */
.dash-content {
  margin-left: var(--dash-sidebar-w);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* Topbar (mobile surtout) */
.dash-topbar {
  display: none;
  align-items: center;
  gap: 12px;
  height: var(--dash-topbar-h);
  padding: 0 16px;
  background: #0f172a;
  position: sticky;
  top: 0;
  z-index: 80;
}
.dash-topbar .topbar-title { font-size: 15px; font-weight: 700; color: #fff; }
.dash-burger {
  width: 38px; height: 38px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 8px;
  cursor: pointer;
  color: #fff;
  background: rgba(255,255,255,.08);
}
.dash-burger svg { width: 20px; height: 20px; stroke: currentColor; fill: none; }

/* Inner content : largeur contenue */
.dash-inner {
  flex: 1;
  width: 100%;
  max-width: 960px;
  margin: 0 auto;
  padding: 32px 32px 64px;
}

/* Page head dans le dashboard */
.dash-page-head {
  margin-bottom: 28px;
}
.dash-page-head h1 {
  font-size: 24px;
  font-weight: 800;
  letter-spacing: -.02em;
  color: var(--gray-900);
}
.dash-page-head p { font-size: 14px; color: var(--gray-500); margin-top: 4px; }

.dash-flash { margin-bottom: 20px; display: flex; flex-direction: column; gap: 8px; }

/* Backdrop (drawer mobile) */
.dash-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.5);
  z-index: 85;
}
.dash-backdrop.open { display: block; }

/* ── Responsive ──────────────────────────────────────────── */
@media (max-width: 900px) {
  .dash-sidebar {
    transform: translateX(-100%);
    transition: transform .25s cubic-bezier(.4,0,.2,1);
    box-shadow: 0 0 40px rgba(0,0,0,.3);
  }
  .dash-sidebar.open { transform: translateX(0); }
  .dash-content { margin-left: 0; }
  .dash-topbar { display: flex; }
  .dash-inner { padding: 20px 16px 48px; }
}

/* ============================================================
   Le Deli Bar — derniers ajustements (fin de fichier = priorité)
   Les surcharges de surfaces (header/footer/card/hero) qui vivaient ici ont été
   intégrées directement dans leurs sections respectives : les garder en double
   annulait l'état .scrolled du header et le dégradé des panneaux.
   ============================================================ */
::selection { background: var(--neon-red); color: #fff; }

/* Texte devant rester blanc sur fond coloré/accent */
.text-white { color: #fff; }
.avatar { color: #fff; }
.spin-btn { color: #fff; }

/* Champs de formulaire : surface mate, filet clair, focus bronze. */
table, .form-input, .form-select, .form-textarea { background: var(--panel); }
.form-input:focus, .form-select:focus, .form-textarea:focus {
  border-color: var(--electric);
  box-shadow: 0 0 0 3px rgba(147,99,73,.22);
}

/* Le lift des boutons s'applique aussi à la variante accent. */
.btn-accent:hover:not(:disabled) { transform: translateY(-3px); filter: brightness(1.06); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  html { scroll-behavior: auto; }
  .js-reveal .reveal { opacity: 1; transform: none; }
}