/* ===========================================================
   PLU App — "Atelier papier" (Variant E)
   Drop-in replacement for style.css
   Pairs with index.html in this folder. Keeps every class/id
   name used by app.js, so JS-generated markup restyles for free.
   =========================================================== */

:root {
  /* ===== Theme « Forster » — repeint le 12/08/2026 ==========================
     Remplace la palette « atelier papier » (chaude, desaturee), jugee trop
     eteinte a l'usage. Seules les COULEURS changent : typographie, tailles,
     graisses, rayons, geometrie des ombres, espacements, courbes et delais
     d'animation restent ceux d'avant, a l'identique.
     Reference : handoff_theme_forster/. Palette d'essai, susceptible d'evoluer.
     ====================================================================== */

  /* Surface — papier sea-glass */
  --plu-paper:        #eaf1ef;
  --plu-panel:        rgba(247, 251, 250, 0.90);
  --plu-panel-strong: rgba(247, 251, 250, 0.93);
  --plu-panel-solid:  #f7fbfa;
  --plu-sunken:       rgba(11, 34, 40, 0.035);
  --plu-sunken-2:     rgba(11, 34, 40, 0.05);

  /* Encre — noir-teal froid */
  --plu-ink:      #0b2228;
  --plu-ink-2:    #123038;
  --plu-ink-3:    #2b4a52;
  --plu-ink-soft: #5d818a;

  /* Traits */
  --plu-line:        rgba(11, 34, 40, 0.13);
  --plu-line-strong: rgba(11, 34, 40, 0.16);
  --plu-line-solid:  #c4d8d6;

  /* Accent — corail.
     --plu-accent-hover existe pour que la teinte de survol cesse d'etre
     repetee en dur dans cinq regles : c'est ainsi que .btn-accent et .btn-cta
     etaient restes en terre cuite quand les autres boutons avaient change. */
  --plu-accent:       #e8452a;
  --plu-accent-hover: #c5341b;
  --plu-accent-ink:   #f7fbfa;
  --plu-accent-soft:  #ffe2d8;

  /* Statuts */
  --plu-ok:     #0a8a58;  --plu-ok-bg:     #d3f0e2;
  --plu-warn:   #a86f00;  --plu-warn-bg:   #ffedc9;
  --plu-danger: #a3301c;  --plu-danger-bg: #ffe1d7;

  /* --- ALERTE : rouge franc, distinct de l'accent -------------------------
     L'accent corail (#e8452a) est un rouge-orange, et il est PARTOUT : chaque
     bouton, chaque parcelle selectionnee. Un avertissement peint dans la meme
     teinte cesse d'etre un avertissement, il se lit comme un element
     d'interface ordinaire.
     D'ou une famille dediee, plus rouge et plus sombre que le corail : la
     difference se joue sur la TEINTE (rouge pur contre rouge-orange) et sur la
     VALEUR, pas sur la seule saturation. Sert les servitudes (AVAP, PSMV...),
     l'arbitrage T2 et la banniere ABF : les trois messages qui doivent
     interrompre la lecture. */
  --plu-alert:      #c2001b;
  --plu-alert-bg:   #ffe4e6;
  --plu-alert-line: #f09098;

  /* --- ETATS DE L'ANALYSE -------------------------------------------------
     Le vert accuse RECEPTION (« c'est bien cette selection qui a ete
     analysee »), il ne porte aucun jugement reglementaire. L'ancien #2F6E5A
     etait desature pour se poser sur un fond chaud ; sur le fond sea-glass et
     un fond de carte teinte teal, il se serait dissous. Assombri et bleui : il
     tranche desormais par la VALEUR sur une carte claire, et ne peut pas se
     confondre avec le corail d'une selection active.
     Distinct de --plu-ok (#0a8a58), plus clair et plus vert, qui reste reserve
     a la validation dans les badges. */
  --plu-analyse:       #0b6e5a;
  --plu-analyse-hover: #095b4a;
  --plu-attente:       #a3b8bb;   /* « en cours » : gris froid, inactif */

  /* Form */
  --plu-r-panel: 14px;
  --plu-r-ctrl: 8px;
  --plu-r-pill: 999px;
  --plu-shadow:    0 8px 26px rgba(11, 34, 40, 0.10);
  --plu-shadow-lg: 0 10px 34px rgba(11, 34, 40, 0.12);
  --plu-blur: blur(14px);

  --plu-font-ui:      'IBM Plex Sans', system-ui, -apple-system, Helvetica, sans-serif;
  --plu-font-display: 'Instrument Serif', Georgia, serif;
  --plu-font-mono:    'IBM Plex Mono', ui-monospace, monospace;

  font-family: var(--plu-font-ui);
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  background: var(--plu-paper);
  color: var(--plu-ink);
  font-family: var(--plu-font-ui);
}

a { color: var(--plu-accent); text-decoration: none; }
a:hover { text-decoration: underline; }

/* ---------- Shell: map is the canvas, panels float on top ---------- */

.app { position: fixed; inset: 0; overflow: hidden; }

.map-panel { position: absolute; inset: 0; }

#map { width: 100%; height: 100%; background: #cfe4e7; }

/* Desature legerement le fond CARTO pour qu'il porte la palette sea-glass
   sans concurrencer le corail des parcelles selectionnees. */
#map .leaflet-tile { filter: saturate(0.9) brightness(1.03); }

/* Left floating stack: search + project + selection */
.rail-left {
  position: absolute;
  top: 22px; left: 22px;
  width: 392px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  max-height: calc(100vh - 44px);
  overflow-y: auto;
  z-index: 500;
}

/* Right floating stack: analysis output */
.sidebar {
  position: absolute;
  top: 22px; right: 22px; bottom: 22px;
  width: 436px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  overflow: hidden;
  z-index: 500;
}

/* ---------- Panels ---------- */

.card {
  background: var(--plu-panel);
  backdrop-filter: var(--plu-blur);
  -webkit-backdrop-filter: var(--plu-blur);
  border: 1px solid var(--plu-line);
  border-radius: var(--plu-r-panel);
  box-shadow: var(--plu-shadow);
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

/* The analysis panel owns the remaining height and scrolls internally */
#plu-card {
  flex: 1;
  min-height: 0;
  background: var(--plu-panel-strong);
  box-shadow: var(--plu-shadow-lg);
  overflow: hidden;
  padding: 0;
}

