/* ======== BIOTECH DESIGN SYSTEM — CSS VARIABLES ======== */
:root {
  --bg-primary:        #0A0F1C;
  --bg-secondary:      #0F172A;
  --color-primary:     #2563EB;
  --color-secondary:   #7C3AED;
  --color-accent:      #00C2FF;
  --text-primary:      #E2E8F0;
  --text-secondary:    #94A3B8;
  --gradient-primary:  linear-gradient(90deg, #00C2FF 0%, #2563EB 35%, #7C3AED 65%, #A78BFA 100%);
  --shadow-glow:       0 0 15px rgba(0, 194, 255, 0.3);
  /* Declare dark color scheme so Android Chrome doesn't force light mode */
  color-scheme: dark;
}
html, body {
  background-color: #0A0F1C !important;
  color: #E2E8F0 !important;
}
body {
  font-family: 'Inter', sans-serif;
  background-color: var(--bg-primary);
  color: var(--text-primary);
}
/* Android Chrome forced-light guard: explicit dark backgrounds on all views
   and dynamically-rendered card containers */
.view,
#app-root,
.app-views {
  background-color: #0A0F1C !important;
  forced-color-adjust: none;
}
[data-marker-card] {
  background-color: #161b22 !important;
  forced-color-adjust: none;
}
#cibles-grid {
  background-color: #0A0F1C !important;
}
h1, h2 {
  font-family: 'IBM Plex Sans', 'Manrope', sans-serif;
  font-weight: 700;
}








