/* =========================================================================
   où-sont-passées-les-lucioles — intermittence.css
   CSS statique : le Tailwind du design Stitch « Intermittence chromatique »
   compilé à la main, zéro réseau. Gamme SOMBRE native, voulue telle quelle :
   surfaces #0A1F1F / #081616 / #051010, accent cuivre #D2691E, texte
   #FFDAB9, filet #dcb99c. Halos atmosphériques et filament de sève repris
   du design ; barre supérieure, sommaire latéral collant, colonne de
   lecture et navigation de pied suivent la grammaire de la famille
   recherche-ia. Une seule retouche validée sur le design : les titres de
   section (H2) passent en 600.
   ========================================================================= */

:root{
  /* tokens du DS Stitch « Intermittence chromatique » */
  --surface:#0A1F1F;            /* surface / background */
  --surface-container:#081616;  /* mist-medium, conteneurs */
  --mist-deep:#051010;          /* chute la plus sombre */
  --primary:#D2691E;            /* cuivre : accent, appels, filets vifs */
  --on-surface:#FFDAB9;         /* texte principal (peach-soft) */
  --outline:#dcb99c;            /* filet, texte atténué */
  --text-strong:#ffffff;

  --serif:'Newsreader','Noto Serif JP','Noto Serif SC','Noto Serif KR','Iowan Old Style',Palatino,Georgia,serif;
  --sans:'Inter','Noto Serif JP','Noto Serif SC','Noto Serif KR',system-ui,-apple-system,'Segoe UI',sans-serif;

  --reading-width:760px;
  --sidebar-width:16rem;
  --margin-safe:40px;
}

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

body{
  min-height:100vh;position:relative;overflow-x:hidden;
  background-color:var(--surface);
  color:var(--on-surface);
  font-family:var(--sans);font-weight:300;font-size:16px;line-height:1.6;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
}
img{max-width:100%;height:auto;}
::selection{background:var(--on-surface);color:var(--surface);}

.skip-link{
  position:absolute;left:-9999px;top:0;z-index:200;
  background:var(--surface-container);color:var(--primary);
  padding:.75rem 1rem;font-family:var(--sans);
}
.skip-link:focus{left:0;}

/* ---- Halos atmosphériques (la brume, les lucioles) --------------------- */
.ambient-glow{
  position:fixed;border-radius:50%;filter:blur(100px);
  pointer-events:none;z-index:-1;mix-blend-mode:screen;
}
.glow-1{
  top:-10%;left:-10%;width:50vw;height:50vw;
  background:radial-gradient(circle, rgba(210,105,30,.15) 0%, rgba(10,31,31,0) 70%);
  animation:breathe 15s infinite alternate ease-in-out;
}
.glow-2{
  bottom:20%;right:-5%;width:40vw;height:40vw;
  background:radial-gradient(circle, rgba(255,218,185,.10) 0%, rgba(10,31,31,0) 70%);
  animation:breathe 20s infinite alternate-reverse ease-in-out;
}
@keyframes breathe{
  0%{transform:scale(1) translate(0,0);opacity:.8;}
  100%{transform:scale(1.1) translate(20px,-20px);opacity:1;}
}

/* ---- Filament de sève (ligne organique décorative) --------------------- */
.seve{
  position:fixed;left:var(--margin-safe);top:0;height:100%;width:6rem;
  pointer-events:none;z-index:-1;opacity:.3;mix-blend-mode:screen;
  display:none;
}
.seve-path{stroke-dasharray:1000;stroke-dashoffset:1000;animation:flow 20s linear infinite;}
@keyframes flow{to{stroke-dashoffset:0;}}

