/* Composants réutilisables (Tailwind fournit les utilitaires) */
.card { background:#fff; border:1px solid #DCE8DC; border-radius:1.25rem; box-shadow:0 2px 12px -4px rgba(31,58,42,.12); }
.btn-primary { display:inline-flex; align-items:center; justify-content:center; gap:.5rem; background:#4F7A5A; color:#fff; font-weight:700; padding:.8rem 1.4rem; border-radius:999px; transition:background .15s, transform .15s; box-shadow:0 8px 20px -10px rgba(79,122,90,.6); }
.btn-primary:hover { background:#3F6449; transform:translateY(-1px); }
.btn-secondary { display:inline-flex; align-items:center; gap:.5rem; background:#fff; color:#31503A; border:1.5px solid #B9D1BB; font-weight:700; padding:.75rem 1.3rem; border-radius:999px; transition:background .15s; }
.btn-secondary:hover { background:#F0F5F0; }
.btn-ghost { display:inline-flex; align-items:center; gap:.4rem; color:#31503A; border:1.5px solid transparent; font-weight:700; padding:.55rem 1rem; border-radius:999px; transition:background .15s, border-color .15s; font-size:.875rem; }
.btn-ghost:hover { background:#F0F5F0; border-color:#DCE8DC; }
.nav-link { padding:.5rem .8rem; border-radius:999px; color:#31503A; }
.nav-link:hover, .nav-link.active { background:#DCE8DC; color:#1F3A2A; }
.pill { display:inline-flex; align-items:center; gap:.3rem; padding:.3rem .7rem; border-radius:999px; font-size:.75rem; font-weight:700; }
.pill-xs { display:inline-flex; padding:.1rem .5rem; border-radius:999px; font-size:.68rem; font-weight:800; text-transform:uppercase; letter-spacing:.04em; }
.role-glucides { background:#FCF1D6; color:#8a5a00; }
.role-proteines { background:#FBE7DD; color:#C05E3B; }
.role-legumes { background:#DCE8DC; color:#31503A; }
.role-matiere-grasse { background:#F1EBDF; color:#6B5A3A; }
.role-dessert, .role-laitage { background:#EDE7F6; color:#5B4A8A; }
.role-boisson { background:#E3EFF7; color:#2F5C7A; }
.role-fruit { background:#FDE8EE; color:#A83A5C; }
.feature-icon { width:3rem; height:3rem; border-radius:1rem; background:#F0F5F0; display:grid; place-items:center; font-size:1.5rem; }
.label { display:block; font-size:.8rem; font-weight:800; color:#31503A; }
.input, .input-wrap input { width:100%; margin-top:.25rem; background:#fff; border:1.5px solid #DCE8DC; border-radius:.9rem; padding:.75rem 1rem; font-size:1rem; outline:none; transition:border-color .15s, box-shadow .15s; }
.input:focus, .input-wrap:focus-within { border-color:#4F7A5A; box-shadow:0 0 0 4px rgba(79,122,90,.15); }
.input-wrap { display:flex; align-items:center; margin-top:.25rem; background:#fff; border:1.5px solid #DCE8DC; border-radius:.9rem; padding-right:.9rem; }
.input-wrap input { border:none; margin:0; box-shadow:none; background:transparent; }
.input-wrap span { font-size:.85rem; font-weight:700; color:#6B7A70; }
.choice { display:flex; align-items:center; gap:.6rem; border:1.5px solid #DCE8DC; border-radius:.9rem; padding:.75rem 1rem; cursor:pointer; font-weight:700; background:#fff; }
.choice:has(input:checked) { border-color:#4F7A5A; background:#F0F5F0; }
.choice input { accent-color:#4F7A5A; }
.stat { border-radius:1rem; padding:1rem; background:#fff; border:1px solid #DCE8DC; }
.stat-label { font-size:.7rem; font-weight:800; text-transform:uppercase; letter-spacing:.06em; color:#6B7A70; }
.stat-value { font-size:1.7rem; font-weight:800; color:#1F3A2A; line-height:1.15; margin-top:.15rem; }
.stat-value span { font-size:.9rem; font-weight:700; color:#6B7A70; }
.day-tab { flex:0 0 auto; min-width:5.5rem; text-align:center; padding:.55rem .9rem; border-radius:1rem; background:#fff; border:1.5px solid #DCE8DC; font-weight:800; color:#31503A; font-size:.85rem; transition:all .15s; }
.day-tab.active { background:#1F3A2A; color:#fff; border-color:#1F3A2A; }
.chip { padding:.4rem .9rem; border-radius:999px; border:1.5px solid #DCE8DC; background:#fff; font-size:.8rem; font-weight:700; color:#31503A; }
.chip.active { background:#4F7A5A; color:#fff; border-color:#4F7A5A; }
.no-scrollbar::-webkit-scrollbar { display:none; }
.no-scrollbar { scrollbar-width:none; }
details.why summary { list-style:none; }
details.why summary::-webkit-details-marker { display:none; }
details.why summary::before { content:"＋ "; }
details.why[open] summary::before { content:"－ "; }
input[type=number]::-webkit-inner-spin-button { opacity:.4; }
/* Graphique poids */
.wchart { position:relative; width:100%; }
.wchart svg { width:100%; height:auto; display:block; }
.wchart .grid line { stroke:#e1e0d9; stroke-width:1; }
.wchart .axis text { fill:#898781; font-size:11px; font-variant-numeric:tabular-nums; }
.wchart .line { fill:none; stroke:#4F7A5A; stroke-width:2; stroke-linejoin:round; stroke-linecap:round; }
.wchart .area { fill:#4F7A5A; opacity:.1; }
.wchart .dot { fill:#4F7A5A; stroke:#fff; stroke-width:2; }
.wchart .goal { stroke:#D9744F; stroke-width:1.5; stroke-dasharray:4 4; }
.wchart .goal-label { fill:#52514e; font-size:11px; font-weight:700; }
.wchart .end-label { fill:#0b0b0b; font-size:12px; font-weight:800; }
.wchart .crosshair { stroke:#c3c2b7; stroke-width:1; }
.wchart .tooltip { position:absolute; pointer-events:none; background:#fff; border:1px solid #DCE8DC; border-radius:.75rem; padding:.45rem .7rem; font-size:.8rem; box-shadow:0 6px 18px -8px rgba(31,58,42,.25); transform:translate(-50%, -110%); white-space:nowrap; }
.wchart .tooltip b { font-size:.95rem; }
@media print {
  header, footer, .print\:hidden { display:none !important; }
  .day-panel { display:block !important; }
  .card { box-shadow:none; break-inside:avoid; }
  main { max-width:none; padding:0; }
  details.why { display:none; }
}

/* ---- Boutons icône, popovers de remplacement ---- */
.btn-icon { width:1.75rem; height:1.75rem; border-radius:999px; display:grid; place-items:center; font-size:.8rem; font-weight:800; color:#31503A; background:#F0F5F0; border:1px solid #DCE8DC; cursor:pointer; list-style:none; transition:background .15s; line-height:1; }
.btn-icon:hover { background:#DCE8DC; }
.btn-icon::-webkit-details-marker { display:none; }
details.popover { position:relative; }
details.popover[open] > summary { background:#1F3A2A; color:#fff; border-color:#1F3A2A; }
details.popover[open]::before { content:""; position:fixed; inset:0; z-index:39; background:rgba(31,58,42,.08); }
.meal-card, .day-panel { scroll-margin-top:9.5rem; }
.popover-panel { position:absolute; right:0; top:calc(100% + 6px); z-index:40; width:16rem; max-width:calc(100vw - 2rem); background:#fff; border:1px solid #DCE8DC; border-radius:1rem; box-shadow:0 14px 34px -14px rgba(31,58,42,.35); padding:.6rem; }
.popover-title { font-size:.7rem; font-weight:800; text-transform:uppercase; letter-spacing:.05em; color:#6B7A70; padding:.2rem .5rem .4rem; }
.popover-list { max-height:14rem; overflow-y:auto; }
.popover-item { width:100%; text-align:left; display:flex; align-items:center; gap:.5rem; padding:.45rem .6rem; border-radius:.6rem; font-size:.875rem; font-weight:600; color:#1F2A22; }
.popover-item:hover { background:#F0F5F0; }
.popover-check { display:flex; align-items:center; gap:.5rem; margin-top:.4rem; padding:.5rem .6rem; border-top:1px solid #DCE8DC; font-size:.75rem; color:#C05E3B; font-weight:700; cursor:pointer; }
.item-row .why-text { border-left:2px solid #DCE8DC; }
@media (max-width:640px) {
  .item-row .pill-xs { display:none; }
  .item-row .why-text { padding-left:0; margin-left:2.5rem; }
  .item-row .item-name { white-space:normal; }
  .item-row .item-qty { order:10; flex-basis:100%; text-align:left; padding-left:2.5rem; font-size:.9rem; margin-top:-.15rem; }
  .item-row .item-main .text-xs { white-space:normal; }
}
.why-meal summary { list-style:none; }
.why-meal summary::-webkit-details-marker { display:none; }
.why-meal[open] { flex-basis:100%; }

/* ---- Vue d'ensemble ---- */
.overview { display:grid; grid-template-columns:5.5rem repeat(7, minmax(0,1fr)); font-size:.8rem; }
.ov-corner { background:#F0F5F0; border-bottom:1px solid #DCE8DC; }
.ov-day { background:#F0F5F0; border-bottom:1px solid #DCE8DC; border-left:1px solid #DCE8DC; padding:.6rem .4rem; text-align:center; font-weight:800; color:#31503A; transition:background .15s; }
.ov-day:hover { background:#DCE8DC; }
.ov-day.active { background:#1F3A2A; color:#fff; }
.ov-day.is-today:not(.active) { box-shadow:inset 0 -3px 0 #D9744F; }
.ov-row-label { display:flex; align-items:center; gap:.4rem; padding:.5rem .6rem; font-weight:800; color:#6B7A70; font-size:.72rem; text-transform:uppercase; letter-spacing:.04em; border-bottom:1px solid #DCE8DC; background:#FAF7F1; }
.ov-cell { display:flex; flex-direction:column; justify-content:center; gap:.15rem; text-align:left; padding:.55rem .55rem; min-height:3.6rem; border-left:1px solid #DCE8DC; border-bottom:1px solid #DCE8DC; transition:background .15s; }
.ov-cell:hover { background:#F0F5F0; }
.ov-cell.active { background:#F0F5F0; box-shadow:inset 3px 0 0 #4F7A5A; }
.ov-cell.is-snack { min-height:2.4rem; background:#FCFBF8; }
.ov-cell-title { font-weight:700; color:#1F2A22; line-height:1.25; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.ov-cell.is-snack .ov-cell-title { font-weight:600; color:#52514e; -webkit-line-clamp:1; }
.ov-cell-kcal { font-size:.68rem; color:#898781; font-variant-numeric:tabular-nums; }

/* ---- Frise du jour ---- */
.timeline { position:relative; display:flex; flex-direction:column; gap:1rem; }
.timeline::before { content:""; position:absolute; left:1.35rem; top:1.5rem; bottom:1.5rem; width:2px; background:#DCE8DC; }
.timeline-item { display:grid; grid-template-columns:2.75rem minmax(0,1fr); gap:.75rem; align-items:start; position:relative; }
.timeline-card { min-width:0; }
.timeline-time { display:flex; flex-direction:column; align-items:center; gap:.2rem; position:sticky; top:8.5rem; }
.timeline-dot { width:2.75rem; height:2.75rem; border-radius:999px; background:#fff; border:2px solid #DCE8DC; display:grid; place-items:center; font-size:1.2rem; box-shadow:0 2px 8px -4px rgba(31,58,42,.25); }
.timeline-item.is-snack .timeline-dot { width:2.1rem; height:2.1rem; font-size:.95rem; margin:0 .3rem; }
.timeline-label { font-size:.68rem; font-weight:800; color:#6B7A70; }
.timeline-item.is-snack .timeline-card { max-width:34rem; }
.day-tab.is-today:not(.active) { border-color:#D9744F; }
@media (min-width:768px) { .timeline-item { grid-template-columns:3.5rem minmax(0,1fr); gap:1rem; } .timeline::before { left:1.75rem; } .timeline-item.is-snack .timeline-dot { margin:0 .7rem; } }
@media print { .popover, .btn-icon { display:none !important; } .why-text { display:block !important; } .overview { font-size:.7rem; } }

/* ---- Icônes Lucide (sprite icons.svg) ---- */
.ico { width:1.25em; height:1.25em; display:inline-block; vertical-align:-.2em; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; flex-shrink:0; }
.ico-sm { width:1em; height:1em; }
.ico-lg { width:1.6rem; height:1.6rem; }
.ico-xl { width:2.25rem; height:2.25rem; stroke-width:1.6; }
.btn-icon .ico { width:.9rem; height:.9rem; stroke-width:2.4; }
.feature-icon .ico { width:1.5rem; height:1.5rem; color:#3F6449; stroke-width:1.8; }
.timeline-dot .ico { width:1.3rem; height:1.3rem; color:#3F6449; }
.timeline-item.is-snack .timeline-dot .ico { width:1rem; height:1rem; }
/* pastille d'aliment : teinte selon le rôle */
.food-ico { width:2.1rem; height:2.1rem; border-radius:.7rem; display:grid; place-items:center; flex-shrink:0; background:#F0F5F0; color:#3F6449; }
.food-ico .ico { width:1.15rem; height:1.15rem; stroke-width:1.9; }
.food-ico.tint-glucides { background:#FCF1D6; color:#8a5a00; }
.food-ico.tint-proteines { background:#FBE7DD; color:#C05E3B; }
.food-ico.tint-legumes { background:#DCE8DC; color:#31503A; }
.food-ico.tint-matiere-grasse { background:#F1EBDF; color:#6B5A3A; }
.food-ico.tint-dessert, .food-ico.tint-laitage { background:#EDE7F6; color:#5B4A8A; }
.food-ico.tint-boisson { background:#E3EFF7; color:#2F5C7A; }
.food-ico.tint-fruit { background:#FDE8EE; color:#A83A5C; }
.ov-row-label .ico { width:.95rem; height:.95rem; }
.tip-ico { width:3.25rem; height:3.25rem; border-radius:1rem; background:rgba(255,255,255,.12); display:grid; place-items:center; flex-shrink:0; }
.tip-ico .ico { width:1.6rem; height:1.6rem; stroke-width:1.8; }
.popover-item .ico { width:1rem; height:1rem; color:#6B7A70; }
.chip .ico, .btn-primary .ico, .btn-secondary .ico, .btn-ghost .ico, .nav-link .ico, .pill .ico { width:1.05em; height:1.05em; }
.rayon-ico { width:2rem; height:2rem; border-radius:.6rem; background:#fff; border:1px solid #DCE8DC; display:grid; place-items:center; color:#3F6449; }
.rayon-ico .ico { width:1.1rem; height:1.1rem; }
@media (max-width:640px) { .food-ico { width:1.85rem; height:1.85rem; border-radius:.55rem; } .food-ico .ico { width:1rem; height:1rem; } }