/* Habillage du frontend aux couleurs de Magic Salève (§4).
   Fichier séparé, et non un <style> en ligne : la politique de sécurité de
   contenu du service peut ainsi se passer de « unsafe-inline »
   (docs/deploiement.md).

   Aucune couleur n'est écrite en dur ici : tout passe par les jetons
   `--ms-*` de vendor/magic-saleve/tokens.css, seule source de vérité
   graphique. Les couples texte/fond suivent la table de contraste du guide de
   marque — noir ou bleu sur clair, beige ou blanc sur foncé ; l'ocre et le
   terracotta ne portent jamais de petit texte. */

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

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

  /* Seule couleur hors palette du fichier, et l'exception est assumée : le
     guide la réserve aux données portées par une carte. Le périmètre
     autorisé ne pouvait être ni bleu — c'est l'hydrographie du fond
     topographique — ni terracotta — trop proche de l'ocre des bassins
     calculés, alors que tout l'intérêt du calque est de distinguer le droit
     du résultat. */
  --ms-perimetre: #1B5E20;
}

/* Le bandeau en tête, sur toute la largeur ; en dessous, la carte à gauche et
   le panneau à droite. Une grille, et non des blocs imbriqués, parce qu'elle
   seule permet d'empiler bandeau, carte et panneau sur écran étroit sans
   toucher à l'ordre du document. */
body {
  margin: 0;
  display: grid;
  grid-template-columns: 1fr 25rem;
  /* bandeau, chapeau, corps élastique, pied — les rangées sont attribuées à la
     main plus bas, un enfant sans `grid-row` atterrirait sous le pied */
  grid-template-rows: auto auto 1fr auto;
  height: 100vh;
  background: var(--ms-bg);
  color: var(--ms-text);
}

/* --- chapeau d'introduction ---
   Même gabarit que le `#chapeau` de la page d'API : les deux pages du service
   se ressemblent. Aucun contexte d'empilement ici — le menu inter-sites et le
   bloc d'accès se posent sous le bandeau en z-index 1000, et doivent passer
   par-dessus le chapeau. */

#intro {
  /* deux bornes qui se complètent : en deçà d'environ 1 240 px c'est la
     colonne qui limite, au-delà c'est ce max-width — sans lui une ligne
     atteindrait 95 rem sur un écran large */
  max-width: 60rem;
  margin: .9rem 0 .2rem;
  padding: 0 1.25rem;
  font-size: .88rem;
  line-height: 1.5;
}

#intro-resume { margin: 0; }

/* Le dépliage est un <details>, mais il ne doit rien avoir de l'encadré blanc
   que la règle générique donne aux blocs de réglages : ici c'est une simple
   ligne de plus sous le résumé. */
#intro-plus {
  border: none;
  background: none;
  margin: .25rem 0 0;
  padding: 0;
}

/* le marqueur natif cède la place à un « + » qui devient « − » à l'ouverture */
#intro-plus > summary {
  list-style: none;
  display: inline-flex;
  align-items: baseline;
  gap: .35rem;
  color: var(--ms-primary);
}

#intro-plus > summary::-webkit-details-marker { display: none; }

#intro-plus > summary::before {
  content: "+";
  display: inline-block;
  width: 1.05rem;
  height: 1.05rem;
  line-height: 1.05rem;
  text-align: center;
  font-family: var(--ms-font-body);
  font-size: .95rem;
  border: 1px solid var(--ms-line);
  border-radius: 50%;
}

#intro-plus[open] > summary::before { content: "−"; }

#intro-plus > summary:hover::before { border-color: var(--ms-primary); }

#intro-detail {
  margin-top: .5rem;
  padding: .6rem .8rem;
  background: var(--ms-surface);
  border-radius: var(--ms-radius);
  box-shadow: var(--ms-shadow);
}

#intro-detail p { margin: 0 0 .5rem; }
#intro-detail p:last-child { margin-bottom: 0; }
#intro-detail a { color: var(--ms-primary); }

