/* ===============================
   MecAssist — CSS unifié light/dark
   - Tokens CSS (thème)
   - Layout & composants harmonisés
   - Animations splash (single source)
   - Bulles chat & cartes garage/threads
   =============================== */

/* ---------- Thème (tokens) ---------- */
:root{
  /* Couleurs (dark par défaut) */
  --bg: #0b0f17;
  --text: #e5e7eb;
  --muted: #9aa4b2;

  --card: #121826;
  --border: #2a3546;
  --primary: #5B1813;            /* action principale */
  --primary-ink: #ed2f21;

  /* Champs */
  --field-bg: #0f1420;
  --field-border: #2a3546;
  --field-text: #e5e7eb;
  --field-placeholder: #8892a0;

  /* Surfaces & ombres */
  --backdrop: rgba(10,12,16,.7);
  --shadow: 0 4px 14px rgba(0,0,0,.25);
}

:root[data-theme="light"]{
  --bg: #f7f8fb;
  --text: #0f172a;
  --muted: #475569;

  --card: #ffffff;
  --border: #e5e7eb;
  --primary: #5B1813;            /* action principale */
  --primary-ink: #ed2f21;

  --field-bg: #fff;
  --field-border: #d0d5dd;
  --field-text: #111;
  --field-placeholder: #9aa4b2;

  --backdrop: rgba(255,255,255,.7);
  --shadow: 0 4px 14px rgba(2,6,23,.08);
}

/* ---------- Base ---------- */
*{ box-sizing:border-box }
html,body{ height:100% }
[hidden]{ display:none !important }

html{ color-scheme: light dark }
body{
  margin:0;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
  background: var(--bg);
  color: var(--text);
}

