/* Pages légales (mentions-legales.html, cgv.html, confidentialite.html), composées comme le texte courant
   d'un livre : EB Garamond à 19-21 px, mesure de 38 rem, numéros d'article en chiffres de titre suspendus
   dans la marge, sommaire à points de conduite, et sur grand écran l'essentiel en marge, qui suit la
   lecture. Complète style.css et sa classe .prose. */

main.legal { padding-block: 32px 72px; }
.legal .prose { gap: 16px; overflow-wrap: break-word; max-width: 38rem; }
.legal .prose > * { min-width: 0; }
.legal .prose p, .legal .prose li, .legal .prose td, .legal .prose dd { hyphens: auto; -webkit-hyphens: auto; }
.legal .prose p { text-wrap: pretty; }
.legal .prose a { text-underline-offset: .15em; }
.legal .prose a:hover { color: var(--rubrique); }
.legal .prose strong { font-weight: 600; }

/* En-tête de page : un titre de partie au-dessus du titre, en italique (pas de capitales espacées). */
.legal-head { display: grid; gap: 8px; padding-bottom: 8px; }
.legal-head .label { font-style: italic; color: var(--encre-2); font-size: 1.04rem; }
.legal-head h1 { font-size: clamp(2.3rem, 8vw, 3.4rem); }
.legal-head .maj { color: var(--encre-2); font-size: 1rem; font-style: italic; }

/* Titres : le numéro d'article en chiffres de titre, dans la seconde couleur. */
.legal .prose h2 { position: relative; scroll-margin-top: 80px; padding-top: 22px; border-top: 1px solid var(--filet); margin-top: 22px; font-size: clamp(1.75rem, 5vw, 2.1rem); }
.legal .prose h3 { font-family: var(--texte); font-weight: 600; font-size: 1.12rem; line-height: 1.35; margin-top: 8px; scroll-margin-top: 80px; }
.legal .prose .num { font-family: var(--titre); font-style: normal; color: var(--rubrique); margin-right: .3em; }

/* Résumé en tête de page */
.resume { display: grid; gap: 10px; }
.resume h2.resume-titre { border-top: 0; padding-top: 0; margin-top: 0; font-size: 1.6rem; }
.resume ul { padding-left: 1.1rem; }

/* Sommaire : comme la table d'un livre, une ligne par article, points de conduite jusqu'au numéro. */
.sommaire { padding: 18px 0 6px; border-top: 1px solid var(--filet); border-bottom: 1px solid var(--filet); }
.sommaire .label { display: block; margin-bottom: 8px; font-family: var(--titre); font-style: italic; font-size: 1.5rem; line-height: 1.1; }
.sommaire ol { margin: 0; padding: 0; list-style: none; counter-reset: article; display: grid; gap: 0; font-size: 1.04rem; }
.sommaire li { counter-increment: article; }
.sommaire ol a { display: flex; align-items: last baseline; gap: .45em; min-height: 40px; padding: 6px 0; text-decoration: none; }
.sommaire ol a::after { content: ""; order: 1; flex: 1 1 1em; min-width: 1em; height: 1px; transform: translateY(-.3em); background-image: radial-gradient(circle, var(--encre-2) .7px, transparent 1.1px); background-size: 6px 2px; background-repeat: repeat-x; opacity: .8; }
.sommaire ol a::before { content: counter(article); order: 2; font-family: var(--titre); color: var(--rubrique); min-width: 1.4em; text-align: right; }
.sommaire ol a:hover { color: var(--rubrique); text-decoration: underline; }
.sommaire > .muted { margin-top: 6px; }
.sommaire > .muted a { display: inline-flex; align-items: center; min-height: 40px; }

/* Fiche d'identité (éditeur, hébergeur, responsable du traitement) */
.fiche { margin: 0; display: grid; gap: 0; border-top: 1px solid var(--filet); }
.fiche > div { display: grid; grid-template-columns: 12rem minmax(0, 1fr); gap: 4px 16px; padding: 10px 0; border-bottom: 1px solid var(--filet); }
.fiche dt { font-style: italic; color: var(--encre-2); }
.fiche dd { margin: 0; }
@media (max-width: 560px) {
  .fiche > div { grid-template-columns: 1fr; }
  .fiche dt { font-size: .96rem; }
}

