/* ============================================================
   GPX Edit Pro — style.css  (redesign v2)
   Palette cartographique inspirée de gpx-edit-pro-v2

   ────────────────────────────────────────────────────────────
   BREAKPOINTS canoniques (v444)
   CSS ne supporte pas les custom properties dans @media,
   donc on garde les valeurs en dur. Conventions :

     max-width: 500px   très petits téléphones (iPhone SE, etc.)
     max-width: 599px   petits téléphones / portrait
     min-width: 600px   inverse de 599
     max-width: 767px   mobile (toute taille, portrait + landscape)
     min-width: 768px   tablette+
     max-width: 1024px  tablette et inférieur
     min-width: 1025px  desktop

   Cas spéciaux conservés :
     max-width: 640px                         (cas isolé sidebar)
     max-width: 900px + landscape + h≤500px   (paysage petite hauteur)
     prefers-reduced-motion                   (accessibilité)
   ────────────────────────────────────────────────────────────
   ============================================================ */

/* ── FONTS ── */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Barlow+Condensed:wght@400;500;700;900&family=Inconsolata:wght@400;600&display=swap');

/* ── CUSTOM PROPERTIES ── */
.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0,0,0,0);
    white-space: nowrap;
    border: 0;
}

:root {
    /* Paper / cartographic palette */
    --paper:       #f5f0e8;
    --parchment:   #ede5d0;
    --sand:        #d9cdb5;
    --contour:     #b8a888;
    --ink:         #1a1612;
    --ink-soft:    #3d342a;
    --ink-light:   #5a4f42; /* ratio 4.6:1 sur --paper, WCAG AA */
    --trail:       #c0392b;
    --trail-glow:  rgba(192,57,43,0.2);
    --accent:      #c0392b;
    --accent-light:#e74c3c;
    --water:       #8fb8cc;
    --green-map:   #6b8f5e;

    /* Functional */
    --color-bg:       var(--paper);
    --color-text:     var(--ink);
    --color-text-light: var(--ink-light);
    --color-border:   var(--sand);
    --color-card:     rgba(245,240,232,0.97);
    --color-primary:  var(--trail);
    --color-success:  #27ae60;
    --color-warning:  #e67e22;
    --color-danger:   #e74c3c;
    --color-info:     #3498db;

    /* Buttons – kept for JS-generated HTML compatibility */
    --btn-primary-bg:   var(--trail);
    --btn-secondary-bg: rgba(26,22,18,0.08);
    --btn-success-bg:   var(--color-success);
    --btn-danger-bg:    var(--color-danger);
    --btn-info-bg:      var(--color-info);

    /* Spacing */
    --space-xs: .25rem;
    --space-sm: .5rem;
    --space-md: 1rem;
    --space-lg: 1.5rem;
    --space-xl: 2rem;

    /* Typography */
    --text-xs:   .75rem;
    --text-sm:   .875rem;
    --text-base: 1rem;
    --text-lg:   1.125rem;

    /* Shadows */
    --shadow-sm: 0 1px 2px rgba(0,0,0,.06);
    --shadow-md: 0 4px 16px rgba(26,22,18,.18);
    --shadow-lg: 0 8px 40px rgba(26,22,18,.22);
    --shadow-xl: 0 16px 60px rgba(26,22,18,.28);

    --radius:    6px;
    --radius-lg: 10px;

    /* Toolbar height (needed for map bottom offset) */
    --toolbar-h: 72px;

    /* ─────────────────────────────────────────────────────────
       Z-INDEX — hiérarchie verticale UI (v444)
       Échelle sémantique. Toutes les valeurs ne sont pas
       variabilisées (cas locaux, escalations !important conservés).
       ─────────────────────────────────────────────────────────
       Valeurs locales (laissées en dur, contexte spécifique) :
         0,1,2,5,10              empilement local
         300,310,320             leaflet tiles/shadows/overlay
         340,350                 mobile dock
         400,409,435,440,450     boutons flottants sur carte
         600                     stats strip
         700,750,800,900,1000    panneaux secondaires
         1499                    backdrop sidebar
         9100,9200,9300,9400,
         9500,9800,9989,9990     escalations !important (modales étagées)

       Variables sémantiques utilisées ailleurs :                 */
    --z-sidebar:   1500;   /* sidebar traces */
    --z-mode-bar:  2000;   /* bandeau "mode actif" en bas */
    --z-dropdown:  3000;   /* menus déroulants */
    --z-modal:     9000;   /* modales centrales (base) */
    --z-toast:     9999;   /* notifications par-dessus tout */
    --z-progress: 10000;   /* overlay de progression bloquant */
}

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

html, body {
    height: 100%;
    overflow: hidden;
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
    background: var(--color-bg);
    color: var(--color-text);
    -webkit-font-smoothing: antialiased;
}

/* ── BREADCRUMB (SEO only) ── */
.breadcrumb {
    position: absolute;
    left: -9999px;
    top: auto;
    width: 1px;
    height: 1px;
    overflow: hidden;
}
.breadcrumb ol { list-style: none; display: flex; gap: 8px; }

/* ────────────────────────────────────────────
   MAP — full screen
─────────────────────────────────────────────*/
#map {
    position: fixed;
    inset: 0;
    z-index: 0;
    /* bottom padding so toolbar doesn't cover the map */
    padding-bottom: var(--toolbar-h);
}

/* ────────────────────────────────────────────
   FLOATING HEADER (top-left)
─────────────────────────────────────────────*/
.float-header {
    position: fixed;
    bottom: calc(var(--toolbar-h) + 12px);
    right: 18px;
    z-index: 300;
    display: flex;
    align-items: center;
    gap: 10px;
}

.logo-block {
    background: rgba(26,22,18,0.88);
    color: var(--paper);
    padding: 7px 12px 6px;
    border-radius: var(--radius);
    line-height: 1;
    box-shadow: var(--shadow-md);
    backdrop-filter: blur(8px);
    border: 1px solid rgba(255,255,255,.08);
}
.logo-main {
    font-family: 'Barlow Condensed', sans-serif;
    font-weight: 900;
    font-size: 22px;
    letter-spacing: -.02em;
    display: block;
}
.logo-sub {
    font-family: 'Inconsolata', monospace;
    font-size: 9px;
    letter-spacing: .18em;
    color: var(--contour);
    text-transform: uppercase;
    display: block;
    margin-top: 2px;
}

.float-header-mobile { display: none; }

/* ────────────────────────────────────────────
   STATS STRIP (top-right)
─────────────────────────────────────────────*/
.stats-strip {
    position: fixed;
    top: 18px;
    right: 18px;
    z-index: 300;
    display: flex;
    gap: 4px;
}

.stat-chip {
    background: rgba(245,240,232,0.95);
    border: 1px solid var(--sand);
    border-radius: var(--radius);
    padding: 8px 14px;
    text-align: center;
    backdrop-filter: blur(6px);
    min-width: 68px;
    box-shadow: var(--shadow-sm);
    transition: border-color .15s;
}
.stat-chip:hover { border-color: var(--trail); }

.stat-num {
    font-family: 'Barlow Condensed', sans-serif;
    font-weight: 700;
    font-size: 20px;
    color: var(--ink);
    display: block;
    line-height: 1;
}
.stat-unit {
    font-family: 'Inconsolata', monospace;
    font-size: 9px;
    color: var(--ink-light);
    letter-spacing: .1em;
    text-transform: uppercase;
}
.stat-unit:lang(ja) { font-size: 11px; letter-spacing: 0; }

/* ────────────────────────────────────────────
   MAP CONTROLS (left side, below sidebar btn)
─────────────────────────────────────────────*/
.map-controls {
    position: fixed;
    bottom: calc(var(--toolbar-h) + 12px);
    left: 18px;
    z-index: 300;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.map-ctrl-btn {
    width: 40px;
    height: 40px;
    border: none;
    background: rgba(245,240,232,0.95);
    border: 1px solid var(--sand);
    border-radius: var(--radius);
    color: var(--ink-soft);
    font-size: 16px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: var(--shadow-sm);
    backdrop-filter: blur(6px);
    transition: all .15s;
}
.map-ctrl-btn:hover { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.map-ctrl-btn:disabled { opacity: .4; pointer-events: none; }

/* ────────────────────────────────────────────
   SIDEBAR (tracks list)
─────────────────────────────────────────────*/
.sidebar {
    position: fixed;
    top: 0;
    left: 0;
    width: 320px;
    height: 100%;
    background: var(--parchment);
    border-right: 1px solid var(--sand);
    box-shadow: var(--shadow-xl);
    z-index: var(--z-sidebar);
    display: flex;
    flex-direction: column;
    transform: translateX(-100%);
    transition: transform .28s cubic-bezier(.4,0,.2,1);
    overflow: hidden;
}
.sidebar.open { transform: translateX(0); }

.sidebar-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 20px 14px;
    border-bottom: 1px solid var(--sand);
    background: var(--ink);
    color: var(--paper);
    flex-shrink: 0;
}
.sidebar-title {
    font-family: 'Barlow Condensed', sans-serif;
    font-weight: 700;
    font-size: 16px;
    letter-spacing: .06em;
    text-transform: uppercase;
}
.sidebar-close {
    background: none;
    border: none;
    color: var(--contour);
    font-size: 22px;
    cursor: pointer;
    line-height: 1;
    padding: 0 4px;
    transition: color .1s;
    flex-shrink: 0;
}
.sidebar-close:hover { color: var(--paper); }

/* Track list */
.track-list {
    flex: 1;
    overflow-y: auto;
    padding: 10px 0;
}
.track-list::-webkit-scrollbar { width: 4px; }
.track-list::-webkit-scrollbar-thumb { background: var(--sand); border-radius: 2px; }

/* Sidebar actions area */
.sidebar-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
    padding: 12px;
    border-top: 1px solid var(--sand);
    background: rgba(237,229,208,0.8);
    flex-shrink: 0;
}
.sdb-btn,
a.sdb-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 10px;
    background: white;
    border: 1px solid var(--sand);
    border-radius: var(--radius);
    font-size: var(--text-sm);
    font-weight: 500;
    color: var(--ink-soft);
    cursor: pointer;
    transition: all .15s;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.sdb-btn:hover { border-color: var(--trail); color: var(--trail); }
.sdb-btn:disabled { opacity: .4; pointer-events: none; }

.sidebar-footer {
    padding: 12px 16px;
    border-top: 1px solid var(--sand);
    font-size: var(--text-xs);
    color: var(--ink-light);
    flex-shrink: 0;
}

/* Sidebar overlay (backdrop on mobile) */
.sidebar-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(26,22,18,.4);
    z-index: 1499;
    backdrop-filter: blur(2px);
}
.sidebar-overlay.active { display: block; }

/* ────────────────────────────────────────────
   BOTTOM TOOLBAR
─────────────────────────────────────────────*/
.toolbar {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: var(--toolbar-h);
    z-index: 350;
    display: flex;
    align-items: stretch;
    background: var(--ink);
    box-shadow: 0 -4px 30px rgba(26,22,18,.4);
    overflow: visible;
    scrollbar-width: none;
}

/* Logo toolbar */
.tb-logo {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    padding: 0 16px;
    flex-shrink: 0;
    text-decoration: none;
    border-right: 1px solid rgba(255,255,255,.06);
}
.tb-logo-main {
    font-family: 'Barlow Condensed', sans-serif;
    font-weight: 900;
    font-size: 17px;
    letter-spacing: -.01em;
    color: var(--paper);
    line-height: 1;
}
.tb-logo-sub {
    font-family: 'Inconsolata', monospace;
    font-size: 8px;
    letter-spacing: .18em;
    color: var(--trail);
    text-transform: uppercase;
    line-height: 1;
    margin-top: 3px;
}
.tb-logo:hover .tb-logo-main { color: white; }

/* Spacers pour centrage des boutons */
.tb-spacer {
    flex: 1;
}

.tb-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 10px 20px;
    border: none;
    background: transparent;
    color: var(--sand);
    cursor: pointer;
    transition: all .15s;
    border-right: 1px solid rgba(255,255,255,.06);
    min-width: 80px;
    position: relative;
    flex-shrink: 0;
    white-space: nowrap;
}
.tb-btn:last-child { border-right: none; }
.tb-btn:hover { background: rgba(255,255,255,.07); color: var(--paper); }
.tb-btn:disabled { opacity: .4; cursor: default; }

/* JS adds these classes to tb-btn to indicate state */
.tb-btn.active,
.tb-btn.btn-active { background: var(--trail); color: white; }
.tb-btn.btn-success { background: var(--color-success); color: white; }
.tb-btn.btn-danger  { background: var(--color-danger); color: white; }
.tb-btn.btn-primary { background: var(--trail); color: white; }
.tb-btn.btn-info    { background: var(--color-info); color: white; }
.tb-btn.btn-active .tb-label,
.tb-btn.btn-success .tb-label,
.tb-btn.btn-danger .tb-label,
.tb-btn.btn-primary .tb-label,
.tb-btn.btn-info .tb-label { color: rgba(255,255,255,.85); }

.tb-icon { font-size: 18px; line-height: 1; }
.tb-menu-trigger { cursor: pointer; user-select: none; }
.tb-label {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 11px;
    font-weight: 500;
    letter-spacing: .06em;
    color: var(--contour);
    text-transform: uppercase;
}
.tb-btn:hover .tb-label { color: var(--sand); }
.tb-btn.active .tb-label { color: rgba(255,255,255,.85); }

.tb-divider {
    width: 1px;
    background: rgba(255,255,255,.08);
    flex-shrink: 0;
    align-self: stretch;
}

/* ── TOOLBAR SUBMENUS ── */
/* ────────────────────────────────────────────
   PANNEAU OUTILS UNIFIÉ (Édition + Analyse)
─────────────────────────────────────────────*/
.tools-panel {
    display: none;
    position: fixed;
    left: 12px;
    bottom: calc(var(--toolbar-h) + 12px);
    z-index: 450;
    width: 230px;
    background: var(--parchment);
    border: 1px solid var(--sand);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-xl);
    font-family: 'Inter', sans-serif;
    overflow: hidden;
    /* Sur un ecran court (portable ~744 px) les 14 boutons de l'onglet
       Edition depassaient par le haut, emportant l'en-tete : onglets,
       epingle, croix et poignee de deplacement devenaient inatteignables. */
    max-height: calc(100vh - var(--toolbar-h) - 24px);   /* fallback */
    max-height: calc(100dvh - var(--toolbar-h) - 24px);
}
.tools-panel.open {
    display: flex;
    flex-direction: column;
    animation: submenuIn .15s ease;
}
.tools-panel.pinned {
    box-shadow: var(--shadow-xl), 0 0 0 2px rgba(252,76,2,.25);
}

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

/* Header */
.tp-header {
    flex: 0 0 auto;   /* jamais comprime quand le contenu deborde */
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 8px 8px 4px;
    border-bottom: 1px solid var(--sand);
    cursor: grab;
    user-select: none;
    background: var(--parchment);
    gap: 4px;
}
.tp-header:active { cursor: grabbing; }

/* Tabs */
.tp-tabs {
    display: flex;
    flex: 1;
    gap: 3px;
}
.tp-tab-btn {
    flex: 1;
    padding: 5px 6px;
    border: 1px solid var(--sand);
    border-radius: var(--radius);
    background: white;
    color: var(--ink-light);
    font-size: 11px;
    font-weight: 600;
    font-family: 'Barlow Condensed', sans-serif;
    letter-spacing: .03em;
    cursor: pointer;
    transition: all .15s;
    white-space: nowrap;
}
.tp-tab-btn:hover { border-color: var(--trail); color: var(--trail); }
.tp-tab-btn.active { background: var(--trail); border-color: var(--trail); color: white; }

/* Header action buttons */
.tp-header-actions { display: flex; gap: 4px; flex-shrink: 0; }
.tp-pin-btn, .tp-close-btn {
    width: 24px; height: 24px;
    border: 1px solid var(--sand);
    border-radius: 6px;
    background: white;
    font-size: 12px;
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    transition: all .15s;
    padding: 0; line-height: 1;
    color: var(--ink-light);
}
.tp-pin-btn:hover  { border-color: var(--trail); color: var(--trail); }
.tp-pin-btn.active { background: rgba(252,76,2,.1); border-color: var(--trail); color: var(--trail); }
.tp-close-btn:hover { border-color: var(--ink); background: var(--ink); color: white; }

/* Tab content */
.tp-tab-content { display: none; padding: 6px 0 8px; }
.tp-tab-content.active {
    display: block;
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
}

/* Section label */
.tp-section {
    padding: 7px 14px 4px;
    font-family: 'Inconsolata', monospace;
    font-size: 9px;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--ink-light);
    border-top: 1px solid rgba(184,168,136,.35);
    margin-top: 4px;
}
.tp-tab-content .tp-section:first-child { border-top: none; margin-top: 0; }

/* Buttons */
.tp-btn {
    display: block;
    width: 100%;
    text-align: left;
    padding: 9px 16px;
    border: none;
    background: transparent;
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 14px;
    font-weight: 500;
    letter-spacing: .03em;
    color: var(--ink-soft);
    cursor: pointer;
    transition: all .12s;
}
.tp-btn:hover:not(:disabled) { background: var(--trail-glow); color: var(--trail); }
.tp-btn:disabled { opacity: .32; cursor: default; }
.tp-btn + .tp-btn { border-top: 1px solid rgba(184,168,136,.2); }
.tp-section + .tp-btn { border-top: none; }

/* ────────────────────────────────────────────
   TRACK ITEMS (inside sidebar) — structure generated by JS
─────────────────────────────────────────────*/
.track-item {
    display: flex;
    flex-direction: column;
    padding: 10px 14px;
    gap: 4px;
    cursor: pointer;
    transition: background .12s;
    border-bottom: 1px solid rgba(184,168,136,.2);
    border-left: 3px solid transparent;
}
.track-item:hover { background: rgba(192,57,43,.05); }
.track-item.selected { background: rgba(192,57,43,.1); border-left-color: var(--trail); }

/* .track-name is the flex row with color + editable name */
.track-item .track-name {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 600;
    font-size: var(--text-sm);
    color: var(--ink);
}

.track-color-indicator {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    flex-shrink: 0;
    border: 2px solid white;
    box-shadow: 0 0 0 1px rgba(0,0,0,.15);
    cursor: pointer;
}

.track-name-editable {
    display: flex;
    align-items: center;
    gap: 4px;
    flex: 1;
    min-width: 0;
    cursor: pointer;
    border-radius: 3px;
    padding: 2px 4px;
    transition: background .1s;
}
.track-name-editable:hover { background: rgba(192,57,43,.1); }
.track-name-text {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex: 1;
}
.track-edit-icon { font-size: 11px; opacity: .5; flex-shrink: 0; }
.track-delete-icon { font-size: 13px; opacity: .4; flex-shrink: 0; cursor: pointer; margin-left: 4px; transition: opacity .15s; }
.track-delete-icon:hover { opacity: .85; }
.track-visibility-icon { font-size: 13px; opacity: .4; flex-shrink: 0; cursor: pointer; margin-left: 4px; transition: opacity .15s; }
.track-visibility-icon:hover { opacity: .85; }
.track-item.track-hidden { cursor: default; }
.track-item.track-hidden .track-name-text,
.track-item.track-hidden .track-stats,
.track-item.track-hidden .track-color-indicator { opacity: .45; }
.track-item.track-hidden .track-visibility-icon { opacity: .8; }
.track-name-input {
    flex: 1;
    border: 1px solid var(--trail);
    border-radius: 3px;
    padding: 2px 6px;
    font-size: var(--text-sm);
    font-family: inherit;
    outline: none;
}

.track-stats {
    font-size: var(--text-xs);
    color: var(--ink-light);
    padding-left: 20px;
}

.track-actions { display: flex; gap: 4px; }
.track-action-btn {
    width: 28px; height: 28px;
    border: none;
    background: transparent;
    border-radius: 4px;
    font-size: 13px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--ink-light);
    transition: all .12s;
}
.track-action-btn:hover { background: rgba(192,57,43,.12); color: var(--trail); }

/* ────────────────────────────────────────────
   ELEVATION PROFILE (floating draggable)
   Nouvelle structure : col. gauche + canvas pleine hauteur
─────────────────────────────────────────────*/
.elevation-profile-container {
    position: fixed;
    bottom: calc(var(--toolbar-h) + 16px);
    left: 50%;
    transform: translateX(-50%);
    width: min(800px, calc(100vw - 40px));
    height: 190px;
    /* Ne pas dépasser le haut de la toolbar */
    max-height: calc(100dvh - var(--toolbar-h) - 32px);
    min-height: 140px;
    overflow: hidden;
    background: rgba(20,17,14,.93);
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 14px;
    box-shadow: 0 8px 40px rgba(0,0,0,.5);
    backdrop-filter: blur(16px);
    z-index: 320;
    display: flex;
    flex-direction: row;  /* colonne gauche + canvas côte à côte */
    transition: opacity .2s, transform .2s;
}
.elevation-profile-container.hidden {
    opacity: 0;
    pointer-events: none;
    transform: translateX(-50%) translateY(20px);
}

/* ── Colonne gauche ── */
.ep-side-col {
    width: 150px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 9px 8px 8px 12px;
    border-right: 1px solid rgba(255,255,255,.07);
    cursor: grab;
    overflow: hidden;
}
.ep-side-col:active { cursor: grabbing; }