/* ---------- Splash ---------- */
#splash{
  position:fixed; inset:0; z-index:9999;
  display:grid; place-items:center;
  background:
    radial-gradient(1200px 500px at 50% 10%, #12203a 0%, transparent 55%),
    radial-gradient(1200px 500px at 50% 100%, #111827 0%, transparent 60%),
    linear-gradient(180deg, #0b0c10 0%, #0e1117 60%, #0b0c10 100%);
  animation:splash-fade-in .9s ease-out forwards;
}
.splash-inner{display:flex;flex-direction:column;align-items:center;gap:.75rem}
.splash-inner .logo{filter:drop-shadow(0 10px 30px rgba(61,123,253,.35))}
.splash-inner .brand{font-weight:700;font-size:1.25rem;letter-spacing:.4px;opacity:.9}

@keyframes splash-fade-in{from{opacity:0; transform:scale(.98)} to{opacity:1; transform:scale(1)}}
@keyframes splash-fade-out{to{opacity:0; visibility:hidden}}
.splash--fadeout{ animation:splash-fade-out 900ms ease forwards }

.hidden{ display:none }

/* ---------- Topbar ---------- */
.topbar{
  position:sticky; top:0;
  display:flex; align-items:center; justify-content:space-between;
  padding:1rem 1.25rem;
  background:transparent;
  backdrop-filter:saturate(150%) blur(6px);
  border-bottom:1px solid var(--border);
}
.topbar h1{ margin:0; font-size:1.15rem; font-weight:650 }
.top-actions{ display:flex; align-items:center; gap:.75rem }
.link{ appearance:none; border:0; background:transparent; color:var(--primary-ink); cursor:pointer }
.user-pill{
  display:flex; align-items:center; gap:.5rem;
  padding:.25rem .5rem; background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.08);
  border-radius:999px;
}

/* ---------- Sections ---------- */
.content{ padding:1rem }
.muted{ color:var(--muted) }

/* ---------- Cards ---------- */
.cards{ display:grid; gap:.9rem }
.card{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:14px;
  padding:1rem;
  box-shadow:var(--shadow);
  width:100%;
}
.card.placeholder{ border-style:dashed; opacity:.8 }
.card .card-title{ font-weight:600 }
.card .card-sub{ color:var(--muted); font-size:.95rem }

/* ---------- Vehicle card (photo au-dessus) ---------- */
.card.vehicle-card{
  position:relative;
  display:grid;
  grid-template-rows:auto 1fr;
  padding:0;
  overflow:hidden;
  border-radius:12px;
}
.card.vehicle-card .veh-remove{
  position:absolute; top:8px; right:8px; z-index:2;
  width:32px; height:32px; border:0; border-radius:8px;
  background: rgba(0,0,0,.55); color:#fff;
  font-size:16px; line-height:32px; text-align:center; cursor:pointer;
}
.card.vehicle-card .veh-remove:hover,
.card.vehicle-card .veh-remove:focus-visible{ background: rgba(220,53,69,.95); outline:none }

.card.vehicle-card .vehicle-photo{
  width:100%; aspect-ratio:16/9;
  height:auto; object-fit:contain; display:block;
  background:#fff;
  border-bottom:1px solid var(--border);
}
.card.vehicle-card .vehicle-meta{ padding:10px 12px 12px }
.card.vehicle-card .vehicle-title{ font-weight:700 }
.card.vehicle-card .vehicle-sub{ color:var(--muted) }
.card.vehicle-card > *{ min-height:0 }

/* ---------- Thread card ---------- */
.thread-card{ position:relative }
.thread-card .thr-remove{
  position:absolute; top:8px; right:8px; z-index:2;
  width:32px; height:32px; border:0; border-radius:8px;
  background: rgba(0,0,0,.55); color:#fff; cursor:pointer;
}
.thread-card .thr-remove:hover,
.thread-card .thr-remove:focus-visible{ background: rgba(220,53,69,.95); outline:none }

/* Ligne véhicule au-dessus du titre dans la liste des threads */
.thread-veh-line{
  display:flex; align-items:baseline; gap:.5rem; margin-bottom:.35rem;
  font-size:.95rem; color:var(--muted);
}
.thread-veh-line .veh-name{ font-weight:600 }
.thread-veh-line .veh-id{ opacity:.8 }

/* ---------- Vehicle detail ---------- */
#vehicle-detail h2{ margin:.5rem 0 .25rem }
.veh-hero{ margin:.5rem 0 1rem }
.veh-hero img{
  width:100%; max-height:220px; object-fit:cover;
  border-radius:14px; border:1px solid var(--border); background:#0f1420;
}
.kv{ display:grid; gap:.5rem; margin:1rem 0 }
.kv-row{
  display:grid; grid-template-columns:160px 1fr; gap:.75rem; align-items:center;
  background:rgba(255,255,255,.03); border:1px solid var(--border); border-radius:10px; padding:.5rem .75rem
}
.kv-row>div:first-child{ color:var(--muted) }

/* ---------- Chat ---------- */
.chat-log{ display:flex; flex-direction:column; gap:.5rem; padding-bottom:6.5rem }
.bubble{ max-width:78%; padding:.6rem .8rem; border-radius:14px; border:1px solid var(--border) }
.bubble.user{ align-self:flex-end; background:#1a2230 }
.bubble.assistant{ align-self:flex-start; background:#0f1420 }

/* Fix : pas d'espace géant entre texte et time */
.bubble{ display:flex; flex-direction:column; align-items:flex-start; justify-content:flex-start; gap:6px; min-height:0; align-content:start }
.bubble .content{ margin:0 }
.bubble time{ display:block; align-self:flex-start; margin-top:2px; font-size:.75rem; line-height:1.2; color:var(--muted); opacity:.85 }

/* Bulle "typing" */
.msg.assistant.typing .content{ opacity:.7; font-style:italic }

/* Entrée chat */
.chat-entry{
  position:fixed; left:0; right:0; bottom:calc(env(safe-area-inset-bottom) + 64px);
  display:flex; gap:.5rem; padding:.6rem;
  background:var(--backdrop); border-top:1px solid var(--border);
  backdrop-filter:saturate(160%) blur(10px);
}
.chat-entry input{
  flex:1 1 auto; padding:.7rem .8rem; border-radius:10px;
  border:1px solid var(--field-border); background:var(--field-bg);
  color:var(--field-text); font-size:16px;
}
.attach-btn{
  appearance:none; border:1px solid var(--field-border);
  background:var(--field-bg); color:var(--text); border-radius:10px;
  padding:.6rem .7rem; cursor:pointer;
}

/* ---------- Modale ---------- */
.modal{ position:fixed; inset:0; z-index:1000 }
.modal[hidden]{ display:none }
.modal-backdrop{ position:absolute; inset:0; background:rgba(0,0,0,.55); backdrop-filter:blur(2px) }
.modal-card{
  position:relative; margin:10vh auto 0; width:min(640px, 92vw);
  background:var(--card); border:1px solid var(--border);
  border-radius:16px; padding:1rem; box-shadow:var(--shadow)
}
.modal-card h2{ margin:0 0 .75rem 0; font-size:1.1rem }

/* Sélecteur véhicule (dans modale) */
#thread-vehicle-modal .vehicle-card{ border:1px solid var(--border); border-radius:12px; transition:border-color .2s, box-shadow .2s, background .2s }
#thread-vehicle-modal .vehicle-card:hover,
#thread-vehicle-modal .vehicle-card:focus-visible{ border-color:#3a4a66; box-shadow:0 1px 0 rgba(16,24,40,.06) }
#thread-vehicle-modal .vehicle-card.is-selected{
  border-color: var(--primary);
  background: color-mix(in oklab, var(--primary) 12%, transparent);
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--primary) 24%, transparent);
}
#thread-vehicle-modal .vehicle-card.is-selected .vehicle-title{ color: var(--primary-ink) }

