/* ============================================================
   Pages légales — aligné sur le système de design VeryCard
   (jetons de pages.css : --color-neutral-*, --color-orange-*, --scale-*)
   ============================================================ */

.legal-body {
    margin: 0;
    /* le layout légal ne charge pas site.css : on rétablit un défilement normal */
    height: auto;
    overflow-x: hidden;
    overflow-y: auto;
    background: var(--color-neutral-500, #F5F5F5);
    font-family: var(--type-font-family-primary, Inter), system-ui, sans-serif;
    color: var(--color-neutral-100, #0C0C0C);
    -webkit-font-smoothing: antialiased;
}

.legal-page {
    max-width: 56rem;
    margin: 0 auto;
    padding: var(--scale-1000, 40px) var(--scale-500, 20px) var(--scale-1600, 64px);
    line-height: 1.65;
}

/* ---------- Retour à l'application ---------- */
.legal-retour {
    display: inline-flex;
    align-items: center;
    gap: var(--scale-200, 8px);
    margin-bottom: var(--scale-600, 24px);
    padding: var(--scale-200, 8px) var(--scale-400, 16px);
    border-radius: 999rem;
    background: transparent;
    border: 2px solid var(--color-neutral-100, #0C0C0C);
    color: var(--color-neutral-100, #0C0C0C);
    font-size: var(--font-size-body-medium, 1rem);
    font-weight: var(--type-font-weight-medium, 500);
    text-decoration: none;
    transition: background .15s ease, color .15s ease;
}
.legal-retour:hover {
    background: var(--color-neutral-100, #0C0C0C);
    color: var(--color-neutral-500, #F5F5F5);
    text-decoration: none;
}
.legal-retour svg { flex-shrink: 0; }

/* ---------- Navigation entre pages légales (pastilles) ---------- */
.legal-nav {
    display: flex;
    flex-wrap: wrap;
    gap: var(--scale-200, 8px);
    margin-bottom: var(--scale-800, 32px);
}
.legal-nav a {
    display: inline-flex;
    align-items: center;
    padding: var(--scale-200, 8px) var(--scale-400, 16px);
    border-radius: 999rem;
    border: 2px solid var(--color-neutral-100, #0C0C0C);
    background: transparent;
    color: var(--color-neutral-100, #0C0C0C);
    font-size: var(--font-size-body-small, .875rem);
    font-weight: var(--type-font-weight-medium, 500);
    text-decoration: none;
    white-space: nowrap;
    transition: background .15s ease, color .15s ease;
}
.legal-nav a:hover {
    background: var(--color-neutral-400, #DDD);
    text-decoration: none;
}
.legal-nav a.actif {
    background: var(--color-neutral-100, #0C0C0C);
    color: var(--color-neutral-500, #F5F5F5);
    font-weight: var(--type-font-weight-bold, 700);
}
.legal-nav a.actif:hover { background: var(--color-neutral-200, #343434); }

/* ---------- Carte de contenu ---------- */
.legal-carte {
    background: #FFF;
    border-radius: var(--border-radius-200, 12px);
    padding: var(--scale-800, 32px) var(--scale-900, 36px) var(--scale-1000, 40px);
    box-shadow: 0 1px 2px rgba(12, 12, 12, .06);
}

/* ---------- En-tête de page ---------- */
.legal-header {
    margin-bottom: var(--scale-800, 32px);
    padding-bottom: var(--scale-500, 20px);
    border-bottom: 3px solid var(--color-neutral-100, #0C0C0C);
}
.legal-header h1 {
    margin: 0 0 var(--scale-200, 8px);
    font-size: var(--font-size-heading-h4, 30px);
    font-weight: var(--type-font-weight-bold, 800);
    line-height: 1.15;
    letter-spacing: -.01em;
}
.legal-meta {
    margin: 0;
    font-size: var(--font-size-body-small, .875rem);
    font-weight: var(--type-font-weight-medium, 500);
    color: var(--color-neutral-300, #848484);
}

/* ---------- Titres ---------- */
.legal-page h2 {
    margin: var(--scale-1000, 40px) 0 var(--scale-300, 12px);
    padding-top: var(--scale-500, 20px);
    border-top: 1px solid var(--color-neutral-400, #DDD);
    font-size: var(--font-size-heading-h6, 22px);
    font-weight: var(--type-font-weight-bold, 700);
    line-height: 1.25;
}
.legal-page h2:first-of-type { margin-top: 0; padding-top: 0; border-top: none; }

.legal-page h3 {
    margin: var(--scale-600, 24px) 0 var(--scale-200, 8px);
    font-size: var(--font-size-body-large, 1.1875rem);
    font-weight: var(--type-font-weight-bold, 700);
}

.legal-page p,
.legal-page li {
    font-size: var(--font-size-body-medium, 1rem);
    font-weight: var(--type-font-weight-regular, 400);
    /* Justification + césure : sans césure, le justifié creuse des « rivières »
       de blanc entre les mots. Le layout légal fixe lang="fr", la coupure suit
       donc bien les règles françaises. */
    text-align: justify;
    hyphens: auto;
    -webkit-hyphens: auto;
    text-wrap: pretty;
}
.legal-page p { margin: 0 0 var(--scale-400, 16px); }
.legal-page ul, .legal-page ol { margin: 0 0 var(--scale-400, 16px); padding-left: var(--scale-600, 24px); }
.legal-page li { margin-bottom: var(--scale-200, 8px); }

.legal-page a {
    color: var(--color-orange-400, #C97213);
    font-weight: var(--type-font-weight-medium, 500);
    text-underline-offset: .15em;
}
.legal-page a:hover { color: var(--color-orange-500, #F07D00); }

.legal-page code {
    padding: .0625rem .375rem;
    border-radius: var(--scale-100, 4px);
    background: var(--color-neutral-500, #F5F5F5);
    font-size: .875em;
    color: var(--color-neutral-200, #343434);
}

/* ---------- Tableaux ---------- */
.legal-table-wrap {
    overflow-x: auto;
    margin: 0 0 var(--scale-600, 24px);
    border-radius: var(--border-radius-100, 8px);
    border: 1px solid var(--color-neutral-400, #DDD);
}
.legal-table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--font-size-body-small, .875rem);
    min-width: 32rem;
}
.legal-table th,
.legal-table td {
    padding: var(--scale-300, 12px) var(--scale-400, 16px);
    text-align: left;
    vertical-align: top;
    border-bottom: 1px solid var(--color-neutral-400, #DDD);
}
.legal-table tr:last-child th,
.legal-table tr:last-child td { border-bottom: none; }
.legal-table thead th {
    background: var(--color-neutral-100, #0C0C0C);
    color: var(--color-neutral-500, #F5F5F5);
    font-weight: var(--type-font-weight-bold, 700);
    border-bottom: none;
}
/* colonne « libellé » des tableaux sans thead (mentions légales) :
   un <table> sans <thead> reçoit un <tbody> implicite, ce sélecteur suffit */
.legal-table tbody th {
    background: var(--color-neutral-500, #F5F5F5);
    font-weight: var(--type-font-weight-bold, 700);
    width: 34%;
}

/* ---------- Encadrés ---------- */
.legal-encadre,
.legal-important {
    margin: 0 0 var(--scale-600, 24px);
    padding: var(--scale-400, 16px) var(--scale-500, 20px);
    border-radius: var(--border-radius-100, 8px);
}
.legal-encadre {
    border-left: 4px solid var(--color-orange-400, #C97213);
    background: #FDF6EF;
}
.legal-important {
    border-left: 4px solid var(--color-neutral-100, #0C0C0C);
    background: var(--color-neutral-500, #F5F5F5);
}
.legal-encadre p:last-child,
.legal-important p:last-child { margin-bottom: 0; }

/* ---------- Valeur non renseignée ---------- */
.legal-todo {
    display: inline-block;
    padding: .0625rem .5rem;
    border-radius: var(--scale-100, 4px);
    background: #FDE7E9;
    border: 1px dashed var(--color-red-400, #BB131E);
    color: var(--color-red-400, #BB131E);
    font-weight: var(--type-font-weight-bold, 700);
    font-size: .875em;
    white-space: nowrap;
}

.legal-alerte-incomplet {
    display: flex;
    gap: var(--scale-300, 12px);
    margin-bottom: var(--scale-600, 24px);
    padding: var(--scale-400, 16px) var(--scale-500, 20px);
    border-radius: var(--border-radius-100, 8px);
    background: #FDE7E9;
    border: 2px solid var(--color-red-400, #BB131E);
    color: var(--color-red-300, #81161C);
    font-size: var(--font-size-body-small, .875rem);
    font-weight: var(--type-font-weight-medium, 500);
    line-height: 1.5;
}
.legal-alerte-incomplet code { background: #F8D2D5; color: var(--color-red-300, #81161C); }

/* ---------- Formulaire de rétractation ---------- */
.legal-formulaire {
    margin: 0 0 var(--scale-600, 24px);
    padding: var(--scale-500, 20px) var(--scale-600, 24px);
    border: 2px solid var(--color-neutral-100, #0C0C0C);
    border-radius: var(--border-radius-100, 8px);
    background: #FFF;
}
.legal-formulaire p:last-child { margin-bottom: 0; }

/* Le formulaire de rétractation est à remplir, pas à lire : ses lignes de
   pointillés supportent mal la justification. */
.legal-page .legal-formulaire p,
.legal-page .legal-meta { text-align: left; hyphens: manual; }
.legal-page .legal-footer { text-align: center; hyphens: manual; }

/* ---------- Pied de page ---------- */
.legal-footer {
    margin-top: var(--scale-800, 32px);
    text-align: center;
    font-size: var(--font-size-body-small, .875rem);
    color: var(--color-neutral-300, #848484);
}

/* ---------- Responsive ---------- */
@media (max-width: 768px) {
    .legal-page { padding: var(--scale-600, 24px) var(--scale-400, 16px) var(--scale-1000, 40px); }
    .legal-carte { padding: var(--scale-500, 20px); border-radius: var(--border-radius-100, 8px); }
    .legal-header h1 { font-size: 1.5rem; }
    .legal-page h2 { font-size: 1.1875rem; }
    .legal-nav { gap: var(--scale-100, 4px); }
    .legal-nav a { padding: var(--scale-100, 4px) var(--scale-300, 12px); font-size: .8125rem; }

    /* Sur une colonne étroite, la justification laisse trop peu de mots par
       ligne pour répartir le blanc proprement : on repasse au fer à gauche. */
    .legal-page p,
    .legal-page li { text-align: left; }
}

/* ---------- Impression ---------- */
@media print {
    .legal-body { background: #FFF; }
    .legal-nav, .legal-retour, .legal-footer { display: none; }
    .legal-carte { box-shadow: none; padding: 0; }
    .legal-page { max-width: none; padding: 0; }
    .legal-page a { color: inherit; text-decoration: none; }
}