/* =========================================================================
   ombre-portée-du-nombre — ombre.css
   CSS statique (Tailwind du design Stitch « Lampe » compilé à la main, zéro
   réseau). DS sombre natif « Ombre Portée » : fond ink, encre paper-white,
   accents teal/cuivre. Langage visuel intégralement repris du design Stitch
   (radial-ground = la lampe, pool de lumière derrière la colonne, chute en
   ink aux coins). La couche de navigation (sommaire des sections, retour
   rhizome, pied) suit la grammaire de la famille recherche-ia.
   ========================================================================= */

:root{
  /* tokens du DS Stitch « Ombre Portée » (DARK natif) */
  --ink:#111417;            /* background / surface */
  --ink-deep:#0e1113;       /* surface-ink-deep (chute aux coins) */
  --ink-lowest:#0b0f11;
  --surface-bright:#37393d; /* le pool de lumière de la lampe */
  --surface-low:#191c1f;
  --surface-shadow-warm:#1b1916;
  --on-surface:#e1e2e6;     /* encre claire principale */
  --text-light:#e6e0d8;     /* paper-white du titre */
  --on-surface-variant:#b8b0a6;
  --text-muted:#9a958c;
  --primary:#a5eefc;        /* teal clair (filet, eyebrow) */
  --primary-dim:#89d2df;    /* blue-pale */
  --secondary:#ffb68e;      /* cuivre */
  --outline-variant:#3a4347;

  --serif:'Newsreader','Iowan Old Style',Palatino,Georgia,serif;
  --body:'Literata','Iowan Old Style',Georgia,serif;
  --sans:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;

  --reading-width:680px;
  --sidebar-width:240px;
  --measure:42rem;
}

*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;}

body{
  min-height:100vh;
  position:relative;
  overflow-x:hidden;
  font-family:var(--body);
  color:var(--on-surface-variant);
  background-color:var(--ink-deep);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
}

/* La lampe : pool de lumière haut-centre se fondant en ink ; chute aux coins.
   Repris de .radial-ground du design Stitch, posé en fixed pour tenir tout
   le long du défilement sans bouger. */
