/* Pages légales (conditions, confidentialité). */

.legal { padding-block: var(--s-7) var(--s-9); }

/* Barre de lecture, collée sous l'en-tête. */
.lg-progress { position: fixed; top: var(--header-h); left: 0; right: 0; height: 2px; z-index: 90; background: transparent; pointer-events: none; }
.lg-progress i { display: block; height: 100%; width: 100%; background: var(--accent); transform: scaleX(0); transform-origin: left; }

/* Bascule entre les deux documents. */
.legal-switch { display: inline-flex; border: 1px solid var(--border); margin-bottom: var(--s-6); }
.legal-switch a { padding: var(--s-2) var(--s-4); font-size: 0.875rem; color: var(--text-2); }
.legal-switch a + a { border-left: 1px solid var(--border); }
.legal-switch a:hover { color: var(--text); background: var(--surface); }
.legal-switch a[aria-current="page"] { color: var(--text); background: var(--surface-2); box-shadow: inset 0 -2px 0 var(--accent); }

.legal-head { max-width: 820px; }
.legal h1 { font-size: clamp(2rem, 4.5vw, 3.25rem); letter-spacing: -0.02em; }
.legal-meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2) var(--s-5); margin-top: var(--s-4); font-family: var(--font-mono); font-size: 0.8125rem; color: var(--text-2); }
.legal-meta > span { display: inline-flex; align-items: center; gap: var(--s-2); }
.legal-meta > span::before { content: ""; width: 6px; height: 6px; border-radius: 50% !important; background: var(--ok); }
.legal-meta > span.lg-time::before { background: var(--accent); }
.lg-btn { font: inherit; color: var(--text-2); background: none; border: 1px solid var(--border); border-radius: 6px !important; padding: 4px 10px; cursor: pointer; }
.lg-btn:hover { color: var(--text); border-color: var(--border-strong); background: var(--surface); }
.lg-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.legal .intro-note {
  margin-block: var(--s-6) var(--s-5);
  padding: var(--s-5);
  background: var(--surface);
  border: 1px solid var(--border);
  border-left: 3px solid var(--accent);
  color: var(--text-2);
  line-height: 1.7;
  max-width: 820px;
}

/* « En bref » : l'essentiel en quatre cases. */
.legal-keys { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border: 1px solid var(--border); margin-bottom: var(--s-8); list-style: none; padding: 0; }
.legal-keys li { padding: var(--s-4) var(--s-5); border-left: 1px solid var(--border); }
.legal-keys li:first-child { border-left: 0; }
.legal-keys b { display: block; color: var(--text); font-weight: 600; font-size: 0.9375rem; }
.legal-keys span { display: block; margin-top: var(--s-1); color: var(--text-2); font-size: 0.8125rem; line-height: 1.5; }
.legal-keys b::before { content: ""; display: inline-block; width: 8px; height: 8px; margin-right: var(--s-2); background: var(--accent); }
@media (max-width: 900px) {
  .legal-keys { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .legal-keys li:nth-child(3) { border-left: 0; }
  .legal-keys li:nth-child(n+3) { border-top: 1px solid var(--border); }
}
@media (max-width: 480px) {
  .legal-keys { grid-template-columns: minmax(0, 1fr); }
  .legal-keys li { border-left: 0; }
  .legal-keys li + li { border-top: 1px solid var(--border); }
}

/* Sommaire à gauche, texte à droite. */
.legal-grid { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: var(--s-8); align-items: start; }
.legal-wrap { max-width: 760px; min-width: 0; }

.legal-toc { position: sticky; top: calc(var(--header-h) + var(--s-5)); align-self: start; max-height: calc(100vh - var(--header-h) - var(--s-7)); overflow-y: auto; border-left: 1px solid var(--border); }
.legal-toc summary { list-style: none; cursor: pointer; padding: 0 0 var(--s-3) var(--s-4); font-family: var(--font-mono); font-size: 0.75rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-2); }
.legal-toc summary::-webkit-details-marker { display: none; }
.legal .legal-toc ol { list-style: none; padding: 0; margin: 0; }
.legal-toc li a { display: flex; gap: var(--s-3); padding: 6px var(--s-4); margin-left: -1px; border-left: 2px solid transparent; font-size: 0.875rem; line-height: 1.4; color: var(--text-2); }
.legal-toc li a span { font-family: var(--font-mono); font-size: 0.75rem; padding-top: 2px; opacity: 0.7; }
.legal-toc li a:hover { color: var(--text); }
.legal-toc li a.on { color: var(--text); border-left-color: var(--accent); background: var(--surface); }
.legal-toc li a.on span { color: var(--accent-hover); opacity: 1; }
.legal-toc .toc-help { display: block; margin: var(--s-4) 0 0 var(--s-4); padding-top: var(--s-4); border-top: 1px solid var(--border); font-size: 0.8125rem; color: var(--text-2); }
.legal-toc .toc-help a { color: var(--accent-hover); text-decoration: underline; text-underline-offset: 3px; }

