/* * © 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) */ /* INTER EST SERVIE EN DEUX PLAGES, comme Fraunces juste en dessous. Elle partait entiere : 172 Ko pour la droite, 189 pour l'italique, soit 361 Ko alors qu'une page francaise n'emploie que la plage latine. Apres decoupage, 130 Ko, sur une page qui en pesait 665 : trente-cinq pour cent de moins. AUCUNE ECRITURE N EST PERDUE, et c'est mesure : Inter contient 814 caracteres, dont zero glyphe arabe, grec ou cyrillique. L'arabe des applications retombait deja sur une police du systeme. SEULES LES FONCTIONNALITES EMPLOYEES SONT GARDEES. Inter en embarque trente-sept ; la feuille n'en emploie qu'une, `tabular-nums`. Retirer les autres fait tomber la plage latine de 97 a 62 Ko. Un `font-feature-settings` qui reclamerait `ss01` ou `cv05` resterait donc sans effet : le banc le refuse. */ /* L ETENDUE EST DECLAREE AVANT LA LATINE, et ce n'est pas un detail. Les deux plages se recouvrent : la latine declare `U+0152-0153`, que l'etendue contient aussi dans son `U+0100-02BA`. Quand deux faces couvrent un meme caractere, le navigateur retient la DERNIERE declaree. Dans l'ancien ordre, un seul `œ` sur la page suffisait a faire descendre les 73 Ko de la plage etendue, alors que la latine, deja chargee, le contient. Google declare l'etendue en premier pour cette raison exacte. */ @font-face{ font-family:'Inter';font-style:normal;font-weight:400 700;font-display:swap; src:url('../fonts/Inter-latinext.woff2?v=h391f1892') format('woff2'); unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; } @font-face{ font-family:'Inter';font-style:normal;font-weight:400 700;font-display:swap; src:url('../fonts/Inter-latin.woff2?v=h929bcced') format('woff2'); unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; } @font-face{ font-family:'Inter';font-style:italic;font-weight:400 700;font-display:swap; src:url('../fonts/Inter-Italic-latinext.woff2?v=h36ef39be') format('woff2'); unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; } @font-face{ font-family:'Inter';font-style:italic;font-weight:400 700;font-display:swap; src:url('../fonts/Inter-Italic-latin.woff2?v=h2f1900f3') format('woff2'); unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; } /* 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?v=hcaf0dfde') format('woff2')} @font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:500;font-display:swap;src:url('../fonts/JetBrainsMono-500.woff2?v=ha21e038a') format('woff2')} @font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:700;font-display:swap;src:url('../fonts/JetBrainsMono-700.woff2?v=h69002db5') format('woff2')} /* Fraunces (display, auto-hebergee) : la voix chaude de L'Affut */ @font-face{font-family:'Fraunces';font-style:normal;font-weight:500 900;font-display:swap;src:url('../fonts/Fraunces-latinext.woff2?v=ha04d3539') format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF} @font-face{font-family:'Fraunces';font-style:normal;font-weight:500 900;font-display:swap;src:url('../fonts/Fraunces-latin.woff2?v=h069cb90e') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD} /* 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:#171A1F; /* chrome, titres, surfaces structurantes */ --deep:#0F1319; /* fonds premium */ --navy:#171A1F; /* filigrane, bandeaux */ --deep-blue:#008cd6; /* Signal */ --azure:#3DA6E8; /* signal ombrelle : focus / actif (charte V4.1 p18) */ --cyan:#3DA6E8; /* 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:#EBE3D2; --surface:#F3EEE3; /* Os (chaud) */ --surface-2:#EEE7D8; /* Sable clair */ --border:#E0D8C7; --ink:#171A1F; /* Nuit : texte principal (chaud) */ --muted:#6A6357; /* Graphite : 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 1px 3px rgba(23,26,31,.06); --shadow-md:0 8px 20px rgba(23,26,31,.09); --shadow-lg:0 16px 38px rgba(23,26,31,.12); --ease:cubic-bezier(.2,.8,.2,1); /* Accent par défaut (ombrelle), surchargé par les classes de marque */ --accent:#3DA6E8; --accent-deep:#2C6B7F; --accent-ink:#1B1712; /* Encre : texte sur aplat chaud */ --font:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Arial,sans-serif; --display:'Fraunces',Georgia,'Times New Roman',serif; --fauve:#E0872A; --fauve-deep:#C9761F; --mono:'JetBrains Mono',ui-monospace,'SFMono-Regular',Menlo,Consolas,monospace; --wrap:1180px; --grid-line:rgba(58,166,232,.12); } /* Peaux de marque : un seul accent par site */ body.brand-umbrella{ --accent:#3DA6E8; --accent-deep:#2C6B7F; --btn-primary-bg:#E0872A; } /* L'Affut : Signal + Fauve */ body.brand-smart{ --accent:#3DA6E8; --accent-deep:#2C6B7F; --btn-primary-bg:#E0872A; } body.brand-pro{ --accent:#3DA6E8; --accent-deep:#2C6B7F; --btn-primary-bg:#E0872A; } /* 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.07;letter-spacing:-.015em;font-weight:700;font-family:var(--display);font-variation-settings:'opsz' 96} 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:#3DA6E8} .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:#1B1712;--btn-bd:var(--btn-primary-bg);font-weight:700} .btn--primary:hover{--btn-bg:var(--fauve-deep);--btn-bd:var(--fauve-deep);--btn-fg:#1B1712;box-shadow:0 8px 20px rgba(224,135,42,.30)} .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;max-width:1320px} .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-mark{display:inline-block;height:44px} @media(max-width:560px){ .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;white-space:nowrap;padding:9px 10px;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;white-space:nowrap} .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:1300px){ .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:23px 23px;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)}} /* UN LIBELLE LONG NE DOIT PAS FAIRE DEFILER LA PAGE EN TRAVERS. `.btn` porte `white-space:nowrap`, juste pour un libelle court et faux pour un long : sur telephone, « Nos ressources & reperes officiels (Cybermalveillance, ANSSI, CNIL) » mesurait 515 px dans un conteneur de 354 et faisait defiler l'accueil lateralement. Le bureau ne bouge pas : la regle ne vit que sous cette rupture, et un bouton court y tient toujours sur une ligne, puisqu'il tient. */ @media (max-width:620px){ .btn{white-space:normal;max-width:100%;} } @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:#3DA6E8} .section--dark .card .card-more,.section--deep .card .card-more{color:#3DA6E8} /* 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:#3DA6E8;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:#3DA6E8} /* 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) */ /* LA GRILLE S ADAPTE AU NOMBRE D ETAPES. Elle etait figee a six colonnes : cinq blocs sur dix-neuf n'en ont pas six (trois en ont trois, deux en ont quatre), et les colonnes vides restaient ouvertes, la bordure du conteneur continuant seule dans le vide. Mesure sur `preservation-preuves.html` : 424 px de vide avant, 48 px apres, soit la marge du conteneur. `auto-fit` replie les pistes inoccupees ; les pages a six etapes ne bougent pas. */ .steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,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:#3DA6E8} .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-eco a.is-msp .d{background:#7C6BFF} .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:#3DA6E8;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,#171A1F,#171A1F);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:#0F1319;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,#171A1F);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:#3DA6E8;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:#3DA6E8}.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:#171A1F} .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:#3DA6E8}.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,#3DA6E8,#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:#3DA6E8} .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:#171A1F;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:#171A1F} body.brand-smart .announce{background:#171A1F} /* 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:#171A1F} body.brand-smart .section--deep,body.brand-smart .final{background:#171A1F} /* mock cockpit des AUTRES pages -> teal foncé harmonisé (sur hero clair) */ body.brand-smart .mock{background:linear-gradient(180deg,#171A1F,#171A1F)} /* 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:#171A1F} body.brand-smart .site-foot{background:#171A1F} body.brand-smart .site-foot zerval-footer-motion{--z-footer-bg:#171A1F} body.brand-smart .zsc{background:linear-gradient(180deg,#171A1F,#171A1F)} 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:#171A1F} 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:#171A1F;--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:#171A1F;--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:#171A1F;--navy:#171A1F} body.brand-smart .zsc-topbar i{background:#171A1F} /* 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:1300px){.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:1300px){ .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 photographique serval (L'Affut) : photo plein cadre + voile, filigrane retire */ .hero.canvas{overflow:hidden;background-size:cover;background-position:center right;background-color:#0b0f15} .hero.canvas::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:0;background:linear-gradient(90deg,rgba(3,9,18,.96) 0%,rgba(3,9,18,.84) 38%,rgba(3,9,18,.38) 57%,transparent 72%)} /* Audit refonte : suppression de la 2e ambiance (canvas footer) */ zerval-footer-motion{display:none!important} /* 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:#0F1319;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:#3DA6E8}.ref4-i4{background:#171A1F} .ref4-v{font-size:14.5px;color:#0F1319;line-height:1.7} .ref4-m{color:#526277} .ref4-tag{display:inline-block;font-size:12.5px;color:#171A1F;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 : langage serval sur l'orienteur (routage visuel additif) */ .or-route{margin-top:20px} .or-track{position:relative;height:2px;background:#e2e8f0;border-radius:2px;margin:0 0 14px} .or-signal{position:absolute;top:50%;left:0;width:11px;height:11px;margin:-5.5px 0 0 -5.5px;border-radius:50%;background:#3DA6E8;opacity:0;transition:left .7s cubic-bezier(.5,.1,.2,1),opacity .3s;box-shadow:0 0 0 0 rgba(0,172,235,.5)} .or-route.go .or-signal{opacity:1;animation:orpulse 1.2s ease-out infinite} @keyframes orpulse{0%{box-shadow:0 0 0 0 rgba(0,172,235,.5)}100%{box-shadow:0 0 0 12px rgba(0,172,235,0)}} .or-dests{display:grid;grid-template-columns:repeat(3,1fr);gap:10px} .or-dest{display:flex;align-items:center;gap:8px;font-size:13px;font-weight:700;color:#94a3b8;border:1px solid #e2e8f0;border-radius:6px;padding:8px 12px;transition:color .3s,border-color .3s} .or-dest i{width:8px;height:8px;border-radius:50%;background:#cbd5e1;transition:background .3s} .or-dest[data-dest="particulier"].lit{color:#0F1319;border-color:#00A9B8}.or-dest[data-dest="particulier"].lit i{background:#00A9B8} .or-dest[data-dest="organisation"].lit{color:#0F1319;border-color:#008CD6}.or-dest[data-dest="organisation"].lit i{background:#008CD6} .or-dest[data-dest="dossier"].lit{color:#0F1319;border-color:#C79A3B}.or-dest[data-dest="dossier"].lit i{background:#C79A3B} @media(max-width:560px){.or-dests{grid-template-columns:1fr}} /* Audit refonte : orienteur vivant dans le hero maison (remplace la maquette statique confuse) */ .horoute{background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.14);border-radius:6px;padding:16px;max-width:430px} .horoute-h{display:flex;align-items:center;gap:6px;margin-bottom:12px} .horoute-h i{width:9px;height:9px;border-radius:50%;background:rgba(255,255,255,.28)} .horoute-h b{margin-left:8px;font-size:12px;letter-spacing:.1em;color:#9fb2c9;font-weight:700} .horoute-q{font-size:13px;font-weight:700;color:#cfe0f0;margin-bottom:10px} .horoute-c{display:block;text-decoration:none;border:1px solid rgba(255,255,255,.14);border-radius:6px;padding:11px 13px;margin-bottom:9px;transition:border-color .16s,background .16s,transform .16s} .horoute-c:hover{transform:translateX(3px)} .horoute-c b{display:block;color:#fff;font-size:14.5px} .horoute-c span{display:block;color:#9fb2c9;font-size:12px;margin-top:2px} .horoute-c.is-smart:hover{border-color:#00A9B8;background:rgba(0,169,184,.12)} .horoute-c.is-pro:hover{border-color:#008CD6;background:rgba(0,140,214,.12)} .horoute-c.is-cab:hover{border-color:#C79A3B;background:rgba(199,154,59,.12)} .horoute-all{display:inline-block;margin-top:4px;color:#3DA6E8;font-weight:700;font-size:13px;text-decoration:none} .horoute-all:hover{color:#fff} /* Audit refonte : apps « en situation » dans les cartes .offer (maison) */ .offer-viz{border-radius:6px;padding:12px;margin:12px 0 4px} .ov-smart{background:#F4F7FA;border:1px solid #CBD5E1} .ov-h{font-size:11px;font-weight:800;letter-spacing:.04em;color:#526277;margin-bottom:8px} .ov-step{display:flex;align-items:center;gap:9px;font-size:13px;color:#0F1319;padding:4px 0} .ov-step span{width:18px;height:18px;flex:none;border-radius:50%;display:grid;place-items:center;font-size:11px;font-weight:800;color:#fff} .ov-step.done span{background:#0C8C67}.ov-step.now span{background:#00A9B8} .ov-step.done{color:#526277;text-decoration:line-through} .ov-bar{height:6px;background:#EAF7FC;border-radius:6px;margin-top:8px;overflow:hidden} .ov-bar i{display:block;height:100%;width:66%;background:#00A9B8;border-radius:6px} .ov-pro{background:#0F1319;display:flex;align-items:center;gap:14px} .ov-ring{--p:70;width:60px;height:60px;flex:none;border-radius:50%;background:conic-gradient(#008CD6 calc(var(--p)*1%),rgba(255,255,255,.12) 0);display:grid;place-items:center} .ov-ring b{width:44px;height:44px;border-radius:50%;background:#0F1319;color:#fff;display:grid;place-items:center;font-size:16px;font-weight:800} .ov-att{flex:1} .ov-att .ov-t{font-size:10px;font-weight:700;letter-spacing:.05em;color:#9fb2c9;margin-bottom:5px} .ov-att .ov-l{display:flex;align-items:center;gap:7px;font-size:12px;color:#dfe9f5;margin-bottom:4px} .ov-att .ov-l::before{content:"";width:6px;height:6px;border-radius:50%;flex:none;background:#94a3b8} .ov-att .ov-l.c::before{background:#C93C4B}.ov-att .ov-l.m::before{background:#B96B00} /* ===== 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%)} } /* Boutons secondaires lisibles dans la section sombre .zsys (fix contraste 20/08) */ .zsys .btn--secondary{--btn-fg:#eaf2fb;--btn-bd:rgba(255,255,255,.42)} .zsys .btn--secondary:hover{--btn-bg:#fff;--btn-fg:var(--midnight);--btn-bd:#fff} .zsys .btn--tertiary{--btn-fg:#eaf7fc} /* Hero mobile L'Affut : crop portrait centre serval */ @media(max-width:768px){ .hero.canvas{background-position:center!important;background-size:cover!important;min-height:82vh} .hero.canvas::after{background:linear-gradient(180deg,rgba(8,11,16,.62) 0%,rgba(8,11,16,.42) 46%,rgba(8,11,16,.40) 66%,rgba(8,11,16,.70) 100%)} .hero h1,.hero .lead{text-shadow:0 2px 16px rgba(0,0,0,.6)} .hero .wrap{padding-top:30px} } /* ===== L'Affut composants v2 : anti-slop (asymetrie, cotes mono, lampes, filets) ===== */ /* En-tetes de section : ligne de guet a gauche, JAMAIS centre */ .sec-head{max-width:64ch;margin-left:0;margin-right:auto;text-align:left;align-items:flex-start;padding-left:20px;border-left:2px solid var(--accent);gap:12px} .sec-head h2{letter-spacing:-.015em} .zsys-head{max-width:64ch;margin-left:0;margin-right:auto;text-align:left;padding-left:20px;border-left:2px solid var(--accent)} /* Eyebrows / cotes : la voix mono du fait, pas un gros label marketing */ .sec-num,.zsys-eyebrow{font-family:var(--mono);font-weight:500;letter-spacing:.08em;color:var(--accent-deep);text-transform:uppercase;font-size:12.5px} .section--dark .sec-num,.section--deep .sec-num,.section--dark .zsys-eyebrow{color:var(--accent)} /* Bandeau reperes : numeros decoratifs retires, pastilles -> filets mono */ .ref4-tag{background:transparent;border:1px solid var(--border);color:var(--ink);border-radius:4px;font-family:var(--mono);font-size:12px;letter-spacing:.01em;font-weight:500} /* La lampe, jamais la coche : mini-plan Smart */ .ov-step span{font-size:0!important;width:11px;height:11px;border-radius:50%} .ov-step.done span{background:var(--ok)} .ov-step.now span{background:var(--accent);font-size:10.5px!important;width:18px;height:18px;color:#fff} .ov-step.done{text-decoration:none;color:var(--muted)} /* Coche du bandeau confiance -> lampe pleine */ .cbanner .chk{background:transparent;border:0;display:grid;place-items:center;width:20px;height:20px} .cbanner .chk svg{display:none} .cbanner .chk::before{content:"";display:block;width:12px;height:12px;border-radius:50%;background:var(--ok)} /* Grands chiffres de preuve : la voix chaude Fraunces */ .kf-v{font-family:var(--display)} /* ===== L'Affut : texte justifie (cesure FR pour eviter les rivieres) ===== */ .lead,.sec-head p,.zsys-head p,.cx-r p,.urgence .u-tx p,.offer>p:not(.who):not(.tag),.ebrick p,.eco-infra,.final p{ text-align:justify;text-justify:inter-word;-webkit-hyphens:auto;hyphens:auto; } /* ===== L'Affut : Console de reperes verifiables (bespoke instrument) ===== */ .rperes{position:relative;padding:0;background:var(--deep);color:#fff;overflow:hidden;isolation:isolate} .rperes::before{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:22px 22px;background-position:center; -webkit-mask-image:radial-gradient(120% 100% at 22% 40%,transparent 0%,transparent 30%,#000 100%); mask-image:radial-gradient(120% 100% at 22% 40%,transparent 0%,transparent 30%,#000 100%);opacity:.6} .rp-grid{display:grid;grid-template-columns:1fr;gap:34px;padding:58px 24px} @media(min-width:920px){.rp-grid{grid-template-columns:minmax(260px,340px) 1fr;gap:60px;align-items:start;padding:72px 24px}} .rp-head{position:relative;padding-left:20px;border-left:2px solid var(--accent)} .rp-cote{font-family:var(--mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--accent);display:inline-flex;align-items:center;gap:9px;margin:0 0 16px} .rp-cote .rp-eye{width:16px;height:16px;position:relative;flex:none} .rp-cote .rp-eye i{position:absolute;inset:0;border:1.5px solid var(--accent);border-radius:50%;opacity:.5} .rp-cote .rp-eye b{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:2.5px;height:9px;border-radius:2px;background:var(--accent)} .rp-title{font-family:var(--display);font-weight:700;font-size:clamp(24px,3vw,34px);color:#fff;line-height:1.04;letter-spacing:-.015em;margin:0 0 14px} .rp-sub{color:#9fb4cf;font-size:15px;line-height:1.6;max-width:40ch;margin:0;text-align:justify;hyphens:auto} .rp-legend{margin-top:20px;display:flex;flex-direction:column;gap:7px;font-family:var(--mono);font-size:12px;color:#8fa3bd} .rp-legend span{display:flex;align-items:center;gap:8px} .rp-rows{list-style:none;margin:0;padding:0;border-top:1px solid rgba(255,255,255,.11)} .rp-row{position:relative;display:grid;grid-template-columns:12px 132px 1fr auto;gap:18px;align-items:baseline;padding:17px 8px 17px 4px;border-bottom:1px solid rgba(255,255,255,.11);transition:background .25s cubic-bezier(.22,.61,.36,1)} .rp-row:hover{background:rgba(58,166,232,.06)} .rp-row::after{content:"";position:absolute;left:0;bottom:-1px;height:2px;width:0;background:var(--fauve,#E0872A);transition:width .12s cubic-bezier(.7,0,.2,1)} .rp-row:hover::after{width:34px} .rp-lamp{width:9px;height:9px;border-radius:50%;flex:none;align-self:center} .rp-lamp.ok{background:var(--ok)}.rp-lamp.sig{background:var(--accent)}.rp-lamp.fr{background:#e7edf3} .rp-k{font-family:var(--mono);font-size:12px;letter-spacing:.11em;text-transform:uppercase;color:#8fa3bd;align-self:center} .rp-v{color:#dbe6f2;font-size:15px;line-height:1.5} .rp-v b{color:#fff;font-weight:600} .rp-tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:2px} .rp-tag{font-family:var(--mono);font-size:12px;letter-spacing:.02em;color:#cbd5e1;border:1px solid rgba(255,255,255,.2);border-radius:4px;padding:2px 7px} .rp-src{font-family:var(--mono);font-size:12px;color:var(--accent);border:1px solid rgba(58,166,232,.42);border-radius:4px;padding:4px 9px;white-space:nowrap;align-self:center;transition:background .2s,border-color .2s} .rp-src:hover{background:rgba(58,166,232,.14);border-color:var(--accent);color:#fff} .rp-src.na{color:#8fa3bd;border-style:dashed;border-color:rgba(255,255,255,.2)} /* Sonar : une ouverture au scroll (perception serval), jamais en boucle */ .rp-sonar{position:absolute;left:-3px;top:-4px;width:44px;height:44px;pointer-events:none} .rp-sonar span{position:absolute;left:0;top:0;width:8px;height:8px;border:1px solid var(--accent);border-radius:50%;opacity:0} @media(prefers-reduced-motion:no-preference){ @keyframes rpPing{0%{width:6px;height:6px;opacity:.8}100%{width:44px;height:44px;opacity:0}} .rperes.rp-go .rp-sonar span{animation:rpPing 1.5s ease-out forwards} .rperes.rp-go .rp-sonar span:nth-child(2){animation-delay:.4s} } @media(max-width:620px){.rp-row{grid-template-columns:12px 1fr;row-gap:6px}.rp-k{grid-column:2}.rp-v{grid-column:2}.rp-src{grid-column:2;justify-self:start;margin-top:4px}} /* ===== L'Affut : Releve de preuve (KPI -> instrument, filets + lampes + Fraunces) ===== */ .kfig{grid-template-columns:repeat(4,1fr)!important;gap:1px!important;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.12);border-radius:6px;overflow:hidden;margin-top:26px} .kf{text-align:left!important;padding:22px 22px 20px!important;border-left:0!important;background:var(--deep)} .section--dark .kf,.section--deep .kf{background:var(--deep)} .kf-v{font-family:var(--display)!important;color:#E7EDF3!important;font-size:clamp(30px,4.2vw,46px);line-height:1;letter-spacing:-.01em} .section--dark .kf-v,.section--deep .kf-v{color:#E7EDF3!important} /* L ENCRE DES LISTES DANS LES SECTIONS SOMBRES. Mesure du 02/09/2026 : `.split ul li` posait `var(--ink)`, l'encre du theme clair, et s'affichait a 1,07 de contraste sur le fond de `.section--deep`. Invisible, sans qu'aucune erreur ne se leve. La feuille savait deja inverser (voir `.section--deep` plus haut) : cette regle-la avait ete oubliee. Meme forme que les dix autres inversions, pour ne pas creer une onzieme facon de faire la meme chose. */ .section--dark .split ul li,.section--deep .split ul li, .section--dark .testi .quote,.section--deep .testi .quote{color:var(--ink-invert)} .kf:first-child .kf-v,.section--dark .kf:first-child .kf-v,.section--deep .kf:first-child .kf-v{color:var(--fauve,#E0872A)!important} .kf-l{color:#9fb4cf!important;font-family:var(--mono);font-size:12px;letter-spacing:.03em;line-height:1.45;margin-top:13px;text-transform:none} .kf-l::before{content:"\25CF ";color:var(--accent);font-size:9px} .kf:first-child .kf-l::before{color:var(--fauve,#E0872A)} @media(max-width:720px){.kfig{grid-template-columns:repeat(2,1fr)!important}} /* ============ L'Affut : sections reconstruites (bespoke) ============ */ /* --- eco --- */ .eco{ background:var(--surface); color:var(--ink); padding:88px 24px; } .eco *{box-sizing:border-box;} /* En-tete : ligne de guet, aligne a gauche */ .eco-tete{ max-width:820px; border-left:2px solid var(--accent); padding-left:20px; margin:0 0 56px; } .eco-cote{ font-family:var(--mono); font-size:12px; letter-spacing:.1em; text-transform:uppercase; color:var(--accent-deep); margin:0 0 14px; } .eco-titre{ font-family:var(--display); font-weight:600; font-size:clamp(26px,3.4vw,40px); line-height:1.12; margin:0 0 16px; color:var(--ink); } .eco-sous{ font-family:var(--font); font-size:16px; line-height:1.6; color:var(--muted); margin:0; max-width:60ch; } .eco-cote--sombre{color:var(--accent-deep);margin:0 0 22px;} /* Sequence : frise d'instrument sur rail */ .eco-seq-bloc{margin:0 0 64px;} .eco-seq{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(5,1fr); border-top:1px solid var(--border); } .eco-step{ position:relative; padding:28px 20px 4px; border-left:1px solid var(--border); } .eco-step:first-child{border-left:0;} .eco-lamp{ display:inline-block; width:9px;height:9px; border-radius:50%; background:var(--accent); flex:0 0 auto; } .eco-lamp--fauve{background:var(--fauve);} .eco-lamp--ok{background:var(--ok);} .eco-step > .eco-lamp{ position:absolute; top:-5px; left:20px; } .eco-num{ display:block; font-family:var(--mono); font-size:13px; letter-spacing:.06em; color:var(--accent-deep); margin:0 0 10px; } .eco-num--fauve{color:var(--fauve-deep);} .eco-step-t{ font-family:var(--display); font-weight:600; font-size:19px; line-height:1.15; margin:0 0 8px; color:var(--ink); } .eco-step-d{ font-family:var(--font); font-size:14px; line-height:1.55; color:var(--muted); margin:0; } /* Briques : filets releves, cote mono + lampe */ .eco-briques-bloc{margin:0 0 40px;} /* CINQ BRIQUES, PAS QUATRE. Une grille laisse la derniere seule et collee a gauche des que le compte ne tombe pas juste ; un enchainement souple CENTRE la rangee incomplete. Mesure : 1425 px donne 5 sur une rangee, 1009 px donne 4 + 1 centree, 805 px donne 3 + 2 centrees. Vrai pour six briques comme pour cinq, sans y revenir. */ .eco-briques{ list-style:none; margin:0;padding:0; display:flex; flex-wrap:wrap; justify-content:center; gap:16px; } .eco-briques > li{flex:1 1 200px;max-width:264px;} .eco-briques > li{display:flex;} .eco-brique{ display:flex; flex-direction:column; width:100%; text-decoration:none; background:var(--paper); border:1px solid var(--border); border-radius:6px; padding:22px 20px 24px; transition:border-color .16s ease; } .eco-brique:hover, .eco-brique:focus-visible{ border-color:var(--accent); outline:none; } .eco-brique-tete{ display:flex; align-items:center; gap:9px; margin:0 0 18px; } .eco-brique-cote{ font-family:var(--mono); font-size:12px; letter-spacing:.1em; text-transform:uppercase; color:var(--accent-deep); } .eco-brique-t{ position:relative; display:inline-block; align-self:flex-start; font-family:var(--display); font-weight:600; font-size:20px; line-height:1.15; margin:0 0 10px; color:var(--ink); } /* Frappe : soulignement fauve court au survol */ .eco-brique-t::after{ content:""; position:absolute; left:0;bottom:-4px; width:0;height:2px; background:var(--fauve); transition:width .12s cubic-bezier(.7,0,.2,1); } .eco-brique:hover .eco-brique-t::after, .eco-brique:focus-visible .eco-brique-t::after{width:34px;} .eco-brique-d{ font-family:var(--font); font-size:14px; line-height:1.55; color:var(--muted); margin:0; } /* Releve infrastructure : filet a lampe */ .eco-infra{ display:flex; align-items:center; gap:12px; margin:0; padding:16px 20px; border:1px solid var(--border); border-radius:6px; background:var(--paper); } .eco-infra-txt{ font-family:var(--mono); font-size:13px; letter-spacing:.02em; color:var(--accent-deep); } @media (max-width:900px){ .eco-seq{grid-template-columns:repeat(1,1fr);border-top:0;} .eco-step{ border-left:2px solid var(--border); border-top:0; padding:14px 0 14px 22px; } .eco-step:first-child{border-left:2px solid var(--border);} .eco-step > .eco-lamp{top:18px;left:-5px;} /* Les ruptures de colonnes ne servent plus : la largeur de base (200 px) fait le passage de cinq a quatre, puis a trois, toute seule. */ } @media (max-width:620px){ .eco{padding:64px 18px;} /* Le plafond de 264 px empeche une carte solitaire de s'etirer sur toute la largeur. Sur telephone il la RETRECIT au lieu de la contenir : 264 px sur 390 px d'ecran laissaient 63 px perdus de chaque cote. Ici, une seule carte par rangee de toute facon. */ .eco-briques > li{max-width:none;} .eco-tete{margin-bottom:40px;} .eco-infra{align-items:flex-start;} } @media (prefers-reduced-motion:reduce){ .eco-brique, .eco-brique-t::after{transition:none;} } /* --- app --- */ .ap-section{ background:var(--surface); color:var(--ink); padding:88px 24px; } /* En-tete : ligne de guet, aligne a gauche */ .ap-head{ max-width:1180px; margin:0 auto 44px; border-left:2px solid var(--accent); padding-left:20px; } .ap-cote{ margin:0 0 14px; font-family:var(--mono); font-size:12px; letter-spacing:.1em; text-transform:uppercase; color:var(--accent-deep); } .ap-title{ margin:0; font-family:var(--display); font-weight:600; font-size:clamp(26px,3.4vw,40px); line-height:1.1; color:var(--ink); } .ap-sub{ margin:14px 0 0; max-width:60ch; font-family:var(--font); font-size:16px; line-height:1.55; color:var(--muted); } /* Grille des deux panneaux */ .ap-grid{ max-width:1180px; margin:0 auto; display:grid; grid-template-columns:1fr 1fr; gap:26px; } /* Panneau = fenetre produit, filet mat, rayon 6px, zero ombre molle */ .ap-panel{ background:var(--paper); border:1px solid var(--border); border-radius:6px; overflow:hidden; display:flex; flex-direction:column; transition:border-color .16s ease; } .ap-panel:hover{ border-color:var(--accent-deep); } /* Barre d'instrument de la fenetre */ .ap-bar{ display:flex; align-items:center; justify-content:space-between; gap:14px; padding:11px 18px; border-bottom:1px solid var(--border); background:var(--surface); } .ap-bar-cote{ font-family:var(--mono); font-size:12px; letter-spacing:.1em; text-transform:uppercase; color:var(--accent-deep); } .ap-bar-lamps{ display:inline-flex; gap:7px; } .ap-body{ padding:24px 24px 26px; display:flex; flex-direction:column; gap:18px; flex:1; } .ap-panel-t{ margin:0; font-family:var(--display); font-weight:600; font-size:clamp(19px,1.9vw,23px); line-height:1.22; color:var(--ink); } .ap-who{ margin:0; font-family:var(--font); font-size:14px; line-height:1.5; color:var(--muted); } .ap-who-cote{ display:inline-block; margin-right:8px; font-family:var(--mono); font-size:12px; letter-spacing:.1em; color:var(--accent-deep); vertical-align:1px; } /* Lampes : pastilles pleines, jamais de coche */ .ap-lamp{ width:9px; height:9px; border-radius:50%; display:inline-block; flex:0 0 9px; } .ap-lamp--ok{ background:var(--ok); } .ap-lamp--accent{ background:var(--accent); } .ap-lamp--warn{ background:var(--warn); } .ap-lamp--crit{ background:var(--crit); } .ap-lamp--live{ } /* Apercu = ecran d'instrument sombre, trame de coordonnees */ .ap-preview{ position:relative; background:var(--deep); border-radius:6px; padding:16px 18px; overflow:hidden; } .ap-preview::before{ content:""; position:absolute; inset:0; background-image: linear-gradient(rgba(58,166,232,.12) 1px,transparent 1px), linear-gradient(90deg,rgba(58,166,232,.12) 1px,transparent 1px); background-size:22px 22px; -webkit-mask-image:radial-gradient(circle at 26% 18%,#000,transparent 82%); mask-image:radial-gradient(circle at 26% 18%,#000,transparent 82%); pointer-events:none; } .ap-preview > *{ position:relative; z-index:1; } /* Main-courante (Smart) */ .ap-prev-head{ display:flex; align-items:center; gap:10px; margin-bottom:12px; } .ap-prev-cote{ font-family:var(--mono); font-size:12px; letter-spacing:.12em; color:var(--accent); } .ap-prev-tag{ font-family:var(--mono); font-size:12px; letter-spacing:.1em; color:var(--muted-invert); border:1px solid rgba(255,255,255,.11); border-radius:4px; padding:2px 7px; } .ap-log{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; } .ap-log-row{ display:flex; align-items:center; gap:12px; padding:10px 0; border-top:1px solid rgba(255,255,255,.09); } .ap-log-row:first-child{ border-top:0; } .ap-log-txt{ flex:1; font-family:var(--font); font-size:13.5px; line-height:1.4; color:#E7EDF3; } .ap-log-state{ font-family:var(--mono); font-size:12px; letter-spacing:.1em; color:var(--muted-invert); } .ap-log-state--now{ color:var(--accent); } /* Cadran (Pro) */ .ap-preview--dial{ display:flex; align-items:stretch; gap:18px; } .ap-dial{ display:flex; flex-direction:column; align-items:flex-start; justify-content:center; padding-right:18px; border-right:1px solid rgba(255,255,255,.11); } .ap-dial-cote{ font-family:var(--mono); font-size:12px; letter-spacing:.12em; color:var(--accent); } /* Le seul accent chaud de la section : la valeur qui decide */ .ap-dial-score{ font-family:var(--display); font-weight:600; font-size:54px; line-height:1; color:var(--fauve); margin-top:4px; } .ap-attn{ flex:1; display:flex; flex-direction:column; justify-content:center; } .ap-attn-cote{ margin:0 0 10px; font-family:var(--mono); font-size:12px; letter-spacing:.1em; color:var(--muted-invert); } .ap-attn-list{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:9px; } .ap-attn-row{ display:flex; align-items:center; gap:10px; } .ap-attn-txt{ font-family:var(--font); font-size:13.5px; line-height:1.35; color:#E7EDF3; } /* Puces : releve a filet, jamais de coche */ .ap-feats{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:11px; } .ap-feat{ position:relative; padding-left:20px; font-family:var(--font); font-size:14.5px; line-height:1.5; color:var(--ink); text-align:justify; hyphens:auto; } .ap-feat::before{ content:""; position:absolute; left:0; top:.66em; width:11px; height:2px; border-radius:1px; background:var(--accent-deep); } /* Cote prix, releve mono sous filet */ .ap-price{ margin:2px 0 0; padding-top:15px; border-top:1px solid var(--border); font-family:var(--mono); font-size:13px; letter-spacing:.01em; color:var(--accent-deep); } .ap-cta{ margin-top:auto; padding-top:4px; } .ap-arrow{ display:inline-block; margin-left:4px; transition:transform .12s cubic-bezier(.7,0,.2,1); } .ap-cta .btn:hover .ap-arrow{ transform:translateX(3px); } /* Responsive */ @media (max-width:900px){ .ap-grid{ grid-template-columns:1fr; } } @media (max-width:620px){ .ap-section{ padding:60px 18px; } .ap-body{ padding:20px 18px 22px; } .ap-preview--dial{ flex-direction:column; gap:14px; } .ap-dial{ border-right:0; border-bottom:1px solid rgba(255,255,255,.11); padding-right:0; padding-bottom:14px; } .ap-dial-score{ font-size:46px; } .ap-feat{ text-align:left; } } @media (prefers-reduced-motion:reduce){ .ap-panel, .ap-arrow, .ap-cta .btn:hover .ap-arrow{ transition:none; transform:none; } } /* --- cdx --- */ .cx{ position:relative; background:var(--deep); color:var(--muted-invert); padding:clamp(56px,8vw,104px) 24px; overflow:hidden; isolation:isolate; } .cx::before{ content:""; position:absolute; inset:0; z-index:-1; background-image: linear-gradient(rgba(58,166,232,.12) 1px, transparent 1px), linear-gradient(90deg, rgba(58,166,232,.12) 1px, transparent 1px); background-size:22px 22px; -webkit-mask-image:radial-gradient(120% 92% at 28% 18%, #000, transparent 74%); mask-image:radial-gradient(120% 92% at 28% 18%, #000, transparent 74%); pointer-events:none; } .cx-wrap{ position:relative; max-width:1080px; margin:0 auto; display:grid; grid-template-columns:1.05fr 1fr; gap:clamp(32px,5vw,72px); align-items:start; } /* Cote mono */ .cx-cote{ font-family:var(--mono); font-size:12px; letter-spacing:.1em; text-transform:uppercase; color:var(--accent); display:flex; align-items:center; gap:10px; margin:0 0 22px; } .cx-cote--right{ margin:30px 0 14px; } /* Lampe */ .cx-lamp{ width:9px; height:9px; border-radius:50%; flex:0 0 auto; background:var(--accent); } .cx-lamp--sig{ background:var(--accent); } .cx-lamp--fauve{ background:var(--fauve); } .cx-lamp--ok{ background:var(--ok); } .cx-lamp--warn{ background:var(--warn); } /* Ligne de guet + maxime */ .cx-guet{ border-left:2px solid var(--accent); padding-left:20px; margin:0; text-align:left; } .cx-maxime{ font-family:var(--display); font-weight:400; color:#E7EDF3; font-size:clamp(26px,4vw,40px); line-height:1.14; letter-spacing:-.01em; margin:0; } .cx-accent{ color:var(--accent); font-style:normal; } /* Right column */ .cx-lede{ font-family:var(--font); font-size:clamp(15px,1.6vw,17px); line-height:1.6; color:var(--muted-invert); text-align:justify; hyphens:auto; margin:0; } /* Volets */ .cx-volets{ list-style:none; margin:0; padding:0; border-top:1px solid rgba(255,255,255,.11); } .cx-volet{ position:relative; display:flex; align-items:center; gap:12px; padding:13px 2px; border-bottom:1px solid rgba(255,255,255,.11); } .cx-volet-name{ font-family:var(--font); font-size:15px; color:#E7EDF3; } .cx-volet .cx-src{ margin-left:auto; } .cx-volet::after{ content:""; position:absolute; left:21px; bottom:9px; height:2px; width:0; background:var(--fauve); transition:width .12s cubic-bezier(.7,0,.2,1); } .cx-volet:hover::after{ width:36px; } /* Releve source pastille */ .cx-src{ font-family:var(--mono); font-size:12px; letter-spacing:.08em; text-transform:uppercase; color:var(--accent); border:1px solid rgba(58,166,232,.32); border-radius:6px; padding:2px 8px; white-space:nowrap; } /* Editions */ .cx-editions{ display:grid; gap:12px; } .cx-edi{ border:1px solid rgba(255,255,255,.11); border-radius:6px; padding:14px 16px; background:rgba(255,255,255,.02); } .cx-edi-h{ display:flex; align-items:center; gap:10px; margin-bottom:8px; } .cx-edi-name{ font-family:var(--font); font-size:15px; color:#E7EDF3; } .cx-edi-state{ margin-left:auto; font-family:var(--mono); font-size:12px; letter-spacing:.08em; text-transform:uppercase; color:var(--ok); } .cx-edi-state--warn{ color:var(--warn); } .cx-edi-meta{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin:0; font-family:var(--font); font-size:13px; color:var(--muted-invert); } .cx-num{ font-family:var(--display); font-weight:400; font-size:24px; line-height:1; color:#E7EDF3; } .cx-cta{ margin-top:26px; } /* Responsive */ @media (max-width:620px){ .cx-wrap{ grid-template-columns:1fr; gap:36px; } .cx-cote--right{ margin-top:26px; } .cx-volet .cx-src, .cx-edi-state{ margin-left:auto; } .cx-cta{ display:block; text-align:center; } } @media (prefers-reduced-motion:reduce){ .cx-volet::after{ transition:none; } } /* --- urg --- */ .ur{ --ur-line: rgba(201,60,75,.16); } .ur .ur-band{ position:relative; background:var(--deep); border:1px solid rgba(255,255,255,.11); border-left:3px solid var(--crit); border-radius:6px; overflow:hidden; padding:34px 40px 34px 44px; } /* trame de coordonnees teintee crit = poste de veille en alerte */ .ur .ur-band::before{ content:""; position:absolute; inset:0; background-image: linear-gradient(var(--ur-line) 1px, transparent 1px), linear-gradient(90deg, var(--ur-line) 1px, transparent 1px); background-size:22px 22px; -webkit-mask-image:radial-gradient(120% 130% at 92% 0%, #000 0%, transparent 62%); mask-image:radial-gradient(120% 130% at 92% 0%, #000 0%, transparent 62%); pointer-events:none; } .ur .ur-rail{ position:absolute; top:0; bottom:0; left:0; width:3px; background:var(--crit); pointer-events:none; } .ur .ur-inner{ position:relative; } /* releve d'etat mono */ .ur .ur-head{ display:flex; align-items:center; gap:12px; margin-bottom:20px; } .ur .ur-lamp{ width:9px; height:9px; border-radius:50%; background:var(--crit); box-shadow:0 0 0 4px rgba(201,60,75,.16); flex:0 0 auto; animation:ur-pulse 1.5s cubic-bezier(.7,0,.2,1) infinite; } @keyframes ur-pulse{ 0%,100%{ box-shadow:0 0 0 4px rgba(201,60,75,.16); } 50%{ box-shadow:0 0 0 7px rgba(201,60,75,.04); } } .ur .ur-cote{ font-family:var(--mono); font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--crit); } .ur .ur-statut{ margin-left:auto; display:inline-flex; align-items:center; gap:7px; font-family:var(--mono); font-size:12px; letter-spacing:.08em; text-transform:uppercase; color:var(--muted-invert); } .ur .ur-statut-dot{ width:7px; height:7px; border-radius:50%; background:var(--ok); flex:0 0 auto; } .ur .ur-grid{ display:grid; grid-template-columns:1fr auto; gap:24px 48px; align-items:center; } .ur .ur-corps{ min-width:0; } /* ligne de guet: filet crit a gauche, titre aligne a gauche */ .ur .ur-titre{ font-family:var(--display); color:var(--paper); font-size:clamp(1.5rem, 1.1rem + 1.6vw, 2.15rem); line-height:1.12; margin:0 0 14px; padding-left:20px; border-left:2px solid var(--crit); } .ur .ur-texte{ font-family:var(--font); color:var(--muted-invert); font-size:1rem; line-height:1.6; margin:0; max-width:60ch; text-align:justify; hyphens:auto; } .ur .ur-fort{ color:var(--paper); font-weight:700; } .ur .ur-action{ display:flex; flex-direction:column; align-items:flex-start; gap:10px; flex:0 0 auto; } .ur .ur-cta{ display:inline-flex; align-items:center; gap:10px; } .ur .ur-fleche{ font-family:var(--mono); transition:transform .12s cubic-bezier(.7,0,.2,1); } .ur .ur-cta:hover .ur-fleche{ transform:translateX(4px); } .ur .ur-note{ font-family:var(--mono); font-size:12px; letter-spacing:.06em; color:var(--muted-invert); padding-left:2px; } @media (max-width:620px){ .ur .ur-band{ padding:26px 20px 26px 22px; } .ur .ur-head{ flex-wrap:wrap; gap:10px; margin-bottom:16px; } .ur .ur-statut{ margin-left:0; width:100%; } .ur .ur-grid{ grid-template-columns:1fr; gap:22px; } .ur .ur-titre{ padding-left:16px; } .ur .ur-texte{ text-align:left; } .ur .ur-action{ align-items:stretch; } .ur .ur-cta{ justify-content:center; width:100%; } .ur .ur-note{ text-align:center; } } @media (prefers-reduced-motion:reduce){ .ur .ur-lamp{ animation:none; } .ur .ur-fleche{ transition:none; } } /* --- cnf --- */ .cf{background:var(--surface);color:var(--ink);padding:88px 24px} .cf-wrap{max-width:920px;margin:0 auto} .cf-tete{border-left:2px solid var(--accent);padding-left:20px;text-align:left;max-width:760px} .cf-cote{display:block;font-family:var(--mono);font-size:12px;font-weight:600;letter-spacing:.1em;color:var(--accent-deep);text-transform:uppercase;margin-bottom:14px} .cf-titre{font-family:var(--display);font-weight:600;font-size:clamp(28px,4.4vw,42px);line-height:1.08;letter-spacing:-.01em;margin:0 0 16px} .cf-sous{font-family:var(--font);font-size:16px;line-height:1.62;color:var(--muted);margin:0;text-align:justify;hyphens:auto} .cf-releve{margin-top:44px;border:1px solid var(--border);border-radius:6px;background:var(--paper);overflow:hidden} .cf-ligne{display:grid;grid-template-columns:auto 132px 1fr auto;align-items:center;gap:18px;padding:18px 22px;border-top:1px solid var(--border);position:relative} .cf-ligne:first-child{border-top:0} .cf-lampe{width:9px;height:9px;border-radius:50%;flex:none;display:inline-block;box-shadow:0 0 0 3px rgba(12,140,103,.12)} .cf-lampe--ok{background:var(--ok)} .cf-label{font-family:var(--mono);font-size:12px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--accent-deep)} .cf-fait{font-family:var(--font);font-size:15px;line-height:1.5;color:var(--ink)} .cf-src{justify-self:end;font-family:var(--mono);font-size:12px;letter-spacing:.04em;text-transform:lowercase;color:var(--accent-deep);text-decoration:none;white-space:nowrap;border:1px solid var(--border);border-radius:6px;padding:5px 10px;position:relative} .cf-src span{position:relative;display:inline-block;transition:transform .12s cubic-bezier(.7,0,.2,1)} .cf-src::after{content:"";position:absolute;left:10px;bottom:4px;height:1.5px;width:0;background:var(--fauve);transition:width .12s cubic-bezier(.7,0,.2,1)} .cf-src:hover::after,.cf-src:focus-visible::after{width:calc(100% - 30px)} .cf-src:hover span{transform:translateX(3px)} .cf-src:focus-visible{outline:2px solid var(--accent);outline-offset:2px} .cf-src--eval{color:var(--muted);border-style:dotted;pointer-events:none} .cf-src--eval::after{display:none} .cf-pied{margin-top:28px} @media (max-width:620px){ .cf{padding:64px 18px} .cf-releve{margin-top:32px} .cf-ligne{grid-template-columns:auto 1fr;grid-template-areas:"lampe label" "fait fait" "src src";gap:8px 14px;padding:18px} .cf-lampe{grid-area:lampe} .cf-label{grid-area:label} .cf-fait{grid-area:fait} .cf-src{grid-area:src;justify-self:start;margin-top:4px} .cf-src:hover span{transform:none} } @media (prefers-reduced-motion:reduce){ .cf-src span,.cf-src::after{transition:none} .cf-src:hover span{transform:none} } /* --- fin --- */ .fn-final{ position:relative; overflow:hidden; background:var(--deep); color:var(--muted-invert); border-top:1px solid rgba(255,255,255,.11); padding:88px 24px; } .fn-final .fn-grid{ position:absolute; inset:0; background-image: linear-gradient(to right, rgba(58,166,232,.12) 1px, transparent 1px), linear-gradient(to bottom, rgba(58,166,232,.12) 1px, transparent 1px); background-size:22px 22px; -webkit-mask-image:radial-gradient(circle at 30% 40%, #000 0%, transparent 72%); mask-image:radial-gradient(circle at 30% 40%, #000 0%, transparent 72%); pointer-events:none; } .fn-final .fn-inner{ position:relative; max-width:880px; margin:0 auto; } .fn-final .fn-head{ display:flex; align-items:center; justify-content:space-between; gap:16px; padding-bottom:22px; margin-bottom:26px; border-bottom:1px solid rgba(255,255,255,.11); } .fn-final .fn-cote{ margin:0; font-family:var(--mono); font-size:12px; letter-spacing:.1em; text-transform:uppercase; color:var(--accent); } .fn-final .fn-veille{ display:inline-flex; align-items:center; gap:8px; font-family:var(--mono); font-size:12px; letter-spacing:.08em; text-transform:uppercase; color:var(--muted-invert); white-space:nowrap; } .fn-final .fn-lamp{ width:9px; height:9px; border-radius:50%; background:var(--ok); } @keyframes fn-pulse{ 0%,100%{opacity:1;} 50%{opacity:.45;} } .fn-final .fn-body{ border-left:2px solid var(--accent); padding-left:20px; text-align:left; } .fn-final .fn-title{ margin:0 0 16px; font-family:var(--display); font-weight:500; font-size:clamp(2rem,4.4vw,3rem); line-height:1.06; letter-spacing:-.01em; color:var(--paper); } .fn-final .fn-lede{ margin:0 0 30px; max-width:60ch; font-family:var(--font); font-size:1.0625rem; line-height:1.62; color:var(--muted-invert); text-align:justify; hyphens:auto; } .fn-final .fn-actions{ display:flex; flex-wrap:wrap; gap:14px; align-items:center; } .fn-final .fn-releve{ display:flex; align-items:baseline; gap:10px; margin:30px 0 0; padding-top:18px; border-top:1px solid rgba(255,255,255,.11); font-family:var(--mono); font-size:12px; letter-spacing:.06em; } .fn-final .fn-releve-k{ text-transform:uppercase; color:var(--accent); } .fn-final .fn-releve-v{ font-family:var(--display); font-size:1.35rem; letter-spacing:0; color:var(--paper); } .fn-final .fn-releve-s{ text-transform:uppercase; color:var(--muted-invert); opacity:.7; } @media (max-width:620px){ .fn-final{padding:60px 18px;} .fn-final .fn-head{flex-direction:row;align-items:flex-start;} .fn-final .fn-body{padding-left:16px;} .fn-final .fn-actions{flex-direction:column;align-items:stretch;} .fn-final .fn-actions .btn{width:100%;text-align:center;} .fn-final .fn-lede{text-align:left;} } @media (prefers-reduced-motion:reduce){ .fn-final .fn-lamp{animation:none;} } /* Fix largeur : contenu des sections reconstruites au gabarit 1180 centre (comme .wrap) */ .eco > * { max-width:1180px; margin-left:auto; margin-right:auto; } .cx-wrap, .cf-wrap { max-width:1180px !important; } .ur .ur-band { max-width:1180px; margin-left:auto; margin-right:auto; } .fn-final .fn-grid { max-width:1180px; margin-left:auto; margin-right:auto; } /* Fix alignement : forcer le centrage des enfants directs (certains avaient margin:0 -> decalage) */ .eco > *, .cx > *, .ur > *, .cf > *, .fn-final > *, .ap-section > * { margin-left:auto !important; margin-right:auto !important; } /* Hero L'Affut : serval libre a droite, orienteur en bande horizontale dessous (refonte hero 24/08) */ .hero .h-fig--free{min-height:clamp(300px,34vw,440px)} .horoute-band{background:#0b0f15;border-top:1px solid rgba(255,255,255,.09);border-bottom:1px solid rgba(255,255,255,.09)} .horoute-band .wrap{max-width:1180px;margin:0 auto;padding:22px 24px 26px} .hb-head{display:flex;align-items:baseline;gap:16px;flex-wrap:wrap;margin-bottom:14px} .hb-cote{display:inline-flex;align-items:center;gap:6px;font-size:11.5px;letter-spacing:.16em;color:#8ea3bd;font-weight:700} .hb-cote i{width:7px;height:7px;border-radius:50%;background:rgba(255,255,255,.26)} .hb-q{font-size:14.5px;font-weight:700;color:#cfe0f0} .hb-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px} .hb-c{display:block;text-decoration:none;border:1px solid rgba(255,255,255,.14);border-radius:6px;padding:15px 17px;background:rgba(255,255,255,.03);transition:transform .15s ease,border-color .15s ease,background .15s ease} .hb-c:hover{transform:translateY(-2px)} .hb-c b{display:block;color:#fff;font-size:15.5px} .hb-c span{display:block;color:#9fb2c9;font-size:12.5px;margin-top:3px} .hb-c.is-smart:hover{border-color:#00A9B8;background:rgba(0,169,184,.12)} .hb-c.is-pro:hover{border-color:#008CD6;background:rgba(0,140,214,.12)} .hb-c.is-cab:hover{border-color:#C79A3B;background:rgba(199,154,59,.12)} .hb-all{display:inline-block;margin-top:15px;color:#3DA6E8;font-weight:700;font-size:13px;text-decoration:none} .hb-all:hover{color:#fff} @media(max-width:820px){.hb-grid{grid-template-columns:1fr}.hero .h-fig--free{display:none}} /* ===== Fonds serval RESPONSIVE (pack 2026-08-23) : crop par ecran, AVIF->WebP ===== */ .hero.canvas{background-size:cover;background-position:center right;} @media(max-width:1399px){.hero.canvas{background-position:center right;}} @media(max-width:820px){.hero.canvas{background-position:center top !important;}} @media(max-width:520px){.hero.canvas{background-position:center top !important;}} /* Mobile : serval en BLOC DISTINCT (spec Hans) au lieu du fond (24/08) */ .hero-art-m{display:none} @media(max-width:820px){ .hero.canvas{background-image:none !important;background:#0b0f15 !important} .hero .h-fig{display:none !important} .hero-art-m{display:block;margin-top:22px;border-radius:10px;overflow:hidden;border:1px solid rgba(255,255,255,.12);box-shadow:0 20px 50px rgba(0,0,0,.45)} .hero-art-m img{width:100%;height:auto;display:block} } /* ===== nav-affut : barre de guet ===== */ .site-head nav.aff-nav-guet{position:relative} .aff-guet{position:absolute;left:0;bottom:6px;height:2px;width:0;opacity:0;pointer-events:none;border-radius:2px; background:var(--accent,#3DA6E8);box-shadow:0 0 10px color-mix(in srgb,var(--accent,#3DA6E8) 55%,transparent); transition:left .3s cubic-bezier(.4,0,.2,1),width .3s cubic-bezier(.4,0,.2,1),opacity .2s ease} .site-head nav a,.site-head nav .nav-trigger{transition:color .15s,background .15s,transform .16s cubic-bezier(.34,1.56,.64,1)} .site-head nav a.aff-active,.site-head nav .nav-group.aff-active .nav-trigger{color:#fff} .site-head nav a:hover{transform:translateY(-1px)} /* commutateur d'univers : segmente, facon salle de controle */ .eco-switch.aff-eco{margin-left:14px;padding:3px;gap:1px; border:1px solid rgba(255,255,255,.10);border-radius:8px;background:rgba(255,255,255,.035)} .eco-switch.aff-eco .sep{display:none} .eco-switch a.eco-item{display:inline-flex;align-items:center;gap:6px;padding:6px 11px;border-radius:5px; color:#9fb4cf;font-size:.8125rem;letter-spacing:.01em;transition:color .16s,background .16s} .eco-switch a.eco-item:hover{color:#fff;background:rgba(255,255,255,.05)} .eco-switch a.eco-item[aria-current]{color:#fff;background:rgba(255,255,255,.09)} .eco-switch .eco-dot{width:6px;height:6px;border-radius:50%;flex:0 0 auto; background:color-mix(in srgb,var(--h,#9fb4cf) 45%,#57677e);transition:background .2s,box-shadow .2s} .eco-switch a.eco-item:hover .eco-dot{background:var(--h,#fff)} .eco-switch a.eco-item[aria-current] .eco-dot{background:var(--h,#3DA6E8); box-shadow:0 0 0 3px color-mix(in srgb,var(--h,#3DA6E8) 26%,transparent)} /* regard du serval : un eclat balaie la silhouette, au chargement puis de loin en loin */ .site-head .brand.aff-regard{position:relative} .site-head .brand.aff-regard::after{content:"";position:absolute;inset:0;pointer-events:none; -webkit-mask:var(--aff-marque) center/contain no-repeat; mask:var(--aff-marque) center/contain no-repeat; background:linear-gradient(102deg,transparent 42%,rgba(150,214,255,.95) 50%,transparent 58%); background-size:280% 100%;background-position:135% 0;opacity:0;animation:aff-glint 6.5s ease-in-out infinite} @keyframes aff-glint{0%,100%{background-position:135% 0;opacity:0}6%{opacity:1} 16%{background-position:-45% 0;opacity:.9}23%{opacity:0}} /* la frappe : le CTA plein attrape un reflet */ .head-actions .btn.aff-frappe{position:relative;overflow:hidden} .head-actions .btn.aff-frappe .aff-sweep{position:absolute;inset:0;pointer-events:none; background:linear-gradient(105deg,transparent 42%,rgba(255,255,255,.42) 50%,transparent 58%); background-size:280% 100%;background-position:150% 0;opacity:0;animation:aff-sweep 5.5s ease-in-out infinite} @keyframes aff-sweep{0%,100%{background-position:150% 0;opacity:0}10%{opacity:1}26%{background-position:-60% 0;opacity:0}} /* compact + ligne allumee au scroll */ .site-head .wrap{transition:height .26s cubic-bezier(.4,0,.2,1)} .site-head.aff-compact .wrap{height:52px} .site-head .brand img.brand-mark{transition:height .26s cubic-bezier(.4,0,.2,1)} .site-head.aff-compact .brand img.brand-mark{height:36px} .site-head::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:1px;pointer-events:none; background:linear-gradient(90deg,transparent,color-mix(in srgb,var(--accent,#3DA6E8) 55%,transparent) 45%,transparent 80%); opacity:0;transition:opacity .3s ease} .site-head.aff-lit::after{opacity:.9} @media(max-width:980px){.aff-guet{display:none}} @media(prefers-reduced-motion:reduce){ .site-head .brand.aff-regard::after,.head-actions .btn.aff-frappe .aff-sweep{animation:none;opacity:0} .site-head nav a:hover{transform:none} } /* ===== nav-affut end ===== */ /* ===== hero-uni : serval libere partout ===== */ .hero .h-fig--free{min-height:clamp(280px,32vw,420px)} .hero-demo:not(.sd-demo){position:relative;z-index:2;margin-top:-40px} .hero-demo:not(.sd-demo) .wrap{max-width:1120px;margin:0 auto;padding:0 24px} .hero-demo:not(.sd-demo) img{width:100%;height:auto;display:block;border-radius:8px;border:1px solid rgba(255,255,255,.16);box-shadow:0 34px 90px rgba(0,0,0,.55)} .hero-demo:not(.sd-demo) .mock,.hero-demo:not(.sd-demo) .sd-card{margin-left:auto;margin-right:auto} @media(max-width:820px){.hero .h-fig--free{display:none}.hero-demo:not(.sd-demo){margin-top:16px}} /* ===== hero-uni end ===== */ /* ===== reseaux sociaux (pied de page) : LinkedIn ===== */ .foot-social{display:flex;align-items:center;gap:12px;margin:0 0 18px} .foot-social .fs-lbl{font-size:13px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:rgba(255,255,255,.55)} .foot-li{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:8px;color:rgba(255,255,255,.78);border:1px solid rgba(255,255,255,.16);background:rgba(255,255,255,.04);transition:color .18s ease,border-color .18s ease,background .18s ease,transform .18s ease} .foot-li svg{width:22px;height:22px;display:block} .foot-li:hover{color:#fff;background:#0A66C2;border-color:#0A66C2;transform:translateY(-1px)} .foot-li:focus-visible{outline:2px solid #3DA6E8;outline-offset:2px} /* ===== fin reseaux sociaux ===== */ /* =========================================================================== LES JAMBAGES DU TITRE TIENNENT DANS SA BOITE Mesure au DOM le 31/08/2026 sur la home de Smart : le H1 du heros avait un `scrollHeight` de 263 px pour un `clientHeight` de 254. Les quatre lignes a 63,6 px remplissent la boite exactement, et les jambages de « frauduleux ? » en sortent. Seize titres de la meme page debordaient ainsi, de 2 a 9 px. L AUDIT DISAIT « ROGNE OU RECOUVERT ». La mesure dit non : le paragraphe suivant commence 20 px plus bas, rien n est recouvert, et `overflow` est `visible` donc rien n est coupe. Ce qui est vrai, c est que les jambages s approchent du paragraphe de 9 px de plus que le dessin ne le prevoit. POURQUOI UN REMPLISSAGE ET NON UN INTERLIGNE. Allonger l interligne AGGRAVE le debordement, mesure a 8 px : il grandit la boite ET l espace entre les lignes. Le remplissage bas ne touche qu a la boite, et ramene le debordement a 1 px sans deplacer une seule ligne. =========================================================================== */ .hero h1 { padding-bottom: .12em; } /* =========================================================================== « POURQUOI ZERVAL » : LA CITATION ET LA CHUTE La page A propos n'avait aucun bloc de citation : on en pose un, minimal, qui n'emploie que des jetons existants. Le filet vertical remplace les guillemets decoratifs, et la legende porte ce que la citation ne dit pas. PAS D'ACCENT FAUVE ICI. Il est reserve a l'action principale ; une citation n'est pas un bouton. Le filet prend la couleur d'information. =========================================================================== */ .pq { margin: 0 0 34px; padding: 0 0 0 22px; border-left: 2px solid var(--azure, #3DA6E8); max-width: 62ch; } .pq blockquote { margin: 0 0 10px; font-family: var(--display); font-size: clamp(1.15rem, 2.1vw, 1.5rem); line-height: 1.35; color: var(--paper); } .pq figcaption { margin: 0; font-size: var(--z-t2, 14px); line-height: 1.55; color: var(--muted-invert); } .pq-chute { margin: 34px 0 0; padding: 24px 0 0; border-top: 1px solid rgba(140, 170, 210, .18); max-width: 72ch; } .pq-chute h3 { margin: 0 0 8px; font-family: var(--display); font-size: clamp(1.05rem, 1.8vw, 1.25rem); color: var(--paper); } .pq-chute h3 + p { margin: 0 0 22px; } .pq-chute p { color: var(--muted-invert); line-height: 1.6; } .pq-signature { margin: 26px 0 0; display: flex; flex-direction: column; gap: 4px; } .pq-signature strong { font-family: var(--mono, ui-monospace, monospace); font-size: 12px; letter-spacing: .22em; color: var(--paper); } .pq-signature span { font-family: var(--display); font-size: clamp(1rem, 1.7vw, 1.2rem); color: var(--azure, #3DA6E8); } /* LE BOUTON D ARRET, exige par le critere WCAG 2.2.2 : une animation qui se repete sans fin doit pouvoir etre stoppee. Il est pose par le module lui-meme, jamais laisse a la charge de la page. */ /* En lecture, le bouton propose d'ARRETER : deux barres, dessinees par un degrade plutot que par un decoupage, qui se prete mal a deux formes. */ /* A l'arret, il propose de REPRENDRE : un triangle. */ @media (max-width: 700px) { } /* QUI DEMANDE MOINS DE MOUVEMENT N EN RECOIT AUCUN. Le module ne charge deja pas la video dans ce cas ; cette regle est la ceinture de secours si une video arrivait quand meme par un autre chemin. */ @media (prefers-reduced-motion: reduce) { } /* ==================================================================== * * POURQUOI ZERVAL : LE TEXTE ET LA VIDEO, COTE A COTE * -------------------------------------------------------------------- * * La section laissait sa moitie droite vide pendant que le texte tenait * dans la gauche. La video s'y installe, contre le paragraphe qu'elle * illustre. Sous 900 px la grille retombe en une colonne : l'image passe * alors SOUS le texte, jamais a cote de lui en trop etroit. * ==================================================================== */ .pz-duo { display: grid; /* L'image prend la part la plus large : deux colonnes presque egales se lisent comme une indecision. Le texte y gagne une mesure de lecture plus courte, autour de 55 caracteres. */ grid-template-columns: minmax(0, .88fr) minmax(0, 1.12fr); /* 36 px, et non 52 : le fondu du bord gauche mange deja ~80 px. */ gap: 36px; align-items: center; } .pz-duo > .sec-head { margin-bottom: 0; } @media (max-width: 900px) { .pz-duo { grid-template-columns: 1fr; gap: 30px; } } /* -------------------------------------------------------------------- * * LA VIDEO EMERGE DU FOND, ELLE N Y EST PAS POSEE * Pas de bordure : dans une section sombre, un cadre a bord net autour * d'une image sombre se voit avant l'image. On fond les quatre bords, et * plus largement a gauche, du cote ou la couture toucherait le texte. * -------------------------------------------------------------------- */ .decor { position: relative; margin: 0; isolation: isolate; } /* Le halo azur : la couleur du reseau qui s'allume dans la video, reprise tres bas en arriere-plan. Elle lie l'image a la page. */ .decor::before { content: ""; position: absolute; inset: -10% -8%; z-index: -1; pointer-events: none; background: radial-gradient(56% 60% at 60% 46%, rgba(61,166,232,.20), transparent 72%), radial-gradient(40% 44% at 30% 74%, rgba(224,135,42,.10), transparent 76%); filter: blur(26px); } .decor-cadre { position: relative; display: grid; border-radius: 6px; overflow: hidden; background: transparent; -webkit-mask-image: linear-gradient(to right, transparent 0, #000 9%, #000 95%, transparent 100%), linear-gradient(to bottom, transparent 0, #000 6%, #000 94%, transparent 100%); -webkit-mask-composite: source-in; mask-image: linear-gradient(to right, transparent 0, #000 9%, #000 95%, transparent 100%), linear-gradient(to bottom, transparent 0, #000 6%, #000 94%, transparent 100%); mask-composite: intersect; } /* LE CADRE EST EN 4:3, PAS EN 16:9, ET C EST LA MISE EN PAGE QUI LE DICTE. Mesure a 1600 px : le bloc de texte fait 466 px de haut, l'image en 16:9 seulement 345. Cent vingt et un pixels d'ecart, et l'image flotte au milieu d'un texte plus haut qu'elle. A 614 px de large, egaler 466 px demande un rapport de 1,32 ; le 4:3 vaut 1,333, et l'ecart tombe a six pixels. LE REMPLISSAGE PAR LA HAUTEUR COUPE LES COTES, PAS LE HAUT. On perd le paysage vide a gauche et a droite. Le serval occupe la bande 40 a 78 % de la largeur ; la fenetre visible, centree a 56 %, va de 18 a 94 %. Il reste entier, et l'image y gagne en densite. */ .decor-cadre { aspect-ratio: 4 / 3; } .decor-cadre > * { grid-area: 1 / 1; width: 100%; height: 100%; display: block; object-fit: cover; object-position: 56% 50%; } /* La video prend la place de l'affiche par un fondu, jamais par un saut. */ .decor-video { opacity: 0; transition: opacity .6s ease; } .decor[data-anime="1"] .decor-video { opacity: 1; } /* LE BOUTON S EFFACE. Exige par le critere WCAG 2.2.2 (une animation qui demarre seule et dure plus de cinq secondes doit pouvoir etre arretee), il n'a pas a etre visible en permanence : une commande toujours affichee sur une image de decor la transforme en lecteur video. Il revient au survol, au focus clavier, et tant que la sequence tourne. */ .decor-cmd { position: absolute; right: 18px; /* Sans legende, le bouton revient dans l'image. */ bottom: 18px; width: 32px; height: 32px; border-radius: 50%; border: 0; background: rgba(9,13,19,.55); backdrop-filter: blur(4px); cursor: pointer; display: grid; place-items: center; padding: 0; opacity: 0; transform: translateY(3px); transition: opacity .28s ease, transform .28s ease, background .2s ease; } .decor:hover .decor-cmd, .decor:focus-within .decor-cmd, .decor[data-anime="1"] .decor-cmd { opacity: .9; transform: none; } .decor-cmd:hover { opacity: 1; background: rgba(9,13,19,.8); } .decor-cmd:focus-visible { opacity: 1; outline: 2px solid var(--accent); outline-offset: 3px; } .decor-cmd::before { content: ""; width: 10px; height: 10px; } /* En lecture, il propose d'ARRETER : deux barres. */ .decor-cmd[data-etat="lecture"]::before { background: linear-gradient(to right, #fff 0 34%, transparent 34% 66%, #fff 66% 100%); } /* A l'arret, il propose de LANCER ou de REVOIR : un triangle. */ .decor-cmd[data-etat="arret"]::before { background: #fff; clip-path: polygon(16% 0, 100% 50%, 16% 100%); } @media (max-width: 900px) { .decor-cmd { right: 12px; bottom: 14px; } } /* PAS DE VIDEO SUR TELEPHONE, ET RIEN A TELECHARGER NON PLUS. 746 Ko pour une image qui serait minuscule sur 375 px de large, sur une connexion souvent mesuree : le rapport n'y est pas. On ne la reduit pas, on la retire. Le module ne s'installe pas non plus sous ce seuil, et l'affiche, posee en chargement differe a l'interieur d'un bloc masque, n'entre jamais dans l'ecran : elle n'est donc jamais demandee. Le cout est nul, pas seulement invisible. */ @media (max-width: 700px) { .decor { display: none; } .pz-duo { grid-template-columns: 1fr; gap: 0; } } /* QUI DEMANDE MOINS DE MOUVEMENT N EN RECOIT AUCUN. Le module ne charge deja pas la video dans ce cas ; cette regle est la ceinture de securite. */ @media (prefers-reduced-motion: reduce) { .decor-video { display: none; } .decor-cmd { display: none; } } /* `--crit` ETAIT APPELEE SANS ETRE DEFINIE : cinq a six fois par site, pour un fond, deux filets et une couleur de texte. Une declaration dont la variable manque devient invalide au calcul, donc ces fonds et ces filets n'existaient pas. Le jeton de danger declare dans cette meme feuille est `--danger`. */ :root { --crit: var(--danger); } /* LE BADGE D APPARTENANCE, AU PIED DE PAGE. Il se tient a cote de « Suivez-nous », sur le fond deja sombre du pied de page : ce logo porte un mot en blanc, il n'est lisible que la. On ne le retouche pas, on ne le recadre pas, on ne le recolorise pas : c'est une marque tierce. Le texte dit une APPARTENANCE, pas un label ni une distinction, au meme titre que la mention Cybermalveillance voisine precise qu'elle n'est pas une certification d'Etat. */ .foot-badge { display: flex; align-items: center; gap: 14px; margin: 22px 0 0; } .foot-badge img { width: 44px; height: auto; flex: 0 0 auto; opacity: .92; } .foot-badge span { /* L'echelle du systeme ne connait pas 12,5 px : 11, 12, 13, 14, 16, 20. Une taille hors echelle ne se voit pas seule, elle s'ajoute aux autres jusqu'a ce que l'echelle ne regle plus rien. Repli pour le cas ou la feuille serait servie sans le socle. */ font-size: var(--z-t1, 12px); line-height: 1.45; color: var(--muted-invert); } .foot-badge b { font-weight: 600; color: rgba(255,255,255,.9); } @media (max-width: 700px) { .foot-badge { margin-top: 18px; } .foot-badge img { width: 38px; } } /* LA DERNIERE RANGEE SE REMPLIT. Cette grille dessine ses separations par une gouttiere d'un pixel sur le fond du conteneur : les cellules manquantes laissent donc ce fond a nu. Mesure sur `tarifs.html`, cinq elements sur quatre colonnes : une bande de 732 x 218 pixels. On ne devine pas le nombre d'elements, on le deduit de la position du dernier. Apres : 2 px, soit les gouttieres. Trois orphelins ne sont pas traites, quatre ne se divisant pas en trois ; le cas n'existe sur aucune page, et le banc le dira s'il nait. */ .sov > *:last-child:nth-child(4n+1){grid-column:span 4} /* LE BLOC CYBERMALVEILLANCE AU PIED. Il n'obeit pas a `.foot-badge img`, et c'est voulu : cette regle rend 44 px de large, taille juste pour un logo detoure qui ne porte que trois mots, illisible pour une plaque qui porte une phrase, une adresse et deux blocs-marques. On lui donne la moitie de sa definition declaree, soit le meme rapport de deux que le logo voisin : une seule regle de proportion dans ce pied. L OPACITE REVIENT A 1. Les 92 % de `.foot-badge img` sont une douceur qu'on peut se permettre sur un logo de communaute ; sur un bloc d'Etat, eclaircir est une alteration, au meme titre qu'une recolorisation. */ /* Le repli : sans effet tant que la rangee entre. */ .foot-badge { flex-wrap: wrap; } .foot-badge img.foot-bloc { width: 131px; opacity: 1; } @media (max-width: 700px) { .foot-badge img.foot-bloc { width: 110px; } } .sov > *:nth-child(4n+1):nth-last-child(2), .sov > *:nth-child(4n+2):last-child{grid-column:span 2} /* --------------------------------------------------------------------------- V8-1 : LE CONTRASTE DES TEXTES, MESURE DANS UN NAVIGATEUR. CE QUI ETAIT CASSE, ET POURQUOI CA NE SE VOYAIT PAS. La feuille porte deux jeux d'encre, un pour le fond clair, un pour le fond sombre, et elle sait deja basculer : `.section--dark X, .section--deep X`. Elle ne connaissait que TROIS sols sombres. Le bloc final, le bandeau d'urgence, l'en-tete colle et le pied n'y avaient jamais ete ajoutes : sur eux, une regle de classe gardait l'encre du theme clair, plus specifique que la couleur heritee, et gagnait. Releve au navigateur sur 124 pages, valeurs calculees et fonds composes : 798 textes sous leur seuil, dont des titres de pied a 1,00. CE QU ON N A PAS FAIT. Ni couleur en dur, ni jeton par cas : on emploie le jeton du theme oppose, deja declare. Les crans qui manquaient gardent la teinte et la saturation de l'original, moins d'un quart de degre d'ecart, et ne deplacent que la clarte. --------------------------------------------------------------------------- */ :root{ /* Les semantiques ne tenaient pas 4,5 pour un sur le sol sombre : 4,02 pour le vert, 4,07 pour l'ambre, 3,51 pour le rouge. */ /* Mesures contre le fond REEL de la pastille, pas contre le fond nominal de la section : une pastille d'etat se pose sur un `color-mix` de sa propre teinte. */ --ok-invert:#0EA67A; /* #0C8C67, clarte +5,49 : 4,75 sur #152C2B */ --warn-invert:#D87D00; /* #B96B00, clarte +6,08 : 4,77 sur #30271B */ --danger-invert:#D3626E; /* #C93C4B, clarte +9,41 : 4,76 sur #171A1F */ } :root{ /* Et l'inverse : les memes semantiques ne tenaient pas sur les fonds clairs chauds de la charte, ou le plus fonce est #EBE3D2. */ --ok-ink:#09694D; /* #0C8C67, clarte -7,45 : 4,75 sur la pastille #CEDECF */ --warn-ink:#915400; /* #B96B00, clarte -7,84 : 4,76 sur #EBE3D2 */ --fauve-ink:#945717; /* #C9761F, clarte -11,96 : 4,51 */ } /* Le sol sombre au complet. Les quatre fonds qui manquaient a la liste. */ :is(.final,.urgence,.site-head,.site-foot) .btn--secondary{--btn-fg:#eaf2fb;--btn-bd:rgba(255,255,255,.4)} :is(.final,.urgence,.site-head,.site-foot) .btn--secondary:hover{--btn-bg:#fff;--btn-fg:var(--midnight);--btn-bd:#fff} :is(.final,.urgence,.site-head,.site-foot) .btn--tertiary{--btn-fg:#eaf7fc} /* Deux panneaux sombres de plus, nommes parce qu'ils portent un bouton. */ :is(.cx,.fn-final) .btn--secondary{--btn-fg:#eaf2fb;--btn-bd:rgba(255,255,255,.4)} /* `.urgence` est absent de cette liste : le bandeau d'urgence REMPLIT son bouton de danger, et y inverser l'encre donne du rouge sur rouge. */ :is(.section--dark,.section--deep,.canvas,.final,.site-head,.site-foot) .btn--danger{--btn-fg:var(--danger-invert);--btn-bd:var(--danger-invert)} /* Le bandeau d'urgence est un sol sombre : ses titres restaient a l'encre du theme clair, soit du #171A1F sur du #171A1F. */ .urgence :is(h1,h2,h3,h4){color:#fff} /* L'oeil-de-boeuf du heros. `.canvas` manquait a la regle d'inversion : le jeton profond, fait pour le fond clair, y tombait a 3,10. */ .canvas .eyebrow{color:var(--accent)} /* Le numero d'etape etait peint avec l'accent du theme SOMBRE sur du blanc : 2,69, sous le plancher de 3,0 qu'aucune taille de caractere ne rachete. */ /* PAS DE REGLE D INVERSION ICI. La carte `.st` porte son propre fond, et il est blanc jusque dans une section sombre : inverser sur la classe de la SECTION repeignait six numeros en azur sur du blanc. Le fond d'une carte n'est pas celui de sa section. */ .steps .st .k{color:var(--accent-deep)} /* Les textes secondaires sur sol sombre. `.section--dark > .wrap > .sec-head p` ne descendait que d'un niveau : un `.sec-head` imbrique gardait l'encre claire. Le combinateur d'enfant devient un combinateur de descendant. */ :is(.section--dark,.section--deep,.canvas,.final,.urgence) :is(.sec-head p,.split p,.split .col-tag){color:var(--muted-invert)} /* Les liens dans le corps du texte, et EUX SEULS : un lien qui porte une classe porte aussi son propre aplat, parfois clair. La pastille d'appel d'une page a ete repeinte en azur sur blanc avant cette restriction. */ :is(.section--dark,.section--deep,.canvas,.final,.urgence) :is(p,li,td,dd) a:not([class]){color:var(--accent)} /* Etats et pastilles pointes par la mesure. */ .cx-edi-state{color:var(--ok-invert)} .cx-edi-state--warn{color:var(--warn-invert)} .ur .ur-cote{color:var(--danger-invert)} .eco-num--fauve{color:var(--fauve-ink)} .or-dest{color:#637895} /* #94A3B8, clarte -16,47 : 4,51 sur blanc */ .price.is-featured .flag{color:var(--accent-ink)} /* ===== PREMIER ECRAN SANS ANIMAL (lot du 02/09/2026) ===== Le felin est retire des quatre jeux de heros, quarante fichiers. Ce qui suit n est pas un bouche-trou : c est la composition qui prend sa place, tiree de la palette de la charte et de la geometrie de la marque declaree dans identite.css. QUATRE COUCHES, ET AUCUN FICHIER D IMAGE. 1. une trame fine de reperes, qui s efface la ou le texte se lit ; 2. une aube froide en haut a droite, le signal de la charte ; 3. une aube chaude sous le bloc, le fauve de la charte, qui garde l heure et l horizon des photos precedentes sans leur sujet ; 4. un fond profond, en degrade. LES REPLIS SONT OBLIGATOIRES ET NON DECORATIFS. `--azure` existe sur les trois vitrines ; la console MSP nomme la meme couleur `--z-c-info`. Une variable non definie supprime la regle entiere, sans un mot en console. Chaque var() porte donc les deux noms, puis la valeur litterale. */ .hero.canvas, body.brand-umbrella .hero.canvas, body.brand-pro .hero.canvas, body.brand-smart .hero.canvas, body.brand-msp .hero.canvas{ --aff-h-fond:#070C14; --aff-h-signal:var(--azure,var(--z-c-info,#3DA6E8)); --aff-h-aube:var(--btn-primary-bg,#E0872A); background-color:var(--aff-h-fond); background-image: linear-gradient(to right,rgba(233,242,251,.05) 1px,transparent 1px), linear-gradient(to bottom,rgba(233,242,251,.05) 1px,transparent 1px), radial-gradient(86% 72% at 84% 4%, color-mix(in srgb,var(--aff-h-signal) 30%,transparent) 0%,transparent 62%), radial-gradient(52% 40% at 68% 104%, color-mix(in srgb,var(--aff-h-aube) 34%,transparent) 0%,transparent 66%), linear-gradient(168deg,#0C1424 0%,#070C14 54%,#04070C 100%); background-size:72px 72px,72px 72px,auto,auto,auto; background-position:center right; background-repeat:repeat,repeat,no-repeat,no-repeat,no-repeat; } /* Le halo qui detache le bloc. `::before` peint AVANT `::after` a rang egal : il passe donc sous le voile, et le bloc, lui, est au-dessus. */ .hero.canvas::before{ content:"";position:absolute;inset:0;z-index:0;pointer-events:none; background:radial-gradient(40% 48% at 72% 52%, color-mix(in srgb,var(--aff-h-signal,#3DA6E8) 24%,transparent) 0%,transparent 72%); } /* Le voile d origine etait calibre sur une photo : sur une composition il noircissait la moitie gauche pour rien. Il garde son role, adouci. */ .hero.canvas::after{ background:linear-gradient(90deg, rgba(4,7,12,.92) 0%,rgba(4,7,12,.72) 34%,rgba(4,7,12,.20) 58%,transparent 76%); } /* LE BLOC CHANFREINE, DANS UNE REGLE SEPAREE. Si elle tombait, le premier ecran garderait son fond : c est pour cela qu elle est separee. Les deux demies sont les sommets exacts du `path` de `--aff-marque`, divises par 24. Le degrade a 45 degres est l axe du trait de coupe, comme dans identite.css. */ .hero .h-fig--free{position:relative} .hero .h-fig--free::before, .hero .h-fig--free::after{ content:"";position:absolute;top:50%;left:50%; width:min(400px,84%);aspect-ratio:1/1;transform:translate(-50%,-50%); pointer-events:none;filter:drop-shadow(0 26px 60px rgba(0,0,0,.55)); } .hero .h-fig--free::before{ clip-path:polygon(24.583% 18.75%,33.333% 10%,90% 10%,90% 66.667%,81.25% 75.417%); background:linear-gradient(45deg, color-mix(in srgb,var(--aff-h-signal,#3DA6E8) 52%,transparent) 0%, color-mix(in srgb,var(--aff-h-signal,#3DA6E8) 12%,transparent) 100%); } .hero .h-fig--free::after{ clip-path:polygon(75.417% 81.25%,66.667% 90%,10% 90%,10% 33.333%,18.75% 24.583%); background:linear-gradient(45deg, rgba(233,242,251,.07) 0%,rgba(233,242,251,.34) 100%); } /* MOBILE. La photo y etait posee en carte sous le texte (`hero-art-m`) : la carte disparait avec elle. Le bloc chanfreine prend sa place, plus bas et plus court, et le champ de fond remplace l aplat `#0b0f15` que la regle d origine posait en `!important`. Le `!important` est ici obligatoire : sans lui, `background:#0b0f15!important` gagnerait. */ @media(max-width:820px){ .hero.canvas, body.brand-umbrella .hero.canvas, body.brand-pro .hero.canvas, body.brand-smart .hero.canvas, body.brand-msp .hero.canvas{ background-color:var(--aff-h-fond)!important; background-image: linear-gradient(to right,rgba(233,242,251,.045) 1px,transparent 1px), linear-gradient(to bottom,rgba(233,242,251,.045) 1px,transparent 1px), radial-gradient(120% 46% at 78% 0%, color-mix(in srgb,var(--aff-h-signal) 30%,transparent) 0%,transparent 68%), radial-gradient(110% 34% at 40% 100%, color-mix(in srgb,var(--aff-h-aube) 30%,transparent) 0%,transparent 66%), linear-gradient(180deg,#0C1424 0%,#070C14 58%,#04070C 100%)!important; background-size:56px 56px,56px 56px,auto,auto,auto!important; background-position:center top!important; background-repeat:repeat,repeat,no-repeat,no-repeat,no-repeat!important; min-height:auto; } .hero.canvas::after{ background:linear-gradient(180deg, rgba(4,7,12,.62) 0%,rgba(4,7,12,.34) 44%,rgba(4,7,12,.40) 68%,rgba(4,7,12,.78) 100%); } .hero .h-fig--free{display:block!important;min-height:180px;order:2;margin-top:8px} .hero .h-fig--free::before,.hero .h-fig--free::after{width:min(176px,54%)} .hero-art-m{display:none!important} }