/* ─── Base ──────────────────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@300;400;500;600;700&family=DM+Mono:wght@400;500&display=swap');

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --font: 'DM Sans', system-ui, -apple-system, sans-serif;
  --font-mono: 'DM Mono', monospace;
  --color-primary:       #2f6bb0;
  --color-primary-dark:  #1f4d85;
  --color-primary-light: #dce9f8;
  --color-text:          #1f2937;
  --color-muted:         #6b7280;
  --color-border:        #e5e7eb;
  --color-bg:            #f8fafc;
  --color-paper:         #fefdf8;
  --radius-sm: 6px;
  --radius-md: 10px;
  --shadow-sm: 0 1px 2px rgba(0,0,0,.06);
  --shadow-md: 0 4px 12px rgba(0,0,0,.10);
  --shadow-lg: 0 8px 28px rgba(0,0,0,.14);
}

html, body { height: 100%; }
body {
  font-family: var(--font);
  font-size: 14px;
  color: var(--color-text);
  background: var(--color-bg);
  display: flex; flex-direction: column;
  min-height: 100vh;
}

/* ─── Topbar (bannière) ─────────────────────────────────────── */
.topbar {
  background: linear-gradient(135deg, #2f6bb0 0%, #1f4d85 100%);
  color: #fff;
  flex-shrink: 0;
  box-shadow: var(--shadow-md);
  position: relative; z-index: 10;
}
.topbar-inner {
  max-width: 100%;
  padding: 14px 24px;
  display: flex; align-items: center; gap: 20px;
}
.topbar-brand { display: flex; align-items: center; gap: 14px; flex: 1; min-width: 0; }
.topbar-brand-logos { display: flex; align-items: center; gap: 14px; flex-shrink: 0; }
.topbar-logo  { height: 44px; flex-shrink: 0; }
.topbar-partner-logo { height: 36px; flex-shrink: 0; }
.topbar-titles { min-width: 0; }
.topbar-title {
  font-size: 19px; font-weight: 700; line-height: 1.2;
  margin: 0; color: #fff;
}
.topbar-subtitle {
  font-size: 12.5px; opacity: .92; margin-top: 2px;
}
.topbar-badge {
  background: rgba(255,255,255,.18); color: #fff;
  padding: 6px 14px; border-radius: 999px;
  font-size: 12px; font-weight: 600;
  border: 1px solid rgba(255,255,255,.28);
  flex-shrink: 0;
}
.topbar-logo-ccpl { height: 52px; flex-shrink: 0; }

/* ─── Layout principal ──────────────────────────────────────── */
.layout {
  display: grid;
  grid-template-columns: 280px 1fr;
  flex: 1;
  min-height: 0;
}

/* ─── Sidebar ───────────────────────────────────────────────── */
.sidebar {
  background: #fff;
  border-right: 1px solid var(--color-border);
  padding: 18px 14px;
  overflow-y: auto;
  display: flex; flex-direction: column;
  gap: 10px;
}
.sidebar-home {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 14px;
  background: var(--color-primary-light);
  color: var(--color-primary-dark);
  border: 2px solid transparent;
  border-radius: var(--radius-md);
  cursor: pointer;
  font-family: var(--font); font-size: 14px; font-weight: 600;
  text-align: left;
  width: 100%;
  transition: background .15s, border-color .15s;
}
.sidebar-home:hover { border-color: var(--color-primary); }
.sidebar-home.is-active {
  background: var(--color-primary); color: #fff;
}
.sidebar-home-icon { font-size: 16px; }
.sidebar-tool { text-decoration: none; }   /* lien « Diagnostic flash mobilité » (08/10/2026) */

.sidebar-section-label {
  font-size: 11px; font-weight: 700; text-transform: uppercase;
  color: var(--color-muted); letter-spacing: .5px;
  margin: 12px 8px 4px;
}
.sidebar-list { list-style: none; display: flex; flex-direction: column; gap: 4px; }
.sidebar-item {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px;
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: background .12s, border-color .12s, transform .08s;
}
.sidebar-item:hover {
  border-color: var(--color-primary);
  background: var(--color-primary-light);
}
.sidebar-item.is-active {
  background: var(--color-primary);
  border-color: var(--color-primary-dark);
  color: #fff;
  box-shadow: var(--shadow-sm);
}
.sidebar-item.is-active .sidebar-item-name { color: #fff; }
.sidebar-item.is-active .sidebar-item-num   { background: rgba(255,255,255,.22); color: #fff; }
.sidebar-item-num {
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px;
  background: var(--color-primary);
  color: #fff;
  border-radius: 50%;
  font-family: var(--font-mono); font-weight: 700; font-size: 12px;
  flex-shrink: 0;
}
.sidebar-item-text { min-width: 0; flex: 1; }
.sidebar-item-name {
  font-size: 13px; font-weight: 600; color: var(--color-text);
  line-height: 1.3;
}
.sidebar-item-meta {
  font-size: 10.5px; color: var(--color-muted);
  margin-top: 2px;
}
.sidebar-item.is-active .sidebar-item-meta { color: rgba(255,255,255,.85); }

.sidebar-footer {
  margin-top: auto;
  padding: 12px;
  background: var(--color-bg);
  border-radius: var(--radius-sm);
  font-size: 11.5px; color: var(--color-muted);
  line-height: 1.5;
}

/* ─── Main content ──────────────────────────────────────────── */
.main {
  overflow-y: auto;
  padding: 24px;
  background: var(--color-bg);
}

/* ─── Home view (mode d'emploi) ─────────────────────────────── */
.home-view { max-width: 900px; margin: 0 auto; }
.home-card {
  background: var(--color-paper);
  border-radius: var(--radius-md);
  padding: 32px 36px;
  box-shadow: var(--shadow-md);
  border: 1px solid var(--color-border);
}
.home-header {
  display: flex; align-items: center; gap: 14px;
  margin-bottom: 16px;
  padding-bottom: 16px;
  border-bottom: 2px solid var(--color-primary-light);
}
.home-icon { font-size: 36px; }
.home-header h2 {
  font-size: 24px; font-weight: 700; color: var(--color-primary-dark);
  margin: 0;
}
.home-intro {
  font-size: 15px; line-height: 1.6; color: var(--color-text);
  margin-bottom: 24px;
}
.home-block {
  margin-bottom: 22px;
}
.home-block h3 {
  font-size: 16px; font-weight: 700; color: var(--color-primary-dark);
  margin-bottom: 10px;
}
.home-block p { font-size: 14px; line-height: 1.55; color: var(--color-text); }
.home-list {
  margin-top: 8px; padding-left: 0; list-style: none;
  display: flex; flex-direction: column; gap: 8px;
}
.home-list li {
  font-size: 14px; line-height: 1.55;
  padding: 10px 14px; padding-left: 14px;
  background: #fff; border-left: 3px solid var(--color-primary);
  border-radius: 4px;
}
.home-warning {
  display: flex; gap: 14px;
  background: #fffbeb;
  border: 1px solid #fde68a;
  border-radius: var(--radius-sm);
  padding: 16px 18px;
  margin: 22px 0;
}
.home-warning-icon { font-size: 26px; flex-shrink: 0; }
.home-warning strong { color: #92400e; display: block; margin-bottom: 4px; }
.home-warning p { font-size: 13.5px; line-height: 1.5; color: #78350f; margin: 0; }
.home-cta {
  text-align: center;
  background: var(--color-primary-light);
  border: 1px dashed var(--color-primary);
  border-radius: var(--radius-sm);
  padding: 14px;
  font-size: 14.5px; font-weight: 600; color: var(--color-primary-dark);
  margin-top: 18px;
}

/* ─── Cahier view ───────────────────────────────────────────── */
.cahier-view { max-width: 1320px; margin: 0 auto; }
.cahier-body { display: block; }
.cahier-left  { display: block; min-width: 0; }

/* Layout 2 colonnes : actif uniquement sur les slides Options (avec vote) */
.cahier-view.with-vote .cahier-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 380px;
  gap: 16px;
  align-items: start;
}
.cahier-view.with-vote .vote-panel { margin-top: 0; }

.cahier-header {
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 14px 18px;
  margin-bottom: 16px;
  box-shadow: var(--shadow-sm);
  display: flex; align-items: center; gap: 14px;
}
.cahier-header-num {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px;
  background: var(--color-primary); color: #fff;
  border-radius: 50%;
  font-family: var(--font-mono); font-weight: 700; font-size: 15px;
  flex-shrink: 0;
}
.cahier-header-titles { flex: 1; min-width: 0; }
.cahier-header-title {
  font-size: 11px; font-weight: 700;
  color: var(--color-primary-dark);
  text-transform: uppercase; letter-spacing: .5px;
}
.cahier-header-nom {
  font-size: 17px; font-weight: 700; color: var(--color-text);
  margin-top: 2px;
}

/* Stage = zone d'affichage de la page avec flèches latérales */
.cahier-stage {
  position: relative;
  display: flex; align-items: center; justify-content: center;
  gap: 10px;
  margin-bottom: 14px;
}
.page-frame {
  position: relative;
  background: var(--color-paper);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
  max-width: calc(100% - 100px);
  /* slide ratio = 10.83 / 7.50 ≈ 1.444 */
  aspect-ratio: 10.83 / 7.5;
  width: 100%;
}
.page-img {
  width: 100%; height: 100%;
  display: block;
  object-fit: contain;
  background: #fff;
}
.page-loading {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,.85);
  font-size: 14px; color: var(--color-muted);
}
/* Le [hidden] attribut HTML doit toujours masquer l'élément, même quand display: flex est défini */
.page-loading[hidden] { display: none !important; }
.nav-side {
  flex-shrink: 0;
  width: 44px; height: 72px;
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: 8px;
  font-size: 32px; font-weight: 600; line-height: 1;
  color: var(--color-primary-dark);
  cursor: pointer;
  transition: background .12s, border-color .12s, transform .08s;
  box-shadow: var(--shadow-sm);
}
.nav-side:hover:not(:disabled) {
  background: var(--color-primary); color: #fff;
  border-color: var(--color-primary-dark);
  transform: scale(1.05);
}
.nav-side:disabled { opacity: .35; cursor: not-allowed; }

/* Controls (compteur + boutons larges) */
.cahier-controls {
  display: flex; align-items: center; justify-content: space-between;
  gap: 14px;
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 10px 14px;
  box-shadow: var(--shadow-sm);
  margin-bottom: 16px;
}
.nav-btn {
  padding: 9px 16px;
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: 7px;
  font-family: var(--font); font-size: 13px; font-weight: 600;
  color: var(--color-text);
  cursor: pointer;
  transition: background .12s, border-color .12s;
}
.nav-btn:hover:not(:disabled) {
  background: var(--color-primary-light); border-color: var(--color-primary);
}
.nav-btn:disabled { opacity: .35; cursor: not-allowed; }
.nav-btn--primary {
  background: var(--color-primary); color: #fff; border-color: var(--color-primary-dark);
}
.nav-btn--primary:hover:not(:disabled) {
  background: var(--color-primary-dark);
}
.page-counter {
  font-size: 13px; color: var(--color-muted);
  display: flex; align-items: center; gap: 10px;
  flex-wrap: wrap; justify-content: center;
}
.page-counter strong { color: var(--color-text); font-size: 14px; }
.page-title {
  background: var(--color-primary-light); color: var(--color-primary-dark);
  padding: 3px 10px; border-radius: 999px;
  font-size: 11.5px; font-weight: 600;
}

/* ─── Vote panel ────────────────────────────────────────────── */
.vote-panel {
  background: #fff;
  border: 2px solid var(--color-primary);
  border-radius: var(--radius-md);
  padding: 20px 22px;
  box-shadow: var(--shadow-md);
  margin-top: 4px;
}
.vote-panel-header {
  display: flex; align-items: flex-start; gap: 12px;
  margin-bottom: 16px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--color-border);
}
.vote-icon { font-size: 26px; flex-shrink: 0; }
.vote-panel-header h3 {
  font-size: 17px; font-weight: 700; color: var(--color-primary-dark);
  margin: 0;
}
.vote-intro {
  font-size: 13px; color: var(--color-muted);
  margin-top: 3px;
  line-height: 1.5;
}
.vote-options { display: flex; flex-direction: column; gap: 12px; margin-bottom: 18px; }
.vote-option {
  background: #fafbfc;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
}
.vote-option-label {
  font-size: 13.5px; line-height: 1.5;
  margin-bottom: 10px;
}
.vote-option-label strong {
  color: var(--color-primary-dark);
}
.vote-buttons {
  display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px;
}
.vote-btn {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 4px;
  padding: 10px 6px;
  border: 2px solid var(--color-border); background: #fff;
  border-radius: 8px; cursor: pointer;
  font-family: var(--font); font-size: 12px; font-weight: 600; line-height: 1.2;
  color: var(--color-text); text-align: center;
  transition: transform .12s, box-shadow .12s, border-color .12s, background .12s;
  min-height: 64px;
}
.vote-btn-emoji { font-size: 22px; line-height: 1; }
.vote-btn:hover { transform: translateY(-1px); box-shadow: 0 2px 8px rgba(0,0,0,.10); }
.vote-btn--fav:hover { border-color: #16a34a; background: #f0fdf4; }
.vote-btn--res:hover { border-color: #d97706; background: #fffbeb; }
.vote-btn--no:hover  { border-color: #dc2626; background: #fef2f2; }

.vote-btn--fav.is-selected { background: #16a34a; border-color: #15803d; color: #fff; box-shadow: 0 3px 10px rgba(22,163,74,.35); }
.vote-btn--res.is-selected { background: #f59e0b; border-color: #d97706; color: #fff; box-shadow: 0 3px 10px rgba(245,158,11,.35); }
.vote-btn--no.is-selected  { background: #dc2626; border-color: #b91c1c; color: #fff; box-shadow: 0 3px 10px rgba(220,38,38,.35); }

.vote-comment { margin-bottom: 12px; }
.vote-comment label {
  display: block;
  font-size: 12.5px; font-weight: 600; color: var(--color-text);
  margin-bottom: 6px;
}
.vote-comment label small { color: var(--color-muted); font-weight: 400; }
.vote-comment textarea,
.vote-comment input {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--color-border);
  border-radius: 7px;
  font-family: var(--font); font-size: 13.5px;
  background: #fff;
  resize: vertical;
}
.vote-comment textarea { min-height: 80px; }
.vote-comment textarea:focus,
.vote-comment input:focus {
  outline: none; border-color: var(--color-primary);
}
.vote-submit {
  width: 100%;
  padding: 13px;
  background: var(--color-primary); color: #fff;
  border: none; border-radius: 8px;
  font-family: var(--font); font-size: 14.5px; font-weight: 700;
  cursor: pointer;
  transition: background .15s;
  margin-top: 4px;
}
.vote-submit:hover:not(:disabled) { background: var(--color-primary-dark); }
.vote-submit:disabled { opacity: .5; cursor: wait; }
.vote-msg {
  font-size: 13px; margin-top: 12px; padding: 10px 12px;
  border-radius: 6px; line-height: 1.5;
  display: none;
}
.vote-msg.is-err { display: block; background: #fee2e2; color: #991b1b; }
.vote-msg.is-ok  { display: block; background: #dcfce7; color: #166534; font-weight: 600; }

/* ─── Bouton sidebar « Carte générale » (variante) ───────────── */
.sidebar-map {
  background: #fff8e1;
  color: #8a5a00;
  border: 2px solid #f4c430;
}
.sidebar-map:hover { border-color: #d4a017; background: #fff3c4; }
.sidebar-map .sidebar-home-icon { font-size: 18px; }

/* ─── Bouton « Visualiser la carte générale » dans le bandeau itinéraire */
.cahier-header { gap: 14px; }
.cahier-header-mapbtn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 9px 14px;
  background: #fff8e1;
  color: #8a5a00;
  border: 2px solid #f4c430;
  border-radius: var(--radius-md);
  cursor: pointer;
  font-family: var(--font); font-size: 13px; font-weight: 700;
  white-space: nowrap;
  transition: background .15s, border-color .15s, transform .08s;
  flex-shrink: 0;
}
.cahier-header-mapbtn:hover {
  background: #fff3c4; border-color: #d4a017; transform: translateY(-1px);
}
.cahier-header-mapbtn-icon { font-size: 16px; }

/* ─── Modale plein écran : carte générale ────────────────────── */
.map-modal {
  position: fixed; inset: 0;
  background: rgba(15, 23, 42, .82);
  z-index: 9000;
  display: flex; flex-direction: column;
  animation: mapModalFade .15s ease-out;
}
.map-modal[hidden] { display: none; }
@keyframes mapModalFade { from { opacity: 0; } to { opacity: 1; } }
body.map-modal-open { overflow: hidden; }
.map-modal-header {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px;
  padding: 10px 16px;
  background: var(--color-primary, #2f6bb0);
  color: #fff;
  flex-shrink: 0;
}
.map-modal-title {
  display: flex; align-items: center; gap: 10px;
  font-family: var(--font); font-size: 15px; font-weight: 700;
  min-width: 0;
}
.map-modal-icon { font-size: 18px; }
.map-modal-close {
  background: rgba(255,255,255,.18);
  color: #fff;
  border: 1.5px solid rgba(255,255,255,.35);
  width: 36px; height: 36px;
  border-radius: 50%;
  cursor: pointer;
  font-size: 18px; font-weight: 700;
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  transition: background .15s, transform .08s;
}
.map-modal-close:hover { background: rgba(255,255,255,.32); transform: scale(1.05); }
.map-modal-iframe {
  flex: 1;
  width: 100%; height: 100%;
  border: 0;
  background: #fff;
}

/* ─── Mobile ────────────────────────────────────────────────── */
/* En dessous de 1100px : le panneau de vote redescend sous la slide (1 col) */
@media (max-width: 1100px) {
  .cahier-view.with-vote .cahier-body { grid-template-columns: 1fr; }
}

@media (max-width: 900px) {
  /* Layout vertical : bandeau-pastilles en haut, main en dessous */
  .layout { grid-template-columns: 1fr; display: flex; flex-direction: column; }

  /* ── Navigation mobile : la colonne de gauche devient un MENU DÉROULANT ──
     Ce qu'il y avait ici avant : un bandeau horizontal de pastilles numérotées.
     L'intention était juste, la mise en œuvre était MORTE — les règles visaient
     .sidebar-item-num et .sidebar-item-text alors que l'outil fusionné produit
     .sidebar-item-code et .sidebar-item-name. Les libellés n'étaient donc jamais
     masqués : chaque entrée gardait sa largeur pleine, la barre mesurait 4 747 px
     dans une fenêtre de 375, et PAS UN SEUL itinéraire n'était atteignable.
     Mesuré au navigateur le 2026-09-08, pas supposé.

     Une liste verticale ne peut pas connaître cette panne : elle ne dépend
     d'aucun masquage de libellé pour tenir dans la largeur. */
  /* L'affichage de .mobnav est déclaré plus bas, dans le bloc téléphone ajouté
     en fin de feuille : à spécificité égale, c'est la DERNIÈRE règle qui gagne,
     et la règle de base « display:none » y est écrite après ce bloc-ci. */
  .layout { position: relative; }

  .sidebar {
    /* Le menu se déplie SOUS son bouton, jamais par-dessus : la hauteur réelle
       du bouton est mesurée en JS (--mobnav-h) plutôt que devinée, sinon un
       changement de police ou de padding le recouvrirait en silence. */
    position: absolute; left: 0; right: 0; top: var(--mobnav-h, 42px);
    z-index: 60;
    max-height: min(74vh, calc(100% - var(--mobnav-h, 42px)));
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    flex-direction: column;
    gap: 4px;
    padding: 8px 10px 16px;
    border-right: none;
    border-bottom: 1px solid var(--color-border);
    box-shadow: 0 16px 34px rgba(15, 23, 42, .22);
    display: none;
  }
  body.nav-ouverte .sidebar { display: flex; }
  /* Voile : rend le repli évident et empêche de toucher la page par-dessous. */
  body.nav-ouverte .main::before {
    content: ''; position: absolute; inset: 0;
    background: rgba(15, 23, 42, .34); z-index: 55;
  }

  .sidebar-section-label { margin: 10px 2px 2px; font-size: 11px; }
  .sidebar-footer { display: none; }

  /* Cibles tactiles : 46 px, la hauteur en dessous de laquelle on rate sa case. */
  .sidebar-home,
  .sidebar-item {
    min-height: 46px;
    padding: 8px 10px;
    border-radius: var(--radius-md);
  }
  .sidebar-item-code { min-width: 38px; height: 28px; font-size: 12.5px; }
  .sidebar-item-name { font-size: 13.5px; line-height: 1.3; }

  /* ── Mobile : bandeau ultra-compact (≤ 10vh) ────────────────── */
  .topbar { max-height: 10vh; }
  .topbar-inner {
    padding: 6px 12px;
    gap: 10px;
    align-items: center;
    min-height: 0;
  }
  /* Logos empilés à gauche : Mobilité positive AU-DESSUS d'ATEVE */
  .topbar-brand {
    flex-direction: row;
    gap: 8px;
    align-items: center;
  }
  .topbar-brand-logos {
    display: flex; flex-direction: column;
    justify-content: center;
    gap: 4px;
    flex-shrink: 0;
  }
  .topbar-logo         { height: 18px; width: auto; }
  .topbar-partner-logo { height: 14px; width: auto; }
  .topbar-titles { min-width: 0; flex: 1; }
  .topbar-title {
    font-size: 13px; line-height: 1.15;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  .topbar-subtitle {
    font-size: 10px; line-height: 1.2; margin-top: 1px;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  .topbar-badge { display: none; }
  .topbar-logo-ccpl { height: 30px; flex-shrink: 0; }
  .main { padding: 14px; }
  .home-card { padding: 22px 18px; }
  .home-header h2 { font-size: 19px; }
  .cahier-stage { flex-direction: column; gap: 8px; }
  .nav-side {
    width: 100%; height: 38px; font-size: 22px;
    border-radius: 7px;
  }
  .nav-side--prev { order: 2; }
  .nav-side--next { order: 0; }
  .page-frame { max-width: 100%; order: 1; }
  .cahier-controls {
    flex-direction: column-reverse; gap: 8px; padding: 10px;
  }
  .nav-btn { width: 100%; }
  .page-counter { font-size: 12px; }
  .vote-panel { padding: 14px 16px; }
  .vote-buttons { gap: 6px; }
  .vote-btn { font-size: 11px; min-height: 60px; padding: 8px 4px; }
  .vote-btn-emoji { font-size: 20px; }

  /* Bouton « Visualiser la carte générale » : version compacte */
  .cahier-header { flex-wrap: wrap; gap: 10px; }
  .cahier-header-mapbtn {
    width: 100%;
    justify-content: center;
    padding: 10px 12px;
    font-size: 12px;
  }
  .cahier-header-mapbtn-icon { font-size: 16px; }

  /* Modale plein écran : header compact */
  .map-modal-header { padding: 8px 12px; }
  .map-modal-title { font-size: 13px; }
  .map-modal-title span:not(.map-modal-icon) {
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  .map-modal-close { width: 32px; height: 32px; font-size: 16px; }
}

/* Sous-liste à puces dans le mode d'emploi */
.home-list--nested { margin-top: 6px; margin-left: 18px; gap: 4px; }
.home-list--nested li { font-size: 14px; }

/* ─── Live Activity Feed : remarques précédentes des contributeurs ─────────
   Affiché sous le panneau de vote, sur les slides « Options ».
   Inspiré de Linear/Notion/Substack : carte blanche, ombre légère, typo claire.
   ─────────────────────────────────────────────────────────────────────────── */
.remarques-feed {
  background: #ffffff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 18px 20px;
  box-shadow: var(--shadow-sm);
  margin-top: 14px;
  font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Inter', var(--font), system-ui, sans-serif;
}

.remarques-header {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 16px; flex-wrap: wrap;
  padding-bottom: 14px;
  border-bottom: 1px solid #f1f5f9;
  margin-bottom: 14px;
}
.remarques-header-titles {
  display: flex; flex-direction: column; gap: 2px; min-width: 0;
}
.remarques-title {
  font-size: 15px; font-weight: 700; color: #0f172a;
  letter-spacing: -0.01em;
}
.remarques-count {
  font-weight: 600; color: var(--color-muted);
  font-feature-settings: 'tnum' 1;
  margin-left: 4px;
}
.remarques-subtitle {
  font-size: 12px; color: var(--color-muted);
  letter-spacing: .01em;
}

/* Pillules compteurs */
.remarques-pills {
  display: flex; gap: 6px; flex-wrap: wrap;
  align-items: center;
}
.remarques-pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 10px; border-radius: 999px;
  font-size: 12.5px; font-weight: 600; line-height: 1;
  border: 1px solid transparent;
  transition: transform .12s, box-shadow .12s;
}
.remarques-pill-icon { font-size: 13px; }
.remarques-pill-count {
  font-feature-settings: 'tnum' 1;
  background: rgba(0,0,0,.08);
  padding: 2px 7px; border-radius: 999px;
  font-size: 11.5px;
}
.remarques-pill--fav { background: #ecfdf5; color: #065f46; border-color: #a7f3d0; }
.remarques-pill--res { background: #fffbeb; color: #92400e; border-color: #fde68a; }
.remarques-pill--no  { background: #fef2f2; color: #991b1b; border-color: #fecaca; }
.remarques-pill:hover { transform: translateY(-1px); box-shadow: 0 2px 6px rgba(0,0,0,.06); }

/* Barre stacked */
.remarques-stacked-bar {
  display: flex; height: 8px;
  background: #f1f5f9; border-radius: 999px; overflow: hidden;
  margin-bottom: 16px;
}
.remarques-bar-seg { display: block; height: 100%; transition: width .3s ease; }
.remarques-bar-seg--fav { background: #10b981; }
.remarques-bar-seg--res { background: #f59e0b; }
.remarques-bar-seg--no  { background: #ef4444; }

/* Liste des remarques */
.remarques-list {
  display: flex; flex-direction: column; gap: 10px;
}

.remarque-card {
  display: flex; gap: 12px;
  padding: 12px 14px;
  background: #fafbfc;
  border: 1px solid #eef1f5;
  border-radius: var(--radius-sm);
  opacity: 0; transform: translateY(4px);
  animation: remarqueFadeIn 200ms ease-out forwards;
  transition: background .15s, border-color .15s;
}
.remarque-card:hover {
  background: #ffffff;
  border-color: #dde4ec;
}
@keyframes remarqueFadeIn {
  to { opacity: 1; transform: translateY(0); }
}

.remarque-vote-badge {
  flex-shrink: 0;
  display: inline-flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 2px;
  width: 64px; padding: 8px 4px;
  border-radius: 8px;
  font-size: 10.5px; font-weight: 700; text-align: center; line-height: 1.1;
  align-self: flex-start;
}
.remarque-vote-badge-icon { font-size: 18px; line-height: 1; }
.remarque-vote-badge-label { font-size: 10.5px; letter-spacing: .02em; }
.remarque-vote-badge--fav { background: #10b981; color: #fff; }
.remarque-vote-badge--res { background: #f59e0b; color: #fff; }
.remarque-vote-badge--no  { background: #ef4444; color: #fff; }
.remarque-vote-badge--unknown { background: #e5e7eb; color: #475569; }

.remarque-body { flex: 1; min-width: 0; }

.remarque-meta {
  display: flex; align-items: baseline; gap: 6px;
  margin-bottom: 4px;
  font-size: 12.5px; color: var(--color-muted);
  flex-wrap: wrap;
}
.remarque-pseudo { font-weight: 600; color: #0f172a; }
.remarque-dot { color: #cbd5e1; }
.remarque-date { color: var(--color-muted); font-feature-settings: 'tnum' 1; }

.remarque-text {
  font-size: 14px; line-height: 1.55; color: #1e293b;
  white-space: pre-wrap; word-wrap: break-word;
}
.remarque-text--empty { color: var(--color-muted); font-style: italic; font-size: 13px; }

.remarque-votes-detail {
  display: flex; flex-wrap: wrap; gap: 5px;
  margin-top: 8px;
}
.remarque-vote-tag {
  display: inline-block;
  font-size: 11px; padding: 3px 8px;
  border-radius: 999px;
  border: 1px solid transparent;
  line-height: 1.3;
}
.remarque-vote-tag--fav { background: #ecfdf5; color: #065f46; border-color: #d1fae5; }
.remarque-vote-tag--res { background: #fffbeb; color: #92400e; border-color: #fde68a; }
.remarque-vote-tag--no  { background: #fef2f2; color: #991b1b; border-color: #fecaca; }
.remarque-vote-tag--unknown { background: #f1f5f9; color: #475569; border-color: #e2e8f0; }

/* Bouton « Afficher plus » */
.remarques-more {
  margin-top: 12px;
  width: 100%;
  background: #fff;
  border: 1px dashed #cbd5e1;
  color: var(--color-primary-dark);
  font-family: inherit; font-size: 13px; font-weight: 600;
  padding: 10px 12px;
  border-radius: 8px;
  cursor: pointer;
  transition: background .15s, border-color .15s, color .15s;
}
.remarques-more:hover {
  background: var(--color-primary-light);
  border-color: var(--color-primary);
  color: var(--color-primary-dark);
}

/* Empty state */
.remarques-empty {
  display: flex; align-items: center; gap: 14px;
  padding: 18px 16px;
  background: #f8fafc; border: 1px dashed #cbd5e1;
  border-radius: 10px;
  color: #475569;
}
.remarques-empty-icon { font-size: 28px; flex-shrink: 0; }
.remarques-empty strong { display: block; color: #0f172a; font-size: 14px; margin-bottom: 2px; }
.remarques-empty p { font-size: 12.5px; color: var(--color-muted); margin: 0; }
.remarques-empty--err { border-style: solid; border-color: #fecaca; background: #fef2f2; color: #991b1b; }

/* Loading skeleton */
.remarques-loading {
  display: flex; flex-direction: column; gap: 10px;
}
.remarques-skeleton {
  height: 72px;
  border-radius: var(--radius-sm);
  background: linear-gradient(90deg, #f1f5f9 0%, #e2e8f0 50%, #f1f5f9 100%);
  background-size: 200% 100%;
  animation: remarqueShimmer 1.4s infinite linear;
}
@keyframes remarqueShimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* Responsive : mobile */
@media (max-width: 720px) {
  .remarques-feed { padding: 14px 14px; margin-top: 12px; }
  .remarques-header { gap: 10px; padding-bottom: 12px; margin-bottom: 12px; }
  .remarques-title { font-size: 14px; }
  .remarques-pills { gap: 5px; }
  .remarques-pill { font-size: 11.5px; padding: 4px 8px; }
  .remarques-pill-label { display: none; } /* garde icône + count sur mobile */
}

/* ─── Conversation SMS — threading Reddit-style ───────────────────────
   Toutes les bulles alignées à GAUCHE (vue lecture/consultation).
   Réponses indentées via .sms-replies (border-left grise pour le filet).
   ──────────────────────────────────────────────────────────────────── */
.sms-conversation {
  display: flex; flex-direction: column;
  gap: 14px;
  font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Inter', var(--font), system-ui, sans-serif;
}

.sms-message {
  display: flex; flex-direction: column;
  gap: 4px;
  opacity: 0; transform: translateY(4px);
  animation: smsFadeIn 200ms ease-out forwards;
}
@keyframes smsFadeIn {
  to { opacity: 1; transform: translateY(0); }
}

/* Mini-label au-dessus de la bulle : avatar + pseudo + badge vote + date */
.sms-meta {
  display: flex; align-items: center; gap: 8px;
  font-size: 12.5px; color: var(--color-muted);
  flex-wrap: wrap;
}
.sms-avatar {
  display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px;
  border-radius: 50%;
  color: #fff;
  font-size: 12px; font-weight: 700;
  line-height: 1;
  flex-shrink: 0;
  box-shadow: 0 1px 2px rgba(0,0,0,.12);
}
.sms-pseudo { font-weight: 600; color: #0f172a; }
.sms-date   { color: var(--color-muted); font-feature-settings: 'tnum' 1; margin-left: auto; }

.sms-vote-badge {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 11px; font-weight: 600;
  border: 1px solid transparent;
  line-height: 1.4;
}
.sms-vote-badge--fav  { background:#dcfce7; color:#14532d; border-color:#bbf7d0; }
.sms-vote-badge--res  { background:#fef3c7; color:#78350f; border-color:#fde68a; }
.sms-vote-badge--no   { background:#fee2e2; color:#7f1d1d; border-color:#fecaca; }
.sms-vote-badge--none { background:#f1f5f9; color:#475569; border-color:#e2e8f0; }

/* La bulle elle-même */
.sms-bubble {
  align-self: flex-start;
  max-width: 88%;
  padding: 12px 14px;
  border-radius: 16px;
  border-left: 3px solid #6b7280;
  background: #f9fafb;
  box-shadow: 0 1px 2px rgba(0,0,0,.08);
  word-wrap: break-word;
}
.sms-bubble--fav   { background:#f0fdf4; border-left-color:#16a34a; }
.sms-bubble--res   { background:#fffbeb; border-left-color:#d97706; }
.sms-bubble--no    { background:#fef2f2; border-left-color:#dc2626; }
.sms-bubble--none,
.sms-bubble--reply { background:#f9fafb; border-left-color:#6b7280; }

.sms-text {
  font-size: 14px; line-height: 1.55; color: #1e293b;
  white-space: pre-wrap;
}
.sms-text--empty { color: var(--color-muted); font-style: italic; font-size: 13px; }

.sms-votes-detail {
  display: flex; flex-wrap: wrap; gap: 5px;
  margin-top: 8px;
}
.sms-vote-tag {
  display: inline-block;
  font-size: 11px; padding: 3px 8px;
  border-radius: 999px;
  border: 1px solid transparent; line-height: 1.3;
}
.sms-vote-tag--fav   { background:#ecfdf5; color:#065f46; border-color:#d1fae5; }
.sms-vote-tag--res   { background:#fffbeb; color:#92400e; border-color:#fde68a; }
.sms-vote-tag--no    { background:#fef2f2; color:#991b1b; border-color:#fecaca; }
.sms-vote-tag--none  { background:#f1f5f9; color:#475569; border-color:#e2e8f0; }

/* Actions sous la bulle : bouton "Répondre" discret */
.sms-actions {
  display: flex; gap: 8px;
  margin-top: 2px;
}
.sms-reply-btn {
  background: transparent; border: none;
  color: var(--color-primary-dark);
  font-family: inherit; font-size: 12px; font-weight: 600;
  padding: 4px 8px;
  border-radius: 6px;
  cursor: pointer;
  transition: background .12s, color .12s;
}
.sms-reply-btn:hover { background: var(--color-primary-light); }
.sms-reply-btn.is-open { color: #64748b; }

/* Mini-formulaire de réponse */
.sms-reply-form {
  margin-top: 8px;
  padding: 10px 12px;
  background: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  box-shadow: 0 1px 3px rgba(0,0,0,.05);
  display: flex; flex-direction: column; gap: 8px;
  animation: smsFadeIn 180ms ease-out;
}
.sms-reply-text {
  width: 100%;
  font-family: inherit; font-size: 13.5px;
  padding: 8px 10px;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  resize: vertical;
  min-height: 56px;
}
.sms-reply-text:focus { outline: 2px solid var(--color-primary-light); border-color: var(--color-primary); }
.sms-reply-row {
  display: flex; gap: 8px; flex-wrap: wrap; align-items: center;
}
.sms-reply-prenom {
  flex: 1; min-width: 140px;
  font-family: inherit; font-size: 13px;
  padding: 6px 10px;
  border: 1px solid #d1d5db;
  border-radius: 8px;
}
.sms-reply-votes {
  display: flex; gap: 4px;
}
.sms-vote-mini {
  background: #f1f5f9; border: 1px solid #e2e8f0;
  border-radius: 999px;
  width: 30px; height: 30px;
  font-size: 14px; line-height: 1;
  cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  transition: transform .12s, background .12s, border-color .12s;
}
.sms-vote-mini:hover { transform: translateY(-1px); }
.sms-vote-mini.is-selected.sms-vote-mini--fav { background:#dcfce7; border-color:#16a34a; }
.sms-vote-mini.is-selected.sms-vote-mini--res { background:#fef3c7; border-color:#d97706; }
.sms-vote-mini.is-selected.sms-vote-mini--no  { background:#fee2e2; border-color:#dc2626; }

.sms-reply-actions {
  display: flex; align-items: center; gap: 10px;
}
.sms-reply-send {
  background: var(--color-primary); color: #fff;
  border: none; border-radius: 8px;
  padding: 7px 14px;
  font-family: inherit; font-size: 13px; font-weight: 600;
  cursor: pointer;
  transition: background .12s;
}
.sms-reply-send:hover { background: var(--color-primary-dark); }
.sms-reply-send:disabled { background: #94a3b8; cursor: progress; }
.sms-reply-msg { font-size: 12px; color: var(--color-muted); }
.sms-reply-msg.is-ok  { color:#047857; }
.sms-reply-msg.is-err { color:#b91c1c; }

/* Container des réponses : indentation + filet vertical (Reddit-style) */
.sms-replies {
  margin-left: 24px;
  padding-left: 14px;
  border-left: 2px solid #e5e7eb;
  display: flex; flex-direction: column;
  gap: 14px;
  margin-top: 10px;
}

/* Empty state (réutilisé par le composant SMS) */
.sms-empty {
  display: flex; align-items: center; gap: 14px;
  padding: 18px 16px;
  background: #f8fafc; border: 1px dashed #cbd5e1;
  border-radius: 10px;
  color: #475569;
}
.sms-empty-icon { font-size: 28px; flex-shrink: 0; }
.sms-empty strong { display: block; color:#0f172a; font-size: 14px; margin-bottom: 2px; }
.sms-empty p { font-size: 12.5px; color: var(--color-muted); margin: 0; }
.sms-empty--err { border-style: solid; border-color:#fecaca; background:#fef2f2; color:#991b1b; }

/* Responsive : mobile — indentation réduite + stop après 3 niveaux */
@media (max-width: 720px) {
  .sms-bubble { max-width: 95%; padding: 10px 12px; }
  .sms-text { font-size: 13.5px; }
  .sms-avatar { width: 22px; height: 22px; font-size: 11px; }
  .sms-meta { gap: 6px; font-size: 12px; }
  .sms-replies { margin-left: 12px; padding-left: 10px; gap: 12px; }
  /* Au-delà de 3 niveaux : stoppe l'indentation pour éviter overflow horizontal */
  .sms-replies .sms-replies .sms-replies .sms-replies {
    margin-left: 0; padding-left: 8px; border-left-width: 1px;
  }
}

/* ═══ Espace associations — styles spécifiques ═══════════════ */
.sidebar-item-code {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 34px; height: 28px; padding: 0 6px; margin-right: 10px;
  background: var(--color-primary); color: #fff; font-weight: 700;
  border-radius: var(--radius-sm); font-size: 12.5px; flex-shrink: 0;
}
.sidebar-item-name { font-size: 12.5px; line-height: 1.25; }

.itin { padding: 22px 26px 60px; max-width: 1040px; margin: 0 auto; }
.itin-header { display: flex; align-items: center; gap: 16px; margin-bottom: 18px; }
.itin-code {
  width: 54px; height: 54px; border-radius: var(--radius-md); flex-shrink: 0;
  background: linear-gradient(135deg, var(--color-primary), var(--color-primary-dark));
  color: #fff; font-size: 20px; font-weight: 700; display: flex; align-items: center; justify-content: center;
}
.itin-nom { font-size: 20px; }
.itin-sub { font-size: 12.5px; color: var(--color-muted); margin-top: 3px; }

.volet {
  background: #fff; border: 1px solid var(--color-border); border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm); padding: 18px 20px; margin-bottom: 22px;
}
.volet-title { font-size: 16px; display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.volet-num {
  width: 26px; height: 26px; border-radius: 50%; background: var(--color-primary);
  color: #fff; font-size: 14px; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.volet-hint { font-size: 12.5px; color: var(--color-muted); margin-bottom: 10px; }

.field-label { display: block; font-weight: 600; font-size: 13px; margin: 10px 0 4px; }
.global-form textarea, .sec-form textarea {
  width: 100%; border: 1px solid var(--color-border); border-radius: var(--radius-sm);
  padding: 9px 11px; font-family: var(--font); font-size: 13.5px; resize: vertical; background: #fbfcfe;
}
.global-form textarea:focus, .sec-form textarea:focus { outline: 2px solid var(--color-primary-light); border-color: var(--color-primary); }
.form-row { display: flex; gap: 10px; margin-top: 10px; flex-wrap: wrap; }
.form-row input[type="text"] {
  flex: 1; min-width: 200px; border: 1px solid var(--color-border); border-radius: var(--radius-sm);
  padding: 9px 11px; font-family: var(--font); font-size: 13.5px;
}
.btn-primary {
  background: var(--color-primary); color: #fff; border: none; border-radius: var(--radius-sm);
  padding: 10px 18px; font-family: var(--font); font-size: 13.5px; font-weight: 600; cursor: pointer;
}
.btn-primary:hover { background: var(--color-primary-dark); }
.btn-primary:disabled { opacity: .6; cursor: default; }
.form-msg { font-size: 12.5px; margin-top: 7px; min-height: 16px; }
.form-msg.is-ok { color: var(--color-primary-dark); font-weight: 600; }
.form-msg.is-err { color: #b3261e; font-weight: 600; }

.sec-card {
  border: 1px solid var(--color-border); border-radius: var(--radius-md);
  padding: 14px 16px; margin-bottom: 16px; background: #fbfcfe;
}
.sec-head { font-weight: 700; font-size: 14px; color: var(--color-primary-dark); margin-bottom: 8px; }
.sec-photo {
  width: 100%; max-width: 720px; display: block; border-radius: var(--radius-sm);
  border: 1px solid var(--color-border); margin-bottom: 10px; background: #eef1f4;
}

.contribs { margin-top: 12px; }
.contribs-title { font-size: 12.5px; font-weight: 700; color: var(--color-muted); margin-bottom: 8px; }
.contribs-empty { font-size: 12.5px; color: var(--color-muted); font-style: italic; margin-top: 8px; }
.bub {
  background: var(--color-primary-light); border-radius: 12px 12px 12px 3px;
  padding: 9px 12px; margin-bottom: 8px; max-width: 720px;
}
.bub-meta { font-size: 12px; margin-bottom: 3px; }
.bub-date { color: var(--color-muted); font-weight: 400; }
.bub-text { font-size: 13px; white-space: pre-wrap; }

#map {
  height: 480px; border-radius: var(--radius-md); border: 1px solid var(--color-border);
  box-shadow: var(--shadow-sm);
}
.map-pop { font-family: var(--font); font-size: 12.5px; display: flex; flex-direction: column; gap: 7px; }
.map-pop-title { font-weight: 700; color: var(--color-primary-dark); }
.map-pop select, .map-pop textarea, .map-pop input {
  width: 100%; border: 1px solid var(--color-border); border-radius: var(--radius-sm);
  padding: 6px 8px; font-family: var(--font); font-size: 12.5px;
}

.home-h3 { margin: 16px 0 6px; font-size: 14.5px; }
.home-p, .home-list li { font-size: 13.5px; line-height: 1.55; }
.home-list { padding-left: 20px; margin: 6px 0; }
.home-list li { margin-bottom: 6px; }
.home-note {
  margin-top: 14px; padding: 10px 12px; border-left: 3px solid var(--color-primary);
  background: var(--color-primary-light); border-radius: var(--radius-sm); font-size: 12.5px;
}
.page-footer {
  text-align: center; padding: 16px 0; font-size: 11.5px; color: var(--color-muted);
  border-top: 1px solid var(--color-border); background: #fff;
}

/* Carte d'accueil (10 itinéraires) */
#homeMap {
  height: 420px; margin: 14px 0 6px; border-radius: var(--radius-md);
  border: 1px solid var(--color-border); box-shadow: var(--shadow-sm);
}


/* ═══ Styles du fond de carte — copiés du webmapping élus ═══ */

.legend-item {
  display: flex; align-items: center; gap: 8px;
  margin-bottom: 5px;
}

.legend-text { font-size: 11px; color: var(--color-text); }


/* ─── Map card (cartouche) ───────────────────────────────────── */
.map-card {
  position: absolute; top: 12px; right: 12px; z-index: 800;
  background: rgba(255,255,255,.96); border-radius: var(--radius-md);
  padding: 12px 16px; box-shadow: var(--shadow-md);
  min-width: 190px; max-width: 260px;
  transition: opacity .2s;
  /* Sur écran court (laptop 13" / 14") la légende + bouton peuvent dépasser le viewport
     → on borne la hauteur et on active le scroll vertical pour garantir que tout reste accessible */
  max-height: calc(100vh - 24px);
  overflow-y: auto;
  overflow-x: hidden;
  /* Scrollbar discrète */
  scrollbar-width: thin;
}

.map-card::-webkit-scrollbar { width: 6px; }

.map-card::-webkit-scrollbar-thumb { background: rgba(148, 163, 184, 0.4); border-radius: 3px; }

.map-card::-webkit-scrollbar-thumb:hover { background: rgba(100, 116, 139, 0.6); }

.map-card-label {
  font-size: 10px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .5px; color: var(--color-muted); margin-bottom: 4px;
}

.map-card-title {
  font-size: 14px; font-weight: 700; color: var(--color-text); line-height: 1.3;
}

.map-card-km {
  font-family: var(--font-mono); font-size: 22px; font-weight: 500;
  color: var(--color-primary-dark); margin-top: 4px;
}

.map-card-km span { font-size: 13px; color: var(--color-muted); }


/* Légende dans la map-card */
.map-card {
  max-width: 280px;  /* légèrement plus large pour la légende */
}

.map-card-legend {
  margin-top: 10px;
  padding-top: 8px;
  border-top: 1px solid var(--color-border);
  display: none; /* masquée en vue d'ensemble, visible quand itinéraire sélectionné */
}

.map-card-legend .legend-item {
  display: flex; align-items: center; gap: 6px;
  margin-bottom: 4px;
}

.map-card-legend .legend-item--pd {
  margin-top: 6px;
  padding-top: 6px;
  border-top: 1px solid var(--color-border);
}

.map-card-legend .legend-text {
  font-size: 10px; color: var(--color-text); line-height: 1.2;
}

.map-card-legend .legend-sep {
  margin: 5px 0;
  border-top: 1px solid var(--color-border);
}


/* Légende permanente : Liaisons hors étude (toujours visible) */
.map-card-hors-etude-legend {
  margin-top: 10px;
  padding-top: 8px;
  border-top: 1px solid var(--color-border);
}

.hors-etude-legend-title {
  font-size: 10.5px;
  font-weight: 700;
  color: #6b5d52;
  margin-bottom: 5px;
  letter-spacing: .1px;
}

.hors-etude-legend-hint {
  font-weight: 500;
  color: var(--color-muted);
  font-size: 9.5px;
}

.hors-etude-legend-item {
  display: flex; align-items: center; gap: 8px;
  margin-bottom: 3px;
  font-size: 10.5px;
  color: var(--color-text);
  line-height: 1.2;
}

.hors-etude-legend-item svg { flex-shrink: 0; }

.hors-etude-legend-sub {
  display: block;
  font-size: 9.5px;
  color: #6b6760;
  font-style: italic;
  margin-top: 1px;
}

.leaflet-pane path.boucle-main {
  /* pas d'animation, pas de drop-shadow — figuré sobre */
}

/* Pastille de légende — points discontinus teal */
.boucle-legend-swatch {
  display: inline-block;
  width: 34px; height: 8px;
  background:
    radial-gradient(circle 1.5px at 2px 4px, #0d7377 100%, transparent 100%),
    radial-gradient(circle 1.5px at 10px 4px, #0d7377 100%, transparent 100%),
    radial-gradient(circle 1.5px at 18px 4px, #0d7377 100%, transparent 100%),
    radial-gradient(circle 1.5px at 26px 4px, #0d7377 100%, transparent 100%),
    radial-gradient(circle 1.5px at 34px 4px, #0d7377 100%, transparent 100%);
  flex-shrink: 0;
}


/* Tooltip liaisons hors étude (taupe) */
.leaflet-tooltip.hors-etude-tooltip {
  background: #6b5d52; border: none; border-radius: var(--radius-sm);
  color: #fff; font-family: var(--font); font-size: 11.5px;
  padding: 7px 11px; box-shadow: var(--shadow-md);
}

.hors-etude-tt strong { font-weight: 700; font-size: 12px; letter-spacing: .2px; }

.hors-etude-troncon { font-size: 11px; opacity: 0.92; margin-top: 2px; }

.hors-etude-phasage { font-size: 10.5px; opacity: 0.78; margin-top: 3px; font-style: italic; }

.leaflet-tooltip-right.hors-etude-tooltip:before,
.leaflet-tooltip-left.hors-etude-tooltip:before  { border-right-color: #6b5d52; border-left-color: #6b5d52; }

.leaflet-tooltip-top.hors-etude-tooltip:before,
.leaflet-tooltip-bottom.hors-etude-tooltip:before { border-top-color: #6b5d52; border-bottom-color: #6b5d52; }


/* ─── Logo CCPL bas-droit carte ─────────────────────────────── */
.ccpl-logo-control {
  background: transparent !important;
  padding: 0 !important;
  box-shadow: none !important;
  border: none !important;
  margin-top: 6px !important;  /* espace sous les boutons zoom */
}

.ccpl-logo-control img {
  height: 52px; width: auto;
  display: block;
  filter: drop-shadow(0 1px 4px rgba(0,0,0,0.22));
}


/* ─── Légende avec figurés SVG ──────────────────────────────── */
.legend-item {
  display: flex; align-items: center; gap: 8px; margin-bottom: 5px;
}

.legend-text { font-size: 11px; color: var(--color-text); line-height: 1.3; }


/* ─── Étiquettes itinéraires sur la carte (ronds colorés) ───── */
.itin-label {
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px;
  border-radius: 50%;
  border: 2.5px solid white;
  box-shadow: 0 1px 6px rgba(0,0,0,.38);
  pointer-events: auto;
  transform: translate(-50%, -50%);
  cursor: pointer;
}

.itin-label-num {
  color: #fff;
  font-family: var(--font-mono, 'DM Mono', monospace);
  font-size: 10px; font-weight: 800;
  line-height: 1; text-align: center;
  white-space: nowrap;
}

.itin-label-txt { display: none; }


/* ─── Pôles générateurs de flux (PGF) ───────────────────────── */

/*
 * Architecture :
 * - Le marker Leaflet a iconSize:[0,0] iconAnchor:[0,0]
 *   → le coin supérieur gauche du div.pgf-marker EST le point géographique
 * - .pgf-dot est centré sur ce point via transform
 * - .pgf-name est positionné via left/right/top/bottom absolus
 *   par rapport à ce même point (0,0), sans jamais utiliser 50%
 *   (qui serait 50% d'une largeur nulle = 0px)
 */
.pgf-marker {
  position: relative;
  width: 0; height: 0;
  pointer-events: none;
}


/* Point : centré sur l'ancre */
.pgf-dot {
  position: absolute;
  border-radius: 50%;
  transform: translate(-50%, -50%);
}


/* Étiquette : commune à toutes les directions */
.pgf-name {
  position: absolute;
  font-family: var(--font);
  line-height: 1.3;
  text-shadow:
    -1px -1px 0 rgba(255,255,255,0.9),
     1px -1px 0 rgba(255,255,255,0.9),
    -1px  1px 0 rgba(255,255,255,0.9),
     1px  1px 0 rgba(255,255,255,0.9),
     0    0   3px rgba(255,255,255,0.8);
}


/* ── 4 directions : toutes relatives au point (0,0) ── */

/* Droite — texte horizontal, pas de saut de ligne */
.pgf-marker.lbl-R .pgf-name {
  left: 8px;
  top: 0;
  transform: translateY(-50%);
  white-space: nowrap;
  text-align: left;
}

/* Gauche — texte horizontal, pas de saut de ligne */
.pgf-marker.lbl-L .pgf-name {
  right: 8px;
  top: 0;
  transform: translateY(-50%);
  white-space: nowrap;
  text-align: right;
}

/* En dessous — saut de ligne autorisé, centré */
.pgf-marker.lbl-B .pgf-name {
  top: 8px;
  left: 0;
  transform: translateX(-50%);
  white-space: normal;
  max-width: 88px;
  text-align: center;
}

/* Au-dessus — saut de ligne autorisé, centré */
.pgf-marker.lbl-T .pgf-name {
  bottom: 8px;
  left: 0;
  transform: translateX(-50%);
  white-space: normal;
  max-width: 88px;
  text-align: center;
}


/* ── Destination principale : point ø9 ── */
.pgf-principale .pgf-dot {
  width: 9px; height: 9px;
  background: #374151;
  border: 1.5px solid rgba(255,255,255,0.9);
  box-shadow: 0 1px 2px rgba(0,0,0,0.25);
}

.pgf-principale .pgf-name {
  font-size: 9.5px; font-weight: 600; color: #374151;
}


/* ── Destination intermédiaire : point ø7, étiquette masquée ── */
.pgf-intermediaire .pgf-dot {
  width: 7px; height: 7px;
  background: #6b7280;
  border: 1.5px solid rgba(255,255,255,0.85);
  box-shadow: 0 1px 2px rgba(0,0,0,0.18);
}

.pgf-intermediaire .pgf-name {
  display: none;
  font-size: 9px; font-weight: 500; color: #4b5563;
}


/* ── Destination de proximité : point ø5, jamais d'étiquette ── */
.pgf-proximite .pgf-dot {
  width: 5px; height: 5px;
  background: #9ca3af;
  border: 1px solid rgba(255,255,255,0.8);
}

.pgf-proximite .pgf-name { display: none; }


/* ── Zoom progressif ── */
.pgf-zoom-med  .pgf-intermediaire .pgf-name { display: block; }

.pgf-zoom-high .pgf-intermediaire .pgf-name,
.pgf-zoom-high .pgf-proximite     .pgf-name { display: block; }

.pgf-zoom-high .pgf-proximite .pgf-name {
  font-size: 8.5px; font-weight: 400; color: #6b7280;
}


/* ════════════════════════════════════════════════════════════
   Bouton "Localiser vos avis sur la carte"
   ════════════════════════════════════════════════════════════ */
/* Bouton "Localiser vos avis sur la carte" — overlay carte, haut-gauche, 3 lignes, rouge vif */
.btn-localiser-avis {
  position: absolute;
  top: 12px; left: 12px;
  z-index: 420;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  width: 92px;
  padding: 10px 8px;
  background: #dc2626;
  color: #fff;
  border: 2px solid #fff;
  border-radius: 10px;
  font-family: var(--font);
  font-size: 11px;
  font-weight: 700;
  line-height: 1.15;
  cursor: pointer;
  text-align: center;
  letter-spacing: .2px;
  box-shadow: 0 2px 8px rgba(0,0,0,.22), 0 0 0 1px rgba(0,0,0,.06);
  transition: background .15s, transform .08s, box-shadow .15s;
}

.btn-localiser-avis svg { flex-shrink: 0; stroke: #fff; transition: stroke .15s; margin-bottom: 2px; }

.btn-localiser-lbl { display: flex; flex-direction: column; gap: 1px; }

.btn-localiser-lbl span { display: block; white-space: nowrap; }

.btn-localiser-avis:hover {
  background: #b91c1c;
  box-shadow: 0 4px 12px rgba(220,38,38,.38), 0 0 0 1px rgba(0,0,0,.06);
  transform: translateY(-1px);
}

.btn-localiser-avis:active { transform: translateY(0); }

.btn-localiser-avis--actif {
  background: #991b1b;
  animation: localiser-pulse 1.2s ease-in-out infinite;
}

.btn-localiser-avis--actif svg { stroke: #fff; }


/* ── Légende avis — titres de section + compteur ─────────────────── */
.legend-section-title {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: #94a3b8;
  margin: 8px 0 4px 0;
  padding-top: 7px;
  border-top: 1px solid #e2e8f0;
  display: flex;
  align-items: center;
  gap: 6px;
}

.legend-avis-count {
  background: var(--color-primary, #1a9e8f);
  color: white;
  font-size: 9px;
  font-weight: 700;
  border-radius: 99px;
  padding: 1px 6px;
  letter-spacing: 0;
}

body.releves-mode .map-card { display: none; }

body.releves-mode .btn-localiser-avis { display: none; }


/* ─── Étiquettes de destination des liaisons extérieures ────── */
.liaison-ext-label {
  background: none !important; border: none !important;
}

.liaison-ext-label > div {
  display: inline-block;
  background: rgba(255,255,255,.92);
  color: #1a1a1a;
  font-family: var(--font, system-ui);
  font-size: 10.5px;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 4px;
  border: 1px solid rgba(0,0,0,.15);
  white-space: nowrap;
  box-shadow: 0 1px 3px rgba(0,0,0,.18);
  letter-spacing: .1px;
}


/* Masquer les étiquettes en mode relevés (focus saisie) */
body.releves-mode .liaison-ext-label { display: none; }


/* Bouton "Proposer un tracé communal" : visible uniquement sur desktop (dans .map-card),
   pas pertinent sur mobile (pas d'élu en concertation depuis le smartphone). */
@media (max-width: 767px) {
  .legend-propose-btn { display: none !important; }
}

/* ═══ Ajustements espace associations pour le fond « élus » ═══ */
#homeMap, #map { height: 560px; }
.fond-elus-card { max-width: 300px; max-height: 500px; overflow-y: auto; }
.fond-elus-card.is-folded > *:not(.fond-elus-card-toggle) { display: none !important; }
.fond-elus-card-toggle {
  display: block; width: 100%; margin-top: 8px; border: none; background: #eef2f7;
  color: #37527a; font-family: var(--font); font-size: 11px; font-weight: 600;
  padding: 6px 8px; border-radius: 6px; cursor: pointer;
}
.fond-elus-card-toggle:hover { background: #e2e9f2; }
.avis-armed { cursor: crosshair; }
.avis-armed .leaflet-container, #map.avis-armed .leaflet-grab { cursor: crosshair !important; }
.avis-armed-hint {
  position: absolute; left: 50%; bottom: 18px; transform: translateX(-50%);
  background: #b91c1c; color: #fff; font-family: var(--font); font-size: 12.5px; font-weight: 600;
  padding: 8px 14px; border-radius: 999px; z-index: 900; box-shadow: 0 4px 12px rgba(0,0,0,.25);
  pointer-events: none; white-space: nowrap;
}
#map { position: relative; }

/* Bouton retour carte générale (vue itinéraire) */
.btn-retour-carte {
  display: block; border: none; cursor: pointer;
  background: #ffffff; color: #1f4d85; font-family: var(--font);
  font-size: 12.5px; font-weight: 700; padding: 9px 14px; border-radius: 10px;
  box-shadow: 0 2px 8px rgba(0,0,0,.22); border: 1px solid #d6dee9;
}
.btn-retour-carte:hover { background: #eef3fa; }

/* ═══ Identification unique de l'association ═══ */
.id-overlay {
  position: fixed; inset: 0; z-index: 2000; background: rgba(15,23,42,.55);
  display: flex; align-items: center; justify-content: center; padding: 20px;
}
.id-modal {
  background: #fff; border-radius: var(--radius-md); box-shadow: var(--shadow-lg);
  max-width: 480px; width: 100%; padding: 26px 28px;
  border-top: 4px solid var(--color-primary);
}
.id-title { font-size: 19px; margin-bottom: 10px; }
.id-text { font-size: 13.5px; color: var(--color-muted); line-height: 1.5; margin-bottom: 14px; }
.id-modal input {
  width: 100%; border: 1px solid var(--color-border); border-radius: var(--radius-sm);
  padding: 11px 13px; font-family: var(--font); font-size: 14.5px;
}
.id-modal input:focus { outline: 2px solid var(--color-primary-light); border-color: var(--color-primary); }
.id-msg { font-size: 12.5px; color: #b3261e; font-weight: 600; min-height: 18px; margin-top: 6px; }
.id-actions { display: flex; align-items: center; gap: 14px; margin-top: 8px; flex-wrap: wrap; }
.id-later {
  background: none; border: none; color: var(--color-muted); font-family: var(--font);
  font-size: 12.5px; cursor: pointer; text-decoration: underline;
}
.id-later:hover { color: var(--color-text); }

.topbar-idbadge {
  display: flex; align-items: center; gap: 7px; background: rgba(255,255,255,.16);
  border: 1px solid rgba(255,255,255,.35); border-radius: 999px; padding: 5px 12px;
  font-size: 12px; color: #fff; max-width: 260px;
}
.topbar-idbadge-name { font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.topbar-idbadge-edit {
  background: none; border: none; color: rgba(255,255,255,.85); font-family: var(--font);
  font-size: 11px; cursor: pointer; text-decoration: underline; padding: 0;
}
.topbar-idbadge-edit:hover { color: #fff; }

.asso-reminder { font-size: 12px; color: var(--color-muted); font-style: italic; flex: 1; min-width: 180px; align-self: center; }
.map-pop .asso-reminder { min-width: 0; }

/* ── Répondre à une contribution (08/10/2026) — repris tel quel de l'espace communes.
   Placé AVANT les passes téléphone : leur `.reply-form .rf-text { font-size: 16px }` doit gagner. ── */
.bub-reply {
  margin-left: 26px; background: #eef1f4; border-radius: 3px 12px 12px 12px;
}
.bub-reply-btn {
  display: inline-block;
  margin: 2px 0 10px;
  background: #eef2f7;
  color: #334155;
  border: 1px dashed #cbd5e1;
  border-radius: 999px;
  padding: 3px 12px;
  font-family: inherit;
  font-size: 11.5px; font-weight: 600;
  cursor: pointer;
  transition: background .15s, border-color .15s;
}
.bub-reply-btn:hover { background: #e2e8f0; border-color: #94a3b8; }
.reply-form {
  margin: 0 0 12px 14px;
  padding: 8px 10px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
}
.reply-form .rf-text {
  width: 100%; box-sizing: border-box;
  border: 1px solid #cbd5e1; border-radius: 6px;
  font-family: inherit; font-size: 12.5px;
  padding: 7px 9px; resize: vertical;
  margin-bottom: 6px;
}
.reply-form .rf-text:focus { outline: none; border-color: var(--color-primary, #2f6bb0); }
.topbar-idbadge[hidden] { display: none; }

/* L'attribut hidden doit TOUJOURS l'emporter sur les display: flex/grid des classes
   (sinon un modal « fermé » reste affiché — bug constaté en prod le 21/08). */
[hidden] { display: none !important; }

/* Surlignage du mode d'emploi au clic du bouton (v12) */
.is-flash-txt { background: #ddebfb; border-radius: 6px; box-shadow: 0 0 0 6px #ddebfb; transition: background .4s, box-shadow .4s; }

/* ═══════════════════════════════════════════════════════════════
   LÉGENDE DE LA CARTE — LISIBILITÉ RENFORCÉE
   Demande S. Colpart (31/08/2026) : « les légendes sont difficilement
   lisibles ». Les corps allaient de 9,5 à 11 px, avec des gris peu
   contrastés (#94a3b8 sur blanc = 2,8:1, sous le seuil AA de 4,5:1).
   Tailles remontées à 11,5–12,5 px et contrastes renforcés ; la carte
   s'élargit de 300 → 330 px pour absorber le texte sans césure.
   Bloc placé en fin de fichier : il neutralise les règles dupliquées
   de .legend-text (3 déclarations concurrentes plus haut).
   ═══════════════════════════════════════════════════════════════ */
.map-card { max-width: 330px; padding: 13px 16px; }
.fond-elus-card { max-width: 330px; }

.map-card-label { font-size: 11px; color: #5b6675; letter-spacing: .4px; }
.map-card-title { font-size: 15.5px; }

.legend-section-title { font-size: 11.5px; color: #64748b; letter-spacing: .05em; }
.legend-avis-count { font-size: 10.5px; }
.map-card-legend .legend-text,
.legend-text { font-size: 12.5px; line-height: 1.35; color: var(--color-text); }
.legend-item { margin-bottom: 4px; }

.hors-etude-legend-title { font-size: 12px; color: #55483d; }
.hors-etude-legend-item { font-size: 12px; line-height: 1.3; margin-bottom: 3px; }
.hors-etude-legend-sub { font-size: 11px; color: #5c574f; }
.hors-etude-legend-hint { font-size: 11px; }

.fond-elus-card-toggle { font-size: 12px; padding: 7px 10px; }

/* Le texte agrandi peut faire dépasser la légende de la hauteur de la carte
   (contenu ~580 px pour 500 px visibles) : le bouton de repli reste collé en
   bas du cadre, donc toujours atteignable sans avoir à faire défiler la légende. */
.fond-elus-card-toggle {
  position: sticky; bottom: 0; z-index: 2;
  margin-top: 8px;
  background: rgba(255,255,255,.97);
  box-shadow: 0 -6px 8px -4px rgba(255,255,255,.98);
}

/* ═══════════════════════════════════════════════════════════════
   POLICE DE LA LÉGENDE — CORRECTIF DE FOND (31/08/2026)
   La feuille de Leaflet est chargée APRÈS la nôtre et impose
   `.leaflet-container { font-family: "Helvetica Neue", Arial… }`
   à tout ce qui vit dans la carte : la légende s'affichait donc dans
   une police étrangère à l'outil. Invisible sur macOS (Helvetica Neue
   présente, très proche de DM Sans), très visible ailleurs — c'est la
   cause réelle du « difficilement lisible » signalé par S. Colpart.
   On réimpose la police de l'outil à toute la carte (légende, popups,
   infobulles, mention de source).
   ═══════════════════════════════════════════════════════════════ */
/* Classe doublée : la règle de Leaflet a la même spécificité que la nôtre
   mais sa feuille est chargée après — il faut donc passer devant (0,2,0). */
.leaflet-container.leaflet-container { font-family: var(--font); }
.leaflet-container .leaflet-control,
.leaflet-container .leaflet-popup-content,
.leaflet-container .leaflet-tooltip { font-family: var(--font); }

/* ═══ Fond de carte : sélecteur Carte / Satellite (rétabli) ═══ */
.basemap-switcher {
  position: absolute; top: 12px; left: 50%; transform: translateX(-50%);
  z-index: 420;
  display: inline-flex; gap: 1px;
  background: rgba(255,255,255,.95);
  border-radius: 10px; padding: 3px;
  box-shadow: 0 2px 8px rgba(0,0,0,.18);
}
.basemap-pill {
  padding: 6px 14px;
  background: transparent; border: none;
  font-family: var(--font); font-size: 12px; font-weight: 600;
  color: var(--color-muted, #6b7685);
  border-radius: 7px; cursor: pointer;
  transition: background .12s, color .12s;
}
.basemap-pill:hover { background: #f1f5f9; color: var(--color-text); }
.basemap-pill.is-active {
  background: var(--color-primary); color: #fff;
  box-shadow: 0 1px 3px rgba(0,0,0,.12);
}
/* Sur orthophoto, l'ombre portée décolle les étiquettes du fond */
.is-satellite .itin-label,
.is-satellite .liaison-ext-label { text-shadow: 0 1px 3px rgba(0,0,0,.55); }

/* ══════════════════════════════════════════════════════════════════════════
   LISIBILITÉ SUR TÉLÉPHONE — 2026-09-08
   Constat d'Alexandre : « inutilisable ». Mesuré au navigateur en 375 px :
     · la colonne de gauche formait un ruban de 4 747 px — aucun itinéraire
       atteignable (corrigé plus haut : menu déroulant) ;
     · la légende occupait 271 × 444 px sur une carte de 309 × 560 — 87 % de
       la largeur, la carte était invisible ;
     · les planches du cahier s'affichaient à 219 px de large pour 1 084 px
       d'original, soit 20 % — illisibles, et le zoom du navigateur était
       interdit par « maximum-scale=1 » ;
     · le contenu n'utilisait que 253 px des 375 disponibles (marges).
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Barre de navigation mobile ───────────────────────────────────── */
.mobnav {
  display: none;                    /* n'apparaît que sous 900 px */
  align-items: center; gap: 10px;
  width: 100%;
  padding: 11px 14px;
  background: #fff;
  border: none; border-bottom: 1px solid var(--color-border);
  font-family: var(--font); font-size: 14px; font-weight: 600;
  color: var(--color-text);
  text-align: left; cursor: pointer;
  flex-shrink: 0;
  position: relative; z-index: 70;
}
.mobnav-burger { font-size: 17px; line-height: 1; color: var(--color-primary); }
.mobnav-label {
  flex: 1; min-width: 0;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.mobnav-caret { font-size: 12px; color: var(--color-muted); transition: transform .16s; }
body.nav-ouverte .mobnav-caret { transform: rotate(180deg); }
body.nav-ouverte .mobnav { box-shadow: 0 2px 0 var(--color-primary) inset; }

/* ── Visionneuse de planche plein écran ───────────────────────────── */
.photo-viewer {
  position: fixed; inset: 0; z-index: 4000;
  background: #0f172a;
  display: flex; flex-direction: column;
}
.photo-viewer[hidden] { display: none; }
.photo-viewer-bar {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px;
  background: #0b1220; color: #fff;
  font-family: var(--font); font-size: 13px; font-weight: 600;
  flex-shrink: 0;
}
.photo-viewer-title { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.photo-viewer-close {
  width: 36px; height: 36px; flex-shrink: 0;
  border: none; border-radius: 50%;
  background: rgba(255,255,255,.14); color: #fff;
  font-size: 16px; cursor: pointer;
}
.photo-viewer-scroll {
  flex: 1; min-height: 0;
  overflow: auto; -webkit-overflow-scrolling: touch;
  /* `justify-content: center` PERDRAIT le bord gauche de l'image : un enfant
     plus large que son conteneur flex centré déborde des deux côtés, et la
     partie qui sort à gauche devient inatteignable au défilement. On aligne
     donc à gauche — c'est le seul réglage qui laisse toute la planche
     accessible. */
  display: flex; align-items: flex-start; justify-content: flex-start;
}
/* La planche s'ouvre à sa TAILLE NATURELLE, pas ajustée à l'écran : c'est
   précisément l'ajustement qui la rendait illisible. On fait défiler, et le
   zoom à deux doigts fait le reste (d'où le retrait de maximum-scale). */
.photo-viewer-scroll img { max-width: none; height: auto; display: block; }
.photo-viewer-hint {
  padding: 8px 12px; flex-shrink: 0;
  background: #0b1220; color: rgba(255,255,255,.72);
  font-family: var(--font); font-size: 11.5px; text-align: center;
}

@media (max-width: 900px) {
  /* La barre de navigation n'existe que sur téléphone. */
  .mobnav { display: flex; }

  /* ── Rendre la largeur au contenu ─────────────────────────────── */
  /* `position: relative` porte le voile ::before du menu — sans lui, le voile
     se placerait par rapport au viewport et couvrirait aussi la barre du haut. */
  .main { padding: 12px 10px; position: relative; }
  /* Les 26 px de marge de la vue itinéraire s'ajoutaient à celles de .main, de
     .volet et de .sec-card : quatre couches, 84 px perdus sur 320. Les cartes
     blanches portent déjà la respiration nécessaire. */
  .itin, .jal { padding-left: 0; padding-right: 0; padding-top: 14px; }
  .itin-header { gap: 10px; margin-bottom: 12px; padding: 0 4px; }
  .itin-code { width: 44px; height: 44px; font-size: 16px; }
  .itin-nom { font-size: 19px; line-height: 1.2; }
  .home-card { padding: 18px 14px; }
  .volet { padding: 13px 12px; margin-bottom: 14px; }
  .sec-card { padding: 11px 11px; }
  .home-title { font-size: 20px; line-height: 1.25; }

  /* ── Cartes : plus basses, et la légende cesse de les recouvrir ── */
  #homeMap, #map { height: 340px; }
  /* La légende passe EN BAS à droite : en haut, elle recouvrait la bascule
     « Carte / Satellite », centrée en haut de la carte. Vérifié à 375 px. */
  /* Le contrôle est désormais dans le coin bas-droit de Leaflet (voir
     fond_elus.js) : on rend la main au placement de Leaflet et on se contente
     d'une marge. Garder `position:absolute; top:12px` l'aurait envoyé 12 px
     SOUS le bas de la carte. */
  .map-card {
    position: static;
    top: auto; right: auto; bottom: auto; left: auto;
    margin: 0 8px 8px 0;
    min-width: 0; max-width: 58vw;
    padding: 8px 10px;
    font-size: 11.5px;
  }
  /* La borne est calée sur la HAUTEUR DE LA CARTE (340 px), pas sur le viewport :
     44vh valait 357 px et la légende dépliée débordait par le haut. Elle défile. */
  .fond-elus-card { max-width: 58vw; max-height: 220px; }
  /* Dépliée, elle grandit vers le HAUT (ancrée en bas) et reste dans la carte. */
  /* La bascule Carte/Satellite descend EN BAS À GAUCHE : centrée en haut, elle
     était recouverte par la légende dépliée (mesuré : 14 px des pastilles sous
     la légende). Le bas gauche est le seul coin libre — le zoom occupe le haut
     gauche, l'attribution le bas droit, la légende le bas droit également. */
  .basemap-switcher {
    top: auto; bottom: 8px; left: 8px;
    transform: none;
    padding: 2px;
  }
  .basemap-pill { padding: 5px 10px; font-size: 11.5px; }
  .map-card-title { font-size: 13px; }
  .map-card-label { font-size: 9.5px; }
  /* Repliée, la légende ne doit être qu'un bouton — pas une colonne vide. */
  .fond-elus-card.is-folded { max-width: 148px; padding: 6px; }

  /* ── Planches du cahier : pleine largeur et ouvrables en grand ─── */
  /* La planche déborde des marges de sa fiche : sur 375 px, ces 22 px rendus
     ne sont pas un détail, ils valent 8 % de largeur en plus. */
  .sec-photo {
    max-width: none;
    width: calc(100% + 22px);
    margin-left: -11px; margin-right: -11px;
    border-radius: 0; border-left: none; border-right: none;
    cursor: zoom-in;
  }
  .sec-photo-loupe {
    display: block; width: 100%;
    margin: -4px 0 10px;
    border: 1px solid var(--color-border); border-radius: var(--radius-sm);
    background: #f1f5f9; color: #334155;
    font-family: var(--font); font-size: 12px; font-weight: 600;
    padding: 9px 10px; cursor: pointer;
  }

  /* ── Les boutons posés SUR la carte se resserrent ─────────────── */
  /* Sur 340 px de haut, un bouton de 92 px de large sur trois lignes mangeait
     un quart de la carte. Il reste bien visible en une ligne. */
  .btn-localiser-avis {
    top: 8px; left: 8px;
    flex-direction: row; gap: 6px;
    width: auto; max-width: 62vw;
    padding: 9px 12px;
    font-size: 12px; line-height: 1.1;
    border-radius: 999px;
    min-height: 44px;
  }
  .btn-retour-carte { font-size: 12px; padding: 8px 12px; min-height: 40px; }

  /* ── Contribuer au doigt ──────────────────────────────────────── */
  /* 44 px, c'est la hauteur en dessous de laquelle on rate sa cible ; les
     boutons d'option en faisaient 34. */
  .opt-btns { gap: 6px; flex-wrap: wrap; }
  .opt-btn { min-height: 44px; padding: 8px 12px; font-size: 12.5px; }
  .sec-send, .rf-send, .btn-primary { min-height: 46px; }
  .sec-card .sec-send { width: 100%; }
  .form-row { flex-wrap: wrap; gap: 8px; }

  /* 16 px MINIMUM dans les champs : en dessous, Safari iOS zoome tout seul à la
     mise au point et laisse la page agrandie, décalée, sans moyen évident de
     revenir. Ce n'est pas un choix de confort, c'est ce qui évite que l'outil
     paraisse cassé dès qu'on touche une zone de texte. */
  /* Spécificité assumée : les règles d'origine ciblent des classes (0,1,0) et
     l'emportaient sur un simple `textarea` (0,0,1) quel que soit l'ordre. Une
     taille de 13,5 px déclenchait le zoom automatique de Safari. */
  .sec-form textarea, .global-form textarea,
  .sec-text, .rf-text, .mp-text, .bub-text,
  .id-modal input, .map-pop textarea, .map-pop input, .map-pop select,
  .vote-comment textarea { font-size: 16px; }
  .sec-text { min-height: 76px; }

  /* ── Barre du haut : le badge d'identification cède la place ───── */
  .topbar-idbadge { max-width: 34vw; padding: 4px 9px; font-size: 11px; gap: 5px; }
  .topbar-idbadge-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .topbar-idbadge-edit { display: none; }   /* on touche le badge lui-même */

  .page-footer { padding: 12px 10px; line-height: 1.4; }
}

/* Le bouton loupe n'a de sens que là où la planche est bridée en largeur. */
@media (min-width: 901px) { .sec-photo-loupe { display: none; } }

@media (max-width: 430px) {
  .main { padding: 10px 6px; }
  .home-card { padding: 15px 12px; }
  .volet { padding: 11px 8px; }
  .sec-card { padding: 10px 8px; }
  .sec-photo { width: calc(100% + 16px); margin-left: -8px; margin-right: -8px; }
  .fond-elus-card, .map-card { max-width: 62vw; }
  .topbar-idbadge { max-width: 30vw; }
  /* Sous 430 px, le sous-titre écrasait le titre à 97 px de large. Le titre
     seul reste identifiable ; le sous-titre est rappelé sur la page d'accueil. */
  .topbar-subtitle { display: none; }
  .topbar-title { font-size: 13.5px; }
}

/* Le mode d'emploi ne doit pas parler d'une « colonne de gauche » qui n'existe
   pas sur téléphone : la même phrase désigne le bon geste selon l'appareil. */
.si-petit { display: none; }
@media (max-width: 900px) {
  .si-large { display: none; }
  .si-petit { display: inline; }
}

/* Mention sous les cartes sur téléphone (voir panDeuxDoigts dans script.js). */
.map-hint-mobile { display: none; }
@media (max-width: 900px) {
  .map-hint-mobile {
    display: block;
    margin: 6px 2px 0;
    font-size: 11.5px; line-height: 1.35;
    color: var(--color-muted);
  }
}

/* ══════════════════════════════════════════════════════════════════════════
   CORRECTIFS ISSUS DE LA RELECTURE ADVERSARIALE — 2026-09-08
   Quatre relecteurs indépendants ont repris la passe téléphone ci-dessus ;
   22 constats ont survécu à une vérification contradictoire. Six étaient des
   RÉGRESSIONS introduites par cette passe même. Ils sont corrigés ici, en fin
   de feuille, pour qu'on voie d'un coup d'œil ce que la relecture a rattrapé.
   ══════════════════════════════════════════════════════════════════════════ */

/* C — Les contrôles Leaflet (z-index 1000) traversaient le menu déroulant
   (z-index 60) : les entrées du menu posées au-dessus d'une carte n'étaient pas
   tapables, la bascule Carte/Satellite recevait l'appui à leur place.
   #jalMap avait déjà `z-index: 0` — c'est ce qui manquait aux deux autres :
   la carte devient un contexte d'empilement et cesse de laisser fuir ses
   contrôles. Sans media query : le défaut n'est pas propre au téléphone. */
#map, #homeMap { position: relative; z-index: 0; }

@media (max-width: 900px) {
  /* B — Les popups des mâts de jalonnement mesurent 191 à 630 px de haut ;
     avec une carte ramenée à 340 px, la vignette de la fiche et le bouton
     « Évaluer cette fiche » tombaient hors du cadre, sans rien pour le
     signaler — et le glissement à un doigt, désormais réservé au défilement,
     ne permettait plus de les ramener. On borne et on fait défiler. */
  .leaflet-popup-content { max-height: 232px; overflow-y: auto; padding-right: 4px; }
  /* PENDANT QU'UNE POPUP EST OUVERTE, les habillages de la carte s'effacent.
     La légende repliée — posée en bas à droite par cette même passe —
     recouvrait très exactement le bouton « Évaluer cette fiche » : mesuré,
     l'appui atterrissait sur « Afficher la légende ».
     Pourquoi pas un z-index : les contrôles Leaflet vivent DEHORS du
     `.leaflet-map-pane`, qui est un contexte d'empilement à 400. Une popup,
     enfermée dedans, ne peut pas dépasser les contrôles quel que soit son
     z-index — l'essai a été fait, il ne change rien. Les masquer est la seule
     façon honnête de rendre la popup entièrement tapable. */
  .leaflet-container.popup-ouverte .map-card,
  .leaflet-container.popup-ouverte .basemap-switcher { display: none; }

  /* Symétriquement : quand la LÉGENDE est dépliée, ce sont les boutons de la
     carte qui s'effacent. Vérifié à 375 px : dépliée, elle recouvrait « Insérer
     un avis » et « Carte générale », qui ne répondaient plus au toucher. */
  .leaflet-container.legende-ouverte .btn-localiser-avis,
  .leaflet-container.legende-ouverte .btn-retour-carte,
  .leaflet-container.legende-ouverte .basemap-switcher { display: none; }


  /* E — `.reply-form .rf-text` (0,2,0) l'emportait sur la liste de la passe
     téléphone : le champ de réponse restait à 12,5 px, donc Safari zoomait. */
  .reply-form .rf-text { font-size: 16px; }

  /* I — Le bouton créé par cette passe faisait 36 px, sous la barre des 44 px
     qu'elle pose elle-même, et son gris sur blanc se voyait à peine. */
  .sec-photo-loupe {
    min-height: 44px; font-size: 14px;
    background: #e2e8f0; border-color: #94a3b8; color: #1e293b;
  }

  /* J — Depuis que la légende démarre repliée, ce bouton est le SEUL accès à
     la signification des couleurs : 29,5 px, c'était trop peu. */
  .fond-elus-card-toggle { min-height: 44px; font-size: 13.5px; }

  /* O — La passe avait ramené l'étiquette de la légende à 9,5 px. Or elle
     avait été REMONTÉE à 11 px le 31/08 à la demande de S. Colpart, qui
     trouvait les légendes « difficilement lisibles ». On ne défait pas un
     acquis pour gagner deux pixels. */
  .map-card-label { font-size: 11px; }

  /* N — Le bouton rouge restait sur trois lignes : c'est son ENFANT qui
     empilait, pas lui. La règle précédente ne changeait donc rien. */
  .btn-localiser-lbl { flex-direction: row; gap: 4px; flex-wrap: wrap; }

}

/* G — Le voile du menu était ancré dans .main, QUI EST le conteneur de
   défilement : dès qu'on avait déroulé la page, il restait en haut du contenu,
   hors écran, et le menu s'ouvrait sans rien assombrir. En `fixed`, il couvre
   ce qu'on voit, quel que soit le défilement. */
@media (max-width: 900px) {
  body.nav-ouverte .main::before {
    position: fixed;
    inset: calc(var(--topbar-h, 48px) + var(--mobnav-h, 42px)) 0 0 0;
  }
}

/* ─── Export PNG des cartes (mapexport.js) ─────────────────────────────
   Bouton « Image PNG » posé sous le zoom, et masquage de tout ce qui est
   interactif pendant la capture : seuls le fond, les tracés, les étiquettes,
   la légende et le logo CCPL doivent se retrouver sur l'image. */
.map-export-ctrl a {
  width: auto !important; padding: 0 9px;
  font-family: var(--font); font-size: 12px; font-weight: 700;
  color: var(--color-primary-dark); white-space: nowrap;
  line-height: 28px; height: 28px !important; text-decoration: none;
}
.map-export-ctrl a:hover { color: var(--color-primary); background: var(--color-primary-light); }
.map-export-ctrl a.is-busy { pointer-events: none; opacity: .6; }

/* Pendant la capture. `.basemap-switcher` et `.avis-armed-hint` sont des enfants
   directs du conteneur de carte, hors `.leaflet-control-container` : sans cette
   règle ils resteraient visibles à chacune des passes et se superposeraient sur
   l'image finale. */
.map-exporting .leaflet-control-zoom,
.map-exporting .leaflet-control-attribution,
.map-exporting .leaflet-tooltip,
.map-exporting .leaflet-popup,
.map-exporting .map-export-ctrl,
.map-exporting .btn-localiser-avis,
.map-exporting .btn-retour-carte,
.map-exporting .basemap-switcher,
.map-exporting .avis-armed-hint,
.map-exporting .fond-elus-card-toggle { display: none !important; }
/* Les tuiles apparaissent en fondu (opacité animée par Leaflet). Une capture
   lancée juste après un changement de fond les dessinait à demi transparentes,
   voire invisibles : pendant l'export, elles sont à pleine opacité. */
.map-exporting .leaflet-tile { opacity: 1 !important; transition: none !important; }

/* Boutons de cadrage de référence (fond_elus.cadrageControl) : même gabarit que
   « Image PNG », posés juste au-dessus. */
.map-cadrage-ctrl { display: flex; }
.map-cadrage-ctrl a, .map-cadrage-ctrl a:hover {
  width: auto !important; height: 28px !important; line-height: 28px !important;
  padding: 0 9px; font-family: var(--font); font-size: 11.5px; font-weight: 700;
  color: var(--color-primary-dark); background: #fff; text-decoration: none; white-space: nowrap;
}
.map-cadrage-ctrl a:hover { background: var(--color-primary-light); }
.map-cadrage-ctrl a + a { border-left: 1px solid #d8dde6; }
.map-exporting .map-cadrage-ctrl { display: none !important; }

/* Sur téléphone, la carte fait 340 px de haut et porte déjà quatre boutons :
   l'export et les cadrages de référence y seraient illisibles, et l'usage
   (produire une image pour un document) est celui d'un poste de travail. */
@media (max-width: 900px) {
  .map-export-ctrl, .map-cadrage-ctrl { display: none !important; }
}

/* ═══ Photos de terrain de l'étude (fond_elus.js, bascule dans la barre Carte / Satellite) ═══
   Même gris ardoise pour la bascule allumée, les repères et les pastilles : l'œil relie
   le bouton à ce qu'il affiche. Couleur neutre, distincte des couleurs d'aménagement
   et des bulles d'avis. */
.basemap-sep { width: 1px; margin: 4px 3px; background: #d8dde6; }
.photos-pill { display: inline-flex; align-items: center; gap: 6px; }
.photos-pill svg { display: block; flex: none; }
.photos-pill[aria-pressed="true"] { background: #1e293b; color: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.12); }
.photos-pill.is-loading { opacity: .6; cursor: progress; }
.photos-pill.is-error { color: #b42318; }
.photos-pill .pill-lbl-court { display: none; }

.photo-marker { background: none; border: none; }
.photo-marker-pill {
  width: 24px; height: 24px; border-radius: 50%;
  background: #1e293b; color: #fff;
  display: flex; align-items: center; justify-content: center;
  border: 2px solid #fff; box-shadow: 0 1px 4px rgba(0,0,0,.35);
  cursor: pointer; transition: transform .12s;
}
.photo-marker-pill:hover { transform: scale(1.15); }
.photo-marker-pill svg { display: block; }
.photo-cluster { background: none; border: none; }
.photo-cluster-pill {
  width: 100%; height: 100%; border-radius: 50%;
  background: #1e293b; color: #fff;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  border: 2.5px solid #fff; box-shadow: 0 1px 4px rgba(0,0,0,.35);
  font-family: var(--font); font-weight: 800; line-height: 1; cursor: pointer;
}
.photo-cluster-pill svg { display: block; opacity: .85; margin-bottom: 1px; }
.photo-cluster-pill span { font-size: 11px; }

.leaflet-popup.photo-popup .leaflet-popup-content-wrapper { padding: 0; border-radius: 10px; overflow: hidden; }
.leaflet-popup.photo-popup .leaflet-popup-content { margin: 0; line-height: 1.35; width: auto !important; }
.photo-popup-card { width: 300px; max-width: calc(100vw - 70px); }
.photo-popup-agrandir {
  position: relative; display: block; width: 100%; padding: 0; border: 0;
  background: #e8ecf1; cursor: zoom-in;
}
.photo-popup-agrandir img { display: block; width: 100%; height: 200px; object-fit: cover; }
.photo-popup-agrandir span {
  position: absolute; right: 8px; bottom: 8px; padding: 3px 8px; border-radius: 6px;
  background: rgba(15,23,42,.72); color: #fff; font: 600 11px/1.3 var(--font);
}
.photo-popup-meta { padding: 8px 12px 10px; font-family: var(--font); font-size: 12px; color: var(--color-text); }
.photo-popup-meta strong { font-size: 13px; }
.photo-popup-sec { margin-top: 3px; font-weight: 600; color: var(--color-primary-dark); }
.photo-popup-date { margin-top: 4px; font-size: 11px; color: var(--color-muted, #6b7685); }

/* Pendant qu'une photo est ouverte, les boutons de la carte et la légende s'effacent,
   sur tous les écrans : la photo mesure 300 px de large et tombait sous eux dès que
   la carte est un peu étroite (constaté à 1024 px, carte de 450 px). Même principe
   que .popup-ouverte sur téléphone ; l'attribution reste visible. */
.leaflet-container.photo-ouverte .leaflet-top,
.leaflet-container.photo-ouverte .leaflet-bottom .leaflet-control:not(.leaflet-control-attribution),
.leaflet-container.photo-ouverte .basemap-switcher { visibility: hidden; }

/* Téléphone : la barre descend en bas à gauche (voir plus haut) — libellé court. */
@media (max-width: 900px) {
  .photos-pill .pill-lbl-long { display: none; }
  .photos-pill .pill-lbl-court { display: inline; }
  /* 150 px : la carte entière tient dans les 232 px que la passe téléphone laisse à une popup */
  .photo-popup-agrandir img { height: 150px; }
  /* La barre (en bas à gauche) mordait de 8 px sur l'attribution Leaflet, et la
     bascule Photos l'allonge jusque sous elle : on la pose juste au-dessus.
     Mesuré à 375 px : barre 553–582, attribution 574–590. */
  .basemap-switcher { bottom: 20px; }
}

/* Carte étroite sur grand écran : la barre Carte / Satellite / Photos descend en bas à
   gauche au lieu de passer sous la légende (fond_elus.placerBarre). 20 px du bas : elle
   reste au-dessus de l'attribution. */
.basemap-switcher.barre-en-bas { top: auto; bottom: 20px; left: 8px; transform: none; }
/* En bas, la légende dépliée descend souvent jusqu'au pied de la carte : libellés courts,
   comme sur téléphone (mesuré à 1 024 px : 298 px de barre pour 232 px libres). */
.barre-en-bas .pill-lbl-long { display: none; }
.barre-en-bas .pill-lbl-court { display: inline; }
/* … et gabarit compact du téléphone : 239 px de barre, c'était encore 7 px de trop. */
.basemap-switcher.barre-en-bas { padding: 2px; }
.barre-en-bas .basemap-pill { padding: 5px 10px; font-size: 11.5px; }

/* ═══ Corrections issues de la relecture du 26/09/2026 ═══ */
/* Pendant « Insérer un avis » (script.js pose .avis-armed sur #map pendant 6 s), les
   repères et pastilles photo laissent passer le clic jusqu'à la carte : sinon, sur un
   tracé couvert de photos, le clic ouvrait une photo au lieu de la fiche d'avis. La
   pane s'appelle .leaflet-photos-pane (Leaflet retire « Pane ») ; on vise l'icône,
   car .leaflet-marker-icon.leaflet-interactive rétablit pointer-events: auto. */
#map.avis-armed .leaflet-photos-pane .leaflet-marker-icon { pointer-events: none !important; }

/* « Agrandir » : la photo entière, ajustée à l'écran. Le centrage est sans risque ici
   (l'image n'est jamais plus large que son conteneur) ; les planches, elles, gardent
   leur taille naturelle et leur alignement à gauche. */
.photo-viewer.is-photo .photo-viewer-scroll { align-items: center; justify-content: center; }
.photo-viewer.is-photo .photo-viewer-scroll img { max-width: 100%; max-height: 100%; width: auto; height: auto; }

/* Vignette : la photo entière (34 photos sont en portrait), au format 4:3 des prises. */
.photo-popup-agrandir img { height: 225px; object-fit: contain; }

/* Bascule en erreur lisible sur fond ardoise (10:1). */
.photos-pill[aria-pressed="true"].is-error { color: #fecaca; }

/* Ligne de légende des photos : la pastille ardoise de la carte, en petit. */
.photo-leg-pill {
  flex: none; width: 20px; height: 20px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: #1e293b; color: #fff; border: 2px solid #fff; box-shadow: 0 0 0 1px rgba(30,41,59,.35);
}
.photo-leg-pill svg { display: block; }

@media (max-width: 900px) {
  .photo-popup-agrandir img { height: 150px; }
}

/* ═══ Vues de rue Panoramax (panoramax.js) — case à cocher, 28/09/2026 ═══ */
/* La case vit dans le coin bas droit, JUSTE APRÈS l’attribution dans le DOM : flottante à
   droite et sans « clear », elle se range sur la même ligne, à gauche de « Leaflet ».
   Même gabarit que l’attribution (fond blanc translucide, petite taille). */
.leaflet-bottom.leaflet-right .leaflet-control.pnx-case {
  float: right; clear: none; margin: 0 4px 0 0;
  background: rgba(255,255,255,.88); border-radius: 4px 4px 0 0;
  font: 600 12px/1.4 var(--font); color: #1f2937;
}
.pnx-case label { display: flex; align-items: center; gap: 5px; padding: 0 7px 0 5px; cursor: pointer; white-space: nowrap; }
/* même hauteur que la ligne d'attribution (12 px × 1,4) : la case ne la soulève pas */
.pnx-case input { margin: 0; width: 12px; height: 12px; accent-color: var(--color-primary-dark); cursor: pointer; }
/* poids (0,5,0), supérieur à la règle de base (0,4,0) : sinon le survol ne s'applique jamais */
.leaflet-bottom.leaflet-right .leaflet-control.pnx-case:hover { background: #fff; }
.pnx-lbl-court { display: none; }
@media (max-width: 900px) {
  .pnx-lbl-long { display: none; }
  .pnx-lbl-court { display: inline; }
  /* cible tactile plus haute SEULEMENT quand la case est posée au-dessus de l'attribution :
     sur la même ligne (tablette), elle doit garder la hauteur de la ligne (16,8 px) */
  .pnx-case.pnx-case-dessus label { padding: 3px 8px 3px 6px; }
  .pnx-case.pnx-case-dessus input { width: 16px; height: 16px; }
}
/* Indication « visibles de plus près — Zoomer ici », posée au-dessus de la case. */
.pnx-hint {
  position: absolute; z-index: 430; max-width: calc(100% - 16px);
  right: 10px; bottom: 34px;   /* place de repli, avant toute mesure (carte née cachée) */
  padding: 6px 11px; border: 0; border-radius: 8px; background: rgba(15,23,42,.86); color: #fff;
  font: 600 11.5px/1.3 var(--font); text-align: left; pointer-events: none;
}
.pnx-hint[hidden] { display: none; }
.pnx-hint.is-action { pointer-events: auto; cursor: pointer; box-shadow: 0 2px 8px rgba(0,0,0,.25); }
.pnx-hint.is-action b { color: #fbbf24; margin-left: 4px; white-space: nowrap; }
.pnx-hint.is-action:hover { background: #0f172a; }
.map-exporting .pnx-hint,
.leaflet-container.photo-ouverte .pnx-hint,
.leaflet-container.pnx-popup-ouverte .pnx-hint { display: none !important; }
/* Popup d’une vue : lien vers le site Panoramax */
.pnx-lien { display: inline-block; margin-top: 6px; font-weight: 700; color: var(--color-primary-dark); text-decoration: none; }
.pnx-lien:hover { text-decoration: underline; }
/* Vue immersive : la visionneuse officielle Panoramax, en fenêtre */
.pnx-fenetre {
  position: fixed; inset: 4vh 4vw; z-index: 3000; display: flex; flex-direction: column;
  background: #0f172a; border-radius: 12px; overflow: hidden; box-shadow: 0 20px 60px rgba(0,0,0,.45);
}
.pnx-fenetre[hidden] { display: none; }
.pnx-fenetre-barre {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 9px 12px 9px 16px; background: #1e293b; color: #e2e8f0; font: 600 12.5px/1.3 var(--font);
}
.pnx-fenetre-fermer {
  flex: none; width: 32px; height: 32px; border: 0; border-radius: 8px;
  background: rgba(255,255,255,.12); color: #fff; font-size: 15px; cursor: pointer;
}
.pnx-fenetre-corps { position: relative; flex: 1; min-height: 0; }
.pnx-attente { padding: 24px; color: #cbd5e1; font: 500 13px/1.5 var(--font); }
.pnx-attente a { color: #fbbf24; }
@media (max-width: 900px) { .pnx-fenetre { inset: 0; border-radius: 0; } }
/* Pendant « Insérer un avis », les points laissent passer le clic jusqu’à la carte. */
#map.avis-armed .leaflet-pnx-pane path { pointer-events: none !important; }

/* Carte étroite : la case passe au-dessus de l’attribution, à droite (panoramax.js, ranger). */
.leaflet-bottom.leaflet-right .leaflet-control.pnx-case.pnx-case-dessus {
  position: absolute; right: 0; margin: 0; border-radius: 4px 0 0 0;
}

/* Carte étroite : l’indication laisse la colonne des boutons de zoom libre et passe sur deux lignes. */
@media (max-width: 900px) { .pnx-hint { max-width: calc(100% - 72px); } }

/* ═══ Corrections issues de la relecture du 28/09/2026 (Panoramax) ═══ */
/* Export PNG : mapexport.js peint tout .leaflet-control-container ; la case n'a rien à y faire. */
.map-exporting .leaflet-control.pnx-case { display: none !important; }
/* Messages d'état pour les lecteurs d'écran : présents, mais invisibles à l'écran. */
.pnx-annonce {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
/* Ligne de légende des vues de rue : les mêmes points que sur la carte. */
.pnx-leg-pt { flex: none; width: 20px; display: inline-flex; justify-content: center; }
.pnx-leg-pt::before {
  content: ""; width: 7px; height: 7px; border-radius: 50%;
  background: #fff; border: 1.6px solid #334155;
}
.pnx-leg-pt.is-360::before { width: 9px; height: 9px; background: #f59e0b; }
.pnx-leg-src { margin-left: 28px; }
@media (max-width: 900px) {
  /* la case posée au-dessus de l'attribution réserve 25 px : la légende dépliée rétrécit d'autant */
  .leaflet-container.pnx-case-reserve .fond-elus-card { max-height: 190px; }
  /* légende dépliée sur téléphone : elle efface les boutons de la carte, et l'indication avec */
  .leaflet-container.legende-ouverte .pnx-hint { display: none !important; }
}

/* ── 29/09/2026 : itinéraire 17 — sections non retenues et section g ajoutée ── */
.sec-nr-label { display: inline-block; transform: translate(-50%, -140%); white-space: nowrap;
  background: rgba(255,255,255,.92); color: #334155; border: 1px dashed #5f6b7a; border-radius: 4px;
  padding: 1px 6px; font: 600 11px/1.35 var(--font, "DM Sans", sans-serif); box-shadow: 0 1px 3px rgba(0,0,0,.15); }
.sec-card.is-nr .sec-photo { filter: grayscale(.85); opacity: .75; }
.sec-nr-badge { display: inline-block; margin-left: 8px; padding: 1px 8px; border-radius: 10px; background: #e2e8f0;
  color: #334155; font-size: 11px; font-weight: 700; letter-spacing: .02em; vertical-align: 2px; }
.sec-nr-msg { margin: 0 0 10px; padding: 8px 10px; border-left: 3px dashed #5f6b7a; background: #f1f5f9; color: #334155;
  font-size: 13px; line-height: 1.45; }
.sec-card.is-ajout { border-left: 4px solid #73d216; }
.sec-ajout-txt { margin: 4px 0 6px; font-size: 13.5px; line-height: 1.5; color: #1f2937; }
.sec-ajout-note { font-size: 12px; color: #64748b; font-style: italic; }

/* ═══ Barre d'échelle et plein écran (02/10/2026) ═══════════════════════════ */
/* classe DOUBLÉE : leaflet.css est chargée après style.css et impose ses marges à spécificité égale */
.leaflet-container.leaflet-container .leaflet-control-scale { margin-left: 8px; margin-bottom: 8px; }
.leaflet-container .leaflet-control-scale-line { font-size: 11px; font-weight: 600; color: #334155;
  background: rgba(255,255,255,.85); border-color: #475569; padding: 1px 6px 2px; }
/* la barre Carte / Satellite / Photos descend parfois en bas à gauche : l'échelle se pose au-dessus */
.leaflet-container.leaflet-container:has(.basemap-switcher.barre-en-bas) .leaflet-control-scale { margin-bottom: 58px; }
@media (max-width: 900px) { .leaflet-container.leaflet-container .leaflet-control-scale { margin-bottom: 58px; } }
.map-exporting .leaflet-control-scale { margin-bottom: 8px !important; }
/* bouton plein écran : un carré sous le zoom, comme lui */
.map-plein-ecran-ctrl a.map-plein-ecran-btn { display: flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; color: #1f2937; background: #fff; cursor: pointer; }
.map-plein-ecran-ctrl a.map-plein-ecran-btn:hover { background: #f1f5f9; }
.map-exporting .map-plein-ecran-ctrl { display: none !important; }
/* carte en plein écran : elle couvre toute la fenêtre, sous les visionneuses (photos 4000,
   Panoramax 3000, identification 2000) mais au-dessus du bandeau et du menu */
.leaflet-container.map-plein-ecran { position: fixed !important; inset: 0 !important; width: auto !important;
  height: auto !important; margin: 0 !important; border-radius: 0 !important; z-index: 1500 !important; }
html.a-carte-plein-ecran, html.a-carte-plein-ecran body { overflow: hidden !important; }

/* ── 02/10/2026 : variantes (badge) et mention d'information (7-8 m) ── */
.sec-info-label { display: inline-block; transform: translate(-50%, -140%); white-space: nowrap;
  background: rgba(255,255,255,.94); color: #2f5d0c; border: 1.5px solid #73d216; border-radius: 4px;
  padding: 1px 6px; font: 600 11px/1.35 var(--font, "DM Sans", sans-serif); box-shadow: 0 1px 3px rgba(0,0,0,.15); }
.sec-var-badge { display: inline-block; margin-left: 8px; padding: 1px 8px; border-radius: 10px; background: #e0f2fe;
  color: #075985; font-size: 11px; font-weight: 700; letter-spacing: .02em; vertical-align: 2px; }
.sec-note-msg { margin: 0 0 10px; padding: 8px 10px; border-left: 3px solid #73d216; background: #f3fae8; color: #2f3b1f;
  font-size: 13px; line-height: 1.45; }