/* Seheiah — système visuel
   La voûte de lapis et la feuille d'or.
   Porté de prototypes/assets/seheiah.css (référence validée), chargé APRÈS app.css :
   l'ordre des couches est le même que celui de Tailwind, les utilitaires passent donc
   toujours au-dessus des composants ; les règles html/body, non superposées, l'emportent
   sur le préflight. Ajouts propres à l'application en fin de fichier : coquille rendue par
   le serveur, page de connexion, administration, bibliothèques assombries. */
@layer theme, base, components, utilities;

/* Chaque vue est une page : la transition entre deux pages reprend celle du prototype. */
@view-transition { navigation: auto; }

/* ------------------------------------------------------------------ jetons */
@property --aube { syntax: "<color>"; inherits: true; initial-value: rgb(238 190 124 / .34); }
@property --halo-glow { syntax: "<color>"; inherits: true; initial-value: rgb(231 198 129 / .30); }
@property --sheen { syntax: "<angle>"; inherits: false; initial-value: 0deg; }

:root {
  color-scheme: dark;

  --voute-0: #050d2b;           /* fond : outremer de nuit */
  --voute-1: #0c1737;           /* panneau */
  --voute-2: #152347;           /* relief */
  --voute-3: #223156;           /* survol, traits forts */
  --filet: rgb(179 186 207 / .11);
  --filet-2: rgb(179 186 207 / .19);

  --plomb: #f3ecde;             /* blanc de plomb : texte */
  --plomb-2: #b3bacf;
  --plomb-3: #8791af;

  --or: #e7c681;                /* feuille d'or : la lumière de la protection */
  --or-vif: #fae7b3;
  --or-sombre: #9c7a3d;

  --ok: #69d6aa;                /* vert-de-gris */
  --warn: #fc984c;              /* minium */
  --crit: #fa686a;              /* vermillon */
  --muet: #7f8699;              /* gris de plomb */
  --info: #81aaf7;              /* azurite */

  --b1: #ecd293;                /* barrières, rampe ordinale validée */
  --b2: #cfac64;
  --b3: #af8c4a;
  --b4: #8c6c33;

  --font-voix: "Cormorant Garamond", "Iowan Old Style", "Palatino Linotype", Georgia, serif;
  --font-ui: "Geist", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono: "Geist Mono", ui-monospace, "Cascadia Code", Consolas, monospace;

  --rail-w: 236px;
  --gutter: clamp(16px, 2.6vw, 36px);
  --r-panel: 20px;
  --r-ctl: 12px;

  /* ressorts (CSS linear()) : un souple pour les tiroirs, un vif pour les curseurs */
  --spring-soft: linear(0, .034 1.9%, .134 4%, .297 6.3%, .522 9.2%, .734 12.4%, .869 15.4%, .957 18.6%, 1.006 22%, 1.028 25.8%, 1.03 30.2%, 1.02 35.3%, 1.006 41.6%, .998 50%, 1);
  --spring-vif: linear(0, .009, .035 2.1%, .141, .281 6.7%, .723 12.9%, .938 16.7%, 1.017, 1.077, 1.121, 1.149 24.3%, 1.159, 1.163, 1.161, 1.154 29.9%, 1.129 32.8%, 1.051 39.6%, 1.017 43.1%, .991, .977 51%, .974 53.8%, .975 57.1%, .997 69.8%, 1.003 76.9%, 1);
  --ease-out: cubic-bezier(.2, .8, .2, 1);
}

/* État du verdict : l'aube et la lueur du halo suivent la nuit */
[data-etat="serein"]    { --aube: rgb(238 190 124 / .34); --halo-glow: rgb(231 198 129 / .30); }
[data-etat="attention"] { --aube: rgb(252 152 76 / .30);  --halo-glow: rgb(252 170 100 / .26); }
[data-etat="alerte"]    { --aube: rgb(250 104 106 / .34); --halo-glow: rgb(250 104 106 / .24); }
[data-etat="muet"]      { --aube: rgb(127 134 153 / .10); --halo-glow: rgb(127 134 153 / .14); }

/* Non superposé exprès : doit l'emporter sur toute feuille de base chargée avant */
html { background: var(--voute-0); -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  min-height: 100dvh;
  background:
    radial-gradient(1100px 620px at 8% -8%, rgb(44 66 150 / .30), transparent 62%),
    radial-gradient(900px 520px at 104% 2%, rgb(74 58 150 / .20), transparent 60%),
    var(--voute-0);
  background-attachment: fixed;
  color: var(--plomb);
  font: 400 14px/1.5 var(--font-ui);
  font-feature-settings: "ss01" 0;
  -webkit-font-smoothing: antialiased;
  transition: --aube 1.2s ease, --halo-glow 1.2s ease;
}

