/* Pierre de Saint-Phalle — academic website
   Direction "Archive" : EB Garamond (corps) + IBM Plex Mono (labels, métadonnées,
   renvois de page). Palette papier ancien / encre sépia / vert archive / taupe.
   Polices auto-hébergées (assets/fonts) — aucun appel tiers, RGPD-friendly.
   Clair + sombre via prefers-color-scheme. */

@font-face{ font-family:"EB Garamond"; font-style:normal; font-weight:400; font-display:swap;
  src:url("assets/fonts/eb-garamond-400.woff2") format("woff2"); }
@font-face{ font-family:"EB Garamond"; font-style:normal; font-weight:500; font-display:swap;
  src:url("assets/fonts/eb-garamond-500.woff2") format("woff2"); }
@font-face{ font-family:"EB Garamond"; font-style:italic; font-weight:400; font-display:swap;
  src:url("assets/fonts/eb-garamond-italic.woff2") format("woff2"); }
@font-face{ font-family:"IBM Plex Mono"; font-style:normal; font-weight:400; font-display:swap;
  src:url("assets/fonts/ibm-plex-mono-400.woff2") format("woff2"); }
@font-face{ font-family:"IBM Plex Mono"; font-style:normal; font-weight:500; font-display:swap;
  src:url("assets/fonts/ibm-plex-mono-500.woff2") format("woff2"); }

:root{
  --bg:#F2ECDE;          /* papier ancien */
  --surface:#EAE2CF;     /* encart */
  --text:#2A2622;        /* encre sépia */
  --muted:#6B6151;       /* taupe-encre */
  --accent:#3F5B4C;      /* vert archive */
  --accent-hover:#2E4438;
  --border:#D3C6AC;      /* filet taupe */
  --serif:"EB Garamond",Georgia,"Times New Roman",serif;
  --mono:"IBM Plex Mono",ui-monospace,"SFMono-Regular",Menlo,Consolas,monospace;
  --maxw:730px;
  --radius:0;
}
@media (prefers-color-scheme: dark){
  :root{
    --bg:#201C16;        /* parchemin sombre */
    --surface:#2A251E;
    --text:#EAE2D0;
    --muted:#B2A88C;
    --accent:#93B7A0;
    --accent-hover:#AECBB8;
    --border:#3C352A;
  }
}

*{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; }
body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:var(--serif);
  font-size:19px;
  line-height:1.72;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
.wrap{ max-width:var(--maxw); margin:0 auto; padding:0 24px; }

a{ color:var(--accent); text-decoration:none; }
a:hover{ text-decoration:underline; text-underline-offset:2px; color:var(--accent-hover); }
::selection{ background:rgba(63,91,76,.16); }

/* ---- En-tête / navigation ---- */
.site-header{ border-bottom:1px solid var(--border); }
.site-header .wrap{
  display:flex; flex-wrap:wrap; align-items:baseline;
  justify-content:space-between; gap:6px 24px;
  padding-top:22px; padding-bottom:16px;
}
.brand{
  font-family:var(--serif); font-size:22px; font-weight:500;
  letter-spacing:.2px; color:var(--text);
}
.brand:hover{ text-decoration:none; }
.nav-wrap{ display:flex; align-items:center; gap:18px; flex-wrap:wrap; }
nav.main{ display:flex; flex-wrap:wrap; gap:18px; }
nav.main a{
  font-family:var(--mono); font-size:12px; font-weight:400;
  text-transform:uppercase; letter-spacing:.09em; color:var(--muted);
}
nav.main a.active, nav.main a:hover{ color:var(--accent); text-decoration:none; }
.lang-switch{ display:inline-flex; align-items:center; line-height:0; }
.lang-switch:hover{ text-decoration:none; }
.lang-switch svg{ display:block; width:22px; height:auto; border:1px solid var(--border); }
.lang-switch:hover svg{ outline:1px solid var(--accent); }