.ep-side-title {
    font-family: 'Barlow Condensed', sans-serif;
    font-weight: 700;
    font-size: 11px;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: rgba(255,255,255,.45);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ep-side-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

.elevation-profile-btn {
    width: 24px; height: 24px;
    border: none;
    background: rgba(255,255,255,.08);
    border-radius: 50%;
    font-size: 13px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(255,255,255,.5);
    transition: all .12s;
    flex-shrink: 0;
}
.elevation-profile-btn:hover { background: var(--trail); color: white; }

.ep-side-stats {
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex: 1;
    overflow: hidden;
    min-height: 0;
}

/* Stats dans la colonne */
.elevation-stats-container {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.elevation-stat-item {
    display: flex;
    flex-direction: column;
    gap: 0;
}
.elevation-stat-label { color: rgba(255,255,255,.3); font-family: 'Barlow Condensed', sans-serif; font-size: 9px; letter-spacing:.04em; text-transform:uppercase; line-height:1.1; }
.elevation-stat-value { font-weight: 700; color: white; font-family: 'Inconsolata', monospace; font-size: 11px; }

/* Légende surfaces dans la colonne */
.ep-side-surf-legend {
    flex-direction: column !important;
    gap: 2px !important;
    padding: 4px 0 0 !important;
    border-top: 1px solid rgba(255,255,255,.06) !important;
}
.ep-side-surf-legend .surf-leg-item {
    font-size: 9px !important;
}

/* ── Zone canvas (droite) ── */
.elevation-profile-content {
    flex: 1;
    position: relative;
    min-height: 0;
    min-width: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}
.elevation-profile-content canvas { width: 100%; height: 100%; display: block; cursor: crosshair; user-select: none; flex: 1; }
.terrain-strip { flex-shrink: 0; }

.elevation-profile-resize-handle {
    position: absolute;
    background: transparent;
    z-index: 10;
}
.elevation-profile-resize-s {
    bottom: 0; left: 14px; right: 14px;
    height: 6px;
    cursor: s-resize;
    border-radius: 0 0 14px 14px;
}
.elevation-profile-resize-e {
    right: 0; top: 14px; bottom: 14px;
    width: 6px;
    cursor: e-resize;
    border-radius: 0 14px 14px 0;
}
.elevation-profile-resize-se {
    bottom: 0; right: 0;
    width: 18px; height: 18px;
    cursor: se-resize;
    border-radius: 0 0 14px 0;
}
.elevation-profile-resize-se::after {
    content: '';
    position: absolute;
    bottom: 5px; right: 5px;
    width: 8px; height: 8px;
    border-right: 2px solid rgba(255,255,255,.25);
    border-bottom: 2px solid rgba(255,255,255,.25);
    border-radius: 0 0 3px 0;
    pointer-events: none;
}
.elevation-profile-resize-handle:hover { background: rgba(255,255,255,.07); }

.elevation-profile-tooltip {
    position: fixed;
    background: var(--ink);
    color: var(--paper);
    padding: 8px 12px;
    border-radius: var(--radius);
    font-size: 14px;
    line-height: 1.5;
    pointer-events: none;
    z-index: 600;
    opacity: 0;
    transition: opacity .1s;
    box-shadow: var(--shadow-md);
}
.elevation-profile-tooltip.show { opacity: 1; }

.elevation-position-line {
    position: absolute;
    top: 0; bottom: 0;
    width: 1px;
    background: var(--trail);
    pointer-events: none;
}

/* ────────────────────────────────────────────
   TOAST NOTIFICATIONS (top center)
─────────────────────────────────────────────*/
.toast {
    position: fixed;
    top: 20px;
    left: 50%;
    transform: translateX(-50%) translateY(-80px);
    background: var(--ink);
    color: var(--paper);
    padding: 12px 24px;
    border-radius: 24px;
    font-size: var(--text-sm);
    font-weight: 500;
    z-index: 1000;
    max-width: min(420px, calc(100vw - 40px));
    text-align: center;
    pointer-events: none;
    transition: transform .3s cubic-bezier(.34,1.56,.64,1), opacity .3s;
    opacity: 0;
    box-shadow: var(--shadow-xl);
}
.toast.show {
    transform: translateX(-50%) translateY(0);
    opacity: 1;
}
.toast.success { background: var(--color-success); }
.toast.error   { background: var(--color-danger); }
.toast.warning { background: var(--color-warning); color: white; }
.toast.info    { background: var(--color-info); }

.toast-action {
    display: flex !important;
    align-items: center;
    gap: 12px;
    padding: 10px 12px 10px 20px;
    pointer-events: none;
    top: 20px;
}
.toast-action.show { pointer-events: auto; }
.toast-action-btn {
    padding: 5px 14px;
    border-radius: 14px;
    border: none;
    background: rgba(255,255,255,.25);
    color: white;
    font-size: 12px;
    font-weight: 700;
    font-family: 'Barlow Condensed', sans-serif;
    letter-spacing: .05em;
    text-transform: uppercase;
    cursor: pointer;
    white-space: nowrap;
    transition: background .15s;
    flex-shrink: 0;
}
.toast-action-btn:hover { background: rgba(255,255,255,.4); }

/* ────────────────────────────────────────────
   ELEVATION FULL OVERLAY
─────────────────────────────────────────────*/
/* ────────────────────────────────────────────
   GEOSEARCH PANEL
─────────────────────────────────────────────*/
.geosearch-panel {
    position: fixed;
    bottom: calc(var(--toolbar-h) + 12px);
    left: 50%;
    transform: translateX(-50%) translateY(12px);
    width: min(460px, calc(100vw - 32px));
    z-index: 450;
    opacity: 0;
    pointer-events: none;
    transition: opacity .18s, transform .18s;
    font-family: 'Inter', sans-serif;
}
.geosearch-panel.open {
    opacity: 1;
    pointer-events: all;
    transform: translateX(-50%) translateY(0);
}
.gs-inner {
    display: flex;
    align-items: center;
    gap: 0;
    background: rgba(20,17,14,.95);
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 12px;
    box-shadow: 0 8px 32px rgba(0,0,0,.5);
    backdrop-filter: blur(16px);
    overflow: hidden;
}
.gs-icon { padding: 0 10px 0 14px; font-size: 16px; flex-shrink:0; }
.gs-input {
    flex: 1;
    border: none;
    background: transparent;
    color: white;
    font-size: 14px;
    padding: 13px 0;
    outline: none;
    font-family: 'Inter', sans-serif;
}
.gs-input::placeholder { color: rgba(255,255,255,.35); }
.gs-clear {
    width: 32px; height: 32px;
    margin-right: 6px;
    border: none;
    background: rgba(255,255,255,.1);
    border-radius: 50%;
    color: rgba(255,255,255,.6);
    font-size: 16px;
    cursor: pointer;
    display: none;
    align-items: center;
    justify-content: center;
    transition: background .15s;
    flex-shrink: 0;
}
.gs-clear:hover { background: var(--trail); color: white; }

.gs-results {
    list-style: none;
    margin: 6px 0 0;
    padding: 0;
    background: rgba(20,17,14,.95);
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 8px 32px rgba(0,0,0,.4);
    backdrop-filter: blur(16px);
    max-height: 260px;
    overflow-y: auto;
}
.gs-results:empty { display: none; }
.gs-item {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 10px 14px;
    cursor: pointer;
    border-bottom: 1px solid rgba(255,255,255,.05);
    transition: background .12s;
}
.gs-item:last-child { border-bottom: none; }
.gs-item:hover { background: rgba(255,255,255,.07); }
.gs-item-icon { font-size: 16px; flex-shrink: 0; margin-top: 1px; }
.gs-item-label { font-size: 12.5px; color: rgba(255,255,255,.75); line-height: 1.4; }
.gs-loading, .gs-empty {
    padding: 12px 16px;
    color: rgba(255,255,255,.4);
    font-size: 13px;
    font-style: italic;
}

/* ────────────────────────────────────────────
   ELEVATION OVERLAY PLEIN ÉCRAN
─────────────────────────────────────────────*/
/* ══════════════════════════════════════════════
   GRAND PROFIL ALTIMÉTRIQUE — EP OVERLAY
   ══════════════════════════════════════════════ */
.ep-overlay {
    position: fixed;
    inset: 0;
    z-index: 900;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity .25s ease;
}
.ep-overlay.show {
    opacity: 1;
    pointer-events: auto;
}
.ep-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(26,22,18,.52);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}
.ep-panel {
    position: relative;
    z-index: 1;
    width: calc(100vw - 50px);
    height: min(88dvh, 520px);
    max-height: 88dvh;
    background: rgba(244,239,230,.9);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    border: 1px solid rgba(213,201,176,.8);
    border-radius: 14px;
    box-shadow: 0 32px 80px rgba(26,22,18,.4), 0 0 0 1px rgba(255,255,255,.25) inset;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    transform: translateY(16px) scale(.985);
    transition: transform .25s cubic-bezier(.22,1,.36,1);
}
.ep-overlay.show .ep-panel {
    transform: translateY(0) scale(1);
}

/* Header */
.ep-header {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px 20px 12px;
    border-bottom: 1px solid var(--sand);
    flex-shrink: 0;
    flex-wrap: wrap;
    background: linear-gradient(to bottom, rgba(255,255,255,.5), transparent);
}
.ep-header-left { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.ep-eyebrow {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: .62rem;
    font-weight: 700;
    letter-spacing: .15em;
    text-transform: uppercase;
    color: var(--trail);
}
.ep-title {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 1.35rem;
    font-weight: 800;
    color: var(--ink);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    letter-spacing: .02em;
}
.ep-header-stats {
    display: flex;
    gap: 16px;
    font-family: 'Inconsolata', monospace;
    font-size: 12px;
    color: var(--ink-light);
    flex-wrap: wrap;
}
.ep-header-stats span { color: var(--ink); font-weight: 600; }
.ep-header-actions { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
.ep-btn {
    height: 30px;
    padding: 0 12px;
    border: 1px solid var(--sand);
    background: var(--parchment);
    border-radius: 7px;
    color: var(--ink-soft);
    font-size: 11.5px;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    font-family: 'Barlow Condensed', sans-serif;
    letter-spacing: .04em;
    transition: background .12s, border-color .12s, color .12s;
    display: flex;
    align-items: center;
    gap: 5px;
}
.ep-btn:hover { background: var(--sand); color: var(--ink); }
.ep-btn.active { background: var(--ink); border-color: var(--ink); color: #fff; }
.ep-close {
    width: 30px; height: 30px;
    border: 1px solid var(--sand);
    background: var(--parchment);
    border-radius: 50%;
    color: var(--ink-soft);
    font-size: 13px;
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    transition: background .12s, color .12s, border-color .12s;
    flex-shrink: 0;
}
.ep-close:hover { background: var(--trail); border-color: var(--trail); color: #fff; }

/* Canvas */
.ep-canvas-wrap {
    flex: 1;
    min-height: 0;
    position: relative;
    padding: 16px 18px 8px;
}
.ep-canvas-wrap canvas {
    width: 100%;
    height: 100%;
    display: block;
    cursor: crosshair;
}
.ep-hover-line {
    position: absolute;
    top: 16px; bottom: 8px;
    width: 1px;
    background: var(--ink);
    opacity: .2;
    pointer-events: none;
    display: none;
}
.ep-hover-dot {
    position: absolute;
    width: 10px; height: 10px;
    border-radius: 50%;
    background: var(--trail);
    border: 2px solid #fff;
    box-shadow: 0 2px 8px rgba(0,0,0,.25);
    transform: translate(-50%, -50%);
    pointer-events: none;
    display: none;
}
.ep-hover-card {
    position: absolute;
    transform: translate(-50%, calc(-100% - 10px));
    background: var(--ink);
    color: #fff;
    border-radius: 8px;
    padding: 7px 12px;
    font-size: 13px;
    font-family: 'Inconsolata', monospace;
    white-space: nowrap;
    pointer-events: none;
    display: none;
    box-shadow: 0 4px 16px rgba(0,0,0,.3);
    line-height: 1.6;
    z-index: 10;
}
.ep-hover-card::after {
    content: '';
    position: absolute;
    top: 100%; left: 50%;
    transform: translateX(-50%);
    border: 5px solid transparent;
    border-top-color: var(--ink);
}
.ep-sel-tooltip {
    position: absolute;
    top: 20px; left: 50%;
    transform: translateX(-50%);
    background: rgba(26,22,18,.8);
    color: #fff;
    font-size: 11px;
    font-family: 'Inconsolata', monospace;
    padding: 4px 10px;
    border-radius: 6px;
    pointer-events: none;
    white-space: nowrap;
    z-index: 2;
}

/* Surface bar */
.ep-surface-bar {
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 6px 18px 12px;
    border-top: 1px solid var(--sand);
}
.ep-strip-outer {
    /* aligne sur la zone de dessin — PAD_L=48, PAD_R=12 */
    margin-left: 48px;
    margin-right: 12px;
}
.ep-strip-wrap {
    height: 7px;
    border-radius: 4px;
    overflow: hidden;
    background: var(--parchment);
    position: relative;
}
.ep-strip {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
}
.ep-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 2px;
    justify-content: center;
}
.ep-leg-item {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 4px 12px 4px 8px;
    border-radius: 20px;
    border: 1px solid transparent;
    transition: background .12s, border-color .12s;
    cursor: default;
    margin-right: 2px;
}
.ep-leg-item:hover { background: var(--parchment); border-color: var(--sand); }
.ep-leg-swatch {
    width: 10px; height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
    box-shadow: 0 1px 3px rgba(0,0,0,.18);
}
.ep-leg-name {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 13px;
    font-weight: 700;
    color: var(--ink-soft);
    letter-spacing: .03em;
}
.ep-leg-pct {
    font-family: 'Inconsolata', monospace;
    font-size: 11px;
    font-weight: 600;
    color: var(--ink);
    background: var(--parchment);
    border: 1px solid var(--sand);
    border-radius: 4px;
    padding: 0 5px;
    line-height: 18px;
}
.ep-leg-dist {
    font-family: 'Inconsolata', monospace;
    font-size: 10px;
    color: var(--ink-soft);
    opacity: .75;
}

/* ────────────────────────────────────────────
   COLOR PICKER OVERLAY
─────────────────────────────────────────────*/
.color-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(26,22,18,.55);
    z-index: var(--z-mode-bar); /* au-dessus de la sidebar (1500) et de son backdrop */
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(3px);
}
.color-overlay.show { display: flex; }

.color-modal {
    background: var(--parchment);
    border: 1px solid var(--sand);
    border-radius: var(--radius-lg);
    padding: 24px;
    width: min(360px, calc(100vw - 40px));
    box-shadow: var(--shadow-xl);
    position: relative;
}
.color-modal h2 {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 18px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    margin-bottom: 16px;
    color: var(--ink);
}
.color-preview-large {
    width: 100%;
    height: 60px;
    border-radius: var(--radius);
    border: 2px solid var(--sand);
    margin-bottom: 16px;
    cursor: pointer;
    transition: border-color .15s;
}
.color-preview-large:hover { border-color: var(--trail); }
.color-input-hidden { position: absolute; opacity: 0; width: 0; height: 0; }

.color-quick-palette {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 20px;
}
.color-quick {
    width: 28px; height: 28px;
    border-radius: 50%;
    cursor: pointer;
    border: 2px solid white;
    box-shadow: 0 0 0 1px rgba(0,0,0,.2);
    transition: transform .12s;
}
.color-quick:hover { transform: scale(1.2); }

.color-buttons { display: flex; gap: 8px; justify-content: flex-end; }
.color-cancel, .color-confirm {
    padding: 9px 20px;
    border-radius: var(--radius);
    font-size: var(--text-sm);
    font-weight: 600;
    cursor: pointer;
    border: none;
    transition: all .15s;
}
.color-cancel { background: rgba(26,22,18,.08); color: var(--ink-soft); }
.color-cancel:hover { background: rgba(26,22,18,.14); }
.color-confirm { background: var(--trail); color: white; }
.color-confirm:hover { background: var(--accent-light); }

/* ────────────────────────────────────────────
   LEGAL OVERLAY (modals)
─────────────────────────────────────────────*/
.legal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(26,22,18,.55);
    z-index: 700;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 20px;
    backdrop-filter: blur(4px);
}
.legal-overlay.show { opacity: 1; }

.legal-modal {
    background: var(--parchment);
    border: 1px solid var(--sand);
    border-radius: var(--radius-lg);
    padding: 28px 28px 20px;
    width: 100%;
    max-height: 90vh;
    max-height: 90dvh;
    overflow-y: auto;
    box-shadow: var(--shadow-xl);
    position: relative;
}
.legal-modal::-webkit-scrollbar { width: 4px; }
.legal-modal::-webkit-scrollbar-thumb { background: var(--sand); border-radius: 2px; }

.legal-modal h2 {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 20px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--ink);
    margin-bottom: 16px;
    padding-right: 32px;
}
.legal-modal h3 {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--ink);
    margin-bottom: 10px;
}

/* ── Overlays de PROGRESSION uniquement ── */
.progress-modal {
    background: #1A1208;
    border: 1px solid #3A2E1E;
    border-radius: 14px;
    padding: 28px 32px 24px;
    box-shadow: 0 24px 60px rgba(0,0,0,0.65);
}
.progress-modal::-webkit-scrollbar-thumb { background: #3A2E1E; }
.progress-overlay-bg {
    background: rgba(10,7,4,.72);
    backdrop-filter: blur(5px);
}
.progress-modal h2 {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: #C03B2B;
    margin-bottom: 18px;
}
.progress-modal p { color: #7A6A54; }
.legal-content { color: var(--ink-soft); line-height: 1.6; }

/* Close button */
.close-modal, .close-overlay {
    position: absolute;
    top: 16px; right: 16px;
    width: 32px; height: 32px;
    border: none;
    background: rgba(26,22,18,.08);
    border-radius: 50%;
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--ink-light);
    transition: all .15s;
}
.close-modal:hover, .close-overlay:hover { background: var(--trail); color: white; }

/* ────────────────────────────────────────────
   GENERIC BUTTONS (used in overlays / JS-generated HTML)
─────────────────────────────────────────────*/
.btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 9px 18px;
    border-radius: var(--radius);
    font-size: var(--text-sm);
    font-weight: 600;
    cursor: pointer;
    border: 1px solid var(--sand);
    background: white;
    color: var(--ink-soft);
    transition: all .15s;
    white-space: nowrap;
}
.btn:hover { border-color: var(--ink); }
.btn:disabled { opacity: .4; cursor: default; pointer-events: none; }

.btn-primary { background: var(--trail); color: white; border-color: var(--trail); }
.btn-primary:hover { background: var(--accent-light); border-color: var(--accent-light); }

.btn-secondary { background: rgba(26,22,18,.07); color: var(--ink-soft); border-color: var(--sand); }
.btn-secondary:hover { background: rgba(26,22,18,.13); }

.btn-success { background: var(--color-success); color: white; border-color: var(--color-success); }
.btn-success:hover { filter: brightness(1.1); }

.btn-danger { background: var(--color-danger); color: white; border-color: var(--color-danger); }
.btn-danger:hover { filter: brightness(1.1); }

.btn-info { background: var(--color-info); color: white; border-color: var(--color-info); }
.btn-info:hover { filter: brightness(1.1); }

.btn-sm { padding: 5px 12px; font-size: var(--text-xs); }

/* ────────────────────────────────────────────
   FORM ELEMENTS (in overlays)
─────────────────────────────────────────────*/
.form-group {
    margin-bottom: 16px;
}
.form-group label {
    display: block;
    font-weight: 600;
    font-size: var(--text-sm);
    color: var(--ink-soft);
    margin-bottom: 6px;
}
.input-field {
    width: 100%;
    padding: 9px 12px;
    border: 1px solid var(--sand);
    border-radius: var(--radius);
    font-size: var(--text-sm);
    color: var(--ink);
    background: white;
    transition: border-color .15s;
    outline: none;
}
.input-field:focus { border-color: var(--trail); box-shadow: 0 0 0 3px var(--trail-glow); }

input[type="range"] {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: 4px;
    background: var(--sand);
    border-radius: 2px;
    outline: none;
    cursor: pointer;
}
input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 18px; height: 18px;
    border-radius: 50%;
    background: var(--ink);
    border: 3px solid white;
    box-shadow: 0 1px 6px rgba(0,0,0,.3);
    cursor: pointer;
}
input[type="range"]::-moz-range-thumb {
    width: 18px; height: 18px;
    border-radius: 50%;
    background: var(--ink);
    border: 3px solid white;
    box-shadow: 0 1px 6px rgba(0,0,0,.3);
    cursor: pointer;
}

.text-sm-info {
    font-size: var(--text-xs);
    color: var(--ink-light);
    margin-top: 6px;
    line-height: 1.5;
}

/* ────────────────────────────────────────────
   PROGRESS BAR
─────────────────────────────────────────────*/
.progress-bar-container {
    height: 6px;
    background: #2A2018;
    border-radius: 4px;
    overflow: hidden;
    margin-top: 18px;
    margin-bottom: 8px;
}
.progress-bar {
    height: 100%;
    background: linear-gradient(90deg, #C03B2B, #E06030);
    border-radius: 4px;
    width: 0%;
    transition: width .4s ease;
}
.progress-percentage {
    text-align: right;
    font-family: 'Inconsolata', monospace;
    font-size: 10px;
    color: #5A4A34;
    margin-top: 2px;
}

.progress-step {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 9px 12px;
    border-radius: 8px;
    margin-bottom: 5px;
    border: 1px solid transparent;
    transition: all .2s;
}
.progress-step.active {
    background: rgba(192,57,43,.12);
    border-color: rgba(192,57,43,.35);
}
.progress-step.completed { opacity: .45; }
.progress-step-icon { font-size: 18px; flex-shrink: 0; }
.progress-step-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.progress-step-text strong { font-size: 13px; color: #F5EFE0; }
.progress-step-detail { font-size: 11px; color: #7A6A54; }

/* ────────────────────────────────────────────
   POI OVERLAY specific
─────────────────────────────────────────────*/
.poi-overlay-content { display: flex; flex-direction: column; gap: 12px; }
.poi-header { display: flex; flex-direction: column; gap: 10px; }
.poi-radius-selector {}
.poi-radius-labels { display: flex; justify-content: space-between; font-size: var(--text-xs); color: var(--ink-light); margin-top: 4px; }
.poi-stats { font-size: var(--text-sm); color: var(--ink-soft); }
.poi-global-actions { display: flex; gap: 8px; }
.poi-list-container { max-height: 40vh; max-height: 40dvh; overflow-y: auto; }
.poi-list {}
.poi-error { color: var(--color-danger); font-size: var(--text-sm); }
.poi-actions { display: flex; gap: 8px; justify-content: flex-end; margin-top: 8px; }

/* ────────────────────────────────────────────
   MOBILE DOCK (JS-generated, kept styled)
─────────────────────────────────────────────*/
.mobile-dock {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: 64px;
    background: var(--ink);
    display: flex;
    flex-direction: column;
    z-index: 350;
    box-shadow: 0 -4px 20px rgba(26,22,18,.4);
}

/* ── Barre de stats au-dessus des boutons du dock ── */
.mobile-dock-stats {
    display: none;  /* masquée par défaut, visible dès qu'une trace est chargée */
    flex-direction: row;
    justify-content: space-around;
    align-items: center;
    background: rgba(10,8,6,0.92);
    border-bottom: 1px solid rgba(255,255,255,.07);
    padding: 4px 8px;
    gap: 0;
    flex-shrink: 0;
}
.mobile-dock-stats.has-data { display: flex; }

.mobile-dock-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex: 1;
    padding: 2px 0;
    border-right: 1px solid rgba(255,255,255,.07);
}
.mobile-dock-stat:last-child { border-right: none; }

.mobile-dock-stat-val {
    font-family: 'Barlow Condensed', sans-serif;
    font-weight: 700;
    font-size: 13px;
    color: var(--paper);
    line-height: 1;
    letter-spacing: .01em;
}
.mobile-dock-stat-lbl {
    font-family: 'Inconsolata', monospace;
    font-size: 8px;
    color: var(--contour);
    letter-spacing: .1em;
    text-transform: uppercase;
    margin-top: 1px;
}

/* Boutons du dock dans une rangée fixe */
.mobile-dock-buttons {
    display: flex;
    flex: 1;
}
.mobile-dock-buttons .mobile-dock-btn {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    border: none;
    background: transparent;
    color: var(--sand);
    cursor: pointer;
    font-size: 10px;
    transition: all .15s;
    border-right: 1px solid rgba(255,255,255,.06);
}
.mobile-dock-btn:last-child { border-right: none; }
.mobile-dock-btn .icon { font-size: 20px; line-height: 1; }
.mobile-dock-btn .label {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
}
.mobile-dock-btn:hover { background: rgba(255,255,255,.07); color: var(--paper); }
.mobile-dock-btn.active { background: rgba(192,57,43,.15); color: var(--trail); }

/* .mobile-menu-btn supprimé — doublon avec bouton Traces du dock */


/* ────────────────────────────────────────────
   BOTTOM SHEET (JS-generated)
─────────────────────────────────────────────*/
.bottom-sheet {
    position: fixed;
    bottom: 64px;
    left: 0;
    right: 0;
    background: var(--parchment);
    border-top: 1px solid var(--sand);
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    z-index: 750;
    padding: 0 16px 16px;
    box-shadow: var(--shadow-xl);
    max-height: 60vh;  /* fallback */
    max-height: 60dvh;
    overflow-y: auto;
    animation: slideUp .25s ease;
    touch-action: pan-y;
}

/* Handle pill affiché en haut du sheet */
.bs-handle {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 10px 0 4px;
    cursor: grab;
    touch-action: none;
}
.bs-handle::after {
    content: '';
    width: 36px;
    height: 4px;
    background: var(--sand);
    border-radius: 2px;
}

.bottom-sheet-content {
    will-change: transform;
}
@keyframes slideUp {
    from { transform: translateY(100%); }
    to   { transform: translateY(0); }
}
.bottom-sheet-title {
    font-family: 'Barlow Condensed', sans-serif;
    font-weight: 700;
    font-size: 16px;
    text-transform: uppercase;
    letter-spacing: .04em;
    margin-bottom: 12px;
    color: var(--ink);
}
.bottom-sheet-btn {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 12px;
    border: 1px solid var(--sand);
    border-radius: var(--radius);
    background: white;
    color: var(--ink-soft);
    font-size: var(--text-sm);
    font-weight: 500;
    cursor: pointer;
    margin-bottom: 6px;
    transition: all .12s;
}
.bottom-sheet-btn:hover { border-color: var(--trail); color: var(--trail); }
.bottom-sheet-btn:disabled { opacity: .35; cursor: default; }
.bottom-sheet-btn .icon { font-size: 18px; }
.bottom-sheet-close {
    width: 100%;
    padding: 12px;
    border: none;
    background: rgba(26,22,18,.06);
    border-radius: var(--radius);
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--ink-soft);
    cursor: pointer;
    margin-top: 8px;
    transition: background .15s;
}
.bottom-sheet-close:hover { background: rgba(26,22,18,.12); }

/* ────────────────────────────────────────────
   ROUTING OVERLAY (JS-generated)
─────────────────────────────────────────────*/
/* ────────────────────────────────────────────
   ROUTING OVERLAY — premium redesign
─────────────────────────────────────────────*/
/* ────────────────────────────────────────────
   ROUTING OVERLAY — thème clair
─────────────────────────────────────────────*/
.routing-overlay {
    position: fixed;
    top: 80px;
    right: 16px;
    left: auto;
    z-index: 435; /* au-dessus du mobile-dock (350) */
    width: 310px;
    background: var(--parchment);
    border: 1px solid var(--sand);
    border-radius: 14px;
    box-shadow: 0 8px 40px rgba(26,22,18,.18), 0 2px 8px rgba(26,22,18,.1);
    color: var(--ink);
    overflow: visible;
    font-family: 'Inter', sans-serif;
    display: none;
    transition: opacity .2s;
}
.routing-overlay.show { display: block; }

.routing-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 13px 16px 11px;
    border-bottom: 1px solid var(--sand);
    cursor: grab;
    user-select: none;
    border-radius: 14px 14px 0 0;
    background: var(--parchment);
}
.routing-header:active { cursor: grabbing; }
.routing-header h3 {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--ink);
    margin: 0;
}
.close-routing {
    width: 24px; height: 24px;
    border: none;
    background: rgba(26,22,18,.08);
    border-radius: 50%;
    color: var(--ink-light);
    font-size: 14px;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all .15s;
    flex-shrink: 0;
}
.close-routing:hover { background: var(--trail); color: white; }

.routing-content {
    padding: 14px 16px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    border-radius: 0 0 14px 14px;
    background: var(--parchment);
    overflow: hidden;
}

/* Profile pills */
.routing-profile-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
}
.routing-pill {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    border-radius: 20px;
    border: 1px solid var(--sand);
    background: white;
    color: var(--ink-light);
    font-size: 11px;
    font-weight: 600;
    cursor: pointer;
    transition: all .15s;
    white-space: nowrap;
    font-family: 'Barlow Condensed', sans-serif;
    letter-spacing: .03em;
}
.routing-pill:hover { border-color: var(--trail); color: var(--trail); background: rgba(252,76,2,.06); }
.routing-pill.active { background: var(--trail); border-color: var(--trail); color: white; }
.routing-pill-icon { font-size: 13px; }

/* Stats band */
.routing-stats-band {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}
.routing-stat-cell {
    background: white;
    border: 1px solid var(--sand);
    border-radius: 8px;
    padding: 8px 10px;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.routing-stat-label {
    font-size: 9px;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--ink-light);
    font-family: 'Barlow Condensed', sans-serif;
}
.routing-stat-value {
    font-size: 16px;
    font-weight: 700;
    color: var(--ink);
    font-family: 'Inconsolata', monospace;
}
.routing-stat-value.placeholder { color: var(--sand); }

/* Waypoint list */
.rw-list {
    display: flex;
    flex-direction: column;
    gap: 5px;
    /* pas de max-height ni overflow — suggestions en portal fixed */
}

.rw-item {
    display: flex;
    align-items: center;
    gap: 6px;
}
.rw-item.rw-dragging { opacity: .4; }
.rw-item.rw-dragover { outline: 2px dashed var(--trail); border-radius: 8px; }

.rw-drag-handle {
    color: var(--sand);
    font-size: 14px;
    cursor: grab;
    flex-shrink: 0;
    user-select: none;
    line-height: 1;
}
.rw-drag-handle:hover { color: var(--ink-light); }

.rw-dot {
    font-size: 12px;
    flex-shrink: 0;
    width: 18px;
    text-align: center;
    line-height: 1;
    transition: filter .2s;
}
.rw-dot-focus { filter: drop-shadow(0 0 3px rgba(252,76,2,.6)); }

.rw-field-wrap {
    flex: 1;
    min-width: 0;
    /* pas de position:relative — suggestions en portal */
}

.rw-input {
    width: 100%;
    background: white;
    border: 1px solid var(--sand);
    border-radius: 8px;
    color: var(--ink);
    font-size: 12px;
    font-family: 'Inter', sans-serif;
    padding: 7px 10px;
    outline: none;
    transition: border-color .15s, box-shadow .15s;
    box-sizing: border-box;
}
.rw-input::placeholder { color: var(--ink-light); font-style: italic; opacity: .6; }
.rw-input:focus, .rw-input.rw-focus {
    border-color: var(--trail);
    box-shadow: 0 0 0 3px rgba(252,76,2,.12);
}