/* ======== LIGHT THEME (défaut) ======== */
html.light body { background:#faf9f7!important; color:#2d2d2d!important; }
html.light .card { background:#ffffff!important; border:1px solid #e8e3dc!important; }
html.light .app-header { background:#faf9f7!important; border-bottom:1px solid #e8e3dc; }
html.light .bottom-nav { background:#ffffff!important; border-top:1px solid #e8e3dc!important; }
html.light .nav-item { color:#9ca3af!important; }
html.light .nav-item.active { color:#7c3aed!important; }
html.light #ai-panel { background:#faf9f7!important; border-top:1px solid #e0dbd2!important; box-shadow:0 -8px 40px rgba(0,0,0,.12)!important; }
html.light .ai-panel-handle { background:#d4cfc9!important; }
html.light .ai-panel-title { color:#2d2d2d!important; }
html.light .ai-close-btn { background:#f0ece7!important; border-color:#e0dbd2!important; color:#6b7280!important; }
html.light #ai-question { background:#f0ece7!important; border-color:#d4cfc9!important; color:#2d2d2d!important; }
html.light #ai-question::placeholder { color:#a0998f!important; }
html.light .ai-question-label { color:#6b7280!important; }
html.light .ai-context-box { background:#f4f2ef!important; border-color:#e8e3dc!important; }
html.light .ai-context-label { color:#9ca3af!important; }
html.light .ai-divider { background:#e8e3dc!important; }
html.light #ai-response-body { color:#374151!important; }
html.light #ai-response-body h1,html.light #ai-response-body h2,html.light #ai-response-body h3 { color:#1f2937!important; }
html.light #ai-response-body strong { color:#111827!important; }
html.light #ai-response-body code { background:#f4f2ef!important; border-color:#e8e3dc!important; color:#6d28d9!important; }
html.light #ai-response-body blockquote { border-left-color:#7c3aed!important; color:#6b7280!important; }
html.light .ai-sources-btn { background:#f0ece7!important; border-color:#e0dbd2!important; color:#6b7280!important; }
html.light .ai-source-item { border-color:#f0ece7!important; }
html.light .ai-copy-btn { background:#f0ece7!important; border-color:#e0dbd2!important; color:#6b7280!important; }
html.light .ai-response-branding { color:#4b5563!important; }
html.light .premium-modal-content,html.light #premium-modal { background:#faf9f7!important; }
html.light .brain-search-wrap input { background:#f0ece7!important; border-color:#d4cfc9!important; color:#2d2d2d!important; }
html.light .filter-pill,html.light .proto-pill { background:#f0ece7!important; border-color:#e0dbd2!important; color:#6b7280!important; }
html.light .filter-pill.active,html.light .proto-pill.active { border-color:#7c3aed!important; color:#7c3aed!important; }
/* Chat bubbles light */
html.light .mia-user-bubble { background:linear-gradient(135deg,#7c3aed,#b57bee)!important; color:#fff!important; }
html.light .mia-response-bubble { background:#ffffff!important; border:1px solid #e8e3dc!important; color:#374151!important; }
html.light .mia-bubble-loader { color:#6b7280!important; }
/* Sidebar light */
html.light #mia-sidebar { background:#ffffff!important; border-right:1px solid #e8e3dc!important; }
html.light .sidebar-toggle-btn { background:#f0ece7!important; border:1px solid #e0dbd2!important; color:#4b5563!important; }
html.light #sidebar-overlay { background:rgba(0,0,0,.15)!important; }
html.light .sidebar-section-title { color:#9ca3af!important; }
html.light .sidebar-option-btn { background:#f4f2ef!important; border:1px solid #e8e3dc!important; color:#4b5563!important; }
html.light .sidebar-option-btn.active { background:#7c3aed22!important; border-color:#7c3aed!important; color:#7c3aed!important; }
/* Font serif override */
html[data-font="serif"] body,
html[data-font="serif"] #ai-response-body,
html[data-font="serif"] .ai-panel-body,
html[data-font="serif"] .mia-bubble-body,
html[data-font="serif"] .mia-response-bubble,
html[data-font="serif"] #mia-chat-messages { font-family:'Playfair Display',Georgia,serif!important; }
html[data-font="serif"] .mia-bubble-branding,
html[data-font="serif"] .ai-panel-title { font-family:'Playfair Display',Georgia,serif!important; }
/* Text size override — ciblé sur le chat MIA */
html[data-size="small"] #mia-chat-messages,
html[data-size="small"] .mia-bubble-body,
html[data-size="small"] .mia-response-bubble,
html[data-size="small"] .mia-user-bubble { font-size:12px!important; }
html[data-size="medium"] #mia-chat-messages,
html[data-size="medium"] .mia-bubble-body,
html[data-size="medium"] .mia-response-bubble,
html[data-size="medium"] .mia-user-bubble { font-size:13.5px!important; }
html[data-size="large"] #mia-chat-messages,
html[data-size="large"] .mia-bubble-body,
html[data-size="large"] .mia-response-bubble,
html[data-size="large"] .mia-user-bubble { font-size:16px!important; }
/* Espacement universel : air entre titres inline et cartes */
.card { margin-bottom:1.1rem; }
#victory-badge { margin-bottom:.85rem; }
main > [id^="view-"] > * + .card { margin-top:.5rem; }

/* ======== SIDEBAR ======== */
#mia-sidebar {
  position:fixed; top:0; left:0; bottom:0; width:270px; z-index:900;
  background:#1a1f2e; border-right:1px solid #30363d;
  transform:translateX(-100%); transition:transform .28s cubic-bezier(.32,.72,0,1);
  display:flex; flex-direction:column; padding:0;
  box-shadow:4px 0 24px rgba(0,0,0,.4);
}
#mia-sidebar.open { transform:translateX(0); }
#sidebar-overlay {
  position:fixed; inset:0; z-index:899;
  background:rgba(0,0,0,.4); display:none;
}
#sidebar-overlay.visible { display:block; }
.sidebar-head {
  display:flex; align-items:center; justify-content:space-between;
  padding:1.1rem 1.1rem .8rem;
  border-bottom:1px solid #30363d;
}
.sidebar-logo { font-family:Manrope,sans-serif; font-weight:800; font-size:18px; color:#b57bee; }
.sidebar-close { background:none; border:none; color:#6e7681; font-size:22px; cursor:pointer; }
.sidebar-section-title {
  font-size:10px; font-weight:700; letter-spacing:.08em;
  color:#6e7681; text-transform:uppercase;
  padding:.9rem 1.1rem .4rem; font-family:Inter,sans-serif;
}
.sidebar-option-row { display:flex; gap:.5rem; padding:.2rem 1.1rem .6rem; flex-wrap:wrap; }
.sidebar-option-btn {
  padding:.4rem .85rem; border-radius:8px;
  background:#21262d; border:1px solid #30363d; color:#8b949e;
  font-size:12px; font-family:Inter,sans-serif; cursor:pointer; transition:all .18s;
}
.sidebar-option-btn.active { background:#7c3aed22; border-color:#7c3aed; color:#b57bee; font-weight:700; }
.sidebar-toggle-row { display:flex; align-items:center; justify-content:space-between; padding:.4rem 1.1rem .8rem; }
.sidebar-toggle-label { font-size:13px; color:#8b949e; font-family:Inter,sans-serif; }

/* ======== FAB MIA ======== */
#mia-fab {
  position:fixed; bottom:calc(72px + env(safe-area-inset-bottom,0px) + 12px); right:16px;
  width:52px; height:52px; border-radius:50%;
  background:linear-gradient(135deg,#7c3aed,#b57bee);
  color:#fff; font-family:Manrope,sans-serif; font-weight:800; font-size:18px;
  border:none; cursor:pointer; z-index:700;
  box-shadow:0 4px 20px rgba(124,58,237,.5);
  display:flex; align-items:center; justify-content:center;
  transition:transform .18s, box-shadow .18s;
}
#mia-fab:hover { transform:scale(1.08); box-shadow:0 6px 28px rgba(124,58,237,.7); }

/* ======== CHAT BUBBLES (MIA Panel) ======== */
#mia-chat-messages {
  flex:1; overflow-y:auto; padding:.75rem 1rem;
  display:flex; flex-direction:column; gap:.85rem;
  min-height:180px;
}
.mia-user-bubble {
  align-self:flex-end; max-width:82%;
  background:linear-gradient(135deg,#7c3aed,#b57bee);
  color:#fff; border-radius:18px 18px 4px 18px;
  padding:.65rem .95rem; font-size:13px; line-height:1.5;
  font-family:Inter,sans-serif;
}
.mia-response-bubble {
  align-self:flex-start; max-width:96%;
  background:#161b22; border:1px solid rgba(48,54,61,0.5);
  color:#f0f0f0; border-radius:4px 18px 18px 18px;
  padding:.85rem 1rem; font-size:13.5px; line-height:1.7;
  font-family:Inter,sans-serif;
}
/* ── Timestamps des bulles ─── */
/* ── Mode Jeûne ────────────────────────────── */
#view-dashboard.fasting-active {
  box-shadow: inset 0 0 0 1.5px rgba(251,146,60,0.25);
  border-radius: 1rem;
  transition: box-shadow .4s;
}
#fasting-bar.fasting-active-bar {
  border-color: rgba(251,146,60,0.45) !important;
  background: rgba(251,100,20,0.08) !important;
}
#fasting-toggle-btn.active {
  background: rgba(251,146,60,0.15) !important;
  border-color: rgba(251,146,60,0.55) !important;
  color: #fb923c !important;
}
/* ── OCR Scanner ─────────────────────────────────────────── */
@keyframes ocr-scan {
  0%   { top: -3px; opacity: 0; }
  10%  { opacity: 1; }
  90%  { opacity: 1; }
  100% { top: calc(100% + 3px); opacity: 0; }
}
.ocr-loading-box {
  position:relative;overflow:hidden;border-radius:.75rem;
  background:rgba(0,194,255,0.05);border:1px solid rgba(0,194,255,0.2);
  padding:1.25rem 1rem;text-align:center;
}
.ocr-scan-line {
  position:absolute;left:0;right:0;height:2px;
  background:linear-gradient(90deg,transparent,#00C2FF 40%,#7C3AED 60%,transparent);
  box-shadow:0 0 10px #00C2FF;
  animation:ocr-scan 1.8s ease-in-out infinite;
}
/* ── Fasting alert toast ─────────────────────────────────── */
#fasting-alert-toast {
  position:fixed;top:1rem;left:50%;transform:translateX(-50%) translateY(-120%);
  z-index:200;pointer-events:none;
  background:rgba(15,23,42,0.97);border:1px solid rgba(251,146,60,0.45);
  border-radius:1rem;padding:.7rem 1.1rem;
  display:flex;align-items:flex-start;gap:.6rem;
  box-shadow:0 0 24px rgba(251,146,60,0.25);
  max-width:320px;width:calc(100vw - 2rem);
  transition:transform .4s cubic-bezier(.32,.72,0,1),opacity .4s;opacity:0;
}
#fasting-alert-toast.visible {
  transform:translateX(-50%) translateY(0);opacity:1;
}
@keyframes fasting-pulse {
  0%,100% { box-shadow: 0 0 0 0 rgba(251,146,60,0); }
  50%     { box-shadow: 0 0 12px 3px rgba(251,146,60,0.18); }
}
#fasting-bar.fasting-active-bar { animation: fasting-pulse 3s ease-in-out infinite; }

@keyframes flash-pulse {
  0%,100% { opacity:.4; }
  50%      { opacity:.9; }
}
.dossier-section-title {
  font-family:Manrope,sans-serif; font-weight:700; font-size:11.5px;
  color:#64748b; letter-spacing:.06em; text-transform:uppercase;
  margin:.25rem 0 .65rem; padding-top:.875rem;
  border-top:1px solid rgba(100,116,139,0.2);
  display:flex; align-items:center; gap:.35rem;
}
.dossier-tooltip {
  position:relative; display:inline-flex; align-items:center;
  cursor:pointer; color:#475569; font-size:13px;
}
.dossier-tooltip-text {
  display:none; position:absolute; bottom:calc(100% + 6px); left:50%;
  transform:translateX(-50%); background:#0F172A;
  border:1px solid rgba(100,116,139,0.3); border-radius:8px;
  padding:.45rem .65rem; font-size:10.5px; color:#94a3b8;
  font-family:Inter,sans-serif; font-weight:400; font-style:normal;
  white-space:nowrap; max-width:240px; white-space:normal;
  line-height:1.5; text-transform:none; letter-spacing:0;
  z-index:10; box-shadow:0 4px 16px rgba(0,0,0,0.4);
}
.dossier-tooltip:hover .dossier-tooltip-text,
.dossier-tooltip:focus .dossier-tooltip-text { display:block; }
.mia-bubble-ts {
  font-size:10px; color:#64748b; font-family:Inter,sans-serif;
  line-height:1; margin-top:calc(-.85rem + .15rem);
}
.mia-bubble-ts.ts-user { align-self:flex-end;  padding-right:.6rem; }
.mia-bubble-ts.ts-mia  { align-self:flex-start; padding-left:.6rem; }

/* ── Markdown rendering inside MIA bubbles ─── */
.mia-response-bubble h1 {
  font-family:Manrope,sans-serif; font-weight:800; font-size:15px;
  color:#E2E8F0; line-height:1.3; margin:.6rem 0 .3rem;
  background:linear-gradient(90deg,#00C2FF,#b57bee);
  -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
}
.mia-response-bubble h2 {
  font-family:Manrope,sans-serif; font-weight:700; font-size:13.5px;
  color:#b57bee; line-height:1.3; margin:.6rem 0 .25rem;
}
.mia-response-bubble h3 {
  font-family:Manrope,sans-serif; font-weight:700; font-size:12.5px;
  color:#94A3B8; letter-spacing:.02em; line-height:1.3; margin:.5rem 0 .2rem;
}
.mia-response-bubble strong { color:#E2E8F0; font-weight:700; }
.mia-response-bubble em     { color:#94A3B8; font-style:italic; }
.mia-response-bubble p      { margin:.3rem 0; }
.mia-response-bubble ul, .mia-response-bubble ol { padding-left:1.3rem; margin:.35rem 0; }
.mia-response-bubble li     { margin-bottom:.2rem; line-height:1.55; }
.mia-response-bubble hr     { border:none; border-top:1px solid rgba(255,255,255,0.07); margin:.55rem 0; }
.mia-response-bubble blockquote {
  border-left:2px solid rgba(181,123,238,0.5); margin:.45rem 0;
  padding:.3rem .7rem; color:#94A3B8; font-size:12px; font-style:italic;
}
.mia-response-bubble table  { width:100%; border-collapse:collapse; font-size:11.5px; margin:.5rem 0; }
.mia-response-bubble th     { background:rgba(181,123,238,0.1); color:#b57bee; font-weight:700; padding:.3rem .5rem; text-align:left; border-bottom:1px solid rgba(181,123,238,0.3); }
.mia-response-bubble td     { padding:.28rem .5rem; color:#CBD5E1; border-bottom:1px solid rgba(255,255,255,0.05); }
/* Flash animation for GKI calculator focus */
@keyframes gki-focus-pulse { 0%,100%{box-shadow:none} 30%{box-shadow:0 0 0 2px #b57bee,0 0 24px rgba(181,123,238,.35)} }

/* ── Labo category tabs ─── */
.labo-cat-tabs { display:flex; gap:.5rem; margin-bottom:1rem; }
.labo-cat-btn {
  flex:1; padding:.5rem .75rem; border-radius:9999px;
  border:1px solid rgba(255,255,255,0.08);
  background:rgba(255,255,255,0.03);
  color:#64748B; font-family:Inter,sans-serif; font-size:12px;
  font-weight:600; cursor:pointer; transition:all .2s; text-align:center;
}
.labo-cat-btn.active {
  background:rgba(124,58,237,0.15); border-color:rgba(124,58,237,0.4);
  color:#b57bee;
}
details[open] .labo-zone-chevron { transform: rotate(0deg); }
details:not([open]) .labo-zone-chevron { transform: rotate(-90deg); }
details > summary::-webkit-details-marker { display: none; }
.aliment-item {
  padding:.5rem .75rem; border-radius:.75rem; font-size:12.5px;
  font-family:Inter,sans-serif; line-height:1.5;
}
.aliment-vert  { background:rgba(52,211,153,0.06); color:#d1fae5; border:1px solid rgba(52,211,153,0.15); }
.aliment-rouge { background:rgba(251,113,133,0.06); color:#fecdd3; border:1px solid rgba(251,113,133,0.15); }
.mia-bubble-header {
  display:flex; align-items:center; justify-content:space-between;
  margin-bottom:.35rem;
  opacity:0.55;
}
.mia-bubble-branding {
  font-size:10px; font-weight:700; color:#b57bee;
  font-family:Manrope,sans-serif; display:flex; align-items:center; gap:.3rem;
}
@keyframes loaderBreathe {
  0%,100% { opacity:.8; }
  50%      { opacity:.4; }
}
.mia-bubble-loader {
  display:flex; align-items:center; gap:.6rem;
  color:#8b949e; font-size:13px; font-family:Inter,sans-serif; padding:.25rem 0;
  opacity:.8; animation:loaderBreathe 2s ease-in-out infinite;
}
/* Footer input zone */
#mia-panel-footer {
  flex-shrink:0; padding:.6rem .9rem calc(.6rem + env(safe-area-inset-bottom,0px));
  border-top:1px solid #21262d; background:inherit;
}
.mia-input-row { display:flex; align-items:flex-end; gap:.6rem; }
#ai-question {
  flex:1; min-height:40px; max-height:88px; resize:none; overflow-y:auto;
  background:#1c2128; border:1px solid #484f58; border-radius:12px;
  color:#f0f0f0; font-size:14px; font-family:Inter,sans-serif;
  padding:.55rem .85rem; outline:none; transition:border .2s; line-height:1.5;
}
#ai-question:focus { border-color:#b57bee; box-shadow:0 0 0 3px rgba(181,123,238,.15); }
#ai-question::placeholder { color:#6e7681; }
.mia-send-icon-btn {
  width:44px; height:44px; border-radius:50%; flex-shrink:0;
  background:linear-gradient(135deg,#7c3aed,#b57bee);
  border:none; cursor:pointer; display:flex; align-items:center; justify-content:center;
  color:#fff; transition:opacity .18s;
}
.mia-send-icon-btn:disabled { opacity:.4; cursor:not-allowed; }
/* Sidebar toggle in header */
.sidebar-toggle-btn {
  background:none; border:none; cursor:pointer;
  color:#8b949e; display:flex; align-items:center; justify-content:center;
  width:36px; height:36px; border-radius:8px;
  transition:background .15s;
}
.sidebar-toggle-btn:hover { background:#21262d; }

/* == METANOIA BASE CSS == */
*{box-sizing:border-box;margin:0;padding:0}

/* Scrollbar */
::-webkit-scrollbar{width:4px;height:4px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:rgba(255,255,255,0.12);border-radius:9999px}
::-webkit-scrollbar-thumb:hover{background:rgba(255,255,255,0.22)}

body{
  background:#0d1117;
  color:#e1e2eb;
  font-family:'Inter',sans-serif;
  min-height:100vh;
  -webkit-font-smoothing:antialiased;
  padding-bottom: calc(5rem + env(safe-area-inset-bottom, 16px));
  padding-top:env(safe-area-inset-top);
}

.card{
  background:#161b22;
  border-radius:1.25rem;
  overflow:hidden;
}

.app-header{
  position:sticky;
  top:0;
  background:#0d1117;
  padding:1rem;
  z-index:50;
}

.view{display:none}
.view.active{display:block}

.nav-item{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:2px;
  cursor:pointer;
  padding:0.5rem 1rem;
  color:#948e99;
  transition:color 0.2s;
  background:none;
  border:none;
}
.nav-item.active{color:var(--color-accent, #00C2FF)}

.nav-icon{
  font-size:24px;
  transition:color 0.2s;
}

.nav-label{
  font-size:10px;
  font-family:'Manrope',sans-serif;
  font-weight:700;
  white-space:nowrap;
}

.progress-track{
  background:#21262d;
  border-radius:9999px;
  height:6px;
  overflow:hidden;
}

.progress-fill{
  height:100%;
  border-radius:9999px;
  transition:width 0.4s;
}

.gauge-track{
  background:#21262d;
  border-radius:9999px;
  height:6px;
  overflow:hidden;
}

.gauge-fill{
  height:100%;
  border-radius:9999px;
  transition:width 0.4s;
}

.filter-pill{
  white-space:nowrap;
  padding:0.3rem 0.875rem;
  border-radius:9999px;
  font-size:12px;
  font-family:'Inter',sans-serif;
  font-weight:600;
  cursor:pointer;
  border:1.5px solid rgba(255,255,255,0.08);
  background:#21262d;
  color:#cbc4d0;
  transition:border-color 0.2s, color 0.2s;
}
.filter-pill.active{
  border-color:rgba(255,255,255,0.2);
  color:#e1e2eb;
}

.proto-pill{
  white-space:nowrap;
  padding:0.3rem 0.875rem;
  border-radius:9999px;
  font-size:12px;
  font-family:'Inter',sans-serif;
  font-weight:600;
  cursor:pointer;
  border:1.5px solid rgba(255,255,255,0.08);
  background:#21262d;
  color:#cbc4d0;
  transition:border-color 0.2s, color 0.2s;
}
.proto-pill.active{
  border-color:rgba(255,255,255,0.2);
  color:#e1e2eb;
}

.auth-input{
  width:100%;
  background:#161b22;
  border:1px solid rgba(255,255,255,0.1);
  border-radius:0.875rem;
  padding:0.875rem 1rem;
  color:#e1e2eb;
  font-family:'Inter',sans-serif;
  font-size:15px;
  outline:none;
  transition:border-color 0.2s;
}
.auth-input:focus{
  border-color:rgba(211,188,252,0.5);
}

.auth-btn{
  width:100%;
  padding:0.875rem;
  border-radius:9999px;
  box-sizing:border-box;
  background:linear-gradient(135deg,#b57bee,#c77dff);
  border:none;
  color:#1a0a33;
  font-family:'Manrope',sans-serif;
  font-weight:800;
  font-size:15px;
  cursor:pointer;
  transition:opacity 0.2s;
}
.auth-btn:active{opacity:0.85}

.molecule-card{cursor:pointer;transition:box-shadow 0.2s;}
.molecule-card:hover{box-shadow:0 4px 20px rgba(211,188,252,0.1);}
.molecule-details{
  padding:0.875rem 1rem;
  border-top:1px solid rgba(255,255,255,0.06);
  max-height:320px;
  overflow-y:auto;
  overscroll-behavior:contain;
  scrollbar-width:thin;
  scrollbar-color:rgba(211,188,252,0.2) transparent;
}
.molecule-details::-webkit-scrollbar{width:4px}
.molecule-details::-webkit-scrollbar-thumb{background:rgba(211,188,252,0.2);border-radius:9999px}

.mol-proto-badge{
  display:inline-flex;
  align-items:center;
  gap:4px;
  padding:2px 8px;
  border-radius:9999px;
  font-size:9px;
  font-family:'Inter',sans-serif;
  font-weight:600;
}

.synergy-tag{
  display:inline-block;
  padding:1px 6px;
  border-radius:9999px;
  font-size:9px;
  background:rgba(52,211,153,0.1);
  color:#34d399;
  font-family:'Inter',sans-serif;
}

.badge-row{
  display:flex;
  flex-wrap:wrap;
  gap:0.375rem;
  margin-top:0.375rem;
}

.patient-input{
  background:transparent;
  border:none;
  border-bottom:1px solid rgba(255,255,255,0.12);
  color:#e1e2eb;
  font-family:'Manrope',sans-serif;
  font-weight:700;
  font-size:15px;
  outline:none;
  padding:0.25rem 0;
  width:100%;
}

.patient-label{
  font-size:11px;
  color:#948e99;
  font-family:'Inter',sans-serif;
}

.lifestyle-section-title{
  font-family:'Manrope',sans-serif;
  font-weight:800;
  font-size:14px;
  color:#b57bee;
  margin-bottom:0.5rem;
}

.timeline-dot{
  width:8px;
  height:8px;
  border-radius:9999px;
  background:#b57bee;
  flex-shrink:0;
  margin-top:4px;
}

.toggle-switch{
  position:relative;
  width:44px;
  height:24px;
  cursor:pointer;
  flex-shrink:0;
  margin-left:0.5rem;
}

.toggle-slider{
  position:absolute;
  inset:0;
  background:#30363d;
  border-radius:9999px;
  transition:background 0.3s;
}

.food-scanner-compact{
  display:flex;
  align-items:center;
  gap:0.5rem;
  background:#161b22;
  border-radius:0.875rem;
  padding:0.625rem 0.875rem;
  border:1px solid rgba(255,255,255,0.06);
}

.disc-panel{
  background:#21262d;
  border-radius:1.5rem 1.5rem 0 0;
  padding:1.75rem 1.5rem;
}

.seyfried{
  background:rgba(79,142,247,0.12);
  color:#7eb3ff;
  border-radius:9999px;
  padding:1px 6px;
  font-size:9px;
  font-family:'Inter',sans-serif;
  font-weight:600;
}

.tenenbaum{
  background:rgba(170,0,255,0.12);
  color:#9b59b6;
  border-radius:9999px;
  padding:1px 6px;
  font-size:9px;
  font-family:'Inter',sans-serif;
  font-weight:600;
}

.no-scrollbar{scrollbar-width:none;-ms-overflow-style:none}
.no-scrollbar::-webkit-scrollbar{display:none}

.expert-badge{
  display:inline-flex;
  align-items:center;
  gap:4px;
  padding:0.3rem 0.625rem;
  background:rgba(211,188,252,0.08);
  border:1px solid rgba(211,188,252,0.15);
  border-radius:9999px;
  font-size:11px;
  color:#b57bee;
  font-family:'Inter',sans-serif;
}

@keyframes slideUp{
  from{transform:translateY(100%)}
  to{transform:translateY(0)}
}

@keyframes fadeIn{
  from{opacity:0}
  to{opacity:1}
}

/* == END METANOIA BASE CSS == */

/* == NAV STICKY + MODALS V6.5 == */

/* Fixed bottom navigation */
.bottom-nav {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  z-index: 1000; /* au-dessus de tout, y compris #view-cerveau */
  background: rgba(15,17,21,0.97);
  border-top: 1px solid rgba(255,255,255,0.07);
  padding-bottom: env(safe-area-inset-bottom, 0px);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

/* Disclaimer modal - ALWAYS on top */
#disclaimerModal {
  position: fixed; inset: 0; z-index: 600;
  background: rgba(0,0,0,0.90);
  display: none;
  align-items: flex-end;
  justify-content: center;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}
#disclaimerModal.open { display: flex !important; }

/* Disclaimer panel */
.disc-panel {
  width: 100%; max-width: 480px;
  background: #21262d;
  border-radius: 1.75rem 1.75rem 0 0;
  padding: 1.75rem 1.5rem calc(1.75rem + env(safe-area-inset-bottom, 16px));
  animation: slideUp 0.32s ease;
  border-top: 1px solid rgba(211,188,252,0.15);
}

/* Upgrade modal */
#upgradeModal {
  position: fixed; inset: 0; z-index: 500;
  background: rgba(0,0,0,0.80);
  display: none;
  align-items: flex-end;
  justify-content: center;
  backdrop-filter: blur(12px);
}
#upgradeModal.open { display: flex; }
.upgrade-panel {
  width: 100%; max-width: 480px;
  background: #21262d;
  border-radius: 2rem 2rem 0 0;
  padding: 1.75rem 1.5rem calc(1.75rem + env(safe-area-inset-bottom, 16px));
  animation: slideUp 0.3s ease;
}

/* Recipe modal */
#recipeModal {
  position: fixed; inset: 0; z-index: 400;
  background: rgba(0,0,0,0.75);
  display: none;
  align-items: flex-end;
  justify-content: center;
  backdrop-filter: blur(10px);
}
#recipeModal.open { display: flex; }

/* Quota modal */
#quotaModal {
  position: fixed; inset: 0; z-index: 450;
  background: rgba(0,0,0,0.78);
  display: none;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  backdrop-filter: blur(10px);
}
#quotaModal.open { display: flex; }

/* Auth screen */
#auth-screen {
  position: fixed; inset: 0;
  z-index: 1001;
  background: #0b1326;
  display: block;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 0;
  box-sizing: border-box;
  scroll-behavior: smooth;
}
/* Landing page sections are block-level within the scrollable screen */
#auth-screen > * { box-sizing: border-box; }

/* ── Landing page utility classes ── */
.bg-medical-mesh {
  background-color: #0b1326;
  background-image:
    radial-gradient(circle at 50% 50%, rgba(78,222,163,0.08) 0%, transparent 50%),
    radial-gradient(circle at 20% 30%, rgba(208,188,255,0.05) 0%, transparent 40%);
}
.hero-glow {
  filter: blur(120px);
  background: radial-gradient(circle, rgba(78,222,163,0.15) 0%, transparent 70%);
}
.glass-card {
  background: rgba(255,255,255,0.05);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(255,255,255,0.1);
}
details summary::-webkit-details-marker { display: none; }

/* Marker status label */
.marker-status-label {
  font-size: 11px;
  font-family: Inter, sans-serif;
  font-weight: 600;
  color: #948e99;
  transition: color 0.3s;
  min-width: 90px;
}

/* Main app container offset for fixed nav */
#app-root, .app-views {
  padding-bottom: calc(5rem + env(safe-area-inset-bottom, 16px));
}
/* Profile view: extra padding so export buttons clear the nav bar */
#view-profil {
  padding-bottom: 120px;
}

/* == END NAV STICKY == */


/* === v4.5 MÉDICAL-TECH REFINEMENTS === */

/* Scrollbar thin clinical */
::-webkit-scrollbar        { width: 4px; height: 4px; }
::-webkit-scrollbar-track  { background: transparent; }
::-webkit-scrollbar-thumb  { background: #30363d; border-radius: 9999px; }
::-webkit-scrollbar-thumb:hover { background: #9b59b6; }

/* Card border precision */
.card {
  border: 1px solid rgba(48,54,61,0.6) !important;
  box-shadow: 0 1px 3px rgba(0,0,0,0.4);
}

/* Victory badge */
#victory-badge {
  display: flex; align-items: flex-start; gap: 0.75rem;
  background: rgba(155,89,182,0.08);
  border: 1px solid rgba(155,89,182,0.2);
  border-radius: 1.25rem; padding: 0.875rem 1rem;
  margin-bottom: 1rem;
}

/* GKI gauge — minimal clinical */
.gauge-track {
  height: 8px;
  background: #21262d;
  border-radius: 9999px;
  overflow: hidden;
  border: 1px solid rgba(48,54,61,0.5);
}
.gauge-fill {
  height: 100%;
  border-radius: 9999px;
  transition: width 0.6s cubic-bezier(0.4,0,0.2,1), background 0.4s;
}

/* Protocol pills — Seyfried / Tenenbaum */
.seyfried   { background: rgba(52,211,153,0.12); color: #34d399;  border-radius:9999px; padding:1px 7px; font-size:9px; font-family:Inter; font-weight:600; letter-spacing:0.03em; }
.tenenbaum  { background: rgba(155,89,182,0.15); color: #b57bee;  border-radius:9999px; padding:1px 7px; font-size:9px; font-family:Inter; font-weight:600; letter-spacing:0.03em; }

/* Nav items */
.nav-item       { color: var(--text-secondary, #94A3B8); }
.nav-item.active { color: var(--color-accent, #00C2FF); }

/* Auth button gradient */
.auth-btn {
  background: linear-gradient(135deg, #9b59b6, #7b2d8b) !important;
  color: #f0e6ff !important;
}

/* Disclaimer dark theme */
.disc-panel {
  background: #161b22 !important;
  border-top: 2px solid rgba(155,89,182,0.4);
}

/* Upgrade panel */
.upgrade-panel {
  background: #161b22 !important;
  border-top: 2px solid rgba(155,89,182,0.4);
}

/* Filter pills  */
.filter-pill, .pack-pill {
  background: #21262d;
  border-color: rgba(48,54,61,0.7);
  color: #8b949e;
}
.filter-pill:hover, .pack-pill:hover {
  border-color: rgba(155,89,182,0.4);
  color: #b57bee;
}

/* Proto pills */
.proto-pill { background: #21262d; }
.proto-pill.active { background: rgba(155,89,182,0.15); color: #b57bee; border-color: rgba(155,89,182,0.5); }

/* Marker input */
.marker-input { color: #e1e2eb; }

/* Section titles */
.lifestyle-section-title { color: #b57bee !important; }

/* food scanner */
.food-scanner-compact {
  background: #161b22 !important;
  border-color: rgba(48,54,61,0.6) !important;
}

/* Expert badge */
.expert-badge {
  background: rgba(155,89,182,0.08) !important;
  border-color: rgba(155,89,182,0.2) !important;
  color: #b57bee !important;
}

/* Pack glow cards — violet theme */
.pack-glow-card {
  border-color: rgba(155,89,182,0.25) !important;
  box-shadow: 0 0 15px rgba(155,89,182,0.12) !important;
}

/* Molecule details scroll */
.molecule-details[data-open="1"] {
  max-height: 320px;
  overflow-y: auto;
}

/* responsive: no horizontal scroll */
html, body { overflow-x: hidden; max-width: 100vw; }
.view { padding-left: max(1rem, env(safe-area-inset-left)); padding-right: max(1rem, env(safe-area-inset-right)); }

/* === END v4.5 === */

/* == METANOIA FINAL CSS == */
.food-zone-accordion{border-radius:1rem;overflow:hidden;border:1px solid rgba(255,255,255,.06);background:#161b22;margin-bottom:.625rem;transition:border-color .2s}
.food-zone-accordion[open]{border-color:rgba(255,255,255,.12)}
.food-zone-accordion>summary{list-style:none;display:flex;align-items:center;gap:.5rem;padding:.75rem 1rem;cursor:pointer;user-select:none;-webkit-user-select:none}
.food-zone-accordion>summary::-webkit-details-marker{display:none}
.food-zone-summary-dot{width:9px;height:9px;border-radius:9999px;flex-shrink:0}
.food-zone-summary-label{font-family:Manrope;font-weight:700;font-size:13px;flex:1}
.food-zone-chevron{font-size:12px;color:#948e99;margin-left:auto;display:inline-block;transition:transform .2s}
.food-zone-accordion[open] .food-zone-chevron{transform:rotate(90deg)}
.food-zone-content{padding:0 1rem .875rem;border-top:1px solid rgba(255,255,255,.05)}
.mol-lock-curtain{position:absolute;inset:0;z-index:20;border-radius:inherit;background:rgba(0,0,0,.68);backdrop-filter:blur(7px);-webkit-backdrop-filter:blur(7px);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;cursor:pointer;border:1px solid rgba(211,188,252,.10);transition:background .2s}
.mol-lock-curtain:hover{background:rgba(0,0,0,.78)}
[data-marker-card]{position:relative;overflow:hidden}
.marker-input{background:transparent!important;border:none;outline:none;color:#e1e2eb;font-family:Manrope;font-weight:700;font-size:16px;text-align:right;width:100px}
.marker-input:disabled{opacity:0!important;pointer-events:none}
.proto-pill{display:inline-flex!important;align-items:center!important;gap:5px!important}
.pack-glow-card{border:1px solid rgba(16,185,129,.25);box-shadow:0 0 15px rgba(16,185,129,.20);border-radius:1.25rem;position:relative;overflow:hidden}
.pack-glow-card[data-pack="pulse"]{border-color:rgba(251,146,60,.25);box-shadow:0 0 15px rgba(251,146,60,.20)}
.ai-quota-indicator{display:inline-flex;align-items:center;gap:.5rem;padding:.4rem .875rem;background:rgba(52,211,153,.08);border:1px solid rgba(52,211,153,.2);border-radius:9999px;font-family:Inter;font-size:12px;font-weight:600;color:#34d399;white-space:nowrap}
.ai-quota-indicator.used{background:rgba(251,146,60,.08);border-color:rgba(251,146,60,.2);color:#fb923c}
.ai-quota-indicator .dot{width:7px;height:7px;border-radius:9999px;background:currentColor;flex-shrink:0}
#profile-status-badge{font-family:Manrope;font-weight:800;font-size:12px;padding:.25rem .75rem;border-radius:9999px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);transition:color .3s}
/* ── Molécules — Bénéfice Clair + Badge Niveau ── */
.mol-benefit-clair {
  font-family:'Playfair Display',Georgia,serif;
  font-size:13.5px; font-style:italic; color:#b57bee;
  line-height:1.45; margin-bottom:.35rem; display:block;
}
.mol-name-serif {
  font-family:'Playfair Display',Georgia,serif;
  font-weight:700; font-size:15px; color:#e1e2eb;
}
.mol-level-badge {
  display:inline-flex; align-items:center; gap:.3rem;
  font-size:9px; font-weight:700; letter-spacing:.06em;
  text-transform:uppercase; padding:2px 7px; border-radius:9999px;
  font-family:Inter,sans-serif;
}
.mol-level-badge.fondamental {
  background:rgba(52,211,153,.12); color:#34d399;
  border:1px solid rgba(52,211,153,.25);
}
.mol-level-badge.cible {
  background:rgba(199,125,255,.12); color:#c77dff;
  border:1px solid rgba(199,125,255,.25);
}
/* Pack lock — masqué (Soutien supprimé) */
#pack-lock-overlay { display:none !important; }
#pack-filter-row   { display:none !important; }
.molecule-card { border:1px solid rgba(124,58,237,.12) !important; border-radius:1.25rem; }
.molecule-card:hover { border-color:rgba(181,123,238,.35) !important; }
/* == END FINAL CSS == */

/* ── Modale Onboarding "Le Serment de Metanoia" ── */
#onboarding-overlay {
  display:none; position:fixed; inset:0; z-index:1100;
  background:rgba(0,0,0,.88); backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
  align-items:center; justify-content:center; padding:1.25rem;
}
#onboarding-overlay.open { display:flex; }
#onboarding-modal {
  width:100%; max-width:400px;
  background:#0d1117;
  border:1px solid rgba(124,58,237,.35);
  border-radius:1.75rem;
  padding:2rem 1.75rem 1.75rem;
  box-shadow:0 0 60px rgba(124,58,237,.2);
  animation:fadeIn .35s ease;
  text-align:center;
}
.onboarding-glyph {
  font-size:36px; margin-bottom:1.25rem; display:block;
  filter:drop-shadow(0 0 16px #7c3aed88);
}
.onboarding-title {
  font-family:'Playfair Display',Georgia,serif;
  font-weight:700; font-size:22px; color:#e1e2eb;
  line-height:1.25; margin-bottom:1.1rem;
  letter-spacing:-.01em;
}
.onboarding-body {
  font-family:Inter,sans-serif; font-size:13px;
  color:#8b949e; line-height:1.7;
  margin-bottom:1.75rem; text-align:left;
}
.onboarding-body strong { color:#cbc4d0; }
.onboarding-cta {
  width:100%; padding:.95rem; border:none; border-radius:14px;
  background:linear-gradient(135deg,#7c3aed,#b57bee);
  color:#fff; font-family:Manrope,sans-serif;
  font-size:15px; font-weight:800; cursor:pointer;
  box-shadow:0 4px 24px rgba(124,58,237,.4);
  transition:opacity .2s, transform .15s;
}
.onboarding-cta:hover { opacity:.9; transform:translateY(-1px); }
.onboarding-skip {
  margin-top:.75rem; font-size:11px; color:#484f58;
  font-family:Inter,sans-serif; cursor:pointer;
  background:none; border:none; width:100%;
}
.onboarding-skip:hover { color:#6e7681; }
/* Checkbox consentement onboarding */
.onboarding-consent-wrap {
  display:flex; align-items:flex-start; gap:.65rem;
  text-align:left; margin-bottom:1.1rem;
  background:rgba(124,58,237,.06); border:1px solid rgba(124,58,237,.2);
  border-radius:12px; padding:.75rem .85rem;
}
.onboarding-consent-wrap input[type="checkbox"] {
  width:16px; height:16px; flex-shrink:0; margin-top:2px;
  accent-color:#7c3aed; cursor:pointer;
}
.onboarding-consent-label {
  font-family:Inter,sans-serif; font-size:11.5px;
  color:#8b949e; line-height:1.55; cursor:pointer;
}
.onboarding-consent-label strong { color:#cbc4d0; }
.onboarding-cta:disabled {
  opacity:.4; cursor:not-allowed; transform:none !important;
}
.onboarding-legal-link {
  display:block; margin-top:.6rem;
  font-size:10px; color:#484f58; font-family:Inter,sans-serif;
  text-decoration:underline; cursor:pointer; text-align:center;
}
.onboarding-legal-link:hover { color:#6e7681; }
/* Disclaimer footer du chat */
#cerveau-disclaimer {
  font-family:Inter,sans-serif; font-size:10px; color:#484f58;
  text-align:center; padding:.3rem .5rem 0; line-height:1.5;
}
/* ── Micro-copy Éducative ── */
.edu-microcopy {
  font-family:Inter,sans-serif; font-size:11.5px;
  color:#6e7681; font-style:italic; margin-top:.2rem;
  line-height:1.45; display:block;
}
/* ── Starter Prompts ── */
#mia-starter-prompts {
  padding:.5rem .25rem .25rem;
  display:flex; flex-direction:column; gap:.4rem;
}
.starter-prompt-btn {
  width:100%; text-align:left;
  padding:.55rem .9rem; border-radius:9999px;
  background:transparent; border:1px solid rgba(124,58,237,.3);
  font-family:Inter,sans-serif; font-size:12px; color:#8b949e;
  cursor:pointer; transition:border-color .18s, color .18s, background .18s;
  line-height:1.4; white-space:normal;
}
.starter-prompt-btn:hover {
  border-color:#7c3aed; color:#b57bee;
  background:rgba(124,58,237,.06);
}

/* === CERVEAU TAB === */
.brain-search-wrap { position:relative; margin-bottom:1rem; }
.brain-search-wrap input {
  width:100%; padding:.75rem 1rem .75rem 2.8rem;
  background:#161b22; border:1px solid #30363d; border-radius:10px;
  color:#e1e2eb; font-size:15px; font-family:Manrope,sans-serif;
  outline:none; transition:border .2s;
}
.brain-search-wrap input:focus { border-color:#b57bee; }
.brain-search-wrap .search-ico {
  position:absolute; left:.85rem; top:50%; transform:translateY(-50%);
  color:#6e7681; font-size:20px;
}
.brain-filter-row { display:flex; gap:.5rem; flex-wrap:wrap; margin-bottom:1rem; }
.brain-filter-btn {
  padding:.35rem .9rem; border-radius:20px; border:1px solid #30363d;
  background:#161b22; color:#948e99; font-size:12px; cursor:pointer;
  font-family:Manrope,sans-serif; transition:all .2s;
}
.brain-filter-btn.active { background:#b57bee22; border-color:#b57bee; color:#b57bee; }
.brain-stats {
  font-size:12px; color:#6e7681; margin-bottom:.75rem; font-family:Inter,sans-serif;
}
.brain-card {
  background:#161b22; border:1px solid #21262d; border-radius:12px;
  padding:1rem; margin-bottom:.75rem; transition:border .2s;
}
.brain-card:hover { border-color:#30363d; }
.brain-card-title {
  font-size:14px; font-weight:700; color:#e1e2eb;
  font-family:Manrope,sans-serif; margin-bottom:.3rem;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.brain-card-meta {
  font-size:11px; color:#6e7681; font-family:Inter,sans-serif; margin-bottom:.4rem;
}
.brain-card-meta .source-badge {
  display:inline-block; padding:1px 6px; border-radius:4px; font-size:10px;
  margin-right:5px; font-weight:600;
}
.source-seyfried { background:#1f2d3d; color:#58a6ff; }
.source-tenenbaum { background:#2d1f3d; color:#b57bee; }
.brain-card-tags { display:flex; flex-wrap:wrap; gap:.3rem; margin-bottom:.5rem; }
.brain-tag {
  font-size:10px; padding:2px 7px; border-radius:10px;
  background:#21262d; color:#948e99; font-family:Inter,sans-serif;
}
.brain-card-preview {
  font-size:12px; color:#8b949e; font-family:Inter,sans-serif;
  line-height:1.55;
  display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden;
}
.brain-card-preview mark { background:#b57bee33; color:#b57bee; border-radius:2px; }
.brain-loading {
  display:flex; flex-direction:column; align-items:center; padding:3rem 0;
  color:#6e7681; gap:.75rem; font-size:13px; font-family:Inter,sans-serif;
}
.brain-spinner {
  width:36px; height:36px; border:3px solid #21262d;
  border-top-color:#b57bee; border-radius:50%; animation:spin .8s linear infinite;
}
@keyframes spin { to { transform:rotate(360deg); } }
.brain-empty { text-align:center; color:#6e7681; padding:3rem 0; font-size:13px; }
.brain-load-more {
  width:100%; padding:.7rem; background:#161b22; border:1px solid #30363d;
  border-radius:10px; color:#b57bee; font-family:Manrope,sans-serif; font-size:13px;
  cursor:pointer; margin-top:.5rem; transition:background .2s;
}
.brain-load-more:hover { background:#21262d; }
/* === QUOTA & PREMIUM === */
.ai-quota-bar {
  display:flex; align-items:center; justify-content:space-between;
  margin:.55rem 0 .75rem;
  font-size:12px; font-family:Inter,sans-serif;
}
.ai-quota-text { color:#6e7681; }
.ai-quota-text strong { color:#b57bee; }
.ai-quota-dots { display:flex; gap:5px; }
.ai-quota-dot {
  width:8px; height:8px; border-radius:50%;
  background:#21262d; border:1.5px solid #30363d;
  transition:background .25s, border-color .25s;
}
.ai-quota-dot.used {
  background:#b57bee; border-color:#b57bee;
  box-shadow:0 0 6px #b57bee66;
}
.ai-quota-dot.empty { background:#21262d; border-color:#30363d; }

/* ── Modale Initié (quota épuisé + upsell) ── */
#premium-overlay {
  display:none; position:fixed; inset:0; z-index:900;
  background:rgba(0,0,0,.75); backdrop-filter:blur(8px);
  animation:fadeIn .2s ease;
}
#premium-modal {
  position:fixed; bottom:0; left:0; right:0; z-index:901;
  background:#0d1117;
  border-top:1px solid #7c3aed55;
  border-radius:24px 24px 0 0;
  padding:0 1.25rem 2.5rem;
  animation:slideUp .3s cubic-bezier(.32,.72,0,1);
  box-shadow:0 -12px 60px rgba(124,58,237,.2);
  max-height:90vh; overflow-y:auto;
}
.premium-handle {
  width:40px; height:4px; border-radius:2px;
  background:#30363d; margin:14px auto 0;
}
.premium-icon-wrap {
  width:60px; height:60px; border-radius:18px; margin:1.25rem auto .75rem;
  background:linear-gradient(135deg,#7c3aed,#b57bee);
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 6px 28px #7c3aed44;
}
.premium-title {
  text-align:center; font-family:'Playfair Display',Georgia,serif;
  font-weight:700; font-size:22px; color:#e1e2eb; margin-bottom:.35rem;
}
.premium-subtitle {
  text-align:center; font-size:13px; color:#8b949e;
  font-family:Inter,sans-serif; margin-bottom:1rem; line-height:1.5;
}
.premium-antifraud {
  background:#2a1a00; border:1px solid #f59e0b44; border-radius:10px;
  padding:.6rem .85rem; margin-bottom:1rem;
  font-size:11.5px; color:#f59e0b; font-family:Inter,sans-serif; line-height:1.5;
}
.premium-features {
  background:#161b22; border:1px solid #21262d; border-radius:14px;
  padding:.75rem 1rem; margin-bottom:1rem;
}
.premium-feature {
  display:flex; align-items:center; gap:.65rem;
  padding:.3rem 0; font-size:12.5px; color:#c9d1d9;
  font-family:Inter,sans-serif;
}
.premium-feature-icon {
  width:20px; height:20px; border-radius:6px;
  background:#b57bee22; color:#b57bee;
  display:flex; align-items:center; justify-content:center;
  font-size:11px; flex-shrink:0;
}
.premium-plans {
  display:flex; flex-direction:column; gap:.6rem; margin-bottom:.75rem;
}
.premium-cta-btn {
  width:100%; padding:.9rem; border:none; border-radius:14px;
  background:linear-gradient(135deg,#7c3aed,#b57bee);
  color:#fff; font-family:Manrope,sans-serif;
  font-size:15px; font-weight:800; cursor:pointer;
  box-shadow:0 4px 20px #7c3aed44;
  transition:opacity .2s, transform .15s;
  display:flex; align-items:center; justify-content:center; gap:.5rem;
}
.premium-cta-btn:hover { opacity:.9; transform:translateY(-1px); }
.premium-cta-annual {
  width:100%; padding:.85rem; border:1px solid #7c3aed55; border-radius:14px;
  background:transparent; color:#b57bee;
  font-family:Manrope,sans-serif; font-size:14px; font-weight:700;
  cursor:pointer; transition:background .18s;
  display:flex; align-items:center; justify-content:center; gap:.5rem;
}
.premium-cta-annual:hover { background:#7c3aed18; }
.premium-cancel-btn {
  width:100%; padding:.65rem; border:none; background:none;
  color:#484f58; font-size:12px; font-family:Inter,sans-serif;
  cursor:pointer; margin-top:.4rem;
}
.premium-cancel-btn:hover { color:#6e7681; }
/* ── Expert Selector ── */
.expert-selector-wrap {
  display:flex; gap:.35rem; overflow-x:auto; padding-bottom:.2rem;
  scrollbar-width:none; margin-bottom:.5rem;
}
.expert-selector-wrap::-webkit-scrollbar { display:none; }
.expert-btn {
  flex-shrink:0; padding:.3rem .75rem; border-radius:9999px;
  background:#161b22; border:1px solid #30363d;
  font-size:11px; font-family:Manrope,sans-serif; font-weight:600;
  color:#6e7681; cursor:pointer; transition:all .18s;
  white-space:nowrap;
}
.expert-btn:hover { border-color:#7c3aed55; color:#b57bee; }
.expert-btn.active { background:#7c3aed22; border-color:#7c3aed; color:#b57bee; }
/* ── Professor Cloud ── */
#professor-cloud { margin-bottom:.5rem; }
.prof-cloud-label { font-size:10px; color:#484f58; font-family:Inter; margin-bottom:.3rem; letter-spacing:.05em; text-transform:uppercase; }
.prof-cloud-wrap { display:flex; gap:.35rem; overflow-x:auto; padding-bottom:.2rem; scrollbar-width:none; }
.prof-cloud-wrap::-webkit-scrollbar { display:none; }
.prof-chip {
  flex-shrink:0; padding:.3rem .75rem; border-radius:9999px;
  background:#161b22; border:1.5px solid #30363d;
  font-size:11px; font-family:Manrope,sans-serif; font-weight:600;
  color:#6e7681; cursor:pointer; transition:all .18s; white-space:nowrap;
}
.prof-chip:hover:not(.locked) { border-color:#7c3aed55; color:#b57bee; }
.prof-chip.active { box-shadow:0 0 0 1.5px #7c3aed; border-color:#7c3aed55; background:rgba(124,58,237,.13); color:#b57bee; }
.prof-chip-lock { font-size:9px; vertical-align:super; background:linear-gradient(135deg,#00D2FF,#928DFF); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; }
.prof-chip.locked { opacity:.6; }
.prof-chip.locked:hover { border-color:#30363d; color:#6e7681; cursor:pointer; }
/* ── PRO badge ── */
.mia-pro-badge {
  display:none; align-items:center; gap:.25rem;
  padding:.15rem .55rem; border-radius:9999px;
  background:linear-gradient(135deg,#7c3aed,#b57bee);
  font-size:10px; font-family:Manrope,sans-serif; font-weight:800;
  color:#fff; letter-spacing:.05em; vertical-align:middle;
  margin-left:.5rem;
}
/* === AI PANEL === */
.ai-ask-btn {
  flex-shrink:0;
  display:flex;align-items:center;gap:.4rem;
  padding:.6rem 1rem;
  background:linear-gradient(135deg,#7c3aed,#b57bee);
  border:none;border-radius:10px;
  color:#fff;font-family:Manrope,sans-serif;font-size:13px;font-weight:700;
  cursor:pointer;white-space:nowrap;
  transition:opacity .2s,transform .15s;
  box-shadow:0 2px 12px #7c3aed44;
}
.ai-ask-btn:hover { opacity:.9; transform:translateY(-1px); }
.ai-ask-btn:disabled { opacity:.45; cursor:not-allowed; transform:none; }

/* Overlay */
#ai-overlay {
  display:none;position:fixed;inset:0;z-index:800;
  background:rgba(0,0,0,.6);backdrop-filter:blur(4px);
  animation:fadeIn .2s ease;
}
@keyframes fadeIn  { from{opacity:0} to{opacity:1} }
@keyframes slideUp { from{transform:translateY(100%)} to{transform:translateY(0)} }

/* Panel — masqué : le chat est désormais inline dans #view-cerveau */
#ai-panel { display:none !important; }
.ai-panel-handle { display:none; }
.ai-panel-head {
  display:flex;align-items:center;justify-content:space-between;
  padding:.85rem 1rem .6rem;flex-shrink:0;
}
.ai-panel-title {
  display:flex;align-items:center;gap:.5rem;
  font-family:Manrope,sans-serif;font-weight:800;font-size:16px;color:#e1e2eb;
}
.ai-close-btn {
  width:32px;height:32px;border-radius:50%;
  background:#161b22;border:1px solid #30363d;
  color:#8b949e;font-size:18px;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  transition:background .15s;
}
.ai-close-btn:hover { background:#21262d; }
.ai-panel-body { overflow-y:auto;flex:1;padding:0 1rem 1rem; }

/* Contexte */
.ai-context-box {
  background:#161b22;border:1px solid #21262d;border-radius:10px;
  padding:.75rem;margin-bottom:.85rem;
}
.ai-context-label {
  font-size:11px;font-weight:700;color:#6e7681;font-family:Inter,sans-serif;
  text-transform:uppercase;letter-spacing:.06em;margin-bottom:.5rem;
}
.ai-context-item {
  display:flex;align-items:flex-start;gap:.5rem;
  padding:.35rem 0;border-bottom:1px solid #21262d;
  font-size:12px;color:#8b949e;font-family:Inter,sans-serif;
}
.ai-context-item:last-child { border-bottom:none; }
.ai-context-num {
  flex-shrink:0;width:18px;height:18px;border-radius:50%;
  background:#b57bee22;color:#b57bee;
  font-size:10px;font-weight:700;font-family:Manrope,sans-serif;
  display:flex;align-items:center;justify-content:center;margin-top:1px;
}
.ai-context-empty {
  font-size:12px;color:#f85149;font-family:Inter,sans-serif;
  display:flex;align-items:center;gap:.4rem;
}

/* Question */
.ai-question-label {
  font-size:12px;font-weight:700;color:#8b949e;font-family:Manrope,sans-serif;
  margin-bottom:.4rem;
}
#ai-question {
  width:100%;min-height:80px;max-height:160px;resize:vertical;
  background:#161b22;border:1px solid #30363d;border-radius:10px;
  color:#e1e2eb;font-size:14px;font-family:Inter,sans-serif;
  padding:.7rem .85rem;outline:none;box-sizing:border-box;
  transition:border .2s;line-height:1.5;
}
#ai-question:focus { border-color:#b57bee; }
#ai-question::placeholder { color:#484f58; }

.ai-send-btn {
  width:100%;margin-top:.75rem;padding:.8rem;
  background:linear-gradient(135deg,#7c3aed,#b57bee);
  border:none;border-radius:10px;
  color:#fff;font-family:Manrope,sans-serif;font-size:15px;font-weight:700;
  cursor:pointer;transition:opacity .2s;
  display:flex;align-items:center;justify-content:center;gap:.5rem;
}
.ai-send-btn:hover { opacity:.88; }
.ai-send-btn:disabled { opacity:.4;cursor:not-allowed; }

/* Spinner */
.ai-spinner {
  width:18px;height:18px;border:2px solid rgba(255,255,255,.3);
  border-top-color:#fff;border-radius:50%;
  animation:spin .7s linear infinite;flex-shrink:0;
}

/* Divider */
.ai-divider {
  height:1px;background:#21262d;margin:1rem 0;
}

/* Réponse */
.ai-response-label {
  font-size:11px;font-weight:700;color:#6e7681;font-family:Inter,sans-serif;
  text-transform:uppercase;letter-spacing:.06em;margin-bottom:.65rem;
  display:flex;align-items:center;gap:.4rem;
}
#ai-response-body {
  font-size:14px;color:#c9d1d9;font-family:Inter,sans-serif;line-height:1.7;
}
#ai-response-body h1,#ai-response-body h2,#ai-response-body h3 {
  font-family:Manrope,sans-serif;color:#e1e2eb;margin:.8rem 0 .4rem;
}
#ai-response-body strong { color:#e1e2eb;font-weight:700; }
#ai-response-body em { color:#b57bee; }
#ai-response-body ul,#ai-response-body ol {
  padding-left:1.2rem;margin:.4rem 0;
}
#ai-response-body li { margin:.25rem 0; }
#ai-response-body code {
  background:#161b22;border:1px solid #30363d;
  border-radius:4px;padding:1px 5px;font-size:12px;color:#79c0ff;
}
#ai-response-body blockquote {
  border-left:3px solid #b57bee;padding-left:.75rem;
  color:#8b949e;margin:.6rem 0;font-style:italic;
}
#ai-response-body a { color:#b57bee;text-decoration:none; }
.ai-error-msg {
  color:#f85149;font-size:13px;font-family:Inter,sans-serif;
  background:#f8514914;border:1px solid #f8514930;
  border-radius:8px;padding:.65rem .85rem;
  display:flex;align-items:center;gap:.5rem;
}
.ai-warning-msg {
  color:#e3b341;font-size:13px;font-family:Inter,sans-serif;
  background:#e3b34114;border:1px solid #e3b34130;
  border-radius:8px;padding:.65rem .85rem;
  display:flex;align-items:center;gap:.5rem;
}
/* Réponse header (branding + copy) */
.ai-response-header {
  display:flex;align-items:center;justify-content:space-between;
  margin-bottom:.65rem;
}
.ai-response-branding {
  display:flex;align-items:center;gap:.4rem;
  font-size:11px;font-weight:700;color:#6e7681;
  font-family:Inter,sans-serif;text-transform:uppercase;letter-spacing:.06em;
}
.ai-copy-btn {
  display:flex;align-items:center;gap:.35rem;
  background:#161b22;border:1px solid #30363d;border-radius:7px;
  color:#8b949e;font-size:12px;font-family:Inter,sans-serif;
  padding:.3rem .6rem;cursor:pointer;transition:all .15s;
}
.ai-copy-btn:hover { border-color:#b57bee;color:#b57bee;background:#b57bee11; }
/* Sources */
.ai-sources-zone { margin-top:.85rem; }
.ai-sources-btn {
  width:100%;display:flex;align-items:center;justify-content:space-between;
  background:#161b22;border:1px solid #21262d;border-radius:8px;
  color:#8b949e;font-size:12px;font-family:Inter,sans-serif;font-weight:600;
  padding:.55rem .75rem;cursor:pointer;transition:all .15s;
}
.ai-sources-btn:hover { border-color:#b57bee55;color:#c9d1d9; }
.ai-sources-list {
  background:#0d1117;border:1px solid #21262d;border-top:none;
  border-radius:0 0 8px 8px;padding:.4rem 0;
}
.ai-source-item {
  display:flex;align-items:flex-start;gap:.5rem;
  padding:.4rem .75rem;border-bottom:1px solid #161b22;
  font-size:12px;color:#8b949e;font-family:Inter,sans-serif;
}
.ai-source-item:last-child { border-bottom:none; }
.ai-source-num {
  flex-shrink:0;width:18px;height:18px;border-radius:50%;
  background:#b57bee22;color:#b57bee;font-size:10px;font-weight:700;
  font-family:Manrope,sans-serif;display:flex;align-items:center;justify-content:center;
}
.ai-source-link { color:#b57bee;text-decoration:none;line-height:1.4; }
.ai-source-link:hover { text-decoration:underline; }
.ai-source-plain { color:#8b949e;line-height:1.4; }
/* Toast */
#ai-toast {
  position:fixed;bottom:6rem;left:50%;transform:translateX(-50%) translateY(12px);
  background:#238636;color:#fff;font-size:13px;font-family:Inter,sans-serif;
  font-weight:600;padding:.55rem 1.1rem;border-radius:8px;
  opacity:0;transition:opacity .2s,transform .2s;pointer-events:none;z-index:9999;
  white-space:nowrap;
}
/* Dots animés loader IA */
@keyframes ai-dots {
  0%  { content:'';  }
  33% { content:'.'; }
  66% { content:'..'; }
  99% { content:'...'; }
}
.ai-thinking-dots::after {
  content:'';
  animation: ai-dots 1.4s steps(3,end) infinite;
  display:inline-block; min-width:1.6em; text-align:left;
}
/* Cerveau minimaliste — cacher le navigateur de chunks */
#brain-filters, #brain-stats, #brain-results, #brain-more-btn { display:none !important; }
/* ======== VIEW CERVEAU — Chat inline ======== */
#view-cerveau {
  /* "Enfermé" entre header et footer — height explicite */
  position: fixed;
  top: calc(env(safe-area-inset-top, 0px) + 72px);
  left: 0; right: 0;
  height: calc(100dvh - 72px - 56px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px));
  display: none; flex-direction: column;
  background: var(--bg-primary, #0A0F1C);
  overflow: hidden;
  z-index: 45; /* nav = 1000, header = 50 → toujours au-dessus */
  /* Les clics "passent" au-dessous (nav), réactivés sélectivement */
  pointer-events: none;
}
#view-cerveau.active { display:flex; }
#cerveau-chat-wrap {
  flex:1; overflow-y:auto;
  padding:.75rem 1rem 0;
  display:flex; flex-direction:column; gap:.85rem;
  /* Scroll en douceur sur iOS */
  -webkit-overflow-scrolling: touch;
  pointer-events: auto; /* réactivation : scroll + bulles cliquables */
}
#cerveau-input-bar {
  flex-shrink:0;
  padding:.6rem .9rem .75rem; /* safe-area géré par le conteneur parent */
  border-top:1px solid #21262d; background:var(--bg-primary,#0A0F1C);
  /* z-index local pour rester au-dessus des bulles */
  position: relative; z-index: 2;
  pointer-events: auto; /* réactivation : textarea + bouton envoi */
}
/* En-tête MIA cliquable (badges, etc.) */
#view-cerveau > div:first-child { pointer-events: auto; }
/* ── MIA Chat History Sidebar ───────────────── */
#mia-chat-sidebar {
  position:fixed;
  top:calc(env(safe-area-inset-top,0px) + 72px);
  left:0;
  width:240px; max-width:72vw;
  height:calc(100dvh - 72px - 56px - env(safe-area-inset-top,0px) - env(safe-area-inset-bottom,0px));
  background:var(--bg-secondary,#0F172A);
  border-right:1px solid rgba(0,194,255,0.2);
  z-index:50;
  display:flex; flex-direction:column;
  transform:translateX(-100%);
  transition:transform .28s cubic-bezier(.32,.72,0,1);
  overflow:hidden;
  pointer-events:auto;
}
#mia-chat-sidebar.open { transform:translateX(0); }
#mia-chat-sidebar-overlay {
  position:fixed;
  top:calc(env(safe-area-inset-top,0px) + 72px);
  left:0; right:0;
  height:calc(100dvh - 72px - 56px - env(safe-area-inset-top,0px) - env(safe-area-inset-bottom,0px));
  background:rgba(0,0,0,0.45);
  backdrop-filter:blur(2px); -webkit-backdrop-filter:blur(2px);
  z-index:49; display:none; pointer-events:auto;
}
#mia-chat-sidebar-overlay.visible { display:block; }
.mia-hist-item {
  padding:.55rem .75rem; border-radius:.5rem; cursor:pointer;
  transition:background .15s; border-bottom:1px solid rgba(255,255,255,0.05);
}
.mia-hist-item:hover { background:rgba(0,194,255,0.07); }
.mia-hist-title { font-family:Inter,sans-serif; font-size:12px; color:#CBD5E1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.mia-hist-date  { font-family:Inter,sans-serif; font-size:10px; color:#64748B; margin-top:2px; }
.mia-hist-item.locked-blur { filter:blur(3px); pointer-events:none; }
/* ── Metric Mini Bar Chart ───────────────────── */
.metric-bar-chart { display:flex; align-items:flex-end; gap:3px; height:44px; padding:0 2px; }
.metric-bar-col   { flex:1; display:flex; flex-direction:column; align-items:center; gap:2px; }
.metric-bar       { width:100%; border-radius:3px 3px 0 0; min-height:3px; transition:height .35s ease,background .3s; }
.metric-bar-lbl   { font-size:8px; color:#64748B; font-family:Inter; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:100%; text-align:center; }
@keyframes grad-pulse  { 0%,100%{opacity:1} 50%{opacity:.8} }
@keyframes bounce-share { 0%,100%{transform:translateY(0)} 40%{transform:translateY(-6px)} 70%{transform:translateY(-3px)} }
#chart-bar-tooltip {
  position:fixed; z-index:68; pointer-events:none;
  background:#0F172A; border:1px solid rgba(0,194,255,0.35);
  border-radius:.625rem; padding:.5rem .75rem;
  box-shadow:0 4px 20px rgba(0,0,0,.5);
  max-width:220px; display:none;
  transition:opacity .12s ease;
}
/* Repositionner les bubbles dans cerveau-chat-wrap */
#view-cerveau #mia-chat-messages {
  flex:unset; overflow-y:unset; padding:0; min-height:unset;
  display:flex; flex-direction:column; gap:.85rem;
  max-width:800px; width:100%; margin-left:auto; margin-right:auto;
}
/* Bulle de bienvenue centrée */
#mia-welcome-bubble {
  align-self:center !important;
  max-width:min(800px,96%) !important;
  width:100%;
  margin:0 auto;
}
/* Mobile — ajuster top pour headers plus compacts */
@media (max-width:640px) {
  #view-cerveau {
    top: calc(env(safe-area-inset-top, 0px) + 60px);
    height: calc(100dvh - 60px - 56px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px));
  }
}

/* ── MIA Chat — Mobile UX ─────────────────────────────────────────────────── */
@media (max-width:767px) {
  /* 1. Header condensé — masquer le sous-titre sur mobile */
  #mia-header-subtitle { display:none; }
  #view-cerveau > div:first-child { padding:.45rem .75rem .3rem; }

  /* 2. Bubbles — padding réduit */
  .mia-user-bubble    { padding:.5rem .8rem; font-size:12.5px; }
  .mia-response-bubble{ padding:.65rem .875rem; font-size:13px; line-height:1.65; }
  #cerveau-chat-wrap  { gap:.6rem; padding:.5rem .75rem 0; }

  /* 3. Zen mode — masquer label expert quand chat actif */
  #cerveau-input-bar.mia-zen .prof-cloud-label { display:none; }
  #cerveau-input-bar.mia-zen #professor-cloud  { margin-bottom:.2rem; }
  #cerveau-input-bar.mia-zen #mia-starter-prompts { display:none !important; }
}

/* ======== FASTING TRACKER ======== */
.fasting-progress-track {
  height:12px; border-radius:9999px; background:#21262d;
  overflow:hidden; margin:.6rem 0;
  min-height:12px; /* mobile lisibilité */
}
.fasting-progress-fill {
  height:100%; border-radius:9999px; width:0%;
  background: var(--gradient-primary);
  transition:width .8s ease; background-size:200% 100%;
  animation:fastingShimmer 2s linear infinite;
}
@keyframes fastingShimmer {
  0%   { background-position:200% 0; }
  100% { background-position:-200% 0; }
}
.fasting-timer-display {
  font-family:'Playfair Display',Georgia,serif; font-size:36px; font-weight:700;
  text-align:center; color:#b57bee; letter-spacing:.05em;
  margin:.5rem 0 .25rem;
}
.fasting-phase-msg {
  font-family:'Playfair Display',Georgia,serif; font-size:12px; color:#8b949e;
  text-align:center; line-height:1.5; margin:.4rem 0 .75rem;
  font-style:italic; transition:opacity .5s ease;
}
@keyframes goalPulse {
  0%,100% { box-shadow:0 0 0 0 rgba(255,215,0,.4), 0 0 12px rgba(255,215,0,.25); }
  50%      { box-shadow:0 0 0 6px rgba(255,215,0,.0), 0 0 28px rgba(255,215,0,.6); }
}
.goal-reached {
  animation:fastingShimmer 2s linear infinite, goalPulse 1.6s ease-in-out infinite !important;
  background:linear-gradient(90deg,#f59e0b,#ffd700,#f59e0b) !important;
  background-size:200% 100% !important;
}
.fasting-start-btn {
  width:100%; padding:.75rem; border-radius:12px; border:none;
  background:linear-gradient(135deg,#7c3aed,#b57bee);
  color:#fff; font-family:Manrope,sans-serif; font-weight:700; font-size:14px;
  cursor:pointer; transition:opacity .18s, background .2s, color .2s;
  margin-top:.75rem;
}
.fasting-start-btn:hover { opacity:.88; }
.fasting-start-btn.running {
  background:rgba(251,113,133,.1); border:1px solid rgba(251,113,133,.4);
  color:#fb7185;
}
/* Parcours MIA badges */
.mia-badge {
  display:inline-flex; align-items:center; gap:.4rem;
  padding:.35rem .9rem; border-radius:999px;
  font-size:12px; font-family:Manrope,sans-serif; font-weight:700;
  white-space:nowrap;
}
.mia-stat-box {
  background:#161b22; border-radius:12px; padding:.9rem 1rem;
  display:flex; flex-direction:column; align-items:center; gap:.2rem; flex:1;
}
.mia-stat-value {
  font-family:'Playfair Display',Georgia,serif; font-size:26px;
  font-weight:700; color:#b57bee;
}
.mia-stat-label {
  font-size:10px; color:#6e7681; font-family:Inter,sans-serif;
  text-transform:uppercase; letter-spacing:.06em; text-align:center;
}
/* ======== PALIER BUTTONS (Fasting) ======== */
.palier-btn {
  padding:.45rem .95rem; border-radius:20px;
  background:#21262d; border:1.5px solid #30363d;
  color:#cbc4d0; font-size:13px; font-family:Manrope,sans-serif; font-weight:600;
  cursor:pointer; transition:transform .18s, box-shadow .18s, border-color .18s, background .18s;
}
.palier-btn:hover {
  transform:scale(1.06);
  box-shadow:0 0 12px rgba(181,123,238,.25);
  border-color:#b57bee88; color:#e1e2eb;
}
.palier-btn.active {
  background:linear-gradient(135deg,#7c3aed22,#b57bee22);
  border-color:#b57bee; color:#b57bee; font-weight:700;
  box-shadow:0 0 18px rgba(181,123,238,.35);
  transform:scale(1.04);
}
.palier-btn.seyfried.active { border-color:#c77dff; color:#c77dff;
  box-shadow:0 0 18px rgba(199,125,255,.4); }

/* ======== MODALE CIBLES MÉTABOLIQUES ======== */
#cible-modal {
  position:fixed; inset:0; z-index:850;
  display:none; align-items:center; justify-content:center;
  background:rgba(0,0,0,.72); backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  padding:1.25rem;
}
#cible-modal.open { display:flex; }
#cible-modal-panel {
  width:100%; max-width:600px;
  background:#0d1117; border:1px solid rgba(181,123,238,.3);
  border-radius:24px; padding:1.75rem 1.5rem;
  animation:fadeIn .22s ease; max-height:88vh; overflow-y:auto;
  box-shadow:0 20px 60px rgba(0,0,0,.6);
}
.cible-modal-title {
  font-family:'Playfair Display',Georgia,serif; font-weight:700;
  font-size:20px; margin-bottom:.6rem;
}
.cible-modal-vulga {
  font-family:'Playfair Display',Georgia,serif; font-size:14px;
  line-height:1.7; color:#cbc4d0; margin-bottom:1rem;
}
.cible-modal-keys {
  background:#161b22; border-left:3px solid; border-radius:0 8px 8px 0;
  padding:.65rem .9rem; font-size:12px; font-family:Inter,sans-serif;
  color:#948e99; line-height:1.6; margin-bottom:1.25rem;
}
.cible-ask-mia-btn {
  width:100%; padding:.8rem; border:none; border-radius:12px;
  background:linear-gradient(135deg,#7c3aed,#b57bee);
  color:#fff; font-family:Manrope,sans-serif; font-weight:700; font-size:14px;
  cursor:pointer; transition:opacity .18s;
  display:flex; align-items:center; justify-content:center; gap:.5rem;
}
.cible-ask-mia-btn:hover { opacity:.88; }
/* Cards cibles cliquables */
[data-marker-card] {
  cursor:pointer; transition:border-color .2s, transform .18s, box-shadow .18s;
  border:1px solid transparent;
}
[data-marker-card]:hover {
  border-color:rgba(181,123,238,.4); transform:translateY(-2px);
  box-shadow:0 6px 20px rgba(0,0,0,.3);
}

/* ======== MOBILE NAV OPTIMISÉ ======== */
@media (max-width:480px) {
  .nav-item { padding:.4rem .5rem; min-width:0; flex:1; }
  .nav-label { font-size:9px; }
  .nav-icon  { font-size:22px; }
  .bottom-nav > div { gap:0; }
}
#ai-toast.visible { opacity:1;transform:translateX(-50%) translateY(0); }
/* Premium CTA inline */
.ai-premium-cta {
  margin-top:1.25rem;border:1px solid #b57bee55;border-radius:10px;
  background:linear-gradient(135deg,#1a1040 0%,#12172a 100%);
  padding:.85rem 1rem;display:flex;flex-direction:column;gap:.65rem;
}
.ai-premium-cta-header {
  display:flex;align-items:center;gap:.5rem;
  font-size:12px;color:#b57bee;font-weight:600;text-transform:uppercase;letter-spacing:.07em;
}
.ai-premium-cta-body {
  font-size:12.5px;color:#8b949e;line-height:1.55;
}
.ai-premium-cta-body strong { color:#cdd1d9; }
.ai-premium-cta-btn {
  align-self:flex-start;background:linear-gradient(135deg,#7c3aed,#b57bee);
  color:#fff;border:none;border-radius:8px;padding:.5rem 1.1rem;
  font-size:13px;font-weight:600;cursor:pointer;transition:opacity .2s;
  font-family:Inter,sans-serif;
}
.ai-premium-cta-btn:hover { opacity:.85; }

/* ─── Météo Métabolique ─── */
#meteo-card { border-radius:1rem; padding:.875rem 1rem; margin-bottom:1rem; display:none; align-items:center; gap:.75rem; border:1px solid rgba(0,194,255,0.2); background:linear-gradient(135deg,rgba(0,194,255,0.07),rgba(10,15,28,0.5)); }
#meteo-card .meteo-icon { font-size:28px; flex-shrink:0; }
#meteo-card .meteo-text { font-family:Inter,sans-serif; font-size:13px; color:#CBD5E1; line-height:1.6; }
#meteo-card .meteo-close { margin-left:auto; flex-shrink:0; background:none; border:none; color:#64748B; font-size:18px; cursor:pointer; padding:0; line-height:1; }

/* ─── Energy Check ─── */
#energy-check-bar { display:flex; align-items:center; gap:.5rem; margin-bottom:1rem; flex-wrap:wrap; }
.energy-pill { font-size:11px; padding:4px 12px; border-radius:9999px; border:1px solid rgba(255,255,255,0.1); background:rgba(255,255,255,0.04); color:#94A3B8; cursor:pointer; font-family:Inter,sans-serif; font-weight:600; transition:all .15s; }
.energy-pill.active { background:rgba(0,194,255,0.15); border-color:rgba(0,194,255,0.5); color:#00C2FF; }
.energy-pill.active-warn { background:rgba(251,113,133,0.15); border-color:rgba(251,113,133,0.5); color:#fb7185; }

/* ─── Safety Alert ─── */
#safety-alert-banner { display:none; border-radius:1rem; padding:.875rem 1rem; margin-bottom:1rem; border:1px solid; }

/* ─── Active Protocols ─── */
.protocol-card { background:#0F172A; border-radius:1.25rem; border:1px solid rgba(255,255,255,0.07); padding:1rem; margin-bottom:.75rem; }
.protocol-task { display:flex; align-items:center; gap:.625rem; padding:.375rem 0; border-bottom:1px solid rgba(255,255,255,0.04); cursor:pointer; }
.protocol-task:last-child { border-bottom:none; }
.protocol-task input[type=checkbox] { accent-color:#00C2FF; width:15px; height:15px; flex-shrink:0; cursor:pointer; }
.protocol-task .task-label { font-family:Inter,sans-serif; font-size:12.5px; color:#CBD5E1; line-height:1.5; flex:1; }
.protocol-task.done .task-label { text-decoration:line-through; color:#475569; }
.protocol-progress-bar { height:3px; border-radius:9999px; background:rgba(255,255,255,0.06); margin-top:.75rem; overflow:hidden; }
.protocol-progress-fill { height:100%; border-radius:9999px; transition:width .4s ease; }

/* ─── GKI Simulator ─── */
#gki-simulator-card { border-radius:1.5rem; padding:1.25rem; margin-bottom:1rem; background:linear-gradient(135deg,rgba(124,58,237,0.08),rgba(10,15,28,0.3)); border:1px solid rgba(124,58,237,0.2); }
#gki-sim-slider { width:100%; accent-color:#7C3AED; cursor:pointer; margin:.75rem 0; }
#gki-sim-output { text-align:center; }

/* ── Digital Twin Hero ──────────────────────────────── */
#dt-hero {
  background: #F9F9FB;
  border-radius: 1.25rem;
  padding: 1.25rem 1rem 1rem;
  margin-bottom: 1rem;
  position: relative;
  overflow: hidden;
}
#dt-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 20% 0%, rgba(0,210,255,0.07) 0%, transparent 55%),
              radial-gradient(ellipse at 85% 100%, rgba(146,141,255,0.07) 0%, transparent 55%);
  pointer-events: none;
}
.dt-title {
  font-family: Manrope, sans-serif;
  font-weight: 800;
  font-size: 16px;
  background: linear-gradient(135deg, #00D2FF 0%, #928DFF 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  margin-bottom: 1px;
  line-height: 1.2;
}
.dt-subtitle {
  font-family: Inter, sans-serif;
  font-size: 10px;
  color: #64748B;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 0.875rem;
}
#dt-body-layout { display: flex; gap: 0.875rem; align-items: flex-start; }
#dt-bodymap-wrap { flex-shrink: 0; width: 88px; }
#dt-bodymap-svg  { width: 88px; height: auto; }
.dt-zone-dot { cursor: pointer; transition: transform 0.2s; }
.dt-zone-dot:hover { transform: scale(1.35); }
@keyframes dt-pulse { 0%,100% { opacity: 0.65; } 50% { opacity: 1; } }
.dt-zone-dot circle:first-child { animation: dt-pulse 2.2s ease-in-out infinite; }
#dt-vials { flex: 1; display: flex; flex-direction: column; gap: 0.5rem; }
.dt-vial {
  background: #FFFFFF;
  border-radius: 0.75rem;
  padding: 0.5rem 0.75rem;
  border: 1px solid rgba(0,0,0,0.05);
  box-shadow: 0 1px 3px rgba(0,0,0,0.04);
}
.dt-vial-header { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 4px; }
.dt-vial-label  { font-family: Inter, sans-serif; font-size: 9px; color: #64748B; text-transform: uppercase; letter-spacing: 0.07em; font-weight: 600; }
.dt-vial-value  { font-family: Manrope, sans-serif; font-weight: 800; font-size: 15px; color: #1A1B2E; line-height: 1; }
.dt-vial-bar    { height: 3px; background: #F3F3F5; border-radius: 9999px; overflow: hidden; }
.dt-vial-fill   { height: 100%; border-radius: 9999px; width: 0%; transition: width 0.7s cubic-bezier(0.4,0,0.2,1), background 0.5s; }
#dt-gki-badge {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  border-radius: 9999px;
  font-family: Manrope, sans-serif;
  font-weight: 800;
  font-size: 11px;
  background: linear-gradient(135deg, #00D2FF, #928DFF);
  color: #fff;
  margin-top: 0.5rem;
  box-shadow: 0 2px 8px rgba(146,141,255,0.3);
  letter-spacing: 0.02em;
}
#dt-zone-tags { display: flex; flex-wrap: wrap; gap: 0.35rem; margin-top: 0.875rem; }
.dt-zone-tag {
  font-family: Inter, sans-serif;
  font-size: 10px;
  font-weight: 600;
  padding: 3px 9px;
  border-radius: 9999px;
  cursor: pointer;
  transition: all 0.15s;
  border: 1px solid #E2E4EC;
  color: #64748B;
  background: #F3F3F5;
  white-space: nowrap;
}
.dt-zone-tag:hover { background: rgba(146,141,255,0.1); border-color: rgba(146,141,255,0.4); color: #928DFF; }
.dt-zone-tag.active { background: linear-gradient(135deg,rgba(0,210,255,0.12),rgba(146,141,255,0.12)); border-color: rgba(146,141,255,0.5); color: #928DFF; }

/* ── DT Silhouette — Fatigue State ─── */
#dt-bodymap-svg { transition: filter 0.7s ease, opacity 0.7s ease; }
#dt-bodymap-wrap.dt-fatigue #dt-bodymap-svg { filter: saturate(0.12) brightness(0.72); }
#dt-bodymap-wrap.dt-fatigue .dt-zone-dot circle:first-child { animation-duration: 4.5s !important; }

/* ── DT Silhouette — Stable State (amber halo) ─── */
#dt-bodymap-wrap.dt-stable::after {
  content: '';
  position: absolute;
  inset: -10px;
  border-radius: 60px;
  background: radial-gradient(ellipse at 50% 55%, rgba(251,191,36,0.18) 0%, transparent 68%);
  pointer-events: none;
  animation: dt-halo-pulse 3.2s ease-in-out infinite;
  z-index: 0;
}

/* ── DT Silhouette — Épuisé State (red halo + desaturate) ─── */
#dt-bodymap-wrap.dt-epuise #dt-bodymap-svg { filter: saturate(0.05) brightness(0.55) hue-rotate(330deg); }
#dt-bodymap-wrap.dt-epuise::after {
  content: '';
  position: absolute;
  inset: -10px;
  border-radius: 60px;
  background: radial-gradient(ellipse at 50% 55%, rgba(251,113,133,0.22) 0%, transparent 68%);
  pointer-events: none;
  animation: dt-halo-pulse 2s ease-in-out infinite;
  z-index: 0;
}

/* ── DT Silhouette — Autophagy Halo (24-48h) ─── */
#dt-bodymap-wrap { position: relative; }
#dt-bodymap-wrap.dt-autophagy::after {
  content: '';
  position: absolute;
  inset: -10px;
  border-radius: 60px;
  background: radial-gradient(ellipse at 50% 55%, rgba(0,194,255,0.22) 0%, transparent 68%);
  pointer-events: none;
  animation: dt-halo-pulse 2.8s ease-in-out infinite;
  z-index: 0;
}
@keyframes dt-halo-pulse { 0%,100% { opacity: 0.5; transform: scale(0.96); } 50% { opacity: 1; transform: scale(1.04); } }

/* ── DT Silhouette — Deep Ketosis (48h+) ─── */
#dt-bodymap-wrap.dt-ketosis #dt-bodymap-svg { opacity: 0.52; }
.dt-particle {
  display: none;
  position: absolute;
  width: 4px; height: 4px;
  border-radius: 9999px;
  background: rgba(0,194,255,0.85);
  pointer-events: none;
  left: 0; top: 0;
}
#dt-bodymap-wrap.dt-ketosis .dt-particle { display: block; }
@keyframes dt-fp1 { 0%{transform:translate(18px,210px)scale(0);opacity:0} 15%{opacity:1;scale:1} 85%{opacity:.6} 100%{transform:translate(28px,8px)scale(.4);opacity:0} }
@keyframes dt-fp2 { 0%{transform:translate(58px,195px)scale(0);opacity:0} 15%{opacity:1} 85%{opacity:.6} 100%{transform:translate(70px,6px)scale(.4);opacity:0} }
@keyframes dt-fp3 { 0%{transform:translate(38px,220px)scale(0);opacity:0} 15%{opacity:1} 85%{opacity:.5} 100%{transform:translate(22px,12px)scale(.3);opacity:0} }
.dt-particle:nth-child(1) { animation: dt-fp1 3.2s ease-in-out infinite; background:rgba(0,194,255,0.8); }
.dt-particle:nth-child(2) { animation: dt-fp2 3.8s ease-in-out infinite 1s; background:rgba(146,141,255,0.8); }
.dt-particle:nth-child(3) { animation: dt-fp3 4.4s ease-in-out infinite 2s; background:rgba(0,194,255,0.6); }

/* ── Dossier Mini-Profile ─── */
#dossier-mini {
  display: none;
  align-items: center;
  gap: 0.625rem;
  background: #F9F9FB;
  border-radius: 1rem;
  padding: 0.625rem 0.875rem;
  margin-bottom: 1.25rem;
  cursor: pointer;
  box-shadow: 0 1px 4px rgba(0,0,0,0.05);
  transition: background 0.15s;
}
#dossier-mini:hover { background: #F3F3F5; }
.dossier-mini-icon { font-size: 16px; flex-shrink: 0; }
.dossier-mini-text { font-family: Manrope, sans-serif; font-weight: 700; font-size: 13px; color: #1A1B2E; flex: 1; }
.dossier-mini-edit { font-family: Inter, sans-serif; font-size: 11px; color: #928DFF; font-weight: 600; white-space: nowrap; }
#dossier-full-card { transition: max-height 0.4s ease, opacity 0.35s ease; overflow: hidden; }

/* ── Molecule Taken Button ─── */
.mol-taken-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 12px;
  border-radius: 9999px;
  border: 1px solid rgba(52,211,153,0.25);
  background: rgba(52,211,153,0.05);
  color: #64748B;
  font-family: Inter, sans-serif;
  font-size: 11px; font-weight: 600;
  cursor: pointer;
  transition: all 0.15s;
  margin-top: 0.5rem;
}
.mol-taken-btn:hover { background: rgba(52,211,153,0.12); border-color: rgba(52,211,153,0.5); color: #34D399; }
.mol-taken-btn.active { background: rgba(52,211,153,0.14); border-color: #34D399; color: #34D399; }

/* ── Freemium — Visual Gating ─────────────────────────── */
.pro-gate-wrap { position: relative; transition: opacity 0.2s; }
.pro-gate-locked { opacity: 0.48; cursor: pointer; }
.pro-badge-inline {
  display: inline-flex;
  align-items: center;
  padding: 2px 7px;
  border-radius: 9999px;
  background: #ebdcff;
  color: #4a108a;
  font-family: Inter, sans-serif;
  font-size: 9px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-left: 6px;
  vertical-align: middle;
  pointer-events: none;
}
/* DT Visual teaser — Free users: bottom strip only (doesn't block silhouette) */
#dt-pro-teaser {
  display: none;
  position: absolute;
  bottom: -2px; left: -2px; right: -2px;
  top: auto;                   /* only at the bottom — zone dots are all above 55% height */
  border-radius: 0 0 14px 14px;
  background: linear-gradient(to top, rgba(235,220,255,0.16) 0%, transparent 100%);
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  padding-bottom: 5px;
  cursor: pointer;
  z-index: 3;
}
#dt-pro-teaser.visible { display: flex; }
.dt-pro-teaser-badge {
  font-family: Inter, sans-serif;
  font-size: 9px;
  font-weight: 800;
  color: #4a108a;
  background: #ebdcff;
  padding: 2px 9px;
  border-radius: 9999px;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  box-shadow: 0 2px 8px rgba(235,220,255,0.3);
}

/* ── Pro Upgrade Modal (Editorial · No-Line) ─────────── */
#pro-upgrade-modal {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 960;
  background: rgba(10,15,28,0.86);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  align-items: center;
  justify-content: center;
  padding: 1.25rem;
}
#pro-upgrade-modal.open { display: flex; }
#pro-upgrade-panel {
  background: rgba(15,23,42,0.97);
  border-radius: 1.75rem;
  padding: 2rem 1.75rem 1.5rem;
  width: 100%;
  max-width: 360px;
  box-shadow: 0 0 80px rgba(235,220,255,0.09), 0 32px 64px rgba(0,0,0,0.55);
  position: relative;
  animation: proModalIn .28s cubic-bezier(.32,.72,0,1);
}
@keyframes proModalIn { from { opacity:0; transform:translateY(20px) scale(.97); } to { opacity:1; transform:none; } }
.pro-modal-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 11px;
  border-radius: 9999px;
  background: #ebdcff;
  color: #4a108a;
  font-family: Inter, sans-serif;
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 1rem;
}
.pro-modal-title {
  font-family: Manrope, sans-serif;
  font-weight: 800;
  font-size: 19px;
  color: #F1F5F9;
  line-height: 1.25;
  margin-bottom: 0.5rem;
}
.pro-modal-body {
  font-family: Inter, sans-serif;
  font-size: 13px;
  color: #94A3B8;
  line-height: 1.65;
  margin-bottom: 1.25rem;
}
.pro-modal-feat {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  font-family: Inter, sans-serif;
  font-size: 12.5px;
  color: #CBD5E1;
  padding: 0.35rem 0;
}
.pro-modal-feat::before { content: '✦'; color: #c4a8ff; font-size: 9px; flex-shrink: 0; }
.pro-modal-cta {
  width: 100%;
  padding: 0.875rem;
  border-radius: 9999px;
  border: none;
  background: linear-gradient(135deg, #00D2FF 0%, #928DFF 100%);
  color: #fff;
  font-family: Manrope, sans-serif;
  font-weight: 800;
  font-size: 14px;
  cursor: pointer;
  box-shadow: 0 6px 24px rgba(146,141,255,0.4);
  transition: opacity 0.18s;
  margin-top: 1.5rem;
  margin-bottom: 0.625rem;
}
.pro-modal-cta:hover { opacity: 0.88; }
.pro-modal-skip {
  width: 100%;
  background: none;
  border: none;
  color: #475569;
  font-family: Inter, sans-serif;
  font-size: 12px;
  cursor: pointer;
  padding: 0.3rem;
  transition: color 0.15s;
}
.pro-modal-skip:hover { color: #64748B; }

/* ══ Landing Page V2.5 — Design System ══════════════════════════════════ */
/* Glassmorphism card — matches dashboard card style */
.lp-glass {
  background: rgba(255,255,255,0.03);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255,255,255,0.07);
  transition: border-color .25s, box-shadow .25s;
}
.lp-glass:hover {
  border-color: rgba(78,222,163,0.18);
  box-shadow: 0 0 24px rgba(78,222,163,0.04);
}
/* Trust badge — emerald pill matching phase tags */
.lp-trust-badge {
  display: inline-flex; align-items: center; gap: .35rem;
  padding: .3rem .875rem;
  background: rgba(78,222,163,0.06);
  border: 1px solid rgba(78,222,163,0.18);
  border-radius: 9999px;
  font-family: Inter, sans-serif; font-size: 11px; font-weight: 700;
  color: #e1e2eb; white-space: nowrap;
}
.lp-trust-badge .lp-trust-dot {
  width: 5px; height: 5px; border-radius: 9999px;
  background: #4edea3; flex-shrink: 0;
}
.lp-trust-badge .lp-trust-sub { color: #475569; font-weight: 500; }
/* Violet card — Initié plan */
.lp-glass-violet {
  background: rgba(208,188,255,0.04);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1.5px solid rgba(208,188,255,0.2);
  box-shadow: 0 0 40px rgba(208,188,255,0.06), inset 0 0 0 1px rgba(255,255,255,0.04);
  transition: border-color .25s;
}
.lp-glass-violet:hover { border-color: rgba(208,188,255,0.35); }
/* Hero score ring glow */
@keyframes lp-ring-glow {
  0%,100% { filter: drop-shadow(0 0 6px rgba(16,185,129,0.5)); }
  50%      { filter: drop-shadow(0 0 12px rgba(16,185,129,0.8)); }
}
.lp-score-arc { animation: lp-ring-glow 3s ease-in-out infinite; }

/* ── Dashboard Resource Tabs V2.5 ── */
.dash-tab-btn {
  flex:1; padding:.45rem .375rem; border-radius:.75rem; border:none;
  background:transparent; font-family:Inter,sans-serif; font-size:11px;
  font-weight:600; color:#64748b; cursor:pointer; transition:all .2s;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.dash-tab-btn.dash-tab-active {
  background:rgba(78,222,163,0.12); color:#4edea3;
  border:1px solid rgba(78,222,163,0.22);
}
.dash-tab-btn:hover:not(.dash-tab-active) { color:#94a3b8; background:rgba(255,255,255,0.04); }
.dash-tab-content { display:none; }
.dash-tab-content.dash-tab-visible { display:block; }
/* glass card resource */
.res-glass-card {
  background:rgba(255,255,255,0.04); backdrop-filter:blur(12px);
  border:1px solid rgba(255,255,255,0.09); border-radius:1.125rem;
  padding:.875rem; transition:border-color .2s;
}
.res-glass-card:hover { border-color:rgba(78,222,163,0.2); }
/* Cloud Sync pulse animation */
@keyframes mia-sync-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(78,222,163,0.5); }
  70%  { box-shadow: 0 0 0 10px rgba(78,222,163,0); }
  100% { box-shadow: 0 0 0 0 rgba(78,222,163,0); }
}
.mia-syncing { animation: mia-sync-pulse 1.1s ease-in-out infinite !important; }

/* ── Dashboard V2.6 ── */
@keyframes action-pulse {
  0%,100% { box-shadow: 0 0 0 0 rgba(78,222,163,0.35); }
  50%      { box-shadow: 0 0 0 9px rgba(78,222,163,0); }
}
.dh-action-pulse { animation: action-pulse 2.6s ease-in-out infinite; }
@media (max-width: 480px) {
  /* Status banner — sticky + layout fixes */
  #mia-status-banner { position: sticky; top: 72px; z-index: 10; }
  /* Banner header row : wrap GKI pill below title on very narrow screens */
  .msb-flex-row { flex-wrap: wrap; gap: .5rem !important; }
  .msb-flex-row #msb-gki-pill { flex-shrink: 0; align-self: flex-start; }
  /* "Valider mon repas" button: ensure it stays below the GKI pill, not overlapping */
  #mia-status-banner > div:last-of-type { margin-top: .5rem !important; }
  /* Cards grid: single column */
  #dh-cards-grid { grid-template-columns: 1fr !important; }
  /* Action card: button text wraps, no overflow */
  #dh-action-card button { white-space: normal !important; min-height: 2.2rem; font-size: 11px !important; }
  /* Ensure last card doesn't get clipped by nav */
  #dh-header { padding-bottom: .5rem; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   PRECISION PULSE V4.2 — HIGH-END MEDICAL/AI DESIGN SYSTEM
   ─────────────────────────────────────────────────────────────────────────
   Rules only — no IDs changed, no JS touched, 5-pillar structure preserved.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Design tokens ──────────────────────────────────────────────────────── */
:root {
  --font-display:        'Manrope', sans-serif;
  --font-body:           'Inter', sans-serif;
  --emerald:             #4edea3;
  --emerald-dim:         #2fb87d;
  --emerald-glow:        0 0 20px rgba(78, 222, 163, 0.20);
  --emerald-glow-md:     0 0 32px rgba(78, 222, 163, 0.38);
  --navy-deep:           #0b1326;
  --glass-bg:            rgba(255,255,255,0.046);
  --glass-border:        rgba(255,255,255,0.10);
  --glass-blur:          blur(14px);
  --card-radius:         1.25rem;
  --color-accent:        #4edea3;   /* override — active nav items & accent refs */
}

/* ── Google Fonts already in <head>. Reaffirm Manrope on body ── */
body { font-family: var(--font-body) !important; }

/* ── glass-card enriched ────────────────────────────────────────────────── */
.glass-card {
  background:          var(--glass-bg) !important;
  backdrop-filter:     var(--glass-blur) !important;
  -webkit-backdrop-filter: var(--glass-blur) !important;
  border:              1px solid var(--glass-border) !important;
  border-radius:       var(--card-radius) !important;
  box-shadow:          0 4px 24px rgba(0,0,0,0.2);
}
.glass-card:hover { border-color: rgba(78,222,163,0.18) !important; }

/* ── .card → glass morphism (all content cards) ────────────────────────── */
.card {
  background:          rgba(14,22,42,0.72) !important;
  backdrop-filter:     blur(14px) !important;
  -webkit-backdrop-filter: blur(14px) !important;
  border:              1px solid rgba(255,255,255,0.08) !important;
  border-radius:       var(--card-radius) !important;
  box-shadow:          0 4px 24px rgba(0,0,0,0.22) !important;
}

/* ── .res-glass-card enriched ───────────────────────────────────────────── */
.res-glass-card {
  background:          rgba(255,255,255,0.04) !important;
  backdrop-filter:     blur(14px) !important;
  -webkit-backdrop-filter: blur(14px) !important;
  border:              1px solid rgba(255,255,255,0.09) !important;
  box-shadow:          0 2px 12px rgba(0,0,0,0.18);
}
.res-glass-card:hover { border-color: rgba(78,222,163,0.22) !important; }

/* ── App Header → glass ─────────────────────────────────────────────────── */
.app-header {
  background:          rgba(11,19,38,0.92) !important;
  backdrop-filter:     blur(18px) !important;
  -webkit-backdrop-filter: blur(18px) !important;
  border-bottom:       1px solid rgba(255,255,255,0.06) !important;
  box-shadow:          0 2px 16px rgba(0,0,0,0.2);
}

/* ── Bottom Nav → floating glass ────────────────────────────────────────── */
.bottom-nav {
  background:          rgba(11,19,38,0.90) !important;
  backdrop-filter:     blur(22px) !important;
  -webkit-backdrop-filter: blur(22px) !important;
  border-top:          1px solid rgba(78,222,163,0.10) !important;
  box-shadow:          0 -6px 30px rgba(0,0,0,0.32), 0 -1px 0 rgba(78,222,163,0.06) !important;
}

/* ── Nav active state → Emerald glow ────────────────────────────────────── */
.nav-item.active             { color: var(--emerald) !important; }
.nav-item.active .nav-icon   { filter: drop-shadow(0 0 6px rgba(78,222,163,0.55)); }
.nav-item.active .nav-label  { color: var(--emerald) !important; font-weight: 800 !important; }

/* ── Display font for all numeric/biomarker values ──────────────────────── */
.marker-input,
.biomarker-value,
.gki-value,
[data-gki-score] {
  font-family: var(--font-display) !important;
  font-weight: 800 !important;
  letter-spacing: -0.025em;
}

/* ── Button Primary — Emerald CTA ───────────────────────────────────────── */
.btn-primary {
  background:     var(--emerald) !important;
  color:          var(--navy-deep) !important;
  font-family:    var(--font-display) !important;
  font-weight:    800 !important;
  border:         none !important;
  border-radius:  9999px;
  padding:        .8rem 1.5rem;
  cursor:         pointer;
  transition:     box-shadow .2s, transform .15s;
  letter-spacing: -0.01em;
}
.btn-primary:hover {
  box-shadow: var(--emerald-glow-md) !important;
  transform:  translateY(-1px);
}

/* ── Button Ghost — Secondary ───────────────────────────────────────────── */
.btn-ghost {
  background:   transparent !important;
  color:        #fff !important;
  font-family:  var(--font-body) !important;
  font-weight:  600 !important;
  border:       1px solid rgba(187,202,191,0.35) !important;
  border-radius: 9999px;
  padding:      .8rem 1.5rem;
  cursor:       pointer;
  transition:   background .2s, border-color .2s;
}
.btn-ghost:hover {
  background:   rgba(255,255,255,0.05) !important;
  border-color: rgba(187,202,191,0.5) !important;
}

/* ── Auth button → Emerald ──────────────────────────────────────────────── */
.auth-btn {
  background:  linear-gradient(135deg, #4edea3 0%, #22c87a 100%) !important;
  color:       var(--navy-deep) !important;
  font-family: var(--font-display) !important;
  font-weight: 800 !important;
}

/* ── GKI score circle → Emerald glow ────────────────────────────────────── */
#msb-gki-pill { box-shadow: var(--emerald-glow) !important; }

/* ── Latest MIA response bubble → Emerald accent border ─────────────────── */
.mia-response-bubble:last-of-type {
  border-color: rgba(78,222,163,0.20) !important;
  box-shadow:   var(--emerald-glow) !important;
}

/* ── MIA question input focus → Emerald ─────────────────────────────────── */
#ai-question:focus {
  border-color: var(--emerald) !important;
  box-shadow:   0 0 0 3px rgba(78,222,163,0.12) !important;
}

/* ── Filter / proto pills → glass ───────────────────────────────────────── */
.filter-pill, .proto-pill {
  background:   rgba(255,255,255,0.04) !important;
  border-color: rgba(255,255,255,0.10) !important;
  backdrop-filter: blur(8px);
}
.filter-pill.active {
  background:   rgba(78,222,163,0.12) !important;
  border-color: rgba(78,222,163,0.35) !important;
  color:        var(--emerald) !important;
}
.proto-pill.active {
  background:   rgba(78,222,163,0.12) !important;
  border-color: rgba(78,222,163,0.35) !important;
  color:        var(--emerald) !important;
}

/* ── Labo category tabs → Emerald active ────────────────────────────────── */
.labo-cat-btn.active {
  background:   rgba(78,222,163,0.12) !important;
  border-color: rgba(78,222,163,0.35) !important;
  color:        var(--emerald) !important;
}

/* ── Protocol cards → glass ─────────────────────────────────────────────── */
.protocol-card {
  background:      rgba(11,19,38,0.65) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  border:          1px solid rgba(255,255,255,0.07) !important;
}

/* ── Victory badge → glass ──────────────────────────────────────────────── */
#victory-badge {
  background:  rgba(78,222,163,0.06) !important;
  border:      1px solid rgba(78,222,163,0.18) !important;
  box-shadow:  var(--emerald-glow) !important;
}

/* ── Onboarding CTA → Emerald ───────────────────────────────────────────── */
.onboarding-cta {
  background:  linear-gradient(135deg, #4edea3 0%, #22c87a 100%) !important;
  color:       var(--navy-deep) !important;
  box-shadow:  0 4px 24px rgba(78,222,163,0.30) !important;
}

/* ── Scrollbar accent → Emerald ─────────────────────────────────────────── */
::-webkit-scrollbar-thumb:hover { background: rgba(78,222,163,0.40) !important; }

/* ── Landing page bg-slate Tailwind overrides ────────────────────────────── */
.bg-slate-800 {
  background: rgba(22,32,56,0.65) !important;
  backdrop-filter: blur(10px) !important;
}
[class*="bg-slate-900"] {
  background: rgba(11,19,38,0.55) !important;
  backdrop-filter: blur(10px) !important;
}

/* ── Mobile 375px glass adjustments ─────────────────────────────────────── */
@media (max-width: 400px) {
  .card, .glass-card, .res-glass-card { border-radius: 1rem !important; }
  .bottom-nav { border-top-width: 1px; }
  .nav-label  { font-size: 9px; }
}

/* ── MIA Vision Bio-Summary Panel (V5.0) ────────────────────────────────── */
.mia-bio-summary {
  background:      rgba(78,222,163,0.05);
  border:          1px solid rgba(78,222,163,0.22);
  border-radius:   .875rem;
  padding:         .75rem .875rem;
  margin-bottom:   .75rem;
  backdrop-filter: blur(10px);
}
.mia-bio-summary-title {
  font-family:  var(--font-display);
  font-weight:  700;
  font-size:    12px;
  color:        #4edea3;
  letter-spacing: .04em;
  text-transform: uppercase;
  margin-bottom: .5rem;
  display:      flex;
  align-items:  center;
  gap:          .35rem;
}
.mia-bio-summary-grid {
  display:   flex;
  flex-wrap: wrap;
  gap:       .4rem;
}
.mia-bio-marker-row {
  display:     flex;
  align-items: center;
  gap:         .3rem;
  background:  rgba(255,255,255,0.04);
  border:      1px solid rgba(255,255,255,0.07);
  border-radius: .5rem;
  padding:     .25rem .55rem;
}
.mia-bio-marker-name {
  font-family: var(--font-body);
  font-size:   10.5px;
  color:       #94a3b8;
}
.mia-bio-marker-val {
  font-family: var(--font-display);
  font-weight: 700;
  font-size:   12px;
  color:       #e1e2eb;
}
.mia-bio-badge {
  font-size:   9px;
  font-weight: 700;
  padding:     1px 6px;
  border-radius: 9999px;
  font-family: var(--font-body);
  white-space: nowrap;
}
.mia-bio-badge.normal  { background: rgba(52,211,153,0.15); color: #34d399; border: 1px solid rgba(52,211,153,0.3); }
.mia-bio-badge.warning { background: rgba(251,191,36,0.15);  color: #fbbf24; border: 1px solid rgba(251,191,36,0.3); }
.mia-bio-badge.alert   { background: rgba(239,68,68,0.15);   color: #f87171; border: 1px solid rgba(239,68,68,0.3); }
.mia-bio-summary-resume {
  font-family:  var(--font-body);
  font-size:    11px;
  color:        #64748b;
  font-style:   italic;
  margin-top:   .45rem;
  line-height:  1.5;
}

/* ─── V8.0 Metabolic Coach ─────────────────────────────────────────────────── */
@keyframes insightPulse {
  0%, 100% { border-color: rgba(78,222,163,0.22); box-shadow: 0 0 0 0 rgba(78,222,163,0); }
  50%       { border-color: rgba(78,222,163,0.58); box-shadow: 0 0 10px rgba(78,222,163,0.18); }
}
#mia-insight-card {
  animation: insightPulse 2.4s ease-in-out infinite;
  transition: opacity .3s ease;
}
#mia-insight-card.insight-alert {
  animation: insightPulse 1.4s ease-in-out infinite;
  border-color: rgba(251,113,133,0.38) !important;
  background: rgba(251,113,133,0.06) !important;
}
#mia-insight-card.insight-alert .insight-pulse-dot {
  background: #fb7185 !important;
  box-shadow: 0 0 5px rgba(251,113,133,0.7) !important;
}
.gki-trend-badge {
  display: inline-flex;
  align-items: center;
  gap: .25rem;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 11px;
  padding: .15rem .5rem;
  border-radius: 9999px;
  letter-spacing: .01em;
}
.gki-trend-badge.down  { background: rgba(78,222,163,0.14); color: #4edea3; border: 1px solid rgba(78,222,163,0.3); }
.gki-trend-badge.up    { background: rgba(251,113,133,0.12); color: #fb7185; border: 1px solid rgba(251,113,133,0.28); }
.gki-trend-badge.flat  { background: rgba(148,163,184,0.10); color: #94a3b8; border: 1px solid rgba(148,163,184,0.22); }

/* ─── V9.0 MIA Vision Composants — SUSPENDED V9.6 ───────────────────────────── */
/*
@keyframes laserScan {
  0%   { top: 0%;   opacity: 0.85; }
  48%  { opacity: 1; }
  52%  { opacity: 1; }
  100% { top: 100%; opacity: 0.85; }
}
.laser-scan-line {
  position:  absolute;
  left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent 0%, #4edea3 30%, #a7f3d0 50%, #4edea3 70%, transparent 100%);
  box-shadow: 0 0 16px 3px rgba(78,222,163,0.55), 0 0 4px 1px rgba(78,222,163,0.9);
  animation: laserScan 1.8s ease-in-out infinite;
  z-index: 10;
  pointer-events: none;
  border-radius: 9999px;
}

/* V9.6 — holo/macro/conseil classes suspended (meal scan deactivated)
.holo-image-wrap { }
.holo-box { }
.holo-box-label { }
.macro-pill { }
.pill-seyfried-dot { }
.mia-conseil-block { }
.mia-conseil-label { }
.mia-conseil-text { }
*/

/* ═══════════════════════════════════════════════════════════════════════════
   END PRECISION PULSE V4.2
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Luminescence Button (V10.3 CTA) ────────────────────────── */
.luminescence-btn{
  display:block;
  width:100%;
  padding:1rem 1.5rem;
  border-radius:.75rem;
  border:none;
  cursor:pointer;
  font-family:'Manrope',sans-serif;
  font-weight:900;
  font-size:1.125rem;
  letter-spacing:0.01em;
  color:#fff;
  background:linear-gradient(135deg,#7b2d8b 0%,#b57bee 50%,#c77dff 100%);
  background-size:200% 200%;
  box-shadow:0 0 28px rgba(181,123,238,0.35),0 4px 16px rgba(0,0,0,0.3);
  transition:box-shadow 0.3s ease,opacity 0.2s ease;
  animation:luminescence-pulse 3s ease-in-out infinite;
}
.luminescence-btn:hover{
  box-shadow:0 0 44px rgba(181,123,238,0.55),0 8px 24px rgba(0,0,0,0.35);
  opacity:0.93;
}
.luminescence-btn:active{opacity:0.78}
@keyframes luminescence-pulse{
  0%,100%{box-shadow:0 0 28px rgba(181,123,238,0.35),0 4px 16px rgba(0,0,0,0.3)}
  50%    {box-shadow:0 0 48px rgba(199,125,255,0.5),0 4px 20px rgba(0,0,0,0.3)}
}

/* ── Coach IA — Nav Centre CTA (V10.3) ──────────────────────── */
.nav-item--primary { position:relative; }
.nav-item--primary::before {
  content:'';
  position:absolute;
  top:50%; left:50%;
  transform:translate(-50%,-65%);
  width:46px; height:46px;
  border-radius:9999px;
  background:rgba(181,123,238,0.13);
  pointer-events:none;
  transition:background 0.3s;
}
.nav-item--primary:hover::before { background:rgba(181,123,238,0.22); }
.nav-item--primary .nav-icon {
  font-size:26px;
  background:linear-gradient(135deg,#b57bee,#c77dff);
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  background-clip:text;
}
.nav-item--primary .nav-label { color:#b57bee; }
.nav-item--primary.active .nav-icon {
  filter:drop-shadow(0 0 7px rgba(199,125,255,0.55));
}

/* ══════════════════════════════════════════════════════════
   METANOIA ASSISTANCE ENGINE — Driver.js dark theme overrides
   ══════════════════════════════════════════════════════════ */
.mia-tour-popover {
  background: linear-gradient(160deg, rgba(22,27,40,0.98), rgba(15,20,35,0.98)) !important;
  border: 1px solid rgba(181,123,238,0.32) !important;
  border-radius: 1.25rem !important;
  box-shadow: 0 20px 60px rgba(0,0,0,0.6), 0 0 0 1px rgba(181,123,238,0.08) !important;
  color: #e1e2eb !important;
  font-family: Inter, sans-serif !important;
  max-width: 320px !important;
}
.mia-tour-popover .driver-popover-title {
  font-family: Manrope, sans-serif !important;
  font-weight: 800 !important;
  font-size: 16px !important;
  color: #e1e2eb !important;
  margin-bottom: 0.5rem !important;
}
.mia-tour-popover .driver-popover-description {
  font-size: 13.5px !important;
  line-height: 1.6 !important;
  color: #cbc4d0 !important;
}
.mia-tour-popover .driver-popover-description strong { color: #c77dff; }
.mia-tour-popover .driver-popover-progress-text {
  font-size: 11px !important;
  color: #6b6475 !important;
}
.mia-tour-popover .driver-popover-footer { margin-top: 1rem !important; }
.mia-tour-popover .driver-popover-btn-next,
.mia-tour-popover .driver-popover-done-btn {
  background: linear-gradient(135deg,#b57bee,#c77dff) !important;
  border: none !important;
  border-radius: 9999px !important;
  color: #fff !important;
  font-family: Inter, sans-serif !important;
  font-weight: 700 !important;
  font-size: 13px !important;
  padding: 0.45rem 1.1rem !important;
  cursor: pointer !important;
  box-shadow: 0 4px 14px rgba(181,123,238,0.35) !important;
}
.mia-tour-popover .driver-popover-btn-prev {
  background: rgba(181,123,238,0.1) !important;
  border: 1px solid rgba(181,123,238,0.25) !important;
  border-radius: 9999px !important;
  color: #b57bee !important;
  font-family: Inter, sans-serif !important;
  font-weight: 600 !important;
  font-size: 13px !important;
  padding: 0.45rem 1.1rem !important;
  cursor: pointer !important;
}
.driver-overlay { opacity: 1 !important; }
.driver-popover-arrow { display: none !important; }

/* ══════════════════════════════════════════════════════════
   TASK 1A — Dashboard mobile card spacing
   ══════════════════════════════════════════════════════════ */
#dh-cards-grid   { margin-bottom: 1rem !important; }
#vigilance-banner { margin-bottom: 1.25rem !important; }
#mia-status-banner { margin-bottom: 1rem !important; }

@media (max-width: 480px) {
  #dh-cards-grid { gap: 0.5rem; }
  /* Ensure every .card in view-dashboard has breathing room */
  #view-dashboard .card { margin-bottom: 1rem !important; }
}

/* ══════════════════════════════════════════════════════════
   TASK 1B — Driver.js popover: clear bottom nav + z-index
   ══════════════════════════════════════════════════════════ */
/* Overlay must sit above bottom-nav (z-index:1000) */
.driver-overlay { z-index: 1050 !important; }

/* Popover: above overlay, clear the 64px bottom nav */
.driver-popover {
  z-index: 1200 !important;
  margin-bottom: 84px !important;   /* clears fixed bottom-nav */
  max-height: calc(100svh - 160px);
  overflow-y: auto;
}

/* Button row: flex + gap so buttons don't stack/overflow */
.driver-popover-footer,
.driver-popover-navigation-btns {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  flex-wrap: wrap !important;
}
.driver-popover-prev-btn { margin-right: 0 !important; }