:root
{
    --headerColor : #101010;
    --backgroundColorPrincipal : #151515;
    --backgroundColorSecondary : #1b1b1b;
    --textPrimaryColor : #fff;
    --textSecondaryColor : #52BF90;
}

*
{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body
{
    background-color: var(--backgroundColorPrincipal);
}

header
{
    background-color: var(--headerColor);
    padding: 10px 0;
    position: sticky; /* Fixe le header */
    top: 0; /* Positionne en haut de la page */
    left: 0; /* Aligne à gauche */
    width: 100%; /* Largeur de 100% pour s'étendre sur toute la page */
    z-index: 1000; /* Assure que le header reste au-dessus d'autres éléments */
    border-bottom: 3px solid #52BF90;
}

.text
{
    font-family: "Titillium Web", sans-serif;
    font-weight: 400;
    font-style: normal;
}

.header-container
{
    max-width: 60%;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.header-name h1
{
    color: #fff;
    font-size: 24px;
}

.text a
{
    color: var(--textPrimaryColor); /* Couleur par défaut du texte */
    text-decoration: none; /* Supprime le soulignement du lien */
    transition: color 0.3s ease; /* Transition de couleur */
}

.text a:hover
{
    color: var(--textSecondaryColor); /* Couleur au survol */
}

nav ul
{
    list-style: none;
    display: flex;
}

nav ul li a
{
    color: var(--textPrimaryColor);
    text-decoration: none;
    font-size: 20px;
    transition: color 0.3s ease;
}

nav ul li
{
    margin-left: 20px;
}

nav ul li a
{
    color: var(--textPrimaryColor);
    text-decoration: none;
    font-size: 20px;
    transition: color 0.3s ease;
}

nav ul li a:hover
{
    color: var(--textSecondaryColor);
}

/* Styles pour la mise en page */
.introduction-container
{
    position: relative;
    width: 60%;
    margin: 120px auto;
    justify-content: center;
    display: flex;           /* Utilise flexbox pour aligner les éléments horizontalement */
    align-items: center;     /* Aligne verticalement l'image et le texte */
    gap: 100px;               /* Ajoute un espace entre l'image et le texte */
    background-size: cover;
    background-position: center;
    z-index: 1;
}

.portrait
{
    width: 300px;
    background-image: url('../Images/MeAndChopp.webp');
    background-position: 48% 42%; /* Montre le coin supérieur gauche de l'image */
    background-size: 230%; /* Taille normale */
    border-radius: 16px;
    aspect-ratio: 1/1;
}

.image
{
    max-width: 50%;          /* L'image occupe 50% de la largeur du conteneur */
    height: auto;            /* Maintient les proportions de l'image */
}

.introduction-text
{
    font-family: "Titillium Web", sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: 20px;
    max-width: 50%;
    color: var(--textPrimaryColor);
}

.introduction-text h2
{
    margin-bottom: 10px;
    color: var(--textSecondaryColor);
}

.introduction-text p
{
    margin-bottom: 10px;
}

.project-grid
{
    display: flex;
    flex-direction: column;
    /* margin: 20px; */
}

.bandeau-container:nth-child(odd)
{
    background-color: var(--backgroundColorSecondary);
}

.bandeau-container
{
    display: flex;
    position: relative;
    justify-content: center;
    width: 100%;
    height: 420px;
    align-items: center;
}

.bandeau-link
{
    display: flex;
    text-decoration: none; /* Supprime le soulignement du lien */
    color: inherit; /* Garde la couleur du texte */
    width: 60%;
    height: 360px;
    align-items: center;
}

/* Style du bandeau */
.bandeau
{
    width: 100%; /* Prend toute la largeur de l'écran */
    height: 100%; /* Hauteur du bandeau */
    background-size: cover; /* Permet de zoomer l'image pour couvrir le bandeau */
    background-position: center; /* Centre l'image dans le bandeau */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    color: var(--textPrimaryColor); /* Couleur du texte */
    text-align: center;
    position: relative;
    overflow: hidden; /* Cache toute partie de l'image qui dépasse */
    border: 2px solid var(--textSecondaryColor);
}

#asterix
{
    background-image: url('../Images/AsterixObelixForest.webp'); /* Lien correct */
}

#areWeDead
{
    background-image: url('../Images/AWD_Truck_2.webp'); /* Lien vers l'image de fond */
}

#timeTravel1
{
    background-image: url('../Images/TT1_Prehistoire_2.webp'); /* Lien vers l'image de fond */
}

#planetParty
{
    background-image: url('../Images/PlanetParty_Villa.webp'); /* Lien vers l'image de fond */
}

#arrowDash
{
    background-image: url('../Images/ArrowDash.webp'); /* Lien vers l'image de fond */
}

#recompressor
{
    background-image: url('../Images/recompressor.webp'); /* Lien vers l'image de fond */
}

#kingOfTrials
{
    background-image: url('../Images/KingOfTrials.jpg'); /* Lien vers l'image de fond */
}

.left-overlay
{
    position: absolute;
    left: -100%;
    width: 100%; /* Largeur suffisante pour couvrir tout le bandeau */
    height: 100%;
    background-color: rgba(0, 0, 0, 0.8); /* Couleur de la bande */
    clip-path: polygon(10% 0%, 100% 0%, 90% 100%, 0% 100%); /* Forme de parallélogramme */
    transition: left 0.8s ease; /* Transition pour faire venir la bande de droite */
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
}

.left-overlay .overlay-text-container
{
    position: absolute;
    right: 8%;
    width: 550px;
    text-align: center;
}

.mobile-game-information-container
{
    display: none;
}

/* Effet de survol */
.bandeau:hover .left-overlay
{
    left: -50%; /* La bande s'arrête au milieu du bandeau */
}

.bandeau:hover .overlay .text
{
    opacity: 1; /* Le texte devient visible */
}

.game-title
{
    text-align: left;
    font-family: "Titillium Web", sans-serif;
    font-weight: 600;
    font-size: 26px;
    font-style: normal;
}

.game-information
{
    display: flex;
    gap: 5%;
}

.game-specs
{
    display: flex;
    flex-direction: column;
    flex: 1.5;
    text-align: left;
    right: 50px;
    border-left: 2px solid var(--textSecondaryColor);
    padding-left: 20px;
}

.game-pitch
{
    flex: 2;
    text-align: justify;
}

@media (max-width : 2560px)
{
    .bandeau-link
    {
        width: 80%;
    }
}

@media (max-width : 1920px)
{
    .bandeau-link
    {
        width: 80%;
    }

    .header-container
    {
        max-width: 80%;
    }
}

@media (orientation: portrait)
{
    header
    {
        padding: 30px 0;
    }

    .header-container
    {
        max-width: 80%;
    }

    .header-name h1
    {
        font-size: 30px;
    }

    .text a
    {
        font-size: 30px;
    }

    .portrait
    {
        width: 45%;
    }

    .introduction-container
    {
        flex-direction: column;  /* Sur les petits écrans, l'image et le texte s'empilent */
        gap: 25px;
        width: 100%;
    }

    .image, .introduction-text
    {
        max-width: 80%;         /* L'image et le texte occupent 100% de la largeur */
        font-size: 14px;
    }

    .bandeau-container
    {
        flex-direction: column;
        height: 720px;
    }

    .bandeau-link
    {
        width: 95%;
    }

    .left-overlay
    {
        display: none;
    }

    .mobile-game-information-container
    {
        display: flex;
        flex-direction: column;
        width: 80%;
        padding: 25px 0 0 0;
        color: var(--textPrimaryColor);
    }

    .game-information
    {
        font-size: 24px;
    }
}