/* ============================================================
   9MM — Section « Canette en spirale » (BODY -> MIND)
   VERSION INTÉGRÉE (pour accueil.html).
   ------------------------------------------------------------
   Adaptée du proto autonome `spirale/spirale.css` :
   - On a RETIRÉ les règles globales qui fuiraient sur le reste
     du site (:root, html, body, *, .proto-spacer).
   - Les couleurs/police propres à la spirale sont SCOPÉES sur `.sp`
     (les rouges/cyan échantillonnés sur les vraies canettes restent
     locaux à cette section ; le reste du site garde ses tokens).
   - Tout le reste (.sp__*) est identique au proto validé.
   Réf : docs/superpowers/specs/2026-06-19-spirale-canette-design.md
   ============================================================ */

/* Variables + base SCOPÉES à la section (ne touchent pas au reste du site) */
.sp {
  --bg: #000000;                 /* Death Black */
  --ink: #ffffff;
  --muted: #8a8a93;
  --body: #e9203d;               /* rouge BODY — échantillonné sur la canette réelle */
  --mind: #36d9bb;               /* cyan MIND — échantillonné sur la canette réelle */
  --can-h: 62vh;
  background: var(--bg);
  color: var(--ink);
  font-family: "Helvetica Neue", Arial, sans-serif;
}
.sp, .sp * { box-sizing: border-box; }

/* ---- La section : sa hauteur = la "durée" de scroll de l'animation ----
   En svh (pas vh) pour rester dans le MÊME référentiel que le pin (100svh). */
.sp { position: relative; height: 300svh; }

/* ---- Le pin : reste collé en haut pendant que .sp défile ---- */
.sp__pin {
  position: sticky; top: 0; height: 100svh; background: var(--bg);
  display: grid; place-items: center;
  overflow: hidden; overflow: clip;   /* hidden = repli Safari <=15 ; clip = moderne */
}
/* Vignette pour ancrer le noir premium — z-index 1 : AU-DESSUS des halos (0), SOUS la canette (2) */
.sp__pin::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 1;
  background: radial-gradient(120% 90% at 50% 45%, transparent 42%, rgba(0,0,0,.55) 100%);
}

/* ---- Halos de couleur (crossfade par opacity ; jamais background-color animé) ---- */
.sp__glow { position: absolute; inset: -30%; z-index: 0; pointer-events: none; opacity: 0; transform: translate3d(0,0,0); }
.sp__glow--body { opacity: 1;
  background: radial-gradient(ellipse 75% 60% at 50% 42%, rgba(233,32,61,.55), rgba(120,14,26,.16) 45%, transparent 72%); }
.sp__glow--mind {
  background: radial-gradient(ellipse 75% 60% at 50% 42%, rgba(42,210,224,.42), rgba(10,92,105,.15) 45%, transparent 72%); }

/* ---- Les canettes (PNG/WebP détourées). État caché posé par le JS (no-JS = tout visible). ---- */
.sp__can {
  position: absolute; left: 50%; top: 50%; z-index: 2; height: var(--can-h); width: auto;
  filter: drop-shadow(0 22px 30px rgba(0,0,0,.7)); transform: translate(-50%,-50%);
  user-select: none; -webkit-user-drag: none;
}

/* ---- Textes (gauche/droite, esprit Ciao). État par défaut TOUJOURS visible. ---- */
.sp__text { position: absolute; z-index: 4; max-width: min(38vw,420px); top: 50%; transform: translateY(-50%); }
.sp__text--left { left: 6vw; text-align: left; }
.sp__text--right { right: 6vw; text-align: right; }
.sp__text .kicker { font-size: 12px; letter-spacing: .24em; text-transform: uppercase; margin: 0 0 14px; }
.sp__text--left  .kicker { color: var(--body); }
.sp__text--right .kicker { color: var(--mind); }
.sp__text h2 { margin: 0; font-size: clamp(30px,5vw,56px); line-height: 1.03; font-weight: 800; letter-spacing: -.02em;
  text-shadow: 0 2px 18px rgba(0,0,0,.85); }
.sp__text p { margin: 14px 0 0; font-size: clamp(15px,1.4vw,18px); line-height: 1.5; color: #d2d2d8;
  text-shadow: 0 1px 14px rgba(0,0,0,.8); }

/* CTA « découvrir l'univers » dans les reveals (cliquable uniquement quand le
   texte est visible : pointer-events piloté par spirale.js). */
