:root{
  --canvas:#F4F5F7; --surface:#FFFFFF; --ink:#0B0F19; --ink2:#374151; --muted:#6B7280; --faint:#9AA1AC;
  --line:#E7E9EE; --line2:#EEF0F4; --accent:#4F46E5; --accent-soft:#EEF0FF; --danger:#E11D48;
  --na:#38BDF8; --eu:#F43F5E; --af:#14B8A6; --as:#8B5CF6; --oc:#F59E0B;
  --sh-sm:0 1px 2px rgba(16,24,40,.06),0 1px 3px rgba(16,24,40,.10);
  --sh-md:0 8px 24px -8px rgba(16,24,40,.18);
  --sh-lg:0 24px 56px -20px rgba(16,24,40,.30);
  --font:"Plus Jakarta Sans",system-ui,-apple-system,Segoe UI,sans-serif; --r:16px;
}
*{box-sizing:border-box}
html,body{margin:0;height:100%}
body{font-family:var(--font);background:var(--canvas);color:var(--ink);-webkit-font-smoothing:antialiased;overflow:hidden}
#map{position:absolute;inset:0;background:var(--canvas);z-index:1}
body.night #map{background:#1c2536}
.leaflet-container{font-family:var(--font)}
.leaflet-control-zoom{border:none!important;box-shadow:var(--sh-md)!important;border-radius:12px!important;overflow:hidden}
.leaflet-control-zoom a{width:38px;height:38px;line-height:38px;color:var(--ink);background:var(--surface);border:none!important;font-size:18px}
.leaflet-control-zoom a:hover{background:var(--line2)}
.leaflet-control-attribution{background:rgba(255,255,255,.78)!important;backdrop-filter:blur(4px);font-size:10px;color:var(--faint);border-radius:8px 0 0 0}
.leaflet-control-attribution a{color:var(--muted)}

