/* --- Déclarations de polices personnalisées (Chaque police son @font-face séparé) --- */
@font-face {
    font-family: 'Ballerina';
    src: url('fonts/Ballerina.otf') format('opentype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}
/* Si vous avez d'autres polices comme Wild Love ou Simple Ornament pour d'autres parties du site,
   assurez-vous d'avoir leurs @font-face ici ou dans un autre fichier CSS comme format.css ou menu.css.
   Pour ce slider, seule Ballerina est mentionnée. */


/* --- Styles pour le conteneur du slider de banderole --- */
.banner-slider {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%; /* Prend 100% de la largeur du <td> parent */
    height: 100%; /* Prend 100% de la hauteur du <td> parent (qui est 220px) */
    overflow: hidden;
    white-space: nowrap;
    font-size: 0; /* Important pour supprimer l'espace entre les images inline-block */
    z-index: 0;
}

/* Styles pour les images individuelles dans le slider */
.banner-slider img {
    /* La largeur doit maintenant prendre la largeur du conteneur .banner-slider parent,
       qui elle-même s'adapte à la table de 1200px (ou moins si écran plus petit) */
    width: 100%; /* Chaque image prend 100% de la largeur du .banner-slider (ex: 1200px) */
    height: 220px; /* La hauteur fixe reste la même */
    object-fit: cover; /* Recadre l'image pour qu'elle couvre la zone sans déformation */
    object-position: center; /* Centre l'image dans son conteneur */
    display: inline-block; /* Pour qu'elles s'alignent horizontalement */
    vertical-align: top; /* Aide à l'alignement pour inline-block */
    flex-shrink: 0; /* Empêche les images de rétrécir dans le sliderTrack */
}

/* Styles pour le contenu (logo, titre, liens) par-dessus le slider */
.banner-content {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1; /* S'affiche au-dessus du slider */
    display: flex;
    align-items: center; /* Centre verticalement les enfants directs (banner-left, banner-center) */
    /* Utilisez `justify-content` de manière plus dynamique si le contenu est centré,
       ou `space-around` si vous voulez de l'espace partout */
    justify-content: center; /* Centre le contenu horizontalement dans le bandeau */
    padding: 0 20px; /* Un peu d'espace sur les côtés */
    box-sizing: border-box; /* Inclut le padding dans la taille */
    /* Pour aligner left, center, et right, il faudra peut-être une structure flexbox plus complexe
       ou une grille pour le contenu, mais le centrage est un bon point de départ */
}

/* Conteneur pour le logo à gauche */
.banner-left {
    flex-shrink: 0; /* Empêche le logo de rétrécir */
    /* Si vous voulez que le logo soit à gauche et le reste au centre, vous pouvez :
       position: absolute; left: 20px; top: 50%; transform: translateY(-50%);
       Mais cela complexifie le flexbox principal. Pour le moment, on centre tout. */
}

/* Style du logo */
.banner-logo {
    width: 180px; /* Largeur de votre GIF */
    height: 180px; /* Hauteur de votre GIF */
    object-fit: contain; /* IMPORTANT: Assure que le GIF rond reste rond et n'est pas étiré */
    /* margin-right: 20px; */ /* Si vous voulez un espace entre le logo et le centre */
}

/* Conteneur pour le titre et les liens, au centre */
.banner-center {
    flex-grow: 1; /* Permet à cette section de prendre l'espace restant au centre */
    display: flex;
    flex-direction: column; /* Organise le titre et les liens en colonne */
    align-items: center; /* Centre le titre et les liens horizontalement */
    justify-content: center; /* Centre le titre et les liens verticalement */
    text-align: center; /* Assure que le texte est centré */
    /* padding-bottom: 20px; */ /* Si vous voulez descendre un peu les liens */
}

/* Style du titre "Soc. Mycologique de Provence" */
.banner-title {
    font-family: 'Ballerina', sans-serif;
    color: white;
    font-size: 3.3em; /* Taille que vous avez définie */
    font-weight: normal;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8);
    margin-bottom: 10px;
    line-height: 1.1; /* Ajuste l'interligne si le titre est sur plusieurs lignes */
}

/* Conteneur pour les liens transparents (pour les regrouper) */
.banner-links {
    display: flex;
    flex-wrap: wrap; /* Permet aux liens de passer à la ligne si nécessaire */
    justify-content: center; /* Centre les liens entre eux */
    gap: 10px; /* Espace entre les liens */
    margin-top: 5px; /* Petit espace au-dessus des liens par rapport au titre */
}

/* Styles pour les liens transparents sur la banderole */
.transparent-banner-link {
    color: white;
    text-decoration: none;
    background-color: rgba(0, 0, 0, 0.4);
    padding: 8px 15px;
    border-radius: 5px;
    font-weight: bold;
    font-size: 1.1em;
    transition: background-color 0.3s ease, color 0.3s ease; /* Ajout transition pour la couleur */
    white-space: nowrap; /* Empêche les liens de se couper en deux */
}

.transparent-banner-link:hover {
    background-color: rgba(0, 0, 0, 0.7);
    color: #8B8DED; /* Couleur de survol comme sur smp.html */
}

/* --- Media Queries pour la Responsivité sur le bandeau --- */
@media (max-width: 1200px) {
    /* Lorsque la largeur de la fenêtre est inférieure à 1200px, la table se redimensionne.
       Nous devons ajuster la taille du texte et des éléments pour qu'ils restent lisibles. */
    .banner-title {
        font-size: 2.8em; /* Réduit la taille du titre */
    }
    .banner-logo {
        width: 150px; /* Réduit un peu le logo */
        height: 150px;
    }
    .transparent-banner-link {
        font-size: 1em; /* Réduit la taille des liens */
        padding: 6px 12px;
    }
}

@media (max-width: 900px) {
    .banner-title {
        font-size: 2.2em; /* Réduit encore plus le titre */
    }
    .banner-logo {
        width: 100px; /* Réduit encore le logo */
        height: 100px;
    }
    .transparent-banner-link {
        font-size: 0.9em; /* Réduit encore les liens */
        padding: 5px 10px;
    }
    /* Sur les petits écrans, on pourrait envisager d'empiler le logo et le contenu central */
    .banner-content {
        flex-direction: column; /* Empile le logo et le contenu central */
        justify-content: center;
        padding: 10px; /* Moins de padding */
    }
    .banner-left, .banner-center {
        margin: 5px 0; /* Un peu d'espace entre les éléments empilés */
    }
}

@media (max-width: 600px) {
    .banner-title {
        font-size: 1.8em;
    }
    .banner-logo {
        width: 80px;
        height: 80px;
    }
    .transparent-banner-link {
        font-size: 0.8em;
        padding: 4px 8px;
    }
}