/* ============================================================
   Puck Flip — Socle de jetons de design (source unique)

   Chargé EN PREMIER par layout.php, layout_public.php, login.php et
   quick_check.php, avant app.css / public.css et avant tout <style> local.

   POURQUOI CE FICHIER : les jetons étaient définis QUATRE fois (app.css,
   public.css, le <style> de layout.php, celui de layout_public.php). Toute
   correction devait être répétée à l'identique sans rien pour signaler l'oubli,
   et les deux moitiés du produit (app / vitrine) divergeaient silencieusement.

   RÈGLE DE MAINTENANCE : aucune valeur brute de couleur, taille, rayon ou durée
   ne doit être introduite ailleurs. Un besoin non couvert ici est un jeton
   manquant, pas une exception locale.
   ============================================================ */

:root {
  /* ---------------------------------------------------------
     SURFACES — rampe graphite tiède, une seule source de lumière (en haut).
     La profondeur se lit à la VALEUR de surface, pas à l'ombre : en interface
     sombre une ombre portée ne crée pas de relief, elle crée de la salissure.

     Ordre croissant = du plus enfoncé au plus flottant :
       ink-900  sol de page
       ink-800  surface CREUSÉE : champs de saisie, en-têtes de tableau, puits
       ink-700  surface SURÉLEVÉE : cartes, panneaux
       ink-600  surface FLOTTANTE : menus, popovers, modales

     Le graphite est neutre-tiède et non bleu-noir : les images de cartes
     (bois, maillots, carnations) ne combattent plus une dominante froide.
     --------------------------------------------------------- */
  --ink-900: #0E0F11;
  --ink-800: #16181B;
  --ink-700: #1D2024;
  --ink-600: #262A2F;

  /* ---------------------------------------------------------
     TEXTE — trois niveaux, tous conformes AA sur les trois surfaces.
     Ratios mesurés (ink-900 / ink-800 / ink-700) :
       --text     16,37 / 15,18 / 13,96   AAA
       --text-2    7,36 /  6,82 /  6,27   AA+
       --text-3    5,48 /  5,08 /  4,67   AA
     --text-3 est le PLANCHER : rien en dessous, jamais.
     --------------------------------------------------------- */
  --text: #ECEDEF;
  --text-2: #9BA1A8;
  --text-3: #828A92;

  /* ---------------------------------------------------------
     TRAITS — deux jetons, deux exigences distinctes.

     --line          séparation décorative. Aucun seuil à tenir (1,8:1).
     --line-control  contour de tout CONTRÔLE (champ, bouton secondaire, item
                     de pagination, case). Mesuré 3,53 / 3,67 / 3,73:1 selon la
                     surface — tient WCAG 1.4.11 (seuil 3:1).

     L'ancien jeton unique valait rgba(148,163,184,.18), soit 1,27:1 sur le fond
     de page : un champ de saisie vide était indiscernable de son conteneur.
     --------------------------------------------------------- */
  --line: rgba(185, 190, 196, 0.26);
  --line-strong: rgba(185, 190, 196, 0.38);
  --line-control: rgba(185, 190, 196, 0.54);

  /* ---------------------------------------------------------
     ACCENT — un seul rôle : « le système pointe ici » (focus, onglet actif,
     ligne sélectionnée). Jamais « marque », jamais « action ».

     NOTE DE MIGRATION : la valeur reste le cyan actuel parce que 528 littérales
     de couleur de marque subsistent dans 31 vues, hors de toute var(). Basculer
     l'accent maintenant produirait une interface à deux accents. --ice porte la
     cible ; l'échange se fera dans une passe dédiée qui balaiera aussi ces 528
     littérales. Voir la note en fin de fichier.

     ATTENTION AU NOMMAGE : dans ce projet --primary désigne le cyan et --accent
     désigne l'ambre (héritage du <style> de layout.php). Les deux sens sont
     conservés tels quels — 5 usages de var(--accent) attendent l'ambre.
     --------------------------------------------------------- */
  --primary: #38bdf8;
  --primary-dark: #0ea5e9;
  --primary-a06: rgba(56, 189, 248, 0.06);
  --primary-a12: rgba(56, 189, 248, 0.12);
  --primary-a20: rgba(56, 189, 248, 0.20);
  --primary-a35: rgba(56, 189, 248, 0.35);

  /* Ambre — sens historique de --accent, ne pas confondre avec --primary. */
  --accent: #fbbf24;
  --accent-magenta: #e879f9;

  /* Cible de la passe accent — défini, pas encore consommé. */
  --ice: #BFD8DE;

  /* ---------------------------------------------------------
     SÉMANTIQUES — direction d'une valeur monétaire, jamais décoration.

     RÈGLE NON NÉGOCIABLE : une couleur sémantique ne voyage JAMAIS seule.
     Mesure de luminance : gain L=0,42 et warn L=0,40 sont quasi identiques en
     niveaux de gris. Tout indicateur porte donc aussi un glyphe directionnel
     (↑ ↓ •) ou un mot. Le verdict d'achat est le cœur du produit ; il ne peut
     pas dépendre de la perception des couleurs.
     --------------------------------------------------------- */
  --gain: #34d399;
  --loss: #f87171;
  --warn: #fbbf24;
  --gain-a12: rgba(52, 211, 153, 0.12);
  --loss-a12: rgba(248, 113, 113, 0.12);
  --warn-a12: rgba(251, 191, 36, 0.12);

  /* ---------------------------------------------------------
     TYPOGRAPHIE — deux familles, pas trois.

     --font-num  Archivo. Grotesque à filiation signalétique, chiffres tabulaires
                 réels, axe de largeur variable. Porte les nombres et les titres.
                 Presque toute information utile de cette application est un
                 nombre ou un rapport (55/45, 24/99, PSA 10, 284,50 $) : la face
                 qui les rend autoritaires est la face d'affichage.
     --font-body Public Sans. Conçue pour du contenu civique et financier dense.
                 Neutre sans être Inter, ouvertures plus fermées : lit
                 « document » plutôt qu'« app ».

     Bebas Neue reste chargée pour le lockup de marque (wordmark de la landing).
     Oswald reste chargée en PONT TEMPORAIRE : 20 déclarations littérales
     `font-family: Oswald, Inter, sans-serif` subsistent dans 11 vues et
     tomberaient sur sans-serif. À retirer lors des passes par écran.
     --------------------------------------------------------- */
  --font-body: 'Public Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-num: 'Archivo', 'Public Sans', system-ui, sans-serif;
  --font-display: 'Archivo', 'Public Sans', system-ui, sans-serif;
  --font-brand: 'Bebas Neue', 'Archivo', Impact, sans-serif;

  /* Échelle typographique — 9 crans. L'audit en avait mesuré 75 en usage, dont
     15 tassés entre 0,6 et 0,95rem : des écarts de 0,02rem ne créent aucune
     hiérarchie, seulement du bruit. Les noms --fs-* existants sont conservés
     (migration mécanique) ; --fs-micro, --fs-num et --fs-num-lg sont nouveaux. */
  --fs-micro: 0.6875rem;  /* 11px — étiquettes, en-têtes de tableau */
  --fs-xs: 0.75rem;       /* 12px — méta, notes */
  --fs-sm: 0.8125rem;     /* 13px — cellules denses, secondaire */
  --fs-base: 0.9375rem;   /* 15px — corps */
  --fs-md: 1.0625rem;     /* 17px — titre de carte, chapeau */
  --fs-lg: 1.3125rem;     /* 21px — titre de page */
  --fs-xl: 1.75rem;       /* 28px — héros d'écran */
  --fs-num: 2.125rem;     /* 34px — UN chiffre par vue : prix, verdict */
  --fs-num-lg: 2.875rem;  /* 46px — verdict plein écran */
  --fs-2xl: var(--fs-num);

  /* Graisses — cinq crans utiles, contre le duo 400/700 habituel. */
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;
  --fw-heavy: 800;

  --lh-tight: 1.15;
  --lh-snug: 1.35;
  --lh-base: 1.6;

  /* ---------------------------------------------------------
     ESPACEMENTS — l'échelle existante est correcte (base 4px, 9 crans) ; le
     problème mesuré n'était pas la gamme mais son adoption : 1 383 valeurs en
     dur contre 53 usages de jeton. Elle est donc conservée à l'identique pour
     que la migration reste mécanique.

     --sp-5 (20px) est DÉPRÉCIÉ : le pas 16 → 24 donne un meilleur rythme
     vertical que 16 → 20 → 24. Conservé pour ne rien casser, à ne plus employer.
     --------------------------------------------------------- */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
  --sp-8: 32px;

  /* Hauteur de la barre d'onglets mobile. Lue par app.css pour reserver le bas de
     page, et par listing_edit.php pour poser sa barre de sauvegarde AU-DESSUS. */
  --tabbar-h: 60px;
  --sp-10: 40px;
  --sp-12: 48px;

  /* ---------------------------------------------------------
     RAYONS — trois crans contre les 15 mesurés (2,3,4,5,6,7,8,9,10,12,14,16,20,
     24 px + pill). Rien au-dessus de 14px.
     --------------------------------------------------------- */
  --r-sm: 4px;    /* champs, badges, cellules, petits contrôles */
  --r-md: 8px;    /* cartes, panneaux, boutons */
  --r-lg: 14px;   /* modales, feuilles, cadres d'image */
  --r-pill: 999px;

  /* ---------------------------------------------------------
     OMBRES — teintées au graphite du fond, jamais noir pur. Réservées aux
     niveaux FLOTTANTS : une carte n'a pas d'ombre, elle a une surface plus
     claire que la page.
     --------------------------------------------------------- */
  --shadow-1: 0 1px 2px rgba(6, 7, 9, 0.5);
  --shadow-2: 0 8px 24px rgba(6, 7, 9, 0.55);
  --shadow-3: 0 24px 64px rgba(6, 7, 9, 0.7);

  /* ---------------------------------------------------------
     MOUVEMENT — le survol change la VALEUR, la pression change la POSITION.
     Rien au-delà de 260 ms.
     --------------------------------------------------------- */
  --t-fast: 120ms;
  --t-base: 180ms;
  --t-enter: 260ms;
  --ease-out: cubic-bezier(0.25, 1, 0.5, 1);

  /* ---------------------------------------------------------
     ALIAS DE COMPATIBILITÉ

     Les noms historiques restent valides et pointent vers la nouvelle rampe :
     786 usages de var() les consomment déjà dans les vues (447 pour la famille
     --text, 185 pour --border, 154 pour --bg et --card-bg). Les supprimer
     casserait tout ; les rediriger propage la correction sans toucher une vue.

     NE JAMAIS écrire une séquence « stelo-slash » dans un commentaire CSS : elle
     ferme le bloc et transforme la suite en texte parasite, ce qui invalide
     silencieusement tout le reste de :root.
     --------------------------------------------------------- */
  --bg: var(--ink-900);
  --bg-soft: var(--ink-800);
  --bg-elevated: var(--ink-800);
  --card-bg: var(--ink-700);
  --surface-float: var(--ink-600);

  --text-muted: var(--text-2);
  --text-light: var(--text-2);
  --header-fg: var(--text);

  --border: var(--line);
  --border-strong: var(--line-strong);

  --glow-cyan: var(--primary-a35);
  --cta-gradient: var(--primary);

  --success: var(--gain);
  --danger: var(--loss);
  --danger-text: #fda4af;
  --warning: var(--warn);
  --secondary: #6E757D;

  --accent-a12: var(--warn-a12);
  --success-a12: var(--gain-a12);
  --danger-a08: rgba(248, 113, 113, 0.08);
  --danger-a30: rgba(248, 113, 113, 0.30);

  --radius: var(--r-md);
  --radius-sm: var(--r-sm);
  --radius-pill: var(--r-pill);

  --shadow-glow: 0 0 0 1px var(--accent-a20), 0 4px 16px var(--accent-a12);
}

/* ============================================================
   RESTE À FAIRE (passes ultérieures, hors socle)

   1. ACCENT — remplacer --accent par --ice et balayer les 528 littérales
      (#38bdf8 / rgba(56,189,248,…) : 225 en vues, 77 en layouts, 31 en CSS ;
      plus #34d399 ×105, #fbbf24 ×73, #f87171 ×43, #e879f9 ×20).
   2. POLICES — retirer Oswald une fois les 20 `font-family: Oswald, …`
      littéraux des 11 vues migrés vers var(--font-display).
   3. --bg-elevated sert à la fois aux CHAMPS (doivent être creusés) et aux
      POPOVERS (doivent flotter). Migrer les popovers vers --surface-float.
   4. Les 425 attributs style="…" en ligne échappent à tout jeton.
   ============================================================ */