/* ══════════════════════════════════════════════
   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;
        }
        .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-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 — DARK GLASS PREMIUM
        ================================================ */
        #user-menu-dropdown { position: absolute; top: calc(100% + 12px); right: 0; width: 320px; background: var(--bg-card-solid); backdrop-filter: blur(32px) saturate(200%); -webkit-backdrop-filter: blur(32px) saturate(200%); border: 1px solid rgba(52, 211, 153, 0.18); border-radius: 28px; box-shadow: 0 0 0 1px rgba(0,0,0,0.5), 0 32px 80px var(--bg-card), 0 8px 24px rgba(0,0,0,0.4), inset 0 1px 0 var(--bg-card-hover); overflow: hidden; transform-origin: top right; z-index: 50; }
        #user-menu-dropdown:not(.hidden) { animation: ddDropIn 0.3s cubic-bezier(0.34, 1.4, 0.64, 1) forwards; }
        @keyframes ddDropIn { from { opacity: 0; transform: scale(0.92) translateY(-8px); } to { opacity: 1; transform: scale(1) translateY(0); } }
        .dd-header { padding: 18px 18px 0; display: flex; align-items: center; gap: 13px; }
        .dd-avatar-wrap { position: relative; flex-shrink: 0; }
        .dd-avatar { width: 50px; height: 50px; border-radius: 15px; border: 2px solid rgba(52, 211, 153, 0.35); overflow: hidden; box-shadow: 0 4px 20px rgba(0,0,0,0.4), 0 0 0 4px rgba(52,211,153,0.06); }
        .dd-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
        .dd-online-dot { position: absolute; bottom: -2px; right: -2px; width: 13px; height: 13px; background: #22c55e; border-radius: 50%; border: 2.5px solid var(--bg-card-solid); box-shadow: 0 0 8px rgba(34,197,94,0.5); }
        .dd-userinfo { flex: 1; min-width: 0; padding-top: 2px; }
        .dd-username { font-family: 'Poppins', sans-serif; font-size: 15px; font-weight: 800; color: var(--text-primary); line-height: 1.2; margin-bottom: 6px; }
        /* Ligne grade : nom du grade seul */
        .dd-grade-row { display: flex; align-items: center; gap: 7px; margin-bottom: 6px; }
        .dd-grade-name { font-family: 'Poppins', sans-serif; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.8px; }
        .dd-badges-row { display: flex; gap: 5px; flex-wrap: wrap; }
        .dd-badge { display: inline-flex; align-items: center; gap: 3px; padding: 3px 7px; border-radius: 8px; font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.4px; font-family: 'Poppins', sans-serif; }
        .dd-badge-xp { background: var(--border); border: 1px solid rgba(52,211,153,0.18); color: var(--g1); }
        .dd-sep { margin: 14px 18px 0; height: 1px; background: linear-gradient(90deg, transparent, rgba(52,211,153,0.18), var(--bg-element), transparent); }
        .dd-section-label { padding: 10px 18px 4px; font-size: 9px; font-weight: 700; color: rgba(52,211,153,0.45); text-transform: uppercase; letter-spacing: 1.5px; font-family: 'Poppins', sans-serif; }
        .dd-items { padding: 0 8px; }
        .dd-item { display: flex; align-items: center; gap: 11px; padding: 9px 10px; border-radius: 15px; text-decoration: none; cursor: pointer; transition: all 0.16s ease; position: relative; margin-bottom: 2px; }
        .dd-item:hover { background: rgba(52,211,153,0.07); }
        .dd-item:hover .dd-item-icon-wrap { transform: scale(1.08); }
        .dd-item:hover .dd-item-arrow { opacity: 1; transform: translateX(0); }
        .dd-item-icon-wrap { width: 34px; height: 34px; border-radius: 11px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; transition: transform 0.2s ease; border: 1px solid var(--bg-element); overflow: hidden; }
        .dd-item-icon-wrap img { width: 20px; height: 20px; object-fit: contain; }
        .dd-item-toque .dd-item-icon-wrap { background: var(--border); } .dd-item-menu .dd-item-icon-wrap { background: rgba(99,102,241,0.14); } .dd-item-creations .dd-item-icon-wrap { background: rgba(251,146,60,0.12); } .dd-item-pepites .dd-item-icon-wrap { background: rgba(244,63,94,0.12); } .dd-item-brigade .dd-item-icon-wrap { background: rgba(59,130,246,0.12); } .dd-item-notifs .dd-item-icon-wrap { background: rgba(234,179,8,0.1); }
        .dd-item-content { flex: 1; min-width: 0; }
        .dd-item-title { font-family: 'Poppins', sans-serif; font-size: 12.5px; font-weight: 700; color: var(--text-primary); line-height: 1.2; }
        .dd-item-sub { font-size: 10px; font-weight: 500; color: var(--text-muted); margin-top: 1px; font-family: 'DM Sans', sans-serif; }
        .dd-item-arrow { font-size: 15px; opacity: 0; transform: translateX(-5px); transition: all 0.18s ease; flex-shrink: 0; color: var(--text-muted); }
        .dd-notif-badge { background: #ef4444; border: 1.5px solid var(--bg-card); color: var(--text-primary); border-radius: 999px; font-size: 9px; font-weight: 700; padding: 1px 6px; font-family: 'Poppins', sans-serif; animation: ddPulse 2s infinite; }
        @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 8px; padding: 8px; background: var(--bg-card-subtle); border: 1px solid var(--bg-element); border-radius: 18px; }
        .dd-footer-links { display: flex; gap: 4px; margin-bottom: 6px; }
        .dd-footer-link { flex: 1; display: flex; align-items: center; gap: 7px; padding: 8px 10px; border-radius: 12px; text-decoration: none; font-size: 11px; font-weight: 600; color: var(--text-muted); transition: all 0.18s ease; cursor: pointer; font-family: 'DM Sans', sans-serif; }
        .dd-footer-link:hover { background: var(--bg-element); color: var(--text-secondary); }
        .dd-footer-link img { width: 14px; height: 14px; object-fit: contain; opacity: 0.5; }
        .dd-footer-link:hover img { opacity: 0.8; }
        .dd-logout-btn { width: 100%; display: flex; align-items: center; justify-content: center; gap: 7px; padding: 10px; background: rgba(239,68,68,0.07); border: 1px solid rgba(239,68,68,0.14); border-radius: 13px; font-family: 'Poppins', sans-serif; font-size: 11px; font-weight: 700; color: rgba(239,68,68,0.7); letter-spacing: 0.5px; text-transform: uppercase; cursor: pointer; transition: all 0.18s ease; }
        .dd-logout-btn:hover { background: rgba(239,68,68,0.15); border-color: rgba(239,68,68,0.3); color: var(--red); transform: translateY(-1px); }
        .dd-logout-btn img { width: 14px; height: 14px; object-fit: contain; opacity: 0.6; }
        .dd-logout-btn:hover img { opacity: 1; }

        /* 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; }

        /* ================================================
           MENU MOBILE
           z-index: 95 !important — au-dessus de la barre
           de recherche mobile (z-[90] = 90) mais sous la
           nav (z-[100] = 100) pour garder le hamburger
           accessible.
        ================================================ */
        #mobile-menu { background: var(--bg-card-solid) !important; backdrop-filter: blur(32px) saturate(180%); -webkit-backdrop-filter: blur(32px) saturate(180%); overflow-x: hidden !important; z-index: 95 !important; }
        #mobile-menu * { max-width: 100%; }
        .mob-inner { position: relative; z-index: 1; overflow-x: hidden; }
        .mob-user-card { display: flex; align-items: center; gap: 13px; background: var(--bg-card-hover); border: 1px solid rgba(52,211,153,0.14); border-radius: 22px; padding: 16px; margin-bottom: 10px; 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: 52px; height: 52px; border-radius: 16px; overflow: hidden; border: 2px solid var(--border-focus); box-shadow: 0 4px 20px rgba(16,185,129,0.15); }
        .mob-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
        .mob-online { position: absolute; bottom: -1px; right: -1px; width: 12px; height: 12px; background: #22c55e; border-radius: 50%; border: 2px solid var(--bg-card-solid); box-shadow: 0 0 6px rgba(34,197,94,0.5); }
        .mob-uname { font-family:'Poppins',sans-serif; font-size:16px; font-weight:800; color:var(--text-primary); line-height:1.2; }
        .mob-badges { display:flex; gap:5px; margin-top:5px; flex-wrap:wrap; }
        .mob-badge { font-family:'Poppins',sans-serif; font-size:8px; font-weight:700; padding:3px 7px; border-radius:7px; 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.2); color:var(--amber); }
        .mob-badge-xp { background:var(--border); border:1px solid rgba(52,211,153,0.18); color:var(--g1); }
        .mob-mod-btn { display: flex; align-items: center; gap: 11px; background: rgba(245,158,11,0.08); border: 1px solid rgba(245,158,11,0.18); border-radius: 14px; padding: 10px 14px; margin-bottom: 8px; text-decoration: none; position: relative; overflow: hidden; }
        .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: 32px; height: 32px; border-radius: 10px; flex-shrink: 0; background: rgba(245,158,11,0.12); border: 1px solid rgba(245,158,11,0.18); display: flex; align-items: center; justify-content: center; }
        .mob-mod-label { font-family:'Poppins',sans-serif; font-size:11px; font-weight:700; color:var(--amber); }
        .mob-mod-sub { font-size:9px; color:rgba(245,158,11,0.45); 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; }
        .mob-create-btn { display: flex; align-items: center; justify-content: center; gap: 8px; background: linear-gradient(135deg,#f59e0b,#d97706); border-radius: 14px; padding: 12px; font-family:'Poppins',sans-serif; font-size:12.5px; font-weight:800; color:var(--text-primary); margin-bottom: 8px; text-decoration: none; box-shadow: 0 4px 16px rgba(245,158,11,0.25), inset 0 1px 0 var(--text-faint); }
        .mob-create-plus { width: 20px; height: 20px; background: var(--text-faint); border-radius: 6px; display: flex; align-items: center; justify-content: center; font-size: 14px; font-weight: 900; flex-shrink: 0; }
        .mob-sep { height: 1px; margin: 10px 4px; background: linear-gradient(90deg, transparent, var(--border), var(--bg-card-hover), transparent); }
        .mob-section-label { font-family:'Poppins',sans-serif; font-size:8px; font-weight:700; color:var(--border-focus); text-transform:uppercase; letter-spacing:2px; padding:8px 4px 6px; }
        .mob-item { display: flex; align-items: center; gap: 11px; padding: 10px; border-radius: 14px; text-decoration: none; margin-bottom: 2px; transition: background 0.15s ease; }
        .mob-item:hover, .mob-item:active { background: rgba(52,211,153,0.06); }
        .mob-item-icon { width: 34px; height: 34px; border-radius: 11px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; border: 1px solid var(--bg-element); }
        .mob-item-icon img { width: 18px; height: 18px; object-fit: contain; }
        .mic-toque { background: var(--border); } .mic-menu { background: rgba(99,102,241,0.14); } .mic-creations { background: rgba(251,146,60,0.12); } .mic-pepites { background: rgba(244,63,94,0.12); } .mic-brigade { background: rgba(59,130,246,0.12); } .mic-notifs { background: rgba(234,179,8,0.10); } .mic-all { background: rgba(139,92,246,0.12); }
        .mob-item-text { flex: 1; min-width: 0; }
        .mob-item-title { font-family:'Poppins',sans-serif; font-size:12.5px; font-weight:700; color:var(--text-primary); line-height:1.2; }
        .mob-item-sub { font-size:9.5px; color:var(--text-faint); margin-top:1px; }
        .mob-item-arrow { font-size:15px; color:var(--text-faint); flex-shrink:0; }
        .mob-notif-badge { background:#ef4444; border:1.5px solid var(--bg-card-solid); color:var(--text-primary); border-radius:999px; font-size:9px; font-weight:700; padding:1px 6px; font-family:'Poppins',sans-serif; animation: ddPulse 2s infinite; }
        .mob-footer { margin-top:8px; padding:10px; background:var(--bg-card-subtle); border:1px solid var(--bg-element); border-radius:18px; }
        .mob-footer-links { display:flex; gap:4px; margin-bottom:6px; }
        .mob-footer-link { flex:1; display:flex; align-items:center; justify-content:center; gap:6px; padding:8px 6px; border-radius:11px; text-decoration:none; font-size:10.5px; font-weight:600; color:var(--text-muted); transition:all 0.15s; font-family:'DM Sans',sans-serif; }
        .mob-footer-link:hover { background:var(--bg-element); color:var(--text-secondary); }
        .mob-footer-link img { width:13px; height:13px; object-fit:contain; opacity:0.4; }
        .mob-logout { width:100%; display:flex; align-items:center; justify-content:center; gap:7px; padding:10px; background:rgba(239,68,68,0.07); border:1px solid rgba(239,68,68,0.13); border-radius:13px; font-family:'Poppins',sans-serif; font-size:10.5px; font-weight:700; color:rgba(239,68,68,0.65); letter-spacing:0.5px; text-transform:uppercase; cursor:pointer; transition:all 0.18s; }
        .mob-logout:hover { background:rgba(239,68,68,0.14); border-color:rgba(239,68,68,0.28); color:var(--red); }
        .mob-logout img { width:13px; height:13px; object-fit:contain; opacity:0.5; }

        /* ================================================
           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 rgba(52, 211, 153, 0.3); border-radius: 999px; padding: 12px 24px; display: flex; align-items: center; gap: 12px; box-shadow: 0 10px 40px rgba(0,0,0,0.5), 0 0 0 1px var(--bg-input-dark); 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); }
        .hp-toast.toast-error { border-color: rgba(239, 68, 68, 0.4); }
        .hp-toast-icon { font-size: 18px; flex-shrink: 0; }
        .hp-toast-msg { font-family: 'Poppins', sans-serif; font-size: 13px; font-weight: 600; color: var(--text-primary); margin: 0; padding-right: 8px; }
        .hp-toast-progress { position: absolute; bottom: 0; left: 0; height: 3px; background: var(--g1); width: 100%; animation: toastProgress 10s linear forwards; }
        .hp-toast.toast-error .hp-toast-progress { background: #ef4444; }
        .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); } }

        /* ══════════════════════════════════════════════════════════
           FOOTER — Night Kitchen Premium
           Dark par défaut, même en light mode.
        ══════════════════════════════════════════════════════════ */
        .site-footer {
            background: #020c05;
            border-top: none;
            position: relative; overflow: hidden;
        }
        .site-footer::before {
            content: ''; position: absolute; inset: 0;
            background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 512 512' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
            background-size: 200px; opacity: .025; pointer-events: none; z-index: 0;
        }
        .site-footer::after {
            content: ''; position: absolute; top: -200px; left: 50%; transform: translateX(-50%);
            width: 900px; height: 450px;
            background: radial-gradient(ellipse, rgba(52,211,153,.065) 0%, transparent 65%);
            pointer-events: none; z-index: 0;
        }
        .ft-topline {
            height: 2px;
            background: linear-gradient(90deg, transparent 0%, rgba(16,185,129,.35) 15%, rgba(52,211,153,.85) 35%, #34d399 50%, rgba(52,211,153,.85) 65%, rgba(16,185,129,.35) 85%, transparent 100%);
            position: relative; z-index: 1;
        }
        .ft-topline::after {
            content: ''; position: absolute;
            top: -3px; left: 50%; transform: translateX(-50%);
            width: 160px; height: 8px;
            background: rgba(52,211,153,.3); filter: blur(12px); border-radius: 999px;
        }
        /* ── HERO BAND ───────────────────────────── */
        .ft-hero-band {
            position: relative; z-index: 1;
            padding: 56px 32px 52px;
            border-bottom: 1px solid rgba(52,211,153,.07);
        }
        .ft-hero-inner {
            max-width: 1280px; margin: 0 auto;
            display: flex; align-items: center; justify-content: space-between;
            gap: 48px; flex-wrap: wrap;
        }
        .ft-hero-left { flex: 1; min-width: 280px; }
        .ft-hero-badge {
            display: inline-flex; align-items: center; gap: 8px; padding: 5px 14px;
            background: rgba(52,211,153,.07); border: 1px solid rgba(52,211,153,.18);
            border-radius: 999px; margin-bottom: 18px;
            font-family: 'Poppins', sans-serif; font-size: 11px; font-weight: 700;
            color: rgba(52,211,153,.8); text-transform: uppercase; letter-spacing: 2px;
        }
        .ft-hero-dot {
            width: 6px; height: 6px; border-radius: 50%; background: #34d399;
            box-shadow: 0 0 8px rgba(52,211,153,.8); flex-shrink: 0;
            animation: ftHeroDot 2s ease-in-out infinite;
        }
        @keyframes ftHeroDot {
            0%,100% { opacity: 1; transform: scale(1); }
            50%      { opacity: .4; transform: scale(.7); }
        }
        .ft-hero-title {
            font-family: 'Poppins', sans-serif;
            font-size: clamp(28px, 3.5vw, 46px); font-weight: 900;
            color: #fff; line-height: 1.1; letter-spacing: -1px; margin-bottom: 14px;
        }
        .ft-hero-title span { color: #34d399; }
        .ft-hero-sub {
            font-family: 'DM Sans', sans-serif; font-size: 15px;
            color: rgba(255,255,255,.45); line-height: 1.65; max-width: 440px;
        }
        .ft-hero-right {
            display: flex; flex-direction: column; align-items: flex-start; gap: 24px; flex-shrink: 0;
        }
        .ft-hero-btn {
            display: inline-flex; align-items: center; gap: 10px; padding: 14px 28px;
            background: linear-gradient(135deg, #f59e0b, #d97706); border-radius: 16px;
            font-family: 'Poppins', sans-serif; font-size: 14px; font-weight: 800; color: #fff;
            text-decoration: none; white-space: nowrap;
            box-shadow: 0 4px 24px rgba(245,158,11,.35), inset 0 1px 0 rgba(255,255,255,.2);
            transition: all .22s;
        }
        .ft-hero-btn:hover { transform: translateY(-3px); box-shadow: 0 8px 36px rgba(245,158,11,.5), inset 0 1px 0 rgba(255,255,255,.2); color: #fff; text-decoration: none; }
        .ft-hero-btn-plus {
            width: 22px; height: 22px; background: rgba(255,255,255,.25); border-radius: 8px;
            display: flex; align-items: center; justify-content: center;
            font-size: 16px; font-weight: 900; flex-shrink: 0;
        }
        .ft-hero-stats { display: flex; align-items: center; gap: 22px; }
        .ft-hero-stat { text-align: center; }
        .ft-hero-stat-num { font-family: 'Poppins', sans-serif; font-size: 20px; font-weight: 900; color: #fff; line-height: 1.1; }
        .ft-hero-stat-lbl { font-size: 9.5px; color: rgba(255,255,255,.38); font-family: 'Poppins', sans-serif; font-weight: 700; text-transform: uppercase; letter-spacing: 1.2px; margin-top: 3px; }
        .ft-hero-stat-sep { width: 1px; height: 36px; background: rgba(255,255,255,.09); }
        /* ── FOOTER BODY ─────────────────────────── */
        .ft-body { max-width: 1280px; margin: 0 auto; padding: 44px 32px 32px; position: relative; z-index: 1; }
        .ft-main { display: grid; grid-template-columns: 1fr auto; gap: 48px; align-items: start; margin-bottom: 36px; }
        .ft-brand { display: flex; flex-direction: column; gap: 14px; }
        .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; }
        .ft-tagline { font-size: 13px; color: rgba(255,255,255,.42); line-height: 1.65; max-width: 230px; font-weight: 500; }
        .ft-tagline em { font-style: normal; color: rgba(52,211,153,.55); }
        .ft-stats { display: flex; gap: 7px; flex-wrap: wrap; }
        .ft-stat {
            display: flex; align-items: center; gap: 6px;
            background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.07);
            border-radius: 999px; padding: 5px 12px;
            font-size: 11px; font-weight: 600; color: rgba(255,255,255,.42); font-family: 'Poppins', sans-serif;
        }
        .ft-stat-dot {
            width: 5px; height: 5px; border-radius: 50%; background: #34d399;
            box-shadow: 0 0 6px rgba(52,211,153,.55);
            animation: ftStatPulse 2.5s ease-in-out infinite; flex-shrink: 0;
        }
        .ft-stat-dot-amber { background: #fbbf24; box-shadow: 0 0 6px rgba(251,191,36,.5); animation-delay: .6s; }
        @keyframes ftStatPulse {
            0%, 100% { opacity: 1; transform: scale(1); }
            50%       { opacity: .55; transform: scale(.75); }
        }
        .ft-nav { display: flex; flex-direction: column; gap: 3px; align-items: flex-start; min-width: 180px; }
        .ft-nav-label {
            font-family: 'Poppins', sans-serif; font-size: 9px; font-weight: 700;
            color: rgba(52,211,153,.45); text-transform: uppercase; letter-spacing: 2px; margin-bottom: 6px;
        }
        .ft-nav-links-mobile { display: flex; flex-direction: column; gap: 2px; width: 100%; }
        .ft-nav-link {
            display: flex; align-items: center; gap: 9px; padding: 7px 12px; border-radius: 12px;
            text-decoration: none; font-family: 'Poppins', sans-serif; font-size: 12px; font-weight: 600;
            color: rgba(255,255,255,.42); transition: all .18s;
        }
        .ft-nav-link:hover { background: rgba(52,211,153,.07); color: rgba(255,255,255,.85); transform: translateX(4px); text-decoration: none; }
        .ft-nav-link-dot {
            width: 4px; height: 4px; border-radius: 50%; background: rgba(52,211,153,.25);
            flex-shrink: 0; transition: background .18s, box-shadow .18s;
        }
        .ft-nav-link:hover .ft-nav-link-dot { background: #34d399; box-shadow: 0 0 6px rgba(52,211,153,.6); }
        .ft-cta { display: none !important; }
        .ft-sep {
            height: 1px;
            background: linear-gradient(90deg, transparent, rgba(52,211,153,.1), rgba(255,255,255,.06), rgba(52,211,153,.1), transparent);
            margin-bottom: 24px;
        }
        .ft-bottom { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
        .ft-copy { display: flex; align-items: center; gap: 7px; font-size: 11.5px; color: rgba(255,255,255,.25); font-weight: 500; }
        .ft-copy-heart { color: #ef4444; animation: ftHeartbeat 1.8s ease-in-out infinite; display: inline-block; }
        @keyframes ftHeartbeat {
            0%, 100% { transform: scale(1); } 15% { transform: scale(1.3); }
            30%       { transform: scale(1); } 45% { transform: scale(1.15); } 60% { transform: scale(1); }
        }
        .ft-copy-butter {
            display: inline-flex; align-items: center; gap: 3px;
            background: rgba(245,158,11,.06); border: 1px solid rgba(245,158,11,.12);
            border-radius: 999px; padding: 2px 9px; font-size: 10px;
            color: rgba(245,158,11,.5); font-weight: 700; font-family: 'Poppins', sans-serif;
        }
        .ft-legal { display: flex; align-items: center; gap: 4px; }
        .ft-legal-link {
            font-family: 'Poppins', sans-serif; font-size: 10px; font-weight: 700;
            color: rgba(255,255,255,.25); text-decoration: none; text-transform: uppercase; letter-spacing: .8px;
            padding: 4px 10px; border-radius: 8px; transition: all .18s; border: 1px solid transparent;
        }
        .ft-legal-link:hover { color: rgba(255,255,255,.65); background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.08); text-decoration: none; }
        .ft-legal-dot { width: 3px; height: 3px; border-radius: 50%; background: rgba(255,255,255,.15); flex-shrink: 0; }
        @media (min-width: 768px) and (max-width: 1023px) {
            .ft-main { grid-template-columns: 1fr; gap: 28px; }
        }
        @media (max-width: 767px) {
            .ft-hero-band { padding: 40px 18px 36px; }
            .ft-hero-inner { flex-direction: column; gap: 32px; }
            .ft-hero-title { font-size: 30px; }
            .ft-hero-right { align-items: stretch; width: 100%; }
            .ft-hero-btn { justify-content: center; }
            .ft-hero-stats { justify-content: space-around; width: 100%; }
            .ft-body { padding: 32px 18px 24px; }
            .ft-main { grid-template-columns: 1fr; gap: 28px; }
            .ft-nav { width: 100%; }
            .ft-nav-links-mobile { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; }
            .ft-bottom { flex-direction: column; align-items: center; text-align: center; gap: 12px; }
            .ft-legal { flex-wrap: wrap; justify-content: center; }
            .ft-copy { flex-wrap: wrap; justify-content: center; }
            .site-footer { padding-bottom: calc(56px + env(safe-area-inset-bottom, 0px)); }
        }

/* ── Footer dark par défaut ─────────────────── */
.site-footer { background: #020c05; }

/* ── LIGHT MODE — footer clair ───────────── */
[data-theme="light"] .site-footer { background: #f2faf5; border-top: 1px solid rgba(52,211,153,.15); }
[data-theme="light"] .site-footer::after { background: radial-gradient(ellipse, rgba(52,211,153,.04) 0%, transparent 65%); }
[data-theme="light"] .ft-hero-band { border-bottom-color: rgba(52,211,153,.12); }
[data-theme="light"] .ft-hero-badge { background: rgba(52,211,153,.08); border-color: rgba(52,211,153,.22); color: #059669; }
[data-theme="light"] .ft-hero-dot { background: #059669; box-shadow: 0 0 8px rgba(5,150,105,.6); }
[data-theme="light"] .ft-hero-title { color: #0a1f12; }
[data-theme="light"] .ft-hero-title span { color: #059669; }
[data-theme="light"] .ft-hero-sub { color: rgba(10,31,18,.55); }
[data-theme="light"] .ft-hero-stat-num { color: #0a1f12; }
[data-theme="light"] .ft-hero-stat-lbl { color: rgba(10,31,18,.4); }
[data-theme="light"] .ft-hero-stat-sep { background: rgba(10,31,18,.12); }
[data-theme="light"] .ft-logo-text { color: #0a1f12; }
[data-theme="light"] .ft-logo-text span { color: #059669; }
[data-theme="light"] .ft-tagline { color: rgba(10,31,18,.55); }
[data-theme="light"] .ft-tagline em { color: rgba(5,150,105,.7); }
[data-theme="light"] .ft-stat { background: rgba(255,255,255,.8); border-color: rgba(10,31,18,.1); color: rgba(10,31,18,.55); }
[data-theme="light"] .ft-stat-dot { background: #059669; box-shadow: 0 0 6px rgba(5,150,105,.5); }
[data-theme="light"] .ft-nav-label { color: #059669; }
[data-theme="light"] .ft-nav-link { color: rgba(10,31,18,.55); }
[data-theme="light"] .ft-nav-link:hover { background: rgba(52,211,153,.07); color: #0a1f12; }
[data-theme="light"] .ft-nav-link-dot { background: rgba(5,150,105,.3); }
[data-theme="light"] .ft-nav-link:hover .ft-nav-link-dot { background: #059669; }
[data-theme="light"] .ft-sep { background: linear-gradient(90deg, transparent, rgba(10,31,18,.1), transparent); }
[data-theme="light"] .ft-copy { color: rgba(10,31,18,.5); }
[data-theme="light"] .ft-copy-heart { color: #e11d48; }
[data-theme="light"] .ft-copy-butter { background: rgba(180,83,9,.08); border-color: rgba(180,83,9,.2); color: #92400e; }
[data-theme="light"] .ft-legal-link { color: rgba(10,31,18,.45); }
[data-theme="light"] .ft-legal-link:hover { color: #0a1f12; background: rgba(10,31,18,.05); border-color: rgba(10,31,18,.1); }
[data-theme="light"] .ft-legal-dot { background: rgba(10,31,18,.18); }

/* ════════════════════════════════════════════════════
   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 (DESIGN PREMIUM & THEMES)
========================================= */

/* L'Overlay avec Glassmorphism */
.hp-bottom-sheet-overlay {
    position: fixed; inset: 0;
    background: rgba(0, 0, 0, 0.4);
    backdrop-filter: blur(8px); /* Effet verre dépoli */
    -webkit-backdrop-filter: blur(8px);
    z-index: 9998;
    opacity: 0; visibility: hidden;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
.hp-bottom-sheet-overlay.is-visible { opacity: 1; visibility: visible; }

/* Le Menu (Base - Mode Clair) */
.hp-bottom-sheet {
    position: fixed; bottom: -100%; left: 0; right: 0;
    background: #ffffff;
    border-radius: 32px 32px 0 0;
    padding: 24px 20px 32px 20px;
    z-index: 9999;
    box-shadow: 0 -10px 40px rgba(0,0,0,0.08);
    transition: bottom 0.4s cubic-bezier(0.34, 1.5, 0.64, 1); /* Effet ressort naturel */
}
.hp-bottom-sheet.is-open { bottom: 0; }

/* Drag Pill (La petite barre en haut) */
.hp-bs-drag {
    width: 48px; height: 6px;
    background: #e5e7eb;
    border-radius: 10px;
    margin: 0 auto 24px auto;
}

/* En-tête du menu */
.hp-bs-header { text-align: center; margin-bottom: 28px; }
.hp-bs-header-icon { font-size: 28px; margin-bottom: 8px; animation: float 3s ease-in-out infinite; }
.hp-bs-title { font-family: 'Poppins', sans-serif; font-size: 22px; font-weight: 800; color: #111827; margin-bottom: 4px; }
.hp-bs-subtitle { font-size: 14px; color: #6b7280; font-weight: 500; }

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

/* Base des boutons */
.hp-bs-btn {
    position: relative;
    display: flex; align-items: center; gap: 16px;
    padding: 16px; border-radius: 20px;
    text-decoration: none; color: inherit;
    margin-bottom: 16px;
    transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.2s;
    overflow: hidden;
}
.hp-bs-btn:active { transform: scale(0.96); }

/* Icônes dans les boutons */
.hp-bs-icon-wrapper {
    width: 48px; height: 48px; border-radius: 16px;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0; color: white;
}
.bg-public { background: linear-gradient(135deg, #10b981, #059669); box-shadow: 0 8px 16px rgba(16,185,129,0.2); }
.bg-premium { background: linear-gradient(135deg, #f59e0b, #d97706); box-shadow: 0 8px 16px rgba(245,158,11,0.2); }

/* Textes des boutons */
.hp-bs-text { flex: 1; }
.hp-bs-text strong { display: block; font-family: 'Poppins', sans-serif; font-size: 16px; font-weight: 700; color: #111827; margin-bottom: 2px; }
.hp-bs-text span { font-size: 13px; color: #6b7280; font-weight: 500; }

/* --- STYLE BOUTON 1 : PUBLIC --- */
.hp-bs-public {
    background: #f9fafb;
    border: 1px solid #f3f4f6;
}
.hp-bs-arrow { color: #9ca3af; transition: transform 0.2s; }
.hp-bs-public:hover .hp-bs-arrow { transform: translateX(4px); color: #10b981; }

/* --- STYLE BOUTON 2 : PREMIUM (LE WAOUH) --- */
.hp-bs-premium {
    background: linear-gradient(145deg, #fffbeb, #fef3c7);
    border: 1px solid rgba(245, 158, 11, 0.3);
    box-shadow: 0 10px 25px rgba(245, 158, 11, 0.1);
}
.hp-bs-premium .hp-bs-text strong { color: #92400e; }
.hp-bs-premium .text-premium { color: #b45309; }

/* Le badge PRO */
.hp-bs-badge-pro {
    background: linear-gradient(135deg, #f59e0b, #d97706);
    color: white; font-family: 'Poppins', sans-serif; font-weight: 800;
    font-size: 10px; letter-spacing: 0.5px;
    padding: 4px 10px; border-radius: 8px;
    box-shadow: 0 4px 10px rgba(245, 158, 11, 0.3);
}

/* L'animation du reflet brillant (Shine) sur le bouton Premium */
.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(255,255,255,0.8) 50%, rgba(255,255,255,0) 100%);
    transform: skewX(-20deg);
    animation: shineEffect 4s infinite;
}
@keyframes shineEffect {
    0% { left: -100%; }
    20% { left: 200%; }
    100% { left: 200%; }
}


/* =========================================
   INTEGRATION MODE SOMBRE (NIGHT KITCHEN)
========================================= */
[data-theme="dark"] .hp-bottom-sheet {
    background: #111827;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    box-shadow: 0 -10px 40px rgba(0,0,0,0.5);
}
[data-theme="dark"] .hp-bs-drag { background: #374151; }

/* Forcer le contraste des textes en mode sombre */
[data-theme="dark"] .hp-bs-title,
[data-theme="dark"] .hp-bs-btn .hp-bs-text strong { color: #f9fafb !important; }

[data-theme="dark"] .hp-bs-subtitle,
[data-theme="dark"] .hp-bs-public .hp-bs-text span { color: #9ca3af !important; }

/* Bouton Public Dark */
[data-theme="dark"] .hp-bs-public {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.05);
}
[data-theme="dark"] .hp-bs-public:active { background: rgba(255, 255, 255, 0.06); }

/* Bouton Premium Dark */
[data-theme="dark"] .hp-bs-premium {
    background: linear-gradient(145deg, rgba(245, 158, 11, 0.1), rgba(217, 119, 6, 0.05));
    border: 1px solid rgba(245, 158, 11, 0.3);
}
[data-theme="dark"] .hp-bs-premium .hp-bs-text strong { color: #fbbf24 !important; } 
[data-theme="dark"] .hp-bs-premium .text-premium { color: rgba(251, 191, 36, 0.7) !important; }
[data-theme="dark"] .hp-bs-premium-shine {
    background: linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(245,158,11,0.2) 50%, rgba(255,255,255,0) 100%);
}