/* ==========================================================================
   LEVEL UP Business Club — Design tokens v1.0
   Couleurs relevées directement dans le logo (échantillonnage pixel).
   Source : charte graphique v1.0 (septembre 2026).

   NE PAS écrire de couleur en dur ailleurs : tout passe par ces variables.
   ========================================================================== */

:root {
  /* ---------- Couleurs de marque ---------- */
  --lu-or:            #F0B62B; /* Or XP — couleur primaire, titres, CTA */
  --lu-or-clair:      #FBDB60; /* reflet haut du dégradé, focus, hover */
  --lu-or-profond:    #A06000; /* ombre du dégradé, bordures pressées */
  --lu-or-brun:       #4C2E08; /* filets discrets sur fond noir */

  --lu-cyan:          #00A8F0; /* Bleu progression — liens, données, actif */
  --lu-cyan-clair:    #2794D7; /* fin de la barre XP */
  --lu-bleu:          #024BAC; /* aplats, graphiques */
  --lu-bleu-nuit:     #002868; /* départ de la barre XP, fonds de graphe */

  /* ---------- Neutres ---------- */
  --lu-noir:          #04060A; /* fond de l'application */
  --lu-surface:       #0B0F15; /* cartes, panneaux */
  --lu-surface-haute: #141922; /* modales, menus, éléments survolés */
  --lu-filet:         #232A35; /* bordures neutres 1px */
  --lu-gris:          #8A93A3; /* texte secondaire */
  --lu-gris-clair:    #C7CDD8; /* texte courant sur fond très sombre */
  --lu-blanc:         #F4F6FA; /* titres de contenu, texte fort */

  /* Nuances dérivées, relevées dans la charte */
  --lu-champ:          #0D1117; /* fond des champs de saisie */
  --lu-champ-inactif:  #0A0D12; /* champ désactivé */
  --lu-placeholder:    #5C6575; /* texte indicatif dans un champ */
  --lu-sur-or:         #2A1A00; /* texte posé sur un aplat ou dégradé doré */
  --lu-surface-relief: #101620; /* haut du dégradé des cartes de premier plan */
  --lu-filet-fort:     #333D4D; /* bordure appuyée, ascenseur survolé */

  /* ---------- États ---------- */
  --lu-succes:        #22C58B;
  --lu-alerte:        #F0B62B;
  --lu-erreur:        #E2483F;
  --lu-info:          #00A8F0;

  /* Fonds d'états : 12 % de la teinte sur le noir, contraste conservé */
  --lu-succes-fond:   rgba(34, 197, 139, 0.12);
  --lu-alerte-fond:   rgba(240, 182, 43, 0.12);
  --lu-erreur-fond:   rgba(226, 72, 63, 0.12);
  --lu-info-fond:     rgba(0, 168, 240, 0.12);

  /* ---------- Dégradés signature ---------- */
  --lu-degrade-or:   linear-gradient(180deg, #FBDB60 0%, #F0B62B 38%, #D89313 62%, #A06000 100%);
  --lu-degrade-xp:   linear-gradient(90deg, #002868 0%, #024BAC 45%, #2794D7 80%, #00A8F0 100%);
  --lu-degrade-fond: radial-gradient(120% 80% at 50% 0%, #0C121C 0%, #04060A 60%);

  /* ---------- Lueurs (à utiliser avec parcimonie) ---------- */
  --lu-lueur-or:   0 0 24px rgba(240, 182, 43, 0.28);
  --lu-lueur-cyan: 0 0 24px rgba(0, 168, 240, 0.35);
  --lu-ombre-1:    0 1px 2px rgba(0, 0, 0, 0.6);
  --lu-ombre-2:    0 8px 24px rgba(0, 0, 0, 0.55);

  /* ---------- Typographie ---------- */
  --lu-police-titre: "Archivo Black", "Montserrat", system-ui, sans-serif;
  --lu-police-texte: "Inter", system-ui, -apple-system, sans-serif;
  --lu-police-lockup: "Montserrat", var(--lu-police-texte);

  --lu-t-12: 0.75rem;
  --lu-t-14: 0.875rem;
  --lu-t-16: 1rem;      /* base */
  --lu-t-18: 1.125rem;
  --lu-t-21: 1.3125rem;
  --lu-t-26: 1.625rem;
  --lu-t-33: 2.0625rem;
  --lu-t-42: 2.625rem;
  --lu-t-56: 3.5rem;

  --lu-interligne-serre: 1.05; /* titres display */
  --lu-interligne-titre: 1.2;
  --lu-interligne-texte: 1.6;

  --lu-approche-lockup: 0.3em;  /* ligne « BUSINESS CLUB » */
  --lu-approche-titre: -0.01em;

  /* ---------- Espacement (base 4px) ---------- */
  --lu-e-1: 4px;  --lu-e-2: 8px;  --lu-e-3: 12px; --lu-e-4: 16px;
  --lu-e-6: 24px; --lu-e-8: 32px; --lu-e-12: 48px; --lu-e-16: 64px;
  --lu-e-24: 96px;

  /* ---------- Rayons ---------- */
  --lu-rayon-net:   2px;  /* champs, tags */
  --lu-rayon-carte: 10px; /* cartes, panneaux */
  --lu-rayon-pilule: 999px; /* barres XP, bouton primaire */
  --lu-encoche: 14px; /* coupe diagonale signature, cf. .lu-encoche */

  /* ---------- Divers ---------- */
  --lu-largeur-texte: 68ch;
  --lu-transition: 160ms cubic-bezier(0.2, 0, 0, 1);
  --lu-focus: 0 0 0 2px var(--lu-noir), 0 0 0 4px var(--lu-or-clair);

  /* ---------- Gabarit d'application ---------- */
  --lu-topbar-h: 76px;        /* place pour le lockup complet dans le menu */
  --lu-topbar-h-mobile: 64px;
  --lu-sidebar-w: 260px;
  --lu-sidebar-w-reduite: 68px;
  --lu-contenu-max: 1200px;
}

/* ==========================================================================
   PONT DE COMPATIBILITÉ
   --------------------------------------------------------------------------
   Alias des noms génériques utilisés dans les pages (espacements, rayons,
   ombres, gradients nommés, couleurs sémantiques). Ils pointent tous vers
   les tokens LEVEL UP : on peut donc écrire var(--space-lg) ou var(--lu-e-4)
   indifféremment, et un changement de charte ne se fait qu'ici.
   ========================================================================== */

:root {
  /* Espacements */
  --space-2xs: var(--lu-e-1);
  --space-xs:  var(--lu-e-2);
  --space-sm:  var(--lu-e-2);
  --space-md:  var(--lu-e-3);
  --space-lg:  var(--lu-e-4);
  --space-xl:  var(--lu-e-6);
  --space-2xl: var(--lu-e-8);
  --space-3xl: var(--lu-e-12);

  /* Rayons */
  --radius-sm: var(--lu-rayon-net);
  --radius-md: var(--lu-rayon-carte);
  --radius-lg: var(--lu-rayon-carte);
  --radius-xl: var(--lu-rayon-pilule);

  /* Ombres */
  --shadow-sm: var(--lu-ombre-1);
  --shadow-md: var(--lu-ombre-2);
  --shadow-lg: var(--lu-ombre-2);

  /* Polices */
  --font-title: var(--lu-police-titre);
  --font-text:  var(--lu-police-texte);

  /* Tailles de texte */
  --font-size-xs:   var(--lu-t-12);
  --font-size-sm:   var(--lu-t-14);
  --font-size-base: var(--lu-t-16);
  --font-size-md:   var(--lu-t-18);
  --font-size-lg:   var(--lu-t-21);
  --font-size-xl:   var(--lu-t-26);
  --font-size-2xl:  var(--lu-t-33);

  /* Couleurs génériques */
  --white:   var(--lu-blanc);
  --black:   var(--lu-noir);
  --or:      var(--lu-or);
  --cyan:    var(--lu-cyan);
  --gray-50:  var(--lu-surface-haute);
  --gray-100: var(--lu-surface-haute);
  --gray-200: var(--lu-filet);
  --gray-300: var(--lu-filet);
  --gray-400: var(--lu-gris);
  --gray-500: var(--lu-gris);
  --gray-600: var(--lu-gris);
  --gray-700: var(--lu-gris-clair);

  --success: var(--lu-succes);
  --warning: var(--lu-alerte);
  --danger:  var(--lu-erreur);
  --info:    var(--lu-info);

  --success-bg: var(--lu-succes-fond); --success-fg: var(--lu-succes);
  --warning-bg: var(--lu-alerte-fond); --warning-fg: var(--lu-alerte);
  --danger-bg:  var(--lu-erreur-fond); --danger-fg:  var(--lu-erreur);
  --info-bg:    var(--lu-info-fond);   --info-fg:    var(--lu-info);

  --border-color:        var(--lu-filet);
  --border-color-strong: var(--lu-filet-fort);
  --border-focus:        var(--lu-cyan);

  --transition:      var(--lu-transition);
  --transition-fast: var(--lu-transition);
  --transition-base: var(--lu-transition);

  /* Gradients nommés (le violet JDW n'existe plus : l'or est la couleur primaire) */
  --gradient:        var(--lu-degrade-or);
  --gradient-or:     var(--lu-degrade-or);
  --gradient-xp:     var(--lu-degrade-xp);
  --gradient-cyan:   linear-gradient(135deg, #00A8F0, #024BAC);
  --gradient-vert:   linear-gradient(135deg, #22C58B, #128A5E);
  --gradient-rouge:  linear-gradient(135deg, #E2483F, #A32B24);
  --gradient-bleu:   linear-gradient(135deg, #2794D7, #024BAC);
}

/* ==========================================================================
   COMPOSANTS SIGNATURE
   Ils viennent du logo : barre XP, badge de niveau, étoile, encoche.
   ========================================================================== */

/* Coupe diagonale du coin haut-droit : rappel des tracés du logo.
   À réserver aux cartes de premier plan, une par écran. */
.lu-encoche {
  clip-path: polygon(0 0, calc(100% - var(--lu-encoche)) 0, 100% var(--lu-encoche), 100% 100%, 0 100%);
}

/* Barre de progression XP — composant signature.
   RÈGLE : elle affiche toujours une valeur réelle, jamais de décor. */
.lu-xp {
  position: relative;
  height: 14px;
  border-radius: var(--lu-rayon-pilule);
  background: var(--lu-champ);
  border: 1px solid var(--lu-or-profond);
  overflow: hidden;
}
.lu-xp > i {
  display: block;
  height: 100%;
  border-radius: var(--lu-rayon-pilule);
  background: var(--lu-degrade-xp);
  box-shadow: var(--lu-lueur-cyan);
  transition: width 600ms cubic-bezier(0.2, 0, 0, 1);
}
.lu-xp-mince { height: 8px; }

/* Légende de la barre : la valeur chiffrée est obligatoire (accessibilité) */
.lu-xp-legende {
  display: flex;
  justify-content: space-between;
  gap: var(--lu-e-3);
  font-size: var(--lu-t-14);
  color: var(--lu-gris);
  margin-top: var(--lu-e-2);
}
.lu-xp-legende b {
  color: var(--lu-cyan);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

/* Badge de niveau — pastille dorée */
.lu-badge-niveau {
  width: 46px;
  height: 46px;
  flex: none;
  border-radius: var(--lu-rayon-carte);
  background: var(--lu-degrade-or);
  color: #2A1A00;
  font-family: var(--lu-police-titre);
  font-size: var(--lu-t-18);
  display: grid;
  place-items: center;
  line-height: 1;
}
.lu-badge-niveau-sm { width: 32px; height: 32px; font-size: var(--lu-t-14); }

/* Étoile de reconnaissance */
.lu-etoile { color: var(--lu-or); font-size: 1.1rem; line-height: 1; }

/* Jetons d'information */
.lu-jetons { display: flex; gap: var(--lu-e-2); flex-wrap: wrap; }
.lu-jeton {
  font-size: var(--lu-t-12);
  font-weight: 500;
  padding: 4px 10px;
  border-radius: var(--lu-rayon-net);
  border: 1px solid var(--lu-filet);
  color: var(--lu-gris-clair);
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.lu-jeton-actif { border-color: var(--lu-cyan); color: var(--lu-cyan); }
.lu-jeton-or    { border-color: var(--lu-or-profond); color: var(--lu-or); }

/* Grand chiffre (KPI) */
.lu-stat {
  font-family: var(--lu-police-titre);
  font-size: var(--lu-t-33);
  color: var(--lu-blanc);
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
.lu-stat-libelle {
  display: block;
  color: var(--lu-gris);
  font-size: var(--lu-t-14);
  margin-top: var(--lu-e-2);
}

/* Signature de marque : la ligne très espacée du logo.
   Une seule fois par page au maximum, jamais plus de trois mots. */
.lu-lockup {
  font-family: var(--lu-police-lockup);
  font-weight: 300;
  text-transform: uppercase;
  letter-spacing: var(--lu-approche-lockup);
  color: var(--lu-blanc);
}

/* ==========================================================================
   MOUVEMENT RÉDUIT
   Les lueurs et l'animation de remplissage de la barre XP sont neutralisées.
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
  .lu-xp > i { box-shadow: none; }
}