/* ── Jetons de couleur de la charte (communs aux deux thèmes) ──
   ⚠️ Contrat : une couleur de la charte s'écrit var(--kta-…), en CSS comme dans un style="…" posé par le JS.
   Le thème clair REDÉFINIT ces jetons (bloc « Thème clair » plus bas) au lieu de surcharger chaque règle.
   Rôles : texte / texte-2 / texte-3 (méta) ; accent = doré (titres, état actif), accent-texte = ce doré en
   texte ; interaction = liens et commandes ; primaire = fond du bouton d'action principale, bleu dans les deux
   thèmes (décision produit) ; sur-accent = texte sombre posé sur un fond doré ou orange ; tuilage-v2 = violet
   du tuilage V2 (Générateur). Couples texte / fond ≥ 4,5:1 : docs/architecture/ui.md (charte).
   🩸 Restent en dur, sans jeton : splash, visionneuse photo et mode urgence (palette propre, thème local) — un
   jeton y suivrait le thème global. */
:root {
  --kta-fond:           #0a0d18;
  --kta-surface:        #1a1f2e;
  --kta-surface-2:      #232838;
  --kta-texte:          #e8eaf0;
  --kta-texte-2:        #c8d0e0;
  --kta-texte-3:        #98a1b3;
  --kta-accent:         #f4c542;
  --kta-accent-texte:   #f4c542;
  --kta-sur-accent:     #1a1f2e;
  --kta-interaction:    #8cb4ff;
  --kta-primaire:       #1a5fd6;
  --kta-primaire-survol:#2563eb;
  --kta-sur-primaire:   #ffffff;
  --kta-focus:          #f4c542;
  --kta-bordure:        rgba(255, 255, 255, 0.08);
  --kta-ok:             #6ee287;
  --kta-avert:          #ffb380;
  --kta-erreur:         #ff8c8c;
  --kta-violet:         #a78bfa;
  --kta-magenta:        #ff4ecb;
  --kta-tuilage-v2:     #bb5fff;   /* 4,84:1 sur la surface (texte du libellé V2) */
  --kta-info-fond:      rgba(140, 180, 255, 0.06);
  --kta-info-bord:      rgba(140, 180, 255, 0.18);
  --kta-info-bord-fort: rgba(140, 180, 255, 0.40);
  --kta-accent-fond:    rgba(244, 197, 66, 0.06);
  --kta-accent-bord:    rgba(244, 197, 66, 0.25);
  --kta-ok-fond:        rgba(166, 215, 133, 0.05);
  --kta-ok-bord:        rgba(166, 215, 133, 0.40);
  --kta-erreur-fond:    rgba(244, 107, 107, 0.05);
  --kta-erreur-bord:    rgba(244, 107, 107, 0.40);
  /* Gabarit des boutons de barre (barres latérales de la carte, vue 3D) : côté sans le liseré, rayon de la pilule,
     zone de toucher minimale. Thème indifférent. */
  --kta-barre-bouton:   36px;
  --kta-barre-rayon:    8px;
  --kta-cible-toucher:  44px;
}
/* Paysage bas : boutons de barre à 30 px (sous-actions en ligne, body.kta-refonte-v1 .leaflet-bar a). */
@media (max-height: 500px) and (orientation: landscape) {
  :root { --kta-barre-bouton: 30px; }
}

html, body {
  /* Police de la charte posée à la base : sans elle, tout élément sans police explicite (fenêtres posées sur
     <html>, textes d'aide) retombe sur la police à empattements du navigateur. Aucune police propre aux titres. */
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
  /* 🩸 iOS PWA (viewport-fit=cover) : sans 100dvh, le body s'arrête au-dessus du home indicator (bande sombre).
     100vh d'abord = repli iOS ≤ 15, écrasé par dvh quand il est supporté. */
  min-height: 100vh;
  min-height: 100dvh;
  margin: 0;
  overflow: hidden;
  /* Fond visible au rubber-band, avant l'init Leaflet ou si un élément ne couvre pas tout. */
  background-color: var(--kta-fond);
  /* 🩸 iOS WebKit « text autosizing » regonfle le texte des blocs larges après une rotation
     portrait → paysage → portrait : 100 % global le neutralise (-webkit- pour Safari). */
  -webkit-text-size-adjust: 100%;
     -moz-text-size-adjust: 100%;
          text-size-adjust: 100%;
}

#map {
  display: block;
  /* `inset: 0` plutôt que 100 % : ancré aux 4 côtés du viewport, à l'abri du bug 100vh d'iOS < 16.
     Le mode refonte redéfinit top/bottom de #map plus bas. */
  position: fixed;
  inset: 0;
}

.map-title {
  background: var(--kta-surface);
  border: 1px solid var(--kta-bordure);
  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: var(--kta-texte);
  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: var(--kta-interaction);
  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;
}

.leaflet-top.leaflet-left {
  pointer-events: auto;
}

/* Safe-area iPhone : seul le coin TOP est poussé sous la status bar (sidebar accordéon en topright).
   🩸 Un padding sur les autres coins crée une bande visible en bas sur iPhone. env() vaut 0 sans encoche. */
.leaflet-top { padding-top: env(safe-area-inset-top, 0px); }

/* Titre fixe centré en haut, hors Leaflet ; safe-area-inset-top le passe sous la status bar iPhone. */
#kta-titre-fixe {
  position: fixed;
  top: calc(10px + env(safe-area-inset-top, 0px));
  left: 50%;
  transform: translateX(-50%);
  z-index: 1100;
  background: var(--kta-surface);
  border: 1px solid var(--kta-bordure);
  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: var(--kta-surface-2);
  border-color: rgba(140,180,255,0.35);
}

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

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

/* Décalage du titre quand le contrôle des couches est ouvert (classe posée par
   interface.js > _initLayersControlWatcher).
   🩸 #map est position:fixed → stacking context isolé : le panneau Leaflet ne peut pas passer au-dessus du
   titre (body, z-index 1100), quel que soit son z-index.
   ⚠️ Mobile seulement : sur desktop le panneau s'ouvre à droite sans toucher le titre centré. */
@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 suit le décalage du titre fixe. */
  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: var(--kta-interaction);
  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;
  top: calc(56px + env(safe-area-inset-top, 0px));
  left: 50%;
  transform: translateX(-50%);
  z-index: 1099;
  min-width: 280px;
  max-width: 360px;
  /* Même fond et bordure que #kta-titre-fixe.ouvert : le panneau prolonge le titre cliqué. */
  background: var(--kta-surface-2);
  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-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: var(--kta-texte);
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

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

.kta-switcher-sub {
  font-size: 11px;
  color: var(--kta-texte-3);
  margin-top: 1px;
}

.kta-switcher-empty {
  padding: 12px 14px;
  font-size: 12px;
  color: var(--kta-texte-3);
  font-style: italic;
  text-align: center;
}


@media (max-width: 480px) {
  #kta-plan-switcher {
    min-width: 240px;
    max-width: 92vw;
  }
}

/* ── Plan switcher en modale (mode refonte) ──
   Le clic sur le titre ouvre une modale centrée, sur le patron .kta-readme-modal-overlay + boîte.

   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, fond, centrage, fondu). */
  z-index: 99998;  /* juste sous les modales système (99999) */
}

.kta-plan-switcher-modal-boite {
  background: var(--kta-surface);
  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);
  max-height: min(82dvh, 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: var(--kta-accent-texte);
  letter-spacing: 0.02em;
}

/* Croix : style global .kta-panneau-close. */

.kta-plan-switcher-modal-corps {
  flex: 1;
  overflow-y: auto;
  padding: 14px 16px;
  color: var(--kta-texte-2);
  padding-bottom: 6px;
}

/* ── Carte du plan en cours ── */
.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 {
  content: "● ACTIF";
  position: absolute;
  top: 10px;
  right: 12px;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--kta-ok);
}
.kta-plan-switcher-current-label {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--kta-texte-3);
  margin-bottom: 6px;
}
.kta-plan-switcher-current-name {
  display: flex;
  align-items: baseline;
  gap: 6px;
  font-size: 16px;
  font-weight: 700;
  color: var(--kta-accent-texte);
  margin-bottom: 4px;
}
.kta-plan-switcher-current-icon {
  font-size: 14px;
}
.kta-plan-switcher-current-sub {
  font-size: 11px;
  color: var(--kta-texte-3);
  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: var(--kta-interaction);
  font-weight: 700;
  margin: 0 0 8px 4px;
  padding: 0;
}

/* ── Surcharge de .kta-switcher-list / -row dans la modale seulement ── */
.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: var(--kta-texte);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.kta-plan-switcher-modal-boite .kta-switcher-sub {
  font-size: 11px;
  color: var(--kta-texte-3);
  margin-top: 2px;
}
.kta-switcher-row-arrow {
  font-size: 18px;
  color: var(--kta-texte-3);
  flex-shrink: 0;
  transition: color 0.15s, transform 0.15s;
}
.kta-plan-switcher-modal-boite .kta-switcher-row:hover .kta-switcher-row-arrow {
  color: var(--kta-interaction);
  transform: translateX(2px);
}

.kta-plan-switcher-modal-boite .kta-switcher-empty {
  padding: 14px;
  font-size: 12px;
  color: var(--kta-texte-3);
  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;
}

/* ── Pied de modale : 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;
}

@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;
  }
}

@media (max-height: 500px) and (orientation: landscape) {
  .kta-plan-switcher-modal-boite {
    max-height: 86vh;
    max-height: 86dvh;
    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 : boutons de contrôle Leaflet ── */

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

.leaflet-bar a {
  background: var(--kta-surface) !important;
  color: var(--kta-texte) !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;
}

.leaflet-control-attribution {
  display: none !important;
}

.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: var(--kta-surface) !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: var(--kta-surface) !important;
  border: 1px solid var(--kta-bordure) !important;
  box-shadow: 0 4px 16px rgba(0,0,0,0.45) !important;
  border-radius: 10px !important;
  color: var(--kta-texte) !important;
  font-family: Arial, sans-serif !important;
  font-size: 13px !important;
}

.leaflet-control-layers-expanded {
  padding: 8px 12px !important;
  /* ⚠️ 1200 : au-dessus de #kta-titre-fixe (1100), qui chevauche le panneau déplié sur mobile ;
     sous le splash (9999) et les modales (99999). */
  z-index: 1200 !important;
}

.leaflet-control-layers label {
  color: var(--kta-texte-2) !important;
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  margin-bottom: 4px !important;
}



/* ── Panneau ancré aux boutons ── */

.kta-panneau {
  position: fixed;
  z-index: 9000;
  width: 280px;
  max-height: 85vh;
  max-height: 85dvh;
  overflow-y: auto;
  overflow-x: hidden;
  background: var(--kta-surface);
  color: var(--kta-texte);
  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 var(--kta-bordure);
}

.kta-panneau-titre {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--kta-interaction);
}

.kta-panneau-close {
  background: none;
  border: none;
  color: var(--kta-texte-3);
  font-size: 14px;
  cursor: pointer;
  padding: 2px 4px;
  border-radius: 4px;
  transition: color 0.15s, background 0.15s;
}
.kta-panneau-close:hover {
  color: var(--kta-texte);
  background: rgba(255,255,255,0.08);
}
/* Style de base de .kta-readme-modal-close (aligné sur .kta-panneau-close) : sans lui, bouton natif
   gris/blanc à bordure outset dans toutes les modales qui l'utilisent. */
.kta-readme-modal-close {
  background: none;
  border: none;
  color: var(--kta-texte-3);
  font-size: 15px;
  cursor: pointer;
  padding: 2px 6px;
  border-radius: 4px;
  transition: color 0.15s, background 0.15s;
}
.kta-readme-modal-close:hover {
  color: var(--kta-texte);
  background: rgba(255,255,255,0.08);
}
html.kta-theme-light .kta-readme-modal-close { color: var(--kta-texte-3); }
html.kta-theme-light .kta-readme-modal-close:hover {
  color: #1a1f2e;
  background: rgba(0,0,0,0.06);
}
/* ⚠️ Convention : les cibles « au doigt » s'agrandissent sous @media (pointer: coarse), jamais par un seuil
   de largeur. Croix ≥ 40 px au toucher ; la marge négative garde la hauteur de l'en-tête. */
@media (pointer: coarse) {
  .kta-panneau-close,
  .kta-readme-modal-close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    min-width: 40px;
    min-height: 40px;
    margin-top: -8px;
    margin-bottom: -8px;
  }
}

.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: var(--kta-texte-3);
  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` seul = apparence discrète de la charte (celle de -ghost) ; sans ce défaut, bouton natif blanc
   à texte bleu. Les variantes, définies après, l'emportent. */
.kta-btn {
  padding: 7px 14px;
  border-radius: 7px;
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  background: rgba(255,255,255,0.07);
  color: var(--kta-texte-2);
  border: 1px solid rgba(255,255,255,0.12);
  transition: opacity 0.15s, background 0.15s;
}
.kta-btn:hover { opacity: 0.85; }
/* :where() = priorité nulle : toute variante (primary, danger, classes du Secours…) l'emporte en thème clair. */
:where(html.kta-theme-light) .kta-btn {
  background: rgba(0, 0, 0, 0.04);
  color: #3a4458;
  border-color: rgba(0, 0, 0, 0.18);
}

.kta-btn-primary {
  background: var(--kta-primaire);
  color: #fff;
  border: none;
}

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

/* ⚠️ Déclaré AVANT .kta-btn-danger : un bouton « secondary danger » garde le rouge. */
.kta-btn-secondary {
  background: rgba(255,255,255,0.07);
  color: var(--kta-texte-2);
  border: 1px solid rgba(255,255,255,0.14);
}

.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 une action secondaire ou dangereuse sous un CTA principal. */
.kta-btn-link {
  background: transparent;
  border: none;
  padding: 4px 8px;
  font-size: 12px;
  color: var(--kta-texte-3);
  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: var(--kta-texte-2);
  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 choisies pour ne pas se confondre avec effondrement rouge / eau bleu / itinéraire cyan /
   surbrillance magenta : zone orange #ff6b35, dernière position vert #6ce28a, indice dans la zone
   violet #b452ff, hors zone gris #8892a4. */

/* Sous-actions « perdu » et « urgence » en rouge urgence, en fin de menu tracker : cascade (a.kta-sub) et flyout
   (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;
}
/* Le libellé du flyout garde sinon la couleur 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 plein écran « Tracker » : tuiles tactiles par section, grille 2 colonnes ── */
.kta-tracker-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 99999;
  display: flex;
  align-items: center;
  /* `safe` : une boîte plus haute que l'écran s'aligne en haut, titre et croix restent atteignables. */
  align-items: safe center;
  justify-content: center;
  padding: 14px;
  background: rgba(6, 9, 18, 0.78);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
  overflow-y: auto;
}
.kta-tracker-modal-box {
  width: 100%;
  max-width: 460px;
  max-height: 92vh;
  max-height: 92dvh;
  display: flex;
  flex-direction: column;
  background: linear-gradient(160deg, #1a1f2e 0%, #0a0d18 100%);
  border: 1px solid rgba(140, 180, 255, 0.18);
  border-radius: 18px;
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.55);
  overflow: hidden;
  padding-bottom: env(safe-area-inset-bottom, 0px);
}
.kta-tracker-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 11px 16px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}
.kta-tracker-modal-title {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 17px;
  font-weight: 600;
  color: var(--kta-texte);
}
.kta-tracker-modal-close {
  width: 36px;
  height: 36px;
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 17px;
  line-height: 1;
  color: var(--kta-texte-2);
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 10px;
  cursor: pointer;
}
.kta-tracker-modal-close:hover {
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
}
.kta-tracker-modal-status {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px 16px;
  padding: 8px 16px;
  font-size: 13px;
  color: var(--kta-texte-3);
  background: rgba(255, 255, 255, 0.03);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.kta-tracker-modal-status-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.kta-tracker-modal-status-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #6b7280;
}
.kta-tracker-modal-status-dot.kta-on {
  background: #4ade80;
  box-shadow: 0 0 6px rgba(74, 222, 128, 0.7);
}
.kta-tracker-modal-body {
  padding: 4px 14px 12px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.kta-tracker-modal-section-title {
  margin: 8px 2px 4px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--kta-texte-3);
}
.kta-tracker-modal-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
}
/* Icône À GAUCHE du libellé (grille 2 colonnes, icône sur 2 lignes : libellé + aide éventuelle) : le menu complet,
   tuiles optionnelles comprises (replay, heatmap), tient sans défiler sur un iPhone. */
.kta-tracker-modal-tile {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  column-gap: 8px;
  row-gap: 1px;
  min-height: 46px;
  padding: 6px 10px;
  font-family: inherit;
  color: var(--kta-texte);
  background: rgba(255, 255, 255, 0.045);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 14px;
  cursor: pointer;
  text-align: left;
  transition: background 0.12s ease, border-color 0.12s ease, transform 0.06s ease;
}
.kta-tracker-modal-tile:hover {
  background: rgba(255, 255, 255, 0.09);
  border-color: rgba(140, 180, 255, 0.4);
}
.kta-tracker-modal-tile:active {
  transform: scale(0.97);
}
.kta-tracker-modal-tile-wide {
  grid-column: 1 / -1;
}
.kta-tracker-modal-tile-icon {
  grid-row: span 2;
  font-size: 18px;
  line-height: 1;
}
.kta-tracker-modal-tile-label {
  font-size: 12px;
  line-height: 1.2;
  color: inherit;
}
/* Ligne d'aide sous le libellé (🧊 Vue 3D) : méta en texte-3 ; une tuile grisée l'est déjà en entier. */
.kta-tracker-modal-tile-aide {
  font-size: 11px;
  line-height: 1.2;
  color: var(--kta-texte-3);
}
/* Tuile active (suivi, plan orienté, guidage, verrou…) : vert de .kta-tx-ok. En pause = orange,
   coupée dans la configuration = grisée. */
.kta-tracker-modal-tile.kta-actif {
  border-color: #6ee287;
  color: var(--kta-ok);
  background: rgba(110, 226, 135, 0.12);
  box-shadow: 0 0 0 1px rgba(110, 226, 135, 0.35) inset;
}
.kta-tracker-modal-tile.kta-pause {
  border-color: #ffb380;
  color: var(--kta-avert);
  background: rgba(255, 179, 128, 0.12);
  box-shadow: 0 0 0 1px rgba(255, 179, 128, 0.35) inset;
}
/* Tuile indisponible : désaturée et en texte-3, sans opacité (lisible ≥ 4,5:1 dans les deux thèmes). */
.kta-tracker-modal-tile.kta-inactif {
  color: var(--kta-texte-3);
  filter: grayscale(1);
}
/* .kta-sous-action-urgence impose déjà le rouge (!important) ; l'icône et le libellé en héritent. */
.kta-tracker-modal-tile.kta-sous-action-urgence .kta-tracker-modal-tile-icon,
.kta-tracker-modal-tile.kta-sous-action-urgence .kta-tracker-modal-tile-label {
  color: inherit !important;
}

/* ── Aide-mémoire des raccourcis clavier (touche ?) : chrome .kta-readme-modal-* + grille de touches ── */
.kta-cheatsheet-boite { max-width: 540px; }
.kta-cheat-sectitre {
  margin: 14px 0 8px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--kta-texte-3);
}
.kta-cheat-sectitre:first-child { margin-top: 2px; }
.kta-cheat-grille {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px 18px;
}
.kta-cheat-row {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 30px;
}
.kta-cheat-keys {
  flex: 0 0 96px;
  display: flex;
  align-items: center;
  gap: 3px;
}
.kta-cheat-label {
  font-size: 13.5px;
  color: var(--kta-texte);
  line-height: 1.2;
}
.kta-kbd {
  display: inline-block;
  min-width: 20px;
  padding: 2px 7px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12px;
  line-height: 1.3;
  text-align: center;
  color: #e8eaf0;
  background: #232a3d;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-bottom-width: 2px;
  border-radius: 6px;
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.3);
}
.kta-kbd-plus { color: var(--kta-texte-3); font-size: 11px; margin: 0 1px; }
.kta-cheat-note {
  margin: 16px 2px 0;
  font-size: 12px;
  line-height: 1.5;
  color: var(--kta-texte-3);
}
@media (max-width: 520px) {
  .kta-cheat-grille { grid-template-columns: 1fr; }
}
body.kta-theme-light .kta-cheat-sectitre,
body.kta-theme-light .kta-cheat-note,
body.kta-theme-light .kta-kbd-plus { color: var(--kta-texte-3); }
body.kta-theme-light .kta-cheat-label { color: #1a1f2e; }
body.kta-theme-light .kta-kbd {
  color: #1a1f2e;
  background: #e9edf5;
  border-color: rgba(0, 0, 0, 0.18);
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.12);
}

/* ── Hub d'aide : sections par catégorie + sous-modale ── */
.kta-aide-hub-search {
  width: 100%;
  box-sizing: border-box;
  padding: 9px 12px;
  margin: 2px 0 10px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 10px;
  color: var(--kta-texte);
  font-size: 14px;
}
.kta-aide-hub-search::placeholder { color: var(--kta-texte-3); }
.kta-aide-cat-titre {
  margin: 16px 2px 8px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--kta-texte-3);
}
.kta-aide-row {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  box-sizing: border-box;
  padding: 11px 12px;
  margin: 5px 0;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 10px;
  color: var(--kta-texte);
  font-size: 14px;
  text-align: left;
  cursor: pointer;
  transition: background 0.12s ease, border-color 0.12s ease;
}
.kta-aide-row:hover {
  background: rgba(140, 180, 255, 0.12);
  border-color: rgba(140, 180, 255, 0.4);
}
.kta-aide-row-titre { flex: 1; line-height: 1.3; }
.kta-aide-row-chevron { color: var(--kta-texte-3); font-size: 18px; flex: 0 0 auto; }
.kta-aide-empty { color: var(--kta-texte-3); font-size: 13px; padding: 14px 4px; }
.kta-aide-submodal { z-index: 100001 !important; }
.kta-aide-submodal-back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-right: auto;
  padding: 6px 12px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 8px;
  color: var(--kta-texte-2);
  font-size: 13px;
  cursor: pointer;
}
.kta-aide-submodal-back:hover {
  background: var(--kta-info-fond);
  border-color: var(--kta-info-bord);
  color: var(--kta-texte);
}
body.kta-theme-light .kta-aide-hub-search {
  background: #fff;
  border-color: rgba(0, 0, 0, 0.15);
  color: #1a1f2e;
}
body.kta-theme-light .kta-aide-cat-titre,
body.kta-theme-light .kta-aide-row-chevron,
body.kta-theme-light .kta-aide-empty { color: var(--kta-texte-3); }
body.kta-theme-light .kta-aide-row {
  background: #fff;
  border-color: rgba(0, 0, 0, 0.12);
  color: #1a1f2e;
}
body.kta-theme-light .kta-aide-row:hover { background: #eef2fb; }
body.kta-theme-light .kta-aide-submodal-back {
  background: rgba(0, 0, 0, 0.05);
  border-color: rgba(0, 0, 0, 0.12);
  color: var(--kta-texte-2);
}

/* ── Modale « Je suis perdu » : 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);
  /* contre la hauteur 88vh héritée, trop grande pour cette modale courte */
  height: auto !important;
  max-height: 90vh !important;
  max-height: 90dvh !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);
}

.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: var(--kta-fond);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 6px;
  padding: 8px 12px;
  color: var(--kta-texte-2);
  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: var(--kta-texte-2);
  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: var(--kta-texte-3);
  font-size: 11px;
  font-weight: normal;
}
.kta-lost-search-empty {
  padding: 8px 12px;
  color: var(--kta-texte-3);
  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: var(--kta-texte-3);
  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: var(--kta-texte-2);
  font-style: normal;
}
.kta-lost-pos-label { color: var(--kta-ok); font-weight: 600; }
.kta-lost-pos-coord { color: var(--kta-texte-3); font-size: 11.5px; }

/* Sélecteur « Vitesse & état de la personne » : 4 préréglages (km/h + marge). Même patron que celui de
   l'itinéraire, en orange 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: var(--kta-texte-2);
  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: var(--kta-texte-3);
  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));
  }
}

.kta-lost-stat-detail {
  display: block;
  margin-top: 4px;
  font-size: 11.5px;
  color: var(--kta-texte-3);
  font-family: ui-monospace, monospace;
}
.kta-lost-stat-preset {
  color: #ff8a5c;
  font-weight: 600;
  font-family: inherit;
}

.kta-lost-slider-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
  color: var(--kta-texte-2);
  font-size: 13px;
}
.kta-lost-slider {
  flex: 1;
  accent-color: #ff8a5c;
}
.kta-lost-num {
  width: 60px;
  background: var(--kta-fond);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 4px;
  padding: 4px 8px;
  color: var(--kta-texte-2);
  font-size: 13px;
  text-align: center;
}

.kta-lost-clues {
  width: 100%;
  min-height: 70px;
  background: var(--kta-fond);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 6px;
  padding: 8px 12px;
  color: var(--kta-texte-2);
  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);
}

.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: var(--kta-texte-2);
  font-size: 13px;
  line-height: 1.5;
}
/* Bandeau « rayon plus grand que le plan » : classe dédiée pour avoir une variante lisible en thème clair. */
.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: var(--kta-texte-3);
  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: var(--kta-texte-2);
}
.kta-lost-match-out {
  background: rgba(136, 146, 164, 0.05);
  border: 1px solid rgba(136, 146, 164, 0.18);
  color: var(--kta-texte-3);
}
.kta-lost-match-ico { font-size: 18px; line-height: 1; }
.kta-lost-match-body { flex: 1; }
.kta-lost-match-layer { color: var(--kta-texte-3); font-size: 11.5px; font-weight: normal; }
.kta-lost-match-detail { font-size: 11.5px; color: var(--kta-texte-3); 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; }

@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: var(--kta-texte-3);
  text-align: center;
  line-height: 28px;
  opacity: 0.7;
}

/* Portée max sur le réseau (néon rouge clair).
   🩸 Perf : drop-shadow sur la polyline SVG ENTIÈRE (un seul rendu GPU), jamais sur N polylines. */
.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;
}
.kta-lost-reach-lead {
  filter: drop-shadow(0 0 2px rgba(255, 128, 128, 0.6));
  pointer-events: none;
}

/* Curseur de précision : réticule or + contour sombre, visible sur plan blanc comme sombre. Posé dès qu'un
   mode « clic sur la carte » est actif (body.kta-precision-mode, interface.js) et en mode « perdu ».
   Hotspot (14,14) = le point cliqué ; repli `crosshair`. */
body.kta-precision-mode .leaflet-container,
body.kta-lost-click-mode .leaflet-container {
  cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28' viewBox='0 0 28 28'%3E%3Cg fill='none' stroke-linecap='round'%3E%3Cpath d='M14 3V11M14 17V25M3 14H11M17 14H25' stroke='%23000' stroke-width='4.5' opacity='0.85'/%3E%3Cpath d='M14 3V11M14 17V25M3 14H11M17 14H25' stroke='%23ff1e1e' stroke-width='2'/%3E%3C/g%3E%3Ccircle cx='14' cy='14' r='2.2' fill='%23000' opacity='0.85'/%3E%3Ccircle cx='14' cy='14' r='1.2' fill='%23ff1e1e'/%3E%3C/svg%3E") 14 14, crosshair !important;
}

/* ── Accordéon « Bonnes pratiques » (ambre) ── */
.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: var(--kta-accent-texte);
  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: var(--kta-accent-texte);
  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: var(--kta-accent-texte);
  margin-bottom: 4px;
  letter-spacing: 0.02em;
}
.kta-lost-pratique-cat ul {
  margin: 0;
  padding-left: 20px;
  color: var(--kta-texte-2);
  font-size: 12.5px;
  line-height: 1.55;
}
.kta-lost-pratique-cat li {
  margin-bottom: 3px;
}
.kta-lost-pratique-cat li strong {
  color: #ffd980;
}
.kta-lost-pratique-warn .kta-lost-pratique-cat-titre {
  color: #ff8a5c;
}
.kta-lost-pratique-warn li strong {
  color: #ffb088;
}

/* ── Popups Leaflet du mode urgence ── le thème sombre global s'applique déjà ; ici les couleurs :
   orange dernière position, violet indice dans la zone, gris hors zone. */

.kta-lost-popup-wrapper .leaflet-popup-content-wrapper {
  border-color: rgba(255, 107, 53, 0.30) !important;
}
.kta-lost-popup-wrapper .leaflet-popup-tip {
  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 {
  /* Titre orange sur la dernière position ; un indice garde le bleu de .leaflet-popup-content b. */
  color: #ff8a5c !important;
  font-size: 14px;
}
.kta-lost-popup .kta-popup-desc {
  color: var(--kta-texte-2);
  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: var(--kta-texte-3) !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 var(--kta-bordure);
}
.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: var(--kta-texte-3);
}
.kta-lost-popup-dist {
  font-family: ui-monospace, monospace;
  font-size: 12.5px;
  color: var(--kta-accent-texte);
  font-weight: 600;
}
.kta-lost-popup-match {
  font-style: italic;
  color: var(--kta-texte-3) !important;
  font-size: 11.5px !important;
}


/* ── Popups Leaflet ── */

.leaflet-popup-content-wrapper {
  background: var(--kta-surface) !important;
  color: var(--kta-texte) !important;
  border-radius: 10px !important;
  border: 1px solid var(--kta-bordure) !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: var(--kta-texte) !important;
}

.leaflet-popup-content b {
  color: var(--kta-interaction);
  font-size: 15px;
}

.leaflet-popup-tip-container .leaflet-popup-tip {
  background: var(--kta-surface) !important;
  box-shadow: none !important;
}

.leaflet-popup-close-button {
  color: var(--kta-texte-3) !important;
  font-size: 18px !important;
  top: 6px !important;
  right: 8px !important;
}
.leaflet-popup-close-button:hover {
  color: var(--kta-texte) !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: var(--kta-primaire) !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 : actions ── */

.kta-popup-point .kta-popup-desc {
  display: block;
  margin-top: 4px;
  color: var(--kta-texte-2);
  font-size: 12px;
  line-height: 1.4;
}
/* Panneau d'une extension (prise `panneau`) : fenêtre compacte. */
.kta-ext-panneau-boite { max-width: 460px; height: auto; max-height: 82vh; max-height: 82dvh; }
.kta-ext-panneau-corps { font-size: 13px; }
.kta-equipe-moi { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 0 12px;
  border-bottom: 1px solid rgba(255,255,255,0.07); margin-bottom: 8px; color: var(--kta-texte-2); }
.kta-equipe-ligne { padding: 9px 0; border-bottom: 1px solid rgba(255,255,255,0.05); }
.kta-equipe-nom { color: var(--kta-texte); }
.kta-equipe-nom span, .kta-equipe-pos { color: var(--kta-texte-3); }
.kta-equipe-pos { font-size: 12px; margin-top: 2px; }
.kta-equipe-actions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.kta-equipe-vide { color: var(--kta-texte-3); }
body.kta-theme-light .kta-equipe-nom, html.kta-theme-light .kta-equipe-nom { color: var(--kta-light-text) !important; }
body.kta-theme-light .kta-equipe-moi, html.kta-theme-light .kta-equipe-moi { color: var(--kta-light-text) !important; }
/* Ligne fournie par une extension (prise infoObjet). */
.kta-popup-ext-info {
  margin-top: 6px;
  color: var(--kta-texte-3);
  font-size: 11.5px;
  font-style: italic;
  line-height: 1.35;
}

/* ── Mode Histoire : bouton de la barre d'état + modale 2 onglets ── */

/* Bouton Histoire du header refonte */
.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;
}

/* Bouton Sortie d'urgence du header refonte.
   Fond rouge PERMANENT (le survol n'existe pas au doigt) et zone de tap étendue par un pseudo-élément
   invisible ; taille identique aux autres chips (décision produit : pas plus gros). */
body.kta-refonte-v1 .kta-refonte-header .kta-refonte-counter-sortie {
  position: relative;
  cursor: pointer;
  user-select: none;
  background: rgba(255, 80, 80, 0.22);
  border-color: rgba(255, 80, 80, 0.55);
  transition: background 0.15s ease;
}
body.kta-refonte-v1 .kta-refonte-header .kta-refonte-counter-sortie::after {
  content: "";
  position: absolute;
  inset: -5px -3px;   /* zone de tap ≥ 44 px de haut dans un header de 44 px */
}
body.kta-refonte-v1 .kta-refonte-header .kta-refonte-counter-sortie:hover,
body.kta-refonte-v1 .kta-refonte-header .kta-refonte-counter-sortie:focus,
body.kta-refonte-v1 .kta-refonte-header .kta-refonte-counter-sortie:active {
  background: rgba(255, 80, 80, 0.40);
  outline: none;
}
body.kta-refonte-v1 .kta-refonte-header .kta-refonte-counter-sortie .kta-refonte-counter-icon {
  font-size: 16px;   /* comme les autres chips icône seule */
}
/* Chips icône seule (histoire, sortie) en 16px : sans valeur à côté, l'emoji paraît plus petit que les
   chips icône + valeur. Limité à ces chips pour ne pas toucher stats / batterie / résumé mobile. */
body.kta-refonte-v1 .kta-refonte-counter-histoire .kta-refonte-counter-icon {
  font-size: 16px;
  line-height: 1;
}

/* ── Modale Sortie d'urgence ──
   Compacte : annule la largeur 960px et la hauteur 88vh de .kta-readme-modal-boite. */
.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: var(--kta-texte);
  word-break: break-word;
  margin-bottom: 2px;
}
.kta-sortie-dist {
  font-size: 14px;
  color: var(--kta-accent-texte);
  font-weight: 600;
}
.kta-sortie-fallback {
  display: inline-block;
  color: var(--kta-texte-3);
  font-weight: 400;
  font-size: 12px;
  margin-left: 4px;
  cursor: help;
}
/* « À vol d'oiseau » en toutes lettres, sorties non vérifiées sous un séparateur, bandeau si aucune n'a de
   chemin, ligne d'état « depuis où » sous le résultat. */
.kta-sortie-fallback-txt {
  font-size: 12px;
  color: #ffb3b3;
  font-weight: 500;
  margin-top: 4px;
}
.kta-sortie-principal-fallback {
  border-style: dashed;
}
.kta-sortie-bandeau {
  background: rgba(255, 80, 80, 0.14);
  border: 1px solid rgba(255, 80, 80, 0.40);
  color: #ffb3b3;
  border-radius: 6px;
  padding: 8px 10px;
  font-size: 13px;
  line-height: 1.4;
  margin-bottom: 12px;
}
.kta-sortie-origine {
  font-size: 12px;
  color: var(--kta-texte-3);
  margin: -6px 0 12px;
}
.kta-sortie-brancard {
  font-size: 12px;
  color: var(--kta-accent-texte);
  margin: -6px 0 12px;
}
.kta-sortie-alt-sep {
  list-style: none;
  font-size: 11px;
  color: var(--kta-texte-3);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 8px 0 4px;
  margin-top: 6px;
  border-top: 1px dashed rgba(136, 146, 164, 0.35);
}
.kta-sortie-niveau {
  display: inline-block;
  font-size: 11px;
  color: var(--kta-interaction);
  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: var(--kta-interaction);
  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: var(--kta-texte-2);
  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);
}
.kta-sortie-loader {
  text-align: center;
  padding: 20px;
  color: var(--kta-texte-2);
}
.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); }
}

/* 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 : structure kta-readme-modal-* */
.kta-histoire-boite {
  max-width: 900px;
  width: 95vw;
  height: 85vh;
  height: 85dvh;
  display: flex;
  flex-direction: column;
}
.kta-histoire-tabs {
  display: flex;
  gap: 4px;
  padding: 8px 16px 0;
  border-bottom: 1px solid #2a3142;
  background: var(--kta-surface);
}
.kta-histoire-tab {
  padding: 8px 16px;
  background: transparent;
  border: 1px solid transparent;
  border-bottom: none;
  border-radius: 6px 6px 0 0;
  color: var(--kta-texte-3);
  font-size: 13px;
  cursor: pointer;
  transition: color 0.15s ease, background 0.15s ease;
}
.kta-histoire-tab:hover {
  color: var(--kta-texte-2);
  background: rgba(140, 180, 255, 0.08);
}
.kta-histoire-tab-active {
  color: var(--kta-accent-texte);
  border-color: #2a3142;
  background: var(--kta-fond);
  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;
}
.kta-histoire-textarea {
  flex: 1;
  width: 100%;
  background: var(--kta-fond);
  border: 1px solid #2a3142;
  border-radius: 6px;
  color: var(--kta-texte-2);
  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: var(--kta-texte-3);
  white-space: nowrap;
}

/* ── Éditeur Markdown de la note libre ── */

.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;
}

.kta-histoire-note-edit-wrap {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.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: var(--kta-texte-2);
  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 lecture : rendu Markdown */
.kta-histoire-note-rendered {
  flex: 1;
  overflow-y: auto;
  background: var(--kta-fond);
  border: 1px solid #2a3142;
  border-radius: 6px;
  color: var(--kta-texte-2);
  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: var(--kta-accent-texte);
  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: var(--kta-texte);
}
.kta-histoire-note-rendered em {
  color: var(--kta-texte-2);
}
.kta-histoire-note-rendered a {
  color: var(--kta-interaction);
  text-decoration: underline;
}
.kta-histoire-note-rendered a:hover {
  color: #b3cdff;
}
.kta-histoire-note-rendered code {
  background: rgba(140, 180, 255, 0.10);
  color: var(--kta-accent-texte);
  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: var(--kta-texte-2);
  font-style: italic;
}
.kta-histoire-note-empty {
  color: var(--kta-texte-3);
  text-align: center;
  margin: 32px 16px;
}
/* Barre PDF (Importer / Remplacer / Retirer), visible sans PDF 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: var(--kta-texte-2);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.kta-histoire-pdf-wrap {
  flex: 1;
  overflow: hidden;
  position: relative;
  background: var(--kta-fond);
  border: 1px solid #2a3142;
  border-radius: 6px;
}
.kta-histoire-pdf-iframe {
  width: 100%;
  height: 100%;
  border: none;
  background: #ffffff;
}
/* Barre d'actions en surimpression sur l'iframe : si la CSP bloque l'iframe, « Ouvrir dans un onglet »
   marche partout (window.open d'un 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: var(--kta-avert);
  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: var(--kta-texte-2);
}
.kta-histoire-pdf-empty p,
.kta-histoire-pdf-fallback p {
  margin: 8px 0;
}

/* Bouton de lecture à voix haute (Web Speech) dans .kta-popup-desc, sans bordure ; icône stop pendant la lecture. */
.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);
}

/* Coordonnées GPS du point (via le calibrage), sélectionnables + bouton copier. Bloc absent du DOM si le plan
   n'a pas de calibrage utilisable. */
.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: var(--kta-interaction) !important;
  cursor: pointer;
  margin: 0 !important;
  min-width: 0 !important;
}
/* Pas d'opacité au repos : le glyphe tombait à 4,0–4,4:1. Le survol se lit au fond. */
.kta-popup-point .kta-popup-gps-copy:hover {
  background: var(--kta-info-fond) !important;
}

.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;
}

/* Boutons d'action de la popup point : resserrés (3 par ligne dans ~250px), surcharge le style générique
   de .leaflet-popup-content button. */
.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: var(--kta-interaction) !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;
}

/* « Je suis ici » : vert (recalage). */
.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: var(--kta-ok) !important;
}

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

/* « Y aller » : 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: var(--kta-accent-texte) !important;
}

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

/* Ligne « danger » (suppression) séparée des actions principales contre 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: var(--kta-erreur) !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;
}

/* « Modifier » : bleu neutre, pleine largeur (seul sur 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: var(--kta-interaction) !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;
}

/* « Favori » : ambre atténué inactif, saturé + bordure marquée actif. */
.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: var(--kta-accent-texte) !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: var(--kta-accent-texte) !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;
}

/* Slot photos, hydraté au popupopen (attachPopupPhotos) ; masqué vide pour ne pas laisser de 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;
  /* défilement horizontal plutôt que de retailler la popup */
  max-width: 100%;
}

/* 🩸 Une <img> cliquable (role="button" côté JS), pas un <button> : ses styles user-agent (bordure, padding,
   ligne de base) laissent un fond. display:block = exactement 44×44, sans jour sous l'image. */
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;
}


/* Photo « à rattacher » (nom porté par plusieurs points) : cadre orange pointillé + un bouton par photo. */
.kta-popup-photo-mini.kta-popup-photo-arattacher {
  outline: 2px dashed #ffb380;
  outline-offset: 1px;
}
.kta-popup-photos-arattacher {
  margin-top: 6px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.kta-popup-photos-arattacher-titre {
  font-size: 11px;
  line-height: 1.35;
  color: var(--kta-avert);
}
.kta-popup-photos-arattacher-btn {
  font-size: 11px;
  text-align: left;
}
html.kta-theme-light .kta-popup-photo-mini.kta-popup-photo-arattacher,
body.kta-theme-light .kta-popup-photo-mini.kta-popup-photo-arattacher { outline-color: #8b3a00; }
html.kta-theme-light .kta-popup-photos-arattacher-titre,
body.kta-theme-light .kta-popup-photos-arattacher-titre { color: var(--kta-avert); }
.kta-popup-photos-count {
  margin-top: 5px;
  font-size: 10.5px;
  color: var(--kta-accent-texte);
  font-family: "SF Mono", Monaco, Consolas, monospace;
  opacity: 0.85;
}

/* ── Suppression d'un tracé : floater du mode clic (même patron que celui de l'itinéraire) ── */

.kta-supp-trace-floater {
  position: fixed;
  left: 50%;
  bottom: 20px;
  transform: translateX(-50%);
  background: var(--kta-surface);
  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: var(--kta-texte-2);
  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: var(--kta-texte);
}

.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: var(--kta-surface);
  color: var(--kta-texte);
  border-radius: 14px;
  border: 1px solid var(--kta-bordure);
  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;
}


/* ── Barrière d'accès communautaire (unlock gate) ──
   ⚠️ z-index 100100 : au-dessus du splash (9999) et de toutes les modales, c'est la première interaction. */
#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);
  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;
}

.kta-unlock-titre {
  font-size: 20px;
  font-weight: 700;
  color: var(--kta-accent-texte);
  margin-bottom: 12px;
  letter-spacing: 0.02em;
}

.kta-unlock-info {
  font-size: 13px;
  color: var(--kta-texte-2);
  line-height: 1.55;
  margin: 0 0 20px;
}
.kta-unlock-info a {
  color: var(--kta-interaction);
  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: var(--kta-texte);
  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: var(--kta-erreur);
  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: var(--kta-ok);
  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: var(--kta-avert);
  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;
}

/* Verrouillage après 5 tentatives */
.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: var(--kta-erreur);
  margin-bottom: 8px;
}
.kta-unlock-lockout-msg {
  font-size: 13.5px;
  color: var(--kta-texte-2);
  font-style: italic;
  margin-bottom: 14px;
}
.kta-unlock-lockout-hint {
  font-size: 11.5px;
  color: var(--kta-texte-3);
  margin-top: 10px;
}

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


/* ── 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;
  /* `safe center` : une boîte plus haute que le viewport s'aligne en haut au lieu d'être coupée
     (mobile portrait + safe-area + contenu dense). Vaut pour toutes les modales. */
  align-items: safe center;
  justify-content: center;
  padding: 16px;
  box-sizing: border-box;
  /* Filet : une boîte plus haute que l'écran visible (barre d'adresse de Chrome mobile, texte agrandi) se fait
     défiler avec le fond, jusqu'à ses boutons du bas. */
  overflow-y: auto;
  animation: kta-fadein 0.18s ease;
}

.kta-readme-modal-boite {
  background: var(--kta-surface);
  border: 1px solid var(--kta-bordure);
  border-radius: 14px;
  box-shadow: 0 16px 48px rgba(0,0,0,0.65);
  width: min(960px, 96vw);
  /* vh puis dvh : sur iOS PWA (cover), dvh = écran physique entier.
     max-height et non height : une modale courte prend sa taille naturelle, une longue plafonne et défile
     dans .kta-readme-modal-corps. */
  max-height: min(88vh, 920px);
  max-height: min(88dvh, 920px);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* Modales plus grandes sur PC (≥ 1024px), mobile inchangé. Vaut pour toute modale .kta-readme-modal-boite
   sans largeur propre ; celles qui en ont une (.kta-aide-modal-boite, .kta-cfg-modal-boite,
   .kta-loader-config-boite) sont surchargées plus bas à valeur identique. vh/dvh et max-height : idem base. */
@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 var(--kta-bordure);
  flex-shrink: 0;
}

.kta-readme-modal-titre {
  font-size: 15px;
  font-weight: 700;
  color: var(--kta-interaction);
  letter-spacing: 0.04em;
  flex: 1;
}
/* Conditions d'utilisation : titre doré (charte : titres en accent), le bleu reste celui des modales d'aide. */
#kta-legal-gate-overlay .kta-readme-modal-titre,
#kta-legal-full-overlay .kta-readme-modal-titre { color: var(--kta-accent-texte); }

/* Bouton bascule du sommaire (à gauche du titre) */
.kta-readme-toc-toggle-btn {
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--kta-bordure);
  color: var(--kta-texte-2);
  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: var(--kta-texte);
}

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

/* Bouton d'accès au tutoriel dans l'en-tête de la Documentation, poussé à droite par le space-between de
   l'en-tête ; même style que .kta-readme-toc-toggle-btn. */
.kta-readme-tutorial-btn {
  background: rgba(244, 197, 66, 0.10);
  border: 1px solid rgba(244, 197, 66, 0.30);
  color: var(--kta-accent-texte);
  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);
}
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;
}

/* Langue de la doc : menu déroulant, accent bleu d'interaction, hauteur alignée sur les boutons voisins. */
.kta-readme-lang-select {
  background: rgba(140, 180, 255, 0.10);
  border: 1px solid rgba(140, 180, 255, 0.40);
  color: var(--kta-texte);
  border-radius: 6px;
  height: 32px;
  padding: 0 6px;
  font-size: 13px;
  cursor: pointer;
  margin-right: 6px;
  flex-shrink: 0;
}
.kta-readme-lang-select:hover,
.kta-readme-lang-select:focus {
  background: rgba(140, 180, 255, 0.25);
  border-color: rgba(140, 180, 255, 0.70);
}
.kta-readme-lang-select option { background: var(--kta-surface); color: var(--kta-texte); }
body.kta-theme-light .kta-readme-lang-select,
html.kta-theme-light .kta-readme-lang-select {
  background: rgba(30, 95, 153, 0.10) !important;
  border-color: rgba(30, 95, 153, 0.45) !important;
  color: #0f3d66 !important;
}
body.kta-theme-light .kta-readme-lang-select option,
html.kta-theme-light .kta-readme-lang-select option { background: #ffffff; color: #0f3d66; }

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

.kta-readme-toc-sidebar {
  width: 240px;
  flex-shrink: 0;
  border-right: 1px solid var(--kta-bordure);
  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;
}

.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: var(--kta-interaction);
  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: var(--kta-texte-3);
  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: var(--kta-texte-2);
}

.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: var(--kta-texte-2);
  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: var(--kta-texte);
}

.kta-readme-toc-link.active {
  color: var(--kta-accent-texte);
}

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

.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: var(--kta-texte-3);
  padding: 3px 6px;
  display: block;
  border-radius: 4px;
}

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

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

.kta-readme-toc-item.collapsed .kta-readme-toc-sublist { display: none; }
.kta-readme-toc-item.collapsed .kta-readme-toc-toggle { transform: rotate(-90deg); }

.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: var(--kta-texte-2);
}

.kta-readme-corps {
  font-family: Arial, sans-serif;
  font-size: 14px;
  line-height: 1.7;
  color: var(--kta-texte-2);
}

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

.kta-readme-corps h2 {
  font-size: 18px;
  color: var(--kta-interaction);
  margin: 32px 0 12px;
  padding: 6px 12px;
  background: var(--kta-info-fond);
  border-radius: 6px;
  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;
}

.kta-readme-corps h5 {
  font-size: 13px;
  color: var(--kta-texte-2);
  margin: 12px 0 4px;
}

.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; }

.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 var(--kta-bordure);
}

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

.kta-readme-corps strong { color: var(--kta-texte); }
.kta-readme-corps em     { color: #b0c8d8; }
.kta-readme-erreur       { color: #ffb3b3; font-style: italic; }

.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: var(--kta-texte-2);
  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: var(--kta-interaction);
  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: var(--kta-texte-2);
  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: var(--kta-texte-3);
  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 du tiling : pas de lissage entre tuiles adjacentes */
.kta-tile-overlay {
  image-rendering: auto;
  /* contre le jour sub-pixel entre tuiles sur certains navigateurs */
  margin: -0.5px;
}

/* ── Modale « Session précédente restaurée » (patron 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: var(--kta-surface);
  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: var(--kta-texte);
  animation: kta-session-pop-in 0.28s cubic-bezier(0.18, 0.89, 0.32, 1.18);
  /* modale courte : sinon étirée à 88vh */
  height: auto !important;
  max-height: 90vh !important;
  max-height: 90dvh !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: var(--kta-accent-texte);
  font-size: 28px;
  line-height: 1;
}

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

.kta-session-modal-plan {
  font-size: 12px;
  color: var(--kta-accent-texte);
  margin-bottom: 6px;
  font-weight: 600;
  letter-spacing: 0.02em;
}

.kta-session-modal-detail {
  font-size: 13px;
  color: var(--kta-texte-3);
  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;
}

@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 : 580px par défaut, 1100px + 2 colonnes sur PC (média plus bas).
   ⚠️ !important : .kta-readme-modal-boite fixe déjà width min(960px, 96vw) et gagnerait sinon. */
.kta-aide-modal-boite {
  max-width: 580px !important;
  width: min(580px, 96vw) !important;
}

/* L'intro traverse les 2 colonnes (sinon elle fait 50 % et décale les sections). */
.kta-aide-intro {
  color: var(--kta-texte-3);
  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: var(--kta-interaction);
  padding-bottom: 6px;
  margin-bottom: 8px;
  border-bottom: 1px solid var(--kta-bordure);
}

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

/* ── Aide intégrée : typographie des sections ──
   Classes plutôt que style= : ce contenu vit dans les dicos lang/, un traducteur ne recopie pas de CSS.
   ⚠️ Les écarts de marge (6/8/14px) reproduisent le rendu d'origine ; les normaliser change le rendu. */
.kta-aide-p { font-size:13px; color:var(--kta-texte-2); margin:0 0 8px; line-height:1.5; }
.kta-aide-liste { font-size:13px; color:var(--kta-texte-2); margin:0 0 8px 16px; padding:0; line-height:1.5; }
.kta-aide-note { font-size:12px; color:var(--kta-texte-3); margin:8px 0 0; line-height:1.5; }
.kta-aide-sousliste { font-size:12px; color:var(--kta-texte-3); margin:4px 0 0 18px; line-height:1.6; }
.kta-aide-mini { font-size:10px; color:var(--kta-texte-3); font-weight:400; }
/* ⚠️ modificateurs de marge APRÈS les blocs (même spécificité : l'ordre tranche) */
.kta-aide-m0 { margin:0; }
.kta-aide-mt6 { margin:6px 0 0; }
.kta-aide-mb8 { margin:0 0 8px; }
.kta-aide-mt14 { margin:14px 0 0; }
.kta-aide-mt14b8 { margin:14px 0 8px; }
/* ⚠️ couleurs en dernier : elles doivent gagner sur la couleur du bloc */
.kta-aide-c-bleu { color:var(--kta-interaction); }
.kta-aide-c-lead { color:#a8b3c8; }
.kta-aide-c-jaune { color:var(--kta-accent-texte); }
.kta-aide-c-orange { color:#ff8a5c; }
.kta-aide-c-rouge { color:#ff5555; }
.kta-aide-c-rouge-fonce { color:#d32f2f; }
.kta-aide-c-ambre { color:#e9a13b; }
.kta-aide-c-vert { color:var(--kta-ok); }
.kta-aide-c-corps { color:var(--kta-texte-2); }
.kta-aide-c-peche { color:var(--kta-avert); }
.kta-aide-c-abricot { color:#ffb266; }
.kta-aide-surligne { background:rgba(255,80,80,0.18); border-radius:4px; }

/* ── Modale Aide IA : prompt prêt à coller ── */
.kta-aide-ia-prompt-wrap {
  position: relative;
}
.kta-aide-ia-prompt {
  width: 100%;
  min-height: 180px;
  background: var(--kta-fond);
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 8px;
  padding: 12px 14px;
  color: var(--kta-texte-2);
  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: var(--kta-accent-texte);
  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: var(--kta-ok);
}

.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: var(--kta-texte-2);
}

/* ── Modale Aide : 2 colonnes sur PC (≥ 1024px) ──
   🩸 `columns: 2` SANS break-inside: avoid, volontairement : avec avoid (ou une grid), une section plus
   haute que les autres laisse un grand trou en bas de la colonne gauche. Prix accepté : une section peut
   être coupée entre les colonnes. Une section à garder entière reçoit son propre break-inside: avoid. */
@media (min-width: 1024px) {
  /* 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 {
    margin-top: 0;
    margin-bottom: 16px;
  }

  /* un titre de section n'est jamais séparé du début de son contenu */
  .kta-aide-corps .kta-aide-section-titre {
    break-after: avoid;
    page-break-after: avoid;
  }
}


/* ── Modale Réglages : 440px sur mobile, 1100px + 2 colonnes sur PC (comme l'Aide) ──

   ⚠️ Contrairement à l'Aide, break-inside: avoid sur les sections : on ne coupe pas un bloc d'inputs, et
   les sections, de hauteurs voisines, ne créent pas de trou. */
.kta-cfg-modal-boite {
  max-width: 440px !important;
  height: auto !important;
  max-height: 90vh !important;
  max-height: 90dvh !important;
}

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

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

  /* sections jamais coupées (cf. tête de bloc) */
  .kta-cfg-corps .kta-aide-section {
    break-inside: avoid;
    page-break-inside: avoid;
    margin-bottom: 16px;
  }

  /* 🩸 Un titre de groupe ne reste pas seul en bas de colonne (break-inside ne protège que les sections).
     `avoid-column` pour le multi-colonnes ; `avoid` et la forme legacy pour les autres moteurs.
     ⚠️ Les deux corps : le HOME a son propre conteneur avec les MÊMES titres. Toute modale en colonnes qui
     réutilise `.kta-cfg-group-titre` doit figurer ici. */
  .kta-cfg-corps .kta-cfg-group-titre,
  .kta-loader-config-corps .kta-cfg-group-titre {
    break-after: avoid-column;
    break-after: avoid;
    page-break-after: avoid;
    break-inside: avoid;
  }

  /* Barre d'actions : traverse les 2 colonnes, boutons visibles sans défiler. */
  .kta-cfg-actions-bar {
    column-span: all;
    -webkit-column-span: all;
    display: grid;
    /* Valeurs par défaut / Fermer (tout s'enregistre à la modification) */
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-top: 16px;
    padding-top: 12px;
    border-top: 1px solid var(--kta-bordure);
  }
}

@media (max-width: 1023px) {
  .kta-cfg-actions-bar {
    display: grid;
    grid-template-columns: 1fr 1fr;   /* Valeurs par défaut / Fermer */
    gap: 8px;
    margin-top: 12px;
    padding-top: 10px;
    border-top: 1px solid var(--kta-bordure);
  }
}


/* ── Modale Configuration du loader : 680px sur mobile, 1100px + 2 colonnes sur PC ──

   ⚠️ break-inside: avoid sur les sections, comme les Réglages (contenus structurés, hauteurs voisines) ;
   même CSS, même apparence que les Réglages in-app. */

.kta-loader-config-boite {
  max-width: 680px !important;
  height: auto !important;
  max-height: 90vh !important;
  max-height: 90dvh !important;
}

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

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

  /* sections jamais coupées (cf. tête de bloc) */
  .kta-loader-config-corps .kta-aide-section {
    break-inside: avoid;
    page-break-inside: avoid;
    margin-bottom: 16px;
  }
}

/* Paliers PC large / ultra-large des modales à largeur propre (Aide, Réglages, Configuration), mêmes que
   .kta-readme-modal-boite. */
@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;
  }
}

/* Modale Export Images : height:auto + max-height partout (contenu court), paliers de largeur PC. */
.kta-export-modal-boite {
  height: auto !important;
  max-height: 92vh !important;
  max-height: 92dvh !important;   /* hauteur visible réelle (barre d'URL mobile) ; vh = repli (QW7) */
}
@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;
  }
}

/* Modale Export PDF : largeur intermédiaire (moins d'options que l'Export Images), height:auto + max-height. */
.kta-pdf-modal-boite {
  height: auto !important;
  max-height: 90vh !important;
  max-height: 90dvh !important;   /* idem .kta-export-modal-boite (QW7) */
}
@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;
  }
}


/* Légende sur PC : multi-colonnes, les sections se répartissent seules. */
@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 {
    /* une catégorie n'est jamais coupée */
    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: var(--kta-texte-2);
  line-height: 1.3;
}

/* Légende en lecture seule (cartes OSM) : bandeau hors du corps, qui se répartit en colonnes sur PC. */
.kta-legende-lecture-tete {
  padding: 8px 16px 0;
}
.kta-legende-lecture-tete p {
  margin: 0 0 6px;
  font-size: 12.5px;
  line-height: 1.4;
}
.kta-legende-avertissement {
  padding: 6px 10px;
  border: 1px solid var(--kta-accent-bord);
  background: var(--kta-accent-fond);
  border-radius: 6px;
  color: var(--kta-texte);
}


/* ── 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: var(--kta-texte-3);
  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: var(--kta-texte-2);
}

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

.kta-conv-sens-desc {
  display: block;
  font-size: 11px;
  color: var(--kta-texte-3);
  font-family: 'Courier New', monospace;
}
.kta-conv-sens-btn.active .kta-conv-sens-desc { color: var(--kta-texte-2); }

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

.kta-conv-label {
  display: block;
  font-size: 12px;
  color: var(--kta-texte-3);
  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: var(--kta-texte-3);
  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: var(--kta-interaction);
}

.kta-conv-actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
  padding-top: 10px;
  border-top: 1px solid var(--kta-bordure);
  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 de démarrage (js/ktaSplash.js) ── */
/* Toujours sombre, quel que soit le thème (décision produit) : aucune règle de thème clair ne vise le splash.
   Portrait : réseau en haut, titre et licence dessous ; paysage : titre à gauche, réseau à droite.
   ⚠️ Une seule lecture, en `both` : chaque élément reste dans son état final jusqu'au fondu. L'état de BASE de
   chaque règle est l'image finale : `.kta-splash-fini` (passer, mouvement réduit) coupe les animations et l'affiche.
   ⚠️ Version longue : tracé complet à ~3,4 s (1,68 s + 37 × 45 ms) ; js/ktaSplash.js > DUREE_LONGUE_MS (4 s) en
   tient compte. Jouée en entier à chaque ouverture (décision produit). */

#splashOverlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: #0a0d18;
  display: flex;
  flex-direction: column;
  align-items: center;
  box-sizing: border-box;
  padding: calc(64px + env(safe-area-inset-top, 0px)) 16px calc(92px + env(safe-area-inset-bottom, 0px));
  overflow: hidden;
  opacity: 1;
  transition: opacity 0.4s ease-out;
  pointer-events: all;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

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

/* Le dessin garde ses proportions (viewBox, `meet`) dans la place laissée par les textes. */
.kta-splash-scene {
  position: relative;
  flex: 1 1 0;
  min-height: 0;
  width: min(84vw, 420px);
}
/* Calques à part : à chaque image, seul le dessin se repeint, pas les textes ombrés du splash. Ordre : eau et
   galeries SVG, canvas des galeries (js/ktaSplash.js, worker), pictos et rose. */
#splashReseau,
#splashReperes {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
  will-change: transform;
  contain: layout paint;
}
#splashReseauCanvas,
#splashReperes {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
#splashReseauCanvas { display: block; }
/* Le worker dessine les galeries : le SVG ne les montre plus (ni double trait, ni animation sur le fil principal :
   un élément display:none n'anime pas). */
#splashOverlay.kta-splash-canvas .kta-splash-galeries { display: none; }

.kta-splash-galeries path {
  fill: none;
  stroke: #c8d0e0;
  stroke-width: 2.3;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0.8;
  /* pathLength="1" sur chaque chemin : le tiret couvre la longueur exacte, sans mesure. 🩸 Départ à 1,01 et
     période 3 : un tiret de longueur nulle au bord garderait son bout rond (un point avant le tracé). */
  stroke-dasharray: 1 2;
  stroke-dashoffset: 0;
  animation: kta-splash-trace 1.68s cubic-bezier(0.45, 0.05, 0.3, 1) calc(var(--i) * 45ms) both;
}
@keyframes kta-splash-trace {
  from { stroke-dashoffset: 1.01; }
  to   { stroke-dashoffset: 0; }
}

.kta-splash-eau path {
  fill: none;
  stroke: #3aa9e8;
  stroke-width: 10;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0.38;
}
.kta-splash-eau path.kta-splash-inaccessible {
  stroke: url(#kta-splash-hachure);
  stroke-width: 11;
  opacity: 0.85;
}
.kta-splash-eau {
  animation: kta-splash-fondu 0.68s ease-out 1.52s both;
}

/* Pictos et rose : transform-box pour grandir / pivoter autour de leur propre centre. */
.kta-splash-pictos image,
.kta-splash-rose {
  transform-box: fill-box;
  transform-origin: center;
}
.kta-splash-pictos image {
  animation: kta-splash-picto 0.64s ease-out 1.76s both;
}
@keyframes kta-splash-picto {
  0%    { opacity: 0; transform: scale(0.3); }
  62.5% { opacity: 1; transform: scale(1.15); }
  100%  { opacity: 1; transform: scale(1); }
}
/* 🩸 Pas de filter (drop-shadow) dans le SVG : Safari quitte son rendu rapide pour TOUTE la scène et le début du
   tracé saccadait (iPhone). */
.kta-splash-rose {
  animation: kta-splash-rose 0.72s ease-out 1.84s both;
}
@keyframes kta-splash-rose {
  from { opacity: 0; transform: scale(0.55) rotate(-60deg); }
  to   { opacity: 1; transform: scale(1) rotate(0); }
}

.kta-splash-textes {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  margin-top: 8px;
}
#splashBox {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  /* 🩸 Une seule animation pour les deux orientations, le sens d'arrivée passe par des variables : changer
     d'animation-name en tournant le téléphone relançait l'animation (titre invisible ~2 s). */
  --kta-splash-titre-dx: 0;
  --kta-splash-titre-dy: 8px;
  animation: kta-splash-titre 0.6s ease-out 2.2s both;
}
@keyframes kta-splash-titre {
  from { opacity: 0; transform: translate(var(--kta-splash-titre-dx), var(--kta-splash-titre-dy)); }
  to   { opacity: 1; transform: translate(0, 0); }
}
#splashTitle {
  font-size: 36px;
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: 0.08em;
  color: #f4c542;
  text-shadow: 0 2px 18px rgba(244, 197, 66, 0.25);
}
/* « -pro » du splash : orange de l'identité pro (le doré reste au titre), révélé pendant l'apparition du titre
   (2,2 s → 2,8 s) et complet à 3,2 s, pour rester lisible avant la fin du splash (ktaSplash.js >
   DUREE_LONGUE_MS, 4 s). Le splash est toujours sombre : pas de variante claire. */
#splashTitle .kta-titre-suffix-pro {
  color: #e07b1a;
  letter-spacing: 0.02em;
  text-shadow: 0 2px 16px rgba(224, 123, 26, 0.4);
  animation-duration: 0.7s;
  animation-delay: 2.5s;
}
#splashSubtitle {
  font-size: 14px;
  color: #8892a4;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

/* 🩸 Scène en pause tant que les scripts de l'app s'exécutent (js/ktaSplash.js > _demarrer pose .kta-splash-go,
   que le worker des galeries attend aussi) : le tracé SVG tourne sur le fil principal et saccadait au début sur
   iPhone. Les coins (opacité seule) jouent dès l'affichage. */
#splashOverlay:not(.kta-splash-go) .kta-splash-galeries path,
#splashOverlay:not(.kta-splash-go) .kta-splash-eau,
#splashOverlay:not(.kta-splash-go) .kta-splash-pictos image,
#splashOverlay:not(.kta-splash-go) .kta-splash-rose,
#splashOverlay:not(.kta-splash-go) #splashBox,
#splashOverlay:not(.kta-splash-go) #splashTitle .kta-titre-suffix-pro,
#splashOverlay:not(.kta-splash-go) #splashLicense {
  animation-play-state: paused;
}

/* Coins, licence, crédits et signature : fondu au début (0,4 → 1 s). */
.kta-splash-coin {
  animation: kta-splash-fondu 0.6s ease-out 0.4s both;
}
@keyframes kta-splash-fondu {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* Image finale directe : animation passée (clic, Échap) ou mouvement réduit. */
#splashOverlay.kta-splash-fini *,
#splashOverlay.kta-splash-fini *::before,
#splashOverlay.kta-splash-fini *::after {
  animation: none !important;
}
@media (prefers-reduced-motion: reduce) {
  #splashOverlay *,
  #splashOverlay *::before,
  #splashOverlay *::after {
    animation: none !important;
  }
  /* 🩸 Sans animation, le clip-path de départ cacherait le suffixe pour toujours. */
  #splashTitle .kta-titre-suffix-pro { clip-path: none; }
}

/* Crédit Claude (haut-gauche, teinte « clay » #d97757) + version (haut-droite), symétriques. */
#splashClaudeCorner {
  position: absolute;
  top: calc(18px + env(safe-area-inset-top, 0px));
  left: calc(22px + env(safe-area-inset-left, 0px));
  display: flex;
  align-items: center;
  gap: 8px;
  pointer-events: none;
}
.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;
  gap: 1px;
  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: calc(22px + env(safe-area-inset-right, 0px));
  font-size: 13px;
  font-weight: 700;
  color: #f4c542;
  text-shadow: 0 0 10px rgba(244, 197, 66, 0.35);
  letter-spacing: 0.06em;
  font-family: 'Courier New', monospace;
  pointer-events: none;
}

/* Licence sous le titre (dans le flux de .kta-splash-textes). */
/* 🩸 La licence arrive AVEC le titre (scène), pas avec les coins : sur le pro l'accueil est prêt tard et la
   pastille « Édition professionnelle » restait seule à l'écran bien avant le reste. */
#splashLicense {
  animation: kta-splash-fondu 0.6s ease-out 2.4s both;
  margin-top: 22px;
  font-size: 11px;
  color: #8892a4;
  line-height: 1.6;
  letter-spacing: 0.02em;
  pointer-events: none;
}
.splash-license-detail {
  font-size: 10px;
  color: #8892a4;
  font-style: italic;
}

/* Variante « Édition professionnelle » : seulement avec .kta-instance-pro (posée par js/proLicense.js sur
   <html>/<body>). Ambre charte, sous-texte en italique.
   ⚠️ Ciblé #splashLicense > .kta-licence-pro : la mention community a les mêmes enfants. */
#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;
}

/* Licence en « pill » bordé charte.
   ⚠️ display scopé #splashLicense pour ne pas casser la bascule community/pro (.kta-instance-pro). */
#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; }
/* 🔒 Installation reliée à un serveur (ktaExtensions.js), licence valide ou NON : jamais l'identité
   community au démarrage (licence refusée = splash neutre, puis « Installation indisponible »). */
html.kta-instance-reliee #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 */
#splashLicense .kta-licence-community > span:first-child {
  color: #f4c542;
  font-weight: 500;
}

/* Rideau du démarrage (main.js > _rideauSiSplashParti) : relaie le splash retiré par son plafond, même rang. */
#kta-rideau-boot { position: fixed; inset: 0; z-index: 9999; background: var(--kta-fond); }

/* Signature en bas à droite. 28px : hors des coins arrondis d'écran (PWA bord à bord) ; safe-area pour
   l'encoche latérale en paysage. */
#splashKarmaCorner {
  position: absolute;
  bottom: calc(28px + env(safe-area-inset-bottom, 0px));
  right: calc(28px + env(safe-area-inset-right, 0px));
  pointer-events: none;
  /* lueur dorée : rend visible une image petite sans la grossir */
  filter: drop-shadow(0 0 8px rgba(244, 197, 66, 0.45))
          drop-shadow(0 1px 3px rgba(0, 0, 0, 0.6));
}
#splashKarmaImg {
  height: 20px;
  width: auto;
  display: block;
}

/* Crédit des librairies en bas à gauche (le bas-droit porte la signature). */
#splashLeafletCredit {
  position: absolute;
  bottom: calc(28px + env(safe-area-inset-bottom, 0px));
  left: calc(28px + env(safe-area-inset-left, 0px));
  font-size: 11px;
  color: #8892a4;
  letter-spacing: 0.02em;
  /* 2 lignes (<br> dans le HTML), 20px chacune ; la signature (20px, bottom 28px) s'aligne sur la 2e, la plus
     courte : la 1re passe au-dessus d'elle. Aligné à gauche : centrées, des lignes inégales flottent. */
  line-height: 20px;
  text-align: left;
  white-space: nowrap;
  pointer-events: none;
}

@media (max-width: 480px) {
  #splashKarmaImg { height: 18px; }
  #splashLeafletCredit { font-size: 10px; line-height: 18px; }
}

/* Portrait court (petit téléphone, fenêtre basse) : textes resserrés, le dessin garde la place restante. */
@media (orientation: portrait) and (max-height: 680px) {
  #splashOverlay { padding-top: calc(56px + env(safe-area-inset-top, 0px)); }
  #splashTitle { font-size: 30px; }
  #splashSubtitle { font-size: 12px; }
  #splashLicense { margin-top: 14px; }
}

/* Paysage (PC, tablette, téléphone couché) : titre à gauche, réseau à droite. */
@media (orientation: landscape) {
  #splashOverlay {
    flex-direction: row-reverse;
    justify-content: center;
    align-items: center;
    gap: clamp(32px, 9vw, 150px);
    padding: calc(60px + env(safe-area-inset-top, 0px)) 24px calc(56px + env(safe-area-inset-bottom, 0px));
  }
  .kta-splash-scene {
    flex: 0 0 auto;
    height: 100%;
    width: auto;
    aspect-ratio: 364 / 606;
  }
  .kta-splash-textes {
    align-items: flex-start;
    text-align: left;
    margin-top: 0;
  }
  #splashBox {
    align-items: flex-start;
    gap: 12px;
    --kta-splash-titre-dx: -10px;
    --kta-splash-titre-dy: 0;
  }
  #splashTitle { font-size: clamp(30px, 7vh, 56px); }
  #splashSubtitle { font-size: clamp(12px, 2vh, 16px); }
  #splashLicense { margin-top: clamp(14px, 3.5vh, 28px); }
}
@media (orientation: landscape) and (max-height: 500px) {
  #splashOverlay {
    padding-top: calc(44px + env(safe-area-inset-top, 0px));
    padding-bottom: calc(20px + env(safe-area-inset-bottom, 0px));
  }
  #splashKarmaImg { height: 16px; }
  #splashLeafletCredit { line-height: 16px; }
}

/* ── Loader : charte sombre ── */

#planLoaderOverlay {
  position: fixed;
  inset: 0;
  z-index: 5000;
  background: rgba(5, 8, 15, 0.92);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  /* Pas de padding : la box couvre tout le viewport (décision produit : pas de noir autour). Les safe-areas
     iOS sont gérées par le padding interne de la box. */
  padding: 0;
  box-sizing: border-box;
  overflow-y: auto;
}

#planLoaderBox {
  width: 100%;
  max-width: 100%;
  background: var(--kta-surface);
  color: var(--kta-texte);
  /* box bord à bord : rayon, bordure et ombre seraient coupés ou feraient un trait en haut */
  border-radius: 0;
  border: none;
  box-shadow: none;
  /* safe-area en HAUT seulement (contenu sous l'encoche) ; 4px en bas = minimum 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;
  /* 100vh puis 100dvh : repli iOS ≤ 15, dvh = écran physique en PWA cover */
  min-height: 100vh;
  min-height: 100dvh;
}

/* Loader-grid : pile verticale mobile/tablette (≤ 1023px), grid sur desktop (≥ 1024px).


   🩸 flex column et non `display: contents` : sur Safari iOS, contents se réévalue mal aux rotations
   (grid PC / contents mobile) ; un ZIP glissé en portrait puis rotation aller-retour laissait l'aperçu et
   le bouton Charger à la largeur paysage. Même rendu, évaluation déterministe à chaque resize. */


.loader-grid {
  display: flex;
  flex-direction: column;
  gap: 0;
}

@media (min-width: 1024px) {
  /* box bord à bord, padding horizontal interne pour aérer le contenu */
  #planLoaderBox {
    padding-left: 56px;
    padding-right: 56px;
  }

  .loader-grid {
    display: grid;
    /* Rails latéraux à largeur fixe, la Vue OSM absorbe tout le reste (aucun palier à maintenir).
       Colonne plans en fit-content plafonné à 420 px : au-delà, le titre passe sur 2 lignes
       (.plan-row-name-text). */
    grid-template-columns: fit-content(420px) minmax(0, 1fr) 300px;
    gap: 16px;
    align-items: start;
    margin-top: 4px;
  }

  .loader-col {
    min-width: 0;  /* Empêche les enfants overflow de pousser le grid */
  }

  /* Liste des plans : défile en interne au lieu d'allonger la colonne.
     🩸 Jamais de max-height: calc(100vh - N px) : un N fixe coupe le footer déplié et laisse du vide
     ailleurs. La hauteur vient du CONTENEUR (rangée grid minmax(0, 1fr) + liste flexible, plus bas). */
  .loader-col-plans .loader-plans-list {
    overflow-y: auto;
  }

  /* « Plus d'options » toujours déplié sur PC, malgré l'état JS mobile ; ni chevron ni curseur. */
  #advancedBox {
    display: flex !important;
  }

  #advancedHead {
    cursor: default;
  }


  /* Loader PC plein écran : fond unifié sur le #1a1f2e de la box.
     🩸 Aucun décor de fond sur l'overlay : quand le contenu dépasse 100dvh (footer déplié, fenêtre basse),
     il se peint sur ce fond étranger et dessine une bande « tronquée ».
     ⚠️ align-items:stretch doit RESTER : il donne à la box sa hauteur DÉFINIE (100dvh), sans laquelle la
     distribution flex interne (grid flex:1 + compression) ne s'opère plus (flex-start = corps non comprimé).
     Thème clair : unifié par body.kta-theme-light #planLoaderOverlay plus bas. Fond d'écran : peint sur
     l'overlay fixe en !important (kta-has-wall-bg, fin de fichier). PC (≥ 1024px) seulement. */
  #planLoaderOverlay {
    background: #1a1f2e;
    align-items: stretch;
  }

  /* hauteur héritée de la base ; ici le flex-column de la distribution interne (resume / grid / footer) */
  #planLoaderBox {
    display: flex;
    flex-direction: column;
  }

  /* La grid prend le reste de la hauteur de la box ; align-items: stretch (au lieu de start) donne une hauteur
     définie aux colonnes, sans quoi leurs flex internes ne grandissent pas. */
  .loader-grid {
    flex: 1 1 auto;
    /* ⚠️ Une rangée unique minmax(0, 1fr) = exactement la hauteur de la grid : chaque colonne gère son
       contenu EN INTERNE (liste des plans flexible + défilement ; colonne Actions qui défile sous 821 px de
       haut, bouton primaire épinglé — média (max-height: 820px) en fin de fichier). Le corps se comprime
       seul de la hauteur du footer déplié, sans constante calc(100vh - N).
       🩸 min-height:0 laisse déborder sur le footer, min-height:min-content le pousse hors écran.
       Plancher 520px = filet des petites fenêtres : en dessous, l'overlay défile, fond compris. */
    min-height: 520px;
    grid-template-rows: minmax(0, 1fr);
    align-items: stretch;
  }

  /* La liste est l'élément flexible de sa colonne : elle prend la place réelle et défile au-delà
     (min-height:0 = droit de compression sous le min-content). */
  .loader-col-plans .loader-plans-list {
    flex: 1 1 auto;
    min-height: 0;
  }
  .loader-col-plans {
    display: flex;
    flex-direction: column;
  }
  .loader-col-plans #myPlansBox {
    flex: 1 1 auto;
    /* 🩸 !important requis : homeLoader.js pose style.display = "block" en inline ; sans lui, flex:1 et
       min-height:0 des enfants sont morts. Média PC seulement. */
    display: flex !important;
    flex-direction: column;
    min-height: 0;
  }

  /* Colonne Actions : en-tête « Ajouter un plan », #panelZip flexible (zone de dépôt à sa taille naturelle
     en haut, « Charger ce plan » en bas par margin-top: auto), puis « Générer un plan » dessous. */
  .loader-col-actions {
    display: flex;
    flex-direction: column;
  }
  .loader-col-actions #panelZip {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    /* ⚠️ pas de flex sur .zip-drop-zone : elle garde sa taille naturelle */
  }
  .loader-col-actions #panelZip .loaderActions {
    /* l'espace entre la zone de dépôt et le bouton est voulu */
    margin-top: auto;
  }
  /* Colonne OSM (centre) : hauteur dispo, mini-carte étirée */
  .loader-col-osm {
    display: flex;
    flex-direction: column;
  }
  .loader-col-osm .kta-osm-home-box {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    /* 🩸 Pas de min-height: 0 ici : il coupe la remontée du minimum réel du widget (carte + bandeau + barre
       Tiles) vers la rangée, et le widget déborde sur le footer. Sans lui, la box grandit et la page défile
       de quelques pixels plutôt que de chevaucher. */
  }
  .loader-col-osm .kta-osm-home-content {
    flex: 1 1 auto;
    /* 🩸 Plancher seulement, jamais de minimum en vh : il peut dépasser la place restante, et le content
       (overflow: visible pour les popups) passe sous le footer. Minima compactés pour que tout tienne
       dans l'écran (décision produit) ; sur grand écran le flex remplit. */
    min-height: 200px;
  }
  .loader-col-osm .kta-osm-home-map {
    min-height: 160px;
  }
  .loader-col-osm .kta-osm-home-box {
    margin-bottom: 6px;
  }

  /* Sans opt-in OSM, la colonne est masquée (js/osmHomePreview.js > _setOsmColumnVisible) : grid à 2 colonnes
     (3fr 2fr), sans trou ni trace du widget. */
  .loader-grid.kta-no-osm {
    grid-template-columns: minmax(0, 1fr) 300px;
  }
}

/* ⚠️ La compaction PC BAS de la colonne Actions vit en FIN de fichier, avec le bloc « le footer déplié
   tient dans l'écran PC » (même contrainte d'ordre de cascade). */

/* Widget Vue OSM du HOME */
.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;
  /* overflow visible : les popups POI ne sont pas coupées (coins arrondis non clippés, sans effet visible). */
  overflow: visible;
  min-height: 260px;
}
.kta-osm-home-loading,
/* Bandeau d'annonce du fond OSM affiché par défaut ; disparaît pour de bon au premier « J'ai compris ». */
.kta-osm-defaut-info {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin: 0 0 8px 0;
  padding: 8px 10px;
  border: 1px solid rgba(244, 197, 66, 0.35);
  border-radius: 8px;
  background: rgba(244, 197, 66, 0.08);
  font-size: 12px;
  line-height: 1.45;
  color: var(--kta-texte-2);
}
.kta-osm-defaut-txt { flex: 1 1 200px; }
.kta-osm-defaut-ok {
  flex: 0 0 auto;
  padding: 5px 12px;
  border: 1px solid rgba(140, 180, 255, 0.45);
  border-radius: 6px;
  background: transparent;
  color: var(--kta-interaction);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
}
.kta-osm-defaut-ok:hover { background: rgba(140, 180, 255, 0.12); }

.kta-osm-home-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 200px;
  padding: 20px;
  text-align: center;
  font-size: 13px;
  color: var(--kta-texte-3);
  flex-direction: column;
  gap: 10px;
}
.kta-osm-home-empty strong { color: var(--kta-texte); }
.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: var(--kta-texte-2);
  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: var(--kta-texte);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 4px;
  cursor: pointer;
}
.kta-osm-home-bandeau select option { background: var(--kta-surface); color: var(--kta-texte); }
.kta-osm-home-bandeau .kta-osm-home-fullscreen {
  padding: 3px 8px;
  font-size: 13px;
  background: rgba(244, 197, 66, 0.12);
  color: var(--kta-accent-texte);
  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: var(--kta-sur-accent);
}
/* Mobile : le sélecteur de plan seul sur la 1re ligne, opacité et boutons groupés sur la 2e (flex-wrap). */
@media (max-width: 600px) {
  .kta-osm-home-bandeau select {
    flex: 1 1 100%;
    min-width: 0;
  }
  .kta-osm-home-bandeau {
    justify-content: flex-start;
  }
}
.kta-osm-home-map {
  flex: 1 1 auto;
  min-height: 220px;
  background: var(--kta-fond);
}
.kta-osm-home-footer {
  padding: 4px 10px;
  font-size: 10.5px;
  color: var(--kta-texte-3);
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  text-align: center;
}

/* 2e ligne du bandeau : bascules de catégories compactes */
.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: var(--kta-texte-3);
  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: var(--kta-texte);
}
.kta-osm-home-tag-chip.active {
  background: rgba(244, 197, 66, 0.18);
  border-color: rgba(244, 197, 66, 0.55);
  color: var(--kta-accent-texte);
}
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;
}

/* Popup POI de la Vue OSM (modale + widget) : className "kta-osm-popup" passé à bindPopup, charte sombre
   à la place du défaut Leaflet. */
.leaflet-popup.kta-osm-popup .leaflet-popup-content-wrapper {
  background: var(--kta-surface);
  color: var(--kta-texte);
  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: var(--kta-texte);
}
.leaflet-popup.kta-osm-popup .leaflet-popup-content b {
  color: var(--kta-accent-texte);
  font-weight: 600;
}
.leaflet-popup.kta-osm-popup .leaflet-popup-content span {
  color: var(--kta-texte-2);
}
.leaflet-popup.kta-osm-popup .leaflet-popup-tip {
  background: var(--kta-surface);
  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: var(--kta-texte-3);
  padding: 6px 8px;
  font-size: 18px;
  transition: color 0.15s;
}
.leaflet-popup.kta-osm-popup .leaflet-popup-close-button:hover {
  color: var(--kta-accent-texte);
  background: transparent;
}
/* Thème clair : fond beige, 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;
}

/* Thème clair du widget : couleurs via --kta-light-* (texte gris muet et bordure blanche y seraient
   invisibles). */
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 {
  /* bouton plein écran : ambre lisible sur les deux thèmes */
  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;
}

/* Plein écran inline (overlay viewport) par classe sur #ktaOsmHomeBox (openFullScreen) : plutôt que la
   Fullscreen API, marche partout (iOS Safari), sans permission ; Échap 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: var(--kta-fond) !important;
  border-radius: 0 !important;
  display: flex !important;
  flex-direction: column !important;
}
.kta-osm-home-box.kta-osm-home-fullscreen-active .loader-section-head {
  /* réserve pour la croix en position:fixed, sinon elle couvre la fin de la barre de recherche */
  padding: 10px 56px 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 plein écran devient une croix, un peu plus visible */
.kta-osm-home-box.kta-osm-home-fullscreen-active .kta-osm-home-fullscreen {
  padding: 6px 12px;
  font-size: 14px;
  font-weight: 700;
}
/* Plein écran : #ktaOsmHomeFullBtn sorti du flux, en haut à droite. */
.kta-osm-home-box.kta-osm-home-fullscreen-active #ktaOsmHomeFullBtn {
  /* croix discrète comme .kta-panneau-close, centrée sur la ligne de titre « Vue OSM » (16 px de haut) */
  position: fixed;
  top: 3px;
  right: 10px;
  z-index: 10001;
  width: 30px;
  height: 30px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 17px;
  font-weight: 400;
  line-height: 1;
  background: none;
  color: var(--kta-texte-2);
  border: none;
  box-shadow: none;
  border-radius: 6px;
}
.kta-osm-home-box.kta-osm-home-fullscreen-active #ktaOsmHomeFullBtn:hover {
  background: rgba(255, 255, 255, 0.08);
  color: var(--kta-texte);
}
html.kta-theme-light .kta-osm-home-box.kta-osm-home-fullscreen-active #ktaOsmHomeFullBtn,
body.kta-theme-light .kta-osm-home-box.kta-osm-home-fullscreen-active #ktaOsmHomeFullBtn { color: var(--kta-texte-2); }
html.kta-theme-light .kta-osm-home-box.kta-osm-home-fullscreen-active #ktaOsmHomeFullBtn:hover,
body.kta-theme-light .kta-osm-home-box.kta-osm-home-fullscreen-active #ktaOsmHomeFullBtn:hover {
  background: rgba(0, 0, 0, 0.06);
  color: #1a1f2e;
}
/* sinon la molette de Leaflet fait défiler la page derrière */
body.kta-osm-home-fs-lock { overflow: hidden; }

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;
}

/* ⚠️ Les correctifs thème clair du HOME sont en fin de fichier (l'ordre leur donne la priorité). */

/* Loader PC large ≥ 1440px : padding latéral plus généreux */
@media (min-width: 1440px) {
  #planLoaderBox {
    padding-left: 64px;
    padding-right: 64px;
  }
  /* 🩸 pas de max-height en calc(100vh - N) sur la liste : la hauteur vient du conteneur (cf. média ≥ 1024) */
}

@media (min-width: 1920px) {
  #planLoaderBox {
    padding-left: 96px;
    padding-right: 96px;
  }
}

.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;
}

/* Titre du loader : logo rose des vents (mkm-full.png) + bloc texte (nom + tagline), comme le splash.

   Halo jaune autour du logo, pulsation 1.02× au survol, tailles agrandies sur PC (≥ 1024px). */
.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;
  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: var(--kta-texte);
  letter-spacing: 0.03em;
  white-space: nowrap;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.45);
}

.loader-titre-tagline {
  /* Même révélation et même arrivée que « MyKTAMap » dans l'en-tête ; le « -pro » d'une installation arrive
     ensuite. */
  animation: kta-titre-base-reveal 0.7s cubic-bezier(0.45, 0.05, 0.55, 0.95) 0.4s both;
  font-size: 11px;
  color: #f4c542;
  opacity: 0.75;
  font-style: italic;
  letter-spacing: 0.06em;
  margin-top: 2px;
  white-space: nowrap;
}

/* PC ≥ 1024px : titre plus grand */
@media (min-width: 1024px) {
  .loader-titre-logo {
    width: 44px;
    height: 44px;
  }
  .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: var(--kta-interaction);
  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: var(--kta-texte);
}

/* Boutons utilitaires de l'en-tête du loader (alerte + doc), volontairement serrés. */
.loader-header-actions {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
}

/* Langue GLOBALE dans la modale Configuration : options peuplées par JS (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: var(--kta-texte);
}
.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: var(--kta-texte);
  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);
}
/* Emplacement d'une RAISON sous une option (capteur refusé…) : vide d'ordinaire, ne prend alors aucune place.
   Pas de paragraphe d'explication permanent : le détail vit dans le Guide et l'aide intégrée. */
.kta-cfg-raison {
  display: block;
  font-size: 11.5px;
  color: var(--kta-texte-3);
  line-height: 1.5;
}
.kta-cfg-raison:empty,
.kta-perf-ultra-hint:empty { display: none; }
body.kta-theme-light .kta-cfg-raison,
html.kta-theme-light .kta-cfg-raison { color: var(--kta-texte-3); }
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: var(--kta-interaction);
}
/* 🩸 Options du menu de langue (HOME et plan) : le popup natif hérite d'un fond quasi transparent, texte
   clair sur fond clair. Fond solide imposé (sombre + variante claire). */
.kta-cfg-lang-select option,
.kta-cfg-input option {
  background: var(--kta-surface);
  color: var(--kta-texte);
}
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;
}

/* ── Mode Performance ULTRA : toggles de 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: var(--kta-texte);
  line-height: 1.3;
}
.kta-perf-ultra-hint {
  font-size: 11.5px;
  color: var(--kta-texte-3);
  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 d'alerte du header du loader, coloré selon le niveau max actif.
   ⚠️ Classes posées par index.html > _majBadgeAlert : -emergency (rouge pulsant), -warning, -info,
   -none. .loader-btn-alert seule n'a pas de style : c'est un sélecteur pour le JS. */
.loader-btn-help.loader-btn-alert {
  position: relative;  /* pour la pastille compteur */
}
/* Niveau EMERGENCY : rouge pulsant */
.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: var(--kta-texte-3);
}
.loader-btn-help.loader-btn-alert-none:hover {
  background: rgba(255, 255, 255, 0.10);
  border-color: rgba(255, 255, 255, 0.20);
  color: var(--kta-texte);
}

/* Pastille compteur (visible si > 1 alerte non acquittée), en haut à droite du bouton. */
.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;
}
/* Pastille « du neuf » d'une extension (homeConfig.js > _majPastilleNeuf), en haut à GAUCHE : le compteur d'alertes
   garde la droite, les deux peuvent coexister. */
.loader-btn-alert-neuf {
  position: absolute;
  top: -4px;
  left: -4px;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: 8px;
  background: var(--kta-accent);
  color: var(--kta-sur-accent);
  font-size: 10px;
  font-weight: 700;
  line-height: 16px;
  text-align: center;
  border: 1.5px solid var(--kta-surface);
  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 », hors-ligne) ── */
/* Plus légère que .kta-readme-modal-overlay : fond 60 %, hauteur au contenu.
   🩸 align-items:center + overflow-y:auto pousse une boîte trop haute au-dessus du viewport (haut
   inaccessible). D'où flex-start sur le container + margin:auto sur l'enfant : centré s'il y a la
   place, sinon parti du haut, et le scroll reste accessible (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;
  justify-content: center;
  /* 🩸 iOS : padding-top avec le safe-area, sinon la boîte colle au notch quand elle déborde. */
  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;                        /* centré si la place le permet, parti du haut sinon */
  background: var(--kta-surface);
  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: var(--kta-texte-2);
}
.kta-alert-absent-corps {
  padding: 14px 16px;
}
.kta-alert-absent-msg {
  color: var(--kta-texte-2);
  font-size: 13.5px;
  line-height: 1.55;
  margin: 0;
}
.kta-alert-absent-msg strong {
  color: var(--kta-ok);
  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 » (déjà à jour) : version installée, date, notes. */
.kta-alert-absent-version-block {
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid var(--kta-bordure);
}
.kta-alert-absent-version-released {
  color: var(--kta-texte-3);
  font-size: 12px;
  margin-bottom: 8px;
}
.kta-alert-absent-version-released strong {
  color: var(--kta-texte-2);
  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: var(--kta-interaction);
  margin-bottom: 5px;
}
.kta-alert-absent-version-notes {
  margin: 0;
  padding-left: 20px;
  color: var(--kta-texte-2);
  font-size: 12.5px;
  line-height: 1.55;
}
.kta-alert-absent-version-notes li {
  margin-bottom: 3px;
}


#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: var(--kta-texte-2);
  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: var(--kta-primaire);
  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-secondary {
  border: 1px solid rgba(140,180,255,0.25);
  border-radius: 8px;
  background: rgba(140,180,255,0.08);
  color: var(--kta-texte-2);
  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: var(--kta-texte);
}

.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;
}

/* Fenêtre Dépannage (Configuration > Dépannage, js/homeConfig.js) : trois actions du plus doux au
   plus radical + l'adresse de la page de secours. Hauteur au contenu, comme les confirmations. */
.kta-readme-modal-boite.kta-depannage-boite {
  max-width: 480px;
  height: auto;
  max-height: 92vh;
  max-height: 92dvh;
}
.kta-depannage-item {
  margin-bottom: 14px;
}
.kta-depannage-item .kta-loader-perf-hint {
  margin: 0 0 6px 0;
}
.kta-depannage-item .loader-btn-secondary {
  width: 100%;
}
.kta-depannage-secours {
  margin: 4px 0 0 0;
  font-size: 12px;
  line-height: 1.5;
}
.kta-depannage-secours code {
  word-break: break-all;
}

#loaderStatus {
  margin-top: 14px;
  font-size: 13px;
  min-height: 18px;
  color: var(--kta-interaction);
}

/* ── 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: var(--kta-interaction);
  font-weight: 600;
}

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


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

/* Toggle « Afficher plans serveur » entre le head et la liste : discret, hover marqué. */
.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: var(--kta-texte-3);
  cursor: pointer;
  user-select: none;
  transition: color 0.12s;
}

.loader-plans-filter-row:hover {
  color: var(--kta-texte-2);
}

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

/* Registre non vide mais tout masqué par le filtre (ex. seuls des plans serveur, toggle décoché). */
.loader-plans-empty {
  padding: 16px 12px;
  text-align: center;
  font-size: 12px;
  color: var(--kta-texte-3);
  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: var(--kta-texte-2);
  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;
}

/* ⚠️ 1re ligne en flex : le nom prend flex:1 (et l'ellipsis), badges et version restent en
   flex-shrink:0 pour rester visibles sur un nom long. */
.plan-row-title {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;       /* sans min-width:0, l'enfant flex:1 ne rétrécit pas (ellipsis inopérante) */
  overflow: hidden;
}

.plan-row-name-text {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 13px;
  color: var(--kta-texte);
  font-weight: 500;
  /* Titre sur 2 lignes, ellipsis au-delà seulement (line-clamp) : pas de titre tronqué (décision produit). */
  white-space: normal;
  overflow-wrap: anywhere;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  line-height: 1.25;
}

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


/* Ancien conteneur de badges, plus généré par planRowHTML : gardé pour d'éventuels consommateurs
   tiers (le badge de stockage vit dans .plan-row-modes). */

/* 2e ligne : badges de mode (V1/V2/M-LVL) + badge de stockage, groupés pour tout voir d'un coup.
   align-items:center aligne les badges mono 9px à fond et l'emoji 11px sans fond. */
.plan-row-modes {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-top: 3px;
  flex-wrap: wrap;
}

/* Badges de mode V2 / M-LVL / V1 */
.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: var(--kta-accent-texte);
  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: var(--kta-texte-3);
  border: 1px solid rgba(255, 255, 255, 0.10);
}


.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: var(--kta-texte-2);
  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;
}
/* Bouton infos : accent bleu */
.plan-row-info-btn:hover {
  background: rgba(140,180,255,0.12);
  border-color: rgba(140,180,255,0.4);
  color: var(--kta-interaction);
}

/* Modale « Infos détaillées sur l'archive » : pattern .kta-readme-modal, 480px, table clé/valeur. */
.kta-plan-infos-boite {
  max-width: 480px !important;
  height: auto !important;
  max-height: 80vh !important;
  max-height: 80dvh !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: var(--kta-texte-3);
  font-weight: 500;
  white-space: nowrap;
  vertical-align: top;
  width: 40%;
}

.kta-plan-infos-table .kta-info-val {
  padding: 8px 0;
  color: var(--kta-texte);
  word-break: break-word;
  vertical-align: top;
}

.plan-row-badge {
  display: inline-block;
  font-size: 11px;
  vertical-align: middle;
  cursor: help;
}
.plan-row-badge-stored { color: var(--kta-ok); }
.kta-plan-row-ext-badge { color: var(--kta-interaction); font-size: 11px; white-space: nowrap; }   /* installation (activité) */
.plan-row-badge-fs     { color: var(--kta-interaction); }
.plan-row-badge-pick   { color: var(--kta-texte-2); opacity: 0.7; }

/* Onglets loader */

.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: var(--kta-texte-3);
  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: var(--kta-interaction);
}

.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: var(--kta-interaction);
  font-weight: 600;
  margin-top: 6px;
  min-height: 16px;
  /* noms de fichiers longs : les « _ » ne sont pas des points de coupure, sans ce wrap le nom
     sort du conteneur. */
  max-width: 100%;
  overflow-wrap: anywhere;
  word-break: break-word;
}

/* Hint italique (utilisé par index.html et devMode.js) */
.kta-loader-perf-hint {
  margin: 0 0 4px 0;
  font-size: 11.5px;
  color: var(--kta-texte-3);
  font-style: italic;
  line-height: 1.45;
}

.kta-perf-titre {
  font-size: 13px;
  font-weight: 600;
  color: var(--kta-texte);
  user-select: none;
}

/* ── Bouton debug toggle (loader, advancedBox) : hérite de .loader-btn-secondary, état actif en accent ── */
.loader-btn-secondary.kta-debug-toggle.active {
  background: rgba(244, 197, 66, 0.12);
  border-color: rgba(244, 197, 66, 0.45);
  color: var(--kta-accent-texte);
}

.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 ── */

/* Modale du générateur : 1100px max sur PC ; corps en 2 colonnes à ≥ 1280px pour réduire le
   scroll. Colonne unique sur mobile et tablette. */
.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;
  }
}
/* 2 colonnes : sections assignées explicitement par .kta-pl-col-* ; grid-auto-flow dense comble les
   trous laissés par les sections de hauteur variable. */
@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;
  }
  /* 🩸 min-width:0 sur tous les items : sinon un contenu large en nowrap (data URL SVG d'icône,
     ~700px) impose sa largeur à la colonne et la grille déborde la modale. */
  #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;
  }
  /* 🩸 L'indication de mode prend toute la largeur : sinon elle laisse vide la colonne 2 de sa
     rangée et grid-auto-flow:dense y remonte le Tracking, au-dessus de la zone de dépôt
     (visible en mode Avancé seulement). */
  #kta-planner-corps > .kta-planner-mode-hint {
    grid-column: 1 / -1;
  }
}

.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: var(--kta-texte-3);
  font-size: 11px;
  margin-left: 4px;
}

.kta-planner-info {
  font-size: 12px;
  color: var(--kta-texte-3);
  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;
}

/* Sélecteur du mode image (Upload / Vierge) : grille 2 colonnes, 1 sur mobile. */
.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: var(--kta-texte-2);
}

.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: var(--kta-texte-2);
  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: var(--kta-texte-2);
}
.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 : case compacte du planner, liseré violet (conversion irréversible, beaucoup de
   tuiles). Visible en mode Modifier seulement (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: var(--kta-tuilage-v2);
  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: var(--kta-texte-2);
  line-height: 1.4;
}
.kta-planner-tiling-v2-row strong {
  color: var(--kta-tuilage-v2);
  font-weight: 600;
}
.kta-planner-tiling-v2-row em {
  color: var(--kta-texte-3);
  font-style: italic;
  font-size: 11.5px;
  line-height: 1.5;
}

/* Multi-niveau : case compacte du 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: var(--kta-texte-2);
  line-height: 1.4;
}
.kta-planner-multilevel-row strong {
  color: var(--kta-accent-texte);
  font-weight: 600;
}
.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: var(--kta-texte-3);
  font-style: italic;
}
.kta-planner-dim-val {
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-weight: 600;
  color: var(--kta-interaction);
}
.kta-planner-dim-ok .kta-planner-dim-val {
  color: var(--kta-ok);
}
.kta-planner-dim-warn .kta-planner-dim-val {
  color: var(--kta-accent-texte);
}
.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 startX/startY après Recentrer : confirme la mise à 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 (alert.json) : emergency rouge pulsant, warning orange, info bleu ── */
/* Emergency volontairement agressif, pour ne pas être ignoré (décision produit). */

.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;
  /* 🩸 hauteur auto bornée à 88vh + flex column : le corps scrolle dans la boîte au lieu de la
     faire déborder. */
  height: auto !important;
  max-height: 88vh !important;
  max-height: 88dvh !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;
  /* corps scrollable : flex 1 1 auto entre header et footer ; min-height:0 sinon le contenu impose
     sa hauteur intrinsèque et rien ne rétrécit. */
  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: var(--kta-texte-2);
  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 var(--kta-bordure);
  font-size: 11.5px;
  color: var(--kta-texte-3);
  font-family: ui-monospace, monospace;
}
/* Ligne « 🔔 notifications » d'une extension (KtaExtensions.ligneNotifications), au pied de la fenêtre 🚨. */
.kta-alert-notif {
  margin-top: 14px;
  padding-top: 10px;
  border-top: 1px solid var(--kta-bordure);
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 13px;
  color: var(--kta-texte-2);
  text-align: left;
}
.kta-alert-notif-rappel { font-size: 12px; }
.kta-alert-notif-btn { align-self: flex-start; }
.kta-alert-notif-etat { font-weight: 600; }
/* Action d'une extension (KtaExtensions.actionAlertes), au pied de la fenêtre 🚨, avant la ligne des notifications. */
.kta-alert-action-ext { margin-top: 14px; display: flex; }
.kta-alert-action-ext-btn { min-height: 44px; }
/* Bloc « 🆕 Quoi de neuf » d'une extension (KtaExtensions.blocNouveautes), en tête du corps de la fenêtre 🚨 (après
   le message sous une alerte d'urgence). Une ligne par sujet : texte puis bouton, qui passe dessous sur un téléphone. */
.kta-alert-neuf {
  margin: 0 0 14px 0;
  padding: 10px 12px;
  border: 1px solid var(--kta-accent);
  border-radius: 8px;
  background: var(--kta-surface);
  display: flex;
  flex-direction: column;
  gap: 8px;
  text-align: left;
}
.kta-alert-level-emergency .kta-alert-neuf { margin: 14px 0 0 0; }
.kta-alert-neuf-titre { font-weight: 700; color: var(--kta-accent-texte); font-size: 14px; }
.kta-alert-neuf-ligne { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.kta-alert-neuf-texte { flex: 1 1 160px; min-width: 0; color: var(--kta-texte-2); font-size: 13px; overflow-wrap: anywhere; }
.kta-alert-neuf-btn { min-height: 44px; flex: 0 0 auto; }
.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: var(--kta-interaction);
  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: var(--kta-primaire) !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: var(--kta-texte-2);
  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: var(--kta-texte-3);
  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: var(--kta-texte-3);
  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 var(--kta-bordure);
  border-radius: 8px;
  padding: 10px 12px;
}

/* Ligne remplie par l'assistant « Mettre à jour le plan » (createConf.js > _appliquerMaj). */
.kta-planner-layer-maj {
  border-color: var(--kta-accent);
}

.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: var(--kta-interaction);
  letter-spacing: 0.04em;
}

.kta-planner-remove-btn {
  background: none;
  border: none;
  color: var(--kta-texte-3);
  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: var(--kta-interaction);
  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 : gate plein écran (keypad, biométrie, lockout) + section d'activation ── */

/* 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 var(--kta-bordure);
  border-radius: 6px;
  margin-bottom: 10px;
  font-size: 13px;
  color: var(--kta-texte-2);
}

.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: var(--kta-interaction);
}


/* ── Gate plein écran : modale au boot quand le PIN est activé ── */
/* ⚠️ Doc README ouverte depuis une gate (UnlockGate 100100, PinLock 100002) : doit passer
   au-dessus, sinon inaccessible. Classe posée par afficherReadme(overLocker: true). */
.kta-readme-modal-overlay.kta-readme-over-locker {
  z-index: 100200 !important;
}

/* Bouton « Documentation » des deux gates (et variantes lockout) : discret, façon lien. */
.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: var(--kta-interaction);
  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: var(--kta-surface);
  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;
}

.kta-pin-gate-titre {
  font-size: 20px;
  font-weight: 700;
  color: var(--kta-accent-texte);
  margin-bottom: 6px;
}

.kta-pin-gate-soustitre {
  font-size: 13px;
  color: var(--kta-texte-2);
  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: var(--kta-texte-3);
  transition: color 0.15s, transform 0.15s;
}

.kta-pin-dot-filled {
  color: var(--kta-accent-texte);
  transform: scale(1.1);
}

.kta-pin-dot-visible {
  /* Pattern iOS : chiffre visible 0,5 s puis ● */
  font-size: 20px;
  background: rgba(244, 197, 66, 0.18);
  border-radius: 50%;
  color: var(--kta-accent-texte);
}

/* Affichage erreur + tentatives */
.kta-pin-gate-err {
  font-size: 12.5px;
  color: var(--kta-erreur);
  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: var(--kta-texte-3);
  margin-bottom: 14px;
  font-style: italic;
}

.kta-pin-gate-attempts-warn {
  color: var(--kta-avert);
  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: var(--kta-texte);
  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;
}

/* Bouton biométrie au-dessus du keypad (auto-prompt 400 ms 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: var(--kta-ok);
  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: var(--kta-erreur);
  font-size: 20px;
}

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

/* Bouton Valider : actif dès PIN_MIN chiffres ; désactivé = gris, opacité 0.35. */
.kta-pin-gate-key-validate {
  background: rgba(108, 226, 138, 0.15);
  border-color: rgba(108, 226, 138, 0.4);
  color: var(--kta-ok);
  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: var(--kta-bordure);
  color: var(--kta-texte-3);
}

/* 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 : overlay plein écran, minimap + cap en gros, coordonnées dans une bulle ── */

.kta-emergency-overlay {
  position: fixed;
  inset: 0;
  z-index: 100003;  /* au-dessus de tout, même de la PIN gate */
  display: flex;
  /* 🩸 « safe center » : centré si la boîte tient, sinon flex-start. Avec center seul, une boîte
     plus haute que l'écran déborde par le haut, hors de portée du scroll (titre inaccessible). */
  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 */
.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-exit-btn     { background: #f4c542; color: #0a0d18; border-color: #f4c542; }
.kta-emergency-dark .kta-emergency-exit-btn:hover { background: #ffd860; }

/* Thème clair : lampe d'appoint */
.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-exit-btn     { background: #c0392b; color: #ffffff; border-color: #c0392b; }
.kta-emergency-light .kta-emergency-exit-btn:hover { background: #a02818; }

/* Layout commun aux 2 thèmes */
/* La boîte se limite à la hauteur visible et la grille absorbe le reste (la minimap grandit) ;
   max-height ne force rien sur grand écran. Le bouton de sortie reste visible (sticky). */
.kta-emergency-box {
  width: 100%;
  max-width: 720px;
  min-height: 100%;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.kta-emergency-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  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);
}

/* Le mode urgence suit le thème de l'app (ThemeManager) : pas de bascule propre. */

/* Nom du plan en sous-titre : une ligne, ellipsis (repère, pas donnée à lire). */
.kta-emergency-plan-nom {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.02em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100%;
}

.kta-emergency-header-main {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;   /* sinon l'ellipsis du nom de plan ne peut pas s'appliquer */
}

/* Ligne d'état (batterie, tracker, boussole) à droite du titre, puis l'icône des coordonnées. */
.kta-emergency-etats {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  flex-shrink: 1;
  min-width: 0;
  text-align: right;
}

/* icône des coordonnées (plan géoréférencé) : 44 px, cet écran se touche avec des gants */
.kta-em-coords-btn {
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  padding: 0;
  font-size: 20px;
  line-height: 1;
  border: 1.5px solid;
  border-radius: 10px;
  cursor: pointer;
  font-family: inherit;
  background: transparent;
  color: inherit;
}
.kta-emergency-dark  .kta-em-coords-btn { background: rgba(255,255,255,0.06); border-color: rgba(244,197,66,0.55); }
.kta-emergency-light .kta-em-coords-btn { background: rgba(0,0,0,0.05); border-color: rgba(184,116,11,0.6); }
/* Les règles `display` des classes l'emportent sur l'attribut `hidden`. */
.kta-emergency-overlay [hidden] { display: none !important; }

.kta-emergency-chip {
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.02em;
  line-height: 1.25;
}

.kta-emergency-grid {
  display: grid;
  /* la minimap est seule et prend toute la place, portrait comme paysage */
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr);
  gap: 12px;
  flex: 1 1 auto;
  min-height: 0;
}

.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;
  /* bloc heading relatif : porte la minimap pleine taille et l'overlay centré */
  position: relative;
  min-height: 320px;
  padding: 0 !important;
  overflow: hidden;
  border-radius: 12px;
}

/* Overlay au-dessus de la minimap : en haut CAP + cardinal, centre libre, degrés 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 */
}
/* la minimap se manipule au doigt : le texte posé dessus laisse passer les gestes */
.kta-emergency-bloc-heading-overlay > * {
  pointer-events: none;
}

/* Groupe haut : CAP + cardinal empilés */
.kta-emergency-heading-top {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}

.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-sub {
  font-size: 12.5px;
  font-style: italic;
  margin-top: 2px;
}

/* Recentrer : visible quand la minimap a été bougée (suivi en pause) ; bas droite, cible ≥ 48 px. */
.kta-em-recentrer-btn {
  position: absolute;
  right: 10px;
  bottom: 10px;
  z-index: 3;
  min-height: 48px;
  min-width: 48px;
  padding: 8px 14px;
  font-size: 15px;
  font-weight: 800;
  border: 2px solid;
  border-radius: 12px;
  cursor: pointer;
  font-family: inherit;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.45);
}
.kta-emergency-dark  .kta-em-recentrer-btn { background: #1a1f2e; color: #f4c542; border-color: #f4c542; }
.kta-emergency-light .kta-em-recentrer-btn { background: #ffffff; color: #b8740b; border-color: #b8740b; }

/* Points de la minimap : icône du catalogue, sans le cadre blanc des divIcon ni le scale de la carte. */
.kta-em-mini-poi {
  background: none !important;
  border: none !important;
  cursor: pointer;
}
.kta-em-mini-poi img {
  display: block;
  width: 100%;
  height: 100%;
  -webkit-user-drag: none;
  user-select: none;
  filter: drop-shadow(0 0 3px rgba(0, 0, 0, 0.7));
}
.kta-em-mini-poi-sans-icone::after {
  content: "";
  position: absolute;
  inset: 12px;
  border-radius: 50%;
  background: #8cb4ff;
  border: 2px solid #ffffff;
}

/* Bulles (coordonnées / point) : le fond capte l'appui à côté, qui ferme la bulle. */
.kta-em-bulle-fond {
  position: fixed;
  inset: 0;
  z-index: 10;
  display: flex;
  align-items: 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;
  background: rgba(0, 0, 0, 0.55);
}
.kta-em-bulle {
  width: 100%;
  max-width: 460px;
  max-height: 100%;
  overflow-y: auto;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 14px 16px 16px;
  border: 2px solid;
  border-radius: 14px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.6);
}
.kta-emergency-dark  .kta-em-bulle { background: #1a1f2e; color: #e8eaf0; border-color: #f4c542; }
.kta-emergency-light .kta-em-bulle { background: #ffffff; color: #0a0d18; border-color: #b8740b; }
.kta-em-bulle-tete {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}
.kta-em-bulle-titre {
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding-top: 12px;
  min-width: 0;
  overflow-wrap: anywhere;
}
.kta-emergency-dark  .kta-em-bulle-titre { color: #f4c542; }
.kta-emergency-light .kta-em-bulle-titre { color: #b8740b; }
.kta-em-bulle-fermer {
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  padding: 0;
  font-size: 20px;
  line-height: 1;
  border: 1.5px solid;
  border-radius: 10px;
  cursor: pointer;
  font-family: inherit;
  background: transparent;
  color: inherit;
}
.kta-emergency-dark  .kta-em-bulle-fermer { border-color: rgba(200, 208, 224, 0.4); }
.kta-emergency-light .kta-em-bulle-fermer { border-color: rgba(44, 56, 72, 0.35); }
/* Coordonnées : lisibles à un mètre, pour les dicter au téléphone. */
.kta-em-coords-val {
  font-family: "SF Mono", Monaco, Consolas, monospace;
  font-size: clamp(30px, 10.5vw, 48px);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.01em;
  text-align: center;
  white-space: nowrap;
}
.kta-emergency-dark  .kta-em-coords-val { color: #f4c542; }
.kta-emergency-light .kta-em-coords-val { color: #b8740b; }
.kta-em-bulle-statut { text-align: center; }
.kta-emergency-dark  .kta-em-bulle-statut { color: #c8d0e0; }
.kta-emergency-light .kta-em-bulle-statut { color: #2c3848; }
/* Nom du point : en gros, c'est ce qu'on cherche à reconnaître. */
.kta-em-bulle-titre.kta-em-point-nom {
  font-size: 22px;
  letter-spacing: 0.01em;
  text-transform: none;
  padding-top: 8px;
}
.kta-em-point-type { font-size: 14px; font-weight: 700; }
.kta-emergency-dark  .kta-em-point-type { color: #8892a4; }
.kta-emergency-light .kta-em-point-type { color: #4a5468; }
.kta-em-point-note {
  font-size: 15px;
  line-height: 1.4;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  max-height: 30vh;
  max-height: 30dvh;
  overflow-y: auto;
}
.kta-em-bulle-action {
  min-height: 52px;
  padding: 12px 16px;
  font-size: 17px;
  font-weight: 800;
  border: 2px solid;
  border-radius: 12px;
  cursor: pointer;
  font-family: inherit;
}
.kta-emergency-dark  .kta-em-bulle-action { background: #f4c542; color: #0a0d18; border-color: #f4c542; }
.kta-emergency-light .kta-em-bulle-action { background: #b8740b; color: #ffffff; border-color: #b8740b; }

/* 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);
}

/* Label CAP + cardinal en jaune charte (ocre en clair) ; les degrés gardent la couleur du texte. */
.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;
}

/* Label CAP de l'overlay plus gras et plus gros que les autres labels. */
.kta-emergency-bloc-heading-overlay .kta-emergency-label {
  font-size: 16px;
  font-weight: 900;
  letter-spacing: 0.12em;
  opacity: 1;
}


/* Minimap pleine taille du bloc heading (inset 0, arrondi hérité du bloc). */
.kta-emergency-mini-map {
  position: absolute;
  inset: 0;
  z-index: 0;
  border-radius: inherit;
  overflow: hidden;  /* clip Leaflet tiles à l'arrondi */
}

/* Minimap orientée : le conteneur tourne, il déborde de 1,6× (diagonale √2 + marge) sinon ses
   coins se vident ; le parent garde overflow: hidden. */
.kta-emergency-mini-map.kta-em-mini-map-tournee {
  inset: -30%;
  border-radius: 0;
}

/* Filtre sur l'image du plan seulement (.leaflet-image-layer) : les tracés, rendus dans
   .leaflet-overlay-pane, restent vifs. Image désaturée pour laisser la vedette aux annotations. */
.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; }
/* Contrôles Leaflet de la minimap masqués (déjà désactivés en JS : double sécurité). */
.kta-emergency-mini-map .leaflet-control-container,
.kta-emergency-mini-map .leaflet-bottom { display: none !important; }

/* Sans image de fond (« Continuer sans image » ou image indisponible) : fond texturé, pour que
   l'absence d'image ne passe pas pour un bug. */
.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%);
}

/* Marker tracker en boussole : ring = cadran jaune, rotor = porte le point nord rouge,
   triangle = position (rotor séparé, tourne avec le heading). */
.kta-em-mini-tracker-wrap {
  pointer-events: none;
  background: none !important;
  border: none !important;
}
.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, 3px */
  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;
  /* pas de transition : le polling boussole gère la cadence (250 ms, seuil 1°) */
  transform-origin: center center;
  will-change: transform;
}
/* Rotor du triangle, tourné de +heading par _updateTrackerTriangleRotor ; pleine taille, origine au centre. */
.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));
}


/* Bouton sortir — gros et visible */
/* 🩸 Seul bouton de sortie d'un écran de panique : sticky le garde au bas de la zone visible quand
   la boîte déborde (390×844 comme 1100×800), sans changer le flux quand elle tient. */
.kta-emergency-exit-btn {
  position: sticky;
  bottom: max(8px, env(safe-area-inset-bottom, 0px));
  z-index: 2;
  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-titre      { font-size: 19px; }
  .kta-emergency-value      { font-size: 26px; }
  .kta-emergency-heading-num { font-size: 44px; }
  .kta-emergency-heading-card { font-size: 22px; }
  .kta-emergency-bloc-heading { min-height: 260px; }
  .kta-emergency-exit-btn   { padding: 16px; font-size: 14px; }
}

/* Très petit écran (320 px, ou affichage zoomé) : plancher de minimap réduit, un écran de panique
   ne doit rien faire défiler. */
@media (max-width: 360px) {
  .kta-emergency-bloc-heading { min-height: 200px; }
  .kta-emergency-value        { font-size: 23px; }
}

/* Paysage bas (≤ 500px de haut) : tailles réduites pour tout faire tenir sans scroll ; la minimap
   se redimensionne via 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; }
  /* minimap sur toute la largeur et la hauteur restante */
  .kta-emergency-grid       { gap: 8px; }
  .kta-emergency-titre      { font-size: 17px; }
  .kta-emergency-value      { font-size: 22px; }
  .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-exit-btn   { padding: 10px; font-size: 12px; }
  .kta-emergency-mini-map   { min-height: 140px; }
  .kta-emergency-chip       { font-size: 10.5px; }
  .kta-emergency-plan-nom   { font-size: 12px; }
}

/* ── Gate « Conditions d'utilisation » (legalGate.js) ── */
.kta-legal-boite {
  max-width: 560px !important;
  border: 1.5px solid rgba(244, 197, 66, 0.35) !important;
  box-shadow: 0 8px 40px rgba(244, 197, 66, 0.15) !important;
  height: auto !important;
  /* 🩸 vh puis dvh : Chrome mobile en navigateur (pas en PWA) compte 100vh SANS la barre d'adresse ; en 92vh la
     boîte passait sous la barre en portrait et « J'accepte » devenait inaccessible. dvh = hauteur visible. */
  max-height: 92vh !important;
  max-height: 92dvh !important;
}
.kta-legal-intro {
  font-size: 14px;
  line-height: 1.55;
  color: var(--kta-texte);
  margin: 0 0 12px 0;
}
.kta-legal-points {
  list-style: none;
  margin: 0 0 4px 0;
  padding: 0;
}
.kta-legal-points li {
  font-size: 13px;
  line-height: 1.5;
  color: var(--kta-texte-2);
  padding: 8px 12px;
  margin-bottom: 8px;
  background: var(--kta-info-fond);
  border: 1px solid var(--kta-info-bord);
  border-radius: 6px;
}
.kta-legal-readfull {
  display: inline-block;
  margin: 4px 0 14px 0;
  padding: 0;
  background: none;
  border: none;
  color: var(--kta-interaction);
  font-size: 13px;
  text-decoration: underline;
  cursor: pointer;
}
.kta-legal-readfull:hover { color: #b0ccff; }
.kta-legal-check {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  margin: 6px 0 2px 0;
  padding: 12px 14px;
  background: rgba(244, 197, 66, 0.06);
  border: 1px solid rgba(244, 197, 66, 0.25);
  border-radius: 6px;
  font-size: 13px;
  line-height: 1.45;
  color: var(--kta-texte);
  cursor: pointer;
}
.kta-legal-check input[type="checkbox"] {
  margin-top: 2px;
  flex: 0 0 auto;
  width: 17px;
  height: 17px;
  accent-color: #f4c542;
  cursor: pointer;
}
.kta-legal-actions { padding: 14px 24px 18px; }
/* « J'accepte » = action principale (bleu .kta-btn-primary). Désactivé : grisé par les jetons, pas par
   l'opacité, pour rester lisible (≥ 4,5:1) tant que la case n'est pas cochée. */
.kta-legal-accept:disabled,
html.kta-theme-light .kta-legal-accept:disabled {
  background: var(--kta-surface-2) !important;
  color: var(--kta-texte-3) !important;
  border-color: var(--kta-bordure) !important;
  cursor: not-allowed;
}
/* Sous-modale texte intégral */
.kta-legal-full-boite { max-width: 720px !important; height: auto !important; max-height: 92vh !important; max-height: 92dvh !important; }
.kta-legal-full-corps { line-height: 1.6; }
.kta-legal-full-note {
  font-size: 12.5px;
  font-style: italic;
  color: var(--kta-texte-3);
  margin: 0 0 14px 0;
}
.kta-legal-full-h {
  font-size: 15px;
  color: var(--kta-accent-texte);
  margin: 22px 0 10px 0;
  padding-bottom: 6px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.10);
}
.kta-legal-full-sub {
  font-size: 13.5px;
  color: var(--kta-interaction);
  margin: 16px 0 6px 0;
}
.kta-legal-art {
  font-size: 13px;
  line-height: 1.62;
  color: var(--kta-texte-2);
  margin: 0 0 10px 0;
  text-align: justify;
}
.kta-legal-meta {
  font-size: 12.5px;
  color: var(--kta-texte-3);
  margin: 0 0 8px 0;
}
.kta-legal-sign {
  font-size: 12.5px;
  font-style: italic;
  color: #a8b2c4;
  margin: 4px 0 10px 0;
}
.kta-legal-src {
  font-size: 11.5px;
  color: #6c7688;
  margin: 8px 0 4px 0;
  padding-top: 8px;
  border-top: 1px dashed rgba(255, 255, 255, 0.08);
}
.kta-legal-back { font-size: 13px; padding: 4px 10px; }
/* Thème clair */
html.kta-theme-light .kta-legal-intro,
html.kta-theme-light .kta-legal-check { color: var(--kta-light-text, #1a1f2e); }
html.kta-theme-light .kta-legal-points li { color: var(--kta-light-text-2, #38414f); }
html.kta-theme-light .kta-legal-art { color: var(--kta-light-text-2, #38414f); }

/* ── Liaisons inter-plan (interPlanLinks.js) ── */
/* Section dans le popup POI */
.kta-ipl-section {
  margin-top: 6px;
  padding-top: 6px;
  border-top: 1px dashed rgba(140, 180, 255, 0.25);
}
.kta-ipl-row {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 3px 0;
  font-size: 12px;
}
.kta-ipl-ico { flex: 0 0 auto; }
.kta-ipl-label {
  flex: 1 1 auto;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--kta-interaction);
}
.kta-ipl-go, .kta-ipl-del {
  flex: 0 0 auto;
  padding: 2px 7px !important;
  font-size: 12px !important;
}
.kta-ipl-absent { flex: 0 0 auto; opacity: 0.6; cursor: help; }
.kta-ipl-add { width: 100%; }
/* Modale création */
.kta-ipl-boite { max-width: 520px !important; height: auto !important; max-height: 90vh !important; max-height: 90dvh !important; }
/* Gestionnaire Mes liaisons (.kta-ipl-mgr-boite) plus large que la création (520px) : chaque ligne
   porte deux « plan · point », l'écart et 3 boutons. Paliers plafonnés : trop large, les boutons se
   perdent. ⚠️ !important obligatoire, la règle de base en porte un. Mobile inchangé. */
@media (min-width: 1024px) {
  .kta-ipl-mgr-boite {
    max-width: min(1000px, 94vw) !important;
    width: min(1000px, 94vw) !important;
  }
}
@media (min-width: 1440px) {
  .kta-ipl-mgr-boite {
    max-width: min(1240px, 92vw) !important;
    width: min(1240px, 92vw) !important;
  }
}
.kta-ipl-src {
  font-size: 12.5px;
  color: var(--kta-texte-3);
  margin: 0 0 12px 0;
  padding: 8px 10px;
  background: rgba(140, 180, 255, 0.06);
  border-left: 3px solid rgba(140, 180, 255, 0.35);
  border-radius: 4px;
}
.kta-ipl-hint { font-size: 13px; color: var(--kta-texte-2); margin: 10px 0 8px 0; }
.kta-ipl-empty { font-size: 13px; color: var(--kta-texte-3); font-style: italic; margin: 12px 0; }
.kta-ipl-plan-btn, .kta-ipl-pt-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 9px 12px;
  margin-bottom: 6px;
  background: rgba(140, 180, 255, 0.06);
  border: 1px solid rgba(140, 180, 255, 0.18);
  border-radius: 6px;
  color: var(--kta-texte);
  font-size: 13px;
  text-align: left;
  cursor: pointer;
}
.kta-ipl-plan-btn:hover, .kta-ipl-pt-btn:hover {
  background: rgba(140, 180, 255, 0.14);
  border-color: rgba(140, 180, 255, 0.4);
}
.kta-ipl-plan-name, .kta-ipl-pt-name {
  flex: 1 1 auto;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.kta-ipl-plan-ver, .kta-ipl-pt-meta { flex: 0 0 auto; font-size: 11px; color: var(--kta-texte-3); }
.kta-ipl-search {
  width: 100%;
  padding: 8px 12px;
  margin: 8px 0;
  background: rgba(10, 13, 24, 0.6);
  border: 1px solid rgba(140, 180, 255, 0.25);
  border-radius: 6px;
  color: #e8eaf0;
  font-size: 13px;
  box-sizing: border-box;
}
.kta-ipl-search:focus { outline: none; border-color: #8cb4ff; }
.kta-ipl-results { max-height: 42vh; max-height: 42dvh; overflow-y: auto; }
.kta-ipl-back { font-size: 12.5px; padding: 4px 10px; margin-bottom: 4px; }
/* Thème clair */
html.kta-theme-light .kta-ipl-plan-btn,
html.kta-theme-light .kta-ipl-pt-btn { color: var(--kta-light-text, #1a1f2e); }
html.kta-theme-light .kta-ipl-hint { color: var(--kta-light-text-2, #38414f); }
html.kta-theme-light .kta-ipl-search {
  color: var(--kta-light-text, #1a1f2e);
  background: rgba(255, 255, 255, 0.8);
}

/* ── Bouton flottant « Retour » après un saut inter-plan ── */
/* Le flottant est un conteneur (bouton principal + réduire + fermer) ou une mini-pastille. */
.kta-ipl-back-float {
  position: fixed;
  bottom: 84px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1300;                 /* au-dessus des contrôles Leaflet, sous les modales */
  display: flex;
  align-items: stretch;
  background: rgba(26, 31, 46, 0.94);
  border: 1.5px solid rgba(244, 197, 66, 0.6);
  border-radius: 22px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.45);
  animation: kta-ipl-back-in 260ms ease-out;
  max-width: 82vw;
  overflow: hidden;
}
.kta-ipl-back-main {
  background: none;
  border: none;
  padding: 9px 10px 9px 16px;
  color: var(--kta-accent-texte);
  font-size: 13.5px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}
.kta-ipl-back-main:hover { background: rgba(244, 197, 66, 0.10); }
.kta-ipl-back-ctrl {
  background: none;
  border: none;
  border-left: 1px solid rgba(244, 197, 66, 0.25);
  padding: 0 11px;
  color: var(--kta-texte-3);
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  flex: 0 0 auto;
}
.kta-ipl-back-ctrl:hover { color: var(--kta-accent-texte); background: rgba(244, 197, 66, 0.10); }
/* Mode mini : pastille ronde discrète */
.kta-ipl-back-mini {
  left: auto;
  right: 14px;
  transform: none;
  border-radius: 50%;
  opacity: 0.82;
  animation: none;   /* le keyframe translateX(-50%) ferait sauter la pastille (ancrée à droite) */
}
.kta-ipl-back-mini:hover { opacity: 1; }
.kta-ipl-back-minibtn {
  background: none;
  border: none;
  width: 40px;
  height: 40px;
  color: var(--kta-accent-texte);
  font-size: 17px;
  cursor: pointer;
  position: relative;
}
.kta-ipl-back-minibtn .kta-ipl-back-depth {
  position: absolute;
  top: 1px;
  right: 1px;
  font-size: 10px;
  min-width: 14px;
  margin-left: 0;
}
.kta-ipl-back-depth {
  display: inline-block;
  min-width: 17px;
  margin-left: 6px;
  padding: 0 4px;
  background: rgba(244, 197, 66, 0.2);
  border-radius: 9px;
  font-size: 11px;
  text-align: center;
}
@keyframes kta-ipl-back-in {
  from { opacity: 0; transform: translateX(-50%) translateY(12px); }
  to   { opacity: 1; transform: translateX(-50%) translateY(0); }
}
html.kta-theme-light .kta-ipl-back-float {
  background: rgba(255, 255, 255, 0.96);
  color: #8a6d00;
}

/* ── Recherche cross-plan (crossPlanSearch.js) ── */
.kta-xps-boite { max-width: 560px !important; height: auto !important; max-height: 90vh !important; max-height: 90dvh !important; }
.kta-xps-status {
  font-size: 11.5px;
  color: var(--kta-texte-3);
  margin: 2px 0 8px 0;
  min-height: 15px;
}
.kta-xps-results { max-height: 52vh; max-height: 52dvh; }
.kta-xps-plan-badge {
  flex: 0 0 auto;
  max-width: 40%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 11px;
  color: var(--kta-interaction);
  background: rgba(140, 180, 255, 0.10);
  border-radius: 4px;
  padding: 2px 6px;
}
/* Gestionnaire de liaisons */
.kta-ipl-mgr-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 12px;
  margin-bottom: 6px;
  background: rgba(140, 180, 255, 0.06);
  border: 1px solid rgba(140, 180, 255, 0.18);
  border-radius: 6px;
  font-size: 12.5px;
}
.kta-ipl-mgr-sides {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.kta-ipl-mgr-side {
  color: var(--kta-texte);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100%;
}
.kta-ipl-mgr-absent { color: var(--kta-texte-3); }
.kta-ipl-mgr-arrow { color: var(--kta-accent-texte); flex: 0 0 auto; }
/* Écart de calage d'une liaison : discret et sans seuil de couleur (20 m est énorme ou négligeable
   selon l'échelle du réseau : on ne juge pas à la place de l'utilisateur). */
/* Contrôle qualité du calage sous les chips de la Vue OSM : trié du pire au meilleur, sans seuil
   de couleur (même raison). */
.kta-osm-qualite { margin: 6px 0 2px; }
.kta-osm-qualite:empty { display: none; }
.kta-osm-qualite-titre {
  color: var(--kta-texte-2);
  font-size: 11.5px;
  margin: 0 0 4px;
}
.kta-osm-qualite-vide {
  color: var(--kta-texte-3);
  font-size: 11px;
  margin: 4px 0 0;
  line-height: 1.45;
}
.kta-osm-qualite-ligne {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  padding: 4px 8px;
  margin-bottom: 3px;
  background: rgba(244, 197, 66, 0.07);
  border: 1px solid rgba(244, 197, 66, 0.18);
  border-radius: 4px;
  color: var(--kta-texte);
  font-size: 11.5px;
  cursor: pointer;
  text-align: left;
}
.kta-osm-qualite-ligne:hover { background: rgba(244, 197, 66, 0.14); }
.kta-osm-qualite-noms {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.kta-osm-qualite-val { flex: 0 0 auto; color: var(--kta-accent-texte); }
html.kta-theme-light .kta-osm-qualite-titre,
html.kta-theme-light .kta-osm-qualite-ligne { color: var(--kta-light-text, #1a1f2e); }

.kta-ipl-mgr-ecart {
  flex: 0 0 auto;
  color: var(--kta-texte-3);
  font-size: 11.5px;
  white-space: nowrap;
  padding: 2px 7px;
  border-radius: 4px;
  background: rgba(244, 197, 66, 0.08);
  border: 1px solid rgba(244, 197, 66, 0.18);
}
html.kta-theme-light .kta-ipl-mgr-ecart { color: var(--kta-light-text-2, #4a5568); }
.kta-ipl-mgr-actions { flex: 0 0 auto; display: flex; gap: 4px; }
/* Mention d'une extension (« ☁️ Partagée… ») : elle cède la place aux noms des plans, jamais l'inverse. */
.kta-ipl-mgr-row .kta-ipl-ext-info { flex: 0 1 auto; min-width: 0; margin: 0; }
/* 🩸 Téléphone : une seule ligne écrasait les noms (largeur 0) et faisait déborder les boutons. Les deux plans
   prennent toute la première ligne ; écart, mention et boutons passent dessous, boutons à droite. */
@media (max-width: 600px) {
  .kta-ipl-mgr-row { flex-wrap: wrap; row-gap: 6px; }
  .kta-ipl-mgr-sides { flex: 1 1 100%; }
  .kta-ipl-mgr-actions { margin-left: auto; }
}
html.kta-theme-light .kta-ipl-mgr-side { color: var(--kta-light-text, #1a1f2e); }

/* Itinéraire inter-plan */
.kta-ipr-step {
  font-size: 13px;
  color: var(--kta-texte-2);
  padding: 5px 0;
  line-height: 1.45;
}
.kta-ipr-total {
  font-size: 14px;
  font-weight: 700;
  color: var(--kta-accent-texte);
  padding: 8px 0 2px 0;
  border-top: 1px dashed rgba(255, 255, 255, 0.12);
  margin-top: 6px;
}

/* ── Home mobile (desktop intouché) ── */
/* Bouton « Tous mes plans » : inexistant sur desktop. */
#kta-home-plans-more { display: none; }

@media (max-width: 640px) {
  /* Hero « Reprendre » : l'action n°1 du terrain */
  #resumeBox { margin-bottom: 16px; }
  #resumeBtn.loader-btn-resume {
    width: 100%;
    min-height: 52px;
    font-size: 16px;
    font-weight: 700;
    border: 1px solid rgba(244, 197, 66, 0.55);
    box-shadow: 0 4px 14px rgba(244, 197, 66, 0.12);
  }

  /* Liste bornée à 5 récents, la suite à la demande (#kta-home-plans-more, homeLoader.js) */
  #allPlansList.kta-collapsed > .plan-row:nth-of-type(n+6) { display: none; }
  /* même borne, PAR dossier déplié en mode Dossiers */
  .kta-plans-folder-rows.kta-collapsed > .plan-row:nth-of-type(n+6) { display: none; }
  #kta-home-plans-more {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 44px;
    margin-top: 8px;
  }

  /* Dropzone en carte compacte : au doigt, la zone reste un sélecteur de fichier. */
  #zipDropZone {
    padding: 12px 14px;
    min-height: 0;
  }
  #zipDropZone .zip-icon { font-size: 20px; }
  #zipDropZone br { display: none; }

  /* Cibles tactiles : chips 36 px. Titre + chips tiennent sur une ligne à 375 px (327 px dispo) ;
     wrap + ellipse en filet sous 340 px. */
  .loader-header { flex-wrap: wrap; row-gap: 6px; column-gap: 6px; }
  .loader-titre { min-width: 0; flex: 1 1 auto; }
  /* Tagline sous le titre sans élargir le lockup : width 0 + min-width 100 % prend la largeur du
     titre, les chips restent sur la ligne. Sous-titre trop long : ellipse. */
  .loader-titre-textes { min-width: 0; flex: 1 1 0; }
  .loader-titre-tagline {
    font-size: 10px;
    letter-spacing: 0.02em;
    margin-top: 1px;
    width: 0;
    min-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .loader-titre-nom {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .loader-header-actions { margin-left: auto; }
  #loaderAlertBtn, #loaderHelpBtn, #loaderConfigBtn, #loaderOfflineHdrBtn {
    min-width: 36px;
    min-height: 36px;
  }
  .loader-btn-secondary { min-height: 44px; }
  #loadPlanBtn { min-height: 48px; }
}

/* Vue « réseau de plans » (gestionnaire Mes liaisons) */
.kta-ipl-mgr-toggle {
  display: flex;
  gap: 8px;
  margin: 0 0 10px;
}
.kta-ipl-mgr-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(140, 180, 255, 0.12);
  border: 1px solid rgba(140, 180, 255, 0.4);
  color: var(--kta-interaction);
  border-radius: 20px;
  padding: 3px 10px;
  font-size: 12px;
  margin-bottom: 8px;
}
.kta-ipl-mgr-chip button {
  background: none;
  border: none;
  color: var(--kta-interaction);
  cursor: pointer;
  font-size: 12px;
  padding: 0 2px;
}
.kta-ipl-mgr-chip button:hover { color: var(--kta-texte); }
.kta-pnet-wrap {
  overflow: hidden;
  border: 1px solid var(--kta-bordure);
  border-radius: 10px;
  background: rgba(10, 13, 24, 0.55);
}
.kta-pnet-svg { display: block; touch-action: none; }
.kta-pnet-edge {
  stroke: #8cb4ff;
  stroke-opacity: 0.5;
  stroke-linecap: round;
}
.kta-pnet-edge-hit {
  stroke: transparent;
  cursor: pointer;
}
.kta-pnet-edge-hit:hover + * , .kta-pnet-edge-hit:hover { stroke: rgba(140,180,255,0.12); }
.kta-pnet-edge-count {
  fill: #8cb4ff;
  font: 600 11px 'Segoe UI', Arial, sans-serif;
  text-anchor: middle;
  pointer-events: none;
}
.kta-pnet-node { cursor: pointer; }
.kta-pnet-disc {
  fill: #222b40;
  stroke: #45557a;
  stroke-width: 1.5;
}
.kta-pnet-node:hover .kta-pnet-disc { stroke: #8cb4ff; }
.kta-pnet-node-absent { opacity: 0.5; cursor: default; }
.kta-pnet-ring {
  fill: none;
  stroke: #f4c542;
  stroke-width: 2;
  stroke-dasharray: 4 3;
}
.kta-pnet-ico {
  font-size: 16px;
  text-anchor: middle;
  dominant-baseline: central;
  pointer-events: none;
}
.kta-pnet-count-disc { fill: #f4c542; }
.kta-pnet-count {
  fill: #1a1f2e;
  font: 700 10px 'Segoe UI', Arial, sans-serif;
  text-anchor: middle;
  dominant-baseline: central;
  pointer-events: none;
}
.kta-pnet-name {
  fill: #e8eaf0;
  font: 600 12px 'Segoe UI', Arial, sans-serif;
  text-anchor: middle;
  pointer-events: none;
}
.kta-pnet-badges {
  fill: #8892a4;
  font: 500 10px 'Segoe UI', Arial, sans-serif;
  text-anchor: middle;
  pointer-events: none;
}
.kta-pnet-sep { stroke: rgba(255, 255, 255, 0.12); stroke-dasharray: 5 4; }
.kta-pnet-sep-titre {
  fill: #8892a4;
  font: 600 11px 'Segoe UI', Arial, sans-serif;
}
html.kta-theme-light .kta-pnet-wrap { background: rgba(240, 232, 216, 0.5); border-color: rgba(0,0,0,0.1); }
html.kta-theme-light .kta-pnet-disc { fill: #f5f1e6; stroke: #a99c78; }
html.kta-theme-light .kta-pnet-name { fill: #1a1f2e; }
html.kta-theme-light .kta-pnet-badges, html.kta-theme-light .kta-pnet-sep-titre { fill: #6a7488; }
html.kta-theme-light .kta-pnet-edge { stroke: #2d5aa8; }
html.kta-theme-light .kta-pnet-edge-count { fill: #2d5aa8; }

/* Multi-hop : case à cocher (recherche multi-plans) */
.kta-xps-multihop {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 8px 0 4px;
  font-size: 12.5px;
  color: var(--kta-texte-2);
  cursor: pointer;
  user-select: none;
}
.kta-xps-multihop input { accent-color: #8cb4ff; }
html.kta-theme-light .kta-xps-multihop { color: #3a4358; }

/* Invite flottante « Portail suivant », au-dessus du bouton Retour, accent bleu. */
.kta-ipr-next-float {
  position: fixed;
  left: 50%;
  bottom: 74px;
  transform: translateX(-50%);
  z-index: 1090;
  display: flex;
  align-items: center;
  gap: 6px;
  background: rgba(26, 31, 46, 0.95);
  border: 1px solid rgba(140, 180, 255, 0.55);
  border-radius: 10px;
  padding: 6px 8px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.kta-ipr-next-main {
  background: none;
  border: none;
  color: var(--kta-interaction);
  font-size: 13.5px;
  font-weight: 600;
  cursor: pointer;
  padding: 4px 6px;
  border-radius: 6px;
}
.kta-ipr-next-main:hover { background: rgba(140, 180, 255, 0.12); }
.kta-ipr-next-close {
  background: none;
  border: none;
  color: var(--kta-texte-3);
  font-size: 13px;
  cursor: pointer;
  padding: 4px 6px;
  border-radius: 6px;
}
.kta-ipr-next-close:hover { color: var(--kta-texte); background: rgba(255,255,255,0.08); }
html.kta-theme-light .kta-ipr-next-float {
  background: rgba(250, 248, 242, 0.96);
  border-color: rgba(60, 90, 160, 0.45);
}
html.kta-theme-light .kta-ipr-next-main { color: #2d5aa8; }
html.kta-theme-light .kta-ipr-next-close { color: var(--kta-texte-3); }
.kta-xps-rowwrap {
  display: flex;
  align-items: stretch;
  gap: 5px;
  margin-bottom: 6px;
}
.kta-xps-rowwrap .kta-xps-row { flex: 1 1 auto; margin-bottom: 0; }
.kta-xps-iti {
  flex: 0 0 auto;
  padding: 4px 10px !important;
  font-size: 15px !important;
}
html.kta-theme-light .kta-ipr-step { color: var(--kta-light-text-2, #38414f); }

/* Pont depuis la recherche unifiée (Ctrl+K) */
.kta-search-crossplan {
  display: block;
  width: 100%;
  margin-top: 10px;
  padding: 8px 12px;
  background: rgba(140, 180, 255, 0.08);
  border: 1px dashed rgba(140, 180, 255, 0.35);
  border-radius: 6px;
  color: var(--kta-interaction);
  font-size: 12.5px;
  cursor: pointer;
  text-align: center;
}
.kta-search-crossplan:hover {
  background: rgba(140, 180, 255, 0.16);
  border-style: solid;
}
html.kta-theme-light .kta-xps-plan-badge { color: #2c5faa; }

/* ── Gate plein écran : variante lockout (5 échecs) ── */
.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: var(--kta-erreur);
}

.kta-pin-gate-lockout-explication {
  font-size: 13px;
  color: var(--kta-texte-2);
  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;
}

/* Encadré de l'import ZIP datalayer, mis en avant pour être vu tout de suite. */
.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: var(--kta-accent-texte);
  margin-bottom: 6px;
}

.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: var(--kta-texte-3);
  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: var(--kta-texte-3);
  flex: 1;
  /* 🩸 min-width:0 : sinon l'item flex garde la largeur de son contenu, l'ellipsis ne joue pas et
     une data URL SVG longue élargit toute la modale. */
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  padding-left: 4px;
}

/* ── Groupes accordéon de la barre latérale ── */

/* 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;
}

/* Groupe avec un mode actif (tracker, mesure, tracé…) : point pulsant + bordure jaune, visibles
   même groupe fermé (seul retour visuel du mode). Cumulable avec .kta-group-open. */
.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); }
}

/* 🔒 Outil de dessin grisé : plan relié en droit « lire » (interface.js > _majOutilsLectureSeule).
   Reste cliquable : le clic rappelle « lecture seule ». Même rendu qu'annuler/rétablir sans historique. */
.leaflet-bar a.kta-outil-lecture-seule,
.leaflet-bar a.kta-outil-lecture-seule:hover {
  opacity: 0.4;
  cursor: not-allowed;
  filter: grayscale(1);
}

/* ── Mobile paysage : la barre reste dans le cadre ── */

/* 🩸 Leaflet place .leaflet-control en float : le parent ne compte pas la hauteur des enfants,
   donc max-height + overflow-y:auto ne déclenche jamais le scroll. Les conteneurs passent en flex
   column (float ignoré sur un item flex) ; align-items:flex-end garde l'alignement à droite.
   ⚠️ Paysage mobile seulement : ailleurs la hauteur suffit et le float natif convient. */
@media (max-height: 500px) {
  /* Sidebar droite : groupes accordéon + layers control */
  .leaflet-top.leaflet-right {
    /* 🩸 iOS : safe-area en plus des 16px, sinon les derniers boutons passent sous le
       home indicator. */
    max-height: calc(100vh - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px) - 16px);
    max-height: calc(100dvh - 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 (voir plus haut). */
    display: flex;
    flex-direction: column;
    align-items: flex-end;
  }
  .leaflet-top.leaflet-right::-webkit-scrollbar { display: none; }

  /* Sidebar gauche (zoom, niveau, boussole) : même bascule, pour qu'un futur contrôle
     ne déborde pas en silence. */
  .leaflet-top.leaflet-left {
    max-height: calc(100vh - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px) - 16px);
    max-height: calc(100dvh - 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; }

  /* boutons 28px en paysage ; le scroll prend le relais au-delà */
  .leaflet-bar a {
    width: 28px !important;
    height: 28px !important;
    line-height: 28px !important;
    font-size: 14px !important;
  }

  /* espacement réduit entre groupes */
  .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 */
.kta-readme-modal-footer {
  flex-shrink: 0;
  padding: 9px 18px 10px;
  border-top: 1px solid var(--kta-bordure);
  font-size: 11px;
  color: var(--kta-texte-3);
  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 », ancré en bas à droite du layout */
.kta-readme-back-top {
  position: absolute;
  bottom: 14px;
  right: 16px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: #f4c542;
  color: var(--kta-sur-accent);
  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) */
/* height → max-height pour cohérence avec les autres breakpoints */
@media (max-width: 800px) {
  .kta-readme-modal-boite {
    max-height: 92vh;
    max-height: 92dvh;
  }
  .kta-readme-modal-layout {
    flex-direction: column;
  }
  .kta-readme-toc-sidebar {
    width: auto;
    max-height: 35vh;
    max-height: 35dvh;
    flex-shrink: 0;
    border-right: none;
    border-bottom: 1px solid var(--kta-bordure);
    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;
    max-height: 32dvh;
  }
  .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 : kill mémoire détecté au boot (shell .kta-readme-modal) ── */
/* Bordures rouges et titre énorme : voulu, le message ne doit pas être raté. */
.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: var(--kta-texte);
  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: var(--kta-interaction);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 8px;
}

.kta-oom-corps p {
  font-size: 13px;
  line-height: 1.55;
  color: var(--kta-texte-2);
  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: var(--kta-texte-2);
  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: var(--kta-texte);
}

.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: var(--kta-interaction);
}

.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; }
}

/* ══ Toasts empilés (OOMGuard.showToast) et consigne des CGU ═══════════════════════════════════════════
   ⚠️ Contrat : les toasts vivent dans la pile #kta-toasts (js/oomGuard.js > _renderToast), le plus récent en
   bas, 3 visibles au plus. Le type se lit à l'icône ET au liseré gauche : info = interaction, success = ok,
   warn = doré, error = erreur. Tout passe par les jetons : le thème clair n'a rien à surcharger (seule
   l'ombre change).
   🩸 Chaque toast garde z-index 100000 (positionné) : utils.js > _findTopEscapableOverlay lit le z-index de
   .kta-toast pour qu'Échap ferme le toast avant la fenêtre dessous.
   🩸 La pile laisse passer les touchers (sauf la croix) : sinon elle bloque la fenêtre dessous pendant 10 s. */
.kta-toasts {
  position: fixed;
  top: calc(60px + env(safe-area-inset-top, 0px));
  left: 50%;
  transform: translateX(-50%);
  width: min(440px, calc(100vw - 24px));
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  z-index: 100000;
  pointer-events: none;
}
.kta-toast {
  position: relative;
  z-index: 100000;
  max-width: 100%;
  box-sizing: border-box;
  background: var(--kta-surface);
  border: 1px solid var(--kta-bordure);
  border-left: 3px solid var(--kta-accent-texte);
  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;
  font-size: 13px;
  color: var(--kta-texte-2);
  line-height: 1.45;
  animation: kta-toast-in 0.3s ease-out both;
  pointer-events: none;
}
.kta-toast-info    { border-left-color: var(--kta-interaction); }
.kta-toast-success { border-left-color: var(--kta-ok); }
.kta-toast-error   { border-left-color: var(--kta-erreur); }
.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;
  color: var(--kta-texte);
}
.kta-toast-msg {
  flex: 1;
  min-width: 0;
  overflow-wrap: anywhere;
  white-space: pre-line;   /* un message peut regrouper plusieurs lignes (lancement Secours) */
  color: var(--kta-texte);
}
.kta-toast-close {
  pointer-events: auto;
  background: transparent;
  border: none;
  color: var(--kta-texte-3);
  font-size: 14px;
  cursor: pointer;
  padding: 0 4px;
  flex-shrink: 0;
  transition: color 0.15s;
}
.kta-toast-close:hover { color: var(--kta-texte); }
html.kta-theme-light .kta-toast { box-shadow: 0 4px 16px var(--kta-light-shadow); }
@keyframes kta-toast-in {
  from { opacity: 0; transform: translateY(-10px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes kta-toast-out {
  from { opacity: 1; transform: translateY(0); }
  to   { opacity: 0; transform: translateY(-10px); }
}
@media (prefers-reduced-motion: reduce) {
  .kta-toast, .kta-toast-leaving { animation-duration: 0.01s; }
}
/* « J'accepte » des CGU inactif : la consigne dit pourquoi, à gauche du bouton, tant que la case est vide
   (js/legalGate.js > ouvrirGate). Le bouton inactif lui-même : règle .kta-legal-accept:disabled. */
.kta-legal-actions { align-items: center; }
.kta-legal-hint {
  flex: 1;
  margin: 0;
  font-size: 12.5px;
  line-height: 1.4;
  color: var(--kta-texte-3);
}
.kta-legal-hint[hidden] { display: none; }
/* ══ fin des toasts empilés et de la consigne des CGU ══ */

/* ── Itinéraire : modale + waypoints ── */
.kta-iti-modal-boite {
  max-width: 540px;
  /* modale courte : pas de hauteur 88vh étirée */
  height: auto !important;
  max-height: 90vh !important;
  max-height: 90dvh !important;
}

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

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

.kta-iti-section-titre {
  font-size: 13px;
  font-weight: 700;
  color: var(--kta-interaction);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 10px;
}

.kta-iti-help {
  font-size: 12px;
  color: var(--kta-texte-3);
  margin: 0 0 10px;
  line-height: 1.5;
}

/* Préférences d'évitement de l'itinéraire, repliées dans un <details>. */
.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; }
/* 🩸 Le marqueur standard aussi : sans lui, les navigateurs récents affichaient leur flèche ET celle du ::before. */
.kta-iti-avoid-details summary { list-style: none; }
.kta-iti-avoid-details summary::marker { content: ""; }
.kta-iti-avoid-details summary::before {
  content: "▶ ";
  display: inline-block;
  font-size: 11px;
  color: var(--kta-texte-3);
  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;
}
/* Checklist « Zones à éviter » (modale itinéraire). */
.kta-iti-avoid-zones-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: 6px;
}
.kta-iti-avoid-zone-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 8px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--kta-bordure);
  border-radius: 8px;
  font-size: 13px;
  color: #d7dbe6;
  cursor: pointer;
}
.kta-iti-avoid-zone-row:hover { background: rgba(255, 255, 255, 0.07); }
.kta-iti-avoid-zone-cb { accent-color: #ff1e1e; cursor: pointer; }
.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: var(--kta-texte-2);
  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);
}

/* Floater orange du mode clic d'évitement (distinct du cyan des waypoints) : hérite de
   .kta-iti-floater, seule la couleur change. */
.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 » 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: var(--kta-texte-2);
}

.kta-iti-empty {
  font-style: italic;
  color: var(--kta-texte-3);
  text-align: center;
  padding: 8px 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: var(--kta-texte-3);
}

.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: var(--kta-texte);
  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);
}

/* étape validée : ✓ vert ; le marker reste, trace de progression pendant la sortie */
.kta-itinerary-waypoint.kta-iti-wp-done .kta-iti-num {
  background: #4caf50;
  color: #0a0d18;
  box-shadow: 0 2px 8px rgba(76, 175, 80, 0.45);
}
.kta-iti-wp-row-done {
  opacity: 0.55;
}
.kta-iti-wp-row-done .kta-iti-wp-coord {
  text-decoration: line-through;
}
.kta-iti-wp-row-done .kta-iti-wp-num {
  color: #4caf50;
  font-weight: 800;
}

/* Floater itinéraire — mini-panneau pendant le mode clic carte */
.kta-iti-floater {
  position: fixed;
  left: 50%;
  bottom: 20px;
  transform: translateX(-50%);
  background: var(--kta-surface);
  border: 1px solid var(--kta-bordure);
  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: var(--kta-texte-2);
  max-width: calc(100vw - 24px);
  /* 🩸 max-width borne la boîte, pas son contenu : sans flex-wrap, message et boutons débordent
     de l'écran sur téléphone. */
  flex-wrap: wrap;
  box-sizing: border-box;
}

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

.kta-iti-floater-msg {
  flex: 1 1 auto;
  /* Le message se coupe plutôt que de sortir ; min-width:0 indispensable, sinon l'enfant flex
     refuse de rétrécir et flex-wrap ne sert à rien. */
  min-width: 0;
  white-space: normal;
  overflow-wrap: anywhere;
  color: var(--kta-texte);
}

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

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

/* Itinéraire : 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: var(--kta-surface-2);
  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;
}

/* ⚠️ .kta-iti-search-result (recherche d'évitements, interfaceItineraire.js) partage le style de
   .kta-iti-search-item, avec un fond opaque par item : sinon les items paraissent transparents. */
.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: var(--kta-surface-2);
}

.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: var(--kta-texte);
  font-weight: 500;
}

.kta-iti-search-meta {
  font-size: 11px;
  color: var(--kta-texte-3);
  margin-top: 2px;
}

.kta-iti-search-empty,
.kta-iti-search-more,
.kta-iti-search-result-empty {
  padding: 10px 12px;
  font-size: 12px;
  color: var(--kta-texte-3);
  font-style: italic;
  text-align: center;
  background: var(--kta-surface-2);
}

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

/* Source « tracker » : badge jaune doré, distinct des sources clic carte et recherche. */
.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: var(--kta-texte-2);
  word-break: break-word;
}

.kta-iti-wp-remove {
  flex-shrink: 0;
  background: transparent;
  border: 1px solid rgba(255,107,107,0.35);
  color: var(--kta-erreur);
  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));
}
/* L'itinéraire ne prend jamais le pointeur (aucune fiche). 🩸 Sélecteur aussi précis que celui de Leaflet
   (`.leaflet-pane > svg path.leaflet-interactive { pointer-events: auto }`), qui gagnait : au doigt, WebKit
   déplaçait alors le toucher d'un outil armé vers le tracé, et le sommet tombait à côté. */
.leaflet-pane > svg path.kta-itinerary-polyline {
  pointer-events: none;
}

/* Label distance itinéraire, au-dessus du label mesure : en bottomleft, Leaflet empile le
   dernier control ajouté au-dessus. */
.kta-iti-distance {
  background: var(--kta-surface) !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;
}

/* Séparation entre distance et temps estimé */
.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 {
  font-weight: 500;
  letter-spacing: 0;
}

/* Preset de vitesse actif : cyan du label, atténué. */
.kta-iti-distance .kta-iti-distance-speed {
  font-weight: 500;
  font-size: 13px;
  opacity: 0.85;
  letter-spacing: 0;
}

/* Segmented control « Vitesse de marche » (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: var(--kta-texte-2);
  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: var(--kta-texte-3);
  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;
}

/* Section « Pause entre les arrêts » (modale itinéraire) */
.kta-iti-pause-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 0;
  color: var(--kta-texte-2);
  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: var(--kta-texte);
  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: var(--kta-texte-3);
  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 : même charte que .kta-iti-distance (empilés en bas à gauche), accent jaune
   (le cyan est réservé à l'itinéraire). */
.kta-measure-distance {
  background: var(--kta-surface) !important;
  color: var(--kta-accent-texte) !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;
}

/* Le label peut porter distance et surface à la fois : lignes empilées, celle du mode actif
   soulignée d'une bordure gauche jaune. */
.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);
}

/* Labels longueur par segment (badge jaune au milieu) et angle (badge gris décalé du pivot).
   iconAnchor [0,0] : centrage par translate sur le HTML ; pointer-events none pour la ligne 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: var(--kta-surface);
  color: var(--kta-accent-texte);
  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;
  /* centré en Y, décalé de 12px en X pour ne pas masquer le point pivot */
  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 + halo magenta ── */

/* Boîte modeste sur grand écran ; le shell vient de .kta-readme-modal-*. */
.kta-rd-modal-boite {
  max-width: 480px;
  height: auto;
  max-height: 90vh;
  max-height: 90dvh;
}

.kta-rd-help {
  font-size: 12px;
  color: var(--kta-texte-3);
  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: var(--kta-texte);
  font-size: 14px;
  font-weight: 500;
}

.kta-rd-count {
  flex-shrink: 0;
  color: var(--kta-texte-3);
  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: var(--kta-texte);
  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 : Effacer / Fermer */
.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;
}

/* Surlignage : halo magenta (renderer SVG forcé), au-dessus des routes, sous markers et itinéraire. */
.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 (mode debug) ── */

.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: var(--kta-surface);
  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: var(--kta-texte-2);
  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: var(--kta-accent-texte);
  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: var(--kta-interaction);
  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: var(--kta-texte);
  line-height: 1.55;
  font-size: 12.5px;
}

.kta-devtools-warn-corps a {
  color: var(--kta-accent-texte);
  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: var(--kta-texte-2);
  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: var(--kta-accent-texte);
}

/* Footer copyright du loader.
   🩸 iOS : text-size-adjust 100% empêche Safari de gonfler le texte au changement d'orientation ;
   line-height en px pour rester déterministe ; flex-shrink 0 contre les distorsions au resize. */
.kta-loader-copyright {
  margin-top: 2px;
  padding-top: 4px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  font-size: 11px;
  color: var(--kta-texte-3);
  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: var(--kta-texte-2);
  font-weight: 600;
}

.kta-loader-copyright a {
  color: var(--kta-accent-texte);
  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: var(--kta-texte-3);
}

.kta-loader-copyright-warn {
  color: var(--kta-erreur);
  font-weight: 500;
}

/* ── Bascule community ↔ pro ── */
/* js/proLicense.js pose .kta-instance-pro sur html et body si /Licence-pro.json existe.
   .kta-licence-community visible par défaut, .kta-licence-pro masqué ; inertes côté community. */
.kta-licence-pro {
  display: none;
}
/* Seul le span du lien d'achat est masqué en pro : le séparateur et le bloc « Importer ma
   licence pro » restent, pour renouveler ou remplacer la licence depuis l'UI. */
html.kta-instance-pro span.kta-licence-community,
body.kta-instance-pro span.kta-licence-community,
html.kta-instance-reliee span.kta-licence-community {
  display: none;
}
html.kta-instance-pro .kta-licence-pro,
body.kta-instance-pro .kta-licence-pro {
  display: inline;
}

/* Suffixe « -pro » (span après MyKTAMap dans .loader-titre-nom et #splashTitle) : porte aussi
   .kta-licence-pro, donc invisible en community. */
.kta-titre-suffix-pro {
  color: #f4c542;
  font-weight: 600;
  letter-spacing: 0.5px;
  margin-left: 1px;
  /* Révélation gauche → droite après « MyKTAMap » (même clip-path que le mot « MyKTAMap »).
     🩸 Pas de display: inline-block ici : spécificité égale, il écraserait le display: none de
     .kta-licence-pro en community. Le display vient de la règle html.kta-instance-pro plus bas. */
  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;
}

/* Pro seulement : inline-block, requis pour que clip-path s'applique au span. */
html.kta-instance-pro .kta-titre-suffix-pro,
body.kta-instance-pro .kta-titre-suffix-pro {
  display: inline-block;
}

/* Délais : 1,75 s par défaut, header 1,4 s (0,1 départ + 1,0 révélation + 0,3 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 */
}

/* Révélation du mot « MyKTAMap » (span .kta-titre-base), jouée avant le « -pro » ; community et
   pro, seul le délai change. */
.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;
}

@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 */
}

/* Thème clair : même jaune #f4c542 qu'en sombre (décision produit). ⚠️ Règle nécessaire pour
   battre body.kta-theme-light #planLoaderBox *, qui écraserait la couleur. */
html.kta-theme-light .kta-titre-suffix-pro,
body.kta-theme-light .kta-titre-suffix-pro {
  color: #f4c542;
}

/* Badge « Licence professionnelle active » : vert sobre. */
.kta-loader-copyright-pro-badge {
  color: var(--kta-ok);
  font-weight: 600;
}

/* Titre copyright en pro (remplace © + image) : ambre, italique. */
.kta-loader-copyright-edition-title {
  color: var(--kta-accent-texte);
  font-style: italic;
}

/* 🩸 Thème clair : body.kta-theme-light .kta-loader-copyright * (0,2,1, !important, plus bas)
   gagnerait par l'ordre ; la chaîne html… body… (0,3,2) la bat quel que soit l'ordre.
   Vert #1d8a3a, contraste AA sur beige. */
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: var(--kta-accent-texte);
}

/* ── Section « Édition pro » de la modale Mon profil : import manuel de Licence-pro.json ── */

.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: var(--kta-accent-texte);
  margin-bottom: 12px;
  letter-spacing: 0.02em;
}
.kta-profile-pro-body {
  font-size: 13px;
  color: var(--kta-texte-2);
  line-height: 1.55;
}
.kta-profile-pro-loading {
  font-size: 12px;
  color: var(--kta-texte-3);
  font-style: italic;
}
.kta-profile-pro-error {
  margin: 0;
  color: var(--kta-erreur);
  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: var(--kta-ok);
  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: var(--kta-texte-2);
  line-height: 1.6;
}
.kta-profile-pro-meta-label {
  color: var(--kta-texte-3);
  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: var(--kta-accent-texte);
  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: var(--kta-texte-2);
}

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

/* Thème clair */
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: var(--kta-accent-texte);
}
html.kta-theme-light .kta-profile-pro-body,
body.kta-theme-light .kta-profile-pro-body {
  color: var(--kta-texte);
}
html.kta-theme-light .kta-profile-pro-meta-label,
body.kta-theme-light .kta-profile-pro-meta-label {
  color: var(--kta-texte-3);
}
html.kta-theme-light .kta-profile-pro-hash,
body.kta-theme-light .kta-profile-pro-hash {
  color: var(--kta-accent-texte);
  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: var(--kta-texte-3);
}


/* Ligne crédits libs/algos du footer home : plus pâle et plus petite que le copyright. */
.kta-loader-credits {
  margin-top: 3px;
  font-size: 10.5px;
  color: var(--kta-texte-3);
  letter-spacing: 0.04em;
  line-height: 1.3;
}

/* Badge version du footer : toujours cliquable ; nowrap + inline-block pour rester d'un seul
   bloc (« ancienne → nouvelle »). */
.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: var(--kta-texte-3);
  letter-spacing: 0;
  padding: 1px 5px;
  border: 1px solid var(--kta-bordure);
  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: var(--kta-texte-2);
  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;
}

/* Mise à jour disponible : bleu accent pulsé, affiche la version cible. */
.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);
  }
}

/* Pastille hors-ligne accolée au badge version (homeConfig.js > _initPastilleHorsLigne) : 20 px
   de zone tactile, point 9 px, couleurs .kta-tx-*. ⚠️ [hidden] doit gagner sur display. */
.kta-offline-groupe { white-space: nowrap; }
.kta-offline-dot {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  margin: 0 0 0 1px;
  padding: 0;
  border: none;
  background: transparent;
  cursor: pointer;
  vertical-align: middle;
}
.kta-offline-dot[hidden],
.kta-offline-hdr[hidden],
.kta-offline-msg[hidden] { display: none !important; }
.kta-offline-dot::before {
  content: "";
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #8892a4;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.35);
}
.kta-offline-dot.kta-offline-ok::before   { background: #6ee287; }
.kta-offline-dot.kta-offline-ko::before   { background: #ff8c8c; box-shadow: 0 0 6px rgba(255, 140, 140, 0.7); }
.kta-offline-dot.kta-offline-wait::before {
  background: #ffb380;
  animation: kta-offline-wait-pulse 1.4s ease-in-out infinite;
}
.kta-offline-dot.kta-offline-off::before  { background: #8892a4; }
.kta-offline-dot:focus-visible {
  outline: 2px solid #8cb4ff;
  outline-offset: 1px;
  border-radius: 4px;
}
@keyframes kta-offline-wait-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.35; }
}
html.kta-theme-light .kta-offline-dot.kta-offline-ok::before,
body.kta-theme-light .kta-offline-dot.kta-offline-ok::before   { background: #1e7a3a; }
html.kta-theme-light .kta-offline-dot.kta-offline-ko::before,
body.kta-theme-light .kta-offline-dot.kta-offline-ko::before   { background: #a01818; box-shadow: none; }
html.kta-theme-light .kta-offline-dot.kta-offline-wait::before,
body.kta-theme-light .kta-offline-dot.kta-offline-wait::before { background: #8b3a00; }
html.kta-theme-light .kta-offline-dot.kta-offline-off::before,
body.kta-theme-light .kta-offline-dot.kta-offline-off::before  { background: #6b6354; }

/* Indicateur d'en-tête : même rouge que l'alerte « emergency », sans pulsation. */
.loader-btn-help.kta-offline-hdr {
  background: rgba(220, 53, 69, 0.22);
  border-color: rgba(255, 107, 107, 0.55);
  color: #ffe4d4;
}
.loader-btn-help.kta-offline-hdr:hover {
  background: rgba(255, 53, 69, 0.40);
  border-color: rgba(255, 107, 107, 0.85);
}
body.kta-theme-light .loader-btn-help.kta-offline-hdr {
  background: #fde3e3 !important;
  border: 1px solid #a01818 !important;
}

/* Message court (progression / résultat) au-dessus de l'accueil. */
.kta-offline-msg {
  position: fixed;
  top: 14px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 100001;
  max-width: calc(100vw - 32px);
  padding: 9px 16px;
  border-radius: 8px;
  border: 1px solid rgba(140, 180, 255, 0.45);
  background: var(--kta-surface);
  color: var(--kta-texte);
  font-size: 13px;
  line-height: 1.4;
  text-align: center;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.4);
  cursor: pointer;
}
.kta-offline-msg.kta-offline-msg-ok { border-color: #6ee287; }
.kta-offline-msg.kta-offline-msg-ko { border-color: #ff8c8c; }
html.kta-theme-light .kta-offline-msg,
body.kta-theme-light .kta-offline-msg {
  background: #ffffff;
  color: #2a2620;
}
html.kta-theme-light .kta-offline-msg.kta-offline-msg-ok,
body.kta-theme-light .kta-offline-msg.kta-offline-msg-ok { border-color: #1e7a3a; }
html.kta-theme-light .kta-offline-msg.kta-offline-msg-ko,
body.kta-theme-light .kta-offline-msg.kta-offline-msg-ko { border-color: #a01818; }

/* « Installation indisponible » (module de connexion absent ou gate
   déléguée en échec). Au-dessus de tout, comme une gate ; jamais de repli. */
.kta-instance-indispo {
  position: fixed; inset: 0; z-index: 100100;
  display: flex; align-items: center; justify-content: center;
  background: radial-gradient(ellipse at center, #0a0d18 0%, #03050a 100%);
  padding: 16px;
}
.kta-instance-indispo-boite {
  max-width: 420px; width: 100%;
  background: var(--kta-surface); border: 1px solid rgba(244, 197, 66, 0.35); border-radius: 12px;
  padding: 22px 20px; color: var(--kta-texte); text-align: center;
}
.kta-instance-indispo-boite h2 { margin: 0 0 10px; font-size: 18px; color: var(--kta-accent-texte); }
.kta-instance-indispo-boite p { margin: 0 0 18px; font-size: 14px; line-height: 1.5; color: var(--kta-texte-2); }
.kta-instance-indispo-lien { display: block; margin-top: 14px; font-size: 13px; color: var(--kta-accent-texte); text-decoration: none; }
.kta-instance-indispo-lien:hover, .kta-instance-indispo-lien:focus-visible { text-decoration: underline; }

/* Pastille « connexion serveur » (js/ktaExtensions.js) : couleur par la classe .kta-tx-* posée
   au rendu (off muted, invalide err, licence warn, configuree info). Sous 380 px, l'icône seule. */
.kta-cnx-groupe { white-space: nowrap; }
.kta-cnx-chip {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  min-height: 20px;
  margin: 0;
  padding: 0 3px;
  border: none;
  border-radius: 4px;
  background: transparent;
  font: inherit;
  font-size: 10.5px;
  cursor: pointer;
  vertical-align: middle;
}
.kta-cnx-chip[hidden],
.kta-cnx-bloc[hidden],
.kta-cnx-bloc-audit[hidden],
.kta-cnx-bloc-lien-ligne[hidden] { display: none !important; }
.kta-cnx-bloc-lien-ligne { text-align: center; margin: 10px 0 4px 0; }
.kta-cnx-chip:focus-visible {
  outline: 2px solid #8cb4ff;
  outline-offset: 1px;
}
.kta-cnx-ico { font-size: 11px; line-height: 1; }
.kta-cnx-mini { font-size: 11px; }
/* Un emoji ne prend pas la couleur du texte : sans ce point, l'icône seule
   (écran étroit, pied de page replié) ne dirait rien de l'état. */
.kta-cnx-ico::after,
.kta-cnx-mini::after {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  margin-left: 2px;
  border-radius: 50%;
  background: currentColor;
  vertical-align: middle;
}
@media (max-width: 379px) {
  .kta-cnx-mot { display: none; }
}

/* Signature manuscrite du footer copyright (identité visible) ; le nom civil reste dans les
   en-têtes JS et les meta. */
.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;
}

/* ≤ 768px : la partie licence passe sous la signature, séparateur initial masqué. */
@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 » (sidebar + modales) ── */
/* Sélecteur d'alertes (N > 1, par criticité) : un clic ouvre la modale détail. */
.kta-alert-selector-overlay {
  /* hérite de .kta-readme-modal-overlay */
}
.kta-alert-selector-boite {
  max-width: 540px;
  /* bornes forcées en !important + flex column (cf .kta-alert-boite) */
  height: auto !important;
  max-height: 88vh !important;
  max-height: 88dvh !important;
  display: flex !important;
  flex-direction: column !important;
}
.kta-alert-selector-corps {
  padding: 14px 18px;
  /* 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-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 var(--kta-bordure);
  border-radius: 8px;
  cursor: pointer;
  color: var(--kta-texte);
  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: var(--kta-texte);
  line-height: 1.3;
  word-break: break-word;
}
.kta-alert-selector-meta {
  font-size: 11.5px;
  color: var(--kta-texte-3);
  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: var(--kta-accent-texte);
}

/* Tracker en divIcon (div + img) : le div reçoit le translate Leaflet, l'img la rotation du
   heading. Fond blanc et bordure de .leaflet-div-icon écrasés. */
.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; /* anti-jitter */
  pointer-events: none; /* le clic doit aller a la map en dessous */
}

/* Markers en divIcon (div + img) : le div reçoit le translate3d Leaflet, l'img le scale (--kta-marker-scale :
   map.js > _majMarkerScale sur le body en mode plan ; osmView / osmHomePreview > _majTailleIcones* sur la
   carte OSM ou le pane du plan). Deux transforms indépendants : wrapper requis. */
.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;
  /* ⚠️ inherit, jamais auto : un marqueur masqué par les filtres pose `pointer-events: none` sur l'icône
     (utils.js > ktaMasquerMarqueur) ; une image en auto reprendrait le clic d'un point invisible. */
  pointer-events: inherit;
  -webkit-user-drag: none;
  user-select: none;
}

/* Pastille du niveau actif : cercle jaune avec le chiffre, dans le control sous le zoom. */
.kta-niv-pastille {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;        /* pill extensible : 1 ou 2 caractères */
  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: var(--kta-sur-accent);
  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;
}

/* Control « niveau actif » sous le zoom (top-left), même style que .leaflet-bar. */
.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;
  /* 🩸 Le parent .kta-readme-modal-boite impose height: 88vh : sans ce
     height auto, la boîte (contenu court) s'étire sur tout l'écran. */
  height: auto !important;
  max-height: 90vh !important;
  max-height: 90dvh !important;
}
.kta-niv-segmented {
  display: flex;
  flex-wrap: nowrap;        /* 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 */
  -webkit-overflow-scrolling: touch;
}
.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: var(--kta-texte-2);
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--kta-bordure);
  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: var(--kta-accent-texte);
}
.kta-niv-seg-btn.kta-actif {
  background: #f4c542;
  color: var(--kta-sur-accent);
  border-color: #f4c542;
}
.kta-niv-seg-add {
  background: rgba(255, 255, 255, 0.02);
  color: var(--kta-texte-3);
  border-style: dashed;
  font-size: 18px;
  font-weight: 700;
}
.kta-niv-seg-add:hover {
  color: var(--kta-accent-texte);
}

/* 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: var(--kta-accent-texte);
  margin-bottom: 6px;
}

/* 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 var(--kta-bordure);
  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: var(--kta-texte-2);
}

.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;
  /* idem .kta-niv-modal-boite : contenu court, pas de 88vh */
  height: auto !important;
  max-height: 90vh !important;
  max-height: 90dvh !important;
}

/* Légende : contenu court, ne doit pas occuper 88vh. */
.kta-legende-modal-boite {
  max-width: 720px;
  height: auto !important;
  max-height: 90vh !important;
  max-height: 90dvh !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: var(--kta-texte-2);
  margin: 0;
}
.kta-jct-grille .kta-cfg-input {
  padding: 8px 10px;
}

/* ── Overlay de chargement d'un plan (spinner + étape : ZIP, tuiles V2, init carte) ── */
.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: var(--kta-surface);
  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);
}
.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); }
}
/* Overlay de calcul d'itinéraire (interfaceItineraire.js) : 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: var(--kta-texte);
  text-align: center;
  padding: 0 18px;
  max-width: 320px;
}
/* Loader générique « calcul en cours » (computeLoader.js : Je suis perdu, Secours). */
.kta-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-compute-overlay .kta-load-spinner { margin: 0; }
.kta-compute-msg {
  font-size: 14px;
  font-weight: 600;
  color: var(--kta-texte);
  text-align: center;
  padding: 0 18px;
  max-width: 320px;
}
.kta-load-titre {
  font-size: 17px;
  font-weight: 600;
  color: var(--kta-texte);
  margin-bottom: 8px;
  letter-spacing: 0.01em;
}
.kta-load-message {
  font-size: 14px;
  color: var(--kta-texte-2);
  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: var(--kta-texte-3);
  font-style: italic;
  line-height: 1.5;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}

/* ── Modale d'erreur de génération V2 (échec de _genererTuilesV2, accent violet) ── */
.kta-v2-error-boite {
  border: 1px solid rgba(255, 107, 107, 0.40);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.55);
  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;
}

/* ── Modale d'avertissement V2 (case V2 cochée, accent violet) ── */
/* Import KMZ : containment (hauteur bornée à 88vh, corps scrollable) — le
   contenu dépasse largement l'écran en portrait avec un KMZ riche. */
.kta-kmz-imp-boite {
  max-width: 620px;
  height: auto !important;
  max-height: 88vh !important;
  max-height: 88dvh !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);
  max-width: 560px;
  /* Containment : hauteur auto bornée à 88vh + flex column, sinon le corps
     déborde de la boîte au lieu de scroller. */
  height: auto !important;
  max-height: 88vh !important;
  max-height: 88dvh !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 var(--kta-tuilage-v2);
  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: var(--kta-ok);
}
.kta-v2-warn-section p {
  margin: 0;
  font-size: 13px;
  color: var(--kta-texte-2);
  line-height: 1.55;
}

/* ── Modale d'avertissement au démarrage du tracker ── */
/* Liseré rouge discret : vue à chaque session, elle ne doit pas crier
   comme les modales OOM/offline. */
.kta-tracker-warn-boite {
  border: 1px solid rgba(255, 107, 107, 0.35);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.55);
  max-width: 560px;
}

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


.kta-tracker-warn-note {
  font-style: italic;
  font-size: 13px;
  color: var(--kta-texte-3);
  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;
}

@media (max-width: 540px) {
  .kta-tracker-warn-actions {
    flex-direction: column-reverse;
  }
  .kta-tracker-warn-actions .kta-btn {
    width: 100%;
  }
}

/* ── Boussole flottante (rose des vents) ── */
/* En haut à gauche sous le zoom Leaflet (~80 px), loin des sous-actions
   de la sidebar droite ; safe-area pour l'encoche iPhone. */
.kta-compass-widget {
  position: fixed;
  /* Multi-niveau : décalée plus bas (override body.kta-multilevel-active). */
  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;
  touch-action: none;
  pointer-events: auto;
}

.kta-compass-close {
  position: absolute;
  top: 2px;
  right: 4px;
  background: transparent;
  color: var(--kta-texte-3);
  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;
}

.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);
}

.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;
  /* ⚠️ Pas de transition : le lissage est en rAF, une transition ajoute 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: var(--kta-accent-texte);              /* jaune accent charte */
  letter-spacing: 0.05em;
  text-align: center;
  min-width: 60px;
}

@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 : le contrôle « niveau actif » (~36 px) s'insère entre zoom
   et boussole → +45 px au top. */
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));
  }
}

/* ── Boussole : modale plein écran ── */
.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;
  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: var(--kta-accent-texte);
  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: var(--kta-texte-2);
  line-height: 1;
}

.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;
}

@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;
  }
}

/* ── 🔒 Audit réseau ── */

/* Case à cocher générique de la modale Configuration (une dizaine de cases :
   index.html, interfaceImportExport.js) ; nom de classe historique conservé. */
.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: var(--kta-texte-2);
  /* 🩸 Sans width explicite, le <label> flex prend la largeur de son texte
     et déborde de la modale (texte tronqué à droite). */
  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, sinon un texte long pousse le conteneur flex hors cadre. */
  min-width: 0;
  word-break: break-word;
}


/* ── Modale Journal réseau (#loaderNetLogModal) ── */

.kta-net-log-boite {
  max-width: 920px !important;
  width: 95vw;
  height: 80vh;
  height: 80dvh;
  max-height: 90vh;
  max-height: 90dvh;
  display: flex !important;
  flex-direction: column;
}

.kta-net-log-mini {
  font-size: 11px !important;
  padding: 4px 10px !important;
  white-space: nowrap;
}

.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: var(--kta-texte-2);
  flex-shrink: 0;
}

.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: var(--kta-texte-2);
}
.kta-net-log-table thead {
  position: sticky;
  top: 0;
  background: var(--kta-surface);
  z-index: 1;
}
.kta-net-log-table thead th {
  padding: 8px 10px;
  text-align: left;
  font-weight: 600;
  color: var(--kta-interaction);
  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);
}

.kta-net-cell-time   { color: var(--kta-texte-3); white-space: nowrap; font-size: 10px; }
.kta-net-cell-kind   { color: var(--kta-texte-2); white-space: nowrap; }
.kta-net-cell-method { color: var(--kta-accent-texte); font-weight: 600; white-space: nowrap; }
.kta-net-cell-url {
  color: var(--kta-texte);
  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: var(--kta-erreur); }
.kta-net-status-pending { color: var(--kta-texte-3); }

.kta-net-body-yes {
  display: inline-block;
  padding: 2px 8px;
  background: rgba(255, 140, 140, 0.18);
  color: var(--kta-erreur);
  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;
}

/* ── Modale Doc audit (#loaderNetDocModal) ── */

.kta-net-doc-boite {
  max-width: 680px !important;
  max-height: 90vh;
  max-height: 90dvh;
}
.kta-net-doc-corps {
  color: var(--kta-texte-2);
  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: var(--kta-interaction);
  margin-bottom: 8px;
  padding-bottom: 4px;
  border-bottom: 1px solid rgba(140, 180, 255, 0.18);
}
/* Section « Périmètre myktamap.fr » (clause anti-copie) : orange, pas rouge. */
.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: var(--kta-texte-2);
  margin: 6px 0 10px 0;
}
.kta-net-doc-list,
.kta-net-doc-ol {
  margin: 8px 0;
  padding-left: 22px;
  font-size: 13px;
  color: var(--kta-texte-2);
  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: var(--kta-interaction);
  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;
}

/* ── Journal réseau : mobile ── */
@media (max-width: 768px) {
  .kta-net-log-boite {
    width: 98vw;
    height: 90vh;
    height: 90dvh;
  }
  .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;
  }
}

/* ── Interface refonte (body.kta-refonte-v1) ── */
/* Header 44 px en haut, sidebars Leaflet gauche (zoom, niveau, doc, réglages)
   et droite (recherche, édition, mesure, tracés, zones, tracker), barre
   d'état en bas. Règles inactives sans la classe body.kta-refonte-v1. */

/* ── Header (44 px) ── */

/* 🩸 HOME visible : header et barre d'état cachés. Le fond du loader est
   transparent à 8 % : sinon le gradient du header transparaît en haut, et
   différemment selon le chemin d'arrivée (compositing iOS).
   kta-loader-active : posée par main.js > afficherLoader, retirée par masquerLoader. */
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);
  /* Portrait : flex, titre centré dans la largeur restante (pas au centre
     géométrique, décision produit). Le grid 1fr auto 1fr ne vaut qu'en paysage. */
  display: flex;
  align-items: center;
  padding: 0 8px;
  gap: 8px;
  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: var(--kta-texte-2);
  -webkit-user-select: none;
  user-select: none;
}

/* 🩸 .leaflet-top reste à top: 0 : #map est déjà décalé de 44 + safe-top.
   Un décalage ici se cumule (trou de ~190 px sur iPhone à encoche). */
body.kta-refonte-v1 .leaflet-top {
  top: 0 !important;
}
/* Idem .leaflet-bottom : le footer est déjà décompté par le bottom de #map. */
body.kta-refonte-v1 .leaflet-bottom {
  bottom: 0 !important;
}

/* #kta-titre-fixe remplacé par le header */
body.kta-refonte-v1 #kta-titre-fixe {
  display: none !important;
}

body.kta-refonte-v1 .kta-refonte-header-btn {
  background: transparent;
  border: 1px solid transparent;
  border-radius: 6px;
  color: var(--kta-texte-2);
  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: 4px 8px;
}

/* Rose des vents du bouton home (mkm-full.png, même asset que le splash). */
body.kta-refonte-v1 .kta-refonte-header-home-img {
  height: 26px;
  width: auto;
  display: block;
  transition: transform 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);
}

body.kta-refonte-v1 .kta-refonte-header-title-wrap {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  justify-content: center;
}
/* Titre trop long : le JS masque d'abord la version, puis l'ellipsis tronque
   le nom (couleur du parent forcée en jaune pour que « … » soit celle du nom).
   ⚠️ text-overflow est sans effet sur le button flex : il est posé sur le span
   #kta-refonte-plan-name (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: var(--kta-accent-texte);          /* 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: var(--kta-accent-texte);
  font-weight: 700;
  flex: 0 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
body.kta-refonte-v1 #kta-refonte-plan-version {
  color: var(--kta-texte-3);
  font-size: 12px;
  font-weight: 500;
  /* La version ne rétrécit jamais : entière ou masquée par le JS. */
  flex: 0 0 auto;
}
body.kta-refonte-v1 .kta-refonte-header-chevron {
  color: var(--kta-texte-3);
  font-size: 11px;
  margin-left: 2px;
  flex: 0 0 auto;
}

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;
  min-width: 36px;
  min-height: 24px;
  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;
  line-height: 1;
}
body.kta-refonte-v1 .kta-refonte-counter-val {
  color: var(--kta-interaction);
  font-size: 12px;
  font-weight: 700;
  min-width: 8px;
  text-align: center;
}
/* Compteur à zéro : icône désaturée, valeur en texte-3. Jamais d'opacité sur du texte (elle le ferait passer
   sous 4,5:1, mesuré 2,2:1 en clair). */
body.kta-refonte-v1 .kta-refonte-counter-empty {
  filter: grayscale(1);
}
body.kta-refonte-v1 .kta-refonte-counter-empty .kta-refonte-counter-val {
  color: var(--kta-texte-3);
}

/* Chip résumé : seul visible sur téléphone (à la place des 5 compteurs) ;
   ailleurs masqué. La batterie reste toujours affichée. */
body.kta-refonte-v1 .kta-refonte-counter-summary {
  display: none;
  background: rgba(244, 197, 66, 0.10);
  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: var(--kta-accent-texte);
  font-variant-numeric: tabular-nums;
}

/* Téléphone : chip résumé seul. 🩸 Le paysage bas est inclus : sa largeur
   (740-900 px) passe le 480 px, et les 5 compteurs poussaient les boutons hors cadre. */
@media (max-width: 480px), (max-height: 500px) and (orientation: landscape) {
  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;
  }
  body.kta-refonte-v1 .kta-refonte-counter-summary {
    display: flex !important;
  }
  /* La batterie reste visible (révélée par BatteryGuard) : info critique sous terre. */
}

/* Chip batterie : couleur inline posée par refonteInterface.js >
   _refreshBatteryUi ; chiffres monospace pour ne pas bouger au changement. */
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;
  color: inherit;
}

/* Batterie : frère du bouton compteurs (hors de sa surbrillance de session),
   non cliquable. */
body.kta-refonte-v1 .kta-refonte-header-battery {
  margin-left: 6px;
  cursor: default;
  flex-shrink: 0;  /* ne pas écraser en landscape mobile chargé */
}

@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 ── */
/* Chaque sidebar = une barre verticale continue (controls collés, coins
   arrondis aux extrémités, séparateurs 1 px). Sous-actions empilées sous le
   bouton du groupe, scroll interne si ça dépasse. Bouton ≡ de réduction en
   haut (order: -1) : body.kta-refonte-sidebar-left-collapsed / -right-collapsed. */

/* Flex (au lieu du float Leaflet) pour que order: -1 place le bouton ≡ en haut. */
body.kta-refonte-v1 .leaflet-top.leaflet-left,
body.kta-refonte-v1 .leaflet-top.leaflet-right {
  display: flex;
  flex-direction: column;
  /* Bouton ≡ collé au header. */
  padding-top: 0 !important;
  /* Bornée entre header et footer (--kta-statusbar-h inclut la safe-area) :
     le footer qui grandit réduit la sidebar. 100vh d'abord = repli iOS 15-, puis 100dvh. */
  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; }
body.kta-refonte-v1 .leaflet-top.leaflet-left::-webkit-scrollbar,
body.kta-refonte-v1 .leaflet-top.leaflet-right::-webkit-scrollbar {
  display: none;
}

body.kta-refonte-v1 .leaflet-left { padding-left: 2px !important; }
body.kta-refonte-v1 .leaflet-right { padding-right: 2px !important; }

/* Controls collés : margin 0. */
body.kta-refonte-v1 .leaflet-bar,
body.kta-refonte-v1 .leaflet-control {
  margin: 0 !important;
  float: none !important;
  clear: none !important;
}
/* 🩸 Écrase le margin-top: 10px de leaflet.css (.leaflet-top .leaflet-control),
   sinon un trou de 10 px sépare le header du bouton ≡. */
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;
}

/* Coins arrondis aux seules extrémités (effet barre unique). */
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: var(--kta-barre-rayon) !important;
  border-top-right-radius: var(--kta-barre-rayon) !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: var(--kta-barre-rayon) !important;
  border-bottom-right-radius: var(--kta-barre-rayon) !important;
}

/* Séparateur 1 px en border-top (ne se cumule pas avec le border-bottom natif). */
body.kta-refonte-v1 .leaflet-top > .leaflet-control:not(:first-child) .leaflet-bar {
  border-top: 1px solid var(--kta-bordure) !important;
}

body.kta-refonte-v1 .leaflet-bar a {
  width: var(--kta-barre-bouton) !important;
  height: var(--kta-barre-bouton) !important;
  line-height: var(--kta-barre-bouton) !important;
  font-size: 19px;
  /* Annule le float Leaflet (sinon les sous-actions flottent à gauche). */
  float: none !important;
  display: block !important;
}

/* Sous-actions empilées sous le bouton du groupe. */
body.kta-refonte-v1 .leaflet-bar a.kta-sub {
  width: var(--kta-barre-bouton) !important;
  height: var(--kta-barre-bouton) !important;
  line-height: var(--kta-barre-bouton) !important;
  font-size: 18px;
  display: block !important;
  float: none !important;
}
/* Groupe replié (Leaflet pouvait forcer un display flex). */
body.kta-refonte-v1 .leaflet-bar a.kta-sub.kta-hidden {
  display: none !important;
}

/* Ombre sur la barre entière, pas par control (empilement visible). */
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 (refonteInterface.js > _creerBoutonReduction) ── */
/* .kta-refonte-collapse-bar + -collapse-left / -right ; en haut par order: -1
   (Layers/Zoom Leaflet sont créés avant lui dans le DOM). */


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: var(--kta-accent-texte) !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;
}

/* Replié : tous les controls sauf le bouton ≡. */
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 en bas à gauche, au-dessus du footer (en haut, elle chevauchait la sidebar) ── */
body.kta-refonte-v1 .kta-compass-widget {
  /* Annule le top: 80px de la règle de base. */
  top: auto !important;
  /* Suit --kta-statusbar-h (mise à jour par le JS) avec une marge large :
     reste séparée du footer même s'il passe à 2 lignes avant la mise à 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;
  /* 🩸 Au-dessus du footer (1200) : tant que --kta-statusbar-h n'est pas à
     jour (rotation, ResizeObserver en retard), la boussole passait dessous. */
  z-index: 1250 !important;
}
/* Multi-niveau : sans effet en bas à gauche (le bouton Niveau 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;
}

/* ⚠️ Les modales .kta-readme-modal-overlay COUVRENT header et footer (z-index 99999), où qu'elles
   soient insérées (<html> ou <body>) (décision produit). 🩸 Pas de réserve de place pour les barres :
   un padding sur l'overlay ne rétrécit pas la boîte (88-92dvh), il la pousse vers le bas et coupe le
   bas des modales en paysage. Ne pas la réintroduire sans plafonner la boîte. */

/* ── Paysage bas : sous-actions horizontales ── */
/* Hauteur trop courte pour empiler : les sous-actions se déplient vers
   l'intérieur de l'écran (row à gauche, row-reverse à droite) ; chaque
   .leaflet-bar devient une pilule indépendante. */
@media (max-height: 500px) and (orientation: landscape) {
  body.kta-refonte-v1 .leaflet-bar {
    display: flex !important;
    align-items: center !important;
    border-radius: var(--kta-barre-rayon) !important;
    overflow: hidden;
  }
  /* 🩸 La colonne (flex, max-height) rétrécit ses pilules quand elles ne tiennent pas : sous overflow: hidden, un
     bouton resté à 30 px y perdait son bas. Le bouton suit la hauteur de sa pilule, entier et centré, et chaque bouton
     reste à l'écran ; sous 24 px, la colonne défile plutôt que d'écraser encore. Le zoom (deux boutons empilés) garde
     sa taille. */
  body.kta-refonte-v1 .leaflet-top > .leaflet-control:not(.leaflet-control-zoom) {
    flex: 0 1 var(--kta-barre-bouton);
    min-height: 24px;
  }
  body.kta-refonte-v1 .leaflet-top > .leaflet-control:not(.leaflet-control-zoom) a {
    height: auto !important;
    max-height: var(--kta-barre-bouton);
    align-self: stretch;
    line-height: 1 !important;
  }
  body.kta-refonte-v1 .leaflet-top.leaflet-left .leaflet-bar {
    flex-direction: row !important;
  }
  /* row-reverse : le bouton principal reste au bord droit, sub1 le plus proche. */
  body.kta-refonte-v1 .leaflet-top.leaflet-right .leaflet-bar {
    flex-direction: row-reverse !important;
  }
  /* Exception : le zoom reste vertical, « + » au-dessus du « − » (décision produit). */
  body.kta-refonte-v1 .leaflet-control-zoom,
  body.kta-refonte-v1 .leaflet-top .leaflet-bar.leaflet-control-zoom {
    /* 🩸 2e sélecteur : « .leaflet-top.leaflet-left .leaflet-bar » (row) est plus
       spécifique et remettrait les boutons côte à côte. */
    flex-direction: column !important;
  }
  /* Boutons en ligne, 30 px pour gagner de la hauteur. */
  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: var(--kta-barre-bouton) !important;
    height: var(--kta-barre-bouton) !important;
    line-height: var(--kta-barre-bouton) !important;
    font-size: 16px;
  }
  body.kta-refonte-v1 .leaflet-bar a.kta-sub.kta-hidden {
    display: none !important;
  }
  /* Annule les coins first/last du mode vertical : 4 coins par pilule. */
  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;
  }
  body.kta-refonte-v1 .leaflet-top > .leaflet-control:not(:first-child) .leaflet-bar {
    border-top: none !important;
  }
  /* 1 px entre pilules, sans liseré haut ni bas (l'ombre les sépare) : 10 pilules de 30 px tiennent dans 313 px
     (852 × 393), boutons entiers à 30 px. Au-delà, elles rétrécissent (règle plus haut). */
  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: 1px !important;
  }
  body.kta-refonte-v1 .leaflet-top > .leaflet-control:not(.leaflet-control-zoom) {
    border-top-width: 0 !important;
    border-bottom-width: 0 !important;
  }
  /* Séparateur vertical entre boutons (a + a) ; reste juste en row-reverse. */
  body.kta-refonte-v1 .leaflet-bar a + a {
    border-left: 1px solid var(--kta-bordure) !important;
    border-top: none !important;
    border-bottom: none !important;
  }
  /* Zoom vertical : séparateur horizontal. */
  body.kta-refonte-v1 .leaflet-control-zoom a + a {
    border-left: none !important;
    border-top: 1px solid rgba(255, 255, 255, 0.12) !important;
  }
  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);
  }
  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;
  }
}

/* Rails au doigt : marque à 36 px (décision produit : surface utile de la carte), zone de toucher portée à 44 px
   de large par un ::before qui déborde de 8 px vers la carte. ⚠️ ::after est pris par la pastille de mode actif.
   🩸 Deux conteneurs rognaient le débord : le rail (overflow-x: hidden, défilement) reçoit 8 px de marge
   intérieure côté carte (pointer-events: none chez Leaflet : la marge seule ne prend aucun toucher) ; la barre
   (overflow: hidden pour ses coins) passe en visible, ses coins repris par les boutons des extrémités.
   Boutons empilés sans interstice : aucune extension verticale (elle prendrait le toucher du voisin). Paysage
   bas exclu : pilules de 30 px en ligne, à overflow: hidden, où le débord mordrait sur le bouton voisin. */
@media (pointer: coarse) and (min-height: 501px), (pointer: coarse) and (orientation: portrait) {
  body.kta-refonte-v1 .leaflet-top.leaflet-left { padding-right: 8px !important; }
  body.kta-refonte-v1 .leaflet-top.leaflet-right { padding-left: 8px !important; }
  /* Ombre coupée : le rail la rognait entièrement ; sur les 8 px de marge elle se verrait en bande nette. */
  body.kta-refonte-v1 .leaflet-top .leaflet-bar { overflow: visible; box-shadow: none !important; }
  body.kta-refonte-v1 .leaflet-top > .leaflet-control:first-child .leaflet-bar a:first-child,
  body.kta-refonte-v1 .leaflet-top > .leaflet-control.leaflet-bar:first-child a:first-child {
    border-top-left-radius: 7px;
    border-top-right-radius: 7px;
  }
  body.kta-refonte-v1 .leaflet-top > .leaflet-control:last-child .leaflet-bar a:nth-last-child(1 of :not(.kta-hidden)),
  body.kta-refonte-v1 .leaflet-top > .leaflet-control.leaflet-bar:last-child a:nth-last-child(1 of :not(.kta-hidden)) {
    border-bottom-left-radius: 7px;
    border-bottom-right-radius: 7px;
  }
  body.kta-refonte-v1 .leaflet-top .leaflet-bar a { position: relative; }
  body.kta-refonte-v1 .leaflet-top .leaflet-bar a::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    width: 44px;
  }
  body.kta-refonte-v1 .leaflet-top.leaflet-left .leaflet-bar a::before { left: 0; }
  body.kta-refonte-v1 .leaflet-top.leaflet-right .leaflet-bar a::before { right: 0; }
}

/* ── Modale « Détails de la session » (clic sur les compteurs du header) ── */

.kta-refonte-session-boite {
  max-width: 560px !important;
  width: 100%;
  max-height: 80vh;
  max-height: 80dvh;
  display: flex !important;
  flex-direction: column;
}

.kta-refonte-session-corps {
  overflow-y: auto;
  padding: 16px 18px !important;
  color: var(--kta-texte-2);
}

.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;
}

/* Stats agrégées en tête : résumé, barres par type, actions. */
.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: var(--kta-accent-texte);
  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: var(--kta-texte-2);
  font-weight: 600;
  flex-shrink: 0;
}
.kta-refonte-stats-val {
  color: var(--kta-texte);
  text-align: right;
  font-size: 12.5px;
}
.kta-refonte-stats-val strong {
  color: var(--kta-accent-texte);
  font-weight: 700;
}

.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: var(--kta-texte-3);
  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: var(--kta-texte-2);
  min-width: 70px;
  text-align: right;
  font-variant-numeric: tabular-nums;
  font-size: 11.5px;
}

.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: var(--kta-interaction);
  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: var(--kta-texte-2);
  font-weight: 600;
  font-family: ui-monospace, "SF Mono", monospace;
}
.kta-refonte-stats-mlvl-val {
  color: var(--kta-texte);
  letter-spacing: 0.5px;
}

.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: var(--kta-accent-texte);
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Section repliable (<details>) : le titre est le bouton, flèche à droite ; repliée, plus de marge sous le titre. */
.kta-session-repli > summary {
  cursor: pointer;
  list-style: none;
  user-select: none;
  -webkit-user-select: none;
}
.kta-session-repli > summary::-webkit-details-marker { display: none; }
.kta-session-repli > summary::marker { content: ""; }
.kta-session-repli > summary::after {
  content: "▾";
  margin-left: auto;
  color: var(--kta-texte-3);
  transition: transform 0.15s ease;
}
.kta-session-repli:not([open]) > summary { margin-bottom: 0; }
.kta-session-repli:not([open]) > summary::after { transform: rotate(-90deg); }
.kta-session-repli > summary:focus-visible { outline: 2px solid var(--kta-interaction); outline-offset: 2px; }

.kta-refonte-session-badge {
  display: inline-block;
  background: rgba(244, 197, 66, 0.18);
  color: var(--kta-accent-texte);
  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: var(--kta-texte);
  font-weight: 600;
  font-size: 13px;
}
.kta-refonte-session-meta {
  color: var(--kta-texte-3);
  font-size: 12px;
  font-style: italic;
}

.kta-refonte-session-empty {
  color: var(--kta-texte-3);
  font-style: italic;
  font-size: 12px;
  padding: 8px 0;
}

/* ── Liste des sauvegardes : une ligne compacte par entrée, actions en bout ── */
.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 {
  white-space: normal;
}
.kta-backups-list .kta-btn {
  margin: 0;
}

/* Compteurs du header : padding droit réduit, sinon il s'ajoute au gap du
   parent et écarte le chip résumé du chip suivant. */
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);
}

/* ── Barre d'état (footer) ── */

/* ⚠️ --kta-statusbar-h = hauteur réelle du footer (repli 52 px), réécrite par
   refonteInterface.js (ResizeObserver) ; #map, boussole et sidebars la consomment.
   Le + env(safe-area-inset-bottom) vaut 0 sans viewport-fit=cover, gardé si cover revient. */
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;
  /* 12 px sur PC ; renforcé sur mobile (règle plus bas). */
  padding: 0 12px;
  padding-left: calc(12px + env(safe-area-inset-left, 0px));
  padding-right: calc(12px + env(safe-area-inset-right, 0px));
  /* min-height (pas height) : les stats passent à la ligne et le footer grandit. */
  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: var(--kta-texte-2);
  transition: min-height 0.2s ease-out, padding 0.2s ease-out;
  /* Pas d'overflow hidden : le contenu doit pouvoir passer à la ligne. */
  -webkit-user-select: none;
  user-select: none;
}

/* 🩸 Téléphone : padding latéral 28 px, sinon les coins arrondis de l'écran
   rognent la première stat et le bouton ▾▴. */
@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 {
  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;
  /* Wrap plutôt qu'un scroll horizontal qui cache l'info. */
  flex-wrap: wrap;
  align-items: center;
  column-gap: 16px;
  row-gap: 2px;
  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;
}
/* Valeurs du footer en accent #f4c542 (décision produit). */
body.kta-refonte-v1 .kta-refonte-stat-val {
  color: var(--kta-accent-texte);
  font-weight: 700;
  font-size: 12px;
}
body.kta-refonte-v1 .kta-refonte-stat-empty {
  filter: grayscale(1);
}
body.kta-refonte-v1 .kta-refonte-stat-empty .kta-refonte-stat-val {
  /* Stat vide (« — ») : gris, le doré signale une vraie info. */
  color: var(--kta-texte-3);
  font-weight: 500;
  text-shadow: none;
}

/* Stat cliquable (itinéraire) ; sans effet quand elle est vide. */
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;
}
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;
}

/* Indicateur tracker GPS en pastille : ON vert / 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;  /* gagne sur .kta-refonte-stat-empty */
}
body.kta-refonte-v1 .kta-refonte-stat-tracker-on {
  background: rgba(76, 200, 100, 0.18);
  border-color: rgba(76, 200, 100, 0.55);
  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: var(--kta-ok);
  font-weight: 700;
  text-shadow: 0 0 4px rgba(76, 200, 100, 0.55);
}
body.kta-refonte-v1 .kta-refonte-stat-tracker-on .kta-refonte-stat-icon {
  /* drop-shadow plutôt que hue-rotate : ne dénature pas l'emoji selon la plateforme. */
  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;
  text-shadow: none;
}
body.kta-refonte-v1 .kta-refonte-stat-tracker-off .kta-refonte-stat-icon {
  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: var(--kta-interaction);
  cursor: pointer;
  /* Bouton ▾▴ 40×36 : cible au pouce ; ne passe pas à la ligne 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;
  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;
}
/* Footer replié (~20 px) : bouton compact, sinon le 40×36 dépasse au-dessus. */
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;
}

/* Labels Leaflet du bas masqués : remplacés par les stats du footer.
   🩸 La classe est .kta-measure-distance (anglais) : écrite « mesure », la
   règle ne matche rien. #measureLabel et .kta-measure-label-control : même élément, filet. */
body.kta-refonte-v1 .kta-iti-distance,
body.kta-refonte-v1 .kta-measure-distance,
body.kta-refonte-v1 .kta-measure-label-control,
body.kta-refonte-v1 #measureLabel {
  display: none !important;
}

/* ── #map entre header et footer (Leaflet se recalcule au resize) ── */

body.kta-refonte-v1 #map {
  top: calc(44px + env(safe-area-inset-top, 0px));
  /* ⚠️ La variable inclut déjà la safe-area (le JS lit offsetHeight). */
  bottom: var(--kta-statusbar-h, 52px);
  height: auto;
  transition: bottom 0.2s ease-out;
}
/* Replié : repli CSS tant que le JS n'a pas mis la variable à jour. */
body.kta-refonte-v1:has(.kta-refonte-statusbar-collapsed) #map {
  bottom: var(--kta-statusbar-h, 20px);
}

/* ── Paysage bas : header compact ── */
@media (max-height: 500px) and (orientation: landscape) {
  body.kta-refonte-v1 .kta-refonte-header {
    height: calc(36px + env(safe-area-inset-top, 0px));
    /* 🩸 Flex, pas de grid 1fr auto 1fr : le header a 7 enfants directs, le
       surplus tomberait sur une rangée implicite SOUS la barre. Le titre peut
       être décentré, les boutons restent dans la barre (décision produit). */
    display: flex;
    align-items: center;
  }
  body.kta-refonte-v1 #map {
    top: calc(36px + env(safe-area-inset-top, 0px));
  }
  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));
  }
  /* 🩸 Ni #map ni .leaflet-top / -bottom à redécaler ici : la variable et le
     décalage de #map suffisent, un override se cumule (trou sur iPhone). */
  body.kta-refonte-v1 .kta-refonte-header-home-img {
    height: 22px;
  }
  /* max-height des sidebars en paysage (vh puis 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);
  }
  /* Paysage : boussole centrée en bas, sinon elle cache le bas des sidebars. */
  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;
    left: 50% !important;
    transform: translateX(-50%);
  }
}

/* ── Photos d'un point (editor.js > afficherFormulaire) ── */

.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: var(--kta-accent-texte);
  font-family: "SF Mono", Monaco, Consolas, monospace;
  font-size: 11px;
  font-weight: 600;
  vertical-align: middle;
}

.kta-poi-photos-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin: 10px 0;
  min-height: 30px;
}

.kta-poi-photos-empty {
  grid-column: 1 / -1;
  padding: 16px 8px;
  text-align: center;
  color: var(--kta-texte-3);
  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;
}

.kta-poi-photo-thumb {
  position: relative;
  aspect-ratio: 1 / 1;
  background: var(--kta-fond);
  border: 1px solid var(--kta-bordure);
  border-radius: 6px;
  overflow: hidden;
  cursor: default;
}

.kta-poi-photo-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Pendant compression + écriture IDB. */
.kta-poi-photo-spinner {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  color: var(--kta-texte-3);
  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);    }
}

/* Suppression en attente. */
.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 ✕ toujours visible (pas de hover au tactile). */
.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;
}

.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;
}

.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;
}

.kta-poi-photos-hint {
  margin: 6px 0 0;
  font-size: 11.5px;
  color: var(--kta-texte-3);
  font-style: italic;
  line-height: 1.4;
}

/* Passage entre niveaux (poiJonction.js) : niveaux desservis et raccords à valider, dans le formulaire du POI. */
.kta-poi-jonction {
  margin-top: 10px;
  padding: 8px 10px;
  border: 1px solid var(--kta-bordure);
  border-left: 3px solid var(--kta-magenta);
  border-radius: 6px;
}
.kta-poi-jonction[hidden] { display: none; }
.kta-poi-jonction-niveaux {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 14px;
  margin: 4px 0;
}
.kta-poi-jonction-niv,
.kta-poi-jonction-raccord {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: var(--kta-texte);
  min-height: 32px;
}
.kta-poi-jonction-aide,
.kta-poi-jonction-rayon {
  margin: 4px 0;
  font-size: 12px;
  color: var(--kta-texte-3);
  line-height: 1.4;
}
.kta-poi-jonction-alerte {
  margin: 4px 0;
  font-size: 12.5px;
  color: var(--kta-avert);
}
.kta-popup-point .kta-popup-jonction {
  margin-top: 6px;
  font-size: 12px;
  color: var(--kta-texte-2);
}

/* POI danger (poiDanger.js) : date de constat dans le formulaire, date et mention sur la fiche. */
.kta-poi-danger {
  margin-top: 10px;
  padding: 8px 10px;
  border: 1px solid var(--kta-bordure);
  border-left: 3px solid var(--kta-avert);
  border-radius: 6px;
}
.kta-poi-danger[hidden] { display: none; }
.kta-poi-danger .kta-cfg-input { margin-top: 4px; }
/* Safari iPhone donne au champ date une largeur propre qui débordait du cadre. */
.kta-poi-danger input[type="date"] { width: 100%; max-width: 100%; min-width: 0; box-sizing: border-box; }
.kta-poi-danger-aide,
.kta-poi-danger-mention {
  margin: 6px 0 0;
  font-size: 12px;
  color: var(--kta-texte-3);
  line-height: 1.4;
}
.kta-poi-danger-mention { font-style: italic; }
.kta-popup-point .kta-popup-danger {
  margin-top: 6px;
  font-size: 12px;
  color: var(--kta-texte-2);
}
.kta-popup-danger-date { font-weight: 600; }
.kta-popup-danger-mention {
  display: block;
  margin-top: 3px;
  font-size: 11px;
  font-style: italic;
  color: var(--kta-texte-3);
  line-height: 1.35;
}

@media (max-width: 480px) {
  .kta-poi-photos-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ── Visionneuse photo (pinch, pan, swipe) ── */
/* z-index 100000 : au-dessus de la modale du point (99999). */

.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: 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;
  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;
}

/* « Prise le … » / « Ajoutée le … » : fond noir dans les deux thèmes, texte blanc comme le reste de l'en-tête. */
.kta-photo-viewer-date {
  flex: 1 1 auto;
  min-width: 0;
  margin: 0 10px;
  text-align: center;
  font-size: 13px;
  color: #fff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.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;  /* pinch / swipe / pan gérés en JS */
}

.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;
  /* Le JS coupe la transition pendant le geste ; ease pour le snap final. */
  will-change: transform;
  -webkit-user-drag: none;
}

.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;
}


@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; }
}

@media (max-height: 400px) and (orientation: landscape) {
}

/* Repli CSS du curseur ; le JS distingue grab / grabbing. */
.kta-photo-viewer-img[style*="scale(1)"] {
  cursor: default;
}

/* ── Thème clair (body.kta-theme-light, ThemeManager.setTheme("light")) ── */
/* Fond beige, accent jaune conservé. Portée : le mode carte (sidebars,
   footer, modales, tracker). */

/* 🩸 Palette posée aussi sur <html> : une modale insérée dans <html> n'hériterait
   d'aucune variable. --kta-light-accent-text = ambre lisible (contraste ≥ 4,5) ;
   le jaune charte reste pour fonds et bordures. */
html.kta-theme-light,
body.kta-theme-light {
  --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 */
  --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:   #5f5848;  /* texte secondaire */
  --kta-light-text-dim:     #6e6656;  /* 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-text:  #7a5a00;  /* ambre pour du TEXTE sur fond clair */
  --kta-light-accent-bg:    rgba(244,197,66,0.22);
  --kta-light-shadow:       rgba(80,60,30,0.18);
  /* Jetons communs (en tête de fichier), valeurs du clair. */
  --kta-fond:           #f0e8d8;
  --kta-surface:        #fdf8eb;
  --kta-surface-2:      #e5dcc5;
  --kta-texte:          #2a2620;
  --kta-texte-2:        #3d372d;
  --kta-texte-3:        #5f5848;
  --kta-accent-texte:   #7a5a00;
  --kta-interaction:    #1e5f99;
  --kta-focus:          #7a5a00;
  --kta-bordure:        rgba(20, 30, 50, 0.14);
  --kta-ok:             #176530;
  --kta-avert:          #8b3a00;
  --kta-erreur:         #a01818;
  --kta-violet:         #5b3fb0;
  --kta-magenta:        #a0147a;
  --kta-tuilage-v2:     #7a1fd6;   /* 6,6:1 sur la surface claire */
  --kta-info-fond:      rgba(30, 95, 153, 0.08);
  --kta-info-bord:      rgba(30, 95, 153, 0.30);
  --kta-info-bord-fort: rgba(70, 110, 200, 0.50);
  --kta-accent-fond:    rgba(244, 197, 66, 0.12);
  --kta-accent-bord:    rgba(244, 197, 66, 0.35);
  --kta-ok-fond:        rgba(76, 159, 56, 0.10);
  --kta-ok-bord:        rgba(76, 159, 56, 0.50);
  --kta-erreur-fond:    rgba(204, 51, 51, 0.10);
  --kta-erreur-bord:    rgba(204, 51, 51, 0.50);
}

/* Barres du mode carte en clair (fond #c9b88f) : le texte secondaire y fonce pour tenir 4,5:1. */
html.kta-theme-light .kta-refonte-header,
html.kta-theme-light .kta-refonte-statusbar {
  --kta-texte-3:          #4a4438;
  --kta-light-text-muted: #4a4438;
  --kta-light-text-dim:   #4a4438;
}

body.kta-theme-light .leaflet-container {
  background: var(--kta-light-bg) !important;
}
/* Fond sous le plan (réglage ou conseil du plan) : #map seulement, ni Vue OSM ni
   mini-carte XL. Gagne sur le thème par spécificité. */
body.kta-fond-noir  #map.leaflet-container { background: #000000 !important; }
body.kta-fond-blanc #map.leaflet-container { background: #ffffff !important; }
body.kta-fond-gris  #map.leaflet-container { background: #808080 !important; }

body.kta-theme-light {
  background: var(--kta-light-bg);
  color: var(--kta-light-text);
}

/* Header : brun-beige + bordure forte pour se détacher du body beige. */
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;
  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;
}

/* Footer : même traitement que le header. */
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;
  border: 1px solid var(--kta-light-bg-bar-border) !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 : classes de _creerGroupeAccordeon (.leaflet-bar a, a.kta-sub),
   !important pour battre les règles sombres ; fond = celui des barres. */
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;
}
/* Mode actif : vert, comme en sombre. */
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 de groupe actif : fond blanc opaque, tranche sur le brun (décision produit). */
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 en accent, visible sur le 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 : reste rouge en clair (lien et bouton flyout). */
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;
}
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;
}

/* Modal Tracker en thème clair */
body.kta-theme-light .kta-tracker-modal-overlay {
  background: rgba(20, 28, 44, 0.55);
}
body.kta-theme-light .kta-tracker-modal-box {
  background: #f4f6fb;
  border-color: rgba(0, 0, 0, 0.12);
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.28);
}
body.kta-theme-light .kta-tracker-modal-title { color: #1a1f2e; }
body.kta-theme-light .kta-tracker-modal-header,
body.kta-theme-light .kta-tracker-modal-status {
  border-bottom-color: rgba(0, 0, 0, 0.1);
}
body.kta-theme-light .kta-tracker-modal-status {
  background: rgba(0, 0, 0, 0.03);
  color: var(--kta-texte-3);
}
body.kta-theme-light .kta-tracker-modal-section-title { color: var(--kta-texte-3); }
body.kta-theme-light .kta-tracker-modal-close {
  background: rgba(0, 0, 0, 0.05);
  border-color: rgba(0, 0, 0, 0.12);
  color: var(--kta-texte-2);
}
body.kta-theme-light .kta-tracker-modal-tile {
  background: #ffffff;
  border-color: rgba(0, 0, 0, 0.12);
  color: #1a1f2e;
}
body.kta-theme-light .kta-tracker-modal-tile:hover {
  background: #eef2fb;
  border-color: rgba(90, 130, 220, 0.5);
}
body.kta-theme-light .kta-tracker-modal-tile.kta-actif {
  border-color: #1e7a3a;
  color: var(--kta-ok);
  background: rgba(30, 122, 58, 0.1);
}
body.kta-theme-light .kta-tracker-modal-tile.kta-pause {
  border-color: #8b3a00;
  color: var(--kta-avert);
  background: rgba(139, 58, 0, 0.1);
}
/* Urgence en clair : la règle ci-dessus ne vise pas la tuile du modal. */
body.kta-theme-light .kta-tracker-modal-tile.kta-sous-action-urgence {
  background: #c0392b !important;
  border-color: #a33024 !important;
  color: #fff !important;
}
body.kta-theme-light .kta-tracker-modal-tile.kta-sous-action-urgence:hover {
  background: #a33024 !important;
  border-color: #8b261c !important;
}

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;
}

/* Bouton des calques : même fond que les autres boutons .leaflet-bar a. */
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: var(--kta-texte) !important;
}
body.kta-theme-light .leaflet-control-layers-separator {
  border-top: 1px solid var(--kta-light-border) !important;
}

/* Modales .kta-readme-modal-* */
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-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: var(--kta-avert);
  border-color: var(--kta-light-border);
}

/* Résultats de recherche de la modale Itinéraire. Double sélecteur body/html :
   la modale peut être insérée dans <html>. */
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-texte-3);
}
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-texte-3);
}

/* Mode Histoire. 🩸 Double sélecteur obligatoire : la modale est insérée dans
   <html> (sœur de body), body.kta-theme-light seul ne la matche pas. */

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: var(--kta-avert);  /* 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);
}
/* Éditeur Markdown de la note libre */
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: var(--kta-avert);
}
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;
}

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);
}

body.kta-theme-light .kta-btn,
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:hover {
  background: var(--kta-light-accent-bg);
  border-color: var(--kta-light-accent);
}

body.kta-theme-light .kta-measure-distance {
  background: var(--kta-light-bg-elevated) !important;
  color: var(--kta-avert) !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 {
  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;
}

body.kta-theme-light .kta-measure-seg-label {
  background: var(--kta-light-bg-elevated);
  color: var(--kta-avert);
  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);
}

/* ── Modale de confirmation du changement de thème ── */
/* ⚠️ Affichée AVANT le reload, dans le thème qu'on quitte : les 2 variantes comptent. */
.kta-theme-confirm-overlay {
  background: rgba(5, 8, 15, 0.78) !important;
}
.kta-theme-confirm-boite {
  max-width: 460px;
  height: auto !important;
  max-height: 88vh !important;
  max-height: 88dvh !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;
  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: var(--kta-texte);
  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: var(--kta-texte-3);
  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 OK en accent jaune (pas le bleu de .kta-btn-primary). */
.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;
}

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-actions,
html.kta-theme-light .kta-theme-confirm-actions {
  border-top-color: var(--kta-light-border) !important;
}
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;
}

/* Modale « Session précédente restaurée » (.kta-session-modal-*). */
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;
}
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;
}

/* ── Popup note (zones, tracés, structures) : popup Leaflet + .kta-note-popup-* ── */
.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;
}

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;
}

/* Lecture seule (calque data) : texte, pas de textarea. */
.kta-note-popup-readonly-label {
  font-size: 11px;
  color: var(--kta-texte-3);
  margin: 4px 0 6px;
  font-style: italic;
  letter-spacing: 0.02em;
}
.kta-note-popup-readonly-text {
  font-size: 13px;
  line-height: 1.5;
  color: var(--kta-texte-2);
  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;
  white-space: pre-wrap;
  word-break: break-word;
  max-height: 240px;
  overflow-y: auto;
}
.kta-note-popup-readonly-empty {
  font-size: 12px;
  color: var(--kta-texte-3);
  font-style: italic;
  text-align: center;
  margin: 8px 0;
}

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;
}

/* window.ouvrirImportChoix n'a pas de CSS propre : il réutilise .kta-conv-sens-btn
   et .kta-aide-section (comme l'export PNG/JPG). */

/* Popups Leaflet. 🩸 Les règles sombres sont en !important : les overrides
   clairs doivent l'être aussi, sinon le popup reste sombre. */
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-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;
}
body.kta-theme-light .kta-popup-ext-info,
html.kta-theme-light .kta-popup-ext-info {
  color: var(--kta-light-text-muted) !important;
}
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-actions,
html.kta-theme-light .kta-popup-actions {
  border-top: 1px solid var(--kta-light-border) !important;
}
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;
}
/* Je suis ici : vert */
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;
}
/* Aller : jaune */
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;
}
/* Supprimer : rouge */
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: var(--kta-erreur) !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;
}
/* Éditer / Ajouter */
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;
}
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;
}

/* Aide / Doc */
body.kta-theme-light .kta-aide-section-titre {
  color: var(--kta-light-accent-text, #7a5a00);
  border-bottom: 1px solid var(--kta-light-border);
}
body.kta-theme-light .kta-aide-icone {
  color: var(--kta-light-accent-text, #7a5a00);
}
body.kta-theme-light .kta-aide-grille {
  color: var(--kta-light-text);
}

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);
}

/* Rejeu du tracker */
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 de la modale Session */
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;
}

body.kta-theme-light .kta-refonte-session-section-titre {
  color: var(--kta-light-accent-text, #7a5a00);
  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);
}

/* La visionneuse photo reste sombre en clair (décision produit). */

/* ── Modale d'export (PNG / PDF / KMZ / Session) ── */
/* 🩸 Règles de base ici et pas dans le <style> de exporter.js : legendCustomization.js
   réutilise ces classes et resterait non stylé tant que l'export image n'a pas été ouvert. */
.kta-export-cb-row,
.kta-export-radio-row {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--kta-texte-2);
  padding: 4px 6px;
  border-radius: 4px;
  cursor: pointer;
  user-select: none;
  transition: background 0.15s;
}
.kta-export-cb-row:hover,
.kta-export-radio-row:hover {
  background: rgba(255, 255, 255, 0.04);
}
.kta-export-cb-row input[type="checkbox"],
.kta-export-radio-row input[type="radio"] {
  margin: 0;
  cursor: pointer;
  flex: 0 0 auto;
}
.kta-export-cb-row input:disabled { cursor: not-allowed; }
.kta-export-cb-row input:disabled + span { color: #666; }
/* Option d'export indisponible (posée par le JS) : visible mais éteinte. */
.kta-export-radio-row.kta-disabled {
  opacity: 0.45;
  cursor: not-allowed;
}
.kta-export-radio-row.kta-disabled:hover { background: transparent; }
.kta-export-radio-row.kta-disabled input { cursor: not-allowed; }
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, étapes, évitements) */
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: var(--kta-avert);
}

body.kta-theme-light summary {
  color: var(--kta-light-text);
}
body.kta-theme-light summary:hover {
  background: var(--kta-light-accent-bg);
}

body.kta-theme-light .kta-refonte-counters-btn {
  color: var(--kta-light-text);
}

/* Annuler / Rétablir 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;
}

/* Filet : beaucoup d'enfants textuels (h1…th) ont une couleur claire en dur ;
   texte foncé forcé dans les conteneurs du mode carte. */
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;
}
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;
}
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;
}
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;
}
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);
}

/* Pied du panneau 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);
}

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);
}

/* ⚠️ .leaflet-bar a en clair est défini une seule fois (plus haut, --kta-light-bg-bar) :
   ne pas le redéclarer ici. */

body.kta-theme-light .kta-legende-modal-boite {
  background: var(--kta-light-bg-elevated);
  color: var(--kta-light-text);
}

/* ── Thème clair : HOME, loader, Configuration, Audit réseau, docs ── */
/* Seule exception : le splash animé reste sombre (décision produit). */

body.kta-theme-light {
  background-color: var(--kta-light-bg) !important;
}

/* Loader plein écran : fond des barres du mode carte, les cartes ressortent en clair. */
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;
  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-text, #7a5a00);
}
body.kta-theme-light #planLoaderBox a:hover {
  color: var(--kta-accent-texte);
}

/* Boutons utilitaires du header de la HOME : blanc opaque (un fond à 5 % paraît transparent). */
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;
}
/* 🩸 :hover sous @media (hover: hover) : au tactile il reste collé après un tap. */
@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;
  }
}

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-text, #7a5a00) !important;
}
body.kta-theme-light .kta-loader-copyright-warn {
  color: var(--kta-avert) !important;
}

/* 🩸 Suffixe « -pro » du header de la HOME : body.kta-theme-light #planLoaderBox *
   le passerait en texte foncé ; cette règle (plus spécifique) rend le jaune accent. */
body.kta-theme-light #planLoaderBox .kta-titre-suffix-pro {
  color: #f4c542;
}

/* « Reprendre » : carte claire, bordure marquée. Mes plans, Vue OSM et Ajouter un plan n'en ont pas : leur
   colonne (.loader-col) est déjà la carte, comme en sombre. */
body.kta-theme-light #resumeBox {
  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 {
  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 {
  background: var(--kta-light-accent-bg) !important;
  border-color: var(--kta-light-accent) !important;
}

body.kta-theme-light #importListBtn,
body.kta-theme-light #exportListBtn,
/* #loaderResetBtn absent exprès : il garde le style « danger » clair (.loader-btn-danger) */
body.kta-theme-light #loaderForceUpdateBtn,
body.kta-theme-light #loaderDepannageBtn,
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 .kta-aide-section {
  background: rgba(0,0,0,0.02);
  border: 1px solid var(--kta-light-border);
}
body.kta-theme-light .kta-aide-section-titre {
  color: var(--kta-light-accent-text, #7a5a00);
}
body.kta-theme-light .kta-loader-perf-hint {
  color: var(--kta-light-text-muted);
}
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;
}

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);
}

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-text, #7a5a00) !important;
}
/* Audit réseau */
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;
}

/* Petites modales système */
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;
}

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;
}

body.kta-theme-light #loaderStatus,
body.kta-theme-light #kta-load-message {
  color: var(--kta-light-text-muted) !important;
}

/* ── Thème clair des modales insérées dans <html> ── */
/* 🩸 Beaucoup de modales sont ajoutées à document.documentElement (sœurs de
   body) : body.kta-theme-light ne les matche jamais. ThemeManager pose aussi la
   classe sur <html> ; ce bloc reprend les overrides en html.kta-theme-light. */


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: var(--kta-surface) !important;
  color: var(--kta-texte) !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: var(--kta-surface-2) !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: var(--kta-texte) !important;
}
html.kta-theme-light .kta-readme-modal-overlay .kta-readme-modal-corps {
  background: var(--kta-surface) !important;
  color: var(--kta-texte) !important;
}
html.kta-theme-light .kta-readme-modal-overlay .kta-readme-modal-corps * {
  color: var(--kta-texte) !important;
}
html.kta-theme-light .kta-readme-modal-overlay .kta-readme-modal-corps a {
  color: var(--kta-light-accent-text, #7a5a00) !important;
}
html.kta-theme-light .kta-readme-modal-overlay .kta-readme-modal-corps code {
  background: rgba(0,0,0,0.06) !important;
  color: var(--kta-avert) !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,
html.kta-theme-light .kta-readme-modal-overlay .kta-readme-modal-corps h5 {
  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: var(--kta-texte-3) !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: var(--kta-texte-3) !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: var(--kta-surface-2) !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: var(--kta-texte) !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: var(--kta-texte) !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 des modales Doc/Aide (.kta-readme-toc-*). 🩸 Le filet
   .kta-readme-modal-corps * (!important) aplatit la hiérarchie H2/H3 : ces
   sélecteurs plus spécifiques la rétablissent. */
html.kta-theme-light .kta-readme-modal-overlay .kta-readme-toc-row {
  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 */
html.kta-theme-light .kta-readme-modal-overlay .kta-readme-toc-link {
  color: var(--kta-texte) !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: var(--kta-accent-texte) !important;
  font-weight: 700 !important;
}
/* H3 = sous-items */
html.kta-theme-light .kta-readme-modal-overlay .kta-readme-toc-title {
  color: #16497a !important;   /* #8cb4ff sur beige : contraste 1,36 */
}
html.kta-theme-light .kta-readme-modal-overlay .kta-readme-toc-link-h3 {
  color: #544c3e !important;   /* #6b6354 : contraste 3,87, insuffisant */
  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: var(--kta-texte) !important;
}
html.kta-theme-light .kta-readme-modal-overlay .kta-readme-toc-link-h3.active {
  background: rgba(244, 197, 66, 0.22) !important;
  color: var(--kta-texte) !important;   /* le doré texte sur ce fond doré : 4,08:1 mesuré */
  font-weight: 600 !important;
}
html.kta-theme-light .kta-readme-modal-overlay .kta-readme-toc-sublist {
  border-left: 1px solid rgba(154, 135, 84, 0.4) !important;
}
html.kta-theme-light .kta-readme-modal-overlay .kta-readme-toc-bullet {
  color: var(--kta-texte-3) !important;
}
html.kta-theme-light .kta-readme-modal-overlay .kta-readme-toc-toggle {
  color: var(--kta-texte-3) !important;
}
html.kta-theme-light .kta-readme-modal-overlay .kta-readme-toc-toggle:hover {
  color: var(--kta-texte) !important;
}
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;
}
html.kta-theme-light .kta-readme-modal-overlay .kta-readme-toc-sublist li > .kta-readme-toc-link-h3 {
  border-bottom: none !important;
}

/* ── Thème clair : boutons .kta-btn-*, modale de mise à jour, alertes ── */

html.kta-theme-light .kta-btn {
  background: var(--kta-surface) !important;
  color: var(--kta-texte) !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;
}
/* Action principale : bleu dans les deux thèmes (décision produit). !important requis : la règle .kta-btn
   ci-dessus l'est aussi et vise le même bouton. */
html.kta-theme-light .kta-btn-primary {
  background: var(--kta-primaire) !important;
  color: var(--kta-sur-primaire) !important;
  border: 1px solid transparent !important;
  font-weight: 600 !important;
}
html.kta-theme-light .kta-btn-primary:hover {
  background: var(--kta-primaire-survol) !important;
  color: var(--kta-sur-primaire) !important;
}
/* 🩸 Les filets clairs « .kta-readme-modal-corps * » (0,3,1) et « #planLoaderBox * » (1,1,1) fonceraient le
   texte du bouton bleu (mesuré 2,6:1) : ces sélecteurs les battent, enfants compris. */
html.kta-theme-light .kta-btn-primary *,
:root .kta-readme-modal-overlay .kta-readme-modal-corps .kta-btn-primary,
:root .kta-readme-modal-overlay .kta-readme-modal-corps .kta-btn-primary *,
:root #planLoaderBox #loadPlanBtn,
:root #planLoaderBox #loadPlanBtn * {
  color: var(--kta-sur-primaire) !important;
}
html.kta-theme-light .kta-btn-secondary {
  background: var(--kta-surface) !important;
  color: var(--kta-texte) !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;
}
html.kta-theme-light .kta-btn-ghost {
  background: rgba(0, 0, 0, 0.04) !important;
  color: var(--kta-texte-3) !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: var(--kta-texte) !important;
  border-color: rgba(0, 0, 0, 0.30) !important;
}
html.kta-theme-light .kta-btn-link {
  background: transparent !important;
  color: var(--kta-light-accent-text, #7a5a00) !important;
  border: none !important;
  text-decoration: underline !important;
}
html.kta-theme-light .kta-btn-link:hover {
  color: var(--kta-accent-texte) !important;
}
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;
}
html.kta-theme-light .kta-update-link-danger {
  color: #b02020 !important;
}
html.kta-theme-light .kta-update-link-danger:hover {
  color: #8a1818 !important;
}

/* Modale de mise à jour (#kta-update-modal) : l'encadré des versions passe par --kta-info-fond / -bord. */
html.kta-theme-light #kta-update-modal .kta-readme-modal-corps {
  background: var(--kta-surface) !important;
  color: var(--kta-texte) !important;
}

/* Alerte publique d'urgence : reste rouge en clair (décision produit), texte lisible. */
html.kta-theme-light .kta-alert-overlay {
  background: rgba(40, 32, 20, 0.85) !important;
}
html.kta-theme-light .kta-alert-boite {
  background: var(--kta-surface) !important;
  border: 2px solid #c0392b !important;
  color: var(--kta-texte) !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: var(--kta-texte) !important;
  font-weight: 500 !important;
}
html.kta-theme-light .kta-alert-details {
  color: #4a3f30 !important;
}
html.kta-theme-light .kta-alert-released {
  color: var(--kta-texte-3) !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;
}
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;
}

/* « Aucune alerte » : modale neutre, suit le thème. */
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: var(--kta-surface) !important;
  color: var(--kta-texte) !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: var(--kta-surface-2) !important;
  border-bottom: 1px solid rgba(0, 0, 0, 0.12) !important;
}
html.kta-theme-light .kta-alert-absent-icon {
  color: var(--kta-texte) !important;
}
html.kta-theme-light .kta-alert-absent-title {
  color: var(--kta-texte) !important;
}
html.kta-theme-light .kta-alert-absent-msg {
  color: var(--kta-texte) !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: var(--kta-texte-3) !important;
}
html.kta-theme-light .kta-alert-absent-version-released strong {
  color: var(--kta-texte) !important;
}
html.kta-theme-light .kta-alert-absent-version-notes-titre {
  color: var(--kta-light-accent-text, #7a5a00) !important;
}
html.kta-theme-light .kta-alert-absent-version-notes {
  color: var(--kta-texte) !important;
}
html.kta-theme-light .kta-alert-absent-version-notes li {
  color: #4a3f30 !important;
}

html.kta-theme-light #kta-alert-selector-modal,
html.kta-theme-light .kta-alert-selector-row {
  background: var(--kta-surface) !important;
  color: var(--kta-texte) !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;
}

html.kta-theme-light #kta-alert-charte {
  background: rgba(40, 32, 20, 0.85) !important;
}

/* ── Thème clair : sélecteur de plan ── */
/* ⚠️ Les classes sont .kta-plan-switcher-* (pas .kta-refonte-plan-switch-*). */

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: var(--kta-surface) !important;
  color: var(--kta-texte) !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: var(--kta-surface-2) !important;
  border-bottom: 1px solid rgba(0, 0, 0, 0.12) !important;
}
html.kta-theme-light .kta-plan-switcher-modal-titre {
  color: var(--kta-texte) !important;
}
html.kta-theme-light .kta-plan-switcher-modal-corps {
  background: var(--kta-surface) !important;
  color: var(--kta-texte) !important;
}
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: var(--kta-accent-texte) !important;
}
html.kta-theme-light .kta-plan-switcher-current-name {
  color: #1a1612 !important;
}
html.kta-theme-light .kta-plan-switcher-current-icon {
  color: var(--kta-accent-texte) !important;
}
html.kta-theme-light .kta-plan-switcher-current-sub {
  color: var(--kta-texte-3) !important;
}
html.kta-theme-light .kta-plan-switcher-section-titre {
  color: var(--kta-light-accent-text, #7a5a00) !important;
  border-bottom: 1px solid rgba(0, 0, 0, 0.12) !important;
}
html.kta-theme-light .kta-plan-switcher-modal-boite .kta-switcher-row {
  background: rgba(0, 0, 0, 0.03) !important;
  color: var(--kta-texte) !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: var(--kta-texte) !important;
}
html.kta-theme-light .kta-plan-switcher-modal-boite .kta-switcher-name {
  color: var(--kta-texte) !important;
}
html.kta-theme-light .kta-plan-switcher-modal-boite .kta-switcher-sub {
  color: var(--kta-texte-3) !important;
}
html.kta-theme-light .kta-plan-switcher-modal-boite .kta-switcher-row-arrow {
  color: var(--kta-light-accent-text, #7a5a00) !important;
}
html.kta-theme-light .kta-plan-switcher-modal-boite .kta-switcher-empty {
  color: var(--kta-texte-3) !important;
}
html.kta-theme-light .kta-plan-switcher-modal-footer {
  background: var(--kta-surface-2) !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;
}

/* ── Thème clair : barrière d'accès (#kta-unlock-overlay), PIN ── */

html.kta-theme-light #kta-unlock-overlay {
  background: linear-gradient(135deg, #f0e8d8 0%, #c9b88f 100%) !important;
}
html.kta-theme-light .kta-unlock-box {
  background: var(--kta-surface) !important;
  color: var(--kta-texte) !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 {
  color: var(--kta-accent-texte) !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: var(--kta-light-accent-text, #7a5a00) !important;
}
html.kta-theme-light .kta-unlock-info a:hover {
  color: var(--kta-accent-texte) !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: var(--kta-texte-3) !important;
}
html.kta-theme-light .kta-unlock-signature {
  color: var(--kta-texte-3) !important;
}

/* Saisie du PIN */
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: var(--kta-surface) !important;
  color: var(--kta-texte) !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: var(--kta-accent-texte) !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 {
}
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: var(--kta-texte) !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: var(--kta-texte) !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: var(--kta-texte-3) !important;
}
html.kta-theme-light .kta-pin-gate-attempts-warn {
  color: #8b4a0c !important;
}
html.kta-theme-light .kta-pin-gate-key {
  background: var(--kta-surface) !important;
  color: var(--kta-texte) !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: var(--kta-light-text-dim) !important;
  border-color: rgba(0, 0, 0, 0.15) !important;
  opacity: 0.55 !important;
}
html.kta-theme-light .kta-pin-gate-bio-btn {
  background: var(--kta-surface) !important;
  color: var(--kta-texte) !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;
}
/* Temporisation après échecs */
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: var(--kta-surface) !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;
}

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: var(--kta-texte) !important;
}
html.kta-theme-light .zip-drop-zone:hover,
html.kta-theme-light .zip-drop-zone.dragover {   /* classe posée par homeLoader.js */
  background: rgba(244, 197, 66, 0.10) !important;
  border-color: #f4c542 !important;
}
html.kta-theme-light .zip-icon {
  color: var(--kta-accent-texte) !important;
}
html.kta-theme-light #zipFileName {
  color: var(--kta-texte-3) !important;
}

html.kta-theme-light .loader-btn-resume {
  border-radius: 12px !important;
  box-shadow: 0 4px 14px rgba(80, 60, 30, 0.12) !important;
}

/* « Charger ce plan » = action principale : même bleu que .kta-btn-primary (jetons, sans surcharge de couleur). */
html.kta-theme-light #loadPlanBtn {
  border-radius: 10px;
  padding: 12px 18px;
}
html.kta-theme-light #loadPlanBtn:hover {
  background: var(--kta-primaire-survol);
}



html.kta-theme-light .loader-plans-filter-row {
  background: transparent !important;
  border-radius: 6px !important;
  padding: 6px 8px !important;
  color: var(--kta-texte) !important;
}
html.kta-theme-light .loader-plans-filter-row:hover {
  background: rgba(244, 197, 66, 0.10) !important;
}

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: var(--kta-texte) !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 li:hover {
  background: rgba(244, 197, 66, 0.10) !important;
  border-color: var(--kta-light-accent) !important;
}

html.kta-theme-light #resumeBox {
  border-radius: 14px !important;
  padding: 0 !important;  /* le bouton Reprendre porte son padding */
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

/* Overlay de chargement d'un plan (.kta-load-overlay). */
html.kta-theme-light .kta-load-overlay {
  background: rgba(240, 232, 216, 0.92) !important;
  backdrop-filter: blur(4px) !important;
  -webkit-backdrop-filter: blur(4px) !important;
}
html.kta-theme-light .kta-load-box {
  background: var(--kta-surface) !important;
  border: 1px solid rgba(244, 197, 66, 0.45) !important;
  color: var(--kta-texte) !important;
  box-shadow: 0 12px 40px rgba(80, 60, 30, 0.25) !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: var(--kta-texte-3) !important;
  border-top: 1px solid rgba(154, 135, 84, 0.25) !important;
}

/* ── Thème clair : recherche unifiée, onglets de mode, modale de session ── */

/* Recherche unifiée : ses styles sont injectés par searchPoints.js > _injecterStyles,
   d'où spécificité + !important. */
html.kta-theme-light .kta-search-input-wrap {
  background: var(--kta-surface) !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: var(--kta-light-text-dim) !important;
}
html.kta-theme-light .kta-search-info {
  color: var(--kta-texte-3) !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;
}
html.kta-theme-light .kta-search-filters {
  background: transparent !important;
}

/* Onglets de mode (.kta-conv-sens-btn) : l'actif a un fond bleu nuit en dur. */
html.kta-theme-light .kta-conv-sens-btn {
  background: rgba(0, 0, 0, 0.03) !important;
  color: var(--kta-texte-3) !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: var(--kta-texte) !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 : styles injectés par sessionExporter.js > _injecterStyles. */

/* Hauteur (tous thèmes) : la modale n'a pas de classe propre, d'où l'id. */
#kta-session-export-modal .kta-readme-modal-boite {
  height: auto !important;
  max-height: 90vh !important;
  max-height: 90dvh !important;
  max-width: 720px !important;
}

html.kta-theme-light .kta-ses-content {
  background: var(--kta-surface) !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-text, #7a5a00) !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;
}

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;
}

html.kta-theme-light .kta-ses-actions {
  background: var(--kta-surface) !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: var(--kta-texte) !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 : calibrage et aperç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;
}

/* ── Thème clair des modales .kta-modal-* (pas .kta-readme-modal-*) ── */
/* Mise à jour forcée et reset (interfaceMaintenance.js > mettreAJourCodeSeul,
   viderCacheAppli), confirmations diverses. */
html.kta-theme-light .kta-modal-overlay {
  background: rgba(40, 32, 20, 0.65) !important;
}
html.kta-theme-light .kta-modal {
  background: var(--kta-surface) !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 {
  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 = avertissement */
}
html.kta-theme-light .kta-modal-texte em,
html.kta-theme-light .kta-modal-texte i {
  color: var(--kta-light-text-muted) !important;
}
/* Boutons .kta-btn ou inline : style forcé. */
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-btn-primary {
  background: var(--kta-primaire) !important;
  color: var(--kta-sur-primaire) !important;
  border-color: transparent !important;
}
html.kta-theme-light .kta-modal-actions button.kta-btn-primary:hover {
  background: var(--kta-primaire-survol) !important;
}
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-btn-danger:hover {
  background: rgba(220, 50, 50, 0.22) !important;
}

/* Configuration de la HOME */
html.kta-theme-light .kta-loader-config-boite {
  background: var(--kta-surface) !important;
  color: var(--kta-texte) !important;
  border: 1px solid rgba(0,0,0,0.22) !important;
}
html.kta-theme-light .kta-loader-config-corps {
  color: var(--kta-texte) !important;
}
html.kta-theme-light .kta-loader-config-corps * {
  color: var(--kta-texte) !important;
}
html.kta-theme-light .kta-perf-titre {
  color: var(--kta-light-accent-text, #7a5a00) !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: var(--kta-texte) !important;
}
html.kta-theme-light .kta-net-paranoia-toggle * {
  color: var(--kta-texte) !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: var(--kta-light-accent-text, #7a5a00) !important;
}
html.kta-theme-light .kta-loader-perf-hint {
  color: var(--kta-texte-3) !important;
}

/* Audit réseau */
html.kta-theme-light #loaderNetLogTbody tr {
  background: rgba(0,0,0,0.02) !important;
  color: var(--kta-texte) !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: var(--kta-texte) !important;
}
html.kta-theme-light #loaderNetDocWhitelist {
  background: rgba(0,0,0,0.04) !important;
  color: var(--kta-texte) !important;
  border: 1px solid rgba(0,0,0,0.12) !important;
}
html.kta-theme-light #loaderNetLogMeta {
  color: var(--kta-texte-3) !important;
}

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: var(--kta-surface) !important;
  color: var(--kta-texte) !important;
  border-color: rgba(0,0,0,0.12) !important;
}

/* Reprendre : son dégradé sombre est en dur, d'où l'override complet. */

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: var(--kta-accent-texte) !important;
  font-weight: 700 !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;
}

/* ── Thème clair : modales (.kta-readme-modal-overlay, sa boîte et ses descendants) ── */
/* ⚠️ Force suffisante pour battre les styles inline et les couleurs codées en dur des enfants (h1, strong…). */
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;
}
/* Texte foncé forcé sur TOUS les descendants : !important requis, des enfants portent une couleur en dur. */
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-text, #7a5a00) !important;
}
body.kta-theme-light .kta-readme-modal-overlay .kta-readme-modal-corps code {
  background: rgba(0,0,0,0.06) !important;
  color: var(--kta-avert) !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,
body.kta-theme-light .kta-readme-modal-overlay .kta-readme-modal-corps h5 {
  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;
}
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;
}

/* ── Thème clair : boussole réduite (.kta-compass-widget), sinon elle garde son fond sombre en dur ── */
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) !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é ; texte cardinal en accent, lisible sur le fond ambre clair. */
body.kta-theme-light .kta-compass-info {
  color: var(--kta-light-accent-text, #7a5a00) !important;       /* ambre plus saturé pour contraste */
  text-shadow: 0 0 1px rgba(0, 0, 0, 0.15);
}

/* ── Sidebar flyout : panneau latéral des sous-actions (la cascade verticale débordait de l'écran) ── */
/* À gauche du bouton si sidebar topright, à droite si topleft ; positionné en JS (getBoundingClientRect). */

.kta-group-flyout {
  position: fixed;
  box-sizing: border-box;  /* le maxHeight calculé inclut padding + bordure (sinon +22 px sous l'écran) */
  z-index: 1050;  /* au-dessus des controls Leaflet (~800) et popups (~700) */
  background: var(--kta-surface);
  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 / max-height posés en inline par _positionnerFlyout : vh instable en paysage mobile (iOS). */
  overflow-y: auto;
  overflow-x: hidden;
  /* Scrollbar visible sur desktop : signale que le panneau défile. */
  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 var(--kta-bordure);
  margin-bottom: 4px;
  /* En-tête sticky (relatif au .kta-group-flyout qui défile) : le groupe reste visible dans une longue liste. */
  position: sticky;
  top: 0;
  background: var(--kta-surface);
  z-index: 2;
  /* Compense le padding du parent : sinon les items défilent visibles à 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: var(--kta-texte);
}

.kta-group-flyout-close {
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: var(--kta-texte-3);
  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: var(--kta-texte);
}
/* Mode CENTRÉ (défaut) : modale Tracker, fond assombri, croix 36 px. Le fond reste sous la barre du haut et
   le footer (1200). Mode ancré : sans fond. */
.kta-group-flyout-fond {
  position: fixed;
  inset: 0;
  z-index: 1049;
  background: rgba(6, 9, 18, 0.55);
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
}
body.kta-theme-light .kta-group-flyout-fond { background: rgba(20, 28, 44, 0.35); }
.kta-group-flyout.kta-flyout-centre .kta-group-flyout-close {
  flex: 0 0 auto;   /* sinon un 2e bouton d'en-tête (Zones) la comprime à 30 px */
  width: 36px;
  height: 36px;
  font-size: 16px;
  border-radius: 10px;
}
/* 🩸 Au doigt : 40 px. Doit rester APRÈS les règles de base : un @media n'ajoute aucune spécificité. */
@media (pointer: coarse) {
  .kta-group-flyout-close,
  .kta-group-flyout.kta-flyout-centre .kta-group-flyout-close {
    flex: 0 0 auto;
    width: 40px;
    height: 40px;
  }
}

.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 entre la dernière action type et le premier outil (.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);
  /* Fond du header sticky : transparent, les items défileraient 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-text, #7a5a00);
}
body.kta-theme-light .kta-group-flyout-sep {
  background: var(--kta-light-border);
}

/* ── 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: var(--kta-texte-3);
  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: var(--kta-texte-2);
  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: var(--kta-texte-3);
  margin-right: 4px;
  display: inline-block;
  transition: transform 0.15s;
}
.kta-legend-cat[open] > summary::before {
  transform: rotate(90deg);
}
.kta-legend-count {
  color: var(--kta-texte-3);
  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: var(--kta-accent-texte); opacity: 1; }
.kta-legend-src-plan    { color: var(--kta-interaction); 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);
}

/* Sélecteur de couleur d'un type built-in (éditeur de légende) : même place que la pastille (16 px, flex
   fixe). Le padding interne de <input type="color"> (liseré) est annulé via les pseudo-éléments swatch. */
.kta-legend-color,
.kta-legend-border {
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 3px;
  background: transparent;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
}
.kta-legend-color::-webkit-color-swatch-wrapper,
.kta-legend-border::-webkit-color-swatch-wrapper { padding: 0; }
.kta-legend-color::-webkit-color-swatch,
.kta-legend-border::-webkit-color-swatch { border: none; border-radius: 2px; }
.kta-legend-color::-moz-color-swatch,
.kta-legend-border::-moz-color-swatch { border: none; border-radius: 2px; }
.kta-legend-color:hover,
.kta-legend-border:hover { border-color: #8cb4ff; }

.kta-legend-color-reset {
  background: transparent;
  border: 1px solid rgba(140, 180, 255, 0.3);
  color: var(--kta-interaction);
  border-radius: 4px;
  padding: 2px 5px;
  font-size: 11px;
  line-height: 1;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
  flex: 0 0 auto;
}
.kta-legend-color-reset:hover {
  background: rgba(140, 180, 255, 0.15);
  border-color: rgba(140, 180, 255, 0.6);
}

body.kta-theme-light .kta-legend-color,
body.kta-theme-light .kta-legend-border { border-color: rgba(0, 0, 0, 0.25); }

/* Mini-modale « Ajouter une entrée custom » : classes kta-modal*, z-index au-dessus de la modale Export. */

/* 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);
}

/* ── 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: var(--kta-texte-2);
  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: var(--kta-accent-texte);
}
.kta-planner-mode-btn.kta-actif {
  background: #f4c542;
  color: var(--kta-sur-accent);
  border-color: rgba(0, 0, 0, 0.15);
  box-shadow: 0 1px 4px rgba(244, 197, 66, 0.35);
}

.kta-planner-mode-hint:empty {
  margin: 0;
  padding: 0;
}
.kta-planner-mode-hint {
  margin: 0 0 12px;
  padding: 6px 12px;
  font-size: 12px;
  font-style: italic;
  color: var(--kta-texte-3);
  text-align: center;
  line-height: 1.4;
}

/* Mode Simple : masque tout élément data-planner-advanced="1" (posé par createConf.js). */
#kta-planner-corps[data-planner-mode="simple"] [data-planner-advanced="1"] {
  display: none !important;
}

/* ── Section légende plan-level (mode Avancé) ── */

.kta-planner-legend-status {
  margin: 8px 0 12px;
  padding: 8px 12px;
  font-size: 12.5px;
  color: var(--kta-texte-3);
  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: var(--kta-accent-texte);
  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;
}

/* ── Générateur : 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-text, #7a5a00) !important;
}
/* Bouton de mode actif en thème clair : sélecteur très spécifique (#kta-planner-corps, body ET html) et
   HEX en dur, pour gagner la cascade sans dépendre d'une variable. */
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: #9a5a00 !important;            /* orange brûlé : texte blanc ≥ 4,5:1 sur tout le dégradé */
  background-image: linear-gradient(180deg, #a86200 0%, #8a4f00 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;
}
/* ── Thème clair : modales Logs (debug + réseau) — fond #0d1117 et texte clair en dur, illisibles sinon ── */

/* Logs de débogage : classes posées par js/debug.js > _refreshModal (overridables, pas d'inline). */
.kta-debug-log-line {
  padding: 2px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
  color: var(--kta-texte-2);
  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;
}

/* Journal réseau — 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-text, #7a5a00) !important;
}

/* ── Profil utilisateur : bandeau loader + modale détails ── */

/* ── HOME : ligne profil + Reprendre ── */
/* Simple flex space-between (la recherche vit dans le header) ; mobile : display:contents (empilement). */
.kta-loader-top-row {
  display: contents;
}
@media (min-width: 1024px) {
  .kta-loader-top-row {
    display: flex;
    align-items: stretch;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 16px;
  }
  /* Profil et Reprendre : MÊMES largeur (flex égal, plafond 620 px chacun, décision produit) et hauteur.
     🩸 #resumeBox porte un margin-bottom:14px INLINE (index.html) : en flex stretch, Reprendre perdrait
     14 px. D'où le margin !important, seul moyen de battre l'inline. */
  .kta-loader-top-row .kta-loader-profile-bar {
    margin: 0;
    flex: 1 1 0;
    min-width: 0;
    max-width: 620px;
    min-height: 56px;
    box-sizing: border-box;
  }
  .kta-loader-top-row #resumeBox {
    margin: 0 !important;
    flex: 1 1 0;
    min-width: 0;
    max-width: 620px;
    min-height: 56px;
    box-sizing: border-box;
    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%;
    height: 100%;
    text-align: center;
    padding: 0 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
  }
}

/* ─── 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;
}

/* ── Rangs de profil (gamification) : anneau coloré + bloc rang ── */
/* Couleurs par rang (cascade via data-kta-rank, posé en JS) */
[data-kta-rank="touriste"]    { --kta-rank-ring:#6b7280; --kta-rank-fg:#9aa4b5; --kta-rank-bg:rgba(107,114,128,0.16); }
[data-kta-rank="novice"]      { --kta-rank-ring:#cd7f32; --kta-rank-fg:#d89a5e; --kta-rank-bg:rgba(205,127,50,0.16); }
[data-kta-rank="confirme"]    { --kta-rank-ring:#9fb2c8; --kta-rank-fg:#b9c7da; --kta-rank-bg:rgba(159,178,200,0.16); }
[data-kta-rank="expert"]      { --kta-rank-ring:#f4c542; --kta-rank-fg:#f4c542; --kta-rank-bg:rgba(244,197,66,0.16); }
[data-kta-rank="maitre"]      { --kta-rank-ring:#ff8c42; --kta-rank-fg:#ff8c42; --kta-rank-bg:rgba(255,140,66,0.16); }
[data-kta-rank="grandmaitre"] { --kta-rank-ring:#b388ff; --kta-rank-fg:#b388ff; --kta-rank-bg:rgba(179,136,255,0.18); }
[data-kta-rank="legende"]     { --kta-rank-ring:#e0a51a; --kta-rank-fg:#e8b84a; --kta-rank-bg:rgba(224,165,26,0.20); } /* easter egg « Karma » — or ambre */
/* Anneau autour de l'avatar (conserve le shadow de profondeur existant) */
.kta-loader-profile-avatar-wrap[data-kta-rank] {
  box-shadow: 0 2px 8px rgba(0,0,0,0.35), 0 0 0 2.5px var(--kta-rank-ring, #6b7280);
}
.kta-loader-profile-avatar-wrap[data-kta-rank="expert"],
.kta-loader-profile-avatar-wrap[data-kta-rank="maitre"] {
  box-shadow: 0 2px 8px rgba(0,0,0,0.35), 0 0 0 2.5px var(--kta-rank-ring), 0 0 9px -1px var(--kta-rank-ring);
}
.kta-loader-profile-avatar-wrap[data-kta-rank="grandmaitre"] {
  box-shadow: 0 2px 8px rgba(0,0,0,0.35), 0 0 0 3px var(--kta-rank-ring), 0 0 13px -1px var(--kta-rank-ring);
}
.kta-profile-details-avatar-big[data-kta-rank] {
  box-shadow: 0 0 0 3.5px var(--kta-rank-ring, #6b7280);
}
.kta-profile-details-avatar-big[data-kta-rank="expert"],
.kta-profile-details-avatar-big[data-kta-rank="maitre"] {
  box-shadow: 0 0 0 3.5px var(--kta-rank-ring), 0 0 13px -1px var(--kta-rank-ring);
}
.kta-profile-details-avatar-big[data-kta-rank="grandmaitre"] {
  box-shadow: 0 0 0 4px var(--kta-rank-ring), 0 0 17px -1px var(--kta-rank-ring);
}
/* Easter egg « Karma » — rang Légende : anneau magenta pulsant */
.kta-loader-profile-avatar-wrap[data-kta-rank="legende"] {
  animation: kta-legende-glow 4s ease-in-out infinite;
}
.kta-profile-details-avatar-big[data-kta-rank="legende"] {
  animation: kta-legende-glow-big 4s ease-in-out infinite;
}
@keyframes kta-legende-glow {
  0%, 100% { box-shadow: 0 2px 8px rgba(0,0,0,0.35), 0 0 0 3px #e0a51a, 0 0 5px -3px #e0a51a; }
  50%      { box-shadow: 0 2px 8px rgba(0,0,0,0.35), 0 0 0 3px #e0a51a, 0 0 10px -3px #e0a51a; }
}
@keyframes kta-legende-glow-big {
  0%, 100% { box-shadow: 0 0 0 4px #e0a51a, 0 0 7px -3px #e0a51a; }
  50%      { box-shadow: 0 0 0 4px #e0a51a, 0 0 13px -3px #e0a51a; }
}
@media (prefers-reduced-motion: reduce) {
  .kta-loader-profile-avatar-wrap[data-kta-rank="legende"],
  .kta-profile-details-avatar-big[data-kta-rank="legende"] { animation: none; }
}
/* Médaille de rang en coin du GROS avatar (modale), parité avec le home */
.kta-profile-details-avatar-holder { position: relative; display: inline-flex; flex: 0 0 auto; }
.kta-profile-details-badge {
  position: absolute;
  bottom: 3px;
  right: 3px;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 17px;
  line-height: 1;
  background: var(--kta-surface);
  border: 2.5px solid var(--kta-rank-ring, #6b7280);
  box-shadow: 0 1px 4px rgba(0,0,0,0.5);
  pointer-events: none;
}
body.kta-theme-light .kta-profile-details-badge { background: var(--kta-surface); }
/* Bloc rang dans la modale Détails profil */
.kta-profile-details-rank {
  margin: 4px 0 14px;
  padding: 12px 14px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.09);
  border-radius: 12px;
}
.kta-profile-details-rank:empty { display: none; }
.kta-profile-rank-head { display:flex; align-items:center; justify-content:space-between; gap:10px; }
.kta-profile-rank-chip {
  display:inline-flex; align-items:center; gap:6px;
  padding:4px 12px; border-radius:999px;
  font-size:14px; font-weight:600;
  color: var(--kta-rank-fg, #c8d0e0);
  background: var(--kta-rank-bg, rgba(255,255,255,0.06));
  border: 1px solid var(--kta-rank-ring, rgba(255,255,255,0.2));
}
.kta-profile-rank-score { font-size:12.5px; color:var(--kta-texte-3); font-variant-numeric:tabular-nums; }
.kta-profile-rank-metrics {
  display:flex; flex-wrap:wrap; gap:6px 16px;
  margin-top:10px; font-size:13px; color:var(--kta-texte-2);
}
.kta-profile-rank-progress { margin-top:11px; }
.kta-profile-rank-bar {
  height:7px; border-radius:999px;
  background: rgba(255,255,255,0.08); overflow:hidden;
}
.kta-profile-rank-bar > span {
  display:block; height:100%;
  background: linear-gradient(90deg, var(--kta-rank-ring, #8cb4ff), #f4c542);
  border-radius:999px;
}
.kta-profile-rank-next { margin-top:6px; font-size:12px; color:var(--kta-texte-3); line-height:1.4; }
.kta-profile-rank-max { color:#4ade80; font-weight:600; }
.kta-profile-rank-real { margin-top:6px; font-size:11.5px; color:var(--kta-texte-3); display:flex; align-items:center; gap:6px; flex-wrap:wrap; }
.kta-profile-rank-chip-sm { padding:2px 9px; font-size:12px; gap:5px; font-weight:600; }
body.kta-theme-light .kta-profile-details-rank { background:#fff; border-color:rgba(0,0,0,0.1); }
body.kta-theme-light .kta-profile-rank-score,
body.kta-theme-light .kta-profile-rank-next,
body.kta-theme-light .kta-profile-rank-real { color:var(--kta-texte-3); }
body.kta-theme-light .kta-profile-rank-metrics { color:#1a1f2e; }
body.kta-theme-light .kta-profile-rank-bar { background:rgba(0,0,0,0.08); }
/* Médaille de rang en coin de l'avatar (home) + nom du rang sous le pseudo */
.kta-loader-profile-avatar-holder { position: relative; flex: 0 0 auto; display: inline-flex; }
.kta-loader-profile-badge {
  position: absolute;
  bottom: -2px;
  right: -2px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  line-height: 1;
  background: var(--kta-surface);
  border: 2px solid var(--kta-rank-ring, #6b7280);
  box-shadow: 0 1px 3px rgba(0,0,0,0.45);
  pointer-events: none;
}
.kta-loader-profile-rank {
  margin-top: 2px;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.2;
  color: var(--kta-rank-fg, #8892a4);
}
.kta-loader-profile-rank:empty { display: none; }
body.kta-theme-light .kta-loader-profile-badge { background: var(--kta-surface); }

/* Hauts faits (succès) dans la modale Détails profil */
.kta-profile-details-feats {
  margin: 0 0 14px;
  padding: 12px 14px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.09);
  border-radius: 12px;
}
.kta-profile-details-feats:empty { display: none; }
.kta-feats-head {
  display: flex; align-items: center; gap: 8px;
  margin-bottom: 10px;
  font-size: 13px; font-weight: 600; color: var(--kta-texte);
}
.kta-feats-count {
  font-size: 12px; font-weight: 600; color: var(--kta-accent-texte);
  background: rgba(244,197,66,0.14); padding: 2px 9px; border-radius: 999px;
}
.kta-feats-list { display: flex; flex-direction: column; gap: 8px; }
.kta-feat-row { display: flex; align-items: center; gap: 8px; }
.kta-feat-fam {
  flex: 1 1 auto; min-width: 0;
  display: flex; align-items: center; gap: 7px;
  font-size: 13px; color: var(--kta-texte-2);
}
.kta-feat-emoji { font-size: 15px; flex: 0 0 auto; }
.kta-feat-val {
  flex: 0 0 auto; min-width: 54px; text-align: right;
  font-size: 11.5px; color: var(--kta-texte-3); font-variant-numeric: tabular-nums;
}
.kta-feat-badges { flex: 0 0 auto; display: flex; gap: 3px; }
.kta-feat-badge {
  font-size: 15px; line-height: 1;
  opacity: 0.25; filter: grayscale(1);
  transition: opacity 0.15s ease;
}
.kta-feat-badge.kta-feat-unlocked { opacity: 1; filter: none; }
body.kta-theme-light .kta-profile-details-feats { background: #fff; border-color: rgba(0,0,0,0.1); }
body.kta-theme-light .kta-feats-head,
body.kta-theme-light .kta-feat-fam { color: #1a1f2e; }
body.kta-theme-light .kta-feat-val { color: var(--kta-texte-3); }
/* section Spéciaux (one-shot) */
.kta-feats-sptitle { margin: 22px 0 10px; font-size: 14px; font-weight: 600; color: var(--kta-texte); }
.kta-feats-specials { display: flex; flex-wrap: wrap; gap: 6px; }
.kta-feat-sp {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 4px 10px; border-radius: 999px;
  font-size: 12px; color: var(--kta-texte-3);
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.1);
  opacity: 0.55; filter: grayscale(0.7);
}
.kta-feat-sp.kta-feat-unlocked {
  opacity: 1; filter: none;
  color: var(--kta-texte);
  background: rgba(244,197,66,0.14);
  border-color: rgba(244,197,66,0.4);
}
body.kta-theme-light .kta-feats-sptitle { color: #1a1f2e; }
body.kta-theme-light .kta-feat-sp { background: #f4f6fb; border-color: rgba(0,0,0,0.1); color: var(--kta-texte-3); }
body.kta-theme-light .kta-feat-sp.kta-feat-unlocked { color: #1a1f2e; background: rgba(244,197,66,0.2); }

.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-surnom {
  font-size: 17px;
  font-weight: 700;
  color: var(--kta-accent-texte);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.kta-loader-profile-surnom.kta-loader-profile-surnom-empty {
  color: var(--kta-texte-3);
  font-style: italic;
  font-weight: 400;
}

/* Bouton Détails retiré (toute la box est cliquable) : masqué, gardé pour un éventuel flag dev. */
.kta-loader-profile-btn-details {
  display: none !important;
}

/* Stats du bandeau : cachées sous 380 px, 2 stats (temps + stockage) au-delà. */
.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;
  }
}
/* ≥ 600 px : stat un peu plus large (la base mobile-first est juste en dessous). */
@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: var(--kta-texte-2);
  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-surnom {
    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;
  max-height: 92dvh !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: var(--kta-texte-3);
  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: var(--kta-texte);
  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: var(--kta-texte-3);
  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: var(--kta-texte-3);
}
.kta-profile-stat-grid {
  display: grid;
  /* 6 cellules : 2 col × 3 lignes sur mobile, 3 × 2 sur PC. */
  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;
}
/* Police réduite pour les valeurs en octets (« 12.3 MB ») face aux simples nombres. */
.kta-profile-stat-num-bytes {
  font-size: 17px !important;
}
.kta-profile-stat-num {
  font-size: 22px;
  font-weight: 700;
  color: var(--kta-accent-texte);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", monospace;
  line-height: 1.1;
}
.kta-profile-stat-lbl {
  font-size: 11px;
  color: var(--kta-texte-3);
  margin-top: 2px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* Choix des 2 ou 3 stats affichées dans le bandeau du HOME. */
.kta-profile-barstats {
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--kta-bordure);
}
.kta-profile-barstats-header {
  font-size: 13px;
  font-weight: 600;
  color: var(--kta-texte-2);
  margin-bottom: 4px;
}
.kta-profile-barstats-hint {
  font-size: 11.5px;
  color: var(--kta-texte-3);
  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: var(--kta-texte);
  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;
}

/* Camemberts agrégés tous plans (Mon profil) — rendu par window.StatsGlobales.renderPieChart. */
.kta-profile-pies-wrap {
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--kta-bordure);
}
.kta-profile-pies-header {
  font-size: 13px;
  font-weight: 600;
  color: var(--kta-texte-2);
  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 var(--kta-bordure);
  border-radius: 8px;
  padding: 10px 12px;
}
/* Note des types personnalisés non résolus : discrète, le chiffre est juste, seul le NOM manque. */
/* Filtre par étiquette : les trois états se lisent au SYMBOLE (✓ / ✕), pas seulement à la couleur. */
.kta-profile-tagfilter { margin: 10px 0 4px; }
.kta-profile-tagfilter-aide {
  font-size: 11px; line-height: 1.45; color: var(--kta-texte-3); margin-bottom: 6px;
}
.kta-profile-tagfilter-chips {
  display: flex; flex-wrap: wrap; gap: 6px;
}
.kta-profile-tagchip {
  padding: 4px 9px;
  border: 1px solid rgba(140, 180, 255, 0.28);
  border-radius: 999px;
  background: transparent;
  color: var(--kta-texte-2);
  font-size: 11.5px;
  cursor: pointer;
  line-height: 1.3;
}
.kta-profile-tagchip:hover { border-color: rgba(140, 180, 255, 0.55); }
.kta-profile-tagchip-n { color: var(--kta-texte-3); font-size: 10.5px; }
.kta-profile-tagchip-in {
  border-color: rgba(244, 197, 66, 0.75);
  background: rgba(244, 197, 66, 0.12);
  color: var(--kta-accent-texte);
}
.kta-profile-tagchip-in .kta-profile-tagchip-n { color: var(--kta-accent-texte); }
.kta-profile-tagchip-out {
  border-color: rgba(136, 146, 164, 0.45);
  background: rgba(136, 146, 164, 0.10);
  color: var(--kta-texte-3);
  text-decoration: line-through;
}
.kta-profile-tagfilter-etat {
  margin-top: 6px; font-size: 11px; color: var(--kta-texte-3);
}

.kta-profile-pies-fix {
  margin-left: 6px;
  padding: 3px 9px;
  border: 1px solid rgba(140, 180, 255, 0.45);
  border-radius: 6px;
  background: transparent;
  color: var(--kta-interaction);
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
}
.kta-profile-pies-fix:hover:not(:disabled) { background: rgba(140, 180, 255, 0.12); }
.kta-profile-pies-fix:disabled { color: var(--kta-texte-3); border-color: rgba(136,146,164,0.35); cursor: default; }

.kta-profile-pies-note {
  margin-top: 8px;
  padding: 6px 8px;
  border-left: 2px solid rgba(244, 197, 66, 0.5);
  background: rgba(244, 197, 66, 0.06);
  border-radius: 4px;
  font-size: 11px;
  line-height: 1.45;
  color: var(--kta-texte-3);
}

.kta-profile-pies-card-title {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--kta-accent-texte);
  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;
}

/* Stats agrégées par plan (Mon profil), calcul séquentiel : index.html > _calculerStatsPlansAggregees. */
.kta-profile-plansstats {
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--kta-bordure);
}
.kta-profile-plansstats-header {
  font-size: 13px;
  font-weight: 600;
  color: var(--kta-texte-2);
  margin-bottom: 8px;
}
.kta-profile-plansstats-wrap {
  max-height: 280px;
  overflow-y: auto;
  border: 1px solid var(--kta-bordure);
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.02);
}
.kta-profile-plansstats-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
  color: var(--kta-texte-2);
}
.kta-profile-plansstats-table thead th {
  position: sticky;
  top: 0;
  background: rgba(244, 197, 66, 0.10);
  color: var(--kta-accent-texte);
  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: var(--kta-texte-3);
  margin-left: 4px;
}
.kta-pps-current {
  color: var(--kta-ok);
  font-size: 10px;
  margin-left: 4px;
  vertical-align: middle;
}
.kta-profile-plansstats-table .kta-pps-row-current {
  background: rgba(108, 226, 138, 0.06);
}
/* Marqueur « partial » : plan jamais ouvert dans cette version, seules les stats de session sont connues. */
.kta-pps-partial {
  color: var(--kta-accent-texte);
  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: var(--kta-accent-texte);
  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; }

/* 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 ─── */
/* Bandeau : même card que Mes plans / Reprendre (fond uni, bordure ocre, radius 14 px), pas de dégradé. */
body.kta-theme-light .kta-loader-profile-bar,
html.kta-theme-light .kta-loader-profile-bar {
  background: var(--kta-surface) !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-texte-3) !important;
}
body.kta-theme-light .kta-loader-profile-surnom,
html.kta-theme-light .kta-loader-profile-surnom {
  color: var(--kta-light-accent-text, #7a5a00) !important;
}
body.kta-theme-light .kta-loader-profile-surnom-empty,
html.kta-theme-light .kta-loader-profile-surnom-empty {
  color: var(--kta-texte-3) !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-texte-3) !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-texte-3) !important;
}
html.kta-theme-light .kta-profile-details-hint {
  color: var(--kta-texte-3) !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-text, #7a5a00) !important;
}
html.kta-theme-light .kta-profile-stat-lbl {
  color: var(--kta-texte-3) !important;
}
html.kta-theme-light .kta-profile-details-footer-hint {
  background: rgba(0,0,0,0.04) !important;
  color: var(--kta-light-text-dim) !important;
}

/* ── Mode présentation (touche F, presentationMode.js) : restent la carte, le zoom et la boussole ── */

body.kta-presentation-mode .kta-refonte-header,
body.kta-presentation-mode .kta-refonte-statusbar {
  display: none !important;
}

/* Sidebars Leaflet cachées, sauf le zoom natif de la gauche (:not(.leaflet-control-zoom)). */
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;
}

/* Carte plein écran : --kta-statusbar-h surchargée, sinon l'espace du footer reste réservé. */
body.kta-presentation-mode #map {
  top: env(safe-area-inset-top, 0px) !important;
  bottom: env(safe-area-inset-bottom, 0px) !important;
}

/* Boussole : son bottom dépend de --kta-statusbar-h, surchargée pour coller au vrai bas de l'écran. */
body.kta-presentation-mode .kta-compass-widget {
  bottom: calc(env(safe-area-inset-bottom, 0px) + 12px) !important;
}

/* Bouton ✕ de sortie sur mobile (pas de touche F) : fixed haut-droite, safe-area iOS, 40 % d'opacité,
   z-index au-dessus de la boussole (~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-text, #7a5a00) !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;
}

/* ── Géoref picker (Réglages + Enregistrer KMZ) ── */
/* Ici et non dans sessionExporter.js : Réglages l'utilise sans que Enregistrer ait été ouvert. */

.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 var(--kta-bordure);
  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: var(--kta-texte-2);
  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: var(--kta-texte);
}
.kta-kmz-search-item strong {
  color: var(--kta-interaction);
  font-weight: 600;
}
.kta-kmz-search-item .kta-kmz-search-meta {
  color: var(--kta-texte-3);
  font-size: 11px;
}
.kta-kmz-search-empty {
  padding: 8px 10px;
  color: var(--kta-texte-3);
  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-text, #7a5a00) !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-texte-3) !important;
}
/* ── Bandeau de cohérence échelle px/m ↔ géoréférencement GPS ── */
/* Réglages (interface.js > afficherConfig) et Export externe (sessionExporter.js > _renderExtern), rendu par
   renderBannerCoherenceEchelle : warn 5-10 %, alert 10-15 %, critical > 15 %, rien sous 5 %. */
.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: var(--kta-texte-2);
}
.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: var(--kta-accent-texte);
}
.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: var(--kta-interaction);
  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: var(--kta-texte-3);
  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: var(--kta-accent-texte);
}

/* === 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%) === */
/* Rouge clair TRANSLUCIDE, pas de fond sombre : les textes de base restent lisibles dans les deux thèmes
   sans override. Se distingue d'alert par la saturation, la bordure gauche épaisse et l'ombre. */
.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: var(--kta-texte);
}
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: var(--kta-texte-3);
}
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: var(--kta-texte-3);
}
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;
}
/* Critical thème clair : rouge clair translucide, les textes 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;
}

/* ── Accessibilité : prefers-reduced-motion — animations ramenées à 0.01ms (WCAG 2.3.3, ui.md §88.1) ── */
@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;
  }
  /* ⚠️ Seule exception : un indicateur de chargement garde un signe de vie. La rotation devient une pulsation
     d'opacité lente (aucun déplacement). La classe bat le `*` (même !important, plus spécifique) et le style
     inline. Un nouvel indicateur qui tourne rejoint cette liste ou porte .kta-charge-tourne. Le splash a sa
     propre règle (js/ktaSplash.js). */
  .kta-load-spinner,
  .kta-sortie-spinner,
  .kta-poi-photo-spinner,
  .kta-charge-tourne {
    animation-name: kta-charge-pulse !important;
    animation-duration: 2.4s !important;
    animation-timing-function: ease-in-out !important;
    animation-iteration-count: infinite !important;
  }
}
@keyframes kta-charge-pulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.35; }
}

/* ── Accessibilité : :focus-visible — contour --kta-focus au clavier seulement (ui.md §88.2) ── */
.kta-btn: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 var(--kta-focus);
  outline-offset: 2px;
  border-radius: 4px;
}


/* ── Mode incognito : classe .kta-incognito sur <html> (js/incognitoMode.js, ?incognito=1) ── */
/* Surcouches visuelles seulement (cadre violet, badge, accent #a78bfa) : aucun display/position modifié. */
/* 🩸 Cadre en ::before fixed sur <body>, pas en box-shadow : le fond opaque de #map le masquerait.
   z-index 999999 (au-dessus de tout) et pointer-events: none (ne bloque aucun clic). */
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 (incognitoMode.js) : bloc centré sous le sous-titre, width: fit-content. */
.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); }
}

/* Version du footer en violet : signal discret, sans bandeau. */
html.kta-incognito .kta-build-version,
html.kta-incognito #kta-build-version {
  color: #a78bfa !important;
}

/* Thème clair : violet plus saturé, même ::before ; la classe de thème peut être sur html ou body. */
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 » (Réglages) : accent lavande. */
.kta-cfg-incognito-btn {
  background: linear-gradient(135deg, #7c3aed 0%, #6d28d9 100%);   /* blanc ≥ 5,7:1 (2,7 sur #a78bfa) */
  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-indispo,
.kta-cfg-incognito-btn:disabled {   /* installation reliée : visible, expliqué, pas cliquable */
  background: #2a3145;
  color: #8892a4;
  cursor: not-allowed;
  box-shadow: none;
  transform: none;
}
.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 var(--kta-focus);
  outline-offset: 2px;
}

/* Variante « Quitter » : rouge/orange (perte des données de la session), même conteneur. */
.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);
}

/* ── Rapport de sortie (js/sessionReport.js) : classes charte + éléments propres (dates, aperçu, actions) ── */

.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: var(--kta-texte-2);
}
.kta-report-date {
  flex: 1;
  background: var(--kta-surface);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: var(--kta-texte);
  padding: 6px 8px;
  border-radius: 6px;
  font-size: 13px;
  font-family: inherit;
}
.kta-report-date:focus {
  outline: 2px solid var(--kta-focus);
  outline-offset: 1px;
}

.kta-report-hint {
  font-size: 11.5px;
  color: var(--kta-texte-3);
  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: var(--kta-texte-2);
  line-height: 1.7;
}
.kta-report-preview-row + .kta-report-preview-row {
  margin-top: 4px;
}
.kta-report-preview-dim {
  color: var(--kta-texte-3);
  font-style: italic;
}

.kta-report-cb-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 6px;
  font-size: 13px;
  color: var(--kta-texte-2);
  cursor: pointer;
  user-select: none;
}
.kta-report-cb-row input[type="checkbox"] {
  margin: 0;
  cursor: pointer;
}
.kta-report-cb-row:hover {
  color: var(--kta-texte);
}

.kta-report-note {
  width: 100%;
  background: var(--kta-surface);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: var(--kta-texte);
  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 var(--kta-focus);
  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: var(--kta-interaction);
  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;
  }
}

/* ── Commandes vocales (voiceCommand.js) : opt-in dans Réglages, la permission micro est sensible ── */
/* Bouton micro flottant (push-to-talk) : au-dessus des floaters, sous les modales ; pulse violet en écoute. */
.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, #7c3aed 0%, #6d28d9 100%);   /* blanc ≥ 5,7:1 (2,7 sur #a78bfa) */
  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 var(--kta-focus);
  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: var(--kta-texte-3);
  cursor: pointer;
  font-size: 18px;
  line-height: 1;
  padding: 4px 6px;
  border-radius: 4px;
  flex-shrink: 0;
}
.kta-voice-live-close:hover { color: var(--kta-texte); 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: var(--kta-texte-2);
  line-height: 1.5;
}
.kta-voice-aide-list li strong {
  color: var(--kta-accent-texte);
  display: block;
  margin-bottom: 3px;
}
.kta-voice-aide-patterns {
  font-size: 12px;
  color: var(--kta-texte-3);
  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: var(--kta-accent-texte);
}

/* Mobile : bouton à 120 px du bas (au-dessus du footer + safe-area), collé à droite (safe-area seule). */
@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;
  }
}

/* Mobile paysage : décalé à gauche pour ne pas chevaucher la sidebar droite (~52 px). */
@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));
  }
}

/* ── Calibration du Nord en 2 clics (northPicker.js) : overlay bas-centre, z-index 99998 (sous le splash) ── */
.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: var(--kta-accent-texte);
  margin-bottom: 6px;
  font-size: 14px;
}
.kta-north-picker-step {
  margin-bottom: 10px;
  line-height: 1.45;
  color: var(--kta-texte-2);
}
.kta-north-picker-step strong {
  color: var(--kta-accent-texte);
}
.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: var(--kta-sur-accent);
  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-text, #7a5a00) !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-text, #7a5a00) !important;
}

/* ── Thème clair du HOME : hiérarchie à 3 niveaux ── */
/* --kta-light-bg = wrapper neutre, --kta-light-bg-elevated = cards, --kta-light-bg-deep = header/footer.
   ⚠️ Ne pas passer cards et wrapper sur la même couleur : toute hiérarchie visuelle disparaît. */

/* 1. Wrapper HOME : neutre clair, les cards crème ressortent dessus. */
body.kta-theme-light #planLoaderBox,
html.kta-theme-light #planLoaderBox {
  background: var(--kta-light-bg, #f0e8d8) !important;
}

/* ── Le Carnet (journal.js / journalUi.js) : modale liste + fiche de sortie (sous-modale) ── */

/* ── Modale carnet ── */
.kta-jrn-boite { max-width: 640px !important; height: auto !important; max-height: 90vh !important; max-height: 90dvh !important; }
.kta-jrn-totaux {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 16px;
  font-size: 12.5px;
  color: var(--kta-texte-2);
  padding: 8px 10px;
  margin-bottom: 10px;
  background: rgba(244, 197, 66, 0.07);
  border: 1px solid rgba(244, 197, 66, 0.20);
  border-radius: 6px;
}
.kta-jrn-barre { margin-bottom: 8px; }
.kta-jrn-select {
  width: 100%;
  padding: 7px 9px;
  font-size: 12.5px;
  color: var(--kta-texte);
  background: rgba(140, 180, 255, 0.08);
  border: 1px solid rgba(140, 180, 255, 0.25);
  border-radius: 6px;
}
.kta-jrn-liste { max-height: 56vh; max-height: 56dvh; overflow-y: auto; }
.kta-jrn-row {
  display: flex;
  flex-direction: column;
  gap: 3px;
  width: 100%;
  text-align: left;
  padding: 9px 12px;
  margin-bottom: 6px;
  background: rgba(140, 180, 255, 0.06);
  border: 1px solid rgba(140, 180, 255, 0.18);
  border-radius: 6px;
  cursor: pointer;
  min-height: 44px;
}
.kta-jrn-row:hover { background: rgba(140, 180, 255, 0.13); border-color: rgba(140, 180, 255, 0.35); }
.kta-jrn-row-date { font-size: 12.5px; color: var(--kta-accent-texte); }
.kta-jrn-row-plan { font-size: 12.5px; color: var(--kta-texte); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kta-jrn-row-meta { font-size: 11.5px; color: var(--kta-texte-3); }
.kta-jrn-row-note { font-size: 11.5px; color: var(--kta-texte-2); font-style: italic; }

/* ── Fiche de sortie (sous-modale) ── */
.kta-jrn-fiche-boite { max-width: 560px !important; height: auto !important; max-height: 90vh !important; max-height: 90dvh !important; }
.kta-jrn-fiche-date { font-size: 12.5px; color: var(--kta-accent-texte); margin-bottom: 10px; }
.kta-jrn-tag {
  font-size: 10.5px;
  color: var(--kta-interaction);
  background: rgba(140, 180, 255, 0.12);
  border-radius: 4px;
  padding: 1px 5px;
  margin-left: 4px;
}
.kta-jrn-metrics {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
  margin-bottom: 10px;
}
.kta-jrn-metric {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 8px 4px;
  background: rgba(140, 180, 255, 0.06);
  border: 1px solid rgba(140, 180, 255, 0.18);
  border-radius: 6px;
}
.kta-jrn-metric-val { font-size: 14px; color: var(--kta-texte); font-weight: 600; text-align: center; }
.kta-jrn-metric-lab { font-size: 10.5px; color: var(--kta-texte-3); text-align: center; }
.kta-jrn-chips { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 10px; }
.kta-jrn-chip {
  font-size: 11.5px;
  color: var(--kta-texte-2);
  background: rgba(140, 180, 255, 0.08);
  border-radius: 4px;
  padding: 2px 7px;
}
.kta-jrn-trace-wrap {
  background: rgba(10, 13, 24, 0.55);
  border: 1px solid rgba(140, 180, 255, 0.18);
  border-radius: 6px;
  padding: 8px;
  margin-bottom: 10px;
}
.kta-jrn-trace { display: block; width: 100%; height: 150px; }
.kta-jrn-photos { margin-bottom: 10px; }
.kta-jrn-photos-lab { font-size: 11.5px; color: var(--kta-texte-3); margin-bottom: 5px; }
.kta-jrn-photos-grid { display: flex; flex-wrap: wrap; gap: 5px; }
.kta-jrn-photo {
  width: 62px;
  height: 62px;
  border-radius: 5px;
  overflow: hidden;
  background: rgba(140, 180, 255, 0.08);
}
.kta-jrn-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.kta-jrn-photo-vide {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  color: var(--kta-texte-3);
}
.kta-jrn-note-lab { display: block; font-size: 12px; color: var(--kta-texte-2); margin-bottom: 4px; }
.kta-jrn-note {
  width: 100%;
  /* 🩸 Sans ça, le champ déborde : <textarea> est en content-box et aucun reset global ne le rattrape. */
  box-sizing: border-box;
  padding: 8px 10px;
  font-size: 12.5px;
  font-family: inherit;
  color: var(--kta-texte);
  background: rgba(140, 180, 255, 0.06);
  border: 1px solid rgba(140, 180, 255, 0.22);
  border-radius: 6px;
  resize: vertical;
}
.kta-jrn-fiche-actions { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 10px; }
.kta-jrn-danger { color: var(--kta-erreur) !important; border-color: rgba(255, 140, 140, 0.35) !important; }

/* Mobile : métriques sur 2 colonnes (4 colonnes illisibles ≤ 640 px) */
@media (max-width: 640px) {
  .kta-jrn-metrics { grid-template-columns: repeat(2, 1fr); }
  .kta-jrn-trace { height: 120px; }
}

/* ── Thème clair ── */
html.kta-theme-light .kta-jrn-row-plan,
html.kta-theme-light .kta-jrn-metric-val,
html.kta-theme-light .kta-jrn-note { color: var(--kta-light-text, #1a1f2e); }
html.kta-theme-light .kta-jrn-row-note,
html.kta-theme-light .kta-jrn-chip,
html.kta-theme-light .kta-jrn-note-lab,
html.kta-theme-light .kta-jrn-totaux { color: var(--kta-texte-2); }
html.kta-theme-light .kta-jrn-trace-wrap { background: rgba(255, 255, 255, 0.55); }

/* Distinction sortie terrain / travail sur plan */
.kta-jrn-totaux-bureau { color: var(--kta-texte-3); font-style: italic; }
.kta-jrn-row-bureau { background: rgba(140, 180, 255, 0.03); border-style: dashed; }
.kta-jrn-row-bureau .kta-jrn-row-date { color: var(--kta-texte-3); }
.kta-jrn-bureau-toggle {
  display: block;
  width: 100%;
  text-align: left;
  margin: 10px 0 6px;
  padding: 7px 10px;
  font-size: 12px;
  color: var(--kta-texte-3);
  background: none;
  border: 1px dashed rgba(140, 180, 255, 0.22);
  border-radius: 6px;
  cursor: pointer;
  min-height: 36px;
}
.kta-jrn-bureau-toggle:hover { color: var(--kta-texte-2); border-color: rgba(140, 180, 255, 0.4); }
html.kta-theme-light .kta-jrn-bureau-toggle:hover { color: #1a1f2e; }

/* Onglet Récits (Mode Histoire au HOME) */
.kta-jrn-onglets { display: flex; gap: 6px; margin-bottom: 10px; }
.kta-jrn-onglet {
  flex: 1 1 auto;
  padding: 8px 10px;
  font-size: 12.5px;
  color: var(--kta-texte-3);
  background: rgba(140, 180, 255, 0.06);
  border: 1px solid rgba(140, 180, 255, 0.18);
  border-radius: 6px;
  cursor: pointer;
  min-height: 40px;
}
.kta-jrn-onglet-actif {
  color: var(--kta-accent-texte);
  background: rgba(244, 197, 66, 0.10);
  border-color: rgba(244, 197, 66, 0.32);
}
.kta-jrn-recit-rendu {
  font-size: 13px;
  color: var(--kta-texte-2);
  line-height: 1.55;
  max-height: 46vh;
  max-height: 46dvh;
  overflow-y: auto;
  padding: 10px 12px;
  background: rgba(140, 180, 255, 0.05);
  border: 1px solid rgba(140, 180, 255, 0.16);
  border-radius: 6px;
}
.kta-jrn-recit-rendu h1, .kta-jrn-recit-rendu h2, .kta-jrn-recit-rendu h3 { color: var(--kta-texte); }
.kta-jrn-recit-pdfmeta { font-size: 11.5px; color: var(--kta-texte-3); margin: 10px 0 5px; }
.kta-jrn-recit-iframe {
  width: 100%;
  height: 48vh;
  height: 48dvh;
  border: 1px solid rgba(140, 180, 255, 0.18);
  border-radius: 6px;
  background: var(--kta-fond);
}
html.kta-theme-light .kta-jrn-recit-rendu { color: var(--kta-light-text, #1a1f2e); background: rgba(255,255,255,0.5); }

/* Mode Histoire : liste de documents PDF (N par plan) */
.kta-histoire-pdf-docs {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 8px 10px 0;
}
.kta-histoire-doc {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  max-width: 100%;
  padding: 6px 10px;
  font-size: 12px;
  color: var(--kta-texte-2);
  background: rgba(140, 180, 255, 0.07);
  border: 1px solid rgba(140, 180, 255, 0.20);
  border-radius: 6px;
  cursor: pointer;
  min-height: 36px;
}
.kta-histoire-doc:hover { border-color: rgba(140, 180, 255, 0.42); }
.kta-histoire-doc-actif {
  color: var(--kta-accent-texte);
  background: rgba(244, 197, 66, 0.10);
  border-color: rgba(244, 197, 66, 0.34);
}
.kta-histoire-doc-nom {
  max-width: 190px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.kta-histoire-doc-meta { color: var(--kta-texte-3); font-size: 11px; }

/* Documents PDF dans la fiche récit du carnet */
.kta-jrn-recit-docs { margin-top: 10px; }
.kta-jrn-doc-row { display: flex; gap: 5px; margin-bottom: 5px; }
.kta-jrn-doc-open {
  flex: 1 1 auto;
  text-align: left;
  padding: 7px 10px;
  font-size: 12.5px;
  color: var(--kta-texte-2);
  background: rgba(140, 180, 255, 0.06);
  border: 1px solid rgba(140, 180, 255, 0.18);
  border-radius: 6px;
  cursor: pointer;
  min-height: 38px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.kta-jrn-doc-open:hover { border-color: rgba(140, 180, 255, 0.4); }
.kta-jrn-doc-ko { color: var(--kta-texte-3); font-size: 11px; }
.kta-jrn-doc-del {
  flex: 0 0 auto;
  padding: 0 10px;
  background: none;
  border: 1px solid rgba(255, 140, 140, 0.30);
  border-radius: 6px;
  cursor: pointer;
  min-height: 38px;
}
html.kta-theme-light .kta-histoire-doc,
html.kta-theme-light .kta-jrn-doc-open { color: var(--kta-light-text, #1a1f2e); }

/* ── Le Carnet sur grand écran (≥ 1024 px, seuil de Réglages) : mobile inchangé ── */
@media (min-width: 1024px) {
  /* Modale carnet : la liste des sorties respirait mal en 640 px */
  .kta-jrn-boite { max-width: 900px !important; }
  .kta-jrn-liste { max-height: 62vh; max-height: 62dvh; }
  .kta-jrn-metrics { grid-template-columns: repeat(4, 1fr); }
  /* Fiche de sortie (mini-tracé + vignettes) */
  .kta-jrn-fiche-boite { max-width: 760px !important; }
  .kta-jrn-trace { height: 220px; }
  .kta-jrn-photo { width: 84px; height: 84px; }

  /* Fiche récit avec PDF ouvert : pleine largeur, 2 colonnes ; sans PDF, largeur de lecture. */
  .kta-jrn-recit-boite.kta-jrn-recit-avecpdf {
    max-width: min(1500px, 95vw) !important;
    width: 95vw;
    height: 92vh !important;
    height: 92dvh !important;
    max-height: 92vh !important;
    max-height: 92dvh !important;
    display: flex;
    flex-direction: column;
  }
  /* Colonnes en flex:1 : la hauteur du header de modale n'est pas fiable (titre long, zoom). */
  .kta-jrn-recit-avecpdf .kta-jrn-recit-split {
    flex: 1 1 auto;
    min-height: 0;
    display: grid;
    grid-template-columns: minmax(300px, 30%) 1fr;
    gap: 16px;
    align-items: stretch;
    overflow: hidden;
  }
  .kta-jrn-recit-avecpdf .kta-jrn-recit-col-gauche {
    height: 100%;
    overflow-y: auto;
    padding-right: 4px;
  }
  .kta-jrn-recit-avecpdf .kta-jrn-recit-col-droite {
    height: 100%;
    display: flex;
    flex-direction: column;
    min-width: 0;
  }
  .kta-jrn-recit-avecpdf .kta-jrn-recit-iframe { flex: 1 1 auto; height: auto; }
  .kta-jrn-recit-avecpdf .kta-jrn-recit-rendu { max-height: none; }

  /* Sans PDF : simple confort de lecture supplémentaire */
  .kta-jrn-recit-boite { max-width: 820px !important; }
  .kta-jrn-recit-rendu { max-height: 52vh; max-height: 52dvh; }

  /* Mode Histoire (écran plan) : la visionneuse méritait la hauteur dispo */
  .kta-histoire-doc-nom { max-width: 320px; }
}

/* Mode Histoire sur grand écran : la visionneuse PDF prend la place. */
@media (min-width: 1024px) {
  .kta-histoire-boite { max-width: 1400px; height: 92vh; height: 92dvh; }
}

/* ── HOME : recherche dans l'en-tête (pilule centrée max 560 px ; mobile : 2e ligne pleine largeur) ── */
/* Le scan ne part qu'à la validation (Entrée ou loupe), jamais à la frappe. */
.loader-search-wrap {
  flex: 1 1 auto;
  display: flex;
  justify-content: center;
  min-width: 0;
  padding: 0 18px;
}
.loader-search-bar {
  display: flex;
  align-items: center;
  gap: 6px;
  width: min(560px, 100%);
  min-width: 0;
}
.loader-search-input {
  flex: 1 1 auto;
  min-width: 0;
  padding: 9px 18px;
  font-size: 13px;
  font-family: inherit;
  color: var(--kta-texte);
  background: rgba(140, 180, 255, 0.07);
  border: 1px solid rgba(140, 180, 255, 0.20);
  border-radius: 999px;
  min-height: 40px;
  transition: border-color 0.15s, background 0.15s;
}
.loader-search-input::placeholder { color: var(--kta-texte-3); }
.loader-search-input:focus {
  outline: none;
  border-color: rgba(140, 180, 255, 0.5);
  background: rgba(140, 180, 255, 0.11);
}
.loader-search-btn {
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  font-size: 15px;
  color: var(--kta-texte-2);
  background: rgba(140, 180, 255, 0.10);
  border: 1px solid rgba(140, 180, 255, 0.25);
  border-radius: 50%;
  cursor: pointer;
}
.loader-search-btn:hover { border-color: rgba(140, 180, 255, 0.5); color: var(--kta-texte); }
html.kta-theme-light .loader-search-input { color: var(--kta-light-text, #1a1f2e); }
html.kta-theme-light .loader-search-input::placeholder { color: var(--kta-texte-3); }
@media (max-width: 1023px) {
  /* Le header s'enroule : logo + chips en 1re ligne, recherche pleine largeur en 2e ligne. */
  .loader-header { flex-wrap: wrap; }
  .loader-search-wrap {
    order: 3;
    flex-basis: 100%;
    padding: 10px 0 0;
  }
  .loader-search-bar { width: 100%; }
}

/* ── HOME : habillage en cards (rayon 12, pas 16 px, bordure rgba(140,180,255,.12)) ; IDs et JS inchangés ── */

/* Colonnes en cards (PC et mobile) */
.loader-col {
  background: rgba(22, 27, 43, 0.72);
  border: 1px solid rgba(140, 180, 255, 0.12);
  border-radius: 12px;
  padding: 14px;
}
/* Colonne plans vide (bibliothèque vide) : pas de coquille vide. Classe posée par homeLoader.js > refreshPlansList.
   🩸 Jamais :has(#myPlansBox[style*="none"]) : Safari ne réévalue pas ce :has quand seul l'attribut style change ;
   au 1er lancement (liste dessinée vide, puis plans de l'index), la colonne restait à 0 px jusqu'au rechargement. */
.loader-col-plans.kta-plans-vide { display: none; }

/* Titres de section unifiés */
.loader-section-head {
  font-size: 12.5px;
  letter-spacing: 0.3px;
  margin: 0 0 10px;
  padding: 0 0 8px;
  border-bottom: 1px solid rgba(140, 180, 255, 0.12);
}
#myPlansBox .loader-section-head:first-child,
.kta-osm-home-box .loader-section-head { margin-top: 0; }
.loader-tools-head { margin-top: 16px; }

/* La box OSM colle aux bords de sa card (la carte est le contenu roi) */
.loader-col-osm { padding: 14px 14px 10px; }
.kta-osm-home-box { margin-bottom: 0; }

/* Grille d'outils 2×2 */
.loader-secondary-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-top: 8px;
  padding: 0;
}
.loader-secondary-actions .loader-btn-secondary {
  min-height: 58px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 8px 6px;
  font-size: 12px;
  line-height: 1.3;
  border-radius: 10px;
  /* Un libellé trop long se replie : sans min-width 0, le contenu dicte la largeur de la cellule. */
  min-width: 0;
  overflow-wrap: anywhere;
}
/* Nombre impair d'outils : le dernier prend toute la largeur (pas d'orphelin à côté d'une cellule vide).
   ⚠️ Grille fixe à 2 colonnes partout : avec auto-fit, cette règle casserait dès 3 colonnes. */
.loader-secondary-actions .loader-btn-secondary:nth-child(odd):last-child {
  grid-column: 1 / -1;
}

/* Bandeau profil + Reprendre : mêmes tokens card */
.kta-loader-profile-bar { border-radius: 12px; }
.loader-btn-resume { border-radius: 12px; }

/* Thème clair — cards lisibles */
html.kta-theme-light .loader-col,
body.kta-theme-light .loader-col {
  background: rgba(255, 255, 255, 0.55);
  border-color: rgba(20, 30, 50, 0.14);
}
html.kta-theme-light .loader-section-head { border-bottom-color: rgba(20, 30, 50, 0.14); }

/* ── Mode OSM : recherche locale (plans géoréférencés + POI) ── */
/* Barre en bloc pleine largeur entre le bandeau et la carte. */
.kta-osm-home-search {
  position: relative;
  display: block;
  width: 100%;
  margin: 6px 0 4px;
}
.kta-osm-home-search input {
  width: 100%;
  display: block;
  padding: 5px 14px;
  font-size: 12px;
  font-family: inherit;
  color: #e8eaf0;
  background: rgba(10, 13, 24, 0.85);
  border: 1px solid rgba(140, 180, 255, 0.25);
  border-radius: 999px;
  min-height: 30px;
}
/* En mode OSM (fullscreen), la barre reprend de l'ampleur */
.kta-osm-home-fullscreen-active .kta-osm-home-search input {
  min-height: 36px;
  font-size: 13px;
}
.kta-osm-home-search input::placeholder { color: var(--kta-texte-3); }
.kta-osm-home-search input:focus { outline: none; border-color: rgba(140, 180, 255, 0.55); }
.kta-osm-home-search-results {
  /* position:fixed (échappe au clipping) ; top, left et width posés EN JS depuis le rect de l'input.
     ⚠️ Aucune règle horizontale ici : le JS est la seule source de vérité. */
  position: fixed;
  max-height: 46vh;
  max-height: 46dvh;
  overflow-y: auto;
  background: #121726;
  border: 1px solid rgba(140, 180, 255, 0.25);
  border-radius: 10px;
  z-index: 100000;            /* au-dessus du mode OSM fullscreen (9999) et du ✕ (10001) */
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
}
.kta-osm-search-row {
  display: block;
  width: 100%;
  text-align: left;
  padding: 9px 12px;
  font-size: 12.5px;
  color: var(--kta-texte-2);
  background: none;
  border: none;
  border-bottom: 1px solid rgba(140, 180, 255, 0.08);
  cursor: pointer;
}
.kta-osm-search-row:hover { background: rgba(140, 180, 255, 0.10); }
.kta-osm-search-row b { color: var(--kta-texte); }
.kta-osm-search-badge {
  float: right;
  font-size: 10.5px;
  color: var(--kta-interaction);
  background: rgba(140, 180, 255, 0.12);
  border-radius: 4px;
  padding: 1px 6px;
  max-width: 40%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.kta-osm-search-empty {
  padding: 12px;
  font-size: 12px;
  color: var(--kta-texte-3);
  font-style: italic;
  text-align: center;
}
html.kta-theme-light .kta-osm-home-search input { color: var(--kta-light-text, #1a1f2e); background: rgba(255,255,255,0.9); }
html.kta-theme-light .kta-osm-home-search-results { background: #f4ecd8; }
html.kta-theme-light .kta-osm-search-row { color: var(--kta-texte-2); }

/* ── Mode OSM : multi-plans — styles .kta-osm-multi-* réutilisés par la modale ≡ (aucun panneau flottant) ── */
.kta-osm-filters-boite { max-width: 480px !important; height: auto !important; max-height: 88vh !important; max-height: 88dvh !important; }
.kta-osm-filters-hint { font-size: 11.5px; color: var(--kta-texte-3); margin: 0 0 10px; line-height: 1.5; }
.kta-osm-filters-add {
  width: 100%;
  background: #0f1420;
  color: #8cb4ff;
  border: 1px solid rgba(140, 180, 255, 0.25);
  border-radius: 6px;
  padding: 7px 8px;
  font-size: 12px;
  margin-bottom: 8px;
}
html.kta-theme-light .kta-osm-filters-add { background: rgba(255,255,255,0.8); color: #2d5aa8; }
.kta-osm-multi-row {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 2px;
  border-top: 1px solid rgba(140, 180, 255, 0.08);
}
.kta-osm-multi-ordre { display: flex; flex-direction: column; gap: 1px; }
.kta-osm-multi-btn {
  width: 20px;
  height: 15px;
  display: grid;
  place-items: center;
  background: rgba(140, 180, 255, 0.10);
  border: 1px solid rgba(140, 180, 255, 0.2);
  border-radius: 4px;
  color: var(--kta-interaction);
  font-size: 8px;
  cursor: pointer;
  padding: 0;
}
.kta-osm-multi-btn:disabled { opacity: 0.25; cursor: default; }
.kta-osm-multi-x { width: 22px; height: 22px; font-size: 10px; color: var(--kta-erreur); border-color: rgba(255,140,140,0.3); }
.kta-osm-multi-vide { width: 22px; height: 22px; background: none; border: none; }
.kta-osm-multi-nom {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 11.5px;
  color: var(--kta-texte);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.kta-osm-multi-op { width: 64px; margin: 0; }
html.kta-theme-light .kta-osm-home-multi { background: rgba(244, 236, 216, 0.95); }
html.kta-theme-light .kta-osm-multi-nom { color: #1a1f2e; }

/* ── Chips de filtrage par plan (multi-plans) ── */
.kta-osm-multi-cats {
  flex-basis: 100%;
  display: flex;
  /* Sans wrap, les chips libellés débordent du cadre. */
  flex-wrap: wrap;
  min-width: 0;
  max-width: 100%;
  gap: 4px;
  padding: 3px 0 0 26px;   /* aligné sous le nom, après les ▲▼ */
}
.kta-osm-multi-row { flex-wrap: wrap; }
.kta-osm-multi-cat {
  width: 26px;
  height: 20px;
  display: grid;
  place-items: center;
  font-size: 11px;
  /* 🩸 Sans color, un <button> prend la couleur UA (noir sur desktop) : libellés illisibles. */
  color: var(--kta-texte-2);
  background: none;
  border: 1px solid rgba(140, 180, 255, 0.15);
  border-radius: 4px;
  cursor: pointer;
  opacity: 0.35;
  filter: grayscale(0.8);
  padding: 0;
}
.kta-osm-multi-cat.active { color: var(--kta-texte); }
html.kta-theme-light .kta-osm-multi-cat { color: var(--kta-texte-2); }
html.kta-theme-light .kta-osm-multi-cat.active { color: #1a1f2e; }
.kta-osm-multi-cat.active {
  opacity: 1;
  filter: none;
  background: rgba(140, 180, 255, 0.12);
  border-color: rgba(140, 180, 255, 0.35);
}

/* ── PC : bande profil + Reprendre amincie (hauteur pour la Vue OSM) ; mobile inchangé (52 px tactiles) ── */
@media (min-width: 1024px) {
  .kta-loader-top-row { margin-bottom: 10px; }
  .kta-loader-top-row .kta-loader-profile-bar { padding: 5px 12px; gap: 10px; }
  .kta-loader-top-row .kta-loader-profile-avatar-wrap { width: 36px; height: 36px; }
  .kta-loader-top-row .kta-loader-profile-stats > * { padding: 3px 8px; font-size: 11px; }
  .kta-loader-top-row #resumeBox .loader-btn-resume { padding: 8px 22px; font-size: 13.5px; }
  /* 🩸 Pas de plancher en vh ici : à spécificité égale, il écraserait le min-height de la règle de base
     et ferait déborder le widget OSM sur le footer. */
}

/* modale ≡ enrichie : sections + chips libellés + tags */
.kta-osm-filters-sect {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.4px;
  color: var(--kta-texte-3);
  text-transform: uppercase;
  margin: 12px 0 6px;
  padding-bottom: 4px;
  border-bottom: 1px solid rgba(140, 180, 255, 0.10);
}
.kta-osm-filters-sect:first-of-type { margin-top: 0; }
/* Chips avec libellé (globaux ET par plan) : largeur auto, texte à côté */
.kta-osm-multi-cat.kta-osm-cat-libelle {
  width: auto;
  height: 24px;
  padding: 0 8px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
}
.kta-osm-cat-libelle span { font-size: 10.5px; color: inherit; }
.kta-osm-filters-globaux { padding: 0; flex-wrap: wrap; display: flex; gap: 5px; }
.kta-osm-filters-tags { display: flex; flex-wrap: wrap; gap: 5px; }

/* la modale ≡ ne déborde jamais horizontalement */
.kta-osm-filters-boite .kta-readme-modal-corps { overflow-x: hidden; }
.kta-osm-filters-tags,
.kta-osm-filters-globaux { flex-wrap: wrap; min-width: 0; max-width: 100%; }

/* Footer HOME repliable (flèche classique, état persisté) */
.kta-footer-toggle {
  display: block;
  margin: 4px auto 0;   /* 8→4, le footer doit tenir dans l'écran */
  padding: 3px 18px;
  font-size: 11px;
  color: var(--kta-texte-3);
  background: none;
  border: 1px solid rgba(140, 180, 255, 0.14);
  border-radius: 999px;
  cursor: pointer;
  min-height: 24px;
}
.kta-footer-toggle:hover { color: var(--kta-texte-2); border-color: rgba(140, 180, 255, 0.35); }
html.kta-theme-light .kta-footer-toggle { color: var(--kta-texte-3); }

/* Générateur : liste des PDF Histoire multiples */
.kta-planner-hist-liste { margin-top: 6px; display: flex; flex-direction: column; gap: 4px; }
.kta-planner-hist-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 5px 8px;
  background: rgba(140, 180, 255, 0.06);
  border: 1px solid rgba(140, 180, 255, 0.15);
  border-radius: 6px;
  font-size: 12px;
}
.kta-planner-hist-nom { color: var(--kta-texte-2); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kta-planner-hist-nom em { color: var(--kta-texte-3); font-size: 10.5px; }
html.kta-theme-light .kta-planner-hist-nom { color: var(--kta-texte-2); }

/* ── Assistant du générateur (wizard) ── */
/* En mode assistant : une page à la fois → on neutralise la grille 2 colonnes */
#kta-planner-corps.kta-wiz-actif { display: block !important; }
#kta-planner-corps.kta-wiz-actif .kta-aide-section { max-width: 640px; margin-left: auto; margin-right: auto; }

#kta-wiz-steps {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  margin: 10px 0 14px;
  flex-wrap: wrap;
}
.kta-wiz-step {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 12px;
  font-weight: 600;
  color: var(--kta-texte-3);
  background: rgba(140, 180, 255, 0.06);
  border: 1px solid rgba(140, 180, 255, 0.2);
  cursor: pointer;
  padding: 0;
}
.kta-wiz-step:disabled { opacity: 0.35; cursor: default; }
.kta-wiz-step.kta-wiz-fait { color: var(--kta-interaction); border-color: rgba(140, 180, 255, 0.45); }
.kta-wiz-step.kta-wiz-passe { color: var(--kta-texte-3); border-style: dashed; }
.kta-wiz-step.kta-wiz-actuel {
  color: var(--kta-sur-accent);
  background: #f4c542;
  border-color: #f4c542;
}
.kta-wiz-lien { width: 14px; height: 1px; background: rgba(140, 180, 255, 0.25); }

/* Convention installeur : Annuler seul à gauche, navigation à droite (Générer tout à droite au Résumé).
   Par flex order + margin auto : le DOM ne bouge pas. Wizard OFF : nav masquée par le JS. */
#kta-wiz-nav { display: flex; gap: 8px; order: 2; }
#kta-planner-corps.kta-wiz-actif .kta-conv-actions { justify-content: flex-start; }
#kta-planner-corps.kta-wiz-actif .kta-conv-actions #kta-planner-annuler { order: 0; margin-right: auto; }
#kta-planner-corps.kta-wiz-actif .kta-conv-actions #kta-planner-generer { order: 3; }

.kta-wiz-resume-liste { display: flex; flex-direction: column; gap: 5px; margin-top: 8px; }
.kta-wiz-resume-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 10px;
  background: rgba(140, 180, 255, 0.05);
  border: 1px solid rgba(140, 180, 255, 0.14);
  border-radius: 6px;
  font-size: 12.5px;
}
.kta-wiz-resume-row.kta-wiz-manquant { border-color: rgba(255, 140, 140, 0.5); background: rgba(255, 140, 140, 0.07); }
.kta-wiz-resume-nom { flex: 1 1 auto; color: var(--kta-texte); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kta-wiz-resume-etat { color: var(--kta-texte-3); font-size: 11px; flex: 0 0 auto; }
.kta-wiz-manquant .kta-wiz-resume-etat { color: var(--kta-erreur); font-weight: 600; }
.kta-wiz-resume-warns {
  margin-top: 10px;
  padding: 8px 10px;
  border: 1px solid rgba(244, 197, 66, 0.35);
  background: rgba(244, 197, 66, 0.07);
  border-radius: 6px;
  font-size: 12px;
  color: #e8d5a0;
  line-height: 1.6;
}
#kta-wiz-toggle { margin-left: 8px; }
html.kta-theme-light .kta-wiz-resume-nom { color: #1a1f2e; }
html.kta-theme-light .kta-wiz-resume-warns { color: #6a5a1e; }

/* Résultats live de la barre du HOME : comme la recherche OSM (fixed, top/left/width posés en JS). */
.loader-search-results {
  position: fixed;
  max-height: 46vh;
  max-height: 46dvh;
  overflow-y: auto;
  background: #121726;
  border: 1px solid rgba(140, 180, 255, 0.25);
  border-radius: 10px;
  z-index: 100000;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
}
.loader-search-row {
  display: flex;
  align-items: center;
  gap: 6px;
  width: 100%;
  text-align: left;
  padding: 9px 12px;
  font-size: 12.5px;
  color: var(--kta-texte-2);
  background: none;
  border: none;
  border-bottom: 1px solid rgba(140, 180, 255, 0.08);
  cursor: pointer;
  min-height: 38px;
}
.loader-search-row:hover { background: rgba(140, 180, 255, 0.10); }
.loader-search-row b { color: var(--kta-texte); }
.loader-search-badge {
  margin-left: auto;
  font-size: 10.5px;
  color: var(--kta-interaction);
  background: rgba(140, 180, 255, 0.12);
  border-radius: 4px;
  padding: 1px 6px;
  max-width: 40%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.loader-search-tous { justify-content: center; color: var(--kta-interaction); font-weight: 600; border-bottom: none; }
.loader-search-vide { padding: 12px; font-size: 12px; color: var(--kta-texte-3); font-style: italic; text-align: center; }
html.kta-theme-light .loader-search-results { background: #f4ecd8; }
html.kta-theme-light .loader-search-row { color: var(--kta-texte-2); }
html.kta-theme-light .loader-search-row b { color: #1a1f2e; }

/* ── Fond d'écran du HOME ── */
/* 🩸 Porté par #planLoaderOverlay, PAS par #planLoaderBox : l'overlay (fixed, inset 0, overflow-y auto) est
   le scroller, la box est le contenu défilé (2000-3000 px en portrait). Sur la box, cover se calculerait sur
   cette hauteur : image zoomée qui défile. Sur l'overlay, le fond reste fixe sans background-attachment.
   Voile = premier calque de background : --kta-wall-img (Blob URL) et --kta-wall-a (alpha 0 → 1), posés par
   homeProfile.js ; --kta-wall-rgb vient du thème (la bascule clair/sombre réajuste le voile sans JS).
   ⚠️ Spécificité : les shorthands !important du thème clair sur l'overlay et la box sont en (1,1,1). Les
   règles claires ci-dessous, préfixées body.kta-theme-light, montent à (1,2,1) — sinon background-image: none.
   .kta-has-wall reste sur la box (blocs de contraste scopés dessus) ; l'overlay reçoit .kta-has-wall-bg (JS). */
#planLoaderOverlay.kta-has-wall-bg,
body.kta-theme-light #planLoaderOverlay.kta-has-wall-bg {
  background-image:
    linear-gradient(rgba(var(--kta-wall-rgb, 26,31,46), var(--kta-wall-a, .55)),
                    rgba(var(--kta-wall-rgb, 26,31,46), var(--kta-wall-a, .55))),
    var(--kta-wall-img) !important;
  /* cover (rogne) ou contain (image entière). Sous contain, la couleur de
     fond reste celle du thème : les bandes se lisent comme le fond de l'app. */
  background-size: var(--kta-wall-size, cover) !important;
  background-position: var(--kta-wall-pos, center center) !important;
  background-repeat: no-repeat !important;
}
#planLoaderOverlay.kta-has-wall-bg          { --kta-wall-rgb: 26, 31, 46; }
body.kta-theme-light #planLoaderOverlay.kta-has-wall-bg { --kta-wall-rgb: 201, 184, 143; }

/* La box doit devenir TRANSPARENTE, sinon elle masque l'overlay : la sombre bat la base (0,1,0), la claire
   doit atteindre (1,2,1) pour battre le shorthand du thème clair. */
#planLoaderBox.kta-has-wall,
body.kta-theme-light #planLoaderBox.kta-has-wall {
  background: transparent !important;
}

/* Aperçu dans la modale Profil : même rendu que le vrai fond, en petit. */
.kta-wall-preview {
  width: 100%;
  height: 110px;
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,0.10);
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  background-color: var(--kta-surface);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  color: var(--kta-texte-3);
}
.kta-wall-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 8px; }
.kta-wall-voile-row { display: flex; align-items: center; gap: 10px; margin-top: 10px; }
.kta-wall-voile-row input[type="range"] { flex: 1; min-width: 0; }
.kta-wall-voile-val { font-size: 12px; color: var(--kta-texte-3); min-width: 40px; text-align: right; }

/* Bloc « fond d'écran » de la modale Profil, calqué sur .kta-profile-details-stats. */
.kta-profile-details-section {
  background: rgba(140,180,255,0.05);
  border: 1px solid rgba(140,180,255,0.18);
  border-radius: 10px;
  padding: 14px;
  margin-top: 14px;
}
.kta-profile-details-section-titre {
  font-size: 13px;
  font-weight: 700;
  color: var(--kta-accent-texte);
  margin-bottom: 10px;
}
html.kta-theme-light .kta-profile-details-section {
  background: rgba(140,180,255,0.10);
}

/* Cadrage --kta-wall-pos (Remplir : ce qui reste visible ; Image entière : où l'image se pose) : appliqué
   dans le bloc de #planLoaderOverlay, pas sur la box (qui n'a plus d'image). */

/* ── Fond d'écran : lisibilité du header et du bandeau profil ── */
/* Posés à même l'image, ils reçoivent leur propre fond semi-opaque (scopé .kta-has-wall). */
#planLoaderBox.kta-has-wall .loader-header {
  background: rgba(10, 13, 24, 0.72);
  border-radius: 10px;
  padding: 8px 10px;
  box-shadow: 0 2px 14px rgba(0, 0, 0, 0.35);
}
/* ⚠️ Le halo doré du bandeau profil vit dans son background : un aplat l'écraserait. On EMPILE (dégradé
   au-dessus, aplat opaque en dernière couche) et le halo est renforcé, il lutte contre la photo. */
#planLoaderBox.kta-has-wall .kta-loader-profile-bar {
  background:
    linear-gradient(135deg, rgba(244,197,66,0.16), rgba(140,180,255,0.10)),
    rgba(10, 13, 24, 0.78) !important;
  border-color: rgba(244,197,66,0.42) !important;
  box-shadow: 0 2px 14px rgba(0,0,0,0.35), 0 0 0 1px rgba(244,197,66,0.10);
}
/* Le hover d'origine n'a pas de !important : rejoué, sinon battu par la règle ci-dessus. */
#planLoaderBox.kta-has-wall .kta-loader-profile-bar:hover,
#planLoaderBox.kta-has-wall .kta-loader-profile-bar:focus-visible {
  background:
    linear-gradient(135deg, rgba(244,197,66,0.26), rgba(140,180,255,0.16)),
    rgba(10, 13, 24, 0.80) !important;
  border-color: rgba(244,197,66,0.60) !important;
}
/* Ombre portée : titre et icônes lisibles même voile à 0 sur une photo claire. */
#planLoaderBox.kta-has-wall .loader-titre-nom,
#planLoaderBox.kta-has-wall .loader-titre-tagline,
#planLoaderBox.kta-has-wall .kta-loader-profile-surnom {
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.75);
}
#planLoaderBox.kta-has-wall .loader-btn-help {
  background: rgba(10, 13, 24, 0.55);
  border-radius: 8px;
}
/* Thème clair : voile local clair, texte sombre. */
body.kta-theme-light #planLoaderBox.kta-has-wall .loader-header {
  background: rgba(244, 236, 216, 0.82) !important;
  box-shadow: 0 2px 14px rgba(0, 0, 0, 0.18);
}
/* Thème clair : même empilement sur aplat beige, alpha du dégradé doré relevé. */
body.kta-theme-light #planLoaderBox.kta-has-wall .kta-loader-profile-bar {
  background:
    linear-gradient(135deg, rgba(244,197,66,0.30), rgba(140,180,255,0.12)),
    rgba(244, 236, 216, 0.86) !important;
  border-color: rgba(196,150,20,0.50) !important;
  box-shadow: 0 2px 14px rgba(0,0,0,0.18);
}
body.kta-theme-light #planLoaderBox.kta-has-wall .kta-loader-profile-bar:hover,
body.kta-theme-light #planLoaderBox.kta-has-wall .kta-loader-profile-bar:focus-visible {
  background:
    linear-gradient(135deg, rgba(244,197,66,0.42), rgba(140,180,255,0.18)),
    rgba(244, 236, 216, 0.88) !important;
  border-color: rgba(196,150,20,0.70) !important;
}
body.kta-theme-light #planLoaderBox.kta-has-wall .loader-titre-nom,
body.kta-theme-light #planLoaderBox.kta-has-wall .loader-titre-tagline,
body.kta-theme-light #planLoaderBox.kta-has-wall .kta-loader-profile-surnom {
  text-shadow: 0 1px 2px rgba(255, 255, 255, 0.6);
}
body.kta-theme-light #planLoaderBox.kta-has-wall .loader-btn-help {
  background: rgba(244, 236, 216, 0.65);
}

/* Fond d'écran : le footer (.kta-loader-copyright) n'a pas de fond propre non plus. Zones du HOME sans fond
   propre : header, bandeau profil, footer, titres de section — le reste a déjà le sien. */
#planLoaderBox.kta-has-wall .kta-loader-copyright {
  background: rgba(10, 13, 24, 0.72);
  border-radius: 10px;
  padding: 10px 12px;
  box-shadow: 0 2px 14px rgba(0, 0, 0, 0.35);
}
#planLoaderBox.kta-has-wall .kta-loader-copyright a {
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
}
/* Titres de section : ombre portée seule (un panneau par titre alourdirait la page). */
#planLoaderBox.kta-has-wall .loader-section-head,
#planLoaderBox.kta-has-wall .loader-section-head * {
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.75);
}
body.kta-theme-light #planLoaderBox.kta-has-wall .kta-loader-copyright {
  background: rgba(244, 236, 216, 0.82);
  box-shadow: 0 2px 14px rgba(0, 0, 0, 0.18);
}
body.kta-theme-light #planLoaderBox.kta-has-wall .kta-loader-copyright a {
  text-shadow: 0 1px 2px rgba(255, 255, 255, 0.6);
}
body.kta-theme-light #planLoaderBox.kta-has-wall .loader-section-head,
body.kta-theme-light #planLoaderBox.kta-has-wall .loader-section-head * {
  text-shadow: 0 1px 2px rgba(255, 255, 255, 0.65);
}

/* 🩸 Mobile (< 640 px) : padding horizontal du panneau header à 0. Le calage du header est serré (14 px
   de marge à 375 px) : 20 px de padding déclenchent le flex-wrap de secours (icônes à la ligne). */
@media (max-width: 640px) {
  #planLoaderBox.kta-has-wall .loader-header {
    padding-left: 0;
    padding-right: 0;
    border-radius: 8px;
  }
  /* Chips : pas de padding ajouté non plus. */
  #planLoaderBox.kta-has-wall .loader-btn-help {
    background: rgba(10, 13, 24, 0.55);
  }
  body.kta-theme-light #planLoaderBox.kta-has-wall .loader-btn-help {
    background: rgba(244, 236, 216, 0.65);
  }
}

/* Mention SIG dans la zone de dépôt : discrète, le cas principal reste le ZIP de plan. */
.zip-drop-sig {
  display: block;
  margin-top: 8px;
  font-size: 11.5px;
  line-height: 1.45;
  color: var(--kta-texte-3);
  opacity: 0.9;
}
html.kta-theme-light .zip-drop-sig { color: var(--kta-texte-3); }

/* ── PC : le footer déplié tient dans l'écran ── */
/* Hauteur gouvernée par la colonne Actions, pas par l'OSM. Tient déplié dès ~780 px de viewport ; sous
   ~715 px le scroll est structurel. ⚠️ Doit rester APRÈS le bloc HOME cards : les tuiles le battent à
   spécificité égale. */
@media (min-width: 1024px) {
  /* 1) Footer : contact + libs sur une ligne — mise en forme seule, contenu légal intouchable. */
  .kta-loader-copyright .kta-loader-credits { display: inline; margin-top: 0; }
  .kta-loader-copyright .kta-loader-credits + .kta-loader-credits::before {
    content: " · ";
    color: var(--kta-texte-3);
  }
  /* 2) #loaderStatus : pas de hauteur réservée pour un div souvent vide. */
  #loaderStatus { margin-top: 6px; min-height: 0; }
  /* 3) Tuiles Outils : 58 px est une cible tactile, inutile à la souris. */
  .loader-secondary-actions .loader-btn-secondary { min-height: 44px; }
  /* 4) Drop-zone ZIP : padding vertical dégonflé (~20px). */
  .zip-drop-zone { padding: 14px 16px; }
}

/* Second rabotage (~38 px) : même contrainte d'ordre. */
@media (min-width: 1024px) {
  #planLoaderBox { padding-top: 16px; }                          /* 24→16 : ~8px */
  .loader-header { margin-bottom: 14px; padding-bottom: 10px; }  /* 22+16→14+10 : ~14px */
  .loader-tools-head { margin-top: 8px; }                        /* 16→8 : ~8px */
  .loaderActions { margin-top: 8px; }                            /* 16→8 : ~8px */
}

/* PC bas (≤ 820 px de haut, ex. 1366×768) : compaction du décor de la colonne Actions (drop-zone, hint
   FS Access, pictogramme, marges). Préfixe .loader-col-actions : bat la base quel que soit l'ordre. */
@media (min-width: 1024px) and (max-height: 820px) {
  /* 🩸 FILET : la colonne Actions scrolle en interne (flex + min-height:0, comme la colonne des plans).
     Une hauteur fixe se périme en silence à chaque ajout et fait déborder sur le footer.
     « Charger ce plan » reste en bas du contenu (margin-top:auto), atteignable au scroll. */
  .loader-col-actions { min-height: 0; }
  .loader-col-actions #panelZip {
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
  }

  .loader-col-actions .zip-drop-zone {
    padding: 12px 14px;
  }
  .loader-col-actions .zip-drop-zone .zip-icon {
    font-size: 20px;
    margin-bottom: 4px;
  }
  .loader-col-actions .loader-tools-head {
    margin-top: 4px;
  }

  /* ⚠️ Budget vertical : un ajout à la colonne ne doit pas cacher le bouton primaire.
     a) « Charger ce plan » est épinglé en bas du scroller (#panelZip), inerte si rien ne scrolle ;
     b) sur écran bas, la liste des formats se retire (elle reste dans la modale d'aide) ;
     c) tuiles Outils à 36 px (cible souris). Aucune largeur en px : ce bloc ne dépend pas du zoom. */
  .loader-col-actions #panelZip .loaderActions {
    position: sticky;
    bottom: 0;
    z-index: 1;
    padding-top: 8px;
    background: linear-gradient(to top, #161b2b 78%, rgba(22, 27, 43, 0));
  }
  html.kta-theme-light .loader-col-actions #panelZip .loaderActions {
    background: linear-gradient(to top, #fdf8eb 78%, rgba(253, 248, 235, 0));
  }
  .loader-col-actions .zip-drop-sig { display: none; }
  .loader-col-actions .loader-secondary-actions .loader-btn-secondary {
    min-height: 36px;
    padding: 6px;
  }
}

/* ── Liste de plans : filtre par nom, chips tags (.kta-osm-home-tag-chip, si tags), épinglage ── */
.kta-plans-name-filter {
  width: 100%;
  box-sizing: border-box;
  margin: 6px 0 4px;
  padding: 7px 10px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 8px;
  color: var(--kta-texte);
  font-size: 13px;
}
.kta-plans-name-filter::placeholder { color: var(--kta-texte-3); }
.kta-plans-name-filter:focus {
  outline: none;
  border-color: rgba(140, 180, 255, 0.55);
}
.kta-plans-tagchips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 4px 0 8px;
}

/* ── Mode dossiers de « Mes plans » : 0 px ajouté (sélecteur dans la ligne de titre, en-tête = une ligne) ── */
.kta-plans-head-tools { display: flex; align-items: center; gap: 6px; }
.kta-plans-view-switch { display: flex; gap: 2px; padding: 2px; border-radius: 8px;
  background: rgba(255, 255, 255, 0.04); border: 1px solid var(--kta-bordure); }
.kta-plans-view-btn { padding: 2px 9px; font-size: 11px; font-weight: 600; border-radius: 6px; border: 1px solid transparent;
  background: transparent; color: var(--kta-texte-3); cursor: pointer; line-height: 1.5; transition: background 0.15s, color 0.15s; }
.kta-plans-view-btn:hover { color: var(--kta-texte); }
.kta-plans-view-btn.kta-actif { background: #f4c542; color: var(--kta-sur-accent); }
.kta-plans-head-btn { padding: 1px 7px; font-size: 12px; line-height: 1.6; border-radius: 6px; cursor: pointer;
  background: rgba(140, 180, 255, 0.08); border: 1px solid rgba(140, 180, 255, 0.25); color: var(--kta-texte-2); }
.kta-plans-head-btn:hover { background: rgba(140, 180, 255, 0.16); color: var(--kta-texte); }
.kta-plans-head-btn.kta-actif { background: rgba(244, 197, 66, 0.2); border-color: rgba(244, 197, 66, 0.6); color: var(--kta-accent-texte); }
.kta-plans-folder { display: flex; flex-direction: column; gap: 4px; }
.kta-plans-folder-head { display: flex; align-items: center; gap: 8px; min-height: 36px; padding: 0 10px;
  background: rgba(140, 180, 255, 0.06); border: 1px solid rgba(140, 180, 255, 0.18); border-radius: 6px;
  cursor: pointer; user-select: none; font-size: 13px; font-weight: 600; color: var(--kta-texte); }
.kta-plans-folder-head:hover { background: rgba(140, 180, 255, 0.11); }
.kta-plans-folder-head.kta-drop-cible, .kta-plans-folder-rows.kta-drop-cible { outline: 2px dashed var(--kta-focus); outline-offset: -2px; background: rgba(244, 197, 66, 0.08); }
.kta-plans-folder-caret { width: 12px; color: var(--kta-texte-3); font-size: 12px; }
.kta-plans-folder-dot { width: 10px; height: 10px; border-radius: 3px; flex: none; display: inline-block; }
.kta-plans-folder-dot-none { background: transparent; border: 1px dashed #8892a4; }
.kta-plans-folder-name { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kta-plans-folder-count { font-size: 11px; font-weight: 600; color: var(--kta-texte-3); padding: 0 6px; border-radius: 8px; background: rgba(255, 255, 255, 0.06); }
.kta-plans-folder-lock { font-size: 12px; opacity: 0.8; }
.kta-plans-folder-menu { padding: 0 6px; }
.kta-plans-folder-rows { display: flex; flex-direction: column; gap: 4px; padding-left: 10px; min-height: 8px; }
.kta-plans-folder-rows[hidden] { display: none; }   /* le display:flex primerait sur l'attribut hidden */
.kta-plans-folder-unfiled .kta-plans-folder-head { background: rgba(255, 255, 255, 0.03); border-style: dashed; color: var(--kta-texte-2); }
.kta-plans-folder-empty { font-size: 11.5px; color: var(--kta-texte-3); padding: 6px 8px; border: 1px dashed rgba(255, 255, 255, 0.1); border-radius: 6px; }
.kta-plan-row-folder-dot { width: 8px; height: 8px; border-radius: 2px; display: inline-block; margin-right: 6px; flex: none; vertical-align: middle;
  background: var(--kta-dot, #8cb4ff); }
.kta-plan-row-check { width: 16px; height: 16px; flex: none; border-radius: 4px; border: 1px solid rgba(140, 180, 255, 0.5); background: rgba(0, 0, 0, 0.2); }
.kta-plan-row-check.kta-actif { background: #f4c542; border-color: #f4c542; box-shadow: inset 0 0 0 3px #1a1f2e; }
.plan-row.kta-plan-row-selected { border-color: rgba(244, 197, 66, 0.6); background: rgba(244, 197, 66, 0.08); }
.plan-row.kta-plan-row-dragging { opacity: 0.5; }
/* Appui long : ni sélection de texte ni menu de copie iOS (lignes et en-têtes sont des boutons). */
.plan-row, .kta-plans-folder-head { user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
/* fantôme du glisser tactile (appui long) : suit le doigt, ne capte rien */
.kta-plans-drag-ghost { position: fixed; left: 0; top: 0; z-index: 100003; pointer-events: none; opacity: 1; will-change: transform;
  background: var(--kta-surface); border-color: #f4c542; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45); transform: translate(-9999px, -9999px); transition: none; }
/* la ligne d'origine pendant un glisser tactile : une empreinte, pas un double */
.plan-row.kta-plan-row-empreinte { opacity: 0.12; border-style: dashed; transition: none; }
.plan-row[draggable="true"] { cursor: pointer; }
.kta-plans-select-bar { display: flex; align-items: center; gap: 8px; padding: 8px 10px; margin: 0 0 4px; border-radius: 6px;
  background: #22283a; border: 1px solid rgba(244, 197, 66, 0.45); font-size: 12px; color: #e8eaf0;
  position: sticky; top: 0; z-index: 2; }   /* en tête de liste, collante : visible quel que soit le nombre de plans */
.kta-plans-select-count { flex: 1 1 auto; }
.kta-plans-sheet { max-width: 420px !important; width: min(420px, 96vw) !important; }
.kta-plans-sheet-corps { columns: 1 !important; display: flex; flex-direction: column; gap: 6px; }
.kta-plans-sheet-item { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; padding: 10px 12px; min-height: 40px;
  border-radius: 8px; border: 1px solid rgba(140, 180, 255, 0.2); background: rgba(140, 180, 255, 0.06); color: var(--kta-texte); font-size: 13px; cursor: pointer; }
.kta-plans-sheet-item:hover { background: rgba(140, 180, 255, 0.14); }
.kta-plans-sheet-new { display: flex; gap: 6px; margin-top: 4px; }
.kta-plans-sheet-new .kta-cfg-input { flex: 1 1 auto; }
.kta-plans-sheet-lock { font-size: 12px; color: var(--kta-texte-2); background: rgba(140, 180, 255, 0.08); border-radius: 6px; padding: 8px 10px; margin: 0 0 8px; line-height: 1.45; }
.kta-plans-sheet-err { font-size: 12px; color: var(--kta-avert); }
.kta-plans-swatches { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 10px; }
.kta-plans-swatch { width: 26px; height: 26px; border-radius: 7px; border: 2px solid transparent; cursor: pointer; padding: 0; display: inline-block; }
.kta-plans-swatch.kta-actif { border-color: #e8eaf0; box-shadow: 0 0 0 2px #1a1f2e; }
.kta-plans-sheet-actions { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.kta-plans-sheet-spacer { flex: 1 1 auto; }
.kta-plans-folder-more { width: 100%; margin-top: 4px; }
.kta-notifs-select { max-width: 200px; flex: none; margin-left: auto; }
/* Sous 640 px, la ligne se replie : texte pleine largeur, sélecteur dessous (sinon le texte s'étrangle). */
@media (max-width: 640px) {
  .kta-notifs-row { flex-wrap: wrap; }
  .kta-notifs-row .kta-perf-ultra-text { flex: 1 1 100%; }
  .kta-notifs-select { flex: 1 1 100%; max-width: none; margin-left: 0; }
}
/* rangé par règle : contour DANS la pastille (ombre inset), rien ne déborde du titre en overflow:hidden */
.kta-plan-row-folder-dot-rule { background: transparent; box-shadow: inset 0 0 0 2px var(--kta-dot, #8cb4ff); }
.kta-plans-chip-folder { font-weight: 700; }
.kta-plans-sheet-hint { font-size: 11.5px; color: var(--kta-texte-3); line-height: 1.4; margin: -4px 0 8px; }
.kta-plans-sheet-offline { width: 100%; margin: 2px 0 10px; }
/* « Tout garder hors ligne » d'un dossier (js/dossierHorsLigne.js) : avancement puis bilan, mêmes jetons que la charte. */
.kta-dhl-boite { max-width: 440px; height: auto; max-height: 80vh; max-height: 80dvh; }
.kta-dhl-corps { font-size: 13px; color: var(--kta-texte-2); }
.kta-dhl-ligne { margin: 0 0 8px; color: var(--kta-texte); font-weight: 600; overflow-wrap: anywhere; }
.kta-dhl-barre { width: 100%; height: 10px; margin: 0 0 6px; accent-color: var(--kta-primaire); }
.kta-dhl-detail { font-size: 12px; min-height: 1.4em; margin: 0 0 12px; }
.kta-dhl-bilan { margin: 0 0 12px; line-height: 1.5; }
.kta-dhl-bilan-titre { color: var(--kta-texte); font-weight: 600; margin: 8px 0 2px; }
.kta-dhl-bilan-liste { margin: 0 0 4px; padding-left: 18px; color: var(--kta-texte-2); overflow-wrap: anywhere; }
.kta-impm-dossier { flex: 1 1 160px; max-width: 260px; }
.kta-impm-dossier-nom { flex: 1 1 160px; max-width: 260px; }
html.kta-theme-light .kta-plans-folder-head { background: rgba(140, 180, 255, 0.14); border-color: rgba(20, 30, 50, 0.18); color: #1a1f2e; }
html.kta-theme-light .kta-plans-folder-unfiled .kta-plans-folder-head { background: rgba(0, 0, 0, 0.03); }
html.kta-theme-light .kta-plans-folder-count { background: rgba(0, 0, 0, 0.06); color: #4a5568; }
html.kta-theme-light .kta-plans-view-switch { background: rgba(0, 0, 0, 0.04); border-color: rgba(20, 30, 50, 0.14); }
html.kta-theme-light .kta-plans-view-btn { color: #4a5568; }
html.kta-theme-light .kta-plans-view-btn:hover { color: #1a1f2e; }
html.kta-theme-light .kta-plans-head-btn { background: rgba(0, 0, 0, 0.04); border-color: rgba(20, 30, 50, 0.18); color: #1a1f2e; }
html.kta-theme-light .kta-plans-sheet-item { background: rgba(0, 0, 0, 0.03); border-color: rgba(20, 30, 50, 0.18); color: #1a1f2e; }
html.kta-theme-light .kta-plans-select-bar { color: #1a1f2e; background: var(--kta-surface); }
html.kta-theme-light .kta-plans-sheet-lock { color: #1a1f2e; }
html.kta-theme-light .kta-plan-row-check.kta-actif { box-shadow: inset 0 0 0 3px #ffffff; }
html.kta-theme-light .kta-plans-swatch.kta-actif { border-color: #1a1f2e; box-shadow: 0 0 0 2px #ffffff; }
.kta-plan-row-tag {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 7px;
  border-radius: 9px;
  background: rgba(244, 197, 66, 0.12);
  border: 1px solid rgba(244, 197, 66, 0.30);
  color: var(--kta-accent-texte);
  font-size: 10px;
  line-height: 1.5;
  vertical-align: middle;
}
.kta-plan-row-pin { opacity: 0.55; }
.kta-plan-row-pin.kta-actif,
.kta-plan-row-pin:hover { opacity: 1; }
.kta-plan-row-pinned { border-left: 2px solid rgba(244, 197, 66, 0.55); }

/* ── Sélecteur de langue de la gate (premier lancement, pilote la langue globale) ── */
.kta-unlock-langs {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-bottom: 14px;
}
.kta-unlock-lang-btn {
  padding: 4px 12px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(255, 255, 255, 0.04);
  color: var(--kta-texte-3);
  font-size: 12px;
  cursor: pointer;
}
.kta-unlock-lang-btn:hover {
  border-color: rgba(140, 180, 255, 0.45);
  color: var(--kta-texte-2);
}
.kta-unlock-lang-btn.kta-actif {
  border-color: rgba(244, 197, 66, 0.55);
  background: rgba(244, 197, 66, 0.10);
  color: var(--kta-accent-texte);
}
body.kta-theme-light .kta-unlock-lang-btn,
html.kta-theme-light .kta-unlock-lang-btn {
  background: rgba(0, 0, 0, 0.04);
  border-color: rgba(0, 0, 0, 0.15);
  color: #5a5245;
}
body.kta-theme-light .kta-unlock-lang-btn.kta-actif,
html.kta-theme-light .kta-unlock-lang-btn.kta-actif {
  border-color: rgba(160, 120, 20, 0.55);
  background: rgba(244, 197, 66, 0.18);
  color: #7a5c10;
}

/* 🩸 Largeur des fronts de taille : aucune règle CSS possible, la carte est en canvas (preferCanvas) et
   className Leaflet est SVG seulement. Elle se pilote par options.weight (structures.js > majLargeurFronts). */

/* ── Modale « Convertir cet objet » (reclassement de type, boîte .kta-readme-modal-*) ── */
.kta-convert-boite { max-width: 460px; }
.kta-convert-source {
  font-size: 13px;
  color: var(--kta-texte);
  margin: 0 0 4px;
}
.kta-convert-regle {
  font-size: 12px;
  color: var(--kta-texte-3);
  line-height: 1.45;
  margin: 0 0 14px;
}
.kta-convert-groupe { margin-bottom: 14px; }
.kta-convert-groupe-titre {
  font-size: 12px;
  font-weight: 600;
  color: var(--kta-interaction);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 6px;
}
.kta-convert-choix {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 8px 10px;
  margin-bottom: 5px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--kta-bordure);
  border-radius: 8px;
  font-size: 13px;
  color: #d7dbe6;
  text-align: left;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}
.kta-convert-choix:hover {
  background: rgba(140, 180, 255, 0.10);
  border-color: rgba(140, 180, 255, 0.35);
}
.kta-convert-swatch {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  min-width: 22px;
}
.kta-convert-label { flex: 1 1 auto; }
.kta-convert-vide {
  font-size: 13px;
  color: var(--kta-texte-3);
  font-style: italic;
  margin: 8px 0;
}

/* ── Modale « ⛏️ Volume exploité » (groupe 📐 Mesure, boîte .kta-readme-modal-*) ── */
.kta-volume-boite { max-width: 440px; }
.kta-volume-niveau {
  font-size: 13px;
  font-weight: 600;
  color: var(--kta-accent-texte);
  margin: 0 0 10px;
}
.kta-volume-hauteur {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  font-size: 13px;
  color: var(--kta-texte-2);
  margin-bottom: 12px;
}
.kta-volume-hauteur input {
  width: 90px;
  padding: 6px 8px;
  background: var(--kta-surface-2);
  border: 1px solid var(--kta-bordure);
  border-radius: 6px;
  color: var(--kta-texte);
  font-size: 14px;
  text-align: right;
}
.kta-volume-hauteur input.kta-volume-invalide { border-color: var(--kta-erreur-bord); }
.kta-volume-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.kta-volume-table th,
.kta-volume-table td {
  padding: 6px 4px;
  border-bottom: 1px solid var(--kta-bordure);
}
.kta-volume-table th { text-align: left; font-weight: 400; color: var(--kta-texte-2); }
.kta-volume-table td { text-align: right; color: var(--kta-texte); font-variant-numeric: tabular-nums; }
.kta-volume-table td.kta-volume-fort { font-weight: 700; color: var(--kta-accent-texte); }
.kta-volume-note {
  font-size: 12px;
  color: var(--kta-texte-3);
  line-height: 1.45;
  margin: 12px 0 0;
}
/* Le bouton de la popup de note : discret à côté de « Sauver la note ». */
.kta-note-popup-convertir,
.kta-note-popup-jct-appliquer,
.kta-note-popup-niveaux-zone-appliquer {
  background: rgba(140, 180, 255, 0.14);
  border: 1px solid rgba(140, 180, 255, 0.30);
  color: var(--kta-texte-2);
}
.kta-note-popup-convertir:hover,
.kta-note-popup-jct-appliquer:hover,
.kta-note-popup-niveaux-zone-appliquer:hover {
  background: rgba(140, 180, 255, 0.24);
}
/* Liste « Niveau » sous Convertir (multi-niveau, objet de session) ; listes Départ / Arrivée d'une jonction. */
.kta-note-popup-niveau-ligne {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 6px;
  font-size: 12px;
  color: var(--kta-texte-2);
}
.kta-note-popup-niveau,
.kta-note-popup-jct-niveau {
  flex: 1 1 auto;
  background: #0d1117;
  border: 1px solid rgba(140, 180, 255, 0.30);
  border-radius: 5px;
  color: #e8eaf0;
  padding: 4px 6px;
  font-size: 12px;
}
body.kta-theme-light .kta-note-popup-niveau-ligne,
html.kta-theme-light .kta-note-popup-niveau-ligne,
body.kta-theme-light .kta-note-popup-niveaux-zone,
html.kta-theme-light .kta-note-popup-niveaux-zone { color: #24304a; }
body.kta-theme-light .kta-note-popup-niveau,
html.kta-theme-light .kta-note-popup-niveau,
body.kta-theme-light .kta-note-popup-jct-niveau,
html.kta-theme-light .kta-note-popup-jct-niveau {
  background: var(--kta-light-bg);
  border-color: var(--kta-light-border-strong);
  color: var(--kta-light-text);
}
.kta-note-popup-jonction .kta-note-popup-actions { margin-top: 6px; }
/* Cases « Aussi aux niveaux » de la fiche d'une zone (multi-niveau). */
.kta-note-popup-niveaux-zone { margin-top: 6px; font-size: 12px; color: var(--kta-texte-2); }
.kta-note-popup-niveaux-zone-cases { display: flex; flex-wrap: wrap; gap: 4px 12px; margin-top: 4px; }
.kta-note-popup-niveaux-zone-case { display: inline-flex; align-items: center; gap: 4px; cursor: pointer; }
.kta-note-popup-niveaux-zone .kta-note-popup-actions { margin-top: 6px; }
.kta-note-popup-jct-statut { margin-top: 6px; font-size: 12px; line-height: 1.4; }
body.kta-theme-light .kta-convert-source { color: #1a1f2e; }
body.kta-theme-light .kta-convert-choix {
  background: rgba(0, 0, 0, 0.03);
  border-color: rgba(0, 0, 0, 0.10);
  color: #24304a;
}
body.kta-theme-light .kta-convert-choix:hover { background: rgba(60, 110, 200, 0.10); }

/* ── Profondeur des niveaux + profil en long ── */
.kta-prof-boite, .kta-profil-boite { max-width: 520px; }
.kta-prof-hint { font-size: 12px; color: var(--kta-texte-3); line-height: 1.5; margin: 0 0 10px; }
.kta-prof-propose { color: var(--kta-interaction); }
.kta-prof-avert { color: var(--kta-avert); margin-top: 12px; }
.kta-prof-ligne {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 8px; margin-bottom: 5px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--kta-bordure);
  border-radius: 8px;
}
.kta-prof-niv {
  flex: 0 0 44px; font-weight: 700; font-size: 13px; color: var(--kta-accent-texte); text-align: center;
}
.kta-prof-val { flex: 0 0 90px; }
.kta-prof-val:disabled { opacity: 0.35; }
.kta-prof-unite { font-size: 12px; color: var(--kta-texte-3); }
.kta-prof-sans {
  margin-left: auto; display: flex; align-items: center; gap: 5px;
  font-size: 11.5px; color: var(--kta-texte-3); cursor: pointer; white-space: nowrap;
}
.kta-prof-actions { display: flex; gap: 8px; justify-content: flex-end; margin-top: 14px; }

.kta-profil-chiffres {
  display: flex; flex-wrap: wrap; gap: 14px;
  font-size: 12.5px; color: var(--kta-texte-2); margin-bottom: 10px;
}
.kta-profil-chiffres b { color: var(--kta-texte); }
.kta-profil-monte b   { color: #7ee0a0; }
.kta-profil-descend b { color: #ff9f6b; }
.kta-profil-svg {
  width: 100%; height: auto; display: block;
  background: rgba(0, 0, 0, 0.22); border-radius: 8px;
}
.kta-profil-grille { stroke: rgba(255, 255, 255, 0.10); stroke-width: 1; }
.kta-profil-tick   { fill: #8892a4; font-size: 9px; font-family: inherit; }
.kta-profil-trace  {
  fill: none; stroke: #8cb4ff; stroke-width: 2.2;
  stroke-linejoin: round; stroke-linecap: round;
}
body.kta-theme-light .kta-prof-ligne { background: rgba(0, 0, 0, 0.03); border-color: rgba(0, 0, 0, 0.10); }
body.kta-theme-light .kta-profil-svg { background: rgba(0, 0, 0, 0.05); }
body.kta-theme-light .kta-profil-grille { stroke: rgba(0, 0, 0, 0.12); }
body.kta-theme-light .kta-profil-tick   { fill: #5a6478; }

/* ── Mesure dans la Vue OSM ── */
#kta-osm-mes-floater {
  position: fixed; left: 50%; transform: translateX(-50%);
  top: calc(12px + env(safe-area-inset-top, 0px));   /* repositionne sur la carte par JS */
  z-index: 100002;                 /* au-dessus de la Vue OSM plein écran */
  display: flex; align-items: center; gap: 8px;
  padding: 8px 12px;
  background: linear-gradient(180deg, #1a1f2e 0%, #0f1320 100%);
  border: 1px solid rgba(244, 197, 66, 0.45);
  border-radius: 10px;
  box-shadow: 0 8px 26px rgba(0, 0, 0, 0.55);
  font-size: 13px; color: #e8eaf0;
  max-width: calc(100vw - 24px);
  /* 🩸 Mobile : sans coupure, le contenu sort du cadre (cf. .kta-iti-floater). */
  flex-wrap: wrap; box-sizing: border-box;
}
.kta-osm-mes-icone { font-size: 15px; }
.kta-osm-mes-info  { font-weight: 600; white-space: normal; overflow-wrap: anywhere; min-width: 0; }
/* Libellé de segment : lisible sur fond de carte clair comme sombre. */
.kta-osm-mes-seg { background: none !important; border: none !important; }
.kta-osm-mes-seg span {
  display: inline-block; transform: translate(-50%, -50%);
  padding: 1px 6px; border-radius: 6px;
  background: rgba(26, 31, 46, 0.88);
  border: 1px solid rgba(244, 197, 66, 0.5);
  color: #f4c542; font-size: 11px; font-weight: 600; white-space: nowrap;
}
/* Relevé de coordonnées GPS de surface : même gabarit et emplacement que la mesure (outils exclusifs). */
#kta-osm-coord-floater {
  position: fixed; left: 50%; transform: translateX(-50%);
  top: calc(12px + env(safe-area-inset-top, 0px));   /* repositionne sur la carte par JS */
  z-index: 100002;                 /* au-dessus de la Vue OSM plein ecran */
  display: flex; align-items: center; gap: 8px;
  padding: 8px 12px;
  background: linear-gradient(180deg, #1a1f2e 0%, #0f1320 100%);
  border: 1px solid rgba(140, 180, 255, 0.45);
  border-radius: 10px;
  box-shadow: 0 8px 26px rgba(0, 0, 0, 0.55);
  font-size: 13px; color: #e8eaf0;
  max-width: calc(100vw - 24px);
  /* 🩸 Mobile : sans coupure, le contenu sort du cadre (cf. .kta-iti-floater). */
  flex-wrap: wrap; box-sizing: border-box;
}
.kta-osm-coord-icone { font-size: 15px; }
/* Coordonnée à lire et recopier : chasse fixe, sélectionnable sans le bouton Copier. */
.kta-osm-coord-info {
  /* Coupable : sur deux lignes elle reste recopiable, hors de l'écran non. */
  font-weight: 600; white-space: normal; overflow-wrap: anywhere; min-width: 0;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12.5px; color: var(--kta-interaction);
  user-select: text; -webkit-user-select: text;
}
body.kta-theme-light #kta-osm-coord-floater {
  background: #ffffff; color: #24304a; border-color: rgba(60, 110, 200, 0.5);
}
body.kta-theme-light .kta-osm-coord-info { color: #1c4fa8; }

body.kta-theme-light #kta-osm-mes-floater {
  background: #ffffff; color: #24304a; border-color: rgba(180, 140, 20, 0.5);
}

/* champs de profondeur du Générateur (sous la case multi-niveau) */
.kta-planner-prof-row {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  margin: 8px 0 4px 26px; padding: 8px 10px;
  background: rgba(255, 255, 255, 0.03);
  border-left: 2px solid rgba(244, 197, 66, 0.35);
  border-radius: 0 6px 6px 0;
}
.kta-planner-prof-row .kta-cfg-input { width: 90px; }
.kta-planner-prof-row .kta-cfg-label { font-size: 12px; margin: 0; }

/* Bandeau de sélection multiple : hérite de .kta-iti-floater, seul l'écart de ses 4 boutons change. */
.kta-selm-floater { gap: 8px; flex-wrap: wrap; max-width: min(94vw, 720px); }
.kta-selm-floater .kta-btn { white-space: nowrap; }
/* « Tous les « type » » porte un nom de type de longueur libre : il passe à la ligne au lieu de déborder. */
.kta-selm-floater #kta-selm-tous { white-space: normal; overflow-wrap: anywhere; max-width: 100%; text-align: left; }
.kta-selm-floater #kta-selm-ok[disabled],
.kta-selm-floater #kta-selm-suppr[disabled],
.kta-selm-floater #kta-selm-zone-ok[disabled] { opacity: .45; cursor: not-allowed; }
/* Confirmation de la suppression en lot : une case par famille, chacune sur sa ligne (message en pre-line). */
.kta-selm-cases { display: block; margin: 10px 0; white-space: normal; }
.kta-selm-case { display: flex; gap: 8px; align-items: center; margin: 4px 0; color: var(--kta-texte); cursor: pointer; }

/* Le bouton d'entrée en sélection multiple, dans la modale de conversion. */
.kta-convert-multi { display: block; width: 100%; margin: 4px 0 12px; }
/* Case « seulement les contours fermés » d'un lot : grisée (disabled) quand le lot n'en a aucun. */
.kta-convert-fermes {
  display: flex; gap: 8px; align-items: flex-start;
  margin: 0 0 14px; font-size: 13px; line-height: 1.45; color: var(--kta-texte); cursor: pointer;
}
.kta-convert-fermes input { margin-top: 2px; }
.kta-convert-fermes input:disabled + span { color: var(--kta-texte-3); }

/* Fusion de sorties (carnet) : barre SOUS la liste, sinon elle repousse les sorties hors écran. */
.kta-jrn-fusion-barre {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  margin: 10px 0 2px; padding-top: 8px;
  border-top: 1px dashed rgba(255, 255, 255, 0.10);
}
.kta-jrn-fusion-msg { flex: 1 1 auto; min-width: 0; font-size: 12px; color: var(--kta-texte-3); }
.kta-jrn-fusion-barre .kta-btn[disabled] { opacity: .45; cursor: not-allowed; }
.kta-jrn-coche { margin-right: 6px; font-size: 14px; }
.kta-jrn-row-sel { border-color: rgba(140, 180, 255, 0.55) !important; }

/* ── Bouton hors-ligne de la ligne de plan (serveur) : neutre / vert / ambre selon le cache réel ── */
/* Il naît hidden : pas de bouton tant que l'état n'est pas lu. */
.plan-row-btn.kta-plan-row-dl { opacity: 0.75; }
.plan-row-btn.kta-plan-row-dl:hover { opacity: 1; }
.plan-row-btn.kta-dl-ok { color: #7bd88f; opacity: 1; }
.plan-row-btn.kta-dl-partiel { color: var(--kta-accent-texte); opacity: 1; }
.plan-row-btn.kta-plan-row-dl[disabled] { opacity: 0.45; cursor: progress; }

/* Thème clair de la Sortie d'urgence : body ET html, la modale est sur documentElement (ui.md §90.4). */
body.kta-theme-light .kta-sortie-origine,
body.kta-theme-light .kta-sortie-brancard,
html.kta-theme-light .kta-sortie-origine,
body.kta-theme-light .kta-sortie-alt-sep,
html.kta-theme-light .kta-sortie-alt-sep {
  color: var(--kta-texte-3);
}
body.kta-theme-light .kta-sortie-fallback-txt,
html.kta-theme-light .kta-sortie-fallback-txt,
body.kta-theme-light .kta-sortie-bandeau,
html.kta-theme-light .kta-sortie-bandeau {
  color: #b3261e;
}

/* Bandeau persistant « sauvegarde impossible » (stockage saturé) : sous le header (44 px), sous les
   modales ; retiré au premier save réussi (sessionPersist.js). */
.kta-storage-banner {
  position: fixed;
  top: 50px;
  left: 8px;
  right: 8px;
  z-index: 1250;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 8px;
  background: #3a1414;
  border: 1px solid rgba(255, 80, 80, 0.75);
  color: #ffd6d6;
  font-size: 13px;
  line-height: 1.4;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.45);
}
.kta-storage-banner-txt { flex: 1; min-width: 0; }
.kta-storage-banner-btn { flex-shrink: 0; min-height: 40px; }
body.kta-theme-light .kta-storage-banner,
html.kta-theme-light .kta-storage-banner {
  background: #fde8e8;
  color: #7a1010;
  border-color: #c23c3c;
}

/* 🔒 Compte à rebours des verrous temporisés (PIN + gate). */
.kta-pin-gate-countdown,
.kta-unlock-lockout-countdown {
  font-size: 30px;
  font-weight: 800;
  color: var(--kta-accent-texte);
  margin: 8px 0 12px;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
}

/* Pastille sur le bouton ≡ quand un filtre est armé : sinon invisible depuis la carte (et restauré au
   rechargement). */
.kta-filter-ctrl a { position: relative; }
.kta-filter-ctrl a.kta-filter-ctrl-actif {
  box-shadow: inset 0 0 0 2px #f4c542;
}
/* Un point plein, pas un chiffre : on comptait les catégories, pas les objets masqués. Le compte vit
   dans l'infobulle du bouton. */
.kta-filter-ctrl a.kta-filter-ctrl-actif::after {
  content: "";
  position: absolute;
  top: -3px;
  right: -3px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #f4c542;
  /* Liseré sombre : point visible sur une zone claire, sans ombre qui bave au zoom. */
  box-shadow: 0 0 0 2px #1a1f2e;
  box-sizing: border-box;
  pointer-events: none;
}
html.kta-theme-light .kta-filter-ctrl a.kta-filter-ctrl-actif::after { box-shadow: 0 0 0 2px #f0e8d8; }

/* Bouton Vue 3D, sous ≡ dans la barre de droite : picto cube au trait (js/ktaPictos.js) en currentColor, la
   couleur et le fond du thème venant de .leaflet-bar a, comme ≡. */
.kta-vue3d-ctrl a { display: flex !important; align-items: center; justify-content: center; }
.kta-vue3d-ctrl-picto { width: 20px; height: 20px; pointer-events: none; }
/* Sans plan ou sans échelle : grisé sans opacité, toujours touchable (le toucher dit pourquoi). */
body .leaflet-bar.kta-vue3d-ctrl a.kta-inactif,
html.kta-theme-light .leaflet-bar.kta-vue3d-ctrl a.kta-inactif { color: var(--kta-texte-3) !important; filter: grayscale(1); }

/* Case « garder l'écran allumé » (modale de démarrage du tracker). */
.kta-tracker-warn-wake {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin: 10px 0 2px;
  font-size: 13px;
  line-height: 1.4;
  color: var(--kta-texte-2);
  cursor: pointer;
}
.kta-tracker-warn-wake input { margin-top: 3px; flex-shrink: 0; width: 18px; height: 18px; }
body.kta-theme-light .kta-tracker-warn-wake,
html.kta-theme-light .kta-tracker-warn-wake { color: #2a3142; }

/* Ligne « enregistré il y a » en tête de Détails de la session. */
.kta-refonte-save-line {
  font-size: 12px;
  margin: 0 0 10px;
  padding: 6px 10px;
  border-radius: 6px;
  background: rgba(140, 180, 255, 0.08);
  border: 1px solid rgba(140, 180, 255, 0.18);
  color: var(--kta-texte-2);
}
.kta-refonte-save-line.kta-refonte-save-ok    { color: #9be7a7; border-color: rgba(120, 220, 140, 0.35); }
.kta-refonte-save-line.kta-refonte-save-ko    { color: #ffb3b3; border-color: rgba(255, 80, 80, 0.5); background: rgba(255, 80, 80, 0.12); font-weight: 600; }
.kta-refonte-save-line.kta-refonte-save-never { color: var(--kta-texte-3); }
body.kta-theme-light .kta-refonte-save-line.kta-refonte-save-ok,
html.kta-theme-light .kta-refonte-save-line.kta-refonte-save-ok { color: #1e7a34; }
body.kta-theme-light .kta-refonte-save-line.kta-refonte-save-ko,
html.kta-theme-light .kta-refonte-save-line.kta-refonte-save-ko { color: #b3261e; }

/* Recherche plein texte de la modale Documentation. */
.kta-readme-search-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  border-bottom: 1px solid rgba(244, 197, 66, 0.18);
  flex-shrink: 0;
}
.kta-readme-search {
  flex: 1;
  min-width: 0;
  min-height: 38px;
  padding: 6px 10px;
  box-sizing: border-box;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 8px;
  color: var(--kta-texte);
  font-size: 14px;
}
.kta-readme-search::placeholder { color: var(--kta-texte-3); }
.kta-readme-search-count { font-size: 12px; color: var(--kta-texte-3); white-space: nowrap; min-width: 3.5em; text-align: right; }
.kta-readme-search-next { min-height: 38px; min-width: 44px; padding: 0 10px; flex-shrink: 0; }
mark.kta-doc-mark { background: #f4c542; color: var(--kta-sur-accent); padding: 0 1px; border-radius: 2px; }
mark.kta-doc-mark.kta-doc-mark-current { outline: 2px solid #ff9933; outline-offset: 1px; }
.kta-readme-toc-link.kta-readme-toc-dim { opacity: 0.35; }
body.kta-theme-light .kta-readme-search,
html.kta-theme-light .kta-readme-search { background: #fff; color: #1a1f2e; border-color: rgba(0, 0, 0, 0.2); }
body.kta-theme-light .kta-readme-search-count,
html.kta-theme-light .kta-readme-search-count { color: var(--kta-texte-3); }

/* Réglages en un écran : badges de portée, groupes repliables, hors bornes, globaux en lecture seule, géoref. */
.kta-cfg-scope {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .03em;
  text-transform: none;
  padding: 2px 7px;
  border-radius: 999px;
  border: 1px solid;
  white-space: nowrap;
}
.kta-cfg-scope-plan   { color: var(--kta-accent-texte); border-color: rgba(244, 197, 66, 0.5);  background: rgba(244, 197, 66, 0.10); }
.kta-cfg-scope-global { color: var(--kta-interaction); border-color: rgba(140, 180, 255, 0.5); background: rgba(140, 180, 255, 0.10); }
.kta-cfg-scope-mixte  { color: var(--kta-texte-2); border-color: rgba(200, 208, 224, 0.4); background: rgba(200, 208, 224, 0.08); }
.kta-cfg-group-libelle { flex: 1 1 auto; }
.kta-cfg-group-chevron { font-size: 12px; opacity: .8; transition: transform .18s ease; }
.kta-cfg-group-titre:hover { opacity: 1 !important; }
.kta-cfg-group-titre:focus-visible { outline: 2px solid #8cb4ff; outline-offset: 2px; border-radius: 4px; }
.kta-cfg-group.kta-cfg-group-replie .kta-cfg-group-chevron { transform: rotate(-90deg); }
.kta-cfg-group.kta-cfg-group-replie .kta-cfg-group-corps { display: none; }
@keyframes kta-cfg-ok-flash {
  0%   { box-shadow: 0 0 0 2px rgba(74, 222, 128, 0.6); border-color: #4ade80; }
  100% { box-shadow: none; }
}
input.kta-cfg-ok { animation: kta-cfg-ok-flash 1.2s ease-out; }
input.kta-cfg-ko { border-color: #ff5b45 !important; box-shadow: 0 0 0 2px rgba(255, 91, 69, 0.4) !important; }
.kta-cfg-globaux-liste {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 4px 12px;
  margin: 0 0 10px;
  font-size: 12.5px;
}
.kta-cfg-globaux-liste dt { color: var(--kta-texte-2); margin: 0; }
.kta-cfg-globaux-liste dd { color: var(--kta-texte); font-weight: 600; margin: 0; text-align: right; white-space: nowrap; }
.kta-cfg-georef-etat { font-size: 12px; color: var(--kta-texte-3); line-height: 1.45; }
.kta-cfg-georef-etat.kta-cfg-georef-etat-ok { color: #4ade80; }
.kta-cfg-sub-overlay { z-index: 100001; background: rgba(5, 8, 15, 0.7); }
.kta-cfg-sub-boite {
  max-width: 560px !important;
  width: min(560px, 96vw) !important;
  height: auto !important;
  max-height: 90vh !important;
  max-height: 90dvh !important;
}
.kta-cfg-sub-corps { columns: 1 !important; }
body.kta-theme-light .kta-cfg-scope-plan,
html.kta-theme-light .kta-cfg-scope-plan { color: var(--kta-accent-texte); }
body.kta-theme-light .kta-cfg-scope-mixte,
html.kta-theme-light .kta-cfg-scope-mixte { color: var(--kta-texte-3); border-color: rgba(90, 100, 120, 0.4); }
body.kta-theme-light .kta-cfg-globaux-liste dt,
html.kta-theme-light .kta-cfg-globaux-liste dt { color: var(--kta-texte-3); }
body.kta-theme-light .kta-cfg-globaux-liste dd,
html.kta-theme-light .kta-cfg-globaux-liste dd { color: #1a1f2e; }

/* Aide contextuelle : bouton d'aide de l'en-tête des modales, même gabarit que la croix voisine. */
.kta-aide-ctx-btn {
  background: none;
  border: none;
  color: var(--kta-texte-3);
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
  padding: 6px 8px;
  margin-right: 2px;
  border-radius: 6px;
  min-width: 34px;
  min-height: 34px;
  flex-shrink: 0;
  transition: background 0.15s ease, color 0.15s ease;
}
.kta-aide-ctx-btn:hover,
.kta-aide-ctx-btn:focus-visible {
  background: rgba(140, 180, 255, 0.14);
  color: var(--kta-interaction);
  outline: none;
}
/* Menu Tracker : son titre n'a pas flex:1 ; margin-left:auto colle le bouton d'aide à la croix,
   comme dans les autres modales (sinon il se centre entre titre et croix). */
.kta-tracker-modal-header .kta-aide-ctx-btn { margin-left: auto; }

body.kta-theme-light .kta-aide-ctx-btn,
html.kta-theme-light .kta-aide-ctx-btn { color: var(--kta-texte-3); }

/* Import multiple : la liste annonce ce qui va se passer (poids) avant d'écrire quoi que ce soit. */
.kta-impm-boite { max-width: 720px !important; width: min(720px, 96vw) !important; }
.kta-impm-corps { columns: 1 !important; }
.kta-impm-intro { font-size: 13px; color: var(--kta-texte-2); line-height: 1.55; margin: 0 0 12px; }
.kta-impm-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; }
.kta-impm-politique {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  padding: 8px 10px;
  margin-bottom: 12px;
  border: 1px solid var(--kta-bordure);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.02);
  font-size: 12.5px;
}
.kta-impm-politique-titre { color: var(--kta-texte-3); }
.kta-impm-radio { display: flex; align-items: center; gap: 5px; cursor: pointer; min-height: 32px; }
/* Case « Précharger le ZIP » : même cadre que la politique de doublon, cochée par défaut. */
.kta-impm-precharger {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 8px 10px;
  margin-bottom: 12px;
  border: 1px solid var(--kta-bordure);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.02);
  font-size: 12.5px;
  cursor: pointer;
}
.kta-impm-precharger input { margin: 3px 0 0; flex: none; }
.kta-impm-precharger-label { display: block; color: var(--kta-texte); }
.kta-impm-resume { font-size: 12.5px; color: var(--kta-texte-2); margin-bottom: 8px; min-height: 18px; }
.kta-impm-alerte {
  font-size: 12.5px;
  color: #ffd28a;
  background: rgba(255, 180, 80, 0.1);
  border: 1px solid rgba(255, 180, 80, 0.3);
  border-radius: 6px;
  padding: 8px 10px;
  margin-bottom: 10px;
  line-height: 1.45;
}
.kta-impm-liste { max-height: 46vh; max-height: 46dvh; overflow-y: auto; }
.kta-impm-ligne {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 10px;
  align-items: baseline;
  padding: 6px 8px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  font-size: 12.5px;
}
.kta-impm-nom { color: var(--kta-texte); overflow-wrap: anywhere; }
.kta-impm-ver { color: var(--kta-texte-3); font-size: 11px; }
.kta-impm-act { font-size: 11px; font-weight: 700; letter-spacing: 0.02em; white-space: nowrap; }
.kta-impm-det { color: var(--kta-texte-3); font-size: 11px; white-space: nowrap; }
.kta-impm-ajouter .kta-impm-act,
.kta-impm-ajoute  .kta-impm-act { color: #4ade80; }
.kta-impm-remplacer .kta-impm-act,
.kta-impm-doubler   .kta-impm-act { color: var(--kta-accent-texte); }
.kta-impm-ignorer .kta-impm-act { color: var(--kta-texte-3); }
.kta-impm-refus   .kta-impm-act { color: #ff5b45; }
.kta-impm-refus   .kta-impm-det { color: #ff9b8a; white-space: normal; }
.kta-impm-prog { margin-top: 10px; font-size: 12.5px; color: var(--kta-interaction); }
body.kta-theme-light .kta-impm-nom,
html.kta-theme-light .kta-impm-nom { color: #1a1f2e; }
body.kta-theme-light .kta-impm-intro,
html.kta-theme-light .kta-impm-intro { color: var(--kta-texte-2); }

/* ── Mode « plan orienté » (js/mapBearing.js) ── */
/* 🩸 La rotation vit sur le pane intercalaire, entre .leaflet-map-pane et ses enfants : posée sur le
   map-pane, elle ferait pivoter son translate3d. Taille nulle, position absolue : hors layout.
   --kta-bearing (conteneur de la carte) porte l'angle ; ce qui doit rester lisible le contre-tourne.
   ⚠️ Contre-rotation sur un ENFANT, jamais sur .leaflet-marker-icon ou .leaflet-popup : leur transform
   de positionnement pivoterait aussi. */

.kta-rotate-pane {
  position: absolute;
  left: 0;
  top: 0;
  width: 0;
  height: 0;
}

/* Contre-rotation : labels de mesure (l'enfant du divIcon) */
.kta-bearing-on .kta-measure-seg-label,
.kta-bearing-on .kta-measure-angle-label {
  transform: rotate(calc(-1 * var(--kta-bearing, 0deg)));
  transform-origin: 50% 50%;
}

/* Contre-rotation des popups autour du bas (ancrage sur le POI). La croix, frère du contenu, n'en hérite
   pas : mapBearing.js la déplace dans le contenu à l'ouverture, les règles ci-dessous la replacent. */
.kta-bearing-on .leaflet-popup-content-wrapper,
.kta-bearing-on .leaflet-popup-tip-container {
  transform: rotate(calc(-1 * var(--kta-bearing, 0deg)));
  transform-origin: 50% 100%;
}
.kta-bearing-on .leaflet-popup-content-wrapper {
  position: relative;
}
.kta-bearing-on .leaflet-popup-content-wrapper > .leaflet-popup-close-button {
  position: absolute;
  top: 0;
  right: 0;
}

/* Bouton « recentrer » (suivi désarmé) : hors du conteneur de carte, il ne tourne pas avec elle. */
.kta-bearing-recentrer {
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  bottom: calc(var(--kta-statusbar-h, 52px) + env(safe-area-inset-bottom, 0px) + 14px);
  z-index: 1100;
  padding: 8px 16px;
  border: 1px solid #f4c542;
  border-radius: 20px;
  background: rgba(26, 31, 46, 0.94);
  color: #f4c542;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.45);
}
.kta-bearing-recentrer:hover { background: rgba(38, 45, 66, 0.96); }

body.kta-theme-light .kta-bearing-recentrer,
html.kta-theme-light .kta-bearing-recentrer {
  background: rgba(255, 255, 255, 0.96);
  color: #8a6d00;
}

/* prefers-reduced-motion est géré côté JS (mapBearing.js > _mouvementReduit) ; ici, le seul bouton. */
@media (prefers-reduced-motion: reduce) {
  .kta-bearing-recentrer { transition: none; }
}

/* 🩸 Plan orienté : le pan est manuel, dragging Leaflet désactivé retire leaflet-touch-drag ; sans cette
   règle, le navigateur reprend le scroll de page au doigt et le pan est inutilisable sur mobile. */
.leaflet-container.kta-bearing-lock {
  touch-action: none;
}

/* Bouton nord (rotation manuelle, mapBearing.js > _creerBoutonNord) : carte du coin bas gauche, visible seulement
   quand la vue est tournée à la main. Même place et même carte que la boussole 2D (.kta-compass-widget : 36 px
   au-dessus de la barre du bas, 12 px du bas en mode Présentation) ; boussole ouverte, il se pose 8 px au-dessus
   d'elle (body.kta-boussole-ouverte, hauteur --kta-boussole-h posée par compass.js). En paysage bas, la boussole est
   centrée : le bouton reste au coin, décalé de la barre de gauche (elle peut descendre jusqu'à la barre du bas).
   🩸 Fixe, comme la boussole : #map déborde sous la barre du bas, son coin bas gauche serait caché dessous. */
.leaflet-control.kta-nord-ctrl:not(.kta-nord-visible) {
  display: none !important;
}
.leaflet-control.kta-nord-ctrl {
  --kta-nord-sur-boussole: 0px;
  position: fixed;
  left: calc(10px + env(safe-area-inset-left, 0px));
  bottom: calc(var(--kta-statusbar-h, 52px) + 36px + var(--kta-nord-sur-boussole));
  transition: bottom 0.2s ease-out;
}
body.kta-boussole-ouverte .leaflet-control.kta-nord-ctrl {
  --kta-nord-sur-boussole: calc(var(--kta-boussole-h, 143px) + 8px);
}
body.kta-presentation-mode .leaflet-control.kta-nord-ctrl {
  bottom: calc(env(safe-area-inset-bottom, 0px) + 12px + var(--kta-nord-sur-boussole));
}
@media (max-height: 500px) and (orientation: landscape) {
  .leaflet-control.kta-nord-ctrl,
  body.kta-boussole-ouverte .leaflet-control.kta-nord-ctrl {
    --kta-nord-sur-boussole: 0px;
    left: calc(env(safe-area-inset-left, 0px) + var(--kta-barre-bouton) + 14px);
    bottom: calc(var(--kta-statusbar-h, 40px) + 8px);
  }
  body.kta-presentation-mode .leaflet-control.kta-nord-ctrl {
    bottom: calc(env(safe-area-inset-bottom, 0px) + 12px);
  }
}
.kta-nord-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--kta-cible-toucher);
  height: var(--kta-cible-toucher);
  padding: 0;
  border-radius: 12px;
  background: color-mix(in srgb, var(--kta-surface) 88%, transparent);
  border: 1px solid color-mix(in srgb, var(--kta-accent) 30%, transparent);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  cursor: pointer;
}
.kta-nord-btn:hover { border-color: color-mix(in srgb, var(--kta-accent) 55%, transparent); }
html.kta-theme-light .kta-nord-btn,
body.kta-theme-light .kta-nord-btn { box-shadow: 0 6px 20px var(--kta-light-shadow); }
.kta-nord-btn:focus-visible { outline: 2px solid var(--kta-interaction); outline-offset: 2px; }
.kta-nord-picto {
  width: 24px;
  height: 24px;
  pointer-events: none;
  transform: rotate(var(--kta-bearing, 0deg));
}
.kta-nord-pointe { fill: var(--kta-accent-texte); }
.kta-nord-queue  { fill: var(--kta-texte-3); }

/* ── Guidage de l'itinéraire (js/itiGuidage.js, décisions docs/ETUDE_GUIDAGE.md) ── */

/* Raccord à vol d'oiseau : pointillé, sans halo — ce n'est pas une galerie. */
.kta-itinerary-raccord {
  pointer-events: none;
  opacity: 0.85;
}

/* Alerte (raccord de plus de 50 m) : même orange que « Impossible d'éviter ». */
.kta-guid-alerte {
  color: #ff9933;
  background: rgba(255, 153, 51, 0.10);
  border-left: 3px solid #ff9933;
  padding: 8px 10px;
  margin: 6px 0;
  border-radius: 4px;
  font-size: 13px;
}

/* Feuille de route : sous-modale (elle s'ouvre par-dessus la modale Itinéraire). */
.kta-guid-feuille-overlay { z-index: 100001; }
.kta-guid-feuille-boite { max-width: 520px; }
.kta-guid-feuille-resume { color: var(--kta-texte-2); margin: 0 0 10px; font-size: 13px; }
.kta-guid-feuille-liste { list-style: none; margin: 0; padding: 0; }
.kta-guid-feuille-ligne {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 8px 6px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  cursor: pointer;
  color: var(--kta-texte);
  font-size: 14px;
}
.kta-guid-feuille-ligne:hover { background: rgba(140, 180, 255, 0.08); }
.kta-guid-feuille-num { color: var(--kta-texte-3); min-width: 1.6em; text-align: right; font-size: 12px; padding-top: 2px; }
.kta-guid-feuille-icone { color: var(--kta-accent-texte); min-width: 1.4em; text-align: center; font-weight: 700; }
.kta-guid-feuille-txt { flex: 1; }

/* Feuille de route ajoutée à <html> : des règles « body » seules resteraient inertes. */
body.kta-theme-light .kta-guid-feuille-ligne,
html.kta-theme-light .kta-guid-feuille-ligne { color: #1a1f2e; border-bottom-color: rgba(0, 0, 0, 0.08); }
body.kta-theme-light .kta-guid-feuille-resume,
html.kta-theme-light .kta-guid-feuille-resume { color: #3a4254; }
body.kta-theme-light .kta-guid-feuille-icone,
html.kta-theme-light .kta-guid-feuille-icone { color: #8a6d00; }

/* Bandeau en direct : sous l'en-tête, entre les colonnes de boutons ; même z-index que « Recentrer »
   (sous l'en-tête 1200 et les modales), hors du conteneur de carte (ne tourne pas). */
.kta-guid-bandeau {
  position: fixed;
  top: calc(52px + env(safe-area-inset-top, 0px));
  left: 54px;
  right: 54px;
  max-width: 520px;
  margin: 0 auto;
  z-index: 1100;
  background: rgba(26, 31, 46, 0.96);
  border: 1px solid rgba(244, 197, 66, 0.55);
  border-radius: 12px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.5);
  color: #e8eaf0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
}
.kta-guid-ligne { display: flex; align-items: stretch; }
.kta-guid-corps {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  padding: 8px 4px 8px 10px;
  background: none;
  border: 0;
  color: inherit;
  text-align: left;
  cursor: pointer;
  font: inherit;
}
.kta-guid-icone {
  flex: 0 0 auto;
  font-size: 24px;
  line-height: 1;
  color: var(--kta-accent-texte);
  width: 28px;
  text-align: center;
  display: inline-block;
  transition: transform 0.25s ease-out;
}
.kta-guid-textes { display: flex; flex-direction: column; min-width: 0; }
.kta-guid-principal { font-size: 15px; font-weight: 700; line-height: 1.25; }
.kta-guid-sous { font-size: 12.5px; color: var(--kta-texte-2); line-height: 1.3; margin-top: 2px; }
.kta-guid-fermer {
  flex: 0 0 38px;
  width: 38px;
  background: none;
  border: 0;
  border-left: 1px solid var(--kta-bordure);
  color: var(--kta-texte-3);
  font-size: 16px;
  cursor: pointer;
}
.kta-guid-fermer:hover { color: var(--kta-texte); }
.kta-guid-actions { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 10px; }
.kta-guid-actions:not(:empty) { padding: 0 10px 10px; }
.kta-guid-btn { flex: 1 1 auto; min-height: 40px; font-size: 13px; }

/* Alerte écart / demi-tour : orange (même famille que les avertissements). */
.kta-guid-bandeau.kta-guid-alerte-on { border-color: #ff9933; background: rgba(46, 31, 18, 0.97); }
.kta-guid-bandeau.kta-guid-alerte-on .kta-guid-icone { color: #ff9933; }
/* Sortie d'urgence : liseré rouge, pas de croix (décision produit). */
.kta-guid-bandeau.kta-guid-urgence { border-color: #ff4d4d; border-width: 2px; }

@media (max-height: 500px) and (orientation: landscape) {
  .kta-guid-bandeau { top: calc(42px + env(safe-area-inset-top, 0px)); }
  .kta-guid-principal { font-size: 14px; }
  .kta-guid-icone { font-size: 22px; }
}
@media (prefers-reduced-motion: reduce) {
  .kta-guid-icone { transition: none; }
}
body.kta-theme-light .kta-guid-bandeau { background: rgba(255, 255, 255, 0.97); color: #1a1f2e; }
body.kta-theme-light .kta-guid-sous { color: #3a4254; }
body.kta-theme-light .kta-guid-icone { color: #8a6d00; }
body.kta-theme-light .kta-guid-bandeau.kta-guid-alerte-on { background: #fff4e8; }

/* Guidage sur l'écran XL : consigne en gros ; fond et bordure viennent de .kta-emergency-bloc. */
.kta-emergency-guidage { flex: 0 0 auto; gap: 8px; border-width: 2px; }
.kta-emergency-dark  .kta-emergency-guidage { border-color: rgba(244, 197, 66, 0.7); }
.kta-emergency-light .kta-emergency-guidage { border-color: rgba(184, 116, 11, 0.8); }
.kta-emergency-guidage-ligne { display: flex; align-items: center; gap: 14px; }
.kta-emergency-guidage-icone {
  flex: 0 0 auto;
  font-size: 40px;
  line-height: 1;
  width: 48px;
  text-align: center;
  display: inline-block;
  color: #f4c542;
  transition: transform 0.25s ease-out;
}
.kta-emergency-light .kta-emergency-guidage-icone { color: #b8740b; }
.kta-emergency-guidage-textes { min-width: 0; }
.kta-emergency-guidage-principal { font-size: 24px; font-weight: 700; line-height: 1.2; }
.kta-emergency-guidage.kta-emergency-guidage-alerte { border-color: #ff9933; }
.kta-emergency-guidage.kta-emergency-guidage-alerte .kta-emergency-guidage-icone { color: #ff9933; }
.kta-emergency-guidage-choix {
  min-height: 48px;   /* se touche avec des gants, comme le reste de cet écran */
  border: 1.5px solid #ff9933;
  border-radius: 10px;
  background: rgba(255, 153, 51, 0.12);
  color: inherit;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
}
@media (max-height: 500px) and (orientation: landscape) {
  .kta-emergency-guidage-principal { font-size: 17px; }
  .kta-emergency-guidage-icone { font-size: 28px; width: 34px; }
  .kta-emergency-guidage-choix { min-height: 40px; font-size: 13px; }
}
@media (prefers-reduced-motion: reduce) {
  .kta-emergency-guidage-icone { transition: none; }
}

/* Schéma d'un grand carrefour (≥ 4 galeries) : rayons = galeries, celle d'où
   l'on vient en bas, celle à prendre en doré (accent de la charte). */
.kta-guid-picto { display: block; overflow: visible; }
.kta-guid-picto line { stroke-linecap: round; }
.kta-guid-picto-autre   { stroke: #8892a4; stroke-width: 2.5; }
.kta-guid-picto-arrivee { stroke: #c8d0e0; stroke-width: 3; stroke-dasharray: 3 3; }
.kta-guid-picto-choisie { stroke: #f4c542; stroke-width: 4.5; }
.kta-guid-picto-bout    { fill: #f4c542; }
.kta-guid-picto-centre  { fill: #e8eaf0; }
.kta-guid-bandeau .kta-guid-icone .kta-guid-picto { width: 40px; height: 40px; }
.kta-guid-feuille-icone .kta-guid-picto { width: 28px; height: 28px; margin: 0 auto; }
.kta-emergency-guidage-icone .kta-guid-picto { width: 56px; height: 56px; }
body.kta-theme-light .kta-guid-picto-arrivee,
.kta-emergency-light .kta-guid-picto-arrivee { stroke: #3a4254; }
body.kta-theme-light .kta-guid-picto-choisie,
.kta-emergency-light .kta-guid-picto-choisie { stroke: #b8740b; }
body.kta-theme-light .kta-guid-picto-bout,
.kta-emergency-light .kta-guid-picto-bout { fill: #b8740b; }
body.kta-theme-light .kta-guid-picto-centre,
.kta-emergency-light .kta-guid-picto-centre { fill: #1a1f2e; }

/* ── Couleurs de texte sémantiques .kta-tx-* (dicos, alertes du Mode Secours) ── */
/* Valeur par jeton : le thème clair suit seul. ⚠️ Le 2e sélecteur (0,4,0) bat le filet clair
   « .kta-readme-modal-overlay .kta-readme-modal-corps * » (0,3,1, !important), sinon tout y sort en texte principal. */
.kta-tx-info,
:root .kta-readme-modal-overlay .kta-readme-modal-corps .kta-tx-info { color: var(--kta-interaction) !important; }
.kta-tx-accent,
:root .kta-readme-modal-overlay .kta-readme-modal-corps .kta-tx-accent { color: var(--kta-accent-texte) !important; }
.kta-tx-clair,
:root .kta-readme-modal-overlay .kta-readme-modal-corps .kta-tx-clair { color: var(--kta-texte-2) !important; }
.kta-tx-muted,
:root .kta-readme-modal-overlay .kta-readme-modal-corps .kta-tx-muted { color: var(--kta-texte-3) !important; }
.kta-tx-warn,
:root .kta-readme-modal-overlay .kta-readme-modal-corps .kta-tx-warn { color: var(--kta-avert) !important; }
.kta-tx-err,
:root .kta-readme-modal-overlay .kta-readme-modal-corps .kta-tx-err { color: var(--kta-erreur) !important; }
.kta-tx-ok,
:root .kta-readme-modal-overlay .kta-readme-modal-corps .kta-tx-ok { color: var(--kta-ok) !important; }
.kta-tx-violet,
:root .kta-readme-modal-overlay .kta-readme-modal-corps .kta-tx-violet { color: var(--kta-violet) !important; }
.kta-tx-magenta,
:root .kta-readme-modal-overlay .kta-readme-modal-corps .kta-tx-magenta { color: var(--kta-magenta) !important; }

/* 🩸 <option> ouverte (Windows/Chrome) : texte clair hérité sur fond système BLANC. Couleur fixée pour
   toutes les fenêtres, variante claire incluse. */
.kta-readme-modal-overlay select option { background: var(--kta-surface); color: var(--kta-texte); }
body.kta-theme-light .kta-readme-modal-overlay select option,
html.kta-theme-light .kta-readme-modal-overlay select option { background: var(--kta-surface); color: var(--kta-texte); }

/* Actions du compte d'une installation reliée (KtaExtensions.blocActionsCompte). */
.kta-ext-compte { margin-bottom: 12px; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif; }
.kta-ext-compte-titre { font-size: 12px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--kta-texte-3); margin-bottom: 8px; }
.kta-ext-compte-carte { padding: 10px 12px; margin-bottom: 4px; border-radius: 10px;
  background: rgba(140, 180, 255, 0.08); border: 1px solid rgba(140, 180, 255, 0.18); }
.kta-ext-compte-qui { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.kta-ext-compte-pseudo { font-size: 17px; font-weight: 700; color: var(--kta-texte); }
.kta-ext-compte-role { font-size: 12px; font-weight: 700; padding: 2px 8px; border-radius: 999px;
  color: var(--kta-sur-accent); background: #f4c542; }
.kta-ext-compte-details { margin-top: 4px; font-size: 13px; color: var(--kta-texte-3); }
/* Rubriques (Mon compte, Mes données perso, Organisation) : intitulé discret, puis ses actions. */
.kta-ext-compte-groupe { margin: 14px 0 6px; font-size: 11px; font-weight: 700; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--kta-interaction); }
.kta-ext-compte-btn { width: 100%; margin-bottom: 6px; }
/* Ligne d'état (pas un bouton) : sauvegarde des données perso, serveur injoignable. */
.kta-ext-compte-etat { display: flex; align-items: center; justify-content: space-between; gap: 10px;
  margin-bottom: 6px; padding: 6px 2px; font-size: 14px; color: var(--kta-texte-2); }
.kta-ext-compte-etat > span { flex: 1 1 auto; min-width: 0; }
/* Action d'une ligne d'état : petite pastille, pas un lien souligné. */
.kta-ext-compte-lien { flex: 0 0 auto; padding: 5px 10px; border: 1px solid rgba(140, 180, 255, 0.35);
  border-radius: 999px; background: rgba(140, 180, 255, 0.1); font: inherit; font-size: 13px; font-weight: 600;
  color: var(--kta-texte-2); text-decoration: none; cursor: pointer; white-space: nowrap; }
.kta-ext-compte-lien:hover { border-color: #8cb4ff; color: var(--kta-texte); }
html.kta-theme-light .kta-ext-compte-lien { color: #1a1f2e; background: rgba(140, 180, 255, 0.15); }
/* Action à part, en bas (Se déconnecter) : séparée, sobre. */
.kta-ext-compte-fin { display: block; width: 100%; margin-top: 16px; padding: 10px; border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.12); background: transparent; color: var(--kta-texte-2); font: inherit;
  font-size: 15px; cursor: pointer; }
.kta-ext-compte-fin:hover { border-color: #8cb4ff; color: var(--kta-texte); }
/* Lien « Gérer › <tuile d'outils> » sur la carte du compte (Mon profil), et fenêtre de la tuile (Outils). */
/* Un vrai bouton, pas un lien souligné. */
.kta-ext-compte-gerer { display: inline-flex; align-items: center; gap: 6px; margin-top: 10px; padding: 7px 12px;
  border: 1px solid rgba(140, 180, 255, 0.35); border-radius: 999px; background: rgba(140, 180, 255, 0.1);
  color: var(--kta-texte-2); text-decoration: none; font-size: 14px; font-weight: 600; }
.kta-ext-compte-gerer:hover { border-color: #8cb4ff; color: var(--kta-texte); }
html.kta-theme-light .kta-ext-compte-gerer { color: #1a1f2e; background: rgba(140, 180, 255, 0.15); }
.kta-ext-outil-boite { max-width: 520px; width: calc(100% - 32px); }
html.kta-theme-light .kta-ext-compte-pseudo { color: #1a1f2e; }
html.kta-theme-light .kta-ext-compte-etat,
html.kta-theme-light .kta-ext-compte-fin { color: #3a4458; }
html.kta-theme-light .kta-ext-compte-fin { border-color: rgba(0, 0, 0, 0.15); }

/* Présences d'une installation reliée (js/ktaPresences.js) */
.kta-presence-icone { background: none; border: none; }
/* Repère = forme de l'icône du tracker, à la couleur de la personne (SVG, 40 px ; le mien fait 50 px). */
.kta-presence { position: relative; width: 40px; height: 40px; }
.kta-presence-repere { display: block; width: 40px; height: 40px; overflow: visible;
  filter: drop-shadow(0 0 2px rgba(0, 0, 0, 0.55)); }
.kta-presence-etiquette {
  position: absolute; left: 40px; top: 11px; white-space: nowrap; font-size: 11px; padding: 1px 6px;
  border-radius: 8px; background: rgba(10, 13, 24, 0.85); color: #e8eaf0; pointer-events: none;
}
/* Position plus mise à jour : couleur gardée mais éteinte (on reconnaît encore la personne). */
.kta-presence-ancienne .kta-presence-repere {
  filter: grayscale(0.85) drop-shadow(0 0 2px rgba(0, 0, 0, 0.55)); opacity: 0.6;
}
.kta-presence-ancienne .kta-presence-etiquette { color: var(--kta-texte-3); }
.kta-presence-hors-niveau { opacity: 0.4; }
/* Place d'un membre dans SA vue 3D (source "vue3d") : contour pointillé et pastille « 3D » — jamais confondue
   avec une position suivie. */
.kta-presence-vue3d .kta-presence-repere path { stroke-dasharray: 4 3; }
.kta-presence-marque-3d {
  position: absolute; left: -6px; top: -6px; font-size: 10px; font-weight: 700; line-height: 1; padding: 2px 4px;
  border-radius: 6px; background: var(--kta-surface); color: var(--kta-texte); border: 1px solid var(--kta-interaction);
  pointer-events: none;
}
/* Repères d'une extension (KtaExtensions.afficherReperes) : pastille à symbole, bord à la teinte de la charte,
   touchable (30 px + marge du marqueur) ; le nombre dit plusieurs entrées sur le même objet. */
.kta-repere-icone { background: none; border: none; }
.kta-repere {
  position: relative; box-sizing: border-box; width: 30px; height: 30px; border-radius: 50%; cursor: pointer;
  display: flex; align-items: center; justify-content: center; font-size: 15px; line-height: 1;
  background: var(--kta-surface); border: 3px solid var(--kta-texte-3); box-shadow: 0 1px 4px rgba(0, 0, 0, 0.6);
}
.kta-repere-nombre {
  position: absolute; top: -8px; right: -10px; min-width: 16px; padding: 0 4px; border-radius: 8px;
  font-size: 11px; font-weight: 700; line-height: 16px; text-align: center;
  background: var(--kta-texte); color: var(--kta-fond);
}
.kta-repere-accent { border-color: var(--kta-accent); }
.kta-repere-interaction { border-color: var(--kta-interaction); }
.kta-repere-ok { border-color: var(--kta-ok); }
.kta-repere-avert { border-color: var(--kta-avert); }
.kta-repere-erreur { border-color: var(--kta-erreur); }
.kta-repere-violet { border-color: var(--kta-violet); }
.kta-repere-magenta { border-color: var(--kta-magenta); }
.kta-repere-neutre { border-color: var(--kta-texte-3); }
.kta-repere-hors-niveau { opacity: 0.4; }
.kta-repere-absent { border-style: dashed; }
/* État d'un objet donné par une extension (KtaExtensions.etatObjet) : contour pointillé autour de l'icône ; les
   tracés, zones et structures reçoivent un pointillé (canvas : pas de CSS). Accent = proposé, erreur = refusé. */
.leaflet-marker-icon.kta-etat-propose { outline: 3px dashed var(--kta-accent); outline-offset: 3px; border-radius: 50%; }
.leaflet-marker-icon.kta-etat-refuse { outline: 3px dashed var(--kta-erreur); outline-offset: 3px; border-radius: 50%; }
/* Retrait demandé : contour pointillé erreur et icône grisée (l'objet est encore là, sa suppression attend ; pas
   d'opacité : Leaflet pose la sienne en ligne sur l'icône). */
.leaflet-marker-icon.kta-etat-retrait { outline: 3px dotted var(--kta-erreur); outline-offset: 3px; border-radius: 50%; filter: grayscale(1); }
.kta-export-valides { display: inline-flex; align-items: center; gap: 6px; margin: 6px 0; }
/* Itinéraire publié par un autre : étiquette au point d'arrivée */
.kta-presence-iti-icone { background: none; border: none; }
/* Bandeau d'alerte Secours d'une installation reliée (KtaExtensions.afficherAlerteSecours) */
#kta-alerte-secours {
  position: fixed; top: 0; left: 0; right: 0; z-index: 99998; padding: 10px 16px calc(10px + env(safe-area-inset-top, 0px));
  padding-top: calc(10px + env(safe-area-inset-top, 0px)); background: #b3261e; color: #fff; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.5);
}
.kta-alerte-secours-titre { font-weight: 800; font-size: 16px; }
.kta-alerte-secours-texte { font-size: 13px; margin: 4px 0 8px; }
.kta-alerte-secours-actions { display: flex; flex-wrap: wrap; gap: 6px; }
.kta-alerte-secours-actions .kta-btn { background: #fff; color: #b3261e; border: none; font-weight: 700; }
/* Boutons et infos fournis par une extension dans le Mode Secours */
.kta-secours-ext-actions { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0; }
.kta-secours-ext-info { font-size: 12px; color: var(--kta-interaction); margin: 4px 0; }
.kta-presence-iti-etiquette {
  display: inline-block; transform: translate(8px, -50%); white-space: nowrap; font-size: 11px; padding: 1px 6px;
  border-radius: 8px; background: rgba(10, 13, 24, 0.85); color: #f4c542; border: 1px solid #f4c542; pointer-events: none;
}

/* ── Mémoire des sessions (Détails de la session) : jauge localStorage (~5 Mo) + plans les plus lourds ── */
.kta-memoire-jauge { height: 10px; border-radius: 6px; background: rgba(255,255,255,.08); overflow: hidden; margin: 4px 0 6px; }
.kta-memoire-barre { height: 100%; border-radius: 6px; background: #6ee287; transition: width .3s; }
.kta-memoire-barre.kta-memoire-presque { background: #f4c542; }
.kta-memoire-barre.kta-memoire-plein { background: #ff8c8c; }
.kta-refonte-session-badge.kta-memoire-presque { color: var(--kta-accent-texte); }
.kta-refonte-session-badge.kta-memoire-plein { color: var(--kta-erreur); }
.kta-memoire-legende { font-size: 12px; color: var(--kta-texte-3); line-height: 1.5; }
.kta-memoire-conseil { font-size: 12.5px; line-height: 1.5; margin: 4px 0 6px; }
.kta-memoire-plans { list-style: none; margin: 6px 0; padding: 0; }
.kta-memoire-plans li { display: flex; justify-content: space-between; gap: 10px; font-size: 12.5px; color: var(--kta-texte-2);
  padding: 3px 0; border-bottom: 1px solid rgba(255,255,255,.05); }
.kta-memoire-plans li span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kta-memoire-plans li b { font-weight: 600; color: var(--kta-texte); white-space: nowrap; }
html.kta-theme-light .kta-memoire-jauge, body.kta-theme-light .kta-memoire-jauge { background: rgba(0,0,0,.08); }
html.kta-theme-light .kta-memoire-barre, body.kta-theme-light .kta-memoire-barre { background: #1e7a3a; }
html.kta-theme-light .kta-memoire-barre.kta-memoire-presque, body.kta-theme-light .kta-memoire-barre.kta-memoire-presque { background: #b8860b; }
html.kta-theme-light .kta-memoire-barre.kta-memoire-plein, body.kta-theme-light .kta-memoire-barre.kta-memoire-plein { background: #a01818; }
html.kta-theme-light .kta-memoire-legende, body.kta-theme-light .kta-memoire-legende { color: var(--kta-texte-3); }
html.kta-theme-light .kta-memoire-plans li, body.kta-theme-light .kta-memoire-plans li { color: var(--kta-texte); border-bottom-color: rgba(0,0,0,.08); }
html.kta-theme-light .kta-memoire-plans li b, body.kta-theme-light .kta-memoire-plans li b { color: var(--kta-texte); }

/* Mise à jour acceptée, ancien code encore chargé : ambre SANS clignoter (pris pour une demande répétée). */
.kta-loader-copyright-version.kta-loader-copyright-version-attente {
  cursor: pointer;
  color: var(--kta-accent-texte);
  background: rgba(244, 197, 66, 0.10);
  border-color: rgba(244, 197, 66, 0.45);
  animation: none;
}
html.kta-theme-light .kta-loader-copyright-version.kta-loader-copyright-version-attente,
body.kta-theme-light .kta-loader-copyright-version.kta-loader-copyright-version-attente {
  color: var(--kta-accent-texte);
  background: rgba(184, 134, 11, 0.12);
  border-color: rgba(184, 134, 11, 0.45);
}

/* ── Mes photos (js/photosGalerie.js) : modale des liaisons réutilisée, mobile d'abord (rien ne déborde) ── */
.kta-phg-boite { width: min(720px, 96vw) !important; max-width: min(720px, 96vw) !important; }
.kta-phg-corps { overflow-x: hidden; }
/* Fenêtres posées sur <html> (hors <body>) : la police du body ne leur arrive pas. */
.kta-phg-boite, .kta-phg-pick-boite, .kta-phg-signal, .kta-phg-floater {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
}
.kta-phg-total { font-size: 12px; color: var(--kta-texte-3); margin: 0 0 10px 0; }
.kta-phg-barre { display: flex; flex-wrap: wrap; gap: 8px; justify-content: space-between; margin-bottom: 8px; }
.kta-phg-plan-titre { font-size: 15px; font-weight: 600; color: var(--kta-accent-texte); margin: 4px 0 6px; overflow-wrap: anywhere; }
.kta-phg-section { margin: 14px 0 6px; }
.kta-phg-section-titre { font-size: 13.5px; font-weight: 600; color: var(--kta-texte); margin-bottom: 6px; display: flex; align-items: center; gap: 6px; }
.kta-phg-badge {
  display: inline-block; min-width: 20px; padding: 1px 7px; border-radius: 10px;
  font-size: 11.5px; text-align: center; background: rgba(140, 180, 255, 0.18); color: var(--kta-interaction);
}
.kta-phg-sec-sans .kta-phg-badge { background: rgba(244, 197, 66, 0.2); color: var(--kta-accent-texte); }
.kta-phg-texte { font-size: 12.5px; color: var(--kta-texte-2); line-height: 1.5; margin: 0 0 8px 0; }
.kta-phg-carte {
  background: rgba(140, 180, 255, 0.05); border: 1px solid rgba(140, 180, 255, 0.16);
  border-radius: 8px; padding: 9px 10px; margin-bottom: 8px; min-width: 0;
}
.kta-phg-sec-sans .kta-phg-carte { border-color: rgba(244, 197, 66, 0.35); background: rgba(244, 197, 66, 0.05); }
.kta-phg-carte-titre { font-size: 13.5px; color: var(--kta-texte); font-weight: 600; overflow-wrap: anywhere; }
.kta-phg-carte-meta { font-size: 11.5px; color: var(--kta-texte-3); margin: 2px 0 6px; overflow-wrap: anywhere; }
.kta-phg-vignettes { display: grid; grid-template-columns: repeat(auto-fill, minmax(64px, 1fr)); gap: 6px; }
.kta-phg-vignette {
  display: block; width: 100%; aspect-ratio: 1 / 1; object-fit: cover; border-radius: 5px;
  background: rgba(255, 255, 255, 0.06); cursor: zoom-in; min-height: 40px;
}
.kta-phg-vignette:focus-visible { outline: 2px solid #8cb4ff; outline-offset: 1px; }
.kta-phg-actions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.kta-phg-action { flex: 0 1 auto; }
.kta-phg-danger { color: #ff8080 !important; border-color: rgba(255, 128, 128, 0.4) !important; }
.kta-phg-pick-liste { margin-top: 8px; max-height: 50vh; max-height: 50dvh; overflow-y: auto; }
.kta-phg-carte-btn { width: 100%; margin-bottom: 8px; }
/* Signal à l'ouverture d'un plan (toast maison : il porte un bouton). En BAS, au-dessus de la barre
   du plan : en haut, les toasts de l'ouverture (session, sortie reprise) le recouvraient. */
.kta-phg-signal, .kta-phg-floater {
  position: fixed; left: 50%; transform: translateX(-50%);
  bottom: calc(72px + env(safe-area-inset-bottom, 0px));
  max-width: min(440px, calc(100vw - 24px)); box-sizing: border-box;
  background: var(--kta-surface); border: 1px solid var(--kta-bordure); border-left: 3px solid #f4c542;
  border-radius: 10px; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.45);
  padding: 9px 10px 9px 13px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  z-index: 99998; color: var(--kta-texte); font-size: 13px;
}
.kta-phg-signal > span, .kta-phg-floater > span { flex: 1 1 160px; min-width: 0; }
.kta-phg-floater { border-left-color: #8cb4ff; }
.kta-phg-signal-x { background: none; border: none; color: var(--kta-texte-3); font-size: 15px; cursor: pointer; padding: 2px 4px; }
html.kta-theme-light .kta-phg-section-titre,
html.kta-theme-light .kta-phg-carte-titre { color: var(--kta-light-text, #1a1f2e); }
html.kta-theme-light .kta-phg-texte { color: var(--kta-light-text-2, #38414f); }
html.kta-theme-light .kta-phg-plan-titre { color: var(--kta-accent-texte); }
html.kta-theme-light .kta-phg-signal,
html.kta-theme-light .kta-phg-floater { background: #ffffff; color: var(--kta-light-text, #1a1f2e); border-color: rgba(0, 0, 0, 0.12); }
html.kta-theme-light .kta-phg-signal { border-left-color: #b8860b; }
html.kta-theme-light .kta-phg-floater { border-left-color: #3a6fd8; }

/* ══ Finitions d'interface : Réglages, HOME clair, lecture, cibles au doigt, focus clavier ══════════════════════
   Jetons seulement, aucune couleur en dur. Source des constats : docs/audits/2026-10-20_audit-ui-impeccable-v1.md
   (M2, M4, M6, M7, F3, F5). ⚠️ Bloc en fin de fichier : un @media n'ajoute aucune spécificité, l'ordre tranche. */

/* Titre de groupe des Réglages (plan et accueil) : texte principal, 14 px gras, casse normale. La pastille de
   portée reste la seule couleur de la ligne. Plus aucun style inline : ce bloc est la seule source. */
.kta-cfg-group-titre {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 18px 0 6px;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: none;
  color: var(--kta-texte);
  cursor: pointer;
}
.kta-cfg-group-titre.kta-cfg-group-titre-premier { margin-top: 2px; }
.kta-cfg-group-titre:focus-visible { outline: 2px solid var(--kta-focus); }

/* Ligne d'action (mode présentation) : même boîte que les lignes à cocher (.kta-perf-ultra-row), sur un <button>. */
button.kta-cfg-ligne-action {
  width: 100%;
  margin: 0;
  align-items: center;
  font: inherit;
  color: inherit;
  text-align: left;
}
.kta-cfg-ligne-action-icone { flex: 0 0 16px; font-size: 15px; line-height: 1; text-align: center; }
.kta-cfg-ligne-action-chevron { flex: 0 0 auto; font-size: 18px; line-height: 1; color: var(--kta-texte-3); }
.kta-cfg-ligne-action:focus-visible { outline: 2px solid var(--kta-focus); outline-offset: 2px; }

/* Documentation : colonne large et centrée (décision produit : profiter de la place sur PC, ≈ 118 caractères
   par ligne à 15 px ; l'audit Impeccable visait 45-75). Corps à 15 px, titres au-dessus du corps.
   🩸 1ch = largeur du « 0 », plus large qu'une lettre moyenne : 100ch ≈ 118 caractères mesurés en Arial. */
.kta-readme-corps { font-size: 15px; line-height: 1.65; max-width: 100ch; margin-inline: auto; }
.kta-readme-corps h3 { font-size: 16px; }
.kta-readme-corps h4 { font-size: 15px; }
.kta-readme-corps .kta-readme-table { font-size: 14px; }
/* Icône de POI dans le guide (interfaceDocs.js > _renderMarkdown) : à la taille du texte. */
.kta-readme-corps img.kta-readme-icone { width: 1.5em; height: 1.5em; vertical-align: middle; margin: 0 0.3em 0 0; }
@media (max-width: 480px) {
  .kta-readme-corps { font-size: 15px; }
  .kta-readme-corps h2 { font-size: 17px; }
  .kta-readme-corps h3 { font-size: 16px; }
}
/* Fiche d'Aide (sous-modale) : même règle de lecture. Chaque bloc borne SA ligne (son ch suit sa police). Une
   fiche est UNE section : elle ne se coule plus dans les 2 colonnes du hub (.kta-aide-corps), et sa fenêtre
   prend la largeur de sa colonne de lecture. ⚠️ L'id bat les paliers !important de .kta-aide-modal-boite. */
#kta-aide-submodal .kta-aide-modal-boite { max-width: 680px !important; width: min(680px, 96vw) !important; }
#kta-aide-sub-corps { columns: auto; column-rule: none; }
:is(#kta-aide-sub-corps, .kta-aide-fiche-vue) .kta-aide-section { font-size: 15px; }
:is(#kta-aide-sub-corps, .kta-aide-fiche-vue) .kta-aide-p,
:is(#kta-aide-sub-corps, .kta-aide-fiche-vue) .kta-aide-liste,
:is(#kta-aide-sub-corps, .kta-aide-fiche-vue) .kta-aide-grille,
:is(#kta-aide-sub-corps, .kta-aide-fiche-vue) .kta-aide-grille span:not(.kta-aide-icone) {
  font-size: 15px;
  line-height: 1.55;
}
:is(#kta-aide-sub-corps, .kta-aide-fiche-vue) .kta-aide-note,
:is(#kta-aide-sub-corps, .kta-aide-fiche-vue) .kta-aide-sousliste { font-size: 13px; }
:is(#kta-aide-sub-corps, .kta-aide-fiche-vue) .kta-aide-section > * { max-width: 61ch; }
/* Fiche dans le hub, sur téléphone (js/interfaceDocs.js > _aideOuvrirFicheDansHub) : le hub est masqué, pas
   détruit ; « ← Retour » prend la place du titre dans l'en-tête, la croix ferme l'Aide. */
#kta-aide-modal.kta-aide-en-fiche #kta-aide-corps > :not(.kta-aide-fiche-vue),
#kta-aide-modal.kta-aide-en-fiche .kta-readme-modal-header > .kta-readme-modal-titre { display: none !important; }
#kta-aide-modal .kta-aide-back-hub { margin-right: auto; }

/* En-tête de la Documentation sur téléphone : le titre se tronque, la croix reste entière à l'écran. */
.kta-readme-modal-header > .kta-panneau-close { flex-shrink: 0; }
.kta-readme-modal-header:has(#kta-readme-close) .kta-readme-modal-titre {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Cibles : zone de toucher agrandie par un ::after transparent, la marque ne bouge pas. ⚠️ Le pseudo-élément
   compte pour le clic de son élément ; il ne doit pas déborder sur une cible voisine (d'où les seules
   extensions verticales dans les barres). Croix et copie : 32 px partout, 44 px au doigt. */
.kta-panneau-close,
.kta-readme-modal-close,
.kta-popup-point .kta-popup-gps-copy { position: relative; }
.kta-panneau-close::after,
.kta-readme-modal-close::after,
.kta-popup-point .kta-popup-gps-copy::after,
.leaflet-container a.leaflet-popup-close-button::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: max(100%, 32px);
  height: max(100%, 32px);
  transform: translate(-50%, -50%);
}
@media (pointer: coarse) {
  .kta-aide-submodal-back,
  .kta-readme-toc-toggle-btn { position: relative; }
  .kta-panneau-close::after,
  .kta-readme-modal-close::after,
  .kta-popup-point .kta-popup-gps-copy::after,
  .leaflet-container a.leaflet-popup-close-button::after { width: max(100%, 44px); height: max(100%, 44px); }
  .kta-aide-submodal-back::after,
  .kta-readme-toc-toggle-btn::after,
  body.kta-refonte-v1 .kta-refonte-header-btn::after,
  body.kta-refonte-v1 .kta-refonte-statusbar-toggle::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: max(100%, 44px);
    height: max(100%, 44px);
    transform: translate(-50%, -50%);
  }
  body.kta-refonte-v1 .kta-refonte-header-btn,
  body.kta-refonte-v1 .kta-refonte-statusbar-toggle { position: relative; }
  /* Sommaire de la Documentation : liens empilés sans interstice, aucun ::after possible sans chevaucher la
     ligne voisine. Au doigt seulement, chaque lien passe à 40 px de haut (police et retraits inchangés). */
  .kta-readme-toc-link { display: flex; align-items: center; min-height: 40px; box-sizing: border-box; }
  .kta-readme-toc-toggle { width: 32px; height: 40px; }
}

/* Titre du bandeau profil « Bienvenue, <pseudo> » : 2 lignes au plus, sinon le pseudo disparaissait sous
   l'ellipse dès 390 px (la salutation prend toute la ligne). */
.kta-loader-profile-surnom {
  white-space: normal;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow-wrap: anywhere;
  line-height: 1.2;
}

/* Focus clavier visible sur les 3 arrêts du HOME qui n'en avaient pas (même contour que .kta-btn:focus-visible). */
#loaderSearchInput:focus-visible,
#loaderPlansNameFilter:focus-visible,
.kta-loader-profile-bar:focus-visible,
#planLoaderBox.kta-has-wall .kta-loader-profile-bar:focus-visible {
  outline: 2px solid var(--kta-focus);
  outline-offset: 2px;
}

/* Recaler des données sur un autre scan (js/recalageScan.js). 🩸 [hidden] doit gagner sur les display des
   classes : un panneau de méthode masqué qui reste affiché mélange deux méthodes à l'écran. */
.kta-recal-boite { max-width: 520px; height: auto; max-height: 90vh; max-height: 90dvh; }
.kta-recal-corps { font-size: 13px; }
.kta-recal-corps [hidden] { display: none !important; }
.kta-recal-note { color: var(--kta-texte-3); margin: 0 0 8px; line-height: 1.5; }
.kta-recal-petit { font-size: 12px; }
.kta-recal-titre-section { font-weight: 600; margin-top: 12px; }
.kta-recal-sous-titre { margin-top: 8px; }
.kta-recal-grille { margin: 4px 0 2px; }
.kta-recal-fichier { margin: 4px 0 6px; display: inline-block; }
.kta-recal-liste-fichiers { font-size: 12px; color: var(--kta-texte-2); margin: 2px 0 6px; overflow-wrap: anywhere; }
.kta-recal-onglets { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0 8px; }
.kta-recal-onglet.kta-actif {
  border-color: var(--kta-accent);
  color: var(--kta-accent-texte);
  background: var(--kta-accent-fond);
}
.kta-recal-panneau { margin: 4px 0 6px; }
.kta-recal-paire { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin: 4px 0 2px; }
.kta-recal-details { margin-top: 8px; }
.kta-recal-details summary { cursor: pointer; color: var(--kta-texte-2); }
.kta-recal-case { display: flex; gap: 8px; align-items: flex-start; font-size: 12px; color: var(--kta-texte-2); }
.kta-recal-clic-choix { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.kta-recal-clic-choix select { flex: 1 1 180px; min-width: 0; }
.kta-recal-liste-reperes { margin-top: 6px; font-size: 12px; color: var(--kta-texte-2); }
.kta-recal-repere {
  display: flex; align-items: center; gap: 8px; padding: 3px 0;
  border-bottom: 1px solid var(--kta-bordure);
}
.kta-recal-repere-nom { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; color: var(--kta-texte); }
.kta-recal-repere-ecart { flex-shrink: 0; font-variant-numeric: tabular-nums; }
.kta-recal-suspect .kta-recal-repere-ecart { color: var(--kta-erreur); font-weight: 700; }
.kta-recal-recap {
  background: var(--kta-info-fond); border: 1px solid var(--kta-info-bord); border-radius: 6px;
  padding: 10px 12px; margin-top: 10px; font-size: 12px; line-height: 1.5; color: var(--kta-texte-2); min-height: 36px;
}
.kta-recal-recap strong { color: var(--kta-texte); }
.kta-recal-warn {
  border: 1px solid var(--kta-accent-bord); background: var(--kta-accent-fond); border-radius: 6px;
  padding: 8px 10px; margin-top: 8px; font-size: 12px; color: var(--kta-texte);
}
.kta-recal-warn.kta-recal-bloque { border-color: var(--kta-erreur-bord); background: var(--kta-erreur-fond); }
/* Alerte « même position » : texte et bouton Écarter côte à côte, le bouton passe dessous en étroit. */
.kta-recal-identiques { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.kta-recal-identiques > span { flex: 1 1 240px; min-width: 0; }
.kta-recal-actions { margin-top: 12px; flex-wrap: wrap; }
.kta-recal-barre {
  position: fixed; left: 50%; bottom: 20px; transform: translateX(-50%);
  background: var(--kta-surface); border: 1px solid var(--kta-bordure); border-left: 3px solid var(--kta-accent);
  border-radius: 10px; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.55); padding: 10px 12px;
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px; z-index: 100000;
  font-size: 13px; color: var(--kta-texte); max-width: calc(100vw - 24px); box-sizing: border-box;
}
.kta-recal-barre-msg { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }
.kta-recal-barre .kta-btn { flex-shrink: 0; font-size: 12px; padding: 6px 12px; }

/* ── Ajuster une forme (js/ajusterSommets.js) : poignée, aperçu, 🗑️ au sommet ──
   Appui en attente : ni sélection de texte ni bulle système (iPhone) ; glisser : le navigateur ne fait rien du doigt. */
.leaflet-container.kta-ajuster-attente,
.leaflet-container.kta-ajuster-geste {
  -webkit-user-select: none; user-select: none; -webkit-touch-callout: none;
}
.leaflet-container.kta-ajuster-geste { touch-action: none; cursor: grabbing; }
.kta-ajuster-apercu { stroke: var(--kta-accent); fill: none; }
.kta-ajuster-poignee { stroke: var(--kta-accent); fill: var(--kta-accent); fill-opacity: 0.35; }
.kta-ajuster-poignee-attente { fill-opacity: 0; stroke-dasharray: 4 3; }
.kta-ajuster-menu { background: none; border: 0; }
.kta-ajuster-suppr {
  width: 44px; height: 44px; padding: 0; border-radius: 22px; cursor: pointer; font-size: 20px; line-height: 1;
  background: var(--kta-surface); color: var(--kta-texte); border: 2px solid var(--kta-erreur);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.45);
}
.kta-ajuster-suppr:focus-visible { outline: 2px solid var(--kta-interaction); outline-offset: 2px; }
.kta-bearing-on .kta-ajuster-suppr { transform: rotate(calc(-1 * var(--kta-bearing, 0deg))); }