/* Grilles boutons */
.actions{ display:flex; justify-content:flex-end; gap:.5rem; margin-top:.5rem }
.btn[disabled], .btn:disabled { opacity:.5; cursor:not-allowed }

/* ---------- Auth & formulaires ---------- */
.auth-card{ max-width:420px; margin:1rem auto; background:var(--card); border:1px solid var(--border); border-radius:16px; padding:1rem; box-shadow:var(--shadow) }
.seg{ display:grid; grid-template-columns:1fr 1fr; gap:.25rem; background:rgba(255,255,255,.06); padding:.25rem; border-radius:999px; margin-bottom:1rem }
.seg-btn{ appearance:none; border:0; background:transparent; color:var(--muted); padding:.5rem .75rem; border-radius:999px; cursor:pointer; font-weight:600 }
.seg-btn.active{ background:#1f2633; color:var(--text) }
form label{ display:grid; gap:.35rem; margin-bottom:.75rem }
form label span{ font-size:.9rem; color:var(--muted) }

input[type="email"], input[type="password"],
#mode-lookup input[type="text"], #mode-lookup input:not([type]),
#mode-browse select{
  width:100%; min-height:44px; padding:12px;
  border-radius:12px; border:1px solid var(--field-border);
  background:var(--field-bg); color:var(--field-text);
  font-size:16px; line-height:1.3; outline:none; appearance:none;
  box-shadow: 0 1px 0 rgba(16,24,40,.04);
}
#mode-lookup label > span, #mode-browse label > span{ font-size:.95rem; font-weight:600; letter-spacing:.2px; color: var(--muted) }
#mode-lookup input::placeholder{ color: var(--field-placeholder) }
#mode-browse select:disabled{ background-color:#0b0f17; color:#9aa4b2; cursor:not-allowed }
#mode-browse select{ background-image: url("data:image/svg+xml;utf8,<svg fill='none' stroke='%23bbb' stroke-width='2' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'><path d='M6 9l6 6 6-6'/></svg>"); background-repeat:no-repeat; background-position:right 12px center; background-size:16px 16px }

.error{ background:#3b1e1e; color:#ffb3b3; border:1px solid #5f2a2a; padding:.5rem .75rem; border-radius:10px }

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  width:100%; padding:.75rem .9rem; border-radius:10px;
  border:1px solid var(--border); background:#d8d8d8; color:var(--text);
  text-decoration:none; cursor:pointer;
}
.btn.primary{
  background: linear-gradient(135deg, var(--primary), var(--primary-ink));
  border:none; color:#fff; font-weight:700;
}

