body {
  margin: 0;
  font-family: Helvetica, Arial, sans-serif;
}

#map {
  width: 100vw;
  height: 100vh;
}

.control-panel {
  position: absolute;
  top: 0;
  right: 0;
  max-width: 320px;
  background: #fff;
  box-shadow: 0 2px 4px rgba(0,0,0,0.3);
  padding: 12px 24px;
  margin: 20px;
  font-size: 13px;
  line-height: 2;
  color: #6b6b76;
  text-transform: uppercase;
  outline: none;
}

label {
  display: inline-block;
  width: 100px;
}

input {
  margin-left: 20px;
}

p {
  font-size: 14px;
}

.info-panel {
  position: absolute;
  bottom: 40px;
  left: 20px;
  min-width: 280px;
  max-width: 360px;
  background: #fff;
  box-shadow: 0 2px 8px rgba(0,0,0,0.3);
  padding: 16px 20px;
  font-size: 13px;
  color: #333;
  border-radius: 4px;
}

.info-panel-title {
  margin: 0 0 12px 0;
  font-size: 15px;
  color: #111;
}

.info-panel-close {
  position: absolute;
  top: 10px;
  right: 12px;
  background: none;
  border: none;
  font-size: 14px;
  cursor: pointer;
  color: #666;
  padding: 0;
}

.info-row {
  display: flex;
  justify-content: space-between;
  padding: 3px 0;
  border-bottom: 1px solid #f0f0f0;
}

.info-label {
  color: #6b6b76;
  text-transform: uppercase;
  font-size: 11px;
  margin-right: 12px;
}

.info-value {
  font-weight: 500;
  text-align: right;
}

/* --- Disposition : menu à gauche, carte à droite ---------------------------------------
   Le menu n'est PAS posé sur la carte. Les deux sont côte à côte dans une boîte flexible :
   replier le menu rend sa largeur à la carte, au lieu de découvrir ce qu'il cachait. */

.appli {
  display: flex;
  width: 100%;
  height: 100%;
}

.carte {
  flex: 1 1 auto;
  /* Repère de positionnement des surcouches propres à la carte (panneau de contrôle,
     contrôles MapLibre) : sans lui, elles se placeraient par rapport à la fenêtre et
     déborderaient sur le menu. */
  position: relative;
  min-width: 0;
}

.menu {
  flex: 0 0 400px;
  width: 400px;
  display: flex;
  flex-direction: column;
  background: #fff;
  border-right: 1px solid #d8d8d8;
  overflow: hidden;
}

.menu--replie {
  flex-basis: 40px;
  width: 40px;
}

.menu-barre {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  border-bottom: 1px solid #ececec;
}

.menu-bascule {
  flex: 0 0 auto;
  box-sizing: border-box;
  width: 22px;
  height: 22px;
  /* Centrage par la boîte flexible, et non par `line-height` + `text-align` : ces deux-là
     centrent la LIGNE DE TEXTE et la largeur d'avance du glyphe, ce qui laissait le chevron
     décalé (voir la note dans reforme-panneau.js). Un enfant SVG symétrique dans une boîte
     flexible est centré exactement, sans dépendre d'aucune métrique de police. */
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f4f4f4;
  border: 1px solid #dcdcdc;
  border-radius: 3px;
  color: #555;
  cursor: pointer;
  padding: 0;
}

.menu-bascule svg {
  display: block;
}

.menu-titre-long { display: none; }

/* Replié sur grand écran, il ne reste qu'une bande de 40 px : le titre court n'y tiendrait pas
   et serait rogné par l'`overflow: hidden` du menu. C'est l'étiquette verticale qui prend le
   relais. Sur téléphone, la règle média plus bas rétablit le titre long dans les deux états —
   la barre y est pleine largeur. */
.menu--replie .menu-titre { display: none; }

.menu-titre {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #6b6b76;
}

/* Replié : le titre passe à la verticale dans la bande de 40 px. */
.menu-etiquette {
  writing-mode: vertical-rl;
  margin: 14px auto 0;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: #9a9aa2;
  white-space: nowrap;
}

