#ssm{--blue:#2A1766;--v1:#4B2A8F;--v2:#6A4A9E;--yel:#4B2A8F;--yel-l:#D9CCFF;--night:#0F0D2B;--lav:#F1EDFF;--ink:#1B1840;--muted:#5A5680;--green:#1E9E5A;--red:#D64545;
  font-family:'Cairo',system-ui,sans-serif;color:var(--ink);background:#fff;direction:rtl;text-align:right;line-height:1.6;overflow-x:clip;-webkit-font-smoothing:antialiased}
#ssm *,#ssm *::before,#ssm *::after{box-sizing:border-box}
#ssm h1,#ssm h2,#ssm h3,#ssm p{margin:0}
#ssm a{color:inherit}
#ssm .en{font-family:'Poppins',sans-serif;direction:ltr;unicode-bidi:isolate}
#ssm .num{font-family:'Poppins',sans-serif}
#ssm .wrap{max-width:1080px;margin:0 auto;padding:0 20px}
#ssm section{position:relative}
#ssm .pad{padding:72px 0}
#ssm .kick{display:inline-flex;align-items:center;gap:6px;font-family:'Poppins',sans-serif;font-weight:700;font-size:13px;letter-spacing:.08em;text-transform:uppercase;color:var(--v1);background:#fff;border:1.5px solid #DCD2FF;padding:6px 14px;border-radius:999px;direction:ltr}
#ssm h2{font-size:clamp(28px,7vw,44px);font-weight:900;line-height:1.25;margin-top:14px;text-wrap:balance}
#ssm .lead{font-size:17px;color:var(--muted);margin-top:12px;max-width:560px;text-wrap:pretty}
#ssm .btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:56px;padding:0 28px;border-radius:999px;border:0;cursor:pointer;font-family:'Cairo',sans-serif;font-weight:800;font-size:18px;text-decoration:none;transition:transform .3s ease,box-shadow .3s ease}
#ssm .btn-y{background:var(--yel);color:#fff;box-shadow:5px 7px 0 rgba(15,13,43,.25)}
/* LiquidButton sur tous les boutons : survol 105 % / clic 98 % en 300 ms (survol seulement sur souris, pas d'état collant au doigt) */
@media (hover:hover){#ssm .btn:hover{transform:scale(1.05)}}
#ssm .btn:active{transform:scale(.98)}
/* Liquid glass (composant LiquidButton) : couleur de fond, police et taille des boutons inchangées */
#ssm .btn{position:relative;isolation:isolate;overflow:hidden}
#ssm .btn::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:-1;
  background:linear-gradient(180deg,rgba(255,255,255,.75) 0%,rgba(255,255,255,.28) 38%,rgba(255,255,255,0) 52%,rgba(255,255,255,0) 78%,rgba(255,255,255,.28) 100%);
  mix-blend-mode:soft-light}
#ssm .btn::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:-1;
  /* relief de verre du LiquidButton (variante claire sur fond coloré) */
  box-shadow:0 0 8px rgba(0,0,0,.03),0 2px 6px rgba(0,0,0,.08),inset 3px 3px .5px -3.5px rgba(255,255,255,.09),inset -3px -3px .5px -3.5px rgba(255,255,255,.85),inset 1px 1px 1px -.5px rgba(255,255,255,.6),inset -1px -1px 1px -.5px rgba(255,255,255,.6),inset 0 0 6px 6px rgba(255,255,255,.12),inset 0 0 2px 2px rgba(255,255,255,.06),0 0 12px rgba(0,0,0,.15)}
#ssm .btn .glint{position:absolute;top:-40%;bottom:-40%;width:38%;left:-60%;z-index:-1;pointer-events:none;
  background:linear-gradient(100deg,transparent 0%,rgba(255,255,255,.65) 50%,transparent 100%);transform:skewX(-18deg);animation:ssmGlint 3.8s ease-in-out infinite}
@keyframes ssmGlint{0%,62%{left:-60%}100%{left:130%}}
@media (prefers-reduced-motion:reduce){#ssm .btn .glint{display:none}}
/* ===== Liquid glass + trace d'encre (comme la vidéo) ===== */
#ssm .lq-zone{position:relative;isolation:isolate}
#ssm .lq-canvas{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:0;display:block}
#ssm .lq-zone>.wrap,#ssm .lq-zone>.btn{position:relative;z-index:1}
/* Effet liquide dans les boutons pleins (js/liquid-glass.js) : l'encre suit la souris / le doigt à l'intérieur du bouton,
   déformée par le filtre de verre ; on filtre l'encre seule (pas le fond) pour ne pas aspirer le blanc de la page par les coins */
#ssm .btn.lq-zone .lq-canvas{z-index:-2;filter:url(#ssmGlass);clip-path:inset(0 round 999px)} /* clip-path après le filtre : l'encre reste dans la pilule */
#ssm .btn.lq{background:transparent!important;box-shadow:none!important;border:0!important;overflow:visible}
#ssm .btn.lq .glint{display:none}
#ssm .btn.lq::before{background:none;mix-blend-mode:normal;z-index:-1;overflow:hidden;
  -webkit-backdrop-filter:blur(5px) saturate(1.5);backdrop-filter:blur(5px) saturate(1.5)}
#ssm.lq-svg .btn.lq::before{-webkit-backdrop-filter:url(#ssmGlass);backdrop-filter:url(#ssmGlass)}
#ssm .btn.lq::after{z-index:-1;box-shadow:0 0 6px rgba(0,0,0,.03),0 2px 6px rgba(0,0,0,.08),inset 3px 3px .5px -3px rgba(0,0,0,.9),inset -3px -3px .5px -3px rgba(0,0,0,.85),inset 1px 1px 1px -.5px rgba(0,0,0,.6),inset -1px -1px 1px -.5px rgba(0,0,0,.6),inset 0 0 6px 6px rgba(0,0,0,.12),inset 0 0 2px 2px rgba(0,0,0,.06),0 0 12px rgba(255,255,255,.15)}
#ssm .hero .btn.lq{color:#fff;text-shadow:0 1px 2px rgba(15,13,43,.35)}
/* boutons transparents sur fond blanc (comme le composant LiquidButton) : texte à la couleur du bouton d'origine */
#ssm .btn-y.lq{color:var(--yel)}
#ssm .btn-wa.lq{color:#13803F}
#ssm .hero .btn.lq::after{box-shadow:0 0 8px rgba(0,0,0,.05),0 2px 8px rgba(0,0,0,.12),inset 3px 3px .5px -3.5px rgba(255,255,255,.35),inset -3px -3px .5px -3.5px rgba(255,255,255,.85),inset 1px 1px 1px -.5px rgba(255,255,255,.6),inset -1px -1px 1px -.5px rgba(255,255,255,.6),inset 0 0 6px 6px rgba(255,255,255,.12),inset 0 0 2px 2px rgba(255,255,255,.08),0 0 12px rgba(0,0,0,.15)}
#ssm .final.lq-zone{height:220px;display:grid;place-items:center;border-radius:28px;overflow:hidden;background:#fff;border:1.5px solid #ECE7FF}
#ssm .final .btn.lq{color:var(--ink);min-width:240px}
/* ===== Section "gratte la dent" ===== */
#ssm .scr-sec{background:#fff;text-align:center}
#ssm .scr-box{position:relative;width:100%;max-width:760px;margin:26px auto 0;aspect-ratio:3/2;border-radius:28px;overflow:hidden;box-shadow:0 24px 60px rgba(75,42,143,.22);background:#eee;touch-action:none;user-select:none;-webkit-user-select:none;cursor:none}
#ssm .scr-box img,#ssm .scr-box canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
#ssm .scr-box img{object-fit:cover}
#ssm .scr-box .scr-top{transition:opacity .9s ease}
#ssm .scr-box.done .scr-top{opacity:0}
#ssm .scr-fluid{pointer-events:none}
#ssm .scr-cursor{position:absolute;left:0;top:0;width:54px;height:54px;margin:-27px 0 0 -27px;border-radius:50%;pointer-events:none;z-index:4;opacity:0;transition:opacity .2s;
  background:radial-gradient(circle at 35% 30%,rgba(255,255,255,.9),rgba(106,74,158,.6) 45%,rgba(75,42,143,.4) 70%,transparent 72%);box-shadow:0 0 18px rgba(75,42,143,.55)}
