@charset "utf-8";
/* ============================================================
   DESIGN V5 — COMPOSANTS GLOBAUX
   Boutons, champs, cartes, tableaux, pastilles.

   Chargée en DERNIER parmi les composants, et scopée `body.chrome_v2` — donc
   iso 1 seulement. Les espaces client, partner et hub gardent les composants
   historiques tels quels.

   TROIS CONTRAINTES DE CE DÉPÔT ONT DICTÉ L'ÉCRITURE :

   1. `formulaire.css` reprend TOUS les `<input>` en (0,1,1) et termine ses
      déclarations par `!important`. Une surcharge sans `!important` ne passe
      pas, quelle que soit sa spécificité — d'où les `!important` ci-dessous,
      posés uniquement là où l'original en a un.
   2. `common.css` pose `* { color: var(--color--text) }`. Un descendant ne
      reçoit jamais la couleur de son parent par héritage : il faut le viser.
   3. `.card` faisait 350 px de LARGE en dur, ce qui en fait une vignette et non
      une carte de la charte. On garde la largeur pour ne pas décaler les
      grilles existantes, mais les cartes de la V5 (rayon 18-20, filet, ombre au
      survol) sont disponibles via `.card` dans une grille fluide.
   ============================================================ */

/* ---------- 1. Boutons ---------- */
/* Charte : hauteurs 30 / 38 / 50, rayons 9-12.
   Le bouton principal était en rayon 3 px et `color:#fff !important` — blanc
   sur l'accent clair du thème sombre (#3D8BFF), soit 2,4:1. `--on-accent`
   bascule sur une encre sombre en thème sombre. */

body.chrome_v2 .btn {
    height: 30px;
    padding: 0 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    border-radius: 9px;
    border: 1px solid transparent;
    background: var(--accent);
    color: var(--on-accent) !important;
    font-size: 12.5px;
    font-weight: 600;
    line-height: 1;
    transition: transform .16s var(--ease), box-shadow .16s var(--ease), background .14s var(--ease);
}
body.chrome_v2 .btn:hover {
    background: var(--accent);
    transform: translateY(-1px);
    box-shadow: 0 8px 20px rgba(0, 102, 255, .28);
}
body.chrome_v2 .btn.transparent {
    background: none;
    border-color: var(--line);
    color: var(--text-mid) !important;
    font-weight: 500;
}
body.chrome_v2 .btn.transparent:hover {
    background: none;
    border-color: var(--accent);
    color: var(--accent) !important;
    transform: none;
    box-shadow: none;
}
/* Bouton discret de la charte : fond d'accent atténué, texte d'accent. */
body.chrome_v2 .btn.light,
body.chrome_v2 .btn.soft {
    background: var(--accent-soft);
    color: var(--accent) !important;
}
body.chrome_v2 .btn.big {
    height: 38px;
    padding: 0 20px;
    border-radius: 11px;
    font-size: 13px;
}

/* ---------- 2. Champs ---------- */
/* Charte : hauteur 38-40, rayon 11, fond `--surface2`, filet `--line`, et
   `--accent` au focus. L'original posait un filet `rgba(34,36,38,.15)` —
   invisible sur un fond sombre — et le durcissait au survol, en `!important`. */

/* LA FORME DE LA LISTE COMPTE AUTANT QUE SON CONTENU.
   Enchaînée — `:not(a):not(b):not(c)` — elle ADDITIONNE les spécificités : huit
   sélecteurs d'attribut portaient la règle à (0,9,2), assez pour écraser
   n'importe quelle feuille de PAGE qui rhabille un champ. L'écran de connexion
   V5, qui pose la bordure sur le conteneur et veut l'input transparent dedans,
   n'y arrivait pas même en `!important`. La forme en LISTE ne prend que la
   spécificité de son argument le plus fort : (0,2,2), soit juste ce qu'il faut.

   LA LISTE D'EXCLUSIONS ELLE-MÊME N'EST PAS DÉCORATIVE. `input:not([type=submit])`
   attrape aussi les cases à cocher, les boutons radio, les sélecteurs de
   fichier, les curseurs et les nuanciers : leur poser 38 px de haut, 13 px de
   marge intérieure et un filet en `!important` déforme chaque case à cocher de
   la Station. L'original avait déjà ce défaut, mais sans padding ni bordure il
   ne se voyait pas. */
