/* ✨ V13.26 — Classe SEO/Accessibility : invisible visuellement mais lue par
   les screen readers ET les crawlers (Googlebot, Bingbot...). Standard W3C. */
.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;
}

/* =========================================================
   🎨 Design tokens — "Carnet de chineur"
   ========================================================= */
:root {
    --paper:        #faf6ed;
    --paper-2:      #f3ecdb;
    --paper-3:      #e8dec7;
    --ink:          #1d1814;
    --ink-2:        #4a3f33;
    --ink-3:        #6b5d4f;  /* ✨ V13.19 — assombri pour ratio WCAG AA 4.5:1 (avant: #7a6c5d, ratio 4.0:1) */
    --line:         #d6c9a8;

    --moss:         #3a5a40;
    --moss-deep:    #2a4530;
    --moss-light:   #d8e2d4;
    --copper:       #b8763a;
    --copper-deep:  #8c5223;
    --copper-light: #f3dcc1;
    --burgundy:     #8a2f2f;
    --cream:        #fbe8c4;

    --tier-std:     #5784a8;
    --tier-big:     #c47a2a;
    --tier-mega:    #a8341a;
    --tier-legend:  #6b3aa0;

    --r-sm: 10px;
    --r-md: 16px;
    --r-lg: 22px;
    --r-xl: 28px;
    --r-pill: 999px;

    --shadow-soft: 0 1px 2px rgba(74, 63, 51, 0.08), 0 4px 16px -4px rgba(74, 63, 51, 0.10);
    --shadow-card: 0 2px 4px rgba(74, 63, 51, 0.08), 0 8px 24px -8px rgba(74, 63, 51, 0.18);
    --shadow-deep: 0 4px 8px rgba(74, 63, 51, 0.12), 0 24px 48px -12px rgba(74, 63, 51, 0.30);

    --safe-top: env(safe-area-inset-top, 0px);
    --safe-bottom: env(safe-area-inset-bottom, 0px);
    --nav-h: 76px;
    --header-h: 60px;
}

html[data-theme="dark"] {
    --paper:        #14110d;
    --paper-2:      #1f1a14;
    --paper-3:      #2a231b;
    --ink:          #f3ecdb;
    --ink-2:        #c4b9a3;
    --ink-3:        #8a8073;
    --line:         #3a3128;
    --moss:         #6a8e6f;
    --moss-deep:    #3a5a40;
    --moss-light:   #2a3a2e;
    --copper:       #d99860;
    --copper-deep:  #b8763a;
    --copper-light: #4a3424;
    --shadow-soft: 0 1px 2px rgba(0,0,0,0.4), 0 4px 16px -4px rgba(0,0,0,0.5);
    --shadow-card: 0 2px 4px rgba(0,0,0,0.4), 0 8px 24px -8px rgba(0,0,0,0.6);
    --shadow-deep: 0 4px 8px rgba(0,0,0,0.5), 0 24px 48px -12px rgba(0,0,0,0.7);
}

* { margin: 0; padding: 0; box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
[hidden] { display: none !important; }
*:focus-visible { outline: 2px solid var(--copper); outline-offset: 2px; }

html, body {
    background: var(--paper);
    color: var(--ink);
    font-family: 'Inter Tight', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
    font-size: 16px;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    overscroll-behavior-y: contain;
}

body {
    min-height: 100vh;
    min-height: 100dvh;
    background-image:
        radial-gradient(at 0% 0%, rgba(184, 118, 58, 0.06) 0%, transparent 40%),
        radial-gradient(at 100% 100%, rgba(58, 90, 64, 0.05) 0%, transparent 50%);
    /* ✨ V12.14 — Comportement app mobile : pas de zoom, pas de pull-to-refresh natif iOS */
    touch-action: pan-x pan-y;
    -webkit-touch-callout: none;     /* pas de menu tactile sur tap-and-hold */
    -webkit-user-select: none;       /* pas de sélection de texte par défaut */
    user-select: none;
    overscroll-behavior-y: contain;   /* pas de bounce iOS */
}
/* ✨ V12.14 — Mais permettre la sélection dans les champs de saisie et zones de notes */
input, textarea, [contenteditable], .selectable {
    -webkit-user-select: text;
    user-select: text;
}

/* ✨ V12.7 — Vue mobile UNIQUEMENT
   Sur tous les écrans ≥ 540px : cadre simulé téléphone 420px centré.
   Sur petits écrans (mobile réel) : 100% width.
*/
@media (min-width: 540px) {
    body {
        background: var(--ink);
        background-image:
            radial-gradient(at 30% 30%, rgba(184, 118, 58, 0.15) 0%, transparent 50%),
            radial-gradient(at 70% 70%, rgba(58, 90, 64, 0.12) 0%, transparent 60%);
        padding: 18px 0 0;
        min-height: 100vh;
    }
    .app {
        max-width: 420px;
        width: 420px;
        margin: 0 auto;
        min-height: calc(100vh - 36px);
        background: var(--paper);
        border-radius: 28px 28px 0 0;
        box-shadow: 0 24px 80px rgba(0, 0, 0, 0.45), 0 8px 32px rgba(0, 0, 0, 0.25);
        overflow: hidden;
        position: relative;
    }

    /* ✨ V13.18 — Fix barre de navigation desktop : tout doit rester dans le cadre 420px
       Sans ces règles, certaines barres (chip-row, geo-trigger) peuvent visuellement
       déborder du cadre simulé sur desktop, créant une UX incohérente vs mobile. */
    .app .chip-row {
        max-width: 100%;
        overflow-x: auto !important;
        overflow-y: hidden;
    }

    /* ✨ Tous les éléments fixed contraints au cadre 420px sur desktop simulé */
    .toast,
    #toast,
    .pwa-banner,
    .pwa-ios-sheet,
    .splash,
    #splash,
    .loading-bar,
    .ptr-indicator,
    #ptr,
    .bottom-nav,
    .onboard-bubble,
    .offline-banner {
        max-width: 420px !important;
        left: 50% !important;
        right: auto !important;
        transform: translateX(-50%) !important;
    }
    /* La sheet est déjà centrée via translate(-50%) — pas besoin d'override */
    .toast.show {
        transform: translateX(-50%) translateY(0) !important;
    }
    .pwa-banner {
        bottom: calc(var(--nav-h) + var(--safe-bottom) + 12px) !important;
        max-width: 396px !important;
    }
    /* Backdrop : occupe tout l'écran derrière, pas seulement le cadre */
    .sheet-backdrop {
        max-width: none !important;
        left: 0 !important;
        right: 0 !important;
        transform: none !important;
    }
    .loading-bar { top: 0 !important; }
    .bottom-nav {
        bottom: 0 !important;
        /* ✨ V13.18 — Largeur interne 420px et padding cohérent avec l'app */
        width: 420px !important;
        max-width: 420px !important;
        box-sizing: border-box !important;
    }
    /* FAB : align au bord intérieur du cadre */
    .fab-top {
        right: calc(50vw - 210px + 16px) !important;
        left: auto !important;
    }
}

/* ✨ V12 : Splash screen */
.splash {
    position: fixed;
    inset: 0;
    background: linear-gradient(160deg, var(--paper) 0%, var(--paper-2) 100%);
    z-index: 99999;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    transition: opacity 0.4s ease, visibility 0.4s ease;
}
.splash.hidden {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}
.splash__logo {
    text-align: center;
    margin-bottom: 32px;
}
.splash__title {
    font-family: 'Fraunces', 'Georgia', serif;
    font-size: 32px;
    font-weight: 600;
    color: var(--ink);
    letter-spacing: -0.01em;
    margin-bottom: 8px;
}
.splash__subtitle {
    font-size: 13px;
    color: var(--ink-3);
    letter-spacing: 0.05em;
    text-transform: uppercase;
    font-weight: 500;
}
.splash__spinner {
    width: 44px;
    height: 44px;
    border: 3px solid var(--paper-3, rgba(0,0,0,0.08));
    border-top-color: var(--copper);
    border-radius: 50%;
    animation: spin 0.9s linear infinite;
    margin-bottom: 20px;
}
.splash__progress {
    font-size: 12px;
    color: var(--ink-3);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    font-weight: 600;
    text-align: center;
    min-height: 18px;
}
.splash__title.error { color: #b8423a; }
.splash__retry {
    margin-top: 24px;
    padding: 12px 28px;
    border-radius: var(--r-pill);
    background: var(--copper);
    color: var(--ink);
    font-weight: 600;
    font-size: 14px;
    border: 0;
    cursor: pointer;
    box-shadow: 0 4px 16px rgba(184, 118, 58, 0.4);
    transition: transform 0.15s ease;
}
.splash__retry:active { transform: scale(0.96); }

button, input, select, textarea { font-family: inherit; font-size: inherit; color: inherit; }
button { background: none; border: none; cursor: pointer; }
a { color: var(--moss); text-decoration: none; }
input { -webkit-appearance: none; appearance: none; }

.serif { font-family: 'Fraunces', 'Georgia', serif; font-optical-sizing: auto; }

/* =========================================================
   Layout
   ========================================================= */
.app {
    max-width: 540px;
    margin: 0 auto;
    min-height: 100dvh;
    position: relative;
    padding-top: var(--safe-top);
    padding-bottom: calc(var(--nav-h) + var(--safe-bottom));
    background: var(--paper);
}

@media (min-width: 720px) {
    .app { max-width: 960px; box-shadow: var(--shadow-deep); }
}

/* ✨ V12.6 — Barre de progression globale (fine, en haut) */
.loading-bar {
    position: fixed;
    top: 0; left: 0; right: 0;
    height: 2px;
    background: transparent;
    z-index: 99998;
    pointer-events: none;
    overflow: hidden;
}
.loading-bar::after {
    content: '';
    display: block;
    width: 30%;
    height: 100%;
    background: linear-gradient(90deg, transparent, var(--copper), transparent);
    animation: loadingSlide 1.2s ease-in-out infinite;
    opacity: 0;
    transition: opacity 0.2s ease;
}
.loading-bar.active::after { opacity: 1; }
@keyframes loadingSlide {
    0%   { transform: translateX(-100%); }
    100% { transform: translateX(400%); }
}

/* ✨ V12.6 — Skeleton loader pour cartes pendant chargement */
.skeleton-card {
    background: var(--paper-2);
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    padding: 16px;
    margin-bottom: 12px;
    height: 168px;
    position: relative;
    overflow: hidden;
}
.skeleton-card::after {
    content: '';
    position: absolute; inset: 0;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.4), transparent);
    transform: translateX(-100%);
    animation: skeletonSlide 1.5s ease-in-out infinite;
}
@keyframes skeletonSlide { 100% { transform: translateX(100%); } }
.skeleton-card__line {
    height: 12px;
    background: var(--line);
    border-radius: 4px;
    margin-bottom: 10px;
    opacity: 0.6;
}
.skeleton-card__line--title { width: 70%; height: 18px; margin-bottom: 14px; }
.skeleton-card__line--meta  { width: 50%; }

/* =========================================================
   Header
   ========================================================= */
.app-header {
    position: sticky;
    top: var(--safe-top);
    z-index: 50;
    background: color-mix(in srgb, var(--paper) 88%, transparent);
    backdrop-filter: saturate(140%) blur(20px);
    -webkit-backdrop-filter: saturate(140%) blur(20px);
    border-bottom: 1px solid var(--line);
    padding: 12px 18px;
    display: flex;
    align-items: center;
    gap: 8px;
    height: var(--header-h);
}

/* ✨ V13.27 — Wrapper H1 invisible (reset styles browser) — préserve apparence header */
.app-header__h1 {
    flex: 1;
    min-width: 0;
    margin: 0;
    padding: 0;
    font-size: inherit;
    font-weight: inherit;
    line-height: inherit;
    color: inherit;
    display: flex;
    align-items: center;
}

/* ✨ V13.19 — Bouton brand cliquable (retour à l'accueil) */
.app-header__brand {
    flex: 1;
    min-width: 0;
    background: transparent;
    border: 0;
    padding: 4px 6px;
    margin: -4px -6px;
    text-align: left;
    cursor: pointer;
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    gap: 2px;
    transition: background 0.15s ease, transform 0.15s ease;
    font-family: inherit;
    color: inherit;
}
.app-header__brand:hover {
    background: color-mix(in srgb, var(--ink) 4%, transparent);
}
.app-header__brand:active {
    transform: scale(0.98);
    background: color-mix(in srgb, var(--ink) 8%, transparent);
}
.app-header__brand:focus-visible {
    outline: 2px solid var(--copper);
    outline-offset: 2px;
}

.app-header__brand-line1 {
    font-family: 'Fraunces', serif;
    font-weight: 600;
    font-style: italic;
    font-size: 13px;
    color: var(--copper);
    letter-spacing: 0.02em;
    line-height: 1;
}
.app-header__brand-line2 {
    font-family: 'Fraunces', serif;
    font-weight: 700;
    font-size: 19px;
    line-height: 1.1;
    color: var(--ink);
}

.icon-btn {
    width: 42px; height: 42px;
    border-radius: var(--r-pill);
    display: flex; align-items: center; justify-content: center;
    color: var(--ink-2);
    transition: all 0.15s ease;
    flex-shrink: 0;
    position: relative;
}
.icon-btn:active { transform: scale(0.92); background: var(--paper-2); }
.icon-btn svg { width: 22px; height: 22px; }