#plu-card > h2 {
  flex-shrink: 0;
  padding: 18px 20px 0;
  margin: 0;
}

#plu-results {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 12px 16px 16px;
}

#export-btn { flex-shrink: 0; }

.card h2 {
  margin: 0;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--plu-ink-soft);
}

.card label {
  display: block;
  font-size: 10.5px;
  color: var(--plu-ink-soft);
  margin: 0 0 5px;
}

/* ---------- Topbar / search pill ---------- */

.topbar { padding: 0; border: none; background: none; position: relative; z-index: 600; }

.search-form {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--plu-panel);
  backdrop-filter: var(--plu-blur);
  -webkit-backdrop-filter: var(--plu-blur);
  border: 1px solid var(--plu-line);
  border-radius: var(--plu-r-pill);
  box-shadow: var(--plu-shadow);
  padding: 8px 8px 8px 18px;
  max-width: none;
}

.search-form::before {
  content: 'PLU';
  font-family: var(--plu-font-display);
  font-size: 19px;
  line-height: 1;
  color: var(--plu-accent);
  padding-right: 12px;
  border-right: 1px solid var(--plu-line-strong);
}

.search-form input {
  width: 100%;
  border: none;
  background: transparent;
  padding: 6px 0;
  font-family: var(--plu-font-ui);
  font-size: 13px;
  color: var(--plu-ink);
}

.search-form input::placeholder { color: var(--plu-ink-soft); }
.search-form input:focus { outline: none; }

.search-form button {
  border: none;
  border-radius: var(--plu-r-pill);
  background: var(--plu-accent);
  color: var(--plu-accent-ink);
  font-family: var(--plu-font-ui);
  font-size: 12.5px;
  font-weight: 600;
  padding: 9px 18px;
  cursor: pointer;
}

.search-form button:hover { background: var(--plu-accent-hover); }

.input-wrap { position: relative; flex: 1; }

.suggestions {
  position: absolute;
  top: calc(100% + 10px);
  left: -18px; right: -8px;
  margin: 0;
  padding: 6px;
  list-style: none;
  background: var(--plu-panel-strong);
  backdrop-filter: var(--plu-blur);
  -webkit-backdrop-filter: var(--plu-blur);
  border: 1px solid var(--plu-line);
  border-radius: var(--plu-r-ctrl);
  box-shadow: var(--plu-shadow-lg);
  max-height: 280px;
  overflow-y: auto;
  z-index: 1000;
}

.suggestions li {
  padding: 9px 11px;
  font-size: 13px;
  border-radius: 6px;
  cursor: pointer;
}

.suggestions li:hover,
.suggestions li.active { background: var(--plu-accent-soft); }

.search-status {
  font-size: 11.5px;
  font-family: var(--plu-font-mono);
  color: var(--plu-ink-soft);
  padding: 0 18px;
  min-height: 14px;
}

.search-status.error { color: var(--plu-danger); }

/* ---------- Controls ---------- */

.card select,
.card input[type="number"] {
  width: 100%;
  padding: 9px 11px;
  border: 1px solid rgba(23, 20, 15, 0.12);
  border-radius: var(--plu-r-ctrl);
  background: var(--plu-sunken);
  color: var(--plu-ink);
  font-family: var(--plu-font-ui);
  font-size: 12.5px;
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--plu-ink-soft) 50%),
                    linear-gradient(135deg, var(--plu-ink-soft) 50%, transparent 50%);
  background-position: calc(100% - 15px) 50%, calc(100% - 10px) 50%;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
}

.card input[type="number"] {
  background-image: none;
  font-family: var(--plu-font-mono);
}

.card select:focus,
.card input:focus { outline: none; border-color: var(--plu-accent); }

/* Two-up row for nature / usage — see index.html .field-grid */
.field-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; align-items: end; }
.field { display: flex; flex-direction: column; gap: 5px; }
.field label { margin: 0; }

.field-row { display: flex; align-items: flex-end; gap: 10px; }
.field-row .field { flex: 1; }

#analyze-btn {
  border: none;
  border-radius: var(--plu-r-ctrl);
  background: var(--plu-accent);
  color: var(--plu-accent-ink);
  font-family: var(--plu-font-ui);
  font-size: 12.5px;
  font-weight: 600;
  padding: 11px 18px;
  cursor: pointer;
  white-space: nowrap;
}

#analyze-btn:hover { background: var(--plu-accent-hover); }

#analyze-btn:disabled {
  background: var(--plu-sunken-2);
  color: var(--plu-ink-soft);
  cursor: not-allowed;
}

#export-btn {
  width: calc(100% - 32px);
  border: none;
  border-radius: var(--plu-r-ctrl);
  background: var(--plu-accent);
  color: var(--plu-accent-ink);
  font-family: var(--plu-font-ui);
  font-size: 12.5px;
  font-weight: 600;
  padding: 11px;
  margin: 0 16px 16px;
  cursor: pointer;
}

#export-btn:hover { background: var(--plu-accent-hover); }

.hint { margin: 0; font-size: 11.5px; color: var(--plu-ink-soft); line-height: 1.5; }

.info-empty {
  font-size: 12.5px;
  color: var(--plu-ink-soft);
  line-height: 1.6;
}

/* ---------- Zone header (inject into #plu-results, see app.js notes) ---------- */

.zone-head {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding-bottom: 14px;
  margin-bottom: 12px;
  border-bottom: 1px solid var(--plu-line);
}

.zone-head .zone-code {
  font-family: var(--plu-font-display);
  font-size: 46px;
  line-height: 1;
}

.zone-head .zone-meta {
  font-family: var(--plu-font-mono);
  font-size: 10.5px;
  color: var(--plu-ink-soft);
}

.kpi-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }

.kpi {
  background: var(--plu-sunken);
  border-radius: 9px;
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.kpi .kpi-label { font-size: 10px; color: var(--plu-ink-soft); }
.kpi .kpi-value {
  font-family: var(--plu-font-mono);
  font-size: 17px;
  font-weight: 500;
  color: var(--plu-accent);
}

/* ---------- Rows ---------- */

.parcel-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  font-family: var(--plu-font-mono);
  font-size: 12.5px;
  padding: 6px 0;
  border-bottom: 1px solid var(--plu-line);
}

