/* Le Vestiaire de l'accueil, puis le rappel de sélection des autres pages.

   Papier, encre, filets d'un pixel. Les photos produit sont livrées sur fond
   blanc : posées en multiply sur le papier, leur rectangle disparaît. La
   couleur du club reste un accent décoratif (repère sous l'onglet), jamais
   un fond de texte ni la seule marque d'un état. Aucun halo derrière le
   casque : règle du client, ni lueur ni brillance. */

.vestiaire {
  --vestiaire-accent: var(--accent);
  position: relative;
  padding-block: clamp(32px, 3.6vw, 48px);
  scroll-margin-top: 78px;
  background: var(--paper);
  color: var(--ink);
}

.vestiaire__shell { display: grid; gap: clamp(12px, 1.4vw, 18px); }

/* En-tête : label, titre court, une phrase. */
.vestiaire__head { display: grid; gap: 6px; }
.vestiaire__title {
  margin: 0;
  font-family: 'Barlow Condensed', 'Arial Narrow', Arial, sans-serif;
  font-size: var(--fs-h2);
  font-weight: 800;
  line-height: .9;
  letter-spacing: -.02em;
  text-transform: uppercase;
  text-wrap: balance;
}
.vestiaire__intro { max-width: 34ch; margin: 0 0 4px; color: var(--ink-70); font-size: 1.02rem; line-height: 1.45; }

/* Barre : les clubs en onglets, le profil en commande secondaire. */
.vestiaire__bar { display: flex; align-items: flex-end; justify-content: space-between; gap: 18px 40px; }
.vestiaire__clubs { display: flex; gap: clamp(8px, 2.4vw, 40px); }