body.chrome_v2 textarea,
body.chrome_v2 .select,
body.chrome_v2 input:not([type=submit], [type=checkbox], [type=radio], [type=file], [type=range], [type=color], [type=button], [type=reset]) {
    min-height: 38px;
    padding: 0 13px;
    border: 1px solid var(--line) !important;
    border-radius: var(--radius-field);
    background-color: var(--surface2) !important;
    color: var(--text) !important;
    font-size: 13px;
    transition: border-color .16s var(--ease);
}
body.chrome_v2 textarea {
    padding: 10px 13px;
    line-height: 1.55;
}
body.chrome_v2 textarea:hover,
body.chrome_v2 .select:hover,
body.chrome_v2 .select:hover > .menu,
body.chrome_v2 input:not([type=submit], [type=checkbox], [type=radio], [type=file], [type=range], [type=color], [type=button], [type=reset]):hover {
    border: 1px solid var(--neutral) !important;
}
body.chrome_v2 textarea:focus,
body.chrome_v2 .select:focus,
body.chrome_v2 .select:focus > .menu,
body.chrome_v2 input:not([type=submit], [type=checkbox], [type=radio], [type=file], [type=range], [type=color], [type=button], [type=reset]):focus {
    border: 1px solid var(--accent) !important;
}
/* Les cases et les boutons radio prennent l'accent, sans être redimensionnés. */
body.chrome_v2 input[type=checkbox],
body.chrome_v2 input[type=radio] {
    accent-color: var(--accent);
}
/* Le texte d'invite. Sans règle propre il hérite de `--text` via le sélecteur
   universel et devient indistinguable d'une valeur saisie. */
body.chrome_v2 input::placeholder,
body.chrome_v2 textarea::placeholder {
    color: var(--text-dim);
    opacity: 1;
}
/* Les listes déroulantes natives : sans `color-scheme`, leur panneau reste
   peint en clair par le système. Le jeton est posé sur :root par v5-tokens.css,
   mais un `<select>` stylé ne l'hérite pas toujours. */
body.chrome_v2 select,
body.chrome_v2 option {
    background-color: var(--surface2);
    color: var(--text);
}

/* ---------- 3. Cartes ---------- */

body.chrome_v2 .card {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-card);
    transition: box-shadow .16s var(--ease), border-color .16s var(--ease);
}
body.chrome_v2 .card:hover {
    box-shadow: var(--shadow-card);
}
body.chrome_v2 .card > .content {
    padding: 20px;
}
body.chrome_v2 .card > .content > .title {
    font-size: 15.5px;
    font-weight: 600;
    color: var(--text);
}
body.chrome_v2 .card.image > .image {
    border-top-left-radius: var(--radius-card);
    border-top-right-radius: var(--radius-card);
}

/* ---------- 4. Tableaux ---------- */
/* C'est le composant le plus exposé : ~80 vues `search-*` en vivent, et c'est
   le grand aplat blanc qui reste quand tout le reste a basculé. */

body.chrome_v2 table {
    border-collapse: collapse;
    background: var(--surface);
    color: var(--text);
}
/* En-tête de colonne en `--text-mid` et non `--text-dim` : c'est du texte que
   l'on LIT pour trier et comparer, pas une métadonnée en marge. */
body.chrome_v2 table th {
    background: var(--surface2);
    border-bottom: 1px solid var(--line);
    color: var(--text-mid);
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: .07em;
    text-transform: uppercase;
    text-align: left;
}
body.chrome_v2 table td {
    border-bottom: 1px solid var(--line-soft);
    color: var(--text-mid);
    font-size: 13px;
}
body.chrome_v2 table tbody tr:hover > td {
    background: var(--surface2);
}

