/* ============================================================
   Offrir : bande de l'accueil et page dédiée.

   Les casques sont sur fond blanc et détourés par fondu sur le papier :
   rien ne passe derrière eux. La page dédiée parle la langue de
   l'instrument (instrument.css) : papier teinté, capsules pour « Pour
   qui ? », tuiles de club, carte du casque retenu en feuille blanche.
   ============================================================ */

/* ---------- Bande de l'accueil ---------- */

.gift-band {
  padding-block: clamp(48px, 5vw, 80px);
  background: var(--paper);
  color: var(--ink);
  overflow: hidden;
}

.gift-band__grid {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(24px, 4vw, 64px);
  align-items: center;
}

.gift-band__copy {
  display: grid;
  gap: 18px;
  justify-items: start;
}

.gift-band__copy h2 {
  max-width: 14ch;
  margin: 0;
  font-size: var(--fs-h2);
  font-weight: 800;
  line-height: .94;
  letter-spacing: -.03em;
  text-transform: uppercase;
  text-wrap: balance;
}

.gift-band__copy p {
  max-width: 42ch;
  margin: 0;
  color: var(--ink-70);
  font-size: 1.05rem;
  line-height: 1.55;
}

.gift-band__cta { gap: 22px; }

/* Les trois casques se chevauchent legerement : une fratrie, pas une
   grille. Le chevauchement est dans l'espace vide des images. */
.gift-band__row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: end;
  margin: 0;
  padding: 0;
  list-style: none;
  mix-blend-mode: multiply;
}

.gift-band__item + .gift-band__item { margin-left: -12%; }
.gift-band__item:nth-child(2) { translate: 0 -6%; }

.gift-band__item a {
  display: block;
  transition: translate var(--motion-state);
}

.gift-band__item img {
  width: 100%;
  height: auto;
  aspect-ratio: 1;
  object-fit: contain;
}

@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .gift-band__item a:hover { translate: 0 -8px; }
}

@media (max-width: 760px) {
  .gift-band__grid { grid-template-columns: minmax(0, 1fr); }
  .gift-band__row { order: -1; margin-inline: -4%; }
  .gift-band__cta { width: 100%; justify-content: space-between; }
}

/* ---------- Page Offrir ----------

   Le choix guidé, sur le papier teinté de l'instrument. Ce qui porte
   l'achat reste franc : le titre, le nom du casque en capitales
   condensées, le prix, le bouton d'ajout en encre. Ce que l'on touche est
   doux : capsules de profil, tuiles de club, case cadeau, champ du
   message. */

.gift-page {
  padding-block: clamp(28px, 4vw, 56px) var(--space-section);
  color: var(--ink);
}

.gift-page__head {
  display: grid;
  gap: 16px;
  padding-bottom: clamp(24px, 3vw, 36px);
}

.gift-page__head h1 { margin: 0; }

.gift-page__lead { display: grid; gap: 16px; max-width: 52ch; }

.gift-page__lead p {
  margin: 0;
  color: var(--ink-70);
  font-size: 1.1rem;
  line-height: 1.55;
}

/* Saison : message, date limite, échange. Rien ne s'affiche tant que ce
   n'est pas rempli. Le filet vert marque le moment qui compte, le texte
   reste en encre. */
.gift-season {
  display: grid;
  gap: 8px;
  margin-top: 4px;
  padding-left: 16px;
  border-left: 4px solid var(--accent);
}

.gift-page__lead .gift-season__message { color: var(--ink); font-size: 1.2rem; font-weight: 700; line-height: 1.4; }

.gift-season__facts {
  display: grid;
  gap: 4px;
  margin: 0;
  padding: 0;
  list-style: none;
  font-weight: 700;
  line-height: 1.45;
}

/* ---------- Le choix guidé ---------- */

.gift-guide {
  display: grid;
  gap: clamp(20px, 2.4vw, 32px);
}

.gift-guide__steps {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 22px;
}

.gift-step {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.gift-step[hidden] { display: none; }

/* Même voix que le libellé de la règle et des filtres. */
.gift-step__legend {
  margin-bottom: 10px;
  padding: 0;
  color: var(--ink-70);
  font-size: .95rem;
  font-weight: 700;
  letter-spacing: .02em;
}

.gift-step__choices { display: flex; flex-wrap: wrap; gap: 8px; }

/* Une capsule plus haute que celle d'un filtre : c'est la première
   décision de la page. */
.gift-who {
  gap: 10px;
  min-height: 56px;
  padding: 0 22px;
  font-size: 1.05rem;
}

.gift-who .capsule__detail { font-size: .95rem; white-space: nowrap; }

/* Les tuiles de club : au repos, les casques du club pour chaque âge ;
   une fois le profil choisi, le casque de ce profil à ses couleurs. */
.gift-clubs {
  --tile-image: 96px;
  max-width: 520px;
  margin: 0;
}

.gift-club__views {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  min-height: 96px;
}

.gift-guide:not([data-gift-profile]) .gift-clubs { --tile-image: 56px; }
.gift-guide:not([data-gift-profile]) .gift-club__views { align-items: center; }
.gift-guide:not([data-gift-profile]) .gift-club__view + .gift-club__view { margin-left: -6px; }

/* Fond opaque : le détourage du casque (fondu en produit) a besoin d'un
   fond plein derrière lui. Le papier a la teinte des capsules voisines. */
.gift-club {
  padding-block: 12px 10px;
  border-color: var(--ink-12);
  background: var(--paper);
}

.gift-club__view { display: block; line-height: 0; }
.gift-guide[data-gift-profile="enfant"] .gift-club__view:not([data-gift-profile="enfant"]),
.gift-guide[data-gift-profile="junior"] .gift-club__view:not([data-gift-profile="junior"]),
.gift-guide[data-gift-profile="adulte"] .gift-club__view:not([data-gift-profile="adulte"]) { display: none; }

/* Le rappel quand le club est choisi avant le profil. */
.gift-guide__hint { margin: 0; color: var(--ink-70); font-weight: 700; }
.gift-guide__hint[hidden] { display: none; }

/* ---------- La carte du casque retenu ---------- */

.gift-guide__result[hidden],
.gift-card[hidden] { display: none; }

.gift-card {
  display: grid;
  grid-template-columns: minmax(0, 300px) minmax(0, 1fr);
  align-items: center;
  gap: clamp(20px, 3vw, 48px);
  padding: clamp(16px, 2.4vw, 32px);
  scroll-margin: 96px 0 24px;
}

.gift-card__media {
  display: grid;
  place-items: center;
  aspect-ratio: 1;
  border-radius: 12px;
  background: var(--surface);
}

.gift-card__image {
  width: 86%;
  height: 86%;
  object-fit: contain;
  mix-blend-mode: multiply;
}

.gift-card--sold .gift-card__image { opacity: .55; }

.gift-card__body { display: grid; gap: 18px; min-width: 0; }
.gift-card__head { display: grid; gap: 6px; }

.gift-card__club {
  margin: 0;
  color: var(--ink-70);
  font-size: .85rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.gift-card__title {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 2px 12px;
  margin: 0;
  font: inherit;
}

.gift-card__model {
  font-family: 'Barlow Condensed', 'Arial Narrow', Arial, sans-serif;
  font-size: var(--fs-h3);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -.01em;
  text-transform: uppercase;
}

.gift-card__age { color: var(--ink-70); font-size: .95rem; }

.gift-card__price {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 10px;
  margin: 4px 0 0;
  font-family: 'Barlow Condensed', 'Arial Narrow', Arial, sans-serif;
  font-size: 1.75rem;
  font-weight: 800;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.gift-card__price s { color: var(--ink-70); font-size: 1rem; font-weight: 600; }

.gift-card__range { display: grid; gap: 10px; }
.gift-card__size { margin: 0; font-weight: 700; font-variant-numeric: tabular-nums; }
.gift-card__range .range-bar { margin: 0 0 4px; }

.gift-card__form { display: grid; gap: 18px; margin: 0; }

.gift-card__gift { display: grid; gap: 12px; }

.gift-card__toggle { justify-self: start; }
.gift-card__message { display: grid; }
.gift-card__message[hidden] { display: none; }
.gift-card__optional { font-weight: 400; }
textarea.gift-card__field { min-height: 96px; }

.gift-card__count,
.gift-card__note { margin: 6px 0 0; color: var(--ink-70); font-size: .85rem; font-variant-numeric: tabular-nums; }

.gift-card__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 24px;
}

.gift-card__add { justify-content: center; min-width: 14rem; }
.gift-card__add[aria-busy="true"] { opacity: .7; cursor: progress; }
.gift-card__stock { margin: 0; color: var(--ink-70); font-weight: 700; }

/* ---------- Sans JavaScript : les casques par âge ---------- */

.gift-rows { display: grid; gap: 10px; --range-ring: var(--surface); }

.gift-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 34rem);
  align-items: center;
  gap: 14px clamp(32px, 4vw, 64px);
  padding: 16px;
}

.gift-row__head { display: grid; gap: 8px; }

.gift-row__head h2 {
  margin: 0;
  font-size: var(--fs-h3);
  font-weight: 800;
  line-height: 1;
  text-transform: uppercase;
}

.gift-row__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 14px;
  margin: 0;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.gift-row__tiles { margin: 0; --tile-image: 96px; }

/* ---------- Règle du cadeau et questions ---------- */

.gift-page__help {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: clamp(24px, 4vw, 64px);
  margin-top: clamp(40px, 5vw, 72px);
  padding-top: clamp(32px, 4vw, 56px);
  border-top: 1px solid var(--ink-12);
}

/* Une note, pas un titre : la règle du cadeau en phrase, dans la voix du
   texte courant, sans capitales. Un aplat d'encre franc, angle net. */
.gift-advice {
  display: grid;
  gap: 14px;
  align-content: start;
  justify-items: start;
  padding: clamp(24px, 3vw, 40px);
  border-top: 4px solid var(--accent);
  background: var(--ink);
  color: var(--paper);
}

.gift-advice p { max-width: 52ch; margin: 0; color: color-mix(in srgb, var(--paper) 84%, var(--ink)); line-height: 1.6; }
.gift-advice .gift-advice__rule { color: var(--paper); font-size: 1.35rem; font-weight: 800; line-height: 1.25; }
.gift-advice__card a { color: var(--paper); font-weight: 700; text-decoration: underline; text-underline-offset: 4px; }
.gift-advice__link { min-height: 44px; color: var(--paper); }
.gift-advice :focus-visible { outline-color: var(--accent); }

.gift-faq h2 {
  margin: 0;
  font-size: var(--fs-h3);
  font-weight: 800;
  line-height: 1;
  text-transform: uppercase;
}

.gift-faq ul {
  display: grid;
  gap: 8px;
  margin: 16px 0 0;
  padding: 0;
  list-style: none;
}

/* Renvois vers la FAQ : la liste de liens partagée (instrument.css). */
.gift-faq ul { gap: 0; }
.gift-faq li + li { border-top: 1px solid var(--ink-12); }

@media (min-width: 951px) {
  /* Le titre à gauche, l'introduction à droite, comme tous les casques. */
  .gift-page__head {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
    column-gap: 48px;
  }

  /* Les deux étapes côte à côte : le profil à gauche, le club à droite. */
  .gift-guide__steps {
    grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
    align-items: start;
    column-gap: clamp(32px, 4vw, 64px);
  }
}

/* Grand écran : le casque, ce qu'il est, puis ce que l'on en fait, sur
   une ligne. L'achat se lit à droite, sous la main. */
@media (min-width: 1100px) {
  .gift-card__body {
    grid-template-columns: minmax(0, 1fr) minmax(0, 320px);
    align-items: center;
    column-gap: clamp(32px, 4vw, 56px);
  }

  .gift-card__head,
  .gift-card__range { grid-column: 1; }

  .gift-card__form,
  .gift-card__body > .gift-card__actions { grid-column: 2; grid-row: 1 / span 2; }

  .gift-card__actions { flex-direction: column; align-items: stretch; }
  .gift-card__add { min-width: 0; }
  }

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

@media (max-width: 760px) {
  .gift-card { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .gift-card__media { aspect-ratio: 4 / 3; max-height: 240px; }
  .gift-card__image { width: auto; height: 88%; max-width: 70%; }
  .gift-card__price { font-size: 1.6rem; }
  .gift-card__add { flex: 1 1 100%; }
  .gift-clubs { --tile-image: 72px; max-width: none; }
  .gift-club__views { min-height: 72px; }
  .gift-guide:not([data-gift-profile]) .gift-clubs { --tile-image: 30px; }
  .gift-row__tiles { --tile-image: 72px; }
}

@media (max-width: 420px) {
  .gift-who { padding-inline: 18px; }
}