/* ==========================================================================
   LES FACTIONS — V2 SCROLL-STORYTELLING (essai, 13/07/2026)
   Un chapitre plein écran par faction. La scène reste épinglée (sticky)
   pendant que le contenu se révèle au scroll (GSAP, cf. factions-v2.js).
   Sans JS : tout est visible, la page se lit comme une page normale.
   --f = la couleur de la faction (variables posées dans le template).
   ========================================================================== */

.fv2{background:#0b0704;color:#fff6e0;overflow-x:clip}
.fv2 h1,.fv2 h2,.fv2 h3{font-family:'Luckiest Guy',cursive;font-weight:400;letter-spacing:.5px}
/* Tap mobile : rgba(0,0,0,0) plutôt que `transparent` (ignoré sur certains
   navigateurs), et touch-action:manipulation contre le délai du double-tap */
.fv2 a,.fv2 button{-webkit-tap-highlight-color:rgba(0,0,0,0);touch-action:manipulation}

.fv2-kicker{font-size:13px;letter-spacing:3px;text-transform:uppercase;color:#ffc93c;font-weight:600}
.fv2-fond{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;
  transform-origin:center}
.fv2-voile{position:absolute;inset:0;z-index:1;
  background:linear-gradient(180deg,rgba(11,7,4,.72) 0%,rgba(11,7,4,.28) 38%,rgba(11,7,4,.55) 72%,rgba(11,7,4,.95) 100%)}

/* ---------- les points de progression, à droite ---------- */
.fv2-points{position:fixed;right:18px;top:50%;translate:0 -50%;z-index:50;
  display:flex;flex-direction:column;gap:10px}
.fv2-points a{width:10px;height:10px;border-radius:50%;background:rgba(255,246,224,.25);
  border:1px solid rgba(255,246,224,.35);transition:all .25s}
.fv2-points a.on{background:var(--f);box-shadow:0 0 10px var(--f);height:22px;border-radius:6px}

/* ---------- cycle vidéo (générique) ----------
   Une vidéo .fv2-cycle ou .fv2-arene-video se fond sur l'image fixe posée
   dessous : une lecture, un fondu retour, une pause (cycleVideo, JS). */
.fv2-cycle,.fv2-arene-video{opacity:0;transition:opacity .8s ease}
.fv2-cycle.joue,.fv2-arene-video.joue{opacity:1}

/* ---------- le hero ---------- */
.fv2-hero{position:relative;height:100vh;display:grid;place-items:center;overflow:hidden}
.fv2-hero-contenu{position:relative;z-index:2;text-align:center;padding:0 20px;max-width:820px}
.fv2-hero h1{font-size:clamp(38px,6.5vw,84px);color:#fff6e0;
  text-shadow:0 4px 0 rgba(40,20,0,.85),0 8px 30px rgba(0,0,0,.6);margin:10px 0 16px}
.fv2-intro{font-size:clamp(15px,1.6vw,19px);line-height:1.55;color:rgba(255,246,224,.9)}
.fv2-hint{margin-top:34px;font-size:12px;letter-spacing:2.5px;text-transform:uppercase;
  color:rgba(255,246,224,.65)}
.fv2-hint span{display:block;margin-top:6px;animation:fv2Rebond 1.6s ease-in-out infinite}
@keyframes fv2Rebond{0%,100%{transform:translateY(0)}50%{transform:translateY(7px)}}

/* ---------- un chapitre = 2 phases épinglées : la faction, puis son écurie ---------- */
.fv2-chapitre{position:relative;height:320vh}
.fv2-scene{position:sticky;top:0;height:100vh;overflow:hidden;display:flex;align-items:flex-end}

/* La vidéo d'arène : couchée sous le voile, jouée en cycle à la phase 2 */
.fv2-arene-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
/* La pose fixe des boss : fond de la phase 2 (révélée par la timeline sur
   bureau, statique sur mobile) — la vidéo se fond par-dessus */
.fv2-fond-boss{opacity:0;transition:opacity .5s ease}

/* Chapitre "simple" (home) : une seule phase, pas d'épinglage long */
.fv2-chapitre--simple{height:auto;min-height:100vh}
.fv2-chapitre--simple .fv2-scene{position:relative;height:auto;min-height:100vh}
.fv2-chapitre--simple .fv2-phase1{position:relative;z-index:2;min-height:100vh;
  display:flex;flex-direction:column;justify-content:flex-end;padding-top:13vh}

/* Variantes de grille et briques de la home */
.fv2-grille--3{grid-template-columns:repeat(3,1fr)}
.fv2-bullet{display:flex;gap:9px;margin-top:9px;font-size:12.5px;line-height:1.45;
  color:rgba(255,246,224,.85)}
.fv2-bullet .fb-ico{font-size:19px;line-height:1.2;flex-shrink:0}
.fv2-bullet b{color:var(--f,#ffc93c)}
.fv2-badge{display:inline-block;margin-top:10px;font-size:10px;letter-spacing:1.5px;
  text-transform:uppercase;font-weight:900;color:#1a1004;background:var(--f,#ffc93c);
  border-radius:8px;padding:3px 10px}
.fv2-logo{width:min(74%,420px);filter:drop-shadow(0 6px 18px rgba(0,0,0,.7));margin:8px 0 12px}
.fv2-hero-ctas{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:18px}
.fv2-plateformes{margin-top:16px;font-size:11px;letter-spacing:2px;text-transform:uppercase;
  color:rgba(255,246,224,.55)}

/* le numéro d'étape, en filigrane géant */
.fv2-num{position:absolute;top:2vh;right:-1vw;z-index:1;font-family:'Luckiest Guy',cursive;
  font-size:clamp(160px,34vh,340px);line-height:1;color:transparent;
  -webkit-text-stroke:2px color-mix(in srgb,var(--f) 65%,transparent);
  opacity:.55;pointer-events:none;user-select:none}

.fv2-contenu{position:relative;z-index:2;width:min(1180px,100%);margin:0 auto;
  padding:0 22px 5vh}
.fv2-arene{font-size:12px;letter-spacing:2.5px;text-transform:uppercase;
  color:rgba(255,246,224,.75);margin-bottom:2px}
.fv2-arene b{color:var(--f)}
.fv2-nom{font-size:clamp(34px,5vw,64px);color:var(--f);
  text-shadow:0 3px 0 rgba(0,0,0,.6),0 0 34px rgba(0,0,0,.9);margin:0 0 4px}
.fv2-tagline{font-style:italic;font-size:clamp(14px,1.5vw,17px);color:rgba(255,246,224,.85);
  margin-bottom:18px}

.fv2-grille{display:grid;grid-template-columns:1.15fr 1fr;gap:16px;align-items:stretch}
.fv2-carte{background:rgba(12,7,3,.72);border:1px solid rgba(255,246,224,.14);
  border-radius:16px;padding:18px 20px;backdrop-filter:blur(4px)}
.fv2-texte{line-height:1.6;color:rgba(255,246,224,.92)}
.fv2-combine{margin-top:12px;padding:10px 12px;border-left:3px solid var(--f);
  background:rgba(0,0,0,.35);border-radius:0 10px 10px 0;line-height:1.5}
.fv2-combine b,.fv2-event b{display:block;font-size:11px;letter-spacing:2px;
  text-transform:uppercase;color:var(--f);margin-bottom:2px}
.fv2-event{margin-top:12px;line-height:1.5;color:rgba(255,246,224,.85)}

/* ---------- la race de chamoracers ---------- */
.fv2-racer{display:flex;gap:16px;align-items:stretch;
  border-color:color-mix(in srgb,var(--f) 45%,transparent);
  box-shadow:0 0 34px color-mix(in srgb,var(--f) 14%,transparent)}
.fv2-racer-img{width:38%;min-width:150px;object-fit:cover;border-radius:12px;
  border:2px solid color-mix(in srgb,var(--f) 55%,transparent);background:#000}
.fv2-racer-fiche{flex:1;min-width:0;display:flex;flex-direction:column}
.fv2-label{font-size:10.5px;letter-spacing:2px;text-transform:uppercase;
  color:rgba(255,246,224,.6);margin:0 0 3px}
.fv2-racer h3{font-size:clamp(20px,2.2vw,28px);color:var(--f);margin:0 0 6px}
.fv2-racer-texte{font-size:13.5px;line-height:1.5;color:rgba(255,246,224,.85)}
.fv2-stats{margin-top:auto;padding-top:10px}
.fv2-stat{display:flex;align-items:center;gap:9px;margin-top:6px;font-size:12px}
.fv2-stat span{width:78px;flex-shrink:0;color:rgba(255,246,224,.75)}
.fv2-stat b{width:26px;text-align:right;font-family:'Luckiest Guy',cursive;color:#fff6e0}
.fv2-jauge{flex:1;height:9px;border-radius:5px;background:rgba(0,0,0,.55);
  border:1px solid rgba(255,255,255,.14);overflow:hidden}
.fv2-jauge i{display:block;height:100%;width:var(--v);border-radius:5px;
  background:linear-gradient(90deg,color-mix(in srgb,var(--f) 60%,#fff),var(--f))}
.fv2-naissance{margin:10px 0 0;font-size:11.5px;font-style:italic;
  color:rgba(255,246,224,.6);line-height:1.45}

/* ---------- phase 2 : l'écurie de la faction (les cinq boss) ----------
   Sans JS elle n'existe pas (la phase 1 dit déjà l'essentiel) ; avec JS,
   c'est un calque superposé que la timeline fait entrer au scroll. */
.fv2-phase2{display:none}
/* Bureau : la phase 2 est un calque superposé, piloté par la timeline */
@media (min-width: 861px){
  .fv2-js .fv2-phase2{display:block;position:absolute;left:0;right:0;bottom:0;z-index:2;
    opacity:0;pointer-events:none}
}
.fv2-nom-ecurie{font-size:clamp(28px,3.8vw,48px)}

.fv2-boss-strip{display:flex;flex-wrap:wrap;gap:18px;align-items:flex-end;margin:16px 0 14px}
.fv2-boss{width:118px;text-align:center}
.fv2-boss img{width:96px;height:96px;border-radius:16px;object-fit:cover;
  border:2px solid rgba(255,246,224,.35);background:rgba(0,0,0,.45);
  box-shadow:0 8px 22px rgba(0,0,0,.55)}
.fv2-boss .fb-nom{display:block;font-size:12px;font-weight:700;
  color:rgba(255,246,224,.9);margin-top:6px;line-height:1.2}
.fv2-boss .fb-lab{display:block;font-size:9.5px;letter-spacing:1.5px;
  text-transform:uppercase;color:var(--f);margin-top:2px}
.fv2-boss.est-patron img{width:132px;height:132px;border-radius:20px;
  border-color:var(--f);box-shadow:0 0 28px color-mix(in srgb,var(--f) 45%,transparent),
  0 10px 26px rgba(0,0,0,.6)}
.fv2-boss.est-patron{width:150px}
.fv2-boss.est-patron .fb-nom{font-family:'Luckiest Guy',cursive;font-size:15px;color:var(--f)}

.fv2-phase2-pied{display:flex;gap:34px;align-items:flex-start;max-width:760px}
.fv2-phase2-pied .fv2-event{margin-top:0;flex:1}

/* ---------- la Chamo Nostra : le chapitre du patron ---------- */
.fv2-patron .fv2-voile{background:linear-gradient(180deg,rgba(0,0,0,.82) 0%,rgba(0,0,0,.42) 40%,rgba(0,0,0,.68) 72%,#000 100%)}
.fv2-patron .fv2-carte{border-color:rgba(255,201,60,.4)}

/* ---------- la fin : le tripot d'Al en fond ---------- */
.fv2-fin{position:relative;padding:16vh 20px 18vh;text-align:center;background:#000;overflow:hidden}
.fv2-fin .fv2-voile{background:linear-gradient(180deg,rgba(0,0,0,.78),rgba(0,0,0,.45) 45%,rgba(0,0,0,.85))}
.fv2-fin-contenu{position:relative;z-index:2}
.fv2-fin h2{font-size:clamp(28px,4vw,52px);color:#ffc93c;margin:10px 0 14px;
  text-shadow:0 3px 0 rgba(40,20,0,.9)}
.fv2-fin .fv2-intro{max-width:640px;margin:0 auto 26px}

/* ---------- états initiaux d'animation : SEULEMENT si le JS est là ----------
   Scopés à la PHASE 1 : la phase 2 est déjà pilotée en bloc par sa timeline
   (bureau) ou par ses propres reveals (mobile) — la masquer ici la rendrait
   définitivement invisible. */
.fv2-js .fv2-phase1 .fv2-arene,.fv2-js .fv2-phase1 .fv2-nom,
.fv2-js .fv2-phase1 .fv2-tagline,.fv2-js .fv2-phase1 .fv2-carte{
  opacity:0;transform:translateY(34px)}
.fv2-js .fv2-num{opacity:0;transform:translateX(60px)}
.fv2-js .fv2-jauge i{width:0}

/* ==========================================================================
   MOBILE — le canal principal. Pas d'épinglage : chaque chapitre devient
   DEUX écrans pleins qui s'enchaînent. Phase 1 sur la scène d'ambiance,
   phase 2 sur la VIDÉO de faction (le JS déplace la vidéo dans la phase 2).
   Hauteurs en svh pour encaisser la barre d'adresse des navigateurs.
   ========================================================================== */
@media (max-width: 860px){
  .fv2-hero{height:100vh;height:100svh}
  .fv2-hero h1{font-size:clamp(32px,9vw,48px)}
  .fv2-intro{font-size:14.5px}

  .fv2-points{right:6px;gap:8px}
  .fv2-points a{width:8px;height:8px}
  .fv2-points a.on{height:18px}

  .fv2-chapitre{height:auto}
  .fv2-scene{position:relative;height:auto;display:block}
  .fv2-num{font-size:112px;top:8vh;right:2vw;opacity:.4}

  .fv2-contenu{padding:0 14px 26px}
  .fv2-nom{font-size:clamp(30px,8.5vw,42px)}
  .fv2-tagline{margin-bottom:12px}

  /* Phase 1 : un écran plein, contenu en bas */
  .fv2-phase1{position:relative;z-index:2;min-height:100vh;min-height:100svh;
    display:flex;flex-direction:column;justify-content:flex-end;padding-top:15vh}
  .fv2-grille{grid-template-columns:1fr;gap:10px}
  .fv2-carte{padding:13px 14px}
  .fv2-texte{font-size:13.5px}
  /* La race de chamoracers : la bête passe en EN-TÊTE, pleine largeur.
     Dans une colonne de 32 % elle était rognée par object-fit:cover
     (source en 3/4 portrait) — d'où l'effet écrasé.
     Les visuels ont un fond BLANC incrusté : le cadre reprend donc ce blanc,
     et object-fit:contain montre la bête entière sans qu'on voie les marges
     latérales, qui se fondent dans le fond. */
  .fv2-racer{flex-direction:column;gap:0}
  .fv2-racer-img{
    width:100%;
    min-width:0;
    margin:0 0 14px;
    aspect-ratio:1/1;
    object-fit:contain;
    background:#fff;
    border:2px solid color-mix(in srgb,var(--f) 55%,transparent);
    border-radius:12px}

  /* Phase 2 : un second écran plein, la vidéo de faction en fond */
  .fv2-js .fv2-phase2{display:flex;flex-direction:column;justify-content:flex-end;
    position:relative;z-index:2;min-height:100vh;min-height:100svh;
    opacity:1;pointer-events:auto;padding-top:12vh}
  .fv2-phase2 .fv2-fond-boss{opacity:1;position:absolute;inset:0;z-index:0}
  .fv2-phase2 .fv2-arene-video{display:block;opacity:0;position:absolute;inset:0;z-index:0}
  .fv2-phase2 .fv2-arene-video.joue{opacity:1}
  .fv2-phase2::before{content:"";position:absolute;inset:0;z-index:1;
    background:linear-gradient(180deg,rgba(11,7,4,.55),rgba(11,7,4,.22) 40%,rgba(11,7,4,.85) 88%)}
  .fv2-phase2 > *{position:relative;z-index:2}

  /* La bande des boss glisse au doigt, le patron aimante le regard */
  .fv2-boss-strip{flex-wrap:nowrap;justify-content:flex-start;align-items:flex-end;
    overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;
    gap:12px;margin:12px -14px 12px;padding:4px 14px 8px}
  .fv2-boss-strip::-webkit-scrollbar{display:none}
  .fv2-boss{flex:0 0 96px;scroll-snap-align:center}
  .fv2-boss img{width:84px;height:84px}
  .fv2-boss .fb-nom{font-size:11px}
  .fv2-boss.est-patron{flex:0 0 126px}
  .fv2-boss.est-patron img{width:118px;height:118px}
  .fv2-boss.est-patron .fb-nom{font-size:13.5px}

  .fv2-phase2-pied{flex-direction:column;gap:10px;max-width:none}

  .fv2-fin{padding:13vh 16px 15vh}
}

/* ---------- accessibilité : pas d'animation demandée = pas d'animation ---------- */
@media (prefers-reduced-motion: reduce){
  .fv2-hint span{animation:none}
}