/* ==========================================================================
   DropCashCasino — Direction artistique « Néon Lounge »
   Jetons de design (source : maquettes Claude Design, octobre 2026)
   Toutes les valeurs ci-dessous sont celles des maquettes. Ne pas arrondir.
   ========================================================================== */

:root {
  /* --- Couleurs : fonds et neutres ------------------------------------- */
  --dc-nuit: #07050B;          /* fond de page (≈ 70 % de l'écran) */
  --dc-footer: #0B0810;        /* fond du pied de page */
  --dc-champ: #0D0913;         /* fond des champs (recherche, saisie) */
  --dc-velours: #120C1A;       /* cartes, panneaux (≈ 18 %) */
  --dc-fumee: #1C1426;         /* survol, tuiles logo, badges neutres */
  --dc-ligne: #2E2340;         /* bordures, filets, segments vides */
  --dc-ligne-forte: #4A3B5E;   /* pointillés, contours secondaires */
  --dc-muet: #6B5E80;          /* pointillé « Non communiqué », chevrons */
  --dc-inactif: #8E849D;       /* texte des éléments désactivés */
  --dc-brume: #A69CB5;         /* texte secondaire, libellés */
  --dc-texte-2: #CFC7DB;       /* texte courant secondaire */
  --dc-texte-doux: #D9D2E3;    /* chapeaux, paragraphes d'intro */
  --dc-lumiere: #F4F0F8;       /* texte principal */

  /* --- Couleurs : néons (rôles stricts) -------------------------------- */
  --dc-vert: #B8F53C;          /* AGIR et PROUVER : bouton principal, sceau Prouvé, jauge, état actif */
  --dc-vert-survol: #CCFF5C;   /* fond du bouton principal au survol */
  --dc-vert-clair: #D6FF7A;    /* lien au survol, texte surligné */
  --dc-violet: #B23CFF;        /* GUIDER : lignes néon, halos, bordures de mise en avant */
  --dc-violet-texte: #C45CFF;  /* violet pour du texte (6,1:1 sur Nuit) */
  --dc-violet-fond: #6A17C2;   /* violet sous du texte blanc (Vérification partielle) */
  --dc-or: #FFD84A;            /* RÉCOMPENSER : uniquement le « D » du logo et « Testé en réel » */
  --dc-couronne: #D8FF4A;      /* couronne du monogramme */
  --dc-alerte: #FF8A4C;        /* VIGILANCE uniquement (jamais sur un bouton ni une offre) */

  /* --- Couleurs : transparences utiles ---------------------------------- */
  --dc-vert-10: rgba(184, 245, 60, .10);   /* fond de puce/sélection active */
  --dc-vert-18: rgba(184, 245, 60, .18);   /* surlignage <mark> */
  --dc-violet-16: rgba(178, 60, 255, .16); /* fond du bouton secondaire au survol */
  --dc-alerte-08: rgba(255, 138, 76, .08); /* fond de notice de vigilance */
  --dc-alerte-50: rgba(255, 138, 76, .50); /* bordure de notice de vigilance */
  --dc-velours-86: rgba(18, 12, 26, .86);  /* panneau posé sur photo */

  /* --- Typographie ------------------------------------------------------ */
  --dc-font-sans: 'Outfit', 'Avenir Next', 'Segoe UI', system-ui, sans-serif;
  --dc-font-cond: 'Barlow Condensed', 'Arial Narrow', sans-serif;

  /* Échelle desktop (taille / interligne / approche) */
  --dc-display: 800 88px/84px var(--dc-font-sans);  /* approche -0.04em */
  --dc-h1: 800 64px/64px var(--dc-font-sans);       /* approche -0.03em */
  --dc-h1-hero: 800 clamp(42px, 5.6vw, 76px)/1 var(--dc-font-sans); /* -0.035em */
  --dc-h2: 700 40px/44px var(--dc-font-sans);       /* -0.02em */
  --dc-h2-section: 800 clamp(32px, 4vw, 52px)/1.02 var(--dc-font-sans); /* -0.03em */
  --dc-h2-bloc: 800 34px/1.05 var(--dc-font-sans);  /* -0.025em */
  --dc-h3: 600 24px/30px var(--dc-font-sans);
  --dc-body: 400 17px/27px var(--dc-font-sans);
  --dc-lead: 400 19px/1.55 var(--dc-font-sans);
  --dc-label: 700 14px/1.2 var(--dc-font-cond);     /* capitales, +0.16em */
  --dc-chiffre: 800 64px/58px var(--dc-font-cond);  /* chiffres tabulaires */

  /* Échelle mobile (≤ 767 px) */
  --dc-m-h1: 800 30px/1.08 var(--dc-font-sans);     /* -0.03em */
  --dc-m-h2: 700 23px/1.2 var(--dc-font-sans);
  --dc-m-h3: 600 17px/1.3 var(--dc-font-sans);
  --dc-m-body: 400 15px/1.55 var(--dc-font-sans);
  --dc-m-small: 400 14px/1.5 var(--dc-font-sans);

  /* --- Rayons ----------------------------------------------------------- */
  --dc-r-pill: 999px;   /* boutons, sceaux de donnée, puces, recherche */
  --dc-r-card: 24px;    /* cartes desktop, panneaux */
  --dc-r-card-m: 18px;  /* cartes mobile */
  --dc-r-panel: 20px;   /* bandeaux (18+, KPI), notices desktop 16px */
  --dc-r-notice: 16px;
  --dc-r-tile: 14px;    /* tuile logo 56 px (12px pour 48 px, 11px pour 40 px) */
  --dc-r-control: 12px; /* bouton Sélectionner, sélecteur de langue, icônes 44 px */
  --dc-r-badge: 9px;    /* niveaux de preuve et statuts de vigilance */
  --dc-r-skip: 10px;

  /* --- Mise en page ----------------------------------------------------- */
  --dc-container: 1280px;
  --dc-gutter: clamp(16px, 5vw, 40px);
  --dc-section-gap: 112px;  /* entre grandes sections desktop */
  --dc-header-h: 84px;      /* desktop (+1 px de bordure) */
  --dc-header-h-m: 64px;    /* mobile */
  --dc-tap: 44px;           /* cible tactile minimale */

  /* --- Lumière ---------------------------------------------------------- */
  --dc-halo-action: 0 0 0 4px rgba(184, 245, 60, .14), 0 0 36px rgba(184, 245, 60, .5);
  --dc-halo-action-survol: 0 0 0 4px rgba(184, 245, 60, .16), 0 0 38px rgba(184, 245, 60, .6);
  --dc-halo-action-doux: 0 0 24px rgba(184, 245, 60, .35);
  --dc-halo-secondaire: 0 0 18px rgba(178, 60, 255, .3), inset 0 0 12px rgba(178, 60, 255, .15);
  --dc-halo-secondaire-survol: 0 0 26px rgba(178, 60, 255, .45);
  --dc-halo-carte: 0 0 30px rgba(178, 60, 255, .3), inset 0 0 24px rgba(178, 60, 255, .08);
  --dc-halo-prouve: 0 0 14px rgba(184, 245, 60, .35);
  --dc-halo-or: 0 0 18px rgba(255, 216, 74, .35);
  --dc-halo-segment: 0 0 8px rgba(184, 245, 60, .6);
  --dc-ligne-neon: 0 0 14px rgba(178, 60, 255, .8);
  --dc-focus: 0 0 0 3px #07050B, 0 0 0 5px #F4F0F8;
  --dc-logo-glow: drop-shadow(0 0 8px rgba(178, 60, 255, .5));
  --dc-titre-glow-violet: 0 0 30px rgba(178, 60, 255, .6);
}

