/* ============================================================
   Design tokens — palette "planche technique" / gris et crème
   Clair = papier crème, encre anthracite. Sombre = gris chaud
   foncé, trait crème. Pas de noir ni de blanc purs : des gris
   légèrement chauds, peu contrastés entre eux.
   Voir MAINTENANCE.md avant de modifier ces valeurs.
   ============================================================ */
:root{
  --paper:#EFEBE2;
  --paper-line:#D9D4C8;
  --ink:#2E2D2A;
  --ink-soft:#6B6862;
  --accent:#45433F;
  --accent-soft: rgba(46,45,42,.09);
  --hatch: rgba(46,45,42,.35);
  --card-bg:#F6F3EC;
  /* seule couleur du site : n'apparaît que là où se porte l'attention (voir MAINTENANCE.md) */
  --bleu:#003366;
  /* les images de courbes bleues sont dessinées en --bleu clair ; en thème sombre,
     ce filtre les éclaircit vers le --bleu sombre (une seule image pour les deux thèmes) */
  --topo-bleu:none; --topo-op:.42;   /* --topo-op : opacité de ces images */
  /* filet de séparation (même gris que les lignes entre les cards de l'accueil) */
  --rule:color-mix(in srgb, var(--ink) 30%, var(--paper));

  /* --display : très gros titres (accueil, cards, écran de transition)
     --serif-display : titres des pages de contenu */
  --display:'Futuremoon', 'IBM Plex Serif', Georgia, serif;
  --serif-display:'IBM Plex Serif', Georgia, 'Times New Roman', serif;
  --sans:'IBM Plex Sans', system-ui, -apple-system, sans-serif;
  --mono:'IBM Plex Mono', ui-monospace, 'SFMono-Regular', Consolas, monospace;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --paper:#262523;
    --paper-line: rgba(239,235,226,.14);
    --ink:#E6E1D6;
    --ink-soft:#A39F96;
    --accent:#F3EFE6;
    --accent-soft: rgba(239,235,226,.12);
    --hatch: rgba(239,235,226,.22);
    --card-bg:#2E2D2A;
    --bleu:#22427C;
    --topo-bleu:brightness(1.22); --topo-op:.95;
  }
}
:root[data-theme="dark"]{
  --paper:#262523;
  --paper-line: rgba(239,235,226,.14);
  --ink:#E6E1D6;
  --ink-soft:#A39F96;
  --accent:#F3EFE6;
  --accent-soft: rgba(239,235,226,.12);
  --hatch: rgba(239,235,226,.22);
  --card-bg:#2E2D2A;
  --bleu:#22427C;
  --topo-bleu:brightness(1.22); --topo-op:.95;
}

@font-face{
  font-family:'Futuremoon';
  src:url(../fonts/FuturemoonV2.ttf) format('truetype');
  font-weight:100 900; /* graisse unique : évite le faux gras du navigateur */
  font-display:swap;
}

*{box-sizing:border-box;}
html{ scroll-behavior:smooth; }
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--sans);
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
}
a{ color:var(--accent); }
img{ max-width:100%; display:block; }
button{ font-family:inherit; }
::selection{ background:var(--accent-soft); }
:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }

.grid-bg{
  background-image:
    linear-gradient(var(--paper-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--paper-line) 1px, transparent 1px);
  background-size: 32px 32px;
}

/* ---------- top bar / nav (dupliquée sur chaque page, voir MAINTENANCE.md) ---------- */
.topbar{
  position:sticky; top:0; z-index:50;
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:14px clamp(16px,4vw,40px);
  background:color-mix(in srgb, var(--paper) 88%, transparent);
  backdrop-filter: blur(6px);
  border-bottom:1px solid var(--paper-line);
  font-family:var(--mono); font-size:12px; letter-spacing:.04em;
}
.topbar .name{ font-weight:500; color:var(--ink); text-decoration:none; white-space:nowrap; }
.topbar nav{ display:flex; flex-wrap:wrap; gap:4px 18px; justify-content:flex-end; margin-left:auto; }
/* bouton clair / sombre, ajouté par assets/js/theme.js */
.theme-toggle{
  flex-shrink:0; padding:5px 10px; cursor:pointer; white-space:nowrap;
  font-family:var(--mono); font-size:11.5px; letter-spacing:.06em; text-transform:uppercase;
  color:var(--ink); background:transparent; border:1px solid var(--ink-soft); border-radius:0;
}
.theme-toggle:hover{ background:var(--ink); color:var(--paper); border-color:var(--ink); }
.topbar nav a{
  color:var(--ink-soft); text-decoration:none; text-transform:uppercase; letter-spacing:.06em;
  font-size:11.5px; padding:4px 0; border-bottom:1px solid transparent;
}
.topbar nav a:hover, .topbar nav a[aria-current="page"]{ color:var(--ink); border-bottom-color:var(--accent); }
.topbar nav a[aria-current="page"]{ border-bottom-color:var(--bleu); }

