/** Shopify CDN: Minification failed

Line 6803:4 Unexpected "{"
Line 6803:5 Expected identifier but found "%"
Line 6804:59 Unexpected bad string token
Line 6804:74 Unterminated string token
Line 6805:60 Unexpected "`"
Line 6806:52 Unexpected "`"
Line 6806:78 Unterminated string token
Line 6808:84 Unterminated string token
Line 6815:83 Unterminated string token
Line 6818:5 Expected identifier but found "%"

**/
/* SHOPIFY_STYLESHEETS_VERSION: 1.0 */


/* CSS from section stylesheet tags */
/* START_SECTION:404 (INDEX:0) */
.onix-404 {
    position: relative;
    margin: 1rem 0 1.5rem;
    border-radius: 1.2rem;
    display: grid;
    gap: 0.9rem;
    justify-items: center;
    align-content: center;
    min-height: 68vh;
    padding: clamp(3rem, 8vw, 5rem) 1.4rem;
    background:
      radial-gradient(ellipse 75% 55% at 50% 0%, rgba(0, 200, 255, 0.16) 0%, transparent 62%),
      linear-gradient(180deg, #0b1220 0%, #070b14 100%);
    text-align: center;
    overflow: hidden;
    isolation: isolate;
  }
  /* terrain : ligne médiane + rond central */
  .onix-404::before {
    content: "";
    position: absolute;
    left: -4%;
    right: -4%;
    top: 50%;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(0, 200, 255, 0.22) 18%, rgba(0, 200, 255, 0.22) 82%, transparent);
    z-index: -1;
  }
  .onix-404::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: 240px;
    height: 240px;
    transform: translate(-50%, -50%);
    border: 1px solid rgba(0, 200, 255, 0.18);
    border-radius: 50%;
    z-index: -1;
  }
  .onix-404__eyebrow {
    margin: 0;
    font-size: 0.68rem;
    letter-spacing: 0.32em;
    text-transform: uppercase;
    color: #00c8ff;
    font-weight: 700;
  }
  .onix-404__code {
    margin: 0;
    font-size: clamp(6rem, 24vw, 11rem);
    line-height: 0.95;
    font-weight: 800;
    color: transparent;
    -webkit-text-stroke: 2px rgba(0, 200, 255, 0.45);
    text-shadow: 0 0 44px rgba(0, 200, 255, 0.25);
  }
  .onix-404__title {
    margin: 0;
    font-size: clamp(1.15rem, 4vw, 1.6rem);
    font-weight: 800;
    color: #ffffff;
    text-wrap: balance;
  }
  .onix-404__text {
    margin: 0;
    max-width: 30rem;
    font-size: 0.92rem;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.6);
  }
  .onix-404__actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.7rem;
    margin-top: 0.9rem;
  }
  .onix-404__btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.85rem 1.7rem;
    border-radius: 999px;
    font-size: 0.92rem;
    font-weight: 800;
    text-decoration: none;
    overflow: hidden;
  }
  .onix-404__btn--primary {
    background: #00c8ff;
    color: #021018;
    box-shadow: 0 10px 26px -8px rgba(0, 200, 255, 0.55);
  }
  .onix-404__btn--ghost {
    border: 1px solid rgba(0, 200, 255, 0.5);
    color: #7fe4ff;
  }
  .onix-404__btn-label { position: relative; z-index: 1; }
  .onix-404__btn-sweep {
    position: absolute;
    top: 0;
    bottom: 0;
    left: -40%;
    width: 34%;
    background: linear-gradient(105deg, transparent 0%, rgba(255, 255, 255, 0.55) 50%, transparent 100%);
    transform: skewX(-18deg);
    animation: onix404Sweep 3s ease-in-out infinite;
    z-index: 0;
    pointer-events: none;
  }
  @keyframes onix404Sweep {
    0%, 55% { left: -40%; }
    85%, 100% { left: 120%; }
  }
  @media (prefers-reduced-motion: reduce) {
    .onix-404__btn-sweep { animation: none; display: none; }
  }
/* END_SECTION:404 */

/* START_SECTION:cart (INDEX:3) */
.onix-cart-page {
    width: 100%;
    min-height: 100%;
    padding:
      clamp(2rem, 4vw, 3rem)
      1rem
      clamp(4rem, 8vw, 6rem);
    background:
      radial-gradient(circle at top, rgba(255, 255, 255, 0.03), transparent 30%),
      #0a0a0a;
    color: #f4f1eb;
  }

  .onix-cart-page__container {
    width: min(100%, 32rem);
    margin: 0 auto;
    display: grid;
    gap: 1.6rem;
  }

  .onix-cart-page__header {
    display: grid;
    gap: 0.45rem;
  }

  .onix-cart-page__eyebrow {
    margin: 0;
    font-size: 0.58rem;
    letter-spacing: 0.32em;
    text-transform: uppercase;
    color: rgba(244, 241, 235, 0.54);
  }

  .onix-cart-page__title {
    margin: 0;
    font-size: clamp(1.6rem, 5vw, 2.2rem);
    letter-spacing: 0.16em;
    text-transform: uppercase;
    font-weight: 500;
  }

  .onix-cart-page__form {
    display: grid;
    gap: 1.5rem;
  }

  .onix-cart-page__items {
    display: grid;
    gap: 1.15rem;
  }

  .onix-cart-page__item {
    display: grid;
    grid-template-columns: 6rem minmax(0, 1fr);
    gap: 0.95rem;
    padding-bottom: 1.15rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  }

  .onix-cart-page__media {
    display: block;
    background: #111111;
    aspect-ratio: 0.82;
    overflow: hidden;
  }

  .onix-cart-page__image {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .onix-cart-page__content {
    display: grid;
    gap: 0.7rem;
    align-content: start;
  }

  .onix-cart-page__topline,
  .onix-cart-page__bottomline {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.85rem;
  }

  .onix-cart-page__product-title,
  .onix-cart-page__product-title a {
    margin: 0;
    color: inherit;
    text-decoration: none;
    font-size: 0.74rem;
    line-height: 1.45;
    letter-spacing: 0.12em;
    text-transform: uppercase;
  }

  .onix-cart-page__remove {
    display: inline-flex;
    align-items: center;
    color: rgba(244, 241, 235, 0.52);
    text-decoration: none;
    font-size: 0.55rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    white-space: nowrap;
    padding-top: 0.1rem;
  }

  .onix-cart-page__meta {
    margin: 0;
    font-size: 0.6rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: rgba(244, 241, 235, 0.64);
  }

  .onix-cart-page__quantity-group {
    display: grid;
    gap: 0.45rem;
  }

  .onix-cart-page__quantity-label {
    font-size: 0.52rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: rgba(244, 241, 235, 0.5);
  }

  .onix-cart-page__quantity-control {
    display: inline-grid;
    grid-template-columns: 2.4rem 3rem 2.4rem;
    align-items: stretch;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: #101010;
  }

  .onix-cart-page__quantity-button {
    border: 0;
    background: transparent;
    color: #f4f1eb;
    font-size: 0.9rem;
    cursor: pointer;
    transition:
      background-color 180ms ease,
      color 180ms ease;
  }

  .onix-cart-page__quantity-button:hover,
  .onix-cart-page__quantity-button:focus-visible {
    background: rgba(255, 255, 255, 0.04);
  }

  .onix-cart-page__quantity-input {
    width: 100%;
    min-height: 2.8rem;
    padding: 0.55rem 0.2rem;
    border: 0;
    border-inline: 1px solid rgba(255, 255, 255, 0.08);
    background: transparent;
    color: #f4f1eb;
    text-align: center;
    appearance: textfield;
    -moz-appearance: textfield;
  }

  .onix-cart-page__quantity-input::-webkit-outer-spin-button,
  .onix-cart-page__quantity-input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
  }

  .onix-cart-page__pricing {
    display: grid;
    justify-items: end;
    gap: 0.2rem;
  }

  .onix-cart-page__compare-price {
    font-size: 0.62rem;
    color: rgba(244, 241, 235, 0.44);
    text-decoration: line-through;
  }

  .onix-cart-page__price {
    font-size: 0.76rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #f4f1eb;
  }

  .onix-cart-page__summary {
    display: grid;
    gap: 0.95rem;
    padding-top: 0.35rem;
  }

  .onix-cart-page__subtotal {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    font-size: 0.68rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
  }

  .onix-cart-page__subtotal strong {
    font-size: 0.86rem;
  }

  .onix-cart-page__checkout {
    min-height: 3.8rem;
    border: 1px solid rgba(244, 241, 235, 0.14);
    background: #ffffff;
    color: #050505;
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    cursor: pointer;
  }

  .onix-cart-page__continue {
    justify-self: center;
    color: rgba(244, 241, 235, 0.72);
    text-decoration: none;
    font-size: 0.62rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
  }

  .onix-cart-page__trust {
    display: grid;
    gap: 0.55rem;
    padding-top: 0.45rem;
  }

  .onix-cart-page__trust-item {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;
    gap: 0.55rem;
  }

  .onix-cart-page__trust-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1rem;
    height: 1rem;
    color: rgba(244, 241, 235, 0.68);
  }

  .onix-cart-page__trust-icon svg {
    width: 1rem;
    height: 1rem;
  }

  .onix-cart-page__trust p {
    margin: 0;
    font-size: 0.58rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: rgba(244, 241, 235, 0.62);
  }

  .onix-cart-page__empty {
    display: grid;
    gap: 0.75rem;
    padding: 1rem 0 0;
  }

  .onix-cart-page__empty-title {
    margin: 0;
    font-size: 0.8rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
  }

  .onix-cart-page__empty-copy {
    margin: 0;
    color: rgba(244, 241, 235, 0.64);
    line-height: 1.75;
  }

  .onix-cart-page__continue--empty {
    justify-self: start;
    margin-top: 0.25rem;
  }

  @media (min-width: 750px) {
    .onix-cart-page {
      padding-inline: 1.5rem;
    }

    .onix-cart-page__container {
      width: min(100%, 40rem);
    }

    .onix-cart-page__item {
      grid-template-columns: 7rem minmax(0, 1fr);
    }
  }
/* END_SECTION:cart */

/* START_SECTION:collection (INDEX:4) */
.onix-collection {
    width: 100%;
    display: grid;
    gap: clamp(2rem, 4vw, 3.25rem);
    padding:
      clamp(2.5rem, 4vw, 4rem)
      clamp(1rem, 3vw, 2.75rem)
      clamp(4.5rem, 7vw, 6.5rem);
    background:
      radial-gradient(circle at top, rgba(255, 255, 255, 0.55), transparent 34%),
      #ffffff;
    color: #111111;
  }

  .onix-collection__hero {
    position: relative;
    display: grid;
    gap: 0.65rem;
    justify-items: center;
    padding: clamp(2.1rem, 5vw, 3.2rem) 1.2rem clamp(2.3rem, 5vw, 3.4rem);
    border: 1px solid rgba(0, 200, 255, 0.22);
    border-radius: 1.2rem;
    background:
      radial-gradient(ellipse 70% 55% at 50% 0%, rgba(0, 200, 255, 0.16) 0%, transparent 62%),
      linear-gradient(180deg, #0b1220 0%, #070b14 100%);
    box-shadow: 0 18px 44px -22px rgba(2, 16, 24, 0.65);
    text-align: center;
    overflow: hidden;
    isolation: isolate;
  }
  /* lignes de terrain : médiane + rond central, derrière le contenu */
  .onix-collection__hero::before {
    content: "";
    position: absolute;
    left: -4%;
    right: -4%;
    top: 50%;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(0, 200, 255, 0.25) 18%, rgba(0, 200, 255, 0.25) 82%, transparent);
    z-index: -1;
  }
  .onix-collection__hero::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: 160px;
    height: 160px;
    transform: translate(-50%, -50%);
    border: 1px solid rgba(0, 200, 255, 0.22);
    border-radius: 50%;
    z-index: -1;
  }
  .onix-collection__hero-eyebrow {
    font-size: 0.66rem;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    color: #00c8ff;
    font-weight: 700;
  }
  .onix-collection__hero-title {
    margin: 0;
    font-size: clamp(1.7rem, 5.5vw, 3rem);
    line-height: 1.06;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    font-weight: 800;
    color: #ffffff;
    text-wrap: balance;
  }
  .onix-collection__hero-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 0.5rem 0.8rem;
    margin-top: 0.2rem;
  }
  .onix-collection__hero-count {
    padding: 0.28rem 0.7rem;
    border-radius: 999px;
    background: rgba(0, 200, 255, 0.14);
    border: 1px solid rgba(0, 200, 255, 0.35);
    color: #7fe4ff;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
  }
  .onix-collection__hero-sub {
    color: rgba(255, 255, 255, 0.55);
    font-size: 0.85rem;
    line-height: 1.5;
  }

  .onix-collection__intro-meta {
    display: flex;
    justify-content: flex-end;
  }

  .onix-collection__intro-note {
    max-width: 26rem;
    margin: 0;
    font-size: 0.72rem;
    line-height: 1.8;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: rgba(17, 17, 17, 0.46);
    text-align: right;
  }

  .onix-collection__intro-divider {
    display: block;
    width: 100%;
    height: 1px;
    background: linear-gradient(90deg, rgba(0, 200, 255, 0.35), rgba(17, 17, 17, 0.06));
  }

  .onix-collection__eyebrow {
    font-size: 0.65rem;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    color: #00c8ff;
    font-weight: 600;
  }

  .onix-collection__title {
    margin: 0;
    font-size: clamp(1.6rem, 4vw, 2.8rem);
    line-height: 1.05;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    font-weight: 700;
    color: #111111;
  }

  .onix-collection__subtitle {
    margin: 0;
    max-width: 40rem;
    color: rgba(17, 17, 17, 0.55);
    line-height: 1.7;
    font-size: 0.95rem;
  }

  .onix-collection__intro-categories {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: center;
    margin-top: 0.4rem;
  }

  .onix-collection__empty {
    grid-column: 1 / -1;
    display: grid;
    gap: 1.1rem;
    justify-items: center;
    padding: 3rem 1rem;
    text-align: center;
  }
  .onix-collection__empty-text {
    margin: 0;
    color: rgba(17, 17, 17, 0.55);
    font-size: 0.95rem;
  }
  .onix-collection__empty-cta {
    display: inline-flex;
    padding: 0.75rem 2.4rem;
    background: #00c8ff;
    color: #0a0a0a;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    text-decoration: none;
  }
  .onix-collection__empty-cta:hover { box-shadow: 0 0 18px rgba(0, 200, 255, 0.35); }

  /* Colonne, et non plus rangée : la ligne de statut (« tout est affiché »,
     « le chargement n'a pas abouti ») se pose SOUS le bouton, pas à côté. */
  .onix-collection__more-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.85rem;
  }
  .onix-collection__more-statut {
    margin: 0;
    max-width: min(100%, 30rem);
    text-align: center;
    font-size: 0.78rem;
    line-height: 1.5;
    color: rgba(17, 17, 17, 0.62);
  }
  /* Le `hidden` posé par le JS doit gagner : c'est exactement la règle qui
     manquait sur .onix-collection__more-wrap et qui laissait, le 23/08, un
     bouton grisé visible à jamais sous un display:flex. */
  .onix-collection__more-statut[hidden] { display: none; }
  .onix-collection__more {
    width: min(100%, 22rem);
    padding: 0.85rem 2rem;
    border: 1.5px solid rgba(0, 200, 255, 0.45);
    background: #ffffff;
    color: #111111;
    border-radius: 999px;
    font-family: inherit;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    font-size: 0.72rem;
    cursor: pointer;
    transition: background 0.18s ease;
  }
  .onix-collection__more:hover { background: rgba(0, 200, 255, 0.06); }
  .onix-collection__more[disabled] { opacity: 0.5; cursor: wait; }

  .onix-collection__toolbar {
    display: flex;
    justify-content: flex-end;
    margin-top: -0.6rem;
  }

  .onix-collection__sort {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
  }
  .onix-collection__sort-label {
    font-size: 0.72rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: rgba(17, 17, 17, 0.5);
    font-weight: 600;
  }
  .onix-collection__sort-select {
    appearance: none;
    -webkit-appearance: none;
    padding: 0.55rem 2.1rem 0.55rem 1rem;
    border-radius: 999px;
    border: 1px solid rgba(17, 17, 17, 0.14);
    background: #ffffff url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5' fill='none' stroke='%23111' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat right 0.8rem center / 10px;
    font-size: 0.82rem;
    font-weight: 600;
    color: #111111;
    cursor: pointer;
  }
  @media (max-width: 640px) {
    .onix-collection__toolbar { justify-content: center; margin-top: -0.3rem; }
  }

  .onix-collection__controls {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 0.75rem 1rem;
  }

  .onix-collection__filters {
    display: grid;
    gap: 0.5rem;
    justify-items: end;
  }

  .onix-collection__filter-details {
    position: relative;
  }

  .onix-collection__filter-details[open] .onix-collection__filter-chevron {
    transform: rotate(180deg);
  }

  .onix-collection__filter-toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    cursor: pointer;
    list-style: none;
    font-size: 0.65rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: rgba(17, 17, 17, 0.55);
    font-weight: 600;
    user-select: none;
    padding: 0.3rem 0;
  }

  .onix-collection__filter-toggle::-webkit-details-marker { display: none; }

  .onix-collection__filter-chevron {
    width: 0.85rem;
    height: 0.85rem;
    flex-shrink: 0;
    transition: transform 200ms ease;
    color: rgba(17,17,17,0.4);
  }

  .onix-collection__filter-dot {
    width: 0.38rem;
    height: 0.38rem;
    border-radius: 50%;
    background: #00c8ff;
    flex-shrink: 0;
  }

  .onix-collection__filter-list {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 0.45rem;
    padding-top: 0.5rem;
  }

  .onix-collection__count {
    font-size: 0.72rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: rgba(17, 17, 17, 0.5);
    font-weight: 500;
    line-height: 1.3;
  }

  .onix-collection__sort-label {
    font-size: 0.65rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: rgba(17, 17, 17, 0.45);
  }

  .onix-collection__filter {
    display: inline-flex;
    align-items: center;
    min-height: 2rem;
    padding: 0.4rem 0.9rem;
    border: 1px solid rgba(17, 17, 17, 0.12);
    border-radius: 2rem;
    background: #ffffff;
    color: rgba(17, 17, 17, 0.65);
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    font-size: 0.6rem;
    font-weight: 500;
    transition:
      border-color 200ms ease,
      background-color 200ms ease,
      color 200ms ease,
      box-shadow 200ms ease,
      transform 200ms ease;
  }

  .onix-collection__filter:hover,
  .onix-collection__filter:focus-visible {
    border-color: rgba(0, 200, 255, 0.45);
    background: rgba(0, 200, 255, 0.06);
    color: #111111;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 200, 255, 0.12);
  }

  .onix-collection__filter--active {
    border-color: #00c8ff;
    background: rgba(0, 200, 255, 0.1);
    color: #0099cc;
    font-weight: 600;
    box-shadow: 0 2px 8px rgba(0, 200, 255, 0.15);
  }

  .onix-collection__sort-wrap {
    position: relative;
  }

  .onix-collection__sort-select {
    min-height: 2.4rem;
    padding: 0.5rem 0.9rem;
    border: 1px solid rgba(17, 17, 17, 0.1);
    border-radius: 2rem;
    background: #ffffff;
    color: #111111;
    font-size: 0.75rem;
    cursor: pointer;
    appearance: auto;
    transition: border-color 200ms ease, box-shadow 200ms ease;
  }

  .onix-collection__sort-select:hover,
  .onix-collection__sort-select:focus {
    border-color: rgba(0, 200, 255, 0.45);
    box-shadow: 0 2px 8px rgba(0, 200, 255, 0.1);
    outline: none;
  }

  .onix-collection__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.75rem;
    padding: 0;
    background: transparent;
  }

  /* La carte produit (.onix-collection-card*) est rendue par le snippet
     onix-product-card.liquid (modèle covred). Son CSS y est colocalisé,
     ne pas le redéfinir ici pour éviter les conflits. */

  .onix-collection__pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 1rem;
    padding: 0.5rem 0;
  }

  .onix-collection__pagination > span,
  .onix-collection__pagination > a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2.2rem;
    height: 2.2rem;
    margin: 0 0.2rem;
    border-radius: 50%;
    font-size: 0.75rem;
    font-weight: 700;
    text-decoration: none;
    color: #111111;
    border: 1.5px solid rgba(17, 17, 17, 0.12);
    background: #ffffff;
    transition: border-color 180ms ease, background 180ms ease;
    -webkit-tap-highlight-color: transparent;
    outline: none;
  }

  .onix-collection__pagination > span span,
  .onix-collection__pagination > a span {
    all: unset;
  }

  .onix-collection__pagination a,
  .onix-collection__pagination span a {
    text-decoration: none;
    color: inherit;
  }

  .onix-collection__pagination > a:hover {
    border-color: rgba(0, 200, 255, 0.5);
    background: rgba(0, 200, 255, 0.07);
    transform: translateY(-1px);
    box-shadow: 0 3px 10px rgba(0, 200, 255, 0.15);
  }

  .onix-collection__pagination > span.current {
    background: #00c8ff;
    color: #ffffff;
    border-color: #00c8ff;
    box-shadow: 0 3px 12px rgba(0, 200, 255, 0.35);
  }

  .onix-collection__pagination > .deco {
    border: none;
    background: transparent;
    color: rgba(17, 17, 17, 0.4);
    pointer-events: none;
    min-width: 1.2rem;
  }

  .onix-collection__pagination > .prev,
  .onix-collection__pagination > .next {
    font-size: 1rem;
    font-weight: 400;
  }

  @media (min-width: 750px) {
    .onix-collection__grid {
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 1rem;
      padding: 0;
    }
  }

  @media (min-width: 1200px) {
    .onix-collection__grid {
      grid-template-columns: repeat(5, minmax(0, 1fr));
      gap: 1.25rem;
      padding: 0;
    }
  }

  @media (max-width: 749px) {
    .onix-collection {
      gap: 1.6rem;
      padding:
        1.6rem
        1rem
        4rem;
    }

    .onix-collection__grid {
      gap: 0.75rem;
      padding: 0;
    }

    .onix-collection__intro {
      gap: 1rem;
    }

    .onix-collection__intro-categories {
      gap: 0.45rem;
    }

    .onix-collection__intro-meta {
      justify-content: flex-start;
    }

    .onix-collection__intro-note {
      max-width: 100%;
      font-size: 0.64rem;
      letter-spacing: 0.12em;
      text-align: left;
    }

    .onix-collection__toolbar {
      flex-direction: column;
      align-items: stretch;
      gap: 1rem;
      padding-top: 0.05rem;
    }

    /* Meta-only variant: stay centered on mobile instead of stretching */
    .onix-collection__toolbar--meta-only {
      flex-direction: row;
      align-items: center;
      justify-content: center;
      padding-top: 0.75rem;
    }

    .onix-collection__toolbar--meta-only .onix-collection__meta {
      justify-content: center;
    }

    .onix-collection__controls,
    .onix-collection__filters,
    .onix-collection__filter-list {
      justify-content: flex-start;
      justify-items: start;
    }

    .onix-collection__filter-list {
      justify-content: flex-start;
    }

    .onix-collection__sort {
      justify-content: space-between;
    }

    .onix-collection__sort-select {
      width: 100%;
    }
  }
  /* le hidden posé par le JS « Voir plus » doit gagner sur le display:flex */
  .onix-collection__pagination[hidden] { display: none; }

  @media (max-width: 749px) {
    .onix-collection__pagination { flex-wrap: wrap; row-gap: 0.4rem; }
    .onix-collection__pagination > span,
    .onix-collection__pagination > a {
      min-width: 2.75rem;
      height: 2.75rem;
      font-size: 0.82rem;
    }
  }
/* END_SECTION:collection */

/* START_SECTION:collections (INDEX:5) */
.collections {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(var(--collection-card-size), 100%), 1fr));
    gap: var(--grid-gap);
  }
  .collections--compact {
    --collection-card-size: 160px;
  }
  .collections--full {
    --collection-card-size: 280px;
  }
  .collection-card {
    display: flex;
    flex-direction: column;
    width: 100%;
  }
/* END_SECTION:collections */

/* START_SECTION:football-categories-3d (INDEX:6) */
/* ─── Section wrapper ──────────────────────────────── */
.fc3d {
  padding: clamp(2rem, 4vw, 3rem) 0 clamp(2rem, 4vw, 3rem);
  background: var(--c-bg);
  overflow: hidden;
}

/* ─── Header ──────────────────────────────────────── */
.fc3d__header {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 1.5rem;
  padding: 0 clamp(1.25rem, 5vw, 4rem);
  margin-bottom: clamp(1.5rem, 3vw, 2.5rem);
}

.fc3d__eyebrow {
  font-size: 0.72rem;
  letter-spacing: 0.4em;
  text-transform: uppercase;
  color: var(--c-accent);
  margin-bottom: 0.6rem;
  font-weight: 600;
}

.fc3d__title {
  font-size: clamp(1.8rem, 4vw, 3rem);
  font-weight: 800;
  color: var(--c-fg);
  line-height: 1.1;
  letter-spacing: -0.02em;
  text-transform: uppercase;
}

/* ─── Arrow buttons ───────────────────────────────── */
.fc3d__arrows {
  display: flex;
  gap: 0.6rem;
  flex-shrink: 0;
}

.fc3d__arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  border: 1px solid var(--c-border);
  border-radius: 50%;
  background: transparent;
  color: var(--c-fg);
  cursor: pointer;
  transition: border-color 0.2s, background 0.2s, color 0.2s, box-shadow 0.2s;
}

.fc3d__arrow svg { width: 1.1rem; height: 1.1rem; }

.fc3d__arrow:hover,
.fc3d__arrow:focus-visible {
  border-color: var(--c-accent);
  background: var(--c-accent-gl);
  color: var(--c-accent);
  box-shadow: 0 0 16px var(--c-accent-gl);
  outline: none;
}

/* Side-floating arrow variant — sits on the left/right edge of the
   carousel, white pill with a soft shadow. Desktop only (hidden by
   default + media query below). */
.fc3d__arrow--side {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 3;
  width: 2.8rem;
  height: 2.8rem;
  background: #ffffff;
  border-color: rgba(0, 0, 0, 0.08);
  color: #111111;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.10);
}
.fc3d__arrow--side[hidden] { display: none; }
.fc3d__arrow--side.fc3d__arrow--prev { left: 1rem; }
.fc3d__arrow--side.fc3d__arrow--next { right: 1rem; }
.fc3d__arrow--side:hover { background: #f5f5f5; transform: translateY(-50%) scale(1.05); }
.fc3d__arrow--side:active { transform: translateY(-50%) scale(0.96); }

@media (max-width: 749px) {
  /* Mobile keeps native horizontal swipe — hide both side arrows. */
  .fc3d__arrow--side { display: none !important; }
}

/* ─── Track ───────────────────────────────────────── */
.fc3d__track-wrap {
  position: relative;
}

.fc3d__track {
  display: flex;
  gap: clamp(1rem, 2.5vw, 1.75rem);
  padding: clamp(1.5rem, 4vw, 3rem) clamp(1.25rem, 5vw, 4rem);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

.fc3d__track::-webkit-scrollbar { display: none; }

/* ─── Card ────────────────────────────────────────── */
.fc3d__card {
  flex: 0 0 clamp(240px, 28vw, 320px);
  scroll-snap-align: center;
  text-decoration: none;
  color: var(--c-fg);
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
  outline: none;
}

/* 3-D scene container */
.fc3d__card-scene {
  perspective: 1100px;
  width: 100%;
  aspect-ratio: 3 / 4;
}

.fc3d__card-body {
  position: relative;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  border-radius: 16px;
  transition: transform 0.06s linear;
  cursor: pointer;
  will-change: transform;
  box-shadow:
    0 8px 32px rgba(0,0,0,0.55),
    0 0 0 1px var(--c-border);
}

/* ── Idle rocking animation ── */
.fc3d__card:not(:hover):not(:focus-visible) .fc3d__card-body {
  animation: fc3d-rock 5s ease-in-out infinite;
}

@keyframes fc3d-rock {
  0%, 100% { transform: rotateY(-8deg) rotateX(2deg); }
  50%       { transform: rotateY(8deg)  rotateX(-2deg); }
}

/* ── Hover: continuous spin ── */
.fc3d__card:hover .fc3d__card-body,
.fc3d__card:focus-visible .fc3d__card-body {
  animation: fc3d-spin 2.8s linear infinite;
}

@keyframes fc3d-spin {
  from { transform: rotateY(0deg); }
  to   { transform: rotateY(360deg); }
}

/* ── Faces ── */
.fc3d__card-front,
.fc3d__card-back {
  position: absolute;
  inset: 0;
  border-radius: 16px;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  overflow: hidden;
}

.fc3d__card-back {
  transform: rotateY(180deg);
  background: linear-gradient(145deg, var(--c-card-alt), var(--c-card));
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--c-accent);
  box-shadow: inset 0 0 40px var(--c-accent-gl);
}

.fc3d__card-back-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
  padding: 1.5rem;
  text-align: center;
}

.fc3d__card-back-label {
  font-size: 1.3rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--c-fg);
}

.fc3d__card-back-count {
  font-size: 0.78rem;
  color: var(--c-fg-dim);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.fc3d__card-back-cta {
  margin-top: 0.5rem;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--c-accent);
}

/* ── Front image ── */
.fc3d__card-img-wrap {
  position: relative;
  width: 100%;
  height: 100%;
  background: var(--c-card);
  overflow: hidden;
}

.fc3d__card-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.5s ease;
}

/* Glare overlay that moves on spin */
.fc3d__card-glare {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    135deg,
    rgba(255,255,255,0.12) 0%,
    transparent 50%,
    rgba(0,200,255,0.06) 100%
  );
  pointer-events: none;
  border-radius: inherit;
  animation: fc3d-glare 2.8s linear infinite;
  opacity: 0;
  transition: opacity 0.3s;
}

.fc3d__card:hover .fc3d__card-glare,
.fc3d__card:focus-visible .fc3d__card-glare { opacity: 1; }

@keyframes fc3d-glare {
  0%   { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

/* ── Jersey placeholder ── */
.fc3d__jersey {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border-radius: 16px;
}

.fc3d__jersey-bg {
  position: absolute;
  inset: 0;
  border-radius: inherit;
}

.fc3d__jersey-stripes {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  opacity: 0.06;
  background-image: repeating-linear-gradient(
    -45deg,
    currentColor 0px,
    currentColor 2px,
    transparent 2px,
    transparent 18px
  );
}

.fc3d__jersey-shape {
  position: absolute;
  width: 70%;
  max-width: 160px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -56%);
  filter: drop-shadow(0 8px 24px rgba(0,0,0,0.4));
}

.fc3d__jersey-number {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -44%);
  font-size: clamp(3.5rem, 10vw, 5.5rem);
  font-weight: 900;
  letter-spacing: -0.04em;
  line-height: 1;
  color: var(--fc-jersey-accent, var(--c-accent));
  text-shadow: 0 0 40px var(--fc-jersey-glow, rgba(0,200,255,0.4));
  pointer-events: none;
  mix-blend-mode: overlay;
}

.fc3d__jersey-label {
  position: absolute;
  bottom: 2rem;
  left: 50%;
  transform: translateX(-50%);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--c-fg);
  white-space: nowrap;
  padding: 0.4rem 1rem;
  border-radius: 999px;
  background: rgba(0,0,0,0.45);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255,255,255,0.1);
}

.fc3d__jersey-hint {
  position: absolute;
  top: 1rem;
  right: 1rem;
  font-size: 0.6rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--c-accent);
  opacity: 0.75;
  background: rgba(0,200,255,0.08);
  padding: 0.3rem 0.6rem;
  border-radius: 4px;
  border: 1px solid rgba(0,200,255,0.2);
}

