/* =============================================================================
   routage.css — habillage aligné sur EksploGeo

   Principes repris de l'application :
     · la carte occupe tout l'écran, bord à bord
     · le mobilier flotte au-dessus en capsules arrondies très sombres
     · étiquettes en petites capitales espacées, valeurs en chiffres tabulaires
     · accent ambre pour l'état actif, rouge réservé au destructif
     · aucune police distante : la pile système suffit et ne coûte pas une requête
============================================================================= */

/* ── jetons ───────────────────────────────────────────────────────────────
   Deux thèmes. Le mobilier bascule du quasi-noir au blanc ; la carte reste
   lumineuse dans les deux cas, comme dans EksploGeo, où le contraste vient
   du mobilier et non d'un assombrissement du fond.                        */
:root{
  --mobilier:#16161A;          /* fond des capsules et panneaux      */
  --mobilier-creux:#212127;    /* champs, surfaces enfoncées         */
  --mobilier-relief:#2C2C34;   /* survol, état actif                 */
  --texte:#F2F2F5;
  --texte-doux:#9A9AA4;
  --trait:rgba(255,255,255,.10);
  --accent:#E8A33D;            /* ambre : état actif, action première */
  --accent-texte:#1A1206;
  --alerte:#E4A93F;
  --alerte-texte:#241A05;
  --destructif:#E4483F;
  --trace:#000000;             /* trace, départ et arrivée            */
  --trace-halo:#FFFFFF;        /* liseré : la carte reste claire      */
  --voile:#FFFFFF;
  --particule:rgba(255,255,255,.55);
  --ombre:0 6px 28px rgba(0,0,0,.42);
  --fond:#16161A;              /* alias lu par le canvas (contours)   */
  --icone-filtre:invert(1);

  --ui:ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --data:ui-monospace,"SF Mono","Cascadia Mono",Menlo,Consolas,monospace;
  --r-panneau:14px;
  --r-capsule:12px;
  --r-bouton:8px;
}
:root[data-theme="clair"]{
  --mobilier:#FFFFFF;
  --mobilier-creux:#F1F1F3;
  --mobilier-relief:#E6E6EA;
  --texte:#17171B;
  --texte-doux:#6E6E78;
  --trait:rgba(0,0,0,.11);
  --accent:#B87613;
  --accent-texte:#FFFFFF;
  --alerte:#8A5A00;
  --alerte-texte:#FFF6E6;
  --destructif:#C3372F;
  --trace:#000000;
  --trace-halo:#FFFFFF;
  --voile:#FFFFFF;
  --particule:rgba(23,23,27,.48);
  --ombre:0 6px 24px rgba(40,40,50,.16);
  --fond:#FFFFFF;
  --icone-filtre:none;
}

*{box-sizing:border-box}
html,body{margin:0;height:100%;background:var(--mobilier-creux);
  color:var(--texte);font-family:var(--ui);-webkit-font-smoothing:antialiased}
button,input,select{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

/* ── charpente ─────────────────────────────────────────────────────────── */
#carte{position:absolute;inset:0}
#vent-part,#vent-dessus{position:absolute;inset:0;z-index:1;pointer-events:none}

#haut{
  position:absolute;top:14px;left:394px;right:14px;z-index:3;
  display:flex;flex-direction:column;gap:10px;pointer-events:none;
}
#haut > *{pointer-events:auto}

#rail{
  position:absolute;top:14px;left:14px;bottom:14px;width:366px;z-index:3;
  background:color-mix(in srgb,var(--mobilier) 94%,transparent);
  backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  border:1px solid var(--trait);border-radius:var(--r-panneau);
  box-shadow:var(--ombre);display:flex;flex-direction:column;overflow:hidden;
}
/* Défilement conservé, ascenseur masqué : la barre grise cassait la capsule. */
#rail-defile{overflow-y:auto;padding:0 18px 20px;flex:1;
  scrollbar-width:none;-ms-overflow-style:none}
#rail-defile::-webkit-scrollbar{width:0;height:0;display:none}

/* ── en-tête du panneau ────────────────────────────────────────────────── */
.entete{display:flex;align-items:flex-start;gap:12px;padding:16px 18px 14px;
  border-bottom:1px solid var(--trait)}
