/* ============================================================================
   L'Espace technique, habillé comme l'espace admin — pas « inspiré de » : les
   mêmes valeurs.

   Tout vient de packages/theme/tokens.css, palette `azure2`, celle que
   admin-web pose sur son <html>. Un premier essai n'avait redit que la couche
   de marque et gardait le vert de la palette par défaut : l'espace admin est
   BLEU, et l'Espace technique sortait vert à côté.

   Ce fichier redit donc quatre choses, dans cet ordre :
     1. les jetons de couleur de l'admin, du clair et du sombre ;
     2. ses fontes — Cause pour les titres, Rubik pour le reste ;
     3. ses rayons et ses ombres ;
     4. la forme de sa coquille : le fond qui luit, la barre latérale qui
        flotte, la pastille dégradée de l'écran courant, les boutons.

   L'application garde ses classes : c'est la couche de jetons qu'on remplace,
   et les centaines de règles en aval suivent d'elles-mêmes.
   ========================================================================= */

/* ---------------------------------------------------------------- 1. couleur
   L'application déclare le SOMBRE sur `:root` et le clair sur
   `[data-theme="light"]`. L'admin, lui, est clair et n'a pas d'autre état. On
   pose donc le clair partout — y compris sur `:root`, pour qu'un navigateur
   arrivé avant le script ne montre pas un écran noir — et on garde le sombre
   sur le bouton, avec la palette sombre de l'admin. */

