/* * © 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)}} @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 : preuve par registre (Pro), remplace la bande de chiffres clonée */ .pv-reg{background:#0F1319;color:#dfe9f5;border-radius:6px;overflow:hidden;border:1px solid #171A1F;max-width:760px;margin:22px auto 0;text-align:left} .pv-reg-h{display:flex;align-items:center;gap:10px;padding:14px 18px;border-bottom:1px solid rgba(255,255,255,.09)} .pv-reg-h .pv-dot{width:9px;height:9px;border-radius:50%;background:#008CD6;box-shadow:0 0 0 4px rgba(0,140,214,.18)} .pv-reg-h b{color:#fff;font-size:14px} .pv-reg-h .pv-seal{margin-left:auto;font-size:10.5px;font-weight:700;letter-spacing:.08em;color:#9fe3c9;border:1px solid rgba(12,140,103,.5);background:rgba(12,140,103,.15);padding:4px 9px;border-radius:20px} .pv-entry{padding:14px 18px;border-bottom:1px solid rgba(255,255,255,.06);position:relative} .pv-entry::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:#008CD6} .pv-entry .pv-ts{font-size:12px;color:#7fd0f2;font-family:"JetBrains Mono",Consolas,monospace} .pv-entry .pv-ttl{color:#fff;font-weight:600;margin:2px 0 3px} .pv-entry .pv-meta{font-size:12.5px;color:#9fb2c9} .pv-entry .pv-hash{margin-top:8px;font-size:12px;color:#cbd5e1;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.08);border-radius:6px;padding:7px 10px;font-family:"JetBrains Mono",Consolas,monospace;word-break:break-all} .pv-entry .pv-hash span{color:#6ee7b7;font-weight:700} .pv-reg-f{padding:11px 18px;font-size:12px;color:#9fb2c9;background:rgba(0,0,0,.18)} /* Audit refonte : hierarchie referentiels 4 niveaux (remplace le mur de sigles) */ .ref4{background:#F4F7FA;border-top:1px solid #cbd5e1;border-bottom:1px solid #cbd5e1} .ref4-in{max-width:1080px;margin:0 auto;padding:8px 22px} .ref4-row{display:grid;grid-template-columns:236px 1fr;gap:18px;padding:13px 0;border-bottom:1px solid #e6edf5;align-items:baseline} .ref4-row:last-child{border-bottom:0} .ref4-lv{display:flex;flex-direction:column;gap:2px} .ref4-n{font-size:10px;font-weight:800;letter-spacing:.1em;color:#94a3b8} .ref4-lbl{font-size:13.5px;font-weight:700;color:#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 : récit maître sous le cockpit (hero Pro) */ .hero-recit{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:8px 10px;margin:16px auto 0;max-width:660px} .hero-recit .hr-step{display:inline-flex;align-items:center;gap:7px;font-size:12.5px;font-weight:700;color:#eaf3fb;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);border-radius:6px;padding:6px 11px} .hero-recit .hr-step i{width:8px;height:8px;border-radius:50%;background:#3DA6E8;box-shadow:0 0 0 3px rgba(0,172,235,.18)} .hero-recit .hr-step:nth-child(3) i{background:#B96B00}.hero-recit .hr-step:nth-child(5) i{background:#008CD6}.hero-recit .hr-step:nth-child(7) i{background:#0C8C67} .hero-recit .hr-arrow{color:#7fd0f2;font-weight:800} @media(max-width:560px){.hero-recit .hr-arrow{display:none}.hero-recit{gap:8px}} /* ===== Reflet de lumiere, glint blanc sur les boutons (18/08/2026) ===== Une lumiere BLANCHE, discrete, qui glisse sur les boutons (reflet de verre). - au survol : sur tous les boutons (retour d'interaction, effet premium) - lent & periodique : uniquement sur le bouton principal (CTA), ~1,1 s de passage toutes les 8 s, pour attirer l'oeil sans agiter la page. Blanc, jamais or. Se desactive si prefers-reduced-motion. */ .btn{position:relative;overflow:hidden} /* glint au survol, tous les boutons */ .btn::after{ content:"";position:absolute;top:0;bottom:0;left:0;width:100%; pointer-events:none;z-index:1; background:linear-gradient(105deg,transparent 40%,rgba(255,255,255,.40) 50%,transparent 60%); transform:translateX(-130%); } .btn:hover::after{ transition:transform .7s cubic-bezier(.22,.61,.36,1); transform:translateX(130%); } /* passage lent & periodique, bouton principal seulement */ .btn--primary::before{ content:"";position:absolute;top:0;bottom:0;left:0;width:100%; pointer-events:none;z-index:1; background:linear-gradient(105deg,transparent 44%,rgba(255,255,255,.28) 50%,transparent 56%); transform:translateX(-130%); animation:z-btn-glint 8s ease-in-out infinite; } @keyframes z-btn-glint{ 0%{transform:translateX(-130%)} 14%{transform:translateX(130%)} 100%{transform:translateX(130%)} } @media(prefers-reduced-motion:reduce){ .btn::after,.btn--primary::before{animation:none;transition:none;transform:translateX(-130%)} } /* 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} /* Encadré MSP visible dans le footer Pro (20/08) */ .site-foot .foot-msp{display:flex;align-items:center;gap:16px;margin:6px 0 26px;padding:15px 20px;background:rgba(124,107,255,.10);border:1px solid rgba(124,107,255,.34);border-radius:12px;text-decoration:none;transition:background .15s,border-color .15s;flex-wrap:wrap} .site-foot .foot-msp:hover{background:rgba(124,107,255,.17);border-color:rgba(124,107,255,.55)} .site-foot .foot-msp .fm-ic{flex:0 0 auto;width:42px;height:42px;border-radius:10px;background:rgba(124,107,255,.20);display:flex;align-items:center;justify-content:center} .site-foot .foot-msp .fm-ic svg{width:22px;height:22px;stroke:#b9adff;fill:none;stroke-width:2} .site-foot .foot-msp .fm-tx{flex:1 1 320px;color:#eaf2fb;font-size:14.5px;line-height:1.5} .site-foot .foot-msp .fm-tx b{color:#fff} .site-foot .foot-msp .fm-cta{flex:0 0 auto;color:#b9adff;font-weight:700;font-size:14.5px;white-space:nowrap} /* ===== Nav a piliers avec sous-menus (Gouverner/Reagir/Prouver) ===== */ .site-head nav .nav-group{position:relative;display:flex;align-items:center} .site-head nav .nav-trigger{display:inline-flex;align-items:center;gap:5px;font-size:14.5px;font-weight:500;color:#eaf7fc;padding:9px 10px;border-radius:var(--r-sm,6px);cursor:default;background:none;border:0;font-family:inherit;white-space:nowrap} .site-head nav .nav-trigger svg{width:11px;height:11px;stroke:currentColor;stroke-width:2.6;fill:none;transition:transform .15s} .site-head nav .nav-group:hover .nav-trigger,.site-head nav .nav-group:focus-within .nav-trigger{color:#fff;background:rgba(255,255,255,.07)} .site-head nav .nav-group:hover .nav-trigger svg,.site-head nav .nav-group:focus-within .nav-trigger svg{transform:rotate(180deg)} .site-head nav .nav-panel{position:absolute;top:calc(100% + 4px);left:0;min-width:270px;background:var(--midnight,#0F1319);border:1px solid rgba(255,255,255,.12);border-radius:10px;box-shadow:0 18px 44px rgba(0,0,0,.45);padding:8px;display:none;z-index:60} .site-head nav .nav-group:hover .nav-panel,.site-head nav .nav-group:focus-within .nav-panel{display:block} /* UN SEUL PANNEAU OUVERT A LA FOIS. La regle ci-dessus ouvre au survol OU au focus, et rien n'empeche deux groupes DIFFERENTS de satisfaire chacun un declencheur : un panneau reste ouvert par le focus d'un lien clique pendant qu'un autre s'ouvre au survol, et celui du dessus masque les liens de celui du dessous. On ne retire pas `focus-within`, ce serait retirer la navigation au clavier : tant que la souris est sur la barre, tout groupe NON survole se referme, focus ou pas. Au clavier seul, la souris n'est pas sur la barre et le focus continue d'ouvrir. */ .site-head nav:hover .nav-group:not(:hover) .nav-panel{display:none} .site-head nav .nav-panel a{display:block;padding:9px 12px;border-radius:7px;border-top:0 !important;white-space:normal} .site-head nav .nav-panel a b{display:block;font-size:14px;font-weight:600;color:#fff} .site-head nav .nav-panel a small{display:block;font-size:12px;color:#9fb4cf;margin-top:1px} .site-head nav .nav-panel a:hover{background:rgba(255,255,255,.08)} @media (max-width:1300px){ .site-head nav .nav-group{display:block} .site-head nav .nav-trigger{width:100%;justify-content:flex-start;padding:16px 24px 6px;border-top:1px solid rgba(255,255,255,.06);color:#8fa6c4;text-transform:uppercase;font-size:12px;letter-spacing:.09em;cursor:default} .site-head nav .nav-trigger svg{display:none} .site-head nav .nav-panel{position:static;display:block;min-width:0;box-shadow:none;border:0;background:transparent;padding:0} .site-head nav .nav-panel a{padding:11px 24px 11px 34px} .site-head nav .nav-panel a small{display:none} } /* 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-n{display:none} .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 */ /* 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 : 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 pro reconstruites (bespoke) ============ */ /* --- pl --- */ .pl-boucle{ background:var(--surface); color:var(--ink); padding:5.5rem 0; } .pl-guet{ text-align:left; border-left:2px solid var(--accent); padding-left:1.15rem; max-width:52rem; margin-bottom:3.5rem; } .pl-cote{ font-family:var(--mono); text-transform:uppercase; letter-spacing:.1em; font-size:.72rem; color:var(--accent-deep); margin:0 0 .85rem; } .pl-titre{ font-family:var(--display); font-weight:500; font-size:clamp(1.9rem,3.6vw,2.9rem); line-height:1.08; color:var(--ink); margin:0 0 1rem; } .pl-sous{ font-family:var(--font); font-size:1.02rem; line-height:1.65; color:var(--muted); margin:0; text-align:justify; hyphens:auto; } .pl-frise{ list-style:none; margin:0; padding:0; max-width:56rem; } .pl-etape{ display:grid; grid-template-columns:2.4rem 1fr; column-gap:1.5rem; } .pl-rail{ position:relative; display:flex; justify-content:center; } /* le trait de rail : hairline vertical Signal, reliant les lampes */ .pl-rail::before{ content:""; position:absolute; top:0; bottom:0; left:50%; transform:translateX(-50%); width:2px; background:var(--accent); opacity:.28; } /* première étape : rail part sous la lampe */ .pl-etape:first-child .pl-rail::before{ top:1.15rem; } /* dernière étape : rail s'arrête à la lampe */ .pl-etape--fin .pl-rail::before{ bottom:auto; height:1.15rem; } .pl-lampe{ position:relative; z-index:1; margin-top:1.15rem; width:9px; height:9px; border-radius:50%; flex:0 0 auto; box-shadow:0 0 0 4px var(--surface); } .pl-lampe--accent{ background:var(--accent); } .pl-lampe--fauve{ background:var(--fauve); } .pl-corps{ padding:.15rem 0 2.6rem; } .pl-etape--fin .pl-corps{ padding-bottom:.2rem; } .pl-num{ font-family:var(--mono); font-size:.82rem; letter-spacing:.06em; color:var(--accent-deep); margin:0 0 .3rem; } .pl-num--fin{ color:var(--fauve-deep); } .pl-nom{ font-family:var(--display); font-weight:500; font-size:1.5rem; line-height:1.1; color:var(--ink); margin:0 0 .55rem; } .pl-desc{ font-family:var(--font); font-size:1rem; line-height:1.62; color:var(--muted); margin:0; text-align:justify; hyphens:auto; max-width:44rem; } .pl-abou{ margin:.95rem 0 0; padding-top:.7rem; border-top:1px solid var(--border); font-family:var(--font); font-size:.92rem; color:var(--ink); display:flex; align-items:baseline; gap:.55rem; flex-wrap:wrap; } .pl-abou-cote{ color:var(--fauve-deep); font-size:.68rem; } @media (max-width:620px){ .pl-boucle{ padding:3.75rem 0; } .pl-guet{ margin-bottom:2.5rem; } .pl-etape{ grid-template-columns:1.8rem 1fr; column-gap:1rem; } .pl-nom{ font-size:1.3rem; } .pl-desc,.pl-sous{ text-align:left; } } @media (prefers-reduced-motion:reduce){ .pl-boucle *{ transition:none !important; animation:none !important; } } /* --- tf --- */ .tf { background: var(--surface); padding: 88px 0; } .tf-guet { text-align: left; border-left: 2px solid var(--accent); padding-left: 18px; margin-bottom: 44px; max-width: 640px; } .tf-cote { display: block; font-family: var(--mono); font-size: .74rem; letter-spacing: .1em; text-transform: uppercase; color: var(--accent-deep); margin-bottom: 12px; } .tf-titre { font-family: var(--display); font-weight: 500; font-size: clamp(1.7rem, 3.4vw, 2.5rem); line-height: 1.08; color: var(--ink); margin: 0 0 12px; } .tf-sous { font-family: var(--font); font-size: 1.02rem; line-height: 1.55; color: var(--muted); margin: 0; } .tf-grille { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; align-items: stretch; } .tf-offre { position: relative; display: flex; flex-direction: column; background: var(--paper); border: 1px solid var(--border); border-radius: 6px; padding: 26px 24px 24px; } .tf-offre--reco { border: 1px solid var(--fauve); box-shadow: inset 3px 0 0 var(--fauve); padding-top: 34px; } .tf-etiquette { position: absolute; top: -1px; left: 24px; font-family: var(--mono); font-size: .68rem; letter-spacing: .1em; color: #1B1712; background: var(--fauve); padding: 5px 11px; border-radius: 0 0 6px 6px; } .tf-offre-tete { padding-bottom: 18px; border-bottom: 1px solid var(--border); margin-bottom: 18px; } .tf-nom { display: block; font-family: var(--mono); font-size: .78rem; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin-bottom: 10px; } .tf-prix { display: flex; align-items: baseline; gap: 8px; margin: 0; } .tf-montant { font-family: var(--display); font-weight: 500; font-size: 2.15rem; line-height: 1; color: var(--ink); } .tf-par { font-family: var(--mono); font-size: .78rem; letter-spacing: .08em; color: var(--muted); } .tf-desc { font-family: var(--font); font-size: .95rem; line-height: 1.55; color: var(--ink); text-align: justify; hyphens: auto; margin: 0 0 20px; } .tf-puces { list-style: none; margin: 0 0 26px; padding: 0; } .tf-puces li { position: relative; display: flex; align-items: flex-start; gap: 11px; font-family: var(--font); font-size: .92rem; line-height: 1.45; color: var(--ink); padding: 8px 0; border-top: 1px solid var(--border); } .tf-puces li:first-child { border-top: 0; } .tf-lampe { flex: 0 0 auto; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); margin-top: 6px; } .tf-offre--reco .tf-lampe { background: var(--fauve); } .tf-cta { margin-top: auto; align-self: stretch; text-align: center; } @media (max-width: 620px) { { padding: 60px 0; } .tf-grille { grid-template-columns: 1fr; } .tf-guet { margin-bottom: 32px; } } /* --- lc --- */ .lc{ background:var(--surface); color:var(--ink); padding:76px 0; } /* En-tete : ligne de guet, aligne a gauche, jamais centre */ .lc-guet{ border-left:2px solid var(--accent); padding-left:18px; text-align:left; max-width:760px; margin-bottom:44px; } .lc-cote{ font-family:var(--mono); font-size:12px; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); margin:0 0 12px; } .lc-titre{ font-family:var(--display); font-weight:500; font-size:clamp(26px,3.4vw,38px); line-height:1.14; color:var(--ink); margin:0 0 12px; } .lc-sous{ font-family:var(--font); font-size:16px; line-height:1.6; color:var(--muted); margin:0; max-width:56ch; } /* Deux voies appairees */ .lc-grid{ display:grid; grid-template-columns:1fr 1fr; gap:22px; } /* Panneau = plaque filet mate, rayon 6px, aucune ombre molle */ .lc-panneau{ position:relative; background:var(--paper); border:1px solid var(--border); border-radius:6px; padding:26px 26px 24px; display:flex; flex-direction:column; } .lc-panneau .lc-cote--sm{ font-size:11px; margin-bottom:14px; } .lc-ptitre{ font-family:var(--display); font-weight:500; font-size:21px; line-height:1.2; color:var(--ink); margin:0 0 12px; display:flex; align-items:baseline; gap:11px; } /* Lampe : pastille pleine, couleur = etat, jamais de coche */ .lc-lampe{ flex:0 0 auto; width:9px; height:9px; border-radius:50%; transform:translateY(-1px); } .lc-lampe--accent{ background:var(--accent); } /* Le SEUL Fauve de la section : la decision cabinet */ .lc-lampe--fauve{ background:var(--fauve); } .lc-txt{ font-family:var(--font); font-size:15px; line-height:1.62; color:var(--ink); text-align:justify; hyphens:auto; margin:0 0 18px; } /* Puces en cotes reglees */ .lc-liste{ list-style:none; margin:0 0 20px; padding:0; border-top:1px solid var(--border); } .lc-item{ display:flex; align-items:baseline; gap:12px; font-family:var(--font); font-size:14.5px; line-height:1.5; color:var(--ink); padding:11px 0; border-bottom:1px solid var(--border); } .lc-mark{ flex:0 0 auto; width:14px; height:2px; background:var(--accent); transform:translateY(-3px); } .lc-pied{ margin-top:auto; padding-top:2px; } .lc-panneau .btn{ display:inline-flex; align-items:center; } /* Reponsive */ @media (max-width:820px){ .lc{ padding:60px 0; } .lc-grid{ grid-template-columns:1fr; gap:16px; } } @media (max-width:620px){ .lc{ padding:48px 0; } .lc-guet{ margin-bottom:32px; padding-left:14px; } .lc-panneau{ padding:22px 20px; } .lc-txt{ text-align:left; } .lc-panneau .btn{ width:100%; justify-content:center; } } @media (prefers-reduced-motion:reduce){ *{ transition:none !important; animation:none !important; } } /* --- up --- */ .up-urgence{position:relative;background:var(--deep);color:var(--cadran,#E7EDF3);padding:clamp(2.4rem,5vw,4rem) 0;overflow:hidden} .up-urgence::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(120% 100% at 12% 0%,#000 0%,transparent 70%);mask-image:radial-gradient(120% 100% at 12% 0%,#000 0%,transparent 70%);pointer-events:none} .up-urgence .wrap{position:relative;z-index:1} .up-panneau{display:flex;align-items:center;gap:clamp(1.6rem,4vw,3rem);padding:clamp(1.5rem,3vw,2.1rem) clamp(1.4rem,3vw,2.2rem);background:var(--midnight);border:1px solid rgba(255,255,255,.11);border-left:2px solid var(--crit);border-radius:6px} .up-corps{flex:1 1 auto;min-width:0} .up-cote{display:flex;align-items:center;gap:.6ch;margin:0 0 .55rem;font-family:var(--mono);font-size:.72rem;text-transform:uppercase;letter-spacing:.1em;color:var(--crit)} .up-lampe{flex:none;width:9px;height:9px;border-radius:50%;background:var(--crit);box-shadow:0 0 0 0 rgba(201,60,75,.55);animation:up-pulse 2.4s ease-out infinite} .up-lampe--ok{background:var(--ok);box-shadow:none;animation:none} .up-titre{margin:0 0 .55rem;font-family:var(--display);font-weight:500;line-height:1.08;font-size:clamp(1.5rem,3.4vw,2.15rem);color:var(--cadran,#E7EDF3)} .up-texte{margin:0;max-width:62ch;text-align:justify;hyphens:auto;line-height:1.6;font-size:1rem;color:var(--muted-invert,#9fb4cf)} .up-texte strong{color:var(--cadran,#E7EDF3);font-weight:600} .up-action{flex:none;display:flex;flex-direction:column;align-items:flex-start;gap:.75rem;padding-left:clamp(1.6rem,4vw,3rem);border-left:1px solid rgba(255,255,255,.11)} .up-etat{display:flex;align-items:center;gap:.6ch;margin:0;font-family:var(--mono);font-size:.7rem;text-transform:uppercase;letter-spacing:.1em;color:var(--muted-invert,#9fb4cf)} .up-cta{white-space:nowrap} @keyframes up-pulse{0%{box-shadow:0 0 0 0 rgba(201,60,75,.5)}70%{box-shadow:0 0 0 9px rgba(201,60,75,0)}100%{box-shadow:0 0 0 0 rgba(201,60,75,0)}} @media (max-width:620px){ .up-panneau{flex-direction:column;align-items:stretch;gap:1.3rem} .up-action{padding-left:0;padding-top:1.3rem;border-left:0;border-top:1px solid rgba(255,255,255,.11);align-items:stretch} .up-cta{width:100%;text-align:center} } @media (prefers-reduced-motion:reduce){ .up-lampe{animation:none} } /* --- rg --- */ .rg-sec{ position:relative; background:var(--deep); color:var(--paper); padding:96px 0; overflow:hidden; } .rg-sec::before{ content:""; 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(ellipse 70% 60% at 50% 40%, #000 0%, transparent 78%); mask-image:radial-gradient(ellipse 70% 60% at 50% 40%, #000 0%, transparent 78%); pointer-events:none; } .wrap{position:relative;z-index:1;} .rg-guet{ text-align:left; border-left:2px solid var(--accent); padding-left:20px; max-width:760px; margin-bottom:44px; } .rg-cote{ font-family:var(--mono); font-size:.72rem; letter-spacing:.1em; text-transform:uppercase; color:var(--muted-invert); margin:0 0 14px; } .rg-cote--mini{margin:0;font-size:.66rem;} .rg-titre{ font-family:var(--display); font-weight:500; font-size:2.3rem; line-height:1.12; color:var(--paper); margin:0 0 16px; } .rg-sous{ font-family:var(--font); font-size:1rem; line-height:1.65; color:var(--muted-invert); text-align:justify; hyphens:auto; margin:0; } .rg-journal{ border:1px solid rgba(255,255,255,.11); border-radius:6px; background:var(--midnight); } .rg-barre{ display:flex; align-items:center; justify-content:space-between; gap:16px; padding:14px 22px; border-bottom:1px solid rgba(255,255,255,.11); } .rg-badge{ font-family:var(--mono); font-size:.7rem; letter-spacing:.06em; color:var(--accent); border:1px solid rgba(58,166,232,.35); border-radius:6px; padding:4px 10px; white-space:nowrap; } .rg-entree{ display:flex; gap:16px; padding:22px; border-bottom:1px solid rgba(255,255,255,.11); } .rg-lampe{ flex:0 0 auto; width:9px; height:9px; border-radius:50%; margin-top:6px; } .rg-lampe--ok{background:var(--ok);box-shadow:0 0 0 3px rgba(12,140,103,.16);} .rg-lampe--crit{background:var(--crit);box-shadow:0 0 0 3px rgba(201,60,75,.18);} .rg-corps{flex:1 1 auto;min-width:0;} .rg-tete{ display:flex; align-items:center; gap:14px; flex-wrap:wrap; margin-bottom:8px; } .rg-ts{ font-family:var(--mono); font-size:.82rem; color:var(--cadran, #E7EDF3); letter-spacing:.02em; } .rg-etat{ font-family:var(--mono); font-size:.66rem; letter-spacing:.1em; text-transform:uppercase; padding:2px 8px; border-radius:6px; } .rg-etat--ok{color:var(--ok);border:1px solid rgba(12,140,103,.4);} .rg-etat--crit{color:var(--crit);border:1px solid rgba(201,60,75,.4);} .rg-lib{ font-family:var(--font); font-size:1.02rem; font-weight:600; color:var(--paper); margin:0 0 4px; line-height:1.4; } .rg-detail{ font-family:var(--font); font-size:.9rem; color:var(--muted-invert); margin:0 0 10px; line-height:1.5; } .rg-entree:last-of-type .rg-detail{margin-bottom:0;} .rg-hash{ font-family:var(--mono); font-size:.78rem; letter-spacing:.03em; color:var(--accent); margin:0; word-break:break-all; } .rg-pied{ display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; padding:18px 22px; } .rg-maj{ font-family:var(--mono); font-size:.74rem; letter-spacing:.04em; color:var(--muted-invert); } .rg-lien{white-space:nowrap;} @media (max-width:620px){ .rg-sec{padding:64px 0;} .rg-titre{font-size:1.8rem;} .rg-barre,.rg-pied{flex-direction:column;align-items:flex-start;} .rg-entree{padding:18px;} .rg-lien{width:100%;text-align:center;} } @media (prefers-reduced-motion:reduce){ .rg-lien{transition:none;} } /* --- df --- */ .df{ position:relative; background:var(--deep); overflow:hidden; padding:clamp(3rem,7vw,5.5rem) 0; } .df::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(125% 90% at 26% 32%, #000 26%, transparent 80%); mask-image:radial-gradient(125% 90% at 26% 32%, #000 26%, transparent 80%); pointer-events:none; } .df > .wrap{ position:relative; z-index:1; } .df__topline{ display:flex; align-items:center; justify-content:space-between; gap:1rem; padding-bottom:.85rem; border-bottom:1px solid rgba(255,255,255,.11); } .df__cote, .df__veille{ font-family:var(--mono); text-transform:uppercase; letter-spacing:.1em; color:var(--muted-invert); } .df__cote{ font-size:.72rem; } .df__veille{ display:inline-flex; align-items:center; gap:.5rem; font-size:.68rem; } .df__lampe{ width:9px; height:9px; border-radius:50%; background:var(--ok); flex:0 0 auto; position:relative; } .df__lampe::after{ content:""; position:absolute; inset:0; border-radius:50%; border:1px solid var(--ok); animation:df-veille 2.6s ease-out infinite; } @keyframes df-veille{ 0%{ transform:scale(1); opacity:.7; } 70%,100%{ transform:scale(2.6); opacity:0; } } .df__body{ display:flex; align-items:flex-end; justify-content:space-between; gap:clamp(1.6rem,4vw,3.2rem); margin-top:clamp(1.7rem,3vw,2.5rem); } .df__head{ border-left:2px solid var(--accent); padding-left:1.15rem; max-width:38rem; text-align:left; } .df__titre{ margin:0; font-family:var(--display); font-weight:400; font-size:clamp(1.7rem,3.6vw,2.6rem); line-height:1.08; color:#E7EDF3; } .df__texte{ margin:.9rem 0 0; max-width:34rem; color:var(--muted-invert); font-size:1rem; line-height:1.6; text-align:justify; hyphens:auto; } .df__actions{ display:flex; flex-direction:column; align-items:stretch; gap:.7rem; flex:0 0 auto; } .df__note{ font-family:var(--mono); font-size:.66rem; letter-spacing:.08em; text-transform:uppercase; color:var(--muted-invert); text-align:right; opacity:.85; } @media (max-width:620px){ .df__body{ flex-direction:column; align-items:stretch; gap:1.6rem; } .df__actions{ width:100%; } .df__actions .btn{ width:100%; } .df__note{ text-align:left; } } @media (prefers-reduced-motion:reduce){ .df__lampe::after{ animation:none; opacity:0; } } /* Hero L'Affut pro : serval libre a droite, cockpit deplace sous le hero (chevauchement 24/08) */ .hero .h-fig--free{min-height:clamp(280px,32vw,420px)} .hero .h-tx .hero-recit{margin-top:22px;justify-content:flex-start} .hero-demo{position:relative;z-index:2;margin-top:-40px} .hero-demo .wrap{max-width:1120px;margin:0 auto;padding:0 24px} .hero-demo .cockpit-shot{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)} @media(max-width:820px){.hero .h-fig--free{display:none}.hero-demo{margin-top:16px}} /* ===== 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; } /* `--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(.rg-journal,.df__panel) .btn--secondary{--btn-fg:#eaf2fb;--btn-bd:rgba(255,255,255,.4)} /* L'offre Pro tire l'encre de son bouton de son liseré, un azur de marque qui ne tient que 3,67 sur blanc : clarte -6,27, teinte inchangee. */ .offer.is-pro .btn--secondary{--btn-fg:#0077B6} /* `.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. */ .up-cote{color:var(--danger-invert)} .rg-etat--ok{color:var(--ok-invert)} .rg-etat--crit{color:var(--danger-invert)} .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} }