/* Suggestions portal — positionné en JS via fixed */
.rw-suggest-portal {
    position: fixed;
    z-index: var(--z-toast);
    background: var(--parchment);
    border: 1px solid var(--sand);
    border-radius: 10px;
    list-style: none;
    margin: 0; padding: 4px 0;
    box-shadow: 0 8px 32px rgba(26,22,18,.18);
    min-width: 220px;
    max-width: 310px;
    overflow: hidden;
    display: none;
}
.rw-suggest-portal.visible { display: block; }
.rw-suggest-item {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 8px 12px;
    font-size: 12px;
    color: var(--ink-soft);
    cursor: pointer;
    border-bottom: 1px solid rgba(184,168,136,.2);
    transition: background .1s;
    line-height: 1.4;
}
.rw-suggest-item:last-child { border-bottom: none; }
.rw-suggest-item:hover { background: rgba(252,76,2,.07); color: var(--trail); }
.rw-suggest-icon { font-size: 14px; flex-shrink: 0; margin-top: 1px; }
.rw-suggest-text { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.rw-remove {
    width: 20px; height: 20px;
    flex-shrink: 0;
    border: none;
    background: rgba(26,22,18,.07);
    border-radius: 50%;
    color: var(--ink-light);
    font-size: 13px;
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    transition: all .12s;
    padding: 0; line-height: 1;
}
.rw-remove:hover { background: var(--trail); color: white; }
.rw-remove-ph { width: 20px; flex-shrink: 0; }

.rw-add-btn {
    width: 100%;
    padding: 7px;
    border: 1px dashed var(--sand);
    border-radius: 8px;
    background: transparent;
    color: var(--ink-light);
    font-size: 12px;
    font-family: 'Inter', sans-serif;
    cursor: pointer;
    transition: all .15s;
    text-align: center;
}
.rw-add-btn:hover:not(:disabled) {
    border-color: var(--trail);
    color: var(--trail);
    background: rgba(252,76,2,.04);
}
.rw-add-btn:disabled { opacity: .35; cursor: default; }

/* Keep old classes for JS compat */
.routing-points-list { display: none; }

/* Action buttons */
.routing-actions {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 6px;
}
.routing-actions .btn {
    padding: 7px 0;
    font-size: 11px;
    font-weight: 700;
    border-radius: 8px;
    border: 1px solid var(--sand);
    background: white;
    color: var(--ink-soft);
    cursor: pointer;
    transition: all .15s;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    font-family: 'Barlow Condensed', sans-serif;
    letter-spacing: .05em;
    text-transform: uppercase;
}
.routing-actions .btn:hover:not(:disabled) { border-color: var(--ink); color: var(--ink); background: rgba(26,22,18,.05); }
.routing-actions .btn:disabled { opacity: .3; cursor: default; }
.routing-actions .btn .btn-ico { font-size: 15px; }
.routing-actions .btn-save { background: var(--trail) !important; border-color: var(--trail) !important; color: white !important; }
.routing-actions .btn-save:hover:not(:disabled) { filter: brightness(1.08); }

/* Engine badge */
.routing-engine-badge {
    font-size: 10px;
    color: var(--ink-light);
    text-align: center;
    font-family: 'Barlow Condensed', sans-serif;
    letter-spacing: .05em;
    opacity: .5;
}

/* ────────────────────────────────────────────
   MAP STYLE PANEL
─────────────────────────────────────────────*/
.map-style-panel {
    position: fixed;
    bottom: calc(var(--toolbar-h) + 12px);
    left: 70px;
    z-index: 340;
    width: 300px;
    background: rgba(26,22,18,.93);
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 14px;
    box-shadow: 0 8px 40px rgba(0,0,0,.45);
    backdrop-filter: blur(16px);
    color: var(--paper);
    overflow: hidden;
    font-family: 'Inter', sans-serif;
    opacity: 0;
    pointer-events: none;
    transform: translateY(8px) scale(.97);
    transition: opacity .18s, transform .18s;
}
.map-style-panel.open {
    opacity: 1;
    pointer-events: all;
    transform: translateY(0) scale(1);
}

.msp-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 13px 16px 11px;
    border-bottom: 1px solid rgba(255,255,255,.07);
}
.msp-title {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: rgba(255,255,255,.7);
}
.msp-close {
    width: 24px; height: 24px;
    border: none;
    background: rgba(255,255,255,.1);
    border-radius: 50%;
    color: var(--paper);
    font-size: 14px;
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    transition: background .15s;
    line-height: 1;
}
.msp-close:hover { background: var(--trail); }

.msp-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    padding: 12px;
    /* v556 : 13 fonds, le panneau ne doit pas sortir de l'écran */
    max-height: min(52vh, 380px);
    overflow-y: auto;
    overscroll-behavior: contain;
}

.msp-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    border: 2px solid transparent;
    border-radius: 10px;
    background: rgba(255,255,255,.05);
    padding: 6px 4px 8px;
    cursor: pointer;
    transition: all .15s;
}
.msp-card:hover {
    background: rgba(255,255,255,.1);
    border-color: rgba(255,255,255,.2);
}
.msp-card.active {
    border-color: var(--trail);
    background: rgba(180,70,50,.15);
}

.msp-thumb {
    width: 68px; height: 48px;
    border-radius: 6px;
    background-size: cover;
    background-position: center;
    background-color: rgba(255,255,255,.08);
    position: relative;
    overflow: hidden;
    flex-shrink: 0;
}
.msp-icon {
    position: absolute;
    bottom: 3px; right: 4px;
    font-size: 13px;
    filter: drop-shadow(0 1px 2px rgba(0,0,0,.6));
}
.msp-name {
    font-size: 11px;
    font-weight: 600;
    color: rgba(255,255,255,.7);
    text-align: center;
    font-family: 'Barlow Condensed', sans-serif;
    letter-spacing: .04em;
    text-transform: uppercase;
}
.msp-card.active .msp-name { color: white; }

/* ────────────────────────────────────────────
   SIMULATION OVERLAY (JS-generated)
─────────────────────────────────────────────*/
.simulation-overlay {
    position: fixed;
    inset: 0;
    background: rgba(26,22,18,.55);
    z-index: 700;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 20px;
    backdrop-filter: blur(4px);
}

/* ────────────────────────────────────────────
   SLOPE LEGEND — redesign premium
─────────────────────────────────────────────*/
.slope-legend {
    position: fixed;
    top: 110px;
    left: 70px;
    z-index: 310;
    width: 210px;
    background: rgba(26,22,18,.92);
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 12px;
    box-shadow: 0 8px 32px rgba(0,0,0,.45);
    backdrop-filter: blur(14px);
    color: var(--paper);
    overflow: hidden;
    font-family: 'Inter', sans-serif;
}

.sl-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 12px 8px;
    border-bottom: 1px solid rgba(255,255,255,.07);
}
.sl-title {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: rgba(255,255,255,.65);
}
.sl-close {
    width: 22px; height: 22px;
    border: none;
    background: rgba(255,255,255,.1);
    border-radius: 50%;
    color: var(--paper);
    font-size: 13px;
    line-height: 1;
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    transition: background .15s;
    flex-shrink: 0;
}
.sl-close:hover { background: var(--trail); }

.sl-body {
    display: flex;
    gap: 8px;
    padding: 10px 12px 12px;
    align-items: stretch;
}

.sl-gradient {
    width: 8px;
    border-radius: 4px;
    flex-shrink: 0;
    min-height: 100%;
}

.sl-rows {
    display: flex;
    flex-direction: column;
    gap: 3px;
    flex: 1;
}

.sl-row {
    display: flex;
    align-items: center;
    gap: 7px;
}

.sl-swatch {
    width: 10px; height: 10px;
    border-radius: 2px;
    flex-shrink: 0;
    border: 1px solid rgba(255,255,255,.15);
}

.sl-label {
    font-size: 10.5px;
    color: rgba(255,255,255,.65);
    font-family: 'Inconsolata', monospace;
    white-space: nowrap;
}

.sl-row:nth-child(7) .sl-label { color: #38A169; font-weight: 700; }  /* plat */

/* ────────────────────────────────────────────
   LEAFLET OVERRIDES
─────────────────────────────────────────────*/
/* Fix: supprime la bordure noire rectangulaire autour des traces SVG Leaflet */
.leaflet-overlay-pane svg,
.leaflet-overlay-pane path,
path.leaflet-interactive { outline: none !important; }

.leaflet-control-zoom {
    border: 1px solid var(--sand) !important;
    border-radius: var(--radius) !important;
    overflow: hidden;
    box-shadow: var(--shadow-sm) !important;
}
.leaflet-control-zoom a {
    background: rgba(245,240,232,0.97) !important;
    color: var(--ink) !important;
    font-size: 16px !important;
    transition: background .12s;
}
.leaflet-control-zoom a:hover { background: var(--ink) !important; color: var(--paper) !important; }
.leaflet-bar { border-radius: var(--radius) !important; }

/* ────────────────────────────────────────────
   MOBILE — geolocation buttons (kept for JS compatibility)
─────────────────────────────────────────────*/
.geolocation-btn-mobile {
    position: fixed;
    right: 16px;
    top: 16px; /* desktop */
    width: 44px; height: 44px;
    border-radius: 50%;
    border: none;
    background: rgba(245,240,232,0.97);
    border: 1px solid var(--sand);
    font-size: 18px;
    cursor: pointer;
    z-index: 400;
    display: none; /* hidden on desktop, JS shows on mobile */
    align-items: center;
    justify-content: center;
    box-shadow: var(--shadow-sm);
    text-decoration: none;
    color: var(--ink-soft);
}
/* map-style-btn-mobile est juste au-dessus de geolocation-btn-mobile */
#map-style-btn-mobile {
    top: 72px; /* desktop uniquement — écrasé sur mobile par bottom: */
}

/* ────────────────────────────────────────────
   UTILITIES
─────────────────────────────────────────────*/
.hidden { display: none !important; }
.file-input { display: none; }
.time-data-info {
    background: rgba(39,174,96,.1);
    border: 1px solid rgba(39,174,96,.3);
    border-radius: var(--radius);
    padding: 10px 14px;
    font-size: var(--text-sm);
    color: var(--color-success);
    margin-bottom: 12px;
}
.simplify-preview {}
.preview-content { background: var(--parchment); border: 1px solid var(--sand); border-radius: var(--radius); padding: 12px; font-size: var(--text-sm); }

/* ────────────────────────────────────────────
   RESPONSIVE
─────────────────────────────────────────────*/

/* ════════════════════════════════════════════════════════
   BOTTOM SHEET — header, grille, cartes traçage
   ════════════════════════════════════════════════════════ */

/* Header : titre centré, croix absolute top-right */
.bottom-sheet-header {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px 44px 12px;
    border-bottom: 1px solid rgba(26,22,18,.1);
    margin-bottom: 14px;
    flex-shrink: 0;
}
.bottom-sheet-header h3 {
    margin: 0;
    font-family: 'Barlow Condensed', sans-serif;
    font-weight: 700;
    font-size: 1rem;
    text-transform: uppercase;
    letter-spacing: .07em;
    color: var(--ink);
}
.bottom-sheet-header > button {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    width: 30px;
    height: 30px;
    border: none;
    background: rgba(26,22,18,.08);
    border-radius: 50%;
    font-size: 16px;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: var(--ink);
    transition: background .12s;
    flex-shrink: 0;
}
.bottom-sheet-header > button:hover { background: rgba(26,22,18,.16); }

/* Grille d'actions — 4 colonnes */
.tools-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
    padding-bottom: 4px;
}
.tools-grid > button {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 12px 6px;
    border: 1px solid var(--sand);
    border-radius: var(--radius);
    background: white;
    cursor: pointer;
    transition: background .12s, border-color .12s;
    min-height: 70px;
    -webkit-tap-highlight-color: transparent;
}
.tools-grid > button:hover,
.tools-grid > button:active { background: rgba(192,57,43,.05); border-color: var(--trail); }
.tools-grid > button .icon     { font-size: 22px; line-height: 1; }
.tools-grid > button .label    { font-size: .68rem; font-weight: 700; color: var(--ink); font-family: 'Inter', sans-serif; text-align: center; line-height: 1.2; }
.tools-grid > button .sublabel { font-size: .6rem; color: var(--ink-light); font-family: 'Inter', sans-serif; text-align: center; display: none; }

/* Cards traçage */
.draw-options {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.draw-option-card {
    display: flex;
    align-items: center;
    gap: 14px;
    width: 100%;
    padding: 14px 16px;
    border: 1px solid var(--sand);
    border-radius: var(--radius);
    background: white;
    cursor: pointer;
    text-align: left;
    transition: background .12s, border-color .12s;
    -webkit-tap-highlight-color: transparent;
}
.draw-option-card:hover,
.draw-option-card:active { background: rgba(192,57,43,.05); border-color: var(--trail); }
.draw-option-card .option-icon { font-size: 30px; flex-shrink: 0; line-height: 1; }
.draw-option-card .option-content h4 {
    font-family: 'Barlow Condensed', sans-serif;
    font-weight: 700;
    font-size: 1rem;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--ink);
    margin: 0 0 3px;
}
.draw-option-card .option-content p {
    font-size: .75rem;
    color: var(--ink-light);
    margin: 0;
    font-family: 'Inter', sans-serif;
    line-height: 1.35;
}

/* ══ Fix iOS scroll ── -webkit-overflow-scrolling: touch ══ */
.sidebar,
.legal-modal,
.bottom-sheet,
.legal-content,
.poi-list-container,
.routing-points-list,
.cmp-table-wrap,
.export-content,
#export-content,
.tp-tab-content.active {
    -webkit-overflow-scrolling: touch;
}


/* ── Sélecteur de langue mobile — base (hors media query) ─────────── */
.lang-switcher-mobile {
    /* Même positionnement que geolocation-btn-mobile, mais indépendant */
    position: fixed;
    right: 16px;
    top: 176px;       /* 124px (geo) + 44px (hauteur) + 8px (gap) */
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: rgba(245,240,232,0.97);
    border: 1px solid var(--sand);
    box-shadow: var(--shadow-sm);
    z-index: 400;
    display: none;    /* affiché uniquement en mobile via media query */
    align-items: center;
    justify-content: center;
    overflow: visible;
    cursor: pointer;
}
.lang-trigger-mobile {
    width: 100%;
    height: 100%;
    background: transparent;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1px;
    font-size: 18px;
    color: var(--ink-soft);
    border-radius: 50%;
}
.lang-trigger-mobile:hover,
.lang-trigger-mobile:active {
    background: rgba(0,0,0,.06);
}
.lang-trigger-mobile .lang-arrow {
    font-size: 8px;
    margin-top: 2px;
    transition: transform .15s;
}
.lang-trigger-mobile[aria-expanded="true"] .lang-arrow {
    transform: rotate(180deg);
}
.lang-dropdown-mobile {
    position: absolute;
    right: 0;       /* aligné sur le bord droit du bouton */
    top: 0;
    left: auto;
    transform: translateX(calc(-100% - 8px)); /* pousse vers la gauche */
}

@media (max-width: 767px) {
    .toolbar { display: none; } /* replaced by mobile-dock */
    .float-header { display: none; }

    /* Logo mobile bas-droite */
    .float-header-mobile {
        display: flex;
        align-items: center;
        gap: 8px;
        position: fixed;
        bottom: calc(76px + 10px); /* au-dessus du dock mobile (64 boutons + 12 stats) */
        right: 12px;
        z-index: 300;
    }
    .logo-block-mobile {
        background: rgba(26,22,18,0.85);
        color: var(--paper);
        padding: 5px 10px 4px;
        border-radius: var(--radius);
        line-height: 1;
        box-shadow: var(--shadow-md);
        backdrop-filter: blur(8px);
        border: 1px solid rgba(255,255,255,.08);
    }
    .logo-block-mobile .logo-main { font-family: 'Barlow Condensed', sans-serif; font-weight: 900; font-size: 16px; letter-spacing: -.02em; display: block; }
    .logo-block-mobile .logo-sub  { font-family: 'Inconsolata', monospace; font-size: 7px; letter-spacing: .16em; color: var(--contour); text-transform: uppercase; display: block; margin-top: 1px; }
    .map-controls { display: none; }
    /* boutons flottants mobiles : gérés dans le bloc consolidé en bas */
    /* Cacher les stats sous le profil sur mobile (déjà affichées en haut) */
    /* elevation-stats-container is now the side col stats - keep visible */
    /* Cacher la barre d'instruction sélection (inutilisable sans souris) */
    #small-profile-sel-tooltip { display: none !important; }
    /* Stats-strip repositionnée sur mobile */
    .stats-strip {
        top: 8px;
        right: 8px;
        gap: 3px;
    }
    .stat-chip {
        padding: 6px 10px;
        min-width: 54px;
        font-size: .72rem;
    }
    /* .geolocation-btn-mobile display géré dans le bloc consolidé */
    .elevation-profile-container {
        left: 8px;
        right: 8px;
        bottom: calc(64px + 8px); /* dock 64px + marge */
        transform: none;
        width: auto;
        height: 160px;
        min-height: 120px;
        max-height: calc(100dvh - 64px - 16px);
    }
    .elevation-profile-container.hidden { transform: translateY(20px); }
    /* Colonne latérale plus compacte sur mobile */
    .ep-side-col {
        width: 90px;
        padding: 7px 6px 6px 8px;
        gap: 4px;
    }
    .ep-side-title { font-size: 10px; }
    .elevation-stat-value { font-size: 10px; }
    .elevation-stat-label { font-size: 8px; }
    .legal-modal { padding: 20px 16px; }

    /* Boutons d'action export : 2 colonnes sur mobile */
    #export-overlay .legal-modal > div:last-child {
        display: grid !important;
        grid-template-columns: 1fr 1fr;
        gap: 8px;
        justify-content: unset;
    }
}

@media (min-width: 768px) and (max-width: 1024px) {
    /* Tablette : même dock que mobile, toolbar cachée */
    .toolbar { display: none !important; }
    .float-header { display: none !important; }
    .map-controls { display: none !important; }
    .mobile-dock { display: flex !important; }
    .float-header-mobile { display: flex !important; }
    /* Dropdown langue s'ouvre vers la gauche (boutons à droite) */
    .lang-dropdown-mobile {
        right: 0;
        left: auto;
        transform: translateX(calc(-100% - 8px));
    }
    /* Panel unités s'ouvre vers le bas (bouton en haut à droite) */
    .units-panel {
        top: 168px !important;
        right: 68px !important;
        bottom: auto !important;
        left: auto !important;
        transform: none !important;
        width: 240px;
    }
    .units-panel.open { transform: none !important; }
}

@media (min-width: 1025px) {
    .sidebar {
        /* on desktop, keep sidebar togglable from toolbar */
    }
    /* Masquer les éléments exclusivement mobiles créés dynamiquement par JS */
    .mobile-dock        { display: none !important; }
    .mobile-menu-btn    { display: none !important; }
    .float-header-mobile{ display: none !important; }
    .geolocation-btn-mobile { display: none !important; }
    .lang-switcher-mobile { display: none !important; }
    /* v546 : la recherche de lieu a son bouton dans la barre d'outils en
       desktop. L'entrée de la sidebar ne sert qu'au mobile, où cette barre
       est masquée — inutile de proposer deux fois la même chose. */
    .sdb-btn[data-geosearch-toggle] { display: none; }
}

/* ────────────────────────────────────────────
   EXPORT/SIMULATOR/ROUTING specific inputs
   (keep existing inline styles working)
─────────────────────────────────────────────*/
.legal-modal input[type="text"],
.legal-modal input[type="url"],
.legal-modal textarea,
.legal-modal select {
    width: 100%;
    padding: 9px 12px;
    border: 1px solid var(--sand);
    border-radius: var(--radius);
    font-size: var(--text-sm);
    color: var(--ink);
    background: white;
    transition: border-color .15s;
    outline: none;
    font-family: inherit;
}
.legal-modal input[type="text"]:focus,
.legal-modal input[type="url"]:focus,
.legal-modal textarea:focus,
.legal-modal select:focus {
    border-color: var(--trail);
    box-shadow: 0 0 0 3px var(--trail-glow);
}
.legal-modal textarea { resize: vertical; }

/* ────────────────────────────────────────────
   REMODELER — UI inline dans le panneau outils
─────────────────────────────────────────────*/
.reshape-density-wrap {
    display: flex;
    flex-direction: column;
    gap: 5px;
    padding: 8px 14px 6px;
}
.reshape-density-label-title {
    font-family: 'Inconsolata', monospace;
    font-size: 9px;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--ink-light);
}
.reshape-slider {
    width: 100%;
    accent-color: var(--trail);
    cursor: pointer;
    height: 4px;
}
.reshape-density-val {
    font-size: 11px;
    color: var(--ink-soft);
    font-family: 'Barlow Condensed', sans-serif;
    letter-spacing: .03em;
}
.reshape-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
    padding: 6px 14px 10px;
}
.reshape-cancel-btn, .reshape-validate-btn {
    padding: 7px 0;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 700;
    font-family: 'Barlow Condensed', sans-serif;
    letter-spacing: .05em;
    text-transform: uppercase;
    cursor: pointer;
    border: 1px solid var(--sand);
    transition: all .15s;
}
.reshape-cancel-btn {
    background: white;
    color: var(--ink-soft);
}
.reshape-cancel-btn:hover { border-color: var(--ink); background: rgba(26,22,18,.06); }
.reshape-validate-btn {
    background: var(--trail);
    border-color: var(--trail);
    color: white;
}
.reshape-validate-btn:hover:not(:disabled) { filter: brightness(1.08); }
.reshape-validate-btn:disabled { opacity: .4; cursor: default; }

/* ====================================================
   PANNEAU POI
==================================================== */
.poi-panel {
    position: fixed;
    left: 12px;
    bottom: 80px;
    width: 290px;
    max-height: calc(100vh - 120px);  /* fallback */
    max-height: calc(100dvh - 120px);
    background: var(--parchment);
    border: 1px solid var(--sand);
    border-radius: 14px;
    box-shadow: var(--shadow-xl);
    z-index: 440;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    font-family: 'Barlow Condensed', sans-serif;
}
.poi-panel.pinned { border-color: var(--trail); }

.poi-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 10px 0;
    gap: 6px;
    flex-shrink: 0;
    cursor: default;
}
.poi-panel.pinned .poi-panel-header { cursor: grab; }
.poi-panel.pinned .poi-panel-header:active { cursor: grabbing; }

.poi-panel-tabs {
    display: flex;
    gap: 4px;
    flex: 1;
}
.poi-panel-tab {
    flex: 1;
    padding: 6px 8px;
    border: 1px solid var(--sand);
    border-radius: 8px;
    background: white;
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .03em;
    color: var(--ink-light);
    cursor: pointer;
    transition: all .15s;
}
.poi-panel-tab.active {
    background: var(--trail);
    border-color: var(--trail);
    color: white;
}
.poi-panel-tab:hover:not(.active) { border-color: var(--trail); color: var(--trail); }

.poi-panel-hactions {
    display: flex;
    gap: 4px;
    flex-shrink: 0;
}
.poi-panel-pin, .poi-panel-close {
    width: 26px; height: 26px;
    border-radius: 6px;
    border: 1px solid var(--sand);
    background: white;
    cursor: pointer;
    font-size: 13px;
    display: flex; align-items: center; justify-content: center;
    transition: all .15s;
}
.poi-panel-pin:hover  { border-color: var(--trail); background: rgba(252,76,2,.08); }
.poi-panel-close:hover { border-color: var(--ink); background: rgba(26,22,18,.07); }
.poi-panel-pin.active { background: rgba(252,76,2,.15); border-color: var(--trail); }

.poi-panel-content {
    display: none;
    flex-direction: column;
    overflow-y: auto;
    padding: 10px 12px 12px;
    gap: 6px;
    flex: 1;
}
.poi-panel-content.active { display: flex; }

.poi-panel-section {
    font-size: 9px;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--ink-light);
    font-weight: 600;
    margin-top: 6px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.poi-cat-toggle-all {
    font-size: 10px;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--trail);
    cursor: pointer;
    font-weight: 700;
    padding: 1px 6px;
    border-radius: 4px;
    border: 1px solid var(--trail);
    transition: all .12s;
}
.poi-cat-toggle-all:hover { background: var(--trail); color: white; }

/* Slider rayon */
.poi-radius-wrap {
    display: flex;
    align-items: center;
    gap: 8px;
}
.poi-slider {
    flex: 1;
    accent-color: var(--trail);
    height: 4px;
    cursor: pointer;
}
.poi-radius-label {
    font-size: 12px;
    color: var(--ink-soft);
    font-weight: 600;
    min-width: 46px;
    text-align: right;
}

/* Grille categories */
.poi-cat-grid {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.poi-cat-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 8px;
    border-radius: 8px;
    border: 1px solid var(--sand);
    background: white;
    cursor: pointer;
    transition: all .12s;
    user-select: none;
}
.poi-cat-item:hover { border-color: var(--trail); }
.poi-cat-item.checked { background: rgba(252,76,2,.07); border-color: var(--trail); }
.poi-cat-item input[type=checkbox] {
    accent-color: var(--trail);
    width: 14px; height: 14px;
    cursor: pointer;
    flex-shrink: 0;
}
.poi-cat-icon { font-size: 16px; flex-shrink: 0; }
.poi-cat-name {
    font-size: 12px;
    font-weight: 600;
    color: var(--ink);
    line-height: 1.2;
}

/* Footer boutons */
.poi-panel-footer {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 6px;
    margin-top: 8px;
    flex-shrink: 0;
}
.poi-clear-btn {
    padding: 8px 12px;
    border-radius: 8px;
    border: 1px solid var(--sand);
    background: white;
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 12px;
    font-weight: 600;
    color: var(--ink-soft);
    cursor: pointer;
    transition: all .15s;
    white-space: nowrap;
}
.poi-clear-btn:hover { border-color: var(--ink); background: rgba(26,22,18,.06); }
.poi-search-btn {
    padding: 8px 0;
    border-radius: 8px;
    border: none;
    background: var(--trail);
    color: white;
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    cursor: pointer;
    transition: filter .15s;
}
.poi-search-btn:hover { filter: brightness(1.08); }
.poi-search-btn:disabled { opacity: .4; cursor: default; filter: none; }

/* Statut / spinner */
.poi-panel-status {
    font-size: 11px;
    color: var(--ink-soft);
    text-align: center;
    min-height: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}
.poi-spinner {
    width: 14px; height: 14px;
    border: 2px solid var(--sand);
    border-top-color: var(--trail);
    border-radius: 50%;
    animation: poi-spin .7s linear infinite;
    flex-shrink: 0;
}
@keyframes poi-spin { to { transform: rotate(360deg); } }

