/** Shopify CDN: Minification failed

Line 7268:4 Unexpected "{"
Line 7268:5 Expected identifier but found "%"
Line 7269:59 Unexpected bad string token
Line 7269:74 Unterminated string token
Line 7270:60 Unexpected "`"
Line 7271:52 Unexpected "`"
Line 7271:78 Unterminated string token
Line 7273:84 Unterminated string token
Line 7280:83 Unterminated string token
Line 7283: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. */
  /* ⛔ LE FOND N'EST PLUS SUR LE HEADER — 31/08. Sa demande : la capsule aussi
       sur PC, pas seulement sur mobile. Tant que `.site-header` garde un fond,
       une bande pleine largeur se dessine derrière la capsule et l'effet
       flottant est perdu. Le fond, le flou et la bordure vivent donc sur
       `.header__nav`, à toutes les largeurs. */
  .site-header {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 100;
    display: flex;
    flex-direction: column;
    background: transparent;
    transition: background 0.3s ease, transform 0.3s ease, opacity 0.3s ease;
  }

  /* L'annonce reprend à son compte le fond que le header lui donnait, pour que
     son apparence ne change pas d'un pixel. */
  .header-ann {
    background: rgba(0, 0, 0, 0.42);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
  }

  /* 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;
    /* ══ LA CAPSULE FLOTTANTE — toutes largeurs, 31/08 ═══════════════════
       La marge latérale suit la largeur d'écran : serrée sur mobile, plus
       généreuse sur grand écran, où une capsule collée aux bords ne flotterait
       pas. Gauche et droite viennent de la MÊME valeur, donc elle est centrée
       par construction et non par réglage. */
    margin: 0.5rem clamp(0.85rem, 2.2vw, 2.6rem) 0;
    padding: 0.45rem clamp(1.35rem, 2.4vw, 2.2rem);
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.42);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.06);
    overflow: hidden;
  }

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

  .site-header--solid .header__nav {
    background: rgba(0, 0, 0, 0.85);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
  }

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

  .site-header.is-scrolled {
    position: fixed;
  }

  /* 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;
  }

  /* ⛔ POURQUOI `fixed` ET PAS `sticky` — 31/08, mesuré sur fiche ET collection.
       Symptôme : on descend, on remonte, le header ne revient pas ; il faut
       retourner tout en haut. Chaîne des ancêtres relevée dans le navigateur :

         .site-header           h=70   sticky
         #shopify-section-…     h=70
         .onix-header-overlay   h=70   ← la boîte fait EXACTEMENT la hauteur
         .a-barre-achat         h=2764 overflow:hidden
         body                   h=2764 overflow:hidden

       Un élément `sticky` ne peut coller QUE dans la boîte de son parent :
       avec 70 px pour 70 px, la course est nulle, il défile avec la page et ne
       revient jamais. Et `overflow: hidden` sur deux ancêtres neutralise
       `sticky` de toute façon — le verrou anti-débordement horizontal, qu'on ne
       touche pas.
       `fixed`, lui, ignore ces contraintes : aucun ancêtre ne porte `transform`,
       `filter` ni `perspective` (vérifié), donc rien ne le casse. C'est déjà ce
       que fait l'accueil, et c'est pour ça qu'elle n'a jamais eu le défaut.
     ➜ Une seule logique pour fiche ET collection, pas deux rustines. */
  .site-header--solid.is-scrolled {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
  }

  .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;
  }

  /* ── L'OFFRE DANS L'EN-TÊTE : PLUS DE PASTILLE, PLUS DE BALAYAGE ─────────
     ⛔ SUPPRIMÉ LE 05/09 : la pastille cyan (fond, bordure, halo néon,
     backdrop-filter, border-radius, overflow:hidden), son survol,
     `.header__offer-label`, `.header__offer-sub`, `.header__offer-sweep`,
     `@keyframes header-offer-sweep` et le bloc mobile qui les redimensionnait.

     1. LA PASTILLE ÉTAIT DÉJÀ MORTE À L'ÉCRAN. `.onix-titre-offre` est posée en
        Liquid sur `.header__title` sous la MÊME condition que le bouton
        (`section.settings.offer_enabled`) : quand le bouton existe, la classe
        existe — et `assets/onix-offre.css` neutralisait chacune de ces
        déclarations à spécificité supérieure (0,2,0 contre 0,1,0). Elles ne se
        voyaient plus que le temps du premier rendu : c'est le flash du 14/08.
     2. LE BALAYAGE, LUI, SE VOYAIT — ET PAS SUR LE BOUTON. `.header__offer-sweep`
        était en `position:absolute;inset:0` et translatait de −120 % à +120 % ;
        rien ne le retenait sauf le `overflow:hidden` de la pastille.
        `onix-offre.css` remet `overflow:visible` — il n'y a plus de forme à
        découper — donc la bande sortait ENTIÈREMENT du bouton et passait sur le
        logo. Mesuré en ligne le 05/09 : bouton de 213,1 à 271,7 px, bande de
        142,8 à 201,4 px — aucun recouvrement, elle est intégralement dehors.

     ➢ RETIRÉE PLUTÔT QUE REDÉCOUPÉE. Remettre `overflow:hidden` ressusciterait la
       forme de pastille supprimée le 12/08, et un dégradé cyan en diagonale n'a
       plus rien à balayer sur du texte nu — il glisserait sur le vide. Le signal
       « ça bouge, c'est cliquable » existe déjà et a été choisi ce jour-là : le
       PRIX passe de blanc à cyan (`onix-offre-cligne`, dans onix-offre.css).
       Deux animations cyan sur 60 px, c'est du bruit, pas un signal.

     ⚠️ NE RESTENT ICI QUE LES PRIMITIVES DE BOÎTE. Toute la forme de l'offre est
     dans assets/onix-offre.css, sous `.onix-titre-offre .header__offer-btn`, qui
     surcharge déjà position, left, transform, padding et couleur. */
  .header__offer-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    margin: 0;
    padding: 0;
    background: transparent;
    border: 0;
    color: #ffffff;
    text-decoration: none;
    cursor: pointer;
  }

  .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 horizontal élargi : dans une capsule, les éléments ne doivent
         pas venir mourir sur la courbe des extrémités */
      padding: 0.5rem 1.35rem;
    }

    /* ⚠️ LA CAPSULE EST DÉSORMAIS DÉFINIE POUR TOUTES LES LARGEURS (plus haut).
       Il ne reste ici que ce qui est propre au mobile : le header transparent
       à tous ses états, et une marge latérale resserrée. */
    .site-header,
    .site-header.is-scrolled,
    .site-header--solid,
    .site-header--solid.is-scrolled {
      background: transparent;
      backdrop-filter: none;
      -webkit-backdrop-filter: none;
      border-bottom: 0;
    }

    /* ⛔ RÈGLE RETIRÉE — 31/08, signalée par lui : « quand je remonte sur une
       page produit ou collection le menu apparaît bien mais y'a une sorte
       d'ombre autour ».
       Ce n'était pas une ombre : c'était CETTE règle, héritée de l'ancienne
       barre pleine largeur. Elle repeignait `rgba(0,0,0,0.45)` sur le HEADER —
       donc une bande sombre sur toute la largeur, derrière la capsule. Et
       comme elle est écrite APRÈS la règle de transparence, à spécificité
       égale, c'est elle qui gagnait.
       ⚠️ Aucun `box-shadow` nulle part : mesuré sur les cinq éléments du header
         et leurs pseudo-éléments, tout était à `none`. Chercher une ombre
         aurait fait perdre du temps ; c'est le FOND qu'il fallait regarder.
       Le fond de l'état scrollé vit sur `.header__nav`, et nulle part ailleurs
       — c'est la règle n° 1 de docs/header.md. */

    .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-design-b-carte (INDEX:9) */
