/* A2Z refonte 2026 - DA maquette, scopée .a2z-v2 (généré depuis mca-concept-mockup) */ .a2z-v2{ &{ --red:#E30613; --red-700:#B70410; --red-050:#FDECEC; --teal:#2F7D92; --teal-700:#245F70; --teal-050:#EAF3F5; --green:#1E9E4A; --green-050:#EAF6EE; --ink:#141922; --ink-2:#3B434F; --slate:#616B79; --mute:#8A93A0; --bg:#FFFFFF; --surface:#F6F8FA; --surface-2:#EFF3F6; --line:#E5EAEF; --dark:#101620; --dark-2:#161E2A; --radius:16px; --radius-lg:16px; --radius-band:22px; --shadow-sm:0 1px 2px rgba(16,22,32,.06),0 4px 14px rgba(16,22,32,.05); --shadow-md:0 10px 30px rgba(16,22,32,.10),0 3px 8px rgba(16,22,32,.06); --shadow-lg:0 30px 70px rgba(16,22,32,.16),0 8px 24px rgba(16,22,32,.10); --maxw:1200px; --sans:'Hanken Grotesk',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif; --disp:'Bricolage Grotesque','Hanken Grotesk',sans-serif; } *{box-sizing:border-box;margin:0;padding:0} &{font-family:var(--sans);color:var(--ink);line-height:1.6;font-size:17px;-webkit-font-smoothing:antialiased} img{max-width:100%;display:block} a{color:inherit;text-decoration:none} .wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px} h1,h2,h3{font-family:var(--disp);letter-spacing:-.02em;line-height:1.08;color:var(--ink)} .eyebrow{display:inline-flex;align-items:center;gap:11px;font-family:var(--sans);font-weight:600;font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:var(--teal-700)} .eyebrow:before{content:"";width:26px;height:2px;background:currentColor;opacity:.55} .head.center .eyebrow{justify-content:center} .eyebrow.red{color:var(--red)} section{position:relative} /* ---------- Buttons ---------- */ .btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;font-weight:600;font-size:15.5px;padding:13px 22px;border-radius:11px;border:1.5px solid transparent;cursor:pointer;transition:transform .18s ease,box-shadow .18s ease,background .18s,border-color .18s;white-space:nowrap} .btn svg{width:17px;height:17px} .btn-primary{background:var(--red);color:#fff;box-shadow:var(--shadow-sm)} .btn-primary:hover{transform:translateY(-2px);background:var(--red-700);box-shadow:var(--shadow-md)} .btn-ghost{background:#fff;color:var(--ink);border-color:var(--line);box-shadow:var(--shadow-sm)} .btn-ghost:hover{transform:translateY(-2px);border-color:#cfd7de;box-shadow:var(--shadow-md)} .btn-outline{background:transparent;color:#fff;border-color:rgba(255,255,255,.35)} .btn-outline:hover{transform:translateY(-2px);background:rgba(255,255,255,.08);border-color:#fff} .btn-lg{padding:16px 28px;font-size:16.5px} /* ---------- Header ---------- */ header{position:sticky;top:0;z-index:100;background:rgba(255,255,255,.82);backdrop-filter:saturate(180%) blur(14px);-webkit-backdrop-filter:saturate(180%) blur(14px);border-bottom:1px solid transparent;transition:border-color .3s,box-shadow .3s} header.scrolled{border-color:var(--line);box-shadow:0 1px 0 rgba(16,22,32,.04)} .langs{display:flex;gap:2px;align-items:center} .langs b{color:#fff} .nav{display:flex;align-items:center;justify-content:space-between;height:74px;gap:20px} .brand{display:flex;align-items:center;gap:11px;flex-shrink:0} .brand img{height:34px;width:auto} .navlinks{display:flex;gap:4px;align-items:center;margin-left:8px} .navlinks>a{position:relative;font-weight:500;font-size:15.5px;color:var(--ink-2);padding:9px 14px;border-radius:9px;transition:color .16s,background .16s} .navlinks>a:hover{color:var(--ink);background:var(--surface)} .navlinks>a.has:after{content:"";display:inline-block;width:6px;height:6px;border-right:1.6px solid var(--mute);border-bottom:1.6px solid var(--mute);transform:rotate(45deg);margin-left:7px;vertical-align:2px} .nav-cta{display:flex;gap:10px;align-items:center;flex-shrink:0} .nd-short{display:none} .nav-signin{font-weight:600;font-size:15px;color:var(--ink-2);padding:10px 6px} .nav-signin:hover{color:var(--red)} .burger{display:none;flex-direction:column;gap:5px;padding:10px;background:none;border:none;cursor:pointer} .burger span{width:22px;height:2px;background:var(--ink);border-radius:2px} @media(max-width:1160px){.nav-see{display:none}} /* ---------- Language peek (left edge) ---------- */ .langpeek{position:fixed;left:0;top:50%;transform:translateY(-50%);z-index:130;display:flex;flex-direction:column;gap:2px;background:rgba(255,255,255,.9);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border:1px solid var(--line);border-left:none;border-radius:0 14px 14px 0;box-shadow:var(--shadow-md);padding:8px 8px 8px 6px} .langpeek .lp-item{display:flex;align-items:center;border:none;background:none;cursor:pointer;padding:5px 6px;border-radius:8px;transition:background .18s;position:relative} .langpeek .lp-item:hover{background:var(--surface)} .langpeek .lp-item.on{background:var(--surface)} .langpeek .lp-item.on:before{content:"";position:absolute;left:-6px;top:50%;transform:translateY(-50%);width:3px;height:20px;background:var(--red);border-radius:0 3px 3px 0} .langpeek .flag{width:26px;height:19px;border-radius:4px;overflow:hidden;box-shadow:0 0 0 1px rgba(0,0,0,.08);flex-shrink:0;display:block;filter:grayscale(.6) opacity(.65);transition:filter .2s} .langpeek .flag svg{width:100%;height:100%;display:block} .langpeek .lp-item:hover .flag,.langpeek .lp-item.on .flag{filter:none} .langpeek .lname{max-width:0;overflow:hidden;white-space:nowrap;font-size:12.5px;font-weight:600;color:var(--ink-2);opacity:0;transition:max-width .28s ease,opacity .28s ease,margin .28s ease} /* peek only on wide screens where the centred content leaves left-margin room (no overlap) */ @media(max-width:1300px){.langpeek{display:none}} /* ---------- Hero ---------- */ .hero{padding:76px 0 60px;position:relative;overflow:hidden} .hero-veil{display:none} .hero:before{content:"";position:absolute;inset:0;z-index:-2;background: radial-gradient(1100px 520px at 82% -8%,rgba(47,125,146,.14),transparent 60%), radial-gradient(760px 520px at 8% 4%,rgba(227,6,19,.07),transparent 55%), linear-gradient(180deg,#fbfcfd 0%,#fff 44%)} .hero:after{content:"";position:absolute;inset:0;z-index:-1;opacity:.5; background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px); background-size:52px 52px;-webkit-mask-image:radial-gradient(760px 420px at 78% 8%,#000,transparent 72%);mask-image:radial-gradient(760px 420px at 78% 8%,#000,transparent 72%)} .hero-grid{display:grid;grid-template-columns:1fr 1.04fr;gap:56px;align-items:center} .badge{display:inline-flex;align-items:center;gap:11px;font-size:13px;font-weight:600;letter-spacing:.11em;text-transform:uppercase;color:var(--ink-2);margin-bottom:22px} .badge .swiss{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;background:var(--red);border-radius:4px;position:relative} .badge .swiss:before{content:"";position:absolute;width:11px;height:3px;background:#fff} .badge .swiss:after{content:"";position:absolute;width:3px;height:11px;background:#fff} h1.hero-h1{font-size:clamp(40px,5.6vw,66px);font-weight:700;letter-spacing:-.035em} h1.hero-h1 .sep{color:var(--red);font-weight:600;margin:0 .12em} h1.hero-h1 .g{color:var(--teal-700)} .hero-sub{font-size:19px;color:var(--slate);margin:22px 0 30px;max-width:540px} .hero-actions{display:flex;gap:13px;flex-wrap:wrap;align-items:center} .hero-trust{display:flex;gap:26px;margin-top:34px;flex-wrap:wrap} .hero-trust .t{display:flex;flex-direction:column;gap:1px} .hero-trust .t b{font-family:var(--disp);font-size:24px;color:var(--ink);letter-spacing:-.02em} .hero-trust .t>span{font-size:13.5px;color:var(--mute);font-weight:500} .hero-trust .t b em{color:var(--red);font-style:normal} /* Hero product mock - morphing 3-in-1 (ERP / CRM / CMS) */ .mock{position:relative} .blob{position:absolute;z-index:-1;inset:12% 10%;filter:blur(50px);opacity:.38;background:conic-gradient(from 140deg,var(--teal),#8fbecd,var(--red),#f2a3a8,var(--teal));animation:morph 16s ease-in-out infinite alternate,spin 44s linear infinite} .orbit{position:absolute;z-index:-1;width:126%;aspect-ratio:1;left:-13%;top:-13%;overflow:visible;pointer-events:none} #orbitSpin{transform-origin:300px 300px;animation:spin 120s linear infinite} .orbit-ring{stroke:var(--teal);stroke-width:1.5;opacity:.26;stroke-linejoin:round} .orbit-nodes circle{fill:#fff;stroke:var(--teal);stroke-width:2.4} .orbit-nodes circle:nth-child(3n){stroke:var(--red)} .orbit-nodes circle:nth-child(5n){stroke:var(--green)} @media(prefers-reduced-motion:reduce){#orbitSpin{animation:none}} /* Hero gear diagram (animated MCA ERP/CRM/CMS) */ .gears{position:relative;z-index:1;width:104%;height:auto;margin-left:-2%;overflow:visible;display:block} .gear{transform-box:fill-box;transform-origin:center} .gear-body,.gear-hub{cursor:grab} .gear-body{fill:url(#gearGrad)} .gspin{animation:gearspin 22s linear infinite} .gspin-rev{animation-direction:reverse} .gear-hub{fill:#fff} .gt-mca{fill:var(--red);font-family:var(--disp);font-weight:700;font-size:23px;font-style:italic;text-anchor:middle;letter-spacing:.5px} .gt-name{fill:#4b5158;font-family:var(--disp);font-weight:800;font-size:47px;font-style:italic;text-anchor:middle;letter-spacing:1px} .wire{stroke:var(--red);stroke-width:1.5;stroke-dasharray:1.5 6;stroke-linecap:round;opacity:.8;animation:wireflow 20s linear infinite} .node{fill:var(--red)} .nlabel,.nlabel tspan{fill:#5c626b;font-family:var(--sans);font-size:14.5px;font-weight:600} @media(prefers-reduced-motion:reduce){.gspin,.wire{animation:none}} @media(max-width:560px){.gt-name{font-size:44px}} .mock-win{position:relative;background:#fff;border:1px solid var(--line);border-radius:18px;box-shadow:var(--shadow-lg);overflow:hidden;animation:floaty 7s ease-in-out infinite} .mw-bar{display:flex;align-items:center;gap:7px;padding:11px 14px;border-bottom:1px solid var(--line);background:var(--surface)} .mw-bar i{width:11px;height:11px;border-radius:50%;background:#dfe4ea} .mw-bar i:nth-child(1){background:#ff5f57}.mw-bar i:nth-child(2){background:#febc2e}.mw-bar i:nth-child(3){background:#28c840} .mw-url{margin-left:10px;font-size:11.5px;color:var(--mute);background:#fff;border:1px solid var(--line);border-radius:6px;padding:3px 10px} .mw-body{display:grid;grid-template-columns:56px 1fr;min-height:372px} .mw-side{background:var(--dark);padding:15px 0;display:flex;flex-direction:column;align-items:center;gap:11px} .mw-side .lg{width:30px;height:30px;border-radius:8px;background:var(--red);display:flex;align-items:center;justify-content:center;color:#fff;font-weight:800;font-family:var(--disp);font-size:15px;margin-bottom:4px} .mw-side .ic{width:30px;height:30px;border-radius:8px;background:rgba(255,255,255,.06);display:flex;align-items:center;justify-content:center;color:rgba(255,255,255,.5);transition:background .4s,color .4s} .mw-side .ic svg{width:16px;height:16px} .mw-side .ic.on{background:#fff;color:var(--ink)} .mw-main{padding:15px 17px 17px;display:flex;flex-direction:column} .seg{position:relative;display:grid;grid-template-columns:repeat(3,1fr);background:var(--surface);border:1px solid var(--line);border-radius:9px;padding:4px;margin-bottom:15px} .seg-ind{position:absolute;top:4px;left:4px;width:calc((100% - 8px)/3);height:calc(100% - 8px);background:var(--red);border-radius:6px;transition:transform .5s cubic-bezier(.6,.05,.2,1),background .5s} .seg button{position:relative;z-index:1;border:none;background:none;font-family:var(--disp);font-weight:700;font-size:12.5px;letter-spacing:.12em;color:var(--slate);padding:7px 0;cursor:pointer;transition:color .4s} .seg button.on{color:#fff} .stage{position:relative;flex:1;min-height:274px} .view{position:absolute;inset:0;opacity:0;transform:scale(.98) translateY(8px);filter:blur(3px);transition:opacity .55s,transform .55s,filter .55s;pointer-events:none} .view.on{opacity:1;transform:none;filter:none} .v-kpis{display:grid;grid-template-columns:repeat(3,1fr);gap:9px;margin-bottom:11px} .v-kpi{border:1px solid var(--line);border-radius:10px;padding:10px} .v-kpi>span{font-size:10.5px;color:var(--mute);font-weight:500} .v-kpi b{display:block;font-family:var(--disp);font-size:18px;margin-top:3px} .v-kpi b.up:after{content:"▲";font-size:8px;color:var(--green);margin-left:4px;vertical-align:2px} .v-chart{border:1px solid var(--line);border-radius:10px;padding:12px 12px 9px;height:158px;display:flex;flex-direction:column} .v-chart .cl{font-size:11px;color:var(--mute);font-weight:500;margin-bottom:8px} .bars{flex:1;display:flex;align-items:flex-end;gap:6px} .bars i{flex:1;border-radius:3px 3px 0 0;background:var(--teal)} .bars i.hi{background:var(--red)} .v-rows{display:flex;flex-direction:column;gap:8px} .v-row{display:flex;align-items:center;gap:11px;border:1px solid var(--line);border-radius:10px;padding:9px 12px} .v-row .av{width:32px;height:32px;border-radius:8px;flex-shrink:0;display:flex;align-items:center;justify-content:center;color:#fff;font-weight:700;font-size:12px;font-family:var(--disp)} .v-row .av svg{width:16px;height:16px;color:#fff} .v-row .rn{flex:1;min-width:0} .v-row .rn b{display:block;font-size:13px;font-weight:600;color:var(--ink)} .v-row .rn span{font-size:11px;color:var(--mute)} .v-row .rs{font-size:10.5px;font-weight:700;display:flex;align-items:center;gap:5px;white-space:nowrap} .v-row .rs:before{content:"";width:7px;height:7px;border-radius:2px;background:currentColor} @media(prefers-reduced-motion:reduce){.mock-win,.blob{animation:none}} /* ---------- Logos / sectors strip ---------- */ .trusted{padding:34px 0 6px;text-align:center} .trusted p{font-size:13px;letter-spacing:.1em;text-transform:uppercase;color:var(--mute);font-weight:600;margin-bottom:20px} .sector-row{display:flex;flex-wrap:wrap;justify-content:center;gap:14px 30px;align-items:center} .sector-row a{display:flex;align-items:center;gap:11px;color:var(--slate);font-weight:600;font-size:15.5px;filter:grayscale(1);opacity:.75;transition:.2s} .sector-row a img{height:46px;width:auto} .sector-row a:hover{filter:grayscale(0);opacity:1;color:var(--ink)} /* ---------- Section scaffolding ---------- */ .pad{padding:96px 0} .pad-sm{padding:72px 0} .head{max-width:720px;margin-bottom:52px} .head.center{margin-left:auto;margin-right:auto;text-align:center} .head h2{font-size:clamp(30px,3.9vw,44px);font-weight:700;margin-top:14px} .head p{font-size:18px;color:var(--slate);margin-top:16px} /* ---------- Pillars (ERP/CRM/CMS) ---------- */ .pillars{display:grid;grid-template-columns:repeat(3,1fr);gap:22px} .pillar{background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);padding:32px 28px;position:relative;overflow:hidden;transition:transform .2s,box-shadow .2s,border-color .2s} .pillar:hover{transform:translateY(-4px);box-shadow:var(--shadow-md);border-color:#d7dee4} .pillar .picon{width:44px;height:44px;color:var(--red);margin-bottom:20px} .pillar .picon svg{width:44px;height:44px;stroke-width:1.4} .pillar .tag{font-family:var(--disp);font-weight:700;font-size:12px;letter-spacing:.16em;color:var(--red);margin-bottom:9px} .pillar h3{font-size:22px;margin-bottom:10px} .pillar p{color:var(--slate);font-size:15.5px} .pillar.teal .picon,.pillar.teal .tag{color:var(--teal-700)} .pillar.green .picon,.pillar.green .tag{color:var(--green)} .pillar:before{content:"";position:absolute;inset:0 0 auto 0;height:5px;background:linear-gradient(90deg,var(--red),#f26a72)} .pillar.teal:before{background:linear-gradient(90deg,var(--teal),#5fa3b5)} .pillar.green:before{background:linear-gradient(90deg,var(--green),#7bc47f)} /* ---------- Collaborative ecosystem ---------- */ .eco-sec{background:#fff;overflow:hidden} .eco-sec:before{content:"";position:absolute;inset:0;z-index:0;background:radial-gradient(560px 420px at 50% 46%,rgba(47,125,146,.07),transparent 70%);pointer-events:none} .eco-sec .wrap{position:relative;z-index:1} .eco{position:relative;max-width:820px;margin:40px auto 0;aspect-ratio:860/560} .eco-orbit{position:absolute;inset:0;transform-origin:50% 50%;animation:spin 95s linear infinite} .eco-lines{position:absolute;inset:0;width:100%;height:100%;overflow:visible;z-index:0} .eco-line{stroke:var(--teal);stroke-width:1.6;stroke-dasharray:2 8;stroke-linecap:round;opacity:.45;animation:ecoflow 18s linear infinite} .eco-hub{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:3;width:176px;height:176px;border-radius:50%;background:#fff;border:1px solid var(--line);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:9px;text-align:center;padding:18px;animation:ecopulse 3.6s ease-in-out infinite} .eco-hub img{height:66px;width:auto;max-width:80%} .eco-wave{position:absolute;left:50%;top:50%;width:170px;height:170px;margin:-85px 0 0 -85px;border-radius:50%;border:2px solid var(--teal);opacity:0;pointer-events:none;z-index:1;will-change:transform,opacity} .eco-node{position:absolute;z-index:1;display:flex;flex-direction:column;align-items:center;gap:8px;width:120px;transform:translate(-50%,-50%);animation:ecocounter 95s linear infinite} .eco-node .eco-ic{width:54px;height:54px;border-radius:16px;background:#fff;border:1px solid var(--line);box-shadow:var(--shadow-md);display:flex;align-items:center;justify-content:center;color:var(--teal-700);transition:transform .22s,color .22s,box-shadow .22s} .eco-node .eco-ic svg{width:26px;height:26px} .eco-node b{font-size:14px;font-weight:600;color:var(--ink);text-align:center;line-height:1.2} .eco-node:hover .eco-ic{transform:scale(1.09);color:var(--red);box-shadow:var(--shadow-lg)} @media(prefers-reduced-motion:reduce){.eco-line,.eco-ring,.eco-orbit,.eco-node,.eco-hub{animation:none}} @media(max-width:720px){ .eco{aspect-ratio:auto;max-width:440px;display:flex;flex-direction:column;gap:12px;margin-top:26px} .eco-orbit{position:static;inset:auto;transform:none;animation:none;display:grid;grid-template-columns:1fr 1fr;gap:12px} .eco-lines,.eco-ring,.eco-wave{display:none} .eco-hub{position:static;transform:none;order:-1;width:auto;height:auto;border-radius:16px;padding:18px;animation:none;box-shadow:var(--shadow-md)} .eco-hub img{height:46px} .eco-node{position:static;transform:none;animation:none;width:auto;flex-direction:row;justify-content:flex-start;gap:11px;background:#fff;border:1px solid var(--line);border-radius:13px;padding:11px 13px;box-shadow:var(--shadow-sm)} .eco-node .eco-ic{width:42px;height:42px;flex-shrink:0} .eco-node b{text-align:left;font-size:13.5px} } /* ---------- Products (Kale / Colibri) ---------- */ .prods{display:grid;grid-template-columns:1fr 1fr;gap:24px} .prod{border-radius:var(--radius-lg);padding:38px 34px;position:relative;overflow:hidden;border:1px solid var(--line);background:#fff;transition:transform .2s,box-shadow .2s} .prod:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg)} .prod:before{content:"";position:absolute;inset:0 0 auto 0;height:5px;background:linear-gradient(90deg,var(--green),#7bc47f)} .prod img.plogo{height:56px;width:auto;margin-bottom:22px} .prod .who{display:inline-flex;align-items:center;gap:9px;font-size:12.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--teal-700);margin-bottom:14px} .prod .who:before{content:"";width:18px;height:2px;background:var(--teal-700)} .prod h3{font-size:26px;margin-bottom:10px} .prod p{color:var(--slate);margin-bottom:22px;font-size:16px} .prod ul{list-style:none;display:flex;flex-direction:column;gap:11px;margin-bottom:26px} .prod li{display:flex;gap:11px;align-items:flex-start;font-size:15.5px;color:var(--ink-2)} .prod li svg{flex-shrink:0;width:20px;height:20px;margin-top:1px} .prod .lnk{font-weight:600;color:var(--ink);display:inline-flex;align-items:center;gap:8px;font-size:15.5px} .prod .lnk svg{width:16px;height:16px;transition:transform .2s} .prod:hover .lnk svg{transform:translateX(4px)} /* ---------- Modules puzzle ---------- */ .pz{display:grid;grid-template-columns:1fr minmax(206px,232px) 1fr;gap:0 13px;align-items:center;max-width:980px;margin:6px auto 0} .pz-col{display:flex;flex-direction:column;gap:22px} .pz-mod{position:relative;z-index:1;background:#fff;border-radius:15px;padding:15px 18px;display:flex;align-items:center;gap:13px;cursor:pointer;filter:drop-shadow(0 10px 22px rgba(16,22,32,.10));will-change:transform;min-height:78px} .pz-mod .pz-ic{width:42px;height:42px;border-radius:11px;background:var(--teal-050);color:var(--teal-700);display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:background .3s,color .3s} .pz-mod .pz-ic svg{width:22px;height:22px} .pz-tx{display:flex;flex-direction:column;min-width:0} .pz-tx b{font-size:15.5px;font-weight:700;color:var(--ink);line-height:1.2} .pz-tx i{font-size:12.5px;font-style:normal;color:var(--slate);margin-top:3px} /* puzzle knob (same fill as card -> unified drop-shadow silhouette) */ .pz-mod:after{content:"";position:absolute;top:50%;width:30px;height:26px;border-radius:8px;background:inherit;transform:translateY(-50%)} .pz-mod[data-side="l"]:after{right:-15px} .pz-mod[data-side="r"]:after{left:-15px} .pz-mod.pz-hot .pz-ic{background:var(--red);color:#fff} /* core - clean white with the MCA logo */ .pz-core{position:relative;z-index:2;align-self:stretch;min-height:300px;border-radius:22px;background:#fff;border:1px solid var(--line);display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:12px;padding:22px;box-shadow:0 18px 44px rgba(16,22,32,.12)} .pz-core-logo{height:48px;width:auto} .pz-core-div{width:40px;height:2px;border-radius:2px;background:var(--line)} .pz-core-t{font-family:var(--disp);font-weight:700;font-size:19px;color:var(--ink);letter-spacing:.01em} .pz-core-s{font-size:12.5px;color:var(--mute)} @media(max-width:820px){ .pz{grid-template-columns:1fr;gap:16px;max-width:440px} .pz-col{gap:16px} .pz-core{order:-1;min-height:0;padding:24px} .pz-mod:after{display:none} } /* ---------- Features (dark) ---------- */ .dark-sec{background:var(--dark);color:#e7ecf2;border-radius:0} .dark-sec h2{color:#fff} .dark-sec .head p{color:#9aa6b4} .dark-sec .eyebrow{color:#7fc3d6} .feat-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px} .feat{background:var(--dark-2);border:1px solid rgba(255,255,255,.07);border-radius:var(--radius);padding:22px;transition:.2s} .feat:hover{border-color:rgba(127,195,214,.4);background:#1a2432} .feat h3{color:#fff;font-size:16.5px;display:flex;align-items:center;gap:9px;margin-bottom:12px} .feat h3 .fi{width:30px;height:30px;border-radius:8px;background:rgba(47,125,146,.22);display:flex;align-items:center;justify-content:center;flex-shrink:0} .feat h3 .fi svg{width:16px;height:16px;color:#7fc3d6} .feat ul{list-style:none;display:flex;flex-direction:column;gap:6px} .feat li{font-size:14px;color:#aab4c2;padding-left:15px;position:relative} .feat li:before{content:"";position:absolute;left:0;top:9px;width:5px;height:5px;border-radius:50%;background:#fff} .integ{display:flex;flex-wrap:wrap;gap:8px 22px;margin-top:36px;justify-content:center;align-items:center} .integ .lbl{font-size:12.5px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:#6b7686} .integ span{font-size:15px;font-weight:600;color:#c3ccd7;position:relative} .integ span:not(:last-child):after{content:"";position:absolute;right:-12px;top:50%;width:4px;height:4px;border-radius:50%;background:#3a4553;transform:translateY(-50%)} /* ---------- Sectors big grid ---------- */ .sec-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px} .sec-card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:24px 22px;transition:transform .2s,box-shadow .2s,border-color .2s} .sec-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-md);border-color:#d7dee4} .sec-card img{height:52px;width:auto;margin-bottom:16px} .sec-card h3{font-size:17.5px;margin-bottom:10px} .sec-card p{font-size:13.5px;color:var(--slate);line-height:1.55} /* ---------- Interface / accessibility split ---------- */ .interface-sec{position:relative;overflow:hidden;background:#fff;border-top:1px solid var(--line);border-bottom:1px solid var(--line)} .interface-sec:before{content:"";position:absolute;inset:0;z-index:0;background:radial-gradient(560px 420px at 82% 46%,rgba(47,125,146,.05),transparent 72%);pointer-events:none} .interface-sec .wrap{position:relative;z-index:2} .split{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center} .split-list{display:flex;flex-direction:column;gap:18px;margin-top:26px} .split-list .row{display:flex;gap:15px;align-items:flex-start} .split-list .ri{width:42px;height:42px;border-radius:11px;flex-shrink:0;display:flex;align-items:center;justify-content:center;background:var(--teal-050);color:var(--teal-700)} .split-list .ri svg{width:21px;height:21px} .split-list .row h3{font-size:17px;margin-bottom:3px} .split-list .row p{font-size:15px;color:var(--slate)} /* Interface - prism / spectre */ .prism{position:relative} .prism-svg{width:100%;height:auto;display:block;overflow:visible;cursor:crosshair} .beam{stroke:url(#beamGrad);stroke-width:4;filter:drop-shadow(0 0 7px rgba(90,150,235,.5))} .beam-core{stroke:#cfe3ff} .ray{mix-blend-mode:multiply} .prism-glass{stroke:rgba(120,140,160,.55);stroke-width:1.5;filter:drop-shadow(0 14px 30px rgba(16,22,32,.16))} .prism-edge{stroke:rgba(255,255,255,.9);stroke-width:1.5;fill:none} .hit{fill:#fff;filter:drop-shadow(0 0 7px rgba(255,255,255,.95))} .prism-cap{max-width:400px;margin:18px auto 0;text-align:center;font-size:14.5px;color:var(--slate);line-height:1.6} @media(max-width:980px){.prism-svg{max-width:520px;margin:0 auto}} /* ---------- CTA band ---------- */ .cta-band{background:linear-gradient(125deg,var(--ink),var(--dark-2) 68%,var(--teal-700));border-radius:var(--radius-band);padding:56px 54px;color:#fff;position:relative;overflow:hidden} .cta-band:before{content:"";position:absolute;top:-70px;right:-50px;width:340px;height:340px;border-radius:50%;background:radial-gradient(circle,rgba(227,6,19,.28),transparent 62%)} .cta-band .inner{position:relative;display:flex;justify-content:space-between;gap:40px;align-items:center;flex-wrap:wrap} .cta-actions{display:flex;flex-direction:column;gap:12px;min-width:240px} .cta-band h2{color:#fff;font-size:clamp(26px,3.4vw,38px);max-width:640px} .cta-band p{color:#c1ccd9;margin-top:14px;max-width:560px;font-size:17px} /* ---------- Newsletter ---------- */ .news{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-lg);padding:44px 46px;display:grid;grid-template-columns:1.1fr .9fr;gap:40px;align-items:center} .news h2{font-size:28px} .news p{color:var(--slate);margin-top:12px;font-size:16px} .news form{display:flex;gap:10px;flex-wrap:wrap} .news input{flex:1;min-width:220px;padding:14px 16px;border:1.5px solid var(--line);border-radius:11px;font-size:15px;font-family:var(--sans);background:#fff} .news input:focus{outline:none;border-color:var(--teal)} .news small{display:block;color:var(--mute);font-size:12.5px;margin-top:12px} .news small a{color:var(--teal-700);text-decoration:underline} /* ---------- SEO summary ---------- */ .summary{background:var(--surface);border-top:1px solid var(--line)} .sum{max-width:820px;margin:0 auto;text-align:center} .sum h2{font-size:clamp(24px,3vw,32px);margin-bottom:20px} .sum p{color:var(--slate);font-size:16px;line-height:1.75;margin-bottom:16px} .sum p b{color:var(--ink-2);font-weight:600} .sum-cta{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:26px} /* ---------- Footer ---------- */ footer{background:var(--ink);color:#9aa6b4;padding:64px 0 30px;margin-top:0} .foot-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr 1fr;gap:36px} .foot-brand .fb-logo{background:#fff;border-radius:10px;padding:9px 12px;display:inline-block;margin-bottom:18px} .foot-brand .fb-logo img{height:30px} .foot-brand p{font-size:14.5px;max-width:290px;line-height:1.6} .foot-brand .foot-contact{font-style:normal;font-size:14.5px;line-height:1.6;margin-top:14px;display:grid;gap:2px} .foot-brand .foot-contact a{color:#c3ccd7;transition:color .15s} .foot-brand .foot-contact a:hover{color:#fff} .foot-brand .social{display:flex;gap:10px;margin-top:20px} .foot-brand .social a{width:38px;height:38px;border-radius:10px;background:rgba(255,255,255,.06);display:flex;align-items:center;justify-content:center;transition:.2s} .foot-brand .social a:hover{background:var(--red)} .foot-brand .social a svg{width:17px;height:17px;color:#c3ccd7} .foot-col .foot-h{color:#fff;font-weight:700;line-height:1.3;padding:0;font-family:var(--disp);font-size:14px;letter-spacing:.02em;margin-bottom:16px} .foot-col a{display:block;font-size:14.5px;color:#9aa6b4;padding:5px 0;transition:color .15s} .foot-col a:hover{color:#fff} .foot-bottom{border-top:1px solid rgba(255,255,255,.08);margin-top:46px;padding-top:24px;display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-size:13.5px} .foot-bottom .langs2{display:flex;gap:14px} .foot-bottom .langs2 a:hover{color:#fff} /* reveal / entrance - only hidden when JS active (progressive enhancement); anime.js drives motion */ .js .rv{opacity:0;transform:translateY(24px)} .js .rv.in{opacity:1;transform:none;transition:opacity .7s cubic-bezier(.2,.7,.2,1),transform .7s cubic-bezier(.2,.7,.2,1)} .js .hero-copy>*{opacity:0} .js #mock{opacity:0} @media(prefers-reduced-motion:reduce){.js .rv,.js .hero-copy>*,.js #mock{opacity:1!important;transform:none!important}} /* ---------- Responsive ---------- */ @media(max-width:980px){ .hero-grid{grid-template-columns:1fr;gap:44px} .mock{max-width:520px;margin:0 auto} .mock-win{animation:none} .blob{inset:16% 6%;opacity:.42} .split{grid-template-columns:1fr;gap:36px} .pillars,.mods,.feat-grid{grid-template-columns:1fr 1fr} .sec-grid{grid-template-columns:1fr 1fr} .prods{grid-template-columns:1fr} .news{grid-template-columns:1fr} .foot-grid{grid-template-columns:1fr 1fr;gap:30px} .foot-brand{grid-column:1/-1} .navlinks,.nav-signin{display:none} .burger{display:flex} header{background:#fff;backdrop-filter:none;-webkit-backdrop-filter:none;border-bottom:1px solid var(--line)} .brand{margin-right:auto} .hero{padding-bottom:44px} .hero-veil{display:block;position:absolute;left:0;right:0;bottom:0;height:52px;background:linear-gradient(180deg,rgba(255,255,255,0),#fff 92%);z-index:1;pointer-events:none} .nav-cta .btn-primary{padding:11px 17px;font-size:14.5px} .cta-band{padding:40px 30px} } @media(max-width:560px){ body{font-size:16px} .pad{padding:64px 0}.pad-sm{padding:52px 0} .pillars,.mods,.feat-grid,.sec-grid{grid-template-columns:1fr} .hero-trust{gap:18px} .hero-trust .t b{font-size:20px} .sec-card{display:flex;align-items:center;gap:16px;text-align:left} .sec-card .sc-tx{flex:1;min-width:0;order:1} .sec-card img{order:2;height:46px;margin-bottom:0;flex-shrink:0} .sec-card h3{margin-bottom:5px} .nav{height:64px;gap:8px} .brand img{height:30px} .nav-cta .btn-primary{padding:9px 15px;font-size:13.5px} .nd-full{display:none}.nd-short{display:inline} .foot-grid{grid-template-columns:1fr 1fr} .news{padding:32px 24px} .cta-band .inner{flex-direction:column;align-items:flex-start} } } @keyframes morph{ 0%{border-radius:42% 58% 63% 37% / 41% 44% 56% 59%} 50%{border-radius:66% 34% 41% 59% / 62% 37% 63% 38%} 100%{border-radius:38% 62% 52% 48% / 55% 49% 51% 45%}} @keyframes spin{to{transform:rotate(360deg)}} @keyframes gearspin{to{transform:rotate(360deg)}} @keyframes wireflow{to{stroke-dashoffset:-240}} @keyframes floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}} @keyframes ecoflow{to{stroke-dashoffset:-240}} @keyframes ecopulse{0%{box-shadow:0 18px 44px rgba(16,22,32,.14),0 0 0 1px rgba(47,125,146,.22)}70%{box-shadow:0 18px 44px rgba(16,22,32,.14),0 0 0 20px rgba(47,125,146,0)}100%{box-shadow:0 18px 44px rgba(16,22,32,.14),0 0 0 1px rgba(47,125,146,0)}} @keyframes ecocounter{from{transform:translate(-50%,-50%) rotate(0)}to{transform:translate(-50%,-50%) rotate(-360deg)}} /* ---- Gabarit page métier (mz-*) — v2, rythme + langage maquette ---- */ .a2z-v2{ /* hero : fond quadrillé + halos comme la home */ &.mz-hero{padding:76px 0 60px;position:relative;overflow:hidden} &.mz-hero:before{content:"";position:absolute;inset:0;z-index:-2;background: radial-gradient(1000px 480px at 84% -8%,rgba(47,125,146,.13),transparent 60%), radial-gradient(700px 480px at 6% 6%,rgba(227,6,19,.06),transparent 55%), linear-gradient(180deg,#fbfcfd 0%,#fff 46%)} &.mz-hero:after{content:"";position:absolute;inset:0;z-index:-1;opacity:.5; background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px); background-size:52px 52px;-webkit-mask-image:radial-gradient(720px 400px at 78% 10%,#000,transparent 72%);mask-image:radial-gradient(720px 400px at 78% 10%,#000,transparent 72%)} .mz-hero-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:48px;align-items:center} .mz-hero-copy h1{font-size:clamp(34px,4.6vw,54px);font-weight:700;letter-spacing:-.03em} .mz-accent{color:var(--teal-700)} .mz-lead{font-size:18.5px;color:var(--slate);margin:18px 0 26px;max-width:560px} .mz-ctas{display:flex;gap:13px;flex-wrap:wrap} .mz-hero-visual{display:flex;justify-content:center} .mz-hero-visual model-viewer{width:100%;max-width:440px;height:400px;--poster-color:transparent;outline:none} &.mz-sec{padding:76px 0;position:relative} &.mz-sec-alt{background:var(--surface);border-top:1px solid var(--line);border-bottom:1px solid var(--line)} .mz-h2{font-size:clamp(26px,3.2vw,36px);letter-spacing:-.025em;margin-bottom:14px} .mz-intro{color:var(--slate);max-width:620px} /* S1 — arguments : intro + stats à gauche, checklist animée à droite */ .mz-usps-grid{display:grid;grid-template-columns:.95fr 1.05fr;gap:56px;align-items:start} .mz-usps-intro p{color:var(--slate);margin:12px 0 26px;max-width:440px} .mz-stats{display:flex;gap:26px;flex-wrap:wrap} .mz-stats .t{display:flex;flex-direction:column;gap:1px} .mz-stats .t b{font-family:var(--disp);font-size:24px;letter-spacing:-.02em} .mz-stats .t b em{color:var(--red);font-style:normal;margin-left:.18em} .mz-stats .t span{font-size:13.5px;color:var(--mute);font-weight:500} .mz-checks{display:flex;flex-direction:column} .mz-check{display:flex;gap:15px;align-items:flex-start;padding:15px 4px;border-bottom:1px dashed rgba(227,6,19,.28)} .mz-check:last-child{border-bottom:none} .mz-check svg{width:26px;height:26px;flex-shrink:0;margin-top:2px} .mz-check svg circle{stroke:var(--red);stroke-width:1.6;fill:var(--red-050)} .mz-check svg path{stroke:var(--red);stroke-width:2.2;fill:none;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:14;stroke-dashoffset:14;transition:stroke-dashoffset .55s ease .25s} .mz-check.rv.in svg path,.mz-check.drawn svg path,.no-js .mz-check svg path{stroke-dashoffset:0} .mz-check b{font-family:var(--disp);font-size:16.5px;display:block} .mz-check span{font-size:14.5px;color:var(--slate)} /* S2 — étapes : timeline à fil pointillé animé, moyeux façon engrenage */ .mz-steps{display:grid;grid-template-columns:repeat(3,1fr);gap:34px;margin-top:44px;position:relative} .mz-steps:before{content:"";position:absolute;top:26px;left:9%;right:9%;border-top:2px dashed rgba(227,6,19,.45); -webkit-mask-image:linear-gradient(90deg,#000 0 100%);animation:mzflow 26s linear infinite} @supports (background:conic-gradient(#000,#fff)){ .mz-steps:before{border-top:none;height:2px;background-image:repeating-linear-gradient(90deg,var(--red) 0 7px,transparent 7px 15px);opacity:.55;background-size:15px 2px;animation:mzants 1.1s linear infinite}} .mz-step{position:relative;text-align:left} .mz-step i{font-style:normal;font-family:var(--disp);font-weight:700;font-size:19px;color:var(--red);background:#fff;width:52px;height:52px;border-radius:50%;display:flex;align-items:center;justify-content:center;border:1px solid var(--line);box-shadow:var(--shadow-md);position:relative;z-index:1;margin-bottom:16px} .mz-step b{font-family:var(--disp);font-size:19px;display:block;margin-bottom:6px} .mz-step span{font-size:15px;color:var(--slate)} @keyframes mzants{to{background-position:-15px 0}} /* S3 — avantages : section sombre immersive, cartes verre teinté */ &.mz-sec-dark{background:linear-gradient(180deg,var(--dark) 0%,var(--dark-2) 100%);padding:84px 0;position:relative;overflow:hidden} &.mz-sec-dark:before{content:"";position:absolute;inset:0;opacity:.35;background: radial-gradient(700px 380px at 12% 0%,rgba(227,6,19,.16),transparent 60%), radial-gradient(700px 420px at 92% 100%,rgba(47,125,146,.22),transparent 60%)} &.mz-sec-dark .mz-h2{color:#fff} &.mz-sec-dark .mz-intro{color:rgba(255,255,255,.6)} .mz-cards{display:grid;grid-template-columns:repeat(6,1fr);gap:16px;margin-top:38px;position:relative} .mz-card{grid-column:span 2;background:rgba(255,255,255,.045);border:1px solid rgba(255,255,255,.09);border-radius:var(--radius);padding:26px 24px 24px;display:flex;flex-direction:column;gap:9px;position:relative;overflow:hidden;transition:transform .2s ease,border-color .2s ease,background .2s ease} .mz-card:before{content:"";position:absolute;top:0;left:0;right:0;height:2.5px;background:var(--acc,rgba(255,255,255,.18))} .mz-card:hover{transform:translateY(-4px);border-color:rgba(255,255,255,.2);background:rgba(255,255,255,.07)} .mz-card:nth-child(4),.mz-card:nth-child(5){grid-column:span 3} .mz-card b{font-family:var(--disp);font-size:19px;letter-spacing:-.01em;color:#fff} .mz-card p{font-size:14.8px;color:rgba(255,255,255,.62);margin:0;line-height:1.55} .mz-tag{font-family:var(--disp);font-weight:800;font-size:13px;letter-spacing:.14em;text-transform:uppercase} .mz-card[data-acc=red]{--acc:var(--red)} .mz-card[data-acc=teal]{--acc:var(--teal)} .mz-card[data-acc=green]{--acc:var(--green)} .mz-tag-red{color:#ff5560} .mz-tag-teal{color:#5db6cd} .mz-tag-green{color:#4fca7f} /* S4 — CTA final : clair, halos, stats de confiance */ .mz-cta-final{text-align:center;padding:8px 0} .mz-cta-final h2{font-size:clamp(28px,3.6vw,42px);letter-spacing:-.03em} .mz-cta-final>p{color:var(--slate);margin:14px auto 30px;max-width:520px} .mz-cta-final .mz-ctas{justify-content:center} .mz-cta-final .mz-stats{justify-content:center;margin-top:40px;padding-top:30px;border-top:1px solid var(--line)} /* reveals : état initial (JS pose .in) */ .js .mz-check.rv,.js .mz-step.rv,.js .mz-card.rv{opacity:0;transform:translateY(18px);transition:opacity .6s ease,transform .6s ease} .js .mz-check.rv.in,.js .mz-step.rv.in,.js .mz-card.rv.in{opacity:1;transform:none} @media(max-width:820px){.mz-hero-grid,.mz-usps-grid{grid-template-columns:1fr} .mz-steps{grid-template-columns:1fr;gap:26px}.mz-steps:before{display:none} .mz-cards{grid-template-columns:1fr 1fr}.mz-card,.mz-card:nth-child(4),.mz-card:nth-child(5){grid-column:span 1}} @media(max-width:560px){.mz-cards{grid-template-columns:1fr}} } /* entrée de page : blocs masqués au premier rendu, animés par a2z-v2.js (secours 2,2 s) */ .js .a2z-chrome-header,.js .et_pb_section.a2z-v2,.js .a2z-v2.hub-wrap,.js .a2z-v2.o3d-wrap{opacity:0} @media(prefers-reduced-motion:reduce){.js .a2z-chrome-header,.js .et_pb_section.a2z-v2,.js .a2z-v2.hub-wrap,.js .a2z-v2.o3d-wrap{opacity:1}} /* section produits du secteur (pages secteurs) */ .a2z-v2 .mz-products{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px;margin-top:34px;justify-items:center} /* une carte seule ne doit pas s'étirer sur toute la largeur (secteur Santé = 1 logiciel) */ .a2z-v2 .mz-products>*{width:100%;max-width:420px} .a2z-v2 .mz-product{display:flex;flex-direction:column;gap:6px;background:#fff;border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow-sm);padding:22px;text-decoration:none;color:var(--ink);transition:transform .18s ease,box-shadow .18s ease} .a2z-v2 .mz-product:hover{transform:translateY(-4px);box-shadow:var(--shadow-md)} .a2z-v2 .mz-product img{width:86px;height:86px;object-fit:contain;mix-blend-mode:multiply;margin-bottom:6px} .a2z-v2 .mz-product b{font-family:var(--disp);font-size:18px} .a2z-v2 .mz-product span{font-size:14.5px;color:var(--slate);flex:1} .a2z-v2 .mz-product i{font-style:normal;color:var(--red);font-weight:600;font-size:14.5px;margin-top:8px} /* page contact */ .a2z-v2 .mz-contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:52px;align-items:start} .a2z-v2 .mz-contact-intro p{color:var(--slate);margin-bottom:16px} .a2z-v2 .mz-addr{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:34px} .a2z-v2 .mz-addr .mz-usp b, .a2z-v2 .mz-addr .mz-usp span{display:block} .a2z-v2 .mz-addr .mz-usp b{color:var(--teal-700);margin-bottom:6px} .a2z-v2 .mz-addr .mz-usp span{color:var(--slate);line-height:1.6} .a2z-v2 .et_pb_contact_form_container{background:#fff;border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow-sm);padding:26px} .a2z-v2 .et_pb_contact_form_container input,.a2z-v2 .et_pb_contact_form_container textarea{background:var(--surface)!important;border:1px solid var(--line)!important;border-radius:10px!important;color:var(--ink)!important;font-family:var(--sans)!important} .a2z-v2 .et_pb_contact_submit{background:var(--red)!important;color:#fff!important;border:none!important;border-radius:11px!important;font-family:var(--sans)!important;font-weight:600!important;padding:13px 24px!important} .a2z-v2 .et_pb_contact_submit:hover{background:var(--red-700)!important} @media(max-width:820px){.a2z-v2 .mz-contact-grid{grid-template-columns:1fr}.a2z-v2 .mz-addr{grid-template-columns:1fr}} /* listing actualités (module blog Divi en grille) */ .a2z-v2 .et_pb_blog_grid .et_pb_post{background:#fff;border:1px solid var(--line)!important;border-radius:var(--radius);box-shadow:var(--shadow-sm);overflow:hidden;padding:0 0 18px;transition:transform .18s ease,box-shadow .18s ease} .a2z-v2 .et_pb_blog_grid .et_pb_post:hover{transform:translateY(-4px);box-shadow:var(--shadow-md)} .a2z-v2 .et_pb_blog_grid .entry-title{font-family:var(--disp)!important;font-size:19px!important;padding:0 18px} .a2z-v2 .et_pb_blog_grid .entry-title a{color:var(--ink)!important} .a2z-v2 .et_pb_blog_grid .post-meta,.a2z-v2 .et_pb_blog_grid .post-content{padding:0 18px;color:var(--slate)!important;font-size:14.5px} .a2z-v2 .et_pb_blog_grid .more-link{color:var(--red)!important;font-weight:600} /* home native : sections maquette en pleine largeur (le .wrap interne gère la largeur de contenu) */ .a2z-v2.home-sec .et_pb_row{max-width:none;width:100%;padding:0} .a2z-v2.home-sec{padding:0} .a2z-v2.home-sec .et_pb_column{padding:0} /* durcissement anti-Divi : les .btn restent des inline-flex en ligne */ .a2z-v2 .btn{display:inline-flex!important;flex-direction:row!important;width:auto!important;align-items:center!important} .a2z-v2 .btn svg{width:17px!important;height:17px!important;flex:none!important} /* menu mobile (burger du chrome) */ .a2z-v2 .a2z-mobnav{display:none;position:absolute;top:100%;left:0;right:0;background:#fff;border-bottom:1px solid var(--line);box-shadow:var(--shadow-md);padding:12px 24px 18px;flex-direction:column;gap:2px;z-index:120} .a2z-v2 .a2z-mobnav a{padding:12px 10px;font-weight:500;font-size:16px;color:var(--ink-2);border-radius:9px} .a2z-v2 .a2z-mobnav a:hover{background:var(--surface)} .a2z-v2 .a2z-mobnav .btn{margin-top:10px;justify-content:center!important} .a2z-v2 header.nav-open .a2z-mobnav{display:flex} .a2z-v2 header{position:sticky;top:0} .a2z-v2 .burger.on span:nth-child(1){transform:translateY(7px) rotate(45deg)} .a2z-v2 .burger.on span:nth-child(2){opacity:0} .a2z-v2 .burger.on span:nth-child(3){transform:translateY(-7px) rotate(-45deg)} .a2z-v2 .burger span{transition:transform .25s,opacity .2s} /* rangées Divi multi-colonnes : empilement mobile (le JSON minimal de l'usine n'embarque pas le responsive Divi) */ @media(max-width:820px){ .a2z-v2 .et_pb_row{flex-wrap:wrap!important} .a2z-v2 .et_pb_column{width:100%!important;flex:0 0 100%!important;max-width:100%!important} } .a2z-v2 .mz-crumb{font-size:14px;color:var(--mute);font-weight:500;margin-bottom:14px} .a2z-v2 .mz-crumb a{color:var(--teal-700);font-weight:600} .a2z-v2 .mz-crumb a:hover{color:var(--red)} /* carte secteur cliquable : lien en superposition (immunisé contre wpautop) */ .a2z-v2 .sec-card{position:relative} .a2z-v2 .sec-link{position:absolute;inset:0;z-index:2;border-radius:inherit} .a2z-v2 .sec-card:focus-within{border-color:#cfd7de;box-shadow:var(--shadow-md)} /* ---- Menus déroulants du header ---- */ .a2z-v2 .navlinks{position:relative} /* Chaque entrée est son propre repère : sans ça, le panneau se centrait sur .navlinks et s'ouvrait à gauche de son intitulé (constaté le 25/08/2026 sur « La société »). Le méga-menu, lui, est en position fixe et ne dépend pas de ce repère. */ .a2z-v2 .nav-item{position:relative} .a2z-v2 .nav-item>a{position:relative;font-weight:500;font-size:15.5px;color:var(--ink-2);padding:9px 14px;border-radius:9px;transition:color .16s,background .16s;display:inline-block} .a2z-v2 .nav-item>a:hover{color:var(--ink);background:var(--surface)} .a2z-v2 .nav-drop{position:absolute;top:calc(100% + 10px);left:50%;transform:translate(-50%,8px); background:#fff;border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow-lg); padding:22px 26px;display:flex;gap:34px;opacity:0;visibility:hidden;pointer-events:none; transition:opacity .18s ease,transform .18s ease,visibility .18s;z-index:140;min-width:280px} .a2z-v2 .nav-drop{max-width:min(360px,92vw)} .a2z-v2 .nav-drop-wide{max-width:none} .a2z-v2 .nav-item:hover .nav-drop,.a2z-v2 .nav-item:focus-within .nav-drop{opacity:1;visibility:visible;pointer-events:auto;transform:translate(-50%,0)} .a2z-v2 .nav-item:hover>a.has{color:var(--ink);background:var(--surface)} /* zone de survol continue entre le lien et le panneau */ .a2z-v2 .nav-item.has-menu:after{content:"";position:absolute;left:0;right:0;top:100%;height:12px} .a2z-v2 .nd-col{display:flex;flex-direction:column;gap:2px;min-width:172px} .a2z-v2 .nd-title{font-family:var(--disp);font-size:12.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--mute);margin-bottom:8px;min-height:16px} .a2z-v2 .nd-col a{display:block;padding:8px 10px;border-radius:9px;font-size:15px;color:var(--ink-2);transition:background .15s,color .15s;line-height:1.35} .a2z-v2 .nd-col a:hover{background:var(--surface);color:var(--ink)} .a2z-v2 .nd-col a em{display:block;font-style:normal;font-size:12.5px;color:var(--mute)} @media(max-width:1160px){.a2z-v2 .nav-drop{display:none}} /* ---- Menu mobile : groupes dépliables ---- */ .a2z-v2 .a2z-mobnav .mob-group{border-bottom:1px solid var(--line)} .a2z-v2 .a2z-mobnav .mob-toggle{display:flex;align-items:center;justify-content:space-between;width:100%; background:none;border:none;padding:13px 10px;font:inherit;font-weight:600;font-size:16px;color:var(--ink);cursor:pointer;text-align:left} .a2z-v2 .a2z-mobnav .mob-toggle:after{content:"";width:8px;height:8px;border-right:1.8px solid var(--mute);border-bottom:1.8px solid var(--mute);transform:rotate(45deg);transition:transform .2s;margin-right:4px} .a2z-v2 .a2z-mobnav .mob-toggle[aria-expanded="true"]:after{transform:rotate(-135deg)} .a2z-v2 .a2z-mobnav .mob-sub{display:none;flex-direction:column;padding:0 0 10px 12px} .a2z-v2 .a2z-mobnav .mob-toggle[aria-expanded="true"]+.mob-sub{display:flex} .a2z-v2 .a2z-mobnav .mob-sub a{padding:10px;font-size:15px;color:var(--slate)} /* chevron sur les entrées à menu (le sélecteur maquette .navlinks>a.has ne matche plus la nouvelle structure) */ .a2z-v2 .nav-item>a.has:after{content:"";display:inline-block;width:6px;height:6px; border-right:1.6px solid var(--mute);border-bottom:1.6px solid var(--mute); transform:rotate(45deg);margin-left:7px;vertical-align:2px;transition:transform .2s ease,border-color .2s} .a2z-v2 .nav-item:hover>a.has:after,.a2z-v2 .nav-item.keep-open>a.has:after, .a2z-v2 .nav-item:focus-within>a.has:after{transform:rotate(-135deg) translate(-1px,-1px);border-color:var(--red)} /* persistance pendant le trajet souris → panneau (safe triangle, posé par a2z-v2.js) */ .a2z-v2 .nav-item.keep-open .nav-drop{opacity:1;visibility:visible;pointer-events:auto;transform:translate(-50%,0)} /* comble le vide entre le lien et le panneau : zone de survol invisible RATTACHÉE au panneau (sans elle, la souris traverse une bande morte, le menu se ferme et devient insurvolable) */ .a2z-v2 .nav-drop:before{content:"";position:absolute;left:0;right:0;top:-16px;height:16px} /* garde-fou multilingue : les mots longs (DE) ne doivent jamais élargir la page */ .a2z-v2 .eco-node{max-width:100%;box-sizing:border-box} .a2z-v2 .eco-node b,.a2z-v2 .eco-node span{overflow-wrap:anywhere} .a2z-v2 .nav{max-width:100%} .a2z-v2 .nav-cta{min-width:0} .a2z-v2 .nav-cta .btn{max-width:100%} @media(max-width:560px){ .a2z-v2 .eco-node{width:100%;font-size:14px} .a2z-v2 .nav-cta .btn-primary{padding:9px 13px;font-size:13px} } /* le bouton secondaire du header disparaît dès que la place manque (la règle imbriquée de la maquette ne survit pas au scoping) — sinon le burger sort de l'écran en DE */ @media(max-width:1160px){.a2z-v2 .nav-see{display:none!important}} /* hub logiciels : gammes en 2 colonnes + puces secteurs */ .a2z-v2 .mz-products-2{grid-template-columns:1fr 1fr} .a2z-v2 .mz-product span strong{color:var(--ink);font-weight:600} .a2z-v2 .mz-secteurs-links{display:flex;flex-wrap:wrap;gap:10px;margin-top:26px} .a2z-v2 .mz-sect-chip{display:inline-flex;align-items:center;padding:11px 18px;background:#fff; border:1px solid var(--line);border-radius:11px;box-shadow:var(--shadow-sm);font-weight:600; font-size:15px;color:var(--ink-2);transition:transform .15s,box-shadow .15s,color .15s} .a2z-v2 .mz-sect-chip:hover{transform:translateY(-2px);box-shadow:var(--shadow-md);color:var(--red)} @media(max-width:820px){.a2z-v2 .mz-products-2{grid-template-columns:1fr}} /* ---- Articles de blog : mise en page de lecture ---- */ body.a2z-article #main-content{background:var(--bg)} body.a2z-article #main-content .container{max-width:820px!important;width:100%!important;padding:0 24px!important} body.a2z-article #left-area{width:100%!important;padding:0!important;float:none!important} body.a2z-article #sidebar{display:none!important} body.a2z-article .et_post_meta_wrapper{padding-top:52px} body.a2z-article h1.entry-title{font-family:'Bricolage Grotesque','Hanken Grotesk',sans-serif!important; font-size:clamp(30px,4.2vw,46px)!important;line-height:1.12!important;letter-spacing:-.03em!important; color:#141922!important;margin:0 0 14px!important;padding:0!important} body.a2z-article .post-meta{font-family:'Hanken Grotesk',sans-serif!important;font-size:14.5px!important; color:#8A93A0!important;margin-bottom:26px!important} body.a2z-article .post-meta a{color:#2F7D92!important;font-weight:600} body.a2z-article .entry-featured-image-url{margin-bottom:34px!important} body.a2z-article .entry-featured-image-url img,body.a2z-article .entry-content img{border-radius:16px; box-shadow:0 10px 30px rgba(16,22,32,.10),0 3px 8px rgba(16,22,32,.06)} body.a2z-article .entry-content{font-family:'Hanken Grotesk',sans-serif!important;font-size:18px!important; line-height:1.72!important;color:#3B434F!important} body.a2z-article .entry-content p{margin-bottom:22px!important} body.a2z-article .entry-content h2,body.a2z-article .entry-content h3,body.a2z-article .entry-content h4{ font-family:'Bricolage Grotesque','Hanken Grotesk',sans-serif!important;color:#141922!important; letter-spacing:-.02em!important;line-height:1.2!important;margin:38px 0 14px!important} body.a2z-article .entry-content h2{font-size:29px!important} body.a2z-article .entry-content h3{font-size:23px!important} body.a2z-article .entry-content a{color:#2F7D92;font-weight:600;text-decoration:underline;text-underline-offset:3px} body.a2z-article .entry-content a:hover{color:#E30613} body.a2z-article .entry-content ul,body.a2z-article .entry-content ol{margin:0 0 22px 22px!important} body.a2z-article .entry-content li{margin-bottom:9px!important;padding-left:4px} body.a2z-article .entry-content blockquote{border-left:3px solid #E30613;background:#F6F8FA;margin:30px 0; padding:20px 24px;border-radius:0 12px 12px 0;font-style:normal;color:#141922} body.a2z-article .entry-content strong{color:#141922} /* pavé de conversion en fin d'article */ body.a2z-article .a2z-post-cta{margin:48px 0 12px;padding:34px 30px;border-radius:22px;text-align:center; background:linear-gradient(135deg,#101620,#161E2A);color:#fff} body.a2z-article .a2z-post-cta h3{font-family:'Bricolage Grotesque',sans-serif;font-size:25px;color:#fff;margin:0 0 8px;letter-spacing:-.02em} body.a2z-article .a2z-post-cta p{color:rgba(255,255,255,.72);margin:0 0 22px;font-size:16px} body.a2z-article .a2z-post-cta .btn{display:inline-flex;align-items:center;gap:9px;background:#E30613;color:#fff; font-weight:600;font-size:16px;padding:14px 26px;border-radius:11px;text-decoration:none} body.a2z-article .a2z-post-cta .btn:hover{background:#B70410} body.a2z-article .et_pb_post_content_0_tb_body,body.a2z-article .et-l--body{max-width:820px;margin:0 auto} /* le h3 du pavé de fin d'article hérite d'une couleur sombre de Divi */ body.a2z-article .a2z-post-cta h3,body.a2z-article .entry-content .a2z-post-cta h3{color:#fff!important} body.a2z-article .a2z-post-cta p{color:rgba(255,255,255,.72)!important} body.a2z-article .a2z-post-cta a.btn{color:#fff!important;text-decoration:none!important} /* fonds gris hérités des anciens blocs d'article */ body.a2z-article .entry-content .et_pb_text_inner,body.a2z-article .entry-content .et_pb_code_inner{background:transparent!important} /* ---- Listing d'articles : grille de cartes (le module Divi rend en pleine largeur) ---- */ .a2z-v2 .a2z-blog .et_pb_blog_posts,.a2z-blog .et_pb_blog_posts{ display:grid!important;grid-template-columns:repeat(3,1fr);gap:22px;align-items:stretch} .a2z-blog article.et_pb_post{background:#fff;border:1px solid var(--line);border-radius:var(--radius); box-shadow:var(--shadow-sm);overflow:hidden;display:flex;flex-direction:column;margin:0!important; padding:0!important;transition:transform .18s ease,box-shadow .18s ease} .a2z-blog article.et_pb_post:hover{transform:translateY(-4px);box-shadow:var(--shadow-md)} .a2z-blog .et_pb_image_container{margin:0!important;border-radius:0!important;overflow:hidden} .a2z-blog .et_pb_image_container img{width:100%!important;height:186px!important;object-fit:cover; display:block;border-radius:0!important;box-shadow:none!important;max-width:none!important} .a2z-blog .entry-title{font-family:var(--disp)!important;font-size:18.5px!important;line-height:1.25!important; letter-spacing:-.01em;padding:18px 20px 0!important;margin:0!important} .a2z-blog .entry-title a{color:var(--ink)!important} .a2z-blog .entry-title a:hover{color:var(--red)!important} .a2z-blog .post-meta{padding:8px 20px 0!important;margin:0!important;font-size:13.5px!important;color:var(--mute)!important} .a2z-blog .post-meta a{color:var(--teal-700)!important;font-weight:600} .a2z-blog .post-content{padding:10px 20px 20px!important;font-size:15px;color:var(--slate);flex:1; display:flex;flex-direction:column} .a2z-blog .post-content p{margin:0 0 12px!important} .a2z-blog .post-content .more-link,.a2z-blog .more-link{margin-top:auto;color:var(--red)!important; font-weight:600;font-size:14.5px;text-decoration:none} .a2z-blog .et_overlay{border-radius:0} .a2z-blog .pagination{grid-column:1/-1;display:flex;justify-content:space-between;padding-top:26px;font-weight:600} .a2z-blog .pagination a{color:var(--teal-700)} @media(max-width:1000px){.a2z-v2 .a2z-blog .et_pb_blog_posts,.a2z-blog .et_pb_blog_posts{grid-template-columns:1fr 1fr}} @media(max-width:640px){.a2z-v2 .a2z-blog .et_pb_blog_posts,.a2z-blog .et_pb_blog_posts{grid-template-columns:1fr}} /* extraits homogènes : 3 lignes max, cartes de hauteur régulière */ .a2z-blog .post-content p{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical; overflow:hidden;line-height:1.55!important;font-size:14.8px} .a2z-blog .entry-title{min-height:2.5em} /* logo métier officiel du client dans le hero (remplace l'objet 3D depuis le 17/08/2026) */ .a2z-v2 .mz-hero-logo{max-width:330px;width:82%;height:auto;margin:0 auto;display:block; filter:drop-shadow(0 14px 30px rgba(16,22,32,.10))} .a2z-v2 .mz-product img{width:auto;max-width:150px;height:74px;object-fit:contain;mix-blend-mode:normal} @media(max-width:820px){.a2z-v2 .mz-hero-logo{max-width:240px;width:65%}} /* Méga-menu « Logiciels métiers » : 28 solutions, trop large pour tenir sous son intitulé. Il est donc centré sur la FENÊTRE (position fixe), indépendamment de l'entrée qui l'ouvre, sinon il sortait de l'écran par la droite. */ .a2z-v2 .nav-drop-wide{position:fixed;top:74px;left:50%;right:auto;margin-left:0; width:min(1180px,94vw);min-width:0;gap:22px;transform:translate(-50%,8px)} .a2z-v2 .nav-item:hover .nav-drop-wide,.a2z-v2 .nav-item:focus-within .nav-drop-wide, .a2z-v2 .nav-item.keep-open .nav-drop-wide{transform:translate(-50%,0)} .a2z-v2 .nav-drop-wide .nd-col{flex:1 1 0;min-width:0} .a2z-v2 .nd-col a.nd-all{color:var(--red);font-weight:700;margin-top:6px} /* ── Formulaires (contact, inscription) ──────────────────────────────────── Retour client du 25/08 : « j'ai beaucoup de blancs, les espaces sont mal répartis » et « les menus sont tout petits ». Divi affichait un libellé ET un placeholder identiques, au-dessus d'un champ de la hauteur d'un trait. Le libellé reste dans le HTML pour les lecteurs d'écran, le champ porte l'intitulé. 16px minimum : en dessous, Safari iOS zoome à la mise au point, et la liste déroulante native hérite de cette taille. */ .a2z-v2 .et_pb_contact_form_label{position:absolute!important;width:1px;height:1px;overflow:hidden; clip:rect(1px,1px,1px,1px);clip-path:inset(50%);white-space:nowrap} .a2z-v2 .et_pb_contact_field{margin:0 0 14px!important;padding:0!important} .a2z-v2 .et_pb_contact_form_container input[type=text], .a2z-v2 .et_pb_contact_form_container textarea, .a2z-v2 .et_pb_contact_form_container select{ width:100%;box-sizing:border-box;padding:13px 15px!important;font-size:16px!important;line-height:1.4!important; border:1.5px solid var(--line)!important;border-radius:11px!important;background:#fff!important; color:var(--ink)!important;font-family:var(--sans)!important;transition:border-color .15s,box-shadow .15s} .a2z-v2 .et_pb_contact_form_container textarea{min-height:130px;resize:vertical} .a2z-v2 .et_pb_contact_form_container input[type=text]:focus, .a2z-v2 .et_pb_contact_form_container textarea:focus, .a2z-v2 .et_pb_contact_form_container select:focus{ outline:none;border-color:var(--teal)!important;box-shadow:0 0 0 3px rgba(0,124,138,.12)} .a2z-v2 .et_pb_contact_form_container ::placeholder{color:var(--mute);opacity:1} /* le select natif n'affiche pas de chevron cohérent : on le dessine */ .a2z-v2 .et_pb_contact_form_container select{appearance:none;-webkit-appearance:none;padding-right:42px!important; background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' fill='none' stroke='%23667' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")!important; background-repeat:no-repeat!important;background-position:right 15px center!important;background-size:12px 8px!important} /* champ obligatoire non rempli : Divi ajoute .et_contact_error */ .a2z-v2 .et_pb_contact_form_container .et_contact_error{border-color:var(--red)!important} /* la ligne du captcha et le bouton, sur une même rangée alignée */ .a2z-v2 .et_contact_bottom_container{display:flex;align-items:center;gap:12px;flex-wrap:wrap; justify-content:flex-start;margin-top:6px;float:none!important} .a2z-v2 .et_contact_bottom_container .et_pb_contact_right{display:flex;align-items:center;gap:10px;float:none!important} .a2z-v2 .et_pb_contact_form_container .et_pb_contact_captcha{width:64px!important;text-align:center;padding:10px 8px!important} .a2z-v2 .et_pb_contact_form_container .et_pb_contact_captcha_question{font-size:15px;color:var(--slate)} .a2z-v2 .et_pb_contact_submit{margin-left:auto;font-size:16px!important;padding:15px 26px!important} .a2z-v2 .et_pb_contact_form_container p:empty{display:none} .a2z-v2 .et-pb-contact-message{margin-bottom:12px} /* ── Home réagencée (25/08/2026) : visuel modifiable, actualités, roues ───── Le héros porte une image que le client remplace depuis l'administration ; les roues ERP/CRM/CMS ont leur propre section, plus bas. */ /* Le visuel du client occupe TOUTE la bande d'accroche, en fond. Le texte reste à gauche, lisible grâce à un voile dégradé qui s'efface vers la droite : c'est donc la moitié droite de l'image qui doit porter le sujet. L'image n'est jamais déformée (object-fit:cover), voir le format annoncé dans l'administration. */ .a2z-v2 .hero{overflow:hidden} .a2z-v2 .hero-visuel{position:absolute;inset:0;z-index:0;margin:0;pointer-events:none} .a2z-v2 .hero-visuel-cadre{position:absolute;inset:0;border-radius:0;overflow:hidden; background:var(--surface);box-shadow:none;animation:none} .a2z-v2 .hero-visuel-img{width:100%;height:100%;object-fit:cover;object-position:72% center;display:block} /* voile : opaque sous le texte, transparent sur le sujet */ .a2z-v2 .hero-visuel-cadre:after{content:"";position:absolute;inset:0;pointer-events:none; background:linear-gradient(100deg,#fff 0%,rgba(255,255,255,.98) 34%,rgba(255,255,255,.90) 47%, rgba(255,255,255,.46) 60%,rgba(255,255,255,.10) 72%,rgba(255,255,255,0) 82%), linear-gradient(180deg,rgba(255,255,255,.45),transparent 26%,rgba(255,255,255,.30))} /* .wrap doit rester sans position : sinon le visuel, qui est à l'intérieur, se cale sur lui et non sur la bande entière. C'est le texte qui remonte au premier plan. */ .a2z-v2 .hero-copy{position:relative;z-index:2} .a2z-v2 .hero-grid{min-height:clamp(420px,44vw,580px)} .a2z-v2 .hero-visuel .blob{display:none} @media(max-width:900px){ /* en colonne, le texte passe par-dessus : le voile devient vertical */ .a2z-v2 .hero-visuel-img{object-position:68% center} /* le texte passe sur toute la largeur : voile presque uniforme, assez léger pour que la photo reste perceptible, assez dense pour que rien ne devienne illisible */ .a2z-v2 .hero-visuel-cadre:after{ background:linear-gradient(180deg,rgba(255,255,255,.82) 0%,rgba(255,255,255,.76) 58%, rgba(255,255,255,.66) 84%,rgba(255,255,255,.48))} .a2z-v2 .hero-grid{min-height:0}} /* Actualités : 3 articles + la carte LinkedIn, sur une seule rangée en grand écran */ .a2z-v2 .a2z-actus{background:var(--surface);border-top:1px solid var(--line);border-bottom:1px solid var(--line)} .a2z-v2 .actus-entete{display:flex;align-items:baseline;justify-content:space-between;gap:20px;flex-wrap:wrap;margin-bottom:26px} .a2z-v2 .actus-entete .h2{margin:0} .a2z-v2 .actus-tout{color:var(--teal);font-weight:600;text-decoration:none;white-space:nowrap} .a2z-v2 .actus-tout:hover{text-decoration:underline} .a2z-v2 .actus-grille{display:grid;grid-template-columns:repeat(4,1fr);gap:18px} .a2z-v2 .actu-carte{display:flex;flex-direction:column;gap:8px;background:#fff;border:1px solid var(--line); border-radius:16px;padding:16px;text-decoration:none;color:inherit;box-shadow:var(--shadow-sm); transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease} .a2z-v2 .actu-carte:hover{transform:translateY(-3px);box-shadow:var(--shadow-lg);border-color:rgba(0,124,138,.35)} /* Les images d'articles du client portent du texte : les rogner coupait les mots. L'image est donc affichée en entier (contain) sur un fond flouté tiré d'elle-même, qui remplit le cadre sans bande noire ni recadrage. L'image nette se désigne par :last-of-type, jamais :last-child : le chargement différé de WP Rocket place un