/* Zone info */
.poi-zone-info {
    font-size: 11px;
    color: var(--ink-soft);
    background: rgba(252,76,2,.06);
    border: 1px solid rgba(252,76,2,.2);
    border-radius: 6px;
    padding: 6px 10px;
    line-height: 1.4;
}

/* Barre actualiser */
.poi-refresh-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: rgba(252,76,2,.08);
    border: 1px solid rgba(252,76,2,.3);
    border-radius: 8px;
    padding: 6px 10px;
    font-size: 11px;
    color: var(--ink-soft);
    margin-top: 4px;
    flex-shrink: 0;
}
.poi-refresh-bar button {
    padding: 3px 10px;
    border-radius: 6px;
    border: 1px solid var(--trail);
    background: var(--trail);
    color: white;
    font-size: 11px;
    font-weight: 700;
    cursor: pointer;
    font-family: 'Barlow Condensed', sans-serif;
}

/* ====================================================
   ACCORDEON CATEGORIES POI
==================================================== */
.poi-cat-grid {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.poi-acc-cat {
    border: 1px solid var(--sand);
    border-radius: 8px;
    overflow: hidden;
    background: white;
}
.poi-acc-cat-row {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 7px 9px;
    cursor: pointer;
    transition: background .12s;
    user-select: none;
}
.poi-acc-cat-row:hover { background: rgba(252,76,2,.06); }

.poi-acc-cat-cb {
    accent-color: var(--trail);
    width: 14px; height: 14px;
    cursor: pointer;
    flex-shrink: 0;
}
.poi-acc-cat-icon { font-size: 15px; flex-shrink: 0; }
.poi-acc-cat-name {
    flex: 1;
    font-size: 12px;
    font-weight: 600;
    color: var(--ink);
}
.poi-acc-arrow {
    font-size: 9px;
    color: var(--ink-light);
    transition: transform .15s;
    flex-shrink: 0;
}

/* Sous-categories */
.poi-acc-subs {
    display: flex;
    flex-direction: column;
    border-top: 1px solid var(--sand);
    background: rgba(237,229,208,.4);
    padding: 3px 0;
}
.poi-acc-sub-row {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 5px 9px 5px 24px;
    cursor: pointer;
    transition: background .1s;
    user-select: none;
}
.poi-acc-sub-row:hover { background: rgba(252,76,2,.08); }
.poi-acc-sub-cb {
    accent-color: var(--trail);
    width: 13px; height: 13px;
    cursor: pointer;
    flex-shrink: 0;
}
.poi-acc-sub-icon { font-size: 13px; flex-shrink: 0; }
.poi-acc-sub-name {
    font-size: 11px;
    color: var(--ink-soft);
    font-weight: 500;
}

/* ====================================================
   POI PANEL — BOTTOM SHEET (petit écran ≤ 768px)
==================================================== */

/* Poignée — masquée sur desktop */
.poi-panel-handle {
    display: none;
}

@media (max-width: 767px) {

    /* Repositionnement en bottom sheet */
    .poi-panel {
        left: 0;
        right: 0;
        bottom: 0;
        width: 100%;
        max-width: 100%;
        border-radius: 18px 18px 0 0;
        max-height: 58dvh;
        /* Animation slide-up */
        transform: translateY(0);
        transition: transform .25s cubic-bezier(.32,.72,0,1);
    }

    /* Poignée visible */
    .poi-panel-handle {
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 10px 0 4px;
        flex-shrink: 0;
        cursor: grab;
        touch-action: none;
    }
    .poi-panel-handle span {
        display: block;
        width: 36px;
        height: 4px;
        border-radius: 2px;
        background: var(--sand);
    }

    /* Header plus compact */
    .poi-panel-header {
        padding: 4px 10px 0;
    }

    /* Cacher le bouton pin (inutile en bottom sheet) */
    .poi-panel-pin {
        display: none;
    }

    /* Contenu scrollable */
    .poi-panel-content {
        padding: 8px 12px 16px;
        /* Espace pour la barre de navigation iOS */
        padding-bottom: max(16px, env(safe-area-inset-bottom));
    }

    /* Grille catégories plus compacte */
    .poi-acc-cat-row {
        padding: 6px 9px;
    }
    .poi-acc-sub-row {
        padding: 4px 9px 4px 22px;
    }

    /* Footer collé en bas */
    .poi-panel-footer {
        margin-top: 6px;
    }
}

/* Overlay semi-transparent derrière le bottom sheet */
.poi-panel-backdrop {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.35);
    z-index: 409;
    backdrop-filter: blur(1px);
}
@media (max-width: 767px) {
    .poi-panel-backdrop.visible {
        display: block;
    }
}


/* Ligne limite */
.poi-limit-row {
    display: flex;
    align-items: center;
    gap: 7px;
    margin-top: 2px;
}
.poi-limit-label {
    font-size: 11px;
    color: var(--ink-soft);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .06em;
}
.poi-limit-select {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 12px;
    font-weight: 600;
    color: var(--ink);
    border: 1px solid var(--sand);
    border-radius: 6px;
    padding: 3px 6px;
    background: white;
    cursor: pointer;
    accent-color: var(--trail);
}
.poi-limit-select:focus { outline: none; border-color: var(--trail); }
.poi-limit-hint {
    font-size: 10px;
    color: var(--ink-light);
}

/* Marqueurs colorés par couche */
.poi-marker-trace .poi-marker-inner {
    outline: 2px solid #FC4C02;
    outline-offset: 1px;
    border-radius: 50%;
}
.poi-marker-zone .poi-marker-inner {
    outline: 2px solid #4299E1;
    outline-offset: 1px;
    border-radius: 50%;
}

/* Barre couches */
.poi-layers-bar {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 12px;
    border-top: 1px solid var(--sand);
    background: rgba(237,229,208,.5);
    flex-shrink: 0;
    flex-wrap: wrap;
}
.poi-layers-title {
    font-size: 9px;
    text-transform: uppercase;
    letter-spacing: .1em;
    color: var(--ink-light);
    font-weight: 700;
}
.poi-layer-toggle {
    display: flex;
    align-items: center;
    gap: 5px;
    cursor: pointer;
    font-size: 11px;
    color: var(--ink-soft);
    font-weight: 600;
    user-select: none;
}
.poi-layer-toggle input { accent-color: var(--trail); cursor: pointer; }
.poi-layer-dot {
    width: 8px; height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}
.poi-layer-dot-trace { background: #FC4C02; }
.poi-layer-dot-zone  { background: #4299E1; }
.poi-layers-clear-all {
    margin-left: auto;
    padding: 3px 9px;
    border-radius: 6px;
    border: 1px solid var(--sand);
    background: white;
    font-size: 11px;
    font-family: 'Barlow Condensed', sans-serif;
    font-weight: 600;
    color: var(--ink-soft);
    cursor: pointer;
    transition: all .12s;
}
.poi-layers-clear-all:hover { border-color: var(--ink); background: rgba(26,22,18,.06); }

/* ====================================================
   POI v3 — Limite, couches, dot couleur
==================================================== */

/* Sélecteur de limite */
.poi-limit-row {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 2px;
}
.poi-limit-label {
    font-size: 11px;
    color: var(--ink-light);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .06em;
}
.poi-limit-select {
    padding: 3px 6px;
    border-radius: 6px;
    border: 1px solid var(--sand);
    background: white;
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 12px;
    font-weight: 600;
    color: var(--ink);
    cursor: pointer;
}
.poi-limit-hint {
    font-size: 11px;
    color: var(--ink-light);
}

/* Barre couches */
.poi-layers-bar {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 12px;
    border-top: 1px solid var(--sand);
    background: rgba(237,229,208,.6);
    flex-shrink: 0;
}
.poi-layers-title {
    font-size: 9px;
    text-transform: uppercase;
    letter-spacing: .1em;
    color: var(--ink-light);
    font-weight: 700;
    flex-shrink: 0;
}
.poi-layer-toggle {
    display: flex;
    align-items: center;
    gap: 5px;
    cursor: pointer;
    font-size: 11px;
    color: var(--ink-soft);
    font-weight: 500;
    user-select: none;
}
.poi-layer-toggle input[type=checkbox] {
    accent-color: var(--trail);
    width: 13px; height: 13px;
}
.poi-layer-dot {
    width: 10px; height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
}
.poi-layer-dot-trace { background: #FC4C02; }
.poi-layer-dot-zone  { background: #4299E1; }

/* Marqueur POI coloré */
.poi-marker-dot {
    width: 28px; height: 28px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    box-shadow: 0 2px 6px rgba(0,0,0,.35);
    border: 2px solid white;
}

/* Status warning (troncature) */
.poi-status-warn {
    color: #c05621;
    font-weight: 600;
}

/* ============================================================
   LOOP PLANNER
   ============================================================ */


@keyframes lpSpin { to { transform: rotate(360deg); } }



/* ── Routing overlay : structure duale ── */
.ro-mobile  { display: none; }
.ro-desktop { display: block; }

@media (max-width: 767px) {
    .tools-panel {
        bottom: 70px;
        left: 8px;
        right: 8px;
        width: auto;
        max-height: 70dvh;
    }

    /* Routing overlay mobile : barre 2 lignes pleine largeur */
    .routing-overlay {
        top: auto;
        bottom: 64px;
        left: 0;
        right: 0;
        width: 100%;
        border-radius: 0;
        padding: 0;
        box-shadow: 0 -2px 12px rgba(26,22,18,.3);
        overflow: visible;
    }
    .ro-desktop { display: none; }
    .ro-mobile  { display: block; }

    /* Ligne 1 — Stats */
    .ro-mobile-stats {
        display: flex;
        align-items: center;
        justify-content: space-around;
        background: rgba(26,22,18,.93);
        padding: 5px 12px;
        border-bottom: 1px solid rgba(255,255,255,.08);
    }
    .rms-item {
        display: flex;
        flex-direction: column;
        align-items: center;
        flex: 1;
    }
    .rms-val {
        font-weight: 700;
        font-size: 16px;
        color: #f5f0e8;
        line-height: 1;
    }
    .rms-lbl {
        font-size: 9px;
        letter-spacing: .08em;
        text-transform: uppercase;
        color: #8a7f6e;
        margin-top: 2px;
    }
    .rms-sep {
        width: 1px;
        height: 24px;
        background: rgba(255,255,255,.1);
        flex-shrink: 0;
    }

    /* Ligne 2 — Actions */
    .ro-mobile-bar {
        display: flex;
        align-items: center;
        gap: 6px;
        background: #f5f0e8;
        padding: 6px 10px;
    }
    .ro-mobile-select {
        flex: 1;
        min-width: 0;
        padding: 7px 8px;
        border: 1px solid #d4c9b0;
        border-radius: 6px;
        font-size: 13px;
        color: #1a1612;
        background: white;
        outline: none;
    }
    .ro-mobile-btn {
        flex-shrink: 0;
        height: 36px;
        border-radius: 6px;
        border: none;
        cursor: pointer;
        font-size: 13px;
        font-weight: 600;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 0 10px;
        transition: filter .15s;
    }
    .ro-mobile-clear {
        background: rgba(26,22,18,.08);
        color: #1a1612;
        width: 36px;
        padding: 0;
        font-size: 16px;
    }
    .ro-mobile-save {
        background: #2d6a4f;
        color: white;
        white-space: nowrap;
    }
    .ro-mobile-save:hover { filter: brightness(1.1); }
    .ro-mobile-close {
        background: rgba(26,22,18,.08);
        color: #1a1612;
        width: 32px;
        padding: 0;
    }
    .ro-mobile-close:hover { background: #2d6a4f; color: white; }
}


/* ══════════════════════════════════════════════════════════════
   PROGRESS SPINNER — feedback visuel opérations longues
   ══════════════════════════════════════════════════════════════ */
#op-progress-bar {
    position: fixed;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: var(--trail);
    z-index: var(--z-mode-bar);
    transform-origin: left;
    transform: scaleX(0);
    transition: transform .3s ease, opacity .4s ease;
    opacity: 0;
    box-shadow: 0 0 8px rgba(192,57,43,.6);
}
#op-progress-bar.active {
    opacity: 1;
}
#op-progress-bar.indeterminate {
    animation: progressIndeterminate 1.4s ease infinite;
    transform: scaleX(1);
}
@keyframes progressIndeterminate {
    0%   { transform: translateX(-100%) scaleX(.4); }
    50%  { transform: translateX(30%)   scaleX(.5); }
    100% { transform: translateX(100%)  scaleX(.4); }
}

#op-progress-toast {
    position: fixed;
    bottom: calc(64px + 16px); /* au-dessus du dock */
    left: 50%;
    transform: translateX(-50%) translateY(12px);
    background: var(--ink);
    color: var(--paper);
    padding: 8px 18px 8px 14px;
    border-radius: 20px;
    font-size: .8rem;
    font-family: 'Inter', sans-serif;
    font-weight: 500;
    z-index: var(--z-mode-bar);
    display: flex;
    align-items: center;
    gap: 10px;
    opacity: 0;
    transition: opacity .25s, transform .25s;
    pointer-events: none;
    white-space: nowrap;
    box-shadow: 0 4px 16px rgba(26,22,18,.35);
}
#op-progress-toast.active {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}
#op-progress-toast .op-spinner {
    width: 14px; height: 14px;
    border: 2px solid rgba(245,240,232,.25);
    border-top-color: var(--paper);
    border-radius: 50%;
    animation: spin .7s linear infinite;
    flex-shrink: 0;
}
@keyframes spin {
    to { transform: rotate(360deg); }
}
#op-progress-toast .op-label { flex: 1; }
#op-progress-toast .op-pct {
    font-size: .72rem;
    opacity: .65;
    min-width: 2.5ch;
    text-align: right;
}

/* ══════════════════════════════════════════════════════════════
   DRAG & DROP — réordonner les traces
   ══════════════════════════════════════════════════════════════ */
.track-item[draggable="true"] { cursor: grab; }
.track-item[draggable="true"]:active { cursor: grabbing; }
.track-item .drag-handle {
    color: var(--contour);
    font-size: 14px;
    cursor: grab;
    padding: 0 4px 0 0;
    line-height: 1;
    user-select: none;
    flex-shrink: 0;
}
.track-item.drag-over {
    border-top: 2px solid var(--trail);
    background: rgba(192,57,43,.08);
}
.track-item.dragging {
    opacity: .4;
    pointer-events: none;
}

/* ══════════════════════════════════════════════════════════════
   DIALOG DE CONFIRMATION — suppression
   ══════════════════════════════════════════════════════════════ */
#confirm-dialog-overlay {
    position: fixed; inset: 0;
    background: rgba(26,22,18,.45);
    z-index: var(--z-dropdown);
    display: none;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(2px);
}
#confirm-dialog-overlay.show { display: flex; }
#confirm-dialog {
    background: var(--parchment);
    border: 1px solid var(--sand);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-xl);
    padding: 28px 28px 20px;
    max-width: 360px;
    width: 90%;
    font-family: 'Inter', sans-serif;
    animation: submenuIn .15s ease;
}
#confirm-dialog h3 {
    font-size: 1rem;
    font-weight: 700;
    color: var(--ink);
    margin: 0 0 10px;
}
#confirm-dialog p {
    font-size: .85rem;
    color: var(--ink-light);
    margin: 0 0 20px;
    line-height: 1.5;
}
#confirm-dialog .confirm-btns {
    display: flex;
    gap: 10px;
    justify-content: flex-end;
}
#confirm-dialog .confirm-btns button {
    padding: 7px 18px;
    border-radius: var(--radius-sm);
    font-size: .83rem;
    font-weight: 600;
    border: none;
    cursor: pointer;
    transition: opacity .15s;
}
#confirm-dialog .confirm-btns button:hover { opacity: .82; }
#confirm-btn-cancel {
    background: var(--btn-secondary-bg);
    color: var(--ink);
}
#confirm-btn-alt {
    background: var(--btn-secondary-bg);
    color: var(--ink);
    border: 1px solid var(--sand) !important;
}
#confirm-btn-ok {
    background: var(--color-danger);
    color: #fff;
}

/* ══════════════════════════════════════════════════════════════
   PANNEAU RACCOURCIS CLAVIER  ?
   ══════════════════════════════════════════════════════════════ */
#shortcuts-overlay {
    position: fixed; inset: 0;
    background: rgba(26,22,18,.45);
    z-index: var(--z-dropdown);
    display: none;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(2px);
}
#shortcuts-overlay.show { display: flex; }
#shortcuts-panel {
    background: var(--parchment);
    border: 1px solid var(--sand);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-xl);
    padding: 22px 26px 20px;
    width: min(92vw, 760px);
    font-family: 'Inter', sans-serif;
    animation: submenuIn .15s ease;
}
#shortcuts-panel h2 {
    font-size: 1rem; font-weight: 700; color: var(--ink);
    margin: 0 0 16px; display: flex; align-items: center; gap: 8px;
}
#shortcuts-panel .sc-close {
    margin-left: auto; background: none; border: none;
    font-size: 1.2rem; cursor: pointer; color: var(--ink-light);
    line-height: 1; padding: 0;
}
.sc-cols {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 28px;
}
.sc-col { min-width: 0; }
/* v550 : lien vers la notice, en pied du panneau des raccourcis. C'est le
   point d'entrée desktop vers la documentation complète. */
.sc-manual {
    margin-top: 14px; padding-top: 12px;
    border-top: 1px solid var(--sand);
    text-align: center; font-size: .88rem;
}
.sc-manual a { color: var(--trail); text-decoration: none; font-weight: 600; }
.sc-manual a:hover { text-decoration: underline; }
#shortcuts-panel table {
    width: 100%; border-collapse: collapse; font-size: .82rem;
}
#shortcuts-panel th {
    text-align: left; color: var(--ink-light);
    font-weight: 700; font-size: .72rem; text-transform: uppercase;
    letter-spacing: .05em; padding: 4px 0 6px;
    border-bottom: 1px solid var(--sand);
}
#shortcuts-panel td {
    padding: 5px 0; color: var(--ink);
    border-bottom: 1px solid rgba(184,168,136,.2);
    vertical-align: middle;
}
#shortcuts-panel td:first-child { width: 48%; }
#shortcuts-panel kbd {
    display: inline-block;
    background: var(--paper);
    border: 1px solid var(--sand);
    border-radius: 4px;
    padding: 1px 6px;
    font-family: monospace;
    font-size: .78rem;
    color: var(--ink);
    box-shadow: 0 1px 0 var(--contour);
    white-space: nowrap;
}

/* Bouton ? dans la toolbar */
#shortcuts-btn {
    font-size: .85rem; font-weight: 700;
}

/* ══════════════════════════════════════════════════════════════
   PANEL STATS COMPARATIVES
   ══════════════════════════════════════════════════════════════ */
/* ══════════════════════════════════════════════════════════════
   COMPARE OVERLAY v2 — plein écran, premium
══════════════════════════════════════════════════════════════ */

#compare-panel {
    position: fixed;
    inset: 0;
    z-index: 800;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity .25s ease;
}
#compare-panel.open {
    opacity: 1;
    pointer-events: auto;
}

.cov-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(26,22,18,.55);
    backdrop-filter: blur(4px);
}

.cov-panel {
    position: relative;
    z-index: 1;
    width: min(96vw, 1100px);
    max-height: 90dvh;
    background: var(--paper);
    border: 1px solid var(--sand);
    border-radius: 14px;
    box-shadow: 0 32px 80px rgba(26,22,18,.38), 0 0 0 1px rgba(255,255,255,.15) inset;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    transform: translateY(16px) scale(.985);
    transition: transform .25s cubic-bezier(.22,1,.36,1);
}
#compare-panel.open .cov-panel {
    transform: translateY(0) scale(1);
}

/* ── Header ────────────────────────────────────────────────── */
.cov-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 24px 14px;
    border-bottom: 1px solid var(--sand);
    flex-shrink: 0;
    gap: 16px;
    flex-wrap: wrap;
}
.cov-header-left { display: flex; flex-direction: column; gap: 1px; }
.cov-eyebrow {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: .65rem;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--trail);
}
.cov-title {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 1.35rem;
    font-weight: 700;
    color: var(--ink);
    margin: 0;
    line-height: 1.1;
}
.cov-header-actions { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }

.cov-sort-bar { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.cov-sort-label {
    font-size: .68rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--ink-light);
    margin-right: 4px;
}
.cov-sort-btn {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: .78rem;
    font-weight: 600;
    letter-spacing: .03em;
    padding: 4px 10px;
    border-radius: 20px;
    border: 1px solid var(--sand);
    background: transparent;
    color: var(--ink-light);
    cursor: pointer;
    transition: background .12s, color .12s, border-color .12s;
    white-space: nowrap;
}
.cov-sort-btn:hover { background: var(--parchment); color: var(--ink); }
.cov-sort-btn.active {
    background: var(--trail);
    color: #fff;
    border-color: var(--trail);
}
.cov-close {
    width: 32px; height: 32px;
    border-radius: 50%;
    border: 1px solid var(--sand);
    background: transparent;
    cursor: pointer;
    color: var(--ink-light);
    font-size: 1rem;
    display: flex; align-items: center; justify-content: center;
    transition: background .12s, color .12s;
    flex-shrink: 0;
}
.cov-close:hover { background: var(--trail); color: #fff; border-color: var(--trail); }

/* ── Summary strip ─────────────────────────────────────────── */
.cov-summary {
    display: flex;
    gap: 0;
    border-bottom: 1px solid var(--sand);
    flex-shrink: 0;
    overflow-x: auto;
}
.cov-sum-item {
    flex: 1;
    min-width: 100px;
    padding: 12px 20px;
    text-align: center;
    border-right: 1px solid rgba(184,168,136,.35);
}
.cov-sum-item:last-child { border-right: none; }
.cov-sum-val {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 1.6rem;
    font-weight: 700;
    color: var(--ink);
    line-height: 1;
    display: block;
}
.cov-sum-val.accent { color: var(--trail); }
.cov-sum-lbl {
    font-size: .65rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--ink-light);
    margin-top: 3px;
    display: block;
}

/* ── Track cards ───────────────────────────────────────────── */
.cov-body {
    overflow-y: auto;
    flex: 1;
    padding: 16px 20px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.cov-card {
    background: var(--parchment);
    border: 1px solid var(--sand);
    border-radius: 10px;
    display: grid;
    grid-template-columns: 3fr repeat(6, 1fr) 120px;
    gap: 0;
    align-items: center;
    overflow: hidden;
    transition: box-shadow .15s;
    position: relative;
    min-height: 64px;
    flex-shrink: 0; /* ne pas comprimer dans le flex */
}
.cov-card:hover { box-shadow: 0 2px 12px rgba(26,22,18,.12); }

/* Accent bar left edge */
.cov-card::before {
    content: '';
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 3px;
    background: var(--card-color, var(--trail));
    border-radius: 10px 0 0 10px;
}

.cov-card-name {
    padding: 14px 16px 14px 20px;
    border-right: 1px solid rgba(184,168,136,.3);
    min-width: 0;
}
.cov-card-track-name {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: .95rem;
    font-weight: 700;
    color: var(--ink);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: block;
}
.cov-card-badges {
    display: flex;
    gap: 4px;
    margin-top: 4px;
    flex-wrap: wrap;
}
.cov-badge {
    font-size: .62rem;
    font-weight: 700;
    letter-spacing: .04em;
    padding: 2px 6px;
    border-radius: 4px;
    background: rgba(192,57,43,.1);
    color: var(--trail);
    white-space: nowrap;
}
.cov-badge.neutral {
    background: rgba(90,79,66,.1);
    color: var(--ink-light);
}

.cov-card-stat {
    padding: 10px 12px;
    text-align: center;
    border-right: 1px solid rgba(184,168,136,.2);
}
.cov-card-stat:last-of-type { border-right: none; }
.cov-stat-val {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--ink);
    display: block;
    line-height: 1.1;
}
.cov-stat-val.best { color: #27ae60; }
.cov-stat-val.worst { color: var(--trail); }
.cov-stat-lbl {
    font-size: .6rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .07em;
    color: var(--ink-light);
    margin-top: 2px;
    display: block;
}

/* sparkline canvas */
.cov-card-sparkline {
    padding: 8px 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-left: 1px solid rgba(184,168,136,.3);
    height: 60px;
}
.cov-spark-canvas {
    width: 110px;
    height: 44px;
    display: block;
}

/* Effort badge */
.cov-effort {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-size: .68rem;
    font-weight: 700;
}
.cov-effort-dot {
    width: 7px; height: 7px;
    border-radius: 50%;
    flex-shrink: 0;
}

/* ── Bar charts section ─────────────────────────────────────── */
.cov-charts {
    border-top: 1px solid var(--sand);
    padding: 14px 20px 18px;
    flex-shrink: 0;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 16px;
}
.cov-chart-block { }
.cov-chart-title {
    font-size: .65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .09em;
    color: var(--ink-light);
    margin-bottom: 8px;
}
.cov-bar-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 5px;
}
.cov-bar-dot {
    width: 7px; height: 7px;
    border-radius: 50%;
    flex-shrink: 0;
}
.cov-bar-name {
    font-size: .7rem;
    color: var(--ink-soft);
    width: 80px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex-shrink: 0;
}
.cov-bar-track {
    flex: 1;
    height: 6px;
    background: rgba(184,168,136,.3);
    border-radius: 3px;
    overflow: hidden;
}
.cov-bar-fill {
    height: 100%;
    border-radius: 3px;
    transition: width .4s cubic-bezier(.22,1,.36,1);
}
.cov-bar-val {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: .75rem;
    font-weight: 700;
    color: var(--ink);
    width: 52px;
    text-align: right;
    flex-shrink: 0;
}