.entete > div:first-child{flex:1;min-width:0}
.entete h1{margin:0;font-size:17px;font-weight:650;letter-spacing:-.01em;line-height:1.1}
.entete p{margin:5px 0 0;font-size:12px;color:var(--texte-doux);line-height:1.45}

#theme{flex:none;width:32px;height:32px;border:1px solid var(--trait);
  border-radius:50%;background:var(--mobilier-creux);color:var(--texte-doux);
  cursor:pointer;display:grid;place-items:center;font-size:14px;line-height:1;padding:0}
#theme:hover{color:var(--accent);border-color:var(--accent)}

/* ── blocs du panneau ──────────────────────────────────────────────────── */
.bloc{padding-top:18px}
.bloc + .bloc{border-top:1px solid var(--trait);margin-top:18px}
.eyebrow{font-size:10.5px;font-weight:600;letter-spacing:.13em;text-transform:uppercase;
  color:var(--texte-doux);margin:0 0 11px;display:flex;justify-content:space-between;
  align-items:center;gap:8px}
.eyebrow em{font-family:var(--data);font-style:normal;font-size:10px;letter-spacing:0;
  color:var(--texte-doux);opacity:.7}

/* ── champs ────────────────────────────────────────────────────────────── */
.ligne{display:flex;align-items:center;gap:10px;margin-bottom:8px}
.ligne label{font-size:12.5px;color:var(--texte-doux);flex:1;min-width:0}
.ligne label small{opacity:.7}
.ligne input[type=number],.ligne input[type=datetime-local],
.ligne input[type=text],.ligne select{
  width:118px;flex:none;background:var(--mobilier-creux);border:1px solid transparent;
  border-radius:var(--r-bouton);padding:7px 9px;font-family:var(--data);font-size:12px;
  font-variant-numeric:tabular-nums;text-align:right;
}
.ligne input:hover,.ligne select:hover{border-color:var(--trait)}
.ligne input[type=text]{text-align:left;width:100%}
.ligne select{text-align:left;font-family:var(--ui);font-size:12.5px}
.ligne input[type=checkbox]{accent-color:var(--accent);width:16px;height:16px;flex:none}
input[type=file]{font-size:11.5px;color:var(--texte-doux);max-width:100%}

.point{display:flex;align-items:center;gap:11px;margin-bottom:7px;width:100%;text-align:left;
  background:var(--mobilier-creux);border:1px solid transparent;border-radius:var(--r-bouton);
  padding:9px 11px;cursor:pointer}
.point:hover{border-color:var(--trait)}
.point[aria-pressed=true]{border-color:var(--accent)}
.point .mk{font-size:12px;font-weight:700;width:21px;height:21px;border-radius:50%;
  display:grid;place-items:center;flex:none;background:var(--accent);color:var(--accent-texte)}
.point .co{font-family:var(--data);font-size:11.5px;color:var(--texte-doux)}
.point .co strong{display:block;font-family:var(--ui);font-weight:600;font-size:12.5px;
  color:var(--texte);letter-spacing:0}

.action{width:100%;margin-top:12px;padding:11px;border:0;border-radius:var(--r-bouton);
  cursor:pointer;background:var(--accent);color:var(--accent-texte);
  font-size:12.5px;font-weight:650;letter-spacing:.09em;text-transform:uppercase}
.action:hover:not(:disabled){filter:brightness(1.08)}
.action:disabled{background:var(--mobilier-creux);color:var(--texte-doux);cursor:not-allowed}
.mineur{background:var(--mobilier-creux);border:1px solid transparent;color:var(--texte-doux);
  border-radius:var(--r-bouton);padding:6px 10px;cursor:pointer;
  font-size:10.5px;font-weight:600;letter-spacing:.11em;text-transform:uppercase}
.mineur:hover{border-color:var(--trait);color:var(--texte)}

