/* =========================================================
   SITE VITRINE PROFESSIONNEL — concept "LA VITRINE"
   Inauguration (ruban coupé) · vitre + reflet · projecteur ·
   maquette responsive qui morphe. Double thème clair/sombre.
   ========================================================= */
#sv{
  /* 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"] #sv{
  --bg:#0B0A09; --bg2:#141312; --ink:#F4F1EB; --soft:rgba(244,241,235,.82); --dim:#98938A;
  --line:rgba(244,241,235,.14); --ok:#3BE07E;
}
#sv *{ box-sizing:border-box; }
#sv a{ color:inherit; text-decoration:none; }
#sv ::selection{ background:var(--acc); color:#0B0B0A; }
.sv-wrap{ width:min(1240px,calc(100% - 40px)); margin:0 auto; }
.sv-mono{ font-family:var(--mono); }

/* Progression */
#svProg{ 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)); }

/* Reveal */
#sv.is-ready [data-r]{ opacity:0; transform:translateY(26px); }
#sv.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); }

.sv-eyebrow{ font-family:var(--mono); font-size:.68rem; letter-spacing:.26em; text-transform:uppercase; color:var(--dim); }
.sv-eyebrow b{ color:var(--acc); }
.sv-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; }
#sv .sv-hl.lit{ background-size:100% 100%; transition:background-size .9s cubic-bezier(.5,0,.1,1) var(--hd,0s); }

