/* =====================================================================
   reachline.css — design system Reachline (16/09/2026)
   Un instrument d'écoute : nuit océan, signal cyan d'oscilloscope,
   ambre de mesure. Signature : la « ligne » — le trait horizontal qui
   traverse l'écran et le wordmark, comme une ligne de balayage.
   IBM Plex Sans (UI) + IBM Plex Mono (wordmark et valeurs réelles).
   ===================================================================== */

:root {
  --nuit: #0E1B2C;
  --nuit-2: #0A1422;
  --surface: #152638;
  --surface-2: #1B3049;
  --texte: #E9F0F7;
  --texte-doux: #9FB2C6;
  --texte-discret: #6E829A;
  --ligne: rgba(159, 178, 198, 0.16);
  --signal: #5FD4C4;
  --signal-fonce: #2E8D80;
  --mesure: #E8B75A;
  --alerte: #E8825A;
  --sans: 'IBM Plex Sans', system-ui, -apple-system, sans-serif;
  --mono: 'IBM Plex Mono', ui-monospace, 'SF Mono', monospace;
  --r: 12px;
}

*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--nuit);
  color: var(--texte);
  font-family: var(--sans);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--signal); text-decoration: none; }
a:focus-visible, button:focus-visible, input:focus-visible {
  outline: 2px solid var(--signal);
  outline-offset: 2px;
}

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

/* ------- Wordmark : la ligne traverse le mot ------- */
.wordmark {
  font-family: var(--mono);
  font-weight: 500;
  letter-spacing: -0.03em;
  color: var(--texte);
  display: inline-flex;
  align-items: center;
  gap: 0.38em;
  margin: 0;
}
.wordmark .trait {
  display: inline-block;
  width: 1.7em;
  height: 2px;
  background: var(--signal);
  border-radius: 1px;
  position: relative;
}

/* =====================================================================
   PAGE DE CONNEXION — pleine page, la ligne balaye l'écran
   ===================================================================== */

.rl-login {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background:
    radial-gradient(90rem 40rem at 50% -10%, #12233A 0%, var(--nuit) 55%),
    var(--nuit);
  position: relative;
  overflow: hidden;
}

/* La ligne de balayage : traverse tout l'écran derrière la carte,
   à la hauteur exacte du wordmark. Un seul moment de mouvement :
   une impulsion lente qui la parcourt. */
.rl-scan {
  position: absolute;
  left: 0; right: 0;
  top: calc(50% - 152px);
  height: 1px;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(95, 212, 196, 0.28) 18%,
    rgba(95, 212, 196, 0.28) 82%,
    transparent 100%);
}
.rl-scan::after {
  content: "";
  position: absolute;
  top: -1px;
  left: -12%;
  width: 12%;
  height: 3px;
  border-radius: 2px;
  background: linear-gradient(90deg, transparent, var(--signal));
  filter: drop-shadow(0 0 6px rgba(95, 212, 196, 0.65));
  animation: rl-sweep 7s ease-in-out infinite;
}
@keyframes rl-sweep {
  0%   { left: -12%; opacity: 0; }
  8%   { opacity: 1; }
  46%  { left: 100%; opacity: 1; }
  54%  { opacity: 0; }
  100% { left: 100%; opacity: 0; }
}

.rl-login-cadre {
  position: relative;
  width: min(92vw, 23rem);
  text-align: center;
}

.rl-login-mark {
  font-size: 2.1rem;
  justify-content: center;
  display: flex;
  margin-bottom: 2.4rem;
  /* Le wordmark est posé SUR la ligne de balayage : son fond masque
     la ligne autour des lettres, son trait la reprend. */
  background: var(--nuit);
  padding: 0.4rem 1rem;
  width: fit-content;
  margin-inline: auto;
}

.rl-login-form {
  background: var(--surface);
  border: 1px solid var(--ligne);
  border-radius: var(--r);
  padding: 1.8rem 1.7rem 1.6rem;
  text-align: left;
  box-shadow: 0 24px 60px rgba(4, 10, 18, 0.55);
}

.rl-label {
  display: block;
  font-size: 0.82rem;
  font-weight: 500;
  color: var(--texte-doux);
  margin: 0 0 0.35rem;
}
.rl-input + .rl-label { margin-top: 1.1rem; }

