/* =========================================================
   LE MOBILE 83
   PAGES LÉGALES
   ========================================================= */

.legal-hero {
    padding:
        150px 0 72px;

    background:
        #101416;

    color:
        #ffffff;

    border-bottom:
        1px solid
        rgba(255, 255, 255, 0.08);
}

.legal-hero-inner {
    max-width:
        900px;
}

.legal-hero-kicker {
    margin:
        0 0 16px;

    color:
        #8ea1b2;

    font-size:
        0.72rem;

    font-weight:
        700;

    letter-spacing:
        0.14em;

    text-transform:
        uppercase;
}

.legal-hero h1 {
    margin:
        0;

    max-width:
        800px;

    color:
        #ffffff;

    font-size:
        clamp(
            2.8rem,
            7vw,
            5.2rem
        );

    font-weight:
        600;

    line-height:
        0.98;

    letter-spacing:
        -0.055em;
}

.legal-hero p {
    max-width:
        760px;

    margin:
        28px 0 0;

    color:
        #9da6ab;

    font-size:
        1rem;

    line-height:
        1.8;
}


/* =========================================================
   PAGE
   ========================================================= */

.legal-page {
    padding:
        80px 0 110px;

    background:
        #f3f1ec;

    color:
        #181c1f;
}

.legal-layout {
    display: grid;

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

    gap:
        70px;

    align-items:
        start;
}

.legal-content {
    max-width:
        900px;
}

.legal-section {
    padding:
        0 0 44px;

    margin:
        0 0 44px;

    border-bottom:
        1px solid
        #d7d4cd;
}

.legal-section:last-child {
    margin-bottom:
        0;

    padding-bottom:
        0;

    border-bottom:
        0;
}

.legal-section h2 {
    margin:
        0 0 20px;

    color:
        #171b1e;

    font-size:
        clamp(
            1.35rem,
            3vw,
            1.8rem
        );

    font-weight:
        600;

    letter-spacing:
        -0.035em;
}

.legal-section h3 {
    margin:
        28px 0 10px;

    color:
        #202529;

    font-size:
        1rem;

    font-weight:
        700;
}

.legal-section p,
.legal-section li {
    color:
        #5e666b;

    font-size:
        0.96rem;

    line-height:
        1.85;
}

.legal-section p {
    margin:
        0 0 16px;
}

.legal-section ul {
    margin:
        15px 0 0;

    padding-left:
        22px;
}

.legal-section a {
    color:
        #536c82;

    text-decoration:
        underline;

    text-underline-offset:
        3px;
}

.legal-data {
    display: grid;

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

    gap:
        0;

    margin-top:
        18px;

    border-top:
        1px solid
        #d7d4cd;
}

.legal-data dt,
.legal-data dd {
    margin:
        0;

    padding:
        13px 0;

    border-bottom:
        1px solid
        #d7d4cd;
}

.legal-data dt {
    color:
        #737a7e;

    font-size:
        0.78rem;

    font-weight:
        600;
}

.legal-data dd {
    color:
        #202529;

    font-size:
        0.9rem;

    font-weight:
        500;
}


/* =========================================================
   ENCADRÉS
   ========================================================= */

.legal-note {
    margin:
        20px 0;

    padding:
        18px 20px;

    border-left:
        3px solid
        #74899f;

    background:
        #e7e9e8;

    color:
        #444d52;

    font-size:
        0.9rem;

    line-height:
        1.7;
}

.legal-warning {
    margin:
        20px 0;

    padding:
        18px 20px;

    border:
        1px solid
        #b88648;

    background:
        #f5eee3;

    color:
        #5b472e;

    font-size:
        0.9rem;

    line-height:
        1.7;
}

.legal-warning strong {
    color:
        #392b1e;
}


/* =========================================================
   NAV LATERAL
   ========================================================= */

.legal-side {
    position:
        sticky;

    top:
        120px;

    padding:
        20px 0;

    border-top:
        1px solid
        #bfc1be;

    border-bottom:
        1px solid
        #bfc1be;
}

.legal-side strong {
    display:
        block;

    margin-bottom:
        14px;

    color:
        #1c2124;

    font-size:
        0.74rem;

    letter-spacing:
        0.1em;

    text-transform:
        uppercase;
}

.legal-side a {
    display:
        block;

    padding:
        8px 0;

    color:
        #697176;

    font-size:
        0.84rem;

    text-decoration:
        none;
}

.legal-side a:hover {
    color:
        #181c1f;
}


/* =========================================================
   FORMULAIRE RGPD
   ========================================================= */

.form-privacy-information {
    margin-top:
        14px;

    padding:
        16px 18px;

    border:
        1px solid
        #d1cec7;

    background:
        rgba(
            255,
            255,
            255,
            0.42
        );
}

.form-privacy-information p {
    margin:
        0;

    color:
        #687075;

    font-size:
        0.78rem;

    line-height:
        1.65;
}

.form-privacy-information a {
    color:
        #536c82;

    font-weight:
        600;

    text-decoration:
        underline;

    text-underline-offset:
        2px;
}


/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (
    max-width: 900px
) {

    .legal-layout {
        grid-template-columns:
            1fr;

        gap:
            35px;
    }

    .legal-side {
        position:
            static;

        order:
            -1;
    }

}


@media (
    max-width: 600px
) {

    .legal-hero {
        padding:
            120px 0 55px;
    }

    .legal-page {
        padding:
            55px 0 80px;
    }

    .legal-data {
        grid-template-columns:
            1fr;
    }

    .legal-data dt {
        padding-bottom:
            3px;

        border-bottom:
            0;
    }

    .legal-data dd {
        padding-top:
            0;
    }

}