/* =========================================================
   Carnet de voyage La Réunion
   Design system — outil dense, une seule famille de texte,
   des chiffres tabulaires, un accent unique, la couleur
   réservée aux catégories et aux états.
   ========================================================= */

/* ---------------------------------------------------------
   1. JETONS
   --------------------------------------------------------- */
:root{
  color-scheme: light dark;

  /* surfaces */
  --sink:#f1f2f4;          /* fond de la colonne latérale */
  --bg:#f7f8f9;            /* toile de l'app */
  --panel:#ffffff;
  --panel-2:#f4f5f7;
  --panel-3:#eceef1;

  /* traits */
  --line:#e4e7ea;
  --line-2:#d5d9de;
  --line-3:#c2c8ce;

  /* texte */
  --tx:#101418;
  --tx-2:#4c565f;
  --tx-3:#79848d;
  --tx-4:#9aa4ac;

  /* accent */
  --ac:#0b6b5b;
  --ac-hover:#095548;
  --ac-tx:#0b6b5b;
  --ac-soft:#e8f2f0;
  --ac-line:#b9d8d1;

  /* états */
  --warn:#b4531f;
  --warn-soft:#fdf0e7;
  --danger:#b02a2a;
  --danger-soft:#fceceb;
  --ok:#1c7a4a;
  --ok-soft:#e7f4ec;

  /* forme */
  --r-sm:5px;
  --r:7px;
  --r-lg:11px;
  --shadow-1:0 1px 2px rgba(16,24,32,.05);
  --shadow-2:0 2px 4px rgba(16,24,32,.06), 0 8px 24px rgba(16,24,32,.07);
  --shadow-3:0 12px 48px rgba(16,24,32,.18);
  --ring:0 0 0 3px color-mix(in srgb, var(--ac) 20%, transparent);

  /* mesures */
  --side-w:248px;
  --nav-h:56px;
  --top-h:52px;
  --safe-b:env(safe-area-inset-bottom, 0px);
  --content-w:1140px;

  --f-ui:'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --f-num:'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;
}

@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --sink:#0c0f11;
    --bg:#101416;
    --panel:#171c1f;
    --panel-2:#1d2327;
    --panel-3:#242b30;

    --line:#262d32;
    --line-2:#323b41;
    --line-3:#414c53;

    --tx:#e9eef1;
    --tx-2:#aab5bc;
    --tx-3:#7e8a92;
    --tx-4:#606c74;

    --ac:#2ea88d;
    --ac-hover:#3dbb9e;
    --ac-tx:#4fc7a9;
    --ac-soft:#12302a;
    --ac-line:#1f4d43;

    --warn:#e08a4e;
    --warn-soft:#2e2015;
    --danger:#e06a63;
    --danger-soft:#2e1917;
    --ok:#4cbb82;
    --ok-soft:#122a1f;

    --shadow-1:0 1px 2px rgba(0,0,0,.4);
    --shadow-2:0 2px 4px rgba(0,0,0,.4), 0 8px 24px rgba(0,0,0,.35);
    --shadow-3:0 12px 48px rgba(0,0,0,.6);
  }
}
[data-theme="dark"]{
  --sink:#0c0f11; --bg:#101416; --panel:#171c1f; --panel-2:#1d2327; --panel-3:#242b30;
  --line:#262d32; --line-2:#323b41; --line-3:#414c53;
  --tx:#e9eef1; --tx-2:#aab5bc; --tx-3:#7e8a92; --tx-4:#606c74;
  --ac:#2ea88d; --ac-hover:#3dbb9e; --ac-tx:#4fc7a9; --ac-soft:#12302a; --ac-line:#1f4d43;
  --warn:#e08a4e; --warn-soft:#2e2015; --danger:#e06a63; --danger-soft:#2e1917;
  --ok:#4cbb82; --ok-soft:#122a1f;
  --shadow-1:0 1px 2px rgba(0,0,0,.4);
  --shadow-2:0 2px 4px rgba(0,0,0,.4), 0 8px 24px rgba(0,0,0,.35);
  --shadow-3:0 12px 48px rgba(0,0,0,.6);
}

/* ---------------------------------------------------------
   2. BASE
   --------------------------------------------------------- */
*{box-sizing:border-box;}
html,body{margin:0; padding:0; height:100%;}
body{
  background:var(--bg); color:var(--tx);
  font-family:var(--f-ui);
  font-size:13.5px; line-height:1.5;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overscroll-behavior-y:none;
}
h1,h2,h3,h4{margin:0; font-weight:600; letter-spacing:-.014em; line-height:1.25;}
p{margin:0;}
button,input,textarea,select{font-family:inherit; font-size:inherit; color:inherit;}
button{cursor:pointer;}
a{color:var(--ac-tx); text-decoration:none;}
a:hover{text-decoration:underline;}
[hidden]{display:none !important;}
svg{display:block;}
::selection{background:color-mix(in srgb, var(--ac) 24%, transparent);}

.mono{font-family:var(--f-num); font-variant-numeric:tabular-nums; letter-spacing:-.02em;}
.num{font-family:var(--f-num); font-variant-numeric:tabular-nums; letter-spacing:-.03em; font-weight:500;}

:focus-visible{outline:none; box-shadow:var(--ring); border-radius:var(--r-sm);}

::-webkit-scrollbar{width:11px; height:11px;}
::-webkit-scrollbar-track{background:transparent;}
::-webkit-scrollbar-thumb{background:var(--line-2); border:3px solid transparent; background-clip:content-box; border-radius:8px;}
::-webkit-scrollbar-thumb:hover{background:var(--line-3); border:3px solid transparent; background-clip:content-box;}

/* ---------------------------------------------------------
   3. IDENTITÉ LOCALE (Val / Nolwenn)
   --------------------------------------------------------- */
.who-seg button{padding:2px 9px; font-size:11.5px; min-height:22px;}
.who-seg-m{margin-top:1px;}
.who-seg-m button{font-size:12px;}

/* ---------------------------------------------------------
   4. COQUE DE L'APPLICATION
   --------------------------------------------------------- */
#app{display:flex; min-height:100vh;}

/* ---------- colonne latérale (desktop) ---------- */
.side{
  display:none;
  width:var(--side-w); flex:none;
  background:var(--sink); border-right:1px solid var(--line);
  padding:16px 12px 12px;
  position:sticky; top:0; height:100vh;
  flex-direction:column; gap:4px;
}
.side-brand{display:flex; align-items:center; gap:9px; padding:4px 8px 16px;}
.side-brand .glyph{
  width:28px; height:28px; border-radius:7px; background:var(--ac);
  display:grid; place-items:center; color:#fff; flex:none;
}
.side-brand .glyph svg{width:16px; height:16px; stroke:currentColor; fill:none; stroke-width:1.7;}
.side-brand b{font-size:13.5px; font-weight:600; letter-spacing:-.01em; display:block;}
.side-brand span{font-size:11.5px; color:var(--tx-3); display:block; margin-top:1px;}

.trip-block{
  background:var(--panel); border:1px solid var(--line); border-radius:var(--r);
  padding:12px 13px; margin-bottom:14px;
}
.trip-count{display:flex; align-items:baseline; gap:7px;}
.trip-count .v{font-family:var(--f-num); font-size:27px; font-weight:600; letter-spacing:-.04em; line-height:1;}
.trip-count .u{font-size:11.5px; color:var(--tx-3); line-height:1.3;}
.trip-dates{
  margin-top:11px; padding-top:10px; border-top:1px solid var(--line);
  display:grid; gap:7px;
}
.trip-date{display:flex; align-items:center; justify-content:space-between; gap:8px;}
.trip-date label{
  font-size:10.5px; font-weight:600; text-transform:uppercase; letter-spacing:.07em;
  color:var(--tx-4); margin:0;
}
.trip-date input{
  width:auto; flex:none; padding:3px 6px; font-size:12px;
  background:var(--panel-2); border:1px solid transparent; border-radius:var(--r-sm);
  font-family:var(--f-num); letter-spacing:-.02em; color:var(--tx);
}
.trip-date input:hover{border-color:var(--line-2);}
.trip-hint{font-size:11px; color:var(--tx-4); margin-top:9px; line-height:1.4;}
.trip-hint.strong{color:var(--ac-tx); font-weight:500;}

