/* Reset et polices */
body {
    font-family: 'Roboto', sans-serif;
    margin: 0;
    padding: 0;
    color: #333;
    line-height: 1.6;
}

.container {
    width: 90%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;
}

/* En-tête */
.header {
    background: #0097B2; /* Notre couleur */
    color: white;
    text-align: center;
    padding: 0.2rem 0;
}

.header h1 {
    margin: 0;
    font-size: 1.5rem;
}

.slogan {
    font-size: 1.2rem;
    margin-top: 10px;
}

.logo {
    max-width: 150px;
    margin-bottom: 1rem;
}

/* Navigation */
.navbar {
    background: #f8f9fa;
    padding: 1rem 0;
    position: sticky;
    top: 0;
    z-index: 100;
}

.navbar ul {
    display: flex;
    list-style: none;
    justify-content: center;
    padding: 0;
    margin: 0;
}

.navbar ul li {
    margin: 0 1rem;
}

.navbar ul li a {
    text-decoration: none;
    color: #0097B2;
    font-weight: 700;
}

/* Sections */
.section {
    padding: 3rem 0;
    text-align: center;
}

.section h2 {
    margin-bottom: 2rem;
    color: #0097B2;
}

/* Équipe */
.candidats {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1rem;
}

.candidat {
    width: 200px;
    text-align: center;
}

.candidat img {
    width: 100%;
    border-radius: 50%;
    margin-bottom: 1rem;
}

/* Programme */
.programme-item {
    background: #f8f9fa;
    padding: 0.5rem;
    margin: 1rem 0;
    border-radius: 5px;
}

/* Contact */
.contact-form {
    max-width: 500px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.contact-form input,
.contact-form textarea {
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 5px;
}

.contact-form button {
    background: #0097B2;
    color: white;
    border: none;
    padding: 10px;
    border-radius: 5px;
    cursor: pointer;
}

/* Pied de page */
.footer {
    background: #333;
    color: white;
    text-align: center;
    padding: 1rem 0;
}

.footer .reseaux a {
    color: white;
    margin: 0 10px;
    text-decoration: none;
}

/* Photo de groupe sous le menu */
.photo-groupe {
    padding: 0;
    margin: 0;
    background: #f8f9fa; /* Fond clair pour contraster */
}

.group-photo {
    width: 100%; /* Prend toute la largeur */
    max-height: 500px; /* Hauteur maximale */
    object-fit: cover; /* Remplit l'espace sans déformation */
    display: block; /* Évite les marges indésirables */
}

.photo-caption {
    text-align: center;
    padding: 1rem 0;
    font-style: italic;
    color: #555;
}

.photo-caption p {
    margin: 0;
    font-size: 1.1rem;
}



:root {
    --base-font-size: 16px; /* Taille de base pour 1rem */
    --scale-factor: 0.8; /* Facteur de réduction pour les petits écrans */
}

/* Réinitialisation pour une base cohérente */
html {
    font-size: var(--base-font-size);
}

@media (max-width: 768px) {
    html {
        font-size: calc(var(--base-font-size) * var(--scale-factor)); /* Réduit toutes les polices sur mobile */
    }
}