/* KommIA : replay de la masterclass du 17 septembre 2026 (masterclass.html), chargé après site.css. La page d'inscription
   est devenue la page du replay : haut centré, lecteur à couverture maison (YouTube ne se charge qu'au clic), la méthode
   en frise de cinq étapes, deux colonnes ouvertes, puis l'appel final commun. Le lecteur est la seule surface arrondie
   avant l'appel final. */
section[id] { scroll-margin-top: calc(var(--nav-h) + 24px); }
.kicker { display: inline-flex; align-items: center; gap: 10px; margin-bottom: 14px; font-size: 14.5px; font-weight: 600; letter-spacing: -0.005em; color: var(--violet-ink); }
.kicker::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: linear-gradient(135deg, #876AFF, #168EFF); box-shadow: 0 0 0 4px rgba(135, 106, 255, 0.14); }
@keyframes rp-up { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
@keyframes rp-ring { from { transform: scale(1); opacity: 0.55; } to { transform: scale(1.7); opacity: 0; } }
@keyframes rp-drift { from { transform: translate3d(0, 0, 0) scale(1); } to { transform: translate3d(4%, -3%, 0) scale(1.08); } }

/* ────── Haut de page ────── */
.rhero { max-width: 1320px; margin: 0 auto; padding: clamp(48px, 7vw, 104px) var(--gutter) clamp(32px, 4vw, 56px); text-align: center; }
.rhero .kicker { animation: rp-up 800ms var(--ease-out) both 40ms; }
.rhero__title { margin: 0 auto; max-width: 15ch; font-size: clamp(2.6rem, 1.3rem + 4.6vw, 5.2rem); font-weight: 620; letter-spacing: -0.05em; line-height: 1; text-wrap: balance; animation: rp-up 900ms var(--ease-out) both 120ms; }
.rhero__title .grad { display: inline; }
.rhero__lead { margin: 24px auto 0; max-width: 42rem; font-size: 1.15rem; line-height: 1.65; color: var(--ink-70); text-wrap: pretty; animation: rp-up 900ms var(--ease-out) both 240ms; }

/* ────── Le lecteur : couverture sombre aux halos de la marque, bouton de lecture qui respire ────── */
.replay { max-width: 1120px; margin: 0 auto; padding: 0 var(--gutter) var(--section-y); animation: rp-up 1000ms var(--ease-out) both 360ms; }
.player {
  position: relative; aspect-ratio: 16 / 9; overflow: hidden; isolation: isolate;
  border-radius: clamp(18px, 2.4vw, 30px); background: #0E0E14;
  box-shadow: 0 1px 2px rgba(40, 28, 96, 0.08), 0 40px 80px -40px rgba(52, 36, 130, 0.6), 0 0 0 1px rgba(135, 106, 255, 0.18);
}
.player iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.player__cover {
  position: absolute; inset: 0; isolation: isolate; display: grid; place-items: center; width: 100%; padding: 0; border: 0; cursor: pointer;
  font: inherit; color: #fff; text-align: left;
  background: radial-gradient(120% 90% at 50% 120%, rgba(22, 142, 255, 0.28), rgba(14, 14, 20, 0) 60%), linear-gradient(160deg, #1A1538 0%, #0E0E14 55%, #0C1A2A 100%);
}
.player__glow { position: absolute; z-index: -1; border-radius: 50%; pointer-events: none; animation: rp-drift 14s ease-in-out infinite alternate; }
.player__glow--v { top: -30%; left: -12%; width: 62%; aspect-ratio: 1; background: radial-gradient(closest-side, rgba(135, 106, 255, 0.55), rgba(135, 106, 255, 0) 100%); }
.player__glow--c { right: -14%; bottom: -36%; width: 58%; aspect-ratio: 1; background: radial-gradient(closest-side, rgba(90, 211, 255, 0.4), rgba(90, 211, 255, 0) 100%); animation-delay: -7s; }
.player__play {
  position: relative; display: grid; place-items: center; width: clamp(64px, 8vw, 96px); aspect-ratio: 1; border-radius: 50%;
  background: #fff; color: var(--violet-ink); padding-left: 4px;
  box-shadow: 0 18px 40px -16px rgba(0, 0, 0, 0.6), 0 0 0 10px rgba(255, 255, 255, 0.08);
  transition: transform 300ms var(--ease-spring);
}
.player__play::after { content: ''; position: absolute; inset: 0; border-radius: 50%; box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.5); animation: rp-ring 2.4s var(--ease-out) infinite; }
.player__play svg { width: 38%; height: 38%; }
.player__cover:hover .player__play { transform: scale(1.07); }
.player__cover:active .player__play { transform: scale(0.97); }
.player__cover:focus-visible { outline: 3px solid var(--cyan); outline-offset: -3px; }
.player__label { position: absolute; left: clamp(18px, 3vw, 36px); bottom: clamp(16px, 2.6vw, 32px); display: flex; flex-direction: column; gap: 4px; }
.player__label strong { font-size: clamp(1.05rem, 0.8rem + 0.8vw, 1.45rem); font-weight: 620; letter-spacing: -0.02em; }
.player__label span { font-size: clamp(13px, 0.7rem + 0.3vw, 15px); color: rgba(255, 255, 255, 0.7); }
.player__note { margin: 18px auto 0; max-width: 40rem; font-size: 14px; line-height: 1.6; color: var(--ink-60); text-align: center; text-wrap: balance; }
.player__note .text-link { margin-left: 6px; font-size: 14px; white-space: nowrap; }

/* ────── Au programme : frise des cinq étapes reliées par un fil qui s'efface aux bouts ────── */
.program { max-width: 1120px; margin: 0 auto; padding: 0 var(--gutter) var(--section-y); }
.program__head { text-align: center; }
.program__head .h2 { margin: 0 auto; }
.program__head .h2 .grad { margin-left: auto; margin-right: auto; }
.method { position: relative; list-style: none; margin: clamp(40px, 5vw, 64px) 0 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); }
.method::before { content: ''; position: absolute; top: 27px; left: 4%; right: 4%; height: 2px; border-radius: 2px; background: linear-gradient(90deg, rgba(22, 142, 255, 0), #168EFF 12%, #876AFF 70%, rgba(135, 106, 255, 0)); opacity: 0.55; }
.method__step { position: relative; display: flex; flex-direction: column; align-items: center; gap: 14px; padding: 0 8px; text-align: center; }
.method__num { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; background: var(--canvas); font-size: 1.3rem; font-weight: 650; color: var(--violet-ink); box-shadow: inset 0 0 0 2px rgba(135, 106, 255, 0.45), 0 12px 24px -16px rgba(91, 63, 224, 0.6); }
.method__name { font-size: clamp(1.02rem, 0.9rem + 0.35vw, 1.2rem); font-weight: 620; letter-spacing: -0.02em; line-height: 1.25; text-wrap: balance; }
.method__body { display: flex; flex-direction: column; gap: 8px; }
.method__text { font-size: 14.5px; line-height: 1.55; color: var(--ink-60); text-wrap: pretty; }
.method__foot { margin: 28px auto 0; font-size: 15.5px; color: var(--ink-60); text-align: center; }

/* Deux colonnes ouvertes, un filet vertical qui s'efface entre elles */
.duo { margin-top: clamp(48px, 6vw, 80px); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.duo__item { position: relative; padding: 8px clamp(24px, 4vw, 56px); }
.duo__item + .duo__item::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 1px; background: linear-gradient(180deg, transparent, rgba(14, 14, 20, 0.12) 25%, rgba(14, 14, 20, 0.12) 75%, transparent); }
.duo__title { font-size: clamp(1.35rem, 1.1rem + 0.7vw, 1.75rem); font-weight: 620; letter-spacing: -0.035em; line-height: 1.15; }
.duo__text { margin-top: 10px; max-width: 30rem; font-size: 16px; line-height: 1.65; color: var(--ink-70); text-wrap: pretty; }
.duo .text-link { display: inline-block; margin-top: 14px; }

@media (max-width: 860px) {
  .method { grid-template-columns: minmax(0, 1fr); gap: 22px; max-width: 30rem; margin-left: auto; margin-right: auto; }
  .method::before { top: 6%; bottom: 6%; left: 27px; right: auto; width: 2px; height: auto; background: linear-gradient(180deg, rgba(22, 142, 255, 0), #168EFF 12%, #876AFF 70%, rgba(135, 106, 255, 0)); }
  .method__step { flex-direction: row; align-items: flex-start; gap: 18px; padding: 0; text-align: left; }
  .method__body { gap: 4px; padding-top: 14px; }
  .method__num { flex: none; }
  .duo { grid-template-columns: minmax(0, 1fr); }
  .duo__item { padding: 28px 0; text-align: center; }
  .duo__item + .duo__item::before { left: 0; right: 0; top: 0; bottom: auto; width: auto; height: 1px; background: linear-gradient(90deg, transparent, rgba(14, 14, 20, 0.12) 25%, rgba(14, 14, 20, 0.12) 75%, transparent); }
  .duo__text { margin-left: auto; margin-right: auto; }
}
@media (max-width: 560px) {
  .player { aspect-ratio: 4 / 3; }
  .player.is-playing { aspect-ratio: 16 / 9; }
  .player__note .text-link { display: inline-block; margin: 6px 0 0; }
}
@media (prefers-reduced-motion: reduce) {
  .rhero .kicker, .rhero__title, .rhero__lead, .replay { animation: none; }
  .player__glow, .player__play::after { animation: none; }
}