/* =============================================================
   DAISY & MOON — pages HISTOIRES (/histoires/…)
   Variante sombre du site. Mêmes typographies, mêmes principes :
   grands espaces, animations lentes, la couleur en accent seul.
   Ce fichier ne touche jamais aux pages principales.
   ============================================================= */

.h-page{
  --noir:      #0C0A09;
  --ivoire:    #F6F3EE;
  --ivoire-70: rgba(246,243,238,.68);
  --ivoire-40: rgba(246,243,238,.38);
  --trait:     rgba(246,243,238,.16);

  /* --accent est injecté en ligne par histoire.js */
  --accent: #9B7FA6;

  --display: "Playfair Display", "Times New Roman", Georgia, serif;
  --sans:    "Instrument Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --mono:    "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;

  --gut:  clamp(22px, 6vw, 68px);
  --band: clamp(58px, 11vw, 128px);

  --ease: cubic-bezier(.22,.61,.36,1);

  margin:0;
  background:var(--noir);
  color:var(--ivoire);
  font-family:var(--sans);
  font-size:16px;
  line-height:1.62;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
.h-page *,.h-page *::before,.h-page *::after{ box-sizing:border-box; }
.h-page img,.h-page video{ max-width:100%; display:block; }
.h-page ::selection{ background:var(--accent); color:var(--noir); }

.h-page :focus-visible{ outline:2px solid var(--accent); outline-offset:4px; }

.h-skip{
  position:absolute; left:-9999px; top:0; z-index:20;
  background:var(--ivoire); color:var(--noir);
  padding:12px 18px; font-family:var(--mono); font-size:12px;
}
.h-skip:focus{ left:8px; top:8px; }

.h-wrap{ max-width:760px; margin:0 auto; padding-inline:var(--gut); }

/* ---------- Ouverture plein écran ---------- */
.h-open{
  min-height:100svh;
  display:flex; flex-direction:column; justify-content:center;
  padding-block:clamp(70px,16vh,130px) var(--band);
  position:relative;
}
/* Halo très discret de la couleur, jamais décoratif ailleurs */
.h-open::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(120% 62% at 50% 0%, color-mix(in srgb, var(--accent) 20%, transparent) 0%, transparent 66%);
  opacity:.5;
}
.h-open > *{ position:relative; }

.h-kicker{
  font-family:var(--mono); font-size:10.5px; letter-spacing:.26em;
  text-transform:uppercase; color:var(--ivoire-40);
  margin:0 0 clamp(26px,6vh,48px);
}
.h-nom{
  font-family:var(--display); font-weight:900;
  font-size:clamp(3.2rem,15vw,7.2rem); line-height:.9;
  letter-spacing:-.024em; margin:0 0 clamp(20px,4vh,34px);
  color:var(--accent);
  text-wrap:balance;
}
.h-combat{
  font-family:var(--sans); font-size:clamp(1.05rem,3.4vw,1.4rem);
  line-height:1.4; color:var(--ivoire); margin:0 0 26px; max-width:22ch;
}
.h-micro{
  font-size:clamp(.98rem,2.6vw,1.1rem); line-height:1.62;
  color:var(--ivoire-70); margin:0; max-width:40ch;
}

.h-scroll{
  margin-top:auto; padding-top:44px;
  font-family:var(--mono); font-size:9.5px; letter-spacing:.24em;
  text-transform:uppercase; color:var(--ivoire-40);
  display:flex; align-items:center; gap:12px;
}
.h-scroll i{ display:block; width:34px; height:1px; background:var(--trait); }

/* ---------- Récit ---------- */
.h-recit{ padding-block:var(--band); }
.h-recit p{
  font-size:clamp(1.02rem,2.9vw,1.22rem);
  line-height:1.72; color:var(--ivoire-70);
  margin:0 0 1.55em; text-wrap:pretty;
}
.h-recit p:last-child{ margin-bottom:0; color:var(--ivoire); }
.h-recit p::first-letter{ }

