/* ============================================================ GALLANTIER / DEV Services : CSS Slater (v3, + section Venue) Complements des styles Webflow (ce que le MCP ne pose pas : selecteurs descendants, etats, transitions). Zero em-dash. Ecrit maison, patterns valides au labo v15. ============================================================ */ /* ---------- Rangees de services : etat vivant ---------- */ .sv-li { transition: opacity .45s ease; -webkit-tap-highlight-color: transparent; } .sv-li:hover, .sv-li.open { opacity: 1; } .sv-li:last-child { border-bottom: none; } .sv-li.has-view:focus-visible { outline: 1px solid rgba(201,169,110,.6); outline-offset: 4px; } /* Le point dore des rangees interactives */ .sv-li.has-view .sv-li-line::after { content: ""; display: inline-block; width: 5px; height: 5px; border-radius: 50%; background: #c9a96e; opacity: .45; margin-left: 12px; vertical-align: middle; transition: opacity .45s ease, box-shadow .45s ease; } .sv-li.has-view:hover .sv-li-line::after, .sv-li.has-view:focus-visible .sv-li-line::after, .sv-li.open .sv-li-line::after, .sv-room.is-lit .sv-li.has-view .sv-li-line::after { opacity: 1; box-shadow: 0 0 8px rgba(201,169,110,.6); } /* ---------- Images de survol empilees dans l'arche ---------- */ .sv-over { transition: opacity .8s ease; } .sv-over.show { opacity: 1; } /* ---------- Tactile : la salle au centre s'allume ---------- */ @media (hover: none), (pointer: coarse) { .sv-arch-img { filter: brightness(.45) saturate(.92); transition: filter .9s ease; } .sv-room.is-lit .sv-arch-img { filter: brightness(.92) saturate(1); } } /* ---------- La 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); } /* ---------- Player Groom : retour visuel des boutons ---------- */ .sv-media-btn { transition: border-color .3s ease, background-color .3s ease; } .sv-media-btn:hover { border-color: #c9a96e; background-color: rgba(11,10,9,.75); } .sv-media-btn:focus-visible { outline: 1px solid rgba(201,169,110,.6); outline-offset: 3px; } /* ---------- Pill : letter-spacing respire au survol ---------- */ .sv-pill { transition: border-color .4s ease, background-color .4s ease, letter-spacing .5s cubic-bezier(.22,1,.36,1); } /* ---------- 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; } /* ---------- Venue : reduced motion ---------- */ @media (prefers-reduced-motion: reduce) { .vn-img, .vn-cap { transition: none; } .vn-img { filter: brightness(.92); } }