.card-img-top {
  width: 100% !important;
  height: 170px !important;
  overflow: hidden !important;
  position: relative !important;
}

.card-img-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
}

/* ==========================================================================
   MS SKIN — refonte style "AstraShop" pour Glow
   Couleurs 100% pilotées par les réglages du thème (accent, highlight, textes).
   ========================================================================== */

/* ---------- Base ---------- */
body { -webkit-font-smoothing: antialiased; }
.text-display, .sa-section-title, .ms-ba-title, h1, h2 { letter-spacing: -0.035em; }
.mk { color: rgb(var(--cl-accent)); }

/* ---------- Boutons : pilules pleines, plus gros ---------- */
.sa-btn { font-weight: 700; }
.sa-hero .sa-btn, .ms-before-after .sa-btn { padding: .95rem 2rem; font-size: 1.05rem; }
.sa-btn-primary {
  background-image: none;
  background-color: rgb(var(--cl-accent));
  border-color: rgb(var(--cl-accent));
  box-shadow: 0 10px 30px -8px color-mix(in oklab, var(--cl-ac-c) 70%, transparent);
}
.sa-btn-primary:hover:not(:disabled) {
  background-image: none;
  background-color: color-mix(in oklab, var(--cl-ac-c) 88%, white);
  border-color: color-mix(in oklab, var(--cl-ac-c) 88%, white);
  box-shadow: 0 14px 38px -8px color-mix(in oklab, var(--cl-ac-c) 85%, transparent);
}
.sa-btn-secondary-outline, .sa-btn-primary-outline {
  background-image: none;
  background-color: color-mix(in oklab, var(--cl-ac-c) 10%, transparent);
  border-color: color-mix(in oklab, var(--cl-ac-c) 55%, transparent);
  color: rgb(var(--cl-t-primary));
}
.sa-btn-secondary-outline:hover:not(:disabled), .sa-btn-primary-outline:hover:not(:disabled) {
  background-color: color-mix(in oklab, var(--cl-ac-c) 20%, transparent);
  border-color: rgb(var(--cl-accent));
}

/* ---------- Navbar : barre pleine largeur (desktop) ----------
   Une seule barre, d'un bord a l'autre de l'ecran :
     [ logo + liens ]      [ grand espace central : barre promo ]      [ actions ]
   Le logo et le bloc d'actions portent "grow basis-0" dans le markup du
   theme, ce qui les ferait gonfler et manger l'espace du milieu : on les
   remet a leur largeur de contenu, et seul .sa-nav-mid s'etire. */
