/* =========================================================================
   LD Transport - kit de signaletique (base commune a tous les ecrans)
   Fichier en ASCII pur : les accents eventuels passent par \XXXX.
   Usage : <link rel="stylesheet" href="ld-signaletique.css">
   ========================================================================= */

:root {
  /* Fonds et textes */
  --ld-bg: #0E1420;          /* fond general des ecrans */
  --ld-panel: #151C29;       /* cartes, rangees */
  --ld-band: #13213A;        /* bandeaux, plaques emaillees (bleu nuit) */
  --ld-band-line: #23365A;   /* filet sous les bandeaux */
  --ld-screen: #07090D;      /* zone d'affichage des chiffres */
  --ld-fg: #F4F5F7;          /* texte principal / liseres blancs */
  --ld-mute: #A7B0C0;        /* texte secondaire */
  --ld-digit: #F5C400;       /* chiffres jaunes des afficheurs */
  --ld-info-bg: #E9ECF1;     /* bandeau d'info clair */
  --ld-info-fg: #13213A;
  --ld-ok: #2DBE6C;          /* temps reel OK */
  --ld-ko: #E5484D;          /* hors ligne */

  /* Marques */
  --ld-industries: #FF6A3D;
  --ld-transport: #2BB38A;
  --ld-energy: #FFB800;

  /* Modes */
  --ld-mode-metro: #13213A;
  --ld-mode-train: #1E5BB8;
  --ld-mode-gv: #C8102E;
  --ld-mode-fret: #6E5A3E;
  --ld-fret-band: #FFB800;

  --ld-font: 'Barlow Condensed', 'Roboto Condensed', 'Arial Narrow', 'Liberation Sans Narrow', system-ui, sans-serif;
  color-scheme: dark;
}

/* Centrage optique des lettres (Barlow Condensed descend un peu) */
.ld-ctr { display: block; line-height: 1; transform: translateY(-0.06em); }
@supports (text-box: trim-both cap alphabetic) {
  .ld-ctr { text-box: trim-both cap alphabetic; transform: none; }
}

/* -------------------------------------------------------------------------
   PLAQUE DE LIGNE : une seule piece, mode a gauche, ligne a droite.
   Taille pilotee par font-size : 1em = hauteur de la plaque.
   <span class="ld-plaque ld-metro" style="--ligne:#3BFF00;--encre:#0B1A12">
     <span class="ld-seg"><span class="ld-ctr">M</span></span>
     <span class="ld-seg"><span class="ld-ctr">A</span></span>
   </span>
   ------------------------------------------------------------------------- */
.ld-plaque {
  --ligne: #888; --encre: #0B1A12; --mode: var(--ld-mode-metro);
  display: inline-flex; flex: none; height: 1em; vertical-align: middle;
  border-radius: .22em; overflow: hidden;
  box-shadow: 0 0 0 .05em var(--ld-fg);
  margin: .05em;
  font-family: var(--ld-font); font-weight: 700;
}
.ld-seg { width: 1em; height: 1em; display: flex; align-items: center; justify-content: center; font-size: 1em; }
.ld-seg > .ld-ctr { font-size: .7em; }
.ld-seg > svg { width: .58em; height: .58em; }
.ld-plaque > .ld-seg:first-child { background: var(--mode); color: #FFFFFF; }
.ld-plaque > .ld-seg:last-child { background: var(--ligne); color: var(--encre); }

/* Variantes de mode : metro = M bleu nuit + couleur de ligne ;
   trains = lettre du mode sur sa couleur + numero sur blanc */
.ld-plaque.ld-metro { --mode: var(--ld-mode-metro); }
.ld-plaque.ld-train { --mode: var(--ld-mode-train); --ligne: #FFFFFF; --encre: var(--ld-mode-train); }
.ld-plaque.ld-fret { --mode: var(--ld-mode-fret); --ligne: #FFFFFF; --encre: var(--ld-mode-fret); border-radius: 0; }
.ld-plaque.ld-fret > .ld-seg:first-child { box-shadow: inset 0 -.1em 0 var(--ld-fret-band); }
.ld-plaque.ld-gv { --mode: var(--ld-mode-gv); --ligne: #FFFFFF; --encre: var(--ld-mode-gv); transform: skewX(-14deg); border-radius: .14em; margin: .05em .2em; }
.ld-plaque.ld-gv > .ld-seg { font-style: italic; }
.ld-plaque.ld-gv > .ld-seg:first-child { width: 1.2em; }
.ld-plaque.ld-gv > .ld-seg > .ld-ctr { transform: skewX(14deg); }
.ld-plaque.ld-gv > .ld-seg:first-child > .ld-ctr { font-size: .6em; }

/* Pictogramme de mode seul (sans ligne) */
.ld-mode { display: inline-flex; align-items: center; justify-content: center; width: 1em; height: 1em; border-radius: .22em;
  background: var(--ld-mode-metro); color: #FFFFFF; box-shadow: 0 0 0 .05em var(--ld-fg); margin: .05em; font-family: var(--ld-font); font-weight: 700; }
.ld-mode > .ld-ctr { font-size: .7em; }
.ld-mode.ld-train { background: var(--ld-mode-train); }
.ld-mode.ld-fret { background: var(--ld-mode-fret); border-radius: 0; box-shadow: 0 0 0 .05em var(--ld-fg), inset 0 -.1em 0 var(--ld-fret-band); }
.ld-mode.ld-gv { background: var(--ld-mode-gv); width: 1.2em; transform: skewX(-14deg); border-radius: .14em; font-style: italic; }
.ld-mode.ld-gv > .ld-ctr { transform: skewX(14deg); font-size: .6em; }

/* -------------------------------------------------------------------------
   Briques d'ecran
   ------------------------------------------------------------------------- */
.ld-blink { animation: ld-blink 1.2s ease-in-out infinite; }
@keyframes ld-blink { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
.ld-dot { display: inline-block; width: .6em; height: .6em; border-radius: 50%; background: var(--ld-ok); }
.ld-dot.off { background: var(--ld-ko); }
.ld-fit { display: block; overflow: hidden; white-space: nowrap; }
@media (prefers-reduced-motion: reduce) { .ld-blink { animation: none; } }