/* =========================================================================
   v10-rhizome — style
   Tokens en variables. Fond crème, jamais blanc plat. Overlay conforme
   aux maquettes Stitch (carte crème décalée). Flou du plan lointain : voir
   #canvas-far, une seule passe GPU.
   ========================================================================= */

/* ---- Fonts locales (woff2) ------------------------------------------- */
@font-face{
  font-family:"Inter";font-style:normal;font-weight:300;font-display:swap;
  src:url("../fonts/inter-normal-300-latin.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:"Inter";font-style:normal;font-weight:300;font-display:swap;
  src:url("../fonts/inter-normal-300-latin-ext.woff2") format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face{
  font-family:"Inter";font-style:normal;font-weight:400;font-display:swap;
  src:url("../fonts/inter-normal-400-latin.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:"Inter";font-style:normal;font-weight:400;font-display:swap;
  src:url("../fonts/inter-normal-400-latin-ext.woff2") format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face{
  font-family:"Newsreader";font-style:italic;font-weight:200;font-display:swap;
  src:url("../fonts/newsreader-italic-200-latin.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:"Newsreader";font-style:italic;font-weight:200;font-display:swap;
  src:url("../fonts/newsreader-italic-200-latin-ext.woff2") format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face{
  font-family:"Newsreader";font-style:italic;font-weight:300;font-display:swap;
  src:url("../fonts/newsreader-italic-300-latin.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:"Newsreader";font-style:italic;font-weight:300;font-display:swap;
  src:url("../fonts/newsreader-italic-300-latin-ext.woff2") format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

/* ---- Tokens ----------------------------------------------------------- */
:root{
  /* crème */
  --cream:#fff8f5; --cream-2:#f6e9e0; --cream-3:#ece0d8;
  /* cuivre / chauds */
  --copper:#854e26; --copper-soft:#a2663c; --terre:#c8794a;
  --amber:#ffb786; --peche:#ffdcc6;
  /* froids (vibration) */
  --teal:#0b6571; --teal-soft:#327f8a; --blue-pale:#89d2df;
  /* encre / texte */
  --ink:#201a17; --ink-soft:#52443b; --ink-faint:#85746a;
  /* halo crème pour la lisibilité des labels */
  --halo:0 0 7px var(--cream),0 0 13px var(--cream),0 0 22px var(--cream),0 1px 0 rgba(255,255,255,.6);

  --serif:"Newsreader","Iowan Old Style",Palatino,Georgia,serif;
  --sans:"Inter",system-ui,-apple-system,Segoe UI,sans-serif;
}

*{margin:0;padding:0;box-sizing:border-box;}
html,body{width:100%;height:100%;overflow:hidden;}
body{
  font-family:var(--sans);
  color:var(--ink-soft);
  /* radial chaud au centre vers crème plus sourd aux bords ; jamais centre quasi-blanc */
  background:radial-gradient(ellipse 120% 95% at 50% 44%,
    #fffbf7 0%, #f6e9e0 56%, #e9dcd3 100%);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

/* ---- Canvas : DOF par plans (un seul flou CSS par plan) --------------- */
/* profondeur de champ sans crash : chaque plan reçoit UN blur GPU global,
   jamais ctx.filter par trait. far recule dans la brume, near est net. */
#canvas-far,#canvas-mid,#canvas-near{position:fixed;inset:0;display:block;}
#canvas-far{filter:blur(4.6px);z-index:1;}
#canvas-mid{filter:blur(1.5px);z-index:2;}
#canvas-near{z-index:3;}

/* ---- Atmosphère : halos chaud/froid + brume -------------------------- */
.tint{position:fixed;z-index:0;pointer-events:none;border-radius:50%;mix-blend-mode:multiply;}
#tint-warm{width:74vw;height:74vw;top:-18vw;left:-12vw;
  background:radial-gradient(circle,rgba(168,108,58,.11),transparent 64%);
  animation:drift1 26s ease-in-out infinite;}
#tint-cool{width:56vw;height:56vw;bottom:-14vw;right:-10vw;
  background:radial-gradient(circle,rgba(48,118,132,.085),transparent 64%);
  animation:drift2 32s ease-in-out infinite;}
#brume{position:fixed;inset:0;z-index:4;pointer-events:none;
  background:radial-gradient(ellipse 84% 80% at 50% 47%,
    rgba(255,250,246,0) 44%, rgba(248,238,230,.36) 80%, rgba(242,228,217,.82) 100%);}

@keyframes drift1{0%,100%{transform:translate(0,0) scale(1);opacity:.85}50%{transform:translate(3.5vw,2.5vh) scale(1.12);opacity:1}}
@keyframes drift2{0%,100%{transform:translate(0,0) scale(1);opacity:.7}50%{transform:translate(-3vw,-2vh) scale(1.14);opacity:1}}

/* ---- Labels des nœuds (DOM net, halo crème) -------------------------- */
#labels{position:fixed;inset:0;z-index:5;pointer-events:none;}
.label{position:absolute;left:0;top:0;
  transform-origin:center;white-space:nowrap;text-align:center;
  pointer-events:none;will-change:transform,opacity;}
.label .kind{display:block;font-family:var(--sans);font-weight:300;
  font-size:10px;letter-spacing:.32em;text-transform:uppercase;
  color:var(--ink-faint);opacity:.7;margin-bottom:.4em;text-shadow:var(--halo);}
.label .lab{display:block;font-family:var(--serif);font-style:italic;font-weight:300;
  line-height:1.04;font-size:20px;color:var(--ink-soft);text-shadow:var(--halo);}
.label .tag-apar{display:block;font-family:var(--sans);font-weight:300;
  font-size:9px;letter-spacing:.28em;text-transform:uppercase;
  color:var(--copper-soft);opacity:.75;margin-top:.5em;text-shadow:var(--halo);}

/* hiérarchie chromatique : œuvres dominent, pensées/cas reculent */
.label.oeuvre .lab{color:var(--copper);font-size:23px;font-weight:300;}
.label.oeuvre .kind{color:#9a5a2e;opacity:.85;}
.label.apar .lab{color:var(--copper-soft);font-size:21px;}
.label.question .lab{color:#b07a3a;}
.label.pensee .lab{color:#9a8a7e;font-weight:200;}
.label.cas .lab{color:#8a948f;font-weight:200;}
/* le procédé : encre froide sarcelle, vibre contre le cuivre, discret —
   ni cuivre franc (réservé aux œuvres) ni invisible. */
.label.procede .lab{color:var(--teal-soft);font-weight:300;font-size:19px;}
.label.procede .kind{color:var(--teal);opacity:.78;}

.label.is-focal .lab{font-size:40px;color:var(--copper);}
.label.is-focal.question .lab{color:var(--copper);}
/* le procédé focal garde son encre froide (saturée), pas le cuivre des œuvres */
.label.is-focal.procede .lab{color:var(--teal);}
.label.is-focal .kind{opacity:.95;}
.label.clickable{pointer-events:auto;cursor:pointer;}
.label.clickable:hover .lab{color:var(--copper);}
.label.procede.clickable:hover .lab{color:var(--teal);}

/* DOF des labels lointains : un filter blur CSS sur le DOM (labels peu
   nombreux, compositing GPU). Très léger, croissant avec l'éloignement.
   Classes posées par le JS selon la profondeur. */
.label.dof-1{filter:blur(.6px);}
.label.dof-2{filter:blur(1.5px);}
.label.dof-3{filter:blur(2.8px);}

/* ---- Seuil ------------------------------------------------------------ */
#seuil{position:fixed;inset:0;z-index:6;display:flex;flex-direction:column;
  align-items:center;justify-content:center;text-align:center;padding:6vh 7vw;
  transition:opacity 1.1s ease, visibility 1.1s ease;}
#seuil.gone{opacity:0;visibility:hidden;pointer-events:none;}
#seuil-inner{pointer-events:none;}
#seuil-title{font-family:var(--serif);font-style:italic;font-weight:300;
  font-size:clamp(40px,6.2vw,86px);line-height:1.04;letter-spacing:.02em;
  color:var(--copper);
  text-shadow:0 1px 0 rgba(255,255,255,.5),0 0 40px rgba(255,205,160,.42);
  animation:breathe 14s ease-in-out infinite;}
#seuil-subtitle{margin-top:1.4em;font-family:var(--serif);font-style:italic;font-weight:300;
  font-size:clamp(14px,1.7vw,21px);letter-spacing:.26em;color:var(--ink-soft);opacity:.82;
  animation:breathe 18s ease-in-out infinite reverse;}
#seuil-enter{position:absolute;left:50%;transform:translateX(-50%);bottom:6vh;
  background:none;border:none;cursor:pointer;
  font-family:var(--sans);font-weight:300;font-size:clamp(11px,1.1vw,13px);
  letter-spacing:.42em;text-transform:uppercase;color:var(--copper-soft);
  display:flex;flex-direction:column;align-items:center;gap:.9em;
  padding:1em 1.4em;transition:color .4s;}
#seuil-enter:hover{color:var(--copper);}
#seuil-enter .enter-arrow{font-size:1.6em;letter-spacing:0;
  animation:bob 3.4s ease-in-out infinite;}

@keyframes breathe{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}}
@keyframes bob{0%,100%{opacity:.45;transform:translateY(0)}50%{opacity:.95;transform:translateY(6px)}}

/* ---- Footer : ligne de base persistante ------------------------------
   Le propos, posé sur la marge crème (dégradé bas) pour se détacher du
   maillage. Présent au seuil ET en exploration. Sous l'overlay (z<10),
   au-dessus des canvas. Le bouton « Entrer » (bottom:6vh) reste au-dessus :
   le footer est collé tout en bas, pas de collision. */
#footer-line{
  position:fixed;left:50%;bottom:0;transform:translateX(-50%);
  z-index:7;pointer-events:none;
  width:100%;max-width:none;text-align:center;
  padding:1.05em 7vw calc(.95em + env(safe-area-inset-bottom));
  font-family:var(--sans);font-weight:300;
  font-size:clamp(11px,1.15vw,13px);line-height:1.45;letter-spacing:.03em;
  color:var(--ink-faint);
  /* halo crème : dégradé montant qui assoit la ligne sur la marge, pas dans les fils */
  background:linear-gradient(180deg,
    rgba(246,233,224,0) 0%, rgba(246,233,224,.6) 42%, rgba(240,228,217,.92) 100%);
  text-shadow:var(--halo);
}
#footer-line .footer-text{display:inline-block;max-width:62em;}

/* ---- Overlay (carte crème décalée — cf. maquettes) ------------------- */
#overlay{position:fixed;inset:0;z-index:10;}
#overlay[hidden]{display:none;}
#overlay-scrim{position:absolute;inset:0;background:rgba(252,244,238,.18);
  -webkit-backdrop-filter:blur(.5px);backdrop-filter:blur(.5px);
  opacity:0;transition:opacity .5s ease;}
#overlay.open #overlay-scrim{opacity:1;}

#overlay-card{
  position:absolute;
  /* côté ADAPTATIF : la carte se pose du côté opposé au nœud focal (le vide).
     side-right par défaut ; side-left quand le focal est à droite de l'écran.
     Le côté est posé par le JS ; la transition left/right glisse en douceur. */
  top:50%;right:6vw;left:auto;
  transform:translateY(-50%) translateY(18px);
  width:min(440px,86vw);
  max-height:84vh;overflow-y:auto;
  background:linear-gradient(180deg, rgba(255,250,247,.93), rgba(252,243,237,.9));
  border:1px solid rgba(133,78,38,.08);
  border-radius:14px;
  box-shadow:0 24px 70px -28px rgba(86,53,28,.34),0 6px 18px -10px rgba(86,53,28,.2);
  -webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);
  padding:38px 40px 34px;
  opacity:0;
  transition:opacity .5s ease,transform .55s cubic-bezier(.2,.7,.2,1),
             left .55s cubic-bezier(.2,.7,.2,1),right .55s cubic-bezier(.2,.7,.2,1);
}
#overlay-card.side-right{right:6vw;left:auto;}
#overlay-card.side-left{left:6vw;right:auto;}
#overlay.open #overlay-card{opacity:1;transform:translateY(-50%) translateY(0);}

#overlay-close{position:absolute;top:16px;right:18px;background:none;border:none;
  font-size:26px;line-height:1;color:var(--ink-faint);cursor:pointer;
  width:34px;height:34px;border-radius:50%;transition:color .3s,background .3s;}