@media (min-width: 1024px) {
  .sa-navbar .glass-nav {
    max-width: none;
    margin: 0;
    border-radius: 0;
    border: 0;
    border-bottom: var(--border-w) solid var(--cl-border);
    background: color-mix(in oklab, var(--cl-bg-c) 88%, transparent);
  }
  .sa-navbar .glass-nav::after, .sa-navbar .glass-nav::before { display: none; }
  .sa-navbar .glass-nav > div { max-width: none; padding-inline: 1.75rem; }
  .sa-navbar .glass-nav > div > div { gap: 1.25rem; }

  .sa-navbar-logo { flex: 0 0 auto !important; }
  .sa-navbar .glass-nav > div > div > div:last-child { flex: 0 0 auto !important; }
  .sa-nav-mid { flex: 1 1 auto; }

  .sa-navbar-link {
    text-transform: uppercase; letter-spacing: .07em; font-weight: 700; font-size: .85rem;
  }

  /* la promo en pilule au centre, pas en bandeau pleine largeur */
  /* .ms-promo.ms-promo--nav et pas .ms-promo--nav : le bloc Halloween plus bas
     pose un background !important sur .ms-promo, qui laissait une bande sombre
     derriere la pilule. Entre deux !important, c'est la specificite qui tranche. */
  .ms-promo.ms-promo--nav {
    background: none !important;
    border-bottom: 0 !important;
    z-index: auto;
    max-width: 100%;
    min-width: 0;
  }
  /* fondue dans la navbar : ni cadre ni aplat, seule la pastille WELCOME
     garde l'accent. Le fond n'apparait qu'au survol. */
  .ms-promo--nav .ms-promo-in {
    padding: .3rem .7rem;
    gap: .25rem .55rem;
    font-size: .76rem;
    white-space: nowrap;
    flex-wrap: nowrap;
    border-radius: 9999px;
    border: 0;
    background: none;
    color: rgb(255 255 255 / .82);
    transition: background .2s ease, color .2s ease;
  }
  .ms-promo--nav .ms-promo-in:hover {
    color: #fff;
    background: color-mix(in oklab, var(--cl-ac-c) 12%, transparent);
  }
  .ms-promo--nav .ms-promo-text b { color: #FF9A2E; }
  .ms-promo--nav .ms-promo-ends { opacity: .55; }
  .ms-promo--nav .ms-promo-label { font-size: .62rem; padding: .12rem .5rem; }
  .ms-promo--nav .ms-promo-timer span { padding: .08rem .35rem; }
}
/* en dessous de 1024px le centre est masque : la barre pleine largeur
   rendue dans master.njk prend le relais */
.ms-promo--nav { display: none; }
@media (min-width: 1024px) { .ms-promo--nav { display: flex; } }
.sa-navbar-logo span { font-weight: 800; letter-spacing: -0.02em; }

/* ---------- Titres de section : alignés à gauche, grand format, trait accent ---------- */
.sa-section-heading {
  align-self: stretch !important; max-width: none !important;
  margin-left: 0 !important; margin-right: 0 !important; text-align: left !important;
  gap: .75rem;
}
.sa-section-title { font-size: clamp(2.2rem, 5vw, 4.4rem) !important; line-height: 1.04; }
.sa-section-subtitle { font-weight: 500; font-size: 1.05rem; }
.sa-section-eyebrow, .ms-kicker {
  display: inline-flex; align-items: center; gap: 1.25rem;
  padding: 0 !important; background: none !important; border: 0 !important;
  box-shadow: none !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important;
  font-size: .9rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: rgb(var(--cl-t-primary));
}
.sa-section-eyebrow::before, .ms-kicker::before {
  content: ""; width: 56px; height: 3px; border-radius: 2px; background: rgb(var(--cl-accent)); flex-shrink: 0;
}
.sa-products > .container, .sa-categories > .container { align-items: stretch; text-align: left; }

/* ---------- Hero ---------- */
.ms-hero { position: relative; overflow: hidden; }
.ms-hero .text-display { font-size: clamp(2.8rem, 7vw, 6rem); line-height: 1.02; font-weight: 800; }
.ms-hero .sa-eyebrow {
  background: color-mix(in oklab, var(--cl-fg-c) 4%, transparent);
  border-color: var(--cl-border); color: rgb(var(--cl-t-muted));
  font-size: .8rem; letter-spacing: .12em; padding: .6rem 1.4rem; box-shadow: none;
}
.ms-hero .sa-eyebrow::before {
  content: ""; width: 8px; height: 8px; border-radius: 50%;
  background: rgb(var(--cl-success)); box-shadow: 0 0 10px rgb(var(--cl-success));
}
.ms-hero .text-t-muted { font-size: clamp(1rem, 1.5vw, 1.25rem); }
.ms-hero-grid {
  position: absolute; inset: 0; pointer-events: none; opacity: .6;
  background-image:
    linear-gradient(color-mix(in oklab, var(--cl-fg-c) 7%, transparent) 1px, transparent 1px),
    linear-gradient(90deg, color-mix(in oklab, var(--cl-fg-c) 7%, transparent) 1px, transparent 1px);
  background-size: 64px 64px;
  -webkit-mask-image: radial-gradient(ellipse at center, #000 25%, transparent 72%);
          mask-image: radial-gradient(ellipse at center, #000 25%, transparent 72%);
}
.ms-hero-char {
  position: absolute; bottom: 0; height: 92%; width: auto; max-width: 32vw;
  object-fit: contain; pointer-events: none; opacity: .75;
  -webkit-mask-image: linear-gradient(to top, transparent 0, #000 28%);
          mask-image: linear-gradient(to top, transparent 0, #000 28%);
}
.ms-hero-char-l { left: 0; }
.ms-hero-char-r { right: 0; }
.ms-hero .sa-searchbar { max-width: 46rem; }
.ms-hero .sa-searchbar-trigger { height: 3.75rem; background: color-mix(in oklab, var(--cl-bg-c) 80%, var(--cl-fg-c) 3%); }
.ms-trust { display: flex; flex-wrap: wrap; gap: .75rem 2.25rem; margin-top: 2.5rem; }
.ms-trust-item { display: inline-flex; align-items: center; gap: .6rem; font-weight: 500; font-size: 1.05rem; color: rgb(var(--cl-t-muted)); }
.ms-trust-item i { color: rgb(var(--cl-accent)); }
.ms-trust-star i { color: rgb(var(--cl-highlight)); }
@media (max-width: 1023px) { .ms-hero-char { opacity: .22; max-width: 55vw; } }

/* ---------- Cartes (produits, groupes, catégories) ---------- */
.ms-card, .ms-cat-card {
  display: block; height: 100%; overflow: hidden; border-radius: 1.25rem;
  border: var(--border-w) solid var(--cl-border); background: var(--cl-surface-1);
  color: rgb(var(--cl-t-primary));
}
.ms-card:hover, .ms-cat-card:hover { border-color: color-mix(in oklab, var(--cl-ac-c) 60%, transparent); }
.ms-card-media, .ms-cat-media {
  position: relative; overflow: hidden;
  background: radial-gradient(circle at 50% 30%, color-mix(in oklab, var(--cl-ac-c) 55%, black), color-mix(in oklab, var(--cl-ac-c) 8%, black) 72%);
}
.ms-card-media::after, .ms-cat-media::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image:
    linear-gradient(rgb(255 255 255 / .06) 1px, transparent 1px),
    linear-gradient(90deg, rgb(255 255 255 / .06) 1px, transparent 1px);
  background-size: 48px 48px;
}
.ms-card-media img, .ms-cat-media img { display: block; transition: transform .5s ease; }
.ms-card:hover .ms-card-media img, .ms-cat-card:hover .ms-cat-media img { transform: scale(1.04); }
.ms-stock {
  flex-shrink: 0; white-space: nowrap; text-transform: uppercase;
  font-size: .72rem; font-weight: 700; letter-spacing: .04em;
  padding: .4rem .8rem; border-radius: 9999px;
  color: var(--cl-accent-text); background: var(--cl-accent-soft);
}
.ms-stock-out { color: rgb(var(--cl-error)); background: color-mix(in oklab, rgb(var(--cl-error)) 12%, transparent); }
.ms-cat-grid { display: grid; gap: 1.75rem; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.sa-products .flex.flex-wrap.gap-4 { gap: 1.75rem; }

/* ---------- Avant / Après ---------- */
.ms-ba-grid { display: grid; gap: 3.5rem; align-items: center; grid-template-columns: 1fr; }
@media (min-width: 1024px) { .ms-ba-grid { grid-template-columns: 1fr 1.6fr; } }
.ms-ba-copy { display: flex; flex-direction: column; gap: 1.1rem; }
.ms-ba-copy .ms-kicker { color: rgb(var(--cl-accent)); }
.ms-ba-title { font-size: clamp(2rem, 4vw, 3.4rem); line-height: 1.05; }
.ms-ba-box {
  position: relative; aspect-ratio: 16/9; overflow: hidden; border-radius: 1.25rem;
  border: var(--border-w) solid var(--cl-border); background: var(--cl-surface-1);
}
.ms-ba-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ms-ba-after { opacity: 0; transition: opacity .35s ease; }
.ms-ba-box.is-after .ms-ba-after { opacity: 1; }
.ms-ba-btn {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 2;
  display: inline-flex; align-items: center; gap: .7rem; padding: 1rem 1.8rem; border-radius: 9999px;
  font-weight: 700; font-size: 1.05rem; color: #fff;
  background: rgb(0 0 0 / .55); border: 1px solid color-mix(in oklab, var(--cl-ac-c) 60%, transparent);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); transition: background .2s;
}
.ms-ba-btn:hover { background: color-mix(in oklab, var(--cl-ac-c) 35%, rgb(0 0 0 / .6)); }
.ms-ba-btn svg { width: 1.4rem; height: 1.4rem; }
.ms-ba-tag {
  position: absolute; top: 1rem; left: 1rem; z-index: 2; padding: .35rem .9rem; border-radius: 9999px;
  font-size: .85rem; font-weight: 600; color: #fff; background: rgb(0 0 0 / .6);
}
.ms-ba-empty { position: absolute; inset: 0; display: grid; place-items: center; padding: 2rem; text-align: center; color: rgb(var(--cl-t-muted)); }

/* ---------- Démos vidéo ---------- */
.sa-video-gallery lite-youtube { border: var(--border-w) solid var(--cl-border); border-radius: 1.25rem; overflow: hidden; }

/* ---------- Page Shop (/products) : sidebar comme le modèle ---------- */
.sa-products-page .sa-section-title { font-size: clamp(2.6rem, 6vw, 4.8rem) !important; }
.sa-products-page form { padding: .5rem; }
.sa-products-page-link { border-radius: 9999px !important; padding: .75rem 1.1rem !important; font-weight: 600 !important; }
.sa-products-page-link[aria-current="page"] {
  background: rgb(var(--cl-accent)) !important; color: rgb(var(--cl-t-accent)) !important;
}
.sa-products-page input[type="text"], .sa-products-page input[type="number"] {
  border-radius: .9rem !important; padding-top: .8rem !important; padding-bottom: .8rem !important;
}
.sa-products-page form .sa-btn { padding-top: .8rem !important; padding-bottom: .8rem !important; font-size: 1rem !important; }

/* ---------- Page produit & panier ---------- */
.sa-product-page h1 { font-weight: 800; }
[class*="sa-product-page"] .rounded-xl, .sa-cart-panel .rounded-xl { border-radius: 1.25rem; }

/* ---------- Footer ---------- */
.sa-footer .text-xl { font-weight: 800; letter-spacing: -0.02em; }

@media (prefers-reduced-motion: reduce) {
  .ms-card-media img, .ms-cat-media img, .ms-ba-after { transition: none; }
}

/* ---------- Before / After — exact modèle ---------- */
.ms-kicker-top { flex-direction: column; align-items: flex-start; gap: 1.6rem; color: rgb(var(--cl-accent)) !important; font-size: .95rem; letter-spacing: .14em; font-weight: 800; }
.ms-kicker-top::before { width: 64px; height: 3px; }
.ms-ba-copy .ms-ba-title { font-size: clamp(2.2rem, 4.2vw, 3.6rem); font-weight: 800; }
.ms-ba-copy p { font-size: clamp(1.05rem, 1.4vw, 1.3rem); line-height: 1.55; max-width: 34rem; }
.ms-ba-frame {
  padding: .9rem; border-radius: 2rem;
  background: color-mix(in oklab, var(--cl-fg-c) 3%, transparent);
  border: var(--border-w) solid var(--cl-border);
  box-shadow: 0 30px 80px -30px color-mix(in oklab, var(--cl-ac-c) 35%, transparent);
}
.ms-ba-frame .ms-ba-box { border-radius: 1.4rem; border: 0; }
.ms-ba-btn {
  font-size: clamp(1rem, 2.2vw, 1.6rem); padding: 1.1rem 2.4rem;
  background: color-mix(in oklab, var(--cl-ac-c) 18%, rgb(20 40 55 / .55));
  border-color: color-mix(in oklab, var(--cl-ac-c) 45%, rgb(255 255 255 / .2));
}
.ms-ba-btn svg { width: 1.8rem; height: 1.8rem; }

/* ---------- Finitions premium ---------- */
.ms-hero .text-display {
  background: linear-gradient(180deg, rgb(var(--cl-t-primary)) 55%, color-mix(in oklab, rgb(var(--cl-t-primary)) 65%, transparent));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.ms-hero .text-display .mk { -webkit-text-fill-color: rgb(var(--cl-accent)); color: rgb(var(--cl-accent)); }
.ms-card, .ms-cat-card { transition: border-color .25s ease, box-shadow .25s ease, transform .25s ease; }
.ms-card:hover, .ms-cat-card:hover {
  box-shadow: 0 0 0 1px color-mix(in oklab, var(--cl-ac-c) 40%, transparent), 0 20px 50px -20px color-mix(in oklab, var(--cl-ac-c) 55%, transparent);
}
.ms-hero .sa-searchbar-trigger { transition: border-color .25s, box-shadow .25s; }
.ms-hero .sa-searchbar-trigger:hover { border-color: color-mix(in oklab, var(--cl-ac-c) 55%, transparent); box-shadow: 0 0 0 4px var(--cl-accent-soft); }

/* ---------- FIX cartes : 3 par ligne, grandes, centrées ---------- */
.sa-products .flex.flex-wrap { justify-content: center !important; gap: 2rem !important; }
.sa-products .flex.flex-wrap > div { width: 100% !important; max-width: 460px; }
@media (min-width: 640px)  { .sa-products .flex.flex-wrap > div { width: calc((100% - 2rem) / 2) !important; } }
@media (min-width: 1024px) { .sa-products .flex.flex-wrap > div { width: calc((100% - 4rem) / 3) !important; } }
.ms-cat-grid { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
@media (min-width: 1280px) { .ms-cat-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.ms-card-media, .ms-cat-media { display: flex; align-items: center; justify-content: center; }
.ms-card-media img, .ms-cat-media img { width: 100%; object-position: center center; margin: 0 auto; }
.ms-card .px-5, .ms-cat-card .px-5 { padding: .9rem 1.1rem 1.1rem; }
.ms-card .ms-card-price { font-size: 1rem; }
.ms-card h3, .ms-cat-card h3 { font-size: 1.05rem; }

/* ---------- Before / After : scan automatique ---------- */
.ms-ba-after {
  opacity: 1 !important;
  clip-path: inset(0 100% 0 0);
  transition: clip-path 1.8s cubic-bezier(.65,0,.35,1);
}
.ms-ba-box.is-after .ms-ba-after { clip-path: inset(0 0 0 0); }
.ms-ba-scan {
  position: absolute; top: 0; bottom: 0; left: 0; width: 0; z-index: 3; pointer-events: none;
  opacity: 0; transition: left 1.8s cubic-bezier(.65,0,.35,1), opacity .25s;
}
.ms-ba-box.is-after .ms-ba-scan { left: 100%; }
.ms-ba-box.is-scanning .ms-ba-scan { opacity: 1; }
.ms-ba-scan-line {
  position: absolute; top: 0; bottom: 0; left: -2px; width: 4px;
  background: #fff;
  box-shadow: 0 0 12px 3px rgb(var(--cl-accent)), 0 0 40px 10px color-mix(in oklab, var(--cl-ac-c) 70%, transparent);
}
.ms-ba-scan-line::before { content: ""; position: absolute; top: 0; bottom: 0; width: 140px; }
.ms-ba-box:not(.is-after) .ms-ba-scan-line::before { right: auto; left: 4px; background: linear-gradient(90deg, color-mix(in oklab, var(--cl-ac-c) 30%, transparent), transparent); }
.ms-ba-box.is-after .ms-ba-scan-line::before { right: 4px; left: auto; transform: none; background: linear-gradient(90deg, transparent, color-mix(in oklab, var(--cl-ac-c) 30%, transparent)); }
.ms-ba-scanfx {
  position: absolute; inset: 0; z-index: 2; pointer-events: none; opacity: 0; transition: opacity .3s;
  background-image:
    linear-gradient(color-mix(in oklab, var(--cl-ac-c) 18%, transparent) 1px, transparent 1px),
    linear-gradient(90deg, color-mix(in oklab, var(--cl-ac-c) 18%, transparent) 1px, transparent 1px);
  background-size: 32px 32px;
}
.ms-ba-box.is-scanning .ms-ba-scanfx { opacity: .6; }
.ms-ba-status {
  position: absolute; left: 50%; bottom: 1.25rem; transform: translateX(-50%); z-index: 4;
  padding: .55rem 1.2rem; border-radius: 9999px; font-weight: 700; font-size: .9rem; letter-spacing: .06em;
  text-transform: uppercase; color: #fff; background: rgb(0 0 0 / .65);
  border: 1px solid color-mix(in oklab, var(--cl-ac-c) 55%, transparent);
  font-variant-numeric: tabular-nums;
}
@media (prefers-reduced-motion: reduce) {
  .ms-ba-after, .ms-ba-scan { transition: none; }
}

/* ---------- Feedbacks : 2 bandes défilantes ---------- */
@keyframes ms-scroll-left  { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes ms-scroll-right { from { transform: translateX(-50%); } to { transform: translateX(0); } }
.ms-feedbacks .ms-kicker { color: rgb(var(--cl-accent)); }
.ms-scroll {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 10%, #000 90%, transparent);
          mask-image: linear-gradient(to right, transparent, #000 10%, #000 90%, transparent);
}
.ms-scroll-content { display: flex; gap: 1rem; width: max-content; }
.ms-scroll-left  .ms-scroll-content { animation: ms-scroll-left 40s linear infinite; }
.ms-scroll-right .ms-scroll-content { animation: ms-scroll-right 40s linear infinite; }
.ms-scroll-content:hover { animation-play-state: paused; }
.ms-review-card { flex-shrink: 0; width: min(400px, 82vw); }
.ms-review-card > div, .ms-review-card .rounded-xl { height: 100%; }
.ms-review-card .rounded-xl { border-radius: 1.25rem; transition: border-color .25s; }
.ms-review-card:hover .rounded-xl { border-color: color-mix(in oklab, var(--cl-ac-c) 55%, transparent); }
@media (prefers-reduced-motion: reduce) {
  .ms-scroll { overflow-x: auto; }
  .ms-scroll-left .ms-scroll-content, .ms-scroll-right .ms-scroll-content { animation: none; }
}

/* ---------- Persos hero : jamais agrandis au-delà de leur taille réelle (pas de flou) ---------- */
.ms-hero-char { height: auto; max-height: 92%; width: auto; max-width: 34vw; }

/* ---------- Groupes : cartes plus généreuses ---------- */
.ms-card { border-radius: 1.5rem; }
.ms-card .px-5 { padding: 1.25rem 1.5rem 1.5rem !important; }
.ms-card .ms-card-price { font-size: 1.2rem !important; }
.ms-card h3 { font-size: 1.3rem !important; margin-top: .25rem; }
.ms-card .ms-stock { font-size: .78rem; padding: .45rem .95rem; }

/* ---------- Navbar : texte des boutons sur une ligne ---------- */
.sa-navbar a, .sa-navbar button { white-space: nowrap; }

/* ---------- Badges produits (NEW, POPULAR, Save 10€...) ---------- */
.ms-badges {
  display: flex !important; flex-wrap: wrap; align-items: center; justify-content: flex-start !important;
  gap: .4rem; width: auto !important; max-width: 100%;
}
.ms-badges-overlay { position: absolute !important; top: .85rem !important; right: .85rem !important; left: auto !important; bottom: auto !important; z-index: 5 !important; justify-content: flex-end !important; max-width: 70%; }
.ms-badges-inline { margin: .1rem 0 .5rem !important; }
.ms-badge {
  display: inline-flex !important; align-items: center; gap: .35rem;
  width: auto !important; min-width: 0 !important; height: auto !important; max-width: max-content !important;
  margin: 0 !important; padding: .32rem .7rem !important; border-radius: 9999px !important;
  font-size: .72rem !important; font-weight: 700 !important; line-height: 1.1 !important;
  letter-spacing: .05em; text-transform: uppercase; white-space: nowrap;
  color: #fff !important;
  background: var(--ms-badge-bg, rgb(var(--cl-accent))) !important;
  box-shadow: 0 6px 18px -6px var(--ms-badge-bg, rgb(var(--cl-accent)));
  border: 1px solid rgb(255 255 255 / .18);
}
.ms-badge::before, .ms-badge::after { content: none !important; display: none !important; }
.ms-badge i { font-size: .8em; }
.ms-badge-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 11rem; }
.ms-badges-overlay .ms-badge { max-width: 100% !important; }

/* ==========================================================================
   MODALES (bienvenue + upsell)
   ========================================================================== */
.ms-modal-backdrop {
  position: fixed; inset: 0; z-index: 90; display: flex; align-items: center; justify-content: center;
  padding: 1rem; overflow-y: auto;
  background: rgb(0 0 0 / .72); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}
.ms-pop-enter { transition: opacity .3s ease, transform .35s cubic-bezier(.2,.9,.3,1.2); }
.ms-pop-from { opacity: 0; transform: translateY(14px) scale(.96); }
.ms-pop-to { opacity: 1; transform: none; }
.ms-modal-close {
  position: absolute; top: 1rem; right: 1rem; z-index: 3; width: 2.75rem; height: 2.75rem;
  display: grid; place-items: center; border-radius: .9rem; color: rgb(var(--cl-t-primary));
  background: rgb(255 255 255 / .05); border: 1px solid var(--cl-border); transition: background .2s;
}
.ms-modal-close:hover { background: rgb(255 255 255 / .12); }
.ms-modal-close svg { width: 1.25rem; height: 1.25rem; }
.ms-pill-soft {
  display: inline-flex; align-items: center; gap: .5rem; padding: .5rem 1rem; border-radius: 9999px;
  font-size: .78rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
  color: rgb(var(--cl-t-primary)); background: rgb(255 255 255 / .04);
  border: 1px solid color-mix(in oklab, var(--cl-ac-c) 40%, transparent);
}
.ms-pill-soft i { color: rgb(var(--cl-accent)); }

/* ---- Bienvenue ---- */
.ms-welcome {
  position: relative; overflow: hidden; width: 100%; max-width: 30rem; text-align: center;
  padding: 2.75rem 2rem 2rem; border-radius: 2rem;
  background: linear-gradient(160deg, color-mix(in oklab, var(--cl-ac-c) 16%, #0c0a12), #07060a 65%);
  border: 1px solid color-mix(in oklab, var(--cl-ac-c) 30%, transparent);
  box-shadow: 0 40px 100px -30px color-mix(in oklab, var(--cl-ac-c) 55%, transparent);
}
.ms-welcome-glow {
  position: absolute; top: -40%; left: 50%; width: 120%; height: 80%; transform: translateX(-50%); pointer-events: none;
  background: radial-gradient(closest-side, color-mix(in oklab, var(--cl-ac-c) 35%, transparent), transparent);
}
.ms-welcome > *:not(.ms-welcome-glow):not(.ms-modal-close) { position: relative; }
.ms-welcome-big {
  margin-top: 1.25rem; font-size: clamp(4.5rem, 16vw, 6.5rem); font-weight: 800; line-height: .9; letter-spacing: -0.05em;
  color: rgb(var(--cl-accent)); text-shadow: 0 0 40px color-mix(in oklab, var(--cl-ac-c) 55%, transparent);
}
.ms-welcome-big span { font-size: .55em; margin-left: .05em; }
.ms-welcome-title { margin-top: .5rem; font-size: 1.6rem; font-weight: 800; letter-spacing: -0.02em; color: rgb(var(--cl-t-primary)); }
.ms-welcome-title em { font-style: normal; color: rgb(var(--cl-accent)); }
.ms-welcome-text { margin-top: .6rem; color: rgb(var(--cl-t-muted)); }
.ms-code {
  margin: 1.5rem auto 0; width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: .55rem .55rem .55rem 1.25rem; border-radius: 1rem; cursor: pointer;
  border: 2px dashed color-mix(in oklab, var(--cl-ac-c) 60%, transparent); background: rgb(0 0 0 / .35);
  transition: border-color .2s, background .2s;
}
.ms-code:hover { border-color: rgb(var(--cl-accent)); background: color-mix(in oklab, var(--cl-ac-c) 8%, rgb(0 0 0 / .35)); }
.ms-code-value { font-size: 1.35rem; font-weight: 800; letter-spacing: .12em; color: rgb(var(--cl-t-primary)); font-family: ui-monospace, 'SFMono-Regular', Menlo, monospace; }
.ms-code-action { padding: .55rem 1rem; border-radius: .7rem; font-weight: 700; font-size: .85rem; color: rgb(var(--cl-t-accent)); background: rgb(var(--cl-accent)); min-width: 5.5rem; }
.ms-welcome-cta { margin-top: 1rem; width: 100%; padding: .95rem 1.5rem !important; border-radius: 9999px; font-size: 1.05rem; display: inline-flex; justify-content: center; gap: .6rem; }
.ms-welcome-fine { margin-top: 1rem; font-size: .78rem; color: rgb(var(--cl-t-muted)); }

/* ---- Upsell ---- */
.ms-upsell {
  position: relative; width: 100%; max-width: 62rem; display: grid; grid-template-columns: 1fr; overflow: hidden;
  border-radius: 2rem; border: 1px solid color-mix(in oklab, var(--cl-fg-c) 14%, transparent);
  background: linear-gradient(135deg, #0d0b14, #07060b 60%, color-mix(in oklab, var(--cl-ac-c) 10%, #07060b));
  box-shadow: 0 40px 120px -30px color-mix(in oklab, var(--cl-ac-c) 45%, transparent);
}
@media (min-width: 900px) { .ms-upsell { grid-template-columns: .9fr 1.4fr; } }
.ms-upsell-media {
  position: relative; min-height: 14rem; overflow: hidden;
  background: linear-gradient(160deg, color-mix(in oklab, var(--cl-ac-c) 45%, #120318), #08060c);
  border-bottom: 1px solid var(--cl-border);
}
@media (min-width: 900px) { .ms-upsell-media { border-bottom: 0; border-right: 1px solid var(--cl-border); } }
.ms-upsell-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .75; }
.ms-upsell-media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, #07060b 5%, transparent 65%); }
.ms-upsell-media-info { position: absolute; left: 1.75rem; right: 1.75rem; bottom: 1.5rem; z-index: 2; display: flex; flex-direction: column; gap: .25rem; }
.ms-upsell-kicker { font-size: .8rem; font-weight: 800; letter-spacing: .06em; color: rgb(var(--cl-accent)); }
.ms-upsell-name { font-size: clamp(1.6rem, 3vw, 2.2rem); font-weight: 800; letter-spacing: -0.02em; color: #fff; line-height: 1.05; }
.ms-upsell-price { font-size: clamp(2rem, 4vw, 2.8rem); font-weight: 800; color: rgb(var(--cl-accent)); line-height: 1.1; }
.ms-upsell-price s { font-size: .45em; color: rgb(var(--cl-t-muted)); font-weight: 600; margin-left: .35rem; }
.ms-upsell-body { padding: 2rem 1.5rem 1.75rem; display: flex; flex-direction: column; align-items: flex-start; gap: 1.1rem; }
@media (min-width: 900px) { .ms-upsell-body { padding: 2.5rem 2.5rem 2.25rem; } }
.ms-upsell-title { font-size: clamp(1.7rem, 3.2vw, 2.6rem); font-weight: 800; letter-spacing: -0.03em; line-height: 1.08; color: rgb(var(--cl-t-primary)); padding-right: 2.5rem; }
.ms-upsell-text { font-size: 1.02rem; line-height: 1.6; color: rgb(var(--cl-t-muted)); }
.ms-upsell-features { width: 100%; display: grid; gap: .75rem; grid-template-columns: 1fr; }
@media (min-width: 640px) { .ms-upsell-features { grid-template-columns: repeat(3, 1fr); } }
.ms-upsell-feature {
  display: flex; flex-direction: column; gap: .35rem; padding: 1rem 1.1rem; border-radius: 1.1rem;
  background: rgb(255 255 255 / .03); border: 1px solid var(--cl-border);
}
.ms-upsell-feature i { color: rgb(var(--cl-accent)); font-size: 1.15rem; margin-bottom: .2rem; }
.ms-upsell-feature strong { font-weight: 800; color: rgb(var(--cl-t-primary)); }
.ms-upsell-feature span { font-size: .9rem; color: rgb(var(--cl-t-muted)); line-height: 1.4; }
.ms-upsell-actions { width: 100%; display: flex; flex-direction: column; gap: .75rem; margin-top: .25rem; }
@media (min-width: 640px) { .ms-upsell-actions { flex-direction: row; } }
.ms-upsell-add {
  flex: 1.4; display: inline-flex; align-items: center; justify-content: center; gap: .6rem;
  padding: 1rem 1.5rem !important; border-radius: 1.1rem !important; font-size: 1.05rem;
  background-image: linear-gradient(120deg, color-mix(in oklab, var(--cl-ac-c) 70%, #E02A0C), rgb(var(--cl-accent))) !important;
}
.ms-upsell-skip {
  flex: 1; padding: 1rem 1.5rem; border-radius: 1.1rem; font-weight: 700; color: rgb(var(--cl-t-muted));
  background: rgb(255 255 255 / .03); border: 1px solid var(--cl-border); transition: color .2s, border-color .2s;
}
.ms-upsell-skip:hover { color: rgb(var(--cl-t-primary)); border-color: color-mix(in oklab, var(--cl-fg-c) 25%, transparent); }

/* ==========================================================================
   CHECKOUT (/cart)
   ========================================================================== */
.ms-checkout .ms-pill-secure { color: rgb(var(--cl-accent)); }
.ms-checkout-title { margin-top: 1.1rem; font-size: clamp(2.2rem, 5vw, 3.8rem); font-weight: 800; letter-spacing: -0.035em; line-height: 1.05; color: rgb(var(--cl-t-primary)); }
.ms-checkout-grid { display: grid; gap: 1.5rem; grid-template-columns: 1fr; align-items: start; }
@media (min-width: 1024px) { .ms-checkout-grid { grid-template-columns: minmax(0, 1.65fr) minmax(0, 1fr); gap: 2rem; } }
.ms-step, .ms-summary {
  border-radius: 1.75rem; padding: 1.5rem; border: 1px solid var(--cl-border);
  background: linear-gradient(160deg, rgb(255 255 255 / .035), rgb(255 255 255 / .01));
}
@media (min-width: 768px) { .ms-step, .ms-summary { padding: 1.9rem 2rem; } }
.ms-step-head { display: flex; align-items: center; gap: .85rem; margin-bottom: 1.25rem; }
.ms-step-head h2 { font-size: 1.45rem; font-weight: 800; letter-spacing: -0.02em; color: rgb(var(--cl-t-primary)); }
.ms-step-num {
  width: 2.2rem; height: 2.2rem; flex-shrink: 0; display: grid; place-items: center; border-radius: .7rem;
  font-weight: 800; color: rgb(var(--cl-t-accent));
  background: linear-gradient(135deg, color-mix(in oklab, var(--cl-ac-c) 70%, #E02A0C), rgb(var(--cl-accent)));
  box-shadow: 0 8px 20px -8px rgb(var(--cl-accent));
}
.ms-step-meta { margin-left: auto; font-size: .85rem; color: rgb(var(--cl-t-muted)); font-weight: 600; }
.ms-checkout .sa-cart-page-item { border-radius: 1.1rem; background: rgb(0 0 0 / .25); }
.ms-label { display: block; margin-bottom: .55rem; font-size: .8rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: rgb(var(--cl-t-muted)); }
.ms-input {
  width: 100%; padding: 1rem 1.15rem; border-radius: 1rem; font-size: 1rem; color: rgb(var(--cl-t-primary));
  background: rgb(0 0 0 / .45); border: 1px solid var(--cl-border); outline: none; transition: border-color .2s, box-shadow .2s;
}
.ms-input:focus { border-color: rgb(var(--cl-accent)); box-shadow: 0 0 0 4px var(--cl-accent-soft); }
.ms-input.is-error { border-color: rgb(var(--cl-error)); }
.ms-hint { margin-top: .55rem; font-size: .85rem; color: rgb(var(--cl-t-muted)); }
.ms-login-link { margin-top: 1rem; display: inline-flex; align-items: center; gap: .5rem; font-weight: 700; font-size: .9rem; color: rgb(var(--cl-accent)); }
.ms-login-link:hover { text-decoration: underline; }
.ms-signed { display: flex; gap: .75rem; align-items: flex-start; padding: 1rem 1.1rem; border-radius: 1rem; background: rgb(0 0 0 / .3); border: 1px solid var(--cl-border); color: rgb(var(--cl-t-muted)); }
.ms-signed i { color: rgb(var(--cl-success)); margin-top: .2rem; }
.ms-signed strong { color: rgb(var(--cl-t-primary)); }
.ms-pay-info { display: flex; gap: 1rem; align-items: flex-start; padding: 1.1rem 1.2rem; border-radius: 1.1rem; background: rgb(0 0 0 / .3); border: 1px solid color-mix(in oklab, var(--cl-ac-c) 35%, transparent); }
.ms-pay-icon { width: 3rem; height: 3rem; flex-shrink: 0; display: grid; place-items: center; border-radius: .9rem; background: var(--cl-accent-soft); color: rgb(var(--cl-accent)); font-size: 1.2rem; }
.ms-pay-info strong { display: block; color: rgb(var(--cl-t-primary)); font-weight: 800; margin-bottom: .25rem; }
.ms-pay-info p { font-size: .9rem; color: rgb(var(--cl-t-muted)); line-height: 1.5; }

.ms-summary-wrap { display: flex; flex-direction: column; gap: 1rem; }
@media (min-width: 1024px) { .ms-summary-wrap { position: sticky; top: 7rem; } }
.ms-summary-title { font-size: 1.45rem; font-weight: 800; letter-spacing: -0.02em; color: rgb(var(--cl-t-primary)); margin-bottom: 1.25rem; }
.ms-summary-items { display: flex; flex-direction: column; gap: .9rem; padding-bottom: 1.25rem; border-bottom: 1px solid var(--cl-border); }
.ms-summary-item { display: flex; align-items: center; gap: .9rem; }
.ms-summary-item img, .ms-summary-noimg { width: 3.75rem; height: 3.75rem; flex-shrink: 0; border-radius: .85rem; object-fit: cover; border: 1px solid var(--cl-border); }
.ms-summary-noimg { display: grid; place-items: center; background: var(--cl-accent-soft); color: rgb(var(--cl-accent)); }
.ms-summary-name { font-weight: 800; color: rgb(var(--cl-t-primary)); line-height: 1.25; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.ms-summary-variant { font-size: .85rem; color: rgb(var(--cl-t-muted)); }
.ms-summary-price { font-weight: 800; color: rgb(var(--cl-t-primary)); white-space: nowrap; }
.ms-summary-promo { display: flex; gap: .6rem; align-items: flex-start; margin: 1.25rem 0; padding: .85rem 1rem; border-radius: .9rem; font-size: .85rem; color: rgb(var(--cl-t-muted)); background: rgb(0 0 0 / .3); border: 1px dashed color-mix(in oklab, var(--cl-ac-c) 40%, transparent); }
.ms-summary-promo i { color: rgb(var(--cl-accent)); margin-top: .15rem; }
.ms-summary-totals .ms-row { display: flex; justify-content: space-between; gap: 1rem; padding: .45rem 0; color: rgb(var(--cl-t-muted)); }
.ms-row-total { margin-top: .6rem; padding-top: 1rem !important; border-top: 1px solid var(--cl-border); align-items: baseline; }
.ms-row-total span:first-child { font-size: 1.25rem; font-weight: 800; color: rgb(var(--cl-t-primary)); }
.ms-row-total span:last-child { font-size: 1.9rem; font-weight: 800; letter-spacing: -0.02em; color: rgb(var(--cl-accent)); }
.ms-checkout-btn {
  margin-top: 1.25rem; width: 100%; display: inline-flex; align-items: center; justify-content: center; gap: .6rem;
  padding: 1.05rem 1.5rem !important; border-radius: 1.1rem !important; font-size: 1.05rem; font-weight: 800;
  background-image: linear-gradient(120deg, color-mix(in oklab, var(--cl-ac-c) 70%, #E02A0C), rgb(var(--cl-accent))) !important;
}
.ms-summary-note { display: flex; gap: .7rem; align-items: flex-start; margin-top: 1.25rem; font-size: .9rem; line-height: 1.5; color: rgb(var(--cl-t-muted)); }
.ms-summary-note i { color: rgb(var(--cl-accent)); margin-top: .2rem; }
.ms-summary-pay { margin-top: 1.25rem; padding-top: 1.1rem; border-top: 1px solid var(--cl-border); }
.ms-summary-pay-label { display: flex; align-items: center; gap: .45rem; margin-bottom: .6rem; font-size: .75rem; font-weight: 800; letter-spacing: .08em; color: rgb(var(--cl-t-muted)); }
.ms-summary-pay-label i { color: rgb(var(--cl-accent)); }

@media (prefers-reduced-motion: reduce) {
  .ms-pop-enter { transition: opacity .2s; }
  .ms-pop-from { transform: none; }
}

/* ---------- Stats : panneau fondu dans le thème ---------- */
.ms-stats-panel {
  position: relative; isolation: isolate; overflow: hidden; border-radius: 2rem;
  background:
    linear-gradient(180deg, color-mix(in oklab, var(--cl-ac-c) 7%, transparent), transparent 70%),
    rgb(255 255 255 / .015);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .05), 0 30px 80px -40px color-mix(in oklab, var(--cl-ac-c) 45%, transparent);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}
/* contour dégradé : rose en haut, disparaît vers le bas */
.ms-stats-panel::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px; pointer-events: none; z-index: 2;
  background: linear-gradient(180deg, color-mix(in oklab, var(--cl-ac-c) 55%, transparent), rgb(255 255 255 / .06) 45%, rgb(255 255 255 / .02));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
}
.ms-stats-glow {
  position: absolute; z-index: -1; top: -60%; left: 50%; width: 70%; height: 120%; transform: translateX(-50%);
  background: radial-gradient(closest-side, color-mix(in oklab, var(--cl-ac-c) 22%, transparent), transparent);
  pointer-events: none;
}
.ms-stats-grid { display: grid; grid-template-columns: 1fr; }
@media (min-width: 640px) { .ms-stats-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .ms-stats-grid { grid-template-columns: repeat(4, 1fr); } }

.ms-stat {
  --c: var(--cl-accent);
  position: relative; display: flex; align-items: center; gap: 1.1rem;
  padding: 1.9rem 1.75rem; transition: background .3s ease;
}
.ms-stat-highlight { --c: var(--cl-highlight); }
.ms-stat-blue   { --c: 59, 130, 246; }
.ms-stat-purple { --c: 139, 92, 246; }
.ms-stat-green  { --c: 34, 197, 94; }
.ms-stat-gold   { --c: 234, 179, 8; }
.ms-stat-pink   { --c: 255, 0, 243; }
.ms-stat-accent { --c: var(--cl-accent); }
/* séparateurs fins qui s'estompent */
.ms-stat + .ms-stat::before {
  content: ""; position: absolute; left: 0; top: 22%; bottom: 22%; width: 1px;
  background: linear-gradient(180deg, transparent, rgb(255 255 255 / .1), transparent);
}
@media (max-width: 1023px) and (min-width: 640px) {
  .ms-stat:nth-child(3)::before { display: none; }
  .ms-stat:nth-child(n+3)::after {
    content: ""; position: absolute; top: 0; left: 15%; right: 15%; height: 1px;
    background: linear-gradient(90deg, transparent, rgb(255 255 255 / .1), transparent);
  }
}
@media (max-width: 639px) {
  .ms-stat + .ms-stat::before { left: 15%; right: 15%; top: 0; bottom: auto; width: auto; height: 1px;
    background: linear-gradient(90deg, transparent, rgb(255 255 255 / .1), transparent); }
}
.ms-stat:hover { background: radial-gradient(60% 90% at 50% 50%, color-mix(in oklab, rgb(var(--c)) 9%, transparent), transparent 75%); }

.ms-stat-icon {
  position: relative; width: 3.25rem; height: 3.25rem; flex-shrink: 0; display: grid; place-items: center;
  border-radius: 1rem; font-size: 1.2rem; color: rgb(var(--c));
  background: linear-gradient(145deg, color-mix(in oklab, rgb(var(--c)) 20%, transparent), color-mix(in oklab, rgb(var(--c)) 5%, transparent));
  box-shadow: inset 0 0 0 1px color-mix(in oklab, rgb(var(--c)) 30%, transparent), 0 10px 30px -12px rgb(var(--c));
}
.ms-stat-icon i { filter: drop-shadow(0 0 8px color-mix(in oklab, rgb(var(--c)) 60%, transparent)); }
.ms-stat-value {
  font-size: clamp(1.9rem, 2.5vw, 2.4rem); font-weight: 800; letter-spacing: -0.035em; line-height: 1; white-space: nowrap;
  color: rgb(var(--cl-t-primary));
}
.ms-stat-suffix { margin-left: .04em; color: rgb(var(--c)); }
.ms-stat-label { margin-top: .5rem; font-size: .92rem; font-weight: 600; color: rgb(var(--cl-t-muted)); }

/* ==========================================================================
   DOCS (/faq)
   ========================================================================== */
.ms-docs-hero { position: relative; padding: 4.5rem 0 4rem; border-bottom: 1px solid var(--cl-border); overflow: hidden; }
.ms-docs-hero::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(60% 80% at 15% 0%, color-mix(in oklab, var(--cl-ac-c) 18%, transparent), transparent 70%),
              radial-gradient(40% 60% at 85% 10%, rgb(139 92 246 / .12), transparent 70%);
}
.ms-docs-hero-grid { position: relative; display: grid; gap: 2.5rem; align-items: end; grid-template-columns: 1fr; }
@media (min-width: 1024px) { .ms-docs-hero-grid { grid-template-columns: 1.1fr 1fr; gap: 3rem; } }
.ms-docs-badge { display: inline-flex; align-items: center; gap: .5rem; padding: .45rem 1rem; border-radius: 9999px; font-weight: 700; font-size: .9rem; color: rgb(var(--cl-t-accent)); background: rgb(var(--cl-accent)); }
.ms-docs-title { margin-top: 1.5rem; font-size: clamp(2.6rem, 6.5vw, 5.2rem); font-weight: 800; line-height: 1; letter-spacing: -0.045em; color: rgb(var(--cl-t-primary)); }
.ms-docs-lead { margin-top: 1.4rem; max-width: 40rem; font-size: clamp(1rem, 1.4vw, 1.2rem); line-height: 1.75; color: rgb(var(--cl-t-muted)); }
.ms-docs-counters { margin-top: 2rem; display: grid; gap: .9rem; grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: 36rem; }
.ms-docs-counter { padding: 1.1rem 1.2rem; border-radius: 1.25rem; border: 1px solid var(--cl-border); background: rgb(255 255 255 / .02); }
.ms-docs-counter strong { display: block; font-size: 1.9rem; font-weight: 800; color: rgb(var(--cl-t-primary)); line-height: 1; }
.ms-docs-counter span { display: block; margin-top: .45rem; font-size: .85rem; color: rgb(var(--cl-t-muted)); }
.ms-docs-searchcard { padding: 1rem; border-radius: 2rem; border: 1px solid var(--cl-border); background: rgb(255 255 255 / .02); display: flex; flex-direction: column; gap: .9rem; }
.ms-docs-searchinfo { display: flex; align-items: center; gap: 1rem; padding: 1.1rem 1.25rem; border-radius: 1.4rem; border: 1px solid color-mix(in oklab, var(--cl-ac-c) 35%, transparent); background: color-mix(in oklab, var(--cl-ac-c) 8%, transparent); }
.ms-docs-searchicon { width: 3.2rem; height: 3.2rem; flex-shrink: 0; display: grid; place-items: center; border-radius: 9999px; background: rgb(0 0 0 / .45); color: rgb(var(--cl-accent)); font-size: 1.15rem; }
.ms-docs-searchinfo strong { display: block; font-weight: 800; color: rgb(var(--cl-t-primary)); }
.ms-docs-searchinfo p { font-size: .9rem; color: rgb(var(--cl-t-muted)); }
.ms-docs-search { display: flex; align-items: center; gap: .8rem; padding: 0 1.25rem; border-radius: 1.4rem; border: 1px solid var(--cl-border); background: rgb(0 0 0 / .4); transition: border-color .2s, box-shadow .2s; }
.ms-docs-search:focus-within { border-color: rgb(var(--cl-accent)); box-shadow: 0 0 0 4px var(--cl-accent-soft); }
.ms-docs-search > i { color: rgb(var(--cl-accent)); }
.ms-docs-search input { flex: 1; min-width: 0; padding: 1.1rem 0; background: none; border: 0; outline: none; font-size: 1.05rem; font-weight: 600; color: rgb(var(--cl-t-primary)); }
.ms-docs-search input::placeholder { color: rgb(var(--cl-t-muted)); }
.ms-docs-search button { color: rgb(var(--cl-t-muted)); padding: .35rem; }

.ms-docs-grid { display: grid; gap: 2rem; padding-top: 3rem; grid-template-columns: 1fr; align-items: start; }
@media (min-width: 1024px) { .ms-docs-grid { grid-template-columns: 17rem minmax(0, 1fr); gap: 3rem; } }
.ms-docs-side { padding: 1rem; border-radius: 2rem; border: 1px solid var(--cl-border); background: rgb(255 255 255 / .015); }
@media (min-width: 1024px) { .ms-docs-side { position: sticky; top: 7rem; max-height: calc(100vh - 8rem); overflow-y: auto; } }
.ms-docs-sidecard { padding: 1.25rem; border-radius: 1.4rem; border: 1px solid var(--cl-border); background: rgb(0 0 0 / .3); margin-bottom: 1rem; }
.ms-docs-sidecard i { color: rgb(var(--cl-accent)); font-size: 1.3rem; }
.ms-docs-sidecard strong { display: block; margin-top: .9rem; font-weight: 800; color: rgb(var(--cl-t-primary)); }
.ms-docs-sidecard p { margin-top: .35rem; font-size: .85rem; line-height: 1.55; color: rgb(var(--cl-t-muted)); }
.ms-docs-sidelabel { margin: 1.1rem .6rem .4rem; font-size: .75rem; font-weight: 800; letter-spacing: .14em; color: rgb(var(--cl-t-muted)); }
.ms-docs-sidelink { display: flex; align-items: center; justify-content: space-between; gap: .5rem; padding: .7rem .75rem; border-radius: .9rem; font-weight: 700; color: rgb(var(--cl-t-muted)); transition: background .2s, color .2s; }
.ms-docs-sidelink i { font-size: .75rem; opacity: .6; }
.ms-docs-sidelink:hover { background: rgb(255 255 255 / .04); color: rgb(var(--cl-t-primary)); }

.ms-docs-section { scroll-margin-top: 7rem; margin-bottom: 3.5rem; }
.ms-docs-sechead { display: flex; gap: 1.1rem; align-items: flex-start; margin-bottom: 1.6rem; }
.ms-docs-secicon { width: 3.2rem; height: 3.2rem; flex-shrink: 0; display: grid; place-items: center; border-radius: 9999px; border: 1px solid var(--cl-border); background: color-mix(in oklab, var(--cl-ac-c) 10%, transparent); color: rgb(var(--cl-accent)); font-size: 1.1rem; }
.ms-docs-kicker { font-size: .8rem; font-weight: 800; letter-spacing: .18em; text-transform: uppercase; color: rgb(var(--cl-accent)); }
.ms-docs-h2 { margin-top: .2rem; font-size: clamp(1.9rem, 3.5vw, 2.7rem); font-weight: 800; letter-spacing: -0.035em; line-height: 1.1; color: rgb(var(--cl-t-primary)); }
.ms-docs-sectext { margin-top: .6rem; color: rgb(var(--cl-t-muted)); }
.ms-docs-cards { display: grid; gap: 1rem; grid-template-columns: 1fr; }
@media (min-width: 768px) { .ms-docs-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.ms-docs-card {
  display: flex; align-items: flex-start; gap: 1.1rem; width: 100%; text-align: left;
  padding: 1.4rem 1.4rem; border-radius: 1.6rem; border: 1px solid var(--cl-border);
  background: linear-gradient(160deg, rgb(255 255 255 / .03), rgb(255 255 255 / .01));
  transition: border-color .25s, transform .25s, background .25s;
}
.ms-docs-card:hover { border-color: color-mix(in oklab, var(--cl-ac-c) 55%, transparent); transform: translateY(-2px); background: color-mix(in oklab, var(--cl-ac-c) 5%, transparent); }
.ms-docs-cardicon { width: 3rem; height: 3rem; flex-shrink: 0; display: grid; place-items: center; border-radius: 9999px; background: color-mix(in oklab, var(--cl-ac-c) 12%, transparent); color: rgb(var(--cl-accent)); font-size: 1.05rem; }
.ms-docs-cardbody { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: .35rem; }
.ms-docs-cardbody strong { font-size: 1.12rem; font-weight: 800; letter-spacing: -0.01em; color: rgb(var(--cl-t-primary)); }
.ms-docs-cardbody span { font-size: .95rem; line-height: 1.55; color: rgb(var(--cl-t-muted)); }
.ms-docs-cardarrow { margin-top: .3rem; color: rgb(var(--cl-t-muted)); transition: transform .2s, color .2s; }
.ms-docs-card:hover .ms-docs-cardarrow { transform: translateX(3px); color: rgb(var(--cl-accent)); }
.ms-docs-prod { align-items: center; padding: .9rem 1.2rem .9rem .9rem; }
.ms-docs-prod img { width: 5.5rem; aspect-ratio: 16/9; flex-shrink: 0; object-fit: cover; border-radius: .8rem; border: 1px solid var(--cl-border); }
.ms-docs-groupname { scroll-margin-top: 7rem; margin: 1.75rem 0 .9rem; font-size: .8rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: rgb(var(--cl-t-muted)); }
.ms-docs-empty { margin-bottom: 2rem; padding: 1.25rem 1.4rem; border-radius: 1.2rem; border: 1px dashed var(--cl-border); color: rgb(var(--cl-t-muted)); }
.ms-docs-empty a { color: rgb(var(--cl-accent)); font-weight: 700; }

.ms-doc-article {
  position: relative; width: 100%; max-width: 44rem; max-height: calc(100vh - 2rem); overflow-y: auto;
  padding: 2.25rem 1.75rem 1.75rem; border-radius: 2rem; border: 1px solid var(--cl-border);
  background: linear-gradient(160deg, color-mix(in oklab, var(--cl-ac-c) 8%, #0c0b11), #08070b 60%);
  box-shadow: 0 40px 100px -30px color-mix(in oklab, var(--cl-ac-c) 40%, transparent);
}
@media (min-width: 768px) { .ms-doc-article { padding: 2.75rem 2.75rem 2.25rem; } }
.ms-doc-title { margin-top: .5rem; padding-right: 3rem; display: flex; align-items: center; gap: .75rem; font-size: clamp(1.7rem, 3.5vw, 2.3rem); font-weight: 800; letter-spacing: -0.03em; line-height: 1.15; color: rgb(var(--cl-t-primary)); }
.ms-doc-title i { color: rgb(var(--cl-accent)); font-size: .8em; }
.ms-doc-summary { margin-top: .75rem; font-size: 1.05rem; color: rgb(var(--cl-t-muted)); }
.ms-doc-body { margin-top: 1.5rem; padding-top: 1.5rem; border-top: 1px solid var(--cl-border); white-space: pre-line; line-height: 1.8; font-size: 1rem; color: color-mix(in oklab, rgb(var(--cl-t-primary)) 88%, transparent); }
.ms-doc-help { margin-top: 1.75rem; padding: 1.1rem 1.25rem; border-radius: 1.2rem; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .9rem; background: rgb(0 0 0 / .35); border: 1px solid var(--cl-border); color: rgb(var(--cl-t-muted)); font-weight: 600; }
.ms-doc-help .sa-btn { display: inline-flex; align-items: center; gap: .5rem; padding: .7rem 1.2rem; border-radius: 9999px; }

/* ==========================================================================
   STATUS (/status)
   ========================================================================== */
.ms-status { position: relative; }
.ms-st-hero { padding: 4.5rem 0 2.25rem; text-align: center; max-width: 46rem; margin: 0 auto; }
.ms-st-live {
  display: inline-flex; align-items: center; gap: .6rem; padding: .5rem 1.1rem; border-radius: 9999px;
  font-size: .78rem; font-weight: 800; letter-spacing: .14em; color: rgb(var(--cl-t-primary));
  background: rgb(255 255 255 / .03); border: 1px solid color-mix(in oklab, var(--cl-ac-c) 40%, transparent);
}
.ms-st-live-dot { position: relative; width: .55rem; height: .55rem; border-radius: 9999px; background: rgb(var(--cl-success)); }
.ms-st-live-dot .pulsating { background: rgb(var(--cl-success)); }
.ms-st-title { margin-top: 1.25rem; font-size: clamp(2.6rem, 6vw, 4.6rem); font-weight: 800; letter-spacing: -0.045em; line-height: 1.02; color: rgb(var(--cl-t-primary)); }
.ms-st-sub { margin-top: 1rem; font-size: clamp(1rem, 1.3vw, 1.15rem); line-height: 1.7; color: rgb(var(--cl-t-muted)); }

.ms-st-overview {
  --sc: rgb(var(--cl-success));
  position: relative; max-width: 58rem; margin: 0 auto 1.5rem; padding: 1.6rem 1.75rem; border-radius: 1.75rem; overflow: hidden;
  background: linear-gradient(135deg, color-mix(in oklab, var(--sc) 10%, transparent), rgb(255 255 255 / .015) 55%);
  border: 1px solid color-mix(in oklab, var(--sc) 28%, transparent);
  box-shadow: 0 30px 80px -45px var(--sc);
}
.ms-st-ov-main { display: flex; align-items: center; gap: 1.1rem; }
.ms-st-ov-icon { width: 3.4rem; height: 3.4rem; flex-shrink: 0; display: grid; place-items: center; border-radius: 1rem; font-size: 1.4rem; color: var(--sc); background: color-mix(in oklab, var(--sc) 14%, transparent); box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--sc) 35%, transparent); }
.ms-st-ov-title { font-size: clamp(1.15rem, 2vw, 1.5rem); font-weight: 800; letter-spacing: -0.02em; color: rgb(var(--cl-t-primary)); }
.ms-st-ov-meta { margin-top: .25rem; font-size: .9rem; color: rgb(var(--cl-t-muted)); }
.ms-st-ov-bar, .ms-st-bar { display: flex; gap: 3px; height: .5rem; margin-top: 1.25rem; border-radius: 9999px; overflow: hidden; background: rgb(255 255 255 / .05); }
.ms-st-ov-bar span, .ms-st-bar span { display: block; height: 100%; border-radius: 9999px; box-shadow: 0 0 12px currentColor; }
.ms-st-legend { display: flex; flex-wrap: wrap; gap: .5rem 1.4rem; margin-top: .9rem; font-size: .85rem; color: rgb(var(--cl-t-muted)); }
.ms-st-legend span { display: inline-flex; align-items: center; gap: .45rem; }
.ms-st-legend i { width: .55rem; height: .55rem; border-radius: 9999px; background: var(--sc); }
.ms-st-legend b { color: rgb(var(--cl-t-primary)); }

.ms-st-toolbar { max-width: 58rem; margin: 0 auto 2.5rem; display: flex; flex-direction: column; gap: .9rem; }
@media (min-width: 900px) { .ms-st-toolbar { flex-direction: row; align-items: center; } }
.ms-st-chips { display: flex; flex-wrap: wrap; gap: .5rem; }
.ms-st-chip {
  --sc: rgb(var(--cl-accent));
  display: inline-flex; align-items: center; gap: .5rem; padding: .6rem 1rem; border-radius: 9999px;
  font-size: .8rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: rgb(var(--cl-t-muted));
  background: rgb(255 255 255 / .03); border: 1px solid var(--cl-border); transition: all .2s;
}
.ms-st-chip i { width: .5rem; height: .5rem; border-radius: 9999px; background: var(--sc); box-shadow: 0 0 8px var(--sc); }
.ms-st-chip b { font-variant-numeric: tabular-nums; opacity: .7; }
.ms-st-chip:hover { color: rgb(var(--cl-t-primary)); }
.ms-st-chip.is-on { color: rgb(var(--cl-t-primary)); background: color-mix(in oklab, var(--sc) 14%, transparent); border-color: color-mix(in oklab, var(--sc) 55%, transparent); }
.ms-st-search { flex: 1; display: flex; align-items: center; gap: .75rem; padding: 0 1.1rem; border-radius: 9999px; border: 1px solid var(--cl-border); background: rgb(0 0 0 / .35); transition: border-color .2s, box-shadow .2s; }
.ms-st-search:focus-within { border-color: rgb(var(--cl-accent)); box-shadow: 0 0 0 4px var(--cl-accent-soft); }
.ms-st-search i { color: rgb(var(--cl-t-muted)); }
.ms-st-search input { flex: 1; min-width: 0; padding: .85rem 0; background: none; border: 0; outline: none; color: rgb(var(--cl-t-primary)); font-weight: 500; }
.ms-st-search input::placeholder { color: rgb(var(--cl-t-muted)); }

.ms-st-groups { max-width: 72rem; margin: 0 auto; columns: 1; column-gap: 1.25rem; }
@media (min-width: 1024px) { .ms-st-groups { columns: 2; } }
.ms-st-group {
  break-inside: avoid; margin-bottom: 1.25rem; padding: 1.4rem; border-radius: 1.75rem;
  background: linear-gradient(170deg, rgb(255 255 255 / .035), rgb(255 255 255 / .01));
  border: 1px solid var(--cl-border);
}
.ms-st-ghead { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.ms-st-ghead h2 { font-size: 1.25rem; font-weight: 800; letter-spacing: -0.02em; color: rgb(var(--cl-t-primary)); }
.ms-st-gcount { flex-shrink: 0; padding: .3rem .75rem; border-radius: 9999px; font-size: .78rem; font-weight: 800; color: var(--sc); background: color-mix(in oklab, var(--sc) 12%, transparent); font-variant-numeric: tabular-nums; }
.ms-st-group .ms-st-bar { height: .3rem; margin: .9rem 0 1.1rem; }
.ms-st-rows { display: flex; flex-direction: column; gap: .5rem; }

.ms-st-row {
  --sc: rgb(var(--cl-success));
  position: relative; display: flex; align-items: center; gap: .9rem; padding: .65rem .9rem .65rem .65rem; border-radius: 1.1rem;
  background: rgb(0 0 0 / .28); border: 1px solid transparent; transition: border-color .2s, background .2s, transform .2s;
}
.ms-st-row::before { content: ""; position: absolute; left: 0; top: 25%; bottom: 25%; width: 3px; border-radius: 0 3px 3px 0; background: var(--sc); box-shadow: 0 0 10px var(--sc); }
.ms-st-row:hover { border-color: color-mix(in oklab, var(--sc) 40%, transparent); background: color-mix(in oklab, var(--sc) 5%, rgb(0 0 0 / .28)); transform: translateX(2px); }
.ms-st-thumb { width: 3.6rem; aspect-ratio: 16/9; flex-shrink: 0; object-fit: cover; border-radius: .6rem; border: 1px solid var(--cl-border); }
.ms-st-thumb-empty { display: grid; place-items: center; background: var(--cl-accent-soft); color: rgb(var(--cl-accent)); }
.ms-st-name { flex: 1; min-width: 0; font-weight: 700; color: rgb(var(--cl-t-primary)); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ms-st-pill { flex-shrink: 0; display: inline-flex; align-items: center; gap: .5rem; padding: .35rem .8rem; border-radius: 9999px; font-size: .7rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--sc); background: color-mix(in oklab, var(--sc) 12%, transparent); border: 1px solid color-mix(in oklab, var(--sc) 30%, transparent); }
.ms-st-dot { position: relative; width: .45rem; height: .45rem; border-radius: 9999px; background: var(--sc); }
.ms-st-dot .pulsating { background: var(--sc); }
.ms-st-arrow { font-size: .7rem; color: rgb(var(--cl-t-muted)); opacity: 0; transition: opacity .2s; }
.ms-st-row:hover .ms-st-arrow { opacity: 1; }
.ms-st-empty { text-align: center; padding: 2.5rem 0; color: rgb(var(--cl-t-muted)); }
@media (max-width: 480px) { .ms-st-thumb { display: none; } }

/* ---------- STATUS : couleurs du thème (seules les boules gardent la couleur du statut) ---------- */
.ms-status { --ac: rgb(var(--cl-accent)); }
.ms-st-overview {
  background: linear-gradient(135deg, color-mix(in oklab, var(--ac) 10%, transparent), rgb(255 255 255 / .015) 55%);
  border-color: color-mix(in oklab, var(--ac) 28%, transparent);
  box-shadow: 0 30px 80px -45px var(--ac);
}
.ms-st-ov-icon { color: var(--ac); background: color-mix(in oklab, var(--ac) 14%, transparent); box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--ac) 35%, transparent); }
.ms-st-ov-bar span, .ms-st-bar span { background: var(--ac) !important; box-shadow: 0 0 12px color-mix(in oklab, var(--ac) 60%, transparent); }
.ms-st-ov-bar span:nth-child(2), .ms-st-bar span:nth-child(2) { opacity: .55; }
.ms-st-ov-bar span:nth-child(n+3), .ms-st-bar span:nth-child(n+3) { opacity: .3; }
.ms-st-chip.is-on { background: color-mix(in oklab, var(--ac) 14%, transparent); border-color: color-mix(in oklab, var(--ac) 55%, transparent); }
.ms-st-gcount { color: var(--ac); background: color-mix(in oklab, var(--ac) 12%, transparent); }
.ms-st-row::before { background: var(--ac); box-shadow: 0 0 10px color-mix(in oklab, var(--ac) 70%, transparent); }
.ms-st-row:hover { border-color: color-mix(in oklab, var(--ac) 40%, transparent); background: color-mix(in oklab, var(--ac) 5%, rgb(0 0 0 / .28)); }
.ms-st-pill { color: rgb(var(--cl-t-primary)); background: color-mix(in oklab, var(--ac) 12%, transparent); border-color: color-mix(in oklab, var(--ac) 35%, transparent); }
/* boules = couleur du statut (vert) */
.ms-st-dot, .ms-st-dot .pulsating, .ms-st-chip i, .ms-st-legend i { background: var(--sc); }
.ms-st-chip i { box-shadow: 0 0 8px var(--sc); }

/* ==========================================================================
   FEEDBACK (/feedback) — avis par produit
   ========================================================================== */
.ms-fb-hero { padding: 4.5rem 0 2rem; text-align: center; max-width: 46rem; margin: 0 auto; }
.ms-fb-score { margin: 2rem auto 0; display: inline-flex; align-items: center; gap: 1.1rem; padding: 1rem 1.5rem; border-radius: 1.5rem; background: rgb(255 255 255 / .02); border: 1px solid color-mix(in oklab, var(--cl-ac-c) 30%, transparent); box-shadow: 0 25px 70px -40px rgb(var(--cl-accent)); }
.ms-fb-score-num { font-size: 3rem; font-weight: 800; letter-spacing: -0.04em; line-height: 1; color: rgb(var(--cl-t-primary)); }
.ms-fb-score-meta { margin-top: .3rem; font-size: .85rem; color: rgb(var(--cl-t-muted)); text-align: left; }
.ms-fb-stars { display: flex; gap: .1rem; }
.ms-fb-stars span { width: 1.05rem; height: 1.05rem; color: rgb(255 255 255 / .15); }
.ms-fb-stars span.on { color: rgb(var(--cl-highlight)); }
.ms-fb-stars svg { width: 100%; height: 100%; }
.ms-fb-stars-lg span { width: 1.35rem; height: 1.35rem; }

.ms-fb-toolbar { display: flex; flex-direction: column; gap: 1rem; margin: 1.5rem 0 2.5rem; }
@media (min-width: 900px) { .ms-fb-toolbar { flex-direction: row; align-items: center; justify-content: space-between; } }
.ms-fb-chips { display: flex; flex-wrap: wrap; gap: .5rem; }
.ms-fb-chips .ms-st-chip { text-transform: none; letter-spacing: 0; font-size: .85rem; }
.ms-fb-chips .ms-st-chip b { color: rgb(var(--cl-accent)); opacity: 1; }
.ms-fb-sort { flex-shrink: 0; }
.ms-fb-loading { margin-bottom: 1.5rem; text-align: center; color: rgb(var(--cl-t-muted)); }
.ms-fb-pool { display: none; }

.ms-fb-groups { display: flex; flex-direction: column; gap: 1.75rem; }
.ms-fb-group {
  scroll-margin-top: 7rem; padding: 1.5rem; border-radius: 2rem;
  background: linear-gradient(170deg, rgb(255 255 255 / .035), rgb(255 255 255 / .01));
  border: 1px solid var(--cl-border);
}
@media (min-width: 768px) { .ms-fb-group { padding: 1.9rem; } }
.ms-fb-ghead { display: flex; align-items: center; gap: 1rem; padding-bottom: 1.25rem; margin-bottom: 1.25rem; border-bottom: 1px solid var(--cl-border); }
.ms-fb-gimg { width: 4.75rem; aspect-ratio: 16/9; flex-shrink: 0; object-fit: cover; border-radius: .8rem; border: 1px solid var(--cl-border); }
.ms-fb-gimg-empty { display: grid; place-items: center; background: var(--cl-accent-soft); color: rgb(var(--cl-accent)); }
.ms-fb-gname { font-size: clamp(1.25rem, 2.2vw, 1.7rem); font-weight: 800; letter-spacing: -0.025em; color: rgb(var(--cl-t-primary)); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ms-fb-gstats { flex-shrink: 0; display: flex; align-items: center; gap: .4rem; padding: .5rem .9rem; border-radius: 9999px; background: color-mix(in oklab, var(--cl-ac-c) 10%, transparent); border: 1px solid color-mix(in oklab, var(--cl-ac-c) 30%, transparent); }
.ms-fb-gavg { font-weight: 800; color: rgb(var(--cl-t-primary)); }
.ms-fb-gstar { width: 1rem; height: 1rem; color: rgb(var(--cl-highlight)); }
.ms-fb-gstar svg { width: 100%; height: 100%; }
.ms-fb-gcount { margin-left: .3rem; font-size: .85rem; color: rgb(var(--cl-t-muted)); }
@media (max-width: 560px) { .ms-fb-gimg { display: none; } .ms-fb-gcount { display: none; } }

.ms-fb-grid { columns: 1; column-gap: 1rem; }
@media (min-width: 700px) { .ms-fb-grid { columns: 2; } }
@media (min-width: 1100px) { .ms-fb-grid { columns: 3; } }
@media (min-width: 1400px) { .ms-fb-grid { columns: 4; } }
.ms-fb-item.is-hidden { display: none; }
.ms-fb-item {
  break-inside: avoid; margin-bottom: 1rem; padding: 1.1rem 1.15rem; border-radius: 1.25rem;
  background: rgb(0 0 0 / .3); border: 1px solid var(--cl-border); transition: border-color .2s;
}
.ms-fb-item:hover { border-color: color-mix(in oklab, var(--cl-ac-c) 40%, transparent); }
.ms-fb-top { display: flex; align-items: center; justify-content: space-between; gap: .5rem; }
.ms-fb-top time { font-size: .75rem; color: rgb(var(--cl-t-muted)); }
.ms-fb-msg { margin-top: .75rem; font-size: .95rem; line-height: 1.6; color: color-mix(in oklab, rgb(var(--cl-t-primary)) 85%, transparent); white-space: pre-line; overflow-wrap: anywhere; }
.ms-fb-img { margin-top: .75rem; width: 100%; max-height: 14rem; object-fit: cover; border-radius: .9rem; }
.ms-fb-reply { margin-top: .85rem; padding: .7rem .85rem; border-radius: .9rem; background: color-mix(in oklab, var(--cl-ac-c) 7%, transparent); border-left: 2px solid rgb(var(--cl-accent)); }
.ms-fb-reply p { font-size: .88rem; color: rgb(var(--cl-t-muted)); white-space: pre-line; }
.ms-fb-reply span { display: block; margin-top: .35rem; font-size: .72rem; font-weight: 700; color: rgb(var(--cl-accent)); }
.ms-fb-foot { margin-top: .9rem; padding-top: .75rem; border-top: 1px solid var(--cl-border); display: flex; align-items: center; gap: .45rem; font-size: .78rem; color: rgb(var(--cl-t-muted)); }
.ms-fb-foot i { color: rgb(var(--cl-success)); }
.ms-fb-foot span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ms-fb-more {
  margin: .5rem auto 0; display: flex; align-items: center; gap: .5rem; padding: .7rem 1.4rem; border-radius: 9999px;
  font-weight: 700; font-size: .9rem; color: rgb(var(--cl-t-primary));
  background: rgb(255 255 255 / .03); border: 1px solid color-mix(in oklab, var(--cl-ac-c) 40%, transparent); transition: background .2s;
}
.ms-fb-more:hover { background: color-mix(in oklab, var(--cl-ac-c) 12%, transparent); }
.ms-fb-more[hidden] { display: none; }
.ms-fb-pager { margin-top: 2rem; }

.ms-fb-more span { font-weight: 500; color: rgb(var(--cl-t-muted)); }

/* ---------- Upsell : choix de la variante ---------- */
.ms-upsell-plans { width: 100%; }
.ms-upsell-plans-label { margin-bottom: .6rem; font-size: .75rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: rgb(var(--cl-t-muted)); }
.ms-upsell-plans-list { display: grid; gap: .6rem; grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); }
.ms-upsell-plan {
  display: flex; align-items: center; gap: .65rem; padding: .85rem 1rem; border-radius: 1rem; text-align: left;
  background: rgb(255 255 255 / .03); border: 1px solid var(--cl-border); transition: border-color .2s, background .2s;
}
.ms-upsell-plan:hover { border-color: color-mix(in oklab, var(--cl-ac-c) 40%, transparent); }
.ms-upsell-plan.is-on { background: color-mix(in oklab, var(--cl-ac-c) 12%, transparent); border-color: rgb(var(--cl-accent)); box-shadow: 0 0 0 3px var(--cl-accent-soft); }
.ms-upsell-plan-radio { width: 1.05rem; height: 1.05rem; flex-shrink: 0; border-radius: 9999px; border: 2px solid rgb(255 255 255 / .25); transition: all .2s; }
.ms-upsell-plan.is-on .ms-upsell-plan-radio { border-color: rgb(var(--cl-accent)); box-shadow: inset 0 0 0 3px #0d0b14; background: rgb(var(--cl-accent)); }
.ms-upsell-plan-name { flex: 1; min-width: 0; font-weight: 700; color: rgb(var(--cl-t-primary)); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ms-upsell-plan-price { flex-shrink: 0; font-weight: 800; color: rgb(var(--cl-accent)); }
.ms-upsell { max-height: calc(100vh - 2rem); overflow-y: auto; }

/* ==========================================================================
   SHOP (/products)
   ========================================================================== */
.ms-shop-hero { position: relative; padding: 4rem 0 2.75rem; margin-bottom: 1rem; }
.ms-shop-hero-grid {
  position: absolute; inset: -2rem -50vw 0; pointer-events: none; z-index: -1;
  background-image:
    linear-gradient(color-mix(in oklab, var(--cl-fg-c) 5%, transparent) 1px, transparent 1px),
    linear-gradient(90deg, color-mix(in oklab, var(--cl-fg-c) 5%, transparent) 1px, transparent 1px);
  background-size: 64px 64px;
  -webkit-mask-image: radial-gradient(ellipse 60% 90% at 25% 30%, #000, transparent 75%);
          mask-image: radial-gradient(ellipse 60% 90% at 25% 30%, #000, transparent 75%);
}
.ms-shop-hero::after {
  content: ""; position: absolute; z-index: -1; top: -30%; left: -10%; width: 60%; height: 140%; pointer-events: none;
  background: radial-gradient(closest-side, color-mix(in oklab, var(--cl-ac-c) 16%, transparent), transparent);
}
.ms-shop-crumbs { display: flex; align-items: center; gap: .6rem; font-size: .85rem; font-weight: 600; color: rgb(var(--cl-t-muted)); }
.ms-shop-crumbs a:hover { color: rgb(var(--cl-t-primary)); }
.ms-shop-crumbs i { font-size: .6rem; opacity: .6; }
.ms-shop-crumbs span { padding: .25rem .75rem; border-radius: 9999px; color: rgb(var(--cl-accent)); background: color-mix(in oklab, var(--cl-ac-c) 12%, transparent); border: 1px solid color-mix(in oklab, var(--cl-ac-c) 35%, transparent); }
.ms-shop-title { margin-top: 1.25rem; font-size: clamp(3rem, 8vw, 6rem); font-weight: 800; letter-spacing: -0.05em; line-height: .95; color: rgb(var(--cl-t-primary)); }
.ms-shop-sub { margin-top: 1rem; max-width: 38rem; font-size: clamp(1rem, 1.3vw, 1.15rem); line-height: 1.7; color: rgb(var(--cl-t-muted)); }
.ms-shop-meta { margin-top: 1.5rem; display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1.5rem; font-size: .9rem; font-weight: 600; color: rgb(var(--cl-t-muted)); }
.ms-shop-meta i { color: rgb(var(--cl-accent)); margin-right: .35rem; }
.ms-shop-count { padding: .45rem 1rem; border-radius: 9999px; color: rgb(var(--cl-t-primary)); background: rgb(255 255 255 / .04); border: 1px solid var(--cl-border); }
.ms-shop-count b { color: rgb(var(--cl-accent)); }

/* sidebar */
@media (min-width: 1024px) {
  .ms-shop .grid.gap-8.items-start { grid-template-columns: 19rem minmax(0, 1fr); gap: 2.25rem; }
}
.ms-shop-side {
  position: relative; padding: 1.25rem; border-radius: 1.75rem;
  background: linear-gradient(170deg, color-mix(in oklab, var(--cl-ac-c) 6%, transparent), rgb(255 255 255 / .015) 45%);
  border: 1px solid var(--cl-border);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .05), 0 30px 70px -45px color-mix(in oklab, var(--cl-ac-c) 50%, transparent);
}
.ms-shop-side form > div > button, .ms-shop-side label.block {
  font-size: .75rem !important; font-weight: 800 !important; letter-spacing: .12em !important; color: rgb(var(--cl-t-muted)) !important;
}
.ms-shop-side .sa-products-page-link {
  border-radius: 9999px !important; padding-top: .7rem !important; padding-bottom: .7rem !important;
  font-weight: 700 !important; color: rgb(var(--cl-t-muted)) !important; transition: background .2s, color .2s;
}
.ms-shop-side .sa-products-page-link:hover { background: rgb(255 255 255 / .04) !important; color: rgb(var(--cl-t-primary)) !important; }
.ms-shop-side .sa-products-page-link[aria-current="page"] {
  background: rgb(var(--cl-accent)) !important; color: rgb(var(--cl-t-accent)) !important;
  box-shadow: 0 10px 28px -10px rgb(var(--cl-accent));
}
.ms-shop-side input[type="text"], .ms-shop-side input[type="number"] {
  border-radius: 1rem !important; padding-top: .8rem !important; padding-bottom: .8rem !important;
  background: rgb(0 0 0 / .35) !important; box-shadow: none !important;
}
.ms-shop-side input[type="text"]:focus, .ms-shop-side input[type="number"]:focus { border-color: rgb(var(--cl-accent)) !important; box-shadow: 0 0 0 4px var(--cl-accent-soft) !important; }
.ms-shop-side .border-t.border-theme { opacity: .6; }
.ms-shop-side .sa-btn { padding-top: .85rem !important; padding-bottom: .85rem !important; font-size: .95rem !important; font-weight: 800 !important; }

/* grille */
.ms-shop-grid { display: grid; gap: 1.5rem; grid-template-columns: 1fr; }
@media (min-width: 640px) { .ms-shop-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1280px) { .ms-shop-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.ms-shop-grid .sa-products-page-item { height: 100%; }

/* ==========================================================================
   MODALE GROUPE + cartes horizontales
   ========================================================================== */
.ms-gm {
  position: relative; overflow: hidden; padding: 1.5rem; border-radius: 2rem;
  background: linear-gradient(160deg, color-mix(in oklab, var(--cl-ac-c) 10%, #0d0b13), #08070b 55%);
  border: 1px solid color-mix(in oklab, var(--cl-fg-c) 12%, transparent);
  box-shadow: 0 40px 120px -30px color-mix(in oklab, var(--cl-ac-c) 45%, transparent);
}
@media (min-width: 640px) { .ms-gm { padding: 2rem; } }
.ms-gm-glow { position: absolute; top: -45%; left: 50%; width: 90%; height: 70%; transform: translateX(-50%); pointer-events: none; background: radial-gradient(closest-side, color-mix(in oklab, var(--cl-ac-c) 22%, transparent), transparent); }
.ms-gm-head { position: relative; display: flex; align-items: center; gap: 1.1rem; padding-bottom: 1.4rem; margin-bottom: 1.4rem; border-bottom: 1px solid var(--cl-border); }
.ms-gm-thumb { width: 6rem; aspect-ratio: 16/9; flex-shrink: 0; object-fit: cover; border-radius: .9rem; border: 1px solid var(--cl-border); box-shadow: 0 12px 30px -12px rgb(var(--cl-accent)); }
.ms-gm-kicker { font-size: .72rem; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: rgb(var(--cl-accent)); }
.ms-gm-title { margin-top: .15rem; font-size: clamp(1.5rem, 3vw, 2.2rem); font-weight: 800; letter-spacing: -0.03em; line-height: 1.1; color: rgb(var(--cl-t-primary)); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ms-gm-meta { margin-top: .45rem; display: flex; flex-wrap: wrap; gap: .3rem 1.1rem; font-size: .85rem; color: rgb(var(--cl-t-muted)); }
.ms-gm-meta b { color: rgb(var(--cl-t-primary)); }
.ms-gm-meta i { color: rgb(var(--cl-accent)); margin-right: .25rem; }
.ms-gm-close { position: static; flex-shrink: 0; align-self: flex-start; }
@media (max-width: 560px) { .ms-gm-thumb { display: none; } }
.ms-gm-list { position: relative; display: flex; flex-direction: column; gap: .75rem; }

.ms-hcard {
  position: relative; display: flex; align-items: center; gap: 1.1rem; padding: .75rem; padding-right: 1.1rem; border-radius: 1.4rem;
  background: rgb(0 0 0 / .32); border: 1px solid var(--cl-border); color: rgb(var(--cl-t-primary));
  transition: border-color .25s, background .25s, transform .25s, box-shadow .25s;
}
.ms-hcard:hover {
  border-color: color-mix(in oklab, var(--cl-ac-c) 55%, transparent);
  background: color-mix(in oklab, var(--cl-ac-c) 6%, rgb(0 0 0 / .32));
  transform: translateY(-2px);
  box-shadow: 0 18px 45px -25px rgb(var(--cl-accent));
}
.ms-hcard-media { width: 38%; max-width: 13rem; flex-shrink: 0; border-radius: 1rem; overflow: hidden; border: 1px solid var(--cl-border); }
.ms-hcard-media img { display: block; width: 100%; aspect-ratio: 16/9; object-fit: cover; transition: transform .5s ease; }
.ms-hcard:hover .ms-hcard-media img { transform: scale(1.05); }
.ms-hcard-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: .5rem; }
.ms-hcard-name { font-size: clamp(1rem, 1.6vw, 1.3rem); font-weight: 800; letter-spacing: -0.02em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ms-hcard .ms-badges-inline { margin: 0 !important; }
.ms-hcard-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem 1rem; }
.ms-hcard-price { display: flex; align-items: baseline; gap: .45rem; }
.ms-hcard-from { font-size: .72rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: rgb(var(--cl-t-muted)); }
.ms-hcard-price strong { font-size: clamp(1.15rem, 2vw, 1.5rem); font-weight: 800; color: rgb(var(--cl-accent)); letter-spacing: -0.02em; }
.ms-hcard-price s { font-size: .85rem; color: rgb(var(--cl-t-muted)); }
.ms-hcard-stock { display: inline-flex; align-items: center; gap: .45rem; padding: .3rem .75rem; border-radius: 9999px; font-size: .75rem; font-weight: 700; color: rgb(var(--cl-t-muted)); background: rgb(255 255 255 / .04); border: 1px solid var(--cl-border); }
.ms-hcard-stock i { width: .45rem; height: .45rem; border-radius: 9999px; background: rgb(var(--cl-success)); box-shadow: 0 0 8px rgb(var(--cl-success)); }
.ms-hcard-stock.is-out i { background: rgb(var(--cl-error)); box-shadow: 0 0 8px rgb(var(--cl-error)); }
.ms-hcard-go {
  width: 2.75rem; height: 2.75rem; flex-shrink: 0; display: grid; place-items: center; border-radius: 9999px;
  color: rgb(var(--cl-accent)); background: color-mix(in oklab, var(--cl-ac-c) 10%, transparent); border: 1px solid color-mix(in oklab, var(--cl-ac-c) 35%, transparent);
  transition: background .25s, color .25s, transform .25s;
}
.ms-hcard:hover .ms-hcard-go { background: rgb(var(--cl-accent)); color: rgb(var(--cl-t-accent)); transform: translateX(3px); }
@media (max-width: 480px) { .ms-hcard-go { display: none; } .ms-hcard-media { width: 34%; } }

/* ==========================================================================
   PAGE PRODUIT — conversion
   ========================================================================== */
/* barre promo */
.ms-promo { position: relative; z-index: 45; display: flex; align-items: center; justify-content: center; background: linear-gradient(90deg, #2A1206, color-mix(in oklab, var(--cl-ac-c) 45%, #140800), #2A1206); }
.ms-promo-in { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: .4rem .9rem; padding: .55rem 3rem; font-size: .85rem; font-weight: 600; color: #fff; }
.ms-promo-label { padding: .15rem .6rem; border-radius: 9999px; background: rgb(var(--cl-accent)); color: rgb(var(--cl-t-accent)); font-size: .7rem; font-weight: 800; letter-spacing: .08em; }
.ms-promo-text b { letter-spacing: .08em; }
.ms-promo-ends { opacity: .75; }
.ms-promo-timer { display: flex; gap: .3rem; font-weight: 800; font-variant-numeric: tabular-nums; }
.ms-promo-timer span { padding: .1rem .45rem; border-radius: .4rem; background: rgb(0 0 0 / .45); }
.ms-promo-close { position: absolute; right: .75rem; top: 50%; transform: translateY(-50%); width: 2rem; height: 2rem; border-radius: 9999px; color: #fff; opacity: .7; }
.ms-promo-close:hover { opacity: 1; background: rgb(0 0 0 / .3); }
@media (max-width: 640px) { .ms-promo-ends, .ms-promo-sec { display: none; } .ms-promo-in { font-size: .78rem; padding: .5rem 2.5rem .5rem 1rem; } }

/* pill Discord navbar */
.ms-discord-pill { display: none; align-items: center; gap: .45rem; height: 2.25rem; padding: 0 .9rem; border-radius: 9999px; font-size: .8rem; font-weight: 700; color: rgb(var(--cl-t-primary)); background: color-mix(in oklab, var(--cl-ac-c) 10%, transparent); border: 1px solid color-mix(in oklab, var(--cl-ac-c) 35%, transparent); white-space: nowrap; }
.ms-discord-pill i { color: #FFB020; }
.ms-discord-dot { display: none; width: .45rem; height: .45rem; border-radius: 9999px; background: rgb(var(--cl-success)); box-shadow: 0 0 8px rgb(var(--cl-success)); }
.ms-discord-pill.has-count .ms-discord-dot { display: inline-block; }
@media (min-width: 1280px) { .ms-discord-pill { display: inline-flex; } }

/* en-tête produit */
.ms-pp-title { font-size: clamp(2.2rem, 5vw, 3.8rem); font-weight: 800; letter-spacing: -0.04em; line-height: 1.02; color: rgb(var(--cl-t-primary)); }
.ms-pp-rating { margin-top: .7rem; display: inline-flex; align-items: center; gap: .55rem; font-size: .95rem; color: rgb(var(--cl-t-muted)); }
.ms-pp-rating b { color: rgb(var(--cl-t-primary)); }
.ms-pp-rating span:last-child { text-decoration: underline; text-underline-offset: 3px; }
.ms-pp-stars { display: inline-flex; gap: .12rem; color: rgb(var(--cl-highlight)); font-size: .9rem; }
.ms-pp-stars .is-off { color: rgb(255 255 255 / .18); }
.ms-pp-head .status { padding: .45rem .95rem; border-radius: 9999px; background: color-mix(in oklab, var(--cl-ac-c) 12%, transparent); border: 1px solid color-mix(in oklab, var(--cl-ac-c) 35%, transparent); gap: .6rem !important; }
.ms-pp-head .status > div { width: .6rem !important; height: .6rem !important; }
.ms-pp-head .status span { font-size: .8rem !important; letter-spacing: .08em; text-transform: uppercase; font-weight: 800 !important; }

/* bloc achat */
.ms-pp-buy > .p-6.rounded-xl, .ms-pp-buy form > .p-6.rounded-xl {
  border-radius: 1.6rem !important;
  background: linear-gradient(170deg, color-mix(in oklab, var(--cl-ac-c) 6%, transparent), rgb(255 255 255 / .015) 45%) !important;
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .05), 0 30px 70px -45px color-mix(in oklab, var(--cl-ac-c) 55%, transparent) !important;
}
.ms-pp-buy .text-h2 { font-weight: 800; color: rgb(var(--cl-accent)); letter-spacing: -0.03em; }

/* variantes en cartes */
.ms-vgrid { display: grid; gap: .75rem; grid-template-columns: repeat(2, minmax(0, 1fr)); padding-top: .5rem; }
.ms-vcard {
  position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: .45rem; padding: 1rem; border-radius: 1.1rem; text-align: left;
  background: rgb(255 255 255 / .03); border: 1px solid var(--cl-border); color: rgb(var(--cl-t-primary));
  transition: border-color .2s, background .2s, box-shadow .2s;
}
.ms-vcard:hover:not(:disabled) { border-color: color-mix(in oklab, var(--cl-ac-c) 45%, transparent); }
.ms-vcard.is-on { background: color-mix(in oklab, var(--cl-ac-c) 10%, transparent); border-color: rgb(var(--cl-accent)); box-shadow: 0 0 0 3px var(--cl-accent-soft); }
.ms-vcard:disabled { opacity: .45; cursor: not-allowed; }
.ms-vtag { position: absolute; top: -.6rem; right: .75rem; padding: .15rem .6rem; border-radius: 9999px; font-size: .62rem; font-weight: 800; letter-spacing: .08em; color: rgb(var(--cl-t-accent)); background: rgb(var(--cl-accent)); box-shadow: 0 6px 16px -6px rgb(var(--cl-accent)); }
.ms-vtag.is-gold { background: rgb(var(--cl-highlight)); color: #1a1400; box-shadow: 0 6px 16px -6px rgb(var(--cl-highlight)); }
.ms-vhead { display: flex; align-items: center; gap: .55rem; min-width: 0; width: 100%; }
.ms-vradio { width: 1rem; height: 1rem; flex-shrink: 0; border-radius: 9999px; border: 2px solid rgb(255 255 255 / .28); transition: all .2s; }
.ms-vcard.is-on .ms-vradio { border-color: rgb(var(--cl-accent)); background: rgb(var(--cl-accent)); box-shadow: inset 0 0 0 3px #0d0b14; }
.ms-vimg { width: 2rem; height: 2rem; border-radius: .5rem; object-fit: cover; }
.ms-vname { font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ms-vprice { display: flex; align-items: baseline; gap: .45rem; }
.ms-vprice b { font-size: 1.35rem; font-weight: 800; letter-spacing: -0.02em; color: rgb(var(--cl-accent)); }
.ms-vprice s { font-size: .8rem; color: rgb(var(--cl-t-muted)); }
.ms-vsub { font-size: .75rem; color: rgb(var(--cl-t-muted)); }
.ms-vsave { padding: .1rem .5rem; border-radius: 9999px; font-size: .7rem; font-weight: 800; color: rgb(var(--cl-success)); background: color-mix(in oklab, rgb(var(--cl-success)) 12%, transparent); }
.ms-vdesc { font-size: .75rem; color: rgb(var(--cl-t-muted)); white-space: pre-line; }
.ms-vstock { display: inline-flex; align-items: center; gap: .35rem; font-size: .72rem; color: rgb(var(--cl-t-muted)); }
.ms-vstock i { width: .4rem; height: .4rem; border-radius: 9999px; background: rgb(var(--cl-success)); }
.ms-vstock.is-out i { background: rgb(var(--cl-error)); }
@media (max-width: 380px) { .ms-vgrid { grid-template-columns: 1fr; } }

/* boutons d'achat plus gros */
.ms-pp-buy form .sa-btn-primary, .ms-pp-buy form button[type="submit"] { min-height: 3.4rem; border-radius: 1.1rem !important; font-size: 1.02rem; font-weight: 800 !important; }
.ms-pp-buy form button[type="submit"] { background-image: linear-gradient(120deg, color-mix(in oklab, var(--cl-ac-c) 70%, #E02A0C), rgb(var(--cl-accent))) !important; color: #fff !important; border-color: transparent !important; box-shadow: 0 14px 36px -14px rgb(var(--cl-accent)); }

/* garanties + paiement */
.ms-buy-extras { display: flex; flex-direction: column; gap: .75rem; margin: -1rem 0 2rem; }
.ms-trustrow { display: grid; gap: .5rem; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ms-trustrow span { display: flex; align-items: center; justify-content: center; gap: .45rem; padding: .7rem .5rem; border-radius: .9rem; font-size: .78rem; font-weight: 700; text-align: center; background: rgb(255 255 255 / .03); border: 1px solid var(--cl-border); }
.ms-trustrow i { color: rgb(var(--cl-accent)); }
.ms-paybox { padding: .9rem 1rem; border-radius: 1rem; background: rgb(255 255 255 / .02); border: 1px solid var(--cl-border); }
.ms-paychips { display: flex; flex-wrap: wrap; gap: .4rem; }
.ms-paychips span { padding: .3rem .7rem; border-radius: .6rem; font-size: .75rem; font-weight: 700; background: rgb(255 255 255 / .06); }
.ms-paybox p { margin-top: .6rem; font-size: .75rem; color: rgb(var(--cl-t-muted)); }

/* démo + FAQ */
.ms-pp-block { margin-top: 3rem; }
.ms-pp-h2 { margin: .3rem 0 1.25rem; font-size: clamp(1.7rem, 3vw, 2.4rem); font-weight: 800; letter-spacing: -0.035em; color: rgb(var(--cl-t-primary)); }
.ms-pp-video { border-radius: 1.5rem; overflow: hidden; border: 1px solid var(--cl-border); box-shadow: 0 30px 70px -40px rgb(var(--cl-accent)); }
.ms-pp-video lite-youtube { aspect-ratio: 16/9; }
.ms-faq { display: flex; flex-direction: column; gap: .6rem; }
.ms-faq-item { border-radius: 1.1rem; background: rgb(255 255 255 / .03); border: 1px solid var(--cl-border); overflow: hidden; transition: border-color .2s; }
.ms-faq-item.is-open { border-color: color-mix(in oklab, var(--cl-ac-c) 45%, transparent); }
.ms-faq-q { width: 100%; min-height: 3.5rem; padding: .75rem 1.25rem; display: flex; align-items: center; justify-content: space-between; gap: 1rem; text-align: left; font-weight: 700; color: rgb(var(--cl-t-primary)); }
.ms-faq-q i { color: rgb(var(--cl-accent)); transition: transform .25s; }
.ms-faq-item.is-open .ms-faq-q i { transform: rotate(45deg); }
.ms-faq-a { padding: 0 1.25rem 1.1rem; font-size: .95rem; line-height: 1.7; color: rgb(var(--cl-t-muted)); white-space: pre-line; }

/* barre d'achat fixe mobile */
.ms-stickybuy { display: none; }
@media (max-width: 1023px) {
  .ms-stickybuy {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; display: flex; align-items: center; gap: .75rem;
    padding: .75rem 1rem calc(.75rem + env(safe-area-inset-bottom, 0px));
    background: rgb(8 7 11 / .94); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
    border-top: 1px solid color-mix(in oklab, var(--cl-ac-c) 30%, transparent);
    box-shadow: 0 -20px 40px -20px color-mix(in oklab, var(--cl-ac-c) 50%, transparent);
  }
  .ms-stickybuy[style*="display: none"] { display: none !important; }
  .ms-stickybuy-info { display: flex; flex-direction: column; min-width: 0; }
  .ms-stickybuy-info span { font-size: .72rem; color: rgb(var(--cl-t-muted)); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 9rem; }
  .ms-stickybuy-info b { font-size: 1.25rem; font-weight: 800; color: rgb(var(--cl-accent)); }
  .ms-stickybuy-btn { flex: 1; height: 3.2rem; border-radius: 1rem; font-weight: 800; font-size: 1rem; color: #fff; background: linear-gradient(120deg, color-mix(in oklab, var(--cl-ac-c) 70%, #E02A0C), rgb(var(--cl-accent))); }
  .ms-stickybuy-btn:disabled { opacity: .5; }
  body.sa-tpl-product { padding-bottom: 5.5rem; }
}

/* promo dans le header collant : elle se replie quand on défile */
.sa-header .ms-promo { transition: margin-top .3s ease; }

/* ---------- Checkout : frequently bought together ---------- */
.ms-fbt { margin-top: 1.5rem; }
.ms-fbt-label { font-size: .75rem; font-weight: 800; letter-spacing: .14em; color: rgb(var(--cl-t-muted)); margin-bottom: .75rem; }
.ms-fbt-grid { display: grid; gap: .75rem; grid-template-columns: 1fr; }
@media (min-width: 640px) { .ms-fbt-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.ms-fbt-card { display: flex; align-items: center; gap: .8rem; padding: .7rem; border-radius: 1.1rem; background: rgb(255 255 255 / .03); border: 1px solid var(--cl-border); transition: border-color .2s; }
.ms-fbt-card:hover { border-color: color-mix(in oklab, var(--cl-ac-c) 45%, transparent); }
.ms-fbt-card img, .ms-fbt-noimg { width: 5rem; aspect-ratio: 16/9; flex-shrink: 0; object-fit: cover; border-radius: .6rem; border: 1px solid var(--cl-border); }
.ms-fbt-noimg { display: grid; place-items: center; background: var(--cl-accent-soft); color: rgb(var(--cl-accent)); }
.ms-fbt-name { font-weight: 700; font-size: .9rem; color: rgb(var(--cl-t-primary)); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ms-fbt-price { font-size: .8rem; color: rgb(var(--cl-t-muted)); }
.ms-fbt-price b { color: rgb(var(--cl-accent)); }
.ms-fbt-add { flex-shrink: 0; min-width: 4.75rem; height: 2.75rem; padding: 0 .9rem; border-radius: .8rem; font-size: .85rem; font-weight: 800; color: rgb(var(--cl-t-accent)); background: rgb(var(--cl-accent)); box-shadow: 0 8px 22px -10px rgb(var(--cl-accent)); transition: filter .2s; }
.ms-fbt-add:hover { filter: brightness(1.1); }
.ms-fbt-add:disabled { opacity: .6; }

/* ---------- Checkout : paiement sans frais ---------- */
.ms-nofee { display: flex; gap: 1rem; align-items: flex-start; padding: 1.1rem 1.2rem; border-radius: 1.1rem; background: color-mix(in oklab, rgb(var(--cl-success)) 8%, transparent); border: 1px solid color-mix(in oklab, rgb(var(--cl-success)) 35%, transparent); }
.ms-nofee-icon { width: 3rem; height: 3rem; flex-shrink: 0; display: grid; place-items: center; border-radius: .9rem; font-size: 1.15rem; color: rgb(var(--cl-success)); background: color-mix(in oklab, rgb(var(--cl-success)) 15%, transparent); }
.ms-nofee strong { display: block; font-weight: 800; color: rgb(var(--cl-t-primary)); margin-bottom: .25rem; }
.ms-nofee p { font-size: .9rem; line-height: 1.5; color: rgb(var(--cl-t-muted)); }
.mt-3 { margin-top: .75rem; }

/* ---------- Checkout : réassurance ---------- */
.ms-trustbox { margin-top: 1.25rem; padding: 1rem 1.1rem; border-radius: 1.1rem; background: rgb(0 0 0 / .35); border: 1px solid var(--cl-border); }
.ms-trustbox-top { display: flex; align-items: center; gap: .6rem; }
.ms-trustbox-top b { font-size: 1.5rem; font-weight: 800; color: rgb(var(--cl-t-primary)); }
.ms-trustbox-top a { margin-left: auto; font-size: .8rem; font-weight: 700; color: rgb(var(--cl-accent)); }
.ms-trustbox-quote { margin-top: .7rem; font-size: .9rem; line-height: 1.55; color: rgb(var(--cl-t-primary)); }
.ms-trustbox-meta { margin-top: .4rem; font-size: .75rem; color: rgb(var(--cl-t-muted)); }
.ms-trustbox-meta i { color: rgb(var(--cl-success)); }
.ms-helpbox { margin-top: .9rem; display: flex; align-items: center; gap: .8rem; padding: .9rem 1rem; border-radius: 1rem; color: rgb(var(--cl-t-primary)); background: rgb(88 101 242 / .1); border: 1px solid rgb(88 101 242 / .45); transition: background .2s; }
.ms-helpbox:hover { background: rgb(88 101 242 / .18); }
.ms-helpbox > i:first-child { font-size: 1.4rem; color: #FFB020; }
.ms-helpbox span { flex: 1; font-size: .9rem; line-height: 1.35; }
.ms-helpbox small { color: rgb(var(--cl-t-muted)); font-size: .8rem; }
.ms-helpbox > i:last-child { color: rgb(var(--cl-t-muted)); font-size: .8rem; }

/* ---------- Solde : badge bonus sur les recharges ---------- */
.ms-bonus-tag { display: block; margin: .35rem auto 0; width: max-content; padding: .1rem .5rem; border-radius: 9999px; font-size: .62rem; font-weight: 800; letter-spacing: .04em; color: rgb(var(--cl-success)); background: color-mix(in oklab, rgb(var(--cl-success)) 14%, transparent); }

/* Titre section avis (accueil) */
.ms-feedbacks .ms-fb-title { font-size: clamp(2.2rem, 4.6vw, 3.6rem); line-height: 1.08; font-weight: 800; letter-spacing: -0.04em; color: rgb(var(--cl-t-primary)); }
.ms-feedbacks .ms-fb-sub { font-size: clamp(1rem, 1.4vw, 1.15rem); color: rgb(var(--cl-t-muted)); }

/* Cartes produit : "From €X" au lieu d'une fourchette coupée */
.ms-card-from { font-size: .7rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: rgb(var(--cl-t-muted)); }
.ms-card-pricerow { display: flex; flex-wrap: wrap; align-items: baseline; gap: .15rem .5rem; }
.ms-card-pricerow .ms-card-price { white-space: nowrap; }
.ms-hcard-price strong { white-space: nowrap; }
.ms-hcard-row { flex-wrap: wrap; row-gap: .4rem; }

/* ---------- Docs : guides d'installation par produit ---------- */
.ms-guide { padding: 0 !important; overflow: hidden auto; max-width: 46rem; }
.ms-guide-banner { position: relative; height: 11rem; overflow: hidden; background: radial-gradient(circle at 50% 30%, color-mix(in oklab, var(--cl-ac-c) 40%, #140800), #0b0710 75%); }
.ms-guide-banner img { width: 100%; height: 100%; object-fit: cover; }
.ms-guide-banner::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 35%, #0b0a10 100%); }
.ms-guide-inner { padding: 1.5rem 1.75rem 2rem; }
.ms-guide .ms-doc-title { font-size: clamp(1.6rem, 3vw, 2.1rem); }
.ms-guide-steps { margin: 1.25rem 0 .5rem; display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: .5rem; padding: .6rem; border-radius: 1rem; border: 1px solid color-mix(in oklab, var(--cl-ac-c) 35%, transparent); background: rgb(255 255 255 / .02); }
.ms-guide-steps button { display: flex; align-items: center; gap: .55rem; padding: .45rem .5rem; border-radius: .7rem; font-size: .8rem; font-weight: 700; text-align: left; color: rgb(var(--cl-t-primary)); transition: background .2s; }
.ms-guide-steps button:hover { background: color-mix(in oklab, var(--cl-ac-c) 12%, transparent); }
.ms-guide-steps b { width: 1.5rem; height: 1.5rem; flex-shrink: 0; display: grid; place-items: center; border-radius: 9999px; font-size: .75rem; color: #fff; background: linear-gradient(135deg, #E02A0C, rgb(var(--cl-accent))); }
.ms-guide-h3 { margin: 1.6rem 0 .7rem; padding-top: 1.2rem; border-top: 1px solid var(--cl-border); font-size: 1.2rem; font-weight: 800; letter-spacing: -0.01em; color: rgb(var(--cl-t-primary)); scroll-margin-top: 1rem; }
.ms-guide-steps + .ms-guide-h3 { border-top: 0; }
.ms-guide-list, .ms-guide-ol { display: flex; flex-direction: column; gap: .5rem; padding-left: 1.2rem; font-size: .95rem; line-height: 1.6; color: rgb(var(--cl-t-muted)); }
.ms-guide-list { list-style: disc; }
.ms-guide-ol { list-style: decimal; }
.ms-guide-list li::marker, .ms-guide-ol li::marker { color: rgb(var(--cl-accent)); font-weight: 800; }
.ms-guide-p { font-size: .95rem; line-height: 1.65; color: rgb(var(--cl-t-muted)); margin-bottom: .5rem; }
.ms-guide a:not(.sa-btn):not(.ms-guide-ghost) { color: rgb(var(--cl-accent)); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
.ms-guide-note { margin-top: 1rem; display: flex; gap: .75rem; padding: .9rem 1rem; border-radius: 1rem; background: color-mix(in oklab, var(--cl-ac-c) 8%, transparent); border: 1px solid color-mix(in oklab, var(--cl-ac-c) 30%, transparent); font-size: .9rem; line-height: 1.6; color: rgb(var(--cl-t-primary)); white-space: pre-line; }
.ms-guide-note i { color: rgb(var(--cl-accent)); margin-top: .2rem; }
.ms-guide-actions { margin-top: 1.5rem; display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1.25rem; }
.ms-guide-actions .sa-btn { display: inline-flex; align-items: center; gap: .5rem; min-height: 2.9rem; padding: 0 1.25rem; border-radius: .9rem; font-weight: 800; }
.ms-guide-ghost { display: inline-flex; align-items: center; gap: .45rem; font-size: .9rem; font-weight: 700; color: rgb(var(--cl-t-muted)); }
.ms-guide-ghost:hover { color: rgb(var(--cl-t-primary)); }
@media (max-width: 560px) { .ms-guide-steps { grid-template-columns: 1fr; } .ms-guide-inner { padding: 1.25rem 1.1rem 1.5rem; } .ms-guide-banner { height: 8rem; } }
.ms-guide .ms-modal-close { z-index: 3; background: rgb(0 0 0 / .45); backdrop-filter: blur(6px); }
.ms-guide-h2 { margin: 1.6rem 0 0; padding-top: 1.4rem; border-top: 1px solid var(--cl-border); font-size: 1.45rem; font-weight: 700; letter-spacing: -0.02em; color: rgb(var(--cl-t-primary)); }
.ms-guide-h2 + .ms-guide-h3 { border-top: 0; padding-top: 0; }
.ms-guide-ol b { color: rgb(var(--cl-t-primary)); }

/* ==========================================================================
   NOTIFICATIONS (social proof) — bas à gauche
   ========================================================================== */
.ms-proof {
  position: fixed; left: 1rem; bottom: 1rem; z-index: 45;
  width: min(21.5rem, calc(100vw - 2rem));
  padding: .85rem 2.4rem .85rem .85rem;
  border-radius: 1.15rem;
  background: linear-gradient(140deg, color-mix(in oklab, var(--cl-ac-c) 14%, #0c0910) 0%, #0a0810 60%);
  border: 1px solid color-mix(in oklab, var(--cl-ac-c) 38%, transparent);
  box-shadow: 0 24px 55px -25px rgb(0 0 0 / .9), 0 0 32px -14px color-mix(in oklab, var(--cl-ac-c) 85%, transparent), inset 0 1px 0 rgb(255 255 255 / .06);
  -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
  overflow: hidden;
}
.ms-proof.is-right { left: auto; right: 1rem; }
.ms-proof::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; border-radius: inherit;
  background: radial-gradient(120% 80% at 0% 0%, color-mix(in oklab, var(--cl-ac-c) 18%, transparent), transparent 62%);
}

.ms-proof-in { animation: ms-proof-in .4s cubic-bezier(.2,.9,.25,1) both; }
.ms-proof-out { animation: ms-proof-out .3s ease-in both; }
@keyframes ms-proof-in { from { opacity: 0; transform: translateX(-14px) translateY(10px) scale(.94); } to { opacity: 1; transform: none; } }
@keyframes ms-proof-out { to { opacity: 0; transform: translateY(10px) scale(.97); } }
.ms-proof.is-right.ms-proof-in { animation-name: ms-proof-in-r; }
@keyframes ms-proof-in-r { from { opacity: 0; transform: translateX(14px) translateY(10px) scale(.94); } to { opacity: 1; transform: none; } }

.ms-proof-row { position: relative; display: flex; align-items: center; gap: .8rem; }

.ms-proof-media {
  position: relative; width: 3.4rem; height: 3.4rem; flex-shrink: 0;
  display: grid; place-items: center; overflow: visible;
  border-radius: .85rem;
  background: color-mix(in oklab, var(--cl-ac-c) 14%, transparent);
  color: rgb(var(--cl-accent));
}
.ms-proof-media img { width: 100%; height: 100%; object-fit: cover; border-radius: .85rem; border: 1px solid color-mix(in oklab, var(--cl-ac-c) 30%, transparent); }
.ms-proof-dot {
  position: absolute; right: -.2rem; bottom: -.2rem; width: .72rem; height: .72rem; border-radius: 9999px;
  background: rgb(var(--cl-success)); border: 2px solid #0a0810;
  box-shadow: 0 0 0 0 color-mix(in oklab, rgb(var(--cl-success)) 70%, transparent);
  animation: ms-proof-pulse 2.2s ease-out infinite;
}
@keyframes ms-proof-pulse { 70% { box-shadow: 0 0 0 .4rem transparent; } 100% { box-shadow: 0 0 0 0 transparent; } }

.ms-proof-body { position: relative; flex: 1; min-width: 0; display: flex; flex-direction: column; gap: .12rem; }
.ms-proof-kicker {
  display: inline-flex; align-items: center; gap: .35rem;
  font-size: .62rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase;
  color: rgb(var(--cl-accent));
}
.ms-proof-kicker .fa-star { color: rgb(var(--cl-highlight)); }
.ms-proof-name { font-size: .95rem; font-weight: 800; letter-spacing: -0.01em; color: rgb(var(--cl-t-primary)); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ms-proof-meta { display: flex; align-items: center; gap: .35rem; font-size: .75rem; color: rgb(var(--cl-t-muted)); overflow: hidden; white-space: nowrap; }
.ms-proof-sep { opacity: .5; }
.ms-proof-stars { display: inline-flex; gap: .06rem; font-size: .66rem; color: rgb(var(--cl-highlight)); }
.ms-proof-stars .is-off { color: rgb(255 255 255 / .18); }

.ms-proof-x {
  position: absolute; top: .55rem; right: .55rem; z-index: 2;
  width: 1.6rem; height: 1.6rem; display: grid; place-items: center;
  border-radius: 9999px; color: rgb(var(--cl-t-muted)); transition: color .2s, background .2s;
}
.ms-proof-x svg { width: .75rem; height: .75rem; }
.ms-proof-x:hover { color: rgb(var(--cl-t-primary)); background: rgb(255 255 255 / .08); }

.ms-proof-bar { position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: rgb(255 255 255 / .06); }
.ms-proof-bar i { display: block; height: 100%; width: 100%; transform-origin: left; background: linear-gradient(90deg, color-mix(in oklab, var(--cl-ac-c) 60%, #E02A0C), rgb(var(--cl-accent))); animation: ms-proof-run linear forwards; }
.ms-proof-bar i.is-paused { animation-play-state: paused; }
@keyframes ms-proof-run { from { transform: scaleX(1); } to { transform: scaleX(0); } }

@media (max-width: 640px) {
  .ms-proof { bottom: .75rem; left: .75rem; right: .75rem; width: auto; padding: .7rem 2.2rem .7rem .7rem; }
  .ms-proof.is-right { right: .75rem; left: .75rem; }
  .ms-proof-media { width: 2.9rem; height: 2.9rem; }
  .ms-proof-name { font-size: .88rem; }
}
body.sa-tpl-product .ms-proof { bottom: 5.75rem; }
@media (min-width: 1024px) { body.sa-tpl-product .ms-proof { bottom: 1rem; } }
@media (prefers-reduced-motion: reduce) { .ms-proof-in, .ms-proof-out, .ms-proof-dot, .ms-proof-bar i { animation: none !important; } }
.ms-proof-row { text-decoration: none; cursor: pointer; }
.ms-proof:hover { border-color: color-mix(in oklab, var(--cl-ac-c) 70%, transparent); box-shadow: 0 26px 60px -22px rgb(0 0 0 / .9), 0 0 42px -12px color-mix(in oklab, var(--cl-ac-c) 95%, transparent), inset 0 1px 0 rgb(255 255 255 / .08); }
.ms-proof:hover .ms-proof-media img { filter: brightness(1.06); }
.ms-proof-go { flex-shrink: 0; margin-right: .1rem; font-size: .75rem; color: rgb(var(--cl-t-muted)); transition: transform .2s, color .2s; }
.ms-proof:hover .ms-proof-go { transform: translateX(3px); color: rgb(var(--cl-accent)); }
@media (max-width: 640px) { .ms-proof-go { display: none; } }

/* October Sale campaign */
.ms-sale-countdown { margin: 1rem auto 0; display: flex; align-items: center; justify-content: center; gap: .65rem; padding: .65rem .9rem; border: 1px solid rgb(var(--cl-accent) / .22); border-radius: .75rem; background: rgb(var(--cl-accent) / .07); font-size: .72rem; letter-spacing: .08em; }
.ms-sale-countdown span { opacity: .65; font-weight: 700; }
.ms-sale-countdown strong { font-variant-numeric: tabular-nums; letter-spacing: .05em; }
.ms-sale-countdown b { color: rgb(var(--cl-accent)); }
@media (max-width: 640px) { .ms-sale-countdown { gap: .4rem; font-size: .65rem; } }

.ms-gp { padding-top: 1rem; }
.ms-gp-back { margin-top: 1.25rem; display: inline-flex; align-items: center; gap: .5rem; padding: .55rem 1.1rem; border-radius: 999px; border: 1px solid var(--cl-border); font-size: .875rem; font-weight: 600; transition: background .3s; }
.ms-gp-back:hover { background: rgb(255 255 255 / .06); }
.ms-gp-grid { display: grid; gap: 1.5rem; grid-template-columns: 1fr; }
@media (min-width: 640px) { .ms-gp-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .ms-gp-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1280px) { .ms-gp-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.ms-gp-item { height: 100%; }

/* ===== Nom du produit entièrement visible (le badge stock passe dessous) ===== */
.ms-card-namerow { display: flex; flex-direction: column; align-items: flex-start; gap: .55rem; }
.ms-card-name { min-width: 0; max-width: 100%; line-height: 1.25; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow-wrap: anywhere; }

/* =========================================================================
   L3DESHOP — HABILLAGE HALLOWEEN
   Palette feu (citrouille, braise, rouge sang) + decor dessine (snippets/ms-halloween.njk).
   Tout le decor est aria-hidden et pointer-events:none : rien n'intercepte
   un clic. Pour revenir a l'habituel : supprimer ce bloc, retirer le
   render_snippet "ms-halloween.njk" de layouts/master.njk, et remettre
   accent_color #ff00f3 / highlight #EDB935 / fond #000000.
   ========================================================================= */

:root {
  --hw-pumpkin: #FF7A18;
  --hw-ember:   #FFB457;
  --hw-blood:   #E02A0C;
  --hw-fog:     rgba(224, 42, 12, .13);
}

/* --- Les braises : les flocons du theme, repeints --------------------
   Pas de box-shadow ni de filter : a 25 exemplaires animes, ces deux-la
   forcent un repaint par image et font tomber le site a quelques FPS.
   Le halo est peint dans le fond, il ne coute rien. */
.snowflake {
  width: 9px !important; height: 9px !important;
  background: radial-gradient(circle closest-side,
              #FFC46A 0%, #FF8A1E 34%, rgba(255,106,10,.5) 60%, rgba(255,106,10,0) 100%) !important;
  will-change: transform;
}

/* --- La brume au ras du sol ------------------------------------------ */
body::before {
  content: ""; position: fixed; left: -12%; right: -12%; bottom: -70px; height: 320px;
  pointer-events: none; z-index: 0;
  background:
    radial-gradient(60% 100% at 18% 100%, var(--hw-fog), transparent 70%),
    radial-gradient(55% 100% at 62% 100%, rgba(255,122,24,.10), transparent 72%),
    radial-gradient(45% 100% at 92% 100%, rgba(255, 176, 32, .10), transparent 70%);
  filter: blur(24px);
  /* Statique volontairement : animer une couche floutee de 320px de haut
     sur toute la largeur recalcule le flou a chaque image. */
}

/* =================== LE DECOR DESSINE =================== */
.hw-deco, .hw-deco * { pointer-events: none; }
.hw-deco { position: fixed; inset: 0; z-index: 0; overflow: hidden;
  contain: layout paint style;  /* le decor ne declenche pas de recalcul ailleurs */ }

/* Les toiles, dans les deux coins hauts */
.hw-web { position: absolute; top: 0; width: 210px; height: 210px; color: #CFC9D6; opacity: .30; }
.hw-web-l { left: 0; }
.hw-web-r { right: 0; }

/* L'araignee, qui descend puis remonte doucement */
.hw-spider {
  position: absolute; top: 0; left: 268px; width: 68px;
  display: flex; flex-direction: column; align-items: center;
  animation: hw-drop 9s ease-in-out infinite;
  transform-origin: top center;
  will-change: transform;
}
.hw-spider svg { width: 46px; height: 42px; }
.hw-thread { width: 1px; height: 104px; background: linear-gradient(#CFC9D6, rgba(207,201,214,.35)); opacity: .5; }
@keyframes hw-drop {
  0%, 100% { transform: translateY(-34px); }
  50%      { transform: translateY(16px); }
}

/* Les citrouilles, calees en bas a gauche */
/* La bougie dedans ne tient pas en place.
   On n'anime que l'opacite : c'est compose par le GPU, sans repaint.
   Animer un filter: drop-shadow ici coutait une image entiere a chaque pas. */
@keyframes hw-flicker {
  0%, 100% { opacity: 1; }
  38%      { opacity: .74; }
  62%      { opacity: .92; }
}

/* Le pot de bonbons, en bas a droite.
   Il est hors de .hw-deco et au-dessus du contenu : sinon le hero le recouvre
   et le clic ne l'atteint jamais. Le conteneur ne capte rien, seules les
   formes peintes du SVG sont cliquables. */
@keyframes hw-sway {
  0%, 100% { transform: rotate(-1.6deg); }
  50%      { transform: rotate(1.6deg); }
}

/* Sur petit ecran le decor du bas mangerait le contenu */
@media (max-width: 900px) {
  .hw-spider { display: none; }
  .hw-web { width: 130px; height: 130px; opacity: .22; }
}

/* =================== LA MISE EN PAGE =================== */

/* Les titres prennent la flamme. Valeurs en dur : un titre en
   color:transparent sans degrade serait purement invisible. */
@supports (-webkit-background-clip: text) or (background-clip: text) {
  [data-scheme="dark"] .sa-hero h1 {
    background-image: linear-gradient(102deg, #FFE0B0 4%, #FF8A1E 42%, #E02A0C 88%);
    -webkit-background-clip: text; background-clip: text; color: transparent;
  }
}

/* Les cartes s'allument par le haut au survol */
[data-scheme="dark"] .sa-card, [data-scheme="dark"] .card {
  position: relative;
  transition: border-color .25s ease, box-shadow .3s ease, transform .25s ease;
}
[data-scheme="dark"] .sa-card:hover, [data-scheme="dark"] .card:hover {
  border-color: rgba(255,122,24,.42);
  box-shadow: 0 -1px 0 rgba(255,122,24,.55) inset, 0 18px 44px rgba(255,122,24,.14);
}

/* La barre promo : citrouille, avec une braise qui pulse */
.ms-promo {
  background: linear-gradient(92deg, rgba(255,122,24,.20), rgba(224,42,12,.16)) !important;
  border-bottom: 1px solid rgba(255,122,24,.3);
}
.ms-promo-label {
  background: var(--hw-pumpkin) !important; color: #160800 !important;
  animation: hw-pulse 2.6s ease-in-out infinite;
}
@keyframes hw-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255,122,24,.45); }
  50%      { box-shadow: 0 0 14px 3px rgba(255,122,24,.35); }
}

[data-scheme="dark"] .sa-badge-sale, [data-scheme="dark"] .sa-price-off { color: var(--hw-ember); }

/* Personne ne veut d'une page qui bouge quand il a demande le calme */
@media (prefers-reduced-motion: reduce) {
  body::before, .hw-spider, .ms-promo-label { animation: none; }
  .snowflake { display: none !important; }
}

/* Le survol de l'icone Discord du footer etait en blurple de marque (#5865f2).
   Remplace par la braise pour qu'il ne reste aucun violet a l'ecran. */
.hover\:text-\[\#5865f2\]:hover { color: #FF8A1E !important; }

/* =================== JUMPSCARE =================== */
/* Le pot est le seul element du decor qui reprend les clics.
   Specificite volontairement plus forte que la regle .hw-deco * qui
   neutralise les clics sur tout le reste du decor. */

/* Sans cette ligne, display:grid l'emporte sur l'attribut hidden : l'ecran
   noir reste en place, invisible, et avale tous les clics de la boutique. */
/* Une montee brutale puis un tremblement : pas de clignotement,
   une alternance rapide noir/blanc peut declencher une crise chez
   une personne photosensible. */
@keyframes hw-jump {
  from { transform: scale(.55); }
  to   { transform: scale(1.04); }
}
@keyframes hw-shake {
  0%   { transform: scale(1.04) translate(-9px, 4px) rotate(-1.1deg); }
  100% { transform: scale(1.06) translate(9px, -5px) rotate(1.1deg); }
}

/* =========================================================
   VOUCHES DISCORD  (composant myvouches)
   Messages reels du salon #feedback, rendus facon Discord.
   ========================================================= */
.hv-note { display:flex; align-items:center; gap:.6rem; margin:.25rem 0 1.4rem;
  font-size:.88rem; color:rgb(var(--cl-t-muted)); }
.hv-note i { color:#5865F2; font-size:1.1rem; }
.hv-note b { color:rgb(var(--cl-t-primary)); font-weight:700; }

/* Grille : lecture ligne par ligne, du plus recent (en haut a gauche)
   au plus ancien (en bas a droite). Pas de align-items : les cartes
   s'etirent sur toute la hauteur de leur ligne, donc aucun trou. */
.hv-wall { display:grid; grid-template-columns:1fr; gap:.9rem;
  align-items:stretch; text-align:start; }
@media (min-width:640px)  { .hv-wall { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (min-width:1024px) { .hv-wall { grid-template-columns:repeat(3,minmax(0,1fr)); } }

/* height:100% + flex column : la carte remplit sa cellule et le contenu
   reste cale en haut, comme sur Discord. */
.hv-card { margin:0; padding:.85rem 1rem 1rem; height:100%;
  display:flex; flex-direction:column; align-items:stretch;
  border-radius:1rem; background:rgb(255 255 255 / .035);
  border:1px solid var(--cl-border); }
.hv-head { display:flex; align-items:center; gap:.55rem; margin-bottom:.45rem; }
.hv-av { flex:0 0 auto; width:1.85rem; height:1.85rem; border-radius:9999px;
  display:grid; place-items:center; font-size:.8rem; font-weight:800; color:#1a0d05; }
.hv-nom { font-size:.88rem; font-weight:700; color:rgb(var(--cl-t-primary));
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.hv-date { margin-inline-start:auto; flex:0 0 auto; font-size:.7rem;
  color:rgb(var(--cl-t-muted)); font-variant-numeric:tabular-nums; }
.hv-txt { margin:0; font-size:.92rem; line-height:1.5;
  color:rgb(var(--cl-t-primary)); overflow-wrap:anywhere; }
.hv-at { padding:.05rem .3rem; border-radius:.3rem; color:#aab3ff;
  background:rgb(88 101 242 / .22); font-weight:600; }

.hv-cta { margin-top:1.1rem; text-align:center; }
.hv-cta a { display:inline-flex; align-items:center; gap:.5rem;
  padding:.7rem 1.3rem; border-radius:9999px; font-size:.9rem; font-weight:700;
  color:#fff; background:rgb(88 101 242 / .16);
  border:1px solid rgb(88 101 242 / .5); transition:background .2s; }
.hv-cta a:hover { background:rgb(88 101 242 / .3); }
.hv-note-center { justify-content:center; margin:.2rem 0 1.6rem; }
.hv-tr { margin-top:.55rem; }
.hv-tr summary { cursor:pointer; list-style:none; font-size:.72rem; color:rgb(var(--cl-t-muted));
  display:inline-flex; align-items:center; gap:.3rem; }
.hv-tr summary::-webkit-details-marker { display:none; }
.hv-tr summary::before { content:"\f0ac"; font-family:"Font Awesome 6 Free","Font Awesome 5 Free";
  font-weight:900; font-size:.7rem; opacity:.7; }
.hv-tr summary:hover { color:rgb(var(--cl-t-primary)); }
.hv-tr p { margin:.4rem 0 0; font-size:.82rem; line-height:1.45; font-style:italic;
  color:rgb(var(--cl-t-muted)); overflow-wrap:anywhere; }
.hv-home .hv-wall { max-height:42rem; overflow:hidden;
  -webkit-mask-image:linear-gradient(#000 76%, transparent); mask-image:linear-gradient(#000 76%, transparent); }

/* CLICK ME retire : le code L3DESHOP5 est deja dans la banniere du haut
   — un element flottant clignotant de moins dans le champ de vision
   a l'arrivee. Le reste du decor Halloween est inchange. */

/* ---------- Barre promo + annonce : se replient au defilement ----------
   Seule la navbar reste collee en haut. Classe ms-hdr-min posee sur <html>
   par snippets/ms-header-collapse.njk. */
.sa-header .ms-promo:not(.ms-promo--nav),
.sa-header .sa-announcement { overflow:hidden; max-height:14rem;
  transition:max-height .28s ease, opacity .22s ease; }
html.ms-hdr-min .sa-header .ms-promo:not(.ms-promo--nav),
html.ms-hdr-min .sa-header .sa-announcement { max-height:0; opacity:0; }
@media (prefers-reduced-motion:reduce) {
  .sa-header .ms-promo, .sa-header .sa-announcement { transition:none; }
}

/* ---------- BUY FASTER : bandeau best sellers en boucle ----------
   2 series rendues par components/buy-faster.njk, aucun JavaScript.
   La distance de defilement vaut exactement une serie.
   PLUS RIEN A RECALCULER : components/buy-faster.njk pose --bf-n = le
   nombre de cartes sur .bf-rail, et tout en decoule ici.
   Une carte = 17.0rem + 0.95rem d'espace = 17.95rem, a 170 px/s
   soit 1.689s par carte. La valeur 9 des var() n'est qu'un secours
   si le composant n'a pas pose --bf-n.
   -> si tu changes la largeur de carte (17rem) ou le gap (0.95rem),
      ajuste les 17.95rem et les 1.689s ci-dessous en consequence.

   Deux pieges Safari/WebKit rencontres sur ce bandeau :
   1. Sans width EXPLICITE sur .bf-seq, WebKit dimensionne la serie sur la
      largeur intrinseque des images (1672px par carte) au lieu des 17.0rem
      imposes : la serie mesurait 11947px pour 2010px de cartes, soit ~9900px
      de vide entre deux series. Chromium calcule juste et ne montre rien.
   2. will-change: transform donne un calque composite stable. Sans lui
      Safari re-tuile le calque en pleine animation -> flashs noirs. En
      revanche JAMAIS de backface-visibility : sous un overflow:hidden anime
      le bandeau disparait completement. */
.bf { margin-top: -1rem; }
.bf-rail, .bf-rail * { box-sizing: border-box; }

.bf-h { display: flex; align-items: flex-end; justify-content: space-between;
  gap: 1.25rem; flex-wrap: wrap; margin-bottom: 1.4rem; }
.bf-k { font-size: .7rem; font-weight: 800; letter-spacing: .26em;
  color: #FFB020; text-transform: uppercase; }
.bf-t { margin: .35rem 0 0; font-size: clamp(1.9rem, 4vw, 2.9rem); line-height: 1;
  font-weight: 900; letter-spacing: -.03em; color: #fff; }
.bf-s { margin: .6rem 0 0; max-width: 44rem; font-size: .92rem; line-height: 1.55;
  color: rgb(255 255 255 / .62); }
.bf-a { flex: 0 0 auto; padding: .6rem 1.1rem; border-radius: 999px;
  font-size: .85rem; font-weight: 800; text-decoration: none; color: #fff;
  background: rgb(255 255 255 / .05); border: 1px solid rgb(255 255 255 / .12);
  transition: border-color .2s ease, background .2s ease; }
.bf-a:hover { color: #fff; border-color: rgb(255 122 24 / .6);
  background: rgb(255 122 24 / .12); }

.bf-rail { position: relative; overflow: hidden; padding: .3rem 0 1.4rem; }
.bf-track { display: flex;
  animation: bf-defile calc(var(--bf-n, 9) * 1.689s) linear infinite;
  will-change: transform; }
/* largeur EXPLICITE : sans elle WebKit dimensionne la serie sur la largeur
   intrinseque des images (~1700px par carte) au lieu des 17rem imposes,
   et laisse des milliers de pixels vides entre deux series. */
.bf-seq { display: flex; gap: 0.95rem; padding-right: 0.95rem;
  flex: 0 0 calc(var(--bf-n, 9) * 17.95rem);
  width:   calc(var(--bf-n, 9) * 17.95rem); }
.bf-c, .bf-m { min-width: 0; }
.bf-rail:hover .bf-track { animation-play-state: paused; }
@keyframes bf-defile { from { transform: translate3d(0, 0, 0); }
                       to   { transform: translate3d(calc(var(--bf-n, 9) * -17.95rem), 0, 0); } }
@media (prefers-reduced-motion: reduce) { .bf-track { animation: none; } }

.bf-c { flex: 0 0 17.0rem; display: flex; flex-direction: column; padding: .55rem;
  border-radius: 1.15rem; text-decoration: none; background: #140C07;
  border: 1px solid rgb(255 255 255 / .1);
  transition: border-color .2s ease, box-shadow .2s ease; }
.bf-c:hover { border-color: rgb(255 122 24 / .55);
  box-shadow: 0 18px 50px rgb(0 0 0 / .45); }
.bf-x { border-color: rgb(255 122 24 / .55); box-shadow: 0 0 36px rgb(255 122 24 / .12); }

.bf-m { position: relative; aspect-ratio: 1 / 1; overflow: hidden;
  border-radius: .85rem; background: linear-gradient(145deg, #2A1205, #140A04); }
.bf-m img { width: 100%; height: 100%; object-fit: cover; display: block; }
.bf-tp, .bf-st { position: absolute; top: .5rem; padding: .25rem .6rem;
  border-radius: 999px; font-size: .64rem; font-weight: 800; }
.bf-tp { left: .5rem; color: #120803; background: linear-gradient(180deg, #FFD089, #FF8A1E); }
.bf-st { right: .5rem; color: #34D399; background: rgb(6 20 14 / .78);
  border: 1px solid rgb(52 211 153 / .35); }

.bf-b { display: flex; flex-direction: column; gap: .55rem; padding: .85rem .5rem .35rem; }
.bf-g { display: flex; gap: .35rem; overflow: hidden; }
.bf-p1, .bf-p2, .bf-p3 { padding: .24rem .55rem; border-radius: .45rem;
  font-size: .62rem; font-weight: 800; letter-spacing: .04em; white-space: nowrap; }
.bf-p1 { color: #FFB020; background: rgb(255 176 32 / .12);
  border: 1px solid rgb(255 176 32 / .3); }
.bf-p2 { color: rgb(255 255 255 / .6); background: rgb(255 255 255 / .05);
  border: 1px solid rgb(255 255 255 / .12); }
.bf-p3 { color: #FF9A2E; background: rgb(255 122 24 / .14);
  border: 1px solid rgb(255 122 24 / .45); }
.bf-n { display: block; margin: 0; font-size: 1.05rem; font-weight: 800;
  line-height: 1.2; color: #fff; white-space: nowrap; overflow: hidden;
  text-overflow: ellipsis; }

.bf-f { display: flex; align-items: flex-end; justify-content: space-between; gap: .5rem; }
.bf-pr { font-size: 1.45rem; font-weight: 900; line-height: 1;
  letter-spacing: -.02em; color: #FF9A2E; }
.bf-pr small { display: block; margin-bottom: .22rem; font-size: .6rem;
  font-weight: 800; letter-spacing: .12em; color: rgb(255 255 255 / .5); }
.bf-v { padding: .22rem .5rem; border-radius: .45rem; font-size: .6rem;
  font-weight: 800; letter-spacing: .06em; color: #34D399;
  background: rgb(52 211 153 / .1); border: 1px solid rgb(52 211 153 / .3); }
/* L'icone carte bancaire est posee en CSS (::before) et pas en balise :
   14 cartes x un <i> ajouteraient ~500 caracteres au champ custom-html, et on
   garde la marge pour les deux series. Glyphe f09d = fa-credit-card. */
.bf-bt { display: flex; align-items: center; justify-content: center; gap: .5rem;
  margin-top: .75rem; padding: .68rem 1rem; border-radius: 9999px;
  font-size: .9rem; font-weight: 800; color: #120803; white-space: nowrap;
  background: linear-gradient(180deg, #FF872F, #D65B00); transition: filter .2s ease; }
.bf-bt::before { content: "\f09d"; font-family: "Font Awesome 6 Free", "Font Awesome 5 Free";
  font-weight: 900; font-size: .95em; line-height: 1; }
.bf-c:hover .bf-bt { filter: brightness(1.07); }

/* Accueil : on resserre hero -> stats -> Buy faster.
   La barre de stats remonte juste sous le hero au lieu de flotter au milieu. */
.sa-hero > div { margin-bottom: 2.5rem !important; }
.sa-stats > .container { margin-bottom: 2.75rem !important; }
.sa-stats { scroll-margin-top: 7rem; }
@media (min-width: 1024px) {
  .sa-hero > div { margin-bottom: 3.5rem !important; }
  .sa-stats > .container { margin-bottom: 3.5rem !important; }
}

/* Navbar epuree : la pastille Discord a compteur fait doublon avec le bouton
   Join Discord des liens de droite. */
.ms-discord-pill { display: none !important; }


/* =================== FEEDBACKS EN MOUVEMENT ===================
   Deux rangees en sens inverse. Meme regle que le bandeau produits :
   .fr-seq porte une largeur EXPLICITE (10 cartes x 19rem + 10 x 0.9rem
   = 199rem) et le decalage vaut exactement cette largeur. Sans ca WebKit
   dimensionne la serie sur son contenu intrinseque et ouvre un vide.
   will-change: transform -> calque stable, pas de flash au repeint.
   Jamais de backface-visibility : sous overflow:hidden anime, Safari
   cesse de peindre le calque. */
.fr-note { display: flex; align-items: center; justify-content: center; gap: .6rem;
  margin-bottom: 1.6rem; font-size: .9rem; color: rgb(255 255 255 / .62); }
.fr-note b { color: #fff; }
.fr-note i { color: #FF9A2E; }

.fr-wrap { display: flex; flex-direction: column; gap: .9rem; }
.fr-wrap, .fr-wrap * { box-sizing: border-box; }
.fr-rail { position: relative; overflow: hidden;
  margin-inline: calc(50% - 50vw); }
.fr-track { display: flex; animation-name: fr-defile; animation-timing-function: linear;
  animation-iteration-count: infinite; will-change: transform; }
.fr-droite { animation-direction: reverse; }
.fr-seq { display: flex; gap: 0.9rem; padding-right: 0.9rem;
  flex: 0 0 199rem; width: 199rem; }
.fr-rail:hover .fr-track { animation-play-state: paused; }
@keyframes fr-defile { from { transform: translate3d(0, 0, 0); }
                       to   { transform: translate3d(-199rem, 0, 0); } }
@media (prefers-reduced-motion: reduce) { .fr-track { animation: none; } }

/* margin: 0 obligatoire -> <figure> porte une marge UA de 40px de chaque
   cote, qui ajoutait 80px entre deux cartes et faisait deborder la serie
   de 800px hors de sa largeur declaree. */
.fr-card { margin: 0; flex: 0 0 19rem; min-width: 0; display: flex; flex-direction: column;
  padding: 1.1rem 1.2rem; border-radius: 1rem; background: #140C07;
  border: 1px solid rgb(255 255 255 / .09); }
.fr-top { display: flex; align-items: center; justify-content: space-between;
  gap: .6rem; margin-bottom: .85rem; }
.fr-stars { font-size: .82rem; letter-spacing: .12em; color: #FFB020; white-space: nowrap; }
.fr-tag { padding: .22rem .55rem; border-radius: .45rem; font-size: .58rem;
  font-weight: 800; letter-spacing: .07em; white-space: nowrap;
  color: rgb(255 255 255 / .62); background: rgb(255 255 255 / .05);
  border: 1px solid rgb(255 255 255 / .12); }
.fr-txt { margin: 0 0 1rem; font-size: .98rem; line-height: 1.45; color: #fff;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;
  overflow: hidden; min-height: 2.9em; }
.fr-who { display: flex; align-items: center; gap: .65rem; margin-top: auto;
  padding-top: .85rem; border-top: 1px solid rgb(255 255 255 / .07); }
.fr-av { flex: 0 0 auto; display: grid; place-items: center; width: 2.1rem; height: 2.1rem;
  border-radius: 9999px; font-size: .8rem; font-weight: 800; color: #fff; }
.fr-id { display: flex; flex-direction: column; gap: .12rem; min-width: 0; }
.fr-nom { font-size: .88rem; font-weight: 800; color: #fff;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fr-src { display: flex; align-items: center; gap: .35rem; font-size: .7rem;
  color: rgb(52 211 153 / .9); white-space: nowrap; overflow: hidden;
  text-overflow: ellipsis; }
.fr-src i { font-size: .72rem; }


/* =================== POP-UP D'ACCUEIL : SKY MENU ===================
   Visuel en haut, texte dessous, capacites sur deux colonnes, bandeau prix
   puis rappel du code. Les <li> sont ranges par colonne via grid-auto-flow:
   column, d'ou l'ordre alterne gauche/droite dans le HTML. */
.ms-sky { position: relative; width: min(42rem, 100%); max-height: 92vh;
  overflow-y: auto; border-radius: 1.4rem; background: #120A05;
  border: 1px solid rgb(255 255 255 / .1);
  box-shadow: 0 40px 120px rgb(0 0 0 / .65), 0 0 70px rgb(255 122 24 / .12); }
.ms-sky, .ms-sky * { box-sizing: border-box; }

.ms-sky-x { position: absolute; top: .85rem; right: .85rem; z-index: 2;
  display: grid; place-items: center; width: 2.3rem; height: 2.3rem;
  border-radius: 9999px; color: #fff; background: rgb(0 0 0 / .55);
  border: 1px solid rgb(255 255 255 / .14); transition: background .2s ease; }
.ms-sky-x:hover { background: rgb(0 0 0 / .8); }
.ms-sky-x svg { width: 1.1rem; height: 1.1rem; }

.ms-sky-media { position: relative; aspect-ratio: 16 / 7; overflow: hidden;
  border-radius: 1.4rem 1.4rem 0 0; background: linear-gradient(145deg, #2A1205, #140A04); }
.ms-sky-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ms-sky-media::after { content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 45%, #120A05 100%); }

.ms-sky-body { padding: 1.4rem 1.6rem 1.6rem; }
.ms-sky-badge { display: inline-block; padding: .28rem .8rem; border-radius: 9999px;
  font-size: .68rem; font-weight: 900; letter-spacing: .12em; color: #120803;
  background: linear-gradient(180deg, #FFD089, #FF8A1E); }
.ms-sky-title { margin: .6rem 0 0; font-size: clamp(1.9rem, 5vw, 2.5rem); line-height: 1;
  font-weight: 900; letter-spacing: -.03em; color: #fff; }
.ms-sky-sub { margin: .8rem 0 0; font-size: .93rem; line-height: 1.55;
  color: rgb(255 255 255 / .66); }

.ms-sky-feats { display: grid; grid-auto-flow: column; grid-template-rows: repeat(4, auto);
  grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .7rem 1.4rem;
  margin: 1.3rem 0 0; padding: 0; list-style: none; }
.ms-sky-feats li { display: flex; align-items: center; gap: .6rem; min-width: 0;
  font-size: .9rem; font-weight: 600; color: #fff; }
.ms-sky-feats i { flex: 0 0 auto; color: #FF9A2E; font-size: .95rem; }

.ms-sky-deal { display: flex; align-items: center; gap: .9rem; margin-top: 1.5rem;
  padding: .85rem; border-radius: 1rem; background: rgb(255 255 255 / .04);
  border: 1px solid rgb(255 255 255 / .09); }
.ms-sky-off { flex: 0 0 auto; display: grid; place-items: center; min-width: 3.4rem;
  padding: .7rem .5rem; border-radius: .8rem; font-size: .76rem; font-weight: 900;
  letter-spacing: .06em; color: #06140E; background: linear-gradient(180deg, #4ADE98, #23B877); }
.ms-sky-amount { flex: 1 1 auto; min-width: 0; }
.ms-sky-kick { display: block; font-size: .64rem; font-weight: 800; letter-spacing: .12em;
  color: rgb(255 255 255 / .5); }
.ms-sky-amount b { display: block; margin-top: .15rem; font-size: 1.45rem; font-weight: 900;
  letter-spacing: -.02em; color: #fff; }
.ms-sky-cta { flex: 0 0 auto; padding: .75rem 1.5rem; border-radius: 9999px;
  font-size: .95rem; font-weight: 800; text-decoration: none; color: #120803;
  background: linear-gradient(180deg, #FF872F, #D65B00);
  transition: filter .2s ease; }
.ms-sky-cta:hover { filter: brightness(1.08); color: #120803; }

.ms-sky-foot { display: flex; align-items: center; justify-content: space-between;
  gap: .8rem; width: 100%; margin-top: .7rem; padding: .8rem 1rem; border-radius: 1rem;
  font-size: .88rem; font-weight: 700; color: #fff; text-align: start;
  background: rgb(255 122 24 / .1); border: 1px solid rgb(255 122 24 / .3);
  transition: background .2s ease; }
.ms-sky-foot:hover { background: rgb(255 122 24 / .18); }
.ms-sky-foot b { letter-spacing: .08em; color: #FF9A2E; }
.ms-sky-foot-pct { flex: 0 0 auto; font-weight: 900; color: #FF9A2E; }

@media (max-width: 560px) {
  .ms-sky-feats { grid-auto-flow: row; grid-template-rows: none; grid-template-columns: 1fr; }
  .ms-sky-deal { flex-wrap: wrap; }
  .ms-sky-cta { width: 100%; text-align: center; }
}


/* =================== PARCOURS DE COMMANDE ===================
   Trois etats par carte, poses par Alpine : is-fait, is-now, is-next.
   is-now est la seule carte qui s'allume, les autres restent sobres,
   sinon les quatre se disputent le regard et le parcours ne se lit plus. */
.of { margin-bottom: 4rem; }
.of, .of * { box-sizing: border-box; }
.of-head { text-align: center; max-width: 46rem; margin: 0 auto 2.4rem; }
.of-kick { display: inline-block; font-size: .72rem; font-weight: 800;
  letter-spacing: .26em; color: #FFB020; text-transform: uppercase; }
.of-kick-sm { font-size: .64rem; letter-spacing: .22em; }
.of-title { margin: .6rem 0 0; font-size: clamp(1.9rem, 4.4vw, 3rem); line-height: 1.05;
  font-weight: 900; letter-spacing: -.03em; color: #fff; }
.of-sub { margin: .9rem 0 0; font-size: .95rem; line-height: 1.6;
  color: rgb(255 255 255 / .62); }

.of-box { padding: 1.5rem; border-radius: 1.6rem;
  background: linear-gradient(160deg, rgb(255 122 24 / .05), rgb(255 255 255 / .02));
  border: 1px solid rgb(255 255 255 / .09); }
.of-box-head { display: flex; align-items: center; justify-content: space-between;
  gap: 1.2rem; flex-wrap: wrap; margin-bottom: 1.4rem; }
.of-box-title { margin: .35rem 0 0; font-size: clamp(1.2rem, 2.4vw, 1.6rem);
  font-weight: 900; letter-spacing: -.02em; color: #fff; }
.of-next { display: inline-flex; align-items: center; gap: .55rem; padding: .7rem 1.3rem;
  border-radius: 9999px; font-size: .9rem; font-weight: 800; color: #120803;
  background: linear-gradient(180deg, #FF872F, #D65B00); transition: filter .2s ease; }
.of-next:hover { filter: brightness(1.08); }

.of-steps { display: grid; gap: .9rem; margin: 0; padding: 0; list-style: none;
  grid-template-columns: 1fr; }
@media (min-width: 720px) { .of-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .of-steps { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

.of-step { display: flex; flex-direction: column; min-width: 0; padding: 1.2rem;
  border-radius: 1.1rem; background: #140C07; border: 1px solid rgb(255 255 255 / .08);
  transition: border-color .35s ease, box-shadow .35s ease, background .35s ease; }
.of-step.is-now { border-color: rgb(255 122 24 / .6);
  background: linear-gradient(160deg, rgb(255 122 24 / .14), #140C07 60%);
  box-shadow: 0 0 44px rgb(255 122 24 / .16); }

.of-step-top { display: flex; align-items: center; justify-content: space-between;
  gap: .6rem; margin-bottom: 1rem; }
.of-ico { display: grid; place-items: center; width: 2.9rem; height: 2.9rem;
  border-radius: 9999px; font-size: 1.05rem;
  color: rgb(255 255 255 / .55); background: rgb(255 255 255 / .05);
  border: 1px solid rgb(255 255 255 / .1);
  transition: color .35s ease, background .35s ease, border-color .35s ease; }
.of-step.is-fait .of-ico { color: #34D399; background: rgb(52 211 153 / .1);
  border-color: rgb(52 211 153 / .35); }
.of-step.is-now .of-ico { color: #120803; border-color: transparent;
  background: linear-gradient(180deg, #FF872F, #D65B00); }
.of-num { font-size: .7rem; font-weight: 800; letter-spacing: .08em;
  color: rgb(255 255 255 / .4); padding: .22rem .5rem; border-radius: .45rem;
  background: rgb(255 255 255 / .04); border: 1px solid rgb(255 255 255 / .08); }
.of-step.is-now .of-num { color: #FF9A2E; border-color: rgb(255 122 24 / .4); }

.of-step-title { margin: 0; font-size: 1.2rem; font-weight: 900;
  letter-spacing: -.02em; color: #fff; }
.of-step-txt { margin: .5rem 0 1.1rem; font-size: .87rem; line-height: 1.5;
  color: rgb(255 255 255 / .58); }
.of-state { display: flex; align-items: center; gap: .45rem; margin-top: auto;
  font-size: .78rem; font-weight: 800; color: rgb(255 255 255 / .4);
  transition: color .35s ease; }
.of-step.is-fait .of-state { color: #34D399; }
.of-step.is-now .of-state { color: #FF9A2E; }

.of-foot { display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; margin-top: 1.3rem; }
.of-dots { display: flex; align-items: center; gap: .45rem; }
.of-dot { width: .6rem; height: .6rem; border-radius: 9999px; padding: 0;
  background: rgb(255 255 255 / .18);
  transition: width .35s ease, background .35s ease; }
.of-dot.is-fait { background: #34D399; }
.of-dot.is-now { width: 2.2rem; background: linear-gradient(90deg, #FF872F, #D65B00); }
.of-count { font-size: .76rem; font-weight: 800; letter-spacing: .14em;
  color: rgb(255 255 255 / .42); }
.of-count b { color: #fff; }

@media (prefers-reduced-motion: reduce) {
  .of-step, .of-ico, .of-dot, .of-state { transition: none; }
}


/* ---------- BUY FASTER : bouton rond d'ajout au panier ----------
   .bf-cell est fabrique par snippets/ms-buyfaster-cart.njk : il reprend la
   largeur que portait la carte (17rem), donc la largeur de serie et la
   distance de defilement sont inchangees. Le bouton est pose a cote du lien
   et pas dedans : un <button> dans un <a> est invalide. */
.bf-cell { flex: 0 0 17rem; min-width: 0; position: relative; display: flex; }
.bf-cell > .bf-c { flex: 1 1 auto; min-width: 0; }
.bf-cell .bf-bt { margin-right: 3.4rem; }
/* une carte sans bouton panier reprend toute sa largeur */
.bf-cell--solo .bf-bt { margin-right: 0; }
.bf-add { position: absolute; right: .55rem; bottom: .9rem; z-index: 2;
  display: grid; place-items: center; width: 2.75rem; height: 2.75rem;
  border-radius: 9999px; color: #FF9A2E; background: rgb(255 122 24 / .1);
  border: 1px solid rgb(255 122 24 / .45);
  transition: background .2s ease, color .2s ease, border-color .2s ease; }
.bf-add::before { content: "\f07a"; font-family: "Font Awesome 6 Free", "Font Awesome 5 Free";
  font-weight: 900; font-size: 1rem; line-height: 1; }
.bf-add:hover { color: #120803; border-color: transparent;
  background: linear-gradient(180deg, #FF872F, #D65B00); }
.bf-add.is-ok { color: #06140E; border-color: transparent;
  background: linear-gradient(180deg, #4ADE98, #23B877); }
.bf-add.is-ok::before { content: "\f00c"; }

/* ================== PERFORMANCE ==================
   Mesure sur le site en production, 16/10, animation par animation.
   Le cout vient des couches de halo : .sa-glow (composant glow-orb) et
   .sa-amb-l (layouts/master). Ce sont de grandes surfaces floutees, et
   les animer oblige le navigateur a recalculer le flou sur toute leur
   surface a chaque image.

   Figees, elles sont visuellement identiques : le degrade ne derive
   simplement plus de quelques pixels.
     etat actuel : mediane 15 fps, pointe a 30
     halos figes : mediane 20 fps, pointe a 60
     (4 series alternees ; machine de mesure bridee, valeurs relatives)

   Couper la neige, en revanche, n'a montre aucun gain mesurable :
   le reglage Snow du theme reste tel quel.                            */
.sa-glow,
.sa-amb-l { animation: none !important; }

/* --- Pastille "On sale" de la page boutique -------------------------
   Filtre cote navigateur : elle masque les cartes sans prix barre, sans
   rechargement. Elle n'apparait que s'il y a au moins une promo en cours
   (components/products-page.njk, _msPromoN). */
.ms-shop-sale {
  display: inline-flex; align-items: center; gap: .45rem;
  padding: .3rem .7rem; border-radius: 999px; cursor: pointer;
  font: inherit; font-weight: 700; letter-spacing: .01em;
  color: #FF9A2E; background: rgba(255,122,24,.10);
  border: 1px solid rgba(255,122,24,.34);
  transition: background .18s ease, color .18s ease, border-color .18s ease;
}
.ms-shop-sale:hover { background: rgba(255,122,24,.18); }
.ms-shop-sale.is-on {
  color: #120803; border-color: transparent;
  background: linear-gradient(180deg, #FF872F, #D65B00);
}
.ms-shop-sale i { font-size: .9em; }

/* Le crasher n'est inclus que dans la formule a vie : la mention est collee
   a la ligne de la fonctionnalite, pas releguee en bas de la popup. */
.ms-sky-only {
  margin-left: .4rem; padding: .1rem .42rem; border-radius: 999px;
  font-size: .64em; font-weight: 800; letter-spacing: .06em;
  text-transform: uppercase; white-space: nowrap;
  color: #FFB020; background: rgba(255,176,32,.13);
  border: 1px solid rgba(255,176,32,.32);
}

/* Avis laisses sur la boutique : SellAuth ne les ouvre qu'aux acheteurs.
   La ligne dit le produit et la provenance — un avis d'un mot ("Fast") ne
   veut rien dire sans savoir sur quoi il porte. */
.hv-src {
  margin: .7rem 0 0; display: flex; align-items: center; gap: .4rem;
  font-size: .76rem; line-height: 1.4; color: #7FCF9B;
}
.hv-src i { font-size: .9em; opacity: .9; }