/* ============================================
   PRAESTIA — GESTION DES COOKIES
============================================ */


/* ---------- OVERLAY ---------- */

.cookie-overlay {
    position: fixed;

    inset: 0;

    z-index: 1998;

    background-color: rgba(20, 40, 65, 0.42);

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

    opacity: 0;
    visibility: hidden;

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


.cookie-overlay.is-visible {
    opacity: 1;
    visibility: visible;
}


/* ============================================
   BANNIERE PRINCIPALE
============================================ */

.cookie-banner {
    position: fixed;

    left: 50%;
    bottom: 1.5rem;

    z-index: 1999;

    width: calc(100% - 3rem);
    max-width: 1120px;

    transform:
        translate(-50%, calc(100% + 4rem));

    padding:
        clamp(1.5rem, 3vw, 2.4rem);

    background-color:
        var(--color-prussian-blue);

    border:
        1px solid rgba(175, 217, 255, 0.22);

    box-shadow:
        0 24px 60px rgba(20, 40, 65, 0.24);

    opacity: 0;
    visibility: hidden;

    transition:
        opacity 0.45s ease,
        transform 0.45s cubic-bezier(0.2, 0.65, 0.3, 1),
        visibility 0.45s ease;
}


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

    transform:
        translate(-50%, 0);
}


.cookie-banner__content {
    display: grid;

    gap: var(--space-md);
}


.cookie-banner__text {
    display: grid;

    gap: 0.8rem;
}


.cookie-banner__eyebrow {
    margin: 0;

    font-size: 0.65rem;
    font-weight: 600;

    letter-spacing: 0.18em;

    text-transform: uppercase;

    color: var(--color-icy-blue);
}


.cookie-banner h2 {
    margin: 0;

    max-width: 40rem;

    font-family: var(--font-title);

    font-size:
        clamp(1.55rem, 2.8vw, 2.2rem);

    font-weight: 400;

    line-height: 1.15;

    color: var(--color-soft-light);
}


.cookie-banner__description {
    margin: 0;

    max-width: 50rem;

    font-size: 0.85rem;

    line-height: 1.75;

    color:
        rgba(250, 250, 250, 0.72);
}


.cookie-banner__description a {
    font-size: inherit;

    font-weight: 600;

    letter-spacing: normal;

    text-transform: none;

    color: var(--color-icy-blue);

    text-decoration: underline;

    text-underline-offset: 0.2rem;
}


/* ---------- BOUTONS ---------- */

.cookie-banner__actions {
    display: flex;

    flex-wrap: wrap;

    gap: 0.7rem;
}