.rl-input {
  width: 100%;
  font-family: var(--sans);
  font-size: 1rem;
  color: var(--texte);
  background: var(--nuit-2);
  border: 1px solid var(--ligne);
  border-radius: 8px;
  padding: 0.7rem 0.85rem;
  transition: border-color 0.15s ease;
}
.rl-input:focus {
  border-color: var(--signal);
  outline: none;
  box-shadow: 0 0 0 3px rgba(95, 212, 196, 0.18);
}

.rl-bouton {
  width: 100%;
  margin-top: 1.5rem;
  font-family: var(--sans);
  font-size: 1rem;
  font-weight: 600;
  color: #06231F;
  background: var(--signal);
  border: none;
  border-radius: 8px;
  padding: 0.75rem;
  cursor: pointer;
  transition: background-color 0.15s ease;
}
.rl-bouton:hover { background: #7FE2D4; }

.rl-login-erreur {
  margin: 0 0 1.1rem;
  padding: 0.6rem 0.8rem;
  border: 1px solid rgba(232, 130, 90, 0.5);
  border-radius: 8px;
  color: var(--alerte);
  font-size: 0.9rem;
}

/* =====================================================================
   CONSOLE — la ligne devient la barre de navigation, et les valeurs
   mesurées sont en mono : ce qui est chiffré se lit comme un relevé.
   ===================================================================== */

.rl-app { background: var(--nuit); min-height: 100vh; }

.rl-barre {
  display: flex;
  align-items: center;
  gap: 2rem;
  padding: 0 clamp(1rem, 4vw, 2.5rem);
  height: 60px;
  background: var(--nuit-2);
  border-bottom: 1px solid var(--ligne);
  position: sticky;
  top: 0;
  z-index: 10;
}
.rl-barre-mark { font-size: 1.15rem; text-decoration: none; }
.rl-barre-mark:focus-visible { outline-offset: 4px; }
.rl-barre-mark .trait { width: 1.4em; }

.rl-nav { display: flex; gap: 1.6rem; margin-right: auto; }
.rl-nav a {
  color: var(--texte-doux);
  font-size: 0.95rem;
  padding: 0.35rem 0;
  border-bottom: 2px solid transparent;
}
.rl-nav a:hover { color: var(--texte); }
.rl-nav a.actif { color: var(--texte); border-bottom-color: var(--signal); }

.rl-sortie button {
  font-family: var(--sans);
  font-size: 0.9rem;
  color: var(--texte-doux);
  background: none;
  border: 1px solid var(--ligne);
  border-radius: 7px;
  padding: 0.4rem 0.8rem;
  cursor: pointer;
}
.rl-sortie button:hover { color: var(--texte); border-color: var(--texte-discret); }

.rl-contenu {
  max-width: 68rem;
  margin: 0 auto;
  padding: 2.4rem clamp(1rem, 4vw, 2.5rem) 5rem;
}

.rl-entete { margin-bottom: 2.2rem; }
.rl-entete h1 {
  font-size: 1.8rem;
  font-weight: 500;
  letter-spacing: -0.02em;
  margin: 0 0 0.4rem;
}
.rl-sous { color: var(--texte-doux); margin: 0; max-width: 62ch; }
.rl-fil { font-size: 0.9rem; color: var(--texte-discret); margin: 0 0 0.6rem; }
.rl-fil a { color: var(--texte-doux); }

.rl-avis {
  margin: 1.1rem 0 0;
  padding: 0.75rem 0.95rem;
  border-left: 2px solid var(--mesure);
  background: rgba(232, 183, 90, 0.07);
  color: var(--texte-doux);
  font-size: 0.92rem;
  max-width: 68ch;
}

/* ------- Mesures : la valeur porte le poids, pas une carte ------- */
.rl-mesures {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
  gap: 1px;
  background: var(--ligne);
  border: 1px solid var(--ligne);
  border-radius: var(--r);
  overflow: hidden;
  margin-bottom: 2.6rem;
}
.rl-mesure { background: var(--nuit-2); padding: 1.15rem 1.3rem; }
.rl-valeur {
  display: block;
  font-family: var(--mono);
  font-size: 1.9rem;
  line-height: 1.1;
  color: var(--texte);
}
.rl-sur { font-size: 1.05rem; color: var(--texte-discret); }
.rl-mesure-argent { color: var(--mesure); }
.rl-legende { display: block; margin-top: 0.35rem; font-size: 0.85rem; color: var(--texte-doux); }

.rl-bloc { margin-bottom: 2.6rem; }
.rl-bloc h2 {
  font-size: 1.05rem;
  font-weight: 600;
  margin: 0 0 1rem;
  padding-bottom: 0.55rem;
  border-bottom: 1px solid var(--ligne);
}

.rl-colonnes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));
  gap: 2rem;
}