/* Pulse de l'onboarding */
.icon-btn--pulse::after {
    content: '';
    position: absolute;
    top: 6px; right: 6px;
    width: 9px; height: 9px;
    background: var(--copper);
    border-radius: 50%;
    box-shadow: 0 0 0 0 rgba(184, 118, 58, 0.6);
    animation: ping 1.6s cubic-bezier(0, 0, 0.2, 1) infinite;
}
@keyframes ping {
    0% { box-shadow: 0 0 0 0 rgba(184, 118, 58, 0.5); }
    70% { box-shadow: 0 0 0 12px rgba(184, 118, 58, 0); }
    100% { box-shadow: 0 0 0 0 rgba(184, 118, 58, 0); }
}

/* =========================================================
   Tabs
   ========================================================= */
.tab-content {
    display: none;
    padding: 18px 18px 24px;
    /* ✨ V12.18 : padding bas adapté à la bottom-nav (sauf override par enfant) */
    padding-bottom: calc(var(--nav-h) + var(--safe-bottom) + 24px);
    animation: fadeUp 0.35s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.tab-content.active { display: block; }

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

/* =========================================================
   Pull-to-refresh
   ========================================================= */
.ptr-indicator {
    position: absolute;
    top: var(--header-h);
    left: 50%;
    transform: translateX(-50%) translateY(-100%);
    z-index: 40;
    background: var(--paper-2);
    border: 1px solid var(--line);
    border-radius: var(--r-pill);
    width: 42px; height: 42px;
    display: flex; align-items: center; justify-content: center;
    box-shadow: var(--shadow-soft);
    color: var(--moss);
    transition: transform 0.2s ease, opacity 0.2s ease;
    opacity: 0;
}
.ptr-indicator svg { width: 20px; height: 20px; }
.ptr-indicator.visible { opacity: 1; transform: translateX(-50%) translateY(8px); }
.ptr-indicator.spinning svg { animation: spin 0.8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* =========================================================
   Hero countdown
   ========================================================= */
.hero-countdown {
    background: linear-gradient(135deg, var(--moss-deep) 0%, var(--moss) 60%, #4d6e52 100%);
    border-radius: var(--r-xl);
    padding: 24px 22px 22px;
    color: #faf6ed;
    box-shadow: var(--shadow-card);
    position: relative;
    overflow: hidden;
    margin-bottom: 22px;
}
.hero-countdown::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
        radial-gradient(circle at 90% 10%, rgba(184, 118, 58, 0.25) 0%, transparent 50%),
        repeating-linear-gradient(45deg, transparent 0, transparent 18px, rgba(255,255,255,0.025) 18px, rgba(255,255,255,0.025) 19px);
    pointer-events: none;
}
.hero-countdown > * { position: relative; }

.hero-countdown__label {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--cream);
    opacity: 0.85;
    margin-bottom: 6px;
}

.hero-countdown__title {
    font-family: 'Fraunces', serif;
    font-weight: 700;
    font-size: 26px;
    line-height: 1.1;
    margin-bottom: 4px;
    letter-spacing: -0.02em;
}

.hero-countdown__loc {
    font-size: 14px;
    opacity: 0.85;
    margin-bottom: 18px;
    display: flex; align-items: center; gap: 6px;
}

.countdown-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
    margin-bottom: 18px;
}
.countdown-cell {
    background: rgba(250, 246, 237, 0.10);
    backdrop-filter: blur(8px);
    border: 1px solid rgba(250, 246, 237, 0.18);
    border-radius: var(--r-md);
    padding: 12px 4px;
    text-align: center;
}
.countdown-cell__num {
    font-family: 'Fraunces', serif;
    font-weight: 700;
    font-size: 28px;
    line-height: 1;
    letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums;
}
.countdown-cell__lbl {
    display: block;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-top: 4px;
    opacity: 0.75;
}

.hero-countdown__cta {
    display: flex; gap: 8px;
}

/* ✨ V12.3 — Carousel Hero */
.hero-carousel {
    position: relative;
    margin-bottom: 22px;
}

/* Bouton de fermeture du hero (X discret en haut à droite) */
#hero-wrap {
    position: relative;
}
#hero-wrap.hidden { display: none !important; }

.hero-collapse {
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 20;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.4);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    color: rgba(255, 255, 255, 0.95);
    border: 1px solid rgba(255, 255, 255, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    padding: 0;
    transition: transform 0.15s ease, background 0.15s ease;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}
.hero-collapse:hover { background: rgba(0, 0, 0, 0.6); }
.hero-collapse:active { transform: scale(0.88); background: rgba(0, 0, 0, 0.7); }
.hero-collapse svg { width: 16px; height: 16px; pointer-events: none; }

/* Tease replié : pilule discrète à cliquer pour réafficher */
.hero-tease {
    width: 100%;
    background: var(--paper-2);
    border: 1px dashed var(--line);
    border-radius: var(--r-md);
    padding: 10px 14px;
    margin-bottom: 14px;
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--ink-3);
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
}
.hero-tease:hover {
    background: var(--paper);
    border-color: var(--copper);
    color: var(--ink);
}
.hero-tease:active { transform: scale(0.99); }
.hero-tease__icon {
    color: var(--copper);
    font-size: 16px;
    line-height: 1;
    transition: transform 0.2s ease;
}
.hero-tease:hover .hero-tease__icon { transform: translateX(3px); }
.hero-tease__text {
    flex: 1;
    text-align: left;
}
.hero-tease.hero-tease--inactive { display: none; }

.hero-slides {
    position: relative;
}
.hero-slide {
    display: none;
    animation: fadeInSlide 0.4s ease;
}
.hero-slide.active { display: block; }
@keyframes fadeInSlide {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}
.hero-slide .hero-countdown { margin-bottom: 0; }

.hero-dots {
    display: flex;
    justify-content: center;
    gap: 6px;
    margin-top: 10px;
    padding: 6px 0;
}
.hero-dot {
    width: 8px; height: 8px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.18);
    border: 0;
    cursor: pointer;
    transition: all 0.25s ease;
    padding: 0;
    flex-shrink: 0;
}
.hero-dot.active {
    background: var(--copper);
    width: 24px;
    border-radius: 4px;
}
html[data-theme="dark"] .hero-dot { background: rgba(255, 255, 255, 0.2); }
html[data-theme="dark"] .hero-dot.active { background: var(--copper); }