/* ---------- Tabbar ---------- */
.tabbar{
  position:fixed; left:0; right:0; bottom:0;
  display:flex; align-items:center; justify-content:center; gap:1.25rem;
  padding:.5rem .75rem calc(env(safe-area-inset-bottom) + .5rem);
  background:var(--backdrop); border-top:1px solid var(--border);
  backdrop-filter:saturate(160%) blur(10px);
}
.tabbar[hidden]{ display:none !important }
.tabbar .tabbtn{ min-width:110px }
.tabbtn{
  appearance:none; border:0; background:transparent; color:var(--text);
  display:flex; flex-direction:column; align-items:center; gap:.25rem; padding:.25rem .5rem; border-radius:10px;
}
.tabbtn .icon{ color:var(--muted) }
.tabbtn .label{ font-size:.8rem }

/* ---------- FAB ---------- */
.fab{
  position:relative; width:64px; height:64px; border-radius:999px; border:0; cursor:pointer;
  background: linear-gradient(135deg, var(--primary), var(--primary-ink)); color:#fff;
  display:grid; place-items:center; font-size:2rem; font-weight:600;
  box-shadow:0 10px 25px rgba(195,40,30,.45), inset 0 -2px 6px rgba(0,0,0,.2);
  transform: translateY(-18%);
}
.fab:active{ transform: translateY(-18%) scale(.98) }
.fab-menu{
  position:fixed; left:50%; bottom:90px; transform:translateX(-50%);
  background: color-mix(in oklab, var(--card) 96%, transparent);
  border:1px solid var(--border); border-radius:14px; padding:.25rem; min-width:230px; box-shadow:var(--shadow)
}
.fab-menu[hidden]{ display:none }
.fab-menu button{
  width:100%; background:transparent; color:var(--text); border:none; text-align:left; padding:.75rem .85rem; border-radius:10px; font-size:.95rem; cursor:pointer
}
.fab-menu button:hover{ background:rgba(255,255,255,.05) }

/* ---------- Lookup / Browse (détails utiles) ---------- */
#veh-plate{ text-transform:uppercase; letter-spacing:.06em; font-family: ui-monospace,SFMono-Regular,Menlo,Consolas,monospace }
#veh-vin{ font-family: ui-monospace,SFMono-Regular,Menlo,Consolas,monospace }

/* ---------- Reduce motion ---------- */
@media (prefers-reduced-motion: reduce){
  #splash{ animation:none }
  .fab:active{ transform: translateY(-18%) }
}

/* === Chat bubbles: contraste & opacity fixes === */

/* Variables dédiées (tu peux ajuster les tons) */
:root{
  --bubble-user: #1a2230;
  --bubble-assistant: #0f1420;
}
:root[data-theme="light"]{
  --bubble-user: #e9eefc;
  --bubble-assistant: #f2f6ff;
}

/* Couleurs/typo forcées dans les bulles */
.bubble{ color: var(--text) !important; opacity: 1 !important; }
.bubble .content{ color: var(--text) !important; opacity: 1 !important; white-space: pre-wrap; }
.bubble time{ color: var(--muted) !important; opacity: .9 !important; }

/* Fonds bien tranchés */
.bubble.user{ background: var(--bubble-user) !important; }
.bubble.assistant{ background: var(--bubble-assistant) !important; }

/* L’état “typing” est le seul à être atténué */
.bubble.assistant.typing .content{ opacity: .7 !important; font-style: italic; }

/* Si tu utilises encore l’ancienne classe .msg quelque part, sécurise aussi : */
.msg{ color: var(--text) !important; opacity: 1 !important; }
.msg .content{ color: var(--text) !important; opacity: 1 !important; }
.msg.assistant.typing .content{ opacity: .7 !important; }

/* ---- Chat input au-dessus de la tabbar ---- */

/* Ajuste si besoin : mets la hauteur VISUELLE de ta tabbar (padding compris) */
:root { --tabbar-h: 76px; } /* essaie 72–84px selon ton rendu */

.chat-entry{
  /* place l’input juste au-dessus de la tabbar + safe area iOS */
  bottom: calc(env(safe-area-inset-bottom) + var(--tabbar-h)) !important;
  z-index: 60; /* au-dessus de la tabbar/FAB si nécessaire */
}