footer{
  padding:26px clamp(16px,4vw,40px); font-family:var(--mono); font-size:11.5px;
  color:var(--ink-soft); border-top:1px solid var(--paper-line);
  display:flex; justify-content:space-between; flex-wrap:wrap; gap:8px;
}

/* ---------- page hero (utilisé par chaque page de contenu) ---------- */
.page-hero{ padding: 56px clamp(16px,4vw,40px) 8px; max-width:920px; }
/* lien en haut à droite du titre de page (ex. Architecture → outils) */
.hero-row{ display:flex; justify-content:space-between; align-items:flex-start; flex-wrap:wrap; gap:0 24px; }
.hero-aside{
  margin:56px clamp(16px,4vw,40px) 0; padding:9px 14px; white-space:nowrap;
  font-family:var(--mono); font-size:11.5px; letter-spacing:.06em; text-transform:uppercase;
  color:var(--ink); text-decoration:none; border:1px solid var(--ink-soft);
  background:color-mix(in srgb, var(--paper) 86%, transparent);
}
.hero-aside:hover{ background:var(--ink); color:var(--paper); border-color:var(--ink); }
@media (max-width:760px){ .hero-aside{ margin-top:20px; } }
.page-hero .eyebrow{
  font-family:var(--mono); font-size:12px; color:var(--ink-soft);
  letter-spacing:.08em; text-transform:uppercase; margin:0 0 14px;
}
.page-hero h1{
  font-family:var(--serif-display); font-weight:700;
  font-size:clamp(30px,5.4vw,54px); line-height:1.04; margin:0 0 18px;
  text-wrap:balance;
}
.page-hero p.lead{
  font-family:var(--sans); font-size:17px; color:var(--ink-soft);
  max-width:60ch; margin:0;
}

/* ---------- planche : gabarit éditorial des pages projet/stage ---------- */
.planche-section{ padding:46px clamp(16px,4vw,40px) 90px; }
.planche{ max-width:1040px; margin:0 auto; }
.planche + .planche{ margin-top:80px; padding-top:60px; border-top:1px solid var(--rule); }

.cartouche{
  display:grid; grid-template-columns:repeat(4,1fr);
  font-family:var(--mono); font-size:12px;
  margin-bottom:40px;
}
.cartouche div{ padding:12px 16px; border-right:1px solid var(--rule); }
.cartouche div:first-child{ padding-left:0; }
.cartouche div:last-child{ border-right:none; }
.cartouche span{ display:block; color:var(--ink-soft); text-transform:uppercase; letter-spacing:.06em; font-size:10.5px; margin-bottom:4px; }
.cartouche strong{ font-family:var(--sans); font-size:13.5px; font-weight:600; }
@media (max-width:760px){
  .cartouche{ grid-template-columns:1fr 1fr; }
  .cartouche div{ border-bottom:1px solid var(--rule); }
  .cartouche div:nth-child(2n){ border-right:none; }
  .cartouche div:nth-child(2n+1){ padding-left:0; }
  .cartouche div:nth-last-child(-n+2){ border-bottom:none; }
}

.planche-body{ display:grid; grid-template-columns:1fr 260px; gap:56px; align-items:start; }
@media (max-width:840px){ .planche-body{ grid-template-columns:1fr; } }

.planche-title{
  font-family:var(--serif-display); font-weight:700; font-size:clamp(26px,3.6vw,38px);
  margin:0 0 18px; text-wrap:balance;
}
.planche-lead{ font-size:16.5px; color:var(--ink-soft); max-width:60ch; margin:0 0 26px; }
.planche-text{ max-width:62ch; }
.planche-text p{ margin:0 0 18px; }
.planche-text h4{
  font-family:var(--mono); font-size:12px; text-transform:uppercase; letter-spacing:.08em;
  color:var(--ink-soft); font-weight:500; margin:30px 0 12px;
}
.planche-text ul{ margin:0 0 18px; padding-left:20px; }
.planche-text li{ margin-bottom:6px; }

.pull-quote{
  font-family:var(--serif-display); font-size:20px; font-weight:600;
  border-left:2px solid var(--accent); padding-left:20px; margin:28px 0;
  max-width:56ch; color:var(--ink);
}

.planche-figure{ position:sticky; top:90px; }
.fig-frame{
  aspect-ratio:3/4;
  background-image:
    linear-gradient(var(--paper-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--paper-line) 1px, transparent 1px);
  background-size:16px 16px;
  display:flex; align-items:center; justify-content:center; padding:18px;
}
.fig-frame span{ font-family:var(--mono); font-size:11.5px; color:var(--ink-soft); text-align:center; }
.fig-caption{ font-family:var(--mono); font-size:11.5px; color:var(--ink-soft); margin-top:10px; }

.tag-row{ display:flex; flex-wrap:wrap; gap:8px; margin:24px 0 0; }
.tag-row{ gap:8px 0; }
.tag-row span{
  font-family:var(--mono); font-size:11px; border-left:1px solid var(--rule);
  padding:2px 12px; color:var(--ink-soft);
}
.tag-row span:first-child{ border-left:none; padding-left:0; }