@layer components {
  ::selection { background: rgb(231 198 129 / .32); color: var(--plomb); }
  :focus-visible { outline: 2px solid var(--or); outline-offset: 2px; border-radius: 6px; }
  * { scrollbar-width: thin; scrollbar-color: var(--voute-3) transparent; }

  /* grain de pigment, très léger */
  body::before {
    content: ""; position: fixed; inset: 0; z-index: 90; pointer-events: none;
    opacity: .07; mix-blend-mode: soft-light;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .6 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  }

  .voix { font-family: var(--font-voix); font-weight: 500; letter-spacing: -.005em; }
  .mono { font-family: var(--font-mono); font-size: .92em; letter-spacing: 0; }
  .num { font-variant-numeric: tabular-nums; }
  .lbl { font-size: 12.5px; color: var(--plomb-2); letter-spacing: .01em; }
  .muted { color: var(--plomb-3); }
  .sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

  /* Lecture claire / technique, comme l'atlas */
  [data-lecture="claire"] .tech-only { display: none !important; }
  [data-lecture="technique"] .claire-only { display: none !important; }

  /* ---------------------------------------------------------------- coquille */
  .app {
    display: grid;
    grid-template-columns: var(--rail-w) minmax(0, 1fr);
    min-height: 100dvh;
    transition: grid-template-columns .5s var(--spring-soft);
  }
  :root[data-rail="replie"] .app { --rail-w: 78px; }

  .rail {
    position: sticky; top: env(safe-area-inset-top, 0px);
    height: calc(100dvh - env(safe-area-inset-top, 0px));
    display: flex; flex-direction: column; gap: 6px;
    padding: 18px 12px 14px;
    border-right: 1px solid var(--filet);
    background: linear-gradient(180deg, rgb(10 20 52 / .72), rgb(6 12 36 / .82));
    backdrop-filter: blur(18px);
    z-index: 30;
    overflow: hidden;
  }
  .marque { display: flex; align-items: center; gap: 12px; padding: 4px 8px 18px; min-height: 58px; }
  .marque svg { flex: none; }
  .marque-nom { font-family: var(--font-voix); font-size: 25px; font-weight: 600; line-height: 1; letter-spacing: .01em; color: var(--or-vif); }
  .marque-sous { font-size: 11.5px; color: var(--plomb-3); margin-top: 4px; white-space: nowrap; }
  :root[data-rail="replie"] .marque-txt,
  :root[data-rail="replie"] .nav-lbl,
  :root[data-rail="replie"] .rail-pied-txt { opacity: 0; pointer-events: none; }
  .marque-txt, .nav-lbl, .rail-pied-txt { transition: opacity .25s ease; white-space: nowrap; }

  .nav { display: flex; flex-direction: column; gap: 2px; }
  .nav a {
    position: relative; display: flex; align-items: center; gap: 13px;
    height: 42px; padding: 0 13px; border-radius: var(--r-ctl);
    color: var(--plomb-2); text-decoration: none; font-size: 14px; font-weight: 450;
    transition: background .2s ease, color .2s ease;
  }
  .nav a svg { width: 19px; height: 19px; stroke-width: 1.6; flex: none; }
  .nav a:hover { background: rgb(34 49 86 / .55); color: var(--plomb); }
  .nav a[aria-current="page"] {
    color: var(--or-vif);
    background: linear-gradient(90deg, rgb(231 198 129 / .14), rgb(231 198 129 / .03));
  }
  .nav a[aria-current="page"]::before {
    content: ""; position: absolute; left: -12px; top: 50%; width: 6px; height: 6px; margin-top: -3px;
    border-radius: 50%; background: var(--or); box-shadow: 0 0 10px 2px rgb(231 198 129 / .55);
  }
  .nav-badge {
    margin-left: auto; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px;
    display: inline-grid; place-items: center; font-size: 11.5px; font-weight: 600;
    color: #2a1405; background: var(--warn);
  }
  .nav-badge.crit { background: var(--crit); color: #2b0507; }
  :root[data-rail="replie"] .nav-badge { position: absolute; top: 5px; left: 34px; min-width: 16px; height: 16px; padding: 0 4px; font-size: 10px; }

  .rail-pied { margin-top: auto; display: flex; flex-direction: column; gap: 10px; padding: 0 4px; }
  .rail-hote { font-size: 11.5px; color: var(--plomb-3); line-height: 1.45; padding: 0 9px; }
  .rail-hote b { color: var(--plomb-2); font-weight: 500; }
  .btn-ghost {
    display: inline-flex; align-items: center; gap: 10px; height: 36px; padding: 0 10px;
    border-radius: 10px; color: var(--plomb-3); font-size: 13px; background: transparent; border: 0; cursor: pointer;
  }
  .btn-ghost:hover { color: var(--plomb); background: rgb(34 49 86 / .45); }
  .btn-ghost svg { width: 18px; height: 18px; stroke-width: 1.6; flex: none; }

  .principal { min-width: 0; display: flex; flex-direction: column; }

  .barre {
    position: sticky; top: env(safe-area-inset-top, 0px); z-index: 25;
    display: flex; align-items: center; gap: 14px;
    height: 62px; padding: 0 var(--gutter);
    background: linear-gradient(180deg, rgb(6 13 40 / .78), rgb(6 13 40 / .55));
    backdrop-filter: blur(18px) saturate(1.2);
    border-bottom: 1px solid var(--filet);
  }
  .barre-titre { display: flex; flex-direction: column; line-height: 1.2; min-width: 0; }
  .barre-titre b { font-size: 14.5px; font-weight: 600; }
  .barre-titre span { font-size: 12px; color: var(--plomb-3); white-space: nowrap; }
  .barre-verdict {
    display: inline-flex; align-items: center; gap: 9px; height: 34px; padding: 0 14px 0 8px;
    border-radius: 999px; border: 1px solid var(--filet-2);
    background: rgb(12 23 55 / .7); font-size: 13px; color: var(--plomb);
    opacity: 0; transform: translateY(-6px) scale(.98); pointer-events: none;
    transition: opacity .35s ease, transform .5s var(--spring-soft);
    white-space: nowrap; cursor: pointer;
  }
  .barre-verdict.visible { opacity: 1; transform: none; pointer-events: auto; }
  .barre-droite { margin-left: auto; display: flex; align-items: center; gap: 12px; }

  .fraicheur { display: inline-flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--plomb-2); white-space: nowrap; }
  .pouls { position: relative; width: 8px; height: 8px; border-radius: 50%; background: var(--ok); }
  .pouls::after { content: ""; position: absolute; inset: -4px; border-radius: 50%; border: 1.5px solid currentColor; color: var(--ok); opacity: 0; animation: pouls 2.8s ease-out infinite; }
  .pouls.muet { background: var(--muet); }
  .pouls.muet::after { animation: none; }
  @keyframes pouls { 0% { transform: scale(.4); opacity: .8; } 100% { transform: scale(1.6); opacity: 0; } }

  .recherche {
    display: inline-flex; align-items: center; gap: 10px; height: 36px; padding: 0 8px 0 12px;
    border-radius: 11px; border: 1px solid var(--filet-2); background: rgb(12 23 55 / .6);
    color: var(--plomb-3); font-size: 13px; cursor: pointer; min-width: 190px;
    transition: border-color .2s, color .2s;
  }
  .recherche:hover { border-color: rgb(231 198 129 / .45); color: var(--plomb-2); }
  .recherche svg { width: 16px; height: 16px; }
  kbd, .kbd {
    font: 500 11px/1 var(--font-ui); color: var(--plomb-2);
    padding: 4px 6px; border-radius: 6px; border: 1px solid var(--filet-2); background: rgb(34 49 86 / .5);
  }
  .recherche kbd { margin-left: auto; }

  .contenu { padding: 0 var(--gutter) 72px; display: flex; flex-direction: column; gap: 36px; }
  .vue { display: flex; flex-direction: column; gap: 36px; view-transition-name: vue; }

  /* ---------------------------------------------------------------- en-têtes de vue */
  .vue-tete { display: grid; gap: 8px; padding-top: 32px; }
  .vue-tete h1 { font-family: var(--font-voix); font-weight: 500; font-size: clamp(34px, 3.4vw, 46px); line-height: 1.02; letter-spacing: -.01em; text-wrap: balance; }
  .vue-tete p { color: var(--plomb-2); font-size: 15.5px; max-width: 70ch; }
  .filtres { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin-top: 10px; }

  .sec-tete { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; margin-bottom: 14px; }
  .sec-tete h2 { font-family: var(--font-voix); font-weight: 500; font-size: 27px; line-height: 1.1; letter-spacing: -.005em; }
  .sec-tete .aside { font-size: 13px; color: var(--plomb-3); }
  .sec-tete .droite { margin-left: auto; }

  /* ---------------------------------------------------------------- panneaux de verre */
  .panel {
    position: relative; min-width: 0;
    border-radius: var(--r-panel);
    background: linear-gradient(180deg, rgb(27 41 88 / .46), rgb(12 22 56 / .40));
    border: 1px solid var(--filet);
    box-shadow: inset 0 1px 0 rgb(250 231 179 / .055), 0 26px 50px -34px rgb(0 0 0 / .85);
    backdrop-filter: blur(16px) saturate(1.12);
    padding: 20px 22px;
  }
  a.panel, .panel[data-lien] { display: block; color: inherit; text-decoration: none; cursor: pointer; transition: border-color .25s ease, transform .45s var(--spring-soft), box-shadow .3s ease; }
  a.panel:hover, .panel[data-lien]:hover { border-color: rgb(231 198 129 / .28); transform: translateY(-2px); box-shadow: inset 0 1px 0 rgb(250 231 179 / .08), 0 30px 60px -34px rgb(0 0 0 / .9); }
  .panel-tete { display: flex; align-items: center; gap: 11px; margin-bottom: 14px; }
  .panel-tete h3 { font-size: 14.5px; font-weight: 600; letter-spacing: .005em; }
  .panel-tete .chip { margin-left: auto; }
  .peril {
    position: relative; flex: none; width: 30px; height: 30px; border-radius: 50%;
    display: grid; place-items: center; color: var(--or);
    background: radial-gradient(circle at 50% 35%, rgb(231 198 129 / .16), rgb(231 198 129 / .03) 70%);
    box-shadow: inset 0 0 0 1px rgb(231 198 129 / .30);
  }
  .peril svg { width: 15px; height: 15px; stroke-width: 1.7; }
  .panel-pied { display: flex; align-items: center; gap: 8px; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--filet); font-size: 12px; color: var(--plomb-3); }
  .panel-pied .droite { margin-left: auto; display: inline-flex; align-items: center; gap: 4px; }
  .panel-pied svg { width: 14px; height: 14px; }
  .panel-cle { font-size: 22px; font-weight: 600; line-height: 1.15; letter-spacing: -.01em; }
  .panel-cle small { font-size: 13px; font-weight: 450; color: var(--plomb-2); letter-spacing: 0; margin-left: 4px; }

  .bento { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 16px; }
  .bento > .panel { display: flex; flex-direction: column; }
  .bento > .panel > .panel-pied { margin-top: auto; }
  .bento > .panel > :nth-last-child(2) { margin-bottom: 14px; }

  /* ---------------------------------------------------------------- statuts */
  .chip {
    display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 9px;
    border-radius: 999px; font-size: 12px; font-weight: 500; white-space: nowrap;
    color: var(--plomb-2); background: rgb(34 49 86 / .6); border: 1px solid transparent;
  }
  .chip svg { width: 13px; height: 13px; stroke-width: 2; }
  .chip.ok   { color: var(--ok);   background: rgb(105 214 170 / .11); }
  .chip.warn { color: var(--warn); background: rgb(252 152 76 / .12); }
  .chip.crit { color: var(--crit); background: rgb(250 104 106 / .13); }
  .chip.muet { color: var(--plomb-2); background: rgb(127 134 153 / .14); border-color: rgb(127 134 153 / .35); border-style: dashed; }
  .chip.info { color: var(--info); background: rgb(129 170 247 / .12); }
  .chip.or   { color: var(--or-vif); background: rgb(231 198 129 / .12); }
  .chip.accepte { color: var(--plomb-2); background: transparent; border-color: var(--filet-2); }

  .point { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--plomb-3); flex: none; }
  .point.ok { background: var(--ok); } .point.warn { background: var(--warn); } .point.crit { background: var(--crit); }
  .point.muet { background: transparent; box-shadow: inset 0 0 0 1.5px var(--muet); }
  .point.info { background: var(--info); } .point.or { background: var(--or); }

  /* ---------------------------------------------------------------- la voûte (en-tête de la veille) */
  .voute {
    position: relative; isolation: isolate;
    margin: 0 calc(-1 * var(--gutter));
    padding: 30px var(--gutter) 46px;
    border-bottom: 1px solid var(--filet);
    overflow: hidden;
  }
  .voute::before {
    content: ""; position: absolute; inset: 0; z-index: -2;
    background: url("../img/voute-lapis.jpg") center 38% / cover no-repeat;
    opacity: .62; filter: saturate(1.08) brightness(.78);
    -webkit-mask-image: linear-gradient(to bottom, #000 55%, transparent 100%);
            mask-image: linear-gradient(to bottom, #000 55%, transparent 100%);
  }
  .voute::after {
    content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
    background:
      radial-gradient(ellipse 62% 48% at 32% 112%, var(--aube), transparent 70%),
      linear-gradient(180deg, rgb(5 13 43 / .25), rgb(5 13 43 / .10) 40%, rgb(5 13 43 / .55) 100%);
  }
  .voute-grille { display: grid; grid-template-columns: minmax(300px, 540px) minmax(0, 1fr); gap: clamp(24px, 4vw, 64px); align-items: center; }

  .halo { position: relative; width: 100%; max-width: 540px; aspect-ratio: 1; margin-inline: auto; }
  .halo::before {
    content: ""; position: absolute; inset: 14%; border-radius: 50%; z-index: -1;
    background: radial-gradient(circle, var(--halo-glow), transparent 68%);
    filter: blur(12px);
    transition: --halo-glow 1.2s ease;
  }
  .halo svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
  .halo-reflet {
    position: absolute; inset: 0; border-radius: 50%; pointer-events: none;
    background: conic-gradient(from var(--sheen), transparent 0 62%, rgb(255 244 214 / .55) 70%, transparent 78% 100%);
    -webkit-mask: radial-gradient(circle closest-side, transparent 69.4%, #000 70.6%, #000 74.6%, transparent 75.8%);
            mask: radial-gradient(circle closest-side, transparent 69.4%, #000 70.6%, #000 74.6%, transparent 75.8%);
    mix-blend-mode: plus-lighter; opacity: .5;
    animation: reflet 16s linear infinite;
  }
  [data-etat="muet"] .halo-reflet { display: none; }
  @keyframes reflet { to { --sheen: 360deg; } }
  .halo-centre {
    position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
    width: 50%; text-align: center; display: grid; justify-items: center; gap: 6px; pointer-events: none;
  }
  .halo-heure { font-size: 13px; color: var(--plomb-2); font-variant-numeric: tabular-nums; letter-spacing: .04em; }
  .halo-verdict { font-family: var(--font-voix); font-weight: 500; font-size: clamp(30px, 4.2vw, 50px); line-height: .98; letter-spacing: -.01em; color: var(--plomb); text-wrap: balance; }
  .halo-etat { font-size: 12.5px; color: var(--plomb-2); display: inline-flex; align-items: center; gap: 7px; }

  /* poinçons, rayons, gemmes */
  .poincon { fill: var(--or); transition: opacity .3s; }
  .poincon.warn { fill: var(--warn); }
  .poincon.crit { fill: var(--crit); }
  .poincon.muet { fill: none; stroke: var(--muet); stroke-width: 1.2; }
  .rayon { stroke: var(--b2); stroke-width: 2; stroke-linecap: round; opacity: .62; }
  .rayon.fort { stroke: var(--or-vif); opacity: .95; }
  .rayon.muet { stroke: var(--muet); opacity: .25; }
  .gemme { stroke: var(--voute-0); stroke-width: 2; }
  .gemme.ok { fill: var(--or-vif); } .gemme.warn { fill: var(--warn); } .gemme.crit { fill: var(--crit); }
  .gemme.vide { fill: var(--voute-0); stroke: var(--plomb-3); stroke-width: 1.4; }
  .piste { fill: none; stroke: rgb(179 186 207 / .14); stroke-width: 1; }
  .arc-tache { fill: none; stroke-width: 5; stroke-linecap: round; }
  .arc-tache.ok { stroke: var(--or-vif); } .arc-tache.warn { stroke: var(--warn); } .arc-tache.crit { stroke: var(--crit); }
  .h-lbl { fill: var(--plomb-3); font: 500 11px var(--font-ui); letter-spacing: .04em; }
  .h-lbl.fort { fill: var(--plomb-2); }
  .maintenant { fill: var(--or-vif); filter: drop-shadow(0 0 6px rgb(250 231 179 / .9)); }
  .maintenant.muet { fill: var(--muet); filter: none; }
  .aiguille { stroke: rgb(250 231 179 / .45); stroke-width: 1; }
  .quartier-hit { fill: transparent; cursor: crosshair; }
  .quartier-hit:hover, .quartier-hit.actif { fill: rgb(250 231 179 / .07); }

  .anime .poincon { animation: allume .5s var(--ease-out) both; animation-delay: calc(var(--i) * 9ms); }
  .anime .rayon { animation: leve .7s var(--ease-out) both; animation-delay: calc(560ms + var(--i) * 5ms); }
  .anime .gemme, .anime .arc-tache { animation: allume .6s var(--ease-out) both; animation-delay: 1.05s; }
  .anime .halo-centre > * { animation: nait .9s var(--ease-out) both; animation-delay: 1.15s; }
  .anime .halo-centre > *:nth-child(2) { animation-delay: 1.25s; }
  .anime .halo-centre > *:nth-child(3) { animation-delay: 1.4s; }
  @keyframes allume { from { opacity: 0; } }
  @keyframes leve { from { stroke-dashoffset: var(--len); } }
  @keyframes nait { from { opacity: 0; filter: blur(6px); transform: translateY(4px); } }

  .rapport { display: flex; flex-direction: column; gap: 22px; min-width: 0; }
  .rapport-date { font-size: 13px; color: var(--plomb-2); }
  .rapport-phrase { font-family: var(--font-voix); font-weight: 500; font-size: clamp(28px, 2.9vw, 40px); line-height: 1.08; letter-spacing: -.008em; text-wrap: balance; max-width: 22ch; }
  .rapport-phrase .suite { color: var(--plomb-2); }

  /* rangée de chiffres : les filets suivent le retour à la ligne (le premier de chaque rangée est rogné) */
  .chiffres { display: grid; overflow: hidden; margin-left: -16px; border-top: 1px solid var(--filet); border-bottom: 1px solid var(--filet); }
  .chiffre { padding: 14px 16px; display: grid; gap: 2px; align-content: start; border-left: 1px solid var(--filet); border-top: 1px solid var(--filet); margin: -1px 0 0 -1px; }
  .chiffre-v { font-size: 28px; font-weight: 600; line-height: 1.1; letter-spacing: -.015em; }
  .chiffre-v small { font-size: 15px; font-weight: 500; color: var(--plomb-2); }
  .chiffre-l { font-size: 12.5px; color: var(--plomb-2); }
  .chiffre-c { font-size: 11.5px; color: var(--plomb-3); }

  .attn-titre { font-size: 12.5px; color: var(--plomb-2); margin-bottom: 8px; display: flex; align-items: center; gap: 8px; }
  .attn { display: flex; flex-direction: column; gap: 8px; }
  .attn-ligne {
    position: relative; display: flex; align-items: center; gap: 12px; width: 100%; text-align: left;
    padding: 12px 14px 12px 18px; border-radius: 14px; cursor: pointer; color: inherit; font: inherit;
    background: rgb(12 23 55 / .55); border: 1px solid var(--filet); backdrop-filter: blur(10px);
    transition: border-color .2s, background .2s, transform .45s var(--spring-soft);
  }
  .attn-ligne:hover { border-color: var(--filet-2); background: rgb(21 35 71 / .7); transform: translateX(2px); }
  .attn-ligne::before { content: ""; position: absolute; left: 6px; top: 12px; bottom: 12px; width: 3px; border-radius: 3px; background: var(--warn); }
  .attn-ligne.crit::before { background: var(--crit); }
  .attn-ligne.info::before { background: var(--info); }
  .attn-ligne.muet::before { background: var(--muet); }
  .attn-ic { flex: none; color: var(--warn); }
  .attn-ligne.crit .attn-ic { color: var(--crit); }
  .attn-ligne.info .attn-ic { color: var(--info); }
  .attn-ligne.muet .attn-ic { color: var(--muet); }
  .attn-ic svg { width: 18px; height: 18px; stroke-width: 1.8; }
  .attn-txt { min-width: 0; display: grid; gap: 1px; }
  .attn-txt b { font-weight: 550; font-size: 14.5px; }
  .attn-txt span { font-size: 12.5px; color: var(--plomb-3); }
  .attn-chev { margin-left: auto; color: var(--plomb-3); flex: none; }
  .attn-chev svg { width: 16px; height: 16px; }
  .rien {
    display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-radius: 14px;
    border: 1px dashed rgb(231 198 129 / .28); color: var(--plomb-2); font-size: 13.5px;
    background: radial-gradient(120% 140% at 0% 0%, rgb(231 198 129 / .08), transparent 60%);
  }
  .rien svg { color: var(--or); width: 18px; height: 18px; flex: none; }

  /* ---------------------------------------------------------------- à planifier */
  .plan { display: grid; gap: 12px; }
  .plan-item { text-align: left; font: inherit; color: inherit; cursor: pointer; display: grid; gap: 6px; align-content: start;
    padding: 16px 18px 16px 20px; border-radius: 16px; position: relative;
    background: rgb(12 23 55 / .45); border: 1px solid var(--filet);
    transition: border-color .2s, background .2s; }
  .plan-item:hover { border-color: var(--filet-2); background: rgb(21 35 71 / .6); }
  .plan-item::before { content: ""; position: absolute; left: 0; top: 16px; bottom: 16px; width: 3px; border-radius: 0 3px 3px 0; background: var(--warn); }
  .plan-item.info::before { background: var(--info); }
  .plan-item.accepte::before { background: var(--plomb-3); }
  .plan-item b { font-weight: 550; font-size: 14.5px; line-height: 1.3; }
  .plan-item p { font-size: 13px; color: var(--plomb-2); line-height: 1.45; }
  .plan-item .meta { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-top: 4px; }

  /* ---------------------------------------------------------------- graphiques */
  .gr { display: block; width: 100%; overflow: visible; }
  .gr text { font-family: var(--font-ui); }
  .ax { fill: var(--plomb-3); font-size: 11px; font-variant-numeric: tabular-nums; }
  .ax.fort { fill: var(--plomb-2); }
  .grille { stroke: rgb(179 186 207 / .09); stroke-width: 1; shape-rendering: crispEdges; }
  .base { stroke: rgb(179 186 207 / .22); stroke-width: 1; shape-rendering: crispEdges; }
  .bande { fill: rgb(179 186 207 / .075); }
  .ligne { fill: none; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
  .aire { opacity: .12; }
  .curseur { stroke: rgb(250 231 179 / .5); stroke-width: 1; pointer-events: none; }
  .hit { fill: transparent; }
  .cellule { transition: opacity .15s; }
  .cellule:hover, .barre-h:hover { opacity: .78; }
  .gr-scroll { overflow-x: auto; overflow-y: hidden; }
  .legende { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 12px; color: var(--plomb-2); }
  .legende i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 7px; vertical-align: -1px; }
  .legende i.ligne-cle { width: 14px; height: 2px; border-radius: 2px; vertical-align: 3px; }

  /* matrice des sauvegardes */
  .matrice { display: grid; gap: 4px; }
  .mat-ligne { display: grid; grid-template-columns: 158px minmax(0, 1fr) 132px; align-items: center; gap: 14px; padding: 3px 0; border-radius: 10px; }
  .mat-ligne:hover { background: rgb(34 49 86 / .28); }
  .mat-nom { display: flex; align-items: center; gap: 9px; min-width: 0; font-size: 13px; }
  .mat-nom span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .mat-nom svg { width: 15px; height: 15px; color: var(--plomb-3); flex: none; }
  .mat-cells { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(6px, 1fr); gap: 3px; }
  .mc { height: 18px; border-radius: 4px; cursor: pointer; position: relative; border: 0; padding: 0; background: rgb(105 214 170 / .42); transition: transform .2s var(--spring-soft), background .2s; }
  .mc:hover { transform: scaleY(1.18); }
  .mc.der { background: var(--ok); }
  .mc.warn { background: var(--warn); }
  .mc.crit { background: var(--crit); }
  .mc.crit::after { content: ""; position: absolute; inset: 0; background: linear-gradient(45deg, transparent 44%, #2b0507 45% 55%, transparent 56%), linear-gradient(-45deg, transparent 44%, #2b0507 45% 55%, transparent 56%); opacity: .7; border-radius: 4px; }
  .mc.warn::after { content: ""; position: absolute; left: 50%; top: 3px; bottom: 3px; width: 2px; margin-left: -1px; background: #2a1405; opacity: .55; border-radius: 1px; }
  .mc.manque { background: transparent; box-shadow: inset 0 0 0 1.5px var(--muet); }
  .mc.attente { background: transparent; box-shadow: inset 0 0 0 1.5px rgb(231 198 129 / .5); }
  .mat-entete { display: grid; grid-template-columns: 158px minmax(0, 1fr) 132px; gap: 14px; font-size: 11px; color: var(--plomb-3); }
  .mat-dates { display: flex; justify-content: space-between; }
  .mat-taille { display: flex; align-items: center; gap: 8px; justify-content: flex-end; font-size: 12px; color: var(--plomb-2); white-space: nowrap; }

  /* barres horizontales */
  .barres { display: grid; gap: 9px; }
  .bh { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 12px; align-items: center; font-size: 13px; }
  .bh-lbl { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--plomb); }
  .bh-v { font-variant-numeric: tabular-nums; color: var(--plomb-2); font-size: 12.5px; }
  .bh-piste { grid-column: 1 / -1; height: 6px; border-radius: 6px; background: rgb(179 186 207 / .08); overflow: hidden; }
  .bh-piste i { display: block; height: 100%; border-radius: 6px; background: var(--b2); transform-origin: left; animation: pousse .8s var(--ease-out) both; }
  @keyframes pousse { from { transform: scaleX(0); } }

  /* jauge */
  .jauge { position: relative; height: 10px; border-radius: 10px; background: rgb(129 170 247 / .12); overflow: visible; }
  .jauge > i { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 10px; background: linear-gradient(90deg, rgb(129 170 247 / .55), var(--info)); }
  .jauge.warn > i { background: linear-gradient(90deg, rgb(252 152 76 / .5), var(--warn)); }
  .jauge.crit > i { background: linear-gradient(90deg, rgb(250 104 106 / .5), var(--crit)); }
  .jauge > b { position: absolute; top: -4px; bottom: -4px; width: 1px; background: rgb(179 186 207 / .45); }

  /* chaîne des nuits */
  .chaine { display: grid; grid-template-columns: repeat(30, minmax(0, 1fr)); gap: 6px 5px; }
  .nuit-pt { aspect-ratio: 1; border-radius: 50%; border: 0; padding: 0; cursor: pointer; background: var(--or); opacity: .82; transition: transform .25s var(--spring-vif), opacity .2s; }
  .nuit-pt:hover { transform: scale(1.35); opacity: 1; }
  .nuit-pt.attention { background: var(--warn); }
  .nuit-pt.alerte { background: var(--crit); }
  .nuit-pt.muet { background: transparent; box-shadow: inset 0 0 0 1.5px var(--muet); }
  .nuit-pt.derniere { box-shadow: 0 0 0 2px var(--voute-0), 0 0 0 3.5px rgb(250 231 179 / .8); opacity: 1; }

  /* ---------------------------------------------------------------- tableaux */
  .tbl-wrap { overflow-x: auto; margin: 0 -8px; padding: 0 8px; }
  .tbl { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 13.5px; }
  .tbl th { text-align: left; font-weight: 500; font-size: 12px; color: var(--plomb-3); padding: 0 12px 10px; border-bottom: 1px solid var(--filet-2); white-space: nowrap; }
  .tbl td { padding: 11px 12px; border-bottom: 1px solid var(--filet); vertical-align: middle; }
  .tbl td.num, .tbl th.num { text-align: right; font-variant-numeric: tabular-nums; }
  .tbl tbody tr.ligne { cursor: pointer; transition: background .15s; }
  .tbl tbody tr.ligne:hover { background: rgb(34 49 86 / .3); }
  .tbl tbody tr.ligne td:first-child { border-radius: 10px 0 0 10px; }
  .tbl tbody tr.ligne td:last-child { border-radius: 0 10px 10px 0; }
  .tbl .chev { width: 28px; color: var(--plomb-3); }
  .tbl .chev svg { width: 16px; height: 16px; transition: transform .35s var(--spring-soft); }
  .tbl tr.ouvert .chev svg { transform: rotate(90deg); }
  .tbl tr.detail > td { padding: 0; border-bottom: 1px solid var(--filet); }
  .tbl tr.detail .detail-in { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .45s var(--spring-soft); }
  .tbl tr.detail.ouvert .detail-in { grid-template-rows: 1fr; }
  .tbl tr.detail .detail-in > div { overflow: hidden; }
  .detail-corps { padding: 6px 14px 18px 40px; display: grid; gap: 14px; }
  .tbl tr.frais td { animation: frais 2.4s ease-out; }
  @keyframes frais { from { background: rgb(231 198 129 / .16); } }

  .kv { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 7px 18px; font-size: 13px; }
  .kv dt { color: var(--plomb-3); }
  .kv dd { margin: 0; color: var(--plomb); min-width: 0; overflow-wrap: anywhere; }
  .code { font-family: var(--font-mono); font-size: 12px; color: var(--plomb-2); background: rgb(5 13 43 / .6); border: 1px solid var(--filet); border-radius: 10px; padding: 10px 12px; white-space: pre-wrap; overflow-wrap: anywhere; }
  .note { font-size: 13px; color: var(--plomb-2); line-height: 1.55; }
  .note b { color: var(--plomb); font-weight: 550; }

  /* ---------------------------------------------------------------- journal */
  .jour { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 18px; }
  .jour-tete { position: sticky; top: 78px; align-self: start; display: grid; gap: 2px; }
  .jour-tete b { font-family: var(--font-voix); font-size: 22px; font-weight: 500; }
  .jour-tete span { font-size: 12px; color: var(--plomb-3); }
  .evts { display: grid; border-left: 1px solid var(--filet-2); }
  .evt { position: relative; display: grid; grid-template-columns: 52px 22px minmax(0, 1fr) auto; gap: 10px; align-items: start; padding: 10px 12px 10px 18px; cursor: pointer; border-radius: 0 12px 12px 0; transition: background .15s; }
  .evt:hover { background: rgb(34 49 86 / .28); }
  .evt::before { content: ""; position: absolute; left: -4.5px; top: 17px; width: 8px; height: 8px; border-radius: 50%; background: var(--voute-3); box-shadow: 0 0 0 3px var(--voute-0); }
  .evt.ok::before { background: var(--ok); } .evt.warn::before { background: var(--warn); } .evt.crit::before { background: var(--crit); }
  .evt.info::before { background: var(--info); } .evt.or::before { background: var(--or); }
  .evt-h { font-size: 12.5px; color: var(--plomb-3); font-variant-numeric: tabular-nums; padding-top: 1px; }
  .evt-ic { color: var(--plomb-3); padding-top: 1px; } .evt-ic svg { width: 16px; height: 16px; }
  .evt-t { min-width: 0; } .evt-t b { font-weight: 500; font-size: 13.5px; } .evt-t p { font-size: 12.5px; color: var(--plomb-3); margin-top: 1px; }
  .evt.nuit-bande { background: linear-gradient(90deg, rgb(21 35 71 / .35), transparent 70%); }

  /* ---------------------------------------------------------------- contrôles */
  .seg { position: relative; display: inline-flex; padding: 3px; border-radius: 999px; background: rgb(8 16 44 / .7); border: 1px solid var(--filet-2); isolation: isolate; }
  .seg button { position: relative; z-index: 1; border: 0; background: transparent; color: var(--plomb-2); font: 500 12.5px/1 var(--font-ui); padding: 7px 13px; border-radius: 999px; cursor: pointer; white-space: nowrap; transition: color .3s ease; }
  .seg button:hover { color: var(--plomb); }
  .seg button[aria-pressed="true"] { color: #1b1304; }
  .seg-ind { position: absolute; z-index: 0; top: 3px; bottom: 3px; left: 0; width: 0; border-radius: 999px; background: linear-gradient(180deg, var(--or-vif), var(--or)); box-shadow: 0 2px 10px -2px rgb(231 198 129 / .5); transition: transform .5s var(--spring-vif), width .5s var(--spring-vif); }

  .puce-filtre { display: inline-flex; align-items: center; gap: 7px; height: 30px; padding: 0 12px; border-radius: 999px; border: 1px solid var(--filet-2); background: transparent; color: var(--plomb-2); font: 500 12.5px var(--font-ui); cursor: pointer; transition: all .2s; }
  .puce-filtre i { width: 9px; height: 9px; border-radius: 3px; }
  .puce-filtre svg { width: 15px; height: 15px; stroke-width: 1.7; }
  .puce-filtre[aria-pressed="false"] { opacity: .5; }
  .puce-filtre[aria-pressed="false"] i { background: transparent !important; box-shadow: inset 0 0 0 1.5px var(--plomb-3); }
  .puce-filtre:hover { border-color: rgb(231 198 129 / .4); color: var(--plomb); }

  select.sel { appearance: none; height: 32px; padding: 0 34px 0 12px; border-radius: 999px; border: 1px solid var(--filet-2); color: var(--plomb-2); font: 500 12.5px var(--font-ui); cursor: pointer;
    background: rgb(8 16 44 / .7) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='none' stroke='%238791af' stroke-width='2' viewBox='0 0 24 24'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 12px center; }
  select.sel option { background: var(--voute-1); color: var(--plomb); }

  .tableau-bascule { font-size: 12px; color: var(--plomb-3); background: none; border: 0; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; padding: 4px 0; }
  .tableau-bascule:hover { color: var(--plomb); }
  .tableau-bascule svg { width: 14px; height: 14px; }

  /* ---------------------------------------------------------------- infobulle */
  .tip {
    position: fixed; z-index: 120; pointer-events: none; max-width: 320px;
    padding: 10px 12px; border-radius: 12px; font-size: 12.5px; line-height: 1.45;
    background: rgb(9 17 45 / .94); border: 1px solid var(--filet-2);
    box-shadow: 0 18px 40px -12px rgb(0 0 0 / .8);
    backdrop-filter: blur(12px);
    opacity: 0; transform: translateY(4px) scale(.98); transition: opacity .14s ease, transform .2s var(--ease-out);
  }
  .tip.visible { opacity: 1; transform: none; }
  .tip-t { color: var(--plomb-3); font-size: 11.5px; margin-bottom: 4px; }
  .tip-v { color: var(--plomb); font-weight: 600; font-size: 14px; }
  .tip-r { display: flex; align-items: center; gap: 8px; margin-top: 3px; color: var(--plomb-2); }
  .tip-r i { width: 12px; height: 2px; border-radius: 2px; flex: none; }
  .tip-r b { color: var(--plomb); font-weight: 600; margin-left: auto; padding-left: 12px; font-variant-numeric: tabular-nums; }

  /* ---------------------------------------------------------------- tiroir */
  .voile { position: fixed; inset: 0; z-index: 60; background: rgb(2 6 22 / .55); backdrop-filter: blur(3px); opacity: 0; pointer-events: none; transition: opacity .35s ease; }
  .voile.ouvert { opacity: 1; pointer-events: auto; }
  .tiroir {
    position: fixed; z-index: 70; top: 0; right: 0; bottom: 0; width: min(580px, 100vw);
    display: flex; flex-direction: column;
    padding-top: env(safe-area-inset-top, 0px); padding-bottom: env(safe-area-inset-bottom, 0px);
    background: linear-gradient(180deg, rgb(14 26 64 / .96), rgb(7 14 40 / .97));
    border-left: 1px solid var(--filet-2);
    box-shadow: -40px 0 80px -40px rgb(0 0 0 / .9);
    transform: translateX(104%); transition: transform .75s var(--spring-soft);
    visibility: hidden;
  }
  .tiroir.ouvert { transform: none; visibility: visible; }
  .tiroir.ferme-en-cours { visibility: visible; }
  .tiroir-tete { display: grid; gap: 6px; padding: 22px 24px 18px; border-bottom: 1px solid var(--filet); position: relative; }
  .tiroir-kicker { font-size: 12.5px; color: var(--plomb-3); display: flex; align-items: center; gap: 8px; }
  .tiroir-kicker svg { width: 15px; height: 15px; }
  .tiroir-titre { font-family: var(--font-voix); font-size: 31px; font-weight: 500; line-height: 1.05; padding-right: 44px; text-wrap: balance; }
  .tiroir-fermer { position: absolute; top: 18px; right: 18px; width: 36px; height: 36px; border-radius: 10px; border: 1px solid var(--filet-2); background: transparent; color: var(--plomb-2); display: grid; place-items: center; cursor: pointer; }
  .tiroir-fermer:hover { color: var(--plomb); border-color: rgb(231 198 129 / .4); }
  .tiroir-fermer svg { width: 18px; height: 18px; }
  .tiroir-corps { overflow-y: auto; padding: 20px 24px 40px; display: grid; gap: 22px; align-content: start; }
  .tiroir-corps.change { animation: nait .45s var(--ease-out); }
  .bloc h4 { font-size: 12.5px; font-weight: 500; color: var(--plomb-3); margin-bottom: 10px; }

  /* ---------------------------------------------------------------- palette Ctrl K */
  .palette-voile { position: fixed; inset: 0; z-index: 100; background: rgb(2 6 22 / .5); backdrop-filter: blur(4px); display: none; }
  .palette-voile.ouvert { display: block; animation: allume .2s ease; }
  .palette {
    position: fixed; z-index: 101; left: 50%; top: 14vh; transform: translateX(-50%);
    width: min(660px, calc(100vw - 32px)); max-height: 68vh; display: none; flex-direction: column;
    border-radius: 20px; overflow: hidden;
    background: rgb(10 19 50 / .96); border: 1px solid var(--filet-2);
    box-shadow: 0 40px 90px -30px rgb(0 0 0 / .9), inset 0 1px 0 rgb(250 231 179 / .06);
  }
  .palette.ouvert { display: flex; animation: palette-in .45s var(--spring-soft); }
  @keyframes palette-in { from { opacity: 0; transform: translateX(-50%) translateY(-8px) scale(.98); } }
  .palette-champ { display: flex; align-items: center; gap: 12px; padding: 16px 18px; border-bottom: 1px solid var(--filet); }
  .palette-champ svg { width: 19px; height: 19px; color: var(--or); }
  .palette-champ input { flex: 1; min-width: 0; background: transparent; border: 0; outline: 0; color: var(--plomb); font: 400 17px var(--font-ui); }
  .palette-champ input::placeholder { color: var(--plomb-3); }
  .palette-res { overflow-y: auto; padding: 8px; }
  .palette-groupe { font-size: 11.5px; color: var(--plomb-3); padding: 10px 10px 6px; }
  .palette-item { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 12px; cursor: pointer; font-size: 14px; }
  .palette-item svg { width: 17px; height: 17px; color: var(--plomb-3); flex: none; }
  .palette-item .indice { margin-left: auto; font-size: 12px; color: var(--plomb-3); white-space: nowrap; }
  .palette-item.sel { background: linear-gradient(90deg, rgb(231 198 129 / .14), rgb(231 198 129 / .04)); color: var(--or-vif); }
  .palette-item.sel svg { color: var(--or); }
  .palette-item mark { background: none; color: var(--or-vif); font-weight: 600; }
  .palette-pied { display: flex; gap: 16px; padding: 10px 16px; border-top: 1px solid var(--filet); font-size: 11.5px; color: var(--plomb-3); }
  .palette-vide { padding: 28px 16px; text-align: center; color: var(--plomb-3); font-size: 13.5px; }

  /* ---------------------------------------------------------------- pastille prototype (hors cockpit) */
  .proto { position: fixed; right: 16px; bottom: calc(16px + env(safe-area-inset-bottom, 0px)); z-index: 80; }
  .proto-bouton { display: inline-flex; align-items: center; gap: 8px; height: 34px; padding: 0 14px; border-radius: 999px; font: 500 12px var(--font-ui); color: var(--plomb-2); background: rgb(8 16 44 / .88); border: 1px dashed rgb(179 186 207 / .38); cursor: pointer; backdrop-filter: blur(10px); }
  .proto-bouton:hover { color: var(--plomb); border-color: rgb(231 198 129 / .5); }
  .proto-bouton svg { width: 15px; height: 15px; }
  .proto-menu { position: absolute; right: 0; bottom: 44px; width: 300px; padding: 8px; border-radius: 16px; background: rgb(10 19 50 / .97); border: 1px solid var(--filet-2); box-shadow: 0 30px 70px -20px rgb(0 0 0 / .9); display: none; }
  .proto-menu.ouvert { display: block; animation: nait .3s var(--ease-out); }
  .proto-menu p { font-size: 11.5px; color: var(--plomb-3); padding: 6px 10px 8px; line-height: 1.45; }
  .proto-menu button { display: grid; grid-template-columns: 18px 1fr; gap: 2px 10px; width: 100%; text-align: left; padding: 9px 10px; border-radius: 10px; border: 0; background: transparent; color: var(--plomb); font: 500 13px var(--font-ui); cursor: pointer; }
  .proto-menu button small { grid-column: 2; font-size: 11.5px; color: var(--plomb-3); font-weight: 400; }
  .proto-menu button:hover { background: rgb(34 49 86 / .5); }
  .proto-menu button .rad { width: 14px; height: 14px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px var(--plomb-3); margin-top: 2px; }
  .proto-menu button[aria-checked="true"] .rad { box-shadow: inset 0 0 0 4px var(--or); }

  /* anneaux des barrières */
  .cercles-legende { display: grid; gap: 12px; }
  .cercle-ligne { display: grid; grid-template-columns: 14px minmax(0, 1fr) auto; gap: 4px 12px; align-items: start; }
  .cercle-ligne i { width: 12px; height: 12px; border-radius: 50%; margin-top: 4px; }
  .cercle-ligne b { font-weight: 550; font-size: 14px; }
  .cercle-ligne p { grid-column: 2 / -1; font-size: 12.5px; color: var(--plomb-3); line-height: 1.45; }
  .cercle-ligne .v { font-size: 15px; font-weight: 600; font-variant-numeric: tabular-nums; text-align: right; }
  .cercle-ligne .v small { display: block; font-size: 11.5px; font-weight: 400; color: var(--plomb-3); }

  /* engagements (intégrité) */
  .engage { display: grid; grid-template-columns: 26px minmax(0, 1.6fr) minmax(0, 1fr) 150px 24px; gap: 14px; align-items: center; padding: 12px 10px; border-bottom: 1px solid var(--filet); cursor: pointer; border-radius: 10px; }
  .engage:hover { background: rgb(34 49 86 / .28); }
  .engage-ic svg { width: 18px; height: 18px; stroke-width: 1.8; }
  .engage-ic.ok { color: var(--ok); } .engage-ic.warn { color: var(--warn); } .engage-ic.crit { color: var(--crit); } .engage-ic.accepte { color: var(--plomb-3); } .engage-ic.muet { color: var(--muet); }
  .engage b { font-weight: 500; font-size: 14px; }
  .engage .obs { font-size: 12.5px; color: var(--plomb-2); min-width: 0; }
  .histo { display: grid; grid-template-columns: repeat(30, 1fr); gap: 2px; height: 16px; }
  .histo i { border-radius: 2px; background: rgb(105 214 170 / .55); }
  .histo i.warn { background: var(--warn); } .histo i.crit { background: var(--crit); } .histo i.accepte { background: rgb(179 186 207 / .3); } .histo i.muet { background: transparent; box-shadow: inset 0 0 0 1px var(--muet); } .histo i.nv { background: rgb(179 186 207 / .06); }

  .reseaux { display: grid; gap: 12px; }
  .reseau { border: 1px dashed var(--filet-2); border-radius: 16px; padding: 12px 14px 14px; }
  .reseau-t { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; font-size: 13px; margin-bottom: 10px; }
  .reseau-t b { font-weight: 600; }
  .reseau-t span { font-size: 11.5px; color: var(--plomb-3); }
  .conteneurs { display: flex; flex-wrap: wrap; gap: 6px; }
  .ctn { display: inline-flex; align-items: center; gap: 7px; height: 28px; padding: 0 10px; border-radius: 8px; font-size: 12px; background: rgb(21 35 71 / .6); border: 1px solid var(--filet); color: var(--plomb-2); cursor: pointer; }
  .ctn:hover { border-color: rgb(231 198 129 / .35); color: var(--plomb); }
  .ctn.warn { border-color: rgb(252 152 76 / .5); color: var(--plomb); }

  /* chargement / états vides soignés */
  .etat-vide { display: grid; justify-items: center; gap: 10px; padding: 34px 20px; text-align: center; color: var(--plomb-2); font-size: 13.5px; }
  .etat-vide svg { width: 28px; height: 28px; color: var(--or); }

  /* journal défilant : l'en-tête reste en place */
  .defile { max-height: 560px; overflow: auto; overscroll-behavior: contain; }
  .defile thead th { position: sticky; top: 0; z-index: 1; background: rgb(14 25 60 / .97); }

  /* ---------------------------------------------------------------- transitions de vue */
  ::view-transition-old(vue) { animation: vt-out .22s ease both; }
  ::view-transition-new(vue) { animation: vt-in .42s var(--ease-out) both; }
  @keyframes vt-out { to { opacity: 0; transform: translateY(-6px); filter: blur(3px); } }
  @keyframes vt-in { from { opacity: 0; transform: translateY(10px); filter: blur(4px); } }

  /* ---------------------------------------------------------------- mise en page responsive */
  @media (max-width: 1280px) {
    .voute-grille { grid-template-columns: minmax(280px, 440px) minmax(0, 1fr); }
  }
  @media (max-width: 1100px) {
    .recherche { min-width: 0; } .recherche .rech-txt, .recherche kbd { display: none; }
  }
  @media (max-width: 980px) {
    .voute-grille { grid-template-columns: 1fr; }
    .halo { max-width: 460px; }
    .rapport-phrase { max-width: none; }
    .fraicheur .fr-txt { display: none; }
  }
  @media (max-width: 760px) {
    .app { grid-template-columns: minmax(0, 1fr); }
    .rail {
      position: fixed; top: auto; left: 0; right: 0; bottom: 0; height: auto; z-index: 40;
      flex-direction: row; padding: 6px 8px calc(6px + env(safe-area-inset-bottom, 0px));
      border-right: 0; border-top: 1px solid var(--filet-2);
    }
    .marque, .rail-pied { display: none; }
    .nav { flex-direction: row; justify-content: space-around; width: 100%; }
    .nav a { flex-direction: column; justify-content: center; gap: 3px; height: 52px; padding: 0 6px; min-width: 44px; font-size: 10.5px; }
    .nav a .nav-lbl { font-size: 10.5px; }
    .nav a:not([aria-current="page"]) .nav-lbl { display: none; }
    .nav a[aria-current="page"]::before { left: 50%; top: 2px; margin-left: -3px; margin-top: 0; }
    .nav-badge { position: absolute; top: 4px; left: 50%; margin-left: 6px; min-width: 16px; height: 16px; font-size: 10px; padding: 0 4px; }
    .contenu { padding-bottom: 110px; }
    .barre { height: 56px; gap: 10px; }
    .barre-titre span, .barre-verdict { display: none; }
    .lecture-seg { display: none; }
    .mat-ligne, .mat-entete { grid-template-columns: 110px minmax(0, 1fr); }
    .mat-taille, .mat-entete > :last-child { display: none; }
    .jour { grid-template-columns: 1fr; }
    .jour-tete { position: static; }
    .engage { grid-template-columns: 22px minmax(0, 1fr) 20px; }
    .engage .obs, .engage .histo { display: none; }
    .chaine { grid-template-columns: repeat(15, minmax(0, 1fr)); }
    .proto { bottom: calc(76px + env(safe-area-inset-bottom, 0px)); }
    .tiroir-titre { font-size: 27px; }
  }

  @media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: .01ms !important; animation-delay: 0ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
    .halo-reflet { display: none; }
    ::view-transition-old(vue), ::view-transition-new(vue) { animation: none; }
  }
  @media (forced-colors: active) {
    .poincon, .gemme { forced-color-adjust: none; }
  }
}

/* ======================================================================
   Application — ce que le prototype n'avait pas : la coquille rendue par
   le serveur (section Administration, compte, puce de démonstration,
   langues), l'accueil (connexion), les pages d'administration.
   ====================================================================== */
@layer components {
  /* ---------------------------------------------------------------- coquille rendue par le serveur */
  .rail-defile {
    display: flex; flex-direction: column; gap: 6px; flex: 1 1 auto; min-height: 0;
    margin: 0 -12px; padding: 0 12px; overflow-x: hidden; overflow-y: auto; scrollbar-width: none;
  }
  .rail-defile::-webkit-scrollbar { display: none; }
  .nav-section { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--filet); }
  .nav-titre { padding: 0 13px 6px; font-size: 11.5px; color: var(--plomb-3); white-space: nowrap; transition: opacity .25s ease; }
  :root[data-rail="replie"] .nav-titre { opacity: 0; }

  .rail-compte {
    display: grid; grid-template-columns: 30px minmax(0, 1fr) 34px; align-items: center; gap: 10px;
    padding: 7px 5px 7px 8px; border-radius: 14px; border: 1px solid var(--filet); background: rgb(12 23 55 / .45);
  }
  .rail-avatar {
    width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; flex: none;
    font: 600 11.5px/1 var(--font-ui); letter-spacing: .02em; color: #1b1304;
    background: linear-gradient(180deg, var(--or-vif), var(--or));
    box-shadow: 0 0 0 3px rgb(231 198 129 / .12);
  }
  .rail-compte-txt { min-width: 0; line-height: 1.3; }
  .rail-compte-txt b, .rail-compte-txt span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .rail-compte-txt b { font-size: 12.5px; font-weight: 550; color: var(--plomb); }
  .rail-compte-txt span { font-size: 11.5px; color: var(--plomb-3); }
  .rail-sortie { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; color: var(--plomb-3); transition: color .2s, background .2s; }
  .rail-sortie:hover { color: var(--plomb); background: rgb(34 49 86 / .5); }
  .rail-sortie svg { width: 17px; height: 17px; stroke-width: 1.6; }
  :root[data-rail="replie"] .rail-compte { grid-template-columns: 1fr; justify-items: center; gap: 6px; padding: 6px 0; border-color: transparent; background: none; }
  :root[data-rail="replie"] .rail-compte-txt { display: none; }

  .barre-titre b, .barre-titre span { overflow: hidden; text-overflow: ellipsis; }
  .barre-titre b { white-space: nowrap; }

  /* puce « Données de démonstration » : pointillés, comme la pastille des scénarios, hors cockpit */
  .puce-demo {
    display: inline-flex; align-items: center; gap: 7px; height: 28px; padding: 0 11px 0 9px;
    border-radius: 999px; border: 1px dashed rgb(179 186 207 / .38); background: rgb(8 16 44 / .5);
    color: var(--plomb-2); font-size: 12px; font-weight: 500; white-space: nowrap; cursor: help;
    transition: color .2s, border-color .2s;
  }
  .puce-demo:hover, .puce-demo:focus-visible { color: var(--plomb); border-color: rgb(231 198 129 / .5); }
  .puce-demo svg { width: 14px; height: 14px; color: var(--or); stroke-width: 1.8; flex: none; }
  /* la barre porte deux éléments de plus que le prototype (cette puce, les langues) :
     le libellé se resserre avec la largeur pour laisser le titre de la page lisible */
  .puce-demo-moyen, .puce-demo-court { display: none; }
  @media (max-width: 1599px) {
    .puce-demo-long { display: none; }
    .puce-demo-moyen { display: inline; }
    .recherche { min-width: 0; }
  }
  @media (max-width: 1439px) {
    .puce-demo-moyen { display: none; }
    .puce-demo-court { display: inline; }
  }

  /* sélecteur de langue */
  .langues { display: inline-flex; align-items: center; gap: 2px; padding: 3px; border-radius: 999px; border: 1px solid var(--filet-2); background: rgb(8 16 44 / .7); }
  .langues a {
    display: inline-grid; place-items: center; min-width: 30px; height: 26px; padding: 0 7px; border-radius: 999px;
    font: 600 11px/1 var(--font-ui); letter-spacing: .05em; color: var(--plomb-3); text-decoration: none; transition: color .2s, background .2s;
  }
  .langues a:hover { color: var(--plomb); }
  .langues a[aria-current="true"] { color: var(--or-vif); background: rgb(231 198 129 / .14); }

  /* sans JavaScript, la vue dit ce qu'elle aurait montré */
  .sans-js {
    display: grid; gap: 10px; margin-top: 32px; padding: 26px 24px; border-radius: var(--r-panel);
    border: 1px dashed rgb(231 198 129 / .3); background: radial-gradient(120% 140% at 0% 0%, rgb(231 198 129 / .07), transparent 60%);
  }
  .sans-js h1 { font-family: var(--font-voix); font-weight: 500; font-size: clamp(30px, 3vw, 40px); line-height: 1.05; }
  .sans-js p { color: var(--plomb-2); font-size: 14.5px; max-width: 70ch; }

  /* ---------------------------------------------------------------- accueil : connexion, mot de passe */
  .accueil { position: relative; isolation: isolate; min-height: 100dvh; display: grid; place-items: center; padding: 40px 16px; overflow: hidden; }
  .accueil::before {
    content: ""; position: absolute; inset: 0; z-index: -2;
    background: url("../img/voute-lapis.jpg") center 30% / cover no-repeat;
    opacity: .58; filter: saturate(1.08) brightness(.74);
  }
  .accueil::after {
    content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
    background:
      radial-gradient(ellipse 70% 46% at 50% 112%, var(--aube), transparent 70%),
      linear-gradient(180deg, rgb(5 13 43 / .40), rgb(5 13 43 / .18) 42%, rgb(5 13 43 / .78) 100%);
  }
  .accueil-carte {
    width: min(420px, 100%); display: grid; gap: 24px; padding: 32px 30px 24px; border-radius: 26px;
    background: linear-gradient(180deg, rgb(27 41 88 / .58), rgb(12 22 56 / .52));
    border: 1px solid var(--filet-2);
    box-shadow: inset 0 1px 0 rgb(250 231 179 / .07), 0 40px 90px -40px rgb(0 0 0 / .9);
    backdrop-filter: blur(18px) saturate(1.15);
  }
  .accueil-marque { display: grid; justify-items: center; gap: 8px; text-align: center; }
  .accueil-glyphe { position: relative; isolation: isolate; width: 84px; height: 84px; margin-bottom: 6px; }
  .accueil-glyphe::before {
    content: ""; position: absolute; inset: -38%; z-index: -1; border-radius: 50%;
    background: radial-gradient(circle, var(--halo-glow), transparent 64%); filter: blur(10px);
  }
  .accueil-glyphe svg { width: 100%; height: 100%; }
  .accueil-nom { font-family: var(--font-voix); font-size: 42px; font-weight: 600; line-height: .95; letter-spacing: .01em; color: var(--or-vif); }
  .accueil-sous { font-size: 13px; color: var(--plomb-3); }
  .accueil-titre { font-family: var(--font-voix); font-size: 27px; font-weight: 500; line-height: 1.1; text-align: center; text-wrap: balance; }
  .accueil-texte { margin-top: -14px; font-size: 13px; color: var(--plomb-2); text-align: center; }
  .accueil-pied { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 14px; padding-top: 16px; border-top: 1px solid var(--filet); font-size: 11.5px; color: var(--plomb-3); }
  .accueil-verset { font-family: var(--font-voix); font-style: italic; font-size: 14px; color: var(--plomb-2); }
  .accueil-erreur h2 { font-family: var(--font-voix); font-size: 28px; font-weight: 500; line-height: 1.1; text-align: center; text-wrap: balance; }
  .accueil-erreur .error { font-size: 13.5px; color: var(--plomb-2); text-align: center; overflow-wrap: anywhere; }
  .accueil-erreur .error strong { color: var(--plomb); font-weight: 550; }

  /* ---------------------------------------------------------------- formulaires et boutons */
  .formulaire { display: grid; gap: 18px; }
  .formulaire .input { display: grid; gap: 7px; }
  .formulaire .input > label, .etiquette { font-size: 12.5px; color: var(--plomb-2); }
  .formulaire .input.checkbox > label, .case { display: inline-flex; align-items: center; gap: 10px; font-size: 13.5px; color: var(--plomb); cursor: pointer; }
  .formulaire .error-message { font-size: 12px; color: var(--crit); }
  .formulaire .input.error .champ { border-color: rgb(250 104 106 / .6); }
  .formulaire input[type="checkbox"], .formulaire input[type="radio"] { width: 16px; height: 16px; accent-color: var(--or); flex: none; }

  .champ {
    width: 100%; height: 42px; padding: 0 14px; border-radius: 12px; border: 1px solid var(--filet-2);
    background: rgb(5 13 43 / .55); color: var(--plomb); font: 400 14px/1.4 var(--font-ui);
    transition: border-color .2s, box-shadow .2s, background .2s;
  }
  .champ::placeholder { color: var(--plomb-3); }
  .champ:hover { border-color: rgb(179 186 207 / .3); }
  .champ:focus { outline: none; border-color: rgb(231 198 129 / .6); box-shadow: 0 0 0 3px rgb(231 198 129 / .14); background: rgb(5 13 43 / .75); }
  .champ:-webkit-autofill { -webkit-text-fill-color: var(--plomb); caret-color: var(--plomb); box-shadow: 0 0 0 1000px #0a1433 inset; transition: background-color 9999s; }
  textarea.champ { height: auto; min-height: 96px; padding: 10px 14px; }
  select.champ { appearance: none; padding-right: 36px; cursor: pointer; background: rgb(5 13 43 / .55) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='none' stroke='%238791af' stroke-width='2' viewBox='0 0 24 24'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 13px center; }
  select.champ option { background: var(--voute-1); color: var(--plomb); }
  .champ-court { height: 36px; border-radius: 10px; font-size: 13px; }

  .btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 38px; padding: 0 16px;
    border-radius: 12px; border: 1px solid var(--filet-2); background: rgb(12 23 55 / .6);
    color: var(--plomb-2); font: 500 13px/1 var(--font-ui); text-decoration: none; white-space: nowrap; cursor: pointer;
    transition: border-color .2s, color .2s, background .2s, transform .45s var(--spring-soft), box-shadow .3s;
  }
  .btn:hover { border-color: rgb(231 198 129 / .45); color: var(--plomb); }
  .btn svg { width: 16px; height: 16px; stroke-width: 1.8; flex: none; }
  .btn-or {
    border-color: transparent; color: #1b1304; background: linear-gradient(180deg, var(--or-vif), var(--or));
    box-shadow: 0 10px 26px -12px rgb(231 198 129 / .6), inset 0 1px 0 rgb(255 255 255 / .35);
  }
  .btn-or:hover { border-color: transparent; color: #1b1304; transform: translateY(-1px); box-shadow: 0 14px 30px -12px rgb(231 198 129 / .75), inset 0 1px 0 rgb(255 255 255 / .4); }
  .btn-large { width: 100%; height: 44px; font-size: 14px; border-radius: 13px; }

  .lien { color: var(--or); text-decoration: none; font-weight: 500; }
  .lien:hover { color: var(--or-vif); text-decoration: underline; text-underline-offset: 3px; }
  .lien-danger { color: var(--crit); text-decoration: none; font-weight: 500; }
  .lien-danger:hover { color: #ff9091; text-decoration: underline; text-underline-offset: 3px; }
  .actions-ligne { display: inline-flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px 14px; }

  /* ---------------------------------------------------------------- administration */
  .adm-tete { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 16px 24px; padding-top: 32px; }
  .adm-tete h1 { font-family: var(--font-voix); font-weight: 500; font-size: clamp(32px, 3.2vw, 44px); line-height: 1.02; letter-spacing: -.01em; text-wrap: balance; }
  .adm-tete p { margin-top: 8px; color: var(--plomb-2); font-size: 14.5px; max-width: 72ch; }
  .adm-kicker { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 8px; font-size: 12.5px; color: var(--plomb-3); }
  .adm-kicker svg { width: 15px; height: 15px; color: var(--or); }
  .adm-actions { display: flex; flex-wrap: wrap; gap: 10px; }
  .adm-filtres { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 14px 18px; }
  .adm-note { display: flex; gap: 10px; align-items: flex-start; font-size: 12.5px; color: var(--plomb-3); line-height: 1.5; }
  .adm-note svg { width: 16px; height: 16px; color: var(--or); flex: none; margin-top: 1px; }
  .adm-note code, .panel code { font-family: var(--font-mono); font-size: .92em; color: var(--or-vif); }
  .adm-fiche { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 12px 28px; font-size: 13.5px; }
  .adm-fiche dt { color: var(--plomb-3); }
  .adm-fiche dd { margin: 0; color: var(--plomb); min-width: 0; overflow-wrap: anywhere; }
  .adm-fiche .chip { white-space: normal; height: auto; min-height: 24px; padding-block: 3px; line-height: 1.35; }
  .adm-choix { display: flex; align-items: flex-start; gap: 12px; padding: 14px 16px; border-radius: 14px; border: 1px solid var(--filet); background: rgb(12 23 55 / .4); cursor: pointer; transition: border-color .2s, background .2s; }
  .adm-choix:hover { border-color: var(--filet-2); background: rgb(21 35 71 / .55); }
  .adm-choix:has(input:checked) { border-color: rgb(231 198 129 / .45); background: linear-gradient(90deg, rgb(231 198 129 / .10), rgb(231 198 129 / .02)); }
  .adm-choix input { margin-top: 3px; }

  /* interrupteurs de la matrice des droits */
  .interrupteur { position: relative; display: inline-flex; align-items: center; cursor: pointer; }
  .interrupteur-piste { width: 38px; height: 22px; border-radius: 999px; background: rgb(179 186 207 / .16); box-shadow: inset 0 0 0 1px var(--filet-2); transition: background .25s ease, box-shadow .25s ease; }
  .interrupteur-bille { position: absolute; left: 3px; top: 3px; width: 16px; height: 16px; border-radius: 50%; background: var(--plomb-2); box-shadow: 0 2px 6px rgb(0 0 0 / .5); transition: transform .45s var(--spring-vif), background .25s ease; }
  .interrupteur input:checked ~ .interrupteur-piste { background: linear-gradient(180deg, var(--or-vif), var(--or)); box-shadow: none; }
  .interrupteur input:checked ~ .interrupteur-bille { transform: translateX(16px); background: #1b1304; }
  .interrupteur input:focus-visible ~ .interrupteur-piste { outline: 2px solid var(--or); outline-offset: 2px; }
  .interrupteur input:disabled ~ .interrupteur-piste, .interrupteur input:disabled ~ .interrupteur-bille { opacity: .45; }
  .interrupteur:has(input:disabled) { cursor: not-allowed; }

  /* ---------------------------------------------------------------- responsive des ajouts */
  @media (max-width: 1300px) {
    .puce-demo { padding: 0 8px; }
    .puce-demo .puce-demo-txt { display: none; }
  }
  @media (max-width: 760px) {
    .rail-defile { flex-direction: row; width: 100%; margin: 0; padding: 0; overflow: visible; }
    .nav-section { display: none; }
    .adm-tete { padding-top: 22px; }
    .adm-fiche { grid-template-columns: minmax(0, 1fr); gap: 3px; }
    .adm-fiche dd { margin-bottom: 10px; }
    .accueil-carte { padding: 26px 20px 20px; border-radius: 22px; }
  }
}

/* ======================================================================
   Bibliothèques assombries. Leurs feuilles ne sont dans aucune couche :
   ces surcharges n'en ont pas non plus, sinon elles perdraient toujours.
   ====================================================================== */

/* DataTables 2 */
div.dt-container { color: var(--plomb-2); font-size: 13px; }
div.dt-container .dt-search input,
div.dt-container .dt-input,
div.dt-container select.dt-input {
  height: 34px; padding: 0 12px; border-radius: 10px; border: 1px solid var(--filet-2);
  background: rgb(5 13 43 / .55); color: var(--plomb); font: 400 13px var(--font-ui);
}
div.dt-container select.dt-input { padding: 0 8px; }
div.dt-container select.dt-input option { background: var(--voute-1); color: var(--plomb); }
div.dt-container .dt-search input:focus,
div.dt-container .dt-input:focus { outline: none; border-color: rgb(231 198 129 / .6); box-shadow: 0 0 0 3px rgb(231 198 129 / .14); }
div.dt-container div.dt-layout-table > div.dt-layout-cell { overflow-x: auto; }
div.dt-container .dt-paging .dt-paging-button { border-radius: 9px; padding: .45em .85em; color: var(--plomb-2) !important; }
div.dt-container .dt-paging .dt-paging-button:hover { border: 1px solid var(--filet-2); background: rgb(34 49 86 / .6); color: var(--plomb) !important; }
div.dt-container .dt-paging .dt-paging-button:active { background: rgb(34 49 86 / .8); box-shadow: none; }
div.dt-container .dt-paging .dt-paging-button.current,
div.dt-container .dt-paging .dt-paging-button.current:hover { border: 1px solid rgb(231 198 129 / .35); background: rgb(231 198 129 / .14); color: var(--or-vif) !important; }
div.dt-container .dt-paging .dt-paging-button.disabled,
div.dt-container .dt-paging .dt-paging-button.disabled:hover,
div.dt-container .dt-paging .dt-paging-button.disabled:active { border: 1px solid transparent; background: transparent; color: rgb(135 145 175 / .45) !important; }
table.dataTable.tbl > thead > tr > th,
table.dataTable.tbl > thead > tr > td { padding: 0 12px 10px; border-bottom: 1px solid var(--filet-2); font-weight: 500; font-size: 12px; color: var(--plomb-3); }
table.dataTable.tbl > tbody > tr > td,
table.dataTable.tbl > tbody > tr > th { padding: 11px 12px; border-top: 0; border-bottom: 1px solid var(--filet); }
table.dataTable.tbl > tbody > tr:hover > * { box-shadow: inset 0 0 0 9999px rgb(34 49 86 / .28); }
table.dataTable.tbl thead > tr > th.dt-orderable-asc:hover,
table.dataTable.tbl thead > tr > th.dt-orderable-desc:hover { outline: none; color: var(--plomb); }
table.dataTable.tbl td.dt-empty { padding: 28px 12px; text-align: center; color: var(--plomb-3); }

/* Toastr : un verre sombre, la couleur du statut en filet à gauche */
#toast-container > div {
  opacity: 1; width: 340px; padding: 14px 16px 14px 50px; border-radius: 14px;
  background-color: rgb(10 19 50 / .96); background-position: 17px center;
  color: var(--plomb); font: 400 13.5px/1.45 var(--font-ui);
  border: 1px solid var(--filet-2); box-shadow: inset 3px 0 0 var(--or), 0 24px 50px -20px rgb(0 0 0 / .9);
}
#toast-container > div:hover { opacity: 1; box-shadow: inset 3px 0 0 var(--or), 0 26px 56px -20px rgb(0 0 0 / .95); }
#toast-container > .toast-success { background-color: rgb(10 19 50 / .96); box-shadow: inset 3px 0 0 var(--ok), 0 24px 50px -20px rgb(0 0 0 / .9); }
#toast-container > .toast-error { background-color: rgb(10 19 50 / .96); box-shadow: inset 3px 0 0 var(--crit), 0 24px 50px -20px rgb(0 0 0 / .9); }
#toast-container > .toast-warning { background-color: rgb(10 19 50 / .96); box-shadow: inset 3px 0 0 var(--warn), 0 24px 50px -20px rgb(0 0 0 / .9); }
#toast-container > .toast-info { background-color: rgb(10 19 50 / .96); box-shadow: inset 3px 0 0 var(--info), 0 24px 50px -20px rgb(0 0 0 / .9); }
#toast-container .toast-progress { height: 2px; background-color: var(--or); opacity: .55; }
#toast-container .toast-close-button { color: var(--plomb-2); text-shadow: none; opacity: .7; }
#toast-container .toast-close-button:hover { color: var(--plomb); opacity: 1; }

/* SweetAlert2 */
.swal2-container.swal2-backdrop-show { background: rgb(2 6 22 / .6); backdrop-filter: blur(3px); }
.swal2-popup {
  border-radius: 22px; border: 1px solid var(--filet-2); color: var(--plomb);
  background: linear-gradient(180deg, rgb(20 33 74), rgb(10 19 50));
  box-shadow: 0 40px 90px -30px rgb(0 0 0 / .9), inset 0 1px 0 rgb(250 231 179 / .06);
  font-family: var(--font-ui);
}
.swal2-popup .swal2-title { color: var(--plomb); font-family: var(--font-voix); font-weight: 500; font-size: 28px; line-height: 1.1; }
.swal2-popup .swal2-html-container { color: var(--plomb-2); font-size: 14px; }
.swal2-popup .swal2-styled { border-radius: 12px; font: 500 13.5px var(--font-ui); padding: .7em 1.3em; }
.swal2-popup .swal2-styled.swal2-confirm { background: var(--crit) !important; color: #2b0507 !important; }
.swal2-popup .swal2-styled.swal2-cancel { background: transparent !important; color: var(--plomb-2) !important; box-shadow: inset 0 0 0 1px var(--filet-2); }
.swal2-popup .swal2-styled:focus-visible { box-shadow: 0 0 0 3px rgb(231 198 129 / .35); }

/* Tom Select */
.ts-wrapper .ts-control,
.ts-wrapper.single .ts-control,
.ts-wrapper.single.input-active .ts-control {
  min-height: 42px; padding: 7px 12px; border-radius: 12px; border: 1px solid var(--filet-2);
  background: rgb(5 13 43 / .55); color: var(--plomb); box-shadow: none; font: 400 14px var(--font-ui);
}
.ts-wrapper.focus .ts-control { border-color: rgb(231 198 129 / .6); box-shadow: 0 0 0 3px rgb(231 198 129 / .14); }
.ts-wrapper .ts-control input { color: var(--plomb); font: 400 14px var(--font-ui); }
.ts-wrapper .ts-control input::placeholder { color: var(--plomb-3); }
.ts-wrapper.multi .ts-control > div,
.ts-wrapper.multi .ts-control > div.active { border: 0; border-radius: 8px; background: rgb(231 198 129 / .14); color: var(--or-vif); }
.ts-wrapper.plugin-remove_button .item .remove { border-left-color: rgb(231 198 129 / .25); }
.ts-wrapper.plugin-remove_button .item .remove:hover { background: rgb(231 198 129 / .12); }
.ts-wrapper.single .ts-control::after { border-color: var(--plomb-3) transparent transparent transparent; }
.ts-dropdown {
  margin-top: 6px; border-radius: 12px; border: 1px solid var(--filet-2); color: var(--plomb);
  background: rgb(10 19 50 / .98); box-shadow: 0 24px 50px -20px rgb(0 0 0 / .9); overflow: hidden;
}
.ts-dropdown .option, .ts-dropdown .no-results, .ts-dropdown .create { padding: 8px 12px; }
.ts-dropdown .active { background: rgb(231 198 129 / .14); color: var(--or-vif); }
.ts-dropdown .create, .ts-dropdown .no-results { color: var(--plomb-3); }