/* =========================================================
   MY SWEET ELSYE — Accueil · feuille de style
   Univers « candy arcade » · Poppins + Archivo Black
   Seules couleurs autorisées : les variables ci-dessous.
   ========================================================= */
:root{
  --grape-grad: linear-gradient(45deg,#e30ba6 0%,#5b00ed 100%);
  --grape:   #5b00ed;
  --concord: #3f0791;
  --bubble:  #e30ba6;
  --lilac:   #dad9ff;
  --soft:    #cac4f4;
  --sky:     #bfefff;
  --sky-grad: linear-gradient(0deg,#d4beff 50%,#bfedfe 100%);
  --gold:    #ffc83d;
  --night:   #0d0518;
  --ink-soft:#5a4a86;
  --white:   #ffffff;
  /* Ajouts techniques (drapeau du sceau « Fabriqué en France » + ombre de marque) */
  --fr-blue: #0055a4;
  --fr-red:  #ef4135;
  --shadow: 0 20px 60px rgba(0,0,0,.10);
  --cut: 25px 25px 25px 0;
  --ease: cubic-bezier(.2,.8,.2,1);
  --bounce: cubic-bezier(.34,1.56,.64,1);
  --out: cubic-bezier(.16,1,.3,1);
}

/* ---------- Base ---------- */
*,*::before,*::after{box-sizing:border-box}
*{margin:0}
html{-webkit-text-size-adjust:100%}
body{font-family:"Poppins",system-ui,sans-serif;font-weight:500;color:var(--concord);background:var(--lilac);overflow-x:clip;-webkit-font-smoothing:antialiased;line-height:1.5}
img,svg{display:block;max-width:100%}
a{color:var(--grape);text-decoration-thickness:2px;text-underline-offset:3px}
a:hover{color:var(--bubble)}
button,input{font:inherit;color:inherit}
:focus-visible{outline:3px solid var(--gold);outline-offset:3px;border-radius:8px}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.wrap{width:min(1180px,100% - 40px);margin-inline:auto}
.eyebrow{font-family:"Archivo Black",sans-serif;font-size:.74rem;letter-spacing:.16em;text-transform:uppercase;color:var(--bubble)}
.h2{font-weight:800;font-size:clamp(2.3rem,6.4vw,4.6rem);line-height:.92;letter-spacing:-.045em;text-transform:uppercase;color:var(--concord);text-wrap:balance}
.lead{color:var(--ink-soft);font-size:1.05rem;line-height:1.65;max-width:56ch;text-wrap:pretty}
.sec-head{display:grid;gap:14px;justify-items:center;text-align:center;margin-bottom:44px}

/* Boutons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.6em;min-height:52px;padding:0 28px;border:0;border-radius:20px;background:var(--concord);color:var(--white);font-weight:800;font-size:.95rem;letter-spacing:.01em;text-transform:uppercase;text-decoration:none;cursor:pointer;transition:transform .45s var(--bounce)}
.btn:hover{color:var(--white)}
.btn:active{transform:scale(.96)}
.btn--grad{background:var(--grape-grad)}
.btn--white{background:var(--white);color:var(--concord)}
.btn--white:hover{color:var(--bubble)}
.btn--block{width:100%}
.btn .arr{transition:transform .35s var(--bounce)}
.btn:hover .arr{transform:translateX(4px)}

/* Images manquantes : rayures + nom du fichier attendu */
.ph{position:relative;overflow:hidden;background:var(--soft)}
span.ph{display:block}
.ph>img{width:100%;height:100%;object-fit:cover}
.ph.is-missing{background:repeating-linear-gradient(135deg,var(--lilac) 0 10px,var(--soft) 10px 20px)}
.ph.is-missing>img:not(.alt){opacity:0}
.ph.is-missing::after{content:attr(data-file);position:absolute;left:10px;bottom:10px;max-width:calc(100% - 20px);padding:3px 8px;border-radius:6px;background:var(--white);color:var(--concord);font:600 11px/1.3 ui-monospace,Menlo,monospace;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* Révélation générique au défilement */
.motion [data-reveal]{opacity:0;transform:translateY(34px);transition:opacity .9s var(--ease),transform .9s var(--ease);transition-delay:calc(var(--d,0) * 1s)}
.motion [data-reveal].in{opacity:1;transform:none}

/* =========================================================
   01 · BANDEAU + EN-TÊTE
   ========================================================= */
.topbar{background:var(--night);color:var(--white);text-align:center;font-size:.78rem;font-weight:700;padding:7px 16px;line-height:1.35}
.topbar b{color:var(--gold)}
.header{position:sticky;top:0;z-index:50;background:var(--grape);color:var(--white);transition:box-shadow .3s}
.header.is-scrolled{box-shadow:0 10px 30px rgba(0,0,0,.16)}
.header__in{display:flex;align-items:center;gap:24px;min-height:70px}
.logo{display:grid;line-height:1;color:var(--white);text-decoration:none}
.logo b{font-weight:900;font-size:1.15rem;letter-spacing:-.03em}
.logo span{font-family:"Archivo Black";font-size:.52rem;letter-spacing:.5em;margin-top:3px}
.logo:hover{color:var(--white)}
.nav{display:flex;gap:28px;margin-inline:auto}
.nav a{position:relative;color:var(--white);text-decoration:none;font-weight:800;font-size:.8rem;text-transform:uppercase;letter-spacing:.01em;padding:6px 0}
.nav a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:3px;border-radius:3px;background:var(--gold);transform:scaleX(0);transform-origin:right;transition:transform .4s var(--ease)}
.nav a:hover::after,.nav a:focus-visible::after{transform:scaleX(1);transform-origin:left}
.header__actions{display:flex;align-items:center;gap:8px}
.btn-compose{min-height:42px;padding:0 20px;border-radius:52px;background:var(--white);color:var(--concord);font-weight:700;font-size:.85rem;text-decoration:none;display:inline-flex;align-items:center;transition:transform .45s var(--bounce)}
.btn-compose:hover{color:var(--bubble)}
.icon-btn{position:relative;display:grid;place-items:center;width:44px;height:44px;border:0;background:none;color:var(--white);cursor:pointer;border-radius:50%}
.icon-btn svg{width:22px;height:22px}
.cart-count{position:absolute;top:4px;right:2px;min-width:18px;height:18px;padding:0 4px;border-radius:9px;background:var(--gold);color:var(--concord);font-size:.66rem;font-weight:800;display:grid;place-items:center}
.cart-count.bump{animation:bump .6s var(--bounce)}
@keyframes bump{0%{transform:scale(1)}35%{transform:scale(1.6) rotate(-10deg)}100%{transform:scale(1)}}
.burger{display:none}
@media (max-width:1079px){
  .burger{display:grid}
  .btn-compose{display:none}
  .nav{position:absolute;left:0;right:0;top:100%;flex-direction:column;gap:0;padding:8px 20px 20px;background:var(--grape);transform:translateY(-8px);opacity:0;visibility:hidden;transition:opacity .3s,transform .3s var(--ease),visibility .3s}
  .nav a{padding:14px 0;font-size:1rem;border-bottom:1px solid color-mix(in srgb,var(--white) 18%,transparent)}
  .header.nav-open .nav{opacity:1;transform:none;visibility:visible}
  .header__in{gap:8px}
  .logo{margin-right:auto}
}

/* =========================================================
   02 · HÉROS
   ========================================================= */
.hero{position:relative;overflow:hidden;background:var(--grape-grad);color:var(--white);padding:56px 0 170px}
.hero__grid{position:relative;z-index:2;display:grid;grid-template-columns:1.05fr 1fr;gap:56px;align-items:center}
.hero__eyebrow{display:flex;align-items:center;gap:10px;font-family:"Archivo Black";font-size:.8rem;letter-spacing:.08em;text-transform:uppercase}
.hero__eyebrow svg{width:14px;height:14px;fill:var(--white)}
.hero h1{font-weight:800;font-size:clamp(2.7rem,6.6vw,5.6rem);line-height:.93;letter-spacing:-.05em;margin:18px 0 26px}
.hero h1 .line{display:block;overflow:hidden;padding-bottom:.06em}
.hero h1 .line>span{display:inline-block}
.motion .hero h1 .line>span{transform:translateY(110%);transition:transform 1s var(--ease);transition-delay:calc(.25s + var(--i) * .13s)}
.motion .is-ready .hero h1 .line>span{transform:none}
.hero__q{font-weight:700;font-size:1rem;margin-bottom:12px}
.choices{border:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;max-width:440px}
.choice{position:relative;cursor:pointer}
.choice input{position:absolute;opacity:0;inset:0;cursor:pointer}
.choice span{display:flex;align-items:center;gap:12px;min-height:46px;padding:0 18px;border:2px solid var(--white);border-radius:52px;font-weight:600;transition:background .25s,color .25s,transform .4s var(--bounce)}
.choice span::before{content:"";width:16px;height:16px;border:2px solid currentColor;border-radius:50%;flex:none;transition:box-shadow .25s}
.choice input:checked+span{background:var(--white);color:var(--concord)}
.choice input:checked+span::before{box-shadow:inset 0 0 0 3px var(--white),inset 0 0 0 10px var(--concord)}
.choice input:focus-visible+span{outline:3px solid var(--gold);outline-offset:3px}
.choice:hover span{transform:translateY(-2px)}
.hero__cta{display:flex;flex-wrap:wrap;align-items:center;gap:22px;margin-top:22px}
.seals{display:flex;gap:10px}
.seal{position:relative;width:84px;height:84px;display:grid;place-items:center;text-align:center;color:var(--concord);font-weight:800;font-size:.6rem;line-height:1.15;text-transform:uppercase}
.seal__bg{position:absolute;inset:0;width:100%;height:100%;fill:var(--white);filter:drop-shadow(0 8px 14px rgba(0,0,0,.12))}
.motion .seal__bg{animation:spin 40s linear infinite}
.seal>span{position:relative;display:grid;justify-items:center;gap:3px}
.flag{display:flex;width:18px;height:12px;border-radius:2px;overflow:hidden}
.flag i{flex:1}.flag i:nth-child(1){background:var(--fr-blue)}.flag i:nth-child(2){background:var(--white);box-shadow:inset 0 0 0 1px var(--lilac)}.flag i:nth-child(3){background:var(--fr-red)}
@keyframes spin{to{transform:rotate(360deg)}}

/* Éventail de photos */
.fan{position:relative;width:100%;max-width:580px;aspect-ratio:1/.95;justify-self:center}
.fan__item{position:absolute;will-change:transform}
.fan__photo{position:relative;border-radius:var(--cut);box-shadow:0 24px 50px rgba(0,0,0,.22);transform:rotate(var(--r));transition:transform .6s var(--bounce)}
.fan__photo .ph{border-radius:var(--cut);width:100%;height:100%}
.motion .fan__photo{opacity:0;transform:translateY(80px) rotate(calc(var(--r) * 3)) scale(.85);transition:opacity .8s var(--ease),transform 1.1s var(--bounce);transition-delay:calc(var(--i) * .12s)}
.motion .is-ready .fan__photo{opacity:1;transform:rotate(var(--r))}
.is-ready .fan__item:hover .fan__photo{transform:rotate(0) scale(1.04);transition-delay:0s}
.fan__tag{position:absolute;left:14px;bottom:14px;z-index:2;padding:5px 11px;border-radius:52px;background:var(--white);color:var(--concord);font-family:"Archivo Black";font-size:.62rem;letter-spacing:.06em;text-transform:uppercase;transform:rotate(-3deg);box-shadow:0 6px 14px rgba(0,0,0,.12)}
.fan__item--a{left:0;top:13%;width:33%;z-index:1}.fan__item--a .ph{aspect-ratio:3/4}
.fan__item--b{left:21%;top:2%;width:45%;z-index:3}.fan__item--b .ph{aspect-ratio:4/5}
.fan__item--c{left:67%;top:0;width:30%;z-index:2}.fan__item--c .ph{aspect-ratio:4/5}
.fan__item--d{left:7%;top:63%;width:29%;z-index:4}.fan__item--d .ph{aspect-ratio:1}
.fan__item--e{left:62%;top:55%;width:33%;z-index:4}.fan__item--e .ph{aspect-ratio:1}

/* Formes flottantes */
.float{position:absolute;z-index:1;pointer-events:none}
.float svg{width:100%;height:100%}
.motion .float{animation:drift var(--t,14s) ease-in-out infinite alternate;animation-delay:var(--dl,0s)}
@keyframes drift{0%{transform:translate(0,0) rotate(0)}50%{transform:translate(14px,-18px) rotate(14deg)}100%{transform:translate(-10px,10px) rotate(-10deg)}}
.loop{position:absolute;z-index:1;pointer-events:none;fill:none;stroke:color-mix(in srgb,var(--bubble) 45%,var(--white));stroke-width:3;stroke-linecap:round}
.motion .loop path{stroke-dasharray:1;stroke-dashoffset:1;animation:draw 2.4s var(--ease) .6s forwards}
@keyframes draw{to{stroke-dashoffset:0}}

/* Sol en perspective */
.floor{position:absolute;left:0;right:0;bottom:0;height:170px;perspective:260px;overflow:hidden;z-index:0;-webkit-mask-image:linear-gradient(to bottom,transparent,#000 45%);mask-image:linear-gradient(to bottom,transparent,#000 45%)}
.floor::after{content:"";position:absolute;inset:0;background:linear-gradient(to bottom,transparent,color-mix(in srgb,var(--concord) 55%,transparent))}
.floor__grid{position:absolute;left:-60%;right:-60%;top:0;height:260%;transform-origin:50% 0;transform:rotateX(72deg);background-image:linear-gradient(color-mix(in srgb,var(--white) 38%,transparent) 1px,transparent 1px),linear-gradient(90deg,color-mix(in srgb,var(--white) 38%,transparent) 1px,transparent 1px);background-size:64px 64px}
.motion .floor__grid{animation:floor 3.5s linear infinite}
@keyframes floor{to{transform:rotateX(72deg) translateY(64px)}}

@media (max-width:899px){
  .hero{padding:36px 0 130px}
  .hero__grid{grid-template-columns:1fr;gap:28px}
  .hero__text{display:contents}
  .hero__head{order:1}.fan{order:2;max-width:440px}.hero__pick{order:3}
  .floor{height:120px}
}

/* =========================================================
   03 · CATÉGORIES
   ========================================================= */
.cats{padding:40px 0 10px}
.cats__list{display:flex;flex-wrap:wrap;justify-content:center;gap:18px 40px;list-style:none;padding:0}
.cat{display:grid;justify-items:center;gap:10px;text-decoration:none;color:var(--concord);font-family:"Archivo Black";font-size:.7rem;letter-spacing:.08em;text-transform:uppercase}
.cat .ph{width:88px;height:88px;border-radius:50%;border:4px solid var(--white);box-shadow:var(--shadow);transition:transform .5s var(--bounce)}
.cat:hover{color:var(--bubble)}
.cat:hover .ph{transform:translateY(-6px) rotate(-6deg) scale(1.06)}
.cat .ph.is-missing::after{content:none}

/* =========================================================
   04 · BOUTIQUE — cartes produit
   ========================================================= */
.shop{padding:80px 0 100px}
.filters{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin:-16px 0 36px}
.pill{min-height:44px;padding:0 20px;border-radius:52px;border:2px solid var(--concord);background:transparent;color:var(--concord);font-weight:700;cursor:pointer;transition:background .25s,color .25s,transform .4s var(--bounce)}
.pill:hover{transform:translateY(-2px)}
.pill[aria-pressed="true"]{background:var(--concord);color:var(--white)}
.grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:22px}
.card{display:flex;flex-direction:column;background:var(--white);border-radius:25px;padding:12px;box-shadow:var(--shadow);transform-style:preserve-3d;transition:transform .5s var(--ease)}
.card[hidden]{display:none}
.card.tilting{transition:transform .12s linear}
.card__media{aspect-ratio:4/5;border-radius:var(--cut)}
.card__media>img{position:absolute;inset:0}
.card__media .alt{opacity:0;transform:scale(1.06);transition:opacity .5s var(--ease),transform .7s var(--ease)}
.card:hover .card__media .alt,.card__media.show-alt .alt{opacity:1;transform:none}
.badge{position:absolute;z-index:2;left:10px;top:10px;padding:4px 9px;border-radius:6px;background:var(--bubble);color:var(--white);font-weight:800;font-size:.72rem}
.card__body{display:flex;flex-direction:column;gap:6px;flex:1;padding:14px 4px 4px}
.price{display:flex;align-items:baseline;gap:8px;font-size:1.25rem;font-weight:800}
.price s{font-size:.8rem;font-weight:600;color:var(--ink-soft)}
.card h3{font-size:1rem;line-height:1.2;font-weight:800;text-transform:uppercase;letter-spacing:-.01em}
.card h3 a{color:var(--concord);text-decoration:none}
.card h3 a:hover{color:var(--bubble)}
.card h3 a::after{content:"";position:absolute;inset:0}
.card{position:relative}
.card__desc{font-size:.85rem;line-height:1.5;color:var(--ink-soft);margin-bottom:10px}
.card .add{position:relative;z-index:2;margin-top:auto;font-size:.82rem}
.card:hover .add{animation:boing .7s var(--bounce)}
@keyframes boing{0%{transform:scale(1)}30%{transform:scale(1.07,.93)}55%{transform:scale(.97,1.04)}100%{transform:scale(1)}}
.shop__more{display:flex;justify-content:center;margin-top:44px}
@media (max-width:1023px){.grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:719px){
  .grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
  .card{padding:8px;border-radius:20px}
  .card__desc{display:none}
  .price{font-size:1.05rem}
  .card h3{font-size:.82rem}
  .card .add{font-size:.72rem;padding:0 10px;min-height:44px;border-radius:14px}
}

/* =========================================================
   05 · ALLUMER LA LAMPE (interrupteur)
   ========================================================= */
.lightup{position:relative;overflow:hidden;background:var(--soft)}
.lightup__night{position:absolute;inset:0;background:radial-gradient(ellipse at 30% 50%,var(--concord) 0%,var(--night) 70%);opacity:0;transition:opacity 1.2s var(--out)}
.lightup__in{position:relative;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:center;gap:64px;padding-block:110px}
.lightup__stage{position:relative;justify-self:center}
.lightup__halo{position:absolute;left:50%;top:40%;width:190%;aspect-ratio:1;translate:-50% -50%;border-radius:50%;background:radial-gradient(circle,color-mix(in srgb,var(--gold) 80%,transparent) 0%,color-mix(in srgb,var(--gold) 30%,transparent) 30%,transparent 62%);opacity:0;transform:scale(.4);transition:opacity 1.2s var(--out),transform 1.2s var(--out);pointer-events:none}
.lightup__frame{position:relative;width:min(420px,40vw);aspect-ratio:3/4;border-radius:var(--cut);box-shadow:var(--shadow)}
.lightup__frame img{position:absolute;inset:0}
.lightup__frame .on{clip-path:circle(0% at 50% 40%);transition:clip-path 1.2s var(--out)}
.lightup.is-lit .lightup__frame .on{clip-path:circle(100% at 50% 40%)}
.lightup.is-lit .lightup__night{opacity:1}
.lightup.is-lit .lightup__halo{opacity:1;transform:scale(1.12)}
.switch{display:inline-flex;align-items:center;gap:12px;margin-bottom:26px;min-height:44px;padding:6px 18px 6px 6px;border:0;border-radius:52px;background:var(--white);color:var(--concord);font-family:"Archivo Black";font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;cursor:pointer;box-shadow:0 10px 24px rgba(0,0,0,.12);transition:transform .45s var(--bounce)}
.switch:hover{transform:scale(1.05)}
.switch:active{transform:scale(.96)}
.switch__track{position:relative;width:58px;height:32px;border-radius:52px;background:var(--lilac)}
.switch__knob{position:absolute;left:4px;top:4px;width:24px;height:24px;border-radius:50%;background:var(--concord);transition:transform .5s var(--bounce),background .3s}
.lightup.is-lit .switch__knob{transform:translateX(26px);background:var(--gold)}
.lu-lines{display:grid;font-weight:800;font-size:clamp(2.1rem,4.6vw,4rem);line-height:.98;letter-spacing:-.045em}
.lu-line{grid-area:1/1;text-wrap:balance;transition:opacity .8s var(--out),transform .9s var(--out)}
.lu-line em{font-style:normal}
.lu-l1{color:var(--concord)}
.lu-l1 em{color:var(--bubble)}
.lu-l2{color:var(--white);opacity:0;transform:translateY(24px)}
.lu-l2 em{color:var(--gold)}
.lightup.is-lit .lu-l1{opacity:0;transform:translateY(-24px)}
.lightup.is-lit .lu-l2{opacity:1;transform:none;transition-delay:.25s}
.lu-l3{margin-top:30px;display:grid;gap:20px;justify-items:start}
.lu-l3 p{color:var(--ink-soft);font-size:1.05rem;max-width:40ch;transition:color .8s var(--out)}
.lightup.is-lit .lu-l3 p{color:var(--lilac)}
@media (max-width:959px){
  .lightup__in{grid-template-columns:minmax(0,1fr);gap:32px;padding-block:72px}
  .lightup__frame{width:min(320px,78vw)}
}

/* =========================================================
   06 · CONFIGURATEUR (sans épinglage)
   ========================================================= */
.config{background:var(--sky-grad);padding:100px 0;overflow:hidden}
.config__grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-areas:"intro stage" "pick stage";column-gap:64px;row-gap:6px;align-items:center}
.config__intro{grid-area:intro;align-self:end}
.config__pick{grid-area:pick;align-self:start}
.steps{list-style:none;padding:0;display:grid;gap:10px;margin:26px 0}
.steps li{display:flex;align-items:center;gap:14px;padding:13px 18px;border-radius:18px;background:color-mix(in srgb,var(--white) 62%,transparent)}
.steps b{display:grid;place-items:center;flex:none;width:34px;height:34px;border-radius:50%;background:var(--concord);color:var(--white);font-weight:800}
.steps strong{display:block;font-weight:700}
.steps small{color:var(--ink-soft);font-size:.85rem}
.motion .steps li{opacity:0;transform:translateX(-28px);transition:opacity .6s var(--ease),transform .8s var(--bounce);transition-delay:calc(.25s + var(--i) * .18s)}
.motion .config.in .steps li{opacity:1;transform:none}
.config__price{display:flex;align-items:baseline;gap:10px;margin-bottom:6px}
.config__price strong{font-size:2rem;font-weight:800;letter-spacing:-.03em}
.config__price s{color:var(--ink-soft);font-weight:600}
.config__label{font-family:"Archivo Black";font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;margin:18px 0 10px}
.models{display:flex;flex-wrap:wrap;gap:8px}
.models .pill{min-height:44px;padding:0 18px;font-size:.88rem}
.swatches{display:flex;flex-wrap:wrap;gap:10px}
.sw{width:44px;height:44px;border-radius:50%;border:3px solid var(--white);background:var(--c);box-shadow:0 6px 16px rgba(0,0,0,.12);cursor:pointer;transition:transform .4s var(--bounce)}
.sw:hover{transform:translateY(-4px) scale(1.08)}
.sw[aria-pressed="true"]{outline:3px solid var(--concord);outline-offset:2px}
.config__current{margin-top:12px;font-weight:600;font-size:.92rem;min-height:1.5em}
.config__cta{margin-top:20px}
.stage-wrap{grid-area:stage;justify-self:center;width:min(440px,100%);display:grid;gap:12px}
.motion .stage-wrap{opacity:0;transform:translateX(70px) rotate(7deg);transition:opacity .8s var(--ease),transform 1.1s var(--bounce)}
.motion .config.in .stage-wrap{opacity:1;transform:none}
.stage{position:relative;aspect-ratio:3/4;border-radius:var(--cut);overflow:hidden;background:var(--white);box-shadow:var(--shadow)}
.stage-main,.stage-photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:opacity .35s var(--ease)}
.stage-main.swapping,.stage-photo img.swapping{opacity:0}
.stage-photo{position:absolute;inset:0;opacity:0;transition:opacity .45s var(--ease)}
.stage.has-photo .stage-photo{opacity:1}
.stage-note{position:absolute;z-index:2;left:12px;top:12px;padding:6px 12px;border-radius:52px;background:var(--white);color:var(--concord);font-weight:700;font-size:.75rem;box-shadow:0 6px 14px rgba(0,0,0,.12);opacity:0;transform:translateY(-6px);transition:opacity .4s var(--ease),transform .5s var(--bounce)}
.stage.has-photo .stage-note{opacity:1;transform:none}
.stage-cap{font-family:"Archivo Black";font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;text-align:center;color:var(--concord)}
@media (max-width:959px){
  .config{padding:72px 0}
  .config__grid{grid-template-columns:minmax(0,1fr);grid-template-areas:"intro" "stage" "pick";row-gap:32px}
  .stage-wrap{width:min(360px,100%)}
  .motion .stage-wrap{transform:translateY(40px) rotate(4deg)}
  .swatches{display:grid;grid-template-columns:repeat(4,48px);gap:14px 18px}
  .sw{width:48px;height:48px}
}

/* =========================================================
   07 · RÉASSURANCE — tickets + sceaux festonnés
   ========================================================= */
.reassure{position:relative;background:var(--lilac);padding:72px 0}
.reassure__list{list-style:none;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px}
.ri{position:relative;display:grid;justify-items:start;gap:16px;padding:22px 22px 24px;border-radius:var(--cut);background:var(--white);box-shadow:var(--shadow);transform:rotate(var(--tilt));transition:transform .5s var(--bounce)}
.ri::after{content:"";position:absolute;left:22px;right:22px;top:122px;border-top:2px dashed var(--lilac)}
.ri:hover{transform:rotate(0) translateY(-8px)}
.ri__ico{position:relative;display:grid;place-items:center;width:80px;height:80px;margin-bottom:12px}
.ri__ico .seal__bg{fill:var(--tint);filter:none}
.motion .ri__ico .seal__bg{animation-duration:30s}
.ri:hover .ri__ico .seal__bg{animation-duration:6s}
.ri__line{position:relative;width:36px;height:36px;fill:none;stroke:var(--concord);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;transition:transform .5s var(--bounce)}
.ri:hover .ri__line{transform:scale(1.15) rotate(-8deg)}
.ri strong{display:block;font-weight:800;font-size:1.08rem;line-height:1.15;letter-spacing:-.02em;text-wrap:balance}
.ri small{display:block;margin-top:4px;color:var(--ink-soft);font-size:.85rem}
.motion .ri{opacity:0;transform:translateY(40px) rotate(calc(var(--tilt) * -4)) scale(.92);transition:opacity .6s var(--ease),transform .9s var(--bounce);transition-delay:calc(var(--i) * .16s)}
.motion .reassure.in .ri{opacity:1;transform:rotate(var(--tilt))}
.motion .reassure.in .ri:hover{transform:rotate(0) translateY(-8px);transition-delay:0s}
.motion .ri__line *{stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 1.1s var(--ease);transition-delay:calc(.35s + var(--i) * .16s)}
.motion .reassure.in .ri__line *{stroke-dashoffset:0}
@media (max-width:899px){
  .reassure{padding:56px 0}
  .reassure__list{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px 12px}
  .ri{padding:16px 14px 18px;gap:12px}
  .ri::after{left:14px;right:14px;top:98px}
  .ri__ico{width:64px;height:64px}
  .ri__line{width:30px;height:30px}
  .ri strong{font-size:.95rem}
  .ri small{font-size:.78rem}
}

/* =========================================================
   08 · CROCHET — galerie horizontale
   ========================================================= */
.crochet{background:var(--sky);padding:90px 0 70px;overflow:hidden}
.crochet .sec-head{margin-bottom:10px}
.polas-vp{overflow:hidden}
.polas{display:flex;gap:40px;width:max-content;list-style:none;padding:44px max(20px,calc((100vw - 1180px) / 2))}
.pola-item{flex:none;width:clamp(230px,23vw,290px)}
.pola{display:block;background:var(--white);padding:12px 12px 16px;border-radius:10px;box-shadow:var(--shadow);transform:rotate(var(--r));color:var(--concord);text-decoration:none}
.pola .ph{aspect-ratio:1;border-radius:5px}
.pola__cap{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:12px 4px 0;font-weight:700;font-size:.95rem}
.pola__cap span{padding:3px 10px;border-radius:52px;background:var(--lilac);color:var(--bubble);font-weight:800;font-size:.8rem;white-space:nowrap}
.pola--cta{display:grid;place-items:center;aspect-ratio:1/1.16;background:var(--grape-grad);color:var(--white);font-weight:800;font-size:1.4rem;line-height:1.1;text-align:center;padding:24px}
.pola--cta:hover{color:var(--white)}
.crochet__hint{text-align:center;color:var(--ink-soft);font-size:.9rem}
@media (max-width:959px){
  .polas-vp{overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none}
  .polas-vp::-webkit-scrollbar{display:none}
  .polas{gap:22px;padding:36px 20px}
  .pola-item{width:min(250px,70vw);scroll-snap-align:center}
}

/* =========================================================
   09 · NOTRE HISTOIRE
   ========================================================= */
.story{background:var(--lilac);padding:110px 0}
.story__grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:64px;align-items:center}
.story__photo{position:relative;aspect-ratio:4/5;border-radius:var(--cut);box-shadow:var(--shadow)}
.story__mask{position:absolute;inset:0;z-index:2;background:var(--grape-grad);transform-origin:50% 0;transform:scaleY(0)}
.motion .story__mask{transform:scaleY(1);transition:transform 1.2s cubic-bezier(.7,0,.2,1)}
.motion .story__photo>img{transform:scale(1.18);transition:transform 1.8s var(--ease)}
.motion .story.in .story__mask{transform:scaleY(0)}
.motion .story.in .story__photo>img{transform:none}
.story__text{display:grid;gap:18px;justify-items:start}
.story__text p{color:var(--ink-soft);line-height:1.7;max-width:54ch}
.sign{display:flex;align-items:center;gap:16px}
.sign svg{width:200px;height:74px;overflow:visible}
.sign text{font-family:"Allura",cursive;font-size:64px;fill:var(--concord);stroke:var(--concord);stroke-width:1}
.motion .sign text{stroke-dasharray:420;stroke-dashoffset:420;fill-opacity:0;transition:stroke-dashoffset 2.4s var(--ease) .5s,fill-opacity .8s 2.2s}
.motion .story.in .sign text{stroke-dashoffset:0;fill-opacity:1}
.sign small{display:block;color:var(--ink-soft);font-size:.82rem}
@media (max-width:899px){.story{padding:72px 0}.story__grid{grid-template-columns:1fr;gap:40px}.story__photo{max-width:420px}}