/* ---------- Vidéo verticale 9:16 ---------- */
.h-video{ padding-block:calc(var(--band) * .6); }
.h-video__frame{
  width:100%; max-width:min(420px, 78vw); margin-inline:auto;
  aspect-ratio:9/16; background:#151110;
  border:1px solid var(--trait);
  display:flex; align-items:center; justify-content:center;
  overflow:hidden; position:relative;
}
.h-video__frame video{ width:100%; height:100%; object-fit:cover; }
.h-video__vide{
  font-family:var(--mono); font-size:10px; letter-spacing:.22em;
  text-transform:uppercase; color:var(--ivoire-40); text-align:center;
  padding:20px;
}
.h-video__leg{
  font-family:var(--mono); font-size:10px; letter-spacing:.16em;
  text-transform:uppercase; color:var(--ivoire-40);
  text-align:center; margin:18px 0 0;
}

/* ---------- Phrase forte ---------- */
.h-phrase{
  padding-block:var(--band);
  border-top:1px solid var(--trait);
  border-bottom:1px solid var(--trait);
}
.h-phrase blockquote{
  margin:0;
  font-family:var(--display); font-weight:700;
  font-size:clamp(1.6rem,6.4vw,2.9rem); line-height:1.14;
  letter-spacing:-.014em; text-wrap:balance;
}
.h-phrase blockquote span{ color:var(--accent); }

/* ---------- Actions ---------- */
.h-actions{ padding-block:var(--band); display:flex; flex-direction:column; gap:22px; align-items:flex-start; }

.h-cta{
  display:inline-flex; align-items:center; justify-content:center;
  font-family:var(--sans); font-size:15px; font-weight:500;
  padding:18px 34px; width:100%;
  background:var(--ivoire); color:var(--noir);
  border:1px solid var(--ivoire); text-decoration:none;
  transition:background-color .45s var(--ease), color .45s var(--ease), border-color .45s var(--ease);
}
.h-cta:hover{ background:var(--accent); border-color:var(--accent); color:var(--noir); }

.h-retour{
  font-family:var(--mono); font-size:10.5px; letter-spacing:.2em;
  text-transform:uppercase; color:var(--ivoire-40);
  text-decoration:none; border-bottom:1px solid transparent;
  padding-bottom:3px; transition:color .4s var(--ease), border-color .4s var(--ease);
}
.h-retour:hover{ color:var(--ivoire); border-bottom-color:var(--trait); }

/* ---------- Pied ---------- */
.h-pied{
  padding-block:34px 46px; border-top:1px solid var(--trait);
  font-family:var(--mono); font-size:10px; letter-spacing:.16em;
  text-transform:uppercase; color:var(--ivoire-40);
  display:flex; flex-wrap:wrap; gap:10px 22px; justify-content:space-between;
}
.h-pied a{ color:inherit; text-decoration:none; }
.h-pied a:hover{ color:var(--ivoire); }

/* ---------- Page d'erreur ---------- */
.h-erreur{ min-height:100svh; display:flex; flex-direction:column; justify-content:center; padding-block:var(--band); }
.h-erreur .h-nom{ color:var(--ivoire); }
.h-erreur__liens{ display:flex; flex-wrap:wrap; gap:14px; margin-top:34px; }
.h-erreur__liens a{
  font-family:var(--mono); font-size:11px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--ivoire); text-decoration:none; border:1px solid var(--trait);
  padding:13px 20px; transition:border-color .4s var(--ease);
}
.h-erreur__liens a:hover{ border-color:var(--ivoire); }

/* ---------- Apparitions ---------- */
.h-rev{ opacity:0; transform:translateY(20px); transition:opacity 1.15s var(--ease), transform 1.15s var(--ease); }
.h-rev[data-in="1"]{ opacity:1; transform:none; }

@media (prefers-reduced-motion:reduce){
  .h-page *,.h-page *::before,.h-page *::after{
    animation-duration:.001ms !important; transition-duration:.001ms !important;
  }
  .h-rev{ opacity:1; transform:none; }
}