/* ============================================================
   Menu Planner — Styles custom
   (Tailwind CSS est chargé via CDN dans index.html)
   ============================================================ */

/* Utilitaires Alpine */
[x-cloak] { display: none !important; }

/* Animations */
.fade-in { animation: fadeIn 0.3s ease-in; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }

.spinner { border: 3px solid #f3f3f3; border-top: 3px solid #ed7d0e; border-radius: 50%; width: 24px; height: 24px; animation: spin 0.8s linear infinite; display: inline-block; }
.dark .spinner { border-color: #374151; border-top-color: #f09733; }
@keyframes spin { to { transform: rotate(360deg); } }

.reroll-fade { animation: rerollFade 0.35s ease-out; }
@keyframes rerollFade { 0% { opacity: 0; transform: translateX(8px); } 100% { opacity: 1; transform: translateX(0); } }
.reroll-spin { animation: spin 0.5s ease-in-out; }

/* Dégradés hero */
.hero-gradient { background: linear-gradient(135deg, #fef7ee 0%, #fdedd3 50%, #f9d8a5 100%); }
.dark .hero-gradient { background: linear-gradient(135deg, #1c1917 0%, #292524 50%, #44403c 100%); }

/* Card hover */
.card-hover { transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1); }
.card-hover:hover { transform: translateY(-3px); box-shadow: 0 10px 30px -5px rgba(0,0,0,0.12); }
.dark .card-hover:hover { box-shadow: 0 10px 30px -5px rgba(0,0,0,0.4); }

/* Carte saisonnière */
.season-card { background: linear-gradient(135deg, #ecfdf5 0%, #d1fae5 100%); border: 1px solid #a7f3d0; }
.dark .season-card { background: linear-gradient(135deg, #064e3b 0%, #065f46 100%); border-color: #047857; }

/* Glassmorphism */
.glass-card { background: rgba(255,255,255,0.7); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border: 1px solid rgba(255,255,255,0.3); }
.dark .glass-card { background: rgba(31,41,55,0.7); border-color: rgba(75,85,99,0.3); }

/* Bento grid */
.bento-grid { display: grid; gap: 1rem; grid-template-columns: repeat(12, 1fr); }
@media (max-width: 767px) { .bento-grid { grid-template-columns: 1fr; } .bento-grid > * { grid-column: span 1 !important; } }

/* Badges types de repas */
.badge-matin { background: linear-gradient(135deg, #fbbf24, #f59e0b); color: white; }
.badge-midi  { background: linear-gradient(135deg, #34d399, #10b981); color: white; }
.badge-soir  { background: linear-gradient(135deg, #818cf8, #6366f1); color: white; }

/* Tailles emoji */
.emoji-xl  { font-size: 2rem;   line-height: 1; }
.emoji-2xl { font-size: 2.5rem; line-height: 1; }
.emoji-3xl { font-size: 3rem;   line-height: 1; }

/* Transitions de page */
.page-transition { animation: pageIn 0.35s cubic-bezier(0.4, 0, 0.2, 1); }
@keyframes pageIn { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }

/* Correctif taille police mobile (évite le zoom iOS) */
input, select, textarea { font-size: 16px !important; }

/* Menu mobile */
.mobile-menu-transition { transition: max-height 0.3s ease, opacity 0.3s ease; overflow: hidden; }
.mobile-menu-closed { max-height: 0; opacity: 0; }
.mobile-menu-open  { max-height: 400px; opacity: 1; }

/* Défilement fluide iOS */
.scroll-smooth { -webkit-overflow-scrolling: touch; }

/* Slider budget */
input[type="range"].budget-slider { -webkit-appearance: none; appearance: none; height: 8px; border-radius: 4px; background: #e5e7eb; outline: none; }
input[type="range"].budget-slider::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 24px; height: 24px; border-radius: 50%; background: #ed7d0e; cursor: pointer; box-shadow: 0 2px 6px rgba(0,0,0,0.2); }
input[type="range"].budget-slider::-moz-range-thumb { width: 24px; height: 24px; border-radius: 50%; background: #ed7d0e; cursor: pointer; border: none; box-shadow: 0 2px 6px rgba(0,0,0,0.2); }

/* Formulaires dark mode */
.dark input, .dark select, .dark textarea { background-color: #1f2937; border-color: #374151; color: #f3f4f6; }
.dark input::placeholder, .dark textarea::placeholder { color: #6b7280; }

/* Bandes couleur magasins */
.store-band-migros { border-top: 3px solid #f97316; }
.store-band-coop   { border-top: 3px solid #dc2626; }
.store-band-denner { border-top: 3px solid #1d4ed8; }
.store-band-aldi   { border-top: 3px solid #0284c7; }

/* Toggle dark mode */
.dark-toggle { transition: transform 0.3s ease; }
.dark-toggle:hover { transform: rotate(15deg); }

/* Repas verrouillé (vert) */
.meal-card-locked { background: linear-gradient(135deg, #f0fdf4 0%, #dcfce7 100%); border-left: 3px solid #22c55e; }
.dark .meal-card-locked { background: linear-gradient(135deg, #052e16 0%, #14532d 100%); border-left-color: #16a34a; }

/* Bandes colorées haut de card selon catégorie */
.border-cat-matin   { border-top: 4px solid #fbbf24; }
.border-cat-midi    { border-top: 4px solid #34d399; }
.border-cat-soir    { border-top: 4px solid #818cf8; }
.border-cat-default { border-top: 4px solid #f09733; }

/* Accent gauche carte jour du menu */
.menu-day-card { border-left-width: 4px; border-left-color: #f09733; }
.dark .menu-day-card { border-left-color: #ed7d0e; }

/* Filet orange titre de section */
.section-title { border-left: 3px solid #ed7d0e; padding-left: 0.625rem; }

/* Badges Nutri-Score A→E */
.nutriscore { display: inline-flex; align-items: center; justify-content: center; width: 1.625rem; height: 1.625rem; border-radius: 0.375rem; font-weight: 800; font-size: 0.8125rem; color: white; flex-shrink: 0; letter-spacing: -0.02em; }
.nutriscore-A { background: #038141; }
.nutriscore-B { background: #85BB2F; }
.nutriscore-C { background: #FECB02; color: #374151; }
.nutriscore-D { background: #EE8100; }
.nutriscore-E { background: #E63312; }