/* ============================================================
   charlespeureux.com — feuille de style
   Charte : bleu océan, sable, argile, vert d'algue.
   Polices : Source Serif 4 (titres), Source Sans 3 (texte),
             Source Code Pro (code).
   Pour changer une couleur partout, modifiez-la ici, dans :root.
   ============================================================ */

/* Polices hébergées sur le site (static/fonts/), sous licence SIL Open Font
   License : aucune requête vers Google. Jeu de caractères latin (français compris). */
@font-face {
  font-family: "Atkinson Hyperlegible";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/atkinson-hyperlegible-400.woff2") format("woff2");
}
@font-face {
  font-family: "Atkinson Hyperlegible";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/atkinson-hyperlegible-400-italique.woff2") format("woff2");
}
@font-face {
  font-family: "Atkinson Hyperlegible";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("fonts/atkinson-hyperlegible-700.woff2") format("woff2");
}
@font-face {
  font-family: "Bricolage Grotesque";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("fonts/bricolage-grotesque-700.woff2") format("woff2");
}
@font-face {
  font-family: "Source Code Pro";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/source-code-pro-400.woff2") format("woff2");
}

/* Charte « Phare » : un site sombre, éclairé par un faisceau ambré.
   Pour changer une couleur partout, modifiez-la ici.
   (Les noms des variables datent de la première charte : ils sont
   conservés pour ne pas toucher au reste du fichier.) */
:root {
  color-scheme: dark;
  --surface: #0E2230;        /* fond de page (nuit) */
  --surface-raised: #16303F; /* fond des encadrés (houle) */
  --ink: #EAF0F2;            /* texte principal (écume) */
  --ink-muted: #9FB3BC;      /* texte secondaire */
  --hairline: #24414F;       /* filets et bordures */
  --ocean: #F0B35A;          /* couleur principale : faisceau ambré (liens, titres, boutons) */
  --on-ocean: #0E2230;       /* texte sur les boutons ambrés */
  --ocean-tint: #1B3A4B;     /* aplat de mise en valeur */
  --clay: #7FB8CA;           /* accent secondaire : brume (dates, survol) */
  --sage: #4F8FA3;           /* décoratif */
  --sand: #4F8FA3;           /* décoratif */

  --serif: "Bricolage Grotesque", system-ui, sans-serif;   /* titres */
  --sans: "Atkinson Hyperlegible", system-ui, sans-serif;  /* texte */
  --mono: "Source Code Pro", ui-monospace, monospace;      /* code */

  --space-2: 8px;
  --space-4: 16px;
  --space-8: 32px;
  --space-16: 64px;
  --radius-sm: 4px;
  --radius-md: 10px;
  --radius-lg: 10px;
  --measure: 680px;          /* largeur maximale du texte */
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--surface);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 28px;
}
img, svg { max-width: 100%; height: auto; display: block; }
a { color: var(--ocean); text-underline-offset: 3px; }
a:hover { color: var(--clay); }
:focus-visible { outline: 2px solid var(--clay); outline-offset: 3px; }

h1, h2, h3 { font-family: var(--serif); font-weight: 700; margin: 0 0 var(--space-4); }
h1 { font-size: 40px; line-height: 48px; }
h2 { font-size: 28px; line-height: 36px; color: var(--ocean); }
h3 { font-size: 21px; line-height: 28px; }
p, ul, ol { margin: 0 0 var(--space-4); }
code, pre { font-family: var(--mono); font-size: 14px; line-height: 22px; }
pre {
  background: var(--surface-raised);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-sm);
  padding: var(--space-2) 12px;
  overflow-x: auto;
}

.skip-link { position: absolute; left: -9999px; }
.skip-link:focus { left: var(--space-4); top: var(--space-4); background: var(--surface-raised); padding: var(--space-2); z-index: 10; }

.container { max-width: 1120px; margin: 0 auto; padding: 0 var(--space-8); }
.prose { max-width: var(--measure); }
.muted { color: var(--ink-muted); }
.small { font-size: 15px; line-height: 24px; }

