/*
 * Sympa — global.css
 *
 * Reset, styles de base et helpers de mise en page.
 * tokens.css doit être chargé AVANT ce fichier (il fournit les variables).
 */

/* ── Reset minimaliste ──────────────────────────────────────────── */

*, *::before, *::after { box-sizing: border-box; }

/* Remet à zéro les marges par défaut du navigateur. */
* { margin: 0; }

html { -webkit-text-size-adjust: 100%; }

/* Images et médias : jamais plus larges que leur conteneur. */
img, picture, svg, video { display: block; max-width: 100%; }

/* Les champs de formulaire héritent de la typo du thème. */
input, button, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; }

/* Liens : l'apparence est définie par les classes (.s-link, etc.). */
a { color: inherit; text-decoration: none; }


/* ── Base : html & body ─────────────────────────────────────────── */

html, body {
  font-family: var(--font-sans);
  color: var(--color-fg);          /* encre #1A1A2E */
  background: var(--color-bg);     /* papier #FAF5EB — jamais de blanc pur */
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Titres natifs (hors classes .s-*) : héritent de la typo Sympa. */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-sans);
  color: var(--color-fg);
  line-height: 1.2;
}


/* ── Mise en page ───────────────────────────────────────────────── */

/* Conteneur principal — largeur max 1200px, centré. */
.s-container {
  max-width: var(--sympa-container-max);
  margin: 0 auto;
  padding: 0 var(--sympa-gutter-desktop);   /* 24px */
}

/* Sous-conteneur de lecture — largeur max 680px (confort de lecture). */
.s-reading { max-width: var(--sympa-container-reading); }

/* Espacement vertical entre les grandes sections.
 * Padding en longhand pour se composer avec la gouttière de
 * .s-container (le raccourci « padding » écraserait l'horizontal). */
.s-section        { padding-top: var(--sympa-space-24); padding-bottom: var(--sympa-space-24); }   /* 96px */
.s-section--tight { padding-top: var(--sympa-space-16); padding-bottom: var(--sympa-space-16); }   /* 64px */


/* ── Typographie (classes utilitaires) ──────────────────────────── */

.s-overline {
  font: 600 11px/16px var(--font-sans);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--sympa-brand-600);
}

.s-h1 { font: 700 44px/52px var(--font-sans); letter-spacing: -0.02em; color: var(--color-fg); }
.s-h2 { font: 600 32px/40px var(--font-sans); letter-spacing: -0.01em; color: var(--color-fg); }
.s-h3 { font: 600 22px/30px var(--font-sans); color: var(--color-fg); }
.s-h4 { font: 600 18px/26px var(--font-sans); color: var(--color-fg); }

.s-body    { font: 400 16px/24px var(--font-sans); color: var(--color-fg-muted); }
.s-body-lg { font: 400 18px/28px var(--font-sans); color: var(--color-fg-muted); }
.s-body-sm { font: 400 14px/20px var(--font-sans); color: var(--color-fg-muted); }

.s-link {
  color: var(--sympa-brand-600);
  transition: color var(--sympa-dur-sm) var(--sympa-ease-out);
}
.s-link:hover {
  color: var(--sympa-brand-700);
  text-decoration: underline;
  text-underline-offset: 4px;
}


/* ── Accessibilité : focus toujours visible ─────────────────────── */

:focus-visible {
  outline: 2px solid var(--sympa-brand-600);
  outline-offset: 2px;
}


/* ── Pages WP standards (.s-page) ─────────────────────────────────
 * Rendu commun à toutes les pages éditées dans Gutenberg via le
 * template page.php : Mentions légales, Confidentialité, et toute
 * future page « texte ». La page À propos a son propre template figé
 * (page-a-propos.php) et n'utilise PAS ces règles. */

.s-page {
  padding-top:    var(--sympa-space-16);  /* 64px */
  padding-bottom: var(--sympa-space-20);  /* 80px */
}

/* Le wrapper de lecture est centré horizontalement (760px max).
   Sans le margin auto, sur grand écran le contenu serait poussé
   à gauche dans .s-container 1200px — même piège qu'on a corrigé
   sur la page À propos. */
.s-page .s-reading {
  max-width: 760px;
  margin-left: auto;
  margin-right: auto;
}

.s-page__header {
  margin-bottom: var(--sympa-space-8);    /* 32px */
}
.s-page__title {
  font: 700 44px/52px var(--sympa-font-sans);
  letter-spacing: -0.02em;
  color: var(--sympa-ink-900);
  margin: 0;
}

/* Contenu Gutenberg : typo conforme au design system, échelle de
   titres réduite (le H1 du titre de page domine déjà). */
.s-page__content h2 {
  font: 700 28px/36px var(--sympa-font-sans);
  letter-spacing: -0.01em;
  color: var(--sympa-ink-900);
  margin: var(--sympa-space-10) 0 var(--sympa-space-4);  /* 40 ↑ · 16 ↓ */
}
.s-page__content h3 {
  font: 600 20px/28px var(--sympa-font-sans);
  color: var(--sympa-ink-900);
  margin: var(--sympa-space-6) 0 var(--sympa-space-2);   /* 24 ↑ ·  8 ↓ */
}
.s-page__content p {
  font: 400 16px/26px var(--sympa-font-sans);
  color: var(--sympa-ink-700);
  margin: 0 0 var(--sympa-space-4);       /* 16px */
}
.s-page__content ul,
.s-page__content ol {
  font: 400 16px/26px var(--sympa-font-sans);
  color: var(--sympa-ink-700);
  margin: 0 0 var(--sympa-space-4);
  padding-left: var(--sympa-space-6);     /* 24px */
}
.s-page__content li {
  margin-bottom: var(--sympa-space-1);    /*  4px */
}
.s-page__content a {
  color: var(--sympa-brand-600);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.s-page__content a:hover {
  color: var(--sympa-brand-700);
}
.s-page__content strong {
  color: var(--sympa-ink-900);
  font-weight: 600;
}
.s-page__content em {
  font-style: italic;
  color: var(--sympa-ink-500);
}


/* ── Responsive : mobile (≤ 768px) ──────────────────────────────── */

@media (max-width: 768px) {

  /* Gouttière réduite : 24px → 16px. */
  .s-container { padding: 0 var(--sympa-gutter-mobile); }

  /* Sections resserrées (règle « diviser l'espacement sur mobile »). */
  .s-section        { padding-top: var(--sympa-space-16); padding-bottom: var(--sympa-space-16); }   /* 64px */
  .s-section--tight { padding-top: var(--sympa-space-12); padding-bottom: var(--sympa-space-12); }   /* 48px */

  /* Grands titres mis à l'échelle pour les petits écrans. */
  .s-h1 { font-size: 32px; line-height: 38px; }
  .s-h2 { font-size: 24px; line-height: 30px; }

  /* Titre des pages WP rétréci, espacement vertical resserré. */
  .s-page             { padding-top: var(--sympa-space-10); padding-bottom: var(--sympa-space-16); }
  .s-page__title      { font-size: 32px; line-height: 40px; }
  .s-page__content h2 { font-size: 22px; line-height: 30px; }
}