/* État "en cours" — encadré spécial */
.hero-countdown--live {
    background: linear-gradient(135deg, #b8763a 0%, #c4843f 60%, #d4923f 100%);
}
.hero-countdown--empty {
    background: linear-gradient(135deg, var(--ink-2) 0%, var(--ink-3) 100%);
}

/* Indicateur d'état live (point rouge pulsant) */
.live-dot {
    display: inline-block;
    width: 8px; height: 8px;
    background: #ff3b30;
    border-radius: 50%;
    margin-right: 4px;
    box-shadow: 0 0 0 0 rgba(255, 59, 48, 0.6);
    animation: livePulse 1.6s ease-in-out infinite;
    vertical-align: middle;
}
@keyframes livePulse {
    0% { box-shadow: 0 0 0 0 rgba(255, 59, 48, 0.6); }
    70% { box-shadow: 0 0 0 8px rgba(255, 59, 48, 0); }
    100% { box-shadow: 0 0 0 0 rgba(255, 59, 48, 0); }
}

.hero-countdown__hours {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.05em;
    color: rgba(250, 246, 237, 0.8);
    margin-bottom: 14px;
    background: rgba(250, 246, 237, 0.08);
    padding: 4px 10px;
    border-radius: var(--r-pill);
    display: inline-block;
}

.hero-live-status {
    display: flex;
    align-items: center;
    gap: 8px;
    background: rgba(0, 0, 0, 0.25);
    backdrop-filter: blur(8px);
    border-radius: var(--r-md);
    padding: 12px 14px;
    margin-bottom: 18px;
    font-size: 14px;
    font-weight: 500;
}
.hero-live-status--open .live-dot { background: #34c759; box-shadow: 0 0 0 0 rgba(52, 199, 89, 0.6); animation-name: liveOpenPulse; }
.hero-live-status--closed-tomorrow .live-dot,
.hero-live-status--closed .live-dot { background: #8e8e93; animation: none; box-shadow: none; }
.hero-live-status--opens-soon .live-dot { background: #ff9500; }
@keyframes liveOpenPulse {
    0% { box-shadow: 0 0 0 0 rgba(52, 199, 89, 0.6); }
    70% { box-shadow: 0 0 0 8px rgba(52, 199, 89, 0); }
    100% { box-shadow: 0 0 0 0 rgba(52, 199, 89, 0); }
}

.btn {
    flex: 1;
    padding: 12px 16px;
    border-radius: var(--r-pill);
    font-weight: 600;
    font-size: 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    transition: transform 0.1s ease, background 0.2s ease;
}
.btn svg { width: 16px; height: 16px; }
.btn:active { transform: scale(0.97); }
.btn--solid-light { background: var(--paper); color: var(--moss-deep); }
.btn--ghost-light {
    background: rgba(250, 246, 237, 0.12);
    color: var(--paper);
    border: 1px solid rgba(250, 246, 237, 0.25);
}

.hero-countdown--past { background: linear-gradient(135deg, #5b4a35 0%, #7a6346 100%); }

/* =========================================================
   Search bar
   ========================================================= */
.search-wrap {
    position: relative;
    margin-bottom: 14px;
}
.search-wrap svg.search-icon {
    position: absolute;
    left: 14px; top: 50%;
    transform: translateY(-50%);
    width: 18px; height: 18px;
    color: var(--ink-3);
    pointer-events: none;
}
.search-input {
    width: 100%;
    padding: 13px 44px 13px 42px;
    border-radius: var(--r-pill);
    background: var(--paper-2);
    border: 1px solid var(--line);
    font-size: 15px;
    color: var(--ink);
    transition: border-color 0.15s ease, background 0.15s ease;
}
.search-input::placeholder { color: var(--ink-3); }
.search-input:focus {
    outline: none;
    border-color: var(--moss);
    background: var(--paper);
}
.search-clear {
    position: absolute;
    right: 8px; top: 50%;
    transform: translateY(-50%);
    width: 32px; height: 32px;
    border-radius: var(--r-pill);
    display: none;
    align-items: center; justify-content: center;
    background: var(--paper-3);
    color: var(--ink-2);
}
.search-clear.visible { display: flex; }
.search-clear svg { width: 14px; height: 14px; }
.search-clear:active { transform: translateY(-50%) scale(0.85); }

/* Quick stats */
.quick-stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
    margin-bottom: 22px;
}
/* ✨ V14.10.10 — Sur petits écrans, 2x2 plutôt que 4 colonnes ultra-étroites */
@media (max-width: 480px) {
    .quick-stats {
        grid-template-columns: repeat(2, 1fr);
    }
}
.stat-pill {
    background: var(--paper-2);
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    padding: 10px 6px;
    text-align: center;
}
.stat-pill__num {
    font-family: 'Fraunces', serif;
    font-weight: 700;
    font-size: 19px;
    color: var(--moss);
    display: block;
    line-height: 1;
}
.stat-pill__lbl {
    font-size: 10.5px;
    color: var(--ink-3);
    margin-top: 4px;
    line-height: 1.2;
}

/* Section titles */
.section-title {
    font-family: 'Fraunces', serif;
    font-weight: 700;
    font-size: 22px;
    letter-spacing: -0.01em;
    color: var(--ink);
    margin: 22px 0 12px;
    display: flex;
    align-items: baseline;
    justify-content: space-between;
}
.section-title__main {
    display: inline;
}
.section-title em {
    font-style: normal;
    color: inherit;
    font-weight: inherit;
}
.section-title__hint {
    font-family: 'Inter Tight', sans-serif;
    font-size: 12px;
    color: var(--ink-3);
    font-weight: 500;
    letter-spacing: 0;
}

/* ✨ V12.7 — Bouton filtres géo (ouvre la sheet) */
.geo-trigger {
    width: 100%;
    background: var(--paper-2);
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    padding: 11px 14px;
    margin: 0 0 14px;
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    font-size: 13px;
    font-weight: 500;
    color: var(--ink-2);
    transition: border-color 0.2s, background 0.2s, color 0.2s;
}
.geo-trigger:hover {
    border-color: var(--copper);
    color: var(--ink);
}
.geo-trigger:active { transform: scale(0.99); }
.geo-trigger > svg:first-child {
    width: 16px; height: 16px;
    color: var(--copper);
    flex-shrink: 0;
    pointer-events: none;
}
.geo-trigger__label {
    flex: 1;
    text-align: left;
    pointer-events: none;
}
.geo-trigger__arrow {
    width: 12px; height: 12px;
    color: var(--ink-3);
    flex-shrink: 0;
    transform: rotate(-90deg);
    pointer-events: none;
}
.geo-trigger__count {
    background: var(--copper);
    color: var(--ink);
    font-size: 11px;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: var(--r-pill);
    pointer-events: none;
}
.geo-trigger.active {
    background: var(--copper-light);
    border-color: var(--copper);
    color: var(--copper-deep);
    font-weight: 600;
}
.geo-trigger.active > svg:first-child { color: var(--copper-deep); }

/* Sections dans la sheet géo */
/* ✨ V12.8 — Sheet géo design pro */
.geo-section {
    margin-bottom: 22px;
}
.geo-section__label {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--ink-3);
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    gap: 6px;
}
.geo-section__label::before {
    content: '';
    width: 4px; height: 4px;
    border-radius: 50%;
    background: var(--copper);
}
.geo-row__select {
    width: 100%;
    padding: 14px 18px;
    border-radius: 14px;
    background: var(--paper-2);
    border: 1.5px solid var(--line);
    color: var(--ink);
    font-size: 15px;
    font-weight: 500;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23b8763a' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
    background-repeat: no-repeat;
    background-position: right 16px center;
    padding-right: 44px;
    transition: border-color 0.15s ease, background 0.15s ease;
}
.geo-row__select:hover { border-color: var(--copper); }
.geo-row__select:focus {
    outline: none;
    border-color: var(--copper);
    background: var(--paper);
    box-shadow: 0 0 0 3px rgba(184, 118, 58, 0.15);
}

/* Boutons d'action dans la sheet géo : design pro */
.geo-actions {
    display: flex;
    gap: 10px;
    margin-top: 28px;
    padding-top: 20px;
    border-top: 1px solid var(--line);
    position: sticky;
    bottom: 0;
    background: linear-gradient(to bottom, transparent, var(--paper) 30%);
    padding-bottom: 4px;
}
.geo-actions .btn {
    flex: 1;
    padding: 15px 20px;
    border-radius: 14px;
    font-weight: 600;
    font-size: 15px;
    cursor: pointer;
    border: 0;
    transition: transform 0.1s ease, opacity 0.15s ease, box-shadow 0.15s ease;
    letter-spacing: -0.01em;
}
.geo-actions .btn--ghost {
    background: var(--paper-2);
    color: var(--ink-2);
}
.geo-actions .btn--ghost:hover { background: var(--paper-3); color: var(--ink); }
.geo-actions .btn--primary {
    background: var(--copper);
    color: var(--ink);
    box-shadow: 0 4px 14px rgba(184, 118, 58, 0.32), 0 1px 3px rgba(184, 118, 58, 0.18);
}
.geo-actions .btn--primary:hover {
    box-shadow: 0 6px 20px rgba(184, 118, 58, 0.42), 0 1px 3px rgba(184, 118, 58, 0.18);
}
.geo-actions .btn:active { transform: scale(0.97); }

/* Sheet body : design pro + scrollbar discrète */
.sheet__body {
    overflow-y: auto;
    padding: 24px 22px 28px;
    flex: 1;
    -webkit-overflow-scrolling: touch;
}
.sheet__body::-webkit-scrollbar { width: 6px; }
.sheet__body::-webkit-scrollbar-thumb {
    background: var(--line);
    border-radius: 3px;
}
.sheet__body::-webkit-scrollbar-track { background: transparent; }

/* Sheet header : design plus aéré */
.sheet__handle {
    width: 44px;
    height: 5px;
    background: var(--line);
    border-radius: 99px;
    margin: 12px auto 6px;
    flex-shrink: 0;
    cursor: grab;
}
.sheet__header {
    padding: 14px 22px 4px !important;
}
.sheet__title {
    font-family: 'Fraunces', serif;
    font-weight: 700;
    font-size: 24px;
    letter-spacing: -0.015em;
    color: var(--ink);
    padding-right: 50px;
    line-height: 1.2;
}
.sheet__subtitle {
    font-size: 13px;
    color: var(--ink-3);
    margin-top: 4px;
    font-weight: 500;
}
.geo-actions .btn:active { transform: scale(0.97); }
.geo-actions .btn:hover { opacity: 0.92; }

/* ✨ V12.18 — Grille de filtres par type d'événement */
.type-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
    margin-bottom: 18px;
}
.type-chip {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 14px;
    background: var(--paper-2);
    border: 1.5px solid var(--line);
    border-radius: 14px;
    cursor: pointer;
    transition: all 0.15s ease;
    font-size: 14px;
    font-weight: 500;
    color: var(--ink-2);
    user-select: none;
}
.type-chip:hover {
    border-color: var(--copper);
    color: var(--ink);
}
.type-chip:active { transform: scale(0.97); }
.type-chip__icon {
    font-size: 18px;
    color: var(--copper);
    flex-shrink: 0;
    width: 24px;
    text-align: center;
}
.type-chip__lbl { flex: 1; }
.type-chip__check {
    width: 18px; height: 18px;
    border: 2px solid var(--line);
    border-radius: 5px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    color: var(--paper);
    font-weight: 700;
    transition: all 0.15s ease;
}
.type-chip.active {
    background: var(--copper-light);
    border-color: var(--copper);
    color: var(--copper-deep);
    font-weight: 600;
}
.type-chip.active .type-chip__check {
    background: var(--copper);
    border-color: var(--copper);
}
.type-chip.active .type-chip__check::after {
    content: '✓';
    color: var(--ink);
}

/* =========================================================
   Filter chips
   ========================================================= */
.chip-row {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    padding: 4px 0 14px;
    margin: 0 -18px;
    padding-left: 18px;
    padding-right: 18px;
    scrollbar-width: none;
    -ms-overflow-style: none;
}
.chip-row::-webkit-scrollbar { display: none; }

.chip {
    flex-shrink: 0;
    padding: 8px 14px;
    border-radius: var(--r-pill);
    background: var(--paper-2);
    border: 1px solid var(--line);
    font-size: 13px;
    font-weight: 500;
    color: var(--ink-2);
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: all 0.15s ease;
}
.chip svg { width: 14px; height: 14px; }
.chip:active { transform: scale(0.95); }
.chip.active {
    background: var(--ink);
    color: var(--paper);
    border-color: var(--ink);
}
html[data-theme="dark"] .chip.active {
    background: var(--copper);
    color: var(--paper);
    border-color: var(--copper);
}

/* =========================================================
   Event cards — V5 : avec bloc date calendrier
   ========================================================= */
.event-card {
    background: var(--paper-2);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    padding: 0;
    margin-bottom: 12px;
    box-shadow: var(--shadow-soft);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
    position: relative;
    overflow: hidden;
    cursor: pointer;
    display: flex;
    align-items: stretch;
}
.event-card:active { transform: scale(0.985); }

/* ✨ V12.15 — Encart pub : même structure que event-card mais discret */
.event-card--ad {
    background: linear-gradient(135deg, var(--paper-2), var(--paper));
    border: 1px dashed var(--copper);
    text-decoration: none;
    color: inherit;
}
.event-card--ad .event-card__main {
    display: flex;
    gap: 12px;
    padding: 14px 16px;
    width: 100%;
}
.event-card--ad .event-card__emoji {
    font-size: 32px;
    flex-shrink: 0;
    width: 56px;
    height: 56px;
    background: var(--paper-3);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.event-card--ad .event-card__body { flex: 1; min-width: 0; }
.event-card--ad .event-card__title {
    font-family: 'Fraunces', serif;
    font-weight: 700;
    font-size: 15px;
    color: var(--ink);
    margin-bottom: 4px;
    letter-spacing: -0.01em;
}
.event-card--ad .event-card__meta {
    font-size: 12px;
    color: var(--ink-2);
    line-height: 1.4;
    margin-bottom: 6px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.event-card--ad .event-card__ad-cta {
    font-size: 12px;
    font-weight: 600;
    color: var(--copper-deep);
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.event-card__ad-badge {
    position: absolute;
    top: 8px;
    right: 10px;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ink-3);
    background: var(--paper);
    padding: 3px 8px;
    border-radius: 99px;
    border: 1px solid var(--line);
    z-index: 2;
}
/* ✨ V12.16 — Mode embed : conteneur pour code régie pub */
.event-card--ad-embed {
    cursor: default;
    padding: 32px 16px 16px;
    min-height: 100px;
    display: block;
}
.event-card__embed-wrap {
    width: 100%;
    overflow: hidden;
    text-align: center;
}
.event-card__embed-wrap > * {
    max-width: 100%;
}

/* ✨ V13.3 — Carte bannière Monetag : intégrée comme une carte event */
.event-card--ad-monetag {
    cursor: default;
    padding: 32px 12px 12px;
    min-height: 100px;
    display: block;
    background: linear-gradient(135deg, var(--paper-2) 0%, var(--paper-3) 100%);
    border: 1px solid var(--line);
    position: relative;
}
.event-card__monetag-wrap {
    width: 100%;
    min-height: 60px;
    overflow: hidden;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
}
.event-card__monetag-wrap > * {
    max-width: 100% !important;
    margin: 0 auto;
}
/* Iframe Monetag : limite la hauteur pour ne pas envahir la liste */
.event-card__monetag-wrap iframe {
    max-width: 100% !important;
    max-height: 280px;
    border: 0;
    display: block;
}
.event-card__monetag-wrap img {
    max-width: 100% !important;
    height: auto;
    border-radius: 8px;
}

/* ✨ V13.5 — Carte AdSense in-feed : style identique à Monetag */
.event-card--ad-adsense {
    cursor: default;
    padding: 32px 12px 12px;
    min-height: 100px;
    display: block;
    background: linear-gradient(135deg, var(--paper-2) 0%, var(--paper-3) 100%);
    border: 1px solid var(--line);
    position: relative;
}
.event-card--ad-adsense ins.adsbygoogle {
    width: 100% !important;
    max-width: 100% !important;
    overflow: hidden;
}

/* ✨ V13.6 — Carte Adsterra in-feed : intégration discrète */
/* ✨ V13.10 — Padding réduit sur mobile + min-height adapté */
.event-card--ad-adsterra {
    cursor: default;
    padding: 32px 8px 8px; /* moins de padding latéral pour laisser plus de place à la pub */
    min-height: 100px;
    display: block;
    background: linear-gradient(135deg, var(--paper-2) 0%, var(--paper-3) 100%);
    border: 1px solid var(--line);
    position: relative;
    overflow: hidden;
}
@media (max-width: 480px) {
    .event-card--ad-adsterra {
        padding: 28px 4px 6px; /* mobile : padding minimal pour 320px de place utile */
    }
}
.event-card__adsterra-wrap {
    width: 100%;
    min-height: 60px;
    overflow: hidden;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
}
.event-card__adsterra-wrap > * {
    max-width: 100% !important;
    margin: 0 auto;
}
.event-card__adsterra-wrap iframe {
    max-width: 100% !important;
    border: 0;
    display: block;
    /* Protection contre le hijack pleine page */
    position: relative !important;
    z-index: auto !important;
}
.event-card__adsterra-wrap img {
    max-width: 100% !important;
    height: auto;
    border-radius: 8px;
}

/* Bloc calendrier à gauche */
.event-card__date {
    width: 78px;
    flex-shrink: 0;
    background: var(--paper-3);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 14px 4px 12px;
    border-right: 1px solid var(--line);
    position: relative;
}
.event-card__date::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 4px;
    background: var(--tier-std);
}
.event-card[data-tier="big"] .event-card__date::before { background: var(--tier-big); }
.event-card[data-tier="mega"] .event-card__date::before { background: var(--tier-mega); }
.event-card[data-tier="legend"] .event-card__date::before {
    background: linear-gradient(to right, var(--tier-legend), var(--tier-mega));
}

.event-card__date-day {
    font-size: 10.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: var(--ink-3);
    line-height: 1;
    margin-bottom: 4px;
}
.event-card__date-day.is-weekend { color: var(--copper); }

.event-card__date-num {
    font-family: 'Fraunces', serif;
    font-weight: 700;
    font-size: 32px;
    line-height: 0.95;
    color: var(--ink);
    letter-spacing: -0.02em;
    margin-bottom: 4px;
}

.event-card__date-month {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.16em;
    color: var(--ink-2);
    line-height: 1;
}

.event-card__date-extra {
    margin-top: 8px;
    padding-top: 6px;
    border-top: 1px dashed var(--line);
    font-size: 9px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--copper);
    text-align: center;
    line-height: 1.1;
    width: 100%;
}

/* Variante "weekend" : bloc date avec teinte cuivre subtile */
.event-card__date.is-weekend-event {
    background: linear-gradient(170deg, var(--copper-light) 0%, var(--paper-3) 60%);
}
html[data-theme="dark"] .event-card__date.is-weekend-event {
    background: linear-gradient(170deg, var(--copper-light) 0%, var(--paper-3) 60%);
}

.event-card__content {
    flex: 1;
    padding: 14px 14px 14px 14px;
    min-width: 0;
    position: relative;
}

.event-card__top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 8px;
}

.event-card__type {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    font-weight: 600;
    color: var(--ink-3);
    margin-bottom: 4px;
}
.event-card__type span { color: var(--copper); font-size: 14px; line-height: 1; }

.event-card__title {
    font-family: 'Fraunces', serif;
    font-weight: 700;
    font-size: 16.5px;
    line-height: 1.22;
    color: var(--ink);
    letter-spacing: -0.01em;
    padding-right: 4px;
}
.event-card__title .star {
    color: var(--copper);
    font-size: 14px;
    margin-right: 2px;
    vertical-align: 1px;
}

.fav-btn {
    width: 44px; height: 44px;
    border-radius: var(--r-pill);
    display: flex; align-items: center; justify-content: center;
    background: transparent;
    color: var(--ink-3);
    flex-shrink: 0;
    transition: all 0.2s ease;
    margin-top: -10px;
    margin-right: -10px;
    position: relative;
    z-index: 2;
}
.fav-btn:active { transform: scale(0.85); }
.fav-btn svg { width: 24px; height: 24px; transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1); }
.fav-btn.is-fav { color: var(--burgundy); }
.fav-btn.is-fav svg { transform: scale(1.05); fill: var(--burgundy); }

.event-card__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 12px;
    font-size: 12.5px;
    color: var(--ink-2);
    margin-bottom: 10px;
    line-height: 1.4;
}
.event-card__meta-item {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.event-card__meta-item svg { width: 13px; height: 13px; color: var(--ink-3); }

.event-card__hours {
    color: var(--moss);
    font-weight: 600;
    font-size: 12px;
}

/* Ligne "→ jusqu'au …" pour les événements multi-jours */
.event-card__until {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 12px;
    color: var(--copper);
    font-weight: 500;
}

.event-card__bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.event-tags { display: flex; gap: 4px; flex-wrap: wrap; flex: 1; min-width: 0; }
.tag {
    font-size: 9.5px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 3px 7px;
    border-radius: var(--r-pill);
    background: var(--paper-3);
    color: var(--ink-2);
}

.expo-badge {
    display: inline-flex;
    align-items: baseline;
    gap: 3px;
    background: var(--moss-light);
    color: var(--moss-deep);
    padding: 4px 9px;
    border-radius: var(--r-pill);
    font-weight: 600;
    font-size: 11.5px;
    flex-shrink: 0;
}
.expo-badge strong {
    font-family: 'Fraunces', serif;
    font-weight: 700;
    font-size: 13px;
}
[data-tier="big"] .expo-badge { background: var(--copper-light); color: var(--copper-deep); }
[data-tier="mega"] .expo-badge { background: #f4d2cb; color: var(--tier-mega); }
[data-tier="legend"] .expo-badge {
    background: linear-gradient(135deg, #e8d4f0, #f4d2cb);
    color: var(--tier-legend);
}
html[data-theme="dark"] .expo-badge { background: var(--moss-light); color: var(--ink); }
html[data-theme="dark"] [data-tier="big"] .expo-badge { background: var(--copper-light); color: var(--copper); }
html[data-theme="dark"] [data-tier="mega"] .expo-badge { background: #4a2820; color: #f4d2cb; }

.days-badge {
    position: absolute;
    top: 0px;
    right: 62px;
    background: var(--ink);
    color: var(--paper);
    font-size: 9.5px;
    font-weight: 700;
    padding: 4px 8px;
    border-radius: 0 0 var(--r-sm) var(--r-sm);
    letter-spacing: 0.05em;
    z-index: 1;
    pointer-events: none;
}
.days-badge--soon { background: var(--burgundy); color: #faf6ed; }
.days-badge--now { background: var(--copper); color: var(--ink); animation: pulse 1.6s ease-in-out infinite; }

@keyframes pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.06); } }

/* =========================================================
   📢 Encart partenaire — V5 : style in-feed (matche les cards)
   ========================================================= */
.ad-slot {
    background: var(--paper-2);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    padding: 0;
    margin-bottom: 12px;
    box-shadow: var(--shadow-soft);
    overflow: hidden;
    display: flex;
    align-items: stretch;
    text-decoration: none;
    color: inherit;
    transition: transform 0.15s ease;
}
.ad-slot:active { transform: scale(0.985); }

/* Bloc gauche "marque" qui mime le bloc date */
.ad-slot__brand {
    width: 78px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 14px 4px 12px;
    border-right: 1px solid var(--line);
    position: relative;
    background: linear-gradient(170deg, var(--copper-light) 0%, var(--paper-3) 70%);
}
.ad-slot__brand::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 4px;
    background: var(--copper);
}
.ad-slot__brand-emoji {
    font-size: 30px;
    line-height: 1;
    margin-bottom: 6px;
}
.ad-slot__brand-label {
    font-family: 'Fraunces', serif;
    font-style: italic;
    font-size: 9px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: var(--copper);
    text-align: center;
    line-height: 1.2;
}

.ad-slot__content {
    flex: 1;
    padding: 14px;
    min-width: 0;
    position: relative;
}

.ad-slot__type {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    font-weight: 600;
    color: var(--copper);
    margin-bottom: 4px;
}
.ad-slot__type span { font-size: 14px; line-height: 1; }

.ad-slot__title {
    font-family: 'Fraunces', serif;
    font-weight: 700;
    font-size: 16.5px;
    line-height: 1.22;
    color: var(--ink);
    letter-spacing: -0.01em;
    margin-bottom: 6px;
}

.ad-slot__desc {
    font-size: 12.5px;
    color: var(--ink-2);
    line-height: 1.45;
    margin-bottom: 10px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.ad-slot__cta {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 12px;
    font-weight: 600;
    color: var(--moss);
    background: var(--moss-light);
    padding: 5px 10px;
    border-radius: var(--r-pill);
}
html[data-theme="dark"] .ad-slot__cta { background: var(--moss-light); color: var(--ink); }
.ad-slot__cta svg { width: 12px; height: 12px; }

/* =========================================================
   🎛️ Filter sheet — V5
   ========================================================= */
.filter-section {
    margin-bottom: 22px;
}
.filter-section__title {
    font-family: 'Fraunces', serif;
    font-style: italic;
    font-weight: 600;
    font-size: 13px;
    color: var(--copper);
    text-transform: uppercase;
    letter-spacing: 0.14em;
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.filter-section__title span {
    font-style: normal;
    font-family: 'Inter Tight', sans-serif;
    font-size: 11px;
    color: var(--ink-3);
    text-transform: none;
    letter-spacing: 0;
}

.filter-chips-wrap {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}
.filter-chip {
    padding: 7px 12px;
    border-radius: var(--r-pill);
    background: var(--paper-2);
    border: 1px solid var(--line);
    font-size: 13px;
    font-weight: 500;
    color: var(--ink-2);
    transition: all 0.15s ease;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.filter-chip:active { transform: scale(0.95); }
.filter-chip.active {
    background: var(--moss);
    color: #faf6ed;
    border-color: var(--moss);
}
html[data-theme="dark"] .filter-chip.active { background: var(--copper); color: var(--ink); border-color: var(--copper); }

/* Slider taille */
.filter-slider-wrap {
    background: var(--paper-2);
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    padding: 14px 16px;
}
.filter-slider-value {
    font-family: 'Fraunces', serif;
    font-weight: 700;
    font-size: 18px;
    color: var(--moss);
    margin-bottom: 8px;
    display: flex;
    align-items: baseline;
    gap: 4px;
}
.filter-slider-value small { font-size: 12px; font-weight: 500; color: var(--ink-3); font-family: 'Inter Tight', sans-serif; }
input[type="range"].filter-slider {
    -webkit-appearance: none;
    width: 100%;
    height: 4px;
    background: var(--paper-3);
    border-radius: var(--r-pill);
    outline: none;
}
input[type="range"].filter-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 24px; height: 24px;
    background: var(--moss);
    border-radius: 50%;
    border: 3px solid var(--paper);
    box-shadow: var(--shadow-soft);
    cursor: pointer;
}
input[type="range"].filter-slider::-moz-range-thumb {
    width: 24px; height: 24px;
    background: var(--moss);
    border-radius: 50%;
    border: 3px solid var(--paper);
    cursor: pointer;
}

/* Pied du sheet : actions */
.filter-actions {
    position: sticky;
    bottom: 0;
    left: 0; right: 0;
    background: linear-gradient(to top, var(--paper) 80%, transparent);
    padding: 16px 0 0;
    display: flex;
    gap: 10px;
    margin-top: 24px;
}
.filter-action-btn {
    flex: 1;
    padding: 14px;
    border-radius: var(--r-pill);
    font-weight: 600;
    font-size: 14px;
    transition: transform 0.1s ease;
}
.filter-action-btn:active { transform: scale(0.97); }
.filter-action-btn--ghost {
    background: var(--paper-2);
    color: var(--ink-2);
    border: 1px solid var(--line);
    flex: 0 0 auto;
}
.filter-action-btn--primary {
    background: var(--moss);
    color: #faf6ed;
}
html[data-theme="dark"] .filter-action-btn--primary { background: var(--copper); color: var(--ink); }

/* Badge compteur sur chip Filtres */
.chip__count {
    background: var(--copper);
    color: var(--ink);
    font-size: 10px;
    font-weight: 700;
    padding: 1px 6px;
    border-radius: var(--r-pill);
    min-width: 18px;
    text-align: center;
    margin-left: 2px;
}
.chip.has-active { background: var(--ink); color: var(--paper); border-color: var(--ink); }
html[data-theme="dark"] .chip.has-active { background: var(--copper); color: var(--paper); border-color: var(--copper); }

/* =========================================================
   Empty state
   ========================================================= */
.empty {
    text-align: center;
    padding: 50px 20px;
    color: var(--ink-3);
}
.empty__icon {
    width: 64px; height: 64px;
    margin: 0 auto 18px;
    color: var(--ink-3);
    opacity: 0.5;
}
.empty__title {
    font-family: 'Fraunces', serif;
    font-size: 20px;
    font-weight: 600;
    color: var(--ink-2);
    font-style: italic;
    margin-bottom: 6px;
}
.empty__hint { font-size: 14px; }

/* ✨ V12.3 — PWA install banner */
.pwa-banner {
    position: fixed;
    bottom: calc(var(--nav-h) + var(--safe-bottom) + 12px);
    left: 12px;
    right: 12px;
    max-width: 480px;
    margin: 0 auto;
    background: var(--ink);
    color: var(--paper);
    border-radius: 16px;
    padding: 12px 16px;
    display: flex;
    align-items: center;
    gap: 12px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.3), 0 2px 8px rgba(0,0,0,0.2);
    z-index: 9000;
    animation: slideUpBanner 0.4s ease-out;
}
@keyframes slideUpBanner {
    from { transform: translateY(140%); opacity: 0; }
    to   { transform: translateY(0); opacity: 1; }
}
.pwa-banner__icon { font-size: 26px; flex-shrink: 0; }
.pwa-banner__content { flex: 1; min-width: 0; }
.pwa-banner__title {
    font-weight: 600;
    font-size: 14px;
    margin-bottom: 2px;
}
.pwa-banner__hint {
    font-size: 11px;
    opacity: 0.7;
    line-height: 1.3;
}
.pwa-banner__btn {
    flex-shrink: 0;
    background: var(--copper);
    color: var(--ink);
    font-weight: 600;
    font-size: 12px;
    padding: 8px 14px;
    border-radius: var(--r-pill);
    cursor: pointer;
    border: 0;
    letter-spacing: 0.03em;
}
.pwa-banner__btn:active { transform: scale(0.96); }
.pwa-banner__close {
    flex-shrink: 0;
    background: rgba(255,255,255,0.12);
    color: var(--paper);
    width: 28px; height: 28px;
    border-radius: 50%;
    cursor: pointer;
    font-size: 18px;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: 4px;
    border: 0;
    padding: 0;
}

/* Sheet iOS instructions */
.pwa-ios-sheet {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 9500;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    padding: 12px;
    animation: fadeIn 0.3s ease;
}
.pwa-ios-sheet[hidden] { display: none !important; }
.pwa-banner[hidden] { display: none !important; }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
.pwa-ios-sheet__content {
    background: var(--paper);
    width: 100%;
    max-width: 480px;
    border-radius: 22px;
    padding: 28px 24px 32px;
    margin-bottom: max(12px, var(--safe-bottom));
    animation: slideUpSheet 0.35s ease-out;
}
@keyframes slideUpSheet {
    from { transform: translateY(20px); opacity: 0; }
    to   { transform: translateY(0); opacity: 1; }
}
.pwa-ios-sheet__title {
    font-size: 22px;
    font-weight: 700;
    color: var(--ink);
    margin-bottom: 18px;
}
.pwa-ios-sheet__step {
    background: var(--paper-2);
    padding: 12px 14px;
    border-radius: 12px;
    margin-bottom: 10px;
    font-size: 14px;
    color: var(--ink-2);
    line-height: 1.4;
}
.pwa-ios-sheet__close {
    width: 100%;
    background: var(--ink);
    color: var(--paper);
    padding: 14px;
    border-radius: var(--r-pill);
    font-weight: 600;
    margin-top: 10px;
    border: 0;
    cursor: pointer;
    font-size: 15px;
}

/* ✨ V12.1 : Liste virtualisée */
/* ✨ V12.17 — Liste en rendu direct (plus de virtualisation absolue) */
.vlist-content {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.vlist-content > .event-card {
    margin-bottom: 0;  /* le gap du parent gère l'espacement */
}
.list-footer {
    margin-top: 8px;
    /* ✨ V12.18 : .tab-content a un padding-bottom global qui réserve l'espace bottom-nav */
}

/* Anciens styles : viewport/spacer ne sont plus utilisés mais on les garde pour rétrocompat */
.vlist-viewport { position: relative; width: 100%; }
.vlist-spacer { display: none; }

/* ✨ V12 : Infinite scroll / pagination */
.load-more-block {
    text-align: center;
    padding: 32px 16px 16px;
    color: var(--ink-3);
}
.load-more-spinner {
    width: 32px; height: 32px;
    margin: 0 auto 12px;
    border: 3px solid var(--paper-2);
    border-top-color: var(--copper);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
    opacity: 0.6;
}
.load-more-info {
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--ink-3);
    margin-bottom: 14px;
}
.load-more-btn {
    background: var(--copper);
    color: var(--ink);
    padding: 14px 24px;
    border-radius: var(--r-pill);
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.01em;
    cursor: pointer;
    transition: all 0.2s ease;
    border: 0;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    box-shadow: 0 4px 14px rgba(184, 118, 58, 0.32);
}
.load-more-btn:hover {
    background: var(--copper-deep);
    box-shadow: 0 6px 20px rgba(184, 118, 58, 0.42);
}
.load-more-btn:active { transform: scale(0.97); }
.load-more-btn:disabled { opacity: 0.6; cursor: wait; }
.load-progress {
    width: 60%;
    max-width: 240px;
    height: 4px;
    background: var(--paper-2);
    border-radius: 2px;
    margin: 12px auto;
    overflow: hidden;
}
.load-progress__bar {
    height: 100%;
    background: linear-gradient(90deg, var(--copper), var(--moss));
    border-radius: 2px;
    transition: width 0.4s ease;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* =========================================================
   Calendrier
   ========================================================= */
#calendar-fc {
    background: var(--paper-2);
    border-radius: var(--r-lg);
    padding: 14px;
    border: 1px solid var(--line);
    --fc-border-color: var(--line);
    --fc-page-bg-color: var(--paper-2);
    --fc-neutral-bg-color: var(--paper-3);
    --fc-list-event-hover-bg-color: var(--paper-3);
    --fc-today-bg-color: rgba(184, 118, 58, 0.08);
}
#calendar-fc .fc-toolbar-title {
    font-family: 'Fraunces', serif !important;
    font-size: 18px !important;
    font-weight: 700 !important;
    text-transform: capitalize;
    color: var(--ink);
}
#calendar-fc .fc-button-primary {
    background: var(--ink) !important;
    border-color: var(--ink) !important;
    color: var(--paper) !important;
    border-radius: var(--r-pill) !important;
    padding: 4px 10px !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    text-transform: capitalize;
    box-shadow: none !important;
}
#calendar-fc .fc-button-primary:not(:disabled):active,
#calendar-fc .fc-button-primary:not(:disabled).fc-button-active {
    background: var(--copper) !important;
    border-color: var(--copper) !important;
    color: var(--ink) !important;
}
#calendar-fc .fc-event {
    border: none !important;
    border-radius: 6px !important;
    padding: 2px 5px !important;
    font-weight: 600 !important;
    font-size: 11px !important;
    cursor: pointer !important;
}
#calendar-fc .fc-day-today { background: rgba(184, 118, 58, 0.06) !important; }
#calendar-fc .fc-list-day-cushion { background: var(--paper-3) !important; }
#calendar-fc .fc-col-header-cell { background: var(--paper-3); }
#calendar-fc th, #calendar-fc td { color: var(--ink); }

