/* =============================================================================
   CONSENT MANAGEMENT — Banner · Panel · Toggles · Manager button
   Requires: app.css loaded first (CSS custom properties)
   CNIL compliance: equal prominence, no cookie wall, no pre-selection
   ============================================================================= */

/* ── Root wrapper ─────────────────────────────────────────────────────────── */
#consent-root {
    font-family: "Manrope VF", "Segoe UI Variable", "Segoe UI", sans-serif;
}

/* ── Shared button reset + base ───────────────────────────────────────────── */
.consent-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.62rem 1.15rem;
    border-radius: 999px;
    font-size: var(--font-step--1, 0.9rem);
    font-weight: 660;
    font-family: inherit;
    line-height: 1.2;
    letter-spacing: 0.01em;
    white-space: nowrap;
    min-height: 2.65rem;
    cursor: pointer;
    transition: transform 140ms ease, box-shadow 140ms ease, background 140ms ease, border-color 140ms ease;
    text-decoration: none;
}

.consent-btn:focus-visible {
    outline: 3px solid var(--focus, #f0c767);
    outline-offset: 2px;
}

.consent-btn:hover {
    transform: translateY(-1px);
}

.consent-btn:active {
    transform: translateY(0);
}

/*
 * Equal prominence rule (CNIL): --primary and --secondary share the same
 * padding, border-width, border-radius, min-height, and font-weight.
 * Neither is visually prioritised over the other.
 */
.consent-btn--primary {
    background: var(--navy-800, #14395b);
    color: #ffffff;
    border: 2px solid var(--navy-800, #14395b);
}

.consent-btn--primary:hover {
    background: var(--navy-900, #0c223d);
    border-color: var(--navy-900, #0c223d);
}

.consent-btn--secondary {
    background: transparent;
    color: var(--navy-800, #14395b);
    border: 2px solid var(--navy-800, #14395b);
}

.consent-btn--secondary:hover {
    background: rgba(20, 57, 91, 0.07);
}

/* Ghost: intentionally lower visual weight — for "Paramétrer" only */
.consent-btn--ghost {
    background: transparent;
    color: var(--ink-500, #55697f);
    border: 2px solid transparent;
    text-decoration: underline;
    text-underline-offset: 0.22em;
    padding-inline: 0.6rem;
    min-height: auto;
}

.consent-btn--ghost:hover {
    color: var(--teal-700, #0f6a6f);
    transform: none;
}

/* ── Banner ───────────────────────────────────────────────────────────────── */
.consent-banner {
    position: fixed;
    bottom: 0;
    inset-inline: 0;
    z-index: 900;
    background: rgba(252, 250, 246, 0.97);
    border-top: 1px solid rgba(14, 47, 79, 0.13);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    box-shadow: 0 -0.5rem 2rem rgba(8, 22, 42, 0.13);
    transform: translateY(calc(100% + 1px));
    transition: transform 320ms cubic-bezier(0.4, 0, 0.2, 1);
    pointer-events: none;
}

.consent-banner.is-visible {
    transform: translateY(0);
    pointer-events: auto;
}

.consent-banner__inner {
    display: flex;
    align-items: center;
    gap: var(--space-md, 1.2rem);
    flex-wrap: wrap;
    padding-block: var(--space-sm, 0.9rem);
}

.consent-banner__content {
    flex: 1 1 18rem;
}

.consent-banner__title {
    font-size: var(--font-step-1, 1.25rem);
    font-family: "Source Serif 4 VF", Georgia, serif;
    color: var(--ink-900, #102137);
    margin-bottom: var(--space-2xs, 0.45rem);
    line-height: 1.2;
}

.consent-banner__text {
    font-size: var(--font-step--1, 0.9rem);
    color: var(--ink-700, #2f455c);
    max-width: 58ch;
    line-height: 1.5;
}

.consent-link {
    color: var(--teal-700, #0f6a6f);
    font-weight: 650;
}

.consent-banner__actions {
    display: flex;
    gap: var(--space-xs, 0.7rem);
    flex-wrap: wrap;
    align-items: center;
    flex-shrink: 0;
}

/* ── Consent panel (slide-in drawer) ──────────────────────────────────────── */
.consent-panel {
    position: fixed;
    inset: 0;
    z-index: 950;
    display: flex;
    justify-content: flex-end;
    visibility: hidden;
    pointer-events: none;
    /* Defer visibility change until after slide-out completes */
    transition: visibility 0ms 320ms;
}

.consent-panel.is-open {
    visibility: visible;
    pointer-events: auto;
    transition: visibility 0ms 0ms;
}

.consent-panel__overlay {
    position: absolute;
    inset: 0;
    background: rgba(8, 22, 42, 0.44);
    opacity: 0;
    transition: opacity 320ms ease;
    cursor: pointer;
}

.consent-panel.is-open .consent-panel__overlay {
    opacity: 1;
}

.consent-panel__drawer {
    position: relative;
    z-index: 1;
    width: min(28rem, 94vw);
    height: 100%;
    display: flex;
    flex-direction: column;
    background: #fcfaf6;
    box-shadow: -0.8rem 0 3rem rgba(8, 22, 42, 0.2);
    transform: translateX(100%);
    transition: transform 320ms cubic-bezier(0.4, 0, 0.2, 1);
    overflow: hidden;
}

.consent-panel.is-open .consent-panel__drawer {
    transform: translateX(0);
}

.consent-panel__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-sm, 0.9rem);
    padding: var(--space-sm, 0.9rem) var(--space-md, 1.2rem);
    border-bottom: 1px solid rgba(14, 47, 79, 0.1);
    flex-shrink: 0;
}

.consent-panel__title {
    font-size: var(--font-step-1, 1.25rem);
    font-family: "Source Serif 4 VF", Georgia, serif;
    color: var(--ink-900, #102137);
    line-height: 1.2;
}

.consent-panel__close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: var(--radius-sm, 0.65rem);
    border: 1px solid rgba(14, 47, 79, 0.14);
    background: transparent;
    color: var(--ink-700, #2f455c);
    cursor: pointer;
    flex-shrink: 0;
    transition: background 140ms ease;
    font-family: inherit;
}

.consent-panel__close:hover {
    background: rgba(14, 47, 79, 0.07);
    color: var(--ink-900, #102137);
}

.consent-panel__close:focus-visible {
    outline: 3px solid var(--focus, #f0c767);
    outline-offset: 2px;
}

.consent-panel__body {
    flex: 1;
    overflow-y: auto;
    padding: 0 var(--space-md, 1.2rem);
}

.consent-panel__footer {
    display: flex;
    gap: var(--space-xs, 0.7rem);
    flex-wrap: wrap;
    padding: var(--space-sm, 0.9rem) var(--space-md, 1.2rem);
    border-top: 1px solid rgba(14, 47, 79, 0.1);
    flex-shrink: 0;
    justify-content: flex-end;
    align-items: center;
}

/* ── Category toggle rows ─────────────────────────────────────────────────── */
.consent-toggle-row {
    display: flex;
    align-items: flex-start;
    gap: var(--space-sm, 0.9rem);
    padding-block: var(--space-sm, 0.9rem);
    border-bottom: 1px solid rgba(14, 47, 79, 0.07);
}

.consent-toggle-row:last-child {
    border-bottom: none;
}

.consent-toggle-row--locked {
    opacity: 0.72;
}

.consent-toggle-info {
    flex: 1;
    min-width: 0;
}

.consent-toggle-label {
    display: block;
    font-weight: 660;
    color: var(--ink-900, #102137);
    font-size: var(--font-step-0, 1rem);
    margin-bottom: 0.3rem;
    line-height: 1.25;
}

.consent-toggle-desc {
    font-size: var(--font-step--1, 0.9rem);
    color: var(--ink-500, #55697f);
    line-height: 1.45;
    max-width: 36ch;
}

/* ── Switch button (role="switch") ────────────────────────────────────────── */
.consent-switch {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0.15rem 0;
    flex-shrink: 0;
    font-family: inherit;
}

.consent-switch:focus-visible {
    outline: 3px solid var(--focus, #f0c767);
    outline-offset: 3px;
    border-radius: 999px;
}

.consent-switch[disabled] {
    cursor: default;
}

.consent-switch__track {
    position: relative;
    width: 3rem;
    height: 1.65rem;
    border-radius: 999px;
    background: rgba(14, 47, 79, 0.2);
    border: 2px solid rgba(14, 47, 79, 0.14);
    transition: background 200ms ease, border-color 200ms ease;
    flex-shrink: 0;
}

.consent-switch--on .consent-switch__track,
.consent-switch[aria-checked="true"] .consent-switch__track {
    background: var(--teal-600, #1f7f87);
    border-color: var(--teal-700, #0f6a6f);
}

.consent-switch__thumb {
    position: absolute;
    top: 2px;
    left: 2px;
    width: 1.25rem;
    height: 1.25rem;
    border-radius: 50%;
    background: #ffffff;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.28);
    transition: transform 200ms cubic-bezier(0.4, 0, 0.2, 1);
}

.consent-switch--on .consent-switch__thumb,
.consent-switch[aria-checked="true"] .consent-switch__thumb {
    /* track width (3rem) - thumb width (1.25rem) - 2*offset (4px) ≈ 1.35rem */
    transform: translateX(1.35rem);
}

.consent-switch__status-on,
.consent-switch__status-off {
    font-size: 0.7rem;
    font-weight: 660;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    min-width: 3.2ch;
}

.consent-switch__status-on {
    color: var(--teal-700, #0f6a6f);
    display: none;
}

.consent-switch__status-off {
    color: var(--ink-500, #55697f);
    display: inline;
}

.consent-switch--on .consent-switch__status-on,
.consent-switch[aria-checked="true"] .consent-switch__status-on {
    display: inline;
}

.consent-switch--on .consent-switch__status-off,
.consent-switch[aria-checked="true"] .consent-switch__status-off {
    display: none;
}

/* Disabled/locked (necessary) switch always shows "Actif" */
.consent-switch[disabled] .consent-switch__status-off {
    display: none;
}

.consent-switch[disabled] .consent-switch__status-on {
    display: inline;
    color: var(--teal-700, #0f6a6f);
}

/* ── Persistent "Gérer mes cookies" manager button ────────────────────────── */
.consent-manager-btn {
    position: fixed;
    bottom: 1.1rem;
    left: 1.1rem;
    z-index: 880;
    display: inline-flex;
    align-items: center;
    gap: 0.42rem;
    padding: 0.5rem 0.85rem;
    border-radius: 999px;
    border: 1px solid rgba(14, 47, 79, 0.18);
    background: rgba(252, 250, 246, 0.95);
    color: var(--ink-700, #2f455c);
    font-size: 0.78rem;
    font-weight: 660;
    font-family: inherit;
    letter-spacing: 0.01em;
    cursor: pointer;
    box-shadow: var(--shadow-sm, 0 0.4rem 0.9rem rgba(9, 25, 44, 0.08));
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    transition: transform 140ms ease, box-shadow 140ms ease, color 140ms ease;
}

.consent-manager-btn:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md, 0 0.8rem 1.9rem rgba(8, 22, 42, 0.14));
    color: var(--teal-700, #0f6a6f);
}

.consent-manager-btn:focus-visible {
    outline: 3px solid var(--focus, #f0c767);
    outline-offset: 2px;
}

/* Hide manager button while the banner is active (banner has its own "Paramétrer") */
.banner-active .consent-manager-btn {
    visibility: hidden;
    pointer-events: none;
}

/* ── Responsive ───────────────────────────────────────────────────────────── */
@media (max-width: 40rem) {
    .consent-banner__inner {
        flex-direction: column;
        align-items: flex-start;
    }

    .consent-banner__actions {
        width: 100%;
    }

    .consent-btn--primary,
    .consent-btn--secondary {
        flex: 1;
        justify-content: center;
    }

    .consent-panel__footer {
        flex-direction: column;
    }

    .consent-panel__footer .consent-btn {
        width: 100%;
        justify-content: center;
    }

    .consent-manager-btn span {
        display: none; /* icon only on very small screens */
    }
}

/* ── Reduced motion ───────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    .consent-banner,
    .consent-panel,
    .consent-panel__drawer,
    .consent-panel__overlay,
    .consent-switch__track,
    .consent-switch__thumb,
    .consent-btn,
    .consent-manager-btn {
        transition: none;
    }

    .consent-banner {
        transform: none;
    }

    .consent-panel__drawer {
        transform: none;
    }
}