/* League color themes */
.fc3d__jersey--blue-red {
  --fc-jersey-accent: #4fc3f7;
  --fc-jersey-glow: rgba(79,195,247,0.4);
  color: #4fc3f7;
  background: linear-gradient(135deg, #0a1628 0%, #1a1040 50%, #0d0a20 100%);
}
.fc3d__jersey--blue-red .fc3d__jersey-bg {
  background: radial-gradient(ellipse at 30% 20%, rgba(255,50,50,0.18) 0%, transparent 55%),
              radial-gradient(ellipse at 70% 80%, rgba(30,80,200,0.22) 0%, transparent 55%);
}

.fc3d__jersey--red-gold {
  --fc-jersey-accent: #ffd54f;
  --fc-jersey-glow: rgba(255,213,79,0.4);
  color: #ffd54f;
  background: linear-gradient(135deg, #1a0808 0%, #2d1010 50%, #100808 100%);
}
.fc3d__jersey--red-gold .fc3d__jersey-bg {
  background: radial-gradient(ellipse at 30% 20%, rgba(220,20,20,0.22) 0%, transparent 55%),
              radial-gradient(ellipse at 70% 80%, rgba(200,150,0,0.18) 0%, transparent 55%);
}

.fc3d__jersey--purple-white {
  --fc-jersey-accent: #ce93d8;
  --fc-jersey-glow: rgba(206,147,216,0.4);
  color: #ce93d8;
  background: linear-gradient(135deg, #120820 0%, #1e0d30 50%, #0d0818 100%);
}
.fc3d__jersey--purple-white .fc3d__jersey-bg {
  background: radial-gradient(ellipse at 30% 20%, rgba(130,0,180,0.22) 0%, transparent 55%),
              radial-gradient(ellipse at 70% 80%, rgba(255,255,255,0.06) 0%, transparent 55%);
}

.fc3d__jersey--sepia {
  --fc-jersey-accent: #d4a96a;
  --fc-jersey-glow: rgba(212,169,106,0.4);
  color: #d4a96a;
  background: linear-gradient(135deg, #120e06 0%, #1e1608 50%, #100c04 100%);
}
.fc3d__jersey--sepia .fc3d__jersey-bg {
  background: radial-gradient(ellipse at 30% 20%, rgba(180,120,30,0.2) 0%, transparent 55%),
              radial-gradient(ellipse at 70% 80%, rgba(100,80,30,0.15) 0%, transparent 55%);
}

/* Block placeholder (no image uploaded yet) */
.fc3d__jersey--block {
  --fc-jersey-accent: var(--c-accent);
  --fc-jersey-glow: rgba(0,200,255,0.3);
  color: var(--c-accent);
  background: linear-gradient(145deg, var(--c-card), var(--c-card-alt));
  border: 1px solid var(--c-border);
}

/* ── Card info below ── */
.fc3d__card-info {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0 0.25rem;
}

.fc3d__card-label {
  font-size: 0.9rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--c-fg);
  transition: color 0.2s;
}

.fc3d__card:hover .fc3d__card-label,
.fc3d__card:focus-visible .fc3d__card-label { color: var(--c-accent); }

.fc3d__card-count {
  font-size: 0.72rem;
  color: var(--c-fg-dim);
  letter-spacing: 0.08em;
  white-space: nowrap;
}

/* ─── Dots ────────────────────────────────────────── */
.fc3d__dots {
  display: flex;
  justify-content: center;
  gap: 0.5rem;
  margin-top: 1.5rem;
  padding: 0 1.25rem;
}

.fc3d__dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--c-border);
  transition: background 0.3s, transform 0.3s;
}

.fc3d__dot--active {
  background: var(--c-accent);
  transform: scale(1.5);
  box-shadow: 0 0 8px var(--c-accent-gl);
}

/* ─── Mobile ──────────────────────────────────────── */
@media (max-width: 749px) {
  .fc3d__card {
    flex: 0 0 75vw;
  }

  .fc3d__card:not(:hover):not(:focus-visible) .fc3d__card-body {
    animation: fc3d-rock 4s ease-in-out infinite;
  }
}

@media (max-width: 480px) {
  .fc3d__card { flex: 0 0 82vw; }
}
/* END_SECTION:football-categories-3d */

/* START_SECTION:footer (INDEX:7) */
/* ─────────────────────────────────────────────────────────
     Footer — PRESTIGE ONIX — 2026
     Fond #111, sans-serif, chevron rotatif, whitespace pur
     ───────────────────────────────────────────────────────── */

  /* ── Pilule « Suivre ma commande » ── */
  .onix-ft__trackwrap {
    display: grid;
    gap: 1rem;
    justify-items: center;
    margin-bottom: 0.5rem;
  }
  .onix-ft__trust {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.5rem 1.4rem;
    margin: 0;
    padding: 0;
    list-style: none;
  }
  .onix-ft__trust li {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    font-size: 0.78rem;
    color: rgba(255, 255, 255, 0.72);
  }
  .onix-ft__trust svg { width: 16px; height: 16px; color: #00c8ff; flex: 0 0 auto; }
  .onix-ft__social {
    display: flex;
    gap: 0.7rem;
  }
  .onix-ft__social a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 50%;
    color: rgba(255, 255, 255, 0.8);
    transition: border-color 0.15s ease, color 0.15s ease;
  }
  .onix-ft__social a:hover { border-color: #00c8ff; color: #00c8ff; }
  .onix-ft__social svg { width: 17px; height: 17px; }
  .onix-ft__track {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.55rem 1.2rem;
    border: 1px solid rgba(0, 200, 255, 0.55);
    border-radius: 999px;
    color: #7fe4ff;
    font-size: 0.76rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    text-decoration: none;
  }
  .onix-ft__track:hover { border-color: #00c8ff; color: #00c8ff; }
  .onix-ft__track-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #00c8ff;
    box-shadow: 0 0 8px rgba(0, 200, 255, 0.8);
  }

  /* grid-column: 1/-1 pour couvrir toute la largeur du .shopify-section parent
     et empêcher le fond blanc du critical.css de transparaître */
  .onix-ft {
    grid-column: 1 / -1;
    width: 100%;
    padding: clamp(3.5rem, 7vw, 5.5rem) 2rem clamp(2rem, 4vw, 3rem);
    background: #111111;
    color: rgba(255, 255, 255, 0.55);
  }

  .onix-ft__inner {
    width: min(100%, 72rem);
    margin: 0 auto;
    display: grid;
    gap: clamp(2.5rem, 5vw, 4rem);
  }

  /* ── Grille desktop ── */
  .onix-ft__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 2.5rem 3rem;
  }

  /* ── Colonnes ── */
  .onix-ft__col {
    display: block;
  }

  /* Summary — titre de colonne */

  .onix-ft__heading {
    list-style: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin: 0;
    padding: 1.1rem 0;
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #ffffff;
    cursor: pointer;
    user-select: none;
  }

  .onix-ft__heading::-webkit-details-marker { display: none; }
  .onix-ft__heading::marker { display: none; content: ''; }

  /* Chevron — visible partout (desktop + mobile) */
  .onix-ft__chevron {
    display: block;
    width: 0.65rem;
    height: 0.65rem;
    flex-shrink: 0;
    color: rgba(255, 255, 255, 0.4);
    transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
  }

  .onix-ft__col[open] .onix-ft__chevron {
    transform: rotate(180deg);
  }

  /* Zone dépliable — fermée par défaut, s'ouvre sur [open] */
  .onix-ft__expand {
    display: grid;
    grid-template-rows: 0fr;
    overflow: hidden;
    transition: grid-template-rows 0.3s cubic-bezier(0.22, 1, 0.36, 1);
  }

  .onix-ft__col[open] .onix-ft__expand {
    grid-template-rows: 1fr;
  }

  .onix-ft__expand > * {
    overflow: hidden;
    padding-bottom: 1.1rem;
  }

  /* Border between sections (accordéon look) */
  .onix-ft__col {
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  }
  .onix-ft__col:last-child {
    border-bottom: none;
  }

  /* ── Liens ── */
  .onix-ft__links {
    display: grid;
    gap: 0.65rem;
  }

  .onix-ft__links a {
    width: fit-content;
    color: rgba(255, 255, 255, 0.45);
    text-decoration: none;
    font-size: 0.78rem;
    line-height: 1.5;
    letter-spacing: 0.02em;
    transition: color 0.22s ease;
  }

  .onix-ft__links a:hover,
  .onix-ft__links a:focus-visible {
    color: #ffffff;
  }

  /* ── Texte libre ── */
  .onix-ft__text {
    max-width: 28rem;
    color: rgba(255, 255, 255, 0.45);
    font-size: 0.78rem;
    line-height: 1.75;
  }

  /* Focus visible — accessibilité clavier */
  .onix-ft__heading:focus-visible,
  .onix-ft__select:focus-visible {
    outline: 2px solid var(--c-accent, #00c8ff);
    outline-offset: 2px;
    border-radius: 2px;
  }

  /* ── Zone basse ── */
  .onix-ft__bottom {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1.2rem 2rem;
    padding-top: clamp(1.5rem, 3vw, 2.5rem);
    border-top: 1px solid rgba(255, 255, 255, 0.08);
  }

  /* Icônes de paiement */
  .onix-ft__payments {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.6rem;
    list-style: none;
    padding: 0;
    margin: 0;
  }

  .onix-ft__pay-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  .onix-ft__pay-svg {
    width: 2rem;
    height: auto;
    opacity: 1;
  }

  /* Meta — localisation + copyright */
  .onix-ft__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.6rem 1.5rem;
  }

  .onix-ft__locale-form {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
  }

  .onix-ft__select {
    padding: 0.4rem 0.6rem;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 4px;
    background: rgba(255, 255, 255, 0.04);
    color: rgba(255, 255, 255, 0.55);
    font-size: 0.72rem;
    font-family: inherit;
    cursor: pointer;
    transition: border-color 0.22s ease, color 0.22s ease;
  }

  .onix-ft__select:hover {
    border-color: rgba(255, 255, 255, 0.2);
    color: rgba(255, 255, 255, 0.8);
  }

  .onix-ft__copyright {
    margin: 0;
    font-size: 0.68rem;
    color: rgba(255, 255, 255, 0.3);
    letter-spacing: 0.02em;
  }

  /* Visually hidden — pour les labels accessibles */
  .onix-ft .visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }

  /* ═════════════════════════════════════════════════════════
     MOBILE — accordéons + colonne unique
     ═════════════════════════════════════════════════════════ */
  @media (max-width: 749px) {
    .onix-ft {
      /* un peu d air entre le haut du footer et les réassurances (validé 22/08,
         re-greffé 25/08 : perdu lors de la duplication « bande comparateur ») */
      padding: 2rem 1.25rem 0;
    }

    .onix-ft__inner {
      gap: 0;
    }

    .onix-ft__grid {
      grid-template-columns: 1fr;
      gap: 0;
    }

    /* Zone basse empilée */
    .onix-ft__bottom {
      flex-direction: column;
      align-items: center;
      text-align: center;
      padding-top: 0.75rem;
      padding-bottom: 1rem;
    }

    .onix-ft__payments {
      justify-content: center;
    }

    .onix-ft__meta {
      flex-direction: column;
      align-items: center;
    }

    .onix-ft__locale-form {
      flex-direction: column;
      align-items: center;
    }

    .onix-ft__select {
      min-width: 14rem;
      padding: 0.65rem 0.85rem;
    }
  }

  /* ═════════════════════════════════════════════════════════
     TABLETTE — 2 colonnes
     ═════════════════════════════════════════════════════════ */
  @media (min-width: 750px) and (max-width: 989px) {
    .onix-ft__grid {
      grid-template-columns: repeat(2, 1fr);
    }
  }

  /* Reduced motion — respect des préférences utilisateur */
  @media (prefers-reduced-motion: reduce) {
    .onix-ft__chevron,
    .onix-ft__expand,
    .onix-ft__links a,
    .onix-ft__pay-svg,
    .onix-ft__select {
      transition: none;
    }
  }
/* END_SECTION:footer */

/* START_SECTION:header (INDEX:8) */
/* Header = flex column : annonce en haut + nav en dessous.
     La grille 3 colonnes est sur .header__nav, plus sur le header directement. */
  .site-header {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 100;
    display: flex;
    flex-direction: column;
    background: rgba(0, 0, 0, 0.42);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    transition: background 0.3s ease, transform 0.3s ease, opacity 0.3s ease;
  }

  /* Barre de navigation — grille 3 colonnes (anciennement sur le header) */
  .header__nav {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: center;
    gap: 1.2rem;
    min-height: 2.6rem;
    padding: 0.35rem clamp(1.2rem, 3vw, 2.5rem);
  }

  .site-header.is-hidden {
    transform: translateY(-100%);
    opacity: 0;
    pointer-events: none;
  }

  .site-header.is-scrolled {
    position: fixed;
    background: rgba(0, 0, 0, 0.45);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
  }

  /* Quand le header est fixe au scroll, l'annonce disparaît — seule la nav reste */
  .site-header.is-scrolled .header-ann {
    display: none;
  }

  /* Pages hors homepage : sticky — zéro saut au scroll */
  .site-header--solid {
    position: sticky;
    top: 0;
    background: rgba(0, 0, 0, 0.85);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
  }

  .site-header--solid.is-scrolled {
    position: sticky;
  }

  .site-header a {
    text-decoration: none;
    color: #ffffff;
  }

  .site-header .header__title a {
    display: inline-flex;
    align-items: center;
    font-size: 1rem;
    font-weight: 500;
    letter-spacing: 0.36em;
    text-transform: uppercase;
    white-space: nowrap;
    line-height: 1;
  }

  .header__logo-img {
    display: block;
    height: 2.2rem;
    width: auto;
    object-fit: contain;
    filter: invert(1) brightness(2);
  }

  @media (min-width: 750px) {
    .header__logo-img {
      height: 2.6rem;
    }

    /* Sur desktop, on affiche UNIQUEMENT la variante --desktop du
       lien suivi (entre RECHERCHE et OFFRE). La variante --mobile
       (icône à droite avant le compte) est cachée pour éviter le
       doublon. */
    .header__track-link--mobile { display: none !important; }
    .header__track-link--desktop { display: inline-flex !important; }
  }

  .header__left,
  .header__right {
    display: flex;
    align-items: center;
    gap: 1.15rem;
    min-width: 0;
  }

  .header__left {
    justify-self: start;
  }

  .header__right {
    justify-self: end;
  }

  .header__title {
    display: flex;
    align-items: center;
    justify-content: center;
    justify-self: center;
    margin: 0;
  }

  .header__menu-trigger,
  .header__utility-link {
    display: inline-flex;
    align-items: center;
    gap: 0.58rem;
  }

  .header__utility-link,
  .header__utility-label {
    font-size: 0.68rem;
    font-weight: 400;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: #ffffff;
  }

  .header__utility-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
  }

  .header__utility-icon svg {
    width: 1rem;
    height: 1rem;
  }

  /* ── Offer CTA button with cyan light sweep ── */
  .header__offer-btn {
    position: relative;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.02rem;
    line-height: 1;
    padding: 0.2rem 0.8rem;
    border-radius: 999px;
    /* Glass cyan fluo (idem CTA "Suivre ma commande") */
    background: rgba(0, 200, 255, 0.08);
    border: 1.5px solid rgba(0, 200, 255, 0.85);
    color: #a5e9ff;
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    text-decoration: none;
    overflow: hidden;
    cursor: pointer;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    box-shadow:
      0 0 0 1px rgba(0, 200, 255, 0.2),
      0 0 18px rgba(0, 200, 255, 0.45),
      0 0 36px rgba(0, 200, 255, 0.25),
      inset 0 0 12px rgba(0, 200, 255, 0.12);
    transition: border-color 280ms ease, background 280ms ease, transform 280ms ease, box-shadow 280ms ease, color 280ms ease;
  }

  .header__offer-btn:hover {
    background: rgba(0, 200, 255, 0.18);
    color: #ffffff;
    transform: translateY(-1px);
    box-shadow:
      0 0 0 1px rgba(0, 200, 255, 0.35),
      0 0 28px rgba(0, 200, 255, 0.7),
      0 0 56px rgba(0, 200, 255, 0.4),
      inset 0 0 16px rgba(0, 200, 255, 0.2);
  }

  .header__offer-label {
    position: relative;
    z-index: 1;
    line-height: 1;
  }

  .header__offer-sub {
    position: relative;
    z-index: 1;
    margin-top: 0.07rem;
    /* Graisse et casse héritées du bouton (weight 800, uppercase), mais taille
       et interlettrage RÉDUITS : « DÉCOUVERTE » (10 signes) élargissait le
       bouton de 76 → 97px et le faisait chevaucher le logo sur mobile 390px.
       À 0.52rem/0.01em il retombe à 81px, soit la largeur d'origine à 5px près.
       Ne pas revenir à la taille héritée sans re-mesurer la marge au logo. */
    font-size: 0.52rem;
    letter-spacing: 0.01em;
    line-height: 1;
  }

  .header__offer-sweep {
    position: absolute;
    inset: 0;
    background: linear-gradient(
      105deg,
      transparent 30%,
      rgba(0, 200, 255, 0.35) 48%,
      rgba(0, 200, 255, 0.55) 50%,
      rgba(0, 200, 255, 0.35) 52%,
      transparent 70%
    );
    animation: header-offer-sweep 2.8s ease-in-out infinite;
  }

  @keyframes header-offer-sweep {
    0%   { transform: translateX(-120%); }
    45%  { transform: translateX(120%); }
    100% { transform: translateX(120%); }
  }

  /* Respect users who ask for reduced motion — stop the infinite
     sweep animation so it doesn't create constant visual distraction
     or trigger vestibular issues. */
  @media (prefers-reduced-motion: reduce) {
    .header__offer-sweep {
      animation: none;
    }
  }

  @media (max-width: 749px) {
    .header__offer-btn {
      padding: 0.18rem 0.62rem;
      font-size: 0.63rem;
      /* Onix 2026-05-13 v5 : retiré `margin-left: auto` qui collait
         OFFRE contre le logo central — l'espacement est désormais
         géré uniquement par le gap du flex parent (.header__left). */
    }
  }

  .header__cart-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.55rem;
    min-height: 2.6rem;
    margin-left: 0.12rem;
    padding: 0.52rem 0.4rem;
    border: none;
    background: transparent;
    color: #ffffff;
    cursor: pointer;
    transition: transform 220ms ease;
  }

  .header__cart-button:hover,
  .header__cart-button:focus-visible {
    background: rgba(255, 255, 255, 0.04);
    transform: translateY(-1px);
  }

  .header__cart-icon svg {
    width: 1.12rem;
    height: 1.12rem;
  }

  .header__cart-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.3rem;
    min-height: 1.3rem;
    padding: 0.12rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.9);
    color: #050505;
    font-size: 0.58rem;
    letter-spacing: 0;
  }

  .onix-burger-button {
    display: inline-flex;
    align-items: center;
    gap: 0.48rem;
    min-width: max(44px, 5.1rem);
    min-height: 44px;
    padding: 0.42rem 0.12rem 0.42rem 0;
    border: 0;
    background: transparent;
    cursor: pointer;
    pointer-events: auto;
    position: relative;
    z-index: 10;
    -webkit-tap-highlight-color: transparent;
    opacity: 0.94;
    transition: opacity 0.36s cubic-bezier(0.22, 1, 0.36, 1);
  }

  .onix-burger-button:hover,
  .onix-burger-button:focus-visible {
    opacity: 1;
  }

  .onix-burger-button__line {
    display: block;
    position: absolute;
    left: 50%;
    height: 2px;
    background: #ffffff;
    border-radius: 1.5px;
    transform-origin: center;
    transition:
      top 0.36s cubic-bezier(0.22, 1, 0.36, 1),
      width 0.36s cubic-bezier(0.22, 1, 0.36, 1),
      transform 0.36s cubic-bezier(0.22, 1, 0.36, 1),
      opacity 0.24s cubic-bezier(0.22, 1, 0.36, 1);
  }

  .onix-burger-button__icon {
    position: relative;
    width: 1.2rem;
    height: 1.2rem;
    flex: 0 0 1.2rem;
  }

  /* Burger 3 lignes (Onix 2026-05-13 v7 — Yacine, vrai final) :
     - 3 traits STRICTEMENT identiques (même width, même height)
     - espacement vertical MATHÉMATIQUEMENT uniforme : translateY(-50%)
       sur TOUTES les lignes pour que `top:` positionne le CENTRE de
       chaque trait (et non son bord supérieur). Sans ça, la ligne
       du milieu était décalée de 1px (= half height) vs les autres,
       cassant la symétrie visuelle.
     Géométrie : 3 lignes de 1.15rem × 2px, écart 0.34rem entre centres. */
  .onix-burger-button__line:nth-child(1) {
    top: calc(50% - 0.34rem);
    width: 1.15rem;
    transform: translateX(-50%) translateY(-50%) rotate(0deg);
    background: #ffffff;
  }
  .onix-burger-button__line:nth-child(2) {
    top: 50%;
    width: 1.15rem;
    transform: translateX(-50%) translateY(-50%) rotate(0deg);
    background: #ffffff;
  }
  .onix-burger-button__line:nth-child(3) {
    top: calc(50% + 0.34rem);
    width: 1.15rem;
    transform: translateX(-50%) translateY(-50%) rotate(0deg);
    background: #ffffff;
  }

  /* Open state : 1ère et 3ème lignes rotent en X, ligne du milieu fade.
     translateY(-50%) conservé pour que les rotations restent centrées. */
  body.is-menu-open .onix-burger-button__line:nth-child(1) {
    top: 50%;
    transform: translateX(-50%) translateY(-50%) rotate(45deg);
  }
  body.is-menu-open .onix-burger-button__line:nth-child(2) {
    opacity: 0;
    transform: translateX(-50%) translateY(-50%) scaleX(0);
  }
  body.is-menu-open .onix-burger-button__line:nth-child(3) {
    top: 50%;
    transform: translateX(-50%) translateY(-50%) rotate(-45deg);
  }

  .onix-burger-button__label-wrap {
    position: relative;
    display: inline-grid;
    align-items: center;
    min-width: 3.15rem;
    height: 1rem;
    overflow: hidden;
  }

  .onix-burger-button__label {
    grid-area: 1 / 1;
    font-size: 0.64rem;
    font-weight: 400;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: #ffffff;
    line-height: 1;
    transition:
      transform 0.36s cubic-bezier(0.22, 1, 0.36, 1),
      opacity 0.36s cubic-bezier(0.22, 1, 0.36, 1);
  }

  .onix-burger-button__label--menu {
    opacity: 1;
    transform: translateX(0);
  }

  .onix-burger-button__label--close {
    opacity: 0;
    transform: translateX(-0.12rem);
  }

  body.is-menu-open .onix-burger-button__label--menu {
    opacity: 0;
    transform: translateX(0.12rem);
  }

  body.is-menu-open .onix-burger-button__label--close {
    opacity: 1;
    transform: translateX(0);
  }

  .onix-mobile-drawer-shell {
    position: fixed;
    inset: 0;
    z-index: var(--z-mobile-drawer, 100000);
    pointer-events: none;
  }

  .onix-mobile-drawer-overlay {
    position: fixed;
    inset: 0;
    border: 0;
    background: rgba(0, 0, 0, 0.45);
    opacity: 0;
    visibility: hidden;
    transition:
      opacity 0.35s ease,
      visibility 0s linear 0.35s;
  }

  .onix-mobile-drawer {
    position: fixed;
    top: 0;
    left: 0;
    width: 84vw;
    max-width: 360px;
    height: 100dvh;
    display: flex;
    flex-direction: column;
    padding: 1.45rem 1.25rem 1.55rem;
    overflow: hidden;
    overscroll-behavior: contain;
    background: rgba(10, 10, 12, 0.62);
    /* Onix 2026-05-27 perf : blur 28px → 12px (cf. cart-drawer.css).
       Le panneau slide en transform ; 28px re-floute un grand
       rectangle à chaque frame. Fond opacifié 0.38→0.62 pour garder
       le même rendu frosted. */
    backdrop-filter: blur(12px) saturate(1.4);
    -webkit-backdrop-filter: blur(12px) saturate(1.4);
    border-right: 1px solid rgba(255, 255, 255, 0.08);
    z-index: 201;
    transform: translateX(-100%);
    transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
  }

  .onix-mobile-drawer__inner {
    display: flex;
    flex-direction: column;
    height: 100%;
  }

  .onix-mobile-drawer__top {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    padding-bottom: 24px;
  }

  .onix-mobile-drawer__header {
    display: flex;
    justify-content: flex-end;
    padding: 0 0.28rem 1.45rem;
  }

  .onix-mobile-drawer-close {
    width: 44px;
    height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0;
    background: transparent;
    color: #f4f1eb;
    cursor: pointer;
    position: relative;
    opacity: 0.9;
    transition: opacity 0.22s ease;
  }

  .onix-mobile-drawer-close:hover,
  .onix-mobile-drawer-close:focus-visible {
    opacity: 1;
  }

  .onix-mobile-drawer-close__line {
    position: absolute;
    width: 1.12rem;
    height: 1.5px;
    background: #f4f1eb;
  }

  .onix-mobile-drawer-close__line:first-child {
    transform: rotate(45deg);
  }

  .onix-mobile-drawer-close__line:last-child {
    transform: rotate(-45deg);
  }

  .onix-mobile-drawer__nav {
    display: grid;
    padding-top: 0.4rem;
    align-content: start;
  }

  .onix-mobile-drawer__link,
  .onix-mobile-drawer__summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 2.8rem;
    padding: 0.7rem 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    color: #f4f1eb;
    font-size: 0.95rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-decoration: none;
    text-transform: uppercase;
  }

  .onix-mobile-drawer__group {
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  }

  .onix-mobile-drawer__summary {
    cursor: pointer;
    list-style: none;
    border-bottom: 0;
  }

  .onix-mobile-drawer__summary::-webkit-details-marker {
    display: none;
  }

  .onix-mobile-drawer__plus {
    position: relative;
    width: 0.85rem;
    height: 0.85rem;
    flex-shrink: 0;
    opacity: 0.86;
  }

  .onix-mobile-drawer__plus::before,
  .onix-mobile-drawer__plus::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0.72rem;
    height: 1px;
    background: #ffffff;
    transform: translate(-50%, -50%);
    transition: transform 0.22s ease, opacity 0.22s ease;
  }

  .onix-mobile-drawer__plus::after {
    transform: translate(-50%, -50%) rotate(90deg);
  }

  .onix-mobile-drawer__group[open] .onix-mobile-drawer__plus::after {
    opacity: 0;
  }

  .onix-mobile-drawer__submenu {
    display: grid;
    gap: 0.85rem;
    padding: 0.3rem 0 1.35rem;
  }

  .onix-mobile-drawer__submenu a {
    color: rgba(244, 241, 235, 0.74);
    font-size: 0.84rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    line-height: 1.5;
    text-decoration: none;
  }

  /* Sous-dépliable « Autre » imbriqué dans le sous-menu Boutique.
     Indicateur +/− et repli dédiés (classe distincte) pour ne PAS être
     affectés par la règle .onix-mobile-drawer__group[open] du parent. */
  .onix-mobile-drawer__subsummary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
    list-style: none;
    color: rgba(244, 241, 235, 0.74);
    font-size: 0.84rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    line-height: 1.5;
  }

  .onix-mobile-drawer__subsummary::-webkit-details-marker {
    display: none;
  }

  .onix-mobile-drawer__subplus {
    position: relative;
    width: 0.8rem;
    height: 0.8rem;
    flex-shrink: 0;
    opacity: 0.7;
  }

  .onix-mobile-drawer__subplus::before,
  .onix-mobile-drawer__subplus::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0.66rem;
    height: 1px;
    background: #ffffff;
    transform: translate(-50%, -50%);
    transition: transform 0.22s ease, opacity 0.22s ease;
  }

  .onix-mobile-drawer__subplus::after {
    transform: translate(-50%, -50%) rotate(90deg);
  }

  .onix-mobile-drawer__subgroup[open] .onix-mobile-drawer__subplus::after {
    opacity: 0;
  }

  /* Repli explicite (indépendant du <details> natif — cf. gotcha Chrome
     ::details-content où le contenu ne se replie pas). */
  .onix-mobile-drawer__subsubmenu {
    display: none;
    gap: 0.85rem;
    padding: 0.85rem 0 0.1rem 0.9rem;
  }

  .onix-mobile-drawer__subgroup[open] .onix-mobile-drawer__subsubmenu {
    display: grid;
  }

  .onix-mobile-drawer__bottom {
    flex-shrink: 0;
    padding: 1rem 0 0;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
  }

  .onix-mobile-drawer__account-link {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    padding: 0.85rem 1rem;
    background: rgba(255, 255, 255, 0.08);
    border-radius: 0.75rem;
    border: 1px solid rgba(255, 255, 255, 0.06);
    color: #f4f1eb;
    font-size: 0.82rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    text-decoration: none;
    transition: background 180ms ease;
  }

  .onix-mobile-drawer__account-link:hover {
    background: rgba(255, 255, 255, 0.14);
  }

  .onix-mobile-drawer__account-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  .onix-mobile-drawer__account-icon svg {
    width: 1.2rem;
    height: 1.2rem;
  }

  body.is-menu-open .onix-burger-button {
    opacity: 0;
    pointer-events: none;
    visibility: hidden;
  }

  body.is-menu-open .onix-mobile-drawer-shell {
    pointer-events: auto;
  }

  body.is-menu-open .onix-mobile-drawer-overlay {
    opacity: 1;
    visibility: visible;
    transition:
      opacity 0.35s ease,
      visibility 0s linear 0s;
  }

  body.is-menu-open .onix-mobile-drawer {
    transform: translateX(0);
  }

  @media (max-width: 749px) {
    .onix-mobile-drawer__nav > *,
    .onix-mobile-drawer__bottom > * {
      opacity: 0;
      transform: translateY(10px);
      transition:
        opacity 0.38s cubic-bezier(0.22, 1, 0.36, 1),
        transform 0.38s cubic-bezier(0.22, 1, 0.36, 1);
      transition-delay: 0s;
    }

    body.is-menu-open .onix-mobile-drawer__nav > *,
    body.is-menu-open .onix-mobile-drawer__bottom > * {
      opacity: 1;
      transform: translateY(0);
    }

    body.is-menu-open .onix-mobile-drawer__nav > :nth-child(1) {
      transition-delay: 0.05s;
    }

    body.is-menu-open .onix-mobile-drawer__nav > :nth-child(2) {
      transition-delay: 0.10s;
    }

    body.is-menu-open .onix-mobile-drawer__nav > :nth-child(3) {
      transition-delay: 0.15s;
    }

    body.is-menu-open .onix-mobile-drawer__nav > :nth-child(4) {
      transition-delay: 0.20s;
    }

    body.is-menu-open .onix-mobile-drawer__bottom > * {
      transition-delay: 0.25s;
    }

    /* Mobile overrides */
    .header__nav {
      min-height: 2.8rem;
      grid-template-areas: 'left title right';
      gap: 0.65rem;
      padding: 0.45rem 1.1rem;
    }

    /* Solid : changer le fond au scroll */
    .site-header--solid.is-scrolled {
      background: rgba(0, 0, 0, 0.45);
    }

    .header__title {
      grid-area: title;
    }

    .site-header .header__title a {
      font-size: 0.86rem;
      letter-spacing: 0.24em;
    }

    /* Espacements proportionnels (Onix 2026-05-13 v3 — Yacine).
       Gap uniforme entre les icônes, et `justify-content` aligne
       les éléments au BURGER (gauche) ou au PANIER (droite) plutôt
       que d'étaler jusqu'au logo — résout le "OFFRE collé au logo"
       qu'on voyait avant. */
    .header__left {
      grid-area: left;
      gap: 0.7rem;
      justify-content: flex-start;
    }

    .header__right {
      grid-area: right;
      gap: 0.7rem;
      justify-content: flex-end;
    }

    .header__contact-link {
      display: none;
    }

    .header__search-link,
    .header__track-link,
    .header__account-link {
      width: 1.32rem;
      height: 1.32rem;
      justify-content: center;
      /* Onix 2026-05-13 : passé de 0.88 à 1 — Yacine veut le blanc
         pur sur tous les icônes utility, comme le compte et le panier. */
      opacity: 1;
      color: #fff;
    }

    /* Sur mobile, on affiche UNIQUEMENT la variante --mobile du lien
       suivi (icône à droite, à côté du compte). La variante --desktop
       placée entre RECHERCHE et OFFRE serait redondante et déséquilibrerait
       le header gauche. */
    .header__track-link--desktop { display: none !important; }

    .header__search-link .header__utility-label,
    .header__track-link .header__utility-label,
    .header__account-link .header__utility-label {
      display: none;
    }

    .header__search-link .header__utility-icon svg,
    .header__track-link .header__utility-icon svg,
    .header__account-link .header__utility-icon svg {
      width: 1.43rem;
      height: 1.43rem;
    }

    .header__menu-trigger {
      gap: 0;
    }

    /* Onix 2026-05-13 v4 — Yacine : le burger desktop a min-width 5.1rem
       (label "MENU" + icône).  Sur mobile, le label est caché donc on
       compacte le bouton à la largeur de son icône — sinon les ~80px
       inutiles mangent la colonne gauche et poussent OFFRE contre le logo.
       Onix 2026-05-14 — Yacine : rapproche l'icône recherche du burger
       (auparavant min-width 44px + padding 0.32rem créaient ~25px de vide
       entre les deux). */
    .onix-burger-button {
      min-width: 0;
      padding: 0.42rem 0.1rem;
    }

    .onix-burger-button__label-wrap {
      display: none;
    }

    .header__cart-label {
      display: none;
    }

    .header__cart-button {
      position: relative;
      min-height: auto;
      padding: 0.16rem;
      gap: 0;
      margin-left: 0;
      letter-spacing: 0.14em;
      font-size: 0.58rem;
      opacity: 0.82;
    }

    .header__cart-button:hover,
    .header__cart-button:focus-visible {
      background: transparent;
      opacity: 1;
      transform: none;
    }

    .header__cart-icon svg {
      width: 1.63rem;
      height: 1.63rem;
    }

    .header__cart-count {
      min-width: 0.98rem;
      min-height: 0.98rem;
      padding: 0.04rem;
      font-size: 0.48rem;
      position: absolute;
      top: -0.2rem;
      right: -0.18rem;
    }

    .onix-burger-button__icon {
      width: 1.4rem;
      height: 1.4rem;
      flex: 0 0 1.4rem;
    }

    .onix-burger-button__line {
      width: 1.24rem;
    }

    .onix-burger-button__label {
      font-size: 0.66rem;
      letter-spacing: 0.21em;
    }

    .header__cart-button.is-updated {
      animation: onixHeaderCartPulse 0.32s ease;
    }

    @keyframes onixHeaderCartPulse {
      0% {
        transform: scale(1);
        opacity: 0.82;
      }
      50% {
        transform: scale(1.06);
        opacity: 1;
      }
      100% {
        transform: scale(1);
        opacity: 0.82;
      }
    }
  }

  @media (min-width: 750px) {
    .site-header .header__title a {
      transform: translateX(0.09em);
      letter-spacing: 0.35em;
      font-size: 1.03rem;
    }

    .header__left {
      gap: 1.24rem;
    }

    .header__right {
      gap: 1.05rem;
    }

    .header__utility-link,
    .header__utility-label {
      font-size: 0.69rem;
      letter-spacing: 0.21em;
    }

    .header__account-link {
      justify-content: center;
      width: 1.5rem;
      height: 1.5rem;
      opacity: 0.88;
      transition: opacity 220ms ease;
    }

    .header__account-link:hover {
      opacity: 1;
    }

    .header__account-link svg {
      width: 1.14rem;
      height: 1.14rem;
    }

    .header__cart-button {
      min-height: 2.45rem;
    }

    .header__cart-icon svg {
      width: 1.14rem;
      height: 1.14rem;
    }

    .onix-burger-button__label {
      font-size: 0.67rem;
    }
  }

  /* ── Search Drawer ───────────────────────────────────── */
  /* LE TIROIR EST LE HEADER QUI S'OUVRE, PAS UNE CARTE POSÉE DESSUS — 15/08,
     « elle s'incruste pas bien dans l'apparence du site, elle fait trop par
     dessus ». C'était trois boîtes arrondies emboîtées (le tiroir, les équipes,
     les résultats) flottant au-dessus d'une page non assombrie : trois bords
     visibles là où le header n'en a aucun.
     ⚠️ Les valeurs ne sont pas choisies, elles sont RELEVÉES sur le site :
       · #070b14 est le fond sombre le plus utilisé de la page d'accueil ;
       · le filet bas est celui du header, rgba(255,255,255,0.06) ;
       · bord à bord et sans rayon, comme le header — lui n'a pas de coins. */
  .search-drawer {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 300;
    background: #070b14;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    padding: 0;
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.35);
    transform: translateY(-100%);
    transition: transform 280ms cubic-bezier(0.22, 1, 0.36, 1);
  }

  .search-drawer.is-open {
    transform: translateY(0);
    will-change: transform;
  }

  /* Plus de fond ni de bord ici : le panneau porte tout, l'intérieur ne fait que
     centrer sur la même largeur que le reste du site.
     Onix 2026-05-27 perf : backdrop-filter retiré — le fond est opaque, le
     blur(20px) derrière était invisible et coûtait un repaint GPU par frame. */
  .search-drawer__inner {
    width: min(100%, 52rem);
    margin: 0 auto;
    display: grid;
    gap: 0.85rem;
    padding: 0.9rem clamp(1rem, 4vw, 2.5rem) 1.1rem;
  }

  .search-drawer__field {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    min-height: 52px;
    padding: 0 1.1rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.06);
    border: 1.5px solid rgba(255, 255, 255, 0.1);
    transition: border-color 200ms ease, background 200ms ease;
  }

  .search-drawer__field:focus-within {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(0, 200, 255, 0.4);
  }

  .search-drawer__icon {
    display: inline-flex;
    flex-shrink: 0;
    color: rgba(255, 255, 255, 0.4);
  }

  .search-drawer__icon svg {
    width: 1rem;
    height: 1rem;
  }

  .search-drawer__field input {
    flex: 1;
    height: 52px;
    border: none;
    background: transparent;
    padding: 0;
    font-size: 0.95rem;
    color: #ffffff;
    outline: none;
  }

  .search-drawer__field input::placeholder {
    color: rgba(255, 255, 255, 0.35);
  }

  .search-drawer__close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    border: none;
    background: transparent;
    color: rgba(255, 255, 255, 0.5);
    cursor: pointer;
    padding: 0;
    border-radius: 50%;
    transition: background 150ms ease;
  }

  .search-drawer__close:hover,
  .search-drawer__close:active,
  .search-drawer__close:focus-visible {
    background: rgba(0, 200, 255, 0.1);
    color: #00c8ff;
  }

  .search-drawer__close svg {
    width: 1rem;
    height: 1rem;
  }

  /* Label au-dessus des résultats */
  .search-drawer__label {
    margin: 0;
    padding: 0 0 0.55rem;
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: #00c8ff;
  }

  /* Résultats — plus de carte : un simple filet les sépare du champ, comme le
     header sépare ses rangées. */
  .search-drawer__results {
    border-top: 1px solid rgba(255, 255, 255, 0.07);
    padding-top: 0.85rem;
  }

  /* TROIS VIGNETTES PAR RANGÉE, au lieu de six lignes horizontales. Un maillot
     se reconnaît à sa PHOTO ; la ligne horizontale laissait 205 px au titre pour
     des titres qui en demandaient jusqu'à 596 — 6 titres sur 6 étaient tronqués
     (mesuré le 15/08 à 375 px). Six vignettes tiennent dans ~280 px là où six
     lignes en prenaient 450. */
  .search-drawer__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.55rem;
  }

  .search-drawer__item a {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    text-decoration: none;
    color: #ffffff;
    transition: opacity 130ms ease;
  }

  .search-drawer__item a:hover {
    opacity: 0.75;
  }

  .search-drawer__img {
    width: 100%;
    aspect-ratio: 1 / 1;
    border-radius: 0.5rem;
    overflow: hidden;
    background: #1e1e1e;
  }

  .search-drawer__img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  /* LE TITRE SUR DEUX LIGNES — équipe puis modèle. Le découpage vient du snippet
     onix-card-title (window.onixSplitTitle) : c'est EXACTEMENT celui des cartes
     produit, y compris le repli en sigle quand « Paris Saint-Germain » déborde.
     ⚠️ La ligne 1 doit rester `nowrap` + `overflow:hidden` : c'est la comparaison
       scrollWidth/clientWidth qui déclenche le sigle. En `white-space: normal`
       le nom passerait à la ligne et le sigle ne sortirait jamais. */
  .search-drawer__name {
    display: flex;
    flex-direction: column;
    gap: 0.05rem;
    min-width: 0;
    font-size: 0.7rem;
    line-height: 1.25;
  }

  .search-drawer__name-line {
    font-weight: 700;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  /* TROIS lignes, pas deux : à 88 px de large, « Domicile Édition LDC 2026 » en
     demande trois et c'est l'ANNÉE qui saute en dernier — le mot qui distingue
     deux maillots de la même équipe. */
  .search-drawer__name-line--2 {
    font-weight: 400;
    color: rgba(255, 255, 255, 0.55);
    white-space: normal;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  /* CHERCHER PAR ÉQUIPE — voir le commentaire de header-search-drawer.liquid
     pour d'où vient la liste. */
  .search-drawer__pills {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    padding: 0 0 0.15rem;
  }

  .search-drawer__pill {
    display: inline-flex;
    align-items: center;
    gap: 0.42rem;
    padding: 0.3rem 0.72rem 0.3rem 0.32rem;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.16);
    background: rgba(255, 255, 255, 0.04);
    color: #ffffff;
    text-decoration: none;
    font-size: 0.78rem;
    font-weight: 600;
    white-space: nowrap;
    transition: background 130ms ease, border-color 130ms ease;
  }

  /* La photo produit est sur fond clair (#e6e4e0) : posée telle quelle sur un
     panneau noir elle ferait une tache. Le rond blanc l'assume au lieu de la
     subir, et c'est ce qui la fait lire comme un écusson. */
  .search-drawer__pill-img {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    object-fit: cover;
    background: #ffffff;
    flex-shrink: 0;
  }

  .search-drawer__pill:hover,
  .search-drawer__pill:focus-visible {
    background: rgba(0, 200, 255, 0.12);
    border-color: rgba(0, 200, 255, 0.45);
  }

  .search-drawer__teams {
    border-top: 1px solid rgba(255, 255, 255, 0.07);
    padding-top: 0.85rem;
  }

  /* ⚠️ `hidden` NE SUFFIT PAS quand une règle pose `display` sur la classe : la
     feuille du navigateur perd. Le piège a coûté deux allers-retours le 15/08
     sur la page de recherche — on le ferme ici d'avance. */
  .search-drawer__teams[hidden],
  .search-drawer__results[hidden],
  .search-drawer__pills[hidden] {
    display: none !important;
  }

  .search-drawer__no-result {
    padding: 1rem;
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.45);
    text-align: center;
  }

  .search-drawer__see-all {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    margin-top: 0.85rem;
    padding: 0.8rem 1rem 0.2rem;
    /* Une requête longue passe le libellé sur deux lignes : sans ça elles se
       collent à gauche pendant que la flèche reste à droite. */
    text-align: center;
    border-top: 1px solid rgba(255, 255, 255, 0.07);
    font-size: 0.74rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #00c8ff;
    text-decoration: none;
    transition: background 130ms ease;
  }

  .search-drawer__see-all:hover {
    background: rgba(0, 200, 255, 0.06);
  }

  .search-drawer__see-all svg {
    width: 0.85rem;
    height: 0.85rem;
  }

  /* L'OVERLAY ASSOMBRIT VRAIMENT. Il était transparent : la page restait à pleine
     luminosité juste à côté du panneau, et c'est ça qui faisait « posé dessus »
     plutôt que « le site en retrait pendant qu'on cherche ». */
  /* ⚠️ NI `display`, NI `animation` ICI — visibilité + opacité.
     · avec `display: none → block`, l'opacité ne peut pas transitionner : il n'y
       a pas d'état de départ, l'overlay apparaît d'un coup ;
     · avec `animation ... forwards`, tout dépend d'une frame. Une animation qui
       ne démarre pas (onglet en arrière-plan) laisse l'overlay à son image 0 %,
       donc INVISIBLE — et une animation en cours bat toute déclaration normale,
       même un `opacity: 1` écrit juste à côté. Mesuré ici : opacité calculée à 0
       alors que la règle disait 1.
     `visibility` garde l'élément dans la mise en page, donc l'opacité transitionne
     vraiment, et le fondu n'est plus qu'un bonus : sans lui, l'overlay est là. */
  .search-drawer__overlay {
    position: fixed;
    inset: 0;
    z-index: 299;
    background: rgba(4, 6, 12, 0.55);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 280ms ease, visibility 0s linear 280ms;
  }

  .search-drawer__overlay.is-visible {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transition: opacity 280ms ease, visibility 0s;
  }

  @media (prefers-reduced-motion: reduce) {
    .search-drawer { transition: none; }
    .search-drawer__overlay { transition: none; }
  }

  /* `search-overlay-in` a été retirée : l'overlay fond par `transition`, pas par
     animation — voir le commentaire de `.search-drawer__overlay`. */

  /* Bouton recherche dans le header : reset des styles natifs */
  button.header__search-link {
    appearance: none;
    -webkit-appearance: none;
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 0;
    font: inherit;
  }

  /* ── Annonce — texte au-dessus de la nav, fond transparent (même fond que le header) ── */
  .header-ann {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 0.25rem 1.25rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    font-weight: 500;
    line-height: 1.4;
    color: #ffffff;
    /* Taille pilotée par le réglage (var) → permet de la réduire sur mobile. */
    font-size: var(--ann-fs, 0.7rem);
    /* iOS Safari gonfle ("boost") le texte multi-lignes des conteneurs larges
       → l'annonce paraissait ÉNORME sur mobile. On force la taille réelle. */
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    /* Lignes équilibrées (pas une longue + une courte) quand ça wrappe sur mobile. */
    text-wrap: balance;
  }

  /* Le drapeau : dessiné, pas un émoji. Il suit la taille du texte. */
  .header-ann__fr {
    /* ⚠️ `inline-block` OBLIGATOIRE. Le thème pose `display: block` sur les
       `svg` (réinitialisation classique) : sans cette ligne, le drapeau prend
       SA PROPRE LIGNE au-dessus du titre et se colle au bord gauche, au lieu
       de couler avec les mots. Mesuré : drapeau à x=12, texte à x=132. */
    display: inline-block;
    width: 1.25em;
    height: 0.83em;
    border-radius: 1px;
    vertical-align: -0.08em;
    margin-left: 0.4em;      /* à DROITE du titre — sa demande du 20/08 */
    flex-shrink: 0;
  }

  /* ═══ LES COUPURES DE LIGNE ═════════════════════════════════════════════
     Un segment est une idée : « Paiement 4× Klarna disponible » ne se coupe
     pas en deux. On rend donc chaque segment insécable et on laisse la
     coupure tomber sur les séparateurs, qui eux peuvent passer à la ligne. */
  .header-ann__seg { white-space: nowrap; }

  /* ═══ L'OFFRE QUI ALTERNE ═══════════════════════════════════════════════
     Les deux variantes occupent LA MÊME cellule de grille : la largeur est
     celle de la plus longue, donc rien ne bouge autour au moment de la
     bascule. Elles se croisent en fondu, décalées d'une demi-période. */
  .header-ann__alt {
    display: inline-grid;
    vertical-align: baseline;
  }
  .header-ann__alt > span {
    grid-area: 1 / 1;
    animation: annEchange 9s ease-in-out infinite;
  }
  /* ⚠️ DÉLAI NÉGATIF, ET C'EST TOUT LE POINT. Avec un délai POSITIF, le second
     texte garde son opacité normale — 1 — pendant toute la temporisation :
     les deux offres se SUPERPOSENT pendant les 4,5 premières secondes de
     chaque chargement de page. Un délai négatif démarre l'animation déjà
     engagée à la moitié de son cycle, donc à opacité 0. */
  .header-ann__alt > span:nth-child(2) { animation-delay: -4.5s; }
  @keyframes annEchange {
    0%, 44%   { opacity: 1; }
    50%, 94%  { opacity: 0; }
    100%      { opacity: 1; }
  }
  /* ⚠️ Une annonce qui clignote sans qu'on l'ait demandé est un motif de gêne
     documenté : à mouvement réduit, on n'affiche que la première offre. */
  @media (prefers-reduced-motion: reduce) {
    .header-ann__alt > span { animation: none; }
    .header-ann__alt > span:nth-child(2) { opacity: 0; }
  }

  .header-ann__text {
    margin: 0;
    text-wrap: balance;
  }

  /* Split-flap (tableau des departs) — chaque lettre bascule comme un panneau d'aeroport. */
  .header-ann__flap {
    display: inline-flex;
    flex-wrap: nowrap;
    justify-content: center;
    gap: 1px;
    font-size: clamp(0.75rem, 3.1vw, 0.95rem);
    letter-spacing: 0;
    line-height: 1;
    max-width: 100%;
    overflow: hidden;
    font-family: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
  }
  .header-ann__flap .fc {
    display: inline-block;
    background: rgba(255, 255, 255, 0.06);
    color: #00c8ff;
    padding: 2px 0;
    min-width: 0.66em;
    text-align: center;
    border-radius: 2px;
    transform-origin: center 45%;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
  }
  .header-ann__flap .fc.sp { background: transparent; min-width: 0.32em; }
  .header-ann__flap .fc.flip { animation: annFlap 0.34s ease; }
  @keyframes annFlap {
    0% { transform: rotateX(0); }
    45% { transform: rotateX(-90deg); }
    55% { transform: rotateX(90deg); }
    100% { transform: rotateX(0); }
  }
  .header-ann__sr {
    position: absolute; width: 1px; height: 1px; padding: 0;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
  }
  @media (prefers-reduced-motion: reduce) {
    .header-ann__flap .fc.flip { animation: none; }
  }

  .header-ann__link {
    transition: opacity 0.22s ease;
  }

  .header-ann__link:hover,
  .header-ann__link:focus-visible {
    opacity: 0.75;
  }

  @media (max-width: 749px) {
    .header-ann {
      /* Plus lisible + compact : police légèrement réduite (× 0.9, en respectant
         le réglage), moins d'interlettrage (l'uppercase à 0.08em sur petit texte
         fatigue et force des retours), interligne resserré, marges latérales
         réduites pour gagner de la largeur. */
      font-size: calc(var(--ann-fs, 0.7rem) * 0.9);
      padding: 0.5rem 0.75rem;
      letter-spacing: 0.035em;
      line-height: 1.3;
      word-spacing: 0.05em;
    }
  }

  /* ══════════════════════════════════════
     OFFER POPUP — v2026-04-14-r5
     ══════════════════════════════════════ */
  .onix-offer {
    position: fixed;
    inset: 0;
    z-index: 9998;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 1rem;
  }
  @media (max-width: 749px) {
    .onix-offer {
      align-items: flex-end;
      padding: 0.75rem;
    }
  }
  .onix-offer.is-open {
    display: flex;
  }
  .onix-offer.is-closing .onix-offer__panel {
    animation: onix-offer-exit 0.22s ease both;
  }
  .onix-offer.is-closing .onix-offer__backdrop {
    animation: onix-offer-fade-out 0.22s ease both;
  }
  @media (max-width: 749px) {
    .onix-offer .onix-offer__panel {
      animation: onix-offer-slide-in 0.32s cubic-bezier(0.22, 1, 0.36, 1) both;
    }
    .onix-offer.is-closing .onix-offer__panel {
      animation: onix-offer-slide-out 0.24s ease both;
    }
  }
  @keyframes onix-offer-slide-in {
    from { opacity: 0; transform: translateY(100%); }
    to   { opacity: 1; transform: none; }
  }
  @keyframes onix-offer-slide-out {
    from { opacity: 1; transform: none; }
    to   { opacity: 0; transform: translateY(100%); }
  }

  .onix-offer__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    z-index: 0;
    animation: onix-offer-fade-in 0.25s ease both;
  }

  .onix-offer__panel {
    position: relative;
    z-index: 1;
    width: min(96vw, 38rem);
    max-height: 92vh;
    display: flex;
    flex-direction: column;
    background: #111;
    border-radius: 1.25rem;
    padding: 1.75rem 1.5rem 1.25rem;
    color: #fff;
    overflow: hidden;
    animation: onix-offer-enter 0.3s cubic-bezier(0.22, 1, 0.36, 1) both;
  }
  @media (max-width: 749px) {
    .onix-offer__panel {
      width: 100%;
      max-width: 100%;
      max-height: 90vh;
      border-radius: 1.25rem;
      padding: 0.85rem 1rem calc(1rem + env(safe-area-inset-bottom, 0px));
      margin-bottom: env(safe-area-inset-bottom, 0px);
    }
  }

  @keyframes onix-offer-enter {
    from { opacity: 0; transform: scale(0.95) translateY(12px); }
    to   { opacity: 1; transform: none; }
  }
  @keyframes onix-offer-exit {
    from { opacity: 1; transform: none; }
    to   { opacity: 0; transform: scale(0.95) translateY(12px); }
  }
  @keyframes onix-offer-fade-in { from { opacity: 0; } to { opacity: 1; } }
  @keyframes onix-offer-fade-out { from { opacity: 1; } to { opacity: 0; } }

  .onix-offer__handle {
    display: block;
    width: 2.4rem;
    height: 0.28rem;
    border-radius: 999px;
    background: rgba(255,255,255,0.25);
    margin: 0 auto 0.85rem;
    flex-shrink: 0;
  }

  .onix-offer__close {
    position: absolute;
    top: 1rem;
    right: 1rem;
    width: 2.2rem;
    height: 2.2rem;
    border: none;
    border-radius: 50%;
    background: rgba(255,255,255,0.1);
    color: rgba(255,255,255,0.6);
    font-size: 1rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
    transition: background 180ms, color 180ms;
  }
  .onix-offer__close:hover { background: rgba(255,255,255,0.2); color: #fff; }

  .onix-offer__title {
    margin: 0;
    font-size: 1.5rem;
    font-weight: 800;
    text-align: center;
    letter-spacing: -0.01em;
  }

  .onix-offer__subtitle {
    margin: 0.35rem 0 0;
    font-size: 0.88rem;
    text-align: center;
    color: rgba(255,255,255,0.7);
  }

  .onix-offer__price-tag {
    color: #00c8ff;
    font-weight: 800;
  }

  .onix-offer__tiers {
    display: flex;
    gap: 0.5rem;
    margin: 1rem 0 0.2rem;
  }
  .onix-offer__tier {
    flex: 1;
    padding: 0.7rem 0.5rem;
    border: 1.5px solid rgba(255,255,255,0.18);
    border-radius: 0.6rem;
    background: transparent;
    color: #fff;
    font-size: 0.82rem;
    font-weight: 800;
    cursor: pointer;
    transition: all 180ms ease;
  }
  .onix-offer__tier:hover { border-color: rgba(255,255,255,0.4); }
  .onix-offer__tier.is-active {
    border-color: #00c8ff;
    background: rgba(0,200,255,0.12);
    color: #00c8ff;
  }

  .onix-offer__size-label {
    margin: 1.1rem 0 0.4rem;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    text-align: center;
    color: rgba(255,255,255,0.55);
  }

  .onix-offer__sizes {
    display: flex;
    justify-content: center;
    gap: 0.4rem;
    flex-wrap: wrap;
  }

  .onix-offer__size {
    min-width: 2.6rem;
    height: 2.4rem;
    padding: 0 0.7rem;
    border: 1.5px solid rgba(255,255,255,0.18);
    border-radius: 0.5rem;
    background: transparent;
    color: #fff;
    font-size: 0.78rem;
    font-weight: 700;
    cursor: pointer;
    transition: all 180ms ease;
  }
  .onix-offer__size.is-active {
    background: #111;
    border-color: #fff;
  }
  .onix-offer__size:hover:not(.is-active) {
    border-color: rgba(255,255,255,0.4);
  }

  .onix-offer__counter {
    margin: 0.9rem 0 0.5rem;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    text-align: center;
    color: rgba(255,255,255,0.5);
  }

  .onix-offer__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-auto-rows: max-content;
    gap: 0.6rem;
    overflow-y: auto;
    max-height: 60vh;
    padding: 0.25rem 0 0.5rem;
    scrollbar-width: thin;
    scrollbar-color: rgba(255,255,255,0.1) transparent;
  }
  @media (max-width: 749px) {
    .onix-offer__grid {
      flex: 1 1 auto;
      min-height: 0;
      overflow-y: auto;
      gap: 0.5rem;
    }
  }

  .onix-offer__card {
    position: relative;
    border-radius: 0.75rem;
    overflow: hidden;
    cursor: pointer;
    border: 2px solid transparent;
    transition: border-color 200ms ease, transform 200ms ease;
    background: rgba(255,255,255,0.04);
  }
  .onix-offer__card:hover {
    transform: translateY(-2px);
  }
  .onix-offer__card.is-selected {
    border-color: #00c8ff;
  }

  .onix-offer__card-check {
    position: absolute;
    top: 0.4rem;
    right: 0.4rem;
    z-index: 2;
    opacity: 0;
    transform: scale(0.6);
    transition: opacity 200ms ease, transform 200ms ease;
  }
  .onix-offer__card.is-selected .onix-offer__card-check {
    opacity: 1;
    transform: scale(1);
  }

  /* Unselected = circle outline */
  .onix-offer__card:not(.is-selected) .onix-offer__card-check svg circle { fill: none; stroke: rgba(255,255,255,0.25); stroke-width: 1.5; }
  .onix-offer__card:not(.is-selected) .onix-offer__card-check svg path { display: none; }
  .onix-offer__card:not(.is-selected) .onix-offer__card-check { opacity: 1; transform: scale(1); }

  .onix-offer__card-img {
    position: relative;
    width: 100%;
    padding-top: 128.2%;
    overflow: hidden;
    background: rgba(255,255,255,0.06);
  }

  .onix-offer__img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }

  .onix-offer__card-info {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 2rem 0.55rem 0.5rem;
    background: linear-gradient(to top, rgba(0,0,0,0.85) 0%, transparent 100%);
    display: grid;
    gap: 0.05rem;
  }

  .onix-offer__card-title {
    font-size: 0.72rem;
    font-weight: 800;
    color: #fff;
    line-height: 1.2;
  }

  .onix-offer__submit {
    margin-top: 0.75rem;
    width: 100%;
    padding: 1rem;
    border: none;
    border-radius: 0.85rem;
    background: #111;
    color: #fff;
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    cursor: pointer;
    transition: background 200ms ease, opacity 200ms ease, transform 200ms ease;
    flex-shrink: 0;
  }
  .onix-offer__submit:not(:disabled) {
    background: #111;
    border: 1.5px solid rgba(255,255,255,0.15);
  }
  .onix-offer__submit:not(:disabled):hover {
    background: rgba(255,255,255,0.08);
    transform: translateY(-1px);
  }
  .onix-offer__submit:disabled {
    opacity: 0.35;
    cursor: not-allowed;
  }

  /* Toast notification */
  .onix-offer__toast {
    position: absolute;
    bottom: 4.5rem;
    left: 50%;
    transform: translateX(-50%) translateY(0.5rem);
    background: #e74c3c;
    color: #fff;
    font-size: 0.72rem;
    font-weight: 600;
    padding: 0.5rem 1rem;
    border-radius: 0.5rem;
    opacity: 0;
    pointer-events: none;
    transition: opacity 200ms ease, transform 200ms ease;
    z-index: 3;
    white-space: nowrap;
  }
  .onix-offer__toast.is-visible {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
  }

  /* Out-of-stock card */
  .onix-offer__card.is-unavailable {
    opacity: 0.35;
    pointer-events: none;
  }
  .onix-offer__card.is-unavailable .onix-offer__card-check {
    display: none;
  }
