/* ══════════════════════════════════════════════════════
   NutriLog — Style v2 (Hybride)
   ═══════════════════════════════════════════════════════ */

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

/* ─── TOKENS DÉFAUT (Forest sombre) ─── */
:root{
  --bg:#141414; --bg2:#0e0e0e; --bg3:#1c1c1c; --card:#181818;
  --border:#1f1f1f; --border2:#2a2a2a;
  --text:#e8e6e0; --text2:#a8a69e; --text3:#7a786f;
  --accent:#9bc77a; --accent2:#7eb155; --accent-bg:rgba(155,199,122,.1);
  --amber:#d4a34a;  --amber-bg:rgba(212,163,74,.12);
  --green:#9bc77a;  --green-bg:rgba(155,199,122,.12);
  --blue:#6b9fd4;   --blue-bg:rgba(107,159,212,.12);
  --purple:#b87ad4; --purple-bg:rgba(184,122,212,.12);
  --coral:#d4715a;  --coral-bg:rgba(212,113,90,.12);
  --r:12px; --rs:8px; --rl:18px; --rxl:24px;
  --sidebar-w:230px; --tabbar-h:70px;
}

/* ─── THÈMES ─── */
body.theme-violet{
  --bg:#13101e; --bg2:#0d0b14; --bg3:#1c1929; --card:#1a162a;
  --border:#2a2438; --border2:#3a3450;
  --text:#ede9f8; --text2:#aaa0d4; --text3:#6a5f88;
  --accent:#a78bfa; --accent2:#8b6df0; --accent-bg:rgba(167,139,250,.12);
}
body.theme-light{
  --bg:#fafaf6; --bg2:#ffffff; --bg3:#f0ede5; --card:#ffffff;
  --border:#e8e4dc; --border2:#d0ccc2;
  --text:#1a1814; --text2:#5a564e; --text3:#9a958c;
  --accent:#5c8c42; --accent2:#4a7335; --accent-bg:rgba(92,140,66,.1);
  --amber:#b8842a;  --amber-bg:rgba(184,132,42,.1);
  --green:#5c8c42;  --green-bg:rgba(92,140,66,.1);
  --blue:#3a7eb5;   --blue-bg:rgba(58,126,181,.1);
  --purple:#9558b8; --purple-bg:rgba(149,88,184,.1);
  --coral:#b85a3f;  --coral-bg:rgba(184,90,63,.1);
}
body.theme-midnight{
  --bg:#0c1121; --bg2:#060912; --bg3:#161d33; --card:#101729;
  --border:#1d2640; --border2:#2a3656;
  --text:#e8edf8; --text2:#8898c4; --text3:#4d5d80;
  --accent:#38bdf8; --accent2:#1aa0e0; --accent-bg:rgba(56,189,248,.12);
}
body.theme-dark{
  --bg:#1a1a1a; --bg2:#111111; --bg3:#242424; --card:#1f1f1f;
  --border:#2a2a2a; --border2:#3a3a3a;
  --text:#e8e8e8; --text2:#a0a0a0; --text3:#666666;
  --accent:#e0e0e0; --accent2:#c0c0c0; --accent-bg:rgba(224,224,224,.1);
}

