/* ============================================
   PRAESTIA — POLITIQUE DE CONFIDENTIALITE
============================================ */


/* ---------- VARIABLES ---------- */

:root {

    /* PALETTE */

    --color-charcoal-smoke: #191A1E;
    --color-crushed-berry: #871111;
    --color-icy-blue: #AFD9FF;
    --color-prussian-blue: #142841;
    --color-soft-light: #FAFAFA;


    /* COULEURS FONCTIONNELLES */

    --color-background: var(--color-soft-light);
    --color-text: var(--color-charcoal-smoke);
    --color-primary: var(--color-crushed-berry);
    --color-dark: var(--color-prussian-blue);
    --color-accent: var(--color-icy-blue);

    --color-line: rgba(20, 40, 65, 0.15);


    /* TYPOGRAPHIES */

    --font-title: "Lora", Georgia, serif;
    --font-body: "Montserrat", Arial, sans-serif;
    --font-signature: "Mrs Saint Delafield", cursive;


    /* ESPACEMENTS */

    --space-xs: 0.75rem;
    --space-sm: 1.25rem;
    --space-md: 2rem;
    --space-lg: 3.25rem;
    --space-xl: 5.5rem;

    --container-padding: clamp(1.25rem, 4vw, 3rem);
}


/* ============================================
   RESET
============================================ */

*,
*::before,
*::after {
    box-sizing: border-box;
}


html {
    scroll-behavior: smooth;
    scroll-padding-top: 7rem;
}


body {
    margin: 0;

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

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

    color: var(--color-text);

    line-height: 1.7;

    -webkit-font-smoothing: antialiased;
}


img {
    display: block;

    max-width: 100%;
    height: auto;
}


a {
    color: inherit;

    text-decoration: none;
}


ul {
    margin: 0;
}


::selection {
    background-color: var(--color-primary);

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


a:focus-visible,
button:focus-visible {
    outline: 2px solid var(--color-primary);

    outline-offset: 4px;
}


/* ============================================
   TYPOGRAPHIE
============================================ */

h1,
h2,
h3 {
    margin: 0;

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

    font-weight: 400;

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


p {
    margin: 0;

    font-size: clamp(0.95rem, 1.2vw, 1.05rem);

    line-height: 1.85;

    letter-spacing: 0.005em;

    color: var(--color-charcoal-smoke);
}


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

.btn {
    display: inline-flex;

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

    width: fit-content;

    min-height: 3rem;

    padding: 0.85rem 1.5rem;

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

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

    line-height: 1.2;

    letter-spacing: 0.15em;

    text-transform: uppercase;

    border: 1px solid transparent;

    border-radius: 0;

    cursor: pointer;

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


.btn-primary {
    background-color: var(--color-crushed-berry);

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

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


.btn-primary:hover {
    background-color: var(--color-prussian-blue);

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

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

    transform: translateY(-2px);
}


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

header {
    position: fixed;

    top: 0;
    left: 0;

    width: 100%;

    z-index: 999;

    padding: 0.75rem var(--container-padding);

    transition:
        padding 0.35s ease;
}


/* ============================================
   NAVIGATION
============================================ */

nav {
    position: relative;

    max-width: 1220px;

    margin: 0 auto;

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

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

    box-shadow:
        0 12px 35px rgba(20, 40, 65, 0.10);

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

    transition:
        background-color 0.35s ease,
        border-color 0.35s ease,
        box-shadow 0.35s ease;
}


#navigation {
    display: flex;

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

    min-height: 4.65rem;

    padding: 0 1.5rem;

    gap: 1.75rem;

    transition:
        min-height 0.35s ease;
}


/* LOGO */

#navLogo {
    flex: 1;

    display: flex;

    align-items: center;
}


#navLogo a {
    display: flex;

    align-items: center;

    line-height: 0;
}


#navLogoImage {
    width: 118px;

    height: auto;

    object-fit: contain;

    filter: brightness(0) invert(1);

    transition:
        width 0.35s ease,
        opacity 0.35s ease;
}


