/* * jg-hero.css * JG Audio Player — Section Hero : slideshow, Ken Burns, flèches, scroll chevron * @package JG Audio Player */ /* ── Hero section (jg-hero.php lignes 258–369) ── */ #jg-hero { position: relative; width: 100%; overflow: hidden; z-index: 0; display: block; } .wp-site-blocks:has(#jg-hero), main:has(#jg-hero) { padding-top: 0 !important; margin-top: 0 !important; } #jg-hero-track { position: absolute; inset: 0; } /* ── Slide de base : invisible, sans transition (le JS gère tout) ── */ .jg-slide { position: absolute; inset: 0; pointer-events: none; /* État initial : caché, prêt à recevoir transforms via JS */ opacity: 0; transform: none; /* La transition est injectée par JS en fonction des effets actifs */ } .jg-slide.jg-slide-active { pointer-events: auto; opacity: 1; transform: none; } /* Ken Burns : animation CSS sur le fond, active uniquement sur le slide actif */ .jg-slide-bg { position: absolute; inset: 0; background-size: cover; background-repeat: no-repeat; will-change: transform; transform-origin: center center; } .jg-slide.jg-kb-active .jg-slide-bg { animation: jgKenBurns var(--jg-hero-duration, 5s) ease-in-out forwards; } @keyframes jgKenBurns { from { transform: scale(1); } to { transform: scale(1.08); } } .jg-slide-overlay { position: absolute; inset: 0; z-index: 1; } /* Contenu centré verticalement, Gutenberg gère le reste */ .jg-slide-content { position: relative; z-index: 2; height: 100%; display: flex; flex-direction: column; justify-content: center; /* align-items ici (dans le ) évite le saut visuel des boutons qui survenait quand la règle était uniquement dans le