/* Les conteneurs de tableau de la Station. Ils portaient un fond blanc en dur,
   désormais jetonnisé — ce qui reste à poser ici, c'est la forme de la charte :
   filet, rayon 18, et pas d'ombre au repos. */
body.chrome_v2 .dataTable,
body.chrome_v2 .data_table,
body.chrome_v2 .table_container,
body.chrome_v2 .block_table {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-card);
    overflow: hidden;
}

/* ---------- 5. Pastilles et étiquettes ---------- */
/* Le code couleur sémantique de la charte, à respecter partout :
   vert = ça progresse / c'est validé · gris = ça recule (JAMAIS de rouge,
   choix délibéré pour ne pas dramatiser une baisse devant un client) ·
   violet = ça stagne, anomalie, SEA ou zIA · bleu = action, sélection. */

/* PAS DE `.label` ICI. Dans ce dépôt `.label` est la classe du LIBELLÉ de
   champ de formulaire — 98 usages dans les templates —, pas une pastille d'état.
   Lui donner 29 px de haut, un fond et un rayon déformerait chaque formulaire.
   Les variantes de couleur plus bas visent `.tag` seul pour la même raison. */
body.chrome_v2 .tag,
body.chrome_v2 .chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 29px;
    padding: 0 13px;
    border-radius: var(--radius-pill);
    background: var(--chip);
    color: var(--text-mid);
    font-size: 12px;
    font-weight: 600;
}
body.chrome_v2 .tag.green  { background: var(--aqua-soft);    color: var(--aqua); }
body.chrome_v2 .tag.grey   { background: var(--neutral-soft); color: var(--neutral); }
body.chrome_v2 .tag.purple { background: var(--violet-soft);  color: var(--violet); }
body.chrome_v2 .tag.blue   { background: var(--accent-soft);  color: var(--accent); }

/* ---------- 6. Fenêtres modales et infobulles ---------- */

/* PAS DE `.modal` ICI NON PLUS. Dans ce dépôt `.modal` est le VOILE plein
   écran posé derrière un panneau (menu-fixed.css : `position:fixed; inset:0;
   background:#00000077`), pas le panneau lui-même. Lui donner `--surface`
   l'aurait rendu opaque et il aurait recouvert la page entière.

   Le panneau, c'est `#plateformList > .plateform > .content` — celui que
   mPlateform ouvre pour tout le CRUD de la Station. */
body.chrome_v2 #plateformList > .plateform > .content,
body.chrome_v2 .popup {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-menu);
    color: var(--text);
}

/* ---------- 7. Séparateurs ---------- */

body.chrome_v2 hr,
body.chrome_v2 .cl.divider {
    background-color: var(--line-soft);
    border: 0;
    height: 1px;
}

/* ---------- 8. Graphiques ---------- */
/* `common.css` force `.highcharts-container { color-scheme: light !important }` :
   la Station était « une app claire », et depuis sa v11 Highcharts choisit sa
   palette avec `light-dark()`. Ce forçage neutralise donc tout thème sombre.
   On le reprend, thème par thème — le `!important` est obligatoire, l'original
   en a un et Highcharts pose lui-même `color-scheme: light dark` sur ce
   conteneur depuis la v13.

   Les couleurs de série, d'axe et d'infobulle, elles, viennent des jetons via
   include/js/v5-charts.js ; ceci ne règle que la palette de repli. */
:root[data-zt="dark"] body.chrome_v2 .highcharts-container {
    color-scheme: dark !important;
}
/* Le fond du graphique est transparent (cf. v5-charts.js) : c'est la carte qui
   porte la surface. Reste le rectangle de tracé, que certaines pages peignent. */
body.chrome_v2 .highcharts-background,
body.chrome_v2 .apexcharts-canvas .apexcharts-inner > rect {
    fill: transparent;
}