/* ---- Contenu ---- */
main{ padding:46px 0 8px; }
h1{ font-family:var(--serif); font-size:40px; line-height:1.14; font-weight:500; letter-spacing:.2px; margin:0 0 8px; text-wrap:balance; }
.subtitle{ font-family:var(--serif); color:var(--muted); font-size:21px; font-style:italic; margin:0 0 28px; text-align:left; text-wrap:balance; }
h2{ font-family:var(--serif); font-size:26px; font-weight:500; margin:48px 0 12px; }
h3{ font-family:var(--serif); font-size:20px; font-weight:500; margin:26px 0 4px; }
p{ margin:0 0 17px; text-align:justify; -webkit-hyphens:none; hyphens:none; }
ul{ padding-left:22px; margin:0 0 17px; }
li{ margin-bottom:9px; }
.lead{ font-size:21.5px; line-height:1.62; }
hr{ border:none; border-top:1px solid var(--border); margin:38px 0; }
sup{ font-size:.7em; }

/* ---- Home hero ---- */
.hero{ display:flex; gap:34px; align-items:center; flex-wrap:wrap; margin-bottom:10px; }
.hero .subtitle{ margin-bottom:0; }
.hero img{
  width:170px; height:212px; border-radius:var(--radius); object-fit:cover;
  border:1px solid var(--border); background:var(--surface);
  filter:sepia(.12) saturate(.92);
}
.hero .hero-text{ flex:1; min-width:260px; }

/* ---- Boutons ---- */
.actions{ display:flex; flex-wrap:wrap; gap:12px; margin:28px 0 8px; }
.btn{
  display:inline-block; padding:7px 15px; border:1px solid var(--accent);
  color:var(--accent); font-family:var(--serif); font-size:17px; line-height:1.45;
}
.btn:hover{ background:var(--accent); color:var(--bg); text-decoration:none; }

/* ---- Bloc « livre » : traitement typographique, pas d'encadré ---- */
.card{ margin:6px 0 4px; }
.card h3{ margin-top:0; font-size:22px; font-style:italic; }

/* ---- Publications ---- */
.pub{ margin-bottom:20px; }
.pub .meta{ font-family:var(--mono); color:var(--muted); font-size:13px; line-height:1.6; }
.pub .meta a, .pub li a, .legend strong{
  display:inline-block; font-family:var(--mono); font-weight:500;
  font-size:11px; text-transform:uppercase; letter-spacing:.08em;
  color:var(--accent); border:1px solid var(--accent);
  padding:0 7px; line-height:1.75; text-decoration:none; white-space:nowrap;
}
.pub .meta a:hover, .pub li a:hover{ background:var(--accent); color:var(--bg); text-decoration:none; }
.legend{ font-size:14px; color:var(--muted); margin-top:-14px; text-align:left; }
.legend strong{ margin:0 2px; }
.tag{
  display:inline-block; font-family:var(--mono); font-size:11px; text-transform:uppercase;
  letter-spacing:.06em; color:var(--muted);
  border:1px solid var(--border); padding:1px 7px;
  margin-left:6px; vertical-align:middle;
}

/* ---- CV ---- */
.cv-entry{ margin-bottom:15px; }
.cv-entry .role{ font-family:var(--serif); font-weight:500; }
.cv-entry .when{ font-family:var(--mono); color:var(--muted); font-size:12.5px; letter-spacing:.02em; }

/* ---- Pied de page ---- */
.site-footer{
  border-top:1px solid var(--border); margin-top:54px;
  padding:24px 0 46px; color:var(--muted);
  font-family:var(--mono); font-size:12.5px; letter-spacing:.02em;
}
.site-footer a{ color:var(--muted); }
.site-footer a:hover{ color:var(--accent); }
.site-footer .sep{ display:inline-block; width:26px; }

@media (max-width:560px){
  body{ font-size:18px; }
  h1{ font-size:32px; }
  .hero img{ width:120px; height:150px; }
  main{ padding-top:34px; }
}