.parcel-row:last-of-type { border-bottom: none; }
.parcel-row-main { display: flex; flex-direction: column; gap: 2px; }
.parcel-row-main span:last-child { color: var(--plu-ink-soft); font-size: 11px; }

.remove-parcel {
  border: none; background: none;
  color: var(--plu-ink-soft);
  font-size: 16px; line-height: 1;
  cursor: pointer;
  padding: 2px 6px;
}

.remove-parcel:hover { color: var(--plu-danger); }

.info-row {
  display: flex;
  justify-content: space-between;
  font-family: var(--plu-font-mono);
  font-size: 12.5px;
  padding: 5px 0;
  border-bottom: 1px solid var(--plu-line);
}

.info-row:last-child { border-bottom: none; }
.info-row span:first-child { color: var(--plu-ink-soft); }
.info-row span:last-child { font-weight: 600; }

.warning-banner {
  display: flex;
  gap: 10px;
  background: var(--plu-alert-bg);
  border: 1px solid var(--plu-alert-line);
  color: var(--plu-alert);
  border-radius: 9px;
  padding: 10px 12px;
  font-size: 12px;
  line-height: 1.5;
  margin-bottom: 12px;
}

.warning-banner::before { content: '▲'; color: var(--plu-accent); }

.monument-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  font-size: 12.5px;
  padding: 7px 0;
  border-bottom: 1px solid var(--plu-line);
}

.monument-row:last-child { border-bottom: none; }
.monument-row .name { font-weight: 500; }
.monument-row .dist { color: var(--plu-ink-soft); font-family: var(--plu-font-mono); font-size: 11px; }

.toggle-more {
  display: block; width: 100%;
  text-align: left;
  background: none; border: none;
  color: var(--plu-accent);
  font-family: var(--plu-font-ui);
  font-size: 11.5px;
  padding: 8px 0 2px;
  cursor: pointer;
}

.toggle-more:hover { text-decoration: underline; }

/* ---------- Loading ---------- */

.loading-indicator { padding: 8px 0 4px; }

.loading-bar-track {
  width: 100%; height: 3px;
  background: var(--plu-sunken-2);
  border-radius: 2px;
  overflow: hidden;
  margin-bottom: 10px;
}

.loading-bar-fill {
  width: 35%; height: 100%;
  background: var(--plu-accent);
  border-radius: 2px;
  animation: loading-slide 1.1s ease-in-out infinite;
}

@keyframes loading-slide {
  0%   { transform: translateX(-100%); }
  100% { transform: translateX(385%); }
}

.loading-text { font-size: 12.5px; color: var(--plu-ink-soft); line-height: 1.5; }

/* ---------- Articles ---------- */

.articles-list {
  margin-top: 4px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.article-card {
  border: none;
  border-left: 3px solid var(--plu-line-solid);
  border-radius: 9px;
  background: transparent;
  overflow: hidden;
}

.article-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 10px;
  cursor: pointer;
  font-size: 12.5px;
  background: transparent;
}

.article-header:hover { background: var(--plu-sunken); }

.article-header .article-num {
  font-family: var(--plu-font-mono);
  font-size: 11px;
  color: var(--plu-ink-soft);
  min-width: 26px;
  flex-shrink: 0;
}

.article-header .article-titre { flex: 1; color: var(--plu-ink-2); line-height: 1.35; }

/* Le T1 etait limite a une seule ligne avec ellipsis, ce qui suffisait
   tant que toutes les valeurs tenaient en un nombre + une unite. L'Article
   8 a casse cette hypothese : "20 m (R+5)" etait deja tronque, et
   "32 m / 46/47 m NGF" n'a aucune chance. Deux lignes autorisees, coupure
   uniquement au-dela - une valeur reglementaire tronquee est pire qu'une
   ligne de plus. La largeur reste bornee pour ne pas ecraser le titre de
   l'article a cote. */
.article-header .article-tier1 {
  font-family: var(--plu-font-mono);
  font-size: 11px;
  line-height: 1.3;
  color: var(--plu-ink);
  max-width: 104px;
  flex-shrink: 0;
  text-align: right;
  overflow: hidden;
}

.article-header .article-tier1,
.article-header .article-tier1 .article-badge {
  white-space: normal;
  overflow-wrap: anywhere;
}

.article-header .article-tier1 .article-badge {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  -webkit-box-orient: vertical;
  max-width: 100%;
  overflow: hidden;
  vertical-align: bottom;
}

.article-badge {
  display: inline-block;
  padding: 3px 8px;
  border-radius: 6px;
  font-family: var(--plu-font-mono);
  font-size: 11px;
  font-weight: 500;
  white-space: nowrap;
}