.menu-onglets {
  flex: 0 0 auto;
  display: flex;
  border-bottom: 1px solid #ececec;
}

.menu-onglet {
  flex: 1 1 0;
  background: #fafafa;
  border: none;
  border-bottom: 2px solid transparent;
  padding: 9px 0 8px;
  font: 11px/1 Helvetica, Arial, sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: #8a8a92;
  cursor: pointer;
}

.menu-onglet--actif {
  background: #fff;
  border-bottom-color: #D52B1E;
  color: #222;
}

.reforme-corps {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 16px 22px 28px;
  font-size: 13px;
  line-height: 1.55;
  color: #333;
}

/* Le titre du document est affiché en tête du corps SUR GRAND ÉCRAN, et masqué en mode
   téléphone — là, c'est la barre du haut qui le porte, et le répéter deux centimètres plus bas
   ne servirait à rien (la règle est dans la requête média, en fin de fichier).

   Le corps et la barre lisent le MÊME titre : celui-ci vient du rendu markdown, celui de la
   barre de `TITRES_LONGS` dans reforme-panneau.js, qui extrait le `# ` de tête du même
   fichier. Ils ne peuvent donc pas diverger. */
.reforme-corps h2 {
  margin: 4px 0 14px;
  font-size: 16px;
  line-height: 1.3;
  color: #111;
}
.reforme-corps h3 {
  margin: 22px 0 8px;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #D52B1E;
}
.reforme-corps h4 {
  margin: 16px 0 6px;
  font-size: 13px;
  color: #111;
}
.reforme-corps p { margin: 0 0 10px; font-size: 13px; }
.reforme-corps hr {
  border: none;
  border-top: 1px solid #e6e6e6;
  margin: 18px 0;
}
.reforme-corps blockquote {
  margin: 12px 0;
  padding: 2px 0 2px 14px;
  border-left: 3px solid #D52B1E;
  color: #555;
  font-style: italic;
}
.reforme-corps blockquote p { margin: 0 0 8px; }
.reforme-corps code {
  background: #f2f2f2;
  border-radius: 3px;
  padding: 1px 4px;
  font-size: 12px;
}

/* --- Mode téléphone --------------------------------------------------------------------
   Sous 700 px, une colonne de 400 px ne laisserait pas de carte. Le menu devient donc une
   BARRE HORIZONTALE en haut : repliée elle ne montre que le titre complet et le chevron,
   dépliée elle prend tout l'écran. Le seuil est le même que celui de reforme-panneau.js,
   qui décide de l'état initial. */

@media (max-width: 700px) {
  .appli { flex-direction: column; }

  .menu {
    flex: 0 0 auto;
    width: auto;
    border-right: none;
    border-bottom: 1px solid #d8d8d8;
  }

  /* Dépliée, la barre prend toute la hauteur : sur un téléphone, lire le texte et regarder la
     carte en même temps n'a pas de sens, et un partage 50/50 rendrait les deux inutilisables. */
  .menu:not(.menu--replie) { flex: 1 1 auto; min-height: 0; }

  .menu--replie { flex: 0 0 auto; width: auto; }

  /* Le titre complet remplace le titre court ET l'étiquette verticale. */
  .menu-titre { display: none; }
  .menu-etiquette { display: none; }
  .menu-titre-long {
    display: block;
    font-size: 12px;
    line-height: 1.35;
    font-weight: 600;
    color: #222;
  }

  .menu-barre {
    /* `center` et non `flex-start` : aligner les hauts laissait le titre 2,9 px au-dessus du
       centre du chevron — exactement la moitié de l'écart entre la hauteur du bouton (22 px) et
       celle d'une ligne de titre (16,2 px). Centrer aligne les deux quel que soit le nombre de
       lignes du titre, ce qui compte : il passe à deux lignes sur les écrans étroits. */
    align-items: center;
    padding: 11px 13px;
  }

  /* Le chevron indique le haut et le bas, pas la gauche et la droite : le panneau s'ouvre
     désormais vers le bas. */
  .menu-bascule { transform: rotate(-90deg); }

  .reforme-corps { padding: 14px 16px 26px; }

  /* La barre du haut porte déjà le titre complet : inutile de le répéter en tête du texte. */
  .reforme-corps h2 { display: none; }
}