#bandeau { grid-column: 1 / -1; grid-row: 1; }
/* le chapeau tient la colonne de la carte, pas toute la fenêtre : il n'a rien
   à faire au-dessus des réglages, et une ligne de texte étirée sur un écran
   large ne se lit plus */
#intro { grid-column: 1; grid-row: 2; }
#map { grid-column: 1; grid-row: 3; }
#pied { grid-column: 1 / -1; grid-row: 4; }

#panel {
  grid-column: 2;
  /* de la rangée du chapeau à celle de la carte : sans quoi la case libérée à
     droite du chapeau resterait vide, et le panneau y gagne quelques lignes de
     tableau avant de devoir défiler */
  grid-row: 2 / 4;
  min-width: 0;             /* sans quoi un contenu large élargirait la colonne */
  padding: .75rem 1.25rem 1.25rem;
  overflow-y: auto;
  background: var(--ms-bg);
  border-left: 1px solid var(--ms-line);
}

/* Sur un écran étroit — téléphone tenu droit —, un panneau de 25 rem ne laisse
   à la carte que quelques dizaines de pixels : elle passe pour absente. Tout
   s'empile alors sur une colonne : l'en-tête d'abord — nom de l'application et
   bloc d'accès, pour saisir son jeton sans faire défiler la carte —, puis la
   carte, puis les réglages ; la page défile d'un seul tenant. « dvh » suit la barre d'adresse des navigateurs mobiles,
   que « vh » ignore. */
@media (max-width: 48rem) {
  body {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto auto auto auto;
    height: auto;
    min-height: 100vh;
    min-height: 100dvh;
  }

  /* le bandeau s'enroule : l'accès tombe sous les titres, sur toute la
     largeur, plutôt que de comprimer le logo et le titre */
  #bandeau { flex-wrap: wrap; }
  #access { flex: 1 0 100%; margin-left: 0; }

  #map {
    grid-column: 1;
    grid-row: 3;
    height: 50vh;
    height: 50dvh;
  }

  /* la carte est déjà courte sur un téléphone : le champ n'en prend pas la
     moitié */
  .recherche-lieu { width: 11rem; }


  #pied { grid-row: 5; }

  #panel {
    grid-column: 1;
    grid-row: 4;
    overflow-y: visible;
    border-left: none;
    padding-top: 1.25rem;
  }
}

/* --- bandeau commun aux sites Magic Salève --- */

/* Même rendu que meteo.magicsaleve.fr : fond bleu outremer, texte beige, logo
   de 34 px. Le beige sur bleu est le couple que la table de contraste du guide
   autorise à toutes les tailles. */
#bandeau {
  position: relative;   /* ancre le panneau du menu */
  /* au-dessus des contrôles de Leaflet, qui montent à 1000 : sans cela le
     menu déroulé passait sous la loupe et les boutons de zoom (constaté) */
  z-index: 1100;
  display: flex;
  align-items: center;
  gap: .9rem;
  padding: .75rem 1rem;
  background: var(--ms-bg-dark);
  color: var(--ms-text-on-dark);
}

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

#titres h1 {
  margin: 0;
  font-size: 1.15rem;
  color: var(--ms-beige);
}

#titres p {
  margin: .125rem 0 0;
  font-size: .62rem;
  color: var(--ms-beige);
}

/* --- pied de page, commun aux sites Magic Salève --- */

/* Transcription du composant « pied-de-page » de la bibliothèque partagée :
   mêmes mesures, mêmes rôles de couleur. Le paragraphe de note est ce que
   chaque site a de particulier ; il se met en retrait par l'opacité, jamais
   par une autre encre — le beige et le blanc sont les seules que la table de
   contraste du guide autorise sur bleu. */
#pied {
  display: flex;
  align-items: flex-start;
  gap: .9rem;
  padding: 1rem;
  background: var(--ms-bg-dark);
  color: var(--ms-text-on-dark);
  font-size: .82rem;
  line-height: 1.45;
}

#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; }

/* --- menu inter-sites --- */

#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: 1rem;
  z-index: 1000;   /* au-dessus des contrôles de la carte */
  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); }

