/*
 * tokens.css — Système de design pour fosse.fr
 *
 * Ce fichier est la source unique de vérité pour tous les paramètres
 * visuels du site : variables, réinitialisations, et classes CSS
 * réutilisées dans l'ensemble des templates.
 *
 * Modifier ce fichier propage les changements à l'ensemble du site.
 * Les templates HTML ne contiennent aucune couleur, police ou taille
 * codée en dur — seulement des noms de classes et des variables.
 */


/* ═══════════════════════════════════════════════════════════════
   1. Variables
   ═══════════════════════════════════════════════════════════════ */

:root {

  /* — Couleurs ————————————————————————————————————————————————— */
  --c-bg:       #faf9f7;   /* fond de page                        */
  --c-text:     #1c1b18;   /* texte courant                       */
  --c-muted:    #7a736a;   /* texte secondaire, métadonnées, nav  */
  --c-border:   #e5e0d8;   /* séparateurs de liste                */
  --c-rule:     #d8d3cb;   /* filets <hr>                         */
  --c-accent:   #8b1f1f;   /* liens actifs, survols (bordeaux)    */

  /* — Typographie ————————————————————————————————————————————— */
  --f-serif:    'EB Garamond', Georgia, serif;

  --fs-body:    18.5px;    /* corps des articles et notes         */
  --fs-intro:   1.1rem;    /* chapô / bio en page d'accueil       */
  --fs-list:    1.05rem;   /* titres dans les listes              */
  --fs-ui:      0.9rem;    /* navigation                          */
  --fs-small:   0.88rem;   /* dates, lien de retour               */
  --fs-label:   0.7rem;    /* rubriques en petites capitales      */
  --fs-h1-sm:   1.6rem;    /* titre pages secondaires et notes    */
  --fs-h1-lg:   2.25rem;   /* titre des articles longs            */

  --lh-body:    1.78;      /* interligne texte courant            */
  --p-gap:      1.5em;     /* marge basse des paragraphes         */

  /* — Mise en page ———————————————————————————————————————————— */
  --max-w:        960px;   /* largeur maximale de la colonne      */
  --pad-x:        28px;    /* marge horizontale de page           */
  --pad-top:      64px;    /* marge haute de page                 */
  --pad-bot:      120px;   /* marge basse de page                 */
  --header-mb:    72px;    /* espace entre le header et le corps  */
  --list-py:      11px;    /* padding vertical des lignes de liste*/
  --section-mb:   48px;    /* espace entre les sections           */
  --footer-mt:    72px;    /* marge haute du pied de page         */
}


/* ═══════════════════════════════════════════════════════════════
   2. Réinitialisations
   ═══════════════════════════════════════════════════════════════ */

*, *::before, *::after { box-sizing: border-box; }
body { background: var(--c-bg); margin: 0; }


/* ═══════════════════════════════════════════════════════════════
   3. Mise en page
   ═══════════════════════════════════════════════════════════════ */

/* Colonne principale de page */
.page {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: var(--pad-top) var(--pad-x) var(--pad-bot);
  font-family: var(--f-serif);
  color: var(--c-text);
}

/* Barre de navigation en haut */
.page-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: var(--header-mb);
}

/* Pied de page avec lien de retour */
.page-footer {
  margin-top: var(--footer-mt);
  padding-top: 28px;
  border-top: 1px solid var(--c-border);
}


/* ═══════════════════════════════════════════════════════════════
   4. Navigation
   ═══════════════════════════════════════════════════════════════ */

/* Nom du site (lien vers l'accueil) */
.site-name {
  font-size: var(--fs-list);
  color: var(--c-text);
  text-decoration: none;
  letter-spacing: 0.01em;
}
.site-name:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}

/* Rangée de liens nav */
.nav {
  display: flex;
  gap: 28px;
  align-items: baseline;
}

/* Lien nav secondaire */
.nav-link {
  font-size: var(--fs-ui);
  color: var(--c-muted);
  text-decoration: none;
}
.nav-link:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}

/* Lien nav de la page active */
.nav-link-current {
  font-size: var(--fs-ui);
  color: var(--c-text);
  text-decoration: none;
  font-style: italic;
}


/* ═══════════════════════════════════════════════════════════════
   5. Typographie générale
   ═══════════════════════════════════════════════════════════════ */

/* Titre long — article */
.title-lg {
  font-size: var(--fs-h1-lg);
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--c-text);
  margin: 0 0 20px 0;
  text-wrap: pretty;
}

