/* n°1446 : landing « serveur FiveM anti-DDoS » (n°1492 : /anti-ddos-fivem), héros façade de nuit et images du corps (n°1454). Chargée après jeu.css, sur
   cette seule page. La boucle se pose sur l'image fixe et n'apparaît qu'une fois lancée (mécanique de /anti-ddos) ;
   même cadrage et même masque que l'image, pour un fondu sans saut. */
.sg-jp-hero.sg-sfa-hero .sg-hero-visuel img:first-child { filter: none; } /* image déjà sombre : le voile du décor l'éteignait */
.sg-sfa-hero .sg-hero-visuel img, .sg-sfa-hero .sg-hero-visuel video { object-position: 70% 50%; }
.sg-sfa-hero .sg-hero-visuel video {
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 40%), linear-gradient(180deg, #000 60%, transparent 98%);
          mask-image: linear-gradient(90deg, transparent 0, #000 40%), linear-gradient(180deg, #000 60%, transparent 98%);
  -webkit-mask-composite: source-in; mask-composite: intersect;
}
.sg-anim video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .9s ease; }
.sg-anim.joue video { opacity: 1; }

/* n°1492 (Mathis, vocal 10/10 23:53 : le schéma en fond « pas incrusté dans la page ») : #relais, titre à gauche, entrée du bunker
   gardée à droite, sans cadre, bords fondus dans le fond de la section comme le visuel Netrix de /anti-ddos. Même masque sur
   l'image et sur la boucle, cadrage à droite pour garder la porte et ses deux gardes. */
.sg-sfa-relais { display: grid; grid-template-columns: 5fr 7fr; gap: calc(var(--gut) * 2); align-items: center; margin-bottom: var(--gut); }
.sg-sfa-relais .sg-sec-tete { display: block; margin-bottom: 0; } /* titre puis texte l'un sous l'autre, dans la colonne de gauche */
.sg-sfa-relais .sg-sec-tete p { max-width: 46ch; margin-top: 20px; }
.sg-sfa-bunker { position: relative; margin: 0; aspect-ratio: 16 / 9; }
.sg-sfa-bunker img, .sg-sfa-bunker video { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 100% 50%;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 42%, #000 90%, transparent 100%), linear-gradient(180deg, transparent 0, #000 22%, #000 78%, transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0, #000 42%, #000 90%, transparent 100%), linear-gradient(180deg, transparent 0, #000 22%, #000 78%, transparent 100%);
  -webkit-mask-composite: source-in; mask-composite: intersect; }
@media (max-width: 900px) {
  .sg-sfa-relais { grid-template-columns: 1fr; gap: 8px; }
  .sg-sfa-bunker { aspect-ratio: 4 / 3; } /* téléphone et tablette : la porte et ses deux gardes, la ville coupée */
  .sg-sfa-bunker img, .sg-sfa-bunker video { object-position: 76% 50%;
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 28%, #000 97%, transparent 100%), linear-gradient(180deg, transparent 0, #000 18%, #000 80%, transparent 100%);
            mask-image: linear-gradient(90deg, transparent 0, #000 28%, #000 97%, transparent 100%), linear-gradient(180deg, transparent 0, #000 18%, #000 80%, transparent 100%); }
}