/* =====================================================================
   DESIGN SYSTEM — Ma Liste de Courses
   Généré via ui-ux-pro-max. Palette "Fresh green + food amber".
   Chargé APRÈS tailwind.min.css et style.css → surcharge les tokens.
   ===================================================================== */

/* ---------- 1. TOKENS COULEUR (food-appropriate, AA) ---------- */
:root {
    /* Primaire = vert frais (AA: blanc sur #047857 ≈ 5:1) */
    --primary:        #047857; /* green-700  - actions, header, nav */
    --primary-dark:   #065f46; /* green-800  - hover/active */
    --primary-light:  #059669; /* green-600  - accents clairs */
    --primary-50:     #ecfdf5; /* fonds très clairs */
    --on-primary:     #ffffff;

    /* Accent = ambre (CTA secondaire, promos, budget) */
    --accent:         #d97706; /* amber-600 */
    --accent-dark:    #b45309; /* amber-700 */
    --accent-light:   #f59e0b; /* amber-500 - accents clairs */
    --accent-50:      #fffbeb; /* amber-50  - fonds très clairs */
    --on-accent:      #ffffff;

    /* Sémantiques */
    --success:        #16a34a;
    --danger:         #dc2626;
    --warning:        #b45309; /* amber-700 : blanc dessus = 4.6:1 AA (était #d97706 = 3.4:1, texte blanc illisible sur bannière offline + toast) */
    --ring:           #059669; /* focus ring */

    /* ---- Échelle de z-index (documentée, centralisée) ----
       Empile : contenu < header (sticky) < nav (fixe) < modales < toasts.
       Le header (.app-header, z-index:90) et la barre (.bottom-nav, z-index:100)
       sont peints au-dessus du contenu ; les modales DOIVENT passer au-dessus
       d'eux, sinon leurs boutons d'action se cachent derrière la nav mobile. */
    --z-base:    1;
    --z-header:  90;   /* trends.css .app-header */
    --z-nav:     100;  /* style.css  .bottom-nav */
    --z-overlay: 150;  /* backdrops bottom-sheet */
    --z-sheet:   200;  /* bottom-sheet */
    --z-modal:   1300; /* dialogues / modales -> AU-DESSUS de la nav */
    --z-toast:   1400; /* notifications -> toujours au sommet */
}

/* ---------- 2. TYPOGRAPHIE (Rubik / Nunito Sans) ---------- */
:root {
    --font-heading: 'Rubik', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --font-body:    'Nunito Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
}
body { font-family: var(--font-body); -webkit-font-smoothing: antialiased; }
h1, h2, h3, h4, .font-bold, .font-semibold,
#current-page-title, .page-title { font-family: var(--font-heading); }

/* --- Échelle typographique (hiérarchie cohérente, Rubik) ---
   Appliquée aux balises ET disponible en classes .h1/.h2/.h3 réutilisables.
   Tailwind peut surcharger ponctuellement via ses utilitaires text-* ; ces
   règles fixent la valeur par défaut quand aucune classe n'est posée.        */
h1, .h1 { font-family: var(--font-heading); font-size: 1.5rem;   line-height: 1.25; font-weight: 700; letter-spacing: -.01em; }
h2, .h2 { font-family: var(--font-heading); font-size: 1.25rem;  line-height: 1.3;  font-weight: 600; letter-spacing: -.005em; }
h3, .h3 { font-family: var(--font-heading); font-size: 1.0625rem;line-height: 1.35; font-weight: 600; }
@media (min-width: 769px) {
    h1, .h1 { font-size: 1.875rem; }
    h2, .h2 { font-size: 1.5rem; }
    h3, .h3 { font-size: 1.25rem; }
}

/* Chiffres alignés pour prix/budget (number-tabular) — utilitaire réel
   (Tailwind .tabular-nums n'est pas généré dans le build). */
.tabular-nums { font-variant-numeric: tabular-nums; }
.tabular, .price, [data-price] { font-variant-numeric: tabular-nums; }

