/** * YEP'S Video Lightbox — overlay vidéo plein écran déclenché par le bouton * play du bloc yeps/hero-video. DOM injecté côté JS (cf. hero-video-lightbox.js) * dans au premier besoin, partagé par tous les triggers de la page. * * Préfixe `yeps-vlb` (YEP'S Video LightBox) pour rester découplé du bloc * hero (BEM `yeps-hero-video__*`) : la même mécanique pourra resservir * d'autres blocs futurs sans renaming. * * Comportements piloté par data-attributes plutôt que par display/hidden : * - `data-open="false"` → opacity 0 + pointer-events none (présent mais invisible) * - `data-open="true"` → opacity 1 + pointer-events auto * - `data-state="playing|paused"` sur le bouton primaire * - `data-state="sound|muted"` sur le bouton mute * * Breakpoint mobile (720px) volontairement LOCAL à ce widget — c'est-à-dire * découplé du système breakpoint admin (`yeps_design_breakpoints[tablet]` * piloté par Yeps_DS_Responsive_CSS). La lightbox n'est pas un bloc et n'est * pas exposée à la config rédacteur : son adaptation mobile dépend de la * surface du viewport, pas de la grille éditoriale. Le seuil 720px ≈ frontière * entre tablettes en portrait (~768px) et téléphones, valeur stable historique. */ /* ─── Backdrop ────────────────────────────────────────────────────────── * Fond bleu sombre semi-opaque + flou glassmorphique. Fallback couleur plus * opaque pour les navigateurs sans backdrop-filter (préservation de la * lisibilité du bouton close blanc/jaune sur la zone autour de la vidéo). */ .yeps-vlb { position: fixed; inset: 0; /* Au-dessus du lanceur du chat IA (z 99999) : la lecture vidéo plein écran doit masquer le bouton flottant du chat. */ z-index: 100000; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 28px; padding: 0; background: rgba(22, 23, 52, 0.94); /* fallback */ background: rgba(22, 23, 52, 0.78); -webkit-backdrop-filter: blur(22px) saturate(140%); backdrop-filter: blur(22px) saturate(140%); opacity: 0; pointer-events: none; transition: opacity 280ms cubic-bezier(0.4, 0, 0.2, 1); } .yeps-vlb[data-open="true"] { opacity: 1; pointer-events: auto; } /* Body lock pendant l'affichage — empêche le scroll en arrière-plan. */ body.yeps-vlb-open { overflow: hidden; } /* ─── Bouton fermer (top-right) ──────────────────────────────────────── * La barre top permet d'ancrer le bouton close indépendamment de la * largeur de la stage (qui dépend de l'aspect-ratio). */ .yeps-vlb__bar { position: absolute; top: 20px; right: 24px; z-index: 2; } .yeps-vlb__close { display: flex; align-items: center; justify-content: center; width: 48px; height: 48px; border: 0; border-radius: 999px; padding: 0; background-color: var(--wp--preset--color--jaune-yeps, #FFD100); color: var(--wp--preset--color--bleu-sombre, #1A1A2E); cursor: pointer; box-shadow: 0 6px 18px rgba(0, 0, 0, 0.3); transition: background-color 160ms ease, transform 160ms ease; } .yeps-vlb__close:hover { background-color: #ffd84d; transform: scale(1.04); } .yeps-vlb__close:active { transform: scale(0.94); } .yeps-vlb__close:focus-visible { outline: 2px solid #fff; outline-offset: 3px; } .yeps-vlb__close svg { width: 22px; height: 22px; } /* ─── Stage vidéo ────────────────────────────────────────────────────── * 16:9 fluide, plafonné à 1280 px de large et 70 % de la hauteur du * viewport. Scale 0.96 → 1 à l'ouverture pour un mouvement subtil. */ .yeps-vlb__stage { position: relative; width: min(92vw, 1280px); aspect-ratio: 16 / 9; max-height: 70vh; border-radius: 14px; background: #000; overflow: hidden; box-shadow: 0 30px 80px rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(255, 255, 255, 0.06); transform: scale(0.96); transition: transform 320ms cubic-bezier(0.2, 0.7, 0.2, 1); } .yeps-vlb[data-open="true"] .yeps-vlb__stage { transform: scale(1); } .yeps-vlb__stage video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; background: #000; cursor: pointer; /* click-to-toggle-play sur la vidéo elle-même */ } /* ─── Contrôles centrés sous la vidéo ────────────────────────────────── * Pilule fond translucide + flou, contient les 2 boutons play/pause et mute. */ .yeps-vlb__controls { display: inline-flex; align-items: center; gap: 14px; padding: 10px 14px; border-radius: 999px; background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.12); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); } .yeps-vlb__ctrl { display: flex; align-items: center; justify-content: center; border: 0; border-radius: 999px; padding: 0; cursor: pointer; transition: background-color 160ms ease, transform 160ms ease; } .yeps-vlb__ctrl:active { transform: scale(0.94); } .yeps-vlb__ctrl:focus-visible { outline: 2px solid #fff; outline-offset: 3px; } /* Bouton play/pause = primaire (jaune YEP'S) */ .yeps-vlb__ctrl--primary { width: 64px; height: 64px; background-color: var(--wp--preset--color--jaune-yeps, #FFD100); color: var(--wp--preset--color--bleu-sombre, #1A1A2E); } .yeps-vlb__ctrl--primary:hover { background-color: #ffd84d; } .yeps-vlb__ctrl--primary svg { width: 28px; height: 28px; } /* Bouton mute = secondaire (translucide) */ .yeps-vlb__ctrl--mute { width: 56px; height: 56px; background-color: rgba(255, 255, 255, 0.10); color: #fff; } .yeps-vlb__ctrl--mute:hover { background-color: rgba(255, 255, 255, 0.20); } .yeps-vlb__ctrl--mute svg { width: 24px; height: 24px; } /* État data-state : on switche les icônes interne (play/pause, sound/muted). * Évite de toucher au DOM côté JS, seule la classe ou l'attribut change. */ .yeps-vlb__ctrl--primary[data-state="playing"] .yeps-vlb__icon-play, .yeps-vlb__ctrl--primary[data-state="paused"] .yeps-vlb__icon-pause, .yeps-vlb__ctrl--mute[data-state="sound"] .yeps-vlb__icon-muted, .yeps-vlb__ctrl--mute[data-state="muted"] .yeps-vlb__icon-sound { display: none; } /* ─── Mobile ─────────────────────────────────────────────────────────── * On réduit les boutons et la marge interne. La stage occupe ~80 % de * la hauteur pour laisser respirer les contrôles sous elle. */ @media (max-width: 720px) { .yeps-vlb { gap: 18px; padding: 14px; } .yeps-vlb__bar { top: 12px; right: 12px; } /* Boutons remontés au-dessus du seuil tactile confortable. * WCAG 2.5.5 (AAA) demande 44×44 minimum ; on vise 48×48 pour les * contrôles secondaires (close, mute) afin de laisser de la marge sur * un viewport étroit où le gap entre les pilules peut compresser la * zone effective. Le bouton play (primaire) reste à 52×52. */ .yeps-vlb__close { width: 44px; height: 44px; } .yeps-vlb__close svg { width: 20px; height: 20px; } .yeps-vlb__stage { width: 100%; max-height: 60vh; border-radius: 12px; } .yeps-vlb__ctrl--primary { width: 52px; height: 52px; } .yeps-vlb__ctrl--primary svg { width: 24px; height: 24px; } .yeps-vlb__ctrl--mute { width: 48px; height: 48px; } .yeps-vlb__ctrl--mute svg { width: 22px; height: 22px; } } /* ─── Téléphone en paysage : fallback pseudo-fullscreen ────────────── * Quand on bascule en paysage sur téléphone, le JS tente d'engager le * lecteur natif OS (cf. tryEngageNativeFS dans hero-video-lightbox.js). * S'il y parvient, l'OS player couvre toute la surface et notre CSS est * invisible. S'il échoue (Safari iOS refuse hors user-gesture par ex.), * cette couche évite que l'utilisateur se retrouve avec un petit stage * centré au milieu d'un viewport paysage : on étire le stage edge-to-edge * et on overlay les contrôles sur la vidéo. * * Cibles : * - `orientation: landscape` : déclencheur. * - `max-height: 500px` : exclut les tablettes en paysage (~768px+). * Pas de `pointer: coarse` ici (CSS, contrairement au JS qui doit isoler * desktops tactiles) — la combo height + landscape suffit dans la pratique. */ @media (orientation: landscape) and (max-height: 500px) { .yeps-vlb { padding: 0; gap: 0; } .yeps-vlb__stage { position: absolute; inset: 0; width: auto; aspect-ratio: auto; max-height: none; border-radius: 0; box-shadow: none; } /* object-fit: contain pour préserver l'image source (pas de crop). */ .yeps-vlb__stage video { object-fit: contain; } .yeps-vlb__bar { top: 16px; right: 16px; z-index: 3; /* au-dessus du stage absolu. */ } .yeps-vlb__controls { position: absolute; bottom: 20px; left: 50%; transform: translateX(-50%); z-index: 3; /* Fond plus opaque pour rester lisible sur n'importe quelle frame. */ background: rgba(0, 0, 0, 0.45); border-color: rgba(255, 255, 255, 0.18); } } /* ─── Reduced motion ────────────────────────────────────────────────── * On retire les transitions d'ouverture (opacity et scale apparaissent * instantanément). Les survols continuent de fonctionner sans transition. */ @media (prefers-reduced-motion: reduce) { .yeps-vlb, .yeps-vlb__stage, .yeps-vlb__close, .yeps-vlb__ctrl { transition: none; } }