/* Le site courant se distingue par la graisse et un filet ocre : l'ocre ne
   peut pas porter de petit texte sur fond clair (table de contraste du
   guide), il sert donc de décor et non d'encre. */
#menu-sites a[aria-current="page"] {
  font-weight: 700;
  border-left-color: var(--ms-secondary);
}

/* --- accès, logé dans le bandeau --- */

/* Le bloc pousse à droite ; il garde son cadre clair, mais sa ligne de titre
   se lit sur le bleu, donc en beige. Ouvert, le champ se pose sous le bandeau
   comme le menu, plutôt qu'un formulaire clair au milieu du bleu. */
#access {
  position: static;
  margin: 0 0 0 auto;
  padding: 0;
  background: none;
  border: none;
  color: var(--ms-text-on-dark);
}

#access > summary { color: var(--ms-beige); }
#access .hint { color: var(--ms-beige); }

#access[open] > label {
  position: absolute;
  right: 1rem;
  top: 100%;
  z-index: 1000;
  min-width: 20rem;
  max-width: calc(100vw - 2rem);
  margin: 0;
  padding: .6rem .8rem;
  color: var(--ms-text);
  background: var(--ms-surface);
  border: 1px solid var(--ms-line);
  border-radius: var(--ms-radius);
  box-shadow: var(--ms-shadow);
}

/* --- texte courant --- */

.hint { color: var(--ms-text-muted); font-size: .8rem; line-height: 1.45; }

/* Le terracotta ne peut pas porter de petit texte sur beige (table de
   contraste) : le message reste noir et l'accent se réduit à un filet. */
.error {
  color: var(--ms-text);
  border-left: 3px solid var(--ms-accent);
  padding-left: .5rem;
}

.spinner { margin-left: .3rem; }

/* --- tableau des points --- */

#table-wrap {
  overflow-x: auto;
  background: var(--ms-surface);
  border-radius: var(--ms-radius);
  box-shadow: var(--ms-shadow);
  margin-top: .6rem;
}

table { width: 100%; border-collapse: collapse; font-size: .85rem; }

th {
  font-family: var(--ms-font-subtitle);
  text-transform: uppercase;
  letter-spacing: var(--ms-ls-subtitle);
  font-weight: 300;
  font-size: .7rem;
  color: var(--ms-primary);
}

td, th {
  border-bottom: 1px solid var(--ms-line);
  padding: .35rem .5rem;
  text-align: left;
  white-space: nowrap;
}

tr:last-child td { border-bottom: none; }

/* Point écarté : le pictogramme prend le terracotta d'accent, mais
   l'explication reste dans l'infobulle native, en texte noir — le terracotta
   ne peut pas porter de petit texte sur fond clair (table de contraste). */
.ecarte {
  color: var(--ms-accent);
  display: inline-flex;
  align-items: center;
  cursor: help;
}

/* --- boutons --- */

button {
  margin-top: .6rem;
  padding: .5rem 1rem;
  font-family: var(--ms-font-subtitle);
  text-transform: uppercase;
  letter-spacing: var(--ms-ls-subtitle);
  font-size: .75rem;
  color: var(--ms-text-on-dark);
  background: var(--ms-primary);
  border: none;
  border-radius: var(--ms-radius);
  cursor: pointer;
}

/* Sur ocre, le guide n'autorise le texte qu'en noir à toute taille. */
button:not(:disabled):hover { background: var(--ms-secondary); color: var(--ms-noir); }
button:disabled { opacity: .45; cursor: default; }
button:focus-visible { outline: 2px solid var(--ms-secondary); outline-offset: 2px; }

#compute { width: 100%; margin-top: 1rem; padding: .7rem 1rem; font-size: .8rem; }

button.remove {
  margin: 0;
  padding: 0 .35rem;
  border: none;
  background: none;
  color: var(--ms-text-muted);
  font-size: .9rem;
  letter-spacing: normal;
}
button.remove:hover { background: none; color: var(--ms-accent); }

/* --- onglets de source des points --- */

