/* LIVIA static-mirror fixes * Layered on top of the mirrored WordPress output. Each block notes which * upstream issue it addresses. */ /* ─── HERO — logo (mascotte transparente + mot « LIVIA »). Desktop : WebP ANIMÉ (morphing mascotte↔LIVIA) en background. Mobile : iOS n'anime PAS le WebP animé (il fige la 1re frame) → on reproduit l'effet en CSS = 2 images fixes transparentes (mascotte + LIVIA) en cross-fade + léger flottement (le CSS, iOS le joue nativement). Le mot « Livia » reste en texte caché (.livia-sr) pour le SEO. */ .lv-logo { display: block; margin: 0 auto 16px; width: min(38vw, 380px); aspect-ratio: 1560 / 386; /* recadre les marges vides haut/bas */ position: relative; } /* Desktop : WebP animé en background (chargé UNIQUEMENT ici → pas de téléchargement sur mobile). translateX(-17%) recentre la mascotte (peinte ~17% à droite dans sa frame). */ @media (min-width: 768px) { .lv-logo { background: url(/wp-content/uploads/livia-logo.webp?v=3) no-repeat 50% 35% / cover; transform: translateX(-17%); } .lv-logo__still { display: none; } } /* Mobile : deux calques fixes empilés (mascotte + LIVIA) qui se croisent en fondu, + flottement du groupe. Chaque calque a son propre recentrage (la mascotte est ~17% à droite ; le mot LIVIA est déjà centré). */ @media (max-width: 767px) { .lv-logo { width: min(72vw, 320px); animation: lvLogoFloat 3.4s ease-in-out infinite; will-change: transform; } .lv-logo__still { position: absolute; inset: 0; background-repeat: no-repeat; background-position: 50% 35%; background-size: cover; } .lv-logo__still--mascot { background-image: url(/wp-content/uploads/livia-logo-static.webp?v=1); transform: translateX(-17%); animation: lvCrossMascot 7s ease-in-out infinite; } .lv-logo__still--livia { background-image: url(/wp-content/uploads/livia-logo-livia.webp?v=1); animation: lvCrossLivia 7s ease-in-out infinite; } } @keyframes lvLogoFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-7px); } } /* Cross-fade : mascotte ~0-45%, LIVIA ~55-95%, retour mascotte. */ @keyframes lvCrossMascot { 0%, 38% { opacity: 1; } 50%, 88% { opacity: 0; } 100% { opacity: 1; } } @keyframes lvCrossLivia { 0%, 38% { opacity: 0; } 50%, 88% { opacity: 1; } 100% { opacity: 0; } } @media (prefers-reduced-motion: reduce) { .lv-logo, .lv-logo__still { animation: none !important; } .lv-logo__still--livia { opacity: 0; } /* on garde la mascotte affichée */ } .livia-sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } /* ─── APERÇU IMAGE (lightbox) — clic sur l'image des onglets pour agrandir */ .lv-zoomable { cursor: zoom-in; } .lv-lightbox { position: fixed; inset: 0; z-index: 10000; display: flex; align-items: center; justify-content: center; padding: 4vmin; background: rgba(13, 15, 13, 0.82); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); opacity: 0; visibility: hidden; transition: opacity .28s ease, visibility .28s ease; } .lv-lightbox.is-open { opacity: 1; visibility: visible; } .lv-lightbox img { max-width: 94vw; max-height: 90vh; width: auto; height: auto; border-radius: 14px; box-shadow: 0 30px 80px rgba(0, 0, 0, .5); transform: scale(.94); transition: transform .3s cubic-bezier(.23, 1, .32, 1); cursor: zoom-out; } .lv-lightbox.is-open img { transform: scale(1); } .lv-lightbox__close { position: absolute; top: 22px; right: 26px; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .14); color: #fff; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; transition: background .2s ease; } .lv-lightbox__close:hover { background: rgba(255, 255, 255, .26); } .lv-lightbox__close svg { width: 22px; height: 22px; display: block; } /* ─── 1. NAVBAR — flotte au-dessus du hero, dégradé jusqu'au top ───── Nav en `position: fixed` pour qu'elle ne prenne pas de place dans le flux : le hero démarre à y=0 et son dégradé passe sous la nav. La nav est `uicore-transparent` au top (le dégradé apparaît à travers) puis bascule en backdrop blanc dès `.uicore-scrolled`. */ html, body { overflow-x: clip !important; overflow-y: visible !important; } html body .uicore-sticky.uicore-navbar, html body .uicore.uicore-navbar.uicore-sticky { position: fixed !important; top: 0 !important; left: 0 !important; right: 0 !important; width: 100% !important; } /* Le thème a une "smart sticky" qui ajoute `ui-hide` / `uicore-shrink` pour faire disparaître la nav au scroll-down. On le neutralise — sur la nav ELLE-MÊME ET sur le `.uicore-header-wrapper` interne (que le thème anime via `translateY(-35px)` pour escamoter le contenu). */ html body .uicore-sticky.uicore-navbar.ui-hide, html body .uicore-sticky.uicore-navbar.uicore-shrink, html body .uicore-navbar.ui-hide, html body .uicore-navbar.uicore-shrink, html body .uicore-sticky.uicore-navbar.ui-hide .uicore-header-wrapper, html body .uicore-sticky.uicore-navbar.uicore-shrink .uicore-header-wrapper, html body .uicore-navbar.ui-hide .uicore-header-wrapper, html body .uicore-navbar.uicore-shrink .uicore-header-wrapper { transform: none !important; opacity: 1 !important; visibility: visible !important; pointer-events: auto !important; } html body .uicore-sticky.uicore-navbar.ui-hide, html body .uicore-sticky.uicore-navbar.uicore-shrink, html body .uicore-navbar.ui-hide, html body .uicore-navbar.uicore-shrink { display: block !important; height: auto !important; min-height: 66px !important; } /* Double ligne sous la nav (mobile) — la nav se dimensionne sur `height: auto` + `min-height: 66px`, mais son `.uicore-header-wrapper` interne est laissé en `position: absolute` par le thème : hors du flux, il ne fait pas grandir la nav. Résultat sur mobile : wrapper = 86px, nav = 66px, donc le contenu du header déborde ~20px SOUS le fond « frosted » et sa hairline — ce qui se lit comme une deuxième ligne. On remet le wrapper dans le flux, la nav prend alors exactement la hauteur de son contenu à tous les breakpoints. */ html body .uicore-sticky.uicore-navbar .uicore-header-wrapper, html body .uicore.uicore-navbar.uicore-sticky .uicore-header-wrapper, html body .uicore-navbar.ui-hide .uicore-header-wrapper, html body .uicore-navbar.uicore-shrink .uicore-header-wrapper { position: relative !important; } /* z-index suffisant pour passer au-dessus du contenu sticky-bound. */ html body .uicore-sticky.uicore-navbar, html body .uicore.uicore-navbar.uicore-sticky { z-index: 9999 !important; transition: background 0.25s ease, backdrop-filter 0.25s ease, box-shadow 0.25s ease !important; } /* Top de page : nav transparente, le dégradé du hero passe à travers. */ html body .uicore-sticky.uicore-navbar.uicore-transparent:not(.uicore-scrolled) { background: transparent !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; box-shadow: none !important; } /* Après scroll : backdrop blanc translucide pour contraster avec le contenu sombre des sections plus bas. Le thème ajoute `uicore-scrolled` au bon moment ; on n'a plus qu'à styler. */ html body .uicore-sticky.uicore-navbar.uicore-scrolled { /* Verre dépoli très léger : blanc nettement plus translucide (~62 %) + flou marqué, pour que l'arrière-plan transparaisse façon « frosted glass » plutôt qu'un bandeau blanc plein. Hairline discrète en bas pour définir la limite. */ background: rgba(255, 255, 255, 0.62) !important; backdrop-filter: blur(18px) saturate(160%) !important; -webkit-backdrop-filter: blur(18px) saturate(160%) !important; box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.05), 0 8px 30px rgba(0, 0, 0, 0.05) !important; } /* ─── HEADER PREMIUM — liens texte épurés + air autour du logo ────────── Le thème uicore enferme chaque entrée de menu dans une pastille bordée (border 1px + coin arrondi + point ::after). On retire tout ça pour ne garder que des liens texte élégants, avec un soulignement animé au survol. Scopé desktop (≥1025px) : sous ce seuil c'est le menu hamburger en overlay, qu'on ne veut pas toucher. */ @media (min-width: 1025px) { html body .uicore-navbar .uicore-menu > .menu-item > a { border: 0 !important; background: transparent !important; border-radius: 0 !important; padding: 8px 16px !important; color: #000 !important; font-weight: 400 !important; letter-spacing: 0.4px !important; position: relative; transition: color .25s ease, opacity .25s ease; } /* Le point rond du thème est recyclé en soulignement animé : une barre fine sous le libellé, masquée au repos (scaleX 0) et révélée au survol. */ html body .uicore-navbar .uicore-menu > .menu-item > a::after { content: "" !important; display: block !important; position: absolute; left: 16px; right: 16px; bottom: 2px; width: auto !important; height: 2px !important; border-radius: 2px; background: #7c6cf5 !important; transform: scaleX(0); transform-origin: left center; transition: transform .28s cubic-bezier(.23, 1, .32, 1) !important; } /* Aucun effet au survol sur les liens du menu : on neutralise tout soulignement éventuel du thème et on fige la couleur au survol. */ html body .uicore-navbar .uicore-menu > .menu-item > a::before { display: none !important; content: none !important; } html body .uicore-navbar .uicore-menu > .menu-item > a:hover, html body .uicore-navbar .uicore-menu > .menu-item > a:focus, html body .uicore-navbar .uicore-menu > .menu-item:hover > a { color: #000 !important; /* Neutralise TOUT l'effet de survol du thème : fond sombre, coin arrondi, soulèvement (translateY) et ombre. (.uicore-nav-menu .menu-item a:not(.uicore-btn):hover{background:#333; border-radius:0 0 20px 0;transform:translateY(-2px)}). */ background: transparent !important; box-shadow: none !important; border-radius: 0 !important; transform: none !important; } /* Au survol, le soulignement se déploie de gauche à droite. */ html body .uicore-navbar .uicore-menu > .menu-item > a:hover::after, html body .uicore-navbar .uicore-menu > .menu-item > a:focus::after, html body .uicore-navbar .uicore-menu > .menu-item:hover > a::after { transform: scaleX(1) !important; } /* Un peu plus d'air autour du logo. */ html body .uicore-navbar .uicore-branding { padding-left: 8px !important; padding-right: 40px !important; } } /* ─── COOKIES BANNER ─────────────────────────────────────────────── */ #livia-cookie-banner{position:fixed;left:14px;right:14px;bottom:14px;z-index:10001;background:rgba(20,20,20,.96);color:#f7f5f5;border-radius:14px;backdrop-filter:blur(8px);box-shadow:0 12px 40px rgba(0,0,0,.25);max-width:760px;margin:0 auto} #livia-cookie-banner .lcb-inner{padding:18px 22px;display:flex;flex-direction:column;gap:14px} #livia-cookie-banner p{margin:0;font:400 14px/1.5 "STKBureauSans - Medium",sans-serif;color:#e7e3da} #livia-cookie-banner a{color:#b5adfc;text-decoration:underline} #livia-cookie-banner .lcb-btns{display:flex;gap:10px;justify-content:flex-end;flex-wrap:wrap} #livia-cookie-banner button{font:400 13px/1 "STKBureauSans - Medium",sans-serif;text-transform:uppercase;letter-spacing:.5px;padding:11px 18px;border:0;border-radius:0 0 8px 0;cursor:pointer;transition:background .35s ease,border-radius .35s ease,transform .35s ease;display:inline-flex;align-items:center;gap:8px} #livia-cookie-banner button::after{content:"";width:5px;height:5px;border-radius:50%;background:currentColor} #livia-cookie-banner .lcb-refuse{background:transparent;color:#f7f5f5;border:1px solid rgba(255,255,255,.3)} #livia-cookie-banner .lcb-refuse:hover{background:rgba(255,255,255,.06)} #livia-cookie-banner .lcb-accept{background:#b5adfc;color:#0d0f0d} #livia-cookie-banner .lcb-accept:hover{background:#a298f7;border-radius:0 0 18px 0} @media (min-width:560px){#livia-cookie-banner .lcb-inner{flex-direction:row;align-items:center}#livia-cookie-banner p{flex:1}} /* Liens légaux + crédit Peechy injectés sous le copyright Elementor. Plus de bandeau noir : on hérite du fond du footer existant. */ #livia-legal-links{margin-top:14px;display:flex;flex-direction:column;gap:10px;align-items:center;font:400 13px/1.5 "STKBureauSans - Medium",sans-serif} #livia-legal-links .llf-links{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:6px 14px} #livia-legal-links a{color:inherit;text-decoration:underline;white-space:nowrap;opacity:.75;transition:opacity .2s ease} #livia-legal-links a:hover{opacity:1} #livia-legal-links button{background:none;border:0;color:inherit;cursor:pointer;font:inherit;text-decoration:underline;padding:0;opacity:.75;transition:opacity .2s ease} #livia-legal-links button:hover{opacity:1} /* Mobile : zone tactile agrandie (~40px) sur les liens légaux (défaut ~20px) */ @media (max-width: 767px){#livia-legal-links a,#livia-legal-links button{padding:10px 4px}} #livia-legal-links .llf-credit{font-size:12px;letter-spacing:.2px;opacity:.7} #livia-legal-links .llf-heart{color:#ff5577;font-size:13px;margin:0 2px;display:inline-block;animation:llf-pulse 1.6s ease-in-out infinite;opacity:1} @keyframes llf-pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.18)}} /* ─── NAV — cacher "Témoignages" pour l'instant ───────────────────── */ .uicore-menu .menu-item-281, .uicore-menu .menu-item a[href$="#temoignages"], .uicore-menu a[aria-label*="émoignage" i], .uicore-mobile-menu-wrapper .menu-item-281 { display: none !important; } /* ─── 3. PAS DE REFLET HOVER ──────────────────────────────────────── The `.lv-cat` (FAQ category tabs) uses a `::before` linear-gradient that sweeps across on hover. Disable it. */ .lv-cat::before, .lv-cat:hover::before { content: none !important; display: none !important; background: none !important; transition: none !important; } /* ─── 4. MASCOTTE LIVIA EN PERMANENT (bonhomme bas-droite) ────────── The Livia picto lives inside `#elementor-popup-modal-1087`, a popup shown only on a trigger. We clone it into `#livia-mascot-fixed` (see _livia-fixes.js) and pin it to the bottom-right viewport corner. */ #livia-mascot-fixed { position: fixed; right: 28px; bottom: 28px; width: 84px; height: auto; z-index: 9002; cursor: pointer; user-select: none; filter: drop-shadow(0 6px 18px rgba(0, 0, 0, 0.18)); transition: transform 0.3s cubic-bezier(0.23, 1, 0.32, 1); } #livia-mascot-fixed:hover { transform: scale(1.12); } #livia-mascot-fixed:active { transform: scale(1.05); } @media (max-width: 768px) { #livia-mascot-fixed { width: 58px; right: 18px; bottom: 18px; } } /* ─── Hero : sous-titre — retours à la ligne maîtrisés sur mobile ──── La colonne (widget 4b7628a) est bridée à max-width:70% → ~210px, ce qui coupe les phrases n'importe où. Sur mobile on l'élargit (les lignes voulues font ~211–231px) et on force les retours via des
mobile-only. L'espace est placé AVANT le
→ sur desktop (br masqué) les espaces sont conservés. */ .lv-hero-br { display: none; } /*
mobile-only dans le titre « …équipe. Elle lui libère du temps. » pour garder « Elle lui libère du temps. » sur sa propre ligne (cf. bloc mobile). */ .lv-bz-br { display: none; } @media (max-width: 767px) { /* Elementor pose width:70% (classe __width-initial) → on passe en fit-content (largeur = plus longue ligne forcée, ~231px) plafonné, centré. */ .elementor-element-4b7628a { width: -moz-fit-content !important; width: fit-content !important; max-width: 92% !important; margin-left: auto !important; margin-right: auto !important; } .lv-hero-br { display: inline; } } /* ─── Popup "Posez moi une question" ─────────────────────────────── */ #livia-popup{position:fixed;right:0;bottom:24px;width:380px;height:360px;z-index:9001;opacity:0;transform:translateY(20px) scale(.94);transform-origin:bottom right;transition:opacity .25s,transform .3s cubic-bezier(.23,1,.32,1);pointer-events:none} #livia-popup.is-open{opacity:1;transform:none;pointer-events:auto} #livia-popup .lp-shape{position:absolute;inset:0;width:100%;height:100%;pointer-events:none} /* Contenu cadré dans le haut/gauche, pour ne pas déborder dans l'encoche en bas à droite de la bulle. Typos et bouton alignés sur les conventions du site (STKBureauSans Medium, weight 400, button .uicore-btn). */ #livia-popup .lp-content{position:absolute;inset:0;padding:38px 38px 0 38px;display:flex;flex-direction:column;justify-content:flex-start;gap:14px;width:72%} #livia-popup h3{margin:0;color:#4a4f00;font:400 17px/1.18 "RESERVATION WIDE BLOD ","RESERVATION WIDE BOLD",sans-serif;letter-spacing:.02em;text-transform:uppercase;white-space:nowrap} #livia-popup input,#livia-popup textarea{background:transparent;border:0;outline:0;padding:6px 0;color:#4a4f00;font:400 15px/1.4 "STKBureauSans - Medium","STKBureauSans",sans-serif;width:100%;resize:none} #livia-popup input::placeholder,#livia-popup textarea::placeholder{color:#4a4f00;opacity:.78} /* Bouton COMMENCER — réplique des CTA du site (.uicore-btn) : STKBureauSans Medium 15px / weight 400, padding 14px 20px, border-radius 0 0 8px 0 au repos → 0 0 20px 0 au hover, lavande #b5adfc. */ #livia-popup button{align-self:flex-start;background:#b5adfc;color:#f7f5f5;border:0;padding:14px 20px;border-radius:0 0 8px 0;font:400 15px/1 "STKBureauSans - Medium","STKBureauSans",sans-serif;letter-spacing:normal;text-transform:uppercase;cursor:pointer;display:inline-flex;align-items:center;gap:10px;transition:background .45s cubic-bezier(.23,1,.32,1),border-radius .45s cubic-bezier(.23,1,.32,1),transform .35s cubic-bezier(.23,1,.32,1),box-shadow .45s cubic-bezier(.23,1,.32,1)} #livia-popup button::after{content:"";display:inline-block;width:6px;height:6px;background:currentColor;border-radius:50%;flex-shrink:0;transition:transform .3s ease} #livia-popup button:hover{background:#333;color:#f7f5f5;border-radius:0 0 20px 0;transform:translateY(-2px);box-shadow:inset 0 1px 0 rgba(255,255,255,.12),inset 0 -1px 0 rgba(0,0,0,.18),0 8px 24px rgba(0,0,0,.12)} #livia-popup button:hover::after{transform:scale(1.3)} /* Retour d'envoi du formulaire « Posez-moi une question » : sans ça, le clic sur Envoyer ne produisait aucun signal visible pour l'utilisateur. */ #livia-popup button[disabled]{opacity:.55;cursor:default;pointer-events:none} #livia-popup .lp-status{margin:6px 0 0;min-height:1em;font:400 13px/1.35 "STKBureauSans - Medium","STKBureauSans",sans-serif;color:#4a4f00;opacity:.85} #livia-popup .lp-status[data-kind="ok"]{color:#4a4f00;opacity:1;font-weight:600} #livia-popup .lp-status[data-kind="err"]{color:#8a2b2b;opacity:1} #livia-popup .lp-close{position:absolute;top:46px;right:60px;z-index:5;width:32px;height:32px;padding:0;background:transparent;color:#4a4f00;border:0;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;transition:background .2s ease,transform .2s ease;align-self:auto;gap:0;text-transform:none;letter-spacing:normal;font-size:0;box-shadow:none} #livia-popup .lp-close::after{content:none;display:none} #livia-popup .lp-close svg{width:18px;height:18px;display:block} #livia-popup .lp-close:hover{background:rgba(74,79,0,.12);color:#4a4f00;border-radius:50%;transform:none;box-shadow:none} /* Mobile : bulle plus compacte (elle était trop grande → texte tassé en haut à gauche, beaucoup de vide). On garde la TAILLE du texte (validée client) et on rétrécit le cadre pour un rendu proportionnel. Ratio ~1.06 = ratio natif du SVG (159×150) → pas de distorsion de la bulle. */ @media(max-width:768px){#livia-popup{width:236px;height:222px;right:2px;bottom:14px}#livia-popup .lp-content{padding:24px 18px 40px;width:88%}#livia-popup h3{font-size:13.5px}#livia-popup textarea{font-size:14px}#livia-popup button{padding:12px 18px;font-size:14px}#livia-popup .lp-status{font-size:11.5px;margin-top:4px}#livia-popup .lp-close{top:24px;right:26px}} /* ─── 5. SECTION "LA SOLUTION" (remplace fourchette/pâtes) ────────── Phone mockup en background sticky + cartes blanches qui défilent par dessus en alternant gauche/droite. Inspiré du design Webflow livia-maquette.webflow.io/solution-option-1 */ /* Tuer le background image hérité du container bc429d6 (motion-fx Elementor) pour éviter la double-photo + le débordement sur les côtés. Et casser la padding 0 10px qui restreint la largeur. */ .elementor-element.elementor-element-bc429d6{ background-image:none !important; padding:0 !important; margin-top:-30px !important; max-width:100vw !important; width:100vw !important; margin-left:calc(50% - 50vw) !important; } .elementor-element.elementor-element-bc429d6 > .e-con-inner{padding:0 !important;max-width:none !important} .lv-sol{position:relative;width:100vw;margin-left:calc(50% - 50vw)} .lv-sol__bg{position:sticky;top:0;height:100vh;width:100%;overflow:hidden} .lv-sol__bg img{width:100%;height:100%;object-fit:cover;display:block} .lv-sol__overlay{position:relative;z-index:10;margin-top:-90vh;padding:0 0 100px;width:100%} .lv-sol__h{color:#b5adfc;text-align:center;margin:0 auto 100px;display:block;width:100vw;position:relative;left:50%;transform:translateX(-50%);font:700 140px/140px "STKBureauSans - Medium","STKBureauSans",Arial,sans-serif !important;letter-spacing:3px;text-transform:uppercase} .lv-sol__row{display:flex;align-items:center;margin-bottom:16px} .lv-sol__row--l{justify-content:flex-start;padding-left:140px} .lv-sol__row--r{justify-content:flex-end;padding-right:140px} .lv-sol__row--lo{justify-content:flex-start;padding-left:140px} .lv-sol__row--ro{justify-content:flex-end;padding-right:140px} .lv-sol__card{background:#dff299;border-radius:20px;padding:28px 32px;width:25vw;font:24px/30px "STKBureauSerif-Book","STKBureauSerif",Times,serif;color:#0d0f0d;box-shadow:0 2px 5px rgba(0,0,0,.2)} .lv-sol__card--lg{width:30vw} .lv-sol__card u{text-decoration:underline} .lv-sol__cta{display:flex;justify-content:center;margin-top:30px} .lv-sol__btn{display:inline-flex;align-items:center;gap:10px;background:#b5adfc;color:#f7f5f5;font:400 15px/1 "STKBureauSans - Medium","STKBureauSans",sans-serif;text-transform:uppercase;text-decoration:none;padding:14px 22px;border-radius:0 0 8px 0;transition:background .45s cubic-bezier(.23,1,.32,1),border-radius .45s cubic-bezier(.23,1,.32,1),transform .35s cubic-bezier(.23,1,.32,1),box-shadow .45s cubic-bezier(.23,1,.32,1);cursor:pointer} .lv-sol__btn::after{content:"";width:6px;height:6px;background:currentColor;border-radius:50%;flex-shrink:0;transition:transform .3s ease} .lv-sol__btn:hover{background:#333;color:#f7f5f5;border-radius:0 0 20px 0;transform:translateY(-2px);box-shadow:inset 0 1px 0 rgba(255,255,255,.12),inset 0 -1px 0 rgba(0,0,0,.18),0 8px 24px rgba(0,0,0,.12)} .lv-sol__btn:hover::after{transform:scale(1.3)} @media(max-width:768px){ .lv-sol__h{font-size:36px;margin-bottom:60px} .lv-sol__row,.lv-sol__row--l,.lv-sol__row--r,.lv-sol__row--lo,.lv-sol__row--ro{justify-content:center;padding:0 16px} .lv-sol__card,.lv-sol__card--lg{width:100%;max-width:480px;padding:24px;font-size:18px;line-height:26px} .lv-sol__overlay{margin-top:-50vh;padding-bottom:120px} } /* ───────────────── VERSION 2 (PREVIEW) : split screen 50/50 ───────────────── Affichée juste après la version originale pour comparaison cliente. */ .lv-sol2{ position:relative; width:100vw; margin-left:calc(50% - 50vw); display:flex; align-items:flex-start; background:url("/wp-content/uploads/2026/05/desktop_BG-scaled.webp") center / cover no-repeat; counter-reset:lvsol2; } .lv-sol2__label{ position:absolute; top:16px; left:16px; z-index:20; background:#0d0f0d; color:#fff; font:700 11px/1 "STKBureauSans - Medium","STKBureauSans",Arial,sans-serif; letter-spacing:1.5px; text-transform:uppercase; padding:6px 10px; border-radius:3px; } .lv-sol2__bg{position:sticky;top:0;flex:0 0 50%;width:50%;height:100vh;overflow:hidden} .lv-sol2__bg img{width:100%;height:100%;object-fit:cover;display:block} .lv-sol2__overlay{ position:relative;z-index:10;flex:0 0 50%;width:50%; padding:80px 56px;display:flex;flex-direction:column;gap:28px;box-sizing:border-box; } .lv-sol2__h{ color:#b5adfc;text-align:left;margin:0 0 24px; font:700 64px/64px "STKBureauSans - Medium","STKBureauSans",Arial,sans-serif; letter-spacing:2px;text-transform:uppercase; } .lv-sol2__row{display:block;margin:0;padding:0} .lv-sol2__card{ background:#dff299;border-radius:20px;padding:24px 28px 24px 72px;width:100%; box-sizing:border-box; font:22px/30px "STKBureauSerif-Book","STKBureauSerif",Times,serif;color:#0d0f0d; box-shadow:0 2px 5px rgba(0,0,0,.2);position:relative;counter-increment:lvsol2; } .lv-sol2__card::before{ content:counter(lvsol2,decimal-leading-zero); position:absolute;top:24px;left:24px; font:700 18px/1 "STKBureauSans - Medium","STKBureauSans",Arial,sans-serif; color:#0d0f0d;opacity:.45;letter-spacing:1px; } .lv-sol2__card u{text-decoration:underline} /* Variante "cartes blanches" — duplique la section avec un fond blanc doux à la place du vert fluo (#dff299). Pour comparaison cliente. */ .lv-sol2--white .lv-sol2__h{font-size:88px;line-height:88px;text-align:center} .lv-sol2--white .lv-sol2__card{background:#ffffff;box-shadow:0 4px 16px rgba(0,0,0,.08)} .lv-sol2--white .lv-sol2__card::before{color:#0d0f0d;opacity:.35} .lv-sol2__cta{display:flex;justify-content:center;margin-top:auto;padding-top:24px} .lv-sol2__btn{ display:inline-flex;align-items:center;gap:10px;background:#b5adfc;color:#f7f5f5; font:400 15px/1 "STKBureauSans - Medium","STKBureauSans",sans-serif; text-transform:uppercase;text-decoration:none;padding:14px 22px;border-radius:0 0 8px 0; transition:background .45s cubic-bezier(.23,1,.32,1),border-radius .45s cubic-bezier(.23,1,.32,1),transform .35s cubic-bezier(.23,1,.32,1),box-shadow .45s cubic-bezier(.23,1,.32,1); cursor:pointer; } .lv-sol2__btn::after{content:"";width:6px;height:6px;background:currentColor;border-radius:50%;flex-shrink:0;transition:transform .3s ease} .lv-sol2__btn:hover{background:#333;color:#f7f5f5;border-radius:0 0 20px 0;transform:translateY(-2px);box-shadow:inset 0 1px 0 rgba(255,255,255,.12),inset 0 -1px 0 rgba(0,0,0,.18),0 8px 24px rgba(0,0,0,.12)} .lv-sol2__btn:hover::after{transform:scale(1.3)} @media(max-width:900px){ .lv-sol2{flex-direction:column} .lv-sol2__bg{flex:0 0 50vh;width:100%;height:50vh;position:relative} .lv-sol2__overlay{flex:1 1 auto;width:100%;padding:60px 24px 80px} .lv-sol2__h{font-size:48px;line-height:48px;text-align:center} .lv-sol2__card{padding:24px 24px 24px 64px;font-size:18px;line-height:26px} .lv-sol2__card::before{top:20px;left:20px} .lv-sol2__cta{justify-content:center} } /* ─── 6. PASSE MOBILE — réduit la taille des titres oversized ──────── Sur 375-768px, tous les H1/H2 en RESERVATION WIDE BLOD sont trop gros (36-40px) → ils débordent ou imposent des cassures à la chaîne. On les ramène à 26px et resserre l'interligne. */ .elementor-46 .elementor-element.elementor-element-a970bc5, .elementor-46 .elementor-element.elementor-element-a970bc5:not(.elementor-motion-effects-element-type-background) { padding-bottom: 30px !important; background-color: transparent !important; background-image: url("/wp-content/uploads/degrade-avant-3x.png") !important; background-size: cover !important; background-position: center !important; background-repeat: no-repeat !important; } /* Hero h1 LIVIA : décoller du header sur desktop. Le header est en position:fixed (~66px) + transparent au top, donc un padding faible laisse le titre apparaître sous la navbar. On garantit une marge suffisante pour que le H1 ne mange jamais le header transparent. */ html body .elementor-element-260c33d h1.elementor-heading-title { padding-top: 116px !important; margin-bottom: 26px !important; /* Titre hero : taille resserrée pour rester l'accroche dominante sans écraser le reste (tient sur une seule ligne en desktop large). */ font-size: clamp(26px, 3.5vw, 50px) !important; line-height: 1.08 !important; letter-spacing: 0.5px !important; text-wrap: balance; } /* "Toutes les demandes centralisées" — image de droite centrée dans son conteneur gris (au lieu d'être collée en haut/droite). On NE touche PAS à .elementor-element-e644f8a : le JS le cache via inline style:display:none — un !important ici l'écraserait. Le conteneur Elementor a un padding asymétrique (50px 0 50px 70px) qui décale le contenu vers la droite ; on le force symétrique. */ html body .elementor-46 .elementor-element.elementor-element-cbc716e { display: flex !important; align-items: center !important; justify-content: center !important; padding: 40px !important; } html body .elementor-46 .elementor-element.elementor-element-cbc716e .elementor-element-0333e89 { width: 100% !important; display: flex !important; align-items: center !important; justify-content: center !important; padding: 0 !important; } html body .elementor-46 .elementor-element.elementor-element-cbc716e .elementor-element-0333e89 img { display: block; margin: 0 auto; height: 360px !important; width: auto !important; max-width: 100% !important; object-fit: contain; border-radius: 14px; /* Dashboard mis en valeur : ombre profonde et douce → l'écran décolle de son panneau gris (impression qu'il flotte au-dessus de la page). */ box-shadow: 0 34px 64px -18px rgba(0, 0, 0, 0.52), 0 16px 30px -16px rgba(0, 0, 0, 0.42), 0 2px 6px rgba(0, 0, 0, 0.18); } /* Desktop : un peu plus grand + légère perspective + flottement subtil. (Scopé desktop pour ne pas faire déborder l'image plein écran sur mobile.) */ @media (min-width: 1025px) { html body .elementor-46 .elementor-element.elementor-element-cbc716e .elementor-element-0333e89 img { transform-origin: center 62%; animation: lv-dash-float 6.5s ease-in-out infinite; will-change: transform; } @keyframes lv-dash-float { 0%, 100% { transform: perspective(1700px) rotateX(5deg) scale(1.08) translateY(0); } 50% { transform: perspective(1700px) rotateX(5deg) scale(1.08) translateY(-12px); } } } @media (prefers-reduced-motion: reduce) and (min-width: 1025px) { html body .elementor-46 .elementor-element.elementor-element-cbc716e .elementor-element-0333e89 img { animation: none; transform: perspective(1700px) rotateX(5deg) scale(1.08); } } /* Mobile : les visuels de l'accordéon (reservation/dashboard/iphone) sont tous en PAYSAGE (ratios 1,2–1,5). Le cadre desktop height:360px + width auto les bride à ~235px de large avec object-fit:contain → grosses bandes vides. On repasse en largeur pleine + hauteur auto → chaque image s'affiche à son ratio naturel, sans letterbox. Padding du panneau resserré pour aérer. */ @media (max-width: 767px) { html body .elementor-46 .elementor-element.elementor-element-cbc716e { padding: 22px !important; } html body .elementor-46 .elementor-element.elementor-element-cbc716e .elementor-element-0333e89 img { height: auto !important; width: 100% !important; max-width: 100% !important; object-fit: contain; } } /* Hero — aérer titre / paragraphe / boutons / compteurs (desktop) */ html body .elementor-46 .elementor-element.elementor-element-4b7628a { margin-bottom: 44px !important; } /* ─── HERO — hiérarchie titre / sous-titre / punchline (desktop+tablette) ── Scopé en min-width:601px : sous 600px les règles mobiles dédiées (plus bas) gardent la main. Objectif : 3 niveaux de lecture nets. 1) Titre (géré au-dessus) — l'accroche. 2) Ligne descriptive — volontairement discrète (gris doux), mesure courte. 3) « Livia ne répond pas, elle vend. » — statement détaché et plus présent. */ @media (min-width: 768px) { html body .elementor-46 .elementor-element.elementor-element-4b7628a { max-width: 600px !important; margin-left: auto !important; margin-right: auto !important; } html body .elementor-element-4b7628a p { font-size: 18px !important; line-height: 1.55 !important; color: rgba(20, 22, 15, 0.6) !important; } /* Les deux

