html, body {
  /* 🆕 v1.9.2-fullscreen (KARMA cover+dvh attempt) : `min-height: 100dvh`
     pour que le body REMPLISSE l'écran physique entier sur iOS PWA avec
     `viewport-fit=cover` (iOS 16+). Fallback `100vh` pour iOS 15 et
     antérieur (déclaration en premier, écrasée par dvh si supporté).
     Sans ça, le body s'arrêtait ~21-34px au-dessus du home indicator
     iOS → "bande sombre" visible dans cette zone (bug historique). */
  min-height: 100vh;
  min-height: 100dvh;
  margin: 0;
  overflow: hidden;
  /* Fond sombre cohérent avec le splash et le thème pour les zones où le body
     pourrait apparaître (rubber-band scroll, avant init Leaflet, et
     fallback si jamais un élément ne couvre pas tout). */
  background-color: #0a0d18;
  /* 🆕 v1.9.2-hotfix-rotation (KARMA "tout grossi au retour vertical après
     passage horizontal") : iOS Safari/WebKit a une feature historique de
     "text autosizing" qui regonfle automatiquement le texte des blocs
     larges après une rotation portrait→landscape→portrait. Le footer du
     loader avait déjà ce fix en local (cf. .kta-loader-copyright), mais
     pas le reste de l'app — donc titres / boutons / labels gonflent au
     retour portrait. Solution standard : forcer 100% globalement sur
     html+body pour neutraliser cette feature. -webkit- pour iOS Safari,
     standard pour Chrome/Firefox. */
  -webkit-text-size-adjust: 100%;
     -moz-text-size-adjust: 100%;
          text-size-adjust: 100%;
}

#map {
  display: block;
  /* 🆕 v1.9.2-fullscreen : `inset: 0` au lieu de `width/height: 100%`.
     Avec position:fixed, `inset: 0` anchre l'élément aux 4 côtés du
     viewport (containing block = visual viewport avec cover). Plus
     robuste que `100%` height qui pouvait être tronquée par le bug
     iOS 100vh < 16. Le mode refonte ré-override top/bottom via
     #map { top: 44; bottom: var(--kta-statusbar-h) } plus bas. */
  position: fixed;
  inset: 0;
}

.map-title {
  background: #1a1f2e;
  border: 1px solid rgba(255,255,255,0.08);
  box-shadow: 0 4px 16px rgba(0,0,0,0.45);
  padding: 8px 18px;
  border-radius: 10px;
  width: fit-content;
  margin: 10px auto;
  backdrop-filter: blur(8px);
  pointer-events: none;
}

.map-title-text {
  color: #e8eaf0;
  font-size: 15px;
  font-weight: 700;
  text-align: center;
  font-family: Arial, sans-serif;
  letter-spacing: 0.04em;
}

.map-title-sub {
  display: block;
  font-size: 11px;
  font-weight: 400;
  color: #8cb4ff;
  letter-spacing: 0.06em;
  margin-top: 2px;
  opacity: 0.85;
}

@media (max-width: 600px) {
  .map-title-text { font-size: 13px; }
  .map-title-sub  { font-size: 10px; }
}

.leaflet-control a {
  width: 30px;
  height: 30px;
  line-height: 30px;
  text-align: center;
  font-size: 16px;
}

/* Zone topleft — zoom Leaflet, comportement natif préservé */
.leaflet-top.leaflet-left {
  pointer-events: auto;
}

/* Safe-area iPhone (viewport-fit=cover) : on pousse uniquement le coin TOP
   sous la status bar (où vit la sidebar accordéon en topright). Les autres
   coins ne contiennent rien de visible (attribution masquée), et leur
   ajouter du padding créait une bande visible en bas sur iPhone — d'où
   ce minimum-viable. env() vaut 0 sur les appareils sans encoche. */
.leaflet-top { padding-top: env(safe-area-inset-top, 0px); }

/* Titre fixe centré en haut, hors Leaflet
   top : safe-area-inset pour passer SOUS la status bar iPhone (notch/Dynamic Island)
   sans la chevaucher. Sur Android et navigateurs sans encoche, env() vaut 0 → comportement inchangé. */
#kta-titre-fixe {
  position: fixed;
  top: calc(10px + env(safe-area-inset-top, 0px));
  left: 50%;
  transform: translateX(-50%);
  z-index: 1100;
  background: #1a1f2e;
  border: 1px solid rgba(255,255,255,0.08);
  box-shadow: 0 4px 16px rgba(0,0,0,0.45);
  padding: 7px 18px;
  border-radius: 10px;
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
  transition: background 0.15s, border-color 0.15s, transform 0.1s;
}

#kta-titre-fixe:hover {
  background: #232838;
  border-color: rgba(140,180,255,0.35);
}

#kta-titre-fixe.ouvert {
  background: #232838;
  border-color: rgba(140,180,255,0.55);
}

#kta-titre-fixe:active {
  transform: translateX(-50%) scale(0.98);
}

/* Décalage du titre fixe quand le panneau du contrôle des couches Leaflet est
   ouvert (classe injectée sur <body> par interface.js > _initLayersControlWatcher).
   Sans ce décalage, le panneau passait derrière le titre : le #map est
   position:fixed → stacking context isolé → le panneau Leaflet (dans #map) ne
   pouvait pas dépasser le titre (dans body, z-index 1100), même avec un z-index
   élevé sur le panneau lui-même.
   ⚠️ MOBILE UNIQUEMENT (max-width 768px) : sur desktop la fenêtre est plus large,
   le panneau du contrôle a la place de s'ouvrir à droite sans toucher le titre
   centré → décalage inutile et même contre-productif (le titre bougerait sans
   raison). */
@media (max-width: 768px) {
  body.kta-layers-panel-open #kta-titre-fixe {
    left: calc(70px + env(safe-area-inset-left, 0px));
    transform: translateX(0);
  }

  body.kta-layers-panel-open #kta-titre-fixe:active {
    transform: translateX(0) scale(0.98);
  }

  /* Le plan switcher ouvre depuis le titre fixe → suit son décalage. */
  body.kta-layers-panel-open #kta-plan-switcher {
    left: calc(70px + env(safe-area-inset-left, 0px));
    transform: translateX(0);
  }
}

.kta-titre-arrow {
  display: inline-block;
  margin-left: 6px;
  font-size: 11px;
  color: #8cb4ff;
  opacity: 0.7;
  transition: transform 0.15s, opacity 0.15s;
  vertical-align: middle;
}

#kta-titre-fixe:hover .kta-titre-arrow {
  opacity: 1;
}

#kta-titre-fixe.ouvert .kta-titre-arrow {
  transform: rotate(180deg);
  opacity: 1;
}

/* ══════════════════════════════════════════════
   PLAN SWITCHER — panneau déroulant ancré sous le titre
   ══════════════════════════════════════════════ */

#kta-plan-switcher {
  position: fixed;
  /* Suit le décalage du titre fixe (safe-area iPhone) pour rester ancré juste sous lui */
  top: calc(56px + env(safe-area-inset-top, 0px));
  left: 50%;
  transform: translateX(-50%);
  z-index: 1099;
  min-width: 280px;
  max-width: 360px;
  /* Aligné sur l'état #kta-titre-fixe.ouvert (le seul état où le switcher
     apparaît) → fond éclairci #232838 + bordure bleutée 0.55, comme un
     prolongement direct du titre cliqué. */
  background: #232838;
  border: 1px solid rgba(140,180,255,0.55);
  border-radius: 10px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.45);
  padding: 8px 0;
  animation: ktaSwitcherIn 0.18s ease-out both;
  overflow: hidden;
}

@keyframes ktaSwitcherIn {
  from { opacity: 0; transform: translateX(-50%) translateY(-6px); }
  to   { opacity: 1; transform: translateX(-50%) translateY(0); }
}

.kta-switcher-head {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: #8892a4;
  padding: 6px 14px;
  font-weight: 600;
}

.kta-switcher-list {
  display: flex;
  flex-direction: column;
}

.kta-switcher-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 14px;
  cursor: pointer;
  transition: background 0.12s;
}

.kta-switcher-row:hover {
  background: rgba(140,180,255,0.12);
}

.kta-switcher-icon {
  font-size: 16px;
  width: 22px;
  text-align: center;
  flex-shrink: 0;
}

.kta-switcher-info {
  flex: 1;
  min-width: 0;
  overflow: hidden;
}

.kta-switcher-name {
  font-size: 13px;
  color: #e8eaf0;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.kta-switcher-ver {
  display: inline-block;
  font-size: 10px;
  color: #8cb4ff;
  background: rgba(140,180,255,0.12);
  padding: 1px 5px;
  border-radius: 3px;
  margin-left: 4px;
}

.kta-switcher-sub {
  font-size: 11px;
  color: #8892a4;
  margin-top: 1px;
}

.kta-switcher-empty {
  padding: 12px 14px;
  font-size: 12px;
  color: #6c7689;
  font-style: italic;
  text-align: center;
}

.kta-switcher-divider {
  height: 1px;
  background: rgba(255,255,255,0.06);
  margin: 4px 0;
}

.kta-switcher-link {
  padding: 8px 14px;
  font-size: 12px;
  color: #8cb4ff;
  cursor: pointer;
  font-weight: 500;
  transition: background 0.12s, color 0.12s;
  text-align: center;
}

.kta-switcher-link:hover {
  background: rgba(140,180,255,0.14);
  color: #e8eaf0;
}

/* Mobile : adapter taille panneau */
@media (max-width: 480px) {
  #kta-plan-switcher {
    min-width: 240px;
    max-width: 92vw;
  }
}

/* ══════════════════════════════════════════════════════════════════
   🆕 v1.8.1-refonte-15 — PLAN SWITCHER MODALE (mode refonte UI)
   ══════════════════════════════════════════════════════════════════
   En mode refonte, le clic sur le titre du plan ouvre une modale
   centrée (au lieu du dropdown ancré sous le titre). Cohérent avec
   le reste des modales refonte (Aide, Détails session, Force update,
   Distance totale, etc.) qui utilisent toutes le pattern
   .kta-readme-modal-overlay + boîte centrée.

   Structure DOM :
     .kta-readme-modal-overlay.kta-plan-switcher-overlay
       └── .kta-plan-switcher-modal-boite (#kta-plan-switcher)
            ├── .kta-plan-switcher-modal-header (titre + close)
            ├── .kta-plan-switcher-modal-corps (current + liste recents)
            └── .kta-plan-switcher-modal-footer (CTA "Tous mes plans")
   ══════════════════════════════════════════════════════════════════ */

.kta-plan-switcher-overlay {
  /* Hérite de .kta-readme-modal-overlay : inset:0, backdrop noir,
     flex centré, animation fade-in. Rien à ajouter — la boîte interne
     définit sa propre largeur compacte. */
  z-index: 99998;  /* juste sous les modales système (99999) */
}

.kta-plan-switcher-modal-boite {
  background: #1a1f2e;
  border: 1px solid rgba(244, 197, 66, 0.20);
  border-radius: 14px;
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.65), 0 0 0 1px rgba(255, 255, 255, 0.03);
  width: min(440px, 92vw);
  max-height: min(82vh, 720px);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
  animation: ktaSwitcherModalIn 0.20s cubic-bezier(0.16, 1, 0.3, 1) both;
}

@keyframes ktaSwitcherModalIn {
  from { opacity: 0; transform: translateY(-12px) scale(0.96); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

.kta-plan-switcher-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 18px 12px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  flex-shrink: 0;
}

.kta-plan-switcher-modal-titre {
  font-size: 15px;
  font-weight: 700;
  color: #f4c542;
  letter-spacing: 0.02em;
  text-shadow: 0 0 8px rgba(244, 197, 66, 0.25);
}

/* Bouton ✕ : hérite du style global .kta-panneau-close (cohérent
   avec toutes les autres modales du projet). */

.kta-plan-switcher-modal-corps {
  flex: 1;
  overflow-y: auto;
  padding: 14px 16px;
  color: #c8d0e0;
  /* Petit padding-bottom interne pour ne pas coller le footer */
  padding-bottom: 6px;
}

/* ─── Carte du plan en cours (highlight doré) ──────────────────── */
.kta-plan-switcher-current {
  background: linear-gradient(135deg, rgba(244, 197, 66, 0.08) 0%, rgba(244, 197, 66, 0.03) 100%);
  border: 1px solid rgba(244, 197, 66, 0.28);
  border-radius: 10px;
  padding: 12px 14px;
  margin-bottom: 16px;
  position: relative;
}
.kta-plan-switcher-current::after {
  /* Petit badge "Actif" en haut à droite, façon LED */
  content: "● ACTIF";
  position: absolute;
  top: 10px;
  right: 12px;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: #6ee287;
  text-shadow: 0 0 4px rgba(76, 200, 100, 0.55);
}
.kta-plan-switcher-current-label {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #8892a4;
  margin-bottom: 6px;
}
.kta-plan-switcher-current-name {
  display: flex;
  align-items: baseline;
  gap: 6px;
  font-size: 16px;
  font-weight: 700;
  color: #f4c542;
  margin-bottom: 4px;
  text-shadow: 0 0 8px rgba(244, 197, 66, 0.20);
}
.kta-plan-switcher-current-icon {
  font-size: 14px;
}
.kta-plan-switcher-current-sub {
  font-size: 11px;
  color: #8892a4;
  font-style: italic;
}

/* ─── Titre de section "Plans récents" ─────────────────────────── */
.kta-plan-switcher-section-titre {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #8cb4ff;
  font-weight: 700;
  margin: 0 0 8px 4px;
  padding: 0;
}

/* ─── Override .kta-switcher-list et .kta-switcher-row dans la modale
   refonte UNIQUEMENT (les classes legacy ne sont pas touchées) ─── */
.kta-plan-switcher-modal-boite .kta-switcher-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.kta-plan-switcher-modal-boite .kta-switcher-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, transform 0.10s;
}
.kta-plan-switcher-modal-boite .kta-switcher-row:hover,
.kta-plan-switcher-modal-boite .kta-switcher-row:focus-visible {
  background: rgba(140, 180, 255, 0.10);
  border-color: rgba(140, 180, 255, 0.35);
  transform: translateX(2px);
  outline: none;
}
.kta-plan-switcher-modal-boite .kta-switcher-icon {
  font-size: 18px;
  width: 26px;
  text-align: center;
  flex-shrink: 0;
}
.kta-plan-switcher-modal-boite .kta-switcher-info {
  flex: 1;
  min-width: 0;
}
.kta-plan-switcher-modal-boite .kta-switcher-name {
  font-size: 14px;
  font-weight: 600;
  color: #e8eaf0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.kta-plan-switcher-modal-boite .kta-switcher-sub {
  font-size: 11px;
  color: #8892a4;
  margin-top: 2px;
}
.kta-switcher-row-arrow {
  font-size: 18px;
  color: #8892a4;
  flex-shrink: 0;
  transition: color 0.15s, transform 0.15s;
}
.kta-plan-switcher-modal-boite .kta-switcher-row:hover .kta-switcher-row-arrow {
  color: #8cb4ff;
  transform: translateX(2px);
}

.kta-plan-switcher-modal-boite .kta-switcher-empty {
  padding: 14px;
  font-size: 12px;
  color: #6c7689;
  font-style: italic;
  text-align: center;
  background: rgba(255, 255, 255, 0.02);
  border: 1px dashed rgba(255, 255, 255, 0.08);
  border-radius: 8px;
}

/* ─── Footer modal : CTA "Voir tous mes plans" ─────────────────── */
.kta-plan-switcher-modal-footer {
  padding: 12px 16px 16px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  background: rgba(140, 180, 255, 0.02);
  flex-shrink: 0;
}

.kta-plan-switcher-cta {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 12px 16px;
  background: linear-gradient(135deg, rgba(140, 180, 255, 0.15) 0%, rgba(140, 180, 255, 0.08) 100%);
  color: #8cb4ff;
  border: 1px solid rgba(140, 180, 255, 0.35);
  border-radius: 10px;
  cursor: pointer;
  font-family: inherit;
  transition: background 0.15s, border-color 0.15s, color 0.15s, transform 0.10s;
}
.kta-plan-switcher-cta:hover,
.kta-plan-switcher-cta:focus-visible {
  background: linear-gradient(135deg, rgba(140, 180, 255, 0.22) 0%, rgba(140, 180, 255, 0.14) 100%);
  border-color: rgba(140, 180, 255, 0.65);
  color: #b3ccff;
  transform: translateY(-1px);
  outline: none;
}
.kta-plan-switcher-cta:active {
  transform: translateY(0);
}
.kta-plan-switcher-cta-icon {
  font-size: 18px;
  margin-bottom: 2px;
}
.kta-plan-switcher-cta-label {
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.02em;
}
.kta-plan-switcher-cta-sub {
  font-size: 10px;
  color: #6c8cc0;
  font-style: italic;
  margin-top: 1px;
}

/* Mobile : modal plus compacte */
@media (max-width: 480px) {
  .kta-plan-switcher-modal-boite {
    width: min(380px, 95vw);
    border-radius: 12px;
  }
  .kta-plan-switcher-modal-header {
    padding: 12px 14px 10px;
  }
  .kta-plan-switcher-modal-titre {
    font-size: 14px;
  }
  .kta-plan-switcher-modal-corps {
    padding: 12px 12px 4px;
  }
  .kta-plan-switcher-current {
    padding: 10px 12px;
  }
  .kta-plan-switcher-current-name {
    font-size: 15px;
  }
  .kta-plan-switcher-modal-boite .kta-switcher-row {
    padding: 9px 10px;
    gap: 10px;
  }
}

/* Landscape mobile : ajuster pour économiser la hauteur */
@media (max-height: 500px) and (orientation: landscape) {
  .kta-plan-switcher-modal-boite {
    max-height: 86vh;
    width: min(520px, 90vw);
  }
  .kta-plan-switcher-current {
    padding: 8px 12px;
    margin-bottom: 10px;
  }
  .kta-plan-switcher-current-name {
    font-size: 14px;
    margin-bottom: 2px;
  }
  .kta-plan-switcher-modal-footer {
    padding: 8px 14px 10px;
  }
  .kta-plan-switcher-cta {
    padding: 8px 14px;
  }
  .kta-plan-switcher-cta-icon {
    font-size: 16px;
  }
}

/* ==============================================
   CHARTE GRAPHIQUE — boutons de contrôle Leaflet
   ============================================== */

.leaflet-bar {
  border: 1px solid rgba(255,255,255,0.08) !important;
  box-shadow: 0 4px 16px rgba(0,0,0,0.45) !important;
  border-radius: 10px !important;
  overflow: hidden;
}

.leaflet-bar a {
  background: #1a1f2e !important;
  color: #e8eaf0 !important;
  border-bottom: 1px solid rgba(255,255,255,0.06) !important;
  width: 32px !important;
  height: 32px !important;
  line-height: 32px !important;
  font-size: 16px !important;
  text-align: center !important;
  display: block !important;
  text-decoration: none !important;
  transition: background 0.15s !important;
}

.leaflet-bar a:last-child {
  border-bottom: none !important;
}

.leaflet-bar a:hover {
  background: #252c3f !important;
  color: #fff !important;
}

/* Masquer l'attribution Leaflet */
.leaflet-control-attribution {
  display: none !important;
}

/* État actif des boutons */
.leaflet-bar a.kta-actif,
.leaflet-bar a.kta-actif:hover {
  background: #1a6b3a !important;
  color: #fff !important;
  box-shadow: inset 0 0 0 2px #2ecc71 !important;
}

.leaflet-control-layers-toggle {
  background-color: #1a1f2e !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Cpath fill='%23e8eaf0' d='M1 1h16v2H1zm0 4h16v2H1zm0 4h16v2H1zm0 4h16v2H1z'/%3E%3C/svg%3E") !important;
  background-size: 16px !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  width: 32px !important;
  height: 32px !important;
  border-radius: 0 !important;
}

.leaflet-control-layers {
  background: #1a1f2e !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
  box-shadow: 0 4px 16px rgba(0,0,0,0.45) !important;
  border-radius: 10px !important;
  color: #e8eaf0 !important;
  font-family: Arial, sans-serif !important;
  font-size: 13px !important;
}

.leaflet-control-layers-expanded {
  padding: 8px 12px !important;
  /* Z-index 1200 pour passer au-dessus du #kta-titre-fixe (z-index 1100).
     Sans ça, le panneau déplié passait derrière le titre sur mobile (le
     titre prend la pleine largeur en haut et chevauche le contrôle des
     couches qui s'étire vers le bas). Reste sous les modales charte
     (z-index 99999) et le splash (z-index 9999). */
  z-index: 1200 !important;
}

.leaflet-control-layers label {
  color: #c8d0e0 !important;
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  margin-bottom: 4px !important;
}

.leaflet-popup-content input,
.leaflet-popup-content textarea {
  font-size: 16px !important;
  padding: 6px;
}


/* ==============================================
   PANNEAU ANCRÉ AUX BOUTONS
   ============================================== */

.kta-panneau {
  position: fixed;
  z-index: 9000;
  width: 280px;
  max-height: 85vh;
  overflow-y: auto;
  overflow-x: hidden;
  background: #1a1f2e;
  color: #e8eaf0;
  border-radius: 12px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.55), 0 0 0 1px rgba(255,255,255,0.07);
  font-family: Arial, sans-serif;
  font-size: 14px;
  animation: kta-fadein 0.15s ease;
}

@keyframes kta-fadein {
  from { opacity: 0; transform: translateX(8px); }
  to   { opacity: 1; transform: translateX(0); }
}

.kta-panneau-fleche {
  position: absolute;
  right: -8px;
  width: 0;
  height: 0;
  border-top: 8px solid transparent;
  border-bottom: 8px solid transparent;
  border-left: 8px solid #1a1f2e;
  transform: translateY(-50%);
  filter: drop-shadow(2px 0 2px rgba(0,0,0,0.3));
}

.kta-panneau-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 14px 10px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}

.kta-panneau-titre {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #8cb4ff;
}

.kta-panneau-close {
  background: none;
  border: none;
  color: #8892a4;
  font-size: 14px;
  cursor: pointer;
  padding: 2px 4px;
  border-radius: 4px;
  transition: color 0.15s, background 0.15s;
}
.kta-panneau-close:hover {
  color: #e8eaf0;
  background: rgba(255,255,255,0.08);
}

.kta-panneau-corps {
  padding: 12px 14px 14px;
}

.kta-aide-grille {
  display: grid;
  grid-template-columns: 28px 1fr;
  gap: 6px 10px;
  align-items: center;
}

.kta-aide-icone {
  font-size: 16px;
  text-align: center;
}

.kta-cfg-grille {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px 10px;
  align-items: center;
  margin-bottom: 14px;
}

.kta-cfg-label {
  font-size: 12px;
  color: #8892a4;
  line-height: 1.3;
}

.kta-cfg-input {
  min-width: 0;
  width: 100%;
  box-sizing: border-box;
  background: #0d1117;
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 6px;
  color: #e8eaf0;
  font-size: 13px;
  padding: 5px 7px;
  outline: none;
  transition: border-color 0.15s;
}
.kta-cfg-input:focus {
  border-color: #4d8aff;
}

/* ==============================================
   BOUTONS GÉNÉRIQUES
   ============================================== */

.kta-btn {
  padding: 7px 14px;
  border-radius: 7px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  border: none;
  transition: opacity 0.15s, background 0.15s;
}
.kta-btn:hover { opacity: 0.85; }

.kta-btn-primary {
  background: #1f6feb;
  color: #fff;
}

.kta-btn-ghost {
  background: rgba(255,255,255,0.07);
  color: #c0c8d8;
  border: 1px solid rgba(255,255,255,0.12);
}

.kta-btn-danger {
  background: #8b1a1a;
  color: #ffd0d0;
  border: 1px solid #c0392b;
}
.kta-btn-danger:hover {
  background: #c0392b;
  color: #fff;
  opacity: 1;
}

/* Bouton "lien" discret — pour les actions secondaires/dangereuses qu'on ne
   veut pas mettre au même niveau visuel que les CTA principaux (ex: "💥 Reset
   complet" sous "🪶 Mise à jour douce" dans la modale Update). */
.kta-btn-link {
  background: transparent;
  border: none;
  padding: 4px 8px;
  font-size: 12px;
  color: #8892a4;
  text-decoration: underline;
  text-decoration-color: rgba(255,255,255,0.2);
  text-underline-offset: 3px;
  cursor: pointer;
  transition: color 0.15s ease;
  font-family: inherit;
}
.kta-btn-link:hover {
  color: #c8d0e0;
  text-decoration-color: rgba(255,255,255,0.4);
}
.kta-update-link-danger {
  color: #b85050;
}
.kta-update-link-danger:hover {
  color: #ff6b6b;
  text-decoration-color: rgba(255,107,107,0.4);
}

/* =========================================================
   ⛑️ MODE URGENCE — "Je suis perdu"
   Couleurs (anti-collision avec Effondrement rouge / Eau bleu / Itinéraire cyan / Highlight magenta) :
     - Zone de recherche : orange #ff6b35 (alerte mais distinct)
     - Dernière position : marker vert #6ce28a pulse
     - Match in-zone     : violet #b452ff pulse
     - Match hors zone   : gris #8892a4 static
   ========================================================= */

/* Sous-action ⛑️ + 🚨 dans la sidebar / flyout — distinctif ROUGE urgence
   (cf v1.21.2 KARMA "met je suis perdu et urgence a la fin du menu tracker
   avec un fond rouge"). Applique à la cascade legacy (a.kta-sub) ET au
   flyout v1.16.0 (button.kta-group-flyout-btn). */
.kta-sous-action-urgence,
a.kta-sub.kta-sous-action-urgence,
button.kta-group-flyout-btn.kta-sous-action-urgence {
  background: rgba(220, 38, 38, 0.18) !important;
  border-color: rgba(220, 38, 38, 0.55) !important;
  color: #ff5a5a !important;
}
.kta-sous-action-urgence:hover,
a.kta-sub.kta-sous-action-urgence:hover,
button.kta-group-flyout-btn.kta-sous-action-urgence:hover {
  background: rgba(220, 38, 38, 0.32) !important;
  border-color: rgba(220, 38, 38, 0.85) !important;
  color: #ff8080 !important;
}
/* Label intérieur du bouton flyout — force le rouge sur le texte sinon il
   reste avec la couleur héritée de .kta-group-flyout-btn-label */
button.kta-group-flyout-btn.kta-sous-action-urgence .kta-group-flyout-btn-label,
button.kta-group-flyout-btn.kta-sous-action-urgence .kta-group-flyout-btn-icon {
  color: inherit !important;
}

/* Modale Lost Mode — bordure rouge urgence */
.kta-lost-modal-boite {
  max-width: 560px;
  border: 2px solid rgba(255, 107, 53, 0.45);
  box-shadow: 0 0 0 1px rgba(255, 107, 53, 0.10), 0 18px 60px rgba(0,0,0,0.6);
  /* 🔧 v1.13.0-fix16 : fix hauteur 88vh étirée pour cette modale courte */
  height: auto !important;
  max-height: 90vh !important;
}
.kta-lost-header {
  background: linear-gradient(135deg, rgba(255, 107, 53, 0.15), rgba(255, 107, 53, 0.05));
  border-bottom: 1px solid rgba(255, 107, 53, 0.35);
}
.kta-lost-section {
  margin-bottom: 16px;
}
.kta-lost-section-titre {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #ff8a5c;
  padding-bottom: 5px;
  margin-bottom: 8px;
  border-bottom: 1px solid rgba(255,107,53,0.18);
}

/* Onglets/boutons de position */
.kta-lost-pos-tabs {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-bottom: 6px;
}
.kta-lost-search {
  flex: 1 1 200px;
  min-width: 150px;
  background: #0a0d18;
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 6px;
  padding: 8px 12px;
  color: #c8d0e0;
  font-size: 13px;
}
.kta-lost-search:focus {
  outline: none;
  border-color: #ff8a5c;
  box-shadow: 0 0 0 2px rgba(255,138,92,0.18);
}
.kta-lost-pos-tabs .kta-btn {
  font-size: 12px;
  padding: 6px 10px;
}
.kta-lost-search-results {
  background: rgba(255,255,255,0.02);
  border-radius: 6px;
  margin: 6px 0;
  max-height: 200px;
  overflow-y: auto;
}
.kta-lost-search-results:empty { display: none; }
.kta-lost-search-result {
  padding: 6px 10px;
  cursor: pointer;
  border-bottom: 1px solid rgba(255,255,255,0.05);
  color: #c8d0e0;
  font-size: 13px;
}
.kta-lost-search-result:last-child { border-bottom: none; }
.kta-lost-search-result:hover {
  background: rgba(255,138,92,0.12);
  color: #ffb088;
}
.kta-lost-search-layer {
  color: #8892a4;
  font-size: 11px;
  font-weight: normal;
}
.kta-lost-search-empty {
  padding: 8px 12px;
  color: #8892a4;
  font-style: italic;
  font-size: 12px;
}
.kta-lost-pos-display {
  background: rgba(140,180,255,0.04);
  border: 1px dashed rgba(140,180,255,0.20);
  border-radius: 6px;
  padding: 8px 12px;
  margin-top: 4px;
  color: #8892a4;
  font-size: 12.5px;
  font-style: italic;
}
.kta-lost-pos-display.kta-lost-pos-set {
  background: rgba(108,226,138,0.08);
  border: 1px solid rgba(108,226,138,0.35);
  color: #c8d0e0;
  font-style: normal;
}
.kta-lost-pos-label { color: #6ce28a; font-weight: 600; }
.kta-lost-pos-coord { color: #8892a4; font-size: 11.5px; }

/* Segmented control "Vitesse & état de la personne" — 4 presets bundlés
   (vitesse km/h + marge de sécurité). Pattern identique au segmented control
   de l'itinéraire mais accent orange #ff8a5c au lieu du cyan, pour rester
   dans la palette urgence. */
.kta-lost-preset-segmented {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 6px;
}
.kta-lost-preset-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  padding: 8px 4px;
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,0.10);
  background: rgba(255,255,255,0.03);
  color: #c8d0e0;
  cursor: pointer;
  transition: all 0.15s ease;
  font-family: inherit;
  text-align: center;
}
.kta-lost-preset-btn:hover {
  background: rgba(255, 138, 92, 0.08);
  border-color: rgba(255, 138, 92, 0.30);
}
.kta-lost-preset-btn .kta-lost-preset-icon {
  font-size: 22px;
  line-height: 1;
}
.kta-lost-preset-btn .kta-lost-preset-label {
  font-size: 12px;
  font-weight: 600;
}
.kta-lost-preset-btn .kta-lost-preset-meta {
  font-size: 10px;
  color: #8892a4;
  font-family: ui-monospace, monospace;
  line-height: 1.25;
}
.kta-lost-preset-btn.kta-lost-preset-active {
  background: rgba(255, 138, 92, 0.18);
  border-color: rgba(255, 138, 92, 0.65);
  color: #ffe4d4;
  box-shadow: 0 0 0 1px rgba(255, 138, 92, 0.20) inset;
}
.kta-lost-preset-btn.kta-lost-preset-active .kta-lost-preset-meta {
  color: #ff8a5c;
}
@media (max-width: 480px) {
  .kta-lost-preset-segmented {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Détail du calcul du rayon (preset utilisé + breakdown) dans la section résultats */
.kta-lost-stat-detail {
  display: block;
  margin-top: 4px;
  font-size: 11.5px;
  color: #8892a4;
  font-family: ui-monospace, monospace;
}
.kta-lost-stat-preset {
  color: #ff8a5c;
  font-weight: 600;
  font-family: inherit;
}

/* Sliders */
.kta-lost-slider-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
  color: #c8d0e0;
  font-size: 13px;
}
.kta-lost-slider {
  flex: 1;
  accent-color: #ff8a5c;
}
.kta-lost-num {
  width: 60px;
  background: #0a0d18;
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 4px;
  padding: 4px 8px;
  color: #c8d0e0;
  font-size: 13px;
  text-align: center;
}
.kta-lost-param-label {
  min-width: 80px;
  font-size: 12px;
  color: #8892a4;
}
.kta-lost-param-val {
  min-width: 80px;
  text-align: right;
  font-family: ui-monospace, monospace;
  font-size: 12.5px;
  color: #ff8a5c;
}

/* Textarea indices */
.kta-lost-clues {
  width: 100%;
  min-height: 70px;
  background: #0a0d18;
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 6px;
  padding: 8px 12px;
  color: #c8d0e0;
  font-size: 13px;
  resize: vertical;
  box-sizing: border-box;
  font-family: inherit;
}
.kta-lost-clues:focus {
  outline: none;
  border-color: #ff8a5c;
  box-shadow: 0 0 0 2px rgba(255,138,92,0.18);
}

/* Résultats */
.kta-lost-results {
  margin-top: 16px;
  padding-top: 14px;
  border-top: 2px dashed rgba(255,107,53,0.25);
}
.kta-lost-stat {
  background: rgba(255,255,255,0.03);
  border-radius: 6px;
  padding: 8px 12px;
  color: #c8d0e0;
  font-size: 13px;
  line-height: 1.5;
}
/* 🆕 v1.43.26 — Bannière warning Lost Mode "rayon dépasse la taille du plan".
   Le inline style hardcoded (color #ffb088 sur fond orange clair) restait
   illisible en thème clair → classe dédiée + variant light. */
.kta-lost-warn-overflow {
  margin-top: 6px;
  background: rgba(255, 107, 53, 0.14);
  border: 1px solid rgba(255, 107, 53, 0.45);
  color: #ffb088;
}
body.kta-theme-light .kta-lost-warn-overflow,
html.kta-theme-light .kta-lost-warn-overflow {
  background: rgba(220, 80, 30, 0.10) !important;
  border-color: rgba(220, 80, 30, 0.45) !important;
  color: #b04a1a !important;
}
body.kta-theme-light .kta-lost-warn-overflow strong,
html.kta-theme-light .kta-lost-warn-overflow strong {
  color: #8a3611 !important;
}
.kta-lost-empty {
  color: #8892a4;
  font-style: italic;
  font-size: 12.5px;
  margin: 4px 0 0 0;
}
.kta-lost-match-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.kta-lost-match {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 6px;
  font-size: 13px;
}
.kta-lost-match-in {
  background: rgba(180, 82, 255, 0.10);
  border: 1px solid rgba(180, 82, 255, 0.30);
  color: #c8d0e0;
}
.kta-lost-match-out {
  background: rgba(136, 146, 164, 0.05);
  border: 1px solid rgba(136, 146, 164, 0.18);
  color: #8892a4;
}
.kta-lost-match-ico { font-size: 18px; line-height: 1; }
.kta-lost-match-body { flex: 1; }
.kta-lost-match-layer { color: #8892a4; font-size: 11.5px; font-weight: normal; }
.kta-lost-match-detail { font-size: 11.5px; color: #8892a4; margin-top: 2px; }
.kta-lost-refined-box {
  background: rgba(180, 82, 255, 0.05);
  border: 1px solid rgba(180, 82, 255, 0.30);
  border-radius: 8px;
  padding: 10px 12px;
}
.kta-lost-actions {
  display: flex;
  gap: 10px;
  margin-top: 12px;
}
.kta-lost-actions .kta-btn { flex: 1; }

/* Markers/cercles sur la carte */
.kta-lost-zone {
  animation: kta-lost-pulse-zone 2.5s ease-in-out infinite;
}
@keyframes kta-lost-pulse-zone {
  0%, 100% { stroke-opacity: 0.65; fill-opacity: 0.08; }
  50%      { stroke-opacity: 1.00; fill-opacity: 0.16; }
}
.kta-lost-refined {
  animation: kta-lost-pulse-refined 1.2s ease-in-out infinite;
}
@keyframes kta-lost-pulse-refined {
  0%, 100% { stroke-opacity: 0.7; fill-opacity: 0.18; }
  50%      { stroke-opacity: 1.0; fill-opacity: 0.35; }
}

.kta-lost-marker-last,
.kta-lost-marker-last-inner {
  background: transparent !important;
  border: none !important;
}
.kta-lost-marker-last-inner {
  font-size: 26px;
  filter: drop-shadow(0 0 4px #6ce28a) drop-shadow(0 0 8px #6ce28a);
  animation: kta-lost-pulse-last 1.5s ease-in-out infinite;
  text-align: center;
  line-height: 36px;
}
@keyframes kta-lost-pulse-last {
  0%, 100% { transform: scale(1.0); }
  50%      { transform: scale(1.15); }
}

.kta-lost-marker-match-in,
.kta-lost-marker-match-in-inner {
  background: transparent !important;
  border: none !important;
}
.kta-lost-marker-match-in-inner {
  font-size: 20px;
  filter: drop-shadow(0 0 3px #b452ff) drop-shadow(0 0 7px #b452ff);
  animation: kta-lost-pulse-match 1.6s ease-in-out infinite;
  text-align: center;
  line-height: 28px;
}
@keyframes kta-lost-pulse-match {
  0%, 100% { transform: scale(1.0); opacity: 1.0; }
  50%      { transform: scale(1.20); opacity: 0.75; }
}

.kta-lost-marker-match-out,
.kta-lost-marker-match-out-inner {
  background: transparent !important;
  border: none !important;
}
.kta-lost-marker-match-out-inner {
  font-size: 14px;
  color: #8892a4;
  text-align: center;
  line-height: 28px;
  opacity: 0.7;
}

/* 🛣️ v173 : Portée max sur le réseau de routes (effet néon rouge clair).
   Effet drop-shadow appliqué à la polyline SVG entière (= 1 seul rendu GPU,
   peu importe le nombre de segments — cf §16 piège performance qui explique
   pourquoi on n'utilise PAS N polylines avec drop-shadow individuels). */
.kta-lost-reach-polyline {
  filter: drop-shadow(0 0 3px rgba(255, 128, 128, 0.8))
          drop-shadow(0 0 6px rgba(255, 128, 128, 0.5));
  pointer-events: none;
}
/* Ligne pointillée du point de départ au snap road (cas départ éloigné) */
.kta-lost-reach-lead {
  filter: drop-shadow(0 0 2px rgba(255, 128, 128, 0.6));
  pointer-events: none;
}

/* Curseur crosshair pendant le mode clic carte */
body.kta-lost-click-mode .leaflet-container { cursor: crosshair !important; }

/* === Bloc accordion "📚 Bonnes pratiques" — couleur ambre #f4c542 === */
.kta-lost-pratiques {
  background: rgba(244, 197, 66, 0.08);
  border: 1px solid rgba(244, 197, 66, 0.35);
  border-radius: 8px;
  margin-bottom: 16px;
  overflow: hidden;
}
.kta-lost-pratiques-titre {
  cursor: pointer;
  padding: 10px 14px;
  font-size: 13px;
  font-weight: 600;
  color: #f4c542;
  user-select: none;
  list-style: none;
  display: flex;
  align-items: center;
  gap: 8px;
  transition: background 0.15s ease;
}
.kta-lost-pratiques-titre::-webkit-details-marker { display: none; }
.kta-lost-pratiques-titre::marker { display: none; }
.kta-lost-pratiques-titre:hover {
  background: rgba(244, 197, 66, 0.14);
}
.kta-lost-pratiques-titre::before {
  content: "▸";
  display: inline-block;
  transition: transform 0.15s ease;
  color: #f4c542;
  font-size: 12px;
}
.kta-lost-pratiques[open] > .kta-lost-pratiques-titre::before {
  transform: rotate(90deg);
}
.kta-lost-pratiques-corps {
  padding: 4px 14px 12px 14px;
  border-top: 1px solid rgba(244, 197, 66, 0.20);
}
.kta-lost-pratique-cat {
  margin-top: 10px;
}
.kta-lost-pratique-cat:first-child { margin-top: 6px; }
.kta-lost-pratique-cat-titre {
  font-size: 12px;
  font-weight: 700;
  color: #f4c542;
  margin-bottom: 4px;
  letter-spacing: 0.02em;
}
.kta-lost-pratique-cat ul {
  margin: 0;
  padding-left: 20px;
  color: #c8d0e0;
  font-size: 12.5px;
  line-height: 1.55;
}
.kta-lost-pratique-cat li {
  margin-bottom: 3px;
}
.kta-lost-pratique-cat li strong {
  color: #ffd980;
}
/* La catégorie "À ne pas faire" est en orange pour la distinguer */
.kta-lost-pratique-warn .kta-lost-pratique-cat-titre {
  color: #ff8a5c;
}
.kta-lost-pratique-warn li strong {
  color: #ffb088;
}

/* === Popups Leaflet du mode urgence (markers dernière position + indices) ===
   Les overrides .leaflet-popup-content-wrapper du thème dark global s'appliquent
   déjà (fond #1a1f2e, texte clair). Ici on ajoute la mise en forme spécifique
   au mode urgence : couleurs orange pour la dernière position, violet pour les
   indices in-zone, gris pour hors zone. */

.kta-lost-popup-wrapper .leaflet-popup-content-wrapper {
  /* Renforce la bordure pour bien distinguer des popups points normaux */
  border-color: rgba(255, 107, 53, 0.30) !important;
}
.kta-lost-popup-wrapper .leaflet-popup-tip {
  /* La pointe du popup matche aussi la bordure */
  border-top-color: #1a1f2e !important;
}

.kta-lost-popup {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 200px;
  max-width: 280px;
}
.kta-lost-popup b {
  /* Sur les markers dernière position : titre orange. Sur match : reste bleu (par défaut .leaflet-popup-content b). */
  color: #ff8a5c !important;
  font-size: 14px;
}
.kta-lost-popup .kta-popup-desc {
  color: #c8d0e0;
  font-size: 12.5px;
  line-height: 1.45;
}
.kta-lost-popup-coord {
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 11.5px !important;
  color: #8892a4 !important;
}
.kta-lost-popup-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: 4px;
  padding-top: 6px;
  border-top: 1px solid rgba(255,255,255,0.08);
}
.kta-lost-popup-badge {
  font-size: 11.5px;
  font-weight: 600;
  padding: 3px 8px;
  border-radius: 6px;
  letter-spacing: 0.02em;
}
.kta-lost-popup-badge-in {
  background: rgba(180, 82, 255, 0.18);
  border: 1px solid rgba(180, 82, 255, 0.40);
  color: #d4a5ff;
}
.kta-lost-popup-badge-out {
  background: rgba(136, 146, 164, 0.15);
  border: 1px solid rgba(136, 146, 164, 0.30);
  color: #8892a4;
}
.kta-lost-popup-dist {
  font-family: ui-monospace, monospace;
  font-size: 12.5px;
  color: #f4c542;
  font-weight: 600;
}
.kta-lost-popup-match {
  font-style: italic;
  color: #8892a4 !important;
  font-size: 11.5px !important;
}


/* ==============================================
   POPUPS LEAFLET STYLÉES
   ============================================== */

.leaflet-popup-content-wrapper {
  background: #1a1f2e !important;
  color: #e8eaf0 !important;
  border-radius: 10px !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
  box-shadow: 0 6px 24px rgba(0,0,0,0.5) !important;
  padding: 0 !important;
}

.leaflet-popup-content {
  margin: 12px 14px !important;
  font-family: Arial, sans-serif !important;
  font-size: 14px !important;
  line-height: 1.5 !important;
  color: #e8eaf0 !important;
}

.leaflet-popup-content b {
  color: #8cb4ff;
  font-size: 15px;
}

.leaflet-popup-tip-container .leaflet-popup-tip {
  background: #1a1f2e !important;
  box-shadow: none !important;
}

.leaflet-popup-close-button {
  color: #8892a4 !important;
  font-size: 18px !important;
  top: 6px !important;
  right: 8px !important;
}
.leaflet-popup-close-button:hover {
  color: #e8eaf0 !important;
}

.leaflet-popup-content input,
.leaflet-popup-content textarea,
.leaflet-popup-content select {
  font-size: 14px !important;
  padding: 6px 8px !important;
  background: #0d1117 !important;
  border: 1px solid rgba(255,255,255,0.12) !important;
  border-radius: 6px !important;
  color: #e8eaf0 !important;
  width: 100% !important;
  box-sizing: border-box !important;
  margin-top: 2px !important;
}

.leaflet-popup-content button {
  margin-top: 10px !important;
  padding: 7px 14px !important;
  background: #1f6feb !important;
  color: #fff !important;
  border: none !important;
  border-radius: 7px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  cursor: pointer !important;
}
.leaflet-popup-content button:hover {
  opacity: 0.85 !important;
}

/* =========================
   POPUP D'UN POINT — boutons d'actions itineraire
   ========================= */

.kta-popup-point .kta-popup-desc {
  display: block;
  margin-top: 4px;
  color: #c8d0e0;
  font-size: 12px;
  line-height: 1.4;
}

/* =========================
   v1.34.19 — MODE HISTOIRE — Bouton 📖 status bar + modale 2 onglets
   ========================= */

/* Bouton 📖 dans le header refonte (à gauche de la batterie depuis v1.34.21) */
.kta-refonte-counter-histoire {
  cursor: pointer;
  user-select: none;
  transition: background 0.15s ease;
}
.kta-refonte-counter-histoire:hover,
.kta-refonte-counter-histoire:focus {
  background: rgba(244, 197, 66, 0.15);
  outline: none;
}

/* 🆕 v1.35.0 — Bouton 🚨 Mode Sortie d'urgence dans le header refonte
   (entre 📖 et 🔋). Hover rouge pour signifier urgence. */
.kta-refonte-counter-sortie {
  cursor: pointer;
  user-select: none;
  transition: background 0.15s ease;
}
.kta-refonte-counter-sortie:hover,
.kta-refonte-counter-sortie:focus {
  background: rgba(255, 80, 80, 0.18);
  outline: none;
}
body.kta-refonte-v1 .kta-refonte-counter-sortie .kta-refonte-counter-icon {
  font-size: 16px;
}
/* 🆕 v1.34.24 — Agrandir l'icône 📖 pour matcher la taille perçue des autres
   chips (📊 stats, 🔋 batterie). Sans cet override, l'emoji rendait à 12px
   alors que les chips voisins paraissent plus gros à cause du val text
   (12px font 700 weight) à côté de leur icône. Le 📖 seul faisait
   visuellement plus petit. Surcharge sur .kta-refonte-counter-icon
   uniquement INSIDE le chip histoire (pas global pour éviter régression
   sur stats / batterie / résumé mobile). */
/* v1.35.2 — Override unifié pour les chips icon-only (histoire + sortie) :
   16px pour qu'ils paraissent égaux aux chips qui ont icône + valeur (📊 1)
   où la valeur compense visuellement le poids. */
body.kta-refonte-v1 .kta-refonte-counter-histoire .kta-refonte-counter-icon {
  font-size: 16px;
  line-height: 1;
}

/* === v1.35.0 — Modale Sortie d'urgence === */
/* v1.35.2 — Modale compacte qui s'adapte au contenu (KARMA : "prend toute la
   longueur alors que pas nécessaire"). Override width 960px + height 88vh du
   parent `.kta-readme-modal-boite` qui était trop gros pour ce contenu
   (1 sortie + bouton + lien). On force largeur max 420px + height auto. */
.kta-sortie-urgence-boite {
  max-width: 420px !important;
  width: 92vw !important;
  height: auto !important;
  max-height: 85vh !important;
  max-height: 85dvh !important;
}
.kta-sortie-urgence-corps {
  padding: 18px 20px 20px;
}
.kta-sortie-urgence-corps .kta-sortie-err {
  color: #ffb3b3;
  font-size: 14px;
  margin-bottom: 12px;
}
.kta-sortie-principal {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  background: rgba(255, 80, 80, 0.10);
  border: 1px solid rgba(255, 80, 80, 0.30);
  border-radius: 8px;
  margin-bottom: 14px;
}
.kta-sortie-icone {
  font-size: 32px;
  line-height: 1;
}
.kta-sortie-info {
  flex: 1;
  min-width: 0;
}
.kta-sortie-nom {
  font-size: 16px;
  font-weight: 700;
  color: #e8eaf0;
  word-break: break-word;
  margin-bottom: 2px;
}
.kta-sortie-dist {
  font-size: 14px;
  color: #f4c542;
  font-weight: 600;
}
.kta-sortie-fallback {
  display: inline-block;
  color: #8892a4;
  font-weight: 400;
  font-size: 12px;
  margin-left: 4px;
  cursor: help;
}
.kta-sortie-niveau {
  display: inline-block;
  font-size: 11px;
  color: #8cb4ff;
  background: rgba(140, 180, 255, 0.10);
  padding: 1px 6px;
  border-radius: 3px;
  margin-left: 6px;
  vertical-align: middle;
  font-weight: 500;
}
.kta-sortie-actions {
  display: flex;
  gap: 8px;
  margin-bottom: 12px;
}
.kta-sortie-btn-tracer {
  flex: 1;
  font-size: 14px;
  padding: 10px 16px;
}
.kta-sortie-alternatives {
  margin-top: 16px;
  padding-top: 12px;
  border-top: 1px solid #2a3142;
}
.kta-sortie-alt-toggle {
  -webkit-appearance: none;
  appearance: none;
  background: transparent;
  border: none;
  color: #8cb4ff;
  font-size: 12px;
  cursor: pointer;
  padding: 4px 0;
  font-family: inherit;
}
.kta-sortie-alt-toggle:hover {
  color: #b3cdff;
}
.kta-sortie-alt-liste {
  list-style: none;
  padding: 0;
  margin: 8px 0 0;
}
.kta-sortie-alt-liste li {
  margin-bottom: 4px;
}
.kta-sortie-alt-item {
  -webkit-appearance: none;
  appearance: none;
  display: block;
  width: 100%;
  text-align: left;
  background: rgba(140, 180, 255, 0.06);
  border: 1px solid rgba(140, 180, 255, 0.20);
  border-radius: 5px;
  color: #c8d0e0;
  font-size: 13px;
  padding: 8px 10px;
  cursor: pointer;
  font-family: inherit;
  transition: background 0.15s;
}
.kta-sortie-alt-item:hover {
  background: rgba(140, 180, 255, 0.15);
}
/* Loader spinner */
.kta-sortie-loader {
  text-align: center;
  padding: 20px;
  color: #c8d0e0;
}
.kta-sortie-spinner {
  width: 32px;
  height: 32px;
  margin: 0 auto 12px;
  border: 3px solid #2a3142;
  border-top-color: #f4c542;
  border-radius: 50%;
  animation: kta-sortie-spin 0.8s linear infinite;
}
@keyframes kta-sortie-spin {
  to { transform: rotate(360deg); }
}

/* Variants thème clair */
body.kta-theme-light .kta-sortie-principal,
html.kta-theme-light .kta-sortie-principal {
  background: rgba(220, 38, 38, 0.08) !important;
  border-color: rgba(220, 38, 38, 0.35) !important;
}
body.kta-theme-light .kta-sortie-nom,
html.kta-theme-light .kta-sortie-nom {
  color: var(--kta-light-text) !important;
}
body.kta-theme-light .kta-sortie-dist,
html.kta-theme-light .kta-sortie-dist {
  color: #b35309 !important;
}
body.kta-theme-light .kta-sortie-niveau,
html.kta-theme-light .kta-sortie-niveau {
  color: #1d4ed8 !important;
  background: rgba(29, 78, 216, 0.10) !important;
}
body.kta-theme-light .kta-sortie-alt-toggle,
html.kta-theme-light .kta-sortie-alt-toggle {
  color: #1d4ed8 !important;
}
body.kta-theme-light .kta-sortie-alt-item,
html.kta-theme-light .kta-sortie-alt-item {
  background: rgba(161, 110, 16, 0.08) !important;
  border-color: rgba(161, 110, 16, 0.30) !important;
  color: var(--kta-light-text) !important;
}
body.kta-theme-light .kta-sortie-alternatives,
html.kta-theme-light .kta-sortie-alternatives {
  border-top-color: var(--kta-light-border) !important;
}

/* Modale Mode Histoire — réutilise la structure kta-readme-modal-* */
.kta-histoire-boite {
  max-width: 900px;
  width: 95vw;
  height: 85vh;
  display: flex;
  flex-direction: column;
}
.kta-histoire-tabs {
  display: flex;
  gap: 4px;
  padding: 8px 16px 0;
  border-bottom: 1px solid #2a3142;
  background: #1a1f2e;
}
.kta-histoire-tab {
  padding: 8px 16px;
  background: transparent;
  border: 1px solid transparent;
  border-bottom: none;
  border-radius: 6px 6px 0 0;
  color: #8892a4;
  font-size: 13px;
  cursor: pointer;
  transition: color 0.15s ease, background 0.15s ease;
}
.kta-histoire-tab:hover {
  color: #c8d0e0;
  background: rgba(140, 180, 255, 0.08);
}
.kta-histoire-tab-active {
  color: #f4c542;
  border-color: #2a3142;
  background: #0a0d18;
  border-bottom: 1px solid #0a0d18;
  margin-bottom: -1px;
  font-weight: 600;
}
.kta-histoire-corps {
  flex: 1;
  overflow: hidden;
  padding: 0;
  display: flex;
  flex-direction: column;
}
.kta-histoire-pane {
  flex: 1;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  padding: 16px;
}
/* Onglet note libre */
.kta-histoire-textarea {
  flex: 1;
  width: 100%;
  background: #0a0d18;
  border: 1px solid #2a3142;
  border-radius: 6px;
  color: #c8d0e0;
  font-size: 14px;
  line-height: 1.5;
  padding: 12px;
  resize: none;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
}
.kta-histoire-textarea:focus {
  outline: none;
  border-color: #8cb4ff;
}
.kta-histoire-note-status {
  margin-left: auto;
  font-size: 11px;
  color: #8892a4;
  white-space: nowrap;
}

/* === v1.34.30 — MD editor inline (note libre Mode Histoire) === */

/* Header note (boutons mode + status) */
.kta-histoire-note-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
  flex-wrap: wrap;
}
.kta-histoire-note-mode-btn {
  font-size: 12px;
  padding: 4px 10px;
}

/* Wrap mode EDIT (toolbar + textarea) */
.kta-histoire-note-edit-wrap {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

/* Toolbar MD (boutons B I H1 H2 ...) */
.kta-histoire-md-toolbar {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-wrap: wrap;
  margin-bottom: 6px;
  padding: 6px 8px;
  background: rgba(140, 180, 255, 0.04);
  border: 1px solid #2a3142;
  border-radius: 6px 6px 0 0;
}
.kta-md-tb-btn {
  background: transparent;
  border: 1px solid transparent;
  color: #c8d0e0;
  font-size: 12px;
  padding: 4px 8px;
  cursor: pointer;
  border-radius: 4px;
  font-family: inherit;
  min-width: 28px;
}
.kta-md-tb-btn:hover {
  background: rgba(140, 180, 255, 0.12);
  border-color: #2a3142;
}
.kta-md-tb-btn:active {
  background: rgba(140, 180, 255, 0.20);
}

/* Mode VIEW : div avec rendu MD */
.kta-histoire-note-rendered {
  flex: 1;
  overflow-y: auto;
  background: #0a0d18;
  border: 1px solid #2a3142;
  border-radius: 6px;
  color: #c8d0e0;
  font-size: 14px;
  line-height: 1.55;
  padding: 14px 16px;
}
.kta-histoire-note-rendered h1,
.kta-histoire-note-rendered h2,
.kta-histoire-note-rendered h3 {
  color: #f4c542;
  margin: 14px 0 8px;
  line-height: 1.3;
}
.kta-histoire-note-rendered h1 { font-size: 20px; }
.kta-histoire-note-rendered h2 { font-size: 17px; }
.kta-histoire-note-rendered h3 { font-size: 15px; }
.kta-histoire-note-rendered h1:first-child,
.kta-histoire-note-rendered h2:first-child,
.kta-histoire-note-rendered h3:first-child {
  margin-top: 0;
}
.kta-histoire-note-rendered p {
  margin: 0 0 12px;
}
.kta-histoire-note-rendered p:last-child {
  margin-bottom: 0;
}
.kta-histoire-note-rendered strong {
  color: #e8eaf0;
}
.kta-histoire-note-rendered em {
  color: #c8d0e0;
}
.kta-histoire-note-rendered a {
  color: #8cb4ff;
  text-decoration: underline;
}
.kta-histoire-note-rendered a:hover {
  color: #b3cdff;
}
.kta-histoire-note-rendered code {
  background: rgba(140, 180, 255, 0.10);
  color: #f4c542;
  padding: 1px 5px;
  border-radius: 3px;
  font-family: ui-monospace, "SF Mono", Consolas, monospace;
  font-size: 0.9em;
}
.kta-histoire-note-rendered ul,
.kta-histoire-note-rendered ol {
  margin: 0 0 12px;
  padding-left: 22px;
}
.kta-histoire-note-rendered li {
  margin-bottom: 4px;
}
.kta-histoire-note-rendered blockquote {
  margin: 0 0 12px;
  padding: 6px 12px;
  border-left: 3px solid #f4c542;
  background: rgba(244, 197, 66, 0.06);
  color: #c8d0e0;
  font-style: italic;
}
.kta-histoire-note-empty {
  color: #8892a4;
  text-align: center;
  margin: 32px 16px;
}
/* v1.34.20 — Toolbar PDF (Importer / Remplacer / Retirer) — visible si pas d'embarqué */
.kta-histoire-pdf-toolbar {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 8px;
  padding: 8px 12px;
  background: rgba(140, 180, 255, 0.05);
  border: 1px solid #2a3142;
  border-radius: 6px;
}
.kta-histoire-pdf-meta {
  flex: 1;
  min-width: 150px;
  font-size: 12px;
  color: #c8d0e0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Onglet PDF */
.kta-histoire-pdf-wrap {
  flex: 1;
  overflow: hidden;
  position: relative;
  background: #0a0d18;
  border: 1px solid #2a3142;
  border-radius: 6px;
}
.kta-histoire-pdf-iframe {
  width: 100%;
  height: 100%;
  border: none;
  background: #ffffff;
}
/* 🆕 v1.34.22 — Toolbar PDF actions (ouvrir dans onglet) en sticky overlay
   sur l'iframe. Fallback si CSP bloque l'iframe : l'user a quand même le
   bouton "Ouvrir dans un onglet" qui marche partout (CSP autorise
   window.open de blob:). */
.kta-histoire-pdf-actions {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 10;
  display: flex;
  gap: 6px;
}
.kta-histoire-pdf-action-open {
  font-size: 12px;
  padding: 4px 10px;
  background: rgba(26, 31, 46, 0.92);
  color: #f4c542;
  border: 1px solid rgba(244, 197, 66, 0.4);
  text-decoration: none;
  border-radius: 4px;
  transition: background 0.15s ease;
}
.kta-histoire-pdf-action-open:hover {
  background: rgba(26, 31, 46, 1);
  border-color: rgba(244, 197, 66, 0.7);
}
body.kta-theme-light .kta-histoire-pdf-action-open,
html.kta-theme-light .kta-histoire-pdf-action-open {
  background: var(--kta-light-bg-elevated);
  color: #8b3a00;
  border-color: rgba(217, 119, 6, 0.5);
}
body.kta-theme-light .kta-histoire-pdf-action-open:hover,
html.kta-theme-light .kta-histoire-pdf-action-open:hover {
  background: var(--kta-light-bg-deep);
  border-color: #d97706;
}
.kta-histoire-pdf-empty,
.kta-histoire-pdf-fallback {
  padding: 24px;
  text-align: center;
  color: #c8d0e0;
}
.kta-histoire-pdf-empty p,
.kta-histoire-pdf-fallback p {
  margin: 8px 0;
}

/* 🆕 v1.34.18 (E2 TTS) — Bouton inline 🔊 dans .kta-popup-desc qui lit la note
   à haute voix via Web Speech Synthesis. Affichage compact, marge à droite
   pour séparer du texte, pas de bordure (style "icône cliquable"). État ⏹️
   pendant la lecture, retour 🔊 à la fin. */
.kta-popup-point .kta-popup-tts-btn {
  display: inline-block;
  margin: 0 6px 0 0;
  padding: 0 4px;
  background: transparent;
  border: none;
  border-radius: 3px;
  color: inherit;
  cursor: pointer;
  font-size: 14px;
  line-height: 1.2;
  vertical-align: baseline;
  transition: background 0.15s ease;
  user-select: none;
}
.kta-popup-point .kta-popup-tts-btn:hover,
.kta-popup-point .kta-popup-tts-btn:focus {
  background: rgba(140, 180, 255, 0.20);
  outline: none;
}
.kta-popup-point .kta-popup-tts-btn:active {
  background: rgba(140, 180, 255, 0.35);
}

/* 🆕 v1.21.2 (KARMA "on rajoute juste aprés descriptions les coordonée GPS
   du point") : ligne coords GPS calculées via le calibrage. Discrète mais
   sélectionnable + bouton 📋 copier. Visible uniquement si le plan a un
   calibrage utilisable (sinon le bloc n'est même pas généré côté JS). */
.kta-popup-point .kta-popup-gps {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 6px;
  padding: 4px 8px;
  background: rgba(140, 180, 255, 0.10);
  border: 1px solid rgba(140, 180, 255, 0.30);
  border-radius: 4px;
  font-size: 11.5px;
}
.kta-popup-point .kta-popup-gps-icon {
  flex-shrink: 0;
  font-size: 13px;
  opacity: 0.85;
}
.kta-popup-point .kta-popup-gps-val {
  flex: 1;
  color: #a8c5ff;
  font-family: ui-monospace, "SF Mono", Consolas, monospace;
  font-size: 11px;
  font-weight: 600;
  user-select: all;
  background: transparent;
  padding: 0;
  white-space: nowrap;
  overflow-x: auto;
}
.kta-popup-point .kta-popup-gps-copy {
  flex-shrink: 0;
  background: transparent !important;
  border: none !important;
  padding: 0 2px !important;
  font-size: 13px !important;
  color: #8cb4ff !important;
  cursor: pointer;
  opacity: 0.75;
  margin: 0 !important;
  min-width: 0 !important;
}
.kta-popup-point .kta-popup-gps-copy:hover {
  opacity: 1;
}

.kta-popup-actions {
  display: flex;
  gap: 4px;
  margin-top: 10px;
  padding-top: 8px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  flex-wrap: wrap;
}

/* Override .leaflet-popup-content button (qui sont stylises plus haut avec
   un look generique) pour les boutons d'action specifiques de la popup point.
   Avec 3 boutons sur la meme ligne, on resserre padding/font pour rester
   compact (popups Leaflet sont par defaut ~250px de large). */
.kta-popup-actions .kta-popup-btn {
  flex: 1 1 70px !important;
  background: rgba(140, 180, 255, 0.12) !important;
  border: 1px solid rgba(140, 180, 255, 0.4) !important;
  color: #8cb4ff !important;
  padding: 6px 4px !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  border-radius: 5px !important;
  cursor: pointer !important;
  text-align: center !important;
  letter-spacing: 0.01em !important;
  transition: background 0.12s, border-color 0.12s !important;
  margin: 0 !important;
  width: auto !important;
  display: inline-block !important;
  white-space: nowrap !important;
}

.kta-popup-actions .kta-popup-btn:hover {
  background: rgba(140, 180, 255, 0.22) !important;
  opacity: 1 !important;
}

/* Bouton "📍 Je suis ici" : accent vert (recalage = action positive,
   distinct du jaune action principale et du bleu action secondaire) */
.kta-popup-actions .kta-popup-btn-here {
  background: rgba(108, 226, 138, 0.13) !important;
  border-color: rgba(108, 226, 138, 0.45) !important;
  color: #6ce28a !important;
}

.kta-popup-actions .kta-popup-btn-here:hover {
  background: rgba(108, 226, 138, 0.25) !important;
}

/* Bouton "🧭 Y aller" : accent jaune charte (action principale) */
.kta-popup-actions .kta-popup-btn-aller {
  background: rgba(244, 197, 66, 0.15) !important;
  border-color: rgba(244, 197, 66, 0.5) !important;
  color: #f4c542 !important;
}

.kta-popup-actions .kta-popup-btn-aller:hover {
  background: rgba(244, 197, 66, 0.28) !important;
}

/* 2ème ligne d'actions "danger" (suppression du point editor) — separee
   visuellement des actions principales pour eviter les clics accidentels */
.kta-popup-actions.kta-popup-actions-danger {
  margin-top: 6px;
  padding-top: 6px;
  border-top: 1px dashed rgba(255, 107, 107, 0.25);
}

.kta-popup-actions .kta-popup-btn-delete {
  background: rgba(255, 107, 107, 0.12) !important;
  border-color: rgba(255, 107, 107, 0.4) !important;
  color: #ff8c8c !important;
  flex: 1 1 100% !important;
}

.kta-popup-actions .kta-popup-btn-delete:hover {
  background: rgba(255, 107, 107, 0.22) !important;
  color: #ff6b6b !important;
}

/* 🆕 v1.9.3-B1b — Bouton "✏️ Modifier" : accent bleu sage (action
   d'édition neutre, distinct du vert recalage / jaune action principale /
   rouge suppression). Pleine largeur car action solo dans sa ligne. */
.kta-popup-actions .kta-popup-btn-edit {
  background: rgba(140, 180, 255, 0.13) !important;
  border-color: rgba(140, 180, 255, 0.45) !important;
  color: #8cb4ff !important;
  flex: 1 1 100% !important;
}

.kta-popup-actions .kta-popup-btn-edit:hover {
  background: rgba(140, 180, 255, 0.25) !important;
  color: #b4ccff !important;
}

/* 🆕 v1.16.0 step 3 — Bouton "⭐ Favori" : accent jaune ambre charte.
   État inactif (☆) = couleur ambre opaque atténuée. État actif (⭐) =
   ambre pleinement saturé + bordure plus marquée pour feedback visuel
   immédiat au toggle. */
.kta-popup-actions .kta-popup-btn-fav {
  background: rgba(244, 197, 66, 0.08) !important;
  border-color: rgba(244, 197, 66, 0.3) !important;
  color: #b89a4a !important;
}
.kta-popup-actions .kta-popup-btn-fav:hover {
  background: rgba(244, 197, 66, 0.18) !important;
  color: #f4c542 !important;
}
.kta-popup-actions .kta-popup-btn-fav.kta-fav-active {
  background: rgba(244, 197, 66, 0.22) !important;
  border-color: rgba(244, 197, 66, 0.65) !important;
  color: #f4c542 !important;
  box-shadow: 0 0 0 1px rgba(244, 197, 66, 0.2) inset;
}
.kta-popup-actions .kta-popup-btn-fav.kta-fav-active:hover {
  background: rgba(244, 197, 66, 0.32) !important;
}

/* 🆕 v1.9.3-B1d — Slot photos dans le popup point. Vide par défaut
   (hydraté async via attachPopupPhotos au popupopen). Masqué si vide
   pour ne pas créer d'espace blanc. */
.kta-popup-photos:empty {
  display: none;
}

.kta-popup-photos {
  margin: 8px 0 6px 0;
  padding-top: 8px;
  border-top: 1px dashed rgba(244, 197, 66, 0.18);
}

.kta-popup-photos-row {
  display: flex;
  gap: 5px;
  flex-wrap: wrap;
  /* Si plus de N miniatures qu'on n'en peut afficher (popup limité en
     largeur), scroll horizontal compact pour éviter de retailler le
     popup à chaque marker. */
  max-width: 100%;
}

/* 🔧 v1.9.3-B1d-fix6 (KARMA "j'ai toujours le fond bleu") :
   Abandon du <button> qui apporte trop de styles user-agent (border-inset,
   appearance, padding-inline natif, baseline descender...) → on rend la
   <img> directement cliquable (role="button" tabindex=0 côté JS).
   L'img est nativement display:inline → on force display:block pour qu'elle
   occupe exactement les 44×44 sans descender gap.
*/
img.kta-popup-photo-mini {
  width: 44px;
  height: 44px;
  flex: 0 0 44px;
  padding: 0;
  margin: 0;
  border: 1px solid rgba(244, 197, 66, 0.35);
  border-radius: 4px;
  cursor: zoom-in;
  transition: transform 0.12s, border-color 0.12s, box-shadow 0.12s;
  box-sizing: border-box;
  object-fit: cover;
  display: block;
  vertical-align: top;
  -webkit-user-drag: none;
  user-select: none;
}

img.kta-popup-photo-mini:hover,
img.kta-popup-photo-mini:focus-visible {
  transform: scale(1.08);
  border-color: #f4c542;
  box-shadow: 0 0 0 2px rgba(244, 197, 66, 0.25);
  outline: none;
  z-index: 1;
}

/* 🔧 v1.9.3-B1d-fix6 : ancienne règle .kta-popup-photo-mini:hover
   (sans préfixe `img.`) supprimée — était orpheline du temps où la mini
   était un <button>. La nouvelle img.kta-popup-photo-mini:hover ci-dessus
   couvre déjà tous les cas. */

.kta-popup-photos-count {
  margin-top: 5px;
  font-size: 10.5px;
  color: #f4c542;
  font-family: "SF Mono", Monaco, Consolas, monospace;
  opacity: 0.85;
}

/* =========================
   SUPPRESSION TRACÉ — floater mode clic visuel
   (pattern identique au floater mode clic itineraire)
   ========================= */

.kta-supp-trace-floater {
  position: fixed;
  left: 50%;
  bottom: 20px;
  transform: translateX(-50%);
  background: #1a1f2e;
  border: 1px solid rgba(255, 107, 107, 0.5);
  border-left: 3px solid #ff6b6b;
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.55);
  padding: 10px 14px;
  display: flex;
  align-items: center;
  gap: 12px;
  z-index: 100000;
  font-size: 13px;
  color: #c8d0e0;
  max-width: calc(100vw - 24px);
  animation: kta-supp-trace-popin 0.18s ease-out;
}

@keyframes kta-supp-trace-popin {
  from { opacity: 0; transform: translateX(-50%) translateY(8px); }
  to   { opacity: 1; transform: translateX(-50%) translateY(0); }
}

.kta-supp-trace-icon {
  font-size: 16px;
  flex-shrink: 0;
}

.kta-supp-trace-msg {
  flex: 1;
  white-space: nowrap;
  color: #e8eaf0;
}

.kta-supp-trace-msg strong {
  color: #ff6b6b;
}

.kta-supp-trace-floater .kta-btn {
  flex-shrink: 0;
  font-size: 12px;
  padding: 6px 12px;
}


/* ==============================================
   MODALES DE CONFIRMATION
   z-index 999999 — toujours au premier plan
   ============================================== */

.kta-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 999999;
  background: rgba(5, 8, 15, 0.82);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  box-sizing: border-box;
  animation: kta-fadein 0.15s ease;
}

.kta-modal {
  background: #1a1f2e;
  color: #e8eaf0;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,0.08);
  box-shadow: 0 12px 40px rgba(0,0,0,0.6);
  padding: 24px 22px 20px;
  max-width: 360px;
  width: 100%;
  font-family: Arial, sans-serif;
  text-align: center;
}

.kta-modal-danger {
  border-color: #8b1a1a;
  box-shadow: 0 12px 40px rgba(0,0,0,0.6), 0 0 0 1px #8b1a1a;
}

.kta-modal-icon {
  font-size: 36px;
  margin-bottom: 10px;
}

.kta-modal-titre {
  font-size: 17px;
  font-weight: 700;
  margin-bottom: 12px;
  color: #fff;
}

.kta-modal-texte {
  font-size: 13px;
  line-height: 1.6;
  color: #a0aabb;
  margin-bottom: 20px;
}

.kta-modal-texte strong {
  color: #ffb3b3;
}

.kta-modal-actions {
  display: flex;
  gap: 10px;
  justify-content: center;
}


/* ==============================================
   🗝️ UNLOCK GATE — barrière communautaire d'accès (depuis v173)
   ==============================================
   Plein écran, z-index TRÈS élevé (100100) pour passer au-dessus du splash
   (qui est à 9999) et de toutes les modales. C'est la 1ère interaction de
   l'user après le splash → doit dominer tout l'écran. */
#kta-unlock-overlay {
  position: fixed;
  inset: 0;
  z-index: 100100;
  background: linear-gradient(180deg, #0a0d18 0%, #1a1f2e 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  box-sizing: border-box;
  animation: kta-fadein 0.3s ease;
}
#kta-unlock-overlay.kta-unlock-fading {
  animation: kta-fadeout 0.25s ease forwards;
}
@keyframes kta-fadeout {
  from { opacity: 1; }
  to   { opacity: 0; }
}

.kta-unlock-box {
  background: #141823;
  border: 1px solid rgba(244, 197, 66, 0.25);
  border-radius: 14px;
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.65),
              0 0 32px rgba(244, 197, 66, 0.10);
  padding: 32px 28px 24px;
  max-width: 440px;
  width: 100%;
  text-align: center;
  font-family: Arial, sans-serif;
}

.kta-unlock-icon {
  font-size: 48px;
  margin-bottom: 12px;
  filter: drop-shadow(0 0 12px rgba(244, 197, 66, 0.4));
}

.kta-unlock-titre {
  font-size: 20px;
  font-weight: 700;
  color: #f4c542;
  margin-bottom: 12px;
  letter-spacing: 0.02em;
}

.kta-unlock-info {
  font-size: 13px;
  color: #c8d0e0;
  line-height: 1.55;
  margin: 0 0 20px;
}
.kta-unlock-info a {
  color: #8cb4ff;
  text-decoration: none;
}
.kta-unlock-info a:hover {
  text-decoration: underline;
}

#kta-unlock-form {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 12px;
}

#kta-unlock-input {
  padding: 12px 14px;
  font-size: 15px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: 8px;
  color: #e8eaf0;
  font-family: 'SF Mono', Monaco, Consolas, monospace;
  letter-spacing: 0.05em;
  outline: none;
  transition: border-color 0.15s, background 0.15s;
}
#kta-unlock-input:focus {
  border-color: rgba(244, 197, 66, 0.5);
  background: rgba(244, 197, 66, 0.04);
}

#kta-unlock-btn {
  padding: 12px 16px;
  font-size: 14px;
  font-weight: 600;
}

.kta-unlock-feedback {
  min-height: 24px;
  margin-bottom: 16px;
}
.kta-unlock-error {
  color: #ff8c8c;
  font-size: 13px;
  padding: 8px;
  background: rgba(255, 140, 140, 0.06);
  border: 1px solid rgba(255, 140, 140, 0.25);
  border-radius: 6px;
}
.kta-unlock-success {
  color: #6ce28a;
  font-size: 14px;
  font-weight: 600;
  padding: 8px;
  background: rgba(108, 226, 138, 0.06);
  border: 1px solid rgba(108, 226, 138, 0.25);
  border-radius: 6px;
}
.kta-unlock-warn {
  color: #ffb380;
  font-size: 12.5px;
  padding: 6px 10px;
  background: rgba(255, 179, 128, 0.06);
  border: 1px solid rgba(255, 179, 128, 0.22);
  border-radius: 6px;
}

/* Lockout après 5 tentatives — bloque définitivement jusqu'au reset */
.kta-unlock-lockout {
  text-align: center;
  padding: 16px 12px;
  background: rgba(255, 140, 140, 0.06);
  border: 1px solid rgba(255, 140, 140, 0.30);
  border-radius: 8px;
}
.kta-unlock-lockout-titre {
  font-size: 16px;
  font-weight: 700;
  color: #ff8c8c;
  margin-bottom: 8px;
}
.kta-unlock-lockout-msg {
  font-size: 13.5px;
  color: #c8d0e0;
  font-style: italic;
  margin-bottom: 14px;
}
.kta-unlock-lockout-hint {
  font-size: 11.5px;
  color: #8892a4;
  margin-top: 10px;
}

.kta-unlock-signature {
  font-size: 11px;
  color: #6c7689;
  margin-top: 20px;
  letter-spacing: 0.02em;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  padding-top: 14px;
}

/* 🆕 v1.28.5 — Voie alternative "ou importer une licence pro" dans UnlockGate.
   Séparateur "ou" + bloc d'import dédié, masqué sur instance pro
   (via .kta-licence-community → bascule v1.28.2). */
.kta-unlock-separator {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 16px 0 12px;
}
.kta-unlock-separator-line {
  flex: 1;
  height: 1px;
  background: rgba(255, 255, 255, 0.10);
}
.kta-unlock-separator-text {
  font-size: 11px;
  color: #6c7689;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-weight: 600;
}
.kta-unlock-licence-block {
  text-align: center;
}
.kta-unlock-licence-info {
  font-size: 12.5px;
  color: #a8b3c8;
  line-height: 1.6;
  margin: 0 0 12px;
}
.kta-unlock-licence-info strong {
  color: #f4c542;
}
.kta-unlock-licence-btn {
  width: 100%;
  padding: 10px 16px;
  font-size: 13px;
  font-weight: 600;
  background: rgba(244, 197, 66, 0.08);
  color: #f4c542;
  border: 1px solid rgba(244, 197, 66, 0.32);
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.18s ease, border-color 0.18s ease, transform 0.12s ease;
}
.kta-unlock-licence-btn:hover {
  background: rgba(244, 197, 66, 0.16);
  border-color: rgba(244, 197, 66, 0.55);
}
.kta-unlock-licence-btn:active {
  transform: scale(0.98);
}


/* ==============================================
   MODALES PLEIN ÉCRAN (README, aide, légende, config…)
   z-index 99999
   ============================================== */

.kta-readme-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 99999;
  background: rgba(5, 8, 15, 0.88);
  display: flex;
  /* 🐛 v1.23.2-fix (KARMA audit UX P1) : safe center pour éviter le bug
     "modale coupée" quand la boîte est plus grande que le viewport
     (mobile portrait + safe-area-inset-top + contenu dense). Cohérent
     avec le fix v1.23.1 sur .kta-emergency-overlay. Bénéfice cascade
     pour TOUTES les modales du projet (Aide, KMZ, Stats, Mode Secours,
     Pick waypoint, Assigner à équipe, etc.). */
  align-items: safe center;
  justify-content: center;
  padding: 16px;
  box-sizing: border-box;
  animation: kta-fadein 0.18s ease;
}

.kta-readme-modal-boite {
  background: #1a1f2e;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 14px;
  box-shadow: 0 16px 48px rgba(0,0,0,0.65);
  width: min(960px, 96vw);
  /* 🆕 v1.9.2-fullscreen : double déclaration vh/dvh. La modale est cap
     à 88% du viewport — sur iOS PWA avec cover, `dvh` correspond à
     l'écran physique entier (le `vh` historique pouvait exclure la
     zone home indicator iOS 15-).
     🐛 v1.40.38 (KARMA "modal bcp trop long, on a eu le cas plein de
     fois") : passage `height` → `max-height` pour que le contenu
     détermine la hauteur naturellement. Les modales longues (doc, aide,
     audit) atteignent toujours 88vh et scrollent en interne via
     `.kta-readme-modal-corps { flex:1; overflow-y:auto }`. Les modales
     courtes (Plan introuvable, confirmations, etc.) prennent leur taille
     naturelle au lieu de forcer 88vh avec espace vide en bas. */
  max-height: min(88vh, 920px);
  max-height: min(88dvh, 920px);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* 🆕 v1.9.2-fix13 — Modales PC plus grandes (KARMA : « les modal qu'on
   avait adaptées au PC doivent pouvoir prendre plus de place »).
   Concerne TOUTES les modales utilisant `.kta-readme-modal-boite`
   sans override de width inline : Documentation, Légende, Audit,
   et toutes les confirmations. Pour les modales qui ont leur propre
   override (.kta-aide-modal-boite, .kta-cfg-modal-boite, .kta-loader-
   config-boite), un bloc plus bas surcharge à valeur identique.
   RÈGLE : ne s'applique QUE sur PC (≥1024px) — mobile inchangé. */
/* 🆕 v1.9.2-fullscreen : tous les paliers PC ont la double déclaration
   vh/dvh pour profiter de l'écran physique entier sur iOS PWA avec cover. */
/* 🐛 v1.40.38 — Idem fix base : height → max-height pour autoriser le
   shrink au contenu sur modales courtes. Les modales longues atteignent
   le plafond naturellement. */
@media (min-width: 1024px) {
  .kta-readme-modal-boite {
    width: min(1400px, 96vw);
    max-height: min(92vh, 1100px);
    max-height: min(92dvh, 1100px);
  }
}
@media (min-width: 1440px) {
  .kta-readme-modal-boite {
    width: min(1700px, 96vw);
    max-height: min(94vh, 1300px);
    max-height: min(94dvh, 1300px);
  }
}
@media (min-width: 1920px) {
  .kta-readme-modal-boite {
    width: min(2000px, 95vw);
    max-height: min(95vh, 1500px);
    max-height: min(95dvh, 1500px);
  }
}

.kta-readme-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 18px 12px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
  flex-shrink: 0;
}

.kta-readme-modal-titre {
  font-size: 15px;
  font-weight: 700;
  color: #8cb4ff;
  letter-spacing: 0.04em;
  flex: 1;
}

/* Bouton toggle sommaire (à gauche du titre dans le header) */
.kta-readme-toc-toggle-btn {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  color: #c8d0e0;
  border-radius: 6px;
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 16px;
  margin-right: 12px;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
  flex-shrink: 0;
}

.kta-readme-toc-toggle-btn:hover {
  background: rgba(255,255,255,0.08);
  border-color: rgba(255,255,255,0.15);
  color: #e8eaf0;
}

.kta-readme-toc-toggle-btn.active {
  background: rgba(244, 197, 66, 0.12);
  border-color: rgba(244, 197, 66, 0.45);
  color: #f4c542;
}

/* 🆕 v1.21.3 (KARMA "le bouton Onboarding on peux le mettre tout en haut
   de la doc README a coté tu titre Documentation") : bouton 🎓 d'accès
   au tutoriel dans le header de la modale Documentation. Positionné à
   gauche du ✕ via flex order naturel (justify-content: space-between
   sur le header + ce bouton après le titre dans le DOM = penché à droite).
   Style cohérent avec .kta-readme-toc-toggle-btn pour symétrie visuelle. */
.kta-readme-tutorial-btn {
  background: rgba(244, 197, 66, 0.10);
  border: 1px solid rgba(244, 197, 66, 0.30);
  color: #f4c542;
  border-radius: 6px;
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 16px;
  margin-right: 8px;
  transition: background 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
  flex-shrink: 0;
}
.kta-readme-tutorial-btn:hover {
  background: rgba(244, 197, 66, 0.22);
  border-color: rgba(244, 197, 66, 0.55);
  transform: scale(1.05);
}
/* Thème clair — adapté à la charte ambre du light mode */
body.kta-theme-light .kta-readme-tutorial-btn,
html.kta-theme-light .kta-readme-tutorial-btn {
  background: rgba(161, 110, 16, 0.10) !important;
  border-color: rgba(161, 110, 16, 0.45) !important;
  color: #6b4d10 !important;
}
body.kta-theme-light .kta-readme-tutorial-btn:hover,
html.kta-theme-light .kta-readme-tutorial-btn:hover {
  background: rgba(161, 110, 16, 0.22) !important;
}

/* 🆕 v1.29.0 P0 i18n — Toggle FR/EN dans header modale Doc. Style miroir
   du bouton 🎓 (tutorial) avec accent bleu pour bien différencier. */
.kta-readme-lang-btn {
  background: rgba(140, 180, 255, 0.10);
  border: 1px solid rgba(140, 180, 255, 0.40);
  color: #e8eaf0;
  border-radius: 6px;
  width: 36px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 17px;
  line-height: 1;
  margin-right: 6px;
  transition: background 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
  flex-shrink: 0;
}
.kta-readme-lang-btn:hover {
  background: rgba(140, 180, 255, 0.25);
  border-color: rgba(140, 180, 255, 0.70);
  transform: scale(1.05);
}
body.kta-theme-light .kta-readme-lang-btn,
html.kta-theme-light .kta-readme-lang-btn {
  background: rgba(30, 95, 153, 0.10) !important;
  border-color: rgba(30, 95, 153, 0.45) !important;
  color: #1e5f99 !important;
}
body.kta-theme-light .kta-readme-lang-btn:hover,
html.kta-theme-light .kta-readme-lang-btn:hover {
  background: rgba(30, 95, 153, 0.22) !important;
}

/* 🆕 v1.45.0 — Onglets de langue de la doc (un drapeau par langue dispo).
   La langue COURANTE est marquée .active (pleine opacité + accent renforcé),
   les autres sont atténuées (= "clique pour basculer"). */
.kta-readme-lang-tabs { display: inline-flex; }
.kta-readme-lang-tabs .kta-readme-lang-btn { opacity: 0.5; }
.kta-readme-lang-tabs .kta-readme-lang-btn:hover { opacity: 1; }
.kta-readme-lang-tabs .kta-readme-lang-btn.active {
  opacity: 1;
  background: rgba(140, 180, 255, 0.30);
  border-color: rgba(140, 180, 255, 0.85);
}
body.kta-theme-light .kta-readme-lang-tabs .kta-readme-lang-btn.active,
html.kta-theme-light .kta-readme-lang-tabs .kta-readme-lang-btn.active {
  background: rgba(30, 95, 153, 0.26) !important;
  border-color: rgba(30, 95, 153, 0.70) !important;
}

/* Layout principal : sidebar + corps (+ bouton retour-haut absolute) */
.kta-readme-modal-layout {
  flex: 1;
  display: flex;
  min-height: 0;
  overflow: hidden;
  position: relative;  /* point d'ancrage du bouton retour-haut */
}

/* Sidebar du sommaire (desktop) — masquable via toggle */
.kta-readme-toc-sidebar {
  width: 240px;
  flex-shrink: 0;
  border-right: 1px solid rgba(255,255,255,0.08);
  overflow-y: auto;
  padding: 16px 12px 18px;
  background: rgba(0,0,0,0.16);
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,0.15) transparent;
  transition: width 0.25s ease, padding 0.25s ease, opacity 0.2s ease;
}

/* État masqué : la sidebar disparaît, le corps prend toute la largeur */
.kta-readme-modal-layout.toc-hidden .kta-readme-toc-sidebar {
  width: 0;
  padding-left: 0;
  padding-right: 0;
  opacity: 0;
  border-right: none;
  overflow: hidden;
  pointer-events: none;
}

.kta-readme-toc-title {
  font-size: 11px;
  font-weight: 700;
  color: #8cb4ff;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin: 0 0 10px;
  padding-left: 8px;
}

.kta-readme-toc-list,
.kta-readme-toc-sublist {
  list-style: none;
  margin: 0;
  padding: 0;
}

.kta-readme-toc-item {
  margin: 0;
}

.kta-readme-toc-row {
  display: flex;
  align-items: center;
  gap: 4px;
  border-radius: 5px;
  transition: background 0.15s ease;
}

.kta-readme-toc-row:hover {
  background: rgba(140, 180, 255, 0.06);
}

.kta-readme-toc-toggle {
  flex-shrink: 0;
  background: none;
  border: none;
  color: #6c7689;
  font-size: 11px;
  cursor: pointer;
  padding: 0;
  width: 18px;
  height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.2s ease, color 0.15s ease;
}

.kta-readme-toc-toggle:hover {
  color: #c8d0e0;
}

.kta-readme-toc-bullet {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #4d5663;
  font-size: 14px;
  width: 18px;
  height: 22px;
}

.kta-readme-toc-link {
  display: block;
  flex: 1;
  padding: 5px 8px 5px 0;
  color: #c0c8d8;
  text-decoration: none;
  font-size: 13px;
  line-height: 1.35;
  border-radius: 4px;
  transition: color 0.15s ease;
  word-break: break-word;
}

.kta-readme-toc-link-h2 {
  font-weight: 600;
}

.kta-readme-toc-link:hover {
  color: #e8eaf0;
}

.kta-readme-toc-link.active {
  color: #f4c542;
}

.kta-readme-toc-row:has(.kta-readme-toc-link.active) {
  background: rgba(244, 197, 66, 0.10);
}

/* Sous-liste H3 */
.kta-readme-toc-sublist {
  margin: 2px 0 6px 22px;
  padding: 0 0 0 8px;
  border-left: 1px solid rgba(255,255,255,0.07);
}

.kta-readme-toc-sublist li {
  margin: 0;
}

.kta-readme-toc-link-h3 {
  font-size: 12px;
  color: #8892a4;
  padding: 3px 6px;
  display: block;
  border-radius: 4px;
}

.kta-readme-toc-link-h3:hover {
  background: rgba(140, 180, 255, 0.06);
  color: #c0c8d8;
}

.kta-readme-toc-link-h3.active {
  background: rgba(244, 197, 66, 0.10);
  color: #f4c542;
}

/* État replié (cliquer sur ▾ → -90°, masquer la sous-liste) */
.kta-readme-toc-item.collapsed .kta-readme-toc-sublist { display: none; }
.kta-readme-toc-item.collapsed .kta-readme-toc-toggle { transform: rotate(-90deg); }

/* Corps scrollable du contenu */
.kta-readme-modal-corps {
  flex: 1;
  position: relative;
  overflow-y: auto;
  padding: 22px 28px 28px;
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,0.15) transparent;
  color: #c8d0e0;
}

.kta-readme-corps {
  font-family: Arial, sans-serif;
  font-size: 14px;
  line-height: 1.7;
  color: #c8d0e0;
}

.kta-readme-corps h1 {
  font-size: 22px;
  color: #8cb4ff;
  margin: 0 0 14px;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(140, 180, 255, 0.15);
}

/* H2 — accent bar à gauche, plus de border-bottom (5:d) */
.kta-readme-corps h2 {
  font-size: 18px;
  color: #8cb4ff;
  margin: 32px 0 12px;
  padding: 2px 0 2px 12px;
  border-left: 3px solid #8cb4ff;
  scroll-margin-top: 12px;
}

.kta-readme-corps h3 {
  font-size: 15px;
  color: #a0c4ff;
  margin: 22px 0 8px;
  scroll-margin-top: 12px;
}

.kta-readme-corps h4 {
  font-size: 14px;
  color: #b0c8d8;
  margin: 14px 0 6px;
}

/* HR — séparateur en dégradé (5:b) */
.kta-readme-corps hr {
  border: none;
  height: 1px;
  background: linear-gradient(90deg, transparent 0%, rgba(140,180,255,0.22) 50%, transparent 100%);
  margin: 24px 0;
}

.kta-readme-corps p { margin: 0 0 12px; }

/* Listes — meilleur espacement (5:e) */
.kta-readme-corps ul,
.kta-readme-corps ol {
  padding-left: 22px;
  margin: 8px 0 14px;
}

.kta-readme-corps li {
  margin-bottom: 6px;
  line-height: 1.6;
}

.kta-readme-corps a   { color: #5ba3f5; text-decoration: none; }
.kta-readme-corps a:hover { text-decoration: underline; }

.kta-readme-corps code {
  background: #0d1117;
  border-radius: 4px;
  padding: 2px 6px;
  font-family: 'Courier New', monospace;
  font-size: 12px;
  color: #e06c75;
  border: 1px solid rgba(255,255,255,0.07);
}

.kta-readme-corps pre {
  background: #0d1117;
  border-radius: 8px;
  padding: 14px 16px;
  overflow-x: auto;
  margin: 10px 0;
  border: 1px solid rgba(255,255,255,0.08);
}

.kta-readme-corps pre code {
  background: none;
  padding: 0;
  border: none;
  color: #abb2bf;
  font-size: 13px;
}

.kta-readme-corps strong { color: #e8eaf0; }
.kta-readme-corps em     { color: #b0c8d8; }
.kta-readme-erreur       { color: #ffb3b3; font-style: italic; }

/* Blockquote — citation avec accent jaune charte (5:a) */
.kta-readme-corps blockquote {
  position: relative;
  border-left: 3px solid #f4c542;
  margin: 14px 0;
  padding: 10px 14px 10px 18px;
  background: rgba(244, 197, 66, 0.06);
  border-radius: 0 6px 6px 0;
  color: #c0c8d8;
  font-style: italic;
  line-height: 1.6;
}

.kta-readme-corps blockquote::before {
  content: "❝";
  position: absolute;
  top: 4px;
  left: 4px;
  color: rgba(244, 197, 66, 0.35);
  font-size: 18px;
  font-style: normal;
  pointer-events: none;
}

.kta-readme-table {
  width: 100%;
  border-collapse: collapse;
  margin: 12px 0;
  font-size: 13px;
}

.kta-readme-table th {
  background: rgba(255,255,255,0.06);
  color: #8cb4ff;
  font-weight: 700;
  padding: 7px 10px;
  text-align: left;
  border-bottom: 1px solid rgba(255,255,255,0.12);
}

.kta-readme-table td {
  padding: 6px 10px;
  border-bottom: 1px solid rgba(255,255,255,0.05);
  color: #c8d0e0;
  vertical-align: top;
}

.kta-readme-table tr:last-child td {
  border-bottom: none;
}

.kta-readme-table tr:hover td {
  background: rgba(255,255,255,0.03);
}

.kta-readme-img-skip {
  display: inline-block;
  font-size: 12px;
  color: #8892a4;
  background: rgba(255,255,255,0.04);
  border: 1px dashed rgba(255,255,255,0.1);
  border-radius: 6px;
  padding: 4px 10px;
  margin: 4px 0;
}

/* Tuiles tiling — pas de lissage CSS entre tuiles adjacentes */
.kta-tile-overlay {
  image-rendering: auto;
  /* Supprime le gap sub-pixel entre tuiles sur certains navigateurs */
  margin: -0.5px;
}

/* ==============================================
   MODALE — "Session précédente restaurée"
   Centrée plein écran, respect du pattern kta-readme-modal
   ============================================== */
.kta-session-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 100000;
  background: rgba(5, 8, 15, 0.78);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  box-sizing: border-box;
  animation: kta-session-fade-in 0.22s ease-out;
}

.kta-session-modal-overlay.hiding {
  animation: kta-session-fade-out 0.22s ease-in forwards;
}

@keyframes kta-session-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes kta-session-fade-out {
  from { opacity: 1; }
  to   { opacity: 0; }
}

.kta-session-modal-boite {
  width: min(440px, 96vw);
  background: #1a1f2e;
  border: 1px solid rgba(244, 197, 66, 0.30);
  border-radius: 14px;
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.70);
  padding: 26px 24px 20px;
  text-align: center;
  color: #e8eaf0;
  animation: kta-session-pop-in 0.28s cubic-bezier(0.18, 0.89, 0.32, 1.18);
  /* 🔧 v1.13.0-fix16 (KARMA "bug de longueur sur enregistrer session,
     pareil je suis perdu, itinéraire pareil") : même cas que niv/legende/
     pin-proposal — modale courte sur 88vh étire en hauteur. */
  height: auto !important;
  max-height: 90vh !important;
}

@keyframes kta-session-pop-in {
  from { opacity: 0; transform: scale(0.92) translateY(8px); }
  to   { opacity: 1; transform: scale(1)    translateY(0);   }
}

.kta-session-modal-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  margin: 0 auto 14px;
  border-radius: 50%;
  background: rgba(244, 197, 66, 0.14);
  border: 1px solid rgba(244, 197, 66, 0.40);
  color: #f4c542;
  font-size: 28px;
  line-height: 1;
  box-shadow: 0 0 24px rgba(244, 197, 66, 0.18);
}

.kta-session-modal-titre {
  font-size: 17px;
  font-weight: 700;
  color: #e8eaf0;
  letter-spacing: 0.02em;
  margin-bottom: 6px;
}

.kta-session-modal-plan {
  font-size: 12px;
  color: #f4c542;
  margin-bottom: 6px;
  font-weight: 600;
  letter-spacing: 0.02em;
}

.kta-session-modal-detail {
  font-size: 13px;
  color: #8892a4;
  margin-bottom: 22px;
  line-height: 1.5;
}

.kta-session-modal-actions {
  display: flex;
  gap: 10px;
  justify-content: center;
}

.kta-session-modal-actions .kta-btn {
  flex: 1;
  max-width: 200px;
  padding: 9px 14px;
  font-size: 13px;
  font-weight: 600;
}

/* Mobile : actions empilées */
@media (max-width: 480px) {
  .kta-session-modal-boite {
    padding: 22px 18px 18px;
  }
  .kta-session-modal-titre { font-size: 15px; }
  .kta-session-modal-detail { font-size: 12px; }
  .kta-session-modal-actions {
    flex-direction: column;
  }
  .kta-session-modal-actions .kta-btn {
    max-width: none;
  }
}


/* ==============================================
   AIDE — sections groupées
   ============================================== */

/* Largeur de la modale Aide.
   Mobile/tablette par défaut : 580px (compact, scroll vertical naturel).
   PC ≥ 1024px : 1100px + corps en 2 colonnes via CSS columns
   (override plus bas dans le @media).
   ⚠️ !important sur la max-width parce que .kta-readme-modal-boite a
   déjà un width fixé à min(960px, 96vw) plus haut — sans !important
   notre règle perdrait la specificity. */
.kta-aide-modal-boite {
  max-width: 580px !important;
  width: min(580px, 96vw) !important;
}

/* Paragraphe d'intro : doit rester full-width quand on passe en 2 colonnes
   (sinon l'intro fait 50% de large et les sections en dessous s'étalent
   verticalement avant de basculer dans la 2e colonne — moche). */
.kta-aide-intro {
  color: #8892a4;
  font-size: 13px;
  margin: 0 0 14px;
  line-height: 1.5;
}

.kta-aide-section {
  margin-bottom: 18px;
}

.kta-aide-section:last-child {
  margin-bottom: 0;
}

.kta-aide-section-titre {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #8cb4ff;
  padding-bottom: 6px;
  margin-bottom: 8px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}

.kta-aide-section .kta-aide-grille {
  display: grid;
  grid-template-columns: 36px 1fr;
  gap: 5px 10px;
  align-items: center;
}

/* === Modale 🤖 Aide IA — prompt prêt à coller === */
.kta-aide-ia-prompt-wrap {
  position: relative;
}
.kta-aide-ia-prompt {
  width: 100%;
  min-height: 180px;
  background: #0a0d18;
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 8px;
  padding: 12px 14px;
  color: #c8d0e0;
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 11.5px;
  line-height: 1.55;
  resize: vertical;
  box-sizing: border-box;
  white-space: pre-wrap;
}
.kta-aide-ia-prompt:focus {
  outline: none;
  border-color: #8cb4ff;
  box-shadow: 0 0 0 2px rgba(140,180,255,0.15);
}
.kta-aide-ia-copy-btn {
  position: absolute;
  top: 8px;
  right: 8px;
  padding: 6px 12px;
  font-size: 12px;
  background: rgba(244,197,66,0.12);
  border: 1px solid rgba(244,197,66,0.35);
  color: #f4c542;
  cursor: pointer;
  transition: all 0.15s ease;
}
.kta-aide-ia-copy-btn:hover {
  background: rgba(244,197,66,0.22);
  border-color: rgba(244,197,66,0.55);
}
.kta-aide-ia-copy-btn.kta-aide-ia-copy-ok {
  background: rgba(108,226,138,0.18);
  border-color: rgba(108,226,138,0.55);
  color: #6ce28a;
}

.kta-aide-section .kta-aide-icone {
  font-size: 16px;
  text-align: center;
}

.kta-aide-section .kta-aide-grille span:not(.kta-aide-icone) {
  font-size: 13px;
  color: #c8d0e0;
}

/* ===== MODALE AIDE — layout 2 colonnes sur PC (≥ 1024px) =====
   Évolution :
   - Suite 11 : "columns: 2" + break-inside avoid → grand trou dans la col
     gauche quand une section est plus grande que les autres réunies.
   - Suite 12 : Grid auto-flow → respecte l'ordre HTML mais pas
     d'équilibrage des hauteurs → toujours du vide en bas de la col gauche.
   - Suite 13 (ici) : "columns: 2" SANS break-inside avoid → le browser
     équilibre vraiment les hauteurs en autorisant le split d'une section
     entre les 2 colonnes si nécessaire. Compromis accepté : une section
     peut être coupée (lecture top-bottom-left → top-right), mais plus
     de trou massif.
   Si une section sensible doit rester atomique, on peut lui ajouter une
   classe spécifique avec break-inside: avoid au cas par cas (pas fait par
   défaut). */
@media (min-width: 1024px) {
  /* 🆕 v1.9.2-fix13 : 1100px → 1400px (et paliers ≥1440 / ≥1920 plus bas) */
  .kta-aide-modal-boite {
    max-width: 1400px !important;
    width: min(1400px, 96vw) !important;
  }

  .kta-aide-corps {
    columns: 2;
    column-gap: 36px;
    column-rule: 1px solid rgba(255, 255, 255, 0.06);
  }

  .kta-aide-corps .kta-aide-intro {
    column-span: all;
    margin: 0 0 14px;
    padding-bottom: 12px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  }

  .kta-aide-corps .kta-aide-section {
    /* Marge pour aerer entre sections dans la même colonne */
    margin-top: 0;
    margin-bottom: 16px;
  }

  /* Le titre de section ne doit JAMAIS etre coupe de son contenu :
     si une coupure intervient, on garde le titre avec au moins le debut
     de la grille en dessous. */
  .kta-aide-corps .kta-aide-section-titre {
    break-after: avoid;
    page-break-after: avoid;
  }
}


/* ==============================================
   MODALE RÉGLAGES (⚙️) — responsive PC (depuis v170)
   ==============================================
   Mobile (default) : étroite (440px max), 1 colonne — comportement v169.
   PC ≥ 1024px : 1100px max + columns: 2 (pattern identique à la doc Aide).

   Différence avec la doc Aide : on ajoute break-inside: avoid sur les
   sections (.kta-aide-section dans le corps) parce que les Réglages
   contiennent des inputs/grilles/toggles — couper en plein milieu d'un
   bloc d'inputs serait confusant pour l'user. Les sections de la modale
   Réglages sont relativement homogènes en hauteur, donc break-inside:
   avoid ne crée pas de déséquilibre significatif (contrairement à la doc
   Aide qui a des sections très inégales, où break-inside cassait le
   layout). */
.kta-cfg-modal-boite {
  /* Mobile : préserve strictement le comportement v169 (440px, h auto) */
  max-width: 440px !important;
  height: auto !important;
  max-height: 90vh !important;
}

@media (min-width: 1024px) {
  /* 🆕 v1.9.2-fix13 : 1100px → 1400px (et paliers ≥1440 / ≥1920 plus bas) */
  .kta-cfg-modal-boite {
    max-width: 1400px !important;
    width: min(1400px, 96vw) !important;
  }

  /* Layout 2 colonnes via column-flow (cohérent avec la modale Aide). */
  .kta-cfg-corps {
    columns: 2;
    column-gap: 36px;
    column-rule: 1px solid rgba(255, 255, 255, 0.06);
  }

  /* Sections d'inputs : ne JAMAIS couper en plein milieu d'une section
     (compromis différent de la doc Aide — cf. commentaire en tête de bloc). */
  .kta-cfg-corps .kta-aide-section {
    break-inside: avoid;
    page-break-inside: avoid;
    margin-bottom: 16px;
  }

  /* Barre d'actions en bas : doit traverser les 2 colonnes en pleine largeur
     pour que les 4 boutons restent visibles d'un coup sans devoir scroller
     une colonne. En 4 colonnes pour exploiter l'espace dispo sur PC. */
  .kta-cfg-actions-bar {
    column-span: all;
    -webkit-column-span: all;
    display: grid;
    /* v1.7.3 (suite KARMA) : 3 colonnes au lieu de 4. Le bouton 🗑️ Réinitialiser
       a été retiré de la modale ⚙️ Réglages en mode carte (action accessible
       uniquement depuis la modale ⚙️ Configuration du loader). Reste : Reset
       / Appliquer / 🐛 Logs. */
    grid-template-columns: 1fr 1fr 1fr;
    gap: 10px;
    margin-top: 16px;
    padding-top: 12px;
    border-top: 1px solid rgba(255,255,255,0.08);
  }
}

/* Mobile (< 1024px) : barre d'actions en grid 3 colonnes depuis v1.7.3 (suite
   KARMA — retrait du bouton 🗑️ Réinitialiser pour ne plus avoir d'asymétrie
   2+1 sur la 2e ligne). Reste : Reset / Appliquer / 🐛 Logs. */
@media (max-width: 1023px) {
  .kta-cfg-actions-bar {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 8px;
    margin-top: 12px;
    padding-top: 10px;
    border-top: 1px solid rgba(255,255,255,0.08);
  }
}


/* ==============================================
   MODALE ⚙️ CONFIGURATION DU LOADER — responsive PC (depuis v1.8.0)
   ==============================================
   Mobile (default) : étroite (680px max), 1 colonne — comportement v1.7.3.
   PC ≥ 1024px : 1100px max + columns: 2 (pattern identique aux modales
   ⚙️ Réglages in-app et 📖 Documentation).

   Différence avec la modale Aide (qui a SANS break-inside) : on ajoute
   break-inside: avoid sur les sections (.kta-aide-section dans le corps).
   Raison : les sections de Configuration contiennent des éléments
   structurés (segmented control, toggles, boutons d'action) — couper en
   plein milieu serait confusant pour l'user. Les 6 sections (Tiling,
   ULTRA, Debug, Force update, Confidentialité, Réinitialisation) sont
   relativement homogènes en hauteur, donc break-inside: avoid ne crée pas
   de gros déséquilibre visuel entre les 2 colonnes.

   Cohérence avec ⚙️ Réglages map mode (cf. bloc ci-dessus) : même CSS,
   même comportement. La modale de la home et la modale in-app ont la
   même apparence en PC. */
.kta-loader-config-boite {
  /* Mobile : préserve le comportement v1.7.3 (680px, h auto, max-h 90vh) */
  max-width: 680px !important;
  height: auto !important;
  max-height: 90vh !important;
}

@media (min-width: 1024px) {
  /* 🆕 v1.9.2-fix13 : 1100px → 1400px (et paliers ≥1440 / ≥1920 plus bas) */
  .kta-loader-config-boite {
    max-width: 1400px !important;
    width: min(1400px, 96vw) !important;
  }

  /* Layout 2 colonnes via column-flow */
  .kta-loader-config-corps {
    columns: 2;
    column-gap: 36px;
    column-rule: 1px solid rgba(255, 255, 255, 0.06);
  }

  /* Sections de Configuration : ne JAMAIS couper en plein milieu d'une
     section. Compromis identique à la modale Réglages in-app — cf.
     commentaire en tête de bloc. */
  .kta-loader-config-corps .kta-aide-section {
    break-inside: avoid;
    page-break-inside: avoid;
    margin-bottom: 16px;
  }
}

/* 🆕 v1.9.2-fix13 — Paliers PC large / ultra-large pour les modales
   à override max-width (Aide, Cfg map, Loader Config). On utilise
   les mêmes paliers que les autres modales (.kta-readme-modal-boite
   plus haut) pour cohérence. */
@media (min-width: 1440px) {
  .kta-aide-modal-boite,
  .kta-cfg-modal-boite,
  .kta-loader-config-boite {
    max-width: 1700px !important;
    width: min(1700px, 96vw) !important;
  }
}
@media (min-width: 1920px) {
  .kta-aide-modal-boite,
  .kta-cfg-modal-boite,
  .kta-loader-config-boite {
    max-width: 2000px !important;
    width: min(2000px, 95vw) !important;
  }
}

/* 🆕 v1.9.2-fix14 — Modale Export Images (.kta-export-modal-boite).
   Mobile : garde height:auto (le contenu peut être court) avec max-height
   pour éviter qu'il dépasse l'écran.
   PC : applique les mêmes paliers que les autres modales pour l'élargir,
   en gardant height:auto (le contenu d'export ne justifie pas d'imposer
   88vh / 92vh — on prend la taille naturelle, avec max-height pour limiter). */
.kta-export-modal-boite {
  height: auto !important;
  max-height: 92vh !important;
}
@media (min-width: 1024px) {
  .kta-export-modal-boite {
    max-width: 1400px !important;
    width: min(1400px, 96vw) !important;
  }
}
@media (min-width: 1440px) {
  .kta-export-modal-boite {
    max-width: 1700px !important;
    width: min(1700px, 96vw) !important;
  }
}
@media (min-width: 1920px) {
  .kta-export-modal-boite {
    max-width: 2000px !important;
    width: min(2000px, 95vw) !important;
  }
}

/* 🆕 v1.10.3 — Modale Export PDF (.kta-pdf-modal-boite).
   Hérite de .kta-readme-modal-boite mais reste plus compacte que la modale
   Export Images : moins d'options (pas de calques détaillés ni d'aperçu),
   donc une largeur intermédiaire suffit. Mobile : height:auto avec max-h. */
.kta-pdf-modal-boite {
  height: auto !important;
  max-height: 90vh !important;
}
@media (min-width: 1024px) {
  .kta-pdf-modal-boite {
    max-width: 760px !important;
    width: min(760px, 92vw) !important;
  }
}
@media (min-width: 1440px) {
  .kta-pdf-modal-boite {
    max-width: 820px !important;
    width: min(820px, 88vw) !important;
  }
}


/* 🆕 v1.9.2-fix13 — Légende sur PC : layout multi-colonnes pour
   profiter de la largeur agrandie. Les sections (Puits / Accès /
   Signalétique / Tracés / Zones) se distribuent automatiquement. */
@media (min-width: 1024px) {
  .kta-legende-corps {
    columns: 2;
    column-gap: 36px;
    column-rule: 1px solid rgba(255, 255, 255, 0.06);
  }
  .kta-legende-corps .kta-aide-section {
    /* Ne JAMAIS couper une section au milieu (les lignes icône + label
       d'une même catégorie doivent rester groupées). */
    break-inside: avoid;
    page-break-inside: avoid;
    margin-bottom: 16px;
  }
}
@media (min-width: 1440px) {
  .kta-legende-corps {
    columns: 3;
  }
}
@media (min-width: 1920px) {
  .kta-legende-corps {
    columns: 4;
  }
}

/* ==============================================
   LÉGENDE — icônes et tracés
   ============================================== */

.kta-legende-ligne {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 4px 0;
}

.kta-legende-icone {
  width: 28px;
  height: 28px;
  object-fit: contain;
  flex-shrink: 0;
}

.kta-legende-trait {
  display: inline-block;
  width: 28px;
  height: 4px;
  border-radius: 2px;
  flex-shrink: 0;
}

.kta-legende-label {
  font-size: 13px;
  color: #c8d0e0;
  line-height: 1.3;
}


/* ==============================================
   CONVERTISSEUR JSON
   ============================================== */

.kta-conv-sens-wrap {
  display: flex;
  gap: 8px;
  margin-bottom: 16px;
}

.kta-conv-sens-btn {
  flex: 1;
  padding: 10px 12px;
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,0.1);
  background: rgba(255,255,255,0.04);
  color: #8892a4;
  cursor: pointer;
  text-align: center;
  transition: all 0.15s;
  font-family: Arial, sans-serif;
}

.kta-conv-sens-btn.active {
  background: #1a3a5c;
  border-color: #4d8aff;
  color: #e8eaf0;
}

.kta-conv-sens-btn:hover:not(.active) {
  background: rgba(255,255,255,0.08);
  color: #c8d0e0;
}

.kta-conv-sens-label {
  display: block;
  font-size: 13px;
  font-weight: 700;
  margin-bottom: 3px;
}

.kta-conv-sens-desc {
  display: block;
  font-size: 11px;
  opacity: 0.7;
  font-family: 'Courier New', monospace;
}

.kta-conv-champ {
  margin-bottom: 14px;
}

.kta-conv-label {
  display: block;
  font-size: 12px;
  color: #8892a4;
  margin-bottom: 6px;
}

.kta-conv-drop {
  border: 2px dashed rgba(255,255,255,0.12);
  border-radius: 8px;
  padding: 16px;
  text-align: center;
  cursor: pointer;
  font-size: 13px;
  color: #8892a4;
  transition: border-color 0.15s, background 0.15s;
}

.kta-conv-drop:hover,
.kta-conv-drop.dragover {
  border-color: #4d8aff;
  background: rgba(77,138,255,0.06);
  color: #8cb4ff;
}

.kta-conv-actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
  padding-top: 10px;
  border-top: 1px solid rgba(255,255,255,0.08);
  margin-top: 4px;
}

.kta-conv-erreur {
  margin-top: 10px;
  font-size: 12px;
  color: #ffb3b3;
  background: rgba(139,26,26,0.2);
  border-radius: 6px;
  padding: 8px 10px;
}


/* ══════════════════════════════════════════════
   SPLASH SCREEN — animation de bienvenue
   ══════════════════════════════════════════════ */

#splashOverlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  /* Rollback v1.9.2 fix6 (cover retiré) : gradient `at center` restauré
     pour l'effet "tunnel" original du splash. */
  background: radial-gradient(ellipse at center, #0a0d18 0%, #03050a 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 1;
  transition: opacity 0.4s ease-out;
  pointer-events: all;
}

#splashOverlay.fading {
  opacity: 0;
  pointer-events: none;
}

#splashBox {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  /* safe-area : le contenu (logo, titre, progress, signature) reste visible
     même si la status bar / notch / home indicator empiète sur le viewport.
     Le fond #splashOverlay s'étend jusqu'aux bords (effet "intégré"). */
  padding: calc(30px + env(safe-area-inset-top, 0px)) 40px calc(30px + env(safe-area-inset-bottom, 0px));
  max-width: 460px;
  width: 90%;
}

#splashCompassWrap {
  position: relative;
  width: 220px;
  height: 220px;
  display: flex;
  align-items: center;
  justify-content: center;
}

#splashLogo {
  width: 180px;
  height: 180px;
  object-fit: contain;
  background: transparent;
  animation: splashLogoIn 3.5s ease-out both;
  /* Halo jaune doux derrière la rose — réduit pour ne pas créer de "zone carrée" perceptible */
  filter: drop-shadow(0 0 18px rgba(244, 197, 66, 0.10));
}

/* Animation "boussole qui se calibre" :
   1) entrée rapide avec 1 tour de rotation (0-25%)
   2) oscillations amorties autour du nord (25-100%) — l'aiguille cherche son nord
   3) immobilisation à 0°
*/
@keyframes splashLogoIn {
  0%   { opacity: 0; transform: scale(0.55) rotate(-360deg); }
  25%  { opacity: 1; transform: scale(1.05) rotate(35deg);   }  /* swing : dépassement initial */
  45%  { opacity: 1; transform: scale(1.00) rotate(-15deg);  }  /* contre-swing */
  65%  { opacity: 1; transform: scale(1.00) rotate(7deg);    }  /* oscillation amortie */
  82%  { opacity: 1; transform: scale(1.00) rotate(-3deg);   }  /* plus faible */
  93%  { opacity: 1; transform: scale(1.00) rotate(1deg);    }  /* presque calibré */
  100% { opacity: 1; transform: scale(1.00) rotate(0deg);    }  /* nord trouvé */
}

#splashTitle {
  font-size: 36px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: #f4c542;
  margin-top: 22px;
  text-shadow: 0 2px 18px rgba(244, 197, 66, 0.25);
  animation: splashTextIn 0.6s ease-out 0.3s both;
}

#splashSubtitle {
  font-size: 14px;
  color: #8892a4;
  margin-top: 4px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  animation: splashTextIn 0.6s ease-out 0.45s both;
}

@keyframes splashTextIn {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* 🧭 v1.47.0 — Arc doré rotatif autour de la boussole = indicateur de
   chargement continu (remplace l'ancienne barre + échelle 0-100). Tourne
   tant que le splash est affiché ; l'entrée « calibrage » de la rose
   (splashLogoIn) tourne indépendamment les ~3.5 premières secondes. */
#splashSpinArc {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  transform-origin: center;
  animation: splashArcSpin 1.5s linear infinite;
}
#splashSpinArc circle {
  stroke: #f4c542;
  stroke-width: 2.5;
  opacity: 0.85;
  filter: drop-shadow(0 0 5px rgba(244, 197, 66, 0.45));
}

@keyframes splashArcSpin {
  from { transform: rotate(0deg);   }
  to   { transform: rotate(360deg); }
}

/* 👑 v1.47.0 — Crédit Claude (haut-gauche, seul) + version (haut-droite).
   Coins symétriques ; la boussole trône au centre. Teinte « clay » Claude
   #d97757 pour le crédit Claude (distinct du doré charte). */
#splashClaudeCorner {
  position: absolute;
  top: calc(18px + env(safe-area-inset-top, 0px));
  left: 22px;
  display: flex;
  align-items: center;
  gap: 9px;
  z-index: 2;
  user-select: none;
  pointer-events: none;
  animation: splashTextIn 0.7s ease-out 0.85s both;
}
.splash-claude-mark {
  font-size: 19px;
  line-height: 1;
  color: #d97757;
  text-shadow: 0 0 14px rgba(217, 119, 87, 0.4);
}
.splash-claude-text {
  display: flex;
  flex-direction: column;
  line-height: 1.25;
  text-align: left;
}
.splash-claude-main {
  font-size: 12px;
  font-weight: 600;
  color: #d97757;
  letter-spacing: 0.03em;
}
.splash-claude-sub {
  font-size: 10px;
  color: #8892a4;
  letter-spacing: 0.05em;
}

#splashVersion {
  position: absolute;
  top: calc(20px + env(safe-area-inset-top, 0px));
  right: 22px;
  font-size: 11px;
  color: #6c7689;
  letter-spacing: 0.06em;
  font-family: 'Courier New', monospace;
  z-index: 2;
  user-select: none;
  pointer-events: none;
  animation: splashTextIn 0.7s ease-out 0.85s both;
}

/* 🆕 v1.9.2-fix18 : #splashFooter retiré du DOM (orphelin après extraction
   de #splashLicense en absolute). Règle CSS gardée vide en commentaire au
   cas où on l'aurait raté quelque part — sinon elle ne s'applique plus. */
/* #splashFooter — n'existe plus dans le DOM. */

/* Règles #splashAuthor / .splash-by / #splashSignature retirées en fix15. */

/* 🆕 v1.9.2-fix18/fix2 (KARMA "Licence libre doit être plus bas, juste
   au-dessus de la signature et libs cités" + "elle est à droite, pas
   centrée") : licence positionnée en ABSOLUTE au bas du splash, juste
   au-dessus de la rangée KARMA + crédits libs (bottom 28px).

   ⚠️ FIX CENTRAGE : avant on utilisait `left: 50% + transform:
   translateX(-50%)`, mais l'animation `splashTextIn` redéfinit
   `transform: translateY(...)` ce qui ÉCRASE le translateX → l'élément
   se retrouve aligné à `left: 50%` SANS recentrage (= bord gauche au
   centre de l'écran, contenu pousse vers la droite).
   Solution : centrage via `left:0; right:0; text-align:center` →
   l'élément prend toute la largeur, le texte est centré dedans, et
   l'animation translateY peut faire son travail sans conflit. */
#splashLicense {
  position: absolute;
  /* 🆕 v1.43.20 — Remonté de 70px → 82px depuis que le crédit splash
     occupe 2 lignes (40px de hauteur au lieu de 20px). Sinon la 1re
     ligne des libs chevauchait avec "Édition pro / Licence active". */
  /* 🆕 v1.47.0 (KARMA) — Remonté du footer : centré dans le vide entre la
     tagline et le footer (libs/Karma). vh → se cale au milieu du gap quelle
     que soit la hauteur d'écran. Centrage horizontal inchangé (left/right 0). */
  bottom: calc(19vh + env(safe-area-inset-bottom, 0px));
  left: 0;
  right: 0;
  padding: 0 28px;
  box-sizing: border-box;
  font-size: 11px;
  color: #6c7689;
  line-height: 1.6;
  letter-spacing: 0.02em;
  text-align: center;
  user-select: none;
  pointer-events: none;
  /* Animation : apparaît avec un léger delay après le contenu central.
     `splashTextIn` applique translateY → pas de conflit avec left/right. */
  animation: splashTextIn 0.6s ease-out 1.0s both;
  z-index: 2;
}

.splash-license-detail {
  font-size: 10px;
  color: #555c6e;
  font-style: italic;
}

/* 🏷️ v1.28.3 — Variante "Édition professionnelle" du splash license.
   Visible UNIQUEMENT côté pro (Licence-pro.json détecté). Couleur ambre
   charte #f4c542 pour la ligne principale, sous-texte ambre + italique
   discret. La bascule est gérée par la classe .kta-instance-pro posée
   par js/proLicense.js sur <html>/<body>.

   ⚠️ Le sélecteur cible #splashLicense > .kta-licence-pro pour ne pas
   colorier en ambre la mention community (mêmes éléments enfants mais
   wrappés différemment). */
#splashLicense .kta-licence-pro {
  color: #f4c542;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-shadow: 0 0 16px rgba(244, 197, 66, 0.25);
}
.splash-license-detail-pro {
  color: rgba(244, 197, 66, 0.75) !important;
  font-style: italic;
  font-weight: 400 !important;
  letter-spacing: 0.01em;
}

/* 🆕 v1.47.0 — Licence en « pill » (chip bordé charte) au lieu du texte brut,
   cohérent avec la nouvelle identité du splash. Position bas-centre inchangée
   (#splashLicense reste absolute + text-align:center → le chip se centre).
   ⚠️ display scopé #splashLicense pour préserver la bascule community/pro
   (.kta-instance-pro) sans la casser. */
#splashLicense .kta-licence-community,
#splashLicense .kta-licence-pro {
  background: rgba(244, 197, 66, 0.10);
  border: 1px solid rgba(244, 197, 66, 0.30);
  border-radius: 14px;
  padding: 7px 16px;
  max-width: 270px;
}
#splashLicense .kta-licence-community { display: inline-block; }
html.kta-instance-pro #splashLicense .kta-licence-community,
body.kta-instance-pro #splashLicense .kta-licence-community { display: none; }
#splashLicense .kta-licence-pro { display: none; }
html.kta-instance-pro #splashLicense .kta-licence-pro,
body.kta-instance-pro #splashLicense .kta-licence-pro { display: inline-block; }
/* Ligne principale community en doré charte (accent), comme la maquette. */
#splashLicense .kta-licence-community > span:first-child {
  color: #f4c542;
  font-weight: 500;
}
/* Variant thème clair du pill. */
html.kta-theme-light #splashLicense .kta-licence-community,
html.kta-theme-light #splashLicense .kta-licence-pro {
  background: rgba(201, 153, 31, 0.12) !important;
  border-color: rgba(201, 153, 31, 0.40) !important;
}
html.kta-theme-light #splashLicense .kta-licence-community > span:first-child {
  color: #8b5a00 !important;
}
/* Variant thème clair (cf §53) */
html.kta-theme-light #splashLicense .kta-licence-pro,
body.kta-theme-light #splashLicense .kta-licence-pro {
  color: #b8860b;
  text-shadow: 0 0 16px rgba(184, 134, 11, 0.20);
}
html.kta-theme-light .splash-license-detail-pro,
body.kta-theme-light .splash-license-detail-pro {
  color: rgba(184, 134, 11, 0.80) !important;
}

/* 🆕 v1.9.2-fix15 — Signature KARMA en bas à droite du splash avec
   animation lettre-par-lettre via clip-path: inset() + steps().
   L'image karma.png est révélée de gauche à droite en 5 étapes
   discrètes = effet "K-A-R-M-A" qui apparaît tour à tour. Le délai
   initial (0.8s) laisse au logo + titre le temps d'apparaître avant
   l'entrée de la signature. */
#splashKarmaCorner {
  position: absolute;
  /* 🆕 v1.9.2-fix17 (KARMA "le karma sort du cadre sur bord arrondi") :
     décalage augmenté 14px → 28px pour ne plus être coupé par les coins
     arrondis de l'écran (iPhone PWA + écrans avec viewport bord-à-bord).
     Les safe-area-inset-{right,bottom} restent ajoutés pour les notches
     latéraux en landscape iPhone. */
  bottom: calc(28px + env(safe-area-inset-bottom, 0px));
  right: calc(28px + env(safe-area-inset-right, 0px));
  z-index: 2;
  pointer-events: none;
  user-select: none;
  /* Lueur dorée derrière la signature pour matérialiser sa présence
     même sur petit format (l'image est petite donc le glow l'agrandit
     visuellement sans grossir le rendu). */
  filter: drop-shadow(0 0 8px rgba(244, 197, 66, 0.45))
          drop-shadow(0 1px 3px rgba(0, 0, 0, 0.6));
}

#splashKarmaImg {
  /* Plus petite que l'ancien splashSignature (32px) — KARMA pivot. */
  height: 20px;
  width: auto;
  display: block;
  /* 🆕 v1.9.2-fix16 : animation lettre-par-lettre PLUS DOUCE (KARMA
     « arrivée des lettres plus douce »). Avant : steps(5, end) =
     5 jumps secs sans transition. Maintenant : 5 keyframes explicites
     avec courbe cubic-bezier(0.45, 0.05, 0.55, 0.95) (ease-in-out
     doux) entre chacune → la révélation glisse smooth d'une "lettre"
     à l'autre tout en gardant des paliers visibles. Durée totale
     allongée à 1.8s pour donner du poids visuel. */
  clip-path: inset(0 100% 0 0);
  animation: kta-splash-karma-reveal 1.8s cubic-bezier(0.45, 0.05, 0.55, 0.95) 0.8s forwards;
}

@keyframes kta-splash-karma-reveal {
  0%   { clip-path: inset(0 100% 0 0); }   /* tout caché */
  20%  { clip-path: inset(0 80%  0 0); }   /* K visible */
  40%  { clip-path: inset(0 60%  0 0); }   /* + A */
  60%  { clip-path: inset(0 40%  0 0); }   /* + R */
  80%  { clip-path: inset(0 20%  0 0); }   /* + M */
  100% { clip-path: inset(0 0    0 0); }   /* + A finale */
}

/* Quand le splash est en fade-out, la signature s'efface aussi (sinon
   elle resterait visible pendant le fade du parent). */
#splashOverlay.fading #splashKarmaCorner {
  opacity: 0;
  transition: opacity 0.3s ease-out;
}

/* Crédit Leaflet + JSZip + Dijkstra — petit, discret, en BAS À GAUCHE du
   splash (déplacé du centre dans fix15 pour libérer le bas-droit où
   s'affiche la signature KARMA animée). */
#splashLeafletCredit {
  position: absolute;
  /* 🆕 v1.9.2-fix17 : 14px → 28px (même raison que splashKarmaCorner :
     éviter le clip par les coins arrondis d'écran). Safe-area conservé
     pour notches latéraux. */
  bottom: calc(28px + env(safe-area-inset-bottom, 0px));
  left: calc(28px + env(safe-area-inset-left, 0px));
  font-size: 11px;
  color: #6c7689;
  letter-spacing: 0.02em;
  /* 🆕 v1.43.19 — Layout 2 lignes de 3 libs (KARMA "3 et en dessous 3").
     Le `<br>` HTML force le split. Hauteur 20px → 40px pour accueillir
     les 2 lignes. line-height: 20px par ligne. Logo KARMA (height: 20px)
     reste à bottom: 28px → aligné avec la 2e ligne du crédit, comme avant.
     `text-align: left` pour aligner les 2 lignes à gauche (pas centré
     sinon ça wobbles visuellement avec des longueurs de ligne différentes). */
  height: 40px;
  line-height: 20px;
  display: block;
  text-align: left;
  user-select: none;
  pointer-events: none;
  white-space: nowrap;
  /* Animation custom (opacity uniquement, pas de transform à conserver) */
  animation: splashLeafletFadeIn 0.6s ease-out 1.0s both;
}

@keyframes splashLeafletFadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* Mobile : adapter les tailles */
@media (max-width: 480px) {
  #splashLogo { width: 130px; height: 130px; }
  #splashTitle { font-size: 28px; margin-top: 18px; }
  #splashSubtitle { font-size: 12px; }
  #splashCompassWrap { width: 165px; height: 165px; }
  /* 🆕 v1.9.2-fix18 : #splashFooter retiré du DOM, règle obsolète
     supprimée. Le KARMA img + crédits gardent leurs paliers mobiles. */
  #splashKarmaImg { height: 18px; }
  #splashLeafletCredit {
    font-size: 10px;
    /* 🆕 v1.43.19 — Mobile : 2 lignes de 18px = 36px total.
       KARMA logo (18px) reste aligné avec la 2e ligne. */
    height: 36px;
    line-height: 18px;
  }
  /* 🆕 v1.43.20 — Mobile : remonté 56px → 78px (crédit splash 2 lignes = 36px). */
  #splashLicense { bottom: calc(19vh + env(safe-area-inset-bottom, 0px)); }
}

/* Mode paysage mobile : compact */
@media (max-height: 500px) and (orientation: landscape) {
  #splashLogo { width: 90px; height: 90px; }
  #splashTitle { font-size: 22px; margin-top: 12px; }
  #splashSubtitle { font-size: 10px; }
  #splashCompassWrap { width: 120px; height: 120px; }
  #splashKarmaImg { height: 16px; }
  #splashLeafletCredit {
    /* 🆕 v1.43.19 — Landscape compact : 2 lignes de 16px = 32px total. */
    height: 32px;
    line-height: 16px;
  }
  #splashLicense {
    font-size: 10px;
    /* 🆕 v1.43.20 — Landscape compact : remonté 46px → 70px (crédit 2 lignes = 32px). */
    bottom: calc(16vh + env(safe-area-inset-bottom, 0px));
  }
}

/* ==============================================
   LOADER — charte dark
   ============================================== */

#planLoaderOverlay {
  position: fixed;
  inset: 0;
  z-index: 5000;
  background: rgba(5, 8, 15, 0.92);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  /* 🆕 v1.9.2-fix12 (KARMA pivot) : padding overlay supprimé.
     « j'en veux pas, je veux le modal full sans noir autour du modal ».
     Le contenu (#planLoaderBox) prend désormais 100% de la viewport.
     Les safe-areas iOS sont gérées au niveau du PADDING INTERNE de la
     box (voir plus bas) → le contenu reste accessible sous le notch /
     home indicator, mais le fond #1a1f2e couvre toute la viewport
     y compris ces zones réservées. */
  padding: 0;
  box-sizing: border-box;
  overflow-y: auto;
}

#planLoaderBox {
  width: 100%;
  /* 🆕 v1.9.2-fix12 : plein écran sans bordure noire autour. Le cap
     ancien (520px mobile / 1100-2400px PC) est supprimé → la box prend
     100% de la viewport. */
  max-width: 100%;
  background: #1a1f2e;
  color: #e8eaf0;
  /* Pas de border-radius / border / box-shadow : la box couvre tout,
     ces décorations sont invisibles (coupées par le bord de l'écran)
     ou apparaissent juste comme un trait disgracieux au sommet. */
  border-radius: 0;
  border: none;
  box-shadow: none;
  /* Padding interne avec safe-area iOS UNIQUEMENT EN HAUT pour que le
     contenu (logo, titre, ...) reste sous le notch.
     🆕 v1.9.2-rollback2 (KARMA "réduit encore un peu") :
     padding-bottom 8→4px. Minimum acceptable pour ne pas coller au bord. */
  padding: calc(24px + env(safe-area-inset-top, 0px)) 24px 4px;
  box-sizing: border-box;
  font-family: Arial, sans-serif;
  margin: 0;
  /* 🆕 v1.9.2-fullscreen : `100dvh` au lieu de `100vh` pour iOS PWA
     avec cover. Le `100vh` reste en fallback pour iOS 15 et antérieur
     (déclaration en premier, écrasée par dvh si supporté). */
  min-height: 100vh;
  min-height: 100dvh;
}

/* ===== Loader-grid : layout vertical mobile/tablette (≤ 1023px),
   devient un grid 60/40 sur desktop (≥ 1024px).

   🆕 v1.8.0 fix : remplacement de `display: contents` par
   `display: flex; flex-direction: column;`.

   Pourquoi : `display: contents` rend le wrapper "transparent" (les
   enfants se comportent comme s'ils étaient dans le parent direct).
   C'est élégant mais a des bugs subtils de re-évaluation lors des
   transitions de viewport (rotation landscape→portrait notamment sur
   Safari iOS) : certaines propriétés héritées du parent peuvent ne
   pas se réappliquer correctement au flow flex/grid lorsqu'on passe
   d'un display: grid (PC) à un display: contents (mobile).

   Bug observé : drag d'un ZIP en portrait → rotation landscape →
   retour portrait → l'aperçu/le bouton Charger restait à la taille
   landscape au lieu de reprendre la largeur 100% mobile.

   Fix : flex column ne provoque PAS de différence visuelle vs contents
   (les enfants sont empilés verticalement dans les 2 cas), mais
   s'évalue de manière déterministe à chaque resize → pas de bug
   silencieux. ===== */
.loader-grid {
  display: flex;
  flex-direction: column;
  gap: 0;
}

@media (min-width: 1024px) {
  /* 🆕 v1.9.2-fix12 : box full edge-to-edge sans cap max-width.
     Padding horizontal interne augmenté pour respirer sur les côtés
     du contenu sans repousser la box elle-même. */
  #planLoaderBox {
    padding-left: 56px;
    padding-right: 56px;
  }

  .loader-grid {
    display: grid;
    /* 🆕 v1.40.0 — Passe de 2 cols (3fr 2fr) à 3 cols (2fr 3fr 2fr) pour
       intégrer la mini-carte 🌍 Vue OSM au milieu. La colonne OSM
       reçoit plus de poids car elle contient une carte interactive
       (besoin d'espace) ; Plans/Actions plus compacts mais ça reste
       lisible. Mobile (<1024px) : pile verticale comme avant. */
    grid-template-columns: 2fr 3fr 2fr;
    gap: 0 24px;
    align-items: start;
    margin-top: 4px;
  }

  /* Colonnes : pas de style spécifique, juste container des sections */
  .loader-col {
    min-width: 0;  /* Empêche les enfants overflow de pousser le grid */
  }

  /* Liste des plans : permet un scroll interne si beaucoup de plans
     (sinon la colonne droite finit en bas pendant que la gauche
     s'étend à l'infini). Hauteur max alignée sur la fenêtre. */
  .loader-col-plans .loader-plans-list {
    max-height: calc(100vh - 320px);
    overflow-y: auto;
  }

  /* "Plus d'options" toujours déplié sur PC (on a la place) — override le
     state JS qui peut être en "fermé" sur mobile. Pas de chevron, pas de
     curseur de toggle pour signaler que c'est figé ouvert. */
  #advancedBox {
    display: flex !important;
  }

  #advancedHead {
    cursor: default;
  }

  #advancedHead .loader-collapse-chevron {
    display: none;
  }

  /* 🆕 v1.9.2 — Loader PC plus "fullscreen" (KARMA feedback :
     « avoir une sorte de full screen » / « éviter tout ce noir autour »).
     Itéré (KARMA "toujours du noir juste plus alongé") : on rend
     l'effet plus marqué :
       1. Pattern de points dorés opacity bumpée 0.035 → 0.07 (= visible
          au lieu de quasi invisible)
       2. Radial gradient avec centre plus clair (rgba(...,0.85)) pour
          un vrai effet "puits de lumière" perceptible
       3. Box loader étiré en HAUTEUR pour prendre presque tout l'écran
          → plus de noir au-dessus / en-dessous
     RÈGLE : ne s'applique QUE sur PC (≥1024px) — mobile inchangé. */
  #planLoaderOverlay {
    background-color: #050810;
    background-image:
      radial-gradient(circle, rgba(244, 197, 66, 0.07) 1px, transparent 1px),
      radial-gradient(ellipse 1400px 900px at center,
        rgba(38, 55, 88, 0.85) 0%,
        rgba(12, 18, 32, 0.96) 55%,
        rgba(5, 8, 15, 1) 100%);
    background-size: 28px 28px, 100% 100%;
    background-position: center center, center center;
    background-repeat: repeat, no-repeat;
    /* Aligner le contenu en haut au lieu de center → box prend la hauteur
       (et plus de noir résiduel au-dessus). */
    align-items: stretch;
  }

  /* 🆕 v1.9.2-fix12 : la box prend 100vh défini dans la base CSS
     (cf. plus haut). Ici on ajoute juste le flex-column pour la
     distribution interne (resume / grid / footer). PAS de border /
     box-shadow ajoutés (box edge-to-edge, ces décorations ne sont
     pas visibles). */
  #planLoaderBox {
    display: flex;
    flex-direction: column;
  }

  /* La loader-grid (2 cols) prend le RESTE de la hauteur disponible
     dans la box, après header / resume / status / badge / footer.
     Sans ça, elle restait à sa hauteur naturelle (~400px) et le bas
     de la box était vide.
     align-items: stretch override le `start` plus haut → les 2 colonnes
     remplissent maintenant la hauteur du grid (sans ça, les flex internes
     ne peuvent pas grandir car leur parent n'a pas de hauteur définie). */
  .loader-grid {
    flex: 1 1 auto;
    min-height: 0;
    align-items: stretch;
  }

  /* La liste des plans peut prendre toute la hauteur dispo dans sa col
     (override la valeur fixe calc(100vh - 320px) de plus bas). */
  .loader-col-plans .loader-plans-list {
    max-height: none;
    height: 100%;
    min-height: 0;
  }
  .loader-col-plans {
    display: flex;
    flex-direction: column;
  }
  .loader-col-plans #myPlansBox {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    min-height: 0;
  }

  /* Colonne ACTIONS (droite) — KARMA itéré v1.9.2-fix11 :
     « le glisser déposer du zip est bien trop grand, il garde sa taille
     initiale, mais marge suffisante pour garder en bas le bouton de
     charger ce plan et Générer un plan ».
     Layout :
       - section-head au top (Ajouter un plan)
       - panelZip prend l'espace restant (flex:1) avec drop-zone à sa
         TAILLE NATURELLE en haut, puis "Charger ce plan" pinned en
         bas via margin-top: auto à l'intérieur de panelZip
       - loader-secondary-actions (Générer un plan) juste sous panelZip
     Résultat : drop zone compacte au top, gros gap d'air visuel au
     milieu, deux boutons "Charger / Générer" alignés en bas. */
  .loader-col-actions {
    display: flex;
    flex-direction: column;
  }
  .loader-col-actions #panelZip {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    /* PAS de flex: 1 1 auto sur .zip-drop-zone (retiré du fix9 qui le
       faisait grandir disgracieusement). La drop zone garde sa taille
       naturelle définie par son style de base. */
  }
  .loader-col-actions #panelZip .loaderActions {
    /* "Charger ce plan" pinned en bas de panelZip via auto margin.
       Les éléments qui le précèdent (drop zone, fileName, hints) restent
       au top dans leur flow naturel. L'espace vide entre eux et le bouton
       est l'effet voulu = aération visuelle. */
    margin-top: auto;
  }
  /* 🆕 v1.40.0 — Colonne OSM (centre) : occupe la hauteur dispo,
     mini-carte stretch sur tout le restant. */
  .loader-col-osm {
    display: flex;
    flex-direction: column;
  }
  .loader-col-osm .kta-osm-home-box {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    min-height: 0;
  }
  .loader-col-osm .kta-osm-home-content {
    flex: 1 1 auto;
    min-height: 280px;
  }

  /* 🆕 v1.40.1 — Si l'user n'a pas opt-in OSM, la colonne OSM est masquée
     (cf js/osmHomePreview.js > _setOsmColumnVisible). On rebascule alors
     le grid PC sur les anciennes proportions 2 cols (3fr 2fr) pour ne pas
     laisser un trou visuel ni un layout déséquilibré. Cohérent avec la
     philo offline-first : aucune trace du widget OSM si pas autorisé. */
  .loader-grid.kta-no-osm {
    grid-template-columns: 3fr 2fr;
  }
}

/* 🆕 v1.40.0 — Widget Vue OSM HOME (mini-preview entre Mes plans et Ajouter) */
.kta-osm-home-box {
  margin-bottom: 14px;
}
.kta-osm-home-content {
  display: flex;
  flex-direction: column;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(244, 197, 66, 0.18);
  border-radius: 8px;
  /* 🆕 v1.40.22 — overflow: visible (était hidden) pour que les popups Leaflet
     POI ne soient pas clippées par le container. Trade-off : si un enfant
     déborde, il n'aura pas le coin arrondi clippé, mais c'est négligeable car
     les coins arrondis du container restent visibles (rien ne déborde en
     mode normal — seul le popup peut sortir, ponctuel). */
  overflow: visible;
  min-height: 260px;
}
.kta-osm-home-loading,
.kta-osm-home-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 200px;
  padding: 20px;
  text-align: center;
  font-size: 13px;
  color: #8892a4;
  flex-direction: column;
  gap: 10px;
}
.kta-osm-home-empty strong { color: #e8eaf0; }
.kta-osm-home-empty .kta-osm-home-cta {
  margin-top: 6px;
  padding: 6px 14px;
  font-size: 12px;
  background: #f4c542;
  color: #1a1f2e;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  font-weight: 600;
}
.kta-osm-home-empty .kta-osm-home-cta:hover { filter: brightness(1.1); }
.kta-osm-home-bandeau {
  display: flex;
  gap: 8px;
  align-items: center;
  padding: 6px 10px;
  background: rgba(140, 180, 255, 0.06);
  border-bottom: 1px solid rgba(140, 180, 255, 0.18);
  font-size: 12px;
  color: #c8d0e0;
  flex-wrap: wrap;
}
.kta-osm-home-bandeau select {
  flex: 1 1 auto;
  min-width: 100px;
  padding: 3px 6px;
  font-size: 12px;
  background: rgba(255, 255, 255, 0.04);
  color: #e8eaf0;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 4px;
  cursor: pointer;
}
.kta-osm-home-bandeau select option { background: #1a1f2e; color: #e8eaf0; }
.kta-osm-home-bandeau .kta-osm-home-fullscreen {
  padding: 3px 8px;
  font-size: 13px;
  background: rgba(244, 197, 66, 0.12);
  color: #f4c542;
  border: 1px solid rgba(244, 197, 66, 0.35);
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.15s;
}
.kta-osm-home-bandeau .kta-osm-home-fullscreen:hover {
  background: #f4c542;
  color: #1a1f2e;
}
/* 🆕 v1.43.9 — Layout mobile widget OSM Home (KARMA "icône agrandir passe à
 * la ligne sur mobile") : sur petit écran, on force le sélecteur de plan
 * à prendre toute la largeur (= ligne 1 seul), puis le slider opacité et
 * les 3 boutons (📍 GPS, 💾 Save Offline, ⛶ Plein écran) se groupent
 * proprement sur la ligne 2 grâce au flex-wrap déjà actif. Aucun
 * changement sur PC (largeur ≥ 601 px). */
@media (max-width: 600px) {
  .kta-osm-home-bandeau select {
    flex: 1 1 100%;
    min-width: 0;
  }
  /* Centre les contrôles secondaires sur la 2e ligne pour un rendu propre */
  .kta-osm-home-bandeau {
    justify-content: flex-start;
  }
}
.kta-osm-home-map {
  flex: 1 1 auto;
  min-height: 220px;
  background: #0a0d18;
}
.kta-osm-home-footer {
  padding: 4px 10px;
  font-size: 10.5px;
  color: #8892a4;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  text-align: center;
}

/* 🆕 v1.40.12 — 2e ligne du bandeau : toggles catégorie compactés */
.kta-osm-home-toggles {
  display: flex;
  gap: 8px;
  align-items: center;
  padding: 4px 10px;
  background: rgba(140, 180, 255, 0.04);
  border-bottom: 1px solid rgba(140, 180, 255, 0.12);
  flex-wrap: wrap;
}
.kta-osm-home-toggle {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  cursor: pointer;
  user-select: none;
  color: #c8d0e0;
}
.kta-osm-home-toggle input[type="checkbox"] {
  margin: 0;
  cursor: pointer;
}
.kta-osm-home-toggle:hover { color: #e8eaf0; }
/* Thème clair : toggles lisibles sur fond clair */
body.kta-theme-light .kta-osm-home-toggles,
html.kta-theme-light .kta-osm-home-toggles {
  background: rgba(140, 180, 255, 0.08) !important;
  border-bottom-color: rgba(140, 180, 255, 0.18) !important;
}
body.kta-theme-light .kta-osm-home-toggle,
html.kta-theme-light .kta-osm-home-toggle {
  color: var(--kta-light-text, #2a2620) !important;
}

/* 🆕 v1.40.17 — 3e ligne du bandeau : filtre par tag (chips cliquables) */
.kta-osm-home-tagrow {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  background: rgba(140, 180, 255, 0.03);
  border-bottom: 1px solid rgba(140, 180, 255, 0.10);
  max-height: 60px;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: thin;
}
.kta-osm-home-tagrow-label {
  font-size: 12px;
  opacity: 0.6;
  flex-shrink: 0;
}
.kta-osm-home-tagchips {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
  align-items: center;
}
.kta-osm-home-tag-chip {
  font-size: 10.5px;
  padding: 2px 7px;
  border-radius: 10px;
  border: 1px solid rgba(140, 180, 255, 0.25);
  background: rgba(255, 255, 255, 0.03);
  color: #8892a4;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.15s ease;
}
.kta-osm-home-tag-chip:hover {
  border-color: rgba(140, 180, 255, 0.5);
  color: #e8eaf0;
}
.kta-osm-home-tag-chip.active {
  background: rgba(244, 197, 66, 0.18);
  border-color: rgba(244, 197, 66, 0.55);
  color: #f4c542;
}
body.kta-theme-light .kta-osm-home-tagrow,
html.kta-theme-light .kta-osm-home-tagrow {
  background: rgba(140, 180, 255, 0.06) !important;
  border-bottom-color: rgba(140, 180, 255, 0.16) !important;
}
body.kta-theme-light .kta-osm-home-tag-chip,
html.kta-theme-light .kta-osm-home-tag-chip {
  background: rgba(255, 255, 255, 0.5) !important;
  border-color: rgba(0, 0, 0, 0.15) !important;
  color: var(--kta-light-text-secondary, #5a4f40) !important;
}
body.kta-theme-light .kta-osm-home-tag-chip.active,
html.kta-theme-light .kta-osm-home-tag-chip.active {
  background: rgba(244, 197, 66, 0.25) !important;
  border-color: rgba(180, 130, 30, 0.6) !important;
  color: #6b4a10 !important;
}

/* 🆕 v1.40.22 — Popup POI Vue OSM (modale + widget HOME) : charte dark cohérente.
   Cible la classe "kta-osm-popup" passée via bindPopup({ className: "kta-osm-popup" }).
   Override le default Leaflet (fond blanc, ombre soft) pour matcher #1a1f2e + accent jaune. */
.leaflet-popup.kta-osm-popup .leaflet-popup-content-wrapper {
  background: #1a1f2e;
  color: #e8eaf0;
  border: 1px solid rgba(244, 197, 66, 0.35);
  border-radius: 8px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.6);
  padding: 2px 4px;
}
.leaflet-popup.kta-osm-popup .leaflet-popup-content {
  margin: 8px 12px;
  font-family: inherit;
  font-size: 13px;
  line-height: 1.45;
  color: #e8eaf0;
}
.leaflet-popup.kta-osm-popup .leaflet-popup-content b {
  color: #f4c542;
  font-weight: 600;
}
.leaflet-popup.kta-osm-popup .leaflet-popup-content span {
  color: #c8d0e0;
}
.leaflet-popup.kta-osm-popup .leaflet-popup-tip {
  background: #1a1f2e;
  border-left: 1px solid rgba(244, 197, 66, 0.35);
  border-bottom: 1px solid rgba(244, 197, 66, 0.35);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.6);
}
.leaflet-popup.kta-osm-popup .leaflet-popup-close-button {
  color: #8892a4;
  padding: 6px 8px;
  font-size: 18px;
  transition: color 0.15s;
}
.leaflet-popup.kta-osm-popup .leaflet-popup-close-button:hover {
  color: #f4c542;
  background: transparent;
}
/* Variant thème clair : fond beige charte, accent or sombre */
body.kta-theme-light .leaflet-popup.kta-osm-popup .leaflet-popup-content-wrapper,
html.kta-theme-light .leaflet-popup.kta-osm-popup .leaflet-popup-content-wrapper {
  background: var(--kta-light-bg-elevated, #f5ecd6) !important;
  color: var(--kta-light-text, #2a2620) !important;
  border-color: rgba(180, 130, 30, 0.4) !important;
}
body.kta-theme-light .leaflet-popup.kta-osm-popup .leaflet-popup-content,
html.kta-theme-light .leaflet-popup.kta-osm-popup .leaflet-popup-content {
  color: var(--kta-light-text, #2a2620) !important;
}
body.kta-theme-light .leaflet-popup.kta-osm-popup .leaflet-popup-content b,
html.kta-theme-light .leaflet-popup.kta-osm-popup .leaflet-popup-content b {
  color: #8b6a14 !important;
}
body.kta-theme-light .leaflet-popup.kta-osm-popup .leaflet-popup-content span,
html.kta-theme-light .leaflet-popup.kta-osm-popup .leaflet-popup-content span {
  color: var(--kta-light-text-secondary, #5a4f40) !important;
}
body.kta-theme-light .leaflet-popup.kta-osm-popup .leaflet-popup-tip,
html.kta-theme-light .leaflet-popup.kta-osm-popup .leaflet-popup-tip {
  background: var(--kta-light-bg-elevated, #f5ecd6) !important;
  border-left-color: rgba(180, 130, 30, 0.4) !important;
  border-bottom-color: rgba(180, 130, 30, 0.4) !important;
}

/* 🆕 v1.40.1 — Variants thème clair pour le widget Vue OSM HOME.
   Bug KARMA v1.40.0 : le footer "🔒 Tiles : tile.openstreetmap.org · ⛶ …"
   utilisait color:#8892a4 + border rgba(255,255,255,0.06) → quasi invisible
   sur fond clair (texte gris muet + bordure blanche sur fond beige clair).
   Variants exposent via les vars --kta-light-* (cf §53 pattern thème clair). */
body.kta-theme-light .kta-osm-home-content,
html.kta-theme-light .kta-osm-home-content {
  background: var(--kta-light-bg-elevated, #fdf8eb) !important;
  border-color: var(--kta-light-border, rgba(0,0,0,0.12)) !important;
}
body.kta-theme-light .kta-osm-home-bandeau,
html.kta-theme-light .kta-osm-home-bandeau {
  background: rgba(140, 180, 255, 0.10) !important;
  color: var(--kta-light-text, #2a2620) !important;
  border-bottom-color: rgba(140, 180, 255, 0.30) !important;
}
body.kta-theme-light .kta-osm-home-bandeau select,
html.kta-theme-light .kta-osm-home-bandeau select {
  background: var(--kta-light-bg, #fffaee) !important;
  color: var(--kta-light-text, #2a2620) !important;
  border-color: var(--kta-light-border, rgba(0,0,0,0.18)) !important;
}
body.kta-theme-light .kta-osm-home-bandeau select option,
html.kta-theme-light .kta-osm-home-bandeau select option {
  background: var(--kta-light-bg, #fffaee) !important;
  color: var(--kta-light-text, #2a2620) !important;
}
body.kta-theme-light .kta-osm-home-bandeau .kta-osm-home-fullscreen,
html.kta-theme-light .kta-osm-home-bandeau .kta-osm-home-fullscreen {
  /* Le bouton ⛶ garde son look ambre (couleur d'accent kta charte),
     fonctionne bien sur clair comme sombre — pas d'override nécessaire. */
  background: rgba(244, 197, 66, 0.25) !important;
  color: #8a6a14 !important; /* version assombrie du jaune charte pour lisibilité */
  border-color: rgba(244, 197, 66, 0.55) !important;
}
body.kta-theme-light .kta-osm-home-footer,
html.kta-theme-light .kta-osm-home-footer {
  color: var(--kta-light-text, #5a4a30) !important;
  border-top-color: var(--kta-light-border, rgba(0,0,0,0.10)) !important;
}
body.kta-theme-light .kta-osm-home-empty,
html.kta-theme-light .kta-osm-home-empty,
body.kta-theme-light .kta-osm-home-loading,
html.kta-theme-light .kta-osm-home-loading {
  color: var(--kta-light-text, #5a4a30) !important;
}
body.kta-theme-light .kta-osm-home-empty strong,
html.kta-theme-light .kta-osm-home-empty strong {
  color: var(--kta-light-text, #2a2620) !important;
}

/* 🆕 v1.40.2 — Plein écran inline (overlay full-viewport)
   Toggle via classe sur #ktaOsmHomeBox depuis openFullScreen().
   Avantages vs Fullscreen API native : marche partout (iOS Safari OK),
   pas de permission, pas de bascule de mode, escape pour quitter. */
.kta-osm-home-box.kta-osm-home-fullscreen-active {
  position: fixed !important;
  inset: 0 !important;
  z-index: 9999 !important;
  margin: 0 !important;
  background: #0a0d18 !important;
  border-radius: 0 !important;
  display: flex !important;
  flex-direction: column !important;
}
.kta-osm-home-box.kta-osm-home-fullscreen-active .loader-section-head {
  padding: 10px 16px !important;
  background: rgba(0, 0, 0, 0.55) !important;
  border-bottom: 1px solid rgba(244, 197, 66, 0.18) !important;
  flex: 0 0 auto;
}
.kta-osm-home-box.kta-osm-home-fullscreen-active .kta-osm-home-content {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  border-radius: 0 !important;
  border: none !important;
  display: flex !important;
  flex-direction: column !important;
}
.kta-osm-home-box.kta-osm-home-fullscreen-active .kta-osm-home-map {
  flex: 1 1 auto !important;
  min-height: 0 !important;
}
/* Le bouton ⛶ devient ✕ visuellement, on le rend un peu plus visible
   en fullscreen pour faciliter le retour. */
.kta-osm-home-box.kta-osm-home-fullscreen-active .kta-osm-home-fullscreen {
  padding: 6px 12px;
  font-size: 14px;
  font-weight: 700;
}
/* 🆕 v1.43.15 — En fullscreen, position du bouton ⛶ / ✕ (= #ktaOsmHomeFullBtn)
 * en haut à droite, plus visible et intuitif (KARMA "croix à une position pas
 * intuitive"). On le sort du flow flex pour le coller au coin de l'écran.
 * 🐛 v1.43.16 — KARMA "la croix est trop grosse" : padding 10×14 → 4×9,
 * font 18 → 13 (= taille bouton standard du bandeau, juste mieux placé). */
.kta-osm-home-box.kta-osm-home-fullscreen-active #ktaOsmHomeFullBtn {
  position: fixed;
  top: 10px;
  right: 10px;
  z-index: 10001;
  padding: 4px 9px;
  font-size: 13px;
  font-weight: 700;
  background: rgba(244, 197, 66, 0.95);
  color: #1a1f2e;
  border: 1px solid rgba(244, 197, 66, 1);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.35);
  border-radius: 5px;
}
.kta-osm-home-box.kta-osm-home-fullscreen-active #ktaOsmHomeFullBtn:hover {
  background: #f4c542;
}
/* Empêche le scroll du body pendant le fullscreen (sinon Leaflet wheel
   peut faire défiler la page derrière). */
body.kta-osm-home-fs-lock { overflow: hidden; }

/* Thème clair adapté */
body.kta-theme-light .kta-osm-home-box.kta-osm-home-fullscreen-active,
html.kta-theme-light .kta-osm-home-box.kta-osm-home-fullscreen-active {
  background: var(--kta-light-bg, #fffaee) !important;
}
body.kta-theme-light .kta-osm-home-box.kta-osm-home-fullscreen-active .loader-section-head,
html.kta-theme-light .kta-osm-home-box.kta-osm-home-fullscreen-active .loader-section-head {
  background: rgba(255, 255, 255, 0.65) !important;
  color: var(--kta-light-text, #2a2620) !important;
}

/* 🆕 v1.40.3 — Fixes thème clair HOME déplacés en fin de fichier (v1.40.5)
   pour gagner en spécificité d'ordre — voir bloc en fin de style.css. */

/* 🆕 v1.9.2 — Loader PC LARGE ≥ 1440px : padding latéral plus généreux
   (la box reste full edge-to-edge). */
@media (min-width: 1440px) {
  #planLoaderBox {
    padding-left: 64px;
    padding-right: 64px;
  }
  .loader-grid {
    gap: 0 56px;
  }
  .loader-col-plans .loader-plans-list {
    /* Hauteur scroll mieux adaptée à la grandeur écran */
    max-height: calc(100vh - 340px);
  }
  /* Resume button : éviter qu'il devienne aride en pleine largeur sur
     écran large. Limité à 900px et centré dans son conteneur. */
  #resumeBox {
    max-width: 900px;
    margin-left: auto;
    margin-right: auto;
  }
}

/* 🆕 v1.9.2 — Loader PC ULTRA-LARGE ≥ 1920px : padding latéral maxi. */
@media (min-width: 1920px) {
  #planLoaderBox {
    padding-left: 96px;
    padding-right: 96px;
  }
  .loader-grid {
    gap: 0 72px;
  }
  /* Resume button : limite légèrement plus large sur ultra-wide */
  #resumeBox {
    max-width: 1000px;
  }
}

.loader-header {
  margin-bottom: 22px;
  padding-bottom: 16px;
  border-bottom: 1px solid rgba(244, 197, 66, 0.18);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

/* 🎨 v1.7.3 : Titre stylisé du loader — refonte D validée KARMA.
   Lockup : logo rose des vents (mkm-full.png) + bloc texte (nom + tagline).
   Cohérent avec le splash (même logo) et la charte (accent jaune #f4c542).

   Bonus déco activés (tous les 3 — KARMA "deco toute") :
     a) Drop-shadow jaune accent autour du logo (effet "halo souterrain")
     b) Hover pulse subtil 1.02× sur tout le lockup (signature dev tool)
     c) Taille augmentée sur PC ≥ 1024px (logo 44px / nom 22px / tag 13px)
        au lieu de 36 / 18 / 11px en mobile */
.loader-titre {
  display: flex;
  align-items: center;
  gap: 12px;
  transition: transform 0.2s ease;
  cursor: default;     /* pas de main : le titre n'est pas cliquable */
}
.loader-titre:hover {
  transform: scale(1.02);
}

.loader-titre-logo {
  width: 36px;
  height: 36px;
  flex-shrink: 0;
  object-fit: contain;
  /* Halo jaune doux — rappel splash (cf icon mkm-full = rose des vents jaune
     charte). Subtle mais marque l'identité visuellement. */
  filter: drop-shadow(0 0 10px rgba(244, 197, 66, 0.35))
          drop-shadow(0 0 4px rgba(244, 197, 66, 0.20));
  user-select: none;
  -webkit-user-drag: none;
}

.loader-titre-textes {
  display: flex;
  flex-direction: column;
  line-height: 1.15;
  min-width: 0;        /* permet truncate sur très petit écran */
}

.loader-titre-nom {
  font-size: 18px;
  font-weight: 700;
  color: #e8eaf0;
  letter-spacing: 0.03em;
  white-space: nowrap;
  /* Léger glow blanc pour lisibilité sur fond foncé + cohérence avec halo */
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.45);
}

.loader-titre-tagline {
  font-size: 11px;
  color: #f4c542;
  opacity: 0.75;
  font-style: italic;
  letter-spacing: 0.06em;
  margin-top: 2px;
  white-space: nowrap;
  /* Mise en valeur subtile : jaune accent + italique petit */
}

/* PC ≥ 1024px : titre plus généreux pour profiter de l'espace dispo
   (le loader y est en 1100px max, on a la place) */
@media (min-width: 1024px) {
  .loader-titre-logo {
    width: 44px;
    height: 44px;
    filter: drop-shadow(0 0 14px rgba(244, 197, 66, 0.40))
            drop-shadow(0 0 6px rgba(244, 197, 66, 0.22));
  }
  .loader-titre-nom {
    font-size: 22px;
    letter-spacing: 0.04em;
  }
  .loader-titre-tagline {
    font-size: 13px;
    letter-spacing: 0.08em;
  }
}

.loader-btn-help {
  background: rgba(140,180,255,0.08);
  border: 1px solid rgba(140,180,255,0.2);
  color: #8cb4ff;
  font-size: 16px;
  width: 32px;
  height: 32px;
  border-radius: 6px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  flex-shrink: 0;
  transition: all 0.15s;
}
.loader-btn-help:hover {
  background: rgba(140,180,255,0.18);
  border-color: rgba(140,180,255,0.5);
  color: #e8eaf0;
}

/* 🔒 v1.14.11 — Bouton Verrouiller (remplace 🔌 Arrêt v1.14.8 retiré).
   Accent bleu charte (action neutre/sécurité, pas destructive) — cohérent
   avec la palette des autres .loader-btn-help. Hover marqué pour confirmer
   l'intention avant la modale de confirmation. */
.loader-btn-help.loader-btn-lock {
  background: rgba(140, 180, 255, 0.10);
  border-color: rgba(140, 180, 255, 0.35);
  color: #aac6ff;
}
.loader-btn-help.loader-btn-lock:hover {
  background: rgba(140, 180, 255, 0.22);
  border-color: rgba(140, 180, 255, 0.60);
  color: #e8eaf0;
}
/* v1.14.15 (KARMA « je vois pas le fond blanc pour verouiller ») :
   le bouton lock apparaissait en ambre permanent à cause du sticky :hover
   sur mobile (après tap, le :hover reste collé jusqu'à un tap ailleurs).
   Fix global : on neutralise aussi explicitement focus/active pour ce
   bouton ET on déplace le :hover ambre dans @media (hover: hover) (cf
   plus bas dans ce fichier) pour qu'il ne s'active que sur les devices
   avec un vrai pointeur (mouse, trackpad), pas sur tactile. */
body.kta-theme-light .loader-btn-help.loader-btn-lock:focus,
body.kta-theme-light .loader-btn-help.loader-btn-lock:active,
html.kta-theme-light .loader-btn-help.loader-btn-lock:focus,
html.kta-theme-light .loader-btn-help.loader-btn-lock:active {
  background: #ffffff !important;
  color: var(--kta-light-text) !important;
  border: 1px solid var(--kta-light-border-strong) !important;
}

/* Conteneur des boutons utilitaires du header loader (🚨 alerte + 📖 doc).
   Gap volontairement faible pour les coller visuellement. */
.loader-header-actions {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
}

/* 🌍 v1.46.0 — Sélecteur de langue GLOBALE dans la modale Configuration
   (déplacé du header HOME — KARMA). Ligne label + select, charte dark, avec
   variante thème clair. Options peuplées par JS depuis I18n.available(). */
.kta-cfg-lang-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}
.kta-cfg-lang-label {
  font-size: 14px;
  font-weight: 600;
  color: #e8eaf0;
}
.kta-cfg-lang-select {
  height: 36px;
  min-width: 160px;
  background: rgba(140,180,255,0.08);
  border: 1px solid rgba(140,180,255,0.25);
  color: #e8eaf0;
  border-radius: 6px;
  font-size: 14px;
  padding: 0 10px;
  cursor: pointer;
  outline: none;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.kta-cfg-lang-select:hover {
  background: rgba(140,180,255,0.16);
  border-color: rgba(140,180,255,0.5);
}
.kta-cfg-lang-hint {
  font-size: 11.5px;
  color: #8892a4;
  margin-top: 8px;
  line-height: 1.5;
  padding: 0 4px;
}
/* 🆕 v1.46.4 (audit P3-LOW #5) : variante thème clair du hint langue (était
   #8892a4 → trop pâle/illisible sur le fond crème). Aligné sur le muted clair. */
body.kta-theme-light .kta-cfg-lang-hint,
html.kta-theme-light .kta-cfg-lang-hint { color: var(--kta-light-text-muted, #6b6354); }
body.kta-theme-light .kta-cfg-lang-label,
html.kta-theme-light .kta-cfg-lang-label { color: #2a2118; }
body.kta-theme-light .kta-cfg-lang-select,
html.kta-theme-light .kta-cfg-lang-select {
  background: rgba(30,95,153,0.08);
  border-color: rgba(30,95,153,0.35);
  color: #1e5f99;
}
/* 🌍 v1.46.3 — Lisibilité des OPTIONS du menu déroulant langue (HOME
   .kta-cfg-lang-select + PLAN .kta-cfg-input). Le popup natif <option>
   héritait d'un fond quasi-transparent → texte clair sur fond clair =
   illisible. On force un fond solide contrasté (dark + variante claire). */
.kta-cfg-lang-select option,
.kta-cfg-input option {
  background: #1a1f2e;
  color: #e8eaf0;
}
body.kta-theme-light .kta-cfg-lang-select option,
html.kta-theme-light .kta-cfg-lang-select option,
body.kta-theme-light .kta-cfg-input option,
html.kta-theme-light .kta-cfg-input option {
  background: #f5edda;
  color: #2a2118;
}

/* 🌍 En-têtes de groupe de la refonte config (.kta-cfg-group-titre). Le style
   est posé en INLINE avec color:#f4c542 (jaune charte) → illisible sur le fond
   crème du thème clair (~1.4:1, sous WCAG AA). On override la couleur en clair
   vers l'accent foncé (!important requis pour battre l'inline). Le dark garde le
   jaune (lisible sur fond sombre). Cf docs/audits/2026-06-14_audit-i18n-langue-v1 (C1). */
body.kta-theme-light .kta-cfg-group-titre,
html.kta-theme-light .kta-cfg-group-titre {
  color: var(--kta-light-accent-hover, #d9a82e) !important;
}

/* === 🚀 Mode Performance ULTRA — toggles dans la modale Réglages === */
.kta-perf-ultra-row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 8px 10px;
  margin-bottom: 4px;
  border-radius: 6px;
  background: rgba(255,255,255,0.02);
  border: 1px solid rgba(255,255,255,0.05);
  cursor: pointer;
  transition: background 0.12s, border-color 0.12s;
}
.kta-perf-ultra-row:hover {
  background: rgba(140,180,255,0.06);
  border-color: rgba(140,180,255,0.18);
}
.kta-perf-ultra-row input[type="checkbox"] {
  margin: 3px 0 0 0;
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  accent-color: #8cb4ff;
  cursor: pointer;
}
.kta-perf-ultra-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
}
.kta-perf-ultra-label {
  font-size: 13px;
  font-weight: 600;
  color: #e8eaf0;
  line-height: 1.3;
}
.kta-perf-ultra-hint {
  font-size: 11.5px;
  color: #8892a4;
  line-height: 1.45;
}
/* Toggle "danger" (animOff = reload requis) → liseré orange */
.kta-perf-ultra-row-danger {
  border-color: rgba(255, 138, 92, 0.25);
  background: rgba(255, 138, 92, 0.04);
}
.kta-perf-ultra-row-danger:hover {
  background: rgba(255, 138, 92, 0.10);
  border-color: rgba(255, 138, 92, 0.45);
}
/* Toggle master ULTRA — visuellement plus marquant */
#cfg_perf_ultra {
  accent-color: #f4c542;
}
.kta-perf-ultra-row:has(#cfg_perf_ultra:checked) {
  background: rgba(244, 197, 66, 0.10);
  border-color: rgba(244, 197, 66, 0.40);
}

/* Bouton 🚨 alerte dans le header du loader.
   v163 : coloration dynamique selon le niveau max d'alerte active.
   Classes appliquees par JS (cf. index.html _majBadgeAlert) :
     .loader-btn-alert-emergency → rouge pulsant (priorite max)
     .loader-btn-alert-warning   → orange statique
     .loader-btn-alert-info      → bleu discret
     .loader-btn-alert-none      → gris neutre (aucune alerte)
   La classe de base .loader-btn-alert n'a plus de style propre — c'est
   uniquement un selecteur pour le JS. */
.loader-btn-help.loader-btn-alert {
  position: relative;  /* pour la pastille compteur */
}
/* Niveau EMERGENCY : rouge pulsant (= comportement v162 et avant) */
.loader-btn-help.loader-btn-alert-emergency {
  background: rgba(220, 53, 69, 0.22);
  border-color: rgba(255, 107, 107, 0.55);
  color: #ffe4d4;
  box-shadow: 0 0 8px rgba(255, 107, 107, 0.35);
  animation: loader-btn-alert-pulse 2.2s ease-in-out infinite;
}
.loader-btn-help.loader-btn-alert-emergency:hover {
  background: rgba(255, 53, 69, 0.40);
  border-color: rgba(255, 107, 107, 0.85);
  color: #fff;
  box-shadow: 0 0 14px rgba(255, 107, 107, 0.65);
  animation: none;
}
/* Niveau WARNING : orange statique (pas de pulsation) */
.loader-btn-help.loader-btn-alert-warning {
  background: rgba(255, 153, 51, 0.18);
  border-color: rgba(255, 178, 102, 0.55);
  color: #ffe4c2;
  box-shadow: 0 0 6px rgba(255, 178, 102, 0.30);
}
.loader-btn-help.loader-btn-alert-warning:hover {
  background: rgba(255, 153, 51, 0.32);
  border-color: rgba(255, 178, 102, 0.85);
  color: #fff;
  box-shadow: 0 0 12px rgba(255, 178, 102, 0.50);
}
/* Niveau INFO : bleu discret */
.loader-btn-help.loader-btn-alert-info {
  background: rgba(140, 180, 255, 0.14);
  border-color: rgba(140, 180, 255, 0.45);
  color: #c8d8ff;
  box-shadow: 0 0 5px rgba(140, 180, 255, 0.20);
}
.loader-btn-help.loader-btn-alert-info:hover {
  background: rgba(140, 180, 255, 0.26);
  border-color: rgba(140, 180, 255, 0.75);
  color: #fff;
  box-shadow: 0 0 10px rgba(140, 180, 255, 0.40);
}
/* Niveau NONE : gris neutre — le bouton reste accessible pour vérifier l'état. */
.loader-btn-help.loader-btn-alert-none {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.10);
  color: #8892a4;
}
.loader-btn-help.loader-btn-alert-none:hover {
  background: rgba(255, 255, 255, 0.10);
  border-color: rgba(255, 255, 255, 0.20);
  color: #e8eaf0;
}

/* Pastille compteur (visible si > 1 alerte non acquittée). Petit cercle rouge
   en haut-droite du bouton avec le nombre d'alertes. */
.loader-btn-alert-counter {
  position: absolute;
  top: -4px;
  right: -4px;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: 8px;
  background: #dc3545;
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  line-height: 16px;
  text-align: center;
  border: 1.5px solid #1a1f2e;
  box-shadow: 0 1px 3px rgba(0,0,0,0.4);
  pointer-events: none;
}
@keyframes loader-btn-alert-pulse {
  0%, 100% {
    box-shadow: 0 0 8px rgba(255, 107, 107, 0.35);
    background: rgba(220, 53, 69, 0.22);
  }
  50% {
    box-shadow: 0 0 16px rgba(255, 107, 107, 0.70);
    background: rgba(255, 53, 69, 0.34);
  }
}

/* === Modale informative compacte ("Aucune alerte" / "Déjà à jour" / Offline) ===
   Volontairement plus légère que .kta-readme-modal-overlay : backdrop moins
   opaque (60% vs 88%), box centrée mais hauteur déterminée par le contenu,
   ne prend PAS toute la hauteur disponible pour 2-3 lignes de texte.

   🔧 v172 fix : bug "flex centered overflow" sur mobile. Quand le contenu
   dépasse la hauteur viewport (ex: notes de version v172 = 8 bullets longs
   sur mobile portrait), `align-items: center` + `overflow-y: auto` poussait
   la boîte au-dessus du viewport → le haut devenait inaccessible (le scroll
   ne peut pas remonter au-delà du top du container flex).

   Fix universel : `align-items: flex-start` sur le container + `margin: auto`
   sur l'enfant. Le margin auto centre verticalement SI la place est dispo,
   sinon il collapse (margin négatif impossible) → l'enfant part du haut →
   scroll naturel accessible. Pattern compatible Safari iOS ≥ 11. */
.kta-alert-absent-overlay.kta-alert-absent-compact {
  position: fixed;
  inset: 0;
  z-index: 99999;
  background: rgba(5, 8, 15, 0.55);
  display: flex;
  align-items: flex-start;            /* fix flex-centered-overflow (v172) */
  justify-content: center;
  /* Padding-top tient compte du safe-area iOS (notch / status bar) en plus
     d'une marge esthétique. Sans ça, en portrait sur iPhone avec notch, la
     boîte démarrait à 16px du bord → collait au notch quand le contenu
     dépassait. */
  padding: calc(16px + env(safe-area-inset-top, 0px)) 16px 16px;
  box-sizing: border-box;
  animation: kta-fadein 0.18s ease;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;  /* smooth scroll iOS */
}
.kta-alert-absent-overlay .kta-alert-absent-boite {
  width: 100%;
  max-width: 440px;
  margin: auto;                        /* centre vertical si place, collapse sinon (v172) */
  background: #1a1f2e;
  border: 1px solid rgba(108, 226, 138, 0.30);
  border-radius: 10px;
  box-shadow: 0 12px 36px rgba(0,0,0,0.55);
  font-family: Arial, sans-serif;
  overflow: hidden;
}
.kta-alert-absent-header {
  background: linear-gradient(135deg, rgba(108,226,138,0.12), rgba(108,226,138,0.04));
  border-bottom: 1px solid rgba(108, 226, 138, 0.25);
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
}
.kta-alert-absent-icon {
  font-size: 22px;
  flex-shrink: 0;
  line-height: 1;
}
.kta-alert-absent-title {
  font-size: 15px;
  font-weight: 700;
  color: #c8d0e0;
}
.kta-alert-absent-corps {
  padding: 14px 16px;
}
.kta-alert-absent-msg {
  color: #c8d0e0;
  font-size: 13.5px;
  line-height: 1.55;
  margin: 0;
}
.kta-alert-absent-msg strong {
  color: #6ce28a;
  font-family: ui-monospace, monospace;
  font-size: 13px;
}
.kta-alert-absent-actions {
  padding: 10px 16px 14px 16px;
  display: flex;
  justify-content: flex-end;
}
.kta-alert-absent-actions .kta-btn {
  min-width: 80px;
}

/* Bloc "Dernière mise à jour" affiché quand on est up-to-date :
   récap version installée + date + notes */
.kta-alert-absent-version-block {
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid rgba(255,255,255,0.08);
}
.kta-alert-absent-version-released {
  color: #8892a4;
  font-size: 12px;
  margin-bottom: 8px;
}
.kta-alert-absent-version-released strong {
  color: #c8d0e0;
  font-family: ui-monospace, monospace;
  font-size: 12px;
}
.kta-alert-absent-version-notes-titre {
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #8cb4ff;
  margin-bottom: 5px;
}
.kta-alert-absent-version-notes {
  margin: 0;
  padding-left: 20px;
  color: #c8d0e0;
  font-size: 12.5px;
  line-height: 1.55;
}
.kta-alert-absent-version-notes li {
  margin-bottom: 3px;
}

.loader-desc {
  font-size: 13px;
  color: #8892a4;
  margin: 0 0 12px;
  line-height: 1.5;
}

.loader-desc code {
  background: #0d1117;
  padding: 1px 5px;
  border-radius: 4px;
  color: #e06c75;
  font-size: 12px;
}

.loaderLabel {
  display: block;
  margin-top: 12px;
  margin-bottom: 5px;
  font-size: 12px;
  font-weight: 600;
  color: #8892a4;
  letter-spacing: 0.04em;
}

#planLoaderBox input[type="file"] {
  width: 100%;
  font-size: 13px;
  margin-bottom: 4px;
  color: #c8d0e0;
  background: #0d1117;
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 6px;
  padding: 6px 8px;
  box-sizing: border-box;
  cursor: pointer;
}

#planLoaderBox input[type="file"]::-webkit-file-upload-button {
  background: rgba(255,255,255,0.07);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 5px;
  color: #c0c8d8;
  padding: 4px 10px;
  font-size: 12px;
  cursor: pointer;
  margin-right: 8px;
}

.loaderActions {
  display: block;
  margin-top: 16px;
}

#loadPlanBtn {
  width: 100%;
  border: 0;
  border-radius: 8px;
  background: #1f6feb;
  color: white;
  padding: 10px 18px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: opacity 0.15s;
}

#loadPlanBtn:hover { opacity: 0.85; }

#loadPlanBtn:disabled {
  opacity: 0.5;
  cursor: wait;
}

.loader-btn-ghost {
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 8px;
  background: rgba(255,255,255,0.06);
  color: #c0c8d8;
  padding: 10px 14px;
  font-size: 13px;
  cursor: pointer;
  transition: background 0.15s;
}

.loader-btn-ghost:hover {
  background: rgba(255,255,255,0.1);
}

.loader-secondary-actions {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 8px;
  padding: 4px;
}

.loader-btn-secondary {
  border: 1px solid rgba(140,180,255,0.25);
  border-radius: 8px;
  background: rgba(140,180,255,0.08);
  color: #c0c8d8;
  padding: 10px 14px;
  font-size: 13px;
  cursor: pointer;
  transition: all 0.15s;
  font-weight: 500;
}

.loader-btn-secondary:hover {
  background: rgba(140,180,255,0.14);
  border-color: rgba(140,180,255,0.4);
  color: #e8eaf0;
}

.loader-btn-secondary:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Variante "danger" pour les actions destructives (reset complet) */
.loader-btn-secondary.loader-btn-danger {
  border-color: rgba(255, 110, 110, 0.3);
  background: rgba(255, 110, 110, 0.08);
  color: #ffb3b3;
}

.loader-btn-secondary.loader-btn-danger:hover {
  background: rgba(255, 110, 110, 0.18);
  border-color: rgba(255, 110, 110, 0.55);
  color: #ffd0d0;
}

#loaderStatus {
  margin-top: 14px;
  font-size: 13px;
  min-height: 18px;
  color: #8cb4ff;
}

/* ═══════════════════════════════════════════════════
   REGISTRE DE PLANS — Reprendre / Récents / Tous
   ═══════════════════════════════════════════════════ */

.loader-btn-resume {
  display: block;
  width: 100%;
  padding: 12px 16px;
  background: linear-gradient(135deg, #2c3a5e 0%, #1f2a47 100%);
  border: 1px solid rgba(140,180,255,0.4);
  border-radius: 8px;
  color: #e8eaf0;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  text-align: left;
  transition: all 0.15s;
}
.loader-btn-resume:hover {
  background: linear-gradient(135deg, #344468 0%, #243152 100%);
  border-color: rgba(140,180,255,0.6);
}
.loader-btn-resume strong {
  color: #8cb4ff;
  font-weight: 600;
}

.loader-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 13px;
  font-weight: 600;
  color: #c0c8d8;
  padding: 6px 4px;
  margin: 12px 0 6px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}

.loader-section-head-collapse {
  cursor: pointer;
  user-select: none;
  transition: color 0.15s;
}
.loader-section-head-collapse:hover {
  color: #e8eaf0;
}

.loader-collapse-chevron {
  font-size: 14px;
  color: #8892a4;
  transition: transform 0.15s;
}

.loader-section-actions {
  display: flex;
  gap: 4px;
}

.loader-btn-mini {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  color: #c0c8d8;
  font-size: 14px;
  padding: 4px 8px;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.15s;
}
.loader-btn-mini:hover {
  background: rgba(140,180,255,0.12);
  border-color: rgba(140,180,255,0.4);
  color: #e8eaf0;
}

.loader-section-subhead {
  font-size: 11px;
  font-weight: 600;
  color: #8892a4;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 8px 4px 4px;
}

.loader-plans-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 8px;
}

/* 🌐 v170 : toggle "Afficher plans serveur" entre le head et la liste.
   Discret par défaut, hover plus marqué pour signaler la cliquabilité. */
.loader-plans-filters {
  margin: 4px 0 8px;
  padding: 6px 10px;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: 6px;
}

.loader-plans-filter-row {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: #8892a4;
  cursor: pointer;
  user-select: none;
  transition: color 0.12s;
}

.loader-plans-filter-row:hover {
  color: #c8d0e0;
}

.loader-plans-filter-row input[type="checkbox"] {
  cursor: pointer;
  accent-color: #8cb4ff;
  margin: 0;
}

/* Message affiché quand le registre n'est pas vide mais le filtre cache tout
   (ex: seuls les plans serveur sont présents et l'user a décoché le toggle). */
.loader-plans-empty {
  padding: 16px 12px;
  text-align: center;
  font-size: 12px;
  color: #8892a4;
  font-style: italic;
  line-height: 1.5;
  background: rgba(255, 255, 255, 0.02);
  border: 1px dashed rgba(255, 255, 255, 0.10);
  border-radius: 6px;
}

.loader-plans-empty em {
  color: #c8d0e0;
  font-style: normal;
  font-weight: 500;
}

.plan-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.12s;
}
.plan-row:hover {
  background: rgba(140,180,255,0.08);
  border-color: rgba(140,180,255,0.3);
}

.plan-row-icon {
  font-size: 18px;
  width: 24px;
  text-align: center;
  flex-shrink: 0;
}

.plan-row-info {
  flex: 1;
  min-width: 0;
  overflow: hidden;
}

/* ⚠️ Layout fix v150 : la 1ère ligne (titre) est désormais un flex container,
   avec le nom prenant flex:1 (et l'ellipsis) tandis que les badges/version
   ont flex-shrink:0 → ils restent toujours visibles même sur noms longs.
   Avant : la classe .plan-row-name avait l'ellipsis sur l'ensemble du contenu
   (nom + badge ✅), donc les badges étaient tronqués avec le nom long. */
.plan-row-title {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;       /* permet à flex:1 child d'overflow correctement */
  overflow: hidden;
}

.plan-row-name-text {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 13px;
  color: #e8eaf0;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Alias rétro-compat (anciens emplacements éventuels) */
.plan-row-name {
  font-size: 13px;
  color: #e8eaf0;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.plan-row-version {
  flex-shrink: 0;
  display: inline-block;
  font-size: 10px;
  color: #8cb4ff;
  background: rgba(140,180,255,0.12);
  padding: 1px 6px;
  border-radius: 3px;
  font-weight: 500;
}

/* Container des badges historique — DEPRECATED v170 :
   anciennement à droite du nom sur ligne 1 (modes + storage).
   Le HTML actuel ne le génère plus dans planRowHTML — gardé en CSS pour
   compat éventuelle (extensions, plugins user). Le storage badge est
   désormais dans .plan-row-modes (ligne 2 avec les badges modes V1/V2/M-LVL).
   Si on supprime cette classe à terme, vérifier qu'aucun consommateur tiers
   n'en dépend. */
.plan-row-badges {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

/* 🆕 v170 : ligne 2 dédiée aux badges meta (sous le nom du plan).
   - Suite 1 : badges modes V1/V2/M-LVL uniquement
   - Suite 2 (ici) : badges modes + badge storage (✅/🔐/📁) groupés
                     ensemble pour qu'un scan visuel donne d'un coup tous
                     les attributs techniques (mode + persistance) du plan
                     sans avoir à regarder à 2 endroits.
   align-items:center pour bien aligner les badges modes (9px monospace
   avec fond/border) et le badge storage (emoji 11px sans fond) qui ont
   des hauteurs différentes. */
.plan-row-modes {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-top: 3px;
  flex-wrap: wrap;
}

/* 🏗️ Badges de MODE — V2 / M-LVL / V1 — code couleur cohérent charte */
.plan-row-mode {
  display: inline-block;
  font-family: 'SF Mono', Monaco, Consolas, 'Liberation Mono', monospace;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.04em;
  padding: 1px 5px;
  border-radius: 3px;
  line-height: 1.4;
  white-space: nowrap;
}
/* V2 tuilé = violet (cohérent avec la checkbox V2 dans le planner) */
.plan-row-mode-v2 {
  background: rgba(180, 82, 255, 0.18);
  color: #d29bff;
  border: 1px solid rgba(180, 82, 255, 0.35);
}
/* Multi-niveau = jaune (cohérent avec la pastille niveau dans la sidebar) */
.plan-row-mode-mlvl {
  background: rgba(244, 197, 66, 0.18);
  color: #f4c542;
  border: 1px solid rgba(244, 197, 66, 0.35);
}
/* V1 classique = gris neutre, discret */
.plan-row-mode-v1 {
  background: rgba(255, 255, 255, 0.05);
  color: #8892a4;
  border: 1px solid rgba(255, 255, 255, 0.10);
}

.plan-row-sub {
  font-size: 11px;
  color: #8892a4;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-top: 2px;
}

.plan-row-date {
  display: block;
  font-size: 10px;
  color: #6c7689;
  margin-top: 2px;
}

.plan-row-actions {
  display: flex;
  gap: 4px;
  flex-shrink: 0;
}

.plan-row-btn {
  background: transparent;
  border: 1px solid rgba(255,255,255,0.1);
  color: #c0c8d8;
  font-size: 12px;
  width: 28px;
  height: 28px;
  border-radius: 4px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  transition: all 0.12s;
}
.plan-row-btn:hover {
  background: rgba(255,255,255,0.08);
}
.plan-row-load:hover {
  background: rgba(140,255,140,0.12);
  border-color: rgba(140,255,140,0.4);
  color: #8cffb4;
}
.plan-row-remove:hover {
  background: rgba(255,140,140,0.12);
  border-color: rgba(255,140,140,0.4);
  color: #ff8c8c;
}
/* ℹ️ v170 (suite 3) : bouton infos — accent bleu cohérent avec la charte */
.plan-row-info-btn:hover {
  background: rgba(140,180,255,0.12);
  border-color: rgba(140,180,255,0.4);
  color: #8cb4ff;
}

/* Modale "Infos détaillées sur l'archive" — pattern .kta-readme-modal,
   max-width compact (480px) + table 2 colonnes clé/valeur sobre. */
.kta-plan-infos-boite {
  max-width: 480px !important;
  height: auto !important;
  max-height: 80vh !important;
}

.kta-plan-infos-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

.kta-plan-infos-table tr {
  border-bottom: 1px solid rgba(255,255,255,0.05);
}

.kta-plan-infos-table tr:last-child {
  border-bottom: none;
}

.kta-plan-infos-table .kta-info-key {
  padding: 8px 12px 8px 0;
  color: #8892a4;
  font-weight: 500;
  white-space: nowrap;
  vertical-align: top;
  width: 40%;
}

.kta-plan-infos-table .kta-info-val {
  padding: 8px 0;
  color: #e8eaf0;
  word-break: break-word;
  vertical-align: top;
}

/* ═══════════════════════════════════════════════════
   FS ACCESS — Sélection ZIP avec autorisation persistante
   ═══════════════════════════════════════════════════ */

.fs-access-hint {
  margin-top: 10px;
  padding: 10px 12px;
  background: rgba(140,180,255,0.05);
  border: 1px solid rgba(140,180,255,0.2);
  border-radius: 6px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.loader-btn-fs {
  width: 100%;
  padding: 8px 12px;
  background: linear-gradient(135deg, #2a3a5e 0%, #1d2745 100%);
  border: 1px solid rgba(140,180,255,0.4);
  border-radius: 5px;
  color: #cfd6e4;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s;
}
.loader-btn-fs:hover {
  background: linear-gradient(135deg, #34466e 0%, #243152 100%);
  border-color: rgba(140,180,255,0.6);
  color: #e8eaf0;
}

.fs-access-info {
  font-size: 11px;
  color: #8892a4;
  line-height: 1.4;
}

.loader-store-blob {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  font-size: 13px;
  color: #cfd6e4;
  padding: 4px 0;
}
.loader-store-blob input[type="checkbox"] {
  cursor: pointer;
  width: 16px;
  height: 16px;
}
.loader-store-blob:hover {
  color: #e8eaf0;
}

.plan-row-badge {
  display: inline-block;
  font-size: 11px;
  /* margin-left supprimée v150 : badge maintenant dans .plan-row-badges
     (flex avec gap:4px), pas besoin de marge inline. */
  vertical-align: middle;
  cursor: help;
}
.plan-row-badge-stored { color: #6ce28a; }
.plan-row-badge-fs     { color: #8cb4ff; }
.plan-row-badge-pick   { color: #c0c8d8; opacity: 0.7; }

/* Onglets loader */
.loader-tabs {
  display: flex;
  gap: 0;
  margin-bottom: 16px;
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,0.1);
}

.loader-tab {
  flex: 1;
  padding: 9px 12px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  border: none;
  background: rgba(255,255,255,0.04);
  color: #8892a4;
  transition: background 0.15s, color 0.15s;
}

.loader-tab.active {
  background: #1f6feb;
  color: #fff;
}

.loader-tab:hover:not(.active) {
  background: rgba(255,255,255,0.08);
  color: #c8d0e0;
}

.loader-panel {
  display: none;
}

.loader-panel.active {
  display: block;
}

/* Zone de drop ZIP */
.zip-drop-zone {
  border: 2px dashed rgba(255,255,255,0.15);
  border-radius: 10px;
  padding: 24px 16px;
  text-align: center;
  cursor: pointer;
  transition: border-color 0.2s, background 0.2s;
  color: #8892a4;
  font-size: 14px;
  margin-bottom: 8px;
  background: rgba(255,255,255,0.02);
}

.zip-drop-zone:hover,
.zip-drop-zone.dragover {
  border-color: #4d8aff;
  background: rgba(77,138,255,0.07);
  color: #8cb4ff;
}

.zip-drop-zone .zip-icon {
  font-size: 28px;
  display: block;
  margin-bottom: 6px;
}

.zip-drop-zone input[type="file"] {
  display: none;
}

#zipFileName {
  font-size: 12px;
  color: #8cb4ff;
  font-weight: 600;
  margin-top: 6px;
  min-height: 16px;
  /* 🆕 v1.8.0 fix : autoriser le wrap des noms de fichiers longs (ex:
     "plan_carriere_de_bagneux_v2_KARMA_2026 (3).zip"). Sans ça, le nom
     peut sortir du conteneur si le navigateur ne wrappe pas faute de
     espace dans le nom (les `_` ne sont pas des break points naturels).
     max-width:100% pour contraindre au parent. */
  max-width: 100%;
  overflow-wrap: anywhere;
  word-break: break-word;
}

/* ==============================================
   MODE PERFORMANCE — segmented control (loader)
   ============================================== */
.kta-perf-wrap {
  margin-top: 14px;
  padding: 10px 12px;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* === Drawer "🎚️ Réglages de performance" (loader) === */
/* Wrapper qui regroupe le Tiling + les toggles Perf ULTRA dans une seule box
   collapsible. Ouverte par défaut pour conserver la visibilité du Tiling. */
.kta-loader-perf-drawer {
  margin-top: 14px;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  overflow: hidden;
}
.kta-loader-perf-drawer-titre {
  cursor: pointer;
  padding: 12px 14px;
  font-size: 13.5px;
  font-weight: 700;
  color: #c8d0e0;
  user-select: none;
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  transition: background 0.15s ease;
}
.kta-loader-perf-drawer-titre::-webkit-details-marker { display: none; }
.kta-loader-perf-drawer-titre::marker { display: none; }
.kta-loader-perf-drawer-titre:hover {
  background: rgba(140, 180, 255, 0.05);
}
.kta-loader-perf-drawer-chevron {
  font-size: 14px;
  color: #8892a4;
  transition: transform 0.18s ease;
}
.kta-loader-perf-drawer[open] > .kta-loader-perf-drawer-titre .kta-loader-perf-drawer-chevron {
  transform: rotate(180deg);
}
.kta-loader-perf-drawer-corps {
  padding: 4px 12px 12px 12px;
  border-top: 1px solid rgba(255, 255, 255, 0.05);
}
/* Le premier .kta-perf-wrap à l'intérieur du drawer perd son margin-top pour
   coller juste sous le bord du séparateur du drawer. */
.kta-loader-perf-drawer-corps > .kta-perf-wrap:first-child {
  margin-top: 10px;
}
/* Séparateur visuel entre Tiling et toggles ULTRA dans le drawer */
.kta-loader-perf-sep {
  margin: 14px 0;
  border: none;
  border-top: 1px dashed rgba(255, 255, 255, 0.10);
}
/* Diviseur entre toggle master ULTRA et toggles individuels */
.kta-loader-perf-divider {
  margin: 8px 0 6px 0;
  height: 1px;
  background: rgba(255, 255, 255, 0.06);
}
/* Hint italique sous le titre "🚀 Mode Performance ULTRA" du drawer */
.kta-loader-perf-hint {
  margin: 0 0 4px 0;
  font-size: 11.5px;
  color: #8892a4;
  font-style: italic;
  line-height: 1.45;
}

.kta-perf-titre {
  font-size: 13px;
  font-weight: 600;
  color: #e8eaf0;
  user-select: none;
}

.kta-perf-segmented {
  display: flex;
  width: 100%;
  background: rgba(0,0,0,0.18);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 6px;
  overflow: hidden;
}

.kta-perf-btn {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  padding: 8px 4px;
  background: rgba(255,255,255,0.04);
  border: none;
  border-right: 1px solid rgba(255,255,255,0.06);
  color: #c8d0e0;
  cursor: pointer;
  font-family: inherit;
  line-height: 1.2;
  text-align: center;
  transition: background 0.15s ease, color 0.15s ease;
  user-select: none;
}

.kta-perf-btn:last-child {
  border-right: none;
}

.kta-perf-btn:hover:not(.active) {
  background: rgba(255,255,255,0.08);
  color: #e8eaf0;
}

.kta-perf-btn.active {
  background: #f4c542;
  color: #1a1f2e;
}

.kta-perf-btn .kta-perf-emoji {
  font-size: 18px;
  line-height: 1;
}

.kta-perf-btn .kta-perf-label {
  font-size: 11px;
  font-weight: 500;
  /* 🆕 v1.46.4 (audit M3) : les labels longs en ES (Desactivado/Equilibrado/
     Rendimiento) étaient tronqués « Desact… » sur mobile (nowrap + ellipsis +
     boutons étroits flex:1). On autorise le wrap + la coupure de mot si besoin
     → le label complet reste lisible (2 lignes au pire). Desktop inchangé (les
     boutons larges gardent une seule ligne, le wrap ne s'active qu'au manque
     de place). align-items du flex garde les boutons à hauteur égale. */
  white-space: normal;
  overflow-wrap: anywhere;
  max-width: 100%;
}

.kta-perf-btn.active .kta-perf-label {
  font-weight: 700;
}

.kta-perf-desc {
  font-size: 12px;
  font-style: italic;
  color: #8892a4;
  line-height: 1.4;
  padding: 0 2px;
  min-height: 1.4em;
}

.kta-perf-debug {
  font-size: 10px;
  font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  color: rgba(244, 197, 66, 0.75);
  padding: 4px 6px;
  background: rgba(244, 197, 66, 0.06);
  border: 1px solid rgba(244, 197, 66, 0.18);
  border-radius: 4px;
  word-break: break-word;
}

/* ==============================================
   BOUTON DEBUG TOGGLE (loader, advancedBox)
   Hérite de .loader-btn-secondary — ajout d'un état "actif"
   teinté avec la couleur d'accent (#f4c542)
   ============================================== */
.loader-btn-secondary.kta-debug-toggle.active {
  background: rgba(244, 197, 66, 0.12);
  border-color: rgba(244, 197, 66, 0.45);
  color: #f4c542;
}

.loader-btn-secondary.kta-debug-toggle.active:hover {
  background: rgba(244, 197, 66, 0.20);
  border-color: rgba(244, 197, 66, 0.65);
}


/* ==============================================
   PLANNER — créateur de plan ZIP
   ============================================== */

/* 🆕 v1.14.20 (KARMA « rend le modal générateur mieux géré sur PC ») :
   la modale du générateur utilise désormais une largeur dédiée plus
   confortable en PC (1100px max) tout en restant raisonnable. Le corps
   passe en grille 2 colonnes sur écran large (≥1280px) pour réduire le
   scroll vertical interminable — les sections s'affichent côte à côte
   et l'user voit plus de contexte sans scroller. Sur mobile/tablette,
   tout reste en colonne unique comme avant. */
.kta-planner-modal-boite {
  width: min(720px, 96vw) !important;
  max-width: min(720px, 96vw) !important;
}
@media (min-width: 1024px) {
  .kta-planner-modal-boite {
    width: min(1100px, 94vw) !important;
    max-width: min(1100px, 94vw) !important;
  }
}
/* Layout 2 colonnes du CORPS en écran très large (KARMA v1.14.20 +
   v1.14.21 : « bcp de zone blanche, et géoréférencement on le met à
   droite après icône et tag »). Assignment EXPLICITE des sections aux
   colonnes via classes .kta-pl-col-* — grid-auto-flow: row dense pour
   combler les trous (les sections de hauteur variable peuvent se
   réorganiser pour minimiser les zones blanches). */
@media (min-width: 1280px) {
  #kta-planner-corps {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px 18px;
    align-items: start;
    grid-auto-flow: row dense;
  }
  /* 🐛 v1.44.5 — min-width:0 sur TOUS les items du grid. Sans ça, un item au
     contenu intrinsèque large (ex: data URL SVG de l'icône entree_plan, ~700px
     en nowrap) impose son min-width:auto à la colonne → la grille déborde les
     1100px du modal → layout distordu + textes des autres sections qui ne
     wrappent plus. Le min-width:0 force chaque colonne à respecter 1fr. */
  #kta-planner-corps > * {
    min-width: 0;
  }
  /* Pleine largeur (KMZ import / ZIP existant / erreur / actions) */
  #kta-planner-corps > .kta-pl-col-full {
    grid-column: 1 / -1;
  }
  /* Colonne gauche explicite — sections principales de saisie */
  #kta-planner-corps > .kta-pl-col-left {
    grid-column: 1;
  }
  /* Colonne droite explicite — sections secondaires (tracking + icônes + géoréf) */
  #kta-planner-corps > .kta-pl-col-right {
    grid-column: 2;
  }
}

.kta-planner-grille {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px 12px;
  align-items: center;
}

.kta-planner-req {
  color: #e06c75;
  margin-left: 2px;
}

.kta-planner-hint {
  color: #8892a4;
  font-size: 11px;
  margin-left: 4px;
}

.kta-planner-info {
  font-size: 12px;
  color: #8892a4;
  margin: 0 0 10px;
  line-height: 1.5;
}

.kta-planner-info code {
  background: #0d1117;
  padding: 1px 5px;
  border-radius: 4px;
  color: #e06c75;
  font-size: 11px;
}

.kta-planner-upload-ligne {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 8px;
  flex-wrap: wrap;
}

/* 🆕 v1.9.3-A2 : sélecteur mode image (Upload vs Vierge) dans le créateur
   de plan. Grille 2 colonnes (1 ligne sur mobile via responsive auto). */
.kta-planner-image-mode-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-bottom: 12px;
}

.kta-planner-image-mode-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  background: rgba(140, 180, 255, 0.05);
  border: 1px solid rgba(140, 180, 255, 0.22);
  border-radius: 6px;
  cursor: pointer;
  transition: background 0.12s, border-color 0.12s;
  font-size: 13px;
  color: #c8d0e0;
}

.kta-planner-image-mode-row:hover {
  background: rgba(140, 180, 255, 0.10);
}

.kta-planner-image-mode-row input[type="radio"] {
  flex-shrink: 0;
  accent-color: #f4c542;
}

/* Mode sélectionné = bordure jaune charte */
.kta-planner-image-mode-row:has(input[type="radio"]:checked) {
  background: rgba(244, 197, 66, 0.10);
  border-color: rgba(244, 197, 66, 0.5);
}

@media (max-width: 480px) {
  .kta-planner-image-mode-grid {
    grid-template-columns: 1fr;  /* 1 colonne sur mobile */
  }
}

/* Display des dimensions auto-détectées (dans la section "Plan général") */
.kta-planner-dim-display {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin-top: 10px;
  padding: 10px 12px;
  background: rgba(140, 180, 255, 0.05);
  border: 1px solid rgba(140, 180, 255, 0.18);
  border-radius: 6px;
  color: #c8d0e0;
  font-size: 13px;
  line-height: 1.45;
}
.kta-planner-dim-display.kta-planner-dim-ok {
  background: rgba(108, 226, 138, 0.06);
  border-color: rgba(108, 226, 138, 0.30);
  color: #c8d0e0;
}
.kta-planner-dim-display.kta-planner-dim-warn {
  background: rgba(244, 197, 66, 0.07);
  border-color: rgba(244, 197, 66, 0.40);
  color: #ffd980;
}
.kta-planner-dim-display.kta-planner-dim-err {
  background: rgba(255, 107, 107, 0.08);
  border-color: rgba(255, 107, 107, 0.40);
  color: #ffb088;
}

/* 🧱 Tiling V2 : checkbox compacte dans le planner (cohérente avec multilevel-row).
   Liseré violet pour distinguer la conversion V2 (irréversible, génère beaucoup de
   tuiles). Visible uniquement en mode Modifier (cf createConf.js). */
.kta-planner-tiling-v2-row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-top: 8px;
  padding: 10px 12px;
  background: rgba(180, 82, 255, 0.05);
  border: 1px solid rgba(180, 82, 255, 0.22);
  border-radius: 6px;
  cursor: pointer;
  user-select: none;
}
.kta-planner-tiling-v2-row:hover {
  background: rgba(180, 82, 255, 0.09);
  border-color: rgba(180, 82, 255, 0.38);
}
.kta-planner-tiling-v2-row input[type="checkbox"] {
  width: 18px;
  height: 18px;
  accent-color: #b452ff;
  margin: 2px 0 0;
  flex: 0 0 auto;
}
.kta-planner-tiling-v2-row > span {
  display: flex;
  flex-direction: column;
  gap: 3px;
  font-size: 13px;
  color: #c8d0e0;
  line-height: 1.4;
}
.kta-planner-tiling-v2-row strong {
  color: #b452ff;
  font-weight: 600;
}
.kta-planner-tiling-v2-row em {
  color: #8892a4;
  font-style: italic;
  font-size: 11.5px;
  line-height: 1.5;
}

/* 🏗️ Multi-niveau : checkbox compacte dans le planner (section Infos) */
.kta-planner-multilevel-row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-top: 10px;
  padding: 10px 12px;
  background: rgba(244, 197, 66, 0.04);
  border: 1px solid rgba(244, 197, 66, 0.20);
  border-radius: 6px;
  cursor: pointer;
  user-select: none;
}
.kta-planner-multilevel-row:hover {
  background: rgba(244, 197, 66, 0.08);
  border-color: rgba(244, 197, 66, 0.35);
}
.kta-planner-multilevel-row input[type="checkbox"] {
  width: 18px;
  height: 18px;
  accent-color: #f4c542;
  margin: 2px 0 0;
  flex: 0 0 auto;
}
.kta-planner-multilevel-row > span {
  display: flex;
  flex-direction: column;
  gap: 3px;
  font-size: 13px;
  color: #c8d0e0;
  line-height: 1.4;
}
.kta-planner-multilevel-row strong {
  color: #f4c542;
  font-weight: 600;
}
.kta-planner-multilevel-row em {
  color: #8892a4;
  font-style: italic;
  font-size: 11.5px;
  line-height: 1.5;
}
.kta-planner-dim-icon {
  font-size: 16px;
  line-height: 1.45;
  flex-shrink: 0;
}
.kta-planner-dim-text {
  flex: 1;
}
.kta-planner-dim-text em {
  color: #8892a4;
  font-style: italic;
}
.kta-planner-dim-val {
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-weight: 600;
  color: #8cb4ff;
}
.kta-planner-dim-ok .kta-planner-dim-val {
  color: #6ce28a;
}
.kta-planner-dim-warn .kta-planner-dim-val {
  color: #f4c542;
}
.kta-planner-dim-warnings {
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid rgba(244, 197, 66, 0.25);
}
.kta-planner-dim-warn-line {
  display: flex;
  align-items: flex-start;
  gap: 4px;
  font-size: 12px;
  line-height: 1.5;
  color: #ff8a5c;
  margin-top: 4px;
}
.kta-planner-dim-warn-line:first-child {
  margin-top: 0;
}
.kta-planner-dim-warn-line strong {
  color: #ff6b6b;
}

/* Actions tracking — conteneur du bouton 🎯 Recentrer sous la grille */
.kta-planner-tracking-actions {
  margin-top: 10px;
  display: flex;
  justify-content: flex-end;
}

/* Flash vert bref sur les inputs startX/startY après clic sur 🎯 Recentrer
   pour confirmer visuellement que les valeurs ont été mises à jour. */
@keyframes kta-planner-flash-ok {
  0%   { background: rgba(108, 226, 138, 0.30); border-color: #6ce28a; }
  100% { background: inherit;                    border-color: inherit; }
}
.kta-cfg-input.kta-planner-flash-ok {
  animation: kta-planner-flash-ok 0.6s ease-out;
}

/* =========================================================
   🚨 MODALE ALERTE PUBLIQUE — diffusée par alert.json
   3 niveaux : emergency (rouge pulse), warning (orange), info (bleu).
   Style délibérément agressif sur emergency pour ne pas être ignoré.
   ========================================================= */

.kta-alert-overlay {
  /* Backdrop encore plus opaque que les autres modales pour focus max */
  background: rgba(5, 8, 15, 0.94) !important;
}

.kta-alert-boite {
  max-width: 560px;
  /* v1.14.3 — fix bug récurrent "modal trop long" sur alerte : on force
     hauteur auto bornée à 88vh + flex column pour que le corps scrolle
     dans la boîte au lieu de la faire déborder (pattern déjà appliqué
     aux modales niv / légende / jct / iti / lost / session export). */
  height: auto !important;
  max-height: 88vh !important;
  display: flex !important;
  flex-direction: column !important;
  border: 2px solid #ff6b6b !important;
  box-shadow: 0 0 0 1px rgba(255, 107, 107, 0.20),
              0 0 30px rgba(255, 107, 107, 0.45),
              0 18px 60px rgba(0, 0, 0, 0.7) !important;
  animation: kta-alert-glow 1.8s ease-in-out infinite;
}
@keyframes kta-alert-glow {
  0%, 100% {
    box-shadow: 0 0 0 1px rgba(255, 107, 107, 0.20),
                0 0 30px rgba(255, 107, 107, 0.45),
                0 18px 60px rgba(0, 0, 0, 0.7);
  }
  50% {
    box-shadow: 0 0 0 2px rgba(255, 107, 107, 0.35),
                0 0 55px rgba(255, 107, 107, 0.70),
                0 18px 60px rgba(0, 0, 0, 0.7);
  }
}

.kta-alert-header {
  background: linear-gradient(135deg, rgba(255, 107, 107, 0.22), rgba(255, 107, 107, 0.08)) !important;
  border-bottom: 1px solid rgba(255, 107, 107, 0.50) !important;
  display: flex !important;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 16px 14px !important;
  text-align: center;
}
.kta-alert-title-text {
  font-size: 18px;
  font-weight: 800;
  color: #ffd0d0;
  letter-spacing: 0.02em;
  text-shadow: 0 0 12px rgba(255, 107, 107, 0.55);
}
.kta-alert-pulse-side {
  font-size: 24px;
  color: #ff6b6b;
  font-weight: 900;
  animation: kta-alert-pulse-side 0.9s ease-in-out infinite;
  text-shadow: 0 0 10px rgba(255, 107, 107, 0.8);
}
@keyframes kta-alert-pulse-side {
  0%, 100% { transform: scale(1); opacity: 0.85; }
  50%      { transform: scale(1.35); opacity: 1; }
}

.kta-alert-corps {
  padding: 18px 20px !important;
  /* v1.14.3 — corps scrollable quand le détail dépasse la hauteur de
     boîte. flex:1 1 auto pour prendre tout l'espace restant entre header
     et footer "J'ai compris", min-height:0 nécessaire pour autoriser le
     shrink dans flex (sinon le contenu impose sa hauteur intrinsèque). */
  flex: 1 1 auto !important;
  min-height: 0 !important;
  overflow-y: auto !important;
}
/* Header + footer doivent rester fixes au-dessus/au-dessous du scroll */
.kta-alert-header,
.kta-alert-actions {
  flex: 0 0 auto !important;
}
.kta-alert-msg {
  color: #ffe4d4;
  font-size: 15px;
  line-height: 1.55;
  margin: 0 0 12px 0;
  font-weight: 500;
}
.kta-alert-details {
  margin: 12px 0 0 0;
  padding-left: 22px;
  color: #c8d0e0;
  font-size: 13.5px;
  line-height: 1.6;
}
.kta-alert-details li {
  margin-bottom: 4px;
}
.kta-alert-released {
  margin-top: 16px;
  padding-top: 10px;
  border-top: 1px solid rgba(255,255,255,0.08);
  font-size: 11.5px;
  color: #8892a4;
  font-family: ui-monospace, monospace;
}
.kta-alert-actions {
  padding: 12px 20px 18px 20px;
  display: flex;
  justify-content: center;
}
.kta-alert-btn-ok {
  min-width: 200px;
  background: #c0392b !important;
  border: 1px solid #ff6b6b !important;
  color: #fff !important;
  font-weight: 700 !important;
  font-size: 14px !important;
  letter-spacing: 0.04em;
}
.kta-alert-btn-ok:hover {
  background: #d94436 !important;
  opacity: 1;
}

/* Variante warning — orange/jaune */
.kta-alert-overlay.kta-alert-level-warning .kta-alert-boite {
  border-color: #ff8a5c !important;
  animation: none;
  box-shadow: 0 0 0 1px rgba(255, 138, 92, 0.20),
              0 0 30px rgba(255, 138, 92, 0.30),
              0 18px 60px rgba(0, 0, 0, 0.7) !important;
}
.kta-alert-overlay.kta-alert-level-warning .kta-alert-header {
  background: linear-gradient(135deg, rgba(255, 138, 92, 0.20), rgba(255, 138, 92, 0.06)) !important;
  border-bottom-color: rgba(255, 138, 92, 0.45) !important;
}
.kta-alert-overlay.kta-alert-level-warning .kta-alert-pulse-side {
  color: #ff8a5c;
  animation: none;
}
.kta-alert-overlay.kta-alert-level-warning .kta-alert-title-text {
  color: #ffd4b8;
}
.kta-alert-overlay.kta-alert-level-warning .kta-alert-btn-ok {
  background: #ff8a5c !important;
  border-color: #ffb088 !important;
}

/* Variante info — bleu neutre */
.kta-alert-overlay.kta-alert-level-info .kta-alert-boite {
  border-color: #8cb4ff !important;
  animation: none;
  box-shadow: 0 0 0 1px rgba(140, 180, 255, 0.20),
              0 0 30px rgba(140, 180, 255, 0.25),
              0 18px 60px rgba(0, 0, 0, 0.7) !important;
}
.kta-alert-overlay.kta-alert-level-info .kta-alert-header {
  background: linear-gradient(135deg, rgba(140, 180, 255, 0.20), rgba(140, 180, 255, 0.06)) !important;
  border-bottom-color: rgba(140, 180, 255, 0.40) !important;
}
.kta-alert-overlay.kta-alert-level-info .kta-alert-pulse-side {
  color: #8cb4ff;
  animation: none;
}
.kta-alert-overlay.kta-alert-level-info .kta-alert-title-text {
  color: #c5d8ff;
}
.kta-alert-overlay.kta-alert-level-info .kta-alert-btn-ok {
  background: #1f6feb !important;
  border-color: #8cb4ff !important;
}

.kta-planner-upload-ligne .kta-cfg-label {
  flex: 0 0 auto;
  margin: 0;
  min-width: 160px;
}

.kta-planner-upload-btn {
  display: inline-block;
  padding: 5px 12px;
  background: rgba(255,255,255,0.07);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 6px;
  color: #c0c8d8;
  font-size: 12px;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.15s;
}

.kta-planner-upload-btn:hover {
  background: rgba(255,255,255,0.12);
}

.kta-planner-upload-nom {
  font-size: 12px;
  color: #8892a4;
  font-style: italic;
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Liste des calques */
.kta-planner-layers-list {
  margin-top: 8px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.kta-planner-empty {
  font-size: 12px;
  color: #8892a4;
  font-style: italic;
  margin: 0;
  text-align: center;
  padding: 10px 0;
}

.kta-planner-layer-item {
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 8px;
  padding: 10px 12px;
}

.kta-planner-layer-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}

.kta-planner-layer-num {
  font-size: 12px;
  font-weight: 700;
  color: #8cb4ff;
  letter-spacing: 0.04em;
}

.kta-planner-remove-btn {
  background: none;
  border: none;
  color: #8892a4;
  cursor: pointer;
  font-size: 13px;
  padding: 2px 6px;
  border-radius: 4px;
  transition: color 0.15s, background 0.15s;
}

.kta-planner-remove-btn:hover {
  color: #ffd0d0;
  background: rgba(139,26,26,0.3);
}

.kta-planner-add-btn {
  float: right;
  background: rgba(31,111,235,0.2);
  border: 1px solid rgba(31,111,235,0.4);
  border-radius: 5px;
  color: #8cb4ff;
  font-size: 11px;
  padding: 2px 8px;
  cursor: pointer;
  font-weight: 600;
  transition: background 0.15s;
}

.kta-planner-add-btn:hover {
  background: rgba(31,111,235,0.35);
}

/* =====================================================================
   🔐 PIN LOCK — v1.9.4-V1
   Modale Gate plein écran (keypad + biométrie + lockout) + section
   d'activation dans la modale ⚙️ Configuration du loader.
   ===================================================================== */

/* Section dans ⚙️ Configuration du loader */
.kta-loader-pin-status {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 6px;
  margin-bottom: 10px;
  font-size: 13px;
  color: #c8d0e0;
}

.kta-loader-pin-status-icon {
  font-size: 18px;
  flex: 0 0 auto;
}

.kta-loader-pin-status-text {
  flex: 1 1 auto;
}

.kta-loader-pin-actions {
  display: grid;
  grid-template-columns: 1fr;
  gap: 6px;
}

.kta-loader-pin-actions:has(button + button) {
  grid-template-columns: 1fr 1fr;
}

.kta-loader-pin-btn-modif {
  background: rgba(140, 180, 255, 0.12);
  border-color: rgba(140, 180, 255, 0.3);
  color: #8cb4ff;
}

/* 🆕 v1.10.0-hotfix1 : flash highlight le bouton "Activer" pour guider
   l'user après le clic "🔐 Activer maintenant" de la modale proposition.
   3 pulses jaunes en 2.2s + box-shadow expansif. Non bloquant. */
.kta-pin-enable-flash {
  animation: kta-pin-enable-flash-pulse 0.7s ease-in-out 3;
  position: relative;
  z-index: 1;
}

@keyframes kta-pin-enable-flash-pulse {
  0%, 100% {
    box-shadow: 0 0 0 0 rgba(244, 197, 66, 0);
    transform: scale(1);
  }
  50% {
    box-shadow: 0 0 0 8px rgba(244, 197, 66, 0.35),
                0 0 20px 4px rgba(244, 197, 66, 0.4);
    transform: scale(1.03);
  }
}

/* =====================================================================
   GATE PLEIN ÉCRAN — modale au boot quand PIN activé
   ===================================================================== */
/* 🆕 v1.28.1 : modale Doc README ouverte depuis un écran de verrouillage
   (UnlockGate communautaire au boot OU PinLock local). Doit passer
   AU-DESSUS des 2 gates (UnlockGate=100100, PinLock=100002) — sinon
   inaccessible. Classe additionnelle posée par afficherReadme({overLocker:true}).
   Le footer crédit et le sommaire suivent naturellement (z-index hérité). */
.kta-readme-modal-overlay.kta-readme-over-locker {
  z-index: 100200 !important;
}

/* 🆕 v1.28.1 : bouton "📖 Documentation" injecté dans UnlockGate + PinLock.
   Style discret façon link-button — accessible mais sans détourner de la
   saisie active du code. Une seule classe utilisée dans les 2 gates et leurs
   variants lockout pour cohérence visuelle. */
.kta-gate-readme-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin-top: 12px;
  padding: 8px 14px;
  background: rgba(140, 180, 255, 0.08);
  color: #8cb4ff;
  border: 1px solid rgba(140, 180, 255, 0.28);
  border-radius: 8px;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.18s ease, border-color 0.18s ease, transform 0.12s ease;
  text-decoration: none;
}
.kta-gate-readme-btn:hover {
  background: rgba(140, 180, 255, 0.18);
  border-color: rgba(140, 180, 255, 0.55);
}
.kta-gate-readme-btn:active {
  transform: scale(0.97);
}

.kta-pin-gate-overlay {
  position: fixed;
  inset: 0;
  background: linear-gradient(135deg, #0a0d18 0%, #1a1f2e 100%);
  z-index: 100002;  /* au-dessus de tout (modales 100001) */
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  padding-top: calc(20px + env(safe-area-inset-top, 0px));
  padding-bottom: calc(20px + env(safe-area-inset-bottom, 0px));
  box-sizing: border-box;
  animation: kta-pin-gate-fadein 0.25s ease-out;
}

@keyframes kta-pin-gate-fadein {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.kta-pin-gate-box {
  background: #1a1f2e;
  border: 2px solid rgba(244, 197, 66, 0.3);
  border-radius: 14px;
  padding: 24px 28px;
  max-width: 360px;
  width: 100%;
  text-align: center;
  box-shadow: 0 8px 40px rgba(244, 197, 66, 0.15);
  animation: kta-pin-gate-popin 0.3s ease-out;
}

@keyframes kta-pin-gate-popin {
  from { transform: scale(0.92); opacity: 0; }
  to   { transform: scale(1);    opacity: 1; }
}

.kta-pin-gate-icon {
  font-size: 44px;
  margin-bottom: 8px;
  filter: drop-shadow(0 0 14px rgba(244, 197, 66, 0.4));
}

.kta-pin-gate-titre {
  font-size: 20px;
  font-weight: 700;
  color: #f4c542;
  margin-bottom: 6px;
}

.kta-pin-gate-soustitre {
  font-size: 13px;
  color: #c8d0e0;
  margin-bottom: 16px;
  line-height: 1.5;
}

/* Dots de saisie PIN */
.kta-pin-gate-dots {
  display: flex;
  justify-content: center;
  gap: 12px;
  margin: 12px 0 14px;
  height: 28px;
  align-items: center;
}

.kta-pin-dot {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  font-size: 24px;
  font-weight: 700;
  color: #4a5468;
  transition: color 0.15s, transform 0.15s;
}

.kta-pin-dot-filled {
  color: #f4c542;
  transform: scale(1.1);
}

.kta-pin-dot-visible {
  /* Pattern iOS 8:b : chiffre visible 0.5s puis ● */
  font-size: 20px;
  background: rgba(244, 197, 66, 0.18);
  border-radius: 50%;
  color: #f4c542;
}

/* Affichage erreur + tentatives */
.kta-pin-gate-err {
  font-size: 12.5px;
  color: #ff8c8c;
  background: rgba(255, 107, 107, 0.1);
  border: 1px solid rgba(255, 107, 107, 0.3);
  border-radius: 6px;
  padding: 6px 10px;
  margin-bottom: 10px;
  line-height: 1.4;
}

.kta-pin-gate-attempts {
  font-size: 11px;
  color: #8892a4;
  margin-bottom: 14px;
  font-style: italic;
}

.kta-pin-gate-attempts-warn {
  color: #ffb380;
  font-weight: 600;
  font-style: normal;
}

/* Keypad 3×4 — 0-9 + biométrie/empty + ← */
.kta-pin-gate-keypad {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-top: 6px;
}

.kta-pin-gate-key {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: #e8eaf0;
  font-size: 22px;
  font-weight: 600;
  border-radius: 10px;
  padding: 16px 0;
  cursor: pointer;
  transition: background 0.12s, transform 0.08s;
  font-family: inherit;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
}

.kta-pin-gate-key:hover {
  background: rgba(244, 197, 66, 0.12);
  border-color: rgba(244, 197, 66, 0.3);
}

.kta-pin-gate-key:active {
  background: rgba(244, 197, 66, 0.25);
  transform: scale(0.94);
}

.kta-pin-gate-key-empty {
  visibility: hidden;
  cursor: default;
}

/* 🆕 v1.10.0-hotfix3 : bouton biométrie standalone AU-DESSUS du keypad
   (plus visible + gros + auto-prompt automatique 400ms après ouverture). */
.kta-pin-gate-bio-btn {
  display: block;
  width: 100%;
  margin: 6px 0 12px;
  padding: 12px 14px;
  background: rgba(108, 226, 138, 0.15);
  border: 1.5px solid rgba(108, 226, 138, 0.45);
  border-radius: 10px;
  color: #6ee287;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.12s, border-color 0.12s, transform 0.08s;
  font-family: inherit;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
}

.kta-pin-gate-bio-btn:hover {
  background: rgba(108, 226, 138, 0.28);
  border-color: rgba(108, 226, 138, 0.65);
}

.kta-pin-gate-bio-btn:active {
  transform: scale(0.98);
}

.kta-pin-gate-key-erase {
  background: rgba(255, 107, 107, 0.08);
  border-color: rgba(255, 107, 107, 0.25);
  color: #ff8c8c;
  font-size: 20px;
}

.kta-pin-gate-key-erase:hover {
  background: rgba(255, 107, 107, 0.2);
}

/* 🆕 v1.10.0-hotfix3 : bouton ✓ Valider (vert) — activé dès PIN_MIN
   chiffres saisis. Disabled = gris avec opacité 0.35. */
.kta-pin-gate-key-validate {
  background: rgba(108, 226, 138, 0.15);
  border-color: rgba(108, 226, 138, 0.4);
  color: #6ee287;
  font-size: 22px;
  font-weight: 700;
}

.kta-pin-gate-key-validate:hover:not(:disabled) {
  background: rgba(108, 226, 138, 0.3);
  border-color: rgba(108, 226, 138, 0.6);
}

.kta-pin-gate-key-validate:disabled {
  opacity: 0.3;
  cursor: not-allowed;
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.08);
  color: #4a5468;
}

/* Mobile : taille du keypad un poil réduite */
@media (max-width: 380px) {
  .kta-pin-gate-box { padding: 20px 18px; max-width: 100%; }
  .kta-pin-gate-icon { font-size: 36px; }
  .kta-pin-gate-titre { font-size: 18px; }
  .kta-pin-gate-key { font-size: 20px; padding: 13px 0; }
  .kta-pin-gate-key-bio { font-size: 22px; }
}

/* =====================================================================
   🚨 MODE URGENCE — v1.10.1
   Overlay plein écran avec position GPS + cap boussole en GROS, désactive
   tout le superflu. 2 thèmes : sombre (visibilité nocturne) / clair
   (lampe d'appoint).
   ===================================================================== */

.kta-emergency-overlay {
  position: fixed;
  inset: 0;
  z-index: 100003;  /* au-dessus de tout, même de la PIN gate */
  display: flex;
  /* 🐛 v1.23.0-fix1 (KARMA "modale coupée") : align-items: center centre
     verticalement, MAIS si la boîte est plus haute que le viewport (mobile
     portrait avec safe-area + minimap + 4 blocs ≈ 800-900 px), elle
     déborde par le haut ET le bas. overflow-y:auto ne peut pas scroller
     AU-DESSUS de l'origine flex → le titre 🚨 + bouton thème devenaient
     inaccessibles ("modale coupée").
     Fix : "safe center" → centre si ça rentre, fallback flex-start sinon
     (= scroll du haut vers le bas accessible). Compat Chrome 93+, Safari
     16+, FF 88+. */
  align-items: safe center;
  justify-content: center;
  padding: 16px;
  padding-top: calc(16px + env(safe-area-inset-top, 0px));
  padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  box-sizing: border-box;
  overflow-y: auto;
  animation: kta-emergency-fadein 0.2s ease-out;
}

@keyframes kta-emergency-fadein {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* 🌑 THÈME SOMBRE — visibilité nocturne sous terre */
.kta-emergency-dark {
  background: #0a0d18;
  color: #f0f4ff;
}
.kta-emergency-dark .kta-emergency-titre        { color: #ff6b6b; }
.kta-emergency-dark .kta-emergency-label        { color: #8892a4; }
.kta-emergency-dark .kta-emergency-value        { color: #f4c542; }
.kta-emergency-dark .kta-emergency-sub          { color: #c8d0e0; }
.kta-emergency-dark .kta-emergency-bloc         { background: rgba(255,255,255,0.04); border-color: rgba(244,197,66,0.25); }
.kta-emergency-dark .kta-emergency-compass      { background: rgba(244,197,66,0.08); border-color: rgba(244,197,66,0.4); }
.kta-emergency-dark .kta-emergency-compass-n    { color: #f4c542; }
.kta-emergency-dark .kta-emergency-compass-needle { color: #ff6b6b; text-shadow: 0 0 12px rgba(255,107,107,0.6); }
.kta-emergency-dark .kta-emergency-hint         { background: rgba(255,107,107,0.08); border-color: rgba(255,107,107,0.3); color: #ffb380; }
.kta-emergency-dark .kta-emergency-exit-btn     { background: #f4c542; color: #0a0d18; border-color: #f4c542; }
.kta-emergency-dark .kta-emergency-exit-btn:hover { background: #ffd860; }
.kta-emergency-dark .kta-emergency-theme-btn    { background: rgba(255,255,255,0.08); color: #f4c542; }

/* 🔆 THÈME CLAIR — lampe d'appoint, max brightness */
.kta-emergency-light {
  background: #ffffff;
  color: #0a0d18;
}
.kta-emergency-light .kta-emergency-titre        { color: #c0392b; }
.kta-emergency-light .kta-emergency-label        { color: #4a5468; }
.kta-emergency-light .kta-emergency-value        { color: #b8740b; }
.kta-emergency-light .kta-emergency-sub          { color: #2c3848; }
.kta-emergency-light .kta-emergency-bloc         { background: rgba(0,0,0,0.04); border-color: rgba(184,116,11,0.35); }
.kta-emergency-light .kta-emergency-compass      { background: rgba(184,116,11,0.1); border-color: rgba(184,116,11,0.5); }
.kta-emergency-light .kta-emergency-compass-n    { color: #b8740b; }
.kta-emergency-light .kta-emergency-compass-needle { color: #c0392b; text-shadow: 0 0 8px rgba(192,57,43,0.4); }
.kta-emergency-light .kta-emergency-hint         { background: rgba(192,57,43,0.08); border-color: rgba(192,57,43,0.35); color: #c0392b; }
.kta-emergency-light .kta-emergency-exit-btn     { background: #c0392b; color: #ffffff; border-color: #c0392b; }
.kta-emergency-light .kta-emergency-exit-btn:hover { background: #a02818; }
.kta-emergency-light .kta-emergency-theme-btn    { background: rgba(0,0,0,0.08); color: #b8740b; }

/* Layout commun aux 2 thèmes */
.kta-emergency-box {
  width: 100%;
  max-width: 720px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.kta-emergency-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 4px;
}

.kta-emergency-titre {
  font-size: 24px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-shadow: 0 0 12px rgba(255, 107, 107, 0.5);
}

.kta-emergency-theme-btn {
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1.5px solid currentColor;
  border-radius: 50%;
  background: transparent;
  font-size: 22px;
  cursor: pointer;
  transition: background 0.12s;
  font-family: inherit;
}

/* 🆕 v1.11.2-fix2 : header actions = container des contrôles à droite
   du titre. Aligne le toggle "🗺️ Itinéraire" + le bouton thème côte à côte. */
.kta-emergency-header-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}

/* Toggle "🗺️ Itinéraire" — checkbox stylée façon chip cliquable.
   En landscape mobile (cf media query plus haut), on réduit la taille pour
   ne pas écraser l'espace du header (déjà compact). */
.kta-emergency-toggle-iti {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  border: 1.5px solid currentColor;
  border-radius: 999px;
  cursor: pointer;
  font-size: 13px;
  font-weight: 600;
  background: transparent;
  transition: background 0.12s, opacity 0.12s;
  opacity: 0.7;
  user-select: none;
}
.kta-emergency-toggle-iti:hover { opacity: 1; }
.kta-emergency-toggle-iti input[type="checkbox"] {
  width: 16px;
  height: 16px;
  cursor: pointer;
  accent-color: currentColor;
  margin: 0;
}
.kta-emergency-toggle-iti input:checked ~ span,
.kta-emergency-toggle-iti:has(input:checked) {
  opacity: 1;
}
.kta-emergency-dark  .kta-emergency-toggle-iti:has(input:checked) {
  background: rgba(0, 212, 255, 0.15);
  border-color: #00d4ff;
  color: #00d4ff;
}
.kta-emergency-light .kta-emergency-toggle-iti:has(input:checked) {
  background: rgba(0, 86, 153, 0.12);
  border-color: #005699;
  color: #005699;
}

.kta-emergency-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.kta-emergency-bloc {
  border: 1.5px solid;
  border-radius: 10px;
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.kta-emergency-bloc-heading {
  grid-column: 1 / -1;  /* pleine largeur pour la boussole */
  align-items: center;
  text-align: center;
  /* 🔧 v1.10.2-fix3 : bloc heading transformé en conteneur relatif pour
     positionner le minimap full bloc + overlay centré au-dessus. */
  position: relative;
  min-height: 320px;
  padding: 0 !important;
  overflow: hidden;
  border-radius: 12px;
}

/* Overlay au-dessus du minimap.
   🔧 v1.12.0-fix3 (KARMA "met le SE/S en dessous de CAP plus logique, et
   descend encore un peu les degrés vu qu'on a gagné de la place en bas") :
     - TOP    = 🧭 CAP + cardinal (SE/S/N/...) groupés via .heading-top
     - CENTRE = libre (minimap + marker boussole visibles)
     - BOTTOM = degrés en gros (187°), poussés tout en bas */
.kta-emergency-bloc-heading-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  z-index: 2;
  pointer-events: none;  /* le minimap derrière ne reçoit pas de clics non plus */
  padding: 10px 14px 0 14px;  /* bottom 0 → degrés collés au bord */
}
.kta-emergency-bloc-heading-overlay > * {
  pointer-events: auto;  /* mais les enfants restent interactifs (clic compass futur) */
}

/* TOP group : 🧭 CAP + cardinal (SE/S/N/...) empilés sans gap excessif */
.kta-emergency-heading-top {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}

.kta-emergency-bloc-meta {
  grid-column: 1 / -1;
}

.kta-emergency-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  opacity: 0.85;
}

.kta-emergency-value {
  font-size: 32px;
  font-weight: 700;
  font-family: "SF Mono", Monaco, Consolas, monospace;
  letter-spacing: -0.02em;
  line-height: 1.1;
}

.kta-emergency-pos-gps {
  font-size: 22px;  /* GPS un peu plus petit (longs floats) */
}

.kta-emergency-sub {
  font-size: 12.5px;
  font-style: italic;
  margin-top: 2px;
}

/* Heading bloc — texte par-dessus le minimap, donc halo prononcé pour lisibilité */
.kta-emergency-heading-num {
  font-size: 56px;
  font-weight: 800;
  text-shadow: 0 0 12px rgba(0, 0, 0, 0.85),
               0 0 24px rgba(0, 0, 0, 0.6);
}

.kta-emergency-heading-card {
  font-size: 28px;
  font-weight: 700;
  opacity: 0.95;
  text-shadow: 0 0 8px rgba(0, 0, 0, 0.8),
               0 0 16px rgba(0, 0, 0, 0.5);
}

/* Thème clair : halo blanc au lieu de noir */
.kta-emergency-light .kta-emergency-heading-num,
.kta-emergency-light .kta-emergency-heading-card {
  text-shadow: 0 0 12px rgba(255, 255, 255, 0.95),
               0 0 24px rgba(255, 255, 255, 0.7);
}
.kta-emergency-light .kta-emergency-bloc-heading-overlay .kta-emergency-label {
  text-shadow: 0 0 8px rgba(255, 255, 255, 0.9);
}
.kta-emergency-dark .kta-emergency-bloc-heading-overlay .kta-emergency-label {
  text-shadow: 0 0 8px rgba(0, 0, 0, 0.85);
}

/* 🔧 v1.12.0-fix (KARMA "le CAP et le S en bas (ou N, SE...) doit être en
   orange chartre") : label "🧭 CAP" + cardinal (N/S/SE/...) en jaune
   charte #f4c542 (dark) / ocre #b8740b (light), cohérent avec l'ancien
   compass-n et le ring jaune de la nouvelle boussole tracker.
   Le num (degrés en gros) garde sa couleur d'origine (blanc dark / sombre
   light) pour rester lisible en grand. */
.kta-emergency-dark  .kta-emergency-bloc-heading-overlay .kta-emergency-label,
.kta-emergency-dark  .kta-emergency-heading-card {
  color: #f4c542;
}
.kta-emergency-light .kta-emergency-bloc-heading-overlay .kta-emergency-label,
.kta-emergency-light .kta-emergency-heading-card {
  color: #b8740b;
}

/* 🔧 v1.12.0-fix (KARMA "et cap en gras, plus visible") : override le
   label CAP uniquement (scoped à l'overlay heading) pour qu'il soit
   plus gras et plus gros que les autres labels (📍 POSITION, 🔋 ÉTAT,
   etc.) qui restent en 11px / opacity 0.85. */
.kta-emergency-bloc-heading-overlay .kta-emergency-label {
  font-size: 16px;
  font-weight: 900;
  letter-spacing: 0.12em;
  opacity: 1;
}

.kta-emergency-compass {
  margin-top: 8px;
  width: 160px;
  height: 160px;
  border: 3px solid;
  border-radius: 50%;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  /* 🔧 v1.10.2-fix8 (KARMA "ca parait flooté dans le rond, défloute") :
     - retrait du backdrop-filter: blur(2px) qui floutait la portion de
       minimap derrière le cercle compass (cause principale du "flou
       dans le rond")
     - background plus opaque pour compenser (lisibilité conservée sans
       blur, mais on voit moins la map à travers le cercle — compromis
       acceptable car le bloc heading entier montre déjà la map en
       background, le rond compass est juste là pour cadrer l'aiguille). */
  background: rgba(0, 0, 0, 0.55);
}
/* Thème clair : fond clair plus opaque sans blur */
.kta-emergency-light .kta-emergency-compass {
  background: rgba(255, 255, 255, 0.7);
}

/* 🆕 v1.10.2 + fix3 (KARMA "il peut prendre tout le rectangle cap") :
   minimap Leaflet remplit TOUT le bloc heading (pas juste le rond compass).
   Position absolute inset:0 → fill le bloc parent.
   border-radius hérite du parent (12px du bloc, pas 50%). */
.kta-emergency-mini-map {
  position: absolute;
  inset: 0;
  z-index: 0;
  border-radius: inherit;
  overflow: hidden;  /* clip Leaflet tiles à l'arrondi */
}

/* 🔧 v1.10.2-fix4 (KARMA "affiche les roads c'est utile pour trouver son
   chemin") : filter appliqué UNIQUEMENT à l'image base du plan, pas à
   tout le minimap. Les polylines roads restent vives et lisibles. Cible
   .leaflet-image-layer (= l'imageOverlay du plan). Les polylines sont
   rendues sur canvas/SVG dans .leaflet-overlay-pane au-dessus, donc non
   affectées par ce filter.
   🔧 v1.10.2-fix8 (KARMA "un peu moins en map, défloute") :
   - brightness 0.55 → 0.72 (moins assombri, plus net visuellement)
   - saturate 0.4 → 0.55 (un peu plus de couleurs, moins terne)
   La map reste désaturée pour ne pas voler la vedette aux annotations,
   mais elle est plus claire et lisible. */
.kta-emergency-mini-map .leaflet-image-layer {
  filter: brightness(0.72) saturate(0.55);
}
/* Override le background des tiles Leaflet pour le thème */
.kta-emergency-dark  .kta-emergency-mini-map .leaflet-container { background: #0a0d18; }
.kta-emergency-light .kta-emergency-mini-map .leaflet-container { background: #f0e8d8; }
/* Cache les controls Leaflet du mini (zoom, attribution) — déjà desactivés
   en JS mais double sécurité CSS */
.kta-emergency-mini-map .leaflet-control-container,
.kta-emergency-mini-map .leaflet-bottom { display: none !important; }

/* 🆕 v1.12.0-fix : mode "sans image de fond" — appliqué quand l'user a choisi
   "Continuer sans image" sur la modale d'avertissement d'image volumineuse,
   ou quand baseImage est indisponible. Background discrètement texturé pour
   indiquer visuellement l'absence d'image (au lieu d'un noir/beige plat qui
   pourrait laisser penser à un bug). Les roads/zones/structures vectoriels
   restent parfaitement visibles. */
.kta-emergency-mini-map.kta-em-mini-map-noimg .leaflet-container {
  background-image:
    linear-gradient(45deg, rgba(255,255,255,0.03) 25%, transparent 25%),
    linear-gradient(-45deg, rgba(255,255,255,0.03) 25%, transparent 25%);
  background-size: 16px 16px;
}
.kta-emergency-light .kta-emergency-mini-map.kta-em-mini-map-noimg .leaflet-container {
  background-image:
    linear-gradient(45deg, rgba(0,0,0,0.04) 25%, transparent 25%),
    linear-gradient(-45deg, rgba(0,0,0,0.04) 25%, transparent 25%);
}

/* 🆕 v1.12.0-fix (KARMA "on mais le centre de la bousole triangle rouge a
   ma position, et le rond rouge sur le cercle jaune bouge pour indiquer le
   nord") : marker tracker stylisé en boussole attachée à la position.
   Remplace l'ancien gros compass widget centré + le L.circleMarker rouge.
   Structure :
     - .kta-em-mini-tracker-ring     = cercle jaune (cadran)
     - .kta-em-mini-tracker-rotor    = container rotatif (tient le point N)
     - .kta-em-mini-tracker-north-dot = point rouge sur le cercle
     - .kta-em-mini-tracker-triangle = triangle rouge centré (position) */
.kta-em-mini-tracker-wrap {
  pointer-events: none;
  background: none !important;
  border: none !important;
}
/* 🔧 v1.12.0-fix (KARMA "affiche le triangle rouge le rond jaune en
   légérement plus gros (x2)") : toutes les tailles doublées. */
.kta-em-mini-tracker {
  position: relative;
  width: 104px;
  height: 104px;
}
.kta-em-mini-tracker-ring {
  position: absolute;
  inset: 8px;
  border: 3px solid #f4c542;       /* jaune charte (épaissi à 3px pour bon ratio) */
  border-radius: 50%;
  background: rgba(10, 13, 24, 0.35);
  box-shadow: 0 0 14px rgba(244, 197, 66, 0.55);
}
.kta-em-mini-tracker-rotor {
  position: absolute;
  inset: 8px;
  pointer-events: none;
  /* origin au centre pour rotation propre. Pas de transition CSS — le
     polling boussole gère la cadence (250ms throttle 1°). */
  transform-origin: center center;
  will-change: transform;
}
/* 🔧 v1.12.0-fix (KARMA "le triangle ne tourne plus dans la direction où
   on va") : rotor séparé pour le triangle, tourne avec +heading via
   _updateTrackerTriangleRotor. Origin centre, full size pour que la
   rotation soit propre autour de la pointe centrée du triangle. */
.kta-em-mini-tracker-triangle-rotor {
  position: absolute;
  inset: 0;
  pointer-events: none;
  transform-origin: center center;
  will-change: transform;
}
.kta-em-mini-tracker-north-dot {
  position: absolute;
  top: -10px;                      /* posé juste à l'extérieur du ring */
  left: 50%;
  transform: translateX(-50%);
  width: 20px;
  height: 20px;
  background: #ff3b30;
  border: 2.5px solid #fff;
  border-radius: 50%;
  box-shadow: 0 0 10px rgba(255, 59, 48, 0.85), 0 0 18px rgba(255, 59, 48, 0.45);
}
.kta-em-mini-tracker-triangle {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -52%);   /* léger ajustement vertical pour centrer la pointe */
  color: #ff3b30;
  font-size: 44px;
  line-height: 1;
  font-weight: 900;
  filter:
    drop-shadow(0 0 7px rgba(255, 59, 48, 0.85))
    drop-shadow(0 0 14px rgba(255, 59, 48, 0.45));
}
/* Thème clair : adapte le ring et les dots */
.kta-emergency-light .kta-em-mini-tracker-ring {
  border-color: #b8740b;
  background: rgba(240, 232, 216, 0.5);
  box-shadow: 0 0 8px rgba(184, 116, 11, 0.45);
}
.kta-emergency-light .kta-em-mini-tracker-north-dot {
  background: #c0392b;
  border-color: #fff;
  box-shadow: 0 0 6px rgba(192, 57, 43, 0.7);
}
.kta-emergency-light .kta-em-mini-tracker-triangle {
  color: #c0392b;
  filter:
    drop-shadow(0 0 3px rgba(192, 57, 43, 0.7))
    drop-shadow(0 0 7px rgba(192, 57, 43, 0.35));
}

.kta-emergency-compass-needle {
  font-size: 60px;
  line-height: 1;
  /* 🔧 v1.10.2-fix1 : transition retirée pour rotation unwrapped — la
     transition causait un flicker visuel quand la valeur appliquée
     dépassait ±360°. Le throttle 1° + polling 250ms suffit à un
     mouvement fluide perçu sans transition CSS. */
  transform-origin: center 50%;
  position: relative;
  z-index: 2;  /* devant le minimap */
  /* Glow rouge accentué pour rester lisible par-dessus le minimap */
  filter: drop-shadow(0 0 10px rgba(255, 107, 107, 0.85))
          drop-shadow(0 0 18px rgba(255, 107, 107, 0.55));
}

.kta-emergency-compass-n {
  position: absolute;
  top: 6px;
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 0.1em;
  z-index: 2;  /* devant le minimap */
  /* Halo pour rester lisible */
  text-shadow: 0 0 6px currentColor, 0 0 12px rgba(0,0,0,0.6);
}

/* Meta bloc — lignes label / value */
.kta-emergency-meta-row {
  display: flex;
  justify-content: space-between;
  font-size: 14px;
  padding: 4px 0;
  border-bottom: 1px dashed rgba(127, 127, 127, 0.2);
}
.kta-emergency-meta-row:last-child { border-bottom: none; }
.kta-emergency-meta-label { font-weight: 600; letter-spacing: 0.04em; }
.kta-emergency-meta-value { font-family: "SF Mono", Monaco, Consolas, monospace; }

/* Hint */
.kta-emergency-hint {
  font-size: 13px;
  line-height: 1.5;
  padding: 12px 16px;
  border: 1.5px solid;
  border-radius: 8px;
}

/* Bouton sortir — gros et visible */
.kta-emergency-exit-btn {
  padding: 18px 20px;
  font-size: 16px;
  font-weight: 800;
  letter-spacing: 0.08em;
  border: 2px solid;
  border-radius: 12px;
  cursor: pointer;
  transition: background 0.15s;
  font-family: inherit;
  text-transform: uppercase;
}

/* Mobile compact : grille 1 colonne, heading bloc plus compact */
@media (max-width: 540px) {
  .kta-emergency-grid       { grid-template-columns: 1fr; }
  .kta-emergency-titre      { font-size: 19px; }
  .kta-emergency-value      { font-size: 26px; }
  .kta-emergency-pos-gps    { font-size: 18px; }
  .kta-emergency-heading-num { font-size: 44px; }
  .kta-emergency-heading-card { font-size: 22px; }
  .kta-emergency-bloc-heading { min-height: 260px; }
  .kta-emergency-compass    { width: 130px; height: 130px; }
  .kta-emergency-compass-needle { font-size: 48px; }
  .kta-emergency-exit-btn   { padding: 16px; font-size: 14px; }
}

/* 🆕 v1.11.2-fix (KARMA "décalage en horizontal mode urgence") : layout
   landscape mobile dédié. Sur écran bas (≤ 500px haut) en landscape, on
   force 2 colonnes (sinon scroll vertical bloqué) + tailles réduites
   pour que tout rentre sans scroll. La minimap se redimensionne via
   le listener orientationchange (cf emergencyMode.js > _orientationListener). */
@media (max-height: 500px) and (orientation: landscape) {
  .kta-emergency-overlay    { padding: 8px; padding-top: calc(8px + env(safe-area-inset-top, 0px)); padding-bottom: calc(8px + env(safe-area-inset-bottom, 0px)); }
  .kta-emergency-box        { max-width: none; gap: 8px; }
  .kta-emergency-grid       { grid-template-columns: 1fr 1fr; gap: 8px; }
  .kta-emergency-titre      { font-size: 17px; }
  .kta-emergency-value      { font-size: 22px; }
  .kta-emergency-pos-gps    { font-size: 16px; }
  .kta-emergency-heading-num { font-size: 32px; }
  .kta-emergency-heading-card { font-size: 18px; }
  .kta-emergency-bloc       { padding: 8px 10px; }
  .kta-emergency-bloc-heading { min-height: 160px; }
  .kta-emergency-compass    { width: 90px; height: 90px; }
  .kta-emergency-compass-needle { font-size: 34px; }
  .kta-emergency-exit-btn   { padding: 10px; font-size: 12px; }
  .kta-emergency-mini-map   { min-height: 140px; }
  /* Toggle "🗺️ Itinéraire" réduit en landscape pour ne pas surcharger header */
  .kta-emergency-header-actions { gap: 8px; }
  .kta-emergency-toggle-iti { padding: 4px 8px; font-size: 11px; gap: 4px; }
  .kta-emergency-toggle-iti input[type="checkbox"] { width: 13px; height: 13px; }
  .kta-emergency-theme-btn { width: 36px; height: 36px; font-size: 18px; }
}

/* =====================================================================
   MODALE PROPOSITION D'ACTIVATION POST-UPDATE (v1.10.0)
   One-shot après update : invite l'user à activer le PIN. Si refus → flag
   localStorage qui empêche de re-proposer. Style modale charte classique.
   ===================================================================== */
.kta-pin-proposal-boite {
  max-width: 520px !important;
  border: 1.5px solid rgba(244, 197, 66, 0.35) !important;
  box-shadow: 0 8px 40px rgba(244, 197, 66, 0.15) !important;
  /* 🆕 v1.11.1-fix (KARMA "trop long en hauteur sur PC, moitié vide") :
     même cas que la modale Export Images (v1.9.2-fix14). Le parent
     .kta-readme-modal-boite a un height: 88vh sur PC qui étire la
     boîte malgré son contenu court (~250px). On force height: auto
     + max-height pour limiter au contenu réel, comme on l'a fait pour
     .kta-export-modal-boite et .kta-pdf-modal-boite. */
  height: auto !important;
  max-height: 90vh !important;
}

.kta-pin-proposal-info {
  margin: 12px 0;
  padding: 10px 14px;
  background: rgba(140, 180, 255, 0.06);
  border: 1px solid rgba(140, 180, 255, 0.2);
  border-radius: 6px;
}

.kta-pin-proposal-info-titre {
  font-size: 13px;
  font-weight: 700;
  color: #8cb4ff;
  margin-bottom: 4px;
}

.kta-pin-proposal-info p {
  margin: 0;
  font-size: 13px;
  color: #c8d0e0;
  line-height: 1.5;
}

/* =====================================================================
   GATE PLEIN ÉCRAN — variante LOCKOUT (5 tentatives échouées)
   ===================================================================== */
.kta-pin-gate-overlay-lockout {
  background: linear-gradient(135deg, #1a0808 0%, #2a0a0a 100%);
}

.kta-pin-gate-box-lockout {
  border-color: rgba(255, 107, 107, 0.5);
  box-shadow: 0 8px 50px rgba(255, 107, 107, 0.25);
}

.kta-pin-gate-box-lockout .kta-pin-gate-titre {
  color: #ff8c8c;
}

.kta-pin-gate-lockout-explication {
  font-size: 13px;
  color: #c8d0e0;
  background: rgba(255, 107, 107, 0.06);
  border: 1px solid rgba(255, 107, 107, 0.2);
  border-radius: 6px;
  padding: 12px 14px;
  margin-top: 10px;
  text-align: left;
  line-height: 1.5;
}

.kta-pin-gate-lockout-explication p {
  margin: 0 0 8px;
}

.kta-pin-gate-lockout-explication p:last-child {
  margin-bottom: 0;
}

/* 🆕 v1.9.3-B1d.γ.2 (revisité KARMA "pas très clair") :
   Encadré dédié pour l'import ZIP datalayer, mis en avant pour que l'user
   le voie immédiatement (au lieu d'être caché dans le titre de section). */
.kta-planner-import-zip-box {
  margin: 10px 0;
  padding: 12px 14px;
  background: rgba(244, 197, 66, 0.06);
  border: 1px dashed rgba(244, 197, 66, 0.35);
  border-radius: 8px;
}

.kta-planner-import-zip-titre {
  font-size: 13px;
  font-weight: 700;
  color: #f4c542;
  margin-bottom: 6px;
}

.kta-planner-import-zip-hint {
  margin: 0 0 10px;
  font-size: 12px;
  color: #c8d0e0;
  line-height: 1.5;
}

.kta-planner-import-zip-btn {
  width: 100%;
  padding: 9px 12px !important;
  font-size: 13px !important;
}

.kta-planner-icon-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 8px;
  font-size: 11px;
  color: #8892a4;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  border-bottom: 1px solid rgba(255,255,255,0.06);
  margin-bottom: 4px;
}

.kta-planner-icon-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  border-bottom: 1px solid rgba(255,255,255,0.04);
}

.kta-planner-icon-row:last-child { border-bottom: none; }

.kta-planner-icon-thumb {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255,255,255,0.04);
  border-radius: 6px;
  flex-shrink: 0;
}

.kta-planner-icon-path {
  font-size: 11px;
  color: #8892a4;
  flex: 1;
  /* 🐛 v1.44.5 — min-width:0 indispensable : sans ça, le flex item garde son
     min-width:auto (= largeur du contenu intrinsèque), ce qui annule
     text-overflow:ellipsis et laisse une data URL SVG longue (icône
     entree_plan) déborder + élargir toute la modale. */
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  padding-left: 4px;
}

/* =========================
   GROUPES ACCORDÉON — barre latérale 8 groupes
   ========================= */

/* Boutons principaux : tailles d'origine (32×32, 16px) — voir bloc général .leaflet-bar a */

/* Coller les groupes verticalement au maximum */
.leaflet-top.leaflet-right .leaflet-control + .leaflet-control {
  margin-top: 2px !important;
}

/* Sous-action : même taille que les boutons principaux, fond plus sombre */
.leaflet-bar a.kta-sub {
  background: #141823 !important;
  border-bottom: 1px solid rgba(255,255,255,0.04) !important;
}

.leaflet-bar a.kta-sub:hover {
  background: #1f2638 !important;
}

/* Classe pour cacher les sous-actions (force priority sur display: block !important) */
.leaflet-bar a.kta-hidden {
  display: none !important;
}

/* Animation d'apparition des sous-actions */
.kta-sub-anim {
  animation: kta-slide-in 0.18s ease-out;
}

@keyframes kta-slide-in {
  from {
    opacity: 0;
    transform: translateY(-4px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Bouton principal d'un groupe quand il est ouvert (sous-actions visibles) */
.leaflet-bar a.kta-group-open {
  background: #2a3145 !important;
  color: #8cb4ff !important;
}

/* 🆕 v1.8.0 : Bouton principal quand le groupe a un MODE ACTIF en cours
   (tracker en Play, mesure active, mode tracé route en cours, etc.).
   Indicateur visuel discret persistant qui survit à la fermeture du
   groupe — sans ça, après le fix v1.8.0 qui autorise la fermeture du
   groupe en mode actif, l'user n'aurait plus aucun feedback visuel.

   Petit point pulsant en haut-droite + bordure d'accent jaune douce.
   Compatible avec .kta-group-open (s'ajoute, ne conflicte pas). */
.leaflet-bar a.kta-group-mode-actif {
  position: relative;
  border-color: rgba(244, 197, 66, 0.6) !important;
  box-shadow: 0 0 0 1px rgba(244, 197, 66, 0.3) inset;
}
.leaflet-bar a.kta-group-mode-actif::after {
  content: "";
  position: absolute;
  top: 4px;
  right: 4px;
  width: 7px;
  height: 7px;
  background: #f4c542;
  border-radius: 50%;
  box-shadow: 0 0 4px 1px rgba(244, 197, 66, 0.6);
  animation: kta-group-mode-pulse 1.6s ease-in-out infinite;
  pointer-events: none;
}
@keyframes kta-group-mode-pulse {
  0%, 100% { opacity: 1;   transform: scale(1);   }
  50%      { opacity: 0.5; transform: scale(0.8); }
}

/* =========================
   FIX MOBILE PAYSAGE — barre dans le cadre
   ========================= */

/* Sur mobile en mode paysage, la hauteur est très réduite (≤ 500px).
   On scrollifie les zones de contrôles (gauche + droite) pour qu'aucune
   icône ne sorte du cadre, même quand un groupe accordéon est ouvert avec
   plusieurs sous-actions.

   🔧 v170 fix critique : Leaflet utilise float: left/right + clear: both
   sur .leaflet-control (héritage IE compat — voir lib/leaflet/leaflet.css
   lignes 156-162). Avec ce layout floating, le PARENT ne "voit" PAS la
   hauteur de ses enfants flottants → max-height + overflow-y: auto NE
   DÉCLENCHE PAS le scroll, et les enfants sortent visuellement.
   La règle existante (avant ce fix) ne marchait donc pas en pratique.

   Solution : on bascule le container en `display: flex; flex-direction:
   column;`. Les enfants deviennent des flex items (les `float` sont
   ignorés sur les flex items par spec CSS), leur hauteur est comptée,
   l'overflow scroll natif s'active proprement. `align-items: flex-end`
   pour préserver l'alignement à droite (équivalent du float: right
   d'origine).

   ⚠️ NE PAS appliquer ces règles hors landscape mobile — desktop et
   portrait n'ont pas besoin du scroll (assez de hauteur) et le float
   natif Leaflet est OK dans ces cas. */
@media (max-height: 500px) {
  /* SIDEBAR DROITE — 11 groupes accordéon + layers control */
  .leaflet-top.leaflet-right {
    /* Tenir compte des safe-area iOS (notch + home indicator) en plus
       de la marge esthétique 16px. Sans cela, sur iPhone 14 landscape
       avec home indicator, les derniers boutons étaient cachés sous
       la zone tactile réservée. */
    max-height: calc(100vh - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px) - 16px);
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    /* 🔧 Bascule float → flex (cf. commentaire d'en-tête). */
    display: flex;
    flex-direction: column;
    align-items: flex-end;
  }
  .leaflet-top.leaflet-right::-webkit-scrollbar { display: none; }

  /* SIDEBAR GAUCHE — zoom + bouton niveau (multi-niveau) + boussole.
     Moins de boutons donc moins critique, mais on applique le même
     pattern pour cohérence et anticipation (ex: si on ajoute un futur
     contrôle topleft, il ne créera pas de débordement silencieux). */
  .leaflet-top.leaflet-left {
    max-height: calc(100vh - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px) - 16px);
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
  }
  .leaflet-top.leaflet-left::-webkit-scrollbar { display: none; }

  /* Réduire légèrement les boutons en paysage pour gagner de la place
     (cumul avec le scroll : si l'user a peu de groupes ouverts, tout
     reste visible sans scroll grâce aux boutons 28px ; sinon le scroll
     prend le relais sans aucun débordement). */
  .leaflet-bar a {
    width: 28px !important;
    height: 28px !important;
    line-height: 28px !important;
    font-size: 14px !important;
  }

  /* Réduire l'espacement entre groupes (déjà actif avant le fix flex,
     plus efficace maintenant car compté correctement dans le scroll). */
  .leaflet-top.leaflet-right .leaflet-control + .leaflet-control {
    margin-top: 1px !important;
  }
  .leaflet-top.leaflet-left .leaflet-control + .leaflet-control {
    margin-top: 1px !important;
  }
}

/* Footer du modal Documentation — crédit Leaflet + signature auteur (cohérence avec le splash) */
.kta-readme-modal-footer {
  flex-shrink: 0;
  padding: 9px 18px 10px;
  border-top: 1px solid rgba(255,255,255,0.08);
  font-size: 11px;
  color: #6c7689;
  letter-spacing: 0.02em;
  text-align: center;
  user-select: none;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  flex-wrap: wrap;
}

.kta-readme-modal-by {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.kta-readme-modal-by img {
  height: 18px;
  width: auto;
  object-fit: contain;
  filter: drop-shadow(0 1px 4px rgba(244, 197, 66, 0.25));
}

/* Bouton "↑ Retour en haut" — absolute, ancré bas-droite du layout (4:c) */
.kta-readme-back-top {
  position: absolute;
  bottom: 14px;
  right: 16px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: #f4c542;
  color: #1a1f2e;
  border: none;
  font-size: 17px;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(0,0,0,0.55);
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.2s ease, transform 0.2s ease;
  pointer-events: none;
  z-index: 5;
}

.kta-readme-back-top.visible {
  opacity: 0.92;
  transform: translateY(0);
  pointer-events: auto;
}

.kta-readme-back-top:hover { opacity: 1; }
.kta-readme-back-top:active { transform: translateY(1px); }

/* RESPONSIVE — sous 800px : sidebar bascule en haut (si visible) */
/* 🐛 v1.40.38 — height → max-height pour cohérence avec les autres breakpoints */
@media (max-width: 800px) {
  .kta-readme-modal-boite {
    max-height: 92vh;
  }
  .kta-readme-modal-layout {
    flex-direction: column;
  }
  .kta-readme-toc-sidebar {
    width: auto;
    max-height: 35vh;
    flex-shrink: 0;
    border-right: none;
    border-bottom: 1px solid rgba(255,255,255,0.08);
    padding: 12px 12px 14px;
    transition: max-height 0.25s ease, padding 0.25s ease, opacity 0.2s ease;
  }
  /* En mode masqué sur mobile : on collapse la hauteur au lieu de la largeur */
  .kta-readme-modal-layout.toc-hidden .kta-readme-toc-sidebar {
    width: auto;
    max-height: 0;
    padding-top: 0;
    padding-bottom: 0;
    border-bottom: none;
  }
  .kta-readme-modal-corps {
    padding: 18px 18px 22px;
  }
  .kta-readme-back-top {
    width: 40px;
    height: 40px;
    bottom: 12px;
    font-size: 18px;
  }
}

@media (max-width: 480px) {
  .kta-readme-toc-sidebar {
    max-height: 32vh;
  }
  .kta-readme-corps { font-size: 13px; }
  .kta-readme-corps h1 { font-size: 19px; }
  .kta-readme-corps h2 { font-size: 16px; margin-top: 24px; }
  .kta-readme-corps h3 { font-size: 14px; }
}

@media (max-width: 640px) {
  .kta-readme-toc ul {
    columns: 1;
  }
}

/* ══════════════════════════════════════════════
   MODALE OOM — affichée au boot quand un kill mémoire a été détecté
   Style : reprend le shell .kta-readme-modal-overlay/.boite (déjà défini
   ailleurs) + classes spécifiques au contenu.
   ATTENTION visuelle voulue : bordures rouges, titre énorme avec
   ⚠️ de chaque côté, pour que l'utilisateur ne rate pas le message.
   ══════════════════════════════════════════════ */
.kta-oom-modal-boite {
  max-width: 600px;
  border: 2px solid #ff6b6b !important;
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.7),
              0 0 0 1px rgba(255, 107, 107, 0.35),
              0 0 30px rgba(255, 107, 107, 0.15);
}

.kta-oom-header {
  border-bottom: 2px solid rgba(255, 107, 107, 0.35) !important;
  background: rgba(255, 107, 107, 0.04);
  padding: 18px 16px !important;
}

.kta-oom-titre-big {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  flex: 1;
  font-size: 18px;
  font-weight: 800;
  color: #ff6b6b;
  letter-spacing: 0.08em;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.6);
}

.kta-oom-warn-side {
  font-size: 24px;
  line-height: 1;
  flex-shrink: 0;
  /* léger pulse pour attirer l'œil sans agresser */
  animation: kta-oom-warn-pulse 1.6s ease-in-out infinite;
}

.kta-oom-titre-text {
  flex: 1;
  text-align: center;
}

@keyframes kta-oom-warn-pulse {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.15); }
}

@media (max-width: 480px) {
  .kta-oom-titre-big       { font-size: 14px; gap: 8px; }
  .kta-oom-warn-side       { font-size: 20px; }
  .kta-oom-titre-text      { letter-spacing: 0.04em; }
  .kta-oom-header          { padding: 14px 12px !important; }
}

.kta-oom-corps {
  padding: 18px 22px 4px;
}

.kta-oom-intro {
  font-size: 14px;
  color: #e8eaf0;
  line-height: 1.55;
  padding: 12px 14px;
  background: rgba(255, 107, 107, 0.08);
  border-left: 3px solid #ff6b6b;
  border-radius: 6px;
  margin-bottom: 18px;
}

.kta-oom-section {
  margin-bottom: 18px;
}

.kta-oom-section-titre {
  font-size: 13px;
  font-weight: 700;
  color: #8cb4ff;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 8px;
}

.kta-oom-corps p {
  font-size: 13px;
  line-height: 1.55;
  color: #c8d0e0;
  margin: 0;
}

.kta-oom-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.kta-oom-list li {
  position: relative;
  padding: 8px 10px 8px 26px;
  font-size: 13px;
  line-height: 1.55;
  color: #c8d0e0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}

.kta-oom-list li:last-child {
  border-bottom: none;
}

.kta-oom-list li::before {
  content: "→";
  position: absolute;
  left: 8px;
  top: 8px;
  color: #ff6b6b;
  font-weight: 700;
}

.kta-oom-list strong {
  color: #e8eaf0;
}

.kta-oom-tech {
  background: rgba(255, 255, 255, 0.03);
  border-radius: 6px;
  padding: 10px 12px;
}

.kta-oom-tech code {
  font-family: 'Courier New', monospace;
  font-size: 11px;
  color: #8cb4ff;
}

.kta-oom-actions {
  display: flex;
  justify-content: flex-end;
  padding: 12px 22px 16px;
  border-top: 2px solid rgba(255, 107, 107, 0.18);
}

.kta-oom-leaving {
  animation: kta-oom-fade-out 0.22s ease-in forwards;
}

@keyframes kta-oom-fade-out {
  to { opacity: 0; }
}

/* ══════════════════════════════════════════════
   TOAST — notification non-intrusive (OOMGuard, etc.)
   Aligné sur la charte : carte dark #1a1f2e, bordure subtile blanche
   (idem #kta-titre-fixe et autres cards). Accent couleur uniquement
   sur la barre gauche selon le type (jaune / rouge / bleu).
   ══════════════════════════════════════════════ */
.kta-toast {
  position: fixed;
  top: calc(60px + env(safe-area-inset-top, 0px));
  left: 50%;
  transform: translateX(-50%);
  max-width: min(440px, calc(100vw - 24px));
  background: #1a1f2e;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-left: 3px solid #f4c542;
  border-radius: 10px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.45);
  padding: 11px 12px 11px 13px;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  z-index: 100000;
  font-size: 13px;
  color: #c8d0e0;
  line-height: 1.45;
  animation: kta-toast-in 0.3s ease-out both;
}

.kta-toast-error {
  border-left-color: #ff6b6b;
}

.kta-toast-info {
  border-left-color: #8cb4ff;
}

.kta-toast-leaving {
  animation: kta-toast-out 0.25s ease-in both;
}

.kta-toast-icon {
  font-size: 16px;
  line-height: 1.4;
  flex-shrink: 0;
}

.kta-toast-msg {
  flex: 1;
  word-wrap: break-word;
  color: #e8eaf0;
}

.kta-toast-close {
  background: transparent;
  border: none;
  color: #8892a4;
  font-size: 14px;
  cursor: pointer;
  padding: 0 4px;
  flex-shrink: 0;
  transition: color 0.15s;
}

.kta-toast-close:hover {
  color: #e8eaf0;
}

@keyframes kta-toast-in {
  from { opacity: 0; transform: translate(-50%, -10px); }
  to   { opacity: 1; transform: translate(-50%, 0); }
}

@keyframes kta-toast-out {
  from { opacity: 1; transform: translate(-50%, 0); }
  to   { opacity: 0; transform: translate(-50%, -10px); }
}

/* ══════════════════════════════════════════════
   ITINÉRAIRE — modale + waypoints
   ══════════════════════════════════════════════ */
.kta-iti-modal-boite {
  max-width: 540px;
  /* 🔧 v1.13.0-fix16 : fix hauteur 88vh étirée pour cette modale courte */
  height: auto !important;
  max-height: 90vh !important;
}

.kta-iti-corps {
  padding: 18px 22px;
}

.kta-iti-section {
  margin-bottom: 18px;
}

.kta-iti-section-titre {
  font-size: 13px;
  font-weight: 700;
  color: #8cb4ff;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 10px;
}

.kta-iti-help {
  font-size: 12px;
  color: #8892a4;
  margin: 0 0 10px;
  line-height: 1.5;
}

/* 🚫 v169 (Karma_dev) : Section preferences d'evitement de l'itineraire.
   Repliee par defaut via <details>, ouverture au clic du <summary>. */
.kta-iti-avoid-details summary {
  outline: none;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
  padding: 4px 0;
}
.kta-iti-avoid-details summary::-webkit-details-marker { display: none; }
.kta-iti-avoid-details summary::before {
  content: "▶ ";
  display: inline-block;
  font-size: 11px;
  color: #8892a4;
  transition: transform 0.2s;
  margin-right: 4px;
}
.kta-iti-avoid-details[open] summary::before {
  content: "▼ ";
}
.kta-iti-avoid-group {
  margin: 12px 0;
  padding: 10px;
  background: rgba(255, 153, 51, 0.04);
  border: 1px solid rgba(255, 153, 51, 0.18);
  border-radius: 6px;
}
.kta-iti-avoid-group-titre {
  font-size: 12px;
  font-weight: 600;
  color: #ffb266;
  margin-bottom: 6px;
}
.kta-iti-avoid-search-wrap {
  position: relative;
  margin-bottom: 6px;
}
.kta-iti-avoid-byid-wrap {
  display: flex;
  gap: 6px;
  align-items: center;
  margin-bottom: 8px;
}
.kta-iti-avoid-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 6px;
}
.kta-iti-avoid-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 4px 4px 10px;
  background: rgba(255, 153, 51, 0.18);
  border: 1px solid rgba(255, 153, 51, 0.45);
  border-radius: 14px;
  font-size: 12px;
  color: #ffe4c2;
}
.kta-iti-avoid-chip-remove {
  background: rgba(255, 255, 255, 0.10);
  border: none;
  color: #fff;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  cursor: pointer;
  font-size: 11px;
  line-height: 1;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.kta-iti-avoid-chip-remove:hover {
  background: #dc3545;
}
.kta-iti-avoid-tags-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.kta-iti-avoid-tag-chip {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 14px;
  padding: 4px 12px;
  font-size: 12px;
  color: #c8d0e0;
  font-family: inherit;
  cursor: pointer;
  transition: all 0.15s;
}
.kta-iti-avoid-tag-chip:hover {
  background: rgba(255, 153, 51, 0.10);
  border-color: rgba(255, 153, 51, 0.40);
  color: #ffe4c2;
}
.kta-iti-avoid-tag-chip-active {
  background: rgba(255, 153, 51, 0.25);
  border-color: #ff9933;
  color: #fff;
}
.kta-iti-avoid-tag-chip-active:hover {
  background: rgba(255, 153, 51, 0.35);
}

/* 🚫 v169 (Karma_dev) : floater orange pour le mode clic carte d'évitement
   (différent du floater cyan des waypoints itinéraire pour éviter la confusion).
   Hérite de .kta-iti-floater (position, layout) puis override la couleur. */
.kta-iti-floater.kta-iti-avoid-floater {
  background: rgba(120, 60, 0, 0.95);
  border: 1px solid rgba(255, 153, 51, 0.55);
  box-shadow: 0 4px 16px rgba(255, 153, 51, 0.25);
}
.kta-iti-floater.kta-iti-avoid-floater .kta-iti-floater-icon {
  color: #ffb266;
}
/* Bouton "📍 Cliquer sur la carte" état actif (mode clic en cours) */
#kta-iti-avoid-click-map.kta-actif {
  background: rgba(255, 153, 51, 0.25);
  border-color: rgba(255, 153, 51, 0.65);
  color: #ffe4c2;
}

.kta-iti-mode-toggle {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  margin-bottom: 12px;
}

.kta-iti-waypoints-list {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 6px;
  padding: 8px 10px;
  max-height: 180px;
  overflow-y: auto;
  font-size: 13px;
  color: #c8d0e0;
}

.kta-iti-empty {
  font-style: italic;
  color: #6c7689;
  text-align: center;
  padding: 8px 0;
}

.kta-iti-wp-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 0;
}

.kta-iti-wp-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #00d4ff;
  color: #0a0d18;
  font-size: 11px;
  font-weight: 700;
  flex-shrink: 0;
}

.kta-iti-wp-coord {
  font-family: 'Courier New', monospace;
  font-size: 12px;
  color: #8892a4;
}

.kta-iti-result {
  margin-top: 12px;
  padding: 10px 12px;
  background: rgba(0, 212, 255, 0.08);
  border-left: 3px solid #00d4ff;
  border-radius: 6px;
}

.kta-iti-result-row {
  font-size: 13px;
  color: #e8eaf0;
  line-height: 1.6;
}

.kta-iti-result-actions {
  margin-top: 10px;
  display: flex;
  flex-wrap: wrap;
}

.kta-iti-error {
  margin-top: 12px;
  padding: 10px 12px;
  background: rgba(255, 107, 107, 0.08);
  border-left: 3px solid #ff6b6b;
  border-radius: 6px;
  font-size: 12px;
  color: #ffb3b3;
}

/* Marker numéroté placé sur la carte pour chaque waypoint */
.kta-itinerary-waypoint {
  background: transparent;
  border: none;
}

.kta-iti-num {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #00d4ff;
  color: #0a0d18;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 800;
  border: 2px solid #1a1f2e;
  box-shadow: 0 2px 8px rgba(0, 212, 255, 0.5);
}

/* Floater itinéraire — mini-panneau pendant le mode clic carte */
.kta-iti-floater {
  position: fixed;
  left: 50%;
  bottom: 20px;
  transform: translateX(-50%);
  background: #1a1f2e;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-left: 3px solid #00d4ff;
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.55);
  padding: 10px 12px;
  display: flex;
  align-items: center;
  gap: 10px;
  z-index: 100000;
  font-size: 13px;
  color: #c8d0e0;
  max-width: calc(100vw - 24px);
}

.kta-iti-floater-icon {
  font-size: 16px;
  flex-shrink: 0;
}

.kta-iti-floater-msg {
  flex: 1;
  white-space: nowrap;
  color: #e8eaf0;
}

.kta-iti-floater-msg strong {
  color: #00d4ff;
}

.kta-iti-floater .kta-btn {
  flex-shrink: 0;
  font-size: 12px;
  padding: 6px 12px;
}

/* Itinéraire — recherche autocomplete pour ajouter un point existant */
.kta-iti-search-wrap {
  position: relative;
  margin: 10px 0 0;
}

#kta-iti-search-input {
  width: 100%;
  box-sizing: border-box;
  font-size: 13px;
}

.kta-iti-search-results {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  margin-top: 4px;
  max-height: 220px;
  overflow-y: auto;
  background: #232838;
  border: 1px solid rgba(140,180,255,0.35);
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.55);
  z-index: 100002;  /* au-dessus de la modale */
  display: none;
}

/* 🐛 v1.46.4 — `.kta-iti-search-result` (= items de la recherche AVOIDANCES,
   js/interfaceItineraire.js) n'était PAS stylé (le JS génère cette classe mais
   le CSS ne ciblait que `.kta-iti-search-item` de la recherche principale) →
   items sans padding ni fond propre, « flottants » au-dessus de la liste =
   effet transparent. On aligne les 2 classes + un fond opaque explicite sur
   chaque item (en plus du fond du conteneur) = anti-transparence garanti. */
.kta-iti-search-item,
.kta-iti-search-result {
  padding: 8px 12px;
  cursor: pointer;
  border-bottom: 1px solid rgba(255,255,255,0.04);
  transition: background 0.12s;
  background: #232838;
}

.kta-iti-search-item:last-child,
.kta-iti-search-result:last-child {
  border-bottom: none;
}

.kta-iti-search-item:hover,
.kta-iti-search-result:hover {
  background: rgba(140,180,255,0.12);
}

.kta-iti-search-name {
  font-size: 13px;
  color: #e8eaf0;
  font-weight: 500;
}

.kta-iti-search-meta {
  font-size: 11px;
  color: #8892a4;
  margin-top: 2px;
}

.kta-iti-search-empty,
.kta-iti-search-more,
.kta-iti-search-result-empty {
  padding: 10px 12px;
  font-size: 12px;
  color: #8892a4;
  font-style: italic;
  text-align: center;
  background: #232838;
}

/* Bouton retirer dans la liste de waypoints */
.kta-iti-wp-icon {
  font-size: 12px;
  flex-shrink: 0;
}

/* Source "tracker" — emoji 📍 dans un badge jaune doré pour distinguer
   visuellement des autres sources (clic carte ou search). Le badge
   accompagne le label "🧭 Position actuelle (X, Y)" du waypoint. */
.kta-iti-wp-icon-tracker {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  background: rgba(244, 197, 66, 0.18);
  border: 1px solid rgba(244, 197, 66, 0.5);
  border-radius: 4px;
  font-size: 10px;
  line-height: 1;
}

.kta-iti-wp-coord {
  flex: 1;
  font-size: 12px;
  color: #c8d0e0;
  word-break: break-word;
}

.kta-iti-wp-remove {
  flex-shrink: 0;
  background: transparent;
  border: 1px solid rgba(255,107,107,0.35);
  color: #ff8c8c;
  border-radius: 4px;
  width: 22px;
  height: 22px;
  font-size: 12px;
  line-height: 1;
  cursor: pointer;
  padding: 0;
  transition: background 0.12s, color 0.12s;
}

.kta-iti-wp-remove:hover {
  background: rgba(255,107,107,0.12);
  color: #ff6b6b;
}

.kta-iti-wp-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 0;
}

/* Itinéraire — halo néon sur le tracé (renderer SVG forcé) */
.kta-itinerary-polyline {
  filter: drop-shadow(0 0 4px rgba(0, 212, 255, 0.9))
          drop-shadow(0 0 10px rgba(0, 212, 255, 0.5));
  pointer-events: none;
}

/* Label distance itinéraire — fixe en bas-gauche, juste AU-DESSUS du label
   measure (Distance: ...). Sur Leaflet, l'ordre d'ajout au coin bottomleft
   place le dernier ajouté au-dessus visuellement. Le label itinéraire a
   donc juste à être un L.control bottomleft pour s'empiler correctement. */
.kta-iti-distance {
  background: #1a1f2e !important;
  color: #00d4ff !important;
  padding: 8px 12px !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  border: 1px solid rgba(0, 212, 255, 0.4) !important;
  border-radius: 6px !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5) !important;
  letter-spacing: 0.02em;
}

.kta-iti-distance .kta-iti-distance-icon {
  margin-right: 6px;
}

/* Separation visuelle entre distance et temps estime dans le label bottomleft */
.kta-iti-distance .kta-iti-distance-sep {
  margin: 0 6px;
  color: rgba(0, 212, 255, 0.4);
  font-weight: 400;
}

.kta-iti-distance .kta-iti-distance-time {
  /* Meme couleur que le reste du label, pas besoin de demarcation supplementaire */
  font-weight: 500;
  letter-spacing: 0;
}

/* Affichage du preset de vitesse de marche actif dans le label bottomleft.
   Cohérent avec le reste du label (cyan #00d4ff) mais légèrement atténué pour
   ne pas voler la vedette à la distance/temps. */
.kta-iti-distance .kta-iti-distance-speed {
  font-weight: 500;
  font-size: 13px;
  opacity: 0.85;
  letter-spacing: 0;
}

/* === Segmented control "Vitesse de marche" dans la modale Itinéraire === */
.kta-iti-speed-segmented {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 6px;
  margin-top: 4px;
}
.kta-iti-speed-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  padding: 8px 4px;
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,0.10);
  background: rgba(255,255,255,0.03);
  color: #c8d0e0;
  cursor: pointer;
  transition: all 0.15s ease;
  font-family: inherit;
  text-align: center;
}
.kta-iti-speed-btn:hover {
  background: rgba(0, 212, 255, 0.08);
  border-color: rgba(0, 212, 255, 0.30);
}
.kta-iti-speed-btn .kta-iti-speed-icon {
  font-size: 22px;
  line-height: 1;
}
.kta-iti-speed-btn .kta-iti-speed-label {
  font-size: 12px;
  font-weight: 600;
}
.kta-iti-speed-btn .kta-iti-speed-kmh {
  font-size: 10.5px;
  color: #8892a4;
  font-family: ui-monospace, monospace;
}
.kta-iti-speed-btn.kta-iti-speed-active {
  background: rgba(0, 212, 255, 0.18);
  border-color: rgba(0, 212, 255, 0.65);
  color: #e8f7ff;
  box-shadow: 0 0 0 1px rgba(0, 212, 255, 0.20) inset;
}
.kta-iti-speed-btn.kta-iti-speed-active .kta-iti-speed-kmh {
  color: #00d4ff;
}
.kta-iti-speed-hint {
  margin: 8px 0 0 0;
  font-size: 11.5px;
  color: #8892a4;
  font-style: italic;
  line-height: 1.45;
}

/* 🆕 v1.23.0 Phase 2 / Feature C — Bloc contexte importé depuis Lost Mode

/* 🆕 v1.23.0 — Section "🛑 Pause entre les arrêts" dans modale itinéraire */
.kta-iti-pause-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 0;
  color: #c8d0e0;
  font-size: 13px;
  transition: opacity 0.2s;
}
.kta-iti-pause-row input[type="checkbox"] {
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  margin: 0;
  cursor: pointer;
  accent-color: #f4c542;
}
.kta-iti-pause-row input[type="number"] {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(244, 197, 66, 0.25);
  border-radius: 5px;
  padding: 5px 8px;
  color: #e8eaf0;
  font-family: inherit;
  font-size: 13px;
  text-align: right;
}
.kta-iti-pause-row input[type="number"]:focus {
  outline: none;
  border-color: #f4c542;
  box-shadow: 0 0 0 2px rgba(244, 197, 66, 0.20);
}
body.kta-theme-light .kta-iti-pause-row,
html.kta-theme-light .kta-iti-pause-row {
  color: var(--kta-light-text, #2a2620) !important;
}
body.kta-theme-light .kta-iti-pause-row input[type="number"],
html.kta-theme-light .kta-iti-pause-row input[type="number"] {
  background: var(--kta-light-bg-elevated, #fdf8eb) !important;
  border-color: var(--kta-light-border, rgba(0,0,0,0.12)) !important;
  color: var(--kta-light-text, #2a2620) !important;
}

/* Petit hint affichant le preset à côté du temps dans le bloc statusActuel */
.kta-iti-temps-speed-hint {
  color: #8892a4;
  font-size: 12px;
  font-style: italic;
  margin-left: 4px;
}

/* Mobile : si l'écran est très étroit, 2 colonnes au lieu de 4 */
@media (max-width: 480px) {
  .kta-iti-speed-segmented {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Bouton "aller à" sur chaque waypoint dans la liste */
.kta-iti-wp-goto {
  flex-shrink: 0;
  background: rgba(0, 212, 255, 0.12);
  border: 1px solid rgba(0, 212, 255, 0.35);
  color: #00d4ff;
  border-radius: 4px;
  width: 22px;
  height: 22px;
  font-size: 12px;
  line-height: 1;
  cursor: pointer;
  padding: 0;
  margin-right: 4px;
  transition: background 0.12s;
}

.kta-iti-wp-goto:hover {
  background: rgba(0, 212, 255, 0.25);
}

/* Quick-nav bar (Début / Fin / etc.) en haut de la liste de waypoints en mode navigation */
.kta-iti-quicknav {
  display: flex;
  gap: 6px;
  margin-bottom: 8px;
  flex-wrap: wrap;
}

.kta-iti-quicknav .kta-btn {
  flex: 1;
  font-size: 12px;
  padding: 6px 10px;
}

/* Label de mesure de distance — même charte que .kta-iti-distance pour
   cohérence visuelle (les 2 labels sont empilés en bas-gauche). Accent
   jaune charte au lieu du cyan (qui est réservé à l'itinéraire). */
.kta-measure-distance {
  background: #1a1f2e !important;
  color: #f4c542 !important;
  padding: 8px 12px !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  border: 1px solid rgba(244, 197, 66, 0.4) !important;
  border-radius: 6px !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5) !important;
  letter-spacing: 0.02em;
}

.kta-measure-distance .kta-measure-distance-icon {
  margin-right: 6px;
}

/* 🆕 v1.12.0-fix (KARMA "en footer, on peux afficher a la fois, une mesure
   de surface, et une comme avant de distance") : le label bas-gauche peut
   désormais contenir 2 lignes simultanées (distance + surface). On stack
   verticalement et on surligne la ligne du mode actif via une bordure
   gauche colorée jaune charte. */
.kta-measure-distance .kta-measure-line {
  display: block;
  padding: 2px 0 2px 8px;
  border-left: 3px solid transparent;
  line-height: 1.35;
}
.kta-measure-distance .kta-measure-line + .kta-measure-line {
  margin-top: 4px;
  padding-top: 4px;
  border-top: 1px dashed rgba(244, 197, 66, 0.25);
}
.kta-measure-distance .kta-measure-active-line {
  border-left-color: #f4c542;
  background: rgba(244, 197, 66, 0.08);
}

/* 🆕 v1.9.3-A1.b.2.5 — labels longueur par segment + angles (KARMA :
   "j'ai la longeur de chaque segment afficher à l'écran et l'angle en
   degré entre deux segments afficher").
   - Segment label : badge jaune charte centré sur le milieu du segment,
     même esthétique que kta-measure-distance pour cohérence.
   - Angle label : badge gris clair plus petit, légèrement décalé du
     point pivot pour pas le masquer.
   Les markers Leaflet ont iconAnchor [0,0] → on centre via translate
   CSS sur le HTML interne. Pointer-events none pour ne pas bloquer
   l'interaction avec le polyline rouge dessous. */
.kta-measure-seg-label-wrap,
.kta-measure-angle-label-wrap {
  pointer-events: none;
}

.kta-measure-seg-label {
  position: absolute;
  transform: translate(-50%, -50%);
  background: #1a1f2e;
  color: #f4c542;
  border: 1px solid rgba(244, 197, 66, 0.45);
  border-radius: 4px;
  padding: 2px 7px;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.5);
  letter-spacing: 0.02em;
  pointer-events: none;
}

.kta-measure-angle-label {
  position: absolute;
  /* Translate -50% Y centre verticalement, X décalé +12px pour pas
     se superposer au marqueur du point pivot (qui est rond rouge). */
  transform: translate(12px, -50%);
  background: rgba(26, 31, 46, 0.92);
  color: #c8d0e0;
  border: 1px solid rgba(200, 208, 224, 0.35);
  border-radius: 3px;
  padding: 1px 5px;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
  font-size: 10px;
  font-weight: 500;
  white-space: nowrap;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
  pointer-events: none;
}

/* =========================
   DISTANCE TOTALE DES TRACÉS — modale plein écran + halo magenta
   ========================= */

/* Boîte de la modale : largeur conservée modeste pour ne pas étirer le panneau
   sur grand écran. Le shell vient de .kta-readme-modal-* (overlay full screen,
   centrage, fade-in, etc.) — seul le contenu interne est customisé ici. */
.kta-rd-modal-boite {
  max-width: 480px;
  height: auto;
  max-height: 90vh;
}

.kta-rd-help {
  font-size: 12px;
  color: #8892a4;
  font-style: italic;
  margin: 0 0 12px;
  line-height: 1.5;
}

.kta-rd-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  margin-bottom: 6px;
  cursor: pointer;
  user-select: none;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 8px;
  transition: background 0.12s, border-color 0.12s;
}

.kta-rd-row:hover {
  background: rgba(255, 78, 203, 0.06);
  border-color: rgba(255, 78, 203, 0.18);
}

.kta-rd-row input[type="checkbox"] {
  flex-shrink: 0;
  cursor: pointer;
  accent-color: #ff4ecb;
  width: 16px;
  height: 16px;
}

.kta-rd-swatch {
  flex-shrink: 0;
  width: 22px;
  height: 5px;
  border-radius: 2px;
  display: inline-block;
  border: 1px solid rgba(0, 0, 0, 0.35);
}

.kta-rd-label {
  flex: 1;
  color: #e8eaf0;
  font-size: 14px;
  font-weight: 500;
}

.kta-rd-count {
  flex-shrink: 0;
  color: #8892a4;
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
}

.kta-rd-total-wrap {
  margin-top: 14px;
  padding: 12px 14px;
  background: rgba(255, 78, 203, 0.06);
  border: 1px solid rgba(255, 78, 203, 0.22);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.kta-rd-total-label {
  font-weight: 600;
  color: #e8eaf0;
  font-size: 14px;
  letter-spacing: 0.02em;
}

.kta-rd-total-value {
  font-weight: 700;
  color: #ff4ecb;
  font-size: 20px;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
}

/* Footer actions : ❌ Effacer / ✓ Fermer en bas de la modale */
.kta-rd-actions {
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.kta-rd-actions .kta-btn {
  flex: 1;
  min-width: 140px;
}

/* Polyline de surlignage : halo magenta (renderer SVG forcé), au-dessus
   des routes natives mais sous les markers et l'itinéraire cyan. */
.kta-rd-highlight-polyline {
  filter: drop-shadow(0 0 4px rgba(255, 78, 203, 0.9))
          drop-shadow(0 0 10px rgba(255, 78, 203, 0.5));
  pointer-events: none;
}

/* =========================
   COPYRIGHT — toast d'avertissement DevTools (debug mode uniquement)
   ========================= */

.kta-devtools-warn {
  position: fixed;
  top:   calc(16px + env(safe-area-inset-top, 0px));
  right: calc(16px + env(safe-area-inset-right, 0px));
  width: 320px;
  max-width: calc(100vw - 32px);
  background: #1a1f2e;
  border: 2px solid #f4c542;
  border-left: 5px solid #f4c542;
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.6),
              0 0 0 4px rgba(244, 197, 66, 0.12);
  color: #c8d0e0;
  font-size: 13px;
  z-index: 200000;
  padding: 12px 14px 14px;
  animation: kta-devtools-popin 0.25s ease-out;
  font-family: system-ui, -apple-system, sans-serif;
}

@keyframes kta-devtools-popin {
  from { opacity: 0; transform: translateY(-8px) scale(0.96); }
  to   { opacity: 1; transform: translateY(0)    scale(1); }
}

.kta-devtools-warn-titre {
  font-weight: 700;
  font-size: 14px;
  color: #f4c542;
  letter-spacing: 0.02em;
  margin-bottom: 8px;
  padding-right: 24px;
  display: flex;
  align-items: center;
  gap: 6px;
}

.kta-devtools-warn-icon {
  font-size: 16px;
}

/* Badge "DEBUG" pour signaler que la detection n'est active qu'en mode debug */
.kta-devtools-warn-tag {
  margin-left: auto;
  margin-right: 18px;
  padding: 2px 6px;
  background: rgba(140, 180, 255, 0.18);
  color: #8cb4ff;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.12em;
  border-radius: 3px;
  border: 1px solid rgba(140, 180, 255, 0.4);
}

.kta-devtools-warn-corps {
  color: #e8eaf0;
  line-height: 1.55;
  font-size: 12.5px;
}

.kta-devtools-warn-corps a {
  color: #f4c542;
  text-decoration: none;
  font-weight: 600;
}

.kta-devtools-warn-corps a:hover {
  text-decoration: underline;
}

.kta-devtools-warn-close {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 22px;
  height: 22px;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: #c8d0e0;
  border-radius: 4px;
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
  padding: 0;
  transition: background 0.12s, color 0.12s;
}

.kta-devtools-warn-close:hover {
  background: rgba(244, 197, 66, 0.15);
  color: #f4c542;
}

/* Footer copyright dans le loader (mention licence visible cote utilisateur).
   - text-size-adjust: 100% → empêche iOS Safari de gonfler le texte au
     changement d'orientation (bug récurrent landscape → portrait).
   - line-height fixé en valeur absolue (en px) plutôt qu'en em pour rester
     déterministe quelle que soit la taille de police calculée par le browser.
   - flex-shrink: 0 + box-sizing pour éviter les distorsions au resize. */
.kta-loader-copyright {
  /* 🆕 v1.9.2-rollback2 (KARMA "réduit encore un peu le footer en
     loader") : marges encore plus tassées — margin-top 6→2 +
     padding-top 6→4 + line-height 16→15. */
  margin-top: 2px;
  padding-top: 4px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  font-size: 11px;
  color: #8892a4;
  text-align: center;
  line-height: 15px;
  letter-spacing: 0.02em;
  -webkit-text-size-adjust: 100%;
          text-size-adjust: 100%;
  flex-shrink: 0;
  box-sizing: border-box;
}

.kta-loader-copyright strong {
  color: #c8d0e0;
  font-weight: 600;
}

.kta-loader-copyright a {
  color: #f4c542;
  text-decoration: none;
  border-bottom: 1px dotted rgba(244, 197, 66, 0.4);
  transition: border-color 0.12s, color 0.12s;
}

.kta-loader-copyright a:hover {
  color: #ffd76a;
  border-bottom-color: rgba(244, 197, 66, 0.9);
}

.kta-loader-copyright-sep {
  margin: 0 6px;
  color: #4a5468;
}

.kta-loader-copyright-warn {
  color: #ff8c8c;
  font-weight: 500;
}

/* =========================
   🏷️ v1.28.2 — Bascule community ↔ pro (footer + modales)
   =========================
   Le détecteur js/proLicense.js ajoute la classe .kta-instance-pro sur
   <html> et <body> quand /Licence-pro.json est présent côté serveur.

   - .kta-licence-community : visible par défaut, masqué en mode pro
   - .kta-licence-pro       : masqué par défaut, visible en mode pro

   Cas community (myktamap.fr, default) : aucun changement visuel
   (le sélecteur .kta-instance-pro ne matche jamais → règles inertes).

   100% transparent côté community = respecté. */
.kta-licence-pro {
  display: none;
}
/* 🆕 v1.29.0-fix4 — Sélecteur précisé : on cible uniquement le <span>
   du lien d'achat (la classe .kta-licence-community est aussi posée
   sur le séparateur <div> et le bloc <div> "Importer ma licence pro").
   En conservant ces 2 <div> visibles côté pro, on permet aux utilisateurs
   d'une instance pro de remplacer/renouveler leur licence depuis l'UI
   (re-license après upgrade plan, renouvellement annuel, multi-tenant
   sur même instance, etc.).
   Comportement COMMUNITY INCHANGÉ : la classe .kta-instance-pro n'est
   jamais ajoutée par js/proLicense.js côté community (pas de
   Licence-pro.json fetché) → ces règles sont totalement inertes.
   Cette précision est donc purement préventive côté community, pour
   éviter de masquer du contenu utile le jour où ces classes seraient
   réutilisées dans d'autres contextes. */
html.kta-instance-pro span.kta-licence-community,
body.kta-instance-pro span.kta-licence-community {
  display: none;
}
html.kta-instance-pro .kta-licence-pro,
body.kta-instance-pro .kta-licence-pro {
  display: inline;
}

/* 🆕 v1.29.0-fix6 — Suffixe "-pro" stylé pour les titres MyKTAMap.
   La classe .kta-titre-suffix-pro est portée par un <span> ajouté
   dans index.html juste après le mot "MyKTAMap" dans :
     - #splashTitle (splash de boot)
     - .loader-titre-nom (header du home)
   Combinée avec .kta-licence-pro : invisible côté community (display:none
   par défaut), apparait côté pro avec un accent jaune cohérent avec la
   charte (couleur splash KARMA). Aucun impact community. */
.kta-titre-suffix-pro {
  color: #f4c542;
  font-weight: 600;
  letter-spacing: 0.5px;
  margin-left: 1px;
  /* 🆕 v1.30.0 — Apparition animée du suffixe "-pro" : révélation
     progressive de gauche à droite, miroir esthétique de la signature
     karma du splash (cf kta-splash-karma-reveal). Souligne discrètement
     l'identité "édition pro" sans imposer. Pattern clip-path identique
     à karma → cohérence visuelle.
     v1.30.0+ : enchaînement séquentiel avec .kta-titre-base — le mot
     "MyKTAMap" se révèle d'abord, courte pause (~0.3s), puis le "-pro".
     ⚠️ v1.30.0-fix : on NE pose PAS display: inline-block ici (sinon
     ça écrase le `display: none` par défaut de .kta-licence-pro côté
     community — spécificité égale, dernier déclaré gagne). Le display
     est pris en charge par la règle scopée html.kta-instance-pro plus
     bas, qui n'est posée QUE si .kta-instance-pro est portée par
     html/body (= proLicense.js a détecté une licence pro). */
  clip-path: inset(0 100% 0 0);
  animation: kta-titre-suffix-pro-reveal 1.0s cubic-bezier(0.45, 0.05, 0.55, 0.95) 1.75s forwards;
}

/* Scope pro uniquement : override le `display: inline` posé par la
   règle .kta-instance-pro .kta-licence-pro (plus haut ligne ~8714) en
   `display: inline-block` requis pour que clip-path s'applique sur un
   span. Côté community : ces 2 sélecteurs ne matchent jamais (la
   classe .kta-instance-pro n'est jamais posée par js/proLicense.js
   sans Licence-pro.json) → display reste à `none` (.kta-licence-pro
   par défaut), -pro invisible et animation invisible (= no-op visuel). */
html.kta-instance-pro .kta-titre-suffix-pro,
body.kta-instance-pro .kta-titre-suffix-pro {
  display: inline-block;
}

/* Variants délai selon contexte :
   - Splash : 1.75s
       = 0.45s (start splashTextIn) + 1.0s (durée MyKTAMap reveal)
       + 0.3s (pause respiration entre MyKTAMap et -pro)
       Le -pro arrive après le mot principal s'est entièrement révélé.
   - Header home : 1.4s
       = 0.1s (start MyKTAMap reveal) + 1.0s (durée)
       + 0.3s (pause respiration)
       Délai plus court car pas de séquence splash, mais même pause. */
.loader-titre-nom .kta-titre-suffix-pro {
  animation-delay: 1.4s;
}

@keyframes kta-titre-suffix-pro-reveal {
  0%   { clip-path: inset(0 100% 0 0); }   /* tout caché */
  25%  { clip-path: inset(0 75%  0 0); }   /* - visible */
  50%  { clip-path: inset(0 50%  0 0); }   /* + p */
  75%  { clip-path: inset(0 25%  0 0); }   /* + r */
  100% { clip-path: inset(0 0    0 0); }   /* + o finale */
}

/* 🆕 v1.30.0 — Apparition animée du mot "MyKTAMap" : même pattern
   clip-path reveal que le suffixe -pro, joué AVANT. Le HTML wrap le
   texte "MyKTAMap" dans <span class="kta-titre-base">…</span> pour
   permettre l'animation indépendante du suffixe.
   Comportement scope (community ET pro) :
   - Community SANS -pro : seul "MyKTAMap" se révèle (pas de -pro
     car .kta-titre-suffix-pro reste display: none sans .kta-instance-pro)
   - Pro AVEC -pro : "MyKTAMap" se révèle, pause 0.3s, "-pro" se révèle
   La même animation est utilisée partout, seul le délai change selon
   le contexte (splash vs header home). */
.kta-titre-base {
  display: inline-block;
  clip-path: inset(0 100% 0 0);
  animation: kta-titre-base-reveal 1.0s cubic-bezier(0.45, 0.05, 0.55, 0.95) 0.1s forwards;
}

/* Variant splash : délai 0.45s (synchro avec splashTextIn du #splashTitle
   qui fait glisser le titre vers le haut au même instant — les 2 effets
   s'additionnent harmoniquement : translation Y + révélation X). */
#splashTitle .kta-titre-base {
  animation-delay: 0.45s;
}

@keyframes kta-titre-base-reveal {
  0%   { clip-path: inset(0 100% 0 0); }   /* tout caché */
  20%  { clip-path: inset(0 80%  0 0); }   /* M */
  40%  { clip-path: inset(0 60%  0 0); }   /* + yK */
  60%  { clip-path: inset(0 40%  0 0); }   /* + TA */
  80%  { clip-path: inset(0 20%  0 0); }   /* + Ma */
  100% { clip-path: inset(0 0    0 0); }   /* + p finale */
}

/* 🆕 v1.29.2-fix1 — Variant thème clair pour le suffixe « -pro » :
   KARMA a validé qu'on garde le MÊME jaune accent #f4c542 qu'en mode
   sombre (= cohérent avec le reste de l'identité loader/splash, tagline
   "Cartographie souterraine" est aussi en #f4c542). La présence d'une
   règle dédiée clair est nécessaire pour battre l'override
   `body.kta-theme-light #planLoaderBox *` qui sinon écrase la couleur
   pour le header (cf section juste plus bas qui cible le header
   spécifiquement avec specificity 0,2,1). */
html.kta-theme-light .kta-titre-suffix-pro,
body.kta-theme-light .kta-titre-suffix-pro {
  color: #f4c542;
}

/* Badge "✓ Licence professionnelle active" — vert sobre (cohérent avec
   les autres badges status verts du projet, cf. §67.7.6 secours LED). */
.kta-loader-copyright-pro-badge {
  color: #6ee287;
  font-weight: 600;
}

/* Titre copyright édition pro (remplace "© 2026 + image karma" en mode pro).
   Couleur ambre charte, italique pour démarquer du community. */
.kta-loader-copyright-edition-title {
  color: #f4c542;
  font-style: italic;
}

/* Variants thème clair (cohérence palette claire §53).
   🆕 v1.40.26/27 — Override le `body.kta-theme-light .kta-loader-copyright *
   { color: ... !important; }` ligne ~14244 qui écrasait sinon le vert en
   gris muté. v1.40.26 avait juste ajouté `!important` mais specificity
   égale (0,2,1) → la règle `*` plus loin dans le fichier gagnait par
   cascade order. v1.40.27 augmente la specificity à (0,3,2) via la chaîne
   `html.kta-theme-light body .kta-loader-copyright .kta-loader-copyright-
   pro-badge` qui bat (0,2,1) sans dépendre de l'ordre cascade.
   KARMA : « ✓ Licence professionnelle active doit être en vert en CLAIR
   comme pour SOMBRE ». Vert sombre #1d8a3a lisible sur fond beige
   (contraste WCAG AA), cohérent avec l'intention "vert status OK" du
   mode sombre #6ee287. */
html.kta-theme-light body .kta-loader-copyright .kta-loader-copyright-pro-badge,
body.kta-theme-light .kta-loader-copyright .kta-loader-copyright-pro-badge {
  color: #1d8a3a !important;
}
html.kta-theme-light .kta-loader-copyright-edition-title,
body.kta-theme-light .kta-loader-copyright-edition-title {
  color: #b8860b;
}
/* =========================
   FIN — v1.28.2 bascule community ↔ pro
   ========================= */

/* =========================
   🆕 v1.28.4 — Section "💼 Édition pro" dans la modale "Mon profil"
   =========================
   Permet à l'user d'importer manuellement un fichier Licence-pro.json
   reçu par mail/canal privé pour activer le mode pro localement.
   Design sobre charte ambre, cohérent avec le badge .kta-licence-pro
   du footer v1.28.2. */

.kta-profile-pro-section {
  margin-top: 22px;
  padding: 16px 18px;
  background: rgba(244, 197, 66, 0.05);
  border: 1px solid rgba(244, 197, 66, 0.22);
  border-radius: 10px;
}
.kta-profile-pro-header {
  font-size: 14px;
  font-weight: 700;
  color: #f4c542;
  margin-bottom: 12px;
  letter-spacing: 0.02em;
}
.kta-profile-pro-body {
  font-size: 13px;
  color: #c8d0e0;
  line-height: 1.55;
}
.kta-profile-pro-loading {
  font-size: 12px;
  color: #8892a4;
  font-style: italic;
}
.kta-profile-pro-error {
  margin: 0;
  color: #ff8c8c;
  font-size: 12px;
  font-style: italic;
}

/* État actif — bloc avec badge vert + métadonnées */
.kta-profile-pro-status {
  margin-bottom: 12px;
  padding: 10px 12px;
  background: rgba(110, 226, 135, 0.06);
  border: 1px solid rgba(110, 226, 135, 0.28);
  border-radius: 6px;
}
.kta-profile-pro-badge {
  display: inline-block;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.4px;
  color: #6ee287;
  background: rgba(110, 226, 135, 0.14);
  border: 1px solid rgba(110, 226, 135, 0.38);
  padding: 3px 9px;
  border-radius: 999px;
  margin-bottom: 8px;
}
.kta-profile-pro-meta {
  margin-top: 6px;
  font-size: 12px;
  color: #c8d0e0;
  line-height: 1.6;
}
.kta-profile-pro-meta-label {
  color: #8892a4;
  font-weight: 600;
  margin-right: 4px;
}
.kta-profile-pro-hash {
  display: inline-block;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11.5px;
  color: #f4c542;
  background: rgba(244, 197, 66, 0.08);
  border: 1px solid rgba(244, 197, 66, 0.22);
  padding: 1px 6px;
  border-radius: 4px;
  letter-spacing: 0.04em;
}

.kta-profile-pro-hint {
  margin: 0 0 12px;
  font-size: 12.5px;
  color: #a8b3c8;
  line-height: 1.6;
}
.kta-profile-pro-hint code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11.5px;
  background: rgba(140, 180, 255, 0.10);
  padding: 1px 5px;
  border-radius: 3px;
  color: #c8d0e0;
}

.kta-profile-pro-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 4px;
}

/* Variants thème clair (cohérence §53) */
html.kta-theme-light .kta-profile-pro-section,
body.kta-theme-light .kta-profile-pro-section {
  background: rgba(184, 134, 11, 0.08);
  border-color: rgba(184, 134, 11, 0.32);
}
html.kta-theme-light .kta-profile-pro-header,
body.kta-theme-light .kta-profile-pro-header {
  color: #b8860b;
}
html.kta-theme-light .kta-profile-pro-body,
body.kta-theme-light .kta-profile-pro-body {
  color: #2a2620;
}
html.kta-theme-light .kta-profile-pro-meta-label,
body.kta-theme-light .kta-profile-pro-meta-label {
  color: #6b6354;
}
html.kta-theme-light .kta-profile-pro-hash,
body.kta-theme-light .kta-profile-pro-hash {
  color: #b8860b;
  background: rgba(184, 134, 11, 0.10);
  border-color: rgba(184, 134, 11, 0.30);
}
html.kta-theme-light .kta-profile-pro-status,
body.kta-theme-light .kta-profile-pro-status {
  background: rgba(29, 138, 58, 0.08);
  border-color: rgba(29, 138, 58, 0.32);
}
html.kta-theme-light .kta-profile-pro-badge,
body.kta-theme-light .kta-profile-pro-badge {
  color: #1d8a3a;
  background: rgba(29, 138, 58, 0.12);
  border-color: rgba(29, 138, 58, 0.38);
}
html.kta-theme-light .kta-profile-pro-hint,
body.kta-theme-light .kta-profile-pro-hint {
  color: #6b6354;
}
/* =========================
   FIN — v1.28.4 section pro profil
   ========================= */


/* 🆕 v1.9.2-fix17 — Ligne crédits libs/algos dans le footer du home.
   Plus discrète que la ligne copyright (couleur plus pâle, taille
   légèrement réduite). Reprise cohérente avec le crédit du splash. */
.kta-loader-credits {
  /* 🆕 v1.9.2-rollback2 : marge top 6→3, line-height 1.5→1.3 pour
     gain vertical supplémentaire (cf. footer loader compactage). */
  margin-top: 3px;
  font-size: 10.5px;
  color: #6c7689;
  letter-spacing: 0.04em;
  line-height: 1.3;
}

/* Badge version dans le footer (monospace, gris discret).
   TOUJOURS cliquable : cursor pointer + hover subtle dans le mode normal,
   variante bleu clignotant si update dispo (voir .kta-loader-copyright-version-update).
   white-space: nowrap → empêche le texte "v141 → v142" de casser en 2 lignes.
   display: inline-block → garantit que le badge reste un bloc atomique. */
.kta-loader-copyright-version {
  display: inline-block;
  white-space: nowrap;
  cursor: pointer;
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 10.5px;
  color: #6a7488;
  letter-spacing: 0;
  padding: 1px 5px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.02);
  transition: color 0.2s, border-color 0.2s, background 0.2s;
  vertical-align: baseline;
  user-select: none;
}
.kta-loader-copyright-version:hover {
  color: #c8d0e0;
  border-color: rgba(255, 255, 255, 0.20);
  background: rgba(255, 255, 255, 0.06);
}
.kta-loader-copyright-version:focus-visible {
  outline: 2px solid #8cb4ff;
  outline-offset: 2px;
}

/* Variante "update disponible" — bleu clignotant + cliquable. Le badge passe
   en bleu accent (#8cb4ff) avec animation de pulse douce qui attire l'œil
   sans agresser. Cursor pointer + hover plus marqué. Affiche aussi la
   version cible : "v140 → v141". */
.kta-loader-copyright-version.kta-loader-copyright-version-update {
  cursor: pointer;
  color: #c5d8ff;
  background: rgba(140, 180, 255, 0.12);
  border-color: rgba(140, 180, 255, 0.50);
  animation: kta-version-update-pulse 1.8s ease-in-out infinite;
  user-select: none;
}
.kta-loader-copyright-version.kta-loader-copyright-version-update:hover {
  background: rgba(140, 180, 255, 0.24);
  border-color: rgba(140, 180, 255, 0.85);
  color: #ffffff;
  animation: none;
}
.kta-loader-copyright-version.kta-loader-copyright-version-update:focus-visible {
  outline: 2px solid #8cb4ff;
  outline-offset: 2px;
}
@keyframes kta-version-update-pulse {
  0%, 100% {
    box-shadow: 0 0 0 0 rgba(140, 180, 255, 0.0);
    background: rgba(140, 180, 255, 0.12);
  }
  50% {
    box-shadow: 0 0 10px 1px rgba(140, 180, 255, 0.55);
    background: rgba(140, 180, 255, 0.22);
  }
}

/* Signature manuscrite KARMA dans le footer copyright. Depuis v1.7.3, sert
   d'identité visible au copyright (avant : "© 2026 Flavien VIDAL [signature]"
   → maintenant : "© 2026 [signature]"). Le nom civil reste dans les headers
   JS et les meta tags <head> pour la force probante légale. Cohérent avec
   l'usage de karma.png au splash. */
.kta-loader-copyright-sig {
  height: 16px;
  width: auto;
  vertical-align: middle;
  margin: -2px 6px 0;
  opacity: 0.85;
  filter: brightness(1.05);
  pointer-events: none;
  user-select: none;
}

/* Sur mobile (≤ 768px) : la partie licence (CC BY-NC-SA 4.0 + Usage commercial
   interdit) passe à la ligne sous la signature pour une meilleure lisibilité
   sur petite largeur. Le séparateur · initial (avant CC BY-NC) est masqué
   car redondant en début de nouvelle ligne. Sur desktop : tout reste sur
   une seule ligne (display naturel inline). */
@media (max-width: 768px) {
  .kta-loader-copyright-line2 {
    display: block;
    margin-top: 4px;
  }

  .kta-loader-copyright-line2 > .kta-loader-copyright-sep:first-child {
    display: none;
  }
}

/* =========================
   🏗️ MULTI-NIVEAU — pastille "Niv X" dans sidebar + modales (depuis v148)
   ========================= */
/* 🔔 v166 : Sélecteur d'alertes (modal qui liste N>1 alertes classées par
   criticité). Click sur une row → ouvre la modale détail correspondante. */
.kta-alert-selector-overlay {
  /* hérite de .kta-readme-modal-overlay */
}
.kta-alert-selector-boite {
  max-width: 540px;
  /* v1.14.3 — bornes forcées en !important + flex column (cf .kta-alert-boite) */
  height: auto !important;
  max-height: 88vh !important;
  display: flex !important;
  flex-direction: column !important;
}
.kta-alert-selector-corps {
  padding: 14px 18px;
  /* v1.14.3 — corps scrollable si N alertes dépasse la hauteur */
  flex: 1 1 auto !important;
  min-height: 0 !important;
  overflow-y: auto !important;
}
.kta-alert-selector-hint {
  font-size: 12.5px;
  color: #8892a4;
  margin: 0 0 14px 0;
  font-style: italic;
}
.kta-alert-selector-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
/* Row clickable d'une alerte dans le sélecteur */
.kta-alert-selector-row {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 12px 14px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  cursor: pointer;
  color: #e8eaf0;
  font-family: inherit;
  text-align: left;
  transition: background 0.15s, border-color 0.15s, transform 0.05s;
}
.kta-alert-selector-row:hover {
  background: rgba(255, 255, 255, 0.07);
  border-color: rgba(255, 255, 255, 0.20);
}
.kta-alert-selector-row:active {
  transform: scale(0.98);
}
.kta-alert-selector-row-seen {
  opacity: 0.55;
}
/* Pastille de couleur selon le niveau */
.kta-alert-selector-dot {
  flex: 0 0 auto;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.3);
}
.kta-alert-selector-row-emergency {
  border-left: 3px solid #dc3545;
}
.kta-alert-selector-row-emergency .kta-alert-selector-dot {
  background: #dc3545;
  box-shadow: 0 0 6px rgba(220, 53, 69, 0.7);
  animation: kta-alert-dot-pulse 1.6s ease-in-out infinite;
}
.kta-alert-selector-row-warning {
  border-left: 3px solid #ff9933;
}
.kta-alert-selector-row-warning .kta-alert-selector-dot {
  background: #ff9933;
  box-shadow: 0 0 4px rgba(255, 153, 51, 0.5);
}
.kta-alert-selector-row-info {
  border-left: 3px solid #8cb4ff;
}
.kta-alert-selector-row-info .kta-alert-selector-dot {
  background: #8cb4ff;
}
@keyframes kta-alert-dot-pulse {
  0%, 100% { box-shadow: 0 0 6px rgba(220, 53, 69, 0.7); }
  50%      { box-shadow: 0 0 12px rgba(220, 53, 69, 1); }
}
/* Contenu texte d'une row */
.kta-alert-selector-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;  /* permet à title de wrap proprement */
}
.kta-alert-selector-title {
  font-size: 14px;
  font-weight: 600;
  color: #e8eaf0;
  line-height: 1.3;
  word-break: break-word;
}
.kta-alert-selector-meta {
  font-size: 11.5px;
  color: #8892a4;
  font-family: monospace;
}
.kta-alert-selector-arrow {
  flex: 0 0 auto;
  font-size: 22px;
  color: #5a6275;
  line-height: 1;
}
.kta-alert-selector-row:hover .kta-alert-selector-arrow {
  color: #f4c542;
}

/* 🧭 v159 : Tracker icon en divIcon (wrapper div + img enfant) pour permettre
   la rotation independante du positionnement geo. Le div recoit le translate
   Leaflet, l'img recoit notre rotate(heading deg). Le default Leaflet
   .leaflet-div-icon a un fond blanc + border que l'on doit ecraser. */
.kta-tracker-divicon {
  background: transparent !important;
  border: none !important;
}
.kta-tracker-divicon .kta-tracker-img {
  display: block;
  width: 50px;
  height: 50px;
  transform-origin: center center;
  transition: transform 0.3s ease-out; /* v160 : 0.15→0.3s anti-jitter visuel */
  pointer-events: none; /* le clic doit aller a la map en dessous */
}

/* 🔍 v174 : Markers en divIcon (wrapper div + img enfant) pour permettre la
   variation de taille selon le zoom via CSS transform: scale(). Le div
   reçoit le translate3d Leaflet (positionnement), l'img reçoit notre
   scale (variable --kta-marker-scale calculée dans map.js > _majMarkerScale
   sur zoom event). Sans wrapper, on ne peut pas faire les 2 transforms
   indépendamment. Le default Leaflet .leaflet-div-icon a un fond blanc +
   border 1px qu'on doit écraser pour préserver le visuel original. */
.kta-marker-divicon {
  background: transparent !important;
  border: none !important;
}
.kta-marker-divicon .kta-marker-img {
  display: block;
  width: 100%;
  height: 100%;
  transform: scale(var(--kta-marker-scale, 1));
  transform-origin: center center;
  pointer-events: auto;
  -webkit-user-drag: none;
  user-select: none;
}

/* Pastille du niveau actif : cercle plein jaune charte avec le chiffre du
   niveau au centre (style badge). Utilisée dans le Leaflet control top-left
   sous le zoom (cf .kta-level-control). */
.kta-niv-pastille {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;        /* v154 : "pill" extensible — accepte 1 ou 2 caracteres */
  height: 22px;
  padding: 0 4px;         /* respiration laterale compacte pour valeurs negatives */
  border-radius: 11px;    /* 50% du height = capsule arrondie (cercle pour 1 char) */
  background: #f4c542;
  color: #1a1f2e;
  font-family: 'SF Mono', Monaco, Consolas, 'Liberation Mono', monospace;
  font-size: 12px;        /* legerement reduit pour rester dans le bouton 30×30 */
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.3px; /* compactage horizontal pour "-1" / "-2" */
  white-space: nowrap;    /* evite le wrap d'un "-1" sur deux lignes */
  box-sizing: border-box;
}

/* Leaflet control "niveau actif" — bouton compact sous le zoom (top-left).
   Style coherent avec .leaflet-bar (mêmes border/shadow que zoom). */
.kta-level-control {
  /* hérite de .leaflet-bar : border, shadow, border-radius */
}
.kta-level-btn,
a.kta-level-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  background: #fff;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.15s;
}
.kta-level-btn:hover {
  background: #f4c542;
}
.kta-level-btn:hover .kta-niv-pastille {
  background: #fff;
  color: #1a1f2e;
  box-shadow: 0 0 0 1px #1a1f2e;
}

/* Modal sélecteur de niveau */
.kta-niv-modal-boite {
  max-width: 460px;
  /* 🔧 v1.13.0-fix15 (KARMA "la fenêtre de Niveau pour saisir le niveau
     actif et les calques visibles a le fameux bug de longueur, contrôle
     aussi le mode sombre") : même cas que .kta-pin-proposal-boite et
     .kta-export-modal-boite. Le parent .kta-readme-modal-boite a
     height: 88vh qui étire la box alors que son contenu est court
     (segmented control niveaux + ~5 toggles). On force au contenu réel. */
  height: auto !important;
  max-height: 90vh !important;
}
.kta-niv-segmented {
  display: flex;
  flex-wrap: nowrap;        /* v155 : pas de retour à la ligne — scroll horizontal si trop de niveaux */
  gap: 8px;
  margin: 8px 0;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: thin;    /* Firefox : scrollbar discrète */
  scrollbar-color: rgba(244,197,66,0.3) transparent;
  padding-bottom: 4px;      /* respiration pour la scrollbar */
  /* iOS smooth scroll */
  -webkit-overflow-scrolling: touch;
}
/* WebKit scrollbar styling (Chrome, Safari, Edge) */
.kta-niv-segmented::-webkit-scrollbar {
  height: 6px;
}
.kta-niv-segmented::-webkit-scrollbar-track {
  background: transparent;
}
.kta-niv-segmented::-webkit-scrollbar-thumb {
  background: rgba(244,197,66,0.3);
  border-radius: 3px;
}
.kta-niv-segmented::-webkit-scrollbar-thumb:hover {
  background: rgba(244,197,66,0.5);
}
.kta-niv-seg-btn {
  flex: 0 0 auto;
  min-width: 44px;
  padding: 10px 14px;
  font-family: 'SF Mono', Monaco, Consolas, monospace;
  font-size: 15px;
  font-weight: 600;
  color: #c8d0e0;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 6px;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.kta-niv-seg-btn:hover {
  background: rgba(244, 197, 66, 0.10);
  border-color: rgba(244, 197, 66, 0.35);
  color: #f4c542;
}
.kta-niv-seg-btn.kta-actif {
  background: #f4c542;
  color: #1a1f2e;
  border-color: #f4c542;
}
.kta-niv-seg-add {
  background: rgba(255, 255, 255, 0.02);
  color: #8892a4;
  border-style: dashed;
  font-size: 18px;
  font-weight: 700;
}
.kta-niv-seg-add:hover {
  color: #f4c542;
}

/* Sections dans la modale niveau (actif + visibles) */
.kta-niv-section {
  background: rgba(255, 255, 255, 0.02);
  border-radius: 6px;
  padding: 12px 14px;
  margin-bottom: 12px;
}
.kta-niv-section-titre {
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #f4c542;
  margin-bottom: 6px;
}
.kta-niv-section-hint {
  font-size: 12px;
  color: #8892a4;
  margin: 0 0 10px 0;
  line-height: 1.5;
}

/* Grille checkboxes visibles */
.kta-niv-vis-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
  gap: 8px;
  margin: 8px 0 10px;
}
.kta-niv-vis-box {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 6px;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
  user-select: none;
}
.kta-niv-vis-box:hover {
  background: rgba(244, 197, 66, 0.08);
  border-color: rgba(244, 197, 66, 0.25);
}
.kta-niv-vis-box input[type="checkbox"] {
  width: 16px;
  height: 16px;
  accent-color: #f4c542;
  margin: 0;
  flex: 0 0 auto;
}
.kta-niv-vis-label {
  font-family: 'SF Mono', Monaco, Consolas, monospace;
  font-size: 13px;
  font-weight: 600;
  color: #c8d0e0;
}

.kta-niv-vis-actions {
  display: flex;
  gap: 8px;
  margin-top: 4px;
}
.kta-btn-small {
  padding: 6px 12px;
  font-size: 12px;
}

/* Modal création jonction */
.kta-jct-modal-boite {
  max-width: 460px;
  /* 🔧 v1.13.0-fix15 : idem .kta-niv-modal-boite, fix height pour contenu court */
  height: auto !important;
  max-height: 90vh !important;
}

/* 🔧 v1.13.0-fix15 (KARMA "pareil pour légende") : modal Légende affiche
   une grille d'icônes + traits courte → ne doit pas occuper 88vh. */
.kta-legende-modal-boite {
  max-width: 720px;
  height: auto !important;
  max-height: 90vh !important;
}
.kta-jct-grille {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px 12px;
  align-items: center;
  margin: 8px 0;
}
.kta-jct-grille .kta-cfg-label {
  font-size: 13px;
  color: #c8d0e0;
  margin: 0;
}
.kta-jct-grille .kta-cfg-input {
  padding: 8px 10px;
}

/* =========================
   🌀 OVERLAY DE CHARGEMENT (depuis v152)
   ========================= */
/* Modale plein écran avec spinner + message d'étape, affichée pendant le
   chargement d'un plan (extraction ZIP, scan tuiles V2, init carte).
   Plus visible que #loaderStatus qui est tout en bas du loader. */
.kta-load-overlay {
  position: fixed;
  inset: 0;
  background: rgba(10, 13, 24, 0.85);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 99998;
  animation: kta-load-fadein 0.15s ease-out;
}
@keyframes kta-load-fadein {
  from { opacity: 0; }
  to   { opacity: 1; }
}
.kta-load-box {
  background: #1a1f2e;
  border: 1px solid rgba(140, 180, 255, 0.25);
  border-radius: 12px;
  padding: 28px 32px;
  text-align: center;
  max-width: 440px;
  width: 90%;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.55), 0 0 32px rgba(140, 180, 255, 0.08);
}
.kta-load-spinner {
  width: 48px;
  height: 48px;
  margin: 0 auto 18px;
  border: 4px solid rgba(140, 180, 255, 0.15);
  border-top-color: #8cb4ff;
  border-radius: 50%;
  animation: kta-load-spin 1s linear infinite;
}
@keyframes kta-load-spin {
  to { transform: rotate(360deg); }
}
/* 🆕 v1.46.4 — Overlay de calcul d'itinéraire (cf interfaceItineraire.js).
   Plein écran, réutilise .kta-load-spinner ; z-index AU-DESSUS de la modale
   itinéraire (.kta-readme-modal-overlay = 99999). */
.kta-iti-compute-overlay {
  position: fixed;
  inset: 0;
  background: rgba(10, 13, 24, 0.82);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  z-index: 100005;
  animation: kta-load-fadein 0.15s ease-out;
}
.kta-iti-compute-overlay .kta-load-spinner { margin: 0; }
.kta-iti-compute-msg {
  font-size: 14px;
  font-weight: 600;
  color: #e8eaf0;
  text-align: center;
  padding: 0 18px;
  max-width: 320px;
}
.kta-load-titre {
  font-size: 17px;
  font-weight: 600;
  color: #e8eaf0;
  margin-bottom: 8px;
  letter-spacing: 0.01em;
}
.kta-load-message {
  font-size: 14px;
  color: #c8d0e0;
  margin-bottom: 16px;
  line-height: 1.5;
  min-height: 21px;  /* évite le saut quand le message change */
}
.kta-load-hint {
  font-size: 11.5px;
  color: #8892a4;
  font-style: italic;
  line-height: 1.5;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}

/* =========================
   🧱 V2 ERROR MODAL — modale d'erreur lors de la génération (depuis v152)
   ========================= */
/* Pattern .kta-readme-modal + cohérent avec la modal warning V2 (violet).
   Affichée lors d'un échec catché de _genererTuilesV2. Inclut conseils
   actionnables (PC, réduire image, JPEG). */
.kta-v2-error-boite {
  border: 1px solid rgba(255, 107, 107, 0.40);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.55), 0 0 24px rgba(255, 107, 107, 0.10);
  max-width: 560px;
}
.kta-v2-error-header .kta-readme-modal-titre {
  color: #ff8a8a;
  font-weight: 700;
}
.kta-v2-error-message {
  background: rgba(255, 107, 107, 0.10);
  border-left: 3px solid #ff6b6b;
  color: #ffcccc;
  padding: 12px 14px;
  border-radius: 4px;
  margin: 0 0 16px;
  font-size: 14px;
  line-height: 1.5;
  word-wrap: break-word;
}

/* =========================
   🧱 V2 WARNING MODAL — popup avertissement au check de la case V2 (v151)
   ========================= */
/* Pattern identique au tracker warning (cf. ci-dessous) mais avec un accent
   violet (la couleur du V2 dans le planner et les badges plan). Conversion
   lourde donc on conseille PC, avec details memoire/CPU/duree. */
/* v1.14.20-hotfix7 (KARMA « bug import KMZ en longueur notre fameux
   classique ») : application du pattern containment universel à la
   modale 🌍 Import KMZ. Le contenu (upload + résumé + config + actions
   d'import) peut largement dépasser 88vh sur mobile portrait avec un
   KMZ MyKTAMap riche en placemarks. */
.kta-kmz-imp-boite {
  max-width: 620px;
  height: auto !important;
  max-height: 88vh !important;
  display: flex !important;
  flex-direction: column !important;
}
.kta-kmz-imp-boite .kta-readme-modal-header,
.kta-kmz-imp-boite .kta-aide-actions {
  flex: 0 0 auto !important;
}
.kta-kmz-imp-boite #kta-kmz-imp-corps {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  overflow-y: auto !important;
}

.kta-v2-warn-boite {
  border: 1px solid rgba(180, 82, 255, 0.40);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.55), 0 0 24px rgba(180, 82, 255, 0.10);
  max-width: 560px;
  /* v1.14.20 — KARMA « bug du modal Conversion V2 - Ressource nécessaire
     en longueur notre grand classique ». Application du pattern containment
     universel (déjà utilisé sur les modales alerte / lock / theme-confirm /
     niv / légende / jct / iti / lost / session export) : hauteur auto
     bornée à 88vh + flex column → le corps scrollable se borne dans la
     boîte au lieu de la faire déborder. */
  height: auto !important;
  max-height: 88vh !important;
  display: flex !important;
  flex-direction: column !important;
}
/* Header et footer figés ; le corps prend tout l'espace restant et scrolle. */
.kta-v2-warn-boite .kta-readme-modal-header,
.kta-v2-warn-boite .kta-tracker-warn-actions {
  flex: 0 0 auto !important;
}
.kta-v2-warn-boite .kta-readme-modal-corps {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  overflow-y: auto !important;
}
.kta-v2-warn-header .kta-readme-modal-titre {
  color: #d29bff;
  font-weight: 700;
}
.kta-v2-warn-lead {
  background: rgba(180, 82, 255, 0.10);
  border-left: 3px solid #b452ff;
  color: #e6c8ff;
  padding: 10px 12px;
  border-radius: 4px;
  margin: 0 0 14px 0;
  font-size: 14px;
}
.kta-v2-warn-section {
  background: rgba(255, 255, 255, 0.03);
  border-radius: 6px;
  padding: 10px 14px;
  margin: 12px 0;
}
.kta-v2-warn-section-titre {
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin-bottom: 6px;
}
.kta-v2-warn-section-bad {
  background: rgba(255, 107, 107, 0.06);
  border-left: 3px solid rgba(255, 107, 107, 0.55);
}
.kta-v2-warn-section-bad .kta-v2-warn-section-titre {
  color: #ff8a8a;
}
.kta-v2-warn-section-good {
  background: rgba(108, 226, 138, 0.06);
  border-left: 3px solid rgba(108, 226, 138, 0.55);
}
.kta-v2-warn-section-good .kta-v2-warn-section-titre {
  color: #6ce28a;
}
.kta-v2-warn-section p {
  margin: 0;
  font-size: 13px;
  color: #c8d0e0;
  line-height: 1.55;
}
.kta-v2-warn-note {
  font-style: italic;
  font-size: 13px;
  color: #a8b3c8;
  background: rgba(140, 180, 255, 0.06);
  border-radius: 4px;
  padding: 8px 12px;
  margin: 14px 0 0;
}

/* =========================
   TRACKER WARNING MODAL — popup avertissement au démarrage du tracker
   ========================= */
/* Hérite de .kta-readme-modal-overlay/.kta-readme-modal-boite. Surcouche
   visuelle : liseré rouge subtil pour souligner le caractère safety-critical
   sans tomber dans l'alarme rouge des modales OOM/offline (l'utilisateur va
   voir cette popup à chaque session de test, on garde mesuré). */
.kta-tracker-warn-boite {
  border: 1px solid rgba(255, 107, 107, 0.35);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.55), 0 0 24px rgba(255, 107, 107, 0.08);
  max-width: 560px;
}

.kta-tracker-warn-header .kta-readme-modal-titre {
  color: #ff6b6b;
  font-weight: 700;
}

.kta-tracker-warn-lead {
  background: rgba(255, 107, 107, 0.10);
  border-left: 3px solid #ff6b6b;
  color: #ffb3b3;
  padding: 10px 12px;
  border-radius: 4px;
  margin: 0 0 14px 0;
  font-size: 15px;
}

.kta-tracker-warn-section {
  background: rgba(255, 255, 255, 0.03);
  border-radius: 6px;
  padding: 10px 14px;
  margin: 12px 0;
}
.kta-tracker-warn-section ul {
  margin: 6px 0 0 0;
  padding-left: 22px;
}
.kta-tracker-warn-section li {
  margin-bottom: 4px;
}
.kta-tracker-warn-section-titre {
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #c8d0e0;
  margin-bottom: 6px;
}
.kta-tracker-warn-section-bad .kta-tracker-warn-section-titre {
  color: #ff8a8a;
}
.kta-tracker-warn-section-bad {
  background: rgba(255, 107, 107, 0.05);
}

.kta-tracker-warn-note {
  font-style: italic;
  font-size: 13px;
  color: #8892a4;
  margin-top: 14px;
  margin-bottom: 0;
  text-align: center;
}

.kta-tracker-warn-actions {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  padding: 14px 22px 18px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}
.kta-tracker-warn-actions .kta-btn {
  min-width: 130px;
}

/* Mobile : actions full-width empilées */
@media (max-width: 540px) {
  .kta-tracker-warn-actions {
    flex-direction: column-reverse;
  }
  .kta-tracker-warn-actions .kta-btn {
    width: 100%;
  }
}

/* =========================
   COMPASS WIDGET — boussole flottante (rose des vents)
   ========================= */
/* Position : top-LEFT sous les boutons de zoom Leaflet (zoom control =
   ~60px de haut + 10px de marge top → offset ~80px).
   La sidebar accordéon est en topright, donc on s'écarte d'elle pour ne
   pas être recouvert par les sous-actions qui se déploient quand on ouvre
   un groupe (Tracker / Tracés / etc.).
   Safe-area pour l'iPhone PWA (notch + barre Dynamic Island). */
.kta-compass-widget {
  position: fixed;
  /* Top-left, sous le zoom Leaflet. Si le mode multi-niveau est actif pour
     ce plan, on decale la boussole plus bas pour laisser de la place au
     bouton "niveau actif" inséré entre zoom et boussole (cf override
     `body.kta-multilevel-active` plus bas). */
  top:  calc(80px + env(safe-area-inset-top,  0px));
  left: calc(10px + env(safe-area-inset-left, 0px));
  z-index: 1050;
  display: flex;
  flex-direction: column;
  align-items: center;
  background: rgba(26, 31, 46, 0.88);                /* #1a1f2e charte avec alpha */
  border: 1px solid rgba(244, 197, 66, 0.30);        /* liseré jaune accent */
  border-radius: 12px;
  padding: 10px 12px 8px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.50);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  user-select: none;
  -webkit-user-select: none;
  /* Empêche les gestes carte de passer au widget (pinch / pan) */
  touch-action: none;
  pointer-events: auto;
}

.kta-compass-close {
  position: absolute;
  top: 2px;
  right: 4px;
  background: transparent;
  color: #8892a4;
  border: none;
  font-size: 16px;
  line-height: 1;
  padding: 2px 6px;
  cursor: pointer;
  border-radius: 4px;
  transition: background 0.15s, color 0.15s;
}
.kta-compass-close:hover,
.kta-compass-close:focus {
  background: rgba(255, 107, 107, 0.15);
  color: #ff6b6b;
  outline: none;
}

/* Indique que toute la zone widget est cliquable (ouvre modal plein) */
.kta-compass-widget {
  cursor: pointer;
}
.kta-compass-widget:hover {
  border-color: rgba(244, 197, 66, 0.55);
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.55), 0 0 18px rgba(244, 197, 66, 0.10);
}

.kta-compass-rose-wrap {
  width: 100px;
  height: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;            /* sécurité visuelle à la rotation */
}

.kta-compass-rose {
  width: 100px;
  height: 100px;
  object-fit: contain;
  /* Léger halo jaune assorti au splash, plus discret */
  filter: drop-shadow(0 0 6px rgba(244, 197, 66, 0.18));
  /* PAS de transition CSS — rAF gère le lissage, transition causerait du lag */
  transform-origin: 50% 50%;
  pointer-events: none;        /* le widget gère le close, pas la rose */
}

.kta-compass-info {
  margin-top: 6px;
  font-family: 'SF Mono', Monaco, Consolas, 'Liberation Mono', monospace;
  font-size: 14px;
  font-weight: 600;
  color: #f4c542;              /* jaune accent charte */
  letter-spacing: 0.05em;
  text-align: center;
  min-width: 60px;
}

/* Mobile : compact pour ne pas trop empiéter sur la map */
@media (max-width: 600px) {
  .kta-compass-widget {
    top:  calc(76px + env(safe-area-inset-top,  0px));
    left: calc(10px + env(safe-area-inset-left, 0px));
    padding: 8px 10px 6px;
  }
  .kta-compass-rose-wrap,
  .kta-compass-rose {
    width: 80px;
    height: 80px;
  }
  .kta-compass-info {
    font-size: 13px;
    margin-top: 4px;
  }
}

/* 🏗️ Multi-niveau actif : decale la boussole plus bas pour ne pas overlap
   avec le Leaflet control "niveau actif" insere entre zoom et boussole.
   Le control fait ~36px (30px button + 1px border + Leaflet stacking margin),
   donc on rajoute ~45px au top initial. */
body.kta-multilevel-active .kta-compass-widget {
  top: calc(130px + env(safe-area-inset-top, 0px));
}
@media (max-width: 600px) {
  body.kta-multilevel-active .kta-compass-widget {
    top: calc(124px + env(safe-area-inset-top, 0px));
  }
}

/* =========================
   COMPASS — modal plein (clic sur le widget)
   ========================= */
.kta-compass-full-boite {
  max-width: 480px;
  width: 92%;
}

.kta-compass-full-corps {
  text-align: center;
}

.kta-compass-full-rose-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 8px auto 12px;
  width: 240px;
  height: 240px;
  overflow: hidden;
}

.kta-compass-rose-big {
  width: 240px;
  height: 240px;
  object-fit: contain;
  filter: drop-shadow(0 0 16px rgba(244, 197, 66, 0.22));
  transform-origin: 50% 50%;
  pointer-events: none;
}

.kta-compass-full-info {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 14px;
  margin: 6px 0 18px;
}

.kta-compass-full-cardinal {
  font-family: 'SF Mono', Monaco, Consolas, 'Liberation Mono', monospace;
  font-size: 42px;
  font-weight: 800;
  color: #f4c542;
  letter-spacing: 0.04em;
  line-height: 1;
}

.kta-compass-full-angle {
  font-family: 'SF Mono', Monaco, Consolas, 'Liberation Mono', monospace;
  font-size: 24px;
  font-weight: 600;
  color: #c8d0e0;
  line-height: 1;
}

.kta-compass-full-hint {
  color: #c8d0e0;
  font-size: 14px;
  margin: 12px 18px 6px;
  text-align: left;
}

.kta-compass-full-list {
  margin: 0 18px 14px;
  padding-left: 22px;
  text-align: left;
  color: #c8d0e0;
  font-size: 13px;
}
.kta-compass-full-list li {
  margin-bottom: 4px;
}

.kta-compass-full-note {
  background: rgba(255, 107, 107, 0.06);
  border-left: 3px solid rgba(255, 107, 107, 0.55);
  color: #ffb3b3;
  font-size: 13px;
  padding: 8px 12px;
  margin: 14px 18px 4px;
  border-radius: 4px;
  text-align: left;
}

/* Mobile : rose plus petite pour rentrer dans le viewport */
@media (max-width: 540px) {
  .kta-compass-full-rose-wrap,
  .kta-compass-rose-big {
    width: 180px;
    height: 180px;
  }
  .kta-compass-full-cardinal {
    font-size: 34px;
  }
  .kta-compass-full-angle {
    font-size: 20px;
  }
}

/* ==================================================================
   🔒 NETWORK AUDIT (v1.8.0 "Privacy & Audit")
   ================================================================== */

/* Toggle "Mode hors-ligne strict" dans la section Confidentialité de
   la modale Configuration du loader. Pattern label+checkbox cohérent
   avec les autres toggles (debug, perfPreset, etc.). */
.kta-net-paranoia-toggle {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 12px;
  background: rgba(255, 149, 0, 0.06);
  border: 1px solid rgba(255, 149, 0, 0.22);
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
  font-size: 13px;
  line-height: 1.45;
  color: #c8d0e0;
  /* 🆕 v1.8.0 fix : sans width:100% + box-sizing, un <label> en flex
     reste shrink-to-fit côté width (= largeur du content max). Avec un
     <span> long en flex:1 1 auto, le label débordait horizontalement
     hors du conteneur de la modale Configuration → texte tronqué à
     droite. Fix : largeur explicite du parent. */
  width: 100%;
  box-sizing: border-box;
}
.kta-net-paranoia-toggle:hover {
  background: rgba(255, 149, 0, 0.10);
  border-color: rgba(255, 149, 0, 0.42);
}
.kta-net-paranoia-toggle input[type="checkbox"] {
  margin: 2px 0 0 0;
  flex-shrink: 0;
  accent-color: #ff9500;
  cursor: pointer;
}
.kta-net-paranoia-toggle span {
  flex: 1 1 auto;
  /* min-width: 0 → permet au flex item de shrink en dessous de sa
     largeur de contenu intrinsèque, donc d'autoriser le wrap propre
     du texte. Sans ça, un texte long pouvait pousser le flex container
     au-delà de sa largeur disponible (cf. piège classique flexbox). */
  min-width: 0;
  word-break: break-word;
}

/* Badge "MODE HORS-LIGNE STRICT" dans le footer du loader (visible
   seulement quand paranoia ON). Cliquable → ouvre Configuration.

   🆕 v1.8.0 fix : ajout box-sizing:border-box. Sans ça, `<div>` est en
   content-box par défaut (les `<button>` héritent border-box du user-agent
   stylesheet mais pas les `<div>`), donc width:100% + padding 10/14 +
   border 1px = 100% + 30px → débordement de 30px à droite hors du
   #planLoaderBox parent. */
.kta-net-paranoia-badge {
  display: block;
  width: 100%;
  box-sizing: border-box;
  margin: 8px 0 12px 0;
  padding: 10px 14px;
  background: linear-gradient(135deg, rgba(255, 149, 0, 0.18), rgba(255, 149, 0, 0.08));
  border: 1px solid rgba(255, 149, 0, 0.5);
  border-radius: 8px;
  color: #ffb380;
  font-weight: 600;
  font-size: 13px;
  text-align: center;
  letter-spacing: 0.3px;
  cursor: pointer;
  user-select: none;
  animation: kta-paranoia-pulse 2.4s ease-in-out infinite;
}
.kta-net-paranoia-badge:hover {
  background: linear-gradient(135deg, rgba(255, 149, 0, 0.28), rgba(255, 149, 0, 0.14));
  border-color: rgba(255, 149, 0, 0.75);
  color: #ffc89a;
}
@keyframes kta-paranoia-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255, 149, 0, 0.4); }
  50%      { box-shadow: 0 0 8px 2px rgba(255, 149, 0, 0.22); }
}

/* ─────────────────────────────────────────────────────────────────
   Modale 📋 Journal réseau (live) — #loaderNetLogModal
   ───────────────────────────────────────────────────────────────── */

/* Boîte plus large pour le tableau */
.kta-net-log-boite {
  max-width: 920px !important;
  width: 95vw;
  height: 80vh;
  max-height: 90vh;
  display: flex !important;
  flex-direction: column;
}

/* Boutons mini dans le header de la modale journal */
.kta-net-log-mini {
  font-size: 11px !important;
  padding: 4px 10px !important;
  white-space: nowrap;
}

/* Corps scrollable */
.kta-net-log-corps {
  flex: 1 1 auto;
  overflow: hidden;
  display: flex !important;
  flex-direction: column;
  padding: 0 !important;
}

/* Bandeau d'infos en haut de la liste */
.kta-net-log-meta {
  padding: 10px 16px;
  background: rgba(140, 180, 255, 0.06);
  border-bottom: 1px solid rgba(140, 180, 255, 0.18);
  font-size: 12px;
  color: #c8d0e0;
  flex-shrink: 0;
}

/* Wrapper du tableau (scrollable) */
.kta-net-log-table-wrap {
  flex: 1 1 auto;
  overflow-y: auto;
  overflow-x: auto;
  background: #0d1117;
}

.kta-net-log-table {
  width: 100%;
  border-collapse: collapse;
  font-family: 'Courier New', monospace;
  font-size: 11px;
  color: #c8d0e0;
}
.kta-net-log-table thead {
  position: sticky;
  top: 0;
  background: #1a1f2e;
  z-index: 1;
}
.kta-net-log-table thead th {
  padding: 8px 10px;
  text-align: left;
  font-weight: 600;
  color: #8cb4ff;
  border-bottom: 2px solid rgba(140, 180, 255, 0.25);
  font-family: Arial, sans-serif;
  font-size: 11px;
  letter-spacing: 0.3px;
  text-transform: uppercase;
}
.kta-net-log-table tbody td {
  padding: 6px 10px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
  vertical-align: top;
}
.kta-net-log-table tbody tr:hover {
  background: rgba(140, 180, 255, 0.04);
}

/* Colonnes */
.kta-net-cell-time   { color: #8892a4; white-space: nowrap; font-size: 10px; }
.kta-net-cell-kind   { color: #c8d0e0; white-space: nowrap; }
.kta-net-cell-method { color: #f4c542; font-weight: 600; white-space: nowrap; }
.kta-net-cell-url {
  color: #e8eaf0;
  word-break: break-all;
  max-width: 360px;
  font-size: 11px;
}
.kta-net-cell-cat    { white-space: nowrap; font-weight: 500; }
.kta-net-cell-body   { text-align: center; }
.kta-net-cell-status { text-align: center; font-weight: 600; }

.kta-net-status-ok      { color: #a8d4a8; }
.kta-net-status-err     { color: #ff8c8c; }
.kta-net-status-pending { color: #8892a4; }
.kta-net-status-blocked { color: #ff9500; }

.kta-net-body-yes {
  display: inline-block;
  padding: 2px 8px;
  background: rgba(255, 140, 140, 0.18);
  color: #ff8c8c;
  border: 1px solid rgba(255, 140, 140, 0.4);
  border-radius: 4px;
  font-weight: 700;
  font-size: 10px;
}
.kta-net-body-no {
  display: inline-block;
  padding: 2px 8px;
  background: rgba(168, 212, 168, 0.12);
  color: #a8d4a8;
  border: 1px solid rgba(168, 212, 168, 0.32);
  border-radius: 4px;
  font-weight: 500;
  font-size: 10px;
}

.kta-net-row-blocked {
  background: rgba(255, 149, 0, 0.08) !important;
}
.kta-net-row-blocked td {
  border-left: 3px solid #ff9500;
}

/* ─────────────────────────────────────────────────────────────────
   Modale 📖 Doc audit — #loaderNetDocModal
   ───────────────────────────────────────────────────────────────── */

.kta-net-doc-boite {
  max-width: 680px !important;
  max-height: 90vh;
}
.kta-net-doc-corps {
  color: #c8d0e0;
  line-height: 1.55;
}
.kta-net-doc-lead {
  padding: 14px 16px;
  background: rgba(140, 180, 255, 0.08);
  border: 1px solid rgba(140, 180, 255, 0.28);
  border-radius: 8px;
  margin-bottom: 16px;
  font-size: 14px;
}
.kta-net-doc-section {
  margin-bottom: 18px;
}
.kta-net-doc-section-titre {
  font-size: 14px;
  font-weight: 700;
  color: #8cb4ff;
  margin-bottom: 8px;
  padding-bottom: 4px;
  border-bottom: 1px solid rgba(140, 180, 255, 0.18);
}
/* 🆕 v1.20.0-fix1 — Section dédiée "Périmètre myktamap.fr" (clause
   anti-fork/copie). Encadrement orange/saumon pour signaler une mise
   en garde importante sans tomber dans le rouge alarmiste. */
.kta-net-doc-section.kta-net-doc-section-domain {
  padding: 12px 14px;
  background: rgba(255, 140, 100, 0.06);
  border: 1px solid rgba(255, 140, 100, 0.28);
  border-radius: 8px;
  margin-bottom: 18px;
}
.kta-net-doc-section.kta-net-doc-section-domain .kta-net-doc-section-titre {
  color: #ffae80;
  border-bottom-color: rgba(255, 140, 100, 0.30);
}
.kta-net-doc-section.kta-net-doc-section-domain code {
  background: rgba(255, 140, 100, 0.14);
  color: #ffae80;
  padding: 1px 5px;
  border-radius: 3px;
  font-size: 12px;
}
/* Variants thème clair */
body.kta-theme-light .kta-net-doc-section.kta-net-doc-section-domain,
html.kta-theme-light .kta-net-doc-section.kta-net-doc-section-domain {
  background: rgba(180, 80, 30, 0.08) !important;
  border-color: rgba(180, 80, 30, 0.35) !important;
}
body.kta-theme-light .kta-net-doc-section.kta-net-doc-section-domain .kta-net-doc-section-titre,
html.kta-theme-light .kta-net-doc-section.kta-net-doc-section-domain .kta-net-doc-section-titre {
  color: #b45309 !important;
  border-bottom-color: rgba(180, 80, 30, 0.35) !important;
}
body.kta-theme-light .kta-net-doc-section.kta-net-doc-section-domain code,
html.kta-theme-light .kta-net-doc-section.kta-net-doc-section-domain code {
  background: rgba(180, 80, 30, 0.12) !important;
  color: #b45309 !important;
}
.kta-net-doc-hint {
  font-size: 13px;
  color: #c8d0e0;
  margin: 6px 0 10px 0;
}
.kta-net-doc-list,
.kta-net-doc-ol {
  margin: 8px 0;
  padding-left: 22px;
  font-size: 13px;
  color: #c8d0e0;
  line-height: 1.6;
}
.kta-net-doc-list li,
.kta-net-doc-ol li {
  margin-bottom: 6px;
}
.kta-net-doc-list li code,
.kta-net-doc-ol li code,
.kta-net-doc-hint code {
  background: rgba(140, 180, 255, 0.12);
  color: #8cb4ff;
  padding: 1px 6px;
  border-radius: 3px;
  font-family: 'Courier New', monospace;
  font-size: 12px;
}
.kta-net-doc-quote {
  padding: 12px 16px;
  background: rgba(244, 197, 66, 0.06);
  border-left: 3px solid #f4c542;
  border-radius: 4px;
  font-size: 13px;
  color: #d0d6dc;
  font-style: italic;
}

/* ─────────────────────────────────────────────────────────────────
   Responsive : adapter le tableau journal sur mobile
   ───────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  .kta-net-log-boite {
    width: 98vw;
    height: 90vh;
  }
  .kta-net-log-table {
    font-size: 10px;
  }
  .kta-net-log-table thead th {
    font-size: 10px;
    padding: 6px 6px;
  }
  .kta-net-log-table tbody td {
    padding: 4px 6px;
  }
  .kta-net-cell-url {
    max-width: 160px;
  }
}

/* ==================================================================
   🎨 REFONTE UI v1 (branche Refonte_interface)
   ==================================================================

   Active uniquement quand body.kta-refonte-v1 est présent (= flag
   localStorage["myktamap_refonte_v1"] = "1"). Sinon ces règles ne
   matchent pas → comportement v1.8.x strict.

   Architecture phase 1 :
   - HEADER BAR sticky top 44px (toujours visible, mobile-first)
   - SIDEBAR GAUCHE Leaflet topleft (zoom, niveau, doc, settings, charger, save)
   - SIDEBAR DROITE Leaflet topright (recherche, édition, mesure, tracés, zones, tracker)
   - STATUS BAR sticky bottom 36px (collapsible)

   Charte couleurs strictement préservée (#0a0d18 / #1a1f2e / #e8eaf0 /
   #c8d0e0 / #8892a4 / #f4c542 / #8cb4ff).
   ================================================================== */

/* ─────────────────────────────────────────────────────────────────
   HEADER BAR (sticky top 44px)
   ───────────────────────────────────────────────────────────────── */

/* 🆕 v1.9.2-hotfix-loader-header (KARMA "si je clique sur la rose des
   vents, retour home avec haut couleur leaflet. Si je clique sur titre
   puis tous mes plans, retour home avec haut noir") :
   Quand le loader (home) est visible, on cache COMPLÈTEMENT le header
   refonte et la statusbar refonte. Sans ça, comme le fond du loader
   est rgba(5,8,15,0.92) (8% transparent), le gradient #1a1f2e du
   header bleed-through en haut → "couleur leaflet visible".
   Selon le chemin d'arrivée au home, le rendu compositing iOS varie
   (clic direct sur 🌹 rose ↔ passage par modale switcher), ce qui
   donne 2 visuels incohérents. Cette règle force le même rendu
   (header & statusbar cachés) quel que soit le chemin.
   La classe `kta-loader-active` est ajoutée par afficherLoader() dans
   main.js et retirée par masquerLoader() dans index.html. */
body.kta-loader-active .kta-refonte-header,
body.kta-loader-active .kta-refonte-statusbar {
  display: none !important;
}

body.kta-refonte-v1 .kta-refonte-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 44px;
  z-index: 1200;  /* au-dessus de Leaflet (1000) et du contrôle layers, sous les modales (99999) */
  background: linear-gradient(180deg, #1a1f2e 0%, #161b28 100%);
  border-bottom: 1px solid rgba(244, 197, 66, 0.18);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
  /* 🆕 v1.8.1-refonte-12 : layout flex par défaut (portrait). Le titre
     est centré dans la largeur restante via le wrap `flex:1 + justify-
     content:center` — pas un centrage absolu (asymétrie home/counters),
     mais c'est le comportement que KARMA préfère en portrait. Le grid
     `1fr auto 1fr` (centrage géométrique absolu) est appliqué UNIQUEMENT
     en landscape via la media query plus bas, pour rendre le titre bien
     visible/centré sur les petits écrans en orientation paysage. */
  display: flex;
  align-items: center;
  padding: 0 8px;
  gap: 8px;
  /* Safe-area iOS PWA (notch + status bar translucide) */
  padding-top: env(safe-area-inset-top, 0px);
  padding-left: calc(8px + env(safe-area-inset-left, 0px));
  padding-right: calc(8px + env(safe-area-inset-right, 0px));
  height: calc(44px + env(safe-area-inset-top, 0px));
  box-sizing: border-box;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
  color: #c8d0e0;
  -webkit-user-select: none;
  user-select: none;
}

/* 🆕 v1.8.1-refonte-9 fix bug double-comptage (KARMA capture iPhone) :
   l'ancienne règle `.leaflet-top { top: calc(44 + safe-top) }` cumulait
   le décalage AVEC le #map qui est déjà décalé. Sur iPhone notch
   (safe-top ≈ 50px), ça faisait un gap de ~190px au lieu de 0.

   Maintenant : .leaflet-top reste à top:0 natif Leaflet (relatif au
   .leaflet-container qui est dans #map déjà décalé de 44+safe-top du
   viewport). Le gap effectif viewport→sidebar = 44 + safe-top + 0 = 44 +
   safe-top. PARFAIT, sidebar collée juste sous le header. */
body.kta-refonte-v1 .leaflet-top {
  /* Laisser top: 0 natif Leaflet, le décalage est déjà sur #map */
  top: 0 !important;
}
/* Idem .leaflet-bottom : laisser bottom:0 natif, le footer est déjà
   pris en compte par #map { bottom: calc(52 + safe-bottom) }. */
body.kta-refonte-v1 .leaflet-bottom {
  bottom: 0 !important;
}

/* Masque le titre fixe actuel (#kta-titre-fixe) — remplacé par le header bar */
body.kta-refonte-v1 #kta-titre-fixe {
  display: none !important;
}

/* Bouton home (gauche) */
body.kta-refonte-v1 .kta-refonte-header-btn {
  background: transparent;
  border: 1px solid transparent;
  border-radius: 6px;
  color: #c8d0e0;
  font-size: 18px;
  cursor: pointer;
  padding: 6px 10px;
  height: 34px;
  min-width: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s, border-color 0.15s;
  flex-shrink: 0;
}
body.kta-refonte-v1 .kta-refonte-header-btn:hover,
body.kta-refonte-v1 .kta-refonte-header-btn:focus-visible {
  background: rgba(140, 180, 255, 0.10);
  border-color: rgba(140, 180, 255, 0.30);
  outline: none;
}
body.kta-refonte-v1 .kta-refonte-header-home {
  font-size: 20px;
  /* 🆕 Padding réduit pour laisser de la place à l'image rose des vents */
  padding: 4px 8px;
}

/* 🆕 Rose des vents dans le bouton home — mkm-full.png (même asset que
   le splash + le titre stylé de la home, cohérence identité KARMA). */
body.kta-refonte-v1 .kta-refonte-header-home-img {
  height: 26px;
  width: auto;
  display: block;
  /* Drop-shadow jaune subtile pour faire ressortir la rose sur le dark */
  filter: drop-shadow(0 0 4px rgba(244, 197, 66, 0.40));
  transition: transform 0.15s, filter 0.15s;
  pointer-events: none;  /* clics passent au bouton parent */
  -webkit-user-drag: none;
  user-select: none;
}
body.kta-refonte-v1 .kta-refonte-header-home:hover .kta-refonte-header-home-img {
  transform: scale(1.08);
  filter: drop-shadow(0 0 6px rgba(244, 197, 66, 0.65));
}

/* Titre du plan (centre) */
body.kta-refonte-v1 .kta-refonte-header-title-wrap {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  justify-content: center;
}
/* 🆕 v1.9.3-B1d-fix5 (KARMA "titre passe derrière les compteurs") :
   Graceful degradation 2 niveaux :
     1. Quand le titre déborde → on cache d'abord la version (JS détecte
        scrollWidth > clientWidth, met display:none sur la version).
     2. Si toujours trop large → l'ellipsis CSS natif tronque le nom.
        L'ellipsis prend la couleur du parent → on force #f4c542 (jaune
        charte) au lieu d'hériter du gris d'origine, pour que "..."
        soit dans la couleur du nom (= le user voit que c'est le nom qui
        est tronqué, pas un séparateur ou autre).
   ⚠️ text-overflow ne s'applique PAS sur le button display:flex
   directement. On le pose sur le span #kta-refonte-plan-name lui-même
   (qui est shrinkable via min-width:0 + flex 0 1 auto).
*/
body.kta-refonte-v1 .kta-refonte-header-title {
  background: transparent;
  border: 1px solid transparent;
  border-radius: 6px;
  color: #f4c542;          /* hérité pour le span name + l'ellipsis */
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  padding: 4px 12px;
  display: flex;
  align-items: baseline;
  gap: 6px;
  max-width: 100%;
  min-width: 0;            /* indispensable pour le shrink des enfants */
  overflow: hidden;
  white-space: nowrap;
  transition: background 0.15s, border-color 0.15s;
}
body.kta-refonte-v1 .kta-refonte-header-title:hover,
body.kta-refonte-v1 .kta-refonte-header-title:focus-visible {
  background: rgba(244, 197, 66, 0.08);
  border-color: rgba(244, 197, 66, 0.25);
  outline: none;
}
body.kta-refonte-v1 #kta-refonte-plan-name {
  color: #f4c542;
  font-weight: 700;
  text-shadow: 0 0 8px rgba(244, 197, 66, 0.25);
  /* Shrink en premier, ellipsis dans la couleur du nom (#f4c542) */
  flex: 0 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
body.kta-refonte-v1 #kta-refonte-plan-version {
  color: #8892a4;
  font-size: 12px;
  font-weight: 500;
  /* La version ne shrink jamais : soit visible entière, soit cachée
     totalement par le JS (display:none). Évite "v1.7" tronqué en "v…". */
  flex: 0 0 auto;
}
body.kta-refonte-v1 .kta-refonte-header-chevron {
  color: #8892a4;
  font-size: 11px;
  margin-left: 2px;
  flex: 0 0 auto;
}

/* Compteurs (droite) */
/* v1.35.2 — gap 8px (avant 6px) pour respiration plus harmonieuse entre les
   3 chips (📊 / 📖 / 🚨) + 🔋 batterie. */
body.kta-refonte-v1 .kta-refonte-header-counters {
  font-size: 11px;
  font-weight: 600;
  padding: 4px 8px;
  display: flex;
  align-items: center;
  gap: 8px;
}
body.kta-refonte-v1 .kta-refonte-counter {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 3px 8px;            /* v1.35.2 — padding uniforme */
  min-width: 36px;             /* v1.35.2 — largeur min identique pour 📖/🚨 et stats */
  min-height: 24px;            /* v1.35.2 — hauteur min cohérente */
  box-sizing: border-box;
  border-radius: 5px;
  background: rgba(140, 180, 255, 0.08);
  border: 1px solid rgba(140, 180, 255, 0.18);
  transition: opacity 0.15s, background 0.15s;
}
body.kta-refonte-v1 .kta-refonte-counter-icon {
  font-size: 14px;             /* v1.35.2 — taille uniforme (avant 12px, mais 📖/🚨 surchargés à 16px) */
  line-height: 1;
}
body.kta-refonte-v1 .kta-refonte-counter-val {
  color: #8cb4ff;
  font-size: 12px;
  font-weight: 700;
  min-width: 8px;
  text-align: center;
}
body.kta-refonte-v1 .kta-refonte-counter-empty {
  opacity: 0.4;
}
body.kta-refonte-v1 .kta-refonte-counter-empty .kta-refonte-counter-val {
  color: #8892a4;
}

/* 🆕 v1.11.1 V2 (KARMA "trop d'icônes sur mobile") : chip résumé 📊
   visible UNIQUEMENT en mobile portrait. Sur desktop/tablette/landscape,
   il est masqué et les 5 chips individuels (📍🛣⬛🏛️📸) + 🪫 sont
   affichés. En mobile portrait, on inverse : seul 📊 est visible et il
   suffit de cliquer sur le bouton parent pour ouvrir la modale Détails.
   Le chip 🪫 batterie reste affiché en permanence (info critique). */
body.kta-refonte-v1 .kta-refonte-counter-summary {
  display: none;  /* masqué par défaut (desktop) */
  background: rgba(244, 197, 66, 0.10);  /* accent jaune charte subtil */
  border-color: rgba(244, 197, 66, 0.30);
}
body.kta-refonte-v1 .kta-refonte-counter-summary .kta-refonte-counter-icon {
  font-size: 14px;
}
body.kta-refonte-v1 .kta-refonte-counter-summary .kta-refonte-counter-val {
  color: #f4c542;
  font-variant-numeric: tabular-nums;
}

/* Mobile portrait : un seul chip résumé visible.
   Breakpoint 480px = phone portrait standard (iPhone SE/Mini, Android compact). */
@media (max-width: 480px) {
  body.kta-refonte-v1 #kta-refonte-counter-points,
  body.kta-refonte-v1 #kta-refonte-counter-roads,
  body.kta-refonte-v1 #kta-refonte-counter-zones,
  body.kta-refonte-v1 #kta-refonte-counter-structures,
  body.kta-refonte-v1 #kta-refonte-counter-photos {
    display: none !important;  /* masque les 5 compteurs individuels */
  }
  body.kta-refonte-v1 .kta-refonte-counter-summary {
    display: flex !important;  /* révèle le chip résumé 📊 */
  }
  /* Le chip 🪫 batterie reste visible (cf. son propre display:none initial
     géré par BatteryGuard — si dispo il sera révélé via JS, indépendamment
     de cette media query). Le 🪫 est volontairement gardé en mobile car
     c'est une info critique en sous-sol. */
}

/* 🆕 v1.11.1 V2 : chip batterie (KARMA 2:d + 4:a code couleur).
   La couleur est appliquée en inline-style depuis _refreshBatteryUi
   (refonteInterface.js) selon le niveau actuel. La valeur monospace
   pour stabilité visuelle au changement (87% → 88% ne décale pas). */
body.kta-refonte-v1 .kta-refonte-counter-battery {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.12);
}
body.kta-refonte-v1 .kta-refonte-counter-battery .kta-refonte-counter-val {
  font-variant-numeric: tabular-nums;
  font-family: ui-monospace, "SF Mono", monospace;
  /* La couleur est inline depuis JS (vert/jaune/orange/rouge/bleu) */
  color: inherit;
}
body.kta-refonte-v1 .kta-refonte-stat-battery .kta-refonte-stat-val {
  font-variant-numeric: tabular-nums;
  color: inherit;
}

/* 🆕 v1.11.1-fix3 (KARMA "icône batterie exclue de la surbrillance
   session") : le chip batterie sort du bouton compteurs et devient un
   sibling dans le header. Il garde sa propre carrosserie visuelle (fond
   + bordure subtils) mais avec une petite marge gauche pour le séparer
   du bouton compteurs. Pas de cursor pointer (pas cliquable, c'est de
   l'info seulement). */
body.kta-refonte-v1 .kta-refonte-header-battery {
  margin-left: 6px;
  cursor: default;
  flex-shrink: 0;  /* ne pas écraser en landscape mobile chargé */
}

/* Mobile portrait : compteurs simplifiés */
@media (max-width: 480px) {
  body.kta-refonte-v1 .kta-refonte-header-counters {
    padding: 4px 6px;
    gap: 4px;
  }
  body.kta-refonte-v1 .kta-refonte-counter {
    padding: 2px 4px;
    gap: 2px;
  }
  body.kta-refonte-v1 .kta-refonte-counter-icon {
    font-size: 11px;
  }
  body.kta-refonte-v1 .kta-refonte-header-title {
    font-size: 14px;
    padding: 4px 8px;
  }
  body.kta-refonte-v1 #kta-refonte-plan-version {
    font-size: 11px;
  }
}

/* ─────────────────────────────────────────────────────────────────
   SIDEBARS LEAFLET — séparateur visuel entre les blocs de groupes
   ─────────────────────────────────────────────────────────────────
   On utilise une bordure inférieure marquée sur le dernier control
   du bloc "système" (zoom/niveau) pour visuellement séparer du bloc
   "actions globales" en dessous (Doc, Settings, etc.).

   Le séparateur entre quick actions (search/edit/mesure) et accordéon
   thématique (tracés/zones/tracker) à droite suit le même principe.
   ───────────────────────────────────────────────────────────────── */

/* 🎨 Refonte UI v1.2 — Sidebars unifiées + boutons réduction + boussole bottom
   ─────────────────────────────────────────────────────────────────
   Itération KARMA (1:a 2:a 3:a 4:a 5:b 6:a) :
   - Chaque sidebar (gauche/droite) = UNE SEULE BARRE VERTICALE continue
     (pas d'icônes séparées avec gap). Margin 0, bordures arrondies
     uniquement aux extrémités (premier+dernier control), séparateurs
     internes 1px subtils.
   - Sous-actions des accordéons : s'empilent EN DESSOUS du bouton
     principal (vertical) au lieu d'à côté (horizontal). La sidebar
     grossit vers le bas, scroll interne si dépasse.
   - Bouton ≡ de réduction en HAUT de chaque sidebar (via flex order:-1).
     Au clic toggle classe body.kta-refonte-sidebar-{left|right}-collapsed.
     Quand collapsed → seul le bouton ≡ reste visible (la barre = 1 icône).
   - Boussole repositionnée en BOTTOM-LEFT au-dessus du footer (plus de
     chevauchement possible avec les actions globales gauche).
   ───────────────────────────────────────────────────────────────── */

/* Sidebar verticale en mode flex (pour pouvoir utiliser order:-1 sur
   le bouton réduction qui doit s'afficher en haut peu importe son
   ordre dans le DOM). Leaflet par défaut utilise float natif → on
   override pour les 2 sidebars. */
body.kta-refonte-v1 .leaflet-top.leaflet-left,
body.kta-refonte-v1 .leaflet-top.leaflet-right {
  display: flex;
  flex-direction: column;
  /* 🆕 Refonte v1.2 itéré : padding-top 0 = bouton ≡ COLLÉ au header
     (feedback KARMA "je veux que les icone de reduction de barre soit
     coller au head"). Avant : 2px de gap minime. */
  padding-top: 0 !important;
  /* Scroll interne si la sidebar dépasse la hauteur disponible (entre
     header 44px et footer dynamique via --kta-statusbar-h qui inclut
     déjà safe-area-bottom). Quand le footer wrap multi-ligne et
     grandit, la sidebar rétrécit automatiquement pour ne pas se faire
     recouvrir.
     🆕 v1.9.2-fullscreen : `100dvh` au lieu de `100vh` (fallback `vh`
     gardé en premier pour iOS 15-). */
  max-height: calc(100vh - 44px - var(--kta-statusbar-h, 52px) - env(safe-area-inset-top, 0px) - 4px);
  max-height: calc(100dvh - 44px - var(--kta-statusbar-h, 52px) - env(safe-area-inset-top, 0px) - 4px);
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: none;  /* Firefox */
  -webkit-overflow-scrolling: touch;
}
body.kta-refonte-v1 .leaflet-top.leaflet-left { align-items: flex-start; }
body.kta-refonte-v1 .leaflet-top.leaflet-right { align-items: flex-end; }
/* Masquer la scrollbar webkit pour rester propre visuellement */
body.kta-refonte-v1 .leaflet-top.leaflet-left::-webkit-scrollbar,
body.kta-refonte-v1 .leaflet-top.leaflet-right::-webkit-scrollbar {
  display: none;
}

/* Padding horizontal minimal (collé au bord) */
body.kta-refonte-v1 .leaflet-left { padding-left: 2px !important; }
body.kta-refonte-v1 .leaflet-right { padding-right: 2px !important; }

/* SIDEBAR UNIFIÉE : zéro margin entre les controls collés.
   En mode flex (cf. au-dessus), .leaflet-control sont des flex items
   empilés verticalement. On force margin:0 pour les coller.
   Float Leaflet natif est neutralisé par le flex. */
body.kta-refonte-v1 .leaflet-bar,
body.kta-refonte-v1 .leaflet-control {
  margin: 0 !important;
  float: none !important;
  clear: none !important;
}
/* 🆕 Refonte v1.2 itéré : surcharge la règle Leaflet native plus spécifique
   `.leaflet-top .leaflet-control { margin-top: 10px }` (leaflet.css ligne 163).
   Ma règle plus haute devrait gagner par spécificité (0,2,1 vs 0,2,0) mais
   on renforce explicitement pour les 2 sidebars + chaque direction de
   margin → garantit que le 1er control de la sidebar est collé au top
   du .leaflet-top (lui-même collé au header via top:44px). Sans ça,
   gap de 10px visible entre le bas du header et le bouton ≡ de réduction.
   Feedback KARMA : "je veux que les icone de reduction de barre soit coller au head". */
body.kta-refonte-v1 .leaflet-top .leaflet-control,
body.kta-refonte-v1 .leaflet-top.leaflet-left .leaflet-control,
body.kta-refonte-v1 .leaflet-top.leaflet-right .leaflet-control {
  margin-top:    0 !important;
  margin-bottom: 0 !important;
  margin-left:   0 !important;
  margin-right:  0 !important;
}

/* Bordures arrondies uniquement aux extrémités de la sidebar (premier
   et dernier control) — donne l'effet "barre unique" sans gap visible.
   Tout le reste : carré. */
body.kta-refonte-v1 .leaflet-bar {
  border-radius: 0 !important;
}
body.kta-refonte-v1 .leaflet-top > .leaflet-control:first-child .leaflet-bar,
body.kta-refonte-v1 .leaflet-top > .leaflet-control:first-child {
  border-top-left-radius: 8px !important;
  border-top-right-radius: 8px !important;
}
body.kta-refonte-v1 .leaflet-top > .leaflet-control:last-child .leaflet-bar,
body.kta-refonte-v1 .leaflet-top > .leaflet-control:last-child {
  border-bottom-left-radius: 8px !important;
  border-bottom-right-radius: 8px !important;
}

/* Séparateur interne 1px subtil entre 2 controls collés. Border-top
   pour ne pas se cumuler avec le border-bottom natif du control
   précédent. */
body.kta-refonte-v1 .leaflet-top > .leaflet-control:not(:first-child) .leaflet-bar {
  border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
}

/* Boutons des groupes accordéon : 36x36px (cliquabilité mobile) */
body.kta-refonte-v1 .leaflet-bar a {
  width: 36px !important;
  height: 36px !important;
  line-height: 36px !important;
  font-size: 19px;
  /* Important pour le flow vertical : annule le float Leaflet natif
     qui ferait flotter les sous-actions à gauche. */
  float: none !important;
  display: block !important;
  /* Le border-bottom natif Leaflet entre 2 boutons d'un même control
     (ex: zoom-in / zoom-out) reste — c'est le séparateur intra-control. */
}

/* SOUS-ACTIONS EN COLONNE — KARMA 3:a "scroll vers le bas et agrandissement".
   Les .kta-sub apparaissaient à droite du bouton principal (inline-block).
   Refonte : block, s'empilent verticalement. */
body.kta-refonte-v1 .leaflet-bar a.kta-sub {
  width: 36px !important;
  height: 36px !important;
  line-height: 36px !important;
  font-size: 18px;
  display: block !important;
  float: none !important;
}
/* .kta-hidden masque les sous-actions quand le groupe est replié.
   Override "display:none" propre (Leaflet pouvait afficher en flex). */
body.kta-refonte-v1 .leaflet-bar a.kta-sub.kta-hidden {
  display: none !important;
}

/* Shadow externe sur les sidebars (effet "card flottante") au lieu
   d'un shadow par-control (qui faisait stacking visuel). On apply le
   shadow uniquement sur le premier/dernier control pour englober. */
body.kta-refonte-v1 .leaflet-bar {
  box-shadow: none;
}
body.kta-refonte-v1 .leaflet-top > .leaflet-control:first-child .leaflet-bar {
  box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.25);
}
body.kta-refonte-v1 .leaflet-top > .leaflet-control:last-child .leaflet-bar {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.35);
}

/* ─────────────────────────────────────────────────────────────────
   BOUTON ≡ DE RÉDUCTION DES SIDEBARS
   ─────────────────────────────────────────────────────────────────
   Créé par refonteInterface.js > _creerBoutonReduction.
   Marqué .kta-refonte-collapse-bar (sur le .leaflet-bar) +
   .kta-refonte-collapse-{left|right} pour distinguer côté.

   Position visuelle : EN HAUT (order:-1 en flex) peu importe l'ordre
   d'ajout DOM (les natifs Layers/Zoom Leaflet sont créés avant nous).
   ───────────────────────────────────────────────────────────────── */

body.kta-refonte-v1 .kta-refonte-collapse-bar {
  order: -1;  /* premier en flex order */
}

body.kta-refonte-v1 .kta-refonte-collapse-btn {
  background: rgba(244, 197, 66, 0.10);
  color: #f4c542 !important;
  font-size: 20px !important;
  font-weight: 600;
  line-height: 36px !important;
  text-align: center;
  border: none;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
body.kta-refonte-v1 .kta-refonte-collapse-btn:hover,
body.kta-refonte-v1 .kta-refonte-collapse-btn:focus-visible {
  background: rgba(244, 197, 66, 0.22);
  color: #ffd766 !important;
  outline: none;
}

/* État collapsed : cacher tous les controls SAUF le bouton de réduction.
   On utilise :not(.kta-refonte-collapse-bar) pour cibler n'importe
   quel control sauf celui marqué. */
body.kta-refonte-sidebar-left-collapsed .leaflet-top.leaflet-left > .leaflet-control:not(.kta-refonte-collapse-bar) {
  display: none !important;
}
body.kta-refonte-sidebar-right-collapsed .leaflet-top.leaflet-right > .leaflet-control:not(.kta-refonte-collapse-bar) {
  display: none !important;
}

/* ─────────────────────────────────────────────────────────────────
   🧭 BOUSSOLE — REPOSITIONNÉE EN BOTTOM-LEFT (au-dessus du footer)
   ─────────────────────────────────────────────────────────────────
   Itération KARMA : la boussole top-left chevauchait constamment les
   actions globales gauche (Doc/Settings/Charger/Save). Solution
   propre : déplacer en bottom-left, juste au-dessus de la status bar.
   Plus aucun chevauchement possible avec les sidebars top.
   ───────────────────────────────────────────────────────────────── */
body.kta-refonte-v1 .kta-compass-widget {
  /* top: auto annule la règle de base à top:80px qui s'applique en v1. */
  top: auto !important;
  /* 🆕 v1.8.1-refonte-10 : boussole posée au-dessus du status bar.
     Suit la hauteur dynamique du status bar via `--kta-statusbar-h`
     (mise à jour par JS quand la barre wrap multi-ligne).
     🆕 v1.19.0-fix3 (KARMA "met la légèrement plus haute, pas sur le
     footer mais au-dessus") : gap augmenté de 8px → 20px pour une vraie
     respiration visuelle. Garantit qu'on lit clairement la séparation
     entre boussole flottante et footer statique, sans risque de
     chevauchement perçu même si le footer grossit à 2 lignes ou que
     la variable --kta-statusbar-h tarde à se mettre à jour. */
  bottom: calc(var(--kta-statusbar-h, 52px) + 36px) !important;
  left: calc(10px + env(safe-area-inset-left, 0px));
  transition: bottom 0.2s ease-out;
  /* 🆕 v1.19.0-fix2 (KARMA "bug boussole derrière le footer") : le status
     bar refonte a `z-index: 1200`, la boussole base est à 1050 → si la
     variable --kta-statusbar-h n'est pas à jour (ResizeObserver pas encore
     ticked, ou viewport en transition orientation), la boussole se
     retrouve EN-DESSOUS du footer dans la stack et est masquée. Fix
     définitif : forcer z-index 1250 (= footer 1200 + 50) en mode refonte
     pour garantir que la boussole reste TOUJOURS visible, indépendamment
     du positionnement calculé. Combiné au bottom dynamique, double
     protection. */
  z-index: 1250 !important;
}
/* Multi-niveau : pas de changement de position en bottom-left, la
   présence ou non du bouton Niveau ne change rien (il est en haut). */
body.kta-refonte-v1.kta-multilevel-active .kta-compass-widget {
  top: auto !important;
  bottom: calc(var(--kta-statusbar-h, 52px) + 36px) !important;
  z-index: 1250 !important;
}

/* ─────────────────────────────────────────────────────────────────
   MODALES — réserver l'espace du header + footer en mode refonte
   ─────────────────────────────────────────────────────────────────
   Bug remonté KARMA : la modale "Distance totale" s'affichait sous
   le footer (modale plein écran centrée verticalement → la boîte
   débordait dans la zone occupée par le status bar 52px).

   Cause : .kta-readme-modal-overlay a `inset: 0; align-items: center`.
   Le centrage flex prend tout le viewport (100vh), donc une boîte
   de 88vh est centrée à 6vh du top + 6vh du bottom. En mode refonte,
   les 6vh du bottom passent SOUS le footer fixed (52px + safe-area).

   Fix : padding-top + padding-bottom sur l'overlay en mode refonte
   pour réserver l'espace des 2 bars. Le fond sombre couvre toujours
   tout l'écran (inset:0 + background rgba), mais la boîte centrée
   reste dans la zone padding-box → plus de débordement.

   Concerne TOUTES les modales utilisant .kta-readme-modal-overlay :
   Distance totale, Itinéraire, Configuration, Aide, Audit, etc. */
body.kta-refonte-v1 .kta-readme-modal-overlay {
  padding-top:    calc(44px + env(safe-area-inset-top, 0px) + 16px);
  /* 🆕 v1.8.1-refonte-10 : padding-bottom suit la variable dynamique
     `--kta-statusbar-h` (qui inclut safe-area déjà) + 16px de respiration.
     Quand le footer wrap multi-ligne, les modales s'ajustent automatiquement. */
  padding-bottom: calc(var(--kta-statusbar-h, 52px) + 16px);
}

/* En landscape mobile, header est plus court (36px). Le footer suit
   également la variable dynamique --kta-statusbar-h (qui devient 40+safe
   en landscape via la règle plus bas), donc rien à changer côté bottom. */
@media (max-height: 500px) and (orientation: landscape) {
  body.kta-refonte-v1 .kta-readme-modal-overlay {
    padding-top:    calc(36px + env(safe-area-inset-top, 0px) + 8px);
    padding-bottom: calc(var(--kta-statusbar-h, 40px) + 8px);
  }
}

/* ─────────────────────────────────────────────────────────────────
   🆕 v1.8.1-refonte-10 — LANDSCAPE MODE : SOUS-ACTIONS HORIZONTALES
   ─────────────────────────────────────────────────────────────────
   En mode portrait (par défaut) les sous-actions s'empilent EN DESSOUS
   du bouton principal (vertical) — la sidebar grossit vers le bas.
   En mode landscape mobile (max-height ≤ 500px), c'est gênant car la
   hauteur écran est limitée → on dépasse vite le viewport et il faut
   scroller.

   Solution : en landscape, les sous-actions se déplient HORIZONTALEMENT
   vers l'INTÉRIEUR de l'écran (= côté opposé au bord de la sidebar).
   - Sidebar gauche : main button au bord gauche, subs unfold vers la
     DROITE (intérieur) → flex-direction: row.
   - Sidebar droite : main button au bord droit, subs unfold vers la
     GAUCHE (intérieur) → flex-direction: row-reverse. Le main button
     reste collé au bord droit (sidebar align-items:flex-end), les subs
     en DOM après main apparaissent visuellement à sa gauche.

   Chaque .leaflet-bar devient un "pill" horizontal arrondi indépendant
   (override le mode "barre unifiée verticale" du portrait). Les groupes
   restent stackés verticalement dans la sidebar avec un petit gap.
   ───────────────────────────────────────────────────────────────── */
@media (max-height: 500px) and (orientation: landscape) {
  /* Chaque .leaflet-bar devient un conteneur flex horizontal */
  body.kta-refonte-v1 .leaflet-bar {
    display: flex !important;
    align-items: center !important;
    /* Pill arrondi indépendant — override le radius:0 du mode vertical */
    border-radius: 8px !important;
    overflow: hidden;
  }
  /* Sidebar GAUCHE : subs vers la DROITE (intérieur écran) */
  body.kta-refonte-v1 .leaflet-top.leaflet-left .leaflet-bar {
    flex-direction: row !important;
  }
  /* Sidebar DROITE : subs vers la GAUCHE (intérieur écran).
     row-reverse inverse l'ordre visuel mais préserve l'ordre DOM —
     main button reste collé au bord droit (align-items:flex-end de la
     sidebar), subs apparaissent à sa gauche en ordre de proximité
     décroissante (sub1 le plus proche du main, etc.). */
  body.kta-refonte-v1 .leaflet-top.leaflet-right .leaflet-bar {
    flex-direction: row-reverse !important;
  }
  /* 🆕 v1.8.1-refonte-11 EXCEPTION : le zoom natif Leaflet
     (.leaflet-control-zoom contient zoom-in + zoom-out) reste VERTICAL
     même en landscape — convention universelle "+ au-dessus du -" que
     l'utilisateur connaît par cœur (Google Maps, OSM, etc.). Le passer
     en horizontal serait perturbant. Feedback KARMA : "pour le zoom,
     on laisse comme avant, le - en dessous du +". */
  body.kta-refonte-v1 .leaflet-control-zoom {
    flex-direction: column !important;
  }
  /* Boutons en ligne — override le display:block du mode vertical.
     Taille un peu plus compacte (30px) pour gagner de la place verticale
     en landscape (hauteur écran limitée). */
  body.kta-refonte-v1 .leaflet-bar a,
  body.kta-refonte-v1 .leaflet-bar a.kta-sub {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: 30px !important;
    height: 30px !important;
    line-height: 30px !important;
    font-size: 16px;
  }
  /* .kta-hidden masque les subs repliés (override prioritaire sur
     l'inline-flex au-dessus). */
  body.kta-refonte-v1 .leaflet-bar a.kta-sub.kta-hidden {
    display: none !important;
  }
  /* Override les radius first/last-child du mode vertical : ils mettaient
     top-rounded au 1er control de la sidebar et bottom-rounded au dernier.
     En landscape chaque pill est arrondi sur ses 4 coins indépendamment. */
  body.kta-refonte-v1 .leaflet-top > .leaflet-control:first-child .leaflet-bar,
  body.kta-refonte-v1 .leaflet-top > .leaflet-control:first-child,
  body.kta-refonte-v1 .leaflet-top > .leaflet-control:last-child .leaflet-bar,
  body.kta-refonte-v1 .leaflet-top > .leaflet-control:last-child {
    border-radius: 8px !important;
  }
  /* Plus de séparateur "border-top" entre groupes (le mode pill n'en
     a plus besoin — les pills sont visuellement distincts). */
  body.kta-refonte-v1 .leaflet-top > .leaflet-control:not(:first-child) .leaflet-bar {
    border-top: none !important;
  }
  /* Petit gap vertical entre 2 pills successifs dans une sidebar */
  body.kta-refonte-v1 .leaflet-top.leaflet-left .leaflet-control + .leaflet-control,
  body.kta-refonte-v1 .leaflet-top.leaflet-right .leaflet-control + .leaflet-control {
    margin-top: 4px !important;
  }
  /* Séparateur INTERNE entre boutons d'une même .leaflet-bar horizontale :
     ligne verticale fine (au lieu de la border-bottom Leaflet native qui
     ne fait sens qu'en vertical). On utilise le sélecteur `a + a` pour
     cibler tous les boutons SAUF le premier en ordre DOM.
     Comme la sidebar droite est en row-reverse, le `a + a` cible toujours
     les bons éléments (le séparateur visuel est ajouté à gauche du DOM-2,
     ce qui en row-reverse veut dire à droite de DOM-2 = entre DOM-2 et
     DOM-1 visuellement). */
  body.kta-refonte-v1 .leaflet-bar a + a {
    border-left: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-top: none !important;
    border-bottom: none !important;
  }
  /* 🆕 v1.8.1-refonte-11 : zoom natif gardé vertical → séparateur entre
     zoom-in et zoom-out doit être horizontal (border-top), pas vertical
     (border-left). Override l'exception générale ci-dessus. */
  body.kta-refonte-v1 .leaflet-control-zoom a + a {
    border-left: none !important;
    border-top: 1px solid rgba(255, 255, 255, 0.12) !important;
  }
  /* Shadow uniformisée sur chaque pill (override le shadow first/last
     spécial du mode vertical) */
  body.kta-refonte-v1 .leaflet-top > .leaflet-control .leaflet-bar,
  body.kta-refonte-v1 .leaflet-top > .leaflet-control:first-child .leaflet-bar,
  body.kta-refonte-v1 .leaflet-top > .leaflet-control:last-child .leaflet-bar {
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.32);
  }
  /* Bouton ≡ de réduction : reste seul (pas de subs), pill rond standard,
     order:-1 le garde en premier (= en haut de la sidebar) */
  body.kta-refonte-v1 .kta-refonte-collapse-bar {
    align-self: flex-start;
  }
  body.kta-refonte-v1 .leaflet-top.leaflet-right .kta-refonte-collapse-bar {
    align-self: flex-end;
  }
}

/* ─────────────────────────────────────────────────────────────────
   📊 MODALE "Détails de la session"
   ─────────────────────────────────────────────────────────────────
   Ouverte au clic sur les compteurs du header refondu (📍 N · 🛣 N · ⬛ N).
   Liste tous les éléments de la session active.
   ───────────────────────────────────────────────────────────────── */

.kta-refonte-session-boite {
  max-width: 560px !important;
  width: 100%;
  max-height: 80vh;
  display: flex !important;
  flex-direction: column;
}

.kta-refonte-session-corps {
  overflow-y: auto;
  padding: 16px 18px !important;
  color: #c8d0e0;
}

.kta-refonte-session-section {
  margin-bottom: 18px;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: 8px;
  padding: 12px 14px;
}
.kta-refonte-session-section:last-child {
  margin-bottom: 0;
}

/* 🆕 v1.11.2 V2.2 : Bloc Stats agrégées en TÊTE de la modale Détails de session.
   Layout : tableau résumé compact + barres horizontales par type + boutons d'action.
   Cohérent avec la charte (accent jaune doré, fond panneau subtil). */
.kta-refonte-stats-aggr {
  margin-bottom: 18px;
  background: rgba(244, 197, 66, 0.05);
  border: 1px solid rgba(244, 197, 66, 0.22);
  border-radius: 8px;
  padding: 14px 16px;
}
.kta-refonte-stats-aggr-titre {
  font-size: 14px;
  font-weight: 700;
  color: #f4c542;
  margin-bottom: 10px;
  letter-spacing: 0.02em;
}
.kta-refonte-stats-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 5px 0;
  font-size: 13px;
}
.kta-refonte-stats-label {
  color: #c8d0e0;
  font-weight: 600;
  flex-shrink: 0;
}
.kta-refonte-stats-val {
  color: #e8eaf0;
  text-align: right;
  font-size: 12.5px;
}
.kta-refonte-stats-val strong {
  color: #f4c542;
  font-weight: 700;
}

/* Barres horizontales — visuel proportion par type (KARMA 4:b) */
.kta-refonte-stats-bar-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 3px 0 3px 14px;
  font-size: 11.5px;
}
.kta-refonte-stats-bar-label {
  color: #8892a4;
  min-width: 88px;
  flex-shrink: 0;
}
.kta-refonte-stats-bar {
  flex: 1;
  height: 6px;
  background: rgba(255, 255, 255, 0.06);
  border-radius: 3px;
  overflow: hidden;
}
.kta-refonte-stats-bar-fill {
  height: 100%;
  border-radius: 3px;
  transition: width 0.3s ease;
}
.kta-refonte-stats-bar-val {
  color: #c8d0e0;
  min-width: 70px;
  text-align: right;
  font-variant-numeric: tabular-nums;
  font-size: 11.5px;
}

/* Section Multi-niveau (si APP_CONFIG.multiLevel) */
.kta-refonte-stats-mlvl {
  margin-top: 10px;
  padding: 8px 10px;
  background: rgba(140, 180, 255, 0.06);
  border: 1px solid rgba(140, 180, 255, 0.18);
  border-radius: 6px;
}
.kta-refonte-stats-mlvl-titre {
  font-size: 12px;
  color: #8cb4ff;
  font-weight: 700;
  margin-bottom: 6px;
}
.kta-refonte-stats-mlvl-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 12px;
  padding: 2px 0;
}
.kta-refonte-stats-mlvl-lbl {
  color: #c8d0e0;
  font-weight: 600;
  font-family: ui-monospace, "SF Mono", monospace;
}
.kta-refonte-stats-mlvl-val {
  color: #e8eaf0;
  letter-spacing: 0.5px;
}

/* Boutons Copier + Exporter */
.kta-refonte-stats-actions {
  display: flex;
  gap: 8px;
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  justify-content: flex-end;
}
.kta-refonte-stats-actions .kta-btn {
  font-size: 12px;
  padding: 5px 10px;
}

.kta-refonte-session-section-titre {
  font-size: 14px;
  font-weight: 700;
  color: #f4c542;
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.kta-refonte-session-badge {
  display: inline-block;
  background: rgba(244, 197, 66, 0.18);
  color: #f4c542;
  border: 1px solid rgba(244, 197, 66, 0.32);
  border-radius: 10px;
  padding: 1px 8px;
  font-size: 11px;
  font-weight: 700;
  min-width: 18px;
  text-align: center;
}

.kta-refonte-session-list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.kta-refonte-session-list li {
  padding: 7px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: 13px;
}
.kta-refonte-session-list li:last-child {
  border-bottom: none;
}
.kta-refonte-session-list strong {
  color: #e8eaf0;
  font-weight: 600;
  font-size: 13px;
}
.kta-refonte-session-meta {
  color: #8892a4;
  font-size: 12px;
  font-style: italic;
}

.kta-refonte-session-empty {
  color: #8892a4;
  font-style: italic;
  font-size: 12px;
  padding: 8px 0;
}

/* ==============================================
   🐛 v1.16.0-fix — Backups list compact
   ==============================================
   KARMA : « entre chaque snap, il y a bcp espace vide inutile ».
   La classe .kta-refonte-session-list par défaut est verticale
   (column, gap 2px, padding 7px) pour les listes points/tracés où
   chaque item a 2 lignes (strong + meta). Pour les backups on veut
   une ligne unique compacte avec boutons action en bout de ligne.
   Override via une classe combinée .kta-backups-list. */
.kta-refonte-session-list.kta-backups-list li {
  flex-direction: row;
  align-items: center;
  gap: 6px;
  padding: 4px 0;
  flex-wrap: wrap;
}
.kta-backups-list .kta-backup-info {
  flex: 1 1 200px;
  min-width: 0;
  line-height: 1.35;
  font-size: 12.5px;
}
.kta-backups-list .kta-backup-info .kta-refonte-session-meta {
  /* Pas de retour à la ligne forcé : strong + meta sur la même ligne
     si la place le permet, sinon meta passe en dessous naturellement. */
  white-space: normal;
}
.kta-backups-list .kta-btn {
  /* Boutons en bout de ligne, taille compacte. .kta-btn-small a déjà
     padding réduit ; on enlève le margin par défaut. */
  margin: 0;
}

/* Compteurs du header — feedback visuel cliquable */
/* v1.35.3 — Override padding du wrapper button qui hérite de .kta-refonte-header-btn
   (padding 6px 10px). En mobile portrait il ne contient qu'1 seul chip 📊 → ses
   10px de padding-right s'ajoutent au gap 8px du parent → espace visuel 18px
   entre 📊 et 📖 (vs 8px entre 📖 et 🚨). KARMA feedback : "📊 plus loin de 📖
   que 📖 de 🚨". Fix : padding réduit côté droit ; le hover background reste
   visible via le padding-left + min-width hérités. */
body.kta-refonte-v1 #kta-refonte-counters-btn {
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
  padding: 3px 4px;
  min-width: auto;
  height: auto;
  align-self: center;
}
body.kta-refonte-v1 #kta-refonte-counters-btn:hover,
body.kta-refonte-v1 #kta-refonte-counters-btn:focus-visible {
  background: rgba(140, 180, 255, 0.12);
  outline: none;
}
body.kta-refonte-v1 #kta-refonte-counters-btn:hover .kta-refonte-counter {
  background: rgba(140, 180, 255, 0.18);
  border-color: rgba(140, 180, 255, 0.50);
}

/* ─────────────────────────────────────────────────────────────────
   STATUS BAR (sticky bottom, 36px ouvert / 14px replié)
   ───────────────────────────────────────────────────────────────── */

/* 🆕 v1.8.1-refonte-10 : variable CSS partagée `--kta-statusbar-h` =
   hauteur EFFECTIVE actuelle du status bar.
   - Fallback CSS = 52px (portrait standard, footer 1 ligne).
   - JS (refonteInterface.js > ResizeObserver) la réécrit dynamiquement
     dès que la barre s'agrandit (wrap multi-ligne) ou se collapse.
   Tout ce qui dépend du bas de l'écran (#map bottom, boussole bottom,
   modales padding-bottom) consomme cette variable → réajustement
   automatique sans JS supplémentaire.
   Sans cover (état actuel après rollback final), safe-area-inset-bottom
   = 0 sur iPhone donc le `+ env(...)` est un no-op. Conservé pour
   robustesse si un jour cover est réintroduit. */
body.kta-refonte-v1 {
  --kta-statusbar-h: calc(52px + env(safe-area-inset-bottom, 0px));
}

body.kta-refonte-v1 .kta-refonte-statusbar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 1200;
  background: linear-gradient(0deg, #1a1f2e 0%, #161b28 100%);
  border-top: 1px solid rgba(140, 180, 255, 0.18);
  box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.35);
  display: flex;
  align-items: center;
  /* 🆕 v1.9.2-fix3 (KARMA "uniquement sur mobile, padding renforcé pour
     éviter le clip des coins arrondis bottom-left/right de l'écran")
     → règle mobile-only plus bas. Sur PC on garde 12px (pas de coins
     arrondis à éviter). */
  padding: 0 12px;
  padding-left: calc(12px + env(safe-area-inset-left, 0px));
  padding-right: calc(12px + env(safe-area-inset-right, 0px));
  /* 🆕 v1.8.1-refonte-10 : `min-height` au lieu de `height` pour permettre
     l'agrandissement dynamique quand les stats wrap sur plusieurs lignes
     (cas typique mobile petit écran + 4 stats actives = mesure + distance
     totale + itinéraire + tracker). Le contenu décide la hauteur, le
     min-height garantit qu'on reste >= 52px même quand 1 ligne suffit.
     Feedback KARMA : "si toute les informations sont afficher en footer
     on sort du cadre [...] agrandir le footer dynamiquement et passer
     a la ligne toute la partie qui sort". */
  /* Sans cover (rollback final), safe-area-inset-bottom = 0 sur iPhone
     donc no-op. Conservé pour robustesse si cover réintroduit. */
  min-height: calc(52px + env(safe-area-inset-bottom, 0px));
  height: auto;
  padding-top: 4px;
  padding-bottom: calc(4px + env(safe-area-inset-bottom, 0px));
  box-sizing: border-box;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
  font-size: 13px;
  color: #c8d0e0;
  transition: min-height 0.2s ease-out, padding 0.2s ease-out;
  /* overflow hidden retiré : le contenu doit pouvoir s'étendre verticalement
     (wrap multi-ligne). Le z-index 1200 + position fixed garantit qu'il
     ne déborde pas sur le map de manière problématique. */
  -webkit-user-select: none;
  user-select: none;
}

/* 🆕 v1.9.2-fix3 (KARMA "rajoute le petit fix pour les marges en footer
   pour éviter le souci de bord arrondi, uniquement sur mobile, sinon
   on perd un bout d'icône à droite et à gauche") :
   sur écrans tactiles avec coins arrondis (iPhone, Android phones), le
   premier stat 📐 à gauche et le bouton ▾▴ à droite étaient grignotés
   par les coins de l'écran. On bump le padding latéral à 28px (même
   valeur que le splash en fix17) pour décaler les icônes vers
   l'intérieur. PC inchangé (12px car pas de coins arrondis à éviter). */
@media (max-width: 480px), (max-height: 500px) and (orientation: landscape) {
  body.kta-refonte-v1 .kta-refonte-statusbar {
    padding-left: calc(28px + env(safe-area-inset-left, 0px));
    padding-right: calc(28px + env(safe-area-inset-right, 0px));
  }
}

body.kta-refonte-v1 .kta-refonte-statusbar-collapsed {
  /* État replié : la barre garde une hauteur fixe minimaliste.
     safe-area-inset-bottom conservé pour robustesse (no-op sans cover). */
  min-height: calc(20px + env(safe-area-inset-bottom, 0px));
  height: calc(20px + env(safe-area-inset-bottom, 0px));
  padding-top: 0;
  padding-bottom: env(safe-area-inset-bottom, 0px);
}
body.kta-refonte-v1 .kta-refonte-statusbar-collapsed .kta-refonte-statusbar-content {
  opacity: 0;
  pointer-events: none;
}

body.kta-refonte-v1 .kta-refonte-statusbar-content {
  flex: 1 1 auto;
  display: flex;
  /* 🆕 v1.8.1-refonte-10 : flex-wrap pour multi-ligne au lieu de scroll
     horizontal masqué (qui cachait l'info hors viewport). */
  flex-wrap: wrap;
  align-items: center;
  /* column-gap horizontal large (lecture confort), row-gap petit (compact) */
  column-gap: 16px;
  row-gap: 2px;
  /* overflow-x: auto retiré → plus de scroll horizontal, on wrap.
     scrollbar-width: none gardé au cas où un autre overflow apparaisse. */
  scrollbar-width: none;
  transition: opacity 0.2s ease-out;
}
body.kta-refonte-v1 .kta-refonte-statusbar-content::-webkit-scrollbar { display: none; }

body.kta-refonte-v1 .kta-refonte-stat {
  display: flex;
  align-items: center;
  gap: 5px;
  white-space: nowrap;
  flex-shrink: 0;
}
body.kta-refonte-v1 .kta-refonte-stat-icon {
  font-size: 13px;
}
/* 🆕 v1.9.2 : couleur des valeurs en footer passées à l'ambre charte
   `#f4c542` (orange chaud du projet — même teinte que les titres dorés
   et le logo rose des vents). Avant : blanc cassé `#e8eaf0` qui se
   confondait avec le texte standard. Feedback KARMA : "peux tu ecrire
   en orange, chartre graphique, les informations dans le footer".
   Le doré accentue les chiffres importants (distance, mesure) sur le
   fond sombre du status bar. */
body.kta-refonte-v1 .kta-refonte-stat-val {
  color: #f4c542;
  font-weight: 700;
  font-size: 12px;
  text-shadow: 0 0 4px rgba(244, 197, 66, 0.18);
}
body.kta-refonte-v1 .kta-refonte-stat-empty {
  opacity: 0.4;
}
body.kta-refonte-v1 .kta-refonte-stat-empty .kta-refonte-stat-val {
  /* Stat vide ("—") : on retombe sur du gris discret, pas de doré (le
     doré doit signaler une INFO réelle, pas "rien à afficher"). */
  color: #8892a4;
  font-weight: 500;
  text-shadow: none;
}

/* 🆕 v1.8.1-refonte-14 : stats CLIQUABLES (uniquement la stat itinéraire
   pour l'instant) — feedback visuel pointer + léger hover. On désactive
   l'effet quand la stat est vide (rien à ouvrir) pour ne pas tromper. */
body.kta-refonte-v1 .kta-refonte-stat-clickable {
  cursor: pointer;
  border-radius: 6px;
  padding: 2px 6px;
  margin: -2px -2px;
  transition: background 0.15s;
}
body.kta-refonte-v1 .kta-refonte-stat-clickable:hover,
body.kta-refonte-v1 .kta-refonte-stat-clickable:focus-visible {
  background: rgba(244, 197, 66, 0.10);
  outline: none;
}
/* Quand la stat est vide (pas d'itinéraire actif), pas de cursor pointer
   et pas de hover — le clic est intercepté côté JS de toute façon. */
body.kta-refonte-v1 .kta-refonte-stat-clickable.kta-refonte-stat-empty {
  cursor: default;
}
body.kta-refonte-v1 .kta-refonte-stat-clickable.kta-refonte-stat-empty:hover {
  background: transparent;
}

/* 🆕 v1.8.1-refonte-14 : indicateur tracker GPS — ON vert / OFF rouge.
   Style "LED hardware" : pill arrondi compact avec fond coloré + texte
   gras. Visibilité immédiate du statut GPS pour l'user (KARMA : "on
   met une boussole avec un ON vert et un OFF rouge"). */
body.kta-refonte-v1 .kta-refonte-stat-tracker-on,
body.kta-refonte-v1 .kta-refonte-stat-tracker-off {
  border-radius: 10px;
  padding: 2px 8px;
  border: 1px solid;
  opacity: 1 !important;  /* override .kta-refonte-stat-empty éventuel */
}
body.kta-refonte-v1 .kta-refonte-stat-tracker-on {
  background: rgba(76, 200, 100, 0.18);
  border-color: rgba(76, 200, 100, 0.55);
  /* Lueur verte subtile pour effet "LED allumée" */
  box-shadow: 0 0 6px rgba(76, 200, 100, 0.35);
}
body.kta-refonte-v1 .kta-refonte-stat-tracker-on .kta-refonte-stat-val {
  color: #6ee287;
  font-weight: 700;
  /* Override le text-shadow doré global des stats — le tracker a sa
     propre lueur via box-shadow vert sur le pill parent. */
  text-shadow: 0 0 4px rgba(76, 200, 100, 0.55);
}
body.kta-refonte-v1 .kta-refonte-stat-tracker-on .kta-refonte-stat-icon {
  /* Boussole verte quand GPS actif. drop-shadow plutôt que filter:hue-rotate
     pour ne pas dénaturer le rendu emoji selon les plateformes. */
  filter: drop-shadow(0 0 3px rgba(76, 200, 100, 0.70));
}
body.kta-refonte-v1 .kta-refonte-stat-tracker-off {
  background: rgba(220, 80, 80, 0.14);
  border-color: rgba(220, 80, 80, 0.45);
}
body.kta-refonte-v1 .kta-refonte-stat-tracker-off .kta-refonte-stat-val {
  color: #e88787;
  font-weight: 700;
  /* Override le text-shadow doré global — pas de glow rouge volontaire
     (la pill rouge se voit déjà clairement, pas besoin d'amplifier). */
  text-shadow: none;
}
body.kta-refonte-v1 .kta-refonte-stat-tracker-off .kta-refonte-stat-icon {
  /* Boussole rougeâtre quand GPS inactif */
  filter: drop-shadow(0 0 3px rgba(220, 80, 80, 0.55));
  opacity: 0.75;
}

body.kta-refonte-v1 .kta-refonte-statusbar-toggle {
  background: transparent;
  border: 1px solid rgba(140, 180, 255, 0.25);
  color: #8cb4ff;
  cursor: pointer;
  /* 🆕 v1.8.1-refonte-14 : bouton ▾▴ plus gros (KARMA feedback).
     28x24 / 14px → 40x36 / 22px → plus visible et plus facile à taper
     au pouce sur mobile. Reste flex-shrink:0 pour ne pas wrap avec
     les stats. */
  font-size: 22px;
  font-weight: 600;
  width: 40px;
  height: 36px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-left: 10px;
  padding: 0;
  line-height: 1;
  /* 🆕 v1.9.2 : transition height/font-size pour suivre l'état
     collapsed sans saccade visuelle. */
  transition: background 0.15s, border-color 0.15s, color 0.15s,
              width 0.2s ease-out, height 0.2s ease-out, font-size 0.2s ease-out;
}
body.kta-refonte-v1 .kta-refonte-statusbar-toggle:hover,
body.kta-refonte-v1 .kta-refonte-statusbar-toggle:focus-visible {
  background: rgba(140, 180, 255, 0.14);
  border-color: rgba(140, 180, 255, 0.55);
  color: #b3ccff;
  outline: none;
}
/* 🆕 v1.9.2 : quand le footer est replié (height ~20px + safe-bottom),
   le bouton 40x36 dépassait par-dessus le haut du footer → effet bizarre
   visuellement (KARMA feedback : "vue que on a augmenter la taille de
   l'icone de reduction du footer, il sort du footer réduit ca fait un
   effet bizare"). Solution : version compacte 32x16 / font 13 quand
   la barre est en état collapsed. */
body.kta-refonte-v1 .kta-refonte-statusbar-collapsed .kta-refonte-statusbar-toggle {
  width: 32px;
  height: 16px;
  font-size: 13px;
  border-radius: 4px;
  margin-left: 6px;
}

/* MASQUAGE des labels Leaflet bottom en mode refonte — ils sont
   remplacés par les stats du status bar en bas.
   🆕 v1.8.1-refonte-9 fix KARMA : classe `.kta-measure-distance`
   (anglais "measure", pas "mesure" FR comme j'avais écrit avant).
   Le label "Distance : 0 m" restait visible en mode refonte car
   ma règle .kta-mesure-distance ne matchait jamais.

   La classe .kta-measure-label-control est un legacy alias potentiel
   (gardé par sécurité), et #measureLabel est l'id du même élément
   (double protection). */
body.kta-refonte-v1 .kta-iti-distance,
body.kta-refonte-v1 .kta-measure-distance,
body.kta-refonte-v1 .kta-mesure-distance,        /* legacy fallback */
body.kta-refonte-v1 .kta-measure-label-control,
body.kta-refonte-v1 #measureLabel {
  display: none !important;
}
/* Les anciens overrides `.leaflet-bottom { bottom: 52px }` et
   collapsed → 20px ont été RETIRÉS (fix double-comptage v1.8.1-refonte-9).
   La position bottom des controls .leaflet-bottom est désormais 0
   relatif au .leaflet-container, qui est lui-même dans #map qui
   s'arrête à `bottom: calc(52 + safe-bottom)` du viewport.
   → controls bottom-left automatiquement au-dessus du statusbar. */

/* ─────────────────────────────────────────────────────────────────
   #map décalé pour laisser place au header + status bar
   ─────────────────────────────────────────────────────────────────
   #map est fixed:0 → on lui applique top et bottom pour respecter les
   2 bars sticky. Leaflet recalcule ses dimensions à chaque resize, ce
   qui est déclenché naturellement par l'application de cette classe.
   ───────────────────────────────────────────────────────────────── */

body.kta-refonte-v1 #map {
  top: calc(44px + env(safe-area-inset-top, 0px));
  /* 🆕 v1.8.1-refonte-10 : variable `--kta-statusbar-h` mise à jour
     dynamiquement par JS (ResizeObserver sur la barre). Quand la barre
     wrap multi-ligne et grandit, #map remonte automatiquement pour
     ne pas être recouvert. Fallback calc(52 + safe) si JS pas chargé.
     La variable inclut DÉJÀ safe-area-inset-bottom (le JS lit offsetHeight). */
  bottom: var(--kta-statusbar-h, 52px);
  height: auto;
  /* Transition douce pour suivre le changement de hauteur du statusbar
     (wrap/unwrap, collapse/expand) sans saccade visuelle */
  transition: bottom 0.2s ease-out;
}
/* État collapsed : la variable JS prend déjà la nouvelle valeur (20+safe).
   Mais on garde un fallback CSS pour le cas où JS n'a pas encore tourné. */
body.kta-refonte-v1:has(.kta-refonte-statusbar-collapsed) #map {
  bottom: var(--kta-statusbar-h, 20px);
}

/* ─────────────────────────────────────────────────────────────────
   Mobile landscape : compacter le header (gain de hauteur)
   ───────────────────────────────────────────────────────────────── */
@media (max-height: 500px) and (orientation: landscape) {
  body.kta-refonte-v1 .kta-refonte-header {
    height: calc(36px + env(safe-area-inset-top, 0px));
    /* 🆕 v1.8.1-refonte-12 : passage en CSS Grid `1fr auto 1fr` UNIQUEMENT
       en landscape pour centrage géométrique ABSOLU du titre. En portrait
       on reste sur du flex classique (cf. règle principale plus haut).
       Pourquoi le grid en landscape : sur petits écrans en paysage, le
       titre flex pouvait apparaître décalé vers la droite (asymétrie
       largeur home button vs counters). Le grid place le titre au
       centre exact peu importe les côtés. */
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
  }
  /* En grid, on aligne explicitement le home (col 1, gauche) et les
     counters (col 3, droite) — la cellule auto centrale prend la place
     du titre. */
  body.kta-refonte-v1 .kta-refonte-header-home {
    justify-self: start;
  }
  body.kta-refonte-v1 .kta-refonte-header-counters {
    justify-self: end;
  }
  body.kta-refonte-v1 #map {
    top: calc(36px + env(safe-area-inset-top, 0px));
  }
  /* Statusbar landscape : min-height 40+safe (no-op sans cover). */
  body.kta-refonte-v1 {
    --kta-statusbar-h: calc(40px + env(safe-area-inset-bottom, 0px));
  }
  body.kta-refonte-v1 .kta-refonte-statusbar {
    min-height: calc(40px + env(safe-area-inset-bottom, 0px));
  }
  body.kta-refonte-v1 .kta-refonte-statusbar-collapsed {
    min-height: calc(16px + env(safe-area-inset-bottom, 0px));
    height: calc(16px + env(safe-area-inset-bottom, 0px));
  }
  /* #map bottom : la variable --kta-statusbar-h gère déjà tout (JS la
     met à jour quand le statusbar bouge). Pas de override hardcodé. */
  /* 🆕 v1.8.1-refonte-9 : .leaflet-top et .leaflet-bottom RESTENT à
     0 (natif Leaflet) car le #map est déjà décalé. Les anciens overrides
     `.leaflet-top { top: 36+safe-top }` et `.leaflet-bottom { bottom:
     40+safe-bottom }` causaient un double-comptage = gros gap visible
     sur iPhone (KARMA capture). Retirés. */
  /* Et la rose des vents du header — taille réduite */
  body.kta-refonte-v1 .kta-refonte-header-home-img {
    height: 22px;
  }
  /* Recalcule la max-height des sidebars pour landscape — suit la
     variable dynamique --kta-statusbar-h (wrap multi-ligne pris en compte).
     🆕 v1.9.2-fullscreen : double déclaration vh/dvh. */
  body.kta-refonte-v1 .leaflet-top.leaflet-left,
  body.kta-refonte-v1 .leaflet-top.leaflet-right {
    max-height: calc(100vh - 36px - var(--kta-statusbar-h, 40px) - env(safe-area-inset-top, 0px) - 4px);
    max-height: calc(100dvh - 36px - var(--kta-statusbar-h, 40px) - env(safe-area-inset-top, 0px) - 4px);
  }
  /* 🆕 v1.8.1-refonte-17 : boussole en BAS-CENTRÉE en landscape (pas
     bas-gauche comme en portrait). Sur petit écran horizontal, les
     icônes des sidebars descendent bas → la boussole en bas-gauche
     les cachait. En la centrant horizontalement on garde la même
     hauteur (au-dessus du statusbar) sans masquer les icônes
     latérales. Feedback KARMA : "en horizontal, uniquement, la
     boussole doit etre en bas mais centrer. (pour pas cacher les
     icones)". */
  body.kta-refonte-v1 .kta-compass-widget,
  body.kta-refonte-v1.kta-multilevel-active .kta-compass-widget {
    bottom: calc(var(--kta-statusbar-h, 40px) + 8px) !important;
    /* Centrage horizontal : left:50% + translateX(-50%). On annule la
       règle portrait `left: calc(10px + safe-left)` via la valeur 50%
       qui prime (plus spécifique dans la cascade media query). */
    left: 50% !important;
    transform: translateX(-50%);
  }
}

/* =====================================================================
   📸 SECTION PHOTOS POI — v1.9.3-B1b
   Grille 3 colonnes avec miniatures 80×80, bouton ✕ overlay au hover,
   spinner placeholder pendant compression, 2 boutons d'ajout (camera +
   galerie). Le tout dans la section "📸 Photos" de la modale d'ajout/
   édition d'un point (editor.js > afficherFormulaire).
   ===================================================================== */

/* Compteur "N / 5" à droite du titre de section */
.kta-poi-photos-counter {
  display: inline-block;
  margin-left: 8px;
  padding: 2px 8px;
  background: rgba(244, 197, 66, 0.12);
  border: 1px solid rgba(244, 197, 66, 0.32);
  border-radius: 10px;
  color: #f4c542;
  font-family: "SF Mono", Monaco, Consolas, monospace;
  font-size: 11px;
  font-weight: 600;
  vertical-align: middle;
}

/* Grille 3 colonnes, gap 8px. Wrap au besoin. */
.kta-poi-photos-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin: 10px 0;
  min-height: 30px;
}

/* État vide : message centré italique */
.kta-poi-photos-empty {
  grid-column: 1 / -1;
  padding: 16px 8px;
  text-align: center;
  color: #8892a4;
  font-size: 12px;
  font-style: italic;
  background: rgba(255, 255, 255, 0.02);
  border: 1px dashed rgba(255, 255, 255, 0.08);
  border-radius: 6px;
}

/* Miniature : carré aspect 1/1, fond noir pour les images transparentes,
   bordure subtile, overflow hidden pour clipper l'image. */
.kta-poi-photo-thumb {
  position: relative;
  aspect-ratio: 1 / 1;
  background: #0a0d18;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 6px;
  overflow: hidden;
  cursor: default;
}

.kta-poi-photo-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Spinner placeholder (pendant compression+IDB write).
   Texte ⏳ qui pulse doucement. */
.kta-poi-photo-spinner {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  color: #8892a4;
  animation: kta-poi-photo-spinner-pulse 1.4s ease-in-out infinite;
}

@keyframes kta-poi-photo-spinner-pulse {
  0%, 100% { opacity: 0.4; transform: scale(0.92); }
  50%      { opacity: 1;   transform: scale(1);    }
}

/* État "pending delete" : grisé + croix barrée diagonale */
.kta-poi-photo-thumb-pending {
  opacity: 0.35;
  filter: grayscale(0.7);
}

.kta-poi-photo-thumb-pending::after {
  content: "";
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    45deg,
    rgba(255, 107, 107, 0.0) 0 8px,
    rgba(255, 107, 107, 0.18) 8px 12px
  );
  pointer-events: none;
}

/* Bouton ✕ supprimer (overlay coin haut-droit).
   Toujours visible (vs hover-only) car bouton tactile sur mobile. */
.kta-poi-photo-del {
  position: absolute;
  top: 4px;
  right: 4px;
  width: 22px;
  height: 22px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.7);
  color: #ff8c8c;
  font-size: 13px;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.12s, color 0.12s;
  z-index: 2;
}

.kta-poi-photo-del:hover {
  background: rgba(255, 107, 107, 0.85);
  color: #fff;
}

/* Etat pending : croix devient une flèche ↺ de restauration en vert */
.kta-poi-photo-thumb-pending .kta-poi-photo-del {
  color: #6ce28a;
  background: rgba(0, 0, 0, 0.75);
}

.kta-poi-photo-thumb-pending .kta-poi-photo-del:hover {
  background: rgba(108, 226, 138, 0.85);
  color: #1a1f2e;
}

/* Actions photos (2 boutons côte à côte) */
.kta-poi-photos-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin: 8px 0 6px 0;
}

.kta-poi-photos-btn {
  font-size: 13px;
  padding: 9px 6px !important;
}

.kta-poi-photos-btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

/* Hint italique sous les boutons */
.kta-poi-photos-hint {
  margin: 6px 0 0;
  font-size: 11.5px;
  color: #8892a4;
  font-style: italic;
  line-height: 1.4;
}

/* Mobile : grille 2 colonnes (plus large pour les vignettes) */
@media (max-width: 480px) {
  .kta-poi-photos-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* =====================================================================
   🔍 PHOTO VIEWER — v1.9.3-B1c
   Modale plein écran pour visualiser une photo en grand, avec pinch-zoom,
   pan, swipe horizontal, flèches nav.
   z-index 100000 (= au-dessus de la modale POI à 99999, et de tout le
   reste hors notifications système).
   ===================================================================== */

.kta-photo-viewer-overlay {
  position: fixed;
  inset: 0;
  background: #000;
  z-index: 100000;
  display: flex;
  flex-direction: column;
  user-select: none;
  -webkit-user-select: none;
  /* Animation d'apparition */
  animation: kta-photo-viewer-fadein 0.18s ease-out;
}

@keyframes kta-photo-viewer-fadein {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.kta-photo-viewer-header {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 44px;
  padding: 0 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: linear-gradient(to bottom, rgba(0,0,0,0.7) 0%, rgba(0,0,0,0) 100%);
  color: #fff;
  font-size: 14px;
  z-index: 2;
  /* Safe-area iOS notch */
  padding-top: env(safe-area-inset-top, 0);
  height: calc(44px + env(safe-area-inset-top, 0px));
}

.kta-photo-viewer-counter {
  font-family: "SF Mono", Monaco, Consolas, monospace;
  font-size: 13px;
  color: #f4c542;
  background: rgba(244, 197, 66, 0.12);
  border: 1px solid rgba(244, 197, 66, 0.35);
  padding: 3px 10px;
  border-radius: 12px;
  font-weight: 600;
}

.kta-photo-viewer-close {
  width: 36px;
  height: 36px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
  font-size: 18px;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.12s;
}

.kta-photo-viewer-close:hover {
  background: rgba(255, 107, 107, 0.85);
}

.kta-photo-viewer-viewport {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  touch-action: none;  /* on gère le touch nous-mêmes (pinch+swipe+pan) */
}

.kta-photo-viewer-img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  cursor: default;
  transform-origin: center center;
  transition: transform 0.15s ease-out;
  /* La transition est désactivée pendant le pan/pinch pour réactivité.
     On garde un léger ease pour les snaps après touchend / wheel. */
  will-change: transform;
  -webkit-user-drag: none;
}

/* Boutons de navigation latéraux ◂ ▸ */
.kta-photo-viewer-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 48px;
  height: 64px;
  padding: 0;
  border: none;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
  font-size: 28px;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.12s, transform 0.12s;
  z-index: 2;
}

.kta-photo-viewer-nav:hover {
  background: rgba(244, 197, 66, 0.4);
  transform: translateY(-50%) scale(1.08);
}

.kta-photo-viewer-nav-prev {
  left: 12px;
}

.kta-photo-viewer-nav-next {
  right: 12px;
}

/* Hint en bas de l'écran (PC + tablette, caché sur petit mobile pour
   économiser la hauteur) */
.kta-photo-viewer-hint {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 10px 16px;
  padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px));
  background: linear-gradient(to top, rgba(0,0,0,0.6) 0%, rgba(0,0,0,0) 100%);
  color: #c8d0e0;
  font-size: 12px;
  text-align: center;
  font-style: italic;
  pointer-events: none;
  z-index: 2;
}

/* Sur mobile en portrait : flèches plus compactes pour ne pas masquer
   trop la photo */
@media (max-width: 480px) {
  .kta-photo-viewer-nav {
    width: 36px;
    height: 56px;
    font-size: 22px;
  }
  .kta-photo-viewer-nav-prev { left: 6px; }
  .kta-photo-viewer-nav-next { right: 6px; }
  .kta-photo-viewer-hint {
    font-size: 11px;
    padding: 8px 10px;
    padding-bottom: calc(8px + env(safe-area-inset-bottom, 0px));
  }
}

/* Landscape mobile très bas : on cache le hint pour gagner de la place */
@media (max-height: 400px) and (orientation: landscape) {
  .kta-photo-viewer-hint { display: none; }
}

/* Curseur grab quand zoomé (set dynamiquement par le JS aussi mais
   fallback CSS au cas où). Le JS prend la main pour distinguer grab/grabbing. */
.kta-photo-viewer-img[style*="scale(1)"] {
  cursor: default;
}

/* ============================================================================
 * 🎨 v1.13.0 — THÈME CLAIR (LIMITÉ AU MODE CARTE)
 * ============================================================================
 * Activé par body.kta-theme-light (= window.ThemeManager.setTheme("light")).
 * KARMA choix : background beige cataphile #f0e8d8 (D:b) + accent jaune
 * #f4c542 conservé (E:a) + persistance globale localStorage (B:a).
 *
 * Scope : tout ce qui s'affiche EN MODE CARTE (sidebar, footer, modales
 * ouvertes depuis le mode carte, label bas-gauche, marker tracker compass).
 *
 * Splash / loader / modale Configuration home ne sont PAS retoughés
 * volontairement (restent dark, ce sont les écrans hors-mode-carte).
 * ============================================================================ */

/* === Palette thème clair === */
body.kta-theme-light {
  /* 🔄 v1.13.0-fix7 (KARMA "RB la dernière modif de fond, je parlais du
     fond du home") : rollback du body uniforme — body re-passe en beige
     clair #f0e8d8 (mode carte). Le fond brun-beige est désormais réservé
     au HOME (= #planLoaderOverlay + #planLoaderBox + sections home). */
  --kta-light-bg:           #f0e8d8;  /* body mode carte + container Leaflet */
  --kta-light-bg-elevated:  #fdf8eb;  /* fond modale, presque blanc */
  --kta-light-bg-deep:      #e5dcc5;  /* sidebar interne + table headers */
  /* Bar variables (header + footer mode carte) — distinctes du body */
  --kta-light-bg-bar:       #c9b88f;  /* header + footer status bar */
  --kta-light-bg-bar-deep:  #b8a576;  /* hover / actif sur bar items */
  --kta-light-bg-bar-border:#9a8754;  /* bordure forte de séparation bar / body */
  --kta-light-text:         #2a2620;  /* texte principal sombre */
  --kta-light-text-muted:   #6b6354;  /* texte secondaire */
  --kta-light-text-dim:     #8a8270;  /* texte tertiaire / dashes */
  --kta-light-border:       rgba(0,0,0,0.12);
  --kta-light-border-strong:rgba(0,0,0,0.22);
  --kta-light-accent:       #f4c542;  /* jaune charte conservé */
  --kta-light-accent-hover: #d9a82e;  /* version plus contrastée pour hover */
  --kta-light-accent-bg:    rgba(244,197,66,0.22);
  --kta-light-shadow:       rgba(80,60,30,0.18);
}

/* === Container Leaflet (carte) === */
body.kta-theme-light .leaflet-container {
  background: var(--kta-light-bg) !important;
}

/* === Body / arrière-plan général === */
body.kta-theme-light {
  background: var(--kta-light-bg);
  color: var(--kta-light-text);
}

/* === HEADER refonte ===
   🔧 v1.13.0-fix4 (KARMA "plus de contraste en mode clair, sur le top
   comme en footer") : background brun-beige #c9b88f (vs ancien #e5dcc5
   trop proche du body #f0e8d8) + bordure forte 2px en bas + ombre
   subtile pour profondeur. */
body.kta-theme-light .kta-refonte-header {
  background: var(--kta-light-bg-bar) !important;
  color: var(--kta-light-text) !important;
  border-bottom: 2px solid var(--kta-light-bg-bar-border) !important;
  box-shadow: 0 2px 4px rgba(80, 60, 30, 0.18) !important;
}
body.kta-theme-light .kta-refonte-header * {
  color: var(--kta-light-text) !important;
}
body.kta-theme-light .kta-refonte-plan-name {
  color: var(--kta-light-text) !important;
  font-weight: 700 !important;
}
body.kta-theme-light .kta-refonte-counter {
  background: rgba(255, 255, 255, 0.45) !important;  /* compteurs en blanc
                                                         semi-trans sur fond brun pour ressortir */
  border: 1px solid var(--kta-light-bg-bar-border) !important;
  color: var(--kta-light-text) !important;
}
body.kta-theme-light .kta-refonte-counter:hover {
  background: #ffffff !important;
  border-color: var(--kta-light-accent) !important;
}
body.kta-theme-light .kta-refonte-counters-btn:hover {
  background: rgba(255, 255, 255, 0.6) !important;
}

/* === STATUS BAR footer ===
   🔧 v1.13.0-fix4 : même traitement que le header — brun-beige contrasté
   + bordure forte en haut + ombre vers le haut pour la profondeur. */
body.kta-theme-light .kta-refonte-statusbar {
  background: var(--kta-light-bg-bar) !important;
  color: var(--kta-light-text) !important;
  border-top: 2px solid var(--kta-light-bg-bar-border) !important;
  box-shadow: 0 -2px 4px rgba(80, 60, 30, 0.18) !important;
}
body.kta-theme-light .kta-refonte-statusbar * {
  color: var(--kta-light-text) !important;
}
body.kta-theme-light .kta-refonte-stat {
  background: rgba(255, 255, 255, 0.45) !important;  /* idem header : blanc semi-trans
                                                         pour ressortir sur fond brun */
  border: 1px solid var(--kta-light-bg-bar-border) !important;
}
body.kta-theme-light .kta-refonte-stat-empty {
  opacity: 0.55 !important;
}
body.kta-theme-light .kta-refonte-statusbar-toggle {
  color: var(--kta-light-text) !important;
  background: rgba(255, 255, 255, 0.35) !important;
  border: 1px solid var(--kta-light-bg-bar-border) !important;
}
body.kta-theme-light .kta-refonte-statusbar-toggle:hover {
  background: rgba(255, 255, 255, 0.6) !important;
}

/* === SIDEBARS Leaflet — boutons principaux + sous-actions ===
   🔧 v1.13.0-fix (KARMA "le mode clair ne comprend pas les icônes dans les
   menus déroulants gauche et droite") : les vraies classes utilisées par
   _creerGroupeAccordeon sont `.leaflet-bar a` (bouton principal) et
   `.leaflet-bar a.kta-sub` (sous-action). !important pour battre les
   règles dark.
   🔧 v1.13.0-fix8 (KARMA "utilise la couleur de fond du footer et top,
   pour le fond des icônes") : background des icônes passe en brun-beige
   #c9b88f (= var(--kta-light-bg-bar)) pour s'harmoniser avec header +
   footer. Hover en #b8a576 (= var(--kta-light-bg-bar-deep), plus foncé). */
body.kta-theme-light .leaflet-bar a,
html.kta-theme-light .leaflet-bar a {
  background: var(--kta-light-bg-bar) !important;
  color: var(--kta-light-text) !important;
  border-bottom: 1px solid var(--kta-light-bg-bar-border) !important;
}
body.kta-theme-light .leaflet-bar a:hover,
html.kta-theme-light .leaflet-bar a:hover {
  background: var(--kta-light-bg-bar-deep) !important;
  color: #1a1612 !important;
}
body.kta-theme-light .leaflet-bar a.kta-sub {
  background: var(--kta-light-bg-bar) !important;
  border-bottom: 1px solid var(--kta-light-bg-bar-border) !important;
  color: var(--kta-light-text) !important;
}
body.kta-theme-light .leaflet-bar a.kta-sub:hover {
  background: var(--kta-light-bg-bar-deep) !important;
  color: #1a1612 !important;
}
/* État actif (mode mesure / édition / etc. en cours) — vert kept pour rester
   reconnaissable (cohérent avec dark) mais légèrement adapté en clair */
body.kta-theme-light .leaflet-bar a.kta-actif,
body.kta-theme-light .leaflet-bar a.kta-actif:hover {
  background: #2e8b57 !important;
  color: #fff !important;
  box-shadow: inset 0 0 0 2px #4caf76 !important;
}
/* Bouton principal en mode actif — fond BLANC solide pour se détacher du
   fond brun-beige des autres icônes. Le contraste blanc-sur-brun est
   maximal et lit immédiatement "ce bouton est en mode actif".
   🔧 v1.13.0-fix (KARMA "quand un icône est actif, il doit rester en
   fond blanc, pas transparent") + v1.13.0-fix8 (cohérent avec le fond
   brun des autres icônes — le blanc tranche encore mieux). */
body.kta-theme-light .leaflet-bar a.kta-group-mode-actif {
  background: #ffffff !important;
  color: #2a2620 !important;
  box-shadow: inset 0 0 0 2px var(--kta-light-accent) !important;
}
body.kta-theme-light .leaflet-bar a.kta-group-mode-actif:hover {
  background: #fff8e1 !important;
  color: #1a1612 !important;
}
/* Pulsation de l'état actif (animation .kta-group-mode-actif::after) — on
   adapte la couleur du pseudo-element à l'accent jaune charte pour rester
   visible sur le fond blanc. */
body.kta-theme-light .leaflet-bar a.kta-group-mode-actif::after {
  background: var(--kta-light-accent) !important;
  opacity: 0.6 !important;
}
/* Sous-action urgence (rouge distinctif — kept en clair pour rester
   identifiable). v1.21.2 : applique au flyout button en plus de la cascade
   legacy (cf KARMA "pareil en mode clair"). */
body.kta-theme-light a.kta-sub.kta-sous-action-urgence,
body.kta-theme-light button.kta-group-flyout-btn.kta-sous-action-urgence {
  background: #c0392b !important;
  border-color: #a33024 !important;
  color: #fff !important;
}
body.kta-theme-light a.kta-sub.kta-sous-action-urgence:hover,
body.kta-theme-light button.kta-group-flyout-btn.kta-sous-action-urgence:hover {
  background: #a33024 !important;
  border-color: #8b261c !important;
}
/* Force la couleur blanche sur le label/icône interne en clair (idem dark) */
body.kta-theme-light button.kta-group-flyout-btn.kta-sous-action-urgence .kta-group-flyout-btn-label,
body.kta-theme-light button.kta-group-flyout-btn.kta-sous-action-urgence .kta-group-flyout-btn-icon {
  color: #fff !important;
}

/* Background des conteneurs leaflet-bar (= la "barre" qui contient les
   boutons) — par défaut transparent, mais on s'assure que la bordure
   externe est cohérente en clair */
body.kta-theme-light .leaflet-bar {
  border: 1px solid var(--kta-light-border-strong) !important;
  box-shadow: 0 2px 6px var(--kta-light-shadow) !important;
}

/* Layers toggle (haut-droite Leaflet — control des calques).
   v1.14.13 (KARMA) : aligné sur --kta-light-bg-bar (au lieu de #fdf8eb)
   pour avoir LA MÊME couleur que les autres boutons .leaflet-bar a en
   mode clair → cohérence visuelle des contrôles flottants. Taille déjà
   32×32 héritée des règles base. SVG hamburger conservé. */
body.kta-theme-light .leaflet-control-layers-toggle,
html.kta-theme-light .leaflet-control-layers-toggle {
  background-color: var(--kta-light-bg-bar) !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Cpath fill='%232a2620' d='M1 1h16v2H1zm0 4h16v2H1zm0 4h16v2H1zm0 4h16v2H1z'/%3E%3C/svg%3E") !important;
  border-bottom: 1px solid var(--kta-light-bg-bar-border) !important;
}
body.kta-theme-light .leaflet-control-layers-toggle:hover,
html.kta-theme-light .leaflet-control-layers-toggle:hover {
  background-color: var(--kta-light-bg-bar-deep) !important;
}
body.kta-theme-light .leaflet-control-layers,
html.kta-theme-light .leaflet-control-layers {
  background: var(--kta-light-bg-elevated) !important;
  color: var(--kta-light-text) !important;
  border: 1px solid var(--kta-light-border-strong) !important;
  box-shadow: 0 4px 12px var(--kta-light-shadow) !important;
}
body.kta-theme-light .leaflet-control-layers-expanded label {
  color: #2a2620 !important;
}
body.kta-theme-light .leaflet-control-layers-separator {
  border-top: 1px solid var(--kta-light-border) !important;
}

/* === MODALES (kta-readme-modal-* pattern utilisé partout) === */
body.kta-theme-light .kta-readme-modal-overlay {
  background: rgba(40, 32, 20, 0.55);
}
body.kta-theme-light .kta-readme-modal-boite {
  background: var(--kta-light-bg-elevated);
  color: var(--kta-light-text);
  border: 1px solid var(--kta-light-border);
  box-shadow: 0 10px 40px var(--kta-light-shadow);
}
body.kta-theme-light .kta-readme-modal-header {
  background: var(--kta-light-bg-deep);
  border-bottom: 1px solid var(--kta-light-border);
}
body.kta-theme-light .kta-readme-modal-titre {
  color: var(--kta-light-text);
}
body.kta-theme-light .kta-readme-modal-corps {
  color: var(--kta-light-text);
  background: var(--kta-light-bg-elevated);
}
body.kta-theme-light .kta-readme-modal-corps * {
  border-color: var(--kta-light-border);
}
body.kta-theme-light .kta-readme-modal-corps code {
  background: rgba(0,0,0,0.06);
  color: #8b3a00;
  border-color: var(--kta-light-border);
}
body.kta-theme-light .kta-readme-modal-corps strong {
  color: var(--kta-light-text);
}

/* === v1.34.28 — Dropdown recherche Mode Itinéraire en theme clair ===
   Bug remonté KARMA : en theme clair, le dropdown de résultats de recherche
   d'un POI dans la modale Itinéraire restait en couleurs sombres (background
   #232838, text #e8eaf0). Double sélecteur body/html safe car la modale
   itinéraire peut être appendée à document.documentElement (pattern habituel
   des modales du projet). */
body.kta-theme-light .kta-iti-search-results,
html.kta-theme-light .kta-iti-search-results {
  background: var(--kta-light-bg-elevated);
  border-color: var(--kta-light-border);
  box-shadow: 0 8px 24px var(--kta-light-shadow);
}
body.kta-theme-light .kta-iti-search-item,
html.kta-theme-light .kta-iti-search-item,
body.kta-theme-light .kta-iti-search-result,
html.kta-theme-light .kta-iti-search-result,
body.kta-theme-light .kta-iti-search-result-empty,
html.kta-theme-light .kta-iti-search-result-empty {
  border-bottom-color: rgba(0, 0, 0, 0.05);
  background: var(--kta-light-bg-elevated);
}
body.kta-theme-light .kta-iti-search-item:hover,
html.kta-theme-light .kta-iti-search-item:hover,
body.kta-theme-light .kta-iti-search-result:hover,
html.kta-theme-light .kta-iti-search-result:hover {
  background: rgba(244, 197, 66, 0.12);
}
body.kta-theme-light .kta-iti-search-name,
html.kta-theme-light .kta-iti-search-name {
  color: var(--kta-light-text);
}
body.kta-theme-light .kta-iti-search-meta,
html.kta-theme-light .kta-iti-search-meta {
  color: var(--kta-light-text-muted, #6b6354);
}
body.kta-theme-light .kta-iti-search-empty,
html.kta-theme-light .kta-iti-search-empty,
body.kta-theme-light .kta-iti-search-more,
html.kta-theme-light .kta-iti-search-more {
  color: var(--kta-light-text-muted, #6b6354);
}

/* === v1.34.21 (corrigé v1.34.23) — Mode Histoire en theme clair ===
   ⚠️ Double sélecteur OBLIGATOIRE : la modale est appendée à
   document.documentElement (= <html>), pas à <body>. Avec un sélecteur
   body.kta-theme-light .X uniquement, les éléments dans la modale ne
   matchent pas (la modale est sibling de body, pas descendant). Pattern
   identique à sessionExporter.js. */

/* Tabs : la barre en haut "Note libre / Histoire" */
body.kta-theme-light .kta-histoire-tabs,
html.kta-theme-light .kta-histoire-tabs {
  background: var(--kta-light-bg-deep);
  border-bottom-color: var(--kta-light-border);
}
body.kta-theme-light .kta-histoire-tab,
html.kta-theme-light .kta-histoire-tab {
  color: var(--kta-light-text-muted, #555);
}
body.kta-theme-light .kta-histoire-tab:hover,
html.kta-theme-light .kta-histoire-tab:hover {
  color: var(--kta-light-text);
  background: rgba(244, 197, 66, 0.12);
}
body.kta-theme-light .kta-histoire-tab-active,
html.kta-theme-light .kta-histoire-tab-active {
  color: #8b3a00;  /* accent jaune-charte rendu sur fond clair */
  background: var(--kta-light-bg-elevated);
  border-color: var(--kta-light-border);
  border-bottom-color: var(--kta-light-bg-elevated);
}
/* Textarea note libre */
body.kta-theme-light .kta-histoire-textarea,
html.kta-theme-light .kta-histoire-textarea {
  background: var(--kta-light-bg-deep);
  border-color: var(--kta-light-border);
  color: var(--kta-light-text);
}
body.kta-theme-light .kta-histoire-textarea:focus,
html.kta-theme-light .kta-histoire-textarea:focus {
  border-color: #d97706;  /* accent jaune-orange focus */
}
body.kta-theme-light .kta-histoire-note-status,
html.kta-theme-light .kta-histoire-note-status {
  color: var(--kta-light-text-muted, #777);
}
/* v1.34.30 — MD editor inline (note libre) — theme clair */
body.kta-theme-light .kta-histoire-md-toolbar,
html.kta-theme-light .kta-histoire-md-toolbar {
  background: rgba(217, 119, 6, 0.05);
  border-color: var(--kta-light-border);
}
body.kta-theme-light .kta-md-tb-btn,
html.kta-theme-light .kta-md-tb-btn {
  color: var(--kta-light-text);
}
body.kta-theme-light .kta-md-tb-btn:hover,
html.kta-theme-light .kta-md-tb-btn:hover {
  background: rgba(217, 119, 6, 0.12);
  border-color: var(--kta-light-border);
}
body.kta-theme-light .kta-md-tb-btn:active,
html.kta-theme-light .kta-md-tb-btn:active {
  background: rgba(217, 119, 6, 0.22);
}
body.kta-theme-light .kta-histoire-note-rendered,
html.kta-theme-light .kta-histoire-note-rendered {
  background: var(--kta-light-bg-deep);
  border-color: var(--kta-light-border);
  color: var(--kta-light-text);
}
body.kta-theme-light .kta-histoire-note-rendered h1,
body.kta-theme-light .kta-histoire-note-rendered h2,
body.kta-theme-light .kta-histoire-note-rendered h3,
html.kta-theme-light .kta-histoire-note-rendered h1,
html.kta-theme-light .kta-histoire-note-rendered h2,
html.kta-theme-light .kta-histoire-note-rendered h3 {
  color: #b35309;  /* accent orange foncé (lisible sur fond clair) */
}
body.kta-theme-light .kta-histoire-note-rendered strong,
html.kta-theme-light .kta-histoire-note-rendered strong {
  color: var(--kta-light-text);
}
body.kta-theme-light .kta-histoire-note-rendered a,
html.kta-theme-light .kta-histoire-note-rendered a {
  color: #1d4ed8;  /* lien bleu lisible sur fond clair */
}
body.kta-theme-light .kta-histoire-note-rendered a:hover,
html.kta-theme-light .kta-histoire-note-rendered a:hover {
  color: #1e40af;
}
body.kta-theme-light .kta-histoire-note-rendered code,
html.kta-theme-light .kta-histoire-note-rendered code {
  background: rgba(217, 119, 6, 0.10);
  color: #b35309;
}
body.kta-theme-light .kta-histoire-note-rendered blockquote,
html.kta-theme-light .kta-histoire-note-rendered blockquote {
  border-left-color: #d97706;
  background: rgba(217, 119, 6, 0.08);
  color: var(--kta-light-text);
}
body.kta-theme-light .kta-histoire-note-empty,
html.kta-theme-light .kta-histoire-note-empty {
  color: var(--kta-light-text-muted, #777);
}
/* PDF wrap + placeholders */
body.kta-theme-light .kta-histoire-pdf-wrap,
html.kta-theme-light .kta-histoire-pdf-wrap {
  background: var(--kta-light-bg-deep);
  border-color: var(--kta-light-border);
}
body.kta-theme-light .kta-histoire-pdf-empty,
html.kta-theme-light .kta-histoire-pdf-empty,
body.kta-theme-light .kta-histoire-pdf-fallback,
html.kta-theme-light .kta-histoire-pdf-fallback {
  color: var(--kta-light-text);
}
body.kta-theme-light .kta-histoire-pdf-empty p,
html.kta-theme-light .kta-histoire-pdf-empty p,
body.kta-theme-light .kta-histoire-pdf-fallback p,
html.kta-theme-light .kta-histoire-pdf-fallback p {
  color: var(--kta-light-text);
}
body.kta-theme-light .kta-histoire-pdf-empty p code,
html.kta-theme-light .kta-histoire-pdf-empty p code {
  background: rgba(0,0,0,0.06);
  color: #8b3a00;
}
/* Toolbar Importer/Remplacer/Retirer */
body.kta-theme-light .kta-histoire-pdf-toolbar,
html.kta-theme-light .kta-histoire-pdf-toolbar {
  background: rgba(244, 197, 66, 0.08);
  border-color: var(--kta-light-border);
}
body.kta-theme-light .kta-histoire-pdf-meta,
html.kta-theme-light .kta-histoire-pdf-meta {
  color: var(--kta-light-text);
}
body.kta-theme-light .kta-panneau-close {
  background: rgba(0,0,0,0.05);
  color: var(--kta-light-text);
  border: 1px solid var(--kta-light-border);
}
body.kta-theme-light .kta-panneau-close:hover {
  background: rgba(220, 50, 50, 0.15);
  border-color: rgba(220, 50, 50, 0.5);
  color: #b02020;
}

/* === Inputs / select / textarea dans modales === */
body.kta-theme-light .kta-readme-modal-corps input[type="text"],
body.kta-theme-light .kta-readme-modal-corps input[type="number"],
body.kta-theme-light .kta-readme-modal-corps input[type="search"],
body.kta-theme-light .kta-readme-modal-corps input[type="password"],
body.kta-theme-light .kta-readme-modal-corps select,
body.kta-theme-light .kta-readme-modal-corps textarea {
  background: #fff;
  color: var(--kta-light-text);
  border: 1px solid var(--kta-light-border-strong);
}
body.kta-theme-light .kta-readme-modal-corps input:focus,
body.kta-theme-light .kta-readme-modal-corps select:focus,
body.kta-theme-light .kta-readme-modal-corps textarea:focus {
  border-color: var(--kta-light-accent);
  outline: none;
  box-shadow: 0 0 0 2px rgba(244, 197, 66, 0.25);
}

/* === Boutons génériques (btn primary / secondary / danger / etc.) === */
body.kta-theme-light .kta-btn,
body.kta-theme-light .kta-btn-primary,
body.kta-theme-light .kta-btn-secondary {
  background: var(--kta-light-bg-deep);
  color: var(--kta-light-text);
  border: 1px solid var(--kta-light-border-strong);
}
body.kta-theme-light .kta-btn-primary {
  background: var(--kta-light-accent);
  color: #2a2620;
  border-color: var(--kta-light-accent-hover);
}
body.kta-theme-light .kta-btn-primary:hover {
  background: var(--kta-light-accent-hover);
}
body.kta-theme-light .kta-btn:hover {
  background: var(--kta-light-accent-bg);
  border-color: var(--kta-light-accent);
}

/* === Labels mesure / itinéraire (bas-gauche Leaflet) === */
body.kta-theme-light .kta-measure-distance {
  background: var(--kta-light-bg-elevated) !important;
  color: #8b3a00 !important;
  border-color: var(--kta-light-accent-hover) !important;
  box-shadow: 0 4px 12px var(--kta-light-shadow) !important;
}
body.kta-theme-light .kta-measure-distance .kta-measure-active-line {
  border-left-color: var(--kta-light-accent-hover);
  background: rgba(244, 197, 66, 0.18);
}
body.kta-theme-light .kta-measure-distance .kta-measure-line + .kta-measure-line {
  border-top-color: var(--kta-light-border);
}
body.kta-theme-light .kta-iti-distance,
body.kta-theme-light .kta-rd-total-pill {
  background: var(--kta-light-bg-elevated) !important;
  color: #0a4f6b !important;
  border-color: rgba(10, 79, 107, 0.4) !important;
  box-shadow: 0 4px 12px var(--kta-light-shadow) !important;
}

/* === Labels segments + angles (mesure) === */
body.kta-theme-light .kta-measure-seg-label {
  background: var(--kta-light-bg-elevated);
  color: #8b3a00;
  border: 1px solid var(--kta-light-accent-hover);
}
body.kta-theme-light .kta-measure-angle-label {
  background: var(--kta-light-bg-elevated);
  color: var(--kta-light-text-muted);
  border: 1px solid var(--kta-light-border);
}

/* === Toasts (OOMGuard.showToast) — 🔧 v1.13.0-fix (KARMA "Mode clair activé
   en blanc presque invisible") : .kta-toast-msg avait color:#e8eaf0
   hardcodé non couvert par mon ancien override .kta-toast. On force aussi
   .kta-toast-msg, .kta-toast-close, .kta-toast-icon dans le contexte light. */
body.kta-theme-light .kta-toast {
  background: var(--kta-light-bg-elevated) !important;
  color: var(--kta-light-text) !important;
  border: 1px solid var(--kta-light-border-strong) !important;
  border-left: 3px solid var(--kta-light-accent) !important;
  box-shadow: 0 4px 16px var(--kta-light-shadow) !important;
}
body.kta-theme-light .kta-toast-msg {
  color: var(--kta-light-text) !important;
}
body.kta-theme-light .kta-toast-icon {
  color: var(--kta-light-text) !important;
}
body.kta-theme-light .kta-toast-close {
  color: var(--kta-light-text-muted) !important;
}
body.kta-theme-light .kta-toast-close:hover {
  color: var(--kta-light-text) !important;
}
/* Types spécifiques — couleur de la bordure gauche */
body.kta-theme-light .kta-toast-error {
  border-left-color: #c0392b !important;
}
body.kta-theme-light .kta-toast-info {
  border-left-color: #0a4f6b !important;
}

/* === ☀️🌙 v1.14.9 — Modale confirmation switch thème (charte MyKTAMap) ===
   Remplace le confirm() natif v1.14.6 par une modale fidèle à la charte
   (bleu nuit + accent jaune en dark, beige + ambre en light). Apparaît
   AVANT le reload, donc dans le thème courant (qu'on est en train de
   quitter) — les 2 variants doivent être impeccables. */
.kta-theme-confirm-overlay {
  /* Backdrop renforcé pour focus utilisateur sur la décision */
  background: rgba(5, 8, 15, 0.78) !important;
}
.kta-theme-confirm-boite {
  max-width: 460px;
  height: auto !important;
  max-height: 88vh !important;
  display: flex !important;
  flex-direction: column !important;
  border: 1px solid rgba(244, 197, 66, 0.32) !important;
  box-shadow: 0 0 0 1px rgba(244, 197, 66, 0.12),
              0 18px 60px rgba(0, 0, 0, 0.65) !important;
}
.kta-theme-confirm-corps {
  padding: 22px 24px 14px !important;
  text-align: center;
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
}
.kta-theme-confirm-icone {
  font-size: 56px;
  line-height: 1;
  margin: 4px 0 14px;
  text-shadow: 0 0 24px rgba(244, 197, 66, 0.32);
  animation: kta-theme-icone-pulse 2.4s ease-in-out infinite;
}
@keyframes kta-theme-icone-pulse {
  0%, 100% { transform: scale(1);    opacity: 0.92; }
  50%      { transform: scale(1.08); opacity: 1; }
}
.kta-theme-confirm-msg {
  color: #e8eaf0;
  font-size: 14.5px;
  line-height: 1.55;
  margin: 0 0 12px;
}
.kta-theme-confirm-msg strong {
  font-weight: 700;
}
.kta-theme-confirm-hint {
  color: #8892a4;
  font-size: 12px;
  line-height: 1.5;
  margin: 6px 0 0;
  padding: 8px 12px;
  background: rgba(140, 180, 255, 0.06);
  border-left: 2px solid rgba(140, 180, 255, 0.35);
  border-radius: 0 4px 4px 0;
  text-align: left;
}
.kta-theme-confirm-hint em {
  font-style: italic;
}
.kta-theme-confirm-actions {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
  padding: 12px 18px 16px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  flex: 0 0 auto;
}
.kta-theme-confirm-actions .kta-btn {
  min-width: 110px;
}
/* Bouton primary spécial : accent jaune charte (au lieu du bleu standard
   .kta-btn-primary) pour rappeler la couleur signature MyKTAMap. */
.kta-theme-confirm-actions .kta-theme-confirm-ok {
  background: linear-gradient(180deg, #f4c542, #d9a82e) !important;
  border: 1px solid #c99a1f !important;
  color: #2a1f08 !important;
  font-weight: 700 !important;
  box-shadow: 0 2px 8px rgba(244, 197, 66, 0.30) !important;
}
.kta-theme-confirm-actions .kta-theme-confirm-ok:hover {
  background: linear-gradient(180deg, #ffd866, #e8b537) !important;
  box-shadow: 0 3px 14px rgba(244, 197, 66, 0.45) !important;
}
.kta-theme-confirm-actions .kta-theme-confirm-ok:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 2px;
}

/* === Variant theme LIGHT === */
body.kta-theme-light .kta-theme-confirm-overlay,
html.kta-theme-light .kta-theme-confirm-overlay {
  background: rgba(40, 32, 20, 0.55) !important;
}
body.kta-theme-light .kta-theme-confirm-boite,
html.kta-theme-light .kta-theme-confirm-boite {
  background: var(--kta-light-bg-elevated) !important;
  color: var(--kta-light-text) !important;
  border-color: rgba(161, 110, 16, 0.40) !important;
  box-shadow: 0 0 0 1px rgba(161, 110, 16, 0.10),
              0 18px 60px rgba(80, 60, 30, 0.30) !important;
}
body.kta-theme-light .kta-theme-confirm-msg,
html.kta-theme-light .kta-theme-confirm-msg {
  color: var(--kta-light-text) !important;
}
body.kta-theme-light .kta-theme-confirm-hint,
html.kta-theme-light .kta-theme-confirm-hint {
  color: var(--kta-light-text-muted) !important;
  background: rgba(244, 197, 66, 0.18) !important;
  border-left-color: rgba(161, 110, 16, 0.55) !important;
}
body.kta-theme-light .kta-theme-confirm-icone,
html.kta-theme-light .kta-theme-confirm-icone {
  text-shadow: 0 0 24px rgba(161, 110, 16, 0.35);
}
body.kta-theme-light .kta-theme-confirm-actions,
html.kta-theme-light .kta-theme-confirm-actions {
  border-top-color: var(--kta-light-border) !important;
}
/* En light, le bouton primary garde son jaune charte mais ajusté contraste */
body.kta-theme-light .kta-theme-confirm-actions .kta-theme-confirm-ok,
html.kta-theme-light .kta-theme-confirm-actions .kta-theme-confirm-ok {
  background: linear-gradient(180deg, #f4c542, #d9a82e) !important;
  border-color: #c99a1f !important;
  color: #3a2f15 !important;
  box-shadow: 0 2px 8px rgba(161, 110, 16, 0.25) !important;
}
body.kta-theme-light .kta-theme-confirm-actions .kta-theme-confirm-ok:hover,
html.kta-theme-light .kta-theme-confirm-actions .kta-theme-confirm-ok:hover {
  background: linear-gradient(180deg, #ffd866, #e8b537) !important;
}

/* === 🔒 v1.14.11 — Modales Verrouiller MyKTAMap ===
   Remplace .kta-shutdown-confirm-* (v1.14.10) suite à KARMA « plutôt que
   éteindre qui sert à rien, on fait verrouiller (si password actif) ».
   Pattern miroir de .kta-theme-confirm-* (v1.14.9). Accent bleu charte
   (action neutre/sécurité, pas destructive) sur la modale confirm.
   Variant nopin = modale d'info quand aucun PIN n'est configuré. */
.kta-lock-confirm-overlay,
.kta-lock-nopin-overlay {
  background: rgba(5, 8, 15, 0.78) !important;
}
.kta-lock-confirm-boite,
.kta-lock-nopin-boite {
  max-width: 480px;
  height: auto !important;
  max-height: 88vh !important;
  display: flex !important;
  flex-direction: column !important;
  border: 1px solid rgba(140, 180, 255, 0.40) !important;
  box-shadow: 0 0 0 1px rgba(140, 180, 255, 0.14),
              0 18px 60px rgba(0, 0, 0, 0.65) !important;
}
.kta-lock-confirm-corps,
.kta-lock-nopin-corps {
  padding: 22px 24px 14px !important;
  text-align: center;
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
}
.kta-lock-confirm-icone,
.kta-lock-nopin-icone {
  font-size: 56px;
  line-height: 1;
  margin: 4px 0 14px;
  color: #8cb4ff;
  text-shadow: 0 0 28px rgba(140, 180, 255, 0.40);
}
.kta-lock-confirm-msg,
.kta-lock-nopin-msg {
  color: #e8eaf0;
  font-size: 14.5px;
  line-height: 1.55;
  margin: 0 0 12px;
}
.kta-lock-confirm-msg strong,
.kta-lock-nopin-msg strong {
  color: #aac6ff;
  font-weight: 700;
}
.kta-lock-confirm-hint,
.kta-lock-nopin-hint {
  color: #8892a4;
  font-size: 12px;
  line-height: 1.5;
  margin: 6px 0 0;
  padding: 8px 12px;
  background: rgba(140, 180, 255, 0.06);
  border-left: 2px solid rgba(140, 180, 255, 0.40);
  border-radius: 0 4px 4px 0;
  text-align: left;
}
.kta-lock-confirm-hint em,
.kta-lock-nopin-hint em {
  font-style: italic;
}
.kta-lock-confirm-actions,
.kta-lock-nopin-actions {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
  padding: 12px 18px 16px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  flex: 0 0 auto;
}
.kta-lock-confirm-actions .kta-btn,
.kta-lock-nopin-actions .kta-btn {
  min-width: 130px;
}
/* Bouton primary : jaune charte MyKTAMap (cohérent avec « Activer et
   relancer » du switch thème — signature visuelle de la marque). */
.kta-lock-confirm-actions .kta-lock-confirm-ok,
.kta-lock-nopin-actions .kta-lock-nopin-ok {
  background: linear-gradient(180deg, #f4c542, #d9a82e) !important;
  border: 1px solid #c99a1f !important;
  color: #2a1f08 !important;
  font-weight: 700 !important;
  box-shadow: 0 2px 8px rgba(244, 197, 66, 0.30) !important;
}
.kta-lock-confirm-actions .kta-lock-confirm-ok:hover,
.kta-lock-nopin-actions .kta-lock-nopin-ok:hover {
  background: linear-gradient(180deg, #ffd866, #e8b537) !important;
  box-shadow: 0 3px 14px rgba(244, 197, 66, 0.45) !important;
}
.kta-lock-confirm-actions .kta-lock-confirm-ok:focus-visible,
.kta-lock-nopin-actions .kta-lock-nopin-ok:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 2px;
}

/* Variant theme light — beige + accent ambre */
body.kta-theme-light .kta-lock-confirm-overlay,
html.kta-theme-light .kta-lock-confirm-overlay,
body.kta-theme-light .kta-lock-nopin-overlay,
html.kta-theme-light .kta-lock-nopin-overlay {
  background: rgba(40, 32, 20, 0.55) !important;
}
body.kta-theme-light .kta-lock-confirm-boite,
html.kta-theme-light .kta-lock-confirm-boite,
body.kta-theme-light .kta-lock-nopin-boite,
html.kta-theme-light .kta-lock-nopin-boite {
  background: var(--kta-light-bg-elevated) !important;
  color: var(--kta-light-text) !important;
  border-color: rgba(161, 110, 16, 0.40) !important;
  box-shadow: 0 0 0 1px rgba(161, 110, 16, 0.10),
              0 18px 60px rgba(80, 60, 30, 0.30) !important;
}
body.kta-theme-light .kta-lock-confirm-icone,
html.kta-theme-light .kta-lock-confirm-icone,
body.kta-theme-light .kta-lock-nopin-icone,
html.kta-theme-light .kta-lock-nopin-icone {
  color: #a16e10;
  text-shadow: 0 0 28px rgba(161, 110, 16, 0.30);
}
body.kta-theme-light .kta-lock-confirm-msg,
html.kta-theme-light .kta-lock-confirm-msg,
body.kta-theme-light .kta-lock-nopin-msg,
html.kta-theme-light .kta-lock-nopin-msg {
  color: var(--kta-light-text) !important;
}
body.kta-theme-light .kta-lock-confirm-msg strong,
html.kta-theme-light .kta-lock-confirm-msg strong,
body.kta-theme-light .kta-lock-nopin-msg strong,
html.kta-theme-light .kta-lock-nopin-msg strong {
  color: #6b4d10 !important;
}
body.kta-theme-light .kta-lock-confirm-hint,
html.kta-theme-light .kta-lock-confirm-hint,
body.kta-theme-light .kta-lock-nopin-hint,
html.kta-theme-light .kta-lock-nopin-hint {
  color: var(--kta-light-text-muted) !important;
  background: rgba(244, 197, 66, 0.18) !important;
  border-left-color: rgba(161, 110, 16, 0.55) !important;
}
body.kta-theme-light .kta-lock-confirm-actions,
html.kta-theme-light .kta-lock-confirm-actions,
body.kta-theme-light .kta-lock-nopin-actions,
html.kta-theme-light .kta-lock-nopin-actions {
  border-top-color: var(--kta-light-border) !important;
}

/* === ↻ v1.14.11 — Theme light overrides pour la modale « Session
   précédente restaurée » (.kta-session-modal-*). KARMA : « en mode clair,
   le modal quand on charge la dernière carte session précédente restaurée
   n'est pas en mode clair ». La modale est append à document.body donc
   body.kta-theme-light suffit, mais on ajoute html.kta-theme-light par
   cohérence avec le pattern de la v1.13.0-fix5. */
body.kta-theme-light .kta-session-modal-boite,
html.kta-theme-light .kta-session-modal-boite {
  background: var(--kta-light-bg-elevated) !important;
  color: var(--kta-light-text) !important;
  border-color: rgba(161, 110, 16, 0.45) !important;
  box-shadow: 0 16px 48px rgba(80, 60, 30, 0.30) !important;
}
body.kta-theme-light .kta-session-modal-icon,
html.kta-theme-light .kta-session-modal-icon {
  background: rgba(244, 197, 66, 0.30) !important;
  border-color: rgba(161, 110, 16, 0.55) !important;
  color: #a16e10 !important;
  box-shadow: 0 0 24px rgba(244, 197, 66, 0.30) !important;
}
body.kta-theme-light .kta-session-modal-titre,
html.kta-theme-light .kta-session-modal-titre {
  color: var(--kta-light-text) !important;
}
body.kta-theme-light .kta-session-modal-plan,
html.kta-theme-light .kta-session-modal-plan {
  color: #a16e10 !important;
}
body.kta-theme-light .kta-session-modal-detail,
html.kta-theme-light .kta-session-modal-detail {
  color: var(--kta-light-text-muted) !important;
}

/* v1.14.11 : tous les styles .kta-shutdown-* (v1.14.8 → v1.14.10) ont
   été retirés en même temps que le bouton 🔌 Arrêt de l'application —
   plus aucun chemin de code n'instancie #kta-shutdown-confirm-modal ni
   #kta-shutdown-overlay. Le remplaçant fonctionnel est le bouton 🔒
   Verrouiller (cf. .kta-lock-confirm-* / .kta-lock-nopin-* plus haut).
   Aussi retiré : .loader-btn-shutdown (CSS bouton header). */

/* === 📝 v1.16.0 step 1 — Popup note (zones / tracés / structures) ===
   Le popup utilise les mêmes classes Leaflet que les popups points
   (.leaflet-popup-content-wrapper → déjà variantisé clair/sombre v1.14.4)
   + classes spécifiques .kta-note-popup-* pour le textarea et le wrapper. */
.kta-note-popup .kta-note-popup-wrap {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 8px;
}
.kta-note-popup-textarea {
  width: 100%;
  min-width: 220px;
  min-height: 80px;
  padding: 8px 10px !important;
  font-family: Arial, sans-serif !important;
  font-size: 13px !important;
  line-height: 1.5 !important;
  background: #0d1117 !important;
  border: 1px solid rgba(255,255,255,0.12) !important;
  border-radius: 6px !important;
  color: #e8eaf0 !important;
  resize: vertical;
  box-sizing: border-box !important;
}
.kta-note-popup-textarea:focus {
  outline: none !important;
  border-color: rgba(140,180,255,0.5) !important;
}
.kta-note-popup-actions {
  margin-top: 4px !important;
  padding-top: 6px !important;
}
.kta-note-popup-status {
  font-size: 12px;
  text-align: center;
  margin-top: 4px;
  font-weight: 600;
}

/* Theme light — beige cataphile + ambre charte */
body.kta-theme-light .kta-note-popup-textarea,
html.kta-theme-light .kta-note-popup-textarea {
  background: var(--kta-light-bg) !important;
  border: 1px solid var(--kta-light-border-strong) !important;
  color: var(--kta-light-text) !important;
}
body.kta-theme-light .kta-note-popup-textarea:focus,
html.kta-theme-light .kta-note-popup-textarea:focus {
  border-color: var(--kta-light-accent) !important;
  box-shadow: 0 0 0 2px rgba(244, 197, 66, 0.20) !important;
}

/* Mode readonly (data layer) — pas de textarea, juste affichage texte */
.kta-note-popup-readonly-label {
  font-size: 11px;
  color: #8892a4;
  margin: 4px 0 6px;
  font-style: italic;
  letter-spacing: 0.02em;
}
.kta-note-popup-readonly-text {
  font-size: 13px;
  line-height: 1.5;
  color: #c8d0e0;
  background: rgba(140, 180, 255, 0.06);
  border-left: 2px solid rgba(140, 180, 255, 0.35);
  border-radius: 0 4px 4px 0;
  padding: 6px 10px;
  margin: 4px 0;
  /* Préserve les retours à la ligne saisis par l'auteur (sans wrap forcé
     pour préserver le formattage). */
  white-space: pre-wrap;
  word-break: break-word;
  max-height: 240px;
  overflow-y: auto;
}
.kta-note-popup-readonly-empty {
  font-size: 12px;
  color: #8892a4;
  font-style: italic;
  text-align: center;
  margin: 8px 0;
}

/* Theme light : variant beige + accent jaune charte */
body.kta-theme-light .kta-note-popup-readonly-label,
html.kta-theme-light .kta-note-popup-readonly-label {
  color: var(--kta-light-text-muted) !important;
}
body.kta-theme-light .kta-note-popup-readonly-text,
html.kta-theme-light .kta-note-popup-readonly-text {
  color: var(--kta-light-text) !important;
  background: rgba(244, 197, 66, 0.12) !important;
  border-left-color: rgba(161, 110, 16, 0.45) !important;
}

/* v1.14.17 (KARMA « reprend depuis 0 sans toutes nos itérations ») :
   tous les styles spécifiques à la modale Import (.kta-import-choix-* et
   les overrides #kta-import-choix-modal .kta-ses-*) sont retirés. La
   nouvelle implémentation (window.ouvrirImportChoix) calque le pattern
   « Export PNG/JPG » de exporter.js : 2 gros boutons .kta-conv-sens-btn
   en haut + 2 panels .kta-aide-section togglés par display. Tout en
   classes CSS déjà existantes — zéro nouveau CSS. */

/* === Popups Leaflet (markers, zones) ===
   v1.14.4 — fix bug "popup data layer en sombre malgré mode clair" :
   les règles dark base utilisent toutes !important (background:#1a1f2e
   !important), donc les overrides light DOIVENT aussi avoir !important
   sinon ils sont battus en spécificité. Cas signalé par KARMA quand on
   clique un point embedded data layer. */
body.kta-theme-light .leaflet-popup-content-wrapper,
html.kta-theme-light .leaflet-popup-content-wrapper {
  background: var(--kta-light-bg-elevated) !important;
  color: var(--kta-light-text) !important;
  border: 1px solid var(--kta-light-border) !important;
  box-shadow: 0 3px 14px var(--kta-light-shadow) !important;
}
body.kta-theme-light .leaflet-popup-tip,
html.kta-theme-light .leaflet-popup-tip,
body.kta-theme-light .leaflet-popup-tip-container .leaflet-popup-tip,
html.kta-theme-light .leaflet-popup-tip-container .leaflet-popup-tip {
  background: var(--kta-light-bg-elevated) !important;
  box-shadow: none !important;
}
body.kta-theme-light .leaflet-popup-content,
html.kta-theme-light .leaflet-popup-content {
  color: var(--kta-light-text) !important;
}
body.kta-theme-light .leaflet-popup-content b,
html.kta-theme-light .leaflet-popup-content b {
  color: var(--kta-light-accent-strong, #a16e10) !important;
}
body.kta-theme-light .leaflet-popup-close-button,
html.kta-theme-light .leaflet-popup-close-button {
  color: var(--kta-light-text-muted) !important;
}
body.kta-theme-light .leaflet-popup-close-button:hover,
html.kta-theme-light .leaflet-popup-close-button:hover {
  color: var(--kta-light-text) !important;
}
/* Description point dans popup (.kta-popup-point .kta-popup-desc) */
body.kta-theme-light .kta-popup-point .kta-popup-desc,
html.kta-theme-light .kta-popup-point .kta-popup-desc {
  color: var(--kta-light-text-muted) !important;
}
/* 🆕 v1.21.2 : ligne coords GPS du popup point — adapté pour le clair. */
body.kta-theme-light .kta-popup-point .kta-popup-gps,
html.kta-theme-light .kta-popup-point .kta-popup-gps {
  background: rgba(40, 80, 160, 0.08) !important;
  border-color: rgba(40, 80, 160, 0.30) !important;
}
body.kta-theme-light .kta-popup-point .kta-popup-gps-val,
html.kta-theme-light .kta-popup-point .kta-popup-gps-val {
  color: #1a4a9e !important;
}
body.kta-theme-light .kta-popup-point .kta-popup-gps-copy,
html.kta-theme-light .kta-popup-point .kta-popup-gps-copy {
  color: #1a4a9e !important;
}
/* Barre d'actions du popup (séparateur top) */
body.kta-theme-light .kta-popup-actions,
html.kta-theme-light .kta-popup-actions {
  border-top: 1px solid var(--kta-light-border) !important;
}
/* Boutons d'action génériques (.kta-popup-btn — bleus dark) */
body.kta-theme-light .kta-popup-actions .kta-popup-btn,
html.kta-theme-light .kta-popup-actions .kta-popup-btn {
  background: rgba(161, 110, 16, 0.10) !important;
  border-color: rgba(161, 110, 16, 0.40) !important;
  color: #6b4d10 !important;
}
body.kta-theme-light .kta-popup-actions .kta-popup-btn:hover,
html.kta-theme-light .kta-popup-actions .kta-popup-btn:hover {
  background: rgba(161, 110, 16, 0.22) !important;
}
/* Bouton "📍 Je suis ici" — vert (accent positif) */
body.kta-theme-light .kta-popup-actions .kta-popup-btn-here,
html.kta-theme-light .kta-popup-actions .kta-popup-btn-here {
  background: rgba(56, 142, 60, 0.12) !important;
  border-color: rgba(56, 142, 60, 0.45) !important;
  color: #2e7032 !important;
}
body.kta-theme-light .kta-popup-actions .kta-popup-btn-here:hover,
html.kta-theme-light .kta-popup-actions .kta-popup-btn-here:hover {
  background: rgba(56, 142, 60, 0.25) !important;
}
/* Bouton "🚶 Aller" — jaune (accent principal mode clair) */
body.kta-theme-light .kta-popup-actions .kta-popup-btn-aller,
html.kta-theme-light .kta-popup-actions .kta-popup-btn-aller {
  background: var(--kta-light-accent) !important;
  border-color: #c99a1f !important;
  color: #3a2f15 !important;
}
body.kta-theme-light .kta-popup-actions .kta-popup-btn-aller:hover,
html.kta-theme-light .kta-popup-actions .kta-popup-btn-aller:hover {
  background: #e8b537 !important;
}
/* Bouton 🗑 Supprimer — rouge danger */
body.kta-theme-light .kta-popup-actions .kta-popup-btn-delete,
html.kta-theme-light .kta-popup-actions .kta-popup-btn-delete {
  background: rgba(180, 30, 30, 0.10) !important;
  border-color: rgba(180, 30, 30, 0.45) !important;
  color: #a01818 !important;
}
body.kta-theme-light .kta-popup-actions .kta-popup-btn-delete:hover,
html.kta-theme-light .kta-popup-actions .kta-popup-btn-delete:hover {
  background: rgba(180, 30, 30, 0.22) !important;
}
/* Bouton ✏️ Éditer / ➕ Ajouter — repris du même bleu ambre */
body.kta-theme-light .kta-popup-actions .kta-popup-btn-edit,
html.kta-theme-light .kta-popup-actions .kta-popup-btn-edit,
body.kta-theme-light .kta-popup-actions .kta-popup-btn-add,
html.kta-theme-light .kta-popup-actions .kta-popup-btn-add {
  background: rgba(161, 110, 16, 0.10) !important;
  border-color: rgba(161, 110, 16, 0.40) !important;
  color: #6b4d10 !important;
}
body.kta-theme-light .kta-popup-actions .kta-popup-btn-edit:hover,
html.kta-theme-light .kta-popup-actions .kta-popup-btn-edit:hover,
body.kta-theme-light .kta-popup-actions .kta-popup-btn-add:hover,
html.kta-theme-light .kta-popup-actions .kta-popup-btn-add:hover {
  background: rgba(161, 110, 16, 0.22) !important;
}
/* Inputs/textareas dans popup (édition inline) */
body.kta-theme-light .leaflet-popup-content input,
html.kta-theme-light .leaflet-popup-content input,
body.kta-theme-light .leaflet-popup-content textarea,
html.kta-theme-light .leaflet-popup-content textarea,
body.kta-theme-light .leaflet-popup-content select,
html.kta-theme-light .leaflet-popup-content select {
  background: var(--kta-light-bg) !important;
  border: 1px solid var(--kta-light-border) !important;
  color: var(--kta-light-text) !important;
}

/* === Plan switcher (titre clickable + modale) === */
body.kta-theme-light .kta-refonte-plan-switch-modal-overlay {
  background: rgba(40, 32, 20, 0.55);
}
body.kta-theme-light .kta-refonte-plan-switch-modal {
  background: var(--kta-light-bg-elevated);
  color: var(--kta-light-text);
  border: 1px solid var(--kta-light-border);
}
body.kta-theme-light .kta-refonte-plan-card {
  background: rgba(0,0,0,0.03);
  border: 1px solid var(--kta-light-border);
  color: var(--kta-light-text);
}
body.kta-theme-light .kta-refonte-plan-card.kta-refonte-plan-card-active {
  background: var(--kta-light-accent-bg);
  border-color: var(--kta-light-accent);
}
body.kta-theme-light .kta-refonte-plan-card:hover {
  background: var(--kta-light-accent-bg);
}

/* === Modale Aide / Doc (kta-aide-* / kta-readme-*) === */
body.kta-theme-light .kta-aide-section-titre {
  color: var(--kta-light-accent-hover);
  border-bottom: 1px solid var(--kta-light-border);
}
body.kta-theme-light .kta-aide-icone {
  color: var(--kta-light-accent-hover);
}
body.kta-theme-light .kta-aide-grille {
  color: var(--kta-light-text);
}

/* === Recherche unifiée (Ctrl+K) === */
body.kta-theme-light .kta-search-modal-boite,
body.kta-theme-light .kta-search-result-item {
  background: var(--kta-light-bg-elevated);
  color: var(--kta-light-text);
  border-color: var(--kta-light-border);
}
body.kta-theme-light .kta-search-result-item:hover,
body.kta-theme-light .kta-search-result-item.kta-search-selected {
  background: var(--kta-light-accent-bg);
}
body.kta-theme-light .kta-search-filter-chip {
  background: rgba(0,0,0,0.05);
  color: var(--kta-light-text);
  border: 1px solid var(--kta-light-border);
}
body.kta-theme-light .kta-search-filter-chip.active {
  background: var(--kta-light-accent-bg);
  border-color: var(--kta-light-accent);
  color: var(--kta-light-text);
}

/* === Tableaux / lignes (édition JSON, stats, etc.) === */
body.kta-theme-light table {
  color: var(--kta-light-text);
}
body.kta-theme-light table th {
  background: var(--kta-light-bg-deep);
  color: var(--kta-light-text);
  border-bottom: 2px solid var(--kta-light-border-strong);
}
body.kta-theme-light table td {
  border-bottom: 1px solid var(--kta-light-border);
}
body.kta-theme-light tr:hover {
  background: var(--kta-light-accent-bg);
}

/* === Modale Replay tracker (v1.12.0 V2.3) === */
body.kta-theme-light .kta-tracker-replay-modal,
body.kta-theme-light .kta-tracker-replay-controls {
  background: var(--kta-light-bg-elevated);
  color: var(--kta-light-text);
  border-color: var(--kta-light-border);
}
body.kta-theme-light .kta-tracker-replay-slider {
  background: var(--kta-light-bg-deep);
}

/* === Stats agrégées dans modale Session active === */
body.kta-theme-light .kta-refonte-stats-row {
  border-bottom: 1px dashed var(--kta-light-border);
  color: var(--kta-light-text);
}
body.kta-theme-light .kta-refonte-stats-label {
  color: var(--kta-light-text-muted);
}
body.kta-theme-light .kta-refonte-stats-val {
  color: var(--kta-light-text);
  font-weight: 600;
}

/* === Stats détaillées (liste éléments) === */
body.kta-theme-light .kta-refonte-session-section-titre {
  color: var(--kta-light-accent-hover);
  border-bottom: 1px solid var(--kta-light-border);
}
body.kta-theme-light .kta-refonte-session-list li {
  border-bottom: 1px solid var(--kta-light-border);
  color: var(--kta-light-text);
}
body.kta-theme-light .kta-refonte-session-meta {
  color: var(--kta-light-text-muted);
}

/* === Photos viewer (overlay sombre par essence — on garde dark même en
   light mode, c'est cohérent pour la lisibilité des photos) === */

/* === Modale d'export (PNG / PDF / KMZ / Session) === */
body.kta-theme-light .kta-export-cb-row,
body.kta-theme-light .kta-export-sub-cb-row,
body.kta-theme-light .kta-ses-cb-row {
  color: var(--kta-light-text);
}
body.kta-theme-light .kta-export-cb-row:hover,
body.kta-theme-light .kta-ses-cb-row:hover {
  background: var(--kta-light-accent-bg);
}
body.kta-theme-light .kta-conv-sens-btn {
  background: rgba(0,0,0,0.03);
  color: var(--kta-light-text);
  border: 1px solid var(--kta-light-border);
}
body.kta-theme-light .kta-conv-sens-btn:hover,
body.kta-theme-light .kta-conv-sens-btn.active {
  background: var(--kta-light-accent-bg);
  border-color: var(--kta-light-accent);
}

/* === Itinéraire (modale calcul + waypoints + chips évitement) === */
body.kta-theme-light .kta-iti-modal-boite,
body.kta-theme-light .kta-iti-waypoint-item,
body.kta-theme-light .kta-iti-avoid-chip {
  background: var(--kta-light-bg-elevated);
  color: var(--kta-light-text);
  border-color: var(--kta-light-border);
}
body.kta-theme-light .kta-iti-avoid-chip {
  background: rgba(255, 140, 0, 0.15);
  color: #8b3a00;
}

/* === Tag autocomplete suggestions === */
body.kta-theme-light .kta-tag-suggestion {
  background: var(--kta-light-bg-elevated);
  color: var(--kta-light-text);
  border: 1px solid var(--kta-light-border);
}
body.kta-theme-light .kta-tag-suggestion:hover,
body.kta-theme-light .kta-tag-suggestion.kta-active {
  background: var(--kta-light-accent-bg);
}

/* === Hint / accordions / sections expandables === */
body.kta-theme-light .kta-aide-section,
body.kta-theme-light details {
  border: 1px solid var(--kta-light-border);
}
body.kta-theme-light summary {
  color: var(--kta-light-text);
}
body.kta-theme-light summary:hover {
  background: var(--kta-light-accent-bg);
}

/* === Confirmation suppressions (kta-choix-suppr) === */
body.kta-theme-light .kta-choix-suppr-overlay {
  background: rgba(40, 32, 20, 0.55);
}
body.kta-theme-light .kta-choix-suppr-boite {
  background: var(--kta-light-bg-elevated);
  color: var(--kta-light-text);
  border: 1px solid var(--kta-light-border);
}
body.kta-theme-light .kta-choix-suppr-btn {
  background: rgba(0,0,0,0.04);
  color: var(--kta-light-text);
  border: 1px solid var(--kta-light-border);
}
body.kta-theme-light .kta-choix-suppr-btn:hover {
  background: var(--kta-light-accent-bg);
  border-color: var(--kta-light-accent);
}
body.kta-theme-light .kta-choix-suppr-btn.kta-danger {
  background: rgba(220, 50, 50, 0.1);
  color: #b02020;
  border-color: rgba(220, 50, 50, 0.4);
}
body.kta-theme-light .kta-choix-suppr-btn.kta-danger:hover {
  background: rgba(220, 50, 50, 0.2);
}

/* === Refresh button du chip Counter Session (mobile compact) === */
body.kta-theme-light .kta-refonte-counters-btn {
  color: var(--kta-light-text);
}

/* === Bouton ⏪ / ⏩ Historique grisé (pile vide) === */
body.kta-theme-light .leaflet-bar a.kta-sub.kta-disabled,
body.kta-theme-light .leaflet-bar a.kta-disabled {
  color: var(--kta-light-text-dim) !important;
  opacity: 0.45 !important;
  cursor: not-allowed !important;
}

/* === Override global texte clair sur fond clair (catch-all) ===
   🔧 v1.13.0-fix (KARMA "surement des effets de bord ailleurs") : nombre
   d'éléments enfants (h1/h2/h3/p/span/li/strong/em/code/td/th dans les
   modales et panneaux) ont un color: #e8eaf0 ou color: #fff hardcodé en
   dark, non couverts par les overrides individuels. On force le texte
   foncé dans le contexte light pour les conteneurs principaux du mode
   carte (modales, popups, status bar, sidebar interne). */
body.kta-theme-light .kta-readme-modal-corps h1,
body.kta-theme-light .kta-readme-modal-corps h2,
body.kta-theme-light .kta-readme-modal-corps h3,
body.kta-theme-light .kta-readme-modal-corps h4,
body.kta-theme-light .kta-readme-modal-corps h5,
body.kta-theme-light .kta-readme-modal-corps p,
body.kta-theme-light .kta-readme-modal-corps li,
body.kta-theme-light .kta-readme-modal-corps span,
body.kta-theme-light .kta-readme-modal-corps strong,
body.kta-theme-light .kta-readme-modal-corps em,
body.kta-theme-light .kta-readme-modal-corps label,
body.kta-theme-light .kta-readme-modal-corps div {
  color: var(--kta-light-text);
}
body.kta-theme-light .kta-readme-modal-titre,
body.kta-theme-light .kta-readme-modal-header * {
  color: var(--kta-light-text) !important;
}
/* Popups Leaflet — enfants textuels */
body.kta-theme-light .leaflet-popup-content h1,
body.kta-theme-light .leaflet-popup-content h2,
body.kta-theme-light .leaflet-popup-content h3,
body.kta-theme-light .leaflet-popup-content p,
body.kta-theme-light .leaflet-popup-content li,
body.kta-theme-light .leaflet-popup-content span,
body.kta-theme-light .leaflet-popup-content strong,
body.kta-theme-light .leaflet-popup-content em,
body.kta-theme-light .leaflet-popup-content div,
body.kta-theme-light .leaflet-popup-content b,
body.kta-theme-light .leaflet-popup-content a {
  color: var(--kta-light-text) !important;
}
/* Footer status bar — refresh des enfants */
body.kta-theme-light .kta-refonte-statusbar span,
body.kta-theme-light .kta-refonte-statusbar div,
body.kta-theme-light .kta-refonte-statusbar button {
  color: var(--kta-light-text) !important;
}
/* En-tête refonte — refresh */
body.kta-theme-light .kta-refonte-header span,
body.kta-theme-light .kta-refonte-header div,
body.kta-theme-light .kta-refonte-header button {
  color: var(--kta-light-text) !important;
}
/* Détails modale Session — listes d'éléments */
body.kta-theme-light .kta-refonte-session-corps span,
body.kta-theme-light .kta-refonte-session-corps div,
body.kta-theme-light .kta-refonte-session-corps li,
body.kta-theme-light .kta-refonte-session-corps strong {
  color: var(--kta-light-text);
}

/* === Splash quand on revient au mode carte (anti-FOUC) ===
   Le splash original reste dark dans tous les cas (cinématique), on
   ne le retouche pas. Mais si jamais une modale d'attente brève s'affiche
   pendant la transition home → carte, elle suit le thème. */

/* === Footer du panneau Doc IA / Aide IA === */
body.kta-theme-light .kta-aide-ia-footer,
body.kta-theme-light .kta-readme-modal-corps blockquote {
  background: rgba(244, 197, 66, 0.1);
  border-left: 4px solid var(--kta-light-accent);
  color: var(--kta-light-text);
}

/* === Section Mes plans dans la modale Plan switcher (refonte v1.2) === */
body.kta-theme-light .kta-refonte-plan-grid-titre {
  color: var(--kta-light-accent-hover);
}

/* === Tooltips Leaflet === */
body.kta-theme-light .leaflet-tooltip {
  background: var(--kta-light-bg-elevated);
  color: var(--kta-light-text);
  border: 1px solid var(--kta-light-border-strong);
  box-shadow: 0 2px 8px var(--kta-light-shadow);
}

/* === Zoom controls Leaflet (haut-droite) ===
   v1.14.13 — DUPLICATE retirée (KARMA « fais passer le fond de calque
   Leaflet même couleur que les autres icônes »). Cette règle re-déclarait
   .leaflet-bar a avec --kta-light-bg-elevated (beige clair) sans
   !important, créant une incohérence visuelle avec la définition
   canonique plus haut qui utilise --kta-light-bg-bar (beige pierreux,
   cohérent avec les autres icônes sidebar). La canonique reste seule. */

/* === Modale Niveaux M-LVL === */
body.kta-theme-light .kta-mlvl-niveau-row,
body.kta-theme-light .kta-mlvl-card {
  background: rgba(0,0,0,0.03);
  border: 1px solid var(--kta-light-border);
  color: var(--kta-light-text);
}
body.kta-theme-light .kta-mlvl-niveau-row.kta-mlvl-actif,
body.kta-theme-light .kta-mlvl-card.kta-mlvl-actif {
  background: var(--kta-light-accent-bg);
  border-color: var(--kta-light-accent);
}
body.kta-theme-light .kta-mlvl-niveau-badge {
  background: var(--kta-light-bg-deep);
  color: var(--kta-light-text);
  border: 1px solid var(--kta-light-border);
}

/* === Légende in-app (kta-legende-*) === */
body.kta-theme-light .kta-legende-modal-boite {
  background: var(--kta-light-bg-elevated);
  color: var(--kta-light-text);
}
body.kta-theme-light .kta-legende-section-titre {
  color: var(--kta-light-accent-hover);
}
body.kta-theme-light .kta-legende-item {
  border-bottom: 1px solid var(--kta-light-border);
  color: var(--kta-light-text);
}

/* === Boutons d'action header (PIN, theme emergency, etc.) === */
body.kta-theme-light .kta-refonte-header-action-btn {
  background: rgba(0,0,0,0.05);
  color: var(--kta-light-text);
  border: 1px solid var(--kta-light-border);
}
body.kta-theme-light .kta-refonte-header-action-btn:hover {
  background: var(--kta-light-accent-bg);
  border-color: var(--kta-light-accent);
}

/* === Splash KARMA (reste dark, mais juste au cas où une transition
   est visible pendant le boot, on n'override rien) === */
/* (volontairement vide) */

/* ============================================================================
 * 🔧 v1.13.0-fix2 — EXTENSION DU THÈME CLAIR À LA HOME + LOADER + DOCS UI
 * ============================================================================
 * KARMA "active le mode clair partout, home, les modal, les doc afficher
 * dans l'UI readme, audit, aide, et possibilité d'activer ou non depuis
 * le conf home".
 *
 * Lève la restriction "mode carte uniquement" → le thème clair s'applique
 * désormais à : body, loader plein écran (#planLoaderOverlay + Box), home
 * cards (Mes plans, Récents, Reprendre), boutons home, modale Config home,
 * modale Audit réseau (NetDoc + NetLog), drawer perf, toggles paranoia,
 * inputs file, status messages.
 *
 * Le splash KARMA animé est volontairement laissé en dark (cinématique de
 * lancement). C'est la seule exception.
 * ============================================================================ */

body.kta-theme-light {
  background-color: var(--kta-light-bg) !important;
}

/* === LOADER plein écran ===
   🔧 v1.13.0-fix7 (KARMA "je parlais du fond du home") : home = même
   couleur que le header + footer du mode carte (brun-beige #c9b88f).
   Le contraste interne se fait via les cartes (Reprendre, Mes plans,
   Récents) qui ressortent en blanc/beige clair sur ce fond brun. */
body.kta-theme-light #planLoaderOverlay {
  background: rgba(201, 184, 143, 0.96) !important;
}
body.kta-theme-light #planLoaderBox {
  background: var(--kta-light-bg-bar) !important;  /* brun-beige uniforme */
  color: var(--kta-light-text) !important;
}
body.kta-theme-light #planLoaderBox * {
  color: var(--kta-light-text);
}
body.kta-theme-light #planLoaderBox strong,
body.kta-theme-light #planLoaderBox h1,
body.kta-theme-light #planLoaderBox h2,
body.kta-theme-light #planLoaderBox h3 {
  color: #1a1612;
}
body.kta-theme-light #planLoaderBox a {
  color: var(--kta-light-accent-hover);
}
body.kta-theme-light #planLoaderBox a:hover {
  color: #8b5a00;
}

/* === Boutons home ===
   v1.14.20-hotfix5 (KARMA « le fond de l'icône verrouillé n'est pas blanc
   toujours transparent ») : remplacement du fond rgba(0,0,0,0.05) (5%
   noir = quasi-transparent sur fond beige du loader-header → l'user
   percevait ça comme « transparent ») par un vrai blanc opaque #ffffff.
   S'applique uniformément aux 3 boutons utilitaires du header :
   📖 Documentation, ⚙️ Configuration, 🔒 Verrouiller. */
body.kta-theme-light .loader-btn-help,
body.kta-theme-light .loader-btn-secondary {
  background: #ffffff !important;
  color: var(--kta-light-text) !important;
  border: 1px solid var(--kta-light-border-strong) !important;
}
/* v1.14.15 (KARMA) : :hover encapsulé dans @media (hover: hover) pour
   ne s'activer que sur les devices avec un vrai pointeur (mouse). Sur
   tactile, après tap, le :hover restait sticky → le bouton apparaissait
   en ambre permanent (vu sur le bouton 🔒 Verrouiller dernier tappé). */
@media (hover: hover) {
  body.kta-theme-light .loader-btn-help:hover,
  body.kta-theme-light .loader-btn-secondary:hover {
    background: var(--kta-light-accent-bg) !important;
    border-color: var(--kta-light-accent) !important;
  }
}

/* === Footer copyright loader === */
body.kta-theme-light .kta-loader-copyright {
  background: var(--kta-light-bg-deep) !important;
  color: var(--kta-light-text-muted) !important;
  border-top: 1px solid var(--kta-light-border) !important;
}
body.kta-theme-light .kta-loader-copyright * {
  color: var(--kta-light-text-muted) !important;
}
body.kta-theme-light .kta-loader-copyright strong {
  color: var(--kta-light-text) !important;
}
body.kta-theme-light .kta-loader-copyright a {
  color: var(--kta-light-accent-hover) !important;
}
body.kta-theme-light .kta-loader-copyright-warn {
  color: #8b3a00 !important;
}

/* 🆕 v1.29.2-fix1 — Restaure le jaune accent #f4c542 pour le suffixe
   « -pro » du HEADER du home (.loader-titre-nom). Sans cette règle, le
   sélecteur `body.kta-theme-light #planLoaderBox *` (ligne ~13334)
   force tous les descendants du home en `var(--kta-light-text)` (noir
   muté), ce qui écrasait le jaune #f4c542 défini en §8731+ pour
   .kta-titre-suffix-pro.
   Specificity 0,2,1 (body+id+class) bat la règle générique `*` 0,1,1.
   Le suffixe du SPLASH (#splashTitle) n'est pas dans #planLoaderBox →
   sa règle de §8731 reste prise en compte sans override.
   KARMA a validé : MÊME jaune accent qu'en mode sombre (cohérence
   identité loader/splash, tagline "Cartographie souterraine" est aussi
   en #f4c542). */
body.kta-theme-light #planLoaderBox .kta-titre-suffix-pro {
  color: #f4c542;
}

/* === Cards "Mes plans" / "Récents" / Reprendre / Panel ZIP ===
   🔧 v1.13.0-fix7 : sur fond brun-beige #c9b88f, les cards ressortent
   désormais en blanc-clair #fdf8eb avec bordure plus marquée pour
   bien se détacher du fond. */
body.kta-theme-light #myPlansBox,
body.kta-theme-light #resumeBox,
body.kta-theme-light #panelZip {
  background: var(--kta-light-bg-elevated) !important;
  color: var(--kta-light-text) !important;
  border: 1px solid var(--kta-light-bg-bar-border) !important;
  box-shadow: 0 2px 8px rgba(80, 60, 30, 0.15) !important;
}
body.kta-theme-light #myPlansBox *,
body.kta-theme-light #resumeBox *,
body.kta-theme-light #panelZip * {
  color: var(--kta-light-text);
}
body.kta-theme-light #allPlansList li,
body.kta-theme-light .plan-card {
  background: rgba(0,0,0,0.03) !important;
  border: 1px solid var(--kta-light-border) !important;
  color: var(--kta-light-text) !important;
}
body.kta-theme-light #allPlansList li:hover,
body.kta-theme-light .plan-card:hover {
  background: var(--kta-light-accent-bg) !important;
  border-color: var(--kta-light-accent) !important;
}

/* === Tous les boutons primaires du loader (id="loader…") === */
body.kta-theme-light #loadPlanBtn,
body.kta-theme-light #fsAccessBtn,
body.kta-theme-light #importListBtn,
body.kta-theme-light #exportListBtn,
body.kta-theme-light #loaderPlannerBtn,
body.kta-theme-light #loaderResetBtn,
body.kta-theme-light #loaderForceUpdateBtn,
body.kta-theme-light #loaderAlertBtn,
body.kta-theme-light #loaderHelpBtn,
body.kta-theme-light #loaderConfigBtn,
body.kta-theme-light #loaderNetDocBtn,
body.kta-theme-light #loaderNetLogBtn,
body.kta-theme-light #loaderShowLogsBtn {
  background: var(--kta-light-bg-elevated) !important;
  color: var(--kta-light-text) !important;
  border: 1px solid var(--kta-light-border-strong) !important;
}
body.kta-theme-light #loadPlanBtn:hover,
body.kta-theme-light #fsAccessBtn:hover {
  background: var(--kta-light-accent-bg) !important;
  border-color: var(--kta-light-accent) !important;
}

/* === Drawer perf + sections aide === */
body.kta-theme-light .kta-loader-perf-drawer,
body.kta-theme-light .kta-aide-section {
  background: rgba(0,0,0,0.02);
  border: 1px solid var(--kta-light-border);
}
body.kta-theme-light .kta-loader-perf-drawer-titre,
body.kta-theme-light .kta-aide-section-titre {
  color: var(--kta-light-accent-hover);
}
body.kta-theme-light .kta-loader-perf-hint {
  color: var(--kta-light-text-muted);
}
body.kta-theme-light .kta-perf-btn {
  background: rgba(0,0,0,0.04);
  color: var(--kta-light-text);
  border: 1px solid var(--kta-light-border);
}
body.kta-theme-light .kta-perf-btn:hover {
  background: var(--kta-light-accent-bg);
  border-color: var(--kta-light-accent);
}
body.kta-theme-light .kta-perf-btn.active {
  background: #ffffff;
  border-color: var(--kta-light-accent);
  color: var(--kta-light-text);
  box-shadow: inset 0 0 0 1px var(--kta-light-accent);
}

/* === Toggles checkbox (paranoia / legacy / showInter / themeLight) === */
body.kta-theme-light .kta-net-paranoia-toggle {
  background: rgba(244, 197, 66, 0.06) !important;
  border: 1px solid var(--kta-light-border-strong) !important;
  color: var(--kta-light-text) !important;
}
body.kta-theme-light .kta-net-paranoia-toggle * {
  color: var(--kta-light-text);
}
body.kta-theme-light .kta-net-paranoia-toggle:hover {
  background: rgba(244, 197, 66, 0.12) !important;
  border-color: var(--kta-light-accent) !important;
}

/* === PIN status loader home === */
body.kta-theme-light .kta-loader-pin-status {
  background: rgba(0,0,0,0.04) !important;
  color: var(--kta-light-text) !important;
  border: 1px solid var(--kta-light-border) !important;
}
body.kta-theme-light .kta-loader-pin-status * {
  color: var(--kta-light-text);
}

/* === Modale Configuration home === */
body.kta-theme-light .kta-loader-config-boite {
  background: var(--kta-light-bg-elevated) !important;
  color: var(--kta-light-text) !important;
  border: 1px solid var(--kta-light-border-strong) !important;
}
body.kta-theme-light .kta-loader-config-corps {
  color: var(--kta-light-text) !important;
}
body.kta-theme-light .kta-loader-config-corps * {
  color: var(--kta-light-text);
}
body.kta-theme-light .kta-perf-titre {
  color: var(--kta-light-accent-hover) !important;
}
body.kta-theme-light .kta-perf-desc {
  color: var(--kta-light-text-muted) !important;
}

/* === Modale Audit réseau (NetDoc + NetLog) === */
body.kta-theme-light #loaderNetDocModal .kta-readme-modal-boite,
body.kta-theme-light #loaderNetLogModal .kta-readme-modal-boite {
  background: var(--kta-light-bg-elevated) !important;
  color: var(--kta-light-text) !important;
}
body.kta-theme-light #loaderNetLogTbody tr {
  background: rgba(0,0,0,0.02) !important;
  color: var(--kta-light-text) !important;
}
body.kta-theme-light #loaderNetLogTbody tr:nth-child(even) {
  background: rgba(0,0,0,0.05) !important;
}
body.kta-theme-light #loaderNetLogTbody td {
  border-bottom: 1px solid var(--kta-light-border) !important;
  color: var(--kta-light-text) !important;
}
body.kta-theme-light #loaderNetDocWhitelist {
  background: rgba(0,0,0,0.04) !important;
  color: var(--kta-light-text) !important;
  border: 1px solid var(--kta-light-border) !important;
}
body.kta-theme-light #loaderNetLogMeta {
  color: var(--kta-light-text-muted) !important;
}
body.kta-theme-light #loaderParanoiaBadge {
  background: rgba(220, 50, 50, 0.15) !important;
  color: #b02020 !important;
  border: 1px solid rgba(220, 50, 50, 0.4) !important;
}

/* === Petites modales système (Force update / plan introuvable / yes-no) === */
body.kta-theme-light #kta-fu-cancel,
body.kta-theme-light #kta-fu-ok,
body.kta-theme-light #kta-fu-close,
body.kta-theme-light #ktaYesNoOk,
body.kta-theme-light #ktaYesNoCancel,
body.kta-theme-light #kta-plan-infos-close,
body.kta-theme-light #kta-mode-warn-ok,
body.kta-theme-light #kta-mode-warn-cancel,
body.kta-theme-light #kta-mode-warn-close,
body.kta-theme-light #kta-zipname-error-ok,
body.kta-theme-light #kta-zipname-error-close,
body.kta-theme-light #ktaPinPromptOk,
body.kta-theme-light #ktaPinPromptCancel {
  background: var(--kta-light-bg-elevated) !important;
  color: var(--kta-light-text) !important;
  border: 1px solid var(--kta-light-border-strong) !important;
}

/* === Inputs file (loader) === */
body.kta-theme-light #planLoaderBox input[type="file"] {
  color: var(--kta-light-text);
}
body.kta-theme-light #planLoaderBox input[type="file"]::-webkit-file-upload-button {
  background: var(--kta-light-bg-elevated) !important;
  color: var(--kta-light-text) !important;
  border: 1px solid var(--kta-light-border-strong) !important;
}

/* === Status messages home === */
body.kta-theme-light #loaderStatus,
body.kta-theme-light #kta-load-message {
  color: var(--kta-light-text-muted) !important;
}

/* === Bandeau alerte publique (loaderAlertBtn rouge pulsant) ===
   Volontairement non-modifié : le rouge alerte reste rouge en clair pour
   garder son côté "urgence à voir absolument". */

/* ============================================================================
 * 🔧 v1.13.0-fix5 — MODALES APPEND À documentElement (= <html>)
 * ============================================================================
 * KARMA "tous les modals se chargent en mode sombre" : beaucoup de modales
 * sont créées via `document.documentElement.appendChild(modal)` (= enfant
 * direct de <html>, SIBLING de <body>). Le sélecteur `body.kta-theme-light
 * .modal` ne matche donc JAMAIS car la modale est hors-body.
 *
 * Fix complet :
 *   1. ThemeManager applique la classe sur <html> aussi (cf themeManager.js).
 *   2. Ce bloc redonne TOUS les overrides modales critiques avec sélecteur
 *      `html.kta-theme-light` (= matche la classe sur <html> et trouve les
 *      modales en descendance directe).
 *
 * Les selectors `body.kta-theme-light .*` continuent d'exister pour le
 * contenu intra-body (sidebar, footer, header, plan, etc.) qui reste
 * couvert.
 * ============================================================================ */

html.kta-theme-light .kta-readme-modal-overlay {
  background: rgba(40, 32, 20, 0.55) !important;
}
html.kta-theme-light .kta-readme-modal-overlay .kta-readme-modal-boite {
  background: #fdf8eb !important;
  color: #2a2620 !important;
  border: 1px solid rgba(0,0,0,0.22) !important;
  box-shadow: 0 10px 40px rgba(80,60,30,0.18) !important;
}
html.kta-theme-light .kta-readme-modal-overlay .kta-readme-modal-header {
  background: #e5dcc5 !important;
  border-bottom: 1px solid rgba(0,0,0,0.12) !important;
}
html.kta-theme-light .kta-readme-modal-overlay .kta-readme-modal-titre {
  color: #2a2620 !important;
}
html.kta-theme-light .kta-readme-modal-overlay .kta-readme-modal-corps {
  background: #fdf8eb !important;
  color: #2a2620 !important;
}
html.kta-theme-light .kta-readme-modal-overlay .kta-readme-modal-corps * {
  color: #2a2620 !important;
}
html.kta-theme-light .kta-readme-modal-overlay .kta-readme-modal-corps a {
  color: #d9a82e !important;
}
html.kta-theme-light .kta-readme-modal-overlay .kta-readme-modal-corps code {
  background: rgba(0,0,0,0.06) !important;
  color: #8b3a00 !important;
  border: 1px solid rgba(0,0,0,0.12) !important;
}
html.kta-theme-light .kta-readme-modal-overlay .kta-readme-modal-corps strong,
html.kta-theme-light .kta-readme-modal-overlay .kta-readme-modal-corps h1,
html.kta-theme-light .kta-readme-modal-overlay .kta-readme-modal-corps h2,
html.kta-theme-light .kta-readme-modal-overlay .kta-readme-modal-corps h3,
html.kta-theme-light .kta-readme-modal-overlay .kta-readme-modal-corps h4 {
  color: #1a1612 !important;
}
html.kta-theme-light .kta-readme-modal-overlay .kta-readme-modal-corps em,
html.kta-theme-light .kta-readme-modal-overlay .kta-readme-modal-corps i {
  color: #6b6354 !important;
}
html.kta-theme-light .kta-readme-modal-overlay .kta-readme-modal-corps blockquote {
  background: rgba(244, 197, 66, 0.08) !important;
  border-left: 4px solid #f4c542 !important;
  color: #6b6354 !important;
}
html.kta-theme-light .kta-readme-modal-overlay .kta-readme-modal-corps table th,
html.kta-theme-light .kta-readme-modal-overlay .kta-readme-modal-corps table td {
  border-color: rgba(0,0,0,0.12) !important;
}
html.kta-theme-light .kta-readme-modal-overlay .kta-readme-modal-corps table th {
  background: #e5dcc5 !important;
}
html.kta-theme-light .kta-readme-modal-overlay .kta-readme-modal-corps details {
  background: rgba(0,0,0,0.02) !important;
  border: 1px solid rgba(0,0,0,0.12) !important;
}
html.kta-theme-light .kta-readme-modal-overlay .kta-readme-modal-corps summary {
  background: rgba(244, 197, 66, 0.08) !important;
  color: #2a2620 !important;
}
html.kta-theme-light .kta-readme-modal-overlay .kta-readme-modal-corps summary:hover {
  background: rgba(244, 197, 66, 0.22) !important;
}
html.kta-theme-light .kta-readme-modal-overlay .kta-panneau-close {
  background: rgba(0,0,0,0.05) !important;
  color: #2a2620 !important;
  border: 1px solid rgba(0,0,0,0.12) !important;
}
html.kta-theme-light .kta-readme-modal-overlay .kta-panneau-close:hover {
  background: rgba(220, 50, 50, 0.15) !important;
  border-color: rgba(220, 50, 50, 0.5) !important;
  color: #b02020 !important;
}
html.kta-theme-light .kta-readme-modal-overlay input[type="text"],
html.kta-theme-light .kta-readme-modal-overlay input[type="number"],
html.kta-theme-light .kta-readme-modal-overlay input[type="search"],
html.kta-theme-light .kta-readme-modal-overlay input[type="password"],
html.kta-theme-light .kta-readme-modal-overlay select,
html.kta-theme-light .kta-readme-modal-overlay textarea {
  background: #fff !important;
  color: #2a2620 !important;
  border: 1px solid rgba(0,0,0,0.22) !important;
}
html.kta-theme-light .kta-readme-modal-overlay input:focus,
html.kta-theme-light .kta-readme-modal-overlay select:focus,
html.kta-theme-light .kta-readme-modal-overlay textarea:focus {
  border-color: #f4c542 !important;
  outline: none !important;
  box-shadow: 0 0 0 2px rgba(244, 197, 66, 0.25) !important;
}

/* === Sommaire / TOC des modales Doc/Aide (kta-readme-toc-*) ===
   🔧 v1.13.0-fix9 (KARMA "pb de sommaire, dans les sous menu mes plans
   il faut intégrer ça mieux, moins contraste, on doit mieux voir la
   séparation entre les différents plans dans la liste telle que on le
   voyait avant en sombre") : mes catch-all `.kta-readme-modal-corps *
   { color: ... !important }` écrasaient les nuances hiérarchiques du
   sommaire (H2 bold / H3 muted / bullet subtil / border-left). Du coup
   tout devenait noir uniforme — perte totale de la lisibilité.

   Solution : règles dédiées avec sélecteur plus spécifique
   (`html.kta-theme-light .kta-readme-toc-*`) qui battent le catch-all
   et restaurent la hiérarchie visuelle, adaptée au fond clair :
     - H2 = texte foncé bold #2a2620 (titre de section)
     - H3 = texte muted #6b6354 (sous-items, ex: "Mes plans" → items)
     - Bullet = ocre subtle #8b7c5a (puce discrète)
     - Border-left sublist = trait ocre clair, visible sur fond clair
     - Hover = teint jaune léger
     - Active = jaune charte + bold */
html.kta-theme-light .kta-readme-modal-overlay .kta-readme-toc-row {
  /* Reset le catch-all et redéfinit le fond/texte directement */
  background: transparent !important;
}
html.kta-theme-light .kta-readme-modal-overlay .kta-readme-toc-row:hover {
  background: rgba(244, 197, 66, 0.08) !important;
}
html.kta-theme-light .kta-readme-modal-overlay .kta-readme-toc-row:has(.kta-readme-toc-link.active) {
  background: rgba(244, 197, 66, 0.18) !important;
}
/* H2 = titres de section (Premiers pas, Mes plans, etc.) */
html.kta-theme-light .kta-readme-modal-overlay .kta-readme-toc-link {
  color: #2a2620 !important;
  font-weight: 500 !important;
}
html.kta-theme-light .kta-readme-modal-overlay .kta-readme-toc-link-h2 {
  font-weight: 700 !important;
  color: #1a1612 !important;
}
html.kta-theme-light .kta-readme-modal-overlay .kta-readme-toc-link:hover {
  color: #1a1612 !important;
}
html.kta-theme-light .kta-readme-modal-overlay .kta-readme-toc-link.active {
  color: #8b5a00 !important;
  font-weight: 700 !important;
}
/* H3 = sous-items (genre les plans dans "Mes plans") — muted, plus aéré */
html.kta-theme-light .kta-readme-modal-overlay .kta-readme-toc-link-h3 {
  color: #6b6354 !important;
  font-weight: 400 !important;
  border-radius: 4px !important;
}
html.kta-theme-light .kta-readme-modal-overlay .kta-readme-toc-link-h3:hover {
  background: rgba(244, 197, 66, 0.08) !important;
  color: #2a2620 !important;
}
html.kta-theme-light .kta-readme-modal-overlay .kta-readme-toc-link-h3.active {
  background: rgba(244, 197, 66, 0.22) !important;
  color: #8b5a00 !important;
  font-weight: 600 !important;
}
/* Border-left de la sous-liste H3 — trait ocre visible sur fond clair */
html.kta-theme-light .kta-readme-modal-overlay .kta-readme-toc-sublist {
  border-left: 1px solid rgba(154, 135, 84, 0.4) !important;
}
/* Bullet (puce H2) — couleur subtile pour différencier du texte */
html.kta-theme-light .kta-readme-modal-overlay .kta-readme-toc-bullet {
  color: #8b7c5a !important;
}
/* Toggle ▾ (chevron pour replier) */
html.kta-theme-light .kta-readme-modal-overlay .kta-readme-toc-toggle {
  color: #8b7c5a !important;
}
html.kta-theme-light .kta-readme-modal-overlay .kta-readme-toc-toggle:hover {
  color: #2a2620 !important;
}
/* Séparation visuelle subtile entre items H2 — border-bottom très léger
   pour aérer la lecture, comme on l'avait en sombre */
html.kta-theme-light .kta-readme-modal-overlay .kta-readme-toc-item > .kta-readme-toc-row {
  border-bottom: 1px solid rgba(154, 135, 84, 0.15) !important;
}
html.kta-theme-light .kta-readme-modal-overlay .kta-readme-toc-item:last-child > .kta-readme-toc-row {
  border-bottom: none !important;
}
/* Sous-items H3 : pas de border-bottom (on garde le border-left de la
   sublist comme indicateur de hiérarchie) */
html.kta-theme-light .kta-readme-modal-overlay .kta-readme-toc-sublist li > .kta-readme-toc-link-h3 {
  border-bottom: none !important;
}

/* ============================================================================
 * 🔧 v1.13.0-fix10 — BOUTONS .kta-btn-* + MODALE UPDATE + ALERTES
 * ============================================================================
 * KARMA "les boutons des modal en mode clair s'affiche moin bien, il
 * fonctionne mais bizarre graphiquement, pas de contraste, revoit le
 * CSS, et le modal de mise a jours call depuis le footer s'affiche en
 * sombre. controle aussi les alerts."
 *
 * 3 zones à reprendre :
 *
 *   1. Boutons modales (.kta-btn-*) — overrides précédents incomplets :
 *      .kta-btn-ghost et .kta-btn-link non couverts → restent dark.
 *
 *   2. Modale Update (#kta-update-modal) — inline styles dans le HTML
 *      generated par afficherModaleUpdateDispo : background:rgba(140,180,
 *      255,0.06) pour bloc versions + couleurs hardcodées #8892a4, #c8d0e0,
 *      #8cb4ff, #f4c542 sur les span enfants. Mes catch-all couvrent text
 *      mais PAS les backgrounds inline (qui battent CSS sans !important).
 *
 *   3. Alertes (.kta-alert-*) — emergency rouge volontairement DRAMATIQUE
 *      (focus max). Garde le rouge même en clair MAIS adapte la lisibilité
 *      du msg/details qui ont des couleurs trop muted (ffe4d4, c8d0e0).
 *      .kta-alert-absent-* (modale "Aucune alerte") = mode plus neutre,
 *      doit suivre le thème clair.
 * ============================================================================ */

/* === Boutons .kta-btn-* === */
html.kta-theme-light .kta-btn {
  background: #fdf8eb !important;
  color: #2a2620 !important;
  border: 1px solid rgba(0,0,0,0.22) !important;
}
html.kta-theme-light .kta-btn:hover {
  background: rgba(244, 197, 66, 0.18) !important;
  border-color: #f4c542 !important;
  color: #1a1612 !important;
}
html.kta-theme-light .kta-btn-primary {
  background: #f4c542 !important;
  color: #2a2620 !important;
  border: 1px solid #d9a82e !important;
  font-weight: 600 !important;
}
html.kta-theme-light .kta-btn-primary:hover {
  background: #d9a82e !important;
  color: #1a1612 !important;
}
html.kta-theme-light .kta-btn-secondary {
  background: #fdf8eb !important;
  color: #2a2620 !important;
  border: 1px solid rgba(0,0,0,0.22) !important;
}
html.kta-theme-light .kta-btn-secondary:hover {
  background: rgba(244, 197, 66, 0.15) !important;
  border-color: #f4c542 !important;
}
/* Ghost = transparent avec bordure, souvent pour "Annuler" ou "Plus tard" */
html.kta-theme-light .kta-btn-ghost {
  background: rgba(0, 0, 0, 0.04) !important;
  color: #6b6354 !important;
  border: 1px solid rgba(0, 0, 0, 0.18) !important;
}
html.kta-theme-light .kta-btn-ghost:hover {
  background: rgba(0, 0, 0, 0.08) !important;
  color: #2a2620 !important;
  border-color: rgba(0, 0, 0, 0.30) !important;
}
/* Link = bouton ressemblant à un lien texte, souvent pour actions
   secondaires / dangereuses ("Forcer un reset complet à la place") */
html.kta-theme-light .kta-btn-link {
  background: transparent !important;
  color: #d9a82e !important;
  border: none !important;
  text-decoration: underline !important;
}
html.kta-theme-light .kta-btn-link:hover {
  color: #8b5a00 !important;
}
/* Variante danger (Reset complet) */
html.kta-theme-light .kta-btn.kta-btn-danger,
html.kta-theme-light .kta-btn-secondary.kta-btn-danger {
  background: rgba(220, 50, 50, 0.10) !important;
  color: #b02020 !important;
  border: 1px solid rgba(220, 50, 50, 0.45) !important;
}
html.kta-theme-light .kta-btn.kta-btn-danger:hover,
html.kta-theme-light .kta-btn-secondary.kta-btn-danger:hover {
  background: rgba(220, 50, 50, 0.20) !important;
}
/* Lien-danger spécifique update modal */
html.kta-theme-light .kta-update-link-danger {
  color: #b02020 !important;
}
html.kta-theme-light .kta-update-link-danger:hover {
  color: #8a1818 !important;
}

/* === Modale UPDATE (#kta-update-modal) — override des inline styles ===
   Les inline styles dans le HTML d'afficherModaleUpdateDispo utilisent des
   backgrounds en rgba(140,180,255,0.06) et des couleurs dark (#8892a4,
   #c8d0e0, #8cb4ff). On les remplace ciblé. Note : style="" inline est
   battu par notre selector ID + !important (cascade origin author
   important > inline non-important). */
html.kta-theme-light #kta-update-modal .kta-readme-modal-corps {
  background: #fdf8eb !important;
  color: #2a2620 !important;
}
/* Bloc des 2 versions (Installée → Disponible) */
html.kta-theme-light #kta-update-modal .kta-aide-section > div[style*="rgba(140,180,255"] {
  background: rgba(244, 197, 66, 0.10) !important;
  border: 1px solid rgba(244, 197, 66, 0.35) !important;
}
html.kta-theme-light #kta-update-modal .kta-aide-section > div[style*="rgba(140,180,255"] > div {
  color: #6b6354 !important;
}
html.kta-theme-light #kta-update-modal .kta-aide-section > div[style*="rgba(140,180,255"] > div strong {
  color: #2a2620 !important;
}
/* La flèche centrale "→" */
html.kta-theme-light #kta-update-modal .kta-aide-section > div[style*="rgba(140,180,255"] > div[style*="font-size:20px"] {
  color: #d9a82e !important;
}
/* Bloc "Mise à jour douce (recommandée)" — vert kept mais texte clair */
html.kta-theme-light #kta-update-modal div[style*="rgba(108,226,138"] {
  background: rgba(46, 139, 87, 0.12) !important;
  border-color: rgba(46, 139, 87, 0.40) !important;
}
html.kta-theme-light #kta-update-modal div[style*="rgba(108,226,138"] > div[style*="font-weight:700"] {
  color: #1f6b3a !important;
}
html.kta-theme-light #kta-update-modal div[style*="rgba(108,226,138"] > div:not([style*="font-weight"]) {
  color: #2a2620 !important;
}
/* Bloc "Reset complet" — rouge kept */
html.kta-theme-light #kta-update-modal div[style*="rgba(255,107,107"] {
  background: rgba(220, 50, 50, 0.08) !important;
  border-color: rgba(220, 50, 50, 0.35) !important;
}
html.kta-theme-light #kta-update-modal div[style*="rgba(255,107,107"] > div[style*="font-weight:700"] {
  color: #b02020 !important;
}
html.kta-theme-light #kta-update-modal div[style*="rgba(255,107,107"] > div:not([style*="font-weight"]) {
  color: #2a2620 !important;
}

/* === Alertes publiques === */
/* Alerte EMERGENCY (rouge dramatique) — garde le ton rouge même en clair
   car c'est volontaire pour focus max. Mais le msg + details doivent
   rester lisibles. */
html.kta-theme-light .kta-alert-overlay {
  background: rgba(40, 32, 20, 0.85) !important;
}
html.kta-theme-light .kta-alert-boite {
  background: #fdf8eb !important;
  border: 2px solid #c0392b !important;
  color: #2a2620 !important;
}
html.kta-theme-light .kta-alert-header {
  background: linear-gradient(135deg, rgba(220, 50, 50, 0.22), rgba(220, 50, 50, 0.08)) !important;
  border-bottom: 1px solid rgba(220, 50, 50, 0.50) !important;
}
html.kta-theme-light .kta-alert-title-text {
  color: #8a1818 !important;
  text-shadow: 0 0 6px rgba(220, 50, 50, 0.30) !important;
}
html.kta-theme-light .kta-alert-pulse-side {
  color: #c0392b !important;
  text-shadow: 0 0 8px rgba(220, 50, 50, 0.50) !important;
}
html.kta-theme-light .kta-alert-msg {
  color: #2a2620 !important;
  font-weight: 500 !important;
}
html.kta-theme-light .kta-alert-details {
  color: #4a3f30 !important;
}
html.kta-theme-light .kta-alert-released {
  color: #6b6354 !important;
  border-top: 1px solid rgba(0, 0, 0, 0.12) !important;
}
html.kta-theme-light .kta-alert-btn-ok {
  background: #c0392b !important;
  border: 1px solid #8a1818 !important;
  color: #fff !important;
}
html.kta-theme-light .kta-alert-btn-ok:hover {
  background: #a82e22 !important;
}
/* Variantes warning (orange) + info (bleu) */
html.kta-theme-light .kta-alert-overlay.kta-alert-level-warning .kta-alert-boite {
  border-color: #d97a1c !important;
}
html.kta-theme-light .kta-alert-overlay.kta-alert-level-warning .kta-alert-header {
  background: linear-gradient(135deg, rgba(217, 122, 28, 0.22), rgba(217, 122, 28, 0.08)) !important;
  border-bottom: 1px solid rgba(217, 122, 28, 0.50) !important;
}
html.kta-theme-light .kta-alert-overlay.kta-alert-level-warning .kta-alert-title-text {
  color: #8b4a0c !important;
}
html.kta-theme-light .kta-alert-overlay.kta-alert-level-info .kta-alert-boite {
  border-color: #0a4f6b !important;
}
html.kta-theme-light .kta-alert-overlay.kta-alert-level-info .kta-alert-header {
  background: linear-gradient(135deg, rgba(10, 79, 107, 0.20), rgba(10, 79, 107, 0.08)) !important;
  border-bottom: 1px solid rgba(10, 79, 107, 0.50) !important;
}
html.kta-theme-light .kta-alert-overlay.kta-alert-level-info .kta-alert-title-text {
  color: #0a4f6b !important;
}

/* Alerte ABSENTE ("✅ Aucune alerte en cours" / offline) — modale neutre,
   doit suivre le thème clair sans drama rouge */
html.kta-theme-light .kta-alert-absent-overlay {
  background: rgba(40, 32, 20, 0.55) !important;
}
html.kta-theme-light .kta-alert-absent-boite {
  background: #fdf8eb !important;
  color: #2a2620 !important;
  border: 1px solid rgba(0, 0, 0, 0.22) !important;
  box-shadow: 0 10px 40px rgba(80, 60, 30, 0.18) !important;
}
html.kta-theme-light .kta-alert-absent-header {
  background: #e5dcc5 !important;
  border-bottom: 1px solid rgba(0, 0, 0, 0.12) !important;
}
html.kta-theme-light .kta-alert-absent-icon {
  color: #2a2620 !important;
}
html.kta-theme-light .kta-alert-absent-title {
  color: #2a2620 !important;
}
html.kta-theme-light .kta-alert-absent-msg {
  color: #2a2620 !important;
}
html.kta-theme-light .kta-alert-absent-msg strong {
  color: #1a1612 !important;
}
html.kta-theme-light .kta-alert-absent-version-block {
  background: rgba(244, 197, 66, 0.10) !important;
  border: 1px solid rgba(244, 197, 66, 0.35) !important;
}
html.kta-theme-light .kta-alert-absent-version-released {
  color: #6b6354 !important;
}
html.kta-theme-light .kta-alert-absent-version-released strong {
  color: #2a2620 !important;
}
html.kta-theme-light .kta-alert-absent-version-notes-titre {
  color: #d9a82e !important;
}
html.kta-theme-light .kta-alert-absent-version-notes {
  color: #2a2620 !important;
}
html.kta-theme-light .kta-alert-absent-version-notes li {
  color: #4a3f30 !important;
}

/* Modale sélecteur d'alertes (cascade plusieurs alertes) */
html.kta-theme-light #kta-alert-selector-modal,
html.kta-theme-light .kta-alert-selector-row {
  background: #fdf8eb !important;
  color: #2a2620 !important;
  border-color: rgba(0, 0, 0, 0.12) !important;
}
html.kta-theme-light .kta-alert-selector-row:hover {
  background: rgba(244, 197, 66, 0.10) !important;
}
html.kta-theme-light .kta-alert-selector-row-emergency {
  border-left: 4px solid #c0392b !important;
}
html.kta-theme-light .kta-alert-selector-row-warning {
  border-left: 4px solid #d97a1c !important;
}
html.kta-theme-light .kta-alert-selector-row-info {
  border-left: 4px solid #0a4f6b !important;
}
html.kta-theme-light .kta-alert-selector-row-seen {
  opacity: 0.65 !important;
}

/* Modale charte communautaire au boot (#kta-alert-charte) */
html.kta-theme-light #kta-alert-charte {
  background: rgba(40, 32, 20, 0.85) !important;
}

/* ============================================================================
 * 🔧 v1.13.0-fix11 — PLAN SWITCHER (clic titre) + SPLASH chargement plan
 * ============================================================================
 * KARMA "le bouton qui permet de lister les plans en mode carte quand
 * on clique sur le titre, est en sombre, pareil pour le module quand
 * le plan est en train de se charger quand on le lance depuis le home"
 *
 * 2 zones à couvrir :
 *
 *   1. Plan switcher (modale qui apparait au clic sur le titre du plan
 *      dans le header mode carte) : J'avais fait des overrides sur la
 *      classe .kta-refonte-plan-switch-* (préfixe "refonte") qui N'EXISTE
 *      PAS. Les vraies classes sont .kta-plan-switcher-* (sans le refonte).
 *
 *   2. Splash KARMA (#splashOverlay) affiché pendant le chargement d'un
 *      plan depuis la home : j'avais décidé de le garder en dark (cinéma-
 *      tique) mais KARMA veut qu'il respecte le thème clair.
 * ============================================================================ */

/* === PLAN SWITCHER (clic titre header mode carte) === */
html.kta-theme-light .kta-plan-switcher-overlay {
  background: rgba(40, 32, 20, 0.55) !important;
}
html.kta-theme-light .kta-plan-switcher-modal-boite {
  background: #fdf8eb !important;
  color: #2a2620 !important;
  border: 1px solid rgba(0, 0, 0, 0.22) !important;
  box-shadow: 0 10px 40px rgba(80, 60, 30, 0.18) !important;
}
html.kta-theme-light .kta-plan-switcher-modal-header {
  background: #e5dcc5 !important;
  border-bottom: 1px solid rgba(0, 0, 0, 0.12) !important;
}
html.kta-theme-light .kta-plan-switcher-modal-titre {
  color: #2a2620 !important;
}
html.kta-theme-light .kta-plan-switcher-modal-corps {
  background: #fdf8eb !important;
  color: #2a2620 !important;
}
/* Bloc plan en cours (current) — jaune charte */
html.kta-theme-light .kta-plan-switcher-current {
  background: rgba(244, 197, 66, 0.18) !important;
  border: 1px solid rgba(244, 197, 66, 0.45) !important;
}
html.kta-theme-light .kta-plan-switcher-current-label {
  color: #8b5a00 !important;
}
html.kta-theme-light .kta-plan-switcher-current-name {
  color: #1a1612 !important;
}
html.kta-theme-light .kta-plan-switcher-current-icon {
  color: #8b5a00 !important;
}
html.kta-theme-light .kta-plan-switcher-current-sub {
  color: #6b6354 !important;
}
/* Titres de section "📚 Plans récents" / etc */
html.kta-theme-light .kta-plan-switcher-section-titre {
  color: #d9a82e !important;
  border-bottom: 1px solid rgba(0, 0, 0, 0.12) !important;
}
/* Lignes plans récents */
html.kta-theme-light .kta-plan-switcher-modal-boite .kta-switcher-row {
  background: rgba(0, 0, 0, 0.03) !important;
  color: #2a2620 !important;
  border: 1px solid rgba(0, 0, 0, 0.12) !important;
}
html.kta-theme-light .kta-plan-switcher-modal-boite .kta-switcher-row:hover,
html.kta-theme-light .kta-plan-switcher-modal-boite .kta-switcher-row:focus-visible {
  background: rgba(244, 197, 66, 0.15) !important;
  border-color: rgba(244, 197, 66, 0.45) !important;
}
html.kta-theme-light .kta-plan-switcher-modal-boite .kta-switcher-icon {
  color: #2a2620 !important;
}
html.kta-theme-light .kta-plan-switcher-modal-boite .kta-switcher-name {
  color: #2a2620 !important;
}
html.kta-theme-light .kta-plan-switcher-modal-boite .kta-switcher-sub {
  color: #6b6354 !important;
}
html.kta-theme-light .kta-plan-switcher-modal-boite .kta-switcher-row-arrow {
  color: #d9a82e !important;
}
html.kta-theme-light .kta-plan-switcher-modal-boite .kta-switcher-empty {
  color: #6b6354 !important;
}
/* Footer + CTA "📚 Voir tous mes plans" */
html.kta-theme-light .kta-plan-switcher-modal-footer {
  background: #e5dcc5 !important;
  border-top: 1px solid rgba(0, 0, 0, 0.12) !important;
}
html.kta-theme-light .kta-plan-switcher-cta {
  background: #f4c542 !important;
  color: #2a2620 !important;
  border: 1px solid #d9a82e !important;
  font-weight: 600 !important;
}
html.kta-theme-light .kta-plan-switcher-cta:hover,
html.kta-theme-light .kta-plan-switcher-cta:focus-visible {
  background: #d9a82e !important;
  color: #1a1612 !important;
}

/* === SPLASH (chargement plan, #splashOverlay) ===
   KARMA "pareil pour le module quand le plan est en train de se charger
   quand on le lance depuis le home". Le splash original (radial-gradient
   noir) est remplacé en mode clair par un gradient beige-ocre cohérent
   avec le reste de l'app, tout en gardant l'identité KARMA (titre jaune
   charte, animations cinématiques inchangées). */
html.kta-theme-light #splashOverlay {
  background: radial-gradient(ellipse at center, #f0e8d8 0%, #c9b88f 100%) !important;
}
html.kta-theme-light #splashTitle {
  color: #8b5a00 !important;
  text-shadow: 0 2px 18px rgba(244, 197, 66, 0.45) !important;
}
html.kta-theme-light #splashSubtitle {
  color: #6b6354 !important;
}
/* 🆕 v1.47.0 — Arc de chargement : doré charte trop clair sur fond beige →
   doré sombre (darkgoldenrod) pour le contraste. Crédit Claude « clay » +
   version : assombris pour rester lisibles sur le thème clair. */
html.kta-theme-light #splashSpinArc circle {
  stroke: #b8860b !important;
  opacity: 0.9 !important;
}
html.kta-theme-light .splash-claude-mark,
html.kta-theme-light .splash-claude-main {
  color: #c15f3f !important;
}
html.kta-theme-light .splash-claude-sub {
  color: #6b6354 !important;
}
html.kta-theme-light #splashVersion {
  color: #6b6354 !important;
}
html.kta-theme-light #splashLicense {
  color: #6b6354 !important;
}
html.kta-theme-light .splash-license-detail {
  color: #8a8270 !important;
}
/* Crédits libs en bas du splash */
html.kta-theme-light #splashCredits,
html.kta-theme-light .splash-credits {
  color: #6b6354 !important;
}

/* ============================================================================
 * 🔧 v1.13.0-fix12 — UNLOCK GATE + PIN GATE + PIN PROPOSAL
 * ============================================================================
 * KARMA "pareil pour le modal pour enrengistrer un mdp, et pour le saisir
 * a la relance" :
 *
 *   - "saisir un mdp à la relance" = #kta-unlock-overlay (barrière commu-
 *     nautaire au boot, code d'accès) OU .kta-pin-gate-overlay (PIN local
 *     post-installation)
 *   - "enregistrer un mdp" = .kta-pin-proposal-boite (modale qui propose
 *     l'activation du PIN après une mise à jour)
 *
 * Toutes ces couches sont au-dessus du splash, en pleine charte sombre.
 * On les bascule en clair tout en gardant l'identité (jaune charte,
 * accent rouge pour le lockout/erreur).
 * ============================================================================ */

/* === UNLOCK GATE (barrière communautaire au boot) === */
html.kta-theme-light #kta-unlock-overlay {
  background: linear-gradient(135deg, #f0e8d8 0%, #c9b88f 100%) !important;
}
html.kta-theme-light .kta-unlock-box {
  background: #fdf8eb !important;
  color: #2a2620 !important;
  border: 2px solid rgba(244, 197, 66, 0.55) !important;
  box-shadow: 0 8px 40px rgba(80, 60, 30, 0.25) !important;
}
html.kta-theme-light .kta-unlock-icon {
  /* L'icône 🗝️ reste émoji natif, juste s'assurer qu'elle est visible */
  color: #8b5a00 !important;
}
html.kta-theme-light .kta-unlock-titre {
  color: #1a1612 !important;
}
html.kta-theme-light .kta-unlock-info {
  color: #4a3f30 !important;
}
html.kta-theme-light .kta-unlock-info a {
  color: #d9a82e !important;
}
html.kta-theme-light .kta-unlock-info a:hover {
  color: #8b5a00 !important;
}
html.kta-theme-light #kta-unlock-input {
  background: #ffffff !important;
  color: #2a2620 !important;
  border: 1px solid rgba(0, 0, 0, 0.22) !important;
}
html.kta-theme-light #kta-unlock-input:focus {
  border-color: #f4c542 !important;
  box-shadow: 0 0 0 2px rgba(244, 197, 66, 0.25) !important;
  outline: none !important;
}
html.kta-theme-light #kta-unlock-btn {
  background: #f4c542 !important;
  color: #2a2620 !important;
  border: 1px solid #d9a82e !important;
  font-weight: 600 !important;
}
html.kta-theme-light #kta-unlock-btn:hover {
  background: #d9a82e !important;
  color: #1a1612 !important;
}
html.kta-theme-light .kta-unlock-error {
  color: #b02020 !important;
  background: rgba(220, 50, 50, 0.10) !important;
  border: 1px solid rgba(220, 50, 50, 0.30) !important;
}
html.kta-theme-light .kta-unlock-success {
  color: #1f6b3a !important;
  background: rgba(46, 139, 87, 0.10) !important;
  border: 1px solid rgba(46, 139, 87, 0.30) !important;
}
html.kta-theme-light .kta-unlock-warn {
  color: #8b4a0c !important;
  background: rgba(217, 122, 28, 0.10) !important;
  border: 1px solid rgba(217, 122, 28, 0.30) !important;
}
html.kta-theme-light .kta-unlock-lockout {
  color: #b02020 !important;
}
html.kta-theme-light .kta-unlock-lockout-titre {
  color: #b02020 !important;
}
html.kta-theme-light .kta-unlock-lockout-msg {
  color: #4a3f30 !important;
}
html.kta-theme-light .kta-unlock-lockout-hint {
  color: #6b6354 !important;
}
html.kta-theme-light .kta-unlock-signature {
  color: #6b6354 !important;
}

/* 🆕 v1.28.5 — Variant thème clair de la section "ou importer une licence". */
html.kta-theme-light .kta-unlock-separator-line {
  background: rgba(0, 0, 0, 0.12) !important;
}
html.kta-theme-light .kta-unlock-separator-text {
  color: #6b6354 !important;
}
html.kta-theme-light .kta-unlock-licence-info {
  color: #4a3f30 !important;
}
html.kta-theme-light .kta-unlock-licence-info strong {
  color: #b8860b !important;
}
html.kta-theme-light .kta-unlock-licence-btn {
  background: rgba(184, 134, 11, 0.10) !important;
  color: #b8860b !important;
  border-color: rgba(184, 134, 11, 0.42) !important;
}
html.kta-theme-light .kta-unlock-licence-btn:hover {
  background: rgba(184, 134, 11, 0.18) !important;
  border-color: rgba(184, 134, 11, 0.65) !important;
}

/* === PIN GATE (saisie PIN au boot quand activé) === */
html.kta-theme-light .kta-pin-gate-overlay {
  background: linear-gradient(135deg, #f0e8d8 0%, #c9b88f 100%) !important;
}
html.kta-theme-light .kta-pin-gate-box {
  background: #fdf8eb !important;
  color: #2a2620 !important;
  border: 2px solid rgba(244, 197, 66, 0.55) !important;
  box-shadow: 0 8px 40px rgba(80, 60, 30, 0.25) !important;
}
html.kta-theme-light .kta-pin-gate-icon {
  color: #8b5a00 !important;
}
html.kta-theme-light .kta-pin-gate-titre {
  color: #1a1612 !important;
}
html.kta-theme-light .kta-pin-gate-soustitre {
  color: #4a3f30 !important;
}
html.kta-theme-light .kta-pin-gate-dots {
  /* le conteneur des dots — pas de background spécifique */
}
html.kta-theme-light .kta-pin-dot {
  background: rgba(0, 0, 0, 0.06) !important;
  border: 1px solid rgba(0, 0, 0, 0.22) !important;
  color: #2a2620 !important;
}
html.kta-theme-light .kta-pin-dot-filled {
  background: #f4c542 !important;
  border-color: #d9a82e !important;
  color: #2a2620 !important;
}
html.kta-theme-light .kta-pin-dot-visible {
  color: #2a2620 !important;
  font-weight: 700 !important;
}
html.kta-theme-light .kta-pin-gate-err {
  color: #b02020 !important;
}
html.kta-theme-light .kta-pin-gate-attempts {
  color: #6b6354 !important;
}
html.kta-theme-light .kta-pin-gate-attempts-warn {
  color: #8b4a0c !important;
}
/* Touches du keypad */
html.kta-theme-light .kta-pin-gate-key {
  background: #fdf8eb !important;
  color: #2a2620 !important;
  border: 1px solid rgba(0, 0, 0, 0.22) !important;
}
html.kta-theme-light .kta-pin-gate-key:hover {
  background: rgba(244, 197, 66, 0.18) !important;
  border-color: #f4c542 !important;
}
html.kta-theme-light .kta-pin-gate-key:active {
  background: rgba(244, 197, 66, 0.30) !important;
}
html.kta-theme-light .kta-pin-gate-key-empty {
  background: transparent !important;
  border: none !important;
}
html.kta-theme-light .kta-pin-gate-key-erase {
  background: rgba(220, 50, 50, 0.08) !important;
  color: #b02020 !important;
  border-color: rgba(220, 50, 50, 0.30) !important;
}
html.kta-theme-light .kta-pin-gate-key-erase:hover {
  background: rgba(220, 50, 50, 0.18) !important;
  border-color: rgba(220, 50, 50, 0.50) !important;
}
html.kta-theme-light .kta-pin-gate-key-validate {
  background: #f4c542 !important;
  color: #2a2620 !important;
  border-color: #d9a82e !important;
  font-weight: 700 !important;
}
html.kta-theme-light .kta-pin-gate-key-validate:hover:not(:disabled) {
  background: #d9a82e !important;
  color: #1a1612 !important;
}
html.kta-theme-light .kta-pin-gate-key-validate:disabled {
  background: rgba(0, 0, 0, 0.05) !important;
  color: #8a8270 !important;
  border-color: rgba(0, 0, 0, 0.15) !important;
  opacity: 0.55 !important;
}
/* Bouton biométrie (Face ID / Touch ID) */
html.kta-theme-light .kta-pin-gate-bio-btn {
  background: #fdf8eb !important;
  color: #2a2620 !important;
  border: 1px solid rgba(244, 197, 66, 0.45) !important;
}
html.kta-theme-light .kta-pin-gate-bio-btn:hover {
  background: rgba(244, 197, 66, 0.18) !important;
  border-color: #d9a82e !important;
}
html.kta-theme-light .kta-pin-gate-bio-btn:active {
  background: rgba(244, 197, 66, 0.30) !important;
}
/* Lockout (5 tentatives ratées) */
html.kta-theme-light .kta-pin-gate-overlay-lockout {
  background: linear-gradient(135deg, #f5e0d5 0%, #d8a89a 100%) !important;
}
html.kta-theme-light .kta-pin-gate-box-lockout {
  background: #fdf8eb !important;
  border: 2px solid #c0392b !important;
}
html.kta-theme-light .kta-pin-gate-box-lockout .kta-pin-gate-titre {
  color: #b02020 !important;
}
html.kta-theme-light .kta-pin-gate-lockout-explication {
  background: rgba(220, 50, 50, 0.08) !important;
  border: 1px solid rgba(220, 50, 50, 0.30) !important;
  color: #4a3f30 !important;
}
html.kta-theme-light .kta-pin-gate-lockout-explication p {
  color: #4a3f30 !important;
}

/* ============================================================================
 * 🔧 v1.13.0-fix13 — INTÉGRATION HOME EN MODE CLAIR (cards arrondies)
 * ============================================================================
 * KARMA "peux tu arrondir les différentes box Mes plans / Ajouter un
 * plan, améliorer l'intégration mode light".
 *
 * Layout home en clair : 2 boxes principales sur le grid (Mes plans à
 * gauche, Ajouter un plan à droite). Avant ce fix, elles n'avaient pas
 * de border-radius ni de border claire — visuellement plates sur le
 * fond brun-beige.
 *
 * Solution :
 *   1. #myPlansBox = box complète (wrapper déjà existant qui contient
 *      header + filtres + liste) → border-radius 14px + bordure ocre
 *      douce + padding + ombre
 *   2. Couple .loader-section-head ("Ajouter un plan") + .loader-panel
 *      #panelZip = fusionnés visuellement en 1 card unique. Head a
 *      border-radius top, panel a border-radius bottom, séparation
 *      interne via border 1px léger.
 *   3. .zip-drop-zone (drop zone interne) : style harmonisé sur fond
 *      blanc cassé + bordure pointillée ocre claire.
 *   4. Bouton "Charger ce plan" + "Générer un plan" + "Reprendre" :
 *      arrondis cohérents avec les cards.
 * ============================================================================ */

/* === Card "Mes plans" === */
html.kta-theme-light #myPlansBox {
  background: #fdf8eb !important;
  border: 1px solid rgba(154, 135, 84, 0.35) !important;
  border-radius: 14px !important;
  padding: 14px 18px 16px !important;
  margin-bottom: 14px !important;
  box-shadow: 0 4px 14px rgba(80, 60, 30, 0.10) !important;
}
/* Le header interne de myPlansBox : transparent (puisque la box parent
   a déjà son fond), juste bordure-bottom pour séparer du contenu. */
html.kta-theme-light #myPlansBox .loader-section-head {
  background: transparent !important;
  border: none !important;
  border-bottom: 1px solid rgba(154, 135, 84, 0.18) !important;
  border-radius: 0 !important;
  padding: 2px 0 10px 0 !important;
  margin: 0 0 10px 0 !important;
  color: #2a2620 !important;
  font-size: 14px !important;
  font-weight: 700 !important;
}

/* === Card "Ajouter un plan" = section-head + panel fusionnés === */
/* Le head devient le titre du card (haut arrondi) */
html.kta-theme-light .loader-col-actions > .loader-section-head {
  background: #fdf8eb !important;
  border: 1px solid rgba(154, 135, 84, 0.35) !important;
  border-bottom: 1px solid rgba(154, 135, 84, 0.18) !important;
  border-radius: 14px 14px 0 0 !important;
  padding: 12px 18px !important;
  margin: 0 !important;
  color: #2a2620 !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  box-shadow: 0 -1px 0 0 transparent !important;  /* reset pour éviter conflicts */
}
/* Le panel qui suit (panelZip) devient le corps du card (bas arrondi) */
html.kta-theme-light .loader-col-actions > .loader-panel {
  background: #fdf8eb !important;
  border: 1px solid rgba(154, 135, 84, 0.35) !important;
  border-top: none !important;  /* la séparation est déjà sur le head */
  border-radius: 0 0 14px 14px !important;
  padding: 14px 18px 16px !important;
  margin: 0 0 14px 0 !important;
  box-shadow: 0 4px 14px rgba(80, 60, 30, 0.10) !important;
}

/* === Drop zone ZIP interne === */
html.kta-theme-light .zip-drop-zone {
  background: rgba(0, 0, 0, 0.02) !important;
  border: 2px dashed rgba(154, 135, 84, 0.55) !important;
  border-radius: 10px !important;
  color: #2a2620 !important;
}
html.kta-theme-light .zip-drop-zone:hover,
html.kta-theme-light .zip-drop-zone.drag-over {
  background: rgba(244, 197, 66, 0.10) !important;
  border-color: #f4c542 !important;
}
html.kta-theme-light .zip-icon {
  color: #8b5a00 !important;
}
html.kta-theme-light #zipFileName {
  color: #6b6354 !important;
}

/* === Bouton "Reprendre" (loader-btn-resume) — affinage radius + ombre === */
html.kta-theme-light .loader-btn-resume {
  border-radius: 12px !important;
  box-shadow: 0 4px 14px rgba(80, 60, 30, 0.12) !important;
}

/* === Bouton "Charger ce plan" (#loadPlanBtn) — primary, arrondi === */
html.kta-theme-light #loadPlanBtn {
  background: #f4c542 !important;
  color: #2a2620 !important;
  border: 1px solid #d9a82e !important;
  border-radius: 10px !important;
  font-weight: 700 !important;
  padding: 12px 18px !important;
  box-shadow: 0 2px 8px rgba(244, 197, 66, 0.30) !important;
}
html.kta-theme-light #loadPlanBtn:hover {
  background: #d9a82e !important;
  color: #1a1612 !important;
}

/* === Bouton "Générer un plan" (secondary, arrondi cohérent) === */
html.kta-theme-light #loaderPlannerBtn {
  border-radius: 10px !important;
  padding: 11px 18px !important;
}

/* === Bouton "FS Access" (🔐 Autoriser l'accès permanent) === */
html.kta-theme-light .loader-btn-fs {
  background: rgba(140, 180, 255, 0.10) !important;
  color: #0a4f6b !important;
  border: 1px solid rgba(10, 79, 107, 0.30) !important;
  border-radius: 8px !important;
}
html.kta-theme-light .loader-btn-fs:hover {
  background: rgba(140, 180, 255, 0.20) !important;
  border-color: rgba(10, 79, 107, 0.50) !important;
}
html.kta-theme-light .fs-access-info {
  color: #6b6354 !important;
}

/* === Filtres "Afficher les plans serveur" === */
html.kta-theme-light .loader-plans-filter-row {
  background: transparent !important;
  border-radius: 6px !important;
  padding: 6px 8px !important;
  color: #2a2620 !important;
}
html.kta-theme-light .loader-plans-filter-row:hover {
  background: rgba(244, 197, 66, 0.10) !important;
}

/* === Liste des plans (allPlansList) — les lignes individuelles === */
html.kta-theme-light .loader-plans-list .plan-card,
html.kta-theme-light .loader-plans-list li {
  background: rgba(0, 0, 0, 0.03) !important;
  border: 1px solid rgba(154, 135, 84, 0.20) !important;
  border-radius: 10px !important;
  color: #2a2620 !important;
  padding: 10px 14px !important;
  margin-bottom: 6px !important;
  box-shadow: 0 1px 3px rgba(80, 60, 30, 0.06) !important;
}
html.kta-theme-light .loader-plans-list .plan-card:hover,
html.kta-theme-light .loader-plans-list li:hover {
  background: rgba(244, 197, 66, 0.10) !important;
  border-color: var(--kta-light-accent) !important;
}

/* === Section actions (boutons mini export/import liste) === */
html.kta-theme-light .loader-btn-mini {
  background: rgba(0, 0, 0, 0.04) !important;
  color: #2a2620 !important;
  border: 1px solid rgba(154, 135, 84, 0.30) !important;
  border-radius: 6px !important;
}
html.kta-theme-light .loader-btn-mini:hover {
  background: rgba(244, 197, 66, 0.18) !important;
  border-color: #f4c542 !important;
  color: #1a1612 !important;
}

/* === Box Resume (Reprendre) — quand visible, doit aussi être arrondi === */
html.kta-theme-light #resumeBox {
  border-radius: 14px !important;
  padding: 0 !important;  /* le bouton resume porte déjà son padding */
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

/* === 🔧 v1.13.0-fix14 — OVERLAY CHARGEMENT PLAN (kta-load-overlay)
   KARMA "quand je clique sur un plan, la fenêtre de chargement (avant
   arriver sur leaflet) est toujours en sombre". Cette modale apparaît
   entre le clic sur "Charger ce plan" / "Reprendre" et l'init Leaflet,
   avec spinner + message d'étape ("Extraction tuiles...", "Init map..."
   etc.). Visible plusieurs secondes sur les plans V2 tuilés. */
html.kta-theme-light .kta-load-overlay {
  background: rgba(240, 232, 216, 0.92) !important;  /* beige semi-trans */
  backdrop-filter: blur(4px) !important;
  -webkit-backdrop-filter: blur(4px) !important;
}
html.kta-theme-light .kta-load-box {
  background: #fdf8eb !important;
  border: 1px solid rgba(244, 197, 66, 0.45) !important;
  color: #2a2620 !important;
  box-shadow: 0 12px 40px rgba(80, 60, 30, 0.25),
              0 0 32px rgba(244, 197, 66, 0.18) !important;
}
html.kta-theme-light .kta-load-spinner {
  border: 4px solid rgba(244, 197, 66, 0.18) !important;
  border-top-color: #d9a82e !important;
}
html.kta-theme-light .kta-load-titre {
  color: #1a1612 !important;
}
html.kta-theme-light .kta-load-message {
  color: #4a3f30 !important;
}
html.kta-theme-light .kta-load-hint {
  color: #6b6354 !important;
  border-top: 1px solid rgba(154, 135, 84, 0.25) !important;
}

/* ============================================================================
 * 🔧 v1.13.0-fix16 — RECHERCHE UNIFIÉE (Ctrl+K) + ONGLETS MODE rapide/avancé
 * + HAUTEUR MODALES Session/Iti/Perdu + autres
 * ============================================================================
 * KARMA reports : (a) "bug affichage recherche unifié" (input dark sur
 * fond clair illisible), (b) "petit bug en export png en mode clair,
 * pareil enregistrer session", (c) "bug de longueur sur enregistrer
 * session", (d) "pareil je suis perdu", (e) "itinéraire pareil".
 * ============================================================================ */

/* === Recherche unifiée Ctrl+K — input + filtres (CSS inline injecté
   par searchPoints.js > _injecterStyles, on l'override en externe avec
   spécificité + !important) === */
html.kta-theme-light .kta-search-input-wrap {
  background: #fdf8eb !important;
  border-bottom: 1px solid rgba(154, 135, 84, 0.25) !important;
}
html.kta-theme-light .kta-search-input-wrap input {
  background: #ffffff !important;
  color: #2a2620 !important;
  border: 1px solid rgba(154, 135, 84, 0.35) !important;
}
html.kta-theme-light .kta-search-input-wrap input:focus {
  border-color: #f4c542 !important;
  background: #ffffff !important;
  box-shadow: 0 0 0 2px rgba(244, 197, 66, 0.25) !important;
}
html.kta-theme-light .kta-search-input-wrap input::placeholder {
  color: #8a8270 !important;
}
html.kta-theme-light .kta-search-info {
  color: #6b6354 !important;
}
html.kta-theme-light .kta-search-clear-filters {
  background: rgba(220, 50, 50, 0.10) !important;
  color: #b02020 !important;
  border: 1px solid rgba(220, 50, 50, 0.30) !important;
}
html.kta-theme-light .kta-search-clear-filters:hover {
  background: rgba(220, 50, 50, 0.20) !important;
}
/* Lignes de filtres : Catégorie / Calques / Tags */
html.kta-theme-light .kta-search-filters {
  background: transparent !important;
}
html.kta-theme-light .kta-search-filter-label {
  color: #6b6354 !important;
  font-weight: 700 !important;
}
html.kta-theme-light .kta-search-filter-chip {
  background: rgba(0, 0, 0, 0.04) !important;
  color: #2a2620 !important;
  border: 1px solid rgba(154, 135, 84, 0.30) !important;
}
html.kta-theme-light .kta-search-filter-chip:hover {
  background: rgba(244, 197, 66, 0.12) !important;
  border-color: rgba(244, 197, 66, 0.50) !important;
}
html.kta-theme-light .kta-search-filter-chip.active {
  background: rgba(244, 197, 66, 0.30) !important;
  border-color: #f4c542 !important;
  color: #2a2620 !important;
  font-weight: 600 !important;
}
/* Groupes de résultats (Points / Tracés / Zones / Structures) */
html.kta-theme-light .kta-search-group-titre {
  color: #d9a82e !important;
  border-bottom: 1px solid rgba(154, 135, 84, 0.30) !important;
}
html.kta-theme-light .kta-search-result-item {
  background: rgba(0, 0, 0, 0.02) !important;
  border: 1px solid rgba(154, 135, 84, 0.18) !important;
  color: #2a2620 !important;
}
html.kta-theme-light .kta-search-result-item:hover,
html.kta-theme-light .kta-search-result-item.kta-search-selected {
  background: rgba(244, 197, 66, 0.15) !important;
  border-color: rgba(244, 197, 66, 0.50) !important;
}
html.kta-theme-light .kta-search-result-item .kta-search-result-meta,
html.kta-theme-light .kta-search-result-item .kta-search-result-sub {
  color: #6b6354 !important;
}
html.kta-theme-light .kta-search-result-item strong,
html.kta-theme-light .kta-search-result-item mark {
  background: rgba(244, 197, 66, 0.40) !important;
  color: #1a1612 !important;
  padding: 0 2px !important;
  border-radius: 2px !important;
}

/* === Onglets "Mode rapide / Mode avancé" (.kta-conv-sens-btn) — bug
   visible sur Export PNG + Enregistrer Session. L'onglet actif avait
   un fond bleu nuit #1a3a5c hardcodé qui détonnait en clair. */
html.kta-theme-light .kta-conv-sens-btn {
  background: rgba(0, 0, 0, 0.03) !important;
  color: #6b6354 !important;
  border: 1px solid rgba(154, 135, 84, 0.30) !important;
}
html.kta-theme-light .kta-conv-sens-btn:hover:not(.active) {
  background: rgba(244, 197, 66, 0.12) !important;
  color: #2a2620 !important;
  border-color: rgba(244, 197, 66, 0.45) !important;
}
html.kta-theme-light .kta-conv-sens-btn.active {
  background: #f4c542 !important;
  border-color: #d9a82e !important;
  color: #2a2620 !important;
  font-weight: 600 !important;
}
html.kta-theme-light .kta-conv-sens-btn .kta-conv-sens-label {
  color: inherit !important;
}
html.kta-theme-light .kta-conv-sens-btn .kta-conv-sens-desc {
  color: inherit !important;
  opacity: 0.75 !important;
}

/* === Enregistrer la session (#kta-session-export-modal) — tous styles
   inline injectés par sessionExporter.js > _injecterStyles. Override
   complet avec spécificité ID + !important. ============================ */

/* Fix hauteur : la modale n'a pas de classe spécifique, donc on scope
   sur l'ID #kta-session-export-modal pour cibler PRÉCISÉMENT cette
   modale (général dark + light) */
#kta-session-export-modal .kta-readme-modal-boite {
  height: auto !important;
  max-height: 90vh !important;
  max-width: 720px !important;
}

/* Onglets Full / Avancé / Conversion / KMZ */
html.kta-theme-light .kta-ses-tabs {
  background: var(--kta-light-bg-bar) !important;
  border-bottom: 1px solid var(--kta-light-bg-bar-border) !important;
}
html.kta-theme-light .kta-ses-tab {
  background: transparent !important;
  color: var(--kta-light-text-muted) !important;
  border: 1px solid transparent !important;
}
html.kta-theme-light .kta-ses-tab:hover {
  background: rgba(244, 197, 66, 0.15) !important;
  color: var(--kta-light-text) !important;
}
html.kta-theme-light .kta-ses-tab.active {
  background: #fdf8eb !important;
  color: #2a2620 !important;
  border-color: var(--kta-light-accent) !important;
  border-bottom-color: #fdf8eb !important;
  font-weight: 700 !important;
}

/* Contenu interne */
html.kta-theme-light .kta-ses-content {
  background: #fdf8eb !important;
  color: var(--kta-light-text) !important;
}
html.kta-theme-light .kta-ses-intro {
  color: var(--kta-light-text) !important;
}
html.kta-theme-light .kta-ses-section-title {
  color: var(--kta-light-accent-hover) !important;
}
html.kta-theme-light .kta-ses-cb-row {
  color: var(--kta-light-text) !important;
}
html.kta-theme-light .kta-ses-cb-row:hover {
  background: rgba(244, 197, 66, 0.10) !important;
}
html.kta-theme-light .kta-ses-cb-row .kta-ses-count {
  color: var(--kta-light-text-muted) !important;
}
html.kta-theme-light .kta-ses-radio-row {
  color: var(--kta-light-text) !important;
}
html.kta-theme-light .kta-ses-radio-row:hover {
  background: rgba(244, 197, 66, 0.10) !important;
}
html.kta-theme-light .kta-ses-radio-row .kta-ses-radio-hint {
  color: var(--kta-light-text-muted) !important;
}

/* Bloc résumé (kta-ses-summary) — adapter sur fond clair */
html.kta-theme-light .kta-ses-summary {
  background: rgba(244, 197, 66, 0.10) !important;
  border: 1px solid rgba(244, 197, 66, 0.35) !important;
  color: var(--kta-light-text) !important;
}
html.kta-theme-light .kta-ses-summary strong {
  color: #1a1612 !important;
}
html.kta-theme-light .kta-ses-summary .kta-ses-zero {
  color: var(--kta-light-text-muted) !important;
}
html.kta-theme-light .kta-ses-empty {
  color: #b02020 !important;
}

/* Footer actions + boutons */
html.kta-theme-light .kta-ses-actions {
  background: #fdf8eb !important;
  border-top: 1px solid var(--kta-light-border) !important;
}
html.kta-theme-light .kta-ses-btn-primary {
  background: var(--kta-light-accent) !important;
  color: #2a2620 !important;
  border: 1px solid var(--kta-light-accent-hover) !important;
}
html.kta-theme-light .kta-ses-btn-primary:hover {
  background: var(--kta-light-accent-hover) !important;
  color: #1a1612 !important;
}
html.kta-theme-light .kta-ses-btn-primary:disabled {
  background: rgba(244, 197, 66, 0.30) !important;
  color: rgba(0, 0, 0, 0.40) !important;
}
html.kta-theme-light .kta-ses-btn-secondary {
  background: rgba(0, 0, 0, 0.04) !important;
  color: var(--kta-light-text) !important;
  border: 1px solid var(--kta-light-border-strong) !important;
}
html.kta-theme-light .kta-ses-btn-secondary:hover {
  background: rgba(0, 0, 0, 0.08) !important;
}

/* === Onglet KMZ — blocs calibrage + apperçu === */
html.kta-theme-light .kta-kmz-section {
  background: rgba(0, 0, 0, 0.02) !important;
  border: 1px solid var(--kta-light-border) !important;
  color: var(--kta-light-text) !important;
}

/* ============================================================================
 * 🔧 v1.13.0-fix18 — MODALES PROGRESS .kta-modal (forcer mise à jour / reset)
 * ============================================================================
 * KARMA "dernier bug, forcer la mise à jour, et surement tout reset
 * affiche toujours la popup de reset en cours en sombre".
 *
 * Cause : ces modales utilisent la classe générique .kta-modal-* (et non
 * .kta-readme-modal-*) — pattern différent. Pas couverte par mes
 * overrides précédents.
 *
 * Modales concernées :
 *   - mettreAJourCodeSeul() (interface.js l.2478) : overlay "Mise à jour
 *     en cours…" avec étapes (ping, SW, purge cache, reload)
 *   - viderCacheAppli() (l.2614+) : overlay "Reset en cours…"
 *   - Confirm dialogs divers (Session en cours, Yes/No, etc.)
 *
 * Couvert maintenant : .kta-modal-overlay + .kta-modal + .kta-modal-titre
 * + .kta-modal-texte + .kta-modal-icon + .kta-modal-actions.
 * ============================================================================ */
html.kta-theme-light .kta-modal-overlay {
  background: rgba(40, 32, 20, 0.65) !important;
}
html.kta-theme-light .kta-modal {
  background: #fdf8eb !important;
  color: var(--kta-light-text) !important;
  border: 1px solid var(--kta-light-border-strong) !important;
  box-shadow: 0 12px 40px rgba(80, 60, 30, 0.25) !important;
}
html.kta-theme-light .kta-modal-danger {
  border-color: #c0392b !important;
  box-shadow: 0 12px 40px rgba(80, 60, 30, 0.25),
              0 0 0 1px #c0392b !important;
}
html.kta-theme-light .kta-modal-icon {
  /* L'emoji ⚠️/🔄/⏳ garde sa couleur native, mais s'assurer qu'il
     reste visible sur fond clair */
  color: var(--kta-light-text) !important;
}
html.kta-theme-light .kta-modal-titre {
  color: #1a1612 !important;
}
html.kta-theme-light .kta-modal-texte {
  color: #4a3f30 !important;
}
html.kta-theme-light .kta-modal-texte strong {
  color: #b02020 !important;  /* strong souvent utilisé pour warning rouge */
}
html.kta-theme-light .kta-modal-texte em,
html.kta-theme-light .kta-modal-texte i {
  color: var(--kta-light-text-muted) !important;
}
/* Boutons d'action dans .kta-modal-actions — peuvent être .kta-btn ou
   custom inline. On force le style cohérent. */
html.kta-theme-light .kta-modal-actions button {
  background: rgba(0, 0, 0, 0.04) !important;
  color: var(--kta-light-text) !important;
  border: 1px solid var(--kta-light-border-strong) !important;
  padding: 8px 16px !important;
  border-radius: 8px !important;
  font-weight: 600 !important;
  cursor: pointer !important;
}
html.kta-theme-light .kta-modal-actions button:hover {
  background: rgba(244, 197, 66, 0.18) !important;
  border-color: var(--kta-light-accent) !important;
}
html.kta-theme-light .kta-modal-actions button.kta-modal-btn-primary,
html.kta-theme-light .kta-modal-actions button.kta-btn-primary {
  background: var(--kta-light-accent) !important;
  color: #2a2620 !important;
  border-color: var(--kta-light-accent-hover) !important;
}
html.kta-theme-light .kta-modal-actions button.kta-modal-btn-primary:hover,
html.kta-theme-light .kta-modal-actions button.kta-btn-primary:hover {
  background: var(--kta-light-accent-hover) !important;
}
html.kta-theme-light .kta-modal-actions button.kta-modal-btn-danger,
html.kta-theme-light .kta-modal-actions button.kta-btn-danger {
  background: rgba(220, 50, 50, 0.10) !important;
  color: #b02020 !important;
  border-color: rgba(220, 50, 50, 0.45) !important;
}
html.kta-theme-light .kta-modal-actions button.kta-modal-btn-danger:hover,
html.kta-theme-light .kta-modal-actions button.kta-btn-danger:hover {
  background: rgba(220, 50, 50, 0.22) !important;
}

/* === PIN PROPOSAL (modale post-update qui propose d'activer le PIN) === */
html.kta-theme-light .kta-pin-proposal-boite {
  background: #fdf8eb !important;
  color: #2a2620 !important;
  border: 1px solid rgba(0, 0, 0, 0.22) !important;
}
html.kta-theme-light .kta-pin-proposal-info {
  background: rgba(140, 180, 255, 0.06) !important;
  border: 1px solid rgba(0, 0, 0, 0.12) !important;
  color: #2a2620 !important;
}
html.kta-theme-light .kta-pin-proposal-info-titre {
  color: #d9a82e !important;
}
html.kta-theme-light .kta-pin-proposal-info p {
  color: #2a2620 !important;
}
/* Override inline style rgba(244,197,66,0.06) du 2e info block */
html.kta-theme-light .kta-pin-proposal-boite .kta-pin-proposal-info[style*="rgba(244,197,66"] {
  background: rgba(244, 197, 66, 0.12) !important;
  border-color: rgba(244, 197, 66, 0.35) !important;
}

/* === Modale Configuration home (loaderConfigModal) avec wrapper kta-loader-config-boite === */
html.kta-theme-light .kta-loader-config-boite {
  background: #fdf8eb !important;
  color: #2a2620 !important;
  border: 1px solid rgba(0,0,0,0.22) !important;
}
html.kta-theme-light .kta-loader-config-corps {
  color: #2a2620 !important;
}
html.kta-theme-light .kta-loader-config-corps * {
  color: #2a2620 !important;
}
html.kta-theme-light .kta-perf-titre {
  color: #d9a82e !important;
}
html.kta-theme-light .kta-perf-desc {
  color: #6b6354 !important;
}
html.kta-theme-light .kta-perf-btn {
  background: rgba(0,0,0,0.04) !important;
  color: #2a2620 !important;
  border: 1px solid rgba(0,0,0,0.12) !important;
}
html.kta-theme-light .kta-perf-btn:hover {
  background: rgba(244,197,66,0.22) !important;
  border-color: #f4c542 !important;
}
html.kta-theme-light .kta-perf-btn.active {
  background: #ffffff !important;
  border-color: #f4c542 !important;
  box-shadow: inset 0 0 0 1px #f4c542 !important;
}
html.kta-theme-light .kta-net-paranoia-toggle {
  background: rgba(244, 197, 66, 0.06) !important;
  border: 1px solid rgba(0,0,0,0.22) !important;
  color: #2a2620 !important;
}
html.kta-theme-light .kta-net-paranoia-toggle * {
  color: #2a2620 !important;
}
html.kta-theme-light .kta-aide-section {
  background: rgba(0,0,0,0.02) !important;
  border: 1px solid rgba(0,0,0,0.12) !important;
}
html.kta-theme-light .kta-aide-section-titre {
  color: #d9a82e !important;
}
html.kta-theme-light .kta-loader-perf-hint {
  color: #6b6354 !important;
}

/* === Audit réseau (loaderNetDocModal + loaderNetLogModal) === */
html.kta-theme-light #loaderNetLogTbody tr {
  background: rgba(0,0,0,0.02) !important;
  color: #2a2620 !important;
}
html.kta-theme-light #loaderNetLogTbody tr:nth-child(even) {
  background: rgba(0,0,0,0.05) !important;
}
html.kta-theme-light #loaderNetLogTbody td {
  border-bottom: 1px solid rgba(0,0,0,0.12) !important;
  color: #2a2620 !important;
}
html.kta-theme-light #loaderNetDocWhitelist {
  background: rgba(0,0,0,0.04) !important;
  color: #2a2620 !important;
  border: 1px solid rgba(0,0,0,0.12) !important;
}
html.kta-theme-light #loaderNetLogMeta {
  color: #6b6354 !important;
}
html.kta-theme-light #loaderParanoiaBadge {
  background: rgba(220, 50, 50, 0.15) !important;
  color: #b02020 !important;
  border: 1px solid rgba(220, 50, 50, 0.4) !important;
}

/* === Modale Choix suppression (apparaît sur clic ❌ Mesure, ❌ Tracé, etc.) === */
html.kta-theme-light .kta-choix-suppr-overlay {
  background: rgba(40, 32, 20, 0.55) !important;
}
html.kta-theme-light .kta-choix-suppr-boite {
  background: #fdf8eb !important;
  color: #2a2620 !important;
  border: 1px solid rgba(0,0,0,0.22) !important;
}
html.kta-theme-light .kta-choix-suppr-btn {
  background: rgba(0,0,0,0.04) !important;
  color: #2a2620 !important;
  border: 1px solid rgba(0,0,0,0.12) !important;
}
html.kta-theme-light .kta-choix-suppr-btn:hover {
  background: rgba(244,197,66,0.22) !important;
  border-color: #f4c542 !important;
}
html.kta-theme-light .kta-choix-suppr-btn.kta-danger {
  background: rgba(220, 50, 50, 0.1) !important;
  color: #b02020 !important;
  border-color: rgba(220, 50, 50, 0.4) !important;
}

/* === Toast (OOMGuard) === */
html.kta-theme-light .kta-toast {
  background: #fdf8eb !important;
  color: #2a2620 !important;
  border: 1px solid rgba(0,0,0,0.22) !important;
  border-left: 3px solid #f4c542 !important;
  box-shadow: 0 4px 16px rgba(80,60,30,0.18) !important;
}
html.kta-theme-light .kta-toast-msg,
html.kta-theme-light .kta-toast-icon {
  color: #2a2620 !important;
}
html.kta-theme-light .kta-toast-close {
  color: #6b6354 !important;
}
html.kta-theme-light .kta-toast-error {
  border-left-color: #c0392b !important;
}
html.kta-theme-light .kta-toast-info {
  border-left-color: #0a4f6b !important;
}

/* === Modale Replay tracker + Audit + autres modales spécifiques === */
html.kta-theme-light .kta-tracker-replay-modal,
html.kta-theme-light .kta-tracker-replay-controls,
html.kta-theme-light .kta-search-modal-boite,
html.kta-theme-light .kta-iti-modal-boite,
html.kta-theme-light .kta-iti-waypoint-item,
html.kta-theme-light .kta-iti-avoid-chip {
  background: #fdf8eb !important;
  color: #2a2620 !important;
  border-color: rgba(0,0,0,0.12) !important;
}
html.kta-theme-light .kta-search-result-item {
  background: #fdf8eb !important;
  color: #2a2620 !important;
  border-color: rgba(0,0,0,0.12) !important;
}
html.kta-theme-light .kta-search-result-item:hover,
html.kta-theme-light .kta-search-result-item.kta-search-selected {
  background: rgba(244,197,66,0.22) !important;
}

/* === 🔧 v1.13.0-fix3 (KARMA "LE BOUTON QUI permet de charger le dernier
   plan ne prend pas la modif, les modals non plus") : .loader-btn-resume
   a un linear-gradient bleu/dark hardcodé + color:#e8eaf0 + strong:#8cb4ff.
   On override avec un fond blanc + accent jaune charte cohérent. */
body.kta-theme-light .loader-btn-resume {
  background: linear-gradient(135deg, #ffffff 0%, #fbf3e0 100%) !important;
  border: 1px solid var(--kta-light-accent) !important;
  color: var(--kta-light-text) !important;
  box-shadow: 0 2px 6px var(--kta-light-shadow) !important;
}
body.kta-theme-light .loader-btn-resume:hover {
  background: linear-gradient(135deg, #fffaef 0%, #f4ecd4 100%) !important;
  border-color: var(--kta-light-accent-hover) !important;
}
body.kta-theme-light .loader-btn-resume strong {
  color: #8b5a00 !important;
  font-weight: 700 !important;
}

/* === Autres .loader-btn-* non couverts précédemment === */
body.kta-theme-light .loader-btn-ghost {
  background: rgba(0,0,0,0.04) !important;
  color: var(--kta-light-text) !important;
  border: 1px solid var(--kta-light-border-strong) !important;
}
body.kta-theme-light .loader-btn-ghost:hover {
  background: var(--kta-light-accent-bg) !important;
  border-color: var(--kta-light-accent) !important;
}
body.kta-theme-light .loader-btn-mini {
  background: rgba(0,0,0,0.04) !important;
  color: var(--kta-light-text) !important;
  border: 1px solid var(--kta-light-border) !important;
}
body.kta-theme-light .loader-btn-mini:hover {
  background: var(--kta-light-accent-bg) !important;
  border-color: var(--kta-light-accent) !important;
}
body.kta-theme-light .loader-btn-fs {
  background: rgba(0,0,0,0.05) !important;
  color: var(--kta-light-text) !important;
  border: 1px solid var(--kta-light-border-strong) !important;
}
body.kta-theme-light .loader-btn-fs:hover {
  background: var(--kta-light-accent-bg) !important;
  border-color: var(--kta-light-accent) !important;
}
body.kta-theme-light .loader-btn-secondary.loader-btn-danger {
  background: rgba(220, 50, 50, 0.10) !important;
  color: #b02020 !important;
  border: 1px solid rgba(220, 50, 50, 0.45) !important;
}
body.kta-theme-light .loader-btn-secondary.loader-btn-danger:hover {
  background: rgba(220, 50, 50, 0.20) !important;
}
body.kta-theme-light .loader-btn-secondary.kta-debug-toggle.active {
  background: rgba(244, 197, 66, 0.20) !important;
  color: var(--kta-light-text) !important;
  border-color: var(--kta-light-accent) !important;
}

/* === 🔧 v1.13.0-fix3 (KARMA "les modals non plus") : renforcement des
   overrides modales — on cible le wrapper overlay ET la boite + descendants
   typed avec une force suffisante pour battre les règles inline et les
   styles enfants hardcodés (h1/strong/code/em/...).

   Au passage on couvre aussi le pattern modale "loader-config-boite" qui
   sert pour Configuration home + tout ce qui utilise le wrapper
   .kta-readme-modal-overlay. */
body.kta-theme-light .kta-readme-modal-overlay {
  background: rgba(40, 32, 20, 0.55) !important;
}
body.kta-theme-light .kta-readme-modal-overlay .kta-readme-modal-boite {
  background: var(--kta-light-bg-elevated) !important;
  color: var(--kta-light-text) !important;
  border: 1px solid var(--kta-light-border-strong) !important;
  box-shadow: 0 10px 40px var(--kta-light-shadow) !important;
}
body.kta-theme-light .kta-readme-modal-overlay .kta-readme-modal-header {
  background: var(--kta-light-bg-deep) !important;
  border-bottom: 1px solid var(--kta-light-border) !important;
}
body.kta-theme-light .kta-readme-modal-overlay .kta-readme-modal-titre {
  color: var(--kta-light-text) !important;
}
body.kta-theme-light .kta-readme-modal-overlay .kta-readme-modal-corps {
  background: var(--kta-light-bg-elevated) !important;
  color: var(--kta-light-text) !important;
}
/* Force texte foncé sur TOUS les enfants des modales — les enfants peuvent
   avoir h1/h2/h3/p/li/span/strong/em/code/td/th/label avec couleur dark
   hardcodée. La règle catch-all précédente sur `* { color: ... }` n'avait
   pas !important — on rejoue avec !important pour la fiabilité. */
body.kta-theme-light .kta-readme-modal-overlay .kta-readme-modal-corps * {
  color: var(--kta-light-text) !important;
}
body.kta-theme-light .kta-readme-modal-overlay .kta-readme-modal-corps a {
  color: var(--kta-light-accent-hover) !important;
}
body.kta-theme-light .kta-readme-modal-overlay .kta-readme-modal-corps code {
  background: rgba(0,0,0,0.06) !important;
  color: #8b3a00 !important;
  border: 1px solid var(--kta-light-border) !important;
}
body.kta-theme-light .kta-readme-modal-overlay .kta-readme-modal-corps strong,
body.kta-theme-light .kta-readme-modal-overlay .kta-readme-modal-corps h1,
body.kta-theme-light .kta-readme-modal-overlay .kta-readme-modal-corps h2,
body.kta-theme-light .kta-readme-modal-overlay .kta-readme-modal-corps h3,
body.kta-theme-light .kta-readme-modal-overlay .kta-readme-modal-corps h4 {
  color: #1a1612 !important;
}
body.kta-theme-light .kta-readme-modal-overlay .kta-readme-modal-corps em,
body.kta-theme-light .kta-readme-modal-overlay .kta-readme-modal-corps i,
body.kta-theme-light .kta-readme-modal-overlay .kta-readme-modal-corps blockquote {
  color: var(--kta-light-text-muted) !important;
}
body.kta-theme-light .kta-readme-modal-overlay .kta-readme-modal-corps blockquote {
  background: rgba(244, 197, 66, 0.08) !important;
  border-left: 4px solid var(--kta-light-accent) !important;
}
body.kta-theme-light .kta-readme-modal-overlay .kta-readme-modal-corps table th,
body.kta-theme-light .kta-readme-modal-overlay .kta-readme-modal-corps table td {
  border-color: var(--kta-light-border) !important;
}
body.kta-theme-light .kta-readme-modal-overlay .kta-readme-modal-corps table th {
  background: var(--kta-light-bg-deep) !important;
}
body.kta-theme-light .kta-readme-modal-overlay .kta-readme-modal-corps details {
  background: rgba(0,0,0,0.02) !important;
  border: 1px solid var(--kta-light-border) !important;
}
body.kta-theme-light .kta-readme-modal-overlay .kta-readme-modal-corps summary {
  background: rgba(244, 197, 66, 0.08) !important;
  color: var(--kta-light-text) !important;
}
body.kta-theme-light .kta-readme-modal-overlay .kta-readme-modal-corps summary:hover {
  background: var(--kta-light-accent-bg) !important;
}
/* Bouton ✕ close */
body.kta-theme-light .kta-readme-modal-overlay .kta-panneau-close {
  background: rgba(0,0,0,0.05) !important;
  color: var(--kta-light-text) !important;
  border: 1px solid var(--kta-light-border) !important;
}
body.kta-theme-light .kta-readme-modal-overlay .kta-panneau-close:hover {
  background: rgba(220, 50, 50, 0.15) !important;
  border-color: rgba(220, 50, 50, 0.5) !important;
  color: #b02020 !important;
}
/* Inputs dans les modales (cherche, perf, etc.) */
body.kta-theme-light .kta-readme-modal-overlay input[type="text"],
body.kta-theme-light .kta-readme-modal-overlay input[type="number"],
body.kta-theme-light .kta-readme-modal-overlay input[type="search"],
body.kta-theme-light .kta-readme-modal-overlay input[type="password"],
body.kta-theme-light .kta-readme-modal-overlay select,
body.kta-theme-light .kta-readme-modal-overlay textarea {
  background: #fff !important;
  color: var(--kta-light-text) !important;
  border: 1px solid var(--kta-light-border-strong) !important;
}
body.kta-theme-light .kta-readme-modal-overlay input:focus,
body.kta-theme-light .kta-readme-modal-overlay select:focus,
body.kta-theme-light .kta-readme-modal-overlay textarea:focus {
  border-color: var(--kta-light-accent) !important;
  outline: none !important;
  box-shadow: 0 0 0 2px rgba(244, 197, 66, 0.25) !important;
}

/* ==============================================
   🆕 v1.16.0-fix — Boussole widget (mode réduit) en thème clair
   ==============================================
   KARMA : « en mode clair, si je clique sur boussole, quand elle est en
   mode réduite sur la carte elle est en sombre. »

   Le widget compass (.kta-compass-widget) était hardcodé sur fond sombre
   (rgba(26,31,46,0.88) = charte dark) sans override theme-light. En mode
   clair, l'utilisateur voyait un bloc sombre incongru sur le fond
   beige cataphile.

   Override : fond beige clair charte cataphile + texte sombre + bordure
   ambre charte (cohérent avec les modales en thème clair).
   ============================================== */
body.kta-theme-light .kta-compass-widget {
  background: rgba(253, 248, 235, 0.92) !important;     /* --kta-light-bg-elevated avec alpha */
  border-color: var(--kta-light-accent) !important;     /* jaune charte */
  box-shadow: 0 6px 20px var(--kta-light-shadow) !important;
}
body.kta-theme-light .kta-compass-widget:hover {
  border-color: var(--kta-light-accent-hover) !important;
  box-shadow: 0 6px 24px var(--kta-light-shadow),
              0 0 18px rgba(244, 197, 66, 0.18) !important;
}

body.kta-theme-light .kta-compass-close {
  color: var(--kta-light-text-muted) !important;
}
body.kta-theme-light .kta-compass-close:hover,
body.kta-theme-light .kta-compass-close:focus {
  background: rgba(255, 107, 107, 0.15) !important;
  color: #c33 !important;
}

/* Rose des vents : drop-shadow ambre conservé (lisible sur beige aussi).
   En revanche, le texte cardinal (.kta-compass-info) reste en jaune
   accent car il est sur le fond ambre clair → lisible aussi en mode
   clair. Si KARMA trouve le contraste insuffisant on bumpera au noir
   charte (--kta-light-text). */
body.kta-theme-light .kta-compass-info {
  color: var(--kta-light-accent-hover) !important;       /* ambre plus saturé pour contraste */
  text-shadow: 0 0 1px rgba(0, 0, 0, 0.15);
}

/* ==============================================
   🆕 v1.16.0 step2-flyout : Sidebar flyout (panneau latéral)
   ==============================================
   KARMA : « quand on va avoir trop icone. il faut modifier UI, pas de
   déroulant. un icone principal ouvre une sorte de modal type charte
   graphique le long de son menu (gauche ou droite). »

   Remplace la cascade verticale des sub-actions (qui peut déborder
   l'écran avec 5+ types + customs) par un PANEL latéral adjacent au
   bouton principal. Chaque sub-action est rendue avec icône + libellé
   en grille verticale → plus lisible, plus compact, scalable.

   Position : à GAUCHE du bouton si sidebar topright, à DROITE si
   sidebar topleft. Calculée dynamiquement via getBoundingClientRect
   pour suivre le bouton (mobile portrait/landscape + PC).
   ============================================== */

.kta-group-flyout {
  position: fixed;
  z-index: 1050;  /* au-dessus des controls Leaflet (~800) et popups (~700) */
  background: #1a1f2e;
  border: 1px solid rgba(140, 180, 255, 0.25);
  border-radius: 10px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.55);
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 220px;
  /* max-width et max-height définies dynamiquement par _positionnerFlyout
     (inline style) pour s'adapter au viewport réel — particulièrement
     pour le mode landscape mobile où vh peut être instable (URL bar
     dynamique iOS Safari, safe-area, etc.). */
  overflow-y: auto;
  overflow-x: hidden;
  /* 🐛 v1.16.0 step2-flyout-fix : meilleure visibilité scrollbar sur
     desktop (gros plans ou customs nombreux) pour signaler que le panel
     déroule. Sur mobile, le scroll touch fonctionne sans indicateur. */
  scrollbar-width: thin;
  scrollbar-color: rgba(140, 180, 255, 0.4) transparent;
  animation: kta-flyout-in 0.16s ease-out;
}
.kta-group-flyout::-webkit-scrollbar {
  width: 8px;
}
.kta-group-flyout::-webkit-scrollbar-track {
  background: transparent;
}
.kta-group-flyout::-webkit-scrollbar-thumb {
  background: rgba(140, 180, 255, 0.35);
  border-radius: 4px;
}
.kta-group-flyout::-webkit-scrollbar-thumb:hover {
  background: rgba(140, 180, 255, 0.55);
}

@keyframes kta-flyout-in {
  from { opacity: 0; transform: translateX(0) scale(0.96); }
  to   { opacity: 1; transform: translateX(0) scale(1); }
}

.kta-group-flyout-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 4px 4px 6px 4px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  margin-bottom: 4px;
  /* 🐛 v1.16.0 step2-flyout-fix : header sticky pour que l'utilisateur
     sache toujours sur quel groupe il est en train de scroller dans une
     longue liste de types + customs. Sticky simple — position relative
     au .kta-group-flyout qui scrolle. */
  position: sticky;
  top: 0;
  background: #1a1f2e;
  z-index: 2;
  /* Compense le padding du parent pour que le sticky s'étende sur toute
     la largeur (sinon on voit les items défiler à droite du header). */
  margin-left:  -10px;
  margin-right: -10px;
  padding-left:  10px;
  padding-right: 10px;
  padding-top:    8px;
}

.kta-group-flyout-title {
  font-size: 13px;
  font-weight: 600;
  color: #e8eaf0;
}

.kta-group-flyout-close {
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: #8892a4;
  border-radius: 5px;
  width: 24px;
  height: 24px;
  padding: 0;
  cursor: pointer;
  font-size: 12px;
  line-height: 1;
  transition: background 0.15s, color 0.15s;
}
.kta-group-flyout-close:hover {
  background: rgba(255, 255, 255, 0.05);
  color: #e8eaf0;
}

.kta-group-flyout-grid {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.kta-group-flyout-btn {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  background: #141823;
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 6px;
  color: #e8eaf0;
  cursor: pointer;
  text-align: left;
  font-size: 13px;
  font-family: inherit;
  line-height: 1.3;
  transition: background 0.15s, border-color 0.15s, transform 0.08s;
}
.kta-group-flyout-btn:hover {
  background: #1f2638;
  border-color: rgba(140, 180, 255, 0.3);
}
.kta-group-flyout-btn:active {
  transform: scale(0.98);
}
.kta-group-flyout-btn.kta-actif {
  background: #2a3145;
  border-color: rgba(244, 197, 66, 0.65);
  color: #f4c542;
  box-shadow: 0 0 0 1px rgba(244, 197, 66, 0.25) inset;
}

.kta-group-flyout-btn-icon {
  flex: 0 0 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  line-height: 1;
}

.kta-group-flyout-btn-label {
  flex: 1 1 auto;
  white-space: normal;
  word-break: break-word;
}

/* Séparateur visuel entre la dernière action type et la première outil
   (insertion d'une fine ligne via la classe kta-flyout-sep). */
.kta-group-flyout-sep {
  height: 1px;
  background: rgba(255, 255, 255, 0.08);
  margin: 4px 2px;
}

/* Thème clair — overrides */
body.kta-theme-light .kta-group-flyout {
  background: var(--kta-light-bg-elevated);
  border-color: var(--kta-light-border-strong);
  box-shadow: 0 12px 32px var(--kta-light-shadow);
}
body.kta-theme-light .kta-group-flyout-header {
  border-bottom-color: var(--kta-light-border);
  /* Sticky header bg adapté au theme clair (sinon transparent → items
     défilent visibles en filigrane sous le titre). */
  background: var(--kta-light-bg-elevated);
}
body.kta-theme-light .kta-group-flyout-title {
  color: var(--kta-light-text);
}
body.kta-theme-light .kta-group-flyout-close {
  color: #555;
  border-color: var(--kta-light-border-strong);
}
body.kta-theme-light .kta-group-flyout-close:hover {
  background: rgba(0, 0, 0, 0.05);
  color: var(--kta-light-text);
}
body.kta-theme-light .kta-group-flyout-btn {
  background: var(--kta-light-bg);
  color: var(--kta-light-text);
  border-color: var(--kta-light-border-strong);
}
body.kta-theme-light .kta-group-flyout-btn:hover {
  background: rgba(244, 197, 66, 0.08);
  border-color: var(--kta-light-accent);
}
body.kta-theme-light .kta-group-flyout-btn.kta-actif {
  background: rgba(244, 197, 66, 0.15);
  border-color: var(--kta-light-accent);
  color: var(--kta-light-accent);
}
body.kta-theme-light .kta-group-flyout-sep {
  background: var(--kta-light-border);
}

/* ==============================================
   🆕 v1.16.0 step 2 : Personnalisation de la légende (modale Export PNG)
   ============================================== */

.kta-legend-custom-details {
  background: rgba(255,255,255,0.02);
  font-size: 12.5px;
}
.kta-legend-custom-details > summary {
  list-style: none;
}
.kta-legend-custom-details > summary::-webkit-details-marker { display: none; }
.kta-legend-custom-details > summary::before {
  content: "▶ ";
  font-size: 10px;
  color: #8892a4;
  margin-right: 4px;
  display: inline-block;
  transition: transform 0.15s;
}
.kta-legend-custom-details[open] > summary::before {
  transform: rotate(90deg);
}

.kta-legend-cat {
  margin: 6px 0;
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 5px;
  padding: 4px 6px;
  background: rgba(0,0,0,0.15);
}
.kta-legend-cat > summary {
  list-style: none;
  cursor: pointer;
  font-weight: 600;
  color: #c8d0e0;
  padding: 3px 0;
  user-select: none;
}
.kta-legend-cat > summary::-webkit-details-marker { display: none; }
.kta-legend-cat > summary::before {
  content: "▶ ";
  font-size: 9px;
  color: #8892a4;
  margin-right: 4px;
  display: inline-block;
  transition: transform 0.15s;
}
.kta-legend-cat[open] > summary::before {
  transform: rotate(90deg);
}
.kta-legend-count {
  color: #8892a4;
  font-weight: 400;
  font-size: 11px;
}

.kta-legend-cat-body {
  padding: 4px 0 2px 6px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.kta-legend-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 3px 0;
}

.kta-legend-vis {
  display: flex;
  align-items: center;
  flex: 0 0 auto;
}
.kta-legend-vis-cb {
  margin: 0;
  cursor: pointer;
  accent-color: #4d8aff;
}

.kta-legend-label {
  flex: 1 1 auto;
  min-width: 0;
  background: #0d1117;
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 4px;
  color: #e8eaf0;
  font-size: 12px;
  padding: 3px 6px;
  outline: none;
  transition: border-color 0.15s;
}
.kta-legend-label::placeholder {
  color: #6c7385;
  font-style: italic;
}
.kta-legend-label:focus {
  border-color: #4d8aff;
}

.kta-legend-src {
  font-size: 10.5px;
  flex: 0 0 auto;
  opacity: 0.65;
  cursor: help;
}
.kta-legend-src-session { color: #f4c542; opacity: 1; }
.kta-legend-src-plan    { color: #8cb4ff; opacity: 1; }
.kta-legend-src-default { color: #6c7385; }

.kta-legend-rm {
  background: transparent;
  border: 1px solid rgba(255, 80, 80, 0.3);
  color: #ff7070;
  border-radius: 4px;
  padding: 2px 6px;
  font-size: 11px;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
  flex: 0 0 auto;
}
.kta-legend-rm:hover {
  background: rgba(255, 80, 80, 0.15);
  border-color: rgba(255, 80, 80, 0.6);
}

/* Mini-modale "Ajouter une entrée custom" — réutilise les classes
   kta-modal* existantes ; juste un override de z-index pour passer
   au-dessus de la modale Export. */
.kta-legend-add-overlay {
  background: rgba(0,0,0,0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
}

/* Theme clair — overrides pour lisibilité */
body.kta-theme-light .kta-legend-cat {
  background: rgba(0,0,0,0.04);
  border-color: var(--kta-light-border-strong);
}
body.kta-theme-light .kta-legend-cat > summary {
  color: var(--kta-light-text);
}
body.kta-theme-light .kta-legend-count {
  color: #555;
}
body.kta-theme-light .kta-legend-label {
  background: var(--kta-light-bg) !important;
  color: var(--kta-light-text) !important;
  border-color: var(--kta-light-border-strong) !important;
}
body.kta-theme-light .kta-legend-label::placeholder {
  color: #999;
}
body.kta-theme-light .kta-legend-label:focus {
  border-color: var(--kta-light-accent) !important;
  box-shadow: 0 0 0 2px rgba(244, 197, 66, 0.25);
}

/* ===========================================================
   🆕 v1.17.0 — Switcher Simple/Avancé du Générateur
   =========================================================== */

.kta-planner-mode-switcher {
  display: flex;
  gap: 6px;
  justify-content: center;
  margin: 4px 0 6px;
  padding: 4px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 10px;
}

.kta-planner-mode-btn {
  flex: 1 1 auto;
  max-width: 200px;
  padding: 10px 18px;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 8px;
  color: #c8d0e0;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.kta-planner-mode-btn:hover {
  background: rgba(244, 197, 66, 0.10);
  color: #f4c542;
}
.kta-planner-mode-btn.kta-actif {
  background: #f4c542;
  color: #1a1f2e;
  border-color: rgba(0, 0, 0, 0.15);
  box-shadow: 0 1px 4px rgba(244, 197, 66, 0.35);
}

.kta-planner-mode-hint {
  margin: 0 0 12px;
  padding: 6px 12px;
  font-size: 12px;
  font-style: italic;
  color: #8892a4;
  text-align: center;
  line-height: 1.4;
}

/* Masquage automatique des sections avancées en mode Simple.
   data-planner-advanced="1" est appliqué dans le HTML de createConf.js
   sur toutes les sections / inputs réservés au mode Avancé. */
#kta-planner-corps[data-planner-mode="simple"] [data-planner-advanced="1"] {
  display: none !important;
}

/* ===========================================================
   🆕 v1.17.0 — Section légende plan-level (Avancé only)
   =========================================================== */

.kta-planner-legend-status {
  margin: 8px 0 12px;
  padding: 8px 12px;
  font-size: 12.5px;
  color: #8892a4;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 6px;
  font-style: italic;
  line-height: 1.5;
}
.kta-planner-legend-status.kta-planner-legend-status-actif {
  color: #f4c542;
  background: rgba(244, 197, 66, 0.08);
  border-color: rgba(244, 197, 66, 0.25);
  font-style: normal;
  font-weight: 500;
}

.kta-planner-legend-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}
.kta-planner-legend-actions .kta-btn {
  flex: 0 1 auto;
}

/* ===========================================================
   🆕 v1.17.0 — Variants thème clair
   =========================================================== */

body.kta-theme-light .kta-planner-mode-switcher,
html.kta-theme-light .kta-planner-mode-switcher {
  background: var(--kta-light-bg-deep) !important;
  border-color: var(--kta-light-border-strong) !important;
}
body.kta-theme-light .kta-planner-mode-btn,
html.kta-theme-light .kta-planner-mode-btn {
  color: var(--kta-light-text-muted) !important;
}
body.kta-theme-light .kta-planner-mode-btn:hover,
html.kta-theme-light .kta-planner-mode-btn:hover {
  background: var(--kta-light-accent-bg) !important;
  color: var(--kta-light-accent-hover) !important;
}
/* 🐛 v1.37.0 fix3 — KARMA "je parle du remplissage du mode" : le bouton
   actif en theme clair n'a pas de fond visible. fix2 avait passé en orange
   saturé mais le cache CSS PWA peut servir l'ancienne version. Pour ce
   fix : sélecteur ULTRA-spécifique (#kta-planner-corps en plus) + couleur
   orange brûlée bien marquée + valeur HEX en dur (pas de var pour éviter
   cascade tordue) + double sélecteur body+html. Si KARMA voit toujours
   pas le remplissage après ce fix, c'est qu'il sert encore l'ancien CSS
   du cache PWA → hard-refresh requis (Ctrl+Shift+R) ou ré-update SW. */
body.kta-theme-light #kta-planner-corps .kta-planner-mode-btn.kta-actif,
html.kta-theme-light #kta-planner-corps .kta-planner-mode-btn.kta-actif,
body.kta-theme-light .kta-planner-mode-btn.kta-actif,
html.kta-theme-light .kta-planner-mode-btn.kta-actif {
  background: #cc7a00 !important;            /* orange brûlé saturé, contraste max sur fond beige */
  background-image: linear-gradient(180deg, #d9881a 0%, #b86a00 100%) !important;
  color: #ffffff !important;
  border: 2px solid #8a4f00 !important;      /* orange foncé pour la bordure (foncé ≠ accent) */
  box-shadow:
    0 0 0 2px rgba(204, 122, 0, 0.30),
    0 2px 6px rgba(138, 79, 0, 0.50),
    inset 0 1px 0 rgba(255, 255, 255, 0.25)
  !important;
  font-weight: 700 !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.30);
}

body.kta-theme-light .kta-planner-mode-hint,
html.kta-theme-light .kta-planner-mode-hint {
  color: var(--kta-light-text-muted) !important;
}

body.kta-theme-light .kta-planner-legend-status,
html.kta-theme-light .kta-planner-legend-status {
  background: var(--kta-light-bg-deep) !important;
  border-color: var(--kta-light-border) !important;
  color: var(--kta-light-text-muted) !important;
}
body.kta-theme-light .kta-planner-legend-status-actif,
html.kta-theme-light .kta-planner-legend-status-actif {
  background: var(--kta-light-accent-bg) !important;
  border-color: var(--kta-light-accent) !important;
  color: var(--kta-light-text) !important;
}
/* ===========================================================
   🆕 v1.20.0-fix1 — Modales Logs (debug + réseau) thème clair
   Bug remonté KARMA : fond #0d1117 hardcodé + texte clair
   #c8d0e0 → illisible en mode clair (clair sur clair).
   =========================================================== */

/* ───────────────────────────────────────────────────────────
   Modale 🐛 Logs de débogage — Classes générées dynamiquement
   par js/debug.js > _refreshModal (depuis v1.20.0-fix1, avant
   les couleurs étaient inline → pas overridables).
   ─────────────────────────────────────────────────────────── */
.kta-debug-log-line {
  padding: 2px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
  color: #c8d0e0;
  word-break: break-all;
}
.kta-debug-log-line.kta-debug-log-error { color: #ff6b6b; }
.kta-debug-log-line.kta-debug-log-warn  { color: #ffcc00; }
.kta-debug-log-line.kta-debug-log-crash { color: #888; }

/* Overrides thème clair — fond zone logs + couleurs lignes */
body.kta-theme-light #kta-debug-logzone,
html.kta-theme-light #kta-debug-logzone {
  background: var(--kta-light-bg-deep) !important;
  color: var(--kta-light-text) !important;
}
body.kta-theme-light .kta-debug-log-line,
html.kta-theme-light .kta-debug-log-line {
  color: var(--kta-light-text) !important;
  border-bottom-color: var(--kta-light-border) !important;
}
body.kta-theme-light .kta-debug-log-line.kta-debug-log-error,
html.kta-theme-light .kta-debug-log-line.kta-debug-log-error {
  /* Rouge plus saturé pour rester lisible sur fond clair */
  color: #b91c1c !important;
}
body.kta-theme-light .kta-debug-log-line.kta-debug-log-warn,
html.kta-theme-light .kta-debug-log-line.kta-debug-log-warn {
  /* Orange ambré pour contraste sur fond clair (le jaune clair ne marche pas) */
  color: #b45309 !important;
}
body.kta-theme-light .kta-debug-log-line.kta-debug-log-crash,
html.kta-theme-light .kta-debug-log-line.kta-debug-log-crash {
  color: var(--kta-light-text-muted) !important;
}

/* ───────────────────────────────────────────────────────────
   Modale 📋 Journal réseau — overrides thème clair
   ─────────────────────────────────────────────────────────── */
body.kta-theme-light .kta-net-log-meta,
html.kta-theme-light .kta-net-log-meta {
  background: rgba(140, 180, 255, 0.10) !important;
  border-bottom-color: rgba(140, 180, 255, 0.30) !important;
  color: var(--kta-light-text) !important;
}
body.kta-theme-light .kta-net-log-table-wrap,
html.kta-theme-light .kta-net-log-table-wrap {
  background: var(--kta-light-bg-deep) !important;
}
body.kta-theme-light .kta-net-log-table,
html.kta-theme-light .kta-net-log-table {
  color: var(--kta-light-text) !important;
}
body.kta-theme-light .kta-net-log-table thead,
html.kta-theme-light .kta-net-log-table thead {
  background: var(--kta-light-bg-bar) !important;
}
body.kta-theme-light .kta-net-log-table thead th,
html.kta-theme-light .kta-net-log-table thead th {
  color: #1e3a8a !important;
  border-bottom-color: rgba(140, 180, 255, 0.40) !important;
}
body.kta-theme-light .kta-net-log-table tbody td,
html.kta-theme-light .kta-net-log-table tbody td {
  border-bottom-color: var(--kta-light-border) !important;
}
body.kta-theme-light .kta-net-log-table tbody tr:hover,
html.kta-theme-light .kta-net-log-table tbody tr:hover {
  background: rgba(140, 180, 255, 0.10) !important;
}
/* Couleurs des cellules : adapter au fond clair pour rester lisible */
body.kta-theme-light .kta-net-cell-time,
html.kta-theme-light .kta-net-cell-time {
  color: var(--kta-light-text-muted) !important;
}
body.kta-theme-light .kta-net-cell-kind,
html.kta-theme-light .kta-net-cell-kind,
body.kta-theme-light .kta-net-cell-url,
html.kta-theme-light .kta-net-cell-url {
  color: var(--kta-light-text) !important;
}
body.kta-theme-light .kta-net-cell-method,
html.kta-theme-light .kta-net-cell-method {
  /* Jaune charte plus saturé pour rester lisible sur fond clair */
  color: var(--kta-light-accent-hover) !important;
}

/* ============================================================
   👤 USER PROFILE — Bandeau loader + Modale détails (Karma_dev)
   ============================================================ */

/* 🆕 v1.40.42 + v1.40.49 — Wrapper `.kta-loader-top-row` qui groupe
   profile-bar + resumeBox sur 1 ligne PC (≥1024px). Mobile : display:contents
   (stack vertical naturel).
   v1.40.49 : Grid identique à .loader-grid dessous (2fr 3fr 2fr) → bouton
   Reprendre occupe la col 3 = largeur de "Ajouter un plan" (KARMA "le bouton
   reprendre doit rentrer dans le carré rouge" qui était col 3). width:100%
   sur le bouton pour qu'il remplisse vraiment la cellule horizontalement. */
.kta-loader-top-row {
  display: contents;
}
@media (min-width: 1024px) {
  .kta-loader-top-row {
    display: grid;
    grid-template-columns: 2fr 3fr 2fr;   /* identique .loader-grid pour alignement */
    gap: 0 24px;
    align-items: stretch;
    margin-bottom: 18px;
  }
  .kta-loader-top-row .kta-loader-profile-bar {
    grid-column: 1 / span 2;              /* cols 1+2 = "Mes plans" + "Vue OSM" */
    margin: 0;
  }
  .kta-loader-top-row #resumeBox {
    grid-column: 3;                       /* col 3 = "Ajouter un plan" */
    margin: 0;
    display: flex !important;
    align-items: stretch;
  }
  .kta-loader-top-row #resumeBox[style*="display:none"],
  .kta-loader-top-row #resumeBox[style*="display: none"] {
    display: none !important;
  }
  .kta-loader-top-row #resumeBox .loader-btn-resume {
    width: 100%;                          /* remplit la largeur de la cellule col 3 */
  }
}

/* ─── BANDEAU EN-TÊTE LOADER ─── */
.kta-loader-profile-bar {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 0 0 18px 0;
  padding: 12px 16px;
  background: linear-gradient(135deg, rgba(244,197,66,0.08), rgba(140,180,255,0.06));
  border: 1px solid rgba(244,197,66,0.22);
  border-radius: 12px;
  cursor: pointer;
  transition: background 0.18s, border-color 0.18s, transform 0.18s;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}
.kta-loader-profile-bar:hover,
.kta-loader-profile-bar:focus-visible {
  background: linear-gradient(135deg, rgba(244,197,66,0.14), rgba(140,180,255,0.10));
  border-color: rgba(244,197,66,0.40);
  outline: none;
}
.kta-loader-profile-bar:active {
  transform: scale(0.99);
}

.kta-loader-profile-avatar-wrap {
  flex: 0 0 auto;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0,0,0,0.35), 0 0 0 2px rgba(244,197,66,0.30);
  display: flex;
  align-items: center;
  justify-content: center;
}
.kta-loader-profile-avatar-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.kta-loader-profile-avatar-initial {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  font-weight: 700;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
  letter-spacing: 0;
}
.kta-loader-profile-avatar-initial.kta-loader-profile-avatar-empty {
  background: #2a2f3e;
  color: #8892a4;
  font-size: 26px;
  font-weight: 400;
}

.kta-loader-profile-info {
  flex: 1 1 auto;
  min-width: 0;  /* pour ellipsis */
  display: flex;
  flex-direction: column;
  gap: 2px;
  overflow: hidden;
}
.kta-loader-profile-greeting {
  font-size: 11px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: #8892a4;
}
.kta-loader-profile-surnom {
  font-size: 17px;
  font-weight: 700;
  color: #f4c542;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.kta-loader-profile-surnom.kta-loader-profile-surnom-empty {
  color: #8892a4;
  font-style: italic;
  font-weight: 400;
}

/* 🆕 v1.21.1 (KARMA) : bouton ⚙️ Détails RETIRÉ — toute la box bandeau
   est cliquable. CSS conservé pour rétrocompat éventuelle si flag dev. */
.kta-loader-profile-btn-details {
  display: none !important;
}

/* 🆕 v1.21.1-fix2 (KARMA "on a la place en longueur pour en afficher
   une deuxieme sur mobile") : breakpoint abaissé à 380px pour afficher
   les 2 stats dès mobile médian (iPhone Mini 375, Galaxy S20 412, etc.).
   - Mobile < 380px : cachées (très petits écrans uniquement)
   - Mobile/Tablet/Desktop ≥ 380px : 2 stats visibles (temps + storage) */
.kta-loader-profile-stats {
  flex: 0 0 auto;
  display: none;  /* default : très petit mobile = caché */
  gap: 6px;       /* gap réduit pour compacité mobile */
  align-items: center;
}
@media (min-width: 380px) {
  .kta-loader-profile-stats {
    display: flex;
  }
}
/* Stat compacte revue pour gagner en compacité sur mobile —
   override de la déclaration plus bas pour ajuster mobile spécifiquement.
   La déclaration mobile-first compacte est dans la suite via media query. */
@media (min-width: 600px) {
  .kta-loader-profile-stat {
    padding: 4px 10px !important;
    min-width: 60px !important;
  }
}
.kta-loader-profile-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  /* Mobile-first compact (overridé > 600px via media query au-dessus) */
  padding: 4px 8px;
  min-width: 52px;
  background: rgba(0,0,0,0.18);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 8px;
}
.kta-loader-profile-stat-icon {
  font-size: 14px;
  line-height: 1;
}
.kta-loader-profile-stat-val {
  font-size: 11.5px;
  font-weight: 600;
  color: #c8d0e0;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* Variant thème clair pour les stats compactes */
body.kta-theme-light .kta-loader-profile-stat,
html.kta-theme-light .kta-loader-profile-stat {
  background: rgba(0,0,0,0.05) !important;
  border-color: rgba(154,135,84,0.30) !important;
}
body.kta-theme-light .kta-loader-profile-stat-val,
html.kta-theme-light .kta-loader-profile-stat-val {
  color: var(--kta-light-text, #2a2620) !important;
}

/* Mobile (≤ 600px) : version compacte */
@media (max-width: 600px) {
  .kta-loader-profile-bar {
    padding: 10px 12px;
    gap: 10px;
    margin-bottom: 14px;
  }
  .kta-loader-profile-avatar-wrap {
    width: 44px;
    height: 44px;
  }
  .kta-loader-profile-avatar-initial {
    font-size: 19px;
  }
  .kta-loader-profile-greeting {
    font-size: 10px;
  }
  .kta-loader-profile-surnom {
    font-size: 15px;
  }
  .kta-loader-profile-btn-details {
    width: 32px;
    height: 32px;
    font-size: 15px;
  }
}

/* PC ≥ 1024px : un peu plus spacieux pour valoriser */
@media (min-width: 1024px) {
  .kta-loader-profile-bar {
    padding: 14px 18px;
    gap: 16px;
  }
  .kta-loader-profile-avatar-wrap {
    width: 58px;
    height: 58px;
  }
  .kta-loader-profile-avatar-initial {
    font-size: 25px;
  }
  .kta-loader-profile-surnom {
    font-size: 18px;
  }
}

/* ─── MODALE DÉTAILS DU PROFIL ─── */
.kta-profile-details-boite {
  max-width: 520px;
  height: auto !important;
  max-height: 92vh !important;
}
@media (min-width: 1024px) {
  .kta-profile-details-boite {
    max-width: 640px;
  }
}

.kta-profile-details-corps {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.kta-profile-details-identity {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 18px 14px 14px;
  background: rgba(244,197,66,0.05);
  border: 1px solid rgba(244,197,66,0.18);
  border-radius: 10px;
}

.kta-profile-details-avatar-big {
  width: 96px;
  height: 96px;
  border-radius: 50%;
  overflow: hidden;
  box-shadow: 0 4px 16px rgba(0,0,0,0.40), 0 0 0 3px rgba(244,197,66,0.40);
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
}
.kta-profile-details-avatar-photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.kta-profile-details-avatar-initial {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 42px;
  font-weight: 700;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
}
.kta-profile-details-avatar-initial.kta-profile-details-avatar-empty {
  background: #2a2f3e;
  color: #8892a4;
  font-size: 50px;
  font-weight: 400;
}
@media (min-width: 1024px) {
  .kta-profile-details-avatar-big {
    width: 112px;
    height: 112px;
  }
  .kta-profile-details-avatar-initial {
    font-size: 50px;
  }
}

.kta-profile-details-photo-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: center;
}
.kta-btn-mini {
  padding: 5px 12px !important;
  font-size: 12px !important;
}

.kta-profile-details-name-row {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 8px;
  align-items: center;
  width: 100%;
}
.kta-profile-details-label {
  font-size: 12px;
  color: #8892a4;
  text-transform: uppercase;
  letter-spacing: 1px;
  font-weight: 600;
}
.kta-profile-details-input {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(140,180,255,0.22);
  color: #e8eaf0;
  padding: 8px 12px;
  border-radius: 6px;
  font-size: 15px;
  font-family: inherit;
  width: 100%;
  box-sizing: border-box;
  transition: border-color 0.15s, background 0.15s;
}
.kta-profile-details-input:focus {
  outline: none;
  border-color: #f4c542;
  background: rgba(244,197,66,0.06);
}
.kta-profile-details-hint {
  font-size: 12px;
  color: #8892a4;
  font-style: italic;
  margin: 0;
  text-align: center;
  line-height: 1.45;
}

/* Stats compactes */
.kta-profile-details-stats {
  background: rgba(140,180,255,0.05);
  border: 1px solid rgba(140,180,255,0.18);
  border-radius: 10px;
  padding: 14px;
}
.kta-profile-details-stats-loading {
  text-align: center;
  font-style: italic;
  color: #8892a4;
}
.kta-profile-stat-grid {
  display: grid;
  /* 🆕 v1.21.3 : 6 cells au lieu de 5 (ajout sauvegarde).
     Mobile 2 cols × 3 rows / PC 3 cols × 2 rows = layout équilibré. */
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
@media (min-width: 600px) {
  .kta-profile-stat-grid {
    grid-template-columns: repeat(3, 1fr);
  }
  .kta-profile-stat-cell-wide {
    grid-column: span 3;
  }
}
.kta-profile-stat-cell {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 8px 4px;
  background: rgba(0,0,0,0.18);
  border-radius: 8px;
}
.kta-profile-stat-cell-wide {
  grid-column: span 2;
}
/* 🆕 v1.21.3 : taille de police réduite pour les valeurs bytes "12.3 MB"
   (par rapport aux chiffres seuls comme "47 plans"). */
.kta-profile-stat-num-bytes {
  font-size: 17px !important;
}
.kta-profile-stat-num {
  font-size: 22px;
  font-weight: 700;
  color: #f4c542;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", monospace;
  line-height: 1.1;
}
.kta-profile-stat-lbl {
  font-size: 11px;
  color: #8892a4;
  margin-top: 2px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* 🆕 v1.21.3 (KARMA "on doit dans ce cas pouvoir choisir dans profile les
   2 ou 3 stats du bandeau") — Section toggle stats du bandeau home. */
.kta-profile-barstats {
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}
.kta-profile-barstats-header {
  font-size: 13px;
  font-weight: 600;
  color: #c8d0e0;
  margin-bottom: 4px;
}
.kta-profile-barstats-hint {
  font-size: 11.5px;
  color: #8892a4;
  margin: 0 0 8px;
  font-style: italic;
  line-height: 1.4;
}
.kta-profile-barstats-options {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.kta-profile-barstats-cb {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 6px;
  cursor: pointer;
  font-size: 13px;
  color: #e8eaf0;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.kta-profile-barstats-cb:hover {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(244, 197, 66, 0.30);
}
.kta-profile-barstats-cb input[type=checkbox] {
  width: 16px;
  height: 16px;
  accent-color: #f4c542;
  cursor: pointer;
}
@media (min-width: 600px) {
  .kta-profile-barstats-options {
    flex-direction: row;
    flex-wrap: wrap;
  }
  .kta-profile-barstats-cb {
    flex: 1 1 calc(33.33% - 6px);
    min-width: 0;
  }
}
/* Thème clair */
body.kta-theme-light .kta-profile-barstats,
html.kta-theme-light .kta-profile-barstats {
  border-top-color: var(--kta-light-border) !important;
}
body.kta-theme-light .kta-profile-barstats-header,
html.kta-theme-light .kta-profile-barstats-header {
  color: var(--kta-light-text) !important;
}
body.kta-theme-light .kta-profile-barstats-hint,
html.kta-theme-light .kta-profile-barstats-hint {
  color: var(--kta-light-text-muted) !important;
}
body.kta-theme-light .kta-profile-barstats-cb,
html.kta-theme-light .kta-profile-barstats-cb {
  background: rgba(0, 0, 0, 0.03) !important;
  border-color: var(--kta-light-border) !important;
  color: var(--kta-light-text) !important;
}
body.kta-theme-light .kta-profile-barstats-cb:hover,
html.kta-theme-light .kta-profile-barstats-cb:hover {
  background: rgba(0, 0, 0, 0.05) !important;
  border-color: rgba(161, 110, 16, 0.40) !important;
}

/* 🆕 v1.21.3 (KARMA "dans les stat, rajoute comme on voit sur chaque plan
   stat détailé les graph et tout") — Section camemberts agrégés cross-plan
   dans la modale 👤 Mon profil, après la table "📊 Mes plans". Réutilise
   le rendu de window.StatsGlobales.renderPieChart (cf statsGlobales.js). */
.kta-profile-pies-wrap {
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}
.kta-profile-pies-header {
  font-size: 13px;
  font-weight: 600;
  color: #c8d0e0;
  margin-bottom: 10px;
}
.kta-profile-pies-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
}
@media (min-width: 720px) {
  .kta-profile-pies-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (min-width: 1200px) {
  .kta-profile-pies-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
.kta-profile-pies-card {
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  padding: 10px 12px;
}
.kta-profile-pies-card-title {
  font-size: 12.5px;
  font-weight: 600;
  color: #f4c542;
  margin-bottom: 6px;
}
/* Thème clair — section camemberts */
body.kta-theme-light .kta-profile-pies-wrap,
html.kta-theme-light .kta-profile-pies-wrap {
  border-top-color: var(--kta-light-border) !important;
}
body.kta-theme-light .kta-profile-pies-header,
html.kta-theme-light .kta-profile-pies-header {
  color: var(--kta-light-text) !important;
}
body.kta-theme-light .kta-profile-pies-card,
html.kta-theme-light .kta-profile-pies-card {
  background: rgba(0, 0, 0, 0.02) !important;
  border-color: var(--kta-light-border) !important;
}
body.kta-theme-light .kta-profile-pies-card-title,
html.kta-theme-light .kta-profile-pies-card-title {
  color: #6b4d10 !important;
}

/* 🆕 v1.21.3 (KARMA "récuperer les stat global de chaque plan pour les lister")
   — Section stats agrégées par plan dans la modale 👤 Mon profil. Calcul
   séquentiel anti-crash (cf index.html > _calculerStatsPlansAggregees). */
.kta-profile-plansstats {
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}
.kta-profile-plansstats-header {
  font-size: 13px;
  font-weight: 600;
  color: #c8d0e0;
  margin-bottom: 8px;
}
.kta-profile-plansstats-wrap {
  max-height: 280px;
  overflow-y: auto;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.02);
}
.kta-profile-plansstats-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
  color: #c8d0e0;
}
.kta-profile-plansstats-table thead th {
  position: sticky;
  top: 0;
  background: rgba(244, 197, 66, 0.10);
  color: #f4c542;
  font-weight: 600;
  padding: 6px 8px;
  text-align: center;
  border-bottom: 1px solid rgba(244, 197, 66, 0.30);
  font-size: 11px;
}
.kta-profile-plansstats-table thead th:first-child { text-align: left; }
.kta-profile-plansstats-table tbody tr {
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}
.kta-profile-plansstats-table tbody tr:last-child { border-bottom: none; }
.kta-profile-plansstats-table tbody td {
  padding: 5px 8px;
  vertical-align: middle;
}
.kta-profile-plansstats-table .kta-pps-name {
  text-align: left;
  word-break: break-word;
  max-width: 180px;
}
.kta-profile-plansstats-table .kta-pps-num {
  text-align: center;
  font-family: ui-monospace, "SF Mono", Consolas, monospace;
  font-size: 11.5px;
}
.kta-pps-version {
  font-size: 10px;
  color: #8892a4;
  margin-left: 4px;
}
.kta-pps-current {
  color: #6ce28a;
  font-size: 10px;
  margin-left: 4px;
  vertical-align: middle;
}
.kta-profile-plansstats-table .kta-pps-row-current {
  background: rgba(108, 226, 138, 0.06);
}
/* 🆕 v1.21.3 (KARMA "les stat de plan ne comprenne que les session") :
   marqueur "partial" — plan jamais ouvert dans cette release, on n'a
   accès qu'aux stats de session (data layers embedded manquants). */
.kta-pps-partial {
  color: #f4c542;
  font-size: 11px;
  margin-left: 4px;
  cursor: help;
}
.kta-profile-plansstats-table .kta-pps-row-partial {
  background: rgba(244, 197, 66, 0.04);
}
.kta-profile-plansstats-table tfoot th {
  background: rgba(244, 197, 66, 0.04);
  color: #f4c542;
  font-weight: 700;
  padding: 6px 8px;
  border-top: 1px solid rgba(244, 197, 66, 0.30);
  font-size: 11.5px;
}
.kta-profile-plansstats-table tfoot th:first-child { text-align: left; }
.kta-profile-plansstats-note {
  margin: 6px 0 0;
  font-size: 10.5px;
  color: #8892a4;
  font-style: italic;
  line-height: 1.4;
}

/* Thème clair — section plans stats */
body.kta-theme-light .kta-profile-plansstats,
html.kta-theme-light .kta-profile-plansstats {
  border-top-color: var(--kta-light-border) !important;
}
body.kta-theme-light .kta-profile-plansstats-header,
html.kta-theme-light .kta-profile-plansstats-header {
  color: var(--kta-light-text) !important;
}
body.kta-theme-light .kta-profile-plansstats-wrap,
html.kta-theme-light .kta-profile-plansstats-wrap {
  background: rgba(0, 0, 0, 0.02) !important;
  border-color: var(--kta-light-border) !important;
}
body.kta-theme-light .kta-profile-plansstats-table,
html.kta-theme-light .kta-profile-plansstats-table {
  color: var(--kta-light-text) !important;
}
body.kta-theme-light .kta-profile-plansstats-table thead th,
html.kta-theme-light .kta-profile-plansstats-table thead th {
  background: var(--kta-light-accent-bg) !important;
  color: #6b4d10 !important;
  border-bottom-color: rgba(161, 110, 16, 0.30) !important;
}
body.kta-theme-light .kta-profile-plansstats-table tbody tr,
html.kta-theme-light .kta-profile-plansstats-table tbody tr {
  border-bottom-color: var(--kta-light-border) !important;
}
body.kta-theme-light .kta-profile-plansstats-table tfoot th,
html.kta-theme-light .kta-profile-plansstats-table tfoot th {
  background: rgba(161, 110, 16, 0.06) !important;
  color: #6b4d10 !important;
  border-top-color: rgba(161, 110, 16, 0.30) !important;
}
body.kta-theme-light .kta-pps-version,
html.kta-theme-light .kta-pps-version {
  color: var(--kta-light-text-muted) !important;
}

/* Actions */
.kta-profile-details-actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
@media (min-width: 600px) {
  .kta-profile-details-actions {
    flex-direction: row;
    flex-wrap: wrap;
  }
  .kta-profile-details-actions .kta-btn {
    flex: 1 1 auto;
  }
  .kta-profile-details-actions .kta-btn-danger {
    flex: 1 1 100%;
  }
}
.kta-profile-details-footer-hint {
  font-size: 11px;
  color: #6e7787;
  font-style: italic;
  margin: 0;
  line-height: 1.5;
  padding: 8px 10px;
  background: rgba(255,255,255,0.03);
  border-radius: 6px;
}

/* ─── THÈME CLAIR — overrides bandeau + modale ─── */
/* Karma_dev fix UX : aligné sur le pattern card "Mes plans" / "Reprendre" /
   "Ajouter un plan" pour cohérence visuelle. Fond uni #fdf8eb (= variable
   --kta-light-bg-elevated) + bordure ocre douce + radius 14px + ombre
   diffuse warm. Évite le gradient doré/bleu qui détonnait sur le fond
   beige cataphile du loader clair. */
body.kta-theme-light .kta-loader-profile-bar,
html.kta-theme-light .kta-loader-profile-bar {
  background: #fdf8eb !important;
  border: 1px solid rgba(154, 135, 84, 0.35) !important;
  border-radius: 14px !important;
  box-shadow: 0 4px 14px rgba(80, 60, 30, 0.10) !important;
}
body.kta-theme-light .kta-loader-profile-bar:hover,
html.kta-theme-light .kta-loader-profile-bar:hover,
body.kta-theme-light .kta-loader-profile-bar:focus-visible,
html.kta-theme-light .kta-loader-profile-bar:focus-visible {
  /* Hover : juste subtle tint warm + bordure ambre */
  background: #fdfaef !important;
  border-color: var(--kta-light-accent-hover, #d9a82e) !important;
  box-shadow: 0 5px 18px rgba(80, 60, 30, 0.14) !important;
}
body.kta-theme-light .kta-loader-profile-avatar-wrap,
html.kta-theme-light .kta-loader-profile-avatar-wrap {
  box-shadow: 0 2px 8px rgba(80,60,30,0.18), 0 0 0 2px var(--kta-light-accent-hover, #d9a82e) !important;
}
body.kta-theme-light .kta-loader-profile-avatar-initial.kta-loader-profile-avatar-empty,
html.kta-theme-light .kta-loader-profile-avatar-initial.kta-loader-profile-avatar-empty {
  background: var(--kta-light-bg-deep, #e5dcc5) !important;
  color: var(--kta-light-text-muted, #6b6354) !important;
}
body.kta-theme-light .kta-loader-profile-greeting,
html.kta-theme-light .kta-loader-profile-greeting {
  color: var(--kta-light-text-muted, #6b6354) !important;
}
body.kta-theme-light .kta-loader-profile-surnom,
html.kta-theme-light .kta-loader-profile-surnom {
  color: var(--kta-light-accent-hover, #d9a82e) !important;
}
body.kta-theme-light .kta-loader-profile-surnom-empty,
html.kta-theme-light .kta-loader-profile-surnom-empty {
  color: var(--kta-light-text-muted, #6b6354) !important;
}
body.kta-theme-light .kta-loader-profile-btn-details,
html.kta-theme-light .kta-loader-profile-btn-details {
  background: rgba(0,0,0,0.06) !important;
  border-color: var(--kta-light-border-strong, rgba(0,0,0,0.22)) !important;
  color: var(--kta-light-text, #2a2620) !important;
}
body.kta-theme-light .kta-loader-profile-btn-details:hover,
html.kta-theme-light .kta-loader-profile-btn-details:hover {
  background: rgba(0,0,0,0.12) !important;
}

/* Modale détails */
html.kta-theme-light .kta-profile-details-identity {
  background: rgba(244,197,66,0.14) !important;
  border-color: rgba(154,135,84,0.30) !important;
}
html.kta-theme-light .kta-profile-details-avatar-big {
  box-shadow: 0 4px 16px rgba(80,60,30,0.22), 0 0 0 3px var(--kta-light-accent-hover, #d9a82e) !important;
}
html.kta-theme-light .kta-profile-details-avatar-empty {
  background: var(--kta-light-bg-deep, #e5dcc5) !important;
  color: var(--kta-light-text-muted, #6b6354) !important;
}
html.kta-theme-light .kta-profile-details-input {
  background: var(--kta-light-bg-elevated, #fdf8eb) !important;
  border-color: var(--kta-light-border-strong, rgba(0,0,0,0.22)) !important;
  color: var(--kta-light-text, #2a2620) !important;
}
html.kta-theme-light .kta-profile-details-input:focus {
  border-color: var(--kta-light-accent-hover, #d9a82e) !important;
  background: rgba(244,197,66,0.10) !important;
}
html.kta-theme-light .kta-profile-details-label {
  color: var(--kta-light-text-muted, #6b6354) !important;
}
html.kta-theme-light .kta-profile-details-hint {
  color: var(--kta-light-text-muted, #6b6354) !important;
}
html.kta-theme-light .kta-profile-details-stats {
  background: rgba(140,180,255,0.10) !important;
  border-color: rgba(154,135,84,0.20) !important;
}
html.kta-theme-light .kta-profile-stat-cell {
  background: var(--kta-light-bg-elevated, #fdf8eb) !important;
}
html.kta-theme-light .kta-profile-stat-num {
  color: var(--kta-light-accent-hover, #d9a82e) !important;
}
html.kta-theme-light .kta-profile-stat-lbl {
  color: var(--kta-light-text-muted, #6b6354) !important;
}
html.kta-theme-light .kta-profile-details-footer-hint {
  background: rgba(0,0,0,0.04) !important;
  color: var(--kta-light-text-dim, #8a8270) !important;
}

/* ============================================================
   🎬 v1.21.0 (U1) — Mode présentation
   ============================================================
   KARMA : "Cache header + sidebars + footer (garde zoom + boussole)".
   Toggle via touche F (presentationMode.js). Cache tous les éléments UI
   pour ne laisser que la carte + zoom Leaflet + widget boussole. */

body.kta-presentation-mode .kta-refonte-header,
body.kta-presentation-mode .kta-refonte-statusbar {
  display: none !important;
}

/* Sidebars Leaflet (gauche + droite) cachées en mode présentation —
   SAUF le zoom natif Leaflet qui reste utile pour la démo. La sélecteur
   :not(.leaflet-control-zoom) garde uniquement le control zoom visible
   dans la sidebar gauche. Sidebar droite cachée entièrement (aucun
   control essentiel à la démo dedans). */
body.kta-presentation-mode .leaflet-top.leaflet-left > *:not(.leaflet-control-zoom) {
  display: none !important;
}
body.kta-presentation-mode .leaflet-top.leaflet-right > * {
  display: none !important;
}

/* Map plein écran : reset top/bottom (header + footer cachés = 100vh utiles).
   Override la variable --kta-statusbar-h qui sinon laisserait l'espace footer. */
body.kta-presentation-mode #map {
  top: env(safe-area-inset-top, 0px) !important;
  bottom: env(safe-area-inset-bottom, 0px) !important;
}

/* Garde le widget boussole visible et non perturbé — sa position bottom
   référence --kta-statusbar-h qu'on doit override pour qu'il colle au
   vrai bas de viewport en mode présentation (sinon il flotterait à
   la position où le footer aurait été). */
body.kta-presentation-mode .kta-compass-widget {
  bottom: calc(env(safe-area-inset-bottom, 0px) + 12px) !important;
}

/* 🆕 v1.21.0-fix3 : section "Mode présentation" en tête de la modale
   Réglages — visuellement distinguée du reste (centrage + accent doré
   subtil) pour signaler "action principale rapide" et non pas un
   réglage à éditer. Pas de titre de section (le bouton est explicite). */
.kta-cfg-presentation-section {
  background: linear-gradient(135deg, rgba(244, 197, 66, 0.06), rgba(140, 180, 255, 0.04)) !important;
  border-color: rgba(244, 197, 66, 0.25) !important;
}
body.kta-theme-light .kta-cfg-presentation-section,
html.kta-theme-light .kta-cfg-presentation-section {
  background: linear-gradient(135deg, rgba(244, 197, 66, 0.18), rgba(140, 180, 255, 0.08)) !important;
  border-color: rgba(154, 135, 84, 0.40) !important;
}

/* 🆕 v1.21.0-fix2 : bouton flottant ✕ pour sortir du mode présentation
   sur MOBILE (la touche F est inaccessible sans clavier physique).
   Position fixed top-right, safe-area-aware iOS PWA. Petit (32×32) +
   semi-transparent (40% opacity) pour ne pas distraire en démo, opaque
   au hover/tap. Z-index supérieur au widget boussole (qui est ~1500). */
.kta-presentation-exit-btn {
  position: fixed;
  top: calc(env(safe-area-inset-top, 0px) + 12px);
  right: calc(env(safe-area-inset-right, 0px) + 12px);
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(10, 13, 24, 0.55);
  color: #f4c542;
  border: 1.5px solid rgba(244, 197, 66, 0.55);
  font-size: 18px;
  font-weight: 700;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2000;
  opacity: 0.45;
  transition: opacity 0.18s, background 0.18s, transform 0.18s;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  -webkit-tap-highlight-color: transparent;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
  line-height: 1;
}
.kta-presentation-exit-btn:hover,
.kta-presentation-exit-btn:focus-visible,
.kta-presentation-exit-btn:active {
  opacity: 1;
  background: rgba(10, 13, 24, 0.85);
  border-color: #f4c542;
  outline: none;
  transform: scale(1.06);
}
.kta-presentation-exit-btn:active {
  transform: scale(0.94);
}

/* Variant thème clair */
body.kta-theme-light .kta-presentation-exit-btn,
html.kta-theme-light .kta-presentation-exit-btn {
  background: rgba(253, 248, 235, 0.75) !important;
  color: var(--kta-light-accent-hover, #d9a82e) !important;
  border-color: var(--kta-light-accent-hover, #d9a82e) !important;
  box-shadow: 0 2px 8px rgba(80, 60, 30, 0.20) !important;
}
body.kta-theme-light .kta-presentation-exit-btn:hover,
html.kta-theme-light .kta-presentation-exit-btn:hover,
body.kta-theme-light .kta-presentation-exit-btn:focus-visible,
html.kta-theme-light .kta-presentation-exit-btn:focus-visible {
  background: rgba(253, 248, 235, 0.95) !important;
}

/* ============================================================
   🌐 v1.21.0-fix1 — Géoref picker (Réglages + Enregistrer KMZ)
   ============================================================
   Classes déplacées depuis le <style> inline de sessionExporter.js
   vers ici (permanent), pour que la section 🌐 Géoréférencement de
   ⚙️ Réglages puisse les utiliser sans dépendre de l'ouverture
   préalable de 💾 Enregistrer. Pattern identique au picker KMZ. */

.kta-kmz-pt-actions {
  display: flex;
  gap: 6px;
  margin-bottom: 4px;
  margin-top: 6px;
  flex-wrap: wrap;
}
.kta-kmz-search-results {
  margin-top: 6px;
  padding: 8px;
  background: rgba(0,0,0,0.25);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 4px;
  max-height: 200px;
  overflow-y: auto;
}
.kta-kmz-search-item {
  padding: 6px 10px;
  margin: 2px 0;
  cursor: pointer;
  border-radius: 4px;
  font-size: 12.5px;
  color: #c8d0e0;
  transition: background 0.12s;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px;
}
.kta-kmz-search-item:hover {
  background: rgba(140,180,255,0.14);
  color: #e8eaf0;
}
.kta-kmz-search-item strong {
  color: #8cb4ff;
  font-weight: 600;
}
.kta-kmz-search-item .kta-kmz-search-meta {
  color: #8892a4;
  font-size: 11px;
}
.kta-kmz-search-empty {
  padding: 8px 10px;
  color: #8892a4;
  font-style: italic;
  font-size: 12px;
  text-align: center;
}

/* Variants thème clair pour le picker */
body.kta-theme-light .kta-kmz-search-results,
html.kta-theme-light .kta-kmz-search-results {
  background: rgba(0,0,0,0.06) !important;
  border-color: var(--kta-light-border-strong, rgba(0,0,0,0.22)) !important;
}
body.kta-theme-light .kta-kmz-search-item,
html.kta-theme-light .kta-kmz-search-item {
  color: var(--kta-light-text, #2a2620) !important;
}
body.kta-theme-light .kta-kmz-search-item:hover,
html.kta-theme-light .kta-kmz-search-item:hover {
  background: rgba(244,197,66,0.18) !important;
  color: var(--kta-light-text, #2a2620) !important;
}
body.kta-theme-light .kta-kmz-search-item strong,
html.kta-theme-light .kta-kmz-search-item strong {
  color: var(--kta-light-accent-hover, #d9a82e) !important;
}
body.kta-theme-light .kta-kmz-search-empty,
html.kta-theme-light .kta-kmz-search-empty,
body.kta-theme-light .kta-kmz-search-item .kta-kmz-search-meta,
html.kta-theme-light .kta-kmz-search-item .kta-kmz-search-meta {
  color: var(--kta-light-text-muted, #6b6354) !important;
}
/* =================================================================
   🆕 v1.26.1 — Banner cohérence échelle px/m ↔ géoréférencement GPS
   =================================================================
   Affiché dans 2 emplacements (en haut) :
   - Modale ⚙️ Réglages (interface.js > afficherConfig)
   - Modale 💾 Enregistrer → 📡 Export externe (sessionExporter.js > _renderExtern)

   4 niveaux d'écart visuels (rendu helper renderBannerCoherenceEchelle) :
     warn     : 🟡 5-10%   (jaune ambré)
     alert    : 🔴 10-15%  (rouge clair)
     critical : ⬛ > 15%    (noir + bordure rouge marquée)
   < 5% : silence (rien affiché — cohérent, pas besoin de bruit visuel).
*/
.kta-scale-coherence-banner {
  margin: 0 0 14px 0;
  padding: 10px 14px 12px;
  border-radius: 6px;
  border: 1px solid transparent;
  border-left: 4px solid transparent;
  font-size: 13px;
  line-height: 1.5;
}
.kta-scale-coherence-banner .kta-scale-coherence-titre {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 6px;
}
.kta-scale-coherence-banner .kta-scale-coherence-icon {
  font-size: 16px;
  flex-shrink: 0;
}
.kta-scale-coherence-banner .kta-scale-coherence-delta {
  font-weight: 700;
  margin-left: 4px;
}
.kta-scale-coherence-banner p {
  margin: 6px 0;
  color: #c8d0e0;
}
.kta-scale-coherence-banner .kta-scale-coherence-table {
  width: 100%;
  border-collapse: collapse;
  margin: 8px 0;
  font-size: 13px;
}
.kta-scale-coherence-banner .kta-scale-coherence-table td {
  padding: 4px 6px;
  border: none;
  vertical-align: middle;
}
.kta-scale-coherence-banner .kta-scale-coherence-table td:first-child {
  color: #a8b3c8;
}
.kta-scale-coherence-banner .kta-scale-coherence-table code {
  background: rgba(255, 255, 255, 0.06);
  padding: 1px 6px;
  border-radius: 3px;
  font-size: 12px;
  font-weight: 600;
  color: #f4c542;
}
.kta-scale-coherence-banner .kta-scale-coherence-copy-btn {
  margin-left: 8px;
  background: rgba(140, 180, 255, 0.14);
  border: 1px solid rgba(140, 180, 255, 0.45);
  color: #8cb4ff;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}
.kta-scale-coherence-banner .kta-scale-coherence-copy-btn:hover {
  background: rgba(140, 180, 255, 0.25);
  border-color: rgba(140, 180, 255, 0.70);
}
.kta-scale-coherence-banner .kta-scale-coherence-copy-btn:active {
  transform: scale(0.96);
}
.kta-scale-coherence-banner .kta-scale-coherence-hint {
  font-size: 12px;
  color: #8892a4;
  margin-top: 8px;
  line-height: 1.5;
}

/* === Niveau WARN (jaune ambré 5-10%) === */
.kta-scale-coherence-warn {
  background: rgba(244, 197, 66, 0.10);
  border-color: rgba(244, 197, 66, 0.40);
  border-left-color: #f4c542;
}
.kta-scale-coherence-warn .kta-scale-coherence-titre,
.kta-scale-coherence-warn .kta-scale-coherence-delta {
  color: #f4c542;
}

/* === Niveau ALERT (rouge 10-15%) === */
.kta-scale-coherence-alert {
  background: rgba(255, 140, 140, 0.10);
  border-color: rgba(255, 140, 140, 0.45);
  border-left-color: #ff5c5c;
}
.kta-scale-coherence-alert .kta-scale-coherence-titre,
.kta-scale-coherence-alert .kta-scale-coherence-delta {
  color: #ff5c5c;
}

/* === Niveau CRITICAL (rouge clair translucide marqué > 10%) === */
/* 🆕 v1.26.2-hotfix2 — KARMA : « le noir jure avec la charte, met un fond
   rouge clair ». Abandon du fond sombre/noir : on passe à un rouge clair
   TRANSLUCIDE (même principe que warn/alert mais plus saturé + bordure
   rouge vive épaisse). Avantage : les textes de base du banner (clair en
   thème sombre, sombre en thème clair) restent lisibles SANS override
   spécial. La distinction avec "alert" se fait par la saturation + la
   bordure gauche épaisse + l'ombre rouge. */
.kta-scale-coherence-critical {
  background: rgba(255, 60, 60, 0.16);
  border-color: #ff3030;
  border-left-color: #ff0000;
  border-width: 1px;
  border-left-width: 6px;
  box-shadow: 0 0 0 1px rgba(255, 48, 48, 0.22) inset;
}
.kta-scale-coherence-critical .kta-scale-coherence-titre,
.kta-scale-coherence-critical .kta-scale-coherence-delta {
  color: #ff4040;
}

/* === Variants thème clair === */
body.kta-theme-light .kta-scale-coherence-banner p,
html.kta-theme-light .kta-scale-coherence-banner p {
  color: #2a2620;
}
body.kta-theme-light .kta-scale-coherence-banner .kta-scale-coherence-table td:first-child,
html.kta-theme-light .kta-scale-coherence-banner .kta-scale-coherence-table td:first-child {
  color: #6b6354;
}
body.kta-theme-light .kta-scale-coherence-banner .kta-scale-coherence-table code,
html.kta-theme-light .kta-scale-coherence-banner .kta-scale-coherence-table code {
  background: rgba(0, 0, 0, 0.08);
  color: #c8801a;
}
body.kta-theme-light .kta-scale-coherence-banner .kta-scale-coherence-hint,
html.kta-theme-light .kta-scale-coherence-banner .kta-scale-coherence-hint {
  color: #6b6354;
}
body.kta-theme-light .kta-scale-coherence-warn,
html.kta-theme-light .kta-scale-coherence-warn {
  background: rgba(200, 140, 30, 0.10);
  border-color: rgba(200, 140, 30, 0.40);
  border-left-color: #c88c1e;
}
body.kta-theme-light .kta-scale-coherence-warn .kta-scale-coherence-titre,
html.kta-theme-light .kta-scale-coherence-warn .kta-scale-coherence-titre,
body.kta-theme-light .kta-scale-coherence-warn .kta-scale-coherence-delta,
html.kta-theme-light .kta-scale-coherence-warn .kta-scale-coherence-delta {
  color: #b07000;
}
body.kta-theme-light .kta-scale-coherence-alert,
html.kta-theme-light .kta-scale-coherence-alert {
  background: rgba(193, 69, 69, 0.10);
  border-color: rgba(193, 69, 69, 0.45);
  border-left-color: #c14545;
}
body.kta-theme-light .kta-scale-coherence-alert .kta-scale-coherence-titre,
html.kta-theme-light .kta-scale-coherence-alert .kta-scale-coherence-titre,
body.kta-theme-light .kta-scale-coherence-alert .kta-scale-coherence-delta,
html.kta-theme-light .kta-scale-coherence-alert .kta-scale-coherence-delta {
  color: #a32020;
}
/* 🆕 v1.26.2-hotfix2 — Critical thème clair = rouge clair translucide
   (cohérent avec mode sombre). Plus de fond bordeaux-noir, donc les textes
   de base theme-light (sombres) restent lisibles SANS override. */
body.kta-theme-light .kta-scale-coherence-critical,
html.kta-theme-light .kta-scale-coherence-critical {
  background: rgba(220, 30, 30, 0.13);
  border-color: #d01818;
  border-left-color: #ff0000;
}
body.kta-theme-light .kta-scale-coherence-critical .kta-scale-coherence-titre,
html.kta-theme-light .kta-scale-coherence-critical .kta-scale-coherence-titre,
body.kta-theme-light .kta-scale-coherence-critical .kta-scale-coherence-delta,
html.kta-theme-light .kta-scale-coherence-critical .kta-scale-coherence-delta {
  color: #b01010;
}

/* =========================================================================
   🆕 v1.31.6 — UX2 a11y : prefers-reduced-motion (cf ui.md §88.1)
   =========================================================================
   Désactive (raccourcit à 0.01ms = effectivement instantané) toutes les
   animations CSS quand l'utilisateur a activé la préférence système
   "Réduire les animations" (Settings macOS, iOS, Android, Windows).
   Public : sensibilité épileptique, vertiges, vestibulaire, autisme, ou
   simple préférence. Pattern WCAG 2.1 SC 2.3.3 (Animation from Interactions).
   ========================================================================= */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* =========================================================================
   🆕 v1.31.6 — UX5 a11y : focus-visible sur boutons charte (cf ui.md §88.2)
   =========================================================================
   Outline ambre (charte) visible uniquement en navigation clavier
   (Tab/Shift+Tab), pas au clic souris — `:focus-visible` natif.
   Variant thème clair : orange charte plus saturé (#b8860b).
   ========================================================================= */
.kta-btn:focus-visible,
.kta-btn-action:focus-visible,
.kta-btn-primary:focus-visible,
.kta-btn-secondary:focus-visible,
.kta-btn-danger:focus-visible,
.kta-readme-modal-close:focus-visible,
.kta-panneau-close:focus-visible,
.kta-config-toggle-row:focus-visible,
.kta-toast-close:focus-visible,
.kta-cfg-actions-bar button:focus-visible {
  outline: 2px solid #f4c542;
  outline-offset: 2px;
  border-radius: 4px;
}

body.kta-theme-light .kta-btn:focus-visible,
html.kta-theme-light .kta-btn:focus-visible,
body.kta-theme-light .kta-btn-action:focus-visible,
html.kta-theme-light .kta-btn-action:focus-visible,
body.kta-theme-light .kta-btn-primary:focus-visible,
html.kta-theme-light .kta-btn-primary:focus-visible,
body.kta-theme-light .kta-btn-secondary:focus-visible,
html.kta-theme-light .kta-btn-secondary:focus-visible,
body.kta-theme-light .kta-btn-danger:focus-visible,
html.kta-theme-light .kta-btn-danger:focus-visible,
body.kta-theme-light .kta-readme-modal-close:focus-visible,
html.kta-theme-light .kta-readme-modal-close:focus-visible,
body.kta-theme-light .kta-panneau-close:focus-visible,
html.kta-theme-light .kta-panneau-close:focus-visible,
body.kta-theme-light .kta-config-toggle-row:focus-visible,
html.kta-theme-light .kta-config-toggle-row:focus-visible,
body.kta-theme-light .kta-toast-close:focus-visible,
html.kta-theme-light .kta-toast-close:focus-visible,
body.kta-theme-light .kta-cfg-actions-bar button:focus-visible,
html.kta-theme-light .kta-cfg-actions-bar button:focus-visible {
  outline-color: #b8860b;
}

/* =========================================================================
   🕵️ v1.31.8 F2 — INCOGNITO MODE
   ========================================================================= */
/* Quand window.IncognitoMode est actif (URL ?incognito=1), js/incognitoMode.js
   pose la classe `.kta-incognito` sur <html>. Cette section ajoute :
   - une bordure violette permanente sur le viewport pour rappeler le contexte
   - un badge "🕵️ INCOGNITO" injecté à côté du titre principal
   - une couleur d'accent violet (#a78bfa) sur les éléments clés (build version
     dans le footer) pour signaler que la session est éphémère.

   Pattern visuel inspiré des modes de navigation privée (Chrome / Firefox) :
   teinte violet/lavande pour distinguer du jaune ambre standard MyKTAMap.

   Pas d'override forcé du `display`/positionnement existant — uniquement des
   surcouches visuelles pour ne pas casser la lisibilité ni la responsive.
*/
/* 🩹 v1.31.10-fix1 — Refactor de l'approche bordure incognito. AVANT :
   box-shadow inset sur <body>. PROBLÈME : sur la vue carte, Leaflet pose
   un container `#map` en position absolute full-viewport avec background
   solide qui MASQUE complètement le box-shadow du body en arrière-plan.
   Résultat : la bordure flashait au boot (loader visible) puis disparaissait
   au moment où la carte se chargeait.
   APRÈS : pseudo-élément ::before sur <body> en position: fixed full-viewport
   avec border solid violette + pointer-events: none (laisse passer les clics)
   + z-index élevé (au-dessus de tout, incluant modales).
   Z-index choisi 999999 : au-dessus de tout pour être un rappel permanent.
   La bordure est juste un cadre 5px épais qui ne bloque aucune interaction
   (pointer-events: none). Cohérent avec le pattern "watermark" type
   navigation privée Chrome / Firefox.
*/
html.kta-incognito body::before {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  pointer-events: none;
  border: 5px solid #a78bfa;
  /* Couche intérieure plus saturée pour effet "double bordure" */
  box-shadow: inset 0 0 0 3px rgba(124, 58, 237, 0.5);
  z-index: 999999;
}

/* Badge "🕵️ INCOGNITO" injecté par incognitoMode.js SOUS le subtitle/tagline.
   🩹 v1.31.8-fix1 : passé d'inline (à côté du titre, débordait sur mobile)
   à block sur sa propre ligne, centré sous le sous-titre. width: fit-content
   pour ne prendre que la place du texte (pas full-width). */
.kta-incognito-badge {
  display: block;
  width: fit-content;
  margin: 8px auto 0;
  padding: 3px 10px;
  background: #a78bfa;
  color: #1a1f2e;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.6px;
  border-radius: 4px;
  text-transform: uppercase;
  text-align: center;
  /* Animation discrète pour attirer l'attention au boot, puis stable */
  animation: kta-incognito-badge-pulse 2.4s ease-in-out 0s 3 normal;
}
/* Variant loader : aligné à gauche (sous tagline qui est aussi à gauche). */
.loader-titre-textes .kta-incognito-badge {
  margin-left: 0;
  margin-top: 6px;
}

@keyframes kta-incognito-badge-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(167, 139, 250, 0.7); }
  50%      { box-shadow: 0 0 0 6px rgba(167, 139, 250, 0); }
}

/* Build version dans le footer en violet quand incognito (signal supplémentaire
   sans imposer un bandeau qui mangerait de l'espace écran). */
html.kta-incognito .kta-build-version,
html.kta-incognito #kta-build-version {
  color: #a78bfa !important;
}

/* Variante thème clair : violet plus saturé pour contraste sur fond blanc.
   🩹 v1.31.10-fix1 : applique le même pattern ::before que la version
   sombre. Cibles : html.kta-incognito.kta-theme-light + html.kta-theme-light
   body.kta-incognito (selon où la classe theme atterrit). */
html.kta-incognito.kta-theme-light body::before,
html.kta-theme-light body.kta-incognito::before,
body.kta-theme-light.kta-incognito::before {
  border-color: #7c3aed;
  box-shadow: inset 0 0 0 3px rgba(91, 33, 182, 0.4);
}

html.kta-incognito.kta-theme-light .kta-incognito-badge,
html.kta-theme-light.kta-incognito .kta-incognito-badge {
  background: #7c3aed;
  color: #fff;
}

/* Bouton "🕵️ Démarrer en mode incognito" dans la modale Réglages —
   accent lavande sur fond sombre, lisible sur thème clair. */
.kta-cfg-incognito-btn {
  background: linear-gradient(135deg, #a78bfa 0%, #7c3aed 100%);
  color: #fff;
  border: none;
  border-radius: 6px;
  padding: 10px 14px;
  font-weight: 600;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  font-size: 13px;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.kta-cfg-incognito-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(167, 139, 250, 0.35);
}
.kta-cfg-incognito-btn:focus-visible {
  outline: 2px solid #f4c542;
  outline-offset: 2px;
}

/* 🆕 v1.31.9 — Variant "Quitter le mode incognito" : rouge/orange
   (sortir = action destructive : perte des données accumulées). Gardé
   sur le même container .kta-cfg-incognito-btn pour réutiliser layout
   + focus + transitions. */
.kta-cfg-incognito-btn-quit {
  background: linear-gradient(135deg, #ef4444 0%, #b91c1c 100%);
}
.kta-cfg-incognito-btn-quit:hover {
  box-shadow: 0 4px 12px rgba(239, 68, 68, 0.4);
}

/* =========================================================================
   📋 v1.33.0 D1 — RAPPORT DE SORTIE (sessionReport.js)
   =========================================================================
   Modale du module js/sessionReport.js. Réutilise les classes charte
   existantes (.kta-readme-modal-overlay, .kta-aide-section, .kta-btn) +
   quelques classes dédiées pour les éléments spécifiques (date pickers,
   preview, checkbox rows, action bar). */

.kta-report-boite {
  max-width: 580px;
}

.kta-report-period {
  display: flex;
  gap: 12px;
  align-items: center;
  margin-top: 6px;
}
.kta-report-period label {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: #c8d0e0;
}
.kta-report-date {
  flex: 1;
  background: #1a1f2e;
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: #e8eaf0;
  padding: 6px 8px;
  border-radius: 6px;
  font-size: 13px;
  font-family: inherit;
}
.kta-report-date:focus {
  outline: 2px solid #f4c542;
  outline-offset: 1px;
}

.kta-report-hint {
  font-size: 11.5px;
  color: #8892a4;
  font-style: italic;
  margin: 8px 0 0 0;
  line-height: 1.5;
}

.kta-report-preview {
  background: rgba(140, 180, 255, 0.06);
  border: 1px solid rgba(140, 180, 255, 0.18);
  border-radius: 8px;
  padding: 10px 12px;
  font-size: 13px;
  color: #c8d0e0;
  line-height: 1.7;
}
.kta-report-preview-row + .kta-report-preview-row {
  margin-top: 4px;
}
.kta-report-preview-dim {
  color: #8892a4;
  font-style: italic;
}

.kta-report-cb-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 6px;
  font-size: 13px;
  color: #c8d0e0;
  cursor: pointer;
  user-select: none;
}
.kta-report-cb-row input[type="checkbox"] {
  margin: 0;
  cursor: pointer;
}
.kta-report-cb-row:hover {
  color: #e8eaf0;
}

.kta-report-note {
  width: 100%;
  background: #1a1f2e;
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: #e8eaf0;
  padding: 8px 10px;
  border-radius: 6px;
  font-size: 13px;
  font-family: inherit;
  resize: vertical;
  min-height: 80px;
  box-sizing: border-box;
}
.kta-report-note:focus {
  outline: 2px solid #f4c542;
  outline-offset: 1px;
}

.kta-report-actions {
  display: flex;
  gap: 8px;
  margin-top: 14px;
}
.kta-report-actions .kta-btn {
  flex: 1;
  font-size: 13px;
  padding: 9px 10px;
}

.kta-report-status {
  font-size: 12px;
  color: #8cb4ff;
  margin-top: 10px;
  text-align: center;
  min-height: 14px;
  line-height: 1.5;
}

/* Variante thème clair */
body.kta-theme-light .kta-report-date,
html.kta-theme-light .kta-report-date,
body.kta-theme-light .kta-report-note,
html.kta-theme-light .kta-report-note {
  background: #ffffff;
  color: #1a1f2e;
  border-color: rgba(0, 0, 0, 0.18);
}
body.kta-theme-light .kta-report-preview,
html.kta-theme-light .kta-report-preview {
  background: rgba(140, 180, 255, 0.10);
  color: #1a1f2e;
}
body.kta-theme-light .kta-report-cb-row,
html.kta-theme-light .kta-report-cb-row {
  color: #1a1f2e;
}
body.kta-theme-light .kta-report-hint,
html.kta-theme-light .kta-report-hint {
  color: #555;
}

/* Mobile : actions wrappent en 2 lignes si écran étroit */
@media (max-width: 480px) {
  .kta-report-actions {
    flex-wrap: wrap;
  }
  .kta-report-actions .kta-btn {
    flex: 1 1 calc(50% - 4px);
    min-width: 0;
  }
  .kta-report-period {
    flex-direction: column;
    align-items: stretch;
  }
}

/* =========================================================================
   🎤 v1.34.0 E1 — COMMANDES VOCALES (voiceCommand.js)
   ========================================================================= */
/* Bouton mic flottant (push-to-talk) + overlay transcription live + modale
   aide commandes. Visible UNIQUEMENT si l'user a activé "🎤 Commandes
   vocales (BETA)" dans Réglages → opt-in conscient car la permission micro
   est sensible. */

/* Bouton mic flottant — bottom-right, au-dessus des autres floaters
   (mais sous les modales). Cercle violet avec icône 🎤. Pulse violet
   quand en écoute (mic actif). */
.kta-voice-mic {
  position: fixed;
  bottom: calc(80px + env(safe-area-inset-bottom, 0px));
  right: calc(16px + env(safe-area-inset-right, 0px));
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: linear-gradient(135deg, #a78bfa 0%, #7c3aed 100%);
  color: #fff;
  border: none;
  font-size: 22px;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.35);
  z-index: 1500;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}
.kta-voice-mic:hover {
  transform: scale(1.08);
  box-shadow: 0 6px 18px rgba(167, 139, 250, 0.5);
}
.kta-voice-mic:active {
  transform: scale(0.96);
}
.kta-voice-mic:focus-visible {
  outline: 2px solid #f4c542;
  outline-offset: 3px;
}

/* État "listening" : pulse animé violet pour signaler que le mic est actif */
.kta-voice-mic.kta-voice-mic-listening {
  background: linear-gradient(135deg, #ef4444 0%, #b91c1c 100%);
  animation: kta-voice-mic-pulse 1.2s ease-in-out infinite;
}
@keyframes kta-voice-mic-pulse {
  0%, 100% { box-shadow: 0 4px 12px rgba(239, 68, 68, 0.4),
                         0 0 0 0 rgba(239, 68, 68, 0.6); }
  50%      { box-shadow: 0 4px 12px rgba(239, 68, 68, 0.4),
                         0 0 0 14px rgba(239, 68, 68, 0); }
}

/* Overlay transcription live — top center, semi-opaque, dismissable */
.kta-voice-live {
  position: fixed;
  top: calc(20px + env(safe-area-inset-top, 0px));
  left: 50%;
  transform: translateX(-50%);
  min-width: 280px;
  max-width: calc(100vw - 32px);
  background: rgba(26, 31, 46, 0.95);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(167, 139, 250, 0.35);
  border-radius: 10px;
  padding: 10px 14px;
  display: flex;
  align-items: center;
  gap: 10px;
  z-index: 99998;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.55);
  color: #e8eaf0;
  font-size: 14px;
  line-height: 1.4;
  animation: kta-voice-live-slidein 0.18s ease-out;
}
@keyframes kta-voice-live-slidein {
  from { transform: translate(-50%, -20px); opacity: 0; }
  to   { transform: translate(-50%, 0);     opacity: 1; }
}
.kta-voice-live-icon {
  font-size: 22px;
  flex-shrink: 0;
}
.kta-voice-live-text {
  flex: 1;
  word-break: break-word;
}
.kta-voice-live-close {
  background: transparent;
  border: none;
  color: #8892a4;
  cursor: pointer;
  font-size: 18px;
  line-height: 1;
  padding: 4px 6px;
  border-radius: 4px;
  flex-shrink: 0;
}
.kta-voice-live-close:hover { color: #e8eaf0; background: rgba(255, 255, 255, 0.08); }

/* États visuels colorés selon état reconnaissance */
.kta-voice-live[data-state="listening"] { border-color: rgba(167, 139, 250, 0.5); }
.kta-voice-live[data-state="interim"]   { border-color: rgba(140, 180, 255, 0.5); }
.kta-voice-live[data-state="final"]     { border-color: rgba(140, 180, 255, 0.7); }
.kta-voice-live[data-state="success"]   { border-color: rgba(108, 226, 138, 0.6); }
.kta-voice-live[data-state="unknown"]   { border-color: rgba(244, 197, 66, 0.55); }
.kta-voice-live[data-state="error"]     { border-color: rgba(239, 68, 68, 0.55); }

/* Modale aide commandes — liste des commandes registries */
.kta-voice-aide-list {
  margin: 12px 0 0 0;
  padding-left: 0;
  list-style: none;
}
.kta-voice-aide-list li {
  padding: 8px 10px;
  border-radius: 6px;
  background: rgba(140, 180, 255, 0.06);
  margin-bottom: 5px;
  font-size: 13px;
  color: #c8d0e0;
  line-height: 1.5;
}
.kta-voice-aide-list li strong {
  color: #f4c542;
  display: block;
  margin-bottom: 3px;
}
.kta-voice-aide-patterns {
  font-size: 12px;
  color: #8892a4;
  font-style: italic;
}

/* Variante thème clair */
body.kta-theme-light .kta-voice-live,
html.kta-theme-light .kta-voice-live {
  background: rgba(255, 255, 255, 0.95);
  color: #1a1f2e;
  border-color: rgba(124, 58, 237, 0.4);
}
body.kta-theme-light .kta-voice-live-close,
html.kta-theme-light .kta-voice-live-close {
  color: #555;
}
body.kta-theme-light .kta-voice-aide-list li,
html.kta-theme-light .kta-voice-aide-list li {
  background: rgba(140, 180, 255, 0.12);
  color: #1a1f2e;
}
body.kta-theme-light .kta-voice-aide-list li strong,
html.kta-theme-light .kta-voice-aide-list li strong {
  color: #b8860b;
}

/* Mobile : taille bouton mic légèrement réduite + overlay plein large.
   🩹 v1.34.0-fix3 — KARMA : "monte l'icone du micro legerement plus haut
   sur mobile il chevauche un peut le footer, et coler a droite".
   - bottom: 72 → 120px pour passer au-dessus du footer/statusbar refonte
     (52px + safe-bottom + marge confortable)
   - right: calc(16+safe) → env(safe-area-inset-right) seul pour coller
     au bord droit (safe-area en landscape iPhone seulement) */
@media (max-width: 480px) {
  .kta-voice-mic {
    width: 48px;
    height: 48px;
    font-size: 20px;
    bottom: calc(120px + env(safe-area-inset-bottom, 0px));
    right: env(safe-area-inset-right, 0px);
  }
  .kta-voice-live {
    min-width: 0;
    width: calc(100vw - 24px);
    font-size: 13px;
  }
}

/* v1.35.4 — KARMA feedback : en mobile paysage, le bouton 🎤 chevauchait les
   icônes du sidebar droit (chevrons ▼ et autres boutons utility, ~50 px de
   large collés à droite). On le décale vers la GAUCHE en ajoutant une marge
   droite suffisante pour passer derrière le sidebar (qui mesure ~52 px).
   Pattern projet : `(max-height: 500px) and (orientation: landscape)`. */
@media (max-height: 500px) and (orientation: landscape) {
  .kta-voice-mic {
    /* 64 px = largeur sidebar droit (~52 px) + petite marge respiration */
    right: calc(64px + env(safe-area-inset-right, 0px));
  }
}

/* ===========================================================
   🧭 v1.37.0 — Picker calibration Nord 2 clics (northPicker.js)
   Overlay flottant en bas-centre + marqueur "N" sur la map.
   Z-index 99998 (juste sous 99999 splash, au-dessus modales).
   =========================================================== */
.kta-north-picker-overlay {
  position: fixed;
  bottom: calc(80px + env(safe-area-inset-bottom, 0px));
  left: 50%;
  transform: translateX(-50%);
  z-index: 99998;
  display: none;
  max-width: 90vw;
  pointer-events: auto;
}
.kta-north-picker-card {
  background: rgba(26, 31, 46, 0.96);
  border: 1px solid rgba(244, 197, 66, 0.4);
  border-radius: 12px;
  padding: 12px 16px;
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.5);
  color: #e8eaf0;
  font-size: 13px;
  min-width: 320px;
}
.kta-north-picker-title {
  font-weight: 700;
  color: #f4c542;
  margin-bottom: 6px;
  font-size: 14px;
}
.kta-north-picker-step {
  margin-bottom: 10px;
  line-height: 1.45;
  color: #c8d0e0;
}
.kta-north-picker-step strong {
  color: #f4c542;
}
.kta-north-picker-actions {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.kta-north-picker-actions .kta-btn {
  flex: 1 1 auto;
  min-width: 90px;
  padding: 7px 10px;
  font-size: 12.5px;
}
.kta-north-picker-actions .kta-btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}
/* Marqueur "N" en bout de flèche pointillée */
.kta-north-picker-n-icon {
  background: transparent;
  border: none;
}
.kta-north-picker-n-icon span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  background: #f4c542;
  color: #1a1f2e;
  font-weight: 800;
  border-radius: 50%;
  box-shadow: 0 0 0 3px rgba(244, 197, 66, 0.35), 0 2px 6px rgba(0, 0, 0, 0.4);
  font-size: 14px;
}
/* Variant thème clair */
body.kta-theme-light .kta-north-picker-card,
html.kta-theme-light .kta-north-picker-card {
  background: rgba(255, 252, 240, 0.97) !important;
  color: var(--kta-light-text) !important;
  border-color: var(--kta-light-accent-hover) !important;
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.18) !important;
}
body.kta-theme-light .kta-north-picker-title,
html.kta-theme-light .kta-north-picker-title {
  color: var(--kta-light-accent-hover) !important;
}
body.kta-theme-light .kta-north-picker-step,
html.kta-theme-light .kta-north-picker-step {
  color: var(--kta-light-text) !important;
}
body.kta-theme-light .kta-north-picker-step strong,
html.kta-theme-light .kta-north-picker-step strong {
  color: var(--kta-light-accent-hover) !important;
}

/* ============================================================================
 * 🆕 v1.40.9 — REFONTE PROPRE thème clair HOME (suite KARMA "c'est devenu
 *              nimp la le css du home en mode clair, reprend tout ca d'un
 *              oeil différent pour rendre ca plus armonieux").
 *
 * HISTORIQUE TENTATIVES (à effacer mentalement) :
 *   v1.40.3 : passé sections HOME #fdf8eb → #e5dcc5
 *   v1.40.5 : déplacé en fin de fichier (cascade)
 *   v1.40.8 : ajouté wrapper + bandeau profil en #e5dcc5
 *   → Résultat : tout aplati en #e5dcc5, plus aucune hiérarchie visuelle
 *
 * NOUVELLE APPROCHE — Option A KARMA validée : RESPECTER la sémantique
 * des 3 variables CSS originales (style.css:12557-59) :
 *   --kta-light-bg          (#f0e8d8) → fond neutre clair (body, wrapper)
 *   --kta-light-bg-elevated (#fdf8eb) → cards en élévation (Mes plans, OSM, …)
 *   --kta-light-bg-deep     (#e5dcc5) → header / footer (saturé = ancrage)
 *
 * Hiérarchie 3 niveaux :
 *   - Wrapper #planLoaderBox = neutre clair (#f0e8d8) ← override pour
 *     remplacer #c9b88f brun-beige original qui détonnait
 *   - Cards (Profil, Reprendre, Mes plans, Vue OSM, Ajouter) = #fdf8eb crème,
 *     ressortent légèrement sur le wrapper neutre via border + box-shadow
 *     (les règles existantes lignes 14105+15206+17424 sont OK comme ça,
 *     pas besoin d'override sur Mes plans / Reprendre / Profil / Ajouter)
 *   - Footer copyright = #e5dcc5 beige saturé (déjà OK ligne 14068)
 *
 * Seuls overrides nécessaires en fin de fichier :
 *   1. #planLoaderBox : passer #c9b88f → --kta-light-bg (#f0e8d8) pour
 *      donner au wrapper une teinte neutre cohérente, sur laquelle les
 *      cards #fdf8eb ressortent.
 *   2. #ktaOsmHomeBox : ajouter la card (n'existait pas avant, pas de règle
 *      antérieure pour elle) en --kta-light-bg-elevated (#fdf8eb) pour
 *      matcher Mes plans / Ajouter visuellement.
 * ============================================================================ */

/* --- 1. Wrapper HOME : neutre clair (au lieu de #c9b88f brun-beige) ---
   Donne aux interstices entre sections un fond neutre cohérent avec le
   body, sur lequel les cards crème #fdf8eb ressortent en élévation. */
body.kta-theme-light #planLoaderBox,
html.kta-theme-light #planLoaderBox {
  background: var(--kta-light-bg, #f0e8d8) !important;
}

/* --- 2. Card "🌍 Vue OSM" : crème comme Mes plans / Ajouter ---
   Pattern identique à #myPlansBox (cf lignes 15206+). La nouvelle card
   ressort du wrapper neutre comme les autres. */
body.kta-theme-light #ktaOsmHomeBox,
html.kta-theme-light #ktaOsmHomeBox {
  background: var(--kta-light-bg-elevated, #fdf8eb) !important;
  border: 1px solid rgba(154, 135, 84, 0.35) !important;
  border-radius: 14px !important;
  padding: 14px 18px 16px !important;
  margin-bottom: 14px !important;
  box-shadow: 0 4px 14px rgba(80, 60, 30, 0.10) !important;
}
/* Titre 🌍 Vue OSM interne transparent (card parent a son fond) +
   bordure-bottom de séparation, pattern identique à #myPlansBox. */
body.kta-theme-light #ktaOsmHomeBox .loader-section-head,
html.kta-theme-light #ktaOsmHomeBox .loader-section-head {
  background: transparent !important;
  border: none !important;
  border-bottom: 1px solid rgba(154, 135, 84, 0.18) !important;
  border-radius: 0 !important;
  padding: 2px 0 10px 0 !important;
  margin: 0 0 10px 0 !important;
  color: #2a2620 !important;
  font-size: 14px !important;
  font-weight: 700 !important;
}

/* =================================================================
   🆕 v1.43.26 (extension Pattern B) — overrides theming light pour
   inline-styles dark hardcodés communs dans toutes les modales.
   =================================================================
   La codebase a accumulé ~30 fichiers JS qui injectent des styles inline
   avec `color:#8892a4` (texte secondaire), `rgba(255,255,255,0.08)`
   (bordures séparateurs) et similaires — tous illisibles ou invisibles
   en thème clair. Plutôt que de migrer modale par modale (très long, à
   forte régression), on cible ici les inline-styles via attribute
   selectors sur les overlays de modale CONNUS. Ça mutualise la
   conversion sans toucher le JS et sans risquer de casser le mode dark.

   Scope volontairement limité aux overlays modales (.kta-readme-modal-*,
   .kta-poi-modal, .kta-itinerary-modal, .kta-modal-overlay) pour éviter
   d'impacter les widgets/toasts/badges qui peuvent légitimement utiliser
   ces couleurs même en thème clair (ex. footer Home).
   ================================================================= */

/* Texte secondaire gris pâle #8892a4 → gris foncé lisible en mode clair */
body.kta-theme-light .kta-readme-modal-overlay *[style*="color:#8892a4"],
html.kta-theme-light .kta-readme-modal-overlay *[style*="color:#8892a4"],
body.kta-theme-light .kta-readme-modal-overlay *[style*="color: #8892a4"],
html.kta-theme-light .kta-readme-modal-overlay *[style*="color: #8892a4"],
body.kta-theme-light .kta-poi-modal *[style*="color:#8892a4"],
html.kta-theme-light .kta-poi-modal *[style*="color:#8892a4"],
body.kta-theme-light .kta-itinerary-modal *[style*="color:#8892a4"],
html.kta-theme-light .kta-itinerary-modal *[style*="color:#8892a4"],
body.kta-theme-light .kta-modal-overlay *[style*="color:#8892a4"],
html.kta-theme-light .kta-modal-overlay *[style*="color:#8892a4"] {
  color: #5a6878 !important;
}

/* Bordures rgba blanc semi-transparentes → gris foncé translucide */
body.kta-theme-light .kta-readme-modal-overlay *[style*="rgba(255,255,255,0.08)"],
html.kta-theme-light .kta-readme-modal-overlay *[style*="rgba(255,255,255,0.08)"],
body.kta-theme-light .kta-readme-modal-overlay *[style*="rgba(255, 255, 255, 0.08)"],
html.kta-theme-light .kta-readme-modal-overlay *[style*="rgba(255, 255, 255, 0.08)"],
body.kta-theme-light .kta-poi-modal *[style*="rgba(255,255,255,0.08)"],
html.kta-theme-light .kta-poi-modal *[style*="rgba(255,255,255,0.08)"],
body.kta-theme-light .kta-itinerary-modal *[style*="rgba(255,255,255,0.08)"],
html.kta-theme-light .kta-itinerary-modal *[style*="rgba(255,255,255,0.08)"] {
  border-color: rgba(20, 30, 50, 0.14) !important;
}

/* Backgrounds très sombres explicites (rare mais existe sur quelques modales) */
body.kta-theme-light .kta-readme-modal-overlay *[style*="background:#1a1f2e"],
html.kta-theme-light .kta-readme-modal-overlay *[style*="background:#1a1f2e"],
body.kta-theme-light .kta-readme-modal-overlay *[style*="background: #1a1f2e"],
html.kta-theme-light .kta-readme-modal-overlay *[style*="background: #1a1f2e"] {
  background: #f4ecd8 !important;
}