/* =========================================================
   Carte Leaflet
   ========================================================= */
#map {
    /* ✨ V12.18 — Hauteur calculée pour ne JAMAIS toucher la bottom-nav
       Calcul : viewport - en-tête de page (~180px) - bottom-nav - safe-area - marge */
    height: calc(100dvh - 180px - var(--nav-h) - var(--safe-bottom) - 32px);
    min-height: 380px;
    max-height: 700px;
    border-radius: var(--r-lg);
    border: 1px solid var(--line);
    box-shadow: var(--shadow-soft);
}
.leaflet-popup-content-wrapper {
    border-radius: var(--r-md) !important;
    background: var(--paper) !important;
    color: var(--ink) !important;
    box-shadow: var(--shadow-card) !important;
}
.leaflet-popup-tip { background: var(--paper) !important; }
.leaflet-popup-content { margin: 12px 14px !important; font-family: 'Inter Tight', sans-serif !important; }
.leaflet-popup-content h4 {
    font-family: 'Fraunces', serif; font-size: 15px; font-weight: 700;
    margin-bottom: 4px; color: var(--ink); line-height: 1.2;
}
.leaflet-popup-content .pop-meta { font-size: 12px; color: var(--ink-3); margin-bottom: 8px; }
.leaflet-popup-content .pop-cta {
    display: inline-block; background: var(--moss); color: #fff;
    padding: 6px 12px; border-radius: var(--r-pill); font-size: 12px; font-weight: 600;
}

