/* Operator Console — Archipel2bao
   Direction sombre. On revient au registre que Moussa preferait, mais execute
   autrement : le cliche a eviter, c'est le noir plat perce d'un seul accent
   fluo. Ici la profondeur vient de trois surfaces empilees, chacune posee sur
   la precedente par un filet de lumiere d'un pixel, et les degrades ne servent
   qu'a ce qui porte du sens : l'accent cliquable, la cle de segment, les
   jauges, l'ambiance des moments plein ecran.

   Les noms de jetons sont conserves depuis la version claire : les sept pages
   et leur JavaScript les referencent en dur. --marine designe donc l'accent
   cyan, --papier le fond, --carte la surface haute. Renommer coûterait sept
   fichiers pour rien.

   Aucune police externe : la CSP interdit les ressources tierces. */

:root {
  /* Trois surfaces, du fond vers la lumiere. Bleu ardoise, pas noir neutre :
     un gris pur a l'ecran parait sale, un fond legerement bleute parait tenu. */
  --papier:   #0a0f16;
  --pan-2:    #0e151f;
  --carte:    #131b26;
  --carte-2:  #182231;

  /* Trois encres. L'ancienne discrete (#7d8b9e) etait deja au plancher AA :
     5,00:1 sur carte, aucune marge. Avec une aurore plus presente elle tombait
     a 4,06:1. Ce n'est pas un arbitrage, c'est de l'arithmetique : pour un fond
     visible ET un texte lisible, l'encre doit monter.
     Mesures — sur l'aurore la plus forte / sur carte / sur papier nu :
       encre    11,97 · 14,72 · 16,33
       encre-2   6,70 ·  8,24 ·  9,14
       encre-3   4,98 ·  6,13 ·  6,80  */
  --encre:    #e8edf4;
  --encre-2:  #a8b4c4;
  --encre-3:  #8d9bae;

  --filet:    #222e3f;
  --filet-2:  #1a2432;

  /* L'accent unique, reserve a ce qui est cliquable. Cyan tenu, pas fluo :
     #22d3ee tirait vers le neon, celui-ci garde la famille sans crier. */
  --marine:   #38bdf8;
  --marine-2: #7dd3fc;
  --marine-w: rgba(56, 189, 248, .12);
  --marine-d: #0c4a6e;

  /* Violet : reserve a ce que la machine a produit (digest, filtrage auto). */
  --vio:      #a78bfa;
  --vio-w:    rgba(167, 139, 250, .12);

  /* Statuts : fonctionnels, jamais decoratifs. */
  --ok:       #34d399;
  --ok-w:     rgba(52, 211, 153, .12);
  --attente:  #fbbf24;
  --attente-w:rgba(251, 191, 36, .12);
  --refus:    #f87171;
  --refus-w:  rgba(248, 113, 113, .12);

  --r:        9px;
  --r-carte:  14px;
  --sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, "SF Mono", "Cascadia Mono", Menlo, Consolas, monospace;

  /* Le filet de lumiere qui pose une surface sur celle du dessous. */
  --relief: inset 0 1px 0 rgba(255, 255, 255, .045);
  --ombre:  0 1px 2px rgba(0, 0, 0, .4), 0 8px 24px rgba(0, 0, 0, .22);

  --nav: 232px;

  /* Courbes et durees. Le depot n'en avait aucun : durees nues, easing par
     defaut. Valeurs issues du skill motion-design. */
  --ease-out: cubic-bezier(.165, .84, .44, 1);
  --dur-2: 180ms;   /* petites surfaces */
  --dur-3: 220ms;   /* modales */
  --dur-4: 320ms;   /* digest, moments rares */

  /* Intensite de l'aurore. Discrete par defaut : c'est le cas des pages de
     travail, ou du texte se lit par-dessus. */
  --aurore: .70;
}

