:root{
  --bg:#F8F2EF; --bg-2:#F1E7E3; --ink:#2E2220; --ink-2:#6E5A55; --pink:#F85691; --pink-2:#E0447D;
  --pink-soft:#FDE8F0; --line:#EADBD5; --photo-bg:#EADBD5;
  --u:min(.95vw,1.2vh);
  color-scheme:light;
  box-sizing:border-box;
  padding-top:env(safe-area-inset-top,0px); padding-bottom:env(safe-area-inset-bottom,0px);
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --bg:#2E2220; --bg-2:#3A2C29; --ink:#F8F2EF; --ink-2:#CCAEA3; --pink:#F85691; --pink-2:#FF77A8;
    --pink-soft:#4A2A35; --line:#4E3E3A; --photo-bg:#4E3E3A; color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --bg:#2E2220; --bg-2:#3A2C29; --ink:#F8F2EF; --ink-2:#CCAEA3; --pink:#F85691; --pink-2:#FF77A8;
  --pink-soft:#4A2A35; --line:#4E3E3A; --photo-bg:#4E3E3A; color-scheme:dark;
}
*,*::before,*::after{box-sizing:border-box}
html{height:100%;scroll-padding-top:env(safe-area-inset-top,0px)}
html,body{margin:0}
body{
  height:100%;overflow:hidden;background:var(--bg);color:var(--ink);
  font-family:'Poppins',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  -webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;touch-action:pan-y;
}
img{max-width:100%;display:block;-webkit-user-drag:none}

.stage{position:relative;height:100%;width:100%;overflow:hidden}

/* en-tête */
.top{position:absolute;inset:0 0 auto 0;z-index:5;display:flex;align-items:center;justify-content:space-between;
  padding:calc(var(--u)*3) calc(var(--u)*5) 0}
.bars{display:flex;gap:calc(var(--u)*.8)}
.bars button{all:unset;cursor:pointer;width:calc(var(--u)*4.5);height:calc(var(--u)*.7);border-radius:99px;background:var(--line);overflow:hidden;position:relative}
.bars button i{position:absolute;inset:0;background:var(--pink);transform-origin:left;transform:scaleX(0)}
.bars button.done i{transform:scaleX(1)}
.bars button:focus-visible{outline:2px solid var(--pink);outline-offset:3px}

/* slides */
.slide{position:absolute;inset:0;display:grid;align-items:center;
  padding:calc(var(--u)*10) calc(var(--u)*6) calc(var(--u)*5);
  opacity:0;visibility:hidden;transform:translateX(calc(var(--u)*3));
  transition:opacity .6s ease,transform .6s ease,visibility 0s .6s}
.slide.on{opacity:1;visibility:visible;transform:none;transition:opacity .6s ease,transform .6s ease,visibility 0s}
.slide.left{transform:translateX(calc(var(--u)*-3))}

.ph{position:relative;border-radius:calc(var(--u)*3.2);overflow:hidden;background:var(--photo-bg);min-height:0;min-width:0}
.ph img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}