.map-marker {
    border-radius: 50%;
    border: 2px solid var(--paper);
    box-shadow: 0 2px 6px rgba(0,0,0,0.4);
    display: flex; align-items: center; justify-content: center;
    color: white;
    font-weight: 700;
    font-size: 11px;
}

.map-loading {
    height: 70vh;
    min-height: 460px;
    border-radius: var(--r-lg);
    background: var(--paper-2);
    border: 1px solid var(--line);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: var(--ink-3);
    gap: 10px;
}
.map-loading svg { width: 32px; height: 32px; animation: spin 1s linear infinite; color: var(--moss); }

/* =========================================================
   Bottom Navigation
   ========================================================= */
.bottom-nav {
    position: fixed;
    bottom: 0; left: 0; right: 0;
    background: color-mix(in srgb, var(--paper) 90%, transparent);
    backdrop-filter: saturate(140%) blur(20px);
    -webkit-backdrop-filter: saturate(140%) blur(20px);
    border-top: 1px solid var(--line);
    padding: 8px 8px calc(8px + var(--safe-bottom));
    display: flex;
    justify-content: space-around;
    z-index: 100;
}

.bottom-nav__item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    padding: 6px 4px;
    color: var(--ink-3);
    border-radius: var(--r-md);
    transition: color 0.15s ease;
    position: relative;
}
.bottom-nav__item svg { width: 22px; height: 22px; transition: transform 0.2s ease; }
.bottom-nav__item span { font-size: 10.5px; font-weight: 600; letter-spacing: 0.02em; }
.bottom-nav__item.active { color: var(--moss); }
html[data-theme="dark"] .bottom-nav__item.active { color: var(--copper); }
.bottom-nav__item:active svg { transform: scale(0.85); }
.bottom-nav__item.active::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 24px;
    height: 3px;
    background: currentColor;
    border-radius: 0 0 3px 3px;
}

.fav-count-badge {
    position: absolute;
    top: 2px;
    right: 22%;
    background: var(--burgundy);
    color: white;
    font-size: 9px;
    min-width: 16px;
    height: 16px;
    border-radius: var(--r-pill);
    display: flex; align-items: center; justify-content: center;
    font-weight: 700;
    padding: 0 4px;
}

/* =========================================================
   FAB scroll-to-top
   ========================================================= */
.fab-top {
    position: fixed;
    bottom: calc(var(--nav-h) + 16px + var(--safe-bottom));
    right: 18px;
    width: 44px; height: 44px;
    border-radius: var(--r-pill);
    background: var(--ink);
    color: var(--paper);
    display: flex; align-items: center; justify-content: center;
    box-shadow: var(--shadow-card);
    z-index: 99;
    opacity: 0;
    transform: translateY(12px) scale(0.8);
    pointer-events: none;
    transition: all 0.25s cubic-bezier(0.32, 0.72, 0, 1);
}
.fab-top.visible {
    opacity: 1;
    transform: translateY(0) scale(1);
    pointer-events: auto;
}
.fab-top svg { width: 20px; height: 20px; }
.fab-top:active { transform: scale(0.9); }

/* =========================================================
   Bottom sheet
   ========================================================= */
.sheet-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(20, 17, 13, 0.55);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    /* V14.12 - au-dessus des couches Leaflet (controles a 1000) : une fiche
       ouverte depuis l'Atlas passait SOUS la carte plein ecran. */
    z-index: 1100;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
}
.sheet-backdrop.open { opacity: 1; pointer-events: auto; }

/* ✨ V12.8 — Sheet : centrée, design pro, animations soignées */
.sheet {
    position: fixed;
    bottom: 0;
    left: 50%;
    z-index: 1110;
    width: 100%;
    max-width: 420px;
    background: var(--paper);
    border-radius: 24px 24px 0 0;
    box-shadow: 0 -16px 48px rgba(0,0,0,0.18), 0 -2px 8px rgba(0,0,0,0.08);
    transform: translate(-50%, 100%);
    transition: transform 0.4s cubic-bezier(0.32, 0.72, 0, 1);
    max-height: 90dvh;
    display: flex;
    flex-direction: column;
    padding-bottom: var(--safe-bottom);
    will-change: transform;
}
.sheet.open { transform: translate(-50%, 0); }

/* ✨ V12.13 — Mode onboarding (1ère ouverture, bloquant) */
.sheet--onboarding {
    /* Empêche le swipe-down de fermer */
    pointer-events: auto;
}
.sheet--onboarding .sheet__title {
    color: var(--copper-deep);
}
@keyframes shake {
    0%, 100% { transform: translate(-50%, 0); }
    20%, 60% { transform: translate(calc(-50% - 6px), 0); }
    40%, 80% { transform: translate(calc(-50% + 6px), 0); }
}

/* ✨ V13.22 — Bloc Welcome dans la sheet onboarding */
.welcome-block {
    background: linear-gradient(135deg, #fdf6e8 0%, #f9ecd2 100%);
    border: 1px solid var(--line-soft);
    border-radius: 18px;
    padding: 22px 20px 20px;
    margin-bottom: 22px;
    text-align: left;
}
.welcome-block__icon {
    font-size: 34px;
    line-height: 1;
    margin-bottom: 10px;
    text-align: center;
}
.welcome-block__title {
    font-family: 'Fraunces', Georgia, serif;
    font-size: 22px;
    font-weight: 700;
    color: var(--copper-deep);
    text-align: center;
    margin-bottom: 12px;
    line-height: 1.2;
}
.welcome-block__text {
    font-size: 14px;
    line-height: 1.55;
    color: var(--ink-2);
    margin-bottom: 16px;
    text-align: center;
}
.welcome-block__bullets {
    display: flex;
    flex-direction: column;
    gap: 8px;
    background: rgba(255, 255, 255, 0.45);
    border-radius: 12px;
    padding: 12px 14px;
}
.welcome-block__bullet {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 13px;
    line-height: 1.45;
    color: var(--ink-2);
}
.welcome-block__bullet-icon {
    font-size: 16px;
    flex-shrink: 0;
    margin-top: 1px;
}

/* ✨ V13.22 — Tutorial overlay multi-étapes */
.tutorial-overlay {
    position: fixed;
    inset: 0;
    background: rgba(20, 16, 12, 0.72);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    /* ✨ V14.16 — Était à 200, exactement comme .bottom-nav (desktop, top:0) : à
       égalité de z-index, l'ordre DOM tranche et la nav (plus bas dans le HTML)
       passait AU-DESSUS du fond assombri du popup au lieu d'être masquée dessous
       — la barre de nav restait visible/cliquable par-dessus le popup de bienvenue. */
    z-index: 1200;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    animation: fadeIn 0.3s ease;
}
.tutorial-overlay[hidden] { display: none; }
.tutorial-card {
    background: var(--paper);
    border-radius: 24px;
    padding: 30px 26px 24px;
    max-width: 380px;
    width: 100%;
    box-shadow: 0 25px 60px rgba(0, 0, 0, 0.4);
    text-align: center;
    animation: slideUp 0.35s cubic-bezier(0.18, 0.89, 0.32, 1.28);
}
.tutorial-card__progress {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-bottom: 20px;
}
.tutorial-card__dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--line);
    transition: background 0.3s ease, width 0.3s ease;
}
.tutorial-card__dot.active {
    background: var(--copper);
    width: 24px;
    border-radius: 4px;
}
.tutorial-card__icon {
    font-size: 56px;
    line-height: 1;
    margin-bottom: 14px;
    animation: bounce 0.6s ease;
}
@keyframes bounce {
    0% { transform: scale(0.7); opacity: 0; }
    60% { transform: scale(1.1); }
    100% { transform: scale(1); opacity: 1; }
}
@keyframes slideUp {
    from { transform: translateY(40px); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}
@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}
.tutorial-card__title {
    font-family: 'Fraunces', Georgia, serif;
    font-size: 22px;
    font-weight: 700;
    color: var(--ink);
    margin: 0 0 12px;
    line-height: 1.25;
}
.tutorial-card__text {
    font-size: 15px;
    line-height: 1.55;
    color: var(--ink-2);
    margin: 0 0 24px;
}
.tutorial-card__actions {
    display: flex;
    gap: 12px;
    justify-content: center;
    align-items: center;
}
.tutorial-card__skip {
    background: transparent;
    border: none;
    color: var(--ink-3);
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    padding: 12px 18px;
    border-radius: 12px;
    transition: background 0.15s, color 0.15s;
}
.tutorial-card__skip:hover {
    background: var(--paper-2);
    color: var(--ink-2);
}
.tutorial-card__next {
    background: var(--copper);
    color: white;
    border: none;
    padding: 14px 28px;
    border-radius: 14px;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: transform 0.15s, box-shadow 0.15s;
    box-shadow: 0 4px 14px rgba(184, 118, 58, 0.32);
}
.tutorial-card__next:active {
    transform: scale(0.97);
}
.tutorial-card__next:hover {
    box-shadow: 0 6px 18px rgba(184, 118, 58, 0.45);
}
}

