/* Généré par construire.py : ne pas modifier à la main. */
/* ==========================================================================
   F1 memorabilia — thème « Paddock »
   Couche de style posée par-dessus Horizon (base.css), même principe que
   LuXe : chargée après les variables du thème, html:root pour la spécificité.
   Palette (reprise de motorsportcollectors.com) :
   Blanc #ffffff · Encre #111111 · Rouge course #a42325 · Rouge sombre #780406
   · Gris piste #f1f1f1 · Carbone #0b0b0c
   ========================================================================== */

html:root {
  color-scheme: dark;
  --f1-red: #a42325;
  --f1-red-dark: #780406;
  --f1-carbon: #0b0b0c;

  /* Ambiance « Carbone » (sombre), celle du premier affichage.
     L'ambiance « Blanc » redéfinit ces jetons plus bas ([data-theme='blanc']). */
  --f1-page: #0b0b0c;
  --f1-ink: #f2f2f2;
  --f1-muted: #9b9b9b;
  --f1-track: #161618;
  --f1-stone: #141416;
  --f1-line: rgb(255 255 255 / 0.12);
  --f1-frame: rgb(255 255 255 / 0.07);
  --f1-red-text: #e5484b;
  --f1-card-haut: #17171a;
  --f1-card-bas: #0f0f11;
  --f1-card-filet: rgb(255 255 255 / 0.08);
  --f1-projecteur: rgb(255 255 255 / 0.07);
  --f1-ombre: rgb(0 0 0 / 0.75);
  --font-serif: 'Cormorant Garamond', Georgia, serif;
  --f1-ease: cubic-bezier(0.22, 1, 0.36, 1);
  /* angle coupé des boutons et cartes, façon aileron */
  --f1-cut: 12px;
  /* damier, réutilisé par le drapeau et les bandeaux */
  --f1-checker: repeating-conic-gradient(#000 0 25%, #fff 0 50%) 0 0 / 12px 12px;
  /* tissage carbone pour les bandes sombres */
  --f1-weave:
    linear-gradient(45deg, rgb(255 255 255 / 0.035) 25%, transparent 25% 75%, rgb(255 255 255 / 0.035) 75%) 0 0 / 8px 8px,
    linear-gradient(45deg, rgb(255 255 255 / 0.035) 25%, transparent 25% 75%, rgb(255 255 255 / 0.035) 75%) 4px 4px / 8px 8px;

  --font-heading--family: 'Barlow Condensed', 'Inter', sans-serif;
  --font-heading--weight: 800;
  --font-accent--family: 'Barlow Condensed', 'Inter', sans-serif;
  --font-subheading--family: 'Barlow Condensed', 'Inter', sans-serif;
  --font-subheading--weight: 600;
  --font-body--family: 'Inter', sans-serif;
  --font-body--weight: 400;
}

html:root[data-theme='blanc'] {
  --f1-page: #ffffff;
  --f1-ink: #111111;
  --f1-muted: #6b6b6b;
  --f1-track: #f1f1f1;
  --f1-stone: #f4f3f1;
  --f1-line: #e6e6e6;
  --f1-frame: rgb(0 0 0 / 0.06);
  --f1-red-text: #a42325;
  --f1-card-haut: #ffffff;
  --f1-card-bas: #faf9f7;
  --f1-card-filet: #e9e6e1;
  --f1-projecteur: rgb(255 255 255 / 0.95);
  --f1-ombre: rgb(40 30 20 / 0.22);
  color-scheme: light;
}

body {
  background: var(--f1-page);
  color: var(--f1-ink);
  transition: background-color 0.6s var(--f1-ease), color 0.6s var(--f1-ease);
  -webkit-font-smoothing: antialiased;
}

::selection { background: var(--f1-red); color: #fff; }

/* ---------- Bandes sombres : tissage carbone ---------------------------- */
.color-scheme-3,
.color-scheme-5 {
  background-image: var(--f1-weave);
}

/* ---------- Typographie : condensée, capitales, légèrement penchée ------- */
h1, h2, h3, .h1, .h2, .h3 {
  font-family: var(--font-heading--family);
  text-transform: uppercase;
  letter-spacing: -0.01em;
  line-height: 0.95;
}

/* Taille raisonnable : les titres de pièces de collection sont longs.
   Le très grand titre est réservé à la section d'ouverture (f1-hero). */
h1, .h1 {
  font-size: clamp(2rem, 4vw, 3.25rem);
  font-style: italic;
  font-weight: 800;
}

/* Trait rouge sous les titres de section, comme une ligne de départ */
main h2:not(.product-card *, dialog *)::after {
  content: '';
  display: block;
  width: 56px;
  height: 4px;
  margin-top: 0.4em;
  background: var(--f1-red);
  transform: skewX(-20deg);
}

main [style*='text-align: center'] h2::after,
main .text-center h2::after { margin-inline: auto; }

p, li { line-height: 1.65; }

/* ---------- En-tête : noir, filet rouge dessous --------------------------- */
header-component {
  border-bottom: 3px solid var(--f1-red);
}

.header__menu-item,
.menu-list__link {
  font-family: var(--font-subheading--family);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  transition: color 0.25s var(--f1-ease);
}

.menu-list__link:hover,
.header__menu-item:hover { color: #ff4d50; }

/* ---------- Boutons : biseautés, reflet au survol ----------------------
   Seuls les boutons pleins sont biseautés : sur un contour fin, le biseau
   ferait disparaître les bords. Les boutons d'icône (fermer, quantité,
   diaporama) gardent leur forme d'origine. */
.button:not(.button-secondary, .button-unstyled, .close-button, .slideshow-control),
.shopify-payment-button__button--unbranded {
  position: relative;
  font-family: var(--font-subheading--family);
  font-weight: 700;
  font-size: 1.05rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  clip-path: polygon(var(--f1-cut) 0, 100% 0, calc(100% - var(--f1-cut)) 100%, 0 100%);
  padding-inline: 2.2em;
  overflow: hidden;
  isolation: isolate;
  transition: transform 0.3s var(--f1-ease), background-color 0.25s, color 0.25s;
}

/* le biseau couperait le contour de focus clavier : on le retire au focus */
.button:focus-visible,
.shopify-payment-button__button--unbranded:focus-visible { clip-path: none; }

.button-secondary:not(.button-unstyled, .slideshow-control) {
  font-family: var(--font-subheading--family);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

/* reflet qui traverse le bouton au survol */
.button:not(.button-secondary, .button-unstyled, .close-button, .slideshow-control)::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(100deg, transparent 30%, rgb(255 255 255 / 0.28) 50%, transparent 70%);
  transform: translateX(-120%);
  transition: transform 0.6s var(--f1-ease);
  pointer-events: none;
}

.button:not(.button-secondary, .button-unstyled, .close-button, .slideshow-control):hover::after { transform: translateX(120%); }
.button:not(.button-unstyled, .close-button, .slideshow-control):hover { transform: translateX(3px); }

/* ---------- Cartes produit : catalogue de vente ---------------------------
   Chaque pièce est présentée comme un lot de vente aux enchères : cadre fin,
   coins rouges qui se déploient au survol, éclairage de vitrine sur la photo,
   reflet de verre, numéro de lot et prix en lettres à empattements. */
product-card {
  display: block;
  position: relative;
  padding: 12px 12px 20px;
  background: linear-gradient(180deg, var(--f1-card-haut), var(--f1-card-bas));
  border: 1px solid var(--f1-card-filet);
  transition: transform 0.9s var(--f1-ease), box-shadow 0.9s var(--f1-ease), border-color 0.6s var(--f1-ease);
}

/* coins de vitrine : quatre équerres rouges qui s'allongent au survol */
product-card::before {
  content: '';
  position: absolute;
  inset: -1px;
  z-index: 2;
  pointer-events: none;
  --c: 14px;
  background:
    linear-gradient(var(--f1-red), var(--f1-red)) top left / var(--c) 1px no-repeat,
    linear-gradient(var(--f1-red), var(--f1-red)) top left / 1px var(--c) no-repeat,
    linear-gradient(var(--f1-red), var(--f1-red)) top right / var(--c) 1px no-repeat,
    linear-gradient(var(--f1-red), var(--f1-red)) top right / 1px var(--c) no-repeat,
    linear-gradient(var(--f1-red), var(--f1-red)) bottom left / var(--c) 1px no-repeat,
    linear-gradient(var(--f1-red), var(--f1-red)) bottom left / 1px var(--c) no-repeat,
    linear-gradient(var(--f1-red), var(--f1-red)) bottom right / var(--c) 1px no-repeat,
    linear-gradient(var(--f1-red), var(--f1-red)) bottom right / 1px var(--c) no-repeat;
  opacity: 0.55;
  transition: opacity 0.6s var(--f1-ease), background-size 0.8s var(--f1-ease);
}

product-card:hover {
  transform: translateY(-8px);
  border-color: transparent;
  box-shadow: 0 50px 70px -45px var(--f1-ombre);
}

product-card:hover::before {
  opacity: 1;
  background-size:
    40px 1px, 1px 40px, 40px 1px, 1px 40px,
    40px 1px, 1px 40px, 40px 1px, 1px 40px;
}

/* Photo : éclairée par le haut comme dans une vitrine */
.product-card .card-gallery,
.card-gallery {
  position: relative;
  background:
    radial-gradient(120% 70% at 50% 0%, var(--f1-projecteur), transparent 70%),
    var(--f1-stone);
  overflow: hidden;
}

/* passe-partout très fin */
.card-gallery::after {
  content: '';
  position: absolute;
  inset: 10px;
  border: 1px solid var(--f1-frame);
  pointer-events: none;
  transition: inset 0.9s var(--f1-ease), border-color 0.9s;
}

product-card:hover .card-gallery::after {
  inset: 16px;
  border-color: rgb(164 35 37 / 0.4);
}

/* reflet de verre qui traverse la photo une fois au survol */
.card-gallery::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(115deg, transparent 35%, rgb(255 255 255 / 0.16) 48%, rgb(255 255 255 / 0.04) 54%, transparent 62%);
  transform: translateX(-120%);
}

product-card:hover .card-gallery::before {
  transform: translateX(120%);
  transition: transform 1.4s var(--f1-ease);
}

.product-card img,
.card-gallery img { transition: transform 1.6s var(--f1-ease), opacity 0.8s var(--f1-ease); }

product-card:hover .card-gallery img { transform: scale(1.045); }

.product-card__content {
  position: relative;
  padding: 1.15rem 0.35rem 0;
}

/* filet rouge qui se trace sous la photo au survol */
.product-card__content::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0.35rem;
  right: 0.35rem;
  height: 1px;
  background: var(--f1-red);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.9s var(--f1-ease);
}

product-card:hover .product-card__content::before { transform: scaleX(1); }

.product-card .product-title,
.product-card__content a {
  font-family: var(--font-subheading--family);
  font-weight: 600;
  font-size: 1.02rem;
  line-height: 1.25;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--f1-ink);
  text-decoration: none;
}

