/* =====================================================
   CERT — css/livery-v6.css  "Livery · White Edition"
   À charger APRÈS style.css. Ne touche pas aux autres pages.
   Rythme : blanc / noir en alternance, l'accent n'est JAMAIS
   du texte sur blanc (toujours un aplat), les barres structurent.
   ===================================================== */

/* ── 1. Rythme des sections : hero (blanc+sol noir) → EXPLOITS BLANC → COURSES NOIR → footer blanc ── */
#nos-exploits {
  --bg: var(--white); --fg: var(--ink);
  --muted: rgba(31,29,30,.55); --line: rgba(31,29,30,.14);
  --card: #fff; --card-2: #ececec;
  background: var(--white); color: var(--ink);
  position: relative; overflow: hidden;
}
#nos-exploits > *:not(.bar-field) { position: relative; z-index: 1; }

#last-races {
  --bg: var(--ink); --fg: var(--white);
  --muted: rgba(241,241,241,.5); --line: rgba(241,241,241,.14);
  --card: #2a2829; --card-2: #252324;
  --silver: #c0c0c0; --bronze: #cd7f32;
  background: var(--ink); color: var(--white);
}

/* ── 2. Barres : bande pleine accent entre les sections ── */
.bar-strip.band { background: var(--accent); --bar: var(--ink); height: 30px; }
.bar-strip.band::before { -webkit-mask-image: none; mask-image: none; animation-duration: 2.2s; }

/* champ de barres décoratif (fond de section) */
.bar-field {
  position: absolute; inset: 0 -80px 0 auto; width: 46%;
  transform: skewX(var(--bar-skew));
  background: repeating-linear-gradient(90deg, var(--ink) 0 18px, transparent 18px 54px);
  opacity: .07; pointer-events: none;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 70%);
          mask-image: linear-gradient(90deg, transparent, #000 70%);
}

/* ticker "BUILT TO RACE" */
.ticker { background: var(--accent); color: var(--accent-ink); overflow: hidden; }
.ticker-track { display: flex; width: max-content; animation: tick 30s linear infinite; }
.ticker-track span {
  display: flex; align-items: center; gap: 96px;
  padding: 12px 48px 12px 0; white-space: nowrap;
  font-family: var(--font); font-weight: 900; text-transform: uppercase;
  font-size: clamp(30px, 4.4vw, 58px); line-height: 1; letter-spacing: 2px;
}
.ticker-track span::after {
  content: ''; width: 12px; height: .75em; background: currentColor;
  transform: skewX(var(--bar-skew));
  box-shadow: 22px 0 0 currentColor, 44px 0 0 currentColor, 66px 0 0 currentColor;
  margin-right: 66px;
}
@keyframes tick { to { transform: translateX(-50%); } }

/* ── 3. Exploits sur blanc : chiffres noirs, accent en aplat ── */
.exploits-title span {
  background: var(--accent); color: var(--accent-ink);
  padding: 0 .14em 0 .08em; clip-path: polygon(5% 0, 100% 0, 95% 100%, 0 100%);
}
.exploits-grid { background: var(--ink); border: 1.5px solid var(--ink); gap: 1.5px; }
.exploit-item { background: var(--white); }
.exploit-item:hover { background: var(--white); }
.exploit-item::before { opacity: 1; height: 10px; background: repeating-linear-gradient(115deg, var(--ink) 0 8px, transparent 8px 14px); }
.exploit-item:hover::before { background: repeating-linear-gradient(115deg, var(--accent) 0 8px, transparent 8px 14px); }
.exploit-label { color: rgba(31,29,30,.6); }
.exploit-val { color: var(--ink); align-self: flex-start; transition: background .25s, color .25s; padding-right: .06em; }
.exploit-item:hover .exploit-val, .exploit-val.highlighted {
  color: var(--accent-ink); background: var(--accent);
  clip-path: polygon(0 0, 100% 0, calc(100% - 8px) 100%, 0 100%); padding-right: .12em;
}
.exploit-item::after { color: rgba(31,29,30,.045); }
#nos-exploits .btn-cta { border-color: var(--ink); }
#nos-exploits .btn-cta:hover { box-shadow: 5px 5px 0 var(--ink); }

