:root {
    --cookie-bg: #f7f5f1;
    --cookie-surface: #ffffff;
    --cookie-surface-soft: #f0ece5;

    --cookie-text: #211f1c;
    --cookie-muted: #6d6861;

    --cookie-border: rgba(33, 31, 28, 0.12);

    --cookie-accent: #8a5f45;
    --cookie-accent-dark: #5e3e2d;

    --cookie-shadow:
        0 24px 60px rgba(42, 35, 29, 0.16);

    --cookie-radius-lg: 28px;
    --cookie-radius-md: 18px;
}

[hidden] {
    display: none !important;
}

/* =========================
   ACCESSIBILITÉ
========================= */

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}


/* =========================
   BANDEAU PRINCIPAL
========================= */

.cookie-consent {
    position: fixed;
    left: 24px;
    right: 24px;
    bottom: 24px;

    z-index: 9999;

    opacity: 0;
    visibility: hidden;

    transform: translateY(30px);

    transition:
        opacity 0.3s ease,
        transform 0.3s ease,
        visibility 0.3s ease;
}


.cookie-consent.is-visible {
    opacity: 1;
    visibility: visible;

    transform: translateY(0);
}


.cookie-consent__inner {
    width: min(100%, 1180px);

    margin-inline: auto;

    padding: 30px;

    display: grid;

    grid-template-columns:
        minmax(0, 1fr)
        auto;

    gap: 40px;

    align-items: center;

    border:
        1px solid
        var(--cookie-border);

    border-radius:
        var(--cookie-radius-lg);

    background:
        rgba(255, 255, 255, 0.94);

    backdrop-filter:
        blur(18px);

    -webkit-backdrop-filter:
        blur(18px);

    box-shadow:
        var(--cookie-shadow);
}


/* =========================
   CONTENU
========================= */

.cookie-consent__content {
    max-width: 720px;
}


.cookie-consent__eyebrow {
    display: block;

    margin-bottom: 10px;

    color:
        var(--cookie-accent);

    font-size: 0.72rem;

    font-weight: 800;

    letter-spacing: 0.14em;

    text-transform: uppercase;
}


.cookie-consent h2,
.cookie-settings h2 {
    margin:
        0 0 14px;

    color:
        var(--cookie-text);

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size:
        clamp(
            1.7rem,
            3vw,
            2.6rem
        );

    font-weight: 500;

    letter-spacing:
        -0.035em;

    line-height: 1.1;
}


.cookie-consent p {
    margin:
        0 0 10px;

    color:
        var(--cookie-muted);

    line-height: 1.65;
}


.cookie-consent__privacy {
    font-size:
        0.88rem;
}


.cookie-consent__content a {
    display:
        inline-block;

    margin-top:
        8px;

    color:
        var(--cookie-accent-dark);

    font-size:
        0.86rem;

    font-weight: 700;

    text-decoration:
        underline;

    text-underline-offset:
        4px;
}


/* =========================
   ACTIONS
========================= */

.cookie-consent__actions {
    display:
        flex;

    flex-wrap:
        wrap;

    justify-content:
        flex-end;

    gap:
        12px;
}


/* =========================
   BOUTONS
========================= */

.cookie-btn {
    min-height:
        48px;

    padding:
        12px
        20px;

    border:
        1px solid
        transparent;

    border-radius:
        999px;

    font: inherit;

    font-size:
        0.88rem;

    font-weight:
        700;

    cursor:
        pointer;

    transition:
        transform 0.2s ease,
        background-color 0.2s ease,
        border-color 0.2s ease,
        color 0.2s ease;
}


.cookie-btn:hover {
    transform:
        translateY(-2px);
}


.cookie-btn--primary {
    background:
        var(--cookie-text);

    color:
        #ffffff;
}


.cookie-btn--primary:hover {
    background:
        var(--cookie-accent-dark);
}


.cookie-btn--secondary {
    border-color:
        var(--cookie-border);

    background:
        var(--cookie-surface);

    color:
        var(--cookie-text);
}


.cookie-btn--secondary:hover {
    border-color:
        rgba(
            138,
            95,
            69,
            0.36
        );

    background:
        var(--cookie-surface-soft);
}


.cookie-btn:focus-visible,
.cookie-settings__close:focus-visible,
.cookie-switch input:focus-visible
+ .cookie-switch__slider {
    outline:
        3px solid
        rgba(
            138,
            95,
            69,
            0.28
        );

    outline-offset:
        3px;
}


/* =========================
   PANNEAU DE PRÉFÉRENCES
========================= */

.cookie-settings {
    position:
        fixed;

    inset:
        0;

    z-index:
        10000;

    display:
        grid;

    place-items:
        center;

    padding:
        24px;

    background:
        rgba(
            20,
            18,
            16,
            0.46
        );

    backdrop-filter:
        blur(10px);

    -webkit-backdrop-filter:
        blur(10px);

    opacity:
        0;

    visibility:
        hidden;

    transition:
        opacity 0.3s ease,
        visibility 0.3s ease;
}


.cookie-settings.is-visible {
    opacity:
        1;

    visibility:
        visible;
}


/* =========================
   CONTENEUR MODAL
========================= */

