/* ========================================================================
   components.css — primitives réutilisables
   ======================================================================== */

@layer components {
  /* --- Container ------------------------------------------------------ */
  .container {
    width: 100%;
    max-width: var(--container-max);
    margin-inline: auto;
    padding-inline: var(--gutter);
  }

  .container-narrow {
    width: 100%;
    max-width: var(--container-narrow);
    margin-inline: auto;
    padding-inline: var(--gutter);
  }

  /* --- Section -------------------------------------------------------- */
  .section {
    padding-block: var(--space-2xl);
  }
  .section--tight { padding-block: var(--space-xl); }
  .section--hero  { padding-block: var(--space-3xl); }

  /* --- Boutons -------------------------------------------------------- */
  .btn {
    --btn-bg: var(--surface);
    --btn-ink: var(--ink);
    --btn-border: var(--border-strong);

    display: inline-flex;
    align-items: center;
    gap: var(--space-2xs);
    padding: 0.85em 1.4em;
    background: var(--btn-bg);
    color: var(--btn-ink);
    border: 1px solid var(--btn-border);
    border-radius: var(--radius-pill);
    font-family: var(--font-body);
    font-size: var(--step-0);
    font-weight: 600;
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
    cursor: pointer;
    transition:
      background var(--motion-fast) ease,
      border-color var(--motion-fast) ease,
      transform var(--motion-fast) ease;
  }
  .btn:hover { background: var(--surface-2); border-color: var(--ink-dim); }
  .btn:active { transform: translateY(1px); }

  .btn--primary {
    --btn-bg: var(--accent-red);
    --btn-ink: #fff;
    --btn-border: var(--accent-red);
  }
  .btn--primary:hover { --btn-bg: var(--accent-red-hot); border-color: var(--accent-red-hot); }

  .btn--ghost {
    --btn-bg: transparent;
    --btn-border: var(--border-strong);
  }

  /* --- LIVE badge (le seul élément avec pulse autorisé) -------------- */
  .live-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.5em;
    padding: 0.4em 0.8em;
    background: var(--live-pulse);
    color: #fff;
    font-family: var(--font-body);
    font-size: var(--step--1);
    font-weight: 700;
    letter-spacing: var(--tracking-wider);
    text-transform: uppercase;
    border-radius: var(--radius-sm);
  }
  .live-badge::before {
    content: "";
    width: 0.55em;
    height: 0.55em;
    border-radius: 50%;
    background: #fff;
    animation: live-pulse 1.4s ease-in-out infinite;
  }
  .live-badge[data-state="off"] { display: none; }

  @keyframes live-pulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50%      { opacity: 0.3; transform: scale(1.35); }
  }

  /* --- Card produit / event ------------------------------------------ */
  .card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    overflow: hidden;
    transition:
      background var(--motion-fast) ease,
      transform var(--motion-base) var(--ease-spring-2, cubic-bezier(0.5, 1.6, 0.5, 1)),
      border-color var(--motion-fast) ease;
  }
  .card:hover {
    background: var(--bg-card-hover);
    border-color: var(--border-strong);
    transform: translateY(-2px);
  }

  /* --- Marquee logos commanditaires ---------------------------------- */
  .marquee {
    --marquee-gap: var(--space-l);
    --marquee-duration: 40s;

    display: flex;
    overflow: hidden;
    user-select: none;
    mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  }
  .marquee__track {
    display: flex;
    flex: 0 0 auto;
    gap: var(--marquee-gap);
    padding-inline: calc(var(--marquee-gap) / 2);
    animation: marquee-scroll var(--marquee-duration) linear infinite;
  }
  .marquee:hover .marquee__track { animation-play-state: paused; }
  .marquee--reverse .marquee__track { animation-direction: reverse; }
  @keyframes marquee-scroll {
    to { transform: translateX(-50%); }
  }

  /* 3 lignes empilées de commanditaires */
  .sponsors__rows {
    display: flex;
    flex-direction: column;
    gap: var(--space-s);
  }
  @media (prefers-reduced-motion: reduce) {
    .marquee__track { animation: none; }
  }

  /* --- Sticky countdown bottom-right --------------------------------- */
  .next-event {
    position: fixed;
    bottom: var(--space-m);
    right: var(--space-m);
    z-index: var(--z-sticky);
    display: flex;
    align-items: center;
    gap: var(--space-xs);
    padding: var(--space-xs) var(--space-s);
    background: color-mix(in oklch, var(--surface) 90%, transparent);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-pill);
    backdrop-filter: blur(12px);
    font-family: var(--font-mono);
    font-size: var(--step--1);
  }
  .next-event__label { color: var(--text-muted); }
  .next-event__value { color: var(--ink); font-weight: 600; }

  /* --- Section number header ----------------------------------------- */
  .section-header {
    display: flex;
    align-items: baseline;
    gap: var(--space-s);
    margin-bottom: var(--space-l);
    padding-bottom: var(--space-s);
    border-bottom: 1px solid var(--border);
  }
  .section-header__num {
    font-family: var(--font-mono);
    font-size: var(--step--1);
    color: var(--accent-red);
    flex: 0 0 auto;
  }
}