/* ═══════════════════════════════════════════════════════════════════════
   Maryse — styles communs aux 3 pages (index.html, suivi.html, courses.html)
   Palette de couleurs (clair/sombre), reset de base, header + navigation.
   Chaque page ajoute ensuite ses propres styles spécifiques dans son <style>.
   ═══════════════════════════════════════════════════════════════════════ */

:root {
  color-scheme: light dark;
  --safe-top: env(safe-area-inset-top, 0px);

  --green-mid: #7aA855;
  --green-btn: #5a8040;
  --green-btn-hover: #4a6e32;
  --green-light: #eaf3de;
  --green-border: #d0e8bc;
  --green-strip: #f2f8ec;
  --green-strip-border: #deeece;

  --amber-bg: #fdf5e8;
  --amber-border: #ecd9a8;
  --amber-text: #7a5820;
  --amber-badge-bg: #fdeec8;
  --amber-badge-text: #b8882a;

  --blue-bg: #e8f0fd;
  --blue-border: #a8c8ec;
  --blue-text: #2a5a8a;
  --blue-badge-bg: #d8e8fc;
  --blue-badge-text: #2a6ab8;

  --page-bg: #f5f3ef;
  --card-bg: #ffffff;
  --text: #3a3a2a;
  --text-muted: #8a8a78;
  --text-faint: #c0bead;
  --border: #e8e4dc;
  --row-border: #f2efe9;

  --libre-text: #6a6a5a;
  --meal-type-text: #c0bead;

  --danger: #b71c1c;
  --danger-bg: #fce8e6;
  --danger-border: #f0c4c0;

  /* Spécifiques à suivi.html, harmless ailleurs */
  --done-bg: #fafdf8;
  --done-text: #5a8040;
  --rec-dot: #c02020;
  --block-text: #b71c1c;
  --block-bg: #fce8e6;
  --toggle-track-off: #d1d1d6;
  --toggle-track-on: #5a8040;
}

@media (prefers-color-scheme: dark) {
  :root {
    --green-mid: #86c25f;
    --green-btn: #7ab850;
    --green-btn-hover: #8fce63;
    --green-light: #23301c;
    --green-border: #33461f;
    --green-strip: #202a19;
    --green-strip-border: #2c3a20;

    --amber-bg: #2c2416;
    --amber-border: #4a3a1c;
    --amber-text: #e0b869;
    --amber-badge-bg: #4a3a1c;
    --amber-badge-text: #f0c878;

    --blue-bg: #182432;
    --blue-border: #2c4a6a;
    --blue-text: #8fc0f0;
    --blue-badge-bg: #223850;
    --blue-badge-text: #9ecbf5;

    --page-bg: #14160f;
    --card-bg: #1e2118;
    --text: #e8e6dc;
    --text-muted: #a2a294;
    --text-faint: #64645a;
    --border: #2e3226;
    --row-border: #262a20;

    --libre-text: #9a9a8a;
    --meal-type-text: #6e6e60;

    --danger: #e8847e;
    --danger-bg: #3a201c;
    --danger-border: #4a2420;

    --done-bg: #1a2416;
    --done-text: #8fce63;
    --rec-dot: #e8605a;
    --block-text: #e8847e;
    --block-bg: #3a201c;
    /* Contraste renforcé pour le switch en mode sombre : trop proche du fond sinon */
    --toggle-track-off: #6b6e5e;
    --toggle-track-on: #8fce63;
  }
}

*{box-sizing:border-box;margin:0;padding:0;}
body{font-family:-apple-system,BlinkMacSystemFont,'Helvetica Neue',Arial,sans-serif;background:var(--page-bg);color:var(--text);min-height:100vh;}

/* ── Header + navigation (communs aux 3 pages) ───────────────── */
.safe-top-fill{position:fixed;top:0;left:0;right:0;height:var(--safe-top);background:var(--green-mid);z-index:60;}
.sticky{position:sticky;top:var(--safe-top);z-index:50;}
.top-bar{background:var(--green-mid);color:white;padding:11px 18px;padding-top:calc(11px + env(safe-area-inset-top));display:flex;align-items:center;justify-content:space-between;gap:12px;}
.logo{font-size:15px;font-weight:500;letter-spacing:.4px;}

.nav-tabs{display:flex;background:var(--card-bg);border-bottom:1px solid var(--border);}
.nav-tab{flex:1;text-align:center;padding:10px 8px;font-size:12px;font-weight:600;color:var(--text-muted);text-decoration:none;border-bottom:2px solid transparent;}
.nav-tab.active{color:var(--green-btn);border-bottom-color:var(--green-btn);}

/* ── Header/navigation blanc, FIXE (ne disparaît plus au scroll) ─────────────
   Maryse (logo, gauche) — Menus · Générer (centre) — Profil (droite).
   Sert de barre de navigation principale sur toutes les pages. ── */
/* display:contents : le conteneur ne crée pas de boîte, le header devient un enfant direct
   du body -> son position:sticky tient sur toute la hauteur de la page (ne disparaît plus). */
.topstack{display:contents;}
.app-header{background:var(--card-bg);border-bottom:1px solid var(--border);position:sticky;top:0;z-index:51;display:flex;align-items:center;gap:10px;padding:9px 16px;padding-top:calc(9px + env(safe-area-inset-top));}
.app-header .brand{display:flex;align-items:center;gap:7px;font-size:16px;font-weight:600;color:var(--text);text-decoration:none;flex-shrink:0;}
.app-header .brand svg{display:block;}
.app-nav{flex:1;display:flex;justify-content:center;gap:18px;}
/* Onglets : pas de trait sous les actifs, la couleur verte suffit. */
.app-nav-link{font-size:13px;font-weight:600;color:var(--text-muted);text-decoration:none;padding:5px 2px;white-space:nowrap;}
.app-nav-link.active{color:var(--green-btn);font-weight:700;}
.app-nav-profile{flex-shrink:0;}
@media (hover:hover){.app-nav-link:hover{color:var(--text);}.app-nav-link.active:hover{color:var(--green-btn);}}

/* ── Champs texte communs (toutes les pages), sauf les boutons-champs comme "+Plus"
   pour le nombre de personnes (classe .opt-btn) : fond transparent pour se fondre dans
   la section plutôt que de créer un encart contrasté, juste un contour. On retire le
   focus par défaut du navigateur au profit d'un contour plus foncé. ── */
input:not([type]):not(.opt-btn), input[type="text"]:not(.opt-btn), textarea:not(.opt-btn) {
  background: transparent;
  outline: none;
  box-shadow: none;
  -webkit-tap-highlight-color: transparent;
}
input:not([type]):not(.opt-btn):not([readonly]):focus, input[type="text"]:not(.opt-btn):not([readonly]):focus, textarea:not(.opt-btn):not([readonly]):focus,
input:not([type]):not(.opt-btn):not([readonly]):focus-visible, input[type="text"]:not(.opt-btn):not([readonly]):focus-visible, textarea:not(.opt-btn):not([readonly]):focus-visible {
  outline: none;
  box-shadow: none;
  border-color: var(--green-btn);
}
/* Un champ en lecture seule (profil non édité) ne doit jamais afficher de contour de focus,
   même s'il est cliqué (un <input readonly> reste focusable). */
input[readonly]:focus, input[readonly]:focus-visible, textarea[readonly]:focus, textarea[readonly]:focus-visible {
  outline: none;
  box-shadow: none;
  border-color: transparent;
}