/* Encadrés */
.encadre { background: var(--papier-2); border: 1px solid var(--filet); padding: 18px 20px; display: grid; gap: 12px; font-size: 1.04rem; }
.encadre .encadre-titre { font-weight: 600; }
.encadre ol, .encadre ul { padding-left: 1.3rem; }
.encadre.important { border-left: 2px solid var(--rubrique); }

/* Textes de loi reproduits */
.legal .prose blockquote { margin: 0; padding: 4px 0 4px 16px; border-left: 1px solid var(--filet-champ); color: var(--encre-2); font-size: 1.02rem; display: grid; gap: 8px; }
.legal .prose blockquote .ref { color: var(--encre); font-weight: 600; }
.legal .prose blockquote ol { padding-left: 1.3rem; }

/* Formulaire de rétractation */
.formulaire { border: 1px dashed var(--filet-champ); padding: 20px; display: grid; gap: 12px; background: var(--papier-2); }
.formulaire .champ { border-bottom: 1px dotted var(--encre-2); padding-bottom: 14px; }

/* Tableaux : lignes empilées sur petit écran, sans défilement horizontal */
.legal .prose table { font-size: 1rem; }
.legal .prose th { font-weight: 600; font-style: italic; color: var(--encre-2); border-bottom-color: var(--encre); }
.legal .prose td p + p { margin-top: 6px; }
.legal .prose code, .legal .prose .cle { font-family: var(--technique); font-size: .8em; background: var(--papier-2); border: 1px solid var(--filet); border-radius: 2px; padding: 1px 5px; white-space: nowrap; }
@media (max-width: 640px) {
  .legal .prose table.empile, .legal .prose table.empile tbody, .legal .prose table.empile tr, .legal .prose table.empile td { display: block; width: 100%; }
  .legal .prose table.empile thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .legal .prose table.empile tr { border-bottom: 1px solid var(--filet); padding: 10px 0; }
  .legal .prose table.empile td { border: 0; padding: 3px 0; }
  .legal .prose table.empile td[data-label]::before { content: attr(data-label); display: block; font-size: .94rem; font-style: italic; color: var(--rubrique); }
  .legal .prose table.empile td:first-child { font-weight: 600; }
  .legal .prose table.empile td:first-child::before { display: none; }
}

.retour-haut { font-size: 1rem; font-style: italic; }

/* Grand écran : numéros d'article suspendus dans la marge de gauche, l'essentiel dans la marge de droite. */
@media (min-width: 1000px) {
  main.legal { padding-left: calc(var(--marge) + 4.5rem); }
  .legal .prose .num { position: absolute; right: calc(100% + .9rem); top: 22px; margin: 0; font-size: 1.05em; line-height: 1.04; }
}
@media (min-width: 1240px) {
  main.legal { max-width: 78rem; }
  .legal .prose { max-width: none; grid-template-columns: minmax(0, 38rem) minmax(0, 17rem); column-gap: 4.5rem; align-content: start; }
  .legal .prose > * { grid-column: 1; }
  .legal .prose > .resume { grid-column: 2; grid-row: 1 / span 3; align-self: start; position: sticky; top: 88px; font-size: 1rem; }
  .resume h2.resume-titre { font-size: 1.4rem; }
}

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

@media print {
  main.legal { padding: 0; }
  .sommaire, .retour-haut, .skip { display: none !important; }
  .legal .prose { max-width: none; display: block; }
  .legal .prose > * + * { margin-top: 10pt; }
  .legal .prose .num { position: static; }
  .encadre, .formulaire, .legal .prose blockquote { break-inside: avoid; }
  .legal .prose h2, .legal .prose h3 { break-after: avoid; }
  .legal .prose a { color: inherit; }
}