/* Polices auto-hébergées (Fontsource, licence OFL) : plus aucun tiers
   dans le chemin critique — même origine, même CDN GitLab Pages que l'app.
   Le sous-ensemble latin inclut U+0152-0153 : « nœud » est couvert. */
@font-face {
  font-family: "Atkinson Hyperlegible";
  font-style: normal; font-weight: 400; font-display: swap;
  src: url("fonts/atkinson-hyperlegible-latin-400-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
  font-family: "Atkinson Hyperlegible";
  font-style: normal; font-weight: 700; font-display: swap;
  src: url("fonts/atkinson-hyperlegible-latin-700-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
  font-family: "Barlow Condensed";
  font-style: normal; font-weight: 600; font-display: swap;
  src: url("fonts/barlow-condensed-latin-600-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
  font-family: "Barlow Condensed";
  font-style: normal; font-weight: 700; font-display: swap;
  src: url("fonts/barlow-condensed-latin-700-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

/* ---------------------------------------------------------------- tokens
   Palette tirée du monde du panneau EB10 : plaque blanche, liseré rouge
   signalisation, lettrage noir condensé (clin d'œil aux « Caractères L »). */
:root {
  --papier: #eef1f0;        /* fond d'écran, gris-vert froid de chaussée */
  --plaque: #ffffff;
  --rouge: #b3252c;         /* rouge signalisation */
  --rouge-sombre: #8c1d23;
  --encre: #23272c;
  --gris: #6f767e;
  --ok: #22794a;            /* présent dans OSM */
  --inconnu: #9aa0a6;
  --ombre: 0 1px 3px rgba(35, 39, 44, .18);
  --display: "Barlow Condensed", "Arial Narrow", sans-serif;
  --body: "Atkinson Hyperlegible", system-ui, sans-serif;
}

* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body {
  font-family: var(--body);
  color: var(--encre);
  background: var(--papier);
  display: flex;
}

/* La « plaque » : signature visuelle, réplique du cartouche EB10.
   La variante .eb20 porte la barre diagonale rouge du panneau de sortie. */
.plate {
  display: inline-block;
  position: relative;
  background: var(--plaque);
  border: 3px solid var(--rouge);
  border-radius: 6px;
  padding: 2px 10px;
  font-family: var(--display);
  font-weight: 700;
  text-transform: uppercase;
  color: var(--encre);
  box-shadow: var(--ombre);
  overflow: hidden;
}
.plate.eb20::after {
  content: "";
  position: absolute;
  left: -12%; right: -12%;
  top: 50%;
  height: 3px;
  background: var(--rouge);
  transform: rotate(-24deg);
}

/* ------------------------------------------------------------- communes */
.communes { display: flex; flex-direction: column; gap: 8px; min-height: 0; }
#commune-search {
  font: inherit; font-size: .9rem;
  padding: 8px 10px;
  border: 1.5px solid var(--encre);
  border-radius: 4px;
  background: var(--plaque);
}
#commune-search:focus-visible { outline: 3px solid var(--rouge); outline-offset: 1px; }

#commune-list {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column; gap: 6px;
  max-height: 340px; overflow-y: auto;
}
#commune-list button {
  width: 100%;
  display: flex; align-items: center; gap: 10px;
  background: var(--plaque);
  border: 2px solid var(--rouge);
  border-radius: 6px;
  padding: 7px 10px;
  cursor: pointer;
  font-family: var(--display);
  font-weight: 600;
  font-size: 1.02rem;
  text-transform: uppercase;
  color: var(--encre);
  text-align: left;
  box-shadow: var(--ombre);
}
#commune-list button:hover { border-color: var(--rouge-sombre); transform: translateY(-1px); }
#commune-list button:focus-visible { outline: 3px solid var(--encre); outline-offset: 2px; }
#commune-list .nom { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#commune-list .badge {
  font-family: var(--body); font-size: .72rem; font-weight: 600;
  padding: 2px 7px; border-radius: 99px; white-space: nowrap;
}
.badge.manquants { background: var(--rouge); color: #fff; }
.badge.complet { background: #dce8e0; color: var(--ok); }
.hint { font-size: .75rem; color: var(--gris); margin: 0; }


.popup-head {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px;
  border-bottom: 1.5px solid #e3e6e5;
}
.popup-head .plate { font-size: 1rem; }
.popup-head .commune {
  font-family: var(--display); font-weight: 600; font-size: 1.1rem;
  text-transform: uppercase;
}
.popup-body { padding: 10px 12px 12px; display: flex; flex-direction: column; gap: 9px; }
.status { font-size: .82rem; font-weight: 600; }
.status.missing { color: var(--rouge); }
.status.matched { color: var(--ok); }
.status.unknown { color: #3273a8; font-weight: 600; }
.status .meta { display: block; font-weight: 400; color: var(--gris); font-size: .75rem; }

.photos { display: flex; gap: 6px; flex-wrap: wrap; }
.photos a { display: block; position: relative; }
.photos a { width: 100%; }
.photos img {
  width: 100%; height: 120px; object-fit: cover;
  border-radius: 4px; border: 1px solid #d5d9d8;
  background: #e8ebea;
}
.photos .dt {
  position: absolute; bottom: 4px; left: 4px;
  font-size: .62rem; background: rgba(35,39,44,.75); color: #fff;
  padding: 0 3px; border-radius: 2px;
}

.actions { display: flex; gap: 6px; flex-wrap: wrap; }
.actions button, .actions a {
  font: inherit; font-size: .78rem; font-weight: 600;
  text-decoration: none; text-align: center;
  padding: 6px 9px; border-radius: 4px; cursor: pointer;
  border: 1.5px solid var(--encre); background: var(--plaque); color: var(--encre);
}
.actions .primary { background: var(--encre); color: var(--plaque); }
.actions button:hover, .actions a:hover { border-color: var(--rouge); color: var(--rouge); }
.actions .primary:hover { background: var(--rouge); border-color: var(--rouge); color: #fff; }
.actions button:disabled { opacity: .5; cursor: wait; }
.refresh-note { font-size: .7rem; color: var(--gris); margin: 0; }

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
}

.badge.inconnu { background: #e4e7e6; color: var(--gris); }

.select-row select {
  font: inherit; font-size: .85rem;
  padding: 3px 6px;
  border: 1.5px solid var(--encre);
  border-radius: 4px;
  background: var(--plaque);
}
.select-row select:focus-visible { outline: 3px solid var(--rouge); outline-offset: 1px; }

#value-search {
  font: inherit; font-size: .9rem;
  padding: 8px 10px;
  border: 1.5px solid var(--encre);
  border-radius: 4px;
  background: var(--plaque);
  width: 100%;
}
#value-search:focus-visible { outline: 3px solid var(--rouge); outline-offset: 1px; }
#commune-list button.active { background: var(--encre); color: var(--plaque); }

/* ------------------------------------------------ dropdown types de panneaux */
.value-search-wrap { position: relative; }
#value-dropdown {
  position: absolute; z-index: 40;
  top: calc(100% + 2px); left: 0; right: 0;
  margin: 0; padding: 4px;
  list-style: none;
  background: var(--plaque);
  border: 1.5px solid var(--encre);
  border-radius: 6px;
  box-shadow: 0 6px 18px rgba(35,39,44,.25);
  max-height: 320px; overflow-y: auto;
}
#value-dropdown li {
  display: flex; align-items: center; gap: 9px;
  padding: 5px 7px;
  border-radius: 4px;
  cursor: pointer;
  font-size: .88rem;
}
#value-dropdown li:hover, #value-dropdown li[aria-selected="true"] { background: #eef1f0; }
#value-dropdown .sign-icon { flex: none; width: 24px; height: 24px; }
#value-dropdown .code { font-family: var(--display); font-weight: 600; font-size: 1rem; }
#value-dropdown .n { margin-left: auto; color: var(--gris); font-size: .75rem; }

/* --------------------------------------------------------------- légende */
.dot { width: 15px; height: 15px; flex: none; display: inline-block;
  vertical-align: -2px; }
.verify-note { display: block; margin-top: 4px; font-size: .78rem; color: var(--rouge); }

.status.incomparable { color: #3273a8; }

.value-search-wrap { display: flex; gap: 6px; }
.value-search-wrap #value-search { flex: 1; min-width: 0; }
#value-dropdown { max-height: 320px; overflow-y: auto; }
#value-dropdown .hint-row {
  font-size: .72rem; color: var(--gris); padding: 6px 10px;
  border-top: 1px solid #e3e6e5; position: sticky; bottom: 0; background: var(--plaque);
}

/* icône du popup : même gabarit que les boutons, pas un poster */
.popup-head .sign-icon { flex: none; width: 22px; height: 22px; }

/* marques de contribution */
.marks {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px;
  margin-top: 8px; padding-top: 8px; border-top: 1px solid #e3e6e5;
  font-size: .82rem;
}
.marks select { font: inherit; padding: 2px 4px; max-width: 190px; }
.marks .mark-done { display: flex; align-items: center; gap: 5px; cursor: pointer; }

/* témoin de requête Overpass en cours */
#osm-progress {
  position: absolute; top: 16px; left: 50%; transform: translateX(-50%);
  z-index: 60; display: flex; align-items: center; gap: 10px;
  background: var(--rouge); color: #fff;
  font-family: var(--display); font-size: 1rem; font-weight: 600;
  letter-spacing: .03em; text-transform: uppercase;
  padding: 10px 20px; border-radius: 999px;
  box-shadow: 0 4px 16px rgba(179, 37, 44, .45);
  animation: osmpulse 1.6s ease-in-out infinite;
}
@keyframes osmpulse {
  0%, 100% { box-shadow: 0 4px 16px rgba(179, 37, 44, .45); }
  50% { box-shadow: 0 4px 26px rgba(179, 37, 44, .8); }
}
@media (prefers-reduced-motion: reduce) { #osm-progress { animation: none; } }
#osm-progress[hidden] { display: none; }
@keyframes spin360 { to { transform: rotate(360deg); } }
#osm-progress .spin {
  width: 14px; height: 14px; border-radius: 50%;
  border: 2px solid rgba(255,255,255,.35); border-top-color: #fff;
  animation: spin360 .7s linear infinite;
}
@media (prefers-reduced-motion: reduce) { @keyframes spin360 { to { transform: rotate(360deg); } }
#osm-progress .spin { animation: none; } }

/* alerte : toutes les instances Overpass ont échoué */
#osm-error {
  position: absolute; top: 16px; left: 50%; transform: translateX(-50%);
  z-index: 61; display: flex; align-items: center; gap: 12px;
  max-width: min(560px, calc(100% - 32px));
  background: #fff; color: var(--encre);
  border: 2px solid var(--rouge); border-radius: 10px;
  font-size: .86rem; line-height: 1.4;
  padding: 10px 12px 10px 14px;
  box-shadow: 0 6px 20px rgba(0,0,0,.25);
}
#osm-error[hidden] { display: none; }
#osm-error button {
  flex: none; border: 0; background: none; cursor: pointer;
  font-size: 1.2rem; line-height: 1; color: var(--rouge); padding: 2px 4px;
}