/* Prix : affirmé sur la fiche produit, en lettres à empattements sur les cartes */
.price,
product-price {
  font-family: var(--font-heading--family);
  font-weight: 700;
  font-size: 1.15em;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.01em;
}

product-card .price {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: 1.3rem;
  letter-spacing: 0.01em;
  color: var(--f1-ink);
}

/* Badges : petite étiquette de musée */
.product-badges__badge {
  font-family: var(--font-subheading--family);
  font-weight: 600;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.16em;
}

@media (max-width: 749px) {
  product-card { padding: 8px 8px 14px; }
  product-card .price { font-size: 1.12rem; }
}

/* ---------- Animations d'apparition --------------------------------------
   f1-paddock.js pose .f1-reveal sur les éléments à animer, puis .is-in
   quand ils arrivent à l'écran. Sans JavaScript, rien n'est caché. */
.f1-reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 1.1s var(--f1-ease), transform 1.1s var(--f1-ease);
  transition-delay: var(--f1-delay, 0s);
}

.f1-reveal.is-in { opacity: 1; transform: none; }

/* Rideau : la photo se dévoile de bas en haut */
.f1-reveal .card-gallery,
.f1-curtain {
  clip-path: inset(100% 0 0 0);
  transition: clip-path 1.3s var(--f1-ease);
  transition-delay: calc(var(--f1-delay, 0s) + 0.1s);
}

