header {
    background-color: var(--bordeaux);
    color: var(--blanc);
    text-align: center;
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2);
    background-image: url('../images/header_bcg03.webp');
    background-size: cover; /* Optionnel : ajuste la taille pour couvrir tout le header */
    background-position: center; /* Optionnel : centre l'image */
}

header h1 {
    font-size: 2.5rem;
    margin: 0;
    font-family: 'Georgia', serif;
    letter-spacing: 2px;
}

/* Cacher le texte des liens à partir de 650px */
@media (max-width: 650px) {
    nav a span {
        display: none; /* Cache le texte */
    }
    nav a img {
        width: 30px; /* Ajuste la taille de l'icône si nécessaire */
        height: auto;
    }
}

/* Optionnel : pour les grands écrans, tu peux personnaliser les icônes et le texte */
@media (min-width: 651px) {
    nav a span {
        display: inline; /* Affiche le texte normalement */
    }
}


nav {
    display: flex;
    justify-content: center;
    gap: 15px;
    flex-wrap: wrap;
    margin: 20px 0;
}

nav a {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 10px 15px;
    background-color: var(--bordeaux);
    color: var(--blanc);
    text-decoration: none;
    font-family: 'Arial', sans-serif;
    font-size: 1rem;
    border-radius: 15px; /* Arrondir les coins pour un effet d'étiquette */
    border: solid 1px #ffffff;
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
    transition: background-color 0.3s ease, box-shadow 0.3s ease;
}

.color-row {
    height: 10px; /* Fixe la hauteur de la rangée */
}

.logo-img{
    vertical-align: middle;
    width: 100px;
    margin-top: -40px;
    background-color: white;
    border-radius: 50%;
    padding: 5px;
    z-index: 1; 
    box-shadow: 0px 6px 12px rgba(0, 0, 0, 0.2);
}

/* Style d'icône à l'intérieur des étiquettes */
nav a img {
    width: 20px;
    height: 20px;
}

/* Effet de hover */
nav a:hover {
    background-color: var(--bordeaux-Btn);
    color: var(--blanc);
    box-shadow: 0px 6px 12px rgba(0, 0, 0, 0.2);
}

/* Texte au survol */
nav a:hover span {
    font-weight: bold;
}