/* Elec S33D : thème nuit et coque S33D, posés sur style.css (chargé après lui).
   Le socle (socle/socle.css) fournit les jetons --nuit-*, --azur-*, --ambre-*, les polices et la barre. */

:root {
  --vert: #2f8bff;
  --vert-vif: #ffc757;
  --vert-fonce: #4cb0ff;
  --vert-fonce-2: #8fc8ff;
  --vert-nuit: #8fc8ff;
  --vert-pale: rgba(47, 139, 255, .16);
  --vert-pale-2: rgba(47, 139, 255, .3);
  --encre: #e9f0ff;
  --encre-2: #b6c8e6;
  --encre-3: #8ea4c6;
  --fond: #05090f;
  --surface: #0b1730;
  --surface-2: #10244a;
  --surface-3: #183363;
  --trait: rgba(124, 168, 240, .16);
  --trait-fort: rgba(124, 168, 240, .32);
  --alerte: #ffd98a;
  --alerte-fond: rgba(247, 173, 43, .13);
  --alerte-trait: rgba(247, 173, 43, .4);
  --erreur: #ff9a8a;
  --erreur-fond: rgba(224, 65, 47, .15);
  --erreur-trait: rgba(224, 65, 47, .45);
  --libre: #16a36a;
  --occupe: #e0412f;
  --hors: #7388ae;
  --p0: #7388ae;
  --p1: #4cb0ff;
  --p2: #19b3b0;
  --p3: #f7ad2b;
  --pinc: #4a5f85;
  --rayon-l: 22px;
  --ombre: 0 10px 30px -14px rgba(0, 0, 0, .85);
  --ombre-forte: 0 24px 60px -24px rgba(0, 0, 0, .9);
  --police: var(--corps);
  --haut: calc(var(--barre) + var(--marge));
  color-scheme: dark;
}
body { background: var(--nuit-950); color: var(--encre); font-size: 15px; }
h1, h2, h3, h4 { font-family: var(--titre); letter-spacing: -.02em; }
a { color: var(--azur-300); }
a:hover { color: #fff; }
:focus-visible { outline-color: var(--azur-400); }

/* ── Coque : la barre S33D tient le haut, tout le reste passe dessous ── */
.s3-barre { position: fixed; left: 0; right: 0; top: 0; }
.carte { top: var(--barre); background: var(--nuit-950); }
.colonne, .filtres, .fiche { top: var(--haut); }
.annonces, .etat-carte { top: calc(var(--barre) + 60px); }
.evitement { display: none; }
.compte .s3-compte { max-width: 220px; }
.compte .s3-compte span { overflow: hidden; text-overflow: ellipsis; }
.menu { top: calc(100% + 10px); background: rgba(7, 15, 32, .98); border-color: var(--trait-nuit); border-radius: 18px; backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); }