/* accueil */
.s-hero{grid-template-columns:1fr auto;gap:calc(var(--u)*7)}
.s-hero h1{margin:0;font-weight:800;font-size:calc(var(--u)*7.6);line-height:.98;letter-spacing:-.035em}
.s-hero h1 span{display:block}
.lead{margin:calc(var(--u)*3) 0 0;font-size:calc(var(--u)*2.6);line-height:1.5;color:var(--ink-2);max-width:31ch}
.pay{margin-top:calc(var(--u)*4.4)}
.pay-t{font-size:calc(var(--u)*1.6);font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-2);margin-bottom:calc(var(--u)*1.2)}
.pay-l{display:flex;flex-wrap:wrap;align-items:center;gap:calc(var(--u)*1.6) calc(var(--u)*2.6)}
.pay-l img{width:auto;display:block}
.cash{display:inline-flex;align-items:center;gap:calc(var(--u)*1);font-size:calc(var(--u)*2.3);font-weight:600;color:var(--ink)}
.cash svg{width:calc(var(--u)*3.4);height:calc(var(--u)*3.4);stroke:var(--ink);fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.hero-pic{position:relative;height:calc(var(--u)*58);width:calc(var(--u)*45)}
.hero-pic .ph{position:absolute;inset:0}
.tag{position:absolute;left:calc(var(--u)*-8);top:calc(var(--u)*-3);width:calc(var(--u)*17);aspect-ratio:1;border-radius:50%;
  background:var(--pink);color:#fff;display:grid;place-content:center;text-align:center;transform:rotate(-8deg);
  box-shadow:0 0 0 calc(var(--u)*1) var(--bg)}
.tag small{font-size:calc(var(--u)*2);font-weight:500;line-height:1}
.tag b{font-size:calc(var(--u)*5.6);font-weight:800;letter-spacing:-.04em;line-height:1}

/* produit */
.s-product{grid-template-columns:auto 1fr;gap:calc(var(--u)*7)}
.s-product .ph,.s-perso .ph{height:calc(var(--u)*58);width:calc(var(--u)*45)}
.p-name{margin:0;font-weight:600;font-size:calc(var(--u)*4.6);letter-spacing:-.02em;line-height:1.05}
.p-desc{margin:calc(var(--u)*1.6) 0 0;font-size:calc(var(--u)*2.4);line-height:1.45;color:var(--ink-2);max-width:32ch}
.price{margin-top:calc(var(--u)*3);display:flex;align-items:flex-start;gap:calc(var(--u)*1.2);line-height:.85}
.price .chf{font-size:calc(var(--u)*3);font-weight:600;color:var(--pink);margin-top:calc(var(--u)*1.6)}
.price .n{font-size:calc(var(--u)*17);font-weight:800;color:var(--pink);letter-spacing:-.05em}
.price s{align-self:flex-end;font-size:calc(var(--u)*3.4);color:var(--ink-2);font-weight:500;margin:0 0 calc(var(--u)*1.6) calc(var(--u)*1.4)}
.perso{margin-top:calc(var(--u)*3.4);display:flex;flex-wrap:wrap;gap:calc(var(--u)*1.2)}
.chip{display:inline-flex;align-items:center;gap:calc(var(--u)*1);background:var(--pink-soft);color:var(--ink);
  border-radius:99px;padding:calc(var(--u)*1.1) calc(var(--u)*2.2);font-size:calc(var(--u)*2.1);font-weight:500}
.chip b{color:var(--pink-2);font-weight:600}
.chip svg{width:calc(var(--u)*2.4);height:calc(var(--u)*2.4);flex:none;stroke:var(--pink);fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.sub{display:inline-flex;align-items:center;gap:calc(var(--u)*1);margin-top:calc(var(--u)*1.4);font-size:calc(var(--u)*2.3);font-weight:600;color:var(--pink-2)}
.sub svg{width:calc(var(--u)*2.6);height:calc(var(--u)*2.6);stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.chip small{font-size:calc(var(--u)*1.7);color:var(--ink-2);font-weight:400}

/* personnalisation */
.s-perso{grid-template-columns:auto 1fr;gap:calc(var(--u)*7)}
.s-perso h2{margin:0;font-weight:800;font-size:calc(var(--u)*4.6);line-height:1;letter-spacing:-.035em;white-space:nowrap}
.duo{margin-top:calc(var(--u)*3.4);display:grid;grid-template-columns:1fr 1fr;gap:calc(var(--u)*1.6)}
.card{display:flex;flex-direction:column;align-items:flex-start;background:var(--bg-2);border-radius:calc(var(--u)*2.6);padding:calc(var(--u)*2.6)}
.card .when{display:inline-flex;align-items:center;gap:calc(var(--u)*.8);font-size:calc(var(--u)*1.6);font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--pink-2)}
.card .when svg{width:calc(var(--u)*2.2);height:calc(var(--u)*2.2);stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.card h3{margin:calc(var(--u)*1.4) 0 0;font-size:calc(var(--u)*2.7);font-weight:600;line-height:1.2}
.card p{margin:calc(var(--u)*.8) 0 0;font-size:calc(var(--u)*1.9);color:var(--ink-2);line-height:1.4}
.card .pr{margin-top:auto;padding-top:calc(var(--u)*1.6);font-size:calc(var(--u)*6.4);font-weight:800;color:var(--pink);letter-spacing:-.03em;line-height:1}
.cta{margin-top:calc(var(--u)*1.6);display:flex;align-items:center;gap:calc(var(--u)*2.4);background:var(--pink);color:#fff;border-radius:calc(var(--u)*2.6);padding:calc(var(--u)*2.4) calc(var(--u)*2.8)}
.cta .ic{flex:none;width:calc(var(--u)*7);aspect-ratio:1;border-radius:50%;background:rgba(255,255,255,.2);display:grid;place-items:center}
.cta .ic svg{width:calc(var(--u)*3.4);height:calc(var(--u)*3.4);stroke:#fff;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.cta b{display:block;font-size:calc(var(--u)*3);font-weight:800;letter-spacing:-.02em;line-height:1.1}
.cta span{display:block;margin-top:calc(var(--u)*.5);font-size:calc(var(--u)*2);opacity:.92}

/* logo */
.brand{display:flex;align-items:center;gap:calc(var(--u)*1.2)}
.brand img{width:calc(var(--u)*5.6);height:auto}
.brand .w{display:flex;flex-direction:column;line-height:1;gap:calc(var(--u)*.5)}
.brand .w b{font-weight:800;font-size:calc(var(--u)*2.8);letter-spacing:-.01em}
.brand .w b i{font-style:normal;color:var(--pink)}
.brand .w small{font-size:calc(var(--u)*1.5);font-weight:500;color:var(--ink-2)}

.hint{position:absolute;bottom:calc(var(--u)*2.4);left:50%;transform:translateX(-50%);font-size:calc(var(--u)*1.6);color:var(--ink-2);opacity:.75;z-index:5;transition:opacity .6s}
.hint.gone{opacity:0}

/* portrait (au cas où) */
@media (orientation:portrait){
  :root{--u:min(1.5vw,1vh)}
  .slide{grid-template-columns:1fr !important;align-content:center;gap:calc(var(--u)*4);padding-top:calc(var(--u)*12)}
  .ph{height:calc(var(--u)*42) !important;width:calc(var(--u)*33) !important;justify-self:center}
  .hero-pic{height:calc(var(--u)*42) !important;width:calc(var(--u)*33) !important;justify-self:center}
}
@media (prefers-reduced-motion:reduce){
  .slide,.slide.on{transform:none !important;transition:opacity .3s,visibility 0s .3s}
  .slide.on{transition:opacity .3s,visibility 0s}
}

/* ---------- animations ---------- */
@keyframes rv{from{opacity:0;transform:translateY(calc(var(--u)*2.4))}to{opacity:1;transform:none}}
@keyframes pop{0%{opacity:0;transform:scale(.82)}60%{opacity:1;transform:scale(1.04)}100%{opacity:1;transform:scale(1)}}
@keyframes phin{from{opacity:0;transform:scale(.94)}to{opacity:1;transform:none}}
@keyframes kb{from{transform:scale(1.06)}to{transform:scale(1)}}
@keyframes tagin{0%{opacity:0;transform:scale(.3) rotate(-40deg)}70%{opacity:1;transform:scale(1.08) rotate(-4deg)}100%{opacity:1;transform:scale(1) rotate(-8deg)}}
@keyframes tagfloat{0%,100%{transform:rotate(-8deg) translateY(0)}50%{transform:rotate(-4deg) translateY(calc(var(--u)*-.8))}}
@keyframes shine{0%{transform:translateX(-120%)}35%,100%{transform:translateX(120%)}}
.slide .rv{opacity:0}
.slide.on .rv{animation:rv .8s cubic-bezier(.2,.7,.2,1) var(--d,0s) both}
.slide.on .price.rv{animation-name:pop;transform-origin:left bottom;animation-duration:.7s}
.slide.on .ph{animation:phin .9s cubic-bezier(.2,.7,.2,1) both}
.slide.on .ph img{animation:kb 9s ease-out both}
.slide .tag{opacity:0}
.slide.on .tag{animation:tagin .8s cubic-bezier(.3,1.4,.5,1) .7s both,tagfloat 3.4s ease-in-out 1.6s infinite}
.cta{position:relative;overflow:hidden}
.cta::after{content:"";position:absolute;inset:0;background:linear-gradient(110deg,transparent 35%,rgba(255,255,255,.32) 50%,transparent 65%);transform:translateX(-120%);pointer-events:none}
.slide.on .cta::after{animation:shine 4s ease-in-out 1.6s infinite}
@media (prefers-reduced-motion:reduce){
  .slide.on .rv,.slide.on .ph,.slide.on .ph img,.slide.on .tag,.slide.on .cta::after{animation:none !important;opacity:1}
  .slide .tag{opacity:1;transform:rotate(-8deg)}
}

/* délais d’apparition */
.d1{--d:.15s}.d2{--d:.25s}.d3{--d:.3s}.d4{--d:.35s}.d5{--d:.45s}.d6{--d:.5s}.d7{--d:.65s}.d8{--d:.7s}

/* hauteur des logos de paiement */
.pay-twint{height:calc(var(--u)*3.4)}
.pay-mastercard{height:calc(var(--u)*3.6)}
.pay-visa{height:calc(var(--u)*2.4)}
.pay-apple-pay,.pay-google-pay{height:calc(var(--u)*3)}

/* écran 5 : le bloc de droite prend exactement la hauteur de la photo */
.s-perso > .ph + div{height:calc(var(--u)*58);display:flex;flex-direction:column}
.s-perso .duo{flex:1}