/* ============================================
   LEGAL / TERMS PAGE
   Layout spécifique aux pages légales.
   Réutilise les classes globales :
     - Typography : .page-title, .section-title, .subtitle, .lead, .paragraph, .description, .fine-print
     - Alerts : .alert-inline, .alert-inline--danger/--info
     - Text : .text-error, .text-warning, .text-info
     - Sections : .landing-section, .landing-section--muted, .landing-section__container
     - Overline : .section-overline
   Définit des composants réutilisables :
     - .icon-list / .icon-list__item / .icon-list__icon
     - .option-block
     - .legal-page / .legal-page__hero / .legal-page__contact
   ============================================ */

/* === Page layout === */
.legal-page {
    width: 100%;
}

.legal-page__hero {
    padding-top: calc(var(--topbar-height) + var(--spacing-2xl));
}

.legal-page__contact {
    text-align: center;
}

.legal-page__contact .section-title,
.legal-page__contact .lead {
    text-align: center;
    margin-left: auto;
    margin-right: auto;
}


/* ============================================
   OPTION BLOCK — Bloc d'option avec titre et contenu
   Réutilisable pour présenter des choix, des plans, etc.
   ============================================ */
.option-block {
    margin-bottom: var(--spacing-lg);
    padding: var(--spacing-md) var(--spacing-lg);
    border-left: 3px solid var(--color-border);
    border-radius: 0 var(--radius-md) var(--radius-md) 0;
    background: var(--color-surface);
}

.option-block .subtitle {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
}

/* === Responsive === */
@media (max-width: 768px) {
    .legal-page__hero {
        padding-top: calc(var(--topbar-height) + var(--spacing-lg));
    }

    .icon-list__item {
        padding: var(--spacing-xs) var(--spacing-sm);
    }

    .option-block {
        padding: var(--spacing-sm) var(--spacing-md);
    }
}