/* Pas de regle pour le digest : il s'ouvre derriere un voile a 84%, monter
   l'aurore n'y change que 3/255. Mesure, pas suppose. */

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--papier);
  color: var(--encre);
  font: 15px/1.55 var(--sans);
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
}

/* Aurore : trois voiles larges en deriv lente et desynchronisee. Les trois
   durees sont premieres entre elles, pour que les voiles ne se realignent
   jamais et que l'oeil ne percoive pas de boucle.
   Pas de `filter: blur()` : trois radial-gradients a chute 70% sont deja des
   flous, et le grain ci-dessous traite le banding. On evite une surface de
   rendu plein ecran permanente.
   z-index -1, et non 0 : un bloc non positionne (le formulaire de connexion)
   se peint SOUS les descendants positionnes a z-index 0. A z-index 0 l'aurore
   passait par-dessus le formulaire. */
body::before,
body::after {
  content: '';
  position: fixed;
  pointer-events: none;
  z-index: -1;
}
body::before {
  inset: -25% -10% auto -10%;
  height: 130vh;
  opacity: var(--aurore);
  background:
    radial-gradient(48% 60% at 22% 30%, rgba(56, 189, 248, .16), rgba(56, 189, 248, 0) 70%),
    radial-gradient(42% 55% at 62% 18%, rgba(167, 139, 250, .13), rgba(167, 139, 250, 0) 70%),
    radial-gradient(38% 48% at 85% 42%, rgba(45, 212, 191, .10), rgba(45, 212, 191, 0) 70%);
  animation: aurore 41s ease-in-out infinite alternate;
}

/* Le grain : c'est lui qui empeche les bandes. Un grand degrade doux sur fond
   sombre se decoupe en paliers visibles en 8 bits ; 3,5% de bruit les casse.
   SVG en data: URI, autorise par `img-src 'self' data:`. */
body::after {
  inset: 0;
  opacity: .035;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}

@keyframes aurore {
  0%   { transform: translate3d(-3%, 0, 0)    scale(1);    }
  50%  { transform: translate3d( 4%, 2%, 0)   scale(1.08); }
  100% { transform: translate3d(-2%, -1%, 0)  scale(1.03); }
}

/* Modale ouverte : son `backdrop-filter` recalculerait un flou plein ecran a
   chaque image tant que l'aurore bouge derriere. */
body:has(.voile.on)::before { animation-play-state: paused; }

a { color: var(--marine); text-decoration: none; }
a:hover { color: var(--marine-2); text-decoration: underline; }

:focus-visible {
  outline: 2px solid var(--marine);
  outline-offset: 2px;
  border-radius: 3px;
}

/* ── Chiffres et identifiants : registre monospace ──────────────────── */
.mono, .sc, .date, .kpi b, .siren, td.num {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
}

/* ── Ossature ───────────────────────────────────────────────────────── */
.lay { display: flex; min-height: 100vh; }

nav {
  width: var(--nav);
  flex: 0 0 var(--nav);
  background: linear-gradient(180deg, var(--pan-2), var(--papier) 60%);
  border-right: 1px solid var(--filet);
  padding: 22px 0 18px;
  display: flex;
  flex-direction: column;
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
}

.brand {
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -0.02em;
  padding: 0 20px 18px;
  line-height: 1.2;
}
.brand i {
  font-style: normal;
  background: linear-gradient(100deg, var(--marine), var(--vio));
  -webkit-background-clip: text; background-clip: text;
  color: var(--marine);
  -webkit-text-fill-color: transparent;
}
.brand span {
  display: block;
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--encre-3);
  margin-top: 5px;
  -webkit-text-fill-color: currentColor;
}

nav a.n {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 20px;
  font-size: 14px;
  color: var(--encre-2);
  border-left: 2px solid transparent;
  transition: color .15s, background .15s;
}
nav a.n:hover { color: var(--encre); background: rgba(255, 255, 255, .035); text-decoration: none; }
nav a.n.on {
  color: var(--encre);
  font-weight: 600;
  border-left-color: var(--marine);
  background: linear-gradient(90deg, var(--marine-w), transparent 75%);
}
nav a.n em { font-style: normal; font-size: 14px; width: 16px; color: var(--encre-3); }
nav a.n.on em { color: var(--marine); }
nav a.n.hide { display: none; }

