/* ==========================================================================
   BIMsmarter.eu - legal.css (refonte "Calques", octobre 2026)
   Pages juridiques : /cgu, /cgv, /cookies, /rgpd (noindex), front-matter
   page_css. Priorite a la lisibilite d'un texte long :
     - page de garde navy avec le cartouche du document (date, version,
       droit applicable) ;
     - colonne de lecture d'environ 760 px, sommaire fixe a gauche des
       1100 px (au-dessus du texte en dessous) ;
     - articles separes par un filet, tableaux en nomenclature qui passent
       en fiches sur mobile (libelles repris de l'en-tete via data-l).
   Le texte juridique n'est pas modifie : les titres en capitales du
   source sont seulement affiches en casse de phrase (text-transform), les
   sigles restent en capitales (.up).
   ========================================================================== */

/* ---------- Page de garde ---------- */
/* Marges et taille du titre : celles du hero commun (site.css) */
.hero--legal h1 { text-transform: lowercase; }
.hero--legal h1::first-letter { text-transform: uppercase; }
.hero--legal h1 .up { text-transform: uppercase; }
.hero--legal .lead { margin: 18px 0 0; }

/* Cartouche du document : cases a filets fusionnes */
.doc-meta {
  display: flex; flex-wrap: wrap; width: fit-content; max-width: 100%;
  margin: 32px 0 0; padding: 0 1px 1px 0;
}
.doc-meta > div { margin: 0 -1px -1px 0; padding: 10px 18px 12px; border: 1px solid rgba(255, 255, 255, 0.3); }
.doc-meta dt { font-size: 0.75rem; font-weight: 500; line-height: 1.3; color: var(--on-navy-muted); }
.doc-meta dd { margin: 3px 0 0; font-size: 0.9375rem; font-weight: 500; line-height: 1.35; color: #fff; }

/* ---------- Mise en page : sommaire + colonne de lecture ---------- */
.legal-grid { display: grid; gap: 40px; }
.legal-grid > * { width: 100%; max-width: 760px; margin-inline: auto; }
@media (min-width: 1100px) {
  .legal-grid {
    grid-template-columns: minmax(200px, 250px) minmax(0, 760px);
    column-gap: clamp(48px, 6vw, 88px); justify-content: center; align-items: start;
  }
  .legal-grid > * { margin-inline: 0; }
  .legal-toc {
    position: sticky; top: calc(var(--bar) + 28px);
    max-height: calc(100vh - var(--bar) - 56px); overflow-y: auto; overscroll-behavior: contain;
  }
}

/* Sommaire */
.legal-toc { border-top: 1.5px solid var(--navy); padding-top: 14px; }
.legal-toc h2 {
  margin: 0 0 8px; max-width: none;
  font: 600 0.875rem/1.3 var(--font); letter-spacing: 0; color: var(--navy);
  text-transform: lowercase;
}
.legal-toc h2::first-letter { text-transform: uppercase; }
.legal-toc ul { list-style: none; margin: 0; padding: 0; }
.legal-toc li { margin: 0; border-bottom: 1px solid var(--rule); }
.legal-toc a {
  display: block; padding: 8px 0;
  font-size: 0.875rem; line-height: 1.4; color: var(--text-muted); text-decoration: none;
  transition: color 0.2s;
}
.legal-toc a:hover { color: var(--accent-dark); text-decoration: underline; }
@media (min-width: 640px) and (max-width: 1099px) {
  .legal-toc ul { columns: 2; column-gap: 32px; }
  .legal-toc li { break-inside: avoid; }
}

/* ---------- Texte ---------- */
.legal-body { margin: 0; }
.legal-body > :first-child { margin-top: 0; }
.legal-body > h2 {
  margin: 56px 0 18px; padding-top: 26px; border-top: 1px solid var(--rule-strong);
  font-size: clamp(1.5rem, 1.25rem + 1vw, 2rem); max-width: none;
}
.legal-body > h2:first-child, .legal-body > .tldr + h2 { margin-top: 0; }
.legal-body > h3 { margin: 32px 0 10px; font-size: 1.125rem; }
.legal-body > h3 + p { margin-top: 0; }
.legal-body ul { padding-left: 1.2em; }
.legal-body li { margin-bottom: 0.55em; }
.legal-body .tldr { font-size: 1.0313rem; }

/* ---------- Tableaux en nomenclature ---------- */
/* Filet bas du cadre : le .table-wrap commun (overflow-x) le rognait et le
   filet clair de la derniere ligne prenait le pas sur le cadre navy. */
.legal-body .table-wrap { margin: 24px 0 28px; padding: 1px 0; }
.legal-body tbody tr:last-child > * { border-bottom: 0; }
.legal-body .table-wrap table { min-width: 0; }
.legal-body table { font-size: 0.9375rem; }
.legal-body td:first-child { color: var(--navy); font-weight: 600; }
.legal-body .kv tbody th { width: 34%; color: var(--text-muted); font-weight: 500; }
.legal-body .kv td:first-child { font-weight: 400; color: var(--text); }

@media (max-width: 640px) {
  .legal-body .table-wrap { overflow: visible; }
  .legal-body table, .legal-body tbody, .legal-body tr, .legal-body th, .legal-body td { display: block; width: auto; }
  .legal-body thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .legal-body tbody tr { padding: 12px 14px 14px; border-bottom: 1px solid var(--rule); }
  .legal-body tbody tr:last-child { border-bottom: 0; }
  .legal-body th, .legal-body td { padding: 0; border: 0; }
  .legal-body tbody th, .legal-body td:first-child { margin-bottom: 4px; }
  .legal-body td[data-l] { margin-top: 8px; }
  .legal-body td[data-l]::before {
    content: attr(data-l); display: block; margin-bottom: 1px;
    font-size: 0.75rem; font-weight: 500; color: var(--text-muted);
  }
  .legal-body .kv tbody th { width: auto; font-size: 0.8125rem; margin-bottom: 2px; }
}

/* ---------- Pied de document (CGU) : cartouche de contact ---------- */
.legal-foot {
  display: grid; gap: 1.5px; margin-top: 56px;
  background: var(--navy); border: 1.5px solid var(--navy);
}
.legal-foot > div { background: var(--bg); padding: 20px 22px; }
.legal-foot p { margin: 0; font-size: 0.9375rem; }
.lf-contact p + p { margin-top: 6px; }
.lf-contact strong { display: block; margin-top: 10px; font-size: 0.75rem; font-weight: 500; color: var(--text-muted); }
.lf-links p + p { margin-top: 4px; }
.lf-links a { font-size: 0.8125rem; font-weight: 500; }
.lf-sign { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 24px; }
.lf-sign p { font-size: 0.875rem; color: var(--text-muted); }
.lf-sign strong { font-family: var(--font); font-weight: 400; font-size: 1rem; color: var(--navy); }
@media (min-width: 640px) {
  .legal-foot { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .lf-sign { grid-column: 1 / -1; }
}