/* ==========================================================================
   Maxelik, page fille « Site e-commerce » (classes ec-), sur creation.css + site-vitrine.css + site-institutionnel.css
   Fiche produit annotée, comparatif de plateformes, pages qui vendent, leviers d acquisition, postes de prix
   ========================================================================== */

/* ---------- hero ---------- */
.ec-hero-bg{object-position:50% 40%}

.ec-card{position:relative;justify-self:end;width:100%;max-width:440px}
.ec-card-in{display:grid;grid-template-columns:.9fr 1.1fr;gap:14px;padding:14px;border-radius:0 0 var(--r) var(--r);background:#fff;box-shadow:0 50px 100px -40px rgba(0,0,0,.85)}
.ec-c-img{position:relative;display:flex;align-items:flex-end;min-height:230px;padding:10px;border-radius:var(--r);background:radial-gradient(60% 50% at 50% 42%,#f7d48a,#d9902f 60%,#7a4a1c);overflow:clip}
.ec-c-img::before{content:"";position:absolute;left:50%;top:14%;width:34%;height:70%;margin-left:-17%;border-radius:40% 40% 10% 10%/18% 18% 6% 6%;background:linear-gradient(90deg,rgba(255,255,255,.25),rgba(255,255,255,0) 40%),#2f5d2a;box-shadow:0 18px 30px -10px rgba(0,0,0,.5)}
.ec-c-img span{position:relative;padding:3px 8px;border-radius:999px;background:rgba(255,255,255,.9);font-size:.66rem;font-weight:800;color:#5a3a12}
.ec-c-txt{display:grid;gap:8px;align-content:start}
.ec-c-txt b{font-size:.95rem;line-height:1.25;color:var(--slate)}
.ec-c-rev{font-size:.78rem;color:#f2b84b}.ec-c-rev small{color:var(--ink-2)}
.ec-c-stock{display:flex;align-items:center;gap:6px;font-size:.72rem;font-weight:700;color:#1d7a3a}
.ec-c-stock i{width:8px;height:8px;border-radius:50%;background:#28a745}
.ec-c-var{display:flex;gap:6px}
.ec-c-var span{padding:5px 9px;border-radius:999px;background:var(--soft);font-size:.7rem;font-weight:800;color:var(--ink-2)}
.ec-c-var span.on{background:var(--slate);color:#fff;box-shadow:none}
.ec-c-btn{display:block;padding:10px;border-radius:var(--r);background:var(--grad);color:#fff;text-align:center;font-size:.8rem;font-weight:900}
.ec-c-del{font-size:.7rem;color:var(--ink-2)}
.ec-card .sv-dot.d1{right:-10px;top:58px}.ec-card .sv-dot.d2{right:-10px;top:96px}.ec-card .sv-dot.d3{right:-10px;top:124px}.ec-card .sv-dot.d4{right:-10px;top:250px}

/* ---------- plateformes ---------- */
.ec-plat-s{position:relative;isolation:isolate;overflow:clip;background:var(--slate-2)}
.ec-plat-s::after{content:"";position:absolute;z-index:-1;right:-6%;bottom:-16%;width:min(520px,42vw);aspect-ratio:1;background:url("img/maxelik-symbole.svg") no-repeat center/contain;opacity:.06;filter:brightness(3)}
.ec-cmp td{padding-left:20px}
.ec-cmp tbody td:last-child{background:transparent;color:#c8d3d9;font-weight:400}
.ec-cmp tbody td:nth-child(2){background:rgba(0,131,255,.1);color:#fff}
.ec-cmp thead th:nth-of-type(1){background:var(--grad)}
.ec-cmp thead th:nth-of-type(1) small{color:#e6f6ff}
.si-obl-n a{color:#7fd8ff;font-weight:800}

/* ---------- pages qui vendent ---------- */
.ec-pages{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.ec-p{display:grid;gap:8px;align-content:start;padding:24px 22px;border-radius:var(--r);background:var(--soft);transition:transform .4s var(--ease),box-shadow .4s var(--ease)}
.ec-p:hover{transform:translateY(-4px);box-shadow:inset 0 0 0 1.5px var(--blue)}
.ec-p-n{font-size:1.8rem;font-weight:900;line-height:1;color:transparent;-webkit-text-stroke:1.2px var(--blue)}
.ec-p h3{font-size:1.1rem}
.ec-p p{font-size:.94rem;color:var(--ink-2)}

/* ---------- obligations : fond plus sombre que les plateformes ---------- */
.ec-obl-s{background:radial-gradient(90% 80% at 10% 0%,#0b3a72 0%,#121c2b 55%,#0f171c 100%)}

/* ---------- acquisition ---------- */
.ec-acq-lead{max-width:none;font-size:1.06rem;line-height:1.6;color:var(--slate)}
.ec-lev{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin-top:26px}
.ec-l{display:flex;flex-direction:column;gap:10px;padding:22px 20px;border-radius:var(--r);background:#fff;box-shadow:0 30px 60px -46px rgba(10,40,80,.5)}
.ec-l h3{font-size:1.06rem}
.ec-l p{font-size:.92rem;color:var(--ink-2)}
.ec-l .lnk{margin-top:auto;font-size:.9rem}
.ec-acq-n{margin-top:20px;color:var(--ink-2)}
.ec-acq-n a{color:var(--blue);font-weight:800}

/* ---------- postes de prix ---------- */
.ec-var{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:10px}
.ec-var li{display:grid;gap:4px;padding:18px 20px;border-radius:var(--r);background:var(--soft)}
.ec-var b{color:var(--slate)}
.ec-var span{font-size:.9rem;color:var(--ink-2)}
.si-steps a{color:var(--blue)}

/* ---------- adaptations ---------- */
@media (max-width:1100px){.ec-card{justify-self:start;max-width:520px}.ec-pages,.ec-lev{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.ec-card{display:none}.ec-pages,.ec-lev,.ec-var{grid-template-columns:1fr}}
.ec-prix-s .sv-bud{align-items:start}