/* ==========================================================================
   Maxelik, page fille Bing Ads (classes bi-) : s'appuie sur contenus.css
   (cn-ek, cn-top, cn-def, cn-px, cn-lx).
   Hero sombre : le réseau Microsoft dessiné autour de Bing.
   ========================================================================== */

/* ---------- hero ---------- */
.bi-hero{position:relative;overflow:clip;isolation:isolate;padding-block:clamp(22px,3.6vh,48px) clamp(26px,4vh,60px);background:radial-gradient(50% 80% at 85% 40%,rgba(0,186,255,.22),transparent 70%),radial-gradient(40% 60% at 0% 100%,rgba(0,131,255,.14),transparent 70%),#0f1a22;color:#c8d3d9}
.bi-hero-g{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(28px,4.5vw,72px);align-items:center}
.bi-k{display:inline-flex;align-items:center;gap:10px;font-size:.86rem;font-weight:900;letter-spacing:.1em;text-transform:uppercase;color:#7fd8ff}
.bi-k .ico{width:24px;height:24px;padding:3px;box-sizing:content-box;border-radius:6px;background:#fff}
.bi-hero h1{margin-top:12px;color:#fff}
.bi-lead{margin-top:16px;font-size:1.08rem;line-height:1.65;color:#c8d3d9}
.bi-acts{display:flex;flex-wrap:wrap;gap:12px;margin-top:24px}
.btn-ghost{background:rgba(255,255,255,.1);color:#fff}
.btn-ghost:hover{background:rgba(255,255,255,.18)}
.bi-proofs{list-style:none;margin:22px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.bi-proofs li{padding:8px 14px;border-radius:999px;background:rgba(255,255,255,.08);font-size:.9rem;color:#c8d3d9}
.bi-proofs b{color:#fff}

/* réseau : Bing au centre, moteurs et espaces autour */
.bi-net{position:relative;width:min(100%,440px);aspect-ratio:1;margin-inline:auto;max-height:clamp(340px,56vh,440px)}
.bi-net-l{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.bi-net-l circle{fill:none;stroke:rgba(127,216,255,.16);stroke-width:1.2}
.bi-net-l path{fill:none;stroke:rgba(127,216,255,.32);stroke-width:1.2;stroke-dasharray:4 6}
.bi-net-c{position:absolute;left:50%;top:50%;display:grid;justify-items:center;gap:6px;width:128px;height:128px;margin:-64px 0 0 -64px;place-content:center;border-radius:50%;background:radial-gradient(circle at 30% 25%,#1d8cff,#0a3f86);box-shadow:0 0 0 12px rgba(0,131,255,.14),0 30px 60px -20px rgba(0,131,255,.7);color:#fff}
.bi-net-c .ico{width:40px;height:40px;padding:6px;box-sizing:content-box;border-radius:10px;background:#fff}
.bi-net-c b{font-size:1.1rem;font-weight:900}
.bi-n{position:absolute;display:grid;gap:1px;padding:8px 14px;border-radius:var(--r);background:#fff;box-shadow:0 18px 36px -18px rgba(0,0,0,.7);transform:translate(-50%,-50%)}
.bi-n b{font-size:.92rem;font-weight:900;color:var(--slate)}
.bi-n i{font-style:normal;font-size:.7rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--blue)}
.bi-n.o{background:#1c2b35}
.bi-n.o b{color:#fff}
.bi-n.o i{color:#7fd8ff}
.n1{left:18%;top:29.5%}.n2{left:82.5%;top:28%}.n3{left:86.5%;top:63%}
.n4{left:62%;top:90.5%}.n5{left:15.5%;top:75%}.n6{left:50%;top:6.5%}
@media (prefers-reduced-motion:no-preference){
  .bi-net-l path{animation:bi-flux 2.4s linear infinite}
  .bi-n{animation:bi-pop .6s var(--ease) both}
  .n1{animation-delay:.3s}.n2{animation-delay:.45s}.n3{animation-delay:.6s}.n4{animation-delay:.75s}.n5{animation-delay:.9s}.n6{animation-delay:1.05s}
}
@keyframes bi-flux{to{stroke-dashoffset:-20}}
@keyframes bi-pop{from{transform:translate(-50%,-30%)}to{transform:translate(-50%,-50%)}}

/* ---------- définition + frise ---------- */
.bi-def{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(32px,5vw,80px);align-items:center}
.bi-def-t{display:grid;gap:16px}
.bi-def-t>p:not(.cn-ek){font-size:1.04rem;line-height:1.75;color:var(--ink-2)}
.bi-tl{list-style:none;margin:0;padding:0;display:grid;gap:0}
.bi-tl li{position:relative;display:grid;grid-template-columns:132px minmax(0,1fr);gap:2px 24px;padding:0 0 26px}
.bi-tl li::before{content:"";position:absolute;left:114px;top:6px;width:14px;height:14px;border-radius:50%;background:var(--soft-b)}
.bi-tl li::after{content:"";position:absolute;left:120px;top:24px;bottom:2px;width:2px;background:var(--soft-b)}
.bi-tl li:last-child::after{display:none}
.bi-tl li:last-child{padding-bottom:0}
.bi-tl b{grid-row:1/3;font-size:1.3rem;font-weight:900;letter-spacing:-.02em;color:var(--slate)}
.bi-tl span{font-size:1.05rem;font-weight:800;color:var(--slate)}
.bi-tl p{font-size:.94rem;line-height:1.6;color:var(--ink-2)}
.bi-tl .is-now::before{background:var(--grad);box-shadow:0 0 0 6px rgba(0,131,255,.14)}
.bi-tl .is-now b{font-size:1.02rem;color:var(--blue)}

/* ---------- réseau en trois familles ---------- */
.bi-rs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(14px,1.8vw,22px)}
.bi-rs-c{display:grid;grid-template-rows:auto auto 1fr auto;gap:10px;padding:clamp(22px,2.6vw,32px);border-radius:var(--r);background:#fff;box-shadow:0 20px 44px -36px rgba(19,40,60,.5)}
.bi-rs-n{font-size:2.2rem;font-weight:900;line-height:1;letter-spacing:-.04em;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.bi-rs-c h3{font-size:1.25rem}
.bi-rs-c>p:not(.bi-rs-n){font-size:.95rem;line-height:1.6;color:var(--ink-2)}
.bi-rs-c ul{list-style:none;margin:6px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:6px}
.bi-rs-c li{padding:5px 12px;border-radius:999px;background:var(--soft-b);font-size:.82rem;font-weight:800;color:var(--slate)}

/* ---------- comparaison ---------- */
.bi-vs-s{position:relative;overflow:clip;isolation:isolate;background:radial-gradient(60% 80% at 0% 0%,rgba(0,131,255,.24),transparent 70%),#0f1a22}
.bi-vs-s::after{content:"";position:absolute;z-index:-1;right:-110px;bottom:-120px;width:420px;aspect-ratio:1;background:url("img/maxelik-symbole.svg") no-repeat center/contain;opacity:.05;filter:brightness(3)}
.bi-vs-s .cn-ek{color:#7fd8ff}
.bi-vs-top{margin-bottom:clamp(28px,3.6vw,48px)}
.bi-vs-lead{font-size:1.06rem;line-height:1.7;color:#c8d3d9}
.bi-vs{display:grid;gap:8px}
.bi-vs-hd,.bi-vs-r{display:grid;grid-template-columns:minmax(0,.7fr) minmax(0,1fr) minmax(0,1fr);gap:clamp(12px,2vw,28px);align-items:center;padding:16px clamp(16px,2vw,24px);border-radius:var(--r)}
.bi-vs-hd{padding-block:6px}
.bi-vs-hd span{display:inline-flex;align-items:center;gap:10px;font-size:1rem;font-weight:900;color:#fff}
.bi-vs-hd .ico{width:22px;height:22px;padding:4px;box-sizing:content-box;border-radius:6px;background:#fff}
.bi-vs-r{background:rgba(255,255,255,.05);font-size:.95rem;line-height:1.5;color:#b8c5cc}
.bi-vs-r span:nth-child(1){font-weight:900;color:#fff}
.bi-vs-r span:nth-child(3){font-weight:700;color:#fff}
.bi-vs-r:hover{background:rgba(0,131,255,.14)}

/* ---------- pour qui ---------- */
.bi-pq{list-style:none;margin:clamp(32px,4vw,52px) 0 0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(14px,1.8vw,22px)}
.bi-pq li{display:grid;align-content:start;gap:12px;padding:clamp(22px,2.4vw,28px);border-radius:var(--r);background:var(--soft)}
.bi-pq-i{display:grid;place-items:center;width:56px;height:56px;border-radius:var(--r);background:#fff}
.bi-pq-i .ico{width:34px;height:34px}
.bi-pq h3{font-size:1.15rem}
.bi-pq p{font-size:.94rem;line-height:1.6;color:var(--ink-2)}
.bi-pq li.is-no{background:var(--slate)}
.bi-pq li.is-no h3{color:#fff}
.bi-pq li.is-no p{color:#c8d3d9}

/* ---------- import ---------- */
.bi-im{display:grid;grid-template-columns:minmax(0,.8fr) 56px minmax(0,1.2fr);gap:clamp(12px,1.8vw,22px);align-items:center}
.bi-im-c{display:grid;gap:14px;padding:clamp(22px,2.6vw,32px);border-radius:var(--r);background:#fff;box-shadow:0 20px 44px -36px rgba(19,40,60,.5)}
.bi-im-k{display:flex;align-items:center;gap:12px;font-size:1.15rem;font-weight:900;color:var(--slate)}
.bi-im-k span{display:grid;place-items:center;width:40px;height:40px;border-radius:50%;background:var(--soft-b)}
.bi-im-k .ico{width:24px;height:24px}
.bi-im-c ul{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.bi-im-c li{position:relative;padding-left:28px;font-size:.96rem;line-height:1.55;color:var(--ink-2)}
.bi-im-c li::before{content:"";position:absolute;left:0;top:.25em;width:18px;height:18px;border-radius:50%;background:var(--soft-b)}
.bi-im-c li::after{content:"";position:absolute;left:6px;top:calc(.25em + 4px);width:5px;height:9px;border:solid var(--blue);border-width:0 2px 2px 0;transform:rotate(45deg)}
.bi-im-c.is-do{background:var(--slate)}
.bi-im-c.is-do .bi-im-k{color:#fff}
.bi-im-c.is-do .bi-im-k span{background:var(--grad)}
.bi-im-c.is-do .bi-im-k .ico{color:#fff}
.bi-im-c.is-do .bi-im-k .ico .fs{fill:rgba(255,255,255,.2)}
.bi-im-c.is-do ul{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px 22px}
.bi-im-c.is-do li{display:grid;align-content:start;gap:2px;color:#b8c5cc}
.bi-im-c.is-do li b{font-size:1rem;color:#fff}
.bi-im-c.is-do li::before{background:var(--grad)}
.bi-im-c.is-do li::after{border-color:#fff}
.bi-im-ar{display:grid;place-items:center;width:56px;height:56px;border-radius:50%;background:var(--grad);color:#fff}
.bi-im-ar svg{width:22px;height:22px}

/* ---------- responsive ---------- */
@media (max-width:1100px){.bi-pq{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:1000px){
  .bi-hero-g,.bi-def{grid-template-columns:1fr}
  .bi-rs{grid-template-columns:1fr}
  .bi-im{grid-template-columns:1fr}
  .bi-im-ar{justify-self:center;transform:rotate(90deg)}
  .bi-vs-hd,.bi-vs-r{grid-template-columns:minmax(0,.8fr) minmax(0,1fr) minmax(0,1fr);font-size:.88rem}
}
@media (max-width:700px){
  .bi-pq{grid-template-columns:1fr}
  .bi-im-c.is-do ul{grid-template-columns:1fr}
  .bi-net{width:100%;max-height:none}
  .bi-net-c{width:104px;height:104px;margin:-52px 0 0 -52px}
  .bi-n{padding:6px 10px}
  .bi-n b{font-size:.8rem}
  .bi-tl li{grid-template-columns:112px minmax(0,1fr);gap:2px 18px}
  .bi-tl li::before{left:94px}.bi-tl li::after{left:100px}
  .bi-vs-hd{display:none}
  .bi-vs-r{grid-template-columns:1fr;gap:6px}
  .bi-vs-r span:nth-child(2)::before{content:"Google Ads : ";font-weight:800;color:#dbe4e8}
  .bi-vs-r span:nth-child(3)::before{content:"Microsoft : ";font-weight:800;color:#7fd8ff}
}

/* 04/11/2026 : section de zone */
.bi-zn-s .cn-zn-c li:has(a){padding:0}
.bi-zn-s .cn-zn-c li a{display:block;padding:7px 14px;border-radius:999px;color:#fff;text-decoration:none}
.bi-zn-s .cn-zn-c li a:hover{background:rgba(0,131,255,.45)}
.bi-zn-s .cn-zn-t a{font-weight:700;color:#7fd8ff}