/* ✨ V12.8 : .sheet__title et .sheet__subtitle définis plus haut (version pro) */
.sheet__close {
    position: absolute;
    top: 14px;
    right: 18px;
    width: 40px; height: 40px;
    background: var(--paper-2);
    color: var(--ink-2);
    border-radius: var(--r-pill);
    display: flex; align-items: center; justify-content: center;
    cursor: pointer;
    border: 0;
    z-index: 5;
    transition: background 0.15s, transform 0.15s;
}
.sheet__close svg { width: 18px; height: 18px; pointer-events: none; }
.sheet__close:hover { background: var(--paper-3); }
.sheet__close:active { background: var(--paper-3); transform: scale(0.88); }

/* ✨ V12.8 : .sheet__body défini plus haut (version pro avec scrollbar custom) */

/* Détails */
.detail-tier-strip {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    border-radius: var(--r-md);
    background: var(--paper-2);
    margin-bottom: 16px;
    font-size: 13px;
    border-left: 4px solid var(--tier-std);
}
[data-tier="big"] .detail-tier-strip { border-left-color: var(--tier-big); }
[data-tier="mega"] .detail-tier-strip { border-left-color: var(--tier-mega); }
[data-tier="legend"] .detail-tier-strip { border-left-color: var(--tier-legend); }

.detail-row {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px 0;
    border-bottom: 1px dashed var(--line);
    font-size: 14px;
}
.detail-row:last-child { border-bottom: none; }
.detail-row svg { width: 18px; height: 18px; color: var(--copper); margin-top: 2px; flex-shrink: 0; }
.detail-row__main { flex: 1; min-width: 0; }
.detail-row__lbl { font-size: 11px; color: var(--ink-3); text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 2px; font-weight: 600; }
.detail-row__val { color: var(--ink); font-weight: 500; line-height: 1.4; word-wrap: break-word; }
.detail-row__val a { color: var(--moss); font-weight: 600; }
html[data-theme="dark"] .detail-row__val a { color: var(--copper); }

.detail-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin-top: 18px;
}
/* ✨ V14.10.1 — `.btn-action` est désormais GLOBAL : utilisable dans tout sheet/modal
   (event detail, trip summary, etc.) sans dépendance à `.detail-actions`.
   Auparavant le sélecteur descendant `.detail-actions .btn-action` faisait que
   le bouton sans son parent perdait toute sa mise en forme et l'icône SVG
   explosait à sa taille naturelle de viewBox. */
.btn-action {
    padding: 13px 12px;
    border-radius: var(--r-md);
    background: var(--paper-2);
    color: var(--ink);
    font-weight: 600;
    font-size: 13px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    border: 1px solid var(--line);
    line-height: 1.2;
    min-height: 44px; /* touch target Apple HIG / Android */
    cursor: pointer;
    text-decoration: none;
    font-family: inherit;
    /* ✨ Évite que le label déborde en cassant proprement les longs mots */
    overflow-wrap: anywhere;
    word-break: normal;
    hyphens: auto;
}
.btn-action svg {
    width: 16px;
    height: 16px;
    flex-shrink: 0; /* empêche l'icône d'être écrasée par un long texte */
}
.btn-action:active { transform: scale(0.97); }
.btn-action:disabled { opacity: 0.5; cursor: not-allowed; }
.btn-action--primary {
    background: var(--moss);
    color: #faf6ed;
    border-color: var(--moss);
}
html[data-theme="dark"] .btn-action--primary {
    background: var(--copper);
    color: var(--ink);
    border-color: var(--copper);
}

/* ✨ V14.10.1 — Trip summary actions : adapt aux écrans étroits */
.trip-actions {
    margin-top: 18px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}
@media (max-width: 380px) {
    .trip-actions {
        grid-template-columns: 1fr; /* mobile : pile verticale */
    }
}
.trip-actions .btn-action { width: 100%; }

.detail-actions .btn-action {
    /* hérite du global, mais on garde la spécialisation du primary qui doit
       s'étendre sur les deux colonnes du sheet event detail uniquement */
}
.detail-actions .btn-action--primary {
    grid-column: span 2;
}

/* =========================================================
   🚗 Sélecteur d'app de navigation
   ========================================================= */
.nav-picker__intro {
    font-size: 13px;
    color: var(--ink-3);
    margin-bottom: 14px;
    padding: 10px 14px;
    background: var(--paper-2);
    border-radius: var(--r-md);
    display: flex;
    align-items: center;
    gap: 8px;
}
.nav-picker__intro svg { width: 16px; height: 16px; color: var(--copper); flex-shrink: 0; }

.nav-app-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.nav-app-item {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 16px;
    background: var(--paper-2);
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    color: var(--ink);
    text-align: left;
    width: 100%;
    transition: transform 0.1s ease, background 0.15s ease;
}
.nav-app-item:active { transform: scale(0.98); background: var(--paper-3); }

.nav-app-icon {
    width: 44px; height: 44px;
    border-radius: var(--r-md);
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
    background: var(--paper);
    box-shadow: var(--shadow-soft);
}
.nav-app-icon svg { width: 26px; height: 26px; }

.nav-app-body { flex: 1; min-width: 0; }
.nav-app-name { font-weight: 600; font-size: 15px; line-height: 1.2; }
.nav-app-hint { font-size: 12px; color: var(--ink-3); margin-top: 2px; }
.nav-app-arrow { color: var(--ink-3); flex-shrink: 0; }
.nav-app-arrow svg { width: 18px; height: 18px; }

/* Settings */
.settings-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 0;
    border-bottom: 1px solid var(--line);
    gap: 12px;
}
.settings-row:last-child { border-bottom: none; }
.settings-row__label { font-weight: 500; font-size: 15px; }
.settings-row__hint { font-size: 12px; color: var(--ink-3); margin-top: 2px; }
.text-input {
    background: var(--paper-2);
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    padding: 10px 14px;
    font-size: 14px;
    color: var(--ink);
    width: 160px;
    text-align: right;
}

/* ✨ V12.18 — Boutons preset rayon */
.radius-preset {
    flex: 1;
    min-width: 56px;
    padding: 8px 10px;
    background: var(--paper-2);
    border: 1px solid var(--line);
    border-radius: var(--r-pill);
    font-size: 12px;
    font-weight: 600;
    color: var(--ink-2);
    cursor: pointer;
    transition: all 0.15s ease;
}
.radius-preset:hover { border-color: var(--copper); color: var(--ink); }
.radius-preset.active {
    background: var(--copper);
    border-color: var(--copper);
    color: var(--ink);
}
.radius-preset:active { transform: scale(0.96); }

/* Range input compact */
input[type="range"] {
    -webkit-appearance: none;
    height: 6px;
    background: var(--paper-3);
    border-radius: 99px;
    outline: none;
}
input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 22px; height: 22px;
    background: var(--copper);
    border-radius: 50%;
    cursor: pointer;
    box-shadow: 0 2px 6px rgba(0,0,0,0.2);
}
input[type="range"]::-moz-range-thumb {
    width: 22px; height: 22px;
    background: var(--copper);
    border-radius: 50%;
    cursor: pointer;
    border: 0;
    box-shadow: 0 2px 6px rgba(0,0,0,0.2);
}

/* Quand le toggle distance est OFF, on grise la zone de réglage du rayon */
#setting-radius-row.disabled {
    opacity: 0.4;
    pointer-events: none;
}

.toggle {
    width: 52px; height: 30px;
    background: var(--paper-3);
    border-radius: var(--r-pill);
    position: relative;
    cursor: pointer;
    transition: background 0.25s ease;
    flex-shrink: 0;
}
.toggle::after {
    content: '';
    position: absolute;
    top: 3px; left: 3px;
    width: 24px; height: 24px;
    background: var(--paper);
    border-radius: 50%;
    box-shadow: 0 1px 3px rgba(0,0,0,0.2);
    transition: transform 0.25s cubic-bezier(0.32, 0.72, 0, 1);
}
.toggle.on { background: var(--moss); }
.toggle.on::after { transform: translateX(22px); background: white; }

/* =========================================================
   Toast
   ========================================================= */