.status.partial { color: #b06c00; }
.seg-detail { margin: 4px 0 0; padding: 0 0 0 2px; list-style: none; font-size: .8rem; }
.seg-detail li { display: flex; align-items: center; gap: 7px; margin-top: 3px; }
.seg-detail .plate.mini { font-size: .72rem; padding: 1px 6px; }

/* sous-menu « comment cartographier » */
.howto { margin-top: 8px; border-top: 1px solid #e3e6e5; padding-top: 7px; font-size: .8rem; }
.howto summary { cursor: pointer; font-weight: 600; color: #4b5157; }
.howto ul { margin: 6px 0 0; padding-left: 18px; }
.howto li { margin-top: 4px; line-height: 1.4; }
.howto code { background: #f2f3f4; padding: 0 4px; border-radius: 3px; font-size: .74rem; }
.howto-src { margin: 6px 0 0; font-size: .72rem; }

/* Croix de vidage IDENTIQUE Chrome/Firefox : la native WebKit est masquée,
   remplacée par la nôtre (même gabarit que celle de Chrome) sur les deux
   champs de recherche. */
input[type="search"]::-webkit-search-cancel-button {
  -webkit-appearance: none; appearance: none; display: none;
}
.search-clear {
  position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
  width: 18px; height: 18px; padding: 0; border: 0; border-radius: 50%;
  background: transparent; color: #5f6368;
  font-size: 15px; line-height: 18px; text-align: center; cursor: pointer;
}
.search-clear:hover { background: #e8eaec; }
.search-clear:focus-visible { outline: 2px solid var(--rouge); }
.search-clear[hidden] { display: none; }

/* ==================== UI v4 — charte graphique Panoramax ================== */
:root {
  --pnx-blue: #2954e9;
  --pnx-blue-dark: #0a1f69;
  --pnx-blue-pale: #f2f5ff;
  --pnx-blue-semi: #d7dffc;
  --pnx-grey: #f5f5f5;
  --pnx-grey-pale: #cfd2cf;
  --pnx-font-color: #3e3e3e;
  --pnx-orange: #ff6f00;
  --body: "Atkinson Hyperlegible", sans-serif;
}
body { display: block; font-family: var(--body); color: var(--pnx-font-color); }
#map { position: fixed; inset: 0; height: 100%; width: 100%; }

#demo-banner {
  position: fixed; top: 60px; left: 50%; transform: translateX(-50%); z-index: 60;
  background: #ffffff; color: #7a5a00; border: 1px solid var(--pnx-orange);
  border-radius: 10px; padding: 6px 14px; font-size: .8rem; font-weight: 700;
  box-shadow: 0 2px 8px rgba(0,0,0,.2);
}

/* cartes et menus flottants, gabarit Panoramax (blanc, 10px, bordure grise) */
/* OPACITÉ TOTALE : aucun menu ne laisse voir la carte au travers */
.float-card, .float-menu summary, .float-menu .menu-body,
#commune-list, #value-dropdown, #point-panel {
  background: #ffffff; opacity: 1;
}
.float-card, .float-menu summary {
  border: 1px solid var(--pnx-grey-pale); border-radius: 65px;
  box-shadow: 0 1px 5px rgba(0,0,0,.18);
}
.float-menu .menu-body {
  border: 1px solid var(--pnx-grey-pale); border-radius: 12px;
  box-shadow: 0 4px 14px rgba(0,0,0,.22);
}

/* rangée haut-gauche : commune | panneau | Filtres */
#topbar {
  position: fixed; top: 10px; left: 10px; z-index: 50;
  display: flex; align-items: flex-start; gap: 8px;
  max-width: calc(100vw - 20px); flex-wrap: wrap;
}
.float-card { position: relative; padding: 4px 6px; }
#topbar input[type="search"] {
  border: 0; outline: 0; font: inherit; color: var(--pnx-font-color);
  padding: 7px 26px 7px 8px; width: 235px; max-width: 56vw; background: transparent;
}
#step-commune {
  padding-left: 30px;
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%233e3e3e" stroke-width="2"><circle cx="11" cy="11" r="7"/><path d="m20 20-4-4"/></svg>');
  background-repeat: no-repeat; background-size: 16px; background-position: 10px 50%;
}
.float-menu summary .chev { font-size: .7rem; margin-left: 2px; }
#topbar .float-card:focus-within { border-color: var(--pnx-blue); box-shadow: 0 0 0 2px var(--pnx-blue-semi); }
.value-search-wrap { display: flex; align-items: center; }
.value-search-wrap input { width: 275px; }
.search-clear {
  position: absolute; right: 8px; top: 50%; transform: translateY(-50%);
  width: 20px; height: 20px; border: 0; border-radius: 50%;
  background: var(--pnx-grey); color: var(--pnx-font-color);
  font-size: .9rem; line-height: 1; cursor: pointer; padding: 0; z-index: 2;
}
.search-clear:hover { background: var(--pnx-blue); color: #fff; }
#topbar input[type="search"]::-webkit-search-cancel-button { display: none; }
.step[data-locked] { opacity: .5; pointer-events: none; }

/* menus déroulants flottants (Filtres, Calques, i) */
.float-menu { position: relative; }
.float-menu summary {
  list-style: none; cursor: pointer; user-select: none;
  padding: 8px 16px; font-weight: 700; color: var(--pnx-font-color);
  display: inline-block;
}
.float-menu summary::-webkit-details-marker { display: none; }
.float-menu[open] summary {
  background: var(--pnx-blue); border-color: var(--pnx-blue); color: #fff;
}
.float-menu .menu-body {
  position: absolute; margin-top: 6px; padding: 12px;
  width: 270px; max-width: calc(100vw - 24px); z-index: 55;
}
#filters-menu .menu-body { left: 0; min-width: 440px; }
#filters-menu .toggle, #layers-menu .toggle { display: flex; gap: 7px; font-size: .86rem; margin: 6px 0 0; align-items: center; }
#filters-menu .select-row select { font: inherit; padding: 3px 6px; border: 1px solid var(--pnx-grey-pale); border-radius: 6px; }

#layers-menu { position: fixed; top: 10px; right: 10px; z-index: 50; }
#layers-menu .menu-body { right: 0; }

#info-menu { position: fixed; bottom: 26px; left: 10px; z-index: 50; }
#info-menu summary {
  width: 38px; height: 38px; padding: 0; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-family: Georgia, serif; font-style: italic; font-size: 1.15rem;
}
#info-menu .menu-body { bottom: calc(100% + 8px); left: 0; width: 320px; max-height: 70vh; overflow-y: auto; }
#info-menu hr { border: 0; border-top: 1px solid var(--pnx-grey-pale); margin: 10px 0; }
#info-menu .about-body { font-size: .78rem; line-height: 1.5; }
#info-menu .about-body p { margin: 0 0 8px; }
#info-menu .about-body a { color: var(--pnx-blue); }