.sep { height: 1px; background: var(--filet); margin: 16px 20px; }

.lab {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--encre-3);
  padding: 0 20px 7px;
}

#navsegs a.n em { font-size: 11px; }

nav .bas { margin-top: auto; padding: 14px 20px 0; border-top: 1px solid var(--filet); }
nav .bas b { display: block; font-size: 13px; font-weight: 600; margin-bottom: 8px; }

button, .btn {
  font: 500 13px var(--sans);
  border: 1px solid var(--filet);
  background: linear-gradient(180deg, var(--carte-2), var(--carte));
  color: var(--encre-2);
  border-radius: var(--r);
  padding: 8px 14px;
  cursor: pointer;
  box-shadow: var(--relief);
  transition: border-color .15s, color .15s, transform .12s;
}
button:hover, .btn:hover { border-color: #33445c; color: var(--encre); }
button:active { transform: translateY(1px); }

main {
  flex: 1;
  min-width: 0;
  padding: 30px 34px 70px;
  max-width: 1180px;
}

/* ── Titres ─────────────────────────────────────────────────────────── */
h1 {
  font-size: 28px;
  font-weight: 700;
  letter-spacing: -0.03em;
  margin: 0 0 5px;
  line-height: 1.15;
}
h1 b {
  font-weight: 700;
  background: linear-gradient(100deg, var(--marine), var(--vio));
  -webkit-background-clip: text; background-clip: text;
  color: var(--marine);
  -webkit-text-fill-color: transparent;
}
h2 {
  font-size: 12px;
  font-weight: 650;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--encre-3);
  margin: 32px 0 12px;
  padding-bottom: 7px;
  /* Le filet s'efface vers la droite : il souligne sans encadrer. */
  border-bottom: 1px solid transparent;
  border-image: linear-gradient(90deg, var(--filet), transparent) 1;
}
.sub { color: var(--encre-2); font-size: 14px; margin-bottom: 22px; max-width: 62ch; }

.fil { font-size: 12.5px; color: var(--encre-3); margin-bottom: 14px; }
.fil a { color: var(--encre-2); padding: 5px 0; }