/* END_SECTION:header */

/* START_SECTION:onix-discount-bar (INDEX:9) */
.onix-bar {
    position: fixed;
    /* Glué en bas + dégagé du home indicator iOS. PAS de transform de centrage :
       un position:fixed AVEC transform se rattache au viewport de mise en page
       sur iOS et "remonte" au repli de la barre d'URL → on centre via
       left/right:0 + margin auto (le transform ne sert plus qu'au masquage). */
    /* Plus d'empilement avec le bandeau cookies : quand il est levé, cette
       barre est masquée (classe `onix-cookies-a-repondre`, 24/08). */
    bottom: calc(10px + env(safe-area-inset-bottom));
    left: 0;
    right: 0;
    margin-inline: auto;
    width: calc(100% - 2rem);
    max-width: 520px;
    z-index: 998;
    font-family: inherit;
    /* ⚠️ JAMAIS de transform sur cette barre (même pour la masquer) : un
       position:fixed avec transform actif se rattache au LAYOUT viewport
       sur iOS → la barre « remonte » jusqu'au milieu de l'écran au repli
       de la barre d'URL (bug récurrent, réglé définitivement 2026-07-09).
       Masquage = opacity/visibility + margin-bottom (léger slide). */
    transition: opacity 0.25s ease, visibility 0.25s ease, margin-bottom 0.3s cubic-bezier(0.22, 1, 0.36, 1);
  }
  /* is-hidden = masquée (cart drawer ouvert) ; is-hidden-scroll = masquée à
     l'ouverture de l'accueil avant scroll ; is-hidden-kbd = clavier mobile
     ouvert (le viewport réduit collerait la barre au-dessus du clavier, en
     plein milieu de l'écran). Classes séparées pour ne pas se marcher dessus. */
  .onix-bar.is-hidden,
  .onix-bar.is-hidden-scroll,
  .onix-bar.is-hidden-kbd {
    opacity: 0;
    visibility: hidden;
    margin-bottom: -14px;
    pointer-events: none;
  }
  /* Anti-flash accueil : masquée dès le 1er paint (avant que le JS prenne le
     relais au scroll). Le JS pose data-bar-ready pour rendre la main à la classe. */
  .onix-bar[data-home-scroll="1"]:not([data-bar-ready]) {
    opacity: 0;
    visibility: hidden;
    margin-bottom: -14px;
    pointer-events: none;
  }

  /* ── Collapsed ── */
  .onix-bar__collapsed {
    position: relative;
    background: rgba(30, 32, 36, 0.94);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 14px;
    padding: 10px 14px;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
  }

  .onix-bar__summary {
    margin: 0;
    font-size: 0.76rem;
    font-weight: 600;
    color: #fff;
    text-align: center;
  }

  .onix-bar__accent { color: var(--c-accent, #00c8ff); font-weight: 800; }

  .onix-bar__arrow {
    display: inline;
    color: rgba(255, 255, 255, 0.4);
    font-size: 0.55rem;
    margin-left: 0.4rem;
    vertical-align: middle;
  }

  /* ── Track ── */
  .onix-bar__track {
    position: relative;
    width: 100%;
    max-width: 30rem;
    height: 5px;
    background: rgba(255, 255, 255, 0.08);
    border-radius: 999px;
    overflow: visible;
  }

  .onix-bar__fill {
    position: absolute;
    top: 0; left: 0;
    height: 100%;
    background: linear-gradient(90deg, #22c55e, #00e5a0);
    border-radius: 999px;
    transition: width 0.6s cubic-bezier(0.22, 1, 0.36, 1);
    box-shadow: 0 0 8px rgba(34, 197, 94, 0.4);
  }

  .onix-bar__dot {
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
    font-size: 0.9rem;
    filter: grayscale(1) brightness(0.4);
    transition: filter 0.3s ease, transform 0.3s ease;
    line-height: 1;
  }
  .onix-bar__dot:nth-child(2) { left: 20%; }
  .onix-bar__dot:nth-child(3) { left: 40%; }
  .onix-bar__dot:nth-child(4) { left: 60%; }
  .onix-bar__dot:nth-child(5) { left: 80%; }
  .onix-bar__dot:nth-child(6) { left: 100%; }

  .onix-bar__dot.is-reached {
    filter: none;
    transform: translate(-50%, -50%) scale(1.3);
  }

  /* ── Expanded ── */
  .onix-bar__expanded {
    background: rgba(30, 32, 36, 0.96);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 14px;
    padding: 10px 14px 12px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    cursor: pointer;
  }
  .onix-bar__expanded[hidden] { display: none; }

  .onix-bar__message {
    font-size: 0.76rem;
    font-weight: 600;
    color: #fff;
    text-align: center;
  }

  .onix-bar__message .onix-bar__code-pill {
    display: inline-block;
    background: rgba(0, 200, 255, 0.12);
    border: 1px solid rgba(0, 200, 255, 0.25);
    color: var(--c-accent, #00c8ff);
    font-weight: 800;
    font-size: 0.68rem;
    padding: 0.12rem 0.45rem;
    border-radius: 0.3rem;
    letter-spacing: 0.06em;
    margin: 0 0.2rem;
    cursor: pointer;
  }

  .onix-bar__track--exp { max-width: 30rem; margin: 0 auto; }

  /* ── Tier cards ── */
  .onix-bar__tiers {
    display: flex;
    gap: 0.4rem;
    width: 100%;
    max-width: 34rem;
    justify-content: center;
  }

  .onix-bar__tier {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.1rem;
    padding: 0.55rem 0.3rem;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: 0.65rem;
    transition: border-color 0.3s ease, background 0.3s ease;
  }

  .onix-bar__tier.is-active {
    border-color: var(--c-accent, #00c8ff);
    background: rgba(0, 200, 255, 0.05);
  }

  .onix-bar__tier-qty { font-size: 1.3rem; font-weight: 800; color: #fff; line-height: 1; }
  .onix-bar__tier-unit { font-size: 0.48rem; font-weight: 700; letter-spacing: 0.12em; color: rgba(255, 255, 255, 0.45); }
  .onix-bar__tier-label { font-size: 0.78rem; font-weight: 800; color: var(--c-accent, #00c8ff); }
  .onix-bar__tier-code { font-size: 0.5rem; font-weight: 600; color: rgba(255, 255, 255, 0.3); letter-spacing: 0.04em; text-align: center; word-break: break-all; }

  /* ── Mobile ── */
  @media (max-width: 749px) {
    .onix-bar {
      width: calc(100% - 1.2rem);
      bottom: calc(8px + env(safe-area-inset-bottom));
    }
    .onix-bar__collapsed {
      background: rgba(30, 32, 36, 0.96);
      border-radius: 12px;
      padding: 8px 12px;
    }
    .onix-bar__expanded {
      background: rgba(30, 32, 36, 0.97);
      border-radius: 12px;
      padding: 8px 10px 10px;
    }
    .onix-bar__summary { font-size: 0.65rem; }
    .onix-bar__tier-qty { font-size: 0.95rem; }
    .onix-bar__tier-unit { font-size: 0.4rem; }
    .onix-bar__tier-label { font-size: 0.68rem; }
    .onix-bar__tier { padding: 0.35rem 0.15rem; border-radius: 0.5rem; }
    .onix-bar__tiers { gap: 0.25rem; }
    .onix-bar__tier-code { font-size: 0.4rem; }
    .onix-bar__message { font-size: 0.65rem; }
    .onix-bar__dot { font-size: 0.75rem; }
  }

  @media (prefers-reduced-motion: reduce) {
    .onix-bar, .onix-bar__fill, .onix-bar__dot { transition: none; }
  }
/* END_SECTION:onix-discount-bar */

/* START_SECTION:onix-faq-cta (INDEX:10) */
.onix-faq-cta {
    padding: 5rem 1.5rem 6rem;
    background: #ffffff;
    text-align: center;
  }

  .onix-faq-cta__inner {
    max-width: 700px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2rem;
  }

  .onix-faq-cta__title {
    margin: 0;
    font-size: clamp(1.4rem, 3.5vw, 2rem);
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #111111;
    line-height: 1.2;
  }

  .onix-faq-cta__btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 1rem 2.2rem;
    background: #111111;
    color: #ffffff;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    text-decoration: none;
    border-radius: 999px;
    transition: background 200ms ease, transform 180ms ease;
  }

  .onix-faq-cta__btn:hover,
  .onix-faq-cta__btn:active {
    background: #00c8ff;
    color: #111111;
    transform: translateY(-1px);
  }
/* END_SECTION:onix-faq-cta */

/* START_SECTION:onix-faq (INDEX:11) */
.onix-faq {
    padding: 4rem 1.5rem 2rem;
    background: #ffffff;
  }

  @media (min-width: 750px) {
    .onix-faq {
      padding: 5rem 2rem 2.5rem;
    }
  }

  .onix-faq__inner {
    max-width: 860px;
    margin: 0 auto;
  }

  .onix-faq__header {
    text-align: center;
    margin-bottom: 3rem;
  }

  .onix-faq__emoji-wrap {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3.5rem;
    height: 3.5rem;
    font-size: 2rem;
    background: #f0f0f0;
    border-radius: 0.9rem;
    margin-bottom: 0.75rem;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
  }

  .onix-faq__title {
    margin: 0 0 0.5rem;
    font-size: clamp(1.6rem, 4vw, 2.2rem);
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #111111;
  }

  .onix-faq__subtitle {
    margin: 0;
    font-size: 0.95rem;
    color: #888888;
  }

  .onix-faq__list {
    border-top: 1px solid #e5e5e5;
  }

  .onix-faq__item {
    border-bottom: 1px solid #e5e5e5;
  }

  .onix-faq__question {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.35rem 0;
    cursor: pointer;
    list-style: none;
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #111111;
    user-select: none;
  }

  .onix-faq__question::-webkit-details-marker {
    display: none;
  }

  .onix-faq__icon {
    position: relative;
    flex-shrink: 0;
    width: 1rem;
    height: 1rem;
    transition: transform 240ms ease;
  }

  .onix-faq__icon::before,
  .onix-faq__icon::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0.9rem;
    height: 1.5px;
    background: #111111;
    transform: translate(-50%, -50%);
    transition: opacity 240ms ease, transform 240ms ease;
  }

  .onix-faq__icon::after {
    transform: translate(-50%, -50%) rotate(90deg);
  }

  .onix-faq__item[open] .onix-faq__icon::after {
    opacity: 0;
    transform: translate(-50%, -50%) rotate(0deg);
  }

  .onix-faq__answer {
    padding: 0 0 1.35rem;
  }

  .onix-faq__answer p {
    margin: 0;
    font-size: 0.95rem;
    color: #444444;
    line-height: 1.7;
  }
/* END_SECTION:onix-faq */

/* START_SECTION:onix-home-all-jerseys-cta (INDEX:12) */
.onix-alljerseys {
    /* Le thème met .shopify-section en grille (gouttière|contenu|gouttière) :
       on sort de la colonne de contenu pour occuper toute la largeur. Ignoré
       sans risque si le parent n'est pas une grille. */
    grid-column: 1 / -1;
    width: 100%;
    background: var(--aj-bg, #0a0a0c);
    padding: var(--aj-pad-top, 44px) clamp(1rem, 4vw, 3rem) var(--aj-pad-bottom, 44px);
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
  }
  .onix-alljerseys__inner {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  /* Bouton cyan marque #00c8ff au repos (cohérent avec les CTA du comparateur
     juste en dessous), texte foncé pour le contraste, halo + lift au survol. */
  .onix-alljerseys__cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    /* Centrage robuste : les marges auto centrent le bouton MÊME s'il déborde
       (sur tél très étroit / zoom système) là où justify-content le collerait
       à gauche. max-width évite qu'il force un débordement de la page. */
    margin-inline: auto;
    max-width: 100%;
    min-height: 2.8rem;
    padding: 0.75rem 2.4rem;
    border: none;
    border-radius: 999px;
    background: #00c8ff;
    color: #0a0a0a;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    text-decoration: none;
    cursor: pointer;
    transition: background 200ms ease, color 200ms ease, box-shadow 200ms ease, transform 180ms ease;
    -webkit-tap-highlight-color: transparent;
  }
  .onix-alljerseys__cta:hover,
  .onix-alljerseys__cta:focus-visible,
  .onix-alljerseys__cta:active {
    filter: brightness(1.08);
    box-shadow: 0 0 18px rgba(0, 200, 255, 0.35);
    transform: translateY(-2px);
  }
  @media (max-width: 749px) {
    .onix-alljerseys {
      padding-top: var(--aj-pad-top-m, 32px);
      padding-bottom: var(--aj-pad-bottom-m, 32px);
    }
  }
  @media (prefers-reduced-motion: reduce) {
    .onix-alljerseys__cta { transition: none; }
  }
/* END_SECTION:onix-home-all-jerseys-cta */

/* START_SECTION:onix-home-best-sellers (INDEX:13) */
.onix-home-best-sellers {
    padding: clamp(2rem, 4vw, 3rem) 1.25rem clamp(2rem, 4vw, 3rem);
    background: var(--c-bg, #050505);
    color: var(--c-fg, #f0f0f0);
  }

  @media (min-width: 750px) {
    .onix-home-best-sellers {
      padding-inline: 2rem;
    }
  }

  .onix-home-best-sellers__inner {
    width: min(100%, 78rem);
    margin: 0 auto;
    display: grid;
    gap: 2.6rem;
  }

  .onix-home-best-sellers__heading {
    display: grid;
    gap: 0.75rem;
    justify-items: center;
    text-align: center;
  }

  .onix-home-best-sellers__eyebrow {
    margin: 0;
    font-size: 0.7rem;
    letter-spacing: 0.34em;
    text-transform: uppercase;
    color: var(--c-accent, #00c8ff);
    font-weight: 600;
  }

  .onix-home-best-sellers__title {
    margin: 0;
    font-size: clamp(1.8rem, 4vw, 3rem);
    font-weight: 900;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--c-fg, #f0f0f0);
  }

  .onix-home-best-sellers__subtitle {
    margin: 0;
    font-size: 0.98rem;
    letter-spacing: 0.04em;
    color: var(--c-fg-dim);
  }

  /* ── Product grid ── */
  .onix-home-product-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.75rem;
  }

  @media (min-width: 750px) {
    .onix-home-product-grid {
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 1rem;
    }
  }

  /* ── CTA button ── */
  .onix-home-best-sellers__footer {
    display: flex;
    justify-content: center;
    padding-top: 0.5rem;
  }

  .onix-home-best-sellers__button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 2.8rem;
    padding: 0.75rem 2.4rem;
    border: none;
    border-radius: 999px;
    background: #00c8ff;
    color: #0a0a0a;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.22em;
    text-decoration: none;
    text-transform: uppercase;
    cursor: pointer;
    transition: background 200ms ease, color 200ms ease, box-shadow 200ms ease, transform 180ms ease;
  }

  .onix-home-best-sellers__button:hover,
  .onix-home-best-sellers__button:focus-visible,
  .onix-home-best-sellers__button:active {
    filter: brightness(1.08);
    box-shadow: 0 0 18px rgba(0, 200, 255, 0.35);
    transform: translateY(-2px);
  }

  .onix-home-best-sellers__empty {
    margin: 0;
    padding: 1.35rem;
    color: var(--c-fg-dim);
    font-size: 0.9rem;
    letter-spacing: 0.06em;
  }

  @media (min-width: 1100px) {
    .onix-home-product-grid {
      grid-template-columns: repeat(5, minmax(0, 1fr));
    }
  }

  @media (max-width: 749px) {
    .onix-home-best-sellers {
      padding-top: clamp(2rem, 4vw, 3rem);
      padding-bottom: clamp(2rem, 4vw, 3rem);
    }

    .onix-home-best-sellers__inner {
      gap: 2rem;
    }
  }
/* END_SECTION:onix-home-best-sellers */

/* START_SECTION:onix-home-comparator (INDEX:14) */
/* ══════════════════════════════════════════════════════════════════════
     COMPARATEUR COMPACT, INCRUSTÉ SOUS LES VIDÉOS — retenu le 12/08.
     « incruste le comparateur de prix en compact, dans tous les cas c'est plus
     pour rentrer l'information dans la tête du client. »

     Le principe : il n'est plus une CARTE posée dans la page, il devient une
     ligne du bloc. Plus de fond, plus de cadre, plus d'arrondi — un simple filet
     de séparation, le même qu'au-dessus des vidéos.

     ⚠️ LE DÉCALAGE VENAIT D'UN CONTENEUR INTERMÉDIAIRE, pas de la carte.
     `.onix-comparator` porte 32 px de padding horizontal : tant qu'il est là, la
     carte fait 1 000 px quand la grille vidéo en fait 1 064 — 32 px de retrait de
     chaque côté, exactement ce qui la fait lire comme un bloc rapporté. Trouvé en
     remontant la chaîne des parents un par un ; le coupable n'était ni la carte ni
     la section, mais l'étage entre les deux.
     ══════════════════════════════════════════════════════════════════════ */
  .onix-comparator__card {
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    width: 100% !important;
    /* ⚠️ MÊME BORNE QUE LA GRILLE VIDÉO — 660 px. Le comparateur est incrusté
       dans le même bloc : s'il s'étale plus large que les vidéos, il redevient un
       élément rapporté, ce que tout ce travail cherchait à supprimer. Les deux
       valeurs se changent ENSEMBLE ou pas du tout. */
    max-width: 660px !important;
    margin: 0 auto !important;
  }
  .onix-comparator__cta-principal { max-width: 660px; }
  .onix-comparator__bar {
    border-top: 1px solid rgba(255, 255, 255, 0.11) !important;
    margin-top: 14px !important;
    padding: 13px 2px 0 !important;
    background: transparent !important;
  }

  /* ⚠️ LE VOLET DÉPLIABLE EST MASQUÉ. Son seul élément actionnable — le bouton —
     en a été sorti pour devenir l'appel principal de la page. Ce qui reste est
     une liste de prix par quantité, déjà résumée par la ligne « Avec nos
     codes » juste au-dessus : le garder ouvert faisait passer le comparateur de
     81 px à 310 px sur mobile, pour une information déjà donnée. */
  .onix-comparator__detail { display: none !important; }

  /* ⚠️ ET LE BOUTON « VOIR » AVEC. Le laisser, c'est laisser un contrôle qui
     ouvre un panneau masqué : il ne se passerait rien au clic. Un contrôle mort
     est pire qu'un contrôle absent — le visiteur croit que la page est cassée.
     Ne PAS confondre avec .onix-comparator__cta-principal ci-dessous, qui est le
     vrai bouton et porte une autre classe. */
  .onix-comparator__cta { display: none !important; }

  /* Le bouton principal, hors du volet dépliable : il occupe toute la largeur
     du bloc et se détache seul. Voir le commentaire dans le markup. */
  .onix-comparator__cta-principal {
    display: flex;
    margin: 14px auto 0;
    max-width: 92rem;
  }

  @media (max-width: 759px) {
    /* ⚠️ LES PUCES CONCURRENTES SONT RENDUES VISIBLES. Le thème les masque sur
       mobile et n'y laisse que le titre : la comparaison disparaissait, alors
       que c'est TOUT le propos de la section. Elles reviennent en rangée qui
       glisse.
       ⚠️ `flex-wrap:nowrap` est indispensable : le thème les laisse revenir à la
       ligne, donc `overflow-x:auto` ne servait à rien — elles se rangeaient sur
       DEUX lignes au lieu de glisser. Mesuré : puces 4 et 5 à gauche de la puce
       3, comparateur à 164 px. Une rangée qui glisse, c'est une seule ligne. */
    .onix-comparator__rivals {
      display: flex !important;
      flex-wrap: nowrap !important;
      gap: 6px;
      overflow-x: auto;
      scrollbar-width: none;
      padding: 2px 0 1px;
      margin-top: 6px;
      width: 100%;
      -webkit-mask-image: linear-gradient(90deg, #000 86%, transparent);
    }
    .onix-comparator__rivals::-webkit-scrollbar { display: none; }
    .onix-comparator__rival { flex: 0 0 auto; transform: scale(0.92); transform-origin: left center; }

    /* ⚠️ Le « vs » RESTE MASQUÉ sur mobile : remis à l'affichage il prenait une
       rangée entière pour deux lettres, et le titre dit déjà « vs 5 boutiques ». */
    .onix-comparator__vs { display: none !important; }

    /* ⚠️ DEUX RANGÉES, PAS TROIS. Première version : titre, puis écart, puis
       puces, chacun sur sa ligne -> comparateur à 202 px là où il en fait 85. Le
       titre et l'écart tiennent très bien côte à côte ; seules les puces ont
       besoin de toute la largeur. */
    .onix-comparator__bar { flex-wrap: wrap !important; align-items: center !important; row-gap: 0 !important; }
    .onix-comparator__lead { flex: 1 1 auto !important; min-width: 0; }
    .onix-comparator__save { flex: 0 0 auto !important; order: 2; }
    .onix-comparator__rivals { order: 4; flex: 1 1 100%; }
    .onix-comparator__cta { order: 5; }
  }

  .onix-comparator {
    width: 100%;
    padding: var(--cmp-pt, 8px) clamp(0.75rem, 3vw, 2rem) var(--cmp-pb, 8px);
    /* Même fond que le Top 4 et la bande vidéo : les trois sections forment un
       seul bloc sombre, comme dans la planche où le comparateur était incrusté
       DANS la bande. Voir le commentaire dans onix-home-video-carousel.liquid. */
    background: #070b14;
    position: relative;
    /* ⚠️ LA VAGUE EST POSÉE PAR-DESSUS LE CONTENU, pas à la suite. Le snippet
       onix-section-wave la place en absolu sur les 48 derniers pixels de la
       section : sans réserve, elle mordait sur le bouton. Mesuré — vague de 701
       à 749, bouton de 683 à 725, donc 24 px de recouvrement. Le bloc semblait
       « finir trop tôt » parce que le blanc commençait AVANT la fin du contenu.
       On réserve donc la hauteur de la vague, plus la respiration. */
    padding-bottom: calc(var(--cmp-pb, 8px) + 48px + 1.75rem);
  }
  .onix-comparator__card {
    max-width: 92rem;
    margin-inline: auto;
    background: var(--cmp-bg, #0a0a0a);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 20px;
    overflow: hidden;
    color: #f5f5f7;
  }

  /* ── Barre teaser ───────────────────────────────────────────────── */
  .onix-comparator__bar {
    display: flex;
    align-items: center;
    gap: clamp(0.85rem, 1.6vw, 1.6rem);
    padding: 0.85rem 1rem 0.85rem 1.25rem;
  }
  .onix-comparator__lead {
    flex: 0 1 auto;
    min-width: 0;
    max-width: 17rem;
  }
  .onix-comparator__badge {
    display: inline-block;
    color: var(--cmp-accent, #00c8ff);
    font-size: 0.6rem;
    font-weight: 800;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    margin-bottom: 0.2rem;
  }
  .onix-comparator__title {
    margin: 0;
    font-size: 0.82rem;
    font-weight: 700;
    line-height: 1.25;
    color: #fff;
  }

  /* Ligne « marché » : MOBILE UNIQUEMENT (masquée sur desktop, affichée dans le @media). */
  .onix-comparator__mktline {
    display: none;
    margin: 0;
    font-size: 0.98rem;
    font-weight: 700;
    line-height: 1.3;
    color: #fff;
    text-align: center;
  }
  .onix-comparator__mktline strong {
    color: var(--cmp-accent, #00c8ff);
    font-weight: 800;
  }

  .onix-comparator__save {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    line-height: 1;
    text-align: center;
  }
  .onix-comparator__save-amt {
    color: var(--cmp-accent, #00c8ff);
    font-size: clamp(1.5rem, 2.4vw, 2.1rem);
    font-weight: 800;
    letter-spacing: -0.01em;
  }
  .onix-comparator__save-lbl {
    margin-top: 0.25rem;
    font-size: 0.55rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.55);
  }

  .onix-comparator__vs {
    flex: 0 0 auto;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.4);
  }

  .onix-comparator__rivals {
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 0.45rem 0.95rem;
    min-width: 0;
  }
  .onix-comparator__rival {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
  }
  .onix-comparator__chip {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    background: #1c1c20;
    border: 1px solid rgba(255, 255, 255, 0.12);
    overflow: hidden;
  }
  .onix-comparator__chip-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  /* Pastille logo concurrent : rectangle arrondi (mieux pour les wordmarks),
     fond clair par défaut (logo foncé), fond sombre .is-dark (logo clair).
     Les pastilles « sigle » texte restent des cercles sombres. */
  .onix-comparator__chip--logo {
    width: 2.6rem;
    border-radius: 9px;
    background: #ffffff;
    border-color: rgba(255, 255, 255, 0.25);
  }
  .onix-comparator__chip--logo.is-dark {
    background: #1c1c20;
    border-color: rgba(255, 255, 255, 0.2);
  }
  /* Notre pastille (logo ONIXM) : fond sombre pour faire ressortir l'emblème
     argenté + anneau cyan pour signaler « nous » (placé après --logo : gagne). */
  .onix-comparator__chip--us-logo {
    background: #0f0f12;
    border-color: rgba(0, 200, 255, 0.6);
    border-color: color-mix(in srgb, var(--cmp-accent, #00c8ff) 60%, transparent);
  }
  .onix-comparator__chip--logo .onix-comparator__chip-img {
    object-fit: contain;
    padding: 3px;
  }
  .onix-comparator__chip-txt {
    font-size: 0.5rem;
    font-weight: 800;
    letter-spacing: 0.02em;
    color: rgba(255, 255, 255, 0.78);
    text-transform: uppercase;
    padding: 0 1px;
    text-align: center;
  }
  .onix-comparator__rival-price {
    font-size: 0.74rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.45);
    text-decoration-line: line-through;
    text-decoration-color: rgba(239, 68, 68, 0.9);
    text-decoration-thickness: 1.5px;
    white-space: nowrap;
  }

  .onix-comparator__cta {
    flex: 0 0 auto;
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.62rem 1.25rem;
    border: none;
    border-radius: 999px;
    background: var(--cmp-accent, #00c8ff);
    color: #0a0a0a;
    font-family: inherit;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    cursor: pointer;
    transition: filter 0.18s ease, transform 0.18s ease;
    -webkit-tap-highlight-color: transparent;
  }
  .onix-comparator__cta:hover,
  .onix-comparator__cta:focus-visible {
    filter: brightness(1.08);
    transform: translateY(-1px);
  }
  .onix-comparator__cta-arrow {
    transition: transform 0.22s ease;
  }
  .onix-comparator.is-open .onix-comparator__cta-arrow {
    transform: rotate(90deg);
  }

  /* ── Détail (déplié) ────────────────────────────────────────────── */
  .onix-comparator__detail {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 0.34s cubic-bezier(0.22, 1, 0.36, 1);
  }
  .onix-comparator.is-open .onix-comparator__detail {
    grid-template-rows: 1fr;
  }
  .onix-comparator__detail-inner {
    overflow: hidden;
    min-height: 0;
  }
  .onix-comparator__detail-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    padding: 0.2rem 1.25rem 0.9rem;
    border-top: 1px solid rgba(255, 255, 255, 0.07);
    margin-top: 0.1rem;
  }
  .onix-comparator__detail-headline {
    margin: 0.9rem 0 0;
    font-size: 0.92rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.82);
  }
  .onix-comparator__detail-headline strong {
    color: var(--cmp-accent, #00c8ff);
    font-weight: 800;
  }
  .onix-comparator__detail-headcol {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
  }
  .onix-comparator__stamp {
    margin: 0;
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.42);
  }
  .onix-comparator__trust {
    margin: 0.9rem 0 0;
    font-size: 0.72rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.6);
    white-space: nowrap;
  }
  .onix-comparator__stars {
    color: #f5b50a;
    letter-spacing: 0.05em;
  }

  /* Échelle des codes promo (prix/maillot selon la quantité) — affichée
     dans le détail, au-dessus de la liste comparative. */
  .onix-comparator__ladder {
    margin: 0 1.25rem 0.75rem;
    padding: 0.75rem 1rem;
    border-radius: 11px;
    background: rgba(0, 200, 255, 0.1);
    background: color-mix(in srgb, var(--cmp-accent, #00c8ff) 10%, transparent);
    color: rgba(255, 255, 255, 0.92);
    font-size: 0.98rem;
    font-weight: 700;
    line-height: 1.5;
  }

  .onix-comparator__list {
    list-style: none;
    margin: 0;
    padding: 0 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
  }
  .onix-comparator__item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.6rem 0.85rem;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.06);
  }
  .onix-comparator__item--us {
    /* Fallback solide (cyan) AVANT color-mix : sur iOS/Safari < 16.2 color-mix
       n'est pas supporté → sans ça la ligne « Notre offre » se rendrait comme
       un concurrent. Les navigateurs récents surchargent avec color-mix. */
    background: rgba(0, 200, 255, 0.14);
    background: color-mix(in srgb, var(--cmp-accent, #00c8ff) 14%, transparent);
    border-color: rgba(0, 200, 255, 0.55);
    border-color: color-mix(in srgb, var(--cmp-accent, #00c8ff) 55%, transparent);
  }
  .onix-comparator__item .onix-comparator__chip {
    width: 2.25rem;
    height: 2.25rem;
  }
  .onix-comparator__item .onix-comparator__chip--logo {
    width: 3rem;
  }
  .onix-comparator__chip--us {
    background: var(--cmp-accent, #00c8ff);
    border-color: var(--cmp-accent, #00c8ff);
  }
  .onix-comparator__chip--us .onix-comparator__chip-txt {
    color: #0a0a0a;
    font-size: 0.46rem;
  }
  .onix-comparator__item-name {
    flex: 1 1 auto;
    min-width: 0;
    font-size: 0.86rem;
    font-weight: 600;
    color: #fff;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .onix-comparator__item--us .onix-comparator__item-name {
    font-weight: 800;
  }
  .onix-comparator__item-price {
    flex: 0 0 auto;
    font-size: 0.86rem;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.55);
    white-space: nowrap;
  }
  s.onix-comparator__item-price {
    text-decoration-line: line-through;
    text-decoration-color: rgba(239, 68, 68, 0.85);
    text-decoration-thickness: 1.5px;
  }
  .onix-comparator__item-price--us {
    color: var(--cmp-accent, #00c8ff);
    font-weight: 800;
    text-decoration: none;
  }
  .onix-comparator__item-save {
    flex: 0 0 auto;
    min-width: 3.1rem;
    text-align: center;
    padding: 0.2rem 0.5rem;
    border-radius: 999px;
    background: rgba(0, 200, 255, 0.16);
    background: color-mix(in srgb, var(--cmp-accent, #00c8ff) 16%, transparent);
    color: var(--cmp-accent, #00c8ff);
    font-size: 0.72rem;
    font-weight: 800;
    white-space: nowrap;
  }
  .onix-comparator__item-tag {
    flex: 0 0 auto;
    min-width: 3.1rem;
    text-align: center;
    color: var(--cmp-accent, #00c8ff);
    font-size: 0.9rem;
  }

  .onix-comparator__detail-cta {
    display: block;
    margin: 1rem 1.25rem 1.25rem;
    padding: 0.85rem 1rem;
    border-radius: 12px;
    background: var(--cmp-accent, #00c8ff);
    color: #0a0a0a;
    text-align: center;
    text-decoration: none;
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    transition: filter 0.18s ease;
  }
  .onix-comparator__detail-cta:hover,
  .onix-comparator__detail-cta:focus-visible {
    filter: brightness(1.08);
  }

  /* ── Mobile : barre empilée, puces masquées (vues dans le détail) ── */
  @media (max-width: 749px) {
    .onix-comparator {
      padding-top: var(--cmp-pt-m, 8px);
      /* ⚠️ LA RÉSERVE POUR LA VAGUE SE REPOSE ICI. Elle est déclarée plus haut
         sur `.onix-comparator`, mais cette règle-ci est dans une media query
         plus bas dans le fichier : à spécificité égale elle reprenait la main et
         ramenait le bas à 8 px — la vague remordait sur le bouton, en silence.
         C'est le mobile qui compte le plus ici : ne pas retirer l'un sans
         l'autre. */
      padding-bottom: calc(var(--cmp-pb-m, 8px) + 48px + 1.5rem);
    }
    .onix-comparator__card {
      border-radius: 16px;
    }
    .onix-comparator__bar {
      flex-wrap: wrap;
      gap: 0.5rem 0.9rem;
      padding: 0.9rem 1rem;
    }
    .onix-comparator__lead {
      flex: 1 1 100%;
      max-width: none;
    }
    /* Mobile façon covred : on masque badge + titre + gros bloc « économie »,
       on affiche la ligne « −X € moins cher que la moyenne du marché ». */
    .onix-comparator__badge,
    .onix-comparator__title,
    .onix-comparator__save {
      display: none;
    }
    .onix-comparator__mktline {
      display: block;
    }
    .onix-comparator__vs,
    .onix-comparator__rivals {
      display: none;
    }
    /* Mobile : détail TOUJOURS déplié + bouton « Voir » masqué (cartes affichées direct). */
    .onix-comparator__detail {
      grid-template-rows: 1fr;
    }
    .onix-comparator__cta {
      display: none;
    }
    /* Mobile (format covred épuré) : on masque tout l'en-tête du détail —
       accroche « −X € de moins… » + tampon « N boutiques comparées » + avis
       « ★★★★★ N commandes ». Reste : ligne marché → paliers → cartes → bouton. */
    .onix-comparator__detail-head {
      display: none;
    }
    .onix-comparator__ladder {
      margin: 0 1rem 0.7rem;
      padding: 0.6rem 0.8rem;
      font-size: 0.72rem;
      line-height: 1.4;
    }
    /* Concurrents en rangée de CARTES VERTICALES scrollables (style covred) :
       logo en haut, nom, prix, save empilés. ONIXM (--us) = 1re carte surlignée. */
    .onix-comparator__list {
      flex-direction: row;
      overflow-x: auto;
      gap: 0.4rem;
      padding: 0.2rem 1rem 0.9rem;
      /* scroll-padding : sinon scroll-snap-align:start colle la 1re carte
         contre le bord visible (le padding gauche est "scrollé" → carte au rebord). */
      scroll-padding-left: 1rem;
      scroll-snap-type: x proximity;
      -webkit-overflow-scrolling: touch;
      scrollbar-width: none;
    }
    .onix-comparator__list::-webkit-scrollbar {
      display: none;
    }
    .onix-comparator__item {
      flex: 0 0 auto;
      width: 4.7rem;
      flex-direction: column;
      align-items: center;
      text-align: center;
      gap: 0.14rem;
      padding: 0.4rem 0.25rem;
      scroll-snap-align: start;
    }
    .onix-comparator__item .onix-comparator__chip {
      width: 1.4rem;
      height: 1.4rem;
    }
    .onix-comparator__item .onix-comparator__chip--logo {
      width: 1.8rem;
    }
    .onix-comparator__item-name {
      flex: 0 0 auto;
      font-size: 0.58rem;
      line-height: 1.12;
      white-space: normal;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      overflow: hidden;
    }
    .onix-comparator__item-price {
      font-size: 0.66rem;
    }
    .onix-comparator__item-save,
    .onix-comparator__item-tag {
      min-width: 0;
      font-size: 0.58rem;
    }
    .onix-comparator__detail-cta {
      margin: 0.85rem 1rem 1rem;
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .onix-comparator__detail,
    .onix-comparator__cta,
    .onix-comparator__cta-arrow {
      transition: none;
    }
  }
/* END_SECTION:onix-home-comparator */

/* START_SECTION:onix-home-delivery-proof (INDEX:15) */
.onix-delivery-proof {
    position: relative;
    padding: var(--odp-pad-top, 80px) 1.25rem var(--odp-pad-bottom, 80px);
    overflow: hidden;
    color: #ffffff;
    isolation: isolate;
    background:
      radial-gradient(ellipse at 18% 20%, rgba(124, 92, 255, 0.22), transparent 55%),
      radial-gradient(ellipse at 82% 80%, rgba(196, 245, 66, 0.12), transparent 60%),
      linear-gradient(180deg, #07051f 0%, #0d0833 50%, #1a0a4a 100%);
  }
  .onix-delivery-proof::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
      linear-gradient(180deg, transparent 0, transparent 88%, rgba(0, 0, 0, 0.4) 100%),
      radial-gradient(circle at 50% 0%, rgba(124, 92, 255, 0.2), transparent 70%);
    pointer-events: none;
    z-index: 0;
  }

  .onix-delivery-proof__container {
    position: relative;
    z-index: 1;
    max-width: 1280px;
    margin: 0 auto;
  }

  /* ─── Starfield ─── */
  .onix-delivery-proof__starfield {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
  }
  .onix-delivery-proof__star {
    position: absolute;
    left: var(--odp-x);
    top: var(--odp-y);
    width: var(--odp-size, 2px);
    height: var(--odp-size, 2px);
    border-radius: 50%;
    background: #ffffff;
    opacity: 0;
    box-shadow: 0 0 6px rgba(255, 255, 255, 0.6);
    animation: odp-twinkle 4.8s ease-in-out infinite;
    animation-delay: var(--odp-delay, 0s);
  }
  @keyframes odp-twinkle {
    0%, 100% { opacity: 0.15; transform: scale(0.6); }
    50% { opacity: 0.9; transform: scale(1); }
  }

  /* ─── Header ─── */
  .onix-delivery-proof__head {
    text-align: center;
    max-width: 720px;
    margin: 0 auto 3.5rem;
  }
  .onix-delivery-proof__tag {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.4rem 0.9rem;
    border: 1px solid rgba(196, 245, 66, 0.3);
    border-radius: 999px;
    background: rgba(196, 245, 66, 0.06);
    color: #c4f542;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    backdrop-filter: blur(8px);
  }
  .onix-delivery-proof__tag-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #c4f542;
    box-shadow: 0 0 8px rgba(196, 245, 66, 0.8);
    animation: odp-pulse 1.8s ease-in-out infinite;
  }
  @keyframes odp-pulse {
    0%, 100% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.4); opacity: 0.55; }
  }
  .onix-delivery-proof__title {
    margin: 1.25rem 0 0.85rem;
    font-size: clamp(2.2rem, 5.8vw, 4rem);
    font-weight: 800;
    line-height: 1.02;
    letter-spacing: -0.025em;
    color: #ffffff;
    text-transform: uppercase;
    text-wrap: balance;
  }
  .onix-delivery-proof__title em {
    font-style: normal;
    background: linear-gradient(120deg, #ffffff 0%, #c8b8ff 50%, #7c5cff 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
  }
  .onix-delivery-proof__subtitle {
    font-size: clamp(0.95rem, 1.4vw, 1.05rem);
    line-height: 1.55;
    color: rgba(255, 255, 255, 0.72);
    margin: 0;
  }

  /* ─── Layout 2 cols ─── */
  .onix-delivery-proof__layout {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
    align-items: center;
    justify-items: center;
  }
  @media (min-width: 880px) {
    .onix-delivery-proof__layout {
      grid-template-columns: 1fr auto 1fr;
      gap: 1.5rem;
    }
  }
  .onix-delivery-proof__plus {
    display: none;
    font-size: 2.5rem;
    font-weight: 200;
    color: rgba(255, 255, 255, 0.35);
    line-height: 1;
  }
  @media (min-width: 880px) {
    .onix-delivery-proof__plus { display: block; }
  }

  /* ─── Globe column ─── */
  .onix-delivery-proof__globe-col {
    width: 100%;
    display: flex;
    justify-content: center;
  }
  .onix-delivery-proof__globe-wrap {
    position: relative;
    width: 100%;
    max-width: 360px;
    aspect-ratio: 1 / 1;
    isolation: isolate;
  }
  @media (min-width: 880px) {
    .onix-delivery-proof__globe-wrap { max-width: 420px; }
  }
  .onix-delivery-proof__glow {
    position: absolute;
    inset: -8%;
    border-radius: 50%;
    background: radial-gradient(circle at 50% 50%, rgba(124, 92, 255, 0.35), transparent 65%);
    filter: blur(28px);
    z-index: 0;
    pointer-events: none;
    animation: odp-glow-breathe 6s ease-in-out infinite;
  }
  @keyframes odp-glow-breathe {
    0%, 100% { transform: scale(1); opacity: 0.7; }
    50% { transform: scale(1.08); opacity: 1; }
  }
  .onix-delivery-proof__svg {
    position: relative;
    z-index: 1;
    width: 100%;
    height: auto;
    display: block;
    animation: odp-globe-float 8s ease-in-out infinite;
  }
  @keyframes odp-globe-float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-6px); }
  }
  .onix-delivery-proof__point circle:nth-child(1) {
    animation: odp-ring-grow 2.6s ease-out infinite;
    transform-origin: center;
    transform-box: fill-box;
  }
  .onix-delivery-proof__point--to circle:nth-child(1) {
    animation-delay: 1.3s;
  }
  @keyframes odp-ring-grow {
    0% { transform: scale(0.6); opacity: 0.9; }
    100% { transform: scale(1.8); opacity: 0; }
  }
  .onix-delivery-proof__arc {
    animation: odp-arc-dash 3s linear infinite;
  }
  @keyframes odp-arc-dash {
    0% { stroke-dashoffset: 0; }
    100% { stroke-dashoffset: -24; }
  }

  /* ─── Route labels (sous le globe) ─── */
  .onix-delivery-proof__route-labels {
    position: absolute;
    left: 0;
    right: 0;
    bottom: -1.5rem;
    display: flex;
    justify-content: space-between;
    padding: 0 0.25rem;
    z-index: 2;
    pointer-events: none;
  }
  .onix-delivery-proof__route-label {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.35rem 0.65rem;
    background: rgba(11, 3, 34, 0.85);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 999px;
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    color: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(8px);
    white-space: nowrap;
  }
  .onix-delivery-proof__route-pin {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
  }
  .onix-delivery-proof__route-pin--from {
    background: rgba(255, 75, 150, 1);
    box-shadow: 0 0 6px rgba(255, 75, 150, 0.8);
  }
  .onix-delivery-proof__route-pin--to {
    background: rgba(196, 245, 66, 1);
    box-shadow: 0 0 6px rgba(196, 245, 66, 0.8);
  }

  /* ─── Photos column ─── */
  .onix-delivery-proof__photos {
    position: relative;
    width: 100%;
    max-width: 520px;
    aspect-ratio: 1.1 / 1;
  }
  .onix-delivery-proof__photo {
    position: absolute;
    margin: 0;
    border-radius: 0.9rem;
    overflow: hidden;
    border: 2px solid rgba(255, 255, 255, 0.1);
    box-shadow:
      0 30px 60px rgba(0, 0, 0, 0.5),
      0 8px 18px rgba(124, 92, 255, 0.2);
    background: rgba(11, 3, 34, 0.4);
    transition: transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1);
  }
  .onix-delivery-proof__photo-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }
  /* Fan-of-cards layout — Photo 1 (featured) au centre, photos 2/3/4 réparties
     à gauche-droite avec une rotation progressive, façon main de cartes ouverte. */
  .onix-delivery-proof__photo--2 {
    z-index: 2;
    width: 38%;
    aspect-ratio: 3 / 4;
    top: 18%;
    left: 0%;
    transform: rotate(-14deg) translateY(0);
  }
  .onix-delivery-proof__photo--featured {
    z-index: 4;
    width: 44%;
    aspect-ratio: 3 / 4;
    top: 10%;
    left: 18%;
    transform: rotate(-3deg);
    border-color: rgba(196, 245, 66, 0.4);
    box-shadow:
      0 36px 70px rgba(0, 0, 0, 0.55),
      0 12px 28px rgba(196, 245, 66, 0.28);
  }
  .onix-delivery-proof__photo--3 {
    z-index: 3;
    width: 42%;
    aspect-ratio: 3 / 4;
    top: 8%;
    left: 40%;
    transform: rotate(6deg);
  }
  .onix-delivery-proof__photo--4 {
    z-index: 2;
    width: 38%;
    aspect-ratio: 3 / 4;
    top: 16%;
    right: 0%;
    transform: rotate(16deg);
  }
  .onix-delivery-proof__photo:hover {
    transform: scale(1.06) rotate(0);
    z-index: 5;
    box-shadow:
      0 40px 80px rgba(0, 0, 0, 0.6),
      0 14px 32px rgba(124, 92, 255, 0.4);
  }
  .onix-delivery-proof__photo-badge {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: linear-gradient(135deg, #c4f542, #7c5cff);
    color: #0b0322;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: 800;
    box-shadow: 0 4px 12px rgba(124, 92, 255, 0.5);
  }

  .onix-delivery-proof__photos-empty {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
    border: 2px dashed rgba(255, 255, 255, 0.15);
    border-radius: 1rem;
    color: rgba(255, 255, 255, 0.45);
    font-size: 0.85rem;
    text-align: center;
    padding: 1rem;
  }
  .onix-delivery-proof__photos-empty span {
    font-size: 2.5rem;
  }

  /* ─── Trust line ─── */
  .onix-delivery-proof__trust {
    margin: 3.5rem auto 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 0.5rem 1rem;
    font-size: 0.92rem;
    color: rgba(255, 255, 255, 0.75);
  }
  .onix-delivery-proof__trust strong {
    color: #ffffff;
    font-weight: 700;
  }
  .onix-delivery-proof__dot {
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: rgba(196, 245, 66, 0.7);
    flex-shrink: 0;
  }

  /* ─── Responsive tweaks mobile ─── */
  @media (max-width: 749px) {
    .onix-delivery-proof { padding-left: 1rem; padding-right: 1rem; }
    .onix-delivery-proof__head { margin-bottom: 2.5rem; }
    .onix-delivery-proof__route-labels { bottom: -1.2rem; }
    .onix-delivery-proof__route-label { font-size: 0.62rem; padding: 0.3rem 0.55rem; }
    .onix-delivery-proof__trust { margin-top: 2.5rem; font-size: 0.82rem; }
  }

  /* ─── Reduce motion ─── */
  @media (prefers-reduced-motion: reduce) {
    .onix-delivery-proof__star,
    .onix-delivery-proof__glow,
    .onix-delivery-proof__svg,
    .onix-delivery-proof__point circle,
    .onix-delivery-proof__arc,
    .onix-delivery-proof__plane { animation: none !important; }
    .onix-delivery-proof__tag-dot { animation: none !important; }
  }
/* END_SECTION:onix-home-delivery-proof */

/* START_SECTION:onix-home-hero (INDEX:16) */
/* ── Hero wrapper ── */
.onix-home-hero {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 100svh;
  padding: clamp(3.5rem, 8vw, 6rem) 1.25rem clamp(3rem, 6vw, 5rem);
  background: #000;
  overflow: hidden;
  text-align: center;
}

/* ── Background elements ── */
.onix-home-hero__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
}

.onix-home-hero__overlay-img {
  position: absolute;
  inset: 0;
  display: block;
}
.onix-home-hero__bg-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

@media (max-width: 749px) {
  .onix-home-hero__bg-img {
    opacity: 0.4;
  }
}

/* Cyan glow radial */
.onix-home-hero__glow {
  position: absolute;
  top: -20%;
  left: 50%;
  transform: translateX(-50%);
  width: 80vw;
  height: 80vw;
  max-width: 900px;
  max-height: 900px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(0,200,255,0.12) 0%, transparent 70%);
  pointer-events: none;
  animation: hero-pulse 6s ease-in-out infinite;
}
@keyframes hero-pulse {
  0%, 100% { opacity: 0.7; transform: translateX(-50%) scale(1); }
  50%       { opacity: 1;   transform: translateX(-50%) scale(1.08); }
}

/* ── Content ── */
.onix-home-hero__inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(1rem, 2.5vw, 1.5rem);
  max-width: 55rem;
  width: 100%;
  animation: hero-fade-in 0.9s ease forwards;
}

@keyframes hero-fade-in {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  .onix-home-hero__inner { animation: none; }
}

.onix-home-hero__eyebrow {
  font-size: 1.1rem;
  letter-spacing: 0.38em;
  text-transform: uppercase;
  color: #ffffff;
  font-weight: 800;
  text-shadow: 0 0 30px rgba(0,200,255,1), 0 0 60px rgba(0,200,255,0.6);
  -webkit-text-stroke: 0.5px rgba(0,200,255,0.8);
}

.onix-home-hero__title {
  font-size: clamp(2.4rem, 7vw, 6rem);
  font-weight: 900;
  line-height: 1.0;
  letter-spacing: -0.03em;
  color: #ffffff;
  text-transform: uppercase;
  margin: 0;
  text-shadow: 0 2px 20px rgba(0,0,0,0.4);
}

.onix-home-hero__subtitle {
  font-size: clamp(1.05rem, 2vw, 1.35rem);
  color: #ffffff;
  font-weight: 600;
  max-width: 38rem;
  line-height: 1.65;
  margin: 0;
  text-shadow: 0 1px 12px rgba(0,0,0,0.5);
}

/* ── CTAs ── */
.onix-home-hero__ctas {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  justify-content: center;
  margin-top: 0.5rem;
}

.onix-home-hero__btn {
  display: inline-flex;
  align-items: center;
  padding: 0.9rem 2.2rem;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  text-decoration: none;
  border-radius: 999px;
  transition: all 0.25s ease;
}

.onix-home-hero__btn--primary {
  position: relative;
  overflow: hidden;
  /* Glass cyan fluo (idem CTA "Suivre ma commande") */
  background: rgba(0, 200, 255, 0.08);
  border: 1.5px solid rgba(0, 200, 255, 0.85);
  color: #a5e9ff;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow:
    0 0 0 1px rgba(0, 200, 255, 0.2),
    0 0 18px rgba(0, 200, 255, 0.45),
    0 0 36px rgba(0, 200, 255, 0.25),
    inset 0 0 12px rgba(0, 200, 255, 0.12);
}
.onix-home-hero__btn--primary:hover,
.onix-home-hero__btn--primary:focus-visible {
  background: rgba(0, 200, 255, 0.18);
  color: #ffffff;
  transform: translateY(-1px);
  box-shadow:
    0 0 0 1px rgba(0, 200, 255, 0.35),
    0 0 28px rgba(0, 200, 255, 0.7),
    0 0 56px rgba(0, 200, 255, 0.4),
    inset 0 0 16px rgba(0, 200, 255, 0.2);
}

.onix-home-hero__btn-label {
  position: relative;
  z-index: 1;
}

.onix-home-hero__btn-sweep {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    105deg,
    transparent 30%,
    rgba(0, 200, 255, 0.35) 48%,
    rgba(0, 200, 255, 0.55) 50%,
    rgba(0, 200, 255, 0.35) 52%,
    transparent 70%
  );
  animation: hero-btn-sweep 4s ease-in-out infinite;
}

@keyframes hero-btn-sweep {
  0%   { transform: translateX(-120%); }
  40%  { transform: translateX(120%); }
  100% { transform: translateX(120%); }
}

@media (prefers-reduced-motion: reduce) {
  .onix-home-hero__btn-sweep { animation: none; }
}

.onix-home-hero__btn--ghost {
  background: transparent;
  color: #111111;
  border: 1px solid rgba(0,0,0,0.25);
}
.onix-home-hero__btn--ghost:hover,
.onix-home-hero__btn--ghost:focus-visible {
  border-color: var(--c-accent);
  color: var(--c-accent);
  box-shadow: 0 0 16px var(--c-accent-gl);
}

/* ── Stats ── */
.onix-home-hero__stats {
  display: flex;
  align-items: center;
  gap: 2rem;
  margin-top: clamp(1.5rem, 4vw, 3rem);
  padding-top: clamp(1.5rem, 4vw, 3rem);
  border-top: 1px solid rgba(0,0,0,0.12);
  width: 100%;
  justify-content: center;
}

.onix-home-hero__stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.3rem;
}

.onix-home-hero__stat-num {
  font-size: clamp(2rem, 5vw, 3.5rem);
  font-weight: 900;
  color: var(--c-accent);
  letter-spacing: -0.02em;
  line-height: 1;
  text-shadow: 0 0 24px rgba(0,200,255,0.6);
}

.onix-home-hero__stat-lbl {
  font-size: 0.75rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: #ffffff;
  font-weight: 700;
}

.onix-home-hero__stat-sep {
  width: 1px;
  height: 2.5rem;
  background: rgba(0,0,0,0.12);
}

@media (max-width: 480px) {
  .onix-home-hero__stats { gap: 1.25rem; }
  .onix-home-hero__stat-sep { height: 1.8rem; }
}
/* END_SECTION:onix-home-hero */

/* START_SECTION:onix-home-promo-banner (INDEX:17) */
.onix-promo-banner {
    position: relative;
    overflow: hidden;
    background: #050505;
    border-radius: 1.25rem;
    margin: clamp(2rem, 4vw, 3rem) 1.25rem;
    width: calc(100% - 2.5rem);
  }

  .onix-promo-banner__slides {
    display: grid;
    width: 100%;
  }

  .onix-promo-banner__slide {
    grid-area: 1 / 1;
    opacity: 0;
    transition: opacity 700ms ease;
    pointer-events: none;
    min-height: 0;
    display: grid;
    grid-template-columns: 1fr;
  }

  .onix-promo-banner__slide.is-active {
    opacity: 1;
    pointer-events: auto;
  }

  .onix-promo-banner__card {
    position: relative;
    overflow: hidden;
    border-radius: 1.25rem;
  }

  .onix-promo-banner__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    aspect-ratio: 3/4;
  }

  @media (min-width: 750px) and (max-width: 999px) {
    .onix-promo-banner__img {
      aspect-ratio: 16/7;
    }
  }

  .onix-promo-banner__img--placeholder {
    background: #1a1a1a;
    aspect-ratio: 3/4;
  }

  .onix-promo-banner__link {
    position: absolute;
    inset: 0;
    z-index: 1;
  }

  .onix-promo-banner__overlay {
    position: absolute;
    inset: 0;
    z-index: 2;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: stretch;
    padding: 0 1.5rem 1.5rem;
    background: linear-gradient(to top, rgba(0,0,0,0.7) 0%, rgba(0,0,0,0.1) 55%, transparent 100%);
  }

  @media (min-width: 750px) {
    .onix-promo-banner__overlay {
      padding: 0 2.5rem 2.5rem;
    }
  }

  .onix-promo-banner__text {
    margin-bottom: 1.25rem;
  }

  .onix-promo-banner__eyebrow {
    margin: 0 0 0.4rem;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.8);
  }

  .onix-promo-banner__title {
    margin: 0;
    font-size: clamp(1.8rem, 5vw, 3.2rem);
    font-weight: 800;
    letter-spacing: -0.01em;
    color: #ffffff;
    line-height: 1.05;
  }

  .onix-promo-banner__btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 0.9rem 2rem;
    background: rgba(0, 200, 255, 0.08);
    color: #a5e9ff;
    border: 1.5px solid rgba(0, 200, 255, 0.85);
    font-size: 0.95rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    text-decoration: none;
    border-radius: 999px;
    z-index: 3;
    position: relative;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    box-shadow:
      0 0 0 1px rgba(0, 200, 255, 0.2),
      0 0 18px rgba(0, 200, 255, 0.45),
      0 0 36px rgba(0, 200, 255, 0.25),
      inset 0 0 12px rgba(0, 200, 255, 0.12);
    transition: background 280ms ease, transform 280ms ease, box-shadow 280ms ease, color 280ms ease;
  }

  .onix-promo-banner__btn:hover {
    background: rgba(0, 200, 255, 0.18);
    color: #ffffff;
    transform: translateY(-1px);
    box-shadow:
      0 0 0 1px rgba(0, 200, 255, 0.35),
      0 0 28px rgba(0, 200, 255, 0.7),
      0 0 56px rgba(0, 200, 255, 0.4),
      inset 0 0 16px rgba(0, 200, 255, 0.2);
  }

  /* ── Grille produits : cachée en mobile/tablette, visible en desktop ≥1000px ── */
  .onix-promo-banner__grid {
    display: none;
  }

  /* ── Dots ── */
  .onix-promo-banner__dots {
    position: absolute;
    bottom: 1rem;
    left: 50%;
    transform: translateX(-50%);
    z-index: 10;
    display: flex;
    gap: 0.5rem;
  }

  .onix-promo-banner__dot {
    width: 0.45rem;
    height: 0.45rem;
    border-radius: 999px;
    border: none;
    background: rgba(255,255,255,0.4);
    cursor: pointer;
    padding: 0;
    transition: background 200ms ease, width 200ms ease;
  }

  .onix-promo-banner__dot.is-active {
    background: #00c8ff;
    width: 1.2rem;
  }

  /* ── DESKTOP : split 50/50 ── */
  @media (min-width: 1000px) {
    .onix-promo-banner {
      background: transparent;
      padding: 0;
    }

    .onix-promo-banner__slide {
      grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
      gap: 1.25rem;
      align-items: stretch;
    }

    /* La hauteur du slide = hauteur naturelle de la grille (cartes 3/4).
       La carte hero gauche s'étire pour matcher via align-items:stretch. */
    .onix-promo-banner__card {
      position: relative;
      height: 100%;
      min-height: 0;
      border-radius: 1.25rem;
      overflow: hidden;
      background: #050505;
    }

    .onix-promo-banner__img {
      aspect-ratio: auto;
      height: 100%;
      width: 100%;
      min-height: 0;
      object-fit: cover;
    }

    .onix-promo-banner__title {
      font-size: clamp(2rem, 2.6vw, 2.8rem);
    }

    /* Flex (pas grid) : 4 cartes/ligne, et la dernière ligne incomplète
       (ex. OM = 15 → ligne de 3) est CENTRÉE par justify-content:center.
       Plus aucun trou à droite. */
    .onix-promo-banner__grid {
      --grid-gap: 0.85rem;
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      align-content: flex-start;
      gap: var(--grid-gap);
    }

    /* Largeur d'une carte = (100% - 3 gaps) / 4 → exactement 4 par ligne.
       Le calc utilise --grid-gap pour rester correct si le gap change. */
    .onix-promo-banner__grid .onix-promo-pcard {
      flex: 0 0 calc((100% - 3 * var(--grid-gap)) / 4);
      max-width: calc((100% - 3 * var(--grid-gap)) / 4);
      align-self: flex-start;
    }

    .onix-promo-banner__dots {
      bottom: 1.25rem;
      left: 25%;
    }
  }

  @media (min-width: 1280px) {
    .onix-promo-banner__slide {
      gap: 1.5rem;
    }

    .onix-promo-banner__grid {
      --grid-gap: 1rem;
    }
  }
/* END_SECTION:onix-home-promo-banner */

/* START_SECTION:onix-home-promo-card (INDEX:18) */
.onix-promo-card {
    padding: clamp(2rem, 4vw, 3rem) 1.25rem clamp(2rem, 4vw, 3rem);
  }

  .onix-promo-card__layout {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.25rem;
    width: 100%;
  }

  .onix-promo-card__inner {
    position: relative;
    border-radius: 1.5rem;
    overflow: hidden;
    background: linear-gradient(160deg, #0b1a3a 0%, #0d2060 40%, #1a0a4a 100%);
    min-height: 560px;
    display: flex;
    align-items: flex-start;
  }

  .onix-promo-card__bg {
    position: absolute;
    inset: 0;
    z-index: 0;
  }

  .onix-promo-card__bg-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
    display: block;
  }

  .onix-promo-card__overlay {
    display: none;
  }

  .onix-promo-card__content {
    position: relative;
    z-index: 2;
    padding: 2.2rem 1.8rem 2.5rem;
    max-width: 480px;
  }

  .onix-promo-card__logo {
    margin: 0 0 1.2rem;
    font-size: 0.65rem;
    font-weight: 900;
    letter-spacing: 0.35em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.75);
    border: 1px solid rgba(255, 255, 255, 0.35);
    display: inline-block;
    padding: 0.3rem 0.7rem;
    border-radius: 4px;
  }

  .onix-promo-card__title {
    margin: 0 0 0.6rem;
    font-size: clamp(1.6rem, 6vw, 2.4rem);
    font-weight: 900;
    text-transform: uppercase;
    color: #ffffff;
    line-height: 1.08;
    letter-spacing: -0.01em;
  }

  .onix-promo-card__subtitle {
    margin: 0 0 2rem;
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: rgba(255, 255, 255, 0.7);
    font-style: italic;
  }

  .onix-promo-card__features {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 1.1rem;
  }

  .onix-promo-card__feature {
    display: flex;
    align-items: center;
    gap: 1rem;
  }

  .onix-promo-card__feature-icon {
    font-size: 1.5rem;
    line-height: 1;
    flex-shrink: 0;
    width: 2.2rem;
    text-align: center;
  }

  .onix-promo-card__feature-text {
    font-size: 0.82rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: #ffffff;
    line-height: 1.3;
  }

  /* ── Grille produits : cachée en mobile/tablette ── */
  .onix-promo-card__grid {
    display: none;
  }

  @media (min-width: 750px) {
    .onix-promo-card__inner {
      min-height: 440px;
      align-items: center;
    }

    .onix-promo-card__bg-img {
      object-position: center center;
    }

    .onix-promo-card__content {
      padding: 3rem 3rem 3rem 3.5rem;
      max-width: 560px;
    }

    .onix-promo-card__title {
      font-size: clamp(1.8rem, 3vw, 2.8rem);
    }
  }

  /* ── DESKTOP : split 50/50 ── */
  @media (min-width: 1000px) {
    .onix-promo-card__layout {
      grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
      gap: 1.25rem;
      align-items: stretch;
    }

    .onix-promo-card__inner {
      height: 100%;
      min-height: 0;
    }

    .onix-promo-card__content {
      max-width: none;
      padding: 2.5rem 2.5rem 2.5rem 2.8rem;
    }

    /* Flex (pas grid) : 4 cartes/ligne, dernière ligne incomplète CENTRÉE
       via justify-content:center → pas de trou à droite. */
    .onix-promo-card__grid {
      --grid-gap: 0.85rem;
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      align-content: flex-start;
      gap: var(--grid-gap);
    }

    /* Largeur carte = (100% - 3 gaps) / 4 → exactement 4 par ligne. */
    .onix-promo-card__grid .onix-promo-pcard {
      flex: 0 0 calc((100% - 3 * var(--grid-gap)) / 4);
      max-width: calc((100% - 3 * var(--grid-gap)) / 4);
      align-self: flex-start;
    }
  }

  @media (min-width: 1280px) {
    .onix-promo-card__layout {
      gap: 1.5rem;
    }

    .onix-promo-card__grid {
      --grid-gap: 1rem;
    }
  }
/* END_SECTION:onix-home-promo-card */

/* START_SECTION:onix-home-shipping-proof (INDEX:19) */
.osp-sec {
    position: relative;
    z-index: 1;
    padding: 64px 18px 72px;
    /* Fond cosmos profond — 3 couches : sphère galactique centrale,
       gradient diagonal pour profondeur, base noire profonde */
    background:
      radial-gradient(ellipse 70% 50% at 50% 30%, #0e2f55 0%, #061a36 45%, transparent 75%),
      radial-gradient(ellipse 90% 60% at 20% 100%, #1a0c3a 0%, transparent 60%),
      radial-gradient(ellipse 90% 60% at 80% 100%, #0a1845 0%, transparent 60%),
      linear-gradient(180deg, #03061a 0%, #010210 100%);
    color: #ffffff;
    font-family: -apple-system, BlinkMacSystemFont, "Inter", "Segoe UI", sans-serif;
    overflow: hidden;
    isolation: isolate;
  }

  /* ─── Nébuleuses (nuages de gaz cosmiques) ─── */
  .osp-nebulas {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    overflow: hidden;
  }
  .osp-nebula {
    position: absolute;
    border-radius: 50%;
    filter: blur(60px);
    opacity: 0.55;
    mix-blend-mode: screen;
  }
  .osp-nebula--cyan {
    top: 8%; left: -8%;
    width: 480px; height: 480px;
    background: radial-gradient(circle at 35% 35%,
      rgba(0, 200, 255, 0.45) 0%,
      rgba(0, 120, 200, 0.22) 45%,
      transparent 70%);
    animation: ospNebulaDrift1 22s ease-in-out infinite alternate;
  }
  .osp-nebula--violet {
    bottom: -10%; right: -6%;
    width: 560px; height: 560px;
    background: radial-gradient(circle at 60% 50%,
      rgba(120, 80, 220, 0.42) 0%,
      rgba(80, 40, 180, 0.20) 50%,
      transparent 75%);
    animation: ospNebulaDrift2 28s ease-in-out infinite alternate;
  }
  .osp-nebula--rose {
    top: 35%; right: 15%;
    width: 320px; height: 320px;
    background: radial-gradient(circle at 50% 50%,
      rgba(255, 92, 138, 0.28) 0%,
      rgba(200, 60, 120, 0.12) 50%,
      transparent 75%);
    animation: ospNebulaDrift3 24s ease-in-out infinite alternate;
  }
  @keyframes ospNebulaDrift1 {
    0% { transform: translate(0, 0) scale(1); }
    100% { transform: translate(40px, 30px) scale(1.1); }
  }
  @keyframes ospNebulaDrift2 {
    0% { transform: translate(0, 0) scale(1); }
    100% { transform: translate(-50px, -30px) scale(1.08); }
  }
  @keyframes ospNebulaDrift3 {
    0% { transform: translate(0, 0) scale(0.95); opacity: 0.4; }
    100% { transform: translate(30px, -20px) scale(1.05); opacity: 0.6; }
  }

  /* ─── Étoiles (3 couches : micro / mid / big) ─── */
  .osp-stars { position: absolute; inset: 0; pointer-events: none; z-index: 1; }
  .osp-star {
    position: absolute;
    border-radius: 50%;
    animation: ospStarTwinkle 4.5s ease-in-out infinite;
    will-change: opacity;
  }
  /* Micro — 1px très subtiles (couche profonde) */
  .osp-star--micro {
    width: 1px; height: 1px;
    background: rgba(255, 255, 255, 0.55);
  }
  /* Mid — 1.5-2px (couche moyenne) */
  .osp-star--mid {
    width: 1.5px; height: 1.5px;
    background: rgba(255, 255, 255, 0.75);
  }
  /* Big — 3-4px avec halo lumineux (couche proche) */
  .osp-star--big {
    width: 3px; height: 3px;
    background: rgba(255, 255, 255, 0.95);
    box-shadow:
      0 0 4px rgba(255, 255, 255, 0.8),
      0 0 8px rgba(165, 233, 255, 0.5),
      0 0 16px rgba(0, 200, 255, 0.25);
    animation: ospStarTwinkleBig 5.5s ease-in-out infinite;
  }
  /* Variantes de teintes (rotation cyan/blanc/légèrement bleuté/rosé) */
  .osp-star--t0 { background: rgba(255, 255, 255, 0.7); }
  .osp-star--t1 { background: rgba(200, 240, 255, 0.6); }
  .osp-star--t2 { background: rgba(180, 200, 255, 0.55); }
  .osp-star--t3 { background: rgba(255, 220, 230, 0.5); }
  .osp-star--t4 { background: rgba(165, 233, 255, 0.65); }

  @keyframes ospStarTwinkle {
    0%, 100% { opacity: 0.25; transform: scale(1); }
    50%      { opacity: 1; transform: scale(1.2); }
  }
  @keyframes ospStarTwinkleBig {
    0%, 100% { opacity: 0.6; transform: scale(0.9); }
    40%      { opacity: 1; transform: scale(1.15); }
    70%      { opacity: 0.85; transform: scale(1.05); }
  }

  /* ─── Étoiles filantes (4 différentes) ─── */
  .osp-shooting { position: absolute; inset: 0; pointer-events: none; overflow: hidden; z-index: 2; }
  .osp-shooting-star {
    position: absolute;
    width: 80px; height: 1.5px;
    background: linear-gradient(90deg,
      rgba(255, 255, 255, 0),
      rgba(255, 255, 255, 0.95) 60%,
      rgba(165, 233, 255, 0.95) 100%);
    border-radius: 999px;
    opacity: 0;
    filter: drop-shadow(0 0 4px rgba(165, 233, 255, 0.6));
  }
  .osp-shooting-star--short {
    top: 12%; left: -10%;
    width: 50px; height: 1px;
    transform: rotate(18deg);
    animation: ospShootShort 11s ease-in infinite;
    animation-delay: 1.2s;
  }
  .osp-shooting-star--mid {
    top: 28%; left: -10%;
    width: 90px;
    transform: rotate(15deg);
    animation: ospShootMid 14s ease-in infinite;
    animation-delay: 5.0s;
  }
  .osp-shooting-star--burnout {
    top: 52%; left: -10%;
    width: 110px; height: 2px;
    transform: rotate(22deg);
    background: linear-gradient(90deg,
      rgba(255, 255, 255, 0),
      rgba(255, 200, 120, 0.95) 50%,
      rgba(255, 92, 138, 0.85) 100%);
    filter: drop-shadow(0 0 5px rgba(255, 150, 100, 0.7));
    animation: ospShootLong 18s ease-in infinite;
    animation-delay: 9s;
  }
  .osp-shooting-star--cyan {
    top: 72%; left: -10%;
    width: 70px;
    transform: rotate(12deg);
    background: linear-gradient(90deg,
      rgba(0, 200, 255, 0),
      rgba(0, 200, 255, 0.95) 60%,
      rgba(255, 255, 255, 0.95) 100%);
    filter: drop-shadow(0 0 6px rgba(0, 200, 255, 0.7));
    animation: ospShootMid 12s ease-in infinite;
    animation-delay: 14s;
  }
  @keyframes ospShootShort {
    0%, 100% { transform: translate(0, 0) rotate(18deg); opacity: 0; }
    1%       { opacity: 0; }
    3%       { opacity: 1; }
    14%      { opacity: 1; }
    22%      { transform: translate(60vw, calc(60vw * 0.32)) rotate(18deg); opacity: 0; }
  }
  @keyframes ospShootMid {
    0%, 100% { transform: translate(0, 0) rotate(15deg); opacity: 0; }
    1%       { opacity: 0; }
    3%       { opacity: 1; }
    16%      { opacity: 1; }
    25%      { transform: translate(calc(100vw + 200px), calc(100vw * 0.28)) rotate(15deg); opacity: 0; }
  }
  @keyframes ospShootLong {
    0%, 100% { transform: translate(0, 0) rotate(22deg); opacity: 0; }
    1%       { opacity: 0; }
    2%       { opacity: 1; }
    20%      { opacity: 1; }
    30%      { transform: translate(calc(110vw + 200px), calc(110vw * 0.4)) rotate(22deg); opacity: 0; }
  }

  @media (prefers-reduced-motion: reduce) {
    .osp-star, .osp-nebula, .osp-shooting-star { animation: none !important; }
  }

  .osp-inner {
    position: relative;
    z-index: 1;
    max-width: 680px;
    margin: 0 auto;
    text-align: center;
  }

  /* Tag pillule */
  .osp-tag {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 5px 11px 5px 9px;
    background: rgba(0,200,255,0.10);
    border: 1px solid rgba(0,200,255,0.35);
    border-radius: 999px;
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: rgba(165,233,255,0.95);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    margin-bottom: 18px;
  }
  .osp-pulse {
    width: 6px; height: 6px;
    background: #00c8ff;
    border-radius: 50%;
    box-shadow: 0 0 10px #00c8ff;
    flex-shrink: 0;
    animation: ospPulse 1.6s ease-in-out infinite;
  }
  @keyframes ospPulse { 0%,100%{ opacity: 1; transform: scale(1); } 50%{ opacity: 0.6; transform: scale(0.85); } }

  /* Titre */
  .osp-title {
    font-size: clamp(26px, 4.2vw, 44px);
    font-weight: 800;
    line-height: 1.05;
    letter-spacing: -0.02em;
    margin: 0 0 12px;
    text-transform: uppercase;
  }
  .osp-title span {
    display: block;
    background: linear-gradient(180deg, #ffffff 30%, rgba(255,255,255,0.7));
    -webkit-background-clip: text;
            background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
  }
  .osp-title b {
    display: block;
    background: linear-gradient(135deg, #00c8ff 0%, #a5e9ff 100%);
    -webkit-background-clip: text;
            background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    font-weight: 800;
  }

  .osp-desc {
    max-width: 560px;
    margin: 0 auto 28px;
    font-size: 14.5px;
    line-height: 1.55;
    color: rgba(255,255,255,0.75);
  }

  /* ─── Layout : column mobile, row desktop ─── */
  .osp-layout {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 22px;
    margin: 0 auto 22px;
  }

  /* Globe (gauche) */
  .osp-globe-col {
    display: block;
    flex-shrink: 0;
  }
  .osp-globe-wrap {
    position: relative;
    width: 180px;
    height: 180px;
    margin: 0 auto;
    isolation: isolate;
  }
  .osp-globe-canvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    filter: drop-shadow(0 18px 36px rgba(0, 80, 130, 0.55));
  }

  /* Plus au centre */
  .osp-plus {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: #ffffff;
    filter:
      drop-shadow(0 0 4px rgba(255,255,255,0.95))
      drop-shadow(0 0 10px rgba(0,200,255,0.6))
      drop-shadow(0 0 22px rgba(0,200,255,0.5));
    animation: ospPlusPulse 2.6s ease-in-out infinite;
  }
  .osp-plus svg { width: 26px; height: 26px; }
  @keyframes ospPlusPulse { 0%,100%{ opacity: 0.95; } 50%{ opacity: 1; transform: scale(1.08); } }

  /* Éventail photos */
  .osp-photos-col {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    gap: 10px;
    justify-content: center;
    align-items: flex-start;
    width: 100%;
  }
  .osp-photo {
    position: relative;
    margin: 0;
    width: 110px;
    max-width: 110px;
    flex: 0 0 110px;
    aspect-ratio: 3 / 4;
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,0.18);
    background: rgba(0,200,255,0.05);
    transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.45s ease;
  }
  .osp-photo:nth-child(1) {
    transform: rotate(-7deg) translateY(8px);
    z-index: 1;
    margin-right: -22px;
    box-shadow: 0 12px 30px rgba(0,0,0,0.55);
  }
  .osp-photo:nth-child(2) {
    transform: translateY(-4px);
    z-index: 3;
    box-shadow:
      0 0 40px rgba(0, 200, 255, 0.5),
      0 0 90px rgba(165, 233, 255, 0.45),
      0 22px 48px rgba(0,0,0,0.6);
    border-color: rgba(0,200,255,0.5);
  }
  .osp-photo:nth-child(3) {
    transform: rotate(7deg) translateY(8px);
    z-index: 1;
    margin-left: -22px;
    box-shadow: 0 12px 30px rgba(0,0,0,0.55);
  }
  .osp-photo:nth-child(1):hover { transform: rotate(-3deg) translateY(0); }
  .osp-photo:nth-child(2):hover { transform: translateY(-8px); }
  .osp-photo:nth-child(3):hover { transform: rotate(3deg) translateY(0); }
  .osp-photo-img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
  }
  .osp-photo-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%; height: 100%;
    font-size: 38px;
    opacity: 0.3;
  }

  /* Bottom bar */
  .osp-bottom {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 10px 18px;
    background: rgba(0,200,255,0.06);
    border: 1px solid rgba(0,200,255,0.22);
    border-radius: 999px;
    font-size: 12px;
    color: rgba(255,255,255,0.85);
    margin-top: 8px;
  }
  .osp-bottom strong { color: #00c8ff; font-weight: 700; }
  .osp-bottom-divider {
    width: 4px; height: 4px;
    border-radius: 50%;
    background: rgba(0,200,255,0.5);
  }

  /* CTA "Suivre ma commande" — wrapper full-width pour bouton centré sous le bottom-bar */
  .osp-cta-wrap {
    display: flex;
    justify-content: center;
    width: 100%;
    margin-top: 18px;
  }
  .osp-cta {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 14px 28px;
    /* Glass effect : fond ultra-transparent + contour cyan fluo */
    background: rgba(0, 200, 255, 0.08);
    color: #a5e9ff;
    border: 1.5px solid rgba(0, 200, 255, 0.85);
    border-radius: 999px;
    text-decoration: none;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    /* Halo fluo extérieur + intérieur subtil */
    box-shadow:
      0 0 0 1px rgba(0, 200, 255, 0.2),
      0 0 18px rgba(0, 200, 255, 0.45),
      0 0 36px rgba(0, 200, 255, 0.25),
      inset 0 0 12px rgba(0, 200, 255, 0.12);
    transition: transform 0.25s ease, box-shadow 0.3s ease, background 0.3s ease, color 0.3s ease;
  }
  .osp-cta:hover {
    transform: translateY(-2px);
    background: rgba(0, 200, 255, 0.18);
    color: #ffffff;
    box-shadow:
      0 0 0 1px rgba(0, 200, 255, 0.35),
      0 0 28px rgba(0, 200, 255, 0.7),
      0 0 56px rgba(0, 200, 255, 0.4),
      inset 0 0 16px rgba(0, 200, 255, 0.2);
  }
  .osp-cta svg { width: 18px; height: 18px; }

  /* ─── Desktop ≥ 880px : layout row ─── */
  @media (min-width: 880px) {
    .osp-sec { padding: 88px 24px 96px; }
    .osp-desc { margin-bottom: 40px; font-size: 16px; max-width: 620px; }
    .osp-inner { max-width: 980px; }

    .osp-layout {
      flex-direction: row;
      justify-content: center;
      align-items: center;
      gap: 22px;
    }
    .osp-globe-col { margin-bottom: 0; }
    .osp-globe-wrap { width: 380px; height: 380px; }
    .osp-photos-col { width: auto; gap: 14px; }
    .osp-photo {
      width: 170px;
      max-width: 170px;
      flex: 0 0 170px;
    }
    .osp-photo:nth-child(1) { margin-right: -22px; }
    .osp-photo:nth-child(3) { margin-left: -22px; }
    .osp-plus svg { width: 32px; height: 32px; }
  }
/* END_SECTION:onix-home-shipping-proof */

/* START_SECTION:onix-home-top3 (INDEX:20) */
.onix-top3 {
    --onix-pcard-price: #ffffff;
    --onix-pcard-compare: rgba(255, 255, 255, 0.42);
    position: relative;
    width: 100%;
    /* 1re section de la home : le header (position:absolute) se pose par-dessus
       -> on degage la marge HAUTE pour que les cartes ne passent jamais dessous.

       ⚠️ 136px, ET PAS 91. Le 91 datait du bandeau sur une seule ligne. Depuis le
       12/08 il en fait deux et l'en-tete mesure 120px : la section ne bougeant
       PAS quand le bandeau grandit, chaque pixel gagne en haut etait pris sur
       l'espace au-dessus des maillots. Mesure au moment du changement : la
       medaille passait 21px AU-DESSUS du bas du menu, donc sous le menu.

       ⚠️ ET PAS 120 NON PLUS. Les medailles debordent de 8px vers le haut de leur
       emplacement — ce sont elles qui touchent en premier, pas les cartes. Il
       faut donc hauteur du menu (120) + jeu voulu (24) + debord (8) - la
       respiration du clamp (16 sur mobile) = 136.

       Si le bandeau change encore de hauteur, cette valeur est a RE-MESURER :
       jeu = medaille.top - menu.bottom, cible 24. */
    /* ⚠️ BAS RESSERRÉ. La bande vidéo suit désormais immédiatement — dans la
       planche elle était insérée DANS cette section, juste sous le podium. Avec
       les 52 px d'origine plus le padding de la bande, il restait 90 px de vide
       entre les socles et le titre manuscrit : les deux blocs ne lisaient plus
       comme un seul. */
    padding: calc(136px + clamp(1rem, 3vw, 1.75rem)) 1.25rem clamp(1rem, 2.5vw, 1.75rem);
    background:
      radial-gradient(ellipse 55% 42% at 50% 30%, rgba(0, 200, 255, 0.14) 0%, transparent 65%),
      linear-gradient(180deg, #0b1220 0%, #070b14 100%);
    overflow: hidden;
  }
  .onix-top3__inner {
    position: relative;   /* au-dessus des vagues */
    z-index: 1;
    max-width: 68rem;
    margin-inline: auto;
  }

  /* Les raccords en vague portent leur propre CSS (snippet onix-section-wave). */

  /* ── bouton « voir tous les maillots », intégré à la section ──
     Repris de l'ancienne bande onix-home-all-jerseys-cta (supprimée de la
     page) : même cyan marque, même forme, mais posé sur le fond nuit. */
  .onix-top3__cta-wrap {
    margin-top: clamp(2.25rem, 4.5vw, 3.25rem);
    text-align: center;
  }
  .onix-top3__cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-inline: auto;
    max-width: 100%;
    min-height: 2.8rem;
    padding: 0.75rem 2.4rem;
    border: none;
    border-radius: 999px;
    background: #00c8ff;
    color: #0a0a0a;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    text-decoration: none;
    cursor: pointer;
    transition: filter 200ms ease, box-shadow 200ms ease, transform 180ms ease;
    -webkit-tap-highlight-color: transparent;
  }
  .onix-top3__cta:hover,
  .onix-top3__cta:focus-visible,
  .onix-top3__cta:active {
    filter: brightness(1.08);
    box-shadow: 0 0 18px rgba(0, 200, 255, 0.35);
    transform: translateY(-2px);
  }
  @media (prefers-reduced-motion: reduce) {
    .onix-top3__cta { transition: none; }
  }

  /* ── escalier 1→4, une seule ligne (DOM = visuel) ── */
  .onix-top3__proof {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    margin: 0 0 1.3rem;
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.65);
    text-align: center;
  }
  .onix-top3__proof-stars {
    color: #00c8ff;
    letter-spacing: 0.14em;
    font-size: 0.82rem;
    text-shadow: 0 0 12px rgba(0, 200, 255, 0.5);
  }

  .onix-top3__podium {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: clamp(0.5rem, 1.8vw, 1.4rem);
    align-items: end;
  }
  .onix-top3__slot { position: relative; min-width: 0; }
  .onix-top3__slot--r1 { z-index: 2; }

  /* halo doux derrière le n°1 */
  .onix-top3__slot--r1::before {
    content: "";
    position: absolute;
    inset: -12% -18% 0;
    background: radial-gradient(ellipse 60% 45% at 50% 38%, rgba(0, 200, 255, 0.22) 0%, transparent 70%);
    pointer-events: none;
    z-index: 0;
  }
  .onix-top3__card { position: relative; z-index: 1; }

  /* ── médailles ── */
  .onix-top3__medal {
    position: absolute;
    top: -9px;
    left: -6px;
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: center;
    /* 32 px, pas 46 — 22/08 : « ils sont gros pour rien alors que c'est pas une
       info de fou ». Le rang se lit une fois ; il ne se crie pas trois fois
       (médaille + ruban + socle). Le chiffre du socle est parti le même jour. */
    width: 32px;
    height: 32px;
    border-radius: 50%;
    font-size: 0.82rem;
    font-weight: 800;
    color: #1a1205;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.55);
    border: 1.5px solid rgba(255, 255, 255, 0.28);
  }
  .onix-top3__medal--r1 { background: linear-gradient(145deg, #ffe9a3 0%, #f6c945 45%, #d19a12 100%); }
  .onix-top3__medal--r2 { background: linear-gradient(145deg, #f4f4f8 0%, #cfd2dc 45%, #969aa8 100%); color: #23262e; }
  .onix-top3__medal--r3 { background: linear-gradient(145deg, #f0bd8f 0%, #cd8d55 45%, #925c2a 100%); color: #2b1706; }
  .onix-top3__medal--r4 { background: linear-gradient(145deg, #9fb4c8 0%, #5f7690 45%, #34455a 100%); color: #eef4fa; }

  /* ── ruban n°1 ── */
  .onix-top3__crown {
    position: absolute;
    top: -13px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 3;
    white-space: nowrap;
    padding: 0.32rem 0.85rem;
    border-radius: 999px;
    background: #00c8ff;
    color: #04121a;
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    box-shadow: 0 6px 20px rgba(0, 200, 255, 0.45);
  }

  /* ── socles ── */
  .onix-top3__base {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 0.85rem;
    border-radius: 12px 12px 0 0;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.09) 0%, rgba(255, 255, 255, 0.02) 100%);
    border: 1px solid rgba(255, 255, 255, 0.10);
    border-bottom: none;
  }
  .onix-top3__base--r1 { height: 88px; border-color: rgba(0, 200, 255, 0.35); background: linear-gradient(180deg, rgba(0, 200, 255, 0.16) 0%, rgba(0, 200, 255, 0.02) 100%); }
  .onix-top3__base--r2 { height: 64px; }
  .onix-top3__base--r3 { height: 46px; }
  .onix-top3__base--r4 { height: 30px; }

  /* Cartes sur fond nuit. critical.css pose des règles globales `body .onix-collection-card*`
     (spécificité 0-1-1 : fond blanc sur l'article, couleur var(--c-fg) sur le prix) qui battent
     le snippet — on les rebat avec 0-2-0, scopé à cette section uniquement. */
  .onix-top3 .onix-collection-card { background: transparent; }
  .onix-top3 .onix-collection-card__price { color: #ffffff; }
  .onix-top3 .onix-collection-card__compare { color: rgba(255, 255, 255, 0.42); }

  /* ── mobile : LES 4 SUR LA MÊME LIGNE (demande explicite) — tout se
     compacte : médailles, ruban, socles, prix (barré masqué < 480px). ── */
  @media (max-width: 767px) {
    .onix-top3 { padding-left: 0.6rem; padding-right: 0.6rem; }
    .onix-top3__podium { gap: 0.4rem; }
    .onix-top3__base { margin-top: 0.5rem; border-radius: 8px 8px 0 0; }
    .onix-top3__base--r1 { height: 44px; }
    .onix-top3__base--r2 { height: 33px; }
    .onix-top3__base--r3 { height: 24px; }
    .onix-top3__base--r4 { height: 16px; }
    .onix-top3__medal { width: 20px; height: 20px; font-size: 0.58rem; top: -6px; left: -3px; border-width: 1px; }
    .onix-top3__crown { top: -10px; font-size: 0.5rem; padding: 0.22rem 0.5rem; letter-spacing: 0.08em; }
    /* prix compacts pour tenir dans ~80px de colonne */
    .onix-top3 .onix-collection-card__meta { font-size: 12px; gap: 3px; padding-top: 5px; }
    /* à ~84px de large : cartes ÉPURÉES — image + médaille + prix. Le titre
       tronqué (« Fra… Mail… »), le bouton + et le cœur surchargent ; le ruban
       n°1 déborde de sa colonne → la médaille or porte l'info. */
    .onix-top3 .onix-collection-card__overlay,
    .onix-top3 .onix-collection-card__add,
    .onix-top3 .onix-collection-card__compare,
    .onix-top3 .onix-fav,
    .onix-top3__crown { display: none; }
  }
  /* ══════════════════════════════════════════════════════════════════════
     LA BANDE COMPARATEUR — 2ᵉ écriture, 22/08 à 16h.

     Sa remarque sur la 1ʳᵉ : « ça passe archi mal, ça s'incruste pas, c'est pas
     un design natif qui s'implémente dans l'apparence actuelle du site. »

     ⚠️ DEUX CAUSES, ET LA PREMIÈRE EXPLIQUE PRESQUE TOUT.

     1. TOUTES MES DÉCLARATIONS DE TYPO ÉTAIENT JETÉES. J'écrivais
        `font: 800 1.15rem/1 inherit`. `inherit` N'EST PAS une famille valide
        dans le raccourci `font` : la déclaration entière est invalide et le
        navigateur la supprime — vérifié, `el.style.fontSize` rend une chaîne
        VIDE. Mon prix sortait donc à 16 px / 700 (le défaut de `<b>`) au lieu
        de 18,4 px / 800. Rien de ce que j'avais dessiné n'était appliqué.
        ➜ Plus jamais de raccourci `font` ici : propriétés séparées.

     2. LE LANGAGE DE LA SECTION EST L'INVERSE DE CE QUE J'AVAIS FAIT.
        Relevé sur `.onix-top3__proof`, la ligne juste au-dessus :
          centré · aucun fond · aucune bordure · 12,8 px · rgba(255,255,255,.65)
          marge basse 20,8 px · accent #00c8ff · Work Sans hérité
        J'avais fait : aligné à gauche, dégradé bleu, filet en bas, capitales
        espacées. Cinq écarts sur cinq. Une bande qui ne partage aucun trait avec
        sa voisine se lit comme un bloc rapporté, quelle que soit sa qualité.
     ══════════════════════════════════════════════════════════════════════ */

  /* ── la bande reprend la structure de .onix-top3__proof : une colonne
        centrée, rien autour. Elle en devient le prolongement, pas un voisin. */
  .onix-t3cmp {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.45rem;
    /* ⚠️ MARGE EN HAUT, PAS EN BAS — la bande est passée SOUS le podium le
       22/08. Les socles de l'escalier n'ont pas de bordure basse et sont
       arrondis en haut seulement : ils sont dessinés pour sortir d'un sol.
       Sans cet écart, la bande DEVIENT ce sol et les quatre socles ont l'air
       posés dessus par accident (mesuré : 0 px entre les deux). */
    margin: 1.5rem 0 0;
    text-align: center;
  }

  /* la phrase, exactement au poids de la ligne de preuves */
  .onix-t3cmp__dit {
    display: flex;
    align-items: baseline;
    justify-content: center;
    flex-wrap: wrap;
    gap: 0 0.35em;
    margin: 0;
    font-size: 0.72rem;
    line-height: 1.35;
    color: #ffffffa6;
  }
  .onix-t3cmp__prix { color: #00c8ff; font-weight: 600; }
  .onix-t3cmp__eco  { color: #fff;    font-weight: 600; }

  /* les cinq logos : une rangée centrée, sans pastille dessinée.
     ⚠️ PAS DE CERCLE DE FOND. Le thème ne dessine aucun conteneur autour de
        quoi que ce soit dans cette section — ni la ligne de preuves, ni les
        cartes maillot qui portent leur propre ombre. Cinq disques gris
        alignés étaient le détail le plus étranger de la première version. */
  .onix-t3cmp__rivals {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 0.3rem 0.95rem;
  }
  .onix-t3cmp__rival {
    display: inline-flex;
    align-items: center;
    gap: 0.4em;
  }
  .onix-t3cmp__chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 17px;
  }
  .onix-t3cmp__img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    display: block;
    /* ⚠️ LES LOGOS SONT DE MARQUES DIFFÉRENTES, donc de couleurs différentes.
       En couleur ils font autant de taches qui tirent l'œil avant les maillots,
       juste dessous. En clair à 55 % ils restent reconnaissables et redeviennent
       ce qu'ils sont : une preuve, pas une décoration.

       ⚠️ CE N'EST PAS `grayscale(1) brightness(1.9)` — 22/08. brightness() est
         MULTIPLICATIF : un logo noir vaut 0, et 0 × 1,9 fait toujours 0. Deux
         des quatre logos sont des aplats noirs (FC90 : 100 % de pixels à
         luminance 0 ; Maison To Sport : 59 %) — ils étaient donc noirs sur bleu
         nuit, c'est-à-dire invisibles. Mesuré fichier par fichier.

       ⚠️ ET CE N'EST PAS NON PLUS `brightness(0) invert(1)`, la recette
         habituelle du « logo tout blanc ». Elle écrase chaque pixel opaque en
         blanc plein : parfait pour les trois logos d'un seul ton, destructeur
         pour l'écusson Mon Maillot Foot, qui a DEUX populations (48 % de sombre,
         47 % de clair) et devient un blob blanc sans couronne ni contour.

       ➜ CE QU'IL FAUT, C'EST REMONTER LE NOIR SANS ÉCRASER LE BLANC. La chaîne
         ci-dessous fait exactement ça, sans SVG ni filtre par logo :
           invert → brightness(0.2) → invert   ⟹   sortie = 204 + 0,2 × entrée
         soit noir → 204, blanc → 255. Les quatre arrivent au même poids, et
         l'écusson garde sa structure interne. Planche des trois candidats aux
         tailles réelles : scripts/planches/ (regénérable). */
    filter: grayscale(1) invert(1) brightness(0.2) invert(1);
    opacity: 0.55;
  }
  .onix-t3cmp__txt { font-size: 0.62rem; font-weight: 600; color: #ffffff8c; }
  .onix-t3cmp__barre {
    font-size: 0.66rem;
    color: #ffffff70;
    text-decoration: line-through;
    text-decoration-color: #ffffff45;
  }

  /* ⚠️ SUR MOBILE, LES CINQ TIENNENT SUR UNE SEULE LIGNE — et il faut y tenir.
     Au premier jet le 5ᵉ logo tombait SEUL sur une deuxième ligne, centré : une
     rangée de quatre puis un orphelin, ce qui se lit comme un défaut de mise en
     page et pas comme un choix. Le budget est de 356 px utiles : 5 vignettes de
     24 px + 5 prix à 0,58 rem + les écarts. Les valeurs ci-dessous sont calées
     dessus, elles ne se changent pas séparément. */
  @media (max-width: 767px) {
    .onix-t3cmp { gap: 0.35rem; margin-top: 1rem; margin-bottom: 0; }
    .onix-t3cmp__dit { font-size: 0.68rem; }
    .onix-t3cmp__rivals { flex-wrap: nowrap; gap: 0.42rem; }
    .onix-t3cmp__rival { gap: 0.24em; }
    .onix-t3cmp__chip { width: 21px; height: 13px; }
    .onix-t3cmp__barre { font-size: 0.52rem; }
  }
  /* très petits écrans : les prix partent, les logos restent — c'est eux qu'il
     a demandé de garder. */
  @media (max-width: 359px) {
    .onix-t3cmp__barre { display: none; }
    .onix-t3cmp__rivals { gap: 0.8rem; }
  }
/* END_SECTION:onix-home-top3 */

/* START_SECTION:onix-home-video-carousel (INDEX:21) */
/* ══════════════════════════════════════════════════════════════════════
     GRILLE DE QUATRE + TITRE MANUSCRIT — retenus le 12/08.
     ⚠️ Les `!important` visent les règles du DÉFILEMENT, qui posaient une
     largeur et une hauteur fixes sur chaque diapositive (--vc-reel-w/h) pour
     que la piste défile. Dans une grille, c'est la colonne qui donne la
     largeur : sans ces surcharges les quatre vidéos gardaient leurs 200 px et
     débordaient. Les réglages de la section restent en place pour que revenir
     au défilement ne coûte rien.
     ══════════════════════════════════════════════════════════════════════ */
  .onix-vcar__grille {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 6px;
    padding: 0 12px;
  }
  /* ⚠️ LE BLOC EST BORNÉ À 660 px SUR ORDINATEUR, et ce n'est pas un choix de
     goût. Quatre vignettes 9:16 qui remplissent 1 280 px donnent forcément
     538 px de haut : c'est la LARGEUR du bloc qui commande la hauteur, pas la
     taille du texte. Mesuré sans la borne — vignettes de 303×538, une seule
     vidéo occupant plus de la moitié d'un écran de portable. On borne donc la
     largeur d'abord et on met le titre au diapason ; l'inverse reviendrait à
     rétrécir les mots autour d'images qui, elles, ne bougent pas.
     Aucune de ces règles ne touche le mobile, où le bloc est déjà étroit. */
  @media (min-width: 760px) {
    .onix-vcar__grille { gap: 8px; max-width: 660px; margin-inline: auto; padding: 0; }
    {%- comment -%}
      ⚠️ DEUX SURCHARGES DE TITRE ONT ÉTÉ RETIRÉES D'ICI — 22/08.
        `.onix-vcar__titre { padding: 0; margin-top: 20px; }` et
        `.onix-vcar__titre span { font-size: 22px; }` N'ONT JAMAIS RIEN FAIT :
        les règles de base portant les MÊMES sélecteurs et les MÊMES propriétés
        sont écrites PLUS BAS dans cette feuille. À spécificité égale, c'est la
        dernière qui gagne — un @media change la CONDITION, pas le POIDS.

        Trouvé en mesurant : `getComputedStyle` rendait 19 px là où la règle
        disait 22. La ligne `.onix-vcar__grille` juste au-dessus, elle, marche —
        sa règle de base est écrite AVANT ce bloc.

      ➜ Une surcharge se place APRÈS la règle qu'elle surcharge, sinon elle est
        du commentaire coûteux. Contrôle automatique dans
        `scripts/lint-css-sections.js`.
    {%- endcomment -%}
  }
 /* ⚠️ MASQUÉES PAR DÉFAUT. Les dix emplacements sont dans le HTML ; seules les
     quatre que le script inline retient reçoivent .est-tiree. Sans cette règle,
     les dix apparaîtraient le temps d'une image — la grille sauterait de dix à
     quatre colonnes sous les yeux du visiteur. */
  .onix-vcar__grille > .onix-home-video-carousel__slide { display: none; }
  .onix-vcar__grille > .onix-home-video-carousel__slide.est-tiree { display: block; }
  .onix-vcar__grille .onix-home-video-carousel__slide {
    width: auto !important;
    height: auto !important;
    flex: none !important;
    margin: 0 !important;
    aspect-ratio: 9 / 16;
    border-radius: 11px;
    overflow: hidden;
    position: relative;
  }
  @media (min-width: 760px) {
    .onix-vcar__grille .onix-home-video-carousel__slide { border-radius: 16px; }
  }
  .onix-vcar__grille .onix-home-video-carousel__frame { width: 100% !important; height: 100% !important; }
  .onix-vcar__grille .onix-home-video-carousel__video {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover;
    display: block;
  }

  /* Le titre entre deux filets. ⚠️ Les filets sont VOLONTAIREMENT plus pâles
     qu'avec une sans-serif : une écriture à la main entre deux traits nets se
     contredit elle-même. Et pas de capitales ni d'interlettrage — voir le
     commentaire dans le markup. */
  /* ⚠️ LA BORNE ET LE CENTRAGE SONT ICI, PAS DANS LA MEDIA QUERY. Ils y étaient,
     et cette règle-ci — écrite PLUS BAS dans le fichier, à spécificité égale —
     les écrasait : le titre partait à 12 px du bord pendant que la grille et le
     comparateur étaient centrés à 310. Deux fois de suite, en déplaçant la marge
     au lieu de supprimer la dépendance à l'ordre.
     `max-width` n'a aucun effet sur mobile, où l'écran est plus étroit que 660 ;
     `padding` remplace la marge latérale et survit au centrage automatique. */
  .onix-vcar__titre {
    display: flex;
    align-items: center;
    gap: 11px;
    /* ⚠️ MARGE EN HAUT, PAS EN BAS — le titre est passé SOUS les vidéos le
       22/08. Au-dessus il n'avait besoin que de 2 px de dégagement ; en
       dessous, collé à la grille, il se lisait comme une légende de la 4ᵉ
       vidéo et pas comme un titre de bloc. */
    margin: 26px auto 0;
    padding: 0 12px;
    max-width: 660px;
  }
  .onix-vcar__titre::before,
  .onix-vcar__titre::after {
    content: "";
    flex: 1;
    height: 1px;
    background: rgba(255, 255, 255, 0.11);
  }
  .onix-vcar__titre span {
    /* 19 px, pas 26 — 22/08 : « pour le nos collaborateurs mets-le plus petit ».
       ⚠️ NE PAS DESCENDRE PLUS BAS. Reenie Beanie est une manuscrite à trait
         fin : sous ~17 px ses liaisons se ferment et le mot devient une tache.
         C'est la même raison qui interdit les capitales sur cette police.
       ⚠️ CETTE RÈGLE VAUT POUR TOUTES LES LARGEURS. Une surcharge `min-width:
         760px` existait plus haut dans la feuille et n'a jamais rien fait :
         écrite AVANT celle-ci, elle perdait à spécificité égale. Retirée le
         22/08. Toute nouvelle surcharge se place APRÈS ce bloc. */
    font-size: 19px;
    font-weight: 400;
    line-height: 1.05;
    color: #fff;
    white-space: nowrap;
  }

  /* ── bouton « voir tout nos maillots », DANS la section (22/08) ──
     Repris trait pour trait de .onix-alljerseys__cta, la section dédiée qui le
     portait jusqu'ici : même cyan marque, même pilule, même interlettrage. Il
     est ici sur le fond NUIT, au-dessus de la vague — pas sur le blanc. */
  .onix-vcar__cta-wrap { margin: 22px auto 0; text-align: center; }
  .onix-vcar__cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-inline: auto;
    max-width: 100%;
    min-height: 2.8rem;
    padding: 0.75rem 2.4rem;
    border: none;
    border-radius: 999px;
    background: #00c8ff;
    color: #0a0a0a;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    text-decoration: none;
    cursor: pointer;
    transition: filter 200ms ease, box-shadow 200ms ease, transform 180ms ease;
    -webkit-tap-highlight-color: transparent;
  }
  .onix-vcar__cta:hover,
  .onix-vcar__cta:focus-visible,
  .onix-vcar__cta:active {
    filter: brightness(1.08);
    box-shadow: 0 0 18px rgba(0, 200, 255, 0.35);
    transform: translateY(-2px);
  }
  @media (prefers-reduced-motion: reduce) { .onix-vcar__cta { transition: none; } }
  @media (max-width: 767px) { .onix-vcar__cta-wrap { margin-top: 18px; } }

  .onix-home-video-carousel {
    padding-top: var(--vc-pad-top, 8px);
    padding-bottom: var(--vc-pad-bottom, 8px);
    /* ⚠️ FOND SOMBRE, ET C'EST STRUCTUREL. Dans la planche, la bande vidéo était
       INSÉRÉE dans la section Top 4 — donc sur son dégradé sombre. Une section
       Liquid ne peut pas s'imbriquer dans une autre : posée à la suite, elle
       retombait sur le blanc du body et le titre manuscrit, écrit en blanc,
       DISPARAISSAIT purement et simplement. On reprend donc le bas du dégradé du
       Top 4 (#070b14) pour que les deux sections lisent comme un seul bloc.
       La vague de raccord du Top 4 est neutralisée en conséquence : son
       `color_below` vaut la même couleur, sinon elle dessinerait une frontière
       blanche au milieu du bloc. */
    background: #070b14;
  }
  @media (max-width: 749px) {
    .onix-home-video-carousel {
      padding-top: var(--vc-pad-top-m, 100px);
      padding-bottom: var(--vc-pad-bottom-m, 8px);
    }
  }
  .onix-home-video-carousel__inner {
    max-width: var(--page-width, 110rem);
    margin: 0 auto;
    padding-inline: clamp(1rem, 4vw, 3rem);
  }
  .onix-home-video-carousel__heading {
    text-align: center;
    margin-bottom: clamp(1.25rem, 3vw, 2rem);
  }
  .onix-home-video-carousel__title {
    margin: 0;
    font-size: clamp(1.5rem, 3.5vw, 2.3rem);
    letter-spacing: 0.01em;
  }
  .onix-home-video-carousel__subtitle {
    margin: 0.5rem 0 0;
    opacity: 0.7;
    font-size: clamp(0.9rem, 2vw, 1.05rem);
  }
  .onix-home-video-carousel__viewport {
    position: relative;
    overflow: hidden;
    /* Isole le marquee sur son propre layer de compositing GPU → défilement
       fluide, moins de repaints (crucial sur mobile). */
    transform: translateZ(0);
    contain: layout paint;
  }
  .onix-home-video-carousel__track {
    display: flex;
    gap: var(--vc-gap, 6px);
    width: max-content;
    padding: 4px clamp(0.75rem, 2vw, 1.5rem);
  }
  @media (max-width: 749px) {
    .onix-home-video-carousel__track {
      gap: var(--vc-gap-m, 6px);
    }
  }
  .onix-home-video-carousel__track.is-marquee {
    animation: onixVcarMarquee var(--vc-dur, 30s) linear infinite;
    will-change: transform;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
  }
  /* Sens inverse (gauche → droite) pour la rangée alternée. */
  .onix-home-video-carousel__track.is-marquee.is-reverse {
    animation-direction: reverse;
  }
  @keyframes onixVcarMarquee {
    from { transform: translateX(0); }
    to { transform: translateX(calc(-1 * var(--vc-set-w, 50%))); }
  }
  @media (prefers-reduced-motion: reduce) {
    .onix-home-video-carousel__track.is-marquee { animation: none; }
  }
  .onix-home-video-carousel__slide {
    flex: 0 0 auto;
    /* Largeur ET hauteur réglables séparément dans l'éditeur (hauteur = sur
       .__frame). Desktop = --vc-reel-w, mobile = --vc-reel-w-m (cf @media). */
    width: var(--vc-reel-w, 250px);
  }
  .onix-home-video-carousel__frame {
    display: block;
    position: relative;
    width: 100%;
    /* Hauteur réglable indépendamment de la largeur (admin). object-fit:cover
       recadre la vidéo si le ratio diffère du 9:16 d'origine. */
    height: var(--vc-reel-h, 444px);
    border-radius: var(--vc-radius, 16px);
    overflow: hidden;
    background: #0b0b0c;
    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.12);
  }
  .onix-home-video-carousel__video,
  .onix-home-video-carousel__frame video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }
  .onix-home-video-carousel__ph {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    color: rgba(255, 255, 255, 0.6);
    font-size: 0.85rem;
    text-align: center;
    padding: 0 0.5rem;
  }
  @media (max-width: 749px) {
    .onix-home-video-carousel__slide {
      width: var(--vc-reel-w-m, 175px);
    }
    .onix-home-video-carousel__frame {
      height: var(--vc-reel-h-m, 311px);
    }
  }
/* END_SECTION:onix-home-video-carousel */

/* START_SECTION:onix-newsletter-popup (INDEX:22) */
/* ══════════════════════════════════════
     BASE — overlay container
     ══════════════════════════════════════ */
  .onix-nl {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem;
  }
  .onix-nl.is-closing .onix-nl__card {
    animation: onix-nl-exit 0.25s ease both;
  }
  .onix-nl.is-closing .onix-nl__backdrop {
    animation: onix-nl-fade-out 0.25s ease both;
  }

  .onix-nl__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    z-index: 1;
  }

  /* ══════════════════════════════════════
     DESKTOP — images left, content right
     ══════════════════════════════════════ */
  .onix-nl__card {
    position: relative;
    z-index: 2;
    background: #111;
    color: #fff;
    border-radius: 1.25rem;
    width: min(92vw, 60rem);
    min-height: min(32rem, 85vh);
    max-height: 85vh;
    display: flex;
    flex-direction: row;
    animation: onix-nl-enter 0.3s ease both;
    overflow: hidden;
  }

  @keyframes onix-nl-enter {
    from { opacity: 0; transform: scale(0.95) translateY(10px); }
    to   { opacity: 1; transform: none; }
  }
  @keyframes onix-nl-exit {
    from { opacity: 1; transform: none; }
    to   { opacity: 0; transform: scale(0.95) translateY(10px); }
  }
  @keyframes onix-nl-fade-out {
    from { opacity: 1; }
    to   { opacity: 0; }
  }

  /* Images = left half of the card (absolute inside card — animation containing block works in our favor) */
  .onix-nl__bg-images {
    position: absolute;
    top: 0;
    left: 0;
    width: 50%;
    height: 100%;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    gap: 0;
    z-index: 0;
    overflow: hidden;
  }

  .onix-nl__bg-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    min-height: 0;
  }

  /* Form = right half */
  .onix-nl__card form {
    display: flex;
    flex-direction: column;
    min-width: 0;
    width: 50%;
    margin-left: 50%;
    flex-shrink: 0;
  }

  .onix-nl__close {
    position: absolute;
    top: 1.2rem;
    right: 1.2rem;
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    border: none;
    border-radius: 0;
    background: none;
    color: #fff;
    cursor: pointer;
    padding: 0;
    transition: opacity 150ms;
    opacity: 0.6;
  }
  .onix-nl__close svg { width: 22px; height: 22px; }
  .onix-nl__close:hover { opacity: 1; }

  .onix-nl__body {
    position: relative;
    z-index: 1;
    padding: 3rem clamp(2rem, 4vw, 4rem);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    gap: 0.75rem;
    flex: 1;
  }
  .onix-nl__body.is-hidden { display: none; }
  .onix-nl__body--success { display: none; }
  .onix-nl__body--success.is-visible { display: flex; }
  .onix-nl__result { width: 100%; text-align: center; }
  .onix-nl__result[hidden] { display: none !important; }

/* ── Badges row ── */
  .onix-nl__badges {
    display: flex;
    flex-wrap: nowrap;
    gap: 0.5rem;
    justify-content: center;
    margin-bottom: 0.25rem;
  }
  .onix-nl__badge {
    display: inline-block;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #111;
    background: var(--c-accent, #00c8ff);
    padding: 0.4rem 1rem;
    border-radius: 2rem;
    white-space: nowrap;
  }

/* ── Typography ── */
  .onix-nl__check { margin-bottom: 0.5rem; }
  .onix-nl__title {
    margin: 0.25rem 0 0;
    font-size: clamp(1.5rem, 3vw, 2.5rem);
    font-weight: 800; line-height: 1.15;
    letter-spacing: -0.02em; color: #fff;
  }
  .onix-nl__subtitle {
    margin: 0; font-size: 0.9rem;
    line-height: 1.55; color: #fff;
  }
  .onix-nl__note {
    margin: 0.25rem 0 0; font-size: 0.75rem;
    color: rgba(255,255,255,0.4); line-height: 1.4;
  }

/* ── Price examples ── */
  .onix-nl__examples {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    margin-top: 0.5rem;
    width: 100%;
  }
  .onix-nl__line {
    margin: 0;
    font-size: 0.85rem;
    font-weight: 600;
    color: #fff;
    text-align: center;
    line-height: 1.45;
  }
  .onix-nl__line-price {
    color: var(--c-accent, #00c8ff);
    font-weight: 800;
    font-size: 0.95rem;
  }
  

  /* ── Promo codes (3 paliers : code + bouton Appliquer) ── */
  .onix-nl__codes { display: flex; gap: 0.7rem; width: 100%; margin-top: 0.5rem; }
  .onix-nl__code-block {
    flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 0.4rem;
    align-items: center; text-align: center;
  }
  .onix-nl__code-label { margin: 0; font-size: 0.72rem; font-weight: 600; color: rgba(255,255,255,0.6); line-height: 1.25; }
  .onix-nl__code-value {
    display: block; width: 100%; box-sizing: border-box;
    padding: 0.5rem 0.4rem;
    border: 1.5px dashed var(--c-accent, #00c8ff); border-radius: 0.6rem;
    background: rgba(0,200,255,0.08); color: var(--c-accent, #00c8ff);
    font-size: 0.95rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase;
  }
  .onix-nl__apply {
    width: 100%; box-sizing: border-box;
    padding: 0.55rem 0.4rem; border: none; border-radius: 999px;
    background: var(--c-accent, #00c8ff); color: #06121a;
    font-family: inherit; font-size: 0.78rem; font-weight: 800;
    text-transform: uppercase; letter-spacing: 0.03em;
    cursor: pointer; transition: filter 150ms, transform 150ms;
  }
  .onix-nl__apply:hover:not(:disabled) { filter: brightness(1.08); transform: translateY(-1px); }
  .onix-nl__apply:active:not(:disabled) { transform: scale(0.98); }
  .onix-nl__apply.is-done { background: #06d6a0; color: #04231a; }
  /* codes non cumulables : les autres choix se verrouillent */
  .onix-nl__apply.is-locked {
    background: rgba(255,255,255,0.1); color: rgba(255,255,255,0.35);
    cursor: not-allowed;
  }
  .onix-nl__code-block:has(.is-locked) .onix-nl__code-value { opacity: 0.4; }
  .onix-nl__code-block:has(.is-locked) .onix-nl__code-label { opacity: 0.5; }

  /* ── Modale de confirmation « code appliqué » ── */
  .onix-nl__apply-modal {
    position: absolute; inset: 0; z-index: 10;
    display: flex; align-items: center; justify-content: center;
    padding: 1.25rem;
    background: rgba(4,6,10,0.72);
  }
  .onix-nl__apply-modal[hidden] { display: none; }
  .onix-nl__apply-box {
    width: min(360px, 100%); text-align: center;
    padding: 1.6rem 1.4rem 1.4rem;
    border-radius: 18px;
    background: linear-gradient(180deg, #15171d 0%, #0c0d12 100%);
    border: 1px solid rgba(255,255,255,0.1);
    box-shadow: 0 24px 60px -18px rgba(0,0,0,0.8);
  }
  .onix-nl__apply-icon { margin-bottom: 0.5rem; }
  .onix-nl__apply-title { margin: 0 0 0.5rem; font-size: 1.15rem; font-weight: 800; color: #fff; }
  .onix-nl__apply-msg { margin: 0 0 1.1rem; font-size: 0.9rem; line-height: 1.45; color: rgba(255,255,255,0.72); }
  .onix-nl__apply-msg b { color: var(--c-accent, #00c8ff); font-weight: 800; }
  .onix-nl__apply-ok {
    display: block; width: 100%; box-sizing: border-box;
    padding: 0.85rem 1rem; border: none; border-radius: 999px;
    background: var(--c-accent, #00c8ff); color: #06121a;
    font-family: inherit; font-weight: 800; font-size: 0.85rem;
    text-transform: uppercase; letter-spacing: 0.03em; cursor: pointer;
    transition: filter 150ms, transform 150ms;
  }
  .onix-nl__apply-ok:hover { filter: brightness(1.08); }
  .onix-nl__apply-ok:active { transform: scale(0.98); }

  /* ── Form row — stacked layout (matches screenshot) ── */
  .onix-nl__form-row {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    width: 100%;
    margin-top: 0.75rem;
  }
  .onix-nl__input {
    width: 100%;
    height: 3.5rem;
    padding: 0 1.25rem;
    border: 1.5px solid rgba(255,255,255,0.12);
    border-radius: 999px;
    background: rgba(255,255,255,0.06);
    color: #fff;
    font-size: 1rem;
    outline: none;
    transition: border-color 200ms;
    box-sizing: border-box;
  }
  .onix-nl__input:focus { border-color: var(--c-accent, #00c8ff); }
  .onix-nl__input::placeholder { color: rgba(255,255,255,0.4); }
  .onix-nl__submit {
    width: 100%;
    height: 3.5rem;
    padding: 0 2rem;
    border: none;
    border-radius: 999px;
    background: #fff;
    color: #111;
    font-size: 1rem;
    font-weight: 700;
    cursor: pointer;
    transition: background 150ms, transform 150ms;
    box-sizing: border-box;
  }
  .onix-nl__submit:hover { background: #e5e5e5; }
  .onix-nl__submit:active { transform: scale(0.98); }

  /* ══════════════════════════════════════
     MOBILE — images fullscreen behind card
     ══════════════════════════════════════ */
  @media (max-width: 749px) {
    .onix-nl { padding: 1rem; }
    .onix-nl__backdrop { display: none; }

    /* Images moved outside card by JS → child of .onix-nl, fills viewport */
    .onix-nl__bg-images--mobile {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      z-index: 0;
      border-radius: 0;
    }

    /* Card = compact glass overlay — wider so badges + close don't overlap */
    .onix-nl__card {
      width: min(95vw, 30rem);
      min-height: 0;
      max-height: 80vh;
      overflow-y: auto;
      height: auto;
      border-radius: 1.5rem;
      flex-direction: column;
      background: rgba(30, 30, 30, 0.85);
      backdrop-filter: blur(24px);
      -webkit-backdrop-filter: blur(24px);
    }

    .onix-nl__card form {
      width: 100%;
      margin-left: 0;
      flex-shrink: initial;
    }

    .onix-nl__close {
      top: 0.6rem; right: 0.6rem;
      width: 2rem; height: 2rem;
      background: none;
      color: #fff;
      z-index: 10;
    }
    .onix-nl__close:hover { background: rgba(255,255,255,0.15); }
    .onix-nl__close svg { width: 20px; height: 20px; }

    .onix-nl__body { padding: 1.75rem 1.75rem 2rem; flex: none; }
    .onix-nl__title { font-size: clamp(1.4rem, 5.5vw, 1.75rem); }
    .onix-nl__subtitle { font-size: 0.85rem; }
    .onix-nl__note { font-size: 0.7rem; }

    /* Badges centrés sur mobile */
    .onix-nl__badges {
      flex-wrap: nowrap;
      padding-right: 0;
      justify-content: center;
    }
    .onix-nl__badge {
      font-size: 0.58rem;
      padding: 0.3rem 0.7rem;
    }

    /* Exemples — taille augmentée, toujours sur une ligne */
    .onix-nl__line { font-size: 0.82rem; }

    /* Codes serrés à 3 colonnes sur mobile : le plus long (« ONIXTOAST »)
       doit rentrer dans ~90px sans déborder. */
    .onix-nl__codes { gap: 0.4rem; }
    .onix-nl__code-label { font-size: 0.6rem; }
    .onix-nl__code-value { font-size: 0.72rem; letter-spacing: 0.01em; padding: 0.42rem 0.15rem; }
    .onix-nl__apply { font-size: 0.62rem; letter-spacing: 0; padding: 0.5rem 0.15rem; }
    .onix-nl__line-price { font-size: 0.9rem; }

    .onix-nl__form-row { flex-direction: column; gap: 0.5rem; }
  }
/* END_SECTION:onix-newsletter-popup */

/* START_SECTION:onix-product-recommendations (INDEX:23) */
.onix-reco {
    /* top réduit : la fiche se termine juste au-dessus (retour Yacine 2026-08-20) */
    padding: clamp(1.25rem, 2.5vw, 2rem) 1.25rem clamp(2.5rem, 5vw, 4rem);
    background: var(--c-bg, #ffffff);
    color: var(--c-fg, #111111);
    overflow: hidden;
  }

  @media (min-width: 750px) {
    .onix-reco { padding-inline: 2rem; }
  }

  .onix-reco__inner {
    width: 100%;
    margin: 0 auto;
    display: grid;
    gap: 1.8rem;
  }

  .onix-reco__heading {
    display: grid;
    gap: 0.5rem;
    justify-items: center;
    text-align: center;
  }

  .onix-reco__eyebrow {
    margin: 0;
    font-size: 0.7rem;
    letter-spacing: 0.34em;
    text-transform: uppercase;
    color: var(--c-accent, #00c8ff);
    font-weight: 600;
  }

  .onix-reco__title {
    margin: 0;
    font-size: clamp(1.4rem, 3vw, 2rem);
    font-weight: 900;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--c-fg, #111111);
  }

  /* ── Scrollable track ── */
  .onix-reco__carousel {
    position: relative;
    /* Grid item — without min-width:0 the carousel stretches to fit
       the flex track inside (sum of 10 cards), pushing the section
       wider than the viewport on mobile and killing the horizontal
       scroll (parent overflow: hidden then hides the runaway content). */
    min-width: 0;
  }

  .onix-reco__track {
    display: flex;
    gap: 0.75rem;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: 0.5rem;
    scroll-behavior: smooth;
  }

  .onix-reco__track::-webkit-scrollbar { display: none; }

  /* ── Nav arrows (desktop only) ──
     Hidden on mobile/tablet: native horizontal swipe is the primary
     navigation there. Shown ≥ 750 px so users with a mouse get a
     proper paginate-by-page affordance. The buttons sit absolutely
     over the carousel edges, transparent-white background and a soft
     drop shadow so they don't fight the cards visually. */
  .onix-reco__nav {
    display: none;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 2;
    width: 2.6rem;
    height: 2.6rem;
    border-radius: 999px;
    border: 1px solid rgba(0, 0, 0, 0.08);
    background: #ffffff;
    color: #111111;
    cursor: pointer;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.10);
    transition: opacity 0.2s ease, transform 0.2s ease, background 0.2s ease;
    padding: 0;
  }
  .onix-reco__nav:hover { background: #f5f5f5; transform: translateY(-50%) scale(1.05); }
  .onix-reco__nav:active { transform: translateY(-50%) scale(0.96); }
  .onix-reco__nav:disabled,
  .onix-reco__nav[hidden] { display: none; }
  .onix-reco__nav--prev { left: -0.6rem; }
  .onix-reco__nav--next { right: -0.6rem; }

  @media (min-width: 750px) {
    /* Desktop / tablet — show arrows when JS un-hides them. */
    .onix-reco__nav:not([hidden]) {
      display: flex;
    }
  }

  /* ── Card — calquée au pixel sur covred.fr (cf. snippets/onix-product-card) ──
     La carte : pas de fond blanc, pas d'ombre, pas de border-radius (le radius
     est sur le visuel uniquement). Les règles flex/scroll-snap pilotent le
     slider et restent intactes. */
  .onix-reco__card {
    flex: 0 0 42%;
    max-width: 42%;
    scroll-snap-align: start;
    display: flex;
    flex-direction: column;
    text-align: center;
    background: transparent;
    padding: 0;
    cursor: pointer;
  }

  @media (min-width: 750px) {
    .onix-reco__card {
      flex: 0 0 22%;
      max-width: 22%;
    }
  }

  @media (min-width: 1100px) {
    .onix-reco__card {
      flex: 0 0 18%;
      max-width: 18%;
    }
  }

  /* Conteneur visuel : maillot qui remplit le cadre 3/4, coins arrondis 10px. */
  .onix-reco__card-visual {
    position: relative;
    width: 100%;
    aspect-ratio: 3 / 4;
    border-radius: 10px;
    overflow: hidden;
    background: #e6e4e1;
    isolation: isolate;
  }

  .onix-reco__card-media {
    display: block;
    width: 100%;
    height: 100%;
    text-decoration: none;
  }

  .onix-reco__card-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 450ms ease;
  }

  .onix-reco__card:hover .onix-reco__card-img,
  .onix-reco__card:focus-within .onix-reco__card-img {
    transform: scale(1.04);
  }

  /* Nom en overlay blanc sur le bas de l'image (dégradé sombre pour lisibilité). */
  .onix-reco__card-overlay {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 30px 40px 8px 10px;
    text-align: center;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.55) 0%, rgba(0, 0, 0, 0.15) 60%, rgba(0, 0, 0, 0) 100%);
    pointer-events: none;
    z-index: 1;
  }

  .onix-reco__card-name {
    display: block;
    color: #ffffff;
    line-height: 1.3;
  }

  .onix-reco__card-name-line {
    display: block;
    max-width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 12px;
    font-weight: 700;
    color: #ffffff;
    text-transform: none;
    letter-spacing: 0.01em;
  }

  .onix-reco__card-name-line--2 {
    font-size: 11px;
    font-weight: 400;
    color: rgba(255, 255, 255, 0.82);
    margin-top: 1px;
  }

  /* Pastille « + » glass posée sur l'image en bas à droite. */
  .onix-reco__card-add {
    position: absolute;
    bottom: 8px;
    right: 8px;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    padding: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.18);
    border: 1px solid rgba(255, 255, 255, 0.35);
    color: #ffffff;
    cursor: pointer;
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    transition: background 180ms ease, transform 180ms ease, border-color 180ms ease;
  }

  .onix-reco__card-add:hover {
    background: rgba(255, 255, 255, 0.32);
    border-color: rgba(255, 255, 255, 0.6);
    transform: scale(1.1);
  }

  .onix-reco__card-add:active {
    transform: scale(0.94);
  }

  /* Prix seul sous l'image. */
  .onix-reco__card-meta {
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 5px;
    padding: 7px 2px 0;
    font-size: 16px;
    font-weight: 700;
    color: var(--onix-pcard-price, #666666);
    text-align: center;
    text-decoration: none;
  }

  .onix-reco__card-price-now {
    color: var(--onix-pcard-price, #666666);
  }

  /* ⚠️ DEUX NOMS POUR LE MÊME PRIX, ET LE CSS VISAIT LE MAUVAIS — 24/08, trouvé
     par LUI sur « LES PLUS VENDUS » : « on voit les 2 prix côte à côte », deux
     montants noirs alignés sans que rien ne dise lequel est l'ancien.
     Le balisage pose `onix-reco__card-price-was` (l.123) ; cette règle stylait
     `onix-reco__card-compare`, qui n'existe dans aucun HTML. Résultat : le prix
     de comparaison n'avait NI barre NI couleur atténuée — il ressemblait au prix
     courant, et un client pouvait lire 24,99 puis 34,99 comme deux tarifs.
     ➜ Un sélecteur CSS qui ne matche rien ne lève pas, ne prévient pas : il ne
     fait rien, silencieusement. C'est le troisième défaut de la journée de cette
     famille — un silence qui passe pour un fonctionnement.
     Les deux noms sont gardés : `compare` au cas où un autre gabarit l'emploie,
     `price-was` parce que c'est celui que le HTML écrit réellement. */
  .onix-reco__card-compare,
  .onix-reco__card-price-was {
    font-size: 1em;
    font-weight: 400;
    color: var(--onix-pcard-compare, rgba(0, 0, 0, 0.4));
    text-decoration: line-through;
    text-decoration-thickness: 1.4px;
  }
/* END_SECTION:onix-product-recommendations */

/* START_SECTION:onix-psg-champions (INDEX:24) */
.onix-champions {
    --champ-radius: 18px;
    position: relative;
    width: 100%;
    /* Le thème met .shopify-section en display:grid (gouttière|contenu|gouttière).
       On sort de la colonne de contenu pour occuper toute la largeur. Ignoré
       sans risque si le parent n'est pas une grille. */
    grid-column: 1 / -1;
    background:
      radial-gradient(120% 90% at 50% 0%, rgba(0, 200, 255, 0.07), rgba(0, 0, 0, 0) 55%),
      radial-gradient(100% 100% at 50% 120%, rgba(0, 0, 0, 0.55), rgba(0, 0, 0, 0)),
      var(--champ-bg, #0a0a0c);
    color: #fff;
    overflow: hidden;
    padding: clamp(2.5rem, 6vw, 5rem) 0 clamp(2.75rem, 6vw, 5.5rem);
  }
  .onix-champions__inner {
    width: 100%;
    margin: 0 auto;
    padding: 0 clamp(0.5rem, 2vw, 1.5rem);
  }
  /* ── Header ── */
  .onix-champions__head { max-width: 60rem; margin: 0 auto clamp(1.5rem, 3.5vw, 2.75rem); text-align: center; }
  .onix-champions__stars {
    display: flex; justify-content: center; gap: 0.6rem;
    color: var(--champ-accent, #d7ad55);
    font-size: clamp(14px, 1.6vw, 19px);
    margin-bottom: 0.85rem;
    filter: drop-shadow(0 0 10px rgba(215, 173, 85, 0.55));
  }
  .onix-champions__title {
    margin: 0;
    font-size: clamp(15px, 2.4vw, 26px);
    font-weight: 800;
    letter-spacing: clamp(2px, 0.5vw, 5px);
    text-transform: uppercase;
    color: #fff;
    line-height: 1.2;
  }
  .onix-champions__subtitle {
    margin: 0.7rem auto 0;
    max-width: 40rem;
    font-size: clamp(13px, 1.4vw, 15px);
    color: rgba(255, 255, 255, 0.6);
    line-height: 1.5;
  }
  /* ── Stage + coverflow ── */
  .onix-champions__stage {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .onix-champions__viewport {
    position: relative;
    width: 100%;
    height: clamp(310px, 46vw, 560px);
    perspective: 1700px;
    perspective-origin: 50% 50%;
    overflow: hidden;
    touch-action: pan-y;
  }
  .onix-champions__track {
    position: absolute;
    inset: 0;
    transform-style: preserve-3d;
  }
  /* ── Carte ── */
  .onix-champions__card {
    position: absolute;
    top: 50%;
    left: 50%;
    width: clamp(185px, 24vw, 360px);
    aspect-ratio: 3 / 4;
    margin: 0;
    border-radius: var(--champ-radius);
    background: #f4f4f2;
    box-shadow: 0 24px 60px -24px rgba(0, 0, 0, 0.7);
    text-decoration: none;
    color: inherit;
    overflow: hidden;
    /* transform piloté par le JS via vars (défaut = caché) */
    --x: 0px; --z: -600px; --ry: 0deg; --s: 0.6;
    transform: translate(-50%, -50%) translate3d(var(--x), 0, var(--z)) rotateY(var(--ry)) scale(var(--s));
    opacity: 0;
    z-index: 0;
    transition: transform 0.55s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.55s ease, box-shadow 0.4s ease;
    will-change: transform;
    cursor: pointer;
    /* empêche le drag natif du lien/image qui annulait le clic sur desktop */
    -webkit-user-drag: none;
    user-select: none;
  }
  .onix-champions__card.is-visible { opacity: 1; }
  .onix-champions__card.is-active {
    box-shadow:
      0 0 0 3px var(--c-accent, #00c8ff),
      0 0 22px -2px rgba(0, 200, 255, 0.45),
      0 20px 45px -20px rgba(0, 0, 0, 0.30);
  }
  /* cartes latérales : voile sombre dégressif pour les faire reculer
     dans le fond sombre de la section */
  .onix-champions__card::after {
    content: "";
    position: absolute; inset: 0;
    background: rgba(8, 9, 12, 0.45);
    opacity: var(--dim, 0);
    transition: opacity 0.55s ease;
    pointer-events: none;
  }
  .onix-champions__media {
    position: absolute; inset: 0;
    display: flex; align-items: center; justify-content: center;
    background: #f4f4f2;
  }
  .onix-champions__img {
    width: 100%; height: 100%;
    object-fit: cover;
    display: block;
    /* l'image ne capte pas le pointeur → le clic va au lien <a>, et aucun
       drag natif d'image ne vient annuler le clic (bug desktop) */
    pointer-events: none;
    -webkit-user-drag: none;
  }
  .onix-champions__img.placeholder { object-fit: contain; padding: 12%; opacity: 0.4; }
  .onix-champions__badge {
    position: absolute;
    top: 0.7rem; left: 0.7rem;
    z-index: 3;
    padding: 6px 14px;
    border-radius: 100px;
    background: rgba(8, 8, 8, 0.78);
    border: 1px solid var(--champ-accent, rgba(215, 173, 85, 0.82));
    color: #f8e4a9;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 1px;
    text-transform: uppercase;
    line-height: 1;
    white-space: nowrap;
  }
  /* légende sous l'image, visible seulement sur la carte active */
  .onix-champions__cardcap {
    position: absolute;
    left: 0; right: 0; bottom: 0;
    z-index: 3;
    display: flex; flex-direction: column; gap: 2px;
    padding: 2.2rem 0.9rem 0.85rem;
    background: linear-gradient(to top, rgba(8, 9, 12, 0.92), rgba(8, 9, 12, 0));
    color: #fff;
    opacity: 0;
    transition: opacity 0.4s ease;
  }
  .onix-champions__card.is-active .onix-champions__cardcap { opacity: 1; }
  .onix-champions__cardname {
    font-size: 12.5px; font-weight: 700; line-height: 1.25;
    overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  }
  .onix-champions__cardprice { font-size: 12px; color: var(--c-accent, #00c8ff); font-weight: 700; }
  /* ── Flèches ── */
  .onix-champions__nav {
    position: absolute;
    top: 50%; transform: translateY(-50%);
    z-index: 20;
    width: 46px; height: 46px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.07);
    border: 1px solid rgba(255, 255, 255, 0.18);
    color: #fff;
    cursor: pointer;
    transition: background 0.2s ease, transform 0.2s ease, border-color 0.2s ease, color 0.2s ease;
    -webkit-tap-highlight-color: transparent;
  }
  .onix-champions__nav:hover { background: rgba(255, 255, 255, 0.16); border-color: var(--c-accent, #00c8ff); color: var(--c-accent, #00c8ff); }
  .onix-champions__nav:active { transform: translateY(-50%) scale(0.92); }
  .onix-champions__nav svg { width: 22px; height: 22px; }
  .onix-champions__nav--prev { left: clamp(0.25rem, 2vw, 1.5rem); }
  .onix-champions__nav--next { right: clamp(0.25rem, 2vw, 1.5rem); }
  /* ── CTA ── */
  .onix-champions__footer { text-align: center; margin-top: clamp(1.5rem, 3vw, 2.5rem); }
  .onix-champions__cta {
    display: inline-block;
    padding: 0.85rem 2.1rem;
    border-radius: 100px;
    background: var(--champ-accent, #d7ad55);
    color: #111;
    font-weight: 700;
    font-size: 14px;
    letter-spacing: 0.02em;
    text-decoration: none;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
  }
  .onix-champions__cta:hover { transform: translateY(-2px); box-shadow: 0 12px 28px -10px rgba(215, 173, 85, 0.6); }

  @media (max-width: 749px) {
    .onix-champions__nav { width: 38px; height: 38px; }
    .onix-champions__nav svg { width: 18px; height: 18px; }
    .onix-champions__cardcap { padding: 1.6rem 0.7rem 0.7rem; }
  }
  @media (prefers-reduced-motion: reduce) {
    .onix-champions__card { transition: none; }
  }
/* END_SECTION:onix-psg-champions */

/* START_SECTION:onix-wheel (INDEX:27) */
.onix-wheel {
    position: fixed;
    inset: 0;
    z-index: 100050;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
  }
  .onix-wheel[hidden] { display: none; }
  .onix-wheel__backdrop {
    position: absolute;
    inset: 0;
    /* Fond SOLIDE (pas de backdrop-filter:blur) : le flou se recalculait à chaque
       re-render du tiroir panier derrière pendant le spin → saccades. */
    background: rgba(4, 6, 10, 0.88);
    border: none;
  }
  .onix-wheel__panel {
    position: relative;
    width: min(420px, 100%);
    max-height: min(calc(100dvh - 2rem), calc(100vh - 2rem));
    overflow-x: hidden;
    overflow-y: auto;
    background: linear-gradient(180deg, #15171d 0%, #0c0d12 100%);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 22px;
    box-shadow: 0 30px 70px -20px rgba(0, 0, 0, 0.8);
    padding: 1.5rem 1.4rem 1.4rem;
    text-align: center;
    color: #f5f5f7;
    transform: translateY(8px) scale(0.98);
    opacity: 0;
    transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.25s ease;
  }
  .onix-wheel.is-open .onix-wheel__panel { transform: none; opacity: 1; }

  .onix-wheel__x {
    position: absolute;
    top: 0.7rem;
    right: 0.8rem;
    width: 2rem;
    height: 2rem;
    border: none;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.08);
    color: #fff;
    font-size: 0.85rem;
    cursor: pointer;
    transition: background 0.15s ease;
  }
  .onix-wheel__x:hover { background: rgba(255, 255, 255, 0.18); }

  .onix-wheel__eyebrow-row {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 0.1rem;
  }
  .onix-wheel__eyebrow {
    color: var(--wf-acc, #00c8ff);
    font-size: 0.62rem;
    font-weight: 800;
    letter-spacing: 0.18em;
    text-transform: uppercase;
  }
  .onix-wheel__winbadge {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.16rem 0.5rem;
    border-radius: 999px;
    background: rgba(6, 214, 160, 0.16);
    color: #06d6a0;
    font-size: 0.55rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
  }
  .onix-wheel__title {
    margin: 0.2rem 0 0.25rem;
    font-size: 1.42rem;
    font-weight: 800;
    line-height: 1.12;
    letter-spacing: -0.01em;
  }
  .onix-wheel__intro {
    margin: 0 auto 0.4rem;
    max-width: 22rem;
    font-size: 0.82rem;
    color: rgba(255, 255, 255, 0.62);
    line-height: 1.4;
  }
  .onix-wheel__urgency {
    margin: 0.15rem auto 0.1rem;
    font-size: 0.72rem;
    font-weight: 700;
    color: #ffd166;
    letter-spacing: 0.01em;
  }

  /* ── Roue ─────────────────────────────────────────────────────────── */
  .onix-wheel__stage {
    position: relative;
    width: min(300px, 78vw);
    aspect-ratio: 1;
    margin: 0.6rem auto 0.9rem;
    /* Anneau + ombre portés par le conteneur STATIQUE (pas l'élément qui tourne)
       → plus de repaint d'ombre/clip à chaque frame = spin fluide. */
    border-radius: 50%;
    box-shadow:
      0 0 0 6px rgba(255, 255, 255, 0.06),
      0 0 0 8px var(--wf-acc, #00c8ff),
      0 0 34px -2px rgba(0, 200, 255, 0.45),
      0 18px 40px -14px rgba(0, 0, 0, 0.7);
  }
  /* Reflet « dôme » premium par-dessus la roue (lumière venant du haut) — au-dessus
     du spinner, sous la flèche/le moyeu. */
  .onix-wheel__stage::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    border-radius: 50%;
    pointer-events: none;
    background: radial-gradient(120% 80% at 50% 0%, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.05) 28%, transparent 55%);
  }
  /* Conteneur qui CLIPPE la roue qui tourne : un carré qui pivote déborde de sa
     zone par ses coins → sans ça le panneau ajoutait/retirait des barres de
     défilement à chaque frame = roue qui « saute » + barres parasites. Le
     translateZ(0) force une couche de compositing pour que overflow:hidden clippe
     bien le spinner animé (sinon Safari/Chrome laissent fuir la couche composée). */
  .onix-wheel__clip {
    position: absolute;
    inset: 0;
    z-index: 1;
    border-radius: 50%;
    overflow: hidden;
    transform: translateZ(0);
  }
  .onix-wheel__spinner {
    position: absolute;
    inset: 0;
    will-change: transform;
    backface-visibility: hidden;
  }
  .onix-wheel__canvas { display: block; width: 100%; height: 100%; }
  .onix-wheel__pointer {
    position: absolute;
    top: -6px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 3;
    width: 0;
    height: 0;
    border-left: 13px solid transparent;
    border-right: 13px solid transparent;
    border-top: 20px solid var(--wf-acc, #00c8ff);
    filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.5));
  }
  .onix-wheel__hub {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 2;
    width: 3.6rem;
    height: 3.6rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    /* « Juste le logo » : pas de disque ni de bord — un voile sombre TRÈS doux
       (radial sans bord net) sous le logo pour qu'il reste lisible sur tous les
       segments, sans cercle visible. */
    background: radial-gradient(circle, rgba(8, 10, 14, 0.92) 0%, rgba(8, 10, 14, 0.55) 52%, transparent 72%);
  }
  .onix-wheel__hub-img {
    width: 90%;
    height: 90%;
    object-fit: contain;
    filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.6));
  }
  .onix-wheel__hub-mono {
    font-size: 0.5rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    color: #fff;
    text-transform: uppercase;
  }

  /* ── Boutons ──────────────────────────────────────────────────────── */
  .onix-wheel__cta[hidden],
  .onix-wheel__result[hidden] { display: none; }
  .onix-wheel__cta {
    display: block;
    box-sizing: border-box;
    width: 100%;
    padding: 0.95rem 1rem;
    border: none;
    border-radius: 999px;
    background: var(--wf-acc, #00c8ff);
    color: #06121a;
    font-family: inherit;
    font-size: 0.82rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    transition: filter 0.16s ease, transform 0.16s ease, box-shadow 0.16s ease;
  }
  .onix-wheel__cta:hover:not(:disabled) { filter: brightness(1.08); transform: translateY(-1px); }
  .onix-wheel__cta:disabled { opacity: 0.6; cursor: default; }
  /* Pulsation discrète du bouton de jeu à l'arrêt → attire l'œil (pas de scale =
     zéro reflow). Coupée quand le bouton est désactivé (pendant le spin). */
  [data-wheel-spin] {
    animation: onix-wheel-pulse 2.2s ease-in-out infinite;
  }
  [data-wheel-spin]:disabled { animation: none; }
  @keyframes onix-wheel-pulse {
    0%, 100% { box-shadow: 0 6px 18px -6px rgba(0, 200, 255, 0.55); }
    50% { box-shadow: 0 8px 28px -4px rgba(0, 200, 255, 0.9); }
  }
  .onix-wheel__cta--shop { margin-top: 0.9rem; }

  /* ── Résultat ─────────────────────────────────────────────────────── */
  .onix-wheel__won {
    margin: 0;
    font-size: 1.05rem;
    font-weight: 800;
  }
  .onix-wheel__prize {
    margin: 0.15rem 0 0.7rem;
    font-size: 1.5rem;
    font-weight: 900;
    color: var(--wf-acc, #00c8ff);
    line-height: 1.1;
  }
  .onix-wheel__prize small { display: block; font-size: 0.72rem; font-weight: 600; color: rgba(255, 255, 255, 0.6); margin-top: 0.15rem; }
  .onix-wheel__codebox {
    display: flex;
    align-items: stretch;
    gap: 0.4rem;
    max-width: 17rem;
    margin: 0 auto 0.7rem;
  }
  .onix-wheel__codebox[hidden] { display: none; }
  .onix-wheel__code {
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.6rem 0.8rem;
    border: 1.5px dashed var(--wf-acc, #00c8ff);
    border-radius: 10px;
    background: rgba(0, 200, 255, 0.08);
    font-size: 1.05rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    color: #fff;
    user-select: all;
  }
  .onix-wheel__copy {
    flex: 0 0 auto;
    padding: 0 1rem;
    border: none;
    border-radius: 10px;
    background: var(--wf-acc, #00c8ff);
    color: #06121a;
    font-family: inherit;
    font-size: 0.72rem;
    font-weight: 800;
    text-transform: uppercase;
    cursor: pointer;
    transition: filter 0.15s ease;
  }
  .onix-wheel__copy:hover { filter: brightness(1.08); }
  .onix-wheel__copy.is-done { background: #1fbf6b; color: #fff; animation: onix-copy-pop 0.32s ease; }
  @keyframes onix-copy-pop { 0% { transform: scale(0.9); } 55% { transform: scale(1.09); } 100% { transform: scale(1); } }
  .onix-wheel__howto {
    margin: 0;
    font-size: 0.78rem;
    color: rgba(255, 255, 255, 0.7);
    line-height: 1.45;
  }
  .onix-wheel__howto[hidden] { display: none; }
  /* Économie concrète (vert = argent gagné) */
  .onix-wheel__deal {
    margin: 0.1rem auto 0.55rem;
    max-width: 22rem;
    padding: 0.5rem 0.8rem;
    border-radius: 10px;
    background: rgba(6, 214, 160, 0.13);
    color: #d2f8ee;
    font-size: 0.82rem;
    font-weight: 600;
    line-height: 1.4;
  }
  .onix-wheel__deal[hidden] { display: none; }
  .onix-wheel__deal b { color: #06d6a0; font-weight: 800; }
  /* Compte à rebours (ambre = urgence), chiffres à largeur fixe (pas de jitter) */
  .onix-wheel__timer {
    margin: 0.55rem auto 0;
    font-size: 0.82rem;
    font-weight: 800;
    color: #ffd166;
    letter-spacing: 0.02em;
    font-variant-numeric: tabular-nums;
  }
  .onix-wheel__timer[hidden] { display: none; }
  .onix-wheel__timer.is-expired { color: rgba(255, 255, 255, 0.5); }

  /* ── Écran lot top 3 (choix modèle + taille) ─────────────────────── */
  .onix-wheel__t3[hidden] { display: none; }
  .onix-wheel__t3-note {
    margin: 0 auto 0.6rem;
    max-width: 20rem;
    padding: 0.4rem 0.7rem;
    border-radius: 9px;
    background: rgba(255, 209, 102, 0.14);
    color: #ffd166;
    font-size: 0.74rem;
    font-weight: 700;
    line-height: 1.35;
  }
  .onix-wheel__t3-step {
    margin: 0.5rem 0 0.4rem;
    font-size: 0.74rem;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.75);
    text-align: left;
  }
  .onix-wheel__t3-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.5rem;
  }
  .onix-wheel__t3-item {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    padding: 0.45rem 0.35rem 0.5rem;
    border: 1.5px solid rgba(255, 255, 255, 0.14);
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.04);
    cursor: pointer;
    font-family: inherit;
    color: #fff;
    transition: border-color 0.15s ease, background 0.15s ease, transform 0.15s ease;
  }
  .onix-wheel__t3-item:hover { transform: translateY(-1px); border-color: rgba(0, 200, 255, 0.5); }
  .onix-wheel__t3-item.is-selected {
    border-color: var(--wf-acc, #00c8ff);
    background: rgba(0, 200, 255, 0.1);
    box-shadow: 0 0 0 1px var(--wf-acc, #00c8ff);
  }
  .onix-wheel__t3-img {
    width: 100%;
    aspect-ratio: 3 / 4;
    object-fit: cover;
    border-radius: 8px;
    background: #e6e4e1;
  }
  .onix-wheel__t3-team {
    font-size: 0.7rem;
    font-weight: 800;
    line-height: 1.15;
  }
  .onix-wheel__t3-model {
    font-size: 0.58rem;
    color: rgba(255, 255, 255, 0.55);
    line-height: 1.2;
  }
  .onix-wheel__t3-sizes-wrap[hidden] { display: none; }
  .onix-wheel__t3-sizes {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    justify-content: center;
  }
  .onix-wheel__t3-size {
    min-width: 2.6rem;
    padding: 0.45rem 0.55rem;
    border: 1.5px solid rgba(255, 255, 255, 0.22);
    border-radius: 9px;
    background: rgba(255, 255, 255, 0.05);
    color: #fff;
    font-family: inherit;
    font-size: 0.78rem;
    font-weight: 700;
    cursor: pointer;
    transition: border-color 0.15s ease, background 0.15s ease;
  }
  .onix-wheel__t3-size:hover:not(:disabled) { border-color: rgba(0, 200, 255, 0.55); }
  .onix-wheel__t3-size.is-selected {
    border-color: var(--wf-acc, #00c8ff);
    background: rgba(0, 200, 255, 0.14);
    box-shadow: 0 0 0 1px var(--wf-acc, #00c8ff);
  }
  .onix-wheel__t3-size:disabled { opacity: 0.35; cursor: not-allowed; text-decoration: line-through; }
  .onix-wheel__cta--t3add { margin-top: 0.75rem; }
  .onix-wheel__t3-error {
    margin: 0.5rem 0 0;
    font-size: 0.74rem;
    font-weight: 700;
    color: #ef476f;
  }
  .onix-wheel__t3-error[hidden] { display: none; }

  /* ── Confetti ─────────────────────────────────────────────────────── */
  .onix-wheel__confetti {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
    z-index: 5;
    border-radius: 22px;
  }
  .onix-wheel__confetti i {
    position: absolute;
    top: -12px;
    width: 8px;
    height: 12px;
    opacity: 0;
    animation: onix-confetti 1.5s ease-out forwards;
  }
  @keyframes onix-confetti {
    0% { transform: translateY(0) rotate(0); opacity: 1; }
    100% { transform: translateY(120%) rotate(540deg); opacity: 0; }
  }

  /* ── Rappel code dans le panier (injecté par le JS dans cart-drawer) —
     version COMPACTE : une ligne code + hint, timer discret. ── */
  .onix-wheel-reminder {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    margin: 0 0 0.45rem;
    padding: 0.35rem 0.55rem;
    border: 1px solid rgba(0, 200, 255, 0.35);
    border-radius: 10px;
    background: rgba(0, 200, 255, 0.06);
    font-size: 0.7rem;
    color: #fff;
  }
  .onix-wheel-reminder__main {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 0.15rem 0.45rem;
  }
  .onix-wheel-reminder__txt { line-height: 1.25; white-space: nowrap; }
  .onix-wheel-reminder__txt b { letter-spacing: 0.06em; }
  .onix-wheel-reminder__hint {
    font-size: 0.66rem;
    font-weight: 700;
    color: #ffd166;
  }
  .onix-wheel-reminder__hint.is-unlocked { color: #06d6a0; }
  .onix-wheel-reminder__timer {
    font-size: 0.64rem;
    font-weight: 800;
    color: #ffd166;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
  }
  .onix-wheel-reminder__timer.is-expired { color: rgba(255, 255, 255, 0.45); }
  .onix-wheel-reminder__copy {
    flex: 0 0 auto;
    border: none;
    border-radius: 7px;
    padding: 0.32rem 0.55rem;
    background: var(--wf-acc, #00c8ff);
    color: #06121a;
    font-family: inherit;
    font-size: 0.62rem;
    font-weight: 800;
    text-transform: uppercase;
    cursor: pointer;
  }
  .onix-wheel-reminder__copy.is-done { background: #1fbf6b; color: #fff; animation: onix-copy-pop 0.32s ease; }

  @media (max-width: 480px) {
    .onix-wheel__panel { padding: 1.3rem 1.1rem 1.2rem; border-radius: 18px; }
    .onix-wheel__title { font-size: 1.2rem; }
  }
  @media (prefers-reduced-motion: reduce) {
    .onix-wheel__panel,
    .onix-wheel__spinner { transition-duration: 0.01ms !important; }
    .onix-wheel__confetti i { animation: none; display: none; }
    .onix-wheel__copy.is-done,
    .onix-wheel-reminder__copy.is-done { animation: none; }
    [data-wheel-spin] { animation: none; }
  }
/* END_SECTION:onix-wheel */

/* START_SECTION:page (INDEX:28) */
.onix-page {
    background: #ffffff;
    color: #111111;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    padding: clamp(2rem, 4vw, 4rem) 1.25rem clamp(3rem, 6vw, 5rem);
  }

  .onix-page__inner {
    width: min(100%, 52rem);
    margin: 0 auto;
    min-width: 0;
  }

  .onix-page__header {
    margin-bottom: 1.5rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid rgba(17, 17, 17, 0.08);
  }

  .onix-page__eyebrow {
    margin: 0 0 0.45rem;
    font-size: 0.68rem;
    font-weight: 500;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: rgba(17, 17, 17, 0.46);
  }

  .onix-page__title {
    margin: 0;
    font-size: clamp(2rem, 5vw, 3rem);
    font-weight: 600;
    line-height: 1.02;
    letter-spacing: 0.02em;
    color: #111111;
  }

  .onix-page__content {
    color: #111111;
    font-size: 1rem;
    line-height: 1.75;
    min-width: 0;
    width: 100%;
    max-width: 100%;
  }

  .onix-page__content > * {
    max-width: 100%;
  }

  .onix-page__content,
  .onix-page__content p,
  .onix-page__content li,
  .onix-page__content strong,
  .onix-page__content em,
  .onix-page__content a,
  .onix-page__content h2,
  .onix-page__content h3,
  .onix-page__content h4 {
    color: inherit;
  }

  .onix-page__content p,
  .onix-page__content ul,
  .onix-page__content ol {
    margin: 0 0 1rem;
  }

  .onix-page__content h2,
  .onix-page__content h3,
  .onix-page__content h4 {
    margin: 1.8rem 0 0.85rem;
    line-height: 1.2;
    font-weight: 600;
    letter-spacing: 0.01em;
  }

  .onix-page__content h2 {
    font-size: 1.4rem;
  }

  .onix-page__content h3 {
    font-size: 1.16rem;
  }

  .onix-page__content h4 {
    font-size: 1rem;
  }

  .onix-page__content ul,
  .onix-page__content ol {
    padding-left: 1.2rem;
  }

  .onix-page__content li {
    margin-bottom: 0.45rem;
  }

  .onix-page__content a {
    text-decoration: underline;
    text-underline-offset: 0.16em;
  }

  .onix-page__table-scroll {
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    box-sizing: border-box;
  }

  .template-page .rte table,
  .onix-page__content table {
    display: table;
    width: max-content;
    min-width: 100%;
    border: 0;
    border-collapse: separate;
    border-spacing: 0;
    overflow: hidden;
  }

  .template-page .rte table th,
  .template-page .rte table td,
  .onix-page__content table th,
  .onix-page__content table td {
    padding: 1.2rem 0.95rem;
    border: 1px solid rgba(255, 255, 255, 0.08);
    text-align: center;
    white-space: nowrap;
    font-size: 0.98rem;
    font-weight: 600;
    line-height: 1.35;
  }

  .template-page .rte table tr th:last-child,
  .template-page .rte table tr td:last-child,
  .onix-page__content table tr th:last-child,
  .onix-page__content table tr td:last-child {
    border-right-color: transparent;
  }

  .template-page .rte table th,
  .onix-page__content table th {
    background: #0f0f0f;
    color: #ffffff;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
  }

  .template-page .rte table td,
  .onix-page__content table td {
    background: linear-gradient(180deg, #f6f6f6 0%, #ececec 100%);
    color: #111111;
  }

  .template-page .rte table tr:nth-child(odd) td,
  .onix-page__content table tr:nth-child(odd) td {
    background: linear-gradient(180deg, #171717 0%, #101010 100%);
    color: #ffffff;
  }

  .template-page .rte table tr:nth-child(even) td,
  .onix-page__content table tr:nth-child(even) td {
    background: linear-gradient(180deg, #f6f6f6 0%, #ececec 100%);
    color: #111111;
  }

  .template-page .rte table tr:first-child th:first-child,
  .template-page .rte table tr:first-child td:first-child,
  .onix-page__content table tr:first-child th:first-child,
  .onix-page__content table tr:first-child td:first-child {
    border-top-left-radius: 24px;
  }

  .template-page .rte table tr:first-child th:last-child,
  .template-page .rte table tr:first-child td:last-child,
  .onix-page__content table tr:first-child th:last-child,
  .onix-page__content table tr:first-child td:last-child {
    border-top-right-radius: 24px;
  }

  .template-page .rte table tr:last-child th:first-child,
  .template-page .rte table tr:last-child td:first-child,
  .onix-page__content table tr:last-child th:first-child,
  .onix-page__content table tr:last-child td:first-child {
    border-bottom-left-radius: 24px;
  }

  .template-page .rte table tr:last-child th:last-child,
  .template-page .rte table tr:last-child td:last-child,
  .onix-page__content table tr:last-child th:last-child,
  .onix-page__content table tr:last-child td:last-child {
    border-bottom-right-radius: 24px;
  }

  .contact-block {
    display: grid;
    gap: 1rem;
    margin-top: 0.5rem;
  }

  .contact-item {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0.95rem;
    align-items: start;
    padding: 1.1rem 1.15rem;
    border: 1px solid rgba(17, 17, 17, 0.08);
    border-radius: 1.1rem;
    background: rgba(255, 255, 255, 0.72);
  }

  .contact-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 999px;
    background: rgba(17, 17, 17, 0.05);
    font-size: 1.15rem;
    line-height: 1;
  }

  .contact-content {
    display: grid;
    gap: 0.35rem;
  }

  .contact-title,
  .contact-text {
    margin: 0;
  }

  .contact-title {
    font-size: 0.74rem;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: rgba(17, 17, 17, 0.68);
  }

  .contact-text {
    color: #111111;
    line-height: 1.7;
  }

  .contact-cta {
    margin-top: 30px;
  }

  .contact-button {
    display: inline-block;
    width: 100%;
    text-align: center;
    padding: 14px 20px;
    background: #111;
    color: #fff;
    border-radius: 999px;
    text-decoration: none;
    font-size: 14px;
    font-weight: 500;
    letter-spacing: 0.5px;
    transition: all 0.2s ease;
  }

  .contact-button:hover,
  .contact-button:focus-visible {
    background: #000;
    color: #fff;
  }

  @media (max-width: 749px) {
    .onix-page {
      padding: 1.5rem 1rem 2.5rem;
      overflow-x: hidden;
    }

    .onix-page__inner,
    .onix-page__content {
      width: 100%;
      max-width: 100%;
      overflow-x: hidden;
    }

    .onix-page__content > * {
      width: 100%;
      max-width: 100%;
      box-sizing: border-box;
    }

    .template-page .rte table th,
    .template-page .rte table td,
    .onix-page__content table th,
    .onix-page__content table td {
      padding: 8px 10px;
      font-size: 12px;
    }

    .onix-page__table-scroll {
      border-radius: 0;
      box-shadow: none;
    }

    .template-page .rte table tr:first-child th:first-child,
    .template-page .rte table tr:first-child td:first-child,
    .onix-page__content table tr:first-child th:first-child,
    .onix-page__content table tr:first-child td:first-child {
      border-top-left-radius: 20px;
    }

    .template-page .rte table tr:first-child th:last-child,
    .template-page .rte table tr:first-child td:last-child,
    .onix-page__content table tr:first-child th:last-child,
    .onix-page__content table tr:first-child td:last-child {
      border-top-right-radius: 20px;
    }

    .template-page .rte table tr:last-child th:first-child,
    .template-page .rte table tr:last-child td:first-child,
    .onix-page__content table tr:last-child th:first-child,
    .onix-page__content table tr:last-child td:first-child {
      border-bottom-left-radius: 20px;
    }

    .template-page .rte table tr:last-child th:last-child,
    .template-page .rte table tr:last-child td:last-child,
    .onix-page__content table tr:last-child th:last-child,
    .onix-page__content table tr:last-child td:last-child {
      border-bottom-right-radius: 20px;
    }

    .onix-page__header {
      margin-bottom: 1.2rem;
      padding-bottom: 0.85rem;
    }

    .onix-page__content {
      font-size: 0.96rem;
      line-height: 1.68;
    }

    .onix-page__content h2 {
      font-size: 1.25rem;
    }

    .onix-page__content h3 {
      font-size: 1.08rem;
    }

    .contact-item {
      padding: 1rem;
      gap: 0.85rem;
    }

    .contact-icon {
      width: 2.3rem;
      height: 2.3rem;
      font-size: 1.05rem;
    }

    .contact-button {
      padding: 14px 20px;
      font-size: 14px;
    }
  }
/* END_SECTION:page */

/* START_SECTION:product (INDEX:30) */
/* ── « Souvent achetés ensemble » + réassurance (2026-08-20) ──
     .onix-product__content est un GRID à order (form=6, CSS historique
     trust=5, accordions=7) → nos blocs passent APRÈS le bouton ATC. */
  /* resserre la fin de fiche : le padding-bottom hérité (64px) éloignait
     trop « Vous aimerez aussi » (retour Yacine 2026-08-20). */
  section.onix-product.full-width { padding-bottom: 1.25rem; }
  .onix-product__content > .onix-bundle2 { order: 8; }
  .onix-product__content > .onix-product__trust { order: 9; }
  .onix-bundle2 {
    position: relative;
    margin: 1.5rem 0 0;
    padding: 1.3rem 1.1rem 1.35rem;
    border: 1px solid rgba(0, 200, 255, 0.22);
    border-radius: 1.2rem;
    background:
      radial-gradient(ellipse 65% 48% at 50% 0%, rgba(0, 200, 255, 0.16) 0%, transparent 62%),
      linear-gradient(180deg, #0b1220 0%, #070b14 100%);
    box-shadow: 0 18px 44px -22px rgba(2, 16, 24, 0.65);
    text-align: center;
    overflow: hidden;
    isolation: isolate;
  }
  /* lignes de terrain : médiane + rond central, derrière le contenu */
  .onix-bundle2::before {
    content: "";
    position: absolute;
    left: -4%;
    right: -4%;
    top: 118px;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(0, 200, 255, 0.28) 18%, rgba(0, 200, 255, 0.28) 82%, transparent);
    z-index: 0;
  }
  .onix-bundle2::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 118px;
    width: 92px;
    height: 92px;
    transform: translate(-50%, -50%);
    border: 1px solid rgba(0, 200, 255, 0.30);
    border-radius: 50%;
    z-index: 0;
  }
  .onix-bundle2 > * { position: relative; z-index: 1; }
  .onix-bundle2__title {
    margin: 0 0 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.7rem;
    font-size: 0.76rem;
    font-weight: 700;
    letter-spacing: 0.13em;
    text-transform: uppercase;
    color: #ffffff;
    text-wrap: nowrap;
  }
  .onix-bundle2__title::before,
  .onix-bundle2__title::after {
    content: "";
    flex: 1;
    max-width: 54px;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(0, 200, 255, 0.55));
  }
  .onix-bundle2__title::after {
    background: linear-gradient(90deg, rgba(0, 200, 255, 0.55), transparent);
  }
  .onix-bundle2__row {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    gap: 1rem;
    position: relative;
  }
  .onix-bundle2__item { flex: 0 1 132px; min-width: 0; }
  .onix-bundle2__imgwrap {
    display: block;
    border-radius: 0.9rem;
    overflow: hidden;
    background: linear-gradient(180deg, #f5f3f0 0%, #e9e7e3 100%);
    box-shadow:
      0 0 0 1px rgba(0, 200, 255, 0.25),
      0 10px 26px -12px rgba(0, 0, 0, 0.55);
  }
  .onix-bundle2__img {
    width: 100%;
    height: auto;
    aspect-ratio: 1;
    object-fit: cover;
    display: block;
  }
  .onix-bundle2__name {
    display: block;
    margin-top: 0.5rem;
    font-size: 0.73rem;
    line-height: 1.3;
    color: rgba(255, 255, 255, 0.55);
  }
  .onix-bundle2__name span { display: block; }
  .onix-bundle2__name span:first-child { font-weight: 700; color: #ffffff; }
  .onix-bundle2__plus {
    flex: 0 0 auto;
    align-self: center;
    width: 34px;
    height: 34px;
    margin: 0 -0.45rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #00c8ff;
    border: none;
    border-radius: 50%;
    box-shadow: 0 0 0 5px rgba(0, 200, 255, 0.16), 0 0 22px rgba(0, 200, 255, 0.45);
    font-size: 1.15rem;
    font-weight: 800;
    color: #021018;
    position: relative;
    z-index: 2;
  }
  .onix-bundle2__deal {
    margin: 1.05rem 0 0;
    display: flex;
    align-items: baseline;
    justify-content: center;
    flex-wrap: wrap;
    gap: 0.45rem;
  }
  .onix-bundle2__deal-label { font-size: 0.88rem; font-weight: 600; color: rgba(255, 255, 255, 0.75); }
  .onix-bundle2__price {
    font-size: 1.45rem;
    font-weight: 800;
    color: #00c8ff;
    letter-spacing: -0.01em;
    text-shadow: 0 0 18px rgba(0, 200, 255, 0.45);
  }
  .onix-bundle2__compare { font-size: 0.88rem; color: rgba(255, 255, 255, 0.38); }
  .onix-bundle2__save {
    align-self: center;
    padding: 0.18rem 0.55rem;
    background: #00c8ff;
    border: none;
    border-radius: 999px;
    font-size: 0.74rem;
    font-weight: 800;
    color: #021018;
    box-shadow: 0 0 14px rgba(0, 200, 255, 0.4);
  }
  .onix-bundle2__btn {
    position: relative;
    margin-top: 0.95rem;
    width: 100%;
    padding: 0.9rem 1rem;
    border: none;
    border-radius: 999px;
    background: #00c8ff;
    color: #021018;
    font-size: 0.96rem;
    font-weight: 800;
    cursor: pointer;
    overflow: hidden;
    box-shadow: 0 10px 26px -8px rgba(0, 200, 255, 0.55);
    transition: transform 0.12s ease, box-shadow 0.12s ease;
  }
  .onix-bundle2__btn:active { transform: scale(0.985); }
  .onix-bundle2__btn-label { position: relative; z-index: 1; }
  /* sweep lumineux — même signature que le bouton OFFRE du header */
  .onix-bundle2__btn-sweep {
    position: absolute;
    top: 0;
    bottom: 0;
    left: -40%;
    width: 34%;
    background: linear-gradient(105deg, transparent 0%, rgba(255, 255, 255, 0.55) 50%, transparent 100%);
    transform: skewX(-18deg);
    animation: onixBundleSweep 3s ease-in-out infinite;
    z-index: 0;
    pointer-events: none;
  }
  @keyframes onixBundleSweep {
    0%, 55% { left: -40%; }
    85%, 100% { left: 120%; }
  }
  .onix-bundle2__hint {
    margin: 0.6rem 0 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.32rem;
    font-size: 0.74rem;
    font-weight: 500;
    color: #2ee6a8;
  }
  .onix-bundle2__hint svg { width: 13px; height: 13px; flex: 0 0 auto; }
  @media (prefers-reduced-motion: reduce) {
    .onix-bundle2__btn-sweep { animation: none; display: none; }
  }
  .onix-product__trust {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.5rem;
    margin: 1rem 0 0;
  }
  .onix-product__trust-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.35rem;
    padding: 0.7rem 0.4rem;
    background: #fff;
    border: 1px solid #e6e4e1;
    border-radius: 0.7rem;
    cursor: pointer;
    font: inherit;
  }
  .onix-product__trust-item svg { width: 22px; height: 22px; color: #0b7285; }
  .onix-product__trust-item strong { font-size: 0.68rem; font-weight: 600; color: #333; line-height: 1.2; text-align: center; }
  .onix-product__trust-overlay {
    position: fixed;
    inset: 0;
    z-index: 10000;
    background: rgba(0, 0, 0, 0.5);
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
  }
  .onix-product__trust-overlay[style*="flex"] { display: flex; }
  .onix-product__trust-modal {
    position: relative;
    max-width: 380px;
    width: 100%;
    background: #fff;
    border-radius: 1rem;
    padding: 1.6rem 1.4rem;
    text-align: center;
  }
  .onix-product__trust-modal-icon svg { width: 34px; height: 34px; color: #0b7285; }
  .onix-product__trust-modal-title { display: block; margin: 0.5rem 0 0.35rem; font-size: 1.05rem; }
  .onix-product__trust-modal-text { margin: 0; font-size: 0.9rem; color: #555; line-height: 1.5; }
  .onix-product__trust-close {
    position: absolute;
    top: 0.5rem;
    right: 0.75rem;
    border: none;
    background: none;
    font-size: 1.6rem;
    line-height: 1;
    cursor: pointer;
    color: #999;
  }

  /* Paiement en plusieurs fois (Klarna) sous le prix */
  /* Pastille Klarna (rose de marque) — ressort fort sur le fond clair de la fiche */
  /* Mention Klarna : petit encadré arrondi rose (rose Klarna) + logo officiel,
     rendue juste au-dessus du bouton ATC. */
  .onix-product__klarna {
    display: flex;
    flex-wrap: wrap;
    width: fit-content;
    max-width: 100%;
    margin: 0 auto 0.6rem;
    align-items: center;
    justify-content: center;
    gap: 0.3rem;
    padding: 0.32rem 0.72rem;
    border-radius: 0.6rem;
    background: #ffb3c7;
    color: #17120f;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.01em;
  }
  .onix-product__klarna-logo {
    height: 0.92rem;
    width: auto;
    display: inline-block;
    vertical-align: middle;
  }

  /* Flocage plus vendeur : badge « Offert » + accroche */
  .onix-product__flocage-free {
    display: inline-flex;
    align-items: center;
    gap: 0.2rem;
    margin-left: 0.45rem;
    padding: 0.14rem 0.5rem;
    border-radius: 999px;
    background: rgba(6, 214, 160, 0.18);
    color: #06d6a0;
    font-size: 0.6rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    vertical-align: middle;
    white-space: nowrap;
  }
  /* ── Récemment vus ── */
  .onix-rv { margin: 2rem 0 0; }
  .onix-rv__title {
    margin: 0 0 0.9rem;
    font-size: 0.82rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #111;
    text-align: center;
  }
  .onix-rv__row {
    display: flex;
    gap: 0.8rem;
    overflow-x: auto;
    padding: 0 0 0.5rem;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
  }
  .onix-rv__card {
    flex: 0 0 126px;
    min-width: 0;
    max-width: 126px;
    scroll-snap-align: start;
    text-decoration: none;
    color: inherit;
  }
  .onix-rv__img {
    width: 100%;
    aspect-ratio: 3 / 4;
    object-fit: cover;
    display: block;
    border-radius: 10px;
    background: #eceae6;
  }
  .onix-rv__name {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    margin-top: 0.45rem;
    font-size: 0.78rem;
    font-weight: 600;
    color: #111;
    line-height: 1.25;
    overflow: hidden;
  }
  .onix-rv__price { display: block; margin-top: 0.15rem; font-size: 0.78rem; color: #666; }
/* END_SECTION:product */

/* START_SECTION:search (INDEX:31) */
.search-page {
    padding: clamp(2rem, 4vw, 3rem) 1.25rem clamp(3rem, 5vw, 5rem);
    background: #ffffff;
    color: #111111;
    min-height: 60vh;
  }

  .search-page__inner {
    width: min(100%, 78rem);
    margin: 0 auto;
  }

  .search-page__title {
    margin: 0 0 1.5rem;
    font-size: clamp(1.4rem, 3vw, 2rem);
    font-weight: 900;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #111111;
  }

  /* « 47 MAILLOTS POUR » repasse au second plan : ce qui doit rester lisible
     d'un coup d'œil, c'est CE QU'IL A CHERCHÉ — demandé le 15/08.
     ⚠️ `display: block` sur le seul contexte, pas un flex sur le h1 : le même
       h1 sert aussi les deux branches sans résultat, où il ne contient qu'un
       texte nu. Un flex y ferait un élément anonyme et je perdrais la taille. */
  .search-page__titre-contexte {
    display: block;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.16em;
    color: rgba(17, 17, 17, 0.45);
  }

  .search-page__titre-terme {
    display: block;
    font-size: clamp(1.6rem, 4vw, 2.4rem);
    letter-spacing: 0.03em;
    line-height: 1.1;
    /* Une requête longue (« esperance sportive de tunis ») ne doit pas pousser
       la page en scroll horizontal. */
    overflow-wrap: anywhere;
  }

  .search-page__status {
    font-size: 0.9rem;
    color: rgba(17, 17, 17, 0.55);
    margin: 0 0 1.5rem;
  }

  /* DEUX PAR RANGÉE SUR MOBILE. Essayé à trois le 15/08 à sa demande, puis
     ramené à deux le même jour : « 3 ça rend mal ». À 375 px, trois colonnes
     laissent 105 px par carte — le nom du maillot est tronqué à
     « Real Madrid - … » et la photo devient une vignette. */
  .search-results {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
  }

  @media (min-width: 750px) {
    .search-results {
      grid-template-columns: repeat(5, minmax(0, 1fr));
    }
  }

  .search-page__pagination {
    grid-column: 1 / -1;
    display: flex;
    justify-content: center;
    gap: 1rem;
    padding: 2rem 0 0;
  }

  /* ⚠️ `hidden` NE SUFFIT PAS ICI. La règle ci-dessus pose `display: flex`, qui
     bat la feuille du navigateur : l'élément restait visible au milieu de la
     grille alors que le JS l'avait masqué. Constaté par lui le 15/08.
     ⚠️ MÊME PIÈGE SUR LES CARTES, et je l'ai raté une deuxième fois le même
       jour : `.onix-collection-card` porte `display: flex`, donc les cartes
       « masquées » restaient à l'écran — un maillot du PSG s'affichait au milieu
       des Real. Ma vérification lisait l'attribut `hidden` au lieu du display
       CALCULÉ, et voyait donc 53 alors que 54 s'affichaient. */
  /* Les équipes : mêmes pastilles, plus discrètes — c'est une PRÉCISION sur ce
     que la recherche a ramassé, pas le filtre principal. */
  .search-equipes {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    margin: 0 0 0.75rem;
  }

  .search-equipe {
    flex: 0 0 auto;
    padding: 0.3rem 0.6rem;
    border: 1px solid rgba(17, 17, 17, 0.12);
    border-radius: 999px;
    background: rgba(17, 17, 17, 0.03);
    color: rgba(17, 17, 17, 0.75);
    font-family: inherit;
    font-size: 0.68rem;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    transition: background 160ms ease, color 160ms ease, border-color 160ms ease;
  }

  .search-equipe:hover { border-color: rgba(17, 17, 17, 0.35); }

  .search-equipe.est-actif {
    background: #111111;
    border-color: #111111;
    color: #ffffff;
  }

  .search-equipe__n { opacity: 0.55; margin-left: 0.3rem; }

  .search-equipes__reste {
    align-self: center;
    font-size: 0.68rem;
    color: rgba(17, 17, 17, 0.45);
    padding-left: 0.15rem;
  }

  /* ⚠️ LA BARRE PASSE À LA LIGNE, ELLE NE DÉFILE PAS — corrigé le 15/08 :
     « sur mobile on voit pas tout d'un coup d'œil, c'est pas bon, faut vraiment
     faciliter le client pour éviter la friction ». En défilement horizontal, la
     pastille « Rétro » était coupée au bord de l'écran : un filtre qu'on ne voit
     pas n'existe pas. Deux lignes visibles valent mieux qu'une ligne tronquée. */
  /* ⚠️ LES QUATRE CATÉGORIES TIENNENT SUR UNE SEULE LIGNE — « faut que ça soit
     tout le temps affiché d'un coup » (15/08). Elles se PARTAGENT la largeur au
     lieu de passer à la ligne : chacune prend ce qu'il lui faut, et le texte
     rétrécit si besoin. Pas de `flex-wrap`, pas de défilement : rien ne sort de
     l'écran, rien n'est caché. */
  .search-filtres {
    display: flex;
    gap: 0.3rem;
    margin: 0 0 0.6rem;
  }

  .search-filtre {
    flex: 1 1 0;
    min-width: 0;
    padding: 0.45rem 0.2rem;
    border: 1px solid rgba(17, 17, 17, 0.18);
    border-radius: 999px;
    background: transparent;
    color: #111111;
    font-family: inherit;
    /* ⚠️ 0,60 rem, mesuré et pas choisi à l'œil : à 0,66 rem « CONCEPT 20 »
       débordait de ses 80 px et se faisait tronquer. Un libellé coupé est un
       filtre qu'on ne lit pas. */
    font-size: 0.60rem;
    font-weight: 700;
    letter-spacing: 0;
    text-transform: uppercase;
    cursor: pointer;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: background 160ms ease, border-color 160ms ease, color 160ms ease;
  }

  /* Le TRI, sur sa propre ligne et aligné à droite : ce n'est pas un choix de
     catégorie, il ne doit pas se lire comme la cinquième pastille. */
  .search-tri {
    display: flex;
    justify-content: flex-end;
    margin: 0 0 1rem;
  }

  .search-tri__btn {
    border: 0;
    background: none;
    padding: 0.2rem 0;
    font-family: inherit;
    font-size: 0.72rem;
    font-weight: 600;
    color: rgba(17, 17, 17, 0.55);
    cursor: pointer;
    transition: color 160ms ease;
  }

  .search-tri__btn:hover { color: #111111; }

  .search-tri__btn.est-actif { color: #111111; text-decoration: underline; text-underline-offset: 4px; }

  .search-tri__fleche { display: inline-block; margin-right: 0.3rem; transition: transform 160ms ease; }
  .search-tri__btn.est-actif .search-tri__fleche { transform: translateY(1px); }

  @media (min-width: 750px) {
    .search-filtres { gap: 0.5rem; }
    .search-filtre { flex: 0 0 auto; padding: 0.45rem 0.95rem; font-size: 0.78rem; letter-spacing: 0.06em; }
  }

  .search-filtre:hover { border-color: rgba(17, 17, 17, 0.45); }

  .search-filtre.est-actif {
    background: #111111;
    border-color: #111111;
    color: #ffffff;
  }

  .search-filtre__n {
    opacity: 0.55;
    margin-left: 0.22rem;
    font-weight: 600;
    font-size: 0.92em;
  }

  /* Le filtre de CATÉGORIE se cumule avec celui de la RECHERCHE : deux
     mécanismes distincts, deux sélecteurs distincts. Une carte masquée par l'un
     ou par l'autre ne doit pas réapparaître quand le second la relâche. */
  .search-results .onix-collection-card.hors-categorie,
  .search-results .onix-collection-card.hors-equipe { display: none !important; }

  .search-equipes[hidden],
  .search-equipe[hidden],
  .search-tri[hidden],
  .search-filtres[hidden],
  .search-filtre[hidden],
  .search-page__pagination[hidden],
  .search-page__status[hidden],
  .search-page__title[hidden],
  .search-results .onix-collection-card[hidden] {
    display: none !important;
  }

  .search-page__pagination a {
    color: #00c8ff;
    text-decoration: none;
    font-weight: 600;
  }
/* END_SECTION:search */

/* CSS from block stylesheet tags */
/* START_BLOCK:group (INDEX:32) */
.group {
    display: flex;
    flex-wrap: nowrap;
    overflow: hidden;
    width: 100%;
  }

  .group--horizontal {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    padding: 0 var(--padding);
  }

  .group--vertical {
    flex-direction: column;
    align-items: var(--alignment);
    padding: var(--padding) 0;
  }
/* END_BLOCK:group */

/* START_BLOCK:text (INDEX:33) */
.text {
    text-align: var(--text-align);
  }
  .text--title {
    font-size: 2rem;
    font-weight: 700;
  }
  .text--subtitle {
    font-size: 1.5rem;
  }
/* END_BLOCK:text */

/* CSS from snippet stylesheet tags */
/* START_SNIPPET:cookie-banner (INDEX:36) */
/* ─── Hide Shopify's default banner ─────────────────────────────── */
  #shopify-pc__banner,
  #shopify-pc__banner__dialog,
  .shopify-pc__banner,
  div[data-shopify-pc-banner] {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
  }

  /* ─── Notre bandeau cookies — carte flottante premium ───────────── */
  .onix-cookie-bar {
    position: fixed;
    inset-block-end: max(0.9rem, env(safe-area-inset-bottom));
    inset-inline: 0;
    margin-inline: auto;
    width: min(640px, calc(100% - 1.5rem));
    /* ⚠️ 9998 le place au-dessus de TOUT ce qui est ancré au même bas d'écran :
       tiroir de panier (1200), barre d'achat collante (999), barre de remise.
       Mesuré le 23/08 : le bouton « Je commande » recevait 0 clic tant que le
       bandeau était levé — un visiteur neuf ne pouvait pas commander.
       Il GARDE ce z-index (il doit rester lisible au-dessus de la page), mais
       il ne se pose plus DEVANT : tant qu'il est levé, les barres du bas sont
       MASQUÉES (classe `onix-cookies-a-repondre` sur <html>) et il occupe le bas
       seul ; il s'escamote aussi dès qu'une surface modale s'ouvre. Baisser le
       z-index n'aurait rien réglé : le problème est la SUPERPOSITION, pas l'ordre
       de peinture. ⚠️ Une première version publiait sa HAUTEUR et les barres s'y
       ajoutaient — le trou restait à l'écran après le consentement (24/08). */
    z-index: 9998; /* below header drawer (10000) but above page content */

    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.9rem;

    /* ⚠️ COMPACT, ET C'EST MESURÉ. Le bandeau faisait 108 px de haut sur un
       écran de 844 — deux lignes de texte plus deux boutons empilés dans leur
       propre rangée. Additionné à la barre d'achat (68 px), il mangeait 21 % de
       la hauteur utile, et il ne restait plus rien à l'endroit où le client
       décide d'acheter. Le 24/08 il ne voyait plus ses boutons du tout.
       (Ce jour-là c'était la barre de PRÉVISUALISATION Shopify — 776→844,
       absente du site publié — qui les recouvrait ; mais un bandeau de consentement
       n'a pas à occuper un cinquième de l'écran pour autant.) */
    padding: 0.55rem 0.55rem 0.55rem 0.85rem;

    background: rgba(17, 17, 20, 0.9);
    backdrop-filter: saturate(140%) blur(16px);
    -webkit-backdrop-filter: saturate(140%) blur(16px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 16px;
    box-shadow: 0 14px 40px -10px rgba(0, 0, 0, 0.6);

    color: #f4f4f6;
    font-size: 0.75rem; /* 12px */
    line-height: 1.35;

    transform: translateY(0);
    transition: transform 0.28s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.2s ease;
    will-change: transform;
  }
  /* Escamoté — pas retiré : une modale ouverte ne doit rien avoir devant elle,
     et le bandeau revient intact à sa fermeture, sans re-demander le consentement. */
  .onix-cookie-bar.est-eclipse {
    transform: translateY(calc(100% + 1.5rem));
    opacity: 0;
    pointer-events: none;
  }

  /* ⛔ TANT QUE LE BANDEAU EST LÀ, LE BAS EST À LUI SEUL.
     Ces trois barres reviennent d'elles-mêmes dès que la classe part : elles
     n'ont aucune valeur à recalculer, elles reprennent simplement leur place. */
  html.onix-cookies-a-repondre .onix-sticky-cart,
  html.onix-cookies-a-repondre .onix-discount-bar,
  html.onix-cookies-a-repondre .onix-back-to-top {
    opacity: 0;
    pointer-events: none;
    transform: translateY(0.5rem);
    transition: opacity 180ms ease, transform 180ms ease;
  }

  .onix-cookie-bar[hidden] {
    display: none;
  }
  .onix-cookie-bar.is-leaving {
    transform: translateY(calc(100% + 1.5rem));
    opacity: 0;
    pointer-events: none;
  }

  .onix-cookie-bar__text {
    margin: 0;
    flex: 1 1 auto;
    min-width: 0;
  }

  .onix-cookie-bar__link {
    color: #00c8ff; /* accent marque */
    text-decoration: underline;
    text-underline-offset: 2px;
    text-decoration-thickness: 1px;
    margin-inline-start: 0.3rem;
    white-space: nowrap;
    transition: opacity 0.15s ease;
  }
  .onix-cookie-bar__link:hover,
  .onix-cookie-bar__link:focus-visible {
    opacity: 0.8;
  }

  .onix-cookie-bar__actions {
    display: flex;
    gap: 0.45rem;
    flex: 0 0 auto;
  }

  .onix-cookie-bar__btn {
    appearance: none;
    border: 1px solid transparent;
    border-radius: 999px;
    padding: 0.5rem 1rem;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    cursor: pointer;
    transition: background 0.16s ease, color 0.16s ease, border-color 0.16s ease, transform 0.16s ease;
    font-family: inherit;
    line-height: 1;
    white-space: nowrap;
  }
  .onix-cookie-bar__btn:focus-visible {
    outline: 2px solid #00c8ff;
    outline-offset: 2px;
  }

  .onix-cookie-bar__btn--ghost {
    background: transparent;
    color: #c9c9cf;
    border-color: rgba(255, 255, 255, 0.2);
  }
  .onix-cookie-bar__btn--ghost:hover,
  .onix-cookie-bar__btn--ghost:focus-visible {
    color: #fff;
    border-color: rgba(255, 255, 255, 0.45);
    background: rgba(255, 255, 255, 0.06);
  }

  .onix-cookie-bar__btn--solid {
    background: #fff;
    color: #0f0f12;
    border-color: #fff;
  }
  .onix-cookie-bar__btn--solid:hover,
  .onix-cookie-bar__btn--solid:focus-visible {
    background: #eaeaee;
    border-color: #eaeaee;
    transform: translateY(-1px);
  }

  /* Mobile : carte empilée — texte ENTIER lisible (plus de troncature),
     les 2 boutons en ligne dessous avec des cibles tactiles élargies. */
  /* ⚠️ C'EST CE BLOC QUI COMMANDE SUR MOBILE, pas la règle de base.
     Le 24/08 j'ai compacté le bandeau dans la règle du haut et mesuré… aucun
     changement : 13,6/15,2 px à l'écran, soit exactement le `0.85rem 0.95rem`
     d'ici. Sur 390 px c'est ce media query qui s'applique, et il redéfinit tout.
     ➜ Une valeur qu'on modifie se cherche d'abord dans le RENDU
     (`getComputedStyle`), pas dans la première règle qui porte le bon sélecteur.
     C'est le même piège que `lint-css-sections.js` surveille, pris à l'envers :
     là c'est la surcharge qui gagnait, et je l'avais oubliée.

     `flex-direction: column` empile le texte AU-DESSUS des boutons : 34 px de
     texte + 33 px de boutons + les marges = 106 px, un cinquième d'un écran de
     844. Sur une ligne, tout tient en ~56 px et le client garde sa page. */
  @media (max-width: 600px) {
    .onix-cookie-bar {
      flex-direction: row;
      align-items: center;
      gap: 0.55rem;
      width: calc(100% - 1.1rem);
      inset-block-end: max(0.5rem, env(safe-area-inset-bottom));
      padding: 0.5rem 0.55rem 0.5rem 0.8rem;
      border-radius: 13px;
      font-size: 0.72rem;
      line-height: 1.3;
    }
    .onix-cookie-bar__text {
      text-align: start;
    }
    /* Les boutons ne s'étirent plus sur toute la largeur : côte à côte, ils
       tiennent sur la même ligne que le texte. */
    .onix-cookie-bar__actions { flex: 0 0 auto; }
    .onix-cookie-bar__btn { padding: 0.4rem 0.7rem; white-space: nowrap; }
    .onix-cookie-bar__actions {
      gap: 0.5rem;
    }
    .onix-cookie-bar__btn {
      flex: 1 1 0;
      padding: 0.6rem 0.7rem;
      font-size: 0.74rem;
    }
  }

  /* Reduced motion: skip the slide animation. */
  @media (prefers-reduced-motion: reduce) {
    .onix-cookie-bar {
      transition: none;
    }
  }
/* END_SNIPPET:cookie-banner */

/* START_SNIPPET:header-mobile-drawer (INDEX:38) */
.onix-mobile-drawer__social {
    display: flex;
    gap: 0.6rem;
    margin-top: 0.9rem;
    padding-top: 0.9rem;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
  }
  .onix-mobile-drawer__social-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.55rem 0.85rem;
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 0.7rem;
    color: rgba(255, 255, 255, 0.88);
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    text-decoration: none;
    transition: background 0.16s ease, border-color 0.16s ease, color 0.16s ease;
  }
  .onix-mobile-drawer__social-badge svg {
    width: 1.15rem;
    height: 1.15rem;
    flex-shrink: 0;
  }
  .onix-mobile-drawer__social-badge:hover {
    background: rgba(0, 200, 255, 0.1);
    border-color: rgba(0, 200, 255, 0.5);
    color: #ffffff;
  }
/* END_SNIPPET:header-mobile-drawer */

/* START_SNIPPET:image (INDEX:41) */
.image {
    position: relative;
    overflow: hidden;
  }

  .image > img {
    width: 100%;
    height: auto;
  }
/* END_SNIPPET:image */

/* START_SNIPPET:onix-favorites (INDEX:45) */
/* ── Cœur sur les cartes produit ── */
  .onix-fav {
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    z-index: 3;
    width: 2rem;
    height: 2rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: rgba(10, 11, 14, 0.55);
    -webkit-backdrop-filter: blur(2px);
    backdrop-filter: blur(2px);
    cursor: pointer;
    transition: transform 0.15s ease, background 0.15s ease;
  }
  .onix-fav:hover { background: rgba(10, 11, 14, 0.78); }
  .onix-fav:active { transform: scale(0.88); }
  .onix-fav__icon { width: 1.15rem; height: 1.15rem; fill: none; stroke: #fff; stroke-width: 2; }
  .onix-fav.is-fav { background: rgba(239, 71, 111, 0.18); }
  .onix-fav.is-fav .onix-fav__icon { fill: #ef476f; stroke: #ef476f; }

  /* ── Compteur favoris dans l'en-tête ── */
  .header__fav-count {
    position: absolute;
    top: -2px;
    right: -4px;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    border-radius: 999px;
    background: #ef476f;
    color: #fff;
    font-size: 0.6rem;
    font-weight: 800;
    line-height: 16px;
    text-align: center;
  }

  /* ── Fenêtre « Tes favoris » ── */
  .onix-fav-modal { position: fixed; inset: 0; z-index: 100060; display: flex; align-items: center; justify-content: center; padding: 1rem; }
  .onix-fav-modal[hidden] { display: none; }
  .onix-fav-modal__backdrop { position: absolute; inset: 0; background: rgba(4, 6, 10, 0.86); }
  .onix-fav-modal__panel {
    position: relative;
    width: min(680px, 100%);
    max-height: calc(100dvh - 2rem);
    overflow-y: auto;
    background: linear-gradient(180deg, #15171d 0%, #0c0d12 100%);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 20px;
    padding: 1.2rem 1.2rem 1.4rem;
    color: #f5f5f7;
    transform: translateY(8px) scale(0.99);
    opacity: 0;
    transition: transform 0.28s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.22s ease;
  }
  .onix-fav-modal.is-open .onix-fav-modal__panel { transform: none; opacity: 1; }
  .onix-fav-modal__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1rem; }
  .onix-fav-modal__title { margin: 0; font-size: 1.05rem; font-weight: 800; }
  .onix-fav-modal__close { width: 2rem; height: 2rem; border: none; border-radius: 50%; background: rgba(255, 255, 255, 0.08); color: #fff; font-size: 0.85rem; cursor: pointer; }
  .onix-fav-modal__close:hover { background: rgba(255, 255, 255, 0.18); }
  .onix-fav-modal__empty { margin: 1.5rem 0; text-align: center; color: rgba(255, 255, 255, 0.55); font-size: 0.9rem; }
  .onix-fav-modal__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(8.5rem, 1fr)); gap: 0.9rem; }
  .onix-fav-card2 { position: relative; }
  .onix-fav-card2__rm {
    position: absolute; top: 0.4rem; right: 0.4rem; z-index: 2;
    width: 1.9rem; height: 1.9rem; display: inline-flex; align-items: center; justify-content: center;
    padding: 0; border: none; border-radius: 50%; background: rgba(10, 11, 14, 0.6); cursor: pointer;
  }
  .onix-fav-card2__rm svg { width: 1.05rem; height: 1.05rem; fill: #ef476f; stroke: #ef476f; stroke-width: 2; }
  .onix-fav-card2__link { display: block; text-decoration: none; color: inherit; }
  .onix-fav-card2__media { width: 100%; aspect-ratio: 3 / 4; border-radius: 10px; overflow: hidden; background: rgba(255, 255, 255, 0.05); }
  .onix-fav-card2__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
  .onix-fav-card2__name { display: block; margin-top: 0.4rem; font-size: 0.76rem; color: rgba(255, 255, 255, 0.85); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .onix-fav-card2__price { display: block; margin-top: 0.1rem; font-size: 0.8rem; font-weight: 700; color: #fff; }
  @media (prefers-reduced-motion: reduce) { .onix-fav-modal__panel { transition: none; } }
/* END_SNIPPET:onix-favorites */

/* START_SNIPPET:onix-product-card (INDEX:47) */
.onix-collection-card {
    display: flex;
    flex-direction: column;
    text-align: center;
    padding: 0;
    background: transparent;
    cursor: pointer;
  }

  .onix-collection-card__visual {
    position: relative;
    width: 100%;
    aspect-ratio: 3 / 4;
    border-radius: 10px;
    overflow: hidden;
    background: #e6e4e1;
    isolation: isolate;
  }

  .onix-collection-card__media {
    display: block;
    width: 100%;
    height: 100%;
    text-decoration: none;
  }

  .onix-collection-card__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 450ms ease;
  }

  .onix-collection-card:hover .onix-collection-card__img {
    transform: scale(1.04);
  }

  .onix-collection-card__no-img {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f2f2f2;
  }

  .onix-collection-card__svg-placeholder {
    width: 60%;
    height: 60%;
    color: #cccccc;
  }

  /* Nom en overlay blanc sur le bas de l'image (dégradé sombre pour lisibilité) */
  .onix-collection-card__overlay {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 30px 40px 8px 10px;
    text-align: center;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.55) 0%, rgba(0, 0, 0, 0.15) 60%, rgba(0, 0, 0, 0) 100%);
    pointer-events: none;
    z-index: 1;
  }

  .onix-collection-card__name {
    display: block;
    color: #ffffff;
    line-height: 1.3;
  }

  .onix-collection-card__name-line {
    display: block;
    max-width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 12px;
    font-weight: 700;
    color: #ffffff;
    text-transform: none;
    letter-spacing: 0.01em;
  }

  .onix-collection-card__name-line--2 {
    font-size: 11px;
    font-weight: 400;
    color: rgba(255, 255, 255, 0.82);
    margin-top: 1px;
  }

  /* Pastille « + » glass posée sur l'image */
  .onix-collection-card__add {
    position: absolute;
    bottom: 8px;
    right: 8px;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    padding: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.18);
    border: 1px solid rgba(255, 255, 255, 0.35);
    color: #ffffff;
    cursor: pointer;
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    transition: background 180ms ease, transform 180ms ease, border-color 180ms ease;
  }

  .onix-collection-card__add:hover {
    background: rgba(255, 255, 255, 0.32);
    border-color: rgba(255, 255, 255, 0.6);
    transform: scale(1.1);
  }

  .onix-collection-card__add:active {
    transform: scale(0.94);
  }

  /* Prix seul sous l'image */
  /* `flex-wrap` : trois éléments au lieu de deux depuis le 17/08 — sur une
     grille à 2 colonnes en 320px, « 24,99€ 34,99€ -10€ » débordait de la carte.
     Il passe à la ligne au lieu de sortir du cadre. */
  .onix-collection-card__meta {
    display: flex;
    align-items: baseline;
    justify-content: center;
    flex-wrap: wrap;
    gap: 3px 5px;
    padding: 7px 2px 0;
    font-size: 16px;
    font-weight: 700;
    color: var(--onix-pcard-price, #666666);
    text-align: center;
    text-decoration: none;
  }

  .onix-collection-card__price {
    color: var(--onix-pcard-price, #666666);
  }

  .onix-collection-card__compare {
    font-size: 1em;
    font-weight: 400;
    color: var(--onix-pcard-compare, rgba(0, 0, 0, 0.4));
    text-decoration: line-through;
  }
/* END_SNIPPET:onix-product-card */

/* START_SNIPPET:onix-promo-product-card (INDEX:48) */
.onix-promo-pcard {
    display: flex;
    flex-direction: column;
    text-align: center;
    padding: 0;
    background: transparent;
    cursor: pointer;
    min-width: 0;
  }

  .onix-promo-pcard__visual {
    position: relative;
    width: 100%;
    aspect-ratio: 3 / 4;
    border-radius: 10px;
    overflow: hidden;
    background: #e6e4e1;
    isolation: isolate;
  }

  .onix-promo-pcard__media {
    display: block;
    width: 100%;
    height: 100%;
    text-decoration: none;
  }

  .onix-promo-pcard__image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 450ms ease;
  }

  .onix-promo-pcard__image--placeholder {
    background: #eeeeee;
  }

  .onix-promo-pcard:hover .onix-promo-pcard__image,
  .onix-promo-pcard:focus-within .onix-promo-pcard__image {
    transform: scale(1.04);
  }

  /* Nom en overlay blanc sur le bas de l'image (dégradé sombre pour lisibilité) */
  .onix-promo-pcard__overlay {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 26px 32px 7px 8px;
    text-align: center;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.55) 0%, rgba(0, 0, 0, 0.15) 60%, rgba(0, 0, 0, 0) 100%);
    pointer-events: none;
    z-index: 1;
  }

  .onix-promo-pcard__name {
    display: block;
    color: #ffffff;
    line-height: 1.3;
  }

  .onix-promo-pcard__name-line {
    display: block;
    max-width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 11px;
    font-weight: 700;
    color: #ffffff;
    text-transform: none;
    letter-spacing: 0.01em;
  }

  .onix-promo-pcard__name-line--2 {
    font-size: 10px;
    font-weight: 400;
    color: rgba(255, 255, 255, 0.82);
    margin-top: 1px;
  }

  /* Pastille « + » glass posée sur l'image */
  .onix-promo-pcard__plus {
    position: absolute;
    bottom: 8px;
    right: 8px;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    padding: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.18);
    border: 1px solid rgba(255, 255, 255, 0.35);
    color: #ffffff;
    cursor: pointer;
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    transition: background 180ms ease, transform 180ms ease, border-color 180ms ease;
  }

  .onix-promo-pcard__plus:hover {
    background: rgba(255, 255, 255, 0.32);
    border-color: rgba(255, 255, 255, 0.6);
    transform: scale(1.1);
  }

  .onix-promo-pcard__plus:active {
    transform: scale(0.94);
  }

  /* Prix seul sous l'image */
  .onix-promo-pcard__meta {
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 5px;
    padding: 7px 2px 0;
    font-size: 16px;
    font-weight: 700;
    color: var(--onix-pcard-price, #666666);
    text-align: center;
    text-decoration: none;
  }

  .onix-promo-pcard__price {
    color: var(--onix-pcard-price, #666666);
  }

  .onix-promo-pcard__compare {
    font-size: 1em;
    font-weight: 400;
    color: var(--onix-pcard-compare, rgba(0, 0, 0, 0.4));
    text-decoration: line-through;
  }

  @media (max-width: 999px) {
    .onix-promo-pcard__name-line {
      font-size: 10px;
    }
    .onix-promo-pcard__name-line--2 {
      font-size: 9px;
    }
    .onix-promo-pcard__meta {
      font-size: 12px;
      gap: 4px;
      padding-top: 6px;
    }
  }
/* END_SNIPPET:onix-promo-product-card */

/* START_SNIPPET:onix-section-wave (INDEX:49) */
.onix-wave {
    position: absolute;
    left: 0;
    width: 100%;
    height: clamp(48px, 7vw, 96px);
    line-height: 0;
    pointer-events: none;
    z-index: 0;
  }
  .onix-wave svg {
    display: block;
    width: 100%;
    height: 100%;
  }
  .onix-wave--top { top: 0; }
  .onix-wave--bottom { bottom: 0; }
/* END_SNIPPET:onix-section-wave */