/* ---------- En-tête ---------- */
.site-header { border-bottom: 1px solid var(--hairline); }
.site-header .container {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: var(--space-4); padding-top: 24px; padding-bottom: 24px;
}
.site-name { font-family: var(--serif); font-weight: 700; font-size: 21px; color: var(--ink); text-decoration: none; }
.site-nav { display: flex; flex-wrap: wrap; gap: 8px 28px; font-size: 15px; font-weight: 600; }
.site-nav a { color: var(--ink-muted); text-decoration: none; }
.site-nav a:hover, .site-nav a[aria-current="page"] { color: var(--ocean); }
.site-nav a[aria-current="page"] { text-decoration: underline; }

/* ---------- Accueil ---------- */
.hero {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-16);
  padding-top: 96px; padding-bottom: var(--space-16);
}
.hero-text { flex: 1 1 480px; min-width: 0; }
.hero-text h1 { font-size: 56px; line-height: 60px; margin-bottom: var(--space-4); }
.hero-role { color: var(--ocean); font-weight: 600; margin-bottom: var(--space-4); }
.lead { font-size: 20px; line-height: 30px; max-width: 560px; }
.engagement {
  max-width: 560px; margin-top: var(--space-8); padding-top: var(--space-4);
  border-top: 1px solid var(--hairline); font-size: 15px; line-height: 24px;
}
.engagement strong { color: var(--ocean); }
.hero-art { flex: 0 1 340px; min-width: 0; }

.buttons { display: flex; flex-wrap: wrap; gap: var(--space-4); margin-top: var(--space-8); }
.button {
  display: inline-flex; align-items: center; min-height: 48px; padding: 0 24px;
  border-radius: var(--radius-md); font-weight: 600; text-decoration: none;
  border: 1px solid var(--ocean);
}
.button-primary { background: var(--ocean); color: var(--on-ocean); }
.button-primary:hover { color: var(--on-ocean); opacity: 0.88; }
.button-secondary { color: var(--ocean); }

/* ---------- Sections ---------- */
.section { padding-top: var(--space-16); padding-bottom: var(--space-16); border-top: 1px solid var(--hairline); }
.page-intro { padding-top: var(--space-16); padding-bottom: var(--space-8); }

.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: var(--space-8); }
.card {
  background: var(--surface-raised); border: 1px solid var(--hairline);
  border-radius: var(--radius-md); padding: var(--space-8);
  display: flex; flex-direction: column;
}
.card p:last-child { margin-top: auto; margin-bottom: 0; }

/* Liste de publications */
.pubs { list-style: none; padding: 0; margin: 0; }
.pubs li {
  display: flex; flex-wrap: wrap; gap: 4px var(--space-8);
  padding: 24px 0; border-top: 1px solid var(--hairline);
}
.pubs li:last-child { border-bottom: 1px solid var(--hairline); }
.pub-year { flex: 0 0 64px; color: var(--clay); font-weight: 600; font-size: 15px; }
.pub-body { flex: 1 1 420px; min-width: 0; }
.pub-title { font-family: var(--serif); font-weight: 700; font-size: 19px; line-height: 26px; display: block; }

/* Bande « en formation » */
.band { background: var(--ocean-tint); }
.band .container { display: flex; flex-wrap: wrap; gap: var(--space-8) var(--space-16); padding-top: var(--space-16); padding-bottom: var(--space-16); }
.band .container > * { flex: 1 1 340px; min-width: 0; }
.band h2 { color: var(--ink); }
.band ul { list-style: none; padding: 0; display: flex; flex-direction: column; gap: var(--space-4); }
.band li { background: var(--surface-raised); border-radius: var(--radius-md); padding: var(--space-4) 24px; }

/* Parcours : frise */
.timeline { list-style: none; padding: 0; border-left: 2px solid var(--ocean-tint); }
.timeline li { position: relative; padding: 0 0 var(--space-8) var(--space-8); }
.timeline li::before {
  content: ""; position: absolute; left: -7px; top: 8px; width: 12px; height: 12px;
  border-radius: 50%; background: var(--ocean);
}
.timeline .when { color: var(--clay); font-weight: 600; font-size: 15px; display: block; }

