:root{
  --hike:#5c8a6a; --transport:#5f92ad; --goal:#b06a4f;
  --bg:#f3f5ef; --panel:#fbfcf8; --ink:#2b322d; --muted:#4a524a;
  --line:#e1e5db; --soft:#ecf0e8; --warn:#6f5424; --warnbg:#f1ece1;
  --ok:#3f6b52; --link:#35637a;
  --green:#7aa688; --blue:#79a6bd; --water:#5f92ad;
  --serif:'Iowan Old Style','Palatino Linotype',Palatino,Georgia,'Times New Roman',serif;
  --tab-h:60px;
}
/* ⚠️ Thème sombre déclaré UNE seule fois, appliqué par la classe `.sombre` que pose le
   script de démarrage d'index.html. Le réglage de l'utilisateur (système, clair, sombre)
   et la préférence du système sont combinés là-bas ; ici il n'y a qu'un cas à maintenir. */
:root.sombre{
    --hike:#7aa98a; --transport:#80aac3; --goal:#cb8568;
    --bg:#151815; --panel:#1a1e1a; --ink:#dee3dc; --muted:#b4bcb3;
    --line:#282e28; --soft:#1f241e; --warn:#c99a5c; --warnbg:#2a2720;
    --ok:#84b394; --link:#8bb1c6; --green:#6f9b7d; --blue:#6f9bb3; --water:#6f9bb3;
  }

*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
html,body{height:100%}
body{font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,sans-serif;
  background:var(--bg);color:var(--ink);line-height:1.55;font-size:15px;
  -webkit-font-smoothing:antialiased;overscroll-behavior:none}
a{color:var(--link);text-underline-offset:2px}
h1,h2,h3,h4{font-family:var(--serif);font-weight:600;line-height:1.2}

/* App shell */
#app{max-width:640px;margin:0 auto;min-height:100%;
  padding-bottom:calc(var(--tab-h) + env(safe-area-inset-bottom))}
.topbar{position:sticky;top:0;z-index:20;background:var(--panel);
  border-bottom:1px solid var(--line);padding:14px 18px calc(14px);
  padding-top:calc(14px + env(safe-area-inset-top));
  display:flex;justify-content:space-between;align-items:flex-start;gap:10px}
.gear{background:none;border:none;color:var(--muted);cursor:pointer;padding:4px;margin:-2px -4px 0 0;flex-shrink:0}
.gear svg{width:23px;height:23px;stroke:currentColor;fill:none;stroke-width:1.6}
.gear:active{color:var(--ink)}
.topbar .kick{font-size:11px;letter-spacing:1.5px;text-transform:uppercase;color:var(--green);font-weight:600}
.topbar h1{font-size:20px;margin-top:2px}
.topbar .day-hint{font-size:12.5px;color:var(--muted);margin-top:2px}

.view{display:none;padding:18px}
.view.active{display:block;animation:fade .18s ease}
@keyframes fade{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}

/* Section titles */
.sec-title{font-size:11px;text-transform:uppercase;letter-spacing:1.5px;color:var(--muted);
  font-weight:600;margin:22px 0 10px}
.sec-title:first-child{margin-top:2px}

/* Flat cards = just a top keyline, no rounded box */
.card{background:transparent;border-top:2px solid var(--green);padding:12px 0 0;margin-bottom:18px}
.card.blue{border-top-color:var(--blue)}
.card.warm{border-top-color:var(--warn)}
.card h3,.card h4{font-size:16px;margin-bottom:8px}

/* Today */
.today-stage{border-left:3px solid var(--hike);padding:2px 0 2px 14px;margin-bottom:6px}
.today-stage.transport{border-left-color:var(--transport)}
.today-stage.goal{border-left-color:var(--goal)}
.today-stage .jn{font-size:11px;letter-spacing:.6px;text-transform:uppercase;color:var(--muted);font-weight:600}
.today-stage h2{font-size:21px;margin:2px 0 4px}
.today-stage .meta{font-size:13px;color:var(--muted)}
.water-badge{display:inline-flex;align-items:baseline;gap:6px;margin:14px 0;
  border-left:3px solid var(--water);padding:2px 0 2px 13px}
.water-badge b{font-family:var(--serif);font-size:26px;color:var(--water)}
.water-badge span{font-size:13px;color:var(--muted)}
.callout{border-left:3px solid var(--warn);padding:3px 0 3px 13px;margin:12px 0;font-size:13.5px}
.callout.bail{border-left-color:var(--ok)}
.callout b{color:var(--warn);font-size:11px;text-transform:uppercase;letter-spacing:.5px;display:block;margin-bottom:3px}
.callout.bail b{color:var(--ok)}

/* Checklist */
.check{list-style:none}
.check li{display:flex;gap:11px;align-items:flex-start;padding:9px 0;border-bottom:1px solid var(--soft);
  font-size:14.5px;cursor:pointer}
.check li:last-child{border-bottom:none}
.check .box{flex-shrink:0;width:19px;height:19px;border:1.5px solid var(--muted);margin-top:1px;
  display:grid;place-items:center;color:transparent;font-size:13px;line-height:1}