/* ------- Tables ------- */
.rl-table { width: 100%; border-collapse: collapse; font-size: 0.94rem; }
.rl-table th, .rl-table td {
  text-align: left;
  padding: 0.7rem 0.8rem;
  border-bottom: 1px solid var(--ligne);
}
.rl-table thead th {
  font-size: 0.82rem;
  font-weight: 500;
  color: var(--texte-discret);
  border-bottom-color: var(--texte-discret);
}
.rl-table tbody tr:hover { background: var(--nuit-2); }
.rl-table tbody th { font-weight: 500; }
.rl-num { text-align: right; font-family: var(--mono); }
.rl-table thead th.rl-num { font-family: var(--sans); }

.rl-etat {
  display: inline-block;
  font-size: 0.78rem;
  padding: 0.12rem 0.5rem;
  border-radius: 999px;
  border: 1px solid;
}
.rl-etat-actif { color: var(--signal); border-color: var(--signal-fonce); }
.rl-etat-draft { color: var(--mesure); border-color: rgba(232, 183, 90, 0.45); }
.rl-version { font-family: var(--mono); font-size: 0.8rem; color: var(--texte-discret); margin-left: 0.4rem; }

/* ------- Listes d'objets ------- */
.rl-liste { list-style: none; margin: 0; padding: 0; }
.rl-liste li {
  padding: 0.9rem 0;
  border-bottom: 1px solid var(--ligne);
}
.rl-liste li:last-child { border-bottom: none; }
.rl-liste-titre { margin: 0 0 0.3rem; line-height: 1.45; }
.rl-liste-meta { margin: 0; font-size: 0.86rem; color: var(--texte-doux); }
/* La règle d'arrêt : marquée par la ligne, parce qu'elle est la limite
   que l'expérience ne franchit pas. */
.rl-liste-arret {
  margin: 0.4rem 0 0;
  padding-left: 0.7rem;
  border-left: 2px solid var(--mesure);
  font-size: 0.84rem;
  line-height: 1.5;
  color: var(--texte-discret);
  font-family: var(--mono);
}
.rl-jeton {
  font-family: var(--mono);
  font-size: 0.8rem;
  color: var(--signal);
  border: 1px solid var(--signal-fonce);
  border-radius: 4px;
  padding: 0.05rem 0.35rem;
  margin-right: 0.4rem;
}

.rl-vide {
  margin: 0;
  color: var(--texte-discret);
  font-size: 0.93rem;
  max-width: 66ch;
}
.rl-vide code {
  font-family: var(--mono);
  font-size: 0.86rem;
  color: var(--texte-doux);
  background: var(--nuit-2);
  padding: 0.1rem 0.35rem;
  border-radius: 4px;
}

/* ------- Contrat ------- */
.rl-defs { display: grid; grid-template-columns: max-content 1fr; gap: 0.5rem 1.4rem; margin: 0 0 1.5rem; }
.rl-defs dt { color: var(--texte-discret); font-size: 0.88rem; }
.rl-defs dd { margin: 0; }

.rl-politiques { list-style: none; margin: 0; padding: 0; display: grid; gap: 1rem; }
.rl-politiques h3 {
  font-family: var(--mono);
  font-size: 0.88rem;
  font-weight: 500;
  color: var(--signal);
  margin: 0 0 0.4rem;
}
/* Le contrat se lit comme un document, pas comme un dump : la clé en
   mono discret, la valeur en texte courant, le retrait par niveau. */
.rl-contrat {
  padding: 0.9rem 1.1rem;
  background: var(--nuit-2);
  border: 1px solid var(--ligne);
  border-radius: 8px;
  font-size: 0.88rem;
}
.rl-ct-ligne { padding: 0.18rem 0; line-height: 1.55; }
.rl-ct-n1 { margin-left: 1rem; }
.rl-ct-n2 { margin-left: 2rem; }
.rl-ct-n3, .rl-ct-n4, .rl-ct-n5 { margin-left: 3rem; }
.rl-ct-n1, .rl-ct-n2, .rl-ct-n3 { border-left: 1px solid var(--ligne); padding-left: 0.75rem; }
.rl-ct-cle {
  font-family: var(--mono);
  font-size: 0.82rem;
  color: var(--texte-discret);
  margin-right: 0.5rem;
}
.rl-ct-val { color: var(--texte-doux); }

