/* ============================================================
   Z7-BANNIERE  —  LA bannière de joueur, et elle seule
   ============================================================
   Une seule définition des règles INTRINSÈQUES d'une bannière de
   joueur. Les composants qui en affichent une (panneau Profil, page
   Compte, cartes joueur, carte d'un ami, podium Z7-TOP3…) la COMPOSENT :
   ils posent la classe, et ne réécrivent ni le ratio, ni l'arrondi, ni
   le cadrage de l'image, ni le repli.

   CE QUI EST ICI, ET NULLE PART AILLEURS
     · le format officiel : 1200 × 480, soit 2,5:1 ;
     · l'arrondi officiel : `--z7-banniere-rayon` (12 px) ;
     · l'image ENTIÈRE : `contain`, centrée, jamais répétée — ni rognée,
       ni déformée. Une image qui n'est pas au format laisse voir le fond
       du composant sur deux côtés : c'est voulu ;
     · le repli : la couleur du joueur si le composant la pose
       (`background-color`), sinon `--z7-banniere-repli`.

   CE QUI N'EST PAS ICI : la taille de la bannière dans la page, ses
   marges, une bordure décorative, l'avatar, le pseudo, un rang, un
   contour, une lueur. Tout cela appartient au composant parent.

   ⚠️ PAS D'`overflow: hidden`. L'arrondi découpe déjà l'image de fond ;
   et plusieurs parents posent un avatar À CHEVAL sur le bas de la
   bannière, qu'un `overflow` couperait. Une couche d'image posée en
   enfant (`.z7-banniere__image`) hérite de l'arrondi.

   La source de l'image est assainie par `Common/JS/banniere.js`.
   Registre : `_documentation/COMPOSANTS-Z7.md`, fiche Z7-BANNIERE.
   ============================================================ */
:root {
    /*  Changer l'arrondi de TOUTES les bannières : cette ligne-ci. */
    --z7-banniere-rayon: 12px;
    /*  Le fond quand le joueur n'a ni image ni couleur — la couleur que le
        site utilisait déjà par défaut partout (`bannerColor || '#1a1a2e'`). */
    --z7-banniere-repli: #1a1a2e;
}

.z7-banniere {
    position: relative;
    /*  `content-box` : le ratio porte sur la ZONE DE L'IMAGE. Une bordure
        décorative posée par un parent s'ajoute autour, sans rien rogner. */
    box-sizing: content-box;
    aspect-ratio: 1200 / 480;
    border-radius: var(--z7-banniere-rayon);
    background-color: var(--z7-banniere-repli);
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
}

/*  VARIANTE : la bannière forme le HAUT d'une carte (carte joueur, carte
    d'un ami). Même rayon officiel, sur les deux coins du haut seulement. */
.z7-banniere--haut {
    border-radius: var(--z7-banniere-rayon) var(--z7-banniere-rayon) 0 0;
}

/*  COUCHE D'IMAGE, pour un parent qui empile des choses au-dessus de la
    bannière (Z7-TOP3) : l'image vit dans cette couche, la bannière garde
    le ratio, l'arrondi et le repli. */
.z7-banniere__image {
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
}

/*  EXCEPTION DOCUMENTÉE — les MINIATURES DE SÉLECTION (choisir une
    bannière dans une collection, la boutique) ne sont pas une bannière de
    joueur : elles gardent leur cadrage propre et ne portent pas cette
    classe. */