.article-badge.ok      { background: var(--plu-ok-bg);     color: var(--plu-ok); }
.article-badge.warn    { background: var(--plu-warn-bg);   color: var(--plu-warn); }
.article-badge.danger  { background: var(--plu-danger-bg); color: var(--plu-danger); }
.article-badge.neutral { background: #dbe9e7;          color: var(--plu-ink-soft); }

.article-body {
  display: none;
  padding: 10px 12px 12px;
  margin: 0 6px 6px;
  border-radius: 8px;
  background: var(--plu-sunken);
  font-size: 12px;
  color: var(--plu-ink-2);
}

.article-card.open .article-body { display: block; }

.article-body .article-texte {
  white-space: pre-wrap;
  line-height: 1.55;
  max-height: 300px;
  overflow-y: auto;
  margin: 6px 0;
  padding: 10px;
  background: var(--plu-panel-solid);
  border: 1px solid var(--plu-line);
  border-radius: 7px;
}

.article-body .article-note { color: var(--plu-ink-soft); font-size: 11.5px; margin: 4px 0; }
.article-body .article-valeurs { margin: 6px 0; }
.article-body .article-valeurs div { padding: 2px 0; font-family: var(--plu-font-mono); font-size: 11.5px; }

/* Article left-border palette — desaturated to sit on paper.
   app.js ARTICLE_COLORS must be updated to match (see app.js-changes.md). */
:root {
  /* Palette des barres d'article — spectre sature.
     A tenir en phase avec ARTICLE_COLORS dans app.js : les deux copies sont
     maintenues a la main. */
  --plu-art-1:  #e8452a; --plu-art-2:  #f2711c; --plu-art-3:  #f9a825;
  --plu-art-4:  #c9b400; --plu-art-5:  #7cb342; --plu-art-6:  #2e9e5b;
  --plu-art-7:  #0a9c8a; --plu-art-8:  #0a7d8c; --plu-art-9:  #1275a8;
  --plu-art-10: #2a5ca8; --plu-art-11: #4a4f9e; --plu-art-12: #7a4a9e;
  --plu-art-13: #a8437f; --plu-art-14: #c93f5c; --plu-art-15: #d94236;

  --plu-piece-a: #e8452a; --plu-piece-b: #8ab52e; --plu-piece-c: #0a9c5b;
  --plu-piece-d: #1275a8; --plu-piece-e: #4a4f9e; --plu-piece-f: #a8437f;
}

.piece-tag {
  display: inline-block;
  padding: 1px 6px;
  border-radius: 6px;
  font-family: var(--plu-font-mono);
  font-size: 10px;
  font-weight: 500;
  color: var(--plu-accent-ink);
  margin: 0 2px;
}

/* ---------- Leaflet chrome ---------- */

.leaflet-popup-content-wrapper {
  background: var(--plu-panel-strong);
  border: 1px solid var(--plu-line);
  border-radius: 10px;
  box-shadow: var(--plu-shadow);
  color: var(--plu-ink);
}

.leaflet-popup-tip { background: var(--plu-panel-strong); }
.leaflet-popup-content { font-family: var(--plu-font-ui); font-size: 12.5px; }

.leaflet-control-zoom a {
  background: var(--plu-panel-strong) !important;
  border-color: var(--plu-line) !important;
  color: var(--plu-ink) !important;
}

/* Selecteur de fond de carte (Plan IGN / Photo aerienne), ajoute le 31/08
   avec la bascule vers l'IGN. Aligne sur le controle de zoom : sans ca il
   arrivait avec le blanc par defaut de Leaflet, au-dessus du panneau. */
.leaflet-control-layers {
  background: var(--plu-panel-strong) !important;
  border-color: var(--plu-line) !important;
  color: var(--plu-ink) !important;
}
.leaflet-control-layers-list { font-family: var(--plu-font-ui); font-size: 12.5px; }
.leaflet-control-layers label { display: flex; align-items: center; gap: 6px; cursor: pointer; }

.leaflet-control-attribution {
  background: rgba(250, 248, 242, 0.8) !important;
  font-size: 10px;
}

/* Keep Leaflet controls clear of the floating rails */
/* Zoom control now sits top-right (see conversation), clearing the sidebar
   (436px width + 22px inset + 22px gap = 480px), top aligned with
   #plu-card's own top edge the same way the old left-side rule aligned
   with .rail-left. */
.leaflet-top.leaflet-right { margin-top: 0; margin-right: 480px; }

/* Blocs Titre II (dispositions communes) - Article 8 notamment, ou les
   tableaux de correspondance niveaux/hauteur s'affichaient litteralement
   "[object Object]" faute d'un rendu pour les objets imbriques. */
.article-body .t2-bloc-titre {
  font-weight: 600;
  margin-top: 10px;
  color: var(--plu-ink);
}

.article-body .t2-table {
  margin: 6px 0 8px;
  padding: 6px 8px;
  background: var(--plu-surface-2, rgba(0, 0, 0, 0.03));
  border-radius: 4px;
}

.article-body .t2-table-titre {
  font-size: 11px;
  color: var(--plu-ink-2);
  margin-bottom: 4px;
}

.article-body .t2-cells {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 6px;
}

.article-body .t2-cell {
  font-family: var(--plu-font-mono);
  font-size: 11px;
  white-space: nowrap;
}

.article-body .t2-cell em {
  font-style: normal;
  color: var(--plu-ink-2);
  margin-right: 3px;
}

.article-body .t2-formule {
  font-size: 11px;
  margin-top: 5px;
  color: var(--plu-ink-2);
}

.article-body .t2-texte > summary {
  cursor: pointer;
  font-size: 11px;
  color: var(--plu-ink-2);
  margin: 4px 0;
}

/* Mise en garde generique, rejetee sous les articles (voir conversation) :
   seule la provenance de la zone reste en tete. Volontairement discrete -
   c'est du bruit tant que tout fonctionne normalement. */
.hint.disclaimer {
  margin-top: 14px;
  padding-top: 10px;
  border-top: 1px solid var(--plu-line);
  font-size: 11px;
  color: var(--plu-ink-soft);
}

/* ===========================================================================
   LANDING + RETOUR UTILISATEUR  (ajout — aucune regle existante modifiee)
   Memes jetons "Atelier papier" que l'app : pas de changement de peau en
   cours de transition. Phases portees par [data-phase] sur #app-shell.
   =========================================================================== */

/* --- voile papier : seul effet de transition retenu sur la carte (option C).
       Leaflet ne supporte pas proprement un transform CSS sur son conteneur
       (tuiles floues, invalidateSize a rejouer) - on garde le fondu seul. --- */
.paper-veil {
  position: absolute; inset: 0; z-index: 400;
  pointer-events: none;
  background: linear-gradient(100deg, var(--plu-paper) 0%, var(--plu-paper) 46%,
              rgba(244,241,234,0.86) 62%, rgba(244,241,234,0.45) 100%);
  opacity: 1;
  transition: opacity 1100ms cubic-bezier(.65,0,.35,1);
}
[data-phase="app"] .paper-veil,
[data-phase="leaving"] .paper-veil { opacity: 0; }

/* --- couche hero --- */
.hero {
  position: absolute; inset: 0; z-index: 600;
  display: flex; flex-direction: column; justify-content: space-between;
  padding: 38px 56px 34px;
  opacity: 1; transform: translateY(0);
  transition: opacity 620ms ease, transform 620ms ease;
}
[data-phase="leaving"] .hero,
[data-phase="app"] .hero { opacity: 0; transform: translateY(-30px); pointer-events: none; }
[data-phase="app"] .hero { visibility: hidden; }

/* entree au montage : les enfants montent de 18px, en cascade */
.hero-stagger { animation: hero-rise 900ms cubic-bezier(.16,1,.3,1) both; animation-delay: var(--plu-d, 0ms); }
@keyframes hero-rise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: translateY(0); } }

