/* ==========================================================================
   kg-refonte.css — LES FONDATIONS DE LA REFONTE VISUELLE (octobre 2026).

   POURQUOI UNE FEUILLE À PART ET PAS UNE RETOUCHE DE kg-public.css : la refonte
   se déploie page après page, en commençant par /tarifs. Une feuille déjà
   partagée par onze pages ne peut pas changer de police ni de bleu d'un seul
   coup sans transformer dix pages que personne n'a regardées. Chaque page qui
   adopte cette feuille la charge APRÈS son propre style : elle gagne par
   l'ordre. TOUTES les pages publiques et les pages-outils l'ont désormais
   adoptée (octobre 2026), et elle RESTE : c'est le fichier des jetons, partagé
   par kg-pages.css, kg-accueil.css, kg-espace.css et kg-outils.css, et non un
   morceau de kg-public.css à y remonter (les offres pro, qui gardent leur bleu
   nuit, la chargent aussi).

   CE QUI NE CHANGE PAS : le thème du mode édition garde le dernier mot. Les
   couleurs de rôle (--bg, --surface, --border, --accent, --text, --muted)
   gardent leurs NOMS, seules leurs valeurs par défaut évoluent ; /theme.css,
   chargé en dernier, les surcharge toujours. Les teintes de signal (crédits,
   réussite, urgence) n'ont pas d'équivalent dans le thème et restent fixes.

   LES VALEURS SONT CELLES DE LA MAQUETTE (système de design, version 2) :
   un bleu un peu plus appuyé (6,6:1 sous du blanc, contre 5,2:1), un gris de
   légende à 4,6:1 au minimum sur le fond, et deux familles de caractères,
   Bricolage Grotesque pour les titres, Figtree pour le texte.
   ========================================================================== */

:root {
  /* Rôles : surchargés par le thème du mode édition */
  --bg: #F6F7F9;
  --surface: #FFFFFF;
  --border: #E2E8F0;
  --accent: #1F4FD8;
  --text: #0F172A;
  --muted: #5A6779;
  /* Les trois variantes de l'accent. Elles sont dans la liste blanche du thème, donc
     surchargeables comme les autres ; les pages qui ne les déclaraient pas lisaient
     un repli écrit en dur (#EFF6FF, #1D4ED8), l'ancien bleu. */
  --accent-dark: #173EA8;
  --accent-soft: #EAF0FE;
  --accent-border: #C7D6FB;

  /* Teintes fixes */
  --kg-accent-deep: #173EA8;
  --kg-accent-soft: #EAF0FE;
  --kg-ring: #C7D6FB;
  --kg-body: #475569;
  --kg-credit: #E8A317;
  --kg-credit-bg: #FFF4D6;
  --kg-credit-ink: #8A5200;
  --kg-ok: #0B6B47;
  --kg-ok-bg: #E3F6EC;
  --kg-danger: #B42318;
  --kg-danger-bg: #FDECEA;

  --kg-font: 'Figtree', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --kg-display: 'Bricolage Grotesque', 'Figtree', system-ui, sans-serif;

  /* Rayons : puce 8, champ 10, carte 14, héros 20 */
  --kg-r-chip: 8px;
  --kg-r-field: 10px;
  --kg-r-card: 14px;
  --kg-r-hero: 20px;
  --kg-shadow: 0 1px 2px rgba(15, 23, 42, .06), 0 8px 24px -8px rgba(15, 23, 42, .14);
}

body { font-family: var(--kg-font); }

/* Un bouton n'hérite pas de la police du document : sans cette ligne, les
   commandes de la barre de navigation s'affichaient dans la police du système. */
button, input, select, textarea { font-family: inherit; }

/* L'anneau de focus est le même partout : il remplace le contour du navigateur
   sans jamais le supprimer. */
:focus-visible { outline: 3px solid var(--kg-ring); outline-offset: 2px; border-radius: 6px; }

/* --- Pastilles ---------------------------------------------------------- */
.kg-pill { display: inline-flex; align-items: center; gap: 7px; height: 28px; padding: 0 12px; border-radius: 999px; font-size: .8125rem; font-weight: 600; background: var(--kg-accent-soft); color: var(--kg-accent-deep); white-space: nowrap; }
.kg-pill--credit { background: var(--kg-credit-bg); color: var(--kg-credit-ink); font-weight: 700; }
.kg-pill--ok { background: var(--kg-ok-bg); color: var(--kg-ok); }

/* --- Jauge de crédits : une case par action ------------------------------ */
.kg-pips { display: inline-flex; gap: 8px; }
.kg-pip { width: 40px; height: 40px; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center; border: 2px dashed #CBD5E1; color: transparent; }
.kg-pip.on { background: var(--kg-credit-bg); border: 2px solid transparent; color: var(--kg-credit-ink); }
.kg-pip svg { width: 20px; height: 20px; }