/* ─── BASE ─── */
html{-webkit-text-size-adjust:100%; overflow-x:hidden}
body{
  font-family:'DM Sans', system-ui, sans-serif;
  background:var(--bg); color:var(--text);
  min-height:100vh; line-height:1.6; font-size:14px;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
.serif{font-weight:600; letter-spacing:-.2px}
@keyframes pulse{0%,100%{opacity:1; transform:scale(1)} 50%{opacity:.6; transform:scale(.85)}}

/* ─── LAYOUT DESKTOP ─── */
.app{display:grid; grid-template-columns:var(--sidebar-w) 1fr; min-height:100vh}

.sidebar{
  background:var(--bg2);
  border-right:1px solid var(--border);
  padding:28px 16px 20px;
  display:flex; flex-direction:column; gap:28px;
  position:sticky; top:0; height:100vh; overflow-y:auto;
}
.sidebar-logo{
  font-family:'DM Sans', sans-serif;
  font-size:22px; font-weight:600;
  color:var(--text); padding:0 8px; letter-spacing:-.5px;
}
.sidebar-logo span{color:var(--accent)}

.sidebar-nav{display:flex; flex-direction:column; gap:3px}
.nav-item{
  display:flex; align-items:center; gap:11px;
  padding:9px 11px; border-radius:var(--rs);
  font-size:13px; color:var(--text2);
  background:transparent; border:none;
  cursor:pointer; font-family:inherit;
  width:100%; text-align:left; transition:all .15s;
}
.nav-item:hover{background:var(--bg3); color:var(--text)}
.nav-item.active{background:var(--bg3); color:var(--text); font-weight:500}
.nav-item-icon{width:16px; height:16px; flex-shrink:0; opacity:.6}
.nav-item.active .nav-item-icon{opacity:1; color:var(--accent)}

.sidebar-user{
  margin-top:auto; display:flex; align-items:center; gap:10px;
  padding-top:16px; border-top:1px solid var(--border);
}
.sidebar-avatar{
  width:30px; height:30px; border-radius:50%;
  background:var(--bg3); color:var(--text2);
  display:flex; align-items:center; justify-content:center;
  font-size:12px; font-weight:500; flex-shrink:0;
}
.sidebar-user-info{flex:1; min-width:0}
.sidebar-user-name{font-size:12px; color:var(--text); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.sidebar-user-role{font-size:10px; color:var(--text3)}

.main{padding:32px 44px; overflow-x:hidden}

/* ─── TOPBAR ─── */
.topbar{
  display:flex; justify-content:space-between; align-items:center;
  margin-bottom:24px; flex-wrap:wrap; gap:14px;
}
.topbar-left{flex:1; min-width:200px}
.topbar-eyebrow-row{
  display:flex; align-items:center; gap:12px;
  margin-bottom:6px; flex-wrap:wrap;
}
.eyebrow{font-size:11px; color:var(--text3); letter-spacing:.5px; text-transform:uppercase}
.topbar-date{
  font-size:20px; font-weight:500; color:var(--text);
  cursor:pointer;
  transition:color .15s;
}
.topbar-date:hover{ color:var(--accent); }
.topbar-actions{display:flex; gap:8px; flex-wrap:wrap}

/* Badge score nutritionnel du jour (à côté de la date) */
.topbar-date-row{
  display:flex; align-items:center; gap:12px;
  flex-wrap:wrap;
}
.journal-score{
  display:inline-flex; align-items:center; gap:7px;
  background:transparent;
  border:1px solid var(--border);
  padding:4px 10px 4px 4px;
  border-radius:20px;
  font-family:inherit;
  cursor:pointer;
  transition:all .15s;
}
.journal-score:hover{
  border-color:var(--border2);
  background:var(--bg3);
}
.journal-score-badge{
  width:22px; height:22px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-family:'DM Sans', sans-serif;
  font-size:12px; font-weight:700;
  color:var(--bg2);
  flex-shrink:0;
}
.journal-score-badge.score-A{background:#9bc77a}
.journal-score-badge.score-B{background:#b8d68f}
.journal-score-badge.score-C{background:#d4a34a}
.journal-score-badge.score-D{background:#d4715a}
.journal-score-badge.score-E{background:#a83838}
.journal-score-val{
  font-size:12px;
  color:var(--text2);
  font-weight:500;
}

/* ─── BOUTONS ─── */
.btn{
  background:transparent; border:1px solid var(--border2);
  color:var(--text2); padding:8px 14px;
  border-radius:var(--rs); font-size:13px;
  cursor:pointer; font-family:inherit;
  display:inline-flex; align-items:center; gap:6px;
  transition:all .15s;
}
.btn:hover{border-color:var(--text3); color:var(--text)}
.btn-primary{
  background:var(--accent); border-color:var(--accent);
  color:var(--bg2); font-weight:500;
}
.btn-primary:hover{background:var(--accent2); border-color:var(--accent2); color:var(--bg2)}
.btn-icon{width:36px; height:36px; padding:0; display:inline-flex; align-items:center; justify-content:center}
.btn-danger{color:var(--coral); border-color:transparent}
.btn-danger:hover{background:var(--coral-bg); border-color:var(--coral-bg); color:var(--coral)}
.btn-ghost{border-color:transparent}
.btn-ghost:hover{background:var(--bg3)}

/* ─── HERO ROW (Journal) ─── */
.hero-row{
  display:grid; grid-template-columns:1fr auto auto;
  align-items:center; gap:32px;
  padding:24px 0;
  border-top:1px solid var(--border);
  border-bottom:1px solid var(--border);
  margin-bottom:24px;
}
.hero-main{min-width:0}
.hero-num-row{display:flex; align-items:baseline; gap:12px; margin-bottom:6px; flex-wrap:wrap}
.hero-num{
  font-family:'DM Sans', sans-serif;
  font-size:64px; font-weight:600; line-height:1;
  color:var(--text); letter-spacing:-2px;
}
.hero-target{font-size:14px; color:var(--text3)}
.hero-sub{font-size:13px; color:var(--accent)}

/* Donut */
.donut{position:relative; flex-shrink:0}
.donut svg{transform:rotate(-90deg)}
.donut-track{stroke:var(--border); fill:none}
.donut-fill{stroke:var(--accent); fill:none; stroke-linecap:round; transition:stroke-dashoffset .5s ease}
.donut-center{
  position:absolute; inset:0;
  display:flex; flex-direction:column;
  align-items:center; justify-content:center;
}
.donut-num{font-family:'DM Sans', sans-serif; font-weight:600; color:var(--text)}
.donut-lbl{font-size:9px; color:var(--text3); letter-spacing:.5px; text-transform:uppercase; margin-top:3px}

/* Activity card */
.activity-card{
  border-left:1px solid var(--border);
  padding-left:24px; min-width:200px;
}
.activity-h{display:flex; align-items:center; gap:7px; margin-bottom:10px}
.activity-icon{color:var(--coral)}
.activity-icon svg{width:14px; height:14px}
.activity-title{font-size:10px; color:var(--coral); letter-spacing:.5px; text-transform:uppercase; font-weight:500}
.activity-stats{display:flex; gap:18px}
.activity-stat-v{font-family:'DM Sans', sans-serif; font-size:22px; font-weight:600; line-height:1; color:var(--text)}
.activity-stat-v .unit{font-size:11px; font-weight:400; color:var(--text3); font-family:'DM Sans', sans-serif; margin-left:2px}
.activity-stat-l{font-size:10px; color:var(--text3); margin-top:3px}
.activity-detail{font-size:11px; color:var(--accent); margin-top:10px}
.activity-empty{font-size:11px; color:var(--text3)}

/* ─── MACROS ─── */
.macros{
  display:grid; grid-template-columns:repeat(4, 1fr); gap:28px;
  margin-bottom:32px;
}
.macro-label{display:flex; align-items:center; gap:7px; font-size:11px; color:var(--text2); margin-bottom:8px}
.macro-dot{width:7px; height:7px; border-radius:50%}
.macro.gluc .macro-dot{background:var(--amber)}
.macro.prot .macro-dot{background:var(--green)}
.macro.lip  .macro-dot{background:var(--blue)}
.macro.fib  .macro-dot{background:var(--purple)}
.macro-v{font-family:'DM Sans', sans-serif; font-size:26px; font-weight:600; line-height:1}
.macro-v .unit{font-size:13px; font-weight:400; color:var(--text3); font-family:'DM Sans', sans-serif; margin-left:3px}
.macro-target{font-size:11px; color:var(--text3); margin-top:4px}
.macro-bar{height:2px; background:var(--border); border-radius:2px; margin-top:8px; overflow:hidden}
.macro-bar > div{height:100%; border-radius:2px; transition:width .5s ease}
.macro.gluc .macro-bar > div{background:var(--amber)}
.macro.prot .macro-bar > div{background:var(--green)}
.macro.lip  .macro-bar > div{background:var(--blue)}
.macro.fib  .macro-bar > div{background:var(--purple)}

/* ─── TABS ─── */
.tabs{display:flex; gap:24px; border-bottom:1px solid var(--border); margin-bottom:18px}
.tab-h{
  padding:0 0 10px; font-size:13px;
  color:var(--text3); cursor:pointer;
  position:relative; display:flex; align-items:center; gap:6px;
  background:transparent; border:none; font-family:inherit;
}
.tab-h:hover{color:var(--text2)}
.tab-h.active{color:var(--text)}
.tab-h.active::after{
  content:''; position:absolute;
  bottom:-1px; left:0; right:0;
  height:2px; background:var(--accent);
}
.tab-badge{font-size:11px; color:var(--text3)}

/* ─── REPAS ─── */
.meal{margin-bottom:16px}
.meal-head{display:flex; justify-content:space-between; align-items:flex-start; margin-bottom:5px; gap:12px}
.meal-title-row{display:flex; align-items:center; gap:8px; flex:1; min-width:0}
.meal-dot{width:6px; height:6px; border-radius:50%; flex-shrink:0}
.meal-dot-pdj{background:var(--amber)}
.meal-dot-dej{background:var(--green)}
.meal-dot-col{background:var(--purple)}
.meal-dot-din{background:var(--blue)}
.meal-title{font-size:14px; font-weight:500; color:var(--text)}
.meal-actions{display:flex; align-items:center; gap:6px; flex-shrink:0}
.meal-meta{font-size:12px; color:var(--text3); display:flex; gap:8px; align-items:center}
.meal-actions .btn{padding:5px 9px; font-size:12px}
.meal-items{font-size:13px; color:var(--text2); line-height:1.6; padding-left:14px}
.meal-divider{height:1px; background:var(--border); margin:16px 0}

/* ─── SPORT CARDS ─── */
.sport-card{
  border:1px solid var(--border); border-radius:var(--r);
  padding:16px 18px; margin-bottom:12px;
  border-left:3px solid var(--coral);
}
.sport-card-head{display:flex; justify-content:space-between; align-items:flex-start; gap:12px; margin-bottom:12px}
.sport-type-row{display:flex; align-items:center; gap:10px}
.sport-icon{
  width:32px; height:32px; border-radius:50%;
  background:var(--coral-bg); color:var(--coral);
  display:flex; align-items:center; justify-content:center;
  font-size:16px; flex-shrink:0;
}
.sport-type{font-size:14px; font-weight:500; color:var(--text)}
.sport-time{font-size:11px; color:var(--text3); margin-top:2px}
.sport-stats{display:flex; gap:18px; flex-wrap:wrap; padding-top:10px; border-top:1px solid var(--border)}
.sport-stat-v{font-family:'DM Sans', sans-serif; font-size:18px; font-weight:600; line-height:1; color:var(--text)}
.sport-stat-v .unit{font-size:11px; font-weight:400; color:var(--text3); font-family:'DM Sans', sans-serif; margin-left:2px}
.sport-stat-l{font-size:10px; color:var(--text3); margin-top:3px}
.sport-notes{font-size:12px; color:var(--text2);  margin-top:10px; padding-top:10px; border-top:1px solid var(--border)}

/* ─── EMPTY ─── */
.empty{text-align:center; padding:40px 20px; color:var(--text3)}
.empty-icon{font-size:32px; margin-bottom:10px; opacity:.5}
.empty h3{
  font-family:'DM Sans', sans-serif; 
  font-size:16px; font-weight:600; color:var(--text2); margin-bottom:6px;
}
.empty p{font-size:12px; color:var(--text3)}

/* ─── FORMS ─── */
input, textarea, select{
  background:var(--bg2); border:1px solid var(--border2);
  border-radius:var(--rs); padding:10px 12px;
  color:var(--text); font-family:inherit;
  font-size:13px; width:100%;
}
input:focus, textarea:focus, select:focus{outline:none; border-color:var(--accent)}
input[type="date"], input[type="time"], input[type="number"]{width:auto}

/* ─── VUES ─── */
.view{display:none}
.view.active{display:block}

.page-header{margin-bottom:24px}
.page-title{
  font-family:'DM Sans', sans-serif; 
  font-size:24px; font-weight:600; color:var(--text);
  letter-spacing:-.5px; margin-bottom:4px;
}
.page-subtitle{font-size:13px; color:var(--text3)}

/* ─── SCORE ─── */
.score-badge{
  width:38px; height:38px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-family:'DM Sans', sans-serif; font-size:16px; font-weight:700;
  color:var(--bg2); flex-shrink:0;
}
.score-A{background:#9bc77a}
.score-B{background:#b8d68f}
.score-C{background:#d4a34a}
.score-D{background:#d4715a}
.score-E{background:#a83838}
.score-bar{height:3px; background:var(--border); border-radius:2px; overflow:hidden; margin-top:6px}
.score-bar-fill{height:100%; background:var(--accent); border-radius:2px; transition:width .5s ease}

/* ─── BILAN HYBRIDE ─── */

/* Sélecteur de période */
.bilan-period-tabs{
  display:flex; gap:6px;
  margin-bottom:20px;
  flex-wrap:wrap;
}
.bilan-period-tab{
  background:transparent;
  border:1px solid var(--border2);
  color:var(--text2);
  padding:7px 14px;
  border-radius:var(--rs);
  font-size:13px;
  cursor:pointer;
  font-family:inherit;
  transition:all .15s;
}
.bilan-period-tab:hover{ border-color:var(--text3); color:var(--text); }
.bilan-period-tab.active{
  background:var(--bg3);
  color:var(--accent);
  border-color:var(--accent);
}

/* Score card */
.bilan-score-card{
  border:1px solid var(--border);
  border-radius:var(--rl);
  padding:24px 26px;
  margin-bottom:20px;
  display:grid;
  grid-template-columns:auto 1fr;
  gap:24px;
  align-items:center;
}
.bilan-score-badge{
  width:80px; height:80px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-family:'DM Sans', sans-serif;
  font-size:38px; font-weight:600;
  color:var(--bg2);
  flex-shrink:0;
}
.bilan-score-badge.score-A{background:#9bc77a}
.bilan-score-badge.score-B{background:#b8d68f}
.bilan-score-badge.score-C{background:#d4a34a}
.bilan-score-badge.score-D{background:#d4715a}
.bilan-score-badge.score-E{background:#a83838}
.bilan-score-info{flex:1; min-width:0}
.bilan-score-label{
  font-size:11px; color:var(--text3);
  letter-spacing:.5px; text-transform:uppercase;
  margin-bottom:6px;
}
.bilan-score-value{
  font-family:'DM Sans', sans-serif;
  font-size:32px; font-weight:600; line-height:1;
  color:var(--text);
  margin-bottom:6px;
}
.bilan-score-value .unit{
  font-size:16px; color:var(--text3);
  font-family:'DM Sans', sans-serif;
  margin-left:4px;
}
.bilan-score-sub{font-size:13px; color:var(--text2)}

/* KPI grid */
.bilan-kpi-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(200px, 1fr));
  gap:12px;
  margin-bottom:24px;
}
.bilan-kpi{
  border:1px solid var(--border);
  border-radius:var(--r);
  padding:16px 18px;
}
.bilan-kpi-h{
  display:flex; align-items:center; gap:8px;
  font-size:11px; color:var(--text2);
  letter-spacing:.3px;
  margin-bottom:10px;
}
.bilan-kpi-icon{
  width:22px; height:22px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  flex-shrink:0;
}
.bilan-kpi-icon svg{ width:11px; height:11px; }
.bilan-kpi.cal .bilan-kpi-icon{ background:var(--amber-bg); color:var(--amber); }
.bilan-kpi.prot .bilan-kpi-icon{ background:var(--green-bg); color:var(--green); }
.bilan-kpi.gluc .bilan-kpi-icon{ background:var(--blue-bg); color:var(--blue); }
.bilan-kpi.lip .bilan-kpi-icon{ background:var(--coral-bg); color:var(--coral); }
.bilan-kpi.fib .bilan-kpi-icon{ background:var(--purple-bg); color:var(--purple); }
.bilan-kpi.sport .bilan-kpi-icon{ background:var(--coral-bg); color:var(--coral); }
.bilan-kpi.meals .bilan-kpi-icon{ background:var(--green-bg); color:var(--green); }
.bilan-kpi-v{
  font-family:'DM Sans', sans-serif;
  font-size:24px; font-weight:600; line-height:1;
  color:var(--text);
}
.bilan-kpi-v .unit{
  font-size:12px; color:var(--text3);
  font-family:'DM Sans', sans-serif;
  margin-left:3px;
}
.bilan-kpi-meta{
  font-size:11px; color:var(--text3);
  margin-top:6px;
}

/* Chart card */
.bilan-chart-card{
  border:1px solid var(--border);
  border-radius:var(--r);
  padding:18px 22px;
  margin-bottom:14px;
}
.bilan-chart-h{
  display:flex; justify-content:space-between; align-items:baseline;
  margin-bottom:16px;
  flex-wrap:wrap;
  gap:8px;
}
.bilan-chart-title{
  font-family:'DM Sans', sans-serif;
  font-size:15px; font-weight:600;
  color:var(--text);
}
.bilan-chart-meta{font-size:11px; color:var(--text3)}
.bilan-chart-wrap{
  position:relative;
  height:200px;
}

/* Top food rows (sports pratiqués, top aliments) */
.bilan-top-row{
  display:flex; align-items:center; gap:12px;
  padding:10px 0;
  border-bottom:1px solid var(--border);
}
.bilan-top-row:last-child{ border-bottom:none; }
.bilan-top-row-icon{
  width:32px; height:32px; border-radius:50%;
  background:var(--bg3); color:var(--text2);
  display:flex; align-items:center; justify-content:center;
  font-size:16px; flex-shrink:0;
}
.bilan-top-row-name{
  flex:1; font-size:13px; color:var(--text);
  font-weight:500;
}
.bilan-top-row-meta{
  font-size:11px; color:var(--text3);
  text-align:right;
}

/* Insights (patterns / analyse) */
.bilan-insights{
  display:flex; flex-direction:column; gap:8px;
  margin-bottom:14px;
}
.bilan-insights-h{
  font-size:11px; color:var(--text3);
  letter-spacing:.5px; text-transform:uppercase;
  margin-bottom:8px;
}
.bilan-insight{
  border:1px solid var(--border);
  border-radius:var(--r);
  padding:12px 14px;
  display:flex; gap:12px; align-items:flex-start;
}
.bilan-insight-icon{
  width:28px; height:28px; border-radius:8px;
  display:flex; align-items:center; justify-content:center;
  flex-shrink:0;
}
.bilan-insight-icon svg{ width:14px; height:14px; }
.bilan-insight.good .bilan-insight-icon{ background:var(--green-bg); color:var(--green); }
.bilan-insight.warn .bilan-insight-icon{ background:var(--amber-bg); color:var(--amber); }
.bilan-insight.bad  .bilan-insight-icon{ background:var(--coral-bg); color:var(--coral); }
.bilan-insight.info .bilan-insight-icon{ background:var(--blue-bg); color:var(--blue); }
.bilan-insight-content{ flex:1; min-width:0; }
.bilan-insight-title{
  font-size:13px; font-weight:500;
  color:var(--text);
  margin-bottom:3px;
}
.bilan-insight-desc{
  font-size:12px; color:var(--text2);
  line-height:1.5;
}

/* Custom dates wrap */
.bilan-custom-dates{
  display:flex; gap:8px; align-items:center;
  margin-bottom:20px;
  flex-wrap:wrap;
}
.bilan-custom-dates input[type="date"]{ width:150px; }
.bilan-custom-dates .sep-arrow{
  color:var(--text3);
  font-size:14px;
}

/* Mobile adjustments */
@media (max-width: 768px){
  .bilan-score-card{
    padding:18px 20px;
    grid-template-columns:auto 1fr;
    gap:16px;
  }
  .bilan-score-badge{
    width:60px; height:60px;
    font-size:30px;
  }
  .bilan-score-value{ font-size:28px; }
  .bilan-score-value .unit{ font-size:13px; }
  .bilan-score-sub{ font-size:11px; }
  .bilan-kpi-grid{
    grid-template-columns:repeat(2, 1fr);
    gap:8px;
  }
  .bilan-kpi{ padding:12px 14px; }
  .bilan-kpi-v{ font-size:22px; }
  .bilan-kpi-v .unit{ font-size:11px; }
  .bilan-kpi-meta{ font-size:10px; }
  .bilan-chart-card{ padding:14px 16px; }
  .bilan-chart-title{ font-size:15px; }
  .bilan-chart-wrap{ height:140px; }
  .bilan-insight{ padding:10px 12px; gap:10px; }
  .bilan-insight-icon{ width:26px; height:26px; }
  .bilan-insight-icon svg{ width:13px; height:13px; }
  .bilan-insight-title{ font-size:12px; }
  .bilan-insight-desc{ font-size:11px; }
}

/* ─── FAB MOBILE ─── */
.fab{
  display:none; position:fixed;
  /* Encastré à cheval sur la tab bar : centre du FAB au niveau du haut de la barre */
  bottom:calc(var(--tabbar-h) - 26px); right:50%;
  transform:translateX(50%);
  width:52px; height:52px; border-radius:50%;
  background:var(--accent); color:var(--bg2);
  border:3px solid var(--bg); /* Anneau qui détache le FAB du fond de la tab bar */
  align-items:center; justify-content:center;
  font-size:24px; cursor:pointer; z-index:30;
  box-shadow:0 4px 16px rgba(0,0,0,.4);
}
.fab:active{
  transform:translateX(50%) scale(0.94);
}

/* ─── TAB BAR ─── */
.tabbar{
  display:none; position:fixed;
  bottom:0; left:0; right:0;
  background:var(--bg2); border-top:1px solid var(--border);
  height:var(--tabbar-h); padding:0 16px 16px;
  z-index:20; justify-content:space-around; align-items:center;
}
.tabbar-btn{
  background:transparent; border:none;
  color:var(--text3); cursor:pointer;
  width:48px; height:44px;
  display:flex; align-items:center; justify-content:center;
  border-radius:var(--rs); transition:color .15s;
}
.tabbar-btn:hover{color:var(--text2)}
.tabbar-btn.active{color:var(--accent)}
.tabbar-btn svg{width:22px; height:22px}

/* ─── MOBILE ─── */
@media (max-width: 768px){
  .app{grid-template-columns:1fr}
  .sidebar{display:none}
  .main{padding:18px 18px calc(var(--tabbar-h) + 20px)}
  .topbar{margin-bottom:16px}
  .topbar-date{font-size:16px}
  .journal-score{ padding:3px 9px 3px 3px; }
  .journal-score-badge{ width:20px; height:20px; font-size:12px; }
  .journal-score-val{ font-size:11px; }

  /* Sur mobile dans le Journal : la date label est cliquable et le FAB sert d'ajout.
     On masque visuellement l'input date et le bouton "+ Ajouter" (mais ils restent
     dans le DOM pour ne rien casser fonctionnellement). */
  #view-journal .topbar-actions input[type="date"]{
    position:absolute;
    width:1px; height:1px;
    opacity:0;
    pointer-events:none;
  }
  #view-journal #journal-add-btn{
    display:none;
  }

  .hero-row{
    grid-template-columns:1fr auto;
    gap:14px; padding:18px 0; margin-bottom:18px;
  }
  .activity-card{
    grid-column:1 / -1;
    border-left:none;
    border-top:1px solid var(--border);
    padding-left:0; padding-top:14px; margin-top:4px;
  }
  .hero-num{font-size:48px; letter-spacing:-1.2px}
  .hero-target{font-size:12px}
  .hero-sub{font-size:11px}

  .macros{
    grid-template-columns:repeat(2, 1fr); gap:14px;
    padding:16px 0; margin-bottom:16px;
    border-top:1px solid var(--border);
    border-bottom:1px solid var(--border);
  }
  .macro-label{font-size:10px; gap:6px; margin-bottom:4px}
  .macro-dot{width:6px; height:6px}
  .macro-v{font-size:22px}
  .macro-v .unit{font-size:11px}
  .macro-target{font-size:10px; margin-top:3px}
  .macro-bar{margin-top:5px}

  .tabs{gap:20px; margin-bottom:14px}
  .tab-h{padding:0 0 9px; font-size:12px; gap:5px}
  .tab-badge{font-size:10px}

  .meal{margin-bottom:12px}
  .meal-title{font-size:13px}
  .meal-meta{font-size:11px}
  .meal-items{font-size:12px; line-height:1.5; padding-left:13px}
  .meal-divider{margin:12px 0}
  .meal-actions .btn{padding:4px 7px; font-size:11px}

  .tabbar{display:flex}
  .fab{display:flex}

  .sport-card{padding:14px}
  .sport-stats{gap:14px}
  .sport-stat-v{font-size:18px}
}

/* ─── LEGACY (à replacer en L2) ─── */
.legacy-weight-widget{display:none}

/* Cacher les éléments overlay legacy qui n'ont pas encore de styles propres
/* Cacher les éléments overlay legacy qui n'ont pas encore de styles propres
   (FAB radial seulement — le scanner caméra a ses propres styles ci-dessous) */
.fab-overlay,
.fab-actions,
.fab-action,
#fab-overlay,
#fab-actions{ display:none !important; }

/* ─── SCANNER CODE-BARRES ─── */
.scanner-overlay{
  display:none;
  position:fixed; inset:0;
  background:rgba(0,0,0,.92);
  z-index:200;
  flex-direction:column;
  align-items:center; justify-content:center;
  gap:14px;
  padding:24px;
  text-align:center;
}
.scanner-overlay.open{ display:flex; }

.scanner-viewport{
  position:relative;
  width:100%;
  max-width:520px;
  aspect-ratio:4/3;
  background:#000;
  border-radius:var(--r);
  overflow:hidden;
  box-shadow:0 8px 32px rgba(0,0,0,.5);
}
.scanner-viewport video{
  width:100%; height:100%;
  object-fit:cover;
}

/* Crosshair (cadre vert au centre) */
.scanner-crosshair{
  position:absolute;
  top:50%; left:50%;
  transform:translate(-50%, -50%);
  width:80%; height:35%;
  border:2px solid var(--accent);
  border-radius:8px;
  pointer-events:none;
  box-shadow:0 0 0 9999px rgba(0,0,0,.35);
}
.scanner-line{
  position:absolute;
  top:50%; left:0; right:0;
  height:2px;
  background:var(--accent);
  box-shadow:0 0 8px var(--accent);
  animation:scanline 1.8s ease-in-out infinite;
}
@keyframes scanline{
  0%, 100% { top:10%; opacity:.4; }
  50%      { top:90%; opacity:1; }
}

.scanner-hint{
  font-size:13px;
  color:var(--text2);
}

.scanner-manual-input{
  display:flex; gap:8px;
  width:100%;
  max-width:520px;
}
.scanner-manual-input input{
  flex:1;
  background:var(--bg2);
  border:1px solid var(--border2);
}

@media (max-width: 768px){
  .scanner-overlay{ padding:16px; gap:10px; }
  .scanner-viewport{
    max-width:100%;
    aspect-ratio:3/4;
  }
  .scanner-crosshair{
    width:85%; height:25%;
  }
}

/* ─── SCROLLBAR ─── */
::-webkit-scrollbar{width:8px; height:8px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--border2); border-radius:4px}
::-webkit-scrollbar-thumb:hover{background:var(--text3)}

/* ─── TOAST ─── */
.toast{
  position:fixed; bottom:24px; left:50%;
  transform:translateX(-50%) translateY(20px);
  background:var(--bg3); border:1px solid var(--border2);
  border-radius:var(--r); padding:12px 20px;
  font-size:13px; color:var(--text);
  z-index:1000;
  display:flex; align-items:center; gap:10px;
  box-shadow:0 8px 24px rgba(0,0,0,.4);
  opacity:0;
  pointer-events:none;
  transition:opacity .2s, transform .2s;
  max-width:90vw;
}
.toast.show{
  opacity:1;
  transform:translateX(-50%) translateY(0);
  pointer-events:auto;
}
.tdot{
  width:8px; height:8px; border-radius:50%;
  background:var(--accent);
  flex-shrink:0;
  animation:pulse 1.5s ease-in-out infinite;
}
.tdot.err{ background:var(--coral); }
.toast.error{border-color:var(--coral); color:var(--coral)}
@media (max-width: 768px){.toast{bottom:calc(var(--tabbar-h) + 16px); transform:translateX(-50%) translateY(20px)} .toast.show{transform:translateX(-50%) translateY(0)}}

/* ─── MODAL ─── */
.modal-overlay{
  display:none; position:fixed; inset:0;
  background:rgba(0,0,0,.6); backdrop-filter:blur(8px);
  z-index:100; align-items:center; justify-content:center;
  padding:20px;
}
.modal-overlay.open{display:flex}
.modal-content{
  background:var(--bg); border:1px solid var(--border2);
  border-radius:var(--rl); width:100%; max-width:560px; max-height:90vh;
  display:flex; flex-direction:column; overflow:hidden;
}
@media (max-width: 768px){
  .modal-overlay{padding:0; align-items:flex-end}
  .modal-content{max-width:none; max-height:92vh; border-radius:var(--rl) var(--rl) 0 0}
}
.modal-head{
  display:flex; justify-content:space-between; align-items:center;
  padding:16px 22px; border-bottom:1px solid var(--border);
}
.modal-title{font-family:'DM Sans', sans-serif; font-size:16px; font-weight:600; color:var(--text)}
.modal-body{padding:18px 22px; overflow-y:auto; flex:1}
.modal-foot{
  padding:14px 22px; border-top:1px solid var(--border); background:var(--bg2);
  display:flex; justify-content:space-between; align-items:center; gap:10px;
}

/* ─── HELPERS ─── */
.hidden{display:none !important}
.flex{display:flex}
.flex-col{display:flex; flex-direction:column}
.gap-8{gap:8px}
.gap-12{gap:12px}
.mt-12{margin-top:12px}
.mt-16{margin-top:16px}
.mt-24{margin-top:24px}

/* ─── MODAL DE CHOIX (ajout repas/sport/poids) ─── */
.choice-grid{
  display:flex; flex-direction:column;
  gap:10px;
}
.choice-card{
  display:flex; align-items:center; gap:14px;
  width:100%;
  background:var(--bg2);
  border:1px solid var(--border);
  border-radius:var(--r);
  padding:14px 16px;
  cursor:pointer;
  font-family:inherit;
  color:var(--text);
  text-align:left;
  transition:all .15s;
}
.choice-card:hover{
  border-color:var(--text3);
  background:var(--bg3);
}
.choice-card:active{
  transform:scale(0.98);
}
.choice-icon{
  width:42px; height:42px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  flex-shrink:0;
}
.choice-icon svg{ width:20px; height:20px; }
.choice-meal .choice-icon{ background:var(--amber-bg); color:var(--amber); }
.choice-sport .choice-icon{ background:var(--coral-bg); color:var(--coral); }
.choice-weight .choice-icon{ background:var(--blue-bg); color:var(--blue); }
.choice-content{
  flex:1; min-width:0;
}
.choice-title{
  font-size:14px; font-weight:600;
  color:var(--text);
  margin-bottom:2px;
}
.choice-desc{
  font-size:12px;
  color:var(--text3);
}
.choice-arrow{
  color:var(--text3);
  flex-shrink:0;
}

/* ══════════════════════════════════════════════════════
   COMPATIBILITÉ LEGACY (modals + écrans non refondus en L1)
   À nettoyer au fil des Livraisons 2 et 3
   ══════════════════════════════════════════════════════ */

/* ── Modals overlay (classe .ov) ── */
.ov{
  display:none;
  position:fixed; inset:0;
  background:rgba(0,0,0,.6);
  backdrop-filter:blur(8px);
  z-index:100;
  align-items:center; justify-content:center;
  padding:20px;
}
.ov.open{ display:flex; }
.ov > .modal{
  background:var(--bg);
  border:1px solid var(--border2);
  border-radius:var(--rl);
  width:100%; max-width:560px; max-height:90vh;
  display:flex; flex-direction:column;
  overflow:hidden;
}
.ov > .modal.wide{ max-width:760px; }
@media (max-width: 768px){
  .ov{ padding:0; align-items:flex-end; }
  .ov > .modal{
    max-width:none; max-height:92vh;
    border-radius:var(--rl) var(--rl) 0 0;
  }
}

/* Header de modal */
.mhdr{
  display:flex; justify-content:space-between; align-items:center;
  padding:16px 22px;
  border-bottom:1px solid var(--border);
}
.mtit{
  font-family:'DM Sans', sans-serif;
  font-size:16px; font-weight:600;
  color:var(--text);
}
.mclose{
  width:30px; height:30px;
  border-radius:50%;
  background:var(--bg3); color:var(--text2);
  border:none; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  font-size:14px;
}
.mclose:hover{ background:var(--border2); color:var(--text); }

/* Corps de modal */
.mbody{
  padding:18px 22px;
  overflow-y:auto;
  flex:1;
}

/* Footer de modal */
.mfooter{
  padding:14px 22px;
  border-top:1px solid var(--border);
  background:var(--bg2);
  display:flex; justify-content:space-between; align-items:center;
  gap:10px; flex-wrap:wrap;
}

/* Form groups */
.fg{ margin-bottom:14px; }
.fg label{
  display:block;
  font-size:11px;
  color:var(--text3);
  letter-spacing:.3px;
  text-transform:uppercase;
  margin-bottom:6px;
}

/* Chips (type de repas, sport, etc.) */
.chips{
  display:flex; gap:6px; flex-wrap:wrap;
  margin-bottom:14px;
}
.chip{
  padding:7px 14px;
  border-radius:20px;
  border:1px solid var(--border2);
  background:transparent;
  color:var(--text2);
  font-size:12px;
  cursor:pointer; font-family:inherit;
  display:inline-flex; align-items:center; gap:6px;
  transition:all .15s;
}
.chip:hover{ border-color:var(--text3); color:var(--text); }
.chip.selected, .chip.active{
  border-color:var(--accent);
  background:var(--accent-bg);
  color:var(--text);
}

/* Boutons legacy (btn-p, btn-s, btn-e, btn-d, btn-g) */
.btn-p{
  background:var(--accent);
  border-color:var(--accent);
  color:var(--bg2);
  font-weight:500;
}
.btn-p:hover{ background:var(--accent2); border-color:var(--accent2); color:var(--bg2); }
.btn-s{
  background:transparent; border:1px solid var(--border2);
  color:var(--text2);
}
.btn-s:hover{ border-color:var(--text3); color:var(--text); }
.btn-e{
  background:transparent; border:1px solid var(--border2);
  color:var(--text2);
  padding:5px 10px; font-size:12px;
}
.btn-e:hover{ border-color:var(--text3); color:var(--text); }
.btn-d{
  background:transparent; border:1px solid transparent;
  color:var(--coral);
  padding:5px 10px; font-size:12px;
}
.btn-d:hover{ background:var(--coral-bg); }
.btn-g{
  background:transparent; border:1px solid transparent;
  color:var(--text3); padding:5px 10px;
}
.btn-g:hover{ background:var(--bg3); color:var(--text); }

/* Page headers (legacy .ph .pt .ps) */
.ph{
  display:flex; justify-content:space-between; align-items:flex-end;
  margin-bottom:20px;
  gap:14px;
  flex-wrap:wrap;
}
.pt{
  font-family:'DM Sans', sans-serif;
  
  font-size:24px; font-weight:600;
  color:var(--text);
  letter-spacing:-.5px;
  margin:0;
}
.ps{
  font-size:13px; color:var(--text3);
  margin-top:4px;
}

/* Sub items & food rows (cards alimentaires legacy) */
.fi{
  display:grid;
  grid-template-columns:1fr auto auto;
  gap:12px;
  padding:10px 14px;
  border-bottom:1px solid var(--border);
  align-items:center;
}
.fi:last-child{ border-bottom:none; }
.fn{ font-size:13px; color:var(--text); font-weight:500; }
.fb{ font-size:11px; color:var(--text3); }
.fq{ font-size:12px; color:var(--text3); }
.fmac{ display:flex; gap:6px; flex-wrap:wrap; }

/* Macro pills */
.mp{
  padding:2px 7px;
  border-radius:4px;
  font-size:11px;
  font-weight:500;
  background:var(--bg3);
  color:var(--text2);
}
.mp.mc{ background:var(--amber-bg); color:var(--amber); }
.mp.mp2{ background:var(--green-bg); color:var(--green); }
.mp.mg{ background:var(--blue-bg); color:var(--blue); }
.mp.ml{ background:var(--coral-bg); color:var(--coral); }

/* Résultats de recherche OFF */
.sl{
  padding:12px 14px;
  text-align:center;
  color:var(--text3);
  font-size:12px;
}
.se{
  padding:14px 16px;
  text-align:center;
  color:var(--text3);
  font-size:12px;
  
}
.sri{
  padding:10px 14px;
  cursor:pointer;
  border-bottom:1px solid var(--border);
  transition:background .15s;
}
.sri:hover{ background:var(--bg3); }
.sri.selected{
  background:var(--accent-bg);
  border-left:3px solid var(--accent);
  padding-left:11px;
}
.srin{
  font-size:13px; font-weight:500;
  color:var(--text);
  margin-bottom:2px;
}
.srib{
  font-size:11px; color:var(--text3);
  margin-bottom:4px;
}
.srim{
  display:flex; gap:6px; flex-wrap:wrap;
}

/* Anciennes classes empty (legacy ei) */
.ei{
  font-size:32px;
  margin-bottom:10px;
  opacity:.5;
}

/* Tabs aliments / plats (lib) */
.lib-tabs{
  display:flex; gap:6px;
  margin-bottom:16px;
}
.lib-tab{
  background:transparent;
  border:1px solid var(--border2);
  color:var(--text2);
  padding:7px 14px;
  border-radius:var(--rs);
  font-size:13px;
  cursor:pointer;
  font-family:inherit;
}
.lib-tab.active{
  background:var(--bg3);
  color:var(--text);
  border-color:var(--text3);
}

/* Source tabs dans le modal repas */
.source-tabs{
  display:flex; gap:4px;
  background:var(--bg3);
  border-radius:10px;
  padding:4px;
  margin-bottom:14px;
}
.source-tab{
  flex:1;
  padding:9px;
  border-radius:7px;
  background:transparent;
  color:var(--text2);
  border:none;
  font-size:12px;
  font-family:inherit;
  cursor:pointer;
  display:flex; align-items:center; justify-content:center; gap:6px;
}
.source-tab.active{
  background:var(--bg);
  color:var(--text);
}

/* Food preview dans modal */
.food-preview{
  background:var(--bg2);
  border:1px solid var(--border);
  border-radius:var(--rs);
  padding:12px 14px;
  margin-bottom:14px;
  display:none;
}
.food-preview.visible{ display:block; }
.food-preview-name{
  font-size:13px; font-weight:500;
  color:var(--text);
  margin-bottom:8px;
}
.food-preview-macros{
  display:flex; gap:6px; flex-wrap:wrap;
  margin-bottom:8px;
}
.food-preview-grams{
  display:flex; gap:10px; align-items:center;
}
.food-preview-grams input{ width:80px; }
.food-preview-total{
  margin-left:auto;
  font-family:'DM Sans', sans-serif;
  font-size:16px;
  color:var(--text);
}

/* Added wrap (aliments du repas en cours) */
.added-wrap{
  margin-top:14px;
  padding-top:14px;
  border-top:1px solid var(--border);
}
.added-wrap > h4{
  font-family:'DM Sans', sans-serif;
   font-weight:400;
  font-size:14px;
  color:var(--text2);
  margin-bottom:10px;
}

/* Smiley row (notation) */
.smiley-row{
  display:flex; gap:4px;
}
.smiley-btn{
  background:transparent;
  border:none;
  font-size:18px;
  padding:4px 6px;
  cursor:pointer;
  opacity:.4;
  transition:opacity .15s;
}
.smiley-btn:hover{ opacity:.7; }
.smiley-btn.active{ opacity:1; }

/* Search results conteneur */
.search-results{
  background:var(--bg2);
  border:1px solid var(--border);
  border-radius:var(--rs);
  max-height:200px;
  overflow-y:auto;
  margin-bottom:14px;
  display:none;
}
.search-results.open{ display:block; }

/* Dish badge */
.dish-badge{
  display:inline-block;
  background:var(--accent-bg);
  color:var(--accent);
  padding:2px 7px;
  border-radius:4px;
  font-size:10px;
  font-weight:500;
}

/* mcard / mgrid (cartes utilisateur, planificateur, etc.) */
.mcard{
  background:var(--bg2);
  border:1px solid var(--border);
  border-radius:var(--r);
  padding:14px 16px;
  margin-bottom:10px;
}
.mgrid{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(220px, 1fr));
  gap:12px;
}

/* field-hint (aide sous les inputs) */
.field-hint{
  font-size:11px;
  color:var(--text3);
  margin-top:4px;
}

/* Tabs stats period (legacy stats-period-tabs) */
.stats-period-tabs{
  display:flex; gap:6px;
  margin-bottom:16px;
  flex-wrap:wrap;
}
.stats-period-tab{
  background:transparent;
  border:1px solid var(--border2);
  color:var(--text2);
  padding:7px 14px;
  border-radius:var(--rs);
  font-size:13px;
  cursor:pointer;
  font-family:inherit;
}
.stats-period-tab.active{
  background:var(--accent-bg);
  color:var(--accent);
  border-color:var(--accent);
}

/* Theme selector panels (legacy) */
.theme-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(200px, 1fr));
  gap:12px;
  margin-top:14px;
}
.theme-option{
  background:var(--bg2);
  border:1px solid var(--border);
  border-radius:var(--r);
  padding:14px;
  cursor:pointer;
  text-align:left;
  display:flex; gap:12px; align-items:center;
  font-family:inherit;
  color:var(--text);
}
.theme-option:hover{ border-color:var(--text3); }
.theme-option.active-theme{ border-color:var(--accent); background:var(--accent-bg); }
.theme-preview{
  flex-shrink:0;
  width:60px; height:40px;
  border-radius:6px;
  overflow:hidden;
  border:1px solid var(--border2);
}
.tp-bg{ position:relative; width:100%; height:100%; display:flex; }
.tp-sidebar{ width:35%; }
.tp-content{ flex:1; padding:6px; display:flex; flex-direction:column; gap:3px; }
.tp-bar{ height:3px; border-radius:1px; }
.tp-dot{ width:8px; height:8px; border-radius:50%; margin:8px; }
.theme-info{ flex:1; min-width:0; }
.theme-name{
  font-size:13px; font-weight:500;
  color:var(--text);
  margin-bottom:3px;
  display:flex; align-items:center; gap:8px;
}
.theme-desc{
  font-size:11px; color:var(--text3);
  line-height:1.4;
}
.theme-badge{
  font-size:10px; font-weight:500;
  padding:2px 7px; border-radius:20px;
  background:var(--accent-bg); color:var(--accent);
}

/* Cookie banner */
.cookie-banner{
  display:none;
  position:fixed;
  bottom:24px; left:24px; right:24px;
  max-width:600px;
  margin:0 auto;
  background:var(--bg2);
  border:1px solid var(--border2);
  border-radius:var(--r);
  padding:16px 20px;
  z-index:200;
  box-shadow:0 8px 24px rgba(0,0,0,.4);
}
.cookie-banner.show{ display:block; }
.cookie-banner-text{
  font-size:13px; color:var(--text2);
  line-height:1.5;
  margin-bottom:12px;
}
.cookie-banner-actions{
  display:flex; gap:8px;
}
@media (max-width: 768px){
  .cookie-banner{
    bottom:calc(var(--tabbar-h) + 12px);
    left:12px; right:12px;
  }
}

/* Forms inline buttons (admin, settings) */
.form-row{
  display:flex; gap:10px; align-items:flex-end;
  flex-wrap:wrap;
}
.form-row > *{ min-width:0; }

/* User card (settings, admin) */
.user-list-item{
  display:flex; justify-content:space-between; align-items:center;
  padding:12px 14px;
  border:1px solid var(--border);
  border-radius:var(--rs);
  margin-bottom:8px;
  background:var(--bg2);
}
.user-list-item-info{ flex:1; min-width:0; }
.user-list-item-name{
  font-size:13px; font-weight:500;
  color:var(--text);
}
.user-list-item-meta{
  font-size:11px; color:var(--text3);
}
.user-list-item-actions{
  display:flex; gap:6px;
}

/* ── Modal repas : classes spécifiques ── */
.frow{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
  margin-bottom:14px;
}
.sep{
  border:none;
  border-top:1px solid var(--border);
  margin:14px 0;
}
.tab-bar{
  display:flex; gap:4px;
  background:var(--bg3);
  border-radius:10px;
  padding:4px;
  margin-bottom:14px;
}
.tab-bar .tab{
  flex:1;
  padding:9px 12px;
  border-radius:7px;
  background:transparent;
  color:var(--text2);
  border:none;
  font-size:12px;
  font-family:inherit;
  cursor:pointer;
  display:flex; align-items:center; justify-content:center; gap:6px;
  transition:all .15s;
}
.tab-bar .tab:hover{ color:var(--text); }
.tab-bar .tab.active{
  background:var(--bg);
  color:var(--text);
  font-weight:500;
}

/* Chips colorés du modal repas (avec dots) */
.chip .chip-dot{
  width:7px; height:7px; border-radius:50%;
  display:inline-block;
}
.chip.chip-pdj .chip-dot{ background:var(--amber); }
.chip.chip-dej .chip-dot{ background:var(--green); }
.chip.chip-din .chip-dot{ background:var(--blue); }
.chip.chip-col .chip-dot{ background:var(--purple); }

/* Search wrap (champ recherche + résultats inline) */
.sw{
  position:relative;
}
.sr{
  display:none;
  margin-top:6px;
  background:var(--bg2);
  border:1px solid var(--border);
  border-radius:var(--rs);
  max-height:240px;
  overflow-y:auto;
}
.sr.open{ display:block; }

/* Food preview (carte d'aperçu après sélection OFF) */
.fp{
  display:none;
  background:var(--bg2);
  border:1px solid var(--border);
  border-radius:var(--r);
  padding:12px 14px;
  margin-top:10px;
}
.fp.visible{ display:block; }
.fpn{
  font-size:14px; font-weight:500;
  color:var(--text);
  margin-bottom:10px;
}

/* Mini cards macros dans le preview */
.mcard{
  background:var(--bg3);
  border:1px solid var(--border);
  border-radius:var(--rs);
  padding:8px 10px;
  text-align:center;
}
.mcard .val{
  font-family:'DM Sans', sans-serif;
  font-size:15px; font-weight:600;
  line-height:1.2;
}
.mcard .lbl{
  font-size:9px;
  color:var(--text3);
  letter-spacing:.3px;
  text-transform:uppercase;
  margin-top:2px;
}

/* Bouton scanner code-barre */
.barcode-btn{
  background:transparent;
  border:1px solid var(--border2);
  color:var(--text2);
  padding:8px 12px;
  border-radius:var(--rs);
  font-size:12px;
  cursor:pointer;
  font-family:inherit;
  white-space:nowrap;
  transition:all .15s;
}
.barcode-btn:hover{
  border-color:var(--text3); color:var(--text);
}

/* Label dans .fg avec style inline (pour quand <label> est dans un grid) */
.fg label{
  text-transform:none;
  letter-spacing:0;
  color:var(--text2);
  font-size:12px;
  font-weight:500;
  margin-bottom:6px;
}

/* Inputs dans le modal : reset texte taille */
.modal input[type="text"],
.modal input[type="number"],
.modal input[type="date"],
.modal input[type="time"],
.modal input[type="password"],
.modal textarea,
.modal select{
  width:100%;
  font-size:13px;
}

/* Sport modal : grid sport ratings */
.sport-rating-chips{
  display:flex; flex-wrap:wrap; gap:6px;
}
.sport-rating-chip{
  padding:6px 12px;
  border-radius:18px;
  border:1px solid var(--border2);
  background:transparent;
  color:var(--text2);
  font-size:12px;
  cursor:pointer; font-family:inherit;
}
.sport-rating-chip.selected{
  border-color:var(--accent);
  background:var(--accent-bg);
  color:var(--accent);
}

/* ══════════════════════════════════════════════════════
   ÉCRANS SECONDAIRES (Settings, Foods, Planner, Admin)
   Polish Hybride pour les vues moins centrales
   ══════════════════════════════════════════════════════ */

/* ─── SETTINGS ─── */
.settings-card{
  background:transparent;
  border:1px solid var(--border);
  border-radius:var(--r);
  padding:18px 22px;
  margin-bottom:14px;
}
.settings-card > .fg:last-child{ margin-bottom:0; }
.settings-section{
  font-size:11px; font-weight:500;
  color:var(--text2);
  margin-bottom:14px;
  text-transform:uppercase;
  letter-spacing:.8px;
}
.settings-hint{
  font-size:11px; color:var(--text3);
  margin-top:5px;
  line-height:1.5;
}

/* Preview bar (répartition calorique dans Paramètres) */
.preview-bar{
  display:flex;
  height:10px;
  border-radius:5px;
  overflow:hidden;
  margin-bottom:12px;
  background:var(--bg3);
}
.preview-bar > div{ height:100%; }
.preview-legend{
  display:flex; gap:18px;
  font-size:12px; color:var(--text2);
  flex-wrap:wrap;
}
.preview-legend strong{
  font-weight:600;
  color:var(--text);
  margin-left:3px;
}

/* ─── ADMIN — USERS ─── */
.user-row{
  display:flex; align-items:center; gap:12px;
  padding:12px 14px;
  border:1px solid var(--border);
  border-radius:var(--rs);
  margin-bottom:8px;
  background:var(--bg2);
}
.user-row:hover{ border-color:var(--border2); }
.user-row-admin{
  border-left:3px solid var(--accent);
}
.user-avatar{
  width:36px; height:36px; border-radius:50%;
  background:var(--bg3);
  color:var(--text2);
  display:flex; align-items:center; justify-content:center;
  font-size:14px; font-weight:600;
  flex-shrink:0;
}
.user-row-name{
  flex:1; min-width:0;
  font-size:13px; font-weight:500;
  color:var(--text);
}
.user-row-role{
  font-size:10px;
  padding:2px 8px;
  border-radius:10px;
  font-weight:500;
}
.role-admin{
  background:var(--accent-bg);
  color:var(--accent);
}
.role-user{
  background:var(--bg3);
  color:var(--text3);
}

/* ─── PLANNER (vue hebdo) ─── */
.planner-grid{
  display:grid;
  grid-template-columns:120px repeat(7, 1fr);
  gap:1px;
  background:var(--border);
  border:1px solid var(--border);
  border-radius:var(--rs);
  overflow:hidden;
}
.planner-day-header{
  background:var(--bg2);
  padding:10px 8px;
  text-align:center;
  font-size:12px; font-weight:500;
  color:var(--text2);
  text-transform:uppercase;
  letter-spacing:.4px;
}
.planner-day-header.today{
  background:var(--accent-bg);
  color:var(--accent);
}
.planner-row-label{
  background:var(--bg2);
  padding:14px 12px;
  font-size:12px;
  color:var(--text2);
  display:flex; align-items:center;
}
.planner-cell{
  background:var(--bg);
  padding:8px;
  min-height:70px;
  display:flex; flex-direction:column;
  gap:4px;
  position:relative;
}
.planner-cell.has-items{
  background:var(--bg2);
}
.planner-cell-add{
  font-size:10px;
  color:var(--text3);
  cursor:pointer;
  text-align:center;
  padding:4px;
  border:1px dashed transparent;
  border-radius:4px;
  transition:all .15s;
  margin-top:auto;
}
.planner-cell:hover .planner-cell-add{
  color:var(--text2);
  border-color:var(--border2);
}
.planner-item{
  background:var(--bg3);
  border-radius:4px;
  padding:5px 6px;
  font-size:11px;
  color:var(--text);
  display:flex; align-items:center; justify-content:space-between;
  gap:4px;
  line-height:1.3;
}
.planner-item-del{
  background:transparent;
  border:none;
  color:var(--text3);
  cursor:pointer;
  padding:0 2px;
  font-size:11px;
  opacity:0;
  transition:opacity .15s;
}
.planner-item:hover .planner-item-del{
  opacity:1;
  color:var(--coral);
}

@media (max-width: 768px){
  .planner-grid{
    grid-template-columns:80px repeat(7, minmax(90px, 1fr));
    overflow-x:auto;
    display:block;
  }
  .planner-row-label{ padding:10px 8px; font-size:11px; }
  .planner-cell{ padding:5px; min-height:60px; }
}

/* ─── FOODS — Dish cards ─── */
.dish-card{
  border:1px solid var(--border);
  border-radius:var(--r);
  padding:14px 16px;
  margin-bottom:10px;
  background:transparent;
}
.dish-card:hover{ border-color:var(--border2); }
.dish-ingredients{
  font-size:11px;
  color:var(--text3);
  margin-top:6px;
  line-height:1.5;
}

/* ─── OPTIONS DU SCORE NUTRITIONNEL ─── */
.score-options-list{
  display:flex; flex-direction:column;
  gap:8px;
}
.score-option{
  display:flex; align-items:flex-start; gap:12px;
  padding:12px 14px;
  border:1px solid var(--border);
  border-radius:var(--rs);
  background:var(--bg);
  cursor:pointer;
  transition:all .15s;
}
.score-option:hover{
  border-color:var(--border2);
  background:var(--bg2);
}
.score-option input[type="checkbox"]{
  margin:0;
  margin-top:2px;
  width:16px; height:16px;
  flex-shrink:0;
  accent-color:var(--accent);
  cursor:pointer;
}
.score-option-content{
  display:flex; flex-direction:column;
  gap:2px;
  flex:1; min-width:0;
}
.score-option-title{
  font-size:13px;
  color:var(--text);
  font-weight:500;
  line-height:1.3;
}
.score-option-desc{
  font-size:11px;
  color:var(--text3);
  line-height:1.4;
}
/* État coché : léger highlight */
.score-option:has(input:checked){
  border-color:var(--accent-bg);
  background:var(--accent-bg);
}
.score-option:has(input:checked) .score-option-title{
  color:var(--text);
}

/* ─── OBJECTIFS UTILISATEUR ─── */
.goal-card{
  background:var(--bg);
  border:1px solid var(--border);
  border-radius:var(--rs);
  padding:14px 16px;
  margin-bottom:10px;
  transition:border-color .15s;
}
.goal-card:hover{
  border-color:var(--border2);
}
.goal-card-archived{
  background:transparent;
  padding:10px 14px;
  opacity:.75;
}
.goal-card-archived:hover{
  opacity:1;
}

/* Barre de progression d'un objectif */
.goal-progress-bar{
  height:8px;
  background:var(--bg3);
  border-radius:4px;
  overflow:hidden;
  margin-top:4px;
}
.goal-progress-fill{
  height:100%;
  background:linear-gradient(90deg, var(--green), var(--accent));
  border-radius:4px;
  transition:width .3s ease;
}

/* Chips spécifiques au type d'objectif */
.goal-type-chip{
  flex:1;
  min-width:0;
}

/* Bouton suggestion d'alternative dans le modal */
.goal-suggestion-btn{
  display:flex; align-items:center; gap:12px;
  width:100%;
  background:var(--bg2);
  border:1px solid var(--border);
  border-radius:var(--rs);
  padding:10px 12px;
  cursor:pointer;
  font-family:inherit;
  color:var(--text);
  text-align:left;
  transition:all .15s;
  margin-bottom:6px;
}
.goal-suggestion-btn:hover{
  border-color:var(--accent);
  background:var(--accent-bg);
}
.goal-suggestion-btn:last-child{
  margin-bottom:0;
}

/* ─── BADGE OBJECTIF (topbar) ─── */
.goal-badge{
  display:none;
  align-items:center; gap:6px;
  padding:4px 10px 4px 8px;
  background:var(--accent-bg);
  border:1px solid var(--accent);
  border-radius:14px;
  font-family:inherit;
  font-size:12px;
  font-weight:500;
  color:var(--accent);
  cursor:pointer;
  transition:background .15s, transform .1s;
}
.goal-badge:hover{
  background:var(--accent);
  color:var(--bg);
}
.goal-badge:active{
  transform:scale(0.96);
}
.goal-badge #goal-badge-icon{
  font-size:13px;
  line-height:1;
}
.goal-badge #goal-badge-text{
  white-space:nowrap;
}

@media (max-width: 768px){
  .goal-badge{
    padding:3px 8px 3px 6px;
    font-size:11px;
    border-radius:12px;
  }
}

/* ─── BLOC OBJECTIF DANS LE BILAN ─── */
.goal-progress-card{
  background:var(--bg2);
  border:1px solid var(--accent);
  border-left:4px solid var(--accent);
  border-radius:var(--r);
  padding:18px 22px;
  margin-bottom:16px;
}
@media (max-width: 768px){
  .goal-progress-card{
    padding:14px 16px;
    margin-bottom:14px;
  }
}