/* ============================================================
   GTAdrenaline — les bandeaux personnages
   ============================================================
   Fichier a part, et non dans site-extras.css, parce que les pages de
   la carte s'en servent aussi et ne chargent pas cette feuille-la.
   Il ne depend que des variables de palette, definies dans chaque page.

   Un decor en biais, un personnage detoure qui en deborde, le titre a
   droite. Deux usages : une respiration entre deux sections denses, et
   une invitation cliquable vers la carte interactive.

   LES PERSONNAGES VIENNENT DE DEUX ENDROITS, et il faut savoir lequel.

   1. CEUX QUE ROCKSTAR HEBERGE. Les visuels « Hero_FG » de
   rockstargames.com/VI/only-in-leonida, en PNG a fond transparent,
   charges depuis leurs serveurs — comme le logo et les vignettes de
   bandes-annonces. Rockstar reste l'hebergeur de ses propres images.
   CES ADRESSES CASSERONT un jour : elles contiennent une empreinte de
   compilation. Chaque image porte un onerror qui retire le personnage
   sans casser le bandeau — il reste le decor, le titre et le lien.
   POUR LES REMETTRE A JOUR : ouvrir la page ci-dessus, clic droit sur
   le personnage, « Copier l'adresse de l'image ».

   2. CEUX QUI SONT CHEZ NOUS, img/perso-*.png. Detoures ici, a partir
   d'illustrations Rockstar dont une IA avait retire le fond blanc a la
   demande de Raf. Voir le bloc « PERSONNAGES DETOURES CHEZ NOUS » en
   bas de ce fichier : il dit ce qu'ils valent et ce qu'on peut en
   affirmer — c'est-a-dire tres peu.

   LES DECORS SONT LES NOTRES, tires de l'archive presse et desatures.
   ============================================================ */
