/* ══════════════════════════════════════════════════════════════ dark-mode.css — étuCook S'applique quand est présent. Surcharge uniquement les variables de couleur : aucune règle de layout n'est touchée, tout le reste hérite automatiquement. ══════════════════════════════════════════════════════════════ */ html.dark { /* Fonds */ --bg: #12120d; --surface: #1c1c15; --sand: #252519; --sand-2: #1e1e14; /* Texte */ --ink: #f0efe6; --ink-2: #c8c8b4; --muted: #7a7a6a; --muted-l: #4e4e42; --white: #f0efe6; /* Caramel — légèrement plus chaud pour contraster sur fond sombre */ --caramel: #e0b688; --caramel-d: #c99660; --caramel-l: #6b4e30; /* Forest — plus clair pour rester lisible sur fond sombre */ --forest: #3d8b62; --forest-m: #4fa877; --forest-l: #6abf8a; --fp: rgba(61,139,98,.14); --fp2: rgba(61,139,98,.22); /* Danger */ --danger: #e05c4b; --danger-bg: rgba(224,92,75,.1); /* Navbar — fond sombre translucide */ --sh-nav: 0 4px 20px rgba(0,0,0,.35); --sh-card: 0 1px 8px rgba(0,0,0,.28); --sh-lift: 0 8px 28px rgba(0,0,0,.40); --sh-panel:0 -6px 32px rgba(0,0,0,.35); --sh-btn: 0 4px 14px rgba(61,139,98,.28); } /* ── Navbar : fond sombre ── */ html.dark .navbar { background: rgba(18,18,13,.94); border-color: rgba(255,255,255,.06); } /* ── Body : dégradé sombre ── */ html.dark body { background-image: radial-gradient(ellipse 80% 40% at 0% 0%, rgba(224,182,136,.05) 0%, transparent 60%), radial-gradient(ellipse 60% 35% at 100% 100%, rgba(61,139,98,.04) 0%, transparent 60%); } /* ── Search panel ── */ html.dark .search-panel__inner { background: var(--surface); border-color: rgba(255,255,255,.07); } /* ── Form panel / sheets ── */ html.dark .form-panel, html.dark .imc-sheet, html.dark .add-panel, html.dark .ticket-modal, html.dark .ai-panel { background: var(--surface); } html.dark .form-panel__header, html.dark .add-panel__head, html.dark .add-panel__footer, html.dark .ticket-modal__footer, html.dark .ai-panel__footer { background: var(--surface); border-color: rgba(255,255,255,.07); } /* ── Dropdowns ── */ html.dark .nav-dropdown { background: var(--surface); border-color: rgba(255,255,255,.08); } html.dark .nav-dropdown__user { background: var(--sand); } /* ── Cards recettes ── */ html.dark .recipe-card, html.dark .meta-card, html.dark .recipe-block, html.dark .courses-item, html.dark .courses-add-form, html.dark .courses-import, html.dark .comment-item, html.dark .comment-form-wrap, html.dark .profil-card, html.dark .rating-average, html.dark .product-card { background: var(--surface); border-color: rgba(255,255,255,.07); } /* ── Séparateurs ── */ html.dark .courses-separator::before, html.dark .courses-separator::after, html.dark hr, html.dark .nav-dropdown__sep { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.08); } /* ── Inputs & selects ── */ html.dark input, html.dark select, html.dark textarea { background: var(--sand); border-color: rgba(255,255,255,.1); color: var(--ink); color-scheme: dark; } html.dark input:focus, html.dark select:focus, html.dark textarea:focus { background: #2a2a1e; border-color: var(--forest); } html.dark input::placeholder, html.dark textarea::placeholder { color: var(--muted); } /* ── Sidebar ── */ html.dark .sidebar__section { background: var(--surface); border-color: rgba(255,255,255,.07); } html.dark .sidebar__btn--frigo { background: rgba(61,139,98,.12); border-color: rgba(61,139,98,.22); } /* ── Bottom nav ── */ html.dark .bottom-nav { background: rgba(18,18,13,.97); border-color: rgba(255,255,255,.07); } /* .btn-overlay--white utilise désormais var(--forest), qui s'adapte déjà automatiquement au mode sombre — plus besoin de surcharge ici. */ /* ── IMC result ── */ html.dark .imc-result { background: rgba(61,139,98,.1); border-color: rgba(61,139,98,.2); } /* ── Recipe hero gradient (reste lisible) ── */ html.dark .recipe-hero__gradient { background: linear-gradient(to top, rgba(10,10,7,.85) 0%, rgba(10,10,7,.2) 50%, transparent 100%); } /* ── Hero badges sur fond sombre ── */ html.dark .hero-badge { background: rgba(18,18,13,.82); color: var(--ink-2); } /* ── Rating average background ── */ html.dark .rating-average { background: var(--sand); } /* ── Profil checkboxes ── */ html.dark .profil-checkbox { background: var(--sand); border-color: rgba(255,255,255,.1); color: var(--ink); } html.dark .profil-checkbox:has(input:checked) { background: rgba(61,139,98,.14); border-color: var(--forest); color: var(--forest-l); } /* ── Frigo : select-bar ── */ html.dark .select-bar { background: #1e3d2a; } /* ── Frigo : cat pills ── */ html.dark .cat-pill { background: var(--surface); border-color: rgba(255,255,255,.1); color: var(--muted); } /* ── Frigo : scan hint texte ── */ html.dark .scanner-hint { background: rgba(28,28,21,.82); color: rgba(240,239,230,.75); } /* ── Scrollbar dark ── */ html.dark ::-webkit-scrollbar-thumb { background: #3a3a2e; } /* ── Toggle switch — visible sur profil.php ── */ .dark-toggle-wrap { display: flex; align-items: center; justify-content: space-between; padding: 16px 0; border-bottom: 1px solid rgba(0,0,0,.07); } html.dark .dark-toggle-wrap { border-color: rgba(255,255,255,.07); } .dark-toggle-wrap__label { display: flex; align-items: center; gap: 10px; font-size: 14px; font-weight: 600; color: var(--ink); } .dark-toggle-wrap__label svg { width: 18px; height: 18px; flex-shrink: 0; stroke: var(--caramel-d); fill: none; stroke-width: 2; } .dark-toggle-wrap__sub { font-size: 11px; color: var(--muted); margin-top: 2px; font-weight: 400; } /* Le switch lui-même */ .dark-switch { position: relative; width: 48px; height: 27px; flex-shrink: 0; } .dark-switch input { opacity: 0; width: 0; height: 0; position: absolute; } .dark-switch__track { position: absolute; inset: 0; border-radius: var(--r-pill); background: var(--muted-l); cursor: pointer; transition: background var(--t); } .dark-switch input:checked + .dark-switch__track { background: var(--forest); } .dark-switch__track::after { content: ''; position: absolute; top: 3px; left: 3px; width: 21px; height: 21px; border-radius: 50%; background: var(--white); box-shadow: 0 1px 4px rgba(0,0,0,.2); transition: transform var(--t); } .dark-switch input:checked + .dark-switch__track::after { transform: translateX(21px); }