/* Reset de base */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

@font-face {
    font-family: 'Rubik';
    src: url('../Rubik Font/static/Rubik-Bold.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

body {
    font-family: 'Rubik';
    background-color: #f0f0f0; /* Couleur de fond de la page */
}

/* Conteneur principal */
.container {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh; /* Hauteur de la page */
}

/* Background */
.background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1; /* Fond en dessous */
}

/* Logo de l'équipe en fond */
.logobackground {
    position: absolute; /* Positionnez-le absolument par rapport à son conteneur */
    top: 50%; /* Positionnez-le à 50% de la hauteur de l'écran */
    left: 50%; /* Positionnez-le à 50% de la largeur de l'écran */
    width: auto; /* Largeur du logo */
    height: 1080px; /* Hauteur du logo */
    display: block; 
    opacity: 0.2; /* Ajustez l'opacité comme souhaité */
    z-index: 0; /* Assurez-vous qu'il est derrière les autres éléments */
    transform: translate(-50%, -50%); /* Centre le logo à l'écran */
}


/* Logo de l'année centré */
.logo-container {
    position: absolute;
    bottom: 20px;
    left: 50%; /* Centrage horizontal */
    transform: translateX(-50%);
    z-index: 2;
}

.logo-container img {
    width: auto;
    height: 100px;
}

.year {
    color: #ef9f3b;
    font-size: 44px;
    font-weight: bold;
    text-align: center;
    margin-top: -25px;
}

.team-info {
    position: relative;
    width: 90%;
    height: 90%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    z-index: 1;
}

/* Logo en haut à gauche */
.team-info img.logoteam {
    position: absolute;
    top: 45px;
    left: 90px;
    width: 150px;
    height: 150px;
}

/* Texte "Introducing" et nom de l'équipe */
.introducing {
    position: absolute;
    top: 65px;
    left: 250px;
    font-size: 25px;
    color: #fff;
}

.team-name {
    position: absolute;
    top: 108px;
    left: 250px;
    font-size: 66px;
    text-shadow: 5px 5px 10px rgba(0, 0, 0, 0.7); /* Ombre du texte */
    font-style: italic;
    font-weight: bold;
    color: #fff;
}

/* Divider vertical à droite du nom d'équipe */
.divider {
    position: absolute;
    top: 60px;
    left: 850px;
    width: 2px;
    height: 110px;
    background-color: #fff;
}

.sponsor-container {
    position: absolute; /* Garder la position absolue */
    top: 50px; /* Positionnement à 50 pixels du haut */
    left: 900px; /* Positionnement à 750 pixels de la gauche */
    width: 850px; /* Largeur du conteneur des sponsors */
    height: 130px; /* Hauteur du conteneur des sponsors */
    z-index: 3; /* S'assurer que le conteneur est au-dessus des autres éléments */
    display: flex; /* Pour aligner les logos horizontalement */
    justify-content: space-around; /* Espace uniforme entre les logos */
    align-items: center; /* Centre les logos verticalement */
    padding: 10px; /* Espacement interne */
}

.logosponsor {
    width: 120px; /* Largeur de chaque logo sponsor */
    height: auto; /* Laisser la hauteur s'ajuster proportionnellement */
}

/* Conteneur de la lineup principale */
.lineup-principal {
    position: absolute;
    top: 230px;
    display: flex; /* Aligner les héros horizontalement */
    flex-direction: row; /* Disposer les items en colonne */
    gap: 20px; /* Espace entre les lignes */
    z-index: 3;
}

/* Item de héros */
.hero-item {
    display: flex; /* Alignement vertical pour le héros et ses boîtes */
    flex-direction: column; /* Aligner le héros et les boîtes sous forme de colonne */
    align-items: center; /* Centrer horizontalement */
    width: 265px; /* Limiter la largeur du hero-item */
}

/* Boîte bleue pour le héros */
.hero-box {
    background-size: cover; /* L'image couvre toute la boîte */
    background-position: center; /* Centrer l'image */
    background-color: #0f1727; /*Couleur bleu foncé */
    width: 260px; /* Largeur de la boîte */
    height: 230px; /* Hauteur de la boîte */
    display: flex;
    justify-content: center; /* Centrer l'image */
    align-items: center; /* Centrer l'image */
    border-radius: 10px 10px 0 0; /* Bords arrondis */
    overflow: hidden; /* Masquer le débordement */
}

/* Conteneur du drapeau */
.nationality-container {
    position: absolute; /* Positionner de façon absolue par rapport à la boîte du héros */
    top: 15px; /* Décalage vers le haut */
    left: 15px; /* Décalage vers la gauche */
    width: 35px; /* Largeur du drapeau */
    height: auto; /* Hauteur du drapeau */
    overflow: hidden; /* S'assurer que l'image ne déborde pas */
    z-index: 2; /* S'assurer qu'il reste au-dessus de l'image du héros */
}

/* Image du drapeau */
.flag-image {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Couvrir entièrement l'espace sans distorsion */
}


/* Image du héros */
.hero-image {
    width: 100%; /* Prendre toute la largeur de la boîte */
    height: 100%; /* Prendre toute la hauteur de la boîte */
    object-fit: cover; /* Couvre la boîte tout en conservant les proportions */
    object-position: top; /* Aligner le haut de l'image avec le haut de la boîte */
}

/* Conteneur pour le rôle et le nom */
.role-container {
    display: flex; /* Aligner les éléments horizontalement */
    align-items: flex-start; /* Aligner en haut pour que les bords soient au même niveau */
    width: 99%; /* Assurez-vous que le conteneur prend tout l'espace disponible */
}

/* Boîte rouge pour le rôle */
.role-box {
    background-color: red; /* Couleur rouge */
    width: 60px; /* Largeur de la boîte */
    height: 60px; /* Hauteur de la boîte */
    border-radius: 0 0 0 5px; /* Bords arrondis */
}

/* Image du rôle */
.hero-role-image {
    width: 80%; /* Prendre 80% de la largeur de la boîte */
    height: auto; /* Hauteur automatique pour maintenir les proportions */
    object-fit: cover; /* Remplir la boîte tout en gardant les proportions */
    object-position: center; /* Centrer l'image */
    margin: 5px 5px 5px 5px; /* Centrer horizontalement */
    display: block; /* Nécessaire pour que margin: auto fonctionne */
}

/* Boîte blanche pour le nom */
.name-box {
    font-size: 25px;
    background-color: white; /* Couleur blanche */
    height: 60px; /* Hauteur égale à celle de la boîte de rôle */
    padding: 0 10px; /* Padding horizontal, pas de padding vertical */
    border-radius: 0 0 5px 0; /* Bords arrondis */
    font-weight: bold; /* Texte en gras */
    flex-grow: 1; /* Permet à la boîte de nom de prendre l'espace restant */
    display: flex; /* Pour centrer le texte verticalement */
    align-items: center; /* Centrage vertical du texte */
}

.team-sub {
    position: absolute;
    top: 550px;
    left: 260px;
    font-size: 25px;
    text-shadow: 5px 5px 10px rgba(0, 0, 0, 0.7); /* Ombre du texte */
    font-style: italic;
    font-weight: bold;
    color: #fff;
}

/* Conteneur de la lineup principale */
.subs-principal {
    position: absolute;
    top: 590px;
    left: 260px;
    display: flex; /* Aligner les héros horizontalement */
    flex-direction: row; /* Disposer les items en colonne */
    gap: 20px; /* Espace entre les lignes */
    z-index: 3;
}

/* Item de héros */
.hero-sub {
    display: flex; /* Alignement vertical pour le héros et ses boîtes */
    flex-direction: column; /* Aligner le héros et les boîtes sous forme de colonne */
    align-items: center; /* Centrer horizontalement */
    width: 230px; /* Limiter la largeur du hero-item */
}

/* Boîte bleue pour le héros */
.hero-box-sub {
    background-size: cover; /* L'image couvre toute la boîte */
    background-position: center; /* Centrer l'image */
    background-color: #0f1727; /* Couleur bleu foncé */
    width: 230px; /* Largeur de la boîte */
    height: 200px; /* Hauteur de la boîte */
    display: flex;
    justify-content: center; /* Centrer l'image */
    align-items: center; /* Centrer l'image */
    border-radius: 10px 10px 0 0; /* Bords arrondis */
    overflow: hidden; /* Masquer le débordement */
}

/* Image du héros */
.hero-image-sub {
    width: 100%; /* Prendre toute la largeur de la boîte */
    height: 100%; /* Prendre toute la hauteur de la boîte */
    object-fit: cover; /* Couvre la boîte tout en conservant les proportions */
    object-position: top; /* Aligner le haut de l'image avec le haut de la boîte */
}

/* Conteneur pour le rôle et le nom */
.role-container-sub {
    display: flex; /* Aligner les éléments horizontalement */
    align-items: flex-start; /* Aligner en haut pour que les bords soient au même niveau */
    width: 100%; /* Assurez-vous que le conteneur prend tout l'espace disponible */
}

/* Boîte rouge pour le rôle */
.role-box-sub {
    background-color: red; /* Couleur rouge */
    width: 60px; /* Largeur de la boîte */
    height: 60px; /* Hauteur de la boîte */
    border-radius: 0 0 0 5px; /* Bords arrondis */
}

/* Image du rôle */
.hero-role-image-sub {
    width: 80%; /* Prendre 80% de la largeur de la boîte */
    height: auto; /* Hauteur automatique pour maintenir les proportions */
    object-fit: cover; /* Remplir la boîte tout en gardant les proportions */
    object-position: center; /* Centrer l'image */
    margin: 5px 5px 5px 5px; /* Centrer horizontalement */
    display: block; /* Nécessaire pour que margin: auto fonctionne */
}

/* Boîte blanche pour le nom */
.name-box-sub {
    font-size: 25px;
    background-color: white; /* Couleur blanche */
    height: 60px; /* Hauteur égale à celle de la boîte de rôle */
    padding: 0 10px; /* Padding horizontal, pas de padding vertical */
    border-radius: 0 0 5px 0; /* Bords arrondis */
    font-weight: bold; /* Texte en gras */
    flex-grow: 1; /* Permet à la boîte de nom de prendre l'espace restant */
    display: flex; /* Pour centrer le texte verticalement */
    align-items: center; /* Centrage vertical du texte */
}


/* Animation d'apparition pour les héros avec glissement vers la droite */
@keyframes fadeInRight {
    0% {
        opacity: 0;
        transform: translateX(-30px); /* Déplacer vers la gauche au début */
    }
    100% {
        opacity: 1;
        transform: translateX(0); /* Se stabilise à la position finale */
    }
}

.hero-item, .hero-sub {
    opacity: 0; /* Invisibles au départ */
    animation: fadeInRight 1.5s ease-in-out forwards; /* Animation appliquée avec glissement vers la droite */
    animation-delay: 2s; /* Délai global avant le démarrage de l'animation */
}

/* Décaler l'animation des héros principaux */
.hero-item:nth-child(1) {
    animation-delay: 1.2s; /* Début après 2.2s */
}
.hero-item:nth-child(2) {
    animation-delay: 1.4s; /* Début après 2.4s */
}
.hero-item:nth-child(3) {
    animation-delay: 1.6s; /* Début après 2.6s */
}
.hero-item:nth-child(4) {
    animation-delay: 1.8s; /* Début après 2.8s */
}
.hero-item:nth-child(5) {
    animation-delay: 2s; /* Début après 3s */
}

/* Décaler l'animation des remplaçants (subs) */
.hero-sub:nth-child(1) {
    animation-delay: 1.4s; /* Début après 2.4s */
}
.hero-sub:nth-child(2) {
    animation-delay: 1.6s; /* Début après 2.6s */
}
.hero-sub:nth-child(3) {
    animation-delay: 1.8s; /* Début après 2.8s */
}
.hero-sub:nth-child(4) {
    animation-delay: 2s; /* Début après 3s */
}