/* --- Onglet « Contribuer » ------------------------------------------------------------- */

.contrib { display: flex; flex-direction: column; gap: 12px; }

/* Sélecteur de langue du formulaire : posé en haut à droite du panneau, hors du flux des
   champs pour ne pas se lire comme l'un d'eux. Le `margin-bottom` négatif rattrape le
   `gap: 12px` de .contrib — un simple interrupteur n'a pas besoin d'autant d'air que deux
   champs de saisie. */
.contrib-langue {
  align-self: flex-end;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-bottom: -6px;
  color: #6b6b76;
}

.contrib-langue-globe { display: block; }

.contrib-langue-choix {
  padding: 3px 7px;
  border: 1px solid #d8d8d8;
  border-radius: 3px;
  background: #fff;
  font: 11px/1 Helvetica, Arial, sans-serif;
  letter-spacing: 0.06em;
  color: #6b6b76;
  cursor: pointer;
}

.contrib-langue-choix:hover { border-color: #b9b9b9; color: #333; }

.contrib-langue-choix--actif,
.contrib-langue-choix--actif:hover {
  border-color: #D52B1E;
  background: #D52B1E;
  color: #fff;
}

.contrib-intro {
  margin: 0 0 4px;
  color: #555;
  font-style: italic;
}

.contrib-label {
  display: block;
  /* Même remise à zéro que .contrib-radio, et pour la même raison : la règle `label { width:
     100px }` du haut de cette feuille vise le panneau de couches, mais s'applique aussi ici.
     Sans elle, l'étiquette fait 100 px de large et le `width: 100%` des champs se calcule sur
     CETTE largeur — les zones de saisie se retrouvaient à 100 px dans un panneau de 400. */
  width: auto;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #6b6b76;
}

.contrib-champ {
  display: block;
  width: 100%;
  box-sizing: border-box;   /* sans quoi le rembourrage pousse le champ hors du panneau */
  margin: 5px 0 0;
  padding: 7px 9px;
  border: 1px solid #d8d8d8;
  border-radius: 3px;
  font: 13px/1.4 Helvetica, Arial, sans-serif;
  color: #222;
  background: #fff;
}

/* --- auto-complétion du champ « lieu » -------------------------------------------------- */

/* Repère de positionnement de la liste. Sans lui, elle se placerait par rapport au panneau et
   non sous le champ. */
.contrib-lieu { position: relative; }

.contrib-suggestions {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  /* Au-dessus des champs qui suivent : sans cela la liste passerait DERRIÈRE le champ « nom
     proposé », qui est opaque et immédiatement en dessous. */
  z-index: 5;
  margin: 2px 0 0;
  padding: 0;
  list-style: none;
  max-height: 236px;
  overflow-y: auto;
  background: #fff;
  border: 1px solid #d8d8d8;
  border-radius: 3px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.10);
}

.contrib-suggestion {
  /* La liste vit DANS le <label>, qui porte `text-transform: uppercase` et un interlettrage
     élargi pour son intitulé. Sans ces remises à zéro, « Cleveland » s'affichait
     « CLEVELAND » : des toponymes présentés comme des libellés d'interface. */
  text-transform: none;
  letter-spacing: 0;
  display: flex;
  align-items: baseline;
  gap: 6px;
  padding: 6px 9px;
  font-size: 13px;
  cursor: pointer;
}

