/* ============ Escapa2 — design system ============ */
:root{
  --bg:#061019; --bg2:#0a1a26; --panel:rgba(13,29,42,.92); --panel2:rgba(17,37,53,.86);
  --line:rgba(120,190,220,.16); --line2:rgba(120,190,220,.28);
  --tx:#e8f4fa; --tx2:#8fb0c4; --tx3:#5d7f94;
  --teal:#2fd4c2; --teal-d:#0f8f84; --sea:#3f8fd4; --sea-d:#2b6aa3;
  --moss:#4fae7a; --moss-d:#2f7d53; --clay:#a9764f; --sand:#d8b183;
  --coral:#4fae7a;   /* accent principal = vert mousse (remplace l'orange) */
  --amber:#d8b183;   /* logements = sable/marron clair */
  --violet:#6f93c4;  /* bleu acier, désaturé */
  --ok:#3fae7a; --warn:#d8a24a; --err:#e0576b;
  --r:16px; --r2:12px; --r3:22px;
  --shadow:0 18px 50px -12px rgba(0,0,0,.75);
  --spring:cubic-bezier(.22,1.2,.32,1);
  --ease:cubic-bezier(.4,0,.2,1);
  --sat:env(safe-area-inset-top,0px); --sab:env(safe-area-inset-bottom,0px);
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{height:100%;margin:0}
body{
  background:var(--bg);color:var(--tx);
  font:15px/1.45 ui-sans-serif,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",sans-serif;
  overscroll-behavior:none;
}
/* SVG d'icônes uniquement — ne JAMAIS toucher aux SVG de Leaflet (tracé du trajet) */
button svg,.icon-btn svg,.pin svg,.poi-pin svg,.lodge-pin svg,.leg-icon svg,.logo-mark svg,
.alert .ai,.mode-row svg,.pill svg,.all-clear svg,.empty svg,.tm-play svg,.fab svg,.logo-mark svg{
  width:100%;height:100%;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.hidden{display:none!important}
button,input,select,textarea{font:inherit;color:inherit}
::-webkit-scrollbar{width:8px;height:8px}
::-webkit-scrollbar-thumb{background:var(--line2);border-radius:8px}

/* ---------- login ---------- */
.login-wrap{
  position:fixed;inset:0;display:grid;place-items:center;padding:24px;
  background:
    radial-gradient(1100px 700px at 15% -10%,rgba(47,212,194,.16),transparent 60%),
    radial-gradient(900px 600px at 100% 110%,rgba(169,118,79,.16),transparent 60%),
    linear-gradient(160deg,#061019,#0b1e2b 60%,#061019);
}
.login-card{
  width:100%;max-width:380px;background:var(--panel);border:1px solid var(--line);
  border-radius:var(--r3);padding:30px 26px 26px;box-shadow:var(--shadow);backdrop-filter:blur(18px);
  animation:pop .5s var(--spring) both;
}
@keyframes pop{from{opacity:0;transform:translateY(18px) scale(.96)}to{opacity:1;transform:none}}
.logo-mark{width:56px;height:56px;margin:0 auto 14px;color:var(--teal)}
.logo-mark .lm-c{stroke-dasharray:135;stroke-dashoffset:135;animation:draw 1.1s .1s var(--ease) forwards}
.logo-mark .lm-p{stroke-dasharray:60;stroke-dashoffset:60;animation:draw 1s .5s var(--ease) forwards}
.logo-mark .lm-d{fill:var(--sand);stroke:none;opacity:0;animation:fade .5s .95s forwards}
@keyframes draw{to{stroke-dashoffset:0}}
@keyframes fade{to{opacity:1}}
.login-card h1{margin:0;text-align:center;font-size:26px;letter-spacing:.5px}
.login-card .sub{margin:4px 0 22px;text-align:center;color:var(--tx3);font-size:13px}
.field{display:block;margin-bottom:14px}
.field>span{display:block;font-size:12px;color:var(--tx2);margin-bottom:6px;letter-spacing:.3px;text-transform:uppercase}
.field input,.field select,.field textarea{
  width:100%;background:rgba(6,16,25,.7);border:1px solid var(--line);border-radius:var(--r2);
  padding:12px 13px;outline:none;transition:border-color .2s,box-shadow .2s,background .2s;
}
.field input:focus,.field select:focus,.field textarea:focus{
  border-color:var(--teal);box-shadow:0 0 0 3px rgba(47,212,194,.16);background:rgba(6,16,25,.95)}
textarea{resize:vertical;min-height:64px}
.actor-pick{display:flex;gap:8px}
.seg{flex:1;padding:11px;border-radius:var(--r2);border:1px solid var(--line);background:rgba(6,16,25,.6);
  cursor:pointer;transition:.22s var(--ease);color:var(--tx2)}
.seg.active{background:linear-gradient(180deg,rgba(47,212,194,.22),rgba(47,212,194,.08));border-color:var(--teal);color:var(--tx);
  box-shadow:0 0 0 3px rgba(47,212,194,.1) inset}
.btn{border:1px solid var(--line2);background:rgba(255,255,255,.04);border-radius:var(--r2);padding:11px 16px;
  cursor:pointer;transition:transform .16s var(--spring),background .2s,border-color .2s;font-weight:600}
.btn:hover{background:rgba(255,255,255,.08)}
.btn:active{transform:scale(.96)}
.btn.primary{background:linear-gradient(180deg,var(--teal),var(--teal-d));border-color:transparent;color:#04222a}
.btn.primary:hover{filter:brightness(1.08)}
.btn.ghost{background:transparent}
.btn.danger{border-color:rgba(255,92,108,.5);color:#ff9aa4}
.btn.sm{padding:7px 11px;font-size:13px;border-radius:10px}
.btn.full{width:100%;margin-top:6px}
.err{color:var(--err);font-size:13px;min-height:18px;margin:10px 0 0;text-align:center}

/* ---------- map ---------- */
#map{position:fixed;inset:0;background:#04101a;z-index:1}
.leaflet-container{background:#04101a;font-family:inherit}
.leaflet-control-attribution{background:rgba(6,16,25,.72)!important;color:var(--tx3)!important;font-size:10px!important}
.leaflet-control-attribution a{color:var(--tx2)!important}
.phtiles{filter:var(--tile-filter,none)}
/* L'attribut hidden est écrasé par toute règle d'auteur qui pose un display.
   Sans ceci, une pastille en display:grid reste visible même avec hidden :
   c'est ce qui laissait une pastille rouge vide en permanence dans la barre. */
[hidden]{display:none !important}

/* --- sélecteur de fond de carte --- */
.style-list{display:flex;flex-direction:column;gap:9px}
.style-item{display:flex;align-items:center;gap:12px;width:100%;text-align:left;cursor:pointer;
  border:1px solid var(--line);background:rgba(255,255,255,.03);border-radius:var(--r);padding:11px 13px;
  transition:.22s var(--ease)}
.style-item:hover{border-color:var(--line2);background:rgba(255,255,255,.06)}
.style-item.active{border-color:var(--teal);background:rgba(47,212,194,.08)}
.style-txt{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.style-swatch{width:44px;height:44px;flex:0 0 auto;border-radius:11px;border:1px solid var(--line2)}
.sw-tropique{background:linear-gradient(140deg,#1d6b4a,#3f9c62 42%,#1f7fa8 72%,#0d3f63)}
.sw-aquarelle{background:linear-gradient(140deg,#8fc4e8,#bcdcaa 48%,#7cae72)}
.sw-relief{background:linear-gradient(140deg,#cfe4f2,#a9cf9a 50%,#89b97e)}
.sw-topo{background:linear-gradient(140deg,#8fc4e8,#bcdcaa 48%,#7cae72)}
.sw-satellite{background:linear-gradient(140deg,#123b2a,#2f6b45 45%,#1d5a7a 75%,#0d3550)}
.sw-topo_open{background:linear-gradient(140deg,#eef4e0,#cfe0b4 50%,#a7c68f)}
.sw-clair{background:linear-gradient(140deg,#eaf1f6,#cfe0ee 50%,#dfe8d0)}
.sw-bathymetrie{background:linear-gradient(140deg,#052033,#0a3a56 45%,#12658c 80%,#1d8fb0)}
.sw-nuit{background:linear-gradient(140deg,#14181b,#2a2f34 60%,#3d4449)}

/* --- marqueurs nommés (remplace les pastilles à initiales) --- */
.mapname{position:absolute;left:0;top:0;display:flex;align-items:center;gap:6px;
  transform:translate(-50%,-50%);background:rgba(7,19,28,.92);backdrop-filter:blur(5px);
  border:1.5px solid var(--c);border-radius:11px;padding:3px 9px 3px 7px;
  font-size:11.5px;font-weight:700;color:var(--tx);white-space:nowrap;
  box-shadow:0 6px 18px rgba(0,0,0,.66);transition:transform .22s var(--spring);cursor:pointer}
.mapname:hover{transform:translate(-50%,-50%) scale(1.12)}
.mapname i{width:9px;height:9px;border-radius:50%;background:var(--c);flex:0 0 auto;
  box-shadow:0 0 0 3px rgba(255,255,255,.13)}
.mapname.first::after{content:"";position:absolute;inset:-5px;border-radius:inherit;
  border:1.5px solid var(--c);opacity:.6;animation:pulseRing 2.6s var(--ease) infinite;pointer-events:none}
@keyframes pulseRing{0%{transform:scale(1);opacity:.6}100%{transform:scale(1.38);opacity:0}}

/* --- étiquette de trajet : mode · durée · prix --- */
.legbadge{position:absolute;left:0;top:0;transform:translate(-50%,-50%);
  display:flex;flex-direction:column;align-items:center;line-height:1.18;
  background:rgba(6,16,25,.9);backdrop-filter:blur(5px);border:1px solid var(--c);
  border-radius:9px;padding:3px 8px;box-shadow:0 5px 16px rgba(0,0,0,.6);
  white-space:nowrap;transition:transform .2s var(--spring);cursor:pointer}
.legbadge:hover{transform:translate(-50%,-50%) scale(1.14)}
.legbadge b{font-size:10.5px;font-weight:700;color:var(--c);letter-spacing:.2px;font-variant-numeric:tabular-nums}
.legbadge span{font-size:10px;color:var(--tx3);font-variant-numeric:tabular-nums}
.leaflet-overlay-pane path{filter:drop-shadow(0 .5px 2px rgba(0,0,0,.85))}
.flow-line{animation:flow 2.6s linear infinite}
@keyframes flow{to{stroke-dashoffset:-40}}
.leaflet-bar a{background:rgba(10,26,38,.94)!important;color:var(--tx)!important;border-color:var(--line)!important}

.pin{position:relative;display:grid;place-items:center;width:38px;height:38px;border-radius:50% 50% 50% 6px;
  transform:rotate(-45deg);border:2px solid rgba(255,255,255,.85);
  box-shadow:0 6px 16px rgba(0,0,0,.6);transition:transform .25s var(--spring)}
.pin>span{transform:rotate(45deg);width:17px;height:17px;display:grid;place-items:center;color:#04222a;font-weight:800;font-size:12px}
.pin:hover{transform:rotate(-45deg) scale(1.18)}
.pin.pulse::after{content:"";position:absolute;inset:-6px;border-radius:inherit;border:2px solid currentColor;opacity:.7;
  animation:ping 2.4s var(--ease) infinite}
@keyframes ping{0%{transform:scale(.8);opacity:.7}100%{transform:scale(1.7);opacity:0}}
.pin.small{width:30px;height:30px}
.poi-pin{display:grid;place-items:center;width:26px;height:26px;border-radius:9px;background:rgba(8,22,33,.94);
  border:1.5px solid currentColor;box-shadow:0 4px 12px rgba(0,0,0,.55);transition:transform .22s var(--spring)}
.poi-pin:hover{transform:scale(1.25)}
.poi-pin svg{width:15px;height:15px!important;stroke-width:2;fill:none;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round}
.poi-pin.mini{width:17px;height:17px;border-radius:5px;opacity:.6}
.poi-pin.mini svg{width:10px;height:10px}
.lodge-pin{display:grid;place-items:center;width:30px;height:30px;border-radius:9px;background:rgba(255,194,71,.16);
  border:1.5px solid var(--amber);color:var(--amber);box-shadow:0 4px 14px rgba(0,0,0,.55)}
.lodge-pin svg{width:16px;height:16px!important;fill:none;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round}
.label-chip{background:rgba(6,16,25,.9);border:1px solid var(--line);border-radius:9px;padding:2px 7px;font-size:11px;
  color:var(--tx);white-space:nowrap;box-shadow:0 4px 12px rgba(0,0,0,.5)}

/* ---------- topbar ---------- */
.topbar{position:fixed;top:calc(env(safe-area-inset-top,0px) + 10px);left:10px;right:10px;z-index:20;
  display:flex;align-items:center;gap:10px;pointer-events:none}
.topbar>*{pointer-events:auto}
.icon-btn{position:relative;width:42px;height:42px;flex:0 0 auto;border-radius:13px;border:1px solid var(--line);
  background:var(--panel);backdrop-filter:blur(14px);display:grid;place-items:center;cursor:pointer;
  box-shadow:0 8px 22px rgba(0,0,0,.45);transition:transform .18s var(--spring),border-color .2s,background .2s;padding:11px}
.icon-btn:hover{border-color:var(--line2);background:var(--panel2)}
.icon-btn:active{transform:scale(.92)}
.badge{position:absolute;top:-5px;right:-5px;min-width:19px;height:19px;border-radius:10px;background:var(--err);color:#fff;
  font-size:11px;font-weight:700;display:grid;place-items:center;padding:0 5px;animation:pop .3s var(--spring)}
.badge.warnb{background:var(--warn);color:#3a2400}
.trip-title{flex:1;min-width:0;display:flex}
#tripSelect{width:100%;background:var(--panel);backdrop-filter:blur(14px);border:1px solid var(--line);
  border-radius:13px;padding:11px 13px;font-weight:600;font-size:14px;appearance:none;cursor:pointer;
  box-shadow:0 8px 22px rgba(0,0,0,.45);text-overflow:ellipsis}
.actor-btn{font-weight:800;color:var(--teal)}

/* ---------- time machine ---------- */
.timemachine{position:fixed;left:10px;right:10px;z-index:19;bottom:calc(env(safe-area-inset-bottom,0px) + 86px);
  display:flex;align-items:center;gap:10px;background:var(--panel);backdrop-filter:blur(14px);border:1px solid var(--line);
  border-radius:16px;padding:9px 12px;box-shadow:var(--shadow);
  transform:translateY(140%);transition:transform .45s var(--spring);opacity:0}
.timemachine.show{transform:none;opacity:1}
.tm-play{width:34px;height:34px;flex:0 0 auto;border-radius:11px;border:1px solid var(--line2);background:rgba(47,212,194,.12);
  color:var(--teal);display:grid;place-items:center;cursor:pointer;padding:8px;transition:transform .18s var(--spring)}
.tm-play:active{transform:scale(.9)}
.tm-track{flex:1;min-width:0}
.tm-track input[type=range]{width:100%;-webkit-appearance:none;height:22px;background:transparent;cursor:pointer}
.tm-track input[type=range]::-webkit-slider-runnable-track{height:5px;border-radius:5px;
  background:linear-gradient(90deg,var(--teal) var(--fill,0%),rgba(255,255,255,.13) var(--fill,0%))}
.tm-track input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:17px;height:17px;border-radius:50%;
  background:#fff;border:3px solid var(--teal);margin-top:-6px;box-shadow:0 2px 8px rgba(0,0,0,.6);transition:transform .15s}
.tm-track input[type=range]:active::-webkit-slider-thumb{transform:scale(1.2)}
.tm-track input[type=range]::-moz-range-track{height:5px;border-radius:5px;background:rgba(255,255,255,.13)}
.tm-track input[type=range]::-moz-range-progress{height:5px;border-radius:5px;background:var(--teal)}
.tm-track input[type=range]::-moz-range-thumb{width:15px;height:15px;border:3px solid var(--teal);background:#fff;border-radius:50%}
.tm-label{display:flex;justify-content:space-between;font-size:11.5px;color:var(--tx2);letter-spacing:.2px}
#tmCost{color:var(--teal);font-weight:700;font-variant-numeric:tabular-nums}

/* ---------- legend ---------- */
.legend{position:fixed;right:10px;z-index:18;top:calc(env(safe-area-inset-top,0px) + 62px);display:flex;flex-direction:column;
  gap:7px;align-items:flex-end}
.chip{border:1px solid var(--line);background:var(--panel);backdrop-filter:blur(12px);border-radius:20px;padding:6px 12px;
  font-size:12px;cursor:pointer;color:var(--tx3);transition:.22s var(--ease);box-shadow:0 6px 18px rgba(0,0,0,.4)}
.chip.on{color:#04222a;background:linear-gradient(180deg,var(--teal),var(--teal-d));border-color:transparent;font-weight:700}

/* ---------- fab ---------- */
.fab{position:fixed;right:14px;z-index:21;bottom:calc(env(safe-area-inset-bottom,0px) + 22px);width:58px;height:58px;
  border-radius:20px;border:none;background:linear-gradient(150deg,var(--moss),var(--moss-d));color:#fff;display:grid;place-items:center;
  cursor:pointer;box-shadow:0 14px 34px -8px rgba(79,174,122,.65);padding:17px;
  transition:transform .22s var(--spring),box-shadow .25s}
.fab:hover{transform:translateY(-3px) rotate(90deg)}
.fab:active{transform:scale(.9) rotate(90deg)}

/* ---------- sheet ---------- */
.sheet{position:fixed;left:0;right:0;bottom:0;z-index:30;background:var(--panel);backdrop-filter:blur(22px);
  border-top:1px solid var(--line2);border-radius:26px 26px 0 0;box-shadow:var(--shadow);display:flex;flex-direction:column;
  height:82vh;transform:translateY(calc(100% - 62px - var(--sab)));transition:transform .48s var(--spring);
  padding-bottom:var(--sab)}
.sheet[data-state="open"]{transform:translateY(0)}
.sheet[data-state="mid"]{transform:translateY(52%)}
.sheet-grip{padding:9px 0 5px;display:grid;place-items:center;cursor:grab;touch-action:none}
.sheet-grip span{width:42px;height:4.5px;border-radius:4px;background:var(--line2)}
.tabs{display:flex;gap:4px;padding:2px 10px 0;border-bottom:1px solid var(--line);overflow-x:auto;scrollbar-width:none}
.tabs::-webkit-scrollbar{display:none}
.tabs button{position:relative;border:none;background:none;padding:11px 13px;color:var(--tx3);font-size:13.5px;font-weight:600;
  cursor:pointer;white-space:nowrap;transition:color .2s}
.tabs button.active{color:var(--teal)}
.tabs button.active::after{content:"";position:absolute;left:12px;right:12px;bottom:-1px;height:2.5px;border-radius:3px;
  background:var(--teal);animation:slidein .32s var(--spring)}
@keyframes slidein{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.tab-dot{position:absolute;top:7px;right:6px;width:7px;height:7px;border-radius:50%;background:var(--err);animation:ping 2s infinite}
.panel{flex:1;overflow-y:auto;padding:14px 14px 120px;-webkit-overflow-scrolling:touch}
.sheet-veil{position:fixed;inset:0;background:rgba(2,8,13,.5);z-index:25;opacity:0;pointer-events:none;transition:opacity .35s}
.sheet-veil.on{opacity:1;pointer-events:auto}
body.sheet-open .timemachine,body.sheet-open .legend,body.sheet-open .fab{opacity:0;pointer-events:none;transition:.3s}

/* ---------- cards ---------- */
.card{background:linear-gradient(180deg,rgba(18,38,54,.9),rgba(13,29,42,.86));border:1px solid var(--line);
  border-radius:var(--r);padding:14px;margin-bottom:11px;box-shadow:0 8px 24px -14px rgba(0,0,0,.9);
  animation:rise .42s var(--spring) both;animation-delay:calc(var(--i,0)*45ms)}
@keyframes rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.card.tap{cursor:pointer;transition:border-color .2s,transform .2s var(--spring)}
.card.tap:hover{border-color:var(--line2);transform:translateY(-2px)}
.card-head{display:flex;align-items:flex-start;gap:11px}
.dot{width:11px;height:11px;border-radius:50%;flex:0 0 auto;margin-top:5px;box-shadow:0 0 0 4px rgba(255,255,255,.06)}
.card h3{margin:0;font-size:15.5px;font-weight:700;letter-spacing:.2px}
.card .meta{color:var(--tx3);font-size:12px;margin-top:2px}
.card .body{margin-top:9px;color:var(--tx2);font-size:13px}
.row{display:flex;align-items:center;gap:9px}
.between{display:flex;align-items:center;justify-content:space-between;gap:10px}
.pill{display:inline-flex;align-items:center;gap:5px;font-size:11.5px;border:1px solid var(--line);border-radius:20px;
  padding:3px 9px;color:var(--tx2);background:rgba(255,255,255,.03)}
.pill svg{width:13px;height:13px}
.pill.accent{border-color:rgba(47,212,194,.4);color:var(--teal)}
.pill.amber{border-color:rgba(255,194,71,.4);color:var(--amber)}
.pill.err{border-color:rgba(255,92,108,.45);color:var(--err)}
.pill.warn{border-color:rgba(255,179,71,.45);color:var(--warn)}
.sec-title{display:flex;align-items:center;gap:8px;margin:18px 2px 10px;font-size:12px;letter-spacing:1.3px;
  text-transform:uppercase;color:var(--tx3);font-weight:700}
.sec-title::after{content:"";flex:1;height:1px;background:var(--line)}
.sec-title:first-child{margin-top:4px}
.empty{text-align:center;color:var(--tx3);padding:34px 16px;font-size:13.5px}
.empty svg{width:44px;height:44px;margin:0 auto 10px;opacity:.4}
.acts{display:flex;gap:7px;margin-top:11px;flex-wrap:wrap}

/* timeline */
.tl{position:relative;padding-left:26px}
.tl::before{content:"";position:absolute;left:8px;top:6px;bottom:6px;width:2px;border-radius:2px;
  background:linear-gradient(180deg,var(--teal),var(--sea));opacity:.35}
.tl-node{position:absolute;left:2px;width:14px;height:14px;border-radius:50%;border:2.5px solid var(--bg);
  box-shadow:0 0 0 1.5px currentColor}
.tl-item{position:relative;margin-bottom:16px}
.leg{position:relative;margin:0 0 16px 4px;padding-left:26px}
.leg::before{content:"";position:absolute;left:6px;top:0;bottom:0;width:2px;background:repeating-linear-gradient(180deg,var(--line2) 0 5px,transparent 5px 10px)}
.leg-icon{position:absolute;left:-3px;top:0;width:20px;height:20px;border-radius:7px;background:var(--bg2);
  border:1px solid var(--line2);display:grid;place-items:center;padding:3.5px;color:var(--tx2)}
.leg-inner{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;
  border:1px dashed var(--line);border-radius:12px;padding:9px 12px;transition:border-color .2s,background .2s}
.leg-inner:hover{border-color:var(--line2);background:rgba(255,255,255,.03)}
.leg-main{font-size:13.5px;font-weight:600}
.leg-sub{font-size:11.5px;color:var(--tx3);margin-top:2px}

/* stats */
.stat-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.stat{background:linear-gradient(180deg,rgba(18,38,54,.9),rgba(13,29,42,.85));border:1px solid var(--line);
  border-radius:var(--r);padding:14px;animation:rise .45s var(--spring) both;animation-delay:calc(var(--i,0)*55ms)}
.stat .k{font-size:11px;color:var(--tx3);text-transform:uppercase;letter-spacing:.8px}
.stat .v{font-size:23px;font-weight:800;margin-top:5px;font-variant-numeric:tabular-nums;letter-spacing:-.5px}
.stat .s{font-size:11.5px;color:var(--tx3);margin-top:2px}
.stat.wide{grid-column:span 2}
.bar{height:9px;border-radius:6px;background:rgba(255,255,255,.09);overflow:hidden;margin-top:11px}
.bar>i{display:block;height:100%;border-radius:6px;background:linear-gradient(90deg,var(--moss),var(--teal));
  width:0;transition:width .9s var(--ease)}
.mode-row{display:flex;align-items:center;gap:10px;padding:8px 0;border-bottom:1px solid var(--line)}
.mode-row:last-child{border-bottom:none}
.mode-row svg{width:17px;height:17px;color:var(--tx2);flex:0 0 auto}
.mode-row .nm{flex:1;font-size:13.5px;text-transform:capitalize}
.mode-row .vl{font-size:13px;font-variant-numeric:tabular-nums;color:var(--tx2)}

/* alerts */
.alert{display:flex;gap:11px;border-radius:var(--r);padding:12px;margin-bottom:9px;border:1px solid;animation:rise .4s var(--spring) both;
  animation-delay:calc(var(--i,0)*40ms);cursor:pointer;transition:transform .18s var(--spring)}
.alert:hover{transform:translateX(3px)}
.alert.error{background:rgba(255,92,108,.09);border-color:rgba(255,92,108,.35)}
.alert.warn{background:rgba(255,179,71,.08);border-color:rgba(255,179,71,.3)}
.alert.info{background:rgba(120,190,220,.07);border-color:var(--line)}
.alert .ai{width:20px;height:20px;flex:0 0 auto;margin-top:1px}
.alert.error .ai{color:var(--err)}.alert.warn .ai{color:var(--warn)}.alert.info .ai{color:var(--tx2)}
.alert .am{font-size:13.5px;line-height:1.45}
.all-clear{text-align:center;padding:34px 16px;color:var(--ok)}
.all-clear svg{width:52px;height:52px;margin:0 auto 12px;stroke-width:1.6;animation:pop .5s var(--spring)}

/* drawer */
.drawer{position:fixed;top:0;bottom:0;left:0;width:min(84vw,340px);z-index:60;background:var(--panel);
  backdrop-filter:blur(22px);border-right:1px solid var(--line2);transform:translateX(-101%);
  transition:transform .42s var(--spring);display:flex;flex-direction:column;padding:calc(env(safe-area-inset-top,0px) + 16px) 16px 16px}
.drawer.open{transform:none}
.drawer-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px}
.drawer-head h2{margin:0;font-size:18px}
/* --- qui suis-je, dans le menu de gauche --- */
.drawer-me{display:flex;align-items:center;gap:11px;padding:11px;border:1px solid var(--line);
  border-radius:var(--r2);background:rgba(255,255,255,.03);margin-bottom:18px}
.avatar{width:44px;height:44px;flex:0 0 auto;border-radius:50%;overflow:hidden;display:grid;place-items:center;
  background:linear-gradient(140deg,var(--teal),#17786f);color:#04161c;font-weight:800;font-size:17px;
  border:1px solid var(--line2)}
.avatar img{width:100%;height:100%;object-fit:cover;display:block;transform:scale(1.08)}
.me-txt{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.me-txt b{font-size:14.5px}
.me-txt .meta{font-size:11px}
.drawer-sec{display:flex;align-items:baseline;justify-content:space-between;gap:8px;
  font-size:11px;letter-spacing:.09em;text-transform:uppercase;color:var(--tx3);font-weight:700;margin-bottom:9px}
.drawer-sec .meta{font-size:10.5px;text-transform:none;letter-spacing:0;color:var(--teal)}
.style-grid{display:grid;grid-template-columns:1fr 1fr;gap:7px;margin-bottom:18px}
.style-pick{display:flex;flex-direction:column;gap:6px;cursor:pointer;text-align:center;
  border:1px solid var(--line);background:rgba(255,255,255,.03);border-radius:12px;padding:7px;
  transition:.2s var(--ease)}
.style-pick:hover{border-color:var(--line2);background:rgba(255,255,255,.06)}
.style-pick.active{border-color:var(--teal);background:rgba(47,212,194,.1)}
.style-pick .style-swatch{width:100%;height:36px;border-radius:8px}
.style-pick span:last-child{font-size:11px;font-weight:600;color:var(--tx2)}
.style-pick.active span:last-child{color:var(--teal)}
.trip-list{flex:1;overflow-y:auto;min-height:60px;margin-bottom:12px}
.trip-item{border:1px solid var(--line);border-radius:var(--r2);padding:12px;margin-bottom:9px;cursor:pointer;
  transition:.22s var(--ease);position:relative;overflow:hidden}
.trip-item:hover{border-color:var(--line2);background:rgba(255,255,255,.04)}
.trip-item.active{border-color:var(--teal);background:rgba(47,212,194,.08)}
.trip-item.active::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--teal)}
.trip-item .tn{font-weight:700;font-size:14px}
.trip-item .td{font-size:11.5px;color:var(--tx3);margin-top:3px}

/* modal */
.modal-wrap{position:fixed;inset:0;z-index:70;background:rgba(2,8,13,.72);backdrop-filter:blur(7px);
  display:none;align-items:flex-end;justify-content:center}
.modal-wrap.open{display:flex;animation:fadein .25s var(--ease)}
@keyframes fadein{from{opacity:0}to{opacity:1}}
.modal{width:min(100%,560px);max-height:92vh;overflow-y:auto;background:var(--panel2);backdrop-filter:blur(24px);
  border:1px solid var(--line2);border-radius:24px 24px 0 0;padding:20px 18px calc(24px + var(--sab));
  animation:up .44s var(--spring)}
@media(min-width:760px){.modal-wrap{align-items:center}.modal{border-radius:22px;max-height:88vh}}
@keyframes up{from{transform:translateY(40px);opacity:0}to{transform:none;opacity:1}}
.modal h2{margin:0 0 4px;font-size:19px}
.modal .msub{margin:0 0 16px;color:var(--tx3);font-size:12.5px}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.modal-acts{display:flex;gap:9px;margin-top:16px}
.modal-acts .btn{flex:1}
.det-row{display:flex;justify-content:space-between;gap:12px;padding:9px 0;border-bottom:1px solid var(--line);font-size:13.5px}
.det-row:last-of-type{border-bottom:none}
.det-row .dk{color:var(--tx3)}
.det-row .dv{text-align:right;font-weight:600}
.tag{display:inline-block;font-size:10.5px;padding:2px 7px;border-radius:6px;background:rgba(255,255,255,.07);color:var(--tx3);margin-left:6px}

/* toasts */
.toasts{position:fixed;left:50%;transform:translateX(-50%);z-index:99;bottom:calc(env(safe-area-inset-bottom,0px) + 96px);
  display:flex;flex-direction:column;gap:8px;align-items:center;pointer-events:none}
.toast{background:var(--panel2);backdrop-filter:blur(16px);border:1px solid var(--line2);border-radius:13px;
  padding:11px 16px;font-size:13.5px;box-shadow:var(--shadow);animation:toastin .4s var(--spring);max-width:88vw}
.toast.err{border-color:rgba(255,92,108,.5);color:#ffc9cf}
.toast.ok{border-color:rgba(52,211,153,.5)}
@keyframes toastin{from{opacity:0;transform:translateY(16px) scale(.95)}to{opacity:1;transform:none}}

.skel{height:74px;border-radius:var(--r);margin-bottom:11px;
  background:linear-gradient(100deg,rgba(255,255,255,.05) 30%,rgba(255,255,255,.1) 50%,rgba(255,255,255,.05) 70%);
  background-size:200% 100%;animation:shimmer 1.4s infinite}
@keyframes shimmer{to{background-position:-200% 0}}

/* ---------- desktop ---------- */
@media(min-width:900px){
  .tabs{max-width:100%}
  .sheet{left:auto;right:0;top:0;bottom:0;width:440px;height:100%;border-radius:0;border-left:1px solid var(--line2);
    border-top:none;transform:translateX(100%);padding-bottom:0}
  .sheet[data-state="open"],.sheet[data-state="peek"],.sheet[data-state="mid"]{transform:none}
  .sheet-grip{display:none}
  .tabs{padding-top:calc(env(safe-area-inset-top,0px) + 8px)}
  .panel{padding-bottom:40px}
  #map{right:440px}
  .sheet-veil{display:none!important}
  .timemachine{right:460px;bottom:22px}
  .legend{top:auto;right:460px;bottom:calc(env(safe-area-inset-bottom,0px) + 96px)}
  .fab{right:462px}
  .toasts{left:calc(50% - 220px)}
  body.sheet-open .timemachine,body.sheet-open .legend,body.sheet-open .fab{opacity:1;pointer-events:auto}
}
@media(prefers-reduced-motion:reduce){*{animation-duration:.01ms!important;transition-duration:.01ms!important}}

/* ================================================================
   THÈME BAMBOU / RIVIÈRE / CASCADE
   ================================================================ */
:root{
  --bg:#04130f; --bg2:#08201a;
  --panel:rgba(9,28,23,.93); --panel2:rgba(13,38,31,.9);
  --line:rgba(120,205,178,.16); --line2:rgba(120,205,178,.3);
  --bamboo:#7bc96f; --bamboo-d:#3f8f4a;
  --water:#35c4e8; --water-d:#1a7fa8;
}
/* texture bambou discrète en fond de page */
body::before{content:"";position:fixed;inset:0;z-index:0;pointer-events:none;opacity:.055;
  background:
    repeating-linear-gradient(90deg,transparent 0 21px,rgba(123,201,111,.85) 21px 25px),
    repeating-linear-gradient(90deg,transparent 0 117px,rgba(123,201,111,1) 117px 123px);}

/* ---------- écran de démarrage ---------- */
#boot{position:fixed;inset:0;z-index:200;display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:22px;background:linear-gradient(180deg,#04130f,#07201a 60%,#02100d);
  transition:opacity .55s var(--ease),visibility .55s}
#boot.off{opacity:0;visibility:hidden;pointer-events:none}
#boot p{color:var(--tx2);font-size:13.5px;letter-spacing:.4px;margin:0}
.boot-scene{position:relative;width:min(78vw,340px);height:130px}
.boot-palms{position:absolute;inset:auto 0 0 0;display:flex;align-items:flex-end;justify-content:center;gap:14px}
.boot-fall{position:absolute;inset:0 30% 30% 30%;overflow:hidden;opacity:.5;
  -webkit-mask-image:linear-gradient(180deg,#000 55%,transparent);
  mask-image:linear-gradient(180deg,#000 55%,transparent)}

/* ---------- palmier réutilisable ---------- */
.palm{width:100%;height:auto;display:block}
.palm .pt{fill:none;stroke:#8a6a45;stroke-width:4.6;stroke-linecap:round}
.palm .pl path{fill:#3f9a5e}
.palm .pl path:nth-child(2n){fill:#4fb06c}
.palm .pl path:nth-child(3n){fill:#357f4e}
.palm .pc{fill:#6b4a2f}
.palm-slot{display:block;transform-origin:50% 100%;
  animation:palmSway 6.5s ease-in-out infinite;animation-delay:calc(var(--i,0) * .7s);
  filter:drop-shadow(0 10px 20px rgba(0,0,0,.55))}
.palm-slot .pl{transform-origin:34px 42px;animation:palmLeaf 4.2s ease-in-out infinite;
  animation-delay:calc(var(--i,0) * .5s)}
@keyframes palmSway{0%,100%{transform:rotate(-3.4deg)}50%{transform:rotate(3.4deg)}}
@keyframes palmLeaf{0%,100%{transform:rotate(-4.5deg)}50%{transform:rotate(4.5deg)}}

/* ---------- cascade ---------- */
.sc-fall,.boot-fall{position:absolute;overflow:hidden}
.sc-fall i,.boot-fall i{position:absolute;top:-45%;height:175%;border-radius:4px;
  background:linear-gradient(180deg,transparent,rgba(190,242,255,.55),transparent);
  animation:fall var(--t,2.4s) linear infinite;animation-delay:calc(var(--d,0s) * -1)}
@keyframes fall{from{transform:translateY(-58%)}to{transform:translateY(58%)}}

/* ---------- scène de connexion ---------- */
#scene{position:absolute;inset:0;z-index:0;overflow:hidden;pointer-events:none}
.sc-sky{position:absolute;inset:0;background:
  radial-gradient(120% 78% at 50% -4%,rgba(53,196,232,.22),transparent 62%),
  radial-gradient(95% 62% at 10% 100%,rgba(123,201,111,.2),transparent 62%),
  radial-gradient(80% 55% at 92% 96%,rgba(53,196,232,.14),transparent 60%),
  linear-gradient(180deg,#04130f,#071e19 55%,#02100d)}
.sc-fall{left:36%;right:24%;top:0;bottom:40%;opacity:.55;
  -webkit-mask-image:linear-gradient(180deg,#000 58%,transparent);mask-image:linear-gradient(180deg,#000 58%,transparent)}
.sc-cliff{position:absolute;left:26%;right:16%;top:52%;height:16%;
  background:radial-gradient(60% 100% at 50% 0%,rgba(60,110,90,.5),transparent 72%);filter:blur(6px)}
.sc-river{position:absolute;left:0;right:0;bottom:0;height:36%;
  background:linear-gradient(180deg,transparent,rgba(53,196,232,.17) 46%,rgba(26,127,168,.34));
  -webkit-mask-image:linear-gradient(180deg,transparent,#000 42%);mask-image:linear-gradient(180deg,transparent,#000 42%)}
.sc-ripple{position:absolute;left:50%;bottom:16%;width:1px;height:1px}
.sc-ripple i{position:absolute;left:50%;top:50%;width:64px;height:26px;margin:-13px 0 0 -32px;
  border:1.5px solid rgba(150,232,255,.5);border-radius:50%;animation:ripple 5s var(--ease) infinite}
.sc-ripple i:nth-child(2){animation-delay:1.6s}
.sc-ripple i:nth-child(3){animation-delay:3.2s}
@keyframes ripple{0%{transform:scale(.3);opacity:.65}100%{transform:scale(3.6);opacity:0}}
.sc-palms{position:absolute;left:0;right:0;bottom:0;height:48%;
  display:flex;align-items:flex-end;justify-content:space-evenly;padding:0 2%}
.sc-palms .palm-slot{width:clamp(54px,10vw,116px)}
.sc-palms .palm-slot:nth-child(2n){width:clamp(38px,7vw,80px);opacity:.82}
.sc-palms .palm-slot:nth-child(3n){width:clamp(66px,12vw,136px)}
.sc-palms .palm-slot:nth-child(4n){opacity:.68;width:clamp(44px,8vw,92px)}
.login-card{position:relative;z-index:2}
.login-card,.login-wrap{background:transparent}
.login-card{background:var(--panel);backdrop-filter:blur(20px)}

/* ---------- loader à cocotiers ---------- */
.loader{display:flex;flex-direction:column;align-items:center;gap:16px;padding:46px 16px;text-align:center}
.loader-palms{display:flex;align-items:flex-end;gap:8px;height:78px}
.loader-palms .palm-slot{width:44px}
.loader-palms .palm-slot:nth-child(2){width:34px;opacity:.85}
.loader-txt{color:var(--tx2);font-size:13.5px}
.loader-txt .dots i{opacity:.2;animation:dotb 1.5s infinite;font-style:normal}
.loader-txt .dots i:nth-child(2){animation-delay:.22s}
.loader-txt .dots i:nth-child(3){animation-delay:.44s}
@keyframes dotb{0%,100%{opacity:.2}50%{opacity:1}}
.empty-palms{display:flex;align-items:flex-end;justify-content:center;gap:10px;height:86px;margin-bottom:14px}
.all-clear .empty-palms .palm{width:100%;height:auto}
.empty-palms .palm-slot{width:56px}

/* ---------- carte : relief 3D + vignette + couleurs vives ---------- */
.hillshade{mix-blend-mode:multiply;}
.hillshade img{image-rendering:auto}
.phtiles{transition:filter .45s var(--ease)}
#map::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:1000;
  background:radial-gradient(132% 96% at 50% 44%,transparent 50%,rgba(2,12,9,.52) 100%)}
.leaflet-overlay-pane path{filter:drop-shadow(0 1px 3px rgba(0,0,0,.9))}

/* ---------- badge de trajet : icône + durée + prix ---------- */
.legbadge b{display:flex;align-items:center;gap:5px}
.legbadge b svg{width:12px;height:12px;flex:0 0 auto;fill:none;stroke:var(--c);
  stroke-width:2.1;stroke-linecap:round;stroke-linejoin:round}

/* ---------- panneau rétractable (desktop) ---------- */
.panel-toggle{display:none}
@media(min-width:900px){
  .topbar{right:452px;transition:right .42s var(--spring)}
  .panel-toggle{display:grid;position:fixed;z-index:41;top:50%;right:440px;
    transform:translateY(-50%);width:20px;height:76px;place-items:center;padding:0;cursor:pointer;
    border:1px solid var(--line2);border-right:none;border-radius:12px 0 0 12px;color:var(--tx2);
    background:var(--panel);backdrop-filter:blur(14px);
    transition:right .42s var(--spring),color .2s,background .2s}
  .panel-toggle:hover{color:var(--teal);background:var(--panel2)}
  .panel-toggle svg{width:14px;height:14px;transition:transform .32s var(--spring)}
  body.panel-collapsed .panel-toggle{right:0}
  body.panel-collapsed .panel-toggle svg{transform:rotate(180deg)}
  body.panel-collapsed .sheet{transform:translateX(101%)}
  body.panel-collapsed .topbar{right:36px}
  body.panel-collapsed #map{right:0}
  body.panel-collapsed .timemachine{right:24px}
  body.panel-collapsed .legend{right:16px}
  body.panel-collapsed .fab{right:22px}
  #map{transition:right .42s var(--spring)}
}
@media(max-width:899px){.panel-toggle{display:none}}

/* --- scène v2 : cascade lisible, palmiers cadrants, brume --- */
.sc-glow{position:absolute;right:6%;top:-12%;width:56%;height:52%;pointer-events:none;
  background:radial-gradient(50% 50% at 50% 50%,rgba(120,235,255,.20),transparent 70%);filter:blur(8px)}
.sc-fall{left:70%;right:9%;top:0;bottom:32%;opacity:.9;
  -webkit-mask-image:linear-gradient(180deg,#000 0 74%,transparent);mask-image:linear-gradient(180deg,#000 0 74%,transparent)}
.sc-fall i{background:linear-gradient(180deg,transparent,rgba(224,252,255,.85) 45%,rgba(120,225,255,.5),transparent);
  box-shadow:0 0 12px rgba(150,235,255,.45)}
.sc-mist{position:absolute;left:62%;right:2%;top:44%;height:26%;pointer-events:none;filter:blur(14px);
  background:radial-gradient(60% 70% at 46% 40%,rgba(200,245,255,.42),transparent 72%);
  animation:mist 7s ease-in-out infinite alternate}
@keyframes mist{from{opacity:.55;transform:translateY(4px) scale(1)}to{opacity:1;transform:translateY(-6px) scale(1.1)}}
.sc-river{background:linear-gradient(180deg,transparent,rgba(53,196,232,.22) 46%,rgba(26,127,168,.42));
  animation:current 11s ease-in-out infinite alternate}
@keyframes current{from{filter:hue-rotate(0deg) brightness(1)}to{filter:hue-rotate(-14deg) brightness(1.14)}}
.sc-ripple{left:76%;bottom:30%}
.sc-ripple i{border-color:rgba(180,240,255,.75);border-width:2px;animation-duration:4.2s}
.sc-palms{height:58%;pointer-events:none}
.sc-left{justify-content:flex-start;padding-left:3%;gap:2%}
.sc-right{justify-content:flex-end;padding-right:1%;gap:3%}
.sc-palms .palm-slot{width:clamp(72px,13vw,152px)}
.sc-palms .palm-slot.mid{width:clamp(52px,9vw,104px)}
.sc-palms .palm-slot.big{width:clamp(84px,15vw,176px)}
.sc-palms .palm-slot:nth-child(2){width:clamp(50px,9vw,110px);opacity:.85}
.sc-palms .palm-slot:nth-child(3){width:clamp(64px,11vw,132px);opacity:.72}

/* ================================================================
   ESCAPA2 — identité + corrections de layout
   ================================================================ */

/* ---------- logo ---------- */
.brand-logo{display:block;width:132px;height:auto;margin:0 auto 6px;
  filter:drop-shadow(0 10px 26px rgba(0,0,0,.6));
  animation:logoIn .7s var(--spring) both}
@keyframes logoIn{from{opacity:0;transform:translateY(10px) scale(.92)}to{opacity:1;transform:none}}
.brand-word{margin:0;text-align:center;font-size:30px;letter-spacing:.6px;font-weight:800;
  background:linear-gradient(100deg,var(--bamboo),var(--teal) 55%,var(--water));
  -webkit-background-clip:text;background-clip:text;color:transparent}
.boot-logo{width:118px;height:auto;filter:drop-shadow(0 12px 30px rgba(0,0,0,.6));
  animation:logoIn .8s var(--spring) both}
.drawer-logo{width:26px;height:26px;border-radius:8px;vertical-align:-6px;margin-right:6px}
.brand-btn{padding:5px;overflow:hidden}
.brand-btn img{width:30px;height:30px;object-fit:contain;
  filter:drop-shadow(0 2px 6px rgba(0,0,0,.5))}
.brand-btn:hover img{transform:scale(1.08)}
.brand-btn img{transition:transform .25s var(--spring)}
/* wordmark Escapa2 dans l'en-tête du panneau (desktop) */
@media(min-width:900px){
  .tabs::before{content:"Escapa2";align-self:center;margin:0 14px 0 4px;font-weight:800;font-size:13px;
    letter-spacing:.5px;white-space:nowrap;
    background:linear-gradient(100deg,var(--bamboo),var(--teal) 60%,var(--water));
    -webkit-background-clip:text;background-clip:text;color:transparent}
}

/* ---------- timeline vs bouton + : plus de chevauchement ---------- */
.fab{bottom:calc(env(safe-area-inset-bottom,0px) + 80px)}
.timemachine{bottom:calc(env(safe-area-inset-bottom,0px) + 152px)}
@media(min-width:900px){
  .fab{bottom:84px;right:462px}
  .timemachine{right:460px;bottom:22px}
  /* le bouton + passe AU-DESSUS de la timeline, séparés verticalement */
}

/* ---------- topbar remontée ---------- */
.topbar{top:calc(env(safe-area-inset-top,0px) + 6px)}
@media(min-width:900px){
  .topbar{top:calc(env(safe-area-inset-top,0px) + 8px)}
  .tabs{padding-top:calc(env(safe-area-inset-top,0px) + 7px)}
}

/* ---------- correctifs : boutons de la topbar empilés verticalement ---------- */
.topbar-right{display:flex;align-items:center;gap:8px;flex:0 0 auto}
/* le bouton + au-dessus de la timeline, sans recouvrement */
@media(min-width:900px){ .fab{bottom:112px} }

/* ---------- bouton Ajouter dans la barre d'onglets (remplace le FAB flottant) ---------- */
.tabs .tabs-add{margin-left:auto;position:sticky;right:0;flex:0 0 auto;align-self:center;
  width:32px;height:32px;padding:8px;border:none;border-radius:10px;color:#04221a;cursor:pointer;
  background:linear-gradient(150deg,var(--bamboo),var(--moss));
  box-shadow:0 5px 16px -5px rgba(79,174,122,.8);
  transition:transform .22s var(--spring),filter .2s}
.tabs .tabs-add:hover{transform:rotate(90deg) scale(1.08);filter:brightness(1.08)}
.tabs .tabs-add:active{transform:scale(.88) rotate(90deg)}
.tabs .tabs-add svg{width:16px;height:16px;stroke-width:2.8;stroke:#04221a}
.tabs .tabs-add::after{content:none}

@media(max-width:899px){
  .tabs button{padding:10px;font-size:12.5px}
  .tabs .tabs-add{width:36px;height:36px;padding:9px}
}

/* ---------- appareils abonnés ---------- */
.device-list{margin-top:10px;display:flex;flex-direction:column;gap:7px}
.device{display:flex;align-items:center;gap:9px;border:1px solid var(--line);border-radius:11px;
  padding:8px 10px;background:rgba(255,255,255,.03)}
.device-actor{font-size:10.5px;font-weight:800;letter-spacing:.4px;text-transform:uppercase;
  color:var(--c);border:1px solid var(--c);border-radius:6px;padding:2px 6px;opacity:.95;flex:0 0 auto}
.device-label{flex:1;min-width:0;font-size:12.5px;color:var(--tx2);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.device-del{flex:0 0 auto;width:24px;height:24px;border-radius:8px;border:1px solid var(--line);
  background:none;color:var(--tx3);cursor:pointer;font-size:11px;line-height:1;padding:0;
  transition:.2s var(--ease)}
.device-del:hover{border-color:rgba(224,87,107,.6);color:var(--err)}

/* ---------- aperçu des paliers ---------- */
.ms-row{border-left:2px solid var(--bamboo);padding:9px 0 9px 12px;margin-bottom:9px}
.ms-when{font-size:11px;color:var(--tx3);text-transform:uppercase;letter-spacing:.6px;
  display:flex;align-items:center;gap:7px}
.ms-title{font-weight:700;font-size:14px;margin-top:3px;color:var(--bamboo)}
.ms-body{font-size:12.5px;color:var(--tx2);margin-top:2px;line-height:1.45;font-style:italic}

/* ---------- checklist ---------- */
.chk-head{display:flex;align-items:center;gap:14px;margin-bottom:16px;
  background:linear-gradient(180deg,rgba(18,38,54,.9),rgba(13,29,42,.85));
  border:1px solid var(--line);border-radius:var(--r);padding:14px;animation:rise .45s var(--spring) both}
.chk-ring{--p:0;position:relative;width:62px;height:62px;flex:0 0 auto;border-radius:50%;
  background:conic-gradient(var(--bamboo) calc(var(--p) * 1%), rgba(255,255,255,.1) 0);
  display:grid;place-items:center;transition:background .6s var(--ease)}
.chk-ring::before{content:"";position:absolute;inset:6px;border-radius:50%;background:var(--bg2)}
.chk-ring span{position:relative;font-weight:800;font-size:17px;font-variant-numeric:tabular-nums}
.chk-ring span i{font-style:normal;font-size:10px;opacity:.7;font-weight:600}
.chk-sum{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.chk-sum b{font-size:19px;font-weight:800;font-variant-numeric:tabular-nums}
.chk-sum b i{font-style:normal;font-size:12px;color:var(--tx3);font-weight:600}
.chk-sum span{font-size:12px;color:var(--tx2)}
.chk-count{color:var(--bamboo)!important;font-weight:600}

.chk{display:flex;align-items:flex-start;gap:11px;border:1px solid var(--line);border-radius:var(--r2);
  padding:11px 12px;margin-bottom:8px;background:rgba(255,255,255,.02);
  animation:rise .4s var(--spring) both;animation-delay:calc(var(--i,0)*35ms);
  transition:border-color .2s,background .2s,opacity .3s}
.chk:hover{border-color:var(--line2);background:rgba(255,255,255,.05)}
.chk.done{opacity:.5}
.chk.done .chk-title{text-decoration:line-through;text-decoration-color:var(--tx3)}
.chk-box{flex:0 0 auto;width:26px;height:26px;margin-top:1px;border-radius:9px;cursor:pointer;padding:4px;
  border:1.5px solid var(--line2);background:rgba(6,16,25,.6);display:grid;place-items:center;
  transition:transform .2s var(--spring),background .2s,border-color .2s}
.chk-box:hover{border-color:var(--bamboo)}
.chk.done .chk-box{background:linear-gradient(150deg,var(--bamboo),var(--moss));border-color:transparent}
.chk-box svg{width:100%;height:100%;fill:none;stroke:#04221a;stroke-width:3.2;stroke-linecap:round;stroke-linejoin:round}
.chk-box.pop{animation:pop .35s var(--spring)}
.chk-txt{flex:1;min-width:0;cursor:pointer}
.chk-title{font-size:14px;font-weight:600;line-height:1.35}
.chk-note{font-size:12px;color:var(--tx3);margin-top:3px;line-height:1.4}
.chk-meta{display:flex;flex-wrap:wrap;gap:6px;margin-top:7px}
.chk-meta .pill{font-size:10.5px;padding:2px 7px}

/* ================================================================
   MOBILE : timeline compacte + bouton Ajouter discret
   ================================================================ */
@media(max-width:899px){
  /* la timeline redescend juste au-dessus de la barre du panneau,
     et passe sur UNE seule ligne : [play] [curseur] [date · coût] */
  .timemachine{bottom:calc(env(safe-area-inset-bottom,0px) + 70px);
    padding:7px 10px;gap:8px;border-radius:14px}
  .tm-play{width:30px;height:30px;padding:6px;border-radius:10px}
  .tm-track{display:flex;align-items:center;gap:9px;min-width:0}
  .tm-track input[type=range]{flex:1;min-width:0;height:18px}
  .tm-label{flex:0 0 auto;white-space:nowrap;font-size:10.5px;gap:6px;
    justify-content:flex-end;font-variant-numeric:tabular-nums}
  .tm-label #tmDate{color:var(--tx2)}

  /* bouton Ajouter : discret et cohérent, plus de pavé vert fluo */
  .tabs .tabs-add{width:34px;height:34px;padding:8px;border-radius:12px;
    background:rgba(255,255,255,.06);border:1px solid var(--line2);color:var(--teal);
    box-shadow:-16px 0 16px -8px var(--panel)}
  .tabs .tabs-add svg{stroke:currentColor;stroke-width:2.4}
  .tabs .tabs-add:hover{background:rgba(47,212,194,.16);border-color:var(--teal);transform:none}
  .tabs .tabs-add:active{transform:scale(.9)}
}

/* ================================================================
   iPhone : tiroir du bas repensé
   Barre repliée = poignée + mini-barre lisible (logo, voyage, chevron)
   au lieu d'un bout d'onglets tronqués. Onglets visibles une fois ouvert.
   ================================================================ */
.sheet-mini{display:none}

@media(max-width:899px){
  /* --peek est mesuré en JS (poignée + mini-barre) : insensible à l'encoche,
     à la barre d'accueil et à la taille de police. */
  .sheet{height:88vh;padding-bottom:0;transform:translateY(calc(100% - var(--peek,74px)))}
  .sheet[data-state="mid"]{transform:translateY(46%)}
  .sheet[data-state="open"]{transform:translateY(0)}

  /* prise de glissement généreuse (cible tactile iOS) */
  .sheet-grip{padding:8px 0 3px}
  .sheet-grip span{width:42px;height:5px;background:var(--line2)}

  .sheet-mini{display:flex;align-items:center;gap:11px;
    padding:11px 14px calc(11px + var(--sab));   /* la barre d'accueil est incluse DANS la poignée visible */
    cursor:grab;touch-action:none;user-select:none;-webkit-user-select:none}
  .sheet-mini:active{cursor:grabbing}
  .mini-logo{width:30px;height:30px;border-radius:9px;flex:0 0 auto}
  .mini-txt{flex:1;min-width:0;display:flex;flex-direction:column;line-height:1.3}
  .mini-txt b{font-size:13.5px;font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .mini-txt span{font-size:11px;color:var(--tx3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .mini-chevron{width:36px;height:36px;flex:0 0 auto;padding:9px;border-radius:12px;cursor:pointer;
    border:1px solid var(--line2);background:rgba(255,255,255,.06);color:var(--teal);
    transition:background .2s,border-color .2s,transform .18s var(--spring)}
  .mini-chevron:active{transform:scale(.9)}
  .mini-chevron svg{transition:transform .38s var(--spring)}
  .sheet[data-state="open"] .mini-chevron{background:rgba(47,212,194,.16);border-color:var(--teal)}
  .sheet[data-state="open"] .mini-chevron svg{transform:rotate(180deg)}

  /* le contenu respire au-dessus de la barre d'accueil iPhone */
  .tabs{padding-top:2px}
  .panel{padding-bottom:calc(96px + var(--sab))}
  .tabs .tabs-add{box-shadow:none}
}

/* Le service worker recharge la page automatiquement dès qu un nouveau build est détecté. */