/* ==========================================================================
   Cherry PXL Store — Home Studio Goods
   Tokens repris du design system Figma (Collection 01 / 2026).
   ========================================================================== */

:root{
  --cpxl-bg:#FAFAFA;
  --cpxl-surface:#F5F6F8;
  --cpxl-photo:#EFE7DC;
  --cpxl-ink:#1A1A1A;
  --cpxl-ink-deep:#141414;
  --cpxl-muted:#716A61;
  --cpxl-line:rgba(26,26,26,.16);
  --cpxl-cherry:#DB073D;
  --cpxl-turquoise:#07DBA5;
  --cpxl-font:'Manrope',system-ui,-apple-system,"Segoe UI",sans-serif;
  --cpxl-mono:'IBM Plex Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
  --cpxl-ease:cubic-bezier(.22,1,.36,1);
  --cpxl-pad:clamp(20px,4vw,64px);
}

/* --- reset local, sans toucher à l'admin bar --- */
body.cpxl-home{margin:0;background:var(--cpxl-bg);color:var(--cpxl-ink);font-family:var(--cpxl-font);font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden}
body.cpxl-home *,body.cpxl-home *::before,body.cpxl-home *::after{box-sizing:border-box}
body.cpxl-home img{max-width:100%;display:block}
body.cpxl-home a{color:inherit;text-decoration:none}
body.cpxl-home h1,body.cpxl-home h2,body.cpxl-home h4,body.cpxl-home p,body.cpxl-home ul{margin:0;padding:0}
body.cpxl-home ul{list-style:none}
/* l'attribut hidden doit primer sur les display:flex des composants */
body.cpxl-home [hidden]{display:none !important}
body.cpxl-home button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}

.cpxl-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.cpxl-skip{position:absolute;left:-9999px;top:0;z-index:200;background:var(--cpxl-ink);color:var(--cpxl-bg);padding:12px 18px}
.cpxl-skip:focus{left:12px;top:12px}

.cpxl-mono{font-family:var(--cpxl-mono);font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--cpxl-muted);font-weight:400}
.cpxl-accent{color:var(--cpxl-cherry)}
.cpxl-center{text-align:center}
.cpxl-arr{display:inline-block;transition:transform .35s var(--cpxl-ease)}

/* ---------- HEADER ---------- */
.cpxl-header{position:fixed;inset:0 0 auto 0;z-index:90;transition:background .4s var(--cpxl-ease),box-shadow .4s var(--cpxl-ease)}
.cpxl-header__in{display:flex;align-items:center;justify-content:space-between;height:64px;padding:0 var(--cpxl-pad);gap:24px}
.cpxl-header[data-state="solid"]{background:rgba(250,250,250,.94);backdrop-filter:blur(8px);box-shadow:0 1px 0 var(--cpxl-line)}
.cpxl-header[data-state="transparent"]{color:var(--cpxl-ink)}
.cpxl-header__left{display:flex;align-items:center;gap:40px}
.cpxl-header__right{display:flex;align-items:center;gap:20px}
.cpxl-logo{display:inline-flex;align-items:center;gap:10px;color:var(--cpxl-ink)}
.cpxl-logo__wm{font-weight:800;font-size:13.5px;letter-spacing:.1em}
.cpxl-logo__wm sup{font-weight:400;font-size:.62em}
.cpxl-nav{display:flex;gap:32px}
.cpxl-nav a{font-size:12px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;padding:12px 0}
.cpxl-nav a:hover,.cpxl-nav a:focus-visible{color:var(--cpxl-cherry)}
.cpxl-bag{font-size:12px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;padding:12px 4px;min-height:44px}
.cpxl-bag:hover{color:var(--cpxl-cherry)}
.cpxl-bag__count{color:var(--cpxl-cherry)}
.cpxl-bag__count.is-zero{color:inherit}
.cpxl-iconbtn{display:grid;place-items:center;width:44px;height:44px;color:inherit}
.cpxl-iconbtn:hover{color:var(--cpxl-cherry)}
.cpxl-burger{display:none;flex-direction:column;gap:5px;width:44px;height:44px;align-items:center;justify-content:center}
.cpxl-burger span{display:block;width:20px;height:2px;background:currentColor}
@media(max-width:900px){
  .cpxl-nav{display:none}
  .cpxl-burger{display:flex}
}
@media(max-width:700px){
  .cpxl-header__in{gap:8px;padding:0 16px}
  .cpxl-header__right{gap:6px}
  .cpxl-logo{gap:8px}
  .cpxl-logo__wm{font-size:12px;letter-spacing:.06em;white-space:nowrap}
  .cpxl-bag{font-size:11px;letter-spacing:.1em;white-space:nowrap;padding:12px 2px}
  .cpxl-iconbtn{width:38px}
  .cpxl-burger{width:38px}
}

