/* Conditions d'utilisation - page-owned styles */

.legal-page {
    padding-block: var(--space-2xl) var(--space-3xl);
}

.legal-page__container {
    max-width: var(--container-max);
}

.legal-page__header {
    margin-block-end: var(--space-2xl);
}

.legal-page__kicker {
    color: var(--color-olive);
    margin-block-end: var(--space-xs);
}

.legal-page__title {
    margin-block-end: var(--space-md);
}

.legal-page__lead {
    max-width: 72ch;
    font-size: 1.125rem;
    line-height: 1.6;
    color: var(--color-navy);
}

.legal-section {
    margin-block-end: var(--space-3xl);
    border-top: 1px solid rgba(58, 63, 69, 0.15);
    padding-block-start: var(--space-xl);
}

.legal-section:last-child {
    margin-block-end: 0;
}

.legal-section__heading {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    margin-block-end: var(--space-lg);
}

.legal-section__number {
    flex-shrink: 0;
}

.legal-section__heading h2 {
    margin-block-end: 0;
}

.legal-section__content {
    display: flex;
    flex-direction: column;
    gap: var(--space-lg);
}

.legal-section__content--reading {
    max-width: 72ch;
    align-items: flex-start;
}

.legal-section__content--intro {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 300px;
    gap: var(--space-xl);
    align-items: start;
}

.legal-section__content--split {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
    gap: var(--space-xl);
    align-items: start;
}

.legal-section__text {
    min-width: 0;
}

.legal-section__text h3,
.legal-section__content--reading h3,
.legal-section__publisher h3,
.legal-section__contact-card h3 {
    margin-block-end: var(--space-sm);
}

.legal-section__text p,
.legal-section__content--reading p,
.legal-section__publisher p,
.legal-section__contact-card p {
    margin-block-end: var(--space-md);
}

.legal-section__text p:last-child,
.legal-section__content--reading p:last-child,
.legal-section__publisher p:last-child,
.legal-section__contact-card p:last-child {
    margin-block-end: 0;
}

.legal-page__info-card {
    min-width: 0;
}

.legal-page__info-title {
    margin-block-end: var(--space-sm);
}

.legal-section__publisher {
    margin-block-start: var(--space-lg);
}

.legal-section__contact-list {
    list-style: none;
    padding-inline-start: 0;
    margin-block-end: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
}

.legal-section__contact-list li {
    line-height: 1.6;
}

.legal-section__list {
    padding-inline-start: var(--space-lg);
    margin-block-end: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
}

.legal-section__list li {
    line-height: 1.6;
}

.legal-section__quote {
    margin-block-end: 0;
    background-color: var(--surface-sand);
    border-inline-start: 4px solid var(--color-olive);
    padding: var(--space-lg);
    border-radius: var(--radius-md);
    color: var(--color-navy);
}

.legal-section__quote p {
    margin-block-end: 0;
}

.legal-section__date-note {
    color: var(--color-graphite);
    margin-block-start: var(--space-sm);
}

.legal-section__note {
    color: var(--color-graphite);
    margin-block-start: var(--space-sm);
}

.legal-section__contact-card {
    max-width: 72ch;
}

.legal-section__contact-card ul {
    margin-block-start: var(--space-md);
}

/* Tablet */
@media (min-width: 768px) and (max-width: 1023px) {
    .legal-section__content--intro {
        grid-template-columns: minmax(0, 1fr) 260px;
        gap: var(--space-lg);
    }

    .legal-section__content--split {
        grid-template-columns: minmax(0, 1fr);
        gap: var(--space-lg);
    }
}

/* Mobile */
@media (max-width: 767px) {
    .legal-page {
        padding-block: var(--space-xl) var(--space-2xl);
    }

    .legal-page__header {
        margin-block-end: var(--space-xl);
    }

    .legal-page__lead {
        font-size: 1rem;
    }

    .legal-section {
        margin-block-end: var(--space-2xl);
        padding-block-start: var(--space-lg);
    }

    .legal-section__heading {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--space-sm);
    }

    .legal-section__content--intro,
    .legal-section__content--split {
        grid-template-columns: minmax(0, 1fr);
        gap: var(--space-lg);
    }

    .legal-section__content--reading {
        max-width: 100%;
    }

    .legal-section__contact-card {
        max-width: 100%;
    }
}