/* ---- Barre supérieure collante ---------------------------------------- */
.top-bar{
  position:fixed;top:0;left:0;right:0;z-index:50;
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
  padding:.75rem var(--margin-safe);
  background:rgba(10,31,31,.82);
  -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
  background-image:linear-gradient(to bottom, rgba(8,22,22,.5), rgba(8,22,22,0));
  border-bottom:1px solid rgba(220,185,156,.12);
}
.top-bar .home{
  display:inline-flex;align-items:center;gap:.55em;
  font-family:var(--sans);font-weight:400;font-size:12px;
  letter-spacing:.2em;text-transform:uppercase;
  color:var(--primary);text-decoration:none;white-space:nowrap;
  border:1px solid rgba(210,105,30,.32);padding:.45em .9em;border-radius:2px;
  transition:color .4s,border-color .4s,background-color .4s;
}
.top-bar .home:hover{color:var(--on-surface);border-color:rgba(210,105,30,.6);background:rgba(210,105,30,.08);}
.top-bar .home .arrow{transition:transform .5s;}
.top-bar .home:hover .arrow{transform:translateX(-3px);}
.top-bar .bar-title{
  font-family:var(--sans);font-weight:400;font-size:12px;
  letter-spacing:.2em;text-transform:uppercase;color:var(--outline);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  max-width:44vw;text-align:center;flex:0 1 auto;
}
.top-bar .to-author{
  font-family:var(--sans);font-weight:400;font-size:12px;
  letter-spacing:.2em;text-transform:uppercase;
  color:var(--on-surface);text-decoration:none;white-space:nowrap;
  transition:color .5s,opacity .5s;
}
.top-bar .to-author:hover{color:var(--primary);}

/* ---- Ossature : sommaire latéral collant + colonne de lecture ---------- */
.layout{
  max-width:80rem;margin:0 auto;position:relative;
  padding:120px var(--margin-safe) 64px;
  display:flex;gap:2rem;align-items:flex-start;
}
.toc{
  display:none;flex-direction:column;
  width:var(--sidebar-width);flex:0 0 var(--sidebar-width);
  position:sticky;top:25vh;align-self:flex-start;
  padding-left:.5rem;max-height:70vh;overflow-y:auto;
}
.toc h2{
  font-family:var(--serif);font-weight:300;font-size:24px;line-height:1.4;
  color:var(--on-surface);margin-bottom:.35rem;
}
.toc .toc-sub{
  font-family:var(--sans);font-weight:400;font-size:12px;
  letter-spacing:.2em;text-transform:uppercase;color:var(--outline);
  margin-bottom:2rem;
}
.toc nav{display:flex;flex-direction:column;gap:1.1rem;}
.toc-toggle{display:none;}
.toc a{
  display:flex;align-items:flex-start;gap:.75rem;
  font-family:var(--sans);font-weight:400;font-size:12px;line-height:1.4;
  letter-spacing:.12em;text-transform:uppercase;
  color:var(--outline);text-decoration:none;opacity:.45;
  transition:opacity .3s,color .3s,transform .5s;
}
.toc a::before{
  content:"";flex:0 0 auto;margin-top:.45em;
  width:6px;height:6px;border-radius:50%;
  background:var(--outline);transition:background-color .3s,box-shadow .3s;
}
.toc a:hover{opacity:1;color:var(--on-surface);transform:translateX(3px);}
.toc a.is-current{
  opacity:1;color:var(--primary);
}
.toc a.is-current::before{
  background:var(--primary);box-shadow:0 0 8px rgba(210,105,30,.85);
}
.toc a.is-current span{border-bottom:1px solid var(--primary);padding-bottom:2px;}

.column{flex:1 1 auto;max-width:var(--reading-width);margin:0 auto;min-width:0;}

/* ---- Seuil (hero) ------------------------------------------------------ */
.hero{margin-bottom:6rem;position:relative;}
.hero::before{
  content:"";position:absolute;top:-3rem;left:-3rem;width:12rem;height:12rem;
  background:rgba(210,105,30,.10);border-radius:50%;filter:blur(40px);
  pointer-events:none;
}
.hero .eyebrow{
  display:block;font-family:var(--sans);font-weight:400;font-size:12px;
  letter-spacing:.2em;text-transform:uppercase;color:var(--primary);
  margin-bottom:1.5rem;position:relative;z-index:1;
}
.hero h1{
  font-family:var(--serif);font-weight:200;
  font-size:36px;line-height:1.2;letter-spacing:.05em;
  color:var(--primary);margin-bottom:2rem;position:relative;z-index:1;
}
.hero .filament{
  height:1px;width:100%;
  background:linear-gradient(to right, rgba(220,185,156,.55), rgba(220,185,156,0));
  margin-bottom:1.5rem;
}
.hero .sign{
  font-family:var(--sans);font-weight:300;font-size:16px;line-height:1.6;
  color:var(--outline);
}

/* ---- Corps de lecture -------------------------------------------------- */
.reading{
  font-family:var(--sans);font-weight:300;font-size:18px;line-height:1.8;
  color:var(--on-surface);
}
.reading .section{margin-bottom:4rem;scroll-margin-top:7rem;}
.reading h2{
  font-family:var(--serif);font-weight:600;
  font-size:32px;line-height:1.3;letter-spacing:.05em;
  color:var(--on-surface);margin-bottom:1.5rem;
}
.reading .section:not(:first-child) h2{margin-top:4rem;}
.reading p{margin-bottom:1.5rem;}
.reading p:last-child{margin-bottom:0;}
.reading em{font-style:italic;}

