/* VELO — feuille de style. Aucune couleur en dur hors de ce bloc de variables,
   aucune origine tierce, aucune police à télécharger. */
:root {
  --velo-mer:              #cfe3ea;
  --velo-cote:             #7fa3b0;
  --velo-voirie:           #ffffff;
  --velo-departementale:   #e8a33d;
  --velo-propre:           #1b7f4b;
  --velo-bande:            #4aa06a;
  --velo-partage:          #8a8f7a;
  --velo-interdit:         #d62828;
  --velo-position:         #1f5f8b;
  --velo-position-halo:    rgba(31, 95, 139, .18);
  --velo-texte:            #14140f;
  --velo-halo:             #ffffff;
  --velo-fond:             #f4f1e4;
  --velo-encre:            #14140f;
  --velo-doux:             #3a3a30;
  --velo-filet:            #d8d3c0;
  --sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto,
          "Helvetica Neue", Arial, sans-serif;
}
* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body {
  font-family: var(--sans); color: var(--velo-encre);
  background: var(--velo-fond);
  display: flex; flex-direction: column;
  overscroll-behavior: none;
}
.evitement { position: absolute; left: -9999px; }
.evitement:focus { left: 8px; top: 8px; z-index: 50; background: var(--velo-encre);
                   color: var(--velo-fond); padding: .6rem 1rem; }

header {
  display: flex; align-items: baseline; gap: 1rem; flex-wrap: wrap;
  padding: .55rem .9rem; border-bottom: 3px solid var(--velo-encre);
  background: var(--velo-fond);
}
header h1 { font-size: 1.05rem; margin: 0; letter-spacing: -.01em; }
header h1 b { background: var(--velo-propre); color: #fff; padding: 0 .3em; }
header p { margin: 0; font-size: .8rem; color: var(--velo-doux); }
header a { color: var(--velo-doux); font-size: .8rem; }

main { position: relative; flex: 1; min-height: 0; }
/* POSITIONNEMENT ABSOLU, ET NON height:100%.
   Un « height: 100% » sur l'enfant d'un conteneur flexible ne se résout pas de
   façon fiable : selon le moteur, la hauteur rendue est zéro. Le canvas mesurait
   alors 0 pixel de haut, tout se dessinait dans le vide, et rien ne levait
   d'erreur — une carte vide sans le moindre message. inset:0 dans un parent
   positionné donne toujours la bonne taille. */
#carte { position: absolute; inset: 0; width: 100%; height: 100%;
         display: block; touch-action: none;
         cursor: grab; background: var(--velo-mer); }
#carte:active { cursor: grabbing; }

.outils { position: absolute; top: .7rem; right: .7rem; display: flex;
          flex-direction: column; gap: .4rem; }
.outils button {
  font: 600 .85rem/1 var(--sans); padding: .6rem .7rem; min-width: 2.6rem;
  background: var(--velo-fond); color: var(--velo-encre);
  border: 2px solid var(--velo-encre); cursor: pointer;
}
.outils button:hover, .outils button:focus-visible {
  background: var(--velo-propre); color: #fff;
}
.outils button[aria-pressed="true"] { background: var(--velo-position); color: #fff; }

.legende {
  position: absolute; left: .7rem; top: .7rem; background: var(--velo-fond);
  border: 2px solid var(--velo-encre); padding: .6rem .8rem; font-size: .8rem;
  max-width: 15rem;
}
.legende h2 { font-size: .72rem; text-transform: uppercase; letter-spacing: .1em;
              margin: 0 0 .45rem; color: var(--velo-doux); }
.legende label { display: flex; align-items: center; gap: .45rem; padding: .12rem 0;
                 cursor: pointer; }
.legende .cle { width: 26px; height: 0; border-top-width: 3px;
                border-top-style: solid; flex: none; }
.cle-propre { border-top-color: var(--velo-propre); }
.cle-bande  { border-top-color: var(--velo-bande); border-top-style: dashed; }
.cle-dep    { border-top-color: var(--velo-departementale); border-top-width: 4px; }
.cle-int    { border-top-color: var(--velo-interdit); border-top-width: 4px;
              border-top-style: dashed; }

#proche {
  position: absolute; left: .7rem; right: .7rem; bottom: .7rem;
  background: var(--velo-encre); color: var(--velo-fond);
  padding: .7rem .9rem; font-size: .95rem; line-height: 1.35;
}
#proche span { display: block; font-size: .85rem; opacity: .85; }

/* Ligne d'état : combien d'objets ont été tracés, à quelle échelle, en combien
   de millisecondes. Provisoire, le temps de comprendre ce que voit l'écran d'en
   face — un bandeau muet ne dit rien à personne. */
#mesure {
  position: absolute; left: .7rem; bottom: .7rem; margin: 0; z-index: 10;
  background: var(--velo-encre); color: var(--velo-fond);
  font: 500 .72rem/1.3 var(--sans); padding: .3rem .55rem;
}

/* L'ATTRIBUT hidden DOIT GAGNER.
   `display: grid` est une règle d'auteur : elle écrase le `display: none` que le
   navigateur applique à [hidden]. Le bandeau de chargement ne disparaissait donc
   jamais, et comme il porte la couleur de la mer et couvre toute la surface, il
   masquait la carte correctement dessinée en dessous. Une heure de recherche
   pour une règle manquante de trois mots. */
#etat { position: absolute; inset: 0; display: grid; place-items: center;
        background: var(--velo-mer); color: var(--velo-doux); font-size: .9rem;
        padding: 0 1rem; text-align: center; }
#etat[hidden] { display: none; }

footer { padding: .5rem .9rem; font-size: .72rem; color: var(--velo-doux);
         border-top: 1px solid var(--velo-filet); }
footer a { color: var(--velo-doux); }
footer p { margin: .35rem 0 0; }
footer details { }
footer summary { cursor: pointer; font-weight: 600; color: var(--velo-encre); }
footer dl { margin: .5rem 0 0; display: grid; grid-template-columns: auto 1fr;
            gap: .2rem .8rem; max-width: 62rem; }
footer dt { font-weight: 700; color: var(--velo-encre); }
footer dd { margin: 0; }
footer code { font-size: .95em; background: var(--velo-filet); padding: 0 .25em; }

@media (max-width: 620px) {
  .legende { display: none; }
  header p { display: none; }
}