:root {
    --bg: #0f172a;
    --bg-soft: #1e293b;
    --card: #ffffff;
    --ink: #0f172a;
    --muted: #64748b;
    --brand: #2563eb;
    --brand-dark: #1d4ed8;
    --accent: #0ea5e9;
    --ok: #16a34a;
    --err: #dc2626;
    --radius: 14px;
    --shadow: 0 10px 30px rgba(2, 6, 23, .12);
}

* { box-sizing: border-box; }

/* Toute règle display: du site écrase le [hidden] du navigateur (origine
   auteur > user-agent) : sans ceci, hidden est inopérant sur ces éléments. */
[hidden] { display: none !important; }

body {
    margin: 0;
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    color: var(--ink);
    min-height: 100vh;
}

.error { color: var(--err); }

/* ---------------------------------------------------------------------------
   Résultats de recherche (générés par planner_controller ; skinnés par
   planner.css sous .pl-search-results)
   ------------------------------------------------------------------------- */

.search-result, .no-result {
    padding: .55rem .75rem;
    font-size: .88rem;
    border-bottom: 1px solid #f1f5f9;
}
.search-result { cursor: pointer; }
.search-result:hover { background: #eff6ff; color: var(--brand-dark); }
.no-result { color: var(--muted); }

/* ---------------------------------------------------------------------------
   Carnet de route (lignes .step générées par planner_controller ; skinnées
   par planner.css sous .planner-app .steps)
   ------------------------------------------------------------------------- */

.steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .4rem; }