/* laisse de la place en bas du log pour que le dernier message ne soit pas masqué */
.chat-log{
  /* marge = tabbar + hauteur de l’input (~100px). Ajuste les 100px si ton champ est plus grand */
  padding-bottom: calc(var(--tabbar-h) + 100px) !important;
}

/* (optionnel) fixe une hauteur mini du champ pour éviter qu'il rétrécisse trop */
.chat-entry input{
  min-height: 44px;
}
/* Cacher tabbar (et FAB) en vue chat */
body[data-no-tabbar="1"] .tabbar,
body[data-no-tabbar="1"] .fab { display: none !important; }

/* Et on remonte la zone de saisie quand la tabbar est cachée */
body[data-no-tabbar="1"] .chat-entry{
  bottom: env(safe-area-inset-bottom) !important;
}
body[data-no-tabbar="1"] .chat-log{
  padding-bottom: 100px !important; /* hauteur de l'input */
}
/* Liste des pièces jointes en attente */
.attach-list{
  display:flex; gap:.5rem; flex-wrap:wrap;
  margin-top:.4rem;
}
.attach-chip{
  position:relative; width:68px; height:68px; border-radius:10px;
  overflow:hidden; border:1px solid var(--border); background:var(--card);
  box-shadow: 0 1px 0 rgba(16,24,40,.04);
}
.attach-chip img{ width:100%; height:100%; object-fit:cover; display:block; }
.attach-chip button.remove{
  position:absolute; top:4px; right:4px; width:22px; height:22px;
  border:0; border-radius:999px; background:rgba(0,0,0,.6); color:#fff; cursor:pointer;
  line-height:22px; text-align:center; font-size:13px;
}
/* Modale sélection véhicule : carte = colonne + zone scrollable */
#thread-vehicle-modal .modal-card{
  display: flex;
  flex-direction: column;
  max-height: calc(100vh - 10vh);            /* borne la hauteur */
}
@supports (height: 100dvh) {
  #thread-vehicle-modal .modal-card{
    max-height: calc(100dvh - 10vh);
  }
}

/* La liste devient le panneau scrollable */
#thread-vehicle-modal .veh-select-list{
  flex: 1 1 auto;               /* prend tout l'espace disponible */
  overflow: auto;                /* défilement vertical */
  -webkit-overflow-scrolling: touch;
  padding: .5rem;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));  /* cartes en grille responsive */
  gap: .75rem;
}

/* Petits écrans: cartes un peu plus étroites */
@media (max-width: 420px){
  #thread-vehicle-modal .veh-select-list{
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  }
}

/* Footer d’actions toujours visible */
#thread-vehicle-modal .actions{
  position: sticky;
  bottom: 0;
  background: linear-gradient(to top, color-mix(in oklab, var(--card) 96%, transparent), transparent);
  padding-top: .5rem;
  margin-top: .5rem;
}

/* Optionnel: empêcher le body de scroller quand la modale est ouverte */
body.modal-open{ overflow: hidden; }

/* ===== Modale sélection véhicule : scroll + cartes non compressées ===== */
#thread-vehicle-modal .modal-card{
  display:flex;
  flex-direction:column;
  max-height:calc(100dvh - 8vh);
  width:min(720px, 92vw);
}
#thread-vehicle-modal .modal-card > *{ min-height:0; } /* clé du scroll en flex */

/* La LISTE est le seul conteneur scrollable */
#thread-vehicle-modal #th-veh-list{
  flex:1 1 auto;
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
  overscroll-behavior: contain;
  padding:.75rem;
  margin:0;
  display:flex;              /* colonne, pas grid, pour éviter l’écrasement */
  flex-direction:column;
  gap:.75rem;
}

/* Les cartes ne se rétrécissent plus */
#thread-vehicle-modal .vehicle-card{
  flex:0 0 auto;             /* pas de shrink */
  display:grid;
  grid-template-rows:auto 1fr;
  padding:0;
  overflow:hidden;
  border-radius:12px;
}