.vestiaire-tab {
  position: relative;
  display: grid;
  grid-template-columns: 60px auto;
  align-items: center;
  gap: 14px;
  min-height: 76px;
  padding: 8px 10px 12px 2px;
  border: 0;
  background: transparent;
  color: var(--ink-70);
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.vestiaire-tab__crest { position: relative; display: grid; place-items: center; width: 60px; height: 60px; transform: scale(.7); opacity: .62; }
.vestiaire-tab__crest img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.vestiaire-tab__name { display: block; }
.vestiaire-tab strong { font-size: .92rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
/* État sélectionné : blason dominant, trait à la couleur du club. */
.vestiaire-tab::after { content: ""; position: absolute; right: 0; bottom: -1px; left: 0; height: 3px; background: var(--ink); transform: scaleX(0); transform-origin: left; }
.vestiaire-tab[aria-selected="true"] { color: var(--ink); }
.vestiaire-tab[aria-selected="true"]::after { background: var(--club); transform: scaleX(1); }
.vestiaire-tab[aria-selected="true"] .vestiaire-tab__crest { transform: scale(1); opacity: 1; }
/* Blasons sans fond ni halo : la sélection se lit au trait d'encre sous l'onglet. */
.vestiaire-tab:hover { color: var(--ink); }
.vestiaire-tab:hover .vestiaire-tab__crest { opacity: 1; }
.vestiaire-tab:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }

.vestiaire__profiles { display: flex; align-items: center; min-width: 0; margin: 0 0 10px; padding: 0; border: 0; }
.vestiaire__profile-options { display: inline-flex; gap: 8px; }
.vestiaire-profile { position: relative; display: grid; place-items: center; min-width: 98px; min-height: 50px; padding: 6px 18px; border: 1px solid var(--ink-12); border-radius: 999px; background: rgba(255, 255, 255, .45); cursor: pointer; }
.vestiaire-profile > span { display: grid; gap: 1px; text-align: center; }
.vestiaire-profile strong { font-size: .76rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.vestiaire-profile small { color: var(--ink-70); font-size: .75rem; line-height: 1.15; }
.vestiaire-profile input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.vestiaire-profile:has(input:checked) { border-color: var(--ink); background: var(--ink); color: var(--paper); }
.vestiaire-profile:has(input:checked) small { color: rgba(255, 255, 255, .72); }
@media (hover: hover) { .vestiaire-profile:hover:not(:has(input:checked)) { border-color: var(--ink-70); background: var(--surface); } }
.vestiaire-profile:has(input:focus-visible) { outline: 3px solid var(--focus); outline-offset: 3px; z-index: 1; }

/* Scène : les neuf casques partagent une cellule, un seul est visible. */
.vestiaire__scene { position: relative; }
.vestiaire__stage { display: grid; }
.vestiaire-look {
  grid-area: 1 / 1;
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(320px, 1fr);
  align-items: center;
  gap: clamp(24px, 4vw, 64px);
}
.vestiaire-look:not([data-active]) { visibility: hidden; }

.vestiaire-look__visual { position: relative; display: grid; place-items: center; height: clamp(300px, calc(100svh - 440px), 460px); min-width: 0; }
.vestiaire-look__image { position: absolute; inset: 0 0 4%; width: 100%; height: 96%; object-fit: contain; mix-blend-mode: multiply; }

.vestiaire-look__copy { display: flex; flex-direction: column; align-items: flex-start; min-width: 0; }
.vestiaire-look__meta { display: flex; flex-wrap: wrap; margin: 0 0 12px; color: var(--ink-70); font-size: .72rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.vestiaire-look__meta span + span { margin-left: 10px; padding-left: 10px; border-left: 1px solid var(--ink-12); }
.vestiaire-look__name {
  margin: 0;
  font-family: 'Barlow Condensed', 'Arial Narrow', Arial, sans-serif;
  font-size: clamp(2.8rem, 5vw, 4.6rem);
  font-weight: 800;
  line-height: .86;
  letter-spacing: -.02em;
  text-transform: uppercase;
}
.vestiaire-look__fit { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin: 14px 0 0; font-size: .92rem; }
.vestiaire-look__decision { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 16px; margin-top: 8px; }
/* Note de taille, sous le bouton : du texte neutre, jamais d'alerte. */
.vestiaire-look__note { max-width: 54ch; margin: 12px 0 0; color: var(--ink-70); font-size: .875rem; line-height: 1.45; }
.vestiaire-look__note[hidden] { display: none; }
/* Mesure dans la plage : une ligne qui rassure, juste sous l'achat, sans encadré. */
.vestiaire-look__note[data-state="in"] { display: flex; align-items: flex-start; gap: 10px; max-width: 54ch; color: var(--ink); font-size: .92rem; font-weight: 600; }
.vestiaire-look__note[data-state="in"]::before { content: ""; flex: none; width: 20px; height: 20px; margin-top: 1px; border-radius: 50%; background: var(--ink) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6.5 12.5l3.5 3.5 7.5-8'/%3E%3C/svg%3E") center / 14px no-repeat; }
.vestiaire-look { scroll-margin-top: 84px; }
.vestiaire-look__note a,
.vestiaire-look__switch { display: inline; min-height: 24px; padding: 0; border: 0; background: none; color: var(--ink); font: inherit; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; white-space: nowrap; cursor: pointer; }
.vestiaire-look__note a:focus-visible,
.vestiaire-look__switch:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
.vestiaire-look__price { margin: 16px 0 0; font-family: 'Barlow Condensed', 'Arial Narrow', Arial, sans-serif; font-size: 2rem; font-weight: 800; line-height: 1; font-variant-numeric: tabular-nums; }

.vestiaire-look__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 28px; margin-top: 18px; }
.vestiaire-look__form { margin: 0; }
.vestiaire-look__buy { min-height: var(--button-h, 58px); justify-content: center; }
/* L'entrée vers la mesure : la même ligne que sur la fiche et la page club. */
.vestiaire-look__tool { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 56px; padding: 0 2px; border: 0; border-top: 1px solid var(--ink-12); border-bottom: 1px solid var(--ink-12); background: none; color: var(--ink); font: inherit; font-size: 1rem; font-weight: 700; text-align: left; cursor: pointer; }
.vestiaire-look__tool::before { content: ""; flex: none; width: 22px; height: 22px; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linejoin='round'%3E%3Crect x='2.5' y='8' width='19' height='8' rx='1.5'/%3E%3Cpath d='M6.5 8v3M10 8v4.5M13.5 8v3M17 8v4.5'/%3E%3C/svg%3E") center/contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linejoin='round'%3E%3Crect x='2.5' y='8' width='19' height='8' rx='1.5'/%3E%3Cpath d='M6.5 8v3M10 8v4.5M13.5 8v3M17 8v4.5'/%3E%3C/svg%3E") center/contain no-repeat; }
.vestiaire-look__tool::after { content: ""; width: 9px; height: 9px; margin: -4px 6px 0 auto; border-right: 1.6px solid currentColor; border-bottom: 1.6px solid currentColor; transform: rotate(45deg); }
.vestiaire-look__tool[aria-expanded="true"]::after { margin-top: 4px; transform: rotate(-135deg); }
.vestiaire-look__decision { align-self: stretch; }
.vestiaire-look__link { color: inherit; text-decoration: none; }
/* Aller à la fiche reste un lien : il ne concurrence pas le bouton d'achat. */

.vestiaire-tab,
.vestiaire-profile,
.vestiaire-look__buy,
.vestiaire-look__tool { touch-action: manipulation; }

.vestiaire-look__tool:focus-visible, .vestiaire-size__close:focus-visible, .vestiaire-size__guide:focus-visible, .vestiaire-size__step:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }

/* Panneau de taille : une aide courte, alignée avec la fiche du casque. */
.vestiaire__size { width: min(520px, 42%); margin: 18px 0 0 auto; padding: 18px 0 0; border-top: 1px solid var(--ink-12); }
.vestiaire__size[hidden] { display: none; }
.vestiaire-size { display: grid; gap: 12px; }
.vestiaire-size__head { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.vestiaire-size__head h3 { margin: 0; font-family: 'Barlow Condensed', 'Arial Narrow', Arial, sans-serif; font-size: 1.8rem; font-weight: 800; line-height: 1; text-transform: uppercase; }
.vestiaire-size__close { display: grid; place-items: center; width: 44px; height: 44px; flex: none; padding: 0; border: 1px solid var(--ink-12); border-radius: 50%; background: transparent; color: var(--ink); font: 400 1.5rem/1 Arial, sans-serif; cursor: pointer; touch-action: manipulation; }
.vestiaire-size__close:hover { border-color: var(--ink); }
.vestiaire-size__row { display: grid; grid-template-columns: minmax(220px, 1fr) auto; align-items: stretch; gap: 10px; }
.vestiaire-size__field { display: grid; grid-template-columns: 44px minmax(76px, 1fr) 44px; align-items: center; gap: 6px; min-height: 60px; padding: 6px; border: 1px solid var(--ink-12); border-radius: 999px; background: rgba(255, 255, 255, .72); box-shadow: var(--shadow-1); }
.vestiaire-size__value { display: flex; align-items: baseline; justify-content: center; gap: 5px; min-width: 0; color: var(--ink-70); }
.vestiaire-size__field input { min-width: 0; width: 3ch; padding: 0; appearance: textfield; border: 0; background: transparent; color: var(--ink); font: 800 1.8rem/1 'Barlow Condensed', 'Arial Narrow', Arial, sans-serif; text-align: right; font-variant-numeric: tabular-nums; }
.vestiaire-size__field input::-webkit-inner-spin-button, .vestiaire-size__field input::-webkit-outer-spin-button { margin: 0; appearance: none; }
.vestiaire-size__field input:focus { outline: 0; }
.vestiaire-size__field:has(input:focus-visible) { outline: 3px solid var(--focus); outline-offset: 3px; }
.vestiaire-size__field:has(input[aria-invalid="true"]) { border-color: #b24435; }
.vestiaire-size__step { display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%; background: var(--surface-sunken); color: var(--ink); font: 600 1.45rem/1 Arial, sans-serif; cursor: pointer; touch-action: manipulation; transition: background-color var(--motion-state), color var(--motion-state), border-color var(--motion-state), transform var(--motion-state); }
.vestiaire-size__step:hover { background: var(--ink); color: var(--surface); }
.vestiaire-size__step:active { transform: scale(.94); }
.vestiaire-size__step:disabled { background: var(--surface-sunken); color: var(--ink-70); opacity: .5; cursor: not-allowed; }
/* Vérifier fait partie de l'outil, pas de l'achat : capsule, comme le reste de l'instrument. */
.vestiaire-size__submit { min-height: 60px; padding: 11px 24px; border-radius: 999px; justify-content: center; white-space: nowrap; }
.vestiaire-size__help { max-width: 48ch; margin: 0; color: var(--ink-70); font-size: .84rem; line-height: 1.45; }
.vestiaire-size__status { margin: 0; color: #8b3025; font-size: .84rem; font-weight: 700; }
.vestiaire-size__status:empty { display: none; }
.vestiaire-size__guide { justify-self: start; min-height: 44px; display: inline-flex; align-items: center; color: var(--ink); font-size: .84rem; font-weight: 700; text-decoration: underline; text-underline-offset: 4px; }

/* Mouvement : le texte entre, le casque se pose, la sortie est plus courte.
   Au repos, la scène active est toujours visible. */
@media (prefers-reduced-motion: no-preference) {
  .vestiaire-tab__crest { transition: transform var(--motion-state), opacity var(--motion-state); }
  .vestiaire-tab[aria-selected="true"] .vestiaire-tab__crest { transition: transform var(--motion-object), opacity var(--motion-state); }
  .vestiaire-tab::after { transition: opacity var(--motion-state), transform var(--motion-state); }
  .vestiaire-profile { transition: background-color var(--motion-state), color var(--motion-state); }
  .vestiaire-look__buy, .vestiaire-look__tool { transition: opacity var(--motion-state), transform var(--motion-state); }
  .vestiaire-look__buy:active, .vestiaire-look__tool:active { transform: scale(.985); }

  .vestiaire-look { transition: visibility 0s linear .3s; }
  .vestiaire-look[data-active] { transition: visibility 0s; }
  .vestiaire-look__image,
  .vestiaire-look__copy > * { transition: opacity .22s var(--ease-in-quart), transform .22s var(--ease-in-quart); }
  .vestiaire-look:not([data-active]) .vestiaire-look__image { opacity: 0; transform: translateX(-3%) scale(.97); }
  .vestiaire-look:not([data-active]) .vestiaire-look__copy > * { opacity: 0; transform: translateY(var(--motion-rise)); }
  .vestiaire-look[data-active] .vestiaire-look__image { transition: opacity var(--motion-object), transform var(--motion-object); }
  .vestiaire-look[data-active] .vestiaire-look__copy > * { transition: opacity var(--motion-enter), transform var(--motion-enter); }
  .vestiaire-look[data-active] .vestiaire-look__copy > :nth-child(2) { transition-delay: var(--motion-stagger); }
  .vestiaire-look[data-active] .vestiaire-look__copy > :nth-child(n+3) { transition-delay: calc(var(--motion-stagger) * 2); }
  .vestiaire__size:not([hidden]) { animation: vestiaire-size-in var(--motion-enter) both; }
}

@keyframes vestiaire-size-in { from { opacity: 0; transform: translateY(8px); } }

/* Rappel de sélection : collection, fiche, panier, caisse. */
[data-locker-product][hidden],
[data-locker-collection-empty][hidden],
[data-locker-collection] .product-grid[hidden] { display: none !important; }

.locker-context { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 14px 18px; border-left: 4px solid var(--accent); background: var(--surface-sunken); color: var(--ink); }
.locker-context[hidden] { display: none; }
.locker-context__main { display: flex; align-items: center; gap: 12px; min-width: 0; }
.locker-context__crest { display: grid; place-items: center; width: 38px; height: 38px; flex: none; }
.locker-context__crest img { width: 100%; height: 100%; object-fit: contain; }
.locker-context p { margin: 0; font-size: .8rem; line-height: 1.35; }
.locker-context strong { display: block; font-size: .84rem; }
.locker-context a, .locker-context button { min-height: 44px; flex: none; }
.locker-context--incompatible { border-left-color: #b24435; }
.collection-locker { margin: 0 0 22px; }
.product-locker { margin: 0 0 22px; }
.cart-drawer__locker { margin-bottom: 14px; }
.demo-checkout__locker { margin: 0 0 28px; }

@media (max-width: 1020px) {
  .vestiaire__bar { flex-direction: column; align-items: stretch; gap: 10px; }
  .vestiaire__profiles { margin-bottom: 0; }
  .vestiaire-look { grid-template-columns: minmax(0, 1fr) minmax(280px, 1fr); }
  .vestiaire__size { width: 56%; }
}

@media (max-width: 760px) {
  .vestiaire { padding-block: 20px 36px; scroll-margin-top: 64px; }
  .vestiaire__shell { gap: 10px; }
  .vestiaire__head { gap: 3px; }
  .vestiaire__title { font-size: clamp(2.35rem, 11vw, 3rem); }
  .vestiaire__intro { font-size: .84rem; }
  .vestiaire__bar { gap: 0; border-bottom: 0; }
  .vestiaire__clubs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; }
  .vestiaire-tab { grid-template-columns: 1fr; justify-items: center; gap: 1px; min-height: 58px; padding: 2px 4px 7px; text-align: center; }
  .vestiaire-tab__crest { width: 40px; height: 40px; }
  .vestiaire-tab strong { font-size: .8rem; }
  .vestiaire__profiles { margin: 8px 0 0; }
  .vestiaire__profile-options { flex: 1 1 auto; gap: 8px; }
  .vestiaire-profile { flex: 1 1 0; min-width: 0; min-height: 50px; padding: 5px 3px; }
  .vestiaire-profile strong { font-size: .7rem; }
  .vestiaire-profile small { font-size: .72rem; }
  .vestiaire-look { grid-template-columns: 1fr; align-items: start; gap: 4px; }
  .vestiaire-look__visual { height: min(220px, 28svh); }
  .vestiaire-look__copy { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; column-gap: 12px; }
  .vestiaire-look__copy > * { grid-column: 1 / -1; }
  .vestiaire-look__meta { margin-bottom: 5px; font-size: .61rem; }
  .vestiaire-look__name { grid-column: 1; font-size: clamp(2.2rem, 10vw, 2.8rem); }
  .vestiaire-look__price { grid-column: 2; grid-row: 2; margin: 0; font-size: 1.6rem; }
  .vestiaire-look__fit { margin-top: 7px; font-size: .82rem; }
  .vestiaire-look__decision { gap: 0 14px; margin-top: 6px; }
  .vestiaire-look__note { margin-top: 10px; font-size: .84rem; }
  .vestiaire-look__actions { display: grid; grid-template-columns: 1fr; gap: 4px; margin-top: 10px; width: 100%; }
  .vestiaire-look__buy { width: 100%; }
  .vestiaire-look__form .button { width: 100%; }
  .vestiaire-look__tool { justify-content: center; text-align: center; }
  .vestiaire__size { width: auto; margin-top: 16px; padding-top: 16px; }
  .vestiaire-size__row { grid-template-columns: 1fr; }
  .vestiaire-size__field { width: 100%; }
  .vestiaire-size__submit { width: 100%; padding-inline: 12px; }
  .locker-context { align-items: flex-start; flex-direction: column; }
}

/* Le panneau de mesure s'arrête sous l'en-tête fixe quand la page y descend. */
.vestiaire__size { scroll-margin-top: 96px; }