/* ═══════════════════════════════════════════════════════════
   DANC·R — styles complémentaires (v3 teaser)
   À charger APRÈS styles.css.
   Couvre : cartes sticky bénéfices + grille v3 placeholders.
   ═══════════════════════════════════════════════════════════ */

/* Variables d'audience (au cas où non définies dans styles.css) */
:root {
  --dancr-orange: #F29A30;
  --dancr-violet: #B164EE;
  --dancr-blue: #5EC5FF;
  --dancr-black: #25201A;
  --dancr-white: #FFFFFF;
  --dancr-gray: #302B29;
  --dancr-gray-soft: #F5F3F0;
}

/* ─────────────────────────────────────────────
   SECTION : BÉNÉFICES (cartes sticky empilées)
   ───────────────────────────────────────────── */

.benefits {
  background: var(--dancr-white);
  padding: 8rem 0 0;
  position: relative;
}

.benefits-intro {
  margin-bottom: 4rem;
  text-align: center;
}

.benefits-intro .section-eyebrow {
  margin-bottom: 1rem;
}

.stack-cards {
  position: relative;
  padding: 0 1.5rem 4rem;
  max-width: 1100px;
  margin: 0 auto;
}

.stack-card {
  position: sticky;
  top: 6rem;
  margin-bottom: 2rem;
  border-radius: 28px;
  overflow: hidden;
  background: var(--white, #fff);
  border: 1px solid var(--grey-200, #e4e4e7);
  box-shadow:
    0 1px 2px rgba(37, 32, 26, 0.04),
    0 20px 48px -16px rgba(37, 32, 26, 0.12);
  transition: transform 0.4s ease, box-shadow 0.4s ease;
}

.stack-card[data-audience="ecole"] {
  top: 6rem;
}

.stack-card[data-audience="prof"] {
  top: 7rem;
}

.stack-card[data-audience="eleve"] {
  top: 8rem;
}

.stack-card-inner {
  padding: 4rem 3.5rem;
  display: grid;
  grid-template-columns: 1fr minmax(200px, 0.85fr);
  grid-template-areas:
    "meta meta"
    "title media"
    "list media"
    "cta media";
  gap: 2rem 3rem;
  align-items: start;
  min-height: 480px;
}

.stack-card-meta {
  grid-area: meta;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: 'Gantari', sans-serif;
  font-size: 0.875rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.stack-card-tag {
  padding: 0;
  border-radius: 0;
  background: none;
  font-weight: 600;
  letter-spacing: 0.14em;
}

.stack-card[data-audience="ecole"] .stack-card-tag {
  color: var(--blue, #5ec5ff);
}

.stack-card[data-audience="prof"] .stack-card-tag {
  color: var(--violet, #b164ee);
}

.stack-card[data-audience="eleve"] .stack-card-tag {
  color: var(--orange, #e69138);
}

.stack-card-index {
  color: var(--dancr-black);
  opacity: 0.4;
  font-weight: 700;
  font-size: 1rem;
}

.stack-card-title {
  grid-area: title;
  font-family: 'Gantari', sans-serif;
  font-weight: 700;
  font-size: clamp(2.25rem, 4vw, 3.5rem);
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--dancr-black);
  margin: 0;
}

/* Placeholder média : image, gif ou vidéo (même slot data-media-slot) */
.stack-card-media {
  grid-area: media;
  position: relative;
  margin: 0;
  align-self: center;
  width: 100%;
  aspect-ratio: 4 / 5;
  border-radius: 18px;
  overflow: hidden;
  background: rgba(37, 32, 26, 0.06);
  border: 1px dashed rgba(37, 32, 26, 0.18);
}

.stack-card-media img,
.stack-card-media video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.stack-card-media:has(img, video) .media-placeholder {
  display: none;
}

.media-placeholder {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  padding: 1.25rem;
  text-align: center;
}

.media-placeholder-name {
  font-family: 'Gantari', sans-serif;
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: lowercase;
  color: var(--dancr-black);
  opacity: 0.55;
  word-break: break-all;
}

.media-placeholder-hint {
  font-family: 'Gantari', sans-serif;
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--dancr-black);
  opacity: 0.35;
}

.stack-card-list {
  grid-area: list;
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.stack-card-list li {
  position: relative;
  padding-left: 1.75rem;
  font-family: 'Gantari', sans-serif;
  font-size: 1.0625rem;
  line-height: 1.55;
  color: var(--dancr-black);
}

.stack-card-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: currentColor;
}

.stack-card[data-audience="ecole"] .stack-card-list li::before {
  background: var(--blue, #5ec5ff);
}

.stack-card[data-audience="prof"] .stack-card-list li::before {
  background: var(--violet, #b164ee);
}

.stack-card[data-audience="eleve"] .stack-card-list li::before {
  background: var(--orange, #e69138);
}

.stack-card-cta {
  grid-area: cta;
  align-self: start;
  margin-top: 0.25rem;
  font-family: 'Gantari', sans-serif;
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--dancr-black);
  transition: color 0.2s ease, transform 0.25s var(--ease-out, cubic-bezier(0.16, 1, 0.3, 1));
}

.stack-card-cta:hover {
  transform: translateX(4px);
}

.stack-card[data-audience="ecole"] .stack-card-cta {
  color: var(--blue, #5ec5ff);
}

.stack-card[data-audience="prof"] .stack-card-cta {
  color: var(--violet, #b164ee);
}

.stack-card[data-audience="eleve"] .stack-card-cta {
  color: var(--orange, #e69138);
}

/* ─────────────────────────────────────────────
   SECTION V3 — Hero Hub (#v3.hh)
   ───────────────────────────────────────────── */

#v3.hh {
  padding: 8rem 0;
}

/* ─────────────────────────────────────────────
   RESPONSIVE
   ───────────────────────────────────────────── */

@media (max-width: 960px) {
  .stack-card-inner {
    grid-template-columns: 1fr;
    grid-template-areas:
      "meta"
      "title"
      "media"
      "list"
      "cta";
    padding: 2.5rem 2rem;
    gap: 2rem;
    min-height: auto;
  }

  .stack-card-media {
    max-width: 280px;
    justify-self: center;
  }

}

@media (max-width: 640px) {
  .benefits {
    padding: 5rem 0 0;
  }

  .stack-cards {
    padding: 0 1rem 3rem;
  }

  .stack-card {
    top: 5rem !important;
    border-radius: 20px;
  }

  .stack-card-inner {
    padding: 2rem 1.5rem;
  }

  .stack-card-title {
    font-size: clamp(1.75rem, 7vw, 2.5rem);
  }

  #v3.hh {
    padding: 5rem 0;
  }

}

/* ─────────────────────────────────────────────
   Révélation #v3 — textes (rise up) + cartes (pop)
   ───────────────────────────────────────────── */

@keyframes v3-rise-up {
  from {
    opacity: 0;
    transform: translateY(28px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes v3-pop-out {
  0% {
    opacity: 0;
    transform: scale(0.55);
  }
  65% {
    opacity: 1;
    transform: scale(1.07);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes v3-card-shake {
  0%, 100% { transform: scale(1) translateX(0) rotate(0deg); }
  18% { transform: scale(1) translateX(-3px) rotate(-0.7deg); }
  36% { transform: scale(1) translateX(3px) rotate(0.7deg); }
  54% { transform: scale(1) translateX(-2px) rotate(-0.4deg); }
  72% { transform: scale(1) translateX(2px) rotate(0.4deg); }
}

.v3-reveal-rise {
  opacity: 0;
}

.v3-reveal-pop {
  opacity: 0;
  pointer-events: none;
}

#v3.is-revealed .v3-reveal-rise {
  animation: v3-rise-up 0.75s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  animation-delay: var(--v3-delay, 0s);
}

#v3.is-revealed .v3-reveal-pop {
  animation: v3-pop-out 0.62s cubic-bezier(0.34, 1.45, 0.64, 1) forwards;
  animation-delay: var(--v3-delay, 0s);
  pointer-events: auto;
}

.v3-reveal-pop.v3-has-entered {
  opacity: 1;
  transform: scale(1);
  animation: none;
  pointer-events: auto;
}

.hh__pole.v3-has-entered:hover,
.hh__pole.v3-has-entered:focus-within,
.hh__center.v3-has-entered:hover,
.hh__center.v3-has-entered:focus-within {
  animation: v3-card-shake 0.48s ease-in-out;
}

/* Pas de shake quand on interagit avec les vignettes */
.hh__pole.v3-has-entered:has(.hh__shots img:hover),
.hh__pole.v3-has-entered:has(.hh__shots img.is-expanded) {
  animation: none;
}

/* ─────────────────────────────────────────────
   Accessibilité : reduce-motion
   ───────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  .v3-reveal-rise,
  .v3-reveal-pop,
  .v3-reveal-pop.v3-has-entered {
    opacity: 1;
    transform: none;
    animation: none !important;
    pointer-events: auto;
  }
  .stack-card {
    position: relative;
    top: auto !important;
    transition: none;
  }
  .hh__pole.v3-has-entered:hover,
  .hh__pole.v3-has-entered:focus-within,
  .hh__center-anchor.v3-has-entered:hover .hh__center {
    animation: none !important;
  }
  .hh__shots img:hover,
  .hh__shots img.is-expanded {
    transform: none !important;
  }
}