/* ── Accordéon mobile : chaque trace = item collapsible ── */
@media (max-width: 1024px) {
    /* Panel : header fixe + zone scrollable unique pour body+charts */
    .cov-panel {
        width: 100%;
        max-width: 100%;
        max-height: calc(100dvh - 64px);
        border-radius: 0;
        transform: none !important;
        overflow: hidden;
        display: flex;
        flex-direction: column;
    }
    /* cov-body prend toute la place et scroll avec cov-charts dedans */
    .cov-body {
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        flex: 1;
        min-height: 0;
        padding: 0 !important;
        display: block !important;
        gap: 0 !important;
    }
    .cov-summary { flex-wrap: wrap; padding: 8px 12px; }
    .cov-sum-item { min-width: 80px; flex: 0 0 calc(33% - 1px); }
    .cov-sort-bar { display: none; }
    .cov-header { padding: 12px 16px 10px; flex-shrink: 0; }
    /* Charts dans le flux scrollable */
    .cov-charts {
        grid-template-columns: 1fr !important;
        padding: 12px 14px 80px !important; /* padding-bottom pour le dock */
        display: grid !important;
        flex-shrink: 0;
    }

    /* Carte = accordéon */
    .cov-card {
        display: block !important;
        grid-template-columns: unset !important;
        border-radius: 0;
        border: none;
        border-bottom: 1px solid var(--sand);
        margin: 0;
        cursor: pointer;
    }

    /* Header toujours visible : nom + indicateur */
    .cov-card-name {
        display: flex !important;
        align-items: center;
        padding: 12px 16px;
        border-bottom: none !important;
        grid-column: unset !important;
        position: relative;
    }
    .cov-card-name::after {
        content: '▾';
        position: absolute;
        right: 16px;
        font-size: 14px;
        color: var(--ink-light);
        transition: transform .2s;
    }
    .cov-card.cov-open .cov-card-name::after {
        transform: rotate(180deg);
    }

    /* Stats cachées par défaut */
    .cov-card-stat,
    .cov-card-sparkline {
        display: none !important;
    }
    .cov-card.cov-open .cov-card-stat {
        display: flex !important;
        padding: 8px 16px;
        border-bottom: 1px solid rgba(184,168,136,.12);
        align-items: center;
        justify-content: space-between;
    }
    .cov-card.cov-open .cov-card-stat:last-of-type {
        border-bottom: 1px solid var(--sand);
        margin-bottom: 4px;
    }
}

/* Compat — keep old cmp- refs for drag code in ui.js */
#cmp-header { display: none; }
#cmp-thead, #cmp-tbody { display: none; }
#compare-btn.btn-active { color: var(--trail); border-color: var(--trail); }

/* ══════════════════════════════════════════════════════════════
   PANEL PREVIEW FUSION
   ══════════════════════════════════════════════════════════════ */
#merge-preview-overlay {
    position: fixed; inset: 0;
    background: rgba(26,22,18,.45);
    z-index: var(--z-dropdown);
    display: none;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(2px);
}
#merge-preview-overlay.show { display: flex; }

#merge-preview-panel {
    background: var(--parchment);
    border: 1px solid var(--sand);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-xl);
    padding: 24px 24px 18px;
    max-width: 460px;
    width: 92%;
    font-family: 'Inter', sans-serif;
    animation: submenuIn .15s ease;
}
#merge-preview-panel h3 {
    font-size: .95rem; font-weight: 700; color: var(--ink);
    margin: 0 0 4px; display: flex; align-items: center; gap: 8px;
}
.merge-subtitle {
    font-size: .75rem; color: var(--ink-light); margin: 0 0 16px;
}

/* Liste ordonnée des traces */
.merge-track-list {
    display: flex;
    flex-direction: column;
    gap: 0;
    margin-bottom: 16px;
}
.merge-track-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 7px 10px;
    border-radius: var(--radius);
    background: var(--paper);
    border: 1px solid var(--sand);
    font-size: .8rem;
    color: var(--ink);
}
.merge-track-row .mt-swatch {
    width: 10px; height: 10px; border-radius: 50%;
    border: 1.5px solid rgba(255,255,255,.7);
    box-shadow: 0 0 0 1px rgba(0,0,0,.15);
    flex-shrink: 0;
}
.merge-track-row .mt-name {
    flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    font-weight: 600;
}
.merge-track-row .mt-reversed {
    font-size: .72rem; color: var(--ink-light);
    background: rgba(184,168,136,.2);
    border-radius: 3px; padding: 1px 5px;
    white-space: nowrap;
}

/* Connecteur entre deux traces */
.merge-connector {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 3px 10px;
    font-size: .72rem;
    color: var(--ink-light);
}
.merge-connector .mc-line {
    flex: 1; height: 1px; background: var(--sand);
}
.merge-connector .mc-dist {
    white-space: nowrap;
}
.merge-connector.mc-warn .mc-dist {
    color: #d97706; font-weight: 600;
}
.merge-connector.mc-error .mc-dist {
    color: var(--trail); font-weight: 700;
}

/* Footer boutons */
.merge-footer {
    display: flex; gap: 10px; justify-content: flex-end; margin-top: 4px;
}
.merge-footer button {
    padding: 7px 18px;
    border-radius: var(--radius-sm);
    font-size: .83rem; font-weight: 600;
    border: none; cursor: pointer;
    transition: opacity .15s;
}
.merge-footer button:hover { opacity: .82; }
#merge-cancel-btn { background: var(--btn-secondary-bg); color: var(--ink); }
#merge-confirm-btn { background: var(--trail); color: #fff; }

/* Avertissement global gaps */
.merge-warning {
    font-size: .75rem;
    color: #d97706;
    background: rgba(217,119,6,.08);
    border: 1px solid rgba(217,119,6,.25);
    border-radius: var(--radius-sm);
    padding: 6px 10px;
    margin-bottom: 12px;
    display: none;
}
.merge-warning.show { display: block; }

.merge-itinerance-label {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 12px 0 4px;
    padding: 10px 12px;
    background: var(--panel-bg, #f5f3ef);
    border: 1px solid var(--border, #ddd);
    border-radius: 8px;
    cursor: pointer;
    font-size: 0.88rem;
    color: var(--ink);
    user-select: none;
}
.merge-itinerance-label input[type="checkbox"] {
    width: 16px; height: 16px; cursor: pointer; accent-color: var(--trail);
}
.merge-itinerance-label .merge-itinerance-icon { font-size: 1.1rem; }
.merge-itinerance-label em { color: var(--ink-muted, #888); font-style: normal; }
.merge-itinerance-label:hover { background: var(--hover-bg, #ece9e3); }

/* ══════════════════════════════════════════════════════════════
   MODE ÉDITION DE POINTS
   ══════════════════════════════════════════════════════════════ */

/* Bannière de mode actif en bas de carte */
#edit-points-bar {
    position: fixed;
    bottom: calc(var(--toolbar-h) + 12px);
    left: 50%;
    transform: translateX(-50%);
    z-index: 450;
    background: rgba(26,22,18,.88);
    color: #f5f0e8;
    border-radius: 24px;
    padding: 8px 18px 8px 14px;
    display: none;
    align-items: center;
    gap: 12px;
    font-family: 'Inter', sans-serif;
    font-size: .78rem;
    box-shadow: var(--shadow-lg);
    backdrop-filter: blur(6px);
    white-space: nowrap;
}
#edit-points-bar.active { display: flex; }
#edit-points-bar .epb-label { font-weight: 600; }
#edit-points-bar .epb-hint  { color: rgba(245,240,232,.6); font-size: .72rem; }
#edit-points-bar .epb-count { 
    background: rgba(255,255,255,.12); 
    border-radius: 10px; padding: 1px 8px;
    font-variant-numeric: tabular-nums;
}
#edit-points-bar button {
    background: rgba(255,255,255,.15);
    border: none; color: #f5f0e8;
    border-radius: 12px; padding: 3px 12px;
    font-size: .75rem; font-weight: 600;
    cursor: pointer; transition: background .15s;
}
#edit-points-bar button:hover { background: rgba(255,255,255,.28); }
#edit-points-bar button.epb-done { background: var(--trail); }
#edit-points-bar button.epb-done:hover { background: #a93226; }

/* Marqueur de point éditable */
.ep-marker-inner {
    width: 10px; height: 10px;
    border-radius: 50%;
    border: 2px solid #fff;
    box-shadow: 0 1px 4px rgba(0,0,0,.5);
    cursor: move;
    transition: transform .1s;
}
.ep-marker-inner:hover {
    transform: scale(1.6);
}

/* Bouton supprimer dans le popup */
.ep-popup-del {
    display: block;
    width: 100%;
    margin-top: 6px;
    padding: 4px 0;
    background: var(--color-danger);
    color: #fff;
    border: none;
    border-radius: 4px;
    font-size: .75rem;
    font-weight: 600;
    cursor: pointer;
    text-align: center;
}
.ep-popup-del:hover { opacity: .85; }

/* Bouton dans l'onglet Édition */
#edit-points-btn.btn-active { color: var(--trail); border-color: var(--trail); }

/* ══════════════════════════════════════════════════════════════
   OVERLAY CHOIX DE TRAÇAGE
   ══════════════════════════════════════════════════════════════ */
#draw-picker {
    position: fixed;
    bottom: calc(var(--toolbar-h) + 8px);
    left: 50%;
    transform: translateX(-50%) translateY(8px);
    z-index: 400;
    background: var(--parchment);
    border: 1px solid var(--sand);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-xl);
    display: none;
    gap: 8px;
    padding: 10px;
    opacity: 0;
    transition: opacity .15s ease, transform .15s ease;
    pointer-events: none;
}
#draw-picker.open {
    display: flex;
    opacity: 1;
    transform: translateX(-50%) translateY(0);
    pointer-events: auto;
}

.dp-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    padding: 12px 18px;
    border: 1px solid var(--sand);
    border-radius: var(--radius);
    background: var(--paper);
    cursor: pointer;
    font-family: 'Inter', sans-serif;
    font-size: .75rem;
    color: var(--ink);
    font-weight: 600;
    min-width: 110px;
    transition: border-color .12s, background .12s;
}
.dp-btn:hover {
    border-color: var(--trail);
    background: rgba(192,57,43,.04);
    color: var(--trail);
}
.dp-btn .dp-icon { font-size: 1.5rem; line-height: 1; }
.dp-btn .dp-desc {
    font-size: .68rem;
    font-weight: 400;
    color: var(--ink-light);
    text-align: center;
    line-height: 1.3;
}
#draw-btn-unified.btn-active {
    color: var(--trail);
    border-color: var(--trail);
}

/* ══════════════════════════════════════════════════════════════
   OVERLAY EXTENSION DE TRACE
   ══════════════════════════════════════════════════════════════ */
#extend-overlay {
    position: fixed; inset: 0;
    background: rgba(26,22,18,.45);
    z-index: var(--z-dropdown);
    display: flex;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(2px);
    animation: fadeIn .15s ease;
}
#extend-panel {
    background: var(--parchment);
    border: 1px solid var(--sand);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-xl);
    padding: 20px;
    width: min(92vw, 380px);
    font-family: 'Inter', sans-serif;
    animation: submenuIn .15s ease;
}
.ext-header {
    display: flex; align-items: center;
    justify-content: space-between;
    margin-bottom: 14px;
}
.ext-header span {
    font-weight: 700; font-size: .9rem; color: var(--ink);
}
.ext-header button {
    background: none; border: none; cursor: pointer;
    color: var(--ink-light); font-size: 1.2rem; line-height: 1;
}
.ext-header button:hover { color: var(--trail); }

#extend-panel p {
    font-size: .8rem; color: var(--ink-light);
    margin: 0 0 12px; text-align: center;
}
#ext-track-name {
    font-weight: 600; color: var(--ink) !important;
    font-size: .82rem !important;
}
.ext-choices {
    display: flex; gap: 10px;
}
.ext-btn {
    flex: 1;
    display: flex; flex-direction: column; align-items: center; gap: 6px;
    padding: 14px 10px;
    border: 1px solid var(--sand);
    border-radius: var(--radius);
    background: var(--paper);
    cursor: pointer;
    font-size: .78rem; font-weight: 600; color: var(--ink);
    font-family: inherit;
    transition: border-color .12s, background .12s;
}
.ext-btn:hover { border-color: var(--trail); background: rgba(192,57,43,.04); }
.ext-btn.ext-btn-primary {
    background: var(--trail); color: #fff; border-color: var(--trail);
}
.ext-btn.ext-btn-primary:hover { background: #a93226; }
.ext-icon { font-size: 1.4rem; line-height: 1; }

/* ══════════════════════════════════════════════════════════════
   STATS GLOBALES SIDEBAR
   ══════════════════════════════════════════════════════════════ */
.sidebar-stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 4px;
    padding: 10px 12px 8px;
    background: var(--ink);
    border-top: 1px solid rgba(255,255,255,.07);
}
.sdb-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
}
.sdb-stat-val {
    font-family: 'Barlow Condensed', sans-serif;
    font-weight: 700;
    font-size: .9rem;
    color: var(--paper);
    line-height: 1;
}
.sdb-stat-lbl {
    font-family: 'Inconsolata', monospace;
    font-size: .6rem;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: rgba(245,240,232,.45);
    line-height: 1;
}

/* ══ LABEL UNDO DANS LA BARRE MAP-CONTROLS ══ */
.undo-label {
    font-family: 'Inter', sans-serif;
    font-size: .68rem;
    font-weight: 600;
    color: var(--ink-light);
    background: rgba(245,240,232,.92);
    border: 1px solid var(--sand);
    border-radius: var(--radius-sm);
    padding: 2px 7px;
    max-width: 120px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    pointer-events: none;
    /* v628 : bulle au-dessus du bouton annuler (branche horizontale du L) */
    position: absolute;
    left: 0;
    bottom: calc(100% + 4px);
    z-index: 2;
    display: block;
    opacity: 0;
    transition: opacity .2s;
}
.undo-label:not(:empty) {
    opacity: 1;
}

/* ══════════════════════════════════════════════════════════════
   PREFERS-REDUCED-MOTION — désactive les animations non critiques
   ══════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
    /* Supprimer les animations d'entrée/sortie */
    .bottom-sheet             { animation: none; }
    .tools-panel.open         { animation: none; }
    #compare-panel            { transition: opacity .01s; }
    .legal-overlay            { transition: none; }
    .merge-preview-overlay    { transition: none; }
    #draw-picker              { transition: none; }
    .sidebar                  { transition: none; }
    .routing-overlay          { transition: none; }

    /* Garder le feedback visuel des boutons/hover (courts < 150ms) */
    button, .tb-btn, .map-ctrl-btn, .sdb-btn, .dp-btn {
        transition: background .1s, color .1s, border-color .1s;
    }

    /* Stopper les spinners de chargement */
    @keyframes terrainSpin        { to { transform: none; } }
    @keyframes poi-spin           { to { transform: none; } }
    @keyframes lpSpin             { to { transform: none; } }
    @keyframes spin               { to { transform: none; } }
    @keyframes progressIndeterminate {
        0%, 100% { transform: scaleX(1); }
    }
    @keyframes submenuIn {
        from { opacity: 1; transform: none; }
        to   { opacity: 1; transform: none; }
    }
    @keyframes slideUp {
        from { transform: translateY(0); }
        to   { transform: translateY(0); }
    }
}


