/* Sparring — design system (direction A, « plan de métro »)
   Source de vérité : design/tokens.json. Référence : docs/10-direction-artistique.md */

@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;600&family=IBM+Plex+Sans:wght@400;500;600;700&display=swap');

:root {
  /* Neutres */
  --fond: #F6F5F1;
  --surface: #FFFFFF;
  --encre: #1F2328;
  --encre-douce: #3D424A;
  --sourdine: #656A73;
  --filet: #E2E0D9;
  --courbe: #E4E1D8;
  --rail-inactif: #C9CDD2;
  --station-inactive: #8B919A;
  --etoile: #B57A0C;
  --etoile-vide: #D9D6CE;
  --action: #1F2328;
  --action-texte: #FFFFFF;
  --focus: #1F6F91;
  --erreur: #B42318;

  /* Lignes des mondes */
  --ligne-scrum-master: #2E86AB;
  --ligne-developpeur: #00897B;
  --ligne-tech-lead: #455A64;
  --ligne-business-analyst: #332288;
  --ligne-product-owner: #D55E00;
  --ligne-product-manager: #C2185B;
  --ligne-head-of-product: #8E7CC3;
  --ligne-chef-de-projet: #5E3F8C;
  --ligne-sponsor: #6D4C41;
  --ligne-direction-dsi: #1F2328;

  /* Typographie */
  --font-sans: "IBM Plex Sans", "Segoe UI", system-ui, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;

  /* Espacement (grille de 4 px) */
  --espace-1: 4px;
  --espace-2: 8px;
  --espace-3: 12px;
  --espace-4: 16px;
  --espace-5: 24px;
  --espace-6: 32px;
  --espace-7: 40px;

  /* Rayons */
  --rayon-s: 6px;
  --rayon-m: 10px;
  --rayon-l: 14px;
  --rayon-pilule: 999px;

  /* Traits */
  --trait-ligne: 10px;
  --trait-station: 4px;
  --trait-filet: 1px;
}

/* Thème sombre : mis de côté (docs/10). Inactif tant que la page ne pose pas data-theme="dark". */
:root[data-theme="dark"] {
  --fond: #141619; --surface: #1D2024; --encre: #ECEDEF; --encre-douce: #C5C9CF; --sourdine: #9BA1A9;
  --filet: #2C3036; --courbe: #22252A; --rail-inactif: #3B4047; --station-inactive: #727881;
  --etoile: #E0A73A; --etoile-vide: #3A3E44; --action: #ECEDEF; --action-texte: #141619; --focus: #6FB8D6; --erreur: #F97066;
  --ligne-scrum-master: #4BA3C7; --ligne-developpeur: #26A69A; --ligne-tech-lead: #90A4AE; --ligne-business-analyst: #8F84E0;
  --ligne-product-owner: #F0803A; --ligne-product-manager: #EC5B8F; --ligne-head-of-product: #AE9FDB; --ligne-chef-de-projet: #9B7DCC;
  --ligne-sponsor: #A1887F; --ligne-direction-dsi: #D0D4DA;
  color-scheme: dark;
}

body { background: var(--fond); color: var(--encre); font-family: var(--font-sans); }

/* ——— Composants (classes sp-*) ——— */
.sp-racine { font-family: var(--font-sans); color: var(--encre); background: var(--fond); }

/* Bouton */
.sp-bouton { display: inline-flex; align-items: center; justify-content: center; gap: var(--espace-2); min-height: 44px; padding: 0 var(--espace-5); border-radius: var(--rayon-m); border: 1px solid transparent; font-family: var(--font-sans); font-size: 15px; font-weight: 600; cursor: pointer; }
.sp-bouton--principal { background: var(--action); color: var(--action-texte); }
.sp-bouton--secondaire { background: var(--surface); color: var(--encre); border-color: var(--filet); }
.sp-bouton--discret { background: transparent; color: var(--encre); text-decoration: underline; text-underline-offset: 3px; }
.sp-bouton:disabled { opacity: .45; cursor: not-allowed; }
.sp-bouton:focus-visible, .sp-station:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }

/* Étiquette */
.sp-etiquette { font-family: var(--font-mono); font-size: 11px; line-height: 14px; font-weight: 600; letter-spacing: 1.2px; text-transform: uppercase; color: var(--encre); }
.sp-etiquette--sourdine { color: var(--sourdine); }
.sp-etiquette--cadre { display: inline-block; padding: 3px var(--espace-2); border: 1px solid var(--filet); border-radius: var(--rayon-s); background: var(--surface); }