.bandeau {
  position: relative;
  margin: 0 0 1rem;
  padding-bottom: 2.2rem;   /* la place ou le personnage deborde */
}
.bandeau__scene {
  position: relative;
  height: clamp(215px, 28vw, 345px);
  overflow: hidden;
  clip-path: polygon(0 12%, 100% 0, 100% 88%, 0 100%);
  background: var(--midnight, #0B0F2B);
}
.bandeau__fond {
  position: absolute; inset: 0;
  width: 100%; height: 100%; max-width: none;
  object-fit: cover; object-position: center 45%;
  display: block;
}
/* Le voile n'est pas decoratif : c'est lui qui garantit le contraste du
   titre, quel que soit le pixel du decor en dessous. */
.bandeau__voile {
  position: absolute; inset: 0;
  background:
    linear-gradient(90deg, rgba(6,8,20,.94) 0%, rgba(6,8,20,.55) 34%, rgba(6,8,20,.12) 66%),
    linear-gradient(180deg, rgba(6,8,20,.16) 0%, rgba(6,8,20,.55) 100%);
}
/* Les illustrations n'ont pas toutes la meme forme : Boobie est etroit,
   Raul porte un sac, Brian vient avec sa table. Une hauteur fixe ferait
   passer les larges par-dessus le texte. On borne les DEUX dimensions
   et on laisse l'image se mettre a l'echelle seule : height et width
   restent en auto, sinon le cadrage serait ecrase au lieu d'etre reduit. */
/* LARGEUR DEFINIE PLUS RATIO, ET C'EST INDISPENSABLE.

   Avec width:auto, une image en position absolue qui n'est pas encore
   chargee mesure 0x0 — les attributs width/height ne lui donnent qu'un
   rapport, pas une taille. Elle n'entre donc jamais dans le champ de
   vision, le chargement differe ne se declenche jamais, et elle reste
   invisible pour toujours. Seul le premier bandeau de la page y
   echappait, parce qu'il est assez haut pour etre charge d'emblee.

   Une largeur en pourcentage plus aspect-ratio donne a l'image une
   boite connue avant meme son arrivee. Les six illustrations de
   Rockstar font toutes 640x469, donc un seul rapport suffit. */
.bandeau__perso {
  position: absolute; left: clamp(.5rem, 3%, 3rem); bottom: 0;
  width: 38%;
  min-width: 190px;
  aspect-ratio: 640 / 469;
  height: auto;
  display: block; z-index: 2;
  filter: drop-shadow(0 20px 34px rgba(0,0,0,.8));
  pointer-events: none;
}
.bandeau__texte {
  position: absolute; right: clamp(1.2rem, 6%, 4.5rem);
  top: 50%; transform: translateY(-50%);
  text-align: right; max-width: 50%; z-index: 3;
}
.bandeau__nom {
  font-family: var(--font-display);
  font-size: clamp(1.3rem, 3.8vw, 2.6rem);
  font-weight: 900; line-height: 1; margin: 0;
  text-shadow: 0 2px 26px rgba(0,0,0,.85);
}
.bandeau__role {
  font-family: var(--font-mono); font-size: .7rem; letter-spacing: .12em;
  text-transform: uppercase; color: var(--aqua); margin: .55rem 0 0;
  text-shadow: 0 1px 12px rgba(0,0,0,.9);
}
.bandeau__phrase {
  margin: .8rem 0 0; font-size: .9rem; color: var(--sand);
  opacity: .92; line-height: 1.5; text-shadow: 0 1px 14px rgba(0,0,0,.9);
}

/* Variante cliquable : tout le bandeau mene a la carte. C'est un vrai
   <a href>, donc il se copie, s'ouvre au milieu, et s'annonce comme un
   lien — pas un bloc rendu cliquable par script. */
a.bandeau { display: block; text-decoration: none; color: inherit; }
a.bandeau .bandeau__scene { transition: transform .35s ease, box-shadow .35s ease; }
a.bandeau:hover .bandeau__scene { transform: translateY(-3px); box-shadow: 0 22px 50px rgba(0,0,0,.55); }
a.bandeau:hover .bandeau__nom { color: var(--gold-bright, #F3DFA0); }
a.bandeau:focus-visible .bandeau__scene { outline: 2px solid var(--aqua); outline-offset: 4px; }
.bandeau__appel {
  display: inline-flex; align-items: center; gap: .55rem;
  margin-top: 1.1rem;
  padding: .72em 1.35em;
  font-family: var(--font-body); font-size: clamp(.86rem, 1.4vw, 1rem);
  font-weight: 800; letter-spacing: .01em;
  color: #1a1206;
  background: var(--gradient-gold, linear-gradient(120deg, #a9863f, #D9B872 45%, #F3DFA0 55%, #a9863f));
  border-radius: 100px;
  box-shadow: 0 10px 26px rgba(0,0,0,.5), 0 0 0 1px rgba(255,255,255,.18) inset;
  transition: transform .25s ease, box-shadow .25s ease;
}
/* La fleche avance au survol : un mouvement dit "ca mene quelque part"
   plus vite qu'un mot. */
.bandeau__appel::after { content: "\2192"; transition: transform .25s ease; }
a.bandeau:hover .bandeau__appel { transform: translateY(-2px); box-shadow: 0 14px 32px rgba(0,0,0,.6), 0 0 0 1px rgba(255,255,255,.28) inset; }
a.bandeau:hover .bandeau__appel::after { transform: translateX(4px); }
/* Le curseur main sur toute la surface : le bandeau entier est cliquable,
   pas seulement le bouton. */
a.bandeau { cursor: pointer; }

@media (max-width: 720px) {
  /* 44 + 54 = 98 % : on garde deux points d.ecart, sinon le personnage
     passe sous le texte et le rend penible a lire. */
  .bandeau__perso { width: 44%; min-width: 0; left: -.5rem; opacity: .92; }
  .bandeau__texte { max-width: 54%; right: 1rem; }
  .bandeau__scene { clip-path: polygon(0 7%, 100% 0, 100% 93%, 0 100%); }
  .bandeau__phrase { display: none; }
}

/* La section Univers n'a plus qu'une colonne depuis que le bandeau carte
   en est sorti. Les paragraphes sont bornes pour rester lisibles — une
   ligne de 130 caracteres ne se lit pas — et le tableau de chiffres,
   lui, profite de toute la largeur en passant a quatre colonnes. */
.univers__text > p { max-width: 74ch; }
/* La section Univers n'a plus qu'une colonne depuis que le bandeau carte
   en est sorti. Les paragraphes sont bornes pour rester lisibles : une
   ligne de 130 caracteres ne se lit pas. */
.univers__text > p { max-width: 74ch; }

/* Le bouton sert aussi HORS d'un bandeau cliquable : sur la page de la
   carte, c'est lui le lien de retour, dans un bandeau qui n'en est pas
   un. Il lui faut donc ses propres etats de survol et de focus. */
a.bandeau__appel { text-decoration: none; cursor: pointer; }
a.bandeau__appel:hover { transform: translateY(-2px); box-shadow: 0 14px 32px rgba(0,0,0,.6), 0 0 0 1px rgba(255,255,255,.28) inset; }
a.bandeau__appel:hover::after { transform: translateX(4px); }
a.bandeau__appel:focus-visible { outline: 2px solid var(--aqua); outline-offset: 3px; }
/* Le retour pointe vers la gauche : la fleche doit suivre. */
a.bandeau__appel--retour::after { content: none; }
a.bandeau__appel--retour::before { content: "\2190"; transition: transform .25s ease; }
a.bandeau__appel--retour:hover::before { transform: translateX(-4px); }

/* Un ecart franc entre le personnage et le texte. Les illustrations
   depassent souvent leur sujet — le jet-ski de Cal, le bureau de Brian —
   et grignotaient la premiere lettre de chaque ligne. */

/* PAS DE CLASSE reveal SUR LES BANDEAUX, ET C'EST DELIBERE.
   .reveal demarre a opacity:0 en attendant l'observateur. Or Chrome ne
   declenche pas le chargement differe d'une image contenue dans un
   element entierement transparent : le personnage restait donc vide
   tant que le bandeau n'avait pas ete revele, et sur telephone il ne
   l'etait pas toujours a temps. Un en-tete de section n'a de toute
   facon pas besoin d'apparaitre en fondu — il est deja l'evenement
   visuel de la section. */

/* BANDEAUX SANS PERSONNAGE.
   La moitie gauche n'est alors occupee par personne : le texte peut
   respirer davantage, et la marge basse qui servait au debordement du
   personnage n'a plus de raison d'etre.
   :has() n'est pas supporte partout ; la ou il manque, le bandeau garde
   simplement ses reglages d'origine — rien ne casse. */
.bandeau:not(:has(.bandeau__perso)) { padding-bottom: 0; }
.bandeau:not(:has(.bandeau__perso)) .bandeau__texte { max-width: 66%; }
@media (max-width: 720px) {
  .bandeau:not(:has(.bandeau__perso)) .bandeau__texte { max-width: 82%; }
  .bandeau:not(:has(.bandeau__perso)) .bandeau__phrase { display: block; }
}

/* Dre'Quan est assis SUR une voiture : le decor derriere lui en montre
   une autre, et il la masquait. On le pousse vers la gauche pour la
   degager. Le decalage reste dans la marge interieure du conteneur,
   donc il ne cree aucun debordement lateral. */
/* Deux crans de decalage. Le personnage masquait ce qu.il etait cense
   mettre en valeur : la voiture derriere Dre.Quan, l.eau derriere Cal.
   Les valeurs negatives sont sans danger : le body du site porte deja
   overflow-x: hidden, donc rien ne deborde lateralement. */
/* --gauche et --gauche-fort ne servent plus a personne depuis que nos
   propres personnages ont remplace ceux du garage : chacun porte
   desormais son decalage dans sa propre classe. On les garde parce que
   les visuels de Rockstar encore en place peuvent en avoir besoin du
   jour au lendemain, mais si dans six mois ils sont toujours orphelins,
   ils peuvent partir. */
.bandeau__perso--gauche { left: -6%; }
.bandeau__perso--gauche-fort { left: -11%; }
/* Cal sort carrement du cadre : sa main et sa biere passent a gauche du
   bandeau, ce qui accentue le relief deja donne par le debordement vers
   le bas. Le trop-plein est coupe par overflow-x: hidden du body — pas
   de barre de defilement laterale. Tous les personnages ne sont pas
   alignes, et c'est voulu. */
.bandeau__perso--gauche-max { left: -13%; }
@media (max-width: 720px) {
  .bandeau__perso--gauche,
  .bandeau__perso--gauche-fort,
  .bandeau__perso--gauche-max { left: -2rem; }
}

/* ==========================================================
   LE PERSONNAGE REAGIT AU SURVOL DE SON BANDEAU
   ==========================================================
   Il est detoure sur fond transparent : rien a recadrer, donc il
   peut avancer sans qu'un cadre le coupe. Un pas vers le haut,
   l'ombre portee qui s'allonge, et il se decolle du decor au lieu
   d'y etre pose.

   Cette regle vit ici et non dans site-extras.css : les pages de la
   carte chargent bandeau.css mais pas l'autre, et Brian y tient le
   meme role que sur l'accueil.
   ========================================================== */
.bandeau__perso {
  transition: transform 0.5s cubic-bezier(0.2, 0.8, 0.2, 1),
              filter 0.5s ease;
}
.bandeau:hover .bandeau__perso {
  transform: translateY(-6px) scale(1.015);
  filter: drop-shadow(0 26px 40px rgba(0, 0, 0, 0.85));
}

@media (prefers-reduced-motion: reduce) {
  .bandeau__perso { transition: filter 0.5s ease; }
  .bandeau:hover .bandeau__perso { transform: none; }
}

/* ==========================================================
   LE DUO JASON & LUCIA
   ==========================================================
   Les personnages de Rockstar sont livres detoures en 640 x 469 : un
   buste, large et peu haut. Celui-ci en cadre DEUX, coupes a mi-cuisse
   comme tous les autres, en 632 x 575 — d'ou son propre rapport, sans
   lequel la regle generale l'ecraserait au format des cinq autres.

   D'OU VIENT CE FICHIER, pour qui le lira dans six mois.
   L'illustration d'origine est bien celle de Rockstar (« Jason and
   Lucia Robbery », lot Illustrations du site officiel), mais le fond a
   ete retire PAR UNE IA a la demande de Raf, qui voulait un fond blanc
   propre. Une IA ne decoupe pas : elle redessine. Les logos des
   tee-shirts sont revenus justes au deuxieme essai, mais le trait, les
   mains et le bracelet de Lucia sont des approximations, et la source
   ne fait que 1365 px de large.
   Une decoupe faite ici depuis le fichier officiel en 2160 px existe
   dans l'historique git, commit 397bbf5 : « git show
   397bbf5:img/perso-jason-lucia.png ». Elle est plus fidele et moins
   nette de cadrage. Raf a tranche en connaissance de cause.

   Aucune page ne presente cette image comme un visuel officiel : son
   texte alternatif decrit ce qu'on voit, rien de plus.
   ========================================================== */
.bandeau__perso--duo {
  aspect-ratio: 632 / 575;
  width: 34%;
  min-width: 190px;
}
@media (max-width: 720px) {
  .bandeau__perso--duo { width: 40%; min-width: 0; }
}

/* ==========================================================
   PERSONNAGES DETOURES CHEZ NOUS
   ==========================================================
   D'OU ILS VIENNENT, pour qui lira ce fichier dans six mois.
   Raf est parti d'illustrations Rockstar et a demande a une IA d'en
   retirer le fond blanc. Une IA ne decoupe pas : ELLE REDESSINE. Le
   detourage propre — bord du fond, poches de blanc enfermees, halo
   clair autour des cheveux — a ete fait ici ensuite, mais le dessin
   lui-meme reste une approximation.

   CE QU'ON NE PEUT DONC PAS EN TIRER :
   — aucun texte lisible sur un vetement ne fait foi. Sur le duo Jason
     et Lucia, les logos des tee-shirts n'etaient justes qu'au deuxieme
     essai ; ailleurs, une inscription peut etre une invention pure.
     Rien de ce qui est ecrit sur ces images n'est cite sur le site ;
   — aucun de ces cinq personnages n'est nomme. Les identifier
     demanderait une source, et nous n'en avons pas.

   D'OU : alt vide et aria-hidden. Ce sont des ornements d'en-tete ; le
   titre et la phrase du bandeau portent tout le sens. Le seul
   personnage de cette famille qui soit nomme est le duo Jason et
   Lucia, parce que Rockstar le nomme.

   LES TAILLES. Une classe par personnage, comme pour le duo : chacun a
   son propre rapport, et une largeur choisie pour qu'il fasse environ
   330 px de haut sur un ecran large — la meme stature que les visuels
   de Rockstar a cote. min-width tombe a zero : la valeur commune de
   190 px, pensee pour des bustes larges, ferait deborder une silhouette
   debout de moitie sur les ecrans moyens.
   ========================================================== */
.bandeau__perso--wyman   { aspect-ratio: 520 / 669; width: 22%; min-width: 0; }
.bandeau__perso--flamant { aspect-ratio: 560 / 662; width: 24%; min-width: 0; }
.bandeau__perso--martini { aspect-ratio: 400 / 694; width: 17%; min-width: 0; }
/* Le couple de motards est un buste large, pas une silhouette debout :
   il tient moins de hauteur et plus de largeur, et il gagne a mordre
   un peu sur le bord gauche. */
.bandeau__perso--bikers  { aspect-ratio: 790 / 510; width: 34%; min-width: 0; left: -2%; }

@media (max-width: 720px) {
  /* La regle commune passe tout le monde a 44 %. Elle vaut pour un
     buste ; une silhouette debout a cette largeur depasserait le
     bandeau du double. On redonne donc a chacun sa mesure, calee sur
     une hauteur d'environ 110 px comme les visuels de Rockstar. */
  .bandeau__perso--wyman   { width: 25%; }
  .bandeau__perso--flamant { width: 27%; }
  .bandeau__perso--martini { width: 19%; }
  .bandeau__perso--bikers  { width: 44%; left: -1.5rem; }
}

/* --- deuxieme fournee, six de plus ------------------------------- */
/* Meme regle de mesure que les cinq premiers : une largeur telle que
   le personnage fasse environ 330 px de haut sur un ecran large, et
   environ 110 px sur telephone. Les bustes larges se contentent de
   270 px — ils sont larges, pas hauts, et a hauteur egale ils
   mangeraient le titre. */
.bandeau__perso--lin      { aspect-ratio: 360 / 689; width: 15%; min-width: 0; }
.bandeau__perso--grise    { aspect-ratio: 560 / 669; width: 24%; min-width: 0; }
.bandeau__perso--tactique { aspect-ratio: 590 / 668; width: 25%; min-width: 0; }
.bandeau__perso--dimez    { aspect-ratio: 820 / 461; width: 41%; min-width: 0; left: -6%; }
.bandeau__perso--grillz   { aspect-ratio: 820 / 461; width: 41%; min-width: 0; left: -6%; }
.bandeau__perso--canne    { aspect-ratio: 820 / 471; width: 39%; min-width: 0; left: -6%; }

@media (max-width: 720px) {
  .bandeau__perso--lin      { width: 17%; }
  .bandeau__perso--grise    { width: 27%; }
  .bandeau__perso--tactique { width: 28%; }
  .bandeau__perso--dimez    { width: 44%; left: -1.5rem; }
  .bandeau__perso--grillz   { width: 44%; left: -1.5rem; }
  .bandeau__perso--canne    { width: 44%; left: -1.5rem; }
}

/* QUATRE DETOURAGES SUR QUATORZE NE SERVENT PAS, et il faut dire
   pourquoi, sans quoi quelqu'un les reposera un jour :
   — perso-ak-telephone : l'image est recadree au ras du sujet des
     QUATRE cotes. Un personnage de bandeau a besoin d'un contour ;
     celui-la n'en a pas, il se lirait comme une photo collee ;
   — perso-echange : l'IA n'a pas detoure la femme, elle l'a decoupee
     en polygone — epaule et cheveux se terminent en biais nets ;
   — perso-siempre : c'est une illustration a plat. Sur un decor
     photographique, elle se lit comme un autocollant ;
   — perso-couple-armes : trop mou, tout simplement. Ramene a la meme
     hauteur d'affichage que les autres il obtient 315 de detail par
     pixel, quand l'equipe tactique en a 1061 : c'est le plus mou des
     quatorze, et il l'etait deja avant le masque de nettete. Il tenait
     l'arsenal jusqu'a ce que Raf le remarque, a juste titre. Le
     deplacer n'aurait fait que deplacer la remarque.
   Les quatre restent dans « Photos officielles Rockstar\Personnages
   detoures », ils ne sont pas dans img/. */

/* --- deux de plus, le 19 septembre au soir ------------------------ */
/* Tous deux etaient ecartes, et pour des raisons qui ne tenaient plus
   une fois les detourages refaits depuis les originaux 4K :
   — l'echange etait un polygone, l'IA ayant decoupe la femme en biais
     net au lieu de la detourer. Le vrai detourage la rend entiere ;
   — le couple arme etait trop mou pour tenir a 300 px. Il l'est moins,
     sans etre le plus net du lot : cette scene est sombre et douce chez
     Rockstar meme, ce n'etait pas seulement la faute de l'IA. */
.bandeau__perso--echange { aspect-ratio: 900 / 538; width: 39%; min-width: 0; left: 1%; }
.bandeau__perso--armes   { aspect-ratio: 620 / 667; width: 27%; min-width: 0; }

@media (max-width: 720px) {
  .bandeau__perso--echange { width: 44%; left: -1.5rem; }
  .bandeau__perso--armes   { width: 30%; }
}

/* Le dernier des seize a trouver sa place, le 19 septembre 2026 : il
   tient le bandeau « comment se servir de cette carte », la seule
   section de cette page qui survivra a la sortie du jeu — les autres
   decrivent une carte qui n'existe pas encore. La fille regarde son
   telephone, ce qui n'est pas un hasard sur une section qui explique
   comment se servir d'un outil.
   Scene couchee, donc large et basse : le meme traitement que les
   bikers, en un peu moins etale. */
.bandeau__perso--cagoule { aspect-ratio: 720 / 535; width: 33%; min-width: 0; left: -2%; }
@media (max-width: 720px) {
  .bandeau__perso--cagoule { width: 44%; left: -1.5rem; }
}

/* Les deux scenes de boue, posees le 21 septembre. Raf a demande
   qu'elles aillent « la ou il y en a peu », et les fonds ont tranche :

   — LE TRIO AUX FUSILS va sur « comment les codes marchent », dont le
     fond est une scene de police de nuit. Trois personnes armees et
     couvertes de boue devant des gyrophares, c'est un niveau de
     recherche — soit precisement ce que declenche un code de triche.
     La page passe de un a deux personnages pour quatre bandeaux.

   — LE GROS PLAN AU CHAPEAU va sur « le journal du site », la page la
     plus demunie du site : un seul personnage pour deux bandeaux, et
     la plus maigre en texte. Le fond est une rue d'enseignes, rien ne
     se heurte.

   Proportions : le trio est presque carre (800 x 763), le gros plan
   est large et bas (800 x 534). Ils ne peuvent donc pas partager une
   largeur : 29 % pour l'un, 33 % pour l'autre. */
.bandeau__perso--boue-fusils { aspect-ratio: 800 / 763; width: 29%; min-width: 0; }
.bandeau__perso--boue-doigts { aspect-ratio: 800 / 534; width: 33%; min-width: 0; left: -2%; }
@media (max-width: 720px) {
  .bandeau__perso--boue-fusils { width: 34%; }
  .bandeau__perso--boue-doigts { width: 44%; left: -1.5rem; }
}