/* =========================================================
   EMMA — couverture (index.php)
   ========================================================= */

:root{
  --c-noir:#050407;
  --c-papier:#e9dfd3;
  --c-doux:#a39486;
  --c-rouge:#b3262b;
  --c-rouge-vif:#e0383c;
}

*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;min-height:100%;background:var(--c-noir);color:var(--c-papier)}
body.couv{
  min-height:100vh;min-height:100dvh;overflow-x:hidden;
  font-family:"Crimson Pro",Georgia,serif;
  -webkit-font-smoothing:antialiased;
}
::selection{background:rgba(179,38,43,.5);color:#fff}

/* ---------- Fond : le corridor ---------- */
.couv-fond{position:fixed;inset:0;z-index:0;overflow:hidden;background:var(--c-noir)}
.couv-fond img{
  position:absolute;inset:-4%;width:108%;height:108%;object-fit:cover;object-position:50% 45%;
  filter:saturate(.75) contrast(1.25) brightness(.72) sepia(.25) hue-rotate(-12deg);
  animation:couvAvance 40s ease-in-out infinite alternate;
}
@keyframes couvAvance{from{transform:scale(1)}to{transform:scale(1.09) translateY(-1%)}}
/* assombrit les bords et le centre pour que le titre reste lisible */
.couv-fond::before{
  content:"";position:absolute;inset:0;z-index:1;
  background:
    linear-gradient(rgba(90,0,6,.22),rgba(90,0,6,.22)),
    radial-gradient(ellipse 50% 30% at 50% 30%,rgba(5,4,7,.45),transparent 75%),
    linear-gradient(180deg,rgba(5,4,7,.9) 0%,rgba(5,4,7,.2) 30%,rgba(5,4,7,.35) 65%,rgba(5,4,7,.97) 100%),
    radial-gradient(ellipse at center,transparent 35%,rgba(0,0,0,.92) 100%);
}
/* grain + lignes de balayage, comme une vieille bande vidéo */
.couv-fond::after{
  content:"";position:absolute;inset:-50%;z-index:2;pointer-events:none;opacity:.09;
  background-image:
    repeating-linear-gradient(0deg,rgba(255,255,255,.08) 0 1px,transparent 1px 3px),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  animation:couvGrain 1.2s steps(6) infinite;
}
@keyframes couvGrain{
  0%{transform:translate(0,0)}20%{transform:translate(-3%,2%)}40%{transform:translate(2%,-3%)}
  60%{transform:translate(-2%,-1%)}80%{transform:translate(3%,3%)}100%{transform:translate(0,0)}
}
/* le néon du plafond qui grésille */
.couv-neon{
  position:fixed;inset:0;z-index:1;pointer-events:none;
  background:radial-gradient(ellipse 18% 30% at 51% 22%,rgba(220,235,255,.10),transparent 70%);
  animation:couvNeon 7s steps(1) infinite;
}
@keyframes couvNeon{0%,100%{opacity:1}61%{opacity:.2}62%{opacity:1}64%{opacity:.1}66%{opacity:1}91%{opacity:.45}92%{opacity:1}}

/* ---------- Mise en page ---------- */
.couv-page{
  position:relative;z-index:3;
  min-height:100vh;min-height:100dvh;
  display:grid;grid-template-rows:auto 1fr auto;
  padding:clamp(16px,3vw,2.4rem) clamp(16px,4vw,3.2rem);
}

/* bandeau du haut : en-tête de dossier */
.couv-entete{
  display:flex;justify-content:space-between;align-items:flex-start;gap:1rem;flex-wrap:wrap;
  font-family:"Special Elite","Courier New",monospace;font-size:.72rem;letter-spacing:.22em;
  color:var(--c-doux);text-transform:uppercase;
}
.couv-entete span{display:block}
.couv-entete .couv-rouge{color:var(--c-rouge-vif)}
.couv-entete-droite{text-align:right}

/* bloc central */
.couv-centre{
  display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;
  padding:3rem 0;
}
.couv-tampon{
  display:inline-block;margin-bottom:1.6rem;padding:.35rem .9rem;
  border:2px solid rgba(224,56,60,.75);border-radius:3px;
  color:var(--c-rouge-vif);font-family:"Special Elite",monospace;font-size:.8rem;letter-spacing:.38em;
  text-transform:uppercase;transform:rotate(-4deg);
  background:rgba(20,0,2,.45);
  text-shadow:0 0 8px rgba(224,56,60,.6);
  box-shadow:0 0 0 1px rgba(224,56,60,.15) inset,0 0 18px rgba(224,56,60,.25);
}
.couv-titre{
  position:relative;margin:0;
  font-family:"IM Fell English",serif;font-weight:400;
  font-size:clamp(5.5rem,22vw,15rem);line-height:.85;letter-spacing:.06em;
  color:var(--c-papier);
  text-shadow:0 0 40px rgba(179,38,43,.35),0 0 2px rgba(255,255,255,.2);
  animation:couvClignote 9s steps(1) infinite;
}
/* dédoublement rouge, comme un signal qui décroche */
.couv-titre::before,.couv-titre::after{
  content:attr(data-text);position:absolute;inset:0;pointer-events:none;
}
.couv-titre::before{color:var(--c-rouge-vif);opacity:0;mix-blend-mode:screen;animation:couvDecale 9s steps(1) infinite}
.couv-titre::after{color:#6fd0ff;opacity:0;mix-blend-mode:screen;animation:couvDecale2 9s steps(1) infinite}
@keyframes couvClignote{0%,100%{opacity:1}47%{opacity:.55}48%{opacity:1}83%{opacity:.8}84%{opacity:1}}
@keyframes couvDecale{0%,46%,50%,100%{opacity:0;transform:none}47%{opacity:.55;transform:translate(-6px,1px)}48%{opacity:.35;transform:translate(4px,-2px)}}
@keyframes couvDecale2{0%,46%,50%,100%{opacity:0;transform:none}47%{opacity:.25;transform:translate(5px,-1px)}48%{opacity:.2;transform:translate(-3px,2px)}}

.couv-accroche{
  margin:1.8rem 0 0;max-width:30rem;
  font-style:italic;font-size:clamp(1.15rem,2.4vw,1.5rem);line-height:1.45;color:#d8ccbf;
}
.couv-auteur{margin:.9rem 0 0;font-size:.95rem;letter-spacing:.2em;text-transform:uppercase;color:var(--c-doux)}

/* actions */
.couv-actions{margin-top:2.8rem;display:flex;flex-direction:column;align-items:center;gap:1rem}
.couv-ouvrir{
  position:relative;display:inline-flex;flex-direction:column;align-items:center;gap:.25rem;
  min-width:min(320px,86vw);padding:1.05rem 2.2rem;
  border:1px solid rgba(224,56,60,.7);border-radius:2px;
  background:linear-gradient(180deg,rgba(140,18,22,.55),rgba(70,8,10,.55));
  color:#fff;text-decoration:none;
  font-family:"Special Elite",monospace;font-size:.95rem;letter-spacing:.32em;text-transform:uppercase;
  box-shadow:0 0 0 1px rgba(0,0,0,.6),0 12px 40px -10px rgba(179,38,43,.6);
  transition:background .25s ease,box-shadow .25s ease,transform .25s ease;
}
.couv-ouvrir:hover,.couv-ouvrir:focus-visible{
  background:linear-gradient(180deg,rgba(170,24,28,.75),rgba(90,10,12,.75));
  box-shadow:0 0 0 1px rgba(0,0,0,.6),0 14px 50px -8px rgba(224,56,60,.75);
  transform:translateY(-1px);outline:none;
}
.couv-ouvrir small{
  font-family:"Crimson Pro",serif;font-size:.85rem;letter-spacing:.06em;text-transform:none;color:rgba(255,235,225,.75)
}
.couv-ouvrir small:empty{display:none}
.couv-recommencer{
  background:none;border:0;cursor:pointer;
  color:var(--c-doux);font:inherit;font-size:.9rem;letter-spacing:.12em;
  text-decoration:underline;text-decoration-color:rgba(163,148,134,.35);text-underline-offset:4px;
  padding:.6rem .8rem;min-height:44px;
}
.couv-recommencer:hover,.couv-recommencer:focus-visible{color:var(--c-papier);outline:none}
.couv-recommencer[hidden]{display:none}

/* trois coups */
.couv-coups{
  margin-top:2.6rem;font-family:"Special Elite",monospace;font-size:.78rem;letter-spacing:.5em;color:rgba(224,56,60,.8);
}
.couv-coups span{display:inline-block;opacity:.3;animation:couvCoup 8s infinite}
.couv-coups span:nth-child(2){animation-delay:.55s}
.couv-coups span:nth-child(3){animation-delay:1.1s}
@keyframes couvCoup{0%,5%{opacity:1;transform:scale(1.25);text-shadow:0 0 12px rgba(224,56,60,.9)}11%,100%{opacity:.3;transform:none}}

/* ---------- Ce qui rend la page inquiétante ---------- */

/* Lampe de poche : tout est noir sauf autour du pointeur */
.couv-lampe{
  position:fixed;inset:0;z-index:2;pointer-events:none;
  background:radial-gradient(circle var(--lampe,420px) at var(--x,50%) var(--y,50%),
    rgba(0,0,0,0) 0%,rgba(0,0,0,.25) 50%,rgba(0,0,0,.72) 100%);
  transition:background .05s linear;
}

/* La silhouette au fond du corridor : visible seulement juste après une coupure */
.couv-silhouette{
  position:fixed;z-index:1;left:50%;top:56%;
  height:clamp(110px,20vh,220px);width:auto;
  transform:translate(-50%,-50%);
  opacity:0;filter:blur(1.2px);pointer-events:none;
  animation:couvApparition 13s infinite;
}
@keyframes couvApparition{
  0%,71.9%{opacity:0;transform:translate(-50%,-50%) scale(1)}
  72%{opacity:.95;transform:translate(-50%,-50%) scale(1.05)}
  76%{opacity:.75}
  80%,100%{opacity:0;transform:translate(-50%,-50%) scale(1.12)}
}

/* Coupure de courant : tout devient noir une fraction de seconde */
.couv-coupure{
  position:fixed;inset:0;z-index:20;pointer-events:none;background:#000;opacity:0;
  animation:couvCoupure 13s infinite;
}
@keyframes couvCoupure{
  0%,70.5%{opacity:0}70.6%{opacity:1}71%{opacity:.2}71.2%{opacity:1}71.9%{opacity:0}
  88%{opacity:0}88.1%{opacity:.85}88.4%{opacity:0}100%{opacity:0}
}

/* Les trois coups font trembler l'écran */
.couv-page{animation:couvTremble 8s infinite}
@keyframes couvTremble{
  0%{transform:translate(0,0)}0.6%{transform:translate(-3px,1px)}1.2%{transform:translate(0,0)}
  6.9%{transform:translate(0,0)}7.5%{transform:translate(3px,-1px)}8.1%{transform:translate(0,0)}
  13.8%{transform:translate(0,0)}14.4%{transform:translate(-2px,2px)}15%,100%{transform:translate(0,0)}
}

/* Titre : le glitch reste, en plus marqué, avec des tranches décalées */
.couv-titre::before{clip-path:inset(15% 0 55% 0)}
.couv-titre::after{clip-path:inset(60% 0 8% 0)}

/* Emma dérape : majuscules, rouge, cadence de machine */
.couv-emma.anormal{border-color:rgba(224,56,60,.8);box-shadow:0 0 30px rgba(224,56,60,.25)}
.couv-emma.anormal .couv-emma-texte{color:var(--c-rouge-vif);text-transform:uppercase;letter-spacing:.06em}
.couv-emma.anormal .couv-emma-tete span{color:var(--c-rouge-vif)}

/* bas de page */
.couv-pied{
  display:flex;justify-content:space-between;align-items:flex-end;gap:1.5rem;flex-wrap:wrap;
  font-size:.82rem;color:var(--c-doux);
}
.couv-avertissement{max-width:34rem;line-height:1.5;margin:0}
.couv-avertissement strong{color:#d8ccbf;font-weight:600;letter-spacing:.08em;text-transform:uppercase;font-size:.72rem;margin-right:.4rem}
.couv-note{margin:.4rem 0 0;font-size:.72rem;opacity:.6}

/* Emma, en ligne */
.couv-emma{
  min-width:min(280px,100%);max-width:320px;
  padding:.8rem 1rem;border:1px solid rgba(179,38,43,.3);border-radius:4px;
  background:rgba(10,6,8,.72);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  font-family:"Special Elite",monospace;
}
.couv-emma-tete{display:flex;align-items:center;gap:.5rem;font-size:.66rem;letter-spacing:.24em;text-transform:uppercase;color:var(--c-rouge-vif)}
.couv-emma-tete::before{content:"";width:7px;height:7px;border-radius:50%;background:#d6302f;box-shadow:0 0 10px rgba(214,48,47,.9);animation:couvPouls 2.4s ease-in-out infinite}
.couv-emma-tete span{margin-left:auto;color:var(--c-doux);letter-spacing:.14em}
@keyframes couvPouls{50%{opacity:.3}}
.couv-emma-texte{margin:.55rem 0 0;min-height:1.5em;font-size:.95rem;color:#eee4dc}
.couv-emma-texte::after{content:"_";color:var(--c-rouge-vif);animation:couvCurseur .8s steps(1) infinite}
@keyframes couvCurseur{50%{opacity:0}}

/* ---------- Téléphone ---------- */
@media (max-width:640px){
  .couv-entete{font-size:.62rem;letter-spacing:.16em}
  .couv-entete-droite{display:none}
  .couv-centre{padding:2rem 0}
  .couv-tampon{font-size:.68rem}
  .couv-pied{flex-direction:column-reverse;align-items:stretch}
  .couv-emma{max-width:none}
}

/* ---------- Animations réduites ---------- */
@media (prefers-reduced-motion:reduce){
  .couv-fond img,.couv-fond::after,.couv-neon,.couv-titre,.couv-titre::before,.couv-titre::after,
  .couv-coups span,.couv-emma-tete::before,.couv-emma-texte::after,
  .couv-page,.couv-silhouette,.couv-coupure{animation:none!important}
  .couv-silhouette,.couv-coupure{display:none}
  .couv-coups span{opacity:.8}
}