@media (max-width: 640px) {
  .rl-barre { gap: 1rem; height: auto; padding-block: 0.7rem; flex-wrap: wrap; }
  .rl-nav { gap: 1rem; order: 3; width: 100%; }
  .rl-table { font-size: 0.86rem; }
}

/* File de validation : le risque se lit d'un coup d'œil. */
.rl-risque-faible { color: var(--texte-doux); }
.rl-risque-modere { color: var(--mesure); border-color: rgba(232, 183, 90, 0.45); }
.rl-risque-eleve,
.rl-risque-critique { color: var(--alerte); border-color: rgba(232, 130, 90, 0.45); }

.rl-filtres {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    margin-bottom: 1.6rem;
    flex-wrap: wrap;
}
.rl-filtres .rl-label { margin: 0; }
.rl-filtres select {
    background: var(--nuit-2);
    color: var(--texte);
    border: 1px solid var(--ligne);
    padding: 0.4rem 0.6rem;
    font-family: var(--sans);
    font-size: 0.9rem;
}

.rl-avis-erreur { border-left-color: #F2A0A0; color: #F2A0A0; }
.rl-actions { display: flex; gap: 0.8rem; margin-top: 1.2rem; }
.rl-bouton-discret {
    background: transparent;
    color: var(--texte-doux);
    border: 1px solid var(--ligne);
}
.rl-bouton-discret:hover { background: transparent; color: var(--texte); border-color: var(--texte-discret); }

/* Générateur : ce que l'assistance a comblé se voit d'un coup d'œil. */
.rl-extrapole {
    font-size: 0.75rem;
    color: var(--mesure);
    border: 1px solid rgba(232, 183, 90, 0.45);
    padding: 0.05rem 0.4rem;
    margin-left: 0.5rem;
    text-transform: none;
    letter-spacing: 0;
}

/* Fil de recadrage : deux voix, visuellement distinctes. */
.rl-tour { margin-bottom: 1.4rem; padding-left: 0.9rem; }
.rl-tour-operateur { border-left: 2px solid var(--signal); }
.rl-tour-assistance { border-left: 2px solid var(--ligne); color: var(--texte-doux); }
.rl-tour-texte { margin: 0.2rem 0 0; line-height: 1.55; }

/* Contrats : bascule de statut en ligne.
   Les contrôles natifs (select, input, button) héritent du thème CLAIR du
   navigateur — illisibles sur ce fond de nuit, et repérés à l'œil avant
   le push (consigne du 16/09 : regarder l'écran, pas seulement les tests). */
.rl-inline {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: center;
    margin-top: 0.6rem;
}

.rl-inline select,
.rl-inline input[type="text"] {
    background: var(--nuit-2);
    color: var(--texte);
    border: 1px solid var(--ligne);
    border-radius: 3px;
    padding: 0.35rem 0.5rem;
    font-family: var(--mono);
    font-size: 0.8rem;
}

.rl-inline input[type="text"] { flex: 1 1 16rem; min-width: 10rem; }

.rl-inline select:focus,
.rl-inline input[type="text"]:focus {
    outline: none;
    border-color: var(--signal);
}

.rl-inline button {
    background: transparent;
    color: var(--signal);
    border: 1px solid var(--signal-fonce);
    border-radius: 3px;
    padding: 0.35rem 0.9rem;
    font-family: var(--sans);
    font-size: 0.8rem;
    cursor: pointer;
}

.rl-inline button:hover { background: var(--signal-fonce); color: var(--nuit); }

/* L'écart YAML / base : visible sans être criard — il informe une
   décision, il n'annonce pas une panne. */
.rl-ecart { color: var(--mesure); }

/* =====================================================================
   Supervision — lecture au coup d'œil (26/09)
   Une LED dit l'état avant qu'on lise la ligne. Trois couleurs, pas
   plus : vert ça marche, ambre à regarder, rouge bloquant. Le gris
   existe aussi et il est important — « pas mesuré » n'est ni bon ni
   mauvais, et le peindre en rouge ferait courir pour rien.
   ===================================================================== */

.rl-led {
  display: inline-block;
  width: 0.62rem;
  height: 0.62rem;
  border-radius: 50%;
  margin-right: 0.55rem;
  flex: 0 0 auto;
  /* Le halo fait exister la LED sur fond sombre sans la rendre
     criarde — une pastille plate se lit mal à distance. */
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.04);
}
.rl-led-ok      { background: var(--signal);  box-shadow: 0 0 6px rgba(95, 212, 196, .55), 0 0 0 2px rgba(95,212,196,.12); }
.rl-led-attn    { background: var(--mesure);  box-shadow: 0 0 6px rgba(232, 183, 90, .55), 0 0 0 2px rgba(232,183,90,.12); }
.rl-led-ko      { background: var(--alerte);  box-shadow: 0 0 7px rgba(232, 130, 90, .65), 0 0 0 2px rgba(232,130,90,.14); }
/* Gris : NON MESURÉ. Ni bon ni mauvais — c'est l'absence de mesure,
   et la confondre avec une panne fait chercher un problème qui
   n'existe pas. */
