/* ---- Self-hosted fonts (Space Grotesk + Inter) ---- */
@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("../fonts/space-grotesk-latin-Dr-cltI.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("../fonts/space-grotesk-latinext-NXGsJlG.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url("../fonts/inter-latin-Gz7AlRl.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url("../fonts/inter-latinext-1Br77OV.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ============ Planner — refonte "C · Navigation" ============ */
.planner-app{
    --ink:#181A1D; --ink-2:#33373D;
    --paper:#FBFBF9; --panel:#FFFFFF;
    --line:#E9E9E2; --line-strong:#D8D8CF;
    --muted:#71757C; --muted-2:#9A9DA3;
    --accent:#F0810C; --accent-press:#D96E00; --accent-tint:#FFF2E4;
    --ok:#1E9E6A; --err:#DC2626; --err-tint:#FDECEC;
    --shadow:0 8px 30px rgba(20,22,26,.14);
    --sans:'Inter',system-ui,-apple-system,sans-serif;
    --grotesk:'Space Grotesk',var(--sans);
    font-family:var(--sans); color:var(--ink);
}

/* Page plein écran, sans marge ni scroll (surcharge app.css pour cette page) */
body.planner-page{ margin:0; padding:0; background:#E7E7DE; overflow:hidden; }
.planner-app{ position:fixed; inset:0; }

/* ---------- Carte ---------- */
/* Scopé sous .planner-app pour battre `.maplibregl-map{position:relative}`
   (même spécificité, injecté après planner.css) qui sinon aplatit la carte. */
.planner-app .pl-map{ position:absolute; inset:0; }
.planner-app .maplibregl-ctrl-group{ border-radius:13px; box-shadow:var(--shadow); overflow:hidden; }
/* L'onglet du tiroir Propositions (pages partagées) occupe le coin haut-droit :
   descend les contrôles carte pour ne pas masquer le zoom. */
.planner-app:has(.drawer-tab) .maplibregl-ctrl-top-right{ top:66px; }
.planner-app .maplibregl-ctrl-group button{ width:40px; height:40px; }
/* Curseur flèche au repos (MapLibre impose une main « grab » par défaut) ;
   la main fermée ne reste que pendant un déplacement effectif de la carte. */
.planner-app .maplibregl-canvas-container.maplibregl-interactive{ cursor:default; }
.planner-app .maplibregl-canvas-container.maplibregl-interactive:active{ cursor:grabbing; }

/* Marqueurs de waypoints (rendus par le contrôleur : .wp-marker + numéro) */
.planner-app .wp-marker{
    width:26px; height:26px; border-radius:50% 50% 50% 3px;
    background:var(--accent); color:#fff; border:2px solid #fff;
    box-shadow:0 2px 6px rgba(20,22,26,.3);
    display:grid; place-items:center; font-family:var(--grotesk); font-weight:700; font-size:12px;
    cursor:pointer;
}

/* ---------- Couches POI (radars, stations, villages) ---------- */
/* Contrôle carte custom (assets/js/poi_layers.js) : bouton dans le groupe des
   contrôles top-right, panneau de cases flottant sous lui. */
.planner-app .pl-poi-ctrl{ position:relative; overflow:visible; }
.planner-app .pl-poi-ctrl.is-open .pl-poi-btn{ color:var(--accent); }
/* Trop dézoomé : les POI ne sont pas chargés, le bouton se met en retrait
   (mais reste cliquable — le panneau explique et garde les réglages). */
.planner-app .pl-poi-ctrl.is-lowzoom .pl-poi-btn{ color:var(--muted-2); opacity:.6; }
.planner-app .pl-poi-hint{ margin:0; color:var(--muted); font-size:12px; white-space:normal; width:172px; }
.planner-app .pl-poi-panel{
    position:absolute; top:0; right:46px; width:196px;
    background:var(--panel); border-radius:13px; box-shadow:var(--shadow);
    padding:10px 12px; display:flex; flex-direction:column; gap:7px;
    font-family:var(--sans); font-size:13px; color:var(--ink);
}
.planner-app .pl-poi-row{ display:flex; align-items:center; gap:8px; cursor:pointer; white-space:nowrap; }
.planner-app .pl-poi-row input{ accent-color:var(--accent); margin:0; }
.planner-app .pl-poi-row.is-disabled{ color:var(--muted-2); cursor:default; }
.planner-app .pl-poi-sep{ border:none; border-top:1px solid var(--line); margin:2px 0; }

/* Popup POI : reprend la charte (fond panel, coins arrondis) */
.planner-app .maplibregl-popup-content{ border-radius:13px; box-shadow:var(--shadow);
    font-family:var(--sans); font-size:13px; color:var(--ink); padding:12px 14px; }
.pl-poi-popup strong{ font-family:var(--grotesk); }
.pl-poi-popup a{ color:var(--accent); }
.pl-poi-prices{ border-collapse:collapse; margin:4px 0; }
.pl-poi-prices td{ padding:1px 0; }
.pl-poi-prices td + td{ padding-left:14px; font-variant-numeric:tabular-nums; text-align:right; }

/* ---------- Recherche flottante ---------- */
.pl-top{ position:absolute; top:16px; left:16px; right:16px; z-index:6; display:flex; }
.pl-search{ position:relative; width:100%; max-width:420px; }
.pl-search-ic{ position:absolute; left:15px; top:50%; transform:translateY(-50%); color:var(--muted); pointer-events:none; }
.pl-search input{
    width:100%; height:46px; border:none; border-radius:14px; background:var(--panel);
    box-shadow:var(--shadow); padding:0 16px 0 42px; font:inherit; font-size:14.5px; color:var(--ink);
}
.pl-search input::placeholder{ color:var(--muted); }
.pl-search input:focus{ outline:2px solid var(--accent); outline-offset:1px; }
.pl-search-results{
    list-style:none; margin:8px 0 0; padding:6px; position:absolute; left:0; right:0;
    background:var(--panel); border-radius:14px; box-shadow:var(--shadow); max-height:260px; overflow:auto;
}
.pl-search-results .search-result{ padding:11px 12px; border-radius:9px; cursor:pointer; font-size:14px; border-bottom:0; }
.pl-search-results .search-result:hover{ background:var(--accent-tint); color:var(--accent-press); }
.pl-search-results .no-result{ padding:11px 12px; color:var(--muted); font-size:14px; border-bottom:0; }

/* ---------- Toast erreur + flash ---------- */
.pl-toast{ position:absolute; left:50%; bottom:104px; transform:translateX(-50%); z-index:8;
    max-width:80%; margin:0; padding:10px 16px; border-radius:12px; font-size:13.5px; font-weight:500;
    box-shadow:var(--shadow); }
.pl-toast--error{ background:#fff; color:var(--err); border:1px solid #f3c8c8; }
.pl-flash{ position:absolute; left:50%; top:74px; transform:translateX(-50%); z-index:8;
    background:var(--ink); color:#fff; padding:9px 15px; border-radius:11px; font-size:13px; box-shadow:var(--shadow); }

/* ---------- Glisser-déposer de fichier (desktop) ---------- */
/* Overlay affiché au survol d'un fichier. pointer-events:none est essentiel :
   les écouteurs drag/drop sont sur window, l'overlay ne doit jamais intercepter
   le pointeur (sinon il déclencherait dragleave sur la carte en dessous). */
.pl-drop{ position:absolute; inset:0; z-index:9; pointer-events:none; padding:24px;
    display:flex; align-items:center; justify-content:center;
    background:rgba(20,22,26,.42); backdrop-filter:blur(2px); }
.pl-drop-box{ display:flex; flex-direction:column; align-items:center; gap:9px; text-align:center;
    background:var(--panel); color:var(--ink); border:2px dashed var(--accent); border-radius:18px;
    padding:34px 44px; max-width:min(90vw,420px); box-shadow:var(--shadow); }
.pl-drop-box svg{ color:var(--accent); }
.pl-drop-box strong{ font-family:var(--grotesk); font-size:18px; font-weight:600; }
.pl-drop-box span{ font-size:13.5px; color:var(--muted); line-height:1.45; }

/* ---------- Modale de confirmation d'import ---------- */
.pl-modal{ position:fixed; inset:0; z-index:20; padding:24px;
    display:flex; align-items:center; justify-content:center;
    background:rgba(20,22,26,.55); backdrop-filter:blur(2px); }
.pl-modal-box{ background:var(--panel); color:var(--ink); border-radius:18px;
    padding:24px 26px 20px; max-width:min(92vw,400px); box-shadow:var(--shadow); }
.pl-modal-title{ font-family:var(--grotesk); font-size:18px; font-weight:600; margin:0 0 12px; }
.pl-modal-file{ font-size:14.5px; font-weight:600; margin:0 0 4px; word-break:break-word; }
.pl-modal-hint{ font-size:13.5px; color:var(--muted); line-height:1.45; margin:0 0 20px; }
.pl-modal-actions{ display:flex; gap:10px; }
.pl-modal-actions .pl-btn{ flex:1; }

/* ---------- Menu contextuel carte (clic droit → Street View) ---------- */
.pl-ctxmenu{ position:absolute; z-index:5; background:var(--panel); border-radius:12px;
    box-shadow:var(--shadow); padding:5px; }
.pl-ctxmenu-item{ display:flex; align-items:center; gap:9px; width:100%; border:none; background:none;
    padding:9px 12px; border-radius:8px; font:inherit; font-size:13.5px; font-weight:500; color:var(--ink-2);
    cursor:pointer; white-space:nowrap; text-align:left; }
.pl-ctxmenu-item:hover{ background:var(--accent-tint); color:var(--accent-press); }
.pl-ctxmenu-item svg{ flex:0 0 auto; color:var(--muted); }
.pl-ctxmenu-item:hover svg{ color:inherit; }

/* ---------- Bandeau lecture seule ---------- */
.pl-readonly{ position:absolute; top:74px; left:16px; right:16px; z-index:6; text-align:center;
    background:var(--ink); color:#fff; padding:9px; border-radius:11px; font-size:13px; }
/* Pile de bandeaux (partage collaboratif : bandeau de rôle + bandeau d'exclusion) */
.pl-banners{ position:absolute; top:74px; left:16px; right:16px; z-index:6;
    display:flex; flex-direction:column; gap:8px; }
.pl-banners .pl-readonly{ position:static; }
.pl-banners .collab-kick-banner{ margin:0; padding:9px 15px; border-radius:11px; text-align:center; font-size:13px; }
.pl-banners .collab-kick-banner[hidden]{ display:none; }

/* Compteur de présence temps réel (« N en ligne »), visible de tous les rôles.
   .presence-pill impose display:inline-flex, ce qui écraserait le display:none
   implicite de [hidden] : il faut donc le rétablir explicitement. */
.collab-share-head{ display:flex; align-items:center; justify-content:space-between; gap:10px; }
.presence-pill{ display:inline-flex; align-items:center; gap:6px; font-size:12px; font-weight:600;
    color:var(--muted); white-space:nowrap; }
.presence-pill[hidden]{ display:none; }
.share-banner .presence-pill{ margin-left:.75rem; }
/* Le bandeau partagé est sur fond sombre (--ink) : on éclaircit le texte. */
.pl-readonly .presence-pill{ color:rgba(255,255,255,.82); }
.presence-dot{ width:8px; height:8px; border-radius:50%; background:var(--ok); flex:0 0 auto;
    box-shadow:0 0 0 0 rgba(30,158,106,.5); animation:presence-pulse 2.4s ease-out infinite; }
@keyframes presence-pulse{
    0%{ box-shadow:0 0 0 0 rgba(30,158,106,.5); }
    70%{ box-shadow:0 0 0 6px rgba(30,158,106,0); }
    100%{ box-shadow:0 0 0 0 rgba(30,158,106,0); } }
@media (prefers-reduced-motion: reduce){ .presence-dot{ animation:none; } }

/* =====================================================================
   NAV — commune. Desktop = rail vertical gauche. Mobile = barre d'onglets.
   ===================================================================== */
.pl-nav{ position:absolute; z-index:7; background:var(--panel); display:flex; }
.pl-brand{ color:var(--ink); display:grid; place-items:center; }
.pl-brand svg{ background:var(--ink); color:var(--accent); border-radius:10px; padding:6px; box-sizing:content-box; }
.pl-new{ border:none; background:none; cursor:pointer; display:flex; flex-direction:column; align-items:center; gap:5px; }
.pl-new-ic{ background:var(--accent); color:#fff; display:grid; place-items:center;
    box-shadow:0 8px 20px rgba(240,129,12,.4); }
.pl-new .pl-lb{ color:var(--accent); }
.pl-tab{ border:none; background:none; cursor:pointer; color:var(--muted); display:flex; align-items:center;
    font-family:var(--grotesk); font-weight:600; }
.pl-tab svg{ stroke-width:1.9; }
.pl-tab.is-active{ color:var(--accent); }
.pl-tab.is-active svg{ stroke-width:2.2; }
.pl-lb{ font-family:var(--grotesk); font-weight:600; }

/* =====================================================================
   PANEL — commune. Desktop = ancré. Mobile = bottom sheet.
   ===================================================================== */
.pl-panel{ position:absolute; z-index:6; background:var(--panel); display:flex; flex-direction:column;
    overflow:hidden; transition:transform .3s cubic-bezier(.22,.61,.36,1), width .3s cubic-bezier(.22,.61,.36,1); }
.pl-grip{ display:none; }
.pl-pane{ display:none; flex-direction:column; min-height:0; flex:1; }
.pl-pane.is-active{ display:flex; }
.pl-pane-head{ display:flex; align-items:center; justify-content:space-between; gap:10px; padding:18px 20px 12px; }
.pl-pane-title{ font-family:var(--grotesk); font-weight:700; font-size:19px; letter-spacing:-.01em; margin:0; }
.pl-pane-tools{ display:flex; gap:6px; }

/* Titre éditable = nom de l'itinéraire. Bouton mis en forme comme le titre. */
.pl-title-edit{ display:inline-flex; align-items:center; gap:7px; min-width:0; flex:0 1 auto;
    border:0; background:none; padding:2px 0; margin:0; cursor:text; color:var(--ink);
    font-family:var(--grotesk); font-weight:700; font-size:19px; letter-spacing:-.01em; text-align:left; }
.pl-title-edit .pl-title-text{ min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.pl-title-edit.is-unnamed .pl-title-text{ color:var(--muted); font-weight:600; }
.pl-title-pen{ flex:0 0 auto; color:var(--muted-2); opacity:0; transition:opacity .15s; }
.pl-title-edit:hover .pl-title-pen,
.pl-title-edit:focus-visible .pl-title-pen{ opacity:1; }
.pl-title-edit.is-editing{ flex:1 1 auto; }
.pl-title-edit.is-editing .pl-title-text,
.pl-title-edit.is-editing .pl-title-pen{ display:none; }
.pl-title-input{ width:100%; min-width:0; font:inherit; font-weight:700; font-size:19px; letter-spacing:-.01em;
    border:1px solid var(--accent); border-radius:8px; padding:2px 8px; background:var(--panel); color:var(--ink); }
.pl-title-input:focus{ outline:none; }
.pl-ghost{ width:36px; height:36px; border:1px solid var(--line); background:var(--panel); border-radius:10px;
    display:grid; place-items:center; color:var(--ink-2); cursor:pointer; }
.pl-ghost:hover:not(:disabled){ background:var(--paper); border-color:var(--line-strong); }
.pl-ghost:disabled{ opacity:.38; cursor:default; }
.pl-ghost[hidden]{ display:none; }
.pl-pane-body{ padding:0 20px 12px; overflow:auto; flex:1; min-height:0; }

/* Compteur (Distance / Durée) — signature "ordinateur de bord" */
.pl-stats{ display:flex; border:1px solid var(--line); border-radius:12px; overflow:hidden; margin:0 20px 14px; }
.pl-stats[hidden]{ display:none; }
.pl-stat{ flex:1; padding:11px 13px; }
.pl-stat + .pl-stat{ border-left:1px solid var(--line); }
.pl-k{ font-family:var(--grotesk); font-weight:600; font-size:10px; letter-spacing:.13em; text-transform:uppercase; color:var(--muted-2); }
.pl-v{ display:block; font-family:var(--grotesk); font-weight:700; font-size:21px; margin-top:4px; line-height:1; }
.pl-stat.is-accent .pl-v{ color:var(--accent); }

/* Carnet de route — rendu par le contrôleur dans .steps (classes .step*) */
.planner-app .steps{ list-style:none; margin:0; padding:0; position:relative; display:block; }
.planner-app .steps::before{ content:""; position:absolute; left:14px; top:16px; bottom:16px; width:2px;
    background:repeating-linear-gradient(var(--line-strong) 0 5px,transparent 5px 10px); }
.planner-app .steps .step{ display:flex; gap:12px; align-items:center; padding:8px 4px; position:relative; border-radius:10px; background:transparent; border:0; }
.planner-app .steps .step:hover{ background:var(--paper); }
.planner-app .steps .step.dragging{ opacity:.5; }
.planner-app .steps .step.drag-over{ background:var(--accent-tint); }
.planner-app .step-handle{ color:var(--muted-2); cursor:grab; font-size:12px; user-select:none; }
.planner-app .step-num{ width:29px; height:29px; flex:0 0 auto; border-radius:9px; display:grid; place-items:center;
    font-family:var(--grotesk); font-weight:700; font-size:13px; background:var(--panel);
    border:1.6px solid var(--ink); color:var(--ink); z-index:1; }
.planner-app .steps .step:first-child .step-num{ background:var(--ink); color:#fff; }
.planner-app .steps .step:last-child:not(:first-child) .step-num{ background:var(--accent); color:#fff; border-color:var(--accent); border-radius:50% 50% 50% 3px; }
.planner-app .step-main{ flex:1; min-width:0; display:flex; flex-direction:column; gap:0; }
.planner-app .step-label{ font-size:14.5px; font-weight:500; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; cursor:text; }
.planner-app .step-meta{ font-size:12px; color:var(--muted); margin-top:1px; line-height:1.2; }
.planner-app .step-del{ border:none; background:none; color:var(--muted-2); cursor:pointer; font-size:15px; padding:4px 6px; border-radius:8px; }
.planner-app .step-del:hover{ color:var(--err); background:#fdecec; }
.planner-app .step-rename{ width:100%; font:inherit; font-size:14.5px; border:1px solid var(--accent); border-radius:8px; padding:4px 8px; }
.planner-app .step--raw{ display:block; padding:12px 8px; font-size:13.5px; color:var(--ink-2); font-style:normal; text-align:left; }
.planner-app .step--readonly .step-num{ background:var(--ink); color:#fff; }

.pl-empty{ color:var(--muted); font-size:13.5px; padding:14px 4px; margin:0; }
.pl-empty[hidden]{ display:none; }

/* Champs (import dans Nouveau, export dans Itinéraire) */
.pl-field{ margin:14px 0; }
.pl-field .pl-k{ display:block; margin-bottom:8px; }
.pl-row2{ display:flex; gap:9px; }
.pl-row2 select, .pl-row2 input{ flex:1; min-width:0; height:46px; border:1px solid var(--line-strong); border-radius:12px;
    background:var(--paper); padding:0 12px; font:inherit; font-size:14px; }
.pl-hint{ font-size:12px; color:var(--muted); margin:8px 0 0; }
.pl-hint a{ color:var(--accent-press); }

/* Boutons */
.pl-btn{ height:46px; padding:0 16px; border:1px solid var(--line-strong); background:var(--panel);
    border-radius:12px; font-family:var(--grotesk); font-weight:600; font-size:14px; color:var(--ink-2);
    cursor:pointer; display:inline-flex; align-items:center; justify-content:center; gap:8px; text-decoration:none; }
.pl-btn:hover{ background:var(--paper); }
.pl-btn--primary{ border:none; background:var(--accent); color:#fff; box-shadow:0 8px 18px rgba(240,129,12,.3); }
.pl-btn--primary:hover{ background:var(--accent-press); }
.pl-btn:disabled{ opacity:.5; cursor:default; box-shadow:none; }

/* Pied du pane Itinéraire */
.pl-pane-foot{ padding:12px 20px; border-top:1px solid var(--line); display:flex; gap:9px; }
.pl-pane-foot .pl-btn{ flex:1; }
/* Variante empilée : statut d'autosauvegarde, panneau Partage (auteur),
   soumission de proposition (contributeur) */
.pl-pane-foot--col{ flex-direction:column; gap:6px; }
.pl-pane-foot--col .pl-hint{ margin:0; }
.pl-pane-foot--col .share-input{ flex:1; min-width:0; height:40px; border:1px solid var(--line-strong);
    border-radius:10px; padding:0 10px; font-size:12.5px; }
.pl-pane-foot--col .link-row,
.pl-pane-foot--col .submit-actions{ display:flex; gap:8px; }
.pl-pane-foot--col .collab-toggle{ display:flex; align-items:center; gap:8px; font-size:13.5px; }

/* =====================================================================
   PANE COMPTE (Lot 3) — vues empilées : connexion / lien envoyé /
   compte / mes itinéraires (AJAX)
   ===================================================================== */
/* Vues empilées : une seule visible à la fois (chacune porte tête + corps) */
.pl-view{ display:none; flex-direction:column; min-height:0; flex:1; }
.pl-view.is-active{ display:flex; }
.pl-pane-title[tabindex]{ outline:none; } /* focus programmatique sans anneau */

/* Tête avec bouton retour (vue Mes itinéraires) */
.pl-pane-head--lead{ justify-content:flex-start; }
.pl-pane-meta{ margin-left:auto; font-family:var(--sans); font-weight:400; font-size:12.5px; color:var(--muted); white-space:nowrap; }
.pl-back{ width:34px; height:34px; flex:0 0 auto; border:1px solid var(--line); background:var(--panel); border-radius:10px; display:grid; place-items:center; color:var(--ink-2); cursor:pointer; }
.pl-back:hover{ background:var(--paper); border-color:var(--line-strong); }

/* Flash serveur (lien magique expiré, repli sans JS) */
.pl-alert{ margin:14px 20px 0; padding:10px 13px; border-radius:12px; font-size:13px; line-height:1.45; }
.pl-alert--error{ background:var(--err-tint); color:var(--err); border:1px solid #f3c8c8; }
.pl-alert--ok{ background:#E7F5EE; color:#137a51; border:1px solid #bfe3d3; }

/* Mini-héros (connexion / lien envoyé) */
.pl-mh{ display:flex; flex-direction:column; align-items:flex-start; gap:12px; margin:6px 0 4px; }
.pl-mh-ic{ width:52px; height:52px; border-radius:16px; background:var(--accent-tint); color:var(--accent); display:grid; place-items:center; }
.pl-mh h3{ font-family:var(--grotesk); font-weight:700; font-size:19px; letter-spacing:-.01em; margin:0; }
.pl-mh p{ font-size:13.5px; color:var(--muted); line-height:1.5; margin:0; max-width:34ch; }
.pl-mh p b{ color:var(--ink); font-weight:600; word-break:break-all; }
/* pastille verte « envoyé » sur l'icône */
.pl-mh--sent .pl-mh-ic{ position:relative; }
.pl-mh--sent .pl-mh-ic::after{ content:""; position:absolute; right:-3px; top:-3px; width:14px; height:14px; border-radius:50%; background:var(--ok); border:2.5px solid var(--panel); }

/* Champ e-mail + erreur inline */
.pl-loginform{ margin-top:16px; }
.pl-loginform .pl-k{ display:block; margin-bottom:8px; }
.pl-input{ width:100%; height:48px; border:1px solid var(--line-strong); border-radius:13px; background:var(--paper); padding:0 14px; font:inherit; font-size:15px; color:var(--ink); }
.pl-input::placeholder{ color:var(--muted-2); }
.pl-input:focus{ outline:2px solid var(--accent); outline-offset:1px; border-color:transparent; }
.pl-ferr{ display:none; font-size:12.5px; color:var(--err); margin:7px 2px 0; }
.pl-field.is-error .pl-input{ border-color:var(--err); }
.pl-field.is-error .pl-ferr{ display:block; }

/* Boutons pleine largeur du pane + liens-boutons des hints */
.pl-btn--block{ width:100%; margin-top:14px; }
.pl-btn--primary.pl-btn--block{ height:50px; }
.pl-hint--center{ text-align:center; }
.pl-linkbtn{ background:none; border:none; padding:0; font:inherit; color:var(--accent-press); cursor:pointer; text-decoration:underline; text-underline-offset:2px; }

/* Compte connecté */
.pl-acct{ display:flex; align-items:center; gap:12px; margin:6px 0 14px; }
.pl-acct-who{ font-family:var(--grotesk); font-weight:600; font-size:15px; min-width:0; }
.pl-acct-who small{ display:block; font-family:var(--sans); font-weight:400; font-size:12.5px; color:var(--muted); overflow:hidden; text-overflow:ellipsis; }
.pl-listrow{ display:block; padding:14px 12px; border-top:1px solid var(--line); color:var(--ink); text-decoration:none; font-size:14.5px; font-weight:500; }
.pl-listrow:hover{ background:var(--paper); }
/* Groupe encadré de lignes (icône + libellé + badge) */
.pl-rows{ border:1px solid var(--line); border-radius:14px; overflow:hidden; margin-top:10px; }
.pl-rows .pl-listrow{ display:flex; align-items:center; gap:12px; width:100%; padding:14px 15px; background:var(--panel); border:0; border-top:1px solid var(--line); font-family:var(--sans); text-align:left; cursor:pointer; }
.pl-rows .pl-listrow:first-child{ border-top:0; }
.pl-listrow--quiet{ color:var(--muted); }
.pl-ic{ color:var(--ink-2); flex:0 0 auto; display:grid; place-items:center; }
.pl-listrow--quiet .pl-ic{ color:var(--muted-2); }
.pl-badge{ margin-left:auto; font-family:var(--grotesk); font-weight:600; font-size:12px; background:var(--paper); border:1px solid var(--line); border-radius:20px; padding:2px 9px; color:var(--muted); position:relative; }
.pl-badge.has-pending::after{ content:""; position:absolute; right:-3px; top:-3px; width:9px; height:9px; border-radius:50%; background:var(--accent); border:2px solid var(--panel); }

/* Point ambre « propositions en attente » sur l'onglet Compte
   (barre d'onglets mobile et rail desktop : même élément) */
.pl-tabic{ position:relative; display:grid; place-items:center; }
.pl-tab.has-pending .pl-tabic::after{ content:""; position:absolute; right:-3px; top:-3px; width:9px; height:9px; border-radius:50%; background:var(--accent); border:2px solid var(--panel); }

/* Liste des itinéraires */
.pl-rtlist{ list-style:none; margin:10px 0 0; padding:0; display:flex; flex-direction:column; gap:9px; }
.pl-rt{ border:1px solid var(--line); border-radius:15px; padding:12px 13px; display:flex; align-items:center; gap:11px; cursor:pointer; background:var(--panel); }
.pl-rt:hover{ background:var(--paper); border-color:var(--line-strong); }
.pl-rt-main{ flex:1; min-width:0; }
.pl-rt-name{ font-family:var(--grotesk); font-weight:600; font-size:14.5px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.pl-rt-sub{ font-size:12px; color:var(--muted); margin-top:2px; display:flex; align-items:center; gap:7px; flex-wrap:wrap; }
.pl-rt-pending{ font-family:var(--grotesk); font-weight:600; font-size:11px; color:var(--accent-press); background:var(--accent-tint); border-radius:20px; padding:2px 8px; }
.pl-rt-actions{ display:flex; gap:6px; flex:0 0 auto; }
.pl-ig{ width:36px; height:36px; border:1px solid var(--line); background:var(--panel); border-radius:11px; display:grid; place-items:center; color:var(--ink-2); cursor:pointer; }
.pl-ig:hover{ background:var(--paper); border-color:var(--line-strong); }
.pl-ig.is-ok{ color:var(--ok); border-color:#bfe3d3; }

/* Confirmation inline de suppression */
.pl-rt.is-confirm{ background:var(--err-tint); border-color:#f3c8c8; cursor:default; }
.pl-rt.is-confirm .pl-rt-name{ color:var(--err); }
.pl-cbtn{ height:36px; padding:0 13px; border-radius:11px; font-family:var(--grotesk); font-weight:600; font-size:13px; cursor:pointer; }
.pl-cbtn--del{ border:none; background:var(--err); color:#fff; }
.pl-cbtn--keep{ border:1px solid var(--line-strong); background:var(--panel); color:var(--ink-2); }

/* Squelette de chargement (shimmer) */
.pl-sk{ border:1px solid var(--line); border-radius:15px; padding:12px 13px; display:flex; align-items:center; gap:11px; margin-top:9px; }
.pl-sk:first-child{ margin-top:10px; }
.pl-sk-main{ flex:1; }
.pl-sk-b{ border-radius:7px; background:linear-gradient(90deg,var(--paper) 25%,#f1f1ea 45%,var(--paper) 65%); background-size:200% 100%; animation:pl-shimmer 1.2s infinite; }
.pl-sk-b1{ width:58%; height:14px; }
.pl-sk-b2{ width:34%; height:10px; margin-top:7px; }
.pl-sk-brt{ width:36px; height:36px; border-radius:11px; flex:0 0 auto; }
@keyframes pl-shimmer{ to{ background-position:-200% 0; } }
@media (prefers-reduced-motion:reduce){ .pl-sk-b{ animation:none; } }

/* État vide */
.pl-emptybox{ margin-top:10px; border:1.5px dashed var(--line-strong); border-radius:15px; padding:26px 18px; text-align:center; }
.pl-emptybox .pl-mh-ic{ margin:0 auto 12px; }
.pl-emptybox h4{ font-family:var(--grotesk); font-weight:600; font-size:15px; margin:0 0 4px; }
.pl-emptybox p{ font-size:12.5px; color:var(--muted); margin:0 0 14px; line-height:1.5; }
.pl-emptybox .pl-btn{ height:44px; padding:0 18px; }

/* Feedback transitoire (aria-live) : copie, renvoi, suppression */
.pl-live{ margin:0 20px 10px; font-size:12.5px; font-weight:600; color:var(--ok); text-align:center; }
.pl-live:empty{ display:none; }

/* Nouveau */
.pl-newopt{ display:flex; align-items:center; gap:14px; width:100%; text-align:left; padding:14px; margin-bottom:10px;
    border:1px solid var(--line); border-radius:14px; background:var(--panel); cursor:pointer; }
.pl-newopt:hover{ border-color:var(--line-strong); }
.pl-newopt-ic{ width:40px; height:40px; flex:0 0 auto; border-radius:12px; display:grid; place-items:center; background:var(--paper); color:var(--ink-2); }
.pl-newopt.is-accent .pl-newopt-ic{ background:var(--accent); color:#fff; }
.pl-newopt strong{ display:block; font-family:var(--grotesk); font-weight:600; font-size:15px; }
.pl-newopt small{ display:block; font-size:12px; color:var(--muted); margin-top:2px; }

/* =====================================================================
   DESKTOP (>= 860px) : rail gauche + panneau ancré + carte à droite
   ===================================================================== */
@media (min-width:860px){
    .pl-nav{ left:0; top:0; bottom:0; width:88px; flex-direction:column; align-items:center; padding:16px 0 14px; border-right:1px solid var(--line); gap:6px; }
    .pl-brand{ width:40px; height:40px; margin-bottom:8px; }
    .pl-new{ margin-bottom:10px; }
    .pl-new-ic{ width:52px; height:52px; border-radius:17px; }
    .pl-new-ic svg{ width:26px; height:26px; }
    .pl-tab{ width:64px; flex-direction:column; gap:5px; padding:9px 0; border-radius:14px; font-size:10.5px; }
    .pl-tab.is-active{ background:var(--accent-tint); }
    .pl-tab:hover:not(.is-active){ background:var(--paper); }

    .pl-panel{ left:88px; top:0; bottom:0; width:356px; border-right:1px solid var(--line); box-shadow:6px 0 30px rgba(20,22,26,.06); }
    .pl-panel.is-collapsed{ transform:translateX(-100%); }

    .planner-app .pl-map{ left:444px; transition:left .3s cubic-bezier(.22,.61,.36,1); }
    .planner-app.is-collapsed .pl-map{ left:88px; }

    .pl-top{ left:460px; }
    .planner-app.is-collapsed .pl-top{ left:104px; }
    .pl-readonly{ left:460px; }

    /* Mes itinéraires : actions révélées au survol / focus (toujours
       visibles en mobile, où il n'y a pas de survol). */
    .pl-rt-actions{ opacity:0; transition:opacity .12s; }
    .pl-rt:hover .pl-rt-actions,
    .pl-rt:focus-within .pl-rt-actions,
    .pl-rt.is-confirm .pl-rt-actions{ opacity:1; }
}

/* =====================================================================
   MOBILE (< 860px) : carte plein écran + barre d'onglets bas + bottom sheet
   ===================================================================== */
@media (max-width:859px){
    .pl-brand{ display:none; }
    .pl-nav{ left:0; right:0; bottom:0; height:84px; align-items:flex-start; justify-content:space-around;
        padding:10px 6px 0; border-top:1px solid var(--line); }
    .pl-tab{ flex:1; flex-direction:column; gap:4px; font-size:11px; padding:2px 0; justify-content:flex-start; }
    .pl-new{ order:3; position:relative; top:-16px; }
    .pl-new-ic{ width:58px; height:58px; border-radius:20px; border:4px solid var(--panel); }
    .pl-new-ic svg{ width:26px; height:26px; }
    /* Ordre visuel : Carte · Itinéraire · [+ Nouveau] · Compte */
    .pl-tab[data-shell-tab="carte"]{ order:1; }
    .pl-tab[data-shell-tab="itineraire"]{ order:2; }
    .pl-tab[data-shell-tab="compte"]{ order:4; }

    .pl-panel{ left:0; right:0; bottom:84px; max-height:64%; border-radius:22px 22px 0 0;
        box-shadow:0 -12px 40px rgba(20,22,26,.16);
        /* height : l'aimantation du sheet après drag anime entre hauteurs explicites */
        transition:transform .3s cubic-bezier(.22,.61,.36,1), height .28s cubic-bezier(.22,.61,.36,1); }
    .pl-panel.is-full{ max-height:88%; }
    .pl-panel.is-collapsed{ transform:translateY(112%); }
    /* Poignée : zone de saisie pleine largeur (drag au doigt), barrette en ::before.
       touch-action:none est indispensable, sinon le navigateur confisque le geste. */
    .pl-grip{ display:block; padding:10px 0 6px; cursor:grab; touch-action:none;
        -webkit-user-select:none; user-select:none; }
    .pl-grip::before{ content:""; display:block; width:38px; height:5px; border-radius:3px;
        background:var(--line-strong); margin:0 auto; }
    .pl-panel.is-dragging{ transition:none; }

    .planner-app .pl-map{ inset:0; }
    .pl-top{ left:14px; right:14px; }
    .pl-search{ max-width:none; }

    /* La recherche occupe toute la largeur : les contrôles carte (+/−, géoloc)
       descendent sous elle (et sous les bandeaux des pages partagées). */
    .planner-app .maplibregl-ctrl-top-right{ top:70px; }
    .planner-app:has(.pl-readonly) .maplibregl-ctrl-top-right{ top:124px; }
}