/* ==========================================================================
   Œuvra — Pages légales (Mentions légales, Politique de confidentialité, CGV) · CSS de gabarit
   Gabarit texte simple, non dessiné (decisions.md P04) : hero de page centré (composants.md « Hero de
   page centré » : .c-hero.c-hero--center, fil d’Ariane et en-tête de main.css) puis colonne de lecture
   720 (--content, design-system.md §6) ; titres au style .t-h3, texte au style .t-body (§4, tailles par
   niveau dans tokens.css). Aucune valeur nouvelle : jetons du DS et valeurs de composants existants
   (en-tête max 960 de Tarifs / Pour qui ?, lien interne 500 de la FAQ, tableau du DS .oe-table,
   rayon 8 du tableau comparatif). Aucune animation (rien n’est prévu pour ce gabarit dans motion-spec.md).
   Charger après tokens.css, ds-oeuvra-bundle.css et main.css.
   ========================================================================== */

/* ---------- Hero centré ---------- */
/* En-tête centré limité comme sur Tarifs (.tf-head) et Pour qui ? (.pq-head). */
.legal-head { max-width: 960px; }

/* ---------- Colonne de lecture ---------- */
/* 720 max, centrée dans le conteneur, à --head-gap du titre (en-tête → contenu, design-system.md §5) ;
   texte = .t-body (400, --fs-body / --lh-body, ink-700) ; mots longs (URL, adresses) coupés. */
.legal-prose { box-sizing: border-box; max-width: var(--content); margin: var(--head-gap) auto 0; font-family: var(--font-sans); font-weight: 400; font-size: var(--fs-body); line-height: var(--lh-body); color: var(--ink-700); overflow-wrap: break-word; }

/* Flux vertical : marges du navigateur remises à zéro, puis écarts de l’échelle du DS
   (16 entre blocs, 40 avant un titre ou autour d’un filet, 8 entre éléments de liste). */
.legal-prose :where(p, h2, h3, h4, h5, h6, ul, ol, dl, dd, blockquote, figure, table, hr, pre) { margin: 0; }
.legal-prose > * + *, .legal-prose :where(blockquote, div, figure) > * + * { margin-top: var(--space-4); }
.legal-prose > :where(h2, h3, h4, h5, h6):not(:first-child) { margin-top: var(--space-10); }
.legal-prose > hr:not(:first-child), .legal-prose > hr + * { margin-top: var(--space-10); }

/* Titres : h2 et h3 au style .t-h3 (Light 300, −0,015 em, ink-900) ; h4–h6 au style .t-title-sm (600). */
.legal-prose :where(h2, h3) { font-family: var(--font-sans); font-weight: 300; font-size: var(--fs-h3); line-height: var(--lh-h3); letter-spacing: -0.015em; color: var(--ink-900); }
.legal-prose :where(h4, h5, h6) { font-family: var(--font-sans); font-weight: 600; font-size: var(--fs-title-sm); line-height: var(--lh-title-sm); color: var(--ink-900); }

/* Listes : texte courant, retrait 24, 8 entre éléments. */
.legal-prose :where(ul, ol) { padding-left: var(--space-6); }
.legal-prose li + li, .legal-prose li > :where(ul, ol) { margin-top: var(--space-2); }

/* Liens (parme, souligné du navigateur, ink-900 au survol : main.css) en 500 comme les liens internes de la
   FAQ ; accent 600 ink-900 (strong.oe-accent). Anneau de focus : --shadow-focus (main.css). */
.legal-prose a { font-weight: 500; }
.legal-prose :where(strong, b) { font-weight: 600; color: var(--ink-900); }

/* Tableaux simples : cadre à filet rayon 8, en-têtes du tableau du DS (.oe-table : capitales 500 11/16 +0,06 em
   ink-500 sur beige), cellules au style .t-body ; pleine largeur de la colonne, cellules qui passent à la ligne
   entre les mots (comme le comparatif Tarifs en Mobile, D12) — jamais au milieu d'un mot. Un tableau dont les
   mots ne tiennent pas dans la colonne (ex. 4 colonnes en Mobile, adresse longue) défile dans son enveloppe
   .legal-table (ajoutée par le gabarit ; nom accessible et focus clavier posés par page-legal.js) : la page ne
   défile jamais horizontalement et rien n'est rogné. */
.legal-table { overflow-x: auto; border-radius: var(--radius-md); }
.legal-prose table { box-sizing: border-box; width: 100%; border-collapse: separate; border-spacing: 0; border: 1px solid var(--border-100); border-radius: var(--radius-md); overflow: hidden; background: var(--bg-surface); }
.legal-prose :where(th, td) { padding: 10px var(--space-3); border-bottom: 1px solid var(--border-100); text-align: left; vertical-align: top; overflow-wrap: break-word; }
.legal-prose th { background: var(--bg-beige); font-weight: 500; font-size: 11px; line-height: 16px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-500); }
.legal-prose table > :last-child > tr:last-child > * { border-bottom: 0; }

/* Mobile (< 768) : un tableau simple (une rangée d'en-têtes, aucune fusion ; marqué data-stack par page-legal.js)
   devient une pile de rangées dans le même cadre : chaque cellule précédée du libellé de sa colonne (style des
   en-têtes, masqué des lecteurs d'écran qui annoncent déjà l'en-tête de colonne). Rien ne défile. Sans JavaScript
   ou tableau complexe : défilement dans l'enveloppe, comme au-dessus. */
@media (max-width: 767px) {
  .legal-table[data-stack] { overflow-x: visible; }
  .legal-table[data-stack] :where(table, tbody, tr, td) { display: block; }
  .legal-table[data-stack] thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .legal-table[data-stack] tr { padding: 6px 0; border-bottom: 1px solid var(--border-100); }
  .legal-table[data-stack] tbody > tr:last-child { border-bottom: 0; }
  .legal-table[data-stack] td { padding: 6px var(--space-3); border-bottom: 0; }
  .legal-table[data-stack] td[data-label]::before { content: attr(data-label); content: attr(data-label) / ""; display: block; margin-bottom: 2px; font-weight: 500; font-size: 11px; line-height: 16px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-500); }
}

/* Médias, légendes, citations, filets. Médias jamais plus larges que la colonne (vidéo intégrée : les feuilles
   des blocs, retirées, ne les limitent plus). Légende d'un tableau (<caption>, HTML collé ou éditeur classique) :
   même style et même écart que la légende de l'éditeur de blocs (<figcaption>), alignée comme le texte. */
.legal-prose img, .legal-prose video { max-width: 100%; height: auto; }
.legal-prose iframe { box-sizing: border-box; max-width: 100%; }
.legal-prose figcaption, .legal-prose caption { font-size: 12px; line-height: 16px; color: var(--ink-500); }
.legal-prose figure > figcaption { margin-top: var(--space-2); }
.legal-prose caption { padding-bottom: var(--space-2); text-align: left; }
.legal-prose blockquote { padding-left: var(--space-4); border-left: 1px solid var(--border-100); }
.legal-prose hr { height: 0; border: 0; border-top: 1px solid var(--border-100); }

/* ---------- Page vide : rappel réservé aux utilisateurs qui peuvent modifier la page ---------- */
.legal-notice { padding: var(--space-6); border: 1px solid var(--border-100); border-radius: var(--radius-xl); background: var(--bg-surface); }