/* ============================================================ GALLANTIER / About : CSS Slater (v2, autonome) 1) Allumage des stations du fil d'or 2) Carrousel The Visit (regles runtime, reprises de Services) 3) Porte finale Les regles vn-* et sv-door sont identiques a slater-services.css : si les deux fichiers chargent un jour ensemble, doublon inoffensif. ============================================================ */ /* ---------- Stations : survol desktop ---------- */ @media (hover: hover) and (pointer: fine) { .ab-station:hover .ab-st-node { border-color: rgba(201, 156, 84, 0.55); box-shadow: 0 0 24px -6px rgba(201, 156, 84, 0.45); } .ab-station:hover .ab-st-img { filter: brightness(0.95) saturate(1); } .ab-station:hover .ab-st-fig::after { border-color: rgba(201, 156, 84, 0.55); } } /* ---------- Stations : allumage tactile ---------- */ .ab-station.is-lit .ab-st-node { border-color: rgba(201, 156, 84, 0.55); box-shadow: 0 0 24px -6px rgba(201, 156, 84, 0.45); } .ab-station.is-lit .ab-st-img { filter: brightness(0.95) saturate(1); } .ab-station.is-lit .ab-st-fig::after { border-color: rgba(201, 156, 84, 0.55); } /* ---------- Venue : carrousel en boucle ---------- */ .vn-car.is-loop .vn-slide { position: absolute; top: 0; left: 0; margin: 0; } .vn-slide { will-change: transform; } .vn-slide.is-lit .vn-img { filter: brightness(.92) saturate(1); } .vn-slide.is-lit .vn-cap { color: #c9a96e; } /* ---------- Venue : fondu des bords ---------- */ .vn-stage::before, .vn-stage::after { content: ""; position: absolute; top: 0; bottom: 0; width: 8vw; z-index: 2; pointer-events: none; } .vn-stage::before { left: 0; background: linear-gradient(90deg, rgba(11,10,9,.85), transparent); } .vn-stage::after { right: 0; background: linear-gradient(270deg, rgba(11,10,9,.85), transparent); } /* ---------- Venue : fleches ---------- */ .vn-arrow:hover { border-color: #c9a96e; background-color: rgba(11,10,9,.8); } .vn-arrow:focus-visible { outline: 1px solid rgba(201,169,110,.6); outline-offset: 3px; } .vn-arrow svg { pointer-events: none; } /* ---------- Porte finale : l'image s'eveille au survol ---------- */ .sv-door-img { transition: opacity 1s ease, transform 1.6s cubic-bezier(.22,1,.36,1); } .sv-door:hover .sv-door-img { opacity: .85; transform: scale(1.05); } /* ---------- Mouvement reduit ---------- */ @media (prefers-reduced-motion: reduce) { .ab-st-node, .ab-st-img, .ab-st-fig::after, .vn-img, .vn-cap, .sv-door-img { transition: none; } .vn-img { filter: brightness(.92); } }