/* Pages de contenu (guides, FAQ, histoire, pages légales, pages système).
   Complète site.css sans le modifier : uniquement ce que site.css ne couvre pas. */

/* En-tête de page de contenu */
.page-head { padding-top: 40px; padding-bottom: 8px; }
.page-head .lead { max-width: 680px; }

/* Sommaire (guides) */
.prose .toc { background: var(--g25); border: 1px solid var(--g200); border-radius: var(--r-lg); padding: 22px 26px; margin: 0 0 32px; }
.prose .toc h2 { font-size: 17px; margin: 0 0 10px; letter-spacing: 0; }
.prose .toc ol { margin: 0; font-size: 16px; }
.prose .toc li + li { margin-top: 4px; }

/* Encadré d'information (pages légales) */
.prose .info-box { background: var(--g25); border: 1px solid var(--g200); border-radius: var(--r-md); padding: 18px 22px; margin: 0 0 16px; }
.prose .info-box p { margin: 0; }
.prose h2[id], .faq-group, .faq details[id] { scroll-margin-top: 24px; }

/* FAQ : catégories à gauche, questions à droite */
.faq-layout { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 56px; align-items: start; }
.faq-cats { position: sticky; top: 24px; display: flex; flex-direction: column; gap: 2px; font-size: 15px; }
.faq-cats b { font-size: 14px; color: var(--g500); font-weight: 600; margin-bottom: 8px; }
.faq-cats a { color: var(--g600); padding: 8px 0; }
.faq-cats a:hover { color: var(--accent); }
.faq-group + .faq-group { margin-top: 56px; }
.faq-group h2 { margin-bottom: 16px; }
.faq .faq-a ul, .faq .faq-a ol { margin: 10px 0; padding-left: 22px; }
.faq .faq-a li + li { margin-top: 4px; }
.faq .faq-a p + ul, .faq .faq-a ul + p { margin-top: 10px; }
.faq .faq-alert { background: var(--warn-bg); color: var(--ink); border-radius: var(--r-md); padding: 14px 16px; }
@media (max-width: 860px) {
  .faq-layout { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .faq-cats { position: static; flex-direction: row; flex-wrap: wrap; gap: 8px; }
  .faq-cats b { width: 100%; margin: 0; }
  .faq-cats a { padding: 0 12px; min-height: 36px; display: inline-flex; align-items: center; border: 1px solid var(--g200); border-radius: 999px; background: var(--g25); font-size: 14px; }
}

/* Citation (histoire) */
.quote { margin: 0; padding: 4px 0 4px 24px; border-left: 3px solid var(--ink); font-size: 20px; line-height: 1.55; font-weight: 500; color: var(--ink); max-width: 760px; }
.big-word { font-size: 40px; font-weight: 700; letter-spacing: -0.02em; line-height: 1; }

/* Pages système (404) */
.system { max-width: 720px; margin: 0 auto; padding: 96px 32px 120px; display: flex; flex-direction: column; align-items: center; gap: 22px; text-align: center; }
.system .icon { width: 88px; height: 88px; transform: rotate(-8deg); }
.system .title { font-family: var(--font-accent); font-weight: 900; font-size: clamp(40px, 5vw, 60px); line-height: 1.05; letter-spacing: -0.01em; }
.system .lead { max-width: 560px; }
.system .row { justify-content: center; }
.system-card { width: 100%; max-width: 560px; text-align: left; }
.system-card ol { margin: 0; padding-left: 22px; color: var(--g600); font-size: 16px; }
.system-card li + li { margin-top: 6px; }
@media (max-width: 640px) { .system { padding: 64px 16px 88px; } }