.toast {
    position: fixed;
    bottom: calc(var(--nav-h) + 20px + var(--safe-bottom));
    left: 50%;
    transform: translateX(-50%) translateY(20px);
    background: var(--ink);
    color: var(--paper);
    padding: 12px 20px;
    border-radius: var(--r-pill);
    font-size: 13px;
    font-weight: 500;
    box-shadow: var(--shadow-deep);
    z-index: 1200;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s ease, transform 0.25s ease;
    display: inline-flex; align-items: center; gap: 8px;
    max-width: 90vw;
    text-align: center;
}
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
.toast svg { width: 16px; height: 16px; color: var(--copper); }
.toast--error  { background: #b8423a; }
.toast--error svg { color: #ffd2c2; }
.toast--success { background: var(--moss-deep); }
.toast--success svg { color: #c4e0c8; }

.divider-decor {
    text-align: center;
    margin: 32px 0;
    color: var(--copper);
    font-size: 14px;
    letter-spacing: 0.5em;
    opacity: 0.6;
}

.about-card {
    background: var(--paper-2);
    border: 1px dashed var(--line);
    border-radius: var(--r-lg);
    padding: 18px;
    font-size: 13px;
    color: var(--ink-2);
    line-height: 1.55;
    margin-top: 24px;
}
.about-card strong { color: var(--ink); font-weight: 600; }
.about-card .signature {
    font-family: 'Fraunces', serif;
    font-style: italic;
    color: var(--copper);
    margin-top: 10px;
    text-align: right;
    font-size: 14px;
}

/* =========================================================
   Onboarding tooltip
   ========================================================= */
.onboard-bubble {
    position: fixed;
    top: calc(var(--header-h) + var(--safe-top) + 8px);
    right: 14px;
    z-index: 400;
    background: var(--ink);
    color: var(--paper);
    padding: 12px 16px;
    border-radius: var(--r-md);
    font-size: 13px;
    line-height: 1.4;
    box-shadow: var(--shadow-deep);
    max-width: 240px;
    opacity: 0;
    transform: translateY(-8px);
    pointer-events: none;
    transition: all 0.3s ease;
}
.onboard-bubble.visible {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}
/* ✨ V12.18 — Si une sheet d'onboarding est ouverte, on cache la bulle pour ne pas surcharger */
body:has(.sheet--onboarding.open) .onboard-bubble.visible {
    opacity: 0 !important;
    pointer-events: none !important;
}
.onboard-bubble::before {
    content: '';
    position: absolute;
    top: -7px; right: 24px;
    width: 12px; height: 12px;
    background: var(--ink);
    transform: rotate(45deg);
}
.onboard-bubble strong {
    display: block;
    font-family: 'Fraunces', serif;
    font-weight: 600;
    margin-bottom: 3px;
    color: var(--cream);
}
.onboard-bubble button {
    margin-top: 8px;
    padding: 5px 10px;
    background: var(--copper);
    color: var(--ink);
    border-radius: var(--r-pill);
    font-size: 11px;
    font-weight: 600;
}

/* =========================================================
   ✨ V4 — Nouvelles fonctionnalités
   ========================================================= */

/* Card entrance stagger */
@keyframes cardIn {
    from { opacity: 0; transform: translateY(12px); }
    to { opacity: 1; transform: translateY(0); }
}
.event-card, .ad-slot {
    animation: cardIn 0.4s cubic-bezier(0.2, 0.8, 0.2, 1) backwards;
}
.event-card:nth-child(1), .ad-slot:nth-child(1) { animation-delay: 0.02s; }
.event-card:nth-child(2), .ad-slot:nth-child(2) { animation-delay: 0.06s; }
.event-card:nth-child(3), .ad-slot:nth-child(3) { animation-delay: 0.10s; }
.event-card:nth-child(4), .ad-slot:nth-child(4) { animation-delay: 0.14s; }
.event-card:nth-child(5), .ad-slot:nth-child(5) { animation-delay: 0.18s; }
.event-card:nth-child(n+6), .ad-slot:nth-child(n+6) { animation-delay: 0.22s; }

/* Notes badge sur card */
.note-badge {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    background: var(--cream);
    color: var(--copper-deep);
    padding: 3px 8px;
    border-radius: var(--r-pill);
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.note-badge svg { width: 11px; height: 11px; }
html[data-theme="dark"] .note-badge { background: var(--copper-light); color: var(--copper); }

/* Notes editor dans le sheet détail */
.notes-editor {
    margin-top: 16px;
    padding: 14px;
    background: var(--paper-2);
    border: 1px dashed var(--copper);
    border-radius: var(--r-md);
}
.notes-editor__label {
    font-family: 'Fraunces', serif;
    font-style: italic;
    font-weight: 600;
    font-size: 13px;
    color: var(--copper);
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    gap: 6px;
}
.notes-editor__label svg { width: 14px; height: 14px; }
.notes-textarea {
    width: 100%;
    min-height: 70px;
    padding: 10px 12px;
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
    font-family: inherit;
    font-size: 14px;
    color: var(--ink);
    resize: vertical;
    line-height: 1.5;
}
.notes-textarea:focus {
    outline: none;
    border-color: var(--moss);
}
.notes-editor__hint {
    font-size: 11px;
    color: var(--ink-3);
    margin-top: 6px;
    font-style: italic;
}

/* Tri (sort menu) */
.sort-toggle {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: var(--ink-3);
    font-size: 12px;
    font-weight: 500;
    padding: 4px 8px;
    border-radius: var(--r-pill);
    background: var(--paper-2);
    border: 1px solid var(--line);
}
.sort-toggle svg { width: 12px; height: 12px; }
.sort-toggle:active { transform: scale(0.95); }
.sort-toggle strong { color: var(--ink); font-weight: 600; }

.sort-menu {
    position: absolute;
    right: 18px;
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    box-shadow: var(--shadow-card);
    padding: 4px;
    z-index: 30;
    min-width: 180px;
    opacity: 0;
    transform: translateY(-6px);
    pointer-events: none;
    transition: all 0.18s ease;
}
.sort-menu.open {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}
.sort-menu__item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    border-radius: var(--r-sm);
    font-size: 14px;
    color: var(--ink);
    width: 100%;
    text-align: left;
}
.sort-menu__item:active { background: var(--paper-2); }
.sort-menu__item.active { background: var(--moss-light); color: var(--moss-deep); font-weight: 600; }
html[data-theme="dark"] .sort-menu__item.active { background: var(--moss-light); color: var(--ink); }
.sort-menu__item svg { width: 14px; height: 14px; opacity: 0; }
.sort-menu__item.active svg { opacity: 1; }

/* Settings : bouton GPS */
.btn-gps {
    width: 100%;
    margin-top: 8px;
    padding: 10px;
    background: var(--moss);
    color: #faf6ed;
    border-radius: var(--r-md);
    font-size: 13px;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    transition: transform 0.1s ease;
}
.btn-gps:active { transform: scale(0.97); }
.btn-gps svg { width: 14px; height: 14px; }
.btn-gps:disabled { background: var(--ink-3); cursor: not-allowed; }
html[data-theme="dark"] .btn-gps { background: var(--copper); color: var(--ink); }

/* Map : bouton "me localiser" + bandeau virée */
.map-locate-btn {
    position: absolute;
    bottom: 18px;
    right: 18px;
    width: 44px; height: 44px;
    border-radius: var(--r-pill);
    background: var(--paper);
    color: var(--moss);
    display: flex; align-items: center; justify-content: center;
    box-shadow: var(--shadow-card);
    z-index: 500;
    border: 1px solid var(--line);
}
.map-locate-btn svg { width: 22px; height: 22px; }
.map-locate-btn:active { transform: scale(0.92); }
.map-locate-btn.locating svg { animation: spin 1s linear infinite; }

/* Trip planner */
.trip-bar {
    background: linear-gradient(135deg, var(--copper-deep), var(--copper));
    color: #faf6ed;
    border-radius: var(--r-lg);
    padding: 14px 16px;
    margin-bottom: 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    box-shadow: var(--shadow-card);
}
.trip-bar__main { flex: 1; min-width: 0; }
.trip-bar__title {
    font-family: 'Fraunces', serif;
    font-weight: 700;
    font-style: italic;
    font-size: 16px;
    line-height: 1.2;
}
.trip-bar__hint { font-size: 12px; opacity: 0.85; margin-top: 2px; }
.trip-bar__btn {
    background: rgba(250, 246, 237, 0.18);
    color: #faf6ed;
    border: 1px solid rgba(250, 246, 237, 0.3);
    padding: 8px 14px;
    border-radius: var(--r-pill);
    font-size: 12px;
    font-weight: 600;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.trip-bar__btn svg { width: 12px; height: 12px; }
.trip-bar__btn:active { transform: scale(0.96); }
.trip-bar__btn.primary {
    background: var(--paper);
    color: var(--copper-deep);
    border-color: var(--paper);
}

/* Mode sélection trip */
.event-card.trip-mode {
    cursor: pointer;
    padding-left: 50px;
}
.event-card.trip-mode .event-card__tier { display: none; }
.event-card.trip-mode::before {
    content: '';
    position: absolute;
    left: 16px; top: 50%;
    transform: translateY(-50%);
    width: 22px; height: 22px;
    border: 2px solid var(--ink-3);
    border-radius: 50%;
    background: var(--paper);
    transition: all 0.2s ease;
}
.event-card.trip-mode.selected::before {
    background: var(--moss);
    border-color: var(--moss);
    box-shadow: inset 0 0 0 4px var(--moss), 0 0 0 6px var(--moss-light);
}
.event-card.trip-mode.selected::after {
    content: '✓';
    position: absolute;
    left: 21px; top: 50%;
    transform: translateY(-50%);
    color: white;
    font-weight: 700;
    font-size: 14px;
}

/* Trip step number on map */
.trip-step-marker {
    background: var(--copper);
    color: white;
    border: 3px solid var(--paper);
    border-radius: 50%;
    box-shadow: 0 2px 8px rgba(0,0,0,0.4);
    display: flex; align-items: center; justify-content: center;
    font-family: 'Fraunces', serif;
    font-weight: 700;
    font-size: 14px;
    width: 32px; height: 32px;
}

/* Trip results sheet */
.trip-stop {
    display: flex;
    gap: 14px;
    padding: 14px 0;
    border-bottom: 1px dashed var(--line);
    align-items: flex-start;
}
.trip-stop:last-child { border-bottom: none; }
.trip-stop__num {
    width: 32px; height: 32px;
    background: var(--copper);
    color: white;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-family: 'Fraunces', serif;
    font-weight: 700;
    font-size: 15px;
    flex-shrink: 0;
}
.trip-stop__main { flex: 1; min-width: 0; }
.trip-stop__name {
    font-family: 'Fraunces', serif;
    font-weight: 700;
    font-size: 15px;
    line-height: 1.2;
    color: var(--ink);
}
.trip-stop__meta {
    font-size: 12px;
    color: var(--ink-3);
    margin-top: 2px;
}
.trip-stop__leg {
    font-size: 11px;
    color: var(--copper);
    font-weight: 600;
    margin-top: 4px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.trip-summary {
    background: var(--paper-2);
    border-radius: var(--r-md);
    padding: 14px;
    margin-bottom: 16px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    text-align: center;
}
.trip-summary__cell strong {
    display: block;
    font-family: 'Fraunces', serif;
    font-weight: 700;
    font-size: 20px;
    color: var(--moss);
    line-height: 1;
}
.trip-summary__cell span {
    font-size: 11px;
    color: var(--ink-3);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-top: 4px;
    display: block;
}

/* Online/offline indicator */
.offline-banner {
    position: fixed;
    bottom: calc(var(--nav-h) + 12px + var(--safe-bottom));
    left: 50%;
    transform: translateX(-50%) translateY(20px);
    background: var(--burgundy);
    color: white;
    padding: 8px 14px;
    border-radius: var(--r-pill);
    font-size: 12px;
    font-weight: 600;
    box-shadow: var(--shadow-card);
    z-index: 90;
    opacity: 0;
    pointer-events: none;
    transition: all 0.3s ease;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.offline-banner.visible {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}
.offline-banner svg { width: 12px; height: 12px; }

/* Sort row container */
.sort-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: -6px 0 12px;
    position: relative;
}
.sort-row__count {
    font-size: 12px;
    color: var(--ink-3);
    font-weight: 500;
}

/* =========================================================
   ✨ V7 — Statuts événement, actualités, hiérarchie
   ========================================================= */

/* Bandeau de statut sur les cartes */
.event-card[data-status="cancelled"] {
    opacity: 0.55;
}
.event-card[data-status="cancelled"] .event-card__title {
    text-decoration: line-through;
    text-decoration-color: var(--burgundy);
    text-decoration-thickness: 2px;
}
/* ✨ V14.10 — Reporté : pas barré, mais légèrement estompé */
.event-card[data-status="postponed"] {
    opacity: 0.78;
}
.event-card[data-status="postponed"] .event-card__title::before {
    content: "↻ ";
    color: var(--copper);
    font-weight: 700;
}
/* ✨ V14.10 — Déplacé : juste un indice */
.event-card[data-status="moved"] {
    opacity: 0.9;
}

/* ✨ V14.10 — Pastille de statut "prominent" en haut à droite (priorité sur AUJOURD'HUI)
   Remplace le badge de jours quand le statut est annulé/reporté/déplacé. */
.status-pill {
    position: absolute;
    top: 12px;
    right: 12px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border-radius: 4px;
    z-index: 2;
    box-shadow: 0 1px 4px rgba(0,0,0,.12);
}
.status-pill svg { width: 11px; height: 11px; }
.status-pill--cancelled {
    background: var(--burgundy);
    color: #faf6ed;
}
.status-pill--postponed {
    background: var(--copper);
    color: #faf6ed;
}
.status-pill--moved {
    background: #5a3d8a;
    color: #faf6ed;
}
html[data-theme="dark"] .status-pill--cancelled { background: #c44d3e; }
html[data-theme="dark"] .status-pill--postponed { background: #d68d4f; }
html[data-theme="dark"] .status-pill--moved     { background: #7a5dbd; }

.status-banner {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    border-bottom: 1px solid var(--line);
}
.status-banner svg { width: 13px; height: 13px; }

.status-banner--modified { background: #fff4d6; color: #8c5223; }
.status-banner--moved    { background: #e6dffb; color: #4a2c8c; }
.status-banner--cancelled { background: #fbe4e0; color: var(--burgundy); }
.status-banner--new      { background: var(--moss-light); color: var(--moss-deep); }

html[data-theme="dark"] .status-banner--modified { background: #4a3622; color: #f3dcc1; }
html[data-theme="dark"] .status-banner--moved    { background: #2d234a; color: #cfc4f0; }
html[data-theme="dark"] .status-banner--cancelled { background: #4a1f1c; color: #f4d2cb; }
html[data-theme="dark"] .status-banner--new      { background: #2a3a2e; color: #d8e2d4; }

/* Pour positionner le bandeau dans une carte qui a déjà une structure flex */
.event-card.has-status {
    flex-direction: column;
}
.event-card.has-status .event-card__main {
    display: flex;
    align-items: stretch;
}
.event-card .event-card__main {
    display: flex;
    align-items: stretch;
    flex: 1;
}

/* =========================================================
   📰 Actualités feed
   ========================================================= */
.news-item {
    background: var(--paper-2);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    padding: 14px 16px;
    margin-bottom: 12px;
    box-shadow: var(--shadow-soft);
    cursor: pointer;
    transition: transform 0.15s ease;
    position: relative;
    overflow: hidden;
}
.news-item:active { transform: scale(0.985); }
.news-item::before {
    content: '';
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 4px;
}
.news-item[data-type="created"]::before,
.news-item[data-type="new"]::before { background: var(--moss); }
.news-item[data-type="modified"]::before,
.news-item[data-type="updated"]::before { background: var(--copper); }
.news-item[data-type="moved"]::before { background: var(--tier-legend); }
.news-item[data-type="cancelled"]::before { background: var(--burgundy); }

.news-item__head {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 6px;
    font-size: 10.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
}
.news-item__head svg { width: 13px; height: 13px; }
.news-item__head .news-time {
    margin-left: auto;
    color: var(--ink-3);
    font-weight: 500;
    text-transform: none;
    letter-spacing: 0;
    font-size: 11.5px;
}

.news-item[data-type="created"] .news-item__head,
.news-item[data-type="new"] .news-item__head { color: var(--moss); }
.news-item[data-type="modified"] .news-item__head,
.news-item[data-type="updated"] .news-item__head { color: var(--copper); }
.news-item[data-type="moved"] .news-item__head { color: var(--tier-legend); }
.news-item[data-type="cancelled"] .news-item__head { color: var(--burgundy); }

.news-item__title {
    font-family: 'Fraunces', serif;
    font-weight: 700;
    font-size: 16px;
    line-height: 1.25;
    color: var(--ink);
    margin-bottom: 4px;
}
.news-item__msg {
    font-size: 13px;
    line-height: 1.45;
    color: var(--ink-2);
}
.news-item__loc {
    margin-top: 8px;
    font-size: 12px;
    color: var(--ink-3);
    display: flex;
    align-items: center;
    gap: 4px;
}
.news-item__loc svg { width: 12px; height: 12px; }

.news-stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 6px;
    margin-bottom: 18px;
}
.news-stat {
    background: var(--paper-2);
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    padding: 8px 4px;
    text-align: center;
}
.news-stat__num {
    font-family: 'Fraunces', serif;
    font-weight: 700;
    font-size: 18px;
    line-height: 1;
}
.news-stat__lbl {
    font-size: 9.5px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--ink-3);
    margin-top: 4px;
    font-weight: 600;
}
.news-stat--new .news-stat__num { color: var(--moss); }
.news-stat--mod .news-stat__num { color: var(--copper); }
.news-stat--mov .news-stat__num { color: var(--tier-legend); }
.news-stat--cnl .news-stat__num { color: var(--burgundy); }

/* =========================================================
   🌳 Hiérarchie pays/régions/villes
   ========================================================= */
.atlas-toggle {
    display: inline-flex;
    background: var(--paper-2);
    border: 1px solid var(--line);
    border-radius: var(--r-pill);
    padding: 3px;
    margin-bottom: 14px;
}
.atlas-toggle button {
    padding: 7px 16px;
    border-radius: var(--r-pill);
    font-size: 12.5px;
    font-weight: 600;
    color: var(--ink-3);
    transition: all 0.15s ease;
    display: inline-flex;
    align-items: center;
    gap: 5px;
}
.atlas-toggle button.active {
    background: var(--ink);
    color: var(--paper);
}
html[data-theme="dark"] .atlas-toggle button.active { background: var(--copper); color: var(--ink); }
.atlas-toggle button svg { width: 14px; height: 14px; }

.tree-node {
    background: var(--paper-2);
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    margin-bottom: 8px;
    overflow: hidden;
}
.tree-node__header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px;
    cursor: pointer;
    transition: background 0.15s ease;
}
.tree-node__header:active { background: var(--paper-3); }
.tree-node__chevron {
    width: 16px; height: 16px;
    color: var(--ink-3);
    transition: transform 0.2s ease;
    flex-shrink: 0;
}
.tree-node.expanded .tree-node__chevron { transform: rotate(90deg); }

.tree-node__flag {
    font-size: 22px;
    line-height: 1;
    flex-shrink: 0;
}

.tree-node__main { flex: 1; min-width: 0; }
.tree-node__title {
    font-family: 'Fraunces', serif;
    font-weight: 700;
    font-size: 16px;
    line-height: 1.2;
    color: var(--ink);
}
.tree-node__sub {
    font-size: 12px;
    color: var(--ink-3);
    margin-top: 2px;
}

.tree-node__count {
    background: var(--moss-light);
    color: var(--moss-deep);
    font-size: 11px;
    font-weight: 700;
    padding: 4px 9px;
    border-radius: var(--r-pill);
    flex-shrink: 0;
    font-family: 'Fraunces', serif;
}
html[data-theme="dark"] .tree-node__count { background: var(--moss-light); color: var(--ink); }

.tree-node__body {
    border-top: 1px solid var(--line);
    background: var(--paper);
    padding: 8px;
    display: none;
}
.tree-node.expanded > .tree-node__body { display: block; }

/* Sous-niveaux dans l'arbre */
.tree-region {
    background: var(--paper-2);
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
    margin-bottom: 6px;
    overflow: hidden;
}
.tree-region__header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    cursor: pointer;
}
.tree-region__header:active { background: var(--paper-3); }
.tree-region.expanded .tree-node__chevron { transform: rotate(90deg); }
.tree-region__title {
    flex: 1;
    font-size: 14px;
    font-weight: 600;
    color: var(--ink);
}
.tree-region__count {
    font-size: 10.5px;
    color: var(--ink-3);
    font-weight: 600;
}
.tree-region__body {
    display: none;
    border-top: 1px solid var(--line);
    background: var(--paper);
    padding: 8px;
}
.tree-region.expanded > .tree-region__body { display: block; }

.tree-city {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border-radius: var(--r-sm);
    cursor: pointer;
}
.tree-city:active { background: var(--paper-3); }
.tree-city + .tree-city { border-top: 1px dashed var(--line); }
.tree-city__name {
    flex: 1;
    font-size: 13.5px;
    font-weight: 500;
    color: var(--ink);
}
.tree-city__count {
    font-size: 10.5px;
    color: var(--copper);
    font-weight: 600;
    background: var(--copper-light);
    padding: 2px 7px;
    border-radius: var(--r-pill);
}

/* =========================================================
   🔔 Notifications card (settings)
   ========================================================= */
.notif-card {
    background: linear-gradient(135deg, var(--moss-light), var(--copper-light));
    border-radius: var(--r-md);
    padding: 14px;
    margin-bottom: 14px;
}
.notif-card__title {
    font-family: 'Fraunces', serif;
    font-weight: 700;
    font-size: 14px;
    color: var(--ink);
    margin-bottom: 4px;
    display: flex;
    align-items: center;
    gap: 6px;
}
.notif-card__title svg { width: 16px; height: 16px; }
.notif-card__msg {
    font-size: 12px;
    color: var(--ink-2);
    line-height: 1.4;
    margin-bottom: 10px;
}
.notif-card button {
    background: var(--ink);
    color: var(--paper);
    padding: 8px 14px;
    border-radius: var(--r-pill);
    font-size: 12px;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 5px;
}
.notif-card button:active { transform: scale(0.97); }
.notif-card button svg { width: 12px; height: 12px; }
.notif-card.granted {
    background: linear-gradient(135deg, var(--moss-light), #d4e8d8);
}
.notif-card.granted .notif-card__title { color: var(--moss-deep); }

/* Bottom nav avec 5 items */
.bottom-nav__item span { font-size: 10px; }

/* ═══════════════════════════════════════════════════════════
   ✨ V14.11 — VRAIE VERSION BUREAU (≥1024px)
   Avant : au-delà de 540px, le site affichait juste le mobile
   centré dans un cadre téléphone simulé de 420px (voir règle
   @media (min-width:540px) plus haut, toujours active pour les
   tablettes entre 540 et 1024px). À partir de 1024px, on bascule
   sur une vraie mise en page bureau : sidebar de filtres, grille
   multi-colonnes, barre de navigation en haut. Le mobile (<540px)
   n'est pas touché par ce bloc.
   ═══════════════════════════════════════════════════════════ */
@media (min-width: 1024px) {
    /* ✨ V14.12 — Correctif retour utilisateur : le fond sombre "--ink" hérité du
       cadre téléphone simulé (voir règle @media min-width:540px plus haut) restait
       appliqué au-delà de 1024px. Sur un écran large, ça laissait deux immenses
       bandes noires de part et d'autre du contenu — "on ne voit que du fond noir".
       On repasse sur un fond clair cohérent avec l'identité du site. */
    body {
        padding: 0 !important;
        background: var(--paper-2) !important;
        background-image: none !important;
    }
    .app {
        max-width: 1180px !important;
        width: 100% !important;
        margin: 0 auto !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        background: var(--paper) !important;
        padding: 0 32px !important;
    }

    /* Header : plus besoin d'être sticky en haut du cadre 420px, il redevient
       un simple bandeau de marque au-dessus du contenu large. */
    .app-header {
        max-width: 1180px;
        margin: 0 auto;
        padding: 20px 32px;
    }

    /* Barre de nav : du bas (mobile/tablette) vers le haut (bureau), fixe pour
       rester accessible, largeur pleine — plus le cadre 420px. */
    .bottom-nav {
        position: fixed !important;
        top: 0 !important;
        bottom: auto !important;
        left: 0 !important;
        right: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        transform: none !important;
        border-top: none !important;
        border-bottom: 1px solid var(--line) !important;
        justify-content: center !important;
        gap: 36px;
        padding: 10px 8px !important;
        z-index: 200;
    }
    /* ✨ V14.12 — flex:1 (hérité du mobile) étirait chaque item sur toute la largeur
       disponible, avec d'énormes espaces vides entre icône et libellé sur grand
       écran. En largeur naturelle, les items restent groupés et lisibles. */
    .bottom-nav__item { flex: 0 0 auto; flex-direction: row; gap: 8px; padding: 8px 6px; }
    .bottom-nav__item svg { width: 19px; height: 19px; }

    /* Espace réservé en haut pour la nav désormais fixe en haut d'écran,
       et on retire le padding-bas prévu pour l'ancienne bottom-nav mobile. */
    .app { padding-top: 56px !important; }
    .tab-content { padding-bottom: 40px !important; }

    /* Toasts / splash / sheets : on les laisse à leur largeur mobile (420px)
       centrée — un pattern de notification étroite est normal sur bureau
       aussi, inutile de les étirer sur toute la largeur. */

    /* ─── Tab Découvrir : sidebar de filtres + grille de résultats ─── */
    #tab-discover.active {
        display: grid;
        grid-template-columns: 300px 1fr;
        grid-template-areas:
            "hero    hero"
            "sidebar stats"
            "sidebar title"
            "sidebar list"
            "sidebar decor"
            "sidebar about";
        column-gap: 32px;
        align-items: start;
    }
    #hero-wrap, #hero-tease { grid-area: hero; }
    .quick-stats { grid-area: stats; grid-template-columns: repeat(4, 1fr); }
    #tab-discover > .section-title { grid-area: title; margin-top: 0; }
    /* Le compte de résultats est déjà affiché dans le titre "À l'affiche" —
       on évite de le répéter dans la barre de tri juste en dessous. */
    #tab-discover .sort-row__count { display: none; }
    #event-list-discover { grid-area: list; }
    #tab-discover > .divider-decor { grid-area: decor; }
    #tab-discover > .about-card { grid-area: about; }

    .discover-sidebar {
        grid-area: sidebar;
        position: sticky;
        top: 80px;
        display: flex;
        flex-direction: column;
        background: var(--paper-2);
        border: 1px solid var(--line);
        border-radius: var(--r-lg);
        padding: 18px;
    }
    .discover-sidebar .chip-row {
        flex-wrap: wrap;
        overflow: visible;
        margin: 0;
        padding: 0 0 4px;
    }
    .discover-sidebar .geo-trigger { width: 100%; }

    /* Grille multi-colonnes pour les listes d'événements (au lieu de la
       liste verticale mobile) — la carte garde sa mise en page interne
       (bloc date + contenu en ligne), juste répartie en colonnes.
       ✨ Découvrir : les cartes ne sont PAS des enfants directs de
       #event-list-discover mais de #vlist-content (rendu direct, voir
       renderListDirect()) — c'est donc ce conteneur-là qu'il faut grider,
       #event-list-discover reste en flux normal (sort-row / liste / footer). */
    #vlist-content {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
        gap: 14px;
        align-content: start;
    }
    /* Favoris : les cartes SONT enfants directs de #event-list-favorites. */
    #event-list-favorites {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
        gap: 14px;
        align-content: start;
    }
    #event-list-favorites .trip-bar {
        grid-column: 1 / -1;
    }
    #vlist-content .event-card,
    #event-list-favorites .event-card {
        margin-bottom: 0;
    }
    /* Pub / annonces in-feed : occupent toute la largeur de la grille plutôt
       qu'une seule colonne étroite. */
    #vlist-content .event-card--ad {
        grid-column: 1 / -1;
    }

    /* ─── Autres onglets (agenda / favoris / actualités / carte) ───
       On leur donne juste toute la largeur disponible plutôt que le
       cadre 420px — pas de refonte dédiée pour l'instant. */
    #tab-calendar.active,
    #tab-news.active,
    #tab-map.active {
        max-width: 900px;
        margin: 0 auto;
    }
    #tab-favorites.active #event-list-favorites {
        margin-top: 8px;
    }
}

/* ✨ V14.11 — Cartes de maillage interne SSR (event-status-banner, live-content) */
.seo-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }
.seo-card { display: block; background: #fff; border: 1px solid #d6c9a8; border-radius: 8px; padding: 12px 14px; text-decoration: none; color: #1d1814; }
.seo-card__row { display: flex; gap: 12px; align-items: flex-start; }
.seo-card__date { text-align: center; min-width: 48px; line-height: 1.1; }
.seo-card__day { font-size: 22px; font-weight: 700; color: #3a5a40; }
.seo-card__month { font-size: 10px; text-transform: uppercase; color: #7a6a52; font-weight: 600; }
.seo-card__body { flex: 1; min-width: 0; }
.seo-card__title { font-weight: 600; font-size: 13px; line-height: 1.3; margin-bottom: 4px; }
.seo-card__meta { font-size: 11px; color: #7a6a52; }
.seo-h2 { margin: 0 0 12px 0; font-family: 'Fraunces', Georgia, serif; font-size: 16px; color: #1d1814; }

/* ✨ V14.16 — Rails pub latéraux. Largeur alignée sur la vraie taille du tag
   Adsterra desktop (300x250) : à 160px la pub était rognée/écrasée dans un
   conteneur trop étroit, donc en grande partie perdue. 2 emplacements empilés
   par côté pour exploiter la hauteur dispo (le format non-Native Banner
   supporte plusieurs slots simultanés, cf. activateAdsterraSlots).
   Seuil relevé en conséquence pour ne jamais chevaucher le contenu
   (1180px de contenu + 2×336px de rail + marges). */
.ad-rail {
    display: none;
}
@media (min-width: 1860px) {
    .ad-rail {
        display: flex;
        flex-direction: column;
        gap: 16px;
        position: fixed;
        top: 96px;
        width: 300px;
        z-index: 50;
    }
    .ad-rail--left { left: max(16px, calc(50% - 590px - 316px)); }
    .ad-rail--right { right: max(16px, calc(50% - 590px - 316px)); }
    .ad-rail .event-card--ad-adsterra {
        margin: 0;
        min-height: 250px;
    }
}