/* =============================================================================
   Thème minimal sur mesure — site perso (Mab).
   Organisation :
     1. Variables (couleurs, typo, espacements)  — clair + sombre
     2. Reset léger
     3. Corps de texte (typographie de lecture)
     4. Châssis (header / nav / footer / layout)
     5. Responsive
   Les éléments savants (équations, figures, notes, citations, refs) sont
   ajoutés dans une section dédiée à l'étape suivante.
   ============================================================================= */


/* -----------------------------------------------------------------------------
   1. VARIABLES
   -------------------------------------------------------------------------- */
:root {
  /* Polices — piles système, zéro dépendance externe. */
  --font-serif: Charter, "Bitstream Charter", "Sitka Text", Cambria,
                "Iowan Old Style", Georgia, serif;
  --font-sans:  system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono:  ui-monospace, "SF Mono", "Cascadia Code", Menlo, Consolas, monospace;

  /* Typographie de lecture. */
  --line-height: 1.65;
  --measure: 68ch;          /* largeur de lecture ~68 caractères */

  /* Rythme vertical : un pas de base et ses multiples. */
  --space: 1.5rem;
  --space-lg: calc(var(--space) * 2);

  /* Palette — mode clair (tons chauds, pas de noir/blanc purs). */
  --bg:      #fdfcf9;       /* fond blanc cassé chaud */
  --text:    #1f2328;       /* texte principal */
  --muted:   #5c636e;       /* méta, légendes, atténué */
  --accent:  #0f5a8a;       /* liens (bleu encre) */
  --accent-muted: #a9c2d4;  /* accent atténué (filet de citation) */
  --border:  #e5e2d9;       /* filets, bordures */
  --surface: #f4f1ea;       /* fond des blocs (citations, code) */
}

/* Mode sombre via préférence système — simple surcharge des variables. */
@media (prefers-color-scheme: dark) {
  :root {
    --bg:      #16181d;
    --text:    #d7dae0;
    --muted:   #9aa1ad;
    --accent:  #7fb6e0;
    --accent-muted: #3f5e75;
    --border:  #2c3038;
    --surface: #1d2026;
  }
}


/* -----------------------------------------------------------------------------
   2. RESET LÉGER
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

body, h1, h2, h3, h4, p, ul, ol, figure, blockquote {
  margin: 0;
}

img { max-width: 100%; height: auto; display: block; }


/* -----------------------------------------------------------------------------
   3. CORPS DE TEXTE (typographie de lecture)
   -------------------------------------------------------------------------- */
html {
  font-size: 19px;          /* taille de base confortable */
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--font-serif);
  line-height: var(--line-height);
  color: var(--text);
  background: var(--bg);
  /* Mise en page verticale : header / main / footer. */
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

/* Conteneur de lecture : largeur de ligne limitée, centré. */
.prose {
  max-width: var(--measure);
}

/* Paragraphes et listes : rythme vertical régulier. */
.prose p,
.prose ul,
.prose ol {
  margin-block: var(--space);
}

.prose ul,
.prose ol {
  padding-left: 1.4em;
}

.prose li { margin-block: 0.3em; }

/* Titres — serif, resserrés, avec un peu d'air au-dessus. */
h1, h2, h3, h4 {
  font-family: var(--font-serif);
  line-height: 1.25;
  font-weight: 600;
}

.prose h1 { font-size: 2em;    margin-block: 0 var(--space); }
.prose h2 { font-size: 1.5em;  margin-block: var(--space-lg) var(--space); }
.prose h3 { font-size: 1.25em; margin-block: var(--space-lg) var(--space); }
.prose h4 { font-size: 1.05em; margin-block: var(--space) calc(var(--space) / 2); }

/* Liens — soulignés discrètement, sans gras, sans transition gratuite. */
a {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-thickness: 1px;
}
a:hover { text-decoration-thickness: 2px; }

/* Emphase typographique. */
strong { font-weight: 600; }
em { font-style: italic; }

/* Code inline (les blocs de code seront traités avec les éléments savants). */
code {
  font-family: var(--font-mono);
  font-size: 0.9em;
}


/* -----------------------------------------------------------------------------
   4. CHÂSSIS (header / nav / footer / layout)
   -------------------------------------------------------------------------- */

/* En-tête : titre à gauche, nav à droite ; wrappe sur mobile (pas de hamburger). */
.site-header {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem var(--space);
  max-width: var(--measure);
  width: 100%;
  margin: 0 auto;
  padding: var(--space) var(--space) 0;
}

.site-title {
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: 1.15em;
  color: var(--text);
  text-decoration: none;
}

/* Nav — sans-serif (le « châssis » se distingue du corps en serif). */
.site-nav {
  font-family: var(--font-sans);
  font-size: 0.95rem;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space);
}
.site-nav a {
  color: var(--muted);
  text-decoration: none;
}
.site-nav a:hover { color: var(--accent); }