/* Étoiles */
.sp-etoiles { display: inline-flex; gap: var(--espace-1); }
.sp-etoiles svg { width: 12px; height: 12px; }
.sp-etoile--pleine { fill: var(--etoile); stroke: var(--etoile); stroke-width: 1; }
.sp-etoile--vide { fill: none; stroke: var(--station-inactive); stroke-width: 1.2; }
/* Une étoile à gagner n'a que son contour : pleine ou vide se voit à la forme, jamais à la couleur seule (porteur daltonien). */

/* Station (SVG) */
.sp-station { cursor: pointer; }
.sp-station .terminee { stroke: var(--surface); stroke-width: 3; }
.sp-station .en-cours { fill: var(--surface); stroke-width: 6; }
.sp-station .a-venir { fill: var(--surface); stroke: var(--station-inactive); stroke-width: var(--trait-station); }
.sp-station .epreuve { fill: var(--surface); stroke: var(--encre); stroke-width: var(--trait-station); }
.sp-station .cadenas { fill: var(--station-inactive); }
.sp-station .cadenas-anse { fill: none; stroke: var(--station-inactive); stroke-width: 1.6; }
.sp-nom-station { font-family: var(--font-sans); font-size: 13px; font-weight: 500; fill: var(--encre); }
.sp-nom-station--a-venir { fill: var(--sourdine); }
.sp-num-station { font-family: var(--font-mono); font-size: 11px; font-weight: 600; fill: var(--encre); }
.sp-etiquette-svg { font-family: var(--font-mono); font-size: 9.5px; font-weight: 600; letter-spacing: 1.2px; fill: var(--encre); }
.sp-courbe { fill: none; stroke: var(--courbe); stroke-width: var(--trait-filet); }
.sp-rail-inactif { fill: none; stroke: var(--rail-inactif); stroke-width: var(--trait-ligne); stroke-linecap: round; stroke-dasharray: 2 14; }
.sp-rail { fill: none; stroke-width: var(--trait-ligne); stroke-linecap: round; }
@keyframes sp-pulse { 0% { r: 14; opacity: .55; } 100% { r: 30; opacity: 0; } }
.sp-halo { animation: sp-pulse 1.8s ease-out infinite; }
@media (prefers-reduced-motion: reduce) { .sp-halo { animation: none; opacity: .2; } }

/* Fiche d'étape */
.sp-fiche { background: var(--surface); border: 1px solid var(--filet); border-radius: var(--rayon-l); padding: var(--espace-5); display: flex; flex-direction: column; gap: var(--espace-4); box-sizing: border-box; }
.sp-fiche h2 { margin: 0; font-size: 22px; line-height: 28px; font-weight: 700; letter-spacing: -0.3px; text-wrap: balance; }
.sp-fiche p { margin: 0; font-size: 14px; line-height: 22px; color: var(--encre-douce); }
.sp-fiche__valeurs { display: flex; flex-direction: column; gap: var(--espace-2); border-top: 1px solid var(--filet); padding-top: var(--espace-3); font-size: 13px; color: var(--encre-douce); }
.sp-fiche__valeurs div { display: flex; justify-content: space-between; gap: var(--espace-3); }
.sp-fiche__valeurs dt { color: var(--sourdine); }
.sp-fiche__valeurs dd { margin: 0; text-align: right; }
.sp-mention-ia { margin: 0; font-size: 12px; line-height: 16px; color: var(--sourdine); text-align: center; }

/* En-tête */
.sp-entete { display: flex; align-items: center; justify-content: space-between; gap: var(--espace-5); flex-wrap: wrap; padding: var(--espace-4) var(--espace-7); border-bottom: 1px solid var(--filet); background: var(--fond); }
.sp-marque { display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: 19px; letter-spacing: -0.2px; color: var(--encre); }
.sp-ariane { display: flex; gap: var(--espace-2); font-size: 14px; color: var(--sourdine); }
.sp-ariane a { color: var(--sourdine); text-decoration: none; }
.sp-ariane a:hover { color: var(--encre); text-decoration: underline; }
.sp-ariane [aria-current] { color: var(--encre); font-weight: 600; }
.sp-compteurs { display: flex; align-items: center; gap: var(--espace-5); font-family: var(--font-mono); font-size: 14px; font-variant-numeric: tabular-nums; }
.sp-avatar { width: 34px; height: 34px; border-radius: var(--rayon-pilule); background: var(--encre); color: var(--fond); display: inline-flex; align-items: center; justify-content: center; font-family: var(--font-sans); font-size: 13px; font-weight: 600; }

/* Légende de carte */
.sp-legende { display: flex; flex-wrap: wrap; gap: var(--espace-5); font-size: 12px; color: var(--sourdine); align-items: center; }
.sp-legende span { display: inline-flex; align-items: center; gap: 6px; }