.side-label{
  font-size:10.5px; font-weight:600; text-transform:uppercase; letter-spacing:.09em;
  color:var(--tx-4); padding:0 8px; margin:6px 0 6px;
}
.side-nav{display:grid; gap:1px;}
.side-nav .tab{
  display:flex; align-items:center; gap:10px; width:100%;
  background:none; border:none; border-radius:var(--r-sm);
  padding:0 9px; height:31px; color:var(--tx-2); font-size:13px; font-weight:450;
  text-align:left;
}
.side-nav .tab .icon{color:var(--tab, var(--tx-3)); flex:none; opacity:.85;}
.side-nav .tab .lbl{flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.side-nav .tab .n{
  font-family:var(--f-num); font-size:11px; color:var(--tx-4);
  font-variant-numeric:tabular-nums;
}
.side-nav .tab:hover{background:var(--panel-3); color:var(--tx);}
.side-nav .tab.active{background:var(--panel); color:var(--tx); font-weight:550; box-shadow:var(--shadow-1);}
.side-nav .tab.active .icon{opacity:1;}
.side-nav .tab.active .n{color:var(--tx-3);}

.side-foot{margin-top:auto; padding:12px 8px 0; border-top:1px solid var(--line);}
.side-user{display:flex; align-items:center; gap:8px; min-width:0;}
.side-user .who{flex:1; min-width:0;}
.side-user .who b{display:block; font-size:12px; font-weight:550; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.side-user .who span{display:block; font-size:11px; color:var(--tx-4);}

/* ---------- espace de travail ---------- */
.work{flex:1; min-width:0; display:flex; flex-direction:column;}

.topbar{
  position:sticky; top:0; z-index:30;
  background:color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter:saturate(1.6) blur(10px);
  border-bottom:1px solid var(--line);
}
.topbar-in{
  max-width:var(--content-w); margin:0 auto; width:100%;
  min-height:var(--top-h); padding:0 20px;
  display:flex; align-items:center; gap:12px;
}
.topbar h1{font-size:15px; font-weight:600;}
.topbar .cnt{
  font-family:var(--f-num); font-size:11.5px; color:var(--tx-3);
  background:var(--panel-2); border:1px solid var(--line);
  padding:1px 7px; border-radius:20px;
}
.topbar .spacer{flex:1;}
.mobile-brand{display:none; align-items:center; gap:8px; min-width:0;}
.mobile-brand .glyph{width:24px; height:24px; border-radius:6px; background:var(--ac); display:grid; place-items:center; color:#fff; flex:none;}
.mobile-brand .glyph svg{width:14px; height:14px; stroke:currentColor; fill:none; stroke-width:1.8;}

main{
  flex:1; width:100%; max-width:var(--content-w); margin:0 auto;
  padding:20px 20px calc(var(--nav-h) + var(--safe-b) + 28px);
}
.panel{display:none;}
.panel.active{display:block; animation:fade .16s ease-out;}
@keyframes fade{from{opacity:0; transform:translateY(3px);} to{opacity:1; transform:none;}}

/* ---------- barre de navigation mobile ---------- */
.bottom-nav{
  position:fixed; left:0; right:0; bottom:0; z-index:40;
  background:color-mix(in srgb, var(--panel) 92%, transparent);
  backdrop-filter:saturate(1.6) blur(14px);
  border-top:1px solid var(--line); padding-bottom:var(--safe-b);
}
.nav-inner{display:flex; max-width:560px; margin:0 auto;}
.bottom-nav .tab{
  flex:1; background:none; border:none; color:var(--tx-4);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px;
  font-size:10px; font-weight:500; height:var(--nav-h); position:relative;
}
.bottom-nav .tab .n{display:none;}
.bottom-nav .tab .icon{color:currentColor;}
.bottom-nav .tab.active{color:var(--tab, var(--ac-tx));}
.bottom-nav .tab.active::before{
  content:""; position:absolute; top:0; left:50%; transform:translateX(-50%);
  width:22px; height:2px; border-radius:0 0 2px 2px; background:currentColor;
}
.tab svg{width:19px; height:19px; fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round;}
.tab[data-tab="logements"]{--tab:#35569e;}
.tab[data-tab="agenda"]   {--tab:#1c72b8;}
.tab[data-tab="activites"]{--tab:#c1440e;}
.tab[data-tab="carte"]    {--tab:#5c8a1b;}
.tab[data-tab="budget"]   {--tab:#a8720c;}
.tab[data-tab="guide"]    {--tab:#7a4ea8;}

/* ---------- bandeau voyage, version mobile ---------- */
.trip-strip{
  display:flex; gap:10px; align-items:center; overflow-x:auto;
  padding:10px 0 14px; margin-bottom:4px;
  border-bottom:1px solid var(--line); scrollbar-width:none;
}
.trip-strip::-webkit-scrollbar{display:none;}
.strip-cell{flex:none; padding-right:14px; border-right:1px solid var(--line);}
.strip-cell:last-child{border-right:none;}
.strip-cell .k{font-size:10px; font-weight:600; text-transform:uppercase; letter-spacing:.08em; color:var(--tx-4);}
.strip-cell .v{font-family:var(--f-num); font-size:15px; font-weight:600; letter-spacing:-.03em; margin-top:2px; white-space:nowrap;}
.strip-cell .v small{font-family:var(--f-ui); font-size:11px; font-weight:400; color:var(--tx-3); letter-spacing:0;}

@media(min-width:1000px){
  .side{display:flex;}
  .trip-strip{display:none;}
  .bottom-nav{display:none;}
  main{padding-bottom:44px;}
}
@media(max-width:999px){
  .mobile-brand{display:flex;}
  .topbar-in{padding:0 16px;}
  main{padding:16px 16px calc(var(--nav-h) + var(--safe-b) + 28px);}
}

/* ---------------------------------------------------------
   5. CONTRÔLES
   --------------------------------------------------------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:7px;
  height:32px; padding:0 12px; border-radius:var(--r-sm);
  background:var(--panel); border:1px solid var(--line-2); color:var(--tx);
  font-size:13px; font-weight:500; white-space:nowrap;
  box-shadow:var(--shadow-1); transition:background .12s, border-color .12s;
}
.btn:hover{background:var(--panel-2); border-color:var(--line-3);}
.btn:active{background:var(--panel-3);}
.btn svg{width:15px; height:15px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round;}
.btn.primary{
  background:var(--ac); border-color:var(--ac); color:#fff;
  box-shadow:var(--shadow-1), inset 0 1px 0 rgba(255,255,255,.14);
}
.btn.primary:hover{background:var(--ac-hover); border-color:var(--ac-hover);}
.btn.ghost{background:transparent; border-color:transparent; box-shadow:none; color:var(--tx-2);}
.btn.ghost:hover{background:var(--panel-2); color:var(--tx);}
.btn.danger{background:var(--danger); border-color:var(--danger); color:#fff;}
.btn.danger:hover{filter:brightness(1.08);}
.btn.sm{height:27px; padding:0 9px; font-size:12px; border-radius:var(--r-sm);}
.btn.sm svg{width:13px; height:13px;}
.btn.wide{width:100%;}
.btn[disabled]{opacity:.45; pointer-events:none;}
.btn-row{display:flex; gap:7px; flex-wrap:wrap; align-items:center;}

.icon-btn{
  width:28px; height:28px; flex:none; display:grid; place-items:center;
  background:none; border:1px solid transparent; border-radius:var(--r-sm);
  color:var(--tx-4); transition:background .12s, color .12s;
}
.icon-btn svg{width:15px; height:15px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round;}
.icon-btn:hover{background:var(--panel-2); color:var(--tx);}
.icon-btn.del:hover{background:var(--danger-soft); color:var(--danger);}

input[type="text"], input[type="email"], input[type="number"], input[type="url"],
input[type="date"], input[type="datetime-local"], input[type="search"], textarea, select{
  width:100%; background:var(--panel); color:var(--tx);
  border:1px solid var(--line-2); border-radius:var(--r-sm);
  padding:7px 10px; font-size:13.5px; line-height:1.4;
  transition:border-color .12s, box-shadow .12s;
  min-height:34px;
}
input[type="date"], input[type="datetime-local"], input[type="number"]{font-family:var(--f-num); font-variant-numeric:tabular-nums; letter-spacing:-.02em;}
input:hover, textarea:hover{border-color:var(--line-3);}
input:focus, textarea:focus, select:focus{outline:none; border-color:var(--ac); box-shadow:var(--ring);}
input::placeholder, textarea::placeholder{color:var(--tx-4);}
textarea{min-height:70px; resize:vertical; line-height:1.55;}
input[type="file"]{
  border:1px dashed var(--line-2); background:var(--panel-2); color:var(--tx-3);
  padding:9px 10px; font-size:12.5px; cursor:pointer;
}
input[type="file"]:hover{border-color:var(--ac-line); background:var(--ac-soft);}
label{
  display:block; font-size:11px; font-weight:600; color:var(--tx-3);
  letter-spacing:.02em; margin-bottom:5px;
}
.hint{font-size:11.5px; color:var(--tx-4); line-height:1.45; margin-top:5px;}
.hint code{font-family:var(--f-num); font-size:11px; background:var(--panel-2); padding:1px 4px; border-radius:3px;}

/* champ de recherche */
.search{position:relative; flex:1; min-width:0; max-width:280px;}
.search svg{
  position:absolute; left:9px; top:50%; transform:translateY(-50%);
  width:14px; height:14px; stroke:var(--tx-4); fill:none; stroke-width:1.8; pointer-events:none;
}
.search input{padding-left:29px; height:30px; min-height:30px; font-size:13px; background:var(--panel-2); border-color:transparent;}
.search input:hover{background:var(--panel); border-color:var(--line-2);}
.search input:focus{background:var(--panel);}

/* segments */
.seg{display:inline-flex; background:var(--panel-2); border:1px solid var(--line); border-radius:var(--r-sm); padding:2px; gap:2px;}
.seg button{
  background:none; border:none; border-radius:4px; padding:0 10px; height:24px;
  font-size:12px; font-weight:500; color:var(--tx-3); white-space:nowrap;
}
.seg button:hover{color:var(--tx);}
.seg button.active{background:var(--panel); color:var(--tx); box-shadow:var(--shadow-1);}

/* pastilles de choix (formulaires) */
.chip-group{display:flex; gap:5px; flex-wrap:wrap;}
.chip-option{
  display:inline-flex; align-items:center; gap:6px;
  height:29px; padding:0 10px; border-radius:var(--r-sm);
  background:var(--panel); border:1px solid var(--line-2); color:var(--tx-2);
  font-size:12.5px; font-weight:500; transition:.12s;
}
.chip-option:hover{border-color:var(--line-3); color:var(--tx);}
.chip-option.selected{
  color:var(--pick, var(--ac-tx)); border-color:currentColor; font-weight:600;
  background:color-mix(in srgb, currentColor 10%, var(--panel));
}
.chip-dot{width:7px; height:7px; border-radius:50%; flex:none; background:currentColor;}
.chip-option .k-ico{width:14px; height:14px;}

/* filtres (barre d'outils) */
.filters{display:flex; gap:5px; flex-wrap:wrap; align-items:center;}
.fchip{
  display:inline-flex; align-items:center; gap:6px;
  height:26px; padding:0 9px; border-radius:20px;
  background:var(--panel); border:1px solid var(--line); color:var(--tx-3);
  font-size:11.5px; font-weight:500; transition:.12s;
}
.fchip:hover{border-color:var(--line-3); color:var(--tx);}
.fchip .fdot{width:7px; height:7px; border-radius:50%; flex:none;}
.fchip .fn{font-family:var(--f-num); font-size:10.5px; color:var(--tx-4);}
.fchip.on{
  border-color:currentColor; color:var(--pick, var(--ac-tx));
  background:color-mix(in srgb, currentColor 11%, var(--panel)); font-weight:600;
}
.fchip.on .fn{color:inherit; opacity:.75;}
.fchip.mute{opacity:.5;}

.checkbox-row{display:flex; align-items:center; gap:9px;}
.checkbox-row input[type="checkbox"]{width:16px; height:16px; min-height:0; flex:none; accent-color:var(--ac); margin:0;}
.checkbox-row label{margin:0; font-size:13px; font-weight:450; color:var(--tx);}

/* ---------------------------------------------------------
   6. BARRE D'OUTILS DE PANNEAU
   --------------------------------------------------------- */
.toolbar{
  display:flex; align-items:center; gap:9px; flex-wrap:wrap;
  padding:0 0 12px; margin-bottom:14px; border-bottom:1px solid var(--line);
}
.toolbar .spacer{flex:1;}
.toolbar-meta{font-size:12px; color:var(--tx-3); font-variant-numeric:tabular-nums;}

/* ---------------------------------------------------------
   7. FORMULAIRE REPLIABLE
   --------------------------------------------------------- */
.form-block{margin-bottom:18px;}
.form-toggle{
  display:none; /* remplacé par le bouton de la barre d'outils */
}
.form-grid{
  background:var(--panel); border:1px solid var(--line);
  border-radius:var(--r-lg); box-shadow:var(--shadow-1);
  padding:18px; display:grid; gap:15px;
  animation:fade .16s ease-out;
}
.form-grid.editing{border-color:var(--ac-line); box-shadow:var(--shadow-1), 0 0 0 3px var(--ac-soft);}
.form-head{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  margin:-2px 0 -2px;
}
.form-head h3{font-size:14px;}
.form-head .badge-edit{
  font-size:10.5px; font-weight:600; text-transform:uppercase; letter-spacing:.06em;
  color:var(--ac-tx); background:var(--ac-soft); border:1px solid var(--ac-line);
  padding:1px 7px; border-radius:20px;
}
.form-row{display:flex; gap:11px; flex-wrap:wrap;}
.form-row > *{flex:1; min-width:132px;}
.fieldset{
  background:var(--panel-2); border:1px solid var(--line);
  border-radius:var(--r); padding:14px;
}
.fieldset > label:first-child{margin-bottom:8px;}

/* zone "coller / capture" */
.assist{
  border:1px solid var(--ac-line); background:var(--ac-soft);
  border-radius:var(--r); padding:11px 13px;
}
.assist-toggle{
  display:flex; align-items:center; gap:8px; width:100%;
  background:none; border:none; padding:0; text-align:left;
  font-size:12.5px; font-weight:600; color:var(--ac-tx);
}
.assist-toggle svg{width:15px; height:15px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; flex:none;}
.assist-toggle .chev{margin-left:auto; transition:transform .16s;}
.assist-toggle[aria-expanded="true"] .chev{transform:rotate(90deg);}
.assist-body{margin-top:11px; display:grid; gap:9px;}
.assist .hint{color:color-mix(in srgb, var(--ac-tx) 70%, var(--tx-3));}

/* ---------------------------------------------------------
   8. CONTENU : cartes, lignes, étiquettes
   --------------------------------------------------------- */
.card{
  position:relative;
  background:var(--panel); border:1px solid var(--line); border-radius:var(--r-lg);
  box-shadow:var(--shadow-1); margin-bottom:8px;
  transition:border-color .12s, box-shadow .12s;
}
.card:hover{border-color:var(--line-2);}
.card-hd{
  display:flex; align-items:flex-start; gap:12px;
  padding:13px 14px 0;
}
.card-hd .rail{
  width:3px; align-self:stretch; border-radius:2px; flex:none; margin:2px 0;
  background:var(--cat, var(--line-2));
}
.card-hd .main{flex:1; min-width:0;}
.card-hd h3{font-size:14.5px; font-weight:600; display:flex; align-items:center; gap:7px; flex-wrap:wrap;}
.card-hd .meta{margin-top:4px;}
.card-bd{padding:9px 14px 0;}
.card-bd p{font-size:13px; color:var(--tx-2); line-height:1.55;}
.card-ft{
  display:flex; align-items:center; gap:6px; flex-wrap:wrap;
  padding:11px 14px 13px;
}
.card-ft .spacer{flex:1;}
.card.is-past{opacity:.55;}
.card.is-past:hover{opacity:1;}

.card-actions{display:flex; gap:1px; flex:none; margin:-4px -6px 0 0;}

.meta{
  display:flex; align-items:center; gap:6px; flex-wrap:wrap;
  font-size:12px; color:var(--tx-3);
}
.meta .sep{color:var(--line-3);}
.meta .pin{display:inline-flex; align-items:center; gap:4px;}
.meta .pin svg{width:12px; height:12px; stroke:currentColor; fill:none; stroke-width:1.8;}

.tag{
  display:inline-flex; align-items:center; gap:5px;
  height:20px; padding:0 7px; border-radius:4px;
  font-size:11px; font-weight:600; letter-spacing:.01em; white-space:nowrap;
  color:var(--cat, var(--tx-2));
  background:color-mix(in srgb, var(--cat, var(--tx-3)) 12%, var(--panel));
}
.tag .dot{width:6px; height:6px; border-radius:50%; background:currentColor;}
.tag.neutral{--cat:var(--tx-3); color:var(--tx-2); background:var(--panel-2); border:1px solid var(--line);}
.tag.ok{--cat:var(--ok); background:var(--ok-soft); color:var(--ok);}
.tag.warn{--cat:var(--warn); background:var(--warn-soft); color:var(--warn);}
.tag.bad{--cat:var(--danger); background:var(--danger-soft); color:var(--danger);}
.tag svg{width:12px; height:12px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round;}

.kv{
  display:inline-flex; align-items:center; gap:5px; height:22px; padding:0 8px;
  border:1px solid var(--line); border-radius:var(--r-sm); background:var(--panel);
  font-size:12px; color:var(--tx-2); white-space:nowrap;
}
.kv svg{width:12px; height:12px; fill:none; stroke:var(--tx-4); stroke-width:1.8; stroke-linecap:round;}
.kv b{font-family:var(--f-num); font-weight:500; color:var(--tx); letter-spacing:-.02em;}
.kv.free{color:var(--ok); border-color:color-mix(in srgb, var(--ok) 35%, var(--line)); background:var(--ok-soft);}

.k-ico{width:15px; height:15px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; flex:none;}
.k-ico-wrap{display:inline-flex; color:var(--cat);}

.link-ext{
  display:inline-flex; align-items:center; gap:5px; font-size:12px;
  color:var(--tx-2); max-width:100%;
}
.link-ext .fav{width:14px; height:14px; border-radius:3px; flex:none; background:var(--panel-2); border:1px solid var(--line);}
.link-ext .dom{overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.link-ext svg{width:11px; height:11px; stroke:currentColor; fill:none; stroke-width:2; flex:none; opacity:.6;}
.link-ext:hover{color:var(--ac-tx); text-decoration:none;}

/* état vide */
.empty{
  text-align:center; padding:44px 20px;
  border:1px dashed var(--line-2); border-radius:var(--r-lg);
  color:var(--tx-3); font-size:13px; line-height:1.55;
}
.empty b{display:block; color:var(--tx); font-weight:600; font-size:14px; margin-bottom:4px;}
.empty .btn{margin-top:14px;}
.empty .ico{
  width:38px; height:38px; margin:0 auto 12px; border-radius:10px;
  background:var(--panel-2); border:1px solid var(--line); display:grid; place-items:center;
}
.empty .ico svg{width:18px; height:18px; stroke:var(--tx-3); fill:none; stroke-width:1.6;}

/* squelette de chargement */
.skel{display:grid; gap:8px;}
.skel > div{height:64px; border-radius:var(--r-lg); background:linear-gradient(90deg, var(--panel-2) 25%, var(--panel-3) 50%, var(--panel-2) 75%); background-size:200% 100%; animation:shimmer 1.3s infinite;}
@keyframes shimmer{to{background-position:-200% 0;}}

/* ---------------------------------------------------------
   9. STATISTIQUES
   --------------------------------------------------------- */
.stats{
  display:grid; grid-template-columns:repeat(auto-fit, minmax(150px, 1fr)); gap:8px;
  margin-bottom:16px;
}
.stat{
  background:var(--panel); border:1px solid var(--line); border-radius:var(--r);
  padding:11px 13px 12px; box-shadow:var(--shadow-1); min-width:0;
}
.stat .k{font-size:11px; font-weight:600; color:var(--tx-3); letter-spacing:.02em; display:flex; align-items:center; gap:6px;}
.stat .k .sw{width:8px; height:8px; border-radius:2px; flex:none;}
.stat .v{font-family:var(--f-num); font-size:21px; font-weight:600; letter-spacing:-.04em; margin-top:4px; line-height:1.1; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.stat .v small{font-family:var(--f-ui); font-size:11.5px; font-weight:400; color:var(--tx-3); letter-spacing:0; margin-left:3px;}
.stat .d{font-size:11.5px; color:var(--tx-3); margin-top:5px;}
.stat .d.warn{color:var(--warn); font-weight:500;}
.stat .d.ok{color:var(--ok); font-weight:500;}

.balance{
  display:flex; align-items:center; gap:12px; flex-wrap:wrap;
  background:var(--panel); border:1px solid var(--line); border-radius:var(--r);
  padding:11px 14px; margin-bottom:16px; font-size:13px;
}
.balance .who{display:inline-flex; align-items:center; gap:7px; font-weight:550;}
.balance .arrow{color:var(--tx-4);}
.balance .amt{font-family:var(--f-num); font-weight:600; font-size:15px; letter-spacing:-.03em;}
.balance.even{color:var(--tx-3);}

.bars{display:grid; gap:9px; margin-bottom:18px;}
.bar-row{display:grid; grid-template-columns:120px 1fr 80px; gap:10px; align-items:center; font-size:12.5px;}
.bar-row .cat{color:var(--tx-2); overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.bar-row .val{font-family:var(--f-num); text-align:right; color:var(--tx-2); letter-spacing:-.02em;}
.bar-track{height:7px; background:var(--panel-3); border-radius:4px; overflow:hidden;}
.bar-fill{height:100%; background:var(--ac); border-radius:4px; transition:width .3s ease;}
.bar-row .pct{font-family:var(--f-num); font-size:10.5px; color:var(--tx-4); margin-left:5px;}

.avatar{
  width:24px; height:24px; border-radius:50%; flex:none;
  display:inline-grid; place-items:center; color:#fff;
  font-size:10.5px; font-weight:700; letter-spacing:.02em;
}

/* ---------------------------------------------------------
   10. AGENDA
   --------------------------------------------------------- */
.day-head{
  position:sticky; top:var(--top-h); z-index:5;
  display:flex; align-items:baseline; gap:8px;
  background:var(--bg); padding:14px 0 7px; margin-bottom:6px;
  border-bottom:1px solid var(--line-2);
}
.day-head b{font-size:12.5px; font-weight:600;}
.day-head span{font-size:11.5px; color:var(--tx-3);}
.day-head .jn{
  font-family:var(--f-num); font-size:10.5px; font-weight:600; color:var(--tx-3);
  background:var(--panel-2); border:1px solid var(--line); padding:0 6px; border-radius:4px; height:18px; display:inline-flex; align-items:center;
}
.day-head.today b{color:var(--ac-tx);}
.day-head.today .jn{background:var(--ac-soft); color:var(--ac-tx); border-color:var(--ac-line);}
.now-line{
  display:flex; align-items:center; gap:8px; margin:4px 0 10px; color:var(--danger); font-size:10.5px; font-weight:600; text-transform:uppercase; letter-spacing:.08em;
}
.now-line::before{content:""; width:7px; height:7px; border-radius:50%; background:currentColor; flex:none;}
.now-line::after{content:""; flex:1; height:1px; background:currentColor; opacity:.5;}
.past-toggle{
  display:flex; align-items:center; gap:8px; width:100%; margin-bottom:12px;
  background:var(--panel-2); border:1px solid var(--line); border-radius:var(--r);
  padding:8px 12px; font-size:12.5px; color:var(--tx-3); text-align:left;
}
.past-toggle:hover{color:var(--tx); border-color:var(--line-2);}
.past-toggle svg{width:14px; height:14px; stroke:currentColor; fill:none; stroke-width:1.8; transition:transform .16s;}
.past-toggle[aria-expanded="true"] svg{transform:rotate(90deg);}

.ev-time{
  display:flex; align-items:center; gap:7px; font-family:var(--f-num);
  font-size:12.5px; font-weight:500; letter-spacing:-.02em; color:var(--tx);
}
.ev-time .end{color:var(--tx-3);}
.tz-badge{
  font-family:var(--f-ui); font-size:10px; font-weight:600; letter-spacing:.05em; text-transform:uppercase;
  color:var(--tx-4); border:1px solid var(--line); background:var(--panel-2); border-radius:4px; padding:1px 5px;
}

.flight-line{display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-top:8px;}
.flight-num{
  font-family:var(--f-num); font-size:11.5px; font-weight:600; letter-spacing:.02em;
  background:var(--panel-2); border:1px solid var(--line); border-radius:4px; padding:2px 7px;
}
.flight-route{font-family:var(--f-num); font-size:13.5px; font-weight:600; letter-spacing:.02em;}
.flight-route .arr{color:var(--tx-4); margin:0 4px;}
.flight-names{font-size:12px; color:var(--tx-3);}
.flight-map{height:220px; border-radius:var(--r); border:1px solid var(--line); margin:10px 14px 0; overflow:hidden;}
.flight-status:empty{display:none;}
.flight-msg{margin:10px 14px 0; font-size:12.5px; color:var(--tx-3); background:var(--panel-2); border-radius:var(--r-sm); padding:9px 12px;}
.fs-box{margin:10px 14px 0; border:1px solid var(--line); border-radius:var(--r); padding:12px 13px; background:var(--panel-2);}
.fs-top{display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-bottom:10px;}
.fs-status{font-size:10.5px; font-weight:700; border-radius:4px; padding:3px 7px; text-transform:uppercase; letter-spacing:.06em;}
.fs-status.ok{background:var(--ok-soft); color:var(--ok);}
.fs-status.warn{background:var(--warn-soft); color:var(--warn);}
.fs-status.bad{background:var(--danger-soft); color:var(--danger);}
.fs-status.neutral{background:var(--panel-3); color:var(--tx-3);}
.fs-legs{display:flex; gap:12px;}
.fs-leg{flex:1; border-left:2px solid var(--line-2); padding-left:10px;}
.fs-leg-head{font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.09em; color:var(--tx-4); margin-bottom:4px;}
.fs-times{display:flex; align-items:baseline; gap:7px; font-family:var(--f-num); letter-spacing:-.03em;}
.fs-times .mono{font-size:19px; font-weight:600;}
.fs-times .struck{text-decoration:line-through; color:var(--tx-4); font-size:14px; font-weight:400;}
.fs-times .revised{color:var(--warn); font-size:19px; font-weight:600;}
.fs-delay{font-size:11.5px; font-weight:600; color:var(--warn); margin-top:2px;}
.fs-detail{font-size:11.5px; color:var(--tx-3); margin-top:4px; min-height:14px;}

/* ---------------------------------------------------------
   11. ACTIVITÉS
   --------------------------------------------------------- */
.act-grid{display:grid; gap:8px;}
@media(min-width:1000px){ .act-grid{grid-template-columns:1fr 1fr;} }
.act-grid .card{margin:0;}

.done-toggle{
  width:22px; height:22px; flex:none; margin-top:1px;
  border:1.5px solid var(--line-3); border-radius:6px; background:var(--panel);
  display:grid; place-items:center; color:transparent;
  transition:.14s; cursor:pointer;
}
.done-toggle svg{width:13px; height:13px; fill:none; stroke:currentColor; stroke-width:2.6; stroke-linecap:round; stroke-linejoin:round;}
.done-toggle:hover{border-color:var(--ok); background:var(--ok-soft); color:var(--ok);}
.done-toggle.on{background:var(--ok); border-color:var(--ok); color:#fff;}
.card.is-done{background:color-mix(in srgb, var(--ok) 3%, var(--panel));}
.card.is-done h3{color:var(--tx-3); text-decoration:line-through; text-decoration-color:var(--line-3); text-decoration-thickness:1px;}
.card.is-done .card-hd .rail{background:var(--ok);}
.done-when{font-size:11.5px; color:var(--ok); font-weight:500; display:inline-flex; align-items:center; gap:4px;}
.done-when svg{width:12px; height:12px; stroke:currentColor; fill:none; stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round;}

.progress{
  display:flex; align-items:center; gap:10px; font-size:12px; color:var(--tx-3);
}
.progress .track{width:110px; height:5px; background:var(--panel-3); border-radius:3px; overflow:hidden;}
.progress .fill{height:100%; background:var(--ok); border-radius:3px; transition:width .3s;}
.progress b{font-family:var(--f-num); color:var(--tx); font-weight:500;}

/* ---------------------------------------------------------
   12. CARTE
   --------------------------------------------------------- */
.map-wrap{
  position:relative; border:1px solid var(--line); border-radius:var(--r-lg);
  overflow:hidden; box-shadow:var(--shadow-1); background:var(--panel-2);
}
#map{height:min(66vh, 640px); min-height:380px;}
.map-legend{
  position:absolute; left:10px; bottom:10px; z-index:500;
  display:flex; gap:4px; flex-wrap:wrap; max-width:calc(100% - 20px);
}
.map-side{
  position:absolute; top:10px; right:10px; z-index:500; display:flex; gap:6px; flex-direction:column; align-items:flex-end;
}
.map-side .btn{background:color-mix(in srgb, var(--panel) 94%, transparent); backdrop-filter:blur(6px);}
.map-list{margin-top:14px; display:grid; gap:0; border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden; background:var(--panel);}
.map-row{
  display:grid; grid-template-columns:22px 1fr auto; gap:10px; align-items:center;
  padding:8px 12px; border-bottom:1px solid var(--line); background:none; border-left:none; border-right:none; border-top:none;
  text-align:left; width:100%; font-size:13px;
}
.map-row:last-child{border-bottom:none;}
.map-row:hover{background:var(--panel-2);}
.map-row .mdot{width:11px; height:11px; border-radius:50%; border:2px solid #fff; box-shadow:0 0 0 1px rgba(0,0,0,.15); justify-self:center;}
.map-row .mdot.sq{border-radius:3px;}
.map-row .mdot.done{background:var(--panel) !important; box-shadow:0 0 0 2px var(--ok) inset, 0 0 0 1px rgba(0,0,0,.1);}
.map-row .mname{overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.map-row .mname.done{color:var(--tx-3); text-decoration:line-through;}
.map-row .mcat{font-size:11px; color:var(--tx-4);}

/* marqueurs Leaflet */
.mk{position:relative; width:22px; height:22px;}
.mk i{
  position:absolute; inset:2px; border-radius:50%; background:var(--c);
  border:2px solid #fff; box-shadow:0 1px 4px rgba(0,0,0,.35);
}
.mk.done i{background:#fff; border-color:var(--ok); box-shadow:0 0 0 1.5px var(--ok), 0 1px 4px rgba(0,0,0,.3);}
.mk.done::after{
  content:""; position:absolute; left:7px; top:5px; width:5px; height:9px;
  border:solid var(--ok); border-width:0 2.2px 2.2px 0; transform:rotate(45deg);
}
.mk.lodge i{border-radius:4px; inset:3px;}
.mk.hl i{transform:scale(1.35); box-shadow:0 0 0 4px color-mix(in srgb, var(--c) 30%, transparent), 0 2px 8px rgba(0,0,0,.4);}

.leaflet-container{font-family:var(--f-ui); font-size:12.5px; background:var(--panel-2);}
.leaflet-popup-content-wrapper{
  background:var(--panel); color:var(--tx); border-radius:var(--r);
  box-shadow:var(--shadow-2); border:1px solid var(--line); padding:0;
}
.leaflet-popup-content{margin:0; padding:11px 13px; min-width:200px; line-height:1.45;}
.leaflet-popup-tip{background:var(--panel); border:1px solid var(--line); border-top:none; border-left:none;}
.leaflet-popup-close-button{color:var(--tx-4) !important; padding:6px 6px 0 0 !important;}
.pop-title{font-weight:600; font-size:13.5px; display:flex; align-items:center; gap:6px; margin-bottom:5px;}
.pop-title .done-toggle{width:18px; height:18px; border-radius:5px;}
.pop-title .done-toggle svg{width:11px; height:11px;}
.pop-meta{display:flex; gap:5px; flex-wrap:wrap; align-items:center; font-size:11.5px; color:var(--tx-3);}
.pop-desc{font-size:12px; color:var(--tx-2); margin-top:6px; line-height:1.45;}
.pop-ft{display:flex; gap:10px; margin-top:9px; padding-top:8px; border-top:1px solid var(--line); font-size:12px;}
.leaflet-control-zoom a{
  background:var(--panel) !important; color:var(--tx) !important; border-color:var(--line) !important;
}
.leaflet-bar{border:1px solid var(--line) !important; box-shadow:var(--shadow-1) !important; border-radius:var(--r-sm) !important; overflow:hidden;}
.leaflet-control-attribution{background:color-mix(in srgb, var(--panel) 80%, transparent) !important; color:var(--tx-4) !important; font-size:10px !important;}
.leaflet-control-attribution a{color:var(--tx-3) !important;}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .leaflet-tile-pane{filter:brightness(.75) contrast(1.05) saturate(.85);}
}
[data-theme="dark"] .leaflet-tile-pane{filter:brightness(.75) contrast(1.05) saturate(.85);}

#act-map{height:230px; border-radius:var(--r-sm); border:1px solid var(--line-2); margin-top:10px; overflow:hidden;}
.geo-results{display:grid; gap:5px; margin-top:9px;}
.geo-result{
  display:grid; gap:1px; text-align:left; width:100%;
  background:var(--panel); border:1px solid var(--line-2); border-radius:var(--r-sm);
  padding:8px 11px; color:var(--tx);
}
.geo-result:hover{border-color:var(--line-3);}
.geo-result.selected{border-color:var(--ac); box-shadow:inset 0 0 0 1px var(--ac); background:var(--ac-soft);}
.geo-result .gr-name{font-size:13px; font-weight:550;}
.geo-result .gr-full{font-size:11.5px; color:var(--tx-3);}

/* ---------------------------------------------------------
   13. LOGEMENTS
   --------------------------------------------------------- */
.nights{
  display:flex; gap:2px; margin-bottom:16px; padding:12px 13px;
  background:var(--panel); border:1px solid var(--line); border-radius:var(--r);
  overflow-x:auto; scrollbar-width:thin;
}
.night{
  flex:1 0 auto; min-width:22px; height:36px; border-radius:4px;
  background:var(--panel-3); position:relative; cursor:default;
}
.night.has{background:var(--c);}
.night.gap{background:repeating-linear-gradient(135deg, var(--warn-soft) 0 4px, transparent 4px 8px); border:1px dashed var(--warn);}
.night .d{position:absolute; left:0; right:0; bottom:-16px; font-family:var(--f-num); font-size:9.5px; color:var(--tx-4); text-align:center;}
.nights-wrap{margin-bottom:26px;}
.nights-key{display:flex; gap:12px; flex-wrap:wrap; font-size:11.5px; color:var(--tx-3); margin-top:22px; padding:0 2px;}
.nights-key span{display:inline-flex; align-items:center; gap:5px;}
.nights-key i{width:10px; height:10px; border-radius:3px; display:inline-block;}
.alert{
  display:flex; align-items:flex-start; gap:9px;
  background:var(--warn-soft); border:1px solid color-mix(in srgb, var(--warn) 35%, var(--line));
  color:var(--warn); border-radius:var(--r); padding:9px 12px; font-size:12.5px; margin-bottom:14px; line-height:1.45;
}
.alert svg{width:15px; height:15px; fill:none; stroke:currentColor; stroke-width:1.9; flex:none; margin-top:1px;}
.alert b{font-weight:600;}

/* ---------------------------------------------------------
   14. BUDGET
   --------------------------------------------------------- */
.receipt-thumb{margin:6px 14px 0; max-width:240px; border-radius:var(--r-sm); border:1px solid var(--line); display:block;}
.exp-row{
  display:grid; grid-template-columns:auto 1fr auto auto; gap:12px; align-items:center;
  padding:9px 12px; background:var(--panel); border:1px solid var(--line); border-top:none;
}
.exp-list{border-top:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden; box-shadow:var(--shadow-1);}
.exp-list .exp-row:first-child{border-top-left-radius:var(--r-lg); border-top-right-radius:var(--r-lg);}
.exp-row:hover{background:var(--panel-2);}
.exp-row .what{min-width:0;}
.exp-row .what b{display:block; font-weight:550; font-size:13px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.exp-row .what span{font-size:11.5px; color:var(--tx-3);}
.exp-row .amt{font-family:var(--f-num); font-weight:600; font-size:14px; letter-spacing:-.03em; white-space:nowrap;}
.exp-row .card-actions{margin:0;}
.exp-more{grid-column:1/-1; padding:0 0 4px;}

/* ---------------------------------------------------------
   15. IMPORT EN LOT
   --------------------------------------------------------- */
#act-batch, #ev-batch{margin-top:12px; display:grid; gap:7px;}
.batch-head{display:flex; justify-content:space-between; align-items:baseline; gap:10px; font-size:12.5px; padding-bottom:7px; border-bottom:1px solid var(--line-2);}
.batch-head span{color:var(--tx-3); font-size:12px;}
.batch-row{
  border:1px solid var(--line); border-radius:var(--r); padding:10px 12px;
  background:var(--panel); display:grid; gap:7px; position:relative; padding-left:15px;
}
.batch-row::before{content:""; position:absolute; left:0; top:8px; bottom:8px; width:3px; border-radius:2px; background:var(--line-2);}
.batch-row.ok::before{background:var(--ok);}
.batch-row.warn::before{background:var(--warn);}
.batch-main{display:flex; align-items:center; gap:8px; flex-wrap:wrap;}
.batch-name{font-weight:600; font-size:13.5px;}
.batch-state{font-size:12px; color:var(--tx-3);}
.batch-row.warn .batch-state{color:var(--warn);}
.batch-choices{display:grid; gap:4px;}
.batch-choices .btn{justify-content:flex-start;}

.analyzing{font-size:12.5px; color:var(--ac-tx); display:flex; align-items:center; gap:7px; margin-top:6px;}
.spin{width:12px; height:12px; border:2px solid var(--line-2); border-top-color:var(--ac); border-radius:50%; animation:spin .7s linear infinite; flex:none;}
@keyframes spin{to{transform:rotate(360deg);}}

/* ---------------------------------------------------------
   16. MODALE, TOAST, MENUS
   --------------------------------------------------------- */
.modal-backdrop{
  position:fixed; inset:0; z-index:100; background:rgba(8,12,16,.45);
  display:flex; align-items:center; justify-content:center; padding:20px;
  backdrop-filter:blur(3px); animation:fade .12s;
}
.modal{
  background:var(--panel); border:1px solid var(--line); border-radius:var(--r-lg);
  padding:20px 22px; max-width:400px; width:100%; box-shadow:var(--shadow-3);
}
.modal h3{font-size:15px; margin-bottom:6px;}
.modal p{font-size:13px; color:var(--tx-2); line-height:1.55; margin-bottom:18px;}
.modal-actions{display:flex; gap:8px; justify-content:flex-end;}

.toast{
  position:fixed; bottom:calc(var(--nav-h) + var(--safe-b) + 14px); left:50%;
  transform:translate(-50%, 6px); z-index:120;
  background:var(--tx); color:var(--bg);
  padding:9px 14px; border-radius:var(--r); font-size:12.5px; font-weight:500;
  box-shadow:var(--shadow-2); opacity:0; pointer-events:none; transition:.2s; max-width:88vw; text-align:center;
}
.toast.show{opacity:1; transform:translate(-50%, 0);}
@media(min-width:1000px){ .toast{bottom:22px;} }

.kbd{
  font-family:var(--f-num); font-size:10.5px; color:var(--tx-3);
  border:1px solid var(--line-2); border-bottom-width:2px; border-radius:4px; padding:0 5px; background:var(--panel);
}

/* ---------------------------------------------------------
   17. MODE VISITEUR
   --------------------------------------------------------- */

@media(prefers-reduced-motion: reduce){ *{transition:none !important; animation:none !important;} }
@media print{ .side,.bottom-nav,.topbar,.toolbar,.form-block{display:none !important;} main{max-width:none; padding:0;} }

/* ---------------------------------------------------------
   18. COMPLÉMENTS
   --------------------------------------------------------- */
.chip-dot{background:var(--pick, currentColor);}
.next-event{
  background:var(--panel); border:1px solid var(--line); border-radius:var(--r);
  padding:10px 12px; margin-bottom:14px;
}
.next-event .ne-k{font-size:10.5px; font-weight:600; text-transform:uppercase; letter-spacing:.08em; color:var(--tx-4); margin-bottom:5px;}
.next-event .ne-row{display:flex; align-items:center; gap:7px; min-width:0;}
.next-event .ne-title{font-size:12.5px; font-weight:550; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.next-event .ne-when{font-family:var(--f-num); font-size:11.5px; color:var(--ac-tx); margin-top:3px; letter-spacing:-.02em;}
.strip-cell .v input.strip-in{
  width:auto; min-height:0; padding:1px 4px; font-size:12.5px; font-family:var(--f-num);
  background:var(--panel-2); border:1px solid transparent; border-radius:4px;
}
.strip-cell .v input.strip-in:focus{border-color:var(--ac); box-shadow:none;}
.flight-dist{margin:6px 14px 0;}
.balance .k-ico{width:14px; height:14px;}
.exp-row .what a{color:var(--ac-tx);}
.exp-more:empty{display:none;}
.exp-row:has(.exp-more:empty){grid-template-rows:auto;}
.leaflet-marker-icon{background:none; border:none;}
.day-head + .card{margin-top:2px;}

/* correctifs de mise en page */
.meta > *{flex:none;}
.meta .pin{white-space:nowrap; max-width:100%; overflow:hidden; text-overflow:ellipsis;}
.ev-time{flex-wrap:wrap; row-gap:3px;}
.ev-time.text{font-family:var(--f-ui); font-weight:500; letter-spacing:0;}
.ev-time.text .end{font-weight:400;}
.trip-date{display:grid; grid-template-columns:auto 1fr; align-items:center;}
.trip-date input{width:100%; min-width:0; text-align:right;}
.search{flex:1 1 150px; min-width:140px;}
.progress .txt{white-space:nowrap;}
.bar-row{grid-template-columns:118px 1fr 118px;}
.bar-row .val{white-space:nowrap;}
.link-ext .fav[hidden]{display:none;}


/* ---------------------------------------------------------
   GUIDE (contenu hors ligne extrait du carnet Lonely Planet)
   --------------------------------------------------------- */
.g-group{margin-bottom:22px;}
.g-glabel{font-size:10.5px; font-weight:600; text-transform:uppercase; letter-spacing:.09em; color:var(--tx-4); margin:0 0 8px 2px;}
.g-grid{display:grid; grid-template-columns:repeat(auto-fill, minmax(230px, 1fr)); gap:8px;}
.g-card{
  text-align:left; background:var(--panel); border:1px solid var(--line); border-radius:var(--r);
  padding:11px 12px; display:flex; flex-direction:column; gap:3px; min-height:62px;
  box-shadow:var(--shadow-1); transition:border-color .12s, transform .12s;
}
.g-card:hover{border-color:var(--line-3); transform:translateY(-1px);}
.g-card b{font-size:13px; font-weight:600; letter-spacing:-.01em; line-height:1.3;}
.g-card span{font-size:11.5px; color:var(--tx-3);}
.g-card .gp{font-family:var(--f-num); font-size:10.5px; color:var(--tx-4);}
.g-chead{display:flex; align-items:flex-start; gap:10px; margin-bottom:14px; padding-bottom:12px; border-bottom:1px solid var(--line);}
.g-chead .g-ctitle{flex:1; min-width:0;}
.g-chead h2{font-size:18px; letter-spacing:-.02em;}
.g-cpages{font-family:var(--f-num); font-size:11px; color:var(--tx-4); margin-top:2px;}
.g-chead #guide-back svg{transform:rotate(180deg);}
.g-sec{border:1px solid var(--line); border-radius:var(--r); background:var(--panel); margin-bottom:6px; box-shadow:var(--shadow-1);}
.g-sec > summary{
  list-style:none; cursor:pointer; display:flex; align-items:center; gap:8px;
  padding:9px 12px; font-size:13.5px; font-weight:600; letter-spacing:-.01em;
}
.g-sec > summary::-webkit-details-marker{display:none;}
.g-sec > summary svg{width:14px; height:14px; stroke:var(--tx-4); fill:none; stroke-width:1.8; flex:none; transition:transform .15s;}
.g-sec[open] > summary svg{transform:rotate(90deg);}
.g-sec[open] > summary{border-bottom:1px solid var(--line);}
.g-sec .prose{padding:4px 14px 12px;}
.g-sec.hit{border-color:var(--ac-line);}
.g-res{display:grid; gap:6px;}
.g-res .g-card b em{font-style:normal; background:color-mix(in srgb, var(--ac) 22%, transparent); border-radius:2px; padding:0 1px;}
.g-res .g-card .snip{font-size:12px; color:var(--tx-2); line-height:1.45;}
.g-res .g-card .snip em{font-style:normal; background:color-mix(in srgb, var(--ac) 22%, transparent); border-radius:2px;}
.g-empty{color:var(--tx-3); font-size:13px; padding:26px 10px; text-align:center;}

.prose{font-size:13.5px; line-height:1.55; color:var(--tx);}
.prose > :first-child{margin-top:0;}
.prose h3{font-size:13.5px; margin:16px 0 6px; letter-spacing:-.01em;}
.prose h4{font-size:12.5px; margin:12px 0 4px; color:var(--tx-2);}
.prose p{margin:7px 0;}
.prose ul, .prose ol{margin:6px 0 8px; padding-left:20px;}
.prose li{margin:3px 0;}
.prose li > p{margin:0;}
.prose strong{font-weight:600;}
.prose em{color:var(--tx-2);}
.prose a{word-break:break-word;}
.prose blockquote{
  margin:10px 0; padding:9px 12px; border-left:3px solid var(--ac-line);
  background:var(--ac-soft); border-radius:0 var(--r-sm) var(--r-sm) 0; color:var(--tx);
}
.prose blockquote p{margin:4px 0;}
.prose hr{border:none; border-top:1px solid var(--line); margin:14px 0;}
.prose img{display:block; max-width:100%; height:auto; border:1px solid var(--line); border-radius:var(--r); margin:10px 0; background:#fff;}
.prose .tbl{overflow-x:auto; margin:8px 0 10px; -webkit-overflow-scrolling:touch;}
.prose table{border-collapse:collapse; width:100%; font-size:12.5px; min-width:320px;}
.prose th, .prose td{border:1px solid var(--line); padding:6px 8px; vertical-align:top; text-align:left;}
.prose th{background:var(--panel-2); font-size:11px; font-weight:600; letter-spacing:.03em; color:var(--tx-2); white-space:nowrap;}
.prose tr:nth-child(even) td{background:color-mix(in srgb, var(--panel-2) 55%, var(--panel));}
.prose code{font-family:var(--f-num); font-size:12px; background:var(--panel-2); padding:1px 4px; border-radius:3px;}
@media(max-width:600px){ .prose table{font-size:12px;} .prose th, .prose td{padding:5px 6px;} .g-grid{grid-template-columns:1fr 1fr;} }

/* --- Guide : accueil ludique --- */
.g-tiles{display:grid; grid-template-columns:repeat(auto-fill, minmax(150px, 1fr)); gap:8px; margin-bottom:18px;}
.g-tiles-sm{grid-template-columns:repeat(auto-fill, minmax(170px, 1fr));}
.g-tile{
  --tone:var(--ac); text-align:left; position:relative; overflow:hidden;
  background:var(--panel); border:1px solid var(--line); border-radius:var(--r-lg);
  padding:12px 12px 11px; min-height:92px; display:flex; flex-direction:column; justify-content:flex-end; gap:2px;
  box-shadow:var(--shadow-1); transition:transform .12s, border-color .12s, box-shadow .12s;
}
.g-tile::before{content:""; position:absolute; top:0; left:0; width:100%; height:3px; background:var(--tone);}
.g-tile .ge{font-size:24px; line-height:1; margin-bottom:auto; padding-bottom:8px;}
.g-tile b{font-size:13.5px; font-weight:650; letter-spacing:-.01em; line-height:1.25;}
.g-tile span:not(.ge){font-size:11.5px; color:var(--tx-3); line-height:1.3;}
.g-tile:hover{transform:translateY(-2px); border-color:color-mix(in srgb, var(--tone) 45%, var(--line)); box-shadow:var(--shadow-2);}
.g-tile:active{transform:scale(.98);}
.g-regions{display:flex; gap:7px; flex-wrap:wrap; margin-bottom:10px;}
.g-region{
  display:inline-flex; align-items:center; gap:7px; height:38px; padding:0 13px 0 10px;
  background:var(--panel); border:1px solid var(--line-2); border-radius:20px; font-size:13px; font-weight:550;
  box-shadow:var(--shadow-1); transition:.12s;
}
.g-region .ge{font-size:17px; line-height:1;}
.g-region:hover{border-color:var(--line-3);}
.g-region.on{background:var(--ac); border-color:var(--ac); color:#fff;}
#g-region-list{margin-bottom:18px;}
#g-region-list:empty{margin:0;}
.g-more{display:flex; gap:6px; flex-wrap:wrap; margin-bottom:6px;}
.g-more .fchip{height:30px; font-size:12.5px;}
.g-word{
  margin:2px 0 20px; padding:14px 16px; border-radius:var(--r-lg); cursor:pointer;
  background:linear-gradient(135deg, color-mix(in srgb, #7a4ea8 14%, var(--panel)), color-mix(in srgb, #0e8a80 12%, var(--panel)));
  border:1px solid color-mix(in srgb, #7a4ea8 30%, var(--line)); display:grid; gap:4px;
}
.gw-k{font-size:10.5px; font-weight:600; text-transform:uppercase; letter-spacing:.09em; color:var(--tx-3);}
.gw-w{font-size:24px; font-weight:700; letter-spacing:-.02em; line-height:1.15;}
.gw-m{font-size:13.5px; color:var(--tx-2); min-height:20px;}
.g-word.open .gw-m{color:var(--tx); font-weight:500;}
.gw-a{display:flex; gap:7px; margin-top:6px;}
.g-toc{display:flex; gap:5px; flex-wrap:wrap; margin-bottom:12px;}
.g-toc .fchip{height:28px; font-size:12px; max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.g-sec > summary{font-size:14px; padding:11px 13px;}
.prose a.tel{
  display:inline-block; font-family:var(--f-num); font-weight:600; letter-spacing:-.01em;
  background:var(--ac-soft); color:var(--ac-tx); border:1px solid var(--ac-line);
  padding:1px 8px; border-radius:20px; text-decoration:none; white-space:nowrap;
}
.prose a.tel:hover{background:var(--ac); color:#fff;}
@media(max-width:600px){ .g-tiles{grid-template-columns:1fr 1fr;} .g-tile{min-height:86px;} }

/* ---------------------------------------------------------
   18. AJOUT RAPIDE
   Une info en vrac -> le carnet comprend et propose de la ranger.
   --------------------------------------------------------- */
.qa-btn{margin-right:2px;}
.qa-btn svg{color:var(--ac);}
@media(max-width:560px){ .qa-btn .qa-lbl{display:none;} .qa-btn{padding:0 8px;} }

.modal.qa{max-width:560px; padding:16px 18px 16px; max-height:calc(100vh - 40px); overflow:auto;}
.qa-head{display:flex; align-items:center; justify-content:space-between; gap:8px; margin-bottom:4px;}
.qa-head h3{margin:0; display:flex; align-items:center; gap:7px;}
.qa-head h3 svg{width:16px; height:16px; fill:none; stroke:var(--ac); stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round;}
.modal .qa-hint{font-size:12.5px; color:var(--tx-3); margin:0 0 10px; line-height:1.5;}
#qa-text{min-height:96px;}
.qa-tools{display:flex; align-items:center; gap:10px; margin-top:8px; flex-wrap:wrap;}
.qa-tools .spacer{flex:1;}
.qa-tools label.btn{cursor:pointer; margin:0; font-size:12px; font-weight:500; color:var(--tx); text-transform:none; letter-spacing:0;}
.qa-thumb{position:relative; display:inline-flex;}
.qa-thumb[hidden]{display:none;}
.qa-thumb img{height:44px; width:auto; max-width:120px; object-fit:cover; border-radius:var(--r-sm); border:1px solid var(--line-2); display:block;}
.qa-thumb .icon-btn{position:absolute; top:-8px; right:-8px; width:20px; height:20px; background:var(--panel); border-color:var(--line-2); border-radius:50%;}
.qa-thumb .icon-btn svg{width:11px; height:11px;}
.qa-status{font-size:12.5px; color:var(--tx-2); margin-top:10px;}
.qa-status:empty{display:none;}
.qa-results{display:flex; flex-direction:column; gap:8px; margin-top:10px;}
.qa-results:empty{display:none;}
.qa-item{position:relative; border:1px solid var(--line); border-radius:var(--r); padding:10px 10px 10px 15px; background:var(--panel);}
.qa-item::before{content:""; position:absolute; left:0; top:8px; bottom:8px; width:3px; border-radius:2px; background:var(--k);}
.qa-top{display:flex; align-items:center; gap:8px;}
.qa-type{display:inline-flex; align-items:center; gap:4px; font-size:10.5px; font-weight:600; text-transform:uppercase; letter-spacing:.07em; color:var(--k); flex:none;}
.qa-type svg{width:13px; height:13px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round;}
.qa-name{flex:1; min-width:0; font-size:13.5px; font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.qa-meta{font-size:12.5px; color:var(--tx-2); margin-top:4px; line-height:1.55;}
.qa-meta .sep{color:var(--line-3);}
.qa-geo{font-size:12px; color:var(--tx-3); margin-top:3px; display:flex; align-items:center; gap:5px; min-width:0;}
.qa-geo.ok{color:var(--ok);}
.qa-geo svg{width:12px; height:12px; flex:none; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round;}
.qa-soft{color:var(--tx-4);}
.qa-rate{color:var(--tx-4); font-size:11px;}
.qa-doubt{font-size:12px; color:var(--warn); margin-top:4px; display:flex; align-items:flex-start; gap:5px; line-height:1.45;}
.qa-doubt svg{width:13px; height:13px; flex:none; margin-top:1px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round;}
.qa-actions{margin-top:8px;}
.qa-all{margin-top:2px; height:36px;}
@media(max-width:560px){
  #qa-modal{align-items:flex-end; padding:0;}
  .modal.qa{border-radius:var(--r-lg) var(--r-lg) 0 0; max-height:92vh; padding-bottom:calc(16px + var(--safe-b));}
}