/* Titre court — note (à l'intérieur d'un .title-header) */
.title-sm {
  font-size: var(--fs-h1-sm);
  font-weight: 400;
  line-height: 1.25;
  color: var(--c-text);
  margin: 0 0 14px 0;
  text-wrap: pretty;
}

/* Titre de page seul — À propos, Archives */
.title-page {
  font-size: var(--fs-h1-sm);
  font-weight: 400;
  line-height: 1.25;
  color: var(--c-text);
  margin: 0 0 var(--section-mb) 0;
}

/* Bloc titre + date (article ou note) */
.title-header {
  margin-bottom: 36px;
}

/* Métadonnée — date, lieu, etc. */
.meta {
  font-size: var(--fs-small);
  color: var(--c-muted);
  font-style: italic;
  margin: 0;
}

/* Rubrique en capitales (ESSAIS, NOTES, 2026…) */
.section-label {
  font-size: var(--fs-label);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--c-muted);
  margin: 0 0 18px 0;
  font-weight: 400;
}

/* Filet de séparation */
.divider {
  border: none;
  border-top: 1px solid var(--c-rule);
  margin: 0 0 40px 0;
}


/* ═══════════════════════════════════════════════════════════════
   6. Corps de texte (articles et notes)
   ═══════════════════════════════════════════════════════════════ */

.body-text {
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--c-text);
  font-family: var(--f-serif);
}

.body-text p {
  text-wrap: pretty;
  hyphens: auto;
  margin: 0 0 var(--p-gap) 0;
}

.body-text p:last-child {
  margin-bottom: 0;
}

/* Sous-titre de section dans le corps */
.body-text h2 {
  font-size: var(--fs-label);
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--c-muted);
  margin: 2em 0 0.75em 0;
  font-weight: 400;
  font-family: var(--f-serif);
}

/* Citation en retrait */
.body-text blockquote {
  margin: 2em 0;
  padding: 0 0 0 24px;
  border-left: 2px solid var(--c-rule);
}

.body-text blockquote p {
  font-style: italic;
  opacity: 0.75;
  margin: 0;
}


/* ═══════════════════════════════════════════════════════════════
   7. Listes (index, archives)
   ═══════════════════════════════════════════════════════════════ */

/* Ligne d'un titre dans une liste */
.list-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  padding: var(--list-py) 0;
  border-bottom: 1px solid var(--c-border);
}

/* Titre cliquable dans une liste */
.list-link {
  font-size: var(--fs-list);
  color: var(--c-text);
  text-decoration: none;
  flex: 1;
  line-height: 1.35;
}
.list-link:hover { color: var(--c-accent); }

/* Date ou métadonnée dans une list-row */
.list-row .meta {
  flex-shrink: 0;
}

/* Conteneur badge + date dans les archives */
.list-meta {
  display: flex;
  gap: 16px;
  align-items: baseline;
  flex-shrink: 0;
}

/* Alignement à droite de la date dans les archives */
.list-meta .meta {
  min-width: 30px;
  text-align: right;
}

/* Badge de type — « essai » ou « note » */
.type-badge {
  font-size: var(--fs-label);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--c-muted);
}


/* ═══════════════════════════════════════════════════════════════
   8. Liens
   ═══════════════════════════════════════════════════════════════ */

/* Lien coloré bordeaux (inline dans le texte) */
.accent-link {
  color: var(--c-accent);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}
.accent-link:hover { text-decoration: none; }

/* Lien de retour « ← Retour » */
.back-link {
  font-size: var(--fs-small);
  color: var(--c-muted);
  text-decoration: none;
  font-family: var(--f-serif);
}
.back-link:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}


/* ═══════════════════════════════════════════════════════════════
   9. Composants
   ═══════════════════════════════════════════════════════════════ */

/* Bio / chapô de la page d'accueil */
.bio {
  font-size: var(--fs-intro);
  line-height: var(--lh-body);
  color: var(--c-text);
  margin: 0 0 64px 0;
  text-wrap: pretty;
}


/* ═══════════════════════════════════════════════════════════════
   10. Divers
   ═══════════════════════════════════════════════════════════════ */

img {
  max-width: 100%;
  height: auto;
  display: block;
  margin: 2rem 0;
  border: none;
}

.center {
  display: block;
  text-align: center;
  margin-left: auto;
  margin-right: auto;
}

code {
  font-family: 'Courier New', 'Courier', monospace;
  font-size: 0.875em;
  padding: 0.1em 0.3em;
  border-radius: 2px;
}

pre {
  overflow-x: auto;
  margin: 1.5rem 0;
  padding: 1.25rem;
  border: none;
}

pre code {
  background: none;
  padding: 0;
  font-size: 0.875rem;
}