.lamp-ground{
  position:fixed;inset:0;z-index:-2;pointer-events:none;
  /* géométrie fidèle au radial-ground du design Stitch (circle at 50% 30%,
     surface-bright 0% -> ink-deep 60%) : pool de lumière large derrière le
     titre et la colonne, chute en encre aux coins. */
  background:
    radial-gradient(circle at 50% 26%, var(--surface-bright) 0%, var(--ink) 38%, var(--ink-deep) 78%);
}
/* halo cuivre distant, bas-droite (le reste, le nombre et son ombre) */
.copper-glow{
  position:fixed;bottom:-22vh;right:-18vw;width:62vw;height:62vh;z-index:-1;
  pointer-events:none;
  background:radial-gradient(circle, rgba(255,182,142,.06) 0%, transparent 70%);
}
/* grain très léger, en CSS/SVG (jamais WebGL), coupé en reduced-motion */
.noise-overlay{
  position:fixed;inset:0;z-index:50;pointer-events:none;opacity:.04;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 120 120' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---- Barre de progression de lecture --------------------------------- */
.progress-bar-container{
  position:fixed;top:0;left:0;width:100%;height:2px;
  background-color:rgba(58,67,71,.4);z-index:1000;
}
.progress-bar{
  height:100%;width:0%;background-color:var(--primary);
  box-shadow:0 0 8px rgba(165,238,252,.5);transition:width .1s ease;
}

/* ---- Top-bar : retour rhizome À GAUCHE, lien auteur à droite ----------
   Reconstruit selon la grammaire de la famille. PAS de titre centré en
   position absolue ni de contrôles « chapitre précédent/suivant » : le défaut
   de chevauchement du design Stitch disparaît par construction (texte court,
   page unique, navigation par sections au sommaire latéral). */
.top-bar{
  position:fixed;top:0;left:0;right:0;z-index:60;
  height:60px;display:flex;align-items:center;justify-content:space-between;
  padding:0 5vw;
  background:rgba(14,17,19,.78);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  border-bottom:1px solid rgba(58,67,71,.45);
}
.top-bar .home{
  font-family:var(--sans);font-weight:400;font-size:13px;
  letter-spacing:.18em;text-transform:uppercase;
  color:var(--primary-dim);text-decoration:none;
  display:inline-flex;align-items:center;gap:.55em;
  border:1px solid rgba(137,210,223,.28);
  padding:.4em .85em;border-radius:2px;
  transition:color .3s,border-color .3s,background-color .3s;
}
.top-bar .home:hover{color:var(--text-light);border-color:rgba(137,210,223,.55);background:rgba(137,210,223,.06);}
.top-bar .home .arrow{font-size:1.05em;line-height:1;}
.top-bar .bar-title{
  font-family:var(--serif);font-style:italic;font-weight:300;font-size:17px;
  color:var(--text-muted);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  max-width:42vw;text-align:center;flex:0 1 auto;margin:0 1rem;
}
.top-bar .to-author{
  font-family:var(--sans);font-weight:300;font-size:12px;
  letter-spacing:.18em;text-transform:uppercase;
  color:var(--text-muted);text-decoration:none;white-space:nowrap;
  transition:color .3s;
}
.top-bar .to-author:hover{color:var(--primary);}

/* ---- Ossature : sommaire latéral sticky + colonne de lecture ---------- */
.layout{
  max-width:1180px;margin:0 auto;
  padding:120px 5vw 100px;
  display:flex;flex-direction:row-reverse;gap:4rem;
  align-items:flex-start;
}

/* Sommaire latéral sticky : les 11 sections ancrées, item courant suivi */
.toc{
  position:sticky;top:96px;
  width:var(--sidebar-width);flex:0 0 var(--sidebar-width);
  align-self:flex-start;
  padding-left:1.5rem;border-left:1px solid rgba(58,67,71,.4);
  max-height:calc(100vh - 120px);overflow-y:auto;
}
.toc h2{
  font-family:var(--sans);font-weight:400;font-size:11px;
  letter-spacing:.22em;text-transform:uppercase;color:var(--primary);
  margin-bottom:.4rem;
}
.toc .toc-sub{
  font-family:var(--body);font-size:12px;color:var(--text-muted);
  margin-bottom:1.4rem;font-style:italic;
}
.toc nav{display:flex;flex-direction:column;gap:.85rem;}
.toc a{
  font-family:var(--sans);font-weight:300;font-size:13px;line-height:1.4;
  color:var(--on-surface-variant);text-decoration:none;
  opacity:.62;position:relative;padding-left:1rem;
  transition:opacity .2s,color .2s,transform .2s;
}
.toc a::before{
  content:"";position:absolute;left:0;top:.62em;
  width:5px;height:5px;border-radius:50%;
  background:var(--outline-variant);transition:background-color .2s,box-shadow .2s;
}
.toc a:hover{opacity:1;color:var(--text-light);transform:translateX(2px);}
.toc a.is-current{
  opacity:1;color:var(--primary-dim);font-weight:400;
}
.toc a.is-current::before{
  background:var(--primary);box-shadow:0 0 6px rgba(165,238,252,.6);
}

/* Colonne de lecture */
.column{
  flex:1 1 auto;max-width:var(--reading-width);
  margin:0 auto;min-width:0;
}

/* ---- Hero / seuil ----------------------------------------------------- */
.hero{margin-bottom:5rem;}
.hero .eyebrow{
  font-family:var(--sans);font-weight:300;font-size:12px;
  letter-spacing:.24em;text-transform:uppercase;color:var(--primary);
  display:block;margin-bottom:1.5rem;
}
.hero h1{
  font-family:var(--serif);font-weight:200;
  font-size:clamp(2.4rem,5vw,3rem);line-height:1.1;letter-spacing:.01em;
  color:var(--text-light);margin-bottom:.5rem;
  /* le titre qui glow, sobre */
  text-shadow:0 0 28px rgba(230,224,216,.12);
}
.hero .subtitle{
  font-family:var(--serif);font-style:italic;font-weight:300;
  font-size:1.5rem;color:var(--text-muted);margin-bottom:2rem;
}
.hero .filament{height:1px;width:100%;background:rgba(165,238,252,.4);margin-bottom:1.75rem;}
.hero .sign{
  font-family:var(--body);font-size:15px;color:var(--text-muted);
}

/* ---- Corps de lecture ------------------------------------------------- */
.reading{
  font-family:var(--body);font-weight:400;
  font-size:20px;line-height:1.78;letter-spacing:-.01em;
  color:var(--on-surface);
}
.reading .section{margin-bottom:4rem;scroll-margin-top:90px;}
.reading h3{
  font-family:var(--serif);font-weight:300;font-size:1.7rem;line-height:1.25;
  color:var(--text-light);margin-bottom:1.6rem;text-align:center;
}
.reading p{margin-bottom:1.4rem;text-indent:1.6rem;}
.reading .section p:first-of-type{text-indent:0;}
/* lettrine sur le tout premier paragraphe (repris du drop-cap Stitch) */
.reading .section:first-of-type p:first-of-type::first-letter{
  float:left;font-family:var(--serif);font-weight:200;
  font-size:4.6rem;line-height:.82;padding:.05em .12em 0 0;
  color:var(--text-light);
}

/* filet gravé entre sections (le « engraved-line » sombre) */
.engraved-line{
  height:1px;width:60px;margin:2.5rem auto;
  background:linear-gradient(to right,transparent,rgba(137,210,223,.5),transparent);
}

/* ---- Pied harmonisé (grammaire de la famille, thème sombre) ----------- */
.site-foot{
  max-width:var(--reading-width);margin:0 auto;
  padding:5rem 5vw 3rem;text-align:center;
  border-top:1px solid rgba(58,67,71,.4);
}
.site-foot .foot-note{
  font-family:var(--sans);font-weight:300;font-size:10px;
  letter-spacing:.3em;text-transform:uppercase;line-height:1.8;
  color:rgba(184,176,166,.55);max-width:34rem;margin:0 auto 1rem;
}
.site-foot .foot-sign{
  font-family:var(--sans);font-weight:300;font-size:10px;
  letter-spacing:.3em;text-transform:uppercase;color:rgba(184,176,166,.45);
  margin-bottom:.5rem;
}
.site-foot .foot-nav{
  margin-top:1.5rem;font-family:var(--sans);font-weight:300;font-size:11px;
  letter-spacing:.22em;text-transform:uppercase;color:rgba(154,149,140,.6);
}
.site-foot .foot-nav a{color:var(--text-muted);text-decoration:none;transition:color .3s;}
.site-foot .foot-nav a:hover{color:var(--primary);}
.site-foot .foot-nav .dot{margin:0 .6em;color:rgba(58,67,71,.9);}

/* ---- Responsive ------------------------------------------------------- */
@media (max-width:1023px){
  .layout{flex-direction:column;gap:0;padding-top:96px;}
  .toc{
    position:static;width:100%;flex-basis:auto;max-height:none;overflow:visible;
    border-left:none;border-bottom:1px solid rgba(58,67,71,.4);
    padding-left:0;padding-bottom:1.75rem;margin-bottom:2.5rem;
  }
  .toc nav{
    flex-direction:row;flex-wrap:wrap;gap:.5rem .9rem;
  }
  .toc a{padding-left:.85rem;font-size:12px;}
  .column{max-width:100%;}
  .top-bar .bar-title{display:none;}
}
@media (max-width:480px){
  .reading{font-size:18px;}
  .hero h1{font-size:2rem;}
  .top-bar{padding:0 5vw;height:54px;}
  .top-bar .home{font-size:11px;letter-spacing:.12em;padding:.35em .6em;}
  .top-bar .to-author{font-size:10px;letter-spacing:.1em;}
}

/* ---- Accessibilité / impression -------------------------------------- */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  .progress-bar{transition:none;}
  .noise-overlay{display:none;}
}
@media print{
  .progress-bar-container,.top-bar,.toc,.noise-overlay,.copper-glow,.lamp-ground{display:none!important;}
  body{background:#fff;color:#111;}
  .layout{display:block;padding:0;}
  .column{max-width:100%;}
  .reading,.reading h3,.hero h1,.hero .subtitle{color:#111;text-shadow:none;}
}