/* Habillage de la carte du réseau hydrographique (§7).
   Comme app.css : aucune couleur littérale, tout passe par les jetons de la
   charte (vendor/magic-saleve/tokens.css). Le noir du fond de carte est le
   noir de la palette ; les couleurs des cours d'eau, elles, sont des données
   — elles voyagent dans les tuiles et ne sont écrites nulle part ici. */

@import url('/vendor/magic-saleve/tokens.css');

:root {
  font-family: var(--ms-font-body);
  font-size: 16px;
}

/* bandeau, carte élastique, pied : une colonne, trois rangées */
body {
  margin: 0;
  display: grid;
  grid-template-rows: auto 1fr auto;
  height: 100vh;
  background: var(--ms-noir);
  color: var(--ms-text-on-dark);
}

/* --- bandeau, décliné de celui du site --- */

#bandeau {
  position: relative;   /* ancre le panneau du menu */
  z-index: 1100;        /* au-dessus des contrôles MapLibre */
  display: flex;
  align-items: center;
  gap: .9rem;
  padding: .7rem 1.25rem;
  background: var(--ms-bg-dark);
  color: var(--ms-text-on-dark);
}

/* --- menu des pages et logo, repris de la page d'accueil --- */

#menu-bouton {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.125rem;
  height: 2.125rem;
  padding: 0;
  color: var(--ms-text-on-dark);
  background: none;
  border: 1px solid transparent;
  border-radius: var(--ms-radius);
  cursor: pointer;
}

#menu-bouton:hover,
#menu-bouton[aria-expanded="true"] { border-color: var(--ms-text-on-dark); }

#menu-sites {
  position: absolute;
  top: 100%;
  left: 1.25rem;
  z-index: 1000;
  display: flex;
  flex-direction: column;
  min-width: 10rem;
  padding: .35rem 0;
  background: var(--ms-surface);
  border: 1px solid var(--ms-line);
  border-radius: var(--ms-radius);
  box-shadow: var(--ms-shadow);
}

#menu-sites a {
  padding: .5rem 1rem;
  color: var(--ms-primary);
  font-size: .9rem;
  text-decoration: none;
  border-left: 3px solid transparent;
}

#menu-sites a:hover { background: var(--ms-bg); }

/* la page courante : graisse et filet ocre, l'ocre ne portant pas de petit
   texte sur fond clair (table de contraste du guide) */
#menu-sites a[aria-current="page"] {
  font-weight: 700;
  border-left-color: var(--ms-secondary);
}

#brand-lien { display: flex; }
#brand { display: block; height: 2.125rem; width: auto; }

/* « #menu-sites { display: flex } » ci-dessus l'emporterait sur le
   « [hidden] { display: none } » de la feuille du navigateur, et le menu
   resterait affiché : l'attribut hidden doit gagner (constaté en v0.60.1) */
[hidden] { display: none !important; }

#titres { margin-left: auto; text-align: right; }

#titres h1 {
  margin: 0;
  font-family: var(--ms-font-title);
  font-weight: 400;
  font-size: 1.1rem;
  letter-spacing: var(--ms-ls-title);
  text-transform: uppercase;
}

#titres p {
  margin: 0;
  font-family: var(--ms-font-subtitle);
  font-weight: 300;
  font-size: .68rem;
  letter-spacing: var(--ms-ls-subtitle);
  text-transform: uppercase;
  opacity: .9;
}

/* --- scène : la carte et ce qui se pose dessus --- */

#scene { position: relative; min-height: 0; }

/* en plein écran, la scène occupe tout l'écran et garde son fond noir */
#scene:fullscreen { background: var(--ms-noir); }

#carte {
  position: absolute;
  inset: 0;
  background: var(--ms-noir);
}

/* message d'état, centré sur la carte : réseau absent, WebGL indisponible */
#etat {
  position: absolute;
  left: 50%;
  top: 40%;
  transform: translate(-50%, -50%);
  max-width: 28rem;
  margin: 0;
  padding: 1rem 1.25rem;
  background: var(--ms-bg-dark);
  color: var(--ms-text-on-dark);
  border-radius: .5rem;
  box-shadow: 0 .25rem 1rem var(--ms-noir);
  font-size: .95rem;
  line-height: 1.5;
  text-align: center;
}

/* légende : un encart bleu outremer en bas à gauche, texte beige — le
   couple que la charte autorise sur fond foncé */
#legende {
  position: absolute;
  left: .9rem;
  bottom: 1.8rem;
  width: 15rem;
  padding: .75rem .9rem;
  background: var(--ms-bg-dark);
  color: var(--ms-text-on-dark);
  border-radius: .5rem;
  box-shadow: 0 .25rem 1rem var(--ms-noir);
  font-size: .82rem;
}

/* le « × » qui replie la légende, dans son coin ; le bouton « Légende » qui
   la rappelle prend sa place, même encart en plus petit */
#legende-fermer {
  position: absolute;
  top: .3rem;
  right: .4rem;
  width: 1.6rem;
  height: 1.6rem;
  padding: 0;
  border: none;
  border-radius: .3rem;
  background: none;
  color: var(--ms-text-on-dark);
  font-size: 1.1rem;
  line-height: 1;
  cursor: pointer;
}

#legende-fermer:hover,
#legende-fermer:focus-visible { background: var(--ms-ocre); color: var(--ms-noir); }