.hero-top { display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.hero-brand { display: flex; align-items: baseline; gap: 14px; }
.hero-wordmark { font-family: var(--plu-font-display); font-size: 26px; line-height: 1; color: var(--plu-accent); }
.hero-kicker { font-size: 10px; letter-spacing: .2em; text-transform: uppercase; color: var(--plu-ink-soft); }

.hero-actions { display: flex; align-items: center; gap: 10px; }
.status-pill {
  display: flex; align-items: center; gap: 8px;
  background: var(--plu-panel); backdrop-filter: var(--plu-blur); -webkit-backdrop-filter: var(--plu-blur);
  border: 1px solid var(--plu-line); border-radius: var(--plu-r-pill);
  padding: 7px 14px 7px 12px; font-size: 11.5px; color: var(--plu-ink-3);
}
.status-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--plu-ok); flex-shrink: 0; }

.auth-group { display: flex; align-items: center; gap: 8px; }
.btn-ghost, .btn-accent {
  font-family: var(--plu-font-ui); font-size: 12.5px; font-weight: 600;
  border-radius: var(--plu-r-pill); padding: 9px 18px; cursor: pointer;
}
.btn-ghost { background: var(--plu-panel); border: 1px solid var(--plu-line); color: var(--plu-ink-2); }
.btn-ghost:hover { background: var(--plu-sunken-2); }
.btn-accent { background: var(--plu-accent); border: none; color: var(--plu-accent-ink); }
.btn-accent:hover { background: var(--plu-accent-hover); }

.hero-mid { max-width: 1020px; }
.hero-eyebrow { font-size: 12.5px; letter-spacing: .04em; color: var(--plu-ink-soft); margin-bottom: 18px; }
.hero-title {
  font-family: var(--plu-font-display); font-size: 104px; line-height: .98;
  letter-spacing: -.015em; margin: 0 0 22px; font-weight: 400; color: var(--plu-ink);
}
.hero-title em { font-style: italic; color: var(--plu-accent); }
.hero-sub { font-size: 16px; line-height: 1.6; color: var(--plu-ink-3); max-width: 520px; margin: 0 0 30px; }

.hero-cta { display: flex; align-items: center; gap: 22px; }
.btn-cta {
  display: inline-flex; align-items: center; gap: 14px;
  background: var(--plu-accent); border: none; border-radius: var(--plu-r-pill);
  color: var(--plu-accent-ink); font-family: var(--plu-font-ui); font-size: 14px; font-weight: 600;
  padding: 15px 15px 15px 28px; cursor: pointer;
}
.btn-cta:hover { background: var(--plu-accent-hover); }
.btn-cta-arrow {
  width: 30px; height: 30px; border-radius: 50%;
  background: rgba(244,241,234,.16); display: inline-flex; align-items: center; justify-content: center;
}
.hero-cta-note { font-size: 12.5px; line-height: 1.5; color: var(--plu-ink-soft); }

.hero-notices {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px;
  border-top: 1px solid var(--plu-line); padding-top: 18px; max-width: 1020px;
}
.notice-kicker { font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: var(--plu-ink-soft); margin-bottom: 6px; }
.notice-title { font-size: 13.5px; color: var(--plu-ink-2); margin-bottom: 4px; }
.notice-body { font-size: 12px; line-height: 1.5; color: var(--plu-ink-soft); }

/* --- entree des rails : l'app existante n'est pas modifiee, seul son
       etat initial est pilote par la phase --- */
[data-phase="landing"] .rail-left,
[data-phase="landing"] .sidebar,
[data-phase="leaving"] .rail-left,
[data-phase="leaving"] .sidebar { opacity: 0; pointer-events: none; }
[data-phase="landing"] .rail-left, [data-phase="leaving"] .rail-left { transform: translateX(-40px); }
[data-phase="landing"] .sidebar,  [data-phase="leaving"] .sidebar  { transform: translateX(40px); }
.rail-left, .sidebar {
  transform: translateX(0); opacity: 1;
  transition: transform 900ms cubic-bezier(.16,1,.3,1), opacity 700ms ease;
}
.rail-left { transition-delay: 120ms; }
.sidebar   { transition-delay: 240ms; }

/* --- controles Leaflet : le zoom vit hors des rails, il echappait donc aux
       regles de phase et restait visible par-dessus l'accueil. Meme timing
       que la sidebar pour qu'il arrive avec elle, pas avant.
       L'attribution des tuiles n'est PAS masquee : elle reste une obligation
       de licence des lors que les tuiles sont affichees, or la carte est bien
       rendue sous le voile. --- */
.leaflet-control-zoom,
.leaflet-control-layers,
.redessiner-ctl {
  opacity: 1;
  transition: opacity 700ms ease 240ms;
}
[data-phase="landing"] .leaflet-control-zoom,
[data-phase="leaving"] .leaflet-control-zoom,
[data-phase="landing"] .leaflet-control-layers,
[data-phase="leaving"] .leaflet-control-layers,
[data-phase="landing"] .redessiner-ctl,
[data-phase="leaving"] .redessiner-ctl {
  opacity: 0;
  pointer-events: none;
  transition-delay: 0ms;
}

/* --- pastille de retour : persiste sur les deux phases, seule la position bouge.
       En phase app elle reste en bas a gauche (choix explicite : il faudrait
       beaucoup de parcelles selectionnees pour que le rail gauche l'atteigne). --- */
