/* =========================================================
   EMMA — refonte visuelle
   Chargée APRÈS style.css : elle ne fait que remplacer l'apparence.
   Pour revenir à l'ancien visuel, retirer la ligne refonte.css
   dans includes/head.php et index.php.
   ========================================================= */

:root{
  --r-fond:#060508;
  --r-panneau:#0d0b0e;
  --r-texte:#d9cfc5;
  --r-texte-doux:#9a8d82;
  --r-rouge:#a3262a;
  --r-rouge-doux:rgba(163,38,42,.38);
  --r-papier:#cbbfae;
  --r-mesure:34em;
}

::selection{background:rgba(163,38,42,.45);color:#fff}

/* ---------- Voile : il assombrissait le bas de l'écran pendant la lecture ---------- */
html body::after{background:radial-gradient(ellipse at center,transparent 55%,rgba(5,4,7,.42) 100%)!important}

/* ---------- Barre du haut + progression de lecture ---------- */
.reader-nav{
  top:0;
  background:linear-gradient(to bottom,rgba(6,5,8,.94),rgba(6,5,8,.72) 70%,transparent)!important;
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  padding:1rem clamp(1rem,4vw,3rem)!important;
}
.reader-nav .nav-home{letter-spacing:.32em;font-size:.78rem;color:var(--r-papier)}
.reader-nav .nav-progress{opacity:.85!important;color:var(--r-texte-doux);font-size:.72rem;letter-spacing:.28em}
.reader-nav .nav-next{font-size:.78rem;letter-spacing:.14em;color:#c9504f}
.reader-nav::after{
  content:"";position:absolute;left:0;bottom:0;height:2px;width:100%;
  background:linear-gradient(90deg,#5c1416,var(--r-rouge));
  transform-origin:0 50%;transform:scaleX(0);opacity:0;
}
@supports (animation-timeline:scroll()){
  .reader-nav::after{opacity:1;animation:emmaProgression linear both;animation-timeline:scroll(root)}
}
@keyframes emmaProgression{to{transform:scaleX(1)}}

/* ---------- En-tête de chapitre ---------- */
.ch-header{min-height:58vh!important}
.ch-num{color:rgba(232,221,208,.035)!important}
.ch-eyebrow{color:#b0393a!important;font-size:.72rem!important;letter-spacing:.55em!important}
.ch-title{animation-duration:.9s!important;animation-delay:0s!important;letter-spacing:.01em}
.ch-subtitle{font-style:italic;color:var(--r-texte-doux)!important;animation-duration:.9s!important;animation-delay:.15s!important}
.ch-divider{
  width:auto!important;height:auto!important;background:none!important;opacity:1!important;
  display:flex;align-items:center;justify-content:center;gap:.9rem;margin:2.2rem auto 0;
}
.ch-divider::before,.ch-divider::after{content:"";width:56px;height:1px;background:linear-gradient(90deg,transparent,var(--r-rouge-doux))}
.ch-divider::after{transform:scaleX(-1)}

/* ---------- Texte du roman ---------- */
.ch-body{max-width:calc(var(--r-mesure) + 10rem)!important}
.ch-body > p{
  max-width:var(--r-mesure)!important;
  font-size:clamp(1.2rem,1rem + .4vw,1.36rem)!important;
  line-height:1.75!important;
  color:var(--r-texte)!important;
  margin:0 auto 1.45em!important;
  text-wrap:pretty;
  hyphens:auto;-webkit-hyphens:auto;
}
/* Lettrine sur le premier paragraphe */
.ch-body > p:first-of-type::first-letter{
  float:left;font-family:"IM Fell English",serif;font-size:3.6em;line-height:.82;
  padding:.06em .1em 0 0;color:var(--r-rouge);
}

/* ---------- Documents d'archive ---------- */
.ch-body .doc-excerpt{
  position:relative;
  max-width:calc(var(--r-mesure) + 2rem)!important;
  margin:2.6rem auto!important;
  padding:2.4rem 1.8rem 1.6rem!important;
  background:
    repeating-linear-gradient(0deg,rgba(255,255,255,.012) 0 1px,transparent 1px 28px),
    linear-gradient(180deg,#110e10,#0b090b)!important;
  border:1px solid rgba(203,191,174,.09)!important;
  border-left:3px solid var(--r-rouge)!important;
  box-shadow:0 18px 40px -24px rgba(0,0,0,.9),inset 0 0 40px rgba(0,0,0,.35);
  color:#bfb3a6!important;
  font-size:.98rem!important;
  line-height:1.75!important;
  letter-spacing:.01em;
  white-space:pre-line;
}
.ch-body .doc-excerpt::before{
  content:attr(data-label)!important;
  position:absolute!important;top:.85rem!important;right:1rem!important;left:auto!important;bottom:auto!important;
  width:auto!important;height:auto!important;margin:0!important;line-height:1.4!important;background:none!important;
  padding:.2rem .55rem!important;
  border:1px solid rgba(176,57,58,.55);border-radius:2px;
  color:#b0393a!important;font-size:.6rem!important;letter-spacing:.32em!important;
  transform:rotate(-2deg);
}

/* ---------- Dernière phrase du chapitre ---------- */
.ch-body .cliffhanger{
  max-width:30em!important;
  margin:5rem auto 0!important;
  padding:2.6rem 0 0!important;
  border:0!important;
  position:relative;
  text-align:center;
  font-style:italic;
  color:#e4d6c8!important;
  font-size:clamp(1.3rem,2.2vw,1.6rem)!important;
  line-height:1.55;
}
.ch-body .cliffhanger::before{
  content:"";position:absolute;top:0;left:50%;width:120px;height:1px;transform:translateX(-50%);
  background:linear-gradient(90deg,transparent,var(--r-rouge),transparent);
}

/* ---------- Navigation en bas de chapitre ---------- */
.ch-footer-nav{gap:1rem;max-width:calc(var(--r-mesure) + 4rem)!important;margin:0 auto}
.ch-footer-nav .footer-nav-link{
  opacity:1!important;
  display:flex;align-items:center;justify-content:center;
  min-height:56px;padding:.9rem 1.4rem;
  border:1px solid rgba(203,191,174,.12)!important;border-radius:3px;
  color:var(--r-texte-doux);letter-spacing:.12em;font-size:.82rem;
  transition:border-color .25s ease,color .25s ease,background .25s ease;
}
.ch-footer-nav .footer-nav-link:hover,.ch-footer-nav .footer-nav-link:focus-visible{border-color:rgba(203,191,174,.3)!important;color:var(--r-texte);outline:none}
.ch-footer-nav .next-chapter{
  border-color:var(--r-rouge-doux)!important;
  background:linear-gradient(180deg,rgba(120,20,22,.18),rgba(120,20,22,.06));
  color:#e8d9cc;
}
.ch-footer-nav .next-chapter:hover,.ch-footer-nav .next-chapter:focus-visible{border-color:var(--r-rouge)!important;background:rgba(120,20,22,.28);color:#fff}

/* Chapitre suivant verrouillé : on explique pourquoi */
.ch-footer-nav .emma-next-locked{position:relative;cursor:not-allowed}
.ch-footer-nav .emma-next-locked::after{
  content:"Emma attend ta réponse";
  position:absolute;left:50%;bottom:calc(100% + .5rem);transform:translateX(-50%);
  white-space:nowrap;font-size:.68rem;letter-spacing:.1em;color:#b0393a;
}

/* ---------- Emma : une vraie conversation ---------- */
.emma-focus{background:radial-gradient(ellipse at 50% 40%,#12080b 0%,#030203 72%)!important}
.emma-focus-inner{
  display:flex!important;flex-direction:column!important;align-items:stretch!important;justify-content:flex-start!important;
  width:min(620px,calc(100vw - 2rem))!important;
  height:min(720px,calc(100dvh - 3rem));min-height:0!important;max-height:calc(100dvh - 2rem)!important;
  padding:0!important;overflow:hidden;
  border:1px solid rgba(163,38,42,.22);border-radius:14px;
  background:linear-gradient(180deg,#120a0d,#09060a);
  box-shadow:0 40px 100px -30px rgba(0,0,0,1),0 0 60px -20px rgba(163,38,42,.35);
}

/* en-tête : avatar, nom, statut */
.emma-focus-name{
  display:flex!important;align-items:center;gap:.8rem;
  margin:0!important;padding:1rem 1.2rem!important;width:auto!important;
  border-bottom:1px solid rgba(163,38,42,.18);
  background:rgba(0,0,0,.35);
  text-transform:none!important;letter-spacing:normal!important;font-size:1rem!important;color:inherit!important;
}
.emma-focus-name::before,.emma-focus-name::after{content:none!important}
.emma-avatar{
  position:relative;flex:0 0 auto;width:42px;height:42px;border-radius:50%;
  display:grid;place-items:center;
  background:radial-gradient(circle at 35% 30%,#4a1418,#14070a 70%);
  border:1px solid rgba(201,80,79,.45);
  color:#f0e4da;font-family:"IM Fell English",serif;font-size:1.35rem;
}
.emma-avatar::after{
  content:"";position:absolute;right:0;bottom:1px;width:11px;height:11px;border-radius:50%;
  background:#d6302f;border:2px solid #120a0d;box-shadow:0 0 8px rgba(214,48,47,.9);
  animation:emmaPouls 2.4s ease-in-out infinite;
}
@keyframes emmaPouls{50%{opacity:.35}}
.emma-qui{font-family:"Special Elite",monospace;font-size:1rem;letter-spacing:.12em;color:#f0e4da}
.emma-statut{margin-left:auto;font-family:"Special Elite",monospace;font-size:.75rem;letter-spacing:.06em;color:#c9504f}

/* fil des messages */
.emma-focus-lines{
  flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain;
  display:flex;flex-direction:column;gap:.5rem;
  padding:1.3rem 1.2rem!important;width:auto!important;
  font-size:clamp(1.02rem,1.8vw,1.15rem)!important;line-height:1.5!important;
  scrollbar-width:thin;scrollbar-color:rgba(163,38,42,.4) transparent;
}
.emma-focus-line{
  align-self:flex-start;max-width:82%;margin:0!important;min-height:0!important;
  padding:.6rem .9rem;border-radius:4px 16px 16px 16px;
  background:#1d1215;border:1px solid rgba(203,191,174,.07);
  color:#eee4dc!important;
  animation:emmaBulle .25s ease-out;
}
.emma-focus-line + .emma-focus-line:not(.lecteur){border-top-left-radius:4px}
.emma-focus-line.is-current::after{content:"▍";margin-left:.1em;color:#c9504f;animation:emmaCursor .8s steps(1) infinite}
@keyframes emmaCursor{50%{opacity:0}}
@keyframes emmaBulle{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

/* message du lecteur */
.emma-focus-line.lecteur{
  align-self:flex-end;position:relative;margin-top:.6rem!important;margin-bottom:1.1rem!important;
  border-radius:16px 16px 4px 16px;
  background:linear-gradient(180deg,#7d1a1f,#5e1216);border-color:rgba(255,120,110,.2);
  color:#fff!important;font-family:"Crimson Pro",serif;
}
.emma-focus-line.lecteur::after{
  content:"envoyé";position:absolute;right:.2rem;top:calc(100% + .25rem);
  font-family:"Special Elite",monospace;font-size:.62rem;letter-spacing:.06em;color:#8f7f75;
}
.emma-focus-line.lecteur.vu::after{content:"vu";color:#c9504f}

/* « Emma écrit… » */
.emma-ecrit{
  align-self:flex-start;display:inline-flex;gap:5px;margin:0;padding:.8rem .95rem;
  border-radius:4px 16px 16px 16px;background:#1d1215;border:1px solid rgba(203,191,174,.07);
}
.emma-ecrit span{width:7px;height:7px;border-radius:50%;background:#b5a79c;animation:emmaPoint 1.2s infinite ease-in-out}
.emma-ecrit span:nth-child(2){animation-delay:.15s}
.emma-ecrit span:nth-child(3){animation-delay:.3s}
@keyframes emmaPoint{0%,60%,100%{opacity:.25;transform:none}30%{opacity:1;transform:translateY(-4px)}}

/* zone de réponse, collée en bas comme une messagerie */
.emma-focus-response{
  margin:0!important;width:auto!important;padding:.9rem 1.2rem 1.1rem!important;
  border-top:1px solid rgba(163,38,42,.18);background:rgba(0,0,0,.3);
  animation:emmaBulle .3s ease-out;
}
body.emma-mode .emma-focus .emma-choice-list{display:flex!important;flex-wrap:wrap;gap:.5rem!important}
body.emma-mode .emma-focus .emma-choice{
  width:auto!important;flex:1 1 auto;text-align:center!important;
  border:1px solid rgba(201,80,79,.55)!important;border-radius:999px!important;
  padding:.7rem 1.1rem!important;min-height:44px;
  background:rgba(163,38,42,.08)!important;color:#f0e4da!important;
  font-family:"Crimson Pro",serif!important;font-size:clamp(.98rem,1.6vw,1.06rem)!important;line-height:1.3!important;
  transition:background .2s ease,border-color .2s ease,transform .15s ease;
}
body.emma-mode .emma-focus .emma-choice:hover,body.emma-mode .emma-focus .emma-choice:focus-visible{background:rgba(163,38,42,.35)!important;border-color:#e0383c!important;transform:translateY(-1px)!important;outline:none}
body.emma-mode .emma-focus .emma-text-answer{
  display:flex!important;align-items:center!important;gap:.5rem!important;
  border:1px solid rgba(203,191,174,.18)!important;border-radius:999px!important;
  padding:.2rem .3rem .2rem 1.1rem!important;background:rgba(255,255,255,.03)!important;
}
body.emma-mode .emma-focus .emma-text-answer:focus-within{border-color:#c9504f!important;box-shadow:0 0 0 3px rgba(163,38,42,.2)!important}
body.emma-mode .emma-focus .emma-text-answer input{font-family:"Crimson Pro",serif!important;font-size:max(16px,1.05rem)!important;color:#fff!important}
body.emma-mode .emma-focus .emma-text-answer button{
  border-radius:999px!important;padding:.55rem 1rem!important;
  background:#8a1c21!important;color:#fff!important;font-size:.75rem!important;letter-spacing:.08em!important;
}

.emma-astuce{
  margin:0;padding:.4rem 1rem .7rem;text-align:center;
  font-family:"Special Elite",monospace;font-size:.68rem;letter-spacing:.08em;color:#7d6f66;
  animation:emmaAstuce 2.6s ease-in-out infinite;
}
@keyframes emmaAstuce{50%{opacity:.4}}
.emma-astuce[hidden]{display:none}

.emma-focus-return{
  align-self:center!important;margin:.9rem auto 1.1rem!important;
  border:1px solid rgba(201,80,79,.6)!important;border-radius:999px;
  padding:.65rem 1.5rem!important;background:rgba(163,38,42,.18)!important;color:#f0e4da!important;opacity:1!important;
  font-size:.82rem!important;letter-spacing:.1em;
}
.emma-focus-return:hover,.emma-focus-return:focus-visible{background:rgba(163,38,42,.4)!important;color:#fff!important}

/* annonce pour lecteurs d'écran (invisible) */
.emma-annonce{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;margin:-1px}

/* ---------- L'humeur d'Emma change l'écran ---------- */
.emma-focus[data-humeur="happy"] .emma-avatar{background:radial-gradient(circle at 35% 30%,#6b2a22,#1a0a0a 70%)}
.emma-focus[data-humeur="sad"] .emma-focus-inner,
.emma-focus[data-humeur="exhausted"] .emma-focus-inner{filter:saturate(.6) brightness(.9)}
.emma-focus[data-humeur="sad"] .emma-avatar::after,
.emma-focus[data-humeur="exhausted"] .emma-avatar::after{animation-duration:4.5s}
.emma-focus[data-humeur="hesitant"] .emma-statut{color:#a58c80}
/* peur : la bulle en cours tremble, la fenêtre a des sursauts */
.emma-focus[data-humeur="scared"] .emma-focus-line.is-current{animation:emmaTremble .18s infinite}
.emma-focus[data-humeur="scared"] .emma-focus-inner{animation:emmaSursaut 7s infinite}
@keyframes emmaTremble{0%,100%{transform:none}25%{transform:translate(1px,-1px)}75%{transform:translate(-1px,1px)}}
@keyframes emmaSursaut{0%,93%,100%{transform:none;box-shadow:0 40px 100px -30px #000,0 0 60px -20px rgba(163,38,42,.35)}94%{transform:translate(-4px,2px);box-shadow:0 0 80px rgba(224,56,60,.5)}96%{transform:translate(3px,-2px)}}
/* stress : statut qui clignote */
.emma-focus[data-humeur="stressed"] .emma-statut{animation:emmaAstuce .6s steps(1) infinite}
/* « abnormal » : ce n'est plus Emma */
.emma-focus[data-humeur="abnormal"]{background:radial-gradient(ellipse at 50% 40%,#2a0507 0%,#050000 72%)!important}
.emma-focus[data-humeur="abnormal"] .emma-focus-inner{border-color:rgba(224,56,60,.7);animation:emmaInterference 3s steps(1) infinite}
.emma-focus[data-humeur="abnormal"] .emma-avatar{background:#000;color:#e0383c;animation:emmaInterference 1.3s steps(1) infinite}
.emma-focus[data-humeur="abnormal"] .emma-qui{color:#e0383c}
.emma-focus[data-humeur="abnormal"] .emma-focus-line{
  background:#160203;border-color:rgba(224,56,60,.4);color:#ff4b4f!important;
  font-family:"Special Elite",monospace;letter-spacing:.08em;text-shadow:0 0 10px rgba(224,56,60,.6);
}
@keyframes emmaInterference{0%,100%{filter:none;transform:none}31%{filter:invert(1) hue-rotate(160deg);transform:translateX(3px)}32%{filter:none;transform:none}77%{transform:skewX(-4deg)}78%{transform:none}}

@media (max-width:700px){
  .emma-focus-inner{width:100%!important;height:calc(100dvh - 1.3rem);border-radius:12px}
  .emma-focus-line{max-width:90%}
  .emma-focus .emma-choice{flex:1 1 100%}
}
@media (prefers-reduced-motion:reduce){
  .emma-focus *,.emma-focus-inner{animation:none!important}
}

/* ---------- Téléphone ---------- */
@media (max-width:700px){
  .ch-body{padding-left:16px!important;padding-right:16px!important}
  .ch-body > p{font-size:1.14rem!important;line-height:1.72!important}
  .ch-body .doc-excerpt{padding:2.3rem 1.1rem 1.2rem!important;font-size:.92rem!important;margin:2rem auto!important}
  .ch-footer-nav{padding-left:16px!important;padding-right:16px!important}
  .ch-footer-nav .emma-next-locked::after{bottom:auto;top:calc(100% + .4rem)}
}

@media (prefers-reduced-motion:reduce){
  .reader-nav::after{animation:none;opacity:0}
}