/* ==========================================================================
   HOME — retouches ciblées (13/07/2026)
   1. Hero : image fixe + vidéo d'entraînement des chamoracers en CYCLE
      (une lecture, fondu vers l'image, pause — cf. cycle-video.js).
   2. Blocs : image de fond en parallax (background-attachment:fixed sur
      bureau ; sur mobile/tactile le fixed est buggué → défilement normal).
   3. Vignettes de faction cliquables vers leur chapitre de /les-factions.
   ========================================================================== */

/* ---------- le hero : la vidéo se fond sur l'image fixe ---------- */
.hero__image{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
.hero__video{opacity:0;transition:opacity .9s ease}
.hero__video.joue{opacity:1}

/* ---------- parallax de bloc ----------
   Chaque section .parallax reçoit son image via --fond (inline). Le voile
   sombre garantit la lisibilité du texte existant, pensé pour fond sombre. */
.parallax{position:relative;background-image:var(--fond);background-size:cover;
  background-position:center;background-attachment:fixed}
/* Voile léger : l'image doit se voir, le texte porte son propre contraste */
.parallax::before{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(11,7,4,.62),rgba(11,7,4,.42) 50%,rgba(11,7,4,.66))}
.parallax > .container{position:relative;z-index:1}
/* Un coup de pouce de lisibilité sur les textes posés sur image.
   ⚠ JAMAIS de text-shadow sur les titres or : leur texte est transparent
   (background-clip:text), l'ombre transparaît au travers et salit le
   dégradé — c'est titres.css qui gère leur relief (drop-shadow). */
.parallax .kicker{text-shadow:0 2px 10px rgba(0,0,0,.75)}
.parallax p{text-shadow:0 1px 6px rgba(0,0,0,.7)}

/* Tactile et petits écrans : le fixed est buggué (iOS), on défile normalement */
@media (max-width: 860px), (hover: none){
  .parallax{background-attachment:scroll}
}

/* ---------- cartes posées sur un fond parallax : fond sombre opaque ---------- */
.parallax .carte-chamo{background:rgba(18,11,4,.9);backdrop-filter:blur(2px);
  border-color:rgba(255,201,60,.28)}

/* ---------- les 3 vérités de l'écurie : cartes illustrées ---------- */
.carte-illustree{text-align:center}
.carte-illustree__img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:14px;
  margin-bottom:14px;box-shadow:0 8px 20px rgba(0,0,0,.4)}

/* ---------- vignettes de faction cliquables ---------- */
.faction-lien{display:block;color:inherit;text-decoration:none}
.faction-lien:hover,.faction-lien:focus{color:inherit;text-decoration:none}
.faction-lien .faction{transition:transform .18s ease,box-shadow .18s ease}
.faction-lien:hover .faction{transform:translateY(-5px);
  box-shadow:0 14px 30px rgba(0,0,0,.5),0 0 22px color-mix(in srgb,var(--faction,#ffc93c) 30%,transparent)}