.step {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .5rem .6rem;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    font-size: .85rem;
    cursor: grab;
}
.step.dragging { opacity: .4; }
.step.drag-over { border-color: var(--brand); background: #eff6ff; }

.step-handle { color: var(--muted); cursor: grab; user-select: none; }
.step-num {
    flex: 0 0 auto;
    width: 22px; height: 22px;
    display: grid; place-items: center;
    background: var(--brand); color: #fff;
    border-radius: 50%;
    font-size: .75rem; font-weight: 700;
}
.step-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: .1rem; }
.step-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.step:not(.step--readonly) .step-label { cursor: text; }
.step-meta { font-size: .72rem; color: var(--muted); line-height: 1.15; }
.step-rename {
    width: 100%;
    box-sizing: border-box;
    font-size: .85rem;
    padding: .15rem .35rem;
    border: 1px solid var(--brand);
    border-radius: 6px;
}
.step-del {
    flex: 0 0 auto;
    border: none; background: transparent;
    color: var(--muted); cursor: pointer; font-size: .9rem;
    padding: .15rem .3rem; border-radius: 6px;
}
.step-del:hover { color: var(--err); background: #fef2f2; }

.step--raw { cursor: default; color: var(--muted); font-style: italic; justify-content: center; text-align: center; }
.step--readonly { cursor: default; }

/* Marqueurs de waypoints numérotés (générés par planner_controller ; skinnés
   par planner.css sous .planner-app .wp-marker) */
.wp-marker {
    width: 26px; height: 26px;
    display: grid; place-items: center;
    background: var(--brand);
    color: #fff;
    font-size: .8rem; font-weight: 700;
    border: 2px solid #fff;
    border-radius: 50%;
    box-shadow: 0 2px 6px rgba(2, 6, 23, .35);
    cursor: grab;
}

/* keep MapLibre attribution readable */
.maplibregl-ctrl-attrib { font-size: .7rem; }

/* ---------------------------------------------------------------------------
   Phase 3 (wave A3) — saved routes & public sharing
   ------------------------------------------------------------------------- */

.share-input {
    flex: 1 1 auto;
    padding: .55rem .65rem;
    border: 1px solid #cbd5e1;
    border-radius: 10px;
    font-size: .82rem;
    background: #f8fafc;
}

.btn-danger { color: var(--err); border-color: #fecaca; }
.btn-danger:hover { background: #fef2f2; }

/* ============================================================
   Lot 2 — Collaborative proposals drawer + cards
   ============================================================ */
.collab-drawer-toggle { position: absolute; opacity: 0; pointer-events: none; }
.drawer-tab {
    position: absolute; top: 18px; right: 0; z-index: 7; display: flex; align-items: center; gap: .5rem;
    height: 44px; padding: 0 14px; background: #fff; box-shadow: 0 8px 30px rgba(20,22,26,.14);
    border-radius: 12px 0 0 12px; cursor: pointer; font-weight: 600; font-size: .9rem; color: var(--ink);
    transition: transform .3s cubic-bezier(.22,.61,.36,1);
}
.drawer-tab .cnt { min-width: 22px; height: 22px; padding: 0 6px; border-radius: 11px; background: #F0810C; color: #fff; font-size: .78rem; display: grid; place-items: center; }
.drawer-tab .chev { color: var(--muted); transition: transform .3s; }
.collab-drawer-toggle:checked ~ .drawer-tab { transform: translateX(-360px); }
.collab-drawer-toggle:checked ~ .drawer-tab .chev { transform: rotate(180deg); }
.collab-drawer {
    position: absolute; top: 0; right: 0; bottom: 0; width: 360px; z-index: 6; background: #fff;
    border-left: 1px solid var(--line, #E9E9E2); box-shadow: -18px 0 50px rgba(20,22,26,.14);
    transform: translateX(100%); transition: transform .3s cubic-bezier(.22,.61,.36,1); display: flex; flex-direction: column;
}
.collab-drawer-toggle:checked ~ .collab-drawer { transform: none; }
.drawer-head { padding: 16px 18px 12px; border-bottom: 1px solid #E9E9E2; display: flex; align-items: center; justify-content: space-between; }
.drawer-head h3 { font-size: 1rem; margin: 0; display: flex; align-items: center; gap: .5rem; }
.drawer-head .cnt { min-width: 22px; height: 22px; padding: 0 6px; border-radius: 11px; background: #FFF2E4; color: #F0810C; font-size: .78rem; display: grid; place-items: center; }
.drawer-close { width: 30px; height: 30px; border: 1px solid #E9E9E2; border-radius: 9px; display: grid; place-items: center; cursor: pointer; color: #33373D; }
.drawer-live { display: flex; align-items: center; gap: .5rem; padding: 10px 18px; background: #E7F5EE; color: #137a51; font-size: .78rem; font-weight: 600; border-bottom: 1px solid #E9E9E2; }
.dot-live { width: 8px; height: 8px; border-radius: 50%; background: #1E9E6A; box-shadow: 0 0 0 4px rgba(30,158,106,.18); }
.drawer-body { padding: 14px 16px 18px; overflow: auto; flex: 1; display: flex; flex-direction: column; gap: 11px; }
.drawer-empty { color: var(--muted); font-size: .85rem; text-align: center; margin: 1rem 0; }

.prop { border: 1px solid #E9E9E2; border-radius: 14px; padding: 13px 14px 12px; background: #fff; transition: border-color .14s, box-shadow .14s; }
.prop:hover { border-color: #F0810C; box-shadow: 0 6px 20px rgba(240,129,12,.12); }
.prop.is-stale { background: #FBFBF9; }
.prop.is-mine { border-color: #F0810C; background: #FFF2E4; }
.prop-head { display: flex; align-items: center; gap: 10px; }
.av { width: 32px; height: 32px; flex: 0 0 auto; border-radius: 10px; background: #33373D; color: #fff; display: grid; place-items: center; font-weight: 600; font-size: .78rem; user-select: none; }
.av.mine { background: #F0810C; }
.prop-who { flex: 1; min-width: 0; }
.prop-who .nm { font-size: .85rem; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.prop-who .tm { font-size: .7rem; color: var(--muted); margin-top: 1px; }
.badge { font-weight: 600; font-size: .66rem; border-radius: 20px; padding: 3px 9px; line-height: 1; white-space: nowrap; }
.badge--new { color: #1E9E6A; background: #E7F5EE; }
.badge--stale { color: #B26A00; background: #FBEFD9; }
.badge--mine { color: #fff; background: #F0810C; }
.prop-stats { display: flex; gap: 12px; margin-top: 7px; font-size: .72rem; color: var(--muted); }
.stale-line { display: flex; align-items: center; gap: 7px; margin-top: 9px; font-size: .72rem; color: #B26A00; background: #FBEFD9; border-radius: 8px; padding: 6px 9px; }
.prop-actions { display: flex; align-items: center; gap: 8px; margin-top: 12px; }
.prop-actions .waiting { flex: 1; font-size: .72rem; color: var(--muted); }
.btn-accept { flex: 0 0 auto; height: 36px; padding: 0 14px; border: none; border-radius: 10px; background: #F0810C; color: #fff; font-weight: 600; font-size: .82rem; cursor: pointer; }
.btn-accept:hover { background: #D96E00; }
.btn-reject, .btn-preview-lg { height: 36px; padding: 0 14px; border: 1px solid #D8D8CF; background: #fff; border-radius: 10px; font-weight: 600; font-size: .8rem; color: var(--muted); cursor: pointer; }
.btn-reject:hover { color: #C64545; border-color: #f0c9c9; background: #FBECEC; }
.btn-preview-lg:hover { border-color: #F0810C; color: #F0810C; }

@media (max-width: 720px) {
    .collab-drawer { width: 88%; }
    .collab-drawer-toggle:checked ~ .drawer-tab { transform: translateX(-88vw); }
}

/* ---------------------------------------------------------------------------
   Lot 2 — role activation switch + contributor submit form (Task 10)
--------------------------------------------------------------------------- */
.collab-activation .collab-toggle { display: flex; align-items: center; gap: .5rem; font-size: .85rem; }
.collab-reveal { display: flex; flex-direction: column; gap: .5rem; margin-top: .5rem; }
.collab-submit-form { display: flex; flex-direction: column; gap: .5rem; margin-top: .5rem; }
.collab-submit-form .submit-actions { display: flex; gap: .5rem; }

/* Unified share: visitor mode switch, soft-kick banner, hard-revoke overlay */
.mode-switch { margin-left: .75rem; display: inline-flex; gap: .25rem; }
.mode-switch .mode-opt {
    padding: .15rem .6rem; border-radius: 999px; text-decoration: none;
    color: inherit; border: 1px solid rgba(120, 120, 128, .35); font-size: .85em;
}
.mode-switch .mode-opt.is-active { background: #F0810C; border-color: #F0810C; color: #fff; }
.collab-kick-banner {
    margin: .5rem 0; padding: .5rem .75rem; border-radius: 6px;
    background: rgba(240, 129, 12, .12); border: 1px solid rgba(240, 129, 12, .5);
}
.collab-revoked-overlay {
    position: fixed; inset: 0; z-index: 1000; display: flex;
    align-items: center; justify-content: center;
    background: rgba(20, 22, 26, .82); backdrop-filter: blur(2px);
}
.collab-revoked-overlay .revoked-box {
    background: #fff; color: #14161a; padding: 1.5rem 2rem; border-radius: 10px;
    max-width: 26rem; text-align: center;
}