/* ── Compteurs ──────────────────────────────────────────────────────── */
.kpis {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(132px, 1fr));
  gap: 10px;
}
.kpi {
  background: linear-gradient(180deg, var(--carte-2), var(--carte));
  border: 1px solid var(--filet);
  border-radius: var(--r-carte);
  padding: 14px 15px;
  display: block;
  position: relative;
  overflow: hidden;
  box-shadow: var(--relief);
  transition: transform .14s, border-color .14s;
}
/* La cle de couleur, en degrade descendant sur le bord haut. */
.kpi::after {
  content: '';
  position: absolute; left: 0; right: 0; top: 0; height: 2px;
  background: linear-gradient(90deg, var(--k, var(--marine)), transparent 85%);
}
.kpi:hover { transform: translateY(-2px); border-color: #33445c; text-decoration: none; }
.kpi b {
  display: block;
  font-size: 25px;
  font-weight: 650;
  letter-spacing: -0.03em;
  color: var(--encre);
  line-height: 1.1;
}
.kpi span {
  display: block;
  font-size: 11px;
  color: var(--encre-2);
  margin-top: 3px;
}

/* ── Cartes de segment ──────────────────────────────────────────────── */
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(268px, 1fr)); gap: 12px; }
.sg {
  background: linear-gradient(180deg, var(--carte-2), var(--carte));
  border: 1px solid var(--filet);
  border-radius: var(--r-carte);
  padding: 16px 17px;
  display: block;
  color: inherit;
  position: relative;
  overflow: hidden;
  box-shadow: var(--relief);
  transition: transform .14s, border-color .14s;
}
.sg::before {
  content: '';
  position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
  background: linear-gradient(180deg, var(--k, var(--marine)), transparent);
}
.sg:hover { transform: translateY(-2px); border-color: #33445c; text-decoration: none; }
.sg h3 { margin: 0 0 4px; font-size: 15.5px; font-weight: 650; letter-spacing: -0.01em; }
.sg p { margin: 0 0 13px; font-size: 12.5px; color: var(--encre-2); line-height: 1.45; }
.sg .ch { display: flex; gap: 10px; border-top: 1px solid var(--filet-2); padding-top: 10px; }
.sg .ch > div { flex: 1 1 0; min-width: 0; }
.sg .ch b {
  display: block; font-size: 16px; font-weight: 600;
  font-family: var(--mono); font-variant-numeric: tabular-nums;
}
.sg .ch span { font-size: 10px; color: var(--encre-3); white-space: nowrap; }

/* ── Fiches prospect ────────────────────────────────────────────────── */
.p {
  background: linear-gradient(180deg, var(--carte-2), var(--carte));
  border: 1px solid var(--filet);
  border-radius: var(--r-carte);
  padding: 15px 17px;
  margin-bottom: 10px;
  position: relative;
  overflow: hidden;
  box-shadow: var(--relief);
}
.p::before {
  content: '';
  position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
  background: linear-gradient(180deg, var(--k, var(--marine)), transparent 85%);
}
.p.cl { cursor: pointer; transition: transform .14s, border-color .14s; }
.p.cl:hover { border-color: #33445c; transform: translateY(-2px); }
.p.out { opacity: 0; transform: translateX(14px);
  transition: opacity .3s var(--ease-out), transform .3s var(--ease-out); }

.ph { display: flex; justify-content: space-between; align-items: flex-start; gap: 14px; }
.pn { font-size: 15.5px; font-weight: 640; letter-spacing: -0.01em; }
.pn a { color: inherit; padding: 4px 0; }
.pm { font-size: 12.5px; color: var(--encre-2); margin: 2px 0 7px; }
.ph .date { font-size: 11.5px; color: var(--encre-3); white-space: nowrap; }

.tag {
  display: inline-block;
  font-size: 11px;
  color: var(--encre-2);
  background: rgba(255, 255, 255, .05);
  border: 1px solid var(--filet-2);
  border-radius: 20px;
  padding: 2px 9px;
  margin: 0 4px 3px 0;
  white-space: nowrap;
}
.tag.k { background: var(--marine-w); border-color: rgba(56,189,248,.3); color: var(--marine-2); font-weight: 550; }
.tag.st { font-weight: 550; }
.tag.ok { background: var(--ok-w); border-color: rgba(52,211,153,.3); color: var(--ok); font-weight: 550; }
.tag.att { background: var(--attente-w); border-color: rgba(251,191,36,.3); color: var(--attente); font-weight: 550; }
.tag.non { background: var(--refus-w); border-color: rgba(248,113,113,.3); color: var(--refus); font-weight: 550; }

.sc {
  font-size: 22px;
  font-weight: 650;
  color: var(--encre);
  letter-spacing: -0.02em;
  white-space: nowrap;
}

.dt { font-size: 12.5px; color: var(--encre-2); margin-top: 9px; line-height: 1.5; }
.fi {
  font-size: 13px;
  background: rgba(0, 0, 0, .22);
  border: 1px solid var(--filet-2);
  border-radius: var(--r);
  padding: 11px 13px;
  margin-top: 10px;
  line-height: 1.55;
}
.fi.no { background: var(--refus-w); border-color: rgba(248,113,113,.25); }
.fi b { font-size: 11px; text-transform: uppercase; letter-spacing: 0.07em; color: var(--encre-3); }

/* La colonne de lecture : c'est ici qu'on juge un message. */
.msg {
  background: rgba(0, 0, 0, .22);
  border: 1px solid var(--filet-2);
  border-radius: var(--r);
  padding: 18px 22px;
  font-size: 14.5px;
  line-height: 1.7;
  white-space: pre-wrap;
  max-width: 68ch;
}

textarea {
  width: 100%;
  max-width: 68ch;
  min-height: 128px;
  background: rgba(0, 0, 0, .28);
  border: 1px solid var(--filet);
  border-radius: var(--r);
  color: var(--encre);
  font: 14px/1.65 var(--sans);
  padding: 12px 14px;
  margin-top: 9px;
  resize: vertical;
}
textarea:focus { border-color: var(--marine); }

input[type=text], input[type=password], input[type=email], input.q, select {
  width: 100%;
  background: rgba(0, 0, 0, .28);
  border: 1px solid var(--filet);
  border-radius: var(--r);
  color: var(--encre);
  font: 14px var(--sans);
  padding: 11px 13px;
}
input:focus, select:focus { border-color: var(--marine); }
input::placeholder { color: #5c6a7d; }

label {
  display: block;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--encre-3);
  margin: 14px 0 5px;
}

/* ── Actions ────────────────────────────────────────────────────────── */
.act { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; }
.act button { font-weight: 550; }
/* Le bouton principal est le seul objet plein de l'interface. */
button.go {
  background: linear-gradient(180deg, var(--marine), #0ea5e9);
  border-color: #0ea5e9;
  color: #05202e;
  font-weight: 650;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.28), 0 2px 10px rgba(56,189,248,.18);
}
button.go:hover { background: linear-gradient(180deg, var(--marine-2), var(--marine)); color: #05202e; border-color: var(--marine-2); }
button.no { color: var(--refus); }
button.no:hover { border-color: var(--refus); color: var(--refus); }
button[disabled] { opacity: .5; cursor: default; transform: none; }

/* ── Onglets ────────────────────────────────────────────────────────── */
.tab {
  display: flex;
  gap: 2px;
  flex-wrap: wrap;
  margin-bottom: 18px;
  border-bottom: 1px solid var(--filet);
}
.tab button {
  border: 0;
  border-bottom: 2px solid transparent;
  border-radius: 0;
  background: none;
  box-shadow: none;
  padding: 9px 14px;
  color: var(--encre-2);
}
.tab button:hover { color: var(--encre); background: rgba(255,255,255,.04); }
.tab button.on {
  color: var(--marine-2);
  font-weight: 640;
  border-bottom-color: var(--marine);
  background: linear-gradient(180deg, transparent, var(--marine-w));
}
.tab button b { font-family: var(--mono); font-size: 11.5px; margin-left: 5px; color: var(--encre-3); }

/* ── Panneaux et journal ────────────────────────────────────────────── */
.pan {
  background: linear-gradient(180deg, var(--carte-2), var(--carte));
  border: 1px solid var(--filet);
  border-radius: var(--r-carte);
  padding: 16px 18px;
  box-shadow: var(--relief);
}
.pan > .j:first-child { padding-top: 0; }
.pan > .j:last-child { padding-bottom: 0; }
.j { font-size: 12.5px; padding: 9px 0; border-bottom: 1px solid var(--filet-2); }
.j:last-child { border-bottom: 0; }
.j a { padding: 5px 0; }
.j b {
  font-size: 10px; font-weight: 650; letter-spacing: 0.08em;
  color: var(--encre-3); margin-right: 7px;
}
.j.r b { color: var(--refus); }
.j.m b { color: var(--attente); }
.j.e b { color: var(--ok); }
.j small { display: block; color: var(--encre-3); font-size: 11.5px; margin-top: 2px; }

.vide {
  color: var(--encre-3);
  font-size: 13.5px;
  padding: 34px 0;
  text-align: center;
}
.hint { font-size: 12.5px; color: var(--encre-3); margin-top: 16px; line-height: 1.6; }

/* ── Correspondance ─────────────────────────────────────────────────── */
.env {
  background: linear-gradient(180deg, var(--carte-2), var(--carte));
  border: 1px solid var(--filet);
  border-radius: var(--r-carte);
  margin-bottom: 10px;
  overflow: hidden;
  box-shadow: var(--relief);
}
.eh {
  padding: 11px 15px;
  border-bottom: 1px solid var(--filet-2);
  font-size: 13px;
  display: flex;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}
.eh b { font-weight: 620; }
.eh span { font-size: 11.5px; color: var(--encre-3); font-family: var(--mono); }
.eb { padding: 14px 16px; font-size: 13.5px; line-height: 1.6; }
.bloc {
  border-left: 2px solid var(--k, var(--filet));
  padding: 2px 0 2px 13px;
  margin: 10px 0;
  font-size: 13.5px;
  line-height: 1.6;
  white-space: pre-wrap;
}
.bloc b {
  display: block; font-size: 10.5px; text-transform: uppercase;
  letter-spacing: 0.08em; color: var(--encre-3); margin-bottom: 4px;
}

/* ── Grille a deux colonnes : le dossier ────────────────────────────── */
.grid2 { display: grid; grid-template-columns: minmax(0, 1fr) 306px; gap: 26px; align-items: start; }
.grid2 > * > h2:first-child, .grid2 > h2:first-child { margin-top: 0; }

/* ── Pages sans navigation laterale ─────────────────────────────────── */
.wrap { max-width: 1000px; margin: 0 auto; padding: 30px 26px 70px; }

.row { display: grid; gap: 14px; grid-template-columns: 1fr; }
@media (min-width: 640px) { .row { grid-template-columns: 1fr 1fr; } }

.avis {
  border-radius: var(--r);
  border-left: 2px solid var(--encre-3);
  padding: 11px 14px;
  font-size: 13px;
  margin-bottom: 16px;
  line-height: 1.5;
}
/* Digest : moment rare, une fois par session. Seul endroit ou la generosite
   est permise. Le decalage par carte est pose en ligne par le JS. */
.dg .c { animation: dg-entre var(--dur-4) var(--ease-out) both; }
@keyframes dg-entre {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}

.avis { transition: opacity var(--dur-2) var(--ease-out), transform var(--dur-2) var(--ease-out); }
.avis.entre { opacity: 0; transform: translateY(-4px); }
.avis.ok { background: var(--ok-w); border-left-color: var(--ok); color: var(--ok); }
.avis.err { background: var(--refus-w); border-left-color: var(--refus); color: var(--refus); }

input.code {
  font-family: var(--mono);
  font-size: 21px;
  letter-spacing: .45em;
  text-align: center;
  max-width: 240px;
  padding: 12px 0 12px .45em;
}

/* Jauge : une proportion se voit avant de se lire. */
.bar { height: 5px; background: rgba(0,0,0,.35); border-radius: 3px; overflow: hidden; }
.bar i {
  display: block; height: 100%; border-radius: 3px;
  background: var(--k, var(--marine));
  background: linear-gradient(90deg, color-mix(in srgb, var(--k, var(--marine)) 55%, transparent), var(--k, var(--marine)));
}

/* ── Modales ────────────────────────────────────────────────────────── */
/* `display: none` -> `grid` ne declenche aucune transition : un element sans
   style de depart rendu n'a rien a interpoler. On passe par `visibility`,
   dont le basculement est differe a la fin du fondu a la fermeture. */
.voile {
  position: fixed; inset: 0; z-index: 90;
  /* Pas de `backdrop-filter` : dans Chromium il gele la transition d'opacite
     de cet element (mesure : horloge d'animation bloquee a 0), et il forcait
     un recalcul de flou plein ecran a chaque image tant que l'aurore bougeait
     derriere. Le voile a 84% suffit a detacher la modale. */
  background: rgba(4, 8, 13, .84);
  display: none; place-items: center; padding: 20px;
  opacity: 0;
  /* `display` est une propriete discrete : sans `allow-discrete`, l'element
     repasse a `none` avant le premier pas du fondu et rien ne s'anime. */
  transition: opacity var(--dur-3) var(--ease-out), display var(--dur-3) allow-discrete;
}
.voile.on { display: grid; opacity: 1; }
/* Le style de depart de l'entree : sans lui, l'element n'a aucun style rendu
   avant d'apparaitre, donc rien a interpoler. */
@starting-style {
  .voile.on { opacity: 0; }
  .voile.on .modale { transform: scale(.95); }
}
.modale {
  transition: opacity var(--dur-3) var(--ease-out), transform var(--dur-3) var(--ease-out);
}
/* scale(.95), jamais scale(0) qui lit comme du synthetique. Centree, donc pas
   de transform-origin sur le declencheur. */
.voile:not(.on) .modale { opacity: 0; transform: scale(.95); }
/* Une modale qui porte une iframe (apercu de mail) : la mettre a l'echelle
   force une re-rasterisation de tout le document pendant 220 ms. */
.voile:not(.on) .modale.large { transform: none; }
.modale {
  background: linear-gradient(180deg, var(--carte-2), var(--carte));
  border-radius: var(--r-carte);
  border: 1px solid var(--filet);
  padding: 28px 30px;
  width: 100%;
  max-width: 460px;
  box-shadow: var(--relief), 0 24px 60px rgba(0, 0, 0, .6);
}
.modale h3 { margin: 0 0 6px; font-size: 19px; font-weight: 680; letter-spacing: -0.02em; }
.modale p { margin: 0 0 16px; font-size: 13.5px; color: var(--encre-2); line-height: 1.55; }

table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
th {
  text-align: left; font-size: 10px; font-weight: 650;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--encre-3);
  padding: 0 10px 8px 0; border-bottom: 1px solid var(--filet);
}
td { padding: 11px 10px 11px 0; border-bottom: 1px solid var(--filet-2); }
td.num, th.num { text-align: right; }
tr:last-child td { border-bottom: 0; }

/* En contraste force, le systeme neutralise les fonds : un texte dont le
   remplissage est transparent deviendrait invisible. On rend la couleur. */
@media (forced-colors: active) {
  h1 b, .brand i {
    -webkit-text-fill-color: currentColor;
    background: none;
    color: currentColor;
  }
}

/* « Plus doux, pas zero » : on garde les fondus, on retire ce qui deplace.
   `transition-property: opacity` est indispensable — sans lui, la valeur
   initiale `all` fait animer jusqu'aux largeurs sur un poste qui a demande
   MOINS de mouvement. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important;
      transition-property: opacity !important;
      transition-duration: 80ms !important; }
  .kpi:hover, .sg:hover, .p.cl:hover,
  .voile:not(.on) .modale, .avis.entre, .p.out { transform: none; }
}

/* ── Telephone ──────────────────────────────────────────────────────── */
@media (max-width: 820px) {
  .lay { flex-direction: column; }
  nav {
    width: auto; flex: none; height: auto; position: sticky; top: 0; z-index: 20;
    flex-direction: row; align-items: center; overflow-x: auto;
    padding: 0 6px; border-right: 0; border-bottom: 1px solid var(--filet);
    background: var(--pan-2);
  }
  .brand, .sep, .lab, nav .bas, #navsegs { display: none; }
  nav a.n {
    flex-direction: column; gap: 3px; font-size: 10px; padding: 9px 11px;
    border-left: 0; border-bottom: 2px solid transparent; white-space: nowrap;
  }
  nav a.n.on { border-left: 0; border-bottom-color: var(--marine); background: none; }
  main { padding: 20px 16px 60px; }
  .wrap { padding: 20px 16px 60px; }
  .grid2 { grid-template-columns: 1fr; gap: 20px; }
  h1 { font-size: 23px; }
}