.rl-led-inconnu { background: var(--texte-discret); opacity: .55; }

/* ------- Bandeau de tête : l'état global en une ligne ------- */
.rl-verdict {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.9rem 1.1rem;
  margin: 0 0 2rem;
  border-radius: var(--r);
  border: 1px solid var(--ligne);
  background: var(--surface);
  font-size: 0.98rem;
}
.rl-verdict-ok   { border-color: var(--signal-fonce); }
.rl-verdict-attn { border-color: rgba(232, 183, 90, 0.45); }
.rl-verdict-ko   { border-color: rgba(232, 130, 90, 0.55); }
.rl-verdict strong { font-weight: 600; }
.rl-verdict-detail { color: var(--texte-doux); font-size: 0.9rem; }

/* ------- Grille de voyants ------- */
.rl-voyants {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: 0.9rem;
  margin: 0 0 1.2rem;
}
.rl-voyant {
  display: flex;
  align-items: flex-start;
  gap: 0.1rem;
  padding: 0.85rem 1rem;
  border: 1px solid var(--ligne);
  border-radius: var(--r);
  background: var(--surface);
}
.rl-voyant-corps { min-width: 0; }
.rl-voyant-nom {
  margin: 0;
  font-size: 0.95rem;
  font-weight: 500;
  line-height: 1.35;
}
.rl-voyant-etat {
  margin: 0.12rem 0 0;
  font-size: 0.82rem;
  color: var(--texte-doux);
}
.rl-voyant-note {
  margin: 0.3rem 0 0;
  font-size: 0.78rem;
  color: var(--texte-discret);
  font-family: var(--mono);
  word-break: break-word;
}

/* ------- Chiffres : ce que l'organe produit ------- */
.rl-chiffres {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr));
  gap: 0.8rem;
  margin: 0.9rem 0 0;
}
.rl-chiffre {
  padding: 0.7rem 0.9rem;
  border: 1px solid var(--ligne);
  border-radius: var(--r);
  background: var(--nuit-2);
}
.rl-chiffre-valeur {
  display: block;
  font-family: var(--mono);
  font-size: 1.45rem;
  line-height: 1.2;
  color: var(--texte);
}
/* Un « — » gris vaut « pas mesuré ». Afficher 0 à sa place ferait lire
   « personne ne répond » là où rien n'est encore parti. */
.rl-chiffre-vide .rl-chiffre-valeur { color: var(--texte-discret); }
.rl-chiffre-libelle {
  display: block;
  margin-top: 0.15rem;
  font-size: 0.78rem;
  color: var(--texte-discret);
}

/* ------- Carte d'app, dans le Pilotage ------- */
.rl-carte-app {
  border: 1px solid var(--ligne);
  border-left: 3px solid var(--texte-discret);
  border-radius: var(--r);
  background: var(--surface);
  padding: 1.1rem 1.2rem;
  margin-bottom: 1.1rem;
}
.rl-carte-ok   { border-left-color: var(--signal); }
.rl-carte-attn { border-left-color: var(--mesure); }
.rl-carte-ko   { border-left-color: var(--alerte); }
.rl-carte-tete {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}
.rl-carte-nom {
  margin: 0;
  font-family: var(--mono);
  font-size: 1.05rem;
  display: flex;
  align-items: center;
}

