/* ==========================================================================
   Maxelik, maquette de refonte 2026 : socle commun (en-tête, pied, primitives)
   Charte : bleu #0083FF, cyan #00BAFF, ardoise #273238, gris #8F989C / #D1D9DC
   ========================================================================== */
:root{
  --blue:#0083FF; --cyan:#00BAFF; --slate:#273238; --slate-2:#1b2327; --slate-3:#323f46;
  --gray:#8F989C; --gray-l:#D1D9DC; --ink:#273238; --ink-2:#4a575e;
  --soft:#f4f8fd; --soft-b:#e4eefa; --white:#fff;
  --grad:linear-gradient(100deg,#0083FF 0%,#00BAFF 100%);
  --r:8px; --wrap:1240px; --gut:clamp(16px,4vw,40px);
  --head-top:36px; --head-bar:72px;
  --ease:cubic-bezier(.22,.8,.24,1);
  --shadow:0 18px 40px -22px rgba(19,40,60,.35);
  color-scheme:light;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--white);color:var(--ink);font:400 17px/1.65 "Nunito Sans",system-ui,-apple-system,"Segoe UI",sans-serif;overflow-x:clip}
img,svg{display:block;max-width:100%}
a{color:var(--blue);text-decoration-thickness:1px;text-underline-offset:3px}
h1,h2,h3,h4{color:var(--slate);font-weight:800;line-height:1.15;margin:0;letter-spacing:-.015em;text-wrap:balance}
h1{font-size:clamp(2.1rem,1.3rem + 2.6vw,3.35rem);font-weight:900;letter-spacing:-.025em}
h2{font-size:clamp(1.7rem,1.2rem + 1.6vw,2.55rem)}
h3{font-size:1.2rem}
p{margin:0}
.wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gut)}
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip{position:absolute;left:12px;top:-60px;z-index:200;background:var(--slate);color:#fff;padding:10px 14px;border-radius:var(--r)}
.skip:focus{top:10px}
:focus-visible{outline:2px solid var(--cyan);outline-offset:3px;border-radius:var(--r)}

/* ---------- Boutons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.55em;min-height:50px;padding:0 24px;border-radius:var(--r);border:0;font:800 1rem/1 "Nunito Sans",system-ui,sans-serif;text-decoration:none;cursor:pointer;transition:transform .25s var(--ease),box-shadow .25s var(--ease),background-color .25s}
.btn svg{width:18px;height:18px;flex:none;transition:transform .3s var(--ease)}
.btn:hover svg{transform:translateX(4px)}
.btn-grad{background:var(--grad);color:#fff;box-shadow:0 12px 26px -12px rgba(0,131,255,.75)}
.btn-grad:hover{transform:translateY(-2px);box-shadow:0 16px 30px -12px rgba(0,131,255,.85)}
.btn-white{background:#fff;color:var(--slate)}
.btn-white:hover{transform:translateY(-2px)}
.btn-line{background:transparent;color:var(--slate);box-shadow:inset 0 0 0 1.5px var(--gray-l)}
.btn-line:hover{box-shadow:inset 0 0 0 1.5px var(--blue);color:var(--blue)}
.lnk{display:inline-flex;align-items:center;gap:.45em;font-weight:800;color:var(--blue);text-decoration:none}
.lnk svg{width:16px;height:16px;transition:transform .3s var(--ease)}
.lnk:hover svg{transform:translateX(4px)}
.lnk:hover{text-decoration:underline}

/* ==========================================================================
   EN-TÊTE
   ========================================================================== */
/* en-tête collant décalé de la hauteur de la barre haute : elle sort de l écran au défilement
   sans que la hauteur de l en-tête change (un repli par marge faisait osciller la page au seuil) */
.mx-head{display:flow-root;position:sticky;top:calc(-1 * var(--head-top));z-index:100;background:#fff;transition:box-shadow .3s,transform .35s var(--ease)}
.mx-head.is-stuck{box-shadow:0 10px 30px -18px rgba(19,40,60,.45)}
.mx-top{height:var(--head-top);background:var(--slate);color:#c9d3d8;font-size:.82rem}
.mx-top .wrap{height:100%;display:flex;align-items:center;justify-content:space-between;gap:20px}
.mx-top p{display:flex;align-items:center;gap:8px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mx-top .short{display:none}
.mx-top p svg{width:19px;height:19px;flex:none}
.mx-top nav{display:flex;gap:22px}
.mx-top a{color:#e6edf0;text-decoration:none;font-weight:600}
.mx-top a:hover{color:#fff;text-decoration:underline}
.mx-bar{position:relative;height:var(--head-bar);border-bottom:1px solid #e9eef1}
.mx-bar>.wrap{height:100%;display:flex;align-items:center;gap:28px}
.mx-logo{flex:none;display:block;width:150px}
.mx-logo img{width:100%;height:auto}
.mx-nav{flex:1;display:flex;justify-content:center;height:100%}
.mx-nav>ul{list-style:none;margin:0;padding:0;display:flex;align-items:stretch;gap:2px;height:100%}
.mx-nav>ul>li{display:flex;align-items:center}
.mx-nav-btn{display:flex;align-items:center;gap:6px;height:44px;padding:0 13px;border:0;background:none;border-radius:var(--r);font:700 .96rem/1 "Nunito Sans",system-ui,sans-serif;color:var(--slate);cursor:pointer;text-decoration:none;white-space:nowrap;transition:background-color .2s,color .2s}
.mx-nav-btn svg{width:11px;height:11px;transition:transform .3s var(--ease)}
.mx-nav-btn:hover,.mx-nav li.is-open>.mx-nav-btn{background:var(--soft);color:var(--blue)}
.mx-nav li.is-open>.mx-nav-btn svg{transform:rotate(180deg)}
.mx-actions{display:flex;align-items:center;gap:14px;flex:none}
.mx-tel{display:flex;align-items:center;gap:8px;color:var(--slate);font-weight:800;text-decoration:none;white-space:nowrap;font-size:.95rem}
.mx-tel span.ic{display:grid;place-items:center;width:38px;height:38px;border-radius:50%;background:var(--soft);color:var(--slate)}
.mx-tel span.ic svg{width:24px;height:24px}
.mx-tel:hover{color:var(--blue)}
.mx-actions .btn{min-height:44px;padding:0 18px;font-size:.95rem}
.mx-burger{display:none;width:46px;height:46px;border:0;border-radius:var(--r);background:var(--soft);cursor:pointer;position:relative}
.mx-burger span{position:absolute;left:13px;right:13px;height:2px;border-radius:var(--r);background:var(--slate);transition:transform .3s var(--ease),opacity .2s}
.mx-burger span:nth-child(1){top:16px}.mx-burger span:nth-child(2){top:22px}.mx-burger span:nth-child(3){top:28px}
.mx-burger[aria-expanded="true"] span:nth-child(1){transform:translateY(6px) rotate(45deg)}
.mx-burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.mx-burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}

/* Méga-menu */
.mx-mega{position:absolute;left:0;right:0;top:100%;background:#fff;border-top:1px solid #e9eef1;box-shadow:0 30px 50px -30px rgba(19,40,60,.45);opacity:0;visibility:hidden;transform:translateY(-8px);transition:opacity .25s var(--ease),transform .3s var(--ease),visibility 0s .3s}
.mx-nav li.is-open>.mx-mega{opacity:1;visibility:visible;transform:none;transition:opacity .25s var(--ease),transform .3s var(--ease)}
.mx-mega-in{max-width:var(--wrap);margin:0 auto;padding:26px var(--gut) 30px;display:grid;grid-template-columns:300px 1fr;gap:30px}
.mx-promo{position:relative;overflow:hidden;border-radius:var(--r);background:var(--slate);color:#dfe7eb;padding:24px;display:flex;flex-direction:column;gap:12px;isolation:isolate}
/* filigrane : symbole Maxelik au fond de la carte (remplace le halo et les anneaux) */
.mx-promo::after{content:"";position:absolute;z-index:-1;right:-34px;bottom:-38px;width:190px;aspect-ratio:458/414;background:url(img/maxelik-symbole.svg) no-repeat center/contain;opacity:.22;pointer-events:none}
.mx-promo strong{font-size:1.25rem;color:#fff;line-height:1.2}
.mx-promo p{font-size:.92rem;line-height:1.5}
.mx-promo .btn{margin-top:auto;align-self:flex-start;min-height:42px;padding:0 16px;font-size:.9rem}
.mx-mega-items{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px 10px;align-content:start}
.mx-mega-items.c2{grid-template-columns:repeat(2,minmax(0,1fr))}
.mx-mega-items a{display:grid;grid-template-columns:44px 1fr;gap:4px 14px;align-items:start;padding:14px;border-radius:var(--r);text-decoration:none;color:var(--slate);transition:background-color .2s}
.mx-mega-items a:hover{background:var(--soft)}
.mx-mega-items .ico{grid-column:1;grid-row:1/3;width:44px;height:44px}
.mx-mega-items b,.mx-mega-items span.d{grid-column:2}
.mx-mega-items b{font-weight:800;line-height:1.3;font-size:.98rem}
.mx-mega-items span.d{font-size:.86rem;line-height:1.45;color:var(--ink-2)}
.mx-mega-items a:hover b{color:var(--blue)}
.mx-mega-items .ico{color:var(--slate)}
.mx-mega-items .ico *{animation-play-state:paused}
.mx-mega-items a:hover .ico *,.mx-mega-items a:focus-visible .ico *{animation-play-state:running}

/* ==========================================================================
   PICTOS SUR-MESURE ANIMÉS (bicolores : ardoise + dégradé de marque)
   ========================================================================== */
.ico{overflow:visible}
.ico .s{fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.ico .a{fill:none;stroke:url(#mxGrad);stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.ico .f{fill:url(#mxGrad)}
.ico .fs{fill:var(--soft-b)}
.on-dark .ico .fs{fill:rgba(255,255,255,.08)}
.ico .draw{stroke-dasharray:var(--len,200);stroke-dashoffset:0}
html.js .reveal .ico .draw{stroke-dashoffset:var(--len,200)}
html.js .reveal.is-in .ico .draw{transition:stroke-dashoffset 1.1s var(--ease) calc(var(--d,0) * 120ms + .15s);stroke-dashoffset:0}
/* boucles discrètes, propres à chaque sujet */
@keyframes mxLoupe{0%,100%{transform:translate(0,0)}35%{transform:translate(3px,-2px)}70%{transform:translate(-2px,1px)}}
@keyframes mxPulse{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(1.35);opacity:.55}}
@keyframes mxRise{0%,100%{transform:translateY(0)}50%{transform:translateY(-3px)}}
@keyframes mxTilt{0%,100%{transform:rotate(-7deg)}50%{transform:rotate(7deg)}}
@keyframes mxTwinkle{0%,100%{opacity:.25;transform:scale(.7)}50%{opacity:1;transform:scale(1)}}
@keyframes mxType{0%,100%{opacity:.25}50%{opacity:1}}
@keyframes mxBuild{0%{transform:scaleX(0)}40%,80%{transform:scaleX(1)}100%{transform:scaleX(0)}}
@keyframes mxClimb{0%,15%{transform:translateY(0)}45%,85%{transform:translateY(-15px)}100%{transform:translateY(0)}}
@keyframes mxClick{0%,60%,100%{transform:translate(0,0)}70%{transform:translate(1px,1px) scale(.9)}}
@keyframes mxRing{0%{r:2;opacity:.9}100%{r:11;opacity:0}}
@keyframes mxWrite{0%{stroke-dashoffset:30}50%,80%{stroke-dashoffset:0}100%{stroke-dashoffset:-30}}
@keyframes mxCap{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-2px) rotate(-4deg)}}
@keyframes mxSlide{0%,100%{transform:translateX(0)}50%{transform:translateX(4px)}}
.ico .k-loupe{animation:mxLoupe 4.5s var(--ease) infinite}
.ico .k-pulse{transform-box:fill-box;transform-origin:center;animation:mxPulse 2.2s ease-in-out infinite}
.ico .k-rise{animation:mxRise 2.4s ease-in-out infinite}
.ico .k-tilt{transform-box:fill-box;transform-origin:50% 8%;animation:mxTilt 3.6s ease-in-out infinite}
.ico .k-tw{transform-box:fill-box;transform-origin:center;animation:mxTwinkle 2.4s ease-in-out infinite}
.ico .k-tw:nth-of-type(2){animation-delay:.8s}.ico .k-tw:nth-of-type(3){animation-delay:1.6s}
.ico .k-type{animation:mxType 1.2s ease-in-out infinite}
.ico .k-build{transform-box:fill-box;transform-origin:left center;animation:mxBuild 3.2s var(--ease) infinite}
.ico .k-climb{animation:mxClimb 4s var(--ease) infinite}
.ico .k-click{transform-box:fill-box;transform-origin:center;animation:mxClick 2.6s ease-in-out infinite}
.ico .k-ring{animation:mxRing 2.6s ease-out infinite}
.ico .k-write{stroke-dasharray:30;animation:mxWrite 3s ease-in-out infinite}
.ico .k-cap{transform-box:fill-box;transform-origin:center;animation:mxCap 3s ease-in-out infinite}
.ico .k-slide{animation:mxSlide 3s ease-in-out infinite}
@keyframes mxOnde{0%{transform:scale(.35);opacity:.95}100%{transform:scale(1.25);opacity:0}}
@keyframes mxOnde2{0%,100%{transform:scale(.85);opacity:1}50%{transform:scale(1.12);opacity:.45}}
.ico .k-onde{transform-box:fill-box;transform-origin:center;animation:mxOnde 2.4s ease-out infinite}
.ico .k-onde.dl2{animation-delay:1.2s}
.ico .k-onde2{transform-box:fill-box;transform-origin:center;animation:mxOnde2 2.6s ease-in-out infinite}
/* petites tailles : traits épaissis pour garder le même poids visuel que les grands pictos */
.ico.sm .s,.ico.sm .a{stroke-width:3.4}
/* sur fond sombre : trait clair, aplat translucide */
.mx-top .ico .s,.mx-foot .ico .s,.hero .ico .s{stroke:#e9f0f3}
.mx-top .ico .fs,.mx-foot .ico .fs,.hero .ico .fs{fill:rgba(255,255,255,.1)}
/* sur le bandeau bleu : tout en blanc, le dégradé s'y perdrait */
.mx-cta .ico .s,.mx-cta .ico .a{stroke:#fff}.mx-cta .ico .f{fill:#fff}.mx-cta .ico .fs{fill:rgba(255,255,255,.16)}
.mx-cta .ico circle[fill="#fff"]{fill:#0064c8}
.ico .dl1{animation-delay:.25s}.ico .dl2{animation-delay:.5s}.ico .dl3{animation-delay:.75s}
@media (prefers-reduced-motion:reduce){
  .ico *{animation:none!important}
  html.js .reveal .ico .draw{stroke-dashoffset:0!important}
}

/* ---------- Apparition au défilement (le contenu reste visible sans JS) ---------- */
html.js .rv{opacity:0;transform:translateY(22px);transition:opacity .8s var(--ease),transform .8s var(--ease);transition-delay:calc(var(--d,0) * 90ms)}
html.js .is-in .rv,html.js .rv.is-in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){html.js .rv{opacity:1;transform:none;transition:none}}

/* ==========================================================================
   SECTIONS : primitives
   ========================================================================== */
.sec{position:relative;padding-block:clamp(64px,8vw,112px)}
/* titres de section : toujours pleine largeur, seul le paragraphe est borné */
.sec-head{display:grid;gap:16px;margin-bottom:clamp(36px,4vw,56px)}
.sec-head .lead{color:var(--ink-2);font-size:1.06rem;max-width:85%}
.sec-title{margin-bottom:clamp(28px,3.5vw,48px)}
.on-dark{color:#c8d3d9}
.on-dark h2,.on-dark h3{color:#fff}
.bg-white{background:#fff}.bg-soft{background:var(--soft)}.bg-softb{background:var(--soft-b)}
.bg-slate{background:var(--slate)}

/* ---------- Houle parallaxe (reprise de la production) : séparateur des blocs sombres et du bandeau ---------- */
.houle{position:absolute;left:0;right:0;bottom:0;width:100%;height:clamp(70px,9vw,112px);z-index:0;pointer-events:none;overflow:hidden}
.houle svg{width:100%;height:100%;display:block}
.houle-p>use{animation:mxHoule 25s cubic-bezier(.55,.5,.45,.5) infinite}
.houle-p>use:nth-child(1){animation-delay:-2s;animation-duration:13s;fill:rgba(0,131,255,.12)}
.houle-p>use:nth-child(2){animation-delay:-3s;animation-duration:17s;fill:rgba(0,186,255,.16)}
.houle-p>use:nth-child(3){animation-delay:-4s;animation-duration:23s;fill:rgba(0,131,255,.24)}
.houle-p>use:nth-child(4){animation-delay:-5s;animation-duration:31s;fill:rgba(0,150,255,.42)}
.houle--light .houle-p>use:nth-child(1){fill:rgba(255,255,255,.12)}
.houle--light .houle-p>use:nth-child(2){fill:rgba(255,255,255,.18)}
.houle--light .houle-p>use:nth-child(3){fill:rgba(255,255,255,.26)}
.houle--light .houle-p>use:nth-child(4){fill:rgba(255,255,255,.4)}
@keyframes mxHoule{0%{transform:translate3d(-90px,0,0)}100%{transform:translate3d(85px,0,0)}}
@media (prefers-reduced-motion:reduce){.houle-p>use{animation:none}}

/* ---------- FAQ (commune à toutes les pages) ---------- */
.faq{display:grid;gap:10px}
.faq details{background:#fff;border-radius:var(--r);box-shadow:0 10px 24px -22px rgba(19,40,60,.5)}
.faq summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:20px 22px;font-weight:800;color:var(--slate);font-size:1.04rem}
.faq summary::-webkit-details-marker{display:none}
.faq summary i{position:relative;width:30px;height:30px;border-radius:50%;background:var(--soft-b);flex:none;transition:background-color .3s,transform .3s var(--ease)}
.faq summary i::before,.faq summary i::after{content:"";position:absolute;left:50%;top:50%;width:12px;height:2px;margin:-1px 0 0 -6px;background:var(--blue);border-radius:var(--r);transition:transform .3s var(--ease)}
.faq summary i::after{transform:rotate(90deg)}
.faq details[open] summary i{background:var(--blue);transform:rotate(180deg)}
.faq details[open] summary i::before{background:#fff}
.faq details[open] summary i::after{transform:rotate(0);background:#fff}
.faq .ans{padding:0 22px 20px;color:var(--ink-2)}
.faq .ans a{font-weight:700}

/* ==========================================================================
   PIED DE PAGE
   ========================================================================== */
.mx-cta{position:relative;overflow:hidden;background:linear-gradient(100deg,#0054b0 0%,#0064c8 60%,#0083FF 100%);color:#fff;isolation:isolate}
.mx-cta .wrap{position:relative;display:grid;grid-template-columns:minmax(0,1.3fr) auto;gap:28px 48px;align-items:center;padding-block:clamp(48px,6vw,72px)}
.mx-cta .t{font-size:clamp(1.6rem,1.1rem + 1.5vw,2.3rem);font-weight:900;color:#fff;line-height:1.15;letter-spacing:-.02em}
.mx-cta p{color:#eaf6ff;margin-top:12px}
.mx-cta .acts{display:flex;flex-wrap:wrap;gap:14px;align-items:center}
.mx-cta .acts .tel{color:#fff;font-weight:800;text-decoration:none;display:flex;align-items:center;gap:8px}
.mx-cta .acts .tel svg{width:28px;height:28px}
.mx-cta img.bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 40%;z-index:-2;opacity:.16;mix-blend-mode:luminosity}
.mx-cta .houle{z-index:-1}
.mx-foot{background:var(--slate-2);color:#aab7be;font-size:.95rem}
.mx-foot a{color:#dbe4e8;text-decoration:none}
.mx-foot a:hover{color:#fff;text-decoration:underline}
.mx-foot-news{border-bottom:1px solid rgba(255,255,255,.08)}
.mx-foot-news .wrap{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:24px 60px;align-items:center;padding-block:40px}
.mx-foot-news .t{color:#fff;font-weight:800;font-size:1.2rem}
.mx-foot-news p{margin-top:6px}
.mx-news-form{display:flex;gap:10px}
.mx-news-form input{flex:1;min-width:0;height:50px;border-radius:var(--r);border:1px solid rgba(255,255,255,.16);background:rgba(255,255,255,.05);color:#fff;padding:0 16px;font:inherit}
.mx-news-form input::placeholder{color:#8d9ca4}
.mx-news-form input:focus{outline:none;border-color:var(--cyan)}
.mx-foot-main .wrap{display:grid;grid-template-columns:minmax(0,1.3fr) repeat(4,minmax(0,1fr));gap:36px 32px;padding-block:56px 40px}
.mx-foot-brand img{width:160px;height:auto}
.mx-foot-brand p{margin-top:18px;line-height:1.6}
.mx-foot-brand address{font-style:normal;margin-top:20px;display:grid;gap:12px}
.mx-foot-brand address a,.mx-foot-brand address span{display:flex;gap:12px;align-items:center}
.mx-foot-brand address svg{width:42px;height:42px;padding:8px;border-radius:50%;background:rgba(255,255,255,.07);flex:none;transition:background-color .25s}
.mx-foot-brand address a:hover svg{background:rgba(0,131,255,.35)}
.mx-foot-col .t{color:#fff;font-weight:800;font-size:1rem;margin-bottom:14px}
.mx-foot-col ul{list-style:none;margin:0;padding:0;display:grid;gap:9px}
.mx-foot-bottom{border-top:1px solid rgba(255,255,255,.08)}
.mx-foot-bottom .wrap{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:16px;padding-block:22px;font-size:.86rem}
.mx-social{display:flex;gap:10px}
.mx-social a{display:grid;place-items:center;width:38px;height:38px;border-radius:50%;background:rgba(255,255,255,.06);transition:background-color .2s,transform .2s}
.mx-social a:hover{background:var(--blue);transform:translateY(-2px)}
.mx-social svg{width:16px;height:16px;color:#fff}
.mx-legal{display:flex;flex-wrap:wrap;gap:18px}
.mx-credit{margin-top:22px;font-size:.88rem;line-height:1.5;color:#aab7be}
.mx-credit a{color:#fff;font-weight:900;letter-spacing:.04em;text-decoration:none}
.mx-credit a:hover{color:var(--cyan);text-decoration:underline}

/* ==========================================================================
   RESPONSIVE : en-tête et pied
   ========================================================================== */
@media (max-width:1320px){.mx-tel .num{display:none}.mx-bar>.wrap{gap:18px}.mx-nav-btn{padding:0 10px}}
@media (max-width:1180px){
  :root{--head-bar:66px}
  .mx-burger{display:block}
  .mx-actions{margin-left:auto}
  .mx-tel{display:none}
  .mx-nav{position:fixed;inset:calc(var(--head-top) + var(--head-bar)) 0 0 0;background:#fff;display:block;height:auto;overflow-y:auto;padding:12px var(--gut) 40px;transform:translateX(100%);transition:transform .35s var(--ease);border-top:1px solid #e9eef1}
  .mx-nav.is-open{transform:none}
  .mx-nav>ul{flex-direction:column;height:auto;gap:0}
  .mx-nav>ul>li{display:block;border-bottom:1px solid #edf1f3}
  .mx-nav-btn{width:100%;justify-content:space-between;height:58px;padding:0 4px;font-size:1.05rem}
  .mx-nav-btn:hover,.mx-nav li.is-open>.mx-nav-btn{background:none}
  .mx-mega{position:static;box-shadow:none;border:0;opacity:1;visibility:visible;transform:none;display:none}
  .mx-nav li.is-open>.mx-mega{display:block}
  .mx-mega-in{grid-template-columns:1fr;padding:0 0 16px;gap:12px}
  .mx-promo{order:2}
  .mx-mega-items,.mx-mega-items.c2{grid-template-columns:1fr}
  .mx-mega-items a{padding:10px 6px}
  body.nav-open{overflow:hidden}
  .mx-foot-main .wrap{grid-template-columns:repeat(2,minmax(0,1fr))}
  .mx-foot-brand{grid-column:1/-1}
}
@media (max-width:760px){
  .mx-top nav{display:none}
  .sec-head .lead,.agency-lead{max-width:none}
  .mx-top .long{display:none}
  .mx-top .short{display:inline}
  .mx-actions .btn{display:none}
  .mx-logo{width:132px}
  .mx-cta .wrap,.mx-foot-news .wrap{grid-template-columns:1fr}
  .mx-cta{background:linear-gradient(160deg,#0054b0 0%,#0066cc 100%)}
  .mx-news-form{flex-direction:column}
}
@media (max-width:520px){.mx-foot-main .wrap{grid-template-columns:1fr}}

/* ---------- Cross-selling : carte sombre d'accroche + liste des autres pages du silo ---------- */
.mx-silo{background:#fff;overflow:clip}
.mx-silo-g{display:grid;grid-template-columns:minmax(0,.75fr) minmax(0,1.25fr);gap:clamp(20px,3vw,40px);align-items:stretch}
.mx-silo-p{position:relative;display:flex;flex-direction:column;justify-content:center;gap:16px;padding:clamp(26px,3vw,40px);border-radius:var(--r);overflow:hidden;isolation:isolate;background:radial-gradient(120% 120% at 100% 0%,#0a4a91 0%,#112a40 55%,#141d22 100%);color:#cfdbe1}
.mx-silo-p::after{content:"";position:absolute;z-index:-1;right:-18%;bottom:-22%;width:70%;aspect-ratio:1;background:url("img/maxelik-symbole.svg") no-repeat center/contain;opacity:.08}
.mx-silo-p .k{font-size:.78rem;font-weight:900;letter-spacing:.08em;text-transform:uppercase;color:#7fd8ff}
.mx-silo-p .t{font-size:clamp(1.1rem,1rem + .4vw,1.3rem);line-height:1.5;font-weight:700;color:#fff}
.mx-silo-p .btn{align-self:flex-start}
.mx-silo-l{list-style:none;margin:0;padding:0;display:grid;border-top:1px solid #e3eaef}
.mx-silo-l li{border-bottom:1px solid #e3eaef}
.mx-silo-l a{display:grid;grid-template-columns:52px minmax(0,1fr) 40px;gap:18px;align-items:center;padding:16px 14px;border-radius:var(--r);color:var(--ink);text-decoration:none;transition:background-color .3s,transform .3s var(--ease)}
.mx-silo-l .ic{display:grid;place-items:center;width:52px;height:52px;border-radius:var(--r);background:var(--soft);transition:background .3s}
.mx-silo-l .ic .ico{width:32px;height:32px}
.mx-silo-l b{display:block;font-size:1.06rem;font-weight:900;color:var(--slate)}
.mx-silo-l .tx>span{display:block;margin-top:2px;font-size:.92rem;color:var(--ink-2);line-height:1.45}
.mx-silo-l .go{display:grid;place-items:center;width:40px;height:40px;border-radius:50%;box-shadow:inset 0 0 0 1.5px #c9d9e6;color:var(--blue);transition:background .3s,color .3s,transform .3s var(--ease),box-shadow .3s}
.mx-silo-l .go svg{width:16px;height:16px}
.mx-silo-l a:hover,.mx-silo-l a:focus-visible{background:var(--soft);transform:translateX(4px)}
.mx-silo-l a:hover .ic,.mx-silo-l a:focus-visible .ic{background:var(--grad)}
.mx-silo-l a:hover .ic .s,.mx-silo-l a:hover .ic .a{stroke:#fff}.mx-silo-l a:hover .ic .f{fill:#fff}.mx-silo-l a:hover .ic .fs{fill:rgba(255,255,255,.2)}
.mx-silo-l a:hover .go,.mx-silo-l a:focus-visible .go{background:var(--grad);color:#fff;box-shadow:none;transform:translateX(4px)}
@media (max-width:900px){.mx-silo-g{grid-template-columns:1fr}}
@media (max-width:480px){.mx-silo-l a{grid-template-columns:44px minmax(0,1fr);padding:14px 6px}.mx-silo-l .go{display:none}.mx-silo-l .ic{width:44px;height:44px}}