#ssm .scr-box.hover .scr-cursor{opacity:1}
#ssm .scr-hint{position:absolute;left:50%;bottom:16px;translate:-50% 0;z-index:5;display:inline-flex;align-items:center;gap:8px;background:rgba(15,13,43,.78);color:#fff;font-weight:800;font-size:15px;padding:9px 16px;border-radius:999px;pointer-events:none;transition:opacity .4s}
#ssm .scr-hint .hand{display:inline-block;animation:ssmHand 1.6s ease-in-out infinite}
@keyframes ssmHand{0%,100%{transform:translateX(-14px) rotate(-8deg)}50%{transform:translateX(14px) rotate(8deg)}}
#ssm .scr-box.touched .scr-hint{opacity:0}
#ssm .scr-meter{max-width:760px;margin:14px auto 0;display:flex;align-items:center;gap:12px;font-weight:800;color:var(--ink);direction:rtl}
#ssm .scr-bar{flex:1;height:12px;border-radius:99px;background:#EEE9FF;overflow:hidden}
#ssm .scr-bar i{display:block;height:100%;width:0;border-radius:inherit;background:linear-gradient(90deg,var(--v2),var(--v1));transition:width .2s}
#ssm .scr-done{margin-top:18px} /* le bouton violet reste toujours visible */
#ssm .scr-sec:not(.finished) :is(.scr-done>p,.scr-reset){display:none} /* message et « recommencer » : seulement une fois les dents grattées */
#ssm .scr-reset{background:none;border:0;color:var(--v1);font:700 15px 'Cairo',sans-serif;cursor:pointer;margin-top:10px;text-decoration:underline}
#ssm .scr-sec .disc{margin-top:12px}
@media (hover:none){#ssm .scr-cursor{display:none}#ssm .scr-box{cursor:auto}}
#ssm .bap{margin:34px auto 6px;max-width:1000px}
#ssm .bap-head{text-align:center;margin-bottom:16px}
#ssm .bap-head h3{font-size:24px;font-weight:900;margin-top:8px}
#ssm .bap-row{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;direction:ltr}
#ssm .bap-card{position:relative;margin:0;background:#fff;border-radius:24px;padding:8px 8px 14px;box-shadow:0 14px 34px rgba(75,42,143,.16);direction:rtl;text-align:center}
#ssm .bap-card.apply{outline:2.5px solid var(--v2);box-shadow:0 14px 34px rgba(75,42,143,.35)}
#ssm .bap-card img{display:block;width:100%;height:auto;aspect-ratio:367/426;object-fit:cover;border-radius:18px;image-rendering:auto}
#ssm .bap-tag{position:absolute;top:18px;left:18px;z-index:2;font:800 12px/1 'Poppins',sans-serif;letter-spacing:.08em;padding:7px 11px;border-radius:99px;background:rgba(255,255,255,.92);color:var(--night);direction:ltr}
#ssm .bap-card.apply .bap-tag{background:var(--v1);color:#fff}
#ssm .bap-card:last-child .bap-tag{background:var(--night);color:#fff}
#ssm .bap-card figcaption{margin-top:10px;line-height:1.3}
#ssm .bap-card b{display:block;font-size:17px;font-weight:900}
#ssm .bap-card figcaption span{font-size:14px;color:var(--muted)}
#ssm .bap .disc{margin-top:14px;text-align:center}
@media (max-width:760px){
  #ssm .bap-row{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:12px;padding:4px 20px 14px;margin:0 -20px;scrollbar-width:none;-webkit-overflow-scrolling:touch}
  #ssm .bap-row::-webkit-scrollbar{display:none}
  #ssm .bap-card{flex:0 0 76%;scroll-snap-align:center}
}
/* ===== Hero packaging ===== */
#ssm .pk{position:relative;width:100%;max-width:440px;margin:10px auto 34px;aspect-ratio:1/1.08}
#ssm .pk-glow{position:absolute;inset:4% 0 8% 6%;border-radius:50%;background:radial-gradient(closest-side,rgba(217,204,255,.8),rgba(106,74,158,.35) 60%,transparent 100%);filter:blur(20px)}
#ssm .pk-ring{position:absolute;inset:6% 2% 10% 8%;border-radius:50%;border:1.5px dashed rgba(255,255,255,.35);animation:ssmSpin 40s linear infinite}
@keyframes ssmSpin{to{transform:rotate(360deg)}}
#ssm .pk-box{position:absolute;right:6%;top:0;height:92%;width:auto;filter:drop-shadow(0 30px 34px rgba(15,13,43,.55));animation:ssmPkBox 7s ease-in-out infinite;z-index:2}
@keyframes ssmPkBox{0%,100%{transform:translateY(0) rotate(2deg)}50%{transform:translateY(-10px) rotate(1deg)}}
#ssm .pk-round{left:0;right:auto;top:0;z-index:4}
#ssm .pk-chip{position:absolute;z-index:5;display:inline-flex;align-items:center;gap:6px;background:rgba(255,255,255,.95);color:var(--yel);font-weight:800;font-size:13px;padding:8px 13px;border-radius:999px;box-shadow:0 10px 24px rgba(15,13,43,.3);white-space:nowrap}
#ssm .pk-chip .en,#ssm .pk-chip b{font-family:'Poppins',sans-serif}
#ssm .pk-chip-a{left:-4px;top:29%}
#ssm .pk-chip-b{right:10%;bottom:-2%;background:var(--yel);color:#fff}
@media (max-width:420px){#ssm .pk-chip{font-size:12px;padding:7px 11px}#ssm .pk-chip-a{left:0}}
@media (prefers-reduced-motion:reduce){#ssm .pk-box,#ssm .pk-ring{animation:none}}
/* ===== Boîte 3D interactive (js/packaging-3d.js) : remplace l'image .pk-box une fois ses textures chargées ===== */
#ssm .pk{perspective:900px} /* inclinaison du sachet qui suit la boîte */
#ssm .pk-box{transition:opacity .5s ease}
#ssm .pk.is-3d .pk-box{opacity:0} /* gardée pour l'accessibilité (alt) et comme secours ; fondu enchaîné avec la 3D */
#ssm .pk3d{position:absolute;right:6%;top:0;height:92%;aspect-ratio:516/911;z-index:2;container-type:size;perspective:260cqh;perspective-origin:50% 8%;opacity:0;transition:opacity .5s ease;
  filter:drop-shadow(0 30px 34px rgba(15,13,43,.55));pointer-events:none}
#ssm .pk.is-3d .pk3d{opacity:1}
/* tout le visuel se saisit ; pan-y : le doigt peut toujours faire défiler la page verticalement */
#ssm .pk.is-3d{touch-action:pan-y;cursor:grab;user-select:none;-webkit-user-select:none;-webkit-tap-highlight-color:transparent}
#ssm .pk.is-3d img{-webkit-user-drag:none}
#ssm .pk.grab{cursor:grabbing}
#ssm .pk3d-float{position:absolute;inset:0;transform-style:preserve-3d;animation:ssmPkFloat 7s ease-in-out infinite}
@keyframes ssmPkFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
#ssm .pk3d-box{--H:83cqh;--W:calc(var(--H)*.5723);--D:calc(var(--H)*.1452);position:absolute;left:50%;top:52%;width:var(--W);height:var(--H);
  margin:calc(var(--H)/-2) 0 0 calc(var(--W)/-2);transform-style:preserve-3d}
#ssm .pk3d-f{position:absolute;background-size:100% 100%;backface-visibility:hidden;-webkit-backface-visibility:hidden;overflow:hidden;isolation:isolate;outline:1px solid transparent}
#ssm .pk3d-f>i,#ssm .pk3d-f>b{position:absolute;inset:0;pointer-events:none}
/* ombre selon l'orientation de la face + dégradé « métallisé » (clair en haut à droite, profond en bas à gauche) */
#ssm .pk3d-f>i{background:linear-gradient(200deg,rgba(255,255,255,.08),rgba(15,13,43,0) 40%,rgba(10,4,48,.22)),linear-gradient(rgba(15,13,43,var(--sh,0)),rgba(15,13,43,var(--sh,0)))}
#ssm .pk3d-f>b{opacity:var(--gl,0);mix-blend-mode:screen; /* reflet net du vernis : glisse sur la face quand la boîte tourne */
  background:linear-gradient(104deg,transparent 41%,rgba(190,180,255,.10) 46%,rgba(255,255,255,.75) 49.6%,rgba(190,180,255,.10) 53%,transparent 58%) var(--gx,50%) 0/280% 100% no-repeat}