/* ------- Alertes avec leur geste ------- */
.rl-alerte {
  display: flex;
  gap: 0.1rem;
  padding: 0.85rem 1rem;
  border: 1px solid var(--ligne);
  border-radius: var(--r);
  background: var(--surface);
  margin-bottom: 0.7rem;
}
.rl-alerte-ko   { border-color: rgba(232, 130, 90, 0.45); }
.rl-alerte-attn { border-color: rgba(232, 183, 90, 0.35); }
.rl-alerte-corps { min-width: 0; }
.rl-alerte-constat { margin: 0; font-size: 0.95rem; }
/* Le geste est ce qui distingue une alerte utile d'un reproche. */
.rl-alerte-geste {
  margin: 0.3rem 0 0;
  font-size: 0.85rem;
  color: var(--texte-doux);
}

/* ------- Actions directes dans la file (26/09) ------- */
/* Valider et refuser en UN clic : passer par l'écran de lecture pour un
   oui évident coûtait deux pages, et une file qu'on traite lentement
   est une file qu'on ne traite pas. Éditer, lui, renvoie à l'écran —
   corriger demande de lire. */
.rl-actions { white-space: nowrap; }
.rl-actions form { display: inline; }
.rl-btn {
  display: inline-block;
  font-family: var(--sans);
  font-size: 0.82rem;
  padding: 0.28rem 0.7rem;
  margin-right: 0.3rem;
  border-radius: 6px;
  border: 1px solid var(--ligne);
  background: transparent;
  color: var(--texte-doux);
  cursor: pointer;
  transition: border-color .12s, color .12s;
}
.rl-btn:hover { border-color: var(--texte-doux); color: var(--texte); }
.rl-btn-ok { color: var(--signal); border-color: var(--signal-fonce); }
.rl-btn-ok:hover { background: rgba(95, 212, 196, .1); }
.rl-btn-ko { color: var(--alerte); border-color: rgba(232, 130, 90, .4); }
.rl-btn-ko:hover { background: rgba(232, 130, 90, .1); }
.rl-btn-neutre { text-decoration: none; }

/* ------- Relance (05/10) : ce qui attend une décision ne dort plus ------- */
.rl-toast {
  position: fixed;
  right: 1.25rem;
  bottom: 1.25rem;
  z-index: 50;
  display: flex;
  align-items: center;
  gap: 1rem;
  max-width: min(34rem, calc(100vw - 2rem));
  padding: 0.85rem 0.9rem 0.85rem 1.1rem;
  background: var(--surface);
  border: 1px solid var(--ligne);
  border-left: 3px solid var(--mesure);
  border-radius: var(--r);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.35);
  color: var(--texte-doux);
  font-size: 0.9rem;
  line-height: 1.45;
  animation: rl-toast-entree 0.25s ease-out;
}
.rl-toast-texte { margin: 0; }
.rl-toast-texte strong { color: var(--texte); font-weight: 600; }
.rl-toast-lien {
  flex: none;
  padding: 0.45rem 0.8rem;
  border-radius: 8px;
  background: var(--mesure);
  color: var(--nuit);
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
}
.rl-toast-lien:hover { filter: brightness(1.08); }
.rl-toast-fermer {
  flex: none;
  background: transparent;
  border: 0;
  color: var(--texte-discret);
  font-size: 1.2rem;
  line-height: 1;
  padding: 0.2rem 0.3rem;
  cursor: pointer;
}
.rl-toast-fermer:hover { color: var(--texte); }
@keyframes rl-toast-entree {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: none; }
}
@media (max-width: 560px) {
  .rl-toast { left: 1rem; right: 1rem; bottom: 1rem; flex-wrap: wrap; }
}
@media (prefers-reduced-motion: reduce) { .rl-toast { animation: none; } }

/* ------- File : une carte par décision (05/10) ------- */
.rl-decisions { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.1rem; max-width: 52rem; }
.rl-decision {
  background: var(--surface);
  border: 1px solid var(--ligne);
  border-radius: var(--r);
  padding: 1.2rem 1.35rem 1.1rem;
}
.rl-decision-tete {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem;
  margin: 0 0 0.55rem; color: var(--texte-discret); font-size: 0.84rem;
}
.rl-decision-age { margin-left: auto; color: var(--mesure); }
.rl-decision-action { margin: 0 0 0.9rem; font-size: 1.12rem; font-weight: 600; line-height: 1.4; color: var(--texte); }
.rl-decision-corps {
  display: grid; grid-template-columns: 8.5rem 1fr; gap: 0.5rem 1rem;
  margin: 0 0 1.1rem; font-size: 0.92rem; line-height: 1.5;
}
.rl-decision-corps dt { color: var(--texte-discret); font-weight: 500; }
.rl-decision-corps dd { margin: 0; color: var(--texte-doux); }
.rl-decision-corps .rl-dt-ok { color: var(--signal); }
.rl-decision-corps .rl-dt-ko { color: var(--alerte); }
.rl-decision-gestes { display: flex; flex-wrap: wrap; gap: 0.6rem; justify-content: flex-end; }
.rl-decision-gestes form { margin: 0; }
/* Mise en route (11/10) : une consigne, pas une décision — liseré
   ambre pour qu'on ne la confonde pas avec une carte Valider/Refuser. */
