/* ==================== BenzoHelp App-Specific Styles ==================== */
/* Beer CSS handles: cards, buttons, forms, toggles/switches, navigation, */
/* grids, typography, badges, chips, tables, dialogs, toasts, tabs         */

/* Self-hosted Fraunces (display serif, weight 600). Latin range only —
   covers all French diacritics and Œ; no latin-ext needed for the core
   audience. Lighter/heavier weights are synthesised by the UA. */
@font-face {
    font-family: 'Fraunces';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url('../vendor/fonts/fraunces-600-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: 'Caveat';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('../vendor/fonts/caveat-700-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: 'Caveat';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('../vendor/fonts/caveat-700-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

[hidden] { display: none !important; }

/* ==================== Theme & Colors ==================== */
:root {
    /* Mood colors */
    --mood-1: #c62828; --mood-2: #d84315; --mood-3: #ef6c00;
    --mood-4: #f9a825; --mood-5: #fdd835; --mood-6: #c0ca33;
    --mood-7: #7cb342; --mood-8: #43a047; --mood-9: #2e7d32; --mood-10: #1b5e20;

    /* Severity colors */
    --sev-mild: #a5d6a7; --sev-moderate: #fff176; --sev-significant: #ffb74d; --sev-severe: #ef5350;

    /* App-specific — warm forest green theme matching landing page */
    --primary: #2d6a4f;
    /* RGB channels of --primary, consumed by rgba(var(--primary-rgb), α) in
       ~10 backgrounds/shadows. Was never defined → those rgba() were invalid
       and silently dropped (transparent fills). */
    --primary-rgb: 45, 106, 79;
    --primary-fg: #ffffff;
    --primary-light: #d8f3dc;
    --destructive: #c62828;
    --warning: #f57f17;
    --success: #2e7d32;
    --muted-fg: #5a7a6a;
    --text: #1b4332;
    --text-secondary: #52796f;
    --card: #ffffff;
    --card-fg: #1b4332;
    --bg: #f0f9f4;
    --border: #b7e4c7;
    --input: #b7e4c7;
    --accent: #d8f3dc;
    --accent-fg: #1b4332;
    --surface-variant: #eaf5ee;
    --shadow: 0 1px 3px rgba(0,50,30,0.06), 0 1px 2px rgba(0,50,30,0.04);
    --shadow-md: 0 4px 6px -1px rgba(0,50,30,0.08), 0 2px 4px -2px rgba(0,50,30,0.04);
    --shadow-lg: 0 10px 15px -3px rgba(0,50,30,0.1), 0 4px 6px -4px rgba(0,50,30,0.05);
    --radius: 0.75rem;
    --nav-height: 80px;
    --topbar-height: 64px;
    /* Visual extent of the topbar including the device status bar — used
       by every "sit below the topbar" offset (sticky tops, body padding,
       sidebar pinning). On a browser without a notch this collapses to
       --topbar-height; in a TWA / iOS standalone, the status bar inset
       is added so content stops being hidden under the system UI. */
    --topbar-height-safe: calc(var(--topbar-height) + env(safe-area-inset-top, 0px));
    --wip-height: 0px;
    /* Aliases — historical naturals/landing CSS uses --fg / --surface; keep
       them in sync with the theme system so dark mode reads them correctly. */
    --fg: var(--text);
    --surface: var(--card);
    --ff-display: 'Fraunces', Georgia, serif;
    --ff-body: system-ui, -apple-system, 'Segoe UI', sans-serif;
}

[data-theme="dark"] {
    --fg: var(--text);
    --surface: var(--card);
}

[data-theme="dark"] {
    --primary: #95d5b2;
    --primary-rgb: 149, 213, 178;
    --primary-fg: #081c15;
    --primary-light: rgba(45,106,79,0.2);
    --destructive: #ef5350;
    --muted-fg: #7a947a;
    --text: #d8f3dc;
    --text-secondary: #95d5b2;
    --card: #1b2e1b;
    --card-fg: #d8f3dc;
    --bg: #0b1f0b;
    --border: rgba(45,106,79,0.3);
    --input: rgba(45,106,79,0.35);
    --accent: rgba(45,106,79,0.2);
    --accent-fg: #b7e4c7;
    --surface-variant: #1b2e1b;
    --shadow: 0 1px 3px rgba(0,0,0,0.3);
    --shadow-md: 0 4px 6px -1px rgba(0,0,0,0.4);
    --shadow-lg: 0 10px 15px -3px rgba(0,0,0,0.5);
}

/* Sync data-theme="dark" on <html> to Beer CSS dark mode on <body> */
html[data-theme="dark"] body {
    color-scheme: dark;
}

/* Lucide SVG icons — inherit currentColor + size from parent like Material
   Symbols did, so we don't have to revisit every existing icon styling. */
i[data-lucide],
i[data-lucide] svg,
.lucide {
    width: 1em;
    height: 1em;
    display: inline-block;
    vertical-align: -0.125em;
    color: inherit;
    stroke: currentColor;
    fill: none;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}
/* When Lucide replaces <i data-lucide>, it injects an <svg> as the only child.
   Keep the wrapper sized correctly. */
i[data-lucide] {
    line-height: 1;
}
/* Filled-star variant for the favorite button on breathing cards */
i[data-lucide][fill="currentColor"] svg,
i[data-lucide][fill="currentColor"] {
    fill: currentColor;
}

/* ==================== Accessibility ==================== */
.skip-link {
    position: absolute;
    top: -100%;
    left: 16px;
    z-index: 9999;
    padding: 8px 16px;
    background: var(--primary);
    color: var(--primary-fg);
    border-radius: 0 0 8px 8px;
    font-size: 14px;
    text-decoration: none;
}
.skip-link:focus {
    top: 0;
}

*:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
}

/* Ensure sufficient contrast for dark theme muted text */
[data-theme="dark"] .small-text,
[data-theme="dark"] .resource-desc { color: #9ab89a; }

/* ==================== Native app feel (TWA) ==================== */
/* Remove gray flash on every tap — biggest single improvement for TWA */
html {
    -webkit-tap-highlight-color: transparent;
}

/* Disable pull-to-refresh and edge overscroll only when installed (TWA / PWA
   home-screen). Regular browser users keep the native pull-to-refresh. */
@media (display-mode: standalone) {
    body { overscroll-behavior: none; }
}

/* Remove 300ms click delay and accidental text selection on interactive elements */
button, [role="button"], .nav-item, [data-nav], label, summary,
.btn, .chip, .card-action, .bottom-nav-drawer-item {
    touch-action: manipulation;
    -webkit-user-select: none;
    user-select: none;
}

/* ==================== Layout & Body ==================== */
body {
    padding-top: var(--wip-height);
    padding-bottom: calc(var(--nav-height) + 16px + env(safe-area-inset-bottom));
    background: var(--bg);
    color: var(--text);
    overflow-x: hidden;
}

/* Bottom nav stays pinned to the viewport bottom — Beer CSS sometimes
   ships this as sticky which fails inside scrolling containers. Force
   fixed + safe-area padding for iPhone home indicator. */
body.benzo-ready > nav.bottom {
    position: fixed !important;
    bottom: 0; left: 0; right: 0;
    z-index: 100;
    padding-bottom: env(safe-area-inset-bottom);
    height: calc(var(--nav-height) + env(safe-area-inset-bottom));
}

/* Reserve space at the bottom when the cookie banner is visible so its fixed
   bar doesn't cover the landing CTAs or the bottom-nav on mobile. */
body.has-cookie-banner {
    padding-bottom: 140px;
}
@media (min-width: 768px) {
    body.has-cookie-banner { padding-bottom: 80px; }
}

/* ==================== Work-in-progress banner ==================== */
.wip-banner {
    position: fixed;
    top: 0; left: 0; right: 0;
    min-height: var(--wip-height);
    z-index: 200;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 16px;
    /* Solid orange — explicit fallback colour first so the gradient can never
       reveal the page underneath if a renderer skips it. */
    background-color: #c46514;
    background-image: linear-gradient(90deg, #b45309 0%, #d97706 100%);
    color: #fff7ed;
    font-size: 12.5px;
    line-height: 1.35;
    box-shadow: 0 2px 8px rgba(0,0,0,.22);
    /* Avoid blending with whatever sits behind in case CSS is overridden later */
    isolation: isolate;
    backdrop-filter: none;
}
.wip-banner[hidden] { display: none; }

/* Dark-mode tints for fixed banners and modal backdrop. The cookie banner uses
   inline styles, so dark overrides need !important to win specificity. */
[data-theme="dark"] .wip-banner {
    background-color: #3a2a14;
    background-image: linear-gradient(90deg, #4a3418 0%, #5a3f1c 100%);
    color: #f0d9b5;
    box-shadow: 0 2px 8px rgba(0,0,0,.45);
}
[data-theme="dark"] .wip-banner .wip-text strong { color: #ffe0b8; }
[data-theme="dark"] .wip-banner .wip-cta {
    background: rgba(255,255,255,0.08);
    color: #ffe0b8;
}
[data-theme="dark"] .wip-banner .wip-close {
    background: rgba(255,255,255,0.06);
    color: #f0d9b5;
}
[data-theme="dark"] #cookie-banner {
    background: #1b2e1b !important;
    color: var(--primary-light) !important;
    box-shadow: 0 -2px 12px rgba(0,0,0,.5) !important;
}
[data-theme="dark"] #cookie-refuse {
    color: var(--accent) !important;
    border-color: var(--primary) !important;
}
[data-theme="dark"] .bp-modal-backdrop {
    background: rgba(0, 0, 0, 0.75);
}

.wip-banner .wip-icon {
    font-size: 22px;
    flex-shrink: 0;
}

.wip-banner .wip-text {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
}

.wip-banner .wip-text strong { color: #fff; font-weight: 700; }

.wip-banner .wip-cta {
    flex-shrink: 0;
    background: #fff7ed;
    color: #7c2d12;
    border: none;
    border-radius: 9999px;
    padding: 7px 14px;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    text-decoration: none;
    white-space: nowrap;
    transition: transform .12s, box-shadow .12s;
}

.wip-banner .wip-cta:hover {
    transform: translateY(-1px);
    box-shadow: 0 3px 10px rgba(0,0,0,.2);
}

.wip-banner .wip-close {
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(255,255,255,0.15);
    color: #fff7ed;
    border: none;
    border-radius: 50%;
    font-size: 16px;
    line-height: 1;
    cursor: pointer;
    padding: 0;
    transition: background .15s;
}
.wip-banner .wip-close:hover { background: rgba(255,255,255,0.3); }
.wip-banner .wip-close:focus-visible { outline: 2px solid #fff7ed; outline-offset: 2px; }

/* Compact layout on small screens — banner grows with content, no overflow */
@media (max-width: 767px) {
    :root { --wip-height: 0px; }
    .wip-banner { padding: 10px 12px; gap: 8px; font-size: 11.5px; }
    .wip-banner .wip-icon { font-size: 18px; }
    .wip-banner .wip-cta { padding: 6px 10px; font-size: 11px; }
    .wip-banner .wip-close { width: 28px; height: 28px; font-size: 14px; }
}

/* Push everything fixed below the WIP banner */
body > header.fixed,
body > header { top: var(--wip-height) !important; }

/* Extend the topbar visually through the device status bar in TWA /
   iOS standalone (where viewport-fit=cover lets us paint behind it).
   The inner <nav> keeps its 64 px height; the padding-top reserves
   space for the status bar so the brand glyph doesn't overlap. */
body > header.fixed {
    padding-top: env(safe-area-inset-top, 0px);
    box-sizing: border-box;
    min-height: var(--topbar-height-safe);
}

.offline-bar { top: calc(var(--topbar-height-safe) + var(--wip-height)) !important; }
@media (max-width: 767px) {
    .mobile-forum-banner { top: calc(var(--topbar-height-safe) + var(--wip-height)) !important; }
}
@media (min-width: 768px) {
    .desktop-nav {
        top: calc(var(--topbar-height-safe) + var(--wip-height)) !important;
        /* Height is auto so the sidebar grows to fit its content and
           scrolls with the page rather than having an internal scrollbar. */
    }
}
@media (min-width: 1200px) {
    .app-sidebar {
        padding-top: calc(var(--topbar-height-safe) + var(--wip-height) + 16px) !important;
        max-height: calc(100vh - var(--wip-height)) !important;
    }
}

body.breathe-overlay-open { overflow: hidden; }

/* Warm header — retinted by the selected colour theme (brand-bar tokens set
   by applyAppearance(); fall back to the forest gradient if unset). */
body.benzo-ready > header {
    background: linear-gradient(135deg, var(--brand-bar-from, #1b4332) 0%, var(--brand-bar-to, #2d6a4f) 100%) !important;
    color: var(--on-brand, #d8f3dc) !important;
}
body.benzo-ready > header h6,
body.benzo-ready > header span,
body.benzo-ready > header i { color: var(--on-brand, #d8f3dc) !important; }
body.benzo-ready > header button:hover { background: rgba(255,255,255,0.1) !important; }

/* Brand block — always visible on the left of the topbar, links back to
   the dashboard. Sits BEFORE the page-title H6 so users can always see
   what app they're in even when the title says "Aides naturelles" etc. */
.app-topbar-brand {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--primary-light);
    text-decoration: none;
    font-weight: 700;
    font-size: 14px;
    padding: 4px 10px 4px 6px;
    border-radius: 999px;
    background: rgba(255,255,255,0.08);
    transition: background .15s, transform .15s;
    flex-shrink: 0;
}
.app-topbar-brand:hover { background: rgba(255,255,255,0.16); transform: translateY(-1px); }
.app-topbar-brand img { width: 24px; height: 24px; border-radius: 6px; display: block; }
@media (max-width: 599px) {
    /* On tight screens, keep just the logo so the page title has room */
    .app-topbar-brand span { display: none; }
    .app-topbar-brand { padding: 4px; }
}

/* Page title — slightly subdued so the brand still reads as primary,
   then truncates with ellipsis on narrow viewports. */
body.benzo-ready > header h6,
.app-topbar-title {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    line-height: 1.4;
    letter-spacing: 0.01em;
    font-weight: 500;
    opacity: 0.92;
    margin-left: 4px;
}
/* Empty H6 (dashboard) — no separator dot or visual artifact */
body.benzo-ready > header h6:empty { display: none; }

/* User email pill — show local part only on tighter screens, full address
   in the title attribute (set in JS) for hover. Hide entirely on mobile
   to free header space for the action icons. */
.app-topbar-email {
    font-size: 12.5px;
    white-space: nowrap;
    opacity: 0.85;
    padding: 4px 12px;
    border-radius: 999px;
    background: rgba(255,255,255,0.08);
    border: 1px solid rgba(255,255,255,0.12);
    flex-shrink: 0;
}
@media (max-width: 767px) {
    .app-topbar-email { display: none; }
}

/* Topbar profile chip — always visible top-right when authenticated.
   Click navigates to settings (which hosts the profile editor). */
.topbar-user {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 12px 4px 8px;
    border-radius: 999px;
    background: rgba(255,255,255,0.10);
    border: 1px solid rgba(255,255,255,0.14);
    color: inherit;
    font-size: 13px;
    line-height: 1.2;
    cursor: pointer;
    flex-shrink: 0;
    transition: background 0.18s, transform 0.18s;
}
.topbar-user:hover { background: rgba(255,255,255,0.18); transform: translateY(-1px); }
.topbar-user i { width: 18px; height: 18px; opacity: 0.9; }
.topbar-user-avatar {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
    background: rgba(255,255,255,0.18);
    border: 1px solid rgba(255,255,255,0.25);
}
.topbar-user-name {
    max-width: 14ch;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: 500;
}
@media (max-width: 600px) {
    .topbar-user-name { max-width: 9ch; font-size: 12px; }
    .topbar-user { padding: 4px 10px 4px 6px; }
}

/* ==================== Topbar chip "Bêta" ==================== */
.topbar-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: 999px;
    background: rgba(255, 183, 77, 0.18);
    color: #ffd9a8 !important;
    font-size: 11.5px;
    font-weight: 600;
    text-decoration: none;
    border: 1px solid rgba(255, 183, 77, 0.35);
    flex-shrink: 0;
    transition: background .15s, transform .15s;
    line-height: 1.2;
}
.topbar-chip:hover { background: rgba(255, 183, 77, 0.28); transform: translateY(-1px); }
.topbar-chip-dot {
    width: 6px; height: 6px;
    border-radius: 50%;
    background: #f59e0b;
    box-shadow: 0 0 0 2px rgba(245, 158, 11, 0.25);
    flex-shrink: 0;
}
.topbar-chip-label-short { display: none; }
@media (max-width: 899px) {
    .topbar-chip-label { display: none; }
    .topbar-chip-label-short { display: inline; }
}

/* ==================== Topbar shortcuts (Forum / Urgence) ==================== */
.topbar-shortcut {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.1);
    color: var(--primary-light) !important;
    font-size: 12.5px;
    font-weight: 600;
    text-decoration: none;
    border: 1px solid rgba(255, 255, 255, 0.18);
    flex-shrink: 0;
    cursor: pointer;
    transition: background .15s, transform .15s;
    line-height: 1.2;
}
.topbar-shortcut:hover { background: rgba(255, 255, 255, 0.18); transform: translateY(-1px); }
.topbar-shortcut i { font-size: 16px; width: 16px; height: 16px; }
.topbar-shortcut-crisis {
    background: rgba(220, 38, 38, 0.22);
    border-color: rgba(220, 38, 38, 0.45);
    color: #ffc9c9 !important;
}
.topbar-shortcut-crisis:hover { background: rgba(220, 38, 38, 0.32); }

/* Forum: mis en valeur — bleu marin contrastant sur la barre verte */
.topbar-shortcut-forum {
    background: linear-gradient(135deg, #1e62a8 0%, #2e8bd4 100%);
    border-color: rgba(255, 255, 255, 0.35);
    color: #ffffff !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.18);
    font-weight: 700;
}
.topbar-shortcut-forum:hover {
    background: linear-gradient(135deg, #2675c2 0%, #3aa0e8 100%);
    transform: translateY(-1px);
}

@media (max-width: 599px) {
    .topbar-shortcut span { display: none; }
    .topbar-shortcut { padding: 6px 8px; }
}

/* Warm bottom nav */
body.benzo-ready > nav.bottom {
    background: #ffffff;
    border-top: 1px solid var(--border);
}
[data-theme="dark"] body.benzo-ready > nav.bottom {
    background: var(--card);
    border-top: 1px solid var(--border);
}

/* Cards should feel warm */
body.benzo-ready article.round {
    border: 1px solid var(--border);
    background: var(--card);
}

/* Welcome section gentle gradient */
#view-dashboard > h5 {
    background: linear-gradient(135deg, var(--primary-light) 0%, var(--border) 100%);
    padding: 20px;
    border-radius: 16px;
    margin-bottom: 16px;
    color: var(--text);
    font-weight: 400;
}
[data-theme="dark"] #view-dashboard > h5 {
    background: linear-gradient(135deg, rgba(var(--primary-rgb), 0.3) 0%, rgba(var(--primary-rgb), 0.15) 100%);
    color: var(--text);
}

/* Success text color utility (not in Beer CSS) */
.success-text { color: var(--success); }

/* ==================== App Layout — 3-column desktop ==================== */
.app-layout {
    display: flex;
    max-width: 1440px;
    margin: 0 auto;
}
.app-layout > main {
    flex: 1;
    min-width: 0;
    min-height: calc(100vh - var(--topbar-height-safe));
}

/* Desktop left nav rail — hidden on mobile */
.desktop-nav { display: none; }
/* Topbar hamburger toggles the desktop rail — hidden on mobile by default */
.topbar-nav-toggle { display: none; }

@media (min-width: 768px) {
    .desktop-nav {
        display: flex;
        flex-direction: column;
        width: 256px;
        flex-shrink: 0;
        /* Flush, integrated left rail (no floating-card look). Pinned via
           sticky but scrolls WITH the page — NO internal scrollbar. */
        position: sticky;
        top: var(--topbar-height-safe);
        align-self: flex-start;
        height: auto;
        /* Le rail peut dépasser la hauteur de l'écran (beaucoup d'items) :
           scroll interne propre pour toujours atteindre le bas du menu. */
        max-height: calc(100dvh - var(--topbar-height-safe));
        overflow-y: auto;
        overscroll-behavior: contain;
        padding: 20px 14px;
        margin: 0;
        background: var(--card);
        border: none;
        border-right: 1px solid var(--border);
        border-radius: 0;
        box-shadow: none;
        z-index: 10;
    }
    /* Collapsed state — hide the rail; main content reflows to full width. */
    html.nav-collapsed .desktop-nav { display: none; }
    .desktop-nav-item {
        display: flex;
        align-items: center;
        gap: 14px;
        padding: 13px 16px;
        border-radius: var(--radius);
        color: var(--text-secondary);
        text-decoration: none;
        font-size: 15px;
        font-weight: 500;
        transition: background 0.15s, color 0.15s;
        cursor: pointer;
        border: none;
        background: none;
    }
    .desktop-nav-item:hover { background: var(--accent); color: var(--text); }
    .desktop-nav-item.active { background: var(--primary-light); color: var(--primary); font-weight: 600; }
    .desktop-nav-item.nav-soon { opacity: .45; cursor: not-allowed; pointer-events: none; }
    .desktop-nav-item.nav-soon em { font-style: italic; font-size: 11px; opacity: .8; margin-left: 4px; }
    .desktop-nav-item i { font-size: 20px; width: 24px; text-align: center; }
    .desktop-nav-spacer { flex: 1; }
    .desktop-nav-forum {
        background: linear-gradient(135deg, var(--brand-bar-from), var(--brand-bar-to)) !important;
        color: var(--primary-light) !important;
        margin: 8px 0 4px;
        padding: 12px 14px !important;
        border-radius: var(--radius);
        box-shadow: 0 2px 6px rgba(0,0,0,0.12);
        font-weight: 700 !important;
        position: relative;
    }
    .desktop-nav-forum::before {
        content: "";
        position: absolute;
        top: -6px;
        left: 6px;
        right: 6px;
        height: 1px;
        background: var(--border);
    }
    .desktop-nav-forum:hover {
        background: linear-gradient(135deg, var(--primary), var(--primary)) !important;
        transform: translateY(-1px);
        box-shadow: 0 3px 10px rgba(0,0,0,0.18);
    }

    /* Hide bottom nav + remove body bottom padding */
    nav.bottom { display: none !important; }
    body { padding-bottom: 16px; }

    /* Crisis FAB: reposition without bottom nav */
    .crisis-fab { bottom: max(16px, env(safe-area-inset-bottom)) !important; }
}

/* ==================== Right sidebar — collapsible drawer ==================== */
/* Pulled out of the flex flow so it can slide in/out as an overlay drawer.
   A persistent "Urgences" tab on the right edge opens it. Closed by default. */
.app-sidebar {
    position: fixed;
    top: var(--topbar-height-safe);
    right: 0;
    width: 320px;
    max-width: 92vw;
    height: calc(100vh - var(--topbar-height-safe));
    overflow-y: auto;
    background: var(--bg);
    border-left: 1px solid var(--border);
    box-shadow: -8px 0 24px rgba(16, 60, 40, 0.10);
    /* Top padding leaves room for the close button anchored at top:12 left:12 */
    padding: 60px 16px 24px;
    z-index: 90;
    transform: translateX(100%);
    transition: transform .25s ease;
}
body.app-sidebar-open .app-sidebar { transform: translateX(0); }

/* "Urgences" tab — always visible on the right edge while the sidebar is closed */
.app-sidebar-tab {
    position: fixed;
    top: calc(var(--topbar-height-safe) + 80px);
    right: 0;
    margin: 0;
    width: 40px;
    min-height: 184px;
    padding: 12px 0;
    background: linear-gradient(180deg, #c62828 0%, #b71c1c 100%);
    color: #ffffff;
    border: none;
    border-radius: 12px 0 0 12px;
    box-shadow: -2px 4px 12px rgba(176, 0, 32, 0.32);
    cursor: pointer;
    z-index: 95;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    transition: transform .15s, background .15s, opacity .25s ease, visibility 0s linear .25s;
}
.app-sidebar-tab:hover { transform: translateX(-2px); }
.app-sidebar-tab:focus-visible { outline: 2px solid #ffffff; outline-offset: -4px; }
.app-sidebar-tab i { font-size: 22px; }
.app-sidebar-tab-label {
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}
body.app-sidebar-open .app-sidebar-tab {
    opacity: 0;
    visibility: hidden;
    transition: opacity .15s ease, visibility 0s linear .15s;
}

/* Hide the tab on mobile — bottom nav and crisis FAB cover that need; the
   tab makes sense only when there's no bottom nav (>=768 px). */
@media (max-width: 767px) {
    .app-sidebar-tab { display: none; }
}

/* Backdrop dims the page when the drawer is open (desktop + mobile) */
.app-sidebar-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(11, 51, 32, 0.45);
    backdrop-filter: blur(2px);
    z-index: 85;
    opacity: 0;
    transition: opacity .25s ease;
    pointer-events: none;
}
body.app-sidebar-open .app-sidebar-backdrop {
    opacity: 1;
    pointer-events: auto;
}

/* Close button inside the right sidebar — anchored to the LEFT edge so the
   chevron-right "pushes" the panel out to the right. Mirror of the left
   menu's chevron-left close in the top-right of its column. */
.app-sidebar-close {
    position: absolute;
    top: 12px;
    left: 12px;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: none;
    background: rgba(var(--primary-rgb), 0.10);
    color: var(--text);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
}
.app-sidebar-close:hover { background: rgba(var(--primary-rgb), 0.18); }

/* Desktop-nav collapse toggle — now an edge tab on the LEFT mirroring the
   right "Urgences" tab. Lives outside the topbar, never overlaps the title. */
.desktop-nav-toggle {
    display: none;
    margin: 0;
    padding: 0;
    border: none;
    background: transparent;
    cursor: pointer;
}
@media (min-width: 768px) {
    .desktop-nav-toggle { display: inline-flex; }
}

/* Shared edge-tab pattern — left and right vertical tabs on viewport edges */
.app-edge-tab {
    position: fixed;
    top: calc(var(--topbar-height-safe) + 80px);
    width: 40px;
    min-height: 132px;
    padding: 12px 0;
    color: #ffffff;
    border: none;
    cursor: pointer;
    z-index: 95;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    transition: transform .15s, background .15s, opacity .25s ease, visibility 0s linear .25s;
}
.app-edge-tab i { font-size: 22px; }
.app-edge-tab .app-edge-tab-label {
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

/* Left tab — Menu toggle (forest green to match the topbar) */
.app-edge-tab--left {
    left: 0;
    border-radius: 0 12px 12px 0;
    background: linear-gradient(180deg, var(--brand-bar-from) 0%, var(--brand-bar-to) 100%);
    box-shadow: 2px 4px 12px rgba(11, 51, 32, 0.32);
}
.app-edge-tab--left:hover { transform: translateX(2px); }
.app-edge-tab--left:focus-visible { outline: 2px solid #ffffff; outline-offset: -4px; }

/* Mirror the right-sidebar pattern:
   - Menu OPEN (default)  → hide the edge tab (the in-menu X close button takes over)
   - Menu COLLAPSED       → show the edge tab so the user can re-open
   This avoids the tab sitting visually behind the menu column. */
body:not(.desktop-nav-collapsed) .app-edge-tab--left {
    opacity: 0;
    visibility: hidden;
    transition: opacity .15s ease, visibility 0s linear .15s;
    pointer-events: none;
}

/* When the desktop-nav is collapsed, hide it and reclaim the space */
body.desktop-nav-collapsed .desktop-nav { display: none; }

/* In-menu close button — same shape & affordance as the right-sidebar X */
.desktop-nav-close {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: none;
    background: rgba(var(--primary-rgb), 0.10);
    color: var(--text);
    cursor: pointer;
    display: none; /* shown only on desktop where the nav is rendered */
    align-items: center;
    justify-content: center;
    z-index: 2;
}
.desktop-nav-close:hover { background: rgba(var(--primary-rgb), 0.18); }
.desktop-nav-close:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.desktop-nav-close i { font-size: 18px; }
@media (min-width: 768px) {
    /* Reserve space at the top of the nav for the X button — sticky positioning
       still creates a containing block for absolute children, so the X stays
       anchored to the nav's top-right. */
    .desktop-nav { padding-top: 44px !important; }
    .desktop-nav-close { display: inline-flex; }
}

/* Mobile forum banner */
.mobile-forum-banner { display: none; }
@media (max-width: 767px) {
    .mobile-forum-banner {
        display: block;
        position: fixed;
        top: var(--topbar-height-safe);
        left: 0; right: 0;
        z-index: 98;
        background: linear-gradient(135deg, var(--brand-bar-from) 0%, var(--brand-bar-to) 60%, var(--primary) 100%);
        box-shadow: 0 2px 6px rgba(0,0,0,.18);
    }
    .mobile-forum-banner a {
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 8px 14px;
        color: #fff;
        text-decoration: none;
        font-size: 13px;
        font-weight: 600;
        min-height: 40px;
    }
    /* "Vous êtes dans l'app →" preamble is noisy on small screens — the pill
       on its own already conveys the action. Hide on viewports < 480px. */
    .mobile-forum-banner .mfb-leading,
    .mobile-forum-banner .mfb-arrow {
        color: rgba(255,255,255,0.7);
        font-size: 12px;
        font-weight: 500;
        flex-shrink: 0;
    }
    @media (max-width: 479px) {
        .mobile-forum-banner .mfb-leading,
        .mobile-forum-banner .mfb-arrow { display: none; }
        .mobile-forum-banner .mfb-target { margin-left: 0; }
    }
    .mobile-forum-banner .mfb-target {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        background: rgba(255,255,255,0.18);
        padding: 5px 12px;
        border-radius: 9999px;
        font-weight: 700;
        margin-left: auto;
        white-space: nowrap;
    }
    .mobile-forum-banner .mfb-target i { font-size: 18px; }
    .mobile-forum-banner .mfb-ext { font-size: 14px; opacity: 0.8; }
    .mobile-forum-banner a:active .mfb-target { background: rgba(255,255,255,0.3); }
}

.sidebar-section {
    background: var(--card);
    border-radius: 16px;
    padding: 16px;
    margin-bottom: 12px;
    box-shadow: var(--shadow);
}
.sidebar-title {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
    font-size: 14px;
    color: var(--primary);
}
.sidebar-title i { font-size: 18px; }

.sidebar-posts { display: flex; flex-direction: column; gap: 8px; }

.sidebar-post {
    padding: 10px 12px;
    background: var(--accent);
    border-radius: 12px;
    cursor: pointer;
    transition: background 0.15s;
}
.sidebar-post:hover { background: var(--primary-light); }
.sidebar-post-text {
    font-size: 13px;
    color: var(--text);
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.sidebar-post-meta {
    font-size: 11px;
    color: var(--muted-fg);
    margin-top: 4px;
    display: flex;
    gap: 8px;
}

/* Sidebar crisis hotlines */
.sidebar-crisis { border-left: 3px solid var(--destructive); }
.sidebar-hotline {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border-radius: 10px;
    background: var(--accent);
    color: var(--text);
    text-decoration: none;
    margin-bottom: 6px;
    transition: background 0.15s;
}
.sidebar-hotline:hover { background: var(--primary-light); }
.sidebar-hotline i { font-size: 20px; color: var(--destructive); }
.sidebar-hotline strong { font-size: 13px; display: block; }
.sidebar-hotline small { font-size: 11px; color: var(--muted-fg); display: block; }

/* Sidebar external links */
.sidebar-link {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border-radius: 10px;
    background: var(--accent);
    color: var(--text);
    text-decoration: none;
    margin-bottom: 6px;
    transition: background 0.15s;
}
.sidebar-link:hover { background: var(--primary-light); }
.sidebar-link > i:first-child { font-size: 20px; color: var(--primary); flex-shrink: 0; }
.sidebar-link > div { flex: 1; min-width: 0; }
.sidebar-link strong { font-size: 13px; display: block; }
.sidebar-link small { font-size: 11px; color: var(--muted-fg); display: block; }
.sidebar-link-arrow { font-size: 14px !important; color: var(--muted-fg) !important; flex-shrink: 0; }

/* ==================== Views (show/hide logic) ==================== */
.view {
    display: none;
    margin: 0 auto;
    padding: calc(var(--topbar-height-safe) + 16px) 24px 16px;
    animation: fadeIn 0.15s ease;
}
.view.active { display: block; }

/* Directional slide transitions when navigating between bottom-nav tabs.
   Only on mobile; desktop uses a static rail so no slide is needed.
   body.nav-slide-{forward|backward} is set in JS before calling navigate(). */
@media (max-width: 767px) {
    body.nav-slide-forward .view.active {
        animation: navSlideFromRight 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    }
    body.nav-slide-backward .view.active {
        animation: navSlideFromLeft 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    }
    @keyframes navSlideFromRight {
        from { transform: translateX(28px); opacity: 0; }
        to   { transform: translateX(0);   opacity: 1; }
    }
    @keyframes navSlideFromLeft {
        from { transform: translateX(-28px); opacity: 0; }
        to   { transform: translateX(0);    opacity: 1; }
    }
}

/* Mobile: constrain width + account for forum banner. Narrow side padding
   to keep cards readable on 360 px screens. */
@media (max-width: 767px) {
    .view {
        max-width: 800px;
        /* body already pads by --topbar-height-safe (cream block); the
           legacy +40 was for a dropped WIP banner. Just give a small
           gap below the topbar and keep horizontal padding tight. */
        padding-top: 12px;
        padding-left: 12px;
        padding-right: 12px;
    }
}
@media (max-width: 480px) {
    body.benzo-ready article.round { padding: 14px; }
}

/* Desktop side-by-side layouts */
@media (min-width: 768px) {
    .desktop-grid-2 {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 16px;
        align-items: start;
    }
    .desktop-grid-3 {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
        gap: 16px;
        align-items: start;
    }
    .desktop-span-full { grid-column: 1 / -1; }
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(4px); }
    to { opacity: 1; transform: translateY(0); }
}

/* ==================== Mood Scale ==================== */
.mood-scale {
    display: flex; gap: 4px;
    justify-content: space-between;
    margin: 12px 0;
    flex-wrap: nowrap;
    width: 100%;
}

.mood-btn {
    flex: 1 1 0;
    min-width: 0;
    height: 44px;
    padding: 0;
    border: 2px solid var(--border);
    border-radius: var(--radius);
    background: var(--bg);
    font-size: 15px; font-weight: 600;
    cursor: pointer;
    transition: all 0.15s;
    display: flex; align-items: center; justify-content: center;
    color: var(--text);
}

.mood-btn:hover { border-color: var(--primary); }
.mood-btn.active { border-color: var(--primary); background: var(--primary); color: var(--primary-fg); }

.mood-labels {
    display: flex; justify-content: space-between;
    font-size: 11px; color: var(--muted-fg);
    margin-top: -4px;
}

/* Window/Wave toggle */
.type-toggle { display: flex; gap: 0; margin: 12px 0; }

.type-btn {
    flex: 1;
    padding: 8px;
    border: 1px solid var(--border);
    background: var(--bg);
    color: var(--text-secondary);
    font-size: 13px; font-weight: 500; font-family: inherit;
    cursor: pointer;
    transition: all 0.15s;
}

.type-btn:first-child { border-radius: var(--radius) 0 0 var(--radius); }
.type-btn:last-child { border-radius: 0 var(--radius) var(--radius) 0; }
.type-btn:not(:first-child) { border-left: none; }
.type-btn.active { background: var(--primary); color: var(--primary-fg); border-color: var(--primary); }

/* ==================== Breathing Exercises (Mindful Breath style) ==================== */

/* Exercise selection grid */
.breathe-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 18px;
    margin-top: 8px;
}

.breathe-card {
    position: relative;
    /* Reset Beer-CSS button defaults that break grid layout */
    box-sizing: border-box;
    width: 100%;
    height: auto;
    margin: 0;
    background: var(--accent);
    border: 2px solid transparent;
    border-radius: 16px;
    padding: 18px 14px 14px;
    cursor: pointer;
    transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
    text-align: center;
    min-height: 168px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 8px;
}
/* Favorite/pin star — sits in top-right corner, doesn't trigger card click */
.breathe-card-fav {
    position: absolute;
    top: 6px;
    right: 6px;
    width: 32px;
    height: 32px;
    border: none;
    background: transparent;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--muted-fg);
    font-size: 18px;
    padding: 0;
    margin: 0;
    transition: background .15s, color .15s, transform .15s;
}
.breathe-card-fav:hover { background: rgba(0,0,0,0.06); transform: scale(1.1); }
.breathe-card-fav.is-fav { color: #f59e0b; }
[data-theme="dark"] .breathe-card-fav:hover { background: rgba(255,255,255,0.08); }
.breathe-card.is-fav {
    border-color: #f59e0b66;
    background: linear-gradient(180deg, var(--accent) 0%, rgba(245, 158, 11, 0.06) 100%);
}
.breathe-card:hover, .breathe-card:focus-visible {
    border-color: var(--primary);
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}
.breathe-card i {
    font-size: 28px;
    color: var(--primary);
    flex: 0 0 auto;
}
.breathe-card .breathe-card-name {
    font-size: 14px;
    font-weight: 600;
    color: var(--text);
    line-height: 1.25;
    word-break: break-word;
}
.breathe-card .breathe-card-timing {
    font-size: 11.5px;
    color: var(--muted-fg);
    font-weight: 500;
    line-height: 1.35;
    word-break: break-word;
    /* Cap descriptions at 4 lines so all cards keep an even rhythm */
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Fullscreen immersive overlay — Mindful-app style.
   Page is fully hidden; the entire viewport becomes a calm, gradient stage
   tinted by --breathe-color (set per exercise in JS). */
.breathe-overlay {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    padding: 24px;
    /* Layered radial gradient: warm bloom of the exercise color, fading to
       deep near-black at the edges. Slow-pulses to feel alive. */
    background:
        radial-gradient(ellipse at center, var(--breathe-glow, #2d6a4f33) 0%, transparent 60%),
        radial-gradient(ellipse at 30% 20%, var(--breathe-glow-soft, #2d6a4f22) 0%, transparent 50%),
        radial-gradient(ellipse at 70% 80%, var(--breathe-glow-faint, #2d6a4f14) 0%, transparent 55%),
        linear-gradient(180deg, #0a1612 0%, #050b08 100%);
    animation: breatheBackdropIn 0.5s ease, breatheBackdropPulse 12s ease-in-out infinite;
}
.breathe-overlay[hidden] { display: none; }
@keyframes breatheBackdropIn {
    from { opacity: 0; }
    to { opacity: 1; }
}
@keyframes breatheBackdropPulse {
    0%, 100% { background-size: 100% 100%, 100% 100%, 100% 100%, 100% 100%; }
    50%      { background-size: 130% 130%, 110% 110%, 120% 120%, 100% 100%; }
}

.breathe-close {
    position: absolute;
    top: 18px;
    right: 18px;
    z-index: 10;
    background: rgba(255,255,255,0.08);
    border: none;
    border-radius: 50%;
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: rgba(255,255,255,0.75);
    font-size: 22px;
    transition: background 0.15s, transform 0.15s, color 0.15s;
}
.breathe-close:hover { background: rgba(255,255,255,0.18); color: #fff; transform: scale(1.05); }
.breathe-close:focus-visible { outline: 2px solid rgba(255,255,255,0.6); outline-offset: 3px; }

/* Centered content stack — no card chrome, the gradient itself is the canvas */
.breathe-content {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 32px;
    width: 100%;
    max-width: 520px;
    padding: 24px;
    animation: breatheDialogIn 0.5s cubic-bezier(0.2, 0.9, 0.3, 1.05);
}
@keyframes breatheDialogIn {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}

.breathe-exercise-name {
    font-size: 20px;
    font-weight: 300;
    color: rgba(255,255,255,0.9);
    letter-spacing: 0.5px;
    text-align: center;
}

/* Countdown */
.breathe-countdown {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
}
.breathe-countdown-num {
    font-size: 72px;
    font-weight: 200;
    color: #fff;
    animation: countPulse 1s ease-in-out;
}
.breathe-countdown-label {
    font-size: 16px;
    color: rgba(255,255,255,0.6);
}
@keyframes countPulse {
    0% { transform: scale(0.5); opacity: 0; }
    50% { transform: scale(1.1); opacity: 1; }
    100% { transform: scale(1); opacity: 1; }
}

/* Main breathing circle — large for the immersive fullscreen */
.breathe-ring-wrap {
    position: relative;
    width: 280px;
    height: 280px;
}
@media (min-width: 480px) {
    .breathe-ring-wrap { width: 340px; height: 340px; }
}
@media (min-width: 768px) {
    .breathe-ring-wrap { width: 400px; height: 400px; }
}
.breathe-ring {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    transform: rotate(-90deg);
}
.breathe-ring-bg {
    fill: none;
    stroke: rgba(255,255,255,0.08);
    stroke-width: 4;
}
.breathe-ring-progress {
    fill: none;
    stroke: rgba(255,255,255,0.5);
    stroke-width: 4;
    stroke-linecap: round;
    stroke-dasharray: 565.48;
    stroke-dashoffset: 565.48;
    transition: stroke-dashoffset 0.1s linear;
}
.breathe-circle {
    position: absolute;
    inset: 18px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    /* Long, eased transition — JS sets per-phase duration via inline style */
    transition: transform 0.6s cubic-bezier(0.4, 0, 0.6, 1),
                box-shadow 0.6s ease,
                background 0.6s ease;
    background: radial-gradient(circle at 30% 30%, var(--breathe-color, #4ade80)44 0%, transparent 60%);
    will-change: transform;
}
.breathe-circle-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}
.breathe-phase {
    font-size: 22px;
    font-weight: 300;
    color: #fff;
    letter-spacing: 1px;
    text-transform: uppercase;
    opacity: 0.95;
}
.breathe-timer {
    font-size: 40px;
    font-weight: 200;
    color: #fff;
}
.breathe-cycle-info {
    font-size: 14px;
    color: rgba(255,255,255,0.5);
    margin-top: 8px;
}

/* Completion */
.breathe-complete {
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    animation: fadeInUp 0.6s ease;
}
.breathe-complete-icon { font-size: 64px; }
.breathe-complete-title {
    font-size: 28px;
    font-weight: 300;
    color: #fff;
}
.breathe-complete-msg {
    font-size: 15px;
    color: rgba(255,255,255,0.7);
    line-height: 1.6;
    max-width: 280px;
}
@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Controls */
.breathe-controls {
    display: flex;
    gap: 14px;
    margin-top: 8px;
    padding-top: 4px;
}
.breathe-controls button {
    border-color: rgba(255,255,255,0.3) !important;
    color: #fff !important;
    padding: 12px 24px !important;
    font-weight: 600 !important;
}
.breathe-controls button:not(.border) {
    background: rgba(255,255,255,0.18) !important;
}
.breathe-controls button:not(.border):hover {
    background: rgba(255,255,255,0.28) !important;
}
/* Options row — duration + sound checkbox sit side by side under controls */
.breathe-options {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 24px;
    flex-wrap: wrap;
    margin-top: 8px;
    padding-top: 16px;
    border-top: 1px solid rgba(255,255,255,0.08);
    width: 100%;
    max-width: 360px;
}
.breathe-duration {
    display: flex;
    align-items: center;
    gap: 10px;
}
.breathe-duration label {
    font-size: 13px;
    color: rgba(255,255,255,0.7);
}
.breathe-duration select {
    background: rgba(255,255,255,0.08);
    color: #fff;
    border: 1px solid rgba(255,255,255,0.18);
    padding: 6px 14px;
    border-radius: 20px;
    font-size: 13px;
    cursor: pointer;
}
.breathe-duration select:hover { background: rgba(255,255,255,0.14); }
.breathe-sound-toggle {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: rgba(255,255,255,0.85);
    cursor: pointer;
    user-select: none;
}
.breathe-sound-toggle input[type="checkbox"] {
    width: 18px;
    height: 18px;
    accent-color: var(--breathe-color, #4ade80);
    cursor: pointer;
}

/* Legacy compat — old breathing circle selectors used by coping startBreathing */
.breathing-timer { display: none; }
.breathing-circle { display: none; }

/* ===== ZenBreath cross-promo card ===== */
.zenbreath-promo {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    margin-top: 18px;
    padding: 16px 18px;
    border-radius: 14px;
    background: linear-gradient(135deg, rgba(74, 222, 128, 0.08) 0%, rgba(99, 102, 241, 0.08) 100%);
    border: 1px solid rgba(99, 102, 241, 0.18);
    text-decoration: none;
    color: var(--text);
    transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}
.zenbreath-promo:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(99, 102, 241, 0.18);
    border-color: rgba(99, 102, 241, 0.4);
}
.zenbreath-promo__icon {
    flex: 0 0 auto;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
    color: #fff;
    font-size: 24px;
}
.zenbreath-promo__body { flex: 1; min-width: 0; }
.zenbreath-promo__title {
    font-size: 14px;
    color: var(--muted-fg);
    margin-bottom: 4px;
}
.zenbreath-promo__title strong {
    color: var(--text);
    font-size: 16px;
    font-weight: 700;
}
.zenbreath-promo__desc {
    margin: 0 0 10px 0;
    font-size: 13.5px;
    line-height: 1.45;
    color: var(--text-secondary, var(--text));
}
.zenbreath-promo__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}
.zenbreath-promo__chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 10px 3px 8px;
    border-radius: 999px;
    background: rgba(99, 102, 241, 0.12);
    color: #4f46e5;
    font-size: 11.5px;
    font-weight: 600;
}
.zenbreath-promo__chip i {
    font-size: 14px;
}
.zenbreath-promo__arrow {
    flex: 0 0 auto;
    color: var(--muted-fg);
    font-size: 18px;
    align-self: center;
}
[data-theme="dark"] .zenbreath-promo {
    background: linear-gradient(135deg, rgba(74, 222, 128, 0.06) 0%, rgba(99, 102, 241, 0.10) 100%);
    border-color: rgba(139, 92, 246, 0.25);
}
[data-theme="dark"] .zenbreath-promo__chip {
    background: rgba(139, 92, 246, 0.18);
    color: #a5b4fc;
}

/* In-overlay completion link to ZenBreath */
.breathe-complete-zen {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-top: 18px;
    padding: 12px 18px;
    border-radius: 999px;
    background: rgba(255,255,255,0.10);
    color: rgba(255,255,255,0.95);
    text-decoration: none;
    font-size: 13.5px;
    line-height: 1.35;
    border: 1px solid rgba(255,255,255,0.15);
    transition: background 0.15s, transform 0.15s;
    max-width: 360px;
}
.breathe-complete-zen:hover { background: rgba(255,255,255,0.18); transform: translateY(-1px); }
.breathe-complete-zen i { font-size: 22px; opacity: 0.9; }
.breathe-complete-zen strong { font-weight: 700; }

/* ==================== Chart Container ====================
   uPlot draws into a container we own — no fixed canvas size needed.
   Min-height keeps the layout stable while uPlot mounts. */
.chart-container {
    position: relative;
    min-height: 240px;
    margin: 12px 0;
    width: 100%;
    overflow: hidden;
}
.chart-container canvas { display: block; }
/* uPlot legend — pull-quote-style row under the chart */
.chart-container .u-legend {
    margin-top: 8px;
    font-size: 12px;
    color: var(--muted-fg);
}
.chart-container .u-legend th { font-weight: 600; }
[data-theme="dark"] .chart-container .u-axis,
[data-theme="dark"] .chart-container .u-legend { color: var(--muted-fg); }

/* ==================== CIWA Score Display ==================== */
.ciwa-score-display {
    text-align: center;
    padding: 24px;
    margin: 16px 0;
}

.ciwa-score-number {
    font-size: 48px; font-weight: 700;
    color: var(--primary);
}

.ciwa-severity {
    font-size: 18px; font-weight: 600;
    margin-top: 4px;
}

.ciwa-severity.mild { color: var(--success); }
.ciwa-severity.moderate { color: var(--warning); }
.ciwa-severity.significant { color: #e65100; }
.ciwa-severity.severe { color: var(--destructive); }

.ciwa-guidance {
    font-size: 14px; color: var(--text-secondary);
    margin-top: 8px;
    line-height: 1.5;
}

/* ==================== Equivalency Result ==================== */
.equiv-result {
    text-align: center;
    padding: 24px;
    background: var(--primary-light);
    border-radius: var(--radius);
    margin: 16px 0;
}

.equiv-result-dose {
    font-size: 36px; font-weight: 700;
    color: var(--primary);
}

.equiv-result-label {
    font-size: 13px; color: var(--text-secondary);
    margin-top: 4px;
}

/* ==================== Calendar Dots ==================== */
.calendar-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 4px;
    margin: 12px 0;
}

.cal-header { font-size: 12px; font-weight: 700; text-align: center; color: var(--muted-fg); padding: 8px 4px; text-transform: uppercase; letter-spacing: 0.05em; }

.cal-day {
    aspect-ratio: 1;
    display: flex; align-items: center; justify-content: center;
    font-size: 14px;
    border-radius: 12px;
    cursor: pointer;
    transition: background 0.15s, transform 0.1s, box-shadow 0.15s;
    position: relative;
    border: 1px solid var(--border);
    background: var(--card);
}

.cal-day:hover {
    background: var(--accent);
    transform: scale(1.05);
    box-shadow: var(--shadow-sm, 0 2px 6px rgba(0,0,0,0.08));
}
.cal-day.today {
    font-weight: 800;
    border-color: var(--primary);
    color: var(--primary);
}
.cal-day.has-data::after {
    content: '';
    position: absolute; bottom: 4px;
    width: 6px; height: 6px;
    border-radius: 50%;
    background: var(--primary);
}

.cal-day.empty { pointer-events: none; }

/* Empty Beer-CSS .badge spans render as a phantom dot — hide them
   when there's nothing to badge (e.g. dashboard taper badge with no plan). */
.badge:empty { display: none !important; }

/* Calendar navigation */
.cal-nav {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: 8px;
}
.cal-nav-title { font-size: 14px; font-weight: 600; }
.cal-nav button {
    background: none; border: none; cursor: pointer;
    color: var(--primary); font-size: 20px; padding: 4px 8px;
    border-radius: 50%; transition: background 0.15s;
    font-family: inherit;
}
.cal-nav button:hover { background: var(--accent); }

/* Mood-colored dot override */
.cal-day.mood-1::after { background: var(--mood-1); }
.cal-day.mood-2::after { background: var(--mood-2); }
.cal-day.mood-3::after { background: var(--mood-3); }
.cal-day.mood-4::after { background: var(--mood-4); }
.cal-day.mood-5::after { background: var(--mood-5); }
.cal-day.mood-6::after { background: var(--mood-6); }
.cal-day.mood-7::after { background: var(--mood-7); }
.cal-day.mood-8::after { background: var(--mood-8); }
.cal-day.mood-9::after { background: var(--mood-9); }
.cal-day.mood-10::after { background: var(--mood-10); }

/* Mood calendar tooltip */
.cal-tooltip {
    position: absolute; bottom: calc(100% + 6px); left: 50%;
    transform: translateX(-50%);
    background: var(--card); color: var(--text);
    border: 1px solid var(--border);
    border-radius: 6px; padding: 4px 8px;
    font-size: 11px; font-weight: 600;
    white-space: nowrap; z-index: 10;
    box-shadow: var(--shadow-md);
    pointer-events: none;
}

/* ==================== Form fields — label-above pattern ====================
   Beer-CSS' floating-label inside .field.round.border falls back to a
   label-below layout in our context, which is hard to scan. Stack the
   label visually above the control with a comfortable gap and bottom
   margin between consecutive fields. */
.field.round.border {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 16px;
    padding: 0;
    background: transparent;
    border: none;
}
.field.round.border > label {
    order: -1;
    position: static;
    inset: auto;
    transform: none;
    font-size: 13px;
    font-weight: 600;
    color: var(--muted-fg);
    padding: 0 4px;
    line-height: 1.3;
    text-align: left;
    align-self: flex-start;
}
.field.round.border > input,
.field.round.border > select,
.field.round.border > textarea {
    width: 100%;
    box-sizing: border-box;
    padding: 12px 16px;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: var(--card);
    color: var(--text);
    font-size: 15px;
    transition: border-color .15s, box-shadow .15s;
    margin: 0;
}
.field.round.border > input:focus,
.field.round.border > select:focus,
.field.round.border > textarea:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(var(--primary-rgb), 0.15);
}
.field.round.border > textarea { min-height: 96px; resize: vertical; }
[data-theme="dark"] .field.round.border > input,
[data-theme="dark"] .field.round.border > select,
[data-theme="dark"] .field.round.border > textarea {
    background: rgba(255,255,255,0.04);
    border-color: rgba(255,255,255,0.12);
}

/* Group of two fields side-by-side using Beer's .grid > .s6 — make sure
   the wrapping fields keep the same bottom margin. */
.grid .field.round.border { margin-bottom: 16px; }

/* ==================== Symptom Items ==================== */
.symptom-item {
    display: grid;
    grid-template-columns: minmax(140px, 1fr) minmax(160px, 2fr) auto;
    align-items: center;
    gap: 16px;
    padding: 14px 4px;
    border-bottom: 1px solid var(--border);
}
.symptom-item:last-child { border-bottom: none; }

.symptom-name {
    font-size: 14px;
    line-height: 1.3;
    color: var(--text);
}

.symptom-slider {
    width: 100%;
    min-width: 0;
}

/* Override Beer-CSS .badge absolute positioning so the value chip
   sits inline with the slider — locked at the end of the row. */
.symptom-value.badge {
    position: static;
    inset: auto;
    min-width: 36px;
    height: 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 700;
    border-radius: 15px;
    padding: 0 10px;
    color: var(--text);
}

/* Mobile: stack name on top, slider + value chip on the row below */
@media (max-width: 599px) {
    .symptom-item {
        grid-template-columns: 1fr auto;
        grid-template-areas:
            "name name"
            "slider value";
        gap: 8px 12px;
        padding: 14px 2px;
    }
    .symptom-name { grid-area: name; font-weight: 600; }
    .symptom-slider { grid-area: slider; }
    .symptom-value.badge { grid-area: value; }
}

/* Range slider (used in symptom/CIWA scales) */
.range-slider {
    width: 100%;
    -webkit-appearance: none;
    appearance: none;
    height: 6px;
    border-radius: 3px;
    background: var(--border);
    outline: none;
}

/* CIWA-B assessment items — full-width slider, label + chip above, ticks below */
.ciwa-item {
    background: var(--surface-variant, rgba(0,0,0,0.02));
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 14px 16px 10px;
    margin-bottom: 12px;
}
.ciwa-row-top {
    display: flex; align-items: center; justify-content: space-between;
    gap: 12px; margin-bottom: 10px;
}
.ciwa-label {
    font-weight: 600; font-size: 14px; line-height: 1.3;
    flex: 1; min-width: 0;
}
.ciwa-level.badge {
    position: static; inset: auto;
    flex-shrink: 0; max-width: 60%;
    height: auto; min-height: 26px;
    padding: 4px 10px;
    font-size: 11px; font-weight: 600;
    border-radius: 13px;
    white-space: normal; text-align: center;
    line-height: 1.3;
    display: inline-flex; align-items: center; justify-content: center;
}
.ciwa-slider { height: 8px; border-radius: 4px; }
.ciwa-slider::-webkit-slider-thumb { width: 24px; height: 24px; }
.ciwa-slider::-moz-range-thumb { width: 24px; height: 24px; }
.ciwa-ticks {
    display: flex; justify-content: space-between;
    margin-top: 4px; padding: 0 2px;
    font-size: 11px; color: var(--muted-fg, #888);
    user-select: none;
}
@media (max-width: 480px) {
    .ciwa-item { padding: 12px 12px 8px; }
    .ciwa-label { font-size: 13px; }
}

.range-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 20px; height: 20px;
    border-radius: 50%;
    background: var(--primary);
    cursor: pointer;
    border: 2px solid var(--primary-fg);
    box-shadow: var(--shadow);
}

.range-slider::-moz-range-thumb {
    width: 20px; height: 20px;
    border-radius: 50%;
    background: var(--primary);
    cursor: pointer;
    border: 2px solid var(--primary-fg);
}

.range-value {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 36px; height: 28px;
    background: var(--primary); color: var(--primary-fg);
    border-radius: 14px;
    font-size: 13px; font-weight: 600;
}

/* ==================== Taper Step Rows ==================== */
tr.step-done { opacity: 0.6; }
tr.step-done td:first-child { text-decoration: line-through; }
tr.step-current { background: var(--primary-light); font-weight: 600; }

/* ==================== Crisis Call Button ==================== */
.crisis-call-btn {
    display: flex; align-items: center; justify-content: center;
    gap: 10px;
    width: 100%; height: 56px;
    background: var(--destructive); color: #fff;
    border: none; border-radius: var(--radius);
    font-size: 18px; font-weight: 700; font-family: inherit;
    cursor: pointer;
    box-shadow: var(--shadow-md);
    margin-bottom: 16px;
    transition: opacity 0.15s;
    text-decoration: none;
}

.crisis-call-btn:hover { opacity: 0.9; }

/* ==================== Crisis FAB ==================== */
.crisis-fab {
    position: fixed !important;
    bottom: calc(var(--nav-height) + 16px + env(safe-area-inset-bottom));
    right: 16px;
    z-index: 99;
    box-shadow: 0 4px 14px rgba(176, 0, 32, 0.35);
}

.crisis-fab:hover { transform: scale(1.05); }

/* Hide the FAB when the crisis view is active — redundant with the view itself */
body:has(#view-crisis.active) .crisis-fab { display: none; }

/* Smaller FAB on phones so it doesn't overlap content-right chips / sliders */
@media (max-width: 767px) {
    .crisis-fab {
        width: 48px !important;
        height: 48px !important;
        min-width: 48px !important;
        min-height: 48px !important;
    }
    .crisis-fab i { font-size: 22px; }
}

/* ==================== Resource Cards (JS-created) ==================== */
.resource-card {
    display: flex; align-items: center; gap: 12px;
    padding: 12px 16px;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    margin-bottom: 8px;
    transition: box-shadow 0.15s;
}

.resource-card:hover { box-shadow: var(--shadow-md); }

.resource-info { flex: 1; }
.resource-name { font-size: 14px; font-weight: 600; }
.resource-desc { font-size: 12px; color: var(--text-secondary); }
.resource-phone { font-size: 13px; color: var(--primary); font-weight: 600; }

.resource-action { flex-shrink: 0; }

.resource-action a, .resource-action button {
    display: inline-flex; align-items: center; justify-content: center;
    gap: 4px; padding: 6px 12px;
    border-radius: calc(var(--radius) - 2px);
    background: var(--primary); color: var(--primary-fg);
    text-decoration: none;
    font-size: 12px; font-weight: 600; font-family: inherit;
    border: none; cursor: pointer;
}

/* ==================== Diary Entries (JS-created) ==================== */
.diary-entry {
    padding: 12px 16px;
    border-bottom: 1px solid var(--border);
    cursor: pointer;
    transition: background 0.15s;
}

.diary-entry:hover { background: var(--accent); }
.diary-entry-title { font-size: 14px; font-weight: 600; }
.diary-entry-preview { font-size: 13px; color: var(--text-secondary); margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.diary-entry-meta { font-size: 11px; color: var(--muted-fg); margin-top: 4px; display: flex; gap: 8px; }

/* ==================== Offline Bar ==================== */
.offline-bar {
    position: fixed;
    top: var(--topbar-height-safe);
    left: 0; right: 0;
    background: var(--warning);
    color: #000;
    text-align: center;
    padding: 4px;
    font-size: 12px; font-weight: 600;
    z-index: 99;
    display: none;
}

.offline-bar.show { display: block; }

/* ==================== Disclaimer Banner ==================== */
.disclaimer-banner {
    background: var(--card);
    color: var(--text-secondary);
    border-bottom: 1px solid var(--border);
    border-left: 3px solid var(--primary);
    padding: 10px 16px;
    font-size: 12.5px;
    line-height: 1.5;
    display: flex;
    align-items: center;
    gap: 12px;
    max-width: 900px;
    margin: 0 auto;
}

.disclaimer-banner i {
    font-size: 18px;
    color: var(--primary);
    flex-shrink: 0;
}

.disclaimer-banner span {
    flex: 1;
}

.disclaimer-banner button {
    flex-shrink: 0;
    background: transparent;
    color: var(--primary);
    border: 1px solid var(--primary);
    border-radius: 999px;
    padding: 5px 14px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
}

.disclaimer-banner button:hover {
    background: var(--primary);
    color: var(--primary-fg);
}

@media (max-width: 600px) {
    .disclaimer-banner {
        flex-wrap: wrap;
        text-align: left;
    }
    .disclaimer-banner span { min-width: 100%; }
    .disclaimer-banner button { margin-left: auto; }
}

/* ==================== Toast (JS shows/hides) ==================== */
.toast {
    position: fixed;
    top: calc(var(--topbar-height-safe) + 8px);
    right: 16px; left: 16px;
    max-width: 400px;
    margin: 0 auto;
    background: var(--card);
    color: var(--text);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 12px 20px;
    font-size: 14px; font-weight: 500;
    box-shadow: var(--shadow-lg);
    z-index: 1000;
    opacity: 0;
    transform: translateY(-8px);
    transition: transform 0.2s ease, opacity 0.2s ease;
    pointer-events: none;
    text-align: center;
}

.toast.show { transform: translateY(0); opacity: 1; }
.toast.toast-success { border-left: 4px solid var(--success); }
.toast.toast-error { border-left: 4px solid var(--destructive); }
.toast.toast-warning { border-left: 4px solid var(--warning); }

/* ==================== Quick Action Cards ==================== */
.quick-action {
    display: flex; flex-direction: column; align-items: center;
    justify-content: center;
    gap: 10px; padding: 18px 14px;
    min-height: 96px;
    cursor: pointer;
    text-align: center;
    transition: transform .15s ease, box-shadow .15s ease;
}
.quick-action:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }

.quick-action i {
    font-size: 32px;
    color: var(--primary);
}
.quick-action span { font-size: 14px; font-weight: 600; line-height: 1.25; }

/* ==================== Coping Strategy Cards (JS-created) ==================== */
.strategy-card {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
    transition: box-shadow 0.15s;
    margin-bottom: 8px;
}

.strategy-card:hover { box-shadow: var(--shadow-md); }

.strategy-header {
    display: flex; align-items: center; gap: 10px;
    padding: 14px 16px;
    cursor: pointer;
}

.strategy-header i { font-size: 22px; color: var(--primary); }

.strategy-header h3 {
    flex: 1; font-size: 14px; font-weight: 600;
}

.strategy-header .chevron {
    font-size: 20px; color: var(--muted-fg);
    transition: transform 0.2s;
}

.strategy-card.open .chevron { transform: rotate(180deg); }

.strategy-body {
    display: none;
    padding: 0 16px 14px;
    font-size: 13px; color: var(--text-secondary);
    line-height: 1.6;
}

.strategy-card.open .strategy-body { display: block; }

.strategy-body p { margin-bottom: 8px; }
.strategy-body strong { color: var(--text); }

/* ==================== Natural Aids ==================== */
.naturals-legend {
    display: flex; flex-wrap: wrap; gap: 8px;
    margin-bottom: 12px;
    padding: 10px 12px;
    background: var(--surface-variant);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    font-size: 12px;
}

.nat-badge {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 3px 10px;
    border-radius: 9999px;
    font-size: 11px; font-weight: 600;
    white-space: nowrap;
}

.nat-badge i { font-size: 14px !important; color: inherit !important; }

.nat-safe    { background: rgba(46, 160, 67, 0.15); color: #1e7a35; }
.nat-caution { background: rgba(220, 150, 30, 0.18); color: #8a5a00; }
.nat-avoid   { background: rgba(220, 60, 60, 0.15); color: #a02020; }

body.dark .nat-safe    { background: rgba(82, 183, 136, 0.22); color: #7fd4a5; }
body.dark .nat-caution { background: rgba(255, 183, 77, 0.2);  color: #ffc97a; }
body.dark .nat-avoid   { background: rgba(255, 110, 110, 0.2); color: #ff9b9b; }

.natural-card .strategy-header { gap: 8px; }
.natural-card .strategy-header h3 { font-size: 14px; line-height: 1.3; }

.nat-latin {
    display: block;
    font-size: 11px;
    font-weight: 400;
    font-style: italic;
    color: var(--muted-fg);
    margin-top: 2px;
}

.nat-helps {
    display: flex; flex-wrap: wrap; gap: 6px;
    margin: 8px 0;
}

.nat-help-chip {
    display: inline-block;
    padding: 3px 10px;
    background: var(--surface-variant);
    border: 1px solid var(--border);
    border-radius: 9999px;
    font-size: 11px;
    color: var(--text);
}

.natural-card.nat-avoid   { border-left: 3px solid #d04444; }
.natural-card.nat-caution { border-left: 3px solid #d69020; }
.natural-card.nat-safe    { border-left: 3px solid #2ea043; }

/* Expandable category sections in naturals view */
.nat-category {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 12px;
    margin-bottom: 10px;
    overflow: hidden;
}
.nat-category-summary {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    cursor: pointer;
    user-select: none;
    list-style: none;
    background: linear-gradient(to right, var(--surface-variant), transparent 70%);
    transition: background .15s;
}
.nat-category-summary::-webkit-details-marker { display: none; }
.nat-category-summary:hover { background: var(--surface-variant); }
.nat-category-icon {
    display: flex; align-items: center; justify-content: center;
    width: 36px; height: 36px;
    border-radius: 9px;
    background: rgba(46, 160, 67, 0.12);
    color: var(--primary, #00695C);
    flex-shrink: 0;
}
.nat-category-icon i { font-size: 20px; }
.nat-category-label { flex: 1; font-size: 15px; font-weight: 700; color: var(--text); }
.nat-category-count {
    background: var(--surface-variant);
    color: var(--muted-fg);
    padding: 2px 10px;
    border-radius: 9999px;
    font-size: 12px;
    font-weight: 600;
}
.nat-category-chevron {
    font-size: 22px;
    color: var(--muted-fg);
    transition: transform .2s;
}
.nat-category[open] .nat-category-chevron { transform: rotate(180deg); }
.nat-category-body {
    padding: 8px 12px 12px;
    border-top: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.nat-category-body .natural-card { margin-bottom: 0; }

/* Crisis resources — grouped by country, same visual style as nat-category */
.crisis-country {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 12px;
    margin-bottom: 10px;
    overflow: hidden;
}
.crisis-country-summary {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    cursor: pointer;
    user-select: none;
    list-style: none;
    background: linear-gradient(to right, var(--surface-variant), transparent 70%);
}
.crisis-country-summary::-webkit-details-marker { display: none; }
.crisis-country-summary strong { flex: 1; font-size: 15px; color: var(--text); }
.crisis-country-count {
    background: var(--surface-variant);
    color: var(--muted-fg);
    padding: 2px 10px;
    border-radius: 9999px;
    font-size: 12px;
    font-weight: 600;
}
.crisis-country[open] .nat-category-chevron { transform: rotate(180deg); }
.crisis-country-body {
    border-top: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 10px 12px;
}
.crisis-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    background: var(--surface-variant);
    border-radius: 10px;
}
.crisis-item-cat {
    width: 36px; height: 36px;
    border-radius: 9px;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}
.crisis-item-main { flex: 1; min-width: 0; }
.crisis-item-name { font-size: 14px; font-weight: 600; color: var(--text); }
.crisis-item-desc { font-size: 12px; color: var(--muted-fg); line-height: 1.4; margin-top: 2px; }
.crisis-item-phone {
    flex-shrink: 0;
    background: var(--primary, #00695C);
    color: #fff;
    padding: 6px 12px;
    border-radius: 9999px;
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
}
.crisis-item-phone:hover { filter: brightness(1.1); }

/* Custom SVG icons — replace Unicode emojis throughout the app */
.i-icn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    vertical-align: -3px;
    line-height: 0;
}
.i-icn svg, .icn { vertical-align: middle; }
.i-icn svg { display: block; }

/* Time-of-day chip icon tint */
.med-tod-chip .i-icn svg { stroke: currentColor; }

/* Naturals — search bar */
.naturals-search-wrap { position: relative; margin-bottom: 12px; }
.naturals-search-wrap input[type="search"] {
    width: 100%;
    box-sizing: border-box;
    padding: 11px 40px 11px 40px;
    font: inherit; font-size: 14px;
    color: var(--text);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 12px;
    outline: none;
    transition: border-color .12s, box-shadow .12s;
}
.naturals-search-wrap input[type="search"]:focus {
    border-color: var(--primary, #00695C);
    box-shadow: 0 0 0 3px rgba(var(--primary-rgb), 0.12);
}
.naturals-search-icon {
    position: absolute;
    left: 12px; top: 50%; transform: translateY(-50%);
    color: var(--muted-fg);
    font-size: 20px;
    pointer-events: none;
}
.naturals-search-clear {
    position: absolute;
    right: 6px; top: 50%; transform: translateY(-50%);
    background: transparent;
    border: none;
    color: var(--muted-fg);
    cursor: pointer;
    width: 32px; height: 32px;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    padding: 0;
}
.naturals-search-clear:hover { background: var(--surface-variant); }
.nat-search-section { margin-bottom: 16px; }
.nat-search-section h4 {
    margin: 8px 0 10px;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: .4px;
    color: var(--muted-fg);
}

/* Naturals — recipe card */
.nat-recipe {
    border-left: 3px solid var(--primary, #00695C);
    background: linear-gradient(to right, rgba(var(--primary-rgb), 0.04), transparent 40%);
}
.nat-recipe__emoji { font-size: 22px; margin-right: 8px; }
.nat-recipe-section {
    margin-top: 10px;
    padding: 8px 12px;
    background: var(--surface-variant);
    border-radius: 8px;
}
.nat-recipe-section__title {
    font-size: 12px;
    font-weight: 700;
    color: var(--muted-fg);
    text-transform: uppercase;
    letter-spacing: .4px;
    margin-bottom: 6px;
}
.nat-recipe-section p { margin: 0; font-size: 13.5px; line-height: 1.55; }
.nat-recipe-ingredients { list-style: none; padding: 0; margin: 0; }
.nat-recipe-ingredient {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 0;
    font-size: 13px;
    border-bottom: 1px dashed var(--border);
    flex-wrap: wrap;
}
.nat-recipe-ingredient:last-child { border-bottom: none; }
.nat-recipe-ingredient strong { color: var(--text); }
.nat-recipe-ingredient em { color: var(--muted-fg); font-size: 12px; }
.nat-recipe-ingredient__part { color: var(--muted-fg); font-size: 12.5px; }
.nat-recipe-ingredient__dot {
    width: 8px; height: 8px; border-radius: 50%;
    flex-shrink: 0;
}
.nat-recipe-ingredient__dot.nat-safe    { background: #2ea043; }
.nat-recipe-ingredient__dot.nat-caution { background: #d69020; }
.nat-recipe-ingredient__dot.nat-avoid   { background: #d04444; }

/* Recipes card — subtle warm gradient on top of the amber accent border */
.nat-hub-card--recipes {
    background: linear-gradient(135deg, var(--card) 0%, color-mix(in srgb, var(--nat-color) 6%, var(--card)) 100%);
}

.nat-warnings {
    background: rgba(220, 150, 30, 0.08);
    border-left: 3px solid #d69020;
    border-radius: 6px;
    padding: 8px 12px;
    margin-top: 10px;
    font-size: 12.5px;
    color: #7c4a00;
}
body.dark .nat-warnings { color: #ffc97a; background: rgba(255, 183, 77, 0.08); }
.nat-warnings p { margin: 2px 0; line-height: 1.4; }

.nat-sources {
    margin-top: 12px;
    padding: 8px 12px;
    background: var(--surface-variant);
    border-radius: 6px;
    font-size: 12px;
}
.nat-sources summary {
    cursor: pointer;
    font-weight: 600;
    color: var(--primary, #00695C);
    list-style: none;
    padding: 2px 0;
}
.nat-sources summary::-webkit-details-marker { display: none; }
.nat-sources[open] summary { margin-bottom: 8px; }
.nat-sources ul { margin: 0; padding-left: 18px; }
.nat-sources li { margin-bottom: 4px; line-height: 1.45; color: var(--muted-fg); }
.nat-sources a { color: var(--primary, #00695C); text-decoration: none; word-break: break-word; }
.nat-sources a:hover { text-decoration: underline; }

/* ==================== Chip Group (JS-created chips) ==================== */
.chip-group { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }

.chip {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 6px 14px;
    border: 1px solid var(--border);
    border-radius: 9999px;
    background: var(--bg);
    color: var(--text-secondary);
    font-size: 13px; font-weight: 500;
    cursor: pointer;
    transition: all 0.15s;
}

.chip:hover { border-color: var(--primary); color: var(--primary); }
.chip.active { background: var(--primary); color: var(--primary-fg); border-color: var(--primary); }
.chip i { font-size: 16px; }

/* ==================== Empty State ==================== */
.empty-state {
    text-align: center;
    padding: 56px 24px 40px;
    color: var(--muted-fg);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
}

.empty-state i {
    font-size: 56px;
    line-height: 1;
    opacity: 0.45;
    color: var(--primary);
    width: 88px;
    height: 88px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--accent);
    margin-bottom: 4px;
}
.empty-state p { font-size: 15px; margin: 0; max-width: 320px; line-height: 1.45; }

/* ==================== Sub-nav Tabs ==================== */
.sub-nav {
    display: flex; gap: 0;
    margin-bottom: 16px;
    border-bottom: 2px solid var(--border);
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
    -ms-overflow-style: none;
}
.sub-nav::-webkit-scrollbar { display: none; }

.sub-nav-item {
    padding: 10px 16px;
    border: none; background: none;
    color: var(--text-secondary);
    font-size: 14px; font-weight: 500; font-family: inherit;
    cursor: pointer;
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
    transition: color 0.15s, border-color 0.15s;
    white-space: nowrap;
    flex-shrink: 0;
}

.sub-nav-item:hover { color: var(--text); }
.sub-nav-item.active { color: var(--primary); border-bottom-color: var(--primary); }

/* ==================== JS-created Toggle Switch ==================== */
/* Used by JS when creating toggles dynamically (e.g., taper table, profile wizard) */
.toggle { position: relative; display: inline-block; width: 44px; height: 24px; flex-shrink: 0; }
.toggle input { opacity: 0; width: 0; height: 0; position: absolute; }
.toggle-track {
    position: absolute; inset: 0;
    background: var(--border);
    border-radius: 12px;
    cursor: pointer;
    transition: background 0.2s;
}
.toggle-track::before {
    content: ''; position: absolute;
    width: 20px; height: 20px;
    left: 2px; bottom: 2px;
    background: var(--bg);
    border-radius: 50%;
    transition: transform 0.2s;
    box-shadow: 0 1px 2px rgba(0,0,0,0.1);
}
.toggle input:checked + .toggle-track { background: var(--primary); }
.toggle input:checked + .toggle-track::before { transform: translateX(20px); background: #fff; }

/* ==================== JS-created Badges ==================== */
/* Text darkened for WCAG AA on the pale tinted backgrounds (the previous
   orange/red on yellow/pink sat around 1.9–3.4:1). */
.badge-success { background: #c8e6c9; color: #1b5e20; }
.badge-warning { background: #fff9c4; color: #6b4e00; }
.badge-danger { background: #ffcdd2; color: #a01515; }
.badge-info { background: var(--primary-light); color: var(--primary); }

[data-theme="dark"] .badge-success { background: rgba(46,125,50,0.2); }
[data-theme="dark"] .badge-warning { background: rgba(245,127,23,0.2); }
[data-theme="dark"] .badge-danger { background: rgba(198,40,40,0.2); }

/* ==================== JS-created Setting Rows ==================== */
.setting-row {
    display: flex; align-items: center; justify-content: space-between;
    padding: 14px 0;
    border-bottom: 1px solid var(--border);
}

.setting-row:last-child { border-bottom: none; }
.setting-label { font-size: 14px; font-weight: 500; }
.setting-desc { font-size: 12px; color: var(--text-secondary); margin-top: 2px; }

/* ==================== JS-created Medication Items ==================== */
.med-item {
    display: flex; align-items: center; gap: 12px;
    padding: 12px 0;
    border-bottom: 1px solid var(--border);
}

.med-check {
    width: 24px; height: 24px;
    border: 2px solid var(--border);
    border-radius: 50%;
    cursor: pointer;
    transition: all 0.15s;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}

.med-check.checked {
    background: var(--success);
    border-color: var(--success);
    color: #fff;
}

.med-info { flex: 1; }
.med-name { font-size: 14px; font-weight: 600; }
.med-dose { font-size: 12px; color: var(--text-secondary); }

/* ==================== JS-created Buttons (kept for dynamic elements) ==================== */
.btn {
    display: inline-flex; align-items: center; justify-content: center;
    gap: 6px; padding: 0 16px; height: 36px;
    border: 1px solid var(--input);
    border-radius: calc(var(--radius) - 2px);
    background: var(--bg);
    color: var(--text);
    font-size: 14px; font-weight: 500; font-family: inherit;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
    white-space: nowrap;
    outline: none;
}

.btn:hover { background: var(--accent); color: var(--accent-fg); }
.btn:disabled { opacity: 0.5; cursor: not-allowed; }

.btn-primary {
    background: var(--primary); color: var(--primary-fg);
    border-color: var(--primary);
}

.btn-primary:hover { opacity: 0.9; background: var(--primary); color: var(--primary-fg); }

.btn-danger { background: var(--destructive); color: #fff; border-color: var(--destructive); }
.btn-danger:hover { opacity: 0.9; }

.btn-sm { height: 28px; padding: 0 10px; font-size: 12px; }
.btn-block { width: 100%; }

.btn-icon {
    padding: 0; width: 40px; height: 40px;
    border: none; background: none;
    border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    cursor: pointer; color: var(--text);
    transition: background 0.15s;
}

.btn-icon:hover { background: var(--accent); }

/* ==================== JS-created Confirm Dialog ==================== */
.confirm-overlay {
    position: fixed; inset: 0;
    background: rgba(0,0,0,0.5);
    z-index: 200;
    display: flex; align-items: center; justify-content: center;
}

.confirm-dialog {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 24px;
    max-width: 360px;
    width: 90%;
    box-shadow: var(--shadow-lg);
}

.confirm-dialog h3 { font-size: 16px; font-weight: 600; margin-bottom: 8px; }
.confirm-dialog p { font-size: 14px; color: var(--text-secondary); margin-bottom: 16px; }
.confirm-actions { display: flex; gap: 8px; justify-content: flex-end; }

/* ==================== JS-created Form Elements ==================== */
.form-group { margin-bottom: 16px; }

.form-label {
    display: block;
    font-size: 13px; font-weight: 600;
    margin-bottom: 6px;
}

.form-input, .form-select, .form-textarea {
    display: block; width: 100%;
    padding: 8px 12px;
    border: 1px solid var(--input);
    border-radius: calc(var(--radius) - 2px);
    background: var(--bg);
    color: var(--text);
    font-size: 14px; font-family: inherit;
    outline: none;
    transition: border-color 0.15s;
}

.form-input:focus, .form-select:focus, .form-textarea:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(var(--primary-rgb), 0.1);
}

.form-textarea { resize: vertical; min-height: 80px; line-height: 1.5; }
.form-select { cursor: pointer; appearance: auto; }
.form-hint { font-size: 12px; color: var(--muted-fg); margin-top: 4px; }

/* ==================== Table Overflow Wrapper ==================== */
.table-wrap { overflow-x: auto; margin: 12px 0; }

/* ==================== Responsive ==================== */
@media (max-width: 480px) {
    /* body already pads by --topbar-height-safe so we only need a
       small gap below the topbar. */
    .view { padding: 12px; }
    .mood-scale { gap: 2px; }
    .mood-btn { height: 38px; font-size: 12px; border-width: 1px; }
}
@media (max-width: 380px) {
    /* very small screens: 2 rows of 5 keeps tap targets usable */
    .mood-scale { flex-wrap: wrap; gap: 4px; }
    .mood-btn { flex: 1 1 calc(20% - 4px); height: 42px; font-size: 14px; }
}

/* ==================== Community Feed ==================== */
.post-avatar {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--primary-light);
    color: var(--primary);
    font-size: 22px;
    flex-shrink: 0;
}

.community-reactions .chip {
    min-height: 34px;
    font-size: 13px;
    transition: background .15s ease, transform .1s ease;
}
.community-reactions .chip:hover {
    background: var(--primary-light);
    transform: translateY(-1px);
}
.community-reactions .chip:not(.border) {
    background: var(--primary-light);
    border-color: var(--primary);
    color: var(--primary);
    font-weight: 600;
    box-shadow: inset 0 0 0 1.5px var(--primary);
}

#community-feed > article {
    padding: 16px;
    margin-bottom: 12px;
}
#community-feed > article > p {
    margin: 12px 0 4px;
    line-height: 1.5;
}

/* Toggle "Publier en anonyme" — discret sous le composer */
.community-anon-toggle {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 10px;
    padding: 6px 4px;
    font-size: 13px;
    color: var(--text-secondary);
    cursor: pointer;
    user-select: none;
}
.community-anon-toggle input[type="checkbox"] {
    accent-color: var(--primary);
    cursor: pointer;
    flex-shrink: 0;
}
.community-anon-toggle:hover { color: var(--text); }

/* Image de post : strictement bornée — jamais de débordement, jamais d'image
   géante qui casse la mise en page. On contraint largeur ET hauteur, en
   `contain` pour ne rien rogner. */
.community-post-image {
    display: block;
    margin-top: 8px;
    width: 100%;
    max-width: 100%;
    max-height: 400px;
    height: auto;
    object-fit: contain;
    background: var(--accent);
    border-radius: var(--radius);
}

/* Community page header */
.community-header {
    margin: 4px 0 16px;
}
.community-title {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0 0 6px;
    font-size: 28px;
    font-weight: 800;
    letter-spacing: -0.02em;
    color: var(--text);
}
.community-title-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 12px;
    background: var(--primary);
    color: var(--primary-fg);
    flex-shrink: 0;
}
.community-title-icon i,
.community-title-icon svg { width: 22px; height: 22px; }
.community-subtitle {
    margin: 0;
    color: var(--text-secondary);
    font-size: 14px;
    line-height: 1.45;
}

/* Forum hero — promoted CTA pointing users to the long-form forum */
.community-forum-hero {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px 18px;
    margin-bottom: 16px;
    border-radius: 16px;
    background: linear-gradient(135deg, var(--primary) 0%, var(--brand-bar-from) 100%);
    color: var(--primary-fg);
    text-decoration: none;
    box-shadow: 0 6px 20px -6px rgba(27, 67, 50, 0.45);
    transition: transform .15s ease, box-shadow .15s ease;
    position: relative;
    overflow: hidden;
}
.community-forum-hero:hover {
    transform: translateY(-1px);
    box-shadow: 0 10px 24px -6px rgba(27, 67, 50, 0.55);
}
.community-forum-hero--facebook {
    background: linear-gradient(135deg, #1877F2 0%, #0e5fc0 100%);
    box-shadow: 0 6px 20px -6px rgba(24, 119, 242, 0.45);
}
.community-forum-hero--facebook:hover {
    box-shadow: 0 10px 24px -6px rgba(24, 119, 242, 0.55);
}
/* "En construction" — non-clickable hero (Facebook group not live yet) */
.community-forum-hero.is-disabled {
    filter: grayscale(0.55);
    opacity: 0.72;
    cursor: not-allowed;
    pointer-events: none;
    box-shadow: none;
}
.community-soon-badge {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .02em;
    background: rgba(255, 255, 255, 0.22);
    color: #fff;
    white-space: nowrap;
}
/* Unread accent on the Communauté nav button — pulsing dot + bolder label */
[data-nav="community"] { position: relative; }
.community-unread-dot {
    display: inline-block;
    width: 9px; height: 9px;
    border-radius: 50%;
    background: var(--destructive, #e5484d);
    margin-left: 8px;
    flex: 0 0 auto;
    vertical-align: middle;
    box-shadow: 0 0 0 0 rgba(229, 72, 77, 0.55);
    animation: community-pulse 2s infinite;
}
@keyframes community-pulse {
    0%   { box-shadow: 0 0 0 0 rgba(229, 72, 77, 0.55); }
    70%  { box-shadow: 0 0 0 7px rgba(229, 72, 77, 0); }
    100% { box-shadow: 0 0 0 0 rgba(229, 72, 77, 0); }
}
[data-nav="community"].has-unread { font-weight: 700; }
/* Bottom-nav slot is icon-over-label and centered → float the dot top-right */
.nav-item[data-nav="community"] .community-unread-dot {
    position: absolute;
    top: 6px;
    right: calc(50% - 16px);
    margin-left: 0;
}

/* Section labels separating "le mur" (in-app feed) from "autres espaces" */
.community-spaces-label,
.community-wall-label {
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--muted-fg);
    margin: 4px 2px 10px;
}
.community-wall-label {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 20px;
    color: var(--primary);
}
.community-wall-label .i-icn { font-size: 18px; }
.community-forum-hero-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.18);
    flex-shrink: 0;
}
.community-forum-hero-icon i,
.community-forum-hero-icon svg { width: 26px; height: 26px; color: var(--primary-fg); }
.community-forum-hero-body { flex: 1; min-width: 0; }
.community-forum-hero-eyebrow {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    opacity: 0.75;
    margin-bottom: 2px;
}
.community-forum-hero-title {
    font-size: 17px;
    font-weight: 700;
    line-height: 1.2;
}
.community-forum-hero-text {
    font-size: 12.5px;
    opacity: 0.85;
    margin-top: 3px;
    line-height: 1.35;
}
.community-forum-hero-cta {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 12px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.18);
    font-size: 13px;
    font-weight: 600;
    flex-shrink: 0;
}
.community-forum-hero-cta i,
.community-forum-hero-cta svg { width: 16px; height: 16px; }
@media (max-width: 480px) {
    .community-forum-hero-cta span { display: none; }
    .community-forum-hero-cta { padding: 8px; }
}

/* Community filter bar */
.community-filter-bar {
    display: flex;
    gap: 8px;
    margin-bottom: 12px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: 4px;
}
.community-filter-bar::-webkit-scrollbar { display: none; }
.community-filter-bar .chip {
    white-space: nowrap;
    font-size: 13px;
    gap: 4px;
}
.community-filter-bar .chip:not(.border) {
    background: var(--primary-light);
    border-color: var(--primary);
    color: var(--primary);
}

/* Comment threading */
.comment-reply {
    margin-left: 32px;
    padding-left: 12px;
    border-left: 2px solid var(--border);
}
.comment-reply-btn {
    background: none;
    border: none;
    color: var(--muted-fg);
    font-size: 12px;
    cursor: pointer;
    padding: 4px 0 0;
    text-decoration: underline;
}
.comment-reply-btn:hover {
    color: var(--primary);
}
.comment-quote {
    font-size: 12px;
    color: var(--muted-fg);
    border-left: 3px solid var(--border);
    padding: 2px 8px;
    margin-bottom: 6px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.comment-reply-input {
    margin: 8px 0 8px 32px;
    padding-left: 12px;
    border-left: 2px solid var(--primary);
}
.comment-reply-input .comment-quote {
    margin-bottom: 6px;
}

/* Delete account dialog */
.delete-account-dialog::backdrop {
    background: rgba(0, 0, 0, 0.5);
}
.delete-account-dialog .error {
    background: var(--destructive);
    color: #fff;
}
.delete-account-dialog .error:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

/* ==================== Calendar view ==================== */
.cal-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 4px;
}
.cal-day-header {
    text-align: center;
    font-size: 11px;
    font-weight: 600;
    color: var(--muted-fg);
    padding: 6px 0;
    text-transform: uppercase;
    letter-spacing: .5px;
}
.cal-day {
    aspect-ratio: 1;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--surface);
    position: relative;
    cursor: pointer;
    font-family: inherit;
    padding: 4px;
    transition: transform .12s, border-color .12s;
    color: var(--text);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    overflow: hidden;
}
.cal-day:hover { transform: scale(1.05); border-color: var(--primary, #00695C); z-index: 2; }
.cal-day--empty { visibility: hidden; }
.cal-day--today { outline: 2px solid var(--primary, #00695C); outline-offset: -2px; }
/* Day with at least one entry: subtle cream-tinted background so the
   eye spots active days at a glance even before reading the gommettes. */
.cal-day--has-entry:not([class*="cal-day--mood-"]) {
    background: rgba(var(--primary-rgb), 0.06);
}
[data-theme="dark"] .cal-day--has-entry:not([class*="cal-day--mood-"]) {
    background: rgba(149, 213, 178, 0.10);
}
.cal-day-num { font-size: 13px; font-weight: 600; align-self: flex-start; }
.cal-day-marks {
    font-size: 10px;
    display: flex;
    align-items: center;
    gap: 2px;
    flex-wrap: wrap;
    line-height: 1;
}
.cal-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--primary, #00695C); display: inline-block; }
.cal-benzo-dot { width: 6px; height: 6px; border-radius: 50%; background: #b45309; display: inline-block; }

/* Four-color gommettes — one per data source. Same dot size as the
   legacy .cal-dot so the calendar grid keeps its rhythm. */
.cal-gommette {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    display: inline-block;
}
.cal-gommette--carnet { background: var(--gom-carnet, #d97706); }
.cal-gommette--meds   { background: var(--gom-meds,   var(--primary)); }
.cal-gommette--sym    { background: var(--gom-sym,    #be185d); }
/* Sevrage gommette: outline ring when a step is scheduled, solid disc
   when the user has tapped "J'ai pris ma dose" on that day. */
.cal-gommette--taper {
    background: transparent;
    box-sizing: border-box;
    border: 1.5px solid var(--gom-taper, #1d4ed8);
}
.cal-gommette--taper.cal-gommette--taken {
    background: var(--gom-taper, #1d4ed8);
    border-color: var(--gom-taper, #1d4ed8);
}

/* (Removed) The old "no-carnet-paper" cream override is obsolete — the carnet
   is now the modern teal design in carnet.css regardless of any legacy setting. */

/* Legend printed below the grid so the user can map colour → meaning.
   Hidden on dark theme via [data-theme="dark"] override of the dot bg. */
.cal-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 14px;
    margin: 12px 0 0;
    padding: 10px 12px;
    border-top: 1px solid var(--border, rgba(0,0,0,.08));
    font-size: 12px;
    color: var(--muted-fg, #555);
}
.cal-legend > span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    line-height: 1;
}
.cal-day--mood-1  { background: rgba(220, 38, 38, 0.35); }
.cal-day--mood-2  { background: rgba(220, 38, 38, 0.28); }
.cal-day--mood-3  { background: rgba(234, 88, 12, 0.28); }
.cal-day--mood-4  { background: rgba(234, 88, 12, 0.2); }
.cal-day--mood-5  { background: rgba(234, 179, 8, 0.22); }
.cal-day--mood-6  { background: rgba(234, 179, 8, 0.16); }
.cal-day--mood-7  { background: rgba(132, 204, 22, 0.2); }
.cal-day--mood-8  { background: rgba(132, 204, 22, 0.3); }
.cal-day--mood-9  { background: rgba(34, 197, 94, 0.3); }
.cal-day--mood-10 { background: rgba(34, 197, 94, 0.4); }

.cal-dialog-backdrop {
    position: fixed; inset: 0;
    background: rgba(0,0,0,0.5);
    z-index: 500;
    display: flex; align-items: center; justify-content: center;
    padding: 16px;
    backdrop-filter: blur(2px);
}
.cal-dialog {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 14px;
    max-width: 520px; width: 100%;
    max-height: 85vh; overflow-y: auto;
    padding: 18px 20px;
    box-shadow: 0 8px 32px rgba(0,0,0,0.25);
}
.cal-dialog-mood {
    background: var(--surface-variant);
    padding: 8px 12px;
    border-radius: 8px;
    margin-bottom: 8px;
    font-size: 14px;
}
.cal-flag {
    display: inline-block;
    padding: 4px 10px;
    background: var(--surface-variant);
    border-radius: 9999px;
    font-size: 12.5px;
    margin: 4px 4px 0 0;
}
.cal-dialog-entry {
    margin-bottom: 10px;
    padding: 10px 12px;
    background: var(--surface-variant);
    border-radius: 8px;
}
.cal-dialog-entry strong { display: block; margin-bottom: 4px; color: var(--primary, #00695C); }
.cal-dialog-entry p { margin: 0; font-size: 13px; line-height: 1.5; }

/* ==================== Sobriety (% no streaks) ==================== */
.sobriety-group { margin-bottom: 14px; }
.sobriety-group:last-child { margin-bottom: 0; }
.sobriety-group h4 {
    margin: 0 0 8px;
    font-size: 13px; font-weight: 600;
    color: var(--muted-fg);
    text-transform: uppercase; letter-spacing: .4px;
}
.sobriety-row {
    display: grid;
    grid-template-columns: 70px 56px 48px 1fr;
    gap: 8px; align-items: center;
    padding: 6px 0; font-size: 13px;
}
.sobriety-label { color: var(--text); font-weight: 600; }
.sobriety-frac { color: var(--muted-fg); font-size: 12px; }
.sobriety-pct { color: var(--primary, #00695C); font-weight: 700; text-align: right; }
.sobriety-bar {
    height: 6px;
    background: var(--surface-variant);
    border-radius: 9999px;
    overflow: hidden;
    position: relative;
}
.sobriety-bar-fill {
    display: block; height: 100%;
    background: linear-gradient(90deg, var(--primary), #2ea043);
    border-radius: inherit;
    transition: width .4s ease;
}
@media (max-width: 480px) {
    .sobriety-row { grid-template-columns: 60px 46px 40px 1fr; font-size: 12px; }
}

/* ==================== Journal — photo thumbnail ==================== */
.diary-entry-thumb {
    width: 72px; height: 72px;
    object-fit: cover;
    border-radius: 10px;
    border: 1px solid var(--border);
    flex-shrink: 0;
    background: var(--surface-variant);
}

/* ==================== Journal — templates empty state ==================== */
.diary-template-btn {
    background: var(--surface-variant);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 14px 12px;
    cursor: pointer;
    text-align: center;
    transition: transform .12s, border-color .12s, background .12s;
    color: var(--text);
    font-family: inherit;
    font-size: 13px;
}
.diary-template-btn:hover {
    transform: translateY(-1px);
    border-color: var(--primary, #00695C);
    background: var(--surface);
}
.diary-template-btn strong { display: block; font-size: 13px; }

/* ==================== Naturals — bandeau débutants ==================== */
.naturals-beginners {
    background: linear-gradient(135deg, rgba(46,160,67,0.1), rgba(82,183,136,0.06));
    border: 1px solid rgba(46,160,67,0.25);
    border-radius: 12px;
    padding: 12px 14px;
    margin-bottom: 12px;
    font-size: 13px;
}
.naturals-beginners strong { color: var(--primary, #00695C); }
.naturals-beginners .nb-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.naturals-beginners .nb-chip {
    display: inline-block;
    padding: 3px 10px;
    background: rgba(46,160,67,0.12);
    border-radius: 9999px;
    font-size: 12px;
    color: var(--primary, #00695C);
    font-weight: 600;
    cursor: pointer;
    border: none;
    font-family: inherit;
}
.naturals-beginners .nb-chip:hover { background: rgba(46,160,67,0.22); }

/* ==================== Médicaments — blocs moment du jour ==================== */
.meds-tod-block {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 12px 14px;
    margin-bottom: 10px;
}
.meds-tod-header {
    display: flex; justify-content: space-between; align-items: baseline;
    padding-bottom: 8px;
    margin-bottom: 6px;
    border-bottom: 1px solid var(--border);
}
.meds-tod-header strong { font-size: 14px; color: var(--primary, #00695C); }
.meds-tod-hours { font-size: 11px; color: var(--muted-fg); }
.meds-tod-block .med-item { margin-top: 6px; }
.med-taken-time { font-size: 12px; color: var(--muted-fg); margin-left: 4px; }

/* Time-of-day chip picker in add-med-form */
.med-tod-chip {
    cursor: pointer;
    transition: background .15s, border-color .15s;
}
.med-tod-chip.selected {
    background: var(--primary, #00695C);
    color: #fff;
    border-color: var(--primary, #00695C);
}

/* ==================== Dashboard widgets ==================== */
.dash-article-link,
.dash-nat-item,
.dash-forum-item {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 10px 14px;
    background: var(--surface-variant);
    border: 1px solid var(--border);
    border-radius: 10px;
    text-decoration: none;
    color: var(--text);
    transition: transform .12s, background .12s, border-color .12s;
}
.dash-article-link:hover,
.dash-nat-item:hover,
.dash-forum-item:hover {
    transform: translateY(-1px);
    background: var(--surface);
    border-color: var(--primary, #00695C);
}
.dash-article-link strong,
.dash-nat-item strong { font-size: 14px; color: var(--text); }
.dash-article-link span,
.dash-nat-item span { font-size: 12px; color: var(--muted-fg); line-height: 1.4; }
.dash-nat-item + .dash-nat-item,
.dash-forum-item + .dash-forum-item { margin-top: 8px; }
.dash-forum-item { flex-direction: row; align-items: center; justify-content: space-between; gap: 10px; }
.dash-forum-title { font-size: 13px; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; min-width: 0; }
.dash-forum-count {
    flex-shrink: 0;
    font-size: 11px;
    color: var(--muted-fg);
    background: var(--surface);
    padding: 2px 8px;
    border-radius: 9999px;
    border: 1px solid var(--border);
}

/* ==================== UI breathing (spacing audit) ==================== */
/* Generous & consistent spacing across cards, headings, chips, forms and recipe layouts. */

/* View padding: wider gutters on mobile, more on desktop. The
   topbar offset only applies on desktop (≥768) — on mobile, body
   already pads by --topbar-height-safe via the cream block, so adding
   it again would push content way below the fold. */
.view {
    padding: calc(var(--topbar-height-safe) + 20px) 20px 28px;
}
@media (max-width: 767px) {
    .view { padding-top: 12px; }
}
@media (min-width: 600px) {
    .view { padding-left: 24px; padding-right: 24px; }
}
@media (min-width: 1024px) {
    .view { padding-left: 32px; padding-right: 32px; }
}

/* Article cards — roomier inside, rhythm outside */
body.benzo-ready article.round {
    padding: 20px;
}
body.benzo-ready article.round + article.round,
body.benzo-ready .view > article.round:not(:first-child) {
    margin-top: 14px;
}

/* Section headings breathe before body content */
.view > h5 { margin: 0 0 16px; }
.view > h6 { margin: 0 0 12px; }
article.round > h6:first-child { margin-bottom: 14px; }

/* Back-button rows at the top of sub-views */
.view > .row:first-child { margin-bottom: 14px !important; }

/* Chip groups — more generous gap */
.chip-group { gap: 10px; }
.chip-group + * { margin-top: 14px; }

/* Form fields — vertical rhythm */
.field.round.border,
.field.round { margin-bottom: 14px; }
.field.round + .row,
.field.round + .chip-group { margin-top: 12px; }

/* Nat entries (per-category view) */
.nat-entry { margin-bottom: 14px; padding: 16px 18px; }
.nat-entry__head { margin-bottom: 10px; }
.nat-entry__desc { line-height: 1.55; margin: 0 0 10px; }
.nat-entry > * + * { margin-top: 8px; }

/* Recipe cards — sections clearly separated */
.nat-recipe { padding: 18px 20px; }
.nat-recipe-section { padding: 12px 14px; margin-top: 12px; border-radius: 10px; }
.nat-recipe-section p { line-height: 1.55; }
.nat-recipe-ingredients { margin-top: 4px; }
.nat-recipe-ingredient { padding: 8px 0; gap: 10px; }

/* Meds time-of-day blocks */
.meds-tod-block { padding: 16px 18px; margin-bottom: 12px; }
.meds-tod-header { padding-bottom: 10px; margin-bottom: 10px; }
.med-item { padding: 12px 14px; border-radius: 10px; }
.med-item + .med-item { margin-top: 8px; }

/* Calendar grid and cells — a touch more air */
.cal-grid { gap: 6px; }
.cal-day { padding: 6px; }
.cal-day-header { padding: 8px 0; }
.meds-tod-chip-wrap { gap: 10px; }

/* Sobriety rows */
.sobriety-group { margin-bottom: 16px; }
.sobriety-row { padding: 8px 0; gap: 10px; }

/* Diary entries */
.diary-entry { padding: 14px 16px; margin-bottom: 10px; border-radius: 12px; }
.diary-entry + .diary-entry { margin-top: 8px; }

/* Crisis country grouping */
.crisis-country { margin-bottom: 12px; }
.crisis-country-summary { padding: 14px 16px; }
.crisis-country-body { padding: 12px 14px; gap: 10px; }
.crisis-item { padding: 12px 14px; }

/* Dashboard widget cards */
.dash-article-link,
.dash-nat-item,
.dash-forum-item { padding: 12px 16px; }
.dash-nat-item + .dash-nat-item,
.dash-forum-item + .dash-forum-item { margin-top: 10px; }

/* (Naturals hub spacing now lives in the consolidated .nat-hub block above
   — these duplicate rules were trimmed.) */

/* Quick actions tiles in Dashboard — padding override against Beer defaults */
.quick-action { padding: 18px 14px !important; }

/* Constrain content width on very large screens for better line-length */
@media (min-width: 1400px) {
    .view { max-width: 920px; }
}

/* ==================== Landing — Dual access badge + gallery ==================== */
.lp-cta-note {
    margin: 10px 0 0;
    text-align: center;
    font-size: 13px;
    color: #5a7a6a;
}

/* App stores row — Google Play + Web App */
.lp-app-stores {
    display: flex;
    gap: 12px;
    justify-content: center;
    flex-wrap: wrap;
    margin: 22px 0 0;
}
.lp-store-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: var(--brand-bar-from);
    color: #fff;
    text-decoration: none;
    padding: 10px 18px;
    border-radius: 10px;
    font-family: system-ui, -apple-system, 'Segoe UI', sans-serif;
    transition: transform .12s ease, box-shadow .12s ease, background .12s ease;
    box-shadow: 0 2px 6px rgba(0,40,20,.18);
    min-width: 180px;
}
.lp-store-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0,40,20,.25);
    background: #0f2c20;
    color: #fff;
}
.lp-store-btn small {
    display: block;
    font-size: 10px;
    line-height: 1;
    opacity: .8;
    text-transform: uppercase;
    letter-spacing: .04em;
    margin-bottom: 2px;
}
.lp-store-btn strong {
    display: block;
    font-size: 15px;
    line-height: 1.1;
    font-weight: 600;
}
.lp-store-btn--web {
    background: transparent;
    color: var(--text);
    border: 1.5px solid var(--text);
    box-shadow: none;
}
.lp-store-btn--web:hover {
    background: var(--primary-light);
    color: var(--text);
}
[data-theme="dark"] .lp-store-btn { background: var(--primary); }
[data-theme="dark"] .lp-store-btn:hover { background: var(--brand-bar-from); }
[data-theme="dark"] .lp-store-btn--web {
    background: transparent;
    color: var(--accent);
    border-color: var(--accent);
}
[data-theme="dark"] .lp-store-btn--web:hover {
    background: rgba(var(--primary-rgb), .25);
    color: var(--primary-light);
}
@media (max-width: 480px) {
    .lp-store-btn { min-width: 0; flex: 1; padding: 10px 14px; }
}

/* Forum direct-access block — landing page */
.lp-forum-direct {
    max-width: 540px;
    margin: 18px auto 0;
    padding: 18px 20px;
    text-align: center;
    background: rgba(255,255,255,0.5);
    border: 1px solid rgba(var(--primary-rgb), 0.18);
    border-radius: 14px;
}
.lp-forum-direct__sep {
    display: block;
    width: 40px;
    height: 2px;
    background: rgba(var(--primary-rgb), 0.3);
    margin: 0 auto 14px;
    border-radius: 2px;
}
.lp-forum-direct__lead {
    margin: 0 0 12px;
    font-size: 14px;
    color: var(--text);
}
.lp-forum-direct__lead strong { color: var(--primary); }
.lp-forum-direct__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 12px 22px;
    background: #fff;
    color: var(--text);
    border: 2px solid var(--primary);
    border-radius: 10px;
    text-decoration: none;
    font-size: 15px;
    font-weight: 700;
    transition: background .15s, color .15s, transform .12s, box-shadow .12s;
    min-height: 44px;
}
.lp-forum-direct__btn:hover {
    background: var(--primary);
    color: #fff;
    transform: translateY(-1px);
    box-shadow: 0 3px 10px rgba(var(--primary-rgb), .25);
}
.lp-forum-direct__btn:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 3px;
}
.lp-forum-direct__arrow { font-weight: 700; }
.lp-forum-direct__note {
    margin: 10px 0 0;
    font-size: 12.5px;
    color: #5a7a6a;
    line-height: 1.45;
}
[data-theme="dark"] .lp-forum-direct {
    background: rgba(27,46,27,0.7);
    border-color: rgba(149,213,178,0.25);
}
[data-theme="dark"] .lp-forum-direct__lead { color: var(--primary-light); }
[data-theme="dark"] .lp-forum-direct__lead strong { color: var(--accent); }
[data-theme="dark"] .lp-forum-direct__btn {
    background: rgba(var(--primary-rgb), 0.15);
    color: var(--primary-light);
    border-color: var(--accent);
}
[data-theme="dark"] .lp-forum-direct__btn:hover {
    background: var(--accent);
    color: #081c15;
}
[data-theme="dark"] .lp-forum-direct__note { color: #9ab89a; }

/* Resources direct-access block — landing page.
   Reuses .lp-forum-direct__lead / __sep / __note classes for the lead/sep/note;
   only the chip row needs its own layout. */
.lp-resources-direct {
    max-width: 540px;
    margin: 14px auto 0;
    padding: 16px 20px;
    text-align: center;
    background: rgba(255,255,255,0.5);
    border: 1px solid rgba(var(--primary-rgb), 0.18);
    border-radius: 14px;
}
.lp-resources-direct__chips {
    margin: 0 0 6px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
}
.lp-resources-direct__chips a {
    display: inline-block;
    padding: 6px 12px;
    background: #fff;
    color: var(--text);
    border: 1px solid var(--primary);
    border-radius: 999px;
    text-decoration: none;
    font-size: 13px;
    font-weight: 600;
    transition: background .15s, color .15s;
}
.lp-resources-direct__chips a:hover {
    background: var(--primary);
    color: #fff;
}
.lp-resources-direct__more {
    background: var(--primary) !important;
    color: #fff !important;
}
.lp-resources-direct__more:hover {
    background: var(--brand-bar-from) !important;
}
[data-theme="dark"] .lp-resources-direct {
    background: rgba(27,46,27,0.7);
    border-color: rgba(149,213,178,0.25);
}
[data-theme="dark"] .lp-resources-direct__chips a {
    background: rgba(var(--primary-rgb), 0.15);
    color: var(--primary-light);
    border-color: var(--accent);
}
[data-theme="dark"] .lp-resources-direct__chips a:hover {
    background: var(--accent);
    color: #081c15;
}
[data-theme="dark"] .lp-resources-direct__more {
    background: var(--accent) !important;
    color: #081c15 !important;
}
.lp-dual-access {
    max-width: 540px;
    margin: 22px auto 0;
    padding: 16px 18px;
    background: rgba(255, 255, 255, 0.6);
    border: 1px solid rgba(46, 160, 67, 0.2);
    border-radius: 14px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}
[data-theme="dark"] .lp-dual-access {
    background: rgba(20, 40, 30, 0.6);
    border-color: rgba(82, 183, 136, 0.25);
}
.lp-dual-access__title {
    text-align: center;
    font-size: 15px;
    color: var(--text);
    margin-bottom: 10px;
}
[data-theme="dark"] .lp-dual-access__title { color: var(--primary-light); }
.lp-dual-access__arrow { color: var(--primary); margin: 0 4px; font-weight: 700; }
.lp-dual-access__row {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 10px;
}
.lp-dual-access__item {
    display: flex; align-items: center; gap: 10px;
    padding: 8px 10px;
    background: rgba(82, 183, 136, 0.08);
    border-radius: 10px;
}
.lp-dual-access__ic {
    flex-shrink: 0;
    width: 32px; height: 32px;
    border-radius: 8px;
    display: flex; align-items: center; justify-content: center;
    background: rgba(46, 160, 67, 0.15);
    color: var(--primary);
}
.lp-dual-access__name { font-size: 13px; font-weight: 700; color: var(--text); }
.lp-dual-access__sub { font-size: 11.5px; color: #5a7a6a; line-height: 1.35; }
[data-theme="dark"] .lp-dual-access__name { color: var(--primary-light); }
[data-theme="dark"] .lp-dual-access__sub { color: var(--accent); }
.lp-dual-access__sep { font-size: 20px; font-weight: 700; color: var(--primary); }
.lp-dual-access__forumcta {
    display: block;
    text-align: center;
    margin-top: 12px;
    font-size: 13px;
    color: var(--primary);
    text-decoration: none;
    font-weight: 600;
}
.lp-dual-access__forumcta:hover { text-decoration: underline; }
@media (max-width: 480px) {
    .lp-dual-access__row { grid-template-columns: 1fr; }
    .lp-dual-access__sep { display: none; }
}

/* Gallery */
.lp-gallery-sec {
    background: #f8fbf9;
    padding: 48px 0;
}
[data-theme="dark"] .lp-gallery-sec { background: rgba(15, 31, 23, 0.5); }
.lp-gallery {
    display: flex;
    gap: 16px;
    overflow-x: auto;
    overflow-y: hidden;
    padding: 8px 4px 20px;
    scroll-snap-type: x mandatory;
    scrollbar-width: thin;
    scrollbar-color: rgba(46,160,67,0.4) transparent;
}
.lp-gallery::-webkit-scrollbar { height: 8px; }
.lp-gallery::-webkit-scrollbar-thumb { background: rgba(46,160,67,0.4); border-radius: 8px; }
.lp-gallery__card {
    flex: 0 0 260px;
    margin: 0;
    background: #fff;
    border: 1px solid #d7e2db;
    border-radius: 18px;
    overflow: hidden;
    box-shadow: 0 6px 20px rgba(27, 67, 50, 0.08);
    scroll-snap-align: start;
    display: flex; flex-direction: column;
    transition: transform .18s, box-shadow .18s;
}
[data-theme="dark"] .lp-gallery__card { background: #1a2e23; border-color: #2a4334; }
.lp-gallery__card:hover { transform: translateY(-3px); box-shadow: 0 10px 28px rgba(27, 67, 50, 0.14); }
.lp-gallery__card img {
    display: block;
    width: 100%;
    aspect-ratio: 9 / 17;
    object-fit: cover;
    object-position: top;
    background: linear-gradient(135deg, var(--primary-light), var(--border));
}
[data-theme="dark"] .lp-gallery__card img { background: linear-gradient(135deg, rgba(82,183,136,0.15), rgba(27,67,50,0.35)); }
.lp-gallery__card figcaption {
    padding: 12px 14px 14px;
    display: flex; flex-direction: column; gap: 2px;
}
.lp-gallery__card figcaption strong {
    font-size: 14px;
    color: var(--text);
}
[data-theme="dark"] .lp-gallery__card figcaption strong { color: var(--primary-light); }
.lp-gallery__card figcaption span {
    font-size: 12px;
    color: #5a7a6a;
    line-height: 1.4;
}
@media (min-width: 900px) {
    .lp-gallery__card { flex: 0 0 280px; }
}

/* Landing — live forum posts in community grid */
.lp-post-live {
    display: block;
    padding: 10px 12px;
    background: #f8fbf9;
    border: 1px solid #d7e2db;
    border-radius: 10px;
    text-decoration: none;
    color: inherit;
    margin-bottom: 8px;
    transition: transform .12s, border-color .12s;
}
.lp-post-live:hover { transform: translateY(-1px); border-color: var(--primary); }
.lp-post-live .lp-post-name { font-weight: 600; color: var(--text); font-size: 13px; margin-bottom: 2px; }
.lp-post-live .lp-post-meta { font-size: 11px; color: #5a7a6a; }
[data-theme="dark"] .lp-post-live { background: rgba(20,40,30,0.5); border-color: #2a4334; }
[data-theme="dark"] .lp-post-live .lp-post-name { color: var(--primary-light); }
[data-theme="dark"] .lp-post-live .lp-post-meta { color: var(--accent); }
.lp-topic-live {
    display: flex; justify-content: space-between; align-items: center; gap: 8px;
    padding: 8px 10px;
    background: rgba(82,183,136,0.06);
    border-radius: 8px;
    text-decoration: none;
    color: var(--text);
    font-size: 13px;
    margin-bottom: 6px;
    transition: background .12s;
}
.lp-topic-live:hover { background: rgba(82,183,136,0.12); }
.lp-topic-live .lp-topic-meta { font-size: 11px; color: #5a7a6a; flex-shrink: 0; }
[data-theme="dark"] .lp-topic-live { color: var(--primary-light); background: rgba(82,183,136,0.1); }
[data-theme="dark"] .lp-topic-live .lp-topic-meta { color: var(--accent); }

/* ==================== Print ==================== */
@media print {
    header, nav.bottom, .crisis-fab, .toast, .offline-bar, .wip-banner { display: none !important; }
    body { padding: 0; }
    .view { max-width: 100%; padding: 0 !important; }
}

/* ==================== Landing Page ==================== */
#landing-page {
    position: fixed;
    inset: 0;
    z-index: 150;
    overflow-y: auto;
    overflow-x: hidden;
    background: var(--bg);
    font-family: inherit;
    -webkit-overflow-scrolling: touch;
}

/* Reserve space at the bottom of the landing so the fixed cookie banner
   doesn't cover the CTAs (Créer mon compte / Se connecter / Accéder au
   forum). Applies only while the banner is on screen. */
body.has-cookie-banner #landing-page { padding-bottom: 140px; }
@media (min-width: 768px) {
    body.has-cookie-banner #landing-page { padding-bottom: 80px; }
}

.lp-container {
    max-width: 960px;
    margin: 0 auto;
    padding: 0 24px;
}

/* Hero */
.lp-hero {
    background: linear-gradient(155deg, #0b3320 0%, #195c3e 45%, #2a7a56 100%);
    padding: 72px 0 80px;
    text-align: center;
    position: relative;
    overflow: hidden;
}
@media (max-width: 767px) {
    .lp-hero { padding: 28px 0 40px; }
}

.lp-deco {
    position: absolute;
    background: var(--accent);
    border-radius: 60% 40% 70% 30% / 50% 60% 40% 50%;
    opacity: 0.055;
    pointer-events: none;
}
.lp-deco-1 { width: 420px; height: 420px; top: -160px; left: -110px; transform: rotate(22deg); }
.lp-deco-2 { width: 260px; height: 260px; bottom: -90px; right: -70px; transform: rotate(-18deg); }
.lp-deco-3 { width: 160px; height: 160px; top: 40%; right: 8%; opacity: 0.035; }

.lp-logo-wrap { margin-bottom: 8px; }
.lp-leaf-icon { width: 68px; height: 68px; filter: drop-shadow(0 6px 16px rgba(0,0,0,0.35)); }

.lp-title {
    font-size: clamp(2.4rem, 7vw, 4rem);
    font-weight: 800;
    color: #fff;
    margin: 0 0 14px;
    letter-spacing: -0.03em;
    line-height: 1;
}

.lp-tagline {
    font-size: clamp(1rem, 2.6vw, 1.25rem);
    color: var(--border);
    margin: 0 0 20px;
    font-weight: 400;
}

.lp-desc {
    font-size: .98rem;
    color: var(--accent);
    max-width: 540px;
    margin: 0 auto 38px;
    line-height: 1.75;
}
@media (max-width: 767px) {
    .lp-logo-wrap { margin-bottom: 4px; }
    .lp-leaf-icon { width: 48px; height: 48px; }
    .lp-title {
        margin-bottom: 8px;
        /* On mobile, drop the gradient clip and use solid white for
           maximum contrast against the dark green hero background. */
        background: none;
        -webkit-background-clip: unset; background-clip: unset;
        color: #fff;
        text-shadow: 0 2px 12px rgba(0, 0, 0, 0.55), 0 1px 3px rgba(0, 0, 0, 0.4);
    }
    .lp-tagline { margin-bottom: 10px; line-height: 1.3; }
    /* Hide the long description on mobile — the tagline covers the value prop
       and hiding it brings the resource chips into the initial viewport. */
    .lp-desc { display: none; }
    .lp-btn-primary, .lp-btn-ghost { padding: 12px 22px; }

    /* Resource chips — compact 2-column grid on small screens */
    .lp-resources-direct {
        margin: 10px 0 0;
        padding: 12px 14px;
    }
    .lp-resources-direct__chips {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 6px;
        justify-items: stretch;
    }
    .lp-resources-direct__chips a {
        text-align: center;
        font-size: 12px;
        padding: 7px 8px;
    }
    /* "Toutes les ressources →" spans both columns */
    .lp-resources-direct__more {
        grid-column: 1 / -1;
    }
}

.lp-cta-row {
    display: flex;
    gap: 12px;
    justify-content: center;
    flex-wrap: wrap;
    margin-bottom: 20px;
}

.lp-btn-primary {
    background: var(--primary);
    color: #0b3320;
    border: none;
    padding: 15px 30px;
    font-size: 1rem;
    font-weight: 700;
    border-radius: 50px;
    cursor: pointer;
    transition: background .2s, transform .15s, box-shadow .2s;
    font-family: inherit;
    box-shadow: 0 4px 20px rgba(0,0,0,0.3);
}
.lp-btn-primary:hover  { background: var(--accent); transform: translateY(-2px); box-shadow: 0 8px 28px rgba(0,0,0,0.35); }
.lp-btn-primary:active { transform: translateY(0); }

.lp-btn-ghost {
    background: transparent;
    color: #fff;
    border: 2px solid rgba(255,255,255,0.55);
    padding: 13px 30px;
    font-size: 1rem;
    font-weight: 600;
    border-radius: 50px;
    cursor: pointer;
    transition: background .2s, border-color .2s;
    font-family: inherit;
}
.lp-btn-ghost:hover { background: rgba(255,255,255,0.12); border-color: rgba(255,255,255,0.85); }

/* Variant of .lp-btn-ghost rendered as an <a> with an inline icon.
   Same visual weight as the login button so the "read freely" path
   has equal billing to the "sign up / log in" path. */
a.lp-btn-ghost.lp-btn-resources {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    text-decoration: none;
    line-height: 1;
}
a.lp-btn-ghost.lp-btn-resources .i-icn { display: inline-flex; }

.lp-trust-line {
    color: var(--accent);
    font-size: .86rem;
    margin: 0;
}

/* Section base */
.lp-sec { padding: 64px 24px; }
.lp-sec-green { background: var(--bg); }
.lp-sec-dark  { background: #1a4731; }
.lp-sec-warn  { background: #fffde7; padding: 36px 24px; }
.lp-sec-light { background: #f8fdf9; }
.lp-sec-cta   { background: #185c3e; text-align: center; padding: 56px 24px; }

.lp-sh {
    text-align: center;
    font-size: clamp(1.35rem, 4vw, 1.85rem);
    font-weight: 700;
    color: #1a4731;
    margin: 0 0 40px;
}

/* Feature cards */
.lp-feat-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 20px;
}

.lp-feat {
    background: #fff;
    border-radius: 18px;
    padding: 28px 22px;
    box-shadow: 0 2px 16px rgba(20,80,50,0.07);
    transition: transform .2s, box-shadow .2s;
}
.lp-feat:hover { transform: translateY(-4px); box-shadow: 0 10px 28px rgba(20,80,50,0.13); }
.lp-feat-icon { font-size: 2.1rem; display: block; margin-bottom: 12px; line-height: 1; }
.lp-feat h3   { font-size: 1rem; font-weight: 700; color: #1a4731; margin: 0 0 8px; }
.lp-feat p    { font-size: .87rem; color: #5a7a6a; line-height: 1.65; margin: 0; }

/* Privacy section */
.lp-priv-inner {
    display: flex;
    align-items: center;
    gap: 48px;
    flex-wrap: wrap;
}

.lp-priv-text { flex: 1; min-width: 280px; }

.lp-priv-badge {
    display: inline-block;
    background: rgba(82,183,136,0.2);
    color: var(--accent);
    padding: 4px 14px;
    border-radius: 20px;
    font-size: .84rem;
    font-weight: 600;
    margin-bottom: 16px;
    letter-spacing: .02em;
}

.lp-priv-text h2 { color: #fff; font-size: 1.6rem; font-weight: 700; margin: 0 0 14px; }
.lp-priv-text > p { color: var(--border); font-size: .95rem; line-height: 1.7; margin: 0 0 18px; }
.lp-priv-text strong { color: var(--primary-light); }

.lp-priv-list {
    list-style: none;
    padding: 0;
    margin: 0;
}
.lp-priv-list li {
    color: var(--accent);
    font-size: .9rem;
    padding: 5px 0;
    border-bottom: 1px solid rgba(82,183,136,0.12);
}
.lp-priv-list li:last-child { border-bottom: none; }

.lp-priv-deco { flex-shrink: 0; display: none; }
@media (min-width: 600px) { .lp-priv-deco { display: block; } }

/* Disclaimer */
.lp-warn-box {
    display: flex;
    gap: 16px;
    align-items: flex-start;
    background: #fff;
    border: 1px solid #ffe082;
    border-left: 5px solid #f9a825;
    border-radius: 14px;
    padding: 20px 24px;
    max-width: 820px;
    margin: 0 auto;
}
.lp-warn-icon { font-size: 2rem; flex-shrink: 0; line-height: 1.1; }
.lp-warn-box strong { display: block; color: #bf6f00; margin-bottom: 8px; font-size: .98rem; }
.lp-warn-box p { color: #5a5a5a; font-size: .87rem; line-height: 1.65; margin: 0; }

/* Legal section */
.lp-legal-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 40px;
}
.lp-legal-col h3 {
    color: #1a4731;
    font-size: 1.02rem;
    font-weight: 700;
    margin: 0 0 12px;
    padding-bottom: 8px;
    border-bottom: 2px solid var(--primary-light);
}
.lp-legal-col p { font-size: .82rem; color: #5a6e5a; line-height: 1.65; margin: 0 0 10px; }

/* Bottom CTA section */
.lp-sec-cta h2 { color: var(--primary-light); margin: 0 0 8px; font-size: 1.6rem; font-weight: 700; }
.lp-sec-cta p  { color: var(--accent); margin: 0 0 28px; }

/* Footer */
.lp-footer {
    background: #0b3320;
    color: var(--primary);
    padding: 24px;
}
.lp-footer-row {
    max-width: 960px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    font-size: .84rem;
}
.lp-footer a { color: var(--accent); text-decoration: none; }
.lp-footer a:hover { text-decoration: underline; }

/* ==================== Landing — Community Section ==================== */
.lp-community-hero {
    background: linear-gradient(180deg, #fff 0%, var(--bg) 100%);
    padding: 72px 24px;
}

.lp-comm-badge {
    display: inline-block;
    background: var(--primary-light);
    color: #1a4731;
    padding: 5px 16px;
    border-radius: 20px;
    font-size: .88rem;
    font-weight: 700;
    margin-bottom: 16px;
    letter-spacing: .02em;
}

.lp-comm-title {
    font-size: clamp(1.8rem, 5vw, 2.8rem);
    font-weight: 800;
    color: #0d3b27;
    margin: 0 0 12px;
    letter-spacing: -.02em;
}

.lp-comm-sub {
    font-size: 1rem;
    color: #5a7a6a;
    max-width: 600px;
    line-height: 1.75;
    margin: 0 0 40px;
}

.lp-comm-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 24px;
}

.lp-comm-card {
    background: #fff;
    border-radius: 20px;
    padding: 28px;
    box-shadow: 0 4px 24px rgba(20,80,50,0.09);
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.lp-comm-card-forum {
    background: #1a4731;
}

.lp-comm-card-top {
    display: flex;
    gap: 16px;
    align-items: flex-start;
}

.lp-comm-icon {
    font-size: 2rem;
    flex-shrink: 0;
    line-height: 1;
}

.lp-comm-card h3 { font-size: 1.05rem; font-weight: 700; color: #1a4731; margin: 0 0 6px; }
.lp-comm-card p  { font-size: .88rem; color: #5a7a6a; line-height: 1.6; margin: 0; }

.lp-comm-card-forum h3 { color: var(--primary-light); }
.lp-comm-card-forum p  { color: var(--accent); }

/* Mock posts */
.lp-comm-preview { display: flex; flex-direction: column; gap: 12px; }

.lp-post-mock {
    display: flex;
    gap: 12px;
    background: #f8fdf9;
    border-radius: 12px;
    padding: 12px 14px;
}

.lp-post-avatar { font-size: 1.5rem; flex-shrink: 0; line-height: 1.2; }
.lp-post-name   { font-size: .78rem; color: #5a7a6a; font-weight: 600; margin-bottom: 3px; }
.lp-post-text   { font-size: .88rem; color: #1a2e1a; line-height: 1.5; margin-bottom: 6px; }
.lp-post-reacts { font-size: .76rem; color: #2d8055; }

/* Forum topics */
.lp-forum-topics {
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex: 1;
}

.lp-topic {
    background: rgba(255,255,255,0.08);
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 8px;
    padding: 10px 14px;
    font-size: .87rem;
    color: var(--border);
}

.lp-forum-link {
    display: inline-block;
    background: var(--primary);
    color: #0b3320;
    font-weight: 700;
    font-size: .9rem;
    padding: 10px 20px;
    border-radius: 50px;
    text-decoration: none;
    text-align: center;
    transition: background .2s;
}
.lp-forum-link:hover { background: var(--accent); }

/* === Meds catalog === */
.meds-cat-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 10px;
}
/* Catalog card is a <details>: collapsed by default to a single-line
   row with name + brand + category chip; tapping reveals the stats
   (half-life, diazepam equivalence, max daily dose, typical timing). */
.med-cat-card {
    border: 1px solid var(--border, rgba(0,0,0,0.08));
    background: var(--surface, #fff);
    border-radius: 12px;
    margin-bottom: 8px;
    overflow: hidden;
}
.med-cat-card > summary {
    list-style: none;
    cursor: pointer;
    padding: 12px 14px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    position: relative;
    min-height: 44px;
    padding-right: 36px;
}
.med-cat-card > summary::-webkit-details-marker { display: none; }
.med-cat-card > summary::after {
    content: '+';
    position: absolute;
    right: 14px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 18px;
    color: var(--muted-fg, #666);
    font-weight: 400;
    opacity: 0.6;
    transition: transform .15s, opacity .15s;
}
.med-cat-card[open] > summary::after { content: '−'; opacity: 1; }
.med-cat-card[open] > summary { border-bottom: 1px solid var(--border, rgba(0,0,0,0.08)); }
.med-cat-body {
    padding: 10px 14px 12px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    background: rgba(0, 0, 0, 0.02);
}

.med-cat-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}
.med-cat-name {
    font-weight: 600;
    font-size: 15px;
    line-height: 1.2;
}
.med-cat-badge {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 2px 8px;
    border-radius: 100px;
    flex-shrink: 0;
}
.med-cat-badge--benzo { background: rgba(var(--primary-rgb), 0.12); color: var(--primary); }
.med-cat-badge--z     { background: rgba(142, 36, 170, 0.12); color: #8e24aa; }
.med-cat-brands {
    font-size: 12px;
    color: var(--muted-fg, #666);
    line-height: 1.4;
}
.med-cat-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 14px;
    font-size: 12px;
    color: var(--muted-fg, #666);
    margin-top: 2px;
}
.med-cat-stats strong {
    color: var(--fg, #111);
    font-weight: 600;
}
.med-cat-timing {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-top: 4px;
}
.tod-pill {
    font-size: 11px;
    padding: 2px 8px;
    border-radius: 100px;
    background: rgba(0, 0, 0, 0.06);
    color: var(--fg, #333);
    line-height: 1.4;
}
.meds-tab.active {
    background: var(--primary, #00695c);
    color: #fff;
    border-color: transparent;
}
.cat-filter-chip.active {
    background: var(--primary, #00695c);
    color: #fff;
    border-color: transparent;
}

/* === Naturals tabs === */
.naturals-tabs {
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 14px;
    padding-bottom: 4px;
}
.nat-tab {
    background: transparent;
    border: 1px solid var(--border, rgba(0,0,0,0.12));
    color: var(--fg, #222);
    padding: 8px 14px;
    border-radius: 100px;
    font-size: 13px;
    line-height: 1.2;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    transition: background .15s, border-color .15s, color .15s;
    white-space: nowrap;
}
.nat-tab:hover {
    background: rgba(var(--primary-rgb), 0.06);
    border-color: rgba(var(--primary-rgb), 0.4);
}
.nat-tab.active {
    background: var(--primary, #00695c);
    border-color: transparent;
    color: #fff;
}
.nat-tab.active:hover { background: #00594f; }
.nat-tab i {
    font-size: 16px;
    line-height: 1;
}

/* === Naturals HUB (landing) — same polish as breathing exercise grid === */
.nat-hub {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
    margin-top: 8px;
}
@media (min-width: 640px) {
    .nat-hub { grid-template-columns: repeat(2, 1fr); gap: 18px; }
}
.nat-hub-card {
    /* Reset Beer-CSS button defaults */
    box-sizing: border-box;
    width: 100%;
    height: auto;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 18px 20px;
    border: 1.5px solid var(--border);
    border-left: 4px solid var(--nat-color, var(--primary));
    border-radius: 16px;
    background: var(--card);
    color: var(--text);
    text-align: left;
    cursor: pointer;
    font: inherit;
    transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease, background .15s ease;
}
.nat-hub-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(0,0,0,0.08), 0 0 0 1px var(--nat-color, var(--primary));
    border-color: var(--nat-color, var(--primary));
}
.nat-hub-card:focus-visible {
    outline: 2px solid var(--nat-color, var(--primary));
    outline-offset: 2px;
}

/* Icon nest — colored circle with the category hue */
.nat-hub-card__emoji {
    flex-shrink: 0;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 26px;
    line-height: 1;
    color: var(--nat-color, var(--primary));
    background: color-mix(in srgb, var(--nat-color, var(--primary)) 14%, transparent);
}
.nat-hub-card__emoji svg,
.nat-hub-card__emoji .i-icn,
.nat-hub-card__emoji i {
    width: 26px;
    height: 26px;
    color: inherit;
}

.nat-hub-card__body {
    flex: 1;
    min-width: 0;
}
.nat-hub-card__title {
    font-family: var(--ff-display, 'Fraunces', Georgia, serif);
    font-size: 18px;
    font-weight: 700;
    line-height: 1.2;
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--text);
}
.nat-hub-card__count {
    font-size: 12px;
    font-weight: 700;
    color: var(--nat-color, var(--primary));
    background: color-mix(in srgb, var(--nat-color, var(--primary)) 15%, transparent);
    padding: 3px 10px;
    border-radius: 100px;
    line-height: 1.2;
}
.nat-hub-card__preview {
    font-size: 13px;
    color: var(--muted-fg);
    margin-top: 6px;
    line-height: 1.4;
}
.nat-hub-card__arrow {
    flex-shrink: 0;
    font-size: 22px;
    color: var(--muted-fg);
    opacity: 0.55;
    transition: transform .15s ease, opacity .15s ease, color .15s ease;
}
.nat-hub-card:hover .nat-hub-card__arrow {
    transform: translateX(3px);
    opacity: 1;
    color: var(--nat-color, var(--primary));
}

/* Dark mode tweak — keep contrast on tinted icon halo */
[data-theme="dark"] .nat-hub-card {
    background: var(--card);
}
[data-theme="dark"] .nat-hub-card__emoji {
    background: color-mix(in srgb, var(--nat-color, var(--primary)) 22%, transparent);
}

/* === Naturals entries (bullet-point style) === */
.nat-entries {
    display: flex;
    flex-direction: column;
    gap: 0;
}
.nat-entry {
    padding: 16px 16px 18px;
    border-top: 1px solid var(--border, rgba(0,0,0,0.08));
    border-left: 3px solid transparent;
    background: var(--surface, #fff);
    transition: background .15s;
}
.nat-entry:first-child { border-top: 1px solid var(--border, rgba(0,0,0,0.08)); }
.nat-entry:last-child { border-bottom: 1px solid var(--border, rgba(0,0,0,0.08)); }
.nat-entry.nat-safe    { border-left-color: #1e7a35; }
.nat-entry.nat-caution { border-left-color: #c08a2a; background: rgba(200, 138, 42, 0.03); }
.nat-entry.nat-avoid   { border-left-color: #b03030; background: rgba(176, 48, 48, 0.04); }

.nat-entry__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 8px;
}
.nat-entry__title { flex: 1; min-width: 0; line-height: 1.25; }
.nat-entry__name {
    font-family: var(--ff-display, 'Fraunces', Georgia, serif);
    font-size: 18px;
    font-weight: 600;
    color: var(--fg, #111);
}
.nat-entry__latin {
    display: block;
    font-style: italic;
    font-size: 12px;
    color: var(--muted-fg, #7a6560);
    margin-top: 2px;
    font-family: var(--ff-body, system-ui, sans-serif);
    font-weight: 400;
}
.nat-entry__desc {
    font-size: 14px;
    line-height: 1.55;
    color: var(--fg, #111);
    margin: 0 0 10px;
}
.nat-entry__stats {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-top: 8px;
}
.nat-stat {
    display: grid;
    grid-template-columns: 130px 1fr;
    gap: 12px;
    font-size: 13px;
    line-height: 1.5;
    align-items: start;
}
@media (max-width: 500px) {
    .nat-stat {
        grid-template-columns: 1fr;
        gap: 2px;
    }
}
.nat-stat__label {
    font-weight: 600;
    color: var(--muted-fg, #7a6560);
    white-space: nowrap;
}
.nat-stat__value {
    color: var(--fg, #111);
    word-wrap: break-word;
}
.nat-stat__sub {
    display: inline-block;
    margin-top: 2px;
    font-size: 12px;
    color: var(--muted-fg, #7a6560);
}
.nat-entry__warnings {
    margin-top: 10px;
    padding: 10px 12px;
    border-radius: 8px;
    background: rgba(176, 48, 48, 0.08);
    border-left: 3px solid #b03030;
    font-size: 13px;
    line-height: 1.5;
}
.nat-entry.nat-caution .nat-entry__warnings {
    background: rgba(200, 138, 42, 0.1);
    border-left-color: #c08a2a;
}
.nat-entry__warnings p {
    margin: 0;
}
.nat-entry__warnings p + p { margin-top: 6px; }
.nat-entry__sources {
    margin-top: 10px;
    font-size: 12px;
}
.nat-entry__sources summary {
    cursor: pointer;
    color: var(--muted-fg, #7a6560);
    font-weight: 600;
    list-style: none;
    user-select: none;
}
.nat-entry__sources summary::-webkit-details-marker { display: none; }
.nat-entry__sources[open] summary { margin-bottom: 6px; }
.nat-entry__sources ul {
    margin: 4px 0 0;
    padding-left: 18px;
    line-height: 1.5;
}
.nat-entry__sources li {
    margin-bottom: 4px;
}
.nat-entry__sources a {
    color: var(--primary, #00695c);
    text-decoration: underline;
    text-decoration-color: rgba(var(--primary-rgb), 0.3);
}
.nat-entry__sources a:hover { text-decoration-color: var(--primary, #00695c); }

/* ========================================================================
   2026 modernization pass — soft depth, refined type, subtle gradients.
   Intentionally at the bottom so it overrides earlier legacy rules without
   rewriting them.
   ======================================================================== */

:root {
    --radius: 14px;
    --radius-lg: 20px;
    /* Elevation — softer, layered, lightly green-tinted shadows */
    --shadow-xs: 0 1px 2px rgba(16, 60, 40, 0.04);
    --shadow-sm: 0 1px 3px rgba(16, 60, 40, 0.06), 0 1px 2px rgba(16, 60, 40, 0.04);
    --shadow:    0 2px 6px rgba(16, 60, 40, 0.06), 0 1px 2px rgba(16, 60, 40, 0.05);
    --shadow-md: 0 6px 18px -4px rgba(16, 60, 40, 0.10), 0 2px 6px -2px rgba(16, 60, 40, 0.06);
    --shadow-lg: 0 12px 32px -8px rgba(16, 60, 40, 0.14), 0 4px 10px -4px rgba(16, 60, 40, 0.08);
}

[data-theme="dark"] {
    --shadow-xs: 0 1px 2px rgba(0,0,0,0.25);
    --shadow-sm: 0 1px 3px rgba(0,0,0,0.30);
    --shadow:    0 2px 8px rgba(0,0,0,0.35);
    --shadow-md: 0 6px 20px -4px rgba(0,0,0,0.45);
    --shadow-lg: 0 14px 36px -10px rgba(0,0,0,0.55);
}

/* Cards: softer edge, micro-gradient, real elevation */
body.benzo-ready article.round {
    border: 1px solid rgba(var(--primary-rgb), 0.08);
    border-radius: var(--radius-lg);
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.6) 0%, rgba(255, 255, 255, 0) 40%),
        var(--card);
    box-shadow: var(--shadow);
    transition: box-shadow .2s ease, transform .2s ease;
}
body.benzo-ready article.round:hover { box-shadow: var(--shadow-md); }
[data-theme="dark"] body.benzo-ready article.round {
    border-color: rgba(149, 213, 178, 0.12);
    background:
        linear-gradient(180deg, rgba(149, 213, 178, 0.04) 0%, rgba(149, 213, 178, 0) 40%),
        var(--card);
}

/* Typography rhythm — better hierarchy + slight tracking on headings */
body.benzo-ready h5,
body.benzo-ready h6 {
    letter-spacing: -0.015em;
    font-weight: 650;
    color: var(--text);
}
.view > h5 { font-size: 1.4rem; line-height: 1.2; }
.view > h6 { font-size: 1.05rem; line-height: 1.3; }
article.round > h6:first-child {
    font-size: 1rem;
    font-weight: 650;
}
p, li { line-height: 1.6; }
.small-text, .muted-text { font-size: 0.82rem; color: var(--muted-fg); }

/* Primary buttons feel like real affordances */
body.benzo-ready button.round:not(.small):not(.transparent):not(.circle),
body.benzo-ready .lp-btn-primary {
    border-radius: 9999px;
    padding: 12px 22px;
    font-weight: 600;
    letter-spacing: -0.005em;
    box-shadow: 0 2px 4px rgba(var(--primary-rgb), 0.12);
    transition: transform .12s ease, box-shadow .18s ease, background .15s ease;
}
body.benzo-ready button.round:not(.small):not(.transparent):not(.circle):hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(var(--primary-rgb), 0.18);
}
body.benzo-ready button.round:not(.small):not(.transparent):not(.circle):active {
    transform: translateY(0);
    box-shadow: 0 1px 2px rgba(var(--primary-rgb), 0.15);
}

/* Inputs: softer borders, better focus ring */
body.benzo-ready .field.round.border {
    border-radius: 12px;
    transition: border-color .15s ease, box-shadow .15s ease;
}
body.benzo-ready .field.round.border:focus-within {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(var(--primary-rgb), 0.14);
}

/* Header: finer texture, light top glow */
body.benzo-ready > header {
    background:
        linear-gradient(180deg, rgba(255,255,255,0.08) 0%, rgba(255,255,255,0) 60%),
        linear-gradient(135deg, var(--brand-bar-from) 0%, var(--brand-bar-to) 100%) !important;
    box-shadow: 0 1px 0 rgba(0,0,0,0.08), 0 4px 16px -6px rgba(16, 60, 40, 0.18);
}

/* Bottom nav: subtle top shadow so it floats above scrolled content */
body.benzo-ready > nav.bottom {
    box-shadow: 0 -4px 16px -6px rgba(16, 60, 40, 0.10),
                0 -1px 0 rgba(var(--primary-rgb), 0.08);
}

/* Quick action tiles on dashboard — make them tangible */
.quick-action, .dash-quick-action {
    border-radius: var(--radius-lg);
    transition: transform .15s ease, box-shadow .18s ease, border-color .15s ease;
}
.quick-action:hover, .dash-quick-action:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
    border-color: rgba(var(--primary-rgb), 0.25);
}

/* Mood scale buttons: larger rounding, richer active state */
.mood-btn {
    border-radius: 12px;
    transition: transform .1s ease, background .15s ease, border-color .15s ease;
}
.mood-btn:hover { transform: translateY(-1px); }
.mood-btn.active {
    box-shadow: 0 4px 10px rgba(var(--primary-rgb), 0.25);
}

/* Chips and badges */
.chip {
    border-radius: 9999px;
    transition: background .15s ease, color .15s ease, border-color .15s ease;
}

/* Landing hero — punchier title, softer glow (desktop only; mobile uses solid
   white + text-shadow defined in the max-width:767px block above) */
@media (min-width: 768px) {
    .lp-title {
        background: linear-gradient(180deg, #ffffff 0%, var(--primary-light) 95%);
        -webkit-background-clip: text; background-clip: text;
        color: transparent;
        text-shadow: 0 4px 32px rgba(0, 0, 0, 0.25);
    }
}

/* Nav item focus — visible for keyboard users */
.nav-item:focus-visible,
.desktop-nav-item:focus-visible,
button:focus-visible,
a:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
    border-radius: 6px;
}

/* Smooth scroll for anchor nav + better rendering */
html { scroll-behavior: smooth; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; }

/* ========================================================================
   Auth overlay — Beer CSS falls back to Material purple for the overlay
   dialog; force our forest-green palette on every element inside.
   ======================================================================== */

#auth-overlay {
    --primary: #2d6a4f;
    --on-primary: #ffffff;
    --primary-container: #d8f3dc;
    --on-primary-container: #1b4332;
    --secondary: #52b788;
    --on-secondary: #081c15;
    --surface: #ffffff;
    --on-surface: #1b4332;
    --outline: rgba(45,106,79,0.32);
    --outline-variant: rgba(45,106,79,0.16);
}

#auth-overlay h6,
#auth-overlay h5 {
    color: var(--text) !important;
    font-weight: 650;
    letter-spacing: -0.01em;
}

/* Primary solid button */
#auth-overlay button.round:not(.border):not(.transparent) {
    background: var(--primary) !important;
    color: #ffffff !important;
    border-radius: 9999px !important;
    padding: 12px 22px;
    font-weight: 600;
    box-shadow: 0 2px 4px rgba(var(--primary-rgb), .18);
    transition: transform .12s, box-shadow .15s, background .15s;
}
#auth-overlay button.round:not(.border):not(.transparent):hover {
    background: var(--brand-bar-from) !important;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(var(--primary-rgb), .26);
}

/* Facebook federated button — official brand blue, must beat the generic
   primary-green rule above (which is !important). Distinct from the green
   email button and the white Google button so it's instantly recognisable. */
#auth-overlay button.round.btn-facebook:not(.border):not(.transparent) {
    background: #1877F2 !important;
    color: #ffffff !important;
    box-shadow: 0 2px 6px rgba(24,119,242,.32);
    /* Bigger + more prominent than the other auth buttons */
    min-height: 52px !important;
    padding: 14px 22px !important;
    font-size: 1.06rem !important;
    font-weight: 700 !important;
    gap: 10px !important;
}
#auth-overlay button.round.btn-facebook .fb-mark {
    font-size: 1.45rem;
    line-height: 1;
}
#auth-overlay button.round.btn-facebook:not(.border):not(.transparent):hover {
    background: #145dbf !important;
    box-shadow: 0 4px 12px rgba(24,119,242,.34);
}

/* Secondary / bordered button */
#auth-overlay button.round.border {
    border: 1px solid rgba(var(--primary-rgb), 0.35) !important;
    color: var(--text) !important;
    background: #ffffff !important;
    border-radius: 9999px !important;
}
#auth-overlay button.round.border:hover {
    background: var(--bg) !important;
    border-color: var(--primary) !important;
}

/* Transparent "S'inscrire / Se connecter" switch button */
#auth-overlay button.transparent {
    color: var(--primary) !important;
    font-weight: 600;
}

/* Inputs: green focus ring */
#auth-overlay .field.round.border {
    border-color: rgba(var(--primary-rgb), 0.22) !important;
}
#auth-overlay .field.round.border:focus-within {
    border-color: var(--primary) !important;
    box-shadow: 0 0 0 3px rgba(var(--primary-rgb), 0.16);
}
#auth-overlay label { color: #5a7a6a; }

/* Forum preview box in SSO mode */
#auth-overlay .forum-preview,
#auth-overlay .auth-forum-preview {
    background: var(--bg) !important;
    border-color: rgba(var(--primary-rgb), 0.18) !important;
}
#auth-overlay .forum-preview strong,
#auth-overlay .auth-forum-preview strong { color: var(--text); }
#auth-overlay a { color: var(--primary); }
#auth-overlay a:hover { color: var(--text); }

/* ============================================================
   Medical safety modals — non-dismissible-by-X consent + crisis
   ============================================================ */
.bp-modal-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(11, 51, 32, 0.85);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    z-index: 10001;
}
.bp-modal-backdrop[hidden] { display: none; }
.bp-modal-crisis { z-index: 10002; }

.bp-modal-card {
    background: var(--card, #fff);
    color: var(--fg, #1b1b1b);
    max-width: 480px;
    width: 100%;
    padding: 28px;
    border-radius: 20px;
    box-shadow: var(--shadow-lg, 0 20px 60px rgba(0,0,0,0.3));
    max-height: 92vh;
    overflow-y: auto;
    position: relative;
}
.bp-modal-card--wide { max-width: 640px; }
.bp-modal-title {
    margin: 0 0 8px;
    font-size: 1.25rem;
    line-height: 1.3;
    color: var(--primary, #00695C);
}
.bp-modal-crisis .bp-modal-title { color: #b81414; }
.bp-modal-intro {
    margin: 0 0 18px;
    font-size: .95rem;
    line-height: 1.5;
}

/* Consent checkboxes */
.bp-consent-list {
    list-style: none;
    margin: 0 0 20px;
    padding: 0;
}
.bp-consent-list li {
    margin-bottom: 12px;
}
.bp-consent-list label {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    cursor: pointer;
    font-size: .92rem;
    line-height: 1.45;
}
.bp-consent-list input[type="checkbox"] {
    flex-shrink: 0;
    margin-top: 3px;
    width: 18px;
    height: 18px;
    cursor: pointer;
    accent-color: var(--primary, #00695C);
}

/* Crisis resources block */
.bp-crisis-resources {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 18px;
}
.bp-crisis-call {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    border-radius: 14px;
    background: #fdecec;
    color: #6b0a0a;
    text-decoration: none;
    border: 1px solid #f5b7b7;
    transition: transform 0.15s, box-shadow 0.15s;
}
.bp-crisis-call:hover { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(184, 20, 20, 0.15); }
.bp-crisis-call i { font-size: 26px; color: #b81414; }
.bp-crisis-call strong { display: block; font-size: 1rem; }
.bp-crisis-call small { display: block; font-size: .8rem; opacity: 0.85; margin-top: 2px; }
body.dark .bp-crisis-call { background: #2a1414; color: #ffd1d1; border-color: #5a2424; }

.bp-crisis-link {
    background: transparent;
    border: 1px dashed var(--primary, #00695C);
    color: var(--primary, #00695C);
    border-radius: 12px;
    padding: 12px 14px;
    cursor: pointer;
    font-size: .92rem;
    text-align: left;
    width: 100%;
}
.bp-crisis-link:hover { background: rgba(var(--primary-rgb), 0.08); }

/* Action row */
.bp-modal-actions {
    display: flex;
    gap: 10px;
    justify-content: flex-end;
    flex-wrap: wrap;
}
.bp-modal-actions .round[disabled] {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
}

/* Mobile (<480px) */
@media (max-width: 480px) {
    .bp-modal-backdrop { padding: 8px; }
    .bp-modal-card {
        padding: 20px;
        max-width: 92vw;
        border-radius: 16px;
    }
    .bp-modal-actions { flex-direction: column-reverse; }
    .bp-modal-actions .round { width: 100%; }
}

/* ============================================================
   BenzoPotes — patches CSS (audit 2026-04-30)
   À ajouter en fin de style.css. Aucune règle existante n'est
   modifiée : on se contente d'ajouter des règles plus spécifiques
   qui réparent les bugs identifiés.
   ============================================================ */

/* ---------- P1.1 — Onglet sub-nav actif invisible -----------
   Bug : le conteneur a les classes "sub-nav tabs" en même temps,
   donc .tabs > .active impose background = var(--primary) et
   .sub-nav-item.active impose color = var(--primary).
   Résultat : texte invisible (couleur identique au fond).
   Fix : on force un fond transparent et on garde le style "onglet
   souligné" voulu par .sub-nav.
   ------------------------------------------------------------ */
.sub-nav.tabs > .sub-nav-item,
.sub-nav > .sub-nav-item {
  background: transparent !important;
  border-radius: 0 !important;
}
.sub-nav.tabs > .sub-nav-item.active,
.sub-nav > .sub-nav-item.active {
  background: transparent !important;
  color: var(--primary) !important;
  border-bottom: 2px solid var(--primary) !important;
  font-weight: 600;
}

/* Focus clavier visible sur les onglets (manquait) */
.sub-nav-item:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
  border-radius: 4px;
}

/* ---------- P1.2 — Lien "Forum" toujours en surbrillance -----
   Bug : .desktop-nav-forum a un style fond plein vert + texte
   blanc, ce qui le fait paraître actif quel que soit l'écran
   courant. C'est un raccourci externe, pas un état actif.
   Fix : on neutralise et on indique le caractère externe.
   ------------------------------------------------------------ */
.desktop-nav-item.desktop-nav-forum {
  background: transparent !important;
  color: var(--text) !important;
  border: 1px solid var(--border);
  font-weight: 500;
}
.desktop-nav-item.desktop-nav-forum:hover,
.desktop-nav-item.desktop-nav-forum:focus-visible {
  background: var(--accent) !important;
  color: var(--text) !important;
}
/* Vrai état actif réservé au lien actuellement consulté */
.desktop-nav-item.active,
.desktop-nav-item[aria-current="page"] {
  background: var(--accent) !important;
  color: var(--primary) !important;
  font-weight: 600;
}

/* ---------- P2.1 — Contraste mode sombre ---------------------
   Bug : --muted-fg = #7a947a → ratio 4.37 sur fond surface,
   juste sous WCAG AA pour les petits textes (Terrible/Très bien
   à 11 px, "Aucun plan de sevrage actif").
   Fix : remontée des tons de gris en mode sombre.
   ------------------------------------------------------------ */
:root.dark, html.dark, [data-theme="dark"] {
  --muted-fg: #a8c7af;        /* avant : #7a947a (4.37) → après : ~6.2 */
  --text-secondary: #b8d6c0;  /* meilleure lisibilité sur surface foncée */
}

/* Labels Terrible/Très bien : taille minimale lisible */
.mood-scale-label,
.mood-edges,
.scale-edges {
  font-size: 12px !important;
  font-weight: 500;
}

/* ---------- P2.2 — prefers-reduced-motion non respecté -------
   Important pour les exercices de respiration animés et les
   transitions de modale (utilisateurs sujets vertiges en sevrage).
   ------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  /* Garder l'animation respiration mais en cycle ralenti et discret */
  .breath-circle,
  .breath-orb {
    animation: none !important;
  }
}

/* ---------- P3.1 — Cibles tactiles trop petites en mobile ----
   "Je veux aider" (30 px), "Voir tout / Tout voir" (18 px),
   "Tous les pays" (30 px). WCAG cible 44×44.
   ------------------------------------------------------------ */
@media (pointer: coarse), (max-width: 767px) {
  .wip-cta,
  .see-all,
  .view-all,
  .topbar-action,
  a[role="button"],
  button.text-button {
    min-height: 44px;
    padding: 10px 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
}

/* ---------- P3.2 — Champ dose : suffixe mg visible -----------
   L'utilisateur ne voit pas l'unité quand il tape. On affiche
   "mg" en suffixe purement décoratif (ne perturbe pas la valeur).
   ------------------------------------------------------------ */
.dose-input-wrapper {
  position: relative;
}
.dose-input-wrapper::after {
  content: 'mg';
  position: absolute;
  right: 44px;       /* laisser place aux flèches du number input */
  top: 50%;
  transform: translateY(-50%);
  color: var(--muted-fg);
  pointer-events: none;
  font-size: 14px;
  font-weight: 500;
}

/* ---------- P3.3 — Email tronqué dans la barre du haut -------
   #user-email déborde (94 px sur 71 px). On gère proprement.
   ------------------------------------------------------------ */
.app-topbar-email {
  max-width: 160px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  cursor: help;
}

/* ---------- P3.4 — Validation formulaire de sevrage ----------
   Style des erreurs affichées par le patch JS (voir patches.js).
   ------------------------------------------------------------ */
.form-errors {
  background: rgba(198, 40, 40, 0.08);
  border-left: 4px solid #c62828;
  color: #8b0000;
  padding: 12px 16px;
  border-radius: 8px;
  margin: 0 0 16px 0;
}
.form-errors p {
  margin: 4px 0;
  font-size: 14px;
  line-height: 1.4;
}
:root.dark .form-errors,
html.dark .form-errors,
[data-theme="dark"] .form-errors {
  background: rgba(255, 100, 100, 0.12);
  color: #ffb4b4;
  border-left-color: #ff6b6b;
}

/* ---------- P2.3 — Classe utilitaire visually-hidden ---------
   Pour les labels invisibles mais lus par les lecteurs d'écran.
   ------------------------------------------------------------ */
.visually-hidden,
.sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/* ---------- P3.5 — Bouton flottant "Urgence" en mobile -------
   Le panneau rouge vertical à droite couvre du contenu sur les
   viewports étroits. On le réduit en mobile.
   ------------------------------------------------------------ */
@media (max-width: 600px) {
  .emergency-tab,
  [aria-label*="Urgence"][aria-label*="Ressources"] {
    writing-mode: initial !important;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    bottom: 80px;
    top: auto;
    right: 8px;
    padding: 0;
  }
  .emergency-tab > span:not(.icon),
  .emergency-tab .label-text {
    display: none;
  }
}

/* ==================== TREATMENTS VIEW ==================== */

.treatment-warning-banner {
    border-left: 4px solid var(--destructive);
    background: color-mix(in srgb, var(--destructive) 8%, transparent);
}

.treatment-symptom-card .strategy-header h3 {
    display: flex;
    align-items: center;
    gap: 8px;
}

.treatment-count-badge {
    background: var(--primary-light);
    color: var(--primary);
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 0.75em;
    font-weight: 600;
    line-height: 1.4;
}

.treatment-row-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-top: 8px;
}

.treatment-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 12px;
    border-radius: 10px;
    background: var(--surface, rgba(0, 0, 0, 0.03));
    border: 1px solid var(--border, rgba(0, 0, 0, 0.08));
    cursor: pointer;
    transition: background 120ms ease, transform 120ms ease;
    gap: 8px;
}

.treatment-row:hover,
.treatment-row:focus-visible {
    background: color-mix(in srgb, var(--primary) 10%, transparent);
    transform: translateX(2px);
    outline: none;
}

.treatment-row-main {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    flex: 1;
}

.treatment-name {
    font-weight: 600;
}

.treatment-brands {
    font-size: 0.85em;
    color: var(--muted-fg);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.treatment-row-meta {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
}

.treatment-rx-badge {
    background: var(--destructive);
    color: white;
    padding: 2px 7px;
    border-radius: 4px;
    font-size: 0.72em;
    font-weight: 700;
    letter-spacing: 0.04em;
    line-height: 1.4;
}

.treatment-supp-badge {
    background: var(--primary-light);
    color: var(--primary);
    padding: 2px 7px;
    border-radius: 4px;
    font-size: 0.72em;
    font-weight: 600;
    line-height: 1.4;
}

.treatment-warn-icon {
    width: 16px;
    height: 16px;
}

.treatment-warn-high {
    color: var(--destructive);
}

.treatment-warn-medium {
    color: #d97706;
}

/* Treatment detail uses .bp-modal-backdrop + .bp-modal-card--wide
   for the overlay/card; only the close button is unique here. */

body.treatment-detail-open {
    overflow: hidden;
}

.treatment-detail-close {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 36px;
    height: 36px;
    border: none;
    background: var(--surface, rgba(0, 0, 0, 0.05));
    color: var(--fg, inherit);
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1;
}
.treatment-detail-close:hover { background: var(--primary-light); }

.treatment-chip {
    display: inline-flex;
    align-items: center;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 0.78em;
    background: var(--primary-light);
    color: var(--primary);
    border: 1px solid color-mix(in srgb, var(--primary) 30%, transparent);
}

.treatment-chip-status {
    background: var(--surface, rgba(0, 0, 0, 0.05));
    color: var(--muted-fg);
    border-color: var(--border, rgba(0, 0, 0, 0.08));
}

.treatment-detail-warning {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px;
    border-radius: 10px;
    margin: 12px 0;
    font-size: 0.92em;
}

.treatment-detail-warning-high {
    background: color-mix(in srgb, var(--destructive) 12%, transparent);
    border-left: 3px solid var(--destructive);
}

.treatment-detail-warning-medium {
    background: color-mix(in srgb, #d97706 14%, transparent);
    border-left: 3px solid #d97706;
}

.treatment-detail-warning i {
    flex-shrink: 0;
    margin-top: 2px;
}

.treatment-detail-disclaimer {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 10px 12px;
    border-radius: 8px;
    background: color-mix(in srgb, var(--primary) 8%, transparent);
    color: var(--muted-fg);
    font-size: 0.85em;
    margin: 8px 0 16px;
    line-height: 1.4;
}

.treatment-detail-disclaimer i {
    color: var(--primary);
    flex-shrink: 0;
    margin-top: 2px;
}

.treatment-detail-section {
    margin: 14px 0;
}

.treatment-detail-section h4 {
    margin: 0 0 6px;
    font-size: 0.95em;
    color: var(--primary);
    font-weight: 600;
}

.treatment-detail-section p {
    margin: 0;
    line-height: 1.5;
}

.treatment-detail-section ul {
    margin: 4px 0 0;
    padding-left: 20px;
    line-height: 1.5;
}

.treatment-detail-source {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    border-radius: 8px;
    background: var(--surface, rgba(0, 0, 0, 0.03));
    color: var(--muted-fg);
    font-size: 0.85em;
}

.treatment-detail-source i {
    flex-shrink: 0;
    color: var(--primary);
}

.treatment-detail-footer {
    margin-top: 16px;
    display: flex;
    justify-content: flex-start;
    gap: 8px;
}

/* ==================== SIDEBAR — accordion sections + mobile drawer ==================== */

.nav-section,
.nav-subsection {
    border: none;
    margin: 0;
    padding: 0;
}

.nav-section + .nav-section {
    margin-top: 4px;
    padding-top: 8px;
    border-top: 1px solid var(--border, rgba(0, 0, 0, 0.08));
}

.nav-section-summary {
    list-style: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 12px;
    font-size: 1.05em;
    font-weight: 800;
    letter-spacing: 0.01em;
    color: var(--text);
    border-radius: 8px;
    user-select: none;
    transition: background 120ms ease;
}
.nav-section-emoji {
    font-size: 1.25em;
    line-height: 1;
    flex-shrink: 0;
}

.nav-section-summary::-webkit-details-marker { display: none; }
.nav-section-summary::marker { display: none; content: ''; }

.nav-section-summary:hover {
    background: color-mix(in srgb, var(--primary) 8%, transparent);
}

.nav-section-summary > i:first-child {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

.nav-section-summary > span:not(.nav-section-chevron) {
    flex: 1;
}

.nav-section-chevron {
    width: 16px;
    height: 16px;
    transition: transform 200ms ease;
    flex-shrink: 0;
    color: var(--muted-fg);
}

details[open] > .nav-section-summary .nav-section-chevron,
details[open] > .nav-subsection-summary .nav-section-chevron {
    transform: rotate(180deg);
}

.nav-section-body,
.nav-subsection-body {
    display: flex;
    flex-direction: column;
    gap: 1px;
    padding: 4px 0;
}

/* Author-level display:flex overrides the UA stylesheet's display:none on
   closed <details> children — re-apply hide explicitly. */
details:not([open]) > .nav-section-body,
details:not([open]) > .nav-subsection-body {
    display: none;
}

.nav-subsection-summary {
    cursor: pointer;
    list-style: none;
}
.nav-subsection-summary::-webkit-details-marker { display: none; }
.nav-subsection-summary::marker { display: none; content: ''; }

.nav-sub-item {
    padding-left: 38px !important;
    font-size: 0.92em;
}

.desktop-nav-spacer {
    flex: 1;
    min-height: 12px;
}

/* Mobile: hidden by default, slide-in drawer when .drawer-open */
.nav-drawer-backdrop {
    display: none;
}

@media (max-width: 767px) {
    .desktop-nav {
        display: flex;
        flex-direction: column;
        position: fixed;
        top: 0;
        left: 0;
        height: 100dvh;
        width: min(82vw, 360px);
        max-width: 360px;
        background: var(--bg, #fff);
        z-index: 1100;
        transform: translateX(-100%);
        transition: transform 240ms cubic-bezier(.2, .8, .2, 1);
        padding: calc(env(safe-area-inset-top, 0) + 16px) 12px 16px;
        overflow-y: auto;
        box-shadow: 4px 0 16px rgba(0, 0, 0, 0.18);
        -webkit-overflow-scrolling: touch;
    }

    .desktop-nav.drawer-open {
        transform: translateX(0);
    }

    .nav-drawer-backdrop {
        display: block;
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, 0.45);
        z-index: 1099;
        opacity: 0;
        pointer-events: none;
        transition: opacity 200ms ease;
    }

    .nav-drawer-backdrop.drawer-open {
        opacity: 1;
        pointer-events: auto;
    }

    body.drawer-locked {
        overflow: hidden;
    }

    .desktop-nav-close {
        display: flex !important;
        align-self: flex-end;
        margin-bottom: 4px;
    }

    /* Drawer items: WCAG-compliant 44 px tap targets with breathing room
       between rows. The desktop @media block does not apply on phones,
       so without these rules each anchor renders at its bare 21 px
       line-height — easy to mis-tap. Hairline separators give a clear
       boundary between adjacent rows. */
    .desktop-nav .desktop-nav-item {
        display: flex;
        align-items: center;
        gap: 12px;
        min-height: 44px;
        padding: 10px 14px;
        margin: 2px 0;
        border-radius: 10px;
        color: var(--bp-ink, var(--text));
        text-decoration: none;
        font-size: 15px;
        font-weight: 500;
        line-height: 1.25;
        position: relative;
    }
    .desktop-nav .desktop-nav-item i {
        flex-shrink: 0;
        width: 22px;
        height: 22px;
        font-size: 20px;
        color: var(--bp-leaf, var(--primary));
        opacity: 0.85;
    }
    .desktop-nav .desktop-nav-item:active {
        background: rgba(var(--primary-rgb), 0.08);
    }
    .desktop-nav .desktop-nav-item.active {
        background: rgba(var(--primary-rgb), 0.12);
        color: var(--bp-leaf-deep, var(--primary));
        font-weight: 600;
    }
    .desktop-nav .desktop-nav-item.nav-soon {
        opacity: 0.5;
    }
    .desktop-nav .desktop-nav-item.nav-soon em {
        font-style: italic;
        font-size: 12px;
        margin-left: auto;
        opacity: 0.85;
    }

    /* Section headers inside the drawer: small-caps, paddingless. */
    .desktop-nav h6,
    .desktop-nav .desktop-nav-section-title {
        font-size: 11px;
        font-weight: 700;
        letter-spacing: 0.12em;
        text-transform: uppercase;
        color: var(--bp-ink-soft, var(--muted-fg));
        margin: 18px 6px 6px;
        padding-top: 10px;
        border-top: 1px solid var(--bp-rule, rgba(0, 0, 0, 0.08));
    }
    /* The first section header in the drawer should NOT carry a top
       border (it would draw a line above the very first item). */
    .desktop-nav h6:first-of-type,
    .desktop-nav .desktop-nav-section-title:first-of-type {
        border-top: 0;
        padding-top: 0;
        margin-top: 8px;
    }

    /* Indented sub-items (revealed by "Articles ⌄" details/summary) keep
       the 44 px tap target and align with the parent's text column. */
    .desktop-nav details .desktop-nav-item,
    .desktop-nav details a {
        padding-left: 36px;
    }
}


/* Desktop: the in-rail close button collapses the rail (paired with the
   topbar hamburger that re-opens it). */
@media (min-width: 768px) {
    .desktop-nav-close {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        align-self: flex-end;
        width: 32px;
        height: 32px;
        margin: -4px 0 6px;
        border: 1px solid var(--border);
        border-radius: 8px;
        background: var(--card);
        color: var(--text-secondary);
        cursor: pointer;
    }
    .desktop-nav-close:hover { background: var(--accent); color: var(--primary); }
    /* Topbar hamburger — desktop only (mobile uses the bottom nav). */
    .topbar-nav-toggle { display: inline-flex !important; }
    /* Backdrop never shown on desktop */
    .nav-drawer-backdrop {
        display: none !important;
    }
}

/* ==================== Mobile refinement (épuré) ==================== */
/* Strip the topbar to brand + theme toggle on phones — anything reachable
   via the bottom nav or the More drawer is removed to reduce visual noise.
   The Forum, Crisis (Urgence), Beta chip, and email are all redundant with
   either the bottom nav, the right sidebar, or the Menu drawer. */
@media (max-width: 767px) {
    .topbar-chip-beta,
    .topbar-shortcut-forum,
    .topbar-shortcut-crisis,
    .app-topbar-email {
        display: none !important;
    }

    /* The "Aller au forum" pill duplicates what's already in More → Forum.
       Hide it; reduces vertical noise above the fold. */
    .mobile-forum-banner { display: none !important; }

    /* Disclaimer: was floating top-right (overlapping page content). Anchor
       it inline at the top of the scroll, slim profile, no shadow drama. */
    .disclaimer-banner {
        position: static !important;
        margin: 8px 12px 4px !important;
        padding: 8px 10px !important;
        border-radius: 10px !important;
        background: rgba(var(--primary-rgb), 0.06) !important;
        color: var(--text) !important;
        box-shadow: none !important;
        font-size: .78rem !important;
        line-height: 1.35 !important;
        display: flex;
        align-items: center;
        gap: 8px;
    }
    .disclaimer-banner i { width: 14px; height: 14px; flex-shrink: 0; opacity: .7; }
    .disclaimer-banner button {
        margin-left: auto;
        flex-shrink: 0;
        background: transparent !important;
        color: var(--primary) !important;
        border: 1px solid currentColor !important;
        padding: 3px 10px !important;
        font-size: .72rem !important;
        font-weight: 600;
        border-radius: 999px !important;
    }

    /* Reclaim breathing room: the body padding-top compensates for a topbar
       + WIP banner that's now leaner. */
    body { padding-top: var(--topbar-height-safe) !important; }
    .wip-banner { display: none !important; }

    /* Tighten the topbar itself: slimmer height and gentler horizontal padding. */
    header.fixed > nav {
        gap: 4px !important;
        padding: 0 12px !important;
    }
    .app-topbar-brand span { font-size: .95rem !important; letter-spacing: .01em; }
    .app-topbar-brand img { width: 24px !important; height: 24px !important; }

    /* Cards: more breathing room, less drop-shadow noise */
    .card,
    article.card {
        border-radius: 14px !important;
        box-shadow: 0 1px 2px rgba(0,0,0,.04), 0 4px 12px rgba(0,0,0,.04) !important;
        margin-bottom: 12px !important;
    }

    /* Section spacing: each top-level view section gets more vertical air */
    .view > section,
    .view > .card,
    .view > article {
        margin-bottom: 16px;
    }

    /* Quick actions on dashboard: collapse 4-icon grid into a tighter stack
       so the eye stops scanning so much */
    .quick-actions,
    .dashboard-actions {
        gap: 8px !important;
    }

    /* Topbar: hide the wordmark on phones, the leaf icon is enough.
       Frees space for the dynamic page title which was getting truncated. */
    .app-topbar-brand span { display: none !important; }
    .app-topbar-brand { gap: 0 !important; }
    .app-topbar-title {
        font-size: 1rem !important;
        font-weight: 600 !important;
        letter-spacing: 0;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        flex: 1 1 auto !important;
        min-width: 0 !important;
        margin-left: 8px !important;
    }
    /* The flex spacer that pushes desktop icons to the right is no longer
       needed on mobile (no chips/shortcuts to the right of it). Remove it
       so the page title can claim its space. */
    header.fixed > nav > .max { display: none !important; }

    /* H5 page titles inside views: tighten — they sit between the topbar
       and the content, and at the previous size they pushed the actual
       primary action card 2 screens down. */
    .view > h5,
    .view > .row > h5.max {
        font-size: 1.1rem !important;
        margin: 4px 0 8px !important;
        font-weight: 700;
        letter-spacing: -.01em;
    }

    /* Dashboard "Bienvenue sur BenzoPotes" h5 is redundant with the topbar
       title — kill it on mobile to surface the actual taper card faster. */
    #view-dashboard > h5[data-i18n="dash.welcome"] { display: none !important; }

    /* Alcohol invite banner: collapse to a single-row chip with the title
       only. The detail paragraph and the inline link are hidden on phones
       — the user can still reach the alcohol toggle from the Settings
       view, and the chip's "info" intent is conveyed by the icon + title. */
    #alcohol-invite-banner {
        padding: 6px 10px !important;
        margin-bottom: 10px !important;
        background: rgba(var(--primary-rgb), 0.06) !important;
        border-left: 2px solid var(--bp-leaf-deep) !important;
        border-radius: 8px !important;
    }
    #alcohol-invite-banner > div { align-items: center !important; gap: 8px !important; }
    #alcohol-invite-banner i[data-lucide="info"] {
        font-size: 16px !important;
        margin-top: 0 !important;
    }
    #alcohol-invite-banner p:first-child {
        font-size: 13px !important;
        font-weight: 500 !important;
        margin: 0 !important;
    }
    #alcohol-invite-banner p:nth-child(2) { display: none !important; }
    #alcohol-invite-banner button.circle { width: 28px !important; height: 28px !important; }

    /* Dashboard hero: when there's no active taper, compress the empty
       state padding. The "extra" icon variant is huge by default on Beer
       CSS — half its size. */
    #dash-no-taper {
        padding: 24px 16px !important;
    }
    #dash-no-taper i.extra {
        width: 48px !important;
        height: 48px !important;
        opacity: 0.6;
    }
    #dash-no-taper p {
        font-size: 14px !important;
        margin: 12px 0 16px !important;
    }
    #dash-no-taper button.round {
        width: 100% !important;
        max-width: 320px;
        padding: 12px 18px !important;
        font-size: 15px !important;
    }

    /* Dashboard hero: when an active taper exists, elevate the current
       dose to a single editorial number. Beer-CSS' mobile breakpoint
       forces every .s4 to span 12 — override so the first child keeps
       full width (hero) and the next two sit on a single row (6+6). */
    #dash-taper-info .grid {
        gap: 8px !important;
    }
    #dash-taper-info .grid > .s4:first-child {
        grid-column: span 12 !important;
        margin-bottom: 6px;
    }
    #dash-taper-info .grid > .s4:nth-child(2),
    #dash-taper-info .grid > .s4:nth-child(3) {
        grid-column: span 6 !important;
    }
    #dash-taper-info .grid > .s4:nth-child(2) {
        border-right: 1px solid var(--bp-rule);
    }
    #dash-taper-info .grid > .s4:first-child .small-text {
        font-size: 11px !important;
        text-transform: uppercase;
        letter-spacing: 0.1em;
        color: var(--bp-ink-soft) !important;
    }
    #dash-taper-info #dash-current-dose {
        font-family: 'Fraunces', 'Charter', Georgia, serif !important;
        font-size: 2.2rem !important;
        font-weight: 600 !important;
        margin: 4px 0 0 !important;
        line-height: 1.1 !important;
        color: var(--bp-leaf-deep) !important;
        letter-spacing: -0.02em;
    }
    #dash-taper-info .grid > .s4:nth-child(2) h5,
    #dash-taper-info .grid > .s4:nth-child(3) h5 {
        font-size: 0.95rem !important;
        font-weight: 600 !important;
        margin: 4px 0 0 !important;
    }
    #dash-taper-info .grid .small-text { font-size: 11px !important; }

    /* Crisis FAB: smaller, more discreet — still one-tap reachable but
       not screaming for attention. The bottom nav already exposes the
       Menu route; the FAB is a safety net, not the headline. */
    .crisis-fab {
        width: 44px !important;
        height: 44px !important;
        bottom: calc(var(--nav-height) + 12px + env(safe-area-inset-bottom)) !important;
        right: 14px !important;
        box-shadow: 0 2px 6px rgba(0,0,0,.18), 0 1px 2px rgba(0,0,0,.06) !important;
    }
    .crisis-fab i { width: 20px !important; height: 20px !important; }

    /* Symptom rows: one-line compact on mobile so 12 items don't feel
       like a wall. Name + slider + value chip share a single row. */
    .symptom-item {
        grid-template-columns: minmax(95px, 1fr) minmax(100px, 1.4fr) auto !important;
        grid-template-areas: "name slider value" !important;
        gap: 10px !important;
        padding: 8px 2px !important;
    }
    .symptom-name {
        font-size: 13px !important;
        font-weight: 500 !important;
        line-height: 1.25 !important;
    }
    .symptom-value.badge {
        min-width: 28px !important;
        height: 22px !important;
        font-size: 11px !important;
        padding: 0 7px !important;
    }

    /* Symptom groups: native <details> rendered as a small-caps section
       header followed by sliders. The "courants" group opens by default;
       the "tous" group reveals the long tail on demand. */
    #symptom-list details.symptom-group {
        border: 0 !important;
        background: transparent !important;
        margin: 0 0 14px !important;
        padding: 0 !important;
    }
    #symptom-list details.symptom-group > summary {
        list-style: none;
        cursor: pointer;
        text-transform: uppercase;
        font-size: 11px !important;
        font-weight: 700 !important;
        letter-spacing: 0.12em !important;
        color: var(--bp-ink-soft) !important;
        padding: 6px 0 8px;
        border-bottom: 1px solid var(--bp-rule);
        display: flex;
        align-items: center;
        gap: 6px;
    }
    #symptom-list details.symptom-group > summary::-webkit-details-marker { display: none; }
    #symptom-list details.symptom-group > summary::after {
        content: '+';
        margin-left: auto;
        font-size: 14px;
        font-weight: 400;
        opacity: 0.7;
    }
    #symptom-list details.symptom-group[open] > summary::after { content: '−'; }
    #symptom-list details.symptom-group > .symptom-item:first-of-type { margin-top: 6px; }

    /* Categories chips: make them visually a tab strip — current cat is
       solid, others are quiet outline. Less bouncy buttons feeling. */
    #symptom-chips {
        gap: 6px !important;
        margin-bottom: 12px !important;
        overflow-x: auto;
        flex-wrap: nowrap !important;
        padding-bottom: 4px;
        scrollbar-width: none;
    }
    #symptom-chips::-webkit-scrollbar { display: none; }
    #symptom-chips .chip {
        white-space: nowrap;
        font-size: 12.5px !important;
    }
}

/* ==================== Mobile aesthetic: editorial-botanical ==================== */
/* Refined paper-like cream surface, hairline-bordered cards (no glossy
   shadows), display serif for headings paired with the body sans. The
   visual goal is "well-thumbed clinic notebook" rather than "SaaS
   dashboard". Scoped to <768px so desktop keeps its current look. */

@media (max-width: 767px) {
    :root {
        --bp-paper:    #faf7f0;   /* warm cream body bg */
        --bp-ink:      #1c2a22;   /* deep forest ink */
        --bp-ink-soft: #4d5b53;
        --bp-rule:     rgba(28, 42, 34, 0.10); /* hairline */
        --bp-rule-strong: rgba(28, 42, 34, 0.18);
        --bp-leaf:     var(--brand-bar-to, #2d6a4f);
        --bp-leaf-deep:var(--brand-bar-from, #1b4332);
    }

    body { background: var(--bp-paper) !important; color: var(--bp-ink) !important; }

    /* Display serif for h-tags — Fraunces opsz makes large headings feel
       editorial rather than UI-stamped. */
    h1, h2, h3, h4, h5, h6,
    .app-topbar-title,
    .view > h5,
    .view > .row > h5.max,
    article.card > h6,
    article.round > h6 {
        font-family: 'Fraunces', 'Charter', 'Iowan Old Style', Georgia, serif !important;
        letter-spacing: -0.015em !important;
        color: var(--bp-leaf-deep) !important;
    }
    .app-topbar-title { color: #f5f7f5 !important; opacity: 1 !important; }
    h6, .view > h5 { font-weight: 600 !important; }

    /* Cards: paper, not material. Hairline border, no shadow.
       Override the soft drop-shadow added in round 1. */
    .card,
    article.card,
    article.round {
        background: #fff !important;
        border: 1px solid var(--bp-rule) !important;
        border-radius: 12px !important;
        box-shadow: none !important;
        margin-bottom: 14px !important;
    }

    /* Primary buttons: solid leaf, no gradient, no drop-shadow.
       Single visual emphasis per screen. */
    button.round:not(.border):not(.transparent):not(.circle),
    .lp-btn-primary {
        background: var(--bp-leaf-deep) !important;
        color: #f5f7f5 !important;
        border: 0 !important;
        box-shadow: none !important;
        font-weight: 600 !important;
        letter-spacing: 0.01em;
    }
    button.round.border {
        background: transparent !important;
        border: 1px solid var(--bp-rule-strong) !important;
        color: var(--bp-leaf-deep) !important;
        box-shadow: none !important;
    }

    /* Topbar: deeper forest ink, no green->teal gradient drama. */
    body.benzo-ready > header.fixed {
        background: var(--bp-leaf-deep) !important;
        box-shadow: none !important;
        border-bottom: 1px solid rgba(0,0,0,.18);
    }

    /* Bottom nav: paper-cream surface with a single hairline top border. */
    body.benzo-ready > nav.bottom {
        background: #fff !important;
        border-top: 1px solid var(--bp-rule) !important;
        box-shadow: 0 -1px 0 rgba(0,0,0,.02) !important;
    }
    nav.bottom .nav-item { color: var(--bp-ink-soft) !important; }
    nav.bottom .nav-item.active,
    nav.bottom .nav-item[aria-selected="true"] { color: var(--bp-leaf-deep) !important; font-weight: 600; }

    /* Disclaimer banner — restyle now that we're on cream bg */
    .disclaimer-banner {
        background: rgba(var(--primary-rgb), 0.06) !important;
        border: 1px solid var(--bp-rule) !important;
        color: var(--bp-ink-soft) !important;
    }
    .disclaimer-banner button {
        color: var(--bp-leaf-deep) !important;
        border-color: var(--bp-rule-strong) !important;
    }

    /* Quick action tiles: paper not chip, with hairline rule */
    .quick-action {
        background: #fff !important;
        border: 1px solid var(--bp-rule) !important;
        box-shadow: none !important;
        padding: 16px 12px !important;
    }
    .quick-action i { color: var(--bp-leaf) !important; }

    /* Sub-nav (tabs inside views: Plan de sevrage / Équivalences / Plans s) */
    .sub-nav,
    .sub-nav.tabs {
        border-bottom: 1px solid var(--bp-rule) !important;
        gap: 4px !important;
    }
    .sub-nav-item.active {
        color: var(--bp-leaf-deep) !important;
        border-bottom-color: var(--bp-leaf-deep) !important;
    }

    /* Section spacing rhythm: 20px between top-level cards */
    .view > section,
    .view > .card,
    .view > article,
    .view > div > article {
        margin-bottom: 16px !important;
    }

    /* Section titles BETWEEN cards (not h-tags inside cards) — small caps,
       deeper letter spacing. Subtle separator. */
    .view > h6,
    .view > .row > h6 {
        text-transform: uppercase;
        font-family: ui-sans-serif, system-ui, -apple-system, sans-serif !important;
        font-size: 11px !important;
        font-weight: 700 !important;
        letter-spacing: 0.12em !important;
        color: var(--bp-ink-soft) !important;
        margin: 18px 0 10px !important;
    }

    /* Mood scale dots / chips inside cards: tighter, monochrome accent */
    .mood-scale .mood-dot,
    .mood-scale button {
        background: transparent !important;
        border: 1px solid var(--bp-rule-strong) !important;
        color: var(--bp-ink-soft) !important;
    }
    .mood-scale .mood-dot.selected,
    .mood-scale button.selected {
        background: var(--bp-leaf-deep) !important;
        color: #f5f7f5 !important;
        border-color: var(--bp-leaf-deep) !important;
    }
}

/* ==================== Mobile aesthetic — dark variant ==================== */
/* Restores readable contrast on phones when [data-theme="dark"] is set
   (or prefers-color-scheme: dark with theme=auto). The cream block above
   is forced cream-on-ink unconditionally; this block flips the surface
   palette without touching the rest of the layout rules. */

@media (max-width: 767px) {
    [data-theme="dark"] {
        --bp-paper:    #14191a;
        --bp-ink:      #e8ece8;
        --bp-ink-soft: #98a89a;
        --bp-rule:     rgba(255, 255, 255, 0.08);
        --bp-rule-strong: rgba(255, 255, 255, 0.16);
        --bp-leaf:     var(--primary, #74c69d);
        --bp-leaf-deep:var(--primary, #95d5b2);
    }

    [data-theme="dark"] body {
        background: var(--bp-paper) !important;
        color: var(--bp-ink) !important;
    }

    /* Headings keep the editorial Fraunces serif but switch to the soft
       mint accent — pure white feels too clinical against the dark paper. */
    [data-theme="dark"] h1,
    [data-theme="dark"] h2,
    [data-theme="dark"] h3,
    [data-theme="dark"] h4,
    [data-theme="dark"] h5,
    [data-theme="dark"] h6,
    [data-theme="dark"] .view > h5,
    [data-theme="dark"] .view > .row > h5.max,
    [data-theme="dark"] article.card > h6,
    [data-theme="dark"] article.round > h6 {
        color: var(--bp-leaf-deep) !important;
    }

    /* Cards: dark paper, hairline-light. */
    [data-theme="dark"] .card,
    [data-theme="dark"] article.card,
    [data-theme="dark"] article.round {
        background: #1c2421 !important;
        border-color: var(--bp-rule) !important;
    }

    /* Topbar: deepest forest, almost black. Avoids the pale mint chip
       colour bleeding into the status bar area. */
    [data-theme="dark"] body.benzo-ready > header.fixed {
        background: var(--brand-bar-from, #0f1f17) !important;
        border-bottom-color: rgba(255, 255, 255, 0.06) !important;
    }
    [data-theme="dark"] .app-topbar-title {
        color: #e8ece8 !important;
    }

    /* Bottom nav: dark surface, mint accent for active tab. */
    [data-theme="dark"] body.benzo-ready > nav.bottom {
        background: #181d1b !important;
        border-top-color: var(--bp-rule) !important;
    }
    [data-theme="dark"] nav.bottom .nav-item { color: var(--bp-ink-soft) !important; }
    [data-theme="dark"] nav.bottom .nav-item.active,
    [data-theme="dark"] nav.bottom .nav-item[aria-selected="true"] {
        color: var(--bp-leaf-deep) !important;
    }

    /* Disclaimer + buttons: tint mint, not forest deep (which is now
       reserved for the lighter accent). */
    [data-theme="dark"] .disclaimer-banner {
        background: rgba(149, 213, 178, 0.08) !important;
        border-color: var(--bp-rule) !important;
        color: var(--bp-ink-soft) !important;
    }
    [data-theme="dark"] .disclaimer-banner button {
        color: var(--bp-leaf-deep) !important;
        border-color: var(--bp-rule-strong) !important;
    }

    /* Primary buttons: mint background with deep ink text — meets WCAG
       contrast against the dark paper (ratio ≥ 4.5). */
    [data-theme="dark"] button.round:not(.border):not(.transparent):not(.circle),
    [data-theme="dark"] .lp-btn-primary {
        background: var(--bp-leaf-deep) !important;
        color: var(--primary-fg, #0f1f17) !important;
    }
    [data-theme="dark"] button.round.border {
        color: var(--bp-leaf-deep) !important;
        border-color: var(--bp-rule-strong) !important;
    }

    /* Quick actions: dark tile, mint icons. */
    [data-theme="dark"] .quick-action {
        background: #1c2421 !important;
        border-color: var(--bp-rule) !important;
    }
    [data-theme="dark"] .quick-action i { color: var(--bp-leaf-deep) !important; }

    /* Sub-nav active indicator follows the mint accent. */
    [data-theme="dark"] .sub-nav,
    [data-theme="dark"] .sub-nav.tabs {
        border-bottom-color: var(--bp-rule) !important;
    }
    [data-theme="dark"] .sub-nav-item.active {
        color: var(--bp-leaf-deep) !important;
        border-bottom-color: var(--bp-leaf-deep) !important;
    }

    /* Mood scale: outlined buttons, mint fill when selected. */
    [data-theme="dark"] .mood-scale .mood-dot,
    [data-theme="dark"] .mood-scale button {
        border-color: var(--bp-rule-strong) !important;
        color: var(--bp-ink-soft) !important;
    }
    [data-theme="dark"] .mood-scale .mood-dot.selected,
    [data-theme="dark"] .mood-scale button.selected {
        background: var(--bp-leaf-deep) !important;
        color: var(--primary-fg, #0f1f17) !important;
        border-color: var(--bp-leaf-deep) !important;
    }
}

/* ==================== Tablet & fold-opened breakpoint ==================== */
/* Targets viewports 768-1023 (iPad Mini portrait, Pixel Fold inner display
   in landscape, Chrome desktop window resized small, foldables). The
   <768px cream-block does not apply here, so the desktop palette stays
   intact; we only adjust the layout proportions so reading-line-length
   and tap targets feel right at this in-between width. */
@media (min-width: 768px) and (max-width: 1023px) {
    /* Slim the side rail: 220 → 180 frees ~40 px of content width. */
    .desktop-nav { width: 180px !important; padding: 12px 8px !important; }
    .desktop-nav-item { padding: 8px 10px !important; font-size: 13px !important; }
    .desktop-nav-item span { font-size: 13px !important; }

    /* Constrain the reading column. Without this the content stretches
       to the full remaining width and lines run > 100 chars. */
    .app-layout > main {
        max-width: 720px;
        margin-right: auto;
        padding: 0 16px;
    }

    /* Slightly tighter top padding for the views. */
    .view {
        padding-left: 4px !important;
        padding-right: 4px !important;
    }

    /* Card stacks: more breathing room between sections than mobile but
       less than the desktop spacing. */
    .view > section,
    .view > article,
    .view > .card { margin-bottom: 18px; }
}

/* Pixel Fold inner display (1768×2208 logical, 884×1104 dp) is wider
   than tablet but the same proportional reading-line problem applies.
   Cap the content column at desktop max-width so reading stays sane. */
@media (min-width: 1024px) and (max-width: 1280px) {
    .app-layout > main { max-width: 880px; }
}

/* ==================== Global date strip ==================== */
/* Sticky single-row date selector that hovers below the topbar on every
   date-dependent view. Hidden by default; body.date-strip-active flips
   it on. Position uses --topbar-height-safe so it sits flush with the
   bottom of the topbar in TWA mode (status-bar-aware). */
.global-date-strip {
    position: fixed;
    top: var(--topbar-height-safe);
    left: 0;
    right: 0;
    height: 44px;
    z-index: 90;
    display: none;
    align-items: center;
    gap: 4px;
    padding: 4px 8px;
    background: var(--card, #fff);
    border-bottom: 1px solid var(--border, rgba(0,0,0,.08));
    box-sizing: border-box;
}
body.date-strip-active .global-date-strip {
    display: flex;
}
body.date-strip-active main#main-content {
    /* Push content down by the strip height — keeps sticky elements
       inside views from getting hidden behind the strip. main is
       inside .app-layout, so padding once on main is enough. */
    padding-top: 44px;
}

/* The .view element carries its own legacy top-padding to clear the
   fixed topbar; body now also pads for the topbar AND main pads for
   the strip, so stacking all three buries the content under ~180 px
   of empty space. Reset .view padding-top when the strip is active —
   body + main already account for both bars. */
body.date-strip-active .view {
    padding-top: 12px !important;
}

/* Avoid duplicate date controls: the carnet's own datebar becomes
   redundant once the global strip is showing the same date nav.
   The greeting (.carnet-subtitle) is NOT a date control — keep it
   visible so the warm "Comment s'est passée ta journée ?" shows. */
body.date-strip-active .carnet-datebar {
    display: none !important;
}
/* Give the greeting a little top breathing room when the datebar is
   hidden (it was previously spaced by the datebar margin). */
body.date-strip-active .carnet-subtitle {
    margin-top: 8px;
}

/* Track keeps its #symptom-date in the DOM (saveSymptoms reads it)
   but the visible label/input row is hidden on phones. */
@media (max-width: 767px) {
    body.date-strip-active #symptom-date,
    body.date-strip-active label[for="symptom-date"] {
        display: none !important;
    }
}

.gds-btn {
    width: 36px;
    height: 36px;
    border: 1px solid var(--border, rgba(0,0,0,.12));
    background: var(--card, #fff);
    color: var(--text, #1c2a22);
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    flex-shrink: 0;
    transition: background .12s, border-color .12s;
}
.gds-btn:hover { background: rgba(0,0,0,.05); border-color: rgba(0,0,0,.22); }
.gds-btn:active { background: rgba(0,0,0,.08); }
.gds-btn i { width: 20px; height: 20px; }

/* Layout: [spacer] [nav: prev · label · next] [calendar].
   The left spacer is the same width as the calendar button on the
   right, so the centred .gds-nav is balanced on both sides and the
   date trio sits exactly in the middle of the viewport — the
   calendar shortcut no longer pulls it off-centre. */
.gds-nav {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
}
.gds-spacer {
    flex: 0 0 36px;
    height: 36px;
}

.gds-label {
    flex: 0 1 auto;
    max-width: 260px;
    height: 36px;
    border: 1px solid var(--border, rgba(0,0,0,.12));
    background: var(--card, #fff);
    color: var(--text, #1c2a22);
    font-family: 'Fraunces', 'Charter', Georgia, serif;
    font-weight: 600;
    font-size: 1rem;
    letter-spacing: -.01em;
    border-radius: 999px;
    cursor: pointer;
    padding: 0 16px;
    text-align: center;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
    transition: background .12s, border-color .12s;
}
.gds-label:hover,
.gds-label:focus-visible { background: rgba(0,0,0,.05); border-color: rgba(0,0,0,.22); }
.gds-label--today {
    color: var(--bp-leaf-deep, var(--primary, #1b4332));
    border-color: var(--primary, #1b4332);
    background: rgba(82,183,136,.08);
}
.gds-picker-input {
    /* Native date input opened programmatically by tapping .gds-label.
       Anchor it at the centre of the viewport so the native calendar
       popup appears in the middle of the screen instead of the top-left
       corner (default with no left/top). position: fixed → viewport is
       the containing block. */
    position: fixed;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    opacity: 0;
    pointer-events: none;
    width: 1px;
    height: 1px;
}

/* Dark theme variant */
[data-theme="dark"] .global-date-strip {
    background: #181d1b;
    border-bottom-color: rgba(255,255,255,.08);
}
[data-theme="dark"] .gds-btn,
[data-theme="dark"] .gds-label {
    color: #e8ece8;
    background: #202724;
    border-color: rgba(255,255,255,.12);
}
[data-theme="dark"] .gds-btn:hover,
[data-theme="dark"] .gds-label:hover {
    background: rgba(255,255,255,.08);
    border-color: rgba(255,255,255,.22);
}
[data-theme="dark"] .gds-label--today {
    color: var(--accent);
    border-color: var(--primary);
    background: rgba(82,183,136,.14);
}

/* Mobile: tighter horizontal padding, the strip already accounts for
   the safe area via --topbar-height-safe. */
@media (max-width: 767px) {
    .global-date-strip {
        padding: 4px 6px;
    }
    .gds-btn { width: 40px; height: 40px; }
    .gds-label { font-size: .95rem; height: 40px; }
    /* Keep the left spacer matched to the larger mobile button so the
       date trio stays centred. */
    .gds-spacer { flex-basis: 40px; height: 40px; }
}

/* ==================== Reports view ==================== */
.report-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    margin: 6px 0 4px;
}
.report-stat {
    background: var(--surface-variant, rgba(0,0,0,.03));
    border: 1px solid var(--border, rgba(0,0,0,.08));
    border-radius: 10px;
    padding: 8px 10px;
    text-align: center;
}
.report-stat-value {
    font-family: 'Fraunces', Georgia, serif;
    font-size: 1.35rem;
    font-weight: 600;
    line-height: 1.1;
    color: var(--bp-leaf-deep, var(--primary, #1b4332));
}
.report-stat-label {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--muted-fg, #666);
    margin-top: 4px;
}

.report-list {
    list-style: none;
    margin: 0;
    padding: 0;
}
.report-list li {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    padding: 6px 0;
    border-bottom: 1px solid var(--border, rgba(0,0,0,.06));
}
.report-list li:last-child { border-bottom: 0; }
.report-list-name { font-weight: 500; }
.report-list-meta { font-size: 12px; color: var(--muted-fg, #666); white-space: nowrap; }

.report-cat-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 4px 0;
    font-size: 13px;
}
.report-cat-label {
    flex: 0 0 90px;
    text-align: right;
    color: var(--muted-fg, #666);
}
.report-cat-val {
    flex: 0 0 32px;
    text-align: right;
    font-weight: 600;
}
.report-progress {
    flex: 1 1 auto;
    height: 8px;
    background: rgba(0,0,0,.06);
    border-radius: 999px;
    overflow: hidden;
}
.report-progress-fill {
    height: 100%;
    background: var(--bp-leaf-deep, var(--primary, #2d6a4f));
    border-radius: 999px;
    transition: width .3s ease;
}

.report-taper-row { padding: 6px 0; }
.report-taper-row + .report-taper-row { border-top: 1px solid var(--border, rgba(0,0,0,.08)); margin-top: 8px; padding-top: 12px; }
.report-taper-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 6px; }
.report-taper-pct {
    font-family: 'Fraunces', Georgia, serif;
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--bp-leaf-deep, var(--primary));
}
.report-taper-meta {
    font-size: 12px;
    color: var(--muted-fg, #666);
    margin-top: 6px;
    line-height: 1.5;
}

[data-theme="dark"] .report-stat { background: rgba(255,255,255,.04); border-color: rgba(255,255,255,.08); }
[data-theme="dark"] .report-progress { background: rgba(255,255,255,.08); }

/* Period chips at the top */
#reports-period .chip { font-size: 13px; }

/* ==================== View-section accordions ====================
   Stacked accordions inside a view (replacing internal sub-tabs).
   Each <details class="view-section"> renders as a card-styled block
   with a tappable summary and reveals its inner panel when open. */
.view-section {
    background: var(--card, #fff);
    border: 1px solid var(--border, rgba(0,0,0,.08));
    border-radius: 12px;
    margin-bottom: 12px;
    overflow: hidden;
}
.view-section > summary {
    list-style: none;
    cursor: pointer;
    padding: 12px 14px;
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 44px;
    box-sizing: border-box;
    position: relative;
}
.view-section > summary::-webkit-details-marker { display: none; }
.view-section > summary > h6 {
    margin: 0;
    flex: 1 1 auto;
    font-family: 'Fraunces', Georgia, serif;
    font-size: 1.05rem;
    font-weight: 600;
    letter-spacing: -.01em;
    color: var(--bp-leaf-deep, var(--text, #1b4332));
}
.view-section > summary::after {
    content: '+';
    font-size: 20px;
    font-weight: 400;
    line-height: 1;
    color: var(--muted-fg, #666);
    opacity: .7;
    margin-left: auto;
    transition: transform .2s;
}
.view-section[open] > summary::after { content: '−'; opacity: 1; }
.view-section[open] > summary {
    border-bottom: 1px solid var(--border, rgba(0,0,0,.08));
}
.view-section > :not(summary) {
    padding: 12px 14px 14px;
}

/* Dark theme variant — borrow the same hairline tokens used elsewhere. */
[data-theme="dark"] .view-section {
    background: #1c2421;
    border-color: rgba(255,255,255,.08);
}
[data-theme="dark"] .view-section > summary > h6 { color: var(--accent); }
[data-theme="dark"] .view-section[open] > summary {
    border-bottom-color: rgba(255,255,255,.08);
}

/* Drawer items without an icon (educational content: Traitements,
   Livres, Articles & ressources). Indent the text by the same amount
   the icon column reserves so the column of labels stays aligned. */
.desktop-nav-item.nav-text-only {
    padding-left: 46px;
}
.desktop-nav-item.nav-text-only > .nav-section-chevron { padding-left: 0; }

/* ==================== Day-status badge ====================
   Floating cluster of gommettes pinned to the top-left of date-bound
   tool views. Mirrors the dots shown on the calendar for the active
   day so the user can see at a glance "what's already filled". */
.day-badge {
    position: absolute;
    top: 6px;
    left: 6px;
    z-index: 5;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    background: #fff;
    border: 1.5px solid rgba(0, 0, 0, 0.12);
    border-radius: 999px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.10);
    pointer-events: none;
}
.day-badge .cal-gommette {
    width: 14px;
    height: 14px;
}
.day-badge .cal-gommette--taper {
    border-width: 2px;
}
.day-badge:empty,
.day-badge[hidden] { display: none; }

[data-theme="dark"] .day-badge {
    background: rgba(28, 36, 33, 0.85);
    border-color: rgba(255, 255, 255, 0.12);
}

/* The taper view container becomes the badge's positioning context. */
#view-carnet, #view-taper, #view-alcohol-taper { position: relative; }

/* GG: Alcohol tracking opt-out — body.no-alcohol-tracking removes
   the alcohol checkbox from the carnet and the Alcool card from
   Reports. The setting toggle in Paramètres flips this class. */
body.no-alcohol-tracking #carnet-alcohol-card,
body.no-alcohol-tracking #report-alcohol-card {
    display: none !important;
}

/* ==================== Today-entries sheet ====================
   Slides up from the bottom when the user taps the "Aujourd'hui"
   slot in the bottom nav. Lists the day's micro-views as a context
   menu so the user can jump straight to one without leaving the
   navigation gesture. */
.today-sheet-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.40);
    z-index: 1098;
    opacity: 0;
    pointer-events: none;
    transition: opacity 200ms ease;
}
.today-sheet-backdrop.open {
    opacity: 1;
    pointer-events: auto;
}
.today-sheet {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1099;
    background: var(--card, #fff);
    border-top-left-radius: 18px;
    border-top-right-radius: 18px;
    padding: 8px 16px calc(20px + env(safe-area-inset-bottom));
    box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.18);
    transform: translateY(110%);
    transition: transform 240ms cubic-bezier(.2, .8, .2, 1);
}
.today-sheet.open { transform: translateY(0); }
.today-sheet-handle {
    width: 48px;
    height: 4px;
    background: rgba(0, 0, 0, 0.18);
    border-radius: 999px;
    margin: 0 auto 12px;
}
.today-sheet-title {
    margin: 0 0 12px;
    font-family: 'Fraunces', Georgia, serif;
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--bp-leaf-deep, var(--text));
    text-align: center;
}
.today-sheet-item {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 14px 12px;
    background: transparent;
    border: 0;
    border-radius: 12px;
    text-align: left;
    cursor: pointer;
    font-size: 15px;
    color: var(--text);
}
.today-sheet-item:hover,
.today-sheet-item:focus-visible {
    background: rgba(var(--primary-rgb), 0.06);
}
.today-sheet-item .cal-gommette {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
}
.today-sheet-item-label {
    flex: 1 1 auto;
    font-weight: 500;
}
.today-sheet-item i {
    width: 18px;
    height: 18px;
    color: var(--muted-fg);
    opacity: 0.7;
}
.today-sheet-close {
    width: 100%;
    margin-top: 8px;
    padding: 12px;
    background: transparent;
    border: 1px solid var(--border, rgba(0, 0, 0, 0.12));
    border-radius: 999px;
    font-weight: 500;
    color: var(--text);
    cursor: pointer;
}
[data-theme="dark"] .today-sheet { background: #1c2421; }
[data-theme="dark"] .today-sheet-handle { background: rgba(255, 255, 255, 0.18); }
[data-theme="dark"] .today-sheet-item:hover,
[data-theme="dark"] .today-sheet-item:focus-visible {
    background: rgba(149, 213, 178, 0.10);
}
/* If alcohol tracking is off, hide the alcohol entry from the sheet. */
body.no-alcohol-tracking .today-sheet-item[data-go="alcohol"] { display: none; }

/* ==================== Alcohol counters ==================== */
.alcohol-counter {
    background: rgba(0,0,0,0.02);
    border: 1px solid var(--border, rgba(0,0,0,0.08));
    border-radius: 10px;
    padding: 10px 8px;
    text-align: center;
}
.alcohol-counter-label {
    font-size: 13px;
    font-weight: 500;
    margin-bottom: 6px;
    line-height: 1.2;
}
.alcohol-counter-controls {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
.alcohol-counter-controls button {
    width: 32px;
    height: 32px;
    padding: 0;
    font-size: 18px;
    line-height: 1;
}
.alcohol-counter-value {
    font-family: 'Fraunces', Georgia, serif;
    font-weight: 600;
    font-size: 1.4rem;
    min-width: 32px;
    color: var(--bp-leaf-deep, var(--primary));
}
.alcohol-counter-grams {
    font-size: 11px;
    color: var(--muted-fg);
    margin-top: 4px;
    opacity: .8;
}
[data-theme="dark"] .alcohol-counter { background: rgba(255,255,255,0.04); }

/* ===== Lecteur d'articles in-app (overlay iframe + bouton Retour) ===== */
.bp-article-overlay { position: fixed; inset: 0; z-index: 1200; display: flex; flex-direction: column; background: var(--bg, #fff); }
.bp-article-overlay[hidden] { display: none; }
body.bp-article-open { overflow: hidden; }
.bp-article-overlay__bar { display: flex; align-items: center; gap: 12px; flex-shrink: 0; padding: max(env(safe-area-inset-top, 0px), 8px) 12px 8px; background: linear-gradient(135deg, var(--brand-bar-from, #1b4332) 0%, var(--brand-bar-to, #2d6a4f) 100%); color: var(--on-brand, #d8f3dc); box-shadow: 0 2px 8px rgba(0,0,0,.18); }
.bp-article-overlay__back { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 8px 16px; border: none; border-radius: 10px; background: rgba(255,255,255,.16); color: inherit; font-size: 15px; font-weight: 600; cursor: pointer; }
.bp-article-overlay__back:hover { background: rgba(255,255,255,.28); }
.bp-article-overlay__title { font-size: 14px; font-weight: 600; opacity: .92; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bp-article-overlay__open { margin-left: auto; display: inline-flex; align-items: center; justify-content: center; min-width: 40px; min-height: 40px; border-radius: 8px; color: inherit; text-decoration: none; }
.bp-article-overlay__open:hover { background: rgba(255,255,255,.18); }
.bp-article-overlay__frame { flex: 1; width: 100%; border: 0; background: var(--bg, #fff); }

/* Cookie banner : en mode app sur mobile, le remonter au-dessus de la bottom-nav
   (sinon il intercepte les taps de navigation — il est en bottom:0/z-9999 inline). */
@media (max-width: 767px) {
    body.benzo-ready #cookie-banner {
        bottom: calc(var(--nav-height, 80px) + env(safe-area-inset-bottom)) !important;
    }
}