#ssm .pk3d-front{inset:0;transform:translateZ(calc(var(--D)/2))}
#ssm .pk3d-back{inset:0;transform:rotateY(180deg) translateZ(calc(var(--D)/2))}
#ssm .pk3d-left,#ssm .pk3d-right{top:0;left:calc((var(--W) - var(--D))/2);width:var(--D);height:var(--H)}
#ssm .pk3d-left{transform:rotateY(-90deg) translateZ(calc(var(--W)/2))}
#ssm .pk3d-right{transform:rotateY(90deg) translateZ(calc(var(--W)/2))}
#ssm .pk3d-top,#ssm .pk3d-bottom{left:0;top:calc((var(--H) - var(--D))/2);width:var(--W);height:var(--D)}
#ssm .pk3d-top{transform:rotateX(90deg) translateZ(calc(var(--H)/2))}
#ssm .pk3d-bottom{transform:rotateX(-90deg) translateZ(calc(var(--H)/2))}
@media (prefers-reduced-motion:reduce){#ssm .pk3d-float{animation:none}}
#ssm .logo img{display:block;height:22px;width:auto}
#ssm footer .logo img{height:26px;margin-left:auto}
#ssm .btn:focus-visible,#ssm input:focus-visible,#ssm select:focus-visible,#ssm summary:focus-visible,#ssm .ba-handle:focus-visible{outline:3px solid var(--v2);outline-offset:3px}
#ssm .disc{font-size:12.5px;line-height:1.5;color:var(--muted);margin-top:10px}
#ssm .disc .en{display:block;font-size:11.5px}
/* marquee */
#ssm .mq{background:var(--night);color:#fff;overflow:hidden;white-space:nowrap;font-weight:700;font-size:14px;padding:10px 0;direction:ltr}
#ssm .mq-track{display:inline-flex;animation:ssm-mq 26s linear infinite}
#ssm .mq-track > span{padding:0 28px;direction:rtl}
@keyframes ssm-mq{from{transform:translateX(0)}to{transform:translateX(-50%)}}
/* hero */
#ssm .hero{background:linear-gradient(165deg,var(--v2) 0%,var(--v1) 38%,var(--blue) 100%);color:#fff;border-radius:0 0 36px 36px;padding:18px 0 64px;overflow:hidden}
/* Fond « liquid metal » (js/liquid-metal.js) : sans WebGL, le dégradé ci-dessus reste visible */
/* fusion « overlay » à 55 % : les reflets blancs du métal restent lisibles sous le texte blanc */
#ssm .hero-lm{position:absolute;inset:0;z-index:0;pointer-events:none;mix-blend-mode:overlay;opacity:0;transition:opacity .8s ease}
#ssm .hero.lm-on .hero-lm{opacity:.55}
#ssm .hero>.wrap{position:relative;z-index:1}
#ssm .top{display:flex;align-items:center;justify-content:space-between;gap:12px}
#ssm .logo{font-family:'Poppins',sans-serif;font-weight:800;font-size:22px;letter-spacing:.02em;direction:ltr}
#ssm .soon{background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.35);border-radius:999px;padding:4px 14px;font-weight:700;font-size:14px;white-space:nowrap;display:inline-flex;align-items:center;gap:6px}
#ssm .hero-grid{display:grid;gap:40px;margin-top:34px;align-items:center}
#ssm .pill-new{display:inline-flex;gap:8px;align-items:center;background:#fff;color:var(--blue);border-radius:999px;padding:6px 14px 6px 6px;font-family:'Poppins',sans-serif;font-size:13px;font-weight:600;direction:ltr}
#ssm .pill-new b{background:var(--yel);color:#fff;border-radius:999px;padding:2px 10px;font-weight:800}
#ssm h1{font-size:clamp(34px,9vw,58px);font-weight:900;line-height:1.2;margin-top:18px;text-wrap:balance}
#ssm h1 em{font-style:normal;color:var(--yel-l)}
#ssm .tagline{font-family:'Poppins',sans-serif;font-weight:700;font-size:clamp(17px,4.6vw,22px);margin-top:10px;opacity:.95;direction:ltr;text-align:right}
#ssm .hero .sub{font-size:17px;margin-top:14px;opacity:.92;max-width:520px;text-wrap:pretty}
#ssm .chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:20px}
#ssm .chip{background:#fff;color:var(--blue);font-weight:700;font-size:14px;border-radius:999px;padding:6px 14px;box-shadow:3px 4px 0 rgba(15,13,43,.18)}
#ssm .cta-row{display:flex;flex-wrap:wrap;align-items:center;gap:12px 16px;margin-top:26px}
#ssm .cta-note{font-size:14px;font-weight:700;opacity:.9}
#ssm .hero-visual{position:relative;max-width:380px;width:100%;margin:10px auto 0}
#ssm .photo-card{position:relative;background:#fff;padding:10px;border-radius:28px;transform:rotate(-3deg);box-shadow:10px 16px 34px rgba(15,13,43,.35)}
#ssm .half{position:relative;overflow:hidden;border-radius:20px;aspect-ratio:1/1;background:var(--lav);direction:ltr}
#ssm .half img{position:absolute;top:0;height:100%;width:200%;max-width:none;object-fit:cover;display:block}
#ssm .half.l img{left:0}
#ssm .half.r img{right:0}
#ssm .noimg img{display:none}
#ssm .noimg::after{content:"PHOTO BEFORE / AFTER";position:absolute;inset:0;display:grid;place-items:center;font-family:'Poppins',sans-serif;font-size:12px;font-weight:600;color:var(--v1);background:repeating-linear-gradient(135deg,#F1EDFF 0 12px,#E7E0FF 12px 24px)}
#ssm .tag-ba{position:absolute;top:14px;font-family:'Poppins',sans-serif;font-weight:800;font-size:13px;letter-spacing:.06em;padding:5px 12px;border-radius:999px;z-index:3;direction:ltr}
#ssm .tag-after{background:var(--yel);color:#fff}
#ssm .tag-before{background:rgba(15,13,43,.78);color:#fff}
#ssm .photo-card .tag-after{right:22px;top:22px}
#ssm .round{position:absolute;left:-14px;top:-18px;width:96px;height:96px;border-radius:50%;background:var(--yel);color:#fff;border:3px solid #fff;display:grid;place-items:center;text-align:center;font-weight:900;font-size:15px;line-height:1.15;transform:rotate(8deg);box-shadow:4px 6px 0 rgba(15,13,43,.25);z-index:4}
#ssm .round .num{display:block;font-size:26px;font-weight:800}
#ssm .strip{position:absolute;width:118%;left:-9%;bottom:-40px;z-index:5;pointer-events:none;animation:ssm-float 5s ease-in-out infinite;filter:drop-shadow(4px 8px 10px rgba(15,13,43,.3))}
@keyframes ssm-float{0%,100%{transform:translateY(0) rotate(-4deg)}50%{transform:translateY(-8px) rotate(-1deg)}}
#ssm .hero .disc{color:#fff;opacity:.85;margin-top:58px;text-align:center}
/* problems */
/* prolonge le violet du hero ; le hero passe devant pour que la jonction suive ses coins arrondis */
#ssm .hero{z-index:1}
#ssm .dark{background:linear-gradient(180deg,var(--blue) 0%,var(--v1) 60%,var(--v2) 100%);color:#fff}
#ssm .dark .lead{color:#C9C5E8}
#ssm .grid4{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:30px}
#ssm .pcard{background:#1B1840;border:1px solid #2C2862;border-radius:22px;padding:18px 16px}
/* effet « CardSpotlight » (js/card-spotlight.js) : halo qui suit la souris / le doigt + points qui apparaissent */
#ssm .pcard{position:relative;isolation:isolate;overflow:hidden}
#ssm .pcard>:not(.pc-spot){position:relative;z-index:1}
#ssm .pc-spot{position:absolute;inset:-1px;z-index:0;pointer-events:none;opacity:0;transition:opacity .3s;background:rgba(255,255,255,.07);
  -webkit-mask-image:radial-gradient(350px circle at var(--mx,50%) var(--my,50%),#fff,transparent 80%);mask-image:radial-gradient(350px circle at var(--mx,50%) var(--my,50%),#fff,transparent 80%)}
#ssm .pc-spot canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
#ssm .pc-spot::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,var(--night),transparent 84%)}
#ssm .pcard.spot .pc-spot{opacity:1}
#ssm .pcard .ico{font-size:28px;line-height:1}
#ssm .pcard h3{font-size:17px;font-weight:800;margin-top:10px;line-height:1.35}
#ssm .pcard p{font-size:14px;color:#C9C5E8;margin-top:4px;line-height:1.5}
/* before/after */
#ssm .ba-track{position:relative;height:190vh;margin-top:28px}
#ssm .ba-sticky{position:sticky;top:max(70px,calc(50vh - 240px))}
#ssm .ba{position:relative;max-width:460px;margin:0 auto;border-radius:28px;overflow:hidden;border:8px solid #fff;box-shadow:10px 16px 36px rgba(75,42,143,.25);touch-action:pan-y;user-select:none;-webkit-user-select:none;direction:ltr;aspect-ratio:1/1;background:var(--lav)}
#ssm .ba .half{position:absolute;inset:0;border-radius:0;aspect-ratio:auto}
#ssm .ba .half.r{clip-path:inset(0 0 0 var(--p,50%))}
#ssm .ba .tag-before{left:14px}
#ssm .ba .tag-after{right:14px}
#ssm .ba-line{position:absolute;top:0;bottom:0;left:var(--p,50%);width:3px;margin-left:-1.5px;background:#fff;z-index:4}
#ssm .ba-handle{position:absolute;top:50%;left:var(--p,50%);width:52px;height:52px;margin:-26px 0 0 -26px;border-radius:50%;background:var(--yel);border:3px solid #fff;z-index:5;display:grid;place-items:center;cursor:ew-resize;box-shadow:3px 5px 12px rgba(15,13,43,.3);font-family:'Poppins',sans-serif;font-weight:800;color:var(--night);font-size:18px}
#ssm .ba-wrap .disc{text-align:center;max-width:460px;margin:12px auto 0}
#ssm .checks{display:grid;gap:10px;margin:26px auto 0;max-width:460px;padding:0;list-style:none}
#ssm .checks li{display:flex;align-items:center;gap:12px;background:var(--lav);border-radius:18px;padding:12px 16px;font-weight:700;font-size:16px}
#ssm .ck{flex:none;font-family:'Poppins',sans-serif;font-weight:800;color:#fff;background:var(--green);border-radius:999px;padding:1px 9px;font-size:13px;letter-spacing:-2px}
/* how */
#ssm .lav{background:var(--lav)}
#ssm .eq{display:flex;align-items:center;justify-content:center;gap:12px;margin-top:30px;direction:ltr}
#ssm .dot{width:72px;height:72px;border-radius:50%;box-shadow:4px 6px 0 rgba(75,42,143,.18)}
#ssm .op{font-family:'Poppins',sans-serif;font-weight:800;font-size:28px;color:var(--blue)}
#ssm .eq-cap{text-align:center;font-weight:800;margin-top:12px;color:var(--blue);font-size:17px}
#ssm .grid3{display:grid;gap:12px;margin-top:30px}
#ssm .wcard{background:#fff;border-radius:22px;padding:20px;box-shadow:6px 10px 24px rgba(75,42,143,.1)}
#ssm .wcard .ico{font-size:28px;line-height:1}
#ssm .wcard h3{font-size:18px;font-weight:800;margin-top:10px;color:var(--blue)}
#ssm .wcard p{font-size:15px;color:var(--muted);margin-top:4px}
/* compare */
#ssm .hl{background:linear-gradient(transparent 55%,rgba(75,42,143,.2) 55%,rgba(75,42,143,.2) 92%,transparent 92%);padding:0 4px}
#ssm .cmp{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:30px}
#ssm .col{border-radius:24px;padding:18px 14px;border:2.5px dashed}
#ssm .col.g{border-color:var(--green);background:#EFFAF3}
#ssm .col.r{border-color:var(--red);background:#FDF1F1}
#ssm .col h3{font-size:18px;font-weight:900;text-align:center;margin-bottom:12px}
#ssm .col.g h3{color:var(--green)}#ssm .col.r h3{color:var(--red)}
#ssm .col ul{list-style:none;margin:0;padding:0;display:grid;gap:10px}
#ssm .col li{display:flex;gap:8px;align-items:flex-start;font-size:14.5px;font-weight:700;line-height:1.45}
#ssm .col li i{flex:none;font-style:normal;width:22px;height:22px;border-radius:50%;display:grid;place-items:center;color:#fff;font-size:12px;margin-top:1px}
#ssm .col.g li i{background:var(--green)}#ssm .col.r li i{background:var(--red)}
/* steps */
#ssm .steps{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:30px;counter-reset:s}
#ssm .step{background:#fff;border-radius:22px;padding:18px 16px;box-shadow:6px 10px 24px rgba(75,42,143,.1)}
#ssm .step .n{width:40px;height:40px;border-radius:50%;background:var(--blue);color:#fff;display:grid;place-items:center;font-family:'Poppins',sans-serif;font-weight:800;font-size:17px}
#ssm .step p{font-weight:700;margin-top:10px;font-size:15.5px;line-height:1.45}
#ssm .badges{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin-top:34px}
#ssm .badge{aspect-ratio:1/1;border-radius:50%;border:1.5px solid var(--blue);display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:8px;background:#fff}
#ssm .badge b{font-size:11.5px;line-height:1.25;color:var(--blue)}
#ssm .badge .en{font-size:8.5px;font-weight:700;letter-spacing:.04em;color:var(--v1);margin-top:4px;line-height:1.2}
/* join */
#ssm .join{background:linear-gradient(165deg,var(--v2) 0%,var(--v1) 40%,var(--blue) 100%);color:#fff;border-radius:36px;margin:0 10px}
#ssm .join .kick{background:rgba(255,255,255,.15);border-color:rgba(255,255,255,.4);color:#fff}
#ssm .join .lead{color:#fff;opacity:.92}
#ssm .join-grid{display:grid;gap:30px;align-items:start}
#ssm .join-grid{grid-template-columns:minmax(0,1fr)}
#ssm .join-grid>*,#ssm .fld,#ssm .phone{min-width:0}
#ssm .phone input{min-width:0;flex:1}
#ssm .perks{list-style:none;padding:0;margin:20px 0 0;display:grid;gap:10px}
#ssm .perks li{display:flex;gap:10px;align-items:center;font-weight:700;font-size:16px}
#ssm .perks .ck{background:#fff;color:var(--yel)}
#ssm .batch{margin-top:20px;background:rgba(15,13,43,.35);border:1.5px dashed rgba(255,255,255,.55);border-radius:20px;padding:14px 16px;font-weight:700}
#ssm .batch b{color:var(--yel-l)}
#ssm .fcard{background:#fff;color:var(--ink);border-radius:28px;padding:24px 20px;box-shadow:10px 16px 36px rgba(15,13,43,.3)}
#ssm .fcard h3{font-size:22px;font-weight:900;color:var(--blue)}
#ssm .fcard .fsub{color:var(--muted);font-size:14.5px;margin-top:2px}
#ssm .fld{margin-top:16px}
#ssm .fld label{display:block;font-weight:800;font-size:15px;margin-bottom:6px}
#ssm .fin{width:100%;min-height:52px;border:2px solid #DCD6F5;border-radius:16px;padding:0 14px;font-family:'Cairo',sans-serif;font-size:16px;color:var(--ink);background:#fff;transition:border-color .15s}
#ssm .fin:focus{border-color:var(--v1);outline:none}
#ssm select.fin{appearance:none;-webkit-appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--v1) 50%),linear-gradient(135deg,var(--v1) 50%,transparent 50%);background-position:18px 50%,24px 50%;background-size:6px 6px;background-repeat:no-repeat;padding-left:40px}
#ssm .phone{display:flex;direction:ltr;border:2px solid #DCD6F5;border-radius:16px;overflow:hidden;transition:border-color .15s}
#ssm .phone:focus-within{border-color:var(--v1)}
#ssm .phone span{display:grid;place-items:center;padding:0 14px;background:var(--lav);font-family:'Poppins',sans-serif;font-weight:700;color:var(--blue);font-size:16px}
#ssm .phone input{flex:1;min-width:0;border:0;min-height:48px;padding:0 12px;font-family:'Poppins',sans-serif;font-size:16px;text-align:left;direction:ltr;color:var(--ink)}
#ssm .phone input:focus{outline:none}
#ssm .err{display:none;color:var(--red);font-size:13.5px;font-weight:700;margin-top:5px}
#ssm .bad .err{display:block}
#ssm .bad .fin,#ssm .bad .phone{border-color:var(--red)}
#ssm .consent{display:flex;gap:10px;align-items:flex-start;font-size:14px;font-weight:600;color:var(--muted);cursor:pointer;line-height:1.5}
#ssm .consent input{flex:none;width:22px;height:22px;margin:2px 0 0;accent-color:var(--v1)}
#ssm .fcard .btn{width:100%;margin-top:20px}
#ssm .safe{text-align:center;font-size:13px;color:var(--muted);margin-top:10px}
#ssm .ok{text-align:center;padding:10px 0}
#ssm .ok .big{font-size:24px;font-weight:900;color:var(--blue);line-height:1.35}
#ssm .ok p{margin-top:10px;color:var(--muted);font-size:16px}
#ssm .btn-wa{background:#1FA855;color:#fff;box-shadow:5px 7px 0 rgba(15,13,43,.2);width:100%;margin-top:20px}
#ssm .btn-wa:hover{background:#1A974B}
/* faq */
#ssm .faq{display:grid;gap:10px;margin-top:28px;max-width:720px}
#ssm details{background:var(--lav);border-radius:20px;overflow:hidden}
#ssm summary{list-style:none;cursor:pointer;min-height:56px;padding:14px 18px;display:flex;justify-content:space-between;align-items:center;gap:12px;font-weight:800;font-size:16.5px}
#ssm summary::-webkit-details-marker{display:none}
#ssm summary::after{content:"+";flex:none;width:30px;height:30px;border-radius:50%;background:#fff;color:var(--v1);display:grid;place-items:center;font-family:'Poppins',sans-serif;font-weight:700;font-size:20px;transition:transform .2s}
#ssm details[open] summary::after{transform:rotate(45deg)}
#ssm details p{padding:0 18px 16px;color:var(--muted);font-size:15.5px}
#ssm .final{margin-top:30px}
/* footer */
#ssm footer{background:var(--night);color:#fff;padding:44px 0 36px;margin-top:0;border-radius:36px 36px 0 0}
#ssm footer .logo{font-size:26px}
#ssm footer a{color:var(--yel-l);font-family:'Poppins',sans-serif;font-weight:600;text-decoration:none;direction:ltr;display:inline-block;margin-top:10px}
#ssm footer a:hover{text-decoration:underline}
#ssm footer .disc{color:#B7B3D9;margin-top:18px;max-width:560px}
/* reveal */
#ssm .rv{opacity:0;transform:translateY(22px);transition:opacity .6s ease,transform .6s ease}
#ssm .rv.in{opacity:1;transform:none}
@media (min-width:860px){
  #ssm .hero-grid{grid-template-columns:1.1fr .9fr}
  #ssm .grid4{grid-template-columns:repeat(4,minmax(0,1fr))}
  #ssm .grid3{grid-template-columns:repeat(3,minmax(0,1fr))}
  #ssm .steps{grid-template-columns:repeat(4,minmax(0,1fr))}
  #ssm .badges{max-width:620px;gap:18px}
  #ssm .badge b{font-size:14px}#ssm .badge .en{font-size:10px}
  #ssm .join-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  #ssm .join{margin:0 auto;max-width:1120px}
  #ssm .col{padding:24px}#ssm .col li{font-size:16px}
  #ssm .pad{padding:96px 0}
}
/* LOOK — ambiance */
#ssm[data-mood="deep"] .hero,#ssm[data-mood="deep"] .join{background:linear-gradient(165deg,#2E3192 0%,#1C1B63 55%,#0F0D2B 100%)}
#ssm[data-mood="deep"] .lav{background:#E8E2FF}
#ssm[data-mood="soft"] .hero{background:linear-gradient(170deg,#F1EDFF 0%,#E2D9FF 100%);color:var(--ink)}
#ssm[data-mood="soft"] .hero .logo,#ssm[data-mood="soft"] .hero .tagline,#ssm[data-mood="soft"] .cta-note{color:var(--blue)}
#ssm[data-mood="soft"] .hero h1 em{color:var(--ink);background:linear-gradient(transparent 58%,var(--yel) 58%,var(--yel) 94%,transparent 94%)}
#ssm[data-mood="soft"] .soon{background:#fff;border-color:#DCD2FF;color:var(--blue)}
#ssm[data-mood="soft"] .pill-new{background:var(--blue);color:#fff}
#ssm[data-mood="soft"] .hero .disc{color:var(--muted);opacity:1}
/* LOOK — cartes */
#ssm[data-shape="sticker"] :is(.wcard,.step,.fcard,details,.checks li){border:2px solid var(--night);box-shadow:5px 6px 0 var(--night)}
#ssm[data-shape="sticker"] .pcard{border:2px solid var(--yel);box-shadow:5px 6px 0 var(--yel)}
#ssm[data-shape="sticker"] .col{box-shadow:5px 6px 0 var(--night)}
#ssm[data-shape="sticker"] :is(.btn-y,.btn-wa){border:2px solid var(--night);box-shadow:4px 5px 0 var(--night)}
#ssm[data-shape="sticker"] :is(.chip,.badge){border:2px solid var(--night)}
#ssm[data-shape="sticker"] .photo-card{box-shadow:8px 10px 0 var(--night)}
#ssm[data-shape="sticker"] .ba{border-color:var(--night);box-shadow:8px 10px 0 var(--night)}
#ssm[data-shape="sharp"] :is(.pcard,.wcard,.step,.fcard,.col,details,.checks li,.photo-card,.ba,.batch){border-radius:12px}
#ssm[data-shape="sharp"] .half{border-radius:6px}
#ssm[data-shape="sharp"] :is(.btn,.chip,.kick,.pill-new,.soon,.fin,.phone){border-radius:10px}
#ssm[data-shape="sharp"] .hero{border-radius:0 0 16px 16px}
#ssm[data-shape="sharp"] :is(.join,.lav,footer){border-radius:16px!important}
#ssm[data-shape="sharp"] .round{border-radius:14px}
/* LOOK — accent / CTA / ombres / densité / typo */
#ssm[data-accent="indigo"]{--v1:#4B3FD6;--v2:#6C63FF}
#ssm[data-accent="orchid"]{--v1:#8E3FD6;--v2:#B45CF6}
#ssm[data-cta="white"] .btn-y{background:#fff;color:var(--blue)}
#ssm[data-cta="white"] .btn-y::after{box-shadow:0 0 6px rgba(0,0,0,.03),0 2px 6px rgba(0,0,0,.08),inset 3px 3px .5px -3px rgba(0,0,0,.9),inset -3px -3px .5px -3px rgba(0,0,0,.85),inset 1px 1px 1px -.5px rgba(0,0,0,.6),inset -1px -1px 1px -.5px rgba(0,0,0,.6),inset 0 0 6px 6px rgba(0,0,0,.12),inset 0 0 2px 2px rgba(0,0,0,.06),0 0 12px rgba(255,255,255,.15)} /* bouton blanc : variante sombre du relief */
#ssm[data-cta="violet"] .btn-y{background:var(--v1);color:#fff;border:2px solid #fff}
#ssm[data-shadow="offset"] :is(.wcard,.step,.fcard,.photo-card,.ba){box-shadow:8px 10px 0 rgba(75,42,143,.2)}
#ssm[data-shadow="none"] :is(.pcard,.wcard,.step,.fcard,.photo-card,.ba,.chip,.btn,.round,.dot,.col,details,.checks li){box-shadow:none!important}
#ssm[data-shadow="none"] .strip{filter:none}
#ssm[data-density="compact"] .pad{padding:48px 0}
#ssm[data-density="airy"] .pad{padding:110px 0}
#ssm[data-tsize="s"] h1{font-size:clamp(28px,7.5vw,46px)}#ssm[data-tsize="s"] h2{font-size:clamp(24px,6vw,36px)}
#ssm[data-tsize="l"] h1{font-size:clamp(40px,10.5vw,68px)}#ssm[data-tsize="l"] h2{font-size:clamp(32px,8.5vw,54px)}
#ssm[data-tweight="bold"] :is(h1,h2){font-weight:700}
#ssm[data-tweight="bold"] :is(.pcard h3,.wcard h3,.col h3,.fcard h3){font-weight:700}
/* LOOK — hero */
#ssm[data-halign="center"] .hero-copy{text-align:center}
#ssm[data-halign="center"] .hero-copy :is(.chips,.cta-row){justify-content:center}
#ssm[data-halign="center"] .hero-copy .sub{margin-inline:auto}
#ssm[data-halign="center"] .hero-copy .tagline{text-align:center}
#ssm[data-tilt="flat"] .photo-card{transform:none}
#ssm[data-tilt="strong"] .photo-card{transform:rotate(-6deg)}
#ssm[data-strip="off"] .strip{display:none}
#ssm[data-strip="off"] .hero .disc{margin-top:24px}
#ssm[data-roundbadge="off"] .round{display:none}
#ssm[data-chips="off"] .hero .chips{display:none}
#ssm[data-ctanote="off"] .cta-note{display:none}
/* LOOK — sections */
#ssm[data-s-problems="off"] [data-sec="problems"],#ssm[data-s-ba="off"] [data-sec="ba"],#ssm[data-s-how="off"] [data-sec="how"],#ssm[data-s-compare="off"] [data-sec="compare"],#ssm[data-s-steps="off"] [data-sec="steps"],#ssm[data-s-faq="off"] [data-sec="faq"],#ssm[data-s-badges="off"] .badges,#ssm[data-batch="off"] .batch,#ssm[data-marquee="off"] .mq{display:none}
#ssm[data-plist="list"] .grid4{grid-template-columns:minmax(0,1fr)!important;max-width:560px}
#ssm[data-plist="list"] .pcard{display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:14px;align-items:center}
#ssm[data-plist="list"] .pcard .ico{grid-row:span 2}
#ssm[data-plist="list"] .pcard h3{margin-top:0}
#ssm[data-slist="list"] .steps{grid-template-columns:minmax(0,1fr)!important;max-width:560px}
#ssm[data-slist="list"] .step{display:flex;gap:14px;align-items:center}
#ssm[data-slist="list"] .step .n{flex:none}
#ssm[data-slist="list"] .step p{margin-top:0}
/* LOOK — animations */
#ssm[data-marquee="slow"] .mq-track{animation-duration:46s}
#ssm[data-marquee="fast"] .mq-track{animation-duration:14s}
#ssm[data-reveal="fade"] .rv{transform:none}
#ssm[data-reveal="none"] .rv{opacity:1;transform:none;transition:none}
#ssm[data-float="off"] .strip{animation:none;transform:rotate(-3deg)}
#ssm[data-ba="drag"] .ba-track{height:auto}
#ssm[data-ba="drag"] .ba-sticky{position:static}
/* LOOK — CTA collant */
#ssm .s-sticky{display:none;position:fixed;left:0;right:0;bottom:14px;margin:0 auto;width:calc(100% - 32px);max-width:380px;z-index:50}
#ssm[data-sticky="on"] .s-sticky.show{display:flex}
/* LOOK — hero mobile */
@media (max-width:859px){#ssm[data-hero="photo"] .hero-grid>div:last-child{order:-1;margin-top:14px}}
@media (max-width:370px){#ssm .badges{grid-template-columns:repeat(2,minmax(0,1fr));max-width:280px;margin-inline:auto}}
@media (prefers-reduced-motion:reduce){
  #ssm .mq{white-space:normal;text-align:center}
  #ssm .mq-track{animation:none;display:block}
  #ssm .mq-track > span.dup{display:none}
  #ssm .strip{animation:none;transform:rotate(-3deg)}
  #ssm .rv{opacity:1;transform:none;transition:none}
  #ssm .ba-track{height:auto}
  #ssm .ba-sticky{position:static}
  #ssm .btn{transition:none}
}

/* ===== Polices auto-hébergées (Cairo variable arabe + latin, Poppins latin) ===== */
@font-face{font-family:'Cairo';font-style:normal;font-weight:200 1000;font-display:swap;src:url(../fonts/cairo-arabic.woff2) format('woff2');unicode-range:U+0600-06FF, U+0750-077F, U+0870-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC, U+102E0-102FB, U+10E60-10E7E, U+10EC2-10EC7, U+10EC9-10EEE, U+10EF0-10EFF, U+1EE00-1EE03, U+1EE05-1EE1F, U+1EE21-1EE22, U+1EE24, U+1EE27, U+1EE29-1EE32, U+1EE34-1EE37, U+1EE39, U+1EE3B, U+1EE42, U+1EE47, U+1EE49, U+1EE4B, U+1EE4D-1EE4F, U+1EE51-1EE52, U+1EE54, U+1EE57, U+1EE59, U+1EE5B, U+1EE5D, U+1EE5F, U+1EE61-1EE62, U+1EE64, U+1EE67-1EE6A, U+1EE6C-1EE72, U+1EE74-1EE77, U+1EE79-1EE7C, U+1EE7E, U+1EE80-1EE89, U+1EE8B-1EE9B, U+1EEA1-1EEA3, U+1EEA5-1EEA9, U+1EEAB-1EEBB, U+1EEF0-1EEF1}
@font-face{font-family:'Cairo';font-style:normal;font-weight:200 1000;font-display:swap;src:url(../fonts/cairo-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Poppins';font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/poppins-400.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Poppins';font-style:normal;font-weight:500;font-display:swap;src:url(../fonts/poppins-500.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Poppins';font-style:normal;font-weight:600;font-display:swap;src:url(../fonts/poppins-600.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Poppins';font-style:normal;font-weight:700;font-display:swap;src:url(../fonts/poppins-700.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Poppins';font-style:normal;font-weight:800;font-display:swap;src:url(../fonts/poppins-800.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}

/* ===== Ajouts brief : formulaire hero, Pass numéroté, paliers, barre fixe ===== */
#ssm [hidden]{display:none!important}
#ssm .hp{position:absolute;width:1px;height:1px;opacity:0;overflow:hidden;clip-path:inset(50%);pointer-events:none}
#ssm .hero-join{margin-top:18px;max-width:560px}
#ssm .hero .fld{margin-top:10px}
#ssm .hero .fld label{color:#fff}
#ssm .fld label .phone,#ssm .fld label .fin{margin-top:6px}
#ssm .fld label .phone{display:flex;background:#fff}
#ssm .jf .btn{width:100%;margin-top:16px}
#ssm .jf .err.show{display:block}
#ssm .hero .err{color:#FFB4AB}
#ssm .hero .btn.lq{min-width:0}
#ssm .counter{margin-top:14px;font-weight:800;font-size:16px}
#ssm .hero .cta-note{display:block;margin-top:8px}
#ssm .joined{font-weight:800;font-size:17px;margin-top:14px}
#ssm .joined a{color:inherit}
@media (min-width:860px){#ssm .hero .jf{display:grid;grid-template-columns:1fr 1.25fr auto;gap:10px;align-items:end}#ssm .hero .jf .fld{margin-top:0}#ssm .hero .jf .btn{width:auto;margin-top:0;min-width:180px;min-height:56px}#ssm .hero .jf .err{grid-column:1/-1;margin-top:0}}
@media (max-width:420px){#ssm .chips{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;margin-inline:-20px;padding-inline:20px}#ssm .chips::-webkit-scrollbar{display:none}#ssm .chip{white-space:nowrap;flex:none}}
/* le Pass (ticket) dans la carte blanche ou dans le hero */
#ssm .pass .big{font-size:24px;font-weight:900;color:var(--blue);line-height:1.35}
#ssm .pass .fsub{color:var(--muted);font-size:14.5px;margin-top:4px}
#ssm .hero .pass,#ssm .hero .pass .big,#ssm .hero .pass .fld label,#ssm .hero .pass .fsub,#ssm .hero .pass .fld small{color:#fff}
#ssm .ticket{position:relative;margin-top:18px;background:#fff;color:var(--ink);border-radius:28px;max-width:420px;box-shadow:10px 16px 36px rgba(15,13,43,.3);overflow:hidden;border:1.5px solid #ECE7FF;text-align:right}
#ssm .ticket::after{content:'';position:absolute;inset:0;pointer-events:none;opacity:.5;mix-blend-mode:multiply;background:conic-gradient(from 200deg at 30% 20%,rgba(217,204,255,0),rgba(217,204,255,.45) 25%,rgba(255,255,255,0) 45%,rgba(245,210,90,.14) 65%,rgba(217,204,255,0))}
#ssm .tk-top{display:flex;justify-content:space-between;align-items:center;background:linear-gradient(135deg,var(--v2),var(--blue));color:#fff;padding:14px 18px;font-size:13px;font-weight:700}
#ssm .tk-top img{height:16px;width:auto}
#ssm .tk-body{padding:20px 18px 14px;display:grid;gap:2px}
#ssm .tk-label{font-size:13px;color:var(--muted)}
#ssm .tk-rank{font-family:'Poppins',sans-serif;font-size:64px;font-weight:800;line-height:1;color:var(--blue)}
#ssm .tk-who{font-weight:800;margin-top:8px}
#ssm .tk-date{font-size:14px;color:var(--muted)}
#ssm .tk-cut{position:relative;border-top:2px dashed #DCD6F5;margin:0 18px}
#ssm .tk-cut::before,#ssm .tk-cut::after{content:'';position:absolute;top:-11px;width:20px;height:20px;border-radius:50%;background:var(--lav)}
#ssm .hero .tk-cut::before,#ssm .hero .tk-cut::after{background:var(--v1)}
#ssm .tk-cut::before{left:-28px}#ssm .tk-cut::after{right:-28px}
#ssm .tk-link{padding:12px 18px 16px;font-family:'Poppins',sans-serif;font-size:13px;font-weight:600;color:var(--v1);text-align:left;word-break:break-all}
#ssm .pass>.btn{width:100%;margin-top:16px}
#ssm .pass .fld{margin-top:20px}
#ssm .pass .fld small{display:block;font-weight:400;font-size:13px;color:var(--muted)}
#ssm .ref{margin-top:22px;display:grid;gap:10px}
#ssm .pass .btn-wa{margin-top:8px}
#ssm .pass .link{display:inline-block;margin-top:6px;font-weight:700;color:inherit;text-decoration:underline;text-underline-offset:3px}
/* témoignages de testeuses (config TESTIMONIALS) */
#ssm .testi{display:grid;gap:14px;margin-top:26px}
#ssm .testi figure{margin:0;display:grid;grid-template-columns:72px 1fr;gap:14px;align-items:start;background:var(--lav);border-radius:22px;padding:14px}
#ssm .testi figure.video{grid-template-columns:1fr}
#ssm .testi img{width:72px;height:72px;object-fit:cover;border-radius:16px}
#ssm .testi video{width:100%;max-height:420px;border-radius:16px;background:#000}
#ssm .testi figcaption{font-size:15px}#ssm .testi figcaption b{display:block;font-weight:800;color:var(--blue)}
/* 3 badges au lieu de 4, barre fixe active */
#ssm .badges{grid-template-columns:repeat(3,minmax(0,1fr));max-width:560px}
#ssm .s-sticky.show{display:inline-flex}

/* hero mobile : la colonne ne s'élargit pas avec la rangée de puces ; formulaire compact (libellés lus par les lecteurs d'écran) */
#ssm .hero-grid>*,#ssm .hero-copy{min-width:0}
#ssm .hero .fld .lt{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
#ssm .hero .fld label .phone,#ssm .hero .fld label .fin{margin-top:0}
@media (max-width:859px){#ssm .hero .fld{margin-top:6px}#ssm .hero .jf .btn{margin-top:8px}#ssm .hero-join{margin-top:14px}}
@media (max-width:480px){#ssm .pill-new{display:none}#ssm .hero h1{margin-top:4px}}

/* jeu-concours (config GIVEAWAY) */
#ssm .gift{display:inline-flex;align-items:center;gap:8px;margin-top:12px;padding:8px 14px;border-radius:999px;font-weight:800;font-size:14px;line-height:1.4;background:rgba(255,255,255,.14);border:1.5px dashed rgba(255,255,255,.65);color:#fff}
#ssm .gift b{font-weight:800}
#ssm .fcard .gift{background:var(--lav);border-color:#C9BDF5;color:var(--blue)}
#ssm .perks li[data-giveaway] .ck{background:#fff}

/* visuel Dual Active (remplace l'équation des couleurs) */
#ssm .how-img{display:block;width:min(100%,440px);height:auto;margin:22px auto 0;border-radius:28px;box-shadow:10px 16px 36px rgba(42,23,102,.22)}

/* ===== Transitions au scroll =====
   Révélation une seule fois (IntersectionObserver de main.js) : fondu + 18 px, courbe ease-out forte,
   cascade de 60 ms entre titre, texte et cartes. Puis, quand le navigateur le sait faire, des animations
   pilotées par le défilement (réversibles, sur transform/opacity seulement). */
#ssm{--ease-out:cubic-bezier(.23,1,.32,1)}
#ssm .rv{opacity:0;transform:translateY(18px);transition:opacity .5s var(--ease-out),transform .5s var(--ease-out)}
#ssm .rv.in{opacity:1;transform:none}
#ssm .lead.rv,#ssm .tagline.rv{transition-delay:60ms}
#ssm :is(.grid4,.grid3,.steps,.checks,.cmp)>.rv:nth-child(1){transition-delay:120ms}
#ssm :is(.grid4,.grid3,.steps,.checks,.cmp)>.rv:nth-child(2){transition-delay:180ms}
#ssm :is(.grid4,.grid3,.steps,.checks,.cmp)>.rv:nth-child(3){transition-delay:240ms}
#ssm :is(.grid4,.grid3,.steps,.checks,.cmp)>.rv:nth-child(4){transition-delay:300ms}
#ssm .badges.rv{transition-delay:360ms}
@supports (animation-timeline: view()){
  /* la boîte reste un peu en arrière quand on quitte le hero : profondeur */
  #ssm .pk{animation:ssmPkPar linear both;animation-timeline:scroll(root);animation-range:0 100vh}
  @keyframes ssmPkPar{to{transform:translateY(56px)}}
  /* les grands visuels se posent en entrant (léger zoom + fondu), et reculent si on remonte */
  #ssm :is(.scr-box,.bap,.how-img,.fcard){animation:ssmSettle linear both;animation-timeline:view();animation-range:entry 0% entry 70%}
  @keyframes ssmSettle{from{opacity:.35;transform:translateY(28px) scale(.96)}to{opacity:1;transform:none}}
}
@media (prefers-reduced-motion:reduce){
  #ssm .rv{transform:none;transition:opacity .2s ease;transition-delay:0s!important}
  #ssm .pk,#ssm :is(.scr-box,.bap,.how-img,.fcard){animation:none}
}

/* ===== Ticket violet brillant, chances au tirage, Apple Wallet ===== */
#ssm .ticket{background:linear-gradient(135deg,#8A6AD6 0%,#4B2A8F 46%,#2A1766 100%);color:#fff;border:1px solid rgba(255,255,255,.4);box-shadow:0 18px 44px rgba(42,23,102,.5),inset 0 1px 0 rgba(255,255,255,.45)}
#ssm .ticket::before{content:'';position:absolute;inset:-30% -40%;pointer-events:none;background:linear-gradient(110deg,rgba(255,255,255,0) 38%,rgba(255,255,255,.32) 48%,rgba(255,255,255,0) 58%);animation:ssmShine 5.5s ease-in-out infinite}
@keyframes ssmShine{0%,55%{transform:translateX(-55%)}100%{transform:translateX(55%)}}
#ssm .ticket::after{mix-blend-mode:screen;opacity:.5;background:conic-gradient(from 200deg at 30% 20%,rgba(255,255,255,0),rgba(217,204,255,.55) 25%,rgba(255,255,255,0) 45%,rgba(255,220,140,.35) 65%,rgba(255,255,255,0))}
#ssm .tk-top{background:rgba(15,13,43,.38);border-bottom:1px solid rgba(255,255,255,.18);color:#fff}
#ssm .tk-label,#ssm .tk-date{color:rgba(255,255,255,.78)}
#ssm .tk-rank{color:#fff;text-shadow:0 3px 14px rgba(15,13,43,.35)}
#ssm .tk-who{color:#fff}
#ssm .tk-cut{border-top-color:rgba(255,255,255,.45)}
#ssm .fcard .tk-cut::before,#ssm .fcard .tk-cut::after{background:#fff}
#ssm .tk-link{color:#fff;opacity:.92}
#ssm .btn-wallet{width:100%;margin-top:10px;gap:10px;background:#000;color:#fff;border:1px solid #000;box-shadow:none;font-family:'Poppins',sans-serif;font-weight:600;font-size:15px;direction:ltr}
#ssm .btn-wallet svg{width:26px;height:20px;flex:none}
#ssm .chances{margin-top:22px;padding:16px 18px;border-radius:20px;background:var(--lav);color:var(--ink)}
#ssm .hero .chances{background:rgba(15,13,43,.35);color:#fff;border:1.5px dashed rgba(255,255,255,.55)}
#ssm .ch-title{font-weight:800}
#ssm .ch-count{display:flex;align-items:baseline;gap:10px;margin-top:6px;font-weight:800}
#ssm .ch-count b{font-family:'Poppins',sans-serif;font-size:46px;font-weight:800;line-height:1;color:var(--v1)}
#ssm .hero .ch-count b{color:var(--yel-l)}
#ssm .ch-rule{font-size:14px;margin-top:6px;color:var(--muted);line-height:1.55}
#ssm .hero .ch-rule{color:#C9C5E8}
#ssm .chances .ref-count{margin-top:8px;font-size:14px;font-weight:700}
@media (prefers-reduced-motion:reduce){#ssm .ticket::before{animation:none}}

/* après inscription : seule la première section reste (bandeau + hero avec le Pass) */
#ssm.registered section:not(.hero),#ssm.registered footer,#ssm.registered .s-sticky{display:none!important}
#ssm.registered{background:var(--blue)}
#ssm.registered .hero{min-height:100svh;border-radius:0;display:flex;flex-direction:column;justify-content:center}

/* textes du 19/10 plus longs : hero resserré sur petit écran pour garder le formulaire dans le premier écran */
@media (max-width:480px){#ssm .hero h1{font-size:clamp(28px,7.6vw,34px);line-height:1.22}#ssm .hero .sub{font-size:15px;line-height:1.5;margin-top:10px}#ssm .hero .tagline{display:none}#ssm .chips{margin-top:12px}}
/* Consentement WhatsApp sous le bouton d'inscription (exigé par Meta pour les relances) */
#ssm .jf-consent{font-size:12.5px;line-height:1.5;opacity:.8;margin-top:10px;text-align:center}