#jauge{height:3px;background:var(--mobilier-creux);border-radius:2px;margin-top:10px;overflow:hidden}
#jauge i{display:block;height:100%;width:0;background:var(--accent);transition:width .12s linear}
#etat{font-size:12px;line-height:1.5;color:var(--texte-doux);margin-top:11px;min-height:1.4em}
#etat.alerte{color:var(--accent)}
.aide{font-size:11.5px;line-height:1.5;color:var(--texte-doux);opacity:.85;margin:8px 0 0}

/* ── barre supérieure, capsule EksploGeo ───────────────────────────────── */
#timeline{
  background:color-mix(in srgb,var(--mobilier) 94%,transparent);
  backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  border:1px solid var(--trait);border-radius:var(--r-capsule);
  box-shadow:var(--ombre);padding:9px 14px 11px;
}
.barre{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.barre + .barre{margin-top:9px}
.sep{width:1px;align-self:stretch;min-height:26px;background:var(--trait);flex:none}

.pas{background:var(--mobilier-creux);border:1px solid transparent;color:var(--texte-doux);
  border-radius:var(--r-bouton);padding:7px 8px;cursor:pointer;flex:none;
  font-family:var(--data);font-size:10.5px;letter-spacing:.02em}
.pas:hover:not(:disabled){border-color:var(--trait);color:var(--texte)}
.pas:disabled{opacity:.35;cursor:not-allowed}

#btn-play{width:32px;height:32px;flex:none;border-radius:50%;border:0;cursor:pointer;
  background:var(--accent);color:var(--accent-texte);display:grid;place-items:center;
  font-size:12px;line-height:1;padding:0}
#btn-play:hover:not(:disabled){filter:brightness(1.08)}
#btn-play:disabled{background:var(--mobilier-creux);color:var(--texte-doux);cursor:not-allowed}

.lecture{display:flex;flex-direction:column;gap:2px;min-width:58px}
.lecture span{font-size:9.5px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;
  color:var(--texte-doux);white-space:nowrap}
.lecture strong{font-family:var(--data);font-variant-numeric:tabular-nums;
  font-weight:500;font-size:15px;letter-spacing:-.02em;white-space:nowrap}
.lecture strong small{font-size:10px;color:var(--texte-doux);margin-left:1px}

/* Pas de conteneur : les coches se posent à même la capsule. */
.bascules{display:flex;gap:12px;flex-wrap:wrap}
.coche{display:flex;align-items:center;gap:6px;cursor:pointer;
  font-size:10.5px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;
  color:var(--texte-doux);white-space:nowrap}
.coche:hover{color:var(--texte)}
.coche input{accent-color:var(--accent);width:13px;height:13px;margin:0}
.coche:has(input:checked){color:var(--texte)}

/* Le curseur a une largeur qui ne dépend QUE du conteneur. En flex:1 à côté
   d'un libellé de largeur variable, il se rétrécissait et s'allongeait au gré
   du texte — « près bâbord » puis « près serré tribord », 46 px d'écart — et
   la poignée sautait sans que la position ait changé. */
#curseur{flex:0 0 clamp(150px,46%,560px);accent-color:var(--accent);margin:0}
#curseur:disabled{opacity:.35;cursor:not-allowed}
#tl-heure{flex:1 1 0;min-width:0;text-align:right;overflow:hidden;text-overflow:ellipsis;
  font-family:var(--data);font-variant-numeric:tabular-nums;font-size:11.5px;
  color:var(--texte-doux);white-space:nowrap}

/* ── alarme ────────────────────────────────────────────────────────────── */
#alarme{display:none}
#alarme.on{display:block;background:var(--alerte);color:var(--alerte-texte);
  border-radius:var(--r-capsule);padding:11px 14px;font-size:12.5px;line-height:1.5;
  box-shadow:var(--ombre)}
#alarme b{display:block;font-size:11px;font-weight:700;letter-spacing:.11em;
  text-transform:uppercase;margin-bottom:3px}
#alarme span{font-family:var(--data);font-size:11.5px}

/* ── feuille de route ──────────────────────────────────────────────────── */
table{width:100%;border-collapse:collapse;font-family:var(--data);
  font-variant-numeric:tabular-nums;font-size:11px}
th{font-family:var(--ui);font-size:9.5px;font-weight:600;letter-spacing:.12em;
  text-transform:uppercase;color:var(--texte-doux);text-align:left;
  padding:0 6px 7px 0;border-bottom:1px solid var(--trait)}