/* ---------- 3. ICÔNES SVG (remplacent les emojis) ---------- */
.icon {
    width: 1.25rem; height: 1.25rem;
    display: inline-block; vertical-align: -0.18em;
    fill: none; stroke: currentColor; stroke-width: 2;
    stroke-linecap: round; stroke-linejoin: round;
    flex: none;
}
.icon-sm { width: 1rem;   height: 1rem; }
.icon-lg { width: 1.5rem; height: 1.5rem; }

/* ---------- 4. RESKIN GLOBAL : palette unifiée vert + ambre ----------
   Tailwind est pré-buildé : impossible de régénérer les utilitaires. On
   surcharge donc en !important toutes les nuances "hors marque" réellement
   présentes dans les pages (relevé via grep des JS, hors app.bundle.js) pour
   obtenir UN produit cohérent (vert primaire + ambre accent), sans arc-en-ciel
   et sans éditer le HTML/JS.

   Familles -> token :
     blue / cyan / sky / green(mauvaise nuance) / emerald / teal / purple /
     indigo / pink  ............  --primary / --primary-light / --primary-dark / --primary-50
     orange / amber  ...........  --accent  / --accent-light  / --accent-dark  / --accent-50
   Échelle de nuance -> ton : 50/100 = très clair, 200-400 = clair,
     500/600 = base, 700-900 = foncé. (hover -> un cran plus foncé.)
   PRÉSERVÉ : rouge sémantique (--danger) et tokens success (.btn-success,
     .toast.success, .sync-success) qui n'utilisent PAS d'utilitaires Tailwind. */

/* ===== 4a. BACKGROUNDS — famille PRIMARY (vert) ===== */
.bg-blue-50, .bg-blue-100,
.bg-purple-50, .bg-purple-100,
.bg-indigo-50, .bg-indigo-100,
.bg-pink-50,
.bg-green-50, .bg-green-100,
.bg-emerald-50,
.hover\:bg-blue-50:hover, .hover\:bg-blue-100:hover,
.hover\:bg-purple-50:hover, .hover\:bg-purple-100:hover,
.hover\:bg-indigo-100:hover,
.hover\:bg-green-50:hover, .hover\:bg-green-100:hover { background-color: var(--primary-50) !important; }

.bg-blue-400, .bg-blue-500,
.bg-purple-500,
.bg-green-400, .bg-green-500 { background-color: var(--primary-light) !important; }

.bg-blue-600,
.bg-purple-600,
.bg-green-600 { background-color: var(--primary) !important; }

.bg-blue-700, .bg-blue-800, .bg-blue-900,
.bg-purple-800, .bg-purple-900,
.bg-indigo-800, .bg-indigo-900,
.bg-pink-900,
.bg-green-900, .bg-emerald-900 { background-color: var(--primary-dark) !important; }

/* hover : un cran plus foncé que la base */
.hover\:bg-blue-600:hover, .hover\:bg-blue-700:hover, .hover\:bg-blue-800:hover, .hover\:bg-blue-900:hover,
.hover\:bg-purple-600:hover, .hover\:bg-purple-800:hover, .hover\:bg-purple-900:hover,
.hover\:bg-indigo-800:hover,
.hover\:bg-green-600:hover, .hover\:bg-green-700:hover, .hover\:bg-green-800:hover, .hover\:bg-green-900:hover { background-color: var(--primary-dark) !important; }

/* dark: variantes foncées (Tailwind class strategy => ".dark .dark\:…") */
.dark .dark\:bg-blue-900,
.dark .dark\:bg-purple-900,
.dark .dark\:bg-indigo-900,
.dark .dark\:bg-pink-900,
.dark .dark\:bg-green-900,
.dark .dark\:bg-emerald-900 { background-color: var(--primary-dark) !important; }

