/* ============================================================
   poster-tablet.css
   Design system "Liquid Glass" iOS 2026 — Commerce Éthique Club
   Actif entre 768px et 1024px de large — portrait ET paysage
   ============================================================ */

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

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

    --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(26px) saturate(190%);
    --glass-shadow: 0 8px 30px rgba(15, 110, 86, .16);

    --glass-dark: rgba(18, 30, 26, .42);
    --glass-dark-strong: rgba(18, 30, 26, .54);
    --glass-dark-border: rgba(255, 255, 255, .14);
    --glass-dark-shadow: 0 8px 30px rgba(0, 0, 0, .45);

    --radius-lg: 18px;
    --radius-pill: 999px;

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

/* ── Base commune tablette (portrait + paysage) ── */
@media (min-width: 768px) and (max-width: 1024px) {

    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 .4s var(--ease);
    }
    body.poster-page.dark-mode {
        background: linear-gradient(160deg, #0d1613 0%, #101c18 45%, #0c1720 100%);
    }

    .poster-blob {
        position: fixed;
        border-radius: 50%;
        filter: blur(70px);
        opacity: .42;
        z-index: 0;
        pointer-events: none;
        animation: poster-float 20s var(--ease) infinite;
    }
    .poster-blob--1 { width: 340px; height: 340px; background: var(--accent); top: -100px; left: -90px; }
    .poster-blob--2 { width: 320px; height: 320px; background: var(--accent-dark); bottom: -120px; right: -80px; animation-delay: -7s; }
    .poster-blob--3 { width: 240px; height: 240px; background: #8fe3cf; top: 42%; left: 60%; animation-delay: -13s; }

    @keyframes poster-float {
        0%, 100% { transform: translate(0, 0) scale(1); }
        50%      { transform: translate(26px, -24px) scale(1.06); }
    }

    .poster-main {
        position: relative;
        z-index: 1;
        max-width: 760px;
        margin: 0 auto;
        padding: 56px 32px 72px;
    }

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

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

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

    .poster-form { margin: 0; }

    .poster-card {
        width: 100%;
        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: 14px;
        padding: 14px;
        text-align: center;
        transition: transform .32s 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: 34px;
        height: 34px;
        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: 15px;
        background: var(--accent-gradient);
        -webkit-background-clip: text;
        background-clip: text;
        color: transparent;
    }

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

    .poster-card:hover {
        transform: translateY(-4px) scale(1.015);
        background: var(--glass-bg-strong);
        box-shadow: 0 14px 34px rgba(15, 110, 86, .2), 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 14px 34px rgba(0, 0, 0, .5), inset 0 1px 0 rgba(255, 255, 255, .1);
    }
    .poster-card:hover .poster-card__icon { transform: scale(1.08); }
    .poster-card:active { transform: translateY(-1px) scale(.99); }
    .poster-card:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }

    .poster-locked-note {
        margin: 22px auto 0;
        text-align: center;
        font-size: 12px;
        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); }

    /* ── Portrait : 2 colonnes, cartes carrées ── */
    @media (orientation: portrait) {
        .poster-grid {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 20px;
        }
        .poster-card { height: 190px; }
    }

    /* ── Paysage : 4 colonnes sur une ligne, cartes plus basses ── */
    @media (orientation: landscape) {
        .poster-grid {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 18px;
        }
        .poster-card { height: 168px; gap: 10px; padding: 12px; }
        .poster-main { padding: 40px 32px 56px; }
        .poster-hero { margin-bottom: 32px; }
    }
}