/* ===================================================================== LEAPWAY — Site vitrine. Thème émeraude immersif + intro vidéo. ===================================================================== */ :root{ color-scheme:light; /* Thème clair — blanc + vert Leapway + orange. --cream = encre (texte sombre). */ --paper:#ffffff; --mint:#F2FAF6; --mint2:#E9F6F0; --cream:#0B1E16; --mut:#5C7A70; --em:#0FB36B; --em-deep:#0A8F57; --em-bright:#39E39C; --orange:#FF6A2C; --orange-2:#FF9F45; --orange-deep:#E45314; --line:rgba(11,30,22,.12); --line-soft:rgba(11,30,22,.07); --panel:rgba(11,30,22,.03); --panel2:rgba(11,30,22,.05); --blue:#2F6BFF; --grape:#6C4CF0; --amber:#E9910B; --radius:16px; --maxw:1180px; --header-h:72px; --t-display:"Bricolage Grotesque",system-ui,sans-serif; --t-body:"Space Grotesk",system-ui,sans-serif; --t-mono:"Space Mono",ui-monospace,monospace; } *{margin:0;padding:0;box-sizing:border-box} html{scroll-behavior:smooth;scroll-padding-top:calc(var(--header-h) + 14px);-webkit-text-size-adjust:100%} body{font-family:var(--t-body);color:var(--cream);line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden; background: radial-gradient(900px 560px at 84% -6%, rgba(255,106,44,.07), transparent 60%), radial-gradient(900px 640px at 6% 8%, rgba(15,179,107,.09), transparent 60%), #ffffff fixed} /* Thème clair : on GARDE le fond animé interactif (#globe), on masque les voiles sombres */ .halo,.vignette,.grain{display:none !important} body.lock{overflow:hidden;height:100vh} img,svg{display:block;max-width:100%} a{color:inherit;text-decoration:none} ul,ol{list-style:none} h1,h2,h3{font-family:var(--t-display);line-height:1.05;letter-spacing:-.025em;overflow-wrap:break-word} .container{width:100%;max-width:var(--maxw);margin:0 auto;padding:0 26px} .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0} .hidden{display:none} /* fonds */ #globe{position:fixed;inset:0;z-index:0;pointer-events:none} .halo{position:fixed;left:50%;top:30%;width:70vmin;height:70vmin;transform:translate(-50%,-50%);background:radial-gradient(circle,rgba(47,227,155,.16),transparent 62%);z-index:0;pointer-events:none;filter:blur(20px)} .vignette{position:fixed;inset:0;z-index:1;pointer-events:none;background:radial-gradient(ellipse 110% 80% at 50% 30%,transparent 50%,rgba(8,42,34,.6) 100%)} .grain{position:fixed;inset:0;z-index:1;pointer-events:none;opacity:.04;mix-blend-mode:overlay;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")} /* ============ INTRO VIDÉO ============ */ #intro{position:fixed;inset:0;z-index:80;background:#06241d;display:flex;align-items:center;justify-content:center; transition:opacity 1.1s ease, transform 1.2s cubic-bezier(.7,0,.2,1)} #intro.gone{opacity:0;transform:scale(1.08);pointer-events:none} .intro-grad{position:absolute;inset:0;background:radial-gradient(52% 52% at 50% 44%,rgba(47,227,155,.18),transparent 70%);animation:introglow 2.6s ease-in-out infinite alternate} @keyframes introglow{from{opacity:.55}to{opacity:1}} .intro-brand{position:relative;z-index:2;display:flex;flex-direction:column;align-items:center;gap:14px;text-align:center;padding:0 24px} .intro-logo{width:78px;height:78px;opacity:0;transform:translateY(10px) scale(.82);animation:intropop .9s cubic-bezier(.2,.9,.3,1.25) .1s forwards;filter:drop-shadow(0 10px 30px rgba(47,227,155,.35))} .intro-wm{font-family:var(--t-display);font-weight:800;font-size:clamp(2.3rem,7.5vw,3.6rem);letter-spacing:-.03em;color:var(--cream);opacity:0;transform:translateY(12px);animation:introup .8s ease .38s forwards} .intro-wm .dot{color:var(--em)} .intro-title{font-family:var(--t-mono);font-size:12px;letter-spacing:.32em;text-transform:uppercase;color:var(--mut);opacity:0;animation:ft 1s .72s forwards} @keyframes ft{to{opacity:1}} @keyframes intropop{to{opacity:1;transform:none}} @keyframes introup{to{opacity:1;transform:none}} .intro-skip{position:absolute;right:22px;bottom:20px;z-index:3;font-family:var(--t-mono);font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--cream);background:rgba(255,255,255,.06);border:1px solid var(--line);padding:10px 18px;border-radius:999px;cursor:pointer;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);transition:background .2s,border-color .2s} .intro-skip:hover{background:rgba(255,255,255,.1);border-color:var(--em);color:var(--em)} /* logo */ .logo{display:inline-flex;align-items:center;gap:10px} .logo .wm{font-family:var(--t-display);font-weight:800;font-size:21px;letter-spacing:-.03em} .logo .wm .dot{color:var(--em);display:inline-block;transition:transform .35s cubic-bezier(.34,1.56,.64,1)} .logo:hover .wm .dot{transform:scale(1.45)} /* boutons */ .btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;font-family:var(--t-display);font-weight:700;font-size:15px;padding:13px 22px;border-radius:999px;border:1.6px solid transparent;cursor:pointer;transition:transform .18s ease,background .2s,color .2s,box-shadow .25s;white-space:nowrap} .btn-lg{padding:16px 28px;font-size:16px}.btn.full{width:100%} .btn-em{background:var(--em);color:#04130c;box-shadow:0 8px 30px -8px rgba(47,227,155,.55)} .btn-em:hover{background:#46eba8;transform:translateY(-2px);box-shadow:0 14px 44px -8px rgba(47,227,155,.75)} .btn-line{background:rgba(255,255,255,.04);color:var(--cream);border-color:var(--line)} .btn-line:hover{border-color:var(--em);color:var(--em);transform:translateY(-2px)} .btn .arr{transition:transform .2s}.btn-line:hover .arr{transform:translateX(4px)} .btn:focus-visible{outline:2px solid var(--em);outline-offset:3px} /* étiquettes mono */ .mono-label{font-family:var(--t-mono);font-size:12px;letter-spacing:.04em;color:var(--em);text-transform:uppercase} /* en-tête centré */ .header{position:fixed;top:0;left:0;right:0;height:var(--header-h);z-index:60;display:flex;align-items:center; background:rgba(10,52,43,0);backdrop-filter:blur(0);transition:background .3s,backdrop-filter .3s,border-color .3s;border-bottom:1px solid transparent} .header.scrolled{background:rgba(9,46,38,.72);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom-color:var(--line-soft)} .header-inner{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:16px} .header-inner .logo{justify-self:start} .nav{justify-self:center;display:flex;align-items:center;gap:28px} .nav-link{font-weight:500;font-size:14.5px;color:var(--mut);transition:color .2s} .nav-link:hover{color:var(--cream)} .nav-link.active{color:var(--cream);font-weight:700} @media(min-width:721px){ .nav-link{position:relative;padding-bottom:5px} .nav-link::after{content:"";position:absolute;left:0;bottom:0;width:100%;height:2px;border-radius:2px;background:var(--em);transform:scaleX(0);transform-origin:left;transition:transform .3s cubic-bezier(.4,0,.2,1)} .nav-link:hover::after{transform:scaleX(1)} .nav-link.active::after{transform:scaleX(1)} } .nav-cta{justify-self:end} /* en-tête de page interne */ .page-hero{position:relative;z-index:2;padding:calc(var(--header-h) + 70px) 0 24px;text-align:center} .page-hero .mono-label{display:block;margin-bottom:16px} .page-hero h1{font-size:clamp(2.2rem,5.4vw,4rem);font-weight:800;max-width:20ch;margin:0 auto} .page-hero .page-sub{margin:18px auto 0;color:#cfe7dd;font-size:clamp(1rem,2vw,1.18rem);max-width:58ch} /* bande d'appel à l'action (bas des pages internes) */ .cta-band{position:relative;z-index:2;text-align:center;padding:70px 0 90px} .cta-band h2{font-size:clamp(1.6rem,4vw,2.6rem);font-weight:800;margin-bottom:10px} .cta-band p{color:#cfe7dd;margin-bottom:26px} .nav-cta-m{display:none} .burger{display:none;width:42px;height:42px;border:none;background:transparent;cursor:pointer;flex-direction:column;justify-content:center;align-items:center;gap:6px} .burger span{display:block;width:24px;height:2.4px;border-radius:2px;background:var(--cream);transition:transform .3s,opacity .3s} .burger.open span:nth-child(1){transform:translateY(4.2px) rotate(45deg)} .burger.open span:nth-child(2){transform:translateY(-4.2px) rotate(-45deg)} /* héro */ .hero{position:relative;z-index:2;min-height:100vh;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;padding:var(--header-h) 0 40px} .hero-in{max-width:880px} .an{opacity:0;transform:translateY(22px)} body.entered .an{opacity:1;transform:none;transition:opacity 1s ease,transform 1s cubic-bezier(.22,1,.36,1)} body.entered .an.d1{transition-delay:.1s}body.entered .an.d2{transition-delay:.25s}body.entered .an.d3{transition-delay:.4s}body.entered .an.d4{transition-delay:.55s} .kicker{font-family:var(--t-mono);font-size:12px;letter-spacing:.28em;text-transform:uppercase;color:var(--em);margin-bottom:24px} .hero-title{font-weight:800;font-size:clamp(2.8rem,8vw,6.2rem);max-width:14ch;margin:0 auto} .hero-title .l2{color:var(--em);text-shadow:0 0 60px rgba(47,227,155,.5);display:block} .hero-sub{max-width:54ch;margin:26px auto 0;color:#cfe7dd;font-size:clamp(1rem,2vw,1.18rem)} .hero-cta{display:flex;gap:14px;justify-content:center;margin-top:34px;flex-wrap:wrap} .hero-stats{display:flex;gap:34px;justify-content:center;margin-top:40px;flex-wrap:wrap} .hero-stats li{display:flex;flex-direction:column} .hero-stats b{font-family:var(--t-display);font-weight:800;font-size:1.9rem;color:var(--cream)} .hero-stats span{font-family:var(--t-mono);font-size:11px;color:var(--mut);text-transform:uppercase} .scrollcue{position:absolute;bottom:24px;left:0;right:0;text-align:center;font-family:var(--t-mono);font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--mut)} .scrollcue .m{display:block;width:1px;height:28px;margin:10px auto 0;background:linear-gradient(var(--em),transparent);animation:drop 1.8s infinite} @keyframes drop{0%{transform:scaleY(0);transform-origin:top}50%{transform:scaleY(1);transform-origin:top}51%{transform:scaleY(1);transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}} /* marquee */ .marquee{position:relative;z-index:2;padding:22px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);overflow:hidden;white-space:nowrap;background:rgba(6,36,29,.35)} .marquee-track{display:inline-flex;align-items:center;animation:scroll 28s linear infinite} .marquee-track span{font-family:var(--t-display);font-weight:800;font-size:clamp(1.6rem,3.6vw,2.8rem);text-transform:uppercase;letter-spacing:-.02em;padding:0 22px;color:rgba(234,255,246,.85)} .marquee-track span.sep{color:var(--em);padding:0 6px} @keyframes scroll{to{transform:translateX(-50%)}} /* sections */ .section{position:relative;z-index:2;padding:90px 0} .sec-head{margin-bottom:48px} .sec-head .mono-label{display:block;margin-bottom:14px} .sec-title{font-size:clamp(1.8rem,4.2vw,3rem);font-weight:800} .hl{color:var(--em)} /* fonctionnalités */ .feat-list{border-top:1px solid var(--line)} .feat{display:grid;grid-template-columns:auto 1fr auto;gap:28px;align-items:start;padding:30px 4px;border-bottom:1px solid var(--line);transition:background .25s,padding-left .25s} .feat:hover{background:var(--panel);padding-left:16px} .feat-num{font-family:var(--t-mono);font-size:15px;color:var(--em);font-weight:700;padding-top:6px} .feat-body h3{font-size:clamp(1.3rem,2.6vw,1.9rem);font-weight:700;margin-bottom:8px} .feat-body p{color:#bcd6cb;max-width:60ch} .feat-tag{align-self:center;white-space:nowrap;color:var(--mut)} /* pourquoi */ .why-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px} .why{background:rgba(8,42,34,.55);padding:34px 30px;transition:background .25s} .why:hover{background:rgba(255,255,255,.05)} .why-k{display:block;margin-bottom:14px;font-size:13px} .why h3{font-size:1.3rem;font-weight:700;margin-bottom:8px} .why p{color:#bcd6cb} /* tarifs */ .price-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;align-items:stretch} .price{position:relative;background:rgba(8,42,34,.55);border:1px solid var(--line);border-radius:var(--radius);padding:30px 26px;display:flex;flex-direction:column;transition:transform .25s,box-shadow .25s,border-color .25s} .price:hover{transform:translateY(-5px);border-color:rgba(47,227,155,.4)} .price-feat{border-color:var(--em);box-shadow:0 18px 50px -28px rgba(47,227,155,.7)} .price-badge{position:absolute;top:-11px;left:24px;background:var(--em);color:#04130c;padding:4px 11px;border-radius:999px;font-size:10px} .price-name{margin-bottom:14px} .price-amt{font-family:var(--t-display);font-weight:800;font-size:1.9rem;margin-bottom:8px} .price-desc{color:#bcd6cb;font-size:.95rem;margin-bottom:20px} .price-list{display:grid;gap:10px;margin-bottom:24px;flex-grow:1} .price-list li{color:#bcd6cb;font-size:.95rem;padding-left:20px;position:relative} .price-list li::before{content:"+";position:absolute;left:0;color:var(--em);font-weight:700} /* lancement */ .cta-box{background:linear-gradient(135deg,rgba(47,227,155,.14),rgba(8,42,34,.5));border:1px solid var(--line);border-radius:24px;padding:50px 44px;display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:center} .cta-box .mono-label{display:block;margin-bottom:16px} .cta-title{font-size:clamp(1.7rem,3.6vw,2.6rem);font-weight:800;margin-bottom:12px} .cta-sub{color:#cfe7dd} .signup input[type=email]{width:100%;font-family:var(--t-body);font-size:16px;padding:15px 18px;border-radius:12px;border:1.6px solid var(--line);background:rgba(6,36,29,.5);color:#fff;outline:none;margin-bottom:11px;transition:border-color .2s} .signup input[type=email]::placeholder{color:rgba(234,255,246,.4)} .signup input[type=email]:focus{border-color:var(--em)} .signup-note{display:block;margin-top:12px;text-align:center;color:var(--mut)} .signup-consent{margin-top:10px;text-align:center;font-size:.8rem;color:var(--mut)} .signup-consent a{color:var(--em);text-decoration:underline} /* bandeau cookies */ .cookie[hidden]{display:none} .cookie{position:fixed;left:16px;right:16px;bottom:16px;z-index:90;max-width:780px;margin:0 auto;background:rgba(8,42,34,.97);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border:1px solid var(--line);border-radius:16px;padding:16px 20px;display:flex;gap:16px;align-items:center;justify-content:space-between;flex-wrap:wrap;box-shadow:0 20px 50px -20px rgba(0,0,0,.6)} .cookie p{font-size:.88rem;color:#cfe7dd;flex:1;min-width:230px;margin:0} .cookie p a{color:var(--em);text-decoration:underline} .cookie-btns{display:flex;gap:10px;flex-shrink:0} .cookie .btn{padding:10px 18px;font-size:14px} @media(max-width:540px){.cookie{flex-direction:column;align-items:stretch}.cookie-btns{justify-content:flex-end}} /* pages légales */ .legal{max-width:820px} .legal h2{font-family:var(--t-display);font-weight:700;font-size:1.25rem;margin:30px 0 10px} .legal p,.legal li{color:#cfe7dd;line-height:1.7;margin-bottom:10px} .legal strong{color:var(--cream)} .legal a{color:var(--em);text-decoration:underline} .legal .todo{color:var(--amber);border:1px solid rgba(255,206,107,.35);background:rgba(255,206,107,.08);border-radius:12px;padding:12px 16px} /* faq */ .faq-wrap{max-width:820px} .faq{border-top:1px solid var(--line)} .faq-item{border-bottom:1px solid var(--line)} .faq-item summary{list-style:none;cursor:pointer;font-family:var(--t-display);font-weight:700;font-size:1.08rem;padding:22px 36px 22px 0;position:relative;display:flex;gap:12px;align-items:baseline} .faq-item summary::-webkit-details-marker{display:none} .faq-item summary .mono-label{font-size:12px} .faq-item summary::after{content:"+";position:absolute;right:2px;top:20px;font-size:1.5rem;color:var(--em);font-weight:400;transition:transform .25s} .faq-item[open] summary::after{transform:rotate(45deg)} .faq-item p{color:#bcd6cb;padding:0 0 22px 34px;max-width:66ch} /* contact */ .contact{text-align:center} .contact .mono-label{display:block;margin-bottom:18px} .contact-mail{display:inline-block;max-width:100%;font-family:var(--t-display);font-weight:800;font-size:clamp(1.6rem,5vw,3rem);letter-spacing:-.02em;color:var(--cream);transition:color .2s;overflow-wrap:anywhere} .contact-mail:hover{color:var(--em)} .contact-sub{color:#bcd6cb;margin-top:14px} /* ====== Section positionnement : texte + maquette animée de l'app ====== */ .pos-grid{display:grid;grid-template-columns:1.02fr .98fr;gap:50px;align-items:center} .pos-visual{position:relative;perspective:1200px;min-height:380px;display:flex;align-items:center;justify-content:center} .appmock{position:relative;width:100%;max-width:452px} .appmock-win{position:relative;background:linear-gradient(160deg,rgba(12,52,43,.96),rgba(7,33,27,.97));border:1px solid var(--line);border-radius:18px;padding:14px 15px 16px;box-shadow:0 40px 80px -30px rgba(0,0,0,.75),0 0 0 1px rgba(255,255,255,.02) inset;transform:rotateX(7deg) rotateY(-10deg);transform-style:preserve-3d;transition:transform .6s cubic-bezier(.2,.8,.2,1),box-shadow .6s} .pos-visual:hover .appmock-win{transform:rotateX(2deg) rotateY(-3deg) translateY(-6px);box-shadow:0 50px 90px -28px rgba(0,0,0,.8)} .appmock-bar{display:flex;align-items:center;gap:8px;padding-bottom:12px;border-bottom:1px solid var(--line-soft)} .appmock-dot{width:9px;height:9px;border-radius:50%;flex:none} .appmock-dot.r{background:#ff5f57}.appmock-dot.y{background:#febc2e}.appmock-dot.g{background:#28c840} .appmock-tabs{display:flex;gap:6px;margin-left:8px;font-size:10.5px;font-weight:600} .appmock-tabs span{display:inline-flex;align-items:center;gap:4px;padding:4px 9px;border-radius:8px;color:var(--mut)} .appmock-tabs span.on{background:var(--em);color:#04130c} .appmock-tabs b{background:#ff5a6a;color:#fff;border-radius:6px;padding:0 4px;font-size:9px} .appmock-cal{display:grid;grid-template-columns:64px repeat(7,1fr);gap:6px 5px;align-items:center;margin-top:13px} .appmock-h{font-family:var(--t-mono);font-size:8.5px;letter-spacing:.04em;text-transform:uppercase;color:var(--mut);text-align:center;padding-bottom:2px} .appmock-h:first-child{text-align:left} .appmock-name{font-size:10px;font-weight:600;color:var(--cream);white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .appmock-blk{height:22px;border-radius:6px;display:flex;align-items:center;padding:0 7px;font-size:9px;font-weight:600;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;box-shadow:0 4px 10px -4px rgba(0,0,0,.5)} .bk-air{background:linear-gradient(90deg,#ff6a78,#ff4d6a)} .bk-book{background:linear-gradient(90deg,#4b7bff,#2f5ff0)} .bk-dir{background:linear-gradient(90deg,#3aeda6,#16c98a);color:#04130c} .bk-grp{background:linear-gradient(90deg,#b58bff,#8f66f0)} .appmock-occ{margin-top:14px} .appmock-occ span{font-family:var(--t-mono);font-size:8.5px;letter-spacing:.04em;text-transform:uppercase;color:var(--mut)} .appmock-track{margin-top:6px;height:8px;border-radius:6px;background:rgba(255,255,255,.07);overflow:hidden} .appmock-track i{display:block;height:100%;width:78%;border-radius:6px;background:linear-gradient(90deg,#3aeda6,#5aa9ff,#b07cff);background-size:200% 100%;animation:mockshine 3.5s linear infinite} @keyframes mockshine{to{background-position:200% 0}} .appmock-chip{position:absolute;display:flex;align-items:center;gap:9px;background:rgba(255,255,255,.97);color:#0c2b22;border-radius:13px;padding:9px 13px;box-shadow:0 18px 40px -14px rgba(0,0,0,.55);animation:mockchip 5.5s ease-in-out infinite} .appmock-chip b{display:block;font-size:12px;font-weight:700;line-height:1.15;color:#0b2019} .appmock-chip small{display:block;font-size:10px;color:#5b7a6f;line-height:1.2} .appmock-ic{width:30px;height:30px;border-radius:9px;display:flex;align-items:center;justify-content:center;font-size:15px;color:#fff;flex:none} .ic-p{background:linear-gradient(135deg,#8f66f0,#b58bff)} .ic-g{background:linear-gradient(135deg,#16c98a,#3aeda6)} .ic-b{background:linear-gradient(135deg,#2f5ff0,#5aa9ff)} .chip-a{top:6%;right:-5%;animation-delay:0s} .chip-b{top:39%;right:-8%;animation-delay:-1.8s} @keyframes mockchip{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}} /* Carte réservation côté voyageur */ .appmock-card{position:absolute;bottom:-7%;left:-9%;width:216px;background:#fff;border-radius:15px;overflow:hidden;box-shadow:0 22px 50px -16px rgba(0,0,0,.6);animation:mockchip 6.2s ease-in-out infinite;animation-delay:-3s} .appmock-card-img{position:relative;height:74px;background:linear-gradient(135deg,#0e5245,#1f8f6d 60%,#3aeda6);display:flex;align-items:center;justify-content:center} .appmock-card-img svg{width:34px;height:34px;fill:none;stroke:rgba(255,255,255,.9);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round} .appmock-card-tag{position:absolute;top:8px;left:8px;font-family:var(--t-mono);font-size:8.5px;font-weight:700;letter-spacing:.02em;color:#04130c;background:rgba(255,255,255,.92);border-radius:6px;padding:3px 7px} .appmock-card-info{padding:9px 12px 11px} .appmock-card-row1{display:flex;align-items:center;justify-content:space-between;gap:6px} .appmock-card-t{font-size:12px;font-weight:700;color:#0b2019;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .appmock-card-star{font-size:10.5px;font-weight:700;color:#c98a12;flex:none} .appmock-card-row2{display:flex;align-items:center;justify-content:space-between;margin-top:8px} .appmock-card-p{font-size:11px;color:#5b7a6f}.appmock-card-p b{font-size:15px;color:#0b2019} .appmock-card-b{background:var(--em);color:#04130c;font-size:11px;font-weight:700;border-radius:9px;padding:6px 12px} @media(max-width:900px){ .pos-grid{grid-template-columns:1fr;gap:30px} .pos-visual{min-height:0;margin-top:8px} .appmock-win{transform:none} .pos-visual:hover .appmock-win{transform:translateY(-4px)} } @media(max-width:520px){ .appmock{max-width:340px} .chip-a{right:0;top:5%}.chip-b{left:0}.chip-c{right:0} .appmock-chip{padding:8px 11px} .appmock-chip small{font-size:9px} } @media(prefers-reduced-motion:reduce){.appmock-chip,.appmock-track i{animation:none}} /* pied de page */ .footer{position:relative;z-index:2;background:rgba(5,26,21,.7);border-top:1px solid var(--line);padding:50px 0 26px;margin-top:30px} .footer-inner{display:flex;justify-content:space-between;gap:36px;flex-wrap:wrap;padding-bottom:26px;border-bottom:1px solid var(--line-soft)} .footer-brand .wm{font-family:var(--t-display);font-weight:800;font-size:22px}.footer-brand .dot{color:var(--em)} .footer-brand p{margin-top:10px;max-width:300px;color:var(--mut);font-size:.95rem} .footer-brand{order:0} .footer-social{display:flex;gap:12px;flex-wrap:wrap;order:1;margin-left:auto;align-self:flex-start} .social{display:inline-flex;align-items:center;gap:8px;padding:9px 16px 9px 12px;border:1px solid var(--line);border-radius:999px;background:rgba(255,255,255,.03);color:var(--mut);font-size:.92rem;font-weight:600;transition:color .2s,border-color .2s,background .25s,transform .18s,box-shadow .25s} .social-ic{width:18px;height:18px;fill:currentColor;flex:none;transition:color .2s} .social--ig .social-ic{color:#e1306c} .social--tt .social-ic{color:#22d8d8} .social:hover{color:#fff;border-color:transparent;transform:translateY(-3px)} .social:hover .social-ic{color:#fff} .social--ig:hover{background:linear-gradient(45deg,#f9ce34 0%,#ee2a7b 45%,#6228d7 100%);box-shadow:0 10px 26px -8px rgba(221,42,123,.6)} .social--tt:hover{background:linear-gradient(120deg,#25f4ee 0%,#0b0b13 52%,#fe2c55 100%);box-shadow:0 10px 26px -8px rgba(254,44,85,.5)} .footer-nav{display:flex;gap:22px;flex-wrap:wrap;align-content:flex-start;order:2;flex-basis:100%} .footer-apps{margin-top:20px} .footer-apps-label{display:block;font-family:var(--t-mono);font-size:10px;text-transform:uppercase;letter-spacing:.06em;color:var(--em);margin-bottom:10px} .footer-apps-row{display:flex;gap:10px;flex-wrap:wrap} .appbtn{display:inline-flex;align-items:center;gap:9px;padding:8px 15px;border:1px solid var(--line);border-radius:12px;background:rgba(255,255,255,.04);color:var(--cream);cursor:default;transition:border-color .2s,background .2s,transform .18s} .appbtn:hover{border-color:color-mix(in srgb,var(--em) 55%,var(--line));background:rgba(255,255,255,.06);transform:translateY(-2px)} .appbtn svg{width:22px;height:22px;flex:none} .appbtn-txt{display:flex;flex-direction:column;line-height:1.12;text-align:left} .appbtn-txt small{font-size:9px;color:var(--mut);text-transform:uppercase;letter-spacing:.03em} .appbtn-txt b{font-size:14px;font-weight:700} .footer-nav a{color:var(--mut);font-size:.95rem;transition:color .2s}.footer-nav a:hover{color:var(--cream)} .footer-bottom{display:flex;justify-content:space-between;flex-wrap:wrap;gap:8px;padding-top:20px;color:var(--mut)} /* blog */ .blog-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px} .post{background:rgba(8,42,34,.55);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;display:flex;flex-direction:column;transition:transform .25s,border-color .25s} .post:hover{transform:translateY(-5px);border-color:rgba(47,227,155,.4)} .post-img{height:158px;background:linear-gradient(135deg,#12a874,#0e4d3e);position:relative} .post-img::after{content:"";position:absolute;inset:0;background:radial-gradient(circle at 70% 30%,rgba(58,237,166,.4),transparent 60%)} .post-body{padding:22px;display:flex;flex-direction:column;gap:9px;flex-grow:1} .post-cat{color:var(--em)} .post h3{font-size:1.15rem;font-weight:700;line-height:1.2} .post p{color:#bcd6cb;font-size:.95rem;flex-grow:1} .post-soon{color:var(--mut)} /* nouvelle génération : IA + WhatsApp */ .next-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:46px} .next-card{--ac:#3aeda6;position:relative;background:linear-gradient(160deg,color-mix(in srgb,var(--ac) 12%,transparent),rgba(8,42,34,.6));border:1px solid var(--line);border-radius:22px;padding:32px 28px;overflow:hidden;transition:transform .3s,border-color .3s,box-shadow .3s} .next-card:hover{transform:translateY(-6px);border-color:color-mix(in srgb,var(--ac) 55%,transparent);box-shadow:0 26px 60px -34px color-mix(in srgb,var(--ac) 65%,transparent)} .next-card::after{content:"";position:absolute;top:-45%;right:-30%;width:65%;height:130%;background:radial-gradient(circle,color-mix(in srgb,var(--ac) 22%,transparent),transparent 70%);pointer-events:none} .next-ic{position:relative;z-index:1;width:56px;height:56px;border-radius:16px;display:flex;align-items:center;justify-content:center;color:var(--ac);background:color-mix(in srgb,var(--ac) 15%,transparent);border:1px solid color-mix(in srgb,var(--ac) 35%,transparent);margin-bottom:20px} .next-ic svg{width:28px;height:28px} .next-badge{position:relative;z-index:1;display:inline-block;font-family:var(--t-mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--ac);border:1px solid color-mix(in srgb,var(--ac) 38%,transparent);border-radius:999px;padding:5px 11px;margin-bottom:14px} .next-card h3{position:relative;z-index:1;font-size:1.34rem;font-weight:700;margin-bottom:10px;line-height:1.18} .next-card p{position:relative;z-index:1;color:#cfe7dd;font-size:.99rem} .next-card .wa{color:#25d366;font-weight:700} .next-card{cursor:pointer} .next-card:focus-visible{outline:2px solid var(--em);outline-offset:3px} .next-card .next-ic{transition:transform .35s cubic-bezier(.22,1,.36,1)} .next-card:hover .next-ic{transform:translateY(-5px) rotate(-6deg) scale(1.06)} .next-link{display:inline-flex;align-items:center;gap:7px;margin-top:18px;color:var(--ac);opacity:.85;transition:gap .25s,opacity .25s} .next-card:hover .next-link{gap:12px;opacity:1} .next-link .arr{transition:transform .25s} .next-card:hover .next-link .arr{transform:translateX(4px)} .next-detail{display:none} /* fenêtre de détail (modale) */ .lwmodal[hidden]{display:none} .lwmodal{position:fixed;inset:0;z-index:120;display:flex;align-items:center;justify-content:center;padding:24px} .lwmodal-ov{position:absolute;inset:0;background:rgba(4,18,14,.72);backdrop-filter:blur(7px);-webkit-backdrop-filter:blur(7px);animation:lwov .3s ease} @keyframes lwov{from{opacity:0}to{opacity:1}} .lwmodal-card{position:relative;z-index:1;width:100%;max-width:520px;max-height:88vh;overflow:auto;background:linear-gradient(165deg,rgba(20,80,64,.97),rgba(8,38,30,.99));border:1px solid rgba(47,227,155,.3);border-radius:24px;padding:38px 34px;box-shadow:0 40px 90px -30px rgba(0,0,0,.75);animation:lwpop .42s cubic-bezier(.22,1,.36,1)} @keyframes lwpop{from{opacity:0;transform:translateY(26px) scale(.96)}to{opacity:1;transform:none}} .lwmodal-x{position:absolute;top:14px;right:16px;width:36px;height:36px;border:none;background:rgba(255,255,255,.08);color:var(--cream);border-radius:50%;font-size:22px;line-height:1;cursor:pointer;transition:background .2s} .lwmodal-x:hover{background:rgba(255,255,255,.2)} .lwmodal-ic{width:62px;height:62px;border-radius:17px;display:flex;align-items:center;justify-content:center;color:var(--em);background:color-mix(in srgb,currentColor 16%,transparent);border:1px solid color-mix(in srgb,currentColor 34%,transparent);margin-bottom:18px} .lwmodal-ic svg{width:30px;height:30px} .lwmodal-card h3{font-family:var(--t-display);font-size:1.5rem;font-weight:800;margin-bottom:12px;line-height:1.15} .lwmodal-card p{color:#cfe7dd;margin-bottom:12px} .lwmodal-card ul{display:grid;gap:10px;margin:0 0 22px} .lwmodal-card li{position:relative;padding-left:26px;color:#dbeee6} .lwmodal-card li::before{content:"✓";position:absolute;left:0;top:0;color:var(--em);font-weight:700} /* pop-up liste d'attente */ .promo[hidden]{display:none} .promo{position:fixed;right:18px;bottom:18px;z-index:95;width:332px;max-width:calc(100vw - 32px);background:linear-gradient(165deg,rgba(20,80,64,.98),rgba(8,38,30,.99));border:1px solid rgba(47,227,155,.34);border-radius:20px;padding:22px 22px 20px;box-shadow:0 30px 70px -26px rgba(0,0,0,.75);transform:translateY(30px) scale(.98);opacity:0;transition:transform .55s cubic-bezier(.22,1,.36,1),opacity .55s} .promo.in{transform:none;opacity:1} .promo-x{position:absolute;top:10px;right:12px;width:30px;height:30px;border:none;background:rgba(255,255,255,.08);color:var(--cream);border-radius:50%;font-size:19px;line-height:1;cursor:pointer;transition:background .2s} .promo-x:hover{background:rgba(255,255,255,.2)} .promo-k{display:block;margin-bottom:8px} .promo-t{font-family:var(--t-display);font-size:1.2rem;font-weight:800;margin-bottom:8px;line-height:1.2} .promo-sub{color:#cfe7dd;font-size:.92rem;margin-bottom:16px} @media(max-width:560px){.promo{right:12px;left:12px;bottom:12px;width:auto}.lwmodal-card{padding:30px 22px}} /* apparitions */ .reveal{opacity:0;transform:translateY(22px);transition:opacity .7s ease,transform .7s ease} .reveal.is-visible{opacity:1;transform:none} @media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;animation:none!important}.reveal,.an{opacity:1;transform:none;transition:none}} /* responsive */ @media(max-width:920px){ .why-grid{grid-template-columns:1fr} .next-grid{grid-template-columns:1fr;margin-top:34px} .price-grid{grid-template-columns:1fr;max-width:440px;margin:0 auto} .cta-box{grid-template-columns:1fr;gap:26px;padding:40px 26px} } @media(max-width:720px){ .section{padding:62px 0} .header-inner{grid-template-columns:1fr auto auto} .nav-cta{display:none} .burger{display:flex;justify-self:end} .nav{position:fixed;top:var(--header-h);left:0;right:0;width:100vw;justify-self:stretch;flex-direction:column;align-items:stretch;gap:0;background:linear-gradient(180deg,rgba(10,52,43,.98),rgba(6,32,26,.985));-webkit-backdrop-filter:blur(20px) saturate(140%);backdrop-filter:blur(20px) saturate(140%);padding:10px 22px calc(26px + env(safe-area-inset-bottom));border-top:1px solid var(--line-soft);border-bottom:1px solid var(--line);border-radius:0 0 22px 22px;box-shadow:0 26px 50px -14px rgba(0,0,0,.6);transform:translateY(-140%);opacity:0;visibility:hidden;transition:transform .42s cubic-bezier(.22,1,.36,1),opacity .3s ease,visibility .42s;max-height:calc(100dvh - var(--header-h));overflow-y:auto;overscroll-behavior:contain} .nav.open{transform:translateY(0);opacity:1;visibility:visible} .nav-link{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:17px 8px;font-size:16.5px;font-weight:600;color:var(--cream);border-bottom:1px solid var(--line-soft);transition:padding-left .2s ease,color .2s ease} .nav-link::after{content:"";width:8px;height:8px;border-right:2px solid var(--mut);border-top:2px solid var(--mut);transform:rotate(45deg);opacity:.6;transition:border-color .2s,opacity .2s;flex:none} .nav-link:active{padding-left:14px} .nav-link.active{color:var(--em);padding-left:14px;position:relative} .nav-link.active::before{content:"";position:absolute;left:-22px;top:50%;transform:translateY(-50%);width:4px;height:22px;border-radius:0 4px 4px 0;background:var(--em)} .nav-link.active::after{border-color:var(--em);opacity:1} .nav-cta-m{display:flex;margin-top:18px;justify-content:center;font-size:16px;padding:15px 24px;border-radius:14px} .feat{grid-template-columns:auto 1fr;gap:18px} .feat-tag{display:none} .feat:hover{padding-left:4px;background:transparent} .hero{min-height:auto;padding:calc(var(--header-h) + 34px) 0 54px} .hero-stats{gap:26px} .scrollcue{display:none} .blog-grid{grid-template-columns:1fr 1fr} .sec-head{margin-bottom:34px} .footer-inner{flex-direction:column;gap:24px} .footer-social{margin-left:0;order:1;margin-top:2px} .feat{padding:24px 4px} } @media(max-width:560px){ .container{padding:0 20px} .blog-grid{grid-template-columns:1fr} .hero-title{font-size:clamp(1.95rem,9.2vw,3.2rem)} .hero-sub{font-size:1rem} .hero-stats{gap:18px} .hero-stats b{font-size:1.6rem} .hero-cta{flex-direction:column;align-items:stretch} .hero-cta .btn{width:100%} .sec-title{font-size:clamp(1.5rem,6.6vw,2.2rem)} .page-hero h1{font-size:clamp(1.9rem,8vw,3rem)} .marquee-track span{font-size:clamp(1.25rem,5vw,2rem);padding:0 14px} .contact-mail{font-size:clamp(1rem,5.4vw,1.6rem)} .cta-title{font-size:clamp(1.5rem,6vw,2.2rem)} .cta-box{padding:34px 22px;border-radius:20px} .price-grid{gap:14px} .nav-cta-m{display:flex} /* Footer un peu plus aéré sur mobile (liens moins tassés) */ .footer-nav{gap:26px 24px} .footer-bottom{gap:10px;padding-top:26px} } /* ============ ACCENTS MULTICOLORES (en plus du vert) ============ */ :root{--c1:#3aeda6;--c2:#5aa9ff;--c3:#b07cff;--c4:#ffce6b} /* Accueil — cartes "pourquoi" (01-04) */ .why{--ac:var(--c1)} .why:nth-child(4n+2){--ac:var(--c2)} .why:nth-child(4n+3){--ac:var(--c3)} .why:nth-child(4n+4){--ac:var(--c4)} .why .why-k{color:var(--ac)} .why:hover{background:color-mix(in srgb,var(--ac) 9%,rgba(255,255,255,.02))} /* Produit — fonctionnalités numérotées (01-05) */ .feat{--ac:var(--c1)} .feat:nth-child(5n+2){--ac:var(--c2)} .feat:nth-child(5n+3){--ac:var(--c3)} .feat:nth-child(5n+4){--ac:var(--c4)} .feat:nth-child(5n+5){--ac:var(--c2)} .feat-num{color:var(--ac)} .feat-tag{color:color-mix(in srgb,var(--ac) 65%,var(--mut))} .feat:hover{background:color-mix(in srgb,var(--ac) 7%,var(--panel))} /* Blog — catégories et visuels */ .post{--ac:var(--c2)} .post:nth-child(3n+2){--ac:var(--c3)} .post:nth-child(3n+3){--ac:var(--c4)} .post .post-cat{color:var(--ac)} .post-img{background:linear-gradient(135deg,color-mix(in srgb,var(--ac) 30%,#0e4d3e),#0e4d3e)} .post-img::after{background:radial-gradient(circle at 70% 30%,color-mix(in srgb,var(--ac) 28%,transparent),transparent 62%)} .post:hover{border-color:color-mix(in srgb,var(--ac) 45%,transparent)} /* Tarifs — accents par offre */ .price{--ac:var(--c1)} .price:nth-child(2){--ac:var(--c3)} .price:nth-child(3){--ac:var(--c4)} .price-list li::before{color:var(--ac)} .price-badge{background:var(--ac)} .price:hover{border-color:color-mix(in srgb,var(--ac) 45%,transparent)} /* FAQ — numéros colorés */ .faq-item{--ac:var(--c1)} .faq-item:nth-child(4n+2){--ac:var(--c2)} .faq-item:nth-child(4n+3){--ac:var(--c3)} .faq-item:nth-child(4n+4){--ac:var(--c4)} .faq-item summary .mono-label{color:var(--ac)} /* Cartes détaillées (page Pourquoi) */ .offer-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:20px;margin-top:44px} .offer-card{--ac:#3aeda6;position:relative;background:linear-gradient(160deg,color-mix(in srgb,var(--ac) 9%,transparent),rgba(8,42,34,.5));border:1px solid var(--line);border-radius:20px;padding:30px 28px;transition:transform .3s,border-color .3s,box-shadow .3s} .offer-card:hover{transform:translateY(-4px);border-color:color-mix(in srgb,var(--ac) 45%,transparent);box-shadow:0 24px 55px -34px color-mix(in srgb,var(--ac) 60%,transparent)} .offer-card h3{font-family:var(--t-display);font-size:1.3rem;font-weight:700;margin-bottom:8px} .offer-card>p{color:#cfe7dd;margin-bottom:16px} .offer-card ul{display:grid;gap:9px} .offer-card li{position:relative;padding-left:25px;color:#cfe7dd;font-size:.96rem} .offer-card li::before{content:"✓";position:absolute;left:0;top:0;color:var(--ac);font-weight:700} @media(max-width:720px){.offer-grid{grid-template-columns:1fr;margin-top:32px}} /* Bloc "vrai site de réservation" (accueil) */ .book-wrap{display:grid;grid-template-columns:1fr 1fr;gap:44px;align-items:center} @media(max-width:860px){.book-wrap{grid-template-columns:1fr;gap:28px}} /* Recherche FAQ */ .faq-search{position:relative;margin-bottom:10px} .faq-search-ic{position:absolute;left:16px;top:50%;transform:translateY(-50%);color:var(--mut);pointer-events:none} .faq-search input{width:100%;font-family:var(--t-body);font-size:16px;padding:14px 18px 14px 46px;border-radius:12px;border:1.6px solid var(--line);background:rgba(6,36,29,.5);color:#fff;outline:none;transition:border-color .2s} .faq-search input::placeholder{color:rgba(234,255,246,.45)} .faq-search input:focus{border-color:var(--em)} .faq-empty{color:var(--mut);padding:16px 2px} .faq-empty a{color:var(--em);text-decoration:underline} /* ============ FOND VIVANT : aurore animée (vert dominant) ============ */ body::before{content:"";position:fixed;inset:-25%;z-index:0;pointer-events:none; background: radial-gradient(38% 38% at 28% 32%, rgba(58,237,166,.13), transparent 62%), radial-gradient(34% 34% at 78% 60%, rgba(90,169,255,.05), transparent 62%), radial-gradient(30% 30% at 62% 16%, rgba(58,237,166,.08), transparent 60%); filter:blur(40px); animation:aurora 26s ease-in-out infinite alternate} @keyframes aurora{ 0%{transform:translate(-3%,-2%) scale(1)} 50%{transform:translate(3%,3%) scale(1.07)} 100%{transform:translate(-1%,2%) scale(1.03)} } .halo{animation:halo 16s ease-in-out infinite alternate} @keyframes halo{ 0%{transform:translate(-50%,-50%) scale(.96);opacity:.7} 100%{transform:translate(-50%,-50%) scale(1.18);opacity:1} } /* ============ TOUCHES PREMIUM ============ */ /* Titre vert qui scintille doucement */ .hero-title .l2{ background:linear-gradient(100deg,#2fe39b 0%,#bafff0 45%,#2fe39b 80%); background-size:220% auto;-webkit-background-clip:text;background-clip:text; -webkit-text-fill-color:transparent;color:transparent; animation:shine 7s linear infinite} @keyframes shine{to{background-position:220% center}} /* Mots surlignés en dégradé (plus riche que du plat) */ .hl{background:linear-gradient(100deg,#bafff0,#2fe39b);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent} /* Lueurs flottantes discrètes dans le héros */ .hero::before,.hero::after{content:"";position:absolute;border-radius:50%;filter:blur(70px);pointer-events:none;z-index:0} .hero::before{width:330px;height:330px;background:radial-gradient(circle,rgba(58,237,166,.18),transparent 70%);top:16%;left:6%;animation:floatA 19s ease-in-out infinite alternate} .hero::after{width:300px;height:300px;background:radial-gradient(circle,rgba(90,169,255,.10),transparent 70%);bottom:12%;right:8%;animation:floatB 23s ease-in-out infinite alternate} @keyframes floatA{to{transform:translate(46px,34px)}} @keyframes floatB{to{transform:translate(-40px,-30px)}} .hero-in{position:relative;z-index:1} /* Reflet qui balaie les boutons verts au survol */ .btn-em{position:relative;overflow:hidden} .btn-em::after{content:"";position:absolute;top:0;left:-75%;width:45%;height:100%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.38),transparent);transform:skewX(-18deg);transition:left .65s ease;pointer-events:none} .btn-em:hover::after{left:130%} /* Cartes "pourquoi" : barre d'accent au survol */ .why{position:relative} .why::before{content:"";position:absolute;left:0;top:0;height:3px;width:0;background:var(--ac);transition:width .3s ease} .why:hover::before{width:100%} /* ============ SÉLECTEUR DE LANGUE ============ */ .head-right{display:flex;align-items:center;gap:12px;justify-self:end} .lang{display:flex;align-items:center;gap:5px} .lang-btn,.lang-globe{display:inline-flex;align-items:center;justify-content:center;height:34px;border:1px solid var(--line);background:rgba(255,255,255,.04);color:var(--cream);border-radius:10px;cursor:pointer;font-family:var(--t-mono);transition:border-color .2s,background .2s,color .2s} .lang-btn{padding:0 12px;font-size:13px;font-weight:700;letter-spacing:.06em} .lang-globe{width:34px;padding:0} .lang-btn:hover,.lang-globe:hover{border-color:var(--em);color:var(--em)} .lang-globe svg{display:block} /* popup « choisir la langue » */ .langpop{position:fixed;inset:0;z-index:120;display:flex;align-items:center;justify-content:center;padding:20px} .langpop[hidden]{display:none} .langpop-ov{position:absolute;inset:0;background:rgba(4,20,16,.72);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)} .langpop-card{position:relative;width:100%;max-width:560px;max-height:82vh;overflow-y:auto;background:rgba(9,46,38,.98);border:1px solid var(--line);border-radius:20px;padding:26px 24px;box-shadow:0 30px 80px -24px rgba(0,0,0,.7)} .langpop-card .mono-label{display:block;margin-bottom:16px} .langpop-x{position:absolute;top:12px;right:14px;width:34px;height:34px;border:none;background:transparent;color:var(--mut);font-size:26px;line-height:1;cursor:pointer;border-radius:8px;transition:color .2s,background .2s} .langpop-x:hover{color:var(--cream);background:rgba(255,255,255,.06)} .langpop-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px} .langopt{display:flex;align-items:center;gap:9px;padding:12px 14px;border:1px solid var(--line);background:rgba(255,255,255,.03);color:var(--cream);border-radius:12px;cursor:pointer;font-family:var(--t-body);font-size:14.5px;text-align:left;transition:border-color .2s,background .2s,transform .15s} .langopt:hover{border-color:var(--em);background:color-mix(in srgb,var(--em) 12%,transparent);transform:translateY(-1px)} .langopt.on{border-color:var(--em);background:color-mix(in srgb,var(--em) 18%,transparent);font-weight:700} .langopt-flag{width:22px;height:16px;border-radius:3px;object-fit:cover;flex:none;box-shadow:0 0 0 1px rgba(255,255,255,.14);background:rgba(255,255,255,.05)} .langopt-globe{width:20px;height:20px;color:var(--mut);box-shadow:none;background:none} .langopt-txt{display:flex;flex-direction:column;gap:1px;min-width:0} .langopt-name{font-size:14px;font-weight:600;line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .langopt-region{font-size:11px;color:var(--mut);line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .langopt.on .langopt-region{color:var(--em)} .langopt-soon{margin-left:auto;font-family:var(--t-mono);font-size:9.5px;text-transform:uppercase;letter-spacing:.08em;color:var(--mut);border:1px solid var(--line);border-radius:6px;padding:2px 5px;flex:none;align-self:center} .langpop-note{margin-top:16px;font-size:.82rem;color:var(--mut);line-height:1.5} [dir="rtl"] .langopt{text-align:right} [dir="rtl"] .langopt-soon{margin-left:0;margin-right:auto} .cur-btn{display:inline-flex;align-items:center;justify-content:center;min-width:34px;height:34px;padding:0 10px;border:1px solid var(--line);background:rgba(255,255,255,.04);color:var(--cream);border-radius:10px;cursor:pointer;font-family:var(--t-mono);font-size:13px;font-weight:700;letter-spacing:.02em;transition:border-color .2s,background .2s,color .2s} .cur-btn:hover{border-color:var(--em);color:var(--em)} .curopt{display:flex;flex-direction:column;align-items:flex-start;gap:2px;padding:11px 13px;border:1px solid var(--line);background:rgba(255,255,255,.03);color:var(--cream);border-radius:12px;cursor:pointer;font-family:var(--t-body);text-align:left;transition:border-color .2s,background .2s,transform .15s} .curopt:hover{border-color:var(--em);background:color-mix(in srgb,var(--em) 12%,transparent);transform:translateY(-1px)} .curopt.on{border-color:var(--em);background:color-mix(in srgb,var(--em) 18%,transparent)} .curopt-name{font-size:14px;font-weight:600;line-height:1.25} .curopt-code{font-family:var(--t-mono);font-size:11.5px;color:var(--mut)} .curopt.on .curopt-code{color:var(--em)} [dir="rtl"] .curopt{align-items:flex-end;text-align:right} .pop-search{display:block;width:100%;margin:0 0 14px;padding:11px 14px;border:1px solid var(--line);background:rgba(255,255,255,.04);color:var(--cream);border-radius:12px;font-family:var(--t-body);font-size:15px;outline:none;transition:border-color .2s,background .2s;-webkit-appearance:none} .pop-search::placeholder{color:var(--mut)} .pop-search:focus{border-color:var(--em);background:color-mix(in srgb,var(--em) 8%,transparent)} .pop-empty{margin:14px 2px 0;font-size:.9rem;color:var(--mut)} @media(max-width:720px){ .head-right{gap:8px} .lang-btn{height:38px;padding:0 11px} .lang-globe{height:38px;width:38px} .cur-btn{height:38px;min-width:38px;padding:0 11px} } @media(max-width:420px){.langpop-grid{grid-template-columns:1fr}} /* ============ COULEUR DE SÉLECTION DU TEXTE ============ */ ::selection{background:var(--em);color:#04241a} ::-moz-selection{background:var(--em);color:#04241a} /* ============ SIMULATEUR TARIFS ============ */ .sim{max-width:640px;margin:40px auto 0;border:1px solid var(--line);border-radius:20px;padding:30px 28px;background:linear-gradient(160deg,rgba(47,227,155,.09),rgba(8,42,34,.5));text-align:left} .sim-title{font-family:var(--t-display);font-weight:800;font-size:clamp(1.3rem,3vw,1.8rem);margin:8px 0 22px} .sim-row{margin:16px 0} .sim-label{display:block;font-size:.95rem;color:var(--cream);margin-bottom:8px} .sim-ctrl{display:flex;align-items:center;gap:14px} .sim-ctrl input[type=range]{flex:1;accent-color:var(--em)} .sim-ctrl input[type=number]{width:140px;font-family:var(--t-body);font-size:16px;padding:10px 12px;border-radius:10px;border:1.6px solid var(--line);background:rgba(6,36,29,.5);color:#fff;outline:none} .sim-ctrl output{font-family:var(--t-mono);font-weight:700;color:var(--em);min-width:2.5ch;text-align:right} .sim-toggle{display:inline-flex;border:1px solid var(--line);border-radius:12px;overflow:hidden;margin:6px 0 20px} .sim-tab{padding:9px 16px;background:transparent;border:none;color:var(--mut);font-family:var(--t-body);font-size:.9rem;cursor:pointer;transition:background .2s,color .2s} .sim-tab.on{background:var(--em);color:#04241a;font-weight:700} .sim-out{margin:10px 0;font-size:1.05rem;color:#cfe7dd} .sim-out strong{color:var(--cream)} .sim-sub{font-size:.85rem;color:var(--mut)} .sim-hr{border:none;border-top:1px solid var(--line-soft);margin:20px 0} .sim-note{margin-top:18px;color:var(--mut)} /* ============ ARTICLES DE BLOG ============ */ .article{position:relative;z-index:2;padding-top:calc(var(--header-h) + 56px)} .article-wrap{max-width:760px;margin:0 auto} .art-title{font-size:clamp(2rem,4.6vw,3.2rem);font-weight:800;margin:14px 0 12px;line-height:1.08} .art-meta{font-family:var(--t-mono);font-size:12.5px;color:var(--mut);margin-bottom:22px} .art-lead{font-size:clamp(1.1rem,2.2vw,1.3rem);color:var(--cream);line-height:1.6;margin-bottom:8px} .article-body{color:#d8ece3;font-size:1.06rem;line-height:1.75} .article-body h2{font-family:var(--t-display);font-weight:800;font-size:clamp(1.35rem,3vw,1.9rem);color:var(--cream);margin:34px 0 12px;letter-spacing:-.02em} .article-body p{margin:0 0 16px} .article-body ul{margin:0 0 18px;padding-left:0} .article-body li{position:relative;padding-left:26px;margin:0 0 10px} .article-body li::before{content:"";position:absolute;left:2px;top:11px;width:8px;height:8px;border-radius:2px;background:var(--em);transform:rotate(45deg)} .article-body strong{color:var(--cream)} .art-sources{margin-top:36px;border-top:1px solid var(--line);padding-top:20px} .art-sources .mono-label{display:block;margin-bottom:12px} .art-sources ul{padding-left:0} .art-sources li{margin:0 0 8px;font-size:.95rem} .art-sources a{color:var(--blue);text-decoration:underline;overflow-wrap:anywhere} .art-sources a:hover{color:var(--em)} .art-faqtitle{font-family:var(--t-display);font-weight:800;font-size:clamp(1.5rem,3.4vw,2.1rem);text-align:center;margin-bottom:24px} .post-read{color:var(--em);font-weight:700} a.post{cursor:pointer} [dir="rtl"] .article-body li{padding-left:0;padding-right:26px} [dir="rtl"] .article-body li::before{left:auto;right:2px} /* ============ SECTIONS CLAIRES (aérer le vert) ============ */ /* ============ TOUCHES DE BLANC (fond vert conservé) ============ */ /* TOUCHES DE BLANC */ :root{--line:rgba(255,255,255,.16)} .why,.offer-card,.price,.post,.next-card,.cta-box,.sim,.feat,.blog-grid .post{ box-shadow:inset 0 1px 0 rgba(255,255,255,.14), 0 22px 50px -34px rgba(0,0,0,.55)} .why{background:rgba(255,255,255,.055);border:1px solid var(--line);border-radius:18px;overflow:hidden} .why:hover{background:rgba(255,255,255,.10)} .offer-card,.next-card,.price,.post{background-color:rgba(255,255,255,.04)} .faq-item{border-bottom-color:rgba(255,255,255,.14)} .header.scrolled{background:rgba(255,255,255,.07);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px)} .lang-btn,.lang-globe{background:rgba(255,255,255,.07)} .signup input[type=email]{background:rgba(255,255,255,.07)} .marquee{background:rgba(255,255,255,.04)} /* ============ FOND VERT ÉCLAIRCI (lueur blanche douce) ============ */ /* FOND VERT ECLAIRCI */ body{background: radial-gradient(1000px 620px at 84% -6%, rgba(255,106,44,.07), transparent 60%), radial-gradient(1000px 700px at 6% 6%, rgba(15,179,107,.09), transparent 60%), #ffffff fixed} /* ============ FIX : indicateur 'Faites défiler' sur écrans bas ============ */ /* FIX SCROLLCUE */ @media (max-height:900px){ .scrollcue{display:none} } /* ============ COUVERTURES BLOG / ARTICLES ============ */ /* COUVERTURES BLOG */ .post-img{position:relative;height:190px;display:flex;align-items:center;justify-content:center;overflow:hidden;background:linear-gradient(135deg,#0e5245,#082820)} .post-img::after{content:"";position:absolute;inset:0;z-index:0;background:radial-gradient(60% 72% at 50% 40%,color-mix(in srgb,var(--c,#3aeda6) 42%,transparent),transparent 72%)} .post-img svg{position:relative;z-index:1;width:74px;height:74px;fill:none;stroke:rgba(255,255,255,.92);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;filter:drop-shadow(0 6px 16px rgba(0,0,0,.35))} .post-img--guide{--c:#3aeda6}.post-img--auto{--c:#b07cff}.post-img--conf{--c:#5aa9ff}.post-img--conc{--c:#ffce6b}.post-img--rev{--c:#3aeda6}.post-img--start{--c:#b07cff}.post-img--comply{--c:#34e0c4} .art-cover{position:relative;height:230px;border-radius:20px;overflow:hidden;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#0e5245,#082820);margin:6px 0 26px} .art-cover::after{content:"";position:absolute;inset:0;z-index:0;background:radial-gradient(55% 70% at 50% 42%,color-mix(in srgb,var(--c,#3aeda6) 46%,transparent),transparent 72%)} .art-cover svg{position:relative;z-index:1;width:104px;height:104px;fill:none;stroke:rgba(255,255,255,.92);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;filter:drop-shadow(0 8px 20px rgba(0,0,0,.4))} /* ============ BOUTON RETOUR (articles) ============ */ .art-back{display:inline-flex;align-items:center;gap:8px;font-family:var(--t-mono);font-size:13px;letter-spacing:.04em;color:var(--mut);margin-bottom:18px;transition:color .2s,transform .2s} .art-back::before{content:"←";font-size:15px} .art-back:hover{color:var(--em)} .art-back:hover::before{transform:translateX(-3px)} [dir="rtl"] .art-back::before{content:"→"} /* ============ BLOCS RICHES ARTICLES (SEO) ============ */ /* BLOCS ARTICLE */ .art-tldr{background:linear-gradient(160deg,color-mix(in srgb,var(--grape) 16%,transparent),rgba(8,42,34,.6));border:1px solid var(--line);border-radius:18px;padding:24px 26px;margin:26px 0} .art-tldr-tag{display:inline-block;font-family:var(--t-mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:#fff;background:linear-gradient(90deg,var(--grape),var(--blue));padding:5px 12px;border-radius:999px;margin-bottom:14px} .art-tldr ul{padding-left:0;margin:0} .art-tldr li{position:relative;padding-left:24px;margin:0 0 10px;color:#e8f5ee} .art-tldr li::before{content:'';position:absolute;left:2px;top:10px;width:8px;height:8px;border-radius:2px;background:var(--em);transform:rotate(45deg)} .art-tablewrap{overflow-x:auto;margin:22px 0;border:1px solid var(--line);border-radius:16px} .art-table{width:100%;border-collapse:collapse;font-size:.98rem;min-width:480px} .art-table th,.art-table td{padding:13px 16px;text-align:left;border-bottom:1px solid var(--line-soft)} .art-table thead th{background:rgba(255,255,255,.06);color:var(--cream);font-family:var(--t-display);font-weight:700;font-size:.9rem} .art-table tbody td:first-child{color:var(--cream);font-weight:600} .art-table tbody tr:last-child td{border-bottom:none} .art-callout{border-radius:16px;padding:18px 20px;margin:22px 0;border:1px solid var(--line)} .art-callout p{margin:0;color:#e8f5ee} .art-callout--warn{background:color-mix(in srgb,var(--amber) 14%,rgba(8,42,34,.5));border-color:color-mix(in srgb,var(--amber) 40%,var(--line))} .art-callout--info{background:color-mix(in srgb,var(--blue) 12%,rgba(8,42,34,.5));border-color:color-mix(in srgb,var(--blue) 34%,var(--line))} .art-check{counter-reset:ck;padding-left:0;margin:20px 0} .art-check li{position:relative;padding:0 0 12px 42px;margin:0;color:#d8ece3} .art-check li::before{counter-increment:ck;content:counter(ck);position:absolute;left:0;top:-2px;width:28px;height:28px;border-radius:50%;background:var(--em);color:#04241a;font-family:var(--t-display);font-weight:800;font-size:14px;display:flex;align-items:center;justify-content:center} .art-ctabox{background:linear-gradient(135deg,color-mix(in srgb,var(--em) 20%,transparent),rgba(8,42,34,.6));border:1px solid color-mix(in srgb,var(--em) 34%,var(--line));border-radius:20px;padding:28px 26px;margin:30px 0;text-align:center} .art-ctabox h3{font-family:var(--t-display);font-weight:800;font-size:1.35rem;color:var(--cream);margin-bottom:8px} .art-ctabox p{color:#cfe7dd;margin-bottom:18px;max-width:56ch;margin-left:auto;margin-right:auto} .article-body h3{font-family:var(--t-display);font-weight:700;font-size:1.2rem;color:var(--cream);margin:22px 0 8px} [dir="rtl"] .art-table th,[dir="rtl"] .art-table td{text-align:right} [dir="rtl"] .art-tldr li{padding-left:0;padding-right:24px} [dir="rtl"] .art-tldr li::before{left:auto;right:2px} [dir="rtl"] .art-check li{padding:0 42px 12px 0} [dir="rtl"] .art-check li::before{left:auto;right:0} /* ============ PHOTOS DE COUVERTURE (réelles, avec repli illustration) ============ */ .post-photo,.art-photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:2} .art-photo{border-radius:20px} /* ============ SOURCES (encadré soigné) ============ */ /* SOURCES JOLI */ .art-sources{margin-top:38px;border:1px solid var(--line);border-radius:18px;padding:22px 24px;background:rgba(255,255,255,.035)} .art-sources .mono-label{display:block;margin-bottom:14px} .art-sources ul{padding-left:0;display:grid;gap:10px} .art-sources li{margin:0;font-size:.95rem} .art-sources a{display:flex;align-items:center;gap:11px;padding:12px 15px;border:1px solid var(--line);border-radius:12px;background:rgba(255,255,255,.03);color:var(--cream);text-decoration:none;line-height:1.4;transition:border-color .2s,background .2s,transform .15s;overflow-wrap:anywhere} .art-sources a::before{content:"↗";color:var(--em);font-weight:700;flex:none} .art-sources a:hover{border-color:var(--em);background:color-mix(in srgb,var(--em) 10%,transparent);transform:translateY(-1px)} [dir="rtl"] .art-sources a::before{content:"↖"} /* ===== COMPARATEUR "UNE JOURNÉE" (Sans / Avec Leapway) ===== */ .day-head{text-align:center;max-width:56ch;margin:0 auto} .day-badge{display:inline-block;font-family:var(--t-mono,monospace);font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--em);background:color-mix(in srgb,var(--em) 12%,transparent);border:1px solid color-mix(in srgb,var(--em) 30%,transparent);padding:6px 14px;border-radius:999px;margin-bottom:16px} .day-title{margin:0 auto} .day-sub{color:#cfe7dd;max-width:62ch;margin:16px auto 0;font-size:clamp(1rem,2vw,1.12rem);line-height:1.6} /* toggle */ .day-toggle{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;width:-moz-fit-content;width:fit-content;max-width:100%;gap:4px;margin:28px auto 0;padding:5px;background:rgba(255,255,255,.05);border:1px solid var(--line);border-radius:999px;position:relative} .day-tg-slider{display:none} .day-tg{appearance:none;border:0;cursor:pointer;font:inherit;font-weight:700;font-size:.95rem;color:#cfe7dd;background:transparent;padding:11px 22px;border-radius:999px;transition:background .25s,color .25s} .day-tg.on{background:linear-gradient(135deg,var(--em),var(--em-deep));color:#06251c;box-shadow:0 6px 18px color-mix(in srgb,var(--em) 28%,transparent)} #dayOff.on{background:linear-gradient(135deg,#ff8f8f,#e5484d);color:#2a0a0a;box-shadow:0 6px 18px rgba(229,72,77,.28)} /* wrapper to center */ .day .day-toggle-wrap{text-align:center} /* card */ .day-card{max-width:780px;margin:26px auto 0;background:rgba(255,255,255,.035);border:1px solid var(--line);border-radius:22px;padding:clamp(16px,3vw,26px);box-shadow:0 30px 80px rgba(0,0,0,.28),inset 0 1px 0 rgba(255,255,255,.05)} .day-panel--off{display:none} .day-card.is-off .day-panel--on{display:none} .day-card.is-off .day-panel--off{display:block} .day-card.is-off{border-color:color-mix(in srgb,#e5484d 34%,var(--line))} /* card head */ .day-cardhead{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;padding-bottom:16px;border-bottom:1px solid var(--line);margin-bottom:6px} .day-who{display:flex;align-items:center;gap:12px;min-width:0} .day-ava{flex:0 0 auto;width:40px;height:40px;border-radius:50%;display:grid;place-items:center;font-weight:800;color:#06251c} .day-ava--on{background:linear-gradient(135deg,var(--em),var(--em-deep))} .day-ava--off{background:linear-gradient(135deg,#ffb4b4,#e5484d);color:#2a0a0a} .day-whoi{display:flex;flex-direction:column;min-width:0} .day-whoi b{font-size:1rem} .day-whoi span{font-size:.82rem;color:#9fb8b0} .day-tag{font-family:var(--t-mono,monospace);font-size:.72rem;letter-spacing:.08em;padding:5px 12px;border-radius:999px;white-space:nowrap} .day-tag--on{color:var(--em);background:color-mix(in srgb,var(--em) 12%,transparent)} .day-tag--off{color:#ff9a9a;background:rgba(229,72,77,.12)} /* rows */ .day-rows{list-style:none;margin:0;padding:0} .day-row{display:grid;grid-template-columns:52px 1fr auto;align-items:center;gap:14px;padding:15px 4px;border-bottom:1px solid color-mix(in srgb,var(--line) 60%,transparent)} .day-row:last-child{border-bottom:0} .day-time{font-family:var(--t-mono,monospace);font-size:.82rem;color:#8fa9a1;font-weight:700} .day-txt{min-width:0} .day-txt b{display:block;font-size:.98rem;line-height:1.3} .day-txt span{display:block;font-size:.86rem;color:#a9c3ba;margin-top:3px;line-height:1.45} .day-ic{flex:0 0 auto;width:34px;height:34px;border-radius:10px;display:grid;place-items:center} .day-ic svg{width:18px;height:18px} .day-panel--on .day-ic{color:var(--em);background:color-mix(in srgb,var(--em) 12%,transparent)} .day-panel--off .day-ic{color:#ff9a9a;background:rgba(229,72,77,.12)} /* stats */ .day-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:18px} .day-stat{border-radius:14px;padding:15px 14px;border:1px solid var(--line)} .day-stat b{display:block;font-family:var(--t-display,inherit);font-weight:800;font-size:clamp(1.3rem,3vw,1.7rem);line-height:1} .day-stat span{display:block;font-size:.8rem;color:#a9c3ba;margin-top:6px} .day-stat--good{background:color-mix(in srgb,var(--em) 8%,transparent);border-color:color-mix(in srgb,var(--em) 26%,transparent)} .day-stat--good b{color:var(--em)} .day-stat--bad{background:rgba(229,72,77,.08);border-color:rgba(229,72,77,.26)} .day-stat--bad b{color:#ff9a9a} /* footer note */ .day-foot{margin:18px 0 0;font-size:.9rem;line-height:1.5;padding:13px 16px;border-radius:12px} .day-foot--on{background:color-mix(in srgb,var(--em) 8%,transparent);color:#dff5ec} .day-foot--on strong{color:var(--em)} .day-foot--off{background:rgba(229,72,77,.09);color:#f6dede} .day-foot--off strong{color:#ff9a9a} .day-cta{text-align:center;margin-top:26px} @media(max-width:640px){ .day-stats{gap:8px} .day-stat{padding:13px 9px;text-align:center} .day-stat b{font-size:1.4rem} .day-stat span{font-size:.72rem} .day-row{grid-template-columns:46px 1fr auto;gap:10px} .day-tg{padding:10px 16px;font-size:.9rem} } /* Simulateur : 3 cases de resultat (Pro / commission / total) */ .sim-results{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:20px 0 14px} .sim-res{background:rgba(255,255,255,.04);border:1px solid var(--line);border-radius:16px;padding:16px 16px 18px;display:flex;flex-direction:column;gap:4px} .sim-res-k{font-family:var(--t-mono);font-size:.72rem;letter-spacing:.06em;text-transform:uppercase;color:var(--mut)} .sim-res strong{font-family:var(--t-display);font-weight:800;font-size:clamp(1.3rem,3vw,1.7rem);line-height:1.05;color:#eafff6} .sim-res-sub{font-size:.78rem;color:var(--mut)} .sim-res--total{background:color-mix(in srgb,var(--em) 12%,transparent);border-color:color-mix(in srgb,var(--em) 34%,transparent)} .sim-res--total strong{color:var(--em)} @media(max-width:640px){.sim-results{grid-template-columns:1fr}} .sim-devis{margin:10px 0 0;font-size:.86rem;line-height:1.5;color:var(--amber);background:color-mix(in srgb,var(--amber) 10%,transparent);border:1px solid color-mix(in srgb,var(--amber) 26%,transparent);border-radius:12px;padding:11px 14px} .sim-devis strong{color:var(--amber)} /* ===== Calculateur de revenus ===== */ .calc-trust{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin-top:22px} .calc-chip{font-family:var(--t-mono);font-size:.78rem;letter-spacing:.02em;color:#cfe7dd;background:rgba(255,255,255,.04);border:1px solid var(--line);border-radius:999px;padding:7px 14px} #calc .sim-ctrl{flex-wrap:wrap} .calc-unit{font-family:var(--t-mono);font-weight:700;color:var(--em);font-size:1rem} .calc-hint{flex-basis:100%;margin:8px 0 0;font-size:.85rem;color:var(--mut)} .calc-hint strong{color:var(--cream);font-family:var(--t-mono)} .calc-save{margin:16px 0 0;font-size:1rem;line-height:1.55;color:#eafff6;background:color-mix(in srgb,var(--em) 12%,transparent);border:1px solid color-mix(in srgb,var(--em) 34%,transparent);border-radius:14px;padding:14px 16px} .calc-save strong{color:var(--em);font-family:var(--t-display);font-size:1.15rem} .calc-save-sub{display:block;margin-top:4px;font-size:.82rem;color:var(--mut)} .calc-cta{margin-top:24px;padding-top:22px;border-top:1px solid var(--line-soft);text-align:center} .calc-cta-t{font-family:var(--t-display);font-weight:800;font-size:clamp(1.1rem,2.6vw,1.35rem);color:var(--cream);margin:0 0 6px} .calc-cta-s{color:#cfe7dd;max-width:52ch;margin:0 auto 16px;font-size:.98rem} .art-steps{margin:14px 0 6px;padding-left:22px;display:grid;gap:12px} .art-steps li{color:#bcd6cb;line-height:1.6} .art-steps li strong{color:var(--cream)} /* Simulateur fusionné (revenus + coût) */ .sim-group-h{font-family:var(--t-mono);font-size:.74rem;letter-spacing:.08em;text-transform:uppercase;color:var(--em);margin:22px 0 10px} .sim-results--2{grid-template-columns:1fr 1fr} @media(max-width:640px){.sim-results--2{grid-template-columns:1fr}} .sim-res--rev{background:color-mix(in srgb,var(--em) 8%,transparent);border-color:color-mix(in srgb,var(--em) 24%,transparent)} .sim-net{margin:18px 0 4px;padding:18px 20px;border-radius:16px;background:linear-gradient(150deg,color-mix(in srgb,var(--em) 20%,transparent),color-mix(in srgb,var(--em) 8%,transparent));border:1px solid color-mix(in srgb,var(--em) 40%,transparent);text-align:center} .sim-net-k{display:block;font-family:var(--t-mono);font-size:.74rem;letter-spacing:.06em;text-transform:uppercase;color:#cfe7dd} .sim-net strong{display:block;font-family:var(--t-display);font-weight:800;font-size:clamp(1.8rem,5vw,2.6rem);line-height:1.05;color:var(--em);margin:4px 0 2px} .sim-net-sub{display:block;font-size:.82rem;color:var(--mut)} /* Panneau vert derriere le texte des articles de blog */ .art-panel{background:linear-gradient(180deg,rgba(16,86,70,.46),rgba(9,52,43,.52));border:1px solid var(--line);border-radius:28px;padding:clamp(24px,4vw,56px);margin-top:10px;box-shadow:0 34px 90px rgba(0,0,0,.24),inset 0 1px 0 rgba(255,255,255,.05)} .art-panel .art-title{margin-top:10px} @media(max-width:640px){.art-panel{border-radius:20px;padding:22px 18px}} /* ===================================================================== THÈME CLAIR — surcharges (blanc + vert + orange). Contenu inchangé. ===================================================================== */ /* Glows du héro adoucis + accent orange */ .hero::before{background:radial-gradient(circle,rgba(15,179,107,.08),transparent 70%)!important} .hero::after{background:radial-gradient(circle,rgba(255,106,44,.07),transparent 70%)!important} /* "Le monde entier" en dégradé vert lisible (au lieu du halo) */ .hero-title .l2{text-shadow:none!important;background:linear-gradient(135deg,#0FB36B,#2BC98A);-webkit-background-clip:text;background-clip:text;color:transparent!important} /* Textes gris clair -> encre douce sur blanc */ .hero-sub,.page-hero .page-sub,.cta-band p,.cta-sub,.feat-body p,.why p,.price-desc,.price-list li, .legal p,.legal li,.day-sub,.offer-card p,.next-card p,.marquee-track span{color:var(--mut)!important} [style*="cfe7dd"]{color:var(--mut)!important} .legal strong,.hero-sub strong,[style*="var(--cream)"]{color:var(--cream)!important} .hl{color:var(--em-deep)!important} /* Cartes -> blanches */ .why,.price,.offer-card,.next-card{background:#fff!important;border:1px solid var(--line)!important;box-shadow:0 2px 10px rgba(11,30,22,.05)} .why:hover,.feat:hover{background:var(--mint)!important} .price-feat{border-color:var(--em)!important;box-shadow:0 18px 50px -28px rgba(15,179,107,.45)!important} .price:hover{border-color:var(--em)!important} /* Marquee clair, plus petit et discret */ .marquee{background:var(--mint)!important;border-top-color:var(--line)!important;border-bottom-color:var(--line)!important;padding:13px 0!important} .marquee-track span{color:#9FBAAF!important;font-size:clamp(.82rem,1.5vw,1.02rem)!important;font-weight:700!important;letter-spacing:.02em!important;padding:0 16px!important} .marquee-track span.sep{color:var(--orange)!important;padding:0 4px!important} /* Nav centrée entre le logo et la droite (au lieu de centrée sur la page) */ .header-inner{grid-template-columns:auto 1fr auto!important} /* En-tête au scroll + burger */ .header.scrolled{background:rgba(255,255,255,.85)!important;border-bottom-color:var(--line)!important} .burger span{background:var(--cream)!important} /* Footer clair */ .footer{background:var(--mint)!important;border-top-color:var(--line)!important} /* Bloc de lancement -> clair */ .cta-box{background:linear-gradient(135deg,rgba(15,179,107,.08),var(--mint))!important;border-color:var(--line)!important} .signup input[type=email]{background:#fff!important;color:var(--cream)!important;border-color:var(--line)!important} .signup input[type=email]::placeholder{color:var(--mut)!important} /* Intro -> clair */ #intro{background:var(--mint)!important} .intro-title{color:var(--mut)!important} .intro-skip{background:#fff!important;color:var(--cream)!important;border-color:var(--line)!important} /* Boutons */ .btn-line{background:#fff!important;color:var(--em-deep)!important;border-color:var(--line)!important} .btn-line:hover{border-color:var(--em)!important;color:var(--em-deep)!important} /* Cartes légales "todo" restent ambre */ .legal .todo{color:var(--orange-deep)!important} /* Logo : contour de maison blanc -> encre sur fond clair */ [stroke="#eafff6"]{stroke:var(--cream)!important} .logo .wm,.footer-brand .wm,.intro-wm{color:var(--cream)} /* Polices d'entrée du simulateur en clair */ .sim{background:linear-gradient(160deg,rgba(15,179,107,.06),var(--mint))!important;border-color:var(--line)!important} .sim-ctrl input[type=number]{background:#fff!important;color:var(--cream)!important;border-color:var(--line)!important} .sim-res{background:#fff!important;border-color:var(--line)!important} .sim-res strong{color:var(--cream)!important} .sim-net{background:linear-gradient(150deg,rgba(15,179,107,.16),rgba(15,179,107,.06))!important} .sim-net-k{color:var(--em-deep)!important} /* Cartes sombres décoratives -> panneau clair pour lisibilité du texte hérité */ .art-panel{background:#fff!important;box-shadow:0 20px 50px -30px rgba(11,60,44,.2)!important} .pos-card,.next-card{color:var(--cream)} /* Champs de recherche / e-mail en clair */ .faq-search input,input[type=search],.pop-search{background:#fff!important;color:var(--cream)!important;border:1px solid var(--line)!important} .faq-search input::placeholder,input[type=search]::placeholder{color:var(--mut)!important} .faq-search-ic{color:var(--mut)!important} /* ===== Articles de blog en clair (lisibilité) ===== */ .article-body{color:#3F5A51!important} .article-body strong,.article-body h2,.article-body h3{color:var(--cream)!important} .faq-item p{color:#4B655C!important} .art-tldr{background:linear-gradient(160deg,rgba(108,76,240,.06),var(--mint))!important;border-color:var(--line)!important} .art-tldr li{color:#3F5A51!important} .art-tldr li strong,.art-tldr li b{color:var(--cream)!important} .art-callout p{color:#3F5A51!important} .art-callout--warn{background:color-mix(in srgb,var(--amber) 12%,#ffffff)!important;border-color:color-mix(in srgb,var(--amber) 40%,var(--line))!important} .art-callout--info{background:color-mix(in srgb,var(--blue) 8%,#ffffff)!important;border-color:color-mix(in srgb,var(--blue) 30%,var(--line))!important} .art-check li{color:#3F5A51!important} .art-steps li{color:#3F5A51!important} .art-table thead th{background:var(--mint)!important;color:var(--cream)!important} .art-table tbody td{color:#3F5A51!important} .art-table tbody td:first-child{color:var(--cream)!important} .art-sources{background:#fff!important} .art-sources a{background:#fff!important;color:var(--cream)!important} .art-note{color:var(--mut)!important} /* ================================================================ THÈME CLAIR v2 — PROFONDEUR + COULEUR + ORANGE (demande client) ================================================================ */ /* Profondeur générique sur les cartes */ .why,.price,.offer-card,.next-card,.feat,.pos-visual{box-shadow:0 12px 34px -16px rgba(11,60,44,.20)!important} .why:hover,.feat:hover{box-shadow:0 20px 48px -18px rgba(15,179,107,.30)!important;transform:translateY(-4px)} .price-feat{box-shadow:0 26px 60px -26px rgba(15,179,107,.5)!important} /* --- Comparateur "journée type" : toggle lisible + coloré --- */ .day-tg{color:#4B655C!important} .day-tg.on{color:#fff!important} #dayOff.on{background:linear-gradient(135deg,#FF7A2E,#F43F5E)!important;color:#fff!important;box-shadow:0 10px 22px -8px rgba(244,63,94,.5)!important} #dayOn.on{background:linear-gradient(135deg,var(--em),var(--em-deep))!important;color:#fff!important;box-shadow:0 10px 22px -8px rgba(15,179,107,.5)!important} /* carte opaque + profondeur */ .day-card{background:#fff!important;box-shadow:0 34px 80px -34px rgba(11,60,44,.4)!important} .day-whoi b{color:var(--cream)!important} .day-whoi span,.day-time{color:#5C7A70!important} .day-txt b{color:var(--cream)!important}.day-txt span{color:#5C7A70!important} .day-tag--off{color:#E1471D!important;background:rgba(255,106,44,.12)!important} .day-tag--on{color:var(--em-deep)!important;background:rgba(15,179,107,.12)!important} .day-panel--off .day-ic{color:#E1471D!important;background:rgba(255,106,44,.12)!important} .day-panel--on .day-ic{color:var(--em-deep)!important;background:rgba(15,179,107,.12)!important} .day-foot{background:var(--mint)!important;border-radius:14px!important;padding:14px 16px!important;margin-top:14px!important} /* stats visibles + colorées + profondeur */ .day-stat{box-shadow:0 4px 12px rgba(11,30,22,.06)!important} .day-stat span{color:#5C7A70!important} .day-stat--good{background:color-mix(in srgb,var(--em) 15%,#fff)!important;border-color:color-mix(in srgb,var(--em) 45%,var(--line))!important} .day-stat--good b{color:var(--em-deep)!important} .day-stat--bad{background:color-mix(in srgb,#FF6A2C 13%,#fff)!important;border-color:color-mix(in srgb,#FF6A2C 42%,var(--line))!important} .day-stat--bad b{color:#E1471D!important} .day-badge{color:var(--orange-deep)!important;background:color-mix(in srgb,#FF6A2C 12%,#fff)!important;border-color:color-mix(in srgb,#FF6A2C 34%,var(--line))!important} /* --- Le "device" à droite (appmock) : dashboard CLAIR lisible + profondeur --- */ .appmock-win{background:#fff!important;border-color:var(--line)!important;box-shadow:0 46px 100px -34px rgba(11,60,44,.55),0 0 0 1px rgba(11,30,22,.04) inset!important} .appmock-tabs span{color:#5C7A70!important} .appmock-h,.appmock-occ span{color:#7C968C!important} .appmock-name{color:var(--cream)!important} .appmock-track{background:#E4EFE9!important} .appmock-card-info{color:var(--cream)} /* --- "Pourquoi" : cartes colorées, coches solides, profondeur --- */ .offer-card{position:relative;overflow:hidden} .offer-card::before{content:"";position:absolute;top:0;left:0;right:0;height:4px;background:var(--ac,var(--em))} .offer-card li{color:#3F5A51!important} .offer-card li::before{color:var(--em-deep)!important;font-weight:900!important} .offer-card:nth-child(2n)::before{background:linear-gradient(90deg,#FF6A2C,#FF9F45)} .offer-card:nth-child(3n)::before{background:linear-gradient(90deg,#2F6BFF,#5B8DEF)} .why p,.feat-body p{color:#3F5A51!important} .why-k{color:var(--em-deep)!important} /* --- CTA lancement : "pop-up" verte qui ressort --- */ .cta-box{background:linear-gradient(150deg,#0F5748,#0A3931)!important;border:1px solid rgba(255,255,255,.1)!important;box-shadow:0 44px 96px -36px rgba(8,50,38,.6)!important} .cta-box .cta-title{color:#fff!important} .cta-box .cta-sub,.cta-box .signup-note,.cta-box .signup-consent{color:#cfe7dd!important} .cta-box .mono-label{color:var(--em-bright)!important} .cta-box .signup input[type=email]{background:rgba(255,255,255,.1)!important;color:#fff!important;border-color:rgba(255,255,255,.2)!important} .cta-box .signup input[type=email]::placeholder{color:#9fc4b6!important} /* ================================================================ ARTICLES DE BLOG — fond VERT, titres orange/vert, texte coloré ================================================================ */ .art-panel{background:linear-gradient(165deg,#0F5748 0%,#0A3931 100%)!important;border:1px solid rgba(255,255,255,.08)!important; box-shadow:0 40px 100px -40px rgba(8,50,38,.55)!important;color:#dcefe6!important} .art-panel .mono-label{color:var(--em-bright)!important} .art-title{color:#fff!important} .art-meta{color:#7fd3b0!important} .art-lead{color:#eafff6!important} .article-body{color:#cfe6dc!important} .article-body h2{background:linear-gradient(90deg,#FF7A2E,#FF9F45);-webkit-background-clip:text;background-clip:text;color:transparent!important} .article-body h3{color:var(--em-bright)!important} .article-body strong{color:#fff!important} .article-body a{color:var(--em-bright)!important} .art-tldr{background:rgba(255,255,255,.06)!important;border-color:rgba(255,255,255,.13)!important} .art-tldr li{color:#e8f5ee!important} .art-tldr li strong,.art-tldr li b{color:#fff!important} .art-callout p{color:#eafff6!important} .art-callout--warn{background:color-mix(in srgb,var(--amber) 18%,rgba(8,42,34,.5))!important;border-color:color-mix(in srgb,var(--amber) 45%,transparent)!important} .art-callout--info{background:color-mix(in srgb,var(--blue) 16%,rgba(8,42,34,.5))!important;border-color:color-mix(in srgb,var(--blue) 38%,transparent)!important} .art-check li{color:#cfe6dc!important}.art-check li strong{color:#fff!important} .art-steps li{color:#cfe6dc!important}.art-steps li strong{color:#fff!important} .art-table thead th{background:rgba(255,255,255,.08)!important;color:#fff!important} .art-table tbody td{color:#cfe6dc!important} .art-table tbody td:first-child{color:#fff!important} .art-note{color:#8fd8bb!important} .art-sources{background:rgba(255,255,255,.05)!important;border-color:rgba(255,255,255,.1)!important} .art-sources .mono-label{color:var(--em-bright)!important} .art-sources a{background:rgba(255,255,255,.05)!important;border-color:rgba(255,255,255,.12)!important;color:#eafff6!important} .art-ctabox{background:rgba(255,255,255,.07)!important;border:1px solid rgba(255,255,255,.14)!important} .art-ctabox h3{color:#fff!important}.art-ctabox p{color:#dcefe6!important} /* Carte "partenaire / centraliser" -> pop-up verte lisible */ [style*="8,42,34,.45"]{background:linear-gradient(150deg,#0F5748,#0A3931)!important;border-color:rgba(255,255,255,.1)!important;box-shadow:0 40px 90px -38px rgba(8,50,38,.55)!important} [style*="8,42,34,.45"] .mono-label{color:var(--em-bright)!important} [style*="8,42,34,.45"] h2{color:#fff!important} [style*="8,42,34,.45"] p{color:#dcefe6!important} [style*="8,42,34,.45"] strong{color:#fff!important} /* ================================================================ FOOTER + bandes "mode Leapway" — vert profond des blogs ================================================================ */ .footer{background:linear-gradient(180deg,#0F5748 0%,#082A21 100%)!important;border-top:1px solid rgba(255,255,255,.08)!important;box-shadow:0 -30px 80px -50px rgba(8,50,38,.6)} .footer-inner{border-bottom-color:rgba(255,255,255,.1)!important} .footer-brand .wm{color:#fff!important} .footer-brand .dot{color:var(--em-bright)!important} .footer-brand p{color:#a9c9bd!important} .footer-apps-label{color:var(--em-bright)!important} .appbtn{background:rgba(255,255,255,.06)!important;border-color:rgba(255,255,255,.14)!important;color:#fff!important} .appbtn-txt small{color:#9fc0b4!important} .appbtn-txt b{color:#fff!important} .footer-nav a{color:#bcd8cb!important}.footer-nav a:hover{color:#fff!important} .social{background:rgba(255,255,255,.06)!important;border-color:rgba(255,255,255,.14)!important;color:#dcefe6!important} .footer-bottom{color:#7fae9e!important;border-top-color:rgba(255,255,255,.08)!important} /* ================================================================ v3 — PROFONDEUR + ORANGE + BANDES VERTES "mode Leapway" ================================================================ */ /* + de profondeur : ombres plus douces et prononcees derriere les cartes */ .why,.price,.offer-card,.next-card,.feat,.pos-visual,.day-stat,.appmock-chip,.appmock-card{ box-shadow:0 22px 55px -24px rgba(11,60,44,.30), 0 4px 12px -6px rgba(11,60,44,.10)!important} .why:hover,.feat:hover,.offer-card:hover{box-shadow:0 30px 66px -26px rgba(15,179,107,.34)!important;transform:translateY(-5px)} .price-feat{box-shadow:0 34px 74px -28px rgba(15,179,107,.5)!important} /* ORANGE : mots surlignes en degrade vert -> orange (partout) */ .hl{background:linear-gradient(100deg,#0FB36B 0%,#FF7A2E 100%)!important;-webkit-background-clip:text!important;background-clip:text!important;color:transparent!important} /* quelques reperes en orange */ .feat-num{color:var(--orange)!important} .feat-num:nth-child(even){color:var(--em-deep)!important} /* BANDE VERTE "mode Leapway" — section positionnement de l'accueil */ .pos-band{background:linear-gradient(165deg,#0F5748 0%,#0A3931 100%);position:relative;z-index:2; box-shadow:inset 0 1px 0 rgba(255,255,255,.06)} .pos-band .mono-label{color:var(--em-bright)!important} .pos-band .sec-title{color:#fff!important} .pos-band .hl{background:linear-gradient(100deg,#39E39C,#FFB061)!important;-webkit-background-clip:text!important;background-clip:text!important;color:transparent!important} .pos-band .pos-text p{color:#cfe7dd!important} .pos-band .pos-text p [style*="cream"],.pos-band .pos-text strong{color:#fff!important} .pos-band [style*="cfe7dd"]{color:#cfe7dd!important} /* ===== Bande "poste de commande" : ordinateur portable + chat ===== */ .desk-band{background:linear-gradient(165deg,#0F5748 0%,#0A3931 100%);position:relative;z-index:2} .desk-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:48px;align-items:center} @media(max-width:900px){.desk-grid{grid-template-columns:1fr;gap:38px}.laptop{order:-1}} .desk-band .mono-label{color:var(--em-bright)!important} .desk-band .sec-title{color:#fff!important} .desk-band .hl{background:linear-gradient(100deg,#39E39C,#FFB061)!important;-webkit-background-clip:text!important;background-clip:text!important;color:transparent!important} .desk-p{color:#cfe7dd;margin-top:16px;max-width:52ch;font-size:1.08rem} .desk-chips{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px;list-style:none;padding:0} .desk-chips li{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.14);color:#eafff6;border-radius:999px;padding:8px 14px;font-size:.9rem;font-weight:600} .desk-chips li::before{content:"✓ ";color:var(--em-bright)} .laptop{position:relative;max-width:600px;margin:0 auto} .lap-screen{background:#fff;border-radius:14px 14px 0 0;overflow:hidden;box-shadow:0 54px 110px -34px rgba(0,0,0,.55)} .lap-bar{display:flex;align-items:center;gap:7px;padding:10px 14px;background:#F2FAF6;border-bottom:1px solid var(--line)} .ld{width:11px;height:11px;border-radius:50%}.ld.r{background:#FF5F57}.ld.y{background:#FEBC2E}.ld.g{background:#28C840} .lap-url{flex:1;background:#fff;border:1px solid var(--line);border-radius:8px;font-family:var(--t-mono);font-size:11px;color:var(--mut);padding:4px 10px;margin-left:6px} .lap-chat{padding:16px;display:flex;flex-direction:column;gap:9px;background:#fff;min-height:300px} .lap-chat-h{display:flex;align-items:center;gap:10px;padding-bottom:10px;border-bottom:1px solid var(--line);margin-bottom:4px} .lap-ava{width:38px;height:38px;border-radius:11px;background:linear-gradient(135deg,#25D366,#128C7E);display:grid;place-items:center;color:#fff;font-weight:800;flex:none} .lap-chat-h b{display:block;font-size:14px;color:var(--cream)}.lap-chat-h span{font-size:11px;color:var(--mut)} .lap-badge{margin-left:auto;font-family:var(--t-mono);font-size:10px;background:rgba(15,179,107,.12);color:var(--em-deep);padding:4px 9px;border-radius:999px} .lb{max-width:78%;padding:9px 13px;border-radius:14px;font-size:13px;line-height:1.4} .lb.them{background:#EEF4F1;color:#0B1E16;align-self:flex-start;border-bottom-left-radius:5px} .lb.me{background:#DCF8C6;color:#0B1E16;align-self:flex-end;border-bottom-right-radius:5px} .lb.sys{align-self:center;background:rgba(15,179,107,.12);color:var(--em-deep);font-weight:600;font-size:11.5px;border-radius:999px;padding:6px 14px} .lap-foot{height:14px;background:linear-gradient(#e6efeb,#c9dcd3);border-radius:0 0 12px 12px;margin:0 auto;width:calc(100% + 40px);max-width:640px;position:relative;left:-20px;box-shadow:0 18px 28px -12px rgba(0,0,0,.45)} .lap-foot::after{content:"";position:absolute;top:0;left:50%;transform:translateX(-50%);width:60px;height:5px;border-radius:0 0 6px 6px;background:#bcd0c7} .lap-chip{position:absolute;background:#fff;border-radius:14px;padding:9px 13px;display:flex;align-items:center;gap:9px;box-shadow:0 22px 46px -14px rgba(0,0,0,.4);animation:deskbob 5.5s ease-in-out infinite} .lap-chip>span{width:32px;height:32px;border-radius:9px;display:grid;place-items:center;color:#fff;font-weight:800;flex:none} .lap-chip b{display:block;font-size:13px;font-weight:800;color:#0B1E16}.lap-chip small{font-size:10.5px;color:#5b7a6f} .lap-chip--pay{top:-18px;right:-12px}.lap-chip--pay>span{background:linear-gradient(135deg,#0FB36B,#39E39C)} .lap-chip--ia{bottom:18px;left:-26px;animation-delay:-2.5s}.lap-chip--ia>span{background:linear-gradient(135deg,#FF6A2C,#FF9F45)} @keyframes deskbob{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}} @media(max-width:520px){.lap-chip{display:none}} @media(prefers-reduced-motion:reduce){.lap-chip{animation:none}} /* Lisibilite du bas du comparateur (texte trop pale) */ .day-foot--on{color:#3F5A51!important;background:color-mix(in srgb,var(--em) 10%,#fff)!important} .day-foot--off{color:#7A4A44!important;background:color-mix(in srgb,#FF6A2C 9%,#fff)!important} .day-foot--on strong{color:var(--em-deep)!important} .day-foot--off strong{color:#E1471D!important} /* ===== Cartes "Cinq outils" enrichies : icônes colorées + profondeur ===== */ .why{position:relative;overflow:hidden;border-radius:18px!important;padding-top:32px!important} .why::before{content:"";position:absolute;top:0;left:0;right:0;height:4px; background:linear-gradient(90deg,var(--wc,var(--em)),color-mix(in srgb,var(--wc,var(--em)) 45%,#fff))} .why-ic{width:50px;height:50px;border-radius:14px;display:grid;place-items:center;color:#fff;margin-bottom:16px; background:linear-gradient(135deg,var(--wc,var(--em)),color-mix(in srgb,var(--wc,var(--em)) 62%,#0a3931)); box-shadow:0 10px 24px -10px var(--wc,var(--em))} .why-ic svg{width:25px;height:25px} .why-k{position:absolute!important;top:18px;right:18px;font-size:13px;font-weight:700;color:var(--wc,var(--em))!important;opacity:.55} .why h3{margin-bottom:8px} .why:hover{transform:translateY(-5px)} .why:hover .why-ic{transform:scale(1.06) rotate(-4deg);transition:transform .3s} /* ===== Vrais boutons : .btn-line plus marqué (contour vert + fond teinté) ===== */ .btn-line{background:rgba(15,179,107,.08)!important;border:1.7px solid var(--em)!important;color:var(--em-deep)!important;font-weight:700!important} .btn-line:hover{background:rgba(15,179,107,.16)!important;border-color:var(--em-deep)!important;color:var(--em-deep)!important} /* ===== Header : boutons langue/devise visibles (vrais boutons) ===== */ .lang-btn,.lang-globe,.cur-btn{background:#fff!important;border:1.5px solid var(--line)!important;color:var(--cream)!important;box-shadow:0 2px 8px rgba(11,30,22,.07)!important} .lang-btn:hover,.lang-globe:hover,.cur-btn:hover{border-color:var(--em)!important;color:var(--em-deep)!important;transform:translateY(-1px)} .header.scrolled{border-bottom:1px solid rgba(15,179,107,.18)!important} /* ============================================================ MINI-VISUELS (vignettes) dans les cartes fonctionnalités Style GuestLucky : badges canaux, mini-graph, chat, checklist. Décoratif (aria-hidden) → neutre en langue, aucun impact SEO. ============================================================ */ .why-viz{margin-top:16px;padding:12px;border-radius:13px; background:linear-gradient(160deg,color-mix(in srgb,var(--wc,var(--em)) 7%,#fff),#fff); border:1px solid color-mix(in srgb,var(--wc,var(--em)) 20%,var(--line)); box-shadow:inset 0 1px 0 #fff, 0 8px 20px -14px color-mix(in srgb,var(--wc,var(--em)) 55%,transparent); display:flex;align-items:center;gap:8px;flex-wrap:wrap;min-height:56px} /* -- Badges canaux (Airbnb / Booking / Direct) -- */ .vz-chan{gap:7px} .chan{font-size:12px;font-weight:700;letter-spacing:.2px;padding:6px 11px;border-radius:9px; background:#fff;border:1.4px solid var(--line);color:#5C7A70;box-shadow:0 3px 8px -5px rgba(11,30,22,.4)} .chan.on{background:linear-gradient(135deg,var(--em),var(--em-deep));border-color:transparent;color:#fff; box-shadow:0 8px 18px -8px var(--em)} .chan.on::before{content:"● ";font-size:9px;vertical-align:1px} /* -- Chat auto (bulles + badge ✦) -- */ .vz-chat{gap:6px} .vb{height:12px;border-radius:7px;display:inline-block} .vb.them{width:74px;background:#EAF1EE;border:1px solid var(--line)} .vb.me{width:52px;background:linear-gradient(135deg,color-mix(in srgb,var(--wc,var(--em)) 26%,#fff),color-mix(in srgb,var(--wc,var(--em)) 12%,#fff));border:1px solid color-mix(in srgb,var(--wc,var(--em)) 30%,var(--line))} .vb.sm{width:40px} .vauto{margin-left:auto;font-size:11px;font-weight:800;color:#fff;padding:5px 10px 5px 8px;border-radius:20px; display:inline-flex;align-items:center;gap:4px; background:linear-gradient(135deg,var(--wc,var(--orange)),color-mix(in srgb,var(--wc,var(--orange)) 60%,#0a3931)); box-shadow:0 8px 18px -9px var(--wc,var(--orange))} .vauto svg{width:12px;height:12px;flex:none} /* -- Mini bar-chart -- */ .vz-chart{gap:5px;align-items:flex-end;height:56px} .vz-chart i{width:16px;height:var(--b,26px);border-radius:5px 5px 2px 2px;display:inline-block;flex:none; background:linear-gradient(180deg,color-mix(in srgb,var(--wc,var(--em)) 92%,#fff),color-mix(in srgb,var(--wc,var(--em)) 55%,#fff))} .vz-chart i:last-of-type{background:linear-gradient(180deg,#FF6A2C,#FF9F45)} .vz-chart .vamt{margin-left:auto;align-self:center;font-size:13px;font-weight:800;color:var(--em-deep); display:inline-flex;align-items:center;gap:4px} .vz-chart .vamt::before{content:"▲";font-size:9px;color:var(--em)} /* -- Checklist conformité -- */ .vz-check{flex-direction:column;align-items:stretch;gap:7px;min-height:0} .ck{display:flex;align-items:center;gap:9px;font-size:0} .ck b{width:19px;height:19px;border-radius:6px;flex:none;display:grid;place-items:center; background:linear-gradient(135deg,var(--wc,var(--em)),color-mix(in srgb,var(--wc,var(--em)) 60%,#0a3931)); box-shadow:0 5px 12px -6px var(--wc,var(--em))} .ck b::after{content:"✓";font-size:11px;font-weight:900;color:#fff} .ck i{height:8px;border-radius:5px;background:color-mix(in srgb,var(--wc,var(--em)) 16%,#EAF1EE);flex:1} .ck:nth-child(1) i{max-width:78%} .ck:nth-child(2) i{max-width:60%} .ck:nth-child(3) i{max-width:70%} /* -- Chips langues (multilingue) -- */ .vz-lang{gap:6px} .lchip{font-size:11px;font-weight:800;letter-spacing:.5px;padding:5px 9px;border-radius:8px; background:#fff;border:1.3px solid var(--line);color:#5C7A70} .lchip.on{background:linear-gradient(135deg,var(--wc,var(--em)),var(--em-deep));border-color:transparent;color:#fff} .vz-lang .vmore{font-size:11px;font-weight:700;color:var(--mut);margin-left:2px} /* ===== Mini-listing (fausse annonce) dans la carte Réservations ===== */ .mini-listing{margin-bottom:20px;border-radius:15px;overflow:hidden;background:#fff; border:1px solid var(--line);box-shadow:0 16px 34px -20px rgba(11,60,44,.4)} .ml-photo{position:relative;height:104px; background:linear-gradient(135deg,#0FB36B 0%,#0A8F57 45%,#2F6BFF 120%)} .ml-photo::after{content:"";position:absolute;inset:0; background:radial-gradient(120% 90% at 80% -10%,rgba(255,255,255,.32),transparent 60%)} .ml-live{position:absolute;top:10px;left:10px;z-index:2;font-size:10px;font-weight:800;letter-spacing:.4px; color:#0A8F57;background:#fff;padding:4px 9px;border-radius:20px;box-shadow:0 4px 10px -4px rgba(0,0,0,.35)} .ml-live::before{content:"";display:inline-block;width:6px;height:6px;border-radius:50%;background:#0FB36B;margin-right:5px;vertical-align:1px;box-shadow:0 0 0 3px rgba(15,179,107,.25)} .ml-rate{position:absolute;top:10px;right:10px;z-index:2;font-size:11px;font-weight:800;color:#0B1E16; background:rgba(255,255,255,.94);padding:4px 9px;border-radius:20px;box-shadow:0 4px 10px -4px rgba(0,0,0,.35)} .ml-rate::before{content:"★";color:#FF9F45;margin-right:3px} .ml-body{padding:13px 15px 15px} .ml-title{font-family:var(--t-display);font-weight:700;font-size:1.02rem;color:#0B1E16!important;margin:0 0 3px} .ml-loc{font-size:.82rem;color:#5C7A70;margin:0 0 12px} .ml-row2{display:flex;align-items:center;justify-content:space-between;gap:10px} .ml-price{font-family:var(--t-display);font-weight:800;font-size:1.15rem;color:#0A8F57} .ml-price small{font-weight:600;font-size:.72rem;color:#5C7A70} .ml-cta{width:40px;height:40px;border-radius:11px;display:grid;place-items:center;color:#fff;font-size:1.1rem;font-weight:800; background:linear-gradient(135deg,#FF6A2C,#FF9F45);box-shadow:0 10px 22px -10px #FF6A2C} /* ============================================================ BANDE VERTE TARIFS (tz) + PANNEAU QUESTIONS (fz) ============================================================ */ /* --- Bande verte "Gratuit pour commencer" --- */ .tz-band{background:linear-gradient(165deg,#0F5748 0%,#0A3931 100%);position:relative;z-index:2; box-shadow:inset 0 1px 0 rgba(255,255,255,.06)} .tz-wrap{display:grid;grid-template-columns:1.05fr .95fr;gap:52px;align-items:center} .tz-band .mono-label{color:var(--em-bright)!important} .tz-band .sec-title{color:#fff!important;max-width:18ch} .tz-p{color:#cfe7dd!important;font-size:clamp(1rem,2vw,1.14rem);margin:16px 0 26px;max-width:52ch} @media(max-width:900px){.tz-wrap{grid-template-columns:1fr;gap:34px}.tz-card{order:-1}} /* fausse carte tarif (produit) */ .tz-card{background:#fff;border-radius:20px;padding:22px 24px 20px; box-shadow:0 44px 90px -34px rgba(0,0,0,.55);border:1px solid rgba(255,255,255,.5);position:relative} .tzc-top{display:flex;align-items:center;gap:10px;padding-bottom:16px;margin-bottom:6px;border-bottom:1px solid var(--line)} .tzc-logo{width:34px;height:34px;border-radius:10px;display:grid;place-items:center;color:#fff;flex:none; background:linear-gradient(135deg,#0FB36B,#0A8F57);box-shadow:0 8px 18px -8px #0FB36B} .tzc-logo svg{width:19px;height:19px} .tzc-name{font-family:var(--t-display);font-weight:800;font-size:1.05rem;color:#0B1E16} .tzc-pill{margin-left:auto;font-size:11px;font-weight:800;color:#0A8F57;background:rgba(15,179,107,.12); border:1px solid rgba(15,179,107,.3);padding:5px 10px;border-radius:20px} .tzc-row{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:13px 0;border-bottom:1px dashed var(--line)} .tzc-lab{color:#5C7A70;font-size:.96rem;font-weight:600} .tzc-val{font-family:var(--t-display);font-weight:800;font-size:1.32rem;color:#0B1E16;display:flex;align-items:baseline;gap:8px} .tzc-val small{font-size:.66rem;font-weight:700;color:#FF6A2C;letter-spacing:.2px} .tzc-free{color:#0A8F57} .tzc-muted{color:#5C7A70;font-size:1.1rem} .tzc-foot{margin-top:14px;font-size:.86rem;color:#5C7A70;display:flex;align-items:center;gap:7px} .tzc-foot::before{content:"✓";display:grid;place-items:center;width:18px;height:18px;border-radius:50%; background:linear-gradient(135deg,#0FB36B,#0A8F57);color:#fff;font-size:11px;font-weight:900;flex:none} /* --- Panneau clair "Vous avez des questions ?" --- */ .fz-panel{position:relative;overflow:hidden;text-align:center;border-radius:26px;padding:56px 32px 52px; background:linear-gradient(160deg,#F3FBF7 0%,#EAF6F0 100%);border:1px solid var(--line); box-shadow:0 30px 70px -40px rgba(11,60,44,.4)} .fz-panel::before{content:"";position:absolute;top:0;left:0;right:0;height:5px; background:linear-gradient(90deg,#0FB36B,#39E39C 40%,#FF9F45)} .fz-panel .sec-title{color:#0B1E16!important;margin:12px auto 0} .fz-panel .mono-label{color:var(--em-deep)!important} .fz-p{max-width:56ch;margin:16px auto 26px;color:#3F5A51!important;font-size:clamp(1rem,2vw,1.12rem)} .fz-deco{position:absolute;top:-18px;right:-10px;width:190px;height:190px;pointer-events:none;opacity:.9} .fz-q{position:absolute;top:44px;right:46px;width:76px;height:76px;border-radius:22px;display:grid;place-items:center; font-family:var(--t-display);font-weight:800;font-size:2.6rem;color:#fff;transform:rotate(8deg); background:linear-gradient(135deg,#0FB36B,#0A8F57);box-shadow:0 20px 40px -16px rgba(15,179,107,.7)} .fz-b{position:absolute;border-radius:50%;display:block} .fz-b1{width:16px;height:16px;top:34px;right:30px;background:#FF9F45;box-shadow:0 6px 14px -5px #FF6A2C} .fz-b2{width:11px;height:11px;top:120px;right:120px;background:#39E39C} .fz-b3{width:8px;height:8px;top:130px;right:36px;background:#0FB36B} @media(max-width:640px){.fz-deco{display:none}.fz-panel{padding:40px 22px}} /* ============================================================ CTA-BAND partagé -> panneau vert "mode Leapway" (toutes les pages) Carte verte arrondie, séparée du footer par le padding de section. ============================================================ */ .cta-band .container{position:relative;overflow:hidden;max-width:1040px; background:linear-gradient(160deg,#0F5748 0%,#0A3931 100%); border-radius:28px;padding:60px 44px; box-shadow:0 44px 100px -46px rgba(11,60,44,.7),inset 0 1px 0 rgba(255,255,255,.07)} .cta-band .container::before{content:"";position:absolute;top:-40%;right:-10%;width:60%;height:180%; background:radial-gradient(closest-side,rgba(57,227,156,.28),transparent 70%);pointer-events:none} .cta-band .container::after{content:"";position:absolute;bottom:-50%;left:-8%;width:46%;height:150%; background:radial-gradient(closest-side,rgba(255,106,44,.20),transparent 70%);pointer-events:none} .cta-band h2{color:#fff!important;position:relative} .cta-band h2 .hl,.cta-band .hl{background:linear-gradient(100deg,#39E39C,#FFB061)!important;-webkit-background-clip:text!important;background-clip:text!important;color:transparent!important} .cta-band p{color:#cfe7dd!important;position:relative} .cta-band .btn{position:relative} .cta-band .btn-em{background:#fff!important;color:#0A8F57!important;box-shadow:0 16px 34px -14px rgba(0,0,0,.5)!important} .cta-band .btn-em:hover{background:#eafff6!important;color:#0A7A4A!important;transform:translateY(-2px)} /* ============================================================ PRODUIT : liste fonctionnalités -> cartes avec profondeur + badge coloré ============================================================ */ .feat-list{border-top:none!important;display:grid;gap:16px} .feat{grid-template-columns:auto 1fr auto;align-items:center;gap:22px!important; background:#fff!important;border:1px solid var(--line)!important;border-radius:18px; padding:24px 26px!important;border-bottom:none!important;position:relative;overflow:hidden; box-shadow:0 14px 34px -20px rgba(11,60,44,.22)!important} .feat::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px; background:linear-gradient(180deg,var(--ac,#0FB36B),color-mix(in srgb,var(--ac,#0FB36B) 45%,#fff))} .feat:hover{transform:translateY(-4px);box-shadow:0 30px 60px -28px rgba(15,179,107,.3)!important} .feat-num{align-self:center;width:46px;height:46px;border-radius:13px!important;display:grid;place-items:center; color:#fff!important;font-size:16px;font-weight:800;padding:0!important;flex:none; background:linear-gradient(135deg,var(--ac,#0FB36B),color-mix(in srgb,var(--ac,#0FB36B) 58%,#0a3931))!important; box-shadow:0 10px 22px -10px var(--ac,#0FB36B)} .feat-tag{align-self:center;background:color-mix(in srgb,var(--ac,#0FB36B) 10%,#fff); border:1px solid color-mix(in srgb,var(--ac,#0FB36B) 28%,var(--line)); color:color-mix(in srgb,var(--ac,#0FB36B) 78%,#0a3931)!important;padding:6px 13px;border-radius:20px;font-weight:800} .feat:nth-child(1){--ac:#0FB36B} .feat:nth-child(2){--ac:#FF6A2C} .feat:nth-child(3){--ac:#2F6BFF} .feat:nth-child(4){--ac:#7C5CFF} .feat:nth-child(5){--ac:#0A8F57} /* ===== Vignettes supplémentaires (pourquoi) : équipe + unification ===== */ .vz-team{gap:0;padding-left:14px} .vz-team .av{width:34px;height:34px;border-radius:50%;border:2.5px solid #fff;margin-left:-11px; display:grid;place-items:center;color:#fff;font-weight:800;font-size:13px; box-shadow:0 5px 12px -5px rgba(11,30,22,.45)} .vz-team .av:nth-child(1){background:linear-gradient(135deg,#0FB36B,#0A8F57);margin-left:0} .vz-team .av:nth-child(2){background:linear-gradient(135deg,#FF6A2C,#FF9F45)} .vz-team .av:nth-child(3){background:linear-gradient(135deg,#2F6BFF,#5B8DEF)} .vz-team .vt-tag{margin-left:12px;font-size:11px;font-weight:800;color:var(--em-deep); background:rgba(15,179,107,.1);border:1px solid rgba(15,179,107,.28);padding:5px 10px;border-radius:20px} .vz-unify{gap:7px} .vz-unify .u{width:22px;height:22px;border-radius:6px;flex:none} .vz-unify .u:nth-child(1){background:#0FB36B}.vz-unify .u:nth-child(2){background:#FF6A2C} .vz-unify .u:nth-child(3){background:#2F6BFF}.vz-unify .u:nth-child(4){background:#7C5CFF} .vz-unify .uarr{color:var(--mut);font-weight:800;font-size:15px} .vz-unify .ubadge{margin-left:auto;font-size:12px;font-weight:800;color:#fff;padding:6px 12px;border-radius:9px; background:linear-gradient(135deg,#0FB36B,#0A8F57);box-shadow:0 8px 18px -8px #0FB36B} /* ===== Vignette photos avant/après (conciergerie) ===== */ .vz-photo{gap:9px} .vz-photo .ph{width:62px;height:40px;border-radius:9px;position:relative;flex:none;overflow:hidden;box-shadow:0 4px 10px -5px rgba(11,30,22,.4)} .vz-photo .ph.before{background:linear-gradient(135deg,#cfdad5,#a6b8b0)} .vz-photo .ph.before::after{content:"";position:absolute;left:8px;bottom:7px;width:26px;height:5px;border-radius:3px;background:rgba(255,255,255,.6)} .vz-photo .ph.after{background:linear-gradient(135deg,#2F6BFF,#5B8DEF)} .vz-photo .ph.after b{position:absolute;top:5px;right:5px;width:15px;height:15px;border-radius:50%;background:#fff;display:grid;place-items:center;font-size:9px;font-weight:900;color:#0A8F57} .vz-photo .ph.after b::after{content:"✓"} .vz-photo .parr{color:var(--mut);font-weight:800;font-size:14px} .vz-photo .pcap{margin-left:auto;font-size:11px;font-weight:800;color:#2F6BFF;background:rgba(47,107,255,.1);border:1px solid rgba(47,107,255,.25);padding:5px 10px;border-radius:20px} /* vignettes dans les cartes offer : lisibles */ .offer-card .why-viz{background:linear-gradient(160deg,color-mix(in srgb,var(--wc,var(--em)) 8%,#fff),#fff)} /* ===== Simulateur : cartes REVENUS en vert Leapway ===== */ .sim-res--rev{background:linear-gradient(160deg,#0F5748 0%,#0A3931 100%)!important;border-color:transparent!important; box-shadow:0 22px 48px -24px rgba(11,60,44,.65),inset 0 1px 0 rgba(255,255,255,.06)!important;position:relative;overflow:hidden} .sim-res--rev::after{content:"";position:absolute;top:-40%;right:-15%;width:60%;height:170%; background:radial-gradient(closest-side,rgba(57,227,156,.22),transparent 70%);pointer-events:none} .sim-res--rev .sim-res-k{color:var(--em-bright)!important;position:relative} .sim-res--rev strong{color:#fff!important;position:relative} .sim-res--rev .sim-res-sub{color:#cfe7dd!important;position:relative} /* ============================================================ FAQ réchauffée : fond vert tinté + questions en cartes ============================================================ */ .faq-warm{background:linear-gradient(180deg,#F4FBF8 0%,#E8F5EF 100%);position:relative} .faq-warm .page-sub,.faq-warm .sec-title{position:relative} .faq{border-top:none!important;display:grid;gap:12px} .faq-item{border-bottom:none!important;background:#fff;border:1px solid var(--line);border-radius:16px; box-shadow:0 12px 30px -20px rgba(11,60,44,.28);position:relative;overflow:hidden; transition:box-shadow .25s,transform .2s} .faq-item::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--ac,var(--em))} .faq-item:hover{transform:translateY(-2px);box-shadow:0 20px 42px -22px rgba(15,179,107,.3)} .faq-item[open]{box-shadow:0 24px 50px -24px rgba(15,179,107,.32)} .faq-item summary{padding:19px 46px 19px 24px!important;align-items:center!important} .faq-item summary .mono-label{display:inline-grid;place-items:center;min-width:27px;height:27px;padding:0 6px;border-radius:8px;flex:none; background:linear-gradient(135deg,var(--ac,var(--em)),color-mix(in srgb,var(--ac,var(--em)) 60%,#0a3931)); color:#fff!important;font-size:12px;font-weight:800;box-shadow:0 6px 14px -7px var(--ac,var(--em))} .faq-item summary::after{right:20px!important;color:var(--ac,var(--em))!important} .faq-item p{padding:0 24px 22px 24px!important} /* ============================================================ HEADER : bandeau vert Leapway + éléments orange (toutes pages) ============================================================ */ .header{background:linear-gradient(180deg,#0F5748 0%,#0A3931 100%)!important; border-bottom:1px solid rgba(255,255,255,.09)!important; box-shadow:0 12px 32px -20px rgba(0,0,0,.55)} .header.scrolled{background:linear-gradient(180deg,#0D5041 0%,#082e26 100%)!important; backdrop-filter:none!important;-webkit-backdrop-filter:none!important; border-bottom-color:rgba(255,159,69,.28)!important} /* Logo : reste VERT (marque) — nom blanc, maison blanche, swoosh + point verts */ .header .logo .wm{color:#fff!important} .header .logo .wm .dot{color:var(--em-bright,#39E39C)!important} .header .logo path[stroke="#eafff6"]{stroke:#fff!important} .header .logo path[stroke^="url"]{stroke:#39E39C!important} /* Nav : liens en orange */ .header .nav-link{color:#FFB98A!important} .header .nav-link:hover{color:#fff!important} .header .nav-link.active{color:var(--orange-2,#FF9F45)!important;font-weight:700} .header .nav-link::after,.header .nav-link.active::after{background:var(--orange)!important} /* Boutons langue / devise : contour orange, texte orange, lisibles sur vert */ .header .lang-btn,.header .lang-globe,.header .cur-btn{ background:rgba(255,255,255,.06)!important;border:1.5px solid rgba(255,159,69,.55)!important; color:#FF9F45!important;box-shadow:none!important} .header .lang-btn:hover,.header .lang-globe:hover,.header .cur-btn:hover{ border-color:var(--orange)!important;color:#fff!important;background:rgba(255,106,44,.2)!important;transform:translateY(-1px)} /* CTA principal : orange plein */ .header .nav-cta,.header .nav-cta-m{background:linear-gradient(135deg,#FF6A2C,#FF9F45)!important;color:#fff!important; border:none!important;box-shadow:0 12px 26px -12px rgba(255,106,44,.7)!important} .header .nav-cta:hover,.header .nav-cta-m:hover{background:linear-gradient(135deg,#E45314,#FF8A3C)!important;color:#fff!important} /* Burger mobile en orange */ .header .burger span{background:var(--orange)!important} /* ============================================================ Modals langue / devise : texte lisible (clair sur fond vert foncé) ============================================================ */ .langopt,.curopt{color:#eafff6!important} .langopt-name,.curopt-name{color:#fff!important} .langopt-region,.curopt-code,.langopt-soon,.langpop-note,.pop-empty{color:#a7c4b8!important} .langopt-soon{border-color:rgba(255,255,255,.2)!important} .langopt.on,.curopt.on{border-color:var(--em-bright)!important;background:rgba(57,227,156,.16)!important} .langopt.on .langopt-region,.curopt.on .curopt-code{color:var(--em-bright)!important} .langopt-globe{color:#a7c4b8!important} .langpop-card .mono-label{color:var(--em-bright)!important} .curopt-code{font-weight:700} /* ============================================================ PLUS D'ORANGE : titres en dégradé vert -> orange (toutes pages) ============================================================ */ .sec-title,.page-hero h1{ background:linear-gradient(95deg,#0A8F57 0%,#12A76C 32%,#FF8A3C 66%,#FF6A2C 100%)!important; -webkit-background-clip:text!important;background-clip:text!important; -webkit-text-fill-color:transparent!important;color:transparent!important;text-shadow:none!important} /* Titre héros : dégradé vert->orange continu sur toute la hauteur */ .hero-title{background:linear-gradient(163deg,#0A8F57 0%,#0FB36B 34%,#FF8A3C 72%,#FF6A2C 100%)!important; -webkit-background-clip:text!important;background-clip:text!important; -webkit-text-fill-color:transparent!important;color:transparent!important;text-shadow:none!important} .hero-title .l2{background:none!important;-webkit-text-fill-color:transparent!important;color:transparent!important;text-shadow:none!important} /* Titres sur bandes vertes : rester blancs (le .hl garde son dégradé clair) */ .pos-band .sec-title,.desk-band .sec-title,.tz-band .sec-title{ background:none!important;-webkit-text-fill-color:#fff!important;color:#fff!important} /* Le .hl à l'intérieur d'un titre garde/renforce le dégradé vert->orange */ .sec-title .hl,.page-hero h1 .hl{-webkit-text-fill-color:transparent!important} /* ============================================================ ORDINATEUR PORTABLE 3/4 réaliste (écran + clavier + pavé) + TÉLÉPHONE mobile ============================================================ */ .laptop{position:relative;max-width:640px;margin:0 auto;perspective:1900px;perspective-origin:52% 36%} .lap3d{position:relative;transform-style:preserve-3d;transform:rotateX(5deg) rotateY(-17deg); width:520px;max-width:100%;margin:14px auto 96px} /* Écran (capot) */ .lap3d-lid{position:relative;transform-style:preserve-3d; background:linear-gradient(150deg,#23262d 0%,#0b0c0f 100%); border-radius:16px 16px 6px 6px;padding:13px 13px 16px; box-shadow:0 64px 120px -46px rgba(0,0,0,.78),inset 0 0 0 1px rgba(255,255,255,.06)} .lap3d-cam{position:absolute;top:6px;left:50%;transform:translateX(-50%);width:5px;height:5px;border-radius:50%; background:#3b3d44;box-shadow:0 0 0 2px rgba(255,255,255,.04)} .lap3d-lid .lap-screen{border-radius:5px!important;box-shadow:none!important} /* Clavier (base) qui fuit en perspective */ .lap3d-deck{position:relative;transform-origin:50% 0;transform:rotateX(77deg);height:158px;margin-top:-1px; background:linear-gradient(180deg,#cbd3d4 0%,#adb7b8 58%,#98a3a4 100%); border-radius:3px 3px 15px 15px;overflow:hidden; box-shadow:0 46px 64px -22px rgba(0,0,0,.6),inset 0 2px 0 rgba(255,255,255,.45)} .lap3d-hinge{position:absolute;top:0;left:7%;right:7%;height:7px;background:linear-gradient(#3c4648,#1f2729);border-radius:0 0 4px 4px} .lap3d-kb{position:absolute;top:20px;left:8.5%;right:8.5%;display:grid;gap:6px} .lap3d-kb span{height:14px;border-radius:3px; background:repeating-linear-gradient(90deg,#2c3439 0 5.3%,transparent 5.3% 6.6%)} .lap3d-kb .lap3d-space{background:#2c3439;margin:0 24%} .lap3d-track{position:absolute;bottom:14px;left:50%;transform:translateX(-50%);width:33%;height:34px;border-radius:7px; background:linear-gradient(#c3cdce,#b2bdbe);box-shadow:inset 0 0 0 1px rgba(0,0,0,.1),inset 0 2px 5px rgba(255,255,255,.55)} .lap3d-notch{position:absolute;bottom:0;left:50%;transform:translateX(-50%);width:58px;height:6px;border-radius:0 0 7px 7px; background:linear-gradient(#9aa5a6,#7d898a)} /* Téléphone (mobile) */ .deskphone{display:none} .dph-body{position:relative;background:linear-gradient(155deg,#22242c,#0a0b0f);border-radius:36px;padding:12px 12px 16px; box-shadow:0 54px 96px -36px rgba(0,0,0,.7),inset 0 0 0 1px rgba(255,255,255,.07)} .dph-cam{position:absolute;top:13px;left:50%;transform:translateX(-50%);width:46px;height:7px;border-radius:8px;background:#000;z-index:3} .dph-body>*:not(.dph-cam){} .dph-body .dph-top,.dph-body .dph-chat{background:#fff} .dph-top{display:flex;align-items:center;gap:10px;padding:20px 14px 12px;border-radius:26px 26px 0 0} .dph-ava{width:34px;height:34px;border-radius:10px;background:linear-gradient(135deg,#25D366,#128C7E);display:grid;place-items:center;color:#fff;font-weight:800;flex:none} .dph-top b{display:block;font-size:13.5px;color:#0B1E16}.dph-top small{font-size:10.5px;color:#5b7a6f} .dph-chat{display:flex;flex-direction:column;gap:8px;padding:8px 12px 18px;border-radius:0 0 26px 26px} .dph-chat .lb{max-width:82%} @media(max-width:900px){ .lap3d{display:none} .deskphone{display:block;max-width:280px;margin:0 auto} .lap-chip{display:none} } /* ===== Popup liste d'attente : texte lisible (clair sur fond vert foncé) ===== */ .promo-t{color:#fff!important} .promo-k{color:var(--em-bright)!important} .promo-sub{color:#cfe7dd!important} .promo-x{color:#eafff6!important} /* ============================================================ CARTES MIEUX DÉTACHÉES (contour arrondi net + ombre douce derrière) Rendu "carte de blog", discret, sur tous les pavés de texte du site. ============================================================ */ .why,.offer-card,.feat,.next-card,.price,.post,.blog-grid .post,.day-stat,.sim, .faq-item,.pcard,.plan-card,.step-card,.tool-card{ border:1px solid rgba(11,30,22,.12)!important; box-shadow: 0 2px 5px rgba(11,30,22,.07), 0 14px 26px -10px rgba(11,60,44,.20), 0 42px 70px -26px rgba(11,60,44,.62), inset 0 1px 0 rgba(255,255,255,.7)!important} /* Survol : la carte se soulève encore plus (effet 3D) */ .why:hover,.offer-card:hover,.feat:hover,.next-card:hover,.price:hover,.post:hover,.blog-grid .post:hover{ border-color:rgba(15,179,107,.34)!important;transform:translateY(-6px)!important; box-shadow: 0 3px 7px rgba(11,30,22,.09), 0 18px 34px -12px rgba(11,60,44,.24), 0 56px 90px -30px rgba(15,179,107,.5), inset 0 1px 0 rgba(255,255,255,.7)!important}