/* ==CSS-CARTE-B-DEBUT== */
  /* ═══════════════════════════════════════════════════════════════════════
     DESIGN B — « LA CARTE »
     ⚠️ TOUTES LES RÈGLES DE BASE D'ABORD, LES @media À LA FIN. Une surcharge
       écrite dans un @media PLACÉ AVANT la règle qu'elle vise ne s'applique
       jamais : à spécificité égale, la dernière déclaration gagne, et un media
       query change la CONDITION, pas le POIDS (scripts/lint-css-sections.js).
     ⚠️ AUCUNE VALEUR DE TEXTE SOUS 12,5 px dans ce fichier. La plus petite est
       `--carte-t-intro`. Elle est en px, jamais en rem multiplié par autre
       chose : un rem dépend d'un réglage navigateur qu'on ne contrôle pas.
     ═══════════════════════════════════════════════════════════════════════ */

  .onix-carte {
    /* Le matériau, en jetons : la carte a UNE couleur de corps et tout le
       reste en dérive. Changer la carte = changer trois lignes. */
    --carte-corps: 18, 18, 21;          /* #121215 */
    --carte-opacite: 0.94;
    --carte-rayon: 22px;
    --carte-anneau: 46px;
    --carte-t-intro: 12.5px;
    --carte-t-montant: 21px;

    position: relative;
    box-sizing: border-box;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    column-gap: 12px;
    padding: 11px 12px 11px 11px;
    border-radius: var(--carte-rayon);
    /* ⛔ `default` ET PAS `pointer`. Une carte n'est pas un bouton : le seul
       objet cliquable est la pilule à droite, et la croix. C'est le défaut
       n°1 de la barre actuelle, où cinq cartes portaient `cursor: pointer`
       sans être cliquables. */
    cursor: default;
    font-family: inherit;
    color: #fff;

    /* ── LE MATÉRIAU ────────────────────────────────────────────────────
       ⛔ LA CARTE EST UN OBJET OPAQUE, ELLE N'HÉRITE PAS DE SON HÔTE.
         Mesuré dans le thème, pas supposé : la page collection est BLANCHE
         (`--c-bg: #ffffff`, assets/critical.css l.72) et la page panier est
         NOIRE (`.onix-cart-page` = #0a0a0a, sections/cart.liquid l.169).
         Une carte qui hériterait des couleurs serait invisible sur l'une des
         deux — c'est exactement le défaut « blanc sur blanc » payé le 05/09
         sur le prototype C. Elle porte donc son propre corps, comme la
         capsule du header, qui est sombre sur toutes les pages du site.
       ⚠️ L'opacité 0,94 n'est pas un réglage esthétique, c'est un plancher de
         contraste. Sur la page BLANCHE, le corps composite monte à L=0,0652 :
         le montant cyan y vaut 4,64:1 et le texte blanc 9,11:1. À 0,88 le
         cyan tombait à 3,4:1, sous le plancher d'un texte de 21 px gras. Sur
         la page noire les mêmes valeurs sont 9,66:1 et 18,96:1. */
    background: rgba(var(--carte-corps), var(--carte-opacite));
    -webkit-backdrop-filter: blur(22px) saturate(1.5);
    backdrop-filter: blur(22px) saturate(1.5);
    /* Le liseré clair en haut : c'est lui qui donne l'épaisseur. Une carte
       posée reçoit la lumière par le haut — l'ombre seule ne suffit pas, on
       obtient une découpe et non un objet. */
    border: 1px solid rgba(255, 255, 255, 0.10);
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.07),
      0 10px 30px rgba(0, 0, 0, 0.34),
      0 2px 8px rgba(0, 0, 0, 0.22);
  }

  .onix-carte[hidden] { display: none; }

  /* ── MODE FLUX : la carte est posée DANS la page, elle défile avec elle ──
     Elle ne recouvre donc rien, sur aucune page. C'est la réponse mécanique
     au bouton de paiement recouvert : sur la page panier la carte est un bloc
     du document, au-dessus du bouton, pas un calque devant lui. */
  .onix-carte--flux {
    width: 100%;
    margin: 14px 0;
  }

  /* ── MODE FLOTTANT : le seul cas où elle prend du bas d'écran ──────────
     ⚠️ JAMAIS DE `transform` SUR CETTE BOÎTE, même pour la masquer. Un
       `position: fixed` avec un transform actif se rattache au viewport de
       MISE EN PAGE sur iOS : la carte « remonte » au milieu de l'écran au
       repli de la barre d'URL. Bug réglé pour de bon le 09/07/2026 sur la
       barre actuelle — on ne le réintroduit pas ici. Le centrage passe par
       left/right + margin auto, l'apparition par opacity seule. */
  .onix-carte--flottante {
    position: fixed;
    bottom: calc(12px + env(safe-area-inset-bottom));
    left: 0;
    right: 0;
    margin-inline: auto;
    width: calc(100% - 24px);
    max-width: 520px;
    /* Sous le tiroir (1200), sous le bandeau cookies (9998), sous la capsule
       du header (100) qui est en haut de toute façon. */
    z-index: 998;
  }

  /* ── L'ANNEAU — la progression est un ARC, pas une barre plate ─────────
     Un segment qui se remplit sur un cercle se lit d'un coup d'œil sans
     échelle : l'œil compare deux angles, pas deux longueurs sur une piste
     dont il ne voit pas la fin. C'est le principe des anneaux d'activité.
     Le chiffre au centre dit l'état en toutes lettres — l'arc seul demande
     de deviner de quoi il est la fraction. */
  .onix-carte__anneau {
    position: relative;
    display: block;
    width: var(--carte-anneau);
    height: var(--carte-anneau);
    flex: none;
  }

  /* ⛔ `>` ET PAS UN DESCENDANT, ET CE N'EST PAS UN DÉTAIL DE STYLE — 05/09.
     Écrit `.onix-carte__anneau svg`, ce sélecteur (0,1,1 : une classe + un
     type) BAT `.onix-carte__coche` (0,1,0 : une classe seule) qui suit
     pourtant plus bas. La coche héritait donc `display: block`,
     `width: 100%`, `height: 100%` ET le `rotate(-90deg)` de l'anneau : un
     énorme chevron « > » peint PAR-DESSUS le chiffre, DANS LES SIX ÉTATS,
     y compris ceux où la coche doit être absente. Aucune règle n'était en
     double, aucun outil n'a levé — c'est la capture qui l'a montré.
     `> svg` ne vise que le cercle : la coche est une petite-fille, dans
     `.onix-carte__compte`. Même famille que `lint-css-sections.js`, mais par
     la SPÉCIFICITÉ et non par l'ordre. */
  .onix-carte__anneau > svg {
    display: block;
    width: 100%;
    height: 100%;
    /* −90° : l'arc part de midi, comme une jauge d'anneau et non comme un
       camembert. `transform` est ici sur un SVG en flux, pas sur la boîte
       `position: fixed` — la mise en garde ci-dessus ne s'applique pas. */
    transform: rotate(-90deg);
  }

  .onix-carte__piste {
    fill: none;
    stroke: rgba(255, 255, 255, 0.12);
    stroke-width: 4;
  }

  .onix-carte__arc {
    fill: none;
    stroke: url(#onix-carte-degrade);
    stroke-width: 4;
    stroke-linecap: round;
    /* 2 × π × 19 = 119,38. La valeur est écrite en dur ET recalculée par le
       JS depuis le rayon lu dans le SVG : si le rayon change ici, l'arc suit
       sans qu'on ait à se souvenir de cette ligne. */
    stroke-dasharray: 119.38;
    stroke-dashoffset: 119.38;
    transition: stroke-dashoffset 0.6s cubic-bezier(0.22, 1, 0.36, 1);
  }

  /* Panier vide : rien n'est commencé, la piste est POINTILLÉE et le chiffre
     au centre est la CIBLE, pas un décompte. Un « 0 » plein dans un anneau
     dit « tu as échoué » ; une cible en pointillé dit « voilà où on va ». */
  .onix-carte--cible .onix-carte__piste {
    stroke-dasharray: 2 5;
    stroke-linecap: round;
    stroke: rgba(255, 255, 255, 0.28);
  }

  .onix-carte__compte {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: 800;
    line-height: 1;
    letter-spacing: -0.01em;
    color: #fff;
    font-variant-numeric: tabular-nums;
  }

  .onix-carte--cible .onix-carte__compte {
    color: rgba(255, 255, 255, 0.52);
  }

  /* La coche du palier acquis remplace le chiffre : « c'est fait » n'est pas
     un nombre. */
  /* ⚠️ DEUX CLASSES, PAS UNE. Le `> svg` ci-dessus suffisait, mais une coche
     dont l'existence tient à un seul chevron se refera battre au prochain
     sélecteur un peu plus lourd. Elle porte donc son propre poids. */
  .onix-carte__compte .onix-carte__coche {
    display: none;
    width: 18px;
    height: 18px;
    transform: none;
  }

  .onix-carte--acquis .onix-carte__compte .onix-carte__coche { display: block; }
  .onix-carte--acquis .onix-carte__valeur { display: none; }

  /* ── LE BLOC DE TEXTE — deux lignes, une hiérarchie ────────────────────
     ⛔ AUCUN `text-overflow: ellipsis`, AUCUN `white-space: nowrap`. Un texte
       qui ne tient pas doit REVENIR À LA LIGNE, jamais être coupé. */
  .onix-carte__texte {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
  }

  .onix-carte__intro {
    margin: 0;
    font-size: var(--carte-t-intro);
    line-height: 1.28;
    font-weight: 600;
    letter-spacing: 0.005em;
    /* 0,72 et pas 0,64 : sur la page BLANCHE, à 0,64 la ligne tombait à
       4,10:1, sous le plancher de 4,5:1 d'un texte de 12,5 px. À 0,72 elle
       vaut 5,68:1. Un gris « discret » qui passe sous le plancher n'est pas
       discret, il est illisible. */
    color: rgba(255, 255, 255, 0.72);
    overflow-wrap: anywhere;
  }

  /* ⛔ LE CENTRE DE GRAVITÉ DE LA CARTE. C'est la ligne que le client doit
     lire s'il n'en lit qu'une : un MONTANT EN EUROS, jamais un pourcentage.
     Sa demande du 05/09 : « le client il a pas une calculette en main pour
     savoir sa 15 % c'est équivalent à combien ». */
  .onix-carte__montant {
    margin: 0;
    display: flex;
    align-items: baseline;
    gap: 6px;
    font-size: var(--carte-t-montant);
    line-height: 1.12;
    font-weight: 800;
    letter-spacing: -0.015em;
    color: var(--c-accent, #00c8ff);
    font-variant-numeric: tabular-nums;
    overflow-wrap: anywhere;
  }

  /* Ce qui suit le montant dans la phrase traduite (une emoji, le plus
     souvent) revient à la taille de l'intro : il accompagne, il ne pèse pas. */
  .onix-carte__suffixe {
    font-size: var(--carte-t-intro);
    font-weight: 600;
    color: rgba(255, 255, 255, 0.72);
    letter-spacing: 0;
  }

  .onix-carte__suffixe:empty { display: none; }

  /* ── L'ACTION — la pilule blanche du thème ─────────────────────────────
     `--color-button-primary-bg` / `--color-button-primary-text` sont les
     jetons du bouton principal du site (snippets/css-variables.liquid) :
     blanc sur texte #111, en pilule. La carte ne s'invente pas un bouton,
     elle prend celui du site. Cible de 38 px de haut, 44 px avec sa marge. */
  .onix-carte__action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 38px;
    padding: 0 16px;
    border: 0;
    border-radius: 999px;
    background: var(--color-button-primary-bg, #ffffff);
    color: var(--color-button-primary-text, #111111);
    font-family: inherit;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 0.01em;
    white-space: nowrap;
    cursor: pointer;
    transition: transform 0.16s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.16s ease;
  }

  .onix-carte__action[hidden] { display: none; }

  .onix-carte__action:active { transform: scale(0.96); }

  .onix-carte__action:focus-visible {
    outline: 2px solid var(--c-accent, #00c8ff);
    outline-offset: 3px;
  }

  /* ── LA FERMETURE — elle existe, elle est nommée, et elle est petite.
        La barre actuelle ouvre un panneau qu'aucun bouton ne referme : on le
        referme en tapant une carte, qui a l'air d'un choix. Ici la croix est
        posée sur le coin, hors du flux, pour ne pas voler de largeur au
        texte sur un écran de 320 px. ── */
  .onix-carte__fermer {
    position: absolute;
    top: -7px;
    right: -7px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    padding: 0;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 999px;
    background: rgba(38, 38, 43, 0.98);
    color: rgba(255, 255, 255, 0.62);
    cursor: pointer;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
  }

  .onix-carte__fermer[hidden] { display: none; }

  .onix-carte__fermer:focus-visible {
    outline: 2px solid var(--c-accent, #00c8ff);
    outline-offset: 2px;
  }

  /* Le cale : il prend la hauteur que la carte occupait dans le flux au
     moment où elle se décolle. Sans lui, passer de 0 à 1 article sur une
     page de collection fait remonter toute la grille sous les doigts du
     client, à la seconde où il vient d'ajouter. */
  .onix-carte__place {
    width: 100%;
    height: 0;
  }

  /* ⛔ LE BANDEAU COOKIES OCCUPE DÉJÀ LE BAS. La règle du thème vise
     `#onix-discount-bar` par son id : elle ne couvre pas ce fichier, qui pose
     donc la sienne. Deux surfaces empilées en bas d'écran, c'est le défaut
     qu'on répare, pas un détail. */
  /* ⚠️ `?voir-carte=N` REND CETTE RÈGLE MUETTE — sinon un aperçu ouvert dans un
     navigateur vierge (bandeau cookies jamais répondu, exactement le cas d'un
     premier visiteur) resterait à `display:none` quoi que dise le JS. C'est ce
     qui a fait échouer les deux premiers essais du 05/09 : `mode: 'flottant'`
     en JS, `display:none` en CSS — deux vérités contradictoires sur la même
     carte, l'une lue par le calcul, l'autre par l'œil. */
  html.onix-cookies-a-repondre:not(.onix-carte-b-apercu) .onix-carte--flottante {
    display: none;
  }

  /* ⛔ ET EN APERÇU, C'EST LE BANDEAU QUI S'EFFACE — 05/09, mesuré à 1280 px.
     `?voir-carte=N` rend la règle ci-dessus muette : la carte s'affiche donc
     PENDANT que le bandeau est encore là, chose qui n'arrive JAMAIS chez un
     visiteur. Les deux se retrouvent alors au même bas d'écran, et le bandeau
     (z-index 9998) passe devant la carte (998) : à 1280×800 il couvrait
     x 840→960, c'est-à-dire l'anneau — la seule chose que le lien est censé
     montrer. Monter le z-index de la carte aurait fait pire : elle serait
     passée par-dessus les boutons « Accepter / Refuser » (mesurés à
     x 861→950) et le lien serait devenu un piège à clic.
     ➜ En mode aperçu, et LÀ SEULEMENT, le bandeau s'efface. `.onix-carte-b-
       apercu` est posée par le JS quand `?voir-carte` est dans l'adresse :
       aucun visiteur ne l'a jamais, aucun consentement n'est accordé pour
       autant — le défaut de la vie privée reste le refus tant qu'on n'a pas
       répondu. */
  html.onix-carte-b-apercu .onix-cookie-bar {
    display: none;
  }

  /* ── 320 px — la largeur qui a coûté une nuit le 24/08 ─────────────────
     Sous 375 px, un iPhone en « Affichage zoomé » rend en 320. Tout ce qui
     est testé à 390 seulement ne prouve rien. On resserre l'anneau, les
     marges et le montant ; on ne touche PAS à `--carte-t-intro`, déjà au
     plancher de 12,5 px. */
  /* ⛔ LA CARTE NE SAUTE PLUS SOUS LE DOIGT — 05/09, défaut mesuré par l'agent
     cliente : à 320 px, en passant de 4 à 5 maillots, la hauteur passait de
     62 px à 77,3 px. La phrase de l'état « acquis » (« 34,98 € déjà gagnés »)
     tient sur deux lignes là où celle de l'état « marche » en tient une. La
     carte flotte au-dessus du pouce : elle grandissait pile au moment où le
     client venait de cliquer.
     ➜ Un PLANCHER de hauteur, calé sur l'état le plus haut. La carte occupe
       toujours la même place ; seul son contenu change.
     ⚠️ CE N'EST PAS UNE CORRECTION DU RETOUR À LA LIGNE — la phrase passe
       toujours sur deux lignes à 320 px, et c'est acceptable. Ce qu'on
       supprime, c'est le MOUVEMENT, pas le retour à la ligne. */
  .onix-carte { min-height: 70px; }

  @media (max-width: 359px) {
    .onix-carte {
      --carte-anneau: 40px;
      --carte-t-montant: 19px;
      padding: 10px 10px 10px 9px;
      column-gap: 9px;
      min-height: 78px;   /* l'état le plus haut mesuré à cette largeur : 77,3 px */
    }
    .onix-carte--flottante {
      width: calc(100% - 16px);
      bottom: calc(8px + env(safe-area-inset-bottom));
    }
    .onix-carte__action { padding: 0 13px; }
  }

  /* À partir de 430 px la carte respire : le rayon et le montant montent
     d'un cran, l'anneau reste identique. Une carte qui grandit en tout se
     met à ressembler à un bandeau. */
  @media (min-width: 430px) {
    .onix-carte {
      --carte-rayon: 24px;
      --carte-t-montant: 22px;
      padding: 12px 13px 12px 12px;
      min-height: 74px;   /* padding plus large : le plancher suit */
    }
  }

  /* ── ORDINATEUR — CENTRÉE EN BAS, 420 px — sa demande du 05/09 ─────────
     Deux relevés successifs, le même jour, sur le même écran :
       · « sur PC la carte n'apparaît pas » → c'était le retour du bandeau
         cookies, corrigé dans le JS. Elle apparaissait bien (520×74 px
         mesurés à 1280×800), et sur TOUTE la largeur d'un téléphone.
       · « pourquoi sur pc la barre code promo elle est en bas [à un côté] et
         pas centrée ? » → elle avait été calée à DROITE dans l'intervalle.
     ➜ Au-dessus de 1024 px elle est CENTRÉE en bas d'écran et resserrée à
       420 px. Rien d'autre ne change : même corps, même anneau, même
       plancher de hauteur. C'est un déplacement, pas un second design.
     ⚠️ CE BLOC A DIT L'INVERSE PENDANT UNE HEURE, et son argument principal
       était faux. Il justifiait le calage à droite par le bandeau cookies,
       « centré et large de 640 px, recouvrement total ». Or les deux ne sont
       JAMAIS à l'écran en même temps chez un visiteur : la règle
       `html.onix-cookies-a-repondre:not(.onix-carte-b-apercu)` plus haut
       met la carte à `display: none` tant que le bandeau est levé, et en
       aperçu c'est le bandeau qui s'efface. Le seul recouvrement possible
       était celui de l'APERÇU, déjà traité. Un argument de placement tiré
       d'une superposition qui ne se produit pas ne pèse rien.
     ⚠️ CENTRAGE PAR `left: 0` + `right: 0` + `margin-inline: auto`, comme la
       règle de base — JAMAIS par `transform: translateX(-50%)`. Un
       `position: fixed` avec un transform actif se rattache au viewport de
       MISE EN PAGE sur iOS et la carte remonte au milieu de l'écran au repli
       de la barre d'URL (bug réglé le 09/07/2026, mise en garde en tête du
       bloc `.onix-carte--flottante`). Le média query ne sert donc plus qu'à
       DEUX choses : baisser le plafond de largeur de 520 à 420 px, et
       remonter la marge basse de 12 à 20 px.
     ⚠️ MAIS LES TROIS PROPRIÉTÉS SE RÉÉCRIVENT QUAND MÊME. La règle de base
       les pose déjà, seulement une @media qui ne redéclare rien hérite de
       ce qui la précède — et ce qui la précédait ici était `left: auto;
       right: 20px; margin-inline: 0`. Les laisser tomber aurait gardé la
       carte à droite, avec un `max-width` qui a l'air de tout expliquer.
     ⚠️ 1024 px ET PAS 750 — inchangé. C'est la largeur à partir de laquelle
       une carte de 420 px cesse d'être un bandeau ; les tablettes et les
       téléphones gardent `écran − 24 px`. */
  @media (min-width: 1024px) {
    .onix-carte--flottante {
      left: 0;
      right: 0;
      margin-inline: auto;
      max-width: 420px;
      bottom: calc(20px + env(safe-area-inset-bottom));
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .onix-carte__arc { transition: none; }
    .onix-carte__action { transition: none; }
    .onix-carte__action:active { transform: none; }
  }
  /* ==CSS-CARTE-B-FIN== */
/* END_SECTION:onix-design-b-carte */

/* START_SECTION:onix-discount-bar (INDEX:10) */
.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:11) */
.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:12) */
.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:13) */
.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:14) */
.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:15) */
/* ══════════════════════════════════════════════════════════════════════
     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:16) */
.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:17) */
/* ── 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:18) */
.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:19) */
.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:20) */
.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:21) */
.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:22) */
/* ══════════════════════════════════════════════════════════════════════
     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-langue-popup (INDEX:23) */
