/* ========================================================================== Page de lancement (teasing avant ouverture) - template-lancement.php Page 100% autonome (pas de header/footer du theme). Tokens --fp-* repris de main.css ; --lp-rose est POSEE EN INLINE sur par le template PHP (check-zones.mjs interdit les couleurs en dur dans ce fichier : voir template-lancement.php, attribut style du ). ========================================================================== */ @font-face { font-family: 'Aeonik'; src: url('../fonts/aeonik-regular.woff2') format('woff2'), url('../fonts/aeonik-regular.woff') format('woff'); font-weight: 400; font-style: normal; font-display: swap; } /* Aucun debordement horizontal sur la LP : coupe au niveau racine (html via :has + body), en clip de preference (pas de nouveau conteneur de scroll, plus sur avec le pin GSAP), hidden en repli. */ html:has(body.fp-lancement) { overflow-x: hidden; overflow-x: clip; } body.fp-lancement { background: var(--fp-paper); overflow-x: hidden; overflow-x: clip; /* Titres de la LP : Bebas Neue Pro (kit Adobe Fonts, minuscules disponibles, Bold = 600), repli sur la Bebas standard du theme (caps uniquement). */ --lp-font-titres: "bebas-neue-pro", var(--fp-font-heading), sans-serif; } .fp-lp { overflow-x: hidden; } .fp-lp section { position: relative; } /* — Reveal au scroll (meme mecanique que main.css/.fp-anim-h : etat « arme » sans transition le temps d'un frame, pour eviter tout flash de disparition du contenu deja peint). Etat par defaut = VISIBLE (page lisible sans JS). — */ .fp-lp-reveal { opacity: 1; transform: none; transition: opacity var(--fp-anim-dur) var(--fp-anim-ease), transform var(--fp-anim-dur) var(--fp-anim-ease); will-change: opacity, transform; } body.fp-lp-armed .fp-lp-reveal { opacity: 0; transform: translateY(26px); } body.fp-lp-armed.fp-lp-noanim .fp-lp-reveal { transition: none; } /* La revelation doit BATTRE l'armement body.fp-lp-armed ... (specificite superieure a cause du type body) : on scope la regle sur le meme body. */ body.fp-lp-armed .fp-lp-reveal.is-in, .fp-lp-reveal.is-in { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { .fp-lp-reveal, body.fp-lp-armed .fp-lp-reveal { opacity: 1; transform: none; transition: none; } } /* ========================================================================== HERO ========================================================================== */ /* Hero cale au pixel sur la maquette XD (calibrage par injection Playwright a 1332x688, le format de l'artboard) : marque EN HAUT, accroche a ~52% de la hauteur, bloc Decouvrez compact en bas, fleche au ras. Ratio de la maquette (~1.94) plafonne a l'ecran ; AUCUNE teinte verte dans le voile (image quasi brute, ombres portees sur les textes pour la lisibilite). */ .fp-lp-hero { position: relative; display: flex; align-items: stretch; /* Plafond 88svh : le debut de la section suivante depasse toujours sous le hero, meme sur ecran large (demande client). */ height: clamp(600px, 51.7vw, 88svh); overflow: hidden; padding: clamp(26px, 5.6vh, 44px) 0 clamp(18px, 4vh, 30px); color: var(--fp-white); } .fp-lp-hero-media { position: absolute; inset: 0; z-index: 0; overflow: hidden; } .fp-lp-hero-img { width: 100%; height: 100%; object-fit: cover; transform-origin: center; animation: fp-lp-kenburns 22s ease-in-out infinite alternate; } /* Video Vimeo de fond (si un embed Vimeo est pose dans la page Gutenberg) : couvre le hero quel que soit son ratio ; l'affiche reste visible dessous le temps du chargement. */ .fp-lp-hero-video-tag { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .fp-lp-hero-video { position: absolute; top: 50%; left: 50%; width: max(100%, calc(88svh * 1.7778)); height: max(88svh, 56.25vw); transform: translate(-50%, -50%); border: 0; pointer-events: none; } @keyframes fp-lp-kenburns { from { transform: scale(1); } to { transform: scale(1.12); } } .fp-lp-hero-overlay { position: absolute; inset: 0; z-index: 1; /* Vignette laterale facon maquette, renforcee partout a la demande du client (cotes ET centre, meme rapport de contraste). */ background: linear-gradient(90deg, rgba(0, 0, 0, .72) 0%, rgba(0, 0, 0, .12) 42%, rgba(0, 0, 0, .12) 58%, rgba(0, 0, 0, .72) 100%), linear-gradient(180deg, rgba(0, 0, 0, .14) 0%, rgba(0, 0, 0, .05) 30%, rgba(0, 0, 0, .16) 100%); } .fp-lp-hero-inner { position: relative; z-index: 2; text-align: center; display: flex; flex-direction: column; align-items: center; height: 100%; justify-content: flex-start; } .fp-lp-hero-brand { margin-bottom: 0; text-shadow: 0 2px 16px rgba(0, 0, 0, .45); } .fp-lp-hero-logo { font-family: var(--fp-font-display); font-weight: 400; text-transform: uppercase; letter-spacing: .015em; line-height: .95; margin: 0; font-size: clamp(3.2rem, 7.9vw, 7rem); } .fp-lp-hero-loc { font-family: var(--fp-font-body); font-weight: 700; letter-spacing: .04em; text-transform: uppercase; font-size: clamp(1rem, 1.72vw, 1.55rem); line-height: 1.2; margin: clamp(-12px, -0.6vw, -4px) 0 0; } /* margin-top auto : cale l'accroche juste au-dessus du bloc Decouvrez (lui-meme pousse vers le bas), ce qui la place a ~52% comme sur la maquette. */ .fp-lp-hero-tagline { display: flex; flex-direction: column; gap: 0; /* Specs XD 70px/84px base 1920 (3.646vw), reduite deux fois a la demande du client. */ font-family: var(--lp-font-titres); font-weight: 600; font-size: clamp(1.55rem, 3.22vw, 3.9rem); line-height: 1.2; letter-spacing: 0; color: var(--fp-white); max-width: none; margin: auto 0 0; text-shadow: 0 2px 14px rgba(0, 0, 0, .5); } .fp-lp-hero-discover { margin-top: clamp(30px, 6.4vh, 46px); max-width: none; text-shadow: 0 1px 10px rgba(0, 0, 0, .5); } .fp-lp-hero-discover-eyebrow { font-size: 1.12rem; letter-spacing: .02em; text-transform: none; opacity: 1; margin: 0; } .fp-lp-hero-discover-brand { font-family: var(--fp-font-display); text-transform: uppercase; font-size: clamp(2.1rem, 4.2vw, 3.7rem); line-height: .95; margin: 0 0 4px; letter-spacing: .01em; } .fp-lp-hero-discover-text { font-size: clamp(1.15rem, 1.5vw, 1.4rem); opacity: 1; margin: 0; } .fp-lp-hero-arrow { display: inline-flex; margin-top: clamp(10px, 2.4vh, 18px); color: var(--fp-white); filter: drop-shadow(0 1px 6px rgba(0, 0, 0, .45)); } .fp-lp-hero-arrow svg { width: 24px; height: 44px; animation: fp-lp-bounce 2.2s ease-in-out infinite; } @keyframes fp-lp-bounce { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(8px); } } @media (prefers-reduced-motion: reduce) { .fp-lp-hero-img { animation: none; } .fp-lp-hero-arrow svg { animation: none; } } /* Panneau « Découvrez » mobile : n'existe qu'en petit ecran (voir template), sur --lp-vert comme le panneau rendez-vous desktop. */ .fp-lp-discover-mobile { display: none; } @media (max-width: 720px) { /* Hero plein ecran : marque collee en haut, accroche collee en bas (le margin-top auto de la tagline fait le grand ecart), bloc Decouvrez et fleche sortis du hero. */ .fp-lp-hero { height: 100vh; height: 100svh; min-height: 0; padding: 24px 0 30px; } .fp-lp-hero-discover, .fp-lp-hero-arrow { display: none; } .fp-lp-discover-mobile { display: block; background: var(--lp-vert, var(--fp-secondary)); color: var(--fp-white); text-align: center; padding: 46px 0 50px; } } @media (max-width: 640px) { .fp-lp-gallery-grid { grid-template-columns: 1fr; } .fp-lp-gallery-item--s, .fp-lp-gallery-item--m, .fp-lp-gallery-item--l { height: 56vw; } } /* ========================================================================== ON SE RETROUVE OU ? (panneau plein, teinte --lp-vert, entre hero et bandes) ========================================================================== */ /* Specs XD copiees par le client : panneau 284px sur base 1920 (14.8vw), fond 014C45, les DEUX lignes en Bebas Neue Pro Bold 55px/80px menthe. */ .fp-lp-rdv { background: var(--lp-vert, var(--fp-secondary)); color: var(--fp-white); text-align: center; min-height: clamp(180px, 14.8vw, 300px); display: flex; flex-direction: column; justify-content: center; padding: 24px 0; } .fp-lp-rdv-q, .fp-lp-rdv-a { font-family: var(--lp-font-titres); font-weight: 600; font-size: clamp(1.6rem, 2.865vw, 3.44rem); line-height: 1.45; color: var(--fp-white); margin: 0; } @media (max-width: 720px) { /* Mobile : le panneau passe sur le fond menthe de la galerie, textes en vert fonce pour le contraste (demande client). */ .fp-lp-rdv { background: var(--lp-menthe, var(--fp-accent)); } .fp-lp-rdv-q, .fp-lp-rdv-a { color: var(--lp-vert-fonce, var(--fp-secondary-dark)); } } /* ========================================================================== BANDES PARALLAXE ========================================================================== */ /* Mode rideau (classe posee par lancement.js) : le conteneur ne fait plus que la hauteur d'UNE bande, en CSS pur (aucune mesure JS : resilient aux reload en fond de page et aux resize). */ .fp-lp-bands--stack { position: relative; overflow: hidden; height: clamp(300px, 24.5vw, 500px); } /* position:relative OBLIGATOIRE : sans lui, chaque .fp-lp-band-media (absolute) se refere au conteneur .fp-lp-bands entier : les 4 images s'empilent sur toute la zone et echappent au clipping (constate en prod : cocktails partout). */ /* Modele valide par le client sur la bande billards (specs XD copiees par lui : bande 1920x518, textes a left 150px = 7.8vw, couleur bddad5), applique aux 4 bandes : APLAT vert pleine bande, image sur la partie DROITE seulement (elle n'est plus etiree sur toute la largeur), fondu vert -> image par-dessus son bord gauche, bloc texte a gauche vers le bas. */ .fp-lp-band { position: relative; min-height: clamp(300px, 24.5vw, 500px); display: flex; align-items: center; overflow: hidden; color: var(--fp-white); /* Vert fonce des bandes (demande client : 012f29), distinct du panneau « On se retrouve ou ? » qui reste sur --lp-vert. */ background: var(--lp-vert-fonce, var(--fp-secondary-dark)); } /* Zone image calee sur la maquette : l'image ne devient nette qu'a ~41% de la bande (aplat large + fondu long), elle ne couvre jamais la partie gauche. */ .fp-lp-band-media { position: absolute; top: 0; bottom: 0; left: 34%; right: 0; overflow: hidden; z-index: 0; } .fp-lp-band-img { position: absolute; left: 0; top: -5%; width: 100%; height: 112%; object-fit: cover; will-change: transform; } /* Fondu de transition aplat -> image, cale sur la zone de l'image. */ .fp-lp-band-overlay { position: absolute; top: 0; bottom: 0; left: 34%; right: 0; z-index: 1; background: linear-gradient(90deg, var(--lp-vert-fonce, var(--fp-secondary-dark)) 0%, color-mix(in srgb, var(--lp-vert-fonce, var(--fp-secondary-dark)) 55%, transparent) 10%, transparent 22%); } /* Ombre portee des bandes qui recouvrent (l'ombre depasse du bord haut : visible sur la bande du dessous pendant la montee, sort du cadre au repos). */ .fp-lp-band + .fp-lp-band { box-shadow: 0 -18px 44px rgba(0, 0, 0, .45); } /* Toujours AU-DESSUS de l'image et du fondu. */ .fp-lp-band-content { position: relative; z-index: 2; width: 100%; max-width: none; margin: 0; align-self: flex-end; padding: 0 24px clamp(28px, 3.65vw, 70px) clamp(24px, 7.8vw, 150px); } /* Cadrage propre a la bande billards : logo Magic Parc au mur en entier (la photo est cadree vers sa tranche haute). */ .fp-lp-band:first-of-type .fp-lp-band-img { object-position: 85% 58%; } /* Titre en Bebas Neue Pro casse mixte, taille specs XD (55px sur base 1920), grand espace avant le texte (reference client de la bande billards). text-transform none : neutralise l'uppercase global des h3 du theme (main.css) qui ecrasait la casse mixte de la Pro. */ .fp-lp-band-title { font-family: var(--lp-font-titres); font-weight: 600; text-transform: none; font-size: clamp(1.8rem, 2.865vw, 3.44rem); color: var(--fp-white); margin: 0 0 clamp(20px, 2.5vw, 48px); max-width: 40ch; } /* Corps aux specs XD : Aeonik Medium 22px/26px sur 434px, couleur menthe. */ .fp-lp-band-text { font-size: clamp(1rem, 1.146vw, 1.375rem); line-height: 1.18; color: var(--fp-white); opacity: 1; margin: 0; max-width: 28ch; } @media (max-width: 720px) { /* Mobile (demande client) : bande plein ecran, image seule sur ~75svh SANS degrade, titre + texte sur un aplat pleine largeur sous l'image, aplat sur --lp-vert comme le premier panneau apres le hero. */ /* dvh cible sur le TEXTE (demande client) : la bande suit la hauteur dynamique de l'ecran (100dvh), l'image garde une hauteur STABLE (75svh, elle ne respire pas quand la barre d'adresse bouge) et c'est la zone de texte (flex 1) qui absorbe la difference : le titre et le texte restent toujours lisibles, cales contre le fond visible de l'ecran. */ .fp-lp-band { min-height: 0; height: 100vh; height: 100dvh; flex-direction: column; align-items: stretch; background: var(--lp-vert, var(--fp-secondary)); } .fp-lp-band-media { position: relative; top: auto; bottom: auto; left: auto; right: auto; width: 100%; height: 75vh; height: 75svh; flex: 0 0 auto; } .fp-lp-band-img { top: 0; height: 100%; } .fp-lp-band-overlay { display: none; } .fp-lp-band-content { flex: 1 1 auto; align-self: stretch; display: flex; flex-direction: column; justify-content: center; padding: 16px 20px 20px; } .fp-lp-band-title { font-size: clamp(1.4rem, 6vw, 1.8rem); margin: 0 0 10px; max-width: none; } .fp-lp-band-text { max-width: none; line-height: 1.25; } /* Mode rideau : le conteneur fait la hauteur d'UNE bande plein ecran. */ .fp-lp-bands--stack { height: 100vh; height: 100dvh; } } /* Voile de focus pendant le rideau : assombrit hero + panneau (figes) pour guider l'oeil vers les bandes qui bougent. Opacite animee par lancement.js. */ .fp-lp-stage { position: relative; } .fp-lp-stage-veil { position: absolute; inset: 0; background: rgba(0, 0, 0, 1); opacity: 0; pointer-events: none; z-index: 3; } /* Lueur automatique sur les grandes photos : jouee une fois, une seconde apres l'apparition du bloc (classe is-in du reveal). */ .fp-lp-ici-photo, .fp-lp-resto-photo { position: relative; overflow: hidden; border-radius: clamp(28px, 2.9vw, 56px); } .fp-lp-ici-photo::after, .fp-lp-resto-photo::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(115deg, transparent 32%, rgba(255, 255, 255, .34) 50%, transparent 68%); transform: translateX(-130%); } .fp-lp-ici-photo.is-in::after, .fp-lp-resto-photo.is-in::after { animation: fp-lp-shine 1.1s ease 1s 1 both; } @keyframes fp-lp-shine { from { transform: translateX(-130%); } to { transform: translateX(130%); } } @media (prefers-reduced-motion: reduce) { .fp-lp-ici-photo.is-in::after, .fp-lp-resto-photo.is-in::after { animation: none; } } /* ========================================================================== PANNEAU CITATION (plein vert fonce) ========================================================================== */ /* Specs XD copiees par le client : panneau 302px sur base 1920 (15.7vw), fond 014C45 (plus le vert tres fonce), Bebas Neue Pro Bold 55px/80px menthe casse mixte, phrase sur ~800px. */ .fp-lp-citation-section { background: var(--lp-vert, var(--fp-secondary)); min-height: clamp(200px, 15.7vw, 320px); display: flex; align-items: center; padding: 24px 0; } .fp-lp-citation { color: var(--fp-white); text-align: center; font-family: var(--lp-font-titres); font-weight: 600; text-transform: none; line-height: 1.45; letter-spacing: 0; font-size: clamp(1.6rem, 2.865vw, 3.44rem); /* Largeur calee pour que la 1re ligne coure jusqu'a "belles," (bascule mesuree entre 950 et 1100px a 1920) ; police et largeur en vw : la coupure suit. */ max-width: clamp(300px, 60vw, 1150px); margin: 0 auto; } @media (max-width: 720px) { .fp-lp-citation-section { padding: 64px 0; } } /* ========================================================================== « C'EST ICI » + CARTE 5 COLONNES ========================================================================== */ /* Specs XD copiees par le client : puce teal radius 16 (Bebas Pro 25px menthe, icone localisation), icone SOON 301px, titre Bebas Pro Bold en vert tres fonce (002F29 = token secondary-dark), corps Aeonik 22px/26px, photo a droite radius 56. Fond de section blanc. */ .fp-lp-ici { padding: 96px 0 0; } .fp-lp-ici-grid { display: grid; grid-template-columns: 1fr 1.18fr; gap: clamp(28px, 5.5vw, 106px); align-items: center; margin-bottom: 72px; } .fp-lp-ici-puce { display: inline-flex; align-items: center; gap: 7px; background: var(--fp-primary); border-radius: 16px; padding: 8px 26px; margin: 0 0 14px; font-family: var(--lp-font-titres); font-weight: 600; text-transform: uppercase; font-size: clamp(.9rem, 1.05vw, 1.25rem); line-height: 1.2; color: var(--fp-white); } img.fp-lp-ici-puce-ico { width: auto; height: clamp(16px, 1.25vw, 24px); display: block; } .fp-lp-ici-soon { display: block; width: clamp(100px, 8vw, 150px); height: clamp(36px, 3.2vw, 60px); object-fit: contain; object-position: left center; margin: 6px 0 10px; } .fp-lp-ici-title-l1, .fp-lp-ici-title-l2 { display: block; } .fp-lp-ici-title { font-family: var(--lp-font-titres); text-transform: none; font-weight: 600; font-size: clamp(1.8rem, 2.6vw, 3.1rem); line-height: 1.12; color: var(--fp-secondary-dark); max-width: none; margin-bottom: 22px; } .fp-lp-ici-text p:not(.fp-lp-ici-puce) { color: var(--fp-secondary-dark); font-size: clamp(1rem, 1.146vw, 1.375rem); line-height: 1.35; max-width: clamp(320px, 35.5vw, 682px); } .fp-lp-ici-strong { color: var(--fp-secondary-dark); font-weight: 800; text-transform: uppercase; } .fp-lp-ici-photo img { width: 100%; height: 100%; min-height: 320px; aspect-ratio: 833 / 556; object-fit: cover; border-radius: clamp(28px, 2.9vw, 56px); } @media (max-width: 900px) { .fp-lp-ici-grid { grid-template-columns: 1fr; gap: 28px; } .fp-lp-ici-photo { order: -1; } } /* Specs XD : carte 1620x348 sur base 1920, fond primary, radius 55, cinq colonnes reparties (icones ~110px de haut, titres Bebas Pro 42px menthe, corps Aeonik 22px menthe centres). */ .fp-lp-card-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 0; background: var(--fp-primary); border-radius: clamp(32px, 2.86vw, 55px); padding: clamp(24px, 1.6vw, 30px) clamp(16px, 2vw, 40px) clamp(28px, 2.2vw, 44px); color: var(--fp-white); } /* Pas de separateurs verticaux : la maquette n'en a pas. */ .fp-lp-card { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 0 16px; } .fp-lp-card-icon-wrap { display: flex; align-items: center; justify-content: center; height: 64px; margin-bottom: 18px; } .fp-lp-card-icon { display: block; width: clamp(90px, 10vw, 190px); height: clamp(42px, 4vw, 76px); object-fit: contain; } body.fp-lp-armed .fp-lp-card-icon { clip-path: inset(100% 0 0 0); transition: clip-path 1.6s var(--fp-anim-ease); } body.fp-lp-armed.fp-lp-noanim .fp-lp-card-icon { transition: none; } body.fp-lp-armed .fp-lp-card-icon.is-in, .fp-lp-card-icon.is-in { clip-path: inset(0 0 0 0); } @media (prefers-reduced-motion: reduce) { .fp-lp-card-icon { clip-path: none; transition: none; } } .fp-lp-card-title { font-family: var(--lp-font-titres); font-weight: 600; text-transform: none; font-size: clamp(1.25rem, 2.05vw, 2.45rem); line-height: 1.2; margin: 0 0 10px; color: var(--fp-white); } .fp-lp-card-count { font-variant-numeric: tabular-nums; } .fp-lp-card-text { font-family: var(--fp-font-body); font-weight: 400; font-size: clamp(.85rem, .95vw, 1.15rem); line-height: 1.3; opacity: 1; margin: 0; max-width: 24ch; color: var(--fp-white); } @media (max-width: 980px) { .fp-lp-card-grid { grid-template-columns: repeat(2, 1fr); row-gap: 40px; border-radius: 28px; padding: 40px 24px; } } @media (max-width: 560px) { .fp-lp-card-grid { grid-template-columns: 1fr; } .fp-lp-card { padding-bottom: 8px; } } /* ========================================================================== GALERIE (maconnerie) + VISIONNEUSE ========================================================================== */ .fp-lp-gallery { background: var(--lp-menthe, var(--fp-accent)); padding: 64px 0 96px; margin-top: 80px; } /* Maconnerie de la maquette : 3 colonnes (522px sur base 1920), gap 28px, hauteurs S/M/L (329/458/578) en permutation par colonne : les trois colonnes finissent au meme niveau. Images en cover, peu importe leurs dimensions. */ .fp-lp-gallery-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(14px, 1.46vw, 28px); } .fp-lp-gallery-col { display: flex; flex-direction: column; gap: clamp(14px, 1.46vw, 28px); } /* Apparition adoucie des tuiles (retour client) : la transition applicable est celle de l'etat CIBLE : longue et douce sur .is-in (l'apparition), courte au survol (le lift reste reactif ; le retour de survol, doux, repasse en long). */ body.fp-lp-armed .fp-lp-gallery-item.fp-lp-reveal { transform: translateY(14px); } .fp-lp-gallery-item.fp-lp-reveal.is-in, .fp-lp-gallery-item { transition: opacity 1.15s cubic-bezier(.22, .61, .36, 1), transform 1.15s cubic-bezier(.22, .61, .36, 1); } .fp-lp-gallery-item:hover, .fp-lp-gallery-item:focus-visible { transition: transform .3s ease; } .fp-lp-gallery-item--s { height: clamp(150px, 17.14vw, 330px); } .fp-lp-gallery-item--m { height: clamp(210px, 23.85vw, 458px); } .fp-lp-gallery-item--l { height: clamp(265px, 30.1vw, 578px); } .fp-lp-gallery-item { position: relative; display: block; width: 100%; margin: 0; padding: 0; border: 0; background: none; cursor: pointer; border-radius: 0; overflow: hidden; line-height: 0; } .fp-lp-gallery-item:hover, .fp-lp-gallery-item:focus-visible { transform: translateY(-4px); } /* Lueur qui traverse l'image au survol. */ .fp-lp-gallery-item::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(115deg, transparent 32%, rgba(255, 255, 255, .32) 50%, transparent 68%); transform: translateX(-130%); transition: none; } .fp-lp-gallery-item:hover::after, .fp-lp-gallery-item:focus-visible::after { transform: translateX(130%); transition: transform .8s ease; } .fp-lp-gallery-item img { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: 0; transition: transform .5s ease; } .fp-lp-gallery-item:hover img, .fp-lp-gallery-item:focus-visible img { transform: scale(1.045); } @media (prefers-reduced-motion: reduce) { .fp-lp-gallery-item, .fp-lp-gallery-item img { transition: none; } .fp-lp-gallery-item:hover, .fp-lp-gallery-item:focus-visible { transform: none; } .fp-lp-gallery-item:hover img, .fp-lp-gallery-item:focus-visible img { transform: none; } } @media (max-width: 900px) { .fp-lp-gallery-grid { columns: 2 220px; } } @media (max-width: 560px) { .fp-lp-gallery-grid { columns: 1; } } .fp-lp-lightbox { position: fixed; inset: 0; z-index: 1000; display: flex; align-items: center; justify-content: center; padding: 24px; } .fp-lp-lightbox[hidden] { display: none; } .fp-lp-lightbox-backdrop { position: absolute; inset: 0; background: color-mix(in srgb, var(--fp-dark) 85%, transparent); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); } .fp-lp-lightbox-dialog { position: relative; z-index: 1; display: flex; align-items: center; gap: 18px; max-width: 100%; } .fp-lp-lightbox-figure { margin: 0; display: flex; flex-direction: column; align-items: center; gap: 12px; } .fp-lp-lightbox-img { max-width: min(80vw, 1100px); max-height: 78vh; border-radius: 14px; object-fit: contain; } .fp-lp-lightbox-count { color: var(--fp-white); font-size: .85rem; opacity: .85; } .fp-lp-lightbox-close { position: absolute; top: -52px; right: 0; width: 42px; height: 42px; border-radius: 50%; background: color-mix(in srgb, var(--fp-white) 14%, transparent); color: var(--fp-white); border: 1px solid color-mix(in srgb, var(--fp-white) 30%, transparent); display: flex; align-items: center; justify-content: center; cursor: pointer; } .fp-lp-lightbox-prev, .fp-lp-lightbox-next { flex: 0 0 auto; width: 48px; height: 48px; border-radius: 50%; cursor: pointer; background: color-mix(in srgb, var(--fp-white) 14%, transparent); color: var(--fp-white); border: 1px solid color-mix(in srgb, var(--fp-white) 30%, transparent); display: flex; align-items: center; justify-content: center; } .fp-lp-lightbox-prev:hover, .fp-lp-lightbox-next:hover, .fp-lp-lightbox-close:hover { background: color-mix(in srgb, var(--fp-white) 26%, transparent); } .fp-lp-lightbox-prev svg, .fp-lp-lightbox-next svg { width: 20px; height: 20px; } @media (max-width: 720px) { .fp-lp-lightbox-dialog { flex-direction: column; gap: 12px; } .fp-lp-lightbox-prev, .fp-lp-lightbox-next { position: absolute; top: 50%; transform: translateY(-50%); } .fp-lp-lightbox-prev { left: 4px; } .fp-lp-lightbox-next { right: 4px; } .fp-lp-lightbox-close { top: 4px; right: 4px; } } /* ========================================================================== RESTAURATION ========================================================================== */ .fp-lp-resto { padding: 96px 0; } .fp-lp-resto-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; } .fp-lp-resto-on { display: block; width: 72px; height: 50px; object-fit: contain; object-position: left center; margin: 0 0 8px; } .fp-lp-resto-text h2 { font-family: var(--lp-font-titres); font-weight: 600; text-transform: none; font-size: clamp(1.8rem, 2.865vw, 3.44rem); line-height: 1.2; color: var(--fp-secondary-dark); margin-bottom: 18px; } .fp-lp-resto-text p:not(.fp-lp-chip) { color: var(--fp-secondary-dark); font-family: var(--fp-font-body); font-weight: 500; font-size: clamp(.95rem, 1.05vw, 1.26rem); line-height: 1.3; max-width: clamp(320px, 35.5vw, 682px); } .fp-lp-resto-photo img { width: 100%; height: 100%; min-height: 340px; aspect-ratio: 833 / 528; object-fit: cover; border-radius: clamp(28px, 2.9vw, 56px); } @media (max-width: 900px) { .fp-lp-resto-grid { grid-template-columns: 1fr; gap: 28px; } .fp-lp-resto-photo { order: -1; } } /* ========================================================================== CARTE FINALE / CTA (rose local, pose en inline sur ) ========================================================================== */ .fp-lp-final { padding: 40px 0 96px; } /* Specs XD : carte 1620x539 base 1920, fond primary, radius 55. */ .fp-lp-final-inner { background: var(--fp-primary); color: var(--fp-white); border-radius: clamp(32px, 2.86vw, 55px); min-height: clamp(360px, 28vw, 560px); justify-content: center; padding: 60px 40px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 22px; } .fp-lp-final-inner h2 { display: flex; flex-direction: column; gap: 0; margin: 0; } /* Ligne 1 en casse standard (retour client), BIENTOT reste en majuscules. */ .fp-lp-final-line1 { font-family: var(--lp-font-titres); font-weight: 600; text-transform: none; font-size: clamp(1.6rem, 2.865vw, 3.44rem); line-height: 1.45; } .fp-lp-final-line2 { font-family: var(--lp-font-titres); font-weight: 600; text-transform: uppercase; font-size: clamp(1.6rem, 2.865vw, 3.44rem); line-height: 1.45; } .fp-lp-final-inner p { font-family: var(--fp-font-body); font-weight: 400; font-size: clamp(1rem, 1.146vw, 1.375rem); line-height: 1.18; max-width: clamp(320px, 50.7vw, 974px); opacity: 1; margin: 0; } .fp-lp-final-pledge { font-weight: 600; } /* Specs XD : bouton rose FF7ABC exact (fidelite maquette assumee par le client), radius 16, ~77px de haut. */ .fp-lp-cta-btn { display: inline-flex; align-items: center; justify-content: center; margin-top: 10px; padding: 22px 46px; border-radius: 16px; background: var(--lp-rose-cta, var(--lp-rose)); color: var(--fp-white); font-family: var(--fp-font-heading); font-weight: 500; font-size: 1.05rem; text-transform: uppercase; letter-spacing: .04em; transition: transform .25s ease, box-shadow .25s ease, background .25s ease; } .fp-lp-cta-btn:hover { transform: translateY(-2px); background: color-mix(in srgb, var(--lp-rose) 55%, black); } @media (prefers-reduced-motion: reduce) { .fp-lp-cta-btn:hover { transform: none; } } @media (max-width: 720px) { .fp-lp-final-inner { padding: 52px 24px; border-radius: 28px; } } /* ========================================================================== FOOTER SPECIFIQUE LP ========================================================================== */ /* Specs XD : footer fond 014C45 (--lp-vert), 3 colonnes : adresse a gauche (icone localisation, Aeonik Medium 25/30), logo + tagline 30/36 + reseaux au centre (Facebook plus grand), contact a droite (bouton MENTHE radius 27, texte vert tres fonce). */ .fp-lp-footer { background: var(--lp-vert, var(--fp-secondary)); color: var(--fp-white); padding: 64px 0 0; } .fp-lp-footer-logo { font-family: var(--fp-font-display); text-transform: uppercase; font-weight: 400; font-size: clamp(2.6rem, 5.2vw, 6.25rem); line-height: 1; margin: 0; } .fp-lp-footer-tag { font-family: var(--fp-font-body); font-weight: 500; font-size: clamp(1.05rem, 1.56vw, 1.875rem); line-height: 1.2; opacity: 1; margin: 12px 0 0; } .fp-lp-footer-grid { display: grid; grid-template-columns: 1fr auto 1fr; align-items: start; gap: 32px; padding-bottom: 48px; border-bottom: 1px solid var(--fp-line-light); } .fp-lp-footer-col-adresse { display: flex; align-items: flex-start; gap: 14px; } .fp-lp-footer-col-adresse, .fp-lp-footer-col-contact { padding-top: clamp(40px, 6.25vw, 120px); } img.fp-lp-footer-pin { width: auto; height: clamp(26px, 1.95vw, 38px); display: block; } .fp-lp-footer-address { margin: 0; opacity: 1; font-weight: 400; font-size: clamp(1rem, 1.3vw, 1.56rem); line-height: 1.2; } .fp-lp-footer-globe { display: inline-flex; vertical-align: -2px; margin-right: 6px; } .fp-lp-footer-globe svg { width: clamp(13px, .9vw, 17px); height: auto; } .fp-lp-footer-col-centre { text-align: center; } .fp-lp-footer-socials { display: flex; gap: 18px; align-items: center; justify-content: center; margin-top: 26px; } .fp-lp-footer-social { display: inline-flex; align-items: center; justify-content: center; width: clamp(44px, 3vw, 58px); height: clamp(44px, 3vw, 58px); border: 1.5px solid var(--fp-white); border-radius: 50%; color: var(--fp-white); transition: transform .2s ease, opacity .2s ease; } .fp-lp-footer-social:hover { transform: translateY(-2px); opacity: .85; } .fp-lp-footer-social img { width: 46%; height: 46%; object-fit: contain; } .fp-lp-footer-col-contact { display: flex; flex-direction: column; align-items: flex-end; text-align: right; gap: 16px; } .fp-lp-footer-col-contact p { margin: 0; opacity: 1; font-weight: 400; font-size: clamp(1rem, 1.3vw, 1.56rem); line-height: 1.2; max-width: 18ch; } .fp-lp-footer-contact-btn { display: inline-flex; padding: 12px 32px; border-radius: 27px; background: var(--lp-menthe, var(--fp-accent)); color: var(--fp-secondary-dark); font-family: var(--fp-font-body); font-weight: 500; font-size: clamp(.95rem, 1.146vw, 1.375rem); text-transform: none; letter-spacing: 0; transition: transform .2s ease; } .fp-lp-footer-contact-btn:hover { transform: translateY(-2px); } @media (prefers-reduced-motion: reduce) { .fp-lp-footer-contact-btn:hover { transform: none; } } .fp-lp-footer-bottom-inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; padding: 20px 0; font-size: .85rem; opacity: .85; } .fp-lp-footer-bottom-inner p { margin: 0; } .fp-lp-footer-legal { display: flex; flex-wrap: wrap; gap: 6px 18px; } .fp-lp-footer-legal a:hover { opacity: .8; } @media (max-width: 720px) { .fp-lp-footer-grid { grid-template-columns: 1fr; gap: 36px; text-align: center; } .fp-lp-footer-col-adresse { text-align: center; } .fp-lp-footer-col-contact { align-items: center; text-align: center; } .fp-lp-footer-socials { justify-content: center; } .fp-lp-footer-bottom-inner { flex-direction: column; align-items: flex-start; } } /* Pilule Restauration : MEME visuel que la puce « Magic Parc - Rennaz (VD) » de la section c'est ici (majuscules Bebas Pro, blanc, radius 16, padding lateral genereux), icone blanche collee au texte. */ .fp-lp-chip { display: inline-flex; align-items: center; gap: 7px; background: var(--fp-primary); border-radius: 16px; padding: 8px 26px; margin: 0 0 14px; font-family: var(--lp-font-titres); font-weight: 600; text-transform: uppercase; font-size: clamp(.9rem, 1.05vw, 1.25rem); line-height: 1.2; color: var(--fp-white); } .fp-lp-chip-ico { width: auto; height: clamp(16px, 1.25vw, 24px); display: block; }