#legende-ouvrir {
  position: absolute;
  left: .9rem;
  bottom: 1.8rem;
  padding: .45rem .8rem;
  border: none;
  border-radius: .5rem;
  background: var(--ms-bg-dark);
  color: var(--ms-text-on-dark);
  box-shadow: 0 .25rem 1rem var(--ms-noir);
  font-family: var(--ms-font-subtitle);
  font-size: .72rem;
  letter-spacing: var(--ms-ls-subtitle);
  text-transform: uppercase;
  cursor: pointer;
}

#legende-ouvrir:hover,
#legende-ouvrir:focus-visible { background: var(--ms-ocre); color: var(--ms-noir); }

#legende h2 {
  margin: 0 0 .5rem;
  font-size: .68rem;
  font-weight: 300;
  letter-spacing: var(--ms-ls-subtitle);
  text-transform: uppercase;
}

#classes {
  list-style: none;
  margin: 0 0 .6rem;
  padding: 0;
  columns: 2;
  column-gap: .6rem;
}

#classes li {
  display: flex;
  align-items: center;
  gap: .4rem;
  margin: .15rem 0;
  break-inside: avoid;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* la pastille reçoit sa couleur par script, depuis la légende publiée par le
   service : c'est une couleur de donnée, pas de charte */
#classes .pastille {
  flex: none;
  width: .9rem;
  height: .35rem;
  border-radius: .2rem;
}

#contours-choix,
#fuseaux-choix {
  display: block;
  margin: .3rem 0 0;
  cursor: pointer;
}

/* interrupteur à glissière plan ⟷ sphère : la case reste dans la page —
   cachée à l'œil, pas au clavier ni au lecteur d'écran — et la glissière
   la dessine ; le côté inactif s'atténue */
#projection-choix {
  display: flex;
  align-items: center;
  gap: .5rem;
  margin: .5rem 0;
  cursor: pointer;
}

#projection-choix .cote { transition: opacity .2s; }
#projection-choix:has(:checked) .cote:first-child,
#sphere:not(:checked) ~ .cote { opacity: .55; }

#projection-choix input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
}

.glissiere {
  flex: none;
  position: relative;
  width: 2rem;
  height: 1.1rem;
  border: 1px solid var(--ms-text-on-dark);
  border-radius: 1rem;
  background: var(--ms-bg-dark);
  transition: background .2s;
}

.glissiere::before {
  content: "";
  position: absolute;
  top: .1rem;
  left: .1rem;
  width: .8rem;
  height: .8rem;
  border-radius: 50%;
  background: var(--ms-text-on-dark);
  transition: transform .2s, background .2s;
}

#sphere:checked + .glissiere { background: var(--ms-ocre); }
#sphere:checked + .glissiere::before { transform: translateX(.9rem); background: var(--ms-noir); }
#sphere:focus-visible + .glissiere { outline: 2px solid var(--ms-ocre); outline-offset: 2px; }

.hint {
  margin: .3rem 0 0;
  font-size: .72rem;
  line-height: 1.4;
  opacity: .85;
}

/* infobulle de survol, posée par script près du curseur */
#info {
  position: absolute;
  pointer-events: none;
  max-width: 18rem;
  padding: .45rem .65rem;
  background: var(--ms-bg-dark);
  color: var(--ms-text-on-dark);
  border-left: .25rem solid var(--ms-ocre);
  border-radius: .3rem;
  box-shadow: 0 .25rem 1rem var(--ms-noir);
  font-size: .82rem;
  line-height: 1.4;
}

#info strong { font-family: var(--ms-font-body); font-weight: 700; }

/* --- contrôles MapLibre ramenés à la charte --- */

.maplibregl-ctrl-group {
  background: var(--ms-bg-dark);
  box-shadow: 0 .25rem 1rem var(--ms-noir);
}

.maplibregl-ctrl-group button + button { border-top-color: var(--ms-text-on-dark); }

/* les icônes de MapLibre sont noires : inversées sur l'encart bleu — le plein
   écran comme les autres */
.maplibregl-ctrl-group button .maplibregl-ctrl-icon { filter: invert(1); }

.maplibregl-ctrl-attrib {
  background: var(--ms-bg-dark);
  color: var(--ms-text-on-dark);
  font-family: var(--ms-font-body);
}

.maplibregl-ctrl-attrib a { color: var(--ms-text-on-dark); }

.maplibregl-ctrl-scale {
  background: var(--ms-bg-dark);
  color: var(--ms-text-on-dark);
  border-color: var(--ms-text-on-dark);
  font-family: var(--ms-font-body);
}

/* --- pied de page, comme sur la page d'accueil --- */

#pied {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: .6rem 1.25rem;
  background: var(--ms-bg-dark);
  color: var(--ms-text-on-dark);
  font-size: .72rem;
  line-height: 1.4;
}

#pied-picto { flex: none; width: 2.5rem; height: 2.5rem; }
#pied-texte { min-width: 0; }
#pied p { margin: .25rem 0; }
#pied a { color: var(--ms-blanc); white-space: nowrap; }
#pied-note { opacity: .85; }

@media (max-width: 48rem) {
  #titres { text-align: left; margin-left: 0; }
  #legende { width: auto; right: .9rem; }
  #classes { columns: 3; }
  #pied-note, #pied-refs { display: none; }
}