/* Image au-dessus, taille stable */
#thread-vehicle-modal .vehicle-card .vehicle-photo{
  width:100%;
  aspect-ratio:16/9;
  height:auto;
  object-fit:contain;         /* montre toute la voiture */
  display:block;
  border-bottom:1px solid var(--border);
  background:#fff;
}

/* Texte en dessous, lisible */
#thread-vehicle-modal .vehicle-card .vehicle-meta{
  padding:10px 12px 12px;
}
#thread-vehicle-modal .vehicle-card .vehicle-title{ font-weight:700; }
#thread-vehicle-modal .vehicle-card .vehicle-sub{ color:var(--muted); }

/* Footer cliquable, non recouvert */
#thread-vehicle-modal .actions{
  flex:0 0 auto;
  position:relative;
  z-index:1;
  background:linear-gradient(to top, color-mix(in oklab,var(--card) 96%, transparent), transparent);
  padding:.5rem .75rem 0;
}

/* Bouton retour (caché par défaut) */
#chat-back{
  display:none;
  appearance:none;
  border:1px solid var(--border);
  background:var(--card);
  color:var(--text);
  padding:.45rem .65rem;
  border-radius:10px;
  font-weight:650;
  line-height:1;
  cursor:pointer;
}
#chat-back:active{ transform:translateY(1px) }

/* En vue chat (on a déjà data-no-tabbar="1"), on affiche le bouton et on cache le titre */
body[data-no-tabbar="1"] #chat-back{ display:inline-flex; align-items:center; gap:.35rem; }
body[data-no-tabbar="1"] .topbar h1{ display:none; }

/* Topbar déjà sticky → le bouton reste fixé en haut */

/* ===== Chat: coller l'entrée tout en bas sur mobile ===== */

/* Valeur par défaut quand la tabbar est visible (si tu l'utilises ailleurs) */
:root { --tabbar-h: 76px; }

/* En vue chat (tabbar cachée) : la barre touche le bas et intègre le safe-area en padding */
body[data-no-tabbar="1"] .chat-entry{
  position: fixed;
  left: 0; right: 0;
  bottom: 0 !important;                    /* <= plus de vide en dessous */
  padding-bottom: max(env(safe-area-inset-bottom), 8px) !important; /* home bar iOS */
  z-index: 60;
}

/* Le log laisse la place pour l'entrée + safe-area */
body[data-no-tabbar="1"] .chat-log{
  padding-bottom: calc(100px + env(safe-area-inset-bottom)) !important;
}

/* Si jamais tu as encore la version "avec tabbar", garde celle-ci : */
.chat-entry{
  bottom: calc(var(--tabbar-h)) !important; /* positionne au-dessus si tabbar visible */
  /* et intègre quand même un padding safe-area pour iOS */
  padding-bottom: max(env(safe-area-inset-bottom), 8px);
}

/* ===== Safe-area bas pour la tabbar ===== */
:root{
  /* mets la VRAIE hauteur visuelle de ta tabbar (ombre incluse) */
  --tabbar-h: 84px; /* ajuste 76–92px selon ton rendu */
}

/* 1) Ajoute un espace en bas de tout le contenu de l'app */
#app::after{
  content: "";
  display: block;
  height: calc(var(--tabbar-h) + max(env(safe-area-inset-bottom), 12px));
}

/* 2) Quand la tabbar est masquée (vue chat), on ne garde que le safe-area */
body[data-no-tabbar="1"] #app::after{
  height: max(env(safe-area-inset-bottom), 12px);
}

/* 3) Si tu as des conteneurs avec leur propre scroll (listes, etc.), 
   donne-leur aussi de l'air en bas */
.garage-list,
.view-content,
.scrollable{
  padding-bottom: calc(var(--tabbar-h) + max(env(safe-area-inset-bottom), 12px));
}

/* En vue chat, ils n'ont besoin que du safe-area */
body[data-no-tabbar="1"] .garage-list,
body[data-no-tabbar="1"] .view-content,
body[data-no-tabbar="1"] .scrollable{
  padding-bottom: max(env(safe-area-inset-bottom), 12px);
}