/* lettrine cuivre, reprise du drop-cap du design */
.reading .section:first-child > p:first-of-type::first-letter{
  float:left;font-family:var(--serif);font-weight:200;
  font-size:4rem;line-height:.8;padding:.5rem .75rem 0 0;
  color:var(--primary);
}

/* ---- Citation en bloc (les deux passages CJK) -------------------------- */
.pull-quote{
  position:relative;margin:3rem 0;padding:2rem;
  border-left:2px solid rgba(210,105,30,.5);
  border-radius:0 .75rem .75rem 0;
  background:linear-gradient(to right, rgba(8,22,22,.55), rgba(8,22,22,0));
}
.pull-quote::before{
  content:"";position:absolute;top:1rem;left:-3px;width:4px;height:3rem;
  background:var(--primary);border-radius:9999px;
  box-shadow:0 0 10px rgba(210,105,30,.8);
}
.pull-quote blockquote{
  font-family:var(--serif);font-weight:300;font-size:24px;line-height:1.6;
  letter-spacing:.05em;color:var(--on-surface);
}

/* ---- Appareil de notes ------------------------------------------------- */
.note-ref{
  font-size:.7em;vertical-align:super;color:var(--primary);
  text-decoration:none;margin-left:.15em;font-family:var(--sans);font-weight:400;
}
.note-ref:hover,.note-ref:focus{text-decoration:underline;}
.apparatus{margin-top:4rem;padding-top:3rem;border-top:1px solid rgba(5,16,16,.9);}
.apparatus + .apparatus{margin-top:3rem;padding-top:2rem;border-top:1px solid rgba(220,185,156,.12);}
.apparatus h2{
  font-family:var(--serif);font-weight:300;font-size:24px;line-height:1.4;
  color:var(--on-surface);margin-bottom:2rem;
}
.notes-list{
  font-family:var(--sans);font-weight:300;font-size:14px;line-height:1.7;
  color:var(--outline);list-style:decimal;padding-left:1.5rem;
}
.notes-list li{margin-bottom:1rem;scroll-margin-top:7rem;}
.notes-list li::marker{color:rgba(210,105,30,.6);}
.notes-list li:target{background:rgba(210,105,30,.08);}
.note-back{color:var(--primary);text-decoration:none;margin-left:.35em;}
.note-back:hover,.note-back:focus{text-decoration:underline;}
.biblio{
  font-family:var(--sans);font-weight:300;font-size:14px;line-height:1.7;
  color:var(--outline);list-style:none;
}
.biblio li{margin-bottom:1rem;padding-left:1.5rem;text-indent:-1.5rem;}
.biblio a,.notes-list a:not(.note-back){
  color:var(--primary);text-decoration:none;
  border-bottom:1px solid rgba(210,105,30,.3);
  word-break:break-word;
}
.biblio a:hover,.notes-list a:not(.note-back):hover{color:var(--on-surface);border-bottom-color:var(--on-surface);}

/* ---- Navigation de pied ------------------------------------------------ */
.foot-nav{
  background:var(--surface-container);
  padding:3rem var(--margin-safe);margin-top:3rem;
}
.foot-nav .inner{
  max-width:80rem;margin:0 auto;
  display:flex;flex-direction:column;align-items:center;gap:2rem;
}
.foot-nav a{
  display:flex;flex-direction:column;align-items:center;gap:.75rem;
  text-decoration:none;transition:opacity .5s;
}
.foot-nav a:hover{opacity:.7;}
.foot-nav .kicker{
  font-family:var(--sans);font-weight:400;font-size:12px;
  letter-spacing:.2em;text-transform:uppercase;color:var(--outline);
}
.foot-nav .label{
  font-family:var(--serif);font-weight:300;font-size:24px;line-height:1.4;
  color:var(--on-surface);transition:color .3s;
}
.foot-nav a:hover .label{color:var(--primary);}
.foot-nav .medallion{
  width:3rem;height:3rem;border-radius:50%;
  border:1px solid rgba(210,105,30,.3);
  display:flex;align-items:center;justify-content:center;
  color:var(--primary);font-size:18px;line-height:1;
  transition:border-color .3s;
}
.foot-nav a:hover .medallion{border-color:var(--primary);}