.contrib-suggestion--actif { background: #f3f3f5; }

/* Le nom que porte la carte : c'est lui que le champ demande, donc lui qui mène la ligne. */
.contrib-suggestion-nom { color: #222; }

/* Le nom d'avant la réforme, en retrait : un repère pour reconnaître le lieu quand le jeu de
   mots s'éloigne de l'original, pas ce qu'on saisit. */
.contrib-suggestion-avant {
  color: #8a8a94;
  font-size: 12px;
  /* Un nom long ne doit pas pousser le nom réel hors de la ligne. */
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.contrib-champ:focus {
  outline: none;
  border-color: #D52B1E;
}

.contrib-note { resize: vertical; }

.contrib-registre {
  border: none;
  margin: 0;
  padding: 0;
}

.contrib-radio {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin: 6px 16px 0 0;
  font-size: 13px;
  text-transform: none;
  letter-spacing: 0;
  color: #333;
  /* La règle `label { width: 100px }` d'app.css vise le panneau de couches ; sans cette
     remise à zéro, les deux boutons radio se retrouvent l'un sous l'autre. */
  width: auto;
}

.contrib-radio input { margin: 0; }

/* Champ-piège : hors de l'écran plutôt que `display: none`, que certains automates savent
   détecter et sauter. */
.contrib-piege {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  opacity: 0;
}

.contrib-erreur {
  margin: 0;
  padding: 8px 10px;
  background: #fdf0ef;
  border-left: 3px solid #D52B1E;
  color: #8a2018;
  font-size: 12px;
}

.contrib-merci {
  margin: 0 0 14px;
  padding: 10px 12px;
  background: #f2f7f2;
  border-left: 3px solid #4a8a4a;
  color: #2f5c2f;
}

.contrib-envoyer {
  align-self: flex-start;
  padding: 9px 18px;
  background: #D52B1E;
  border: none;
  border-radius: 3px;
  color: #fff;
  font: 11px/1 Helvetica, Arial, sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  cursor: pointer;
}

.contrib-envoyer:disabled { background: #c99; cursor: default; }

/* --- Pourboire, en pied de l'onglet Contribuer ---------------------------------------------
   DISCRET À DESSEIN. L'onglet sert à recevoir des propositions de noms ; un appel au don aussi
   voyant que `.contrib-envoyer` entrerait en concurrence avec lui à l'endroit exact où l'on veut
   que le visiteur clique « Soumettre ». D'où un lien en petit corps sous un filet, et non un
   bouton plein.

   Le filet compte autant que la taille : sans lui, la ligne se lit comme une étape de plus du
   formulaire. Il la détache et la renvoie au rang de note de pied. */

/* `.contrib .contrib-cafe` et non `.contrib-cafe` seul : le bloc est un <p> à l'intérieur de
   `.reforme-corps`, et la règle `.reforme-corps p { font-size: 13px }` a une spécificité de
   (0,1,1) contre (0,1,0). Elle l'emportait, et le pourboire rendait à 13 px — soit la taille du
   texte courant, exactement ce qu'on ne voulait pas. Mesuré au navigateur, pas deviné. */
.contrib .contrib-cafe {
  margin: 10px 0 0;
  padding-top: 14px;
  border-top: 1px solid #ececec;
  font-size: 11.5px;
  line-height: 1.55;
  /* #6b6b76 et NON le #8a8a92 employé ailleurs dans le panneau : mesuré à 3,43:1 sur blanc,
     celui-ci tombe sous le seuil AA de 4,5:1 pour du petit texte. Le #6b6b76 donne 5,26:1. */
  color: #6b6b76;
}

.contrib-cafe-lien {
  /* `inline-flex` pour que la tasse et le mot restent solidaires : en `inline`, un retour à la
     ligne pouvait laisser la tasse seule en fin de ligne. */
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-left: 5px;
  /* 7,31:1 sur blanc. L'accent vif #D52B1E passe aussi (5,01:1) mais crierait plus fort que le
     bouton d'envoi juste au-dessus, ce qui est exactement l'inverse du but. */
  color: #A81F15;
  text-decoration: underline;
  text-underline-offset: 2px;
  white-space: nowrap;
}

.contrib-cafe-lien:hover { color: #D52B1E; }

/* Anneau visible au clavier : le lien est le tout dernier élément focalisable de l'onglet, donc
   celui qu'on atteint en tabulant depuis le bouton d'envoi. Sans anneau, on ne sait plus où on est. */
.contrib-cafe-lien:focus-visible {
  outline: 2px solid #D52B1E;
  outline-offset: 2px;
}

.contrib-cafe-tasse { display: block; flex: 0 0 auto; }