td{padding:7px 6px 7px 0;border-bottom:1px solid var(--trait);vertical-align:top}
tr:hover td{background:var(--mobilier-creux)}
td.b{color:var(--texte-doux)}

/* ── rose polaire ──────────────────────────────────────────────────────── */
#rose{width:100%;height:auto;display:block;margin:2px 0 6px}
#rose .anneau{fill:none;stroke:var(--trait);stroke-width:1}
#rose .rayon{stroke:var(--trait);stroke-width:.75}
#rose .courbe{fill:color-mix(in srgb,var(--accent) 14%,transparent);
  stroke:var(--accent);stroke-width:1.6;stroke-linejoin:round}
#rose .vmg{stroke:var(--texte-doux);stroke-width:1;stroke-dasharray:3 3}
#rose .cap{stroke:var(--texte);stroke-width:2;stroke-linecap:round}
#rose text{font-family:var(--data);font-size:8px;fill:var(--texte-doux)}

/* ── échelle de vent ───────────────────────────────────────────────────── */
#echelle{display:flex;align-items:center;flex-wrap:wrap;margin:2px 0 0}
#echelle b{flex:0 0 100%;font-size:10px;font-weight:600;letter-spacing:.11em;
  text-transform:uppercase;margin:0 0 6px;color:var(--texte-doux)}
#echelle i{height:6px;flex:1;display:block}
#echelle i:first-of-type{border-radius:3px 0 0 3px}
#echelle i:last-of-type{border-radius:0 3px 3px 0}
#echelle span{flex:0 0 100%;margin:6px 0 0;font-family:var(--data);
  font-size:9.5px;color:var(--texte-doux)}

/* ── mobilier MapLibre ─────────────────────────────────────────────────── */
.maplibregl-ctrl-attrib{
  background:color-mix(in srgb,var(--mobilier) 88%,transparent)!important;
  color:var(--texte-doux)!important;font-family:var(--ui)!important;
  font-size:10px!important;border-radius:6px!important;padding:2px 7px!important;
}
.maplibregl-ctrl-attrib a{color:var(--texte-doux)!important;text-decoration:underline}
.maplibregl-ctrl-group{
  background:color-mix(in srgb,var(--mobilier) 94%,transparent)!important;
  border:1px solid var(--trait)!important;border-radius:var(--r-bouton)!important;
  box-shadow:var(--ombre)!important;
}
.maplibregl-ctrl-group button{color:var(--texte)!important;width:32px!important;height:32px!important}
.maplibregl-ctrl-group button:hover{background:var(--mobilier-relief)!important}
.maplibregl-ctrl-group button + button{border-top:1px solid var(--trait)!important}
.maplibregl-ctrl-group button .maplibregl-ctrl-icon{filter:var(--icone-filtre)}
.maplibregl-ctrl-scale{
  background:color-mix(in srgb,var(--mobilier) 88%,transparent)!important;
  border-color:var(--texte-doux)!important;color:var(--texte)!important;
  font-family:var(--data)!important;font-size:10px!important;
  border-radius:0 0 4px 4px!important;
}

/* Le panneau flotte à gauche : sans décalage, l'échelle et les attributions
   de MapLibre se retrouveraient dessous, illisibles. */
.maplibregl-ctrl-bottom-left{left:394px!important}

/* ── écrans étroits ────────────────────────────────────────────────────── */
@media (max-width:900px){
  #rail{top:auto;left:8px;right:8px;bottom:8px;width:auto;height:56vh}
  #haut{left:8px;right:8px;top:8px}
  .maplibregl-ctrl-bottom-left{left:0!important;bottom:calc(56vh + 8px)!important}
  .maplibregl-ctrl-bottom-right{bottom:calc(56vh + 8px)!important}
  .barre{gap:10px}
  .lecture{min-width:52px}
  .lecture strong{font-size:13px}
}

/* ── points déplaçables ───────────────────────────────────────────────── */
.maplibregl-canvas-container.glissable canvas{cursor:grab}
.maplibregl-canvas-container.glisse canvas{cursor:grabbing}