/* fosse.fr — feuille de style
   Principe : aucune classe, aucun identifiant de style. Tout repose sur les
   balises HTML5 (header, nav, main, article, aside, section, figure, footer…).
   Polices : celles du système, rien n'est chargé depuis l'extérieur.
   - Georgia  : titres et texte
   - Helvetica : interface (navigation, métadonnées, sources)

   Deux gabarits d'article sont acceptés, sans modifier le HTML :
   - à plat      : h2, p, figure… enfants directs de <article> ;
   - en sections : le même contenu regroupé dans des <section>
                   (gabarit des articles existants).
   Les règles propres au gabarit en sections sont repérées par « [sections] ». */

/* ---------- Thème ---------- */
:root {
  color-scheme: light dark;
  --paper: #f7f5f0;
  --paper-2: #efebe2;
  --ink: #1c1b18;
  --ink-2: #57534b;
  --rule: #d9d3c7;
  --accent: rgb(45, 176, 28);
  --accent-soft: rgba(176, 42, 28, 0.1);

  --f-serif: Georgia, "Times New Roman", Times, serif;
  --f-ui: "Helvetica Neue", Helvetica, Arial, sans-serif;
  --f-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  --measure: 38rem;
  --gutter: 1.25rem;
  --wide: 72rem;
}

@media (prefers-color-scheme: dark) {
  :root {
    --paper: #141413;
    --paper-2: #1e1d1b;
    --ink: #ebe7de;
    --ink-2: #a39e93;
    --rule: #34322e;
    --accent: #ee7b6b;
    --accent-soft: rgba(238, 123, 107, 0.12);
  }
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 400 1.0625rem/1.65 var(--f-serif);
  font-kerning: normal;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; text-decoration-color: var(--accent); text-decoration-thickness: 1px; text-underline-offset: 0.18em; }
a:hover { color: var(--accent); }
a:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 2px; }

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

/* Lien d'évitement : premier lien enfant direct du body */
body > a { position: absolute; left: -999px; top: 0; padding: 0.5rem 1rem; background: var(--ink); color: var(--paper); font: 600 0.875rem var(--f-ui); z-index: 10; }
body > a:focus { left: 0; }

/* ---------- En-tête du site ---------- */
body > header {
  display: flex; flex-direction: column; gap: 0.5rem;
  padding: 1rem max(var(--gutter), calc((100% - var(--wide)) / 2)) 0.75rem;
  border-bottom: 1px solid var(--ink);
}
body > header > a { font: 700 1.5rem/1 var(--f-serif); letter-spacing: -0.02em; text-decoration: none; }
body > header > a:hover { color: inherit; }
body > header > a span, body > footer > a span { color: var(--accent); }

/* Menu (facultatif, à ajouter plus tard sans toucher au CSS) */
body > header nav { display: flex; gap: 1.25rem; overflow-x: auto; scrollbar-width: none; font: 400 0.8125rem/1 var(--f-ui); color: var(--ink-2); padding-bottom: 0.25rem; }
body > header nav::-webkit-scrollbar { display: none; }
body > header nav a { text-decoration: none; white-space: nowrap; }

/* ---------- Mise en page de l'article ---------- */
main { padding-top: 1.25rem; }

/* Tous les enfants directs de l'article partagent la même colonne de lecture */
article > * {
  margin-block: 0;
  margin-inline: max(var(--gutter), calc((100% - var(--measure)) / 2));
}
article > * + * { margin-block-start: 1.25rem; }

/* [sections] Les <section> sont déjà dans la colonne : leur contenu s'empile à l'intérieur */
article > section > * { margin-block: 0; }
article > section > * + * { margin-block-start: 1.25rem; }

/* ---------- Fil d'Ariane ---------- */
/* Gabarit à plat : dans l'article, sous forme de liste ordonnée */
article > nav ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.25rem 0; font: 400 0.8125rem/1.4 var(--f-ui); color: var(--ink-2); }
article > nav li { display: flex; align-items: baseline; min-width: 0; margin: 0; }
article > nav li + li::before { content: "/"; margin-inline: 0.5rem; color: var(--rule); }
article > nav a { text-decoration: none; }
article > nav a:hover { text-decoration: underline; }
article > nav [aria-current="page"] span { color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 16rem; }

/* [sections] Entre l'en-tête du site et <main> : liens séparés par « › » dans le HTML */
body > nav { padding: 1.25rem max(var(--gutter), calc((100% - var(--measure)) / 2)) 0; font: 400 0.8125rem/1.4 var(--f-ui); color: var(--ink-2); }
body > nav a { text-decoration: none; }
body > nav a:hover { text-decoration: underline; }
body > nav span { color: var(--ink); }
body > nav + main { padding-top: 0; }

/* ---------- En-tête d'article ---------- */
article > header { margin-block-start: 2rem; }

/* Rubrique (premier paragraphe, avant le titre) */
article > header > p:first-child { margin: 0 0 0.75rem; font: 700 0.75rem/1 var(--f-ui); letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent); }
article > header > p:first-child a { text-decoration: none; }

