/* ==========================================================================
   Maxelik, page fille Instagram Ads (classes ins-) : s'appuie sur contenus.css
   (cn-ek, cn-top, cn-def, cn-px, cn-lx).
   Hero sombre : trois écrans Instagram (story, reel, fil).
   ========================================================================== */

/* ---------- hero ---------- */
.ins-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% 30%,rgba(0,131,255,.26),transparent 70%),radial-gradient(40% 60% at 60% 100%,rgba(0,186,255,.12),transparent 70%),#0f1a22;color:#c8d3d9}
.ins-hero-g{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:clamp(28px,4.5vw,72px);align-items:center}
.ins-k{display:inline-flex;align-items:center;gap:10px;font-size:.86rem;font-weight:900;letter-spacing:.1em;text-transform:uppercase;color:#7fd8ff}
.ins-k .ico{width:24px;height:24px;padding:3px;box-sizing:content-box;border-radius:6px;background:#fff}
.ins-hero h1{margin-top:12px;color:#fff}
.ins-lead{margin-top:16px;font-size:1.08rem;line-height:1.65;color:#c8d3d9}
.ins-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)}
.ins-proofs{list-style:none;margin:22px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.ins-proofs li{padding:8px 14px;border-radius:999px;background:rgba(255,255,255,.08);font-size:.9rem;color:#c8d3d9}
.ins-proofs b{color:#fff}

/* trois écrans */
.ins-scr{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(10px,1.4vw,18px);align-items:center;height:clamp(360px,56vh,440px)}
.ins-sc{display:grid;grid-template-rows:auto 1fr;gap:8px;height:88%}
.ins-sc.s-reel{height:100%}
.ins-sc-k{font-size:.72rem;font-weight:900;letter-spacing:.14em;text-transform:uppercase;text-align:center;color:#7fd8ff}
.ins-sc-v{position:relative;border-radius:16px;overflow:clip;box-shadow:0 30px 60px -30px rgba(0,0,0,.8);border:6px solid #1c2b35}
.s-story .ins-sc-v{display:grid;align-content:end;gap:8px;padding:14px;background:radial-gradient(80% 60% at 70% 20%,#9fd4ff,transparent 70%),linear-gradient(170deg,#3a8ee8,#0a3f86);color:#fff}
.s-story .bar{position:absolute;left:10px;right:10px;top:10px;height:3px;border-radius:999px;background:rgba(255,255,255,.4)}
.s-story .bar::after{content:"";position:absolute;inset:0 55% 0 0;border-radius:999px;background:#fff}
.s-story b{font-size:.9rem;line-height:1.2}
.s-story i{justify-self:center;padding:6px 12px;border-radius:999px;background:#fff;font-style:normal;font-size:.72rem;font-weight:900;color:var(--slate)}
.s-reel .ins-sc-v{display:grid;align-content:end;gap:6px;padding:14px;background:radial-gradient(70% 50% at 50% 30%,#ffd28a,transparent 70%),linear-gradient(170deg,#ffb35c,#e0573a 55%,#5b2333);color:#fff}
.s-reel .play{position:absolute;left:50%;top:38%;width:44px;height:44px;margin:-22px 0 0 -22px;border-radius:50%;background:rgba(255,255,255,.3)}
.s-reel .play::after{content:"";position:absolute;left:17px;top:13px;border-style:solid;border-width:9px 0 9px 14px;border-color:transparent transparent transparent #fff}
.s-reel .cap{justify-self:center;padding:4px 10px;border-radius:6px;background:rgba(0,0,0,.55);font-size:.72rem;font-weight:800}
.s-reel .who,.s-feed .who{display:flex;align-items:center;gap:6px;font-size:.66rem;font-weight:800}
.s-reel .who span,.s-feed .who span{width:18px;height:18px;border-radius:50%;background:var(--grad);flex:none}
.s-feed .ins-sc-v{display:grid;grid-template-rows:auto 1fr auto;background:#fff;color:var(--slate)}
.s-feed .who{padding:8px 10px}
.s-feed .img{background:radial-gradient(70% 60% at 30% 30%,#d7e8fb,transparent 70%),linear-gradient(150deg,#9cc7ff,#0083ff)}
.s-feed .cta{padding:8px 10px;background:#f3f6f8}
.s-feed .cta b{display:block;padding:6px;border-radius:6px;background:var(--blue);font-size:.74rem;text-align:center;color:#fff}
@media (prefers-reduced-motion:no-preference){
  .ins-sc{animation:ins-up .7s var(--ease) both}
  .s-story{animation-delay:.2s}.s-reel{animation-delay:.35s}.s-feed{animation-delay:.5s}
  .s-story .bar::after{animation:ins-bar 5s linear infinite}
}
@keyframes ins-up{from{transform:translateY(20px)}to{transform:none}}
@keyframes ins-bar{from{right:100%}to{right:0}}

/* ---------- booster ou campagne ---------- */
.ins-bo{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(14px,2vw,26px);margin-top:clamp(32px,4vw,52px);align-items:stretch}
.ins-bo-c{display:grid;align-content:start;gap:12px;padding:clamp(24px,2.8vw,36px);border-radius:var(--r);background:var(--soft)}
.ins-bo-k{font-size:.76rem;font-weight:900;letter-spacing:.14em;text-transform:uppercase;color:var(--blue)}
.ins-bo-c h3{font-size:1.3rem}
.ins-bo-c ul{list-style:none;margin:4px 0 0;padding:0;display:grid;gap:10px}
.ins-bo-c li{position:relative;padding-left:28px;font-size:.96rem;line-height:1.55;color:var(--ink-2)}
.ins-bo-c li::before{content:"";position:absolute;left:0;top:.2em;width:18px;height:18px;border-radius:50%;background:var(--grad)}
.ins-bo-c li::after{content:"";position:absolute;left:6px;top:calc(.2em + 4px);width:5px;height:9px;border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg)}
.ins-bo-c li.no::before{background:#d6dde1}
.ins-bo-c li.no::after{left:5px;top:calc(.2em + 8px);width:8px;height:2px;border:0;background:#6b777d;transform:none}
.ins-bo-n{margin-top:6px;padding-top:14px;box-shadow:0 -1px 0 rgba(19,40,60,.1);font-size:.92rem;font-weight:700;line-height:1.55;color:var(--slate)}
.ins-bo-c.is-pro{background:var(--slate)}
.ins-bo-c.is-pro .ins-bo-k{color:#7fd8ff}
.ins-bo-c.is-pro h3{color:#fff}
.ins-bo-c.is-pro li{color:#d6dee2}
.ins-bo-c.is-pro .ins-bo-n{box-shadow:0 -1px 0 rgba(255,255,255,.12);color:#fff}
.ins-bo-c.is-pro .ins-bo-n a{color:#7fd8ff}

/* ---------- formats ---------- */
.ins-fo{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:clamp(12px,1.6vw,20px)}
.ins-fo>li{display:grid;grid-template-rows:150px auto;gap:16px;padding:clamp(18px,2vw,24px);border-radius:var(--r);background:#fff;box-shadow:0 20px 44px -36px rgba(19,40,60,.5)}
.ins-fo h3{font-size:1.15rem}
.ins-fo-d{margin:4px 0 8px;font-size:.8rem;font-weight:900;color:var(--blue)}
.ins-fo li p:not(.ins-fo-d){font-size:.9rem;line-height:1.55;color:var(--ink-2)}
.ins-fo-f{position:relative;justify-self:center;align-self:center;display:grid;place-items:center;border-radius:8px;background:linear-gradient(160deg,#d7e8fb,#9cc7ff);overflow:clip}
.ins-fo-f b{position:relative;font-size:1rem;font-weight:900;color:var(--slate)}
.ins-fo-f.r916{width:80px;height:142px}
.ins-fo-f.r45{width:116px;height:145px}
.ins-fo-f .safe{position:absolute;left:0;right:0;background:rgba(19,40,60,.22)}
.ins-fo-f .safe.t{top:0;height:14%}
.ins-fo-f .safe.b{bottom:0;height:22%}
.ins-fo-f.car{display:flex;gap:6px;background:none;width:auto;height:110px}
.ins-fo-f.car i{width:38px;height:100%;border-radius:6px;background:linear-gradient(160deg,#d7e8fb,#9cc7ff)}
.ins-fo-f.car i:first-child{width:58px;background:linear-gradient(160deg,#9cc7ff,#0083ff)}
.ins-fo-f.gr{display:grid;grid-template-columns:repeat(3,36px);grid-auto-rows:36px;gap:4px;place-items:stretch;background:none}
.ins-fo-f.gr i{border-radius:4px;background:#d7e8fb}
.ins-fo-f.gr i.ad{background:var(--grad)}

/* ---------- conception ---------- */
.ins-cr-s{position:relative;overflow:clip;isolation:isolate;background:radial-gradient(60% 80% at 0% 100%,rgba(0,131,255,.24),transparent 70%),#0f1a22}
.ins-cr-s::after{content:"";position:absolute;z-index:-1;right:-110px;top:-120px;width:420px;aspect-ratio:1;background:url("img/maxelik-symbole.svg") no-repeat center/contain;opacity:.05;filter:brightness(3)}
.ins-cr-s .cn-ek{color:#7fd8ff}
.ins-cr{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(32px,5vw,80px);align-items:center}
.ins-cr-t{display:grid;gap:16px}
.ins-cr-t>p:not(.cn-ek){font-size:1.04rem;line-height:1.7;color:#c8d3d9}
.ins-cr-t a{font-weight:700;color:#7fd8ff}
.ins-cr-l{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.ins-cr-l li{display:grid;grid-template-columns:40px minmax(0,1fr);align-content:start;gap:4px 14px;padding:20px 22px;border-radius:var(--r);background:rgba(255,255,255,.05)}
.ins-cr-l li>span{grid-row:1/3;display:grid;place-items:center;width:40px;height:40px;border-radius:50%;background:var(--grad);font-weight:900;color:#fff}
.ins-cr-l h3{font-size:1.04rem}
.ins-cr-l p{font-size:.92rem;line-height:1.55;color:#b8c5cc}

/* ---------- contenus partenaires ---------- */
.ins-pa{display:grid;grid-template-columns:minmax(0,.75fr) minmax(0,1.25fr);gap:clamp(32px,5vw,80px);align-items:center}
.ins-pa-v{margin:0;justify-self:center;width:min(100%,320px);border-radius:16px;overflow:clip;background:#fff;box-shadow:0 30px 60px -36px rgba(19,40,60,.6)}
.ins-pa-h{position:relative;padding:12px 14px 12px 68px;font-size:.8rem;line-height:1.35;color:var(--ink-2)}
.ins-pa-h b{color:var(--slate)}
.ins-pa-h span{position:absolute;top:12px;width:28px;height:28px;border-radius:50%;border:2px solid #fff}
.ins-pa-h .a{left:12px;background:linear-gradient(150deg,#ffb35c,#e0573a)}
.ins-pa-h .b{left:28px;background:var(--grad)}
.ins-pa-i{display:grid;place-items:end start;aspect-ratio:4/5;padding:12px;background:radial-gradient(70% 60% at 40% 30%,#ffe2b0,transparent 70%),linear-gradient(160deg,#ffb35c,#e0573a 60%,#7a2e3a)}
.ins-pa-i span{padding:4px 10px;border-radius:999px;background:rgba(0,0,0,.45);font-size:.72rem;font-weight:800;color:#fff}
.ins-pa-c{padding:10px 14px;background:#f3f6f8}
.ins-pa-c b{display:block;padding:7px;border-radius:6px;background:var(--blue);font-size:.8rem;text-align:center;color:#fff}
.ins-pa-t{display:grid;gap:16px}
.ins-pa-t>p:not(.cn-ek){font-size:1.04rem;line-height:1.75;color:var(--ink-2)}
.ins-pa-l{list-style:none;margin:4px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.ins-pa-l li{padding:7px 14px;border-radius:999px;background:#fff;font-size:.88rem;font-weight:800;color:var(--slate);box-shadow:0 10px 20px -16px rgba(19,40,60,.5)}

/* ---------- responsive ---------- */
@media (max-width:1100px){.ins-fo{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:1000px){
  .ins-hero-g,.ins-cr,.ins-pa,.ins-bo{grid-template-columns:1fr}
}
@media (max-width:700px){
  .ins-fo{grid-template-columns:1fr}
  .ins-fo>li{grid-template-rows:auto auto}
  .ins-cr-l{grid-template-columns:1fr}
  .ins-scr{height:330px;gap:10px;grid-template-columns:repeat(2,minmax(0,1fr))}
  .ins-sc.s-feed{display:none}
  .ins-sc-v{border-width:4px;border-radius:12px}
  .s-story b{font-size:.76rem}
}

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