.sv-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; }
.sv-btn.fill{ background:var(--acc); border-color:var(--acc); color:#0B0B0A; }
.sv-btn:hover{ background:var(--ink); color:var(--bg); }
.sv-btn.fill:hover{ background:var(--acc2); border-color:var(--acc2); color:#0B0B0A; }

/* ---------------- HERO : LA VITRINE ---------------- */
.sv-hero{ padding:calc(var(--header-h,80px) + 1.6rem) 0 2rem; }
.sv-hero-grid{ display:grid; grid-template-columns:.95fr 1.05fr; gap:clamp(1.4rem,3.5vw,3rem); align-items:center; }
@media(max-width:920px){ .sv-hero-grid{ grid-template-columns:1fr; } }
.sv-hero h1{ font-weight:900; letter-spacing:-.045em; line-height:.98; font-size:clamp(1.9rem,4.6vw,3.4rem); max-width:16ch; }
.sv-hero h1 span{ color:var(--acc); }
.sv-lede{ margin-top:.9rem; font-size:clamp(.95rem,1.4vw,1.08rem); line-height:1.6; max-width:52ch; color:var(--soft); }
.sv-proofs{ display:flex; flex-wrap:wrap; gap:.55rem; margin-top:1.1rem; }
.sv-proofs span{ display:inline-flex; align-items:center; gap:.45rem; font-family:var(--mono); font-size:.66rem; font-weight:600;
  border:1px solid var(--line); border-radius:99px; padding:.45rem .8rem; background:var(--bg2); }
.sv-proofs span:before{ content:"✓"; display:grid; place-items:center; width:14px; height:14px; border-radius:50%;
  background:var(--ok); color:#fff; font-size:.55rem; }
.sv-cta{ display:flex; gap:.7rem; flex-wrap:wrap; margin-top:1.3rem; }

/* La devanture */
.sv-store{ position:relative; }
/* auvent rayé */
.sv-awning{ position:relative; z-index:3; height:34px; margin:0 6% -6px; border-radius:12px 12px 0 0; overflow:hidden;
  background:repeating-linear-gradient(90deg,var(--acc) 0 26px,#FFF3EA 26px 52px);
  box-shadow:0 10px 24px -14px rgba(0,0,0,.4); }
[data-theme="dark"] #sv .sv-awning{ background:repeating-linear-gradient(90deg,var(--acc) 0 26px,#3A2B1F 26px 52px); }
.sv-awning:after{ content:""; position:absolute; left:0; right:0; bottom:0; height:10px;
  background:radial-gradient(circle at 13px -2px, transparent 11px, rgba(0,0,0,.14) 12px); background-size:26px 10px; }
/* cadre vitrine */
.sv-glass{ position:relative; border-radius:16px; overflow:hidden; border:1px solid var(--line); background:var(--bg2);
  box-shadow:0 50px 90px -60px rgba(0,0,0,.55); }
/* reflet de vitre périodique */
.sv-glass .sheen{ position:absolute; inset:-20% auto; top:-20%; bottom:-20%; width:34%; left:-60%; z-index:6; pointer-events:none;
  background:linear-gradient(105deg,transparent,rgba(255,255,255,.34),transparent); transform:skewX(-16deg);
  animation:svSheen 6.5s ease-in-out 3.4s infinite; }
@keyframes svSheen{ 0%,62%{ left:-60%; } 82%,100%{ left:130%; } }
/* projecteur qui suit la souris */
.sv-glass .spot{ position:absolute; z-index:5; width:340px; height:340px; border-radius:50%; pointer-events:none;
  background:radial-gradient(circle,rgba(255,180,120,.22),transparent 62%); transform:translate(-50%,-50%); opacity:0; transition:opacity .4s; }
/* écriteau OUVERT */
.sv-open{ position:absolute; z-index:7; top:12px; right:12px; font-family:var(--mono); font-size:.6rem; font-weight:700; letter-spacing:.2em;
  background:var(--ok); color:#fff; border-radius:6px; padding:.4rem .7rem; transform:rotate(2deg) scale(0); }
.sv-glass.open .sv-open{ transform:rotate(2deg) scale(1); transition:transform .5s cubic-bezier(.34,1.8,.64,1) .55s; }

/* Ruban d'inauguration */
.sv-ribbon{ position:absolute; inset:0; z-index:8; pointer-events:none; }
.sv-ribbon .half{ position:absolute; top:48%; height:26px; width:52%; background:linear-gradient(180deg,var(--acc2),var(--acc));
  box-shadow:0 8px 18px -8px rgba(255,107,26,.7); }
.sv-ribbon .half.l{ left:0; transform-origin:0 50%; }
.sv-ribbon .half.r{ right:0; transform-origin:100% 50%; }
.sv-ribbon .knot{ position:absolute; top:calc(48% - 8px); left:50%; transform:translateX(-50%); width:42px; height:42px; z-index:2; }
.sv-ribbon .knot:before,.sv-ribbon .knot:after{ content:""; position:absolute; top:50%; left:50%; width:26px; height:16px;
  border-radius:50% 50% 50% 50%/60% 60% 40% 40%; background:var(--acc); box-shadow:inset 0 -3px 0 rgba(0,0,0,.15); }
.sv-ribbon .knot:before{ transform:translate(-90%,-50%) rotate(-22deg); }
.sv-ribbon .knot:after{ transform:translate(-10%,-50%) rotate(22deg); }
.sv-ribbon .scis{ position:absolute; top:calc(48% - 26px); left:50%; transform:translate(-50%,-16px); font-size:26px; opacity:0; }
.sv-glass.open .sv-ribbon .scis{ animation:svScis 1s ease-in-out forwards; }
@keyframes svScis{ 0%{ opacity:0; transform:translate(-50%,-30px) rotate(0); }
  35%{ opacity:1; transform:translate(-50%,-2px) rotate(-14deg); }
  55%{ transform:translate(-50%,2px) rotate(10deg); }
  100%{ opacity:0; transform:translate(-50%,10px) rotate(0); } }
.sv-glass.open .sv-ribbon .half.l{ transform:rotate(46deg) translateY(6px); opacity:0; transition:transform 1.1s cubic-bezier(.5,0,.6,1) .55s, opacity .7s 1.2s; }
.sv-glass.open .sv-ribbon .half.r{ transform:rotate(-46deg) translateY(6px); opacity:0; transition:transform 1.1s cubic-bezier(.5,0,.6,1) .6s, opacity .7s 1.25s; }
.sv-glass.open .sv-ribbon .knot{ opacity:0; transform:translate(-50%,26px) rotate(24deg); transition:.8s .55s; }

/* contenu de la vitrine : mini-site */
.sv-mock{ position:relative; z-index:1; padding:1rem; display:flex; flex-direction:column; gap:.7rem; min-height:340px;
  filter:blur(3px) saturate(.85); transition:filter .9s ease .7s; }
.sv-glass.open .sv-mock{ filter:none; }
.sv-m-nav{ display:flex; align-items:center; gap:.55rem; }
.sv-m-nav .lg{ width:24px; height:24px; border-radius:7px; background:linear-gradient(135deg,var(--acc),var(--acc2)); }
.sv-m-nav .nm{ font-weight:800; font-size:.8rem; letter-spacing:-.02em; }
.sv-m-nav .mn{ margin-left:auto; display:flex; gap:.4rem; }
.sv-m-nav .mn i{ width:30px; height:6px; border-radius:99px; background:var(--line); }
.sv-m-h{ font-weight:900; letter-spacing:-.03em; line-height:1.05; font-size:clamp(1rem,2.2vw,1.45rem); }
.sv-m-h em{ font-style:normal; color:var(--acc); }
.sv-m-img{ height:110px; border-radius:10px; overflow:hidden; border:1px solid var(--line); }
.sv-m-img img{ width:100%; height:100%; object-fit:cover; display:block; }
.sv-m-row{ display:grid; grid-template-columns:repeat(3,1fr); gap:.5rem; }
.sv-m-row i{ height:38px; border-radius:8px; background:var(--bg); border:1px solid var(--line); }
.sv-m-foot{ display:flex; align-items:center; gap:.5rem; margin-top:auto; }
.sv-m-btn{ font-family:var(--mono); font-size:.58rem; font-weight:700; color:#0B0B0A;
  background:linear-gradient(135deg,var(--acc),var(--acc2)); border-radius:7px; padding:.45rem .8rem; }
.sv-m-wa{ width:26px; height:26px; border-radius:50%; background:#25D366; display:grid; place-items:center; color:#fff; font-size:.7rem; }

/* Marquee promesses */
.sv-marquee{ overflow:hidden; padding:.6rem 0; border-top:1px solid var(--line); border-bottom:1px solid var(--line); margin-top:2rem; }
.sv-track{ display:flex; width:max-content; animation:svMarq 26s linear infinite; }
.sv-track:hover{ animation-play-state:paused; }
.sv-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; }
.sv-track .sep{ color:var(--acc); }
@keyframes svMarq{ to{ transform:translateX(-50%); } }

/* ---------------- MANIFESTE + AUDIENCE ---------------- */
.sv-manifesto{ padding:clamp(3rem,7vw,5rem) 0; }
.sv-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; }
.sv-quote .dim{ color:var(--dim); }
.sv-chips{ display:flex; flex-wrap:wrap; gap:.55rem; margin-top:1.5rem; }
.sv-chips span{ border:1px solid var(--line); border-radius:99px; padding:.5rem .9rem; font-size:.78rem; font-weight:700;
  background:var(--bg2); transition:.35s cubic-bezier(.19,1,.22,1); }
.sv-chips span:hover{ border-color:rgba(255,107,26,.55); transform:translateY(-3px); }

/* ---------------- ENGAGEMENTS (5 cartes) ---------------- */
.sv-eng{ padding:0 0 clamp(3rem,7vw,5rem); }
.sv-eng-head{ display:flex; justify-content:space-between; align-items:end; gap:1rem; flex-wrap:wrap; margin-bottom:1.4rem; }
.sv-eng-head h2{ font-weight:900; letter-spacing:-.035em; line-height:1; font-size:clamp(1.5rem,3.2vw,2.4rem); max-width:18ch; }
.sv-eng-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:.9rem; }
.sv-ecard{ border:1px solid var(--line); border-radius:14px; background:var(--bg2); padding:1.15rem; position:relative; overflow:hidden;
  transition:.4s cubic-bezier(.19,1,.22,1); }
.sv-ecard:hover{ transform:translateY(-5px); border-color:rgba(255,107,26,.5); box-shadow:0 28px 55px -40px rgba(0,0,0,.5); }
.sv-ecard:after{ content:""; position:absolute; left:1.15rem; top:0; width:34px; height:2px; background:var(--acc);
  transform:scaleX(0); transform-origin:0 50%; }
.sv-ecard.in:after{ transform:scaleX(1); transition:transform .8s cubic-bezier(.19,1,.22,1) calc(var(--d,0s) + .35s); }
.sv-ecard .ic{ font-size:1.15rem; }
.sv-ecard b{ display:block; margin-top:.5rem; font-size:.98rem; letter-spacing:-.015em; line-height:1.2; }
.sv-ecard ul{ margin:.6rem 0 0; padding:0; list-style:none; }
.sv-ecard li{ font-size:.78rem; line-height:1.45; color:var(--dim); padding:.24rem 0 .24rem 1.05rem; position:relative; }
.sv-ecard li:before{ content:"—"; position:absolute; left:0; color:var(--acc); }
.sv-ecard.wide{ grid-column:span 2; }
@media(max-width:980px){ .sv-eng-grid{ grid-template-columns:1fr 1fr; } .sv-ecard.wide{ grid-column:span 2; } }
@media(max-width:620px){ .sv-eng-grid{ grid-template-columns:1fr; } .sv-ecard.wide{ grid-column:auto; } }

/* ---------------- RESPONSIVE DEMO (morph) ---------------- */
.sv-resp{ background:var(--ink); color:var(--bg); padding:clamp(3rem,7vw,5rem) 0; overflow:hidden; }
[data-theme="dark"] .sv-resp{ background:#050505; color:#F4F1EB; }
.sv-resp .sv-eyebrow{ color:var(--acc2); }
.sv-resp h2{ font-weight:900; letter-spacing:-.035em; line-height:1; font-size:clamp(1.5rem,3.2vw,2.3rem); margin-top:.6rem; max-width:22ch; }
.sv-resp .sub{ margin-top:.8rem; color:rgba(244,241,235,.65); font-size:.9rem; max-width:56ch; line-height:1.6; }
.sv-devices{ display:flex; align-items:center; justify-content:center; margin-top:2rem; min-height:340px; }
.sv-device{ background:#191816; border:1px solid rgba(244,241,235,.18); border-radius:18px; overflow:hidden; position:relative;
  transition:width 1s cubic-bezier(.6,0,.2,1), height 1s cubic-bezier(.6,0,.2,1), border-radius 1s; width:min(560px,86vw); height:320px; }
.sv-device.m-tablet{ width:min(380px,70vw); height:300px; border-radius:22px; }
.sv-device.m-phone{ width:min(200px,52vw); height:330px; border-radius:26px; }
.sv-d-in{ position:absolute; inset:10px; border-radius:10px; background:#211F1C; padding:.7rem; display:flex; flex-direction:column; gap:.5rem; overflow:hidden; }
.sv-d-nav{ display:flex; align-items:center; gap:.45rem; }
.sv-d-nav .lg{ width:18px; height:18px; border-radius:5px; background:linear-gradient(135deg,var(--acc),var(--acc2)); flex:0 0 auto; }
.sv-d-nav .mn{ margin-left:auto; display:flex; gap:.35rem; transition:opacity .4s; }
.sv-d-nav .mn i{ width:24px; height:5px; border-radius:99px; background:rgba(244,241,235,.25); }
.sv-d-nav .bg{ margin-left:auto; display:none; flex-direction:column; gap:3px; }
.sv-d-nav .bg i{ width:16px; height:2px; background:rgba(244,241,235,.7); border-radius:99px; }
.sv-device.m-phone .sv-d-nav .mn{ display:none; }
.sv-device.m-phone .sv-d-nav .bg{ display:flex; }
.sv-d-h{ font-weight:900; letter-spacing:-.02em; font-size:.95rem; line-height:1.1; color:#F4F1EB; }
.sv-d-h em{ font-style:normal; color:var(--acc2); }
.sv-d-cols{ display:flex; gap:.5rem; flex:1; transition:flex-direction 0s; }
.sv-d-cols i{ flex:1; border-radius:8px; background:rgba(244,241,235,.08); border:1px solid rgba(244,241,235,.12); min-height:34px; }
.sv-device.m-phone .sv-d-cols{ flex-direction:column; }
.sv-d-btn{ align-self:flex-start; font-family:var(--mono); font-size:.55rem; font-weight:700; color:#0B0B0A;
  background:linear-gradient(135deg,var(--acc),var(--acc2)); border-radius:6px; padding:.4rem .7rem; }
.sv-device.m-phone .sv-d-btn{ align-self:stretch; text-align:center; }
.sv-d-tabs{ display:flex; justify-content:center; gap:.5rem; margin-top:1.4rem; }
.sv-d-tabs button{ font-family:var(--mono); font-size:.62rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase;
  padding:.5rem .95rem; border-radius:99px; border:1px solid rgba(244,241,235,.25); background:transparent; color:rgba(244,241,235,.65); cursor:pointer; transition:.35s; }
.sv-d-tabs button.on{ background:var(--acc); border-color:var(--acc); color:#0B0B0A; }

/* ---------------- FONCTIONNALITÉS (checklist) ---------------- */
.sv-feat{ padding:clamp(3rem,7vw,5rem) 0 0; }
.sv-feat-grid{ display:grid; grid-template-columns:1fr 1fr; gap:.55rem 1.4rem; margin-top:1.4rem; max-width:900px; }
.sv-f{ display:flex; align-items:center; gap:.7rem; border-bottom:1px solid var(--line); padding:.65rem 0; font-size:.88rem; }
.sv-f svg{ width:20px; height:20px; flex:0 0 auto; }
.sv-f circle{ fill:none; stroke:var(--line); stroke-width:2; }
.sv-f path{ fill:none; stroke:var(--acc); stroke-width:2.6; stroke-linecap:round; stroke-linejoin:round; stroke-dasharray:20; stroke-dashoffset:20; }
.sv-f.in path{ stroke-dashoffset:0; transition:stroke-dashoffset .6s cubic-bezier(.5,0,.1,1) calc(var(--d,0s) + .25s); }
.sv-f small{ color:var(--dim); font-size:.72rem; margin-left:.3rem; }
@media(max-width:720px){ .sv-feat-grid{ grid-template-columns:1fr; } }

/* ---------------- PARTENAIRE : compteurs + bonus ---------------- */
.sv-part{ padding:clamp(3rem,7vw,5rem) 0; }
.sv-pgrid{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(1.5rem,4vw,3rem); align-items:center; }
.sv-pimg{ overflow:hidden; border-radius:12px; border:1px solid var(--line); height:clamp(240px,40vh,380px); }
.sv-pimg img{ width:100%; height:100%; object-fit:cover; filter:grayscale(1) contrast(1.04); transition:filter .9s,transform 1.1s; }
.sv-pimg:hover img{ filter:none; transform:scale(1.05); }
.sv-part h2{ font-weight:900; letter-spacing:-.035em; line-height:1; font-size:clamp(1.5rem,3.2vw,2.3rem); }
.sv-stats{ display:flex; gap:2rem; flex-wrap:wrap; margin-top:1.4rem; }
.sv-stat b{ display:block; font-weight:900; letter-spacing:-.04em; font-size:clamp(1.5rem,3vw,2.2rem); }
.sv-stat span{ font-family:var(--mono); font-size:.6rem; text-transform:uppercase; letter-spacing:.12em; color:var(--dim); }
.sv-bonus{ margin-top:1.4rem; border:1px dashed rgba(255,107,26,.55); border-radius:12px; padding:1rem 1.1rem; background:rgba(255,138,61,.06); }
.sv-bonus b{ font-family:var(--mono); font-size:.62rem; letter-spacing:.2em; text-transform:uppercase; color:var(--acc); }
.sv-bonus ul{ margin:.5rem 0 0; padding:0; list-style:none; }
.sv-bonus li{ font-size:.8rem; color:var(--soft); padding:.2rem 0 .2rem 1.1rem; position:relative; }
.sv-bonus li:before{ content:"🎁"; position:absolute; left:0; font-size:.7rem; }
@media(max-width:820px){ .sv-pgrid{ grid-template-columns:1fr; } }

/* ---------------- OBJECTIFS + CTA ---------------- */
.sv-goals{ padding:0 0 clamp(3rem,7vw,5rem); }
.sv-grows{ margin-top:1.2rem; }
.sv-grow{ display:grid; grid-template-columns:64px 1fr 38px; gap:1rem; align-items:center; padding:.9rem 0; border-bottom:1px solid var(--line); transition:.35s; }
.sv-grow:first-child{ border-top:1px solid var(--line); }
.sv-grow .n{ font-family:var(--mono); font-size:.66rem; color:var(--dim); }
.sv-grow h3{ font-weight:800; letter-spacing:-.015em; font-size:1rem; }
.sv-grow .go{ width:34px; height:34px; border-radius:50%; border:1.5px solid var(--line); display:grid; place-items:center; font-size:.75rem; transition:.4s; }
.sv-grow:hover{ padding-left:.7rem; }
.sv-grow:hover h3{ color:var(--acc); }
.sv-grow:hover .go{ background:var(--acc); border-color:var(--acc); color:#0B0B0A; transform:rotate(45deg); }
.sv-final{ padding:0 0 clamp(3rem,8vw,6rem); text-align:center; }
.sv-final h2{ font-weight:900; letter-spacing:-.04em; line-height:.96; font-size:clamp(1.9rem,4.8vw,3.4rem); }
.sv-final p{ margin:1.1rem auto 1.8rem; color:var(--dim); max-width:50ch; line-height:1.6; }

@media(prefers-reduced-motion:reduce){
  #sv *{ animation:none !important; }
  #sv.is-ready [data-r]{ opacity:1 !important; transform:none !important; }
  .sv-hl{ background-size:100% 100% !important; }
  .sv-ribbon{ display:none !important; }
  .sv-mock{ filter:none !important; }
  .sv-glass .sheen,.sv-glass .spot{ display:none !important; }
  .sv-open{ transform:rotate(2deg) scale(1) !important; }
  .sv-f path{ stroke-dashoffset:0 !important; }
  .sv-ecard:after{ transform:scaleX(1) !important; }
  .sv-device{ transition:none !important; }
}