/* ===== yt-facade — Player YouTube lazy-load (v2 dark premium) ===== */
/* Réutilisable sur toutes les pages du site. Charge l'iframe YouTube uniquement au clic.
   Design "dark premium" : fond noir, thumbnail assombrie, badge orange animé, halo pulse. */

.yt-facade {
  position: relative;
  width: 100%;
  aspect-ratio: 21 / 9;
  border-radius: 24px;
  overflow: hidden;
  cursor: pointer;
  background: #0E0E0F;
  box-shadow: 0 1px 2px rgba(0,0,0,0.08), 0 32px 80px -20px rgba(0,0,0,0.55);
  transition: transform 0.4s var(--ease-out), box-shadow 0.4s var(--ease-out);
  isolation: isolate;
}
.yt-facade:hover {
  transform: translateY(-3px);
  box-shadow: 0 1px 2px rgba(0,0,0,0.08), 0 40px 90px -20px rgba(0,0,0,0.65),
              0 0 0 1px rgba(255, 104, 51, 0.25);
}

/* Badge "▶ VIDÉO · À VOIR" auto-généré, orange, pulse subtil */
.yt-facade::before {
  content: "▶  Vidéo · À voir";
  position: absolute;
  top: 20px;
  left: 20px;
  z-index: 3;
  background: var(--orange, #FF6833);
  color: white;
  padding: 8px 16px;
  border-radius: 999px;
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 11px;
  letter-spacing: 0.14em;
  font-weight: 700;
  text-transform: uppercase;
  box-shadow: 0 8px 24px rgba(255, 104, 51, 0.45), 0 0 0 0 rgba(255, 104, 51, 0.35);
  animation: yt-badge-pulse 2.8s ease-in-out infinite;
  pointer-events: none;
}
@keyframes yt-badge-pulse {
  0%, 100% { box-shadow: 0 8px 24px rgba(255, 104, 51, 0.45), 0 0 0 0 rgba(255, 104, 51, 0.35); transform: translateY(0); }
  50%      { box-shadow: 0 8px 24px rgba(255, 104, 51, 0.45), 0 0 0 8px rgba(255, 104, 51, 0);   transform: translateY(-2px); }
}

.yt-facade-thumb {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: brightness(0.55) contrast(0.92) saturate(0.9);
  transition: transform 0.6s var(--ease-out), filter 0.4s ease;
}
.yt-facade:hover .yt-facade-thumb {
  transform: scale(1.03);
  filter: brightness(0.7) contrast(0.95) saturate(1);
}

/* Overlay = halo orange radial + dégradé noir renforcé bas */
.yt-facade-overlay {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at center, rgba(255, 104, 51, 0.20) 0%, rgba(255, 104, 51, 0) 50%),
    linear-gradient(180deg, rgba(0,0,0,0.30) 0%, rgba(0,0,0,0.10) 40%, rgba(0,0,0,0.75) 100%);
  pointer-events: none;
}

.yt-facade-play {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 96px;
  height: 96px;
  border-radius: 50%;
  background: var(--orange, #FF6833);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  cursor: pointer;
  box-shadow: 0 20px 60px rgba(255, 104, 51, 0.55), 0 0 0 0 rgba(255, 104, 51, 0.4);
  transition: transform 0.3s var(--ease-out), box-shadow 0.3s ease;
  animation: yt-pulse 2.4s ease-in-out infinite;
  z-index: 2;
}
.yt-facade:hover .yt-facade-play {
  transform: translate(-50%, -50%) scale(1.10);
  box-shadow: 0 24px 70px rgba(255, 104, 51, 0.65), 0 0 0 14px rgba(255, 104, 51, 0.18);
}
.yt-facade-play svg {
  width: 36px;
  height: 36px;
  margin-left: 4px;
  fill: currentColor;
}
@keyframes yt-pulse {
  0%, 100% { box-shadow: 0 20px 60px rgba(255, 104, 51, 0.55), 0 0 0 0 rgba(255, 104, 51, 0.4); }
  50%      { box-shadow: 0 20px 60px rgba(255, 104, 51, 0.55), 0 0 0 20px rgba(255, 104, 51, 0); }
}

.yt-facade-caption {
  position: absolute;
  left: 28px;
  right: 28px;
  bottom: 24px;
  color: white;
  font-family: var(--font-sans, system-ui, sans-serif);
  z-index: 2;
}
.yt-facade-eyebrow {
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  opacity: 0.85;
  margin-bottom: 6px;
}
.yt-facade-title {
  font-size: 24px;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.2;
  max-width: 600px;
  text-shadow: 0 2px 20px rgba(0,0,0,0.6);
}

.yt-facade iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}
/* Cache le badge quand l'iframe est chargée (video en lecture) */
.yt-facade[data-loaded="1"]::before { display: none; }

@media (max-width: 700px) {
  .yt-facade { border-radius: 16px; aspect-ratio: 16 / 9; }
  .yt-facade::before { top: 14px; left: 14px; padding: 6px 12px; font-size: 10px; }
  .yt-facade-play { width: 68px; height: 68px; }
  .yt-facade-play svg { width: 26px; height: 26px; }
  .yt-facade-caption { left: 18px; right: 18px; bottom: 16px; }
  .yt-facade-title { font-size: 17px; }
  .yt-facade-eyebrow { font-size: 10px; }
}

/* Respect des préférences utilisateur : pause les animations */
@media (prefers-reduced-motion: reduce) {
  .yt-facade::before,
  .yt-facade-play { animation: none; }
}