/* Flowxify : système de design « New Flowxify ».
   Source : design system Claude (https://claude.ai/artifact/Dw5JUEGdEQpha9kgECUzYz), version 1792257813-bfdb (tokens.json « version » : 1), lu le 17/10/2026.
   Première partie : les tokens (tokens.json) en variables CSS. Seconde partie : components/bundle.css, inchangé.
   Une valeur change d'abord dans le système, puis ici. Ne pas éditer à la main. */

:root {
  --encre: #1d1d1f;
  --gris: #6e6e73;
  --gris-clair: #86868b;
  --trait: #e5e5ea;
  --trait-fort: #d2d2d7;
  --fond: #f5f5f7;
  --surface: #ffffff;
  --survol: #f2f2f4;
  --remplissage: #e8e8ed;
  --bleu: #0071e3;
  --bleu-fonce: #0077ed;
  --lien: #0066cc;
  --bleu-pale: #e8f1fc;
  --bleu-voile: rgba(0, 113, 227, 0.26);
  --bleu-halo: rgba(0, 113, 227, 0.18);
  --orange: #b64400;
  --orange-pale: #fff8f2;
  --rouge: #d70015;
  --vert: #248a3d;
  --vert-pale: #effaf1;
  --jaune-vif: #f5b400;
  --serie: #13acf0;
  --serie-comparaison: rgba(10, 151, 213, 0.5);
  --grille: #eeeeef;
  --axe: #70707b;
  --info-bulle-texte: #a1a1a6;
  --voile: rgba(0, 0, 0, 0.18);
  --voile-dialogue: rgba(0, 0, 0, 0.35);
  --verre: rgba(255, 255, 255, 0.8);
  --categorie-01: #13acf0;
  --categorie-02: #5e5ce6;
  --categorie-03: #3b82f6;
  --categorie-04: #d6409f;
  --categorie-05: #13b5a9;
  --categorie-06: #8e44ad;
  --categorie-07: #7c7cf0;
  --categorie-08: #0a97d5;
  --categorie-09: #e0599b;
  --categorie-10: #2563eb;
  --categorie-11: #a78bfa;
  --categorie-12: #14b8a6;
  --ok-sur-encre: #7ed49a;
  --ko-sur-encre: #ff8a80;
  --espace-1: 4px;
  --espace-2: 8px;
  --espace-3: 12px;
  --espace-4: 16px;
  --espace-5: 20px;
  --espace-6: 24px;
  --espace-8: 32px;
  --espace-14: 56px;
  --espace-18: 72px;
  --espace-24: 96px;
  --rayon-fin: 4px;
  --rayon-moyen: 8px;
  --rayon: 12px;
  --rayon-grand: 18px;
  --rayon-pilule: 980px;
  --ombre: 0 12px 32px rgba(0, 0, 0, 0.14), 0 1px 3px rgba(0, 0, 0, 0.08);
  --ombre-douce: 0 1px 2px rgba(0, 0, 0, 0.04), 0 8px 24px -12px rgba(0, 0, 0, 0.14);
  --ombre-carte: 0 5px 5px -2.5px rgba(0, 0, 0, 0.03), 0 3px 3px -1.5px rgba(0, 0, 0, 0.02), 0 2px 2px -1px rgba(0, 0, 0, 0.02), 0 1px 1px -0.5px rgba(0, 0, 0, 0.03), 0 0.5px 0.5px rgba(0, 0, 0, 0.04), 0 0 0 1px rgba(0, 0, 0, 0.06);
  --ombre-panneau: -12px 0 40px rgba(0, 0, 0, 0.14);
  --largeur-site: 1200px;
  --largeur-app: 1360px;
  --largeur-panneau: 960px;
  --hauteur-bandeau: 52px;
  --barre: 72px;
  --plan-bandeau: 20;
  --plan-menu: 30;
  --plan-voile: 40;
  --plan-panneau: 50;
  --plan-notification: 60;
  --font-systeme: "Segoe UI Variable Text", "Segoe UI", -apple-system, BlinkMacSystemFont, Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, Menlo, Consolas, monospace;
}

/* Flowxify : classes des composants. Les valeurs viennent de tokens.json (variables CSS). */
body { margin: 0; font-family: var(--font-systeme); color: var(--encre); background: var(--fond); line-height: 1.5; font-variant-numeric: tabular-nums; -webkit-font-smoothing: antialiased; }
:focus-visible { outline: 2px solid var(--bleu); outline-offset: 2px; border-radius: var(--rayon-fin); }
.fx-zone { padding: 16px; display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; }
.fx-zone.blanc { background: var(--surface); }
.fx-colonne { padding: 16px; display: grid; gap: 1rem; }

/* Marque */
.marque { display: inline-flex; align-items: center; gap: 0.5rem; font-weight: 600; font-size: 1.0625rem; letter-spacing: -0.01em; color: var(--encre); text-decoration: none; white-space: nowrap; }
.marque img { width: 22px; height: 22px; }
.marque span { color: var(--gris); font-weight: 500; }