#tabs {
  display: flex;
  gap: .25rem;
  border-bottom: 1px solid var(--ms-line);
  margin-bottom: .8rem;
}

#tabs button {
  margin: 0;
  padding: .45rem .8rem;
  background: none;
  color: var(--ms-text-muted);
  border-radius: var(--ms-radius) var(--ms-radius) 0 0;
  border-bottom: 3px solid transparent;
}

#tabs button:hover { background: none; color: var(--ms-primary); }

#tabs button.active {
  background: var(--ms-surface);
  color: var(--ms-primary);
  border-bottom-color: var(--ms-secondary);
}

/* --- zone de dépôt d'un fichier ---
   Le trait pointillé dit qu'on peut y déposer quelque chose, là où une bordure
   pleine se lirait comme un simple cadre. Au survol d'un fichier, le cadre
   passe à l'ocre et le fond s'éclaircit : sans ce retour, rien ne distingue
   une zone qui accepte le dépôt d'une zone qui va le refuser. */

#file-drop {
  border: 2px dashed var(--ms-line);
  border-radius: var(--ms-radius);
  padding: .7rem .8rem;
  margin-top: .6rem;
  background: var(--ms-surface);
  transition: border-color .12s, background-color .12s;
}

#file-drop.survol {
  border-color: var(--ms-secondary);
  background: var(--ms-bg);
}

#file-drop .hint { margin: 0 0 .45rem; }

#file-input { width: 100%; box-sizing: border-box; font-size: .8rem; }

/* --- blocs de réglages --- */

fieldset, details {
  border: 1px solid var(--ms-line);
  border-radius: var(--ms-radius);
  background: var(--ms-surface);
  margin: .8rem 0 0;
  padding: .6rem .8rem;
}

legend, summary {
  font-family: var(--ms-font-subtitle);
  text-transform: uppercase;
  letter-spacing: var(--ms-ls-subtitle);
  font-weight: 300;
  font-size: .7rem;
  color: var(--ms-primary);
}

/* Le navigateur pose un <legend> à cheval sur la bordure du <fieldset>, ce qui
   coupe le cadre. Sorti du flux par un float, il se range à l'intérieur ; les
   autres enfants du groupe reprennent alors la ligne. */
legend { float: left; width: 100%; padding: 0; margin-bottom: .4rem; }
fieldset > *:not(legend) { clear: both; }

summary { cursor: pointer; }
summary .hint { margin-left: .3rem; text-transform: none; letter-spacing: normal; }

label { display: block; font-size: .8rem; margin: .45rem 0; }

label input, label select {
  width: 100%;
  box-sizing: border-box;
  margin-top: .15rem;
  padding: .35rem .45rem;
  font-family: var(--ms-font-body);
  font-size: .85rem;
  color: var(--ms-text);
  background: var(--ms-blanc);
  border: 1px solid var(--ms-line);
  border-radius: var(--ms-radius);
}

label input:focus, label select:focus {
  outline: none;
  border-color: var(--ms-primary);
}

.pair { display: flex; gap: .6rem; }
.pair label { flex: 1; }

/* Intitulé et icône d'aide sur une même ligne : posé en flux, le bouton passait
   à la ligne dès que la colonne était étroite — la moitié du panneau pour une
   paire de champs. La ligne de base aligne l'icône sur la première ligne du
   texte, qui continue de se replier dans sa propre boîte. */
.aide-intitule { display: flex; align-items: baseline; gap: .25rem; }

/* l'intitulé prend toute la place, l'icône se range donc au bout de la ligne :
   d'un champ à l'autre les icônes s'alignent, et le libellé n'est pas coupé en
   deux par elle lorsqu'il se replie */
.aide-intitule > span { flex: 1; }

/* Aide dépliable : l'infobulle native n'existe pas au doigt, et elle a été
   retirée. Le bouton reprend le bleu outremer, couple sûr sur fond clair —
   l'ocre et le terracotta ne portent pas de petit texte. */