.site-foot{
  background:var(--mist-deep);
  padding:4rem var(--margin-safe);
}
.site-foot .inner{
  max-width:80rem;margin:0 auto;text-align:center;
  display:flex;flex-direction:column;align-items:center;gap:1.25rem;
}
.site-foot .foot-note{
  font-family:var(--sans);font-weight:300;font-size:14px;line-height:1.8;
  color:var(--outline);max-width:38rem;
}
.site-foot .foot-sign{
  font-family:var(--sans);font-weight:400;font-size:12px;
  letter-spacing:.2em;text-transform:uppercase;color:rgba(210,105,30,.75);
}
.site-foot .links{display:flex;flex-wrap:wrap;gap:2rem;justify-content:center;}
.site-foot .links a{
  font-family:var(--sans);font-weight:300;font-size:14px;
  color:var(--on-surface);opacity:.8;text-decoration:none;
  transition:color .3s,opacity .3s;
}
.site-foot .links a:hover{opacity:1;color:var(--primary);}

/* ---- Points d'arrêt ---------------------------------------------------- */
@media (min-width:768px){
  .hero h1{font-size:48px;letter-spacing:.1em;}
  .toc{display:flex;}
}
@media (min-width:1024px){
  .seve{display:block;}
  .column{margin-left:6rem;margin-right:0;}
  .foot-nav .inner{flex-direction:row;justify-content:space-between;}
  .foot-nav a{align-items:flex-start;width:33%;}
  .foot-nav a.center{align-items:center;}
  .foot-nav a.right{align-items:flex-end;}
}
@media (max-width:767px){
  :root{--margin-safe:24px;}
  .reading{font-size:17px;}
  .top-bar .bar-title{display:none;}
  .layout{padding-top:104px;flex-direction:column;}
  /* Sous le seuil de la colonne latérale, le sommaire ne disparaît pas : il se
     colle sous la barre du haut et se replie en un bouton. Mécanique reprise
     de la page soeur a-partir-de-deux (olive.css, @media max-width:1023px),
     elle-même reprise de territoire-flux. Couche de navigation seule : aucune
     couleur, taille ni police du design adopté n'est touchée. */
  .toc{display:block;position:sticky;top:56px;z-index:45;
    width:auto;flex:none;max-height:none;overflow:visible;
    align-self:stretch;padding-left:0;
    margin-left:calc(-1 * var(--margin-safe));
    margin-right:calc(-1 * var(--margin-safe));
    padding:0 var(--margin-safe);margin-bottom:2.25rem;
    background:var(--surface);
    border-bottom:1px solid var(--outline);}
  .toc h2,.toc .toc-sub{display:none;}
  .toc .toc-toggle{display:flex;align-items:center;justify-content:space-between;
    width:100%;padding:.75rem 0;background:none;border:none;cursor:pointer;
    font-family:var(--sans);font-weight:400;font-size:12px;
    letter-spacing:.2em;text-transform:uppercase;
    color:var(--primary);text-align:left;}
  .toc .toc-toggle .chevron{transition:transform .25s;}
  .toc .toc-toggle[aria-expanded="true"] .chevron{transform:rotate(180deg);}
  .toc .toc-list{display:none;max-height:58vh;overflow-y:auto;
    gap:.9rem;padding:.25rem 0 1.1rem;}
  .toc .toc-list.open{display:flex;}
}

/* ---- Accessibilité / impression ---------------------------------------- */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  *{transition:none !important;animation:none !important;}
  .seve-path{stroke-dashoffset:0;}
}
@media print{
  .top-bar,.toc,.seve,.ambient-glow,.skip-link,.foot-nav,.site-foot .links{display:none !important;}
  body{background:#fff;color:#111;}
  .layout{display:block;padding:0;max-width:none;}
  .column{max-width:none;margin:0;}
  .hero::before{display:none;}
  .hero h1,.reading h2,.reading,.apparatus h2,.pull-quote blockquote{color:#111;}
  .hero .sign,.notes-list,.biblio,.site-foot .foot-note,.site-foot .foot-sign{color:#333;}
  .pull-quote{background:none;border-left:2px solid #999;}
  .pull-quote::before{display:none;}
  a{color:#111;text-decoration:none;}
  .biblio a,.notes-list a:not(.note-back){color:#111;border-bottom:none;}
  .reading .section{break-inside:auto;}
  h1,h2{break-after:avoid;}
}