/* ── 4. Courses sur noir ── */
.race-card { border-color: rgba(241,241,241,.2); }
.race-card::before { border-bottom-color: rgba(241,241,241,.2); }
.race-card:hover { box-shadow: 6px 6px 0 var(--accent); }
.race-card.pos-other { --rc: rgba(241,241,241,.28); }
.slot-pos { color: rgba(241,241,241,.35); }
#last-races .btn-cta { border-color: var(--white); }
#last-races .btn-cta:hover { box-shadow: 5px 5px 0 var(--white); }

/* ── 5. Hero : barres plus présentes, dégradé de vitesse ── */
.hero-bars { height: 84px; width: 46vw; }
.hero-bars::before {
  background: repeating-linear-gradient(90deg, var(--ink) 0 10px, transparent 10px 26px);
}

@media (prefers-reduced-motion: reduce) { .ticker-track { animation: none; } }

/* ── 6. Hero VIDÉO plein écran (autoplay, sans clic) ── */
#scroll-wrapper { height: auto; }
#hero {
  position: relative; height: 100vh; min-height: 560px; overflow: hidden;
  display: block; padding: 0; background: var(--ink);
}
.hero-glow { display: none; }

.hero-video { position: absolute; inset: 0; z-index: 0; background: var(--ink); }
.hv-media {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; opacity: 0; transition: opacity .6s;
}
.hero-video.ready .hv-media { opacity: 1; }
.hv-placeholder {                       /* visible tant que la vidéo n'existe pas */
  position: absolute; inset: 0; overflow: hidden;
  background: radial-gradient(ellipse at 70% 40%, rgba(241,241,241,.1), transparent 60%), var(--ink);
  transition: opacity .6s;
}
.hv-placeholder::before {
  content: ''; position: absolute; inset: 0 -80px; transform: skewX(var(--bar-skew));
  background: repeating-linear-gradient(90deg, rgba(241,241,241,.07) 0 20px, transparent 20px 64px);
  animation: barsDrift 2.4s linear infinite;
  -webkit-mask-image: linear-gradient(90deg, transparent 10%, #000 90%);
          mask-image: linear-gradient(90deg, transparent 10%, #000 90%);
}
.hero-video.ready .hv-placeholder { opacity: 0; }
.hv-tag {
  position: absolute; top: 96px; left: 48px; z-index: 1;
  font-family: var(--font); font-weight: 700; font-size: 11px; letter-spacing: 5px;
  text-transform: uppercase; color: rgba(241,241,241,.55);
  border: 1px solid rgba(241,241,241,.25); padding: 7px 14px;
}
.hero-shade {                           /* lisibilité du titre sur n'importe quelle vidéo */
  position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(0deg, rgba(31,29,30,.82) 0%, rgba(31,29,30,.35) 38%, transparent 65%),
    linear-gradient(180deg, rgba(31,29,30,.35) 0%, transparent 22%);
}

.hero-bars { z-index: 2; --bar: rgba(241,241,241,.5); height: 84px; width: 46vw; }
.hero-headline { position: absolute; z-index: 2; top: auto; bottom: 9vh; left: 48px; }
.hero-eyebrow { color: var(--white); }
.hero-title .line { font-size: clamp(72px, 12vw, 180px); }
.hero-title .line-1, .hero-title .line-3 { color: var(--white); mix-blend-mode: normal; }
.scroll-indicator { z-index: 3; }
.scroll-label { color: rgba(241,241,241,.7); }

@media (max-width: 700px) {
  .hero-headline { left: 20px; bottom: 7vh; }
  .hv-tag { left: 20px; top: 84px; }
  .scroll-indicator { display: none; }
}