article > header h1 { margin: 0; font: 700 clamp(1.875rem, 7.5vw, 3.25rem)/1.1 var(--f-serif); letter-spacing: -0.02em; text-wrap: balance; }

/* [sections] Sous-titre placé dans le titre : <h1>Titre<br><small>Sous-titre</small></h1>
   → rendu comme le chapeau */
article > header h1 br { display: none; }
article > header h1 small { display: block; margin-top: 1rem; font: italic 400 1.1875rem/1.45 var(--f-serif); letter-spacing: normal; color: var(--ink-2); text-wrap: pretty; }

/* Chapeau (paragraphe qui suit le titre) */
article > header h1 + p { margin: 1rem 0 0; font: italic 400 1.1875rem/1.45 var(--f-serif); color: var(--ink-2); text-wrap: pretty; }

/* Signature (paragraphe qui suit le chapeau) */
article > header h1 + p + p { display: flex; flex-wrap: wrap; gap: 0.25rem 0.5rem; margin: 1.25rem 0 0; padding-block: 0.75rem; border-block: 1px solid var(--rule); font: 400 0.8125rem/1.4 var(--f-ui); color: var(--ink-2); }
article > header h1 + p + p > * + *::before { content: "·"; margin-right: 0.5rem; }
article > header h1 + p + p a { color: var(--ink); font-weight: 700; text-decoration: none; }
article > header h1 + p + p a:hover { color: var(--accent); }

/* [sections] Signature directement après le titre, dans un <small> :
   <p><small>Par <a>…</a> — Publié le <time>…</time></small></p> */
article > header h1 + p:has(> small:only-child) { display: block; margin: 1.25rem 0 0; padding-block: 0.75rem; border-block: 1px solid var(--rule); font: 400 0.8125rem/1.4 var(--f-ui); color: var(--ink-2); }
article > header h1 + p > small:only-child { font-size: inherit; }
article > header h1 + p > small:only-child a { color: var(--ink); font-weight: 700; text-decoration: none; }
article > header h1 + p > small:only-child a:hover { color: var(--accent); }

/* ---------- Résumé (TL;DR) ---------- */
/* [sections] Le résumé peut aussi se trouver dans <header> */
article > aside, article > header > aside { margin-block-start: 2rem; padding: 1.25rem 1.25rem 1.375rem; background: var(--paper-2); border-top: 3px solid var(--accent); }
aside h2, aside h3 { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; margin: 0 0 0.75rem; font: 700 1.125rem/1.2 var(--f-serif); }
aside h2 small, aside h3 small { font: 400 0.6875rem/1 var(--f-mono); letter-spacing: 0.06em; color: var(--ink-2); }
aside p { margin: 0; font: 400 0.9375rem/1.5 var(--f-ui); }
aside p + p { margin-top: 0.75rem; }
aside ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 0.625rem; font: 400 0.9375rem/1.5 var(--f-ui); }
aside li { position: relative; padding-left: 1.25rem; }
aside li::before { content: ""; position: absolute; left: 0; top: 0.6em; width: 0.5rem; height: 0.5rem; background: var(--accent); }

/* ---------- Corps de l'article ---------- */
article > p, article > section > p { hyphens: auto; -webkit-hyphens: auto; text-wrap: pretty; }
article > ul, article > ol, article > section > ul, article > section > ol { padding-left: 1.25rem; hyphens: auto; -webkit-hyphens: auto; }
article > ul li + li, article > ol li + li, article > section > ul li + li, article > section > ol li + li { margin-top: 0.375rem; }
article > ul li::marker, article > ol li::marker, article > section > ul li::marker, article > section > ol li::marker { color: var(--accent); }

article > h2, article > section > h2 { margin-block: 2.75rem 0; font: 700 1.5rem/1.2 var(--f-serif); letter-spacing: -0.01em; text-wrap: balance; }
article > h2::before, article > section > h2::before { content: ""; display: block; width: 2.5rem; height: 2px; background: var(--ink); margin-bottom: 0.875rem; }
article > h3, article > section > h3 { margin-block: 2rem 0; font: 700 1.125rem/1.3 var(--f-ui); }

strong, b { font-weight: 700; }
abbr[title] { text-decoration: underline dotted var(--ink-2); cursor: help; }
code { font: 0.85em var(--f-mono); background: var(--paper-2); padding: 0.1em 0.35em; border-radius: 3px; }
small { font-size: 0.85em; }

/* Lettrine : premier paragraphe du corps
   (gabarit en sections : seulement si la première section commence par un paragraphe) */
article > p:first-of-type::first-letter,
article > section:first-of-type > p:first-child::first-letter { float: left; font: 700 4rem/0.82 var(--f-serif); margin: 0.35rem 0.5rem 0 0; color: var(--accent); }

/* Appels de note */
sup { line-height: 0; font: 700 0.6875rem/0 var(--f-ui); margin-left: 0.1em; }
sup a { text-decoration: none; color: var(--accent); padding: 0 0.1em; }
sup a::before { content: "["; }
sup a::after { content: "]"; }