/* ── Export format pills ─────────────────────────────────────────────────── */
.export-fmt-pill {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 7px 14px;
    border: 1.5px solid var(--border, #ddd);
    border-radius: 20px;
    cursor: pointer;
    background: #fff;
    transition: border-color .15s, background .15s;
    user-select: none;
    font-size: .9rem;
}
.export-fmt-pill input[type="radio"] { display: none; }
.export-fmt-pill small { color: #888; font-size: .75rem; margin-left: 2px; }
.export-fmt-pill:has(input:checked) {
    border-color: var(--trail, #e07c2e);
    background: #FFF8F3;
    font-weight: 600;
}
.export-fmt-pill:hover { border-color: var(--trail, #e07c2e); }

/* ── Générateur de boucle ────────────────────────────────────────────────── */
#loop-gen-panel {
    /* Les styles principaux sont inline pour le panneau flottant draggable.
       Ce bloc gère uniquement les overrides responsive. */
}
@media (max-width: 599px) {
    #loop-gen-panel {
        right: 8px !important;
        top: 60px !important;
        width: calc(100vw - 16px) !important;
    }
}

/* ── Marqueurs de repère ─────────────────────────────────────────────────── */
.tp-btn.btn-active {
    background: var(--trail-glow, #fff3ea);
    color: var(--trail, #e07c2e);
    font-weight: 600;
    border-left: 3px solid var(--trail, #e07c2e);
}

.waypoint-marker-icon {
    display: flex;
    flex-direction: column;
    align-items: center;
    pointer-events: none;
}

.waypoint-pin {
    width: 28px;
    height: 28px;
    background: #E53E3E;
    border: 3px solid #fff;
    border-radius: 50% 50% 50% 0;
    transform: rotate(-45deg);
    box-shadow: 0 2px 6px rgba(0,0,0,.35);
    flex-shrink: 0;
}
/* v636 : emoji dans la tête de l'épingle ; rond comme les marqueurs POI */
.waypoint-pin .wp-emo {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    transform: rotate(45deg);
    font-size: 13px;
    line-height: 1;
}
.waypoint-shape {
    width: 28px;
    height: 28px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    line-height: 1;
    border: 2px solid #fff;
    box-shadow: 0 2px 6px rgba(0,0,0,.35);
    flex-shrink: 0;
}
.waypoint-shape.wp-round { border-radius: 50%; }
/* v637 : numéro au centre (sans emoji) ou en pastille dans le coin */
.wp-mk { position: relative; display: flex; justify-content: center; }
.wp-n {
    color: #fff;
    font-size: 13px;
    font-weight: 800;
    line-height: 1;
    text-shadow: 0 1px 1px rgba(0,0,0,.35);
}
.wp-badge {
    position: absolute;
    top: -7px;
    right: -9px;
    min-width: 17px;
    height: 17px;
    padding: 0 4px;
    box-sizing: border-box;
    border-radius: 9px;
    border: 1.5px solid #fff;
    background: #1a202c;
    color: #fff;
    font-size: 10px;
    font-weight: 800;
    line-height: 14px;
    text-align: center;
    box-shadow: 0 1px 3px rgba(0,0,0,.35);
}
.wp-mk-round .wp-badge { top: -6px; right: -8px; }
.wp-mk-dot .waypoint-label { margin-top: 3px; }

.waypoint-label {
    margin-top: 4px;
    background: rgba(255,255,255,.92);
    color: #1a202c;
    font-size: .72rem;
    font-weight: 600;
    padding: 2px 6px;
    border-radius: 4px;
    border: 1px solid #e2e8f0;
    box-shadow: 0 1px 4px rgba(0,0,0,.15);
    white-space: nowrap;
    max-width: 160px;
    overflow: hidden;
    text-overflow: ellipsis;
    pointer-events: none;
}

/* ── Leaflet popup — palette parchment ──────────────────────────────────── */
.leaflet-popup-content-wrapper {
    background: var(--parchment) !important;
    border: 1px solid var(--sand) !important;
    border-radius: 12px !important;
    box-shadow: 0 6px 24px rgba(0,0,0,.18) !important;
    color: var(--ink) !important;
    padding: 0 !important;
}
.leaflet-popup-content {
    color: var(--ink) !important;
    margin: 10px 14px !important;
}
.leaflet-popup-tip-container .leaflet-popup-tip {
    background: var(--parchment) !important;
    box-shadow: none !important;
}
.leaflet-popup-close-button {
    color: var(--ink-light) !important;
    font-size: 18px !important;
    top: 4px !important;
    right: 6px !important;
}
.leaflet-popup-close-button:hover { color: var(--trail) !important; }

/* ── Waypoint popup contenu ─────────────────────────────────────────────── */
.wp-textarea {
    width: 100%;
    box-sizing: border-box;
    resize: vertical;
    min-height: 60px;
    max-height: 260px;
    font-size: .85rem;
    padding: 6px 8px;
    border: 1px solid var(--sand);
    border-radius: 6px;
    outline: none;
    font-family: inherit;
    color: var(--ink);
    background: var(--paper, #faf7f2);
    transition: border-color .15s;
    overflow-y: auto;
    line-height: 1.5;
}
.wp-textarea:focus { border-color: var(--trail); }

.wp-btn-delete {
    padding: 6px 10px;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    font-size: .82rem;
    color: #fff;
    background: #e53e3e;
    transition: opacity .15s, filter .15s;
}
.wp-btn-delete:hover { filter: brightness(1.15); }

/* v634 : en-tête (couleur · nom · fermer), couleurs, pied */
.wp-head {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
}
/* v637 : aperçu du marqueur, barre Type · Couleur · Emoji · N° */
.wp-prev {
    flex: 0 0 34px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.wp-prev .wp-mk { transform: scale(.8); }
.wp-bar {
    display: flex;
    gap: 6px;
    margin-top: 8px;
}
.wp-chip {
    flex: 1 1 0;
    min-width: 0;
    height: 46px;
    padding: 3px 4px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    border: 1px solid var(--sand);
    border-radius: 8px;
    background: var(--paper, #faf7f2);
    color: var(--ink);
    font: inherit;
    font-size: .66rem;
    font-weight: 600;
    cursor: pointer;
}
.wp-chip:hover { border-color: var(--ink-light); }
.wp-chip[aria-expanded="true"] { border-color: var(--trail); box-shadow: 0 0 0 1px var(--trail); }
.wp-chip-i {
    height: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    line-height: 1;
}
.wp-chip-t {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.wp-chip-none { color: var(--ink-light); font-size: 17px; }
.wp-chip .wp-sh { width: 12px; height: 12px; }
.wp-chip-num b { font-size: 15px; font-weight: 800; }
.wp-chip-num.on { background: var(--ink); border-color: var(--ink); color: #fff; }
.wp-dot {
    width: 16px;
    height: 16px;
    box-sizing: border-box;
    border-radius: 50%;
    border: 2px solid #fff;
    box-shadow: 0 0 0 1px var(--sand);
}
/* Choix flottants (dans <body>) ; téléphone : en bas de l'écran */
.wp-pop {
    position: fixed;
    z-index: 4100;
    width: 300px;
    max-width: calc(100vw - 16px);
    max-height: 360px;
    box-sizing: border-box;
    padding: 4px 10px 10px;
    overflow-y: auto;
    background: var(--parchment, #f5f0e8);
    border: 1px solid var(--sand, #d4c5a0);
    border-radius: 10px;
    box-shadow: 0 8px 24px rgba(26,22,18,.25);
    color: var(--ink);
    font-family: 'Inter', sans-serif;
}
.wp-pop-type  { width: 230px; }
.wp-pop-color { width: 260px; }
.wp-pop-sheet {
    left: 0;
    right: 0;
    bottom: 0;
    width: auto;
    max-width: none;
    max-height: 55vh;
    border-radius: 14px 14px 0 0;
    padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px));
}
.wp-pop-sheet .wp-grid { grid-template-columns: repeat(auto-fill, minmax(42px, 1fr)); }
.wp-pop-sheet .wp-ic { height: 42px; font-size: 22px; }
.wp-pop-sheet .wp-swatch { width: 32px; height: 32px; }
.wp-types { display: flex; gap: 8px; }
.wp-type {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 10px 6px 8px;
    border: 1px solid var(--sand);
    border-radius: 8px;
    background: var(--paper, #faf7f2);
    color: var(--ink);
    font: inherit;
    font-size: .78rem;
    font-weight: 600;
    cursor: pointer;
}
.wp-type.on { border-color: var(--ink); box-shadow: 0 0 0 1px var(--ink); }
.wp-type-m {
    height: 46px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.wp-sec {
    margin: 8px 0 4px;
    font-size: .66rem;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--ink-light);
}
.wp-sh { display: block; width: 14px; height: 14px; background: var(--ink-light); }
.wp-sh-pin { border-radius: 50% 50% 50% 0; transform: rotate(-45deg); }
.wp-sh-round { border-radius: 50%; }
.wp-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(30px, 1fr));
    gap: 2px;
}
.wp-ic {
    height: 30px;
    padding: 0;
    border: 1px solid transparent;
    border-radius: 6px;
    background: transparent;
    font-size: 17px;
    line-height: 1;
    cursor: pointer;
}
.wp-ic:hover { background: rgba(26,22,18,.06); }
.wp-ic.on { border-color: var(--ink); background: var(--paper, #faf7f2); }
.wp-ic-none {
    display: block;
    width: 100%;
    margin-top: 10px;
    padding: 0 10px;
    font-size: .75rem;
    font-weight: 600;
    color: var(--ink-light);
    border-color: var(--sand);
}
.wp-name {
    flex: 1;
    min-width: 0;
    font: inherit;
    font-size: .95rem;
    font-weight: 700;
    color: var(--ink);
    background: transparent;
    border: 1px solid transparent;
    border-radius: 6px;
    padding: 4px 6px;
    outline: none;
}
.wp-name:hover { border-color: var(--sand); }
.wp-name:focus { border-color: var(--trail); background: var(--paper, #faf7f2); }
.wp-close {
    flex: 0 0 auto;
    width: 32px;
    height: 32px;
    border: none;
    border-radius: 50%;
    background: rgba(26,22,18,.08);
    color: var(--ink-light);
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all .15s;
}
.wp-close:hover { background: var(--trail); color: #fff; }
.wp-colors {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 8px;
}
.wp-swatch {
    position: relative;
    width: 24px;
    height: 24px;
    padding: 0;
    border-radius: 50%;
    border: 2px solid #fff;
    box-shadow: 0 0 0 1px var(--sand);
    cursor: pointer;
}
.wp-swatch.on { box-shadow: 0 0 0 2px var(--ink); }
.wp-custom {
    overflow: hidden;
    background: conic-gradient(#e53e3e, #d69e2e, #38a169, #4299e1, #9f7aea, #e53e3e);
}
.wp-custom input {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    padding: 0;
    border: 0;
    opacity: 0;
    cursor: pointer;
}
.wp-foot {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 8px;
}
.wp-coords {
    flex: 1;
    font-size: .72rem;
    color: var(--ink-light);
    font-variant-numeric: tabular-nums;
    user-select: text;
}

.waypoint-popup .leaflet-popup-content {
    margin: 10px 14px;
    min-width: 220px;
    max-height: min(600px, calc(100vh - 170px));
    overflow-y: auto;
}

.waypoint-popup .leaflet-popup-content-wrapper {
    border-radius: 10px;
    box-shadow: 0 6px 24px rgba(0,0,0,.18);
}

.waypoint-popup-inner textarea {
    box-sizing: border-box;
}

/* ── Bande terrain sous profil altimétrique ────────────────────────────── */
.terrain-strip {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: 5px;
    border-radius: 0;
    overflow: hidden;
    padding: 0;
    pointer-events: none;
    z-index: 5;
}


/* ── Légende surfaces sous profil ───────────────────────────────────────── */
.surf-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 16px;
    padding: 7px 46px 6px;
    border-top: 1px solid rgba(255,255,255,.06);
    flex-shrink: 0;
}
.surf-leg-item {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 10.5px;
    font-family: 'Inter', sans-serif;
}
.surf-leg-dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    flex-shrink: 0;
    border: 1px solid rgba(255,255,255,.2);
}
.surf-leg-name {
    color: rgba(255,255,255,.7);
    font-weight: 500;
}
.surf-leg-pct {
    color: rgba(255,255,255,.45);
    font-family: 'Inconsolata', monospace;
    font-size: 10px;
}
.surf-leg-dist {
    color: rgba(255,255,255,.3);
    font-family: 'Inconsolata', monospace;
    font-size: 10px;
}

/* ── Barre de confirmation tracé libre ─────────────────────────────────── */
.draw-confirm-bar {
    position: fixed;
    bottom: calc(var(--toolbar-h) + 10px);
    left: 50%;
    transform: translateX(-50%);
    z-index: 400;
    display: flex;
    align-items: center;
    gap: 10px;
    background: var(--parchment);
    border: 1px solid var(--sand);
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(0,0,0,.15);
    padding: 8px 14px;
    pointer-events: all;
    white-space: nowrap;
}
.draw-confirm-info {
    font-size: .82rem;
    font-weight: 600;
    color: var(--ink-soft);
    white-space: nowrap;
    padding: 0 4px;
}
.draw-confirm-actions {
    display: flex;
    gap: 6px;
}
.draw-confirm-btn {
    height: 30px;
    padding: 0 14px;
    border-radius: 8px;
    font-size: .82rem;
    font-weight: 600;
    cursor: pointer;
    transition: all .12s;
    white-space: nowrap;
    border: 1px solid var(--sand);
}
.draw-confirm-cancel {
    background: transparent;
    color: var(--ink-light);
}
.draw-confirm-cancel:hover { background: rgba(220,50,50,.12); border-color: #e05; color: #c00; }
.draw-confirm-ok {
    background: var(--trail);
    border-color: var(--trail);
    color: #fff;
}
.draw-confirm-ok:hover:not(:disabled) { filter: brightness(1.1); }
.draw-confirm-ok:disabled { opacity: .35; cursor: default; }

/* ── Spinner tracé en attente de calcul ────────────────────────────────── */
.track-item.computing .track-stats::after {
    content: '';
    display: inline-block;
    width: 10px;
    height: 10px;
    margin-left: 8px;
    border: 2px solid rgba(255,255,255,.15);
    border-top-color: var(--trail);
    border-radius: 50%;
    animation: spin .7s linear infinite;
    vertical-align: middle;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ────────────────────────────────────────────
   POI → ITINÉRAIRE DIRECT
   Modal de sélection de profil + bandeau save
─────────────────────────────────────────────*/

/* Overlay backdrop */
.poi-profile-overlay {
    position: fixed;
    inset: 0;
    z-index: var(--z-toast);
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(26,22,18,.55);
    backdrop-filter: blur(4px);
    padding: 20px;
}

/* Fenêtre modale parchemin */
.poi-profile-modal {
    background: var(--parchment);
    border: 1px solid var(--sand);
    border-radius: var(--radius-lg);
    padding: 22px 22px 18px;
    width: min(320px, calc(100vw - 40px));
    box-shadow: var(--shadow-xl);
    position: relative;
}

/* En-tête */
.poi-profile-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 14px;
}
.poi-profile-title {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 17px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--ink);
}

/* Résumé départ → arrivée */
.poi-profile-route-summary {
    background: rgba(26,22,18,.05);
    border: 1px solid var(--sand);
    border-radius: var(--radius);
    padding: 10px 12px;
    margin-bottom: 14px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.poi-profile-route-point {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: .8rem;
    font-weight: 600;
    color: var(--ink-soft);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.poi-profile-route-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
    border: 2px solid var(--parchment);
    box-shadow: 0 0 0 1px rgba(26,22,18,.2);
}
.poi-profile-route-dot--start { background: var(--color-success); }
.poi-profile-route-dot--end   { background: var(--color-danger); }
.poi-profile-route-line {
    width: 2px;
    height: 10px;
    background: var(--sand);
    margin-left: 4px;
    border-radius: 1px;
}

/* Liste des profils */
.poi-profile-list {
    display: flex;
    flex-direction: column;
    gap: 5px;
    margin-bottom: 12px;
}
.poi-profile-btn {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 10px 13px;
    border: 1px solid var(--sand);
    border-radius: var(--radius);
    background: white;
    font-family: 'Inter', sans-serif;
    font-size: .8rem;
    font-weight: 600;
    color: var(--ink-soft);
    cursor: pointer;
    transition: background .12s, border-color .12s;
    text-align: left;
}
.poi-profile-btn:hover {
    background: var(--paper);
    border-color: var(--contour);
}
.poi-profile-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
}
.poi-profile-label { flex: 1; }

/* Bouton annuler */
.poi-profile-cancel {
    width: 100%;
    padding: 8px;
    border: 1px solid var(--sand);
    border-radius: var(--radius);
    background: rgba(26,22,18,.06);
    font-family: 'Inter', sans-serif;
    font-size: .8rem;
    font-weight: 600;
    color: var(--ink-light);
    cursor: pointer;
    transition: background .12s;
}
.poi-profile-cancel:hover { background: rgba(192,57,43,.08); color: var(--trail); border-color: var(--trail); }

/* ── Bandeau d'enregistrement (au-dessus du dock) ── */
.poi-itin-save-bar {
    position: fixed;
    bottom: calc(var(--toolbar-h) + 12px);
    left: 50%;
    transform: translateX(-50%);
    z-index: 9990;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    background: var(--parchment);
    border: 1px solid var(--sand);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-xl);
    max-width: min(500px, calc(100vw - 24px));
    width: max-content;
}
.poi-itin-save-info {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
    flex: 1;
}
.poi-itin-save-icon {
    font-size: 22px;
    flex-shrink: 0;
    line-height: 1;
}
.poi-itin-save-text {
    min-width: 0;
}
.poi-itin-save-route {
    font-size: .8rem;
    font-weight: 700;
    color: var(--ink);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 220px;
}
.poi-itin-save-stats {
    font-size: .7rem;
    color: var(--ink-light);
    font-family: 'Inconsolata', monospace;
    letter-spacing: .03em;
    margin-top: 1px;
}
.poi-itin-save-actions {
    display: flex;
    gap: 6px;
    flex-shrink: 0;
}

/* Sur mobile, prendre toute la largeur */
@media (max-width: 500px) {
    .poi-itin-save-bar {
        left: 12px;
        right: 12px;
        transform: none;
        width: auto;
        max-width: none;
    }
    .poi-itin-save-route { max-width: 140px; }
}

/* ────────────────────────────────────────────
   POI ITINÉRAIRE — Bannière départ en attente
─────────────────────────────────────────────*/
.poi-start-pending-bar {
    position: fixed;
    bottom: calc(var(--toolbar-h) + 12px);
    left: 50%;
    transform: translateX(-50%) translateY(12px);
    z-index: 9989;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 14px;
    background: var(--parchment);
    border: 1.5px solid var(--color-success);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    font-family: 'Inter', sans-serif;
    font-size: .8rem;
    color: var(--ink);
    max-width: min(480px, calc(100vw - 24px));
    opacity: 0;
    transition: opacity .2s, transform .2s;
    pointer-events: auto;
}
.poi-start-pending-bar.show {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}
.poi-start-pending-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--color-success);
    flex-shrink: 0;
    box-shadow: 0 0 0 3px rgba(39,174,96,.2);
    animation: poi-pending-pulse 1.8s ease-in-out infinite;
}
@keyframes poi-pending-pulse {
    0%, 100% { box-shadow: 0 0 0 3px rgba(39,174,96,.2); }
    50%       { box-shadow: 0 0 0 6px rgba(39,174,96,.08); }
}
.poi-start-pending-text { flex: 1; }
.poi-start-pending-cancel {
    background: none;
    border: none;
    font-size: 14px;
    color: var(--ink-light);
    cursor: pointer;
    padding: 2px 4px;
    border-radius: 4px;
    line-height: 1;
    flex-shrink: 0;
    transition: color .12s;
}
.poi-start-pending-cancel:hover { color: var(--trail); }

@media (max-width: 500px) {
    .poi-start-pending-bar {
        left: 12px;
        right: 12px;
        transform: translateY(12px);
        max-width: none;
    }
    .poi-start-pending-bar.show { transform: translateY(0); }
}

/* ══════════════════════════════════════════════════════════════
   SPORT PICKER — popup sélecteur d'activité
══════════════════════════════════════════════════════════════ */

.sport-picker-popup {
    position: fixed;
    z-index: var(--z-mode-bar);
    background: var(--paper);
    border: 1px solid var(--sand);
    border-radius: 12px;
    box-shadow: 0 8px 32px rgba(26,22,18,.22), 0 0 0 1px rgba(255,255,255,.15) inset;
    padding: 12px;
    width: 240px;
    animation: sportPickerIn .15s cubic-bezier(.22,1,.36,1);
}
@keyframes sportPickerIn {
    from { opacity: 0; transform: translateY(-6px) scale(.96); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

.spp-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--sand);
}
.spp-title {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: .8rem;
    font-weight: 700;
    letter-spacing: .04em;
    color: var(--ink);
    text-transform: uppercase;
}
.spp-auto {
    font-size: .72rem;
    font-weight: 600;
    color: var(--trail);
    cursor: pointer;
    padding: 2px 7px;
    border-radius: 10px;
    border: 1px solid rgba(192,57,43,.25);
    transition: background .12s;
}
.spp-auto:hover { background: rgba(192,57,43,.08); }

.spp-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 5px;
}
.spp-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 7px 10px;
    border-radius: 8px;
    border: 1px solid var(--sand);
    background: transparent;
    cursor: pointer;
    text-align: left;
    transition: background .12s, border-color .12s, transform .1s;
    position: relative;
}
.spp-btn:hover { background: var(--parchment); border-color: rgba(192,57,43,.3); transform: scale(1.02); }
.spp-btn.active {
    background: rgba(192,57,43,.08);
    border-color: var(--trail);
}
.spp-icon { font-size: 1.1rem; flex-shrink: 0; }
.spp-lbl {
    font-size: .73rem;
    font-weight: 600;
    color: var(--ink);
    line-height: 1.2;
}
.spp-det {
    position: absolute;
    top: 3px;
    right: 4px;
    font-size: .55rem;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--trail);
    background: rgba(192,57,43,.12);
    padding: 1px 4px;
    border-radius: 4px;
}

/* Badge sport cliquable dans les cards compare */
.cov-badge-sport {
    cursor: pointer;
    border: 1px solid rgba(184,168,136,.5);
    background: var(--parchment);
    color: var(--ink);
    font-family: 'Inter', sans-serif;
    font-size: .65rem;
    font-weight: 600;
    padding: 2px 7px;
    border-radius: 10px;
    transition: border-color .12s, background .12s;
    display: inline-flex;
    align-items: center;
    gap: 3px;
}
.cov-badge-sport:hover { border-color: var(--trail); background: rgba(192,57,43,.05); }
.cov-auto-tag {
    font-size: .58rem;
    color: var(--ink-light);
    font-weight: 500;
    font-style: italic;
}

/* Badge sport discret dans la liste des traces */
.track-sport-badge {
    display: inline-block;
    font-size: .85rem;
    cursor: pointer;
    margin-left: 4px;
    vertical-align: middle;
    opacity: .75;
    transition: opacity .12s, transform .12s;
}
.track-sport-badge:hover { opacity: 1; transform: scale(1.2); }

/* ── Overlay météo — Zone 1 : carte d'identité ───────────────────────────── */
.wx-zone1 {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 14px 16px;
    background: rgba(252,76,2,.05);
    border: 1px solid rgba(252,76,2,.14);
    border-radius: 12px;
    margin-bottom: 16px;
}
.wx-zone1-main {
    display: flex;
    align-items: center;
    gap: 14px;
}
.wx-zone1-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}
.wx-pill {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 9px;
    background: rgba(252,180,2,.10);
    border: 1px solid rgba(252,180,2,.25);
    border-radius: 20px;
    font-size: .75rem;
    color: var(--ink, #2d1e0f);
    font-weight: 500;
    white-space: nowrap;
}
.wx-pill-sun { background: rgba(252,180,2,.16); }

/* ── Zone 2 : 2 colonnes ─────────────────────────────────────────────────── */
.wx-two-col {
    display: flex;
    flex-direction: column;
    gap: 18px;
}
@media (min-width: 600px) {
    .wx-two-col {
        display: grid;
        grid-template-columns: 1fr 1.15fr;
        gap: 20px;
        align-items: start;
    }
    .wx-col-left, .wx-col-right { min-width: 0; }
}
.wx-section-title {
    font-size: .67rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--ink-light, #6b5f47);
    margin-bottom: 7px;
}

/* ── Créneaux horaires ────────────────────────────────────────────────────── */
.wx-hour-row {
    display: grid;
    grid-template-columns: 32px 22px 36px 1fr 44px;
    align-items: center;
    gap: 6px;
    padding: 6px 8px;
    border-radius: 7px;
    background: rgba(0,0,0,.025);
    font-size: .78rem;
}
.wx-hour-time  { color: var(--ink-light); font-size: .72rem; }
.wx-hour-temp  { font-weight: 700; color: var(--ink); }
.wx-hour-wind  { color: var(--ink-light); font-size: .72rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wx-hour-rain  { color: #3b82f6; font-size: .72rem; text-align: right; }

/* ── Tableau 7 jours ─────────────────────────────────────────────────────── */
.wx-day-row {
    display: grid;
    grid-template-columns: 34px 22px 1fr 30px 30px 40px 60px 50px 50px 30px;
    align-items: center;
    gap: 4px;
    padding: 5px 6px;
    border-radius: 6px;
    font-size: .73rem;
}
.wx-day-name  { font-weight: 700; color: var(--ink); font-size: .75rem; }
.wx-day-icon  { font-size: 1.05rem; text-align: center; }
.wx-day-bar   { height: 5px; background: rgba(0,0,0,.08); border-radius: 3px; position: relative; overflow: hidden; }
.wx-day-tmax  { color: #ef4444; font-weight: 700; text-align: right; }
.wx-day-tmin  { color: #3b82f6; text-align: right; }
.wx-day-rain  { color: #3b82f6; text-align: right; }
.wx-day-wind  { color: var(--ink-light); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wx-day-sun   { color: var(--ink-light); white-space: nowrap; }
.wx-day-uv    { font-weight: 700; text-align: right; }

/* ── Responsive : simplifier le tableau sur mobile ───────────────────────── */
@media (max-width: 599px) {
    .wx-day-row {
        grid-template-columns: 34px 22px 1fr 30px 30px 40px 60px;
    }
    .wx-day-row > :nth-child(8),
    .wx-day-row > :nth-child(9),
    .wx-day-row > :nth-child(10) { display: none; }
}

/* ── Panneau sommet ──────────────────────────────────────────────────────── */
.wx-summit-stat {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    background: rgba(255,255,255,.5);
    border: 1px solid rgba(99,102,241,.15);
    border-radius: 8px;
}

/* ════════════════════════════════════════════════════════════
   COMBINE SIDEBAR (droite)
   ════════════════════════════════════════════════════════════ */

.combine-sidebar {
    position: fixed;
    top: 0;
    right: 0;
    width: 340px;
    height: 100%;
    background: var(--parchment);
    border-left: 1px solid var(--sand);
    box-shadow: var(--shadow-xl);
    z-index: var(--z-sidebar);
    display: flex;
    flex-direction: column;
    transform: translateX(100%);
    transition: transform .28s cubic-bezier(.4,0,.2,1);
    overflow: hidden;
}
.combine-sidebar.open { transform: translateX(0); }

/* ── En-tête ── */
.combine-sidebar-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 20px 14px;
    border-bottom: 1px solid var(--sand);
    background: var(--ink);
    color: var(--paper);
    flex-shrink: 0;
}
.combine-sidebar-title {
    font-family: 'Barlow Condensed', sans-serif;
    font-weight: 700;
    font-size: 16px;
    letter-spacing: .06em;
    text-transform: uppercase;
}
.combine-sidebar-close {
    background: none;
    border: none;
    color: var(--contour);
    font-size: 22px;
    cursor: pointer;
    line-height: 1;
    padding: 0 4px;
    transition: color .1s;
}
.combine-sidebar-close:hover { color: var(--paper); }

/* ── Corps scrollable ── */
.combine-sidebar-body {
    flex: 1;
    overflow-y: auto;
    padding: 16px 14px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.combine-sidebar-body::-webkit-scrollbar { width: 4px; }
.combine-sidebar-body::-webkit-scrollbar-thumb { background: var(--sand); border-radius: 2px; }

/* ── Intro ── */
.cmb-intro {
    background: rgba(255,255,255,.55);
    border: 1px solid var(--sand);
    border-radius: var(--radius);
    padding: 10px 12px;
    font-size: var(--text-sm);
    color: var(--ink-soft);
    line-height: 1.5;
}
.cmb-intro strong { color: var(--ink); }

/* ── Section ── */
.cmb-section {
    display: flex;
    flex-direction: column;
    gap: 7px;
}
.cmb-section-title {
    font-size: var(--text-xs);
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--ink-light);
}
.cmb-section-title-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

/* ── Bouton upload ── */
.cmb-upload-btn {
    width: 100%;
    padding: 10px 14px;
    background: var(--ink);
    color: var(--paper);
    border: none;
    border-radius: var(--radius);
    font-size: var(--text-sm);
    font-weight: 600;
    cursor: pointer;
    transition: opacity .15s;
    text-align: center;
}
.cmb-upload-btn:hover { opacity: .85; }

.cmb-hint {
    font-size: var(--text-xs);
    color: var(--ink-light);
    margin: 0;
}

/* ── Reset ── */
.cmb-reset-btn {
    background: none;
    border: 1px solid var(--sand);
    border-radius: var(--radius);
    padding: 3px 8px;
    font-size: var(--text-xs);
    color: var(--ink-light);
    cursor: pointer;
    transition: all .15s;
}
.cmb-reset-btn:hover { border-color: var(--trail); color: var(--trail); }

/* ── Liste des traces chargées ── */
.cmb-track-list {
    background: white;
    border: 1px solid var(--sand);
    border-radius: var(--radius);
    overflow: hidden;
    max-height: 210px;
    overflow-y: auto;
}
.cmb-track-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 10px;
    border-bottom: 1px solid rgba(0,0,0,.05);
    font-size: var(--text-sm);
}
.cmb-track-item:last-of-type { border-bottom: none; }
.cmb-track-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
}
.cmb-track-name {
    flex: 1;
    color: var(--ink-soft);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.cmb-track-dist {
    font-size: var(--text-xs);
    color: var(--ink-light);
    font-weight: 600;
    flex-shrink: 0;
}
.cmb-track-total {
    padding: 6px 10px;
    font-size: var(--text-xs);
    color: var(--ink-light);
    background: rgba(0,0,0,.03);
    border-top: 1px solid var(--sand);
}
.cmb-empty {
    padding: 12px 10px;
    font-size: var(--text-sm);
    color: var(--ink-light);
    text-align: center;
    margin: 0;
}

/* ── Bouton générer ── */
.cmb-generate-btn {
    width: 100%;
    padding: 12px 14px;
    background: var(--trail);
    color: white;
    border: none;
    border-radius: var(--radius);
    font-size: var(--text-sm);
    font-weight: 700;
    cursor: pointer;
    transition: opacity .15s, transform .1s;
    letter-spacing: .03em;
}
.cmb-generate-btn:hover:not(:disabled) { opacity: .88; transform: translateY(-1px); }
.cmb-generate-btn:disabled {
    opacity: .35;
    cursor: not-allowed;
    transform: none;
}

/* ── Résultats ── */
.cmb-results-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.cmb-result-item {
    background: white;
    border: 2px solid var(--sand);
    border-radius: var(--radius);
    padding: 10px 12px;
    transition: border-color .15s;
}
.cmb-result-item.active {
    border-color: var(--trail);
    box-shadow: 0 0 0 3px var(--trail-glow);
}
.cmb-result-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
}
.cmb-result-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    flex-shrink: 0;
}
.cmb-result-dist {
    margin-left: auto;
    font-size: var(--text-sm);
    font-weight: 700;
    color: var(--trail);
}
.cmb-result-actions {
    display: flex;
    gap: 6px;
}
.cmb-action-btn {
    flex: 1;
    padding: 6px 4px;
    background: var(--parchment);
    border: 1px solid var(--sand);
    border-radius: var(--radius);
    font-size: var(--text-xs);
    font-weight: 600;
    color: var(--ink-soft);
    cursor: pointer;
    transition: all .15s;
    text-align: center;
    white-space: nowrap;
}
.cmb-action-btn:hover { border-color: var(--trail); color: var(--trail); background: white; }

.cmb-no-result {
    background: rgba(231,76,60,.07);
    border: 1px solid rgba(231,76,60,.25);
    border-radius: var(--radius);
    padding: 12px;
    font-size: var(--text-sm);
    color: var(--ink-soft);
}

/* ── Tooltip carte ── */
.cmb-tooltip {
    background: var(--ink) !important;
    border: none !important;
    color: var(--paper) !important;
    font-size: 12px !important;
    padding: 4px 8px !important;
    border-radius: 4px !important;
}
.cmb-tooltip::before { display: none !important; }

/* ── Responsive : mobile ── */
@media (max-width: 599px) {
    .combine-sidebar {
        width: 100%;
        border-left: none;
        border-top: 1px solid var(--sand);
        top: auto;
        bottom: 64px; /* dock uniquement */
        height: calc(100dvh - 64px - 48px);
        transform: translateY(110%);
        transition: transform .28s cubic-bezier(.4,0,.2,1);
        z-index: 300;
        border-radius: 12px 12px 0 0;
        overflow: hidden;
    }
    .combine-sidebar.open { transform: translateY(0); }
}

/* ─── Menu long-press mobile (contextuel carte) ──────────────────────────── */
.mobile-map-menu {
    animation: mmenu-in .15s ease-out both;
}
@keyframes mmenu-in {
    from { opacity: 0; transform: scale(.92); }
    to   { opacity: 1; transform: scale(1); }
}

/* ══════════════════════════════════════════════════════
   MODULE PARTAGE v247
   ══════════════════════════════════════════════════════ */

/* ── Overlay principal ── */
#share-overlay {
    display: none;
    position: fixed;
    inset: 0;
    z-index: var(--z-mode-bar);
    background: rgba(26,22,18,.55);
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity .25s;
    padding: 16px;
}
#share-overlay.show { opacity: 1; }

.share-modal {
    background: var(--color-card);
    border-radius: var(--radius-lg);
    box-shadow: 0 20px 60px rgba(0,0,0,.35);
    max-width: 520px;
    width: 100%;
    padding: 28px 28px 24px;
    position: relative;
    max-height: 90dvh;
    overflow-y: auto;
    animation: share-modal-in .2s cubic-bezier(.22,1,.36,1) both;
}
@keyframes share-modal-in {
    from { opacity:0; transform: translateY(12px) scale(.97); }
    to   { opacity:1; transform: translateY(0) scale(1); }
}

.share-modal h2 {
    font-size: 1.2rem;
    font-weight: 700;
    margin: 0 0 4px;
    color: var(--ink);
    display: flex;
    align-items: center;
    gap: 8px;
}

.share-modal-close {
    position: absolute;
    top: 14px;
    right: 14px;
    background: none;
    border: none;
    font-size: 1.3rem;
    cursor: pointer;
    color: var(--ink-light);
    line-height: 1;
    padding: 4px;
    border-radius: var(--radius);
}
.share-modal-close:hover { color: var(--ink); background: var(--sand); }

/* ── Avertissement visibilité publique ── */
.share-public-warning {
    background: #FFF8E1;
    border: 1px solid #F6C026;
    border-radius: var(--radius);
    padding: 10px 14px;
    font-size: var(--text-sm);
    color: #7B5E00;
    margin: 12px 0 16px;
    display: flex;
    gap: 8px;
    align-items: flex-start;
    line-height: 1.45;
}
.share-public-warning .spw-icon { font-size: 1rem; flex-shrink: 0; margin-top: 1px; }

/* ── Résumé des éléments partagés ── */
.share-summary-box {
    background: rgba(192,57,43,.06);
    border: 1px solid rgba(192,57,43,.18);
    border-radius: var(--radius);
    padding: 10px 14px;
    font-size: var(--text-sm);
    color: var(--ink-soft);
    margin-bottom: 18px;
    line-height: 1.6;
}

/* ── Bouton créer ── */
#share-create-btn {
    width: 100%;
    padding: 11px;
    font-size: 1rem;
    justify-content: center;
}

/* ── Zone résultat ── */
#share-result-zone { display: none; }

.share-result-title {
    font-weight: 700;
    font-size: .95rem;
    color: var(--ink);
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.share-link-row {
    display: flex;
    gap: 8px;
    margin-bottom: 16px;
}
.share-link-row input {
    flex: 1;
    padding: 8px 10px;
    border: 1px solid var(--sand);
    border-radius: var(--radius);
    font-size: var(--text-sm);
    background: rgba(255,255,255,.7);
    color: var(--ink);
    min-width: 0;
}
.share-link-row input:focus { outline: none; border-color: var(--trail); }

/* ── QR Code ── */
.share-qr-block {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    margin-top: 8px;
}
#share-qr-container {
    background: #f5f0e8;
    border-radius: var(--radius);
    padding: 10px;
    border: 1px solid var(--sand);
    min-width: 180px;
    min-height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.share-qr-label {
    font-size: var(--text-xs);
    color: var(--ink-light);
    text-align: center;
}

/* ── Bandeau vue partagée ── */
#share-view-banner {
    position: fixed;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    z-index: var(--z-sidebar);
    background: var(--ink);
    color: var(--paper);
    padding: 7px 14px;
    border-radius: 0 0 var(--radius-lg) var(--radius-lg);
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: var(--text-sm);
    box-shadow: 0 4px 16px rgba(0,0,0,.3);
    white-space: nowrap;
    max-width: 90vw;
    animation: share-banner-in .3s cubic-bezier(.22,1,.36,1) both;
}
@keyframes share-banner-in {
    from { opacity:0; transform: translateX(-50%) translateY(-100%); }
    to   { opacity:1; transform: translateX(-50%) translateY(0); }
}
.svb-icon { font-size: 1rem; }
.svb-text { font-weight: 600; }
.svb-edit {
    background: rgba(255,255,255,.15);
    border: 1px solid rgba(255,255,255,.3);
    color: var(--paper);
    border-radius: var(--radius);
    padding: 3px 10px;
    font-size: var(--text-xs);
    cursor: pointer;
    transition: background .15s;
}
.svb-edit:hover { background: rgba(255,255,255,.25); }
.svb-close {
    background: none;
    border: none;
    color: rgba(255,255,255,.6);
    cursor: pointer;
    font-size: 1.1rem;
    padding: 0 2px;
    line-height: 1;
}
.svb-close:hover { color: var(--paper); }

@media (max-width: 599px) {
    .share-modal { padding: 20px 16px 18px; }
    .share-link-row { flex-direction: column; }
    .share-link-row input { font-size: .8rem; }
    #share-view-banner { font-size: .75rem; padding: 6px 10px; gap: 7px; }
}

/* ═══════════════════════════════════════════════════════════
   SIMULATION OVERLAY — layout 2 colonnes desktop
═══════════════════════════════════════════════════════════ */
.sim-modal { padding: 24px 28px 20px; }

.sim-body {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 28px;
    align-items: start;
}
@media (max-width: 599px) {
    .sim-body { grid-template-columns: 1fr; gap: 16px; }
}

.sim-section-title {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--ink-light);
    margin-bottom: 10px;
    padding-bottom: 6px;
    border-bottom: 1px solid var(--sand);
}

.sim-field { display: flex; flex-direction: column; gap: 5px; margin-bottom: 12px; }
.sim-field label { font-size: .78rem; font-weight: 600; color: var(--ink-soft); }

.sim-field-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

/* Effort buttons */
.sim-effort-btns {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}
.sim-effort-btn {
    flex: 1;
    padding: 7px 6px;
    min-width: 30%;
    border-radius: 8px;
    border: 1.5px solid var(--sand);
    background: var(--paper);
    color: var(--ink-soft);
    font-size: .78rem;
    font-weight: 600;
    cursor: pointer;
    text-align: center;
    transition: all .15s;
    font-family: inherit;
}
.sim-effort-btn:hover { border-color: var(--trail); color: var(--trail); }
.sim-effort-btn.active {
    background: var(--trail);
    border-color: var(--trail);
    color: #fff;
}

/* Preview grid */
.sim-col-preview {
    background: var(--paper);
    border: 1px solid var(--sand);
    border-radius: 10px;
    padding: 16px;
}
.sim-preview-grid {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.sim-stat {
    display: grid;
    grid-template-columns: 20px 1fr auto;
    align-items: center;
    gap: 8px;
    padding: 7px 6px;
    border-radius: 6px;
    transition: background .1s;
}
.sim-stat:hover { background: var(--parchment); }
.sim-stat-icon { font-size: 14px; text-align: center; }
.sim-stat-label { font-size: .78rem; color: var(--ink-soft); }
.sim-stat-val {
    font-size: .82rem;
    font-weight: 700;
    color: var(--ink);
    text-align: right;
    white-space: nowrap;
}

/* ════════════════════════════════════════════════════════════════════
   MODE ACTIF — Bandeau d'annulation flottant
   ════════════════════════════════════════════════════════════════════ */
#mode-cancel-bar {
    position: fixed;
    bottom: calc(var(--toolbar-h) + 12px);
    left: 50%;
    transform: translateX(-50%);
    z-index: var(--z-modal);
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 16px 8px 12px;
    background: rgba(30, 20, 10, 0.92);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 24px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.4);
    color: #f5efe0;
    font-size: .82rem;
    font-family: inherit;
    pointer-events: all;
    animation: modeBarIn .18s ease;
    white-space: nowrap;
}
#mode-cancel-bar.hidden { display: none !important; }
.mcb-icon  { font-size: 1rem; line-height: 1; }
.mcb-label { font-weight: 700; letter-spacing: .02em; }
.mcb-hint  {
    color: rgba(245,239,224,0.55);
    font-size: .75rem;
}
.mcb-sep   { color: rgba(245,239,224,0.3); }
.mcb-validate {
    margin-left: 4px;
    padding: 4px 13px;
    border: none;
    border-radius: 14px;
    background: var(--color-success);
    color: #fff;
    font-size: .78rem;
    font-weight: 700;
    cursor: pointer;
    transition: background .15s;
    font-family: inherit;
    letter-spacing: .02em;
}
.mcb-validate:hover  { background: #219a52; }
.mcb-validate:active { background: #1a7a41; }
.mcb-validate.hidden { display: none !important; }
.mcb-cancel {
    margin-left: 4px;
    padding: 4px 13px;
    border: none;
    border-radius: 14px;
    background: #e53e3e;
    color: #fff;
    font-size: .78rem;
    font-weight: 700;
    cursor: pointer;
    transition: background .15s;
    font-family: inherit;
    letter-spacing: .02em;
}
.mcb-cancel:hover  { background: #c53030; }
.mcb-cancel:active { background: #9b2c2c; }
@keyframes modeBarIn {
    from { opacity: 0; transform: translateX(-50%) translateY(8px); }
    to   { opacity: 1; transform: translateX(-50%) translateY(0); }
}
@media (max-width: 640px) {
    #mode-cancel-bar {
        bottom: calc(64px + 16px); /* au-dessus du dock */
        font-size: .75rem;
        padding: 6px 12px 6px 10px;
        gap: 7px;
    }
    .mcb-hint { display: none; }
}

/* ════════════════════════════════════════════════════════════════════
   SÉLECTEUR DE LANGUE — map-controls
   ════════════════════════════════════════════════════════════════════ */
.lang-switcher {
    position: relative;
    margin-top: 4px;
    padding-top: 4px;
    border-top: 1px solid var(--sand);
}
.lang-trigger {
    width: 40px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 1px !important;
    padding: 0 !important;
    font-size: 18px !important;
}
.lang-trigger .lang-arrow {
    font-size: 8px;
    color: var(--ink-soft);
    line-height: 1;
    margin-top: 2px;
    transition: transform .15s;
}
.lang-trigger[aria-expanded="true"] .lang-arrow {
    transform: rotate(180deg);
}
.lang-dropdown {
    position: absolute;
    left: 44px;
    bottom: 4px;
    background: rgba(250,247,242,0.98);
    border: 1px solid var(--sand);
    border-radius: var(--radius);
    box-shadow: 0 4px 16px rgba(0,0,0,.18);
    backdrop-filter: blur(8px);
    overflow: hidden;
    min-width: 120px;
    z-index: 400;
    animation: langDropIn .14s ease;
}
.lang-dropdown[hidden] { display: none; }
@keyframes langDropIn {
    from { opacity: 0; transform: translateX(-4px); }
    to   { opacity: 1; transform: translateX(0); }
}
.lang-option {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 7px 12px;
    border: none;
    background: transparent;
    cursor: pointer;
    font-size: .82rem;
    font-family: inherit;
    color: var(--ink);
    text-align: left;
    transition: background .12s;
    white-space: nowrap;
}
.lang-option:hover { background: rgba(0,0,0,.06); }
.lang-option.active {
    font-weight: 700;
    background: rgba(0,0,0,.04);
}
.lang-option .lang-check {
    margin-left: auto;
    font-size: .7rem;
    color: var(--ink-soft);
    opacity: 0;
}
.lang-option.active .lang-check { opacity: 1; }



/* ══════════════════════════════════════════════════════════════
   PANEL UNITÉS — même style que le panel fond de carte
   ══════════════════════════════════════════════════════════════ */
.units-panel {
    position: fixed;
    bottom: calc(var(--toolbar-h) + 12px);
    left: 70px;
    z-index: 340;
    width: 260px;
    background: rgba(26,22,18,.93);
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 14px;
    box-shadow: 0 8px 40px rgba(0,0,0,.45);
    backdrop-filter: blur(16px);
    color: var(--paper);
    overflow: hidden;
    font-family: 'Inter', sans-serif;
    opacity: 0;
    pointer-events: none;
    transform: translateY(8px) scale(.97);
    transition: opacity .18s, transform .18s;
}
.units-panel.open {
    opacity: 1;
    pointer-events: all;
    transform: translateY(0) scale(1);
}
.usp-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 13px 16px 11px;
    border-bottom: 1px solid rgba(255,255,255,.07);
}
.usp-title {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: rgba(255,255,255,.7);
}
.usp-body {
    padding: 14px 16px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.usp-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}
.usp-label {
    font-size: 12px;
    font-weight: 500;
    color: rgba(255,255,255,.55);
    white-space: nowrap;
    flex-shrink: 0;
}
.usp-seg-group {
    display: flex;
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 8px;
    overflow: hidden;
    flex-shrink: 0;
}
.usp-seg {
    padding: 6px 14px;
    border: none;
    background: transparent;
    color: rgba(255,255,255,.5);
    font-size: 12px;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    transition: background .12s, color .12s;
    white-space: nowrap;
}
.usp-seg:hover { background: rgba(255,255,255,.08); color: rgba(255,255,255,.8); }
.usp-seg.active {
    background: var(--trail);
    color: #fff;
}
.usp-seg + .usp-seg {
    border-left: 1px solid rgba(255,255,255,.12);
}

/* ══════════════════════════════════════════════════════════════
   BOUTON UNITÉS MOBILE
   Positionné sous le sélecteur de langue (top:176px + 44px + 8px)
   ══════════════════════════════════════════════════════════════ */
.units-btn-mobile {
    position: fixed;
    right: 16px;
    top: 228px;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: rgba(245,240,232,0.97);
    border: 1px solid var(--sand);
    box-shadow: var(--shadow-sm);
    z-index: 400;
    display: none;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    cursor: pointer;
    transition: background .15s;
}
.units-btn-mobile:hover,
.units-btn-mobile:active { background: rgba(235,228,218,0.97); }

.view3d-btn-mobile {
    position: fixed;
    right: 16px;
    top: 280px;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: rgba(245,240,232,0.97);
    border: 1px solid var(--sand);
    box-shadow: var(--shadow-sm);
    z-index: 400;
    display: none;
    align-items: center;
    justify-content: center;
    color: #2b2b2b;
    cursor: pointer;
    transition: background .15s;
}

/* Bouton soutien mobile (v484) - masque desktop, positionne par JS */
.support-btn-mobile {
    position: fixed;
    right: 16px;
    top: 332px;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: rgba(245,240,232,0.97);
    border: 1px solid var(--sand);
    box-shadow: var(--shadow-sm);
    z-index: 400;
    display: none;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    cursor: pointer;
    transition: background .15s;
}
.view3d-btn-mobile:hover,
.view3d-btn-mobile:active { background: rgba(235,228,218,0.97); }

@media (max-width: 767px) {
    /* ── 4 boutons flottants : haut-droite ── */
    #geolocation-btn-mobile,
    #map-style-btn-mobile {
        display: flex !important;
        left: auto !important;
        right: 12px !important;
        bottom: auto !important;
    }
    .lang-switcher-mobile {
        display: flex !important;
        left: auto !important;
        right: 12px !important;
        bottom: auto !important;
    }
    .units-btn-mobile {
        display: flex !important;
        left: auto !important;
        right: 12px !important;
        bottom: auto !important;
    }
    .view3d-btn-mobile {
        display: flex !important;
        left: auto !important;
        right: 12px !important;
        bottom: auto !important;
    }

    /* Positions verticales sous la stats-strip */
    #geolocation-btn-mobile { top: 64px;  }
    #map-style-btn-mobile   { top: 116px; }
    .lang-switcher-mobile   { top: 168px; }
    .units-btn-mobile       { top: 220px; }
    .view3d-btn-mobile      { top: 272px; }

    /* Panel unités s'ouvre vers le bas (bouton en haut à droite) */
    .units-panel {
        top: 220px !important;
        right: 68px !important;
        bottom: auto !important;
        left: auto !important;
        transform: none !important;
        width: 220px;
    }
    .units-panel.open { transform: none !important; }

    /* Dropdown langue s'ouvre vers la gauche depuis haut-droite */
    .lang-dropdown-mobile {
        right: 0;
        left: auto;
        top: 44px;
        bottom: auto;   /* v449 : annule le bottom:4px hérité de .lang-dropdown
                           qui, combiné à top:44px sur un parent de 44px, écrasait
                           la hauteur à 0/1/2 px en simulation desktop/DevTools */
        transform: none;
    }
}

/* ── Landscape mobile : même côté gauche, colonne compacte ── */
@media (max-width: 900px) and (orientation: landscape) and (max-height: 500px) {
    /* Boutons flottants : plus serrés en landscape */
    #geolocation-btn-mobile { bottom: 72px;  top: auto !important; left: auto !important; right: 12px; display: flex !important; width: 38px !important; height: 38px !important; }
    #map-style-btn-mobile   { bottom: 116px; top: auto !important; left: auto !important; right: 12px; display: flex !important; width: 38px !important; height: 38px !important; }
    .lang-switcher-mobile   { bottom: 160px; top: auto !important; left: auto !important; right: 12px; display: flex !important; width: 38px !important; height: 38px !important; }
    .units-btn-mobile       { bottom: 204px; top: auto !important; left: auto !important; right: 12px; display: flex !important; width: 38px !important; height: 38px !important; }
    .view3d-btn-mobile      { bottom: 248px; top: auto !important; left: auto !important; right: 12px; display: flex !important; width: 38px !important; height: 38px !important; }

    /* Profil altimétrique : hauteur réduite en landscape */
    .elevation-profile-container {
        height: 100px !important;
        min-height: 80px !important;
    }

    /* Bottom sheets : max-height réduit */
    .bottom-sheet {
        max-height: 70vh !important;
    }
}

/* ════════════════════════════════════════════════════════════
   OVERLAYS FLOTTANTS — corrections mobile/tablette
   Tous positionnés au-dessus du dock (64px) avec z-index cohérents
   ════════════════════════════════════════════════════════════ */
@media (max-width: 1024px) {
    /* Dock = 64px → base = 64 + 16 = 80px minimum */

    /* Barre annulation mode (cut, draw, move...) — z-index max, niveau 1 */
    #mode-cancel-bar {
        bottom: calc(64px + 16px) !important;
        z-index: 9500 !important;
    }

    /* Barre confirmation tracé — collée au-dessus du dock */
    .draw-confirm-bar {
        bottom: 64px !important;
        z-index: 9100 !important;
        border-radius: 0 !important;
        left: 0 !important;
        right: 0 !important;
        transform: none !important;
        width: 100% !important;
        justify-content: space-around !important;
    }

    /* Toast progression opération */
    #op-progress-toast {
        bottom: calc(64px + 16px) !important;
        z-index: var(--z-modal) !important;
    }

    /* Barre save itinéraire POI */
    .poi-itin-save-bar {
        bottom: calc(64px + 16px) !important;
        z-index: 9400 !important;
    }

    /* Barre départ en attente POI */
    .poi-start-pending-bar {
        bottom: calc(64px + 16px) !important;
        z-index: 9300 !important;
    }

    /* Loop gen panel */
    #loop-gen-panel {
        bottom: calc(64px + 8px) !important;
        z-index: var(--z-modal) !important;
    }

    /* Barre édition points — corriger bottom */
    #edit-points-bar {
        bottom: calc(64px + 16px) !important;
        z-index: 9200 !important;
    }

    /* Draw picker */
    #draw-picker {
        bottom: calc(64px + 8px) !important;
    }
}

/* Desktop > 1024px : masquer mode-cancel-bar uniquement quand edit-points-bar est active */
@media (min-width: 1025px) {
    body:has(#edit-points-bar.active) #mode-cancel-bar { display: none !important; }
}

/* ── Tooltip survol de trace ─────────────────────────────────── */
.leaflet-tooltip.track-tooltip {
    background: var(--bg-card, #fff);
    border: 1px solid rgba(0,0,0,.13);
    border-radius: 8px;
    padding: 7px 11px;
    font-size: .82rem;
    line-height: 1.55;
    color: var(--text-primary, #1a1a1a);
    box-shadow: 0 2px 8px rgba(0,0,0,.15);
    pointer-events: none;
    white-space: normal;
    max-width: 320px;
    min-width: 160px;
}
.leaflet-tooltip.track-tooltip::before {
    display: none;
}

/* ── Survol synchronisé : étiquette accrochée au marqueur ──── */
.leaflet-tooltip.hover-sync-tip {
    background: var(--ink, #2d1e0f);
    color: #fff;
    border: none;
    border-radius: 8px;
    padding: 6px 10px;
    font-family: 'Inconsolata', monospace;
    font-size: .82rem;
    line-height: 1.55;
    white-space: nowrap;
    box-shadow: 0 4px 16px rgba(0,0,0,.3);
    pointer-events: none;
}
.leaflet-tooltip.hover-sync-tip::before { display: none; }
.hs-chip {
    display: inline-block;
    width: 9px; height: 9px;
    border-radius: 2px;
    margin-right: 5px;
    vertical-align: 0;
}

/* ── Combine : bouton supprimer trace ──────────────────────── */
.cmb-remove-btn {
    background: none;
    border: none;
    color: var(--ink-light, #999);
    cursor: pointer;
    font-size: .75rem;
    padding: 2px 4px;
    border-radius: 4px;
    flex-shrink: 0;
    line-height: 1;
    transition: color .15s, background .15s;
}
.cmb-remove-btn:hover {
    color: #e53e3e;
    background: rgba(229,62,62,.08);
}

/* ── Combine : liste traces depuis la carte ────────────────── */
.cmb-map-list {
    max-height: 180px;
}
.cmb-map-track-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 10px;
    border-bottom: 1px solid rgba(0,0,0,.05);
    font-size: var(--text-sm);
    cursor: pointer;
    user-select: none;
}
.cmb-map-track-item:last-child { border-bottom: none; }
.cmb-map-track-item input[type="checkbox"] {
    flex-shrink: 0;
    accent-color: var(--trail, #4299E1);
    width: 14px;
    height: 14px;
    cursor: pointer;
}
.cmb-add-map-btn {
    margin-top: 6px;
    background: var(--trail, #4299E1) !important;
}
.cmb-add-map-btn:disabled {
    opacity: .4;
    cursor: not-allowed;
}

/* ══════════════════════════════════════════════════════════════
   OVERLAY PROGRESSION ANALYSE TERRAIN
   ══════════════════════════════════════════════════════════════ */
#terrain-progress-overlay {
    position: fixed; inset: 0;
    background: rgba(26,22,18,.45);
    z-index: var(--z-dropdown);
    display: none;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(2px);
}
#terrain-progress-overlay.show { display: flex; }
#terrain-progress-dialog {
    background: var(--parchment);
    border: 1px solid var(--sand);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-xl);
    padding: 28px 28px 20px;
    max-width: 360px;
    width: 90%;
    font-family: 'Inter', sans-serif;
    animation: submenuIn .15s ease;
}
#terrain-progress-dialog h3 {
    font-size: 1rem;
    font-weight: 700;
    color: var(--ink);
    margin: 0 0 6px;
}
#terrain-progress-track {
    font-size: .82rem;
    color: var(--ink-light);
    margin: 0 0 14px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-height: 1.2em;
}
#terrain-progress-bar-wrap {
    background: var(--sand);
    border-radius: 99px;
    height: 6px;
    overflow: hidden;
    margin-bottom: 8px;
}
#terrain-progress-bar-fill {
    height: 100%;
    background: var(--trail);
    border-radius: 99px;
    width: 0%;
    transition: width .4s ease;
}
#terrain-progress-count {
    font-size: .78rem;
    color: var(--ink-light);
    margin: 0 0 18px;
    text-align: right;
}
.terrain-progress-btns {
    display: flex;
    justify-content: flex-end;
}
#terrain-progress-cancel {
    padding: 7px 18px;
    border-radius: var(--radius-sm);
    font-size: .83rem;
    font-weight: 600;
    border: none;
    cursor: pointer;
    background: var(--btn-secondary-bg);
    color: var(--ink);
    transition: opacity .15s;
}
#terrain-progress-cancel:hover { opacity: .75; }