.status-note{
  font-family:var(--mono); font-size:12px; color:var(--accent);
  border-left:1px dashed var(--accent); padding:4px 0 4px 14px; display:inline-block;
  margin-top:10px;
}

/* ---------- planche en cours de lecture (classe posée par assets/js/focus.js) ----------
   Quand la planche passe au milieu de l'écran, un filet bleu se trace sous son cartouche
   et le trait de la citation prend la même couleur. */
.cartouche{ position:relative; }
.cartouche::after{
  content:''; position:absolute; left:0; right:0; bottom:-1px; height:1px; pointer-events:none;
  background:var(--bleu); transform:scaleX(0); transform-origin:left;
  transition:transform .9s cubic-bezier(.2,.8,.2,1);
}
.planche.is-current .cartouche::after{ transform:scaleX(1); }
.pull-quote{ transition:border-left-color .6s ease; }
.planche.is-current .pull-quote{ border-left-color:var(--bleu); }
@media (prefers-reduced-motion: reduce){
  .cartouche::after, .pull-quote{ transition:none; }
}

/* ---------- placeholder pages (sections pas encore rédigées) ---------- */
.placeholder-body{ max-width:640px; margin:0 auto; padding:10px clamp(16px,4vw,40px) 110px; }
.placeholder-body p{ color:var(--ink-soft); }

/* ---------- pages de contenu (body.inner) : courbes de niveau en fond fixe ----------
   Le fond passe derrière toute la page ; une classe sur <body> choisit l'image
   (générées par outils/topo.py, voir MAINTENANCE.md). */
body.inner::before{
  content:''; position:fixed; inset:0; z-index:-1; pointer-events:none;
  background:url(../img/topo-main.svg) center / cover no-repeat; opacity:.34;
}
body.topo-info::before{ background-image:url(../img/topo-info.svg); }   /* courbes cotées de nombres */
/* dessins au trait bleu */
body.topo-voile::before, body.topo-musique::before, body.topo-assoc::before, body.topo-cv::before{
  filter:var(--topo-bleu); opacity:var(--topo-op);
}
body.topo-voile::before{ background-image:url(../img/topo-voile.svg); }
body.topo-musique::before{ background-image:url(../img/topo-musique.svg); }
body.topo-assoc::before{ background-image:url(../img/topo-assoc.svg); }
body.topo-cv::before{ background-image:url(../img/topo-cv.svg); opacity:calc(var(--topo-op) + .2); }   /* trait plus fin */

/* voiles de lisibilité : derrière chaque bloc de texte, un aplat diffus de la couleur du
   papier, en partie transparent — les courbes restent visibles au travers.
   --voile règle son opacité : très léger sous le texte courant, plus marqué sous le titre. */
.inner .page-hero .eyebrow, .inner .page-hero h1, .inner .page-hero .lead{ position:relative; width:fit-content; }
.inner .planche-title, .inner .planche-lead, .inner .planche-text,
.inner .cv-download, .inner .contact-grid{ position:relative; }
.inner .page-hero .eyebrow::before, .inner .page-hero h1::before, .inner .page-hero .lead::before,
.inner .cartouche::before, .inner .planche-title::before, .inner .planche-lead::before,
.inner .planche-text::before, .inner .cv-download::before, .inner .contact-grid::before{
  --voile-c:color-mix(in srgb, var(--paper) var(--voile, 42%), transparent);
  content:''; position:absolute; inset:-2px -6px; z-index:-1; pointer-events:none;
  background:var(--voile-c); box-shadow:0 0 18px 14px var(--voile-c); border-radius:10px;
}
.inner .page-hero{ --voile:80%; }

/* Architecture (body.topo-archi) : page la plus dense en texte, voiles nettement plus marqués —
   les courbes se devinent encore au travers */
.topo-archi .planche{ --voile:74%; }
.topo-archi .page-hero{ --voile:90%; }

/* ---------- arrivée depuis l'accueil animé (voir assets/js/arrive.js) ---------- */
html[data-arrive]{ overflow:hidden; }
html[data-arrive]::before{
  content:''; position:fixed; inset:0; z-index:200; background:var(--ink); pointer-events:none;
  /* la page dessous apparaît floue à travers le voile, puis nette quand il s'efface */
  -webkit-backdrop-filter:blur(18px); backdrop-filter:blur(18px);
  transition: opacity 1s ease;
}
html[data-arrive]::after{
  content:attr(data-arrive); position:fixed; z-index:201; left:50%; top:50%;
  width:var(--arrive-width); transform:translate(-50%,-50%); pointer-events:none;
  font-family:var(--display); font-weight:400; text-transform:uppercase;
  font-size:var(--arrive-size); line-height:1.05; letter-spacing:.12em; color:var(--paper);
  transition: opacity .9s ease, filter .9s ease, transform 1s cubic-bezier(.2,.8,.2,1);
}
html.arrive-out::before{ opacity:0; }
html.arrive-out::after{ opacity:0; filter:blur(28px); transform:translate(-50%,-50%) scale(1.25); }