body {
    background: linear-gradient(180deg, #f1ffeb 0%, #cdffc6 100%);
    margin: 0;
    padding: 0;
    min-height: 100vh;
    width: 100%;
    overflow-x: hidden;
    font-family: sans-serif;
}
*, ::before, ::after {
    box-sizing: border-box;
}

.navbar {
    background: linear-gradient(180deg, #e5f0e3 0%, #77a17228 100%);
    border-bottom: 1px solid #ffffffbd;
    height: 50px;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 20px 0 0;
    text-align: right;
    font-family: 'Helvetica', Courier, sans-serif;
    position: fixed;

}

.logo img {
    width: 50px;
    height: auto;
    -webkit-isolation: isolate;
    isolation: isolate;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);

}

.navbar ul {
    display: flex;
    flex-direction: row;
    align-items: center;
    list-style: none;
    margin: 0;
    padding: 0;
    height: 100%;
    text-align: right;
}

.navbar li {
    margin-left: 20px;
    text-align: right;
}

.navbar a {
    text-decoration: none;
    color: white;
    mix-blend-mode: difference;
    text-align: right;
    font-weight: 600;
}

/* Section globale avec le fond dégradé jaune/jaune pâle */ 
.project-section { 
padding: 80px 20px; 
display: flex; 
flex-direction: column; 
align-items: center; 
width: 100%; 
}

/* En-tête avec badge noir et logo */ 
.project-header { 
text-align: center; 
margin-bottom: 40px; 
}

.project-header .badge { 
background: #ffee57; 
color: #000000; 
padding: 6px 16px; 
font-weight: bold; 
border-radius: 50px; 
text-transform: uppercase; 
font-size: 14px; 
}

.project-logo { 
display: block; 
max-width: 220px; 
margin: 25px auto 0 auto; 
}

.cards-container { 
display: flex; 
flex-direction: column; 
gap: 20px; 
width: 100%; 
max-width: 650px; 
}

.cards-container img {
    width: 50px;
    height: auto;
    margin-left: 0;
}

.info-card { 
background: #ffffff; 
border-radius: 35px; 
padding: 25px 30px; 
display: flex; 
align-items: center; 
gap: 20px; 
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05); 
}

/* Typographie à l'intérieur des cartes */ 
.info-card h3 { 
margin: 0 0 8px 0; 
font-family: 'Helvetica', sans-serif; 
font-size: 24px; 
color: #000000; 
}

.info-card p { 
margin: 0; 
font-family: 'Helvetica', sans-serif; 
font-size: 16px; 
color: #333333; 
line-height: 1.4; 
}

/* Variantes de couleurs spécifiques (Ex: Morgann Music CP) */ 
.title-pink { 
color: #f38cb4 !important; 
}

.text-pink { 
color: #f38cb4 !important; 
}

/* Police stylisée pour la branche Game */ 
.title-tech { 
font-family: 'Courier New', Courier, monospace; 
font-weight: bold; 
letter-spacing: 1px; 
}

/* --- STYLES SÉCIFIQUES POUR TÉLÉPHONE --- */
@media (max-width: 768px) {
    /* On réduit un peu l'espace global sur mobile */
    .project-section {
        padding: 30px 15px;
    }

    /* Le logo s'adapte à la largeur de l'écran du téléphone */
    .project-logo {
        max-width: 160px;
        margin-top: 15px;
    }

    /* Ajustement du conteneur des cartes */
    .cards-container {
        gap: 15px; /* Moins d'espace entre les cartes sur mobile */
        width: 100%;
    }

    /* Adaptation de la carte blanche */
    .info-card {
        border-radius: 25px; /* Arrondis légèrement réduits pour les petits écrans */
        padding: 20px;       /* Moins de vide interne pour gagner de la place */
        flex-direction: row; /* Reste aligné horizontalement (icône à gauche, texte à droite) */
        align-items: flex-start; /* Aligne l'icône en haut si le texte est long */
        gap: 15px;
    }

    /* Si l'écran est vraiment très petit (mini smartphone), on empile l'icône */
    @media (max-width: 400px) {
        .info-card {
            flex-direction: column;
            align-items: center;
            text-align: center;
        }
    }

    /* Réduction des tailles de texte pour que ça ne déborde pas */
    .info-card h3 {
        font-size: 19px;
        margin-bottom: 4px;
    }

    .info-card p {
        font-size: 14px;
        line-height: 1.3;
    }
    
    /* Taille de l'icône ou de l'image dans la carte */
    .info-card img, .card-icon {
        width: 35px;
        height: 35px;
        font-size: 30px; /* Si c'est un émoji */
    }
}

/* --- ADAPTATION NAVBAR POUR TÉLÉPHONE --- */
@media (max-width: 768px) {
    
    .navbar {
        height: auto; /* On laisse la hauteur s'adapter si le menu s'empile */
        padding: 0px 15px;
        flex-direction: column; /* Aligne le logo au-dessus et les liens en dessous */
        gap: 10px; /* Crée un espace entre le logo et la liste de liens */
    }

    .navbar ul {
        flex-direction: row; /* Garde les liens sur une ligne, ou passe en 'column' si t'en as trop */
        flex-wrap: wrap;     /* Si les liens n'ont plus de place, ils passent à la ligne automatiquement */
        justify-content: center; /* Centre les liens sur l'écran du tel */
        width: 100%;
        padding: 5px 0;
        display: none;
    }

    .navbar li {
        margin-left: 12px;  /* On réduit l'espace entre les liens pour que ça passe sur un petit écran */
        margin-right: 12px;
    }

    .navbar a {
        font-size: 14px; /* On baisse un poil la taille du texte des liens */
    }

    .logo img {
        height: 50px; /* On rétrécit un peu le logo pour gagner de la place */
    }
}

/* 1. On nettoie la règle globale des liens pour qu'elle ne touche pas aux images */
.navbar a, .project-section a {
    text-decoration: none;
    color: white;
    font-weight: 600;
    /* SURTOUT PAS de mix-blend-mode ici */
}

/* 2. On applique l'effet UNIQUEMENT sur le texte des liens de la navbar */
.navbar ul li a {
    mix-blend-mode: difference;
}

/* 3. Sécurité absolue : on force TOUTES les images du site à ignorer les modes de fusion */
img, svg {
    mix-blend-mode: normal !important;
    isolation: isolate;
    box-shadow: none;
}

img {
    view-transition-name: none;
    forced-color-adjust: none;
    display: block;
    transform: translateZ(0);
}