/* ══════════════════════════════════════════════════════════════════════════════
   PATCH — DARK COSMOS
   Chargement : après le CSS principal de chaque page
   ══════════════════════════════════════════════════════════════════════════════ */

/* ══ CURSOR POINTER — éléments interactifs ═══════════════════════════════════ */
.card,
.valeur-pill,
.cycle-card,
.card-sophie,
.card-methode,
.card-formations,
.card-soham,
.card-quiz,
[onclick],
button:not(:disabled),
a { cursor: pointer; }

/* ══ SECTION VIDÉO ════════════════════════════════════════════════════════════
   Positionnée entre le hero et le bento grid.
   Classes : .section-video (wrapper) + .video-split (layout 2 colonnes)
   ══════════════════════════════════════════════════════════════════════════════ */

.section-video {
  padding: 16px 48px 72px;
  max-width: 1200px;
  margin: 0 auto;
}

.section-video .section-video__label {
  font-size: .6875rem;
  letter-spacing: .32em;
  text-transform: uppercase;
  color: var(--text-muted);
  display: block;
  margin-bottom: 20px;
}

.section-video .section-video__title {
  font-family: 'Cormorant Garamond', serif;
  font-weight: 300;
  font-size: clamp(1.6rem, 2.8vw, 2.4rem);
  color: var(--violet);
  line-height: 1.2;
  margin-bottom: 12px;
}

/* Layout 2 colonnes */
.video-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: center;
  margin-top: 40px;
}

/* Variante 1 colonne centrée (vidéo seule, sans texte) */
.video-split--centered {
  grid-template-columns: 1fr;
  max-width: 760px;
  margin: 0 auto;
}

@media (max-width: 820px) {
  .video-split {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  .section-video {
    padding: 56px 24px 64px;
  }
}

/* Cadre média */
.video-split__media {
  position: relative;
  border-radius: 20px;
  overflow: hidden;
  aspect-ratio: 16 / 9;
  background: rgba(49, 0, 85, .04);
  border: 1px solid rgba(49, 0, 85, .09);
  box-shadow: 0 8px 32px rgba(49, 0, 85, .10);
}

.video-split__media video,
.video-split__media iframe {
  width: 100%;
  height: 100%;
  display: block;
  border: none;
}

/* Placeholder affiché quand la vidéo est absente / commentée */
.video-split__placeholder {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  color: var(--text-muted);
  font-size: .72rem;
  letter-spacing: .18em;
  text-transform: uppercase;
}

.video-split__placeholder::before {
  content: '';
  display: block;
  width: 48px; height: 48px;
  border-radius: 50%;
  border: 1px solid rgba(49, 0, 85, .18);
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23310055' opacity='.35'%3E%3Cpath d='M8 5v14l11-7z'/%3E%3C/svg%3E") center / 22px no-repeat;
}

/* Colonne texte */
.video-split__text {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.video-split__text h3 {
  font-family: 'Cormorant Garamond', serif;
  font-weight: 300;
  font-size: clamp(1.3rem, 2.2vw, 1.8rem);
  color: var(--violet);
  line-height: 1.25;
}

.video-split__text p {
  font-size: .875rem;
  color: var(--text-muted);
  line-height: 1.9;
}

/* ══ BOUTONS OUTLINE — EFFET SPECTRAL AU HOVER ═══════════════════════════════
   Fonctionne sans <span> : z-index:-1 sur ::before dans un stacking context isolé
   ══════════════════════════════════════════════════════════════════════════════ */
.btn-outline,
.btn-outline-violet {
  position: relative !important;
  overflow: hidden !important;
  z-index: 0 !important;
  transition: color .3s, box-shadow .4s, transform .3s, border-color .3s !important;
}
.btn-outline::before,
.btn-outline-violet::before {
  content: '';
  position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(135deg,
    hsl(355,72%,65%), hsl(28,85%,62%), hsl(50,90%,60%),
    hsl(140,55%,58%), hsl(210,68%,62%), hsl(255,55%,62%), hsl(285,60%,58%));
  background-size: 300% 300%;
  opacity: 0;
  transition: opacity .5s;
  animation: spectral-rot 4s linear infinite paused;
}
.btn-outline:hover,
.btn-outline-violet:hover {
  color: #fff !important;
  border-color: transparent !important;
  box-shadow: 0 0 28px hsla(275,80%,50%,.4), 0 4px 12px rgba(49,0,85,.3) !important;
  transform: translateY(-1px) !important;
}
.btn-outline:hover::before,
.btn-outline-violet:hover::before {
  opacity: 1;
  animation-play-state: running;
}

/* ── Keyframe animation spectrale — partagé par .btn-outline et .btn-spectral ─ */
@keyframes spectral-rot {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* Séparateur spectral optionnel */
.video-split__spectral {
  height: 1px;
  border: none;
  background: linear-gradient(90deg,
    hsl(355,72%,72%), hsl(28,85%,66%), hsl(50,90%,62%),
    hsl(140,55%,60%), hsl(210,68%,64%), hsl(255,55%,66%), hsl(285,60%,62%));
  opacity: .45;
  margin: 0 auto 64px;
  max-width: 1200px;
}