/* ===== Docs (HTML converti depuis Markdown par Pandoc) ===== */

/* Variables */
:root {
  --fg: #0f172a;              /* texte */
  --muted: #475569;           /* texte secondaire */
  --link: #2563eb;            /* liens */
  --border: #e2e8f0;          /* séparateurs */
  --bg-code: #0b1020;         /* fond code bloc */
  --fg-code: #e5e7eb;         /* texte code bloc */
  --table-stripe: #f8fafc;    /* zebra tables */
}

/* Couleurs supplémentaires */
:root {
  --blue-strong: #2563eb;   /* bleu vif */
  --border-strong: #cbd5e1; /* slate-300 */
  --panel-bg: #ffffff;      /* fond léger pour contraster avec la page */
}
@media (prefers-color-scheme: dark) {
  :root {
    --blue-strong: #60a5fa;   /* bleu vif en dark */
    --border-strong: #1f2937; /* gray-800 */
    --panel-bg: #0b1220;      /* fond adapté dark */
  }
}

/* Titres h1/h2 en bleu vif */
.doc h1,
.doc h2 {
  color: var(--blue-strong);
}
/* Scopage : ne s’applique qu’à l’article .doc */
.doc {
  color: var(--fg);
  line-height: 1.65;
  font-size: 16px;
}

/* Titres */
.doc h1, .doc h2, .doc h3, .doc h4, .doc h5, .doc h6 {
  font-family: Poppins, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  font-weight: 700;
  line-height: 1.25;
  margin: 1.6em 0 .6em;
  scroll-margin-top: 5rem; /* ancrages */
}

.doc h1 { font-size: 2.0rem; font-weight: 700; }
.doc h2 { font-size: 1.6rem; }
.doc h3 { font-size: 1.25rem; }
.doc h4 { font-size: 1.1rem;  }
.doc h5 { font-size: 1.0rem;  text-transform: uppercase; letter-spacing: .02em; color: var(--muted); }
.doc h6 { font-size: .95rem;  color: var(--muted); }

/* Paragraphe & éléments inlines */
.doc p { margin: .8em 0; }
.doc strong { font-weight: 700; }
.doc em { font-style: italic; }
.doc hr { border: 0; border-top: 1px solid var(--border); margin: 2rem 0; }

/* Liens */
.doc a { color: var(--link); text-decoration: none; }
.doc a:hover { text-decoration: underline; }

/* Listes */
.doc ul, .doc ol { margin: .6em 0 .6em 1.4em; }
.doc li { margin: .2em 0; }
.doc ul ul, .doc ol ol, .doc ul ol, .doc ol ul { margin-top: .2em; margin-bottom: .2em; }

/* Citations */
.doc blockquote {
  margin: 1em 0;
  padding: .75em 1em;
  border-left: 4px solid var(--border);
  background: #f8fafc;
}
.doc blockquote > :first-child { margin-top: 0; }
.doc blockquote > :last-child { margin-bottom: 0; }

/* Code */
.doc code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  font-size: .95em;
  background: #f1f5f9;
  padding: .1em .35em;
  border-radius: .25rem;
}
.doc pre {
  overflow: auto;
  background: var(--bg-code);
  color: var(--fg-code);
  border-radius: .5rem;
  padding: 1rem;
  margin: 1rem 0;
}
.doc pre > code { background: transparent; padding: 0; color: inherit; }

/* Tables */
.doc table {
  width: 100%;
  border-collapse: collapse;
  margin: 1rem 0;
}
.doc thead th {
  text-align: left;
  border-bottom: 2px solid var(--border);
  padding: .5rem .6rem;
}
.doc tbody td {
  border-bottom: 1px solid var(--border);
  padding: .5rem .6rem;
}
.doc tbody tr:nth-child(odd) { background: var(--table-stripe); }
.doc caption {
  caption-side: bottom;
  color: var(--muted);
  font-size: .9em;
  padding-top: .4rem;
}

/* Images */
.doc img { max-width: 100%; height: auto; }

/* Notes de bas de page (Pandoc) */
.doc .footnotes { font-size: .9em; color: var(--muted); }
.doc .footnotes hr { margin-top: 2rem; }
.doc .footnote-back { text-decoration: none; margin-left: .25rem; }

/* Accessoires */
.doc h1[id]::before,
.doc h2[id]::before,
.doc h3[id]::before,
.doc h4[id]::before,
.doc h5[id]::before,
.doc h6[id]::before {
  content: "§";
  opacity: 0;
  margin-right: .4rem;
  color: #94a3b8;
  transition: opacity .15s ease-in-out;
}
.doc h1[id]:hover::before,
.doc h2[id]:hover::before,
.doc h3[id]:hover::before,
.doc h4[id]:hover::before,
.doc h5[id]:hover::before,
.doc h6[id]:hover::before { opacity: .9; }

/* Bordures latérales + padding confort (desktop & tablettes) */
@media (min-width: 640px) {
  .doc {
    border-left: 2px solid var(--border-strong);
    border-right: 2px solid var(--border-strong);
    padding-inline: 2rem;      /* confortable */
    border-radius: 12px;
    background: var(--panel-bg);
  }
}

/* Sur mobile : aucune bordure, padding normal (hérité) */
@media (max-width: 639.98px) {
  .doc {
    border: none;
    padding-inline: 0;         /* laisse le container gérer le padding global */
  }
}