/* =========================================================
   SITE E-COMMERCE — concept "LA BOUTIQUE"
   Mini-boutique interactive : produits qui volent au panier,
   total en MAD, commande confirmée. Tickets de caisse.
   Double thème clair/sombre.
   ========================================================= */
#ec{
  /* CLAIR */
  --bg:#F7F5F1; --bg2:#FFFFFF; --ink:#0B0B0A; --soft:rgba(11,11,10,.75); --dim:#6E6E73;
  --line:rgba(11,11,10,.12);   --acc:#FF8A3D; --acc2:#F57323; --ok:#2FA36B;
  --serif:"Schibsted Grotesk",system-ui,-apple-system,Segoe UI,sans-serif;
  --mono:"JetBrains Mono",ui-monospace,Menlo,monospace;
  position:relative; background:var(--bg); color:var(--ink); font-family:var(--serif);
  overflow-x:clip; -webkit-font-smoothing:antialiased;
}
#intro,#cur-dot,#cur-ring{display:none!important}
body.locked{overflow:auto!important;height:auto!important}
[data-theme="dark"] #ec{
  --bg:#0B0A09; --bg2:#141312; --ink:#F4F1EB; --soft:rgba(244,241,235,.82); --dim:#98938A;
  --line:rgba(244,241,235,.14); --ok:#3BE07E;
}
#ec *{ box-sizing:border-box; }
#ec a{ color:inherit; text-decoration:none; }
#ec ::selection{ background:var(--acc); color:#0B0B0A; }
.ec-wrap{ width:min(1240px,calc(100% - 40px)); margin:0 auto; }
.ec-mono{ font-family:var(--mono); }

#ecProg{ position:fixed; top:0; left:0; height:2px; width:100%; z-index:95; transform:scaleX(0); transform-origin:0 50%;
  background:linear-gradient(90deg,var(--acc),var(--acc2)); }

#ec.is-ready [data-r]{ opacity:0; transform:translateY(26px); }
#ec.is-ready [data-r].in{ opacity:1; transform:none; transition:opacity 1s cubic-bezier(.19,1,.22,1),transform 1s cubic-bezier(.19,1,.22,1); transition-delay:var(--d,0s); }

.ec-eyebrow{ font-family:var(--mono); font-size:.68rem; letter-spacing:.26em; text-transform:uppercase; color:var(--dim); }
.ec-eyebrow b{ color:var(--acc); }
.ec-hl{ background:linear-gradient(rgba(255,138,61,.3),rgba(255,138,61,.3)) no-repeat; background-size:0% 100%; background-position:0 62%; padding:0 .05em; }
#ec .ec-hl.lit{ background-size:100% 100%; transition:background-size .9s cubic-bezier(.5,0,.1,1) var(--hd,0s); }

.ec-btn{ display:inline-flex; align-items:center; gap:.7rem; height:50px; padding:0 1.4rem; border-radius:10px;
  font-family:var(--mono); font-size:.75rem; font-weight:600; border:1.5px solid var(--ink); transition:.4s cubic-bezier(.19,1,.22,1); will-change:transform; }