/* Zone de contenu : colonne unique fluide, centrée. */
.content {
  flex: 1 0 auto;          /* pousse le footer en bas même si peu de contenu */
  width: 100%;
  max-width: var(--measure);
  margin: 0 auto;
  padding: var(--space-lg) var(--space);
}
.content > .prose,
.content > .article { max-width: none; } /* déjà borné par .content */

/* Pied de page — filet fin, texte atténué, sans-serif. */
.site-footer {
  font-family: var(--font-sans);
  font-size: 0.85rem;
  color: var(--muted);
  max-width: var(--measure);
  width: 100%;
  margin: 0 auto;
  padding: var(--space) var(--space) var(--space-lg);
  border-top: 1px solid var(--border);
}


/* -----------------------------------------------------------------------------
   5. ÉLÉMENTS SAVANTS (équations, figures, notes, citations, tableaux, code)
   -------------------------------------------------------------------------- */

/* Blocs d'équations (KaTeX, étape 3) : air vertical généreux, centrés,
   défilement horizontal pour les formules longues sur mobile.
   overflow-y: hidden évite une barre verticale parasite. */
.katex-display {
  margin-block: var(--space-lg);
  overflow-x: auto;
  overflow-y: hidden;
  text-align: center;
}

/* Figures : image centrée, légende sans-serif plus petite, italique, atténuée. */
figure {
  margin-block: var(--space-lg);
  text-align: center;
}
figure img { margin-inline: auto; }   /* img est en display:block (cf. reset) */

figcaption {
  margin-top: calc(var(--space) / 2);
  font-family: var(--font-sans);
  font-size: 0.85em;
  font-style: italic;
  color: var(--muted);
  text-align: center;
}

/* Notes de bas de page (rendues par Zola en fin de contenu).
   La première note du groupe reçoit un filet de séparation au-dessus :
   sélectionne la .footnote-definition non précédée d'une autre. */
.footnote-definition {
  font-size: 0.85em;
  color: var(--muted);
  margin-block: 0.4em;
}
:not(.footnote-definition) + .footnote-definition {
  margin-top: var(--space-lg);
  padding-top: var(--space);
  border-top: 1px solid var(--border);
}
/* Le numéro de note précède le texte sur la même ligne. */
.footnote-definition > p:first-of-type { display: inline; }
.footnote-definition-label { margin-right: 0.4em; }
/* Après un clic de renvoi, la note ciblée est légèrement surlignée. */
.footnote-definition:target {
  background: var(--surface);
}

/* Citations / références : filet vertical accent atténué, léger retrait,
   pas d'italique forcée. */
blockquote {
  margin-block: var(--space);
  margin-inline: 0;
  padding-left: var(--space);
  border-left: 3px solid var(--accent-muted);
  color: var(--text);
}

/* Tableaux : filets horizontaux fins seulement, padding confortable.
   display:block + overflow-x:auto → défilement si le tableau est trop large. */
table {
  display: block;
  overflow-x: auto;
  border-collapse: collapse;
  margin-block: var(--space);
  font-size: 0.95em;
}
th, td {
  padding: 0.5em 0.7em;
  text-align: left;
  border-bottom: 1px solid var(--border);
}
thead th { border-bottom: 2px solid var(--border); }

/* Blocs de code : fond sobre, défilement horizontal, mono, sans coloration
   (cohérent avec highlight_code = false). */
pre {
  background: var(--surface);
  padding: var(--space);
  margin-block: var(--space);
  overflow-x: auto;
  border-radius: 4px;
  font-size: 0.9em;
  line-height: 1.5;
}
pre code {
  font-family: var(--font-mono);
  font-size: 1em;        /* taille déjà réduite par <pre> */
}

/* Références bibliographiques (shortcode `references`) : sans-serif plus petit,
   interligne aéré, retrait pendant (hanging indent). Fonctionne pour des
   entrées en liste numérotée comme en paragraphes. */
.references {
  font-family: var(--font-sans);
  font-size: 0.85em;
  line-height: 1.5;
  margin-block: var(--space-lg);
}
.references ol,
.references ul {
  padding-left: 1.8em;       /* gouttière → le numéro « pend » à gauche */
  margin-block: var(--space);
}
.references li { margin-block: 0.5em; }
/* Entrées rédigées en paragraphes : retrait pendant explicite. */
.references p {
  padding-left: 1.8em;
  text-indent: -1.8em;
  margin-block: 0.5em;
}


/* -----------------------------------------------------------------------------
   6. RESPONSIVE
   -------------------------------------------------------------------------- */
@media (max-width: 34rem) {
  html { font-size: 18px; }   /* léger ajustement mobile */

  /* Sur petit écran, la nav passe sous le titre, alignée à gauche. */
  .site-header { flex-direction: column; gap: 0.4rem; }
  .site-nav { gap: var(--space); }
}