/* ═══════════════════════════════════════════════════════════════════════════
   DOPPLER — charte graphique
   ═══════════════════════════════════════════════════════════════════════════

   Reprise de `mockup/doppler.html`. La palette vient des phases du couteau
   Doppler : Phase 2 en violet, Ruby, Sapphire, Black Pearl — d'où le nom du
   produit, et d'où un accent qui n'est ni vert ni rouge.

   TROIS RÈGLES, tenues partout et à ne pas défaire :

   1. L'ACCENT NE DIT JAMAIS UN GAIN NI UNE PERTE. Sur un outil qui affiche
      trois mille marges, un accent vert ferait lire une décoration comme une
      information. Le violet dit « Doppler », jamais « profit ». La menthe et le
      corail sont réservés au signe d'un montant, et à rien d'autre.

   2. LES RATIOS DE CONTRASTE SONT CALCULÉS, pas estimés. Ils sont notés à côté
      de chaque jeton, mesurés sur `--fond` ET sur `--surface` — un texte lisible
      sur le fond ne l'est pas forcément dans une carte.

   3. LES JETONS GARDENT LEURS NOMS. Trois cent quatre-vingt-huit classes les
      référencent : changer un nom demande de tout relire, changer une valeur
      re-habille l'application entière. Seul l'accent a été renommé — il
      s'appelait `--or` et n'est plus doré ; un nom qui ment coûte plus cher
      qu'un remplacement.

   CE QUI A ÉTÉ CORRIGÉ EN REPRENANT LA MAQUETTE : son encre la plus faible
   (`--ink-4`, #54546A) tombe à **2,7:1** — sous le plancher, donc illisible pour
   du texte. L'échelle a été remontée d'un cran pour garder quatre niveaux
   distincts au-dessus de 4,5:1. #54546A survit, mais comme trait, jamais comme
   encre.
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
  /* ── surfaces ────────────────────────────────────────────────────────────
     Cinq niveaux, du plus profond au plus proche. Au-delà on ne distingue plus,
     et chaque niveau de plus est une décision de plus à prendre à chaque
     élément. Le violet est déjà dans le noir : les gris tirent vers le bleu
     pour rester de la même famille que l'accent. */
  --fond:      #0b0b11;
  --surface:   #101018;
  --surface-2: #16161f;
  --surface-3: #1d1d28;
  --trait:     #2a2a38;
  --trait-doux:#1a1a24;

  /* ── texte ───────────────────────────────────────────────────────────────
     Ratios sur --fond / --surface. Le plancher est 4,5:1 : sous cette valeur un
     texte ne porte plus d'information, il fait de la texture. */
  --texte:   #efeff6;   /* 17,1 / 16,5 */
  --texte-2: #b4b4c6;   /*  9,6 /  9,3 */
  --sourdine:#8e8ea6;   /*  6,1 /  5,9 */
  --tenu:    #7b7b92;   /*  4,8 /  4,6 — le plancher */

  /* ── accent : la Phase 2 ─────────────────────────────────────────────────
     `--accent` sert aux REMPLISSAGES, avec `--accent-encre` posée dessus
     (4,6:1). `--accent-clair` sert au TEXTE et aux liens sur fond sombre — le
     violet plein n'y passe qu'à 4,5:1, sa version claire à 7,4:1. Deux valeurs
     et non une : la même couleur ne peut pas faire les deux. */
  --accent:       #7b5cff;   /* 4,5:1 sur fond */
  --accent-clair: #a68cff;   /* 7,4:1 — pour le texte */
  --accent-sombre:#5b3ee0;
  --accent-encre: #07070b;
  --accent-voile: color-mix(in srgb, var(--accent) 14%, transparent);

  /* ── sémantique : le signe d'un montant, et rien d'autre ─────────────────
     Menthe et corail plutôt que vert et rouge saturés : plus lisibles sur fond
     sombre, et surtout distincts d'un accent violet — un daltonien deutéran ne
     confond ni l'un ni l'autre avec la Phase 2. */
  --hausse: #25d6a0;   /* 10,5:1 */
  --baisse: #ff4e62;   /*  6,1:1 */
  --alerte: #ffb43d;   /* 11,1:1 */
  --info:   #2fa8ff;   /*  7,6:1 */

  /* ── phases du Doppler, pour les séries d'un graphe ──────────────────────
     Elles ne sont PAS interchangeables avec la sémantique ci-dessus : une série
     de graphe nomme une place, elle ne dit pas un gain. */
  --phase-2:     #7b5cff;
  --ruby:        #ff3e6b;
  --sapphire:    #2fa8ff;
  --pearl:       #8fe3d0;
  --emerald:     #25d6a0;

  /* ── raretés CS2 ─────────────────────────────────────────────────────────
     Les couleurs du jeu, telles quelles : les reproduire est le seul moyen
     qu'un joueur reconnaisse une rareté sans lire son nom. */
  --r-milspec:   #4b69ff;
  --r-restricted:#8847ff;
  --r-classified:#d32ce6;
  --r-covert:    #eb4b4b;
  --r-rare:      #ffd230;

  /* ── dégradés ────────────────────────────────────────────────────────────
     Réservés aux surfaces de marque — logo, hero, bouton principal. Jamais
     derrière un chiffre : un dégradé fait varier le contraste d'un bout à
     l'autre du texte. */
  --grad-phase: linear-gradient(135deg, #7b5cff 0%, #b14bff 40%, #ff3ea5 100%);
  --grad-pearl: linear-gradient(120deg, #8fe3d0 0%, #7b5cff 45%, #ff3ea5 100%);

  /* ── rayons, ombres, transitions ─────────────────────────────────────────*/
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 18px;
  --r-xl: 26px;
  --ombre:      0 18px 40px -18px rgba(0, 0, 0, .85);
  --ombre-douce:0 2px 10px -4px rgba(0, 0, 0, .6);
  --ease: cubic-bezier(.22, .61, .36, 1);

  /* ── espacements ─────────────────────────────────────────────────────────
     Une échelle, pas des valeurs au cas par cas : c'est elle qui fait qu'une
     page tient debout sans qu'on ait à y penser. */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --sp-6: 32px;
  --sp-7: 48px;

  --rail: 236px;
}

/* ═══════════════════════════════════════════════════════ base ═══════════ */

* { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

/* Le mouvement est un choix de confort, pas une fonction : qui le refuse doit
   pouvoir s'en passer sans perdre d'information. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}

body {
  margin: 0;
  background: var(--fond);
  color: var(--texte);
  font-family: Inter, system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 14px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

h1, h2, h3, h4, h5 {
  font-family: Sora, Inter, system-ui, sans-serif;
  font-weight: 600;
  letter-spacing: -.02em;
  margin: 0;
  line-height: 1.15;
}

p { margin: 0; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
button { background: none; border: 0; cursor: pointer; }

/* `hidden` DOIT GAGNER. La regle du navigateur est `[hidden]{display:none}` :
   la moindre classe qui pose un `display` la bat, puisqu'elles ont la meme
   specificite et que la notre passe apres. Un `display:flex` sur un element
   masque le RALLUME en silence — c'est ainsi que la jauge de mot de passe et
   les bandeaux de message s'affichaient vides sur la page de connexion.

   Le code JavaScript de l'outil pilote une vingtaine d'elements par cet
   attribut (`el.hidden = ...`) : sans cette ligne, chacun est un piege qui
   attend qu'on lui donne une classe. `!important` est justifie ici — il n'y a
   pas de cas ou l'on veut voir un element declare masque. */
[hidden] { display: none !important; }

::selection { background: color-mix(in srgb, var(--accent) 35%, transparent); }

/* Le focus se VOIT. Un outil qui se pilote au clavier — et celui-ci en vit —
   ne peut pas laisser deviner où l'on est. */
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 6px;
}

/* LES CHIFFRES S'ALIGNENT. `tabular-nums` fige la largeur des glyphes : sans
   lui, une colonne de montants ondule et ne se compare plus d'un coup d'œil. */
.num, .nombre {
  font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, monospace;
  font-variant-numeric: tabular-nums;
  letter-spacing: -.02em;
  white-space: nowrap;
}

/* ── le grain ────────────────────────────────────────────────────────────
   Une trame très faible sur toute la page. Elle casse le banding des aplats
   sombres, que les dégradés de fond rendent visible sur un écran 8 bits.
   `pointer-events:none` : elle ne doit intercepter aucun clic. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9999;
  opacity: .035;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* Halos de couleur, posés derrière le contenu. Décoratifs, donc `aria-hidden`
   côté balisage et `z-index:0` ici — jamais au-dessus d'un texte. */
.halo {
  position: fixed;
  border-radius: 50%;
  filter: blur(120px);
  pointer-events: none;
  z-index: 0;
}

/* ── barres de défilement ───────────────────────────────────────────────── */
*::-webkit-scrollbar { width: 9px; height: 9px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb {
  background: var(--surface-3);
  border-radius: 99px;
  border: 2px solid transparent;
  background-clip: content-box;
}
*::-webkit-scrollbar-thumb:hover { background: var(--trait); background-clip: content-box; }
* { scrollbar-width: thin; scrollbar-color: var(--surface-3) transparent; }

/* ═══════════════════════════════════════════ utilitaires de signe ════════
   `.hausse` / `.baisse` ne colorent QUE des montants. Elles portent aussi un
   chevron dans le texte (voir `signed()` côté application) : rouge contre vert
   est le seul couple qu'aucun ajustement ne sauve en deutéranopie, donc la
   couleur ne peut pas être le seul porteur du signe. */
.hausse, .up   { color: var(--hausse); }
.baisse, .down { color: var(--baisse); }
.neutre        { color: var(--sourdine); }
.alerte, .warn { color: var(--alerte); }
.faint, .tenu  { color: var(--tenu); }
.sourdine      { color: var(--sourdine); }

/* ═══════════════════════════════ compatibilité des noms ══════════════════

   TROIS GÉNÉRATIONS DE NOMS COEXISTENT dans les feuilles et le tableau de bord :
   une anglaise (`--fg`, `--line`, `--e3`), une dorée (`--or`), une française
   (`--texte`, `--surface`). Cinquante-trois noms au total, sur 388 classes.

   Les renommer un par un demanderait de relire chaque règle, et une seule
   omission laisse un `var()` sans valeur — donc une couleur héritée, muette et
   difficile à repérer. Les définir comme ALIAS re-habille l'application entière
   en un endroit, et laisse le renommage se faire au fil des retouches.

   `--or*` n'est plus doré : le nom ment désormais, et c'est assumé le temps que
   les usages migrent vers `--accent*`.
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
  /* surfaces */
  --bg:        var(--fond);
  --ton:       var(--surface-2);
  --line:      var(--trait);
  --line-soft: var(--trait-doux);

  /* ESPACEMENTS, ANCIENS NOMS. `--e1` a `--e8` sont une ECHELLE D'ESPACEMENT,
     pas des surfaces. Ils etaient definis ici comme des couleurs — un reste
     d'une lecture ou le « e » valait « elevation » — alors que les trois
     feuilles et les deux pages les consomment en `padding`, `gap` et `margin`.
     Une couleur dans un `padding` rend la declaration invalide : le navigateur
     la jette sans un mot, et la page tombe a zero d'espacement. C'est ce qui
     mettait la connexion et le tableau de bord a plat.
     Meme echelle que `--sp-1..7`, prolongee de deux crans dont les pages de
     vitrine ont besoin. */
  --e1: 4px;
  --e2: 8px;
  --e3: 12px;
  --e4: 16px;
  --e5: 24px;
  --e6: 32px;
  --e7: 48px;
  --e8: 64px;

  /* encre */
  --fg:    var(--texte);
  --fg-2:  var(--texte-2);
  --dim:   var(--sourdine);
  --faint: var(--tenu);

  /* accent — l'ancien nom doré, redirigé */
  --or:         var(--accent);
  --or-clair:   var(--accent-clair);
  --or-sombre:  var(--accent-sombre);
  --or-encre:   var(--accent-encre);
  --or-voile:   var(--accent-voile);
  --accent-2:   var(--accent-clair);
  --accent-dim: var(--accent-sombre);
  --accent-ink: var(--accent-encre);

  /* sémantique */
  --up:   var(--hausse);
  --down: var(--baisse);
  --warn: var(--alerte);

  /* notes : S A B C D. Elles ne réutilisent PAS la sémantique du signe — une
     note dit une qualité, pas un gain — mais elles doivent rester distinctes
     entre elles. Ordre chaud → froid, du meilleur au pire. */
  --note-s: #b14bff;   /* 5,3:1 */
  --note-a: #25d6a0;   /* 10,5:1 */
  --note-b: #2fa8ff;   /* 7,6:1 */
  --note-c: #ffb43d;   /* 11,1:1 */
  --note-d: #7b7b92;   /* 4,8:1 — le plancher, pour ce qui n'intéresse pas */
  --note-encre: var(--accent-encre);
  --gS: var(--note-s);
  --gA: var(--note-a);
  --gB: var(--note-b);
  --gC: var(--note-c);
  --gD: var(--note-d);
  --grade-ink: var(--note-encre);

  /* raretés, second jeu de noms */
  --rarete-restricted: var(--r-restricted);
  --rarete-classified: var(--r-classified);
  --rarete-rare:       var(--r-rare);

  /* rayons et ombres */
  --r-s: var(--r-sm);
  --r-m: var(--r-md);
  --r-l: var(--r-lg);
  --shadow:   var(--ombre);
  --ombre-2:  var(--ombre-douce);
  --ombre-3:  var(--ombre);

  /* familles typographiques */
  --sans: Inter, system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "JetBrains Mono", ui-monospace, SFMono-Regular, monospace;

  /* mesures d'interface */
  --barre-defilement: 9px;
  --barre-h: 56px;
  --nom-w: 260px;
}