/* --- Base ---------------------------------------------------------------- */
html { background: var(--dc-nuit); color-scheme: dark; }
body {
  margin: 0;
  background: var(--dc-nuit);
  color: var(--dc-lumiere);
  font-family: var(--dc-font-sans);
  -webkit-font-smoothing: antialiased;
}
a { color: var(--dc-vert); }
a:hover { color: var(--dc-vert-clair); }
:focus-visible { outline: none; box-shadow: var(--dc-focus); }
::selection { background: var(--dc-vert); color: var(--dc-nuit); }
mark { background: var(--dc-vert-18); color: var(--dc-vert-clair); border-radius: 4px; padding: 0 2px; }

.dc-container { max-width: var(--dc-container); margin: 0 auto; box-sizing: border-box; padding: 0 var(--dc-gutter); }

.dc-label {
  font-family: var(--dc-font-cond); font-weight: 700; font-size: 14px;
  letter-spacing: .16em; text-transform: uppercase; color: var(--dc-brume);
}
.dc-eyebrow { /* sur-titre de héros */
  font-family: var(--dc-font-cond); font-weight: 700; font-size: 16px;
  letter-spacing: .22em; text-transform: uppercase; color: var(--dc-vert);
}
.dc-num { font-family: var(--dc-font-cond); font-weight: 800; font-variant-numeric: tabular-nums; }

/* Ligne néon : 2 px, jamais plus de deux par écran */
.dc-neon-line { height: 2px; background: var(--dc-violet); box-shadow: var(--dc-ligne-neon); }

/* Bandeau défilant PROUVÉ · DATÉ · SOURCÉ · COMPARÉ */
@keyframes dc-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.dc-marquee { animation: dc-marquee 48s linear infinite; }
@media (prefers-reduced-motion: reduce) {
  .dc-marquee { animation: none; }
}