/* ============================================================================
 * Circuits Paris Ouest — Epic 8 : Signatures visuelles DA v2
 *
 * Source : research/06-da-cinema §6.4 (Signatures 1, 2, 3).
 * Stories : 8.1 (compteur), 8.2 (damier), 8.3 (ligne LED hero).
 *
 * Composants 100 % accessibles WCAG AA + respect prefers-reduced-motion.
 *
 * Tokens utilises avec fallback sur la palette v1 (--accent) tant que la
 * palette v2 (story 7.1) n'a pas introduit --color-orange-brique /
 * --color-graphite / --color-cuivre-brosse.
 * ========================================================================= */

:root {
  --color-orange-brique: var(--accent, #c2410c);
  --color-graphite: #1f2326;
  --color-cuivre-brosse: #8c5a3c;
}

/* ============================================================================
 * 8.1 — Compteur stylise (Migra Italic Black + arc dégradé orange)
 *
 * <span class="stat-counter" data-target="1143" data-suffix=" avis"
 *       data-prefix="" data-decimals="0">0</span>
 *
 * OU template enrichi :
 *
 * <div class="stat-counter" data-target="1143" data-suffix=" avis"
 *      data-label="avis Google">
 *   <svg class="stat-counter__arc" viewBox="0 0 64 64" aria-hidden="true">…</svg>
 *   <div class="stat-counter__body">
 *     <span class="stat-counter__value">0</span>
 *     <span class="stat-counter__label">avis Google</span>
 *   </div>
 * </div>
 * ========================================================================= */
.stat-counter {
  display: inline-flex;
  align-items: baseline;
  gap: 0.25em;
  font-family: 'Migra', 'Editorial New', var(--font-display, serif);
  font-style: italic;
  font-weight: 900;
  font-size: clamp(64px, 8vw, 120px);
  letter-spacing: -0.03em;
  line-height: 1;
  color: var(--color-graphite, var(--fg, #1a1a1a));
  font-variant-numeric: tabular-nums;
}

.stat-counter--accent {
  color: var(--color-orange-brique);
}

.stat-counter__arc {
  width: 64px;
  height: 64px;
  flex-shrink: 0;
  color: var(--color-orange-brique);
}

.stat-counter__arc path {
  stroke: var(--color-orange-brique);
  stroke-width: 8;
  stroke-linecap: round;
  fill: none;
  transition: stroke-dashoffset 1500ms cubic-bezier(0.4, 0, 0.2, 1);
}

.stat-counter__body {
  display: inline-flex;
  flex-direction: column;
  gap: 0.25rem;
}

.stat-counter__value {
  font-family: inherit;
  font-style: inherit;
  font-weight: inherit;
  font-size: inherit;
  line-height: inherit;
  letter-spacing: inherit;
  color: inherit;
  font-variant-numeric: tabular-nums;
}

.stat-counter__label {
  font-family: var(--font-mono, ui-monospace, monospace);
  font-style: normal;
  font-weight: 500;
  font-size: var(--text-eyebrow, 0.75rem);
  letter-spacing: var(--tracking-eyebrow, 0.08em);
  text-transform: uppercase;
  color: var(--fg-muted, #595959);
}

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

/* ============================================================================
 * 8.2 — Bande damier separateur
 *
 * <div class="checkered-divider" aria-hidden="true"></div>
 * <div class="checkered-divider checkered-divider--accent" aria-hidden="true"></div>
 *
 * Reveal au scroll via la classe .checkered-divider--revealed (ajoutee par
 * initCheckerDividers).
 * ========================================================================= */
.checkered-divider {
  display: block;
  width: 100%;
  height: 8px;
  background-image: repeating-linear-gradient(90deg, var(--color-graphite) 0 8px, #ffffff 8px 16px);
  background-repeat: repeat-x;
  clip-path: inset(0 100% 0 0);
  transition: clip-path 600ms cubic-bezier(0.2, 0.8, 0.2, 1);
  pointer-events: none;
}

.checkered-divider--accent {
  background-image: repeating-linear-gradient(
    90deg,
    var(--color-graphite) 0 8px,
    var(--color-orange-brique) 8px 16px
  );
}

.checkered-divider--copper {
  background-image: repeating-linear-gradient(
    90deg,
    var(--color-graphite) 0 8px,
    var(--color-cuivre-brosse) 8px 16px
  );
}

.checkered-divider--revealed {
  clip-path: inset(0 0 0 0);
}

@media (prefers-reduced-motion: reduce) {
  .checkered-divider {
    transition: none;
    clip-path: inset(0 0 0 0);
  }
}

/* ============================================================================
 * 8.3 — Ligne LED orange (accent hero)
 *
 * <div class="led-line" aria-hidden="true"></div>
 *
 * A inserer dans un parent en position: relative (ex. .hero — sera fait
 * en story 9.1).
 * ========================================================================= */
.led-line {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(
    to right,
    transparent 0%,
    var(--color-orange-brique) 50%,
    transparent 100%
  );
  opacity: 0.6;
  box-shadow: 0 0 12px 1px var(--color-orange-brique);
  animation: led-pulse 4s ease-in-out infinite;
  pointer-events: none;
}

@keyframes led-pulse {
  0%,
  100% {
    opacity: 0.6;
  }
  50% {
    opacity: 0.9;
  }
}

@media (prefers-reduced-motion: reduce) {
  .led-line {
    animation: none;
    opacity: 0.6;
  }
}