/* ===== Topbar: bouton burger à droite ===== */
.topbar{
  position: sticky; top: 0; z-index: 50;
  display: flex; align-items: center; justify-content: space-between;
}
.topbar .top-actions{ display:flex; align-items:center; gap:.5rem; }
.topbar-menu{
  display:inline-flex; align-items:center; justify-content:center;
  width:38px; height:34px; border-radius:10px;
  border:1px solid var(--border); background:var(--card); color:var(--text);
  font-size:18px; line-height:1; cursor:pointer;
}
.topbar-menu:active{ transform: translateY(1px); }

/* ===== Drawer (volet gauche) ===== */
.drawer{ position: fixed; inset: 0; z-index: 70; }
.drawer[hidden]{ display:none; }

.drawer-backdrop{
  position:absolute; inset:0;
  background: rgba(0,0,0,.45);
  opacity:0; transition:opacity .25s ease;
}

.drawer-panel{
  position:absolute; top:0; left:0; height:100%;
  width:min(86vw, 340px);
  background: var(--card);
  border-right: 1px solid var(--border);
  box-shadow: 0 10px 30px rgba(0,0,0,.35);
  transform: translateX(-100%); transition: transform .25s ease;
  padding-bottom: env(safe-area-inset-bottom);
  display:flex; flex-direction:column;
}

/* états ouverts */
body[data-drawer="open"] .drawer-backdrop{ opacity:1; }
body[data-drawer="open"] .drawer-panel{ transform: translateX(0); }

/* header du drawer */
.drawer-header{
  padding: calc(env(safe-area-inset-top) + 10px) 12px 10px;
  display:flex; align-items:center; justify-content:space-between;
  border-bottom:1px solid var(--border);
}
.drawer-title{ font-weight:700; }
.drawer-close{
  border:0; background:transparent; color:var(--text); font-size:18px; cursor:pointer;
}

/* profil */
.drawer-user{ padding:12px; border-bottom:1px solid var(--border); }
.drawer-user .name{ font-weight:700; }
.drawer-user .email{ color:var(--muted); font-size:.95rem; }

/* nav */
.drawer-nav{ display:flex; flex-direction:column; padding:8px; gap:6px; }
.drawer-item{
  text-align:left; padding:10px 12px; border-radius:10px;
  border:1px solid var(--border); background:var(--surface, var(--card));
  color:var(--text); cursor:pointer;
}
.drawer-item:active{ transform:translateY(1px); }

/* footer */
.drawer-footer{ margin-top:auto; padding:12px; border-top:1px solid var(--border); }
.drawer-logout{
  width:100%; padding:10px 12px; border-radius:10px;
  border:1px solid var(--border); background:#b91c1c; color:#fff; cursor:pointer;
}

/* Cache l'ancien bloc email + logout si présent (à adapter si tes classes diffèrent) */
.topbar .user-email, .topbar .btn-logout{ display:none !important; }

/* Section apparence en bas du volet */
.drawer-footer{
  margin-top:auto;
  padding:12px;
  border-top:1px solid var(--border);
  padding-bottom: calc(12px + env(safe-area-inset-bottom));
}
.drawer-theme{
  display:flex; align-items:center; justify-content:space-between;
  gap:12px; padding:8px 0 14px;
}
.theme-label{ display:flex; flex-direction:column; }
.theme-title{ font-weight:700; }
.theme-status{ color:var(--muted); font-size:.95rem; }

