/* One Pager Paralax (V3) — landing de conversion motion 2026.
   Tout via var(--token) pour la cascade scopée + réglable Studio. */
/* Fallback tokens motion (les valeurs réelles viennent de renderTokens()/tokens.json,
   réglables dans le Studio via le groupe "Animations"). */
:root{
  --op-anim-dur:.7s;
  --op-anim-ease:cubic-bezier(.16,1,.3,1);
  --op-reveal-y:28px;
  --op-parallax:1;
}
*{box-sizing:border-box}
body.op-body{margin:0;font-family:var(--font-family-base);font-size:var(--font-size-base);line-height:var(--line-height-base);color:var(--color-text);background:var(--color-background)}
a{color:var(--color-accent)}
img{max-width:100%}
.op-container{max-width:var(--container-max-width);margin:0 auto;padding:0 var(--container-padding);width:100%}

/* Header (zone.header) — sticky translucide premium */
.op-header{background:var(--color-background);border-bottom:1px solid var(--color-border);min-height:var(--header-height);display:flex;align-items:center;position:sticky;top:0;z-index:20;transition:box-shadow .2s,background .2s}
@supports (backdrop-filter:blur(1px)){.op-header{background:color-mix(in srgb,var(--color-background) 82%,transparent);backdrop-filter:saturate(1.4) blur(14px);-webkit-backdrop-filter:saturate(1.4) blur(14px)}}
.op-header:hover{box-shadow:0 6px 24px rgba(15,23,42,.06)}
.op-header__inner{display:flex;align-items:center;justify-content:space-between;gap:20px}
.op-brand{font-family:var(--font-family-heading);font-weight:var(--font-weight-heading);font-size:var(--font-size-lg);color:var(--color-text);text-decoration:none;letter-spacing:-.01em}
.op-nav{display:flex;align-items:center;gap:22px}
.op-nav__link{position:relative;color:var(--color-text);text-decoration:none;font-size:var(--font-size-sm);padding:6px 2px}
.op-nav__link::after{content:"";position:absolute;left:0;right:100%;bottom:0;height:2px;background:var(--color-accent);transition:right .22s ease}
.op-nav__link:hover{color:var(--color-accent)}
.op-nav__link:hover::after{right:0}
.op-cart-btn{border:1px solid var(--color-border);background:var(--color-surface);color:var(--color-text);border-radius:var(--button-radius);padding:9px 18px;cursor:pointer;font-size:var(--font-size-sm)}
.op-cart-btn:hover{border-color:var(--color-accent);color:var(--color-accent)}
.op-header__utility{display:flex;align-items:center;gap:10px}