.cookie-settings__panel {
    width:
        min(
            100%,
            720px
        );

    max-height:
        min(
            86vh,
            820px
        );

    overflow-y:
        auto;

    border:
        1px solid
        var(--cookie-border);

    border-radius:
        var(--cookie-radius-lg);

    background:
        var(--cookie-surface);

    box-shadow:
        var(--cookie-shadow);

    transform:
        translateY(25px)
        scale(0.98);

    transition:
        transform 0.3s ease;
}


.cookie-settings.is-visible
.cookie-settings__panel {
    transform:
        translateY(0)
        scale(1);
}


/* =========================
   HEADER MODAL
========================= */

.cookie-settings__header {
    padding:
        32px;

    display:
        flex;

    align-items:
        flex-start;

    justify-content:
        space-between;

    gap:
        30px;

    border-bottom:
        1px solid
        var(--cookie-border);
}


.cookie-settings__close {
    width:
        42px;

    height:
        42px;

    flex:
        0 0 auto;

    display:
        grid;

    place-items:
        center;

    border:
        1px solid
        var(--cookie-border);

    border-radius:
        50%;

    background:
        var(--cookie-surface);

    color:
        var(--cookie-text);

    font-size:
        1.4rem;

    line-height:
        1;

    cursor:
        pointer;

    transition:
        background-color 0.2s ease,
        transform 0.2s ease;
}


.cookie-settings__close:hover {
    background:
        var(--cookie-surface-soft);

    transform:
        rotate(6deg);
}


/* =========================
   CATÉGORIES
========================= */

.cookie-category {
    padding:
        26px
        32px;

    display:
        grid;

    grid-template-columns:
        minmax(
            0,
            1fr
        )
        auto;

    gap:
        28px;

    align-items:
        center;

    border-bottom:
        1px solid
        var(--cookie-border);
}


.cookie-category h3 {
    margin:
        0 0 8px;

    color:
        var(--cookie-text);

    font-size:
        1rem;

    font-weight:
        800;
}


.cookie-category p {
    margin:
        0;

    color:
        var(--cookie-muted);

    font-size:
        0.88rem;

    line-height:
        1.55;
}


/* =========================
   TOUJOURS ACTIFS
========================= */

.cookie-required {
    padding:
        7px
        10px;

    border-radius:
        999px;

    background:
        var(--cookie-surface-soft);

    color:
        var(--cookie-accent-dark);

    font-size:
        0.74rem;

    font-weight:
        800;

    white-space:
        nowrap;
}


/* =========================
   SWITCH
========================= */

.cookie-switch {
    position:
        relative;

    width:
        54px;

    height:
        30px;

    flex:
        0 0 auto;

    display:
        inline-block;
}


.cookie-switch input {
    position:
        absolute;

    opacity:
        0;

    pointer-events:
        none;
}


.cookie-switch__slider {
    position:
        absolute;

    inset:
        0;

    border-radius:
        999px;

    background:
        #d6d1ca;

    cursor:
        pointer;

    transition:
        background-color 0.25s ease;
}


.cookie-switch__slider::before {
    content:
        "";

    position:
        absolute;

    top:
        4px;

    left:
        4px;

    width:
        22px;

    height:
        22px;

    border-radius:
        50%;

    background:
        #ffffff;

    box-shadow:
        0 2px 8px
        rgba(
            0,
            0,
            0,
            0.16
        );

    transition:
        transform 0.25s ease;
}


.cookie-switch
input:checked
+ .cookie-switch__slider {
    background:
        var(--cookie-accent);
}


.cookie-switch
input:checked
+ .cookie-switch__slider::before {
    transform:
        translateX(24px);
}


/* =========================
   FOOTER MODAL
========================= */

.cookie-settings__footer {
    padding:
        24px
        32px;

    display:
        flex;

    justify-content:
        flex-end;

    gap:
        12px;

    background:
        var(--cookie-bg);
}


/* =========================
   MOBILE
========================= */

@media screen and (max-width: 900px) {

    .cookie-consent {
        left:
            14px;

        right:
            14px;

        bottom:
            14px;
    }


    .cookie-consent__inner {
        grid-template-columns:
            1fr;

        gap:
            24px;

        padding:
            24px;
    }


    .cookie-consent__actions {
        justify-content:
            flex-start;
    }

}


@media screen and (max-width: 768px) {

    .cookie-consent__inner {
        max-height:
            calc(
                100vh - 28px
            );

        overflow-y:
            auto;

        border-radius:
            22px;
    }


    .cookie-consent__actions {
        display:
            grid;

        grid-template-columns:
            1fr;
    }


    .cookie-btn {
        width:
            100%;
    }


    .cookie-settings {
        padding:
            12px;
    }


    .cookie-settings__panel {
        max-height:
            calc(
                100vh - 24px
            );

        border-radius:
            22px;
    }


    .cookie-settings__header {
        padding:
            24px
            20px;
    }


    .cookie-category {
        padding:
            22px
            20px;

        grid-template-columns:
            1fr;

        gap:
            16px;
    }


    .cookie-required {
        width:
            fit-content;
    }


    .cookie-settings__footer {
        padding:
            20px;

        display:
            grid;

        grid-template-columns:
            1fr;
    }

}


/* =========================
   RÉDUCTION DES ANIMATIONS
========================= */

@media
(prefers-reduced-motion: reduce) {

    .cookie-consent,
    .cookie-settings,
    .cookie-settings__panel,
    .cookie-btn,
    .cookie-settings__close,
    .cookie-switch__slider,
    .cookie-switch__slider::before {
        transition:
            none;
    }

}