/* =========================================================
   SEO CENTRES D’APPELS MARRAKECH — design flexible premium + animations
   Charte SYO Web : orange / blanc / noir
   ========================================================= */
#scm{
  --paper:#FFFFFF; --soft:#FFF6EF; --card:#FFFFFF; --ink:#000000; --dim:#6E6E73;
  --line:rgba(0,0,0,.11);   --acc:#FF8A3D; --acc2:#F57323; --dark:#080808;
  position:relative; overflow:hidden; background:var(--paper); color:var(--ink);
  font-family:"Schibsted Grotesk",system-ui,-apple-system,Segoe UI,sans-serif;
}
#intro,#cur-dot,#cur-ring{display:none!important}
body.locked{overflow:auto!important;height:auto!important}
[data-theme="dark"] #scm{ --paper:#000; --soft:#0E0B08; --card:#141212; --ink:#fff; --dim:#A1A1A6; --line:rgba(255,255,255,.14); --dark:#050505; }
#scm *{ box-sizing:border-box; }
#scm a{ color:inherit; text-decoration:none; }
#scm .mono{ font-family:"JetBrains Mono",monospace; }
.scm-wrap{ width:min(1180px,calc(100% - 32px)); margin:0 auto; }
.scm-js [data-rv]{ opacity:0; transform:translateY(28px) scale(.985); filter:blur(8px); }
.scm-js [data-rv].in{ opacity:1; transform:none; filter:blur(0); transition:opacity .9s cubic-bezier(.16,1,.3,1),transform .9s cubic-bezier(.16,1,.3,1),filter .9s; transition-delay:var(--d,0s); }
.scm-pill{ display:inline-flex; align-items:center; gap:.45rem; min-height:34px; padding:.38rem .82rem; border:1px solid var(--line); border-radius:999px; font-size:.68rem; font-weight:700; color:var(--dim); background:rgba(255,255,255,.68); backdrop-filter:blur(14px); }
[data-theme="dark"] #scm .scm-pill{ background:rgba(255,255,255,.04); }
.scm-pill:before{ content:""; width:7px; height:7px; border-radius:50%; background:var(--acc); box-shadow:0 0 0 5px rgba(255,138,61,.12); }
.scm-btn{ display:inline-flex; align-items:center; justify-content:center; gap:.6rem; height:44px; padding:0 1.25rem; border-radius:999px; border:1px solid var(--line); font-size:.78rem; font-weight:800; transition:.35s cubic-bezier(.16,1,.3,1); }
.scm-btn.primary{ border-color:transparent; background:linear-gradient(135deg,var(--acc),var(--acc2)); color:#160B03; box-shadow:0 18px 36px -20px rgba(255,107,26,.8); }
.scm-btn:hover{ transform:translateY(-3px); }
.scm-btn .ar{ width:24px; height:24px; border-radius:50%; background:#000; color:#fff; display:grid; place-items:center; transition:.35s; }
.scm-btn:hover .ar{ transform:rotate(45deg); }
.scm-k{ color:var(--acc); font-family:"JetBrains Mono",monospace; font-size:.68rem; text-transform:uppercase; letter-spacing:.13em; font-weight:800; }

/* HERO similaire au screen */
.scm-hero{ padding:calc(var(--header-h,80px) + 22px) 0 2.6rem; }
.scm-hero-card{ position:relative; min-height:620px; border-radius:0 0 34px 34px; overflow:hidden; display:grid; align-items:end; isolation:isolate; background:#111; }
.scm-hero-card:after{ content:""; position:absolute; inset:0; z-index:1; background:linear-gradient(90deg,rgba(0,0,0,.58),rgba(0,0,0,.18) 50%,rgba(0,0,0,.05)); }
.scm-hero-img{ position:absolute; inset:0; z-index:0; }
.scm-hero-img img{ width:100%; height:100%; object-fit:cover; transform:scale(1.06); animation:scmKen 12s ease-in-out infinite alternate; }
@keyframes scmKen{ to{ transform:scale(1.13) translate3d(-1.5%,1%,0); } }
.scm-hero-content{ position:relative; z-index:2; padding:clamp(1.3rem,4vw,3.2rem); color:#fff; max-width:800px; }
.scm-hero-content h1{ font-size:clamp(2.35rem,5.2vw,5rem); line-height:.92; letter-spacing:-.055em; font-weight:850; max-width:13ch; overflow-wrap:normal; word-break:normal; hyphens:none; }
.scm-hero-content h1 span{ color:var(--acc); }
.scm-hero-content p{ margin-top:1rem; max-width:58ch; font-size:.88rem; line-height:1.65; color:rgba(255,255,255,.82); }
.scm-cta{ display:flex; gap:.7rem; flex-wrap:wrap; margin-top:1.35rem; }
.scm-floating{ position:absolute; right:clamp(1rem,4vw,3rem); bottom:clamp(1rem,4vw,3rem); z-index:3; display:grid; gap:.65rem; width:min(290px,42vw); }
.scm-float-card{ border:1px solid rgba(255,255,255,.25); background:rgba(255,255,255,.12); backdrop-filter:blur(16px); color:#fff; border-radius:20px; padding:.85rem; transform-style:preserve-3d; animation:scmFloat 5s ease-in-out infinite; }
.scm-float-card:nth-child(2){ animation-delay:-1.7s; }
.scm-float-card b{ display:block; font-size:.9rem; } .scm-float-card span{ display:block; margin-top:.2rem; font-size:.68rem; color:rgba(255,255,255,.75); }
@keyframes scmFloat{ 0%,100%{ transform:translateY(0) rotate(.2deg); } 50%{ transform:translateY(-10px) rotate(-.6deg); } }

/* Benefit top */
.scm-benefit{ padding:2rem 0; }
.scm-bgrid{ display:grid; grid-template-columns:1.1fr .9fr; gap:1rem; align-items:stretch; }
.scm-panel{ border:1px solid var(--line); border-radius:28px; background:var(--card); padding:1.35rem; position:relative; overflow:hidden; }
.scm-panel h2{ font-size:clamp(1.45rem,3.2vw,2.7rem); line-height:1; letter-spacing:-.045em; font-weight:780; max-width:12ch; }
.scm-panel p{ margin-top:.8rem; color:var(--dim); line-height:1.65; font-size:.84rem; max-width:62ch; }
.scm-mini-list{ margin-top:1rem; display:grid; gap:.55rem; }
.scm-mini-list li{ display:flex; justify-content:space-between; align-items:center; border:1px solid var(--line); border-radius:14px; padding:.7rem .85rem; color:var(--dim); font-size:.78rem; background:var(--paper); }
.scm-mini-list b{ color:var(--ink); }
.scm-img-card{ min-height:320px; border-radius:28px; overflow:hidden; position:relative; border:1px solid var(--line); background:var(--soft); }
.scm-img-card img{ width:100%; height:100%; object-fit:cover; transition:transform 1s cubic-bezier(.16,1,.3,1); }
.scm-img-card:hover img{ transform:scale(1.08); }
.scm-tag{ position:absolute; left:1rem; top:1rem; background:#fff; color:#000; border-radius:999px; padding:.45rem .8rem; font-size:.7rem; font-weight:800; box-shadow:0 15px 35px -22px #000; }

/* Program */
.scm-program{ padding:1rem 0 2.2rem; }
.scm-prog-grid{ display:grid; grid-template-columns:.55fr .9fr .85fr; gap:1rem; }
.scm-num{ border-top:1px solid var(--line); padding-top:1rem; }
.scm-num b{ font-size:clamp(2rem,5vw,4rem); font-weight:300; letter-spacing:-.05em; }
.scm-dark{ background:var(--dark); color:#fff; border-radius:28px; padding:1.35rem; min-height:300px; position:relative; overflow:hidden; }
.scm-dark:before{ content:""; position:absolute; inset:auto -25% -40% auto; width:70%; height:70%; background:radial-gradient(circle,var(--acc),transparent 65%); opacity:.35; filter:blur(20px); }
.scm-dark h3{ position:relative; font-size:clamp(1.15rem,2.3vw,1.8rem); line-height:1.05; letter-spacing:-.035em; max-width:11ch; }
.scm-dark p{ position:relative; margin-top:.8rem; color:rgba(255,255,255,.7); line-height:1.55; font-size:.8rem; }
.scm-orbit{ position:absolute; inset:auto 1.1rem 1.1rem auto; width:125px; height:125px; border-radius:50%; border:1px solid rgba(255,255,255,.16); animation:scmSpin 18s linear infinite; }
.scm-orbit:before,.scm-orbit:after{ content:""; position:absolute; width:10px; height:10px; border-radius:50%; background:var(--acc); top:8px; left:55px; box-shadow:0 0 22px var(--acc); }
.scm-orbit:after{ top:auto; bottom:12px; left:24px; background:#fff; box-shadow:none; }
@keyframes scmSpin{ to{ transform:rotate(360deg); } }

.scm-service{ padding:2.2rem 0; }
.scm-head{ display:flex; justify-content:space-between; gap:1rem; align-items:end; margin-bottom:1rem; }
.scm-head h2{ font-size:clamp(1.45rem,3.5vw,2.85rem); line-height:1; letter-spacing:-.045em; font-weight:780; }
.scm-cards{ display:grid; grid-template-columns:repeat(4,1fr); gap:.8rem; }
.scm-scard{ position:relative; min-height:250px; border:1px solid var(--line); border-radius:26px; overflow:hidden; padding:1rem; background:var(--card); transition:.5s cubic-bezier(.16,1,.3,1); }
.scm-scard:hover{ transform:translateY(-8px) rotate(-.6deg); box-shadow:0 32px 80px -55px #000; border-color:rgba(255,138,61,.55); }
.scm-scard.accent{ background:linear-gradient(135deg,var(--acc),var(--acc2)); color:#150900; }
.scm-scard.dark{ background:#050505; color:#fff; }
.scm-scard .circle{ width:36px; height:36px; border-radius:50%; background:rgba(255,138,61,.14); display:grid; place-items:center; font-weight:900; color:var(--acc); }
.scm-scard.accent .circle{ background:#fff; color:#000; } .scm-scard.dark .circle{ background:var(--acc); color:#000; }
.scm-scard h3{ margin-top:2.4rem; font-size:1.08rem; letter-spacing:-.02em; line-height:1.05; }
.scm-scard p{ margin-top:.65rem; font-size:.75rem; line-height:1.55; color:var(--dim); }
.scm-scard.dark p{ color:rgba(255,255,255,.68); } .scm-scard.accent p{ color:rgba(0,0,0,.7); }
.scm-wave{ position:absolute; right:-35px; bottom:-30px; width:140px; height:140px; opacity:.18; border-radius:45% 55% 35% 65%; border:1px solid currentColor; animation:scmBlob 7s ease-in-out infinite; }
@keyframes scmBlob{ 50%{ border-radius:60% 40% 55% 45%; transform:rotate(30deg) scale(1.12); } }

/* Flexible results */
.scm-results{ padding:1.2rem 0 2.6rem; }
.scm-res-grid{ display:grid; grid-template-columns:1fr 1.15fr; gap:1rem; align-items:center; }
.scm-photo{ border-radius:28px; min-height:360px; overflow:hidden; border:1px solid var(--line); background:var(--soft); }
.scm-photo img{ width:100%; height:100%; object-fit:cover; }
.scm-result h2{ font-size:clamp(1.6rem,4vw,3.4rem); line-height:.95; letter-spacing:-.05em; font-weight:760; max-width:11ch; }
.scm-result p{ margin-top:.9rem; color:var(--dim); font-size:.84rem; line-height:1.65; max-width:62ch; }
.scm-metrics{ display:grid; grid-template-columns:repeat(3,1fr); gap:.7rem; margin-top:1rem; }
.scm-metric{ border:1px solid var(--line); border-radius:20px; padding:1rem; background:var(--card); }
.scm-metric b{ display:block; font-size:1.6rem; font-weight:650; letter-spacing:-.04em; } .scm-metric span{ font-size:.68rem; color:var(--dim); }

.scm-timeline{ padding:2.2rem 0 3rem; border-top:1px solid var(--line); }
.scm-rows{ display:grid; gap:.5rem; }
.scm-row{ display:grid; grid-template-columns:110px 1fr 44px; align-items:center; gap:1rem; border-bottom:1px solid var(--line); padding:.8rem 0; transition:.35s; }
.scm-row:hover{ padding-left:.8rem; color:var(--acc); }
.scm-row .n{ font-size:.72rem; color:var(--dim); } .scm-row h3{ font-size:1.02rem; letter-spacing:-.015em; } .scm-row p{ font-size:.75rem; color:var(--dim); line-height:1.45; }
.scm-row .go{ width:38px; height:38px; border-radius:50%; background:var(--soft); display:grid; place-items:center; }

.scm-final{ padding:0 0 3.5rem; }
.scm-final-card{ border-radius:32px; background:#050505; color:#fff; padding:clamp(1.4rem,4vw,3rem); display:grid; grid-template-columns:1fr auto; gap:1rem; align-items:center; overflow:hidden; position:relative; }
.scm-final-card:before{ content:""; position:absolute; right:-10%; top:-50%; width:45%; height:180%; background:radial-gradient(circle,var(--acc),transparent 65%); opacity:.35; filter:blur(12px); }
.scm-final h2{ position:relative; font-size:clamp(1.6rem,4vw,3.3rem); line-height:.98; letter-spacing:-.045em; }
.scm-final p{ position:relative; margin-top:.6rem; color:rgba(255,255,255,.68); font-size:.84rem; }

@media(max-width:900px){
  .scm-hero-content{ max-width:100%; }
  .scm-hero-content h1{ max-width:15ch; font-size:clamp(2.25rem,8vw,4.6rem); }
  .scm-floating{ position:relative; right:auto; bottom:auto; width:auto; margin:1rem; }
  .scm-hero-card{ min-height:auto; align-items:start; }
  .scm-bgrid,.scm-prog-grid,.scm-res-grid,.scm-final-card{ grid-template-columns:1fr; }
  .scm-cards{ grid-template-columns:repeat(2,1fr); }
}
@media(max-width:560px){
  .scm-hero{ padding-top:calc(var(--header-h,72px) + 14px); }
  .scm-hero-content h1{ max-width:none; font-size:clamp(2.05rem,11vw,3.5rem); line-height:.96; }
  .scm-cards,.scm-metrics{ grid-template-columns:1fr; }
  .scm-row{ grid-template-columns:1fr 38px; }
  .scm-row .n{ grid-column:1/-1; }
}
@media(prefers-reduced-motion:reduce){
  #scm *{ animation:none !important; transition:none !important; }
  .scm-js [data-rv]{ opacity:1; transform:none; filter:none; }
}