/* ---------- Pied de page ---------- */
.site-footer { border-top: 1px solid var(--hairline); }
.site-footer .container {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-4);
  padding-top: var(--space-8); padding-bottom: var(--space-8);
  font-size: 15px; line-height: 24px; color: var(--ink-muted);
}
.site-footer nav { display: flex; flex-wrap: wrap; gap: var(--space-4) 24px; }
.site-footer a { color: var(--ink-muted); }

@media (max-width: 600px) {
  .container { padding: 0 var(--space-4); }
  .hero { padding-top: var(--space-8); gap: var(--space-8); }
  .hero-text h1 { font-size: 44px; line-height: 48px; }
  h1 { font-size: 34px; line-height: 40px; }
}

/* ---------- Formulaire de contact ---------- */
.contact-form { margin-top: var(--space-8); display: flex; flex-direction: column; gap: 20px; }
.field { display: flex; flex-direction: column; gap: 6px; }
.field label { font-weight: 600; font-size: 15px; }
.field input, .field textarea {
  font: inherit; color: var(--ink); background: var(--surface-raised);
  border: 1px solid var(--hairline); border-radius: var(--radius-sm);
  padding: 10px 12px; width: 100%;
}
.field input:focus, .field textarea:focus { border-color: var(--ocean); outline: 2px solid var(--ocean-tint); outline-offset: 0; }
.field textarea { resize: vertical; min-height: 160px; }
.contact-form .button { align-self: flex-start; cursor: pointer; font: inherit; font-weight: 600; }
/* Piège à robots, caché aux humains */
.hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

/* ---------- Ajouts Hugo : blog et pages ---------- */
.page-body { padding-bottom: var(--space-16); }
.more { margin-top: var(--space-4); }
.pubs .pub-title { color: var(--ink); text-decoration: none; }
.pubs a.pub-title:hover, .pubs .pub-title a:hover { color: var(--clay); }
.pubs .pub-title a { color: var(--ink); }
.pubs time.pub-year { flex-basis: 96px; }
.billet-meta { color: var(--ink-muted); font-size: 15px; margin-bottom: var(--space-2); }
.prose h2 { margin-top: var(--space-8); }
.prose blockquote {
  margin: var(--space-8) 0; padding: 0 0 0 var(--space-4);
  border-left: 3px solid var(--clay); color: var(--ink-muted);
}
.prose img { border-radius: var(--radius-md); margin: var(--space-8) 0; }
.callout {
  background: var(--ocean-tint); border-radius: var(--radius-md);
  padding: var(--space-8); margin-bottom: var(--space-8);
}
.callout h2 { margin-top: 0; color: var(--ink); }
.callout ul { list-style: none; padding: 0; display: flex; flex-direction: column; gap: var(--space-2); margin: 0; }
.callout li { background: var(--surface-raised); border-radius: var(--radius-md); padding: 12px 20px; }

/* ---------- Étiquettes des billets ---------- */
.etiquettes { list-style: none; padding: 0; margin: var(--space-2) 0 0; display: flex; flex-wrap: wrap; gap: var(--space-2); }
.etiquettes a {
  display: inline-block; padding: 2px 12px; border: 1px solid var(--hairline);
  border-radius: var(--radius-md); color: var(--clay); font-size: 15px; line-height: 24px; text-decoration: none;
}
.etiquettes a:hover { border-color: var(--clay); }
.etiquettes a[aria-current="page"] { background: var(--ocean); border-color: var(--ocean); color: var(--on-ocean); font-weight: 600; }
.etiquettes.filtre { margin: 0 0 var(--space-8); }

/* ---------- Illustration de l'accueil ---------- */
.illustration { margin: 0; }
.illustration img { display: block; width: 100%; height: auto; border-radius: var(--radius-md); }
.illustration figcaption { margin-top: var(--space-2); color: var(--ink-muted); font-size: 13px; line-height: 20px; }
.illustration figcaption a { color: var(--ink-muted); }

/* ---------- Références bibliographiques (liste suivie de {.references}) ---------- */
.references { list-style: none; padding: 0; font-size: 15px; line-height: 24px; }
.references li { padding-left: var(--space-8); text-indent: calc(-1 * var(--space-8)); margin-bottom: var(--space-4); }
.references a { overflow-wrap: anywhere; }