/* Kerdoc static site core styles (extrait & simplifié de Tailwind build) */ /* Inter chargée via Google Fonts (variable). Pour self-host: ajouter les fichiers dans assets/fonts puis réactiver @font-face. */ /* Font Inter via Google Fonts (variable) importée dans . */ /* Optionnel: ajouter des fontes statiques si compat anciens navigateurs (peu nécessaire aujourd'hui). */ :root { --ocean-50:#f1f6fa; --ocean-100:#dde9f1; --ocean-600:#2e5780; --ocean-700:#1c3550; --ocean-800:#143047; --ocean-900:#0d1b2a; --coral-500:#E45474; --radius-xl:2rem; --font-sans:'Inter', system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif; --step--2:clamp(.72rem,.76rem + .05vw,.78rem);--step--1:clamp(.82rem,.84rem + .10vw,.90rem);--step-0:clamp(.94rem,.92rem + .25vw,1rem);--step-1:clamp(1.12rem,1.05rem + .55vw,1.28rem);--step-2:clamp(1.32rem,1.18rem + .95vw,1.62rem);--step-3:clamp(1.58rem,1.35rem + 1.50vw,2.05rem);--step-4:clamp(1.90rem,1.55rem + 2.25vw,2.60rem);--step-5:clamp(2.28rem,1.78rem + 3.20vw,3.30rem);--leading-tight:1.15;--leading-snug:1.25;--leading-normal:1.45; } [hidden]{display:none !important;} *{box-sizing:border-box;}html{font-family:var(--font-sans);-webkit-font-smoothing:antialiased;scroll-behavior:smooth;overflow-x:hidden;}body{margin:0;color:var(--ocean-900);font-size:var(--step-0);line-height:var(--leading-normal);background:#fff;font-feature-settings:'ss01' on;overflow-x:hidden;}h1{font-size:var(--step-4);line-height:var(--leading-tight);letter-spacing:-.02em;font-weight:600;margin:0 0 .6em;}h2{font-size:var(--step-3);line-height:var(--leading-tight);letter-spacing:-.018em;font-weight:600;margin:0 0 .6em;}h3{font-size:var(--step-2);line-height:var(--leading-snug);font-weight:600;margin:0 0 .6em;}h4{font-size:var(--step-1);line-height:var(--leading-snug);font-weight:600;margin:0 0 .6em;}p{margin:.5em 0;}small,.text-xs{font-size:var(--step--1);} .text-2xs{font-size:var(--step--2);} .text-step-5{font-size:var(--step-5)!important;} .text-step-4{font-size:var(--step-4)!important;} .text-step-3{font-size:var(--step-3)!important;} .text-step-2{font-size:var(--step-2)!important;} .text-step-1{font-size:var(--step-1)!important;} .text-step-0{font-size:var(--step-0)!important;} .text-step--1{font-size:var(--step--1)!important;} .text-step--2{font-size:var(--step--2)!important;} .leading-tight{line-height:var(--leading-tight)!important;} .leading-snug{line-height:var(--leading-snug)!important;} /* Conteneur horizontal unifié */ :root{--layout-max:1080px;--layout-pad:1.6rem;} .shell{max-width:var(--layout-max);margin:0 auto;padding:0 var(--layout-pad);width:100%;box-sizing:border-box;} /* Layout */ .container{width:100%;max-width:var(--layout-max);margin:0 auto;padding:0 var(--layout-pad);}section{position:relative;}a{color:var(--ocean-700);text-decoration:none;}a:hover{text-decoration:underline;color:var(--ocean-800);}img{max-width:100%;display:block;height:auto;} /* Désactiver soulignement sur faux boutons liens */ a.btn,a.btn:hover,a.cta-primary,a.cta-primary:hover,.plan-actions a.btn,.plan-actions a.btn-secondary,#nav-bar .early-btn,#nav-bar .early-btn:hover{ text-decoration:none !important; } /* Hero */ .hero{padding-top:7rem;padding-bottom:6.2rem;overflow:hidden;position:relative;} .hero:before{content:"";position:absolute;inset:0;background:linear-gradient(135deg,rgba(255,255,255,.92),rgba(255,255,255,.68));backdrop-filter:blur(8px);border-radius:0 0 4rem 4rem;z-index:-1;} .hero h1{max-width:640px;} .hero .layout{display:grid;gap:3.2rem;align-items:center;} @media(min-width:980px){.hero .layout{grid-template-columns:1fr 480px;}} .hero-visual{position:relative;display:none;height:480px;} @media(min-width:980px){.hero-visual{display:block;}} .device-mock{position:absolute;top:0;right:8%;width:340px;height:460px;border:4px solid #0d1b2a;border-radius:36px;background:linear-gradient(to bottom,#f7fafc,#edf3f7);box-shadow:0 30px 80px -25px rgba(13,27,42,.3),0 10px 25px -10px rgba(13,27,42,.15);transform:rotate(6deg);} .device-mock.secondary{top:52px;right:-4%;transform:rotate(-8deg);background:linear-gradient(to bottom,#f6f9fb,#e9f0f5);} .btn{--btn-bg:var(--ocean-800);--btn-bg-h:var(--ocean-700);--btn-color:#fff;display:inline-block;border:none;background:var(--btn-bg);color:var(--btn-color);padding:.85rem 1.75rem;font-size:.95rem;font-weight:500;border-radius:1rem;cursor:pointer;box-shadow:0 6px 24px -10px rgba(28,53,80,.4);transition:.4s cubic-bezier(.22,1.28,.32,1),background-color .3s;} .btn:hover{transform:translateY(-2px);background:var(--btn-bg-h);color:var(--btn-color);} /* conserver couleur texte */ /* Forcer texte blanc sur boutons primaires dans plans */ .plan-actions .btn{color:#fff !important;} .plan-actions .btn:hover{color:#fff !important;} .btn:active{transform:translateY(0) scale(.96);} .btn-secondary{--btn-bg:#fff;--btn-bg-h:#fff;--btn-color:var(--ocean-700);border:1px solid rgba(28,53,80,.15);box-shadow:0 4px 18px -8px rgba(28,53,80,.15);} .muted{color:#5a738c;} .badges{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:1.5rem;} .badge{background:#fff;border:1px solid rgba(28,53,80,.1);color:var(--ocean-700);padding:.42rem .8rem;font-size:.63rem;font-weight:500;letter-spacing:.05em;border-radius:999px;box-shadow:0 1px 2px rgba(13,27,42,.06),0 0 0 1px rgba(255,255,255,.6) inset;display:inline-flex;align-items:center;gap:.3rem;text-transform:uppercase;} /* Features */ .features-grid{display:grid;gap:2rem;margin-top:3.5rem;}@media(min-width:1100px){.features-grid{grid-template-columns:repeat(3,1fr);}} .feature-card{position:relative;display:flex;flex-direction:column;gap:.85rem;padding:2rem 1.9rem 1.9rem;border-radius:2rem;background:#fff;border:1px solid #e6eef3;box-shadow:0 4px 12px rgba(13,27,42,.05),0 12px 32px -12px rgba(13,27,42,.18);transition:box-shadow .4s,transform .4s;} .feature-card:hover{box-shadow:0 18px 42px -18px rgba(13,27,42,.28);transform:translateY(-4px);} .feature-icon{width:48px;height:48px;border-radius:1.4rem;display:flex;align-items:center;justify-content:center;background:linear-gradient(to bottom,#fff,#f1f6fa);box-shadow:0 2px 4px rgba(13,27,42,.08),0 0 0 1px #e2ebf1;} /* Pricing */ .pricing{margin-top:4.5rem;display:grid;gap:2.2rem;}@media(min-width:900px){.pricing{grid-template-columns:repeat(2,1fr);}} .plan{position:relative;display:flex;flex-direction:column;padding:2.6rem 2.4rem 2.4rem;border-radius:2.2rem;background:#fff;border:1px solid #dce7ee;box-shadow:0 6px 18px -6px rgba(13,27,42,.18),0 14px 38px -18px rgba(13,27,42,.22);} .plan.highlight{border:1px solid #c5d7e2;box-shadow:0 10px 32px -12px rgba(13,27,42,.28);} .plan.highlight:before{content:"";position:absolute;left:0;right:0;top:0;height:5px;border-radius:5px 5px 0 0;background:linear-gradient(90deg,var(--ocean-600),#325f8f,#4c82b3);} .plan h3{margin:.25rem 0 .35rem;font-size:1.15rem;letter-spacing:.01em;color:var(--ocean-800);} .price{display:flex;align-items:end;gap:.35rem;font-size:2.8rem;font-weight:600;color:var(--ocean-900);} .period{font-size:.8rem;color:var(--ocean-600);}ul.plan-features{list-style:none;margin:1.4rem 0 0;padding:0;display:flex;flex-direction:column;gap:.55rem;font-size:.8rem;color:var(--ocean-700);}ul.plan-features li{display:flex;gap:.55rem;align-items:flex-start;}ul.plan-features li:before{content:"";width:.5rem;height:.5rem;border-radius:50%;margin-top:.35rem;background:linear-gradient(to bottom,var(--ocean-600),#5a90b5);} .compare-link{margin-top:.75rem;font-size:.68rem;font-weight:500;color:var(--ocean-600);} .compare-link:hover{text-decoration:underline;} /* FAQ */ .faq{margin-top:5rem;}.faq-item{border-top:1px solid rgba(28,53,80,.1);}.faq-item:last-child{border-bottom:1px solid rgba(28,53,80,.1);}.faq-btn{width:100%;text-align:left;background:none;border:0;padding:1.1rem 0;display:flex;justify-content:space-between;align-items:flex-start;cursor:pointer;font:inherit;color:var(--ocean-700);}.faq-answer{max-width:860px;font-size:.85rem;color:#445c73;padding:0 0 1.2rem;animation:fadeIn .45s ease;} @keyframes fadeIn{from{opacity:0;transform:translateY(6px);}to{opacity:1;transform:none;}} .faq-item:last-child{border-bottom:1px solid rgba(28,53,80,.1);} .faq-btn{width:100%;text-align:left;background:none;border:0;padding:1.1rem 0;display:flex;justify-content:space-between;align-items:flex-start;cursor:pointer;font:inherit;color:var(--ocean-700);} @keyframes fadeIn{from{opacity:0;transform:translateY(6px);}to{opacity:1;transform:none;}} /* Footer */ /* Ancien bloc footer générique retiré au profit de .footer-new */ .brand-bloc{grid-column:span 12;display:flex;flex-direction:column;gap:.9rem;align-items:center;text-align:center;}@media(min-width:1100px){.brand-bloc{grid-column:span 4;align-items:flex-start;text-align:left;}} .social-bloc{grid-column:span 12;display:flex;flex-direction:column;gap:1rem;align-items:center;}@media(min-width:1100px){.social-bloc{grid-column:span 3;align-items:flex-start;}} .legal-bloc{grid-column:span 12;display:grid;gap:3rem;}@media(min-width:1100px){.legal-bloc{grid-column:span 5;grid-template-columns:repeat(2,1fr);}} .footer-col-title{font-size:.68rem;text-transform:uppercase;letter-spacing:.09em;font-weight:600;color:#2b4e6e;margin:0 0 1rem;}footer small{font-size:.63rem;color:#6d859a;}.footer-bottom{border-top:1px solid rgba(28,53,80,.06);padding:1.25rem 0;font-size:.63rem;text-align:center;color:#6d859a;} /* Utility */ .text-center{text-align:center;}.mb-0{margin-bottom:0!important;}.mt-0{margin-top:0!important;}.mt-1{margin-top:.25rem!important;}.mt-2{margin-top:.5rem!important;}.mt-3{margin-top:1rem!important;}.mt-4{margin-top:1.5rem!important;}.mt-5{margin-top:2rem!important;}.mt-6{margin-top:3rem!important;}.flex{display:flex;}.gap-2{gap:.5rem;}.gap-4{gap:1rem;}.items-center{align-items:center;}.justify-center{justify-content:center;}.wrap{flex-wrap:wrap;} /* Nav */ .nav-wrap{position:fixed;top:0;left:0;right:0;z-index:60;display:flex;justify-content:center;padding:1rem 0;} .nav{display:flex;align-items:center;gap:2.2rem;background:rgba(255,255,255,.9);backdrop-filter:blur(16px);padding:.95rem 1.6rem;border-radius:999px;border:1px solid rgba(255,255,255,.55);box-shadow:0 8px 32px -14px rgba(13,27,42,.22);width:100%;max-width:var(--layout-max);} /* largeur alignée avec sections */ .nav a{font-size:.8rem;font-weight:500;color:var(--ocean-700);} .logo{display:flex;align-items:center;} .logo-img{height:26px;width:auto;display:block;} .nav .cta{font-size:.65rem;padding:.45rem 1rem;border-radius:999px;background:#fff;border:1px solid rgba(28,53,80,.15);} @media(max-width:760px){.nav{gap:1rem;}.hide-mobile{display:none!important;}} /* Simple modal (early access) */ .modal-backdrop{position:fixed;inset:0;background:rgba(13,27,42,.55);backdrop-filter:blur(4px);display:flex;align-items:center;justify-content:center;padding:1.25rem;z-index:999;} .modal{background:#fff;border-radius:1.25rem;padding:2rem;max-width:420px;width:100%;box-shadow:0 24px 80px -20px rgba(28,53,80,.45);position:relative;} .modal h3{margin-top:0;font-size:1.25rem;} .modal form{margin-top:1rem;display:flex;flex-direction:column;gap:.75rem;} .input{width:100%;padding:.75rem 1rem;border-radius:.9rem;border:1px solid rgba(28,53,80,.2);font:inherit;font-size:.85rem;} .small{text-align:center;font-size:.65rem;color:#56708a;} .close-btn{position:absolute;top:.75rem;right:.75rem;background:none;border:0;cursor:pointer;color:#6d859a;} .no-scroll{overflow:hidden;} /* === Custom design recreation (approx original) === */ /* Nav glass shell */ .nav-glass{background:rgba(255,255,255,0.72);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);box-shadow:0 8px 28px -8px rgba(28,53,80,.20),0 2px 6px -2px rgba(28,53,80,.12);border:1px solid rgba(28,53,80,.08);transition:background .6s, box-shadow .6s, padding .5s;} .nav-glass.is-materialized{background:rgba(255,255,255,0.82);box-shadow:0 10px 36px -10px rgba(28,53,80,.28),0 4px 14px -4px rgba(28,53,80,.18);} .nav-compact{padding-top:.4rem!important;padding-bottom:.4rem!important;} .logo-img{height:16px;width:auto;display:block;image-rendering:-webkit-optimize-contrast;} /* Hero layered background */ .hero-original{position:relative;overflow:hidden;padding-top:8.2rem;padding-bottom:5rem;} .hero-original .inner{max-width:var(--layout-max);display:grid;grid-template-columns:1fr 1fr;gap:3.5rem;align-items:center;} /* grille équilibrée */ @media(max-width:899px){.hero-original .inner{display:flex;flex-direction:column;}} @media(min-width:900px){.hero-original .inner{flex-direction:row;align-items:center;gap:5rem;padding-bottom:7rem;}} .hero-bg-layer{position:absolute;inset:0;pointer-events:none;} .hero-gradient-main{background:linear-gradient(to bottom right,#fff,var(--ocean-50));} .hero-radial-1{background:radial-gradient(circle at 70% 30%,rgba(46,87,128,.20),transparent 60%);} .hero-radial-2{background:radial-gradient(circle at 15% 65%,rgba(233,67,109,.08),transparent 55%);} .hero-pattern{opacity:.25;mix-blend-mode:multiply;background-image:linear-gradient(to right,rgba(28,53,80,.04) 1px,transparent 1px),linear-gradient(to bottom,rgba(28,53,80,.04) 1px,transparent 1px);background-size:38px 38px;} .hero-mask{opacity:.25;mix-blend-mode:overlay;background:radial-gradient(circle at 45% 40%,rgba(255,255,255,.4),transparent 70%);} /* Phones stack */ .phones{position:relative;flex:1;display:none;justify-self:end;} @media(min-width:900px){.phones{display:block;}} /* Largeurs responsives inspirées des classes Tailwind w-40/48/56/60 */ .phone-wrapper{position:relative;transform-origin:50% 55%;width:160px;} @media(min-width:640px){.phone-wrapper{width:192px;}} @media(min-width:900px){.phone-wrapper{width:224px;}} @media(min-width:1200px){.phone-wrapper{width:240px;}} .hero-original .inner{position:relative;} @media(min-width:1400px){ .hero-original .inner{grid-template-columns:minmax(0,560px) 1fr;} .phones-stack{transform:translateX(0);} /* recentre sur très large */ } .phones-stack{display:flex;align-items:flex-end;justify-content:center;position:relative;gap:0;margin-left:0;} /* retrait décalage pour symétrie stricte */ .phone-wrapper:first-child{transform:rotate(-6deg) translateY(2.5rem);margin-right:0;z-index:1;} /* width retirée pour parité taille */ /* Ancien breakpoint md utilisé à 768px pour la translation accrue */ @media(min-width:768px){.phone-wrapper:first-child{transform:rotate(-6deg) translateY(3.5rem);}} .phone-wrapper:last-child{transform:rotate(7deg);margin-left:-1rem;z-index:2;} /* Pas d'effet hover */ .phone-frame{position:absolute;inset:0;border-radius:2.2rem;background:linear-gradient(to bottom right,#fff,var(--ocean-50));box-shadow:0 8px 30px -6px rgba(28,53,80,.25);} .phone-frame.alt{box-shadow:0 8px 30px -6px rgba(28,53,80,.22);} .phones img{position:relative;width:100%;border-radius:2.2rem;display:block;transform:none;} /* Wave bottom */ .hero-wave{position:absolute;left:0;right:0;bottom:-1px;line-height:0;} .hero-wave svg{display:block;width:100%;height:100px;} /* Text blocks */ .hero-text{flex:1;max-width:560px;justify-self:start;} .hero-text h1{font-weight:600;letter-spacing:-.02em;font-size:clamp(2.4rem,1.9rem + 2.5vw,3.2rem);line-height:1.08;} .hero-text p{margin-top:1.2rem;font-size:1rem;line-height:1.4;color:var(--ocean-700);} .cta-primary{position:relative;overflow:hidden;} .cta-primary span.hover-fill{position:absolute;left:0;top:0;height:100%;width:0;background:rgba(255,255,255,.12);transition:width .5s;} .cta-primary:hover span.hover-fill{width:100%;} /* Badges original style */ .badges-original{margin-top:2rem;display:flex;flex-wrap:wrap;gap:.5rem;max-width:460px;} .badge-original{display:inline-flex;align-items:center;gap:.25rem;padding:.45rem .85rem;font-size:11px;font-weight:500;letter-spacing:.03em;border-radius:999px;background:rgba(255,255,255,.7);backdrop-filter:blur(6px);border:1px solid rgba(28,53,80,.15);color:var(--ocean-600);box-shadow:0 2px 6px -2px rgba(28,53,80,.15);} /* Pricing adjustments (subtle) */ .plan{transition:transform .4s, box-shadow .5s;} .plan:hover{transform:translateY(-4px);} /* Animations */ @keyframes fadeInUp{from{opacity:0;transform:translateY(18px);}to{opacity:1;transform:translateY(0);}} @keyframes slideInLeft{from{opacity:0;transform:translateX(-40px);}to{opacity:1;transform:none;}} @keyframes slideInRight{from{opacity:0;transform:translateX(40px);}to{opacity:1;transform:none;}} .animate-fadeInUp{animation:fadeInUp .8s cubic-bezier(.16,.8,.27,1) forwards;} .animate-slideInLeft{animation:slideInLeft .9s cubic-bezier(.16,.8,.27,1) forwards;} .animate-slideInRight{animation:slideInRight .9s cubic-bezier(.16,.8,.27,1) forwards;} .site-nav-wrap{position:fixed;top:0;left:0;right:0;display:flex;justify-content:center;z-index:80;padding:1.25rem 0 0;pointer-events:none;} #nav-bar .nav-links{display:none;align-items:center;gap:2.25rem;font-size:14px;font-weight:500;} @media(min-width:900px){#nav-bar .nav-links{display:flex;}} #nav-bar .nav-links a{color:var(--ocean-700);transition:color .35s;}#nav-bar .nav-links a:hover{color:var(--ocean-900);} .early-btn{font-size:11px;padding:.45rem 1rem;border-radius:999px;background:rgba(255,255,255,.7);backdrop-filter:blur(6px);border:1px solid rgba(28,53,80,.15);cursor:pointer;font-weight:600;color:var(--ocean-700);transition:background .4s,box-shadow .4s;} .early-btn:hover{background:#fff;box-shadow:0 4px 14px -4px rgba(28,53,80,.25);} .nav-scrolled #nav-bar{padding:.55rem 1.4rem;box-shadow:0 8px 30px -10px rgba(28,53,80,.28);} .phones-stack{display:flex;align-items:flex-end;justify-content:center;position:relative;} .gradient-bubble{position:absolute;border-radius:50%;filter:blur(40px);opacity:.4;} .bubble-a{top:-110px;left:-140px;width:300px;height:300px;background:var(--ocean-100);} .bubble-b{bottom:-150px;right:-150px;width:500px;height:500px;background:rgba(228,84,116,.15);} /* === Navbar (parité OLD) === */ /* Fix animations téléphones */ /* Override animations génériques pour conserver les transforms personnalisées des téléphones */ .phone-wrapper.animate-slideInLeft{animation:phoneIntroLeft .9s cubic-bezier(.16,.8,.27,1) forwards;} .phone-wrapper.animate-slideInRight{animation:phoneIntroRight .9s cubic-bezier(.16,.8,.27,1) forwards;} @keyframes phoneIntroLeft{0%{opacity:0;transform:translateX(-40px) rotate(-6deg) translateY(2.5rem);}100%{opacity:1;transform:rotate(-6deg) translateY(2.5rem);} } @keyframes phoneIntroRight{0%{opacity:0;transform:translateX(40px) rotate(7deg);}100%{opacity:1;transform:rotate(7deg);} } /* Ajustement responsive dans l'animation pour la 1ère (après animation on applique la règle media ci-dessus) */ @media(min-width:768px){@keyframes phoneIntroLeft{0%{opacity:0;transform:translateX(-40px) rotate(-6deg) translateY(3.5rem);}100%{opacity:1;transform:rotate(-6deg) translateY(3.5rem);} }} #nav-shell{position:fixed;left:50%;transform:translateX(-50%);z-index:70;top:1rem;transition:top .5s cubic-bezier(.22,.9,.3,1);width:100%;display:flex;justify-content:center;pointer-events:none;} @media(min-width:768px){#nav-shell{top:1.5rem;}} #nav-shell.scrolled{top:.5rem;} #nav-bar{position:relative;display:flex;align-items:center;gap:1.2rem;padding:.65rem 1.1rem;border-radius:48px;width:94vw;max-width:1080px;pointer-events:auto;font-size:14px;line-height:1;transition:background .6s,border-color .6s,box-shadow .6s,padding .35s,gap .35s;} @media(min-width:768px){#nav-bar{gap:1.7rem;padding:.75rem 1.4rem;}} @media(min-width:1100px){#nav-bar{gap:2.4rem;}} /* États visuels */ /* (Styles nav-glass retirés) */ /* === Effet nav-glass restauré (transparent en haut puis verre au scroll) === */ #nav-bar.nav-glass{background:rgba(255,255,255,0);backdrop-filter:none;-webkit-backdrop-filter:none;border:1px solid rgba(255,255,255,0);box-shadow:none;transition:background .55s ease, backdrop-filter .55s ease, -webkit-backdrop-filter .55s ease, box-shadow .6s ease, border-color .55s ease;} #nav-bar.nav-glass.is-materialized{background:rgba(255,255,255,.82);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);border:1px solid rgba(255,255,255,.55);box-shadow:0 8px 30px -12px rgba(28,53,80,.28),0 3px 10px -4px rgba(28,53,80,.15);} /* === Fond global top (remplace ancienne header-backdrop) === */ /* Fond limité haut du site */ /* Gradient du haut réintégré dans la hero uniquement (local, non global) */ .hero-original{background: radial-gradient(circle at 70% 30%,rgba(46,87,128,.18),transparent 60%), radial-gradient(circle at 18% 70%,rgba(233,67,109,.08),transparent 55%), linear-gradient(to bottom right,#ffffff,#f1f6fa);} /* === Fond doux haut de page (calque global discret) === */ .site-top-soft-bg{position:fixed;top:0;left:0;right:0;height:500px;pointer-events:none;z-index:0;background: linear-gradient(to bottom,#f8fbfd 0%,#edf3f7 55%,rgba(237,243,247,0) 92%), radial-gradient(circle at 68% 34%,rgba(28,53,80,.22),transparent 62%), radial-gradient(circle at 22% 74%,rgba(228,84,116,.10),transparent 58%); mask-image:linear-gradient(to bottom,rgba(0,0,0,1),rgba(0,0,0,.9) 55%,rgba(0,0,0,0) 92%); backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px);} @media(min-width:900px){.site-top-soft-bg{height:560px;}} /* Assure lisibilité au-dessus du calque */ #nav-shell{z-index:40;} .hero-original{position:relative;z-index:1;} #nav-bar.nav-compact{padding:1.05rem 1.6rem;} /* neutralisé */ #nav-bar .brand{display:inline-flex;align-items:center;} #nav-bar .brand img{height:30px;width:auto;display:block;} #nav-bar .nav-right{margin-left:auto;display:flex;align-items:center;gap:2rem;} @media(max-width:899px){#nav-bar .nav-right{gap:1.25rem;}} #nav-bar .nav-links{list-style:none;margin:0;padding:0;display:none;align-items:center;gap:2rem;font-size:14px;font-weight:500;} @media(min-width:900px){#nav-bar .nav-links{display:flex;}} #nav-bar .nav-links a{color:var(--ocean-700);text-decoration:none;position:relative;transition:color .35s;} #nav-bar .nav-links a:after{content:"";position:absolute;left:0;bottom:-6px;height:2px;width:0;background:var(--ocean-700);border-radius:2px;transition:width .4s cubic-bezier(.25,.7,.3,1);} #nav-bar .nav-links a:hover:after{width:100%;} #nav-bar .early-btn{font-size:11px;padding:.45rem 1rem;border-radius:999px;background:#fff;backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);border:1px solid rgba(28,53,80,.15);cursor:pointer;font-weight:600;color:var(--ocean-700);transition:background .4s,box-shadow .4s,color .4s;} #nav-bar .early-btn:hover{background:#fff;color:var(--ocean-800);box-shadow:0 4px 14px -4px rgba(28,53,80,.25);} /* Section separator parity */ .section-separator{position:relative;} .section-separator:before{content:"";position:absolute;left:0;top:0;width:100%;height:1px;background:linear-gradient(to right,rgba(13,27,42,0),rgba(13,27,42,.18),rgba(13,27,42,0));} /* Granite palette */ :root{--granite-300:#6a7f91;--granite-400:#556b7d;--granite-500:#435868;} .footer-tagline,.faq-panel p,.feature-inset p{color:var(--granite-400);} /* How it works */ .how-section{position:relative;padding:6rem 0;margin-top:4rem;} .how-bg{position:absolute;inset:0;background:linear-gradient(135deg, rgba(6,36,61,0.04) 0%, rgba(30,130,100,0.04) 60%);pointer-events:none;} .how-title{font-size:clamp(1.9rem,1.5rem + 1.3vw,2.4rem);margin:0;font-weight:600;} .how-sub{margin-top:1rem;font-size:.9rem;} .how-steps{list-style:none;margin:3.2rem 0 0;padding:0;display:grid;gap:1.8rem;} @media(min-width:860px){.how-steps{grid-template-columns:repeat(3,1fr);} } .how-step{position:relative;padding:1.6rem 1.4rem 1.8rem;border-radius:1.1rem;background:#fff;border:1px solid rgba(28,53,80,.12);box-shadow:0 6px 28px -14px rgba(28,53,80,.25),0 4px 14px -8px rgba(28,53,80,.12);display:flex;flex-direction:column;gap:.75rem;text-align:left;} .how-step h3{margin:.2rem 0 .1rem;font-size:1rem;color:var(--ocean-700);} .how-step p{margin:0;font-size:.75rem;line-height:1.35;color:#4e677c;flex:1;} .step-index{width:42px;height:42px;display:flex;align-items:center;justify-content:center;border-radius:50%;background:linear-gradient(to bottom right,var(--ocean-600),#4f87b4);color:#fff;font-weight:600;font-size:.95rem;box-shadow:0 6px 24px -10px rgba(46,87,128,.5);} /* Pricing parity */ .pricing-section{position:relative;padding:5.4rem 0 5.2rem;margin-top:0;} .pricing-section:after{content:"";position:absolute;left:0;right:0;bottom:0;height:140px;pointer-events:none;background:linear-gradient(to bottom,rgba(255,255,255,0) 0%,rgba(255,255,255,0) 55%,rgba(255,255,255,.88) 88%,#ffffff 100%);} .pricing-gradient{position:absolute;inset:0;background:#fff;pointer-events:none;} .pricing-section:before{display:none;} .pricing-sub{max-width:760px;margin:1rem auto 0;font-size:.9rem;} .plans-grid{margin-top:4rem;display:grid;gap:2.5rem;} @media(min-width:900px){.plans-grid{grid-template-columns:repeat(2,1fr);} } .plan-card{position:relative;display:flex;flex-direction:column;padding:2.8rem 2.4rem 2.6rem;border-radius:2rem;background:rgba(255,255,255,.55);backdrop-filter:blur(28px);border:1px solid rgba(28,53,80,.08);box-shadow:0 10px 40px -28px rgba(13,27,42,.4);text-align:left;overflow:hidden;} .plans-grid .plan-card{width:100%;} @media(min-width:900px){ /* Réduction légère largeur, centrée façon Apple (respire sur les côtés) */ .plans-grid{justify-content:center;} .plans-grid .plan-card{max-width:480px;margin-left:auto;margin-right:auto;} } .plan-card.premium{background:rgba(255,255,255,.7);box-shadow:0 20px 60px -25px rgba(28,53,80,.35);border:1px solid rgba(28,53,80,.12);} .premium-bar{position:absolute;left:0;right:0;top:0;height:4px;background:linear-gradient(90deg,var(--ocean-600),#325f8f,#4c82b3);} .premium-gloss{position:absolute;inset:0;background:linear-gradient(to bottom,rgba(240,246,252,.65),rgba(255,255,255,0) 55%);} .plan-head{display:flex;align-items:center;gap:.6rem;position:relative;z-index:2;} .plan-title{margin:0;font-size:1.05rem;font-weight:600;color:var(--ocean-800);} .pill-pop{font-size:11px;padding:.25rem .55rem;border-radius:999px;background:var(--ocean-800);color:#fff;font-weight:500;letter-spacing:.04em;box-shadow:0 2px 6px -2px rgba(28,53,80,.55);} .plan-price{margin-top:1.4rem;display:flex;align-items:flex-end;gap:.6rem;position:relative;z-index:2;} .plan-price .value{font-size:2.6rem;font-weight:600;line-height:1;color:var(--ocean-900);} .plan-price .period{font-size:.85rem;color:var(--ocean-600);display:flex;align-items:baseline;gap:.4rem;} .plan-price .period .ttc{font-size:10px;font-weight:500;letter-spacing:.06em;opacity:.7;} .plan-note{margin-top:1.2rem;font-size:11px;font-weight:500;letter-spacing:.08em;color:var(--ocean-600);} /* Ajustements spécifiques demandés */ .plan-card.premium .plan-note{display:block;text-align:center;} .plan-list{margin:1.4rem 0 0;padding:0;list-style:none;display:flex;flex-direction:column;gap:.8rem;position:relative;z-index:2;} .plan-list li{display:flex;gap:.55rem;align-items:flex-start;font-size:13.5px;line-height:1.35;color:var(--ocean-700);} .plan-list li:before{content:"";width:10px;height:10px;border-radius:50%;margin-top:.35rem;background:linear-gradient(to bottom,var(--ocean-600),#5a90b5);box-shadow:0 0 0 1px rgba(255,255,255,.6);} .plan-list li.pulse:before{animation:pulseDot 7s ease-in-out infinite;} @keyframes pulseDot{0%,100%{transform:scale(1);opacity:1;}50%{transform:scale(.65);opacity:.55;}} .plan-actions{margin-top:auto;display:flex;flex-direction:column;gap:.9rem;padding-top:2rem;position:relative;z-index:2;} /* Boutons abonnement : centrage texte, pleine largeur fluide */ .plan-actions .btn, .plan-actions .btn-secondary{display:flex;justify-content:center;align-items:center;text-align:center;width:100%;} /* Plan gratuit bouton blanc forcé (cas où cascade variables ne suffit pas dans certains navigateurs) */ .plan-card{background:linear-gradient(to bottom,rgba(255,255,255,.94),rgba(255,255,255,.80));box-shadow:0 1px 2px rgba(13,27,42,.06),0 8px 28px -18px rgba(13,27,42,.25);transition:box-shadow .55s cubic-bezier(.22,1,.32,1),transform .55s cubic-bezier(.22,1,.32,1);} .plan-card.premium{background:linear-gradient(to bottom,rgba(255,255,255,.97),rgba(255,255,255,.84));} .plan-card:hover{box-shadow:0 2px 4px rgba(13,27,42,.08),0 18px 46px -20px rgba(13,27,42,.35);transform:translateY(-4px);} .plan-card:focus-within{outline:2px solid rgba(76,130,179,.35);outline-offset:3px;} .premium-bar{height:3px;opacity:.9;} .plan-list li{line-height:1.45;} .btn{box-shadow:0 2px 8px -2px rgba(13,27,42,.25),0 4px 18px -10px rgba(13,27,42,.25);} .btn:hover{box-shadow:0 4px 14px -4px rgba(13,27,42,.28),0 10px 30px -14px rgba(13,27,42,.32);} .btn:focus-visible{outline:2px solid #4c82b3;outline-offset:3px;} .btn-secondary{box-shadow:0 1px 3px rgba(13,27,42,.08),0 4px 18px -10px rgba(13,27,42,.12);} @media (prefers-reduced-motion:reduce){.btn,.plan-card{transition:none;transform:none!important;}.plan-card:hover{box-shadow:0 1px 2px rgba(13,27,42,.08),0 8px 26px -18px rgba(13,27,42,.28);} } .plan-note{letter-spacing:.07em;opacity:.85;} .plan-card,.btn{border-radius:1.4rem;} .plan-card.free .btn-secondary{background:#fff!important;color:var(--ocean-700)!important;} .plan-card.free .btn-secondary:hover{background:#fff!important;filter:brightness(1.02);} .compare-table tbody td:first-child{border-radius:10px 0 0 10px;font-weight:500;color:var(--ocean-700);min-width:140px;} .compare-table tbody td:last-child{border-radius:0 10px 10px 0;font-weight:600;} .compare-table td.emph{color:var(--ocean-800);} .compare-actions{margin-top:2rem;display:flex;justify-content:flex-end;} .compare-modal .close-btn{top:1rem;right:1rem;} /* FAQ parity */ .faq-section{position:relative;padding:5.4rem 0 5.2rem;margin-top:0;background:#fff;} /* margin-top déjà 0 */ .faq-bg{position:absolute;inset:0;background:#fff;pointer-events:none;} .faq-shell{margin-top:3.2rem;border:1px solid rgba(28,53,80,.1);border-radius:1.25rem;overflow:hidden;background:rgba(255,255,255,.65);backdrop-filter:blur(20px);box-shadow:0 4px 26px -8px rgba(28,53,80,.15);text-align:left;max-width:1080px;margin-left:auto;margin-right:auto;} .faq-row + .faq-row{border-top:1px solid rgba(28,53,80,.1);} .faq-toggle{width:100%;background:none;border:0;padding:1.2rem 1.5rem;display:flex;align-items:flex-start;justify-content:space-between;gap:2rem;cursor:pointer;font:inherit;text-align:left;position:relative;} .faq-q{font-weight:500;color:var(--ocean-700);flex:1;line-height:1.35;} .faq-icon{width:30px;height:30px;border-radius:50%;border:1px solid rgba(28,53,80,.3);display:inline-flex;align-items:center;justify-content:center;font-size:13px;background:rgba(255,255,255,.6);backdrop-filter:blur(4px);transition:background .5s, transform .6s, color .5s,border-color .5s;} .faq-toggle[aria-expanded="true"] .faq-icon{background:var(--ocean-700);color:#fff;transform:rotate(180deg);border-color:var(--ocean-700);} .faq-panel{padding:0 1.5rem;} .faq-panel p{margin:0 0 1.2rem;font-size:.8rem;line-height:1.45;color:#4b657a;animation:fadeInUp .45s ease;} /* === Features (new parity) === */ .features-section{margin-top:5rem;} .features-section .section-header{text-align:center;max-width:760px;margin:0 auto 2.8rem;} .section-title.center{text-align:center;} .section-sub{margin-top:-.4rem;font-size:.95rem;line-height:1.4;} .features-grid-desktop{display:none;grid-template-columns:repeat(4,1fr);gap:1.6rem;} @media(min-width:1180px){.features-grid-desktop{display:grid;}} .feature-item{position:relative;} .feature-inset{position:relative;height:100%;display:flex;flex-direction:column;gap:.7rem;padding:1.35rem 1.25rem 1.4rem;border-radius:1.4rem;background:linear-gradient(145deg,#fff,#f4f8fb);border:1px solid #e2ebf1;box-shadow:0 4px 14px -6px rgba(13,27,42,.12),0 18px 42px -18px rgba(13,27,42,.18);overflow:hidden;} .feature-inset:before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 30% 20%,rgba(255,255,255,.9),transparent 65%);opacity:.6;pointer-events:none;} .feature-inset:after{content:"";position:absolute;top:0;left:-40%;width:60%;height:300%;background:linear-gradient(120deg,rgba(255,255,255,0) 30%,rgba(255,255,255,.5) 50%,rgba(255,255,255,0) 70%);transform:rotate(25deg) translateY(-40%);opacity:0;transition:opacity .6s;pointer-events:none;} .feature-item:hover .feature-inset:after{opacity:1;animation:shine 1.8s forwards;} @keyframes shine{to{transform:rotate(25deg) translateY(-10%);}} .feature-inset h3{margin:.2rem 0 .1rem;font-size:.95rem;letter-spacing:.01em;} .feature-inset p{margin:0;font-size:.7rem;line-height:1.3;color:#4b657a;} .feature-badge{position:absolute;top:.6rem;right:.6rem;font-size:.55rem;display:inline-flex;align-items:center;gap:.3rem;padding:.25rem .55rem;border-radius:999px;font-weight:600;letter-spacing:.05em;background:linear-gradient(to bottom,#fff,#f0f6fa);border:1px solid #d7e5ee;color:#2e5780;box-shadow:0 2px 4px -2px rgba(13,27,42,.25);text-transform:uppercase;} .feature-badge.nouveau{background:linear-gradient(90deg,#E45474,#ff8fa8);color:#fff;border:none;box-shadow:0 4px 12px -4px rgba(228,84,116,.5);} /* Mobile carousel */ .features-mobile-wrapper{margin-top:1rem;overflow:hidden;position:relative;} @media(min-width:1180px){.features-mobile-wrapper{display:none;}} .features-mobile-track{display:flex;gap:1rem;will-change:transform;} .feature-item.small .feature-inset{width:170px;min-height:140px;padding:1rem .9rem 1.05rem;} .feature-item.small h3{font-size:.8rem;margin:.1rem 0;} .feature-item.small p{font-size:.58rem;} /* === Footer parity (new) === */ .footer-new{background:#fff;position:relative;border-top:0;font-size:14px;margin-top:0;display:flex;justify-content:center;} /* flex pour centrage structurel */ .footer-new:before{content:"";position:absolute;left:0;right:0;top:0;height:1px;background:linear-gradient(to right,rgba(13,27,42,0),rgba(13,27,42,.12),rgba(13,27,42,0));} /* Harmonisation largeur footer avec le reste (container ~1024px) */ /* Footer : container centré comme les autres sections */ /* Footer inner hérite maintenant du même gabarit que .container (1200px + 1.25rem). On retire la largeur 1080 qui créait une discordance visuelle. */ .footer-inner{width:100%;max-width:var(--layout-max);margin:0 auto;box-sizing:border-box;position:relative;padding:3rem 0 3rem;} /* horizontal géré par .shell si nécessaire */ /* Micro ajustement optique : facilement réglable (modifier --footer-nudge) */ :root{--footer-nudge:0px;} .theme-v2,:root{--safe-bottom:env(safe-area-inset-bottom,0);} body{padding-bottom:0 !important;} /* aucune marge basse */ .footer-inner{transform:translateX(var(--footer-nudge));} /* DEBUG CENTRAGE (retirer après validation) */ .footer-inner.debug-center{outline:2px dashed #e45474;outline-offset:0;} body.debug-grid:before{content:"";position:fixed;top:0;bottom:0;left:50%;width:1px;background:rgba(228,84,116,.5);pointer-events:none;z-index:9999;} /* Ligne de centre spécifique footer (debug) */ .footer-inner.debug-center:before{content:"";position:absolute;top:0;bottom:0;left:50%;width:1px;background:rgba(228,84,116,.35);pointer-events:none;} /* Helpers de test : ajouter classe sur body pour évaluer décalage perçu */ body.footer-nudge-left .footer-inner{--footer-nudge:-6px;} body.footer-nudge-right .footer-inner{--footer-nudge:6px;} /* Resserrement optique footer sur mobile : contenu trop large donnait impression de décentrage */ @media(max-width:899px){ .footer-grid,.footer-bar .foot-meta{max-width:620px;margin-left:auto;margin-right:auto;} .footer-bar{padding-left:0;padding-right:0;} } /* Guide de centrage (désactiver quand validé) */ /* .footer-inner:after{content:"";position:absolute;inset:0 auto 0 50%;width:1px;background:rgba(255,0,0,.35);pointer-events:none;} */ /* Centrage cohérent avec container principal sur mobile */ @media(max-width:740px){ .footer-inner{padding:3rem 1.5rem 1.4rem;} /* bottom réduit */ .footer-grid{margin:0 auto;text-align:center;justify-items:center;width:100%;} .footer-brand,.footer-social,.footer-links,.footer-links .col{align-items:center;text-align:center;width:100%;} .footer-links ul{padding:0;} } @media(min-width:900px){.footer-inner{padding:4rem 0 1rem;}} @media(min-width:1200px){.footer-inner{padding:4.4rem 0 1.2rem;}} .footer-grid{display:grid;gap:3.2rem;text-align:center;justify-items:center;align-items:start;margin:0 auto;width:100%;max-width:100%;position:relative;} .footer-wordmark{display:block;margin:0 auto;} @media(max-width:599px){.footer-grid{grid-template-columns:1fr;gap:3rem;}} @media(min-width:900px){ .footer-grid{grid-template-columns:repeat(4,1fr);text-align:left;justify-items:start;gap:2.4rem;} .footer-col,.footer-brand,.footer-social,.footer-about,.footer-legal{align-items:flex-start!important;text-align:left!important;justify-self:start;} } .footer-brand{display:flex;flex-direction:column;gap:1rem;align-items:center;justify-self:center;text-align:center;} .footer-logo{margin:0;font-size:0;} .wordmark{height:44px;width:auto;display:block;} /* Logo responsive x2 : 44px <600px, 48px ≥600px, 52px ≥1100px */ .footer-brand img,.footer-brand svg{height:44px;max-height:56px;width:auto;transition:height .35s;} @media(min-width:600px){.footer-brand img,.footer-brand svg,.wordmark{height:48px;}} @media(min-width:1100px){.footer-brand img,.footer-brand svg,.wordmark{height:52px;}} .footer-tagline{margin:0;font-size:.8rem;line-height:1.5;color:#4f677b;max-width:220px;} .footer-social{display:flex;flex-direction:column;gap:1.25rem;align-items:center;justify-self:center;text-align:center;} .social-icons{display:flex;flex-wrap:wrap;gap:.8rem;} .social-btn{width:46px;height:46px;display:inline-flex;align-items:center;justify-content:center;border-radius:50%;background:linear-gradient(145deg,#e9f1f6,#f5f9fc);color:#1e4260;border:1px solid #d3e2ec;box-shadow:0 4px 14px -6px rgba(13,27,42,.15);transition:background .45s,color .4s,box-shadow .45s;} .social-btn:hover{background:#fff;color:#10314b;box-shadow:0 6px 22px -8px rgba(13,27,42,.3);} .social-btn svg{width:21px;height:21px;} .contact-btn{margin-top:.25rem;display:inline-flex;align-items:center;gap:.55rem;padding:.55rem 1.15rem;border-radius:999px;background:rgba(255,255,255,.7);backdrop-filter:blur(6px);border:1px solid rgba(28,53,80,.12);font-size:.75rem;color:var(--ocean-600);text-decoration:none;transition:background .4s,box-shadow .4s,color .4s;} .contact-btn:hover{background:#fff;color:var(--ocean-700);box-shadow:0 2px 8px -2px rgba(28,53,80,.18);} .contact-btn .ico{width:18px;height:18px;} .footer-about,.footer-legal{display:flex;flex-direction:column;gap:1.4rem;max-width:210px;} .footer-about .footer-list,.footer-legal .footer-list{gap:.55rem;} /* Footer bar fusionnée dans le même container */ .footer-bar{position:relative;display:flex;justify-content:center;padding:.45rem 0 .15rem;margin-top:.9rem;} /* padding further reduced */ .footer-bar .foot-meta{max-width:1200px;margin:0 auto;justify-content:center;padding:0 0;} /* inherit horizontal from container */ .footer-col-title{font-size:13px;text-transform:uppercase;letter-spacing:.08em;font-weight:600;color:#2b4e6e;margin:0 0 1rem;} .footer-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.55rem;font-size:.7rem;} .footer-list a{color:#4f677b;text-decoration:none;transition:color .35s;} .footer-list a:hover{color:var(--ocean-600);} .footer-bar{border-top:0;position:relative;} .footer-bar:before{content:"";position:absolute;top:0;left:50%;width:100vw;transform:translateX(-50%);height:1px;background:linear-gradient(to right,rgba(13,27,42,0),rgba(13,27,42,.12),rgba(13,27,42,0));pointer-events:none;} .foot-meta{margin:0;display:flex;flex-wrap:wrap;gap:.6rem;font-size:11px;justify-content:center;color:#4f677b;align-items:center;line-height:1.1;} /* gap et line-height réduits */ .made-pill{background:#f1f6fa;padding:.35rem .7rem;border-radius:999px;font-size:10px;letter-spacing:.08em;font-weight:500;color:#2e5780;box-shadow:0 0 0 1px #e2ebf1 inset;} /* === Footer layout révisé : grille 4 colonnes fixes pour centrage géométrique === */ /* Footer grille 4 colonnes explicites */ @media(min-width:900px){ .footer-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:2.8rem;align-items:start;justify-items:start;text-align:left;} .footer-col{align-items:flex-start !important;text-align:left !important;} } @media(max-width:899px){ .footer-grid{display:flex;flex-direction:column;gap:3rem;align-items:center;text-align:center;} .footer-col{align-items:center;text-align:center;} } /* Mobile : recentrer chaque bloc mais conserver hiérarchie verticale compacte */ @media(max-width:1099px){ .footer-grid{justify-items:center;text-align:center;} .footer-links{display:flex;flex-direction:column;gap:2.5rem;} .footer-links .col{align-items:center;text-align:center;} } /* Compactage supplémentaire bas sur mobile pour réduire l’espace blanc final */ @media(max-width:740px){ .footer-inner{padding-bottom:0 !important;} .footer-bar{margin-top:.55rem !important;padding:.35rem 0 0 !important;} .foot-meta{gap:.45rem !important;} } /* Resserrement extrême footer mobile si marge perçue persistante */ @media(max-width:640px){ .footer-inner{padding-top:2.4rem !important;padding-bottom:0 !important;} .footer-bar{margin-top:.45rem !important;padding:.3rem 0 0 !important;} .footer-bar .foot-meta{line-height:1.05!important;padding:0!important;} footer.footer-new{padding-bottom:0 !important;} } /* Overrides globaux pour supprimer tout espace résiduel sous la barre footer */ footer.footer-new, .footer-inner, .footer-bar, .footer-bar .foot-meta {margin-bottom:0 !important;} /* Rétablit un peu de respiration verticale autour de la ligne "Made in Breizh" */ .footer-bar{padding:.6rem 0 .45rem !important;} @media(max-width:740px){ .footer-bar{padding:.5rem 0 .4rem !important;} } html, body{min-height:auto;} /* ========================================================= THEME V2 (Palette alignée application) Principe: on ajoute une classe .theme-v2 sur pour activer. Palette (ex): Indigo / Bleu profond, Accent Emeraude, Accent Saumon léger. Accessible contrast >= WCAG AA sur textes primaires. ========================================================= */ /* THÈME V2 (update violet) : remplacement de la gamme primaire bleu par violet (inspiré maquette bouton Premium) */ .theme-v2{--c-bg:#ffffff;--c-bg-soft:#f7f8fb;--c-bg-alt:#f2f4f9;--c-surface:#ffffff;--c-surface-alt:#f8f9fc;--c-border:#dddfea;--c-border-strong:#c5ccda;--c-text:#0f1f31;--c-text-soft:#4a6275;--c-text-mute:#6a7f89;/* Gamme violet accessible */--c-primary-50:#f5f3ff;--c-primary-100:#ede9fe;--c-primary-200:#ddd6fe;--c-primary-500:#8b5cf6;--c-primary-600:#7c3aed;--c-primary-700:#6d28d9;--c-primary-800:#5b21b6;--c-accent:#10b981;--c-accent-soft:#75e3c8;--c-warn:#f59e0b;--c-danger:#dc4a64;--c-grad-hero:linear-gradient(145deg,#ffffff,#f4f2fb);--c-grad-primary:linear-gradient(90deg,#7c3aed,#6d28d9,#5b21b6);--radius-l:1.4rem;} .theme-v2 body{background:var(--c-bg);color:var(--c-text);} /* fallback si style inline retiré plus tard */ .theme-v2 .hero-original{background:radial-gradient(circle at 72% 28%,rgba(37,99,235,.18),transparent 62%),radial-gradient(circle at 20% 72%,rgba(16,185,129,.12),transparent 58%),var(--c-grad-hero);} .theme-v2 #nav-bar.nav-glass.is-materialized{box-shadow:0 10px 38px -12px rgba(29,78,216,.35),0 4px 14px -4px rgba(15,31,49,.18);} .theme-v2 #nav-bar .nav-links a:after{background:var(--c-primary-600);} .theme-v2 .btn{--btn-bg:var(--c-primary-700);--btn-bg-h:var(--c-primary-600);--btn-color:#fff;border-radius:var(--radius-l);background:var(--c-grad-primary);} .theme-v2 .btn-secondary{--btn-bg:#fff;--btn-bg-h:#fff;--btn-color:var(--c-primary-700);border:1px solid var(--c-border);} .theme-v2 .btn:focus-visible{outline:2px solid var(--c-primary-500);} .theme-v2 .badge-original{color:var(--ocean-600);border:1px solid rgba(28,53,80,.15);background:rgba(255,255,255,.7);backdrop-filter:blur(6px);} .theme-v2 .phone-frame{background:linear-gradient(160deg,#ffffff,#e8f0fa);} .theme-v2 .phone-frame.alt{background:linear-gradient(160deg,#ffffff,#e4eef9);} .theme-v2 .gradient-bubble.bubble-b{background:rgba(16,185,129,.18);} .theme-v2 .gradient-bubble.bubble-a{background:rgba(59,130,246,.25);} /* Features cards */ .theme-v2 .f-card,.theme-v2 .feature-inset{background:linear-gradient(145deg,#fff,#f4f8fc);border:1px solid var(--c-border);box-shadow:0 4px 14px -6px rgba(15,31,49,.12),0 18px 42px -18px rgba(15,31,49,.18);} .theme-v2 .f-card .f-badge,.theme-v2 .feature-badge.nouveau{background:var(--c-grad-primary);color:#fff;box-shadow:0 4px 12px -4px rgba(37,99,235,.5);} .theme-v2 .f-icon{color:var(--c-primary-600);} /* Pricing */ .theme-v2 .plan-card{border:1px solid var(--c-border);background:linear-gradient(to bottom,rgba(255,255,255,.96),rgba(255,255,255,.84));} .theme-v2 .plan-card.premium{border:1px solid var(--c-border-strong);box-shadow:0 16px 48px -18px rgba(29,78,216,.35);} .theme-v2 .premium-bar{background:var(--c-grad-primary);} .theme-v2 .pill-pop{background:var(--c-primary-700);} .theme-v2 .plan-list li:before{background:linear-gradient(to bottom,var(--c-primary-600),var(--c-primary-500));} /* FAQ */ .theme-v2 .faq-shell{background:rgba(255,255,255,.65);border:1px solid var(--c-border);box-shadow:0 6px 28px -12px rgba(15,31,49,.2);} .theme-v2 .faq-icon{border-color:var(--c-border-strong);color:var(--c-primary-600);} .theme-v2 .faq-toggle[aria-expanded="true"] .faq-icon{background:var(--c-primary-600);border-color:var(--c-primary-600);} /* Footer */ .theme-v2 .footer-new{background:var(--c-bg);} .theme-v2 .footer-col-title{color:var(--c-primary-700);} .theme-v2 .footer-list a:hover{color:var(--c-primary-600);} .theme-v2 .made-pill{background:var(--c-primary-50);color:var(--c-primary-700);box-shadow:0 0 0 1px var(--c-primary-100) inset;} .theme-v2 .social-btn{background:linear-gradient(145deg,#e3ecf7,#f5f9fd);border:1px solid var(--c-border);color:var(--c-primary-700);} .theme-v2 .social-btn:hover{background:#fff;color:var(--c-primary-800);box-shadow:0 6px 22px -8px rgba(29,78,216,.3);} /* Accent success/danger (pour futures alertes) */ .theme-v2 .tag-success{background:var(--c-accent);color:#fff;} .theme-v2 .tag-danger{background:var(--c-danger);color:#fff;} /* Étapes (Comment ça marche) : pastilles numérotées en violet */ .theme-v2 .how-index,.theme-v2 .step-index{background:var(--c-grad-primary)!important;box-shadow:0 6px 20px -6px rgba(109,40,217,.45);} /* Focus states unifiés */ .theme-v2 a:focus-visible,.theme-v2 button:focus-visible,.theme-v2 .btn:focus-visible{outline:2px solid var(--c-primary-500);outline-offset:3px;} /* Transition douce site wide */ .theme-v2 body *{transition-property:background-color,color,box-shadow,border-color;transition-duration:.45s;transition-timing-function:cubic-bezier(.22,1,.32,1);} /* Hero wave recolor (si besoin futur) */ .theme-v2 .hero-wave path{fill:#fff;} /* Surcouche gradient douce top */ .theme-v2 .site-top-soft-bg{background:linear-gradient(to bottom,var(--c-primary-50) 0%,#edf3fa 55%,rgba(237,243,250,0) 92%),radial-gradient(circle at 68% 34%,rgba(37,99,235,.22),transparent 62%),radial-gradient(circle at 22% 74%,rgba(16,185,129,.15),transparent 58%);} /* Utilitaires couleurs */ .theme-v2 .text-primary{color:var(--c-primary-700)!important;} .theme-v2 .bg-primary{background:var(--c-primary-700)!important;color:#fff;} .theme-v2 .border-primary{border-color:var(--c-primary-600)!important;} /* === Pages légales (lisibilité sobre) === */ .legal-shell{max-width:820px;margin:0 auto;padding:4.25rem 1.4rem 4.5rem;font-size:.92rem;line-height:1.58;color:var(--c-text, var(--ocean-900));font-feature-settings:'ss01' on;transition:padding-top .3s ease;} .legal-shell h1{font-size:clamp(2rem,1.4rem + 2vw,2.55rem);line-height:1.08;margin:0 0 1.4rem;font-weight:600;letter-spacing:-.015em;} .legal-shell h2{margin:2.25rem 0 .95rem;font-size:1.15rem;font-weight:600;letter-spacing:.01em;line-height:1.3;position:relative;padding-left:.85rem;} .legal-shell h2:before{content:"";position:absolute;left:0;top:.3rem;width:4px;height:1.15em;border-radius:4px;background:var(--c-primary-600, var(--ocean-700));opacity:.85;} .legal-shell p,.legal-shell li{max-width:72ch;} .legal-shell p{margin:0 0 1.05rem;} .legal-shell ul{margin:0 0 1.2rem;padding:0 0 0 1.15rem;display:block;} .legal-shell li{margin:.35rem 0;} .legal-shell strong{font-weight:600;color:var(--c-primary-700, var(--ocean-800));} .legal-shell .back-link{display:inline-flex;align-items:center;gap:.45rem;font-size:.68rem;font-weight:500;letter-spacing:.05em;text-transform:uppercase;text-decoration:none;background:rgba(0,0,0,.05);color:var(--c-primary-700, var(--ocean-700));padding:.5rem .75rem .45rem;border-radius:10px;line-height:1;box-shadow:0 1px 2px rgba(0,0,0,.05);margin-bottom:1.15rem;} .legal-shell .back-link:hover{background:rgba(0,0,0,.08);} .legal-shell .legal-meta{margin-top:3.2rem;font-size:.62rem;letter-spacing:.08em;text-transform:uppercase;color:#6d859a;} .legal-shell hr{border:0;height:1px;background:linear-gradient(to right,rgba(0,0,0,0),rgba(0,0,0,.15),rgba(0,0,0,0));margin:2.8rem 0 2.2rem;} @media (prefers-color-scheme:dark){.legal-shell{background:#fff;}} /* garantit lisibilité si futur dark global */ /* Skip link accessibilité */ .skip-link{position:absolute;top:-60px;left:0;background:#fff;color:#111;padding:.75rem 1rem;font-weight:600;border-radius:0 0 .75rem 0;box-shadow:0 4px 12px -4px rgba(0,0,0,.25);z-index:200;transition:top .3s ease} .skip-link:focus{top:0} /* Sections différées: réduit coût layout/paint avant scroll */ .defer-section{content-visibility:auto;contain-intrinsic-size:900px 400px;} @media (max-width:680px){.legal-shell{padding-top:3.35rem;padding-bottom:4rem;}} /* === Harmonisation palette (suppression résidus bleu océan) === */ .theme-v2 a:not(.btn){color:var(--c-primary-700);} .theme-v2 a:not(.btn):hover{color:var(--c-primary-600);text-decoration:none;} /* Boutons: forcer texte blanc pour lisibilité */ .theme-v2 .btn{color:#fff !important;} .theme-v2 #nav-bar .nav-links a{color:var(--c-text-soft);} .theme-v2 #nav-bar .nav-links a:hover{color:var(--c-primary-700);} .theme-v2 #nav-bar .nav-links a:after{background:var(--c-primary-600);} .theme-v2 #nav-bar .early-btn{color:var(--c-primary-700);border-color:var(--c-primary-100);font-weight:600;} .theme-v2 #nav-bar .early-btn:hover{color:var(--c-primary-800);box-shadow:0 4px 14px -4px rgba(109,40,217,.35);} .theme-v2 .hero-text p{color:var(--c-text-soft);} .theme-v2 .f-icon svg{color:var(--c-primary-600);} .theme-v2 .faq-q{color:var(--c-text-soft);} .theme-v2 .faq-toggle[aria-expanded="true"] .faq-icon{background:var(--c-primary-600);border-color:var(--c-primary-600);} .theme-v2 .contact-btn{color:var(--c-primary-600);border-color:var(--c-primary-100);} .theme-v2 .contact-btn:hover{color:var(--c-primary-700);} .theme-v2 .feature-badge{color:var(--c-primary-700);border-color:var(--c-primary-100);} .theme-v2 .plan-title,.theme-v2 .plan-price .value{color:var(--c-primary-800);} .theme-v2 .plan-note{color:var(--c-primary-600);} .theme-v2 .plan-list li{color:var(--c-text-soft);} .theme-v2 .faq-icon{color:var(--c-primary-600);border-color:var(--c-primary-200);} .theme-v2 .footer-tagline{color:var(--c-text-soft);} /* Liens footer en noir (demande) */ .theme-v2 .footer-list a{color:#0f1f31 !important;} .theme-v2 .footer-list a:hover{color:var(--c-primary-700)!important;} /* Boutons style plus "Apple‑like" (subtile lumière interne) */ .theme-v2 .btn{background:linear-gradient(145deg,var(--c-primary-700),var(--c-primary-600));position:relative;box-shadow:0 4px 16px -6px rgba(109,40,217,.45),0 2px 6px -2px rgba(109,40,217,.35);} .theme-v2 .btn:before{content:"";position:absolute;inset:0;border-radius:inherit;background:radial-gradient(circle at 30% 25%,rgba(255,255,255,.35),rgba(255,255,255,0) 70%);mix-blend-mode:overlay;pointer-events:none;} .theme-v2 .btn:hover{background:linear-gradient(145deg,var(--c-primary-600),var(--c-primary-500));} /* Secondary button neutre allégé */ .theme-v2 .btn-secondary{background:#fff;border-color:var(--c-primary-100);color:var(--c-primary-700);} .theme-v2 .btn-secondary:hover{filter:brightness(1.03);} /* Pastilles étapes déjà violettes – adoucissement shadow */ .theme-v2 .how-index,.theme-v2 .step-index{box-shadow:0 4px 16px -4px rgba(109,40,217,.42);} /* Bulles décoratives hero : teinte violette + voile neutre (moins de vert) */ .theme-v2 .gradient-bubble.bubble-a{background:rgba(125,64,231,.25);} .theme-v2 .gradient-bubble.bubble-b{background:rgba(109,40,217,.18);} /* Calque top soft recolorisé (retrait vert, teinte violette légère) */ .theme-v2 .site-top-soft-bg{background:linear-gradient(to bottom,var(--c-primary-50) 0%,#f4f2fb 55%,rgba(244,242,251,0) 92%),radial-gradient(circle at 68% 34%,rgba(125,64,231,.20),transparent 62%),radial-gradient(circle at 22% 74%,rgba(109,40,217,.10),transparent 58%);} /* Icônes social en hover cohérents */ .theme-v2 .social-btn{color:var(--c-primary-700);} .theme-v2 .social-btn:hover{color:var(--c-primary-800);box-shadow:0 6px 22px -8px rgba(109,40,217,.35);} /* Focus ring violet adouci */ .theme-v2 a:focus-visible,.theme-v2 button:focus-visible,.theme-v2 .btn:focus-visible{outline:2px solid var(--c-primary-500);outline-offset:3px;box-shadow:0 0 0 4px rgba(125,64,231,.15);} /* Ajuste badges de confiance (laisse neutre mais cohérence mix-blend) */ .theme-v2 .badge-original{border-color:var(--c-primary-100);} /* Carrousel mobile auto défilement (nouvelle version JS) */ .features-mobile{overflow:hidden;position:relative;margin-top:2.4rem;} @media(min-width:900px){.features-mobile{display:none;}} /* Suppression des voiles latéraux sur carrousel mobile */ .features-mobile:before,.features-mobile:after{display:none!important;} .features-scroll{display:flex;gap:1.2rem;} [data-marquee-inner]{display:flex;gap:1.2rem;will-change:transform;} .made-pill{display:inline-flex;align-items:center;gap:.4rem;background:#fff;padding:.35rem .85rem;border-radius:999px;border:1px solid rgba(28,53,80,.15);font-size:10px;font-weight:500;color:var(--ocean-600);box-shadow:0 1px 2px rgba(13,27,42,.05);} .visually-hidden{position:absolute!important;height:1px;width:1px;overflow:hidden;clip:rect(1px,1px,1px,1px);white-space:nowrap;} /* === Features legacy (parité ancienne version) === */ .features-legacy{position:relative;padding:6.5rem 0 4.5rem;margin-top:0;overflow:hidden;background:#fff;} /* padding vertical rapproché pour alignement rythmé */ /* Fond simplifié sans bande grise */ .features-bg{position:absolute;inset:0;background:#fff;pointer-events:none;} .features-mask{position:absolute;inset:0;background:radial-gradient(circle at 50% 12%,rgba(28,53,80,.025),transparent 55%);pointer-events:none;} .features-legacy:after{display:none;} .features-shell{position:relative;max-width:var(--layout-max);} /* align max width */ .features-head{text-align:center;max-width:760px;margin:0 auto;} .features-title{margin:0;font-weight:600;letter-spacing:-.02em;font-size:clamp(1.9rem,1.5rem + 1.3vw,2.4rem);line-height:1.1;color:var(--ocean-900);} .features-sub{margin:1rem auto 0;font-size:.95rem;line-height:1.45;color:#4b657a;} /* Mobile scroll list */ .features-mobile{margin-top:2.8rem;overflow:hidden;} @media(min-width:1024px){.features-mobile{display:none;}} .features-scroll{display:flex;gap:1.5rem;padding:.25rem 0 .75rem;margin:0;} .f-card{position:relative;flex:0 0 270px;display:flex;flex-direction:column;gap:.4rem;padding:2.35rem 2.15rem 2.25rem;border-radius:2rem;background:rgba(255,255,255,.82);backdrop-filter:blur(26px);border:1px solid rgba(255,255,255,.55);box-shadow:0 4px 18px -10px rgba(28,53,80,.18),0 10px 28px -18px rgba(28,53,80,.28);scroll-snap-align:start;transition:box-shadow .6s,transform .6s;overflow:hidden;} .f-card:hover{box-shadow:0 14px 40px -18px rgba(28,53,80,.4),0 8px 24px -14px rgba(28,53,80,.26);transform:translateY(-4px);} .f-icon{width:56px;height:56px;border-radius:1.6rem;background:rgba(255,255,255,.85);backdrop-filter:blur(6px);display:flex;align-items:center;justify-content:center;border:1px solid rgba(28,53,80,.08);box-shadow:0 3px 6px -2px rgba(28,53,80,.22);margin:0 0 1.4rem;} .f-icon svg{width:26px;height:26px;stroke:currentColor;color:var(--ocean-700);} .f-title{margin:0;font-size:1.02rem;font-weight:600;letter-spacing:.01em;color:var(--ocean-900);line-height:1.15;} .f-desc{margin:.9rem 0 0;font-size:.8rem;line-height:1.45;color:#4b657a;} .f-badge{position:absolute;top:.85rem;right:.85rem;font-size:10px;font-weight:500;letter-spacing:.05em;padding:.4rem .6rem;border-radius:999px;background:var(--ocean-800);color:#fff;box-shadow:0 2px 6px -2px rgba(28,53,80,.4);} /* Desktop grid */ .features-grid{display:none;margin-top:3.8rem;grid-template-columns:repeat(3,1fr);gap:2.2rem;} /* gap réduit pour cohérence avec cards how */ @media(min-width:1024px){.features-grid{display:grid;}} .features-grid .f-card{flex:unset;} /* Loop animation support: attribute data-loop ajouté dynamiquement */ /* Retire le masquage fondu sur les extrémités (loop) */ .features-scroll[data-loop="true"]{mask:none;} /* === How it works legacy === */ .how-legacy{position:relative;padding:5rem 0 5rem;margin-top:0;overflow:hidden;background:#fff;} /* align vertical rhythm */ /* Fond overlay identique ancienne version */ .how-legacy-bg{position:absolute;inset:0;pointer-events:none;background:none;} /* Suppression des masques/fondu précédents */ .how-shell{position:relative;max-width:var(--layout-max);text-align:center;} /* max width align */ .how-title-legacy{margin:0;font-size:clamp(1.9rem,1.5rem + 1.3vw,2.4rem);font-weight:600;letter-spacing:-.01em;color:var(--ocean-900);} .how-sub-legacy{margin:1rem auto 0;max-width:720px;font-size:.95rem;line-height:1.45;color:#4b657a;} .how-steps-legacy{list-style:none;margin:3.2rem 0 0;padding:0;display:grid;gap:2.2rem;} /* gap align features */ @media(min-width:860px){.how-steps-legacy{grid-template-columns:repeat(3,1fr);} } .how-step-legacy{position:relative;padding:1.6rem 1.5rem 1.55rem;border-radius:1.1rem;background:#fff;border:1px solid rgba(28,53,80,.10);box-shadow:0 4px 16px -10px rgba(28,53,80,.18),0 2px 8px -6px rgba(28,53,80,.10);display:flex;flex-direction:column;gap:.7rem;text-align:left;} /* padding harmonisé */ .how-head{display:flex;align-items:center;gap:1rem;} .how-step-legacy .how-index{flex:0 0 48px;display:flex;align-items:center;justify-content:center;width:48px;height:48px;border-radius:16px;background:linear-gradient(to bottom,#1c3550,#2e5780);color:#fff;font-weight:600;font-size:1.05rem;box-shadow:0 6px 18px -8px rgba(28,53,80,.45);} .how-step-legacy .how-step-title{margin:0;font-size:1.25rem;line-height:1.1;letter-spacing:-.01em;color:var(--ocean-800);} .how-step-legacy .how-step-text{margin:.25rem 0 0;font-size:.78rem;line-height:1.45;color:#4e677c;padding:0;} /* texte démarre sous la bulle au même alignement */ @media(min-width:680px){.how-step-legacy .how-step-text{font-size:.8rem;}} .how-index{width:46px;height:46px;display:flex;align-items:center;justify-content:center;border-radius:50%;background:linear-gradient(to bottom right,var(--ocean-600),#4f87b4);color:#fff;font-weight:600;font-size:1rem;box-shadow:0 6px 24px -10px rgba(46,87,128,.5);} .how-step-title{margin:0;font-size:1rem;color:var(--ocean-700);font-weight:600;} .how-step-text{margin:0;font-size:.75rem;line-height:1.4;color:#4e677c;flex:1;} /* === Overrides anti-bandes grises (neutralisation des dégradés inter-sections) === */ /* On force un fond blanc uni sur toutes les couches décoratives susceptibles de créer une barre horizontale */ /* On garde la neutralisation uniquement pour le hero (déjà blanc) */ .hero-gradient-main, .hero-radial-1, .hero-radial-2, .hero-pattern, .hero-mask {background:#fff !important;mix-blend-mode:normal !important;opacity:1 !important;} /* Réintroduction contrôlée de nuances internes très faibles (pas de changement de ton aux bords) */ .features-bg{background: linear-gradient(to top,rgba(109,40,217,.045) 0%,rgba(109,40,217,.025) 220px,rgba(109,40,217,0) 420px), /* teinte subtile montant vers le centre */ radial-gradient(circle at 50% 85%,rgba(109,40,217,.055),rgba(109,40,217,0) 62%), #ffffff;} /* haut = blanc pur */ .features-mask{background:radial-gradient(circle at 50% 78%,rgba(15,31,49,.035),transparent 65%);} .how-legacy-bg{background:none;} /* Section how-legacy rétablie neutre */ .how-legacy{background:#fff !important;} .pricing-gradient{background:radial-gradient(circle at 50% 12%, rgba(28,53,80,.045), transparent 60%);} .faq-bg{background:#fff;} /* pas de halo en haut de la FAQ */ /* Supprime gradients internes éventuels (pattern via background-image) */ .hero-pattern{background:none !important;} /* FAQ déjà très clair, aucune neutralisation forcée nécessaire plus haut */ /* Retire les pseudo transitions ajoutées précédemment */ .features-legacy:after, .pricing-section:before {display:none !important;} /* Option : réduire l’impact des ombres très étendues pouvant donner une impression de bande. */ .f-card, .plan-card, .how-step-legacy {box-shadow:0 4px 18px -10px rgba(13,27,42,.14),0 2px 8px -6px rgba(13,27,42,.09) !important;} .faq-shell{box-shadow:0 1px 4px -2px rgba(13,27,42,.08),0 0 0 1px rgba(13,27,42,.05) !important;} /* ombre encore réduite pour limiter halo sous carte */ /* Joint optique : fine couche blanche couvrant la jonction si un résidu de sous-pixel apparaît */ .faq-section:after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;background:#fff;pointer-events:none;} footer{border-top:0 !important;} /* aucune bordure => suppression bande */ /* Fin overrides */