/* ============================================================
   poster-desktop.css
   Design system "Liquid Glass" iOS 2026 — Commerce Éthique Club
   Actif uniquement à partir de 1025px de large
   ============================================================ */

:root {
    /* Accent */
    --accent: #1abc9c;
    --accent-dark: #0f6e56;
    --accent-gradient: linear-gradient(135deg, var(--accent), var(--accent-dark));

    /* Encre */
    --ink: #16241f;
    --ink-soft: rgba(22, 36, 31, .62);

    /* Verre — clair */
    --glass-bg: rgba(255, 255, 255, .32);
    --glass-bg-strong: rgba(255, 255, 255, .42);
    --glass-border: rgba(255, 255, 255, .38);
    --glass-blur: blur(28px) saturate(200%);
    --glass-shadow: 0 10px 34px rgba(15, 110, 86, .16);

    /* Verre — sombre (body.dark-mode) */
    --glass-dark: rgba(18, 30, 26, .4);
    --glass-dark-strong: rgba(18, 30, 26, .52);
    --glass-dark-border: rgba(255, 255, 255, .14);
    --glass-dark-shadow: 0 10px 34px rgba(0, 0, 0, .45);

    /* Formes */
    --radius-lg: 20px;
    --radius-pill: 999px;

    /* Mouvement */
    --ease: cubic-bezier(.22, 1, .36, 1);
}

@media (min-width: 1025px) {

    body.poster-page {
        font-family: -apple-system, "SF Pro Display", "SF Pro Text", system-ui, sans-serif;
        color: var(--ink);
        min-height: 100vh;
        margin: 0;
        position: relative;
        overflow-x: hidden;
        background: linear-gradient(160deg, #eefaf6 0%, #e3f5ee 35%, #eaf3fb 70%, #e4edf7 100%);
        transition: background .45s var(--ease);
    }

    body.poster-page.dark-mode {
        background: linear-gradient(160deg, #0d1613 0%, #101c18 45%, #0c1720 100%);
    }

    /* ── Halos décoratifs ── */
    .poster-blob {
        position: fixed;
        border-radius: 50%;
        filter: blur(80px);
        opacity: .45;
        z-index: 0;
        pointer-events: none;
        animation: poster-float 20s var(--ease) infinite;
    }
    .poster-blob--1 { width: 460px; height: 460px; background: var(--accent); top: -140px; left: -110px; }
    .poster-blob--2 { width: 420px; height: 420px; background: var(--accent-dark); bottom: -160px; right: -100px; animation-delay: -7s; }
    .poster-blob--3 { width: 320px; height: 320px; background: #8fe3cf; top: 38%; left: 58%; animation-delay: -13s; }

    @keyframes poster-float {
        0%, 100% { transform: translate(0, 0) scale(1); }
        50%      { transform: translate(34px, -30px) scale(1.08); }
    }

    /* ── Contenu ── */
    .poster-main {
        position: relative;
        z-index: 1;
        max-width: 1080px;
        margin: 0 auto;
        padding: 72px 40px 96px;
    }

    .poster-hero {
        text-align: center;
        margin-bottom: 56px;
    }

    .poster-title {
        font-size: clamp(1.75rem, 2.4vw, 2.25rem);
        font-weight: 600;
        letter-spacing: -.01em;
        margin: 0 0 10px;
        color: var(--ink);
    }
    body.poster-page.dark-mode .poster-title { color: #eaf6f1; }

    .poster-subtitle {
        font-size: 15px;
        margin: 0;
        color: var(--ink-soft);
    }
    body.poster-page.dark-mode .poster-subtitle { color: rgba(234, 246, 241, .62); }

    /* ── Grille de cartes ── */
    .poster-grid {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 24px;
    }

    .poster-form { margin: 0; }

    .poster-card {
        width: 100%;
        height: 208px;
        border: 1px solid var(--glass-border);
        border-radius: var(--radius-lg);
        background: var(--glass-bg);
        -webkit-backdrop-filter: var(--glass-blur);
        backdrop-filter: var(--glass-blur);
        box-shadow: var(--glass-shadow), inset 0 1px 0 rgba(255, 255, 255, .5);
        color: var(--ink);
        font-family: inherit;
        cursor: pointer;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 16px;
        padding: 16px;
        text-align: center;
        transition: transform .35s var(--ease), background .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease);
    }

    body.poster-page.dark-mode .poster-card {
        background: var(--glass-dark);
        border-color: var(--glass-dark-border);
        box-shadow: var(--glass-dark-shadow), inset 0 1px 0 rgba(255, 255, 255, .06);
        color: #eaf6f1;
    }

    .poster-card__icon {
        width: 40px;
        height: 40px;
        border-radius: var(--radius-pill);
        display: flex;
        align-items: center;
        justify-content: center;
        background: var(--glass-bg-strong);
        border: 1px solid var(--glass-border);
        transition: transform .3s var(--ease), background .3s var(--ease);
    }
    body.poster-page.dark-mode .poster-card__icon {
        background: var(--glass-dark-strong);
        border-color: var(--glass-dark-border);
    }

    .poster-card__icon i {
        font-size: 17px;
        background: var(--accent-gradient);
        -webkit-background-clip: text;
        background-clip: text;
        color: transparent;
    }

    .poster-card__label {
        font-size: 15px;
        font-weight: 600;
        line-height: 1.3;
    }

    .poster-card:hover {
        transform: translateY(-6px) scale(1.02);
        background: var(--glass-bg-strong);
        box-shadow: 0 18px 42px rgba(15, 110, 86, .22), inset 0 1px 0 rgba(255, 255, 255, .6);
        border-color: rgba(255, 255, 255, .5);
    }
    body.poster-page.dark-mode .poster-card:hover {
        background: var(--glass-dark-strong);
        box-shadow: 0 18px 42px rgba(0, 0, 0, .55), inset 0 1px 0 rgba(255, 255, 255, .1);
    }

    .poster-card:hover .poster-card__icon { transform: scale(1.08); }

    .poster-card:active { transform: translateY(-2px) scale(.99); }

    .poster-card:focus-visible {
        outline: 2px solid var(--accent);
        outline-offset: 4px;
    }

    .poster-locked-note {
        margin: 28px auto 0;
        text-align: center;
        font-size: 13px;
        color: var(--ink-soft);
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
    }
    body.poster-page.dark-mode .poster-locked-note { color: rgba(234, 246, 241, .62); }
}