/* ===== 4b. BACKGROUNDS — famille ACCENT (ambre) ===== */
.bg-orange-50, .bg-orange-100, .bg-amber-50,
.hover\:bg-orange-100:hover, .hover\:bg-amber-100:hover { background-color: var(--accent-50) !important; }

.bg-orange-200 { background-color: var(--accent-light) !important; }

.bg-orange-500, .bg-orange-600, .bg-amber-500,
.hover\:bg-orange-600:hover { background-color: var(--accent) !important; }

.bg-orange-800, .bg-orange-900,
.hover\:bg-orange-800:hover, .hover\:bg-orange-900:hover, .hover\:bg-amber-800:hover { background-color: var(--accent-dark) !important; }

.dark .dark\:bg-orange-800, .dark .dark\:bg-orange-900, .dark .dark\:bg-amber-900 { background-color: var(--accent-dark) !important; }

/* ===== 4c. TEXT — famille PRIMARY (vert) ===== */
.text-blue-100, .text-blue-200, .text-blue-300, .text-blue-400,
.text-purple-200, .text-purple-300, .text-purple-400,
.text-indigo-200, .text-indigo-300, .text-indigo-400,
.text-cyan-400,
.text-green-100, .text-green-200,
.text-emerald-400,
.dark .dark\:text-blue-200, .dark .dark\:text-blue-300, .dark .dark\:text-blue-400, .dark .dark\:text-blue-500,
.dark .dark\:text-purple-200, .dark .dark\:text-purple-300, .dark .dark\:text-purple-400,
.dark .dark\:text-indigo-200, .dark .dark\:text-indigo-300, .dark .dark\:text-indigo-400,
.dark .dark\:text-cyan-400,
.dark .dark\:text-green-200, .dark .dark\:text-green-300, .dark .dark\:text-green-400, .dark .dark\:text-green-500,
.dark .dark\:text-emerald-400,
.hover\:text-blue-300:hover { color: var(--primary-light) !important; }

.text-blue-500, .text-blue-600,
.text-purple-500, .text-purple-600,
.text-indigo-600,
.text-cyan-600,
.text-green-500, .text-green-600,
.text-emerald-600,
.hover\:text-blue-500:hover { color: var(--primary) !important; }

.text-blue-700, .text-blue-800,
.text-purple-700, .text-purple-800,
.text-indigo-700, .text-indigo-800,
.text-green-700, .text-green-800,
.hover\:text-blue-700:hover, .hover\:text-purple-700:hover, .hover\:text-green-700:hover { color: var(--primary-dark) !important; }

/* ===== 4d. TEXT — famille ACCENT (ambre) ===== */
.text-orange-100, .text-orange-200, .text-orange-300, .text-orange-400,
.dark .dark\:text-orange-200, .dark .dark\:text-orange-300, .dark .dark\:text-orange-400, .dark .dark\:text-orange-500,
.dark .dark\:text-amber-300, .dark .dark\:text-amber-400 { color: var(--accent-light) !important; }

.text-orange-500, .text-orange-600, .text-amber-600,
.hover\:text-orange-600:hover { color: var(--accent) !important; }

.text-orange-700, .text-orange-800, .text-amber-700 { color: var(--accent-dark) !important; }

/* ===== 4c-bis. CORRECTIF CONTRASTE (dommages collatéraux du reskin) =====
   Le remap générique envoyait les nuances claires text-*-100/200 vers
   --primary-light (#059669) : invisible sur les tuiles vertes (ex. labels
   "Total semaine"). Ces nuances = TOUJOURS du texte clair sur fond coloré
   -> blanc. Placé APRÈS le remap -> gagne par ordre de source (même spécificité). */
