/* ============================================================
   FICHIER : assets/css/cookies-banner.css
   Bandeau de consentement aux cookies
   ============================================================ */

.cookies-banner {
    position: fixed; left: 20px; right: 20px; bottom: -200px; z-index: 1500;
    max-width: 900px; margin: 0 auto;
    background: var(--white); border-radius: var(--radius-lg);
    box-shadow: var(--shadow-strong); border: 1px solid var(--border-light);
    transition: bottom .6s cubic-bezier(.25,.8,.25,1);
}
.cookies-banner.visible { bottom: 24px; }

.cookies-banner-inner { display: flex; align-items: center; gap: 20px; padding: 22px 26px; flex-wrap: wrap; }
.cookies-icon {
    width: 50px; height: 50px; min-width: 50px; border-radius: 50%;
    background: linear-gradient(135deg, var(--accent-gold), var(--accent-coral));
    color: var(--white); display: flex; align-items: center; justify-content: center; font-size: 1.3rem;
}
.cookies-text { flex: 1; min-width: 220px; }
.cookies-text p { font-size: .9rem; color: var(--text-muted); }
.cookies-text a { color: var(--ocean-teal); font-weight: 600; }
.cookies-actions { display: flex; gap: 10px; }
.btn-cookie { padding: 11px 22px; border-radius: 50px; font-weight: 600; font-size: .88rem; border: 2px solid transparent; }
.btn-cookie-decline { background: var(--bg-light); color: var(--text-dark); border-color: var(--border-light); }
.btn-cookie-decline:hover { background: var(--border-light); }
.btn-cookie-accept { background: linear-gradient(135deg, var(--ocean-teal), var(--ocean-navy)); color: var(--white); }
.btn-cookie-accept:hover { filter: brightness(1.08); }

.cookies-backdrop { display: none; }

/* --- Mobile : bandeau recentré au milieu de l'écran, format compact --- */
@media (max-width: 768px) {
    .cookies-backdrop {
        display: block;
        position: fixed; inset: 0; z-index: 1499;
        background: rgba(3, 16, 31, .55);
        opacity: 0; visibility: hidden;
        transition: opacity .35s ease, visibility 0s linear .35s;
    }
    .cookies-banner.visible ~ .cookies-backdrop {
        opacity: 1; visibility: visible;
        transition: opacity .35s ease;
    }

    .cookies-banner {
        left: 16px; right: 16px; bottom: auto;
        top: 50%;
        max-width: none;
        max-height: 80vh;
        overflow-y: auto;
        transform: translateY(-50%) scale(.92);
        opacity: 0; visibility: hidden;
        transition: transform .4s cubic-bezier(.25,.8,.25,1), opacity .3s ease, visibility 0s linear .4s;
    }
    .cookies-banner.visible {
        transform: translateY(-50%) scale(1);
        opacity: 1; visibility: visible;
        transition: transform .4s cubic-bezier(.25,.8,.25,1), opacity .3s ease;
    }

    .cookies-banner-inner {
        flex-direction: column;
        align-items: flex-start;
        gap: 14px;
        padding: 20px 18px;
    }
    .cookies-icon { width: 40px; height: 40px; min-width: 40px; font-size: 1.05rem; }
    .cookies-text { min-width: 0; }
    .cookies-text p { font-size: .82rem; line-height: 1.55; }
    .cookies-text a { font-size: inherit; }

    .cookies-actions { width: 100%; gap: 8px; }
    .btn-cookie { flex: 1; padding: 10px 14px; font-size: .82rem; }
}

@media (max-width: 380px) {
    .cookies-banner { left: 10px; right: 10px; }
    .cookies-banner-inner { padding: 16px 14px; }
    .cookies-actions { flex-direction: column; }
}