/* ────────────────────────────────────────────
   SIDE ACTIONS (Contact + Support) — desktop only
   Boutons flottants au-dessus de la toolbar, à droite
─────────────────────────────────────────────*/
.side-actions {
    position: fixed;
    right: 18px;
    bottom: calc(var(--toolbar-h) + 12px);
    z-index: 350;
    display: flex;
    flex-direction: column-reverse; /* contact en bas, support au-dessus */
    gap: 8px;
    pointer-events: none; /* le conteneur ne capte rien, seuls les boutons */
}
.side-actions .side-act-btn {
    pointer-events: auto;
    width: 40px;
    height: 40px;
    border-radius: var(--radius);
    background: rgba(245,240,232,0.95);
    border: 1px solid var(--sand);
    backdrop-filter: blur(6px);
    box-shadow: var(--shadow-sm);
    cursor: pointer;
    font-size: 18px;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background .15s, border-color .15s, transform .15s;
    padding: 0;
}
.side-actions .side-act-btn:hover {
    background: var(--ink);
    border-color: var(--ink);
    transform: translateY(-1px);
}
.side-actions #support-btn:hover {
    background: #c0392B;
    border-color: #c0392B;
}
.side-actions #contact-btn:hover { filter: none; }
.side-actions .side-act-btn:active { transform: translateY(0); }

/* Masquer entièrement sur mobile (PC bureau uniquement) */
@media (max-width: 767px) {
    .side-actions { display: none !important; }
}
@media (min-width: 768px) and (max-width: 1024px) {
    .side-actions { display: none !important; }
}

/* ══════════════════════════════════════════════════════════════════════
   Ensoleillement — v506
   La légende réutilise .slope-legend et sa structure sl-*. On n'ajoute que
   la disposition verticale (sl-body est en flex horizontal pour la barre de
   dégradé de la pente) et les deux blocs de texte qui lui sont propres.
   ══════════════════════════════════════════════════════════════════════ */

#ombrage-legend { width: 236px; }
#ombrage-legend .sl-body {
    flex-direction: column;
    gap: 9px;
}
#ombrage-legend .sl-label { white-space: normal; }

/* Le pourcentage est le chiffre à retenir : il se compare d'une saison à
   l'autre, contrairement aux heures qui suivent la durée du jour. */
.sl-total {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 40px;
    font-weight: 900;
    line-height: .95;
    letter-spacing: -.01em;
}
.sl-total span {
    font-size: 20px;
    font-weight: 700;
    opacity: .7;
    margin-left: 1px;
}
.sl-hours {
    font-family: 'Inconsolata', monospace;
    font-size: 11.5px;
    color: rgba(255,255,255,.55);
    margin-top: -4px;
}
.sl-date {
    font-family: 'Inconsolata', monospace;
    font-size: 10.5px;
    letter-spacing: 0;
    color: rgba(255,255,255,.4);
    margin-left: 3px;
}

.sl-note {
    font-family: 'Inconsolata', monospace;
    font-size: 10px;
    line-height: 1.5;
    color: rgba(255,255,255,.6);
    border-top: 1px solid rgba(255,255,255,.07);
    padding-top: 7px;
}

/* Contrôles de la fenêtre de réglage */
.ombrage-field { margin-bottom: 14px; }
.ombrage-field label {
    display: block;
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--ink-soft);
    margin-bottom: 7px;
}
.ombrage-field input[type="date"] {
    padding: 9px 12px;
    border: 1px solid var(--line, rgba(26,22,18,.18));
    border-radius: 8px;
    font-family: 'Inter', sans-serif;
    font-size: 15px;
    color: var(--ink);
    background: #fff;
    width: 100%;
    max-width: 220px;
}
.ombrage-field input[type="date"]:focus {
    outline: none;
    border-color: var(--trail);
    box-shadow: 0 0 0 3px var(--trail-glow);
}

.ombrage-presets { display: flex; gap: 8px; flex-wrap: wrap; }
.ombrage-actions { margin-top: 24px; }

/* Variantes de .tp-btn : celui-ci est une entrée de menu pleine largeur,
   il faut le ramener à un bouton d'action pour cet usage. */
.tp-btn-sm {
    display: inline-block;
    width: auto;
    text-align: center;
    padding: 7px 14px;
    border: 1px solid var(--line, rgba(26,22,18,.18));
    border-radius: 8px;
}
.tp-btn-primary {
    display: inline-block;
    width: auto;
    text-align: center;
    padding: 11px 26px;
    border-radius: 8px;
    background: var(--trail);
    color: #fff;
    font-size: 15px;
    font-weight: 600;
}
.tp-btn-primary:hover:not(:disabled) {
    background: var(--trail);
    color: #fff;
    filter: brightness(1.08);
}

/* ═══════════════════════════════════════════════════════════════════
   v511 — FONDS SATELLITE + SOURCES & LICENCES
   ═══════════════════════════════════════════════════════════════════ */

/* Halo blanc sur les traces au-dessus d'une orthophoto.
   Un seul filtre sur le <svg> du pane overlay : une passe de composition,
   pas une par path. Le rendu Canvas du PDF et de l'image OG n'est pas
   concerné (les traces y sont redessinées à l'API Canvas). */
#map.map-satellite .leaflet-overlay-pane svg {
    filter: drop-shadow(0 0 2px rgba(255,255,255,.95))
            drop-shadow(0 0 4px rgba(255,255,255,.55));
}

/* Pied du panneau de fonds de carte */
.msp-footer {
    margin-top: 10px;
    padding-top: 9px;
    border-top: 1px solid rgba(26,18,8,.10);
    text-align: center;
}
.msp-sources-link {
    background: none;
    border: none;
    padding: 2px 4px;
    cursor: pointer;
    font-family: 'Inter', sans-serif;
    font-size: 11px;
    font-weight: 500;
    color: #7A6A54;
    letter-spacing: .2px;
    transition: color .15s;
}
.msp-sources-link:hover { color: #c0392b; }

/* Modale Sources & licences */
#sources-overlay .src-grp {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    color: #c0392b;
    margin: 16px 0 6px;
}
#sources-overlay .src-grp:first-child { margin-top: 0; }
#sources-overlay .src-list { list-style: none; margin: 0; padding: 0; }
#sources-overlay .src-list li {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    padding: 5px 0;
    border-bottom: 1px solid rgba(26,18,8,.07);
    font-size: 13px;
}
#sources-overlay .src-list li:last-child { border-bottom: none; }
#sources-overlay .src-list a { color: #1A1208; text-decoration: none; }
#sources-overlay .src-list a:hover { color: #c0392b; text-decoration: underline; }
#sources-overlay .src-lic {
    flex-shrink: 0;
    font-family: 'Inconsolata', monospace;
    font-size: 11px;
    color: #A08E76;
    white-space: nowrap;
}
#sources-overlay .src-note {
    margin-top: 18px;
    padding-top: 12px;
    border-top: 1px solid rgba(26,18,8,.10);
    font-size: 12px;
    line-height: 1.5;
    color: #7A6A54;
}

/* ═══════════════════════════════════════════════════════════════════
   v513 — GÉNÉRATEUR DE BOUCLE
   ═══════════════════════════════════════════════════════════════════ */

.lg-sec { margin-bottom: 18px; }
.lg-lab {
    display: block;
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--ink-light);
    margin-bottom: 8px;
}
.lg-row { display: flex; gap: 8px; }
.lg-row > * { flex: 1; }
.lg-hint { font-size: 11.5px; color: var(--ink-light); line-height: 1.45; margin: 8px 0 0; }

