/* ============================================================ GALLANTIER — DISTINCTIONS · immersion (Slater CSS) Page : /dev-distinctions (puis /distinctions) Esprit « Le Seuil » : ce qu'on regarde s'allume. ============================================================ */ /* ---------- Anti scroll latéral (le Footer du site est en 100vw, qui inclut la scrollbar ; filet de sécurité page-scopé) ---------- */ html, body { overflow-x: hidden; } /* ---------- Photos : pénombre par défaut, focus lumineux ---------- */ .dist_photo { filter: brightness(0.55) saturate(0.85); transform: scale(1.001); transition: filter 1s cubic-bezier(0.22, 1, 0.36, 1), transform 1.4s cubic-bezier(0.22, 1, 0.36, 1); will-change: filter, transform; } /* Desktop : la pièce survolée s'allume, les autres s'éteignent davantage */ @media (hover: hover) and (pointer: fine) { .dist_gallery-item:hover .dist_photo { filter: brightness(1) saturate(1); transform: scale(1.05); } .dist_gallery:hover .dist_gallery-item:not(:hover) .dist_photo { filter: brightness(0.3) saturate(0.7); } .dist_gallery-item:hover .dist_figure-label { color: #c99c54; } } /* Légendes : passage doux vers l'or quand la pièce est allumée */ .dist_figure-label { transition: color 0.8s cubic-bezier(0.22, 1, 0.36, 1); } /* Mobile / tactile : la photo au centre du viewport s'allume (classe posée par le JS) */ .dist_gallery-item.is-lit .dist_photo { filter: brightness(1) saturate(1); transform: scale(1.02); } .dist_gallery-item.is-lit .dist_figure-label { color: #c99c54; } /* ---------- Bouton vote : lueur discrète au survol ---------- */ .button-primary.button-white.primary { transition: box-shadow 0.6s cubic-bezier(0.22, 1, 0.36, 1); } @media (hover: hover) { .button-primary.button-white.primary:hover { box-shadow: 0 12px 40px -14px rgba(201, 156, 84, 0.45); } } /* ---------- Reduced motion : tout reste visible et immobile ---------- */ @media (prefers-reduced-motion: reduce) { .dist_photo, .dist_gallery:hover .dist_gallery-item:not(:hover) .dist_photo { filter: none !important; transform: none !important; transition: none !important; } }