.ec-btn.fill{ background:var(--acc); border-color:var(--acc); color:#0B0B0A; }
.ec-btn:hover{ background:var(--ink); color:var(--bg); }
.ec-btn.fill:hover{ background:var(--acc2); border-color:var(--acc2); color:#0B0B0A; }

/* ---------------- HERO : LA BOUTIQUE ---------------- */
.ec-hero{ padding:calc(var(--header-h,80px) + 1.6rem) 0 2rem; }
.ec-hero-grid{ display:grid; grid-template-columns:.95fr 1.05fr; gap:clamp(1.4rem,3.5vw,3rem); align-items:center; }
@media(max-width:920px){ .ec-hero-grid{ grid-template-columns:1fr; } }
.ec-hero h1{ font-weight:900; letter-spacing:-.045em; line-height:.98; font-size:clamp(1.9rem,4.6vw,3.3rem); max-width:16ch; }
.ec-hero h1 span{ color:var(--acc); }
.ec-lede{ margin-top:.9rem; font-size:clamp(.95rem,1.4vw,1.08rem); line-height:1.6; max-width:52ch; color:var(--soft); }
.ec-pay{ display:flex; flex-wrap:wrap; gap:.5rem; margin-top:1.1rem; }
.ec-pay span{ font-family:var(--mono); font-size:.62rem; font-weight:700; letter-spacing:.06em; border:1px solid var(--line);
  border-radius:8px; padding:.45rem .7rem; background:var(--bg2); transition:.35s; }
.ec-pay span:hover{ border-color:var(--acc); color:var(--acc); transform:translateY(-2px); }
.ec-cta{ display:flex; gap:.7rem; flex-wrap:wrap; margin-top:1.3rem; }

/* La boutique */
.ec-shop{ position:relative; border-radius:16px; border:1px solid var(--line); background:var(--bg2); overflow:hidden;
  box-shadow:0 50px 90px -60px rgba(0,0,0,.55); }
.ec-shopbar{ display:flex; align-items:center; gap:.6rem; padding:.75rem .95rem; border-bottom:1px solid var(--line); }
.ec-shopbar .lg{ width:22px; height:22px; border-radius:6px; background:linear-gradient(135deg,var(--acc),var(--acc2)); }
.ec-shopbar .nm{ font-weight:800; font-size:.82rem; letter-spacing:-.02em; }
.ec-cart{ margin-left:auto; position:relative; width:38px; height:38px; border-radius:10px; border:1px solid var(--line);
  display:grid; place-items:center; font-size:1rem; cursor:pointer; transition:.3s; }
.ec-cart:hover{ border-color:var(--acc); }
.ec-cart.bump{ animation:ecBump .4s cubic-bezier(.34,1.56,.64,1); }
@keyframes ecBump{ 40%{ transform:scale(1.18) rotate(-6deg); } }
.ec-badge{ position:absolute; top:-7px; right:-7px; min-width:18px; height:18px; border-radius:99px; padding:0 4px;
  background:var(--acc); color:#0B0B0A; font-family:var(--mono); font-size:.6rem; font-weight:700;
  display:grid; place-items:center; transform:scale(0); }
.ec-badge.on{ transform:scale(1); transition:transform .35s cubic-bezier(.34,1.8,.64,1); }

.ec-products{ display:grid; grid-template-columns:repeat(3,1fr); gap:.65rem; padding:.85rem; }
.ec-prod{ border:1px solid var(--line); border-radius:12px; overflow:hidden; background:var(--bg); transition:.35s cubic-bezier(.19,1,.22,1); }
.ec-prod:hover{ transform:translateY(-4px); border-color:rgba(255,107,26,.5); }
.ec-prod .ph{ height:72px; overflow:hidden; }
.ec-prod .ph img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform .8s; }
.ec-prod:hover .ph img{ transform:scale(1.08); }
.ec-prod .bd{ padding:.5rem .6rem .6rem; }
.ec-prod b{ display:block; font-size:.68rem; letter-spacing:-.01em; }
.ec-prod .pr{ font-family:var(--mono); font-size:.62rem; color:var(--dim); margin-top:.15rem; }
.ec-add{ margin-top:.45rem; width:100%; border:1px solid var(--line); background:transparent; color:inherit; cursor:pointer;
  border-radius:8px; font-family:var(--mono); font-size:.6rem; font-weight:700; padding:.4rem 0; transition:.3s; }
.ec-add:hover{ background:var(--acc); border-color:var(--acc); color:#0B0B0A; }
.ec-add:disabled{ opacity:.45; cursor:default; }

.ec-checkout{ display:flex; align-items:center; gap:.8rem; padding:.75rem .95rem; border-top:1px solid var(--line); }
.ec-total{ font-family:var(--mono); font-size:.7rem; color:var(--dim); }
.ec-total b{ color:var(--ink); font-size:.85rem; }
.ec-go{ margin-left:auto; border:0; cursor:pointer; font-family:var(--mono); font-size:.62rem; font-weight:700; color:#0B0B0A;
  background:linear-gradient(135deg,var(--acc),var(--acc2)); border-radius:9px; padding:.6rem 1rem; transition:.35s; opacity:.45; pointer-events:none; }
.ec-go.ready{ opacity:1; pointer-events:auto; animation:ecPulse 2s ease-in-out infinite; }
.ec-go:hover{ transform:translateY(-2px); }
@keyframes ecPulse{ 0%,100%{ box-shadow:0 0 0 0 rgba(255,107,26,.4); } 50%{ box-shadow:0 0 0 9px rgba(255,107,26,0); } }
/* toast confirmation */
.ec-toast{ position:absolute; left:50%; bottom:58px; transform:translate(-50%,14px); z-index:5;
  background:var(--ok); color:#fff; font-family:var(--mono); font-size:.66rem; font-weight:700;
  border-radius:99px; padding:.55rem 1rem; opacity:0; pointer-events:none; }
.ec-toast.on{ opacity:1; transform:translate(-50%,0); transition:.45s cubic-bezier(.34,1.56,.64,1); }
/* produit volant */
.ec-fly{ position:fixed; z-index:120; width:34px; height:34px; border-radius:50%; overflow:hidden; pointer-events:none;
  border:2px solid var(--acc); box-shadow:0 10px 24px -10px rgba(255,107,26,.8); }
.ec-fly img{ width:100%; height:100%; object-fit:cover; }
/* fil de ventes */
.ec-live{ position:absolute; left:.8rem; bottom:58px; z-index:4; display:flex; align-items:center; gap:.5rem;
  background:var(--bg2); border:1px solid var(--line); border-radius:99px; padding:.4rem .8rem;
  font-family:var(--mono); font-size:.6rem; color:var(--dim);
  transform:translateY(10px); opacity:0; transition:.5s cubic-bezier(.19,1,.22,1); box-shadow:0 16px 34px -22px rgba(0,0,0,.5); }
.ec-live.on{ transform:none; opacity:1; }
.ec-live:before{ content:""; width:7px; height:7px; border-radius:50%; background:var(--ok); flex:0 0 auto;
  box-shadow:0 0 0 0 rgba(59,224,126,.5); animation:ecLive 1.9s ease-out infinite; }
@keyframes ecLive{ 70%,100%{ box-shadow:0 0 0 7px rgba(59,224,126,0); } }

/* Marquee */
.ec-marquee{ overflow:hidden; padding:.6rem 0; border-top:1px solid var(--line); border-bottom:1px solid var(--line); margin-top:2rem; }
.ec-track{ display:flex; width:max-content; animation:ecMarq 26s linear infinite; }
.ec-track:hover{ animation-play-state:paused; }
.ec-track span{ font-family:var(--mono); font-weight:600; font-size:.74rem; letter-spacing:.18em; text-transform:uppercase; padding:0 1.1rem; color:var(--dim); white-space:nowrap; }
.ec-track .sep{ color:var(--acc); }
@keyframes ecMarq{ to{ transform:translateX(-50%); } }

/* ---------------- MANIFESTE ---------------- */
.ec-manifesto{ padding:clamp(3rem,7vw,5rem) 0; }
.ec-quote{ font-weight:800; letter-spacing:-.025em; line-height:1.14; font-size:clamp(1.35rem,2.8vw,2.1rem); max-width:30ch; margin-top:1rem; }
.ec-quote .dim{ color:var(--dim); }

/* ---------------- APPROCHE (4 cartes à listes) ---------------- */
.ec-app{ padding:0 0 clamp(3rem,7vw,5rem); }
.ec-app-head{ display:flex; justify-content:space-between; align-items:end; gap:1rem; flex-wrap:wrap; margin-bottom:1.4rem; }
.ec-app-head h2{ font-weight:900; letter-spacing:-.035em; line-height:1; font-size:clamp(1.5rem,3.2vw,2.4rem); max-width:20ch; }
.ec-agrid{ display:grid; grid-template-columns:repeat(2,1fr); gap:.9rem; }
.ec-acard{ border:1px solid var(--line); border-radius:14px; background:var(--bg2); padding:1.2rem; position:relative; overflow:hidden;
  transition:.4s cubic-bezier(.19,1,.22,1); }
.ec-acard:hover{ transform:translateY(-5px); border-color:rgba(255,107,26,.5); box-shadow:0 28px 55px -40px rgba(0,0,0,.5); }
.ec-acard:after{ content:""; position:absolute; left:1.2rem; top:0; width:34px; height:2px; background:var(--acc);
  transform:scaleX(0); transform-origin:0 50%; }
.ec-acard.in:after{ transform:scaleX(1); transition:transform .8s cubic-bezier(.19,1,.22,1) calc(var(--d,0s) + .35s); }
.ec-acard .no{ font-family:var(--mono); font-size:.62rem; letter-spacing:.2em; color:var(--acc); }
.ec-acard b{ display:block; margin-top:.45rem; font-size:1.02rem; letter-spacing:-.015em; line-height:1.2; }
.ec-acard ul{ margin:.65rem 0 0; padding:0; list-style:none; }
.ec-acard li{ font-size:.79rem; line-height:1.5; color:var(--dim); padding:.24rem 0 .24rem 1.1rem; position:relative; }
.ec-acard li:before{ content:"—"; position:absolute; left:0; color:var(--acc); }
.ec-acard li strong{ color:var(--ink); font-weight:700; }
@media(max-width:760px){ .ec-agrid{ grid-template-columns:1fr; } }

/* ---------------- TICKETS DE CAISSE (témoignages) ---------------- */
.ec-proof{ background:var(--ink); color:var(--bg); padding:clamp(3rem,7vw,5rem) 0; }
[data-theme="dark"] .ec-proof{ background:#050505; color:#F4F1EB; }
.ec-proof .ec-eyebrow{ color:var(--acc2); }
.ec-proof h2{ font-weight:900; letter-spacing:-.035em; line-height:1; font-size:clamp(1.5rem,3.2vw,2.3rem); margin-top:.6rem; }
.ec-pgrid{ display:grid; grid-template-columns:1fr 1fr; gap:1.2rem; margin-top:2rem; align-items:start; }
.ec-receipt{ background:#FBF8F2; color:#191713; font-family:var(--mono); font-size:.72rem; line-height:1.7;
  padding:1.2rem 1.2rem 1.6rem; border-radius:4px 4px 0 0; position:relative; transform:rotate(-.8deg);
  box-shadow:0 30px 55px -35px rgba(0,0,0,.8); transition:transform .5s cubic-bezier(.19,1,.22,1); }
.ec-receipt:nth-child(2){ transform:rotate(.9deg); }
.ec-receipt:hover{ transform:rotate(0) translateY(-4px); }
/* bord dentelé */
.ec-receipt:after{ content:""; position:absolute; left:0; right:0; bottom:-8px; height:8px;
  background:radial-gradient(circle at 7px -2px, transparent 6px, #FBF8F2 6.5px); background-size:14px 8px; }
.ec-receipt .hd{ text-align:center; border-bottom:1px dashed rgba(25,23,19,.35); padding-bottom:.6rem; margin-bottom:.6rem;
  font-weight:700; letter-spacing:.14em; }
.ec-receipt .row{ display:flex; justify-content:space-between; gap:1rem; }
.ec-receipt .msg{ margin:.6rem 0; font-style:italic; }
.ec-receipt .tot{ border-top:1px dashed rgba(25,23,19,.35); margin-top:.6rem; padding-top:.6rem;
  display:flex; justify-content:space-between; font-weight:700; }
.ec-receipt .tot b{ color:#B54708; }
.ec-receipt .stars{ text-align:center; letter-spacing:.2em; color:#B54708; margin-top:.4rem; }
.ec-stats{ display:flex; gap:2.4rem; flex-wrap:wrap; margin-top:2rem; }
.ec-stat b{ display:block; font-weight:900; letter-spacing:-.04em; font-size:clamp(1.6rem,3.4vw,2.4rem); }
.ec-stat span{ font-family:var(--mono); font-size:.6rem; text-transform:uppercase; letter-spacing:.12em; color:rgba(244,241,235,.55); }
@media(max-width:760px){ .ec-pgrid{ grid-template-columns:1fr; } }

/* ---------------- AVANTAGES + INVESTIR ---------------- */
.ec-adv{ padding:clamp(3rem,7vw,5rem) 0 0; }
.ec-advgrid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:1rem; margin-top:1.4rem; }
.ec-advgrid > div{ border:1px dashed rgba(255,107,26,.55); border-radius:12px; padding:1.05rem; background:rgba(255,138,61,.05); transition:.35s; }
.ec-advgrid > div:hover{ transform:translateY(-4px); }
.ec-advgrid b{ display:block; font-size:.9rem; }
.ec-advgrid span{ display:block; margin-top:.35rem; font-size:.78rem; line-height:1.5; color:var(--dim); }
.ec-why{ padding:clamp(2.6rem,6vw,4rem) 0; }
.ec-whyrows{ margin-top:1.2rem; }
.ec-whyrow{ display:grid; grid-template-columns:64px 1fr 38px; gap:1rem; align-items:center; padding:.9rem 0; border-bottom:1px solid var(--line); transition:.35s; }
.ec-whyrow:first-child{ border-top:1px solid var(--line); }
.ec-whyrow .n{ font-family:var(--mono); font-size:.66rem; color:var(--dim); }
.ec-whyrow h3{ font-weight:800; letter-spacing:-.015em; font-size:1rem; }
.ec-whyrow .go{ width:34px; height:34px; border-radius:50%; border:1.5px solid var(--line); display:grid; place-items:center; font-size:.75rem; transition:.4s; }
.ec-whyrow:hover{ padding-left:.7rem; }
.ec-whyrow:hover h3{ color:var(--acc); }
.ec-whyrow:hover .go{ background:var(--acc); border-color:var(--acc); color:#0B0B0A; transform:rotate(45deg); }

/* ---------------- CTA ---------------- */
.ec-final{ padding:0 0 clamp(3rem,8vw,6rem); text-align:center; }
.ec-final h2{ font-weight:900; letter-spacing:-.04em; line-height:.96; font-size:clamp(1.9rem,4.8vw,3.4rem); }
.ec-final p{ margin:1.1rem auto 1.8rem; color:var(--dim); max-width:50ch; line-height:1.6; }

@media(prefers-reduced-motion:reduce){
  #ec *{ animation:none !important; }
  #ec.is-ready [data-r]{ opacity:1 !important; transform:none !important; }
  .ec-hl{ background-size:100% 100% !important; }
  .ec-fly{ display:none !important; }
  .ec-acard:after{ transform:scaleX(1) !important; }
}