/* ════════════════════════════════════════════════════════════════════════════
   strive-ui.css : LE SYSTÈME VISUEL DE STRIVE
   Strive × Diamix Studio · rebrand août 2026 (voir STRIVE_DA.md)
   ─────────────────────────────────────────────────────────────────────────────
   Cette feuille porte, en un seul endroit :
     1. la PALETTE DE MARQUE (Élan orange, XP vert, Éclats bleu) ;
     2. l'ACCENT D'INTERACTION, volontairement neutre (crème sur sombre, encre
        sur clair) : dans le monde outil, la couleur est réservée aux monnaies ;
     3. les SURFACES PLATES du cockpit Sport (§37 bis de CLAUDE.md), promues au
        rang de socle commun : c'est le style demandé pour toute l'interface ;
     4. les COMPOSANTS partagés (carte, boutons, en-tête de section, badges).

   ⚠️ POURQUOI DE NOUVEAUX NOMS DE VARIABLES, ET PAS UN RENOMMAGE
   Les 32 pages consomment déjà --violet / --amber, et les THÈMES (§17) sont
   propriétaires de ces noms : les redéfinir ici déclencherait une guerre de
   spécificité avec css/themes/*.css, que theme.js réancre en fin de <head> à
   chaque changement de thème. Les tokens ci-dessous portent donc des noms
   qu'AUCUN thème ne déclare : aucun conflit possible, et un thème acheté
   continue de repeindre --bg / --text comme avant.
   Conséquence assumée : les trois couleurs de marque ne changent PAS d'un thème
   à l'autre. C'est voulu, l'orange de l'Élan est l'identité d'une monnaie, pas
   une préférence d'affichage.

   ⚠️ CE FICHIER NE MASQUE RIEN ET N'ANIME RIEN
   Il ne pose aucune animation d'entrée : l'état de repos doit rester l'état
   visible (§22, §27, §49). Les pages gardent leurs propres scènes.

   ── DÉPLOIEMENT ──────────────────────────────────────────────────────────────
   Branché aujourd'hui sur home.html. Pour l'étendre à une page : ajouter
   <link rel="stylesheet" href="css/strive-ui.css"> APRÈS css/type.css, puis
   remplacer dans la page var(--violet) par var(--accent), var(--amber) par
   var(--elan), et --bg3 par var(--surf) sur les cartes.
   ════════════════════════════════════════════════════════════════════════════ */

/* ══════════════════════════════════════════════════════════════════════
   1 · PALETTE DE MARQUE
   ─────────────────────────────────────────────────────────────────────
   Trois couleurs, trois rôles, et rien d'autre. Toute couleur posée sur
   une page outil doit pouvoir se justifier par l'une de ces trois lignes,
   ou par un état système (succès / erreur).
   ══════════════════════════════════════════════════════════════════════ */
:root {
  --elan:   #F0A347;   /* Élan   : énergie, soleil, vitalité  */
  --xp:     #90CD6F;   /* XP     : nature, savoir, croissance */
  --eclats: #8BB8E8;   /* Éclats : monnaie du ciel            */

  /* Aplats de fond pour badges et pastilles */
  --elan-bg:   rgba(240,163,71,.10);
  --xp-bg:     rgba(144,205,111,.10);
  --eclats-bg: rgba(139,184,232,.10);

  /* Liserés assortis */
  --elan-line:   rgba(240,163,71,.22);
  --xp-line:     rgba(144,205,111,.22);
  --eclats-line: rgba(139,184,232,.22);

  /* Halos (lueurs, ombres colorées) */
  --elan-glow:   rgba(240,163,71,.30);
  --xp-glow:     rgba(144,205,111,.30);
  --eclats-glow: rgba(139,184,232,.30);

  /* Le dégradé signature : Éclats vers XP vers Élan. Le même que la barre
     de l'écran de chargement (§59) : c'est ce qui fait qu'on reconnaît
     Strive avant même de lire un mot. */
  --brand-grad: linear-gradient(100deg, var(--eclats), var(--xp), var(--elan));
}

/* ══════════════════════════════════════════════════════════════════════
   2 · ACCENT D'INTERACTION
   ─────────────────────────────────────────────────────────────────────
   ⚠️ L'ACCENT N'EST PAS UNE COULEUR DE MARQUE, ET C'EST TOUT L'ENJEU DU
   REBRAND. L'ancien violet peignait à la fois les boutons, les liens, les
   états actifs ET les récompenses : plus rien ne distinguait « tu peux
   agir ici » de « tu as gagné quelque chose ». L'accent devient donc
   neutre (crème sur sombre, encre sur clair) et la couleur est rendue aux
   trois monnaies.

   --accent      : fond d'un bouton plein, trait d'un état actif
   --accent-ink  : ce qu'on écrit DESSUS. ⚠️ Jamais #fff ni #000 en dur : la
                   paire doit rester contrastée dans les deux schémas.
   --accent-soft : voile discret (survol, pastille, état sélectionné)
   ══════════════════════════════════════════════════════════════════════ */