#overlay-close:hover{color:var(--copper);background:rgba(133,78,38,.07);}

.ov-eyebrow{font-family:var(--sans);font-weight:300;font-size:11px;
  letter-spacing:.34em;text-transform:uppercase;color:var(--ink-faint);margin-bottom:1.3em;}
.ov-title{font-family:var(--serif);font-style:italic;font-weight:300;
  font-size:clamp(30px,4vw,40px);line-height:1.06;color:var(--copper);margin-bottom:.5em;}
.ov-subtitle{font-family:var(--serif);font-style:italic;font-weight:300;
  font-size:clamp(15px,2vw,18px);line-height:1.4;color:var(--copper-soft);margin-bottom:1.2em;}
.ov-incipit{font-family:var(--serif);font-style:italic;font-weight:300;
  font-size:14.5px;line-height:1.55;color:var(--ink-faint);margin-bottom:1.2em;
  padding-left:.9em;border-left:1px solid rgba(133,78,38,.18);}
.ov-incipit[hidden]{display:none;}
.ov-rule{width:34px;height:1px;background:linear-gradient(90deg,var(--copper-soft),transparent);
  margin:0 0 1.5em;}
.ov-body{font-family:var(--sans);font-weight:300;font-size:14.5px;line-height:1.62;
  color:var(--ink-soft);margin-bottom:1.6em;}
