/* * © 2026 DATASHIELD RISK CONSULTING (SAS) — Zerval * Tous droits réservés. Code propriétaire — toute reproduction, * diffusion ou réutilisation non autorisée est interdite. SIREN 984 134 916 */ /* ZERVAL — Système de design des sites de vente (ombrelle · Smart · Pro) Charte V5.0 (direction B2) — source de vérité technique. Une seule feuille, 3 peaux via . Règles : rayons contenus (4/8/16px), un seul accent par composant, ombres fonctionnelles + micro-interactions au survol, souveraineté (Inter auto-hébergée). */ /* Police souveraine (auto-hébergée, pas de CDN) */ @font-face{ font-family:'Inter';font-style:normal;font-weight:400 700;font-display:swap; src:url('../fonts/Inter.woff2?v=20260815f') format('woff2'); } @font-face{ font-family:'Inter';font-style:italic;font-weight:400 700;font-display:swap; src:url('../fonts/Inter-Italic.woff2?v=20260815f') format('woff2'); } /* Mono souveraine (JetBrains Mono, OFL, auto-hébergée) — voix « technique » des libellés */ @font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:400;font-display:swap;src:url('../fonts/JetBrainsMono-400.woff2') format('woff2')} @font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:500;font-display:swap;src:url('../fonts/JetBrainsMono-500.woff2') format('woff2')} @font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:700;font-display:swap;src:url('../fonts/JetBrainsMono-700.woff2') format('woff2')} /* Libellés techniques en mono (eyebrows, kickers, labels de cockpit) */ .eyebrow,.zsc-kicker,.zsc-topbar b,.zsc-kpi .l,.mock .mock-bar b,.mock .m-kpi .kl{font-family:var(--mono);letter-spacing:.06em} /* Jetons (Kit V1.0) */ :root{ /* Structure sombre */ --midnight:#002252; /* chrome, titres, surfaces structurantes */ --deep:#00112E; /* fonds premium */ --navy:#002252; /* filigrane, bandeaux */ --deep-blue:#008cd6; /* Signal */ --azure:#00ACEB; /* signal ombrelle : focus / actif (charte V4.1 p18) */ --cyan:#00ACEB; /* anneau de focus = Azure (charte V4.1) */ /* Accents produit (V5.0) */ --pro:#008CD6; --pro-deep:#008cd6; --smart:#00A9B8; --smart-teal:#00A9B8; /* Sémantiques (V5.0) */ --ok:#0C8C67; --warn:#B96B00; --danger:#C93C4B; /* Neutres teintés (V5.0 — jamais de gris pur) */ --paper:#FFFFFF; --ice:#EAF7FC; --surface:#F4F7FA; /* MIST */ --surface-2:#EAF7FC; /* ICE */ --border:#CBD5E1; --ink:#00112E; /* INK — texte principal */ --muted:#526277; /* SLATE — texte secondaire */ --ink-invert:#EAF2FB; --muted-invert:#9FB4CF; /* Rayons V5.0 (rayons contenus) + ombres fonctionnelles + courbe */ --r-sm:4px; --r-md:6px; --r-lg:6px; --r-pill:999px; --shadow-sm:0 2px 10px rgba(0,17,46,.06); --shadow-md:0 16px 40px rgba(0,17,46,.13); --shadow-lg:0 30px 70px rgba(0,17,46,.18); --ease:cubic-bezier(.2,.8,.2,1); /* Accent par défaut (ombrelle) — surchargé par les classes de marque */ --accent:#00ACEB; --accent-deep:#008cd6; --accent-ink:#FFFFFF; /* texte posé sur l'accent en aplat */ --font:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Arial,sans-serif; --mono:'JetBrains Mono',ui-monospace,'SFMono-Regular',Menlo,Consolas,monospace; --wrap:1180px; --grid-line:rgba(0,172,235,.13); } /* Peaux de marque : un seul accent par site */ body.brand-umbrella{ --accent:#00ACEB; --accent-deep:#008cd6; --btn-primary-bg:#008cd6; } /* Azure signal (charte V4.1) */ body.brand-smart{ --accent:#00A9B8; --accent-deep:#00a9b8; --btn-primary-bg:#002252; } body.brand-pro{ --accent:#008CD6; --accent-deep:#008cd6; --btn-primary-bg:#008cd6; } /* Base */ *{box-sizing:border-box} html{scroll-behavior:smooth;-webkit-text-size-adjust:100%} @media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}} body{ margin:0;background:var(--paper);color:var(--ink); font-family:var(--font);font-size:16px;line-height:1.55; -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:hidden; } img,svg{display:block;max-width:100%} a{color:var(--accent-deep);text-decoration:none} h1,h2,h3,h4{margin:0;color:var(--midnight);line-height:1.12;letter-spacing:-.02em;font-weight:700} p{margin:0} ul{margin:0;padding:0;list-style:none} strong,b{font-weight:700} ::selection{background:var(--accent);color:#fff} /* Focus visible : anneau cyan, non uniquement coloré (offset + épaisseur) */ a:focus-visible,button:focus-visible,.btn:focus-visible,summary:focus-visible, input:focus-visible,[tabindex]:focus-visible{ outline:3px solid var(--cyan);outline-offset:3px; /* V5.0 : anneau Azure 3px */ } .wrap{max-width:var(--wrap);margin:0 auto;padding:0 24px} .u-display{font-weight:700;letter-spacing:-.03em} .u-tnum{font-variant-numeric:tabular-nums} .u-center{text-align:center} /* Eyebrow (label de section) */ .eyebrow{ display:inline-flex;align-items:center;gap:9px; font-size:.875rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase; color:var(--accent-deep);margin:0; } .eyebrow::before{content:"";width:22px;height:2px;background:var(--accent)} .section--dark .eyebrow,.section--deep .eyebrow{color:#00aceb} .section--dark .eyebrow::before,.section--deep .eyebrow::before{background:var(--azure)} /* Boutons (4 rôles, min 44px, angles francs) */ .btn{ --btn-bg:var(--accent);--btn-fg:var(--accent-ink);--btn-bd:var(--accent); display:inline-flex;align-items:center;justify-content:center;gap:9px; min-height:44px;padding:11px 22px;font:inherit;font-size:15px;font-weight:600; border:1.5px solid var(--btn-bd);background:var(--btn-bg);color:var(--btn-fg); border-radius:var(--r-md);cursor:pointer;transition:background .18s var(--ease),color .18s,border-color .18s,transform .16s var(--ease),box-shadow .18s var(--ease); white-space:nowrap;text-align:center; } .btn:hover{transform:translateY(-2px)} .btn--lg{min-height:52px;padding:14px 28px;font-size:16px} .btn--primary{--btn-bg:var(--btn-primary-bg);--btn-fg:#fff;--btn-bd:var(--btn-primary-bg);font-weight:700} .btn--primary:hover{--btn-bg:var(--midnight);--btn-bd:var(--midnight);box-shadow:0 8px 22px rgba(0,17,46,.22)} .btn--secondary{--btn-bg:transparent;--btn-fg:var(--accent-deep);--btn-bd:var(--accent)} .btn--secondary:hover{--btn-bg:var(--btn-primary-bg);--btn-fg:#fff} .btn--tertiary{--btn-bg:transparent;--btn-fg:var(--ink);--btn-bd:transparent;min-height:44px;padding:10px 8px} .btn--tertiary:hover{--btn-fg:var(--accent-deep)} .btn--danger{--btn-bg:transparent;--btn-fg:var(--danger);--btn-bd:var(--danger)} .btn--danger:hover{--btn-bg:var(--danger);--btn-fg:#fff} /* Boutons sur fond sombre */ .section--dark .btn--secondary,.section--deep .btn--secondary,.canvas .btn--secondary{--btn-fg:#eaf2fb;--btn-bd:rgba(255,255,255,.4)} .section--dark .btn--secondary:hover,.section--deep .btn--secondary:hover,.canvas .btn--secondary:hover{--btn-bg:#fff;--btn-fg:var(--midnight);--btn-bd:#fff} .section--dark .btn--tertiary,.section--deep .btn--tertiary,.canvas .btn--tertiary{--btn-fg:#eaf7fc} .section--dark .btn--tertiary:hover,.section--deep .btn--tertiary:hover,.canvas .btn--tertiary:hover{--btn-fg:#fff} /* En-tête sticky */ .site-head{position:sticky;top:0;z-index:50;background:var(--midnight);border-bottom:1px solid rgba(255,255,255,.08)} .site-head .wrap{display:flex;align-items:center;gap:14px;height:64px} .site-head .brand{display:flex;align-items:center;flex:0 0 auto} .site-head .brand img{height:38px;width:auto;flex-shrink:0;object-fit:contain} /* ratio VERROUILLÉ (jamais d'écrasement flex) */ /* Lockup responsive : wordmark complet en desktop/tablette, tête seule en petit mobile */ .site-head .brand img.brand-full{display:none} .site-head .brand img.brand-mark{display:inline-block;height:44px} @media(max-width:560px){ .site-head .brand img.brand-full{display:none} .site-head .brand img.brand-mark{display:inline-block;height:36px} } .site-head nav{display:flex;align-items:center;gap:2px;margin-left:14px} .site-head nav a{font-size:14.5px;font-weight:500;color:#eaf7fc;padding:9px 12px;border-radius:var(--r-sm);transition:color .15s,background .15s} .site-head nav a:hover{color:#fff;background:rgba(255,255,255,.07)} .site-head .spacer{flex:1} .head-actions{display:flex;align-items:center;gap:10px} .head-actions .link-connect{font-size:14px;font-weight:600;color:#eaf7fc;padding:10px 10px} .head-actions .link-connect:hover{color:#fff} .burger{display:none;width:44px;height:44px;align-items:center;justify-content:center;background:transparent;border:1px solid rgba(255,255,255,.2);cursor:pointer} .burger svg{width:22px;height:22px;stroke:#fff;stroke-width:2;fill:none} .navtog{position:absolute;opacity:0;pointer-events:none} @media (max-width:1150px){ .site-head nav{position:absolute;top:64px;left:0;right:0;flex-direction:column;align-items:stretch; gap:0;background:var(--midnight);border-bottom:1px solid rgba(255,255,255,.1); max-height:0;overflow:hidden;transition:max-height .22s;margin-left:0} .site-head nav a{padding:14px 24px;border-top:1px solid rgba(255,255,255,.06)} .site-head nav.open{max-height:80vh} .burger{display:inline-flex} .head-actions .link-connect{display:none} .head-actions .btn{padding:9px 13px;font-size:.875rem} } @media (max-width:420px){ .head-actions .btn{padding:8px 11px;font-size:.875rem} .site-head .wrap{gap:9px} } /* Canevas sombre + filigrane technologique (signature) */ .canvas{position:relative;background:var(--deep);color:#fff;overflow:hidden;isolation:isolate} .canvas::before{ /* trame de coordonnées 1px, raréfiée au centre */ content:"";position:absolute;inset:0;z-index:-1; background-image: linear-gradient(var(--grid-line) 1px,transparent 1px), linear-gradient(90deg,var(--grid-line) 1px,transparent 1px); background-size:46px 46px;background-position:center; -webkit-mask-image:radial-gradient(125% 100% at 50% 38%,transparent 0%,transparent 34%,#00112e 100%); mask-image:radial-gradient(125% 100% at 50% 38%,transparent 0%,transparent 34%,#00112e 100%); opacity:.7; } /* (halo interdit — aucun effet de lueur/glow sur les fonds ni les logos) */ /* Sections */ .section{padding:76px 0;position:relative} .section--tight{padding:52px 0} .section--alt{background:var(--surface);border-top:1px solid var(--border);border-bottom:1px solid var(--border)} .section--dark{background:var(--midnight);color:var(--ink-invert)} .section--deep{background:var(--deep);color:var(--ink-invert)} .section--dark h1,.section--dark h2,.section--dark h3,.section--dark h4, .section--deep h1,.section--deep h2,.section--deep h3,.section--deep h4{color:#fff} .section--dark > .wrap > .sec-head p,.section--deep > .wrap > .sec-head p{color:var(--muted-invert)} .sec-head{max-width:760px;margin:0 auto 44px;text-align:center;display:flex;flex-direction:column;gap:14px;align-items:center} .sec-head h2{font-size:clamp(26px,3.4vw,36px)} .sec-head p{font-size:18px;color:var(--muted);line-height:1.6} .sec-head--left{margin-left:0;text-align:left;align-items:flex-start} /* Index numéroté façon dossier d'expertise */ .sec-num{font-size:15px;font-weight:700;letter-spacing:.1em;color:var(--muted);font-variant-numeric:tabular-nums} .section--dark .sec-num,.section--deep .sec-num{color:var(--muted-invert)} /* Grilles */ .grid{display:grid;gap:20px} .cols-2{grid-template-columns:repeat(2,1fr)} .cols-3{grid-template-columns:repeat(3,1fr)} .cols-4{grid-template-columns:repeat(4,1fr)} @media (max-width:900px){.cols-3,.cols-4{grid-template-columns:repeat(2,1fr)}} @media (max-width:620px){.cols-2,.cols-3,.cols-4{grid-template-columns:1fr}} /* Cartes */ .card{background:var(--paper);border:1px solid var(--border);padding:26px;border-radius:var(--r-lg);box-shadow:var(--shadow-sm); display:flex;flex-direction:column;gap:12px;transition:border-color .2s var(--ease),transform .2s var(--ease),box-shadow .2s var(--ease)} .card:hover{border-color:var(--accent);transform:translateY(-4px);box-shadow:var(--shadow-md)} .card h3{font-size:20px} .card p{color:var(--muted);font-size:15.5px;line-height:1.6} .card .card-ic{width:44px;height:44px;display:flex;align-items:center;justify-content:center;border-radius:var(--r-md); background:var(--surface);border:1px solid var(--border);color:var(--accent-deep);transition:background .2s var(--ease),border-color .2s var(--ease),color .2s var(--ease),transform .2s var(--ease)} .card:hover .card-ic{border-color:var(--accent);color:var(--accent);background:color-mix(in srgb,var(--accent) 10%,var(--surface));transform:translateY(-1px)} .card .card-ic svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.7} .card .card-more{margin-top:auto;font-weight:600;color:var(--accent-deep);font-size:14.5px;display:inline-flex;gap:6px;align-items:center;transition:gap .2s var(--ease)} .card:hover .card-more{gap:11px} .card--link:hover{border-color:var(--accent);transform:translateY(-4px)} .section--dark .card,.section--deep .card{background:rgba(255,255,255,.03);border-color:rgba(255,255,255,.12)} .section--dark .card p,.section--deep .card p{color:var(--muted-invert)} .section--dark .card .card-ic,.section--deep .card .card-ic{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.14);color:#00aceb} .section--dark .card .card-more,.section--deep .card .card-more{color:#00aceb} /* Tuiles (entrée par le problème) */ .tile{display:flex;align-items:center;gap:14px;padding:18px;background:var(--paper); border:1px solid var(--border);border-radius:var(--r-md);box-shadow:var(--shadow-sm);transition:border-color .2s var(--ease),transform .2s var(--ease),box-shadow .2s var(--ease)} .tile:hover{border-color:var(--accent);transform:translateY(-4px);box-shadow:var(--shadow-md)} .tile .t-ic{flex:0 0 auto;width:40px;height:40px;display:flex;align-items:center;justify-content:center;border-radius:var(--r-sm); border:1px solid var(--border);color:var(--accent-deep);transition:border-color .2s var(--ease),color .2s var(--ease)} .tile:hover .t-ic{border-color:var(--accent);color:var(--accent)} .tile .t-ic svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.7} .tile .t-tx{display:flex;flex-direction:column;gap:2px;min-width:0} .tile .t-tx b{font-size:15.5px;color:var(--midnight)} .tile .t-tx span{font-size:.875rem;color:var(--muted)} .tile .t-go{margin-left:auto;color:var(--muted);font-size:20px;line-height:1;transition:color .2s var(--ease),transform .2s var(--ease)} .tile:hover .t-go{color:var(--accent);transform:translateX(4px)} /* Bandeau de confiance / preuve */ .trustbar{background:var(--navy);color:#eaf7fc} .trustbar .wrap{display:flex;flex-wrap:wrap;gap:10px 22px;align-items:center;justify-content:center;padding:16px 24px;font-size:.875rem} .trustbar .t{display:inline-flex;align-items:center;gap:8px} .trustbar .t b{color:#fff;font-weight:700} .trustbar .t svg{width:17px;height:17px;fill:none;stroke:#00aceb;stroke-width:1.8} .trustbar .sep{width:1px;height:16px;background:rgba(255,255,255,.18)} /* Split : application + humain côte à côte */ .split{display:grid;grid-template-columns:1fr 1fr;border:1px solid var(--border);border-radius:var(--r-lg);overflow:hidden} .split > div{padding:34px;display:flex;flex-direction:column;gap:14px} .split > div:first-child{border-right:1px solid var(--border)} .split .col-tag{font-size:.875rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)} .split h3{font-size:22px} .split p{color:var(--muted);font-size:15px;line-height:1.6} .split ul{display:flex;flex-direction:column;gap:9px;margin-top:4px} .split ul li{position:relative;padding-left:24px;font-size:15px;color:var(--ink)} .split ul li::before{content:"";position:absolute;left:0;top:8px;width:12px;height:2px;background:var(--accent)} .split .col-foot{margin-top:auto;padding-top:8px} @media (max-width:760px){ .split{grid-template-columns:1fr} .split > div:first-child{border-right:0;border-bottom:1px solid var(--border)} } /* Offres produit (Smart/Pro sur l'ombrelle) */ .duo{display:grid;grid-template-columns:1fr 1fr;gap:22px} @media (max-width:760px){.duo{grid-template-columns:1fr}} .offer{border:1px solid var(--border);border-top:3px solid var(--edge,var(--accent));padding:30px;display:flex;flex-direction:column;gap:14px;background:var(--paper);border-radius:var(--r-lg);box-shadow:var(--shadow-sm);transition:transform .2s var(--ease),box-shadow .2s var(--ease)} .offer:hover{transform:translateY(-4px);box-shadow:var(--shadow-md)} .offer.is-smart{--edge:var(--smart)} .offer.is-pro{--edge:var(--pro)} .offer .tag{font-size:.875rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)} .offer h3{font-size:23px} .offer .who{font-size:14.5px;color:var(--muted)} .offer ul{display:flex;flex-direction:column;gap:9px} .offer ul li{position:relative;padding-left:24px;font-size:15px} .offer ul li::before{content:"";position:absolute;left:0;top:8px;width:12px;height:2px;background:var(--edge)} .offer .offer-foot{margin-top:auto;padding-top:6px} .offer .btn{--accent:var(--edge);--accent-deep:var(--edge)} /* Grille tarifaire */ .pricing{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;align-items:stretch} @media (max-width:820px){.pricing{grid-template-columns:1fr}} .pricing.cols-4{grid-template-columns:repeat(4,1fr);gap:16px} .pricing.cols-4 .price{padding:22px} .pricing.cols-4 .p-amount{font-size:31px} @media (max-width:1024px){.pricing.cols-4{grid-template-columns:repeat(2,1fr)}} @media (max-width:560px){.pricing.cols-4{grid-template-columns:1fr}} .soon{display:inline-block;font-size:.875rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--accent-deep);border:1px solid var(--accent-deep);border-radius:999px;padding:2px 10px;line-height:1.7;vertical-align:middle} .price{border:1px solid var(--border);padding:28px;display:flex;flex-direction:column;gap:14px;background:var(--paper);border-radius:var(--r-lg);box-shadow:var(--shadow-sm);transition:transform .2s var(--ease),box-shadow .2s var(--ease)} .price:hover{transform:translateY(-4px);box-shadow:var(--shadow-md)} .price.is-featured{border:2px solid var(--accent);position:relative;box-shadow:var(--shadow-md)} .price.is-featured .flag{position:absolute;top:0;right:0;background:var(--accent);color:#fff;font-size:.875rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;padding:5px 12px} .price .p-name{font-size:.875rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)} .price .p-amount{font-size:38px;font-weight:700;letter-spacing:-.03em;color:var(--midnight);line-height:1;font-variant-numeric:tabular-nums} .price .p-amount small{font-size:15px;font-weight:600;color:var(--muted);letter-spacing:0} .price .p-desc{font-size:14.5px;color:var(--muted);line-height:1.55} .price ul{display:flex;flex-direction:column;gap:8px} .price ul li{position:relative;padding-left:24px;font-size:14.5px} .price ul li::before{content:"";position:absolute;left:2px;top:6px;width:8px;height:8px;border-left:2px solid var(--accent);border-bottom:2px solid var(--accent);transform:rotate(-45deg)} .price .price-foot{margin-top:auto;padding-top:6px} /* Chemin d'urgence (bordure danger, jamais de fond criard) */ .urgence{background:var(--navy);color:#fff;border-left:4px solid var(--danger)} .urgence .wrap{display:flex;flex-wrap:wrap;align-items:center;gap:18px 28px;padding:30px 24px} .urgence .u-tx{flex:1;min-width:280px} .urgence h2{font-size:22px;color:#fff;margin-bottom:6px} .urgence p{color:#cbd5e1;font-size:15px;max-width:62ch} .urgence .u-cta{display:flex;gap:12px;flex-wrap:wrap} /* Souveraineté (rangée d'attributs) */ .sov{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--border);border:1px solid var(--border);border-radius:var(--r-lg);overflow:hidden} @media (max-width:820px){.sov{grid-template-columns:repeat(2,1fr)}} @media (max-width:460px){.sov{grid-template-columns:1fr}} .sov .s{background:var(--paper);padding:22px;display:flex;flex-direction:column;gap:8px} .sov .s svg{width:26px;height:26px;fill:none;stroke:var(--accent-deep);stroke-width:1.6} .sov .s b{font-size:15.5px;color:var(--midnight)} .sov .s span{font-size:.875rem;color:var(--muted);line-height:1.5} .section--dark .sov,.section--deep .sov{background:rgba(255,255,255,.1)} .section--dark .sov .s,.section--deep .sov .s{background:transparent} .section--dark .sov .s b,.section--deep .sov .s b{color:#fff} .section--dark .sov .s span,.section--deep .sov .s span{color:var(--muted-invert)} .section--dark .sov .s svg,.section--deep .sov .s svg{stroke:#00aceb} /* Bloc CODEX / doctrine (premium sombre) */ .codex .wrap{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:center} @media (max-width:820px){.codex .wrap{grid-template-columns:1fr;gap:26px}} .codex .maxim{font-size:clamp(24px,3.2vw,34px);font-weight:700;letter-spacing:-.02em;color:#fff;max-width:20ch;line-height:1.18} .codex .maxim .accentline{color:var(--azure)} .codex .lede{color:var(--muted-invert);font-size:17px;max-width:52ch;line-height:1.65} .codex .filet{width:56px;height:3px;background:var(--azure);margin:4px 0 2px} .codex .cx-r{display:flex;flex-direction:column;gap:18px} /* Méthode (frise numérotée) */ .steps{display:grid;grid-template-columns:repeat(6,1fr);border:1px solid var(--border);border-bottom:0;border-right:0;border-radius:var(--r-lg);overflow:hidden} @media (max-width:900px){.steps{grid-template-columns:repeat(3,1fr)}} @media (max-width:520px){.steps{grid-template-columns:repeat(2,1fr)}} .steps .st{padding:22px;border-right:1px solid var(--border);border-bottom:1px solid var(--border);display:flex;flex-direction:column;gap:8px;background:var(--paper)} .steps .st .k{font-size:26px;font-weight:700;letter-spacing:-.02em;color:var(--accent);font-variant-numeric:tabular-nums} .steps .st b{font-size:15px;color:var(--midnight)} .steps .st span{font-size:.875rem;color:var(--muted);line-height:1.5} /* Maturité (jauge 4 crans, dataviz dessinée) */ .maturity{display:grid;grid-template-columns:repeat(4,1fr);gap:6px} @media (max-width:620px){.maturity{grid-template-columns:repeat(2,1fr)}} .maturity .rung{border:1px solid var(--border);padding:16px 14px;background:var(--paper);border-radius:var(--r-md)} .maturity .rung .bar{height:6px;background:var(--surface-2);margin-bottom:12px;border-radius:var(--r-pill);overflow:hidden} .maturity .rung:nth-child(1) .bar{background:linear-gradient(90deg,var(--danger) 40%,var(--surface-2) 40%)} .maturity .rung:nth-child(2) .bar{background:linear-gradient(90deg,var(--warn) 60%,var(--surface-2) 60%)} .maturity .rung:nth-child(3) .bar{background:linear-gradient(90deg,var(--accent) 80%,var(--surface-2) 80%)} .maturity .rung:nth-child(4) .bar{background:var(--ok)} .maturity .rung b{font-size:14.5px;color:var(--midnight)} .maturity .rung span{display:block;font-size:.875rem;color:var(--muted);margin-top:3px} /* Témoignages */ .testi{border:1px solid var(--border);border-left:3px solid var(--accent);padding:24px;background:var(--paper);display:flex;flex-direction:column;gap:14px;border-radius:var(--r-lg);box-shadow:var(--shadow-sm);transition:transform .2s var(--ease),box-shadow .2s var(--ease)} .testi:hover{transform:translateY(-3px);box-shadow:var(--shadow-md)} .testi .quote{font-size:16px;line-height:1.6;color:var(--ink)} .testi .who{font-size:.875rem;color:var(--muted)} .testi .who b{color:var(--midnight)} /* Stat-choc */ .stat{display:flex;flex-direction:column;gap:8px;align-items:center;text-align:center} /* Bande KPI « preuve » (compteurs animés, chiffres en mono) */ .kfig{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;margin-top:10px} .kf{text-align:center;padding:10px 8px;border-left:1px solid var(--border)} .kf:first-child{border-left:0} .kf-v{font-family:var(--mono);font-weight:700;font-size:clamp(28px,4.2vw,46px);line-height:1;letter-spacing:-.01em;color:var(--accent-deep);font-variant-numeric:tabular-nums;white-space:nowrap} .kf-l{margin-top:11px;font-size:.875rem;line-height:1.4;color:var(--muted)} .section--dark .kf,.section--deep .kf{border-color:rgba(255,255,255,.14)} .section--dark .kf-v,.section--deep .kf-v{color:#00aceb} .section--dark .kf-l,.section--deep .kf-l{color:var(--muted-invert)} @media(max-width:720px){.kfig{grid-template-columns:repeat(2,1fr);gap:14px}.kf{border-left:0}.kf:nth-child(odd){border-left:0}} /* Rail auto-défilant (référentiels / situations) — pills mono, fond SOMBRE (fond avec héros + trustbar, zéro couture) */ .rail{padding:18px 0;background:var(--navy);border-top:1px solid rgba(255,255,255,.07)} .rail .lbl{font-family:var(--mono);font-size:.875rem;letter-spacing:.16em;text-transform:uppercase;color:#cbd5e1;text-align:center;margin-bottom:12px} .rail-item{font-family:var(--mono);font-weight:500;font-size:14px;letter-spacing:.01em;color:#eaf7fc;white-space:nowrap;display:inline-flex;align-items:center;gap:9px} .rail-item::before{content:"";flex:0 0 auto;width:6px;height:6px;border-radius:50%;background:var(--accent)} .stat .big{font-size:clamp(40px,6vw,68px);font-weight:700;letter-spacing:-.03em;color:var(--midnight);line-height:1;font-variant-numeric:tabular-nums} .section--dark .stat .big,.section--deep .stat .big{color:#fff} /* CTA final */ .final{background:var(--deep);color:#fff;text-align:center} .final .wrap{max-width:760px;padding-top:66px;padding-bottom:66px;display:flex;flex-direction:column;gap:18px;align-items:center} .final h2{color:#fff;font-size:clamp(26px,3.6vw,38px)} .final p{color:var(--muted-invert);font-size:18px} .final .cta{display:flex;gap:12px;flex-wrap:wrap;justify-content:center;margin-top:8px} /* Annonce (lead magnet) */ .announce{background:var(--midnight);color:#eaf7fc;font-size:.875rem;border-bottom:1px solid rgba(255,255,255,.08)} .announce .wrap{display:flex;align-items:center;justify-content:center;gap:10px;padding:9px 24px;text-align:center;flex-wrap:wrap} .announce b{color:#fff} .announce a{color:var(--azure);font-weight:600;white-space:nowrap} .announce a:hover{text-decoration:underline} /* Pied de page écosystème (identique sur les 3 sites) */ .site-foot{background:var(--deep);color:var(--muted-invert)} .site-foot .wrap{padding:56px 24px 30px} .foot-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:32px} @media (max-width:860px){.foot-grid{grid-template-columns:1fr 1fr}} @media (max-width:520px){.foot-grid{grid-template-columns:1fr}} .foot-brand img{width:206px;max-width:62%;height:auto;margin-bottom:14px} /* logo complet ≥160px (charte V4.1 p12) */ .foot-brand p{font-size:14px;color:var(--muted-invert);max-width:34ch;line-height:1.6} .foot-col h3{font-size:.875rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:#fff;margin-bottom:14px} .foot-col a{display:block;font-size:14px;color:#cbd5e1;padding:5px 0} .foot-col a:hover{color:#fff} .foot-eco{margin-top:36px;padding-top:22px;border-top:1px solid rgba(255,255,255,.1);display:flex;flex-wrap:wrap;gap:14px 22px;align-items:center} .foot-eco .lbl{font-size:.875rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--muted-invert)} .foot-eco a{font-size:14px;color:#eaf7fc;display:inline-flex;align-items:center;gap:7px} .foot-eco a:hover{color:#fff} .foot-eco a .d{width:8px;height:8px;background:var(--azure)} .foot-eco a.is-smart .d{background:var(--smart)} .foot-eco a.is-pro .d{background:var(--pro)} .foot-bot{margin-top:26px;padding-top:18px;border-top:1px solid rgba(255,255,255,.1); display:flex;flex-wrap:wrap;gap:10px;justify-content:space-between;font-size:.875rem;color:var(--muted-invert)} .foot-bot a{color:#eaf7fc} /* Hero (structure commune) */ .hero .wrap{display:grid;grid-template-columns:1.05fr .95fr;gap:48px;align-items:center;padding:72px 24px 84px} .hero .h-tx{display:flex;flex-direction:column;gap:20px;position:relative;z-index:1} .hero h1{font-size:clamp(30px,4.6vw,50px);color:#fff;line-height:1.06;text-wrap:balance} .hero .lead{font-size:18.5px;color:#cbd5e1;line-height:1.6;max-width:52ch} .hero .lead b{color:#fff;font-weight:600} .hero .h-cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:4px} .h-note{font-size:.875rem;color:var(--muted);line-height:1.55} .h-note svg{width:16px;height:16px;fill:none;stroke:var(--accent-deep);stroke-width:1.8;vertical-align:-3px;margin-right:6px;flex:none} .cockpit-shot{width:100%;height:auto;display:block;border-radius:6px;border:1px solid rgba(255,255,255,.14);box-shadow:0 24px 60px rgba(0,17,46,.38)} .hero .h-note{font-size:.875rem;color:#9fb4cf;display:flex;align-items:center;gap:8px} .hero .h-note svg{width:16px;height:16px;fill:none;stroke:#00aceb;stroke-width:1.8} .hero .h-fig{position:relative;z-index:1} .hero .h-fig img{width:100%;border:1px solid rgba(255,255,255,.12);box-shadow:0 30px 70px rgba(0,0,0,.45)} .hero .h-fig.plain img{border:0;box-shadow:none;width:min(360px,80%);margin:0 auto;filter:drop-shadow(0 24px 44px rgba(0,0,0,.5))} @media (max-width:860px){ .hero .wrap{grid-template-columns:1fr;text-align:center;padding:52px 24px 60px;gap:34px} .hero .lead{margin-inline:auto} .hero .h-cta,.hero .h-note{justify-content:center} .hero .h-fig{order:2} } /* Mini-cockpit dessiné (aperçu dataviz sans capture) */ .mock{background:linear-gradient(180deg,#002252,#002252);border:1px solid rgba(255,255,255,.16);padding:0;overflow:hidden;border-radius:var(--r-lg);box-shadow:var(--shadow-lg)} .mock .mock-bar{display:flex;align-items:center;gap:7px;padding:11px 15px;background:rgba(255,255,255,.05);border-bottom:1px solid rgba(255,255,255,.1)} .mock .mock-bar i{width:9px;height:9px;background:rgba(255,255,255,.22);border-radius:50%;display:block} .mock .mock-bar i:nth-child(1){background:#ff6b6b66}.mock .mock-bar i:nth-child(2){background:#f5b54266}.mock .mock-bar i:nth-child(3){background:#34d3a666} .mock .mock-bar b{margin-left:8px;font-size:.875rem;color:#9fb4cf;font-weight:600;letter-spacing:.04em} .mock .mock-body{padding:18px;display:flex;flex-direction:column;gap:12px} .mock .m-row{display:grid;grid-template-columns:repeat(3,1fr);gap:10px} .mock .m-kpi{border:1px solid rgba(255,255,255,.12);padding:12px;min-width:0} .mock .m-kpi .kv{font-size:clamp(17px,4.8vw,24px);font-weight:700;color:#fff;letter-spacing:-.02em;font-variant-numeric:tabular-nums;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .mock .m-kpi .kl{font-size:.875rem;color:#9fb4cf;text-transform:uppercase;letter-spacing:.08em;margin-top:2px} .mock .m-bars{display:flex;align-items:flex-end;gap:8px;height:74px;padding-top:6px} .mock .m-bars span{flex:1;background:var(--accent);opacity:.85} .mock .m-line{height:8px;background:rgba(255,255,255,.08)} .mock .m-line.a{width:82%;background:var(--accent)} .mock .m-line.b{width:60%;background:var(--ok)} .mock .m-line.c{width:44%;background:var(--warn)} /* Cockpits (.mock) — resserrage responsive (mobile) */ @media(max-width:560px){ .mock .mock-body{padding:14px;gap:10px} .mock .m-row{gap:8px} .mock .m-kpi{padding:10px 9px} .mock .m-kpi .kl{font-size:.875rem;letter-spacing:.05em} .mock .m-bars{height:60px} } /* Utilitaires marges */ .mt-8{margin-top:8px}.mt-16{margin-top:16px}.mt-24{margin-top:24px}.mt-32{margin-top:32px} .lead-block{max-width:60ch} /* == pied de page animé == (couche décorative derrière le contenu) */ .site-foot{position:relative;isolation:isolate;overflow:hidden} .site-foot zerval-footer-motion{--z-footer-bg:#00112E;position:absolute;inset:0;z-index:0;display:block;pointer-events:none;-webkit-mask-image:linear-gradient(to bottom,transparent 0%,#00112e 18%,#00112e 48%,rgba(0,0,0,.82) 60%,transparent 72%),linear-gradient(to right,transparent 0%,#00112e 20%,#00112e 80%,transparent 100%);-webkit-mask-composite:source-in;mask-image:linear-gradient(to bottom,transparent 0%,#00112e 18%,#00112e 48%,rgba(0,0,0,.82) 60%,transparent 72%),linear-gradient(to right,transparent 0%,#00112e 20%,#00112e 80%,transparent 100%);mask-composite:intersect} .site-foot > .wrap{position:relative;z-index:1} /* Zerval motion — révélations au scroll (progressive enhancement, souverain) */ html.motion .z-reveal{opacity:0;transform:translateY(24px);transition:opacity .7s cubic-bezier(.2,.7,.2,1),transform .7s cubic-bezier(.2,.7,.2,1);will-change:opacity,transform} html.motion .z-reveal.is-in{opacity:1;transform:none} html.motion .m-bars span{transition:height .9s cubic-bezier(.2,.8,.2,1)} html.motion [data-parallax]{will-change:transform} @media(prefers-reduced-motion:reduce){ html.motion .z-reveal{opacity:1;transform:none} } /* fin Zerval motion */ /* Zerval scrolly — section épinglée (scrollytelling), partagée */ .zsc{position:relative;background:linear-gradient(180deg,#00112e,#002252);color:#eaf2fb} .zsc-track{position:relative;height:220vh} .zsc-stage{position:sticky;top:0;height:100vh;display:grid;grid-template-columns:.82fr 1.18fr;gap:44px;align-items:center;padding:0 6vw;overflow:hidden} .zsc-stage::before{content:"";position:absolute;inset:0;z-index:0;background:radial-gradient(circle at 80% 26%,rgba(0,140,214,.16),transparent 46%),radial-gradient(circle at 16% 82%,rgba(0,169,184,.10),transparent 46%)} .zsc-steps,.zsc-cockpit{position:relative;z-index:1} .zsc-kicker{font-weight:700;font-size:.875rem;letter-spacing:.16em;text-transform:uppercase;color:#00aceb;margin-bottom:14px} .zsc-step{padding:14px 0 14px 20px;border-left:2px solid rgba(0,172,235,.18);opacity:.32;transition:.4s} .zsc-step h3{font-size:clamp(20px,2.6vw,28px);margin:0 0 6px;line-height:1.14;letter-spacing:-.02em;color:#eaf7fc} .zsc-step p{margin:0;color:#9fb4cf;font-size:15px} .zsc-step.on{opacity:1;border-left-color:#00aceb}.zsc-step.on h3{color:#fff} .zsc-cockpit{background:linear-gradient(180deg,rgba(0,34,82,.92),rgba(0,34,82,.92));border:1px solid rgba(0,172,235,.28);box-shadow:0 30px 80px rgba(0,0,0,.45)} .zsc-topbar{display:flex;align-items:center;gap:8px;padding:11px 15px;border-bottom:1px solid rgba(0,172,235,.16);background:rgba(0,0,0,.18)} .zsc-topbar i{width:10px;height:10px;border-radius:50%;background:#002252} .zsc-topbar b{margin-left:6px;font-family:ui-monospace,monospace;font-weight:700;font-size:.875rem;letter-spacing:.14em;color:#9fb4cf;text-transform:uppercase} .zsc-topbar .live{margin-left:auto;font-family:ui-monospace,monospace;font-weight:700;font-size:.875rem;color:#00a9b8;display:flex;align-items:center;gap:6px} .zsc-topbar .live::before{content:"";width:7px;height:7px;border-radius:50%;background:#00a9b8;box-shadow:0 0 8px #00a9b8} .zsc-body{padding:20px} .zsc-kpis{display:grid;grid-template-columns:repeat(3,1fr);gap:11px;margin-bottom:16px} .zsc-kpi{border:1px solid rgba(0,172,235,.16);padding:12px 13px;background:rgba(255,255,255,.015)} .zsc-kpi .v{font-weight:700;font-size:clamp(18px,4.6vw,25px);line-height:1;letter-spacing:-.02em;font-variant-numeric:tabular-nums;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .zsc-kpi{min-width:0} .zsc-kpi .l{font-size:.875rem;color:#9fb4cf;margin-top:5px} .zsc-kpi.k1 .v{color:#00aceb}.zsc-kpi.k2 .v{color:#00a9b8}.zsc-kpi.k3 .v{color:#b96b00} .zsc-charts{display:grid;grid-template-columns:1.4fr 1fr;gap:15px;align-items:end} .zsc-bars{display:flex;align-items:flex-end;gap:9px;height:140px;padding:10px 3px 0;border-bottom:1px solid rgba(0,172,235,.16)} .zsc-bars span{flex:1;min-height:2px;background:linear-gradient(180deg,#00aceb,#008cd6)} .zsc-bars span.hot{background:linear-gradient(180deg,#c93c4b,#c93c4b)} .zsc-spark{position:relative} .zsc-spark svg{width:100%;height:112px;display:block;overflow:visible} .zsc-spark .gl{stroke:rgba(0,172,235,.16);stroke-width:1} .zsc-spark .ln{fill:none;stroke:#00a9b8;stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round;filter:drop-shadow(0 0 6px rgba(0,169,184,.45))} .zsc-spark .dt{fill:#fff;stroke:#00a9b8;stroke-width:3} .zsc-spark .cap{position:absolute;top:0;right:0;font-family:ui-monospace,monospace;font-weight:700;font-size:.875rem;color:#00a9b8} .zsc-verdict{margin-top:16px;border:1px solid rgba(0,172,235,.28);padding:13px 15px;display:flex;align-items:center;gap:13px;background:linear-gradient(90deg,rgba(0,169,184,.10),transparent);opacity:0;transform:translateY(12px);transition:.5s} .zsc-verdict.on{opacity:1;transform:none} .zsc-verdict .bdg{flex:0 0 auto;font-weight:700;font-size:.875rem;letter-spacing:.08em;text-transform:uppercase;color:#00112e;background:#00a9b8;padding:7px 11px} .zsc-verdict .t{color:#9fb4cf;font-size:.875rem}.zsc-verdict .t b{color:#fff} @media(max-width:820px){ .zsc-stage{grid-template-columns:1fr;gap:20px;align-items:start;padding:64px 22px 0} .zsc-charts{grid-template-columns:1fr} .zsc-track{height:520vh} } @media(prefers-reduced-motion:reduce){ .zsc-track{height:auto} .zsc-stage{position:static;height:auto;padding:70px 6vw} .zsc-step{opacity:1;border-left-color:#00aceb} .zsc-verdict{opacity:1;transform:none} .zsc-bars span{height:60%} } /* fin Zerval scrolly */ /* Zerval motion — MAXIMAL (souverain : split · draw · marquee · magnétique · canvas) */ /* Titres mot-à-mot : les mots montent derrière un masque */ html.motion .z-split{opacity:1;transform:none} html.motion .z-split .z-word{display:inline-block;overflow:hidden;vertical-align:top;line-height:inherit;padding-bottom:.14em;margin-bottom:-.14em} html.motion .z-split .z-word>span{display:inline-block;transform:translateY(115%);transition:transform .74s cubic-bezier(.2,.85,.25,1);will-change:transform} html.motion .z-split.is-in .z-word>span{transform:none} /* Tracé SVG au scroll (paths marqués [data-draw]) */ html.motion .z-draw{transition:stroke-dashoffset 1.5s cubic-bezier(.2,.8,.2,1)} /* Rails auto-défilants (logos / verbatims) */ [data-marquee]{overflow:hidden} [data-marquee-track]{display:flex;align-items:center;gap:40px;flex-wrap:wrap;justify-content:center} html.motion .z-marquee{display:flex;overflow:hidden;-webkit-mask:linear-gradient(90deg,transparent,#00112e 7%,#00112e 93%,transparent);mask:linear-gradient(90deg,transparent,#00112e 7%,#00112e 93%,transparent)} html.motion .z-marquee [data-marquee-track]{flex:0 0 auto;display:flex;flex-wrap:nowrap;width:max-content;animation:zmarquee linear infinite;will-change:transform} html.motion .z-marquee [data-marquee-track] > *{margin-right:56px} html.motion .z-marquee:hover [data-marquee-track]{animation-play-state:paused} @keyframes zmarquee{from{transform:translateX(0)}to{transform:translateX(calc(-1 * var(--mq,50%)))}} /* CTA magnétiques (pointeur fin) */ html.motion [data-magnetic]{transition:transform .28s cubic-bezier(.2,.8,.2,1)} /* Héros canvas « flux réseau » */ canvas[data-zcanvas]{display:block;width:100%;height:100%} .hero canvas.hero-fx[data-zcanvas]{position:absolute;inset:0;z-index:0;width:100%;height:100%;pointer-events:none;opacity:.9;-webkit-mask:radial-gradient(132% 120% at 50% 40%,#00112e 48%,transparent 100%);mask:radial-gradient(132% 120% at 50% 40%,#00112e 48%,transparent 100%)} @media(prefers-reduced-motion:reduce){ html.motion .z-split .z-word>span{transform:none} } /* fin Zerval motion MAXIMAL */ /* Statut des formulaires (amélioration progressive) */ .zform-status{margin:2px 0 0;font-size:14px;line-height:1.5} .zform-status.is-pending{color:var(--muted)} .zform-status.is-ok{color:var(--ok);font-weight:600} .zform-status.is-err{color:var(--danger);font-weight:600} [aria-invalid="true"]{outline:2px solid var(--danger);outline-offset:1px} /* Lien d'évitement (accessibilité) */ .skip{position:absolute;left:-9999px;top:0;z-index:200;background:var(--midnight);color:#fff;padding:11px 18px;font-weight:600;text-decoration:none} .skip:focus{left:0} main:focus{outline:none} /* A11y AA : bouton danger sur bande .urgence (navy) — rempli rouge profond, texte blanc (~7:1) */ .urgence .btn--danger{--btn-bg:#c93c4b;--btn-fg:#fff;--btn-bd:#c93c4b} .urgence .btn--danger:hover{--btn-bg:#c93c4b;--btn-fg:#fff;--btn-bd:#c93c4b} /* RAFFINEMENT V5.1 (execution elevee, premier plan uniquement - fond anime INCHANGE) */ /* Typo plus ample et plus serree */ .hero h1{font-size:clamp(34px,5vw,60px);letter-spacing:-.035em} .sec-head h2{font-size:clamp(28px,3.6vw,42px);letter-spacing:-.03em} /* Section-head editoriale : 2 colonnes, alignee a gauche (variante opt-in) */ .sec-head--split{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:end;max-width:none;text-align:left;margin:0 0 48px} .sec-head--split .sh-l{display:flex;flex-direction:column;gap:14px;align-items:flex-start} .sec-head--split .sh-l h2{max-width:15ch} .sec-head--split .sh-r{color:var(--muted);font-size:18px;line-height:1.65;max-width:52ch;margin:0} .section--dark .sec-head--split .sh-r,.section--deep .sec-head--split .sh-r{color:var(--muted-invert)} @media(max-width:760px){.sec-head--split{grid-template-columns:1fr;gap:14px;margin-bottom:34px}} /* Cartes raffinees : filet d'accent au survol, icone qui s'inverse, ombre plus discrete */ .card{position:relative;overflow:hidden} .card::before{content:"";position:absolute;top:0;left:0;right:0;height:2px;background:var(--accent);transform:scaleX(0);transform-origin:left;transition:transform .3s var(--ease);z-index:1} .card:hover{transform:translateY(-3px);box-shadow:0 14px 30px rgba(0,17,46,.10)} .card:hover::before{transform:scaleX(1)} .card:hover .card-ic{background:var(--accent);border-color:var(--accent);color:#fff} .section--dark .card:hover .card-ic,.section--deep .card:hover .card-ic{background:var(--accent);border-color:var(--accent);color:#fff} /* Grille numerotee (01-06) - variante opt-in, sans toucher au HTML des cartes */ .grid--indexed{counter-reset:zcap} .grid--indexed > .card{counter-increment:zcap} .grid--indexed > .card::after{content:counter(zcap,decimal-leading-zero);position:absolute;top:20px;right:22px;font-family:var(--mono);font-weight:500;font-size:.875rem;letter-spacing:.1em;color:#cbd5e1} /* Bandeau de confiance raffine : mono + separateurs points */ .trustbar .t{font-family:var(--mono);font-size:.875rem;letter-spacing:.05em} .trustbar .sep{width:4px;height:4px;border-radius:50%;background:rgba(255,255,255,.28)} /* fin RAFFINEMENT V5.1 */ /* IDENTITÉ SMART — claire, chaude, aérée (grand public) */ body.brand-smart{--teal-ink:#002252;background:#eaf7fc;font-size:16.5px} body.brand-smart h1,body.brand-smart h2,body.brand-smart h3,body.brand-smart h4{color:var(--teal-ink)} /* kickers/eyebrows en Inter (fin du mono technique) */ body.brand-smart .eyebrow,body.brand-smart .zsc-kicker,body.brand-smart .sec-num{font-family:var(--font);letter-spacing:.005em;text-transform:none;font-size:14px;color:var(--accent-deep);font-weight:700} /* en-tête & annonce : teal foncé (logo blanc conservé) */ body.brand-smart .site-head{background:#002252} body.brand-smart .announce{background:#002252} /* HERO CLAIR + réseau animé en mode clair */ body.brand-smart .hero.canvas{--zc-mode:light;color:var(--ink); background:radial-gradient(120% 92% at 86% 4%,#eaf7fc 0%,rgba(234,247,252,0) 52%),radial-gradient(92% 80% at 2% 100%,#eaf7fc 0%,rgba(234,247,252,0) 46%),#eaf7fc} body.brand-smart .hero h1{color:var(--teal-ink);letter-spacing:-.022em} body.brand-smart .hero .lead{color:#526277} body.brand-smart .hero .lead b{color:var(--teal-ink)} body.brand-smart .hero .h-note{color:#526277} body.brand-smart .hero .h-note svg{stroke:var(--accent-deep)} /* cartes chaudes, ombres douces */ body.brand-smart .card,body.brand-smart .tile,body.brand-smart .price,body.brand-smart .offer,body.brand-smart .testi,body.brand-smart .sov .s{background:#fff;border-color:#eaf7fc;box-shadow:0 2px 6px rgba(0,34,82,.05)} body.brand-smart .card p,body.brand-smart .tile .t-tx span{color:#526277} body.brand-smart .card .card-ic,body.brand-smart .tile .t-ic{background:#eaf7fc;border-color:#eaf7fc;color:var(--accent-deep)} body.brand-smart .sov{background:#eaf7fc} /* Smart — cartes lisibles sur sections sombres (contre le fond blanc forcé ci-dessus) */ body.brand-smart .section--deep .card,body.brand-smart .section--dark .card{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.15);box-shadow:none} body.brand-smart .section--deep .card p,body.brand-smart .section--dark .card p{color:var(--muted-invert)} body.brand-smart .section--deep .sov,body.brand-smart .section--dark .sov{background:rgba(255,255,255,.12)} body.brand-smart .section--deep .sov .s,body.brand-smart .section--dark .sov .s{background:transparent;border-color:transparent;box-shadow:none} body.brand-smart .section--deep .card .card-ic,body.brand-smart .section--dark .card .card-ic{background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.16);color:#00a9b8} /* trustbar « réassurance » claire */ body.brand-smart .trustbar{background:#fff;border-top:1px solid #eaf7fc;border-bottom:1px solid #eaf7fc} body.brand-smart .trustbar .t{font-family:var(--font);font-size:14.5px;color:#526277} body.brand-smart .trustbar .t b{color:var(--teal-ink)} body.brand-smart .trustbar .t svg{stroke:var(--accent-deep)} body.brand-smart .trustbar .sep{background:#f4f7fa} /* rail sombre -> clair chaud */ body.brand-smart .rail{background:#eaf7fc;border-top:1px solid #eaf7fc} body.brand-smart .rail .lbl{color:#526277} body.brand-smart .rail-item{color:#00112e;font-family:var(--font)} /* bandes sombres -> teal foncé chaud */ body.brand-smart .section--dark{background:#002252} body.brand-smart .section--deep,body.brand-smart .final{background:#002252} /* mock cockpit des AUTRES pages -> teal foncé harmonisé (sur hero clair) */ body.brand-smart .mock{background:linear-gradient(180deg,#002252,#002252)} /* Carte « plan d'action » claire (home) */ body.brand-smart .s-plan{background:#fff;border:1px solid #eaf7fc;border-radius:6px;box-shadow:0 30px 60px rgba(0,34,82,.10);overflow:hidden} body.brand-smart .s-plan-h{display:flex;align-items:center;gap:11px;padding:18px 22px;background:#eaf7fc;border-bottom:1px solid #eaf7fc} body.brand-smart .s-plan-h .hh{width:34px;height:34px;border-radius:50%;background:var(--accent);display:flex;align-items:center;justify-content:center;flex:0 0 auto} body.brand-smart .s-plan-h .hh svg{width:19px;height:19px;stroke:#fff;fill:none;stroke-width:2.2} body.brand-smart .s-plan-h b{font-size:15px;color:var(--teal-ink)} body.brand-smart .s-plan-h span{font-size:.875rem;color:#526277;display:block;font-weight:400} body.brand-smart .s-plan-steps{padding:14px} body.brand-smart .s-plan-st{display:flex;gap:14px;align-items:flex-start;padding:15px 12px} body.brand-smart .s-plan-st+.s-plan-st{border-top:1px solid #eaf7fc} body.brand-smart .s-plan-st .n{flex:0 0 auto;width:40px;height:40px;border-radius:50%;background:#eaf7fc;color:var(--accent-deep);font-weight:700;font-size:17px;display:flex;align-items:center;justify-content:center} body.brand-smart .s-plan-st.done .n{background:var(--accent);color:#fff} body.brand-smart .s-plan-st .when{font-size:16px;font-weight:700;color:var(--teal-ink)} body.brand-smart .s-plan-st .what{font-size:14px;color:#526277;margin-top:2px;line-height:1.5} body.brand-smart .s-plan-st .chk{margin-left:auto;color:var(--accent);flex:0 0 auto} body.brand-smart .s-plan-st .chk svg{width:22px;height:22px;stroke:currentColor;fill:none;stroke-width:2.4} /* boutons du hero clair : redevenir foncés (sinon texte clair invisible) */ body.brand-smart .hero.canvas .btn--secondary{--btn-fg:var(--accent-deep);--btn-bd:var(--border)} body.brand-smart .hero.canvas .btn--secondary:hover{--btn-bg:var(--btn-primary-bg);--btn-fg:#fff;--btn-bd:var(--btn-primary-bg)} body.brand-smart .hero.canvas .btn--tertiary{--btn-fg:var(--accent-deep)} /* CORRECTIFS cohérence Smart : surfaces sombres -> teal-ink + titres BLANCS */ body.brand-smart .urgence{background:#002252} body.brand-smart .site-foot{background:#002252} body.brand-smart .site-foot zerval-footer-motion{--z-footer-bg:#002252} body.brand-smart .zsc{background:linear-gradient(180deg,#002252,#002252)} body.brand-smart .section--dark :is(h1,h2,h3,h4),body.brand-smart .section--deep :is(h1,h2,h3,h4),body.brand-smart .final :is(h1,h2,h3),body.brand-smart .urgence :is(h1,h2,h3),body.brand-smart .zsc :is(h1,h2,h3),body.brand-smart .site-foot h4{color:#fff} body.brand-smart .section--dark .eyebrow,body.brand-smart .section--deep .eyebrow,body.brand-smart .zsc .eyebrow,body.brand-smart .zsc-kicker{color:#00a9b8} body.brand-smart .zsc-step.on{border-left-color:var(--accent)} body.brand-smart .announce a{color:#00a9b8} /* dataviz scrollytelling + mock : tout en teal (fin de l'arc-en-ciel) */ body.brand-smart .zsc-kpi.k1 .v{color:#00a9b8} body.brand-smart .zsc-kpi.k2 .v{color:#00a9b8} body.brand-smart .zsc-kpi.k3 .v{color:#00a9b8} body.brand-smart .zsc-bars span{background:linear-gradient(180deg,#00a9b8,#00a9b8)} body.brand-smart .zsc-spark .ln{stroke:#00a9b8;filter:drop-shadow(0 0 6px rgba(0,169,184,.45))} body.brand-smart .zsc-spark .dt{stroke:#00a9b8} body.brand-smart .zsc-spark .cap{color:#00a9b8} body.brand-smart .zsc-verdict{background:linear-gradient(90deg,rgba(0,169,184,.12),transparent);border-color:rgba(0,169,184,.30)} body.brand-smart .zsc-verdict .bdg{background:#00A9B8;color:#fff} body.brand-smart .zsc-topbar .live{color:#00a9b8} body.brand-smart .zsc-topbar .live::before{background:#00a9b8;box-shadow:0 0 8px #00a9b8} body.brand-smart .mock .m-line.b{background:#00a9b8} body.brand-smart .mock .m-line.c{background:#00a9b8} /* CTA « victime/urgence » : rouge PLEIN texte blanc (visibilité AA sur fonds sombres) */ body.brand-smart .btn--danger{--btn-bg:#c93c4b;--btn-fg:#fff;--btn-bd:#c93c4b} body.brand-smart .btn--danger:hover{--btn-bg:#c93c4b;--btn-fg:#fff;--btn-bd:#c93c4b} /* contraste AA : teal foncé pour clair + secondaires clairs sur bandes sombres */ body.brand-smart{--accent-deep:#002252} body.brand-smart .urgence .btn--secondary,body.brand-smart .zsc .btn--secondary{--btn-fg:#eaf7fc;--btn-bd:rgba(255,255,255,.4)} body.brand-smart .urgence .btn--secondary:hover,body.brand-smart .zsc .btn--secondary:hover{--btn-bg:#fff;--btn-fg:#002252;--btn-bd:#fff} /* complément AA : sec-num clair sur bandes sombres + secondaire sur .final */ body.brand-smart .section--dark .sec-num,body.brand-smart .section--deep .sec-num,body.brand-smart .urgence .sec-num,body.brand-smart .zsc .sec-num,body.brand-smart .final .sec-num{color:#00a9b8} body.brand-smart .final .btn--secondary{--btn-fg:#eaf7fc;--btn-bd:rgba(255,255,255,.4)} body.brand-smart .final .btn--secondary:hover{--btn-bg:#fff;--btn-fg:#002252;--btn-bd:#fff} /* neutraliser les bleus « azure » sur Smart -> teal */ body.brand-smart{--azure:#00a9b8;--cyan:#00a9b8} body.brand-smart .codex .maxim .accentline{color:#00a9b8} /* navy structurel -> teal (titres tuiles/prix/sov, bandes) */ body.brand-smart{--midnight:#002252;--navy:#002252} body.brand-smart .zsc-topbar i{background:#002252} /* résiduels : gris-bleutés -> gris-teal (texte sombre + lignes dataviz) */ body.brand-smart .site-head nav a{color:#cbd5e1} body.brand-smart .urgence p{color:#cbd5e1} body.brand-smart .foot-col a{color:#cbd5e1} body.brand-smart .foot-brand p,body.brand-smart .foot-eco .lbl,body.brand-smart .foot-bot,body.brand-smart .foot-bot a{color:#cbd5e1} body.brand-smart .zsc-step p{color:#cbd5e1} body.brand-smart .zsc-cockpit{border-color:rgba(0,169,184,.30)} body.brand-smart .zsc-kpi,body.brand-smart .zsc-topbar,body.brand-smart .zsc-bars,body.brand-smart .zsc-step{border-color:rgba(0,169,184,.20)} body.brand-smart .zsc-spark .gl{stroke:rgba(0,169,184,.16)} /* fin IDENTITÉ SMART */ /* Sélecteur d'écosystème (en-tête) — Zerval reste la marque mère */ .eco-switch{display:flex;align-items:center;gap:7px;margin-left:14px;padding-left:14px;border-left:1px solid rgba(255,255,255,.15);font-size:.875rem} .eco-switch a{color:#9fb4cf;text-decoration:none;letter-spacing:.01em;transition:color .15s} .eco-switch a:hover{color:#fff} .eco-switch a[aria-current]{color:#fff;font-weight:700} .eco-switch .sep{color:rgba(255,255,255,.28)} @media(max-width:1150px){.eco-switch{display:none}} body.brand-smart .eco-switch a{color:#cbd5e1} body.brand-smart .eco-switch a:hover,body.brand-smart .eco-switch a[aria-current]{color:#fff} body.brand-smart .eco-switch .sep{color:rgba(255,255,255,.3)} /* eco-nav : version mobile du sélecteur (dans le menu déroulant) */ .eco-nav{display:none} @media(max-width:1150px){ .eco-nav{display:flex;flex-direction:column;background:rgba(255,255,255,.04);border-bottom:1px solid rgba(255,255,255,.12)} .eco-nav a{padding:12px 24px !important;font-size:.875rem;letter-spacing:.1em;text-transform:uppercase;color:#9fb4cf;border-top:0 !important} .eco-nav a[aria-current]{color:#fff;font-weight:700} } body.brand-smart .eco-nav a{color:#cbd5e1} body.brand-smart .eco-nav a[aria-current]{color:#fff} /* Audit UX : sur mobile, le scrollytelling épinglé (520vh) devient STATIQUE (comme reduced-motion) */ @media(max-width:820px){ .zsc-track{height:auto} .zsc-stage{position:static;height:auto;padding:52px 22px} .zsc-steps,.zsc-cockpit{position:static} .zsc-step{opacity:1;border-left-color:rgba(0,172,235,.35)} .zsc-step.on,.zsc-step:first-child{border-left-color:var(--accent)} .zsc-verdict{opacity:1;transform:none} .zsc-bars span{min-height:38%} } /* Durcissement responsive (recette 15/08/2026) — anti-débordement horizontal. Défensif : ne change rien au desktop, protège le mobile. */ svg,video,iframe{max-width:100%} main p,main li,main h1,main h2,main h3,main dd,main td{overflow-wrap:break-word} main table{display:block;max-width:100%;overflow-x:auto} /* H1 allégés (reco docs : graisse 500-650, moins « criard ») */ h1{font-weight:640} .btn[href^="tel:"]{white-space:normal;line-height:1.3} /* Cibles tactiles WCAG 2.5.5 — boutons >=44px en contexte tactile (mobile) */ @media (max-width:768px){.btn{min-height:44px;display:inline-flex;align-items:center;justify-content:center}} /* Filigrane serval respirant — ambiance UNIQUE (canvas héros & motion footer retirés) */ .hero canvas.hero-fx[data-zcanvas]{display:none!important} .site-foot zerval-footer-motion,zerval-footer-motion{display:none!important} .hero.canvas{overflow:hidden} .hero.canvas::after{content:"";position:absolute;top:50%;right:-6%;width:min(880px,74vw);height:min(880px,118%);background:url("../img/Logos/zerval_tete_blanche.svg") center/contain no-repeat;opacity:.03;pointer-events:none;z-index:0;transform:translateY(-50%) rotate(-4deg)} @keyframes servalbreath{from{opacity:.025;transform:translateY(-50%) rotate(-4deg) scale(1)}to{opacity:.045;transform:translateY(-50%) rotate(-4deg) scale(1.02)}} @media(prefers-reduced-motion:no-preference){.hero.canvas::after{animation:servalbreath 9s ease-in-out infinite alternate}} /* Audit refonte : suppression de la 2e ambiance (canvas footer) */ zerval-footer-motion{display:none!important} /* Audit refonte : preuve par registre (Pro) — remplace la bande de chiffres clonée */ .pv-reg{background:#00112E;color:#dfe9f5;border-radius:6px;overflow:hidden;border:1px solid #002252;max-width:760px;margin:22px auto 0;text-align:left} .pv-reg-h{display:flex;align-items:center;gap:10px;padding:14px 18px;border-bottom:1px solid rgba(255,255,255,.09)} .pv-reg-h .pv-dot{width:9px;height:9px;border-radius:50%;background:#008CD6;box-shadow:0 0 0 4px rgba(0,140,214,.18)} .pv-reg-h b{color:#fff;font-size:14px} .pv-reg-h .pv-seal{margin-left:auto;font-size:10.5px;font-weight:700;letter-spacing:.08em;color:#9fe3c9;border:1px solid rgba(12,140,103,.5);background:rgba(12,140,103,.15);padding:4px 9px;border-radius:20px} .pv-entry{padding:14px 18px;border-bottom:1px solid rgba(255,255,255,.06);position:relative} .pv-entry::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:#008CD6} .pv-entry .pv-ts{font-size:12px;color:#7fd0f2;font-family:"JetBrains Mono",Consolas,monospace} .pv-entry .pv-ttl{color:#fff;font-weight:600;margin:2px 0 3px} .pv-entry .pv-meta{font-size:12.5px;color:#9fb2c9} .pv-entry .pv-hash{margin-top:8px;font-size:12px;color:#cbd5e1;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.08);border-radius:6px;padding:7px 10px;font-family:"JetBrains Mono",Consolas,monospace;word-break:break-all} .pv-entry .pv-hash span{color:#6ee7b7;font-weight:700} .pv-reg-f{padding:11px 18px;font-size:12px;color:#9fb2c9;background:rgba(0,0,0,.18)} /* Audit refonte : hierarchie referentiels 4 niveaux (remplace le mur de sigles) */ .ref4{background:#F4F7FA;border-top:1px solid #cbd5e1;border-bottom:1px solid #cbd5e1} .ref4-in{max-width:1080px;margin:0 auto;padding:8px 22px} .ref4-row{display:grid;grid-template-columns:236px 1fr;gap:18px;padding:13px 0;border-bottom:1px solid #e6edf5;align-items:baseline} .ref4-row:last-child{border-bottom:0} .ref4-lv{display:flex;flex-direction:column;gap:2px} .ref4-n{font-size:10px;font-weight:800;letter-spacing:.1em;color:#94a3b8} .ref4-lbl{font-size:13.5px;font-weight:700;color:#00112E;display:flex;align-items:center;gap:7px} .ref4-i{width:8px;height:8px;border-radius:50%;flex:none;display:inline-block} .ref4-i1{background:#0C8C67}.ref4-i2{background:#008CD6}.ref4-i3{background:#00ACEB}.ref4-i4{background:#002252} .ref4-v{font-size:14.5px;color:#00112E;line-height:1.7} .ref4-m{color:#526277} .ref4-tag{display:inline-block;font-size:12.5px;color:#002252;background:#EAF7FC;border:1px solid #d4e9f5;border-radius:6px;padding:2px 9px;margin:2px 6px 2px 0} @media(max-width:620px){.ref4-row{grid-template-columns:1fr;gap:5px}} /* Audit refonte : récit maître sous le cockpit (hero Pro) */ .hero-recit{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:8px 10px;margin:16px auto 0;max-width:660px} .hero-recit .hr-step{display:inline-flex;align-items:center;gap:7px;font-size:12.5px;font-weight:700;color:#eaf3fb;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);border-radius:6px;padding:6px 11px} .hero-recit .hr-step i{width:8px;height:8px;border-radius:50%;background:#00ACEB;box-shadow:0 0 0 3px rgba(0,172,235,.18)} .hero-recit .hr-step:nth-child(3) i{background:#B96B00}.hero-recit .hr-step:nth-child(5) i{background:#008CD6}.hero-recit .hr-step:nth-child(7) i{background:#0C8C67} .hero-recit .hr-arrow{color:#7fd0f2;font-weight:800} @media(max-width:560px){.hero-recit .hr-arrow{display:none}.hero-recit{gap:8px}} /* ===== Reflet de lumiere — glint blanc sur les boutons (18/08/2026) ===== Une lumiere BLANCHE, discrete, qui glisse sur les boutons (reflet de verre). - au survol : sur tous les boutons (retour d'interaction, effet premium) - lent & periodique : uniquement sur le bouton principal (CTA), ~1,1 s de passage toutes les 8 s, pour attirer l'oeil sans agiter la page. Blanc, jamais or. Se desactive si prefers-reduced-motion. */ .btn{position:relative;overflow:hidden} /* glint au survol — tous les boutons */ .btn::after{ content:"";position:absolute;top:0;bottom:0;left:0;width:100%; pointer-events:none;z-index:1; background:linear-gradient(105deg,transparent 40%,rgba(255,255,255,.40) 50%,transparent 60%); transform:translateX(-130%); } .btn:hover::after{ transition:transform .7s cubic-bezier(.22,.61,.36,1); transform:translateX(130%); } /* passage lent & periodique — bouton principal seulement */ .btn--primary::before{ content:"";position:absolute;top:0;bottom:0;left:0;width:100%; pointer-events:none;z-index:1; background:linear-gradient(105deg,transparent 44%,rgba(255,255,255,.28) 50%,transparent 56%); transform:translateX(-130%); animation:z-btn-glint 8s ease-in-out infinite; } @keyframes z-btn-glint{ 0%{transform:translateX(-130%)} 14%{transform:translateX(130%)} 100%{transform:translateX(130%)} } @media(prefers-reduced-motion:reduce){ .btn::after,.btn--primary::before{animation:none;transition:none;transform:translateX(-130%)} }