.feedback-pill {
  position: absolute; z-index: 900;
  left: 56px; bottom: 202px;
  display: inline-flex; align-items: center; gap: 10px;
  background: var(--plu-panel); backdrop-filter: var(--plu-blur); -webkit-backdrop-filter: var(--plu-blur);
  border: 1px solid var(--plu-line); border-radius: var(--plu-r-pill);
  box-shadow: var(--plu-shadow); padding: 8px 16px 8px 8px;
  font-family: var(--plu-font-ui); font-size: 12.5px; color: var(--plu-ink-2); cursor: pointer;
  transition: left 900ms cubic-bezier(.16,1,.3,1), bottom 900ms cubic-bezier(.16,1,.3,1), opacity 200ms ease;
}
[data-phase="app"] .feedback-pill { left: 22px; bottom: 22px; }
.feedback-pill.hidden { opacity: 0; pointer-events: none; }
.feedback-badge {
  width: 24px; height: 24px; border-radius: 50%;
  background: var(--plu-accent-soft); color: var(--plu-accent);
  display: inline-flex; align-items: center; justify-content: center; font-size: 12px;
}

/* --- panneau de retour --- */
.modal-scrim {
  position: fixed; inset: 0; z-index: 1200;
  background: rgba(23,20,15,.28); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px);
  opacity: 0; transition: opacity 320ms ease;
}
.modal-scrim.visible { opacity: 1; }

.feedback-panel {
  position: fixed; z-index: 1300;
  left: 22px; bottom: 22px; width: 396px;
  transform-origin: left bottom;
  background: var(--plu-panel-solid); border: 1px solid var(--plu-line-strong);
  border-radius: 16px; box-shadow: 0 18px 48px rgba(23,20,15,.18);
  padding: 20px;
  opacity: 0; transform: translateY(14px) scale(.97);
  transition: opacity 300ms ease, transform 420ms cubic-bezier(.16,1,.3,1);
}
.feedback-panel.visible { opacity: 1; transform: translateY(0) scale(1); }

.fb-head { font-family: var(--plu-font-display); font-size: 22px; color: var(--plu-ink); margin-bottom: 14px; }
.fb-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.fb-field { margin-bottom: 10px; }
.fb-field label { display: block; font-size: 10.5px; color: var(--plu-ink-soft); margin-bottom: 4px; }
.fb-field input, .fb-field select, .fb-field textarea {
  width: 100%; box-sizing: border-box;
  background: var(--plu-sunken); border: 1px solid rgba(23,20,15,.12); border-radius: var(--plu-r-ctrl);
  padding: 9px 11px; font-family: var(--plu-font-ui); font-size: 12.5px; color: var(--plu-ink);
}
.fb-field textarea { resize: vertical; line-height: 1.5; }
.fb-field input:focus, .fb-field select:focus, .fb-field textarea:focus { outline: none; border-color: var(--plu-accent); }

.fb-incentive {
  background: var(--plu-accent-soft); border: 1px solid #d9bdb4; border-radius: var(--plu-r-ctrl);
  padding: 9px 11px; font-size: 11.5px; line-height: 1.5; color: #5a2c22; margin-bottom: 12px;
}
.fb-star { color: var(--plu-accent); }
.fb-send { width: 100%; border-radius: 9px; padding: 11px; }

.fb-thanks { text-align: center; padding: 12px 0 6px; }
.fb-thanks-badge {
  width: 36px; height: 36px; border-radius: 50%; background: var(--plu-ok-bg); color: var(--plu-ok);
  display: inline-flex; align-items: center; justify-content: center; font-size: 17px; margin-bottom: 12px;
}
.fb-thanks-title { font-family: var(--plu-font-display); font-size: 29px; color: var(--plu-ink); margin-bottom: 8px; }
.fb-thanks-body { font-size: 13px; color: var(--plu-ink-soft); line-height: 1.55; }

/* --- toast : les boutons de compte ne sont pas encore actifs. Un clic sans
       aucun retour visuel se lit comme une panne, pas comme "a venir". --- */
.toast {
  position: fixed; z-index: 1400; top: 22px; left: 50%;
  transform: translateX(-50%) translateY(-12px);
  background: var(--plu-panel-strong); backdrop-filter: var(--plu-blur); -webkit-backdrop-filter: var(--plu-blur);
  border: 1px solid var(--plu-line); border-radius: var(--plu-r-pill);
  box-shadow: var(--plu-shadow); padding: 10px 20px;
  font-size: 12.5px; color: var(--plu-ink-2);
  opacity: 0; transition: opacity 260ms ease, transform 260ms cubic-bezier(.16,1,.3,1);
}
.toast.visible { opacity: 1; transform: translateX(-50%) translateY(0); }

/* --- accessibilite : on garde les fondus, on retire les deplacements --- */
@media (prefers-reduced-motion: reduce) {
  .hero-stagger { animation: none; }
  .rail-left, .sidebar { transform: none !important; transition: opacity 400ms ease !important; }
  .feedback-panel { transform: none !important; }
  .hero { transform: none !important; }
}

/* --- Prescriptions particulieres : servitudes superposees au zonage.
       Chaque entree est repliee par defaut - une ligne suffit a signaler,
       le detail ne doit pas concurrencer les articles, qui restent
       l'interface principale. --- */
.presc-item { border-bottom: 1px solid var(--plu-line); }
.presc-item:last-child { border-bottom: none; }
.presc-head {
  display: flex; align-items: center; gap: 9px;
  padding: 9px 0; cursor: pointer; font-size: 12.5px; color: var(--plu-ink-2);
}
.presc-head:hover { color: var(--plu-ink); }
.presc-dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }
.presc-dot.avertissement { background: var(--plu-accent); }
.presc-dot.info { background: var(--plu-ink-soft); }
.presc-chevron { margin-left: auto; color: var(--plu-ink-soft); font-size: 11px; transition: transform 180ms ease; }
.presc-item.open .presc-chevron { transform: rotate(90deg); }
.presc-body {
  display: none; padding: 0 0 11px 16px;
  font-size: 12px; line-height: 1.55; color: var(--plu-ink-3);
}
.presc-item.open .presc-body { display: block; }
.presc-source { display: block; margin-top: 5px; font-size: 10.5px; color: var(--plu-ink-soft); }

/* --- L'attribut HTML `hidden` vaut `display: none` a la priorite la plus
       basse : toute regle CSS fixant un `display` explicite l'emporte. Or
       `.card` declare `display: flex`, si bien que les cartes marquees
       `hidden` restaient affichees — vides, mais occupant leur place et
       rognant la hauteur de l'analyse.
       Cette regle retablit le comportement attendu partout, pas seulement
       sur les deux cartes concernees. --- */