/* recherche */
.cpxl-search{background:var(--cpxl-bg);border-top:1px solid var(--cpxl-line);border-bottom:1px solid var(--cpxl-line);padding:22px var(--cpxl-pad) 26px}
.cpxl-search__form{display:flex;align-items:center;gap:14px;padding-bottom:14px;border-bottom:1px solid var(--cpxl-line)}
.cpxl-search__form input[type="search"]{flex:1;border:0;background:none;font-family:var(--cpxl-font);font-size:clamp(18px,2.4vw,24px);font-weight:500;letter-spacing:-.01em;color:var(--cpxl-ink);outline:none;min-width:0}
.cpxl-search__res{margin-top:14px;display:flex;flex-direction:column}
.cpxl-search__res a{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:13px 0;border-bottom:1px solid var(--cpxl-line)}
.cpxl-search__res a:hover{color:var(--cpxl-cherry)}
.cpxl-search__res .n{font-weight:800;font-size:15px;letter-spacing:.05em;text-transform:uppercase}

/* ---------- MENU MOBILE ---------- */
.cpxl-menu{position:fixed;inset:0;z-index:120;background:var(--cpxl-ink-deep);color:var(--cpxl-bg);display:flex;flex-direction:column;padding:22px var(--cpxl-pad) 34px;opacity:0;transition:opacity .4s var(--cpxl-ease)}
.cpxl-menu.is-open{opacity:1}
.cpxl-menu__top{display:flex;align-items:center;justify-content:space-between}
.cpxl-menu .cpxl-logo{color:var(--cpxl-bg)}
.cpxl-menu__close{font-family:var(--cpxl-mono);font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;min-height:44px;padding:0 4px}
.cpxl-menu__nav{display:flex;flex-direction:column;margin:auto 0}
.cpxl-menu__nav a{display:flex;align-items:baseline;gap:18px;font-weight:800;font-size:clamp(38px,11vw,54px);letter-spacing:-.02em;text-transform:uppercase;padding:10px 0;opacity:0;transform:translateY(20px);transition:opacity .5s var(--cpxl-ease),transform .5s var(--cpxl-ease)}
.cpxl-menu.is-open .cpxl-menu__nav a{opacity:1;transform:none}
.cpxl-menu.is-open .cpxl-menu__nav a:nth-child(2){transition-delay:.06s}
.cpxl-menu.is-open .cpxl-menu__nav a:nth-child(3){transition-delay:.12s}
.cpxl-menu.is-open .cpxl-menu__nav a:nth-child(4){transition-delay:.18s}
.cpxl-menu__nav .cpxl-mono{color:rgba(250,250,250,.45)}
.cpxl-menu__bag{border-top:1px solid rgba(250,250,250,.16);padding-top:20px;text-align:left;font-size:12px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;min-height:44px}