/* Pastilles de pratique */
.lg-pills { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.lg-pill {
    border: 1px solid var(--sand);
    background: white;
    border-radius: var(--radius);
    padding: 9px 4px;
    text-align: center;
    font-family: 'Inter', sans-serif;
    font-size: 11.5px;
    font-weight: 500;
    color: var(--ink);
    line-height: 1.3;
    cursor: pointer;
    transition: border-color .14s, background .14s, color .14s;
}
.lg-pill em { display: block; font-style: normal; font-size: 17px; margin-bottom: 2px; }
.lg-pill:hover { border-color: var(--trail); color: var(--trail); }
.lg-pill.on { background: var(--trail); border-color: var(--trail); color: white; }

/* Distance */
.lg-kmline { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 6px; }
/* v517 : c'est LE réglage du panneau, il doit se lire d'un coup d'oeil */
.lg-kmline b {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 48px;
    font-weight: 900;
    line-height: .85;
    letter-spacing: -1.5px;
    color: var(--ink);
    display: flex;
    align-items: baseline;
    gap: 5px;
}
.lg-kmline b .lg-unit {
    font-size: 19px;
    font-weight: 700;
    letter-spacing: 0;
    color: var(--ink-light);
}
.lg-kmline > span { font-size: 11px; color: var(--ink-light); white-space: nowrap; }
#lg-km { width: 100%; accent-color: var(--trail); }

/* Cadran d'orientation */
.lg-dial { display: grid; grid-template-columns: repeat(3, 1fr); gap: 5px; max-width: 190px; margin: 0 auto; }
.lg-dir {
    border: 1px solid var(--sand);
    background: white;
    border-radius: 6px;
    padding: 8px 0;
    font-family: 'Inter', sans-serif;
    font-size: 11px;
    font-weight: 600;
    color: var(--ink-light);
    cursor: pointer;
    transition: border-color .14s, background .14s, color .14s;
}
.lg-dir:hover { border-color: var(--trail); }
.lg-dir.on { background: var(--trail); border-color: var(--trail); color: white; }
.lg-dir.auto { font-family: 'Barlow Condensed', sans-serif; letter-spacing: 1.2px; }

.lg-go { width: 100%; margin-top: 4px; }

/* Repère de départ sur la carte */
.lg-start-dot {
    width: 18px; height: 18px;
    background: var(--trail);
    border: 2.5px solid #fff;
    border-radius: 50%;
    box-shadow: 0 1px 5px rgba(0,0,0,.4);
}

/* ── Overlay d'attente : la boucle qui se dessine ── */
.lg-ring { width: 104px; height: 104px; margin: 4px auto 18px; display: block; }
.lg-ring-arc  { transform-origin: 60px 60px; animation: lgSpin 2.4s linear infinite; }
.lg-ring-dot  { transform-origin: 60px 60px; animation: lgSpin 2.4s linear infinite; }
@keyframes lgSpin { from { transform: rotate(-90deg); } to { transform: rotate(270deg); } }

.lg-pg-title { font-size: 15px; color: #ede5d0; margin: 0 0 4px; }
.lg-pg-sub   { font-size: 12px; color: #8a7a64; margin: 0; }
.lg-pg-note  { font-size: 11.5px; color: #e0c169; margin: 6px 0 0; min-height: 15px; }

.lg-coffee {
    font-size: 12px;
    color: #8a7a64;
    line-height: 1.6;
    margin: 16px 0 0;
    padding-top: 14px;
    border-top: 1px solid #2C2418;
}
.lg-coffee button {
    background: none;
    border: none;
    padding: 0;
    font: inherit;
    color: #8a7a64;
    text-decoration: underline;
    text-underline-offset: 2px;
    cursor: pointer;
}
.lg-coffee button:hover { color: var(--trail); }

.lg-cancel {
    margin-top: 14px;
    background: none;
    border: none;
    padding: 4px;
    font-family: 'Inter', sans-serif;
    font-size: 11.5px;
    color: #6b5c48;
    cursor: pointer;
}
.lg-cancel:hover { color: #ede5d0; }

.lg-fail-head { font-size: 15px; color: #ede5d0; margin: 6px 0 10px; line-height: 1.45; }
.lg-fail-body { font-size: 12.5px; color: #8a7a64; line-height: 1.6; margin: 0 0 20px; }

@media (prefers-reduced-motion: reduce) {
    .lg-ring-arc, .lg-ring-dot { animation: none; }
}

/* v514 — note de durée et lien PayPal de l'overlay d'attente */
.lg-coffee a {
    color: #8a7a64;
    text-decoration: underline;
    text-underline-offset: 2px;
}
.lg-coffee a:hover { color: var(--trail); }

/* v515 — panneau de diagnostic de l'échec */
.lg-fail-toggle {
    background: none;
    border: none;
    padding: 2px 4px;
    margin: -6px 0 14px;
    font-family: 'Inter', sans-serif;
    font-size: 11.5px;
    color: #8a7a64;
    text-decoration: underline;
    text-underline-offset: 2px;
    cursor: pointer;
}
.lg-fail-toggle:hover { color: #ede5d0; }
.lg-fail-detail {
    text-align: left;
    background: rgba(0,0,0,.28);
    border-radius: var(--radius);
    padding: 10px 12px;
    margin-bottom: 16px;
    max-height: 190px;
    overflow-y: auto;
}
.lg-rep {
    font-family: 'Inconsolata', monospace;
    font-size: 10.5px;
    line-height: 1.65;
    color: #b8a98c;
    word-break: break-word;
}

/* v520 — fourchette annoncée sous le curseur de distance */
.lg-estimate {
    margin: 6px 0 0;
    font-size: 11.5px;
    color: var(--ink-light);
    font-style: italic;
}

/* v527 — décompte du budget horaire */
.lg-quota {
    margin: 0 0 10px;
    font-size: 11.5px;
    color: var(--ink-light);
    text-align: center;
}
.lg-go:disabled { opacity: .45; cursor: not-allowed; }

/* ── v556 : fond sombre (filtre sur les tuiles seules) ─────────────────── */
.leaflet-layer.tiles-dark,
.msp-thumb.tiles-dark {
    filter: invert(1) hue-rotate(180deg) brightness(.95) contrast(.9);
}

/* ── v556 : attribution visible, sur la ligne du bouton contact ──────────
   Le conteneur #map couvre tout l'écran : sans ce décalage, l'attribution
   Leaflet était cachée sous la barre d'outils. */
#map .leaflet-bottom.leaflet-right {
    bottom: calc(var(--toolbar-h) + 12px);
    right: 66px; /* 18 px de marge + bouton 40 px + 8 px d'écart */
}
#map .leaflet-control-attribution {
    margin: 0 !important;
    height: 40px;
    max-width: min(640px, calc(100vw - 160px));
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0 10px;
    background: rgba(245,240,232,0.95);
    border: 1px solid var(--sand);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
    backdrop-filter: blur(6px);
    font-family: 'Inter', sans-serif;
    font-size: 11px;
    line-height: 1.3;
    color: var(--ink-soft);
}
#map .leaflet-control-attribution .attr-txt {
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
#map .leaflet-control-attribution a { color: var(--ink); }
#map .leaflet-control-attribution .attr-sources {
    flex-shrink: 0;
    color: var(--trail);
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
}
#map .leaflet-control-attribution .attr-sources:hover { text-decoration: underline; }

/* Tablette et mobile : pas de boutons latéraux, ligne à gauche au-dessus
   du dock (le logo occupe la droite). */
@media (max-width: 1024px) {
    #map .leaflet-bottom.leaflet-right {
        right: auto;
        left: 8px;
        bottom: calc(76px + 4px);
    }
    #map .leaflet-control-attribution {
        height: 24px;
        max-width: calc(100vw - 140px);
        padding: 0 8px;
        gap: 6px;
        font-size: 10px;
    }
}

/* ── v557 : intertitres Monde / Régional du panneau des fonds ─────────── */
.msp-sec {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 6px 0 -2px;
    font-family: 'Inter', sans-serif;
    font-size: 11px;
    font-weight: 500;
    color: rgba(255,255,255,.62);
    letter-spacing: .2px;
}
.msp-sec:first-child { margin-top: 0; }
.msp-sec::after {
    content: '';
    flex: 1;
    border-top: 1px solid rgba(255,255,255,.12);
}

/* ── v560 : mention de licence imposée (MNT Copernicus GLO-90) ───────── */
#sources-overlay .src-legal {
    margin: 4px 0 2px;
    font-family: 'Inter', sans-serif;
    font-size: 10px;
    line-height: 1.4;
    font-style: italic;
    color: #7A6A54;
}

/* ── Tableau de marche / plan de course (v621, tableau.js) ─────────────── */
.tdm-modal { max-width: 860px; width: 96vw; padding: 24px 26px 18px; }
.tdm-modal h2 { margin: 0 0 4px; }
.tdm-sub { font-size: .82rem; font-weight: 600; color: var(--trail); margin-bottom: 14px; }
.tdm-ctrl { display: flex; flex-wrap: wrap; gap: 12px 16px; margin-bottom: 6px; }
.tdm-f { display: flex; flex-direction: column; gap: 4px; }
.tdm-f > label { font-size: .66rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--ink-light); }
.tdm-f .input-field { width: auto; padding: 6px 8px; font-size: .8rem; margin: 0; }
.tdm-inline { display: flex; align-items: center; gap: 6px; font-size: .78rem; color: var(--ink-light); }
.tdm-num { width: 58px !important; }
.tdm-hint { font-size: .72rem; color: var(--ink-light); margin: 6px 0 10px; line-height: 1.4; }
.tdm-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.tdm-table { width: 100%; border-collapse: collapse; font-size: .78rem; color: var(--ink); font-variant-numeric: tabular-nums; }
.tdm-table th { font-size: .6rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--ink-light);
    text-align: right; padding: 5px 6px; border-bottom: 2px solid var(--sand); white-space: nowrap; }
.tdm-table td { text-align: right; padding: 6px; border-bottom: 1px solid var(--sand); white-space: nowrap; }
.tdm-table .tdm-l { text-align: left; white-space: normal; min-width: 90px; }
.tdm-table td.tdm-t { font-weight: 700; }
.tdm-table tfoot td { font-weight: 700; border-top: 2px solid var(--sand); border-bottom: none; }
.tdm-dot { display: inline-block; min-width: 18px; height: 18px; border-radius: 9px; color: #fff; font-size: .62rem; font-weight: 700;
    text-align: center; line-height: 18px; padding: 0 3px; box-sizing: border-box; }
.tdm-dot.tdm-end { background: transparent; color: inherit; font-size: .85rem; }
.tdm-pz { width: 52px; padding: 3px 5px; border: 1px solid var(--sand); border-radius: 6px; background: var(--paper);
    color: var(--ink); font: inherit; text-align: right; }
.tdm-sun { margin-top: 12px; padding: 8px 11px; border-radius: 8px; font-size: .78rem; line-height: 1.4; }
.tdm-sun.tdm-warn { background: #fff4e5; color: #8a4b00; }
.tdm-sun.tdm-ok { background: #e8f5ec; color: #1e6b3a; }
.tdm-foot { display: flex; justify-content: flex-end; gap: 10px; margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--sand); }
@media (max-width: 640px) {
    .tdm-modal { padding: 18px 14px 14px; }
    .tdm-table { font-size: .72rem; }
    .tdm-table th, .tdm-table td { padding: 5px 4px; }
}

/* ── Question du sport (v622, askTrackSports dans script.js) ───────────── */
.sask-overlay { position: fixed; inset: 0; z-index: 100000; background: rgba(0,0,0,.55); backdrop-filter: blur(3px);
    display: flex; align-items: center; justify-content: center; padding: 16px; }
.sask-box { background: #faf7f2; border-radius: 14px; padding: 22px 24px 16px; width: min(580px, 100%); max-height: 88vh;
    overflow-y: auto; box-shadow: 0 8px 40px rgba(0,0,0,.35); color: #3a2e1e; }
.sask-box h3 { margin: 0 0 4px; font-size: 1.05rem; }
.sask-hint { margin: 0 0 12px; font-size: .78rem; color: #7a6a54; line-height: 1.45; }
.sask-row { margin-top: 12px; }
.sask-name { font-size: .8rem; font-weight: 700; margin-bottom: 7px; overflow-wrap: anywhere; }
.sask-name small { font-weight: 500; color: #8a7f6e; }
.sask-pills { display: flex; flex-wrap: wrap; gap: 6px; }
.sask-pill { position: relative; padding: 6px 11px; border-radius: 20px; border: 2px solid #ddd; background: #fff;
    color: #3a2e1e; font-size: .78rem; cursor: pointer; font-family: inherit; transition: background .12s, border-color .12s; }
.sask-pill:hover { border-color: #3a2e1e; }
.sask-pill.on { background: #3a2e1e; color: #faf7f2; border-color: #3a2e1e; }
.sask-tag { position: absolute; top: -9px; right: 6px; background: var(--trail); color: #fff; font-size: .55rem; font-weight: 700;
    padding: 1px 5px; border-radius: 6px; text-transform: uppercase; letter-spacing: .03em; }
.sask-btns { display: flex; justify-content: flex-end; gap: 8px; margin-top: 18px; padding-top: 14px; border-top: 1px solid #e5dccb; }
.sask-btns .btn[disabled] { opacity: .45; cursor: default; }
.track-sport-badge.track-sport-q { font-size: .66rem; font-weight: 800; color: var(--trail); border: 1px solid var(--trail);
    border-radius: 9px; padding: 0 5px; line-height: 1.35; opacity: .9; }

/* ── Pastille d'allure (v623, effortChipHtml dans script.js) ───────────── */
.eff-chip { display: inline-flex; align-items: center; gap: 5px; padding: 2px 8px 2px 7px; border-radius: 12px;
    border: 1px solid var(--sand); background: #fff; color: var(--ink); font-family: inherit; font-size: .68rem;
    font-weight: 700; line-height: 1.5; cursor: pointer; white-space: nowrap; vertical-align: middle;
    text-transform: none; letter-spacing: 0; }
.eff-chip:hover { border-color: var(--trail); }
.eff-chip.eff-lg { font-size: .78rem; padding: 5px 10px; }
.eff-chip.eff-mini { padding: 2px 5px; gap: 3px; }
.eff-chip.eff-mini .eff-lbl { display: none; }
.eff-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: #e1a600; flex-shrink: 0; }
.eff-calm .eff-dot, .eff-dot.eff-calm { background: #3b82c4; }
.eff-easy .eff-dot, .eff-dot.eff-easy { background: #27ae60; }
.eff-medium .eff-dot, .eff-dot.eff-medium { background: #e1a600; }
.eff-hard .eff-dot, .eff-dot.eff-hard { background: #e67e22; }
.eff-max .eff-dot, .eff-dot.eff-max { background: #e74c3c; }
.eff-custom .eff-dot, .eff-dot.eff-custom { background: #8e44ad; }
.eff-item-custom { margin-top: 3px; border-top: 1px solid var(--sand); border-radius: 0 0 7px 7px; padding-top: 9px; }
.eff-arrow { font-size: .58rem; color: var(--ink-light); }
.eff-menu { position: fixed; z-index: 100001; display: flex; flex-direction: column; gap: 2px; min-width: 180px; padding: 5px;
    background: var(--paper); border: 1px solid var(--sand); border-radius: 10px; box-shadow: 0 8px 24px rgba(0,0,0,.22); }
.eff-item { display: flex; align-items: center; gap: 8px; padding: 7px 9px; border: none; border-radius: 7px; background: transparent;
    color: var(--ink); font-family: inherit; font-size: .78rem; text-align: left; cursor: pointer; }
.eff-item:hover { background: var(--parchment); }
.eff-item.on { background: rgba(192,57,43,.08); outline: 1px solid var(--trail); }
.eff-item small { margin-left: auto; padding-left: 10px; color: var(--ink-light); font-size: .7rem; }
.cov-sum-eff { display: block; margin-top: 5px; }

/* ── Tableau de marche v624 : sport, allure perso (tdm.js) ─────────────── */
.tdm-f select.input-field { max-width: 170px; }
.tdm-pace-row { display: flex; align-items: center; gap: 6px; margin-top: 12px; flex-wrap: wrap; }
.tdm-pace-row > label { flex: 0 0 100%; font-size: .66rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: #7a6a54; }
.tdm-pace-row input { width: 64px; padding: 7px 8px; border: 1px solid #d8cdb8; border-radius: 8px; background: #fff; font-family: inherit;
    font-size: .95rem; color: #3a2e1e; text-align: center; }
.tdm-pace-row span { font-size: .8rem; color: #7a6a54; }
.tdm-pace-or { margin: 0 4px; font-style: italic; }
.tdm-pace-res { margin-top: 14px; padding: 8px 11px; border-radius: 8px; background: #f0eadd; font-size: .8rem; line-height: 1.4; color: #3a2e1e; min-height: 1.4em; }

/* ══════════════════════════════════════════════════════════════════════
   v628 — BARRE map-controls EN L (desktop)
   Branche verticale : voir / régler la carte ; coin = 3D ;
   branche horizontale : annuler · tout supprimer · mon espace.
   ══════════════════════════════════════════════════════════════════════ */
.map-controls { transition: left .28s cubic-bezier(.4,0,.2,1); }
.mc-row { display: flex; gap: 4px; align-items: flex-start; }
.mc-undo { position: relative; display: block; }
.mc-danger { margin-left: 4px; }
.mc-danger:not(:disabled):hover { background: #c0392b; border-color: #c0392b; color: #fff; }
@media (min-width: 1025px) {
    /* barre latérale ouverte : la barre et ses panneaux se décalent au lieu de passer dessous */
    body:has(.sidebar.open) .map-controls { left: 338px; }
    .map-style-panel, .units-panel { bottom: calc(var(--toolbar-h) + 60px); }
    body:has(.sidebar.open) .map-style-panel,
    body:has(.sidebar.open) .units-panel { left: 390px; }
}
/* fenêtres étroites : le profil laisse la place à la branche horizontale */
@media (min-width: 1025px) and (max-width: 1195px) {
    .elevation-profile-container { width: min(800px, calc(100vw - 420px)); }
}

/* ── v628 : préfixe « Leaflet » de l'attribution (map-styles.js) ───────── */
#map .leaflet-control-attribution .attr-prefix { flex-shrink: 0; display: inline-flex; align-items: center; white-space: nowrap; }
#map .leaflet-control-attribution .attr-sep { flex-shrink: 0; color: var(--ink-light); opacity: .6; }

/* GPX 647 — Photos GPS : conventions des fenêtres et boutons natifs */
/* Photos GPS : actions GPX explicites dans le style natif de l’éditeur */
.photo-gps-modal { max-width: 560px; }
.photo-gps-intro { margin: 0 0 12px; color: var(--ink-soft); font-size: var(--text-sm); line-height: 1.55; }
.photo-gps-conversion { border-top: 1px solid var(--sand); padding-top: 12px; margin-top: 12px; }
.photo-gps-conversion h3 { font-family: inherit; font-size: var(--text-sm); font-weight: 700; line-height: 1.4; margin-bottom: 10px; }
.photo-gps-choice { background: var(--paper); border: 1px solid var(--sand); border-radius: var(--radius); padding: 10px 12px; margin-bottom: 9px; }
.photo-gps-choice .btn { max-width: 100%; text-align: left; white-space: normal; }
.photo-gps-choice p, .photo-gps-clear-row p { font-size: var(--text-xs); line-height: 1.5; color: var(--ink-light); margin: 7px 0 0; }
.photo-gps-clear-row { display: flex; gap: 8px; align-items: flex-start; flex-wrap: wrap; margin-top: 14px; }
.photo-gps-clear-row p { flex: 1 1 190px; margin: 3px 0 0; }
.photo-gps-clear-row .btn { white-space: normal; }

#photo-gps-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
#photo-gps-actions .btn { white-space: normal; }
#photo-gps-info { font-size: var(--text-sm); font-weight: 600; color: var(--ink); margin: 0 0 8px; }
.photo-gps-help { font-size: var(--text-xs); color: var(--ink-light); line-height: 1.6; margin: 0 0 12px; }
#photo-gps-items { display: grid; gap: 8px; max-height: min(43vh, 340px); overflow-y: auto; }
.photo-gps-item { display: flex; width: 100%; gap: 12px; align-items: center; text-align: left;
    background: var(--paper); border: 1px solid var(--sand); color: var(--ink-soft);
    border-radius: var(--radius); padding: 7px; font: inherit; font-size: var(--text-sm);
    cursor: pointer; white-space: pre-line; overflow-wrap: anywhere; }
.photo-gps-item:hover:not(:disabled) { border-color: var(--trail); background: var(--parchment); }
.photo-gps-item:disabled { cursor: default; opacity: .65; }
.photo-gps-item img { flex-shrink: 0; width: 72px; height: 60px; border-radius: var(--radius-sm); object-fit: cover; }
.photo-gps-pin { display: flex; align-items: center; justify-content: center; background: var(--trail);
    color: white; border: 2px solid var(--paper); border-radius: 50%; width: 30px; height: 30px;
    box-shadow: 0 1px 6px #0005; font-size: 17px; }
.photo-gps-popup-image { max-width: 270px; max-height: 240px; object-fit: contain; display: block; margin-bottom: 6px; }
@media (max-width: 599px) {
    .photo-gps-modal { padding: 20px 16px 16px; }
    #photo-gps-actions { gap: 6px; }
    #photo-gps-actions .btn { flex: 1 1 44%; justify-content: center; padding: 9px 8px; }
    #photo-gps-items { max-height: 42dvh; }
}

/* v649 — champs du panneau Photos (listes et saisies), composants natifs */
.photo-gps-profile-label { display:block; margin-bottom:5px; font-size:var(--text-xs); font-weight:700; color:var(--ink); }
.photo-gps-profile { display:block; width:100%; min-height:38px; border:1px solid var(--sand); border-radius:var(--radius-sm); background:var(--paper); color:var(--ink); font:inherit; font-size:var(--text-sm); padding:7px 10px; margin:0 0 10px; }
.photo-gps-profile:focus-visible { outline:2px solid var(--trail); outline-offset:2px; }

/* v651 : atelier de géolocalisation EXIF, composants natifs de l'overlay */
.photo-geotag-panel > p { font-size:var(--text-xs); line-height:1.5; color:var(--ink-soft); margin:7px 0 10px; }
.photo-geotag-fields { display:grid; gap:5px; grid-template-columns:1fr; }
.photo-geotag-fields label { font-size:var(--text-xs); font-weight:700; color:var(--ink); }
.photo-geotag-fields input, .photo-geotag-fields select { max-width:100%; margin-bottom:7px; }
.photo-geotag-actions { display:flex; gap:8px; flex-wrap:wrap; margin:9px 0; }
.photo-geotag-actions button { flex:1 1 180px; white-space:normal; }
.photo-geotag-results { max-height:210px; overflow:auto; margin:8px 0; display:grid; gap:5px; }
.photo-geotag-result { border:1px solid var(--sand); border-radius:var(--radius-sm); padding:7px; font-size:var(--text-xs); overflow-wrap:anywhere; }
.photo-geotag-result[data-status="ok"] { border-left:3px solid var(--trail); }
#photo-geotag-status { font-size:var(--text-xs); margin:8px 0; color:var(--ink-soft); }

/* ── Nettoyer la trace (v661) ─────────────────────────────── */
.clean-panel { position: fixed; top: 80px; right: 16px; width: 340px; max-height: calc(100vh - 170px); overflow: auto; z-index: 740;
    background: var(--parchment); border: 1px solid var(--sand); border-radius: 14px; color: var(--ink); font-size: 14px;
    box-shadow: 0 8px 40px rgba(26,22,18,.18), 0 2px 8px rgba(26,22,18,.1); display: none; }
.clean-panel.show { display: block; }
.clean-panel.clean-mobile { top: auto; left: 0; right: 0; bottom: 64px; width: auto; max-height: 52vh; max-height: 52dvh; border-radius: 16px 16px 0 0; }
.clean-head { display: flex; align-items: center; justify-content: space-between; padding: 12px 16px 10px; border-bottom: 1px solid var(--sand); }
.clean-head h3 { margin: 0; font-size: 15px; }
.clean-x { background: none; border: 0; font-size: 22px; line-height: 1; color: var(--ink-light); cursor: pointer; padding: 0 4px; }
.clean-meta { padding: 10px 16px 4px; color: var(--ink-light); font-size: 13px; overflow-wrap: anywhere; }
.clean-rows { padding: 2px 10px; }
.clean-row { display: flex; align-items: center; gap: 8px; padding: 9px 6px; border-bottom: 1px solid rgba(26,22,18,.06); }
.clean-row input { width: 18px; height: 18px; accent-color: var(--trail); flex: none; margin: 0; }
.clean-ico { font-size: 18px; cursor: pointer; }
.clean-txt { flex: 1; cursor: pointer; min-width: 0; }
.clean-txt span { display: block; font-size: 12.5px; color: var(--ink-light); }
.clean-gain { font-weight: 600; white-space: nowrap; }
.clean-zoom { background: none; border: 0; font-size: 15px; cursor: pointer; padding: 4px; min-width: 30px; min-height: 30px; }
.clean-zoom-ph { min-width: 30px; }
.clean-off .clean-txt, .clean-off .clean-ico { opacity: .55; cursor: default; }
.clean-sum { margin: 8px 16px 0; padding: 10px 12px; background: var(--paper); border-radius: 10px; display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.clean-sum span:first-child { color: var(--ink-light); }
.clean-sum s { color: var(--ink-light); }
.clean-sum b { font-size: 16px; }
.clean-legend { display: flex; gap: 14px; flex-wrap: wrap; padding: 10px 16px 0; font-size: 12px; color: var(--ink-light); }
.clean-legend i { display: inline-block; vertical-align: middle; margin-right: 4px; }
.clean-legend .cl-before { width: 18px; border-top: 2px dashed #8a8070; }
.clean-legend .cl-after { width: 18px; border-top: 3px solid #2c6fb7; }
.clean-legend .cl-removed { width: 9px; height: 9px; border-radius: 50%; background: #fff; border: 2px solid #c0392b; }
.clean-ok { margin: 10px 16px 0; padding: 14px; background: var(--paper); border-radius: 10px; font-weight: 600; text-align: center; }
.clean-ok span { display: block; font-weight: 400; font-size: 13px; color: var(--ink-light); margin-top: 4px; }
.clean-actions { display: flex; gap: 10px; justify-content: flex-end; padding: 12px 16px 14px; }