/* * © 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:#3DA6E8; --smart-teal:#3DA6E8; /* 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:block;line-height:1.65;max-width:52ch} .hero .h-note svg{width:16px;height:16px;fill:none;stroke:#3DA6E8;stroke-width:1.8;display:inline-block;vertical-align:-3px;margin-right:6px} .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))} /* Captures RÉELLES de l'application (remplacent les faux visuels dessinés) */ .app-shot{width:100%;height:auto;display:block;border-radius:6px} .hero .h-fig img.app-shot{border:1px solid rgba(255,255,255,.16);box-shadow:0 30px 70px rgba(0,0,0,.45);border-radius:6px} @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{justify-content:center} .hero .h-note{text-align:center;margin-inline:auto} .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:#3DA6E8;display:flex;align-items:center;gap:6px} .zsc-topbar .live::before{content:"";width:7px;height:7px;border-radius:50%;background:#3DA6E8;box-shadow:0 0 8px #3DA6E8} .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:#3DA6E8}.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:#3DA6E8;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:#3DA6E8;stroke-width:3} .zsc-spark .cap{position:absolute;top:0;right:0;font-family:ui-monospace,monospace;font-weight:700;font-size:.875rem;color:#3DA6E8} .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:#3DA6E8;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{color:#fff;background-color:#0b0f15;background-size:cover;background-position:center right} body.brand-smart .hero h1{color:#fff;letter-spacing:-.022em} body.brand-smart .hero .lead{color:#e7edf3} body.brand-smart .hero .lead b{color:#fff} body.brand-smart .hero .h-note{color:#cfd8ee} 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:#3DA6E8} /* 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} /* LE HEROS N EST PLUS CLAIR, ET CETTE REGLE LE CROYAIT ENCORE. Son ancien commentaire disait « boutons du hero clair : redevenir fonces (sinon texte clair invisible) ». Depuis les fonds au couchant, le heros est sombre (#0b0f15) : le texte fonce y tombait a 1,10 de contraste, soit l'inverse exact du defaut qu'elle corrigeait. Meme famille que le H2 a 1,07 : une valeur juste dans un contexte, transposee dans un autre. */ body.brand-smart .hero.canvas .btn--secondary{--btn-fg:#eaf2fb;--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:#eaf2fb} /* 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:#3DA6E8} body.brand-smart .zsc-step.on{border-left-color:var(--accent)} body.brand-smart .announce a{color:#3DA6E8} /* dataviz scrollytelling + mock : tout en teal (fin de l'arc-en-ciel) */ body.brand-smart .zsc-kpi.k1 .v{color:#3DA6E8} body.brand-smart .zsc-kpi.k2 .v{color:#3DA6E8} body.brand-smart .zsc-kpi.k3 .v{color:#3DA6E8} body.brand-smart .zsc-bars span{background:linear-gradient(180deg,#3DA6E8,#3DA6E8)} body.brand-smart .zsc-spark .ln{stroke:#3DA6E8;filter:drop-shadow(0 0 6px rgba(0,169,184,.45))} body.brand-smart .zsc-spark .dt{stroke:#3DA6E8} body.brand-smart .zsc-spark .cap{color:#3DA6E8} 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:#3DA6E8;color:#fff} body.brand-smart .zsc-topbar .live{color:#3DA6E8} body.brand-smart .zsc-topbar .live::before{background:#3DA6E8;box-shadow:0 0 8px #3DA6E8} body.brand-smart .mock .m-line.b{background:#3DA6E8} body.brand-smart .mock .m-line.c{background:#3DA6E8} /* 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:#3DA6E8} 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:#3DA6E8;--cyan:#3DA6E8} body.brand-smart .codex .maxim .accentline{color:#3DA6E8} /* 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, Smart (statique, tête ink discrète) + ambiance unique */ .hero canvas.hero-fx[data-zcanvas]{display:none!important} .site-foot zerval-footer-motion,zerval-footer-motion{display:none!important} .hero.canvas{overflow:hidden} .hero.canvas::after{content:"";position:absolute;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 : bande #urgence rouge -> Ink (urgence par le contenu) */ /* ============================================================ Bande d'urgence #urgence : l'urgence se dit par le CONTENU, plus par la couleur rouge de la bande. Fond INK #0F1319, texte blanc ; le liseré rouge « danger » est retiré. Le numéro reste en gras et les boutons sont inchangés (le bouton « Appeler » rouge plein reste le repère fort). À AJOUTER en fin de fichier (postérieur = l'emporte sur la l.678). ============================================================ */ #urgence.urgence, body.brand-smart #urgence.urgence{ background:#0F1319; /* INK */ color:#fff; border-left:0; /* on retire le liseré rouge (var(--danger)) */ } #urgence.urgence h2{color:#fff} #urgence.urgence p{color:#e2e8f0} /* texte clair, lisible sur INK */ /* Audit refonte : preuve par dossier scelle (Smart), remplace la bande de chiffres clonee */ .pv-dos{background:#fff;border:1px solid #cbd5e1;border-radius:6px;overflow:hidden;max-width:620px;margin:28px auto 0;text-align:left;box-shadow:0 20px 50px rgba(0,17,46,.10)} .pv-dos-h{display:flex;align-items:center;gap:12px;padding:16px 18px;background:#eaf7fc;border-bottom:1px solid #cbd5e1} .pv-dos-seal{width:44px;height:44px;flex:none;border-radius:50%;display:grid;place-items:center;color:#fff;font-size:19px;background:radial-gradient(circle at 30% 30%,#12b39a,#3DA6E8);box-shadow:0 4px 10px rgba(0,169,184,.4),inset 0 0 0 3px rgba(255,255,255,.35)} .pv-dos-t b{display:block;font-size:15px;color:#0F1319} .pv-dos-t span{font-size:12.5px;color:#526277} .pv-dos-st{margin-left:auto;font-size:10.5px;font-weight:700;letter-spacing:.08em;color:#0C8C67;border:1px solid rgba(12,140,103,.4);background:#e9f6f1;padding:4px 9px;border-radius:20px} .pv-piece{display:flex;gap:12px;align-items:baseline;padding:11px 18px;border-bottom:1px solid #eef2f7;font-size:14px;color:#0F1319} .pv-piece:last-of-type{border-bottom:0} .pv-piece .pv-d{font-size:12px;color:#3DA6E8;font-weight:700;width:52px;flex:none;font-family:"JetBrains Mono",Consolas,monospace} .pv-piece .pv-n{margin-left:auto;font-size:12px;color:#526277;font-family:"JetBrains Mono",Consolas,monospace} .pv-dos-f{padding:11px 18px;font-size:12px;color:#526277;background:#f4f7fa;border-top:1px solid #cbd5e1} /* Audit refonte : hero Smart, demonstration 8s (remplace la capture statique) */ .sd-phone{width:300px;max-width:100%;margin:0 auto;background:#fff;border-radius:26px;border:8px solid #0a2830;box-shadow:0 24px 60px rgba(0,0,0,.4);overflow:hidden;display:flex;flex-direction:column;height:560px;position:relative} .sd-top{background:#06373E;color:#fff;padding:12px 14px;display:flex;align-items:center;gap:8px;flex:none} .sd-top .sd-d{width:9px;height:9px;border-radius:50%;background:#3DA6E8} .sd-top b{font-size:13px} .sd-top .sd-tag{margin-left:auto;font-size:10px;font-weight:700;color:#9fe3c9;border:1px solid rgba(12,140,103,.5);background:rgba(12,140,103,.15);padding:3px 8px;border-radius:20px} .sd-body{flex:1;background:#F4F7FA;padding:14px;overflow:hidden;color:#0F1319;text-align:left} .sd-step{opacity:0;transform:translateY(10px);transition:opacity .5s,transform .5s} .sd-step.in{opacity:1;transform:none} .sd-sms{background:#fff;border:1px solid #CBD5E1;border-left:4px solid #C93C4B;border-radius:6px;padding:11px 12px} .sd-from{font-size:11px;color:#526277;font-weight:700} .sd-msg{font-size:14px;margin-top:4px} .sd-lnk{color:#C93C4B;word-break:break-all} .sd-sig-h{margin-top:14px;font-size:12px;font-weight:800;color:#C93C4B;display:flex;align-items:center;gap:7px;margin-bottom:8px} .sd-sig-h i{width:8px;height:8px;border-radius:50%;background:#C93C4B;animation:sdbl 1s ease-out infinite} @keyframes sdbl{0%{box-shadow:0 0 0 0 rgba(201,60,75,.5)}100%{box-shadow:0 0 0 8px rgba(201,60,75,0)}} .sd-chip{display:block;background:#fdeceb;border:1px solid #f3c9c9;border-radius:6px;padding:8px 11px;font-size:13px;color:#8a2b34;margin-bottom:7px;opacity:0;transform:translateX(-8px);transition:.4s} .sd-chip.in{opacity:1;transform:none} .sd-plan{margin-top:14px;background:#e9f6f1;border:1px solid #bfe3d5;border-radius:6px;padding:12px} .sd-plan-h{font-size:12px;font-weight:800;color:#0C8C67;margin-bottom:8px} .sd-plan ol{margin:0;padding-left:18px} .sd-plan li{font-size:13px;margin-bottom:5px} .sd-go{margin-top:10px;display:block;text-align:center;background:#3DA6E8;color:#00232a;font-weight:800;font-size:13px;padding:9px;border-radius:6px;text-decoration:none} .sd-replay{position:absolute;bottom:10px;left:50%;transform:translateX(-50%);background:rgba(0,0,0,.06);border:0;color:#526277;font-weight:700;font-size:12px;cursor:pointer;padding:5px 12px;border-radius:20px} @media(prefers-reduced-motion:reduce){.sd-step{opacity:1;transform:none}.sd-chip{opacity:1;transform:none}.sd-sig-h i{animation:none}} /* ===== Reflet de lumiere, glint blanc sur les boutons (18/08/2026) ===== Une lumiere BLANCHE, discrete, qui glisse sur les boutons (reflet de verre). - au survol : sur tous les boutons (retour d'interaction, effet premium) - lent & periodique : uniquement sur le bouton principal (CTA), ~1,1 s de passage toutes les 8 s, pour attirer l'oeil sans agiter la page. Blanc, jamais or. Se desactive si prefers-reduced-motion. */ .btn{position:relative;overflow:hidden} /* glint au survol, tous les boutons */ .btn::after{ content:"";position:absolute;top:0;bottom:0;left:0;width:100%; pointer-events:none;z-index:1; background:linear-gradient(105deg,transparent 40%,rgba(255,255,255,.40) 50%,transparent 60%); transform:translateX(-130%); } .btn:hover::after{ transition:transform .7s cubic-bezier(.22,.61,.36,1); transform:translateX(130%); } /* passage lent & periodique, bouton principal seulement */ .btn--primary::before{ content:"";position:absolute;top:0;bottom:0;left:0;width:100%; pointer-events:none;z-index:1; background:linear-gradient(105deg,transparent 44%,rgba(255,255,255,.28) 50%,transparent 56%); transform:translateX(-130%); animation:z-btn-glint 8s ease-in-out infinite; } @keyframes z-btn-glint{ 0%{transform:translateX(-130%)} 14%{transform:translateX(130%)} 100%{transform:translateX(130%)} } @media(prefers-reduced-motion:reduce){ .btn::after,.btn--primary::before{animation:none;transition:none;transform:translateX(-130%)} } /* Boutons secondaires lisibles dans la section sombre .zsys (fix contraste 20/08) */ .zsys .btn--secondary{--btn-fg:#eaf2fb;--btn-bd:rgba(255,255,255,.42)} .zsys .btn--secondary:hover{--btn-bg:#fff;--btn-fg:var(--midnight);--btn-bd:#fff} .zsys .btn--tertiary{--btn-fg:#eaf7fc} /* Hero mobile L'Affut : crop portrait centre serval */ @media(max-width:768px){ .hero.canvas{background-position:center!important;background-size:cover!important;min-height:82vh} .hero.canvas::after{background:linear-gradient(180deg,rgba(8,11,16,.62) 0%,rgba(8,11,16,.42) 46%,rgba(8,11,16,.40) 66%,rgba(8,11,16,.70) 100%)} .hero h1,.hero .lead{text-shadow:0 2px 16px rgba(0,0,0,.6)} .hero .wrap{padding-top:30px} } /* ===== L'Affut composants v2 : anti-slop (asymetrie, cotes mono, lampes, filets) ===== */ /* En-tetes de section : ligne de guet a gauche, JAMAIS centre */ .sec-head{max-width:64ch;margin-left:0;margin-right:auto;text-align:left;align-items:flex-start;padding-left:20px;border-left:2px solid var(--accent);gap:12px} .sec-head h2{letter-spacing:-.015em} .zsys-head{max-width:64ch;margin-left:0;margin-right:auto;text-align:left;padding-left:20px;border-left:2px solid var(--accent)} /* Eyebrows / cotes : la voix mono du fait, pas un gros label marketing */ .sec-num,.zsys-eyebrow{font-family:var(--mono);font-weight:500;letter-spacing:.08em;color:var(--accent-deep);text-transform:uppercase;font-size:12.5px} .section--dark .sec-num,.section--deep .sec-num,.section--dark .zsys-eyebrow{color:var(--accent)} /* Bandeau reperes : numeros decoratifs retires, pastilles -> filets mono */ .ref4-tag{background:transparent;border:1px solid var(--border);color:var(--ink);border-radius:4px;font-family:var(--mono);font-size:12px;letter-spacing:.01em;font-weight:500} /* La lampe, jamais la coche : mini-plan Smart */ .ov-step span{font-size:0!important;width:11px;height:11px;border-radius:50%} .ov-step.done span{background:var(--ok)} .ov-step.now span{background:var(--accent);font-size:10.5px!important;width:18px;height:18px;color:#fff} .ov-step.done{text-decoration:none;color:var(--muted)} /* Coche du bandeau confiance -> lampe pleine */ /* 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 smart reconstruites (bespoke, chaleureux) ============ */ /* --- mo --- */ .mo{ position:relative; background:var(--surface); padding:5.5rem 0 6rem; overflow:hidden; } .mo::before{ content:""; position:absolute; inset:0 0 auto 0; height:1px; background:var(--border); pointer-events:none; } /* En-tete : ligne de guet, alignee a gauche */ .mo-guet{ border-left:2px solid var(--accent); padding-left:1.15rem; max-width:62ch; margin:0 0 3.75rem; } .mo-cote{ margin:0 0 .8rem; font-family:var(--mono); font-size:.74rem; letter-spacing:.1em; text-transform:uppercase; color:var(--accent-deep); } .mo-titre{ margin:0 0 1rem; font-family:var(--display); font-weight:500; font-size:clamp(1.7rem,1.1rem + 2.3vw,2.6rem); line-height:1.12; color:var(--ink); } .mo-sous{ margin:0; font-family:var(--font); font-size:1.06rem; line-height:1.65; color:var(--muted); } /* Frise : rail hairline + moments */ .mo-frise{ position:relative; list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(3,1fr); gap:2rem; } .mo-frise::before{ content:""; position:absolute; top:5px; left:10%; right:10%; height:1px; background:var(--border); pointer-events:none; } .mo-moment{ position:relative; display:flex; flex-direction:column; padding-top:1.9rem; } /* Lampes douces, posees sur le rail */ .mo-lampe{ position:absolute; top:0; left:0; width:11px; height:11px; border-radius:50%; box-shadow:0 0 0 6px var(--surface); } .mo-lampe--ok{ background:var(--ok); box-shadow:0 0 0 6px var(--surface); } .mo-lampe--signal{ background:var(--accent); box-shadow:0 0 0 6px var(--surface); } .mo-lampe--fauve{ background:var(--fauve); box-shadow:0 0 0 6px var(--surface); } .mo-quand{ margin:0 0 .55rem; font-family:var(--mono); font-size:.72rem; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); } .mo-moment--fin .mo-quand{color:var(--fauve-deep);} .mo-nom{ margin:0 0 .7rem; font-family:var(--display); font-weight:500; font-size:1.34rem; line-height:1.2; color:var(--ink); } .mo-texte{ margin:0 0 1.5rem; font-family:var(--font); font-size:.99rem; line-height:1.62; color:var(--muted); text-align:justify; hyphens:auto; } .mo-lien{ align-self:flex-start; margin-top:auto; } @media (max-width:620px){ .mo{padding:4rem 0 4.5rem;} .mo-guet{margin-bottom:2.75rem;} .mo-frise{ grid-template-columns:1fr; gap:2.25rem; } .mo-frise::before{ top:5px; bottom:5px; left:5px; right:auto; width:1px; height:auto; } .mo-moment{ padding-top:0; padding-left:1.9rem; } .mo-lampe{top:5px;} } @media (prefers-reduced-motion:reduce){ .mo-lien{transition:none;} } /* --- si --- */ .si { background: var(--surface); color: var(--ink); padding: 5rem 0 5.5rem; } .si .si-guet { text-align: left; border-left: 2px solid var(--accent); padding-left: 1.1rem; margin-bottom: 2.75rem; max-width: 640px; } .si .si-cote { font-family: var(--mono); font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; color: var(--accent-deep); margin: 0 0 .7rem; } .si .si-titre { font-family: var(--display); font-weight: 500; font-size: clamp(1.7rem, 3.6vw, 2.4rem); line-height: 1.12; color: var(--ink); margin: 0 0 .85rem; } .si .si-sous { font-family: var(--font); font-size: 1.02rem; line-height: 1.55; color: var(--muted); margin: 0; } .si .si-liste { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 0; border: 1px solid var(--border); border-radius: 6px; overflow: hidden; background: var(--paper); } .si .si-item { border-bottom: 1px solid var(--border); border-right: 1px solid var(--border); } .si .si-item:nth-child(2n) { border-right: 0; } .si .si-item:nth-last-child(-n+2) { border-bottom: 0; } .si .si-carte { display: flex; align-items: flex-start; gap: 1rem; padding: 1.35rem 1.4rem; text-decoration: none; color: inherit; background: var(--paper); transition: background .18s ease; height: 100%; } .si .si-carte:hover, .si .si-carte:focus-visible { background: color-mix(in srgb, var(--accent) 6%, var(--paper)); outline: none; } .si .si-lampe { flex: 0 0 auto; width: 9px; height: 9px; border-radius: 50%; background: var(--accent); margin-top: .5rem; } .si .si-corps { display: flex; flex-direction: column; gap: .28rem; min-width: 0; flex: 1 1 auto; } .si .si-ref { font-family: var(--mono); font-size: .66rem; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); } .si .si-nom { font-family: var(--font); font-weight: 600; font-size: 1.06rem; line-height: 1.25; color: var(--ink); } .si .si-desc { font-family: var(--font); font-size: .92rem; line-height: 1.4; color: var(--muted); } .si .si-fleche { flex: 0 0 auto; font-family: var(--mono); font-size: 1rem; color: var(--accent-deep); margin-top: .15rem; transform: translateX(0); transition: transform .18s ease; } .si .si-carte:hover .si-fleche, .si .si-carte:focus-visible .si-fleche { transform: translateX(4px); } .si .si-nom { position: relative; } .si .si-nom::after { content: ""; position: absolute; left: 0; bottom: -3px; width: 0; height: 2px; background: var(--fauve); transition: width .2s ease; } .si .si-carte:hover .si-nom::after, .si .si-carte:focus-visible .si-nom::after { width: 1.6rem; } .si .si-doute { display: inline-flex; align-items: center; gap: .6rem; margin-top: 1.4rem; padding: .55rem .2rem; text-decoration: none; font-family: var(--font); font-size: .98rem; color: var(--muted); transition: color .18s ease; } .si .si-doute:hover, .si .si-doute:focus-visible { color: var(--accent-deep); outline: none; } .si .si-doute .si-fleche { margin-top: 0; } .si .si-doute:hover .si-fleche, .si .si-doute:focus-visible .si-fleche { transform: translateX(4px); } @media (max-width: 620px) { .si { padding: 3.5rem 0 4rem; } .si .si-liste { grid-template-columns: 1fr; } .si .si-item { border-right: 0; border-bottom: 1px solid var(--border); } .si .si-item:last-child { border-bottom: 0; } .si .si-carte { padding: 1.2rem 1.15rem; } } @media (prefers-reduced-motion: reduce) { .si .si-carte, .si .si-fleche, .si .si-nom::after, .si .si-doute { transition: none; } } /* --- ur --- */ .ur{ background:var(--surface); padding:56px 0; } .ur .ur-bande{ position:relative; background:var(--paper); border:1px solid var(--border); border-left:3px solid var(--crit); border-radius:6px; padding:32px 34px; } .ur .ur-bande::before{ content:""; position:absolute; inset:0 0 0 3px; background:linear-gradient(90deg, transparent, transparent); border-radius:0 6px 6px 0; pointer-events:none; } .ur .ur-tete{ display:flex; align-items:center; gap:11px; position:relative; z-index:1; } .ur .ur-lampe{ width:9px; height:9px; border-radius:50%; background:var(--crit); flex:0 0 auto; box-shadow:none; } .ur .ur-cote{ font-family:var(--mono); font-size:12px; letter-spacing:.1em; text-transform:uppercase; color:var(--crit); font-weight:600; } .ur .ur-corps{ display:flex; align-items:flex-end; justify-content:space-between; gap:40px; margin-top:16px; position:relative; z-index:1; } .ur .ur-texte{ max-width:640px; } .ur .ur-titre{ font-family:var(--display); font-weight:600; font-size:clamp(1.5rem, 1.15rem + 1.5vw, 2rem); line-height:1.16; color:var(--ink); margin:0 0 12px; } .ur .ur-prose{ font-family:var(--font); font-size:1.02rem; line-height:1.68; color:var(--ink); text-align:justify; hyphens:auto; margin:0; } .ur .ur-prose strong{ font-weight:700; color:var(--crit); } .ur .ur-actions{ display:flex; flex-direction:column; gap:12px; flex:0 0 auto; } .ur .ur-btn{ white-space:nowrap; text-align:center; } @media (max-width:620px){ .ur{ padding:40px 0; } .ur .ur-bande{ padding:26px 22px; } .ur .ur-corps{ flex-direction:column; align-items:stretch; gap:24px; } .ur .ur-prose{ text-align:left; } .ur .ur-actions{ flex-direction:column; } .ur .ur-btn{ width:100%; white-space:normal; } } @media (prefers-reduced-motion:reduce){ .ur .ur-bande::before{ background:none; } .ur .ur-lampe{ box-shadow:none; } } /* --- en --- */ .en { position: relative; background: var(--deep); color: var(--muted-invert); padding: 84px 0; overflow: hidden; } .en::before { content: ""; position: absolute; inset: 0; background-image: linear-gradient(rgba(61,166,232,.045) 1px, transparent 1px), linear-gradient(90deg, rgba(61,166,232,.045) 1px, transparent 1px); background-size: 52px 52px; background-position: -1px -1px; pointer-events: none; } .en .wrap { position: relative; z-index: 1; } .en-guet { text-align: left; border-left: 2px solid var(--accent); padding-left: 20px; max-width: 780px; margin-bottom: 52px; } .en-cote { font-family: var(--mono); text-transform: uppercase; letter-spacing: .1em; font-size: 12px; color: var(--accent); margin: 0 0 14px; } .en-titre { font-family: var(--display); font-weight: 500; color: var(--paper); font-size: clamp(1.7rem, 3.4vw, 2.5rem); line-height: 1.14; margin: 0 0 18px; } .en-intro { font-family: var(--font); color: var(--muted-invert); font-size: 1.02rem; line-height: 1.65; text-align: justify; hyphens: auto; margin: 0; } .en-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; } .en-col { background: var(--midnight); border: 1px solid rgba(255,255,255,.11); border-radius: 6px; padding: 28px 26px; } .en-col--fait { border-top: 2px solid var(--ok); } .en-col--limite { border-top: 2px solid var(--crit); } .en-etiq { display: flex; align-items: center; gap: 10px; font-family: var(--mono); text-transform: uppercase; letter-spacing: .1em; font-size: 12px; color: var(--paper); margin: 0 0 16px; } .en-phrase { font-family: var(--font); color: var(--paper); font-size: 1.04rem; line-height: 1.5; margin: 0 0 22px; padding-bottom: 20px; border-bottom: 1px solid rgba(255,255,255,.11); } .en-liste { list-style: none; margin: 0; padding: 0; } .en-item { display: flex; align-items: flex-start; gap: 12px; padding: 13px 0; border-bottom: 1px solid rgba(255,255,255,.07); } .en-item:last-child { border-bottom: 0; } .en-txt { font-family: var(--font); color: var(--muted-invert); font-size: .95rem; line-height: 1.55; } .en-txt strong { color: var(--paper); font-weight: 600; } .en-lampe { flex: 0 0 auto; width: 9px; height: 9px; border-radius: 50%; margin-top: 7px; } .en-etiq .en-lampe { margin-top: 0; } .en-lampe--ok { background: var(--ok); box-shadow: 0 0 0 3px rgba(12,140,103,.16); } .en-lampe--crit { background: var(--crit); box-shadow: 0 0 0 3px rgba(201,60,75,.16); } .en-note { font-family: var(--font); color: var(--muted-invert); font-size: .9rem; line-height: 1.55; font-style: italic; margin: 22px 0 0; padding-top: 18px; border-top: 1px solid rgba(255,255,255,.11); } @media (max-width: 620px) { .en { padding: 60px 0; } .en-guet { margin-bottom: 38px; padding-left: 15px; } .en-intro { text-align: left; } .en-cols { grid-template-columns: 1fr; gap: 18px; } .en-col { padding: 24px 20px; } } @media (prefers-reduced-motion: reduce) { .en, .en * { transition: none !important; animation: none !important; } } /* --- tf --- */ .tf{ position:relative; background:var(--surface); padding:88px 0; color:var(--ink); } .tf .tf-guet{ text-align:left; border-left:2px solid var(--accent); padding-left:18px; max-width:720px; margin-bottom:48px; } .tf .tf-cote{ display:block; font-family:var(--mono); font-size:.72rem; letter-spacing:.1em; text-transform:uppercase; color:var(--accent-deep); margin-bottom:14px; } .tf .tf-titre{ font-family:var(--display); font-weight:600; font-size:clamp(1.9rem,4vw,2.7rem); line-height:1.08; margin:0 0 16px; color:var(--ink); } .tf .tf-sous{ font-family:var(--font); font-size:1.03rem; line-height:1.6; color:var(--muted); margin:0; text-align:justify; hyphens:auto; } .tf .tf-grille{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; align-items:stretch; } .tf .tf-offre{ position:relative; display:flex; flex-direction:column; background:var(--paper); border:1px solid var(--border); border-radius:6px; padding:30px 26px; } .tf .tf-offre--phare{ border-color:var(--fauve); box-shadow:inset 0 0 0 1px var(--fauve); } .tf .tf-etiquette{ position:absolute; top:-12px; left:26px; font-family:var(--mono); font-size:.68rem; letter-spacing:.08em; text-transform:uppercase; background:var(--fauve); color:#1B1712; padding:5px 12px; border-radius:6px; } .tf .tf-tete{ border-bottom:1px solid var(--border); padding-bottom:18px; margin-bottom:18px; } .tf .tf-libelle{ display:block; font-family:var(--mono); font-size:.72rem; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); margin-bottom:10px; } .tf .tf-prix{ font-family:var(--display); font-weight:600; font-size:2.6rem; line-height:1; color:var(--ink); margin:0; display:flex; align-items:baseline; gap:8px; } .tf .tf-des{ font-family:var(--mono); font-size:.78rem; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); font-weight:400; } .tf .tf-devise{ font-family:var(--mono); font-size:.82rem; letter-spacing:.05em; color:var(--muted); font-weight:400; } .tf .tf-desc{ font-family:var(--font); font-size:.96rem; line-height:1.55; color:var(--muted); margin:0 0 20px; } .tf .tf-puces{ list-style:none; margin:0 0 26px; padding:0; display:flex; flex-direction:column; gap:12px; } .tf .tf-puces li{ display:flex; align-items:baseline; gap:11px; font-family:var(--font); font-size:.94rem; line-height:1.4; color:var(--ink); } .tf .tf-lampe{ flex:0 0 auto; width:8px; height:8px; border-radius:50%; background:var(--accent); transform:translateY(-1px); } .tf .tf-lampe--fauve{ background:var(--fauve); } .tf .tf-cta{ margin-top:auto; width:100%; text-align:center; } @media (max-width:900px){ .tf .tf-grille{grid-template-columns:1fr;max-width:460px;} .tf .tf-offre--phare{order:-1;} } @media (max-width:620px){ .tf{padding:60px 0;} .tf .tf-guet{margin-bottom:36px;} .tf .tf-prix{font-size:2.3rem;} } @media (prefers-reduced-motion:reduce){ .tf *{transition:none !important;animation:none !important;} } /* --- df --- */ .df { background: var(--surface); padding: 72px 0; position: relative; } .df::before { content: ""; position: absolute; inset: 0; background: radial-gradient(60% 120% at 8% -10%, transparent, transparent); pointer-events: none; } .df .df-band { position: relative; max-width: 720px; background: var(--paper); border: 1px solid var(--border); border-radius: 6px; padding: 40px 44px; } .df .df-veille { display: flex; align-items: center; gap: 10px; border-left: 2px solid var(--accent); padding-left: 14px; margin-bottom: 20px; } .df .df-lamp { width: 9px; height: 9px; border-radius: 50%; background: var(--accent); flex: none; box-shadow: 0 0 0 4px rgba(61,166,232,.14); } .df .df-lamp--ok { width: 8px; height: 8px; background: var(--ok); box-shadow: 0 0 0 4px rgba(12,140,103,.14); } .df .df-cote { font-family: var(--mono); text-transform: uppercase; letter-spacing: .1em; font-size: 12px; color: var(--muted); } .df .df-titre { font-family: var(--display); font-weight: 500; font-size: clamp(28px, 4vw, 40px); line-height: 1.12; color: var(--ink); margin: 0 0 16px; text-align: left; } .df .df-texte { font-family: var(--font); font-size: 17px; line-height: 1.6; color: var(--ink); max-width: 52ch; margin: 0 0 28px; } .df .df-actions { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; } .df .df-rassure { display: flex; align-items: center; gap: 10px; font-family: var(--font); font-size: 14px; color: var(--muted); margin: 24px 0 0; padding-top: 20px; border-top: 1px solid var(--border); } @media (max-width: 620px) { .df { padding: 52px 0; } .df .df-band { padding: 30px 24px; } .df .df-actions { flex-direction: column; align-items: stretch; } .df .df-actions .btn { width: 100%; text-align: center; } } @media (prefers-reduced-motion: reduce) { .df * { transition: none !important; animation: none !important; } } /* Hero L'Affut smart : petite carte "3 signaux" dans le hero, demo complete dessous (24/08) */ /* UN PANNEAU POSE SUR UNE PHOTO A BESOIN D UNE ASSISE. Cinq pour cent de blanc n'est pas une surface : le serval traversait le texte. Fond sombre et flou d'arriere-plan. Mesure dans le pire cas, le pelage eclaire : titre 6,71, puces 9,77, lien 5,07, au-dessus du seuil AA de 4,5. */ .sd-card{background:rgba(9,13,19,.78);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border:1px solid rgba(255,255,255,.10);border-left:2px solid #C93C4B;border-radius:8px;padding:16px 18px;max-width:340px;margin-left:auto;box-shadow:0 18px 44px rgba(0,0,0,.42)} .sd-card-h{display:flex;align-items:center;gap:8px;font-size:13.5px;font-weight:800;color:#ff9a9a;margin-bottom:12px} .sd-card-h i{width:8px;height:8px;border-radius:50%;background:#C93C4B;flex:none} .sd-card-chip{display:block;background:rgba(201,60,75,.16);border:1px solid rgba(201,60,75,.42);border-radius:6px;padding:8px 11px;font-size:var(--z-t1,12px);color:#f7e2e2;margin-bottom:7px} .sd-card-go{display:inline-block;margin-top:6px;color:#3DA6E8;font-weight:700;font-size:13px;text-decoration:none} .sd-card-go:hover{color:#fff} .hero-demo.sd-demo{position:relative;z-index:2;background:#0b0f15;border-top:1px solid rgba(255,255,255,.08);padding:36px 0 10px} .hero-demo.sd-demo .wrap{max-width:1120px;margin:0 auto;padding:0 24px;display:flex;justify-content:center} @media(max-width:820px){.sd-card{margin:0 auto}} /* ===== 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 SECTIONS SOMBRES GARDENT LA MAIN SUR LEURS TITRES `body.brand-smart h1, h2, h3…` pose l'encre du theme clair et sa specificite (0,1,2) ecrase toutes les regles de section sombre, y compris `.section--dark h2` (0,1,1) qui pose pourtant #fff. Resultat mesure au DOM le 31/08/2026 sur la home : le H2 « Honnetes sur ce qu'on peut, et sur ce qu'on ne peut pas » etait rendu en rgb(23,26,31) sur rgb(15,19,25), soit un contraste de 1,07 la ou le minimum WCAG pour un grand titre est de 3. Le titre le plus important de la page etait invisible, et le kicker du hero avec lui, a 1,10. ON NE CORRIGE PAS TITRE PAR TITRE. Ce serait recommencer a chaque section sombre ajoutee. On redonne la main aux conteneurs sombres, avec la meme specificite que la regle de marque, et l'affaire est close pour la suite. =========================================================================== */ body.brand-smart .en .en-titre, body.brand-smart .en h2, body.brand-smart .en h3, body.brand-smart .section--dark h1, body.brand-smart .section--dark h2, body.brand-smart .section--dark h3, body.brand-smart .urgence h2, body.brand-smart .final h2, body.brand-smart .hero h1 { color: var(--paper); } /* Le kicker du hero, meme cause : il heritait de l'encre sur fond nuit. */ body.brand-smart .hero .eyebrow, body.brand-smart .en .en-cote { color: var(--muted-invert); } /* =========================================================================== 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} /* UNE PASTILLE SOMBRE POUR UN LOGO CLAIR SUR UNE SECTION CLAIRE. Le macaron d'adhesion mesure 212/255 sur ses pixels opaques : pose tel quel sur « Ce sur quoi il s'appuie », qui est une section claire, il s'efface. RIEN DE TEL N EXISTAIT. Les seuls fonds sombres des feuilles sont des SECTIONS entieres (`.section--deep`, `.section--dark`) ou des panneaux de contenu (`.en-col`, `.ap-preview`) : aucun porte-logo a l'echelle d'un element. Cherche avant d'ecrire, puis ecrit faute de l'avoir trouve. LE BLOC CYBERMALVEILLANCE N EN A PAS BESOIN, il est opaque et porte son propre fond ; il tient dans le meme cadre pour que les deux appartenances se lisent comme une seule affirmation, pas comme deux vignettes posees. */ .cartouche-appartenance { display: flex; flex-wrap: wrap; align-items: center; gap: 18px; margin-top: 6px; padding: 18px 20px; background: var(--deep); border-radius: 6px; } .cartouche-appartenance img { flex: 0 0 auto; height: auto; } .cartouche-appartenance img.ca-macaron { width: 96px; } .cartouche-appartenance img.ca-bloc { width: 100%; max-width: 262px; } .cartouche-appartenance p { flex: 1 1 100%; margin: 0; font-size: 13px; line-height: 1.5; color: var(--muted-invert); } .cartouche-appartenance p b { font-weight: 600; color: rgba(255,255,255,.9); } /* --------------------------------------------------------------------------- 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{ /* 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 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)} /* La signature d'article. Sa couleur etait ecrite dans l'attribut `style` de chaque page, donc imbattable par une regle : elle est rendue a la feuille. */ .page-byline{color:var(--muted)} .page-byline strong{color:var(--ink)} :is(.section--dark,.section--deep,.canvas,.final,.urgence) .page-byline{color:var(--muted-invert)} :is(.section--dark,.section--deep,.canvas,.final,.urgence) .page-byline strong{color:var(--ink-invert)} /* Les titres du pied. La regle d'inversion nommait `h4` ; le pied ecrit `h3`. Trente-quatre pages servaient donc leurs intertitres de pied en #171A1F sur #171A1F, soit 1,00 : invisibles, sans qu'aucune erreur ne se leve. */ body.brand-smart .site-foot :is(h1,h2,h3,h4){color:#fff} /* Etats et pastilles pointes par la mesure. */ .pv-piece .pv-d{color:var(--accent-deep)} .pv-dos-st{color:var(--ok-ink)} .pv-dos-seal{color:var(--accent-ink)} .sd-plan-h{color:var(--ok-ink)} .mo-moment--fin .mo-quand{color:var(--fauve-ink)} .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} }