/* ═══════════════════════════════════════════════════════════════════════
   Maryse — styles communs aux pages index.php, generer.php et profil.php
   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;
  /* Gris chaud assombri : l'ancien #c0bead ne donnait que 1,7:1 sur fond clair
     (seuil WCAG AA : 4,5:1) — placeholders et compteurs étaient quasi illisibles
     en extérieur. Teinte conservée, luminosité réduite -> 4,6:1. */
  --text-faint: #6f6e64;
  --border: #e8e4dc;
  --row-border: #f2efe9;

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

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

  /* Hérités d'un ancien écran de suivi ; conservés, sans effet 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: #9a9a8c; /* 2,7:1 -> 5,7:1 sur les fonds sombres */
    --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. ── */
/* Conteneur collant qui regroupe le bandeau de notification ET l'en-tête :
   un message pousse ainsi la barre de navigation vers le bas au lieu de la
   recouvrir — on peut continuer à naviguer pendant qu'il est affiché.
   (Auparavant display:contents + header sticky ; le bandeau, fixé par-dessus,
   masquait la navigation.) */
.topstack{position:sticky;top:0;z-index:51;}
.app-header{background:var(--card-bg);border-bottom:1px solid var(--border);box-shadow:0 1px 3px rgba(0,0,0,.06);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;
}

/* ═══ Bandeau de notification unique ═══════════════════════════════════
   Placé DANS LE FLUX, en tête du conteneur collant : il pousse la barre de
   navigation vers le bas plutôt que de la recouvrir. Pas d'animation :
   l'apparition doit être immédiate, pas spectaculaire. */
.mt-banner{
  display:none;
  padding:calc(9px + env(safe-area-inset-top)) 18px 9px;
  font-size:13px;font-weight:600;line-height:1.4;text-align:center;
  cursor:pointer;-webkit-tap-highlight-color:transparent;
}
.mt-banner.show{display:block;}
.mt-banner.mt-ok{background:var(--green-btn);color:#fff;}
.mt-banner.mt-warn{background:var(--amber-badge-text);color:#fff;}
.mt-banner.mt-info{background:var(--green-light);color:var(--green-btn);}
.mt-banner.mt-error{background:var(--danger);color:#fff;}
/* Le bandeau occupe déjà la zone sûre : l'en-tête ne doit pas la reprendre. */
.mt-banner.show + .app-header{padding-top:9px;}

/* ═══ Modale partagée (shadowbox) : confirmations + éditeurs ═══════════════ */
.mc-overlay{position:fixed;inset:0;z-index:1000;background:rgba(0,0,0,.45);display:flex;align-items:flex-start;justify-content:center;padding:24px 14px;overflow-y:auto;-webkit-overflow-scrolling:touch;}
.mc-card{width:100%;max-width:440px;background:var(--card-bg);border-radius:14px;border:1px solid var(--border);padding:18px;display:flex;flex-direction:column;gap:12px;margin:auto;}
.mc-head{display:flex;align-items:center;justify-content:space-between;gap:10px;}
.mc-title{font-size:17px;font-weight:700;color:var(--text);}
.mc-close{width:32px;height:32px;flex-shrink:0;border:none;border-radius:8px;background:var(--page-bg);color:var(--text-muted);font-size:18px;cursor:pointer;line-height:1;}
@media (hover:hover){.mc-close:hover{background:var(--border);}}
.mc-msg{font-size:13.5px;color:var(--text-muted);line-height:1.5;white-space:pre-line;}
.mc-actions{display:flex;gap:8px;margin-top:4px;}
.mc-actions button{flex:1;padding:11px;border-radius:8px;font-size:13.5px;font-weight:700;cursor:pointer;}
.mc-cancel{border:1px solid var(--border);background:none;color:var(--text-muted);}
@media (hover:hover){.mc-cancel:hover{background:var(--page-bg);}}
.mc-confirm{border:none;background:var(--danger);color:#fff;}
.mc-confirm.mc-primary{background:var(--green-btn);}
@media (hover:hover){.mc-confirm:hover{opacity:.88;}}
@media (min-width:560px){.mc-actions{justify-content:flex-end;}.mc-actions button{flex:0 0 auto;min-width:120px;}}