[hidden] { display: none !important; }

/* Reference de version du document dans la notice : la donnee est datee et
   sourcee, l'afficher permet a un architecte de verifier qu'il consulte bien
   la version en vigueur. Valeurs issues de doc_urba.dbf (IDURBA, DATAPPRO). */
.mono-ref {
  font-family: var(--plu-font-mono);
  font-size: 10.5px;
  color: var(--plu-ink-2);
  background: var(--plu-sunken);
  border-radius: 3px;
  padding: 1px 4px;
}

/* --- T3 repliable : le texte reglementaire integral est la SOURCE, pas la
       reponse. Deploye par defaut, il noyait le T2 - qui est la lecture
       utile - et allongeait chaque carte de plusieurs ecrans. --- */
.article-t3 { margin-top: 8px; }
.article-t3 > summary {
  cursor: pointer; list-style: none;
  font-size: 11.5px; color: var(--plu-ink-soft);
  padding: 5px 0; user-select: none;
  display: flex; align-items: center; gap: 7px;
}
.article-t3 > summary::-webkit-details-marker { display: none; }
.article-t3 > summary::before {
  content: "›"; display: inline-block; transition: transform 160ms ease;
  font-size: 13px; color: var(--plu-ink-soft);
}
.article-t3[open] > summary::before { transform: rotate(90deg); }
.article-t3 > summary:hover { color: var(--plu-ink-2); }
.t3-count {
  font-size: 10px; color: var(--plu-ink-soft);
  background: var(--plu-sunken); border-radius: 3px; padding: 1px 5px;
}

/* Badge autorise a s'etendre : reserve aux articles dont le TITRE est court
   (ex. « Emprise »), ou l'elargir ne comprime pas la colonne du libelle.
   Les titres longs gardent la largeur reduite et le retour a la ligne. */
.article-header .article-tier1 .article-badge.badge-large {
  max-width: none;
  white-space: nowrap;
  -webkit-line-clamp: 1;
  line-clamp: 1;
}
.article-header .article-tier1:has(.badge-large) { max-width: 150px; }

/* --- Blocs de sous-article dans le T3.
       Espacement demande : un blanc ENTRE sous-articles, un simple retour
       entre un titre et son texte - le titre appartient a son paragraphe,
       il ne doit pas en etre detache autant que du bloc precedent. --- */
.t3-bloc + .t3-bloc { margin-top: 14px; }
.t3-bloc-titre {
  font-weight: 600;
  font-size: 12.5px;
  color: var(--plu-ink-2);
  margin-bottom: 3px;
}
.t3-bloc .article-texte { margin-top: 0; }

/* --- Balisage leger du texte reglementaire (T3).
       Gras, italique et puces imbriquees RESTAURENT une structure perdue a
       l'extraction PDF (886 puces toutes ramenees au niveau 0).
       Les couleurs, elles, n'existent pas dans le reglement : ce sont des
       annotations de relecture. Elles sont donc volontairement DISCRETES -
       une teinte de texte, pas un surlignage - pour ne pas se lire comme une
       prescription. --- */
.article-texte p { margin: 0 0 8px; }
.article-texte p:last-child { margin-bottom: 0; }
.article-texte ul { margin: 4px 0 8px; padding-left: 18px; }
.article-texte ul.md-l2 { margin: 2px 0 2px 0; padding-left: 16px; }
.article-texte li { margin: 2px 0; line-height: 1.5; }
.article-texte ul.md-l1 > li { list-style: disc; }
.article-texte ul.md-l2 > li { list-style: circle; }
/* Pas de `color` sur strong : un texte a la fois gras ET colore produit
   <span class="md-rouge"><strong>…</strong></span>, et `.article-texte strong`
   (specificite 0,2,0) ecrasait `.md-rouge` (0,1,0). Le gras heritait donc de
   la couleur d'encre, annulant le rouge. Le gras n'a pas besoin de couleur
   propre : il herite. */
.article-texte strong { font-weight: 600; }
.article-texte em { font-style: italic; }

/* Les regles se cumulent : `!!**texte**!!` produit
   <span class="md-rouge"><strong>texte</strong></span>. Or la couleur
   explicite de `strong` ci-dessus ECRASE celle de la span parente - le rouge
   restait donc invisible des qu'il enveloppait du gras, alors que le vert
   seul s'affichait. Le selecteur descendant retablit le cumul annonce. */