/* Boutons : pilules, un seul plein par écran */
.button { display: inline-flex; align-items: center; gap: 0.6rem; min-height: 48px; padding: 0.7rem 1.5rem; font: inherit; font-size: 1rem; font-weight: 600; color: #fff; background: var(--bleu); border: 1px solid var(--bleu); border-radius: var(--rayon-pilule); cursor: pointer; text-decoration: none; transition: background-color 0.12s ease, border-color 0.12s ease; }
.button:hover { background: var(--bleu-fonce); border-color: var(--bleu-fonce); }
.button.small { min-height: 34px; padding: 0.25rem 0.9rem; font-size: 0.8125rem; font-weight: 500; }
.button.dark { background: var(--encre); border-color: var(--encre); }
.button.dark:hover { background: #000; border-color: #000; }
.text-link { font-size: 0.9375rem; font-weight: 500; color: var(--lien); text-decoration: none; }
.text-link:hover { text-decoration: underline; text-underline-offset: 3px; }

/* Pilules et filtres */
.pilule { display: inline-flex; align-items: center; gap: 0.4rem; min-height: 34px; padding: 0.25rem 0.75rem; font: inherit; font-size: 0.8125rem; font-weight: 500; color: var(--encre); background: var(--surface); border: 1px solid var(--trait-fort); border-radius: var(--rayon-pilule); cursor: pointer; transition: background-color 0.12s ease; }
.pilule:hover { background: var(--survol); }
.pilule svg { width: 15px; height: 15px; stroke: currentColor; fill: none; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.pilule .chevron { width: 12px; height: 12px; opacity: 0.6; }
.filtres { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.filtres button { min-height: 28px; padding: 0 0.7rem; font: inherit; font-size: 0.75rem; font-weight: 500; color: var(--encre); background: var(--surface); border: 1px solid var(--trait); border-radius: var(--rayon-pilule); cursor: pointer; }
.filtres button.actif { color: #fff; background: var(--encre); border-color: var(--encre); }
.pastille-filtre { display: inline-flex; align-items: center; gap: 0.4rem; min-height: 26px; padding: 0 0.6rem; font: inherit; font-size: 0.75rem; font-weight: 600; color: var(--encre); background: var(--bleu-pale); border: none; border-radius: var(--rayon-pilule); cursor: pointer; }
.pastille-filtre span { color: var(--gris); font-size: 0.6875rem; }

/* Bascule et onglets : un rail gris, le segment actif blanc */
.bascule, .nav { display: inline-flex; gap: 0.25rem; padding: 3px; background: var(--remplissage); border-radius: var(--rayon-pilule); }
.bascule button { min-height: 28px; padding: 0 0.75rem; font: inherit; font-size: 0.8125rem; font-weight: 600; color: var(--gris); background: transparent; border: none; border-radius: var(--rayon-pilule); cursor: pointer; }
.bascule button.actif { color: var(--encre); background: var(--surface); box-shadow: var(--ombre-douce); }
.nav a { padding: 0.3rem 0.9rem; font-size: 0.875rem; font-weight: 500; color: var(--encre); text-decoration: none; border-radius: var(--rayon-pilule); opacity: 0.8; }
.nav a:hover { opacity: 1; }
.nav a.actif { background: var(--surface); box-shadow: var(--ombre-douce); opacity: 1; font-weight: 600; }
.nav.defile { display: flex; max-width: 100%; overflow-x: auto; scrollbar-width: none; margin-bottom: 1rem; }
.nav.defile a { flex: none; }

/* Bandeau collant en verre */
.bandeau { position: sticky; top: 0; z-index: var(--plan-bandeau); display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: var(--hauteur-bandeau); padding: 0.5rem 1.5rem; background: var(--verre); border-bottom: 1px solid rgb(0 0 0 / 0.08); -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px); }

/* Menu déroulant */
.menu { z-index: var(--plan-menu); min-width: 240px; padding: 0.375rem; background: var(--surface); border: 1px solid var(--trait); border-radius: var(--rayon); box-shadow: var(--ombre); }
.menu button { display: flex; width: 100%; align-items: center; justify-content: space-between; gap: 1rem; padding: 0.5rem 0.75rem; font: inherit; font-size: 0.875rem; color: var(--encre); text-align: left; background: transparent; border: none; border-radius: var(--rayon-moyen); cursor: pointer; }
.menu button:hover { background: var(--survol); }
.menu button.actif { background: var(--bleu-pale); color: var(--lien); font-weight: 600; }
.menu .sep { height: 1px; margin: 0.375rem 0; background: var(--trait); }
.menu .dates { display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem; padding: 0.5rem 0.75rem 0.375rem; }
.menu .dates input { width: 100%; min-height: 32px; padding: 0 0.5rem; font: inherit; font-size: 0.8125rem; color: var(--encre); background: var(--surface); border: 1px solid var(--trait-fort); border-radius: var(--rayon-moyen); box-sizing: border-box; }
.menu .dates input:focus { border-color: var(--bleu); outline: none; box-shadow: 0 0 0 3px var(--bleu-halo); }

/* Grille et cartes d'application */
.grille { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 1rem; align-items: start; }
.c3 { grid-column: span 3; } .c4 { grid-column: span 4; } .c6 { grid-column: span 6; } .c8 { grid-column: span 8; } .c12 { grid-column: span 12; }
.carte { display: flex; flex-direction: column; min-width: 0; padding: 1rem; background: var(--surface); border-radius: var(--rayon); box-shadow: var(--ombre-carte); }
.carte .entete { display: flex; align-items: flex-start; justify-content: space-between; gap: 0.75rem; }
.carte .titre { margin: 0; font-size: 0.8125rem; font-weight: 600; color: var(--encre); }
.carte .valeur { display: flex; align-items: baseline; flex-wrap: wrap; gap: 0.5rem; margin: 0.25rem 0 0.75rem; font-size: 1.25rem; font-weight: 650; letter-spacing: -0.01em; }
.carte .corps { flex: 1; min-height: 0; }
.carte .vide { display: grid; place-items: center; min-height: 160px; color: var(--gris-clair); font-size: 0.8125rem; }
.tuile { display: grid; grid-template-columns: minmax(0, 1fr) 120px; align-items: center; gap: 0.75rem; min-height: 76px; }
.tuile .valeur { margin: 0; font-size: 1rem; }
.tuile .spark { height: 40px; }

/* Delta : hausse en vert, baisse en gris, jamais en rouge */
.delta { display: inline-flex; align-items: center; gap: 0.15rem; font-size: 0.75rem; font-weight: 600; color: var(--gris); }
.delta.hausse { color: var(--vert); }
.delta svg { width: 11px; height: 11px; }

/* Chiffre cliquable : le pointillé ouvre l'escalier */
.chiffre { font: inherit; color: inherit; background: none; border: none; padding: 0; cursor: pointer; border-radius: var(--rayon-fin); text-decoration: underline dotted var(--trait-fort); text-decoration-thickness: 1.5px; text-underline-offset: 4px; }
.chiffre:hover { background: var(--bleu-pale); box-shadow: 0 0 0 3px var(--bleu-pale); }

/* Statuts et pastilles */
.statut { display: inline-block; padding: 0.1rem 0.6rem; font-size: 0.6875rem; font-weight: 600; border-radius: var(--rayon-pilule); background: var(--vert-pale); color: var(--vert); }
.statut.conv { background: var(--bleu-pale); color: var(--lien); }
.statut.prov { background: var(--orange-pale); color: var(--orange); }
.pill { display: inline-block; padding: 0.1rem 0.6rem; font-size: 0.6875rem; font-weight: 600; color: var(--lien); background: var(--bleu-pale); border-radius: var(--rayon-pilule); }
.status-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--bleu); }

/* Tableau */
.tableau { width: 100%; border-collapse: collapse; font-size: 0.8125rem; }
.tableau th { padding: 0.5rem; text-align: left; font-weight: 600; color: var(--gris); font-size: 0.75rem; border-bottom: 1px solid var(--trait); }
.tableau td { padding: 0.55rem 0.5rem; border-bottom: 1px solid var(--trait); white-space: nowrap; }
.tableau td.num, .tableau th.num { text-align: right; }
.tableau th.triable { cursor: pointer; user-select: none; }
.tableau th.triable:hover, .tableau th.trie { color: var(--encre); }
.tableau tr.cliquable { cursor: pointer; }
.tableau tr.cliquable:hover td { background: var(--survol); }
.tableau tr.actif td { background: var(--bleu-pale); }
.tableau tr.total td { font-weight: 600; }
.tableau .sous { color: var(--gris); font-size: 0.75rem; }

/* Liste de barres : période et comparaison */
.liste { display: flex; flex-direction: column; gap: 0.55rem; }
.liste .rang { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0.1rem 0.75rem; align-items: center; }
.liste .nom { font-size: 0.75rem; color: var(--gris); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.liste .barres { display: flex; flex-direction: column; gap: 2px; }
.liste .barre { height: 8px; border-radius: 2px; background: var(--serie); }
.liste .barre.cmp { height: 6px; background: var(--serie-comparaison); }
.liste .nombres { display: flex; align-items: center; justify-content: flex-end; gap: 0.4rem; font-size: 0.75rem; white-space: nowrap; }
.liste .nombres .cmpv { color: var(--gris-clair); font-size: 0.6875rem; }

/* Heatmap : intensité de bleu, jaune au survol */
.heatmap { display: grid; grid-template-columns: 56px repeat(var(--cols), minmax(0, 1fr)); gap: 3px; font-size: 0.6875rem; }
.heatmap .lib { display: flex; align-items: center; height: 28px; color: var(--gris); }
.heatmap .col { text-align: center; color: var(--gris); padding-bottom: 2px; }
.heatmap .cell { height: 28px; border-radius: var(--rayon-fin); display: grid; place-items: center; color: #fff; font-weight: 600; cursor: pointer; }
.heatmap .cell:hover { box-shadow: inset 0 0 0 2px var(--jaune-vif); }
.heatmap .cell.creuse { background: var(--fond); }

/* Panneau latéral (escalier) */
.panneau { z-index: var(--plan-panneau); display: flex; flex-direction: column; width: min(var(--largeur-panneau), 100%); background: var(--surface); box-shadow: var(--ombre-panneau); }
.panneau header { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1rem 1.25rem; border-bottom: 1px solid var(--trait); }
.panneau header h2 { margin: 0; font-size: 1rem; font-weight: 600; }
.fermer { width: 32px; height: 32px; display: grid; place-items: center; color: var(--gris); background: var(--remplissage); border: none; border-radius: 50%; cursor: pointer; }
.panneau .defil { padding: 0 1.25rem 1rem; }
.marche { padding: 0.9rem 0; border-bottom: 1px solid var(--trait); }
.marche:last-child { border-bottom: none; }
.marche .etiquette { font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--gris); }
.marche .grand { margin-top: 0.25rem; font-size: 1.75rem; font-weight: 650; letter-spacing: -0.02em; }
.marche .termes { display: grid; grid-template-columns: 1fr auto; gap: 0.35rem 1rem; margin-top: 0.5rem; font-size: 0.875rem; }
.marche .termes .t { color: var(--gris); }
.marche .termes .v { font-weight: 600; text-align: right; }
.marche .regle { margin: 0.4rem 0; font-size: 0.875rem; font-family: var(--font-mono); }


@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; animation: none !important; } }

/* ===== Lectures de gestion (applications de pilotage) ===== */

/* Accueil en tuiles d'espaces */
.espaces { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.espace { display: flex; flex-direction: column; gap: 0.5rem; min-height: 132px; padding: 1rem; color: var(--encre); text-decoration: none; background: var(--surface); border-radius: var(--rayon); box-shadow: var(--ombre-carte); transition: box-shadow 0.2s ease, transform 0.2s ease; }
.espace:hover { box-shadow: var(--ombre-douce); transform: translateY(-2px); }
.espace .ico { display: grid; place-items: center; width: 32px; height: 32px; color: var(--bleu); background: var(--bleu-pale); border-radius: var(--rayon-moyen); }
.espace .ico svg { width: 17px; height: 17px; stroke: currentColor; fill: none; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.espace h3 { margin: 0.25rem 0 0; font-size: 0.9375rem; font-weight: 600; }
.espace p { margin: 0; font-size: 0.75rem; color: var(--gris); }
.espace .ecrans { margin-top: auto; font-size: 0.6875rem; color: var(--gris); }
.espace.ferme { background: var(--fond); box-shadow: none; cursor: default; }
.espace.ferme .ico { color: var(--gris); background: var(--remplissage); }
.espace.ferme:hover { transform: none; }

/* Période : point d'arrêt et portée */
.mois { display: inline-flex; gap: 2px; padding: 3px; background: var(--remplissage); border-radius: var(--rayon-pilule); }
.mois button { min-width: 34px; min-height: 28px; padding: 0 0.4rem; font: inherit; font-size: 0.75rem; font-weight: 500; color: var(--gris); background: transparent; border: none; border-radius: var(--rayon-pilule); cursor: pointer; }
.mois button.lu { color: var(--encre); }
.mois button.actif { color: #fff; background: var(--encre); font-weight: 600; }
.mois button:disabled { color: var(--gris-clair); cursor: default; }
.bascule.inactive { opacity: 0.5; pointer-events: none; }
.lecture { font-size: 0.75rem; color: var(--gris); }
.lecture b { color: var(--encre); font-weight: 600; }

/* Le trou nommé : vide n'est pas zéro, un manque se voit */
.manque { color: var(--orange); }
.triangle { display: inline-block; width: 12px; height: 12px; margin-left: 0.3rem; vertical-align: -1px; color: var(--orange); }
.hachure { background: repeating-linear-gradient(135deg, var(--orange-pale) 0 4px, transparent 4px 8px); box-shadow: inset 0 0 0 1px var(--orange); }
.ligne-manque td { color: var(--orange); background: var(--orange-pale); }
.ligne-manque td.num:empty::after { content: ""; }

/* Bouclage du tiroir */
.bouclage { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 1rem; padding: 0.6rem 0.75rem; font-size: 0.8125rem; border-radius: var(--rayon-moyen); background: var(--vert-pale); color: var(--vert); }
.bouclage b { font-weight: 600; }
.bouclage.ko { background: var(--surface); color: var(--rouge); box-shadow: inset 0 0 0 1px var(--rouge); }
.bouclage .sel { margin-left: auto; color: var(--gris); }
.barre-filtres { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; }
.barre-filtres select, .barre-filtres input { min-height: 30px; padding: 0 0.6rem; font: inherit; font-size: 0.75rem; color: var(--encre); background: var(--surface); border: 1px solid var(--trait-fort); border-radius: var(--rayon-pilule); }
.barre-filtres input { flex: 1 1 140px; }
.barre-filtres .compteur { font-size: 0.75rem; color: var(--gris); }
.fil { display: flex; align-items: center; gap: 0.35rem; font-size: 0.75rem; color: var(--gris); }
.fil a { color: var(--lien); text-decoration: none; }

/* Cascade dépliable avec paliers */
.cascade td:first-child { white-space: nowrap; }
.cascade .pli { display: inline-grid; place-items: center; width: 16px; height: 16px; margin-right: 0.25rem; color: var(--gris); font-size: 0.625rem; }
.cascade tr.enfant td:first-child { padding-left: 2rem; color: var(--gris); }
.cascade tr.palier td { font-weight: 650; background: var(--fond); border-bottom-color: var(--trait-fort); }
.cascade tr.palier td:first-child { border-radius: var(--rayon-moyen) 0 0 var(--rayon-moyen); }
.cascade tr.palier td:last-child { border-radius: 0 var(--rayon-moyen) var(--rayon-moyen) 0; }
.neg { color: var(--rouge); }
.pos { color: var(--vert); }
.fermee { cursor: default; text-decoration: none; }

/* Pont : marches horizontales alignées sur les lignes */
.pont { display: grid; grid-template-columns: 180px minmax(0, 1fr) 96px; align-items: center; row-gap: 4px; font-size: 0.75rem; }
.pont .lib { color: var(--gris); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pont .lib.niveau { color: var(--encre); font-weight: 600; }
.pont .piste { position: relative; height: 18px; border-left: 1px solid var(--trait-fort); }
.pont .marche-p { position: absolute; top: 2px; height: 14px; border-radius: 3px; }
.pont .marche-p.niveau { background: var(--gris-clair); }
.pont .marche-p.hausse { background: var(--vert); }
.pont .marche-p.baisse { background: var(--rouge); }
.pont .val { text-align: right; font-weight: 600; }
.pont .marche-p.trou { background: repeating-linear-gradient(135deg, var(--orange-pale) 0 4px, transparent 4px 8px); box-shadow: inset 0 0 0 1px var(--orange); }

/* Petits multiples : une carte par entité, échelle commune ou propre */
.viz-bars { display: flex; align-items: flex-end; gap: 6px; height: 56px; padding: 6px 0; margin: 0.5rem 0; box-sizing: border-box; }
.viz-bars i { width: 100%; height: var(--h); background: var(--serie); border-radius: 3px 3px 0 0; }
.multiples { display: grid; grid-template-columns: repeat(var(--n, 4), minmax(0, 1fr)); gap: 0.75rem; }
.multiple { padding: 0.75rem; background: var(--surface); border-radius: var(--rayon); box-shadow: var(--ombre-carte); }
.multiple .nom { font-size: 0.75rem; font-weight: 600; }
.multiple .v { margin-top: 0.15rem; font-size: 1.0625rem; font-weight: 650; letter-spacing: -0.01em; }
.multiple .n1 { font-size: 0.6875rem; color: var(--gris); }
.multiple.support .v { color: var(--gris); }

/* Tableau croisé */
.croise th, .croise td { text-align: right; }
.croise th:first-child, .croise td:first-child { text-align: left; position: sticky; left: 0; background: var(--surface); }
.croise th .code { display: block; color: var(--encre); }
.croise td.ouvrable { cursor: pointer; }
.croise td.ouvrable:hover { background: var(--bleu-pale); }
.croise tr.palier td { font-weight: 650; background: var(--fond); }

/* Classes ABC */
.abc { font-size: 0.6875rem; font-weight: 600; display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: var(--rayon-fin); background: var(--remplissage); color: var(--encre); }
.abc.a { background: var(--encre); color: #fff; }
.abc.b { background: var(--gris); color: #fff; }

/* Mouvements : quatre blocs qui partitionnent */
.mouvements { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.75rem; }
.bloc-mvt { padding: 0.75rem; border-radius: var(--rayon-moyen); background: var(--fond); }
.bloc-mvt .t { font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--gris); }
.bloc-mvt .v { margin: 0.2rem 0; font-size: 1.125rem; font-weight: 650; }
.bloc-mvt .n { font-size: 0.75rem; color: var(--gris); }
.bloc-mvt ul { margin: 0.5rem 0 0; padding: 0; list-style: none; font-size: 0.75rem; display: grid; gap: 0.25rem; }
.bloc-mvt li { display: flex; justify-content: space-between; gap: 0.5rem; }
.solde-mvt { display: flex; justify-content: space-between; margin-top: 0.75rem; padding-top: 0.6rem; font-size: 0.8125rem; font-weight: 600; border-top: 1px solid var(--trait); }

/* Parts empilées sur 100 % */
.parts { display: flex; height: 22px; gap: 2px; border-radius: var(--rayon-fin); overflow: hidden; }
.parts span { display: block; height: 100%; }
.legende-parts { display: flex; flex-wrap: wrap; gap: 0.35rem 1rem; margin-top: 0.6rem; font-size: 0.75rem; color: var(--gris); }
.legende-parts i { display: inline-block; width: 8px; height: 8px; margin-right: 0.35rem; border-radius: 2px; }
.legende-parts b { color: var(--encre); font-weight: 600; margin-left: 0.25rem; }

/* Matrice origine × destination */
.matrice { border-collapse: separate; border-spacing: 3px; font-size: 0.6875rem; }
.matrice th { font-weight: 600; color: var(--gris); padding: 0 0.25rem; }
.matrice th:first-child { text-align: left; }
.matrice td { width: 44px; height: 30px; text-align: center; border-radius: var(--rayon-fin); }
.matrice td i { display: inline-block; border-radius: 50%; background: var(--serie); vertical-align: middle; }

/* Points H / F autour d'une médiane */
.points { display: grid; grid-template-columns: 120px minmax(0, 1fr) 64px; align-items: center; row-gap: 10px; font-size: 0.75rem; }
.points .piste { position: relative; height: 14px; }
.points .piste::before { content: ""; position: absolute; left: 0; right: 0; top: 6px; height: 2px; background: var(--grille); }
.points .seg { position: absolute; top: 6px; height: 2px; background: var(--trait-fort); }
.points .pt { position: absolute; top: 1px; width: 12px; height: 12px; margin-left: -6px; border-radius: 50%; box-shadow: 0 0 0 2px var(--surface); }
.points .pt.f { background: var(--bleu); }
.points .pt.h { background: var(--encre); }
.points .med { position: absolute; top: -2px; width: 2px; height: 18px; margin-left: -1px; background: var(--gris-clair); }

/* Rapprochement : deux sources, l'écart sans verdict */
.rappro { display: grid; grid-template-columns: 56px minmax(0, 1fr) 96px; align-items: center; row-gap: 6px; font-size: 0.75rem; }
.rappro .barres2 { display: flex; flex-direction: column; gap: 2px; }
.rappro .s1 { height: 7px; border-radius: 2px; background: var(--serie); }
.rappro .s2 { height: 7px; border-radius: 2px; background: var(--encre); }
.rappro .ecart { text-align: right; font-weight: 600; color: var(--encre); }

@media (max-width: 720px) {
  .espaces, .mouvements { grid-template-columns: 1fr 1fr; }
  .multiples { grid-template-columns: 1fr 1fr; }
  .pont { grid-template-columns: 120px minmax(0, 1fr) 80px; }
}

/* ===== Applications de gestion (dossiers, saisie, vues) ===== */

/* Navigation latérale */
.lateral { display: flex; flex-direction: column; gap: 2px; width: 232px; padding: 0.75rem; background: var(--fond); border-right: 1px solid var(--trait); box-sizing: border-box; }
.lateral .app { display: flex; align-items: center; gap: 0.5rem; padding: 0.25rem 0.5rem 0.75rem; font-size: 0.9375rem; font-weight: 600; }
.lateral .app img { width: 22px; height: 22px; }
.lateral .rubrique { margin: 0.75rem 0.5rem 0.25rem; font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--gris); }
.lateral a { display: flex; align-items: center; gap: 0.6rem; padding: 0.4rem 0.5rem; font-size: 0.8125rem; font-weight: 500; color: var(--encre); text-decoration: none; border-radius: var(--rayon-moyen); }
.lateral a:hover { background: var(--survol); }
.lateral a.actif { background: var(--surface); box-shadow: var(--ombre-carte); font-weight: 600; }
.lateral a svg { width: 16px; height: 16px; flex: none; stroke: var(--gris); fill: none; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.lateral a.actif svg { stroke: var(--bleu); }
.lateral a .nb { margin-left: auto; font-size: 0.6875rem; color: var(--gris); }

/* Fiche dossier */
.fiche { background: var(--fond); padding: 1rem 1.25rem; }
.fiche .retour { font-size: 0.8125rem; color: var(--lien); text-decoration: none; }
.fiche .tete { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; margin: 0.5rem 0 1rem; }
.fiche .tete h1 { margin: 0; font-size: 1.5rem; font-weight: 700; letter-spacing: -0.02em; line-height: 1.2; }
.fiche .tete .sous { margin-top: 0.25rem; font-size: 0.8125rem; color: var(--gris); }
.fiche .actions { display: flex; gap: 0.5rem; }

/* Bloc de champs */
.bloc { padding: 1rem; background: var(--surface); border-radius: var(--rayon); box-shadow: var(--ombre-carte); }
.bloc-tete { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1rem; }
.bloc-tete h2 { margin: 0; font-size: 0.9375rem; font-weight: 600; }
.origine { display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.15rem 0.6rem; font-size: 0.6875rem; font-weight: 500; color: var(--gris); background: var(--fond); border-radius: var(--rayon-pilule); }
.origine svg { width: 11px; height: 11px; stroke: currentColor; fill: none; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.origine.equipe { color: var(--lien); background: var(--bleu-pale); }
.champs { display: grid; grid-template-columns: repeat(var(--cols, 3), minmax(0, 1fr)); gap: 1rem 1.5rem; }
.champ { min-width: 0; }
.champ.large { grid-column: span 2; }
.champ .lib { display: block; margin-bottom: 0.25rem; font-size: 0.75rem; font-weight: 500; color: var(--gris); }
.champ .val { font-size: 0.875rem; color: var(--encre); overflow-wrap: anywhere; }
.champ .val.vide { color: var(--gris-clair); }
.champ .val.num { font-weight: 600; font-variant-numeric: tabular-nums; }

/* Saisie */
.saisie { width: 100%; min-height: 34px; padding: 0 0.7rem; font: inherit; font-size: 0.875rem; color: var(--encre); background: var(--surface); border: 1px solid var(--trait-fort); border-radius: var(--rayon-moyen); box-sizing: border-box; }
.saisie:focus { border-color: var(--bleu); outline: none; box-shadow: 0 0 0 3px var(--bleu-halo); }
textarea.saisie { min-height: 72px; padding: 0.5rem 0.7rem; resize: vertical; }
.choix { display: flex; flex-wrap: wrap; align-items: center; gap: 0.3rem; min-height: 34px; padding: 0.2rem 0.5rem; background: var(--surface); border: 1px solid var(--trait-fort); border-radius: var(--rayon-moyen); box-sizing: border-box; }
.choix .chev { margin-left: auto; width: 12px; height: 12px; stroke: var(--gris); fill: none; stroke-width: 1.75; }
.puce { display: inline-flex; align-items: center; gap: 0.3rem; padding: 0.1rem 0.55rem; font-size: 0.75rem; font-weight: 500; color: var(--encre); background: var(--remplissage); border-radius: var(--rayon-pilule); }
.puce i { font-style: normal; color: var(--gris); cursor: pointer; }
.puce .point { width: 7px; height: 7px; border-radius: 50%; }
.case { display: inline-grid; place-items: center; width: 20px; height: 20px; border: 1px solid var(--trait-fort); border-radius: 6px; background: var(--surface); color: #fff; font-size: 0.75rem; }
.case.cochee { background: var(--bleu); border-color: var(--bleu); }
.interrupteur { position: relative; display: inline-block; width: 36px; height: 22px; border-radius: var(--rayon-pilule); background: var(--trait-fort); }
.interrupteur::after { content: ""; position: absolute; top: 2px; left: 2px; width: 18px; height: 18px; border-radius: 50%; background: var(--surface); box-shadow: 0 1px 2px rgba(0,0,0,.2); }
.interrupteur.actif { background: var(--bleu); }
.interrupteur.actif::after { left: 16px; }
.ligne-case { display: flex; align-items: center; gap: 0.5rem; font-size: 0.875rem; }
.aide { margin-top: 0.25rem; font-size: 0.75rem; color: var(--gris); }
.aide.erreur { color: var(--rouge); }
.saisie.invalide { border-color: var(--rouge); }

/* Enregistrement lié */
.lie { display: flex; align-items: center; gap: 0.75rem; padding: 0.65rem 0.75rem; background: var(--surface); border: 1px solid var(--trait); border-radius: var(--rayon-moyen); text-decoration: none; color: var(--encre); }
.lie:hover { border-color: var(--trait-fort); box-shadow: var(--ombre-douce); }
.lie .code { display: grid; place-items: center; min-width: 40px; height: 40px; padding: 0 0.4rem; font-size: 0.75rem; font-weight: 650; background: var(--fond); border-radius: var(--rayon-moyen); }
.lie .corps-lie { min-width: 0; flex: 1; }
.lie .nom { font-size: 0.875rem; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lie .meta { font-size: 0.75rem; color: var(--gris); }
.lie .fleche { color: var(--gris); }

/* Statuts de flux */
.statut.neutre { background: var(--remplissage); color: var(--encre); }
.initiales { display: inline-grid; place-items: center; width: 24px; height: 24px; font-size: 0.625rem; font-weight: 600; color: var(--encre); background: var(--remplissage); border-radius: 50%; }
.coche { color: var(--vert); font-weight: 700; }

/* Kanban */
.kanban { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(220px, 1fr); gap: 0.75rem; overflow-x: auto; }
.colonne { display: flex; flex-direction: column; gap: 0.5rem; padding: 0.5rem; background: var(--remplissage); border-radius: var(--rayon); }
.colonne-tete { display: flex; align-items: center; gap: 0.4rem; padding: 0.25rem 0.25rem 0.1rem; font-size: 0.8125rem; font-weight: 600; }
.colonne-tete .nb { font-weight: 500; color: var(--gris); }
.colonne-tete .proba { margin-left: auto; font-size: 0.6875rem; font-weight: 600; color: var(--gris); }
.jauge-etape { display: flex; gap: 2px; height: 3px; margin: 0 0.25rem 0.25rem; }
.jauge-etape i { flex: 1; border-radius: 2px; background: var(--trait-fort); }
.jauge-etape i.ok { background: var(--bleu); }
.carte-k { padding: 0.7rem 0.75rem; background: var(--surface); border-radius: var(--rayon-moyen); box-shadow: var(--ombre-carte); }
.carte-k .t { font-size: 0.8125rem; font-weight: 600; line-height: 1.35; }
.carte-k .m { margin-top: 0.35rem; font-size: 0.9375rem; font-weight: 650; }
.carte-k .bas { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; margin-top: 0.5rem; font-size: 0.6875rem; color: var(--gris); }
.colonne-pied { margin-top: auto; padding: 0.4rem 0.25rem 0.1rem; font-size: 0.75rem; color: var(--gris); border-top: 1px solid var(--trait-fort); }
.colonne-pied b { color: var(--encre); font-weight: 600; }

/* Calendrier mensuel */
.mois-grille { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); border-top: 1px solid var(--trait); border-left: 1px solid var(--trait); background: var(--surface); border-radius: var(--rayon-moyen); overflow: hidden; }
.mois-grille .jour-nom { padding: 0.4rem 0.5rem; font-size: 0.6875rem; font-weight: 600; color: var(--gris); border-right: 1px solid var(--trait); border-bottom: 1px solid var(--trait); }
.mois-grille .jour { min-height: 78px; padding: 0.3rem; border-right: 1px solid var(--trait); border-bottom: 1px solid var(--trait); display: flex; flex-direction: column; gap: 2px; }
.mois-grille .jour .n { font-size: 0.75rem; color: var(--gris); padding: 0 0.2rem; }
.mois-grille .jour.hors { background: var(--fond); }
.mois-grille .jour.aujourdhui .n { display: inline-grid; place-items: center; width: 20px; height: 20px; color: #fff; background: var(--bleu); border-radius: 50%; padding: 0; }
.evt { display: flex; align-items: center; gap: 0.3rem; padding: 0.1rem 0.35rem; font-size: 0.6875rem; font-weight: 500; color: var(--encre); background: var(--fond); border-radius: var(--rayon-fin); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.evt .point { flex: none; width: 6px; height: 6px; border-radius: 50%; }
.evt.plus { color: var(--gris); background: transparent; }

/* Chronologie et Gantt : une grille de temps */
.temps { display: grid; grid-template-columns: 168px minmax(0, 1fr); background: var(--surface); border-radius: var(--rayon-moyen); font-size: 0.75rem; }
.temps .axe-t { position: relative; display: grid; grid-template-columns: repeat(var(--jours), minmax(0, 1fr)); border-bottom: 1px solid var(--trait); }
.temps .axe-t span { padding: 0.4rem 0.3rem; color: var(--gris); border-left: 1px solid var(--grille); white-space: nowrap; overflow: hidden; }
.temps .axe-t span.we { background: var(--fond); }
.temps .tete-l { padding: 0.4rem 0.75rem; font-weight: 600; color: var(--gris); border-bottom: 1px solid var(--trait); }
.temps .lib-l { display: flex; align-items: center; gap: 0.5rem; min-height: 40px; padding: 0 0.75rem; border-bottom: 1px solid var(--trait); white-space: nowrap; overflow: hidden; }
.temps .lib-l.groupe { min-height: 30px; font-weight: 600; background: var(--fond); }
.temps .piste-t { position: relative; min-height: 40px; border-bottom: 1px solid var(--trait); background-image: linear-gradient(to right, var(--grille) 1px, transparent 1px); background-size: calc(100% / var(--jours)) 100%; }
.temps .piste-t.groupe { min-height: 30px; background-color: var(--fond); }
.temps .bloc-t { position: absolute; top: 7px; height: 26px; display: flex; align-items: center; padding: 0 0.5rem; font-size: 0.6875rem; font-weight: 600; color: var(--encre); background: var(--bleu-pale); border-radius: var(--rayon-fin); box-shadow: inset 0 0 0 1px var(--bleu-voile); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; box-sizing: border-box; }
.temps .bloc-t.fait { background: var(--remplissage); box-shadow: none; color: var(--gris); }
.temps .bloc-t.retard { background: var(--orange-pale); box-shadow: inset 0 0 0 1px var(--orange); color: var(--orange); }
.temps .barre-g { position: absolute; top: 12px; height: 16px; border-radius: var(--rayon-fin); background: var(--remplissage); overflow: hidden; }
.temps .barre-g b { display: block; height: 100%; background: var(--bleu); }
.temps .barre-g.groupe { top: 11px; height: 8px; background: var(--encre); }
.temps .jalon { position: absolute; top: 13px; width: 14px; height: 14px; margin-left: -7px; background: var(--encre); transform: rotate(45deg); border-radius: 2px; }
.temps .maintenant { position: absolute; top: 0; bottom: 0; width: 2px; margin-left: -1px; background: var(--bleu); z-index: 1; }
.temps .lien-dep { position: absolute; pointer-events: none; overflow: visible; }

/* Journal d'activité */
.journal { display: flex; flex-direction: column; }
.journal .evt-j { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 0.6rem; padding: 0.6rem 0; border-bottom: 1px solid var(--trait); font-size: 0.8125rem; }
.journal .evt-j:last-child { border-bottom: none; }
.journal .quand { font-size: 0.6875rem; color: var(--gris); }
.journal .avant { color: var(--gris); text-decoration: line-through; }
.journal .bulle { margin-top: 0.3rem; padding: 0.5rem 0.65rem; background: var(--fond); border-radius: var(--rayon-moyen); }

/* ===== États d'un écran ===== */
.squelette { position: relative; min-height: 120px; border-radius: var(--rayon); background: var(--fond); overflow: hidden; }
.squelette::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, transparent, rgba(0, 0, 0, 0.03), transparent); animation: brille 1.2s infinite; }
@keyframes brille { from { transform: translateX(-100%); } to { transform: translateX(100%); } }
.squelette i { display: block; height: 10px; margin: 14px; border-radius: 4px; background: var(--remplissage); }
.panne { display: grid; gap: 0.5rem; padding: 1.25rem; text-align: center; color: var(--encre); background: var(--surface); border-radius: var(--rayon); box-shadow: inset 0 0 0 1px var(--rouge); }
.panne strong { color: var(--rouge); }
.panne p { margin: 0; font-size: 0.8125rem; color: var(--gris); }
.vide-ecran { display: grid; place-items: center; gap: 0.4rem; min-height: 160px; padding: 1.25rem; text-align: center; color: var(--gris); font-size: 0.8125rem; background: var(--surface); border-radius: var(--rayon); box-shadow: var(--ombre-carte); }
.vide-ecran strong { color: var(--encre); font-size: 0.9375rem; }

/* ===== Liste d'enregistrements ===== */
.outils { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; margin-bottom: 0.75rem; }
.outils .recherche { min-height: 34px; min-width: 200px; flex: 0 1 260px; margin-left: auto; padding: 0 0.75rem; font: inherit; font-size: 0.8125rem; color: var(--encre); background: var(--surface); border: 1px solid var(--trait-fort); border-radius: var(--rayon-pilule); }
.outils .recherche:focus { border-color: var(--bleu); outline: none; box-shadow: 0 0 0 3px var(--bleu-halo); }
.pied-liste { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding-top: 0.75rem; font-size: 0.75rem; color: var(--gris); }
.pages { display: inline-flex; gap: 2px; }
.pages button { min-width: 28px; min-height: 28px; padding: 0 0.4rem; font: inherit; font-size: 0.75rem; color: var(--encre); background: transparent; border: none; border-radius: var(--rayon-pilule); cursor: pointer; }
.pages button.actif { color: #fff; background: var(--encre); }
.tableau td.groupe, .tableau th.groupe { color: var(--gris); font-size: 0.75rem; }

/* ===== Connexion ===== */
.porte { width: 360px; margin: 0 auto; padding: 1.5rem; text-align: center; background: var(--surface); border-radius: var(--rayon-grand); box-shadow: var(--ombre-carte); }
.porte img { width: 40px; height: 40px; }
.porte h1 { margin: 0.75rem 0 0.25rem; font-size: 1.125rem; font-weight: 700; letter-spacing: -0.02em; }
.porte p { margin: 0 0 1rem; font-size: 0.8125rem; color: var(--gris); }
.porte .saisie { text-align: center; margin-bottom: 0.5rem; }
.porte .button { width: 100%; justify-content: center; }
.porte .note { margin: 0.75rem 0 0; font-size: 0.6875rem; color: var(--gris-clair); }

/* ===== Site : ce que montre une page ===== */
.demos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.demo { display: flex; flex-direction: column; color: var(--encre); text-decoration: none; background: var(--fond); border-radius: var(--rayon-grand); padding: 1.25rem; transition: transform 0.2s ease, box-shadow 0.2s ease; }
.demo:hover { transform: translateY(-4px); box-shadow: var(--ombre-douce); }
.demo .ecran { position: relative; height: 220px; overflow: hidden; pointer-events: none; }
.demo .legende-demo { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; padding-top: 1.25rem; }
.demo .legende-demo span { font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.06em; color: var(--gris); }
.demo h3 { margin: 0.35rem 0 0.3rem; font-size: 1.375rem; font-weight: 700; letter-spacing: -0.02em; line-height: 1.1; }
.demo p { margin: 0; font-size: 0.9375rem; line-height: 1.5; color: var(--gris); }
.demo .round-arrow { flex: none; display: grid; place-items: center; width: 36px; height: 36px; color: var(--encre); background: var(--surface); border-radius: 50%; box-shadow: var(--ombre-carte); }
.demo.large { grid-column: span 2; flex-direction: row; align-items: center; gap: 2rem; }
.demo.large .ecran { flex: 1.4; height: 260px; }
.demo.large .legende-demo { flex: 1; flex-direction: column; align-items: flex-start; padding: 0; }
@media (max-width: 760px) { .demos { grid-template-columns: 1fr; } .demo.large { grid-column: auto; flex-direction: column; align-items: stretch; } }

.entree { display: flex; flex-direction: column; padding: 1.5rem; color: var(--encre); text-decoration: none; background: var(--surface); border: 1px solid var(--trait); border-radius: var(--rayon-grand); transition: border-color 0.2s ease, box-shadow 0.2s ease; }
.entree:hover { border-color: var(--trait-fort); box-shadow: var(--ombre-douce); }
.entree .porte-type { font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.06em; color: var(--gris); }
.entree h3 { margin: 0.75rem 0 1rem; font-size: 1.25rem; font-weight: 700; letter-spacing: -0.02em; line-height: 1.15; }
.entree ol { display: grid; gap: 0.45rem; margin: 0 0 1.25rem; padding: 0; list-style: none; counter-reset: etape; }
.entree li { display: flex; gap: 0.6rem; align-items: baseline; font-size: 0.875rem; color: var(--gris); counter-increment: etape; }
.entree li::before { content: counter(etape); flex: none; display: inline-grid; place-items: center; width: 20px; height: 20px; font-size: 0.6875rem; font-weight: 600; color: var(--encre); background: var(--remplissage); border-radius: 50%; }
.entree li b { color: var(--encre); font-weight: 600; }
.entree .suite { margin-top: auto; font-size: 0.875rem; font-weight: 500; color: var(--lien); }

.appel { display: grid; justify-items: center; gap: 0.75rem; padding: 3rem 1.5rem; text-align: center; background: var(--fond); border-radius: var(--rayon-grand); }
.appel img { width: 56px; height: 56px; }
.appel h2 { margin: 0; max-width: 18em; font-size: clamp(1.75rem, 3.5vw, 2.5rem); font-weight: 700; letter-spacing: -0.03em; line-height: 1.06; }
.appel h2 span { color: var(--gris); }
.appel p { margin: 0; max-width: 32rem; font-size: 1rem; line-height: 1.55; color: var(--gris); }
.appel .button { margin-top: 0.5rem; }
.appel small { font-size: 0.75rem; color: var(--gris-clair); }

/* ===== Fenêtre et notification ===== */
.fenetre { width: min(560px, 94vw); padding: 0; color: var(--encre); background: var(--surface); border: 0; border-radius: var(--rayon-grand); box-shadow: var(--ombre); }
.fenetre header { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1rem 1.25rem; border-bottom: 1px solid var(--trait); }
.fenetre header h2 { margin: 0; font-size: 1rem; font-weight: 600; }
.fenetre .corps-f { padding: 1.25rem; font-size: 0.9375rem; line-height: 1.55; }
.fenetre .corps-f p { margin: 0 0 0.75rem; }
.fenetre footer { display: flex; justify-content: flex-end; gap: 0.5rem; padding: 0.75rem 1.25rem; background: var(--fond); border-radius: 0 0 var(--rayon-grand) var(--rayon-grand); }
.fenetre .button.danger { background: var(--rouge); border-color: var(--rouge); }
.notification { display: flex; align-items: center; gap: 0.75rem; width: max-content; max-width: 420px; padding: 0.7rem 1rem; font-size: 0.875rem; color: #fff; background: var(--encre); border-radius: var(--rayon); box-shadow: var(--ombre); }
.notification b { font-weight: 600; }
.notification a { color: #fff; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.notification .ok { color: var(--ok-sur-encre); }
.notification .ko { color: var(--ko-sur-encre); }
.notification .x { margin-left: auto; color: var(--info-bulle-texte); cursor: pointer; }