/* ══════════════════════════════════════════════
   base.css
   Extrait depuis base.html
══════════════════════════════════════════════ */

*, *::before, *::after { box-sizing: border-box; }
        body { background-color: var(--bg-page); transition: background-color 0.35s ease; }

        /* ── Toggle thème — icônes ─────────────────────────────── */
        [data-theme="dark"]  .nk-theme-icon-light { display: none; }
        [data-theme="dark"]  .nk-theme-icon-dark  { display: inline; }
        [data-theme="light"] .nk-theme-icon-dark  { display: none; }
        [data-theme="light"] .nk-theme-icon-light { display: inline; }
        /* Défaut si pas encore de data-theme */
        .nk-theme-icon-light { display: none; }
        .nk-theme-icon-dark  { display: inline; }

        /* ── Correction : le toggle desktop (hidden md:flex) ne doit pas
           s'afficher sur mobile. .nav-icon-btn { display:flex } écrase
           Tailwind 'hidden' (même spécificité, base.css chargé après).
           Spécificité plus haute + !important pour forcer le masquage. ── */
        @media (max-width: 767px) {
            .nav-pill .nk-theme-toggle.hidden { display: none !important; }
        }

        /* ================================================
           NAVBAR — DARK GLASS
        ================================================ */
        .nav-pill {
            background: var(--bg-card);
            backdrop-filter: var(--backdrop);
            -webkit-backdrop-filter: var(--backdrop);
            border: 1px solid rgba(52, 211, 153, 0.15);
            border-radius: 999px;
            padding: 8px 8px 8px 18px;
            display: flex; align-items: center; gap: 10px;
            box-shadow: 0 0 0 1px rgba(0,0,0,0.4), 0 20px 60px rgba(0,0,0,0.4), 0 4px 16px var(--bg-input-dark), inset 0 1px 0 var(--bg-element);
            transition: box-shadow 0.3s ease;
            position: relative;
            z-index: 2;
        }

        /* ════════════════════════════════════════════════
           GAZETTE — Navbar kicker + titre courant scroll
        ═══════════════════════════════════════════════ */
        .gz-logo-block { display: flex; align-items: center; gap: 12px; }
        .gz-logo-text-wrap { display: flex; flex-direction: column; justify-content: center; gap: 2px; }
        .gz-kicker {
            font-family: 'Poppins', sans-serif;
            font-size: 9px; font-weight: 700;
            letter-spacing: 1.4px;
            color: var(--gold-soft);
            text-transform: uppercase;
            line-height: 1; white-space: nowrap;
            transition: opacity .2s ease;
        }

        .gz-current-title {
            font-family: 'DM Serif Display', serif;
            font-style: italic; font-size: 14px; font-weight: 400;
            color: var(--text-secondary);
            opacity: 0; transform: translateX(-4px);
            transition: opacity .25s ease, transform .25s ease;
            margin-left: 10px; white-space: nowrap;
            pointer-events: none;
            display: inline-flex; align-items: center;
        }
        .gz-current-sep { color: var(--gold); margin-right: 4px; }

        #main-nav.is-scrolled .gz-kicker { opacity: 0; }
        #main-nav.is-scrolled .gz-current-title { opacity: 1; transform: translateX(0); }

        /* Double filet maître sous navbar — z-index bas pour rester sous les resultats AJAX */
        .gz-rule-double {
            max-width: 1280px;
            margin: 6px auto 0;
            padding: 0 16px;
            pointer-events: none;
            position: relative;
            z-index: 1;
        }
        .gz-rule-double::before,
        .gz-rule-double::after {
            content: "";
            display: block;
            height: 1px;
        }
        .gz-rule-double::before {
            background: linear-gradient(90deg, transparent 0%, var(--g2) 25%, var(--g2) 75%, transparent 100%);
            opacity: .6;
            margin-bottom: 3px;
        }
        .gz-rule-double::after {
            background: linear-gradient(90deg, transparent 0%, var(--gold) 25%, var(--gold) 75%, transparent 100%);
            opacity: .5;
        }

        /* Mobile : pas de titre courant au scroll (place limitée) + kicker tronquée si trop longue */
        @media (max-width: 767px) {
            .gz-current-title { display: none; }
            .gz-logo-text-wrap { min-width: 0; max-width: 140px; }
            .gz-kicker { overflow: hidden; text-overflow: ellipsis; display: block; }
        }

        .nav-logo-text { font-family: 'Poppins', sans-serif; font-weight: 800; font-size: 19px; color: var(--text-primary); letter-spacing: -0.3px; line-height: 1; white-space: nowrap; }
        .nav-logo-text span { color: var(--g1); }
        .nav-logo-icon { width: 40px; height: 40px; background: linear-gradient(135deg, var(--g2), #059669); border-radius: 14px; display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 12px rgba(16,185,129,0.35), inset 0 1px 0 var(--text-faint); transition: transform 0.3s ease, box-shadow 0.3s ease; flex-shrink: 0; overflow: hidden; }
        .nav-logo:hover .nav-logo-icon { transform: rotate(6deg) scale(1.08); box-shadow: 0 6px 20px rgba(16,185,129,0.5); }
        .nav-planning-btn { width: 40px; height: 40px; border-radius: 14px; background: linear-gradient(135deg, var(--g2), #059669); box-shadow: 0 4px 12px rgba(16,185,129,0.35), inset 0 1px 0 var(--text-faint); display: flex; align-items: center; justify-content: center; flex-shrink: 0; text-decoration: none; transition: transform 0.3s ease, box-shadow 0.3s ease; }
        .nav-planning-btn:hover { transform: scale(1.08); box-shadow: 0 6px 20px rgba(16,185,129,0.5); }
        .nav-planning-btn.hp-btn-locked { background: var(--bg-element); box-shadow: none; }
        .nav-planning-btn.hp-btn-locked:hover { transform: none; box-shadow: none; }
        .nav-planning-btn.hp-btn-locked .hp-ico-lock-anim { color: #34d399; }
        .nav-vdivider { width: 1px; height: 26px; background: var(--bg-element); flex-shrink: 0; }
        .nav-search-input { width: 100%; background: var(--bg-element); border: 1px solid var(--bg-element); border-radius: 999px; padding: 9px 18px 9px 42px; font-family: 'DM Sans', sans-serif; font-size: 14px; font-weight: 500; color: var(--text-primary); outline: none; transition: all 0.25s ease; }
        .nav-search-input::placeholder { color: var(--text-placeholder); }
        .nav-search-input:focus { background: var(--border-subtle); border-color: var(--border-focus); box-shadow: 0 0 0 3px var(--border); }
        .nav-icon-btn { width: 40px; height: 40px; border-radius: 14px; background: var(--bg-element); border: 1px solid var(--bg-element); display: flex; align-items: center; justify-content: center; cursor: pointer; transition: all 0.2s ease; color: var(--text-secondary); position: relative; text-decoration: none; flex-shrink: 0; }
        .nav-icon-btn:hover { background: var(--bg-element-hov); border-color: var(--text-muted); color: var(--text-primary); transform: translateY(-1px); }
        .nav-icon-btn.is-moderation { background: rgba(245,158,11,0.1); border-color: rgba(245,158,11,0.2); color: #f59e0b; }
        .nav-icon-btn.is-moderation:hover { background: rgba(245,158,11,0.18); }
        .nav-badge { position: absolute; top: -5px; right: -5px; min-width: 17px; height: 17px; padding: 0 3px; background: #ef4444; border: 2px solid var(--bg-card-solid); border-radius: 999px; font-family: 'Poppins', sans-serif; font-size: 9px; font-weight: 700; color: var(--text-primary); display: flex; align-items: center; justify-content: center; }
        .btn-create-recipe { display: flex; align-items: center; gap: 8px; padding: 0 16px; height: 40px; background: linear-gradient(135deg, #f59e0b, #d97706); border-radius: 14px; font-family: 'Poppins', sans-serif; font-size: 12.5px; font-weight: 700; color: var(--text-primary); text-decoration: none; border: none; cursor: pointer; box-shadow: 0 4px 16px rgba(245,158,11,0.3), inset 0 1px 0 var(--text-faint); transition: all 0.2s ease; flex-shrink: 0; white-space: nowrap; }
        .btn-create-recipe:hover { background: linear-gradient(135deg, var(--amber), #f59e0b); transform: translateY(-1px); box-shadow: 0 6px 22px rgba(245,158,11,0.4); }
        .btn-create-plus { width: 20px; height: 20px; background: var(--text-faint); border-radius: 7px; display: flex; align-items: center; justify-content: center; font-size: 15px; font-weight: 800; line-height: 1; flex-shrink: 0; }
        .nav-user-pill { display: flex; align-items: center; gap: 8px; padding: 4px 10px 4px 4px; background: var(--bg-element); border: 1px solid var(--bg-element-hov); border-radius: 999px; cursor: pointer; transition: all 0.2s ease; flex-shrink: 0; position: relative; }
        .nav-user-pill:hover { background: var(--border-subtle); border-color: var(--text-muted); }
        .nav-user-avatar { width: 32px; height: 32px; border-radius: 999px; border: 2px solid rgba(52,211,153,0.45); overflow: hidden; flex-shrink: 0; position: relative; }
        .nav-user-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
        .nav-user-online { position: absolute; bottom: 0; right: 0; width: 8px; height: 8px; background: #22c55e; border-radius: 999px; border: 1.5px solid var(--bg-card-solid); }
        /* Conteneur nom + grade dans la pill */
        .nav-user-info { display: flex; flex-direction: column; justify-content: center; gap: 2px; }
        .nav-user-name { font-family: 'Poppins', sans-serif; font-size: 12px; font-weight: 700; color: var(--text-primary); line-height: 1.1; }
        .nav-user-grade { font-family: 'Poppins', sans-serif; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.6px; line-height: 1; }
        .nk-theme-toggle { font-size: 18px; border: none; }
        .nk-theme-toggle:hover { transform: rotate(15deg) translateY(-1px) !important; }

        /* ================================================
           SEARCH RESULTS
        ================================================ */
        .js-search-results { background: var(--bg-card-solid) !important; backdrop-filter: var(--backdrop); -webkit-backdrop-filter: var(--backdrop); border: 1px solid rgba(52, 211, 153, 0.2) !important; border-radius: 20px !important; box-shadow: 0 24px 60px var(--bg-overlay-soft), 0 0 0 1px rgba(0,0,0,0.5) !important; overflow: hidden; }
        .js-search-results .bg-white, .js-search-results [class*="bg-gray"], .js-search-results [class*="bg-emerald"], .js-search-results [class*="bg-green"] { background-color: transparent !important; }
        .js-search-results a { color: var(--text-primary) !important; }
        .js-search-results p, .js-search-results span, .js-search-results h3, .js-search-results h4 { color: var(--text-secondary) !important; }
        .js-search-results a:hover { background: var(--border) !important; }
        .js-search-results .text-gray-500, .js-search-results .text-gray-400, .js-search-results .text-gray-600 { color: var(--text-muted) !important; }
        .js-search-results .text-emerald-600, .js-search-results .text-emerald-500, .js-search-results .text-green-600 { color: var(--g1) !important; }
        .js-search-results .border-b, .js-search-results .border-t, .js-search-results .divide-y > *, .js-search-results [class*="border-gray"] { border-color: var(--text-muted) !important; }
        .js-search-results svg { color: var(--text-muted) !important; }
        .js-search-results svg path { stroke: var(--text-muted) !important; }

        /* ================================================
           DROPDOWN — LUXE 5 ÉTOILES
        ================================================ */
        #user-menu-dropdown { position: absolute; top: calc(100% + 12px); right: 0; width: 300px; background: #0D1810; border: 1px solid rgba(52,211,153,0.14); border-radius: 22px; box-shadow: 0 0 0 1px rgba(0,0,0,0.6), 0 32px 80px rgba(0,0,0,0.7), 0 8px 24px rgba(0,0,0,0.5); overflow: hidden; transform-origin: top right; z-index: 50; padding-bottom: 10px; }
        #user-menu-dropdown:not(.hidden) { animation: ddDropIn 0.28s cubic-bezier(0.34, 1.4, 0.64, 1) forwards; }
        @keyframes ddDropIn { from { opacity: 0; transform: scale(0.93) translateY(-10px); } to { opacity: 1; transform: scale(1) translateY(0); } }
        .dd-header { padding: 20px 18px 16px; display: flex; align-items: center; gap: 14px; background: linear-gradient(135deg, rgba(52,211,153,0.09) 0%, rgba(52,211,153,0.02) 100%); border-bottom: 1px solid rgba(52,211,153,0.10); margin-bottom: 6px; }
        .dd-avatar-wrap { position: relative; flex-shrink: 0; }
        .dd-avatar { width: 54px; height: 54px; border-radius: 16px; border: 2px solid rgba(52,211,153,0.5); overflow: hidden; box-shadow: 0 0 0 4px rgba(52,211,153,0.08); }
        .dd-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
        .dd-online-dot { position: absolute; bottom: -2px; right: -2px; width: 12px; height: 12px; background: #22c55e; border-radius: 50%; border: 2.5px solid #0D1810; box-shadow: 0 0 8px rgba(34,197,94,0.6); }
        .dd-userinfo { flex: 1; min-width: 0; padding-top: 2px; }
        .dd-username { font-family: 'Poppins', sans-serif; font-size: 15px; font-weight: 900; color: var(--text-primary); line-height: 1.2; margin-bottom: 5px; letter-spacing: -0.2px; }
        .dd-grade-row { display: flex; align-items: center; gap: 7px; margin-bottom: 5px; }
        .dd-grade-name { font-family: 'Poppins', sans-serif; font-size: 9.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 1.2px; }
        .dd-badges-row { display: flex; gap: 5px; flex-wrap: wrap; }
        .dd-badge { display: inline-flex; align-items: center; gap: 3px; padding: 3px 8px; border-radius: 7px; font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.4px; font-family: 'Poppins', sans-serif; }
        .dd-badge-xp { background: rgba(52,211,153,0.12); border: 1px solid rgba(52,211,153,0.25); color: #34d399; }
        .dd-sep { margin: 6px 16px; height: 1px; background: rgba(245,158,11,0.18); }
        .dd-section-label { padding: 10px 16px 5px; font-size: 8.5px; font-weight: 700; color: rgba(245,158,11,0.55); text-transform: uppercase; letter-spacing: 2px; font-family: 'Poppins', sans-serif; }
        .dd-items { padding: 2px 8px; }
        .dd-item { display: flex; align-items: center; gap: 12px; padding: 9px 10px; border-radius: 13px; text-decoration: none; cursor: pointer; transition: all 0.18s ease; position: relative; margin-bottom: 2px; border: 1px solid transparent; }
        .dd-item:hover { background: rgba(52,211,153,0.08); border-color: rgba(52,211,153,0.16); }
        .dd-item:hover .dd-item-icon-wrap { background: rgba(52,211,153,0.14); border-color: rgba(52,211,153,0.3); transform: scale(1.06); }
        .dd-item:hover .dd-item-arrow { opacity: 1; transform: translateX(0); color: rgba(52,211,153,0.6); }
        .dd-item:hover .dd-item-title { color: #34d399; }
        .dd-item-icon-wrap { width: 44px; height: 44px; border-radius: 12px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; transition: all 0.2s ease; border: 1px solid rgba(255,255,255,0.08); background: rgba(255,255,255,0.05); overflow: hidden; }
        .dd-item-icon-wrap img { width: 28px; height: 28px; object-fit: contain; }
        .dd-item-icon-wrap svg { width: 28px; height: 28px; }
        .dd-item-toque     .dd-item-icon-wrap { background: rgba(245,158,11,0.10); border-color: rgba(245,158,11,0.20); }
        .dd-item-creations .dd-item-icon-wrap { background: rgba(251,146,60,0.10); border-color: rgba(251,146,60,0.20); }
        .dd-item-atelier   .dd-item-icon-wrap { background: rgba(167,139,250,0.10); border-color: rgba(167,139,250,0.20); }
        .dd-item-pepites   .dd-item-icon-wrap { background: rgba(244,63,94,0.10);  border-color: rgba(244,63,94,0.20); }
        .dd-item-brigade   .dd-item-icon-wrap { background: rgba(59,130,246,0.10); border-color: rgba(59,130,246,0.20); }
        .dd-item-notifs    .dd-item-icon-wrap { background: rgba(234,179,8,0.10);  border-color: rgba(234,179,8,0.20); }
        .dd-item-content { flex: 1; min-width: 0; }
        .dd-item-title { font-family: 'Poppins', sans-serif; font-size: 13px; font-weight: 700; color: var(--text-primary); line-height: 1.2; transition: color 0.18s; }
        .dd-item-sub { font-size: 10.5px; font-weight: 500; color: var(--text-muted); margin-top: 2px; font-family: 'DM Sans', sans-serif; }
        .dd-item-arrow { font-size: 13px; opacity: 0; transform: translateX(-6px); transition: all 0.18s ease; flex-shrink: 0; color: var(--text-faint); }
        .dd-notif-badge { position: absolute; top: -4px; right: -4px; background: #ef4444; border: 1.5px solid #0D1810; color: #ffffff; border-radius: 999px; font-size: 9px; font-weight: 700; padding: 1px 6px; font-family: 'Poppins', sans-serif; animation: ddPulse 2s infinite; }
.dd-footer-link-notif { position: relative; }
        @keyframes ddPulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(239,68,68,0.5); } 50% { box-shadow: 0 0 0 4px rgba(239,68,68,0); } }
        .dd-footer { margin: 8px 8px 4px; padding: 8px; background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.07); border-radius: 15px; }
        .dd-footer-links { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-bottom: 0; }
        .dd-footer-links .dd-item-arrow { display: none; }
        .dd-footer-link { display: flex; align-items: center; justify-content: center; gap: 7px; padding: 10px; border-radius: 11px; text-decoration: none; font-size: 11px; font-weight: 600; color: rgba(255,255,255,0.5); transition: all 0.18s ease; cursor: pointer; font-family: 'DM Sans', sans-serif; background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.07); }
        .dd-footer-link:hover { background: rgba(52,211,153,0.09); border-color: rgba(52,211,153,0.22); color: #34d399; }
        .dd-footer-link img { width: 22px; height: 22px; object-fit: contain; opacity: 0.65; transition: opacity 0.18s; }
        .dd-footer-link:hover img { opacity: 1; }
        .dd-footer-link svg { width: 22px; height: 22px; opacity: 0.65; transition: opacity 0.18s; }
        .dd-footer-link:hover svg { opacity: 1; }
        .dd-logout-btn { width: calc(100% - 16px); margin: 6px 8px 0; display: flex; align-items: center; justify-content: center; gap: 8px; padding: 11px; background: rgba(239,68,68,0.07); border: 1px solid rgba(239,68,68,0.18); border-radius: 12px; font-family: 'Poppins', sans-serif; font-size: 11px; font-weight: 700; color: rgba(239,68,68,0.65); letter-spacing: 0.6px; text-transform: uppercase; cursor: pointer; transition: all 0.18s ease; }
        .dd-logout-btn:hover { background: rgba(239,68,68,0.14); border-color: rgba(239,68,68,0.36); color: #f87171; transform: none; }
        .dd-logout-btn img { width: 22px; height: 22px; object-fit: contain; opacity: 0.7; transition: opacity 0.18s; }
        .dd-logout-btn:hover img { opacity: 1; }

        /* ── Dropdown — Light mode ── */
        [data-theme="light"] #user-menu-dropdown { background: #ffffff; border-color: rgba(52,211,153,0.22); box-shadow: 0 0 0 1px rgba(0,0,0,0.06), 0 24px 60px rgba(0,0,0,0.10), 0 8px 24px rgba(0,0,0,0.07); }
        [data-theme="light"] .dd-header { background: linear-gradient(135deg, rgba(52,211,153,0.07) 0%, rgba(52,211,153,0.01) 100%); border-bottom-color: rgba(52,211,153,0.13); }
        [data-theme="light"] .dd-avatar { border-color: rgba(52,211,153,0.55); }
        [data-theme="light"] .dd-online-dot { border-color: #ffffff; }
        [data-theme="light"] .dd-username { color: var(--text-primary); }
        [data-theme="light"] .dd-badge-xp { background: rgba(52,211,153,0.10); border-color: rgba(52,211,153,0.22); color: #059669; }
        [data-theme="light"] .dd-sep { background: rgba(245,158,11,0.20); }
        [data-theme="light"] .dd-item-title { color: rgba(10,31,18,0.88); }
        [data-theme="light"] .dd-item-sub { color: rgba(10,31,18,0.45); }
        [data-theme="light"] .dd-item-arrow { color: rgba(10,31,18,0.25); }
        [data-theme="light"] .dd-item:hover { background: rgba(52,211,153,0.07); border-color: rgba(52,211,153,0.18); }
        [data-theme="light"] .dd-item:hover .dd-item-title { color: #059669; }
        [data-theme="light"] .dd-item:hover .dd-item-icon-wrap { background: rgba(52,211,153,0.12); border-color: rgba(52,211,153,0.28); }
        [data-theme="light"] .dd-item:hover .dd-item-arrow { color: rgba(5,150,105,0.6); }
        [data-theme="light"] .dd-item-icon-wrap { background: rgba(10,31,18,0.04); border-color: rgba(10,31,18,0.08); }
        [data-theme="light"] .dd-item-toque     .dd-item-icon-wrap { background: rgba(245,158,11,0.09);  border-color: rgba(245,158,11,0.20); }
        [data-theme="light"] .dd-item-creations .dd-item-icon-wrap { background: rgba(251,146,60,0.09);  border-color: rgba(251,146,60,0.20); }
        [data-theme="light"] .dd-item-atelier   .dd-item-icon-wrap { background: rgba(167,139,250,0.09); border-color: rgba(167,139,250,0.20); }
        [data-theme="light"] .dd-item-pepites   .dd-item-icon-wrap { background: rgba(244,63,94,0.09);   border-color: rgba(244,63,94,0.20); }
        [data-theme="light"] .dd-item-brigade   .dd-item-icon-wrap { background: rgba(59,130,246,0.09);  border-color: rgba(59,130,246,0.20); }
        [data-theme="light"] .dd-item-notifs    .dd-item-icon-wrap { background: rgba(234,179,8,0.09);   border-color: rgba(234,179,8,0.20); }
        [data-theme="light"] .dd-notif-badge { border-color: #ffffff; }
[data-theme="light"] .dd-footer-link-notif { position: relative; }
        [data-theme="light"] .dd-footer { background: rgba(10,31,18,0.03); border-color: rgba(10,31,18,0.07); }
        [data-theme="light"] .dd-footer-link { color: rgba(10,31,18,0.55); background: rgba(10,31,18,0.03); border-color: rgba(10,31,18,0.08); }
        [data-theme="light"] .dd-footer-link:hover { background: rgba(52,211,153,0.08); border-color: rgba(52,211,153,0.22); color: #059669; }
        [data-theme="light"] .dd-footer-link img { opacity: 0.55; }
        [data-theme="light"] .dd-footer-link:hover img { opacity: 1; }
        [data-theme="light"] .dd-footer-link svg { opacity: 0.55; }
        [data-theme="light"] .dd-footer-link:hover svg { opacity: 1; }
        [data-theme="light"] .dd-logout-btn { background: rgba(239,68,68,0.06); border-color: rgba(239,68,68,0.16); color: rgba(220,38,38,0.65); }
        [data-theme="light"] .dd-logout-btn:hover { background: rgba(239,68,68,0.10); border-color: rgba(239,68,68,0.30); color: #dc2626; }

        /* MISC */
        .custom-scrollbar::-webkit-scrollbar { width: 4px; } .custom-scrollbar::-webkit-scrollbar-track { background: transparent; } .custom-scrollbar::-webkit-scrollbar-thumb { background: var(--scrollbar-thumb); border-radius: 8px; }
        @keyframes slideDown { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: translateY(0); } }
        .animate-slide-down { animation: slideDown 0.2s ease-out forwards; }
        .lock-scroll { overflow: hidden; height: 100vh; }

        /* ── Navbar — hide on scroll down (mobile only) ── */
        @media (max-width: 767px) {
            #main-nav { transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1); }
            #main-nav.nav-scroll-hidden { transform: translateY(-110%); }
        }

        /* ================================================
           MENU MOBILE — LUXE 5 ÉTOILES (Plein écran)
        ================================================ */
        body.mob-menu-open #main-nav { opacity: 0; pointer-events: none; transition: opacity 0.2s; }
        body.mob-menu-open #mob-bottom-nav { display: none !important; }

        #mobile-menu { position: fixed; inset: 0; z-index: 9999; overflow: hidden; background: #0D1810; display: flex; flex-direction: column; }
        #mobile-menu.hidden { display: none; }
        #mobile-menu:not(.hidden) { animation: mobMenuIn 0.28s cubic-bezier(0.34, 1.2, 0.64, 1) forwards; }
        @keyframes mobMenuIn { from { opacity: 0; transform: translateX(-14px); } to { opacity: 1; transform: translateX(0); } }

        /* Croix flottante — respecte le safe-area-inset des iPhones à encoche */
        .mob-close-btn { position: absolute; top: calc(max(16px, env(safe-area-inset-top, 0px)) + 12px); right: 16px; z-index: 2; width: 38px; height: 38px; border-radius: 11px; display: flex; align-items: center; justify-content: center; background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.10); color: rgba(255,255,255,0.7); cursor: pointer; transition: all 0.18s ease; }
        .mob-close-btn:hover { background: rgba(239,68,68,0.12); border-color: rgba(239,68,68,0.28); color: #f87171; }

        /* Contenu fixe — padding-top = safe-area + hauteur du bouton ✕ + marge */
        .mob-inner { flex: 1; overflow: hidden; padding: calc(max(16px, env(safe-area-inset-top, 0px)) + 58px) 14px calc(max(12px, env(safe-area-inset-bottom, 0px)) + 8px); display: flex; flex-direction: column; gap: clamp(3px, 0.7vh, 6px); }

        /* ── Carte utilisateur ── */
        .mob-user-card { display: flex; align-items: center; gap: 12px; background: linear-gradient(135deg, rgba(52,211,153,0.08) 0%, rgba(52,211,153,0.02) 100%); border: 1px solid rgba(52,211,153,0.14); border-radius: 16px; padding: clamp(8px, 1.4vh, 12px) 14px; flex-shrink: 0; position: relative; overflow: hidden; }
        .mob-user-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: linear-gradient(90deg, transparent, rgba(52,211,153,0.3), transparent); }
        .mob-avatar-wrap { position: relative; flex-shrink: 0; }
        .mob-avatar { width: 48px; height: 48px; border-radius: 14px; overflow: hidden; border: 2px solid rgba(52,211,153,0.5); box-shadow: 0 0 0 3px rgba(52,211,153,0.08); }
        .mob-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
        .mob-online { position: absolute; bottom: -2px; right: -2px; width: 11px; height: 11px; background: #22c55e; border-radius: 50%; border: 2px solid #0D1810; box-shadow: 0 0 6px rgba(34,197,94,0.6); }
        .mob-uname { font-family:'Poppins',sans-serif; font-size:14px; font-weight:900; color:var(--text-primary); line-height:1.2; margin-bottom:4px; letter-spacing:-0.2px; }
        .mob-badges { display:flex; gap:4px; flex-wrap:wrap; }
        .mob-badge { font-family:'Poppins',sans-serif; font-size:8px; font-weight:700; padding:2px 7px; border-radius:6px; text-transform:uppercase; letter-spacing:0.5px; }
        .mob-badge-grade { background:rgba(245,158,11,0.12); border:1px solid rgba(245,158,11,0.22); color:#f59e0b; }
        .mob-badge-xp { background:rgba(52,211,153,0.12); border:1px solid rgba(52,211,153,0.25); color:#34d399; }

        /* ── Séparateur & label ── */
        .mob-sep { height: 1px; margin: 0 4px; background: rgba(245,158,11,0.18); flex-shrink: 0; }
        .mob-section-label { display: none; }

        /* ── Items navigation ── */
        .mob-item { display: flex; align-items: center; gap: 12px; padding: clamp(7px, 1.3vh, 10px) 10px; border-radius: 12px; text-decoration: none; transition: all 0.18s ease; border: 1px solid transparent; flex-shrink: 0; }
        .mob-item:hover, .mob-item:active { background: rgba(52,211,153,0.08); border-color: rgba(52,211,153,0.16); }
        .mob-item:hover .mob-item-icon, .mob-item:active .mob-item-icon { transform: scale(1.05); border-color: rgba(52,211,153,0.3); }
        .mob-item:hover .mob-item-title, .mob-item:active .mob-item-title { color: #34d399; }
        .mob-item:hover .mob-item-arrow, .mob-item:active .mob-item-arrow { color: rgba(52,211,153,0.6); transform: translateX(2px); }

        /* ── Icônes ── */
        .mob-item-icon { width: 40px; height: 40px; border-radius: 11px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; border: 1px solid rgba(255,255,255,0.08); background: rgba(255,255,255,0.05); transition: all 0.2s ease; overflow: hidden; }
        .mob-item-icon img { width: 24px; height: 24px; object-fit: contain; }
        .mob-item-icon svg { width: 24px; height: 24px; }
        .mic-toque    { background: rgba(245,158,11,0.10); border-color: rgba(245,158,11,0.20); }
        .mic-menu     { background: rgba(99,102,241,0.10);  border-color: rgba(99,102,241,0.20); }
        .mic-creations{ background: rgba(251,146,60,0.10); border-color: rgba(251,146,60,0.20); }
        .mic-atelier  { background: rgba(167,139,250,0.10); border-color: rgba(167,139,250,0.20); }
        .mic-pepites  { background: rgba(244,63,94,0.10);  border-color: rgba(244,63,94,0.20); }
        .mic-brigade  { background: rgba(59,130,246,0.10); border-color: rgba(59,130,246,0.20); }
        .mic-notifs   { background: rgba(234,179,8,0.10);  border-color: rgba(234,179,8,0.20); }
        .mic-all      { background: rgba(139,92,246,0.10); border-color: rgba(139,92,246,0.20); }

        /* ── Texte items ── */
        .mob-item-text { flex: 1; min-width: 0; }
        .mob-item-title { font-family:'Poppins',sans-serif; font-size:13px; font-weight:700; color:var(--text-primary); line-height:1.2; transition: color 0.18s; }
        .mob-item-sub { font-size:10px; color:var(--text-muted); margin-top:2px; font-family:'DM Sans',sans-serif; }
        .mob-item-arrow { font-size:16px; color:var(--text-faint); flex-shrink:0; transition: all 0.18s ease; }

        .mob-notif-badge { background:#ef4444; border:1.5px solid #0D1810; color:#ffffff; border-radius:999px; font-size:9px; font-weight:700; padding:1px 6px; font-family:'Poppins',sans-serif; animation: ddPulse 2s infinite; }

        /* ── Bouton modération ── */
        .mob-mod-btn { display: flex; align-items: center; gap: 10px; background: rgba(245,158,11,0.08); border: 1px solid rgba(245,158,11,0.20); border-radius: 12px; padding: clamp(7px, 1.3vh, 10px) 12px; text-decoration: none; position: relative; overflow: hidden; flex-shrink: 0; }
        .mob-mod-btn::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: linear-gradient(90deg, transparent, rgba(245,158,11,0.3), transparent); }
        .mob-mod-icon { width: 34px; height: 34px; border-radius: 10px; flex-shrink: 0; background: rgba(245,158,11,0.12); border: 1px solid rgba(245,158,11,0.22); display: flex; align-items: center; justify-content: center; }
        .mob-mod-label { font-family:'Poppins',sans-serif; font-size:12px; font-weight:700; color:#f59e0b; }
        .mob-mod-sub { font-size:9px; color:rgba(245,158,11,0.5); margin-top:1px; }
        .mob-mod-count { margin-left:auto; background:#f59e0b; color:#422006; border-radius:999px; font-size:9px; font-weight:800; padding:2px 7px; font-family:'Poppins',sans-serif; }

        /* ── Boutons connexion/inscription ── */
        .mob-create-btn { display: flex; align-items: center; justify-content: center; gap: 8px; background: linear-gradient(135deg,#f59e0b,#d97706); border-radius: 13px; padding: 12px; font-family:'Poppins',sans-serif; font-size:13px; font-weight:800; color:#ffffff; text-decoration: none; box-shadow: 0 4px 16px rgba(245,158,11,0.25); }

        /* ── Menu invité (non connecté) ── */
        .mob-guest { display: flex; flex-direction: column; gap: 20px; padding: 12px 4px 8px; flex: 1; min-height: 0; }
        .mob-guest-hero { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 8px; padding: 18px 12px 20px; background: linear-gradient(160deg, rgba(52,211,153,0.10) 0%, rgba(52,211,153,0.02) 100%); border: 1px solid rgba(52,211,153,0.18); border-radius: 20px; position: relative; overflow: hidden; }
        .mob-guest-hero::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: linear-gradient(90deg, transparent, rgba(52,211,153,0.4), transparent); }
        .mob-guest-hero-icon { width: 48px; height: 48px; border-radius: 14px; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, rgba(52,211,153,0.18) 0%, rgba(16,185,129,0.08) 100%); border: 1px solid rgba(52,211,153,0.28); color: #34d399; margin-bottom: 4px; box-shadow: 0 4px 16px rgba(16,185,129,0.18); }
        .mob-guest-hero-icon svg { width: 26px; height: 26px; }
        .mob-guest-eyebrow { font-family: 'Poppins', sans-serif; font-size: 10px; font-weight: 700; letter-spacing: 2.4px; text-transform: uppercase; color: rgba(52,211,153,0.78); margin: 0; }
        .mob-guest-title { font-family: 'DM Serif Display', serif; font-size: 22px; font-weight: 400; line-height: 1.15; color: var(--text-primary); margin: 2px 0 2px; letter-spacing: -0.3px; }
        .mob-guest-sub { font-family: 'DM Sans', sans-serif; font-size: 12px; line-height: 1.45; color: var(--text-secondary); margin: 0; max-width: 260px; }

        .mob-guest-actions { display: flex; flex-direction: column; gap: 10px; }
        .mob-guest-btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; padding: 14px 18px; border-radius: 14px; font-family: 'Poppins', sans-serif; font-size: 14px; font-weight: 700; letter-spacing: 0.2px; text-decoration: none; transition: transform 0.18s ease, box-shadow 0.22s ease, background 0.2s ease, border-color 0.2s ease; }
        .mob-guest-btn svg { width: 18px; height: 18px; flex-shrink: 0; }
        .mob-guest-btn--primary { background: linear-gradient(135deg, #10b981 0%, #059669 100%); color: #ffffff; box-shadow: 0 8px 22px rgba(16,185,129,0.35), inset 0 1px 0 rgba(255,255,255,0.18); }
        .mob-guest-btn--primary:active { transform: translateY(1px); box-shadow: 0 4px 12px rgba(16,185,129,0.3), inset 0 1px 0 rgba(255,255,255,0.18); }
        .mob-guest-btn--secondary { background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.12); color: var(--text-primary); }
        .mob-guest-btn--secondary:active { background: rgba(52,211,153,0.10); border-color: rgba(52,211,153,0.28); color: #34d399; }

        .mob-guest-perks { list-style: none; margin: 0; padding: 4px 2px 0; display: flex; flex-direction: column; gap: 10px; }
        .mob-guest-perks li { display: flex; align-items: center; gap: 10px; font-family: 'DM Sans', sans-serif; font-size: 12px; line-height: 1.3; color: var(--text-secondary); }
        .mob-guest-perks svg { width: 14px; height: 14px; flex-shrink: 0; color: #34d399; padding: 3px; box-sizing: content-box; background: rgba(52,211,153,0.10); border: 1px solid rgba(52,211,153,0.22); border-radius: 8px; }

        /* ── Bouton déconnexion ── */
        .mob-logout { width:100%; display:flex; align-items:center; justify-content:center; gap:7px; padding: clamp(8px, 1.4vh, 11px); background:rgba(239,68,68,0.07); border:1px solid rgba(239,68,68,0.18); border-radius:12px; font-family:'Poppins',sans-serif; font-size:11px; font-weight:700; color:rgba(239,68,68,0.65); letter-spacing:0.6px; text-transform:uppercase; cursor:pointer; transition:all 0.18s; flex-shrink: 0; }
        .mob-logout:hover { background:rgba(239,68,68,0.14); border-color:rgba(239,68,68,0.36); color:#f87171; }
        .mob-logout img { width:20px; height:20px; object-fit:contain; opacity:0.7; transition:opacity 0.18s; }
        .mob-logout:hover img { opacity:1; }

        /* ── Menu Mobile — Light mode ── */
        [data-theme="light"] #mobile-menu { background: #ffffff; }
        [data-theme="light"] .mob-close-btn { background: rgba(10,31,18,0.05); border-color: rgba(10,31,18,0.10); color: rgba(10,31,18,0.6); }
        [data-theme="light"] .mob-close-btn:hover { background: rgba(239,68,68,0.08); border-color: rgba(239,68,68,0.22); color: #dc2626; }
        [data-theme="light"] .mob-user-card { background: linear-gradient(135deg, rgba(52,211,153,0.06) 0%, rgba(52,211,153,0.01) 100%); border-color: rgba(52,211,153,0.16); }
        [data-theme="light"] .mob-avatar { border-color: rgba(52,211,153,0.55); }
        [data-theme="light"] .mob-online { border-color: #ffffff; }
        [data-theme="light"] .mob-uname { color: var(--text-primary); }
        [data-theme="light"] .mob-badge-xp { background: rgba(52,211,153,0.10); border-color: rgba(52,211,153,0.22); color: #059669; }
        [data-theme="light"] .mob-sep { background: rgba(245,158,11,0.20); }
        [data-theme="light"] .mob-item-title { color: rgba(10,31,18,0.88); }
        [data-theme="light"] .mob-item-sub { color: rgba(10,31,18,0.42); }
        [data-theme="light"] .mob-item-arrow { color: rgba(10,31,18,0.28); }
        [data-theme="light"] .mob-item:hover, [data-theme="light"] .mob-item:active { background: rgba(52,211,153,0.07); border-color: rgba(52,211,153,0.18); }
        [data-theme="light"] .mob-item:hover .mob-item-title, [data-theme="light"] .mob-item:active .mob-item-title { color: #059669; }
        [data-theme="light"] .mob-item:hover .mob-item-arrow, [data-theme="light"] .mob-item:active .mob-item-arrow { color: rgba(5,150,105,0.6); }
        [data-theme="light"] .mob-item-icon { background: rgba(10,31,18,0.04); border-color: rgba(10,31,18,0.08); }
        [data-theme="light"] .mic-toque    { background: rgba(245,158,11,0.09);  border-color: rgba(245,158,11,0.20); }
        [data-theme="light"] .mic-creations{ background: rgba(251,146,60,0.09); border-color: rgba(251,146,60,0.20); }
        [data-theme="light"] .mic-atelier  { background: rgba(167,139,250,0.09); border-color: rgba(167,139,250,0.20); }
        [data-theme="light"] .mic-pepites  { background: rgba(244,63,94,0.09);  border-color: rgba(244,63,94,0.20); }
        [data-theme="light"] .mic-brigade  { background: rgba(59,130,246,0.09); border-color: rgba(59,130,246,0.20); }
        [data-theme="light"] .mic-notifs   { background: rgba(234,179,8,0.09);  border-color: rgba(234,179,8,0.20); }
        [data-theme="light"] .mob-notif-badge { border-color: #ffffff; }
        [data-theme="light"] .mob-mod-btn { background: rgba(245,158,11,0.07); border-color: rgba(245,158,11,0.18); }
        [data-theme="light"] .mob-logout { background: rgba(239,68,68,0.06); border-color: rgba(239,68,68,0.16); color: rgba(220,38,38,0.65); }
        [data-theme="light"] .mob-logout:hover { background: rgba(239,68,68,0.10); border-color: rgba(239,68,68,0.30); color: #dc2626; }

        /* ── Menu invité — Light mode ── */
        [data-theme="light"] .mob-guest-hero { background: linear-gradient(160deg, rgba(52,211,153,0.10) 0%, rgba(52,211,153,0.02) 100%); border-color: rgba(52,211,153,0.22); }
        [data-theme="light"] .mob-guest-hero-icon { background: linear-gradient(135deg, rgba(5,150,105,0.14) 0%, rgba(5,150,105,0.06) 100%); border-color: rgba(5,150,105,0.26); color: #059669; box-shadow: 0 4px 16px rgba(5,150,105,0.14); }
        [data-theme="light"] .mob-guest-eyebrow { color: #059669; }
        [data-theme="light"] .mob-guest-sub { color: var(--text-secondary); }
        [data-theme="light"] .mob-guest-btn--primary { background: linear-gradient(135deg, #059669 0%, #047857 100%); color: #ffffff; box-shadow: 0 8px 20px rgba(5,150,105,0.28), inset 0 1px 0 rgba(255,255,255,0.22); }
        [data-theme="light"] .mob-guest-btn--primary:active { box-shadow: 0 3px 10px rgba(5,150,105,0.28), inset 0 1px 0 rgba(255,255,255,0.22); }
        [data-theme="light"] .mob-guest-btn--secondary { background: rgba(10,31,18,0.035); border-color: rgba(10,31,18,0.12); color: var(--text-primary); }
        [data-theme="light"] .mob-guest-btn--secondary:active { background: rgba(5,150,105,0.08); border-color: rgba(5,150,105,0.28); color: #059669; }
        [data-theme="light"] .mob-guest-perks li { color: rgba(10,31,18,0.62); }
        [data-theme="light"] .mob-guest-perks svg { color: #059669; background: rgba(5,150,105,0.08); border-color: rgba(5,150,105,0.22); }

        /* ================================================
           TOAST NOTIFICATIONS
        ================================================ */
        #toast-container { position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 12px; z-index: 9999; pointer-events: none; }
        .hp-toast { background: var(--bg-card-solid); backdrop-filter: var(--backdrop); -webkit-backdrop-filter: var(--backdrop); border: 1px solid var(--border-accent); border-radius: 999px; padding: 12px 20px; display: flex; align-items: center; gap: 10px; box-shadow: 0 10px 40px var(--bg-overlay-soft); pointer-events: auto; position: relative; overflow: hidden; animation: toastSlideUp 0.5s cubic-bezier(0.34, 1.4, 0.64, 1) forwards; opacity: 0; transform: translateY(20px); max-width: min(92vw, 560px); }
        /* 4 variantes visuellement distinctes */
        .hp-toast--success { border-color: var(--border-accent); }
        .hp-toast--success .hp-toast-icon { color: var(--g1); }
        .hp-toast--success .hp-toast-progress { background: var(--g1); }
        .hp-toast--error { border-color: rgba(239, 68, 68, 0.45); }
        .hp-toast--error .hp-toast-icon { color: var(--red); }
        .hp-toast--error .hp-toast-progress { background: var(--red); }
        .hp-toast--warning { border-color: rgba(251, 191, 36, 0.45); }
        .hp-toast--warning .hp-toast-icon { color: var(--amber); }
        .hp-toast--warning .hp-toast-progress { background: var(--amber); }
        .hp-toast--info { border-color: rgba(129, 140, 248, 0.45); }
        .hp-toast--info .hp-toast-icon { color: var(--indigo); }
        .hp-toast--info .hp-toast-progress { background: var(--indigo); }
        /* Rétrocompat : ancienne classe .toast-error utilisée dans certains vieux codes */
        .hp-toast.toast-error { border-color: rgba(239, 68, 68, 0.45); }
        .hp-toast.toast-error .hp-toast-icon { color: var(--red); }
        .hp-toast.toast-error .hp-toast-progress { background: var(--red); }
        .hp-toast-icon { flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; }
        .hp-toast-icon svg { width: 18px; height: 18px; }
        .hp-toast-msg { font-family: 'Poppins', sans-serif; font-size: 13px; font-weight: 600; color: var(--text-primary); margin: 0; padding-right: 4px; line-height: 1.3; }
        .hp-toast-progress { position: absolute; bottom: 0; left: 0; height: 3px; background: var(--g1); width: 100%; animation: toastProgress 4s linear forwards; }
        .hp-toast.toast-fade-out { animation: toastFadeOut 0.4s ease-in forwards; }
        @keyframes toastSlideUp { to { opacity: 1; transform: translateY(0); } }
        @keyframes toastProgress { from { width: 100%; } to { width: 0%; } }
        @keyframes toastFadeOut { to { opacity: 0; transform: translateY(20px); } }

        /* ──────────────────────────────────────────────────────────
           LOGO partagé (navbar + footer)
           .ft-logo / .ft-logo-icon / .ft-logo-text utilisés aussi
           par le bloc logo navbar — à conserver.
        ────────────────────────────────────────────────────────── */
        .ft-logo { display: inline-flex; align-items: center; gap: 11px; text-decoration: none; width: fit-content; }
        .ft-logo-icon {
            width: 44px; height: 44px;
            background: linear-gradient(135deg, #10b981, #059669); border-radius: 14px;
            display: flex; align-items: center; justify-content: center;
            box-shadow: 0 4px 20px rgba(16,185,129,.3), inset 0 1px 0 rgba(255,255,255,.15);
            overflow: hidden; flex-shrink: 0; transition: transform .3s, box-shadow .3s;
        }
        .ft-logo:hover .ft-logo-icon { transform: rotate(6deg) scale(1.08); box-shadow: 0 6px 24px rgba(16,185,129,.5); }
        .ft-logo-icon img { width: 100%; height: 100%; object-fit: cover; }
        .ft-logo-text { font-family: 'Poppins', sans-serif; font-weight: 800; font-size: 21px; color: #fff; letter-spacing: -.4px; line-height: 1; }
        .ft-logo-text span { color: #34d399; }
        [data-theme="light"] .ft-logo-text { color: var(--text-primary); }
        [data-theme="light"] .ft-logo-text span { color: #059669; }

/* ════════════════════════════════════════════════
   GAZETTE — FOOTER
═══════════════════════════════════════════════ */
.gz-footer {
    background: #020c05;
    position: relative;
    padding: 0 0 20px;
}
[data-theme="light"] .gz-footer {
    background: #f2faf5;
    border-top: 1px solid rgba(52,211,153,.15);
}

.gz-footer-rule {
    margin: 0 auto 32px;
    padding: 0 32px;
    max-width: 1280px;
}

/* Zone 1 — colonnes éditoriales */
.gz-cols {
    max-width: 1280px; margin: 0 auto;
    padding: 16px 32px 40px;
    display: grid; grid-template-columns: repeat(4, 1fr);
    gap: 64px;
}
.gz-col { min-width: 0; }
.gz-col-title {
    display: inline-block;
    font-family: 'DM Serif Display', serif;
    font-style: italic; font-size: 16px; font-weight: 400;
    color: var(--text-primary);
    background: none; border: none; padding: 0;
    cursor: default; letter-spacing: -0.1px;
    margin: 0 0 12px;
    position: relative;
    text-align: left;
}
.gz-col-title::after {
    content: "";
    display: block;
    width: 24px; height: 1px;
    background: var(--gold);
    margin-top: 6px;
    transition: width .2s ease;
}
.gz-col-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0; }
.gz-col-list li { line-height: 2; }
.gz-col-list a {
    font-family: 'Poppins', sans-serif;
    font-size: 13px; font-weight: 500;
    color: var(--text-secondary);
    text-decoration: none;
    transition: color .18s ease, text-decoration-color .18s ease;
    text-decoration-color: transparent;
    text-underline-offset: 3px;
}
.gz-col-list a:hover {
    color: var(--g1);
    text-decoration: underline;
    text-decoration-color: var(--gold-soft);
}

/* Filet fin de séparation (avant colophon, avant pied légal) */
.gz-rule-fine {
    max-width: 1280px; margin: 0 auto;
    padding: 0 32px;
    height: 1px;
    position: relative;
}
.gz-rule-fine::before {
    content: "";
    position: absolute; left: 32px; right: 32px; top: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent 0%, var(--gold-faint) 25%, var(--gold-faint) 75%, transparent 100%);
}

/* Tablette : 2 x 2 */
@media (max-width: 1023px) and (min-width: 768px) {
    .gz-cols { grid-template-columns: repeat(2, 1fr); gap: 48px; }
}

/* ── Zone 2 — Colophon ────────────────────────── */
.gz-colophon {
    max-width: 720px; margin: 32px auto;
    padding: 0 32px;
    text-align: center;
    position: relative;
    z-index: 1;
}
.gz-colophon::before {
    content: "";
    position: absolute; inset: -40px 0;
    background: radial-gradient(ellipse at center, rgba(200,162,90,.04) 0%, transparent 60%);
    z-index: -1;
    pointer-events: none;
}
[data-theme="light"] .gz-colophon::before {
    background: radial-gradient(ellipse at center, rgba(168,126,46,.04) 0%, transparent 60%);
}

.gz-colophon-brand {
    display: inline-flex; align-items: center; gap: 14px;
    margin-bottom: 10px;
}
.gz-colophon-icon {
    width: 48px; height: 48px;
    background: linear-gradient(135deg, var(--g2), #059669);
    border-radius: 16px;
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 4px 14px rgba(16,185,129,0.4), inset 0 1px 0 rgba(255,255,255,0.2);
    overflow: hidden;
    flex-shrink: 0;
}
.gz-colophon-icon img {
    width: 28px; height: 28px;
    object-fit: contain;
}
.gz-colophon-wordmark {
    font-family: 'Poppins', sans-serif;
    font-weight: 800; font-size: 28px;
    color: var(--text-primary);
    letter-spacing: -0.3px;
    line-height: 1;
}
.gz-colophon-accent { color: var(--g1); }

.gz-colophon-divider {
    display: flex; align-items: center; justify-content: center; gap: 8px;
    margin-bottom: 12px;
}
.gz-divider-line {
    width: 40px; height: 1px;
    background: var(--gold);
    opacity: .6;
}
.gz-divider-dot {
    color: var(--gold);
    font-size: 14px;
    line-height: 1;
    font-weight: 700;
}

.gz-colophon-edition {
    font-family: 'Poppins', sans-serif;
    font-size: 10px; font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--gold-soft);
    margin: 0 0 10px;
}
.gz-colophon-foundation {
    font-family: 'DM Serif Display', serif;
    font-style: italic; font-size: 13px; font-weight: 400;
    color: var(--text-secondary);
    margin: 0 0 12px;
    line-height: 1.4;
}
.gz-colophon-tagline {
    font-family: 'DM Serif Display', serif;
    font-style: italic; font-size: 14px; font-weight: 400;
    color: var(--text-muted);
    line-height: 1.55;
    margin: 0 0 20px;
}

.gz-colophon-social {
    display: flex; justify-content: center; gap: 16px;
}
.gz-social-link {
    width: 36px; height: 36px;
    border-radius: 999px;
    border: 1px solid var(--gold-faint);
    display: inline-flex; align-items: center; justify-content: center;
    color: var(--text-secondary);
    transition: color .2s ease, border-color .2s ease, transform .2s ease, background .2s ease;
    text-decoration: none;
}
.gz-social-link:hover {
    color: var(--gold);
    border-color: var(--gold);
    background: rgba(200,162,90,.06);
    transform: scale(1.08);
}
[data-theme="light"] .gz-social-link:hover {
    background: rgba(168,126,46,.06);
}

/* ── Zone 3 — Pied légal ──────────────────────── */
.gz-legal {
    max-width: 1280px; margin: 20px auto 0;
    padding: 0 32px;
    text-align: center;
    font-family: 'Poppins', sans-serif;
    font-size: 12px; font-weight: 500;
    color: rgba(255, 255, 255, 0.55);
    letter-spacing: .2px;
    line-height: 1.6;
}
[data-theme="light"] .gz-legal {
    color: rgba(10, 31, 18, 0.65);
}
.gz-heart { color: #e11d48; }
.gz-butter {
    font-family: 'DM Serif Display', serif;
    font-style: italic;
    color: rgba(255, 255, 255, 0.55);
    opacity: .85;
}
[data-theme="light"] .gz-butter {
    color: rgba(10, 31, 18, 0.65);
}

/* Mobile : colonnes masquées, seul le colophon reste */
@media (max-width: 767px) {
    .gz-footer { padding-bottom: calc(56px + env(safe-area-inset-bottom, 0px) + 20px); }
    .gz-cols { display: none; }
    /* Filet fin situe juste apres les colonnes : masque en mobile (le colophon arrive directement sous le double filet) */
    .gz-cols + .gz-rule-fine { display: none; }
    .gz-footer-rule { padding: 0 20px; margin-bottom: 12px; }
    .gz-rule-fine { padding: 0 20px; }
    .gz-rule-fine::before { left: 20px; right: 20px; }

    /* Responsive colophon + légal */
    .gz-colophon { margin: 24px auto; padding: 0 20px; }
    .gz-colophon-icon { width: 44px; height: 44px; border-radius: 14px; }
    .gz-colophon-icon img { width: 24px; height: 24px; }
    .gz-colophon-wordmark { font-size: 24px; }
    .gz-divider-line { width: 32px; }
    .gz-colophon-edition { font-size: 9.5px; letter-spacing: 1.8px; }
    .gz-colophon-foundation { font-size: 12.5px; }
    .gz-colophon-tagline { font-size: 13px; margin-bottom: 18px; }
    .gz-colophon-social { gap: 14px; }
    .gz-legal { font-size: 11px; padding: 0 20px; }
}

/* ── GAZETTE — Focus visible (a11y navigation clavier) ─── */
.gz-col-list a:focus-visible,
.gz-social-link:focus-visible {
    outline: 2px solid var(--gold);
    outline-offset: 3px;
    border-radius: 3px;
}

/* ════════════════════════════════════════════════════
   BOTTOM NAVIGATION MOBILE — "Night Kitchen" Premium
   Structure : barre horizontale fixe en bas,
   bouton Créer circulaire vert qui déborde au-dessus.
   Inspiré iOS/Android natif (Instagram · Threads).
════════════════════════════════════════════════════ */

/* ── 1. Masquée sur desktop ────────────────────── */
.mob-bottom-nav {
    display: none !important;
}

/* ── 2. Visible uniquement sur mobile ─────────── */
@media (max-width: 767px) {

    .mob-bottom-nav {
        /* Layout horizontal — c'est la correction principale */
        display: flex !important;
        flex-direction: row !important;
        align-items: flex-end;
        justify-content: space-around;

        /* Positionnement fixe tout en bas */
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        z-index: 200;
        overflow: visible; /* laisse le bouton Créer déborder */

        /* Hauteur : 56px zone utile + safe area iPhone */
        height: calc(56px + env(safe-area-inset-bottom, 0px));
        padding-bottom: env(safe-area-inset-bottom, 0px);

        /* Glassmorphism "Night Kitchen" */
        background: rgba(3, 16, 9, 0.84);
        backdrop-filter: blur(28px) saturate(200%);
        -webkit-backdrop-filter: blur(28px) saturate(200%);

        /* Bordure supérieure = reflet de lumière */
        border-top: 1px solid rgba(52, 211, 153, 0.20);
        box-shadow:
            0 -1px 0 rgba(255, 255, 255, 0.04),   /* reflet blanc */
            0 -12px 40px rgba(0, 0, 0, 0.50),
            0 -4px  16px rgba(0, 0, 0, 0.30);
    }

    /* Le footer absorbe la hauteur de la barre */
    .site-footer {
        padding-bottom: calc(56px + env(safe-area-inset-bottom, 0px));
    }

    /* Les toasts remontent au-dessus de la barre */
    #toast-container {
        bottom: calc(68px + env(safe-area-inset-bottom, 0px));
    }
}

/* ────────────────────────────────────────────────
   3. Item standard (Accueil, Planning, Courses, Espace)
──────────────────────────────────────────────── */
.mob-bn-item {
    flex: 1 1 0;
    min-width: 0;

    /* Empilement vertical icône + label */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    padding-bottom: 10px;
    gap: 4px;

    text-decoration: none;
    color: rgba(255, 255, 255, 0.32);
    position: relative;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;

    /* Micro-interaction tap */
    transition: color 0.18s ease, transform 0.18s cubic-bezier(0.34, 1.4, 0.64, 1);
}
.mob-bn-item:active {
    transform: scale(0.88);
}
.mob-bn-item.is-active {
    color: #34d399; /* --g1 */
}

/* ── Icône SVG ─────────────────────────────────── */
.mob-bn-icon {
    width: 24px;
    height: 24px;
    display: block;
    flex-shrink: 0;
    stroke: currentColor;
    fill: none;
    transition: transform 0.22s cubic-bezier(0.34, 1.4, 0.64, 1);
}
.mob-bn-item.is-active .mob-bn-icon {
    transform: scale(1.12);
}

/* ── Label texte ───────────────────────────────── */
.mob-bn-label {
    font-family: 'Poppins', sans-serif;
    font-size: 9.5px;
    font-weight: 600;
    letter-spacing: 0.1px;
    line-height: 1;
    text-align: center;
    white-space: nowrap;
    display: block;
}

/* ── Indicateur actif : trait lumineux en haut ─── */
.mob-bn-indicator {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%) scaleX(0);
    width: 22px;
    height: 2.5px;
    border-radius: 0 0 4px 4px;
    background: linear-gradient(90deg, #10b981, #34d399);
    box-shadow: 0 0 8px rgba(52, 211, 153, 0.70);
    transition: transform 0.28s cubic-bezier(0.34, 1.4, 0.64, 1);
    transform-origin: center;
}
.mob-bn-item.is-active .mob-bn-indicator {
    transform: translateX(-50%) scaleX(1);
}

/* ────────────────────────────────────────────────
   4. Bouton CRÉER — cercle vert qui déborde
──────────────────────────────────────────────── */
.mob-bn-create-item {
    flex: 1 1 0;
    min-width: 0;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    padding-bottom: 8px;
    gap: 4px;

    text-decoration: none;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    position: relative;
}
.mob-bn-create-item:active { transform: none; } /* géré par le cercle */

/* Le cercle qui dépasse au-dessus de la barre */
.mob-bn-create-circle {
    width: 54px;
    height: 54px;
    border-radius: 50%;

    /* Dégradé vert Night Kitchen */
    background: linear-gradient(145deg, #10b981 0%, #059669 100%);

    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;

    /* Débordement : remonte de 16px au-dessus de la barre */
    margin-top: -16px;
    position: relative;

    /* Halo vert + ombre douce */
    box-shadow:
        0 0  0 4px rgba(16, 185, 129, 0.14),   /* halo externe */
        0 -4px 22px rgba(16, 185, 129, 0.55),   /* lueur vers le haut */
        0  6px 20px rgba(5,  150, 105, 0.40),   /* ombre vers le bas */
        inset 0 1px 0 rgba(255, 255, 255, 0.22); /* reflet interne */

    transition: transform 0.22s cubic-bezier(0.34, 1.4, 0.64, 1),
                box-shadow  0.22s ease;
}
.mob-bn-create-circle svg {
    stroke: #ffffff;
    flex-shrink: 0;
}
.mob-bn-create-item:active .mob-bn-create-circle {
    transform: scale(0.90);
    box-shadow:
        0 0  0 4px rgba(16, 185, 129, 0.10),
        0 -2px 12px rgba(16, 185, 129, 0.30),
        0  3px 10px rgba(5,  150, 105, 0.22),
        inset 0 1px 0 rgba(255, 255, 255, 0.14);
}

/* Label sous le bouton Créer */
.mob-bn-create-label {
    font-family: 'Poppins', sans-serif;
    font-size: 9.5px;
    font-weight: 700;
    letter-spacing: 0.1px;
    line-height: 1;
    text-align: center;
    white-space: nowrap;
    color: rgba(255, 255, 255, 0.55);
}

/* ────────────────────────────────────────────────
   5. Badge de notification
──────────────────────────────────────────────── */
.mob-bn-badge {
    position: absolute;
    top: 2px;
    right: calc(50% - 20px);
    min-width: 15px;
    height: 15px;
    padding: 0 3px;
    background: #ef4444;
    border: 2px solid rgba(3, 16, 9, 0.95);
    border-radius: 999px;
    font-family: 'Poppins', sans-serif;
    font-size: 8px;
    font-weight: 700;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1;
}

/* ────────────────────────────────────────────────
   6. Mode CLAIR — overrides
──────────────────────────────────────────────── */
[data-theme="light"] .mob-bottom-nav {
    background: rgba(245, 252, 248, 0.90);
    border-top-color: rgba(10, 31, 18, 0.10);
    box-shadow:
        0 -1px 0 rgba(255, 255, 255, 0.85),
        0 -12px 40px rgba(0,  0,  0,  0.08),
        0 -4px  16px rgba(0,  0,  0,  0.05);
}
[data-theme="light"] .mob-bn-item            { color: rgba(10, 31, 18, 0.36); }
[data-theme="light"] .mob-bn-item.is-active  { color: #059669; }
[data-theme="light"] .mob-bn-indicator       {
    background: linear-gradient(90deg, #059669, #10b981);
    box-shadow: 0 0 8px rgba(5, 150, 105, 0.55);
}
[data-theme="light"] .mob-bn-badge           { border-color: rgba(245, 252, 248, 0.90); }
[data-theme="light"] .mob-bn-create-label    { color: rgba(10, 31, 18, 0.50); }

/* Masquer l'élément sur mobile */
@media (max-width: 768px) {
    .hp-mobile-hide {
        display: none !important;
    }
}

/* =========================================
   BOTTOM SHEET / MODAL CRÉATION
   Convention : base = dark (défaut app)
   [data-theme="light"] = overrides clair
========================================= */

/* =========================================
   OVERLAY
========================================= */
.hp-bottom-sheet-overlay {
    position: fixed; inset: 0;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    z-index: 9998;
    opacity: 0; visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}
.hp-bottom-sheet-overlay.is-visible { opacity: 1; visibility: visible; }

/* =========================================
   BOTTOM SHEET BASE — THÈME SOMBRE (défaut)
========================================= */
.hp-bottom-sheet {
    position: fixed;
    bottom: -100%; left: 0; right: 0;
    background: #0f1923;
    border-radius: 28px;
    z-index: 9999;
    overflow: hidden;
    box-shadow: 0 -24px 64px rgba(0,0,0,0.55), 0 -2px 8px rgba(0,0,0,0.3);
    transition: bottom 0.42s cubic-bezier(0.34, 1.4, 0.64, 1);
}
.hp-bottom-sheet.is-open { bottom: 0; }

/* =========================================
   DRAG PILL
========================================= */
.hp-bs-drag {
    width: 40px; height: 5px;
    background: rgba(255,255,255,0.10);
    border-radius: 10px;
    margin: 14px auto 0;
    position: relative; z-index: 2;
}

/* =========================================
   DÉGRADÉ DÉCORATIF EN-TÊTE
========================================= */
.hp-bs-header-deco {
    position: absolute; top: 0; left: 0; right: 0; height: 160px;
    background: linear-gradient(180deg, rgba(16,185,129,0.09) 0%, rgba(16,185,129,0.02) 60%, transparent 100%);
    pointer-events: none; z-index: 0;
}

/* =========================================
   BOUTON FERMER (desktop uniquement)
========================================= */
.hp-bs-close {
    display: none;
    position: absolute; top: 16px; right: 16px;
    width: 34px; height: 34px;
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.08);
    cursor: pointer;
    border-radius: 50%;
    align-items: center; justify-content: center;
    color: rgba(255,255,255,0.40);
    transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
    z-index: 10;
}
.hp-bs-close:hover {
    background: rgba(239,68,68,0.14);
    border-color: rgba(239,68,68,0.28);
    color: #f87171;
}

/* =========================================
   CONTENEUR INNER (padding)
========================================= */
.hp-bs-inner {
    padding: 20px 20px 32px;
    position: relative; z-index: 2;
}

/* =========================================
   EN-TÊTE
========================================= */
.hp-bs-header {
    text-align: center;
    margin-bottom: 24px;
}
.hp-bs-header-icon {
    width: 72px; height: 72px;
    background: linear-gradient(135deg, rgba(16,185,129,0.14), rgba(5,150,105,0.06));
    border: 1.5px solid rgba(16,185,129,0.28);
    border-radius: 22px;
    display: flex; align-items: center; justify-content: center;
    margin: 0 auto 14px;
    animation: bsFloat 3.5s ease-in-out infinite;
    box-shadow: 0 8px 24px rgba(16,185,129,0.12), 0 0 0 4px rgba(16,185,129,0.05);
}
.hp-bs-title {
    font-family: 'Poppins', sans-serif;
    font-size: 22px; font-weight: 800;
    color: var(--text-primary);
    margin: 0 0 5px; line-height: 1.2;
    letter-spacing: -0.3px;
}
.hp-bs-subtitle {
    font-size: 14px;
    color: var(--text-muted);
    font-weight: 500;
    margin: 0;
}

@keyframes bsFloat {
    0%, 100% { transform: translateY(0); }
    50%       { transform: translateY(-5px); }
}

/* =========================================
   BOUTONS — BASE
========================================= */
.hp-bs-buttons { display: flex; flex-direction: column; gap: 10px; }

.hp-bs-btn {
    position: relative;
    display: flex; align-items: center; gap: 14px;
    padding: 16px 14px;
    border-radius: 18px;
    text-decoration: none; color: inherit;
    border: 1.5px solid transparent;
    transition: transform 0.18s cubic-bezier(0.4,0,0.2,1),
                box-shadow 0.18s ease,
                background 0.18s ease,
                border-color 0.18s ease;
    overflow: hidden;
    cursor: pointer;
}
.hp-bs-btn:hover  { transform: translateY(-2px); }
.hp-bs-btn:active { transform: scale(0.975); }

/* =========================================
   ICÔNE WRAPPER
========================================= */
.hp-bs-icon-wrapper {
    width: 50px; height: 50px;
    border-radius: 15px;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0; color: white;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.hp-bs-btn:hover .hp-bs-icon-wrapper { transform: scale(1.06) rotate(-2deg); }
.bg-public  { background: linear-gradient(135deg, #10b981, #059669); box-shadow: 0 6px 16px rgba(16,185,129,0.28); }
.bg-premium { background: linear-gradient(135deg, #f59e0b, #d97706); box-shadow: 0 6px 16px rgba(245,158,11,0.28); }

/* =========================================
   TEXTE DES BOUTONS
========================================= */
.hp-bs-text { flex: 1; min-width: 0; }
.hp-bs-text strong {
    display: block;
    font-family: 'Poppins', sans-serif;
    font-size: 15px; font-weight: 700;
    color: var(--text-primary); margin-bottom: 2px;
    line-height: 1.3;
}
.hp-bs-text span {
    font-size: 12px;
    color: var(--text-muted);
    font-weight: 500; display: block;
}

/* =========================================
   BOUTON 1 : PUBLIC (vert) — dark
========================================= */
.hp-bs-public {
    background: rgba(16,185,129,0.05);
    border-color: rgba(16,185,129,0.16);
    box-shadow: none;
}
.hp-bs-public:hover {
    background: rgba(16,185,129,0.09);
    border-color: rgba(16,185,129,0.36);
    box-shadow: 0 8px 28px rgba(16,185,129,0.12);
}
.hp-bs-arrow {
    color: rgba(52,211,153,0.35);
    transition: transform 0.2s ease, color 0.2s ease;
    flex-shrink: 0;
}
.hp-bs-public:hover .hp-bs-arrow {
    transform: translateX(4px);
    color: #34d399;
}

/* =========================================
   BOUTON 2 : PREMIUM (or) — dark
========================================= */
.hp-bs-premium {
    background: linear-gradient(145deg, rgba(245,158,11,0.09), rgba(217,119,6,0.05));
    border-color: rgba(245,158,11,0.22);
    box-shadow: 0 4px 16px rgba(245,158,11,0.07);
}
.hp-bs-premium:hover {
    border-color: rgba(245,158,11,0.45);
    box-shadow: 0 10px 32px rgba(245,158,11,0.15);
}
.hp-bs-premium .hp-bs-text strong { color: #fbbf24; }
.hp-bs-premium .text-premium { color: rgba(251,191,36,0.60); }

/* Badge PREMIUM */
.hp-bs-badge-pro {
    background: linear-gradient(135deg, #f59e0b, #d97706);
    color: white;
    font-family: 'Poppins', sans-serif; font-weight: 800;
    font-size: 9px; letter-spacing: 1px; text-transform: uppercase;
    padding: 4px 9px; border-radius: 8px;
    box-shadow: 0 3px 10px rgba(245,158,11,0.32);
    flex-shrink: 0;
}

/* Animation shine */
.hp-bs-premium-shine {
    position: absolute; top: 0; left: -100%; width: 50%; height: 100%;
    background: linear-gradient(to right,
        rgba(255,255,255,0) 0%,
        rgba(245,158,11,0.22) 50%,
        rgba(255,255,255,0) 100%);
    transform: skewX(-20deg);
    animation: bsShine 5s infinite;
    pointer-events: none;
}
@keyframes bsShine {
    0%   { left: -100%; }
    18%  { left: 200%; }
    100% { left: 200%; }
}


/* =========================================
   THÈME CLAIR — overrides
   (même convention que mobile-menu et dropdown)
========================================= */
[data-theme="light"] .hp-bottom-sheet {
    background: #ffffff;
    box-shadow: 0 -24px 64px rgba(0,0,0,0.10), 0 -2px 8px rgba(0,0,0,0.05);
}
[data-theme="light"] .hp-bs-drag {
    background: rgba(0,0,0,0.09);
}
[data-theme="light"] .hp-bs-header-deco {
    background: linear-gradient(180deg, rgba(16,185,129,0.06) 0%, rgba(16,185,129,0.01) 60%, transparent 100%);
}
[data-theme="light"] .hp-bs-header-icon {
    background: linear-gradient(135deg, rgba(16,185,129,0.10), rgba(5,150,105,0.03));
    border-color: rgba(16,185,129,0.22);
    box-shadow: 0 8px 24px rgba(16,185,129,0.09), 0 2px 6px rgba(0,0,0,0.04);
}
[data-theme="light"] .hp-bs-title { color: var(--text-primary); }
[data-theme="light"] .hp-bs-subtitle { color: #6b7280; }

/* Clair — textes boutons */
[data-theme="light"] .hp-bs-btn .hp-bs-text strong { color: var(--text-primary); }
[data-theme="light"] .hp-bs-text span { color: #6b7280; }

/* Clair — bouton 1 PUBLIC */
[data-theme="light"] .hp-bs-public {
    background: #f6fffe;
    border-color: rgba(16,185,129,0.15);
    box-shadow: 0 2px 8px rgba(0,0,0,0.04);
}
[data-theme="light"] .hp-bs-public:hover {
    background: #ecfdf8;
    border-color: rgba(16,185,129,0.38);
    box-shadow: 0 8px 28px rgba(16,185,129,0.12);
}
[data-theme="light"] .hp-bs-arrow { color: rgba(16,185,129,0.45); }
[data-theme="light"] .hp-bs-public:hover .hp-bs-arrow { color: #10b981; }

/* Clair — bouton 2 PREMIUM */
[data-theme="light"] .hp-bs-premium {
    background: linear-gradient(145deg, #fffcf0, #fef9e7);
    border-color: rgba(245,158,11,0.22);
    box-shadow: 0 4px 16px rgba(245,158,11,0.08);
}
[data-theme="light"] .hp-bs-premium:hover {
    border-color: rgba(245,158,11,0.48);
    box-shadow: 0 10px 32px rgba(245,158,11,0.18);
}
[data-theme="light"] .hp-bs-premium .hp-bs-text strong { color: #78350f !important; }
[data-theme="light"] .hp-bs-premium .text-premium { color: #92400e !important; }
[data-theme="light"] .hp-bs-premium-shine {
    background: linear-gradient(to right,
        rgba(255,255,255,0) 0%,
        rgba(255,255,255,0.55) 50%,
        rgba(255,255,255,0) 100%);
}

/* Clair — bouton fermer */
[data-theme="light"] .hp-bs-close {
    background: rgba(0,0,0,0.05);
    border-color: rgba(0,0,0,0.07);
    color: rgba(0,0,0,0.40);
}
[data-theme="light"] .hp-bs-close:hover {
    background: rgba(239,68,68,0.08);
    border-color: rgba(239,68,68,0.20);
    color: #dc2626;
}


/* =========================================
   MODAL DESKTOP (≥ 768px)
========================================= */
@media (min-width: 768px) {
    .hp-bottom-sheet,
    .hp-bottom-sheet.is-open {
        bottom: auto;
        left: 50%;
        right: auto;
        top: 50%;
    }
    .hp-bottom-sheet {
        transform: translate(-50%, -46%) scale(0.91);
        width: calc(100% - 48px);
        max-width: 460px;
        border-radius: 28px;
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.22s ease,
                    transform 0.34s cubic-bezier(0.34, 1.3, 0.64, 1);
        box-shadow: 0 48px 120px rgba(0,0,0,0.65),
                    0 16px 40px rgba(0,0,0,0.40),
                    0 0 0 1px rgba(255,255,255,0.07);
    }
    .hp-bottom-sheet.is-open {
        transform: translate(-50%, -50%) scale(1);
        opacity: 1;
        pointer-events: auto;
    }
    .hp-bs-drag  { display: none; }
    .hp-bs-close { display: flex; }
    .hp-bs-inner { padding: 36px 28px 28px; }
    .hp-bs-header { margin-bottom: 28px; }
    .hp-bs-title  { font-size: 24px; }

    [data-theme="light"] .hp-bottom-sheet {
        box-shadow: 0 48px 120px rgba(0,0,0,0.16),
                    0 16px 40px rgba(0,0,0,0.08),
                    0 0 0 1px rgba(0,0,0,0.05);
    }
}

/* ══════════════════════════════════════════════════
   Modale « recette sans étapes » — globale
   Classes propres nk-noetapes-* pour éviter
   tout conflit avec toutes_recettes.css
══════════════════════════════════════════════════ */
.nk-noetapes-overlay {
  position: fixed; inset: 0;
  background: rgba(0,0,0,.6); backdrop-filter: blur(4px);
  z-index: 9999; display: flex; align-items: center; justify-content: center; padding: 16px;
  opacity: 0; visibility: hidden; transition: opacity .3s, visibility .3s;
}
.nk-noetapes-overlay.active { opacity: 1; visibility: visible; }
.nk-noetapes-card {
  background: rgba(3,18,10,.98); border: 1px solid rgba(251,191,36,.25); border-radius: 28px;
  padding: 32px 24px; max-width: 400px; width: 100%; text-align: center;
  transform: scale(.9); transition: transform .3s;
}
.nk-noetapes-overlay.active .nk-noetapes-card { transform: scale(1); }
[data-theme="light"] .nk-noetapes-card {
  background: rgba(255,253,235,.98); border-color: rgba(217,119,6,.2);
}
.nk-noetapes-icon {
  width: 72px; height: 72px; margin: 0 auto 20px;
  background: linear-gradient(135deg, rgba(251,191,36,.18), rgba(245,158,11,.08));
  border-radius: 50%; display: flex; align-items: center; justify-content: center;
  color: #fbbf24;
}
[data-theme="light"] .nk-noetapes-icon {
  background: linear-gradient(135deg, rgba(217,119,6,.14), rgba(245,158,11,.06));
  color: #d97706;
}
.nk-noetapes-title {
  font-family: 'Poppins', sans-serif; font-size: 18px; font-weight: 700;
  color: #fbbf24; margin-bottom: 8px;
}
[data-theme="light"] .nk-noetapes-title { color: #b45309; }
.nk-noetapes-sub {
  font-size: 14px; color: var(--text-secondary); margin-bottom: 24px; line-height: 1.6;
}
[data-theme="light"] .nk-noetapes-sub { color: rgba(10,31,18,.65); }
.nk-noetapes-sub strong { color: #fbbf24; }
[data-theme="light"] .nk-noetapes-sub strong { color: #b45309; }
.nk-noetapes-btns { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.nk-noetapes-cancel {
  padding: 12px 20px; border-radius: 12px;
  border: 1px solid rgba(255,255,255,.15); background: transparent;
  color: rgba(255,255,255,.7); font-weight: 600; cursor: pointer; transition: all .2s; font-size: 14px;
}
.nk-noetapes-cancel:hover { background: rgba(255,255,255,.08); color: #fff; }
[data-theme="light"] .nk-noetapes-cancel { border-color: rgba(10,31,18,.15); color: rgba(10,31,18,.7); }
[data-theme="light"] .nk-noetapes-cancel:hover { background: rgba(10,31,18,.08); color: #0a1f12; }
.nk-noetapes-btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 12px 24px; border-radius: 12px; border: none; text-decoration: none;
  background: linear-gradient(135deg, #fbbf24, #f59e0b); color: #1c0a00;
  font-weight: 700; cursor: pointer; transition: all .2s; font-size: 14px;
}
.nk-noetapes-btn:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(251,191,36,.4); }

/* ── Trial Banner ─────────────────────────────── */
.trial-banner {
    background: linear-gradient(90deg, var(--g1, #10b981), var(--g2, #059669));
    color: #fff;
    text-align: center;
    padding: 8px 16px;
    font-size: 0.875rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    flex-wrap: wrap;
}

.trial-banner__icon {
    flex-shrink: 0;
}

.trial-banner__link {
    color: #fff;
    text-decoration: underline;
    font-weight: 600;
    white-space: nowrap;
}

.trial-banner__link:hover {
    opacity: 0.85;
}
/* ── Bannière mode focus FMS ── */
.fms-focus-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 20px;
  background: linear-gradient(135deg, var(--g1), var(--g2));
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  position: sticky;
  top: 0;
  z-index: 50;
}

.fms-focus-banner__text {
  display: flex;
  align-items: center;
  gap: 8px;
}

.fms-focus-banner__cancel {
  display: flex;
  align-items: center;
  gap: 6px;
  color: rgba(255, 255, 255, 0.85);
  font-size: 12px;
  font-weight: 500;
  text-decoration: none;
  padding: 4px 10px;
  border: 1px solid rgba(255, 255, 255, 0.4);
  border-radius: 20px;
  transition: background 0.15s;
}

.fms-focus-banner__cancel:hover {
  background: rgba(255, 255, 255, 0.15);
  color: #fff;
}

@media (max-width: 767px) {
  body.fms-active #mob-bottom-nav [data-bn="planning"],
  body.fms-active #mob-bottom-nav [data-bn="create"] {
    display: none !important;
  }
}