/* ============================================================
   Panier latéral.

   Un <dialog> natif : le navigateur fournit le piège de focus, la touche
   Échap, l'inertie de la page derrière et la restitution du focus. Rien de
   tout cela n'est réécrit ici.

   Le tiroir n'est jamais nécessaire au parcours : sans JavaScript, les
   formulaires postent vers Shopify et mènent à la page panier.

   Le tiroir et la page panier parlent la langue de l'instrument
   (instrument.css) : chaque ligne est une feuille, la quantité est la
   capsule moins, valeur, plus du guide, la note et le message cadeau sont
   des contrôles doux. Ce qui porte l'achat reste franc : le prix, le total
   et le bouton de commande, vert, pleine largeur, juste sous le total.
   ============================================================ */

.cart-drawer {
  width: min(100%, 420px);
  max-width: 100%;
  height: 100%;
  max-height: 100%;
  margin: 0 0 0 auto;
  padding: 0;
  border: 0;
  overflow: hidden;
  background: var(--paper);
  color: var(--ink);
}

.cart-drawer::backdrop { background: rgba(9, 28, 42, .48); }

.cart-drawer__panel {
  display: grid;
  grid-template-rows: auto 1fr auto;
  height: 100%;
}

/* ---------- En-tête ---------- */

.cart-drawer__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 20px;
  border-bottom: 1px solid var(--line);
}

.cart-drawer__title {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  font-family: 'Barlow Condensed', Arial, sans-serif;
  line-height: 1.1;
  font-size: 1.32rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .01em;
}

.cart-drawer__count[hidden] { display: none; }

.cart-drawer__count {
  display: grid;
  place-items: center;
  min-width: 25px;
  height: 25px;
  padding: 0 7px;
  border-radius: 50px;
  background: var(--accent);
  color: var(--ink);
  font-family: Barlow, Arial, sans-serif;
  font-size: .76rem;
  font-variant-numeric: tabular-nums;
}

.cart-drawer__close {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 0;
  background: none;
  cursor: pointer;
}

.cart-drawer__close svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
}

/* ---------- Lignes ---------- */

/* Couleur de chaque club, en filet gauche de la feuille. La couleur
   accompagne le nom du club, elle ne porte jamais seule l'information. */
[data-club="om"] { --cart-club: var(--club-om); }
[data-club="psg"] { --cart-club: #0a2340; }
[data-club="lens"] { --cart-club: var(--club-lens); }

/* Le corps défile en hauteur seulement : rien ne défile en largeur. */
.cart-drawer__body { overflow-x: hidden; overflow-y: auto; padding: 14px 20px 20px; }

.cart-drawer__lines {
  display: grid;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Une ligne, une feuille : la vue du casque sur le creux du papier, puis
   ce qu'il est et ce qu'on en fait. */
.cart-line {
  display: grid;
  grid-template-columns: 84px minmax(0, 1fr);
  gap: 14px;
  padding: 12px 14px 12px 12px;
  border-radius: 16px;
  background: var(--surface);
  box-shadow: inset 3px 0 0 var(--cart-club, transparent), var(--shadow-1);
}

.cart-line[aria-busy="true"] { opacity: .6; }

.cart-line__media,
.cart-item__image {
  display: grid;
  place-items: center;
  aspect-ratio: 1;
  border-radius: 12px;
  background: var(--surface-sunken);
}

.cart-line__media { height: 84px; }

/* Même détourage que partout ailleurs : les photos sont sur fond blanc. */
.cart-line__media img,
.cart-item__image img {
  width: 86%;
  height: 86%;
  object-fit: contain;
  mix-blend-mode: multiply;
}

.cart-line__body { display: grid; align-content: start; gap: 4px; min-width: 0; }

.cart-line__name {
  margin: 0;
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.3;
}

.cart-line__name a:hover { text-decoration: underline; text-underline-offset: 3px; }

.cart-line__variant,
.cart-line__size { margin: 0; color: var(--ink-70); font-size: .88rem; }

.cart-line__row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 12px;
  margin-top: 8px;
  font-variant-numeric: tabular-nums;
}

.cart-line__price,
.cart-item__total {
  font-family: 'Barlow Condensed', 'Arial Narrow', Arial, sans-serif;
  font-size: 1.3rem;
  font-weight: 800;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* Retirer : un lien discret, mais une cible de 44 px. */
.cart-line__remove,
.cart-item__remove {
  display: inline-flex;
  align-items: center;
  justify-self: start;
  min-height: 44px;
  margin-block: -4px -10px;
  padding: 0 2px;
  border: 0;
  background: none;
  color: var(--ink-70);
  font: inherit;
  font-size: .88rem;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}

.cart-line__remove:hover,
.cart-item__remove:hover { color: var(--ink); }
.cart-line__remove:focus-visible,
.cart-item__remove:focus-visible { outline: 3px solid var(--focus); outline-offset: 0; }

/* Quantité : la capsule moins, valeur, plus du guide (.stepper), en taille
   de ligne. Boutons ronds de 44 px, valeur en chiffres condensés. */
.cart-qty {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 3px;
  border: 1px solid var(--ink-12);
  border-radius: 999px;
  background: var(--surface);
  box-shadow: var(--shadow-1);
}

.cart-qty__step {
  display: grid;
  flex: none;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--surface-sunken);
  color: var(--ink);
  cursor: pointer;
  touch-action: manipulation;
}

.cart-qty__step:active { transform: scale(.96); }
.cart-qty__step:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }

.cart-qty__step svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
}

.cart-qty__value,
.cart-qty--field .cart-qty__input {
  min-width: 2.4ch;
  font-family: 'Barlow Condensed', 'Arial Narrow', Arial, sans-serif;
  font-size: 1.35rem;
  font-weight: 800;
  line-height: 1;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

.cart-qty--field .cart-qty__input {
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--ink);
  -moz-appearance: textfield;
  appearance: textfield;
}

.cart-qty--field .cart-qty__input:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; border-radius: 6px; }
.cart-qty--field .cart-qty__input::-webkit-inner-spin-button,
.cart-qty--field .cart-qty__input::-webkit-outer-spin-button { margin: 0; -webkit-appearance: none; }

@media (hover: hover) {
  .cart-qty__step:hover { background: var(--ink); color: var(--surface); }
}

/* Mention cadeau posée par la fiche ou par Offrir : une étiquette verte,
   puis le message dans le creux du papier. */
.cart-gift {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 8px;
  margin: 4px 0 0;
  font-size: .88rem;
}

.cart-gift__tag {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 0 10px;
  border-radius: 999px;
  background: var(--accent);
  color: var(--ink);
  font-size: .8rem;
  font-weight: 800;
}

.cart-gift__message {
  flex: 1 1 100%;
  padding: 8px 12px;
  border-radius: 12px;
  background: var(--surface-sunken);
  color: var(--ink);
  line-height: 1.45;
  overflow-wrap: anywhere;
}

.cart-drawer__empty {
  display: grid;
  justify-items: center;
  gap: 12px;
  padding: 40px 0 28px;
  color: var(--ink-70);
  text-align: center;
}

.cart-drawer__empty p { margin: 0; }

.cart-drawer__empty .text-link { padding-top: 20px; margin-top: -20px; color: var(--ink); font-weight: 700; }

/* ---------- Suggestion du même club ---------- */

.cart-suggestion[hidden] { display: none; }

.cart-suggestion { margin-top: 22px; }

.cart-suggestion__title {
  margin: 0 0 10px;
  font-family: 'Barlow Condensed', Arial, sans-serif;
  font-size: 1.2rem;
  font-weight: 800;
  line-height: 1.1;
  text-transform: uppercase;
}

/* Une carte souple qui mène à la fiche. */
.cart-suggestion__card {
  display: grid;
  grid-template-columns: 76px minmax(0, 1fr);
  align-items: center;
  gap: 14px;
  padding: 10px 12px 10px 10px;
  border: 1px solid var(--ink-12);
  border-radius: 16px;
  background: rgba(255, 255, 255, .44);
  box-shadow: inset 3px 0 0 var(--cart-club, transparent);
  color: var(--ink);
}

.cart-suggestion__card:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }

.cart-suggestion__media {
  display: grid;
  place-items: center;
  height: 76px;
  border-radius: 12px;
  background: var(--surface-sunken);
}

.cart-suggestion__media img {
  width: 86%;
  height: 86%;
  object-fit: contain;
  mix-blend-mode: multiply;
}

.cart-suggestion__copy { display: grid; gap: 2px; min-width: 0; }

.cart-suggestion__name { font-size: .95rem; font-weight: 700; line-height: 1.25; text-decoration: underline; text-underline-offset: 3px; }

.cart-suggestion__meta { color: var(--ink-70); font-size: .85rem; }

.cart-suggestion__price { font-size: .92rem; font-weight: 800; font-variant-numeric: tabular-nums; }

@media (hover: hover) {
  .cart-suggestion__card:hover { border-color: transparent; background: var(--surface); box-shadow: inset 3px 0 0 var(--cart-club, transparent), var(--shadow-2); }
}

/* ---------- Pied ---------- */

.cart-drawer__foot {
  display: grid;
  gap: 10px;
  padding: 16px 20px calc(16px + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid var(--line);
  background: var(--paper);
}

.cart-drawer__foot[hidden] { display: none; }

.cart-drawer__total {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
  margin: 0;
  font-size: .82rem;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.cart-drawer__total strong {
  font-family: 'Barlow Condensed', 'Arial Narrow', Arial, sans-serif;
  font-size: 1.75rem;
  letter-spacing: 0;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.cart-drawer__note { margin: -4px 0 0; color: var(--ink-70); font-size: .82rem; }

.cart-drawer__form { display: grid; gap: 10px; }

/* Commander : franc, vert, pleine largeur, à la hauteur des boutons
   d'achat. Le seul vert du tiroir. */
.cart-drawer__checkout,
.cart-summary__checkout {
  width: 100%;
  min-height: var(--button-h);
  justify-content: center;
  font-size: 1rem;
}

/* Note de commande, repliée tant qu'elle est vide : une capsule qui déplie
   un champ arrondi. */
.cart-note__summary { justify-self: start; min-height: 44px; font-size: .92rem; }
.cart-note[open] .cart-note__summary { margin-bottom: 8px; }

.cart-note__label {
  display: block;
  margin-bottom: 8px;
  color: var(--ink-70);
  font-size: .95rem;
  font-weight: 700;
  letter-spacing: .02em;
}

textarea.cart-note__field { min-height: 88px; font-size: .95rem; }

/* Pied du tiroir : rappel cadeau et licence du club. */
.cart-drawer__gift,
.cart-drawer__licence { margin: 0; color: var(--ink-70); font-size: .82rem; font-weight: 700; }
.cart-drawer__gift[hidden],
.cart-drawer__licence[hidden] { display: none; }

/* Réassurance et paiements sous le bouton, texte 14 px, sans encadré. */
.cart-drawer__foot .reassurance,
.cart-summary .reassurance { color: var(--ink-70); }

.cart-drawer__foot .reassurance__item:first-child,
.cart-summary .reassurance__item:first-child { border-top: 0; }

.cart-drawer__foot .reassurance__item:last-child,
.cart-summary .reassurance__item:last-child { border-bottom: 0; }

.cart-drawer__link {
  justify-self: center;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 4px;
  font-size: .875rem;
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ---------- Page panier ---------- */

.cart-page .section-heading > span { color: var(--ink-70); font-size: .9rem; text-transform: uppercase; }

.cart-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 360px;
  align-items: start;
  gap: clamp(24px, 4vw, 56px);
}

.cart-items { display: grid; gap: 10px; }

/* Une ligne, une feuille, comme dans le tiroir. */
.cart-item {
  display: grid;
  grid-template-columns: 120px minmax(0, 1fr) auto 100px;
  grid-template-areas: "media details quantity total";
  align-items: center;
  gap: 12px 20px;
  padding: 14px 18px 14px 14px;
  border-radius: 16px;
  background: var(--surface);
  box-shadow: inset 3px 0 0 var(--cart-club, transparent), var(--shadow-1);
}

.cart-item__image { grid-area: media; }
.cart-item__details { grid-area: details; display: grid; gap: 4px; min-width: 0; }
.cart-item__quantity { position: relative; grid-area: quantity; }
.cart-item__total { grid-area: total; text-align: right; }

.cart-item h2 { margin: 0; font-family: Barlow, Arial, sans-serif; font-size: 1rem; font-weight: 700; line-height: 1.3; }
.cart-item h2 a:hover { text-decoration: underline; text-underline-offset: 3px; }
.cart-item__details p { margin: 0; color: var(--ink-70); font-size: .88rem; }

.cart-item__facts {
  display: flex;
  flex-wrap: wrap;
  gap: 2px 12px;
  color: var(--ink-70);
  font-size: .85rem;
}

.cart-item__facts span + span::before { content: "·"; margin-right: 12px; }

.cart-item__details .cart-gift { color: var(--ink); }

/* Le libellé de la quantité reste lu par les lecteurs d'écran ; la capsule
   se comprend d'un coup d'œil. */
.cart-item__quantity label {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.cart-update { margin-top: 12px; }

.cart-page__note { margin-top: 22px; max-width: 520px; }

.cart-suggestion--page { max-width: 520px; margin-top: 30px; }

/* Même casse que « Finaliser votre commande », l'autre H2 de la page. */
.cart-suggestion--page .cart-suggestion__title { font-size: 1.6rem; text-transform: none; }

/* Le récapitulatif : une feuille, le total, puis le bouton de commande,
   franc et en vedette. */
.cart-summary {
  display: grid;
  gap: 16px;
  padding: clamp(20px, 2.4vw, 30px);
  border-radius: 16px;
  background: var(--surface);
  box-shadow: var(--shadow-2);
}

.cart-summary h2 { margin: 0; font-size: 1.6rem; }

.cart-summary > div {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 15px;
  padding-top: 16px;
  border-top: 1px solid var(--ink-12);
}

.cart-summary > div strong {
  font-family: 'Barlow Condensed', 'Arial Narrow', Arial, sans-serif;
  font-size: 1.75rem;
  font-weight: 800;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.cart-summary p { margin: 0; color: var(--ink-70); font-size: .87rem; }
.cart-summary .reassurance { margin: 0; }
/* Lien texte : son soulignement reste sous les mots, sa cible monte à 44 px. */
.cart-summary .text-link { justify-self: start; padding-top: 22px; margin-top: -18px; font-size: .9rem; }

.cart-summary__policies {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 16px;
  padding-top: 4px;
  border-top: 1px solid var(--ink-12);
  font-size: .8rem !important;
}

.cart-summary__policies a { text-decoration: underline; text-underline-offset: 3px; }

/* Panier vide : les trois clubs en capsules. */
.cart-empty__clubs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}

.cart-empty__clubs a {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 46px;
  padding: 0 18px 0 14px;
  border: 1px solid var(--ink-12);
  border-radius: 999px;
  background: var(--surface);
  font-weight: 700;
}

/* La couleur du club accompagne son nom. */
.cart-empty__clubs a::before {
  content: "";
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--club, var(--ink));
  box-shadow: 0 0 0 1px var(--ink-12);
}

.cart-empty__clubs a:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }

@media (hover: hover) {
  .cart-empty__clubs a:hover { border-color: var(--ink-70); }
}

@media (max-width: 1050px) {
  .cart-layout { grid-template-columns: minmax(0, 1fr) 300px; }
  .cart-item {
    grid-template-columns: 100px minmax(0, 1fr) auto;
    grid-template-areas: "media details details" "media quantity total";
  }
}

@media (max-width: 950px) {
  .cart-layout { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 550px) {
  .cart-item {
    grid-template-columns: 84px minmax(0, 1fr) auto;
    grid-template-areas: "media details details" "quantity quantity total";
    gap: 12px 14px;
    padding: 12px 14px 12px 12px;
  }
  .cart-item__facts { flex-direction: column; }
  .cart-item__facts span + span::before { content: none; }
  .cart-empty { padding: 32px 20px; }
}

@media (prefers-reduced-motion: no-preference) {
  .cart-qty__step,
  .cart-suggestion__card,
  .cart-empty__clubs a { transition: background-color var(--motion-state), color var(--motion-state), border-color var(--motion-state), box-shadow var(--motion-state), transform var(--motion-state); }
}

@media (prefers-reduced-motion: no-preference) {
  .cart-drawer[open] { animation: cart-in .28s var(--ease-out-quint); }
  .cart-drawer[open]::backdrop { animation: cart-fade .28s var(--ease-out-quart); }
  .cart-drawer[open][data-closing="true"] { animation: cart-out .16s var(--ease-in-quart) forwards; }
  .cart-drawer[open][data-closing="true"]::backdrop { animation: cart-fade-out .16s linear forwards; }
}

@keyframes cart-in {
  from { transform: translateX(100%); }
  to   { transform: translateX(0); }
}

@keyframes cart-fade {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes cart-out { to { transform: translateX(100%); } }
@keyframes cart-fade-out { to { opacity: 0; } }