.sp__discover {
  display: inline-block; margin-top: 22px; padding: 12px 26px;
  border: 1px solid currentColor; border-radius: 999px;
  font-size: 13px; letter-spacing: .1em; text-transform: uppercase; font-weight: 600;
  text-decoration: none; cursor: pointer; -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px);
  transition: background .2s ease, color .2s ease, transform .2s ease;
}
.sp__text--left  .sp__discover { color: var(--body); }
.sp__text--right .sp__discover { color: var(--mind); }
.sp__discover:hover { transform: translateY(-2px); }
.sp__text--left  .sp__discover:hover { background: var(--body); color: #000; }
.sp__text--right .sp__discover:hover { background: var(--mind); color: #000; }

/* ---- Kicker d'entrée + outro ---- */
.sp__kicker { position: absolute; z-index: 4; top: 14vh; left: 0; right: 0; text-align: center;
  font-size: clamp(22px,3.4vw,40px); font-weight: 900; letter-spacing: -.01em; text-shadow: 0 2px 20px rgba(0,0,0,.9); }
.sp__outro { position: absolute; z-index: 4; bottom: 12vh; left: 0; right: 0; text-align: center; }
.sp__outro .sig { font-size: clamp(20px,3vw,34px); font-weight: 800; letter-spacing: .14em; text-shadow: 0 2px 20px rgba(0,0,0,.9); }
.sp__outro .sig span { color: var(--mind); }
.sp__outro .cta { display: inline-block; margin-top: 16px; padding: 12px 26px; border: 1px solid rgba(255,255,255,.4);
  border-radius: 999px; font-size: 13px; letter-spacing: .12em; text-transform: uppercase; color: #fff; text-decoration: none;
  transition: background .2s ease, color .2s ease, border-color .2s ease; }
.sp__outro .cta:hover { background: #fff; color: #000; border-color: #fff; }

/* ---- Mobile-first : amplitudes/hauteurs réduites, texte plein-bas ---- */
@media (max-width: 768px) {
  .sp { height: 220svh; --can-h: 48vh; }
  .sp__text { max-width: 88vw; top: auto; bottom: 9vh; transform: none; text-align: center; }
  .sp__text--left, .sp__text--right { left: 6vw; right: 6vw; }
  .sp__kicker { top: 9vh; }
  .sp__outro { bottom: 8vh; }
}

/* ---- Respect strict de prefers-reduced-motion : rendu statique, TOUT visible ---- */
@media (prefers-reduced-motion: reduce) {
  .sp { height: auto; }
  .sp__pin { position: static; height: auto; min-height: 100svh; overflow: visible; grid-auto-flow: row; gap: 3vh; padding: 10vh 6vw; }
  .sp__glow--body { opacity: .6; }
  .sp__glow--mind { opacity: 0; }
  .sp__can { position: relative; left: auto; top: auto; transform: none; height: 38vh; }
  .sp__text, .sp__outro { position: static; opacity: 1; transform: none; max-width: 560px; margin: 2vh auto; text-align: center; }
}

/* ============================================================
   V2 — Guides de scroll & clarté (retours réunion 23/06)
   Ajouts non destructifs pour accueil.html (V2 uniquement).
   ============================================================ */
.sp__kicker-main { display: block; }
.sp__guide {
  display: block; margin-top: 16px;
  font-size: clamp(13px, 1.6vw, 17px); font-weight: 600;
  letter-spacing: .03em; color: #cfcfd6;
  text-shadow: 0 1px 12px rgba(0,0,0,.85);
}
.sp__guide-arrow {
  display: inline-block; margin-left: 9px; font-weight: 800;
  animation: sp-guide-bounce 1.6s ease-in-out infinite;
}
@keyframes sp-guide-bounce {
  0%, 100% { transform: translateY(0); opacity: .55; }
  50%      { transform: translateY(7px); opacity: 1; }
}

/* CTA produit AVANCÉ : juste après « Beyond », avant la spirale (CTA plus tôt) */
.home-beyond-cta { margin-top: 34px; display: flex; gap: 14px; flex-wrap: wrap; justify-content: center; }
@media (max-width: 600px) {
  .home-beyond-cta { flex-direction: column; }
  .home-beyond-cta .home-btn { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .sp__guide-arrow { animation: none; }
}

/* ============================================================
   V2.1 — Lisibilité des textes de la spirale SANS boîte (retour Allan 23/06 :
   le scrim faisait une « bande noire » pleine largeur au milieu). On utilise une
   ombre-halo serrée autour des glyphes : lisible par-dessus la canette, et le
   fond reste UNI (aucune boîte / bande).
   ============================================================ */
.sp__kicker, .sp__outro, .sp__guide,
.sp__text h2, .sp__text p, .sp__text .kicker {
  text-shadow: 0 0 6px rgba(0,0,0,.92), 0 0 16px rgba(0,0,0,.8), 0 2px 18px rgba(0,0,0,.95);
}
/* Kicker d'entrée remonté (moins d'espace en haut) — PLUS de fond (bande retirée) */
.sp__kicker { top: 8vh; }
@media (max-width: 768px) { .sp__kicker { top: 7vh; } }