/* markers */
.pin{position:relative;width:22px;height:22px;transform:translate(-50%,-50%);cursor:pointer}
.pin i{position:absolute;inset:0;border-radius:50%;border:2.5px solid #fff;box-shadow:0 2px 5px rgba(16,24,40,.30);transition:transform .16s cubic-bezier(.4,0,.2,1)}
.pin.film i::after{content:"";position:absolute;top:50%;left:50%;width:6px;height:6px;border-radius:50%;background:#fff;transform:translate(-50%,-50%);box-shadow:0 0 0 1.5px rgba(0,0,0,.12) inset}
.pin:hover i{transform:scale(1.22)}
.pin.sel i{transform:scale(1.25);box-shadow:0 0 0 4px var(--accent-soft),0 2px 6px rgba(16,24,40,.35)}
.pin .lbl{position:absolute;left:50%;top:calc(100% + 6px);transform:translateX(-50%);white-space:nowrap;font-size:11px;font-weight:600;color:var(--ink);background:rgba(255,255,255,.9);padding:2px 7px;border-radius:6px;box-shadow:var(--sh-sm);opacity:0;transition:opacity .15s;pointer-events:none}
.pin:hover .lbl{opacity:1}
.cluster{width:40px;height:40px;transform:translate(-50%,-50%);background:var(--ink);color:#fff;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:14px;border:3px solid #fff;box-shadow:0 3px 10px rgba(16,24,40,.35)}
.marker-cluster{background:transparent!important}
.marker-cluster div{background:transparent!important;margin:0!important;width:auto!important;height:auto!important}

/* topbar */
.topbar{position:absolute;top:0;left:0;right:0;z-index:1000;display:flex;align-items:center;gap:14px;padding:16px 18px;pointer-events:none}
.topbar>*{pointer-events:auto}
.brand{display:flex;align-items:center;gap:11px;background:var(--surface);padding:9px 15px 9px 11px;border-radius:100px;box-shadow:var(--sh-md);border:1px solid var(--line)}
.brand .mk{width:30px;height:30px;border-radius:9px;background:linear-gradient(135deg,#4F46E5,#7C5CFF);display:flex;align-items:center;justify-content:center;color:#fff;font-size:15px}
.brand .bt{display:flex;flex-direction:column;line-height:1.05}
.brand .bt b{font-size:.86rem;font-weight:800;letter-spacing:-.01em}
.brand .bt span{font-size:.68rem;color:var(--muted);font-weight:600}
.search{flex:1;max-width:340px;display:flex;align-items:center;gap:9px;background:var(--surface);border:1px solid var(--line);border-radius:100px;padding:0 15px;height:46px;box-shadow:var(--sh-md)}
.search svg{flex:none;color:var(--faint)}
.search input{border:none;outline:none;background:none;font-family:var(--font);font-size:.9rem;color:var(--ink);width:100%}
.search input::placeholder{color:var(--faint)}
.spacer{flex:1}
.add-btn{display:inline-flex;align-items:center;gap:9px;background:var(--ink);color:#fff;border:none;height:46px;padding:0 18px 0 16px;border-radius:100px;font-family:var(--font);font-weight:700;font-size:.86rem;cursor:pointer;box-shadow:var(--sh-md);transition:transform .12s,background .2s}
.add-btn:hover{background:#000;transform:translateY(-1px)}
.add-btn .p{font-size:1.2rem;line-height:0;font-weight:600}
.icon-btn{width:46px;height:46px;flex:none;display:flex;align-items:center;justify-content:center;background:var(--surface);border:1px solid var(--line);border-radius:50%;box-shadow:var(--sh-md);color:var(--ink2);text-decoration:none;font-size:1.15rem;cursor:pointer}
.icon-btn:hover{color:var(--ink);border-color:var(--accent)}

/* filters */
.filters{position:absolute;left:18px;bottom:20px;z-index:1000;display:flex;flex-wrap:wrap;gap:8px;max-width:60vw}
.chip{display:inline-flex;align-items:center;gap:8px;background:var(--surface);border:1px solid var(--line);padding:8px 13px;border-radius:100px;font-size:.8rem;font-weight:600;color:var(--ink2);cursor:pointer;box-shadow:var(--sh-sm);transition:transform .12s,border-color .18s;user-select:none}
.chip:hover{transform:translateY(-1px);border-color:var(--accent)}
.chip .dot{width:9px;height:9px;border-radius:50%;box-shadow:0 0 0 1px rgba(0,0,0,.06)}
.chip .n{color:var(--faint);font-weight:700;font-variant-numeric:tabular-nums}
.chip.world{background:var(--ink);color:#fff}
.chip.world .n{color:rgba(255,255,255,.6)}

/* basemap switch */
.styles{position:absolute;right:18px;bottom:20px;z-index:1000;display:flex;gap:6px;background:var(--surface);border:1px solid var(--line);border-radius:100px;padding:5px;box-shadow:var(--sh-md)}
.styles button{border:none;background:none;font-family:var(--font);font-size:.75rem;font-weight:700;color:var(--muted);padding:6px 12px;border-radius:100px;cursor:pointer;transition:background .18s,color .18s}
.styles button.on{background:var(--ink);color:#fff}

/* panel */
.panel{position:absolute;top:0;right:0;bottom:0;width:min(400px,94vw);z-index:1100;background:var(--surface);box-shadow:var(--sh-lg);transform:translateX(102%);transition:transform .4s cubic-bezier(.5,.02,.2,1);display:flex;flex-direction:column;overflow-y:auto}
.panel.open{transform:none}
.p-cover{position:relative;height:140px;flex:none;overflow:hidden}
.p-cover .grad{position:absolute;inset:0}
.p-cover .rgn{position:absolute;left:20px;bottom:16px;display:inline-flex;align-items:center;gap:8px;color:#fff;font-size:.72rem;font-weight:700;text-shadow:0 1px 3px rgba(0,0,0,.4)}
.p-cover .rd{width:8px;height:8px;border-radius:50%;background:#fff;box-shadow:0 0 0 3px rgba(255,255,255,.35)}
.p-close{position:absolute;top:14px;right:14px;width:34px;height:34px;border-radius:50%;border:none;background:rgba(255,255,255,.92);color:var(--ink);cursor:pointer;font-size:1rem;box-shadow:var(--sh-sm);z-index:2}
.p-body{padding:22px 22px 34px;display:flex;flex-direction:column;gap:18px}
.p-place{font-size:.74rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--muted)}
.p-title{font-size:1.6rem;font-weight:800;letter-spacing:-.02em;line-height:1.08;margin:-6px 0 0}
.p-tags{display:flex;flex-wrap:wrap;gap:7px}
.tag{font-size:.74rem;font-weight:700;border-radius:100px;padding:5px 11px;background:var(--line2);color:var(--ink2);display:inline-flex;align-items:center;gap:6px}
.tag.film{background:var(--accent-soft);color:var(--accent)}
.p-note{font-size:.94rem;line-height:1.62;color:var(--ink2);margin:0}
.p-lab{font-size:.7rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--faint);margin-bottom:-8px}
.film-card{display:flex;align-items:center;gap:13px;border:1px solid var(--line);border-radius:14px;padding:13px 14px;text-decoration:none;color:inherit;transition:border-color .18s,box-shadow .18s}
.film-card:hover{border-color:var(--accent);box-shadow:var(--sh-sm)}
.film-card .ic{width:42px;height:42px;flex:none;border-radius:10px;background:var(--accent-soft);color:var(--accent);display:flex;align-items:center;justify-content:center;font-size:1.05rem}
.film-card .ft{font-weight:700;font-size:.94rem}
.film-card .fs{font-size:.78rem;color:var(--muted);margin-top:1px}
.film-card .go{margin-left:auto;color:var(--faint)}

/* gallery / media */
.gal{display:grid;grid-template-columns:repeat(3,1fr);gap:9px}
.gal .ph{position:relative;aspect-ratio:1;border-radius:11px;border:1px solid var(--line);background:var(--canvas) center/cover no-repeat;display:flex;align-items:center;justify-content:center;color:var(--faint);font-size:1.2rem;cursor:pointer;text-decoration:none;overflow:hidden}
.gal .ph.add{border:1.5px dashed var(--line);cursor:pointer}
.gal .ph.add:hover{border-color:var(--accent);color:var(--accent)}
.gal .ph.vid{background:var(--ink);color:#fff}
.gal .ph .del{position:absolute;top:4px;right:4px;width:20px;height:20px;border-radius:50%;background:rgba(0,0,0,.6);color:#fff;font-size:.66rem;display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity .15s}
.gal .ph:hover .del{opacity:1}
.vid-add{display:flex;gap:8px}
.vid-add input{flex:1;font-family:var(--font);font-size:.86rem;border:1.5px solid var(--line);border-radius:10px;padding:9px 11px;outline:none}
.vid-add input:focus{border-color:var(--accent)}
.media-hint{font-size:.85rem;color:var(--muted);background:var(--canvas);border:1px dashed var(--line);border-radius:11px;padding:12px 14px}

/* form */
.field{display:flex;flex-direction:column;gap:6px;position:relative}
.field label{font-size:.7rem;font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:var(--faint)}
.field .opt{text-transform:none;font-weight:600;color:var(--faint)}
.field input,.field textarea,.field select{font-family:var(--font);font-size:.92rem;color:var(--ink);background:var(--surface);border:1.5px solid var(--line);border-radius:11px;padding:11px 13px;outline:none;transition:border-color .18s,box-shadow .18s}
.field input:focus,.field textarea:focus,.field select:focus{border-color:var(--accent);box-shadow:0 0 0 4px var(--accent-soft)}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:11px}
.chk{display:flex;align-items:center;gap:9px;font-size:.86rem;color:var(--ink2);font-weight:600;cursor:pointer}
.chk input{width:17px;height:17px;accent-color:var(--accent)}
.p-actions{display:flex;gap:10px;margin-top:6px}
.btn{flex:1;border-radius:12px;padding:12px;font-family:var(--font);font-weight:700;font-size:.86rem;cursor:pointer;border:1.5px solid var(--line);background:var(--surface);color:var(--ink2);transition:background .18s,border-color .18s}
.btn:hover{border-color:var(--muted)}
.btn.primary{background:var(--ink);border-color:var(--ink);color:#fff}
.btn.primary:hover{background:#000}
.btn.primary:disabled{opacity:.6;cursor:default}
.btn.danger{color:var(--danger);border-color:transparent;background:transparent;flex:0 0 auto;padding:12px 16px}
.btn.danger:hover{background:rgba(225,29,72,.08);border-color:transparent}
.btn.mini{flex:0 0 auto;padding:9px 14px;background:var(--ink);color:#fff;border-color:var(--ink)}

/* autocomplete */
.ac{position:absolute;top:100%;left:0;right:0;margin-top:4px;background:var(--surface);border:1px solid var(--line);border-radius:12px;box-shadow:var(--sh-lg);z-index:20;overflow:hidden;display:none;max-height:250px;overflow-y:auto}
.ac.show{display:block}
.ac-item{padding:10px 13px;font-size:.88rem;cursor:pointer;border-bottom:1px solid var(--line2)}
.ac-item:last-child{border-bottom:none}
.ac-item:hover{background:var(--accent-soft);color:var(--accent)}

/* hint + toast */
.hint{position:absolute;top:80px;left:50%;transform:translateX(-50%) translateY(-14px);z-index:1200;background:var(--ink);color:#fff;padding:11px 18px;border-radius:100px;font-size:.84rem;font-weight:600;box-shadow:var(--sh-lg);display:flex;align-items:center;gap:10px;opacity:0;pointer-events:none;transition:opacity .25s,transform .25s}
.hint.show{opacity:1;transform:translateX(-50%) translateY(0)}
.hint .esc{font-size:.7rem;font-weight:700;background:rgba(255,255,255,.16);padding:3px 8px;border-radius:6px}
body.adding #map{cursor:crosshair}
.toast{position:absolute;bottom:24px;left:50%;transform:translateX(-50%) translateY(20px);z-index:1300;background:var(--ink);color:#fff;padding:11px 20px;border-radius:100px;font-size:.86rem;font-weight:600;box-shadow:var(--sh-lg);opacity:0;pointer-events:none;transition:opacity .25s,transform .25s}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}

/* nav: view switcher (inline) */
.brand{text-decoration:none}
.viewsw{display:flex;gap:2px;background:var(--surface);border:1px solid var(--line);border-radius:100px;padding:4px;box-shadow:var(--sh-md)}
.viewsw a{text-decoration:none;font-family:var(--font);font-weight:700;font-size:.8rem;color:var(--muted);padding:8px 15px;border-radius:100px;transition:background .18s,color .18s;white-space:nowrap}
.viewsw a:hover{color:var(--ink)}
.viewsw a.on{background:var(--ink);color:#fff}

/* settings menu (⚙) */
.settings{position:relative}
.settings-menu{position:absolute;top:calc(100% + 8px);right:0;min-width:212px;background:var(--surface);border:1px solid var(--line);border-radius:14px;box-shadow:var(--sh-lg);padding:8px;opacity:0;transform:translateY(-6px);pointer-events:none;transition:opacity .18s,transform .18s;z-index:1200}
.settings-menu.open{opacity:1;transform:none;pointer-events:auto}
.sm-sec{font-size:.64rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--faint);padding:8px 10px 4px}
.sm-themes{display:flex;gap:4px;padding:2px 6px 6px}
.sm-themes button{flex:1;border:1px solid var(--line);background:var(--surface);font-family:var(--font);font-weight:700;font-size:.72rem;color:var(--muted);padding:8px 4px;border-radius:9px;cursor:pointer}
.sm-themes button.on{background:var(--ink);color:#fff;border-color:var(--ink)}
.sm-div{height:1px;background:var(--line);margin:6px 4px}
.sm-item{display:flex;align-items:center;gap:9px;padding:10px;border-radius:9px;text-decoration:none;color:var(--ink2);font-weight:600;font-size:.88rem;cursor:pointer;width:100%;border:none;background:none;font-family:var(--font);text-align:left}
.sm-item:hover{background:var(--line2);color:var(--ink)}
.sm-item.sm-danger:hover{color:var(--danger)}
.sm-toggle{display:flex;align-items:center;gap:9px;padding:8px 10px;font-size:.85rem;font-weight:600;color:var(--ink2);cursor:pointer}
.sm-toggle input{width:16px;height:16px;accent-color:var(--accent)}
.brand .bt b{line-height:1.05}

/* décale les contrôles de zoom Leaflet sous la barre du haut */
.mappage .leaflet-top{top:70px}

/* list view (drawer gauche) */
.listview{position:absolute;top:0;left:0;bottom:0;width:min(460px,95vw);z-index:1050;background:var(--surface);box-shadow:var(--sh-lg);transform:translateX(-102%);transition:transform .4s cubic-bezier(.5,.02,.2,1);display:flex;flex-direction:column}
.listview.open{transform:none}
.lv-head{display:flex;align-items:flex-start;justify-content:space-between;padding:22px 22px 16px;border-bottom:1px solid var(--line);flex:none}
.lv-head h2{margin:0;font-size:1.32rem;font-weight:800;letter-spacing:-.02em}
.lv-head span{font-size:.82rem;color:var(--muted);font-weight:600}
.lv-close{width:34px;height:34px;flex:none;border-radius:50%;border:1px solid var(--line);background:var(--surface);color:var(--ink);cursor:pointer;font-size:1rem}
.lv-close:hover{background:var(--line2)}
.lv-scroll{overflow-y:auto;padding:6px 14px 24px}
.lv-sec{margin-top:12px}
.lv-sec-h{display:flex;align-items:center;gap:9px;font-size:.72rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--ink2);padding:8px}
.lv-sec-h .dot{width:9px;height:9px;border-radius:50%}
.lv-sec-h .c{margin-left:auto;color:var(--faint);font-variant-numeric:tabular-nums}
.lv-row{display:flex;align-items:center;gap:12px;width:100%;text-align:left;border:none;background:none;padding:9px 10px;border-radius:11px;cursor:pointer;font-family:var(--font)}
.lv-row:hover{background:var(--line2)}
.lv-dot{width:8px;height:8px;border-radius:50%;flex:none}
.lv-main{display:flex;flex-direction:column;min-width:0;flex:1}
.lv-t{font-weight:700;font-size:.94rem;color:var(--ink)}
.lv-s{font-size:.78rem;color:var(--muted)}
.lv-y{font-size:.78rem;color:var(--ink2);font-weight:700;font-variant-numeric:tabular-nums}
.lv-film{font-size:.9rem}

/* timeline (barre du bas) */
.timeline{position:absolute;left:50%;bottom:22px;transform:translate(-50%,150%);z-index:1040;width:min(780px,94vw);background:var(--surface);border:1px solid var(--line);border-radius:18px;box-shadow:var(--sh-lg);transition:transform .42s cubic-bezier(.5,.02,.2,1);padding:14px 18px}
.timeline.open{transform:translate(-50%,0)}
.tl-inner{display:flex;align-items:center;gap:16px}
.tl-left{display:flex;align-items:center;gap:10px;flex:none}
.tl-mode{display:flex;gap:3px;background:var(--line2);border-radius:100px;padding:3px}
.tl-mode button{border:none;background:none;font-family:var(--font);font-weight:700;font-size:.72rem;color:var(--muted);padding:6px 11px;border-radius:100px;cursor:pointer}
.tl-mode button.on{background:var(--surface);color:var(--ink);box-shadow:var(--sh-sm)}
.tl-play{width:40px;height:40px;flex:none;border:none;border-radius:50%;background:var(--ink);color:#fff;font-size:.85rem;cursor:pointer}
.tl-play:hover{background:#000}
.tl-track{flex:1;display:flex;flex-direction:column;gap:5px;min-width:0}
.tl-label{font-size:.84rem;font-weight:700;color:var(--ink);text-align:center}
#tl-range{width:100%;accent-color:var(--accent);cursor:pointer}
.tl-ticks{position:relative;height:14px}
.tl-ticks span{position:absolute;transform:translateX(-50%);font-size:.62rem;color:var(--faint);font-variant-numeric:tabular-nums}
.tl-all{flex:none;border:1px solid var(--line);background:var(--surface);color:var(--ink2);border-radius:100px;padding:9px 14px;font-family:var(--font);font-weight:700;font-size:.75rem;cursor:pointer}
.tl-all:hover{border-color:var(--muted)}
.tl-empty{padding:16px;text-align:center;color:var(--muted);font-size:.9rem}

/* ================= PAGE LISTE (document) ================= */
body.docpage{overflow:auto;background:var(--canvas)}
.docpage .topbar{position:sticky;top:0;background:var(--surface);border-bottom:1px solid var(--line);pointer-events:auto}
.page{max-width:1220px;margin:0 auto;padding:26px 22px 70px}
.page-head{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;margin-bottom:18px;flex-wrap:wrap}
.page-head h1{font-size:1.9rem;font-weight:800;letter-spacing:-.02em;margin:0}
.page-sub{margin:5px 0 0;color:var(--muted);font-weight:600;font-size:.9rem}
.page-search{display:flex;align-items:center;gap:8px;background:var(--surface);border:1px solid var(--line);border-radius:100px;padding:0 15px;height:44px;min-width:280px;box-shadow:var(--sh-sm)}
.page-search svg{color:var(--faint);flex:none}
.page-search input{border:none;outline:none;background:none;font-family:var(--font);font-size:.9rem;width:100%}
.table-wrap{overflow-x:auto;background:var(--surface);border:1px solid var(--line);border-radius:16px;box-shadow:var(--sh-sm)}
.vtable{width:100%;border-collapse:collapse;font-size:.9rem;min-width:820px}
.vtable thead th{text-align:left;font-size:.66rem;font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:var(--faint);padding:14px;border-bottom:1px solid var(--line);white-space:nowrap}
.vtable tbody td{padding:12px 14px;border-bottom:1px solid var(--line2);vertical-align:middle}
.vtable tbody tr:last-child td{border-bottom:none}
.vtable tbody tr:hover{background:var(--line2)}
.cbadge{display:inline-flex;align-items:center;gap:7px;font-weight:600;font-size:.8rem;white-space:nowrap}
.cbadge .dot{width:8px;height:8px;border-radius:50%;flex:none}
.td-lieu{font-weight:700;cursor:pointer}
.td-lieu:hover{color:var(--accent)}
.mono{font-variant-numeric:tabular-nums;color:var(--muted);font-size:.82rem;white-space:nowrap}
.td-note{max-width:280px;color:var(--ink2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.td-med{white-space:nowrap;color:var(--ink2)}
.muted{color:var(--faint)}
.badge-site{font-size:.62rem;font-weight:800;text-transform:uppercase;letter-spacing:.04em;background:var(--accent-soft);color:var(--accent);padding:2px 6px;border-radius:6px}
.row-edit{border:1px solid var(--line);background:var(--surface);width:32px;height:32px;border-radius:9px;cursor:pointer;color:var(--ink2);font-size:.9rem}
.row-edit:hover{border-color:var(--accent);color:var(--accent)}
.td-act{text-align:right}

/* modale d'édition */
.modal{position:fixed;inset:0;z-index:1500;display:none;align-items:flex-start;justify-content:center;background:rgba(10,13,24,.5);backdrop-filter:blur(3px);padding:40px 16px;overflow-y:auto}
.modal.open{display:flex}
.modal-card{width:min(560px,96vw);background:var(--surface);border-radius:18px;box-shadow:var(--sh-lg);display:flex;flex-direction:column;max-height:calc(100vh - 80px)}
.modal-head{display:flex;align-items:center;justify-content:space-between;padding:18px 20px;border-bottom:1px solid var(--line);flex:none}
.modal-head h3{margin:0;font-size:1.2rem;font-weight:800}
.modal-x{width:34px;height:34px;border-radius:50%;border:1px solid var(--line);background:var(--surface);cursor:pointer;font-size:1rem;color:var(--ink)}
.modal-body{padding:18px 20px;display:flex;flex-direction:column;gap:14px;overflow-y:auto}
.modal-foot{display:flex;align-items:center;justify-content:space-between;padding:14px 20px;border-top:1px solid var(--line);gap:10px;flex:none}
.modal-foot .foot-r{display:flex;gap:10px;margin-left:auto}
.modal-foot .btn{flex:0 0 auto;padding:11px 18px}

/* ================= PAGE CHRONOLOGIE (cinématique) ================= */
body.chronopage{overflow:hidden;background:#0a0d16}
#cmap{position:absolute;inset:0;z-index:1;background:#1c2536}
.chronopage .leaflet-control-attribution{background:rgba(10,13,24,.5)!important;color:#6d719a;border-radius:8px 0 0 0}
.chrono-veil{position:absolute;inset:0;z-index:2;pointer-events:none;background:radial-gradient(120% 90% at 50% 42%,transparent 42%,rgba(6,9,18,.55) 100%),linear-gradient(0deg,rgba(6,9,18,.72),transparent 34%)}
.c-year{position:absolute;top:15%;left:0;right:0;z-index:3;text-align:center;font-family:"Fraunces",Georgia,serif;font-weight:600;font-size:clamp(4rem,16vw,12rem);line-height:.9;color:rgba(255,255,255,.09);letter-spacing:-.02em;pointer-events:none;font-variant-numeric:tabular-nums}
.cpin{width:18px;height:18px;transform:translate(-50%,-50%)}
.cpin i{position:absolute;inset:0;border-radius:50%;background:var(--c);border:2px solid rgba(255,255,255,.92);box-shadow:0 1px 4px rgba(0,0,0,.5)}
.cpin.cur i{animation:cping 1.6s ease-out infinite}
@keyframes cping{0%{box-shadow:0 0 0 0 var(--c),0 1px 4px rgba(0,0,0,.5)}70%,100%{box-shadow:0 0 0 15px transparent,0 1px 4px rgba(0,0,0,.5)}}
.c-card{position:absolute;left:clamp(16px,3vw,34px);bottom:118px;z-index:5;width:min(340px,86vw);background:rgba(17,22,43,.82);backdrop-filter:blur(12px);border:1px solid rgba(255,255,255,.1);border-radius:18px;padding:16px;display:flex;gap:14px;align-items:center;color:#fff;box-shadow:var(--sh-lg);opacity:0;transform:translateY(12px);transition:opacity .5s,transform .5s}
.c-card.in{opacity:1;transform:none}
.c-ava{width:62px;height:62px;flex:none;border-radius:15px;overflow:hidden;background:linear-gradient(135deg,#4F46E5,#7C5CFF);display:flex;align-items:center;justify-content:center}
.c-ava img{width:100%;height:100%;object-fit:cover}
.c-ava.noimg::after{content:'JM';font-weight:800;color:#fff;font-size:1.1rem}
.c-info{min-width:0}
.c-count{font-size:.66rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:#9db0ff}
.c-loc{font-family:"Fraunces",Georgia,serif;font-size:1.5rem;font-weight:600;line-height:1.05}
.c-sub{font-size:.84rem;color:rgba(255,255,255,.65);margin-top:3px}
.c-film{font-size:.8rem;color:#c3ccff;margin-top:7px}
.chrono-bar{position:absolute;left:50%;bottom:22px;transform:translateX(-50%);z-index:1000;width:min(780px,94vw);background:rgba(17,22,43,.86);backdrop-filter:blur(12px);border:1px solid rgba(255,255,255,.12);border-radius:18px;box-shadow:var(--sh-lg);padding:14px 18px;display:flex;align-items:center;gap:16px;color:#fff}
.cb-left{display:flex;align-items:center;gap:10px;flex:none}
.chrono-bar .tl-mode{background:rgba(255,255,255,.09)}
.chrono-bar .tl-mode button{color:rgba(255,255,255,.6)}
.chrono-bar .tl-mode button.on{background:#fff;color:var(--ink);box-shadow:none}
.cb-track{flex:1;display:flex;flex-direction:column;gap:5px;min-width:0}
.cb-cap{font-size:.82rem;font-weight:700;text-align:center}
#c-range{width:100%;accent-color:#7c8cff;cursor:pointer}
.cb-ticks{position:relative;height:14px}
.cb-ticks span{position:absolute;transform:translateX(-50%);font-size:.6rem;color:rgba(255,255,255,.4);font-variant-numeric:tabular-nums}
.chrono-bar .tl-all{border-color:rgba(255,255,255,.22);background:transparent;color:#fff}
.chrono-bar .tl-empty{color:rgba(255,255,255,.75)}

@media (max-width:620px){
  .brand .bt{display:none} .search{display:none} .add-btn .t{display:none} .add-btn{padding:0 14px}
  .filters{max-width:calc(100vw - 36px)}
  .viewsw a{padding:7px 11px;font-size:.74rem}
  .page-search{min-width:0;width:100%}
  .chrono-bar{flex-wrap:wrap;gap:10px} .cb-track{order:-1;flex-basis:100%}
  .c-card{bottom:150px}
}

/* ================= EXPORT PDF (impression) ================= */
#print-root{display:none}
#print-root.show{display:block;position:fixed;inset:0;z-index:99999;background:#eceef2;overflow:auto;padding:24px}
#print-root.show .pp{margin:0 auto 24px;box-shadow:0 12px 40px rgba(0,0,0,.28)}
.pp{width:297mm;height:210mm;background:#fff;position:relative;overflow:hidden;color:#14161f;font-family:var(--font);box-sizing:border-box}
.pp .wsvg{width:100%;height:100%;display:block}
.pp .wland{fill:#e7e9f0;stroke:#fff;stroke-width:.4}

.cover{display:flex}
.cover .cov-left{width:44%;padding:22mm 18mm;display:flex;flex-direction:column;box-sizing:border-box}
.cover .cov-kicker{font-size:9pt;font-weight:800;letter-spacing:.18em;text-transform:uppercase;color:#6E82FF}
.cover .cov-title{font-family:"Fraunces",Georgia,serif;font-weight:600;font-size:52pt;line-height:.96;letter-spacing:-.01em;margin:8mm 0 0}
.cover .cov-rule{width:26mm;height:3px;background:#14161f;margin:9mm 0}
.cover .cov-stats{display:grid;grid-template-columns:1fr 1fr;gap:7mm 6mm;margin-top:2mm}
.cover .cov-stat b{font-family:"Fraunces",serif;font-size:26pt;font-weight:600;display:block;line-height:1}
.cover .cov-stat span{font-size:9pt;color:#6b7280;font-weight:600}
.cover .cov-foot{margin-top:auto;font-size:9pt;color:#9aa1ac;font-weight:600;letter-spacing:.02em}
.cover .cov-right{width:56%;position:relative;background:#0c1020}
.cover .cov-right .wland{fill:#20263f;stroke:#0c1020;stroke-width:.5}
.cover .cov-legend{position:absolute;left:10mm;bottom:9mm;display:flex;flex-wrap:wrap;gap:3mm 6mm;max-width:82%}
.cover .cov-leg{display:inline-flex;align-items:center;gap:2mm;color:#e7e9f0;font-size:8.5pt;font-weight:600}
.cover .cov-leg i{width:9px;height:9px;border-radius:50%}
.cover .cov-leg b{color:#fff}

.cpage{padding:13mm 15mm 9mm;display:flex;flex-direction:column;box-sizing:border-box}
.cp-head{display:flex;justify-content:space-between;gap:10mm;align-items:flex-start;border-bottom:2px solid var(--acc);padding-bottom:4mm;margin-bottom:4mm}
.cp-htext{flex:1;min-width:0}
.cp-hmap{width:92mm;height:44mm;flex:none;position:relative}
.cp-hmap .wland{fill:#eef0f5;stroke:#fff;stroke-width:.4}
.cp-eyebrow{font-size:8.5pt;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--acc)}
.cp-title{font-family:"Fraunces",Georgia,serif;font-weight:600;font-size:30pt;line-height:1;margin:2.5mm 0 1.5mm}
.cp-sum{font-size:10.5pt;color:#4b5563;font-weight:600}
.cp-films{margin-bottom:3.5mm}
.cp-lab{display:block;font-size:7.5pt;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:#9aa1ac;margin-bottom:1.5mm}
.cp-filmlist{display:flex;flex-wrap:wrap;gap:1.5mm}
.cp-film{font-size:8pt;font-weight:700;color:var(--acc);border:1px solid color-mix(in srgb,var(--acc) 40%,#e5e7eb);border-radius:100px;padding:.8mm 2.5mm}
.cp-etapes{flex:1;list-style:none;margin:0;padding:0;column-width:46mm;column-gap:7mm}
.cp-etapes li{display:flex;gap:2mm;break-inside:avoid;margin-bottom:1.5mm;align-items:baseline}
.cp-etapes .e-n{font-family:"Fraunces",Georgia,serif;font-size:8.5pt;color:var(--acc);font-weight:600;min-width:5mm;text-align:right}
.cp-etapes .e-txt{display:flex;flex-direction:column;min-width:0;flex:1}
.cp-etapes .e-city{font-size:9.5pt;font-weight:700;line-height:1.1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cp-etapes .e-meta{font-size:7.5pt;color:#6b7280;line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cp-foot{display:flex;justify-content:space-between;font-size:7.5pt;color:#9aa1ac;font-weight:600;border-top:1px solid #e5e7eb;padding-top:2.5mm;margin-top:3mm}

@media print{
  @page{size:A4 landscape;margin:0}
  body>*:not(#print-root){display:none!important}
  #print-root,#print-root.show{display:block!important;position:static;background:none;padding:0;overflow:visible}
  #print-root.show .pp,#print-root .pp{margin:0;box-shadow:none}
  .pp{page-break-after:always;break-after:page}
  .pp:last-child{page-break-after:auto}
}

/* ================= GLOBE 3D / HUD (page globe.php) ================= */
body.globepage{
  --canvas:#0a0d18; --surface:rgba(12,16,32,.74); --ink:#F3F5FF; --ink2:#D7DBEA; --muted:#9AA3C2; --faint:#717A9C;
  --line:rgba(255,255,255,.13); --line2:rgba(255,255,255,.08); --accent:#7C8CFF; --accent-soft:rgba(124,140,255,.2);
  --mono:"Space Mono",ui-monospace,monospace;
  background:#03040a;
}
#stars{position:fixed;inset:0;width:100%;height:100%;z-index:0;pointer-events:none}
#globe{position:fixed;top:0;left:0;width:100vw;height:100vh;z-index:1;background:transparent}
.globe-vignette{position:fixed;inset:0;z-index:2;pointer-events:none;background:radial-gradient(120% 100% at 50% 50%,transparent 55%,rgba(2,3,8,.55) 100%)}
.globepage .maplibregl-canvas{outline:none}
.globepage .maplibregl-ctrl-top-right{top:72px}
.globepage .maplibregl-ctrl-group{background:var(--surface)!important;backdrop-filter:blur(10px);border:1px solid var(--line);border-radius:12px!important;box-shadow:var(--sh-md)}
.globepage .maplibregl-ctrl-group button{width:38px;height:38px;filter:invert(1) hue-rotate(180deg)}
.globepage .maplibregl-ctrl-group button+button{border-top:1px solid rgba(0,0,0,.25)}
.globepage .maplibregl-ctrl-attrib{background:rgba(3,4,10,.55)!important;color:#8b93b3;font-size:10px;border-radius:8px 0 0 0}
.globepage .maplibregl-ctrl-attrib a{color:#b7bed8}

/* verre & contrastes (les composants lisent les tokens) */
.globepage .brand,.globepage .viewsw,.globepage .search,.globepage .icon-btn,.globepage .chip,.globepage .settings-menu{backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
.globepage .brand .bt b{color:#fff}
.globepage .viewsw a.on{background:#fff;color:#0b0f19}
.globepage .add-btn{background:linear-gradient(135deg,#6E82FF,#8E5CFF);color:#fff;box-shadow:0 10px 30px -10px rgba(110,130,255,.7)}
.globepage .add-btn:hover{background:linear-gradient(135deg,#7C8CFF,#9E6CFF)}
.globepage .chip.world{background:#fff;color:#0b0f19}
.globepage .chip.world .n{color:#6b7280}
.globepage .sm-themes button.on{background:#fff;color:#0b0f19;border-color:#fff}
.globepage .btn.primary{background:linear-gradient(135deg,#6E82FF,#8E5CFF);border-color:transparent;color:#fff}
.globepage .toast{background:#fff;color:#0b0f19}
.globepage .hint{background:#fff;color:#0b0f19}
.globepage .hint .esc{background:rgba(0,0,0,.08)}
.globepage .p-close{background:rgba(255,255,255,.14);color:#fff;border:1px solid var(--line)}
.globepage .field input,.globepage .field textarea,.globepage .field select{background:rgba(255,255,255,.06);color:#fff;border-color:var(--line)}
.globepage .field select option{color:#0b0f19}
.globepage .vid-add input{background:rgba(255,255,255,.06);color:#fff;border-color:var(--line)}
.globepage .gal .ph{background-color:rgba(255,255,255,.05)}
.globepage .media-hint{background:rgba(255,255,255,.05)}
.globepage .ac{background:#121732}
.globepage .ac-item:hover{background:var(--accent-soft);color:#fff}

/* intro + readout */
.intro{position:fixed;top:84px;left:50%;transform:translateX(-50%);z-index:1000;font-family:var(--mono);font-size:.68rem;letter-spacing:.18em;text-transform:uppercase;color:#c9d0ea;background:rgba(12,16,32,.6);backdrop-filter:blur(10px);border:1px solid var(--line);border-radius:100px;padding:9px 16px;transition:opacity .6s;pointer-events:none}
.intro.gone{opacity:0}
.hud-readout{position:fixed;right:18px;bottom:44px;z-index:1000;display:flex;gap:18px;font-family:var(--mono);font-size:.68rem;letter-spacing:.06em;color:#c9d0ea;background:rgba(12,16,32,.6);backdrop-filter:blur(10px);border:1px solid var(--line);border-radius:100px;padding:8px 16px;pointer-events:none;font-variant-numeric:tabular-nums}
.hud-readout b{color:#7C8CFF;font-weight:700;margin-right:5px}
.hud-readout i{font-style:normal;color:#fff}

/* marqueur temporaire */
.tmp-pin{width:20px;height:20px;border-radius:50%;background:#7C8CFF;border:2.5px solid #fff;box-shadow:0 0 0 6px rgba(124,140,255,.35),0 0 24px rgba(124,140,255,.9);animation:tmpping 1.6s ease-out infinite}
@keyframes tmpping{0%{box-shadow:0 0 0 4px rgba(124,140,255,.45),0 0 24px rgba(124,140,255,.9)}100%{box-shadow:0 0 0 18px rgba(124,140,255,0),0 0 24px rgba(124,140,255,.9)}}

/* panneau HUD */
.hud-panel{background:linear-gradient(180deg,rgba(12,16,32,.92),rgba(8,11,22,.96));backdrop-filter:blur(18px);border-left:1px solid var(--line);color:#fff}
.hp-head{position:relative;padding:60px 24px 22px;background:radial-gradient(120% 90% at 100% 0%,color-mix(in srgb,var(--acc) 38%,transparent),transparent 60%);border-bottom:1px solid var(--line)}
.hp-head::after{content:"";position:absolute;left:24px;right:24px;bottom:-1px;height:2px;background:linear-gradient(90deg,var(--acc),transparent)}
.hp-region{display:inline-flex;align-items:center;gap:8px;font-family:var(--mono);font-size:.64rem;letter-spacing:.16em;text-transform:uppercase;color:#c9d0ea}
.hp-region i{width:8px;height:8px;border-radius:50%;background:var(--acc);box-shadow:0 0 12px var(--acc)}
.hp-kicker{margin-top:14px;font-family:var(--mono);font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.hp-title{font-family:"Fraunces",Georgia,serif;font-weight:500;font-size:2.7rem;line-height:.98;letter-spacing:.01em;margin:6px 0 14px;color:#fff;text-wrap:balance}
.hp-title.small{font-size:1.9rem}
.hp-meta{display:flex;flex-wrap:wrap;gap:6px 14px;font-family:var(--mono);font-size:.68rem;color:#c9d0ea;letter-spacing:.04em}
.hp-meta .film{color:#b9c2ff}
.hud-panel .p-note{color:#d7dbea}
.hud-panel .film-card{border-color:var(--line);background:rgba(255,255,255,.04)}
.hud-panel .film-card .ft{color:#fff}
.hud-panel .btn{background:rgba(255,255,255,.06);color:#fff;border-color:var(--line)}
.hud-panel .btn.danger{color:#ff8fa3;background:transparent}
.hud-panel .btn.danger.wide{width:100%;margin-top:14px;border:1px dashed rgba(255,120,140,.4)}
.hud-panel .btn.danger.wide:hover{background:rgba(225,29,72,.14)}
.hud-panel .p-lab{color:var(--faint)}
body.adding #globe{cursor:crosshair}
@media (max-width:620px){ .hud-readout{display:none} .intro{top:auto;bottom:120px} }

/* aperçu au survol (HUD futuriste) */
.hover-card{position:fixed;z-index:1150;pointer-events:none;opacity:0;transform:translate(-50%,-100%) translateY(-18px) scale(.96);transition:opacity .18s,transform .18s;
  --acc:#7C8CFF;width:240px;background:linear-gradient(180deg,rgba(10,14,30,.9),rgba(8,11,22,.94));backdrop-filter:blur(14px);
  border:1px solid color-mix(in srgb,var(--acc) 55%,transparent);border-radius:14px;box-shadow:0 0 0 1px rgba(255,255,255,.04),0 24px 50px -20px rgba(0,0,0,.8),0 0 40px -12px var(--acc);color:#fff;overflow:hidden}
.hover-card.show{opacity:1;transform:translate(-50%,-100%) translateY(-14px) scale(1)}
.hover-card::before,.hover-card::after{content:"";position:absolute;width:12px;height:12px;border:2px solid var(--acc);pointer-events:none}
.hover-card::before{top:6px;left:6px;border-right:0;border-bottom:0}
.hover-card::after{bottom:6px;right:6px;border-left:0;border-top:0}
.hc-hero{position:relative;height:130px;background:#0d1122 center/cover no-repeat}
.hc-hero::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 40%,rgba(8,11,22,.95))}
.hc-hero .hc-count{position:absolute;top:8px;right:10px;font-family:var(--mono);font-size:.62rem;letter-spacing:.08em;background:rgba(0,0,0,.55);border:1px solid rgba(255,255,255,.2);border-radius:100px;padding:3px 8px}
.hc-thumbs{position:absolute;left:10px;bottom:8px;display:flex;gap:5px}
.hc-thumbs i{width:34px;height:34px;border-radius:7px;background:#1a2040 center/cover no-repeat;border:1px solid rgba(255,255,255,.25)}
.hc-thumbs i.vid{display:flex;align-items:center;justify-content:center;font-style:normal;font-size:.8rem;background-color:rgba(124,140,255,.25);color:#fff;text-shadow:0 0 6px #000}
.hc-body{padding:10px 12px 12px}
.hc-region{font-family:var(--mono);font-size:.58rem;letter-spacing:.16em;text-transform:uppercase;color:var(--acc)}
.hc-title{font-family:"Fraunces",Georgia,serif;font-size:1.25rem;line-height:1.05;margin:3px 0 4px}
.hc-meta{font-family:var(--mono);font-size:.62rem;color:#aab3d3;letter-spacing:.04em}
.hover-card.nomedia .hc-hero{display:none}
.hover-card.nomedia{width:auto;min-width:150px}

/* médias holographiques autour du point */
.tether{width:1px;background:linear-gradient(180deg,var(--acc),transparent 85%);transform-origin:bottom center;opacity:.7;pointer-events:none}
.holo-mk{position:absolute;width:104px;height:72px}
.holo-mk:hover{z-index:5}
.holo{width:100%;height:100%;border-radius:10px;background:#0d1122 center/cover no-repeat;border:1px solid color-mix(in srgb,var(--acc) 70%,transparent);
  box-shadow:0 0 0 1px rgba(255,255,255,.06),0 18px 40px -18px rgba(0,0,0,.9),0 0 28px -8px var(--acc);cursor:pointer;position:relative;overflow:hidden;
  animation:holofloat 4.2s ease-in-out infinite;transition:box-shadow .2s,border-color .2s;will-change:transform;backface-visibility:hidden}
.holo::after{content:"";position:absolute;inset:0;background:linear-gradient(135deg,rgba(255,255,255,.14),transparent 45%,rgba(0,0,0,.25));pointer-events:none}
.holo:hover{border-color:#fff;box-shadow:0 0 0 1px rgba(255,255,255,.12),0 24px 50px -18px rgba(0,0,0,.9),0 0 40px -6px var(--acc);animation-play-state:paused}
.holo i{position:absolute;left:8px;top:6px;font-family:var(--mono);font-size:.58rem;font-style:normal;letter-spacing:.12em;color:#fff;text-shadow:0 1px 4px rgba(0,0,0,.8)}
.holo.vid{display:flex;align-items:center;justify-content:center;background:transparent;border:1px solid color-mix(in srgb,var(--acc) 80%,transparent);box-shadow:0 0 22px -8px var(--acc),inset 0 0 0 1px rgba(255,255,255,.06)}
.holo.vid{background-position:center;background-size:cover}
.holo.vid::after{background:linear-gradient(180deg,rgba(4,10,22,.05),rgba(4,10,22,.45))}
.holo.vid .holo-vid{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;pointer-events:none}
.holo.vid span{position:relative;z-index:1}
.holo.vid span{width:34px;height:34px;border-radius:50%;display:flex;align-items:center;justify-content:center;padding-left:3px;font-size:.95rem;color:#fff;border:1px solid var(--acc);background:rgba(4,10,22,.35);text-shadow:0 0 12px var(--acc);box-shadow:0 0 16px -4px var(--acc)}
.holo u{position:absolute;right:8px;bottom:6px;text-decoration:none;font-family:var(--mono);font-size:.6rem;color:#fff;background:rgba(4,10,22,.7);padding:2px 6px;border-radius:5px}
.holo.zooming{opacity:0}
@keyframes holofloat{0%,100%{transform:translate3d(0,0,0)}50%{transform:translate3d(0,-7px,0)}}
@media (prefers-reduced-motion:reduce){ .holo{animation:none} }
#lightbox{position:fixed;inset:0;z-index:5000;background:rgba(3,4,10,.86);backdrop-filter:blur(10px);display:flex;align-items:center;justify-content:center;opacity:0;pointer-events:none;transition:opacity .25s;cursor:zoom-out}
#lightbox.show{opacity:1;pointer-events:auto}
#lightbox img{max-width:88vw;max-height:86vh;border-radius:14px;box-shadow:0 40px 100px -30px rgba(0,0,0,.9);border:1px solid rgba(255,255,255,.12)}
#lightbox .lb-x{position:absolute;top:18px;right:22px;color:#fff;font-size:1.2rem;width:40px;height:40px;border-radius:50%;background:rgba(255,255,255,.12);display:flex;align-items:center;justify-content:center}

/* ================= HUD PARE-BRISE (vue d'un voyage) ================= */
.hud-view{position:fixed;inset:0;z-index:1080;pointer-events:none;opacity:0;transition:opacity .45s;--acc:#7CF5FF;--hud:#7CF5FF;font-family:var(--font)}
.hud-view.show{opacity:1}
.hud-view .hv-block{pointer-events:auto;position:absolute}
body.hv-open .filters,body.hv-open .intro{opacity:0;pointer-events:none}
/* cadre de visée au centre (le lieu y est cadré après le vol) */
.hv-target{position:absolute;left:50%;top:52%;width:min(46vmin,340px);height:min(46vmin,340px);transform:translate(-50%,-50%);pointer-events:none;transition:opacity .9s,transform .9s}
.hud-view.settled .hv-target{opacity:0;transform:translate(-50%,-50%) scale(1.25)}
.hud-view.settled .hv-tag em{opacity:.5}
.hv-target i{position:absolute;width:26px;height:26px;border:2px solid var(--hud);opacity:.85;filter:drop-shadow(0 0 6px var(--hud))}
.hv-target .c1{left:0;top:0;border-right:0;border-bottom:0}.hv-target .c2{right:0;top:0;border-left:0;border-bottom:0}
.hv-target .c3{left:0;bottom:0;border-right:0;border-top:0}.hv-target .c4{right:0;bottom:0;border-left:0;border-top:0}
.hv-ring{position:absolute;left:50%;top:50%;width:62%;height:62%;transform:translate(-50%,-50%);border-radius:50%;border:1px dashed rgba(124,245,255,.55);animation:hvspin 18s linear infinite}
.hv-ring2{position:absolute;left:50%;top:50%;width:78%;height:78%;transform:translate(-50%,-50%);border-radius:50%;border:1px solid rgba(124,245,255,.18)}
@keyframes hvspin{to{transform:translate(-50%,-50%) rotate(360deg)}}
/* blocs translucides */
.hv-head{left:clamp(16px,2.4vw,34px);top:84px;max-width:min(420px,44vw)}
.hv-tag{display:inline-flex;align-items:center;gap:8px;font-family:var(--mono);font-size:.62rem;letter-spacing:.18em;text-transform:uppercase;color:#d8fbff}
.hv-tag i{width:8px;height:8px;border-radius:50%;background:var(--acc);box-shadow:0 0 10px var(--acc)}
.hv-tag em{font-style:normal;color:var(--hud);opacity:.85}
.hv-kicker{margin-top:14px;display:flex;align-items:center;gap:10px;font-family:var(--mono);font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;color:#a9c9d6}
.hv-flag{width:34px;height:auto;border-radius:3px;border:1px solid rgba(124,245,255,.45);box-shadow:0 0 14px -4px var(--hud);flex:none}
.hv-title{font-family:"Fraunces",Georgia,serif;font-weight:500;font-size:clamp(2.2rem,4.4vw,3.6rem);line-height:.96;letter-spacing:.01em;margin:4px 0 12px;color:#fff;text-shadow:0 2px 24px rgba(0,0,0,.7),0 0 30px rgba(124,245,255,.25);text-wrap:balance}
.hv-meta{display:flex;flex-wrap:wrap;gap:6px 14px;font-family:var(--mono);font-size:.66rem;letter-spacing:.06em;color:#d8fbff;text-shadow:0 1px 8px rgba(0,0,0,.8)}
.hv-meta span{padding:4px 9px;border:1px solid rgba(124,245,255,.35);border-radius:6px;background:rgba(4,10,22,.35);backdrop-filter:blur(6px)}
.hv-info{left:clamp(16px,2.4vw,34px);top:calc(84px + 250px);max-width:min(380px,40vw);display:flex;flex-direction:column;gap:10px}
.hv-note{margin:0;font-size:.9rem;line-height:1.55;color:#eaf6ff;background:linear-gradient(90deg,rgba(4,10,22,.55),rgba(4,10,22,.25));border-left:2px solid var(--hud);padding:10px 14px;backdrop-filter:blur(8px);text-shadow:0 1px 6px rgba(0,0,0,.8)}
.hv-film{display:flex;align-items:center;gap:12px;text-decoration:none;color:#fff;background:rgba(4,10,22,.45);border:1px solid rgba(124,245,255,.35);border-radius:10px;padding:10px 12px;backdrop-filter:blur(8px)}
.hv-film span{width:34px;height:34px;border-radius:8px;display:flex;align-items:center;justify-content:center;background:rgba(124,245,255,.15);color:var(--hud);flex:none}
.hv-wiki{display:flex;flex-direction:column;gap:4px;font-size:.84rem;line-height:1.5;color:#dbe9f3;background:rgba(4,10,22,.4);border:1px solid rgba(124,245,255,.22);border-radius:10px;padding:10px 14px;backdrop-filter:blur(8px)}
.hv-wiki-lab{font-family:var(--mono);font-size:.56rem;letter-spacing:.16em;text-transform:uppercase;color:var(--hud)}
.hv-wiki a{align-self:flex-end;font-family:var(--mono);font-size:.6rem;letter-spacing:.1em;text-transform:uppercase;color:var(--hud);text-decoration:none}
.hv-wiki a:hover{text-decoration:underline}
.hv-film b{display:block;font-weight:700;font-size:.92rem}.hv-film small{display:block;font-family:var(--mono);font-size:.6rem;letter-spacing:.08em;text-transform:uppercase;color:#a9c9d6;margin-top:2px}
/* médias : colonne droite */
.hv-media{right:clamp(16px,2.4vw,34px);top:84px;width:118px}
.hv-lab{font-family:var(--mono);font-size:.58rem;letter-spacing:.16em;text-transform:uppercase;color:var(--hud);margin-bottom:8px;text-align:right}
.hv-tiles{display:flex;flex-direction:column;gap:8px;max-height:calc(100vh - 220px);overflow:auto;padding-right:2px}
.hv-tile{position:relative;width:118px;height:78px;border-radius:9px;border:1px solid rgba(124,245,255,.45);background:#0a1224 center/cover no-repeat;cursor:pointer;box-shadow:0 0 18px -8px var(--hud);transition:transform .15s,border-color .15s;padding:0}
.hv-tile:hover{transform:scale(1.05);border-color:#fff}
.hv-tile i{position:absolute;left:6px;top:4px;font-family:var(--mono);font-size:.55rem;font-style:normal;letter-spacing:.12em;color:#fff;text-shadow:0 1px 4px #000}
.hv-tile.vid{display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,rgba(124,245,255,.25),rgba(4,10,22,.9))}
.hv-tile.vid span{color:#fff;font-size:1.2rem;text-shadow:0 0 14px var(--hud)}
/* actions */
.hv-actions{left:clamp(16px,2.4vw,34px);bottom:22px;display:flex;gap:8px}
.hv-btn{font-family:var(--mono);font-size:.66rem;letter-spacing:.12em;text-transform:uppercase;color:#d8fbff;background:rgba(4,10,22,.55);border:1px solid rgba(124,245,255,.45);border-radius:8px;padding:10px 14px;cursor:pointer;backdrop-filter:blur(8px);transition:background .15s,border-color .15s}
.hv-btn:hover{background:rgba(124,245,255,.16);border-color:var(--hud)}
.hv-btn.danger{color:#ffb3bd;border-color:rgba(255,120,140,.4)}
/* verrou de cible sur le lieu */
.lock{width:84px;height:84px;position:absolute;pointer-events:none;--acc:#7CF5FF}
.lock i,.lock b{transition:opacity .9s}
.lock.settled i,.lock.settled b{animation:none;opacity:0}
.lock i{position:absolute;inset:0;border-radius:50%}
.lock .l1{border:1.5px dashed var(--acc);animation:hvspin 9s linear infinite;opacity:.9;filter:drop-shadow(0 0 6px var(--acc))}
.lock .l2{inset:16px;border:1px solid var(--acc);opacity:.55;animation:lockpulse 2.2s ease-in-out infinite}
.lock b{position:absolute;width:14px;height:14px;border:2px solid var(--acc)}
.lock b:nth-of-type(1){left:-6px;top:-6px;border-right:0;border-bottom:0}.lock b:nth-of-type(2){right:-6px;top:-6px;border-left:0;border-bottom:0}
.lock b:nth-of-type(3){left:-6px;bottom:-6px;border-right:0;border-top:0}.lock b:nth-of-type(4){right:-6px;bottom:-6px;border-left:0;border-top:0}
@keyframes lockpulse{0%,100%{transform:scale(1);opacity:.55}50%{transform:scale(1.12);opacity:.95}}
/* visionneuse : lecture sur place */
#viewer{position:fixed;inset:0;z-index:5000;background:rgba(2,4,10,.82);backdrop-filter:blur(12px);display:flex;align-items:center;justify-content:center;opacity:0;pointer-events:none;transition:opacity .45s}
#viewer.show{opacity:1;pointer-events:auto}
#viewer .vw-frame{transform-origin:center;transition:transform .6s cubic-bezier(.2,.8,.2,1),opacity .35s;position:relative;width:min(1100px,92vw);max-height:88vh;border:1px solid rgba(124,245,255,.4);border-radius:14px;padding:6px;background:rgba(4,10,22,.6);box-shadow:0 0 0 1px rgba(255,255,255,.05),0 40px 100px -30px rgba(0,0,0,.95),0 0 60px -20px #7CF5FF}
#viewer .vw-body{position:relative;width:100%;aspect-ratio:16/9;max-height:calc(88vh - 12px);border-radius:10px;overflow:hidden;background:#000;display:flex;align-items:center;justify-content:center}
#viewer .vw-body img{max-width:100%;max-height:calc(88vh - 12px);object-fit:contain}
#viewer .vw-body iframe,#viewer .vw-body video{width:100%;height:100%;border:0;background:#000}
#viewer .vw-body{transition:opacity .18s,transform .18s}
#viewer .vw-body.slide-l{opacity:0;transform:translateX(-24px)}
#viewer .vw-body.slide-r{opacity:0;transform:translateX(24px)}
#viewer .vw-nav{position:absolute;left:50%;bottom:-22px;transform:translateX(-50%);display:flex;align-items:center;gap:10px;background:#0a1224;border:1px solid rgba(124,245,255,.5);border-radius:999px;padding:4px 6px;box-shadow:0 0 24px -8px #7CF5FF}
#viewer .vw-nav[hidden]{display:none}
#viewer .vw-nav button{width:34px;height:34px;border-radius:50%;border:1px solid rgba(124,245,255,.35);background:rgba(124,245,255,.08);color:#fff;font-size:1.3rem;line-height:1;cursor:pointer;transition:background .15s}
#viewer .vw-nav button:hover{background:rgba(124,245,255,.25)}
#viewer .vw-count{font-family:var(--mono);font-size:.66rem;letter-spacing:.14em;color:#7CF5FF;min-width:64px;text-align:center}
#viewer .vw-kind{position:absolute;left:14px;top:-14px;font-family:var(--mono);font-size:.58rem;letter-spacing:.18em;text-transform:uppercase;color:#7CF5FF;background:#0a1224;border:1px solid rgba(124,245,255,.4);border-radius:6px;padding:4px 9px}
.holo.current{border-color:#fff;box-shadow:0 0 0 1px #fff,0 0 30px -4px var(--acc)}
#viewer .vw-x{position:absolute;top:-16px;right:-16px;width:38px;height:38px;border-radius:50%;background:#0a1224;border:1px solid rgba(124,245,255,.5);color:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:1rem}
@media (max-width:820px){ .hv-media{display:none} .hv-info{top:auto;bottom:80px;max-width:60vw} .hv-target{display:none} }

/* ================= CHRONOLOGIE : circuits temporels ================= */
body.chronopage .hud-readout{bottom:auto;top:200px;right:18px;flex-direction:column;align-items:flex-end;gap:4px}
body.chronopage .hv-actions{display:none}
body.chronopage .hv-info{max-width:min(360px,34vw)}
.tc{position:fixed;left:50%;bottom:16px;transform:translateX(-50%);z-index:1090;width:min(940px,95vw);background:rgba(4,10,22,.74);backdrop-filter:blur(16px);border:1px solid rgba(124,245,255,.32);border-radius:16px;padding:12px 16px 12px;display:flex;flex-direction:column;gap:10px;box-shadow:0 30px 80px -30px #000,0 0 50px -22px #7CF5FF;color:#dff7ff;font-family:var(--font)}
.tc::before{content:"";position:absolute;left:18px;right:18px;top:0;height:1px;background:linear-gradient(90deg,transparent,rgba(124,245,255,.7),transparent)}
.tc-row{display:flex;align-items:center;gap:12px}
.tc-disp{flex:1;min-width:0;background:#04070e;border:1px solid rgba(255,255,255,.07);border-radius:10px;padding:8px 12px 7px;display:flex;flex-direction:column;gap:3px;box-shadow:inset 0 0 24px rgba(0,0,0,.8)}
.tc-lab{font-family:var(--mono);font-size:.52rem;letter-spacing:.22em;text-transform:uppercase;color:#7f9aa6}
.tc-val{font-family:var(--mono);font-weight:700;font-size:1.55rem;letter-spacing:.1em;line-height:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-variant-numeric:tabular-nums}
.tc-disp small{font-family:var(--mono);font-size:.6rem;color:#9ab7c2;letter-spacing:.05em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tc-disp.red .tc-val{color:#ff5a3c;text-shadow:0 0 14px rgba(255,90,60,.85)}
.tc-disp.green .tc-val{color:#5cff8a;text-shadow:0 0 14px rgba(92,255,138,.8)}
.tc-disp.amber .tc-val{color:#ffc247;text-shadow:0 0 14px rgba(255,194,71,.8)}
.tc-arrow,.tc-btn{flex:none;width:38px;height:38px;border-radius:9px;border:1px solid rgba(124,245,255,.3);background:rgba(124,245,255,.06);color:#dff7ff;font-size:1rem;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .15s,border-color .15s}
.tc-arrow:hover,.tc-btn:hover{background:rgba(124,245,255,.18);border-color:#7CF5FF}
.tc-btn.play{width:48px;height:48px;border-radius:50%;background:#7CF5FF;color:#04212a;font-size:1.05rem;border-color:#7CF5FF;box-shadow:0 0 24px -6px #7CF5FF}
.tc-btn.play:hover{background:#fff}
.tc-strip{display:flex;gap:6px;overflow-x:auto;padding:2px 2px 4px;scrollbar-width:thin}
.tc-strip button{flex:none;font-family:var(--mono);font-size:.68rem;letter-spacing:.06em;padding:6px 10px;border-radius:6px;border:1px solid rgba(124,245,255,.22);background:transparent;color:#a9c9d6;cursor:pointer;transition:background .15s,border-color .15s}
.tc-strip button:hover{border-color:#7CF5FF;color:#fff}
.tc-strip button.done{opacity:.45}
.tc-strip button.on{background:rgba(255,90,60,.16);border-color:#ff5a3c;color:#fff;opacity:1;text-shadow:0 0 8px rgba(255,90,60,.8)}
.tc-dots{flex:1;display:flex;gap:4px;align-items:center;min-height:6px;padding:0 6px}
.tc-dots i{flex:1;height:3px;border-radius:2px;background:rgba(124,245,255,.16);transition:background .3s}
.tc-dots i.done{background:rgba(124,245,255,.55)}
.tc-dots i.cur{background:#fff;box-shadow:0 0 10px #7CF5FF}
.tc-note{font-family:var(--mono);font-size:.56rem;letter-spacing:.08em;color:#7f9aa6;white-space:nowrap}
.blip{width:16px;height:16px;border-radius:50%;border:2px solid var(--acc);box-shadow:0 0 12px var(--acc);animation:blip 1.4s ease-out forwards;pointer-events:none}
@keyframes blip{0%{transform:scale(.3);opacity:1}100%{transform:scale(6);opacity:0}}
#tjump{position:fixed;inset:0;z-index:4000;pointer-events:none;background:radial-gradient(circle at 50% 50%,#fff,#7CF5FF 40%,transparent 75%);opacity:0}
#tjump.go{animation:tjump 1.5s ease-out}
@keyframes tjump{0%{opacity:0}10%{opacity:.95}100%{opacity:0}}
@media (max-width:820px){
  .tc{padding:10px 12px} .tc-disps{flex-wrap:wrap} .tc-disp.amber{display:none} .tc-val{font-size:1.2rem}
  body.chronopage .hv-info{top:auto;bottom:210px;max-width:60vw} .tc-note{display:none}
}
@media (prefers-reduced-motion:reduce){ .blip{animation-duration:.6s} #tjump.go{animation:none} }

/* ================= RECHERCHE : propositions ================= */
.search{position:relative}
.sg{position:absolute;left:0;right:0;top:calc(100% + 8px);z-index:1200;display:none;max-height:min(420px,60vh);overflow:auto;padding:6px;border-radius:16px;
  background:rgba(4,10,22,.86);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border:1px solid rgba(124,245,255,.32);box-shadow:0 30px 70px -30px #000,0 0 40px -22px #7CF5FF}
.sg.show{display:block}
.sg-item{display:flex;align-items:center;gap:11px;padding:9px 10px;border-radius:10px;cursor:pointer;color:#eaf6ff}
.sg-item:hover,.sg-item.cur{background:rgba(124,245,255,.13)}
.sg-item i{flex:none;width:9px;height:9px;border-radius:50%;background:var(--acc);box-shadow:0 0 10px var(--acc)}
.sg-main{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.sg-main b{font-weight:700;font-size:.9rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sg-main small{font-family:var(--mono);font-size:.62rem;letter-spacing:.04em;color:#a9c9d6;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sg-item em{flex:none;font-style:normal;font-family:var(--mono);font-size:.56rem;letter-spacing:.1em;text-transform:uppercase;color:#7CF5FF;border:1px solid rgba(124,245,255,.3);border-radius:5px;padding:2px 6px}
.sg mark{background:none;color:#7CF5FF;font-weight:inherit}
.sg-empty{padding:12px 10px;font-family:var(--mono);font-size:.68rem;color:#a9c9d6}

/* ================= VERSION PUBLIQUE ================= */
.site-link{display:inline-flex;align-items:center;height:46px;padding:0 16px;border-radius:100px;font-family:var(--mono);font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;text-decoration:none;
  color:#d8fbff;background:rgba(10,14,28,.55);border:1px solid rgba(255,255,255,.12);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);transition:border-color .15s,color .15s}
.site-link:hover{border-color:#7CF5FF;color:#fff}
body.public .search{max-width:400px}
@media (max-width:620px){
  body.public .search{display:flex;flex:1;max-width:none;height:42px} body.public .site-link{display:none} body.public .spacer{display:none}
}

/* actions du pare-brise : centrées en bas, « Quitter » plus présent */
.hv-actions{left:50%;transform:translateX(-50%);bottom:26px;gap:10px;align-items:center}
.hv-actions #v-close{font-size:.76rem;letter-spacing:.16em;padding:14px 26px;border-radius:999px;border-color:rgba(124,245,255,.7);background:rgba(4,10,22,.68);box-shadow:0 0 26px -10px #7CF5FF}
.hv-actions #v-close:hover{background:rgba(124,245,255,.2)}
@media (max-width:820px){ .hv-info{bottom:96px} }

/* ================= MOBILE : vue d'une étape ================= */
@media (max-width:620px){
  body.hv-open .maplibregl-ctrl-top-right{display:none}
  .hv-head{top:72px;left:14px;right:14px;max-width:none}
  .hv-tag em,.hv-coords{display:none}
  .hv-kicker{margin-top:8px}
  .hv-flag{width:26px}
  .hv-title{font-size:1.9rem;margin:2px 0 8px}
  .hv-info{left:12px;right:12px;top:auto;bottom:78px;max-width:none;max-height:30vh;overflow-y:auto;gap:7px;-webkit-overflow-scrolling:touch}
  .hv-note{font-size:.82rem;line-height:1.45;padding:8px 12px;background:rgba(4,10,22,.62)}
  .hv-film{padding:7px 10px;background:rgba(4,10,22,.62)} .hv-film span{width:28px;height:28px}
  .hv-wiki{position:relative;padding:8px 30px 8px 12px;font-size:.78rem;line-height:1.4;background:rgba(4,10,22,.62);cursor:pointer}
  .hv-wiki::after{content:"▾";position:absolute;right:11px;top:7px;color:var(--hud);font-size:.8rem;transition:transform .2s}
  .hv-wiki.open::after{transform:rotate(180deg)}
  .hv-wiki .hv-wiki-txt{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
  .hv-wiki.open .hv-wiki-txt{display:block}
  .hv-wiki a{display:none} .hv-wiki.open a{display:block}
  .hv-actions{bottom:18px}
  .hv-actions #v-close{padding:12px 24px}
  .holo-mk{width:78px;height:54px} .holo{border-radius:8px}
  .holo.vid span{width:26px;height:26px;font-size:.75rem}
  .lock{width:64px;height:64px}
}

/* les détails n'apparaissent qu'une fois arrivé sur place (pendant le vol : cadre de visée seul) */
.hud-view .hv-head,.hud-view .hv-info{opacity:0;transform:translateY(10px);pointer-events:none;transition:opacity .6s ease,transform .6s ease}
.hud-view.arrived .hv-head{opacity:1;transform:none;pointer-events:auto}
.hud-view.arrived .hv-info{opacity:1;transform:none;pointer-events:auto;transition-delay:.25s}
@media (prefers-reduced-motion:reduce){ .hud-view .hv-head,.hud-view .hv-info{transition:none;transform:none} }

/* ================= MOBILE : écran d'accueil du globe ================= */
@media (max-width:620px){
  .globepage .maplibregl-ctrl-top-right{display:none}                 /* on zoome en pinçant */
  /* les 6 continents visibles d'un coup : 2 rangées de 3, libellés compacts (pas de défilement caché) */
  .globepage .filters{left:10px;right:10px;bottom:32px;max-width:none;display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
  .globepage .filters .chip{justify-content:center;gap:6px;padding:8px 6px;font-size:.7rem;white-space:nowrap;min-width:0}
  .globepage .filters .chip .lb{font-size:0}
  .globepage .filters .chip .lb::after{content:attr(data-short);font-size:.7rem}
  .globepage .intro{bottom:124px;max-width:calc(100vw - 40px);width:max-content;text-align:center;font-size:.6rem;letter-spacing:.12em;padding:8px 14px}
  .globepage .maplibregl-ctrl-bottom-right .maplibregl-ctrl-attrib{font-size:9px}
}
@media (max-width:620px){
  #viewer .vw-frame{width:94vw;padding:4px}
  #viewer .vw-x{top:-46px;right:2px}                 /* bouton fermer : entièrement dans l'écran, au-dessus du cadre */
  #viewer .vw-kind{left:6px;top:-40px}
  #viewer .vw-nav{bottom:-54px}
  #viewer .vw-nav button{width:40px;height:40px}
}

/* ================= colonne gauche du pare-brise (en-tête + infos) ================= */
.hv-col{position:absolute;left:clamp(16px,2.4vw,34px);top:84px;bottom:96px;width:min(420px,44vw);display:flex;flex-direction:column;gap:18px;pointer-events:none}
.hud-view .hv-col .hv-block{position:static;max-width:none}
.hv-col .hv-head{flex:none}
.hv-col .hv-info{flex:0 1 auto;min-height:0;overflow-y:auto;max-width:380px;padding-right:4px;scrollbar-width:thin;scrollbar-color:rgba(124,245,255,.35) transparent}
.hv-title.long{font-size:clamp(1.6rem,2.8vw,2.3rem);line-height:1.02}
body.chronopage .hv-col{bottom:240px}
@media (max-width:620px){
  .hv-col{display:contents}
  .hud-view .hv-col .hv-block{position:absolute}
  .hv-col .hv-info{max-width:none;padding-right:0}
  .hv-title.long{font-size:1.45rem}
}
/* sélecteur : plusieurs étapes au même endroit */
.pick{position:fixed;z-index:1300;min-width:230px;max-width:min(320px,calc(100vw - 20px));padding:6px;border-radius:14px;background:rgba(4,10,22,.9);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border:1px solid rgba(124,245,255,.4);box-shadow:0 30px 70px -30px #000,0 0 40px -20px #7CF5FF}
.pick-h{font-family:var(--mono);font-size:.56rem;letter-spacing:.16em;text-transform:uppercase;color:#7CF5FF;padding:6px 8px 8px}
.pick button{display:flex;align-items:center;gap:10px;width:100%;text-align:left;background:none;border:0;border-radius:9px;padding:9px 8px;color:#eaf6ff;cursor:pointer;font-family:var(--font)}
.pick button:hover{background:rgba(124,245,255,.14)}
.pick button i{flex:none;width:9px;height:9px;border-radius:50%;background:var(--acc);box-shadow:0 0 10px var(--acc)}
.pick button b{display:block;font-size:.88rem}.pick button small{display:block;font-family:var(--mono);font-size:.6rem;color:#a9c9d6;margin-top:2px}
.hc-more{margin-top:6px;font-family:var(--mono);font-size:.56rem;letter-spacing:.06em;color:#7CF5FF}

.pick{max-height:min(60vh,420px);overflow-y:auto}
@media (max-width:620px){
  /* souvenir long : replié sur 4 lignes, on touche pour déplier (sinon il masque le film et Wikipédia) */
  .hv-note{position:relative;display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden}
  .hv-note.open{display:block}
  .hv-note.more{padding-right:30px;cursor:pointer}
  .hv-note.more::after{content:"▾";position:absolute;right:11px;top:7px;color:var(--hud);font-size:.8rem}
  .hv-note.more.open::after{transform:rotate(180deg)}
}
@media (max-width:620px){ .hv-note:not(.open){padding-bottom:0;border-bottom:8px solid transparent} }

/* lien du film : champ d'aide + états */
.fhelp{display:block;margin-top:5px;font-size:.72rem;line-height:1.35;color:var(--muted)}
.hud-panel .fhelp{color:#8fa6b8}
.hv-film.nolink{cursor:default;border-style:dashed;border-color:rgba(124,245,255,.2)}
.badge-link{text-decoration:none;margin-left:4px}
.badge-link:hover{text-decoration:underline}

/* sélecteur de page du site (lien du film) */
.pp-field[hidden]{display:none}
.pp{top:auto;margin-top:4px;max-height:230px}
.pp-item{display:flex;align-items:center;justify-content:space-between;gap:10px}
.pp-item span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pp-type{flex:none;font-style:normal;font-size:.58rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;opacity:.65;border:1px solid currentColor;border-radius:5px;padding:1px 5px}
.pp-empty{cursor:default;opacity:.7}
.pp-warn{color:#f59e0b}

/* lien du film : sélecteur + édition sur place dans la Liste */
.ac-wrap{position:relative}
.pp-item.cur{background:var(--accent-soft);color:var(--accent)}
.td-film{min-width:230px}
.lk-add,.lk-x,.lk-all{font-family:var(--font);cursor:pointer;border-radius:6px;font-size:.66rem;font-weight:800;letter-spacing:.03em;line-height:1}
.lk-add{border:1px dashed var(--line);background:none;color:var(--muted);padding:3px 7px;text-transform:uppercase}
.lk-add:hover{border-color:var(--accent);color:var(--accent)}
.lk-x{border:0;background:none;color:var(--faint);padding:2px 4px;margin-left:2px}
.lk-x:hover{color:var(--danger)}
.lk-all{display:block;margin-top:6px;border:1px solid var(--accent);background:var(--accent);color:#fff;padding:5px 9px}
.lk-all:hover{filter:brightness(1.1)}
.lk-edit{margin-top:5px}
.lk-input{width:100%;min-width:220px;font-family:var(--font);font-size:.82rem;padding:7px 10px;border:1px solid var(--accent);border-radius:8px;outline:none;background:var(--surface);color:var(--ink)}
.lk-ac{position:fixed;right:auto;top:auto;margin-top:0;z-index:2000}
/* fiche visiteur : film sans lien = simple ligne, pas un bouton */
.hv-filmline{margin:0;padding:2px 0 2px 14px;border-left:2px solid rgba(124,245,255,.35);display:flex;flex-direction:column;gap:3px;text-shadow:0 1px 6px rgba(0,0,0,.8)}
.hv-filmline small{font-family:var(--mono);font-size:.56rem;letter-spacing:.16em;text-transform:uppercase;color:#a9c9d6}
.hv-filmline b{font-weight:700;font-size:.92rem;color:#fff}
.chk[hidden]{display:none}
.badge-site,.lk-add{white-space:nowrap;display:inline-block}

/* version texte de la page (référencement + lecteurs d'écran) : présente dans le HTML, masquée à l'écran */
.seo-content{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}

/* Liste : filtres « il manque… » */
.lfilters{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:0 0 14px}
.lf-lab{font-size:.74rem;font-weight:700;color:var(--muted);margin-right:2px}
.lf-chip,.lf-clear{font-family:var(--font);font-size:.76rem;font-weight:600;border-radius:100px;padding:6px 12px;cursor:pointer;transition:border-color .15s,background .15s,color .15s}
.lf-chip{border:1px solid var(--line);background:var(--surface);color:var(--ink2)}
.lf-chip b{font-weight:800;color:var(--faint);margin-left:3px;font-variant-numeric:tabular-nums}
.lf-chip:hover{border-color:var(--accent)}
.lf-chip.on{background:var(--ink);border-color:var(--ink);color:#fff}
.lf-chip.on b{color:rgba(255,255,255,.65)}
.lf-chip:disabled{opacity:.45;cursor:default;border-color:var(--line)}
.lf-clear{border:0;background:none;color:var(--accent);padding:6px 4px}
.lf-clear:hover{text-decoration:underline}

/* lecteur : vidéo non intégrable sur place (Dailymotion sans identifiant de lecteur) → lien vers la plateforme */
#viewer .vw-ext{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:#05070d center/cover no-repeat;text-decoration:none}
#viewer .vw-ext::before{content:"";position:absolute;inset:0;background:rgba(3,6,14,.55)}
#viewer .vw-ext span{position:relative;font-family:var(--mono);font-size:.78rem;letter-spacing:.12em;text-transform:uppercase;color:#fff;padding:14px 22px;border-radius:999px;border:1px solid rgba(124,245,255,.7);background:rgba(4,10,22,.7);box-shadow:0 0 30px -8px #7CF5FF;transition:background .15s}
#viewer .vw-ext:hover span{background:rgba(124,245,255,.22)}

/* ================= accueil visiteurs : encadré, aide, chargement, liste de secours ================= */
.welcome{position:fixed;left:18px;bottom:96px;z-index:1085;width:min(400px,calc(100vw - 36px));padding:20px 22px 18px;border-radius:18px;color:#eaf6ff;
  background:rgba(4,10,22,.78);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border:1px solid rgba(124,245,255,.35);box-shadow:0 30px 70px -30px #000,0 0 50px -22px #7CF5FF;
  opacity:0;transform:translateY(12px);transition:opacity .35s,transform .35s}
.welcome.in{opacity:1;transform:none}
.welcome h2{font-family:"Fraunces",Georgia,serif;font-weight:500;font-size:1.45rem;line-height:1.1;margin:0 34px 10px 0;color:#fff}
.welcome p{margin:0 0 10px;font-size:.9rem;line-height:1.55}
.welcome .wl-how{color:#a9c9d6}
.welcome.how .wl-how{color:#fff;background:rgba(124,245,255,.12);border-left:2px solid #7CF5FF;padding:8px 10px;border-radius:0 8px 8px 0}
.wl-x{position:absolute;top:12px;right:12px;width:30px;height:30px;border-radius:50%;border:1px solid rgba(124,245,255,.35);background:rgba(4,10,22,.6);color:#fff;cursor:pointer;font-size:.8rem}
.wl-x:hover{background:rgba(124,245,255,.2)}
.wl-btns{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.wl-btn{font-family:var(--mono);font-size:.66rem;letter-spacing:.12em;text-transform:uppercase;color:#d8fbff;background:rgba(4,10,22,.55);border:1px solid rgba(124,245,255,.45);border-radius:999px;padding:11px 16px;cursor:pointer;transition:background .15s,border-color .15s}
.wl-btn:hover{background:rgba(124,245,255,.16);border-color:#7CF5FF}
.wl-btn.primary{background:#7CF5FF;color:#04212a;border-color:#7CF5FF;box-shadow:0 0 24px -8px #7CF5FF}
.wl-btn.primary:hover{background:#fff}
.wl-help{position:fixed;left:18px;bottom:96px;z-index:1085;width:40px;height:40px;border-radius:50%;border:1px solid rgba(124,245,255,.45);background:rgba(4,10,22,.6);backdrop-filter:blur(12px);color:#7CF5FF;font-family:var(--mono);font-size:1rem;cursor:pointer}
.wl-help:hover{background:rgba(124,245,255,.2);color:#fff}
body.hv-open .welcome,body.hv-open .wl-help{display:none}
@media (max-width:620px){
  .welcome{left:10px;right:10px;width:auto;bottom:118px;padding:16px 16px 14px}
  .welcome h2{font-size:1.2rem} .welcome p{font-size:.84rem;line-height:1.45}
  .welcome .wl-desk{display:none}
  .wl-btn{padding:10px 13px;font-size:.6rem}
  .wl-help{bottom:118px;left:10px}
}
/* chargement */
.loading{position:fixed;left:50%;top:50%;transform:translate(-50%,-50%);z-index:1070;display:none;align-items:center;gap:12px;font-family:var(--mono);font-size:.7rem;letter-spacing:.18em;text-transform:uppercase;color:#a9c9d6;pointer-events:none}
body.globe-loading .loading{display:flex}
.ld-ring{width:18px;height:18px;border-radius:50%;border:2px solid rgba(124,245,255,.25);border-top-color:#7CF5FF;animation:hvspin 1s linear infinite}
/* liste de secours : le globe ne démarre pas */
body.nogl .loading,body.nogl #globe,body.nogl .globe-vignette,body.nogl .maplibregl-ctrl-top-right,body.nogl .hud-readout,body.nogl #filters,body.nogl #intro,body.nogl .welcome,body.nogl .wl-help{display:none!important}
body.nogl{overflow:auto}
body.nogl .fallback{position:relative;z-index:5;max-width:860px;margin:96px auto 0;padding:0 20px}
.fb-in{background:rgba(4,10,22,.72);border:1px solid rgba(124,245,255,.35);border-radius:16px;padding:20px 22px;color:#eaf6ff}
.fb-in h2{font-family:"Fraunces",Georgia,serif;font-weight:500;font-size:1.5rem;margin:0 0 8px;color:#fff}
.fb-in p{margin:0 0 14px;line-height:1.5;color:#c9dbe4}
body.nogl .seo-content{position:static;width:auto;height:auto;margin:20px auto 60px;padding:0 20px;overflow:visible;clip:auto;clip-path:none;white-space:normal;max-width:860px;color:#eaf6ff;position:relative;z-index:5}
body.nogl .seo-content h1{font-family:"Fraunces",Georgia,serif;font-weight:500;font-size:2rem;margin:10px 0 8px;color:#fff}
body.nogl .seo-content h2{font-family:var(--mono);font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;color:#7CF5FF;margin:32px 0 10px;padding-bottom:8px;border-bottom:1px solid rgba(124,245,255,.25)}
body.nogl .seo-content ul{list-style:none;margin:0;padding:0}
body.nogl .seo-content li{padding:12px 0;border-bottom:1px solid rgba(255,255,255,.07)}
body.nogl .seo-content h3{margin:0 0 3px;font-size:1.05rem;color:#fff}
body.nogl .seo-content li p{margin:0;font-size:.88rem;line-height:1.5;color:#c9dbe4}
body.nogl .seo-content li p:first-of-type{font-family:var(--mono);font-size:.7rem;color:#a9c9d6}
body.nogl .seo-content a{color:#7CF5FF}
body.nogl .hud-view,body.nogl .hover-card,body.nogl .lock,body.nogl .holo-mk{display:none!important}
body.nogl .seo-content{margin-top:0}
body.nogl .fallback{margin-top:92px}
.wl-mob{display:none}
@media (max-width:620px){ .wl-mob{display:inline} }