/* LIENS DESKTOP */

#navLinks {
    flex: 2;
}


#navLinks ul {
    display: flex;

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

    gap: clamp(1.4rem, 2.2vw, 2rem);

    margin: 0;

    padding: 0;

    list-style: none;
}


#navLinks a {
    position: relative;

    font-size: 0.76rem;
    font-weight: 550;

    letter-spacing: 0.12em;

    text-transform: uppercase;

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


#navLinks a::after {
    content: "";

    position: absolute;

    left: 0;
    bottom: -0.45rem;

    width: 0;
    height: 1px;

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

    transition:
        width 0.3s ease;
}


#navLinks a:hover::after {
    width: 100%;
}


/* CTA DESKTOP */

#navBtn {
    flex: 1;

    display: flex;

    justify-content: flex-end;
}


#navBtn .btn {
    min-height: 2.65rem;

    padding: 0.7rem 1.15rem;

    font-size: 0.65rem;

    letter-spacing: 0.11em;
}


#navBtn .btn-primary {
    background-color: var(--color-soft-light);

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

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


#navBtn .btn-primary:hover {
    background-color: var(--color-prussian-blue);

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

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


/* MENU MOBILE CACHE PAR DEFAUT */

#menuToggle,
#mobileMenu {
    display: none;
}


/* ============================================
   NAVBAR APRES SCROLL
============================================ */

header.is-scrolled {
    padding-top: 0.45rem;

    padding-bottom: 0.45rem;
}


header.is-scrolled nav {
    background-color:
        rgba(250, 250, 250, 0.86);

    border:
        1px solid rgba(135, 17, 17, 0.35);

    box-shadow:
        0 10px 30px rgba(20, 40, 65, 0.08);

    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
}


header.is-scrolled #navigation {
    min-height: 4.15rem;
}


header.is-scrolled #navLinks a {
    color: var(--color-prussian-blue);
}


header.is-scrolled #navLinks a::after {
    background-color: var(--color-crushed-berry);
}


header.is-scrolled #navLogoImage {
    width: 50px;

    height: 2.7rem;

    object-fit: contain;

    object-position: center;

    filter: none;
}


header.is-scrolled #navBtn .btn-primary {
    background-color: var(--color-crushed-berry);

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

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


header.is-scrolled #navBtn .btn-primary:hover {
    background-color: var(--color-prussian-blue);

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


/* ============================================
   PAGE POLITIQUE DE CONFIDENTIALITE
============================================ */

main {
    width: 100%;

    max-width: 980px;

    margin: 0 auto;

    padding:
        clamp(10rem, 14vw, 12rem)
        var(--container-padding)
        clamp(6rem, 9vw, 9rem);
}


/* GRAND TITRE */