/* ---------- boutons & liens ---------- */
body.cpxl-home .cpxl-btn{display:inline-flex;align-items:center;gap:12px;background:var(--cpxl-ink);color:var(--cpxl-bg);padding:18px 24px;font-size:13px;font-weight:800;letter-spacing:.18em;text-transform:uppercase;transition:background .25s,color .25s}
.cpxl-btn:hover{background:#000}
.cpxl-btn:hover .cpxl-arr{transform:translateX(6px)}
body.cpxl-home .cpxl-btn--light{background:var(--cpxl-bg);color:var(--cpxl-ink)}
.cpxl-btn--light:hover{background:#fff}
.cpxl-btn--full{width:100%;justify-content:center}
.cpxl-link{display:inline-flex;align-items:center;gap:12px;font-size:13px;font-weight:800;letter-spacing:.18em;text-transform:uppercase;padding:12px 0;border-bottom:2px solid currentColor;align-self:flex-start;transition:color .25s}
.cpxl-link:hover{color:var(--cpxl-cherry)}
.cpxl-link:hover .cpxl-arr{transform:translateX(6px)}
body.cpxl-home .cpxl-link--light{color:var(--cpxl-photo);border-bottom-color:rgba(239,231,220,.5)}
.cpxl-link--light:hover{color:#fff;border-bottom-color:var(--cpxl-cherry)}

body.cpxl-home a:focus-visible,body.cpxl-home button:focus-visible,body.cpxl-home input:focus-visible{outline:2px solid var(--cpxl-cherry);outline-offset:3px}

/* ---------- 01 HERO ---------- */
.cpxl-hero{position:relative;height:100svh;min-height:560px;overflow:hidden;background:var(--cpxl-photo)}
.cpxl-hero__media,.cpxl-hero__media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.cpxl-hero__in{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:flex-end;gap:26px;padding:120px var(--cpxl-pad) clamp(26px,4vh,54px);z-index:4}
.cpxl-display{font-weight:800;text-transform:uppercase;letter-spacing:-.035em;line-height:.94;font-size:clamp(44px,7.4vw,112px);max-width:12ch;text-wrap:balance}
.cpxl-hero__top{display:flex;flex-direction:column;gap:14px}
.cpxl-hero__top .cpxl-mono{color:var(--cpxl-ink)}
.cpxl-hero__row{display:flex;justify-content:space-between;align-items:flex-end;gap:18px;flex-wrap:wrap}
.cpxl-hero__row .cpxl-mono{color:var(--cpxl-ink)}
@media(max-width:700px){
  .cpxl-hero__in{justify-content:space-between;padding-top:92px}
  .cpxl-hero__in::before{content:"";position:absolute;inset:auto 0 0 0;height:56%;background:linear-gradient(to top,rgba(20,20,20,.72),rgba(20,20,20,0));z-index:-1}
  .cpxl-hero__top .cpxl-mono,.cpxl-hero__row .cpxl-mono{color:var(--cpxl-bg)}
  .cpxl-display{color:var(--cpxl-bg)}
  .cpxl-hero__row{flex-direction:column;align-items:stretch}
  .cpxl-hero .cpxl-btn{justify-content:center}
}

/* pixel bloom */
.cpxl-bloom{position:absolute;inset:0;z-index:3;display:grid;grid-template-columns:repeat(8,1fr);grid-template-rows:repeat(8,1fr);pointer-events:none}
.cpxl-bloom i{background:var(--cpxl-photo);opacity:1;transition:opacity .5s linear}
.cpxl-bloom.is-done i{opacity:0}

/* ---------- 02 MANIFESTO ---------- */
.cpxl-mani{padding:clamp(100px,17vh,210px) var(--cpxl-pad)}
.cpxl-mani__l{overflow:hidden}
.cpxl-mani__l span{display:block;font-weight:800;text-transform:uppercase;letter-spacing:-.03em;line-height:1.02;font-size:clamp(38px,7vw,104px);transform:translateY(110%);transition:transform .9s var(--cpxl-ease)}
.cpxl-mani.is-in .cpxl-mani__l span{transform:none}
.cpxl-mani.is-in .cpxl-mani__l:nth-child(2) span{transition-delay:.1s}
.cpxl-mani.is-in .cpxl-mani__l:nth-child(3) span{transition-delay:.2s}
.cpxl-mani__l--accent span{color:var(--cpxl-cherry)}

/* ---------- 03 PRODUIT HÉROÏQUE (sticky) ---------- */
.cpxl-pin{position:relative;height:280vh}
.cpxl-pin__stage{position:sticky;top:0;height:100svh;display:grid;grid-template-columns:minmax(300px,42fr) 58fr;overflow:hidden;background:var(--cpxl-bg)}
.cpxl-pin__info{display:flex;flex-direction:column;justify-content:center;gap:16px;padding:0 clamp(20px,3.5vw,60px)}
.cpxl-pin__title{font-weight:800;font-size:clamp(56px,8.6vw,150px);line-height:.9;letter-spacing:-.04em;text-transform:uppercase}
.cpxl-price{font-size:clamp(20px,2vw,26px);font-weight:500}
.cpxl-price del{opacity:.5;margin-right:.4em}
.cpxl-pin__media{position:relative;background:var(--cpxl-photo);overflow:hidden}
.cpxl-pin__media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.cpxl-pin__worn{opacity:var(--cpxl-worn,0)}
.cpxl-pin__state{position:absolute;left:18px;bottom:16px;background:var(--cpxl-bg);padding:6px 12px;color:var(--cpxl-ink);z-index:4}
@media(max-width:820px){
  .cpxl-pin{height:240vh}
  .cpxl-pin__stage{grid-template-columns:1fr;grid-template-rows:1fr auto}
  .cpxl-pin__media{order:-1;min-height:58svh}
  .cpxl-pin__info{padding:22px var(--cpxl-pad) 34px;gap:10px}
}

/* ---------- 04 LIFESTYLE (ouverture plein cadre) ---------- */
.cpxl-breath{position:relative;height:230vh;background:var(--cpxl-bg)}
.cpxl-breath__stage{position:sticky;top:0;height:100svh;display:grid;place-items:center;overflow:hidden}
.cpxl-breath__frame{width:100vw;height:100svh;overflow:hidden;transform:scale(var(--cpxl-scale,.62));transform-origin:50% 50%}
.cpxl-breath__frame img{width:100%;height:100%;object-fit:cover}
.cpxl-breath__cap{position:absolute;left:0;right:0;bottom:22px;text-align:center;color:var(--cpxl-ink);opacity:var(--cpxl-capop,1)}

/* ---------- 05 COLLECTION ---------- */
.cpxl-col{padding:clamp(90px,13vh,170px) 0 clamp(70px,9vh,120px)}
.cpxl-col__head{display:flex;justify-content:space-between;align-items:flex-end;gap:18px;flex-wrap:wrap;padding:0 var(--cpxl-pad);margin-bottom:clamp(30px,5vh,58px)}
.cpxl-section-title{font-weight:800;text-transform:uppercase;letter-spacing:-.035em;line-height:.95;font-size:clamp(40px,6.6vw,104px)}
.cpxl-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,2.2vw,28px);padding:0 var(--cpxl-pad)}
.cpxl-empty{padding:0 var(--cpxl-pad);color:var(--cpxl-muted)}
.cpxl-card{position:relative;display:flex;flex-direction:column}
.cpxl-card__media{position:relative;display:block;aspect-ratio:4/5;background:var(--cpxl-photo);overflow:hidden}
.cpxl-card__media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:opacity .55s var(--cpxl-ease),transform .9s var(--cpxl-ease)}
.cpxl-card__alt{opacity:0}
.cpxl-card__link:hover .cpxl-card__alt{opacity:1}
.cpxl-card__link:hover .cpxl-card__img{transform:scale(1.03)}
.cpxl-card__meta{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding:14px 0 3px}
.cpxl-card__name{font-weight:800;font-size:15px;letter-spacing:.05em;text-transform:uppercase}
.cpxl-card__price{font-size:15px;font-weight:500}
.cpxl-card__price del{opacity:.5;margin-right:.35em}
.cpxl-card__under{display:flex;justify-content:space-between;align-items:baseline;gap:12px;min-height:20px}
.cpxl-card__colors{opacity:0;transform:translateY(4px);transition:opacity .4s var(--cpxl-ease),transform .4s var(--cpxl-ease)}
.cpxl-card__link:hover .cpxl-card__colors{opacity:1;transform:none}
.cpxl-card.is-out .cpxl-card__media img{opacity:.5}
.cpxl-card.is-out .cpxl-card__colors{opacity:1;transform:none}
.cpxl-badge{position:absolute;left:50%;bottom:14px;transform:translateX(-50%);background:var(--cpxl-ink);color:var(--cpxl-bg);font-family:var(--cpxl-mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;padding:6px 12px;z-index:3}
.cpxl-quickadd{position:absolute;left:0;right:0;bottom:78px;background:var(--cpxl-ink);color:var(--cpxl-bg);padding:13px 0;font-size:12px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;transform:translateY(8px);opacity:0;transition:opacity .3s var(--cpxl-ease),transform .3s var(--cpxl-ease)}
.cpxl-card:hover .cpxl-quickadd,.cpxl-quickadd:focus-visible{opacity:1;transform:none}
.cpxl-swipe{display:none}
@media(max-width:820px){
  .cpxl-grid{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:14px;padding:0 var(--cpxl-pad) 8px;scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .cpxl-grid::-webkit-scrollbar{display:none}
  .cpxl-card{flex:0 0 76vw;scroll-snap-align:start}
  .cpxl-card__colors{opacity:1;transform:none}
  .cpxl-card__under .cpxl-mono:first-child{display:none}
  .cpxl-quickadd{position:static;opacity:1;transform:none;margin-top:10px}
  .cpxl-swipe{display:block;padding:14px var(--cpxl-pad) 0}
}

/* ---------- 06 OBJECTS ---------- */
.cpxl-obj{background:var(--cpxl-ink-deep);color:var(--cpxl-photo);padding:clamp(90px,13vh,170px) var(--cpxl-pad);display:flex;flex-direction:column;gap:22px}
.cpxl-obj .cpxl-mono{color:rgba(239,231,220,.55)}
.cpxl-obj__lead{max-width:56ch;color:rgba(239,231,220,.82);font-size:clamp(16px,1.6vw,19px)}
.cpxl-obj__still img{width:100%;height:auto;max-height:640px;object-fit:cover}
.cpxl-obj__row{display:flex;gap:clamp(24px,5vw,64px);flex-wrap:wrap;margin-top:8px}

/* ---------- 07 MWYO ---------- */
.cpxl-mwyo{background:var(--cpxl-photo);padding:clamp(100px,15vh,190px) var(--cpxl-pad);display:flex;flex-direction:column;gap:34px}
.cpxl-mwyo .cpxl-section-title{max-width:11ch}
.cpxl-mwyo__body{display:grid;grid-template-columns:minmax(0,620px) 1fr;gap:clamp(24px,5vw,80px);align-items:end}
.cpxl-lead{font-size:clamp(17px,1.6vw,20px);line-height:1.55}
.cpxl-facts{display:flex;flex-direction:column}
.cpxl-fact{display:flex;justify-content:space-between;gap:16px;padding:13px 0;border-top:1px solid rgba(26,26,26,.2)}
.cpxl-fact:last-child{border-bottom:1px solid rgba(26,26,26,.2)}
.cpxl-fact .cpxl-mono:last-child{color:var(--cpxl-ink)}
.cpxl-prov{opacity:.8}
@media(max-width:760px){.cpxl-mwyo__body{grid-template-columns:1fr}}

/* ---------- 08 FINAL ---------- */
.cpxl-final{position:relative;height:100svh;min-height:520px;overflow:hidden;background:var(--cpxl-photo)}
.cpxl-final img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.cpxl-final__in{position:absolute;inset:auto 0 0 0;display:flex;flex-direction:column;align-items:center;gap:16px;padding:0 var(--cpxl-pad) clamp(30px,5vh,56px);text-align:center;z-index:3}
.cpxl-final::after{content:"";position:absolute;inset:auto 0 0 0;height:46%;background:linear-gradient(to top,rgba(20,20,20,.6),rgba(20,20,20,0));z-index:2}
.cpxl-final__in .cpxl-mono{color:var(--cpxl-bg)}

/* ---------- 09 FOOTER ---------- */
.cpxl-footer{background:var(--cpxl-ink-deep);color:var(--cpxl-bg);padding:clamp(56px,9vh,104px) 0 26px}
.cpxl-footer__giant{font-weight:800;font-size:clamp(52px,13vw,220px);letter-spacing:-.04em;line-height:.86;text-transform:uppercase;padding:0 var(--cpxl-pad);white-space:nowrap;overflow:hidden}
.cpxl-footer__cols{display:grid;grid-template-columns:repeat(4,1fr);gap:32px;padding:clamp(34px,6vh,60px) var(--cpxl-pad) 0}
.cpxl-footer h4{font-family:var(--cpxl-mono);font-weight:500;font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:rgba(250,250,250,.45);margin-bottom:14px}
.cpxl-footer ul{display:flex;flex-direction:column;gap:9px}
.cpxl-footer ul a{font-size:14.5px;font-weight:500}
.cpxl-footer ul a:hover{color:var(--cpxl-cherry)}
.cpxl-footer ul .cpxl-mono{font-size:9.5px;opacity:.55;margin-left:6px}
.cpxl-footer__base{display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px;margin-top:clamp(34px,6vh,58px);padding:20px var(--cpxl-pad) 0;border-top:1px solid rgba(250,250,250,.16)}
.cpxl-footer__base .cpxl-mono{color:rgba(250,250,250,.45)}
.cpxl-news__form{display:flex;align-items:center;gap:10px;border-bottom:1px solid rgba(250,250,250,.35);padding-bottom:10px}
.cpxl-news__form input{flex:1;min-width:0;border:0;background:none;color:var(--cpxl-bg);font-family:var(--cpxl-font);font-size:15px;padding:10px 0;outline:none}
.cpxl-news__form input::placeholder{color:rgba(250,250,250,.5)}
.cpxl-news__form button{font-family:var(--cpxl-mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;min-height:44px;padding:0 4px}
.cpxl-news__form button:hover{color:var(--cpxl-cherry)}
.cpxl-news__msg{margin-top:12px;color:rgba(250,250,250,.5)}
.cpxl-news__msg.is-ok{color:var(--cpxl-turquoise)}
.cpxl-news__msg.is-err{color:var(--cpxl-cherry)}
.cpxl-news.is-ok .cpxl-news__form{border-bottom-color:var(--cpxl-turquoise)}
.cpxl-news.is-err .cpxl-news__form{border-bottom-color:var(--cpxl-cherry)}
@media(max-width:760px){.cpxl-footer__cols{grid-template-columns:repeat(2,1fr)}.cpxl-news{grid-column:1/-1}}

/* ---------- CART DRAWER ---------- */
.cpxl-veil{position:fixed;inset:0;background:rgba(20,20,20,.4);z-index:130;opacity:0;transition:opacity .35s var(--cpxl-ease)}
.cpxl-veil.is-open{opacity:1}
.cpxl-drawer{position:fixed;top:0;right:0;bottom:0;width:min(460px,100vw);background:var(--cpxl-bg);z-index:140;display:flex;flex-direction:column;padding:24px clamp(20px,3vw,32px);transform:translateX(100%);transition:transform .4s var(--cpxl-ease)}
.cpxl-drawer.is-open{transform:none}
.cpxl-drawer__head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding-bottom:20px}
.cpxl-drawer__title{font-size:12px;font-weight:700;letter-spacing:.16em;text-transform:uppercase}
.cpxl-drawer__close{width:44px;height:44px;font-size:24px;line-height:1;display:grid;place-items:center}
.cpxl-drawer__close:hover{color:var(--cpxl-cherry)}
.cpxl-drawer__body{flex:1;overflow-y:auto;display:flex;flex-direction:column}
.cpxl-drawer__empty{margin:auto;text-align:center;display:flex;flex-direction:column;gap:14px;align-items:center}
.cpxl-drawer__empty b{font-weight:800;font-size:15px;letter-spacing:.05em;text-transform:uppercase}
.cpxl-drawer__empty p{color:var(--cpxl-muted);font-size:15px}
.cpxl-line{display:flex;gap:16px;padding:20px 0;border-bottom:1px solid var(--cpxl-line)}
.cpxl-line__img{width:72px;height:90px;flex:0 0 72px;object-fit:cover;background:var(--cpxl-photo)}
.cpxl-line__info{flex:1;display:flex;flex-direction:column;gap:6px;min-width:0}
.cpxl-line__name{font-weight:800;font-size:15px;letter-spacing:.05em;text-transform:uppercase}
.cpxl-line__ctrl{display:flex;align-items:center;justify-content:space-between;gap:12px;padding-top:8px}
.cpxl-step{display:inline-flex;align-items:center;border:1px solid var(--cpxl-line)}
.cpxl-step button{width:36px;height:36px;display:grid;place-items:center;font-size:15px}
.cpxl-step button:hover{color:var(--cpxl-cherry)}
.cpxl-step span{min-width:34px;height:36px;display:grid;place-items:center;font-size:14px;font-variant-numeric:tabular-nums}
.cpxl-line__del{width:28px;height:28px;display:grid;place-items:center;color:var(--cpxl-muted);font-size:16px;align-self:flex-start}
.cpxl-line__del:hover{color:var(--cpxl-cherry)}
.cpxl-drawer__foot{border-top:1px solid var(--cpxl-line);padding-top:20px;display:flex;flex-direction:column;gap:14px}
.cpxl-drawer__sub{display:flex;justify-content:space-between;align-items:baseline;font-size:12px;font-weight:700;letter-spacing:.16em;text-transform:uppercase}
.cpxl-drawer__sub span:last-child{font-size:19px;font-weight:500;letter-spacing:0;text-transform:none}
@media(max-width:600px){.cpxl-drawer{width:100vw}}

/* toast */
.cpxl-toast{position:fixed;left:50%;bottom:26px;transform:translate(-50%,14px);background:var(--cpxl-ink);color:var(--cpxl-bg);padding:14px 22px;font-family:var(--cpxl-mono);font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;z-index:150;opacity:0;transition:opacity .3s var(--cpxl-ease),transform .3s var(--cpxl-ease)}
.cpxl-toast.is-on{opacity:1;transform:translate(-50%,0)}

/* reveal générique */
.cpxl-rv{opacity:0;transform:translateY(22px);transition:opacity .8s var(--cpxl-ease),transform .8s var(--cpxl-ease)}
.cpxl-rv.is-in{opacity:1;transform:none}

/* ---------- fallbacks mouvement réduit ---------- */
@media(prefers-reduced-motion:reduce){
  body.cpxl-home *{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important;scroll-behavior:auto !important}
  .cpxl-rv,.cpxl-mani__l span{opacity:1 !important;transform:none !important}
  .cpxl-bloom{display:none}
  .cpxl-pin{height:auto}
  .cpxl-pin__stage{position:static;height:auto}
  .cpxl-pin__media{min-height:70svh}
  .cpxl-pin__worn{opacity:0}
  .cpxl-breath{height:auto}
  .cpxl-breath__stage{position:static;height:auto}
  .cpxl-breath__frame{transform:none;height:70svh}
}

/* ---------- fallback mobile : pas de scroll-driven coûteux ---------- */
@media(max-width:700px){
  .cpxl-breath{height:auto}
  .cpxl-breath__stage{position:static;height:auto}
  .cpxl-breath__frame{transform:none;height:64svh;width:100%}
}

/* barre d'admin WordPress */
body.admin-bar .cpxl-header{top:32px}
@media(max-width:782px){body.admin-bar .cpxl-header{top:46px}}

/* ==========================================================================
   02 · CARROUSEL 3D — PIÈCES PHARES
   Profondeur en CSS 3D, positions calculées en JS (transforms GPU only).
   ========================================================================== */
.cpxl-stage{padding:clamp(70px,10vh,130px) 0 clamp(60px,8vh,110px);background:var(--cpxl-bg);overflow:hidden}
.cpxl-stage__head{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:0 var(--cpxl-pad);margin-bottom:clamp(26px,4vh,46px)}
.cpxl-stage__nav{display:flex;gap:10px}
.cpxl-stage__arrow{width:48px;height:48px;display:grid;place-items:center;border:1px solid var(--cpxl-line);font-size:16px;background:var(--cpxl-bg);transition:background .25s var(--cpxl-ease),color .25s var(--cpxl-ease),border-color .25s}
.cpxl-stage__arrow:hover{background:var(--cpxl-ink);color:var(--cpxl-bg);border-color:var(--cpxl-ink)}
.cpxl-stage__arrow[disabled]{opacity:.28;pointer-events:none}

.cpxl-carousel{position:relative;perspective:1700px;perspective-origin:50% 42%;outline:none;touch-action:pan-y}
.cpxl-carousel:focus-visible{outline:2px solid var(--cpxl-cherry);outline-offset:6px}
.cpxl-carousel__scene{position:relative;height:clamp(480px,66vh,700px);transform-style:preserve-3d;cursor:grab;transition:transform .5s var(--cpxl-ease)}
.cpxl-carousel.is-dragging .cpxl-carousel__scene{cursor:grabbing;transition:none}

.cpxl-slide{position:absolute;top:0;left:50%;width:clamp(250px,26vw,370px);
  transform-style:preserve-3d;will-change:transform,opacity;backface-visibility:hidden}
.cpxl-slide__in{display:flex;flex-direction:column;gap:0;color:var(--cpxl-ink)}
.cpxl-slide__media{position:relative;display:block;aspect-ratio:4/5;background:var(--cpxl-photo);overflow:hidden;
  box-shadow:0 var(--cpxl-sh-y,18px) var(--cpxl-sh-b,42px) rgba(20,20,20,var(--cpxl-sh-o,.14))}
.cpxl-slide__img{width:100%;height:100%;object-fit:cover;transform:translate3d(var(--cpxl-px,0),0,0) scale(1.06);transition:transform .45s var(--cpxl-ease)}
.cpxl-slide__info{display:flex;flex-direction:column;gap:5px;padding-top:16px;transform:translate3d(0,var(--cpxl-iy,0),0);opacity:var(--cpxl-io,1)}
.cpxl-slide__name{font-weight:800;font-size:clamp(15px,1.5vw,18px);letter-spacing:.04em;text-transform:uppercase}
.cpxl-slide__price{font-size:15px;font-weight:500}
.cpxl-slide__price del{opacity:.5;margin-right:.35em}
/* la carte active seule est cliquable : pas de clic accidentel sur une carte reculée */
.cpxl-slide[data-active="false"] .cpxl-slide__in{pointer-events:none}
.cpxl-slide[data-active="true"]:hover .cpxl-slide__img{transform:translate3d(var(--cpxl-px,0),0,0) scale(1.1)}

.cpxl-stage__dots{display:flex;justify-content:center;gap:9px;margin-top:clamp(22px,3vh,38px)}
.cpxl-stage__dots button{width:34px;height:2px;background:var(--cpxl-line);transition:background .3s var(--cpxl-ease),transform .3s var(--cpxl-ease);padding:0;position:relative}
.cpxl-stage__dots button::after{content:"";position:absolute;inset:-14px 0}
.cpxl-stage__dots button[aria-selected="true"]{background:var(--cpxl-ink)}
.cpxl-stage__hint{display:block;text-align:center;margin-top:16px;opacity:.7}

@media(max-width:820px){
  .cpxl-carousel{perspective:1100px}
  .cpxl-carousel__scene{height:clamp(430px,68vh,560px)}
  .cpxl-slide{width:min(70vw,300px)}
  .cpxl-stage__nav{display:none}
  .cpxl-stage__hint::after{content:" au doigt"}
}

/* mouvement réduit : rangée simple, pas de 3D, défilement natif */
@media(prefers-reduced-motion:reduce){
  .cpxl-carousel{perspective:none}
  .cpxl-carousel__scene{position:static;height:auto;display:flex;gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;padding:0 var(--cpxl-pad) 8px;transform:none !important;cursor:auto}
  .cpxl-slide{position:static;flex:0 0 min(76vw,340px);transform:none !important;opacity:1 !important;scroll-snap-align:start}
  .cpxl-slide[data-active="false"] .cpxl-slide__in{pointer-events:auto}
  .cpxl-slide__img{transform:none !important}
  .cpxl-slide__info{transform:none !important}
  .cpxl-stage__nav,.cpxl-stage__dots{display:none}
}