/* ============================================================ TAG ONE MOTORSPORT — Page /voiture Slater CSS v2.0 (session 56, 2026-07-29) Galerie + lightbox = PORT EXACT de slater-fiche-pilote.css (classes renommées t1-voit-*). Collage : états + repli mobile. Le reste du responsive vit DANS Webflow. ============================================================ */ /* --- Collage : révélation du nom du pilote au focus --- */ .t1-voit-collage-name { transition: opacity 0.35s ease; } [data-interactive-collage-focus] .t1-voit-collage-name { opacity: 1; } .t1-voit-collage-item .t1-voit-collage-card { transition: filter 0.35s ease; filter: brightness(0.92); } [data-interactive-collage-focus] .t1-voit-collage-card { filter: brightness(1); } /* ============================================================ RAILS DE GALERIE — port fiche pilote ============================================================ */ /* Wrap créé par le JS : ancre de la grande fraction. La marge haute laisse la place à la fraction (top:-58px). */ .t1-voit-gal-wrap { position: relative; width: 100%; margin-top: 64px; } /* Grande fraction « 01 / 07 » en haut à droite */ .t1-voit-gal-frac { position: absolute; top: -58px; right: 0; display: flex; align-items: baseline; gap: 6px; font-family: 'Saira', sans-serif; font-weight: 800; letter-spacing: -0.01em; font-variant-numeric: tabular-nums; line-height: 1; } .t1-voit-gal-frac .cur { font-size: clamp(30px, 4vw, 46px); color: #D2B461; } .t1-voit-gal-frac .sep, .t1-voit-gal-frac .tot { font-size: 20px; color: #7c818d; font-weight: 600; } /* Rail : compléments Slater (la classe Webflow t1-voit-gal-track porte déjà flex/gap/overflow-x) */ .t1-voit-gal-track { overflow-y: hidden; scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch; cursor: grab; touch-action: pan-x pan-y; scrollbar-width: none; overscroll-behavior-x: contain; -webkit-mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent); mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent); } .t1-voit-gal-track::-webkit-scrollbar { display: none; } .t1-voit-gal-track.is-dragging { cursor: grabbing; scroll-snap-type: none; scroll-behavior: auto; } /* Cartes créées par le JS autour de chaque image (zoom dans le cadre). ⚠️ Format 16:9 EXACT = celui des renders (1920×1080) et des photos recadrées : aucun rognage, rail parfaitement aligné. */ .t1-voit-gal-card { flex: 0 0 auto; width: 533px; aspect-ratio: 16 / 9; height: auto; position: relative; overflow: hidden; border-radius: 16px; scroll-snap-align: center; cursor: zoom-in; } /* L'image reprend 100% de sa carte (surcharge la classe Webflow posée sur l'img : 2 classes > 1, gagne malgré l'ordre Slater) */ .t1-voit-gal-card .t1-voit-gal-slide { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.5s cubic-bezier(0.2, 0.7, 0.2, 1); -webkit-user-drag: none; user-select: none; } .t1-voit-gal-card:hover .t1-voit-gal-slide { transform: scale(1.06); } .t1-voit-gal-card::after { content: ''; position: absolute; inset: 0; border-radius: 16px; box-shadow: inset 0 0 0 1px rgba(210, 180, 97, 0); transition: box-shadow 0.3s; pointer-events: none; } .t1-voit-gal-card:hover::after { box-shadow: inset 0 0 0 1px rgba(210, 180, 97, 0.4); } /* Ligne de contrôles sous le rail */ .t1-voit-gal-ctrl { display: flex; align-items: center; gap: 20px; margin-top: 24px; width: 100%; } .t1-voit-gal-arrows { display: flex; gap: 10px; flex: 0 0 auto; } .t1-voit-gal-arrow { width: 50px; height: 50px; display: flex; align-items: center; justify-content: center; border: 1px solid rgba(210, 180, 97, 0.4); background: transparent; border-radius: 50%; cursor: pointer; color: #D2B461; transition: background 0.2s, border-color 0.2s, transform 0.1s, opacity 0.2s; } .t1-voit-gal-arrow:hover { background: #D2B461; color: #000; border-color: #D2B461; } .t1-voit-gal-arrow:active { transform: scale(0.94); } .t1-voit-gal-arrow:disabled { opacity: 0.28; cursor: default; background: transparent; color: #D2B461; border-color: #26272b; } .t1-voit-gal-arrow svg { width: 20px; height: 20px; } .t1-voit-gal-prog { flex: 1; height: 2px; background: #26272b; position: relative; border-radius: 2px; overflow: hidden; } .t1-voit-gal-prog .bar { position: absolute; inset: 0; transform-origin: left; transform: scaleX(0); background: #D2B461; transition: transform 0.15s ease-out; } .t1-voit-gal-hint { font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: #7c818d; display: flex; align-items: center; gap: 7px; white-space: nowrap; flex: 0 0 auto; } .t1-voit-gal-hint svg { width: 14px; height: 14px; opacity: 0.7; } @media (max-width: 640px) { .t1-voit-gal-frac { top: -48px; } .t1-voit-gal-hint { display: none; } } /* ============================================================ LIGHTBOX — port fiche pilote ============================================================ */ .t1-voit-lb { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.94); display: none; align-items: center; justify-content: center; z-index: 9999; opacity: 0; transition: opacity 0.22s ease; touch-action: pan-y; } .t1-voit-lb.is-open { opacity: 1; } .t1-voit-lb-stage { position: relative; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; padding: 64px 72px; box-sizing: border-box; } .t1-voit-lb-img { max-width: 100%; max-height: 100%; border-radius: 8px; box-shadow: 0 24px 80px rgba(0, 0, 0, 0.6); user-select: none; -webkit-user-drag: none; } .t1-voit-lb-arrow { position: absolute; top: 50%; transform: translateY(-50%); width: 52px; height: 52px; display: flex; align-items: center; justify-content: center; border: 1px solid rgba(210, 180, 97, 0.4); background: rgba(0, 0, 0, 0.45); border-radius: 50%; cursor: pointer; z-index: 3; transition: background 0.2s, border-color 0.2s; color: #D2B461; } .t1-voit-lb-arrow:hover { background: rgba(210, 180, 97, 0.15); border-color: #D2B461; } .t1-voit-lb-arrow svg { width: 22px; height: 22px; } .t1-voit-lb-prev { left: 20px; } .t1-voit-lb-next { right: 20px; } .t1-voit-lb-close { position: absolute; top: 20px; right: 22px; width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; cursor: pointer; z-index: 3; color: #e9e9e9; border: 1px solid rgba(255, 255, 255, 0.16); border-radius: 50%; background: rgba(0, 0, 0, 0.35); transition: 0.2s; } .t1-voit-lb-close:hover { color: #fff; border-color: rgba(255, 255, 255, 0.4); } .t1-voit-lb-close svg { width: 18px; height: 18px; } .t1-voit-lb-counter { position: absolute; bottom: 22px; left: 50%; transform: translateX(-50%); font-family: 'Saira', sans-serif; font-size: 13px; font-weight: 600; letter-spacing: 0.14em; color: #b6bcc9; background: rgba(0, 0, 0, 0.45); border: 1px solid #26272b; padding: 7px 16px; border-radius: 30px; z-index: 3; } .t1-voit-lb-counter b { color: #D2B461; font-weight: 700; } @media (max-width: 700px) { .t1-voit-lb-stage { padding: 56px 12px; } .t1-voit-lb-arrow { width: 44px; height: 44px; } .t1-voit-lb-prev { left: 8px; } .t1-voit-lb-next { right: 8px; } /* Galerie mobile : masque de fondu retiré (repaint coûteux iOS) */ .t1-voit-gal-track { -webkit-mask-image: none; mask-image: none; } .t1-voit-gal-card { width: 320px; height: auto; } } /* ============================================================ REPLI MOBILE DU COLLAGE (<992px) Positions absolues (t1-voit-pos-1..6) neutralisées avec une spécificité supérieure — gagne malgré l'ordre de chargement. ============================================================ */ @media screen and (max-width: 991px) { .t1-voit-collage { height: auto !important; font-size: 16px; } .t1-voit-collage .t1-voit-collage-list { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; height: auto; } .t1-voit-collage .t1-voit-collage-list .t1-voit-collage-item { position: static; width: 100%; height: auto; aspect-ratio: 4 / 3; } .t1-voit-collage .t1-voit-collage-name { opacity: 1; } } @media screen and (max-width: 479px) { .t1-voit-collage .t1-voit-collage-list { grid-template-columns: 1fr; } }