/* ============================================================ TAG ONE MOTORSPORT — Page Hospitalité (CSS Slater) v1.4 Session 53 · Hero slideshow cinématique v1.4 (session 58) — §7 : vignette de la galerie masquée sous 767px (retour Simon : elle écrasait la grande image en mobile). ------------------------------------------------------------ RÈGLE PROJET : ce fichier ne contient QUE ce que le Designer ne sait pas faire — classes posées par le JS (is-previous), @keyframes, sélecteurs descendants, reduced-motion. Tout le reste (layout, responsive) vit DANS Webflow. ⚠️ Le <link> de ce fichier doit être ajouté au head de la page Hospitalité (le CSS Slater publie, mais ne s'insère pas tout seul — mémoire projet « slater-css-publishes »). ============================================================ */ /* Slide sortant : reste visible sous le slide entrant pendant le fondu croisé (classe posée puis retirée par le JS). */ .t1-hosp-cycle-item.is-previous { opacity: 1; z-index: 0; } /* Zoom lent « cinématique » sur le slide actif (6 % en 7 s). Relancé à chaque retour du slide dans le cycle. */ @keyframes t1HospHeroZoom { from { transform: scale(1); } to { transform: scale(1.06); } } .t1-hosp-cycle-item.is-active .t1-home-hero-img { animation: t1HospHeroZoom 7s ease-out forwards; will-change: transform; } /* Accessibilité : ni zoom ni fondu si mouvement réduit (le JS coupe aussi le cycle). */ @media (prefers-reduced-motion: reduce) { .t1-hosp-cycle-item { transition: none; } .t1-hosp-cycle-item.is-active .t1-home-hero-img { animation: none; } } /* ============================================================ §2 SÉQUENCE « LE LIEU » (v1.1) — états initiaux + fallbacks Le clip-path et les sélecteurs descendants sont impossibles dans le Designer → ils vivent ici. Doit matcher startClip du JS. ============================================================ */ /* Fenêtre initiale de la photo (le JS l'ouvre au scrub) */ .t1-hosp-lieu-media { clip-path: inset(28vh 27vw 28vh 27vw round 20px); will-change: clip-path; } @media (max-width: 767px) { .t1-hosp-lieu-media { clip-path: inset(32vh 10vw 32vh 10vw round 16px); } } /* Anti-flash (retour Simon, v1.2) : la phrase reste invisible tant que le JS n'a pas posé l'état atténué des caractères — sinon elle apparaît pleine couleur au chargement puis s'éteint au 1er scroll. */ .t1-hosp-lieu-title { opacity: 0; } /* La phrase pleine scène : taille et largeur par-dessus t1-course-h2 (classe dans un HtmlEmbed = pas de style Webflow possible) */ .t1-hosp-lieu-title h2 { font-size: clamp(30px, 3.8vw, 58px); line-height: 1.12; max-width: 1000px; margin: 0 auto; text-shadow: 0 2px 30px rgba(0, 0, 0, 0.7); } /* Le titre tente n'arrive qu'en fin de séquence (le JS le révèle) */ .t1-hosp-lieu-after { opacity: 0; } /* Reduced motion : état final statique, comme /lecurie §équipe */ @media (prefers-reduced-motion: reduce) { .t1-hosp-lieu { height: auto; } .t1-hosp-lieu-stage { position: relative; height: 100vh; } .t1-hosp-lieu-media { clip-path: inset(0 0 0 0 round 0px); } .t1-hosp-lieu-title { display: none; } .t1-hosp-lieu-after { opacity: 1 !important; } .t1-hosp-lieu-dark { opacity: 0.45 !important; } } /* ============================================================ §7 GALERIE — Layered Image Slider (v1.3) Le cadre masqué déborde de 30 % sous la section : le centrage translate(-50%, 30%) est impossible dans le Designer → ici. Sans JS, le 1er fond reste visible (fallback). ============================================================ */ .t1-hosp-gal-mask { transform: translate(-50%, 30%); } .t1-hosp-gal-bgitem:first-child { opacity: 1; } .t1-hosp-gal { touch-action: pan-y; } /* Mobile (retour Simon, session 58) : la vignette fait 200x250 sur un écran de 390 — plus de la moitié de la largeur — et écrase la grande image. On garde la photo plein cadre + les flèches, rien d'autre. ⚠️ visibility, PAS display:none : le JS lit `maskFrame.clientWidth` pour calculer le pas de défilement (initLayeredImageSlider, var maskStep). Un display:none le mettrait à 0 et casserait le carrousel. Vérifié : clientWidth reste à 200 avec visibility:hidden. */ @media (max-width: 767px) { .t1-hosp-gal-mask { visibility: hidden; pointer-events: none; } }