:root {
  --accent:      rgba(255,255,255,.92);
  --accent-hi:   #ffffff;
  --accent-ink:  #0b0b0c;
  --accent-soft: rgba(255,255,255,.08);
  --accent-line: rgba(255,255,255,.20);
  --accent-glow: rgba(255,255,255,.18);
}

/* ══════════════════════════════════════════════════════════════════════
   3 · SURFACES PLATES  (le style du cockpit Sport, §37 bis)
   ─────────────────────────────────────────────────────────────────────
   Une seule famille de surfaces, un seul rayon, un seul filet. La
   hiérarchie est portée par la TAILLE et l'ESPACE, jamais par la couleur :
   c'est ce qui a fait disparaître le rendu « dégradé partout » de la page
   Sport, et c'est ce qu'on généralise ici.
   ══════════════════════════════════════════════════════════════════════ */
:root {
  --surf:  rgba(255,255,255,.026);   /* carte, panneau                   */
  --surf2: rgba(255,255,255,.045);   /* élément interne, bouton fantôme  */
  --line:  rgba(255,255,255,.07);    /* filet standard                   */
  --line2: rgba(255,255,255,.12);    /* filet au survol / focus          */
  --track: rgba(255,255,255,.07);    /* piste d'une barre de progression */
  --dim:   #8a8a8a;                  /* texte secondaire                 */
  --dim2:  #585858;                  /* texte tertiaire                  */

  --rad:   22px;   /* carte de premier niveau     */
  --rad-m: 15px;   /* carte interne, bouton large */
  --rad-s: 11px;   /* pastille, petit bouton      */
}

/* ── Inversion pour les thèmes CLAIRS ──────────────────────────────────
   ⚠️ Un voile BLANC à 2,6 % posé sur une page ivoire n'existe pas : sans
   cette inversion, toutes les cartes disparaissent d'un coup. C'est le
   défaut déjà corrigé page par page dans light-base.css (§16, §17) ; il
   est traité ici une fois pour toutes.
   ⚠️ La carte devient BLANC OPAQUE, pas un voile sombre : sur un fond
   ivoire, c'est le contraste blanc/ivoire qui la fait flotter, pas un
   trait (parti pris de clair.css). */
html[data-theme-scheme="light"] {
  --surf:  #ffffff;
  --surf2: #fbfaf6;
  --line:  rgba(28,27,24,.09);
  --line2: rgba(28,27,24,.16);
  --track: rgba(28,27,24,.08);
  --dim:   #6c6a63;
  --dim2:  #8f8c85;

  --accent:      #1c1b18;
  --accent-hi:   #000000;
  --accent-ink:  #ffffff;
  --accent-soft: rgba(28,27,24,.06);
  --accent-line: rgba(28,27,24,.18);
  --accent-glow: rgba(28,27,24,.14);
}

/* ── Encre des monnaies ────────────────────────────────────────────────
   ⚠️ L'orange de marque ne fait que 2,1:1 sur du blanc : illisible en petit.
   On garde la teinte pour les APLATS et les DÉGRADÉS (--elan), et on
   n'assombrit que ce qui devient du TEXTE (--elan-ink). Même arbitrage que
   --amber / --amber2 dans clair.css.
   ⚠️ VALEURS MESURÉES, PAS ESTIMÉES, sur --surf2 (#fbfaf6), la surface la
   plus claire où ces encres se posent : elan 4,67 · xp 4,82 · eclats 5,27.
   Toute retouche de ces trois valeurs se REMESURE — un contraste ne
   s'estime pas à l'œil sur une capture. */