.f1-reveal.is-in .card-gallery,
.f1-curtain.is-in { clip-path: inset(0 0 0 0); }

/* Titres : montent derrière un cache */
.f1-rise {
  display: block;
  overflow: hidden;
}

.f1-rise > span {
  display: inline-block;
  transform: translateY(105%);
  transition: transform 1.1s var(--f1-ease);
  transition-delay: var(--f1-delay, 0s);
}

.f1-rise.is-in > span { transform: none; }

/* Le trait rouge sous les titres se trace après le titre */
main h2:not(.product-card *, dialog *).f1-rise::after {
  transform: skewX(-20deg) scaleX(0);
  transform-origin: left;
  transition: transform 0.9s var(--f1-ease) 0.45s;
}

main h2.f1-rise.is-in::after { transform: skewX(-20deg) scaleX(1); }

/* ---------- Menu : soulignement qui glisse ------------------------------ */
.header__menu-item,
.menu-list__link {
  background-image: linear-gradient(var(--f1-red), var(--f1-red));
  background-repeat: no-repeat;
  background-position: 100% 100%;
  background-size: 0 2px;
  padding-bottom: 4px;
  transition: color 0.25s var(--f1-ease), background-size 0.5s var(--f1-ease);
}

.header__menu-item:hover,
.menu-list__link:hover,
.header__menu-item[aria-current='page'] {
  background-position: 0 100%;
  background-size: 100% 2px;
}