/* Switch iOS-like pour un <button> (pas un input) */
.switch-btn{
  --sw-w: 56px; --sw-h: 32px; --sw-pad: 3px;
  position:relative; width:var(--sw-w); height:var(--sw-h);
  border-radius:999px; border:1px solid var(--border);
  background: color-mix(in oklab, var(--text) 12%, transparent);
  cursor:pointer; outline:none;
  box-shadow: inset 0 0 0 0 rgba(0,0,0,0);
  transition: background .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.switch-btn::before{
  content:"";
  position:absolute; left:var(--sw-pad); top:var(--sw-pad);
  width: calc(var(--sw-h) - var(--sw-pad)*2);
  height: calc(var(--sw-h) - var(--sw-pad)*2);
  border-radius:50%;
  background: var(--card);
  box-shadow: 0 1px 3px rgba(0,0,0,.25);
  transition: transform .18s ease;
}
/* état ON quand aria-pressed=true (ton JS n'a pas besoin de changer) */
.switch-btn[aria-pressed="true"]{
  background: color-mix(in oklab, var(--brand, #2563eb) 65%, var(--card));
  border-color: transparent;
}
.switch-btn[aria-pressed="true"]::before{
  transform: translateX(calc(var(--sw-w) - var(--sw-h)));
}

/* ===== Splash brandé ===== */
:root{
  /* ta couleur de bouton (si déjà définie, garde-la) */
  --brand: #5B1813;
}

/* Fallback si l’anim n’existe pas encore */
@keyframes splash-fade-out {
  to { opacity: 0; transform: scale(.98); }
}

.splash{
  position: fixed; inset: 0; z-index: 9999;
  display: flex; align-items: center; justify-content: center;
  padding: env(safe-area-inset-top) env(safe-area-inset-right)
           env(safe-area-inset-bottom) env(safe-area-inset-left);
  /* fond brandé (clair/sombre) */
  background:
    radial-gradient(1200px 800px at 20% 10%, color-mix(in oklab, var(--brand) 28%, #000 0%), transparent 60%),
    radial-gradient(1000px 700px at 80% 90%, color-mix(in oklab, var(--brand) 18%, #000 0%), transparent 60%),
    linear-gradient(160deg,
      color-mix(in oklab, var(--brand) 14%, #170b0b 86%),
      #170b0b 50%,
      color-mix(in oklab, var(--brand) 8%, #05070c 92%) 100%
    );
  color: #fff;
  will-change: opacity, transform;
}

:root[data-theme="light"] .splash{
  background:
    radial-gradient(1000px 700px at 20% 15%, color-mix(in oklab, var(--brand) 22%, #fff 78%), transparent 60%),
    radial-gradient(900px 600px at 80% 85%, color-mix(in oklab, var(--brand) 16%, #fff 84%), transparent 60%),
    linear-gradient(160deg,
      color-mix(in oklab, var(--brand) 12%, #f7fafc 88%),
      #f7fafc 50%,
      color-mix(in oklab, var(--brand) 6%, #eef2f7 94%) 100%
    );
  color: #170b0b;
}

.splash-inner{
  display:flex; align-items:center; justify-content:center; flex-direction:column;
  gap: 12px;
  transform: translateY(0);
}

/* Logo centré, responsive */
.splash-logo{
  width: clamp(96px, 28vw, 164px);
  height: auto; display:block;
  filter: drop-shadow(0 8px 28px rgba(0,0,0,.35));
  user-select:none; pointer-events:none;
}

/* Optionnel: petit libellé marque sous le logo (si tu veux l’ajouter plus tard) */
.splash-brand{ font-weight: 800; letter-spacing: .2px; opacity: .9; }

/* On s’assure que la tabbar/les vues derrière ne dépassent pas tant que le splash est là */
body:has(#splash){ overflow: hidden; }

/* ===== Mon compte ===== */
#view-account .account-top{
  position: sticky; top: 0; z-index: 10;
  background: var(--app-bg, transparent);
  padding: 8px 4px 6px;
}

.account-form fieldset { border: 0; padding: 0; margin: 0 0 12px; }
.account-form legend { font-weight: 700; margin-bottom: 8px; }

.account-form label{ display:flex; flex-direction:column; gap:.35rem; margin-bottom:.75rem; }

.grid-2{ display:grid; grid-template-columns: 1fr 1fr; gap:.75rem; }
@media (max-width:560px){ .grid-2{ grid-template-columns: 1fr; } }

/* Barre d’actions collée en bas */
.sticky-actions{
  position: sticky;
  bottom: 0;
  display: flex; gap: .5rem; justify-content: flex-end;
  background: linear-gradient(to top, color-mix(in oklab, var(--card) 96%, transparent), transparent);
  padding: .75rem;
  border-top: 1px solid var(--border);
  z-index: 5;
  padding-bottom: calc(.75rem + env(safe-area-inset-bottom));
}