:root                            { --elan-ink: var(--elan); --xp-ink: var(--xp); --eclats-ink: var(--eclats); }
html[data-theme-scheme="light"]  { --elan-ink: #a85f0b;     --xp-ink: #3f7d28;   --eclats-ink: #2b6ca8; }

/* ══════════════════════════════════════════════════════════════════════
   4 · TYPOGRAPHIE  (STRIVE_DA.md §2)
   ─────────────────────────────────────────────────────────────────────
   Geist parcourt, Bricolage Grotesque se contemple. La page qui veut du
   gamifié pose var(--font-game) sur les seuls titres concernés :
   ⚠️ jamais sur un libellé, un prix ou un compteur, qui se comparent et se
   lisent plus vite en grotesque (§23).
   Les polices se chargent depuis le <head> de la page : un @import CSS
   bloque le rendu le temps d'un aller-retour de plus.
   ══════════════════════════════════════════════════════════════════════ */
:root {
  --font-outil: 'Geist', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-game:  'Bricolage Grotesque', 'Geist', sans-serif;
}

/* ══════════════════════════════════════════════════════════════════════
   5 · COMPOSANTS PARTAGÉS
   ─────────────────────────────────────────────────────────────────────
   ⚠️ La carte partagée s'appelle `.su-card` et NON `.card` : une trentaine
   de pages déclarent déjà leur propre `.card`, et cette feuille est
   chargée avant les <style> de page. Réutiliser le nom aurait produit un
   conflit silencieux dont le vainqueur dépendrait de l'ordre d'injection
   des thèmes. Une page qui adopte le socle renomme, ou surcharge.
   ══════════════════════════════════════════════════════════════════════ */

/* Grille de tableau de bord : 12 colonnes, chaque enfant déclare son --span. */
.dash { display: grid; grid-template-columns: repeat(12, 1fr); gap: 14px; align-content: start; }
.dash > * { grid-column: span var(--span, 12); min-width: 0; }
@media (max-width: 1180px) { .dash > * { grid-column: span 12; } }

/* La carte : plate, généreuse, un seul filet. */
.su-card {
  background: var(--surf);
  border: 1px solid var(--line);
  border-radius: var(--rad);
  padding: 22px 24px;
  display: flex;
  flex-direction: column;
}

/* ── Boutons ──────────────────────────────────────────────────────────
   Primaire = crème sur sombre, encre sur clair. Le bouton plein est le
   SEUL endroit du monde outil où une surface est pleine : c'est ce qui le
   rend repérable sans lui donner de couleur. */
.btn-primary, .btn-ghost, .btn-mini, .btn-elan, .lnk {
  font-family: var(--font-outil);
  cursor: pointer;
  white-space: nowrap;
  transition: background .16s ease, color .16s ease, border-color .16s ease, transform .12s ease;
}
.btn-primary {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  background: var(--accent); color: var(--accent-ink); border: none;
  border-radius: 13px; padding: 13px 20px;
  font-size: 13px; font-weight: 600; letter-spacing: -.01em;
}
.btn-primary:hover  { background: var(--accent-hi); }
.btn-primary:active { transform: scale(.985); }

.btn-ghost {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  background: var(--surf2); color: var(--text2);
  border: 1px solid var(--line); border-radius: 13px; padding: 13px 18px;
  font-size: 12.5px; font-weight: 600;
}
.btn-ghost:hover { color: var(--text); border-color: var(--line2); }

.btn-mini {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--surf2); color: var(--dim);
  border: 1px solid var(--line); border-radius: var(--rad-s); padding: 8px 13px;
  font-size: 11.5px; font-weight: 600;
}
.btn-mini:hover { color: var(--text2); border-color: var(--line2); }

/* Bouton Élan : la seule variante colorée, pour une action qui rapporte. */
.btn-elan {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  background: var(--elan-bg); color: var(--elan-ink);
  border: 1px solid var(--elan-line); border-radius: 13px; padding: 13px 20px;
  font-size: 13px; font-weight: 600;
}
.btn-elan:hover { border-color: var(--elan); }

.lnk {
  display: inline-flex; align-items: center; gap: 3px;
  background: none; border: none; color: var(--dim);
  font-size: 12px; font-weight: 500; padding: 4px 0; text-decoration: none;
}
.lnk:hover { color: var(--text); }

/* ── En-tête de section ───────────────────────────────────────────────
   Un titre qui se LIT, pas une étiquette en petites capitales espacées :
   à 11 px avec 1,4 px d'interlettrage, le titre pesait moins que le
   contenu qu'il annonce. */