button.aide-bouton {
  /* les boutons du panneau sont pleins et bleus : celui-ci doit rester une
     ponctuation dans le libellé, pas un second bouton d'action */
  all: unset;
  color: var(--ms-primary);
  cursor: pointer;
  /* cible tactile : le tracé fait 14 px, le doigt en demande davantage */
  padding: .25rem;
  line-height: 0;
}

/* Ces deux règles ne sont pas décoratives : sans elles, les règles génériques
   des boutons (fond ocre au survol, contour ocre au focus) l'emportent en
   spécificité sur `all: unset`, et l'icône vire au noir sur pastille ocre dès
   que la souris approche. Elles sont donc scopées comme elles. */
button.aide-bouton:not(:disabled):hover { background: none; color: var(--ms-primary); }
button.aide-bouton:focus-visible {
  outline: 2px solid var(--ms-primary);
  outline-offset: 0;
  border-radius: 50%;
}

.aide {
  margin: .3rem 0 0;
  padding: .4rem .5rem;
  font-size: .78rem;
  line-height: 1.45;
  color: var(--ms-text);
  background: var(--ms-bg);
  border-left: 3px solid var(--ms-primary);
  border-radius: var(--ms-radius);
  /* l'explication tient sur plusieurs lignes, contrairement aux cellules du
     panneau qui interdisent le retour à la ligne */
  white-space: normal;
  cursor: auto;
}

input[type="file"] { font-size: .8rem; max-width: 100%; }

/* --- avancement du calcul --- */

#progress { margin-top: .8rem; }

/* 10 px, et non 4 : sur une bande de quatre pixels, aucune animation ne se
   remarque — c'est ce qui a fait échouer une première tentative. */
#progress-track {
  height: .625rem;
  background: var(--ms-surface);
  border: 1px solid var(--ms-line);
  border-radius: var(--ms-radius);
  overflow: hidden;
}

/* Remplissage en ocre : le bouton juste au-dessus est bleu, un remplissage
   bleu s'y fondrait, et l'ocre est la couleur que le guide réserve à ce qu'on
   veut faire ressortir. Aucun texte n'y étant posé, la règle de contraste sur
   les petits textes ne s'applique pas. */
#progress-bar {
  height: 100%;
  width: 0;
  opacity: 1;
  background: var(--ms-secondary);
  border-radius: var(--ms-radius);
  transition: width .3s ease;
}

/* Tant que le calcul tourne, le remplissage pulse : les événements peuvent
   être séparés de plusieurs minutes — une dalle à télécharger, une étape
   WhiteboxTools sur un gros bassin —, et une barre immobile ne se distingue
   pas d'un calcul bloqué.

   L'opacité plutôt qu'une seconde teinte : la palette n'a qu'un ocre, et
   l'atténuer laisse simplement paraître la piste blanche au-dessous. C'est en
   outre une propriété que le navigateur compose directement.

   La largeur minimale donne de quoi voir la pulsation à 0 % ; c'est un repère,
   pas un avancement : aria-valuenow et le libellé restent à zéro. */
#progress-bar.en-cours {
  min-width: .4rem;
  animation: ms-pulsation 1.4s ease-in-out infinite;
}

@keyframes ms-pulsation {
  0%, 100% { opacity: 1; }
  50% { opacity: .45; }
}

/* Phase sans compteur : la barre n'avance pas — rien n'est inventé — et la
   piste scintille à son tour. La pulsation dit « ça travaille », ce
   scintillement « on ne sait pas où l'on en est ». */
#progress-track:has(#progress-bar.indetermine) {
  background: linear-gradient(90deg,
    var(--ms-surface), var(--ms-bg), var(--ms-surface));
  background-size: 200% 100%;
  animation: ms-piste 1.6s linear infinite;
}

@keyframes ms-piste {
  from { background-position: 100% 0; }
  to { background-position: -100% 0; }
}

#progress-label { margin: .35rem 0 0; }

/* --- journal des étapes et résultat --- */

#log { margin-top: .8rem; }

#steps {
  font-size: .8rem;
  max-height: 40vh;
  overflow-y: auto;
  padding-top: .4rem;
  white-space: pre-wrap;
  line-height: 1.5;
}