main > h1 {
    max-width: 850px;

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

    font-size:
        clamp(3rem, 6.5vw, 5.5rem);

    line-height: 1.02;

    letter-spacing: -0.035em;

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


/* DATE
   Fonctionne avec ton H2 actuel */

main > h2 {
    display: flex;

    align-items: center;

    gap: 0.8rem;

    margin-bottom:
        clamp(3.5rem, 6vw, 5.5rem);

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

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

    line-height: 1.4;

    letter-spacing: 0.16em;

    text-transform: uppercase;

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


main > h2::before {
    content: "";

    width: 2rem;
    height: 1px;

    flex-shrink: 0;

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


/* SI TU UTILISES PLUS TARD .legalUpdate */

.legalUpdate {
    display: flex;

    align-items: center;

    gap: 0.8rem;

    margin-bottom:
        clamp(3.5rem, 6vw, 5.5rem);

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

    line-height: 1.4;

    letter-spacing: 0.16em;

    text-transform: uppercase;

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


.legalUpdate::before {
    content: "";

    width: 2rem;
    height: 1px;

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


/* INTRODUCTION */

main > h2 + p,
main > .legalUpdate + p {
    max-width: 780px;

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

    font-size:
        clamp(1.15rem, 2vw, 1.4rem);

    line-height: 1.7;

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


main > h2 + p + p,
main > .legalUpdate + p + p {
    max-width: 760px;

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

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


/* ============================================
   SECTIONS JURIDIQUES
============================================ */

main > h3 {
    position: relative;

    max-width: 780px;

    margin-top:
        clamp(4rem, 7vw, 6rem);

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

    padding-top: var(--space-md);

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

    font-size:
        clamp(1.45rem, 2.7vw, 2.05rem);

    line-height: 1.2;

    letter-spacing: -0.01em;

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


/* PETIT ACCENT SUR LA LIGNE */

main > h3::before {
    content: "";

    position: absolute;

    top: -1px;
    left: 0;

    width: 4rem;
    height: 1px;

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


/* PARAGRAPHES */

main > p:not(.legalUpdate) {
    max-width: 760px;

    margin-bottom: var(--space-sm);

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


/* TEXTE DIRECTEMENT APRES UN TITRE */

main > h3 + p {
    margin-top: 0;
}


/* ============================================
   LISTES
============================================ */

main > ul {
    max-width: 730px;

    margin:
        var(--space-sm)
        0
        var(--space-md);

    padding: 0;

    list-style: none;
}


main > ul li {
    position: relative;

    padding:
        0.55rem
        0
        0.55rem
        1.6rem;

    font-size:
        clamp(0.95rem, 1.2vw, 1.05rem);

    line-height: 1.75;

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


main > ul li::before {
    content: "";

    position: absolute;

    left: 0;
    top: 1.35rem;

    width: 0.7rem;
    height: 1px;

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


/* ============================================
   LIENS DANS LE TEXTE
============================================ */

main p a {
    font-size: inherit;
    font-weight: 600;

    letter-spacing: normal;

    text-transform: none;

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

    text-decoration: underline;

    text-decoration-thickness: 1px;

    text-underline-offset: 0.25rem;

    transition:
        color 0.25s ease;
}


main p a:hover {
    color: var(--color-prussian-blue);
}


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

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

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


#pageDown {
    padding:
        var(--space-lg)
        var(--container-padding)
        var(--space-md);
}


#pageDown > div {
    width: 100%;

    max-width: 1220px;

    margin: 0 auto;

    display: grid;

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


/* LOGO */

#pageDown img {
    width: 110px;
}


/* LIENS PRINCIPAUX */

#pageDown > div > div:nth-child(2) {
    display: flex;

    flex-wrap: wrap;

    gap: 1rem 2rem;
}


#pageDown a {
    width: fit-content;

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

    letter-spacing: 0.1em;

    text-transform: uppercase;

    color: var(--color-charcoal-smoke);

    transition:
        color 0.25s ease;
}


#pageDown a:hover {
    color: var(--color-crushed-berry);
}


/* PARTIE LEGALE */

#pageDown > div > div:last-child {
    display: flex;

    flex-wrap: wrap;

    align-items: center;

    gap: 0.8rem 2rem;

    padding-top: var(--space-md);

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


#pageDown p {
    margin-right: auto;

    font-size: 0.7rem;

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


#pageDown #rgpd a {
    font-weight: 600;

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


#pageDown #rgpd a:hover {
    color: var(--color-prussian-blue);
}


/* ============================================
   DESKTOP
============================================ */

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

    #pageDown > div {
        grid-template-columns:
            0.7fr
            1.3fr;
    }


    #pageDown > div > div:nth-child(2) {
        justify-content: flex-end;

        align-items: center;

        text-align: right;
    }


    #pageDown > div > div:last-child {
        grid-column:
            1 / -1;
    }

}


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

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


    /* ---------- HEADER ---------- */

    header {
        padding: 0.7rem 0.8rem;
    }


    #navigation {
        min-height: 4.5rem;

        padding: 0 1rem;

        gap: 1rem;
    }


    #navLogoImage {
        width: 85px;
    }


    /* CACHE LA NAVIGATION DESKTOP */

    #navLinks,
    #navBtn {
        display: none;
    }


    /* ---------- BURGER ---------- */

    #menuToggle {
        display: flex;

        width: 2.8rem;
        height: 2.8rem;

        padding: 0;

        flex-direction: column;

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

        gap: 0.42rem;

        background-color: transparent;

        border: 0;

        cursor: pointer;
    }


    #menuToggle span {
        display: block;

        width: 1.5rem;
        height: 1px;

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

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


    header.is-scrolled #menuToggle span {
        background-color:
            var(--color-prussian-blue);
    }


    /* BURGER EN CROIX */

    #menuToggle.is-open span:first-child {
        transform:
            translateY(0.23rem)
            rotate(45deg);
    }


    #menuToggle.is-open span:last-child {
        transform:
            translateY(-0.23rem)
            rotate(-45deg);
    }


    /* ---------- MENU MOBILE ---------- */

    #mobileMenu {
        position: absolute;

        top: calc(100% + 0.5rem);

        left: 0;

        width: 100%;

        display: flex;

        flex-direction: column;

        padding: 1.8rem;

        background-color:
            rgba(250, 250, 250, 0.98);

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

        box-shadow:
            0 20px 40px
            rgba(20, 40, 65, 0.12);

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

        opacity: 0;

        visibility: hidden;

        transform:
            translateY(-0.7rem);

        pointer-events: none;

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


    #mobileMenu.is-open {
        opacity: 1;

        visibility: visible;

        transform:
            translateY(0);

        pointer-events: auto;
    }


    #mobileMenu > a:not(.btn) {
        width: 100%;

        padding: 1rem 0;

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

        font-size: 0.78rem;
        font-weight: 500;

        letter-spacing: 0.12em;

        text-transform: uppercase;

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


    #mobileMenu .btn {
        width: 100%;

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


    /* ========================================
       PAGE CONFIDENTIALITE MOBILE
    ======================================== */

    main {
        max-width: none;

        padding:
            8.5rem
            1.4rem
            5rem;
    }


    main > h1 {
        margin-bottom: 1.5rem;

        font-size:
            clamp(2.55rem, 12vw, 3.9rem);

        line-height: 1.05;
    }


    main > h2,
    .legalUpdate {
        margin-bottom: 3rem;

        font-size: 0.62rem;

        letter-spacing: 0.13em;
    }


    main > h2 + p,
    main > .legalUpdate + p {
        font-size:
            clamp(1.05rem, 4.5vw, 1.25rem);
    }


    main > h3 {
        margin-top: 3.5rem;

        padding-top: 1.5rem;

        font-size:
            clamp(1.4rem, 6vw, 1.8rem);
    }


    main > p,
    main > ul {
        max-width: 100%;
    }


    main > ul li {
        padding-left: 1.4rem;
    }


    /* ---------- FOOTER MOBILE ---------- */

    #pageDown {
        padding:
            var(--space-lg)
            1.4rem
            var(--space-md);
    }


    #pageDown > div > div:nth-child(2) {
        flex-direction: column;

        align-items: flex-start;

        justify-content: flex-start;

        text-align: left;

        gap: 1rem;
    }


    #pageDown > div > div:last-child {
        flex-direction: column;

        align-items: flex-start;

        gap: 0.8rem;
    }


    #pageDown p {
        margin-right: 0;
    }

}


/* ============================================
   ACCESSIBILITE
============================================ */

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

    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;

        transition-duration:
            0.01ms !important;

        animation-duration:
            0.01ms !important;

        animation-iteration-count:
            1 !important;
    }

}