.md-rouge, .md-rouge * { color: #A33227; }
.md-vert,  .md-vert  * { color: #1C7C3F; }


/* Les couleurs de balisage s'appliquent au contenu qu'elles enveloppent,
   y compris a un <strong> ou un <em> imbrique - sinon la regle de l'element
   l'emporte sur celle de la classe. */
.md-rouge, .md-rouge strong, .md-rouge em { color: #A33227; }
.md-vert,  .md-vert strong,  .md-vert em  { color: #1C7C3F; }

/* `white-space: pre-wrap` convient au texte brut mais fait apparaitre les
   sauts de ligne du HTML genere a l'interieur des listes. On revient au
   comportement normal des que le contenu est structure. */
.article-body .article-texte ul,
.article-body .article-texte li,
.article-body .article-texte p { white-space: normal; }

/* --- T2 : regles applicables et avertissements. Contrairement au T3, ce
       n'est pas une source a consulter mais une reponse a lire - donc
       toujours deploye, et pose au-dessus du texte integral. --- */
.article-t2 { margin: 6px 0 4px; }
.t2-point {
  position: relative; padding: 5px 9px 5px 22px; margin-bottom: 4px;
  font-size: 12.5px; line-height: 1.45; color: var(--plu-ink-2);
  background: var(--plu-sunken); border-radius: 5px;
  border-left: 3px solid var(--plu-line-strong);
}
.t2-point::before {
  content: "›"; position: absolute; left: 9px; top: 5px; color: var(--plu-ink-soft);
}
/* Deux points T2 sur trois sont des VALEURS : on les enonce, on les lit. Ces
   deux familles-ci doivent au contraire ARRETER la lecture, d'ou un traitement
   identique et volontairement plus fort que les valeurs qui les entourent :

   .arbitrage — deux regles se disputent la parcelle, la plus restrictive vaut.
   .servitude — un AUTRE document opposable s'applique (AVAP, PSMV, ZPPAUP,
                SPR, PVAP) : la regle affichee peut etre remplacee ou
                completee, et l'avis de l'ABF est requis.

   La servitude etait rendue comme une valeur ordinaire - un renvoi a un
   document exterieur, avec avis ABF obligatoire, se lisait au meme niveau
   qu'une cote de hauteur. L'avertissement le plus lourd de consequence de la
   fiche etait aussi le plus discret.

   MEME pictogramme pour les deux, delibere : le signal demande est le meme
   (s'arreter), et le texte dit ensuite laquelle des deux situations
   s'applique. Les deux ne se rencontrent pas sur un meme article - arbitrage
   a l'article 8, servitude aux articles 4, 5, 6, 7 et 11. */
.t2-point.arbitrage,
.t2-point.servitude,
.t2-point.exemption {
  background: var(--plu-alert-bg); border-left-color: var(--plu-alert);
  color: var(--plu-alert); font-weight: 500;
}
.t2-point.arbitrage::before,
.t2-point.servitude::before,
.t2-point.exemption::before { content: "⚠\FE0E"; color: var(--plu-alert); }
/* Le sigle porte l'information : il doit ressortir dans la ligne, sans
   emprunter l'encre pleine (--plu-ink) reservee aux valeurs chiffrees. */
.t2-point.servitude strong,
.t2-point.exemption strong { color: var(--plu-alert); font-weight: 680; }

/* Conversion niveaux -> metres : information seconde, en retrait visuel du
   niveau qui est la valeur du reglement graphique. */
.hauteur-conv { color: var(--plu-ink-soft); font-weight: 400; font-size: 12px; }
/* L'indice et sa valeur sont l'information la plus lourde de consequence de
   la carte : ils doivent se lire avant le reste. */
.t2-point strong { font-weight: 650; color: var(--plu-ink); }

/* --- Valeurs T1 : la REPONSE de l'article.
       Le titre a gauche dit deja de quoi il s'agit ; le badge n'a pas a le
       repeter. Meme forme que .article-badge - fond clair, coins arrondis,
       sans bordure - pour qu'un article a valeur et un article a statut se
       lisent sur le meme registre.
       Les couleurs marquent la NATURE de la grandeur, pas un jugement : ni
       permissif ni restrictif, factuel. Elles restent sourdes, l'orange VIF
       (--plu-accent) etant reserve aux deux avertissements T2 - arbitrage et
       servitude - qui doivent primer sur une simple valeur. --- */
.t1-valeur {
  display: inline-block;
  padding: 3px 8px;
  border-radius: 6px;
  font-family: var(--plu-font-mono);
  font-size: 11px;
  font-weight: 500;
  white-space: nowrap;
}
.t1-valeur strong { font-weight: 600; }

.t1-hauteur      { background: #F6ECE0; color: #A8621B; }
.t1-implantation { background: #EFEBF6; color: #6B4E9B; }
.t1-surface,
.t1-distance     { background: #E7F0EC; color: #2F6E5A; }

/* --- Bouton d'analyse : trois etats.
       Le vert de « Reinitialiser » reprend celui des parcelles analysees -
       c'est le meme message (« voici ce qui a ete analyse »), il doit se lire
       comme tel des le premier coup d'oeil. --- */
#analyze-btn[data-etat="encours"] {
  background: var(--plu-attente);
  color: var(--plu-panel-solid);
  cursor: progress;
}
#analyze-btn[data-etat="analyse"] {
  background: var(--plu-analyse);
  color: var(--plu-panel-solid);
}
#analyze-btn[data-etat="analyse"]:hover { background: var(--plu-analyse-hover); }

/* --- Couches de reference du reglement graphique (04/09/2026) -------------
   Registre visuel deliberement DISCRET : ces couches sont de la reference,
   pas une reponse. L'infobulle porte la valeur lue dans le shapefile, jamais
   une interpretation. */
/* Specificite renforcee : leaflet.css est charge AVANT style.css dans
   index.html, mais `.leaflet-tooltip` seul suffirait a reprendre la main si
   l'ordre changeait un jour. On ancre donc sur les deux classes. */
.leaflet-tooltip.couche-ref-tooltip,
.couche-ref-tooltip {
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 11px;
  line-height: 1.45;
  padding: 5px 8px;
  border: 1px solid var(--plu-rule, #c6d0d9);
  border-radius: 3px;
  background: rgba(255, 255, 255, .96);
  color: var(--plu-ink, #131a21);
  box-shadow: 0 1px 4px rgba(0, 0, 0, .12);
}
.leaflet-tooltip.couche-ref-tooltip::before,
.couche-ref-tooltip::before { display: none; }   /* pas de fleche : trait fin */

/* Bouton « redessiner le parcellaire », sous le zoom et les deux selecteurs
   de couches. Meme gabarit que les boutons Leaflet natifs : l'utilisateur ne
   doit pas avoir a apprendre une nouvelle cible de clic. */
.redessiner-ctl a {
  font-size: 18px;
  line-height: 26px;
  font-weight: 700;
  color: var(--plu-ink, #131a21);
}
.redessiner-ctl a.occupe {
  opacity: .5;
  pointer-events: none;
  animation: redessiner-tourne 1s linear infinite;
}
@keyframes redessiner-tourne { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .redessiner-ctl a.occupe { animation: none; }
}

/* --- Traces des couches de reference : jamais de contour de focus ----------
   Cliquer un <path> SVG le met en focus et le navigateur dessine son outline
   autour de la BOITE ENGLOBANTE du tracé — sur une polyligne de plusieurs
   centaines de metres, cela produit un grand rectangle noir arrondi en travers
   de la carte. Ces traces ne sont pas des commandes : rien a y activer, donc
   rien a signaler au focus. Le contour reste evidemment en place partout
   ailleurs dans l'application. */
.leaflet-container path.couche-ref-trace,
.leaflet-container path.couche-ref-trace:focus,
.leaflet-container path.couche-ref-trace:focus-visible,
.leaflet-container path.couche-ref-trace:active {
  outline: none !important;
  outline-offset: 0 !important;
  box-shadow: none !important;
}