#result-links { font-size: .85rem; margin-top: .8rem; }
#result-links a { margin-right: 1rem; color: var(--ms-primary); }
#result-links a:hover { color: var(--ms-accent); }

#turnstile-widget { margin-top: .8rem; }

/* --- chrome de la carte : le guide veut aussi les contrôles aux couleurs --- */

.leaflet-container { font-family: var(--ms-font-body); }

.leaflet-control-zoom a,
.leaflet-control-layers-toggle {
  color: var(--ms-primary);
  background-color: var(--ms-surface);
}

.leaflet-control-zoom a:hover { background-color: var(--ms-bg); }

.leaflet-bar, .leaflet-control-layers {
  border: 1px solid var(--ms-line);
  border-radius: var(--ms-radius);
  box-shadow: var(--ms-shadow);
}

.leaflet-control-layers-expanded {
  background: var(--ms-surface);
  color: var(--ms-text);
  font-size: .8rem;
  padding: .5rem .7rem;
  /* le panneau s'élargit de ce que réclament un nom de calque et son curseur
     côte à côte ; sans quoi le libellé d'un calcul se replierait sur trois
     lignes */
  min-width: 15rem;
}

/* Le sélecteur de couches n'est pas un formulaire du panneau : sans cette
   remise à zéro, la règle « label input » ci-dessus étire ses cases à 100 % et
   leur pose un cadre, ce qui envoie les boutons radio des fonds de carte à
   l'autre bout de la ligne. Invisible tant que le contrôle épousait son
   contenu, criant dès qu'il s'élargit pour loger les curseurs. */
.leaflet-control-layers label input {
  width: auto;
  margin: 0;
  padding: 0;
  border: none;
  background: none;
}

/* Chaque superposition porte un curseur d'opacité : au large, il tient sur la
   même ligne que le nom, à sa droite. */
.leaflet-control-layers-overlays label.couche-reglable {
  display: flex;
  align-items: center;
  gap: .5rem;
}

.leaflet-control-layers-overlays label.couche-reglable > span { flex: 1 1 auto; }

/* plus spécifique que la remise à zéro ci-dessus, qui rendrait sa largeur
   automatique */
.leaflet-control-layers input.couche-opacite {
  flex: 0 0 5rem;
  width: 5rem;
  accent-color: var(--ms-secondary);
}

/* Suppression d'un calcul : même sobriété que le « ✕ » qui retire un point du
   tableau (`button.remove`) — discret au repos, il ne doit pas concurrencer le
   nom du calque, et ne se colore qu'à l'approche. Le fond est explicitement
   remis à néant : la règle générique des boutons du panneau lui poserait sinon
   un aplat ocre, leçon déjà apprise sur l'icône d'aide des champs. */
.leaflet-control-layers button.couche-oubli {
  flex: 0 0 auto;
  margin: 0;
  padding: 0 .35rem;
  border: none;
  background: none;
  color: var(--ms-text-muted);
  font-size: .9rem;
  line-height: 1;
  letter-spacing: normal;
  cursor: pointer;
}

.leaflet-control-layers button.couche-oubli:not(:disabled):hover,
.leaflet-control-layers button.couche-oubli:focus-visible {
  background: none;
  color: var(--ms-accent);
}

/* Un nom de calque et son curseur ne tiennent pas côte à côte sur un
   téléphone : le curseur passe sous le nom, sur toute la largeur. Le panneau
   est alors borné en largeur de fenêtre — la carte n'y fait que 50 dvh, il ne
   peut pas la recouvrir.

   Cette règle est ici, et non dans le bloc mobile du haut de fichier : à
   spécificité égale, c'est la dernière écrite qui gagne, et les règles de
   bureau ci-dessus l'emportaient sur elle (constaté au navigateur). */
