/* ============================================================
   Rail Horizon — Design system (v1.3)
   Direction : sombre, sobre, lisible (minimalisme « Swiss » + suivi temps réel).
   Recommandations : ui-ux-pro-max (Logistics/Transport · Dark Mode OLED · Real-Time Monitoring).
   Palette : bleu « suivi » #2563EB · orange « signal » #F97316 · vert « en ligne » #22C55E
   Polices : Fira Sans (texte) + Fira Code (chiffres, coordonnées, identifiants) — auto-hébergées.
   Règles : contraste ≥ 4,5:1 · cibles tactiles ≥ 44 px · focus visible · mouvement réduit respecté.
   Thèmes : sombre (défaut) et clair — html[data-theme="light"] (bouton dans l'en-tête, choix mémorisé). L'échelle Tailwind « slate »
   est pilotée par les variables --s-XXX (canaux RGB) : le thème clair inverse l'échelle, les pages existantes s'adaptent seules.
   ============================================================ */

:root {
  /* Accents (texte) : versions claires pour le fond sombre, plus profondes en thème clair */
  --rh-acc-amber: #f59e0b; --rh-acc-red: #f87171; --rh-acc-violet: #a78bfa; --rh-acc-cyan: #22d3ee; --rh-acc-green: #10b981;
  /* Échelle « slate » (canaux RGB, utilisés par la config Tailwind de head.php) — thème sombre */
  --s-50: 248 250 252; --s-100: 241 245 249; --s-200: 226 232 240; --s-300: 203 213 225; --s-400: 154 168 189; --s-500: 123 138 163;
  --s-600: 74 88 114;  --s-700: 42 54 80;   --s-800: 25 33 52;    --s-900: 15 23 42;    --s-950: 10 16 32;
  /* Surfaces */
  --rh-bg:        #0a1020;
  --rh-surface:   #0f172a;
  --rh-card:      #192134;
  --rh-card-hi:   #212c44;
  --rh-border:    rgba(255, 255, 255, .08);
  --rh-border-hi: rgba(255, 255, 255, .16);
  /* Texte */
  --rh-text:      #f1f5f9;
  --rh-text-2:    #cbd5e1;
  --rh-muted:     #9aa8bd;
  /* Marque et états */
  --rh-primary:   #2563eb;
  --rh-primary-hi:#3b82f6;
  --rh-link:      #60a5fa;
  --rh-signal:    #f97316;
  --rh-online:    #22c55e;
  --rh-danger:    #ef4444;
  /* Forme et mouvement */
  --rh-radius:    14px;
  --rh-radius-sm: 10px;
  --rh-ease:      cubic-bezier(.2, .7, .2, 1);
  --rh-shadow:    0 10px 30px rgba(2, 6, 23, .45);
}

/* ── Base ──────────────────────────────────────────────────── */
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  font-family: 'Fira Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  background: var(--rh-bg);
  color: var(--rh-text);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
