// ==========================================================================
// Legal notice page ("Mentions légales")
// Hero + fixed mountain-mask backdrop + fixed text sections in a single
// reading column, then the wavy transition into the site footer.
// BEM Methodology: .legal-notice-page (Block) → .legal-notice-page__element
// ==========================================================================

@use '../base/variables' as *;
@use '../base/mixins' as *;

.legal-notice-page {
    width: 100%;
    position: relative;
    z-index: 1;
}

// Fixed mountain-mask backdrop, scroll-driven by assets/legal-notice.ts
// (same technique and silhouette as .about-page__bg).
.legal-notice-page__bg {
    @include fixed-mountain-bg('../../images/actualite-mountain-mask-v2.svg', $color-primary-lighter, 60vh);
}

.legal-notice-page__sections {
    max-width: $breakpoint-blog;
    margin: 0 auto $spacing-xxl;
}

// Wavy transition right before the global site footer (same as .about-page__footer-mask).
.legal-notice-page__footer-mask {
    width: 100%;
    height: $footer-mask-height;
    background-color: $color-neutral;
}

// --------------------------------------------------------------------------
// Block: .legal-notice-section
// --------------------------------------------------------------------------
.legal-notice-section {
    padding: $spacing-lg 0;
    border-top: 1px solid $color-primary-lighter;
    scroll-margin-top: $spacing-xxl;

    &:first-child {
        border-top: 0;
    }
}

.legal-notice-section__title {
    font-family: $font-family-serif;
    font-size: $font-size-h3;
    font-weight: 400;
    color: $color-primary-dark;
    margin: 0 0 $spacing-md;
}

.legal-notice-section__body {
    font-family: $font-family-sans;
    font-size: $font-size-base;
    line-height: $line-height-base;
    color: $color-primary-dark;
    // Adresses e-mail / URL longues : jamais de scroll horizontal sur mobile.
    overflow-wrap: anywhere;

    p {
        margin: 0 0 $spacing-md;

        &:last-child {
            margin-bottom: 0;
        }
    }

    a {
        color: inherit;
        text-decoration: underline;
    }

    ul,
    ol {
        margin: 0 0 $spacing-md;
        padding-left: $spacing-lg;
    }
}