/* ========================================================= LEMAN CYBER SECURITY — Couche "2026" Animation system + micro-design de luxe (site-wide) Chargé en dernier · ne s'active que si enhance.js pose la classe `enh` sur — zéro risque sans JS. ========================================================= */ :root { --ease-luxe: cubic-bezier(0.22, 1, 0.36, 1); --ease-out: cubic-bezier(0.16, 1, 0.3, 1); } /* ---------- Fondations ---------- */ html { scroll-padding-top: 6.5rem; } ::selection { background: oklch(0.48 0.16 25 / 0.16); color: var(--brand-ink); } * { scrollbar-width: thin; scrollbar-color: oklch(0.80 0.02 60) transparent; } ::-webkit-scrollbar { width: 10px; height: 10px; } ::-webkit-scrollbar-thumb { background: oklch(0.80 0.02 60); border-radius: 99px; border: 3px solid var(--bg); } ::-webkit-scrollbar-track { background: transparent; } :focus-visible { outline: 1.5px solid var(--brand); outline-offset: 3px; border-radius: 2px; } /* ---------- Grain éditorial (très subtil) ---------- */ html.enh body::after { content: ''; position: fixed; inset: 0; z-index: 2000; pointer-events: none; opacity: 0.035; mix-blend-mode: multiply; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); background-size: 160px 160px; } /* ---------- Fil de progression de lecture ---------- */ .enh-progress { position: fixed; top: 0; left: 0; right: 0; height: 2px; z-index: 140; pointer-events: none; background: linear-gradient(90deg, var(--brand-ink), var(--brand)); transform-origin: 0 50%; transform: scaleX(0); } /* ---------- Nav : état réduit au scroll ---------- */ .nav { transition: box-shadow 0.4s var(--ease-out), background 0.4s var(--ease-out); } .nav-inner { transition: padding 0.4s var(--ease-luxe); } html.enh .nav.is-scrolled { background: oklch(0.975 0.008 80 / 0.92); box-shadow: 0 1px 0 var(--line), 0 14px 40px oklch(0.2 0.02 50 / 0.05); } html.enh .nav.is-scrolled .nav-inner { padding-block: 0.55rem; } /* underline élégant au survol (desktop) */ @media (min-width: 921px) { .nav-links a::before { content: ''; position: absolute; left: 0; right: 0; bottom: -6px; height: 1px; background: var(--brand); transform: scaleX(0); transform-origin: 100% 50%; transition: transform 0.4s var(--ease-luxe); } .nav-links a:hover::before { transform: scaleX(1); transform-origin: 0 50%; } } /* ---------- Reveal v2 : blur-rise stagger ---------- Utilise `translate` (et non transform) pour ne jamais entrer en conflit avec les hovers des cartes. */ html.enh :is(.reveal, .rv) { opacity: 0; translate: 0 26px; filter: blur(6px); transition: opacity 0.95s var(--ease-out), translate 0.95s var(--ease-luxe), filter 0.75s var(--ease-out); transition-delay: var(--rv-d, 0s); } html.enh :is(.reveal, .rv).is-in { opacity: 1; translate: none; filter: none; } /* le trait d'eyebrow se dessine pendant le reveal */ html.enh :is(.reveal, .rv) .eyebrow::before, html.enh :is(.reveal, .rv).eyebrow::before { transform: scaleX(0); transform-origin: 0 50%; transition: transform 0.9s var(--ease-luxe) calc(var(--rv-d, 0s) + 0.25s); } html.enh :is(.reveal, .rv).is-in .eyebrow::before, html.enh :is(.reveal, .rv).is-in.eyebrow::before { transform: scaleX(1); } /* ---------- Titres : levée mot à mot sous masque ---------- */ html.enh .ew { display: inline-block; overflow: clip; padding-block: 0.14em; margin-block: -0.14em; vertical-align: bottom; } html.enh .ew-i { display: inline-block; transform: translateY(115%); transition: transform 1.05s var(--ease-luxe); transition-delay: var(--w-d, 0s); will-change: transform; } html.enh .is-split-in .ew-i { transform: none; } /* filet de sécurité : état final forcé une fois l'entrée terminée */ html.enh .split-done .ew-i { transition: none; transform: none; } /* ---------- Hairlines du hero : tracé au chargement ---------- */ html.enh .hero-hairlines span { transform-origin: 50% 50%; animation: enh-line 1.6s var(--ease-luxe) backwards; } html.enh .hero-hairlines span:nth-child(1) { animation-delay: 0.55s; } html.enh .hero-hairlines span:nth-child(2) { animation-delay: 0.7s; } html.enh .hero-hairlines span:nth-child(3) { animation-delay: 0.85s; } html.enh .hero-hairlines span:nth-child(4) { animation-delay: 1s; } @keyframes enh-line { from { transform: scaleX(0); } } /* filet de sécurité : fin d'animation forcée (contextes throttlés) */ html.enh.enh-settled .hero-hairlines span { animation: none; } /* ---------- Boutons : présence + retenue ---------- */ .btn { transition: background 0.25s var(--ease-out), color 0.25s var(--ease-out), border-color 0.25s var(--ease-out), transform 0.3s var(--ease-luxe), box-shadow 0.3s var(--ease-out); } .btn-primary:hover, .btn-brand:hover { transform: translateY(-2px); box-shadow: 0 12px 30px oklch(0.3 0.1 25 / 0.18); } .btn:active { transform: translateY(0) scale(0.98); transition-duration: 0.1s; box-shadow: none; } .nav-cta:hover { box-shadow: 0 10px 26px oklch(0.3 0.1 25 / 0.16); } /* ---------- Cartes : élévation douce au survol ---------- */ html.enh :is(.quote-card, .case, .price-card, .pillar, .cost-side, .indep-col, .sv-scenario, .stat-cell, .hero-card, .sv-facts, .scan-panel, .ap-bio-card) { transition: transform 0.5s var(--ease-luxe), box-shadow 0.5s var(--ease-out), border-color 0.5s var(--ease-out), background 0.5s var(--ease-out); } html.enh :is(.quote-card, .case, .price-card, .pillar, .cost-side, .indep-col, .sv-scenario):hover { transform: translateY(-3px); border-color: var(--line-strong); box-shadow: 0 20px 48px oklch(0.25 0.03 40 / 0.07); } html.enh .price-card-on:hover { border-color: var(--brand); box-shadow: 0 22px 52px oklch(0.55 0.16 25 / 0.13); } /* la checklist PDF se redresse au survol */ html.enh .lead-doc-card { transition: transform 0.6s var(--ease-luxe), box-shadow 0.6s var(--ease-out); } html.enh .lead-doc-card:hover { transform: rotate(0deg) translateY(-3px); box-shadow: 0 26px 56px oklch(0 0 0 / 0.09); } /* portraits : le gris se lève doucement */ html.enh :is(.founder-photo, .ap-portrait) { overflow: hidden; } html.enh :is(.founder-photo, .ap-portrait) img { transition: filter 0.7s var(--ease-out), transform 1.4s var(--ease-luxe); } html.enh :is(.founder-photo, .ap-portrait):hover img { filter: grayscale(0.05) contrast(1.04); transform: scale(1.015); } /* lignes de l'index ressources */ html.enh .idx-row { transition: background 0.4s var(--ease-out), padding-left 0.4s var(--ease-luxe); } /* ---------- Chiffres : tabular pendant le comptage ---------- */ .enh-count { font-variant-numeric: tabular-nums; } /* total du calculateur : pulsation discrète */ #total-display { display: inline-block; } #total-display.tick { animation: enh-tick 0.5s var(--ease-luxe); } @keyframes enh-tick { 30% { transform: translateY(-3px); } 60% { transform: translateY(0); } } /* ---------- FAQ : ouverture fluide (CSS 2024+) ---------- */ @supports (interpolate-size: allow-keywords) { :root { interpolate-size: allow-keywords; } .faq-item::details-content { block-size: 0; overflow: clip; transition: block-size 0.5s var(--ease-luxe), content-visibility 0.5s allow-discrete; } .faq-item[open]::details-content { block-size: auto; } } .faq-item summary { transition: color 0.25s var(--ease-out); } .faq-item summary:hover { color: var(--brand-ink); } /* ========================================================= LEAD GEN · Sticky CTA mobile ========================================================= */ .enh-sticky { position: fixed; left: 0; right: 0; bottom: 0; z-index: 150; display: none; padding: 0.6rem 1rem calc(0.6rem + env(safe-area-inset-bottom, 0px)); background: oklch(0.975 0.008 80 / 0.94); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); border-top: 1px solid var(--line); box-shadow: 0 -10px 32px oklch(0.2 0.02 50 / 0.07); transform: translateY(110%); transition: transform 0.5s var(--ease-luxe); } .enh-sticky.is-on { transform: none; } .enh-sticky-inner { display: flex; align-items: center; gap: 0.75rem; } .enh-sticky-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; } .enh-sticky-t { font-family: var(--serif); font-size: 15.5px; color: var(--brand-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .enh-sticky-s { font-family: var(--mono); font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3); } .enh-sticky .btn { flex-shrink: 0; padding: 0.65rem 1.1rem; font-size: 13.5px; } @media (max-width: 920px) { .enh-sticky { display: block; } } /* ========================================================= LEAD GEN · Exit intent — checklist nLPD ========================================================= */ .enh-exit { position: fixed; inset: 0; z-index: 300; display: grid; place-items: center; padding: 1.5rem; background: oklch(0.22 0.015 50 / 0.45); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); opacity: 0; pointer-events: none; transition: opacity 0.45s var(--ease-out); } .enh-exit.is-on { opacity: 1; pointer-events: auto; } .enh-exit-card { position: relative; width: min(540px, 100%); background: var(--bg, oklch(0.985 0.006 85)); border: 1px solid var(--line-strong); padding: clamp(1.8rem, 4vw, 2.6rem); box-shadow: 0 40px 90px oklch(0 0 0 / 0.22); transform: translateY(22px) scale(0.985); transition: transform 0.55s var(--ease-luxe); } .enh-exit.is-on .enh-exit-card { transform: none; } .enh-exit-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg, var(--brand-ink), var(--brand)); } .enh-exit-close { position: absolute; top: 0.7rem; right: 0.7rem; width: 38px; height: 38px; display: grid; place-items: center; background: none; border: none; cursor: pointer; font-size: 17px; line-height: 1; color: var(--ink-3); transition: color 0.25s var(--ease-out), transform 0.3s var(--ease-luxe); } .enh-exit-close:hover { color: var(--brand-ink); transform: rotate(90deg); } .enh-exit-eyebrow { display: block; font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--brand); margin-bottom: 0.9rem; } .enh-exit-h { font-family: var(--serif); font-weight: 400; font-size: clamp(1.45rem, 3.4vw, 1.85rem); line-height: 1.18; color: var(--brand-ink); margin: 0 0 0.7rem; text-wrap: pretty; } .enh-exit-h em { font-style: italic; color: var(--brand); } .enh-exit-p { font-size: 14.5px; line-height: 1.6; color: var(--ink-2); margin: 0 0 1.4rem; text-wrap: pretty; } .enh-exit-form { display: flex; gap: 0.55rem; flex-wrap: wrap; } .enh-exit-form input[type="email"] { flex: 1 1 220px; min-width: 0; padding: 0.78rem 1rem; font: inherit; font-size: 14.5px; color: var(--ink); background: oklch(1 0 0 / 0.65); border: 1px solid var(--line-strong); border-radius: 0; outline: none; transition: border-color 0.25s var(--ease-out); } .enh-exit-form input[type="email"]:focus { border-color: var(--brand); } .enh-exit-fine { margin: 0.85rem 0 0; font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-3); } .enh-exit-success { display: none; margin: 0; padding: 0.9rem 1rem; font-size: 14.5px; color: var(--brand-ink); background: oklch(0.95 0.02 145 / 0.5); border: 1px solid oklch(0.75 0.08 145 / 0.5); } /* ========================================================= LEAD GEN · Micro-preuve sociale près des CTA (réutilise les témoignages anonymisés déjà publiés) ========================================================= */ .cta-proof { margin: 1.4rem 0 0; max-width: 54ch; } .cta-proof::before { content: ''; display: block; width: 34px; height: 1px; background: var(--brand-line, oklch(0.85 0.05 25)); margin-bottom: 0.85rem; } .cta-proof blockquote { margin: 0; padding: 0; border: none; font-family: var(--serif); font-style: italic; font-size: 15.5px; line-height: 1.55; color: var(--ink-2); text-wrap: pretty; } .cta-proof figcaption { margin-top: 0.55rem; font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.09em; text-transform: uppercase; color: var(--ink-3); } /* variante centrée (sections CTA de fin de page) */ .cta-proof-c { text-align: center; margin-inline: auto; } .cta-proof-c::before { margin-inline: auto; } /* bandeau clients anonymisés (section contact) */ .cta-clients { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: center; gap: 0.4rem 1.5rem; margin-top: 0.4rem; } .cta-clients-lbl { flex-basis: 100%; font-family: var(--mono); font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-3); text-align: center; margin-bottom: 0.15rem; } .cta-clients span:not(.cta-clients-lbl) { font-family: var(--serif); font-style: italic; font-size: 14.5px; color: var(--ink-2); white-space: nowrap; } /* ---------- Accessibilité : motion réduite ---------- */ @media (prefers-reduced-motion: reduce) { .enh-sticky { transition: none; } .enh-exit, .enh-exit-card { transition: none; } html.enh :is(.reveal, .rv) { opacity: 1 !important; translate: none !important; filter: none !important; transition: none !important; } html.enh .ew-i { transform: none !important; transition: none !important; } html.enh .hero-hairlines span { animation: none !important; } html.enh :is(.reveal, .rv) .eyebrow::before { transform: none !important; transition: none !important; } .enh-progress { display: none; } #total-display.tick { animation: none; } html { scroll-behavior: auto; } }