/* ============================================================================
   L'Espace technique, habillé comme l'espace admin.

   L'application définit sa marque à UN endroit (`--wl-*` dans style.css) et
   branche tout le reste sur des jetons génériques. Il suffit donc de redire
   cette couche-là avec les valeurs de la plateforme : les centaines de jetons
   en aval suivent d'eux-mêmes, et rien n'est réécrit deux fois.

   Les valeurs viennent de packages/theme/tokens.css — celles de l'admin, pas
   des approximations : la vert-turquoise #0f8079 mène, le dégradé vert→marine
   porte les boutons, Cause pour les titres et Rubik pour le texte.
   ========================================================================= */

:root {
  /* La marque : le bleu de l'ancienne palette devient le vert-turquoise de la
     plateforme, du plus sombre au plus clair. --wl-blue-700 est LA couleur
     (boutons, barres, éléments actifs) : c'est donc le brand-600 de l'admin. */
  --wl-blue-900: #0a3a38;
  --wl-blue-800: #0a5a58;   /* brand-700 */
  --wl-blue-700: #0c6f6a;   /* brand-600 — la couleur d'action */
  --wl-blue-600: #0f8079;   /* brand-500 */
  --wl-blue-500: #149a76;
  --wl-blue-400: #23ac76;
  --wl-blue-300: #8fd0c5;
  --wl-blue-200: #cbe9dc;   /* brand-100 */
  --wl-blue-100: #e7f3ef;   /* brand-50 — le fond des pastilles d'icône */
  --wl-blue-050: #f7faf8;   /* surface-muted */

  --wl-muted: #949a98;      /* ink-muted */
  --wl-line: #e8eeea;       /* border */
  --wl-green: #1a9e6e;      /* success-500 */
  --wl-ember: #9a6a1c;      /* l'ambre de la maison, pour les avertissements */

  /* Le dégradé de la plateforme, celui des boutons principaux et de la carte
     en tête de « Statistiques ». */
  --wl-grad: linear-gradient(148deg, #23ac76 0%, #149a76 24%, #0e7d7a 47%,
                             #155f74 68%, #183f6b 100%);

  /* Les deux fontes de l'admin : Cause pour les titres, Rubik pour le reste. */
  --wl-font-display: "Cause", "Comic Sans MS", cursive;
  --wl-font-sans: "Rubik", system-ui, sans-serif;
}

/* Le clair est le thème principal de l'espace admin : surfaces blanches,
   encre presque noire, filets verts très pâles. L'application garde son thème
   sombre pour qui le choisit — on ne redit ici que le clair. */
:root,
:root[data-theme="clair"],
body:not(.sombre) {
  --bg: #f7faf8;
  --surface: #ffffff;
  --surface-2: #f7faf8;
  --line: #e8eeea;
  --texte: #101012;
  --texte-2: #5b6360;
  --texte-3: #949a98;
}

body,
.suivi,
.connexion {
  font-family: var(--wl-font-sans);
  color: var(--texte, #101012);
}

h1, h2, h3, h4,
.s-titre, .s-connexion-marque {
  font-family: var(--wl-font-display);
  font-weight: 700;
  letter-spacing: -0.01em;
}

/* Les chiffres s'alignent en colonne, comme partout dans l'admin. */
.s-nombre, .s-score, td, .tabulaire {
  font-variant-numeric: tabular-nums;
}

/* Le bouton principal porte le dégradé, comme « Enregistrer » dans l'admin. */
.b.primaire,
button.primaire,
.s-bouton-primaire {
  background: var(--wl-grad);
  border: none;
  color: #ffffff;
  font-weight: 600;
}

.b.primaire:hover,
button.primaire:hover {
  opacity: 0.95;
}

/* Les cartes de l'admin : coin franc, filet discret, ombre à peine posée. */
.s-carte, .carte, .s-connexion-carte {
  border-radius: 16px;
  border: 1px solid var(--line);
  background: var(--surface);
  box-shadow: 0 1px 2px rgba(16, 16, 18, 0.04);
}

/* Le second formulaire de connexion — celui du compte de la plateforme — se
   pose sous le premier sans le concurrencer. */
.s-connexion-plateforme {
  margin-top: 14px;
}

.s-connexion-plateforme h2 {
  font-size: 1.05rem;
  margin: 0 0 4px;
}