@media (max-width: 960px) {
  .legal-grid { grid-template-columns: minmax(0, 1fr); gap: var(--s-6); }
  .legal-toc { position: static; max-height: none; border: 1px solid var(--border); background: var(--surface); }
  .legal-toc summary { padding: var(--s-3) var(--s-4); }
  .legal-toc summary::after { content: "+"; float: right; }
  .legal-toc[open] summary::after { content: "−"; }
  .legal-toc[open] summary { border-bottom: 1px solid var(--border); padding-bottom: var(--s-3); margin-bottom: var(--s-2); }
  .legal-toc li a { margin-left: 0; }
  .legal-toc .toc-help { margin: var(--s-3) var(--s-4) var(--s-4); }
}
@media (min-width: 961px) { .legal-toc summary { pointer-events: none; } }

/* Corps du texte. */
.legal h2 { position: relative; scroll-margin-top: calc(var(--header-h) + var(--s-5)); margin-top: var(--s-8); margin-bottom: var(--s-3); padding-top: var(--s-5); border-top: 1px solid var(--border); font-size: 1.5rem; letter-spacing: -0.01em; }
.legal-wrap > h2:first-child { margin-top: 0; border-top: 0; padding-top: 0; }
.legal h2 .num { display: block; margin-bottom: var(--s-2); font-family: var(--font-mono); font-size: 0.75rem; font-weight: 400; letter-spacing: 0.08em; color: var(--accent-hover); }
.legal h2 .anchor { margin-left: var(--s-3); font-size: 1rem; color: var(--text-2); text-decoration: none; opacity: 0; }
.legal h2:hover .anchor, .legal h2 .anchor:focus-visible { opacity: 1; }
.legal h2 .anchor:hover { color: var(--accent-hover); }
.legal h2.flash { animation: lg-flash 1.4s ease-out; }
@keyframes lg-flash { 0% { background: rgba(91, 110, 240, 0.18); } 100% { background: transparent; } }
.legal h3 { margin-top: var(--s-5); margin-bottom: var(--s-2); font-size: 1.0625rem; }
.legal p { margin-top: var(--s-3); line-height: 1.8; }
.legal strong { color: var(--text); font-weight: 600; }
.legal ul, .legal ol { margin-top: var(--s-3); padding-left: var(--s-5); }
.legal ul { list-style: none; padding-left: 0; }
.legal-wrap ul li { position: relative; padding-left: var(--s-5); color: var(--text-2); line-height: 1.75; }
.legal-wrap ul li + li { margin-top: var(--s-3); }
.legal-wrap ul li::before { content: ""; position: absolute; left: 0; top: 0.85em; width: 8px; height: 1px; background: var(--accent); }
.legal-wrap ol { list-style: decimal; }
.legal-wrap ol li { color: var(--text-2); line-height: 1.75; padding-left: var(--s-2); }
.legal-wrap ol li + li { margin-top: var(--s-2); }
.legal-wrap a { color: var(--accent-hover); text-decoration: underline; text-underline-offset: 3px; }
.legal-wrap a:hover { color: var(--text); }
.legal code { padding: 1px 6px; background: var(--surface-2); border: 1px solid var(--border); font-size: 0.85em; }
.legal table { width: 100%; margin-top: var(--s-4); border-collapse: collapse; font-size: 0.9375rem; }
.legal th, .legal td { padding: var(--s-3) var(--s-4); text-align: left; vertical-align: top; border: 1px solid var(--border); color: var(--text-2); }
.legal th { color: var(--text); background: var(--surface); font-weight: 600; }
@media (max-width: 700px) { .legal table { display: block; overflow-x: auto; } }