.ov-cta{display:inline-block;font-family:var(--sans);font-weight:400;font-size:12px;
  letter-spacing:.24em;text-transform:uppercase;color:var(--copper);text-decoration:none;
  border-bottom:1px solid rgba(133,78,38,.4);padding-bottom:3px;margin-bottom:1.8em;
  transition:border-color .3s,color .3s;}
.ov-cta:hover{border-color:var(--copper);color:var(--brun,#5c412f);}
.ov-cta[hidden]{display:none;}

.ov-network{margin-top:.4em;}
.ov-network-title{font-family:var(--sans);font-weight:400;font-size:11px;
  letter-spacing:.3em;text-transform:uppercase;color:var(--ink-faint);margin-bottom:1.1em;}
#ov-network-list{list-style:none;}
#ov-network-list li{margin:0;}
.net-item{display:flex;align-items:baseline;justify-content:space-between;gap:1em;
  width:100%;background:none;border:none;text-align:left;cursor:pointer;
  padding:.62em 0;border-top:1px solid rgba(133,78,38,.07);
  font-family:var(--sans);transition:padding-left .3s;}
#ov-network-list li:first-child .net-item{border-top:none;}
.net-item:hover{padding-left:.4em;}
.net-item .net-label{font-weight:300;font-size:14px;color:var(--ink-soft);
  transition:color .3s;}
.net-item:hover .net-label{color:var(--copper);}
.net-item .net-kind{font-weight:300;font-size:10px;letter-spacing:.24em;
  text-transform:uppercase;color:var(--ink-faint);opacity:.7;white-space:nowrap;}

/* ---- Responsive : mobile = bottom-sheet ------------------------------ */
@media (max-width:680px){
  /* mobile = bottom-sheet pleine largeur, le côté adaptatif est neutralisé */
  #overlay-card,
  #overlay-card.side-left,
  #overlay-card.side-right{
    top:auto;bottom:0;left:0;right:auto;
    width:100%;max-width:100%;max-height:86vh;
    transform:translateY(100%);
    border-radius:18px 18px 0 0;
    padding:30px 24px calc(30px + env(safe-area-inset-bottom));
  }
  #overlay.open #overlay-card{transform:translateY(0);}
  #overlay-close{top:14px;right:14px;}
  .label .lab{font-size:18px;}
  .label.is-focal .lab{font-size:30px;}
  .label.oeuvre .lab{font-size:20px;}
  #seuil-title{font-size:clamp(34px,9vw,52px);}
  /* mobile : la ligne peut passer sur deux lignes, reste lisible et collée au bas */
  #footer-line{font-size:12px;letter-spacing:.02em;line-height:1.4;
    padding:.95em 6vw calc(.85em + env(safe-area-inset-bottom));}
  #footer-line .footer-text{max-width:34em;}
}

/* ---- prefers-reduced-motion ------------------------------------------ */
@media (prefers-reduced-motion:reduce){
  #seuil-title,#seuil-subtitle,#seuil-enter .enter-arrow,.tint{animation:none;}
  #overlay-card,#overlay-scrim,#seuil{transition:none;}
}