(fiables tous navigateurs). ================================================================ */ /* ================================================================ WIDGET WRAPPER + BOUTON DÉCLENCHEUR ================================================================ */ .venete-reservation-widget { display: inline-flex; align-items: center; } .venete-reserve-trigger, button.venete-reserve-trigger { display: inline-flex !important; align-items: center !important; justify-content: center !important; cursor: pointer !important; border: none !important; outline: none !important; box-shadow: none !important; -webkit-appearance: none !important; appearance: none !important; background-color: #2e2c51; color: #ffffff; padding: 14px 30px; border-radius: 0; line-height: 1; -webkit-transition: background-color .3s ease, color .3s ease, border-color .3s ease; transition: background-color .3s ease, color .3s ease, border-color .3s ease; } .venete-reserve-trigger-label { display: inline-block; font-size: 0.78rem; letter-spacing: 0.16em; text-transform: uppercase; color: inherit; } /* ================================================================ OVERLAY — déplacé dans au chargement (JS) z-index : au-dessus des panneaux du burger (999992/999994), sous les boutons déclencheurs remontés (1000000). ================================================================ */ .venete-reserve-overlay { position: fixed; inset: 0; top: 0; left: 0; right: 0; bottom: 0; z-index: 999996; display: none; overflow-y: auto; -webkit-overflow-scrolling: touch; opacity: 1; } /* Fond blanc : balaye du haut vers le bas */ .venete-reserve-bg { position: fixed; inset: 0; top: 0; left: 0; right: 0; bottom: 0; background-color: #ffffff; z-index: 0; -webkit-transform: translateY(-100%); transform: translateY(-100%); -webkit-transition: -webkit-transform var(--bg-dur, 700ms) cubic-bezier(.77,0,.175,1); transition: transform var(--bg-dur, 700ms) cubic-bezier(.77,0,.175,1); } .venete-reserve-overlay.is-open .venete-reserve-bg { -webkit-transform: translateY(0); transform: translateY(0); } /* Croix de fermeture */ .venete-reserve-close { position: fixed; top: 22px; left: 26px; z-index: 5; display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; padding: 0 !important; background: none !important; border: none !important; outline: none !important; box-shadow: none !important; cursor: pointer; color: #1a1a1a; opacity: 0; -webkit-transition: opacity .4s ease, -webkit-transform .25s ease; transition: opacity .4s ease, transform .25s ease; } .venete-reserve-overlay.is-open .venete-reserve-close { opacity: 1; -webkit-transition-delay: .15s; transition-delay: .15s; } .venete-reserve-close:hover { -webkit-transform: rotate(90deg); transform: rotate(90deg); } .venete-reserve-close svg { display: block; } /* Conteneur interne — invisible tant que le balayage du fond n'est pas terminé : on évite que les blocs blancs apparaissent avant le rideau. */ .venete-reserve-inner { position: relative; z-index: 2; min-height: 100%; box-sizing: border-box; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 48px; max-width: 1180px; margin: 0 auto; padding: 104px 40px 64px; opacity: 0; } /* Bascule visible à la fin exacte du balayage du fond (blanc sur blanc, donc imperceptible) — la révélation des blocs vient juste après. */ .venete-reserve-overlay.is-open .venete-reserve-inner { opacity: 1; -webkit-transition: opacity 0.01s linear var(--bg-dur, 700ms); transition: opacity 0.01s linear var(--bg-dur, 700ms); } /* ================================================================ GRILLE DES BLOCS PHOTO ================================================================ */ .venete-reserve-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; width: 100%; } .venete-reserve-card { position: relative; display: block; text-decoration: none; color: inherit; } .venete-reserve-card-media { position: relative; width: 100%; aspect-ratio: 3 / 4; overflow: hidden; background: #e9e7e0; } .venete-reserve-card-img { position: absolute; inset: 0; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; display: block; } .venete-reserve-card-scrim { position: absolute; inset: 0; top: 0; left: 0; right: 0; bottom: 0; z-index: 1; background: linear-gradient(to top, rgba(0,0,0,0.30) 0%, rgba(0,0,0,0) 58%); pointer-events: none; } /* Volet blanc : recouvre la photo puis se rétracte vers le bas */ .venete-reserve-volet { position: absolute; inset: -1px; /* déborde de 1px → pas de filet à la jointure */ top: -1px; left: -1px; right: -1px; bottom: -1px; z-index: 2; background-color: #ffffff; -webkit-transform: translateY(0); transform: translateY(0); -webkit-transition: -webkit-transform var(--card-dur, 620ms) cubic-bezier(.77,0,.175,1); transition: transform var(--card-dur, 620ms) cubic-bezier(.77,0,.175,1); } /* Titre + « + » : superposés en bas de la photo */ .venete-reserve-card-title { position: absolute; left: 22px; bottom: 20px; right: 64px; z-index: 3; color: #ffffff; font-size: clamp(1.05rem, 1.6vw, 1.55rem); letter-spacing: 0.01em; line-height: 1.12; opacity: 0; -webkit-transform: translateY(12px); transform: translateY(12px); -webkit-transition: opacity .5s ease, -webkit-transform .5s ease; transition: opacity .5s ease, transform .5s ease; } .venete-reserve-card-plus { position: absolute; right: 20px; bottom: 20px; z-index: 3; display: flex; align-items: center; justify-content: center; width: 34px; height: 34px; border: 1px solid #ffffff; color: #ffffff; box-sizing: border-box; opacity: 0; -webkit-transform: translateY(12px); transform: translateY(12px); -webkit-transition: opacity .5s ease, -webkit-transform .5s ease, background-color .25s ease, color .25s ease; transition: opacity .5s ease, transform .5s ease, background-color .25s ease, color .25s ease; } .venete-reserve-card-plus svg { display: block; width: 18px; height: 18px; } /* ================================================================ LIEN GLOBAL ================================================================ */ .venete-reserve-global { display: inline-flex; align-items: center; justify-content: center; text-decoration: none; background-color: #2e2c51; color: #ffffff; padding: 20px 54px; opacity: 0; -webkit-transform: translateY(14px); transform: translateY(14px); -webkit-transition: opacity .55s ease, -webkit-transform .55s ease, background-color .25s ease, color .25s ease; transition: opacity .55s ease, transform .55s ease, background-color .25s ease, color .25s ease; } .venete-reserve-global-label { font-size: 0.8rem; letter-spacing: 0.18em; text-transform: uppercase; color: inherit; } /* ================================================================ SÉQUENCE D'OUVERTURE --reveal-delay = balayage du fond TERMINÉ (+ petit tampon) + cascade ================================================================ */ .venete-reserve-card { --reveal-delay: calc( var(--bg-dur, 700ms) + 80ms + var(--i, 0) * var(--stagger, 130ms) ); } /* --- VOLETS BLANCS (défaut) : le volet descend hors du cadre --- */ .venete-reserve-overlay.is-open .venete-reserve-volet { -webkit-transform: translateY(101%); transform: translateY(101%); -webkit-transition-delay: var(--reveal-delay); transition-delay: var(--reveal-delay); } /* --- DÉCOUPE VERTICALE : le volet glisse vers la droite --- */ .venete-reserve-overlay[data-reveal="wipe"] .venete-reserve-volet { -webkit-transform: translateX(0); transform: translateX(0); } .venete-reserve-overlay[data-reveal="wipe"].is-open .venete-reserve-volet { -webkit-transform: translateX(101%); transform: translateX(101%); } /* --- ZOOM DOUX : pas de volet, la photo se dézoome + fondu --- */ .venete-reserve-overlay[data-reveal="zoom"] .venete-reserve-volet { display: none; } .venete-reserve-overlay[data-reveal="zoom"] .venete-reserve-card-media { opacity: 0; -webkit-transition: opacity var(--card-dur, 620ms) ease; transition: opacity var(--card-dur, 620ms) ease; } .venete-reserve-overlay[data-reveal="zoom"].is-open .venete-reserve-card-media { opacity: 1; -webkit-transition-delay: var(--reveal-delay); transition-delay: var(--reveal-delay); } .venete-reserve-overlay[data-reveal="zoom"] .venete-reserve-card-img { -webkit-transform: scale(1.12); transform: scale(1.12); -webkit-transition: -webkit-transform calc(var(--card-dur, 620ms) * 2.4) cubic-bezier(.22,.61,.36,1); transition: transform calc(var(--card-dur, 620ms) * 2.4) cubic-bezier(.22,.61,.36,1); } .venete-reserve-overlay[data-reveal="zoom"].is-open .venete-reserve-card-img { -webkit-transform: scale(1); transform: scale(1); -webkit-transition-delay: var(--reveal-delay); transition-delay: var(--reveal-delay); } /* Titre + « + » : montent en fondu après la révélation du bloc */ .venete-reserve-overlay.is-open .venete-reserve-card-title, .venete-reserve-overlay.is-open .venete-reserve-card-plus { opacity: 1; -webkit-transform: translateY(0); transform: translateY(0); } .venete-reserve-overlay.is-open .venete-reserve-card-title { -webkit-transition-delay: calc( var(--reveal-delay) + var(--card-dur, 620ms) * 0.55 ); transition-delay: calc( var(--reveal-delay) + var(--card-dur, 620ms) * 0.55 ); } .venete-reserve-overlay.is-open .venete-reserve-card-plus { -webkit-transition-delay: calc( var(--reveal-delay) + var(--card-dur, 620ms) * 0.68 ); transition-delay: calc( var(--reveal-delay) + var(--card-dur, 620ms) * 0.68 ); } /* « + » au survol (les couleurs réelles viennent des controls Elementor) */ .venete-reserve-card:hover .venete-reserve-card-plus { background-color: #ffffff; color: #1a1a1a; } /* Lien global : apparaît en dernier */ .venete-reserve-overlay.is-open .venete-reserve-global { opacity: 1; -webkit-transform: translateY(0); transform: translateY(0); -webkit-transition-delay: calc( var(--bg-dur, 700ms) + 80ms + 3 * var(--stagger, 130ms) + var(--card-dur, 620ms) * 0.72 ); transition-delay: calc( var(--bg-dur, 700ms) + 80ms + 3 * var(--stagger, 130ms) + var(--card-dur, 620ms) * 0.72 ); } /* ================================================================ FERMETURE — le contenu se fond pendant que le fond remonte ================================================================ */ .venete-reserve-overlay.is-closing .venete-reserve-inner, .venete-reserve-overlay.is-closing .venete-reserve-close { opacity: 0; -webkit-transition: opacity .28s ease; transition: opacity .28s ease; } /* ================================================================ RESPONSIVE — bouton + overlay masqués sur mobile (les liens Hôtel / Restaurant / Événements passent dans le burger) ================================================================ */ @media (max-width: 767px) { .venete-reserve-trigger, .venete-reserve-overlay { display: none !important; } } @media (max-width: 1024px) { .venete-reserve-inner { padding: 88px 28px 52px; gap: 36px; } .venete-reserve-card-title { left: 16px; bottom: 16px; } .venete-reserve-card-plus { right: 14px; bottom: 16px; } }