.text-blue-100, .text-green-100, .text-orange-100, .text-amber-100,
.text-purple-100, .text-indigo-100,
.text-blue-200, .text-green-200, .text-orange-200 { color: #ffffff !important; }

/* Variantes dark : accent coloré sur cartes sombres. #059669 tombait à 2.4:1
   sur un fond dark:bg-*-900 (-> --primary-dark). Vert clair #6ee7b7 = ≥4.7:1. */
.dark .dark\:text-blue-200,  .dark .dark\:text-green-200,  .dark .dark\:text-indigo-200,
.dark .dark\:text-purple-200, .dark .dark\:text-orange-200, .dark .dark\:text-amber-200,
.dark .dark\:text-blue-300,  .dark .dark\:text-green-300,  .dark .dark\:text-emerald-300 { color: #6ee7b7 !important; }

/* ===== 4e. BORDERS ===== */
.border-blue-200, .border-blue-300,
.border-pink-200,
.border-green-200, .border-green-400 { border-color: var(--primary-light) !important; }

.border-purple-500, .border-green-500 { border-color: var(--primary) !important; }

.border-blue-700, .border-blue-800,
.border-pink-700,
.dark .dark\:border-blue-700, .dark .dark\:border-blue-800,
.dark .dark\:border-pink-700,
.dark .dark\:border-green-700, .dark .dark\:border-green-800 { border-color: var(--primary-dark) !important; }

.border-orange-200, .border-orange-300, .border-amber-200 { border-color: var(--accent-light) !important; }
.border-orange-500, .border-orange-600 { border-color: var(--accent) !important; }
.border-orange-700,
.dark .dark\:border-orange-600, .dark .dark\:border-orange-700, .dark .dark\:border-amber-700 { border-color: var(--accent-dark) !important; }

/* ===== 4f. FOCUS RINGS -> vert (--ring) ===== */
.ring-blue-300, .ring-blue-500,
.focus\:ring-blue-300:focus, .focus\:ring-blue-500:focus,
.focus\:ring-green-500:focus { --tw-ring-color: var(--ring) !important; }

/* ===== 4g. DÉGRADÉS (gradient color stops) ===== */
/* Départ CLAIR (nuance 50) -> reste clair (ne pas envoyer vers un vert moyen). */
.from-green-50 { --tw-gradient-from: var(--primary-50) !important;
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(236,253,245,0)) !important; }
/* Départ COLORÉ (500/600) -> primary FONCÉ (#047857) : les tuiles portent du
   texte blanc en AA (blanc/#059669 = 3.78:1 échouait ; blanc/#047857 = 5.5:1). */
.from-blue-500, .from-blue-600,
.from-purple-500,
.from-green-500, .from-green-600,
.dark .dark\:from-green-900 { --tw-gradient-from: var(--primary) !important;
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(4,120,87,0)) !important; }

.to-blue-500, .to-blue-600,
.to-green-500, .to-green-600,
.to-emerald-50, .to-emerald-900, .to-teal-500, .to-pink-500,
.dark .dark\:to-emerald-900 { --tw-gradient-to: var(--primary) !important; }

/* Tuile ambre à texte blanc -> départ accent FONCÉ (blanc/#f59e0b = 1.9:1 KO). */
.from-orange-500 { --tw-gradient-from: var(--accent-dark) !important;
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(180,83,9,0)) !important; }
.to-orange-50, .to-orange-900,
.dark .dark\:to-orange-900 { --tw-gradient-to: var(--accent) !important; }

/* ===== 4h. accent-* divers ===== */
.accent-orange-500 { accent-color: var(--accent) !important; }

/* Nav active + menu mobile (étaient en dur #2563eb / #3b82f6) */
nav a.active { background-color: var(--primary-dark) !important; }
.mobile-menu { background-color: var(--primary) !important; }

/* ---------- 5. HEADER : contraste AA ---------- */
.app-header {
    background: linear-gradient(90deg, var(--primary-dark), var(--primary));
    color: var(--on-primary);
}
.app-header .subtitle { color: rgba(255,255,255,.92); } /* ≥4.5:1 sur vert-700 */