.rl-decision-mise-en-route { border-left: 3px solid var(--mesure); }
.rl-etiquette-mise-en-route { color: var(--mesure); font-weight: 600; letter-spacing: 0.02em; }
.rl-etapes { margin: 0; padding-left: 1.2rem; }
.rl-etapes li { margin-bottom: 0.3rem; }
/* Liste de contrôle Lemlist (11/10) : la panne a sa propre couleur,
   discrète — elle ne doit pas se lire comme un manque. */
.rl-controles { margin: 0; padding: 0; list-style: none; }
.rl-controle { margin-bottom: 0.25rem; }
.rl-controle-marque { display: inline-block; width: 1.1rem; font-weight: 700; }
.rl-controle-ok .rl-controle-marque { color: var(--signal); }
.rl-controle-ko .rl-controle-marque { color: var(--alerte); }
.rl-controle-panne .rl-controle-marque,
.rl-controle-panne em { color: var(--texte-discret); }
.rl-controle-detail { color: var(--texte-discret); font-size: 0.85em; }
@media (max-width: 560px) {
  .rl-decision-corps { grid-template-columns: 1fr; gap: 0.15rem; }
  .rl-decision-corps dd { margin-bottom: 0.5rem; }
  .rl-decision-age { margin-left: 0; }
  .rl-decision-gestes { justify-content: stretch; }
}

/* ------- Branchement d'une app (18/10) ------- */
.rl-branchement td, .rl-branchement th { vertical-align: top; }
.rl-branche-detail { font-size: 0.85rem; color: var(--texte-doux); }
.rl-branche-ok { color: var(--signal); border-color: var(--signal-fonce); }
.rl-branche-coupe { color: var(--mesure); border-color: rgba(232, 183, 90, 0.45); }
.rl-branche-manque { color: var(--alerte); border-color: rgba(232, 130, 90, 0.45); }
.rl-branchement th, .rl-branche-detail { overflow-wrap: anywhere; }


/* =====================================================================
   Parcours opérateur — priorité à l'action (29/10/2026)
   ===================================================================== */
