/* ==========================================================================
   Maxelik, page ville du silo référencement payant : agence SEA à Caen (classes sc-)
   S'appuie sur contenus.css (cn-ek, cn-top, cn-def, cn-px, cn-lx).
   Hero sombre : Caen vue du ciel et une zone de diffusion en cercles.
   ========================================================================== */

/* ---------- hero ---------- */
.sc-hero{position:relative;overflow:clip;isolation:isolate;padding-block:clamp(22px,3.6vh,48px) clamp(26px,4vh,60px);background:radial-gradient(55% 80% at 100% 0%,rgba(0,131,255,.3),transparent 70%),radial-gradient(40% 60% at 0% 100%,rgba(0,186,255,.12),transparent 70%),#0f1a22;color:#c8d3d9}
.sc-hero-g{display:grid;grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr);gap:clamp(28px,4.5vw,72px);align-items:center}
.sc-k{display:inline-flex;align-items:center;gap:10px;font-size:.86rem;font-weight:900;letter-spacing:.1em;text-transform:uppercase;color:#7fd8ff}
.sc-k .ico{width:22px;height:22px;color:#7fd8ff}
.sc-k .ico .fs{fill:rgba(127,216,255,.12)}
.sc-hero h1{margin-top:12px;color:#fff}
.sc-lead{margin-top:16px;font-size:1.08rem;line-height:1.65;color:#c8d3d9}
.sc-acts{display:flex;flex-wrap:wrap;gap:12px;margin-top:24px}
.sc-proofs{list-style:none;margin:22px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.sc-proofs li{padding:8px 14px;border-radius:999px;background:rgba(255,255,255,.08);font-size:.9rem;color:#c8d3d9}
.sc-proofs b{color:#fff}
.sc-ph{position:relative;height:clamp(380px,60vh,460px)}
.sc-ph img{width:100%;height:100%;object-fit:cover;object-position:50% 62%;border-radius:var(--r);box-shadow:0 40px 80px -40px rgba(0,0,0,.8)}
.sc-zone{position:absolute;left:-30px;bottom:24px;display:grid;gap:10px;width:min(240px,64%);padding:16px 18px;border-radius:var(--r);background:#fff;color:var(--ink-2);box-shadow:0 30px 60px -30px rgba(0,0,0,.7)}
.sc-zone-h{display:flex;justify-content:space-between;align-items:baseline;font-size:.88rem;color:var(--slate)}
.sc-zone-h span{font-size:.68rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--blue)}
.sc-zone-r{position:relative;height:110px}
.sc-zone-r i{position:absolute;left:50%;top:50%;border-radius:50%;transform:translate(-50%,-50%)}
.sc-zone-r .r3{width:108px;height:108px;background:rgba(0,131,255,.1)}
.sc-zone-r .r2{width:72px;height:72px;background:rgba(0,131,255,.22)}
.sc-zone-r .r1{width:36px;height:36px;background:var(--grad)}
.sc-zone-r b{position:absolute;left:50%;top:50%;transform:translate(14px,-50%);padding:2px 8px;border-radius:999px;background:var(--slate);font-size:.72rem;color:#fff}
.sc-zone ul{list-style:none;margin:0;padding:0;display:grid;gap:4px}
.sc-zone li{display:flex;align-items:center;gap:8px;font-size:.8rem;font-weight:700;color:var(--slate)}
.sc-zone li i{width:12px;height:12px;border-radius:50%}
.sc-zone li .r1{background:var(--grad)}
.sc-zone li .r2{background:rgba(0,131,255,.4)}
.sc-zone li .r3{background:rgba(0,131,255,.16)}
@media (prefers-reduced-motion:no-preference){
  .sc-zone-r i{animation:sc-pulse 1s var(--ease) both}
  .sc-zone-r .r2{animation-delay:.25s}.sc-zone-r .r3{animation-delay:.5s}
}
@keyframes sc-pulse{from{transform:translate(-50%,-50%) scale(.4)}to{transform:translate(-50%,-50%) scale(1)}}

/* ---------- le SEA pour une entreprise caennaise ---------- */
.sc-def{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(32px,5vw,80px);align-items:center}
.sc-def-t{display:grid;gap:16px}
.sc-def-t>p:not(.cn-ek){font-size:1.04rem;line-height:1.75;color:var(--ink-2)}
.sc-def-t a{font-weight:700}
.sc-be{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.sc-be li{display:grid;grid-template-columns:44px minmax(0,1fr);gap:2px 16px;padding:16px 18px;border-radius:var(--r);background:var(--soft);font-size:.92rem;line-height:1.5;color:var(--ink-2)}
.sc-be li span{grid-row:1/3;display:grid;place-items:center;width:44px;height:44px;border-radius:var(--r);background:#fff}
.sc-be li .ico{width:26px;height:26px}
.sc-be b{font-size:1.02rem;color:var(--slate)}

/* ---------- coût d'un clic ---------- */
.sc-cp{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(32px,5vw,80px);align-items:center}
.sc-cp-t{display:grid;gap:16px}
.sc-cp-t>p:not(.cn-ek){font-size:1.04rem;line-height:1.75;color:var(--ink-2)}
.sc-cp-f{margin:0;padding:clamp(22px,2.8vw,34px);border-radius:var(--r);background:#fff;box-shadow:0 30px 60px -40px rgba(19,40,60,.55)}
.sc-cp-f figcaption,.sc-cp-f li{display:grid;grid-template-columns:minmax(0,1fr) 76px minmax(0,1.2fr);gap:14px;align-items:center}
.sc-cp-f figcaption{padding:0 14px 10px;font-size:.72rem;font-weight:900;letter-spacing:.1em;text-transform:uppercase;color:var(--blue)}
.sc-cp-f figcaption span:nth-child(2){text-align:right}
.sc-cp-f figcaption span:nth-child(3){text-align:right}
.sc-cp-f ol{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.sc-cp-f li{padding:11px 14px;border-radius:6px;background:var(--soft);font-size:.94rem}
.sc-cp-f li b{color:var(--slate)}
.sc-cp-f li>span:nth-of-type(1){text-align:right;color:var(--ink-2)}
.sc-cp-f .v{display:grid;grid-template-columns:minmax(0,1fr) 64px;gap:10px;align-items:center;font-weight:900;color:var(--slate);text-align:right}
.sc-cp-f .v i{height:8px;width:var(--w);min-width:6px;border-radius:999px;background:var(--grad)}
.sc-cp-n{margin-top:12px;font-size:.82rem;color:#6b777d}

/* ---------- SEA ou SEO ---------- */
.sc-vs-s{position:relative;overflow:clip;isolation:isolate;background:radial-gradient(60% 80% at 0% 100%,rgba(0,131,255,.24),transparent 70%),#0f1a22}
.sc-vs-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)}
.sc-vs-s .cn-ek{color:#7fd8ff}
.sc-vs-top{margin-bottom:clamp(28px,3.6vw,48px)}
.sc-vs-lead{font-size:1.06rem;line-height:1.7;color:#c8d3d9}
.sc-vs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(14px,2vw,24px)}
.sc-vs-c{display:grid;align-content:start;gap:14px;padding:clamp(24px,2.8vw,34px);border-radius:var(--r);background:rgba(255,255,255,.05)}
.sc-vs-c.is-seo{background:radial-gradient(120% 120% at 100% 0%,#0a4a91 0%,#112a40 60%,#141d22 100%)}
.sc-vs-k{font-size:1.15rem;font-weight:900;color:#fff}
.sc-vs-c ul{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.sc-vs-c li{position:relative;padding-left:26px;font-size:.98rem;line-height:1.5;color:#c8d3d9}
.sc-vs-c li::before{content:"";position:absolute;left:0;top:.45em;width:10px;height:10px;border-radius:50%;background:var(--grad)}
.sc-vs-a{display:inline-flex;align-items:center;gap:8px;margin-top:4px;font-weight:800;color:#7fd8ff;text-decoration:none}
.sc-vs-a svg{width:16px;height:16px;transition:transform .3s var(--ease)}
.sc-vs-a:hover svg{transform:translateX(4px)}

/* ---------- pour quelles entreprises ---------- */
.sc-pq{list-style:none;margin:clamp(32px,4vw,52px) 0 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(14px,1.8vw,22px);counter-reset:pq}
.sc-pq li{position:relative;display:grid;align-content:start;gap:10px;padding:clamp(22px,2.4vw,28px);padding-top:64px;border-radius:var(--r);background:var(--soft);counter-increment:pq}
.sc-pq li::before{content:counter(pq,decimal-leading-zero);position:absolute;left:clamp(22px,2.4vw,28px);top:20px;font-size:1.6rem;font-weight:900;line-height:1;letter-spacing:-.03em;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.sc-pq h3{font-size:1.15rem}
.sc-pq p{font-size:.94rem;line-height:1.6;color:var(--ink-2)}

/* ---------- zone ---------- */
.sc-zn{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(32px,5vw,80px);align-items:center}
.sc-zn-ph img{width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;border-radius:var(--r);box-shadow:0 30px 60px -40px rgba(19,40,60,.6)}
.sc-zn-t{display:grid;gap:16px}
.sc-zn-t>p:not(.cn-ek){font-size:1.04rem;line-height:1.75;color:var(--ink-2)}
.sc-zn-g{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.sc-zn-g>div{display:grid;align-content:start;gap:10px;padding:18px 20px;border-radius:var(--r);background:#fff}
.sc-zn-k{font-size:.76rem;font-weight:900;letter-spacing:.12em;text-transform:uppercase;color:var(--blue)}
.sc-zn-g ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px}
.sc-zn-g li{padding:5px 12px;border-radius:999px;background:var(--soft-b);font-size:.86rem;font-weight:700;color:var(--slate)}
.sc-zn-g li:has(a){padding:0}
.sc-zn-g li a{display:block;padding:5px 12px;border-radius:999px;color:var(--blue);text-decoration:none}
.sc-zn-g li a:hover{background:var(--blue);color:#fff}

/* ---------- déroulé ---------- */
.sc-me{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:clamp(10px,1.4vw,16px)}
.sc-me li{position:relative;display:grid;align-content:start;gap:8px;padding:clamp(18px,2vw,24px);border-radius:var(--r);background:var(--soft)}
.sc-me li>span{display:grid;place-items:center;width:40px;height:40px;border-radius:50%;background:var(--grad);font-weight:900;color:#fff}
.sc-me li:first-child{background:var(--slate)}
.sc-me li:first-child h3{color:#fff}
.sc-me li:first-child p{color:#c8d3d9}
.sc-me h3{font-size:1.04rem;margin-top:4px}
.sc-me p{font-size:.88rem;line-height:1.55;color:var(--ink-2)}

/* ---------- pourquoi Maxelik ---------- */
.sc-wy-s{position:relative;overflow:clip;isolation:isolate;background:radial-gradient(60% 80% at 100% 100%,rgba(0,131,255,.24),transparent 70%),#0f1a22}
.sc-wy-s .cn-ek{color:#7fd8ff}
.sc-wy{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:clamp(32px,5vw,80px);align-items:center}
.sc-wy-t{display:grid;gap:16px}
.sc-wy-t>p:not(.cn-ek){font-size:1.04rem;line-height:1.7;color:#c8d3d9}
.sc-wy-t img{width:100%;height:auto;aspect-ratio:16/10;object-fit:cover;object-position:50% 30%;border-radius:var(--r)}
.sc-wy-l{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.sc-wy-l li{display:grid;align-content:start;gap:6px;padding:20px 22px;border-radius:var(--r);background:rgba(255,255,255,.05)}
.sc-wy-l li:first-child{background:radial-gradient(120% 120% at 100% 0%,#0a4a91 0%,#112a40 60%,#141d22 100%)}
.sc-wy-l b{font-size:1.05rem;color:#fff}
.sc-wy-l span{font-size:.92rem;line-height:1.55;color:#b8c5cc}

/* ---------- responsive ---------- */
@media (max-width:1100px){.sc-me{grid-template-columns:repeat(3,minmax(0,1fr))}.sc-pq{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:1000px){
  .sc-hero-g,.sc-def,.sc-cp,.sc-zn,.sc-wy{grid-template-columns:1fr}
  .sc-zone{left:16px}
  .sc-zn-ph img{aspect-ratio:16/10}
}
@media (max-width:700px){
  .sc-vs,.sc-pq,.sc-wy-l,.sc-zn-g{grid-template-columns:1fr}
  .sc-me{grid-template-columns:1fr 1fr}
  .sc-ph{height:380px}
  .sc-cp-f figcaption,.sc-cp-f li{grid-template-columns:minmax(0,1fr) 48px 70px;gap:8px}
  .sc-cp-f .v{grid-template-columns:1fr}
  .sc-cp-f .v i{display:none}
}

/* 04/11/2026 : section Google Ads sur fond clair, cartes blanches */
.sc-ga-s .sc-pq li{background:#fff}