/* En-tête qui s'affine au défilement (classe posée par f1-paddock.js) */
header-component {
  transition: box-shadow 0.5s var(--f1-ease), background-color 0.5s;
}

html.f1-scrolled header-component { box-shadow: 0 10px 40px -20px rgb(0 0 0 / 0.6); }

/* ---------- Hero Horizon : fondu vers le blanc ---------------------------- */
.hero { position: relative; }

@media (prefers-reduced-motion: no-preference) {
  .hero__content-wrapper > * {
    opacity: 0;
    transform: translateX(-40px);
    animation: f1-launch 0.9s var(--f1-ease) forwards;
  }
  .hero__content-wrapper > *:nth-child(2) { animation-delay: 0.12s; }
  .hero__content-wrapper > *:nth-child(3) { animation-delay: 0.24s; }
  .hero__content-wrapper > *:nth-child(4) { animation-delay: 0.36s; }
}

@keyframes f1-launch {
  to { opacity: 1; transform: none; }
}

/* ---------- Bouton d'ambiance : un clic = Carbone <-> Blanc --------------- */
.f1-ambiance__bouton {
  position: relative;
  flex: none;
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 1px solid rgb(255 255 255 / 0.22);
  border-radius: 50%;
  background: transparent;
  color: currentColor;
  cursor: pointer;
  overflow: hidden;
  transition: border-color 0.3s var(--f1-ease), color 0.3s var(--f1-ease);
}

