@import url("https://fonts.googleapis.com/css2?family=Orbitron:wght@500;600;700;800&display=swap"); :root{--bg:#fff;--ink:#15151b;--muted:#686873;--line:#e8e8ed;--purple:#665cff;--soft:#f6f5ff;--dark:#0b0b12}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;font-family:Inter,Arial,sans-serif;color:var(--ink);background:var(--bg)}a{text-decoration:none;color:inherit}.container{width:min(1160px,calc(100% - 48px));margin:auto}.site-header{height:76px;border-bottom:1px solid var(--line);background:#fffffff2;backdrop-filter:blur(14px);position:sticky;top:0;z-index:20}.nav{height:100%;display:flex;align-items:center;justify-content:space-between;gap:25px}.brand{display:flex;align-items:center;gap:9px;font-weight:800;font-size:20px}.brand-mark{width:27px;height:27px}.nav-links{display:flex;gap:28px;font-size:13px;font-weight:600;color:#55555f}.nav-links a:hover{color:#000}.nav-actions{display:flex;align-items:center;gap:15px}.theme-toggle,.menu-toggle{border:0;background:transparent;cursor:pointer;font-size:19px}.login-link{font-size:13px;font-weight:700}.button{display:inline-flex;align-items:center;justify-content:center;gap:9px;border:1px solid #18181d;border-radius:4px;padding:13px 19px;font-size:13px;font-weight:750}.button-small{padding:10px 16px}.button-primary{background:#18181d;color:#fff}.button-primary:hover{transform:translateY(-1px)}.button-ghost{border-color:#dedee5}.button-white{background:#fff;color:#15151b;border-color:#fff}.menu-toggle{display:none}.hero{position:relative;overflow:hidden;padding:82px 0 0;background:linear-gradient(#fff,#fbfbff)}.hero-orb{position:absolute;border-radius:50%;filter:blur(20px);pointer-events:none}.orb-a{width:440px;height:440px;right:-170px;top:-170px;background:#776dff18}.orb-b{width:300px;height:300px;left:-180px;top:280px;background:#b9e7ff24}.hero-inner{text-align:center}.eyebrow{font-size:11px;letter-spacing:.13em;text-transform:uppercase;font-weight:800;color:#6962df;margin-bottom:20px}.eyebrow.light{color:#a9a2ff}.pulse{display:inline-block;width:7px;height:7px;border-radius:50%;background:#665cff;margin-right:7px}.hero h1{font-size:clamp(44px,6vw,72px);line-height:.99;letter-spacing:-.055em;margin:0 auto;max-width:900px;font-weight:800}.hero h1 span,.section-heading h2 span,.split h2 span,.business h2 span,.security-box h2 span,.cta h2 span{color:#665cff}.hero-copy>p{max-width:680px;margin:27px auto 0;color:#666672;font-size:17px;line-height:1.65}.hero-actions{display:flex;justify-content:center;gap:12px;margin:30px 0 34px}.hero-products{display:flex;justify-content:center;gap:10px;flex-wrap:wrap;margin:10px auto 55px}.hero-product{width:120px;padding:15px 10px;border:1px solid #e7e7ed;border-radius:10px;background:#fff;display:flex;flex-direction:column;align-items:center;gap:7px;transition:.2s;box-shadow:0 8px 30px #1a17320a}.hero-product:hover{border-color:#bcb7ff;box-shadow:0 12px 35px #665cff16;transform:translateY(-3px)}.hero-product img{width:35px;height:35px}.hero-product strong{font-size:12px}.hero-product small{font-size:10px;color:#777783}.hero-dashboard{max-width:1000px;margin:auto;border:1px solid #dddde5;border-bottom:0;border-radius:18px 18px 0 0;background:#fff;box-shadow:0 35px 90px #201d4917;overflow:hidden;text-align:left}.dash-top{height:58px;border-bottom:1px solid #ededf2;display:flex;align-items:center;padding:0 18px;gap:20px;font-size:11px;color:#777783}.dash-brand{font-weight:800;color:#17171d;display:flex;align-items:center;gap:7px}.dash-brand img{width:20px}.dash-top>span{flex:1;text-align:center}.avatar{width:28px;height:28px;border-radius:50%;background:#17171d;color:#fff;display:grid;place-items:center;font-weight:700}.dash-body{display:grid;grid-template-columns:190px 1fr;min-height:330px}.dash-body aside{background:#fafafd;border-right:1px solid #ededf2;padding:20px 13px;display:flex;flex-direction:column;gap:7px}.dash-body aside b{font-size:10px;color:#92929d;padding:0 10px 10px;text-transform:uppercase;letter-spacing:.1em}.dash-body aside a{font-size:11px;padding:10px;border-radius:7px;display:flex;gap:9px;align-items:center;color:#777783}.dash-body aside a.selected{background:#eeecff;color:#5048ca;font-weight:700}.dash-body aside img{width:16px;height:16px}.dash-content{padding:28px}.dash-content small{color:#858591}.dash-content h3{margin:5px 0 25px;font-size:25px;letter-spacing:-.03em}.dash-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}.dash-cards>div{border:1px solid #ededf2;border-radius:10px;padding:16px;display:grid;grid-template-columns:28px 1fr;gap:3px 10px}.dash-cards img{width:25px;grid-row:span 2}.dash-cards b{font-size:21px}.dash-cards span{font-size:9px;color:#8b8b95}.dash-lines{margin-top:25px;display:grid;gap:9px}.dash-lines i{height:9px;border-radius:10px;background:#f0f0f4}.dash-lines i:nth-child(1){width:85%}.dash-lines i:nth-child(2){width:70%}.dash-lines i:nth-child(3){width:55%}.trust{border-bottom:1px solid var(--line);border-top:1px solid var(--line);background:#fafafd}.trust-row{min-height:70px;display:flex;justify-content:center;align-items:center;gap:35px;font-size:11px;color:#74747e}.trust-row b{color:#22222a}.section{padding:115px 0}.section-heading{text-align:center;max-width:720px;margin:0 auto 55px}.section-heading h2,.business h2,.security-box h2{font-size:clamp(38px,5vw,62px);line-height:1.02;letter-spacing:-.05em;margin:0}.section-heading p,.business>p{color:var(--muted);line-height:1.65;font-size:16px}.product-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:16px}.product-card{grid-column:span 2;border:1px solid var(--line);border-radius:15px;padding:28px;background:#fff;min-height:300px;transition:.2s}.product-card:nth-child(4),.product-card:nth-child(5){grid-column:span 3}.product-card:hover{transform:translateY(-4px);box-shadow:0 20px 50px #1a17320c}.product-logo{width:58px;height:58px;border:1px solid #e6e5ef;border-radius:13px;background:#fafaff;display:grid;place-items:center;margin-bottom:38px}.product-logo img{width:38px;height:38px}.product-card small{font-size:9px;letter-spacing:.13em;color:#777784;font-weight:800}.product-card h3{font-size:25px;margin:8px 0}.product-card p{font-size:13px;color:#72727e;line-height:1.65;min-height:64px}.product-card a{font-size:12px;color:#5a52d8;font-weight:800}.dark-section{padding:120px 0;background:var(--dark);color:#fff}.split{display:grid;grid-template-columns:1.1fr .9fr;gap:100px;align-items:center}.split h2{font-size:clamp(40px,5vw,66px);line-height:1;letter-spacing:-.05em;margin:0}.split>div>p{color:#a6a6b4;max-width:610px;line-height:1.7;margin:25px 0}.checks{border-top:1px solid #ffffff16}.checks div{display:flex;gap:25px;padding:17px 0;border-bottom:1px solid #ffffff16}.checks b{color:#716aff;font-size:11px}.checks span{font-size:13px}.control-card{height:390px;border:1px solid #ffffff13;border-radius:20px;background:radial-gradient(circle at 50% 35%,#25224b,#11111a 58%);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px}.control-card img{width:100px;height:100px;margin-bottom:15px}.control-card strong{font-size:20px}.control-card>span{color:#9999aa;font-size:12px}.status{margin-top:35px;border:1px solid #ffffff14;border-radius:50px;padding:10px 15px;color:#a9a9b6;font-size:11px}.status i{display:inline-block;width:7px;height:7px;background:#4fe0a5;border-radius:50%;margin-right:7px}.centered{text-align:center}.business{background:#f7f7fb}.business>p{max-width:550px;margin:22px auto 30px}.security-box{display:grid;grid-template-columns:1fr 360px;gap:80px;align-items:center}.security-box>div:first-child>p{color:var(--muted);line-height:1.7;max-width:580px;margin:25px 0}.security-logo{height:300px;border:1px solid var(--line);border-radius:20px;display:flex;flex-direction:column;align-items:center;justify-content:center;background:#fafaff}.security-logo img{width:90px;margin-bottom:18px}.security-logo strong{font-size:19px}.security-logo span{font-size:11px;color:#81818c;margin-top:7px}.cta{padding:0 0 115px;background:#fff}.cta-box{border-radius:20px;background:#6158df;padding:65px 70px;color:#fff;display:flex;justify-content:space-between;align-items:center;gap:30px;overflow:hidden}.cta h2{font-size:clamp(40px,5vw,62px);line-height:.98;letter-spacing:-.05em;margin:0}.cta p{color:#d7d5ff}.footer{padding:65px 0 40px;display:flex;justify-content:space-between;gap:50px}.footer p{color:#777783;font-size:12px;max-width:270px;line-height:1.6}.footer-links{display:flex;gap:90px}.footer-links div{display:flex;flex-direction:column;gap:11px}.footer-links b{font-size:11px}.footer-links a{font-size:11px;color:#777783}.footer-links a:hover{color:#111}.footer-bottom{border-top:1px solid var(--line);padding:18px 0 25px;display:flex;justify-content:space-between;font-size:10px;color:#8b8b95}@media(max-width:900px){.nav-links{display:none}.menu-toggle{display:block}.login-link{display:none}.hero{padding-top:65px}.dash-body{grid-template-columns:140px 1fr}.split,.security-box{grid-template-columns:1fr;gap:45px}.product-card,.product-card:nth-child(4),.product-card:nth-child(5){grid-column:span 3}.footer{flex-direction:column}.footer-links{gap:50px}}@media(max-width:650px){.container{width:calc(100% - 30px)}.site-header{height:66px}.theme-toggle{display:none}.button-small{display:none}.hero h1{font-size:49px}.hero-copy>p{font-size:15px}.hero-actions{flex-direction:column}.hero-products{display:grid;grid-template-columns:repeat(3,1fr)}.hero-product{width:auto;padding:12px 5px}.hero-product:nth-child(4),.hero-product:nth-child(5){grid-column:span 1}.hero-dashboard{display:none}.trust-row{flex-wrap:wrap;gap:13px;padding:18px 0}.section{padding:80px 0}.product-card,.product-card:nth-child(4),.product-card:nth-child(5){grid-column:span 6}.product-card p{min-height:0}.split h2,.section-heading h2,.business h2,.security-box h2,.cta h2{font-size:40px}.cta-box{padding:40px 25px;flex-direction:column;align-items:flex-start}.cta .button{width:100%}.footer-links{flex-wrap:wrap;gap:35px}} /* Zeshel dark theme — global, not limited to mobile */ html.dark{--bg:#0b0b0f;--ink:#f5f5f7;--muted:#a4a4af;--line:#282832;--soft:#14141d;--purple:#8279ff;--dark:#050508;color-scheme:dark} html.dark body{background:var(--bg);color:var(--ink)} html.dark .site-header{background:#0b0b0ff2;border-color:#26262f} html.dark .nav-links{color:#aaaab6} html.dark .nav-links a:hover,html.dark .login-link{color:#fff} html.dark .hero{background:linear-gradient(#0b0b0f,#0d0d14)} html.dark .hero-product,html.dark .product-card,html.dark .security-logo,html.dark .hero-dashboard{background:#111116;border-color:#292932} html.dark .hero-product:hover,html.dark .hero-product.active{border-color:#7068e8;box-shadow:0 12px 35px #8279ff18} html.dark .trust,html.dark .business,html.dark .security{background:#0b0b0f;border-color:#282832} html.dark .trust-row{color:#92929f} html.dark .trust-row b{color:#eeeef2} html.dark .dash-body aside{background:#0e0e14;border-color:#292932} html.dark .dash-top,html.dark .dash-cards>div{border-color:#292932} html.dark .dash-brand{color:#fff} html.dark .dash-body aside a{color:#a2a2ae} html.dark .dash-body aside a.selected{background:#252249;color:#b4aeff} html.dark .dash-content h3{color:#fff} html.dark .dash-lines i{background:#292932} html.dark .button-ghost{color:#fff;border-color:#383843} html.dark .product-logo{background:#171720;border-color:#2d2d38} html.dark .footer{background:#0b0b0f} html.dark footer{background:#0b0b0f;border-color:#282832} html.dark .footer-links a{color:#9999a5} html.dark .footer-links a:hover{color:#fff} html.dark .cta{background:#0b0b0f} html.dark .cta-box{background:#5149c9} html.dark .hero-copy>p,html.dark .section-heading p,html.dark .business>p,html.dark .product-card p,html.dark .security-box>div:first-child>p{color:#a7a7b2} html.dark .eyebrow{color:#948dff} html.dark .hero h1 span,html.dark .section-heading h2 span,html.dark .split h2 span,html.dark .business h2 span,html.dark .security-box h2 span,html.dark .cta h2 span{color:#928bff} html.dark .nav-links.mobile-open{background:#111116;border-color:#2a2a35} @media(max-width:900px){.nav-links.mobile-open{display:flex;position:absolute;left:15px;right:15px;top:72px;background:#fff;border:1px solid #e8e8ed;border-radius:10px;padding:18px;flex-direction:column;gap:16px;box-shadow:0 20px 50px #00000012}html.dark .nav-links.mobile-open{background:#111116;border-color:#2a2a35}} /* Footer logo sizing */ .site-footer .footer-logo, footer .footer-logo, .footer-brand img, footer .brand-logo { width: 108px !important; max-width: 108px !important; height: auto !important; } /* Zeshel hero: technical typography only for the main title */ .hero h1, .hero-title, .hero__title { font-family: "Orbitron", "Rajdhani", "Space Grotesk", "Arial Narrow", sans-serif !important; font-weight: 700; letter-spacing: -0.035em; } /* Products dropdown */ .products-dropdown { position: relative; } .products-dropdown .nav-dropdown-toggle { appearance: none; border: 0; background: transparent; font: inherit; color: inherit; cursor: pointer; display: inline-flex; align-items: center; gap: 7px; padding: 8px 0; } .nav-chevron { font-size: 15px; line-height: 1; transition: transform .18s ease; } .products-dropdown.open .nav-chevron { transform: rotate(180deg); } .nav-dropdown-menu { position: absolute; top: calc(100% + 12px); left: 50%; transform: translateX(-50%) translateY(-6px); width: 560px; padding: 14px; border: 1px solid rgba(127,127,127,.18); border-radius: 14px; background: var(--card-bg, #fff); box-shadow: 0 18px 45px rgba(0,0,0,.14); opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .18s ease, transform .18s ease, visibility .18s ease; z-index: 1000; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; } .products-dropdown.open .nav-dropdown-menu { opacity: 1; visibility: visible; pointer-events: auto; transform: translateX(-50%) translateY(0); } .nav-dropdown-menu a { display: flex; align-items: center; gap: 12px; padding: 13px 12px; border-radius: 10px; color: inherit; text-decoration: none; } .nav-dropdown-menu a:hover { background: rgba(127,127,127,.09); } .nav-dropdown-menu strong, .nav-dropdown-menu small { display: block; } .nav-dropdown-menu strong { font-size: 14px; line-height: 1.2; } .nav-dropdown-menu small { margin-top: 3px; font-size: 12px; opacity: .62; line-height: 1.35; } .dropdown-product-icon { width: 34px; height: 34px; flex: 0 0 34px; display: grid; place-items: center; border-radius: 9px; background: rgba(127,127,127,.10); font-size: 17px; } @media (max-width: 760px) { .nav-dropdown-menu { position: fixed; top: 72px; left: 12px; right: 12px; transform: translateY(-6px); width: auto; } .products-dropdown.open .nav-dropdown-menu { transform: translateY(0); } } /* Dropdown Produits : ouverture exclusivement au clic */ .products-dropdown:not(.open) .nav-dropdown-menu { opacity:0 !important; visibility:hidden !important; pointer-events:none !important; } .products-dropdown.open .nav-dropdown-menu { opacity:1 !important; visibility:visible !important; pointer-events:auto !important; } /* Navigation compacte : tous les liens restent sur la même ligne */ .nav-links { display:flex; align-items:center; flex-wrap:nowrap; white-space:nowrap; gap:26px; min-width:0; } .nav-links > a, .products-dropdown { flex:0 0 auto; } /* Dropdown sans icônes, texte plus compact et deux colonnes */ .nav-dropdown-menu { width:540px; padding:10px; gap:2px; border-radius:12px; } .nav-dropdown-menu a { display:block; padding:11px 12px; border-radius:8px; } .nav-dropdown-menu strong { font-size:12px; line-height:1.25; } .nav-dropdown-menu small { margin-top:2px; font-size:10px; line-height:1.3; } /* Les icônes produits du dropdown sont masquées */ .dropdown-product-icon { display:none !important; } /* Icône de thème : soleil en clair, symbole d'éclat en sombre */ .theme-toggle { width:30px; height:30px; display:grid; place-items:center; font-size:17px; line-height:1; } @media (max-width: 1050px) and (min-width: 901px) { .nav { gap:14px; } .nav-links { gap:16px; font-size:12px; } .nav-actions { gap:9px; } .login-link { font-size:12px; } .button-small { padding:9px 12px; } } /* Dropdown produit : logos et thème */ .dropdown-product-icon{display:block!important;width:36px;height:36px;object-fit:contain;flex:0 0 36px;border-radius:9px;background:rgba(127,127,127,.08);padding:4px} .nav-dropdown-menu{background:var(--bg,#fff);color:var(--ink,#15151b);border-color:var(--line,#e8e8ed);box-shadow:0 18px 45px rgba(0,0,0,.16)} .nav-dropdown-menu a{display:flex!important;align-items:center;gap:12px} html.dark .nav-dropdown-menu{background:#111116;color:#f5f5f7;border-color:#30303a;box-shadow:0 20px 50px #0008} html.dark .nav-dropdown-menu a:hover{background:#252530} html.dark .nav-dropdown-menu small{color:#b6b6c2;opacity:1} .nav-actions .button-small{display:none!important} /* Zeshel Mail product page */ .mail-feature-section{padding:100px 0 105px;background:linear-gradient(180deg,#f8f8ff 0%,var(--bg) 100%);border-top:1px solid var(--line);border-bottom:1px solid var(--line)} .mail-hero-grid{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center} .mail-copy h2{font-size:clamp(38px,5vw,60px);line-height:1.03;letter-spacing:-.055em;margin:0} .mail-copy h2 span{color:var(--purple)}.mail-copy>p{color:var(--muted);font-size:16px;line-height:1.75;max-width:580px;margin:24px 0} .mail-actions{justify-content:flex-start;flex-wrap:wrap}.mail-visual{padding:22px;border:1px solid #e3e2f1;border-radius:20px;background:radial-gradient(circle at 80% 0%,#dedcff 0,transparent 55%),#f1f0ff;box-shadow:0 30px 70px #5149c915} .mail-window{border:1px solid #e2e2ec;border-radius:13px;overflow:hidden;background:#fff;box-shadow:0 12px 36px #16142c12;color:#17171d}.mail-window-top{height:58px;display:flex;align-items:center;gap:10px;padding:0 16px;border-bottom:1px solid #ededf2}.mail-window-top img{width:28px;height:28px}.mail-window-top b{font-size:13px}.mail-window-top span{font-size:10px;color:#858592;margin-left:auto}.mail-window-body{display:grid;grid-template-columns:135px 1fr;min-height:270px}.mail-window-body aside{padding:20px 12px;background:#fafaff;border-right:1px solid #ededf2}.mail-window-body aside b{font-size:10px;display:block;margin-bottom:22px}.mail-window-body aside i{display:block;height:7px;background:#e9e8f5;border-radius:5px;margin:15px 0}.mail-message{padding:24px 18px}.mail-message>small{font-size:9px;letter-spacing:.1em;color:#777784}.mail-message h3{font-size:18px;line-height:1.3;margin:10px 0 20px}.mail-row{padding:13px 0;border-top:1px solid #ededf2;display:flex;flex-direction:column;gap:5px}.mail-row b{font-size:10px}.mail-row span{font-size:10px;color:#777784}.mail-benefits{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;margin-top:75px}.mail-benefits article{padding:23px;border:1px solid var(--line);border-radius:13px;background:var(--bg)}.mail-benefit-icon{display:grid;place-items:center;width:42px;height:42px;border-radius:11px;background:#eeecff;color:#554bd4;font-weight:800;font-size:22px}.mail-benefits h3{font-size:16px;line-height:1.3;margin:19px 0 9px}.mail-benefits p{font-size:12px;line-height:1.7;color:var(--muted);margin:0}.mail-bottom-note{display:flex;align-items:center;justify-content:space-between;gap:24px;margin-top:24px;padding:28px 30px;border-radius:13px;background:#17171f;color:#fff}.mail-bottom-note h3{margin:0 0 8px;font-size:19px}.mail-bottom-note p{margin:0;color:#b7b7c3;font-size:12px;line-height:1.6}.mail-bottom-note .button{flex-shrink:0} html.dark .mail-feature-section{background:linear-gradient(180deg,#11111a 0%,var(--bg) 100%)}html.dark .mail-visual{background:radial-gradient(circle at 80% 0%,#302c58 0,transparent 55%),#171722;border-color:#343344}html.dark .mail-window{background:#111116;color:#f5f5f7;border-color:#30303a}html.dark .mail-window-top,html.dark .mail-row,html.dark .mail-window-body aside{border-color:#30303a}html.dark .mail-window-body aside{background:#171720}html.dark .mail-window-body aside i{background:#30303a}html.dark .mail-row span,html.dark .mail-window-top span{color:#a7a7b5}html.dark .mail-benefit-icon{background:#29254f;color:#b8b2ff} /* Responsive navigation: desktop, tablet and mobile */ @media(max-width:1050px){.nav{gap:12px}.nav-links{gap:14px;font-size:12px}.nav-actions{gap:9px}.brand{font-size:18px}.login-link{font-size:12px}} @media(max-width:900px){.nav-links{display:none}.nav-links.mobile-open{display:flex;position:absolute;left:15px;right:15px;top:calc(100% + 7px);background:var(--bg);color:var(--ink);border:1px solid var(--line);border-radius:12px;padding:18px;flex-direction:column;align-items:stretch;gap:8px;white-space:normal;box-shadow:0 20px 50px #0002;max-height:calc(100vh - 100px);overflow-y:auto}.nav-links.mobile-open>a{padding:9px 6px}.products-dropdown{width:100%}.products-dropdown .nav-dropdown-toggle{width:100%;justify-content:space-between;padding:10px 6px}.nav-dropdown-menu{position:static;left:auto;top:auto;transform:none!important;width:100%;grid-template-columns:1fr;padding:6px;box-shadow:none;margin:4px 0 8px}.products-dropdown:not(.open) .nav-dropdown-menu{display:none}.products-dropdown.open .nav-dropdown-menu{display:grid}.menu-toggle{display:block}.login-link{display:inline-flex}.theme-toggle{display:grid}.mail-hero-grid{grid-template-columns:1fr;gap:38px}.mail-visual{max-width:650px;width:100%;margin:auto}.mail-benefits{grid-template-columns:repeat(2,minmax(0,1fr))}} @media(max-width:650px){.site-header{height:66px}.nav{gap:8px}.brand{font-size:17px;gap:6px}.brand-mark{width:24px;height:24px}.nav-actions{gap:7px}.login-link{display:none}.theme-toggle{display:grid;width:28px;height:28px}.menu-toggle{font-size:21px;padding:4px}.nav-links.mobile-open{top:calc(100% + 5px);left:10px;right:10px;padding:12px}.mail-feature-section{padding:70px 0}.mail-copy h2{font-size:39px}.mail-copy>p{font-size:14px}.mail-actions{flex-direction:column;align-items:stretch}.mail-actions .button{width:100%}.mail-visual{padding:10px;border-radius:14px}.mail-window-body{grid-template-columns:92px 1fr;min-height:230px}.mail-window-body aside{padding:15px 8px}.mail-window-body aside b{font-size:9px}.mail-message{padding:18px 12px}.mail-message h3{font-size:15px}.mail-window-top span{display:none}.mail-benefits{grid-template-columns:1fr;gap:10px;margin-top:45px}.mail-benefits article{padding:20px}.mail-bottom-note{align-items:stretch;flex-direction:column;padding:24px 20px}.mail-bottom-note .button{width:100%}} /* Dropdown Produits : contenu intégralement visible sans débordement */ .products-dropdown { min-width: 0; } .nav-dropdown-menu { box-sizing: border-box; width: min(560px, calc(100vw - 32px)); max-width: calc(100vw - 32px); grid-template-columns: repeat(2, minmax(0, 1fr)); } .nav-dropdown-menu a { min-width: 0; box-sizing: border-box; overflow-wrap: anywhere; } .nav-dropdown-menu a > span { min-width: 0; flex: 1 1 auto; } .nav-dropdown-menu small { overflow-wrap: anywhere; } @media (min-width: 901px) { .products-dropdown .nav-dropdown-menu { left: 0; transform: translateY(-6px); } .products-dropdown.open .nav-dropdown-menu { transform: translateY(0); } } @media (max-width: 900px) { .nav-links.mobile-open { box-sizing: border-box; width: auto; max-width: calc(100vw - 20px); } .nav-dropdown-menu { width: 100%; max-width: 100%; grid-template-columns: minmax(0, 1fr); } .nav-dropdown-menu a { padding: 10px 8px; } .nav-dropdown-menu small { white-space: normal; } } /* Zeshel Mail — détails des avantages professionnels */ .mail-detail-section{padding:88px 0 20px} .mail-section-heading{max-width:760px;margin:0 auto 38px;text-align:center} .mail-section-heading h2,.mail-audience h2{font-size:clamp(30px,4.3vw,48px);line-height:1.08;letter-spacing:-.045em;margin:0} .mail-section-heading h2 span,.mail-audience h2 span{color:var(--purple)} .mail-section-heading>p{max-width:650px;margin:18px auto 0;color:var(--muted);font-size:15px;line-height:1.75} .mail-detail-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px} .mail-detail-card{min-width:0;padding:25px;border:1px solid var(--line);border-radius:14px;background:var(--bg);box-shadow:0 8px 28px rgba(20,20,40,.035)} .mail-detail-number{display:grid;place-items:center;width:38px;height:34px;border-radius:8px;background:#eeecff;color:#554bd4;font-size:12px;font-weight:800;letter-spacing:.04em} .mail-detail-card h3{font-size:18px;line-height:1.35;margin:18px 0 10px;letter-spacing:-.02em} .mail-detail-card p,.mail-detail-card li{font-size:13px;line-height:1.7;color:var(--muted)} .mail-detail-card p{margin:0 0 14px} .mail-detail-card ul{list-style:none;padding:0;margin:0;display:grid;gap:8px} .mail-detail-card li{position:relative;padding-left:20px} .mail-detail-card li:before{content:'✓';position:absolute;left:0;top:0;color:var(--purple);font-weight:800} .mail-audience{margin-top:75px;padding:42px;display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:42px;border-radius:18px;background:#17171f;color:#fff} .mail-audience h2{font-size:clamp(28px,3.5vw,40px)} .mail-audience>div:first-child>p{color:#c2c2ce;font-size:14px;line-height:1.8;margin:20px 0 0;max-width:600px} .mail-audience-points{display:grid;gap:10px} .mail-audience-points>div{padding:16px 18px;border:1px solid #383844;border-radius:10px;background:#ffffff06;display:grid;gap:6px} .mail-audience-points b{font-size:14px}.mail-audience-points span{font-size:12px;line-height:1.6;color:#c2c2ce} html.dark .mail-detail-card{box-shadow:none}html.dark .mail-detail-number{background:#29254f;color:#b8b2ff} @media(max-width:900px){.mail-detail-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.mail-audience{grid-template-columns:1fr;padding:30px;gap:24px}} @media(max-width:600px){.mail-detail-section{padding-top:62px}.mail-section-heading{text-align:left;margin-bottom:25px}.mail-section-heading>p{font-size:14px}.mail-detail-grid{grid-template-columns:1fr;gap:11px}.mail-detail-card{padding:21px}.mail-detail-card h3{font-size:17px}.mail-audience{margin-top:45px;padding:24px 20px;border-radius:13px}.mail-audience h2{font-size:30px}} /* Zeshel Mail: strategic value proposition and FAQ */ .mail-value-section{padding:82px 0 12px} .mail-value-grid{display:grid;grid-template-columns:1.2fr 1fr 1fr;gap:16px} .mail-value-card{min-width:0;padding:26px;border:1px solid var(--line);border-radius:15px;background:var(--bg);box-shadow:0 10px 32px rgba(20,20,40,.035)} .mail-value-featured{background:linear-gradient(145deg,#f0efff,#fff);border-color:#dedbff} .mail-value-symbol{display:grid;place-items:center;width:42px;height:42px;border-radius:12px;background:#eeecff;color:#554bd4;font-size:23px;font-weight:800;margin-bottom:22px} .mail-value-kicker{font-size:10px;font-weight:800;letter-spacing:.12em;color:var(--purple)} .mail-value-card h3{font-size:20px;line-height:1.3;letter-spacing:-.025em;margin:10px 0} .mail-value-card p,.mail-value-card li{font-size:13px;line-height:1.75;color:var(--muted)} .mail-value-card ul{list-style:none;padding:0;margin:17px 0 0;display:grid;gap:8px} .mail-value-card li{position:relative;padding-left:19px}.mail-value-card li:before{content:'✓';position:absolute;left:0;color:var(--purple);font-weight:800} .mail-value-footnote{font-size:11px!important;border-top:1px solid var(--line);padding-top:13px;margin-top:20px} .mail-principles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-top:18px} .mail-principles>div{display:flex;gap:12px;align-items:flex-start;padding:18px;border:1px solid var(--line);border-radius:12px} .mail-principle-icon{flex:0 0 27px;display:grid;place-items:center;width:27px;height:27px;border-radius:50%;background:#eeecff;color:#554bd4;font-weight:800} .mail-principles b{font-size:13px}.mail-principles p{font-size:12px;line-height:1.6;color:var(--muted);margin:5px 0 0} .mail-faq-section{padding:82px 0 10px}.mail-faq-list{max-width:850px;margin:0 auto;border-top:1px solid var(--line)} .mail-faq-list details{border-bottom:1px solid var(--line);padding:0 4px} .mail-faq-list summary{cursor:pointer;list-style:none;position:relative;padding:21px 42px 21px 0;font-size:15px;font-weight:700;line-height:1.5} .mail-faq-list summary::-webkit-details-marker{display:none}.mail-faq-list summary:after{content:'+';position:absolute;right:5px;top:17px;font-size:24px;font-weight:400;color:var(--purple)} .mail-faq-list details[open] summary:after{content:'−'}.mail-faq-list details p{max-width:760px;margin:-4px 35px 22px 0;color:var(--muted);font-size:13px;line-height:1.8} html.dark .mail-value-card{box-shadow:none}html.dark .mail-value-featured{background:linear-gradient(145deg,#201e35,#15151d);border-color:#393451}html.dark .mail-value-symbol,html.dark .mail-principle-icon{background:#29254f;color:#b8b2ff} @media(max-width:900px){.mail-value-grid{grid-template-columns:1fr 1fr}.mail-value-featured{grid-column:1/-1}.mail-principles{grid-template-columns:1fr}} @media(max-width:600px){.mail-value-section,.mail-faq-section{padding-top:60px}.mail-value-grid{grid-template-columns:1fr}.mail-value-featured{grid-column:auto}.mail-value-card{padding:22px}.mail-faq-list summary{font-size:14px;padding-right:35px}} /* Dropdown produits : icônes visibles, contenu sans débordement */ .dropdown-product-icon{display:block!important;width:34px;height:34px;flex:0 0 34px;object-fit:contain;padding:3px;box-sizing:border-box} .nav-dropdown-menu{box-sizing:border-box;width:min(560px,calc(100vw - 32px));max-width:calc(100vw - 32px);grid-template-columns:repeat(2,minmax(0,1fr));overflow-x:hidden} .nav-dropdown-menu a{display:flex!important;align-items:center;gap:10px;min-width:0;box-sizing:border-box;overflow:hidden} .nav-dropdown-menu a>span{min-width:0;flex:1 1 auto;overflow-wrap:anywhere} .nav-dropdown-menu strong,.nav-dropdown-menu small{overflow-wrap:anywhere;white-space:normal} .footer-brand-mark{display:inline-flex;width:38px;height:38px;align-items:center;justify-content:center} .footer-brand-mark img{width:36px;height:36px;object-fit:contain} @media(max-width:900px){.nav-dropdown-menu{width:100%;max-width:100%;grid-template-columns:minmax(0,1fr);overflow:visible}.dropdown-product-icon{width:30px;height:30px;flex-basis:30px}} /* Motion design Zeshel — animations légères, cohérentes et accessibles */ :root { scroll-behavior: smooth; } body { animation: zeshel-page-enter .55s cubic-bezier(.2,.7,.2,1) both; } @keyframes zeshel-page-enter { from { opacity: 0; } to { opacity: 1; } } .site-header { transition: box-shadow .25s ease, background-color .25s ease, border-color .25s ease; } .site-header.is-scrolled { box-shadow: 0 8px 28px rgba(18,18,35,.07); } .brand, .nav-links > a, .nav-actions > *, .button, .nav-dropdown-toggle { transition: transform .22s ease, color .22s ease, background-color .22s ease, border-color .22s ease, box-shadow .22s ease; } .brand:hover { transform: translateY(-1px); } .nav-links > a:hover, .nav-dropdown-toggle:hover { transform: translateY(-1px); } .button { will-change: transform; } .button:hover { transform: translateY(-3px); box-shadow: 0 10px 24px rgba(75,66,200,.14); } .button:active { transform: translateY(-1px) scale(.985); } .nav-dropdown-menu { transform-origin: top center; } .products-dropdown.open .nav-dropdown-menu { animation: zeshel-menu-in .2s ease both; } @keyframes zeshel-menu-in { from { opacity: 0; transform: translateY(-7px) scale(.985); } to { opacity: 1; transform: translateY(0) scale(1); } } /* Les éléments révélés restent visibles même si JavaScript est désactivé. */ .js-motion .motion-reveal { opacity: 0; transform: translateY(22px); transition: opacity .7s cubic-bezier(.2,.7,.2,1), transform .7s cubic-bezier(.2,.7,.2,1); transition-delay: var(--motion-delay, 0ms); } .js-motion .motion-reveal.is-visible { opacity: 1; transform: translateY(0); } .js-motion .motion-reveal.motion-from-left { transform: translateX(-22px); } .js-motion .motion-reveal.motion-from-right { transform: translateX(22px); } .js-motion .motion-reveal.motion-from-left.is-visible, .js-motion .motion-reveal.motion-from-right.is-visible { transform: translateX(0); } .product-art { isolation: isolate; } .product-art:before { animation: zeshel-orbit 18s linear infinite; } .product-art:after { animation: zeshel-orbit 26s linear infinite reverse; } .product-art img { animation: zeshel-float 5s ease-in-out infinite; transition: transform .35s ease, box-shadow .35s ease; } .product-art:hover img { transform: translateY(-5px) scale(1.04); box-shadow: 0 30px 65px rgba(75,66,200,.2); } @keyframes zeshel-float { 0%,100% { translate: 0 0; } 50% { translate: 0 -9px; } } @keyframes zeshel-orbit { from { rotate: 0deg; } to { rotate: 360deg; } } .product-kicker { animation: zeshel-kicker-in .65s .08s both; } @keyframes zeshel-kicker-in { from { opacity: 0; letter-spacing: .24em; } to { opacity: 1; letter-spacing: .15em; } } .feature-list li { transition: padding-left .22s ease, background-color .22s ease; } .feature-list li:hover { padding-left: 7px; } .feature-list li span { transition: transform .25s ease, background-color .25s ease; } .feature-list li:hover span { transform: scale(1.08) rotate(-6deg); } .product-cta { transition: transform .3s ease, box-shadow .3s ease; } .product-cta:hover { box-shadow: 0 18px 50px rgba(20,20,35,.12); } footer a { transition: opacity .2s ease, transform .2s ease; } footer a:hover { opacity: .75; transform: translateX(2px); } @media (prefers-reduced-motion: reduce) { :root { scroll-behavior: auto; } *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; } .js-motion .motion-reveal, .js-motion .motion-reveal.motion-from-left, .js-motion .motion-reveal.motion-from-right { opacity: 1; transform: none; } } /* Corrections visuelles v21 : halos latéraux plus visibles en thème clair. */ .hero-orb{filter:blur(48px);opacity:1} .orb-a{background:radial-gradient(circle,#776dff55 0%,#776dff28 42%,transparent 72%)} .orb-b{background:radial-gradient(circle,#72d5ff55 0%,#b9e7ff2e 45%,transparent 72%)} html.dark .orb-a{background:radial-gradient(circle,#8279ff55 0%,#8279ff2b 42%,transparent 72%)} html.dark .orb-b{background:radial-gradient(circle,#388fbd48 0%,#388fbd20 45%,transparent 72%)} /* Le lien de connexion reste visible dans la barre mobile, à côté du menu. */ @media(max-width:650px){ .nav-actions{gap:7px;flex-shrink:0} .login-link{display:inline-flex!important;align-items:center;justify-content:center;white-space:nowrap;font-size:11px;padding:7px 9px;border:1px solid var(--line);border-radius:6px;line-height:1.2} .menu-toggle{flex:0 0 auto} .theme-toggle{display:none} } /* Étoiles filantes discrètes — couche décorative globale */ .falling-stars-layer{position:fixed;inset:0;overflow:hidden;pointer-events:none;z-index:19;contain:strict;} .falling-star{position:absolute;top:-12vh;left:var(--star-x);display:block;width:3px;height:3px;border-radius:50%;color:var(--star-color,#8d83ff);opacity:0;filter:drop-shadow(0 0 4px currentColor);animation:zeshel-star-fall var(--star-duration,12s) linear var(--star-delay,0s) infinite;will-change:transform,opacity;} .falling-star::before{content:"✦";position:absolute;inset:-5px;font-size:11px;line-height:11px;text-align:center;color:currentColor;text-shadow:0 0 7px currentColor;} .falling-star::after{content:"";position:absolute;left:1px;top:3px;width:1px;height:var(--star-trail,58px);background:linear-gradient(to bottom,currentColor,transparent);opacity:.6;transform:rotate(-14deg);transform-origin:top center;} @keyframes zeshel-star-fall{0%{transform:translate3d(0,-5vh,0) rotate(0deg);opacity:0}8%{opacity:var(--star-opacity,.62)}72%{opacity:var(--star-opacity,.62)}100%{transform:translate3d(var(--star-drift,70px),115vh,0) rotate(28deg);opacity:0}} @media(max-width:700px){.falling-stars-layer{opacity:.7}.falling-star:nth-child(even){display:none}} @media(prefers-reduced-motion:reduce){.falling-stars-layer{display:none}.falling-star{animation:none!important}} /* ===== Pages produit enrichies ===== */ .psec{padding:64px 0 8px} .pmod-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-top:30px} .pmod{padding:24px;border:1px solid var(--line);border-radius:16px;background:var(--card,rgba(127,127,127,.035));transition:transform .25s ease,border-color .25s ease} .pmod:hover{transform:translateY(-3px);border-color:var(--purple)} .pmod i{display:grid;place-items:center;width:40px;height:40px;border-radius:12px;background:var(--soft);color:var(--purple);font-style:normal;font-weight:800;font-size:18px;margin-bottom:14px} .pmod h3{font-size:17px;margin:0 0 8px;letter-spacing:-.02em} .pmod p{font-size:14px;line-height:1.7;opacity:.74;margin:0} .psteps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-top:30px} .pstep{padding:26px;border-radius:16px;background:var(--soft);border:1px solid var(--line)} .pstep span{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:var(--purple);color:#fff;font-weight:800;margin-bottom:14px} .pstep h3{font-size:18px;margin:0 0 8px;letter-spacing:-.02em} .pstep p{margin:0;font-size:14px;line-height:1.7;opacity:.74} .suite-strip{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin-top:28px} .suite-chip{display:flex;align-items:center;gap:14px;padding:18px;border:1px solid var(--line);border-radius:16px;color:inherit;text-decoration:none;transition:transform .25s ease,border-color .25s ease} .suite-chip:hover{transform:translateY(-3px);border-color:var(--purple)} .suite-chip img{width:44px;height:44px;flex:0 0 44px;object-fit:contain} .suite-chip b{display:block;font-size:15px}.suite-chip small{display:block;opacity:.65;font-size:12px;margin-top:2px} .product-art img{width:min(100%,300px);height:auto} @media(max-width:900px){.pmod-grid,.psteps{grid-template-columns:repeat(2,minmax(0,1fr))}.suite-strip{grid-template-columns:repeat(2,minmax(0,1fr))}} @media(max-width:600px){.pmod-grid,.psteps,.suite-strip{grid-template-columns:1fr}.psec{padding-top:44px}} .product-hero .product-art img{width:176px;height:176px;max-width:none;padding:24px;box-sizing:border-box;border-radius:40px;background:#fff;object-fit:contain} @media(max-width:600px){.product-hero .product-art img{width:132px;height:132px;padding:18px;border-radius:30px}} .psec ~ .mail-faq-section{margin-bottom:56px} /* ===== Mail : protection hameçonnage ===== */ .phish-grid{display:grid;grid-template-columns:1.05fr 1fr;gap:44px;align-items:center} .phish-grid h2{font-size:clamp(28px,3.4vw,42px);line-height:1.12;letter-spacing:-.035em;margin:12px 0 14px} .phish-grid h2 span{color:var(--purple)} .phish-lead{font-size:15px;line-height:1.75;color:var(--muted);margin:0 0 20px} .phish-list{list-style:none;padding:0;margin:0 0 6px;display:grid;gap:12px} .phish-list li{position:relative;padding:14px 16px 14px 48px;border:1px solid var(--line);border-radius:14px;background:var(--bg)} .phish-list li:before{content:'✓';position:absolute;left:14px;top:14px;display:grid;place-items:center;width:24px;height:24px;border-radius:8px;background:var(--soft);color:var(--purple);font-weight:800;font-size:13px} .phish-list b{display:block;font-size:14px}.phish-list span{font-size:13px;line-height:1.6;color:var(--muted)} .phish-visual{padding:28px;border-radius:22px;background:linear-gradient(145deg,#f0efff,#fff);border:1px solid #dedbff} .phish-mail{border:1px solid var(--line);border-radius:16px;background:var(--bg);overflow:hidden;box-shadow:0 20px 50px rgba(75,66,200,.13)} .phish-warn{display:flex;gap:12px;align-items:flex-start;padding:16px 18px;background:#fff7e6;border-bottom:1px solid #fde1a6;color:#7a4a00} .phish-warn svg{flex:0 0 34px}.phish-warn b{display:block;font-size:14px;color:#8a4b00}.phish-warn span{display:block;font-size:12.5px;line-height:1.55;margin-top:2px} .phish-meta{padding:16px 18px 6px;display:grid;grid-template-columns:auto 1fr;gap:6px 12px;align-items:baseline} .phish-meta small{color:var(--muted);font-size:11px;text-transform:uppercase;letter-spacing:.08em}.phish-meta b{font-size:13px;word-break:break-all} .phish-body{padding:8px 18px}.phish-body i{display:block;height:8px;border-radius:6px;background:var(--line);margin:9px 0}.phish-body i.short{width:55%} .phish-flags{display:flex;gap:8px;flex-wrap:wrap;padding:6px 18px 4px} .phish-flags span{font-size:11.5px;font-weight:700;padding:5px 10px;border-radius:99px;background:#fff1e0;color:#a15a00;border:1px solid #fde1a6} .phish-actions{display:flex;gap:10px;padding:14px 18px 18px;flex-wrap:wrap} .phish-actions span{font-size:12.5px;font-weight:700;padding:9px 14px;border-radius:10px;border:1px solid var(--line)} .phish-actions .pa-danger{background:#d92d20;border-color:#d92d20;color:#fff} html.dark .phish-visual{background:linear-gradient(145deg,#201e35,#15151d);border-color:#393451} html.dark .phish-warn{background:#3a2a0b;border-color:#6b4a12;color:#f5d28a}html.dark .phish-warn b{color:#ffd48a} html.dark .phish-flags span{background:#3a2a0b;border-color:#6b4a12;color:#ffd48a} @media(max-width:900px){.phish-grid{grid-template-columns:1fr;gap:28px}} .mail-value-grid{grid-template-columns:repeat(3,minmax(0,1fr))} @media(max-width:900px){.mail-value-grid{grid-template-columns:1fr}} .phish-grid .mail-value-footnote{color:var(--muted);font-size:12px!important;margin-top:16px} /* ===== Étoiles filantes : minuscules et épurées ===== */ .falling-star{width:2px;height:2px;filter:none} .falling-star:nth-child(even){display:none} .falling-star::before{content:"";inset:0;border-radius:50%;background:currentColor;font-size:0;text-shadow:none;box-shadow:0 0 3px currentColor} .falling-star::after{left:.5px;top:2px;width:1px;height:calc(var(--star-trail,58px)*.5);opacity:.4} /* ===== Navbar responsive (mobile + tablette) ===== */ .site-header{z-index:80} .nav-actions .login-link{white-space:nowrap} @media(max-width:900px){ .nav-actions .theme-toggle{display:inline-grid!important;place-items:center;width:36px;height:36px} .nav-links{display:none!important} .nav-links.mobile-open{display:flex!important;flex-direction:column;align-items:stretch;gap:2px;position:absolute;top:calc(100% + 6px);left:auto;right:15px;width:min(420px,calc(100vw - 30px));max-width:none;max-height:calc(100dvh - 92px);overflow-y:auto;overscroll-behavior:contain;box-sizing:border-box;padding:10px;background:var(--bg);color:var(--ink);border:1px solid var(--line);border-radius:14px;box-shadow:0 22px 55px rgba(0,0,0,.16);white-space:normal} .nav-links.mobile-open>a{display:block;padding:12px 10px;border-radius:9px;font-size:14px} .nav-links.mobile-open>a:hover{background:rgba(127,127,127,.09);transform:none} .products-dropdown{width:100%} .products-dropdown .nav-dropdown-toggle{width:100%;justify-content:space-between;padding:12px 10px;font-size:14px;border-radius:9px} .nav-dropdown-menu{position:static!important;transform:none!important;width:100%!important;max-width:100%!important;grid-template-columns:minmax(0,1fr)!important;margin:2px 0 6px;padding:4px;box-shadow:none!important;border:0!important;background:transparent!important} html.dark .nav-links.mobile-open{background:#111116;border-color:#2a2a35} .menu-toggle{display:inline-grid!important;place-items:center;width:40px;height:40px;font-size:22px} } @media(max-width:560px){ .nav-links.mobile-open{left:10px;right:10px;width:auto} .nav-actions .login-link{font-size:12px;padding:8px 11px} .nav-actions{gap:4px}.brand span{font-size:17px} } @media(max-width:360px){.nav-actions .login-link{display:none}} /* ===== Page contact ===== */ .contact-hero{padding:76px 0 30px;text-align:left} .contact-hero h1{font-size:clamp(34px,5vw,58px);line-height:1.05;letter-spacing:-.04em;margin:12px 0 16px;max-width:760px} .contact-hero h1 span{color:var(--purple)} .contact-hero p{max-width:620px;font-size:16px;line-height:1.75;color:var(--muted);margin:0} .contact-grid{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,.8fr);gap:22px;align-items:start;padding:26px 0 30px} .contact-card{padding:30px;border:1px solid var(--line);border-radius:20px;background:var(--bg);box-shadow:0 14px 40px rgba(20,20,40,.05)} .contact-card h2{font-size:22px;letter-spacing:-.03em;margin:0 0 4px} .contact-card>p{margin:0 0 22px;font-size:14px;color:var(--muted)} .cf-row{display:grid;grid-template-columns:1fr 1fr;gap:14px} .cf-field{display:grid;gap:6px;margin-bottom:14px;min-width:0} .cf-field label,.cf-label{font-size:12.5px;font-weight:700} .cf-field input,.cf-field select,.cf-field textarea{width:100%;box-sizing:border-box;font:inherit;font-size:14px;color:var(--ink);background:var(--bg);border:1px solid var(--line);border-radius:11px;padding:12px 13px;transition:border-color .2s,box-shadow .2s} .cf-field textarea{min-height:130px;resize:vertical} .cf-field input:focus,.cf-field select:focus,.cf-field textarea:focus{outline:0;border-color:var(--purple);box-shadow:0 0 0 3px rgba(102,92,255,.16)} .cf-field.invalid input,.cf-field.invalid textarea{border-color:#d92d20} .cf-chips{display:flex;flex-wrap:wrap;gap:8px;margin:8px 0 18px} .cf-chip{position:relative} .cf-chip input{position:absolute;opacity:0;inset:0;cursor:pointer} .cf-chip span{display:flex;align-items:center;gap:8px;padding:8px 12px 8px 8px;border:1px solid var(--line);border-radius:99px;font-size:13px;font-weight:600;transition:all .2s} .cf-chip img{width:24px;height:24px} .cf-chip input:checked+span{border-color:var(--purple);background:var(--soft);box-shadow:0 0 0 3px rgba(102,92,255,.12)} .cf-chip input:focus-visible+span{outline:2px solid var(--purple);outline-offset:2px} .cf-consent{display:flex;gap:10px;align-items:flex-start;font-size:12.5px;line-height:1.6;color:var(--muted);margin:4px 0 18px} .cf-consent input{margin-top:3px;accent-color:var(--purple)} .cf-submit{display:inline-flex;cursor:pointer;border:0;font:inherit} .cf-status{margin-top:14px;padding:13px 15px;border-radius:12px;font-size:13.5px;line-height:1.6;display:none} .cf-status.ok{display:block;background:#e8f7ef;color:#116b3d;border:1px solid #bfe8d1} .cf-status.err{display:block;background:#fdecea;color:#a3271c;border:1px solid #f6c7c2} html.dark .cf-status.ok{background:#0f2a1c;color:#8fe0b4;border-color:#1d5a3a}html.dark .cf-status.err{background:#2e1513;color:#f4a79f;border-color:#6b2a25} .contact-side{display:grid;gap:14px} .contact-info{display:flex;gap:14px;align-items:flex-start;padding:20px;border:1px solid var(--line);border-radius:16px;background:var(--bg);color:inherit;text-decoration:none} .contact-info i{flex:0 0 42px;display:grid;place-items:center;width:42px;height:42px;border-radius:12px;background:var(--soft);color:var(--purple);font-style:normal;font-size:19px;font-weight:800} .contact-info b{display:block;font-size:15px;margin-bottom:3px}.contact-info span{font-size:13.5px;line-height:1.6;color:var(--muted)} a.contact-info:hover{border-color:var(--purple)} .contact-promise{padding:22px;border-radius:16px;background:var(--ink);color:var(--bg)} .contact-promise b{display:block;font-size:16px;margin-bottom:6px}.contact-promise p{margin:0;font-size:13.5px;line-height:1.7;opacity:.78} @media(max-width:900px){.contact-grid{grid-template-columns:1fr}.contact-hero{padding:52px 0 18px}} @media(max-width:560px){.cf-row{grid-template-columns:1fr}.contact-card{padding:22px 18px;border-radius:16px}} /* ===== Tarifs ===== */ .price-wrap{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.2fr);gap:22px;align-items:start;padding:26px 0 30px} .price-main,.price-calc{padding:30px;border:1px solid var(--line);border-radius:20px;background:var(--bg);box-shadow:0 14px 40px rgba(20,20,40,.05)} .price-main{background:linear-gradient(145deg,#f0efff,#fff);border-color:#dedbff} html.dark .price-main{background:linear-gradient(145deg,#201e35,#15151d);border-color:#393451} .pay-tag{display:inline-block;font-size:10px;font-weight:800;letter-spacing:.12em;color:var(--purple)} .price-big{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;margin:10px 0 6px} .price-big b{font-size:clamp(40px,5vw,56px);letter-spacing:-.04em;line-height:1} .price-big span{font-weight:800;font-size:18px}.price-big small{display:block;font-size:12px;font-weight:500;color:var(--muted);margin-top:2px} .price-head p{margin:6px 0 0;font-size:14px;color:var(--muted)} .price-incl{list-style:none;padding:0;margin:22px 0;display:grid;gap:10px} .price-incl li{position:relative;padding-left:26px;font-size:14px;line-height:1.55} .price-incl li:before{content:'✓';position:absolute;left:0;top:1px;width:18px;height:18px;border-radius:6px;background:var(--soft);color:var(--purple);font-weight:800;font-size:11px;display:grid;place-items:center} .price-calc h2{font-size:22px;letter-spacing:-.03em;margin:0 0 4px} .calc-sub{margin:0 0 18px;font-size:14px;color:var(--muted)} .calc-stepper{display:inline-flex;align-items:center;border:1px solid var(--line);border-radius:12px;overflow:hidden} .calc-stepper button{width:46px;height:46px;border:0;background:var(--soft);color:var(--ink);font-size:20px;cursor:pointer} .calc-stepper input{width:76px;height:46px;border:0;border-inline:1px solid var(--line);text-align:center;font:inherit;font-size:17px;font-weight:800;color:var(--ink);background:var(--bg);-moz-appearance:textfield} .calc-stepper input::-webkit-outer-spin-button,.calc-stepper input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0} .calc-total{margin:18px 0 20px}.calc-total small{display:block;font-size:12px;color:var(--muted)}.calc-total b{font-size:28px;letter-spacing:-.03em} .pay-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px} .pay-card{padding:18px;border:1px solid var(--line);border-radius:14px;min-width:0} .pay-featured{border-color:var(--purple);box-shadow:0 0 0 3px rgba(102,92,255,.12)} .pay-card h3{margin:8px 0 2px;font-size:22px;letter-spacing:-.03em;line-height:1.2}.pay-card h3 small{display:block;font-size:12px;font-weight:600;color:var(--muted);letter-spacing:0} .pay-sub{font-weight:700;font-size:13px;margin:0 0 6px}.pay-card p{margin:0;font-size:12.5px;line-height:1.6;color:var(--muted)}.pay-card .pay-sub{color:var(--ink)} @media(max-width:900px){.price-wrap{grid-template-columns:1fr}} @media(max-width:640px){.pay-grid{grid-template-columns:1fr}.price-main,.price-calc{padding:22px 18px;border-radius:16px}} /* ===== Mail : comparaison ===== */ .cmp{margin-top:30px;border:1px solid var(--line);border-radius:18px;overflow:hidden;background:var(--bg)} .cmp-row{display:grid;grid-template-columns:1fr 1.2fr 1.2fr;gap:0;border-top:1px solid var(--line)} .cmp-row:first-child{border-top:0} .cmp-row>div{padding:16px 20px;font-size:14px;line-height:1.6} .cmp-head>div{font-size:12px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);background:var(--soft)} .cmp-head .cmp-zeshel{color:var(--purple)} .cmp-label{font-weight:700}.cmp-other{color:var(--muted)} .cmp-zeshel{background:linear-gradient(145deg,rgba(102,92,255,.07),transparent)} .cmp-zeshel:before{content:'✓ ';color:var(--purple);font-weight:800}.cmp-head .cmp-zeshel:before{content:''} .cmp-note{display:flex;gap:18px;align-items:center;justify-content:space-between;flex-wrap:wrap;margin-top:18px;padding:18px 22px;border-radius:16px;background:var(--soft);border:1px solid var(--line)} .cmp-note p{margin:0;font-size:14px;line-height:1.6} @media(max-width:700px){.cmp-head{display:none}.cmp-row{grid-template-columns:1fr}.cmp-row>div{padding:10px 18px}.cmp-label{padding-top:16px!important;font-size:15px}.cmp-other:before{content:'Messagerie grand public : ';font-weight:700;font-size:12px}.cmp-zeshel{padding-bottom:16px!important}.cmp-zeshel:before{content:'✓ Zeshel Mail : ';font-weight:800}} /* ===== Tarifs v27 ===== */ .price-day{font-size:15px!important;color:var(--ink)!important}.price-day b{color:var(--purple)} .price-incl li{padding-left:28px}.price-incl li b{display:block;font-size:14px}.price-incl li span{display:block;font-size:12.5px;color:var(--muted);line-height:1.55;margin-top:1px} .calc-total b{display:block;font-size:30px}.calc-total b em{font-style:normal;font-size:14px;font-weight:600;color:var(--muted);letter-spacing:0} .calc-total .calc-year{margin-top:4px;font-size:12.5px} .calc-label{font-size:12.5px;font-weight:700;margin:0 0 10px} .stat-strip{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px} .stat-strip div{padding:22px;border-radius:16px;background:var(--soft);border:1px solid var(--line);text-align:center} .stat-strip b{display:block;font-size:clamp(20px,2.4vw,28px);letter-spacing:-.03em;color:var(--purple)}.stat-strip span{font-size:13px;color:var(--muted)} @media(max-width:700px){.stat-strip{grid-template-columns:repeat(2,minmax(0,1fr))}} /* ===== Mail : protection, budget, confiance, suite ===== */ .trust-badges{list-style:none;display:flex;flex-wrap:wrap;gap:8px;padding:0;margin:22px 0 0} .trust-badges li{font-size:12.5px;font-weight:700;padding:7px 12px 7px 30px;border-radius:99px;border:1px solid var(--line);background:var(--soft);position:relative} .trust-badges li:before{content:'✓';position:absolute;left:11px;top:50%;transform:translateY(-50%);color:var(--purple);font-weight:800} .econ-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin-top:30px} .econ-card{padding:28px;border:1px solid var(--line);border-radius:20px;background:var(--bg)} .econ-other{background:var(--soft)} .econ-zeshel{border-color:var(--purple);box-shadow:0 0 0 3px rgba(102,92,255,.12);background:linear-gradient(145deg,#f0efff,#fff)} html.dark .econ-zeshel{background:linear-gradient(145deg,#201e35,#15151d)} .econ-price{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;margin:10px 0 4px} .econ-price b{font-size:clamp(26px,3.2vw,38px);letter-spacing:-.04em}.econ-price span{font-size:14px;color:var(--muted);font-weight:600} .econ-zeshel .econ-price b{color:var(--purple)} .econ-fcfa{margin:0 0 14px;font-size:13.5px;color:var(--muted)} .econ-card ul{list-style:none;margin:0;padding:0;display:grid;gap:9px} .econ-card li{position:relative;padding-left:24px;font-size:14px;line-height:1.55} .econ-card li:before{content:'·';position:absolute;left:6px;font-weight:900;color:var(--muted)} .econ-zeshel li:before{content:'✓';left:0;color:var(--purple);font-weight:800} .econ-save{display:flex;flex-wrap:wrap;align-items:center;gap:6px 22px;margin-top:16px;padding:22px 26px;border-radius:18px;background:var(--ink);color:var(--bg)} .econ-save b{font-size:19px;flex:1 1 100%}.econ-save span{flex:1 1 320px;font-size:13.5px;line-height:1.6;opacity:.78} .econ-note{margin-top:14px;font-size:12px!important;color:var(--muted)!important;line-height:1.65} .duo{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin-top:30px} .suite-cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin-top:30px} .suite-card{padding:26px;border:1px solid var(--line);border-radius:20px;background:var(--bg);display:flex;flex-direction:column;gap:14px;transition:transform .25s,border-color .25s} .suite-card:hover{transform:translateY(-3px);border-color:var(--purple)} .suite-card-head{display:flex;gap:14px;align-items:center}.suite-card-head img{width:54px;height:54px;flex:0 0 54px;object-fit:contain} .suite-card-head b{display:block;font-size:18px;letter-spacing:-.02em}.suite-card-head span{font-size:13px;color:var(--muted)} .suite-card ul{list-style:none;margin:0;padding:0;display:grid;gap:8px} .suite-card li{position:relative;padding-left:24px;font-size:14px;line-height:1.55} .suite-card li:before{content:'✓';position:absolute;left:0;color:var(--purple);font-weight:800} .suite-link{margin-top:auto;font-weight:700;font-size:14px;color:var(--purple);text-decoration:none}.suite-link:hover{text-decoration:underline} .suite-chip small{font-size:12.5px;line-height:1.5;opacity:.7} @media(max-width:800px){.econ-grid,.duo,.suite-cards{grid-template-columns:1fr}.econ-card,.suite-card{padding:22px 18px}.econ-save{padding:20px 18px}} .econ-save .button{flex:0 0 auto;white-space:nowrap}.econ-save b{flex:1 1 100%} /* ===== Tarifs : frais de configuration ===== */ .price-fee{margin-top:10px!important;padding:10px 12px;border-radius:10px;background:var(--soft);font-size:13.5px!important;color:var(--ink)!important} .calc-fee{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:0 0 20px} .calc-fee>div{padding:14px 16px;border:1px solid var(--line);border-radius:12px;background:var(--soft)} .calc-fee small{display:block;font-size:11.5px;color:var(--muted);margin-bottom:3px}.calc-fee b{font-size:17px;letter-spacing:-.02em} .fee-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-top:30px} .fee-card{padding:26px;border:1px solid var(--line);border-radius:18px;background:var(--bg);transition:border-color .25s,box-shadow .25s} .fee-card.active{border-color:var(--purple);box-shadow:0 0 0 3px rgba(102,92,255,.14);background:linear-gradient(145deg,#f0efff,#fff)} html.dark .fee-card.active{background:linear-gradient(145deg,#201e35,#15151d)} .fee-card b{display:block;font-size:30px;letter-spacing:-.04em;margin:10px 0 6px}.fee-card b small{font-size:14px;color:var(--muted);letter-spacing:0} .fee-card p{margin:0 0 14px;font-size:13.5px;line-height:1.6;color:var(--muted)} .fee-once{display:inline-block;font-size:11.5px;font-weight:700;padding:5px 10px;border-radius:99px;background:var(--soft);color:var(--purple)} @media(max-width:800px){.fee-grid{grid-template-columns:1fr}.calc-fee{grid-template-columns:1fr}} /* ===== Cartes techniques compactes (Mail) ===== */ .mx-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-top:28px} .mx-card{padding:18px;border:1px solid var(--line);border-radius:14px;background:var(--bg);display:flex;flex-direction:column;gap:6px;transition:border-color .2s,transform .2s} .mx-card:hover{border-color:var(--purple);transform:translateY(-2px)} .mx-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:4px} .mx-num{font-size:11px;font-weight:800;color:var(--purple);letter-spacing:.08em} .mx-tag{font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--muted)} .mx-card h3{margin:0;font-size:15px;letter-spacing:-.02em} .mx-card p{margin:0;font-size:13px;line-height:1.55;color:var(--muted)} .mx-chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:auto;padding-top:10px} .mx-chips code{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:11px;padding:3px 8px;border-radius:6px;background:var(--soft);border:1px solid var(--line);color:var(--ink)} .mx-note{margin:14px 0 0;text-align:center;font-size:12.5px;color:var(--muted)} @media(max-width:900px){.mx-grid{grid-template-columns:repeat(2,minmax(0,1fr))}} @media(max-width:560px){.mx-grid{grid-template-columns:1fr}} .econ-link{display:inline-block;margin:-4px 0 14px;font-size:13px;font-weight:700;color:var(--purple);text-decoration:none}.econ-link:hover{text-decoration:underline} .econ-note a{color:var(--purple)} .fee-rule{margin:18px 0 0;padding:14px 18px;border-radius:12px;background:var(--soft);border:1px solid var(--line);font-size:13.5px;line-height:1.6} /* ===== Planète en rotation (card Sécurité) ===== */ .security-logo{position:relative} .planet-wrap{position:relative;width:210px;height:140px;margin-bottom:14px;display:grid;place-items:center;isolation:isolate} .planet{position:relative;width:112px;height:112px;border-radius:50%;overflow:hidden;z-index:1;background:radial-gradient(circle at 35% 30%,#8f88ff,#5a51d4 50%,#2b2688);box-shadow:0 0 34px rgba(98,89,222,.38),inset -16px -12px 28px rgba(10,8,50,.55)} .planet-surface{position:absolute;inset:0;background:url("data:image/svg+xml,") repeat-x;background-size:240px 112px;animation:planet-spin 26s linear infinite} .planet:after{content:"";position:absolute;inset:0;border-radius:50%;background:radial-gradient(circle at 32% 28%,rgba(255,255,255,.4),transparent 38%),radial-gradient(circle at 72% 78%,rgba(10,8,50,.55),transparent 62%)} .orbit-ring{position:absolute;left:50%;top:50%;width:204px;height:56px;margin:-28px 0 0 -102px;border:1px solid rgba(98,89,222,.38);border-radius:50%;transform:rotate(-18deg);z-index:0} .sat-rot{position:absolute;left:50%;top:50%;width:0;height:0;transform:rotate(-18deg);z-index:0;animation:sat-z 12s steps(1,end) infinite} .sat-x{position:absolute;left:0;top:0;animation:orbit-x 12s ease-in-out infinite} .sat-y{display:block;animation:orbit-y 12s ease-in-out infinite;animation-delay:-3s} .sat{display:block;width:9px;height:9px;margin:-4.5px 0 0 -4.5px;border-radius:50%;background:radial-gradient(circle at 30% 30%,#8ff5bd,#1fa463);box-shadow:0 0 9px rgba(39,184,107,.85)} .security-logo .security-badge{position:absolute;right:34px;bottom:4px;width:46px;height:46px;margin:0;padding:8px;box-sizing:border-box;border-radius:50%;background:#fff;box-shadow:0 8px 20px rgba(40,30,120,.24);z-index:3} html.dark .security-logo .security-badge{background:#1b1b24} html.dark .orbit-ring{border-color:rgba(146,139,255,.45)} @keyframes planet-spin{to{background-position-x:-240px}} @keyframes orbit-x{0%,100%{transform:translateX(102px)}50%{transform:translateX(-102px)}} @keyframes orbit-y{0%,100%{transform:translateY(28px)}50%{transform:translateY(-28px)}} @keyframes sat-z{0%{z-index:0}50%{z-index:2}} @media(prefers-reduced-motion:reduce){.planet-surface,.sat-x,.sat-y,.sat-rot{animation:none}} .fee-grid{grid-template-columns:repeat(4,minmax(0,1fr))} @media(max-width:1000px){.fee-grid{grid-template-columns:repeat(2,minmax(0,1fr))}} @media(max-width:560px){.fee-grid{grid-template-columns:1fr}} /* ===== Ressources, page Découvrir, paliers ===== */ .resources-dropdown .nav-dropdown-menu{width:min(320px,calc(100vw - 32px));grid-template-columns:minmax(0,1fr)} .soon-toast{position:fixed;left:50%;bottom:28px;transform:translate(-50%,20px);z-index:120;display:grid;gap:2px;padding:14px 20px;border-radius:14px;background:var(--ink,#17171d);color:var(--bg,#fff);box-shadow:0 18px 45px rgba(0,0,0,.28);opacity:0;pointer-events:none;transition:opacity .25s,transform .25s;max-width:calc(100vw - 32px)} .soon-toast.show{opacity:1;transform:translate(-50%,0)} .soon-toast b{font-size:14px}.soon-toast span{font-size:13px;opacity:.78} .discover-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:26px} .suite-card-price{background:linear-gradient(145deg,#f0efff,#fff);border-color:var(--purple)} html.dark .suite-card-price{background:linear-gradient(145deg,#201e35,#15151d)} .fee-grid{grid-template-columns:repeat(auto-fit,minmax(190px,1fr))} @media(max-width:1000px){.fee-grid{grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}} /* ===== Page Découvrir : société ===== */ .about-split{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,.8fr);gap:34px;align-items:start} .about-split h2{font-size:clamp(26px,3.2vw,38px);line-height:1.12;letter-spacing:-.035em;margin:12px 0 16px} .about-split h2 span{color:var(--purple)} .about-split p{font-size:15px;line-height:1.8;color:var(--muted);margin:0 0 14px} .about-card{padding:26px;border:1px solid var(--line);border-radius:20px;background:linear-gradient(145deg,#f0efff,#fff)} html.dark .about-card{background:linear-gradient(145deg,#201e35,#15151d)} .about-card>b{display:block;font-size:17px;margin-bottom:14px} .about-card ul{list-style:none;margin:0;padding:0;display:grid;gap:0} .about-card li{display:flex;flex-direction:column;gap:2px;padding:12px 0;border-top:1px solid var(--line);font-size:14px;font-weight:600} .about-card li span{font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--purple)} .mission-quote{margin-top:28px;padding:34px;border-radius:20px;background:var(--ink);color:var(--bg)} .mission-quote p{margin:0;font-size:clamp(17px,2vw,22px);line-height:1.65;letter-spacing:-.01em;text-align:center} @media(max-width:800px){.about-split{grid-template-columns:1fr}.mission-quote{padding:24px 20px}}