/* =========================================================================
   v10-rhizome — auteur.css
   Page de texte du pivot. Colonne lisible centrée, fond crème (jamais blanc
   plat), titres Newsreader italique cuivre, corps Inter. Reprend les tokens
   de style.css (crème / cuivre). Pas de canvas, pas de moteur : page statique
   avec une brume crème discrète, coupée en reduced-motion.
   ========================================================================= */

/* ---- Fonts locales (woff2) — mêmes @font-face que style.css ----------- */
@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 (repris de style.css) ------------------------------------ */
:root{
  --cream:#fff8f5; --cream-2:#f6e9e0; --cream-3:#ece0d8;
  --copper:#854e26; --copper-soft:#a2663c; --terre:#c8794a;
  --amber:#ffb786; --peche:#ffdcc6;
  --teal:#0b6571; --teal-soft:#327f8a; --blue-pale:#89d2df;
  --ink:#201a17; --ink-soft:#52443b; --ink-faint:#85746a;

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

  --measure:42rem;
}

*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  min-height:100%;
  font-family:var(--sans);font-weight:300;
  color:var(--ink-soft);
  /* deux radiales crème : chaud en haut, légère reprise sourde en bas ;
     jamais blanc plat sur toute la hauteur */
  background:
    radial-gradient(ellipse 120% 60% at 50% 0%, #fffbf7 0%, #f7ebe2 50%, rgba(233,220,211,0) 100%),
    radial-gradient(ellipse 120% 55% at 50% 100%, #efe2d9 0%, #f4e8df 55%, #f7ece4 100%);
  background-attachment:fixed;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  line-height:1.7;
  font-size:17px;
}

/* brume crème discrète qui respire derrière le texte — touche rhizome,
   posée en fixed, sous le contenu. Coupée en reduced-motion. */
.atmo{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden;}
.atmo span{position:absolute;border-radius:50%;mix-blend-mode:multiply;display:block;}
.atmo .warm{width:70vw;height:70vw;top:-22vw;left:-16vw;
  background:radial-gradient(circle,rgba(168,108,58,.10),transparent 64%);
  animation:auteur-drift-a 30s ease-in-out infinite;}
.atmo .cool{width:52vw;height:52vw;bottom:-18vw;right:-12vw;
  background:radial-gradient(circle,rgba(48,118,132,.075),transparent 64%);
  animation:auteur-drift-b 36s ease-in-out infinite;}

@keyframes auteur-drift-a{0%,100%{transform:translate(0,0) scale(1);opacity:.8}50%{transform:translate(3vw,2vh) scale(1.1);opacity:1}}
@keyframes auteur-drift-b{0%,100%{transform:translate(0,0) scale(1);opacity:.65}50%{transform:translate(-2.5vw,-1.8vh) scale(1.12);opacity:1}}

/* le contenu vit au-dessus de la brume */
.page{position:relative;z-index:1;}

/* ---- En-tête : nav du pivot ------------------------------------------ */
.site-head{
  width:100%;
  padding:1.7rem clamp(1.2rem,5vw,2.6rem);
  display:flex;align-items:center;justify-content:space-between;
  gap:1.2rem;flex-wrap:wrap;
}
.site-head .home{
  font-family:var(--serif);font-style:italic;font-weight:300;
  font-size:1.18rem;color:var(--copper);text-decoration:none;
  letter-spacing:.01em;transition:color .3s;
  display:inline-flex;align-items:baseline;gap:.5em;white-space:nowrap;
}
.site-head .home .arrow{font-size:.85em;color:var(--copper-soft);transition:transform .3s;}
.site-head .home:hover{color:var(--ink);}
.site-head .home:hover .arrow{transform:translateX(-3px);}

.nav{display:flex;align-items:center;gap:clamp(.9rem,2.4vw,1.9rem);flex-wrap:wrap;}
.nav a{
  font-family:var(--sans);font-weight:300;font-size:.72rem;
  letter-spacing:.22em;text-transform:uppercase;
  color:var(--ink-faint);text-decoration:none;
  padding-bottom:3px;border-bottom:1px solid transparent;
  transition:color .3s,border-color .3s;white-space:nowrap;
}
.nav a:hover{color:var(--copper);border-color:rgba(133,78,38,.4);}

/* ---- Colonne lisible -------------------------------------------------- */
.column{
  max-width:var(--measure);
  margin:0 auto;
  padding:clamp(2.2rem,7vw,5rem) clamp(1.3rem,6vw,2rem) clamp(3rem,8vw,6rem);
}

/* eyebrow */
.eyebrow{
  font-family:var(--sans);font-weight:300;font-size:.72rem;
  letter-spacing:.32em;text-transform:uppercase;color:var(--ink-faint);
  margin-bottom:1.7rem;
}

/* H1 — nom */
.name{
  font-family:var(--serif);font-style:italic;font-weight:300;
  font-size:clamp(2.6rem,7vw,4.3rem);line-height:1.04;letter-spacing:.01em;
  color:var(--copper);
  text-shadow:0 1px 0 rgba(255,255,255,.5),0 0 40px rgba(255,205,160,.32);
  margin-bottom:1.9rem;
}

/* corps de présentation */
.lede p{
  font-size:1.16rem;line-height:1.72;color:var(--ink-soft);
  margin-bottom:1.45rem;
}
.lede .pivot{
  font-family:var(--serif);font-style:italic;font-weight:300;
  font-size:1.32rem;line-height:1.5;color:var(--copper-soft);
  margin:2rem 0 1.9rem;
}

/* liens de la présentation : ligne de visages */
.faces{
  display:flex;flex-wrap:wrap;gap:.6rem 1.4rem;
  margin-top:1.9rem;
  padding-top:1.7rem;border-top:1px solid rgba(133,78,38,.14);
}
.faces a{
  font-family:var(--sans);font-weight:400;font-size:.74rem;
  letter-spacing:.18em;text-transform:uppercase;
  color:var(--copper);text-decoration:none;
  border-bottom:1px solid rgba(133,78,38,.3);padding-bottom:2px;
  transition:color .3s,border-color .3s;
}
.faces a:hover{color:var(--ink);border-color:var(--copper);}

/* ---- Séparateur de section ------------------------------------------- */
.sep{
  width:46px;height:1px;margin:clamp(3.4rem,8vw,5.2rem) auto;
  background:linear-gradient(90deg,transparent,var(--copper-soft),transparent);
}

/* ---- Le procédé ------------------------------------------------------- */
.section-title{
  font-family:var(--serif);font-style:italic;font-weight:300;
  font-size:clamp(1.9rem,4.6vw,2.7rem);line-height:1.1;
  color:var(--copper);margin-bottom:1.8rem;
}
.prose p{
  font-size:1.08rem;line-height:1.74;color:var(--ink-soft);
  margin-bottom:1.4rem;
}
.prose .intro-questions{
  color:var(--ink);font-size:1.12rem;margin-bottom:0;
}

/* ---- Les quatre questions : enchaînement aéré, pas une liste sèche ---- */
.questions{
  margin:2.4rem 0 0;
  counter-reset:q;
}
.q{
  position:relative;
  padding:1.9rem 0 1.9rem 2.9rem;
  border-top:1px solid rgba(133,78,38,.13);
}
.q:last-child{border-bottom:1px solid rgba(133,78,38,.13);}
.q::before{
  counter-increment:q;
  content:counter(q);
  position:absolute;left:0;top:1.95rem;
  font-family:var(--serif);font-style:italic;font-weight:300;
  font-size:1.5rem;line-height:1;color:var(--teal-soft);
  opacity:.85;
}
.q .q-text{
  font-family:var(--serif);font-style:italic;font-weight:300;
  font-size:clamp(1.35rem,3.4vw,1.7rem);line-height:1.3;
  color:var(--copper);margin-bottom:.85rem;
}
.q .q-dev{
  font-family:var(--sans);font-weight:300;
  font-size:1.04rem;line-height:1.66;color:var(--ink-soft);
}
.q .q-dev em{font-style:italic;color:var(--copper-soft);}

/* paragraphes de clôture du procédé */
.closing{margin-top:2.6rem;}
.closing p{font-size:1.08rem;line-height:1.74;color:var(--ink-soft);margin-bottom:1.4rem;}

/* ---- CTA entrer dans le rhizome -------------------------------------- */
.cta-wrap{margin-top:2.8rem;}
.cta{
  display:inline-flex;align-items:center;gap:.7em;
  font-family:var(--sans);font-weight:400;font-size:.82rem;
  letter-spacing:.24em;text-transform:uppercase;
  color:var(--copper);text-decoration:none;
  padding:.85em 1.6em;
  border:1px solid rgba(133,78,38,.32);border-radius:999px;
  transition:color .35s,border-color .35s,background .35s;
}
.cta .arrow{font-size:1.1em;transition:transform .35s;}
.cta:hover{color:var(--ink);border-color:var(--copper);background:rgba(133,78,38,.05);}
.cta:hover .arrow{transform:translateX(4px);}

/* ---- Pied : nav répétée ---------------------------------------------- */
.site-foot{
  position:relative;z-index:1;
  margin-top:clamp(3rem,8vw,6rem);
  padding:2.6rem clamp(1.2rem,5vw,2.6rem) calc(2.6rem + env(safe-area-inset-bottom));
  border-top:1px solid rgba(133,78,38,.14);
  display:flex;align-items:center;justify-content:space-between;
  gap:1.2rem;flex-wrap:wrap;
}
.site-foot .foot-line{
  font-family:var(--serif);font-style:italic;font-weight:300;
  font-size:1.02rem;color:var(--copper-soft);
}
.site-foot .nav a{color:var(--ink-faint);}
.site-foot .nav a:hover{color:var(--copper);}

/* ---- Responsive mobile ----------------------------------------------- */
@media (max-width:680px){
  body{font-size:16px;}
  .site-head{padding:1.3rem 1.2rem;gap:.9rem;}
  .site-head .home{font-size:1.06rem;}
  .nav{gap:.7rem 1.1rem;}
  .nav a{font-size:.66rem;letter-spacing:.16em;}
  .column{padding:1.8rem 1.3rem 3rem;}
  .lede p{font-size:1.08rem;}
  .lede .pivot{font-size:1.18rem;}
  .q{padding:1.5rem 0 1.5rem 2.3rem;}
  .q::before{top:1.55rem;font-size:1.3rem;}
  .faces{gap:.5rem 1rem;}
  .site-foot{flex-direction:column;align-items:flex-start;gap:1.4rem;}
}

/* ---- prefers-reduced-motion ------------------------------------------ */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  .atmo .warm,.atmo .cool{animation:none;}
  .cta,.cta .arrow,.site-head .home .arrow{transition:none;}
}