::selection { background: rgba(59, 130, 246, .35); color: #fff; }
h1, h2, h3 { letter-spacing: -.015em; text-wrap: balance; }
p { text-wrap: pretty; }
.font-data, .rh-data { font-family: 'Fira Code', ui-monospace, 'Cascadia Code', monospace; font-variant-numeric: tabular-nums; }

/* Focus clavier toujours visible */
:focus-visible { outline: 2px solid var(--rh-link); outline-offset: 2px; border-radius: 6px; }
input:focus-visible, select:focus-visible, textarea:focus-visible { outline-offset: 0; }

/* Lien d'évitement (accessibilité) */
.rh-skip {
  position: fixed; left: 12px; top: -60px; z-index: 100000;
  background: var(--rh-primary); color: #fff; padding: 10px 16px; border-radius: var(--rh-radius-sm);
  font-weight: 600; transition: top .2s var(--rh-ease);
}
.rh-skip:focus { top: 12px; }

/* ── Navigation ───────────────────────────────────────────── */
.rh-nav {
  position: sticky; top: 0; z-index: 50;
  background: rgba(10, 16, 32, .82);
  -webkit-backdrop-filter: saturate(140%) blur(14px); backdrop-filter: saturate(140%) blur(14px);
  border-bottom: 1px solid var(--rh-border);
}
.rh-nav-inner { max-width: 72rem; margin: 0 auto; padding: 0 1rem; height: 4rem; display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.rh-nav-links { display: flex; align-items: center; gap: .25rem; }
.rh-nav-link {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 .85rem; border-radius: var(--rh-radius-sm);
  color: var(--rh-text-2); font-size: .92rem; font-weight: 500; transition: color .15s, background .15s; cursor: pointer;
}
.rh-nav-link:hover { color: #fff; background: rgba(255, 255, 255, .06); }

.rh-nav-link.is-active { color: #fff; background: rgba(255, 255, 255, .07); }
/* Le groupe de gauche (logo + fil d'Ariane) rétrécit ; le groupe de droite (liens, compte) ne bouge jamais */
.rh-nav-inner > div:first-child { flex: 1 1 auto; min-width: 0; }
.rh-nav-links { flex-shrink: 0; }
.rh-logo-mark { white-space: nowrap; }
.rh-crumbs { display: none; align-items: center; list-style: none; margin: 0; padding: 0; min-width: 0; font-size: .85rem; }
@media (min-width: 640px) { .rh-crumbs { display: flex; } }
.rh-crumbs { flex: 1 1 auto; overflow: hidden; }
.rh-crumb-item, .rh-crumb-current { display: inline-flex; align-items: center; gap: .35rem; min-width: 0; }
.rh-crumb-item { display: none; flex: 0 1 auto; }                 /* niveaux intermédiaires : très grands écrans seulement */
.rh-crumb-item:first-child { display: inline-flex; flex-shrink: 0; }   /* 1er niveau (ex. « Véhicules ») toujours affiché */
@media (min-width: 1280px) { .rh-crumb-item { display: inline-flex; } }
.rh-crumb-current { flex: 1 1 0; min-width: 6rem; }               /* page courante : PRIORITÉ, prend la place restante, coupée par « … » */
.rh-crumb { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 11rem; }
.rh-crumbs i { font-size: .6rem; color: var(--rh-muted); }
.rh-crumb-current { color: #fff; font-weight: 500; }
.rh-crumb-current span { display: block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rh-menu-btn { width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center; border-radius: var(--rh-radius-sm);
  color: var(--rh-text); background: rgba(255, 255, 255, .05); border: 1px solid var(--rh-border-hi); cursor: pointer; }
.rh-menu-btn:hover { background: rgba(255, 255, 255, .1); }
.rh-mobile-panel { border-top: 1px solid var(--rh-border); background: rgba(10, 16, 32, .97); padding: .5rem 1rem 1rem; }
.rh-mobile-panel[hidden] { display: none; }
.rh-mobile-link { display: flex; align-items: center; min-height: 48px; padding: 0 .5rem; color: var(--rh-text-2); font-weight: 500; border-radius: 8px; }
.rh-mobile-link:hover, .rh-mobile-link.is-active { color: #fff; background: rgba(255, 255, 255, .06); }
.rh-foot-link { display: inline-flex; align-items: center; min-height: 36px; }
.rh-foot-link:hover { color: #fff; }

/* ── Boutons ──────────────────────────────────────────────── */
.rh-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  min-height: 44px; padding: 0 1.25rem; border-radius: var(--rh-radius-sm);
  font-weight: 600; font-size: .95rem; line-height: 1; white-space: nowrap; cursor: pointer;
  border: 1px solid transparent; transition: background .18s var(--rh-ease), border-color .18s, transform .18s var(--rh-ease), box-shadow .18s;
}
.rh-btn:active { transform: translateY(1px); }
.rh-btn-primary { background: var(--rh-primary); color: #fff; box-shadow: 0 6px 18px rgba(37, 99, 235, .28); }
.rh-btn-primary:hover { background: var(--rh-primary-hi); box-shadow: 0 8px 24px rgba(59, 130, 246, .35); }
.rh-btn-secondary { background: rgba(255, 255, 255, .04); color: var(--rh-text); border-color: var(--rh-border-hi); }
.rh-btn-secondary:hover { background: rgba(255, 255, 255, .09); border-color: rgba(255, 255, 255, .28); }
.rh-btn-ghost { background: transparent; color: var(--rh-text-2); }
.rh-btn-ghost:hover { color: #fff; background: rgba(255, 255, 255, .06); }
.rh-btn-lg { min-height: 52px; padding: 0 1.75rem; font-size: 1rem; border-radius: 12px; }
.rh-btn[disabled] { opacity: .55; cursor: not-allowed; }

/* ── Cartes, champs, badges ───────────────────────────────── */
.rh-card {
  background: var(--rh-card); border: 1px solid var(--rh-border); border-radius: var(--rh-radius);
  transition: border-color .2s var(--rh-ease), transform .2s var(--rh-ease), background .2s;
}
a.rh-card:hover, .rh-card-hover:hover { border-color: var(--rh-border-hi); background: var(--rh-card-hi); transform: translateY(-2px); }

.rh-label { display: block; font-size: .85rem; font-weight: 500; color: var(--rh-text-2); margin-bottom: .4rem; }
.rh-input {
  width: 100%; min-height: 46px; padding: .65rem .9rem; border-radius: var(--rh-radius-sm);
  background: var(--rh-surface); border: 1px solid var(--rh-border-hi); color: var(--rh-text); font-size: 1rem; /* 16px : pas de zoom iOS */
  transition: border-color .15s, box-shadow .15s;
}
.rh-input::placeholder { color: #6b7a92; }
.rh-input:hover { border-color: rgba(255, 255, 255, .26); }
.rh-input:focus { outline: none; border-color: var(--rh-primary-hi); box-shadow: 0 0 0 3px rgba(59, 130, 246, .25); }
.rh-help { font-size: .8rem; color: var(--rh-muted); margin-top: .4rem; }
.rh-alert { border-radius: var(--rh-radius-sm); padding: .8rem 1rem; font-size: .9rem; border: 1px solid; }
.rh-alert-error   { background: rgba(239, 68, 68, .1);  border-color: rgba(239, 68, 68, .3);  color: #fca5a5; }
.rh-alert-success { background: rgba(34, 197, 94, .1);  border-color: rgba(34, 197, 94, .3);  color: #86efac; }

.rh-badge { display: inline-flex; align-items: center; gap: .4rem; padding: .3rem .7rem; border-radius: 999px; font-size: .78rem; font-weight: 500;
  background: rgba(59, 130, 246, .12); border: 1px solid rgba(59, 130, 246, .28); color: #93c5fd; }
.rh-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--rh-online); position: relative; flex-shrink: 0; }
.rh-dot::after { content: ''; position: absolute; inset: -4px; border-radius: 50%; border: 2px solid var(--rh-online); opacity: .5; animation: rh-pulse 1.8s ease-out infinite; }
@keyframes rh-pulse { 0% { transform: scale(.6); opacity: .6; } 100% { transform: scale(1.6); opacity: 0; } }

.rh-icon-box { width: 44px; height: 44px; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center;
  background: rgba(59, 130, 246, .12); color: var(--rh-link); font-size: 1.05rem; flex-shrink: 0; }
.rh-icon-box.signal { background: rgba(249, 115, 22, .12); color: #fdba74; }
.rh-icon-box.online { background: rgba(34, 197, 94, .12); color: #86efac; }

/* ── Mise en page ─────────────────────────────────────────── */
.rh-container { max-width: 72rem; margin: 0 auto; padding: 0 1rem; }
.rh-section { padding: 4.5rem 0; }
.rh-eyebrow { font-size: .8rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--rh-link); }
.rh-title { font-size: clamp(1.7rem, 3.4vw, 2.4rem); font-weight: 700; line-height: 1.15; }
.rh-lead { color: var(--rh-text-2); font-size: clamp(1.02rem, 1.6vw, 1.2rem); line-height: 1.65; }

/* ── Hero : halo bleu + « voie ferrée » discrète ──────────── */
.rh-hero { position: relative; overflow: hidden; padding: 5.5rem 0 4.5rem; }
.rh-hero::before {           /* halo */
  content: ''; position: absolute; inset: -20% -10% auto -10%; height: 90%; pointer-events: none;
  background: radial-gradient(60% 60% at 30% 20%, rgba(37, 99, 235, .28), transparent 70%),
              radial-gradient(40% 50% at 85% 10%, rgba(249, 115, 22, .12), transparent 70%);
}
.rh-hero::after {            /* rails + traverses */
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 64px; pointer-events: none; opacity: .5;
  background:
    linear-gradient(var(--rh-border-hi), var(--rh-border-hi)) 0 18px / 100% 2px no-repeat,
    linear-gradient(var(--rh-border-hi), var(--rh-border-hi)) 0 44px / 100% 2px no-repeat,
    repeating-linear-gradient(90deg, transparent 0 22px, rgba(255, 255, 255, .07) 22px 28px) 0 12px / 100% 40px no-repeat;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 15%, #000 85%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 15%, #000 85%, transparent);
}
.rh-hero > * { position: relative; z-index: 1; }

/* Étapes reliées par une ligne (« stations ») */
.rh-steps { position: relative; display: grid; gap: 2rem; }
@media (min-width: 768px) {
  .rh-steps { grid-template-columns: repeat(3, 1fr); }
  .rh-steps::before { content: ''; position: absolute; top: 22px; left: 16%; right: 16%; height: 2px; background: repeating-linear-gradient(90deg, var(--rh-border-hi) 0 10px, transparent 10px 18px); }
}
.rh-step-node { width: 44px; height: 44px; border-radius: 50%; background: var(--rh-primary); color: #fff; font-weight: 700; display: flex; align-items: center; justify-content: center;
  box-shadow: 0 0 0 6px var(--rh-bg), 0 0 0 7px var(--rh-border-hi); position: relative; z-index: 1; }

/* ── Authentification ─────────────────────────────────────── */
.rh-auth { min-height: 100vh; display: grid; }
@media (min-width: 1024px) { .rh-auth { grid-template-columns: 1.05fr 1fr; } }
.rh-auth-aside { display: none; position: relative; overflow: hidden; padding: 3rem; background: var(--rh-surface); border-right: 1px solid var(--rh-border); }
@media (min-width: 1024px) { .rh-auth-aside { display: flex; flex-direction: column; justify-content: space-between; } }
.rh-auth-aside::before { content: ''; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(70% 55% at 20% 0%, rgba(37, 99, 235, .3), transparent 70%), radial-gradient(50% 40% at 100% 100%, rgba(249, 115, 22, .12), transparent 70%); }
.rh-auth-aside > * { position: relative; }
.rh-auth-main { display: flex; align-items: center; justify-content: center; padding: 2.5rem 1rem; }

/* ── Pages carte : panneaux, tuiles de chiffres, contrôles compacts ─────── */
.rh-panel { background: var(--rh-surface); border: 1px solid var(--rh-border); border-radius: 16px; }
.rh-stat  { background: var(--rh-card); border: 1px solid var(--rh-border); border-radius: 12px; padding: .7rem 1rem; text-align: center; min-width: 72px; }
.rh-stat > p:first-child { font-family: 'Fira Code', ui-monospace, monospace; font-variant-numeric: tabular-nums; letter-spacing: -.02em; line-height: 1.2; }
.rh-btn-sm  { min-height: 36px; padding: 0 .75rem; font-size: .8rem; border-radius: 9px; gap: .4rem; }
.rh-input-sm{ min-height: 36px; padding: .3rem .65rem; font-size: .85rem; width: auto; border-radius: 9px; }
/* Puces de filtre de carte (boutons à état « pressé ») : passent à la ligne, focus visible */
.overlay-btn { min-height: 32px; cursor: pointer; }
.overlay-btn[aria-pressed="true"], #filterOnline[aria-pressed="true"] { border-color: rgba(96, 165, 250, .6); background: rgba(59, 130, 246, .14); color: #93c5fd; }
#filterOnline[aria-pressed="true"] { border-color: rgba(34, 197, 94, .6); background: rgba(34, 197, 94, .12); color: #86efac; }
@media (pointer: coarse) { .rh-btn-sm, .rh-input-sm, .overlay-btn { min-height: 44px; } }
.rh-crumb { display: inline-flex; align-items: center; min-height: 44px; padding: 0 .5rem; font-size: .8rem; color: var(--rh-muted); border-radius: 8px; transition: color .15s, background .15s; }
a.rh-crumb:hover { color: #fff; background: rgba(255, 255, 255, .06); }

/* ── Tableau de bord (application) ────────────────────────── */
.rh-panel-sm { border-radius: 12px; }
.rh-side { background: var(--rh-surface); border-right: 1px solid var(--rh-border); }
.rh-side-head { padding: 1.1rem 1rem 1rem; border-bottom: 1px solid var(--rh-border); }
.rh-org { display: flex; align-items: center; gap: .65rem; margin-top: 1rem; padding: .6rem .7rem; background: var(--rh-card); border: 1px solid var(--rh-border); border-radius: 12px; }
.rh-org-avatar { width: 36px; height: 36px; border-radius: 10px; background: var(--rh-primary); color: #fff; font-weight: 700; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.rh-org-name { font-size: .88rem; font-weight: 600; color: #fff; }
.rh-org-status { font-size: .72rem; color: var(--rh-muted); display: flex; align-items: center; gap: .3rem; }
.rh-org-status .ok { color: var(--rh-online); }
.rh-side-nav { flex: 1; overflow-y: auto; padding: .75rem .6rem; }
.rh-side-group { font-size: .68rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--rh-muted); padding: .9rem .75rem .35rem; margin: 0; }
.rh-side-link { position: relative; display: flex; align-items: center; gap: .75rem; min-height: 44px; padding: 0 .75rem; margin-bottom: 2px; border-radius: 10px;
  font-size: .9rem; font-weight: 500; color: var(--rh-text-2); cursor: pointer; transition: color .15s, background .15s; }
.rh-side-link i { width: 1.1rem; text-align: center; color: var(--rh-muted); transition: color .15s; }
.rh-side-link:hover { color: #fff; background: rgba(255, 255, 255, .05); }
.rh-side-link.is-active { color: #fff; background: rgba(59, 130, 246, .14); }
.rh-side-link.is-active i { color: var(--rh-link); }
.rh-side-link.is-active::before { content: ''; position: absolute; left: -.6rem; top: 10px; bottom: 10px; width: 3px; border-radius: 0 3px 3px 0; background: var(--rh-primary-hi); }
.rh-side-link.danger:hover { color: #fca5a5; background: rgba(239, 68, 68, .1); }
.rh-side-link.danger:hover i { color: #fca5a5; }
.rh-side-foot { padding: .6rem; border-top: 1px solid var(--rh-border); }
.rh-mobilebar { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; justify-content: space-between; padding: 0 1rem; height: 4rem;
  background: rgba(10, 16, 32, .9); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); border-bottom: 1px solid var(--rh-border); }
.rh-topbar { position: sticky; top: 0; z-index: 10; display: none; align-items: center; justify-content: space-between; gap: 1rem; padding: .5rem 1.5rem; min-height: 56px;
  background: rgba(10, 16, 32, .85); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); border-bottom: 1px solid var(--rh-border); }
@media (min-width: 768px) { .rh-topbar { display: flex; } }
/* Fenêtres modales */
.modal-box { background: var(--rh-surface) !important; border: 1px solid var(--rh-border-hi) !important; border-radius: 16px !important; box-shadow: var(--rh-shadow); }
/* Texte secondaire très discret : relevé pour rester lisible (contraste ≥ 4,5:1) */
html body .text-slate-600 { color: #7a88a2; }

/* Cellules et pastilles À L'INTÉRIEUR d'une carte (fond #192134) : les anciens fonds « slate-800 » se fondaient dans la carte
   → fond plus sombre + filet léger pour un contraste net. */
.rh-card .bg-slate-800, .rh-card [class*="bg-slate-800/"] { background-color: rgba(8, 13, 27, .62); box-shadow: inset 0 0 0 1px var(--rh-border); }
.rh-card .text-slate-500 { color: #93a1b8; }

/* ── Anciens composants (head.php) alignés sur le nouveau système ─────────── */
.btn-primary { background: var(--rh-primary); border-radius: var(--rh-radius-sm); min-height: 44px; }
.btn-primary:hover { background: var(--rh-primary-hi); }
.btn-ghost, .btn-danger { min-height: 44px; }
.stat-card { border-radius: var(--rh-radius); }


/* ════════════════════════════════════════════════════════════
   Boutons de préférences (thème, langue) — en-tête, pied de page, pages d'authentification
   ════════════════════════════════════════════════════════════ */
.rh-prefs { display: inline-flex; align-items: center; gap: .4rem; }
.rh-pref-btn { width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center; border-radius: var(--rh-radius-sm);
  color: var(--rh-text-2); background: transparent; border: 1px solid var(--rh-border-hi); cursor: pointer; font-size: 1rem;
  transition: color .15s, background .15s, border-color .15s; }
.rh-pref-btn:hover { color: var(--rh-text); background: rgba(127, 140, 165, .14); }
.rh-pref-btn .rh-ico-moon { display: none; }
html[data-theme="light"] .rh-pref-btn .rh-ico-sun { display: none; }
html[data-theme="light"] .rh-pref-btn .rh-ico-moon { display: inline-block; }
.rh-lang { display: inline-flex; border: 1px solid var(--rh-border-hi); border-radius: var(--rh-radius-sm); overflow: hidden; }
.rh-chip[hidden] { display: none; }
.rh-lang button { display: inline-flex; align-items: center; justify-content: center; gap: .4rem; min-width: 46px; height: 42px; padding: 0 .55rem; font-size: .8rem; font-weight: 600; letter-spacing: .04em; cursor: pointer;
  color: var(--rh-text-2); background: transparent; border: 0; transition: color .15s, background .15s; }
.rh-lang button:hover { background: rgba(127, 140, 165, .14); color: var(--rh-text); }
.rh-lang button[aria-pressed="true"] { background: var(--rh-primary); color: #fff; }
.rh-lang button:focus-visible, .rh-pref-btn:focus-visible { outline-offset: -2px; }
.rh-prefs-float { position: absolute; top: 1rem; right: 1rem; z-index: 5; }
.rh-auth { position: relative; }
@media (max-width: 380px) { .rh-nav-inner .rh-lang button { min-width: 34px; padding: 0 .3rem; } .rh-nav-inner .rh-prefs { gap: .25rem; } }

/* ════════════════════════════════════════════════════════════
   Thème clair
   ════════════════════════════════════════════════════════════ */
html[data-theme="light"] {
  --s-50: 2 6 23; --s-100: 15 23 42; --s-200: 30 41 59; --s-300: 51 65 85; --s-400: 82 96 118; --s-500: 100 116 139;
  --s-600: 148 163 184; --s-700: 203 213 225; --s-800: 232 237 245; --s-900: 255 255 255; --s-950: 244 246 251;
  --rh-bg: #f4f6fb; --rh-surface: #ffffff; --rh-card: #ffffff; --rh-card-hi: #f3f6fc;
  --rh-border: rgba(15, 23, 42, .10); --rh-border-hi: rgba(15, 23, 42, .18);
  --rh-text: #0f172a; --rh-text-2: #334155; --rh-muted: #566579;
  --rh-link: #1d4ed8; --rh-shadow: 0 10px 30px rgba(15, 23, 42, .10);
  --rh-acc-amber: #b45309; --rh-acc-red: #b91c1c; --rh-acc-violet: #6d28d9; --rh-acc-cyan: #0e7490; --rh-acc-green: #047857;
}
html[data-theme="light"] ::selection { background: rgba(37, 99, 235, .22); color: #0f172a; }
html[data-theme="light"] ::-webkit-scrollbar-track { background: #eef2f8; }
html[data-theme="light"] ::-webkit-scrollbar-thumb { background: #b8c3d6; }
html[data-theme="light"] .glass { background: rgba(255, 255, 255, .8); }

/* Navigation, panneaux fixes */
html[data-theme="light"] .rh-nav { background: rgba(255, 255, 255, .86); }
html[data-theme="light"] .rh-mobile-panel { background: rgba(255, 255, 255, .98); }
html[data-theme="light"] .rh-mobilebar, html[data-theme="light"] .rh-topbar { background: rgba(255, 255, 255, .9); }
html[data-theme="light"] .rh-nav-link:hover, html[data-theme="light"] .rh-nav-link.is-active,
html[data-theme="light"] .rh-mobile-link:hover, html[data-theme="light"] .rh-mobile-link.is-active,
html[data-theme="light"] .rh-btn-ghost:hover, html[data-theme="light"] a.rh-crumb:hover,
html[data-theme="light"] .rh-side-link:hover { color: var(--rh-text); background: rgba(15, 23, 42, .06); }
html[data-theme="light"] .rh-crumb-current, html[data-theme="light"] .rh-org-name, html[data-theme="light"] .rh-foot-link:hover,
html[data-theme="light"] .rh-side-link.is-active { color: var(--rh-text); }
html[data-theme="light"] .rh-side-link.is-active { background: rgba(37, 99, 235, .1); }
html[data-theme="light"] .rh-menu-btn { background: rgba(15, 23, 42, .04); }
html[data-theme="light"] .rh-menu-btn:hover { background: rgba(15, 23, 42, .09); }
html[data-theme="light"] .rh-btn-secondary { background: #fff; }
html[data-theme="light"] .rh-btn-secondary:hover { background: #eef2f8; border-color: rgba(15, 23, 42, .3); }
html[data-theme="light"] .rh-input:hover { border-color: rgba(15, 23, 42, .32); }
html[data-theme="light"] .rh-input::placeholder { color: #7b8aa0; }
html[data-theme="light"] .rh-alert-error   { background: rgba(239, 68, 68, .08); color: #b91c1c; border-color: rgba(239, 68, 68, .3); }
html[data-theme="light"] .rh-alert-success { background: rgba(34, 197, 94, .1);  color: #15803d; border-color: rgba(34, 197, 94, .35); }
html[data-theme="light"] .rh-badge { background: rgba(37, 99, 235, .08); border-color: rgba(37, 99, 235, .25); color: #1d4ed8; }
html[data-theme="light"] .rh-icon-box.signal { color: #c2410c; }
html[data-theme="light"] .rh-icon-box.online { color: #15803d; }
html[data-theme="light"] .overlay-btn[aria-pressed="true"], html[data-theme="light"] .overlay-btn.active { color: #1d4ed8; background: rgba(37, 99, 235, .1); border-color: rgba(37, 99, 235, .45); }
html[data-theme="light"] #filterOnline[aria-pressed="true"] { color: #15803d; background: rgba(34, 197, 94, .12); border-color: rgba(34, 197, 94, .5); }
html[data-theme="light"] .rh-hero::after {
  background:
    linear-gradient(var(--rh-border-hi), var(--rh-border-hi)) 0 18px / 100% 2px no-repeat,
    linear-gradient(var(--rh-border-hi), var(--rh-border-hi)) 0 44px / 100% 2px no-repeat,
    repeating-linear-gradient(90deg, transparent 0 22px, rgba(15, 23, 42, .08) 22px 28px) 0 12px / 100% 40px no-repeat;
}

/* Textes « blancs » des titres → encre foncée (les boutons et fonds de marque gardent leur texte blanc) */
html[data-theme="light"] .text-white, html[data-theme="light"] .hover\:text-white:hover,
html[data-theme="light"] .group:hover .group-hover\:text-white { color: var(--rh-text); }
html[data-theme="light"] :is(.rh-btn-primary, .btn-primary, .gradient-bg, .rh-on-brand, .rh-org-avatar, .rh-step-node,
                             [class*="bg-blue-6"], [class*="bg-brand-"]:not([class*="/"]), [class*="bg-violet-5"]:not([class*="/"]),
                             [class*="bg-emerald-6"]:not([class*="/"]), [class*="bg-red-6"]:not([class*="/"]), [class*="bg-blue-5"]:not([class*="/"])) .text-white,
html[data-theme="light"] :is(.rh-btn-primary, .btn-primary, .gradient-bg, .rh-on-brand, .rh-org-avatar, .rh-step-node,
                             [class*="bg-blue-6"], [class*="bg-brand-"]:not([class*="/"]), [class*="bg-violet-5"]:not([class*="/"]),
                             [class*="bg-emerald-6"]:not([class*="/"]), [class*="bg-red-6"]:not([class*="/"]), [class*="bg-blue-5"]:not([class*="/"])).text-white,
html[data-theme="light"] .rh-on-brand, html[data-theme="light"] .rh-on-brand * { color: #fff; }
html[data-theme="light"] .hover\:text-white:is([class*="bg-blue-6"], [class*="bg-brand-"], .rh-btn-primary):hover { color: #fff; }

/* Bordures et voiles blancs (pensés pour le fond sombre) → équivalents sombres */
html[data-theme="light"] [class*="border-white/"] { border-color: rgba(15, 23, 42, .1); }
html[data-theme="light"] [class*="bg-white/"] { background-color: rgba(15, 23, 42, .045); }
html[data-theme="light"] [class*="hover:bg-white/"]:hover { background-color: rgba(15, 23, 42, .07); }
html[data-theme="light"] body .text-slate-600 { color: #64748b; }
html[data-theme="light"] .rh-card .text-slate-500 { color: #5f6f86; }
html[data-theme="light"] .rh-card .bg-slate-800, html[data-theme="light"] .rh-card [class*="bg-slate-800/"] { background-color: #eef2f8; box-shadow: inset 0 0 0 1px var(--rh-border); }
html[data-theme="light"] .rh-card, html[data-theme="light"] .rh-stat { box-shadow: 0 1px 2px rgba(15, 23, 42, .04); }
html[data-theme="light"] a.rh-card:hover, html[data-theme="light"] .rh-card-hover:hover { box-shadow: 0 10px 28px rgba(15, 23, 42, .1); }

/* Couleurs d'accent (300/400 conçues pour fond sombre) → teintes plus profondes, contraste ≥ 4,5:1 sur fond clair */
html[data-theme="light"] :is(.text-blue-300, .text-blue-400, .text-blue-500, .text-brand-400, .text-brand-500, .hover\:text-blue-300:hover, .hover\:text-blue-400:hover, .group:hover .group-hover\:text-blue-400, .group:hover .group-hover\:text-brand-400) { color: #1d4ed8; }
html[data-theme="light"] :is(.text-emerald-300, .text-emerald-400, .text-emerald-500, .hover\:text-emerald-300:hover, .hover\:text-emerald-400:hover) { color: #047857; }
html[data-theme="light"] :is(.text-green-400, .text-green-300) { color: #15803d; }
html[data-theme="light"] :is(.text-amber-200, .text-amber-300, .text-amber-400, .text-amber-500, .hover\:text-amber-200:hover, .hover\:text-amber-400:hover) { color: #b45309; }
html[data-theme="light"] :is(.text-red-400, .text-red-500, .hover\:text-red-400:hover) { color: #b91c1c; }
html[data-theme="light"] :is(.text-purple-300, .text-purple-400, .hover\:text-purple-300:hover, .hover\:text-purple-400:hover) { color: #7e22ce; }
html[data-theme="light"] :is(.text-violet-400, .text-violet-300) { color: #6d28d9; }
html[data-theme="light"] :is(.text-teal-400, .hover\:text-teal-400:hover) { color: #0f766e; }
html[data-theme="light"] :is(.text-cyan-300, .text-cyan-400, .hover\:text-cyan-300:hover, .hover\:text-cyan-400:hover) { color: #0e7490; }
html[data-theme="light"] .text-pink-400 { color: #be185d; }
html[data-theme="light"] .text-signal-400, html[data-theme="light"] .text-orange-400 { color: #c2410c; }
html[data-theme="light"] .rh-on-brand .text-blue-100 { color: #dbeafe; }

/* Anciens composants (head.php) */
html[data-theme="light"] .btn-ghost { color: #475569; border-color: #cbd5e1; }
html[data-theme="light"] .btn-ghost:hover { color: #0f172a; border-color: #94a3b8; }
html[data-theme="light"] .btn-danger { color: #b91c1c; }
html[data-theme="light"] .stat-card { background: rgba(37, 99, 235, .06); border-color: rgba(37, 99, 235, .2); }
html[data-theme="light"] .modal-box { box-shadow: 0 20px 60px rgba(15, 23, 42, .18); }

/* Pages légales */
html[data-theme="light"] .legal h1, html[data-theme="light"] .legal h2, html[data-theme="light"] .legal h3, html[data-theme="light"] .legal strong { color: var(--rh-text); }
html[data-theme="light"] .legal p, html[data-theme="light"] .legal li { color: var(--rh-text-2); }
html[data-theme="light"] .legal th, html[data-theme="light"] .legal td { border-color: #d5dcea; color: #475569; }
html[data-theme="light"] .legal th { background: #eef2f8; color: #0f172a; }
html[data-theme="light"] .legal a { color: #1d4ed8; }
html[data-theme="light"] .legal .note { background: #fff; border-color: #d5dcea; }
html[data-theme="light"] .legal mark { color: #92400e; }

/* Cartes Leaflet : fenêtres d'information — restent sombres (leur contenu est écrit pour un fond sombre) */

/* ════════════════════════════════════════════════════════════
   Accueil embellie
   ════════════════════════════════════════════════════════════ */
.rh-hero-grid { display: grid; gap: 3rem; align-items: center; }
@media (min-width: 1024px) { .rh-hero-grid.has-preview { grid-template-columns: 1.08fr .92fr; } }
.rh-hero { padding-bottom: 6.5rem; }
.rh-preview[hidden] { display: none; }
.rh-heroLink { color: var(--rh-link); font-weight: 600; }
.rh-heroLink:hover { text-decoration: underline; }
.rh-hero h1 .rh-grad { background: linear-gradient(100deg, #60a5fa 0%, #818cf8 55%, #fb923c 110%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
html[data-theme="light"] .rh-hero h1 .rh-grad { background: linear-gradient(100deg, #1d4ed8 0%, #4f46e5 60%, #ea580c 115%); -webkit-background-clip: text; background-clip: text; }
.rh-hero-grid { position: relative; }

/* Aperçu « en direct » : carte stylisée + puces d'information */
.rh-preview { position: relative; border-radius: 20px; border: 1px solid var(--rh-border-hi); background: var(--rh-surface); overflow: hidden;
  box-shadow: 0 30px 70px rgba(2, 6, 23, .45), 0 0 0 1px rgba(255, 255, 255, .02) inset; }
html[data-theme="light"] .rh-preview { box-shadow: 0 30px 70px rgba(15, 23, 42, .16); }
.rh-preview-bar { display: flex; align-items: center; gap: .5rem; padding: .6rem .9rem; border-bottom: 1px solid var(--rh-border); font-size: .78rem; color: var(--rh-muted); }
.rh-preview-bar .rh-dots { display: inline-flex; gap: 5px; margin-right: .4rem; }
.rh-preview-bar .rh-dots i { width: 9px; height: 9px; border-radius: 50%; background: var(--rh-border-hi); display: block; }
.rh-preview-map .leaflet-container { background: transparent; }
.rh-preview-map .rh-chip { z-index: 5; }
.rh-preview-map { position: relative; aspect-ratio: 16 / 11; background: #0b1226; }
html[data-theme="light"] .rh-preview-map { background: #e6edf7; }
.rh-preview-map svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.rh-map-grid { stroke: rgba(148, 163, 184, .10); stroke-width: 1; }
html[data-theme="light"] .rh-map-grid { stroke: rgba(15, 23, 42, .07); }
.rh-map-rail { fill: none; stroke: #94a3b8; stroke-width: 3; stroke-linecap: round; opacity: .9; }
.rh-map-sleepers { fill: none; stroke: #94a3b8; stroke-width: 9; stroke-dasharray: 1.5 11; opacity: .35; }
.rh-map-done { fill: none; stroke: #3b82f6; stroke-width: 3.5; stroke-linecap: round; stroke-dasharray: 700; stroke-dashoffset: 700; animation: rh-draw 5.5s ease-in-out infinite; filter: drop-shadow(0 0 6px rgba(59, 130, 246, .7)); }
@keyframes rh-draw { 0% { stroke-dashoffset: 700; } 70%, 100% { stroke-dashoffset: 0; } }
.rh-map-station { fill: var(--rh-surface); stroke: #94a3b8; stroke-width: 2.5; }
.rh-train { position: absolute; left: 0; top: 0; width: 0; height: 0; offset-path: path('M 30 210 C 120 210 150 120 250 120 S 400 60 470 70'); offset-rotate: 0deg;
  animation: rh-run 5.5s ease-in-out infinite; }
.rh-train > span { position: absolute; left: -17px; top: -17px; width: 34px; height: 34px; border-radius: 50%; background: #3b82f6; border: 3px solid #93c5fd; color: #fff;
  display: flex; align-items: center; justify-content: center; font-size: 13px; box-shadow: 0 4px 14px rgba(59, 130, 246, .65); }
.rh-train > span::after { content: ''; position: absolute; inset: -9px; border-radius: 50%; border: 2px solid #3b82f6; opacity: .5; animation: rh-pulse 1.8s ease-out infinite; }
@keyframes rh-run { 0% { offset-distance: 0%; } 70%, 100% { offset-distance: 100%; } }
.rh-chip { position: absolute; display: flex; align-items: center; gap: .55rem; padding: .5rem .75rem; border-radius: 12px; font-size: .78rem;
  background: rgba(15, 23, 42, .88); color: #e2e8f0; border: 1px solid rgba(255, 255, 255, .12); box-shadow: 0 8px 24px rgba(2, 6, 23, .4);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
html[data-theme="light"] .rh-chip { background: rgba(255, 255, 255, .94); color: #0f172a; border-color: rgba(15, 23, 42, .12); box-shadow: 0 8px 24px rgba(15, 23, 42, .14); }
.rh-chip b { font-family: 'Fira Code', ui-monospace, monospace; font-weight: 600; font-size: .95rem; }
.rh-chip small { display: block; color: #94a3b8; font-size: .68rem; line-height: 1.2; }
html[data-theme="light"] .rh-chip small { color: #566579; }
.rh-chip-a { left: 4%; top: 8%; }
.rh-chip-b { right: 4%; bottom: 8%; }
.rh-preview-foot { display: flex; justify-content: space-between; gap: 1rem; padding: .7rem .9rem; border-top: 1px solid var(--rh-border); font-size: .78rem; color: var(--rh-muted); }
@media (max-width: 1023px) { .rh-hero-grid .rh-preview { max-width: 34rem; } }

/* Bande de chiffres */
.rh-statband { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; border: 1px solid var(--rh-border); border-radius: 18px; overflow: hidden; background: var(--rh-border); }
@media (min-width: 768px) { .rh-statband { grid-template-columns: repeat(4, 1fr); } }
.rh-statband > div { background: var(--rh-card); padding: 1.4rem 1.2rem; text-align: center; }
.rh-statband .n { font-family: 'Fira Code', ui-monospace, monospace; font-size: clamp(1.8rem, 3.6vw, 2.5rem); font-weight: 600; letter-spacing: -.03em; line-height: 1.1; color: var(--rh-text); }
.rh-statband .l { margin-top: .35rem; font-size: .85rem; color: var(--rh-muted); }

/* Fonctionnalités : grille « bento » */
.rh-bento { display: grid; gap: 1.1rem; }
@media (min-width: 768px) { .rh-bento { grid-template-columns: repeat(6, 1fr); } .rh-bento > .b-lg { grid-column: span 3; } .rh-bento > .b-md { grid-column: span 2; } }
.rh-bento .rh-card { padding: 1.6rem; overflow: hidden; position: relative; }
.rh-bento .b-lg { min-height: 15rem; }
.rh-bento .b-lg::after { content: ''; position: absolute; right: -60px; bottom: -60px; width: 200px; height: 200px; border-radius: 50%; pointer-events: none;
  background: radial-gradient(closest-side, rgba(59, 130, 246, .22), transparent); }
.rh-bento .b-lg.signal::after { background: radial-gradient(closest-side, rgba(249, 115, 22, .2), transparent); }
.rh-mini { margin-top: 1.1rem; display: flex; gap: .5rem; flex-wrap: wrap; }
.rh-mini span { font-size: .74rem; padding: .25rem .6rem; border-radius: 999px; border: 1px solid var(--rh-border-hi); color: var(--rh-text-2); font-family: 'Fira Code', ui-monospace, monospace; }

/* Confiance / partenaires de données */
.rh-trust { display: flex; flex-wrap: wrap; gap: .75rem 2rem; align-items: center; justify-content: center; color: var(--rh-muted); font-size: .9rem; }
.rh-trust span { display: inline-flex; align-items: center; gap: .5rem; }

/* Foire aux questions */
.rh-faq details { border: 1px solid var(--rh-border); border-radius: 14px; background: var(--rh-card); margin-bottom: .7rem; transition: border-color .2s; }
.rh-faq details[open] { border-color: var(--rh-border-hi); }
.rh-faq summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 56px; padding: .75rem 1.2rem; font-weight: 600; color: var(--rh-text); }
.rh-faq summary::-webkit-details-marker { display: none; }
.rh-faq summary i { transition: transform .2s var(--rh-ease); color: var(--rh-muted); flex-shrink: 0; }
.rh-faq details[open] summary i { transform: rotate(180deg); }
.rh-faq details p { padding: 0 1.2rem 1.1rem; color: var(--rh-text-2); line-height: 1.7; margin: 0; }

/* Apparition douce au défilement (ajoutée par un petit script, jamais nécessaire pour lire la page) */
.rh-reveal { opacity: 0; transform: translateY(14px); transition: opacity .6s var(--rh-ease), transform .6s var(--rh-ease); }
.rh-reveal.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .rh-reveal { opacity: 1; transform: none; transition: none; } .rh-train { animation: none; offset-distance: 100%; } .rh-map-done { animation: none; stroke-dashoffset: 0; } }

/* ── Thème clair : composants du tableau de bord et couleurs « à opacité » ─────────────────────── */
html[data-theme="light"] .integ-tab.active { background: #e3ebfb; color: #0f172a; }
html[data-theme="light"] .ov-transport-btn.active { background: #dbeafe; border-color: #3b82f6; color: #1e40af; }
html[data-theme="light"] :is(.ov-layer-btn, .net-ov-btn).active[data-ov="railway"],
html[data-theme="light"] :is(.ov-layer-btn, .net-ov-btn).active[data-ov="stations"] { background: rgba(37, 99, 235, .1); border-color: rgba(37, 99, 235, .5); color: #1d4ed8; }
html[data-theme="light"] :is(.ov-layer-btn, .net-ov-btn).active[data-ov="triages"] { background: rgba(124, 58, 237, .1); border-color: rgba(124, 58, 237, .45); color: #6d28d9; }
html[data-theme="light"] :is(.ov-layer-btn, .net-ov-btn).active[data-ov="technicentres"] { background: rgba(4, 120, 87, .1); border-color: rgba(4, 120, 87, .45); color: #047857; }
html[data-theme="light"] :is(.ov-layer-btn, .net-ov-btn).active[data-ov="quais"] { background: rgba(14, 116, 144, .1); border-color: rgba(14, 116, 144, .45); color: #0e7490; }
html[data-theme="light"] :is(.ov-layer-btn, .net-ov-btn):not(.active) { background: #eef2f8; border-color: #cbd5e1; color: #475569; }
html[data-theme="light"] .btn-primary, html[data-theme="light"] .btn-primary * { color: #fff; }
html[data-theme="light"] [class*="text-amber-"][class*="/"], html[data-theme="light"] [class*="text-amber-300"], html[data-theme="light"] [class*="text-yellow-"] { color: #b45309; }
html[data-theme="light"] [class*="text-emerald-"][class*="/"], html[data-theme="light"] [class*="text-green-"][class*="/"] { color: #047857; }
html[data-theme="light"] [class*="text-red-"][class*="/"], html[data-theme="light"] [class*="text-rose-"] { color: #b91c1c; }
html[data-theme="light"] [class*="text-blue-"][class*="/"], html[data-theme="light"] [class*="text-sky-"] { color: #1d4ed8; }
html[data-theme="light"] #detectionContent { --rh-link: #1d4ed8; }

/* Listes déroulantes : toujours lisibles (fond et texte du thème) */
select option, select optgroup { background-color: var(--rh-surface); color: var(--rh-text); }

/* ── Mouvement réduit ─────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

/* ── Impression ───────────────────────────────────────────── */
@media print { .rh-nav, .rh-hero::before, .rh-hero::after { display: none !important; } body { background: #fff; color: #000; } }

/* Drapeaux (SVG intégrés : les émojis-drapeaux ne s'affichent pas sous Windows) */
.rh-flag { width: 22px; height: 15px; border-radius: 2px; box-shadow: 0 0 0 1px rgba(127, 140, 165, .45); flex-shrink: 0; }

/* Menu du compte (« Mon espace » + déconnexion) */
.rh-acct { position: relative; }
.rh-acct-menu { position: absolute; right: 0; top: calc(100% + 8px); min-width: 14rem; z-index: 70; padding: .4rem; border-radius: 14px;
  background: var(--rh-surface); border: 1px solid var(--rh-border-hi); box-shadow: var(--rh-shadow); }
.rh-acct-menu[hidden] { display: none; }
.rh-acct-name { padding: .5rem .7rem; font-size: .78rem; color: var(--rh-muted); border-bottom: 1px solid var(--rh-border); margin-bottom: .3rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rh-acct-menu a { display: flex; align-items: center; gap: .65rem; min-height: 44px; padding: 0 .7rem; border-radius: 9px; color: var(--rh-text-2); font-weight: 500; font-size: .92rem; }
.rh-acct-menu a:hover { background: rgba(127, 140, 165, .14); color: var(--rh-text); }
.rh-acct-menu a i { width: 1rem; text-align: center; color: var(--rh-muted); }
.rh-acct-menu a.danger:hover { color: #ef4444; }
html.rh-lang-switching body { opacity: .35; transition: opacity .15s; }