/* listes de suggestions (communes, types) */
.commune-search-wrap #commune-list, .value-search-wrap #value-dropdown {
  position: absolute; left: 0; top: calc(100% + 6px); z-index: 56;
  margin: 0; padding: 4px; list-style: none; min-width: 100%;
  background: #fff; border: 1px solid var(--pnx-grey-pale); border-radius: 10px;
  box-shadow: 0 4px 14px rgba(0,0,0,.18);
  max-height: 320px; overflow-y: auto;
}
.commune-search-wrap #commune-list[hidden], .value-search-wrap #value-dropdown[hidden] { display: none; }
#step-commune .hint { position: absolute; top: calc(100% + 4px); left: 4px; margin: 0;
  background: #fff; border-radius: 6px; padding: 2px 8px; font-size: .72rem; box-shadow: 0 1px 4px rgba(0,0,0,.15); }
#step-commune .hint:empty { display: none; }

/* panneau latéral du point sélectionné */
#point-panel {
  position: fixed; top: 60px; left: 10px; bottom: 80px; z-index: 45;
  width: min(540px, calc(100vw - 20px));
  border: 1px solid var(--pnx-grey-pale); border-radius: 12px;
  background: #fff; box-shadow: 0 6px 22px rgba(0,0,0,.28);
  display: flex; flex-direction: column; overflow: hidden;
}
#point-panel[hidden] { display: none; }
#point-panel-close {
  position: absolute; top: 8px; right: 8px; z-index: 2;
  width: 30px; height: 30px; border: 0; border-radius: 50%;
  background: rgba(10,31,105,.75); color: #fff; font-size: 1.15rem;
  line-height: 1; cursor: pointer;
}
#point-panel-close:hover { background: var(--pnx-blue); }
#point-panel-content { overflow-y: auto; flex: 1; }
/* petits écrans : la rangée de recherche passe sur 2-3 lignes → le panneau
   de point démarre plus bas pour ne pas passer dessous */