qui précèdent la punchline sont neutralisés : on pilote l'écart au margin-top du pour un rythme net. */ html body .elementor-element-4b7628a p br { display: none; } html body .elementor-element-4b7628a p strong { display: block; margin-top: 22px; font-size: clamp(18px, 1.9vw, 23px); line-height: 1.3; letter-spacing: 0.2px; font-weight: 400; color: #14160f; } } html body .elementor-46 .elementor-element.elementor-element-3192ade.e-con.e-parent { padding-top: 16px !important; padding-bottom: 48px !important; margin-bottom: 16px !important; } /* ─── HERO — CTA + lien sur la même ligne ────────────────────────────── Le conteneur 3192ade était une grille 2 colonnes (2 boutons). Désormais le vrai CTA (bouton violet) + le lien texte « Découvrir la solution » sont alignés côte à côte, centrés. Repassent empilés sur mobile (≤600px). */ html body .elementor-46 .elementor-element.elementor-element-3192ade { --display: flex; --e-con-grid-template-columns: none; display: flex !important; flex-direction: row !important; flex-wrap: wrap !important; align-items: center !important; justify-content: center !important; gap: 16px; } html body .elementor-element-3192ade > .e-con-inner { display: flex !important; flex-direction: row !important; flex-wrap: wrap !important; align-items: center !important; justify-content: center !important; gap: 22px; width: 100%; } /* Bouton principal violet — l'unique appel à l'action. */ html body .elementor-element-3192ade a.lv-hero-cta { display: inline-flex; align-items: center; justify-content: center; background: #b5adfc; color: #1b1d16; font: 400 16px/1 "STKBureauSans - Medium", "STKBureauSans", Arial, sans-serif; text-transform: uppercase; letter-spacing: 0.6px; text-decoration: none; padding: 17px 34px; border-radius: 0 0 10px 0; box-shadow: 0 10px 28px rgba(181, 173, 252, 0.45); transition: transform .35s cubic-bezier(.23, 1, .32, 1), box-shadow .35s ease, background .35s ease; cursor: pointer; } html body .elementor-element-3192ade a.lv-hero-cta:hover { background: #c4bdff; transform: translateY(-3px); box-shadow: 0 16px 38px rgba(181, 173, 252, 0.6); } /* Lien texte secondaire — PAS un bouton ; défile vers « Notre solution ». */ html body .elementor-element-3192ade a.lv-hero-discover { display: inline-flex; align-items: center; gap: 7px; background: none; border: 0; padding: 4px 2px; color: rgba(20, 22, 15, 0.72); font: 400 15px/1 "STKBureauSans - Medium", "STKBureauSans", Arial, sans-serif; text-transform: uppercase; letter-spacing: 0.8px; text-decoration: none; transition: color .3s ease; } html body .elementor-element-3192ade a.lv-hero-discover:hover { color: #1b1d16; } html body .elementor-element-3192ade a.lv-hero-discover .lv-hero-discover__chev { font-size: 18px; line-height: 0; transform: translateY(1px); transition: transform .3s ease; } html body .elementor-element-3192ade a.lv-hero-discover:hover .lv-hero-discover__chev { transform: translate(3px, 1px); } /* Mobile : CTA + lien empilés ET parfaitement centrés. Les règles de base forcent flex-row !important sur la section + .e-con-inner (dont un max-width:95% qui décentre légèrement) ; on repasse en colonne pleine largeur, centrée, avec !important pour battre ces règles. */ @media (max-width: 767px) { html body .elementor-46 .elementor-element.elementor-element-3192ade, html body .elementor-element-3192ade > .e-con-inner { flex-direction: column !important; flex-wrap: nowrap !important; align-items: center !important; justify-content: center !important; width: 100% !important; max-width: 100% !important; margin-left: auto !important; margin-right: auto !important; } html body .elementor-element-3192ade a.lv-hero-cta, html body .elementor-element-3192ade a.lv-hero-discover { align-self: center !important; } } /* Défilement doux vers les ancres (#solution) + dégagement sous la navbar. */ html { scroll-behavior: smooth; } #solution { scroll-margin-top: 96px; } /* Tous les CTA « Réserver une démo » en MAJUSCULES (cohérence : les boutons header n'avaient pas de text-transform, contrairement aux autres). */ html body [data-livia-demo], html body [data-livia-demo] .elementor-button-text { text-transform: uppercase !important; } html body .elementor-46 .elementor-element.elementor-element-64fd836.e-con.e-parent { padding-top: 32px !important; margin-top: 16px !important; } /* Écarts B/C : titre + texte plus collés, texte + cartes plus éloignés - Section "Votre parcours sans Livia" : titre bc6ccd5, texte 406c746, cartes 3378b59 - Section "Un cycle de vente maîtrisé" : titre cbe162d, texte ae090a8, cartes 39eed3c */ .elementor-46 .elementor-element.elementor-element-bc6ccd5, .elementor-46 .elementor-element.elementor-element-cbe162d { margin-bottom: 8px !important; } .elementor-46 .elementor-element.elementor-element-406c746, .elementor-46 .elementor-element.elementor-element-ae090a8 { margin-bottom: 60px !important; } .elementor-46 .elementor-element.elementor-element-3378b59, .elementor-46 .elementor-element.elementor-element-39eed3c { margin-top: 20px !important; } /* ─── PARCOURS « SANS LIVIA » — tenir sur un seul écran (desktop) ─────── Section a970bc5 : on compacte marges / hauteur des cartes / espacements pour que les 6 étapes soient visibles sans scroller. Ciblage par ID propre à cette section (la section jumelle « cycle de vente » n'est PAS touchée). */ @media (min-width: 1025px) { /* Section : moins de padding haut/bas. */ html body .elementor-46 .elementor-element.elementor-element-a970bc5 { padding-top: 22px !important; padding-bottom: 14px !important; } /* Titre : on supprime le gros espace au-dessus. */ html body .elementor-46 .elementor-element.elementor-element-bc6ccd5 { margin-top: 6px !important; margin-bottom: 6px !important; } /* Texte d'intro : marges resserrées. */ html body .elementor-46 .elementor-element.elementor-element-406c746 { margin-top: 8px !important; margin-bottom: 18px !important; } /* Grille des cartes : collée au texte + interligne de rangées réduit. */ html body .elementor-46 .elementor-element.elementor-element-3378b59 { margin-top: 0 !important; } html body .elementor-element-3378b59 > .e-con-inner { row-gap: 16px !important; padding-top: 0 !important; padding-bottom: 0 !important; } /* Cartes : hauteur réduite via padding vertical (30px → 10px). */ html body .elementor-46 .elementor-element.elementor-element-4fb5127, html body .elementor-46 .elementor-element.elementor-element-baa74ca, html body .elementor-46 .elementor-element.elementor-element-6af03e3, html body .elementor-46 .elementor-element.elementor-element-da8ac1a, html body .elementor-46 .elementor-element.elementor-element-a818626, html body .elementor-46 .elementor-element.elementor-element-246bf26 { padding-top: 10px !important; padding-bottom: 10px !important; } /* Conteneur du bouton « Tester Livia » : padding 50/50 → resserré. */ html body .elementor-46 .elementor-element.elementor-element-7642c31 { padding-top: 14px !important; padding-bottom: 10px !important; } } /* Effet hover sur les cartes "parcours sans Livia" et "cycle de vente" On cible le wrapper extérieur (la carte blanche complète avec son ombre), pas la sous-grille intérieure. */ .elementor-46 .elementor-element.elementor-element-4fb5127, .elementor-46 .elementor-element.elementor-element-baa74ca, .elementor-46 .elementor-element.elementor-element-6af03e3, .elementor-46 .elementor-element.elementor-element-da8ac1a, .elementor-46 .elementor-element.elementor-element-a818626, .elementor-46 .elementor-element.elementor-element-246bf26, .elementor-46 .elementor-element.elementor-element-64544b2, .elementor-46 .elementor-element.elementor-element-ff5cd2c, .elementor-46 .elementor-element.elementor-element-def64f9, .elementor-46 .elementor-element.elementor-element-5da589a, .elementor-46 .elementor-element.elementor-element-af53fa6, .elementor-46 .elementor-element.elementor-element-59efe44 { transition: transform 0.35s cubic-bezier(0.23, 1, 0.32, 1), box-shadow 0.35s ease !important; will-change: transform; } .elementor-46 .elementor-element.elementor-element-4fb5127:hover, .elementor-46 .elementor-element.elementor-element-baa74ca:hover, .elementor-46 .elementor-element.elementor-element-6af03e3:hover, .elementor-46 .elementor-element.elementor-element-da8ac1a:hover, .elementor-46 .elementor-element.elementor-element-a818626:hover, .elementor-46 .elementor-element.elementor-element-246bf26:hover, .elementor-46 .elementor-element.elementor-element-64544b2:hover, .elementor-46 .elementor-element.elementor-element-ff5cd2c:hover, .elementor-46 .elementor-element.elementor-element-def64f9:hover, .elementor-46 .elementor-element.elementor-element-5da589a:hover, .elementor-46 .elementor-element.elementor-element-af53fa6:hover, .elementor-46 .elementor-element.elementor-element-59efe44:hover { transform: translateY(-6px) scale(1.02) !important; box-shadow: 0 12px 32px rgba(0, 0, 0, 0.18) !important; } @media (max-width: 767px) { html body h1.elementor-heading-title, html body h2.elementor-heading-title { font-size: 26px !important; line-height: 30px !important; letter-spacing: 1px !important; } /* Hero h1 légèrement plus présent que les autres + décolle de la nav */ html body .elementor-element-260c33d h1.elementor-heading-title { font-size: 30px !important; line-height: 34px !important; padding-top: 80px !important; } /* Titres "LA SOLUTION" / "VOTRE PARCOURS…" qui ont !important */ .lv-sol__h, .elementor-element.elementor-element-bc6ccd5 .elementor-heading-title { font-size: 26px !important; line-height: 30px !important; margin-bottom: 40px !important; letter-spacing: 1px !important; } /* Sous-titre hero en serif un peu plus compact */ .elementor-element-4b7628a p { font-size: 17px !important; line-height: 24px !important; } /* Pack titles (PACK STARTER...) restent à taille raisonnable */ html body h4.elementor-heading-title { font-size: 16px !important; } /* lv-sol cartes : marges plus petites entre rangs */ .lv-sol__row { margin-bottom: 40px !important } .lv-sol__cta { margin-top: 40px } /* Air vertical entre sections : padding-top/bottom sur chaque section top-level Elementor pour ne plus les coller les unes aux autres */ html body .elementor-element.e-con.e-parent { padding-top: 40px !important; padding-bottom: 40px !important; margin-top: 0 !important; margin-bottom: 0 !important } /* Section counters (+86% / x2 / +30%) : compresser le gap après le hero. Specificité bumpée pour battre la règle générique .e-con.e-parent. */ html body .elementor-element.elementor-element-64fd836.e-con.e-parent { padding-top: 20px !important; padding-bottom: 30px !important; margin-top: 0 !important } html body .elementor-element.elementor-element-3192ade.e-con.e-parent { padding-bottom: 20px !important } /* Hero : sur mobile, le CTA et le lien « Découvrir » repassent empilés. */ html body .elementor-46 .elementor-element.elementor-element-3192ade, html body .elementor-element-3192ade > .e-con-inner { flex-direction: column !important; } /* La section lv-sol (full-bleed photo) reste edge-to-edge — ET la section parcours juste avant a son padding-bottom réduit pour ne pas laisser une bande sombre trop épaisse. */ html body .elementor-element.elementor-element-bc429d6.e-con.e-parent { padding: 0 !important; margin: 0 !important } /* Idem pour la section juste après lv-sol */ html body .elementor-element.elementor-element-546df27 { padding-top: 30px !important } /* Section "Un cycle de vente" et ses 6 cards : aérer haut/bas + entre */ html body .elementor-element.elementor-element-af88596 { padding-top: 40px !important; padding-bottom: 60px !important; row-gap: 28px } html body .elementor-element.elementor-element-39eed3c { row-gap: 20px; padding-top: 20px } /* ─── HERO : titre + sous-titre centrés ────────────────────────── */ html body .elementor-element-260c33d h1.elementor-heading-title, html body .elementor-element-4b7628a p, html body .elementor-element-4b7628a { text-align: center !important } /* ─── NAV : pas de bouton COMMENCER sur mobile (hamburger suffit) ─ */ .uicore-navbar .uicore-cta-wrapper, .uicore-navbar a.uicore-btn, .uicore-mobile-cta-wrapper, .uicore-mobile-cta { display: none !important } /* ─── "ILS NOUS ONT FAIT CONFIANCE" ────────────────────────────── La bande de logos est désormais gérée par le marquee défilant (§5), y compris sur mobile. L'ancien carrousel scroll-snap qui imposait .elementor-element { width:140px } est retiré : il forçait une largeur fixe plus étroite que certains logos (Margaux, Kalamata…), qui débordaient alors sur le voisin. Le marquee dimensionne chaque logo à sa largeur naturelle (img height:38px, width:auto) et ménage un margin-right:36px entre eux → plus de chevauchement. */ /* ─── Sup. arrondis bas sur les sections sombres internes ──────── */ html body .elementor-element.elementor-element-83f2ad6, html body .elementor-element.elementor-element-cbc716e { border-radius: 0 !important; } /* ─── Section "Quelques idées reçues" — cards en carrousel ────── Le 3D scene avec cards positionnées en valeur absolue casse sur mobile (chaque card prend tout l'écran). On reset le layout en flex horizontal scrollable, avec snap. */ .lv-objections .lv-ob__scene { position: relative !important; height: auto !important; transform: none !important } .lv-objections .lv-ob__zone { display: none !important } .lv-objections .lv-ob__scene { display: flex !important; /* flex-start (et pas le center hérité) : sinon la rangée entière est centrée, la carte 0 déborde à gauche (inatteignable) et c'est la n°2 qui paraît au centre. En flex-start, scroll 0 = carte 0 en tête. */ justify-content: flex-start !important; overflow-x: auto !important; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; gap: 16px; /* Padding latéral = (écran − carte 280px)/2 → la 1re carte (objection n°1) est centrée par défaut au scroll 0 (et la dernière peut se centrer en fin de course). Sinon la carte 0 reste collée à gauche et c'est la n°2 qui paraît centrée. */ padding: 8px calc((100vw - 280px) / 2) 24px; scrollbar-width: none; } .lv-objections .lv-ob__scene::-webkit-scrollbar { display: none } .lv-objections .lv-card { position: relative !important; transform: none !important; left: auto !important; top: auto !important; right: auto !important; bottom: auto !important; flex: 0 0 auto !important; width: 280px !important; min-height: 380px !important; scroll-snap-align: center; opacity: 1 !important; z-index: 1 !important; border-radius: 14px; overflow: hidden; background: #fff; box-shadow: 0 4px 16px rgba(0,0,0,.08); } /* [5] Les images base64 d'origine ont été tronquées par le scraper (cassées). Le client a fourni les cartes MOBILE complètes (mythe + « Objection n°X » + réponse). On réinjecte ces webp dans le de chaque card via JS (initObjectionCardsMobile) et on l'affiche en cover. On passe par le (et non un background-image) car Elementor pose `* { background-image:none !important }` sur les sections pas encore lazy-loadées. L'ancienne reconstruction CSS (guillemets + mythe seul via ::before/::after) est retirée. */ .lv-objections .lv-card picture { display: block !important } .lv-objections .lv-card img { display: block !important; position: static !important; width: 100% !important; height: 100% !important; object-fit: cover !important; border-radius: inherit !important; } .lv-objections .lv-card { aspect-ratio: 2 / 3 !important; min-height: 0 !important; padding: 0 !important; background: #2a2a2a !important; } .lv-objections .lv-card::before, .lv-objections .lv-card::after { content: none !important; } /* ─── Accordion "Vous voyez en temps réel" — sup. tous arrondis hérités */ html body .elementor-element.elementor-element-3659ef6 { border-radius: 0 !important; } html body .elementor-element.elementor-element-3659ef6 .e-n-accordion, html body .elementor-element.elementor-element-3659ef6 .e-n-accordion-item, html body .elementor-element.elementor-element-3659ef6 details, html body .elementor-element.elementor-element-3659ef6 summary { border-radius: 12px !important } /* Cards "Prise de demande / Qualification / …" — même layout que les cards Découverte/Tentative/… : titre à gauche, chiffre outline en haut à droite, 110px. */ .elementor-element-580afca, .elementor-element-0ab7eb1, .elementor-element-8ea6d0e, .elementor-element-1a4e06f, .elementor-element-dbbb364, .elementor-element-a45e383 { grid-template-columns: 1fr auto !important; grid-template-rows: auto !important; row-gap: 0 !important; column-gap: 16px !important; align-items: start !important; } .elementor-element-580afca .elementor-heading-title, .elementor-element-0ab7eb1 .elementor-heading-title, .elementor-element-8ea6d0e .elementor-heading-title, .elementor-element-1a4e06f .elementor-heading-title, .elementor-element-dbbb364 .elementor-heading-title, .elementor-element-a45e383 .elementor-heading-title { text-align: left !important } .elementor-element-580afca .elementor-widget-heading, .elementor-element-0ab7eb1 .elementor-widget-heading, .elementor-element-8ea6d0e .elementor-widget-heading, .elementor-element-1a4e06f .elementor-widget-heading, .elementor-element-dbbb364 .elementor-widget-heading, .elementor-element-a45e383 .elementor-widget-heading { align-self: start; padding-top: 4px } .elementor-element-580afca .elementor-widget-image, .elementor-element-0ab7eb1 .elementor-widget-image, .elementor-element-8ea6d0e .elementor-widget-image, .elementor-element-1a4e06f .elementor-widget-image, .elementor-element-dbbb364 .elementor-widget-image, .elementor-element-a45e383 .elementor-widget-image { align-self: start; justify-self: end; padding: 0 !important; margin: 0 !important; } .elementor-element-580afca .elementor-widget-image img, .elementor-element-0ab7eb1 .elementor-widget-image img, .elementor-element-8ea6d0e .elementor-widget-image img, .elementor-element-1a4e06f .elementor-widget-image img, .elementor-element-dbbb364 .elementor-widget-image img, .elementor-element-a45e383 .elementor-widget-image img { width: 110px !important; height: 110px !important; max-height: none !important; max-width: none !important; margin: -10px -8px 0 0 !important; display: block; } /* Cards "Découverte / Tentative / Friction / Attente / Abandon / Perte" — layout horizontal : titre à gauche, chiffre outline en haut à droite, plus grand qu'avant. */ .elementor-element-65df4c1, .elementor-element-67280b2, .elementor-element-cf85dae, .elementor-element-44c7c4f, .elementor-element-43e577b, .elementor-element-3783b78 { grid-template-columns: 1fr auto !important; grid-template-rows: auto !important; row-gap: 0 !important; column-gap: 16px !important; align-items: start !important; } /* Titre en colonne 1, ligne haute */ .elementor-element-65df4c1 .elementor-widget-heading, .elementor-element-67280b2 .elementor-widget-heading, .elementor-element-cf85dae .elementor-widget-heading, .elementor-element-44c7c4f .elementor-widget-heading, .elementor-element-43e577b .elementor-widget-heading, .elementor-element-3783b78 .elementor-widget-heading { align-self: start; padding-top: 4px } /* Chiffre en haut à droite, plus gros */ .elementor-element-65df4c1 .elementor-widget-image, .elementor-element-67280b2 .elementor-widget-image, .elementor-element-cf85dae .elementor-widget-image, .elementor-element-44c7c4f .elementor-widget-image, .elementor-element-43e577b .elementor-widget-image, .elementor-element-3783b78 .elementor-widget-image { align-self: start; justify-self: end; padding: 0 !important; margin: 0 !important; } .elementor-element-65df4c1 .elementor-widget-image img, .elementor-element-67280b2 .elementor-widget-image img, .elementor-element-cf85dae .elementor-widget-image img, .elementor-element-44c7c4f .elementor-widget-image img, .elementor-element-43e577b .elementor-widget-image img, .elementor-element-3783b78 .elementor-widget-image img { width: 110px !important; height: 110px !important; max-height: none !important; max-width: none !important; margin: -10px -8px 0 0 !important; display: block; } /* Mascotte / popup : bulle compacte (elle était bien trop grande en 86vw → texte tassé en haut à gauche, énorme vide). Taille du texte conservée (validée client), cadre resserré pour un rendu proportionnel. Ratio ~1.06 = ratio natif du SVG (159×150). NB : ce bloc (767px) prime sur le bloc 768px plus haut — les deux sont donc gardés cohérents. */ #livia-mascot-fixed { width: 56px; right: 16px; bottom: 16px } #livia-popup { width: 236px; max-width: none; height: 222px; min-height: 0; right: 2px; bottom: 14px } #livia-popup .lp-content { width: 88%; padding: 24px 18px 40px } #livia-popup h3 { font-size: 13.5px } #livia-popup input, #livia-popup textarea { font-size: 14px } #livia-popup button { padding: 12px 18px; font-size: 14px } #livia-popup .lp-close { top: 24px; right: 26px } } /* ─── SCROLL REVEAL + MICRO-INTERACTIONS ──────────────────────────────── Animations inspirées de hello-livia.com (qui utilise Framer Motion). Ici : 100 % CSS + IntersectionObserver (cf initReveal dans _livia-fixes.js). On n'anime QUE opacity + transform → aucun reflow. Les classes .lv-reveal ne sont posées QUE par JS : sans JS, tout reste visible. Respect total de prefers-reduced-motion. */ @media (prefers-reduced-motion: no-preference) { /* La transition n'est armée (.lv-armed) qu'APRÈS la pose de l'état caché, sinon l'ajout de .lv-reveal ferait un fondu sortant visible (1→0) avant l'apparition. Pattern « disable transition on init » (cf AOS). !important : on lutte contre les transitions propres d'Elementor. */ .lv-reveal { will-change: opacity, transform; } .lv-reveal.lv-armed { transition: opacity .7s cubic-bezier(.22, 1, .36, 1), transform .7s cubic-bezier(.22, 1, .36, 1), box-shadow .3s ease, background-color .35s ease, border-color .35s ease !important; transition-delay: var(--lv-delay, 0ms) !important; } /* État caché — scopé en :not(.lv-in) pour qu'une fois révélé le transform redevienne libre (sinon le lift au survol des cartes serait bloqué). !important pour battre .elementor-widget / .lv-sol__row / .lv-card. */ .lv-reveal:not(.lv-in) { opacity: 0 !important; transform: translateY(30px) !important; } .lv-reveal:not(.lv-in)[data-rv="left"] { transform: translateX(-48px) !important; } .lv-reveal:not(.lv-in)[data-rv="right"] { transform: translateX(48px) !important; } .lv-reveal:not(.lv-in)[data-rv="scale"] { transform: scale(.92) !important; } .lv-reveal:not(.lv-in)[data-rv="fade"] { transform: none !important; } /* État révélé : opacity forcée (pour battre le !important du caché) ; transform laissé libre → none par défaut, ou lift au survol. */ .lv-reveal.lv-in { opacity: 1 !important; } } /* Hover micro-interactions — boutons (lift + scale + glow violet on-brand, équivalent du whileHover scale:1.05 + boxShadow du site de référence). */ @media (hover: hover) and (prefers-reduced-motion: no-preference) { .elementor-button, .lv-sol__btn { transition: transform .25s cubic-bezier(.22, 1, .36, 1), box-shadow .25s ease, filter .25s ease !important; } .elementor-button:hover, .lv-sol__btn:hover { transform: translateY(-3px) scale(1.04) !important; box-shadow: 0 14px 34px rgba(149, 128, 255, .38) !important; } .elementor-button:active, .lv-sol__btn:active { transform: translateY(-1px) scale(.98) !important; } /* Cartes : léger soulèvement au survol (whileHover y:-10) */ .lv-objections .lv-card { transition: transform .3s cubic-bezier(.22, 1, .36, 1), box-shadow .3s ease; } .lv-objections .lv-card:hover { transform: translateY(-8px); box-shadow: 0 18px 40px rgba(13, 15, 13, .18); } } /* ════════════════════════════════════════════════════════════════════════ LOT 2 — ANIMATIONS RICHES (fond vivant, titre hero, flottement, détails) Tout est sous prefers-reduced-motion: no-preference. ════════════════════════════════════════════════════════════════════════ */ /* ─── 1. FOND VIVANT — halos qui dérivent en continu ─────────────────── */ @media (prefers-reduced-motion: no-preference) { .lv-ambient { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; } .lv-blob { position: absolute; border-radius: 50%; filter: blur(70px); will-change: transform, opacity; animation: lv-blob-drift 16s ease-in-out infinite alternate; } /* Mouvement bien plus ample + pulsation d'opacité → fond clairement vivant. */ @keyframes lv-blob-drift { 0% { transform: translate(0, 0) scale(1); opacity: .45; } 50% { transform: translate(120px, -90px) scale(1.35); opacity: .70; } 100% { transform: translate(-90px, 70px) scale(.85); opacity: .50; } } } /* ─── 2. TITRE HERO — entrée écartement + fondu + net ────────────────── */ @media (prefers-reduced-motion: no-preference) { .lv-hero-title { animation: lv-hero-in 1.15s cubic-bezier(.22, 1, .36, 1) backwards; } @keyframes lv-hero-in { 0% { opacity: 0; transform: translateY(16px) scale(.985); letter-spacing: -.05em; filter: blur(7px); } 100% { opacity: 1; transform: none; letter-spacing: 0; filter: blur(0); } } } /* ─── 3. FLOTTEMENT — images déco + mascotte ───────────────────────────── On anime la propriété `translate` (et non `transform`) : ainsi le flottement se compose avec un éventuel `transform` (ex. le scale au survol de la mascotte, les transforms Elementor) au lieu de l'écraser. */ @media (prefers-reduced-motion: no-preference) { .lv-float { animation: lv-float 5.5s ease-in-out infinite alternate; animation-delay: var(--lv-float-delay, 0s); will-change: translate; } @keyframes lv-float { from { translate: 0 0; } to { translate: 0 -12px; } } #livia-mascot-fixed { animation: lv-float 4s ease-in-out infinite alternate; } } /* ─── 4a. REFLET BOUTONS — sweep lumineux au survol ──────────────────── */ .elementor-button, .lv-sol__btn { position: relative; overflow: hidden; } @media (hover: hover) and (prefers-reduced-motion: no-preference) { .elementor-button::after, .lv-sol__btn::after { content: ""; position: absolute; top: 0; left: -130%; width: 60%; height: 100%; background: linear-gradient(120deg, transparent, rgba(255, 255, 255, .5), transparent); transform: skewX(-20deg); pointer-events: none; } .elementor-button:hover::after, .lv-sol__btn:hover::after { animation: lv-shine .75s ease; } @keyframes lv-shine { to { left: 140%; } } } /* ─── 4b. SOULIGNÉS QUI SE DESSINENT (sync avec le reveal des rows) ───── */ @media (prefers-reduced-motion: no-preference) { .lv-sol__card u { text-decoration: none; background-image: linear-gradient(currentColor, currentColor); background-repeat: no-repeat; background-position: 0 100%; background-size: 0% 2px; padding-bottom: 1px; transition: background-size .7s cubic-bezier(.22, 1, .36, 1) .25s; } .lv-sol__row.lv-in .lv-sol__card u { background-size: 100% 2px; } } /* ─── 4c. TILT 3D DES CARTES (rotation posée en inline par le JS) ─────── */ @media (hover: hover) and (prefers-reduced-motion: no-preference) { .lv-objections .lv-card { transform-style: preserve-3d; transition: transform .18s ease, box-shadow .3s ease; } } /* ─── 5. MARQUEE — bande de logos en défilement infini ─────────────────── Le track (.lv-marquee) contient 2× la séquence de logos (clones posés en JS). On anime translateX 0 → -50% : le point milieu tombe pile entre les deux moitiés identiques → boucle sans couture. On utilise margin-right (et non gap) pour que les deux moitiés soient parfaitement symétriques. */ .lv-marquee-host { overflow: hidden !important; width: 100%; /* Fondu des bords gauche/droite */ -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); } /* Boucle inconditionnelle : le client veut un défilement permanent, on n'attache donc PAS l'animation à prefers-reduced-motion (sinon les visiteurs ayant « réduire les animations » verraient une bande figée). */ .lv-marquee { display: flex !important; flex-wrap: nowrap !important; width: max-content !important; gap: 0 !important; justify-content: flex-start !important; align-items: center; will-change: transform; } /* L'animation ne démarre QUE lorsque le JS a posé les clones (classe is-ready). Sinon un track à une seule séquence défilerait de -50% → moitié de logos puis BLANC (bug « pas de boucle, blanc à la fin » sur mobile quand la mesure des logos échoue). Sans clones : bande pleine et statique, jamais de trou. */ .lv-marquee.is-ready { animation: lv-marquee-scroll var(--lv-mq-dur, 32s) linear infinite; } .lv-marquee > * { flex: 0 0 auto !important; margin-right: var(--lv-mq-gap, 56px) !important; } /* Contraindre les logos par la hauteur (width auto) → taille uniforme et track de largeur raisonnable. Sans ça, une image width:100% dans un conteneur max-content s'emballe à des milliers de px. */ .lv-marquee > *, .lv-marquee .elementor-widget, .lv-marquee .elementor-widget-container { width: auto !important; max-width: none !important; } .lv-marquee img { height: 52px !important; width: auto !important; max-width: none !important; object-fit: contain; } .lv-marquee:hover { animation-play-state: paused; } @keyframes lv-marquee-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } } /* Mobile : logos plus compacts + fondu resserré (sinon peu d'items visibles) */ @media (max-width: 767px) { .lv-marquee img { height: 38px !important; } .lv-marquee > * { margin-right: 36px !important; } .lv-marquee-host { -webkit-mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent); mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent); } } /* ─── PARCOURS SANS LIVIA : carrousel horizontal auto (mobile only) ────── Les 6 cartes (etapes 1->6) passent d'une pile verticale a une piste horizontale scroll-snap. Auto-defilement gauche->droite pilote par initParcoursCarousel() dans _livia-fixes.js ; swipe manuel possible (pause puis reprise auto). Sur desktop la grille d'origine est conservee. */ @media (max-width: 767px) { .elementor-element-a970bc5 .e-con-inner { display: flex !important; grid-template-columns: none !important; flex-wrap: nowrap !important; align-items: stretch; overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; gap: 16px !important; padding-bottom: 6px; scrollbar-width: none; scroll-behavior: smooth; } .elementor-element-a970bc5 .e-con-inner::-webkit-scrollbar { display: none; } .elementor-element-a970bc5 .e-con-inner > .elementor-element { flex: 0 0 84% !important; max-width: 84% !important; scroll-snap-align: center; } } /* Points de pagination du carrousel parcours — mobile only (masqués desktop). NB : le fond de cette section est BLANC → points foncés pour rester visibles (le point actif se démarque en sombre plein). */ .lv-parcours-dots { display: none; } @media (max-width: 767px) { .lv-parcours-dots { display: flex; justify-content: center; align-items: center; gap: 9px; margin-top: 18px; } /* Points BLANCS sur le fond sombre de la section (inactif = blanc translucide, actif = blanc plein). */ .lv-parcours-dot { width: 9px; height: 9px; padding: 0; border: 0; border-radius: 50%; background: rgba(255, 255, 255, 0.4); cursor: pointer; -webkit-tap-highlight-color: transparent; transition: background .25s ease, transform .25s ease; } .lv-parcours-dot.is-active { background: #fff; transform: scale(1.35); } /* ─── FOOTER — désactiver l'effet « footer révélé » sur mobile ────── Le thème met le footer en `position: sticky; bottom:0; z-index:-2` (le contenu scrolle par-dessus). Sur iOS ce combo sticky + z-index négatif provoque un repaint parasite : un bout de footer clignote en bas de l'écran au scroll (« je vois une partie du footer puis ça disparaît »). On le repasse en flux normal — sa hauteur est déjà comptée dans le contenu, donc aucun trou/chevauchement. */ #uicore-tb-footer { position: static !important; z-index: auto !important; max-height: none !important; } } /* ─── 6. HOVER VERT CLAIR sur cartes (étapes + objections) ─────────────── Équivalent du changement de couleur au survol vu sur hello-livia (eux en rose) → chez nous en vert clair brand (#e0f399). La transition bg passe par .lv-reveal.lv-armed (qui inclut désormais background-color). */ @media (hover: hover) and (prefers-reduced-motion: no-preference) { .lv-hover-card { transition: background-color .35s ease, box-shadow .35s ease, border-color .35s ease, transform .3s cubic-bezier(.22, 1, .36, 1); } .lv-hover-card:hover { background-color: rgba(224, 243, 153, .30) !important; box-shadow: 0 16px 36px rgba(74, 79, 0, .14); transform: translateY(-4px); } } /* ─── 7. HERO REFONTE — retrait KPIs + centrage aéré ───────────────────── 1) On masque le bloc chiffres clés (+86% / x2 / +30%). 2) On centre verticalement le contenu restant (titre/sous-titre/boutons) dans le hero pleine hauteur → rendu plus aéré. Le gros padding-top du H1 (qui poussait le titre sous le header) n'est plus nécessaire une fois le contenu centré (il reste largement sous la nav). */ .elementor-element-64fd836 { display: none !important; } .elementor-element-08b2f97 { display: flex !important; flex-direction: column !important; justify-content: center !important; min-height: 100vh; min-height: 100svh; /* iOS : évite le saut lié à la barre d'URL dynamique */ } .elementor-element-08b2f97 h1 { padding-top: 0 !important; } /* ════════════════════════════════════════════════════════════════════════ SECTION "LA SOLUTION" — chronologie 4 étapes (remplace le split + photo) Ligne de progression dessinée au scroll (cf initTimeline dans le JS), numéros qui s'activent à la révélation. Fond dégradé doux on-brand. ════════════════════════════════════════════════════════════════════════ */ .lv-tl { position: relative; /* Full-bleed : le conteneur Elementor parent est collapsé à ~2px (centré), on s'en échappe pour occuper toute la largeur du viewport. */ width: 100vw; left: 50%; right: 50%; margin-left: -50vw; margin-right: -50vw; padding: clamp(64px, 10vw, 130px) 20px; background: linear-gradient(180deg, #ffffff 0%, #f6f4ff 55%, #f3f7ec 100%); overflow: hidden; } .lv-tl__inner { max-width: 1140px; margin: 0 auto; } .lv-tl__head { text-align: center; margin-bottom: clamp(48px, 7vw, 90px); } .lv-tl__eyebrow { display: inline-block; font: 400 13px/1 "STKBureauSans - Medium", sans-serif; text-transform: uppercase; letter-spacing: 3px; color: #6b63c9; margin-bottom: 18px; } .lv-tl__title { font-family: "RESERVATION WIDE BLOD", sans-serif !important; font-size: clamp(32px, 5.5vw, 58px); line-height: 1.1; color: #0d0f0d; margin: 0 auto 22px; text-transform: uppercase; } .lv-tl__intro { font: 400 clamp(16px, 2.2vw, 19px)/1.6 "STKBureauSerif-Book", serif; color: #4a4a4a; max-width: 58ch; margin: 0 auto; } .lv-tl__intro u { text-decoration-color: #b5adfc; text-underline-offset: 3px; } .lv-tl__steps { position: relative; list-style: none; margin: 0 auto; padding: 0; max-width: 640px; } .lv-tl__rail { position: absolute; left: 27px; width: 2px; background: #e6e1d6; border-radius: 2px; } .lv-tl__rail-fill { position: absolute; left: 0; top: 0; width: 100%; height: 0%; background: linear-gradient(180deg, #b5adfc 0%, #cfd9b0 55%, #e0f399 100%); border-radius: 2px; transition: height 0.12s linear, width 0.12s linear; } .lv-tl__step { position: relative; display: grid; grid-template-columns: 56px 1fr; gap: 22px; padding-bottom: clamp(36px, 5vw, 60px); } .lv-tl__step:last-child { padding-bottom: 0; } .lv-tl__marker { display: flex; justify-content: center; } .lv-tl__num { position: relative; z-index: 1; width: 56px; height: 56px; border-radius: 50%; background: #ffffff; border: 2px solid #e6e1d6; display: flex; align-items: center; justify-content: center; font: 400 18px/1 "RESERVATION WIDE BLOD", sans-serif; color: #b8b2a4; transition: border-color .45s ease, color .45s ease, background-color .45s ease, box-shadow .45s ease, transform .45s ease; } .lv-tl__step.is-active .lv-tl__num { border-color: #b5adfc; background: #b5adfc; color: #0d0f0d; box-shadow: 0 8px 22px rgba(149, 128, 255, 0.40); transform: scale(1.05); } .lv-tl__card { padding-top: 7px; } .lv-tl__step-title { font: 400 clamp(19px, 2.6vw, 24px)/1.2 "RESERVATION WIDE BLOD", sans-serif !important; color: #0d0f0d; margin: 0 0 8px; text-transform: none; } .lv-tl__step-text { font: 400 clamp(15px, 2vw, 17px)/1.6 "STKBureauSerif-Book", serif; color: #50504a; margin: 0; } .lv-tl__step-text u { text-decoration-color: #b5adfc; text-underline-offset: 3px; } .lv-tl__step-text b { color: #0d0f0d; } .lv-tl__cta { text-align: center; margin-top: clamp(40px, 6vw, 70px); } @media (max-width: 767px) { .lv-tl__rail { left: 21px; } .lv-tl__step { grid-template-columns: 44px 1fr; gap: 16px; } .lv-tl__num { width: 44px; height: 44px; font-size: 15px; } } /* ── DESKTOP : chronologie HORIZONTALE (étapes côte-à-côte) ──────────── */ @media (min-width: 768px) { .lv-tl__steps { display: flex; flex-direction: row; align-items: flex-start; gap: 28px; max-width: 1080px; } .lv-tl__step { flex: 1 1 0; display: flex; flex-direction: column; align-items: center; text-align: center; grid-template-columns: none; gap: 0; padding-bottom: 0; } .lv-tl__marker { margin-bottom: 26px; } .lv-tl__card { padding-top: 0; } .lv-tl__step-text { max-width: 230px; margin-inline: auto; } /* La ligne devient horizontale ; left/width/top posés par initTimeline. */ .lv-tl__rail { width: auto; height: 2px; } .lv-tl__rail-fill { width: 0; height: 100%; background: linear-gradient(90deg, #b5adfc 0%, #cfd9b0 55%, #e0f399 100%); } } /* ─── MASCOTTE EN FOND (section "cycle de vente maîtrisé") ──────────────── Décor à gauche, derrière le contenu, qui glisse depuis la gauche + apparaît quand la section entre dans le viewport (cf initCycleMascot dans le JS). */ .elementor-element-af88596 { position: relative; } .elementor-element-af88596 > *:not(.lv-cycle-mascot) { position: relative; z-index: 1; } /* La mascotte vit dans .lv-flowbg (derrière) → ses enfants (bento + section demandes/transformez) passent au-dessus. */ .lv-flowbg > *:not(.lv-cycle-mascot) { position: relative; z-index: 1; } .lv-cycle-mascot { position: absolute; left: clamp(-70px, -2vw, -10px); top: 0; width: clamp(160px, 20vw, 340px); height: auto; z-index: 0; pointer-events: none; opacity: 0; will-change: transform; /* La position verticale (transform: translateY) est pilotée par le JS au scroll → la mascotte suit le scroll. Transition courte = suivi lissé. */ transition: opacity 0.8s ease, transform 0.25s ease-out; } .lv-cycle-mascot.is-in { opacity: 0.55; } @media (prefers-reduced-motion: reduce) { .lv-cycle-mascot { transition: opacity 0.4s ease; } } @media (max-width: 900px) { /* sur petit écran on l'efface pour ne pas gêner la lecture */ .lv-cycle-mascot { display: none; } } /* ─── PREUVE SOCIALE (hero, sous les boutons) ────────────────────────── */ .lv-proof { display: inline-flex; align-items: center; align-self: center; justify-content: center; gap: 10px; flex-wrap: wrap; margin: 30px 0 60px; padding: 14px 28px; background: rgba(255, 255, 255, 0.72); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); border: 1px solid rgba(13, 15, 13, 0.08); border-radius: 999px; box-shadow: 0 10px 28px rgba(13, 15, 13, 0.08); font-family: "STKBureauSans - Medium", sans-serif; font-size: 15px; color: #50504a; } .lv-proof__stars { color: #fbbc04; font-size: 17px; letter-spacing: 2px; line-height: 1; } .lv-proof__txt strong { color: #0d0f0d; } .lv-proof__g { display: inline-flex; align-items: center; gap: 5px; font-weight: 500; color: #0d0f0d; } .lv-proof__g svg { width: 16px; height: 16px; display: block; } /* ════════════════════════════════════════════════════════════════════════ BENTO "Un cycle de vente maîtrisé" (variante depuis Claude Design) Disposition bento en briques reproduite à l'identique ; typo de la marque (RESERVATION WIDE titres/chiffres, STKBureauSerif titres de cartes, STKBureauSans texte). Numéros en contour (watermark). Yeux Livia flottants. ════════════════════════════════════════════════════════════════════════ */ /* ── Fond dégradé CONTINU : bento "Un cycle de vente" + section "TOUTES LES DEMANDES / VOUS TRANSFORMEZ" ───────────────────────── Les deux blocs sont enveloppés dans .lv-flowbg (full-bleed) qui porte UNE seule image dégradé desktop_BG : continuité parfaite, insensible aux hauteurs responsive. Les deux enfants sont rendus transparents. */ .lv-flowbg { position: relative; width: 100vw; left: 50%; right: 50%; margin-left: -50vw; margin-right: -50vw; background: #ffffff url("/wp-content/uploads/2026/05/desktop_BG-scaled.webp") center top / cover no-repeat; overflow: hidden; } /* Section demandes/transformez : on neutralise son image de fond propre (desktop_BG via Elementor + calque motion-effects en prod) et on la rend TRANSPARENTE pour laisser apparaître le dégradé du wrapper. */ html body .elementor-element.elementor-element-546df27, html body .elementor-element.elementor-element-546df27 > .elementor-motion-effects-container > .elementor-motion-effects-layer { background-image: none !important; background-color: transparent !important; } .lv-bento { position: relative; width: 100vw; left: 50%; right: 50%; margin-left: -50vw; margin-right: -50vw; overflow: hidden; padding: clamp(72px, 9vw, 120px) clamp(20px, 5vw, 64px) clamp(80px, 9vw, 130px); /* Fond porté par le wrapper .lv-flowbg (dégradé continu) → bento transparent. */ background: transparent; } .lv-bento__inner { position: relative; z-index: 2; max-width: 1240px; margin: 0 auto; } .lv-bento__head { text-align: center; margin-bottom: clamp(40px, 6vw, 72px); } .lv-bento__title { margin: 0; font-family: "RESERVATION WIDE BLOD", sans-serif; font-weight: 400; /* identique à la section de base */ font-size: clamp(26px, 4vw, 36px); letter-spacing: 2px; /* identique à la section de base */ line-height: 40px; text-transform: uppercase; color: #000000; } .lv-bento__sub { margin: clamp(16px, 2.2vw, 24px) auto 0; max-width: 880px; font-family: "STKBureauSerif-Book", serif; font-size: clamp(17px, 2.2vw, 24px); /* dimensions de la section de base */ line-height: 1.4; color: #333333; } .lv-bento__grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: 22px; } .span-5 { grid-column: span 5; } .span-7 { grid-column: span 7; } .lv-bento__card { position: relative; min-height: 248px; display: flex; flex-direction: column; justify-content: space-between; padding: clamp(26px, 3vw, 36px); border-radius: 26px; border: 1px solid rgba(255,255,255,0.7); background: rgba(255,255,255,0.55); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); box-shadow: 0 18px 52px rgba(86,72,150,0.1); overflow: hidden; } .lv-bento__card--lavender { background: linear-gradient(158deg, rgba(229,225,250,0.82) 0%, rgba(255,255,255,0.58) 72%); box-shadow: 0 18px 52px rgba(86,72,150,0.12); } /* Carte "Confirmation" en vert clair (au lieu du sombre) */ .lv-bento__card--green { background: linear-gradient(158deg, rgba(224,243,153,0.9) 0%, rgba(231,239,186,0.55) 75%); border-color: rgba(255,255,255,0.7); box-shadow: 0 18px 52px rgba(120,140,40,0.16); } /* Chiffres = les images SVG de la section de base (1.svg … 6.svg), en watermark. !important pour battre la règle Elementor `img { width:100% }`. */ .lv-bento__num { position: absolute; top: 20px; right: 26px; height: clamp(48px, 6vw, 84px) !important; width: auto !important; max-width: none !important; pointer-events: none; } .lv-bento__ct { position: relative; margin: 0 0 clamp(18px, 2.4vw, 30px); max-width: 18ch; font-family: "STKBureauSerif-Medium", serif; font-weight: 500; font-size: 24px; /* dimensions conservées de la section de base */ line-height: 1.1; color: #16171b; text-decoration: underline; text-underline-offset: 6px; text-decoration-thickness: 2px; } .lv-bento__cx { position: relative; margin: 0; max-width: 56ch; font-family: "STKBureauSans - Medium", sans-serif; font-size: 16px; line-height: 1.62; color: #54505e; } /* Yeux Livia flottants */ .lv-bento__eyes { position: absolute; display: flex; pointer-events: none; z-index: 1; } .lv-bento__eyes i { border-radius: 50%; background: radial-gradient(circle at 38% 30%, #ffffff, #eceaf3); display: flex; align-items: center; justify-content: center; } .lv-bento__eyes i::after { content: ""; border-radius: 50%; background: #5d5870; } .lv-bento__eyes--l { left: -26px; top: 46%; gap: 4px; filter: drop-shadow(10px 22px 26px rgba(98,86,150,0.42)); animation: ecmFloatA 9s ease-in-out infinite; } .lv-bento__eyes--l i { width: 96px; height: 112px; } .lv-bento__eyes--l i::after { width: 46px; height: 64px; } .lv-bento__eyes--r { right: 14px; bottom: 64px; gap: 3px; filter: drop-shadow(8px 16px 20px rgba(98,86,150,0.4)); animation: ecmFloatB 11s ease-in-out infinite; } .lv-bento__eyes--r i { width: 56px; height: 66px; } .lv-bento__eyes--r i::after { width: 27px; height: 38px; } @keyframes ecmFloatA { 0%,100% { transform: translateY(0) rotate(-2deg); } 50% { transform: translateY(-14px) rotate(1deg); } } @keyframes ecmFloatB { 0%,100% { transform: translateY(0) rotate(2deg); } 50% { transform: translateY(12px) rotate(-2deg); } } @media (prefers-reduced-motion: reduce) { .lv-bento__eyes--l, .lv-bento__eyes--r { animation: none; } } /* Mobile : empilement 1 colonne, yeux masqués */ @media (max-width: 900px) { .lv-bento__grid { grid-template-columns: 1fr; gap: 16px; } .span-5, .span-7 { grid-column: auto; } .lv-bento__eyes { display: none; } } /* ═══════════════════════════════════════════════════════════════════════ RETOUCHES MOBILE (juillet 2026) — feedback client, exclusivement < 768px ═══════════════════════════════════════════════════════════════════════ */ @media (max-width: 767px) { /* [3] "Moins de charge mentale. / Plus de demandes qualifiées. / Plus de réservations confirmées." : chaque phrase sur UNE seule ligne (le widget était bridé à ~234px → chaque phrase débordait sur 2 lignes, dernier mot isolé). On élargit le widget, on empêche le retour à la ligne interne (les
gèrent seuls les 3 lignes) et on réduit un peu la taille. */ /* [1b] « Un parcours encore trop fragile. » sur sa propre ligne (au lieu de démarrer en fin de ligne après « réponse. » et de laisser « fragile » pendre). Le   garde en plus « trop fragile » soudés. */ .lv-fragile-line { display: block; } /* Le span étant en block, il fournit déjà le retour à la ligne. Le
d'origine ferait un saut de ligne EN TROP (ligne vide) → on le masque sur mobile pour que « Votre offre… » suive directement. */ .lv-br-fragile { display: none; } .elementor-element-ac27205 { width: 100% !important; max-width: 100% !important; } .elementor-element-ac27205 p { white-space: nowrap; font-size: 21px !important; line-height: 1.4 !important; } /* [2] Écart trop grand entre la dernière carte du bento (« Confirmation / Émission automatique ») et le bouton « tester livia » (~160px cumulés : bento padding-bottom 80 + wrapper padding-top 40 + bouton padding-top 50). On resserre l'ensemble sur mobile. */ .lv-bento { padding-bottom: 28px !important; } .elementor-element-af88596 { padding-top: 16px !important; } .elementor-element-984c09b { padding-top: 6px !important; padding-bottom: 24px !important; } /* [9] FAQ : les 4 onglets de catégorie avaient chacun une largeur différente (301 / 175 / 186 / 218px) → rendu bancal une fois empilés. On les passe en pleine largeur : tous identiques, texte centré. (!important car la