/* Citation */
article > blockquote, article > section > blockquote { margin-block: 2rem 0; padding: 0; border: 0; }
blockquote p { margin: 0; font: italic 400 1.25rem/1.4 var(--f-serif); text-wrap: balance; }
blockquote p::before { content: ""; display: block; width: 1.5rem; height: 3px; background: var(--accent); margin-bottom: 0.75rem; }
blockquote footer { margin-top: 0.5rem; font: 400 0.8125rem/1.4 var(--f-ui); color: var(--ink-2); }

/* Illustration : plus large que la colonne de texte */
article > figure { margin-block: 2rem 0; margin-inline: max(0px, calc((100% - var(--measure)) / 2 - 4rem)); }
/* [sections] La figure est dans une section : on déborde de la colonne par marge négative */
article > section > figure { margin-block: 2rem 0; margin-inline: calc(-1 * var(--gutter)); }
figure img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; background: repeating-linear-gradient(135deg, var(--paper-2) 0 10px, transparent 10px 20px); border-block: 1px solid var(--rule); }
/* Schémas SVG : jamais rognés, ils gardent leur proportion */
figure img[src$=".svg"] { aspect-ratio: auto; object-fit: contain; background: none; }
figcaption { padding: 0.625rem var(--gutter) 0; font: 400 0.8125rem/1.45 var(--f-ui); color: var(--ink-2); }
figcaption small { opacity: 0.8; font-size: inherit; }

/* ---------- Sources (pied de l'article) ---------- */
article > footer { margin-block-start: 3.5rem; padding-top: 1.5rem; border-top: 1px solid var(--ink); }
article > footer h2, article > footer h3 { margin: 0 0 1rem; font: 700 0.75rem/1 var(--f-ui); letter-spacing: 0.08em; text-transform: uppercase; }
article > footer ol, article > footer ul { margin: 0; padding-left: 2rem; font: 400 0.875rem/1.5 var(--f-ui); color: var(--ink-2); }
article > footer ul { padding-left: 1.25rem; list-style: square; }
article > footer li { padding-left: 0.25rem; scroll-margin-top: 1.5rem; overflow-wrap: anywhere; }
article > footer li + li { margin-top: 0.875rem; }
article > footer li::marker { font: 700 0.75rem var(--f-mono); color: var(--accent); }
article > footer li:target { background: var(--accent-soft); outline: 0.5rem solid var(--accent-soft); }
article > footer b { color: var(--ink); font-weight: 700; }
article > footer cite { font-style: italic; }
article > footer li a { color: var(--ink); }
article > footer a[href^="#"] { text-decoration: none; color: var(--accent); margin-left: 0.25rem; }
article > footer p { margin: 1.25rem 0 0; font: 400 0.75rem/1.4 var(--f-ui); color: var(--ink-2); }
article > footer p small { font-size: inherit; }

/* ---------- Pied de page du site ---------- */
body > footer {
  display: grid; gap: 0.75rem;
  margin-top: 4rem;
  padding: 1.5rem max(var(--gutter), calc((100% - var(--wide)) / 2)) 2rem;
  border-top: 1px solid var(--rule);
  font: 400 0.8125rem/1.5 var(--f-ui); color: var(--ink-2);
}
body > footer > a { font: 700 1.125rem/1 var(--f-serif); letter-spacing: -0.02em; text-decoration: none; color: var(--ink); }
body > footer > a:hover { color: var(--ink); }
body > footer nav { display: flex; flex-wrap: wrap; gap: 0.25rem 1.25rem; }
body > footer nav a { text-decoration: none; }
body > footer nav a:hover { text-decoration: underline; }
body > footer p { margin: 0; }

/* ---------- Écrans plus larges ---------- */
@media (min-width: 48rem) {
  :root { --gutter: 2rem; }
  body { font-size: 1.125rem; }
  body > header { flex-direction: row; align-items: baseline; justify-content: space-between; padding-block: 1.25rem; }
  body > header > a { font-size: 1.75rem; }
  main { padding-top: 1.75rem; }
  body > nav { padding-top: 1.75rem; }
  article > header { margin-block-start: 3rem; }
  article > header h1 + p { font-size: 1.375rem; }
  article > header h1 small { font-size: 1.375rem; }
  article > aside, article > header > aside { padding: 1.5rem 1.75rem 1.75rem; }
  article > h2, article > section > h2 { font-size: 1.75rem; }
  article > blockquote p, article > section > blockquote p { font-size: 1.375rem; }
  article > section > figure { margin-inline: -4rem; }
  figcaption { padding-inline: 4rem; }
  body > footer { grid-template-columns: auto 1fr; align-items: baseline; column-gap: 2rem; }
  body > footer nav { justify-content: flex-end; }
  body > footer p { grid-column: 1 / -1; }
}

/* ---------- Impression ---------- */
@media print {
  :root { --paper: #fff; --paper-2: #f2f2f2; --ink: #000; --ink-2: #333; --accent: #000; }
  body > a, body > header nav, body > nav, article > nav, body > footer nav { display: none; }
  article > footer a[href^="http"]::after { content: " (" attr(href) ")"; }
}