.f1-ambiance__bouton:hover { border-color: var(--f1-red); color: #ff4d50; }

/* soleil en Carbone (pour passer au clair), lune en Blanc ; ils tournent en se croisant */
.f1-ambiance__bouton svg {
  grid-area: 1 / 1;
  width: 19px;
  height: 19px;
  transition: transform 0.6s var(--f1-ease), opacity 0.4s var(--f1-ease);
}

.f1-ambiance__lune { opacity: 0; transform: rotate(-90deg) scale(0.5); }
[data-theme='blanc'] .f1-ambiance__soleil { opacity: 0; transform: rotate(90deg) scale(0.5); }
[data-theme='blanc'] .f1-ambiance__lune { opacity: 1; transform: none; }

/* Changement d'ambiance : tout glisse en douceur vers les nouvelles couleurs */
html.f1-bascule *,
html.f1-bascule *::before,
html.f1-bascule *::after {
  transition: background-color 0.6s var(--f1-ease), color 0.6s var(--f1-ease), border-color 0.6s var(--f1-ease) !important;
}

/* ---------- Champs ------------------------------------------------------- */
input:focus-visible, textarea:focus-visible, select:focus-visible,
a:focus-visible, button:focus-visible {
  outline: 2px solid var(--f1-red);
  outline-offset: 3px;
}

dialog::backdrop { background: rgb(0 0 0 / 0.6); }

/* ---------- Pied de page rouge : drapeau à damier au-dessus -------------- */
.footer, footer {
  position: relative;
}

footer::before {
  content: '';
  display: block;
  height: 12px;
  background: var(--f1-checker);
}

/* ---------- Bandeau défilant : capitales penchées ----------------------- */
.marquee__content {
  font-family: var(--font-heading--family);
  font-weight: 800;
  font-style: italic;
  text-transform: uppercase;
}

/* ---------- Barre de défilement ----------------------------------------- */
html { scrollbar-color: var(--f1-red) var(--f1-track); scrollbar-width: thin; }

/* ---------- Mouvement réduit ------------------------------------------- */
/* Avec « réduire les animations », on garde des fondus doux mais aucun
   mouvement : le contenu apparaît sans glisser ni zoomer. */
@media (prefers-reduced-motion: reduce) {
  product-card img, .button, .button::after { transition: none; }
  .button:hover, product-card:hover, product-card:hover .card-gallery img { transform: none; }
  product-card:hover .card-gallery::before { transform: translateX(-120%); transition: none; }
  .f1-reveal { transform: none; transition: opacity 0.8s ease; }
  .f1-reveal .card-gallery, .f1-curtain { clip-path: none; transition: none; }
  .f1-rise > span { transform: none; transition: none; }
}

/* ---------- Mobile ------------------------------------------------------ */
@media (max-width: 749px) {
  .card-gallery::after { inset: 6px; }
  product-card:hover { transform: none; }
  .button:not(.button-secondary, .button-unstyled, .close-button, .slideshow-control) { padding-inline: 1.6em; }
}


  .f1-hero {
    position: relative;
    overflow: hidden;
    /* passe sous l'en-tête transparent de la page d'accueil */
    padding-block: calc(var(--header-height, 80px) + 48px) 72px;
    background-color: var(--f1-carbon, #0b0b0c);
    color: #fff;
  }

  /* vidéo de fond, assombrie pour garder le texte lisible */
  .f1-hero__video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.38;
    z-index: 0;
  }

  .f1-hero::before {
    /* lueur rouge, comme les feux arrière sous la pluie */
    content: '';
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background:
      radial-gradient(50vmax 30vmax at 85% 30%, rgb(164 35 37 / 0.45), transparent 65%),
      linear-gradient(115deg, transparent 55%, rgb(164 35 37 / 0.9) 55.2%, rgb(164 35 37 / 0.9) 58%, transparent 58.2%);
    opacity: 0.85;
  }

  .f1-hero__inner {
    position: relative;
    z-index: 2;
    display: grid;
    gap: 48px;
    align-items: center;
  }

  @media screen and (min-width: 990px) {
    .f1-hero__inner { grid-template-columns: 1.15fr 1fr; }
  }

  .f1-hero__kicker {
    margin: 0 0 18px;
    display: inline-block;
    padding: 6px 14px;
    background: var(--f1-red, #a42325);
    font-family: var(--font-subheading--family);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    font-size: 0.85rem;
    transform: skewX(-12deg);
  }

  .f1-hero__title {
    margin: 0;
    color: #fff;
    font-size: clamp(2.8rem, 8vw, 7rem);
  }

  .f1-hero__title span {
    display: block;
    color: transparent;
    -webkit-text-stroke: 2px #fff;
  }

  .f1-hero__text {
    max-width: 46ch;
    margin-top: 22px;
    color: rgb(255 255 255 / 0.78);
    font-size: 1.08rem;
  }

  .f1-hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin-top: 32px;
  }

  .f1-hero__visual {
    position: relative;
    aspect-ratio: 4 / 3;
    display: grid;
    place-items: center;
    background: rgb(255 255 255 / 0.04);
    border: 1px solid rgb(255 255 255 / 0.12);
    clip-path: polygon(0 0, calc(100% - 40px) 0, 100% 40px, 100% 100%, 40px 100%, 0 calc(100% - 40px));
  }

  .f1-hero__image {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .f1-hero__caption {
    position: absolute;
    left: 0;
    bottom: 0;
    margin: 0;
    padding: 10px 18px 10px 52px;
    background: #fff;
    color: #000;
    font-family: var(--font-subheading--family);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-size: 0.85rem;
  }

  /* Feux de départ : s'allument un par un, puis s'éteignent ensemble */
  .f1-hero__lights {
    display: flex;
    gap: clamp(10px, 2vw, 22px);
    padding: 22px 26px;
    background: #050505;
    border-radius: 14px;
    box-shadow: 0 30px 60px -20px rgb(0 0 0 / 0.8);
  }

  .f1-hero__lights span {
    width: clamp(34px, 5vw, 58px);
    aspect-ratio: 1;
    border-radius: 50%;
    background: #2a0a0b;
    box-shadow: inset 0 0 0 3px #1a1a1a;
    animation-duration: 5s;
    animation-iteration-count: infinite;
    animation-timing-function: steps(1, end);
  }

  .f1-hero__lights span:nth-child(1) { animation-name: f1-light-1; }
  .f1-hero__lights span:nth-child(2) { animation-name: f1-light-2; }
  .f1-hero__lights span:nth-child(3) { animation-name: f1-light-3; }
  .f1-hero__lights span:nth-child(4) { animation-name: f1-light-4; }
  .f1-hero__lights span:nth-child(5) { animation-name: f1-light-5; }

  /* le feu n s'allume à n × 12 % du cycle ; tous s'éteignent ensemble à 72 % */
  @keyframes f1-light-1 { 0%, 1%, 72%, 100% { background: #2a0a0b; box-shadow: inset 0 0 0 3px #1a1a1a; } 2%, 71% { background: #ff2a2d; box-shadow: 0 0 28px #ff2a2d; } }
  @keyframes f1-light-2 { 0%, 13%, 72%, 100% { background: #2a0a0b; box-shadow: inset 0 0 0 3px #1a1a1a; } 14%, 71% { background: #ff2a2d; box-shadow: 0 0 28px #ff2a2d; } }
  @keyframes f1-light-3 { 0%, 25%, 72%, 100% { background: #2a0a0b; box-shadow: inset 0 0 0 3px #1a1a1a; } 26%, 71% { background: #ff2a2d; box-shadow: 0 0 28px #ff2a2d; } }
  @keyframes f1-light-4 { 0%, 37%, 72%, 100% { background: #2a0a0b; box-shadow: inset 0 0 0 3px #1a1a1a; } 38%, 71% { background: #ff2a2d; box-shadow: 0 0 28px #ff2a2d; } }
  @keyframes f1-light-5 { 0%, 49%, 72%, 100% { background: #2a0a0b; box-shadow: inset 0 0 0 3px #1a1a1a; } 50%, 71% { background: #ff2a2d; box-shadow: 0 0 28px #ff2a2d; } }

  /* Lignes de vitesse qui traversent le fond */
  .f1-hero__speed span {
    position: absolute;
    left: -30%;
    height: 2px;
    width: 30%;
    background: linear-gradient(90deg, transparent, rgb(255 255 255 / 0.5));
    animation: f1-speed 2.8s linear infinite;
  }

  .f1-hero__speed span:nth-child(1) { top: 18%; animation-delay: 0s; }
  .f1-hero__speed span:nth-child(2) { top: 37%; animation-delay: 1.1s; width: 18%; }
  .f1-hero__speed span:nth-child(3) { top: 58%; animation-delay: 0.5s; }
  .f1-hero__speed span:nth-child(4) { top: 74%; animation-delay: 1.8s; width: 22%; }
  .f1-hero__speed span:nth-child(5) { top: 88%; animation-delay: 2.3s; }

  @keyframes f1-speed {
    to { transform: translateX(450%); }
  }

  .f1-hero__flag {
    position: absolute;
    z-index: 2;
    left: 0;
    right: 0;
    bottom: 0;
    height: 14px;
    background: var(--f1-checker);
  }

  /* Entrée en scène, une seule fois au chargement :
     étiquette qui glisse, titre qui monte derrière un cache, texte et boutons
     en fondu, photo qui se pose en dézoomant. */
  @media (prefers-reduced-motion: no-preference) {
    .f1-hero__kicker { animation: f1-hero-glisse 0.9s var(--f1-ease) 0.1s both; }
    .f1-hero__title { animation: f1-hero-cache 1.2s var(--f1-ease) 0.2s both; }
    .f1-hero__title span { animation: f1-hero-cache 1.2s var(--f1-ease) 0.38s both; }
    .f1-hero__text { animation: f1-hero-fondu 1s var(--f1-ease) 0.6s both; }
    .f1-hero__actions { animation: f1-hero-fondu 1s var(--f1-ease) 0.75s both; }
    .f1-hero__visual > * { animation: f1-hero-pose 1.8s var(--f1-ease) 0.3s both; }
    .f1-hero__video { animation: f1-hero-apparait 2.4s ease both; }
  }

  @keyframes f1-hero-glisse { from { opacity: 0; transform: translateX(-30px) skewX(-12deg); } }
  @keyframes f1-hero-cache { from { clip-path: inset(0 0 100% 0); transform: translateY(40px); } to { clip-path: inset(0 0 -10% 0); } }
  @keyframes f1-hero-fondu { from { opacity: 0; transform: translateY(16px); } }
  @keyframes f1-hero-apparait { from { opacity: 0; } }
  @keyframes f1-hero-pose { from { opacity: 0; transform: scale(1.12); } }

  @media (prefers-reduced-motion: reduce) {
    .f1-hero__speed { display: none; }
    .f1-hero__video { display: none; }
    .f1-hero__lights span { animation: none; background: #ff2a2d; }
  }


  .f1-provenance {
    border: 1px solid var(--f1-line, #e6e6e6);
    border-left: 4px solid var(--f1-red, #a42325);
    padding: 16px 18px;
    background: var(--f1-track, #f1f1f1);
  }

  .f1-provenance__title {
    margin: 0 0 12px;
    font-family: var(--font-subheading--family);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    font-size: 0.85rem;
    color: var(--f1-red-text, #a42325);
  }

  .f1-provenance__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
    gap: 12px 20px;
    margin: 0;
  }

  .f1-provenance__grid dt {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    opacity: 0.6;
  }

  .f1-provenance__grid dd {
    margin: 2px 0 0;
    font-family: var(--font-heading--family);
    font-weight: 700;
    font-size: 1.15rem;
    text-transform: uppercase;
  }

  .f1-provenance__certificate {
    display: inline-block;
    margin-top: 14px;
    font-weight: 600;
    color: var(--f1-red-text, #a42325);
    text-underline-offset: 3px;
  }


  .f1-videos {
    padding-block: 64px;
    background-image: var(--f1-weave);
  }

  .f1-videos__titre { margin: 0 0 12px; }

  /* Sur la page Paddock : grille qui passe à la ligne au lieu d'un rail */
  .f1-videos--page {
    min-height: 70vh;
  }

  .f1-videos--page .f1-videos__rail {
    grid-auto-flow: row;
    overflow: visible;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr));
  }

  .f1-videos__texte {
    max-width: 60ch;
    margin-bottom: 28px;
    opacity: 0.8;
  }

  .f1-videos__rail {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: clamp(220px, 26vw, 300px);
    gap: 16px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding-bottom: 8px;
  }

  .f1-videos__carte {
    margin: 0;
    scroll-snap-align: start;
    min-width: 0;
  }

  .f1-videos__media {
    display: block;
    width: 100%;
    aspect-ratio: 9 / 16;
    object-fit: cover;
    background: #000;
    cursor: pointer;
    clip-path: polygon(0 0, calc(100% - 22px) 0, 100% 22px, 100% 100%, 0 100%);
  }

  .f1-videos__vide svg { width: 100%; height: 100%; opacity: 0.3; }

  .f1-videos__carte figcaption {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding-top: 10px;
    font-family: var(--font-subheading--family);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
  }

  .f1-videos__carte figcaption a {
    color: #ff4d50;
    white-space: nowrap;
  }