/* ---------- 6. TOUCH TARGETS ≥44px ---------- */
.btn-chip {
    min-height: 44px; min-width: 44px;
    display: inline-flex; align-items: center; justify-content: center;
    gap: .4rem; padding: .5rem .75rem; border-radius: var(--radius-lg);
    font-size: .875rem; line-height: 1; cursor: pointer;
    transition: background-color var(--transition-fast) var(--ease-out),
                transform var(--transition-fast) var(--ease-out);
}
.btn-chip:active { transform: scale(.96); } /* scale-feedback */
.theme-toggle { width: 44px; height: 44px; } /* était 32px */

/* ---------- 7. NAV DESKTOP : overflow "Plus" ---------- */
.nav-more { position: relative; }
.nav-more__panel {
    position: absolute; right: 0; top: calc(100% + 6px);
    background: var(--bg-card); color: var(--text-main);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg); box-shadow: var(--shadow-lg);
    padding: .375rem; min-width: 200px; z-index: 60;
    display: none; grid-template-columns: 1fr; gap: 2px;
}
.nav-more[open] .nav-more__panel,
.nav-more__panel.show { display: grid; }
.nav-more__panel a {
    display: flex; align-items: center; gap: .6rem;
    padding: .55rem .6rem; border-radius: var(--radius-md);
    color: var(--text-main); font-size: .875rem;
}
.nav-more__panel a:hover { background: var(--primary-50); color: var(--primary-dark); }
.dark .nav-more__panel a:hover { background: rgba(5,150,105,.18); color: var(--primary-light); }

/* ---------- 8. A11Y : focus visible + reduced-motion ---------- */
:where(a, button, [role="button"], input, select):focus-visible {
    outline: 3px solid var(--ring); outline-offset: 2px; border-radius: 4px;
}
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .01ms !important; animation-iteration-count: 1 !important;
        transition-duration: .01ms !important; scroll-behavior: auto !important;
    }
}

/* ---------- 9. Tailles d'icônes des nav (SVG remplace emoji) ---------- */
.bottom-nav-icon  { width: 1.5rem; height: 1.5rem; }
.bottom-sheet-icon{ width: 1.6rem; height: 1.6rem; }
/* Le hamburger est désormais un <button> : neutraliser le style natif */
.hamburger { background: none; border: 0; padding: 0; }

/* ---------- 10. EMPILAGE DES MODALES (BLOCKER mobile) ----------
   Les dialogues sont rendus en Tailwind z-50, MAIS .bottom-nav (z-index:100)
   et .app-header (z-index:90) peignent par-dessus -> sur mobile (modales en
   bottom-sheet) les boutons d'action passaient SOUS la nav. On force toute
   modale/overlay au-dessus de la nav et du header ; les toasts au sommet.   */
[role="dialog"],
[aria-modal="true"] { z-index: var(--z-modal) !important; }

/* Overlays plein écran (backdrop des modales) au pattern Tailwind .fixed.inset-0 */
.fixed.inset-0[role="dialog"],
.fixed.inset-0.z-50,
#confirm-modal, #custom-prompt-modal, #family-modal { z-index: var(--z-modal) !important; }

/* Les toasts restent au-dessus de tout, y compris des modales */
.toast { z-index: var(--z-toast) !important; }

/* ---------- 11. iOS : empêcher l'auto-zoom au focus (HIGH) ----------
   Tout contrôle < 16px déclenche un zoom iPhone au focus, sans dézoom ensuite.
   On force 16px sur les contrôles de formulaire en mobile.                   */
@media (max-width: 768px) {
    input, select, textarea { font-size: 16px !important; }
}

/* ---------- 12. UTILITAIRE : bannières fixes au-dessus de la nav ----------
   Classe appliquée par le JS aux bannières fixes basses pour dégager la
   barre de navigation mobile (hauteur nav + safe-area + marge).             */
.above-bottom-nav {
    bottom: calc(var(--bottom-nav-height) + var(--safe-area-bottom) + 1rem) !important;
}