/* ── LE SÉLECTEUR — refonte du 05/09, 15h30 ──────────────────────────
       L'écran doit se comprendre SANS LIRE : un drapeau, le nom de la langue
       écrit DANS sa propre langue, une coche sur celle en cours. Rien à
       traduire, donc rien qu'on puisse ne pas comprendre. */
    /* Visible pour un lecteur d'écran, invisible à l'œil : le seul texte de cet
       écran ne peut être compris par personne à coup sûr, donc il ne s'affiche pas.

       ⛔ IL EST PRÉFIXÉ, ET CE N'EST PAS DÉCORATIF — 05/09, 20h50.
         Écrit `.onix-langue__titre--lecteur` seul (0,1,0), il perdait contre
         TROIS bases de MÊME poids écrites plus bas dans cette feuille :
           · `.onix-langue__titre { margin: 0 }`        (le <h2>, l.164)
           · `.onix-langue__pays  { margin: 0 }`        (le <p>,  l.148)
           · `.onix-langue__btn   { width; min-height; padding }` et
             `.onix-langue__btn--non { margin-top }`    (le bouton, l.218)
         Un `--modificateur` a le même poids que sa base : à poids égal c'est
         l'ORDRE qui tranche, et le motif « visually hidden » se faisait donc
         démonter déclaration par déclaration. Mesuré sur l'aperçu à 390 px
         AVANT correction : le <h2> rendait `margin: 0px` au lieu de `-1px`, et
         le bouton « rester » reprenait `width: 100%` + `min-height: 2.9rem`.
         Rien ne se voyait — `clip-path: inset(50%)` masque quoi qu'il arrive —
         mais le motif ne tenait plus que par une seule de ses six déclarations.
       ➜ `.onix-langue .onix-langue__titre--lecteur` (0,2,0) bat les trois bases
         quel que soit l'ordre. Le préfixe ne restreint RIEN : les trois porteurs
         sont dans `.onix-langue` (l.86), il n'y en a pas d'autre.
       ⚠️ Contrôle : node scripts/lint-css-sections.js */
    .onix-langue .onix-langue__titre--lecteur {
      position: absolute;
      width: 1px; height: 1px;
      /* `min-height: 0` N'EST PAS DÉCORATIF : `.onix-langue__btn` en pose
         2,9 rem, et un `height: 1px` ne bat pas un `min-height`. Mesuré après
         le préfixe, avant cette ligne : le bouton « rester » rendait
         1 × 46,4 px. Il rend 1 × 1 avec. */
      min-height: 0;
      margin: -1px; padding: 0; border: 0;
      clip-path: inset(50%);
      overflow: hidden;
      white-space: nowrap;
    }
    .onix-langue__liste {
      list-style: none;
      margin: 18px 0 10px;
      padding: 0;
      display: grid;
      gap: 8px;
    }
    .onix-langue__lang {
      width: 100%;
      display: grid;
      grid-template-columns: auto 1fr auto;
      align-items: center;
      gap: 12px;
      min-height: 52px;          /* au-dessus du plancher tactile de 44 px */
      padding: 0 16px;
      border: 1px solid rgba(255,255,255,.14);
      border-radius: 14px;
      background: rgba(255,255,255,.05);
      color: #fff;
      font: inherit;
      font-size: 16px;
      font-weight: 600;
      text-align: left;
      cursor: pointer;
      transition: background .16s ease, border-color .16s ease;
    }
    .onix-langue__lang:hover,
    .onix-langue__lang:focus-visible {
      background: rgba(255,255,255,.11);
      border-color: rgba(255,255,255,.3);
    }
    /* La langue SUGGÉRÉE par le pays passe en tête et se voit. C'est l'aide,
       pas la contrainte : les autres gardent la même place et le même format. */
    .onix-langue__lang.is-suggeree {
      border-color: var(--c-accent, #00c8ff);
      background: rgba(0, 200, 255, .14);
    }
    .onix-langue__drapeau { font-size: 22px; line-height: 1; }
    .onix-langue__nom { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .onix-langue__coche { opacity: 0; color: var(--c-accent, #00c8ff); font-size: 17px; }
    .onix-langue__lang.is-courante .onix-langue__coche { opacity: 1; }
    .onix-langue__lang.is-courante { background: rgba(255,255,255,.02); }
    /* ⚠️ 320 px : on resserre plutôt que de laisser couper un nom de langue. */
    @media (max-width: 359px) {
      .onix-langue__lang { font-size: 15px; gap: 10px; padding: 0 13px; }
      .onix-langue__drapeau { font-size: 20px; }
    }

    .onix-langue {
      position: fixed;
      inset: 0;
      display: none;
      align-items: center;
      justify-content: center;
      padding: 1rem;
      z-index: var(--z-lang-popup, 9997);
    }
    .onix-langue.is-open {
      display: flex;
    }

    /* ⛔ CE QUI EST PEINT AU-DESSUS D'ELLE, ON LE NEUTRALISE — 05/09.
       On ne se bat pas au z-index : la doctrine est déjà écrite dans
       cookie-banner.liquid — « le problème est la SUPERPOSITION, pas l'ordre
       de peinture ». Deux surfaces passaient devant :
       · LE BANDEAU COOKIES, à 9998 EN LITTÉRAL (absent du registre de
         css-variables.liquid, qui se prétend pourtant complet) contre 9997
         ici. Sur 390 px il recouvrait 73 % du bouton « Rester ici » : le
         visiteur qui refusait la langue donnait son consentement cookies.
       · LA FLÈCHE RETOUR-EN-HAUT, à 99999. Son `is-visible` est piloté par un
         écouteur `scroll` — or verrouiller le défilement (`body{position:fixed}`)
         n'ÉMET AUCUN événement scroll. Elle restait donc allumée, opaque et
         CLIQUABLE, en travers de la feuille montante ; et cliquée elle ne
         faisait rien (`window.scrollTo` sur un body fixe n'a aucun effet).
       `!important` parce que le style de la flèche est inline dans son snippet
       et que l'ordre des feuilles n'est pas garanti. */
    html.onix-langue-ouverte .onix-cookie-bar,
    html.onix-langue-ouverte .onix-back-to-top {
      opacity: 0 !important;
      visibility: hidden !important;
      pointer-events: none !important;
    }

    .onix-langue__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-langue-fade-in 0.25s ease both;
    }

    .onix-langue__panel {
      position: relative;
      z-index: 1;
      width: min(94vw, 24rem);
      max-height: 90vh;
      overflow-y: auto;
      display: flex;
      flex-direction: column;
      align-items: center;
      text-align: center;
      gap: 0.55rem;
      background: #111;
      color: #fff;
      border: 1px solid var(--c-white-10, rgba(255, 255, 255, 0.1));
      border-radius: 1.25rem;
      padding: 1.9rem 1.4rem 1.35rem;
      animation: onix-langue-enter 0.3s cubic-bezier(0.22, 1, 0.36, 1) both;
    }

    .onix-langue__handle {
      display: none;
      width: 2.4rem;
      height: 0.28rem;
      border-radius: 999px;
      background: var(--c-white-15, rgba(255, 255, 255, 0.15));
    }

    .onix-langue__close {
      position: absolute;
      top: 0.6rem;
      right: 0.7rem;
      width: 2rem;
      height: 2rem;
      display: flex;
      align-items: center;
      justify-content: center;
      border: 0;
      border-radius: 50%;
      background: var(--c-white-10, rgba(255, 255, 255, 0.1));
      color: #fff;
      font-size: 0.85rem;
      line-height: 1;
      cursor: pointer;
    }

    .onix-langue__globe {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 3.25rem;
      height: 3.25rem;
      margin-bottom: 0.15rem;
      border-radius: 50%;
      background: var(--c-white-5, rgba(255, 255, 255, 0.05));
      color: var(--c-accent, #00c8ff);
    }

    .onix-langue__pays {
      margin: 0;
      font-size: 0.72rem;
      letter-spacing: 0.06em;
      text-transform: uppercase;
      color: rgba(255, 255, 255, 0.55);
    }
    .onix-langue__pays b {
      color: #fff;
      font-weight: 600;
    }

    .onix-langue__titre {
      margin: 0;
      font-size: 1.12rem;
      line-height: 1.3;
      font-weight: 700;
      text-wrap: balance;
    }

    .onix-langue__texte {
      margin: 0 0 0.35rem;
      font-size: 0.88rem;
      line-height: 1.45;
      color: rgba(255, 255, 255, 0.7);
    }

    .onix-langue__form {
      width: 100%;
      margin: 0;
    }

    .onix-langue__btn {
      width: 100%;
      min-height: 2.9rem;
      padding: 0.7rem 1rem;
      border-radius: var(--style-border-radius-buttons, 8px);
      font-size: 0.95rem;
      font-weight: 700;
      line-height: 1.2;
      cursor: pointer;
      overflow-wrap: anywhere;
    }

    .onix-langue__btn--oui {
      border: 0;
      background: var(--c-accent, #00c8ff);
      color: #05131a;
    }

    .onix-langue__btn--non {
      margin-top: 0.5rem;
      border: 1px solid var(--c-white-15, rgba(255, 255, 255, 0.15));
      background: transparent;
      color: rgba(255, 255, 255, 0.72);
      font-weight: 600;
    }

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

    .onix-langue.is-closing .onix-langue__panel {
      animation: onix-langue-exit 0.2s ease both;
    }
    .onix-langue.is-closing .onix-langue__backdrop {
      animation: onix-langue-fade-out 0.2s ease both;
    }

    /* MOBILE — feuille montante par le bas, comme la pop-up de l'offre.
       Ancrée EN BAS : elle ne peut donc pas dessiner une bande en travers de la
       capsule flottante du header (docs/header.md règle n°1). */
    @media (max-width: 749px) {
      .onix-langue {
        align-items: flex-end;
        padding: 0.75rem;
      }
      .onix-langue__panel {
        width: 100%;
        max-width: 100%;
        max-height: 88vh;
        gap: 0.5rem;
        padding: 0.85rem 1.1rem calc(1.15rem + env(safe-area-inset-bottom, 0px));
        margin-bottom: env(safe-area-inset-bottom, 0px);
        animation: onix-langue-monte 0.32s cubic-bezier(0.22, 1, 0.36, 1) both;
      }
      .onix-langue.is-closing .onix-langue__panel {
        animation: onix-langue-descend 0.24s ease both;
      }
      .onix-langue__handle {
        display: block;
        margin-bottom: 0.35rem;
      }
      .onix-langue__globe {
        width: 2.6rem;
        height: 2.6rem;
      }
    }

    @media (prefers-reduced-motion: reduce) {
      .onix-langue__panel,
      .onix-langue__backdrop,
      .onix-langue.is-closing .onix-langue__panel,
      .onix-langue.is-closing .onix-langue__backdrop {
        animation: none;
      }
    }
/* END_SECTION:onix-langue-popup */

/* START_SECTION:onix-newsletter-popup (INDEX:24) */
/* ══════════════════════════════════════
     BASE — overlay container
     ══════════════════════════════════════ */
  /* ══ LES JETONS DU VERRE DÉPOLI — design V01, 06/09 ═══════════════════════
     « V01 j'aime bien ». Ils sont déclarés UNE fois, sur la racine de la pop-up,
     et pas dans `:root` : cette carte est la seule surface de la boutique en
     verre dépoli, et une variable globale finit toujours par être réutilisée
     ailleurs par erreur.
     ⛔ LA TEINTE DU VERRE EST UN DÉGRADÉ SOMBRE, PAS LE 40 % PLAT DE LA MAQUETTE,
       et c'est la SEULE valeur de V01 qui a dû changer au portage. La maquette
       ne se posait que sur `fond-4.webp`, une photo sombre (luminance 113/255).
       En vrai, le fond est TIRÉ AU HASARD parmi quatre, et le 3ᵉ est une planche
       aquarelle sur fond BLANC — 220/255 mesuré. À 40 % de voile, le blanc
       remonte à travers le verre et le texte gris passe sous le seuil WCAG :
       c'est le défaut exact que la direction A avait déjà trouvé sur sa carte
       A3, et qu'elle avait corrigé au même endroit — « la teinte du verre, pas
       la couleur des mots ». Mesuré ici sur les quatre fonds : voir
       `scripts/banc-verre-popup.mjs`.
     ⚠️ ON NE TOUCHE PAS AU VOILE DE LA PHOTO (`.onix-nl__bg-images::after`,
       0,25) : sa valeur a été tranchée capture à l'appui le 06/09 — 0,45 rendait
       la planche confortable mais ÉTEIGNAIT les trois photos sombres. Le
       contraste se règle dans le verre, qui ne couvre que la carte. */
  .onix-nl {
    --nl-verre-haut: rgba(14, 16, 20, 0.60);
    --nl-verre-bas: rgba(9, 10, 13, 0.76);
    --nl-flou: 30px;
    --nl-cheveu: rgba(255, 255, 255, 0.16);
    --nl-cheveu-doux: rgba(255, 255, 255, 0.10);
    --nl-tuile: rgba(255, 255, 255, 0.07);
    --nl-champ: rgba(255, 255, 255, 0.09);
    --nl-texte-2: rgba(255, 255, 255, 0.74);
    --nl-texte-3: rgba(255, 255, 255, 0.64);
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem;
    -webkit-font-smoothing: antialiased;
  }
  .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
     ══════════════════════════════════════ */
  /* ⚠️ LA PHOTO EST UN ENFANT DE LA CARTE, DONC ELLE PASSE DEVANT SON FOND.
     `background` peint la carte, `.onix-nl__bg-images` est un élément : le
     dégradé de verre ne voile jamais la moitié gauche du bureau, il ne se voit
     que sur la moitié droite, celle du formulaire. C'est ce qu'on veut.
     ⚠️ `backdrop-filter` crée un bloc conteneur : l'absolu de la photo s'y
     accroche exactement comme il s'accrochait déjà à l'animation. */
  .onix-nl__card {
    position: relative;
    z-index: 2;
    background: linear-gradient(180deg, var(--nl-verre-haut) 0%, var(--nl-verre-bas) 100%);
    backdrop-filter: blur(var(--nl-flou)) saturate(180%);
    -webkit-backdrop-filter: blur(var(--nl-flou)) saturate(180%);
    border: 1px solid var(--nl-cheveu);
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.14);
    color: #fff;
    border-radius: 1.75rem;
    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; }
  }

  /* LA PHOTO = moitié gauche de la carte (absolue DANS la carte — le bloc
     conteneur créé par l'animation joue en notre faveur).
     ⚠️ C'ÉTAIT UNE GRILLE 2×2 DE QUATRE IMAGES JUSQU'AU 05/09. Une seule photo
       s'affiche désormais, tirée au hasard : plus de `grid-template`, sinon la
       photo unique n'occuperait qu'un quart de la place et laisserait trois
       quarts de carte noire. */
  .onix-nl__bg-images {
    position: absolute;
    top: 0;
    left: 0;
    width: 50%;
    height: 100%;
    z-index: 0;
    overflow: hidden;
    /* ⛔ CE FOND SOMBRE N'EST PAS DÉCORATIF — il est là pour l'instant où la
       photo N'EST PAS LÀ. Une seule image porte désormais tout le fond : tant
       qu'elle charge (2,4 s à 43 s selon le réseau, mesuré), ou si elle ne
       charge jamais, c'est cette couleur qui occupe la surface. Sans elle, le
       conteneur est transparent — et sur mobile, où il fait tout l'écran, on
       lisait la boutique à travers la pop-up. */
    background: #0b0c0e;
  }

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

  /* LE VOILE — il existe pour UNE des quatre photos.
     ⛔ LES QUATRE FONDS NE SE VALENT PAS : luminance moyenne mesurée 131 · 92 ·
       220 · 113 sur 255. Le troisième est une planche aquarelle sur fond BLANC ;
       les trois autres sont des photos sombres. Sans voile, la carte de gauche
       passe du noir au blanc selon le tirage et les badges blancs qui la
       bordent deviennent illisibles un affichage sur quatre — un défaut qui ne
       se voit QUE si on regarde les quatre variantes, d'où `?voir-fond`.
     ⚠️ Un voile UNIFORME, pas un voile par image : une correction par photo se
       désaccorderait à la première image remplacée. */
  .onix-nl__bg-images::after {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.2);
    pointer-events: none;
    z-index: 1;
  }

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

  /* LA CROIX — pastille de verre. Elle vit sur la photo (mobile) ou sur le coin
     de la carte (bureau) : sans son propre fond, elle disparaît sur une photo
     claire, et la seule sortie de la pop-up devient invisible un tirage sur
     quatre. */
  .onix-nl__close {
    position: absolute;
    top: 1rem;
    right: 1rem;
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.125rem;
    height: 2.125rem;
    border: 1px solid var(--nl-cheveu);
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.14);
    backdrop-filter: blur(18px) saturate(160%);
    -webkit-backdrop-filter: blur(18px) saturate(160%);
    color: #fff;
    cursor: pointer;
    padding: 0;
    transition: background 150ms;
  }
  .onix-nl__close svg { width: 15px; height: 15px; }
  .onix-nl__close:hover { background: rgba(255, 255, 255, 0.24); }
  .onix-nl__close:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
  /* Posée par le JS quand la croix a été sortie de la carte (mobile) : elle
     s'ancre alors sur `.onix-nl`, qui est `position:fixed` — donc sur l'écran. */
  .onix-nl__close--flottante {
    position: absolute;
    top: 1rem;
    right: 1rem;
    z-index: 12;
  }

  /* ⛔ LE PREMIER ÉCRAN EST ALIGNÉ À GAUCHE, LE SECOND RESTE CENTRÉ. Ce n'est pas
     une inconséquence : le premier est une page de lecture (une puce, un titre
     sur deux lignes, une échelle de quatre colonnes) et le centrage y casse le
     bord gauche que l'œil suit. Le second est une annonce autour d'une coche —
     un axe, pas une colonne de texte. */
  .onix-nl__body {
    position: relative;
    z-index: 1;
    padding: 3rem clamp(2rem, 4vw, 3.25rem);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: stretch;
    text-align: left;
    gap: 0;
    flex: 1;
  }
  .onix-nl__body.is-hidden { display: none; }
  .onix-nl__body--success { display: none; align-items: center; text-align: center; }
  .onix-nl__body--success.is-visible { display: flex; }
  .onix-nl__result { width: 100%; text-align: center; }
  .onix-nl__result[hidden] { display: none !important; }

/* ── La poignée de feuille iOS — décorative, mobile seulement ── */
  .onix-nl__poignee { display: none; }

/* ── La puce « PRIX DÉGRESSIF » ── */
  .onix-nl__sourcil {
    align-self: flex-start;
    display: inline-block;
    font-size: 0.656rem;              /* 10,5 px */
    font-weight: 600;
    letter-spacing: 0.13em;
    text-transform: uppercase;
    color: var(--nl-texte-2);
    padding: 0.3125rem 0.625rem;
    border-radius: 999px;
    border: 1px solid var(--nl-cheveu-doux);
    background: var(--nl-tuile);
  }

/* ── Typography ── */
  .onix-nl__check { margin-bottom: 0.5rem; color: #fff; }
  .onix-nl__title {
    margin: 0.75rem 0 0.375rem;
    font-size: clamp(1.5rem, 3vw, 2.25rem);
    font-weight: 700; line-height: 1.1;
    letter-spacing: -0.025em; color: #fff;
    text-wrap: balance;
    text-shadow: 0 1px 14px rgba(0, 0, 0, 0.35);
  }
  .onix-nl__subtitle {
    margin: 0 0 1rem; font-size: 0.844rem;   /* 13,5 px */
    line-height: 1.4; color: var(--nl-texte-2);
  }
  .onix-nl__body--success .onix-nl__title { margin-top: 0; }
  .onix-nl__body--success .onix-nl__subtitle { margin-bottom: 0.5rem; }
  /* LE FOMO — une ligne, au-dessus du champ, jamais un bandeau qui crie.
     Elle dit ce qui est VRAI : la pop-up ne revient pas, et le code s'affiche
     dans l'écran suivant. Aucun minuteur, aucun stock inventé (Directive
     Omnibus UE 2019/2161). */
  /* ⚠️ ELLE RESTE, ET ELLE PERD SON CYAN — 06/09. V01 n'a pas de ligne FOMO ;
     le portage n'avait pas mandat de la retirer, et c'est une décision du 05/09
     15h08. Elle descend donc d'un cran : même corps que la légende, même gris,
     au-dessus du champ. Ce qu'elle dit reste vrai et vérifiable dans ce fichier
     (pop-up une seule fois, code dans l'écran suivant) — aucun minuteur, aucun
     stock inventé, Directive Omnibus UE 2019/2161. */
  .onix-nl__fomo {
    margin: 0 0 0.5rem;
    font-size: 0.719rem;              /* 11,5 px */
    line-height: 1.35;
    font-weight: 500;
    letter-spacing: .01em;
    color: var(--nl-texte-3);
    text-align: center;
  }
  .onix-nl__note {
    margin: 0.75rem 0 0; font-size: 0.656rem;   /* 10,5 px */
    color: var(--nl-texte-3); line-height: 1.4;
    text-align: center;
  }

/* ── L'ÉCHELLE QUI FOND — quatre pastilles, le prix PAR MAILLOT ──────────────
   ⚠️ `min-width: 0` SUR LE PALIER N'EST PAS DÉCORATIF. C'est le défaut latent
     trouvé sur la direction A le 06/09 : un enfant de flex a `min-width:auto`,
     donc il refuse de descendre sous la largeur de son contenu et POUSSE la
     rangée hors de la carte. Ici le contenu est « 24,99 € » ; à 320 px, quatre
     colonnes de cette largeur ne tiennent pas. Sans cette ligne, la rangée
     déborde — silencieusement, et seulement sur les petits écrans. */
  .onix-nl__echelle {
    display: flex;
    gap: 0.375rem;
    width: 100%;
    margin-bottom: 0.5rem;
  }
  .onix-nl__palier {
    flex: 1 1 0;
    min-width: 0;
    padding: 0.625rem 0.25rem 0.5625rem;
    border-radius: 1rem;
    text-align: center;
    background: var(--nl-tuile);
    border: 1px solid var(--nl-cheveu-doux);
  }
  .onix-nl__palier-qte {
    display: block;
    font-size: 0.656rem;              /* 10,5 px */
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.82);
  }
  .onix-nl__palier-prix {
    display: block;
    margin-top: 0.1875rem;
    font-size: 0.9375rem;             /* 15 px */
    font-weight: 600;
    letter-spacing: -0.02em;
    color: rgba(255, 255, 255, 0.9);
    white-space: nowrap;
  }
  /* Le prix d'arrivée : seul aplat plein de la carte, et seule couleur. */
  .onix-nl__palier--fin {
    background: #fff;
    border-color: #fff;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.3);
  }
  .onix-nl__palier--fin .onix-nl__palier-qte { color: rgba(0, 0, 0, 0.62); }
  .onix-nl__palier--fin .onix-nl__palier-prix { color: #000; font-weight: 700; font-size: 1rem; }

  .onix-nl__legende {
    margin: 0 0 0.75rem;
    font-size: 0.719rem;              /* 11,5 px */
    line-height: 1.35;
    color: var(--nl-texte-3);
    text-align: center;
  }

  /* ── 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;
  }
  /* ⛔ LE 2ᵉ ÉCRAN PORTE LE MÊME VERRE QUE LE 1ᵉʳ — 06/09, design V01. Il était
     resté en cyan (`--c-accent`, #00c8ff) : le client donnait son numéro sur une
     carte de verre et atterrissait sur une carte fluo, sur la même photo, sans
     transition. C'est UNE feuille qui change de contenu, pas deux surfaces —
     l'habillage ne peut pas changer entre les deux passes.
     ⚠️ LE CODE RESTE EN POINTILLÉ : c'est ce qui dit « à recopier ». On lui
       retire sa couleur, pas sa forme. */
  .onix-nl__code-label { margin: 0; font-size: 0.72rem; font-weight: 600; color: var(--nl-texte-3); line-height: 1.25; }
  .onix-nl__code-value {
    display: block; width: 100%; box-sizing: border-box;
    padding: 0.5rem 0.4rem;
    border: 1px dashed var(--nl-cheveu); border-radius: 0.75rem;
    background: var(--nl-tuile); color: #fff;
    font-size: 0.95rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
  }
  .onix-nl__apply {
    width: 100%; box-sizing: border-box;
    padding: 0.6rem 0.4rem; border: none; border-radius: 0.75rem;
    background: #fff; color: #000;
    font-family: inherit; font-size: 0.78rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.03em;
    cursor: pointer; transition: filter 150ms, transform 150ms;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.3);
  }
  .onix-nl__apply:hover:not(:disabled) { filter: brightness(0.92); transform: translateY(-1px); }
  .onix-nl__apply:active:not(:disabled) { transform: scale(0.98); }
  /* Appliqué : il quitte l'aplat blanc pour la tuile de verre — l'action est
     faite, elle n'a plus à peser autant que celles qui restent à faire. Le ✓ du
     libellé (`newsletter_popup.applied`) dit l'état, la couleur ne le porte pas
     seule (WCAG 1.4.1). */
  .onix-nl__apply.is-done {
    background: var(--nl-tuile); color: #fff;
    border: 1px solid var(--nl-cheveu); box-shadow: none;
  }
  /* 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; }
  /* ⚠️ CELLE-CI RESTE PRESQUE OPAQUE, ET C'EST VOLONTAIRE : elle se pose sur la
     carte de verre, pas sur la photo. Deux verres l'un sur l'autre ne donnent
     pas deux plans, ils donnent une bouillie — la confirmation doit se détacher
     de ce qu'elle recouvre. Elle en garde les rayons, les cheveux et l'ombre. */
  .onix-nl__apply-box {
    width: min(360px, 100%); text-align: center;
    padding: 1.6rem 1.4rem 1.4rem;
    border-radius: 1.25rem;
    background: linear-gradient(180deg, rgba(20,22,27,0.94) 0%, rgba(11,12,15,0.96) 100%);
    backdrop-filter: blur(18px) saturate(160%);
    -webkit-backdrop-filter: blur(18px) saturate(160%);
    border: 1px solid var(--nl-cheveu);
    box-shadow: 0 24px 60px rgba(0,0,0,0.45), inset 0 1px 0 rgba(255,255,255,0.14);
  }
  .onix-nl__apply-icon { margin-bottom: 0.5rem; color: #fff; }
  .onix-nl__apply-title { margin: 0 0 0.5rem; font-size: 1.15rem; font-weight: 700; letter-spacing: -0.02em; color: #fff; }
  .onix-nl__apply-msg { margin: 0 0 1.1rem; font-size: 0.9rem; line-height: 1.45; color: var(--nl-texte-2); }
  .onix-nl__apply-msg b { color: #fff; font-weight: 700; }
  .onix-nl__apply-ok {
    display: block; width: 100%; box-sizing: border-box;
    padding: 0.9rem 1rem; border: none; border-radius: 1rem;
    background: #fff; color: #000;
    font-family: inherit; font-weight: 600; font-size: 0.9rem;
    letter-spacing: -0.01em; cursor: pointer;
    box-shadow: 0 8px 24px rgba(0,0,0,0.32);
    transition: filter 150ms, transform 150ms;
  }
  .onix-nl__apply-ok:hover { filter: brightness(0.92); }
  .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;
  }
  /* ⛔ LES CHAMPS NE SONT PLUS DES GÉLULES — 06/09, design V01. Le rayon 999 px
     et le cyan de focus venaient de l'ancienne carte ; V01 pose des rectangles
     arrondis de 15 px et n'a QU'UN accent, le blanc.
     ⚠️ CES VALEURS SONT ÉCRITES DEUX FOIS, ICI ET DANS LE BLOC « style » EN HAUT
       DE FICHIER, ET CE N'EST PAS UN OUBLI : ce bloc-là est en `!important` et
       gagne sur la feuille « stylesheet » sur mobile. Les laisser diverger,
       c'est le piège qui a coûté un tour au portage — le rayon d'ici ne sortait
       jamais sous 749 px. Elles se relisent ensemble. */
  .onix-nl__input {
    width: 100%;
    height: 3.125rem;                 /* 50 px — V01 */
    padding: 0 0.875rem;
    border: 1px solid var(--nl-cheveu);
    border-radius: 0.9375rem;         /* 15 px — V01 */
    background: var(--nl-champ);
    color: #fff;
    font-size: 0.9375rem;
    outline: none;
    transition: border-color 200ms;
    box-sizing: border-box;
  }
  .onix-nl__input:focus { border-color: rgba(255,255,255,0.55); }
  /* ⚠️ LE TEXTE FANTÔME EST À 0,76, PAS À 0,40. Posé sur un verre translucide
     qui laisse remonter la photo, un gris à 0,40 tombe sous 3:1 dès que le
     tirage sort la planche claire — « Ton numéro » devenait un fantôme. */
  .onix-nl__input::placeholder { color: rgba(255,255,255,0.76); }

  /* ── Indicatif + numéro : une seule ligne ────────────────────────────────
     ⚠️ `.onix-nl__form-row` est une COLONNE (champ au-dessus, bouton dessous).
        Le sélecteur et le champ forment donc une ligne à eux, imbriquée — sans
        elle, le sélecteur se retrouverait empilé au-dessus du numéro. */
  .onix-nl__tel-ligne { display: flex; gap: 0.5rem; width: 100%; }
  .onix-nl__pays {
    flex: 0 0 auto;
    width: 7.2rem;                 /* « 🇱🇺 LU +352 » est le plus large des 13 */
    min-width: 0;
    height: 3.125rem;              /* 50 px — même ligne que le champ, V01 */
    padding: 0 0.5rem;
    box-sizing: border-box;
    border: 1px solid var(--nl-cheveu);
    border-radius: 0.9375rem;      /* 15 px — V01 */
    background: var(--nl-champ);
    color: #fff;
    font-family: inherit;
    font-size: 0.9375rem;
    text-align: center;
    outline: none;
    cursor: pointer;
    transition: border-color 200ms;
    /* La flèche native d'un select est illisible sur fond sombre selon les
       plateformes ; on retire l'habillage, le fond seul porte le champ. */
    appearance: none;
    -webkit-appearance: none;
  }
  /* ⛔ SANS CETTE RÈGLE, LA LISTE DÉROULÉE EST BLANC SUR BLANC sur Windows et
     Android : les <option> héritent de `color:#fff` du select, pas du fond
     sombre. Le client ouvre la liste et ne voit rien. */
  .onix-nl__pays option { color: #111; background: #fff; }
  .onix-nl__pays:focus { border-color: rgba(255,255,255,0.55); }
  /* Le champ prend ce qui reste. `width:auto` annule le `width:100%` de la
     règle de base, qui pousserait le sélecteur hors de la carte. */
  .onix-nl__tel-ligne .onix-nl__input { flex: 1 1 auto; min-width: 0; width: auto; }
  .onix-nl__input[aria-invalid="true"] { border-color: #ef4444; }

  .onix-nl__erreur {
    margin: 0; width: 100%;
    font-size: 0.78rem; font-weight: 600; line-height: 1.35;
    color: #ef4444; text-align: center;
  }
  .onix-nl__erreur[hidden] { display: none; }

  /* Étiquettes de lecteur d'écran — retirées du flux, jamais `display:none`
     (un champ masqué ainsi n'est plus annoncé du tout). */
  .onix-nl__sr-only {
    position: absolute;
    width: 1px; height: 1px;
    margin: -1px; padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
  }
  /* LE BOUTON — le seul aplat blanc avec la 4ᵉ pastille. 52 px, rayon 16 px :
     un cran plus grand et plus arrondi que les champs, pour qu'il se lise comme
     l'action et non comme une troisième case à remplir (V01). */
  .onix-nl__submit {
    width: 100%;
    height: 3.25rem;                  /* 52 px — V01 */
    padding: 0 1.5rem;
    border: none;
    border-radius: 1rem;              /* 16 px — V01 */
    background: #fff;
    color: #000;
    font-size: 1rem;
    font-weight: 600;
    letter-spacing: -0.01em;
    cursor: pointer;
    transition: background 150ms, transform 150ms;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.32);
    box-sizing: border-box;
  }
  .onix-nl__submit:hover { background: #e5e5e5; }
  .onix-nl__submit:active { transform: scale(0.98); }

  /* ── LE REFUS ASSUMÉ — volontairement en retrait ──────────────────────────
     Celui qui refuse ne doit JAMAIS peser autant que celui qui accepte : aucun
     fond, aucune bordure, texte gris, 0,8 rem contre 1 rem. Le bouton blanc
     garde toute la surface.
     ⚠️ MAIS IL RESTE UNE VRAIE CIBLE : 2,75 rem de haut, soit 44 px, le minimum
       tactile de WCAG 2.5.5. Discret n'est pas piégeux — un lien qu'on ne peut
       pas viser, c'est un client qui reste enfermé dans la pop-up. */
  .onix-nl__refus {
    width: 100%;
    min-height: 2.75rem;
    padding: 0.35rem 0.75rem;
    border: none;
    background: none;
    color: rgba(255,255,255,0.66);    /* V01 — 0,45 disparaissait sur la photo claire */
    font-family: inherit;
    font-size: 0.781rem;              /* 12,5 px — V01 */
    font-weight: 500;
    line-height: 1.3;
    text-decoration: underline;
    text-underline-offset: 2px;
    cursor: pointer;
    box-sizing: border-box;
    transition: color 150ms;
  }
  .onix-nl__refus:hover { color: rgba(255,255,255,0.9); }
  .onix-nl__refus:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

  /* ══════════════════════════════════════
     MOBILE — images fullscreen behind card
     ══════════════════════════════════════ */
  @media (max-width: 749px) {
    /* ⛔ LA CARTE DEVIENT UNE FEUILLE ANCRÉE EN BAS — 06/09, design V01, et
       c'est la moitié du design. Elle était CENTRÉE : la photo était coupée en
       deux, le visage passait derrière la carte, et la poignée posée dans le
       balisage depuis ce matin n'avait aucune règle pour l'afficher — du
       balisage mort, invisible, que rien ne signalait.
       ➜ `align-items: flex-end` sur le calque, 9 px de marge sur les trois
         côtés (V01), rayon 30 px. La photo garde tout le haut de l'écran.
       ⚠️ ET LE CALQUE PERD SON `padding: 1rem` : il servait à écarter une carte
         centrée des bords. Sur une feuille, il ajouterait 16 px aux 9 px de
         marge et décollerait la feuille du bas, ce qui n'est plus une feuille. */
    .onix-nl { padding: 0; align-items: flex-end; justify-content: stretch; }

    /* ⛔ LE VOILE RESTE, ET IL PASSE SOUS LA PHOTO — 06/09.
       Il était en `display:none` ici : la photo était donc LE SEUL voile de la
       version mobile. Tant qu'elle n'était pas peinte — 2,4 s à 43 s après
       l'ouverture, mesuré à 4 Mbit/s et 400 kbit/s — ou si elle était bloquée,
       on lisait « SÉLECTION », les cartes produit et le bandeau cookies EN
       CLAIR derrière la pop-up.
       ➜ Il reprend sa place, mais en `z-index: 0` : la photo (z-index 1) le
         recouvre entièrement dès qu'elle arrive, donc le rendu final ne change
         pas d'un pixel. Il ne se voit QUE pendant le chargement et en cas
         d'échec — exactement les deux instants où il manquait.
       ⚠️ Il ne change RIEN au clic : la photo, au-dessus, reçoit les clics comme
         avant. Fermer par le fond passe par `.onix-nl` lui-même et par la croix,
         inchangés. */
    .onix-nl__backdrop {
      display: block;
      z-index: 0;
      background: rgba(0, 0, 0, 0.88);
      backdrop-filter: blur(12px);
      -webkit-backdrop-filter: blur(12px);
    }

    /* 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: 1;
      border-radius: 0;
    }

    /* ⛔ SUR MOBILE LE VOILE EST PLUS DENSE, ET C'EST LÀ QUE TOUT SE JOUE.
       `.onix-nl__backdrop` (rgba(0,0,0,0.6) + flou) est en `display:none` ici :
       la photo occupe l'écran ENTIER, sans rien entre elle et l'œil. Avec la
       planche aquarelle (220/255 de luminance) l'écran devenait presque blanc
       autour d'une carte sombre.
       ⛔ 0,45 A ÉTÉ ESSAYÉ PUIS ABANDONNÉ, capture à l'appui : il rendait la
         planche confortable mais ÉTEIGNAIT la photo au mur gris (92/255 avant
         voile) — écran noir, veste invisible, un affichage sur quatre qui ne
         montre plus le produit. La lisibilité du texte ne vient PAS du voile :
         elle vient de la carte, opaque à 0,85, qui donne au moins 10:1 de
         contraste même posée sur du blanc pur. Le voile ne sert donc qu'à
         écrêter l'éblouissement, et 0,25 y suffit. */
    .onix-nl__bg-images--mobile::after {
      background: rgba(0, 0, 0, 0.25);
    }

    /* LA FEUILLE — verre dépoli, ancrée en bas, 9 px de marge (V01).
       ⛔ ELLE NE REDÉCLARE PLUS SON FOND. Elle portait `rgba(30,30,30,0.85)` +
         `blur(24px)`, hérités de l'ancienne carte : ces deux lignes écrasaient
         les jetons du verre SUR MOBILE, c'est-à-dire précisément sur l'écran
         qu'il regarde. Le dégradé de V01 ne se voyait que sur bureau, et rien
         ne le disait — la carte avait l'air « presque bonne ».
       ⚠️ `100dvh` ET NON `100vh` : sur iOS Safari, `vh` compte la barre d'URL
         repliée. Avec une feuille ancrée en bas, l'erreur ne se voit pas au
         chargement — elle pousse le bouton sous la barre quand elle réapparaît.
       ⚠️ `env(safe-area-inset-bottom)` : sur un iPhone à barre gestuelle, 9 px
         de marge mettent le refus SOUS l'indicateur d'accueil. */
    /* ⛔ `align-self: stretch` ÉTAIT UNE FAUTE D'AXE, ET ELLE RENVOYAIT LA
       FEUILLE EN HAUT DE L'ÉCRAN. `.onix-nl` est un flex en RANGÉE : son axe
       transversal est donc le VERTICAL. `align-self: stretch` sur la carte
       écrasait l'`align-items: flex-end` du calque, la carte s'étirait sur toute
       la hauteur, retombait sur son `max-height` et se collait EN HAUT — le
       contraire exact de la feuille iOS. Mesuré au harnais local avant
       publication : bord bas de la carte à 772 px pour un écran de 844.
       ➜ L'élargissement se demande sur l'axe PRINCIPAL — `flex: 1 1 auto` —,
         jamais sur le transversal, qui sert ici à l'ancrage en bas. */
    .onix-nl__card {
      width: auto;
      flex: 1 1 auto;
      margin: 0 0.5625rem calc(0.5625rem + env(safe-area-inset-bottom, 0px));
      min-height: 0;
      max-height: calc(100dvh - 4.5rem);
      overflow-y: auto;
      height: auto;
      border-radius: 1.875rem;        /* 30 px — V01 */
      flex-direction: column;
    }

    /* LA POIGNÉE — le seul signe qui dit « feuille iOS » avant qu'on lise.
       Décorative, mobile seulement : sur bureau la carte n'est pas ancrée en
       bas et une poignée y annoncerait un geste qui n'existe pas. */
    .onix-nl__poignee {
      display: block;
      width: 2.25rem;
      height: 0.25rem;
      border-radius: 0.125rem;
      background: rgba(255, 255, 255, 0.28);
      margin: 0 auto 1rem;
      flex: none;
    }

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

    /* ⛔ ELLE GARDE SA PASTILLE DE VERRE, ET C'EST TOUT LE POINT. Cette règle
       posait `background: none` : sur mobile la croix est DEHORS de la carte,
       posée sur la photo — sans fond, elle disparaît dans un ciel clair ou un
       maillot blanc, et la seule sortie de la pop-up devient invisible un
       tirage sur quatre. La règle de base le disait déjà ; cette surcharge-ci
       la défaisait douze lignes plus bas. */
    .onix-nl__close {
      top: 1rem; right: 1rem;
      width: 2.125rem; height: 2.125rem;
      z-index: 12;
    }
    .onix-nl__close svg { width: 15px; height: 15px; }

    /* 20 / 18 / 16 px — les marges de la feuille V01. L'ancienne carte centrée
       en prenait 28 : sur une feuille ancrée, cette respiration-là mange la
       photo sans rien donner au texte. */
    .onix-nl__body { padding: 1.25rem 1.125rem 1rem; flex: none; }
    .onix-nl__title { font-size: clamp(1.4rem, 5.5vw, 1.625rem); }
    .onix-nl__subtitle { font-size: 0.844rem; }
    .onix-nl__note { font-size: 0.656rem; }

    /* ⛔ TROIS RÈGLES MORTES RETIRÉES ICI — `.onix-nl__badges`, `.onix-nl__badge`,
       `.onix-nl__line`, `.onix-nl__line-price`. Leur balisage a disparu avec les
       deux badges cyan et la ligne d'exemple, remplacés par la puce et
       l'échelle : du CSS qui ne peint plus rien, et que le prochain lecteur
       aurait pris pour de l'actif. `verifier-references.js --css` les listait
       sans les compter — il informe, il ne nettoie pas. */

    /* 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__form-row { flex-direction: column; gap: 0.5rem; }
    /* ⚠️ LA LIGNE INDICATIF + NUMÉRO RESTE UNE LIGNE sur mobile. C'est
       `.onix-nl__form-row` qui passe en colonne (champ / bouton), pas elle. */
    .onix-nl__tel-ligne { gap: 0.4rem; }
    .onix-nl__pays { width: 6.6rem; padding: 0 0.35rem; }
    .onix-nl__erreur { font-size: 0.72rem; }
    /* Le refus rétrécit avec le reste, mais garde ses 44 px de cible. */
    .onix-nl__refus { font-size: 0.75rem; padding: 0.3rem 0.5rem; }
  }

  /* 320 px : le sélecteur reprend de la place au champ, jamais l'inverse. */
  @media (max-width: 359px) {
    .onix-nl__tel-ligne { gap: 0.3rem; }
    .onix-nl__pays { width: 6.1rem; padding: 0 0.2rem; }
    /* ⛔ « Ton numéro » ÉTAIT COUPÉ DE 2 px À 320 px — relevé par la revue le
       05/09, invisible pour `detecter-textes-coupes.js` : le `scrollWidth` d'un
       `<input>` ne compte PAS son `placeholder`, le garde sortait donc ✅ sur un
       texte tronqué (« Ton numérc »). La cause n'est pas la police, c'est le
       `padding: 0 1.25rem` de la règle de base — 40 px pris sur les 126 px de
       champ qui restent à 320 px. On rend 24 px au texte ; le champ garde une
       marge lisible et la ligne ne bouge pas. 360 et 390 px n'y touchent pas. */
    .onix-nl__tel-ligne .onix-nl__input { padding: 0 0.5rem; }
    /* ⛔ « 24,99 € » DÉBORDAIT SA PASTILLE DE 2 px À 320 px — mesuré au harnais
       local le 06/09 (`scrollWidth` 54 pour `clientWidth` 52), invisible à
       390 px. Quatre colonnes égales dans 266 px utiles laissent 52 px de texte
       par pastille ; le prix le plus long en demande 54 à 15 px. Le
       `white-space: nowrap` fait alors ce qu'on lui demande — il ne renvoie pas
       à la ligne, il dépasse. On rend la place sur les trois postes qui n'ont
       pas de sens (gouttières, marges internes) avant de toucher au corps du
       prix, qui est l'argument de la carte. */
    .onix-nl__echelle { gap: 0.25rem; }
    .onix-nl__palier { padding-left: 0.125rem; padding-right: 0.125rem; }
    .onix-nl__palier-prix { font-size: 0.875rem; }      /* 14 px */
    .onix-nl__palier--fin .onix-nl__palier-prix { font-size: 0.9375rem; }
    /* La plus longue des six langues est le néerlandais (33 caractères) : à
       0,72 rem elle tient sur une ligne dans les 248 px utiles d'un 320 px. */
    .onix-nl__refus { font-size: 0.72rem; padding: 0.3rem 0.25rem; }
  }
/* END_SECTION:onix-newsletter-popup */

/* START_SECTION:onix-product-recommendations (INDEX:25) */
.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:26) */
.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:29) */
.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:30) */
.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:32) */
/* ── « 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; }
  /* ⚠️ LE BLOC VIT DANS LE FORMULAIRE, juste avant le bouton d'ajout — sa
     demande du 29/08. Première tentative par `order: 5` : sans effet, parce
     que `.onix-product__form` a un order CALCULÉ de 0, pas 6 comme l'annonce
     un commentaire plus haut dans ce fichier. Une valeur commentée n'est pas
     une valeur mesurée. Il est donc déplacé dans le DOM, pas réordonné en CSS :
     sa place ne dépend plus d'un order que quelqu'un pourrait changer.
     ⚠️ Ses boutons sont tous `type="button"` : dans un <form>, un bouton sans
       type soumet le formulaire. Le pack ajouterait alors une veste au panier
       à chaque clic sur une pastille de couleur. */
  .onix-product__content > .onix-bundle2 { order: 8; }

  /* ══ PACK 2 VESTES ══════════════════════════════════════════════════════
     DA sobre, calée sur la grille de la colonne d'achat.

     ⚠️ BLOC CLAIR : premier jet en sombre, textes invisibles — `--c-fg` existe
       dans ce thème et vaut #111111, donc `var(--c-fg, #eceef1)` prenait le
       NOIR. Un repli ne sert que si la variable n'existe pas.

     ⚠️ CALAGE — sa remarque du 29/08. Quatre choses ne l'étaient pas :
       le badge chevauchait le sélecteur de taille au-dessus (il déborde de
       0,72rem, il faut donc au moins autant de marge) ; le bloc collait au
       bouton d'ajout ; les vignettes n'étaient pas alignées sur le texte des
       lignes ; et les prix ne tombaient pas sur une colonne commune, donc les
       montants dansaient d'une ligne à l'autre. */
  /* ⛔ `min-width: 0` SUR LE BLOC LUI-MÊME — 29/08, mesuré à 320 px.
     Le pack sortait de son conteneur de 412 px : 710 px de large dans un
     parent de 298. La cause n'était PAS son contenu — c'était lui.
     `.onix-product__actions` est une grille ; un item de grille a
     `min-width: auto`, donc il refuse de se réduire sous la largeur de son
     contenu le plus long. J'ai d'abord traité l'enfant (`__name`), sans effet :
     tant que le PARENT refuse de rétrécir, contraindre son contenu ne change
     rien. La règle se pose au niveau où le refus a lieu. */
  .onix-pack2 {
    min-width: 0;
    max-width: 100%;
    position: relative;
    /* La marge du haut couvre le débord du badge (0.72rem) + son air propre. */
    margin: 2.1rem 0 1.35rem;
    padding: 1.25rem 1.1rem 1.1rem;
    border: 1.5px solid #111111;
    border-radius: 0.9rem;
    background: #ffffff;
    color: #111111;
  }
  .onix-pack2__tag {
    position: absolute;
    top: -0.72rem;
    right: 1.1rem;
    padding: 0.38rem 0.75rem;
    border-radius: 99px;
    background: #111111;
    color: #ffffff;
    font-size: 0.7rem;
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0.01em;
    white-space: nowrap;
  }
  .onix-pack2__head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 0.9rem;
    margin-bottom: 1.05rem;
  }
  .onix-pack2__title { display: block; font-size: 1.02rem; font-weight: 700; letter-spacing: -0.01em; line-height: 1.2; color: #111111; }
  .onix-pack2__sub { display: block; margin-top: 0.2rem; font-size: 0.76rem; font-style: italic; line-height: 1.3; color: #6b7280; }
  .onix-pack2__price { flex: 0 0 auto; text-align: right; }
  .onix-pack2__price strong {
    display: block; font-size: 1.45rem; font-weight: 700; line-height: 1.05;
    letter-spacing: -0.025em; color: #111111; font-variant-numeric: tabular-nums;
  }
  .onix-pack2__price s { display: inline-block; margin-top: 0.15rem; font-size: 0.76rem; color: #9199a3; }
  /* Le prix à la pièce : la SEULE ligne en couleur du bloc. Tout le reste est
     noir et blanc, donc l'œil y va — c'est l'argument, pas une décoration. */
  .onix-pack2__unit {
    display: block; margin-top: 0.18rem; font-size: 0.78rem;
    font-style: normal; font-weight: 700; color: #1a7f4f;
    font-variant-numeric: tabular-nums;
  }

  /* Les deux lignes produit : vignette, nom, prix. Le prix est en colonne
     fixe pour que les montants s'alignent verticalement d'une ligne à l'autre. */
  .onix-pack2__line {
    display: grid;
    grid-template-columns: 3.1rem minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.8rem;
  }
  /* ⚠️ IMAGE PLEINE — sa demande du 29/08, répétée : « je veux les images
     pleines, pas ressentir le cadre ». `contain` laissait la photo flotter
     dans un carré gris, donc un cadre visible autour de chaque vignette.
     `cover` remplit : le vêtement occupe toute la vignette, et le fond gris
     de la photo produit devient le fond de la vignette elle-même. */
  /* ⚠️ `contain` ET NON `cover` — corrigé le 29/08 après sa capture : « c'est
     trop gros, c'est coupé ». `cover` remplissait bien la vignette mais
     RECADRAIT le vêtement — manches et capuche sortaient du cadre. « Image
     pleine » veut dire sans cadre perçu, pas rognée.
     ➜ La vignette prend EXACTEMENT le fond des packshots (#e6e4e0, relevé au
       pixel sur une vraie photo) : l'image et son cadre deviennent une seule
       surface, la veste reste entière, et plus rien ne se voit du contenant. */
  .onix-pack2__thumb {
    width: 3.1rem; height: 3.1rem;
    border-radius: 0.5rem; overflow: hidden;
    background: #e6e4e0;
  }
  .onix-pack2__thumb img { width: 100%; height: 100%; object-fit: contain; display: block; }
  /* ⛔ LE PACK DÉBORDAIT DE 412 px — mesuré le 29/08 à 320 px de large.
     `min-width: 0` était déjà là et NE SUFFISAIT PAS : sans contrainte de
     retour à la ligne, « Brésil – Veste Coupe-Vent à Capuche – Gris Bleu &
     Vert Citron » occupait 551 px sur une seule ligne et poussait le bloc
     entier à 710 px dans un parent de 298. Rien ne le signalait — la PAGE ne
     débordait pas, c'est le BLOC qui sortait de son conteneur, et aucun garde
     de « hors écran » ne regarde ça.
     ⚠️ Une première tentative a posé la même règle 80 lignes plus haut : à
       spécificité égale, c'est la DERNIÈRE du fichier qui gagne — elle était
       morte à l'écriture. La règle se corrige LÀ OÙ ELLE EST. */
  .onix-pack2__name {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.86rem;
    font-weight: 600;
    line-height: 1.3;
    color: #111111;
  }
  .onix-pack2__amount { font-size: 0.86rem; font-weight: 600; color: #111111; font-variant-numeric: tabular-nums; }
  .onix-pack2__sep { position: relative; height: 1px; margin: 0.85rem 0; background: #e5e7ea; }
  .onix-pack2__sep i {
    position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
    width: 1.55rem; height: 1.55rem; border-radius: 50%;
    background: #111111; color: #ffffff;
    display: grid; place-items: center;
    font: 700 0.9rem/1 inherit; font-style: normal;
  }

  /* Les deux choix. Le libellé occupe sa propre ligne pour que les boutons
     s'alignent sur la même colonne de gauche que les vignettes au-dessus. */
  .onix-pack2__pickers { margin-top: 1.05rem; display: flex; flex-direction: column; gap: 0.85rem; }
  /* ⚠️ CENTRÉ — sa demande du 29/08 (3ᵉ capture). Les rangées de choix
     étaient alignées à gauche alors que le bloc, lui, est symétrique : le
     titre à gauche, le prix à droite, et deux rangées collées au bord gauche
     déséquilibraient l'ensemble. */
  .onix-pack2__pickrow { display: flex; align-items: center; justify-content: center; gap: 0.45rem; flex-wrap: wrap; }
  /* Le rappel de taille qui a remplacé le second sélecteur (29/08). Discret :
     il informe, il ne demande rien. `is-ko` sert quand la taille du client
     n'existe pas ou est en rupture sur le coloris choisi. */
  .onix-pack2__meme {
    margin: 0.45rem 0 0;
    text-align: center;
    font-size: 0.78rem;
    font-weight: 500;
    color: #6b7280;
  }
  .onix-pack2__meme.is-ko { color: #b4232a; }

  .onix-pack2__picklabel {
    flex: 0 0 100%;
    text-align: center;
    margin-bottom: 0.15rem;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: #9199a3;
  }
  /* Même traitement que les coloris de la fiche : pas de bordure qui rogne
     l'image, un liseré posé À L'INTÉRIEUR pour l'état actif — il ne déplace
     rien et ne mange pas un pixel de la photo. */
  .onix-pack2__sw {
    position: relative;
    width: 2.6rem; height: 2.6rem; padding: 0;
    border: 0; border-radius: 0.5rem;
    background: #e6e4e0; cursor: pointer; overflow: hidden;
  }
  .onix-pack2__sw img { width: 100%; height: 100%; object-fit: contain; display: block; }
  .onix-pack2__sw::after {
    content: ""; position: absolute; inset: 0; border-radius: inherit;
    box-shadow: inset 0 0 0 1px rgba(17, 17, 17, 0.10);
    pointer-events: none; transition: box-shadow 0.15s;
  }
  .onix-pack2__sw:hover::after { box-shadow: inset 0 0 0 1.5px rgba(17, 17, 17, 0.35); }
  .onix-pack2__sw.is-on::after { box-shadow: inset 0 0 0 2px #111111; }
  .onix-pack2__sw:focus-visible,
  .onix-pack2__btn {
    display: block; width: 100%; margin-top: 1.15rem;
    border: 0; border-radius: 0.6rem; padding: 0.95rem;
    background: #111111; color: #ffffff;
    font-size: 0.85rem; font-weight: 700; letter-spacing: 0.01em; cursor: pointer;
  }
  .onix-pack2__btn[disabled] { opacity: 0.5; cursor: default; }
  .onix-pack2__note { margin-top: 0.6rem; font-size: 0.74rem; color: #6b7280; text-align: center; }

  /* Les prix de la 2ᵉ ligne : le remisé au-dessus, l'ancien barré dessous. */
  .onix-pack2__amount--deal { text-align: right; line-height: 1.15; }
  .onix-pack2__amount--deal strong { display: block; font-size: 0.9rem; font-weight: 700; color: #111111; font-variant-numeric: tabular-nums; }
  .onix-pack2__amount--deal s { display: block; margin-top: 0.08rem; font-size: 0.74rem; font-weight: 500; color: #9199a3; font-variant-numeric: tabular-nums; }

  /* ══ COLORIS DE LA GAMME ═══════════════════════════════════════════════ */
  /* ══ COLORIS DE LA GAMME ═══════════════════════════════════════════════
     Rendus DEUX fois, un seul visible à la fois — sa demande du 29/08 : sous
     les tailles sur ordinateur, sous les photos sur téléphone. Deux endroits
     dans deux colonnes différentes : un seul nœud déplacé en JS aurait sauté
     à chaque redimensionnement, et un `order` ne traverse pas les colonnes
     d'une grille. Le coût est cinq vignettes en double dans le DOM, invisibles
     et sans coût réseau — les images sont les mêmes, donc déjà en cache. */
  .onix-colors { margin: 0.9rem 0 0.2rem; }
  .onix-colors--desktop { display: none; }
  @media (min-width: 1000px) {
    .onix-colors--mobile { display: none; }
    /* ⚠️ LE CENTRAGE ÉTAIT ENFERMÉ DANS LE MEDIA MOBILE — 29/08.
       `text-align: center` et `justify-content: center` ne vivaient que sous
       `max-width: 999px` : sur PC la rangée restait collée à gauche de sa
       colonne. Mesuré : 328 px de décalage à 1000, 472 px à 1440. Un media
       query change la CONDITION, jamais le POIDS — une propriété écrite
       d'un seul côté de la bascule n'existe pas de l'autre. */
    .onix-colors--desktop {
      display: block;
      margin: 1rem 0 0.35rem;
      text-align: center;
    }
    .onix-colors--desktop .onix-colors__row { justify-content: center; }
  }

  .onix-colors__label {
    margin: 0 0 0.55rem;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: #9199a3;
  }
  .onix-colors__current { color: #111111; margin-left: 0.35rem; }
  .onix-colors__row { display: flex; gap: 0.45rem; flex-wrap: wrap; }

  /* ⚠️ IMAGE PLEINE, SANS CADRE — sa demande du 29/08 : « fais des images
     pleines, là on voit des bordures, j'aime pas ». Plus de bordure ni de fond
     gris : la photo occupe toute la vignette. L'état actif ne peut donc plus
     être une bordure — c'est un LISERÉ posé à l'intérieur (inset), qui ne
     déplace rien et ne rogne pas l'image. */
  .onix-colors__item {
    position: relative;
    display: block;
    width: 4.1rem;
    height: 4.1rem;
    border: 0;
    border-radius: 0.55rem;
    overflow: hidden;
    background: #e6e4e0;
    transition: opacity 0.15s;
  }
  .onix-colors__item::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    box-shadow: inset 0 0 0 1px rgba(17, 17, 17, 0.10);
    pointer-events: none;
    transition: box-shadow 0.15s;
  }
  .onix-colors__item:hover::after { box-shadow: inset 0 0 0 1.5px rgba(17, 17, 17, 0.35); }
  .onix-colors__item.is-current { cursor: default; }
  .onix-colors__item.is-current::after { box-shadow: inset 0 0 0 2px #111111; }
  .onix-colors__item.is-out { opacity: 0.4; }
  .onix-colors__item.is-loading { opacity: 0.55; }
  /* ⚠️ `contain` ET un peu d'air autour : la veste tient ENTIÈRE dans la
     vignette, manches comprises. Sa capture du 29/08 montrait des manches
     rognées — c'était `cover`, qui remplit en recadrant. */
  .onix-colors__img { width: 100%; height: 100%; object-fit: contain; display: block; padding: 0.15rem; }
  .onix-colors__item:focus-visible { outline: 2px solid var(--c-accent, #00c8ff); outline-offset: 2px; }

  /* Sur téléphone : centré, et des vignettes un peu plus grandes — c'est le
     seul endroit où l'on choisit sa couleur, autant qu'elle se voie. */
  /* ⚠️ SUR TÉLÉPHONE, TOUT SUR UNE SEULE LIGNE — sa demande du 29/08.
     `wrap` renvoyait la 5ᵉ vignette à la ligne dès que la gamme s'agrandit,
     et une rangée de coloris coupée en deux se lit comme deux groupes.
     `nowrap` + défilement horizontal : cinq coloris tiennent aujourd'hui, huit
     tiendront demain en glissant, sans jamais casser la ligne.
     ⚠️ La barre de défilement est masquée mais le geste reste : sans ça, les
       vignettes au-delà du bord seraient invisibles ET inatteignables. */
  @media (max-width: 999px) {
    .onix-colors { padding: 0 1rem; text-align: center; }

    /* ⛔ LA COUPURE DES COLORIS — TROUVÉE ET MESURÉE LE 29/08.
       Ce bloc disait `justify-content: center` + `overflow-x: auto` + des
       vignettes à largeur FIXE (3.9rem). Les trois ensemble font un défaut
       connu et silencieux : dès que la rangée déborde, le centrage la pousse
       hors du conteneur DES DEUX CÔTÉS, et `scrollLeft` ne pouvant pas être
       négatif, la partie de gauche devient INATTEIGNABLE — coupée pour
       toujours. Mesuré sur cette page : 39 px rognés à 320, 19 px à 360,
       4 px à 390 ; rien à 430 et au-delà. C'est ce qu'il voyait, et c'est
       pourquoi mes contrôles à 390 px seulement ne l'attrapaient pas.

       ➜ La correction ne rustine pas le défilement : elle SUPPRIME le
         débordement. Les vignettes se partagent la largeur disponible
         (`flex: 1 1 0`) sous un plafond de 3.9rem. Elles rétrécissent au
         lieu de sortir du cadre : 51 px de côté sur un 320, 62 px dès 430.
         Cinq coloris tiennent donc TOUJOURS sur une ligne entière — c'est
         sa demande du 28/08 — et il n'y a plus rien à faire défiler.
       ⚠️ `overflow-x` et `safe center` restent en filet pour le jour où la
         gamme passera à huit coloris : `safe` bascule sur `start` au lieu de
         couper, et un navigateur qui l'ignore garde le `flex-start` au-dessus. */
    .onix-colors__row {
      justify-content: flex-start;
      justify-content: safe center;
      gap: 0.5rem;
      flex-wrap: nowrap;
      overflow-x: auto;
      scrollbar-width: none;
      -webkit-overflow-scrolling: touch;
      padding-bottom: 0.15rem;
    }
    .onix-colors__row::-webkit-scrollbar { display: none; }
    .onix-colors__item {
      flex: 1 1 0;
      width: auto;
      height: auto;
      min-width: 2.6rem;
      max-width: 3.9rem;
      aspect-ratio: 1 / 1;
    }
  }



  /* ══ LES VERSIONS DU MAILLOT ════════════════════════════════════════════
     La rangée « même équipe, même saison » et son MINI-TEXTE — sa décision du
     05/09.

     ⚠️ ELLE NE RÉUTILISE QUE `.onix-colors__item`, ET C'EST VOLONTAIRE. Cette
       classe est la seule accroche de la couche de navigation sans
       rechargement écrite pour les coloris de vestes : la porter, c'est hériter
       du préchargement au survol, du remplacement de section, de l'URL, du
       bouton retour et du défilement conservé sans en réécrire une ligne. Tout
       le reste porte des classes `onix-versions__*` À NOUS : toucher
       `.onix-colors__row` ou `.onix-colors` pour se donner une rangée
       reviendrait à modifier le sélecteur des vestes depuis un autre chantier.

     ⚠️ LE MINI-TEXTE EST DEHORS, PAS DEDANS. `.onix-colors__item` est en
       `overflow: hidden` avec un `aspect-ratio` carré : un texte glissé à
       l'intérieur serait rogné, et rogné SANS RIEN AFFICHER D'ANORMAL. La case
       est donc une colonne — lien, type, prix — dont le lien n'est qu'un
       élément.

     ⚠️ `.onix-versions__cell .onix-colors__item` EST UN DESCENDANT (0,2,0), et
       ça n'est pas un hasard : les règles de `.onix-colors__item` valent
       (0,1,0), dont celles écrites plus haut dans un `@media` — et un `@media`
       change la CONDITION, jamais le POIDS (leçon du centrage des coloris,
       29/08). Un sélecteur plus spécifique gagne quel que soit l'ordre du
       fichier ; l'inverse aurait dépendu de qui est écrit en dernier.

     ⚠️ `justify-content: safe center` APRÈS `flex-start`, comme les coloris.
       Centrer une rangée qui déborde la pousse hors du conteneur DES DEUX
       CÔTÉS, et `scrollLeft` ne pouvant pas être négatif, la partie gauche
       devient inatteignable pour toujours : 39 px rognés à 320 px, mesurés le
       29/08 sur cette même page. `safe` retombe sur `start` au lieu de couper,
       et le `flex-start` au-dessus couvre les navigateurs qui l'ignorent.

     ⚠️ LA HAUTEUR EST UNE CONSTANTE : une seule ligne (`nowrap`), vignette
       plafonnée à 4,2rem sur téléphone. Deux versions ou six, le bouton
       d'achat descend d'autant — jamais de plus. */
  .onix-versions { margin: 0; min-width: 0; }
  .onix-versions__row {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    flex-wrap: nowrap;
    justify-content: flex-start;
    justify-content: safe center;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 0.15rem;
    min-width: 0;
  }
  .onix-versions__row::-webkit-scrollbar { display: none; }
  .onix-versions__cell {
    flex: 1 1 0;
    display: flex;
    flex-direction: column;
    gap: 0.22rem;
    min-width: 3.2rem;
    max-width: 4.2rem;
    text-align: center;
  }
  /* la vignette prend la largeur de sa case et reste carrée : c'est la case qui
     décide de la taille, une seule valeur à changer au lieu de deux. */
  .onix-versions__cell .onix-colors__item,
  .onix-versions__cell .onix-versions__plus {
    width: 100%;
    height: auto;
    max-width: none;
    min-width: 0;
    flex: 0 0 auto;
    aspect-ratio: 1 / 1;
  }
  /* ══ LA CASE « +19 AUTRES » ═══════════════════════════════════════════════
     ⛔ ELLE NE PORTE PAS `onix-colors__item`, ET C'EST DÉLIBÉRÉ : cette classe
       est l'accroche de la navigation sans rechargement, qui va chercher une
       SECTION PRODUIT à l'URL du lien. Ici l'URL est une COLLECTION — il n'y a
       pas de section produit à y prendre, le clic serait avalé et il ne se
       passerait rien. Elle recopie donc la géométrie au lieu de l'hériter :
       c'est le prix à payer pour que le navigateur suive le lien normalement.
     ⚠️ `display: flex` et pas `block` : le « +19 » se centre dans le carré.
       `.onix-colors__item` était en `overflow: hidden` avec un `aspect-ratio`,
       et un texte posé dedans y serait rogné SANS RIEN AFFICHER D'ANORMAL —
       le piège nommé plus haut. Ici le texte est court et centré, mais la règle
       reste : rien d'autre ne rentre dans ce carré. */
  .onix-versions__plus {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 0.55rem;
    background: #f2f1ee;
    box-shadow: inset 0 0 0 1px rgba(17, 17, 17, 0.10);
    color: #111111;
    text-decoration: none;
    transition: background 0.15s;
  }
  .onix-versions__plus:hover { background: #e6e4e0; }
  .onix-versions__plus:focus-visible { outline: 2px solid var(--c-accent, #00c8ff); outline-offset: 2px; }
  .onix-versions__plus-n {
    font-size: 0.78rem;
    font-weight: 700;
    line-height: 1;
    letter-spacing: -0.01em;
  }
  .onix-versions__type {
    font-size: 0.6rem;
    font-weight: 700;
    line-height: 1.15;
    color: #111111;
    overflow-wrap: anywhere;
  }
  /* ⛔ LA VERSION COURANTE NE SE RÉPÈTE PLUS — sa remarque du 05/09, 15h08 :
     « tu reprécises la version qui est sélectionnée alors qu'on a déjà le
     titre produit en haut de la page, ça sert littéralement à rien, ça peut
     gâcher la compréhension ». `is-current` est posé par le JS (l.3510) sur
     la vignette `.onix-colors__item` — son frère `.onix-versions__type`
     immédiat est le libellé redondant. Les AUTRES cases gardent le leur :
     lui seul dit ce vers quoi on bascule. */
  .onix-colors__item.is-current + .onix-versions__type { display: none; }
  .onix-versions__prix {
    font-size: 0.58rem;
    line-height: 1.15;
    color: #6b7280;
    overflow-wrap: anywhere;
  }
  /* Les cases grises du premier rendu. Elles ne sont pas une décoration : elles
     occupent EXACTEMENT la place du contenu à venir, donc rien ne bouge quand
     il arrive. Elles disparaissent avec `innerHTML`. */
  .onix-versions__cell--vide .onix-colors__item { background: #ececec; }
  .onix-versions__cell--vide .onix-versions__type,
  .onix-versions__cell--vide .onix-versions__prix {
    display: block;
    height: 0.62rem;
    border-radius: 0.2rem;
    background: #ececec;
  }
  .onix-versions__cell--vide .onix-versions__prix { width: 70%; margin: 0 auto; }
  /* ⚠️ `est-attente` N'ÉTAIT QU'UNE CLASSE MORTE au premier jet : posée par
     Liquid, retirée par le JS, et stylée nulle part. Elle a maintenant son
     travail — dire que ces cases grises sont une ATTENTE et pas un défaut
     d'affichage. Une opacité qui respire ne déplace rien : `mesurer-decalage.js`
     mesure ce qu'une animation BOUGE, et celle-ci bouge zéro pixel. */
  .onix-versions.est-attente .onix-versions__cell--vide {
    animation: onixVersionsPouls 1.1s ease-in-out infinite;
  }
  @keyframes onixVersionsPouls {
    0%, 100% { opacity: 1; }
    50%      { opacity: 0.55; }
  }
  @media (prefers-reduced-motion: reduce) {
    .onix-versions.est-attente .onix-versions__cell--vide { animation: none; }
  }
  .onix-versions__garde {
    margin: 0.45rem 0 0;
    font-size: 0.66rem;
    line-height: 1.3;
    color: #6b7280;
    text-align: center;
  }
  .onix-versions__garde.est-alerte { color: #b42318; font-weight: 600; }
  @media (min-width: 1000px) {
    .onix-versions { text-align: center; }
    /* ⚠️ `safe center` ICI AUSSI, ET PAS `center` NU. Six cases à 5rem plus
       leurs gouttières font ~32rem : la colonne d'achat de l'ordinateur est
       plus étroite que ça à 1000 px de large, exactement le cas où un
       `center` nu pousse la rangée hors du conteneur DES DEUX CÔTÉS et rend
       la partie gauche inatteignable — `scrollLeft` ne peut pas être négatif.
       C'est le défaut mesuré le 29/08 sur les coloris, à 320 px ; la même
       règle le rouvrait ici à l'autre bout des tailles d'écran. */
    .onix-versions__row { justify-content: flex-start; justify-content: safe center; }
    .onix-versions__cell { max-width: 5rem; }
  }

  .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-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:33) */
.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:34) */
.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:35) */
.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:38) */
/* ─── 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;

    /* ── PLUS SOBRE — 30/08, sa demande : « fais la plus simple, plus tech de
         la Silicon Valley ».
       Ce qui la datait, en trois points repérables :
         1. L'EMOJI 🍪 en tête du texte. C'est le marqueur numéro un de la
            bannière générique — aucun produit tech n'en met. Retiré.
         2. Le texte « Cookies pour améliorer ton expérience » : une promesse
            marketing vide, celle de tout le monde. Remplacé par ce que le site
            fait vraiment, « mesurer l'audience ». Les recommandations 2026
            convergent là-dessus : langage factuel plutôt que juridique ou
            commercial, parce qu'un consentement obtenu par une formule creuse
            n'en est pas un.
         3. DEUX BOUTONS DE POIDS INÉGAL — « Refuser » en contour gris, « Accepter »
            en blanc plein. Cette asymétrie pousse au clic et se lit comme un
            piège. Les deux ont maintenant la même forme ; seul le contraste du
            texte les distingue.
       Et la carte elle-même : moins de rayon (16 → 10 px), moins de flou
       (16 → 10 px), ombre resserrée. Une bannière de consentement n'est pas un
       objet premium, c'est une ligne d'interface. */
    background: rgba(14, 14, 17, 0.92);
    backdrop-filter: saturate(120%) blur(10px);
    -webkit-backdrop-filter: saturate(120%) blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 10px;
    box-shadow: 0 8px 24px -8px rgba(0, 0, 0, 0.5);

    color: #e8e8ec;
    font-size: 0.75rem; /* 12px */
    line-height: 1.4;
    letter-spacing: 0.005em;

    /* ⚠️ PAS de transform sur un fixed bas d'écran (bug iOS vécu 2× sur ce
       projet : la barre « remonte » au milieu au repli de la barre d'URL) —
       masquage par opacity/visibility uniquement. */
    transition: opacity 0.22s ease, visibility 0.22s ease;
  }
  /* 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 {
    opacity: 0;
    visibility: hidden;
    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. */
  /* #onix-discount-bar : la barre de remise porte un ID, pas la classe
     .onix-discount-bar (sélecteur orphelin corrigé 25/08) — et JAMAIS de
     transform sur elle (règle iOS du projet). */
  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;
    transition: opacity 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;
  }

  /* ⛔ LES DEUX CHOIX ONT LE MÊME POIDS — 30/08.
       Avant : « Refuser » en contour gris pâle, « Accepter » en blanc plein.
       Un bouton plein à côté d'un bouton fantôme n'est pas une paire de choix,
       c'est une recommandation déguisée — et les lignes directrices 2026 la
       traitent comme un défaut de consentement, pas comme du design.
       Maintenant : même forme, même fond, même bordure. Seul le contraste du
       texte marque l'action principale, ce qui suffit à la trouver sans la
       rendre plus facile à cliquer. */
  .onix-cookie-bar__btn--ghost {
    background: rgba(255, 255, 255, 0.04);
    color: #9a9aa4;
    border-color: rgba(255, 255, 255, 0.12);
  }
  .onix-cookie-bar__btn--ghost:hover,
  .onix-cookie-bar__btn--ghost:focus-visible {
    color: #e8e8ec;
    border-color: rgba(255, 255, 255, 0.28);
    background: rgba(255, 255, 255, 0.08);
  }

  .onix-cookie-bar__btn--solid {
    background: rgba(255, 255, 255, 0.04);
    color: #f4f4f6;
    border-color: rgba(255, 255, 255, 0.22);
  }
  .onix-cookie-bar__btn--solid:hover,
  .onix-cookie-bar__btn--solid:focus-visible {
    background: rgba(255, 255, 255, 0.11);
    border-color: rgba(255, 255, 255, 0.4);
    /* Plus de `translateY` : un bouton qui saute au survol, c'est le vocabulaire
       d'une publicité. Le changement de fond suffit à dire « cliquable ». */
  }

  /* 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:42) */
.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:45) */
.image {
    position: relative;
    overflow: hidden;
  }

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

/* START_SNIPPET:onix-favorites (INDEX:51) */
/* ── 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:53) */
.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:54) */
.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:55) */
.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 */