@media (max-width: 48rem) {
  /* border-box, sans quoi la marge intérieure s'ajoute au plafond et celui-ci
     ne veut plus dire ce qu'il annonce */
  .leaflet-control-layers-expanded {
    box-sizing: border-box;
    min-width: 0;
    max-width: 70vw;
  }
  .leaflet-control-layers-overlays label.couche-reglable { flex-wrap: wrap; }
  /* le curseur passe en dernier pour que le « ✕ » reste sur la ligne du nom :
     sans cet ordre, un curseur pleine largeur s'intercale et le bouton se
     retrouve seul sur une troisième ligne, chaque calque prenant alors 67 px
     au lieu de 45 */
  .leaflet-control-layers button.couche-oubli { order: 1; }
  .leaflet-control-layers input.couche-opacite {
    flex: 1 0 100%;
    width: auto;
    order: 2;
  }
}

/* --- champ de recherche posé sur la carte --- */

.recherche-lieu { width: 16rem; max-width: 60vw; }

/* Replié, le contrôle se réduit au carré de la loupe. */
.recherche-lieu.replie { width: auto; }
.recherche-lieu.replie #recherche,
.recherche-lieu.replie #recherche-resultats { display: none; }

/* Même gabarit que les boutons de zoom, juste en dessous. */
#recherche-bascule {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  margin: 0 0 .3rem;
  padding: 0;
  color: var(--ms-primary);
  background: var(--ms-surface);
  border: 1px solid var(--ms-line);
  border-radius: var(--ms-radius);
  box-shadow: var(--ms-shadow);
  cursor: pointer;
}

#recherche-bascule:hover { background: var(--ms-bg); color: var(--ms-primary); }
#recherche-bascule:focus-visible {
  outline: 2px solid var(--ms-secondary);
  outline-offset: 2px;
}

#recherche {
  width: 100%;
  box-sizing: border-box;
  padding: .45rem .6rem;
  font-family: var(--ms-font-body);
  font-size: .85rem;
  color: var(--ms-text);
  background: var(--ms-surface);
  border: 1px solid var(--ms-line);
  border-radius: var(--ms-radius);
  box-shadow: var(--ms-shadow);
}

#recherche:focus { outline: none; border-color: var(--ms-primary); }

#recherche-resultats {
  list-style: none;
  margin: .3rem 0 0;
  padding: 0;
  background: var(--ms-surface);
  border: 1px solid var(--ms-line);
  border-radius: var(--ms-radius);
  box-shadow: var(--ms-shadow);
  overflow: hidden;
}

#recherche-resultats li {
  padding: .4rem .6rem;
  cursor: pointer;
  border-bottom: 1px solid var(--ms-line);
}

#recherche-resultats li:last-child { border-bottom: none; }
#recherche-resultats li:hover { background: var(--ms-bg); }

#recherche-resultats strong {
  display: block;
  font-size: .82rem;
  font-weight: 400;
  color: var(--ms-primary);
}

#recherche-resultats span {
  display: block;
  font-size: .72rem;
  color: var(--ms-text-muted);
}

/* Infobulle des bassins : fond bleu, texte beige — couple sûr du guide. */
.leaflet-tooltip {
  background: var(--ms-bg-dark);
  color: var(--ms-text-on-dark);
  border: none;
  border-radius: var(--ms-radius);
  box-shadow: var(--ms-shadow);
  font-size: .8rem;
  padding: .3rem .5rem;
}
.leaflet-tooltip-left::before { border-left-color: var(--ms-bg-dark); }
.leaflet-tooltip-right::before { border-right-color: var(--ms-bg-dark); }
.leaflet-tooltip-top::before { border-top-color: var(--ms-bg-dark); }
.leaflet-tooltip-bottom::before { border-bottom-color: var(--ms-bg-dark); }

.leaflet-control-attribution {
  background: var(--ms-veil);
  font-size: .65rem;
}
.leaflet-control-attribution a { color: var(--ms-primary); }

/* les règles ci-dessus, écrites par la page, l'emportent sur le
   « [hidden] { display: none } » de la feuille du navigateur : sans ceci,
   l'attribut hidden reste sans effet sur un label ou un .pair */
[hidden] { display: none !important; }