/* Sélecteur de langue */
.op-lang{position:relative}
.op-lang__toggle{display:inline-flex;align-items:center;gap:5px;border:1px solid var(--color-border);background:#fff;color:var(--color-text);border-radius:var(--button-radius);padding:8px 12px;font-size:var(--font-size-sm);font-weight:600;cursor:pointer}
.op-lang__toggle:hover{border-color:var(--color-accent)}
.op-lang__caret{font-size:10px;opacity:.7}
.op-lang__menu{position:absolute;top:calc(100% + 6px);right:0;min-width:170px;background:#fff;border:1px solid var(--color-border);border-radius:var(--border-radius);box-shadow:0 12px 28px rgba(15,23,42,.16);list-style:none;margin:0;padding:6px;display:none;z-index:40}
.op-lang.is-open .op-lang__menu{display:block}
.op-lang__menu li{margin:0}
.op-lang__menu a{display:flex;align-items:center;gap:9px;padding:8px 10px;border-radius:7px;color:var(--color-text);text-decoration:none;font-size:var(--font-size-sm)}
.op-lang__menu a:hover{background:var(--color-surface);color:var(--color-accent)}
.op-lang__code{font-weight:700;font-size:11px;background:var(--color-surface);border-radius:5px;padding:1px 7px}
[dir=rtl] .op-lang__menu{right:auto;left:0}

/* Boutons CTA — premium : présence au repos (gradient + ombre colorée token-aware),
   lift au survol, press actif. Primaire (Ajouter) = primary foncé ; --checkout (Acheter) = accent. */
.op-btn{display:inline-flex;align-items:center;justify-content:center;border:0;background:linear-gradient(135deg,var(--color-primary),var(--color-primary-dark));color:#fff;text-decoration:none;padding:16px 36px;min-height:56px;border-radius:var(--button-radius);font-weight:700;letter-spacing:.01em;cursor:pointer;font-size:var(--font-size-base);box-shadow:0 8px 20px color-mix(in srgb,var(--color-primary) 30%,transparent);transition:transform .18s ease,box-shadow .18s ease,filter .18s ease}
.op-btn:hover{transform:translateY(-2px);box-shadow:0 16px 32px color-mix(in srgb,var(--color-primary) 42%,transparent);filter:brightness(1.10)}
.op-btn:active{transform:translateY(0);box-shadow:0 5px 14px color-mix(in srgb,var(--color-primary) 30%,transparent)}
.op-btn--checkout{background:linear-gradient(135deg,var(--color-accent),color-mix(in srgb,var(--color-accent) 70%,#000));box-shadow:0 8px 22px color-mix(in srgb,var(--color-accent) 40%,transparent)}
.op-btn--checkout:hover{transform:translateY(-2px);box-shadow:0 16px 34px color-mix(in srgb,var(--color-accent) 54%,transparent);filter:brightness(1.07)}
.op-btn--checkout:active{transform:translateY(0);box-shadow:0 5px 14px color-mix(in srgb,var(--color-accent) 40%,transparent)}

/* Hero (zone.hero) — produit actif, vitrine premium */
.op-hero{padding:var(--section-spacing) 0;background:var(--color-surface)}
.op-hero__inner{display:grid;grid-template-columns:1.05fr 1fr;gap:56px;align-items:center}
.op-hero__media{position:relative;background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--border-radius-lg);padding:0;height:clamp(360px,42vw,560px);overflow:hidden;box-shadow:0 30px 60px -28px rgba(15,23,42,.28)}
.op-hero__stage{position:absolute;inset:0;display:flex;align-items:center;justify-content:center}
.op-hero__img{width:100%;height:100%;max-height:none;object-fit:cover;border-radius:0;cursor:zoom-in;transition:transform .5s ease}
.op-hero__media:hover .op-hero__img{transform:scale(1.04)}
/* Galerie : miniatures des autres photos, en bas À L'INTÉRIEUR de l'image principale */
.op-hero__thumbs{position:absolute;left:0;right:0;bottom:0;z-index:3;display:flex;gap:8px;justify-content:center;flex-wrap:wrap;padding:12px 14px;background:linear-gradient(to top,rgba(15,23,42,.42),transparent)}
.op-hero__thumbs:empty{display:none}
.op-hero__thumb{flex:0 0 auto;width:56px;height:56px;padding:0;border:2px solid rgba(255,255,255,.65);border-radius:var(--border-radius-sm);overflow:hidden;background:#fff;cursor:pointer;transition:transform .15s ease,border-color .15s ease,box-shadow .15s ease}
.op-hero__thumb img{width:100%;height:100%;object-fit:cover;display:block}
.op-hero__thumb:hover{transform:translateY(-2px)}
.op-hero__thumb.is-active{border-color:#fff;box-shadow:0 0 0 2px rgba(15,23,42,.35),0 4px 12px rgba(15,23,42,.3)}
@media (max-width:600px){.op-hero__thumb{width:46px;height:46px}}
.op-hero__cat{display:inline-block;font-size:var(--font-size-sm);color:var(--color-text-muted);text-transform:uppercase;letter-spacing:.06em;margin-bottom:8px}
.op-hero__title{font-family:var(--font-family-heading);font-weight:var(--font-weight-heading);font-size:clamp(30px,4vw,48px);line-height:1.08;letter-spacing:-.015em;margin:0 0 14px;color:var(--color-primary)}
.op-hero__price{font-size:clamp(22px,2.4vw,30px);font-weight:700;color:var(--color-text);margin-bottom:22px}
/* Variantes inline (zone hero) */
.op-hero__variants{display:flex;flex-direction:column;gap:14px;margin:0 0 20px}
.op-vgroup{display:flex;flex-direction:column;gap:7px}
.op-vlabel{font-size:var(--font-size-sm);font-weight:600;color:var(--color-text);text-transform:capitalize}
.op-vreq{color:#e02424}
.op-vopts{display:flex;flex-wrap:wrap;gap:8px}
.op-vpill{border:1px solid var(--color-border);background:#fff;color:var(--color-text);border-radius:999px;padding:7px 14px;font-size:var(--font-size-sm);cursor:pointer;transition:border-color .12s,background .12s}
.op-vpill:hover{border-color:var(--color-accent)}
.op-vpill.is-active{background:var(--color-primary);color:#fff;border-color:var(--color-primary)}
.op-vpill.is-active .op-vadj{color:#fff}
.op-vadj{color:var(--color-text-muted);font-size:11px;margin-left:3px}
.op-vswatch{width:34px;height:34px;border-radius:50%;border:2px solid var(--color-border);background:#fff;cursor:pointer;font-size:10px;color:var(--color-text);padding:0;display:inline-flex;align-items:center;justify-content:center;transition:transform .12s,box-shadow .12s}
.op-vswatch:hover{transform:scale(1.06)}
.op-vswatch.is-active{border-color:var(--color-primary);box-shadow:0 0 0 2px var(--color-primary)}
.op-hero__hint{color:#e02424;font-size:var(--font-size-sm);margin:0 0 12px}
.op-hero__hint[hidden]{display:none}
.op-shake{animation:opShake .3s}
@keyframes opShake{0%,100%{transform:translateX(0)}25%{transform:translateX(-4px)}75%{transform:translateX(4px)}}
.op-btn.is-disabled{opacity:.5;cursor:not-allowed}
.op-cartline__opts{color:var(--color-text-muted);font-size:11px}

.op-hero__actions{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:14px}
.op-hero__detail{font-size:var(--font-size-sm);color:var(--color-accent);text-decoration:none}
.op-hero__detail:hover{text-decoration:underline}

/* Carrousel générique (flèches gauche/droite) */
.op-carousel{position:relative}
/* Rail : scrollbar masquée mais swipe tactile conservé (mobile/tablette) */
.op-carousel__rail{scroll-behavior:smooth;-webkit-overflow-scrolling:touch;scrollbar-width:none;-ms-overflow-style:none}
.op-carousel__rail::-webkit-scrollbar{width:0;height:0;display:none}
.op-carousel__arrow{position:absolute;top:50%;transform:translateY(-50%);z-index:5;width:40px;height:40px;border-radius:50%;border:1px solid var(--color-border);background:#fff;color:var(--color-text);font-size:24px;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;box-shadow:0 6px 18px rgba(15,23,42,.14);transition:background .12s,color .12s,transform .12s}
.op-carousel__arrow:hover{background:var(--color-primary);color:#fff;border-color:var(--color-primary)}
.op-carousel__arrow--prev{left:-6px}
.op-carousel__arrow--next{right:-6px}
.op-carousel__rail{padding-left:2px;padding-right:2px}
@media (max-width:600px){.op-carousel__arrow{width:32px;height:32px;font-size:18px}.op-carousel__arrow--prev{left:0}.op-carousel__arrow--next{right:0}}

/* Titre discret de carrousel */
.op-section-title{font-size:12px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--color-text-muted);margin:0 0 12px;display:flex;align-items:center;gap:12px}
.op-section-title:empty{display:none}
.op-section-title::after{content:"";flex:1;height:1px;background:var(--color-border)}

/* Orbite de vignettes (zone.orbit) */
.op-orbit{padding:22px 0;background:var(--color-background)}
.op-orbit__rail{display:flex;gap:12px;overflow-x:auto;padding-bottom:6px;scroll-snap-type:x mandatory}
.op-thumb{flex:0 0 auto;width:104px;border:1px solid var(--color-border);background:#fff;border-radius:var(--border-radius);padding:8px;cursor:pointer;display:flex;flex-direction:column;gap:6px;scroll-snap-align:start;transition:border-color .15s,transform .15s}
.op-thumb:hover{transform:translateY(-2px)}
.op-thumb.is-active{border-color:var(--color-accent);box-shadow:0 0 0 2px var(--color-accent) inset}
.op-thumb img{width:100%;height:78px;object-fit:contain}
.op-thumb__name{font-size:11px;color:var(--color-text-muted);text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* Carrousel catégories (zone.category-rail) — cartes image + nom */
.op-cats{padding:8px 0 var(--section-spacing)}
.op-cats__rail{display:flex;gap:14px;overflow-x:auto;padding-bottom:8px;scroll-snap-type:x mandatory}
.op-cat-card{flex:0 0 auto;width:150px;border:1px solid var(--color-border);background:#fff;border-radius:var(--border-radius-lg);padding:0;cursor:pointer;overflow:hidden;display:flex;flex-direction:column;scroll-snap-align:start;transition:border-color .15s,transform .15s,box-shadow .15s}
.op-cat-card:hover{transform:translateY(-3px);box-shadow:0 12px 26px rgba(15,23,42,.1)}
.op-cat-card.is-active{border-color:var(--color-primary);box-shadow:0 0 0 2px var(--color-primary) inset}
.op-cat-card__media{height:104px;background:var(--color-surface);display:flex;align-items:center;justify-content:center;overflow:hidden}
.op-cat-card__media img{width:100%;height:100%;object-fit:cover}
.op-cat-card__name{padding:10px 12px;font-weight:600;font-size:var(--font-size-sm);color:var(--color-text);text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.op-cat-card--all{width:120px}
.op-cat-card__media--all{font-size:38px;color:var(--color-accent);background:var(--color-surface)}

/* Transition hero au changement de produit/catégorie */
@keyframes opFade{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.op-hero__inner.op-fade{animation:opFade .22s ease}

/* Cart modal (zone.cart-modal) */
.op-cartmodal[hidden]{display:none}
.op-cartmodal{position:fixed;inset:0;z-index:1000;display:flex;justify-content:flex-end}
.op-cartmodal__backdrop{position:absolute;inset:0;background:rgba(15,23,42,.45)}
.op-cartmodal__panel{position:relative;width:380px;max-width:92vw;background:#fff;height:100%;display:flex;flex-direction:column;box-shadow:-12px 0 40px rgba(15,23,42,.2)}
.op-cartmodal__head{display:flex;align-items:center;justify-content:space-between;padding:16px 18px;border-bottom:1px solid var(--color-border);font-size:var(--font-size-lg)}
.op-cartmodal__x{border:0;background:transparent;font-size:26px;line-height:1;cursor:pointer;color:var(--color-text-muted)}
.op-cartmodal__body{flex:1;overflow:auto;padding:18px}
.op-cartline{display:flex;gap:12px;align-items:center;margin-bottom:12px;padding-bottom:12px;border-bottom:1px solid var(--color-border)}
.op-cartline img{width:56px;height:56px;object-fit:contain;border:1px solid var(--color-border);border-radius:var(--border-radius-sm);flex:0 0 auto}
.op-cartline__info{flex:1;min-width:0}
.op-cartline__info strong{display:block;font-size:var(--font-size-sm);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.op-cartline__price{color:var(--color-text-muted);font-size:12px}
.op-cartline__qty{flex:0 0 auto;font-weight:700;color:var(--color-text)}
.op-cart-count{display:inline-flex;align-items:center;justify-content:center;min-width:18px;height:18px;padding:0 5px;margin-left:4px;background:var(--color-primary);color:#fff;border-radius:999px;font-size:11px;font-weight:700}
.op-cartmodal__hint{color:var(--color-text-muted);font-size:var(--font-size-sm)}
.op-cartmodal__foot{border-top:1px solid var(--color-border);padding:16px 18px;display:flex;flex-direction:column;gap:10px}
.op-cartmodal__total{font-weight:700}
.op-cartmodal__foot .op-btn{text-align:center}

/* Footer */
.op-footer{padding:30px 0;border-top:1px solid var(--color-border);color:var(--color-text-muted);font-size:var(--font-size-sm)}
.op-footer__copy{margin:0}

@media (max-width:820px){
  .op-hero__inner{grid-template-columns:1fr;gap:24px}
  .op-hero__media{min-height:260px;padding:20px}
}

/* ── Slots d'insertion de blocs (système BlockInsert V3) ────────
   Le wrapper est toujours présent pour permettre au Studio (mode édition)
   d'afficher des hotspots/boutons "+" sur chaque slot, même vide. En
   navigation normale, un slot vide est invisible. */
.op-slot{display:block}
.op-slot:empty{display:none}
.op-slot > .ts-block-insert{display:block;margin:0}
.op-slot > .ts-block-insert + .ts-block-insert{margin-top:24px}

/* ── Panneau article (deeplink /article/...) — drawer lecture, calqué sur cart ── */
.op-article-panel[hidden]{display:none}
.op-article-panel{position:fixed;inset:0;z-index:1100;display:flex;justify-content:flex-end}
.op-article-panel__backdrop{position:absolute;inset:0;background:rgba(15,23,42,.5)}
.op-article-panel__panel{position:relative;width:560px;max-width:94vw;background:#fff;height:100%;display:flex;flex-direction:column;box-shadow:-16px 0 50px rgba(15,23,42,.24);animation:opPanelIn .26s ease}
@keyframes opPanelIn{from{transform:translateX(24px);opacity:.4}to{transform:none;opacity:1}}
.op-article-panel__head{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:18px 22px;border-bottom:1px solid var(--color-border)}
.op-article-panel__title{font-family:var(--font-family-heading);font-weight:var(--font-weight-heading);font-size:var(--font-size-lg);color:var(--color-primary);line-height:1.2}
.op-article-panel__x{border:0;background:transparent;font-size:28px;line-height:1;cursor:pointer;color:var(--color-text-muted)}
.op-article-panel__x:hover{color:var(--color-text)}
.op-article-panel__body{flex:1;overflow:auto;padding:24px 26px;font-size:var(--font-size-base);line-height:1.7;color:var(--color-text)}
.op-article-panel__body img{height:auto;border-radius:var(--border-radius-sm);margin:14px 0}
.op-article-panel__body h1,.op-article-panel__body h2,.op-article-panel__body h3{font-family:var(--font-family-heading);color:var(--color-primary);line-height:1.25}
.op-article-panel__body p{margin:0 0 16px}
[dir=rtl] .op-article-panel{justify-content:flex-start}
[dir=rtl] .op-article-panel__panel{box-shadow:16px 0 50px rgba(15,23,42,.24);animation:opPanelInRtl .26s ease}
@keyframes opPanelInRtl{from{transform:translateX(-24px);opacity:.4}to{transform:none;opacity:1}}
@media (max-width:600px){.op-article-panel__panel{width:100vw;max-width:100vw}}

/* Accessibilité — anneaux de focus clavier premium */
.op-btn:focus-visible,.op-cart-btn:focus-visible,.op-thumb:focus-visible,.op-cat-card:focus-visible,
.op-vpill:focus-visible,.op-vswatch:focus-visible,.op-carousel__arrow:focus-visible,
.op-cartmodal__x:focus-visible,.op-article-panel__x:focus-visible,.op-nav__link:focus-visible{
  outline:2px solid var(--color-accent);outline-offset:2px}

/* OnePager V3 premium flow: parent categories -> child categories -> products -> detail. */
.op-main{display:flex;flex-direction:column}
.op-slot[data-sws-slot="before-catrail"]{order:1}
.op-cats{order:2}
.op-subcats{order:3}
.op-slot[data-sws-slot="after-catrail"]{order:4}
.op-slot[data-sws-slot="before-orbit"]{order:5}
.op-orbit{order:6}
.op-slot[data-sws-slot="after-orbit"]{order:7}
.op-slot[data-sws-slot="before-hero"]{order:8}
.op-hero{order:9}
.op-slot[data-sws-slot="after-hero"]{order:10}
.op-slot[data-sws-slot="before-footer"]{order:20}
.op-brand,.op-btn,.op-hero__title{letter-spacing:0}
.op-cats{padding:18px 0 8px;background:var(--color-background);border-bottom:1px solid color-mix(in srgb,var(--color-border) 68%,transparent)}
.op-cats__rail{gap:14px;padding:4px 2px 14px;scroll-snap-type:x mandatory}
.op-cat-card{flex:0 0 clamp(142px,34vw,188px);width:auto;border-radius:var(--border-radius);scroll-snap-align:center;opacity:.66;transform:scale(.94);transition:border-color .18s,transform .18s,box-shadow .18s,opacity .18s}
.op-cat-card:hover{transform:translateY(-3px) scale(.97);opacity:.9}
.op-cat-card.is-active{border-color:var(--color-primary);box-shadow:0 20px 42px -30px rgba(15,23,42,.42);opacity:1;transform:scale(1)}
.op-cat-card__media{height:clamp(92px,24vw,126px)}
.op-subcats{padding:10px 0 14px;background:var(--color-background)}
.op-subcats__rail{display:flex;gap:10px;overflow-x:auto;padding:3px 2px 8px;scroll-snap-type:x mandatory}
.op-subcat-link{flex:0 0 auto;border:0;border-bottom:1px solid transparent;background:transparent;color:var(--color-text-muted);padding:9px 4px;border-radius:0;cursor:pointer;font-size:var(--font-size-sm);font-weight:700;scroll-snap-align:center;transition:color .15s,border-color .15s,transform .15s}
.op-subcat-link:hover{color:var(--color-text)}
.op-subcat-link.is-active{color:var(--color-primary);border-color:var(--color-primary);transform:translateY(-1px)}
.op-orbit{padding:18px 0 28px;background:var(--color-background)}
.op-orbit__rail{gap:16px;padding:6px 2px 18px;scroll-snap-type:x mandatory}
.op-thumb{flex:0 0 clamp(156px,38vw,214px);width:auto;padding:10px;gap:8px;scroll-snap-align:center;opacity:.64;transform:scale(.94);transition:border-color .18s,transform .18s,box-shadow .18s,opacity .18s}
.op-thumb:hover{transform:translateY(-2px) scale(.97);opacity:.86}
.op-thumb.is-active{border-color:var(--color-accent);box-shadow:0 18px 38px -26px color-mix(in srgb,var(--color-accent) 64%,transparent);opacity:1;transform:scale(1)}
.op-thumb__media{display:flex;align-items:center;justify-content:center;width:100%;aspect-ratio:1/1;background:var(--color-surface);border-radius:var(--border-radius-sm);overflow:hidden}
.op-thumb__media img{width:100%;height:100%;object-fit:contain}
.op-thumb__name{font-size:var(--font-size-sm);font-weight:700;color:var(--color-text)}
.op-thumb__price{font-size:12px;font-weight:700;color:var(--color-text-muted);text-align:center}
.op-hero{padding:clamp(28px,5vw,var(--section-spacing)) 0 var(--section-spacing);background:linear-gradient(180deg,var(--color-background),var(--color-surface))}
.op-hero__inner{grid-template-columns:minmax(0,1.08fr) minmax(300px,.92fr);gap:clamp(28px,5vw,64px)}
.op-hero__media{padding:0}
.op-hero__desc{max-width:58ch;margin:0 0 22px;color:var(--color-text-muted);font-size:var(--font-size-base)}
.op-hero__desc[hidden]{display:none}
.op-qty{display:inline-flex;align-items:center;gap:12px;margin:0 0 18px;color:var(--color-text-muted);font-size:var(--font-size-sm);font-weight:600}
.op-qty__input{width:76px;min-height:42px;border:1px solid var(--color-border);border-radius:var(--border-radius-sm);background:#fff;color:var(--color-text);padding:8px 10px;text-align:center;font:inherit;font-weight:700}
.op-qty__input:focus-visible,.op-subcat-link:focus-visible{outline:2px solid var(--color-accent);outline-offset:2px}
@media (max-width:820px){
  .op-hero__inner{grid-template-columns:1fr}
  .op-hero__media{height:clamp(300px,84vw,480px);min-height:260px}
  .op-hero__actions .op-btn{flex:1 1 100%}
}

/* Compact catalogue rails: Swiss-style density, vertical labels, inline drill-down. */
.op-product-carousel .op-container,
.op-category-parent .op-container{position:relative;padding-left:var(--container-padding);padding-right:var(--container-padding)}
.op-product-carousel .op-section-title,
.op-category-parent .op-section-title{position:absolute;left:var(--container-padding);top:50%;z-index:6;margin:0;height:20px;max-width:180px;padding:3px 8px;display:inline-flex;align-items:center;justify-content:center;transform:translate(-50%,-50%) rotate(-90deg);transform-origin:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;background:#111;color:#fff;border-radius:2px;font-size:10px;line-height:14px;letter-spacing:.08em}
.op-product-carousel .op-section-title::after,
.op-category-parent .op-section-title::after{display:none}
.op-cats{padding:8px 0 6px;border-bottom:1px solid color-mix(in srgb,var(--color-border) 64%,transparent)}
.op-subcats{display:none}
.op-product-carousel .op-carousel,
.op-category-parent .op-carousel{position:relative;overflow:hidden}
.op-product-carousel .op-carousel::before,
.op-product-carousel .op-carousel::after,
.op-category-parent .op-carousel::before,
.op-category-parent .op-carousel::after{content:"";position:absolute;top:0;bottom:0;z-index:4;width:64px;pointer-events:none;backdrop-filter:blur(1.5px);-webkit-backdrop-filter:blur(1.5px)}
.op-product-carousel .op-carousel::before,
.op-category-parent .op-carousel::before{left:0;background:linear-gradient(90deg,var(--color-background),color-mix(in srgb,var(--color-background) 82%,transparent),transparent)}
.op-product-carousel .op-carousel::after,
.op-category-parent .op-carousel::after{right:0;background:linear-gradient(270deg,var(--color-background),color-mix(in srgb,var(--color-background) 82%,transparent),transparent)}
@keyframes opShimmer{to{background-position:-200% 0}}
.op-skeleton{background:linear-gradient(100deg,color-mix(in srgb,var(--color-surface) 86%,#fff) 0%,color-mix(in srgb,var(--color-border) 44%,#fff) 42%,color-mix(in srgb,var(--color-surface) 86%,#fff) 74%);background-size:200% 100%;animation:opShimmer 1.05s linear infinite}
.op-cats__rail{gap:6px;align-items:stretch;padding:2px max(42%,2px) 6px;scroll-snap-type:x mandatory;mask-image:linear-gradient(90deg,transparent 0,#000 9%,#000 91%,transparent 100%);-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 9%,#000 91%,transparent 100%)}
.op-cat-card{position:relative;flex:0 0 clamp(104px,18vw,132px);width:auto;min-height:86px;border-radius:4px;opacity:1;transform:none;overflow:hidden;scroll-snap-align:center}
.op-cat-card:hover{transform:translateY(-1px);box-shadow:0 10px 22px rgba(15,23,42,.10)}
.op-cat-card.is-active{transform:scale(1.02);box-shadow:0 0 0 2px #111 inset,0 0 0 4px #fff inset,0 12px 26px rgba(15,23,42,.18);opacity:1}
.op-cat-card__media{height:86px;border-radius:0;background:var(--color-surface)}
.op-cat-card__media img{object-fit:cover}
.op-cat-card__name{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:24px 8px 8px;background:linear-gradient(to top,rgba(0,0,0,.72),rgba(0,0,0,.36),transparent);color:#fff;text-align:left;font-size:12px;line-height:1.12;font-weight:700;white-space:normal;text-shadow:0 1px 6px rgba(0,0,0,.45)}
.op-inline-subcats{flex:0 0 auto;display:flex;align-items:stretch;gap:5px;max-width:min(58vw,560px);overflow-x:auto;padding:0 2px;scroll-snap-align:start;scrollbar-width:none}
.op-inline-subcats::-webkit-scrollbar{display:none}
.op-inline-subcats .op-subcat-link{flex:0 0 auto;min-width:78px;max-width:118px;height:86px;padding:8px 9px;border:1px solid var(--color-border);border-radius:4px;background:#fff;color:var(--color-text);display:flex;align-items:flex-end;text-align:left;font-size:12px;line-height:1.15;font-weight:700;white-space:normal;overflow:hidden}
.op-inline-subcats .op-subcat-link:hover{border-color:var(--color-primary);color:var(--color-primary);transform:none}
.op-inline-subcats .op-subcat-link.is-active{border-color:var(--color-primary);background:var(--color-primary);color:#fff;transform:none}
.op-orbit{padding:8px 0 12px}
.op-orbit__rail{gap:6px;padding:8px max(42%,2px) 10px;scroll-snap-type:x mandatory;mask-image:linear-gradient(90deg,transparent 0,#000 10%,#000 90%,transparent 100%);-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 10%,#000 90%,transparent 100%)}
.op-thumb{position:relative;flex:0 0 clamp(108px,19vw,146px);width:auto;min-height:126px;padding:0;gap:0;border-radius:4px;opacity:1;transform:none;overflow:hidden;scroll-snap-align:center}
.op-thumb:hover{transform:translateY(-1px);opacity:1}
.op-thumb.is-active{transform:scale(1.04);opacity:1;border-color:#111;box-shadow:0 0 0 2px #111 inset,0 0 0 5px #fff inset,0 0 0 7px var(--color-accent) inset,0 18px 34px rgba(15,23,42,.22)}
.op-thumb__media{aspect-ratio:1/1;width:100%;border-radius:0;background:var(--color-surface)}
.op-thumb__media img{object-fit:contain}
.op-thumb__media::after{content:"";position:absolute;left:0;right:0;bottom:0;height:58%;background:linear-gradient(to top,rgba(0,0,0,.74),rgba(0,0,0,.34),transparent);pointer-events:none}
.op-thumb__name,
.op-thumb__price{position:absolute;left:8px;right:8px;z-index:2;text-align:left;color:#fff;text-shadow:0 1px 6px rgba(0,0,0,.5);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.op-thumb__name{bottom:24px;font-size:12px;line-height:1.1;font-weight:700}
.op-thumb__price{bottom:8px;font-size:11px;line-height:1;font-weight:700;color:rgba(255,255,255,.82)}
.op-thumb--skeleton{pointer-events:none;border-color:color-mix(in srgb,var(--color-border) 74%,transparent);box-shadow:none}
.op-thumb--skeleton .op-thumb__media::after{display:none}
.op-skeleton-line{position:absolute;left:8px;right:auto;z-index:2;height:11px;border-radius:999px}
.op-skeleton-line--name{bottom:27px;width:68%}
.op-skeleton-line--price{bottom:10px;width:38%;opacity:.86}
.op-hero__inner.is-loading-detail .op-hero__stage,
.op-hero__inner.is-loading-detail .op-hero__cat,
.op-hero__inner.is-loading-detail .op-hero__title,
.op-hero__inner.is-loading-detail .op-hero__price,
.op-hero__inner.is-loading-detail .op-hero__desc{position:relative;overflow:hidden;color:transparent;background:linear-gradient(100deg,color-mix(in srgb,var(--color-surface) 86%,#fff) 0%,color-mix(in srgb,var(--color-border) 44%,#fff) 42%,color-mix(in srgb,var(--color-surface) 86%,#fff) 74%);background-size:200% 100%;animation:opShimmer 1.05s linear infinite}
.op-hero__inner.is-loading-detail .op-hero__cat{display:block;width:180px;height:17px;border-radius:999px}
.op-hero__inner.is-loading-detail .op-hero__title{width:min(100%,520px);height:64px;border-radius:6px}
.op-hero__inner.is-loading-detail .op-hero__price{width:150px;height:34px;border-radius:6px}
.op-hero__inner.is-loading-detail .op-hero__desc{width:min(100%,640px);height:112px;border-radius:6px}
.op-hero__inner.is-loading-detail .op-hero__variants,
.op-hero__inner.is-loading-detail .op-qty,
.op-hero__inner.is-loading-detail .op-hero__actions{opacity:.36;pointer-events:none}
/* Pendant le squelette, masquer l'<img> vide (évite l'icône "image cassée") → shimmer du stage propre */
.op-hero__inner.is-loading-detail .op-hero__img{display:none}
.op-hero__inner.is-loading-detail .op-hero__thumbs{display:none}
.op-carousel__arrow{width:32px;height:32px;font-size:20px;background:#fff;color:#1c2329;border-color:rgba(0,0,0,.12)}
.op-carousel__arrow:hover{background:var(--color-accent);color:#1c2329;border-color:var(--color-accent)}
.op-carousel__arrow--prev{left:-2px}
.op-carousel__arrow--next{right:-2px}
@media (max-width:600px){
  .op-product-carousel .op-container,
  .op-category-parent .op-container{padding-left:var(--container-padding);padding-right:var(--container-padding)}
  .op-product-carousel .op-section-title,
  .op-category-parent .op-section-title{left:calc(var(--container-padding) - 1px);max-width:142px;font-size:9px}
  .op-cat-card{flex-basis:96px}
  .op-cat-card__media,
  .op-inline-subcats .op-subcat-link{height:78px}
  .op-inline-subcats{max-width:64vw}
  .op-thumb{flex-basis:100px;min-height:114px}
  .op-thumb__name{bottom:22px;font-size:11px}
}
@media (min-width:821px){
  .op-hero__inner{align-items:start}
  /* overflow:visible requis pour le sticky du média (couches parallaxe clippées par .op-px-wrap) */
  .op-hero.op-product-detail{overflow:visible}
  .op-hero__media{margin-top:32px;position:sticky;top:calc(var(--header-height, 64px) + 16px);align-self:start}
}

/* ── Skeleton screens premium (shimmer, anti-CLS) ─────────────────────────
   Aucun spinner, aucun texte. Placeholders calqués sur les composants finaux.
   Seedés côté serveur (index.tpl) → visibles dès le 1er paint, remplacés par le JS. */
/* Réserve la hauteur des rails : pas de collapse (rail vide / pré-hydratation) → CLS=0 */
.op-cats__rail{min-height:90px}
.op-orbit__rail{min-height:142px}
@media (max-width:600px){.op-cats__rail{min-height:82px}.op-orbit__rail{min-height:130px}}
/* Squelette catégorie = mêmes dimensions que .op-cat-card */
.op-cat-card--skeleton{pointer-events:none;cursor:default;border-color:color-mix(in srgb,var(--color-border) 70%,transparent);box-shadow:none}
.op-cat-card--skeleton:hover{transform:none;box-shadow:none}
/* Shimmer du média : surcharge explicite (sinon .op-thumb__media/.op-cat-card__media
   écrasent .op-skeleton par ordre de cascade → média sans animation) */
.op-cat-card--skeleton .op-cat-card__media,
.op-thumb--skeleton .op-thumb__media{
  background:linear-gradient(100deg,color-mix(in srgb,var(--color-surface) 86%,#fff) 0%,color-mix(in srgb,var(--color-border) 44%,#fff) 42%,color-mix(in srgb,var(--color-surface) 86%,#fff) 74%);
  background-size:200% 100%;animation:opShimmer 1.05s linear infinite}
/* Accessibilité : shimmer figé si l'utilisateur réduit les animations */
@media (prefers-reduced-motion:reduce){
  .op-skeleton,
  .op-cat-card--skeleton .op-cat-card__media,
  .op-thumb--skeleton .op-thumb__media,
  .op-hero__inner.is-loading-detail .op-hero__stage,
  .op-hero__inner.is-loading-detail .op-hero__cat,
  .op-hero__inner.is-loading-detail .op-hero__title,
  .op-hero__inner.is-loading-detail .op-hero__price,
  .op-hero__inner.is-loading-detail .op-hero__desc{
    animation:none;background:color-mix(in srgb,var(--color-border) 38%,#fff)}
}

/* ============================================================================
   MOTION 2026 — onepager-paralax. transform/opacity uniquement, token-driven.
   Gelé par body.is-studio (preview/édition) et par prefers-reduced-motion.
   ============================================================================ */
/* Reveals au scroll */
.op-reveal{opacity:0;transform:translateY(var(--op-reveal-y));transition:opacity var(--op-anim-dur) var(--op-anim-ease),transform var(--op-anim-dur) var(--op-anim-ease);transition-delay:var(--d,0s)}
.op-reveal.is-in{opacity:1;transform:none}

/* Parallaxe : couches décoratives du héros (translate via JS, data-px) */
.op-hero{position:relative;overflow:hidden}
.op-hero__inner,.op-hero .op-container{position:relative;z-index:1}
/* Wrapper clippant dédié : permet à .op-product-detail de passer en overflow:visible
   (requis pour position:sticky du média) sans laisser fuir les couches parallaxe. */
.op-px-wrap{position:absolute;inset:0;z-index:0;overflow:hidden;pointer-events:none}
.op-px{position:absolute;inset:-12%;z-index:0;pointer-events:none;will-change:transform}
.op-px--blob{background:radial-gradient(38% 38% at 22% 26%,color-mix(in srgb,var(--color-accent) 26%,transparent),transparent 70%),radial-gradient(34% 34% at 82% 74%,color-mix(in srgb,var(--color-primary) 18%,transparent),transparent 70%)}
.op-px--grid{background-image:linear-gradient(color-mix(in srgb,var(--color-border) 55%,transparent) 1px,transparent 1px),linear-gradient(90deg,color-mix(in srgb,var(--color-border) 55%,transparent) 1px,transparent 1px);background-size:44px 44px;opacity:.45}

/* Barre d'achat sticky */
.op-stickybar{position:fixed;left:0;right:0;bottom:0;z-index:60;transform:translateY(110%);transition:transform .42s var(--op-anim-ease);background:color-mix(in srgb,var(--color-background) 90%,transparent);border-top:1px solid var(--color-border);box-shadow:0 -10px 30px rgba(15,23,42,.12)}
@supports (backdrop-filter:blur(1px)){.op-stickybar{backdrop-filter:saturate(1.4) blur(12px);-webkit-backdrop-filter:saturate(1.4) blur(12px)}}
.op-stickybar.is-on{transform:translateY(0)}
.op-stickybar[hidden]{display:none}
.op-stickybar__inner{max-width:var(--container-max-width);margin:0 auto;padding:10px var(--container-padding);display:flex;align-items:center;gap:16px}
.op-stickybar__media{width:46px;height:46px;flex:0 0 auto;border-radius:var(--border-radius-sm);object-fit:cover;background:var(--color-surface);border:1px solid var(--color-border)}
.op-stickybar__info{flex:1;min-width:0;display:flex;flex-direction:column;line-height:1.2}
.op-stickybar__title{font-weight:700;color:var(--color-text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.op-stickybar__meta{font-size:var(--font-size-sm);color:var(--color-text-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.op-stickybar__price{font-weight:800;font-size:var(--font-size-lg);color:var(--color-text);white-space:nowrap}
.op-stickybar .op-btn{padding:12px 22px;min-height:46px}
@media (max-width:600px){.op-stickybar__meta{display:none}.op-stickybar__inner{gap:10px}.op-stickybar .op-btn{padding:11px 16px}}

/* Micro-interaction CTA : shine sweep (transform/opacity only) */
.op-btn{position:relative;overflow:hidden}
.op-btn::after{content:"";position:absolute;top:0;left:-130%;width:55%;height:100%;background:linear-gradient(120deg,transparent,rgba(255,255,255,.32),transparent);transform:skewX(-20deg);transition:left .6s var(--op-anim-ease);pointer-events:none}
.op-btn:hover::after{left:135%}
.op-btn:active{transform:translateY(0) scale(.985)}

/* Galerie : crossfade au swap d'image */
.op-hero__img{transition:opacity .34s var(--op-anim-ease),transform .5s ease}
.op-hero__img.op-img-fade{opacity:0}

/* Bande réassurance */
.op-trust{display:flex;flex-wrap:wrap;gap:18px 22px;margin:18px 0 6px;padding:0;list-style:none}
.op-trust li{display:inline-flex;align-items:center;gap:9px;font-size:var(--font-size-sm);color:var(--color-text-muted);font-weight:600}
.op-trust__ico{width:18px;height:18px;flex:0 0 auto;color:var(--color-accent)}

/* Ancrage prix (prix barré + badge remise) */
.op-hero__price del{color:var(--color-text-muted);font-weight:500;font-size:.66em;margin-right:10px;text-decoration:line-through}
.op-pricebadge{display:inline-block;margin-left:10px;padding:3px 9px;border-radius:999px;background:color-mix(in srgb,var(--color-accent) 16%,transparent);color:var(--color-accent);font-size:12px;font-weight:800;vertical-align:middle}

/* Fish-eye : le JS écrit transform/opacity inline ; base will-change */
.op-cats__rail .op-cat-card,.op-orbit__rail .op-thumb{will-change:transform,opacity}

/* Perf : footer hors écran */
.op-footer{content-visibility:auto;contain-intrinsic-size:auto 160px}

/* ── Gel motion : Studio (preview/édition) ───────────────────────────────── */
body.is-studio .op-reveal{opacity:1!important;transform:none!important;transition:none!important}
body.is-studio .op-px{display:none!important}
body.is-studio .op-stickybar{display:none!important}
body.is-studio .op-cats__rail .op-cat-card,
body.is-studio .op-orbit__rail .op-thumb{transform:none!important;opacity:1!important}
body.is-studio .op-btn::after{display:none!important}

/* ── Gel motion : prefers-reduced-motion ─────────────────────────────────── */
@media (prefers-reduced-motion:reduce){
  .op-reveal{opacity:1!important;transform:none!important;transition:opacity .2s linear!important}
  .op-px{display:none!important}
  .op-btn::after{display:none!important}
  .op-hero__img{transition:opacity .2s linear!important}
  .op-cats__rail .op-cat-card,.op-orbit__rail .op-thumb{transition:none!important}
}

/* Entrée du hero (une fois au chargement) — gelée en Studio + reduced-motion */
@keyframes opHeroIn{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}
.op-product-detail{animation:opHeroIn .8s var(--op-anim-ease) backwards}
body.is-studio .op-product-detail,
.op-product-detail.op-reveal{animation:none}
@media (prefers-reduced-motion:reduce){.op-product-detail{animation:none}}

/* Options multi-sélection (comportement modern-luxe : plusieurs choix simultanés) */
.op-vmulti{font-weight:500;font-size:11px;color:var(--color-text-muted);text-transform:none;margin-left:6px;letter-spacing:0}
.op-vgroup.is-multi .op-vpill{border-radius:var(--border-radius-sm)}
.op-vgroup.is-multi .op-vpill.is-active::before{content:"\2713";margin-right:6px;font-weight:800}

/* ===== Ajustements feedback : logo, disclosure options, sections détails/avis ===== */
/* Logo boutique dans le header */
.op-brand{display:inline-flex;align-items:center;gap:8px}
.op-brand__logo{height:40px;width:auto;max-width:220px;display:block;object-fit:contain}

/* Disclosure des options (comportement modern-luxe : repli + bouton) */
.op-hero__variants.op-collapsed{max-height:300px;overflow:hidden;-webkit-mask-image:linear-gradient(#000 76%,transparent);mask-image:linear-gradient(#000 76%,transparent)}
.op-vtoggle{margin:2px 0 16px;border:1px solid var(--color-border);background:#fff;color:var(--color-text);border-radius:var(--button-radius);padding:9px 16px;font:inherit;font-weight:600;font-size:var(--font-size-sm);cursor:pointer;transition:border-color .15s,color .15s}
.op-vtoggle:hover{border-color:var(--color-accent);color:var(--color-accent)}
.op-vtoggle[hidden]{display:none}

/* Sections Détails + Avis (placées après le hero via order) */
.op-details{order:11}
.op-reviews{order:12}
.op-details,.op-reviews{padding:clamp(28px,4vw,48px) 0;background:var(--color-background);border-top:1px solid color-mix(in srgb,var(--color-border) 64%,transparent)}
.op-details[hidden]{display:none}
.op-section-h{font-family:var(--font-family-heading);font-weight:var(--font-weight-heading);font-size:clamp(20px,2.4vw,28px);color:var(--color-primary);margin:0 0 18px;letter-spacing:-.01em}
.op-details__body{max-width:780px;font-size:var(--font-size-base);line-height:1.7;color:var(--color-text)}
.op-details__body p{margin:0 0 14px}
.op-details__body h3,.op-details__body h4{font-family:var(--font-family-heading);color:var(--color-primary);margin:18px 0 8px;font-size:var(--font-size-lg)}
.op-details__body ul{margin:0 0 14px;padding-left:20px}
.op-details__body li{margin:4px 0}
.op-details__body strong{color:var(--color-text)}

/* Avis : note boutique (delivery-centric, niveau boutique) */
.op-rating{display:inline-flex;align-items:center;gap:16px;padding:16px 20px;border:1px solid var(--color-border);border-radius:var(--border-radius-lg);background:var(--color-surface);max-width:460px}
.op-rating__score{font-size:30px;font-weight:800;color:var(--color-primary);white-space:nowrap}
.op-rating__score small{font-size:15px;color:var(--color-text-muted);font-weight:600}
.op-rating__meta{font-size:var(--font-size-sm);color:var(--color-text-muted);line-height:1.5}
.op-reviews__empty{color:var(--color-text-muted);font-size:var(--font-size-sm)}

/* Studio : disclosure toujours déplié (cibles visibles pour l'overlay) */
body.is-studio .op-hero__variants.op-collapsed{max-height:none;-webkit-mask-image:none;mask-image:none}
body.is-studio .op-vtoggle{display:none}

/* =====================================================================
   LUXE SKIN (sombre) — onepager-paralax-luxe. Tout en var(--token) →
   réglable Studio. Override de la base claire d'onepager-paralax.
   Réf : storage/onepager paralax luxe/onepager-motion-demo.html
   ===================================================================== */
body.op-body{-webkit-font-smoothing:antialiased}
::selection{background:var(--color-accent);color:var(--color-background)}

/* Header : nav sombre translucide */
.op-header{background:color-mix(in srgb,var(--color-background) 70%,#000)}
@supports (backdrop-filter:blur(1px)){.op-header{background:color-mix(in srgb,var(--color-background) 64%,transparent);backdrop-filter:saturate(1.3) blur(14px);-webkit-backdrop-filter:saturate(1.3) blur(14px)}}
.op-header:hover{box-shadow:0 6px 24px rgba(0,0,0,.35)}
.op-brand{color:var(--color-text);font-weight:800;letter-spacing:-.5px}
.op-nav__link{color:var(--color-text-muted);font-weight:600}
.op-nav__link:hover{color:var(--color-text)}
.op-cart-btn{background:transparent;border-color:var(--color-border);color:var(--color-text)}
.op-cart-btn:hover{border-color:var(--color-accent);color:var(--color-accent);background:color-mix(in srgb,var(--color-accent) 8%,transparent)}
.op-lang__toggle,.op-lang__menu{background:var(--color-surface);color:var(--color-text);border-color:var(--color-border)}
.op-lang__menu a{color:var(--color-text)}
.op-lang__menu a:hover{background:color-mix(in srgb,var(--color-accent) 10%,transparent);color:var(--color-accent)}
.op-lang__code{background:color-mix(in srgb,#000 24%,var(--color-surface))}

/* Hero : fond radial sombre + blobs orange/bleu + grille */
.op-hero{background:radial-gradient(120% 90% at 80% 8%,color-mix(in srgb,var(--color-text) 8%,var(--color-background)) 0%,var(--color-background) 55%)}
.op-px--blob{inset:auto;width:540px;height:540px;top:-120px;right:-80px;border-radius:50%;filter:blur(64px);opacity:.5;background:radial-gradient(circle,color-mix(in srgb,var(--color-accent) 60%,transparent),transparent 70%)}
.op-px--grid{opacity:.3;background-image:linear-gradient(var(--color-border) 1px,transparent 1px),linear-gradient(90deg,var(--color-border) 1px,transparent 1px);background-size:64px 64px;-webkit-mask-image:radial-gradient(80% 80% at 50% 40%,#000 30%,transparent 100%);mask-image:radial-gradient(80% 80% at 50% 40%,#000 30%,transparent 100%)}
.op-hero::after{content:"";position:absolute;z-index:0;width:460px;height:460px;bottom:-160px;left:-120px;border-radius:50%;filter:blur(64px);opacity:.45;pointer-events:none;background:radial-gradient(circle,color-mix(in srgb,var(--color-primary) 55%,transparent),transparent 70%)}
.op-hero__media{background:linear-gradient(160deg,color-mix(in srgb,var(--color-text) 9%,var(--color-surface)),var(--color-surface));border-color:var(--color-border);box-shadow:0 40px 80px -30px rgba(0,0,0,.6)}
.op-hero__cat{color:var(--color-accent);font-weight:700;letter-spacing:2.5px;display:inline-flex;align-items:center;gap:9px}
.op-hero__cat::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--color-accent)}
.op-hero__title{color:var(--color-text);font-weight:800;letter-spacing:-1.5px}
.op-hero__price{color:var(--color-text);font-weight:800}
.op-hero__desc{color:var(--color-text-muted)}

/* Boutons : primaire = ORANGE (signature), checkout = BLEU */
.op-btn{background:linear-gradient(135deg,var(--color-accent),color-mix(in srgb,var(--color-accent) 80%,#000));color:#1c2329;box-shadow:0 10px 26px -8px color-mix(in srgb,var(--color-accent) 60%,transparent),inset 0 1px 0 rgba(255,255,255,.4)}
.op-btn:hover{box-shadow:0 16px 34px -8px color-mix(in srgb,var(--color-accent) 70%,transparent);filter:brightness(1.04)}
.op-btn--checkout{background:linear-gradient(135deg,var(--color-primary),var(--color-primary-dark));color:#fff;box-shadow:0 10px 26px -8px color-mix(in srgb,var(--color-primary) 60%,transparent),inset 0 1px 0 rgba(255,255,255,.18)}
.op-btn--checkout:hover{box-shadow:0 16px 34px -8px color-mix(in srgb,var(--color-primary) 72%,transparent)}
.op-btn::after{background:linear-gradient(100deg,transparent,rgba(255,255,255,.45),transparent)}

/* Trust */
.op-trust li{color:var(--color-text-muted);font-weight:600}
.op-trust__ico{color:var(--color-primary)}

/* Variantes : pills/swatches/qty sombres */
.op-vlabel{color:var(--color-text)}
.op-vpill{background:var(--color-surface);color:var(--color-text);border-color:var(--color-border)}
.op-vpill:hover{border-color:var(--color-accent)}
.op-vpill.is-active{background:var(--color-accent);color:#1c2329;border-color:var(--color-accent)}
.op-vpill.is-active .op-vadj{color:#1c2329}
.op-vswatch{background:var(--color-surface);border-color:var(--color-border);color:var(--color-text)}
.op-vswatch.is-active{border-color:var(--color-accent);box-shadow:0 0 0 2px var(--color-accent)}
.op-qty__input{background:var(--color-surface);color:var(--color-text);border-color:var(--color-border)}
.op-vtoggle{background:var(--color-surface);color:var(--color-text);border-color:var(--color-border)}
.op-vtoggle:hover{border-color:var(--color-accent);color:var(--color-accent)}

/* Carrousels : cartes sombres uniformes (fish-eye désactivé) */
.op-cats__rail .op-cat-card,.op-orbit__rail .op-thumb{transition:transform .2s var(--op-anim-ease),border-color .2s,box-shadow .2s}
.op-cat-card,.op-thumb{background:var(--color-surface);border-color:var(--color-border)}
.op-cat-card__media,.op-thumb__media{background:color-mix(in srgb,#000 22%,var(--color-surface))}
.op-cat-card.is-active,.op-thumb.is-active{border-color:var(--color-accent);box-shadow:0 0 0 2px var(--color-accent) inset,0 18px 38px -22px rgba(0,0,0,.6)}
.op-product-carousel .op-section-title,.op-category-parent .op-section-title{background:var(--color-accent);color:#1c2329}
.op-section-title{color:var(--color-text-muted)}
.op-section-title::after{background:var(--color-border)}

/* Galerie thumbs */
.op-hero__thumb{background:var(--color-surface);border-color:color-mix(in srgb,var(--color-text) 30%,transparent)}
.op-hero__thumb.is-active{border-color:var(--color-accent);box-shadow:0 0 0 2px color-mix(in srgb,var(--color-accent) 60%,transparent)}

/* Sections détails / avis */
.op-details,.op-reviews{border-top-color:var(--color-border)}
.op-section-h{color:var(--color-text)}
.op-details__body{color:var(--color-text-muted)}
.op-details__body h3,.op-details__body h4,.op-details__body strong{color:var(--color-text)}
.op-rating{background:var(--color-surface);border-color:var(--color-border)}
.op-rating__score{color:var(--color-accent)}

/* Cart modal + sticky sombres */
.op-cartmodal__panel{background:var(--color-surface);color:var(--color-text)}
.op-cartmodal__head,.op-cartmodal__foot,.op-cartline{border-color:var(--color-border)}
.op-cartmodal__x{color:var(--color-text-muted)}
.op-stickybar{background:color-mix(in srgb,var(--color-background) 90%,#000);border-top-color:var(--color-border)}
@supports (backdrop-filter:blur(1px)){.op-stickybar{background:color-mix(in srgb,var(--color-background) 80%,transparent);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}}
.op-stickybar__title{color:var(--color-text)}
.op-stickybar__media{background:color-mix(in srgb,#000 22%,var(--color-surface));border-color:var(--color-border)}

/* Footer sombre */
.op-footer{background:color-mix(in srgb,var(--color-background) 70%,#000);border-top-color:var(--color-border);color:var(--color-text-muted)}

/* Skeletons sombres */
.op-skeleton,.op-cat-card--skeleton .op-cat-card__media,.op-thumb--skeleton .op-thumb__media{background:linear-gradient(100deg,color-mix(in srgb,#000 10%,var(--color-surface)) 0%,color-mix(in srgb,var(--color-text) 10%,var(--color-surface)) 42%,color-mix(in srgb,#000 10%,var(--color-surface)) 74%);background-size:200% 100%}

/* ===== Conversion luxe : stepper qty, produit flottant, réassurance 3 cartes ===== */
/* Stepper quantité (− [n] +) */
.op-qty{display:flex;flex-direction:column;gap:8px;align-items:flex-start}
.op-qty__lab{font-size:11px;font-weight:800;letter-spacing:1.5px;text-transform:uppercase;color:var(--color-text-muted)}
.op-qty__ctrl{display:inline-flex;align-items:center;border:1px solid var(--color-border);background:var(--color-surface)}
.op-qty__btn{width:42px;height:46px;background:transparent;border:0;color:var(--color-text);font-size:18px;cursor:pointer;font-family:inherit;transition:background .15s}
.op-qty__btn:hover{background:color-mix(in srgb,var(--color-text) 8%,transparent)}
.op-qty__ctrl .op-qty__input{width:54px;min-height:46px;border:0;border-left:1px solid var(--color-border);border-right:1px solid var(--color-border);text-align:center;background:transparent;color:var(--color-text);font:inherit;font-weight:700}
.op-qty__input::-webkit-outer-spin-button,.op-qty__input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.op-qty__input{-moz-appearance:textfield}

/* Produit flottant (tag promo + badge prix/note) sur l'image hero */
.op-prod__tag{position:absolute;top:16px;left:16px;z-index:4;font-size:11px;font-weight:800;letter-spacing:.5px;text-transform:uppercase;background:var(--color-background);color:var(--color-accent);padding:6px 11px}
.op-prod__tag[hidden]{display:none}
.op-prod__float{position:absolute;bottom:16px;right:16px;z-index:4;background:color-mix(in srgb,var(--color-background) 82%,transparent);border:1px solid var(--color-border);padding:11px 15px;font-size:15px;font-weight:800;color:var(--color-text)}
@supports (backdrop-filter:blur(1px)){.op-prod__float{backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}}
.op-prod__float[hidden]{display:none}
.op-prod__float-rating{display:block;color:var(--color-text-muted);font-weight:600;font-size:10px;letter-spacing:1px;text-transform:uppercase;margin-top:2px}

/* Réassurance 3 cartes */
.op-reassure-sec{order:10;padding:clamp(28px,4vw,48px) 0;background:var(--color-background);border-top:1px solid var(--color-border)}
.op-reassure{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.op-rea{background:var(--color-surface);border:1px solid var(--color-border);padding:24px}
.op-rea__ic{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;background:color-mix(in srgb,var(--color-primary) 16%,transparent);color:var(--color-primary);font-size:18px;margin-bottom:14px;font-weight:800}
.op-rea h4{font-size:15px;font-weight:700;margin:0 0 5px;color:var(--color-text)}
.op-rea p{color:var(--color-text-muted);font-size:13px;font-weight:500;margin:0}
@media (max-width:760px){.op-reassure{grid-template-columns:1fr}}

/* -- Nuance des blocks : alternance background/surface (facon modern-luxe) -- */
.op-orbit.op-product-carousel{background:var(--color-surface)}
.op-product-carousel .op-carousel::before{background:linear-gradient(90deg,var(--color-surface),color-mix(in srgb,var(--color-surface) 82%,transparent),transparent)}
.op-product-carousel .op-carousel::after{background:linear-gradient(270deg,var(--color-surface),color-mix(in srgb,var(--color-surface) 82%,transparent),transparent)}
/* Slider : image claire (overlay sombre retire) */
.hs2-classic-overlay{display:none}
.op-reassure-sec{background:var(--color-surface)}