.dsec-head  { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.dsec-title { font-size: 15px; font-weight: 600; color: var(--text); letter-spacing: -.2px; }
.dsec-sub   { font-size: 12px; font-weight: 500; color: var(--dim); margin-top: 2px; }

/* ── Badges de rang (monde île, STRIVE_DA.md §3) ────────────────────── */
.badge-rang {
  display: inline-flex; align-items: center;
  font-family: var(--font-game); font-weight: 700; font-size: 10px;
  padding: 3px 8px; border-radius: 99px; letter-spacing: .02em;
}
/* ⚠️ LA TEINTE PEINT, L'ENCRE ECRIT. Bronze, argent et platine portaient une
   encre CLAIRE, calibree pour du noir : mesuree sur --surf2 (#fbfaf6), elle
   tombe a 2,89 / 2,05 / 1,76:1 en theme clair, soit illisible a 10 px. Or et
   diamant s'inversaient deja, puisqu'ils passent par --elan-ink / --eclats-ink.
   Les trois encres ci-dessous sont MESUREES, pas estimees : 6,02 / 6,03 / 5,58
   sur --surf2. Toute retouche se REMESURE. */
:root                           { --bronze-ink: #c8864a; --argent-ink: #b0b0be; --platine-ink: #8bc8dc; }
html[data-theme-scheme="light"] { --bronze-ink: #8a5322; --argent-ink: #5f5f6b; --platine-ink: #2c6d80; }

.badge-bronze  { background: rgba(160,100,50,.15);  color: var(--bronze-ink);  border: 1px solid rgba(160,100,50,.25); }
.badge-argent  { background: rgba(180,180,190,.12); color: var(--argent-ink);  border: 1px solid rgba(180,180,190,.20); }
.badge-or      { background: var(--elan-bg);        color: var(--elan-ink);    border: 1px solid var(--elan-line); }
.badge-platine { background: rgba(140,200,220,.12); color: var(--platine-ink); border: 1px solid rgba(140,200,220,.20); }
.badge-diamant { background: var(--eclats-bg);      color: var(--eclats-ink);  border: 1px solid var(--eclats-line); }

/* ── Pastilles de monnaie ─────────────────────────────────────────────
   Une pastille par monnaie, même gabarit : c'est la couleur qui dit
   laquelle, jamais la forme. */
.pill-elan, .pill-xp, .pill-eclats {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 11px; border-radius: 99px;
  font-size: 12.5px; font-weight: 700; font-variant-numeric: tabular-nums;
}
.pill-elan   { background: var(--elan-bg);   color: var(--elan-ink);   border: 1px solid var(--elan-line); }
.pill-xp     { background: var(--xp-bg);     color: var(--xp-ink);     border: 1px solid var(--xp-line); }
.pill-eclats { background: var(--eclats-bg); color: var(--eclats-ink); border: 1px solid var(--eclats-line); }

/* ══════════════════════════════════════════════════════════════════════
   6 · BARRE DE PROGRESSION DE MARQUE
   ─────────────────────────────────────────────────────────────────────
   Le degrade signature Eclats vers XP vers Elan, celui de l'ecran de
   chargement (js/boot-loader.js, §59). C'est LA barre de Strive : toute
   progression qui merite d'etre regardee la porte.

   ⚠️ LA PISTE SUIT LE THEME (--track), elle n'est PAS opaque comme celle
   de l'ecran de chargement. Celle-la est posee sur un ciel clair et doit
   donc etre sombre en dur ; ici la barre vit dans une carte, et une piste
   sombre en dur disparaitrait sur une carte blanche en theme clair.

   ⚠️ LA LARGEUR N'EST PAS ANIMEE PAR UNE TRANSITION CSS quand la valeur
   est interpolee en JS : deux amortissements superposes font trainer la
   barre derriere le vrai avancement (§59). Pour une barre posee une seule
   fois, la transition ci-dessous suffit et rend le remplissage lisible.
   ══════════════════════════════════════════════════════════════════════ */
.sui-bar {
  position: relative; width: 100%; height: 7px;
  border-radius: 999px; overflow: hidden;
  background: var(--track);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, .22);
}
.sui-bar-fill {
  position: relative; display: block; height: 100%; width: 0%;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--eclats), var(--xp) 55%, var(--elan));
  box-shadow: 0 0 10px rgba(240, 163, 71, .45);
  transition: width .7s cubic-bezier(.2, .8, .2, 1);
}
/* Le reflet qui traverse : il dit que la progression est VIVANTE. Il ne se
   joue que sur une barre reellement en cours (.sui-bar.live) — un reflet
   permanent sur une barre pleine capterait l'oeil pour ne rien dire (§31). */
.sui-bar.live .sui-bar-fill::after {
  content: ''; position: absolute; inset: 0; border-radius: 999px;
  background: linear-gradient(100deg, transparent 20%, rgba(255, 255, 255, .55) 50%, transparent 80%);
  animation: sui-sweep 1.5s ease-in-out infinite;
}
@keyframes sui-sweep { from { transform: translateX(-100%); } to { transform: translateX(100%); } }

/* Variante haute, pour une barre qui est le sujet d'une carte. */
.sui-bar.tall { height: 10px; }

/* ⚠️ L'etat de repos reste VISIBLE : sans animation, la barre affiche quand
   meme son remplissage. C'est le bug de playDash() (§49), ou couper les
   animations affichait une jauge vide sur une journee pleine. */
@media (prefers-reduced-motion: reduce) {
  .sui-bar-fill { transition: none; }
  .sui-bar.live .sui-bar-fill::after { animation: none; opacity: 0; }
}