:root,
:root[data-theme="light"] {
  /* la marque : azure2 */
  --wl-blue-900: #0b3760;
  --wl-blue-800: #0e487f;
  --wl-blue-700: #115aa3;
  --wl-blue-600: #1570c9;
  --wl-blue-500: #1e88e5;
  --wl-blue-400: #3896ec;
  --wl-blue-300: #6fb0f5;
  --wl-blue-200: #a6ccfa;
  --wl-blue-100: #d0e4fd;
  --wl-blue-050: #e9f2fe;
  --wl-muted: #8792a8;
  --wl-line: #e4ebf5;
  --wl-ember: #d99400;
  --wl-green: #12a06f;

  /* les jetons génériques sur lesquels toute l'application est branchée */
  --bg: #f2f6fc;              /* surface-subtle : le fond de page de l'admin */
  --surface: #ffffff;
  --surface-2: #f4f8fd;       /* surface-muted */
  --line: #e4ebf5;            /* border */
  --line-forte: #d3ddec;      /* border-strong */
  --text: #0c1524;            /* ink */
  --texte: #0c1524;
  --texte-2: #55617a;         /* ink-subtle */
  --texte-3: #8792a8;         /* ink-muted */
  --muted: #8792a8;
  --accent: #1e88e5;          /* brand-500 — LA couleur */
  --accent-fonce: #1570c9;    /* brand-600 */
  --accent-2: #2aa795;        /* emerald-500 */
  --ok: #12a06f;              /* success-500 */
  --danger: #e5484d;
  --warn: #d99400;
  --info: #24408f;
  --violet: #5b6ad8;          /* accent-500 (périwinkle) */
  --rose: #e5484d;

  /* le dégradé de l'admin, celui des boutons et des éléments actifs */
  --wl-grad: linear-gradient(148deg, #2ccdea 0%, #2aacf3 30%, #3f9bf0 55%,
                             #57a6f4 78%, #6fb5f7 100%);
  --wl-shadow-brand: 0 12px 22px -10px #25aee88c;

  /* les lueurs du fond de l'admin (.bg-canvas) */
  --bg-glow-1: #25cbe81f;
  --bg-glow-2: #1e88e51a;

  --wl-font-display: "Cause", "Comic Sans MS", cursive;
  --wl-font-sans: "Rubik", system-ui, sans-serif;

  color-scheme: light;
}

/* Le sombre de l'admin (tokens.css, azure2 dark) — pour qui appuie sur la lune. */
:root[data-theme="dark"] {
  --wl-blue-900: #e6f3fe;
  --wl-blue-800: #cbe7fd;
  --wl-blue-700: #a6d5fb;
  --wl-blue-600: #79bef8;
  --wl-blue-500: #4aa4f5;
  --wl-blue-400: #3f9bf0;
  --wl-blue-300: #1f66b3;
  --wl-blue-200: #164a86;
  --wl-blue-100: #0f345f;
  --wl-blue-050: #0c2647;
  --wl-muted: #7581a0;
  --wl-line: #ffffff17;
  --wl-ember: #f0b429;
  --wl-green: #38c2ac;

  --bg: #0a1330;
  --surface: #101a3d;
  --surface-2: #0d1636;
  --line: #ffffff17;
  --line-forte: #ffffff26;
  --text: #eaf0fb;
  --texte: #eaf0fb;
  --texte-2: #a9b4cd;
  --texte-3: #7581a0;
  --muted: #7581a0;
  --accent: #4aa4f5;
  --accent-fonce: #79bef8;
  --accent-2: #38c2ac;
  --ok: #38c2ac;
  --danger: #ff6369;
  --warn: #f0b429;
  --info: #8aa2df;
  --violet: #8792ec;
  --rose: #ff6369;

  --bg-glow-1: #25cbe814;
  --bg-glow-2: #1e88e514;

  color-scheme: dark;
}

/* `[hidden]` ne cachait rien : la règle du navigateur est `display: none`, et
   `.s-connexion-carte { display: flex }` la bat. Les deux formulaires de
   connexion s'affichaient donc toujours, celui qu'on venait de masquer compris. */
[hidden] { display: none !important; }

/* ------------------------------------------------------------------ 2. fonte
   Cause porte les titres, Rubik tout le reste — la règle de la maison. */
body,
.suivi,
.connexion,
button,
input,
select,
textarea {
  font-family: var(--wl-font-sans);
  color: var(--texte);
}

h1, h2, h3, h4,
.s-titre,
.s-connexion-marque strong,
.s-logo strong,
.s-nombre {
  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, th, .tabulaire {
  font-variant-numeric: tabular-nums;
}

/* --------------------------------------------------------- 3. rayons, ombres
   Les rayons de l'admin : 10 pour les pastilles, 14 pour les boutons et les
   champs, 20 pour les cartes. Ses ombres sont teintées de sa propre encre. */
:root {
  --r-sm: 0.625rem;
  --r-md: 0.875rem;
  --r-lg: 1.25rem;
  --ombre-carte: 0 1px 2px 0 rgb(12 21 36 / 0.04),
                 0 8px 16px -8px rgb(12 21 36 / 0.10);
}
:root[data-theme="dark"] { --ombre-carte: none; }

/* ----------------------------------------------------------- 4. la coquille
   L'admin ne colle rien au bord : le fond luit, la barre latérale et la barre
   du haut sont des cartes blanches posées dessus, arrondies et ombrées. */

body.suivi {
  background-color: var(--bg);
  background-image:
    radial-gradient(760px 420px at 88% -6%, var(--bg-glow-1), #0000 62%),
    radial-gradient(680px 480px at -6% 106%, var(--bg-glow-2), #0000 60%),
    radial-gradient(500px 380px at 108% 92%, #5b6ad81a, #0000 62%);
  background-attachment: fixed;
}

.s-app { padding: 14px; gap: 14px; grid-template-columns: var(--barre) minmax(0, 1fr); }

.s-barre {
  border: 1px solid var(--line);
  border-right: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--surface);
  backdrop-filter: none;
  box-shadow: var(--ombre-carte);
  height: calc(100vh - 28px);
  top: 14px;
  padding: 16px 12px 18px;
}

.s-logo-mark {
  border-radius: var(--r-md);
  background: var(--wl-grad);
  box-shadow: var(--wl-shadow-brand);
}

/* L'écran courant : la pastille dégradée de l'admin, pas un filet à gauche. */
.s-lien { border-radius: var(--r-md); font-weight: 500; }
.s-lien:hover { background: var(--surface-2); color: var(--texte); }
.s-lien.actif {
  background: var(--wl-grad);
  color: #ffffff;
  font-weight: 600;
  box-shadow: var(--wl-shadow-brand);
}
.s-lien.actif::before { display: none; }
.s-lien.actif .s-lien-ico { color: #ffffff; }
.s-lien.actif .s-lien-num { background: rgb(255 255 255 / 0.22); color: #ffffff; }

.s-nav-titre { color: var(--texte-3); letter-spacing: 0.08em; }
.s-retour { border-radius: var(--r-md); }

/* La barre du haut : une carte, elle aussi. */
.s-haut {
  margin: 0 0 14px;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--surface);
  backdrop-filter: none;
  box-shadow: var(--ombre-carte);
  padding: 14px 20px;
  top: 14px;
}
.s-main { padding-inline: 0; }
.s-qui { border-radius: 999px; border-color: var(--line); }

/* Les cartes de l'admin. */
.s-carte, .carte, .s-connexion-carte, .s-kpi, .s-colonne {
  border-radius: var(--r-lg);
  border: 1px solid var(--line);
  background: var(--surface);
  box-shadow: var(--ombre-carte);
}

/* 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;
  box-shadow: var(--wl-shadow-brand);
}
.b.primaire:hover,
button.primaire:hover { filter: brightness(1.04); }

.b, button.b, input, select, textarea { border-radius: var(--r-md); }
.b { border-color: var(--line); }
.b:hover { border-color: var(--line-forte); }

/* Le focus de l'admin : un anneau, jamais un contour système. */
:where(a, button, input, select, textarea):focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}

/* 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; }

/* Sur téléphone rien ne flotte : les barres reprennent le bord de l'écran. */
@media (max-width: 900px) {
  .s-app { padding: 0; gap: 0; }
  .s-barre {
    border-radius: 0; border: none; border-bottom: 1px solid var(--line);
    height: auto; top: 0; box-shadow: none;
  }
  .s-haut {
    border-radius: 0; border: none; border-bottom: 1px solid var(--line);
    margin: 0; top: 0; box-shadow: none;
  }
}