.cookie-button {
    display: inline-flex;

    align-items: center;
    justify-content: center;

    min-height: 2.8rem;

    padding:
        0.75rem
        1.2rem;

    font-family: var(--font-body);

    font-size: 0.64rem;
    font-weight: 600;

    letter-spacing: 0.12em;

    text-transform: uppercase;

    cursor: pointer;

    border-radius: 0;

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


/*
Les boutons accepter/refuser ont volontairement
le même poids visuel.
*/

.cookie-button--decision {
    background-color:
        var(--color-soft-light);

    border:
        1px solid var(--color-soft-light);

    color:
        var(--color-prussian-blue);
}


.cookie-button--decision:hover {
    background-color:
        var(--color-icy-blue);

    border-color:
        var(--color-icy-blue);

    color:
        var(--color-prussian-blue);

    transform:
        translateY(-2px);
}


.cookie-button--settings {
    background-color: transparent;

    border:
        1px solid rgba(250, 250, 250, 0.45);

    color:
        var(--color-soft-light);
}


.cookie-button--settings:hover {
    border-color:
        var(--color-icy-blue);

    color:
        var(--color-icy-blue);

    transform:
        translateY(-2px);
}


/* ============================================
   FENETRE DE PERSONNALISATION
============================================ */

.cookie-preferences {
    position: fixed;

    left: 50%;
    top: 50%;

    z-index: 2000;

    width: calc(100% - 3rem);
    max-width: 620px;

    max-height: calc(100vh - 3rem);

    overflow-y: auto;

    transform:
        translate(-50%, -46%);

    padding:
        clamp(1.6rem, 4vw, 2.7rem);

    background-color:
        var(--color-soft-light);

    border:
        1px solid rgba(20, 40, 65, 0.15);

    box-shadow:
        0 30px 80px rgba(20, 40, 65, 0.28);

    opacity: 0;
    visibility: hidden;

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


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

    transform:
        translate(-50%, -50%);
}


.cookie-preferences__header {
    display: flex;

    align-items: flex-start;
    justify-content: space-between;

    gap: var(--space-md);

    margin-bottom: var(--space-md);
}


.cookie-preferences__header > div {
    display: grid;

    gap: 0.6rem;
}


.cookie-preferences__eyebrow {
    margin: 0;

    font-size: 0.62rem;
    font-weight: 600;

    letter-spacing: 0.18em;

    text-transform: uppercase;

    color:
        var(--color-crushed-berry);
}


.cookie-preferences h2 {
    margin: 0;

    font-family: var(--font-title);

    font-size:
        clamp(1.7rem, 4vw, 2.5rem);

    font-weight: 400;

    line-height: 1.1;

    color:
        var(--color-prussian-blue);
}


.cookie-close {
    display: flex;

    align-items: center;
    justify-content: center;

    flex-shrink: 0;

    width: 2.5rem;
    height: 2.5rem;

    padding: 0;

    border:
        1px solid var(--color-line);

    border-radius: 50%;

    background-color: transparent;

    font-size: 1.2rem;

    color:
        var(--color-prussian-blue);

    cursor: pointer;
}


.cookie-preferences__intro {
    margin-bottom: var(--space-md);

    font-size: 0.88rem;

    line-height: 1.75;

    color:
        rgba(25, 26, 30, 0.75);
}


/* ---------- CATEGORIES ---------- */

.cookie-category {
    display: grid;

    gap: 0.65rem;

    padding:
        1.4rem 0;

    border-top:
        1px solid var(--color-line);
}


.cookie-category:last-of-type {
    border-bottom:
        1px solid var(--color-line);
}


.cookie-category__header {
    display: flex;

    align-items: center;
    justify-content: space-between;

    gap: var(--space-md);
}


.cookie-category h3 {
    margin: 0;

    font-family: var(--font-title);

    font-size: 1.15rem;

    font-weight: 400;

    color:
        var(--color-prussian-blue);
}


.cookie-category p {
    margin: 0;

    max-width: none;

    font-size: 0.78rem;

    line-height: 1.7;

    color:
        rgba(25, 26, 30, 0.68);
}


.cookie-required {
    font-size: 0.58rem;
    font-weight: 600;

    letter-spacing: 0.12em;

    text-transform: uppercase;

    color:
        var(--color-crushed-berry);
}


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

.cookie-switch {
    position: relative;

    display: inline-flex;

    width: 3rem;
    height: 1.65rem;

    flex-shrink: 0;
}


.cookie-switch input {
    position: absolute;

    width: 1px;
    height: 1px;

    opacity: 0;
}


.cookie-switch span {
    position: absolute;

    inset: 0;

    border:
        1px solid rgba(20, 40, 65, 0.25);

    background-color:
        rgba(20, 40, 65, 0.08);

    cursor: pointer;

    transition:
        background-color 0.25s ease,
        border-color 0.25s ease;
}


.cookie-switch span::before {
    content: "";

    position: absolute;

    top: 50%;
    left: 0.25rem;

    width: 1.05rem;
    height: 1.05rem;

    transform:
        translateY(-50%);

    background-color:
        var(--color-prussian-blue);

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


.cookie-switch input:checked + span {
    background-color:
        var(--color-prussian-blue);

    border-color:
        var(--color-prussian-blue);
}


.cookie-switch input:checked + span::before {
    transform:
        translate(1.3rem, -50%);

    background-color:
        var(--color-soft-light);
}


.cookie-switch input:focus-visible + span {
    outline:
        2px solid var(--color-crushed-berry);

    outline-offset: 3px;
}


/* ---------- ACTIONS MODALE ---------- */

.cookie-preferences__actions {
    display: flex;

    justify-content: flex-end;

    margin-top: var(--space-md);
}


.cookie-save {
    background-color:
        var(--color-crushed-berry);

    border:
        1px solid var(--color-crushed-berry);

    color:
        var(--color-soft-light);
}


.cookie-save:hover {
    background-color:
        var(--color-prussian-blue);

    border-color:
        var(--color-prussian-blue);
}


/* ============================================
   LIEN FOOTER
============================================ */

.cookie-manage-link {
    width: fit-content;

    padding: 0;

    background: none;

    border: 0;

    font-family: var(--font-body);

    font-size: 0.68rem;
    font-weight: 600;

    letter-spacing: 0.1em;

    text-transform: uppercase;

    color:
        var(--color-crushed-berry);

    cursor: pointer;
}


.cookie-manage-link:hover {
    color:
        var(--color-prussian-blue);
}


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

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

    .cookie-banner {
        bottom: 0.8rem;

        width:
            calc(100% - 1.6rem);

        padding:
            1.5rem 1.25rem;
    }


    .cookie-banner__actions {
        display: grid;

        grid-template-columns: 1fr;
    }


    .cookie-button {
        width: 100%;
    }


    .cookie-preferences {
        width:
            calc(100% - 1.6rem);

        max-height:
            calc(100vh - 1.6rem);

        padding:
            1.6rem 1.25rem;
    }


    .cookie-preferences__actions {
        display: block;
    }


    .cookie-save {
        width: 100%;
    }

}


/* ============================================
   REDUCTION DES ANIMATIONS
============================================ */

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

    .cookie-banner,
    .cookie-overlay,
    .cookie-preferences,
    .cookie-button,
    .cookie-switch span,
    .cookie-switch span::before {
        transition: none;
    }

}