/* Importation de la police Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Snippet&display=swap');

/* Définition des variables de couleur et de style */
:root {
    --dark-color: #FFCC00; /* Jaune foncé */
    --light-color: #9A0000; /* Rouge */
    --main-background: #FFFFFF; /* Blanc */
    --primary-background: #FFFFFF; /* Blanc */
    --primary-textColor: #000000; /* Noir */
    --secondary-background: #FFEFAF; /* Jaune clair */
    --secondary-textColor: #9A0000; /* Rouge */
    --accent-background: #9A0000; /* Rouge */
    --accent-textColor: #9A0000; /* Rouge */
    --primary-gradient: linear-gradient(210deg, #FFE100, #D7AC00); /* Dégradé jaune à blanc */
    --secondary-gradient: linear-gradient(180deg, #FFCC00, #FFEFAF); /* Dégradé jaune à jaune clair */
}

/* Styles globaux du corps et des éléments principaux */
body {
    background: var(--main-background);
    color: var(--primary-textColor);
}

/* Styles de la navigation principale */
nav.main-menu ul.nav li a {
    color: #000000; /* Noir, pour un contraste élevé et une lisibilité maximale */
}

nav.main-menu ul.nav li a:hover {
    color: #FFB300; /* Couleur du texte au survol, par exemple jaune */
}

/* Styles spécifiques pour les headers */
h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6 {
    font-size: clamp(14px, 5vw, 28px);
    font-family: 'Snippet', cursive !important;
}
.page-header {
    display: none;
}

/* Styles des conteneurs, boutons et éléments de formulaire */
.container-header, .btn.btn-primary, .btn.btn-secondary, .form-control {
    background-color: var(--primary-background);
    color: var(--primary-textColor);
}

.container-header {
    background-image: var(--primary-gradient);
}

.btn.btn-secondary {
    background-color: var(--secondary-background);
    border-color: var(--secondary-background);
    color: var(--secondary-textColor);
}

.form-control {
    border: 1px solid var(--dark-color);
    border-radius: 0;
}

label {
    font-weight: bold;
}

/* Styles des cartes et des infos */
.card, .card-header, .card-body, .bg-info {
    border: 1px solid var(--primary-background);
    background-color: var(--primary-background);
    color: var(--primary-textColor);
}

.card.secondary, .card-header.secondary, .card-body.secondary {
    border: 1px solid var(--secondary-background);
    background-color: var(--secondary-background);
    color: var(--secondary-textColor);
}

/* Styles pour la sélection de texte */
::selection {
    background-color: var(--accent-background);
    color: var(--dark-color);
}

/* Styles des conteneurs d'image et de texte */
.content-container {
    display: flex;
    flex-wrap: wrap;
    gap: 20px; /* Espacement entre les blocs */
    justify-content: space-around; /* Répartir les blocs horizontalement */
}

.image-container {
    display: flex;
    flex-direction: column;
    align-items: center; /* Centrer l'image et le texte horizontalement */
    flex: 1 1 18%; /* Largeur par défaut de 18% pour en placer plus sur la même ligne */
    max-width: 18%;
    text-align: center;
    padding: 15px;
    box-sizing: border-box;
    border: 1px solid #eaeaea; /* Bordure légère pour mieux délimiter chaque bloc */
    background-color: #f9f9f9; /* Fond léger pour chaque bloc */
    border-radius: 8px; /* Coins arrondis pour un design plus moderne */
    min-width: 120px;
}

/* Uniformiser la taille des images */
.sponsor-logo {
    width: 100px; /* Largeur fixe pour toutes les images */
    height: 100px; /* Hauteur fixe pour toutes les images */
    object-fit: contain; /* Ajuste l'image à l'intérieur sans déformation */
    margin-bottom: 10px;
}

/* Responsive Design */

/* Pour les écrans larges */
@media (min-width: 1200px) {
    .image-container {
        flex: 1 1 15%; /* Largeur de 15% pour afficher plus de blocs côte à côte sur les très grands écrans */
        max-width: 15%;
    }
}

/* Pour les tablettes */
@media (max-width: 1024px) {
    .image-container {
        flex: 1 1 23%; /* Largeur de 23% pour les écrans de taille moyenne */
        max-width: 23%;
    }
}

/* Pour les petits écrans */
@media (max-width: 768px) {
    .image-container {
        flex: 1 1 48%; /* Largeur de 48% pour les petits écrans */
        max-width: 48%;
    }

    .sponsor-description {
        display: none; /* Masquer les descriptions sur mobile */
    }
}

/* Pour les très petits écrans (smartphones) */
@media (max-width: 480px) {
    .image-container {
        flex: 1 1 100%; /* Largeur de 100% pour les écrans de moins de 480px */
        max-width: 100%;
    }
}

/* Styles spécifiques pour les icônes actives */
li.active a.menu__yoga span {
    color: #064789;
}

li.active a.menu__pilates span {
    color: #db504a;
}

li.active a.menu__stress span {
    color: #679436;
}