/* =========================================================
   10 · NEWSLETTER
   ========================================================= */
.news{position:relative;overflow:hidden;background:var(--grape-grad);color:var(--white);padding:110px 0;text-align:center}
.news__in{position:relative;z-index:2;display:grid;justify-items:center;gap:16px}
.news .eyebrow{color:var(--gold)}
.news .h2{color:var(--white)}
.news p{max-width:44ch}
.news__form{display:flex;gap:10px;width:min(520px,100%);margin-top:10px}
.news__form input{flex:1;min-width:0;min-height:56px;padding:0 20px;border:0;border-radius:20px;background:var(--white);color:var(--concord)}
.news__form input::placeholder{color:var(--ink-soft)}
.news__ok{font-weight:700;min-height:1.5em}
.blob{position:absolute;z-index:1;pointer-events:none}
.blob svg{width:100%;height:100%}
.motion .blob{animation:drift var(--t,22s) ease-in-out infinite alternate}
@media (max-width:560px){.news{padding:80px 0}.news__form{flex-direction:column}}

/* =========================================================
   11 · PIED DE PAGE
   ========================================================= */
.footer{background:var(--night);color:var(--white);padding:64px 0 28px;font-size:.92rem}
.footer__grid{display:grid;grid-template-columns:1.3fr 1fr 1fr;gap:40px}
.footer h3{font-family:"Archivo Black";font-size:.74rem;letter-spacing:.14em;text-transform:uppercase;color:var(--gold);margin-bottom:14px}
.footer ul{list-style:none;padding:0;display:grid;gap:8px}
.footer a{color:var(--white);text-decoration:none}
.footer a:hover{color:var(--gold)}
.footer p,.footer li{color:color-mix(in srgb,var(--white) 82%,transparent)}
.footer__bottom{margin-top:44px;padding-top:20px;border-top:1px solid color-mix(in srgb,var(--white) 15%,transparent);font-size:.8rem;color:color-mix(in srgb,var(--white) 70%,transparent)}
@media (max-width:759px){.footer__grid{grid-template-columns:1fr}}

/* ---------- Mouvement réduit : tout est visible, rien ne bouge ---------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition-duration:.01ms!important;transition-delay:0s!important;scroll-behavior:auto!important}
}