.check li.done .box{background:var(--hike);border-color:var(--hike);color:#fff}
.check li.done span{color:var(--muted);text-decoration:line-through}
.check .reset{font:inherit;font-size:12.5px;color:var(--link);background:none;border:none;
  cursor:pointer;text-decoration:underline;text-underline-offset:2px;padding:8px 0 0}

/* Map */
#map{height:calc(100vh - var(--tab-h) - 132px);height:calc(100dvh - var(--tab-h) - 132px);min-height:340px;border:1px solid var(--line);background:var(--soft);isolation:isolate}
.map-tools{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin:12px 0}
.map-tools .gps-info{font-size:12.5px;color:var(--muted);flex:1;min-width:140px}
.map-legend{display:flex;gap:14px;flex-wrap:wrap;font-size:12px;color:var(--muted);margin-top:8px}
.map-legend i{display:inline-block;width:10px;height:10px;border-radius:50%;vertical-align:-1px;margin-right:5px}
.addbar{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px;font-size:13px;align-items:center}
.addbar .lbl{color:var(--muted)}

/* Budget */
.budget-head{border-left:3px solid var(--green);padding:2px 0 2px 14px;margin-bottom:6px}
.budget-head .total{font-family:var(--serif);font-size:34px;line-height:1}
.budget-head .env{font-size:13px;color:var(--muted);margin-top:4px}
.bar{height:7px;background:var(--soft);margin:14px 0 6px;position:relative;overflow:hidden}
.bar > i{position:absolute;left:0;top:0;bottom:0;background:var(--green);transition:width .3s}
.bar.over > i{background:var(--goal)}
.bar-scale{display:flex;justify-content:space-between;font-size:11px;color:var(--muted)}
.cat-row{display:flex;align-items:center;gap:10px;padding:9px 0;border-bottom:1px solid var(--soft);font-size:13.5px}
.cat-row:last-child{border-bottom:none}
.cat-row .cn{flex:1}
.cat-row .cv{font-variant-numeric:tabular-nums;color:var(--muted)}
.cat-row .cbar{width:70px;height:5px;background:var(--soft);position:relative}
.cat-row .cbar > i{position:absolute;inset:0 auto 0 0;background:var(--blue)}
.cat-row .cbar.over > i{background:var(--goal)}
.exp-row{display:flex;gap:10px;align-items:baseline;padding:9px 0;border-bottom:1px solid var(--soft);font-size:14px}
.exp-row:last-child{border-bottom:none}
.exp-row .ea{font-family:var(--serif);font-variant-numeric:tabular-nums;min-width:66px}
.exp-row .ed{flex:1;color:var(--ink)}
.exp-row .ec{font-size:11px;text-transform:uppercase;letter-spacing:.4px;color:var(--muted)}
.exp-row .del{background:none;border:none;color:var(--muted);cursor:pointer;font-size:16px;line-height:1;padding:0 2px}

/* Forms & buttons */
input,select,textarea,button{font:inherit;color:var(--ink)}
input,select,textarea{background:var(--panel);border:1px solid var(--line);padding:9px 10px;width:100%}
input:focus,select:focus,textarea:focus{outline:2px solid var(--green);outline-offset:-1px}
label.fld{display:block;margin-bottom:11px}
label.fld > span{display:block;font-size:12px;color:var(--muted);text-transform:uppercase;letter-spacing:.4px;margin-bottom:4px}
.form-row{display:flex;gap:10px}
.form-row > *{flex:1}
.btn{display:inline-block;text-align:center;background:var(--hike);color:#fff;border:none;
  padding:11px 16px;cursor:pointer;font-weight:600;width:100%}
.btn:active{opacity:.85}
.btn.ghost{background:none;color:var(--link);text-decoration:underline;text-underline-offset:2px;
  padding:10px 0;font-weight:500;width:auto}
.btn.small{width:auto;padding:8px 12px;font-size:13px}
.btn.line{background:none;border:1px solid var(--line);color:var(--ink);font-weight:500}

.muted{color:var(--muted)}
.tiny{font-size:12px;color:var(--muted);line-height:1.5}
.empty{color:var(--muted);font-size:13.5px;padding:14px 0;text-align:center}

/* Bottom tab bar */
.tabbar{position:fixed;left:50%;right:auto;transform:translateX(-50%);bottom:0;z-index:1000;
  width:100%;max-width:640px;
  display:grid;grid-template-columns:repeat(5,1fr);
  background:var(--panel);border-top:1px solid var(--line);
  padding-bottom:env(safe-area-inset-bottom)}
.tabbar button{background:none;border:none;padding:9px 4px 8px;cursor:pointer;color:var(--muted);
  display:flex;flex-direction:column;align-items:center;gap:3px;font-size:10.5px;letter-spacing:.3px}
.tabbar button svg{width:22px;height:22px;stroke:currentColor;fill:none;stroke-width:1.6}
.tabbar button.active{color:var(--hike)}

/* Écran moyen (tablette) : la colonne appli est encadrée et la barre s'aligne dessus */
@media (min-width:680px) and (max-width:1023px){
  #app{border-left:1px solid var(--line);border-right:1px solid var(--line);min-height:100vh}
  .tabbar{border-left:1px solid var(--line);border-right:1px solid var(--line)}
}

/* Leaflet tweaks to match the calm look */
.leaflet-popup-content-wrapper,.leaflet-popup-tip{border-radius:0}
.leaflet-container{font:inherit}
.leaflet-bar a{border-radius:0}
.gps-dot{border-radius:50%;background:var(--transport);border:2px solid #fff;box-shadow:0 0 0 2px rgba(95,146,173,.35)}

/* Bannière de décision GO / PRUDENCE / REPLI */
.decision{border-left:3px solid var(--ok);padding:6px 0 6px 14px;margin:14px 0}
.decision b{display:block;font-family:var(--serif);font-size:17px;margin-bottom:2px}
.decision span{font-size:13px;color:var(--muted)}
.decision.go{border-left-color:var(--ok)} .decision.go b{color:var(--ok)}
.decision.prudence{border-left-color:var(--warn)} .decision.prudence b{color:var(--warn)}
.decision.repli{border-left-color:var(--goal)} .decision.repli b{color:var(--goal)}

/* Conditions du jour */
.cond{margin:14px 0}
.cond-title{font-size:11px;text-transform:uppercase;letter-spacing:1px;color:var(--muted);font-weight:600;margin-bottom:8px}
.cond-row{display:flex;gap:10px}
.cond-row label{flex:1;font-size:11px;color:var(--muted);display:flex;flex-direction:column;gap:4px}
.cond-row input{padding:8px;text-align:center;font-variant-numeric:tabular-nums}

/* Grille du plan calculé */
.plan-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin:16px 0 6px}
@media(max-width:460px){.plan-grid{grid-template-columns:1fr;gap:0}}
.plan-cell{border-top:2px solid var(--blue);padding:9px 0 0}
@media(max-width:460px){.plan-cell{border-top:1px solid var(--line);padding:11px 0}.plan-cell:first-child{border-top:2px solid var(--blue)}}
.plan-cell .pk{display:block;font-size:11px;text-transform:uppercase;letter-spacing:.5px;color:var(--muted);font-weight:600}
.plan-cell b{display:block;font-family:var(--serif);font-size:22px;margin:3px 0 2px}
.plan-cell .ps{display:block;font-size:12px;color:var(--muted);line-height:1.4}
.stage-facts{margin:6px 0 4px}

/* Projection budget */
.projection{margin:8px 0 4px}
.proj{border-left:3px solid var(--ok);padding:5px 0 5px 13px}
.proj.over{border-left-color:var(--goal)} .proj.under,.proj.ok{border-left-color:var(--ok)}
.proj b{display:block;font-size:15px}
.proj span{font-size:12.5px;color:var(--muted)}

/* Feuille d'ajout de point */
.addsheet{border:1px solid var(--line);background:var(--panel);padding:14px;margin-top:12px}
.as-title{font-family:var(--serif);font-size:15px;margin-bottom:10px}

/* ====================== DASHBOARD (Accueil) ====================== */
.hero{display:block;width:100%;text-align:left;background:none;border:none;color:inherit;
  border-left:3px solid var(--hike);padding:4px 0 8px 16px;margin:2px 0 22px;cursor:pointer}
.hero.transport{border-left-color:var(--transport)} .hero.goal{border-left-color:var(--goal)}
.hero.blue{border-left-color:var(--blue)}
.hero-kicker{font-size:11px;letter-spacing:1.2px;text-transform:uppercase;color:var(--green);font-weight:600}
.hero h1{font-size:24px;margin:4px 0 6px;line-height:1.15}
.hero-body{color:var(--muted);font-size:14px;margin-bottom:10px}
.hero-chips{display:flex;gap:22px;flex-wrap:wrap;margin:12px 0 4px}
.chip{display:flex;flex-direction:column;font-size:11.5px;color:var(--muted)}
.chip b{font-family:var(--serif);font-size:19px;color:var(--ink)}
.hero-cta{display:inline-block;margin-top:8px;font-size:13px;color:var(--link);font-weight:600}

.board{display:block;width:100%;text-align:left;background:none;border:none;color:inherit;
  cursor:pointer;border-top:1px solid var(--line);padding:16px 0 18px}
.board-plain{border-top:1px solid var(--line);padding:16px 0 8px}
.board-h{display:flex;justify-content:space-between;align-items:baseline;font-family:var(--serif);
  font-size:16px;margin-bottom:10px}
.board-h .muted{font-family:-apple-system,sans-serif;font-size:12.5px}
.board-stats{display:flex;gap:26px;margin:12px 0 6px}
.board-stats div{display:flex;flex-direction:column}
.board-stats b{font-family:var(--serif);font-size:20px}
.board-stats span{font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.4px}
.board-cta{display:inline-block;margin-top:6px;font-size:12.5px;color:var(--link);font-weight:600}
.board:active{background:var(--soft)}

/* Widget compte à rebours concert */
.concert-w{display:flex;align-items:center;gap:15px;border-top:1px solid var(--line);border-left:3px solid var(--goal);padding:13px 0 13px 14px;cursor:pointer}
.concert-w:active{background:var(--soft)}
.cw-big{font-family:var(--serif);font-size:30px;line-height:1;color:var(--goal);min-width:64px}
.cw-txt{flex:1}
.cw-txt b{display:block;font-size:14.5px}
.cw-txt span{font-size:12px;color:var(--muted)}
.cw-go{color:var(--muted);font-size:20px}

/* Rangée d'outils (accueil) */
.tools{border-top:1px solid var(--line);padding:16px 0 8px}
.tools .sec-h{margin-bottom:10px}
.tools-grid{display:grid;grid-template-columns:1fr 1fr}
.tools-3 .tools-grid{grid-template-columns:1fr 1fr 1fr}
.tools-grid button{background:none;border:none;border-left:1px solid var(--soft);text-align:left;padding:7px 12px;cursor:pointer;color:inherit;min-height:50px}
.tools-grid button:first-child{border-left:none;padding-left:0}
.tools-grid button:active{background:var(--soft)}
.tools-grid b{display:block;font-family:var(--serif);font-size:15px;font-weight:600;margin-bottom:1px}
.tools-grid span{font-size:11px;color:var(--muted)}

/* Sac & préparation */
.cd-big{font-family:var(--serif);font-size:30px;line-height:1;margin:2px 0 4px}
.cd-sub{font-size:13px;color:var(--muted)}
.prep-cat,.gear-cat{font-size:11px;text-transform:uppercase;letter-spacing:.8px;color:var(--muted);font-weight:600;margin:16px 0 4px}
.prep-cat:first-of-type{margin-top:8px}
.gear-row{display:flex;align-items:center;gap:11px;padding:9px 0;border-bottom:1px solid var(--soft)}
.gear-row:last-child{border-bottom:none}
.gear-box{flex-shrink:0;width:19px;height:19px;border:1.5px solid var(--hike);background:var(--hike);color:#fff;display:grid;place-items:center;font-size:13px;line-height:1;cursor:pointer}
.gear-row.off .gear-box{background:none;border-color:var(--muted);color:transparent}
.gear-name{flex:1;font-size:14px}
.gear-row.off .gear-name{color:var(--muted);text-decoration:line-through}
.gear-w{display:flex;align-items:center;gap:3px;color:var(--muted)}
.gear-w input{width:54px;text-align:right;font:inherit;font-size:13.5px;color:var(--ink);background:none;border:none;border-bottom:1px solid var(--line);padding:2px;font-variant-numeric:tabular-nums;-moz-appearance:textfield}
.gear-w input:focus{outline:none;border-bottom-color:var(--hike)}
.gear-w input::-webkit-outer-spin-button,.gear-w input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.gear-w i{font-style:normal;font-size:12px}
.gear-total{border-left:3px solid var(--ok);padding:6px 0 8px 14px;margin:4px 0 10px}
.gear-total b{display:block;font-family:var(--serif);font-size:22px;line-height:1}
.gear-total span{font-size:12px;color:var(--muted)}
.gear-total .gear-verdict{font-size:12.5px;color:var(--muted);margin-top:4px}
.gear-carried{font-size:12.5px;color:var(--muted);margin-top:6px;padding-top:6px;border-top:1px solid var(--soft)}
.gear-carried b{color:var(--ink)}

/* Lexique */
.lex-search{margin:14px 0 4px}
.lex-search input{width:100%;font:inherit;font-size:15px;color:var(--ink);background:var(--panel);border:1px solid var(--line);padding:10px 12px}
.lex-search input:focus{outline:none;border-color:var(--hike)}
.lex-cat{border-top:1px solid var(--line)}
.lex-h{width:100%;display:flex;justify-content:space-between;align-items:center;background:none;border:none;color:inherit;cursor:pointer;font-family:var(--serif);font-size:16px;padding:14px 0}
.lex-count{font-family:-apple-system,system-ui,sans-serif;font-size:12px;color:var(--muted)}
.lex-count i{font-style:normal;margin-left:7px}
.lex-body{padding-bottom:6px}
.phrase{padding:9px 0;border-top:1px solid var(--soft)}
.phrase:first-child{border-top:none}
.ph-fr{font-size:12.5px;color:var(--muted)}
.ph-es{font-size:15px;color:var(--ink);font-weight:500;margin:1px 0}
.ph-pron{font-size:13px;color:var(--muted);font-style:italic}

/* Carnet de bord */
.jour{border-top:1px solid var(--line);padding:14px 0}
.jour.today{border-left:2px solid var(--hike);padding-left:12px}
.jour-h{display:flex;justify-content:space-between;align-items:center;margin-bottom:3px;gap:10px}
.jour-n{font-size:11px;text-transform:uppercase;letter-spacing:.6px;color:var(--muted);font-weight:600}
.swim{flex-shrink:0;background:none;border:1px solid var(--line);color:var(--muted);font:inherit;font-size:11.5px;padding:3px 11px;cursor:pointer;letter-spacing:.3px}
.swim.on{background:var(--water);border-color:var(--water);color:#fff}
.jour-title{font-family:var(--serif);font-size:15px;margin-bottom:7px}
.jour-note{width:100%;font:inherit;font-size:14px;color:var(--ink);background:var(--panel);border:1px solid var(--line);padding:8px 10px;resize:vertical;line-height:1.5}
.jour-note:focus{outline:none;border-color:var(--hike)}
.gear-total.caution{border-left-color:var(--warn)}
.gear-total.caution b{color:var(--warn)}
.gear-total.over{border-left-color:var(--goal)}
.gear-total.over b{color:var(--goal)}

.vig-cards{display:grid;grid-template-columns:1fr;gap:14px;margin-top:6px}
.vig{border-left:2px solid var(--warn);padding:2px 0 2px 14px;font-size:13.5px}
.vig b{display:block;font-size:11.5px;text-transform:uppercase;letter-spacing:.5px;color:var(--warn);margin-bottom:3px}

/* ====================== ÉTAPES (liste) ====================== */
.trip-head{margin-bottom:8px}
.trip-stats{display:flex;gap:24px;flex-wrap:wrap;margin-top:6px}
.trip-stats div{display:flex;flex-direction:column}
.trip-stats b{font-family:var(--serif);font-size:21px}
.trip-stats span{font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.4px}
.stage-list{display:flex;flex-direction:column;margin-top:8px}
.stage-row{display:flex;align-items:center;gap:12px;width:100%;text-align:left;cursor:pointer;
  background:none;border:none;border-top:1px solid var(--line);border-left:3px solid var(--hike);
  color:inherit;font:inherit;padding:13px 4px 13px 14px}
.stage-row:last-child{border-bottom:1px solid var(--line)}
.stage-row.transport{border-left-color:var(--transport)} .stage-row.goal{border-left-color:var(--goal)}
.stage-row.today{background:var(--soft)}
.stage-row:hover{background:var(--soft)}
.sr-num{font-size:12px;font-weight:700;color:var(--muted);min-width:26px}
.sr-main{flex:1;min-width:0}
.sr-title{display:block;font-size:15px;font-weight:600;line-height:1.3}
.sr-meta{display:block;font-size:12.5px;color:var(--muted);margin-top:2px}
.tag-today{font-size:10px;text-transform:uppercase;letter-spacing:.5px;color:#fff;background:var(--hike);
  padding:1px 6px;vertical-align:1px;font-weight:600}
.row-spark{width:120px;flex-shrink:0;opacity:.85}
@media(max-width:420px){.row-spark{display:none}}
.sr-arrow{color:var(--muted);font-size:18px}

/* ====================== DÉTAIL ÉTAPE ====================== */
.detail-top{display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding-top:calc(env(safe-area-inset-top))}
.back{background:none;border:none;color:var(--link);font:inherit;font-size:15px;font-weight:600;cursor:pointer;padding:6px 0}
.detail-jn{font-size:12px;color:var(--muted);text-transform:uppercase;letter-spacing:.5px}
.detail-hero{border-left:3px solid var(--hike);padding:2px 0 4px 15px;margin:10px 0 18px}
.detail-hero.transport{border-left-color:var(--transport)} .detail-hero.goal{border-left-color:var(--goal)}
.badge{display:inline-block;font-size:10.5px;text-transform:uppercase;letter-spacing:.6px;color:var(--green);font-weight:600}
.detail-hero h1{font-size:25px;line-height:1.12;margin:3px 0 5px}
.ground{color:var(--muted);font-size:13.5px}
.stat-row{display:flex;flex-wrap:wrap;gap:18px 26px;border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);padding:14px 0;margin-bottom:6px}
.stat{display:flex;flex-direction:column}
.stat b{font-family:var(--serif);font-size:19px}
.stat span{font-size:10.5px;color:var(--muted);text-transform:uppercase;letter-spacing:.4px}
.sec{border-top:1px solid var(--line);padding:16px 0 6px;margin-top:6px}
.sec:first-of-type{border-top:none}
.sec-h{font-size:11px;text-transform:uppercase;letter-spacing:1.2px;color:var(--muted);font-weight:600;margin-bottom:12px}
.row2{display:flex;gap:10px;padding:8px 0;border-bottom:1px solid var(--soft);font-size:13.5px}
.row2:last-child{border-bottom:none}
.row2 .k{color:var(--muted);min-width:72px;font-size:11px;text-transform:uppercase;letter-spacing:.4px;font-weight:600;padding-top:2px}
.transport-note{font-size:14px}
.meal-note{font-size:13.5px;line-height:1.55;color:var(--ink)}
.btn.wide{width:100%;margin:16px 0 4px}

/* Profil altimétrique */
.elev-wrap{margin:2px 0 6px}
.elevation{width:100%;height:auto;display:block}
.sparkline{width:100%;height:100%;display:block}
.ev-area{fill:var(--green);opacity:.15;stroke:none}
.ev-line{stroke:var(--hike);stroke-width:2;fill:none}
.ev-grid{stroke:var(--line);stroke-width:1}
.ev-ylab,.ev-xlab{fill:var(--muted);font-size:19px;font-family:-apple-system,sans-serif}
.ev-guide{stroke:var(--line);stroke-width:1}
.ev-mark{stroke:var(--panel);stroke-width:1.5}
.ev-water{fill:#5f92ad}.ev-camp{fill:#5c8a6a}.ev-shop{fill:#b06a4f}.ev-warn{fill:#8a6a34}.ev-note{fill:#727a70}
.elev-legend{display:flex;gap:16px;flex-wrap:wrap;font-size:12px;color:var(--muted);margin-top:6px}
.dot{display:inline-block;width:9px;height:9px;border-radius:50%;vertical-align:-1px;margin-right:5px}
.dot.ev-water{background:#5f92ad}.dot.ev-camp{background:#5c8a6a}.dot.ev-shop{background:#b06a4f}
.dot.ev-warn{background:#8a6a34}.dot.ev-note{background:#727a70}

/* Points sur l'étape (waypoints) */
.wp{display:flex;align-items:baseline;gap:10px;padding:9px 0;border-bottom:1px solid var(--soft);font-size:13.5px}
.wp:last-child{border-bottom:none}
.wp .dot{flex-shrink:0}
.wp-km{font-variant-numeric:tabular-nums;color:var(--muted);min-width:52px;font-size:12.5px}
.wp-name{flex:1}
.wp-type{font-size:10.5px;text-transform:uppercase;letter-spacing:.4px;color:var(--muted)}

/* Ligne météo live */
.weather-line{font-size:13.5px;color:var(--ink);margin:4px 0 12px;padding:5px 0 5px 13px;border-left:2px solid var(--blue)}

/* Bande soleil / nuit */
.info-strip{display:flex;gap:24px;flex-wrap:wrap;border-top:1px solid var(--line);padding:14px 0}
.info-strip div{display:flex;flex-direction:column}
.info-strip b{font-family:var(--serif);font-size:17px;line-height:1.2}
.info-strip .wide b{font-size:15px}
.info-strip span{font-size:10.5px;color:var(--muted);text-transform:uppercase;letter-spacing:.4px;margin-top:2px}

/* Aperçu de demain */
.tomorrow{margin:2px 0 4px}
.tomorrow b{display:block;font-family:var(--serif);font-size:17px;margin-bottom:2px}
.tomorrow span{font-size:12.5px;color:var(--muted)}

/* Liens rapides */
.quick-links{display:flex;flex-wrap:wrap;gap:10px}
.quick-links a{font-size:13px;padding:8px 12px;border:1px solid var(--line);color:var(--ink);
  text-decoration:none;font-weight:500}
.quick-links a:active{background:var(--soft)}

/* Badges de difficulté */
.detail-hero .badge{margin-right:10px}
.diff-facile{color:var(--ok)} .diff-moyen{color:var(--blue)}
.diff-difficile{color:var(--warn)} .diff-tres{color:var(--goal)}

/* Filtres / tri des étapes */
.filters{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;margin:6px 0 4px}
.fgroup{display:flex;gap:6px;flex-wrap:wrap}
.fchip{font:inherit;font-size:12.5px;padding:6px 11px;border:1px solid var(--line);background:none;color:var(--muted);cursor:pointer}
.fchip.on{background:var(--hike);border-color:var(--hike);color:#fff}
.grp-h{font-size:11px;text-transform:uppercase;letter-spacing:1px;color:var(--muted);font-weight:600;margin:18px 0 2px}

/* Hébergement du soir (accueil) */
.tonight{font-family:var(--serif);font-size:16px;margin-top:2px}
.tonight.muted{font-family:-apple-system,BlinkMacSystemFont,sans-serif;font-size:13.5px}
.mini-link{font-size:12.5px;color:var(--link);font-weight:600;text-decoration:none}

/* Impression : fiche d'étape (roadbook) */
@media print{
  .tabbar,#topbar,.back,.btn,.hero-cta,.board-cta,.elev-legend{display:none!important}
  .view{display:none!important}
  .view.active{display:block!important;padding:0}
  #app{padding:0;max-width:none}
  body{background:#fff;color:#000;font-size:11px}
  .detail-hero,.decision,.callout,.weather-line,.sec,.stat-row{break-inside:avoid}
  a[href^="http"]::after{content:" (" attr(href) ")";font-size:9px;color:#555}
}

/* --- Transports & réservations --- */
.soldes{border-top:2px solid var(--green);padding-top:12px;margin-bottom:22px}
.soldes .board-h b{color:var(--ink);font-size:17px}
.solde-list{list-style:none;margin:10px 0 0;padding:0}
.solde-list li{display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 8px;padding:6px 0;border-top:1px solid var(--soft);font-size:14px}
.solde-list li:first-child{border-top:none}
.solde-list li span{flex:1}
.solde-list li b{font-variant-numeric:tabular-nums}
.solde-list li em{flex-basis:100%;font-style:normal;font-size:11.5px;color:var(--warn)}
.resa-card{border-left:2px solid var(--soft);padding:2px 0 12px 14px;margin-bottom:14px}
.resa-top{display:flex;justify-content:space-between;align-items:baseline;gap:10px;margin-bottom:3px}
.resa-day{font-size:11px;text-transform:uppercase;letter-spacing:.6px;color:var(--muted);font-weight:600}
.resa-name{font-family:var(--serif);font-size:16px;font-weight:600;line-height:1.3}
.resa-meta{display:flex;flex-wrap:wrap;gap:4px 14px;font-size:12.5px;color:var(--muted);margin-top:4px}
.resa-meta b{color:var(--ink);font-weight:600;font-variant-numeric:tabular-nums}
.resa-note{font-size:12.5px;color:var(--muted);margin-top:6px;line-height:1.5}
.tag-solde{color:var(--warn);font-weight:600}
.tag-paid{color:var(--green);font-weight:600}
.tag-tbd{color:var(--muted);font-weight:600}
.tools-4 .tools-grid{grid-template-columns:1fr 1fr}

/* --- Récap « Mon voyage » --- */
.recap-hero{border-top:2px solid var(--green);padding-top:14px;margin-bottom:20px}
.recap-kicker{font-size:11px;letter-spacing:1.6px;text-transform:uppercase;color:var(--green);font-weight:600}
.recap-title{font-family:var(--serif);font-size:34px;line-height:1.05;font-weight:700;margin:6px 0 5px}
.recap-route{font-size:14.5px;color:var(--ink)}
.recap-dates{font-size:13px;color:var(--muted);margin-top:3px;text-transform:capitalize}
.recap-count{display:inline-block;margin-top:12px;padding:4px 12px;border:1px solid var(--line);font-size:12.5px;color:var(--water);font-weight:600}
.recap-stats{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.recap-stats .st{padding:12px 6px;border-left:1px solid var(--soft);text-align:center}
.recap-stats .st:first-child{border-left:none}
.recap-stats .st b{display:block;font-family:var(--serif);font-size:19px;font-weight:700;line-height:1.1}
.recap-stats .st span{font-size:10px;text-transform:uppercase;letter-spacing:.5px;color:var(--muted)}
.recap-budget{font-size:12.5px;color:var(--muted);text-align:center;margin:10px 0 20px}
.recap-budget b{color:var(--ink)}
.rc-concert{display:block;width:100%;text-align:left;background:var(--soft);border:none;border-left:3px solid var(--water);color:inherit;padding:14px 16px;margin-bottom:22px;cursor:pointer}
.rc-concert .rc-when{font-size:11px;text-transform:uppercase;letter-spacing:.6px;color:var(--water);font-weight:600}
.rc-concert h3{font-family:var(--serif);font-size:19px;font-weight:700;margin:3px 0 4px}
.rc-concert p{font-size:13px;color:var(--muted);line-height:1.5}
.rc-tl{position:relative;padding-left:22px;margin-bottom:6px}
.rc-tl::before{content:"";position:absolute;left:4px;top:6px;bottom:8px;width:2px;background:var(--soft)}
.rc-day{position:relative;padding:0 0 18px;cursor:pointer}
.rc-day::before{content:"";position:absolute;left:-22px;top:3px;width:11px;height:11px;border-radius:50%;background:var(--panel);border:2px solid var(--green)}
.rc-day.transport::before{border-color:var(--blue)}
.rc-day.goal::before{border-color:var(--water);background:var(--water)}
.rc-day:active{opacity:.6}
.rc-when{font-size:11px;text-transform:uppercase;letter-spacing:.5px;color:var(--muted);font-weight:600}
.rc-t{font-family:var(--serif);font-size:16px;font-weight:600;line-height:1.25;margin:1px 0}
.rc-meta{font-size:12.5px;color:var(--muted)}
.rc-night{font-size:12.5px;color:var(--ink);margin-top:3px}
.rc-ar{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:6px}
.rc-arb{border-left:2px solid var(--soft);padding-left:12px}
.rc-arb span{display:block;font-size:10.5px;text-transform:uppercase;letter-spacing:.5px;color:var(--muted);font-weight:600}
.rc-arb b{display:block;font-family:var(--serif);font-size:14px;font-weight:600;margin:2px 0 1px}
.rc-arb em{font-style:normal;font-size:12px;color:var(--muted)}
.recap-note{font-size:12px;color:var(--muted);text-align:center;margin:8px 0 2px}
.rc-walk{font-size:12.5px;color:var(--green);font-weight:600;margin-top:3px}

/* --- Budget : déjà réservé --- */
.booked{border-left:3px solid var(--green);padding:2px 0 10px 14px;margin-bottom:18px}
.booked-total{display:flex;align-items:baseline;gap:8px;margin-bottom:8px}
.booked-total b{font-family:var(--serif);font-size:22px;font-weight:700}
.booked-total span{font-size:12px;color:var(--muted)}
.booked .br{display:flex;justify-content:space-between;font-size:13px;padding:3px 0;border-top:1px solid var(--soft)}
.booked .br span{color:var(--muted)}
.booked .br b{font-variant-numeric:tabular-nums;font-weight:600}
.booked .tiny{margin-top:8px}

/* Palette catégorielle du budget (validée light+dark) + camembert */
:root{ --cat-hebergement:#2f8b63; --cat-nourriture:#dd7a2a; --cat-transport:#4a72c8; --cat-concert:#c250a0; --cat-autre:#a8862c; }
:root.sombre{ --cat-hebergement:#35997a; --cat-nourriture:#c66f1e; --cat-transport:#6b8fd8; --cat-concert:#c25fa4; --cat-autre:#b0902f; }
.donut-wrap{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin-bottom:6px}
.donut{width:132px;height:132px;flex-shrink:0}
.donut circle{stroke-linecap:butt}
.donut-c1{fill:var(--ink);font-family:var(--serif);font-size:19px;font-weight:700;text-anchor:middle}
.donut-c2{fill:var(--muted);font-size:8px;text-transform:uppercase;letter-spacing:.8px;text-anchor:middle}
.donut-legend{flex:1;min-width:150px}
.lg-row{display:flex;align-items:center;gap:8px;padding:3px 0;font-size:13px}
.lg-dot{width:11px;height:11px;border-radius:2px;flex-shrink:0}
.lg-lab{flex:1;color:var(--ink)}
.lg-val{color:var(--muted);font-variant-numeric:tabular-nums}

/* Récap : mini-carte + profil global */
.recap-visual{margin-bottom:22px}
.rc-map{display:block;width:100%;max-width:190px;height:auto;margin:0 auto 4px}
.rc-route{stroke:var(--water);stroke-width:2;stroke-linejoin:round;stroke-linecap:round;vector-effect:non-scaling-stroke}
.rc-route-dash{stroke:var(--muted);stroke-width:1.5;stroke-dasharray:3 3;vector-effect:non-scaling-stroke}
.rc-m-start{fill:var(--green);stroke:var(--panel);stroke-width:1.5}
.rc-m-end{fill:var(--water);stroke:var(--panel);stroke-width:1.5}
.rc-cap{text-align:center;font-size:11px;color:var(--muted);margin-bottom:12px}
.recap-visual .elevation{width:100%;height:auto;display:block}

/* Détail étape : section « Où trouver de l'eau » */
.water-sec{border-left:3px solid var(--water);background:var(--soft);padding:10px 14px;margin-bottom:18px}
.water-sec .sec-h{color:var(--water);margin-bottom:6px}
.water-sec p{font-size:13.5px;line-height:1.55}
.water-sec b{font-weight:600;color:var(--ink)}

/* Détail étape : ombre & baignades */
.shade-sec{border-left:3px solid var(--warn);background:var(--warnbg);padding:10px 14px;margin-bottom:18px}
.shade-sec .sec-h{color:var(--warn);margin-bottom:6px}
.swim-sec{border-left:3px solid var(--water);background:var(--soft);padding:10px 14px;margin-bottom:18px}
.swim-sec .sec-h{color:var(--water);margin-bottom:6px}
.shade-sec p,.swim-sec p{font-size:13.5px;line-height:1.55}
.shade-sec b,.swim-sec b{font-weight:600;color:var(--ink)}

/* Carte : popups thématisés + popup riche d'étape */
.leaflet-popup-content-wrapper,.leaflet-popup-tip{background:var(--panel);color:var(--ink);box-shadow:0 1px 8px rgba(0,0,0,.28)}
.leaflet-popup-content{margin:10px 12px;font:inherit;line-height:1.5}
.leaflet-popup-content a{color:var(--link)}
.map-pop b{font-size:13.5px;color:var(--ink)}
.map-pop .mp-s{font-size:12px;color:var(--muted);margin:3px 0}
.map-pop .mp-w{font-size:12px;line-height:1.45;margin:5px 0;color:var(--ink)}
.map-pop .mp-n{font-size:12.5px;margin-top:5px;color:var(--ink)}
.map-pop .mp-tel{font-size:12px;color:var(--link);font-weight:600;text-decoration:none}
.map-pop .mp-go{margin-top:9px;width:100%;background:var(--green);color:#fff;border:none;padding:7px;font:inherit;font-size:13px;font-weight:600;cursor:pointer}
.map-pop .mp-go:active{opacity:.85}

/* ⚠️ **Ce bloc doit rester le DERNIER du fichier.** Il a d'abord été placé à côté des autres
   media queries, vers le milieu : `.vig-cards`, `.tools-grid` et `.board-stats` sont définis
   plus bas, à spécificité égale, et gagnaient donc. Résultat, la mise en page bureau
   s'appliquait à moitié — la barre latérale marchait, les grilles restaient en une colonne.
   Une media query ne l'emporte pas sur une règle simple : seul l'ordre les départage. */

/* ─── Ordinateur (≥1024px) ────────────────────────────────────────────────────
   ⚠️ Une barre d'onglets collée en bas d'un écran de 27 pouces est un réflexe de
   téléphone égaré : le pouce n'y est pas, la souris doit traverser l'écran, et
   1 000 px de noir restent vides de chaque côté. Sur grand écran la navigation
   passe à gauche, en colonne, et le contenu respire au centre.
   Le DOM ne change pas : c'est la même application, relayoutée. */
@media (min-width:1024px){
  :root{ --rail:224px; }

  #app{max-width:none;margin:0 0 0 var(--rail);padding-bottom:40px;
       border-left:1px solid var(--line);min-height:100vh}

  .tabbar{left:0;right:auto;bottom:auto;top:0;transform:none;
    width:var(--rail);max-width:none;height:100vh;
    grid-template-columns:1fr;grid-auto-rows:min-content;align-content:start;
    border-top:none;border-right:1px solid var(--line);
    padding:78px 12px 0;gap:2px}
  .tabbar button{flex-direction:row;justify-content:flex-start;gap:12px;
    padding:11px 14px;font-size:14px;letter-spacing:0;border-radius:0}
  .tabbar button svg{width:19px;height:19px;flex:none}
  .tabbar button:hover{background:var(--soft);color:var(--ink)}
  .tabbar button.active{background:var(--soft);color:var(--hike);font-weight:600;
    box-shadow:inset 2px 0 0 var(--hike)}

  /* Le titre du rail : l'identité passe à gauche, la barre du haut ne porte plus
     que le titre de l'écran courant. */
  .tabbar::before{content:'Costa Brava 2026';position:absolute;top:26px;left:26px;
    font:600 12px/1.3 var(--serif);letter-spacing:1.6px;text-transform:uppercase;
    color:var(--green)}

  .topbar{padding-left:34px;padding-right:34px}
  .topbar .kick{display:none}
  .view{padding:26px 34px 0;max-width:1120px}

  /* Les grilles denses ont enfin la place de l'être. */
  .board-stats{gap:44px}
  .vig-cards{grid-template-columns:repeat(3,1fr);gap:22px}
  /* ⚠️ `.tools-4 .tools-grid` existe plus haut et pèse (0,2,0) : un `.tools-grid` seul ne
     l'emporte pas, même déclaré après. Il faut viser à spécificité au moins égale. */
  .tools-grid,
  .tools-3 .tools-grid,
  .tools-4 .tools-grid{grid-template-columns:repeat(4,1fr)}
  .tools-5 .tools-grid{grid-template-columns:repeat(5,1fr)}
  .plan-grid{grid-template-columns:repeat(4,1fr)}

  /* La carte prend la hauteur disponible, il n'y a plus de barre en bas. */
  #map{height:calc(100vh - 190px);height:calc(100dvh - 190px)}
}

/* Très grand écran : la liste des étapes se lit en deux colonnes plutôt que de
   s'étirer sur 1 400 px, où l'œil perd la ligne entre le numéro et le titre. */
@media (min-width:1400px){
  .view{max-width:1320px}
  .stage-list{display:grid;grid-template-columns:1fr 1fr;column-gap:30px}
  .stage-list .grp-h{grid-column:1 / -1}
  .lex-cat{break-inside:avoid}
  #lexResults{columns:2;column-gap:34px}
}

/* Risque incendie (Pla Alfa) — le chiffre doit se lire d'un coup d'œil, et sa couleur
   suivre l'échelle officielle : vert 0, jaune 1, orange 2, rouge 3, pourpre 4. */
.risk-row{display:flex;align-items:center;gap:14px;margin:9px 0 6px}
.risk-n{font-family:var(--serif);font-size:30px;line-height:1;width:46px;height:46px;
  display:flex;align-items:center;justify-content:center;flex:none;font-weight:600}
/* ⚠️ **La luminance décroît strictement du niveau 0 au niveau 4**, et c'est le point qui
   compte plus que la teinte. L'ancienne échelle montait puis redescendait (15,5 · 32,5 · 40,5
   · 30,9 · 18,4 en luminance perçue) : en niveaux de gris, ou pour un œil deutéranope, le
   niveau 1 et le niveau 2 se confondaient. Mesuré : écart perceptuel de 0,092, sous le seuil
   de distinction. La nouvelle rampe descend de 47,5 à 2,3 : « plus c'est sombre, plus c'est
   grave » se lit sans couleur du tout.
   ⚠️ La couleur du chiffre bascule avec le fond : sombre sur les deux premiers niveaux, blanc
   ensuite. Un blanc uniforme donnait 2,00:1 sur le niveau 0, soit illisible au soleil. */
.risk-0{background:#9cc0a6;color:#161a17} .risk-1{background:#b08d1e;color:#161a17}
.risk-2{background:#a05416;color:#fff} .risk-3{background:#872a26;color:#fff}
.risk-4{background:#48192e;color:#fff}
.risk-row > div b{display:block;font-family:var(--serif);font-size:16px}
.risk-row > div span{display:block}
.risk-hi{border-left:3px solid var(--warn);padding-left:12px;background:var(--warnbg)}

/* Carnet : photo du jour et actions */
.jour-photo{display:block;width:100%;max-height:260px;object-fit:cover;margin-top:9px;
  border:1px solid var(--line)}
.jour-actions{display:flex;align-items:center;gap:10px;margin-top:8px;flex-wrap:wrap}
.fld-inline{width:100%;padding:9px 11px;background:var(--bg);color:var(--ink);
  border:1px solid var(--line);font:inherit;font-size:15px}

/* ⚠️ **Noir absolu, en option et pas par défaut.** Sur un écran OLED, un pixel n'est
   réellement éteint qu'à #000000. Le fond actuel #151815 a une luminance relative de 0,87 % :
   l'économie apportée par le noir pur est donc réelle mais **petite**, bien plus petite que
   celle déjà obtenue en passant du thème clair au thème sombre. Elle est offerte comme un
   réglage plutôt qu'imposée, parce qu'elle coûte le gris légèrement vert qui donne au dossier
   son caractère, et que sur certains écrans le texte fin sur noir pur bave. */
:root.sombre[data-noir="1"]{
  --bg:#000000; --panel:#0a0c0a; --soft:#111311; --line:#232823;
}

/* Case à cocher de réglage, alignée sur les champs existants */
.fld-check{display:flex;align-items:center;gap:10px;margin:10px 0;cursor:pointer;font-size:15px}
.fld-check input{width:20px;height:20px;accent-color:var(--hike)}

/* Les tuiles claires d'OSM sont adoucies en thème sombre. */
.sombre .leaflet-tile{filter:brightness(.72) contrast(1.05) saturate(.75)}

/* Choix segmenté (thème). Plat, sans arrondi, comme le reste. */
.segmente{display:flex;border:1px solid var(--line);margin:10px 0}
.segmente button{flex:1;background:none;border:none;border-left:1px solid var(--line);
  padding:10px 8px;font:inherit;font-size:14.5px;color:var(--muted);cursor:pointer}
.segmente button:first-child{border-left:none}
.segmente button.on{background:var(--soft);color:var(--ink);font-weight:600;
  box-shadow:inset 0 -2px 0 var(--hike)}
.fld-check.inactif{opacity:.5}

/* ─── Mode marche ─────────────────────────────────────────────────────────────
   Gros caractères, peu d'éléments, lisible à bout de bras au soleil. Rien ici ne
   doit concurrencer les quatre nombres qui décident de la journée. */
.m-heure{font-family:var(--serif);font-size:34px;color:var(--muted);text-align:right;
  margin:2px 0 10px;font-variant-numeric:tabular-nums}
.m-bloc{padding:16px 0;border-top:1px solid var(--line)}
.m-grand{font-family:var(--serif);font-size:44px;line-height:1.05;font-variant-numeric:tabular-nums}
.m-moyen{font-family:var(--serif);font-size:24px;line-height:1.15}
.m-unite{font-size:17px;color:var(--muted);margin-left:8px;font-family:inherit}
.m-sous{font-size:15px;color:var(--muted);margin-top:5px}
.m-pivot{margin-top:10px;padding:9px 11px;background:var(--soft);font-size:14.5px}
.m-large .m-grand{color:var(--ok)}
.m-juste{background:var(--warnbg);padding-left:12px;border-left:3px solid var(--warn)}
.m-juste .m-grand{color:var(--warn)}
.m-depasse{background:var(--warnbg);padding-left:12px;border-left:3px solid #b1543f}
.m-depasse .m-grand{color:#b1543f}
.m-eau{display:flex;gap:8px;margin-top:11px;flex-wrap:wrap}
.m-eau button{background:none;border:1px solid var(--line);padding:9px 13px;font:inherit;
  font-size:14.5px;color:var(--ink);cursor:pointer}
.m-eau button:active{background:var(--soft)}
.m-pied{display:flex;align-items:center;gap:12px;flex-wrap:wrap;
  padding-top:16px;border-top:1px solid var(--line);margin-top:4px}
.m-gps{font-size:13.5px;color:var(--muted)}
.m-vide{padding:26px 0;color:var(--muted)}
.hero-marche{display:block;margin-top:12px;background:var(--panel);color:var(--ink);
  border:1px solid var(--line);padding:12px 15px;font:inherit;font-size:16px;font-weight:600;
  width:100%;text-align:left;cursor:pointer}
.ev-mark.ev-moi{fill:var(--goal);stroke:var(--panel);stroke-width:2.5}
/* Le lien vers le dossier de secours : discret, mais toujours au même endroit. */
.lien-secours{margin-top:14px;padding-top:12px;border-top:1px solid var(--line)}
.lien-secours a{font-weight:600}