/* ── Panneaux de verre ─────────────────────────────────────────── */
.colonne, .fiche {
  background: linear-gradient(180deg, rgba(10, 22, 46, .93), rgba(5, 12, 26, .92));
  border: 1px solid var(--trait-nuit); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06), var(--ombre-nuit);
  backdrop-filter: blur(18px) saturate(1.3); -webkit-backdrop-filter: blur(18px) saturate(1.3);
}
.titre-vue { font-size: clamp(1.6rem, 2.3vw, 2rem); color: #fff; letter-spacing: -.03em; }
.titre-vue em { font-style: normal; background: linear-gradient(100deg, var(--azur-300), var(--azur-500) 45%, var(--ambre-400)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.s3-surtitre.elec-surtitre { font-size: 10.5px; padding: 6px 12px 6px 9px; margin-bottom: 12px; }
.legende, .puce, .etat-carte, .maplibregl-popup-content {
  background: rgba(7, 15, 32, .9); border: 1px solid var(--trait-nuit); color: var(--texte-nuit);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
}
.puce { color: var(--texte-nuit-2); font-weight: 600; }
.puce:hover { border-color: rgba(143, 200, 255, .45); color: #fff; }
.puce[aria-pressed="true"] { background: linear-gradient(180deg, #49a0ff, var(--azur-600)); border-color: transparent; color: #04101f; box-shadow: var(--lueur-azur); }
.puce[aria-pressed="true"] .ico { color: #04101f; }
.puce .ico { color: var(--ambre-400); }

/* ── Boutons et champs ─────────────────────────────────────────── */
.bouton { border-radius: 999px; font-weight: 600; }
.bouton-principal { background: linear-gradient(180deg, #49a0ff, var(--azur-600)); color: #04101f; box-shadow: var(--lueur-azur); }
.bouton-principal:hover { background: linear-gradient(180deg, #6ab3ff, #1a82f0); color: #04101f; }
.bouton-principal:disabled { background: var(--surface-3); color: var(--encre-3); box-shadow: none; }
.bouton-secondaire { background: var(--verre); border-color: var(--trait-nuit); color: var(--texte-nuit); }
.bouton-secondaire:hover { background: var(--verre-fort); border-color: rgba(143, 200, 255, .45); color: #fff; }
.bouton-discret { color: var(--azur-300); }
.bouton-danger:hover { background: #b42d1d; }
input[type="text"], input[type="number"], input[type="search"], select { background: rgba(16, 36, 74, .55); border-color: var(--trait-nuit); color: #fff; }
input[type="text"]:hover, input[type="number"]:hover, select:hover { border-color: rgba(143, 200, 255, .4); }
input[type="text"]:focus, input[type="number"]:focus, select:focus { border-color: rgba(143, 200, 255, .6); box-shadow: 0 0 0 4px rgba(47, 139, 255, .2); }
.point input[type="text"]:focus { background: rgba(16, 36, 74, .85); }
select option { background: var(--nuit-850); color: var(--texte-nuit); }
input[type="range"] { accent-color: var(--ambre-400); }
.case-puce input:checked + span { color: #fff; border-color: var(--azur-400); }
.repere-depart { background: var(--nuit-950); border-color: var(--azur-400); }
.point-marque .rond { background: var(--nuit-950); border-color: var(--azur-400); }

/* ── Couleurs en dur de style.css ──────────────────────────────── */
.carte-station:hover { background: rgba(47, 139, 255, .08); }
.carte-station.arret { border-color: rgba(247, 173, 43, .4); background: rgba(247, 173, 43, .07); }
.carte-station .badge-num .ico { color: var(--ambre-400); }
.badge-kw { background: linear-gradient(180deg, var(--ambre-400), var(--ambre-500)); color: #1d1100; }
.pastille { border-color: var(--nuit-950); box-shadow: 0 0 0 1px rgba(143, 200, 255, .2); }
.anneau { border-color: var(--nuit-950); }
.manoeuvre .ico { color: var(--azur-300); }
.annonce { background: rgba(7, 15, 32, .96); border: 1px solid var(--trait-nuit); color: var(--texte-nuit); }
.dialogue { background: var(--nuit-850); color: var(--texte-nuit); border: 1px solid var(--trait-nuit); }
.dialogue::backdrop { background: rgba(2, 5, 12, .7); }
.sans-js { background: var(--nuit-850); }

/* ── Contrôles de la carte ─────────────────────────────────────── */
.maplibregl-ctrl-group { background: rgba(7, 15, 32, .9) !important; border: 1px solid var(--trait-nuit); }
.maplibregl-ctrl-group button + button { border-top-color: var(--trait-nuit) !important; }
.maplibregl-ctrl-group button .maplibregl-ctrl-icon { filter: invert(1) brightness(1.4); }
.maplibregl-ctrl-attrib { background: rgba(5, 10, 20, .72) !important; }
.maplibregl-ctrl-attrib, .maplibregl-ctrl-attrib-inner, .maplibregl-ctrl-attrib a { color: var(--texte-nuit-3) !important; }
.maplibregl-ctrl-attrib-button { filter: invert(1); }

@media (max-width: 760px) {
  :root { --feuille-plein: calc(100dvh - var(--barre) - 10px - env(safe-area-inset-top)); }
  .panneau { background: linear-gradient(180deg, rgba(12, 26, 54, .97), rgba(5, 12, 26, .97)); border-top: 1px solid var(--trait-nuit); box-shadow: 0 -10px 40px -10px rgba(0, 0, 0, .9); }
  .fiche { border-radius: 22px 22px 0 0; }
  .filtres { top: calc(var(--barre) + 8px); }
  .legende, .etat-carte { top: calc(var(--barre) + 52px); }
  .menu { top: calc(var(--barre) + 6px); }
  .fiche { top: auto; }
}