/* Filtre de la liste des données (confidentialité). */
.lg-filter { position: relative; margin-top: var(--s-4); }
.lg-filter input { width: 100%; padding: var(--s-3) var(--s-4); font: inherit; font-size: 0.9375rem; color: var(--text); background: var(--surface); border: 1px solid var(--border); border-radius: 0; outline: none; }
.lg-filter input::placeholder { color: var(--text-2); }
.lg-filter input:focus { border-color: var(--accent); }
.lg-filter input::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; }
.lg-filter output { display: block; margin-top: var(--s-2); font-family: var(--font-mono); font-size: 0.75rem; color: var(--text-2); }
.legal-wrap li.lg-hide { display: none; }
.legal-wrap li mark { background: rgba(91, 110, 240, 0.3); color: var(--text); padding: 0 2px; }

/* Fin de document : lecture suivante + contact. */
.legal-end { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: var(--s-8); border: 1px solid var(--border); }
.legal-end a { display: block; padding: var(--s-5); color: var(--text); text-decoration: none; }
.legal-end a + a { border-left: 1px solid var(--border); }
.legal-end a:hover { background: var(--surface); }
.legal-end small { display: block; margin-bottom: var(--s-2); font-family: var(--font-mono); font-size: 0.75rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-2); }
.legal-end b { font-weight: 600; }
.legal-end b::after { content: " →"; color: var(--accent-hover); }
@media (max-width: 600px) {
  .legal-end { grid-template-columns: minmax(0, 1fr); }
  .legal-end a + a { border-left: 0; border-top: 1px solid var(--border); }
}

/* Impression : texte seul, fond blanc. */
@media print {
  body { background: #fff; color: #000; }
  .site-header, .site-footer, .legal-switch, .legal-toc, .lg-progress, .lg-btn, .legal-end, .lg-filter, .legal h2 .anchor { display: none !important; }
  .legal { padding: 0; }
  .legal-grid { display: block; }
  .legal, .legal p, .legal li, .legal strong, .legal h1, .legal h2, .legal-wrap a, .legal .intro-note, .legal-meta, .legal-keys b, .legal-keys span { color: #000 !important; background: none !important; }
  .legal-keys, .legal .intro-note, .legal h2 { border-color: #999 !important; }
  .legal-wrap a::after { content: " (" attr(href) ")"; font-size: 0.8em; }
  .legal-wrap a[href^="#"]::after, .legal-wrap a[href="/confidentialite"]::after, .legal-wrap a[href="/conditions"]::after { content: ""; }
}

@media (prefers-reduced-motion: reduce) {
  .legal h2.flash { animation: none; }
}

/* Tactile (13/10/2026) : sommaire et boutons à 40 px ; recherche à 16 px (évite le zoom iOS à la saisie). */
@media (pointer: coarse) {
  .legal-toc li a { padding-block: 10px; min-height: 40px; align-items: center; }
  .lg-btn { min-height: 40px; padding-inline: 14px; }
  .lg-filter input, #lg-q { font-size: 1rem; min-height: 44px; }
}