@media (max-width: 720px) { #point-panel { top: 150px; } }
/* miniature à sa TAILLE D'ORIGINE ; le max-width ne la réduit que si le
   panneau (donc l'écran) est plus étroit qu'elle */
#point-panel-content .photos a { width: auto; }
#point-panel-content .photos img {
  width: auto; height: auto; max-width: 100%; object-fit: unset; max-height: none;
}

#info-menu .map-credits { border-top: 1px solid var(--pnx-grey-pale); padding-top: 8px; }

#generated-at { font-weight: 700; }
#osm-login {
  font: inherit; font-size: .78rem; font-weight: 700; cursor: pointer;
  border: 1px solid var(--pnx-blue); color: var(--pnx-blue); background: #fff;
  border-radius: 65px; padding: 5px 12px; margin: 0 0 8px;
}
#osm-login:hover { background: var(--pnx-blue-pale); }
[data-role="shared-mark"]:empty { display: none; }
[data-role="shared-mark"] { color: var(--pnx-blue-dark); font-weight: 600; }

/* bandeau précalcul (menu Filtres) */
#pre-info { display: flex; align-items: center; gap: 8px; font-size: 12px;
  color: #5b6470; padding-top: 2px; }
#pre-info button { font: inherit; padding: 3px 10px; border-radius: 999px;
  border: 1px solid #c8cdd4; background: #fff; cursor: pointer; }
#pre-info button:hover:not(:disabled) { border-color: #2954e9; color: #2954e9; }
#pre-info button:disabled { opacity: 0.5; cursor: default; }

.howto-sub { margin: 6px 0 2px; font-weight: 600; font-size: .78rem;
  color: #444c56; text-transform: uppercase; letter-spacing: .03em; }


.menu-section {
  margin: 10px 0 4px; font-family: var(--display); font-weight: 600;
  font-size: .78rem; text-transform: uppercase; letter-spacing: .04em;
  color: var(--gris);
}