/* Fiche produit. Feuille propre à la fiche, les autres gabarits restent légers. */
@media(min-width:951px){.product-page.section-space{padding-top:60px}}
.product-gallery__zoom-open{
  position:relative;display:grid;place-items:center;width:100%;min-height:590px;
  padding:0;border:0;background:transparent;color:var(--ink);cursor:zoom-in;
}
/* La photo porte elle-même ses transitions : le bouton d'agrandissement
   n'existe pas sur les fiches dont la photo est trop petite, et le changement
   de taille doit rester fondu dans ce cas aussi. */
.product-gallery__hero{
  transition:opacity .22s ease,transform .45s cubic-bezier(.22,1,.36,1);
}
.product-gallery__zoom-open:hover .product-gallery__hero,
.product-gallery__zoom-open:focus-visible .product-gallery__hero{transform:scale(1.035)}
.product-gallery__hero.is-changing{opacity:.58}
.product-gallery__zoom-hint{
  position:absolute;right:18px;bottom:18px;display:flex;align-items:center;gap:16px;
  padding:10px 14px;background:var(--ink);color:#fff;font-size:.76rem;font-weight:800;
  letter-spacing:.04em;text-transform:uppercase;pointer-events:none;
}
.product-gallery__dialog{
  width:min(1120px,calc(100vw - 36px));max-width:none;max-height:calc(100dvh - 36px);
  margin:auto;padding:clamp(14px,3vw,28px);border:0;background:#fff;color:var(--ink);
  box-shadow:0 35px 100px rgba(4,20,30,.28);
}
.product-gallery__dialog[open]{display:grid;place-items:center}
.product-gallery__dialog::backdrop{background:rgba(4,20,30,.78)}
.product-gallery__dialog img{display:block;width:100%;height:min(74dvh,760px);object-fit:contain}
.product-gallery__dialog p{margin:8px 0 0;font-size:.78rem;color:var(--muted)}
.product-gallery__dialog-close{
  justify-self:end;display:flex;align-items:center;gap:12px;min-height:44px;
  margin-bottom:6px;padding:4px 9px;border:0;background:none;color:var(--ink);
  font:800 .78rem/1 Barlow,Arial,sans-serif;letter-spacing:.04em;text-transform:uppercase;cursor:pointer;
}
.product-gallery__dialog-close span{font-size:1.8rem;font-weight:400;line-height:1}
.product-form__choice-heading{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin-bottom:9px}
.product-form__choice-heading label{font-size:.78rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase}
.product-form__choice-heading a{font-size:.82rem;font-weight:700;text-decoration:underline;text-underline-offset:3px}
.product-form__stock[data-state="unavailable"]{color:#9d352e}

/* Texte réservé aux lecteurs d'écran. */
.product-info__sr{
  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;
}

/* ---------- Galerie neutre ----------
   Aucun fond de couleur derrière le casque : le blanc des photos, posé sur
   le blanc du cadre. */
.product-page .product-gallery__main{border:0;background:#fff}
.product-page .product-gallery__thumb{background:#fff}
/* Les photos livrées sont sur fond blanc : en multiplication, ce blanc
   prend la teinte du club au lieu de dessiner un rectangle. isolation borne
   le mélange au cadre. Des photos détourées n'en ont pas besoin, la case
   « photos détourées » de la section le coupe. */
.product-page .product-gallery__main,
.product-page .product-gallery__thumb{isolation:isolate}
.product-page .product-gallery__hero,
.product-page .product-gallery__thumb img{mix-blend-mode:multiply}
.product-page[data-cutout="true"] .product-gallery__hero,
.product-page[data-cutout="true"] .product-gallery__thumb img{mix-blend-mode:normal}

/* ---------- Colonne d'achat resserrée (A9) ---------- */
.product-info .product-info__meta{
  display:flex;align-items:center;gap:12px;margin:0 0 12px;
  font-size:.95rem;font-weight:700;letter-spacing:0;text-transform:none;color:var(--ink);
}
.product-info__club-crest{display:block;flex:none;width:32px;height:32px}
.product-info__club-crest img{display:block;width:100%;height:100%;object-fit:contain}
.product-info__meta-text{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 10px}
.product-info__vendor{color:var(--ink-70);font-weight:600}
.product-info__club-name+.product-info__vendor::before{content:"/";margin-right:10px;color:var(--ink-70)}
.product-info .product-info__title{margin:0 0 14px;font-size:var(--fs-h2);line-height:.96}
.product-info__prices{display:flex;align-items:baseline;flex-wrap:wrap;gap:4px 14px;margin-bottom:20px}
.product-info__prices .product-info__compare{margin:0}
.product-info__prices [hidden]{display:none}
.product-info .product-info__facts{margin-bottom:12px}
.product-info .product-form{padding:18px 0 14px;border-bottom:0}
/* Le libellé du bouton garde la graisse du bouton : la règle générique
   des boutons réduit tout <span> à une icône. */
.product-form__submit [data-add-label]{font-size:inherit;font-weight:inherit}

/* ---------- Le club, en tuiles (instrument.css) ----------
   Entre le prix et l'achat, comme un choix de variante : le même casque aux
   couleurs de chaque club. */
.product-info .product-clubs{margin:0 0 18px}

/* ---------- Vérifier avec sa mesure (A8) ----------
   Une capsule repliée ; dépliée, la capsule et la règle du guide des
   tailles sur le papier teinté, en carte arrondie : c'est un instrument que
   l'on manipule, pas un élément d'achat. */
.product-fit{margin-bottom:14px}
.product-fit__panel{margin-top:10px;padding:14px 16px 12px;border-radius:16px}
.product-fit__panel[hidden]{display:none}
/* Le rail ne montre qu'une plage, celle de ce casque : pleine, comme la
   plage d'un modèle partout ailleurs. */
.product-fit .ruler__coverage span[data-count]{opacity:1}
.product-fit__help{margin:6px 0 0;color:var(--ink-70);font-size:.86rem}
.product-fit__help a,.product-fit__verdict a{
  display:inline-flex;align-items:center;min-height:24px;
  font-weight:700;text-decoration:underline;text-underline-offset:3px;
}
.product-fit__verdict{
  margin:12px 0 0;padding:4px 0 4px 12px;border-left:3px solid var(--ink-70);
  color:var(--ink);font-size:.95rem;font-weight:600;line-height:1.45;
}
.product-fit__verdict[data-state="in"]{border-left-color:var(--focus)}
.product-fit__verdict[hidden],.product-fit__alternatives[hidden]{display:none}

/* ---------- Réassurance au bouton (A1) ---------- */
.product-info__assurance{margin:6px 0 18px}
.product-info__assurance .reassurance{gap:10px}
.product-info__policies{display:flex;flex-wrap:wrap;gap:4px 20px;margin:10px 0 0;font-size:.86rem;font-weight:700}
.product-info__policies a{display:inline-flex;align-items:center;min-height:24px;text-decoration:underline;text-underline-offset:3px}

/* ---------- Cadeau (A7) ----------
   Le panneau s'ouvre avec la case, sans script ; le script ne fait que
   désactiver le message quand la case est décochée. */
.product-gift{margin-bottom:22px}
.product-gift__choice{display:flex;align-items:center;gap:12px;min-height:44px}
.product-gift__toggle{flex:none;width:22px;height:22px;margin:0;accent-color:var(--ink);cursor:pointer}
.product-gift__choice label{font-weight:700;cursor:pointer}
.product-gift__panel{display:none;margin-top:8px;padding-left:34px}
.product-gift:has(.product-gift__toggle:checked) .product-gift__panel,
.product-gift.is-open .product-gift__panel{display:block}
.product-gift__label{display:block;margin-bottom:6px;font-size:.9rem;font-weight:700}
.product-gift__label span{color:var(--ink-70);font-weight:500}
.product-gift__message{
  display:block;width:100%;min-height:88px;padding:10px 12px;resize:vertical;
  border:1px solid var(--ink-70);background:var(--surface);color:var(--ink);font:inherit;font-size:.95rem;
}
.product-gift__count{margin:6px 0 0;color:var(--ink-70);font-size:.8rem;font-variant-numeric:tabular-nums}
.product-gift__note{margin:10px 0 0;color:var(--ink-70);font-size:.88rem;line-height:1.5}
.product-gift__note a{display:inline-flex;align-items:center;min-height:24px;color:var(--ink);font-weight:700;text-decoration:underline;text-underline-offset:3px}

/* ---------- Ce qui compte pour ce casque (A9) ---------- */
.product-keys{margin:0 0 8px;padding-top:18px;border-top:1px solid var(--ink-12)}
.product-keys__title{margin:0 0 10px;font-family:Barlow,Arial,sans-serif;font-size:1rem;font-weight:800;letter-spacing:0;text-transform:none}
.product-keys__list{margin:0}
.product-keys__list>div{display:grid;grid-template-columns:minmax(90px,.35fr) 1fr;gap:12px;padding:9px 0;border-bottom:1px solid var(--ink-12)}
.product-keys__list dt{color:var(--ink-70);font-size:.86rem;font-weight:700}
.product-keys__list dd{margin:0;font-size:.92rem}
.product-keys__list a{display:inline-flex;align-items:center;min-height:24px;font-weight:700;text-decoration:underline;text-underline-offset:3px}

.product-info__documents a{display:inline-flex;align-items:center;min-height:24px}
/* Cible d'au moins 24 px (WCAG 2.5.8). */
.product-info__contact{margin:22px 0 0;font-size:.86rem;font-weight:700}
.product-info__contact a{display:inline-flex;align-items:center;min-height:44px;text-decoration:underline;text-underline-offset:3px}

/* ---------- Barre d'achat fixe en mobile (A4) ---------- */
.product-mobile-buy{display:none}
@media(max-width:950px){
  .product-mobile-buy.is-visible{
    position:fixed;z-index:var(--z-sticky);right:0;bottom:0;left:0;display:flex;align-items:center;
    gap:12px;min-height:64px;
    padding:8px max(16px,env(safe-area-inset-right)) calc(8px + env(safe-area-inset-bottom)) max(16px,env(safe-area-inset-left));
    border-top:1px solid var(--ink-12);background:var(--paper);box-shadow:var(--shadow-3);
  }
  .product-mobile-buy__thumb{flex:none;width:40px;height:40px;object-fit:contain;background:color-mix(in srgb,var(--club,var(--surface-sunken)) 8%,var(--surface-sunken))}
  .product-mobile-buy__text{display:grid;gap:2px;flex:1;min-width:0}
  .product-mobile-buy__name{overflow:hidden;font-size:.95rem;line-height:1.2;white-space:nowrap;text-overflow:ellipsis}
  .product-mobile-buy__meta{display:flex;flex-wrap:wrap;gap:0 10px;color:var(--ink-70);font-size:.8rem;line-height:1.3}
  .product-mobile-buy__meta [hidden]{display:none}
  .product-mobile-buy__price{color:var(--ink);font-weight:800;white-space:nowrap}
  .product-mobile-buy .button{flex:none;gap:0;min-height:var(--button-h-compact);padding:10px 18px;font-size:.83rem;white-space:nowrap}
  .product-mobile-buy .button:hover{transform:none}
  .product-mobile-buy .button:disabled{opacity:.55;cursor:not-allowed}
}
@media(max-width:370px){
  .product-mobile-buy.is-visible{gap:8px;padding-left:12px;padding-right:12px}
  .product-mobile-buy__thumb{display:none}
}

@media(max-width:950px){
  .product-gallery__zoom-open{min-height:350px}
  .product-gallery__zoom-hint{right:12px;bottom:12px;font-size:.7rem}
}
/* À largeur tablette, la galerie prenait tout le premier écran et repoussait
   nom et prix sous la ligne de flottaison. Le casque reste dominant, mais la
   décision d'achat redevient visible sans changer la composition. */
@media(min-width:651px) and (max-width:950px){
  .product-page.section-space{padding-top:50px}
  .product-layout{gap:24px}
  .product-gallery__main{min-height:360px}
  .product-gallery__hero{height:350px}
  .product-gallery__thumb{width:70px;height:70px}
}
/* Téléphone : la galerie en 4:3 laisse nom, prix et bouton remonter vers
   le premier écran ; les vignettes défilent sur une ligne au lieu de
   s'empiler. */
@media(max-width:650px){
  .product-page .product-gallery__main{
    min-height:0;aspect-ratio:4/3;overflow:hidden;
    grid-template-rows:minmax(0,1fr);grid-template-columns:minmax(0,1fr);
  }
  .product-page .product-gallery__zoom-open{min-height:0;height:100%}
  .product-page .product-gallery__hero{width:100%;height:100%;min-height:0}
  .product-page .product-gallery__thumbs{
    display:grid;grid-template-columns:repeat(auto-fill,minmax(56px,1fr));gap:8px;margin-top:8px;
  }
  .product-page .product-gallery__thumb{width:auto;height:auto;aspect-ratio:1;padding:5px}
}
@media(prefers-reduced-motion:no-preference){
  .product-gallery__dialog[open]{animation:product-dialog-in .28s cubic-bezier(.22,1,.36,1) both}
  @keyframes product-dialog-in{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}
  .product-mobile-buy.is-visible{animation:product-buy-in var(--dur) var(--ease-out-quint) both}
  @keyframes product-buy-in{from{transform:translateY(100%)}to{transform:translateY(0)}}
}
@media(prefers-reduced-motion:reduce){
  .product-gallery__hero{transition:none}
}

/* ============================================================
   Sécurité et fabricant.

   Chaque ligne vient d'un métachamp. Un métachamp vide n'affiche rien :
   mieux vaut une section plus courte qu'un intitulé sans valeur. Aucune
   norme n'est annoncée sans le document qui la prouve.
   ============================================================ */

.product-safety__list{
  display:grid;
  grid-template-columns:minmax(0,auto) minmax(0,1fr);
  gap:8px 20px;
  margin:4px 0 0;
  font-size:.88rem;
}

.product-safety__list dt{
  color:var(--ink-70);
  font-size:.72rem;
  font-weight:800;
  letter-spacing:.08em;
  text-transform:uppercase;
  align-self:center;
}

.product-safety__list dd{margin:0}
.product-safety__list a{text-decoration:underline;text-underline-offset:3px}

.product-safety__note{
  margin-top:14px;
  padding-top:12px;
  border-top:1px solid var(--line);
  color:var(--ink-70);
  font-size:.9rem;
}

/* Un bloc d'application garde son espace propre : il n'est jamais enfermé
   dans l'accordéon des informations produit. */
.product-info__app{
  padding:16px 0;
  border-bottom:1px solid var(--line);
}

@media(max-width:560px){
  .product-safety__list{grid-template-columns:1fr;gap:2px 0}
  .product-safety__list dd{margin-bottom:10px}
}

/* ============================================================
   Tout se choisit sans défiler : la photo, le modèle, le club et l'achat
   tiennent dans le premier écran, sur téléphone comme sur ordinateur. La
   mesure, le cadeau et les détails viennent ensuite.
   ============================================================ */

/* Le modèle du même club, en capsules : profil et âge. */
.product-models{margin:0 0 14px}
.product-models__list{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin:6px 0 0;padding:0;list-style:none}
.product-models__item{
  display:grid;justify-items:center;align-content:center;gap:0;width:100%;min-height:52px;padding:6px 8px;
  text-align:center;line-height:1.15;
}
.product-models__name{font-size:.82rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase}
.product-models__item .capsule__detail{font-size:.76rem}
.product-models__item[aria-current="page"]{border-color:var(--ink);background:var(--ink);color:var(--surface)}
.product-models__item[aria-current="page"] .capsule__detail{color:color-mix(in srgb,var(--surface) 80%,var(--ink))}

/* Le club, en tuiles basses : le casque à gauche, le nom à droite. */
.product-info .product-clubs{margin:0 0 12px}
.product-page .product-clubs .helmet-tile{
  grid-template-columns:auto minmax(0,1fr);justify-items:start;align-items:center;gap:8px;
  min-height:52px;padding:4px 10px 4px 6px;
}
.product-page .product-clubs .helmet-tile__image{width:40px;height:40px;object-fit:contain}
.product-page .product-clubs .helmet-tile__name{font-size:.95rem}

/* Le tour de tête : une ligne de texte, plus des cases. */
.product-page .product-info__facts{display:flex;flex-wrap:wrap;gap:4px 14px;margin:0 0 4px}
.product-page .product-info__facts span{display:inline;min-width:0;padding:0;border:0;color:var(--ink-70);font-size:.92rem;text-transform:none;letter-spacing:0}
.product-page .product-info__facts strong{font-size:.92rem}
.product-info .product-form{padding:10px 0 8px}
.product-page .product-fit{margin:4px 0 14px}

@media(min-width:951px){
  /* La photo tient dans la hauteur de l'écran, la colonne d'achat aussi. */
  .product-page.section-space{padding-top:28px}
  .product-page .breadcrumb{margin-bottom:14px}
  .product-page .product-gallery__main,
  .product-page .product-gallery__zoom-open{min-height:0;height:min(calc(100svh - 300px),560px)}
  .product-page .product-gallery__hero{max-height:100%;width:auto;object-fit:contain}
  .product-info .product-info__title{margin-bottom:6px}
  .product-info__prices{margin-bottom:14px}
}

@media(max-width:950px){
  .product-page.section-space{padding-top:8px}
  .product-page .breadcrumb{display:none}
  .product-page .product-gallery__main,
  .product-page .product-gallery__zoom-open{min-height:0;height:30svh}
  .product-page .product-gallery__hero{height:100%;width:auto;max-width:100%;object-fit:contain}
  .product-page .product-gallery__zoom-hint{display:none}
  .product-page .product-gallery__thumbs{gap:6px;margin-top:6px}
  .product-page .product-gallery__thumb{width:44px;height:44px}
  .product-info .product-info__meta{margin-bottom:4px;font-size:.85rem}
  .product-info__club-crest{width:24px;height:24px}
  /* Nom et prix sur une seule ligne. */
  .product-page .product-info{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:12px;align-items:baseline}
  .product-page .product-info > *{grid-column:1 / -1}
  .product-page .product-info > .product-info__title{grid-column:1;margin:0 0 8px;font-size:clamp(2rem,9vw,2.6rem)}
  .product-page .product-info > .product-info__prices{grid-column:2;margin:0 0 8px}
  .product-page .product-info__price{font-size:1.5rem}
  .product-models{margin-bottom:10px}
  .product-info .product-form{padding-top:6px}
  .product-page .product-form__bottom{gap:10px}
}

/* Le rappel « Adapté à votre profil » du Vestiaire répète ce que les
   capsules du modèle et les tuiles du club montrent déjà : il se retire. */
.product-page .product-locker{display:none !important}

@media(max-width:950px){
  .product-page .product-layout{gap:12px}
  .product-page .product-gallery,
  .product-page .product-gallery__main{width:100%}
  .product-page .product-gallery__thumbs{justify-content:flex-start}
}

/* Téléphone : chaque pixel compte pour garder le modèle, le club et l'achat
   dans le premier écran. Le club se lit déjà sur les tuiles, les intitulés
   des deux choix restent lus par les lecteurs d'écran. */
@media(max-width:950px){
  .product-page .product-gallery__main,
  .product-page .product-gallery__zoom-open{height:26svh}
  .product-page .product-gallery__thumbs{margin-top:4px}
  .product-page .product-gallery__thumb{width:40px;height:40px}
  .product-page .product-info .product-info__meta{display:none}
  .product-page .product-models > .helmet-tiles__label,
  .product-page .product-clubs > .helmet-tiles__label{
    position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap
  }
  .product-page .product-models__list{margin-top:0}
  .product-page .product-models__item{min-height:48px}
  .product-page .product-clubs .helmet-tile{min-height:48px}
  .product-page .product-clubs .helmet-tile__image{width:34px;height:34px}
}

/* La photo reste dans son cadre, quelle que soit la hauteur disponible. */
.product-page .product-gallery__main{position:relative;overflow:hidden}
.product-page .product-gallery__main > .product-gallery__hero,
.product-page .product-gallery__zoom-open > .product-gallery__hero{position:absolute;inset:0;width:100%;height:100%;max-height:none;object-fit:contain}
.product-page .product-gallery__zoom-open{height:100%}

/* Le club court dans le titre, sur téléphone seulement : sur ordinateur, la
   ligne du club au-dessus le dit déjà. */
.product-info__title-club{display:none}
@media(max-width:950px){.product-info__title-club{display:inline}}
/* Le stock ne se dit qu'en gris, et seulement quand on le sait. */
.product-form__stock{color:var(--ink-70);font-weight:600;text-transform:none;letter-spacing:0}
.product-form__stock:empty{display:none}
.product-form__stock[data-state="unavailable"]{color:#9d352e}
/* L'achat seul sur sa ligne, puis le cadeau juste dessous. */
.product-page .product-form__bottom{display:block}
.product-page .product-form__submit{width:100%;justify-content:center;text-align:center}
.product-page .product-gift{margin:2px 0 14px}