.rl-nav { align-items: center; }
.rl-nav-compte { display:inline-flex; min-width:1.35rem; height:1.35rem; padding:0 .35rem; align-items:center; justify-content:center; border-radius:999px; background:var(--ambre, #eab85d); color:#091522; font:500 .72rem/1 "IBM Plex Mono", monospace; }
.rl-nav-plus { position:relative; color:var(--texte-secondaire, #93a1b5); }
.rl-nav-plus > summary { cursor:pointer; list-style:none; padding:.55rem .35rem; white-space:nowrap; }
.rl-nav-plus > summary::-webkit-details-marker { display:none; }
.rl-nav-plus > summary::after { content:"⌄"; margin-left:.35rem; }
.rl-nav-menu { position:absolute; z-index:20; right:0; top:calc(100% + .45rem); min-width:14rem; padding:.5rem; border:1px solid var(--bord, #26384b); border-radius:.55rem; background:#0b1828; box-shadow:0 18px 45px rgba(0,0,0,.35); }
.rl-nav-menu a { display:block; padding:.65rem .75rem; border-radius:.35rem; white-space:nowrap; }
.rl-nav-menu a:hover { background:#12253a; }

.rl-entete-action,.rl-bloc-entete,.rl-priorite,.rl-resultats-entete,.rl-cible header { display:flex; align-items:flex-start; justify-content:space-between; gap:1.25rem; }
.rl-sur-titre { margin:0 0 .35rem; color:var(--signal, #58d5c3); font:500 .72rem/1.2 "IBM Plex Mono", monospace; letter-spacing:.09em; text-transform:uppercase; }
.rl-btn-primaire { background:var(--signal, #58d5c3); border-color:var(--signal, #58d5c3); color:#07131f; font-weight:600; }
.rl-priorite { margin:0 0 2rem; padding:1.25rem 1.4rem; border:1px solid rgba(234,184,93,.45); border-left:3px solid var(--ambre, #eab85d); border-radius:.65rem; background:rgba(234,184,93,.06); }
.rl-priorite h2,.rl-priorite p { margin:.2rem 0; }
.rl-priorite-label { color:var(--ambre, #eab85d); font:500 .72rem "IBM Plex Mono", monospace; text-transform:uppercase; letter-spacing:.08em; }
.rl-priorite-ok { border-color:rgba(88,213,195,.35); border-left-color:var(--signal, #58d5c3); background:rgba(88,213,195,.05); }
.rl-details-secondaire > summary { cursor:pointer; color:var(--texte-secondaire, #93a1b5); font-weight:500; }
.rl-details-secondaire[open] > summary { margin-bottom:1.5rem; }
.rl-table-scroll { overflow-x:auto; }

.rl-etapes-file { display:grid; grid-template-columns:repeat(3,1fr); gap:.75rem; margin:0 0 2rem; }
.rl-etapes-file a { display:flex; align-items:center; gap:.65rem; padding:.85rem 1rem; border:1px solid var(--bord, #26384b); border-radius:.5rem; color:var(--texte, #d9e2ec); text-decoration:none; background:rgba(255,255,255,.015); }
.rl-etapes-file a:hover { border-color:var(--signal, #58d5c3); }
.rl-etapes-file span { display:inline-flex; align-items:center; justify-content:center; width:1.55rem; height:1.55rem; border-radius:50%; background:#173044; color:var(--signal, #58d5c3); font:500 .75rem "IBM Plex Mono", monospace; }
.rl-file-section { scroll-margin-top:5rem; }
.rl-file-section > .rl-bloc-entete { padding-bottom:1rem; border-bottom:1px solid var(--bord, #26384b); }
.rl-file-section > .rl-bloc-entete h2 { margin:.1rem 0; }
.rl-file-section > .rl-bloc-entete .rl-sous { margin:.25rem 0 0; }
.rl-compte-section { min-width:2.25rem; padding:.35rem .55rem; border:1px solid var(--bord, #26384b); border-radius:999px; text-align:center; font-family:"IBM Plex Mono", monospace; }

.rl-filtres-cibles { display:grid; grid-template-columns:minmax(15rem,2fr) repeat(3,minmax(9rem,1fr)) auto auto; align-items:end; gap:.75rem; }
.rl-filtres-cibles > div { min-width:0; }
.rl-filtres-cibles input,.rl-filtres-cibles select { width:100%; }
.rl-resultats-entete { margin:1.5rem 0 .8rem; align-items:center; }
.rl-resultats-entete p { margin:0; }
.rl-grille-cibles { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1rem; }
.rl-cible { padding:1.15rem 1.25rem; border:1px solid var(--bord, #26384b); border-radius:.6rem; background:rgba(255,255,255,.018); }
.rl-cible h2 { margin:0; font-size:1.05rem; }
.rl-domaine,.rl-cible-meta { margin:.2rem 0 0; color:var(--texte-secondaire, #93a1b5); }
.rl-domaine { font-family:"IBM Plex Mono", monospace; font-size:.8rem; }
.rl-cible-decisions { margin-top:1rem; padding-top:.8rem; border-top:1px solid var(--bord, #26384b); }
.rl-cible-decisions p { margin:.6rem 0; }
.rl-attention { color:var(--ambre, #eab85d); }
.rl-vide-large { grid-column:1/-1; padding:3rem; text-align:center; border:1px dashed var(--bord, #26384b); border-radius:.6rem; }

@media (max-width: 1050px) {
  .rl-filtres-cibles { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .rl-champ-recherche { grid-column:1/-1; }
}
@media (max-width: 760px) {
  .rl-nav-plus { width:100%; }
  .rl-nav-menu { position:static; margin-top:.35rem; box-shadow:none; }
  .rl-entete-action,.rl-priorite,.rl-bloc-entete { flex-direction:column; }
  .rl-etapes-file,.rl-grille-cibles,.rl-filtres-cibles { grid-template-columns:1fr; }
  .rl-champ-recherche { grid-column:auto; }
}

.rl-visually-hidden { position:absolute !important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }