/* ==========================================================================
   Shop — clip packs. Un tournage = un produit, decline en trois paliers.
   Le contenu vendu est du PORTRAIT : previsualisations en 9/16.

   Mise en page : un carrousel ou le tournage central est en grand et ses
   voisins en retrait, avec le detail du produit juste en dessous. Meme
   mecanique au telephone et sur ordinateur, seules les tailles changent —
   un seul produit lisible a la fois, jamais une grille de vignettes.

   Section la plus "chargee" du site : glow, accent violet. Brief section 4.
   ========================================================================== */

main {
  max-width: var(--page-max);
  margin-inline: auto;
  padding-inline: clamp(1.25rem, 5vw, 2.5rem);
}

/* ---------- Hero ---------- */

.shop-hero {
  position: relative;
  padding: clamp(3rem, 10vw, 6rem) 0 0;
  max-width: 44rem;
}

/* Halo borne a 110vw : a pleine largeur fixe, il depassait du cadre au
   telephone et elargissait la page de 93px. */
.shop-hero::before {
  content: "";
  position: absolute;
  top: -12rem;
  left: -18rem;
  width: min(46rem, 110vw);
  height: min(46rem, 110vw);
  background: radial-gradient(circle, color-mix(in srgb, var(--accent) 22%, transparent) 0%, transparent 62%);
  pointer-events: none;
  z-index: -1;
}

.shop-hero__eyebrow {
  color: var(--accent);
  font-size: var(--text-caption);
  text-transform: uppercase;
  letter-spacing: var(--track-label);
  font-weight: 600;
  margin-bottom: 1.25rem;
}

.shop-hero__title {
  font-size: var(--text-h1);
  font-weight: 700;
  letter-spacing: -0.02em;
}

.shop-hero__dot { color: var(--accent); }

.shop-hero__lead {
  margin-top: 1.5rem;
  color: var(--fg-muted);
  font-size: var(--text-lead);
  max-width: 36rem;
}

/* ==========================================================================
   Carrousel
   ========================================================================== */

.showcase { margin-top: clamp(2.5rem, 7vw, 4rem); }

.carousel {
  position: relative;
  /* Le carrousel deborde volontairement des marges de la page pour que les
     voisins soient coupes par le bord de l'ecran, pas par une marge. */
  margin-inline: calc(-1 * clamp(1.25rem, 5vw, 2.5rem));
}

.carousel__track {
  --slide-w: min(72vw, 17rem);

  display: flex;
  gap: clamp(0.75rem, 2vw, 1.25rem);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  /* Pas de scroll-behavior ici : pose en CSS, il s'applique a TOUS les
     defilements et peut faire avaler les defilements programmes selon le
     navigateur. Le script passe l'animation au cas par cas. */
  /* Permet au premier et au dernier tournage d'atteindre le centre. */
  padding-inline: calc(50% - var(--slide-w) / 2);
  padding-block: 1rem 1.5rem;
  scrollbar-width: none;
}

.carousel__track::-webkit-scrollbar { display: none; }

@media (min-width: 52rem) {
  /* Le tournage central occupe franchement l'ecran : c'est le produit,
     pas une vignette. Les voisins sont ramenes a 0.84 par le CSS du slide. */
  .carousel__track { --slide-w: clamp(17rem, 24vw, 21rem); }
}

/* ---------- Un tournage ---------- */

.slide {
  flex: 0 0 var(--slide-w);
  scroll-snap-align: center;
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  cursor: pointer;
  /* Les voisins sont en retrait : plus petits, plus sombres. */
  transform: scale(0.84);
  opacity: 0.45;
  transition: transform 0.3s ease, opacity 0.3s ease;
}

.slide[aria-selected="true"] {
  transform: scale(1);
  opacity: 1;
  cursor: default;
}

.slide__media {
  position: relative;
  display: block;
  aspect-ratio: 9 / 16;
  width: 100%;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: linear-gradient(160deg, #7b3fe4 0%, #2f6df6 38%, #f0782b 78%, #f5b93f 100%);
  transition: filter 0.35s ease, box-shadow 0.3s ease;
  overflow: hidden;
}

.slide[aria-selected="true"] .slide__media {
  border-color: color-mix(in srgb, var(--accent) 45%, var(--border));
  box-shadow: 0 20px 60px -24px color-mix(in srgb, var(--accent) 85%, transparent);
}

/* Le rendu suit le palier choisi : etalonne, plat (S-Log3), ou complet. */
.slide[data-tier="grade"] .slide__media { filter: saturate(0.18) contrast(0.62) brightness(1.28); }
.slide[data-tier="raw"] .slide__media { filter: saturate(0.3) contrast(0.7) brightness(1.12); }

.slide[data-tier="raw"] .slide__media::after {
  content: "";
  position: absolute;
  inset: auto 1rem 1rem auto;
  width: 2rem;
  height: 2rem;
  border: 2px solid rgba(255, 255, 255, 0.55);
  border-radius: 6px;
  box-shadow:
    -5px -5px 0 -2px rgba(255, 255, 255, 0.35),
    -10px -10px 0 -4px rgba(255, 255, 255, 0.2);
}

.slide__label,
.slide__badge {
  position: absolute;
  font-size: 0.62rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-weight: 600;
  border-radius: 999px;
  padding: 0.3rem 0.6rem;
  background: rgba(6, 6, 8, 0.72);
  color: #fff;
  backdrop-filter: blur(6px);
}

.slide__label { top: 0.7rem; left: 0.7rem; }
.slide__badge { bottom: 0.7rem; left: 0.7rem; color: var(--fg-muted); }

.slide__name {
  font-size: 0.95rem;
  font-weight: 650;
  text-align: center;
}

/* Tournage annonce : image en retrait pour qu'on voie d'un coup d'oeil
   qu'il n'est pas encore en vente, sans avoir a lire l'etiquette. */
.slide--upcoming .slide__media {
  background: linear-gradient(160deg, #1d1d24 0%, #262630 50%, #191920 100%);
  border-style: dashed;
}

.slide--upcoming[aria-selected="true"] .slide__media { box-shadow: none; }

/* ---------- Fleches ---------- */

.carousel__arrow {
  position: absolute;
  top: calc(50% - 1.5rem);
  z-index: 2;
  width: 2.75rem;
  height: 2.75rem;
  display: none;
  place-items: center;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: rgba(11, 11, 13, 0.82);
  backdrop-filter: blur(8px);
  color: var(--fg);
  font-size: 1.05rem;
  cursor: pointer;
  transition: border-color 0.15s ease, color 0.15s ease, opacity 0.15s ease;
}

.carousel__arrow--prev { left: clamp(0.5rem, 3vw, 2rem); }
.carousel__arrow--next { right: clamp(0.5rem, 3vw, 2rem); }

.carousel__arrow:hover:not(:disabled) {
  border-color: color-mix(in srgb, var(--accent) 55%, var(--border));
  color: var(--accent);
}

.carousel__arrow:disabled { opacity: 0.25; cursor: default; }

/* Au telephone on fait glisser au doigt : les fleches ne servent a rien. */
@media (min-width: 52rem) {
  .carousel__arrow { display: grid; }
}

/* Plus specifique que la regle ci-dessus, sinon display: grid l'emporterait
   sur l'attribut hidden pose par le script. */
.carousel__arrow[hidden] { display: none; }

/* ==========================================================================
   Detail du tournage centre
   ========================================================================== */

.details { max-width: 34rem; margin-inline: auto; }

.detail {
  display: flex;
  flex-direction: column;
  gap: 1.15rem;
  padding: clamp(1.25rem, 4vw, 1.75rem);
  background: var(--bg-raised);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}

/* Meme piege que partout : display: flex l'emporterait sur hidden. */
.detail[hidden] { display: none; }

.detail__title { font-size: clamp(1.35rem, 3vw, 1.6rem); font-weight: 700; }

.detail__meta {
  margin-top: 0.35rem;
  font-size: 0.78rem;
  color: var(--fg-muted);
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

/* Tournage annonce : ni palier, ni prix, ni bouton d'achat. Afficher un
   tarif pour quelque chose qui n'est pas en vente serait trompeur. */
.detail--upcoming { border-style: dashed; }

.detail__soon { color: var(--fg-muted); font-size: 0.95rem; }

.btn--ghost {
  background: transparent;
  border: 1px solid color-mix(in srgb, var(--accent) 55%, var(--border));
  color: var(--accent);
  align-self: flex-start;
  padding-inline: 1.4rem;
}

.btn--ghost:hover { background: color-mix(in srgb, var(--accent) 14%, transparent); filter: none; }

/* ---------- Liste d'attente par tournage ----------
   Formulaire compact, pose dans le detail du tournage annonce. Il est la ou
   se trouve l'attention : l'editeur regarde le pack, il s'inscrit sans
   quitter des yeux ce qu'il attend. */

.pack-alert {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  margin-top: 0.35rem;
  padding-top: 1rem;
  border-top: 1px solid var(--border);
}

.pack-alert__row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.pack-alert__row input[type="email"] {
  flex: 1 1 11rem;
  min-width: 0;
  padding: 0.6rem 0.9rem;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--bg);
  color: var(--fg);
  font: inherit;
  font-size: 0.88rem;
}

.pack-alert__row input[type="email"]::placeholder { color: #5c5c66; }

.pack-alert__row input[type="email"]:focus-visible {
  border-color: color-mix(in srgb, var(--accent) 60%, var(--border));
}

.pack-alert__row .btn { flex: 0 0 auto; align-self: auto; }

.pack-alert__consent {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  font-size: 0.78rem;
  color: var(--fg-muted);
  cursor: pointer;
}

.pack-alert__consent input { margin-top: 0.15rem; accent-color: var(--accent); }

/* Tant qu'aucun formulaire Kit n'est branche, on ne fait pas semblant de
   collecter : une adresse acceptee qui ne part nulle part est pire que pas
   de champ du tout. */
.pack-alert[data-inactive] input,
.pack-alert[data-inactive] .btn {
  opacity: 0.5;
  pointer-events: none;
}

/* ---------- Paliers ----------
   Chaque ligne affiche son prix : l'echelle tarifaire se lit d'un coup,
   sans avoir a cliquer sur les trois. */

.tiers { display: flex; flex-direction: column; gap: 0.35rem; }

.tiers button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  width: 100%;
  padding: 0.6rem 0.85rem;
  border: 1px solid transparent;
  border-radius: 10px;
  background: var(--bg);
  color: var(--fg-muted);
  font: inherit;
  font-size: 0.9rem;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.tiers button:hover { color: var(--fg); }

.tiers button[aria-checked="true"] {
  background: color-mix(in srgb, var(--accent) 16%, transparent);
  border-color: color-mix(in srgb, var(--accent) 55%, transparent);
  color: var(--fg);
}

.tiers__name {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  white-space: nowrap;
}

.tiers__price { font-variant-numeric: tabular-nums; color: var(--fg); }
.tiers button[aria-checked="true"] .tiers__price { color: var(--accent); }

.tiers__hint {
  font-size: 0.58rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 0.12rem 0.4rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--accent) 24%, transparent);
  color: var(--accent);
  white-space: nowrap;
}

/* ---------- Contenu du palier ---------- */

.tier-body {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  padding-top: 1rem;
  border-top: 1px solid var(--border);
}

.tier-body[hidden] { display: none; }

.tier-body__specs {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--accent);
  font-weight: 600;
}

.tier-body__text { color: var(--fg-muted); font-size: 0.92rem; }

.btn {
  display: block;
  text-align: center;
  padding: 0.7rem 1.15rem;
  border-radius: 999px;
  background: var(--accent);
  color: #0b0b0d;
  font-weight: 650;
  font-size: 0.9rem;
  text-decoration: none;
  border: 0;
  font-family: inherit;
  cursor: pointer;
  transition: filter 0.15s ease, transform 0.15s ease;
}

/* Le halo au survol appartient au Shop : c'est la section energie. */
.btn:hover {
  filter: brightness(1.12);
  transform: translateY(-1px);
  box-shadow: 0 6px 24px -8px color-mix(in srgb, var(--accent) 70%, transparent);
}

.showcase__note {
  margin: 1.5rem auto 0;
  max-width: 34rem;
  color: var(--fg-muted);
  font-size: 0.88rem;
}

/* ==========================================================================
   Les trois paliers, expliques une seule fois
   ========================================================================== */

.tiers-intro { margin-top: clamp(3.5rem, 9vw, 5rem); }

.tiers-intro__title,
.more__title {
  font-size: var(--text-label);
  text-transform: uppercase;
  letter-spacing: var(--track-label);
  color: var(--fg-muted);
  font-weight: 500;
  margin-bottom: 1.5rem;
}

.tiers-intro__list {
  display: grid;
  gap: var(--gap);
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  counter-reset: tier;
  list-style: none;
  padding: 0;
  margin: 0;
}

.tiers-intro__list li {
  counter-increment: tier;
  padding-top: 1rem;
  border-top: 2px solid color-mix(in srgb, var(--accent) 40%, var(--border));
}

.tiers-intro__list li::before {
  content: counter(tier, decimal-leading-zero);
  display: block;
  font-size: 0.75rem;
  letter-spacing: 0.14em;
  color: var(--accent);
  font-weight: 700;
  margin-bottom: 0.5rem;
}

.tiers-intro__list h3 { font-size: 1.05rem; font-weight: 650; margin-bottom: 0.4rem; }
.tiers-intro__list p { color: var(--fg-muted); font-size: 0.95rem; }

.tiers-intro__note {
  margin-top: clamp(1.5rem, 4vw, 2rem);
  max-width: 38rem;
  color: var(--fg-muted);
  font-size: 0.9rem;
  padding-left: clamp(0.9rem, 2.5vw, 1.25rem);
  border-left: 2px solid color-mix(in srgb, var(--accent) 40%, var(--border));
}

/* ==========================================================================
   A venir : cours, abonnement, et liste d'attente
   ========================================================================== */

.more { margin-top: clamp(4rem, 10vw, 6rem); }

.more-grid {
  display: grid;
  gap: var(--gap);
  grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
}

.more-card {
  padding: clamp(1.25rem, 3vw, 1.75rem);
  border: 1px dashed var(--border);
  border-radius: var(--radius);
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.more-card h3 { font-size: 1.1rem; font-weight: 650; }
.more-card p { color: var(--fg-muted); font-size: 0.95rem; flex: 1; }

.more-card__tag {
  align-self: flex-start;
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--fg-muted);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 0.3rem 0.7rem;
}

/* ---------- Liste d'attente ---------- */

.notify {
  margin-top: var(--gap);
  padding: clamp(1.25rem, 3vw, 1.75rem);
  border: 1px solid color-mix(in srgb, var(--accent) 30%, var(--border));
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--accent) 7%, var(--bg-raised));
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
}

.notify__intro h3 { font-size: 1.1rem; font-weight: 650; margin-bottom: 0.35rem; }
.notify__intro p { color: var(--fg-muted); font-size: 0.92rem; }

.notify__row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
}

.notify__row input[type="email"] {
  flex: 1 1 14rem;
  min-width: 0;
  padding: 0.7rem 1rem;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--bg);
  color: var(--fg);
  font: inherit;
  font-size: 0.92rem;
}

.notify__row input[type="email"]::placeholder { color: #5c5c66; }

.notify__row input[type="email"]:focus-visible {
  border-color: color-mix(in srgb, var(--accent) 60%, var(--border));
}

.notify__row .btn { flex: 0 0 auto; }

.notify__consent {
  display: flex;
  align-items: flex-start;
  gap: 0.55rem;
  font-size: 0.82rem;
  color: var(--fg-muted);
  cursor: pointer;
}

.notify__consent input { margin-top: 0.15rem; accent-color: var(--accent); }

.notify .btn { align-self: auto; }

@media (prefers-reduced-motion: reduce) {
  .slide { transition: none; }
}