/* =========================================================================
   K&B Consulting — Styles partagés des pages légales / documentaires
   (Mentions légales, Politique de confidentialité, CGU, CGV).
   S'appuie sur les variables de styles.css.
   ========================================================================= */

.doc-head{ padding-top:120px; padding-bottom:8px; }
.doc-head .eyebrow{ margin-bottom:16px; }
.doc-head h1{ max-width:20ch; }
.doc-updated{
  display:inline-flex; align-items:center; gap:8px; margin-top:18px;
  font-size:13px; font-weight:600; color:var(--muted);
  background:var(--surface); border:1px solid var(--line);
  border-radius:var(--r-pill); padding:6px 14px;
}
.doc-updated .dot{ width:7px; height:7px; border-radius:50%; background:var(--good); }

/* Mise en page : sommaire collant + contenu */
.doc-layout{
  display:grid; grid-template-columns:230px 1fr; gap:56px;
  padding-top:40px; padding-bottom:96px; align-items:start;
}
.doc-toc{ position:sticky; top:96px; }
.doc-toc h4{
  font-family:var(--font-display); font-size:12px; font-weight:600; letter-spacing:.1em;
  text-transform:uppercase; color:var(--muted-soft); margin:0 0 14px;
}
.doc-toc a{
  display:block; padding:7px 0; font-size:14px; color:var(--muted);
  text-decoration:none; border-left:2px solid transparent; padding-left:14px;
  margin-left:-16px; transition:color .18s, border-color .18s;
}
.doc-toc a:hover{ color:var(--ink); border-color:var(--line); }

/* Contenu */
.doc-content{ max-width:72ch; }
.doc-content section{ scroll-margin-top:100px; }
.doc-content section + section{ margin-top:44px; }
.doc-content h2{
  font-family:var(--font-display); font-size:22px; color:var(--ink);
  margin:0 0 16px; display:flex; align-items:baseline; gap:12px;
}
.doc-content h2 .doc-num{ color:var(--accent); font-size:15px; font-weight:600; }
.doc-content h3{ font-family:var(--font-display); font-size:16px; color:var(--ink-soft); margin:24px 0 8px; }
.doc-content p, .doc-content li{ color:var(--muted); line-height:1.75; font-size:15.5px; }
.doc-content p{ margin:0 0 12px; }
.doc-content ul{ margin:0 0 12px; padding-left:20px; }
.doc-content li{ margin-bottom:6px; }
.doc-content a{ color:var(--accent-ink); text-decoration:underline; text-underline-offset:2px; }
.doc-content strong{ color:var(--ink-soft); }

/* Tableau simple (ex. données collectées, cookies) */
.doc-table{ width:100%; border-collapse:collapse; margin:8px 0 16px; font-size:14.5px; }
.doc-table th, .doc-table td{ text-align:left; padding:10px 12px; border:1px solid var(--line); vertical-align:top; color:var(--muted); }
.doc-table th{ background:var(--paper); color:var(--ink-soft); font-weight:600; font-family:var(--font-display); }

/* Marqueur "à compléter" — surbrillance jaune bien visible */
.doc-fill{
  background:#FEF3C7; color:#92400E; font-weight:600;
  padding:1px 7px; border-radius:6px; border:1px dashed #F59E0B; white-space:nowrap;
}

/* Encart d'avertissement (relecture pro, etc.) */
.doc-note{
  display:flex; gap:12px; align-items:flex-start; margin:0 0 28px;
  background:var(--accent-wash); border:1px solid color-mix(in srgb,var(--accent) 25%, var(--line));
  border-radius:var(--r); padding:16px 18px; color:var(--ink-soft); font-size:14px; line-height:1.6;
}
.doc-note svg{ flex:0 0 auto; width:20px; height:20px; color:var(--accent); margin-top:1px; }

@media (max-width:860px){
  .doc-layout{ grid-template-columns:1fr; gap:0; }
  .doc-toc{ position:static; margin-bottom:32px; padding-bottom:24px; border-bottom:1px solid var(--line); }
  .doc-head{ padding-top:104px; }
}