/* Styles généraux */
body {
    font-family: 'Roboto', sans-serif; /* Police moderne */
    margin: 0;
    padding: 0;
    background-color: #f4f4f4; /* Fond gris clair */
    color: #333; /* Couleur de texte principale */
    line-height: 1.6;
}

h1, h2, h3, h4 {
    color: #0056b3; /* Bleu principal pour les titres */
}

a {
    color: #0056b3;
    text-decoration: none; /* Pas de soulignement par défaut */
}

a:hover {
    text-decoration: underline; /* Soulignement au survol */
}

img {
    max-width: 100%; /* Assure que les images ne dépassent pas leur conteneur */
    height: auto;
}

/* Conteneur principal pour centrer le contenu */
.site-header, .main-nav, .main-content, .site-footer {
    max-width: 1200px;
    margin: 0 auto; /* Centre le contenu */
    padding: 1rem;
}

/* En-tête */
.site-header {
    display: flex;
    justify-content: space-between; /* Espace les éléments */
    align-items: center; /* Centre verticalement */
    background-color: #ffffff; /* Fond blanc */
    padding: 1rem 2rem;
    border-bottom: 3px solid #0056b3; /* Bordure bleue */
}

.site-header h1 {
    margin: 0;
    font-size: 1.8rem;
    color: #333; /* Couleur du titre principal */
    text-align: center;
}

.logo-container {
    flex-shrink: 0; /* Empêche les logos de rétrécir */
}

.logo {
    max-height: 150px; /* Taille max des logos */
    width: auto;
}


/* Navigation principale */
.main-nav {
    background-color: #0056b3; /* Fond bleu */
    padding: 0.5rem 1rem; /* Ajustement du padding */
    margin-bottom: 2rem; /* Espace sous la navigation */
}

.main-nav .nav-row { /* Cible les ul avec la classe nav-row dans .main-nav */
    list-style: none; /* Enlève les puces */
    padding: 0;
    margin: 0 auto; /* Centre la liste horizontalement */
    display: flex; /* Affiche les liens en ligne */
    flex-wrap: wrap; /* Permet aux liens de passer à la ligne si nécessaire */
    justify-content: center; /* Centre les liens dans leur ligne */
    /* Optionnel: Ajouter un peu d'espace entre les deux lignes */
    /* margin-bottom: 0.5rem; */
}

/* Assurez-vous que les styles pour li et a restent les mêmes */
.main-nav li {
    margin: 0.5rem; /* Espace autour des liens */
}

.main-nav a {
    color: #ffffff; /* Texte blanc */
    padding: 0.8rem 1.2rem; /* Espace intérieur des "boutons" */
    display: block; /* Permet d'appliquer le padding */
    border-radius: 5px; /* Coins arrondis */
    background-color: #007bff; /* Bleu un peu plus clair pour les boutons */
    transition: background-color 0.3s ease; /* Transition douce au survol */
    white-space: nowrap; /* Empêche le texte des boutons de passer à la ligne */
}

.main-nav a:hover {
    background-color: #004494; /* Bleu plus foncé au survol */
    text-decoration: none; /* Pas de soulignement au survol */
}

/* Ajustement pour le conteneur nav pour s'adapter aux deux lignes */
.main-nav {
    background-color: #0056b3; /* Fond bleu */
    padding: 0.5rem 1rem; /* Ajustement du padding vertical si nécessaire */
    margin-bottom: 2rem; /* Espace sous la navigation */
}


.main-nav li {
    margin: 0.5rem; /* Espace autour des liens */
}

.main-nav a {
    color: #ffffff; /* Texte blanc */
    padding: 0.8rem 1.2rem; /* Espace intérieur des "boutons" */
    display: block; /* Permet d'appliquer le padding */
    border-radius: 5px; /* Coins arrondis */
    background-color: #007bff; /* Bleu un peu plus clair pour les boutons */
    transition: background-color 0.3s ease; /* Transition douce au survol */
}

.main-nav a:hover {
    background-color: #004494; /* Bleu plus foncé au survol */
    text-decoration: none; /* Pas de soulignement au survol */
}

/* Contenu principal */
.main-content {
    background-color: #ffffff; /* Fond blanc pour le contenu */
    padding: 2rem;
    border-radius: 8px; /* Coins légèrement arrondis */
    box-shadow: 0 2px 5px rgba(0,0,0,0.1); /* Ombre légère */
}

.page-title {
    text-align: center;
    font-size: 2.5rem;
    margin-bottom: 2rem;
    color: #007bff; /* Titre principal en bleu */
}

.content-columns {
    display: flex; /* Met les colonnes côte à côte */
    gap: 2rem; /* Espace entre les colonnes */
    flex-wrap: wrap; /* Permet aux colonnes de passer l'une sous l'autre sur petits écrans */
}

.welcome-section {
    flex: 2; /* Prend 2/3 de la largeur */
    min-width: 300px; /* Largeur minimale */
}

.news-section {
    flex: 1; /* Prend 1/3 de la largeur */
    min-width: 300px;
    background-color: #e9ecef; /* Fond légèrement différent pour les news */
    padding: 1.5rem;
    border-radius: 8px;
}

.news-section h3 {
    margin-top: 0;
    border-bottom: 2px solid #0056b3;
    padding-bottom: 0.5rem;
}

.news-item {
    margin-bottom: 1.5rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid #ced4da; /* Séparateur léger */
}

.news-item:last-child {
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: none; /* Pas de bordure pour le dernier élément */
}

.news-item h4 {
    margin-bottom: 0.5rem;
    color: #007bff;
}

/* Pied de page */
.site-footer {
    text-align: center;
    margin-top: 018:02 24/04/2025rem;
    padding: 1rem 1rem;
}

.site-footer h4 {
    color: #ffffff; /* Titre blanc */
    margin-bottom: 1.5rem;
}

.gallery {
    display: flex;
    justify-content: center;
    gap: 1rem; /* Espace entre les images */
    flex-wrap: wrap; /* Passage à la ligne sur petits écrans */
    margin-bottom: 1.5rem;
}

.gallery img {
    max-width: 150px; /* Taille des images de la galerie */
    height: auto;
    border-radius: 5px; /* Coins arrondis */
    border: 2px solid #ffffff; /* Bordure blanche */
}

.site-footer p {
    font-size: 0.9rem;
    color: #0056b3; /* Couleur du copyright */
}

/* Styles pour les petits écrans (Responsive) */
@media (max-width: 768px) {
    .site-header {
        flex-direction: column; /* Empile les éléments de l'en-tête */
        text-align: center;
    }

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

     .logo-container {
        margin-bottom: 0.5rem;
    }

    .main-nav ul {
        flex-direction: column; /* Empile les liens de navigation */
        align-items: center;
    }

    .content-columns {
        flex-direction: column; /* Empile les colonnes de contenu */
    }

    .welcome-section, .news-section {
        flex: 1 1 100%; /* Prend toute la largeur */
    }
}
/* --- Styles pour le défilement des News --- */

.news-section {
    /* S'assurer que le padding est appliqué ici si besoin */
    padding: 1.5rem;
    background-color: #e9ecef;
    border-radius: 8px;
    /* Garder les autres styles existants pour .news-section */
}

.news-section h3 {
     margin-top: 0;
     margin-bottom: 1rem; /* Espace sous le titre */
     border-bottom: 2px solid #0056b3;
     padding-bottom: 0.5rem;
}


.news-scroll-container {
    height: 200px; /* Hauteur fixe de la zone visible - AJUSTER SI NÉCESSAIRE */
    overflow: hidden; /* Cache le contenu qui dépasse */
    position: relative; /* Utile si on veut positionner des éléments absolus à l'intérieur */
    border: 1px solid #ced4da; /* Optionnel: légère bordure */
    border-radius: 4px; /* Optionnel: coins arrondis */
    padding: 0.5rem; /* Optionnel: espace intérieur */
}

.news-scroll-content {
    /* Anime le déplacement vertical */
    animation: scrollUp 15s linear infinite; /* Nom, durée, rythme, répétition */
    /* Calcule de la translation: -50% car on a dupliqué le contenu */
}

/* Animation Keyframes */
@keyframes scrollUp {
    0% {
        transform: translateY(0%);
    }
    100% {
        /* Déplace vers le haut de la hauteur d'un jeu d'articles (50% de la hauteur totale du contenu animé) */
        transform: translateY(-50%);
    }
}

/* Optionnel : Mettre l'animation en pause au survol */
.news-scroll-container:hover .news-scroll-content {
    animation-play-state: paused;
}

/* Styles pour les articles dans la zone de défilement */
.news-scroll-content .news-item {
    margin-bottom: 1.5rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid #ced4da; /* Séparateur léger */
}

/* Enlever la bordure du tout dernier élément (qui est une copie) */
.news-scroll-content .news-item:last-child {
     border-bottom: none;
     padding-bottom: 0; /* Ajustement pour coller à la copie qui suit */
}

.news-scroll-content h4 {
    margin-bottom: 0.5rem;
    color: #007bff;
}

.news-scroll-content p {
    margin-top: 0.3rem;
    margin-bottom: 0.3rem;
    font-size: 0.95rem; /* Taille de police légèrement ajustée */
}

/* --- Fin des styles pour le défilement des News --- */

/* Basic styling for the info boxes */
.info-box {
    border: 1px solid #ddd; /* Example border */
    padding: 15px; /* Add some space inside the box */
    margin-bottom: 20px; /* Add space between boxes */
    border-radius: 8px; /* Optional: rounded corners */
    background-color: #f9f9f9; /* Optional: light background color */
}

.info-box h3 {
    margin-top: 0; /* Remove top margin for headings inside boxes */
    color: #333; /* Example heading color */
}

/* Styling for the image */
.page-image {
    max-width: 40%; /* Make sure the image is responsive */
    height: auto; /* Maintain aspect ratio */
    display: block; /* Center the image if desired */
    margin: 20px auto; /* Add space above/below and center */
    border: 1px solid #ddd; /* Optional: border around the image */
    border-radius: 8px; /* Optional: rounded corners for the image */
}

.responsible-person {
    font-size: 1.1em; /* Make the text slightly larger */
    font-weight: bold; /* Make the text bold */
    text-align: center; /* Center the text */
    margin-top: -10px; /* Adjust the space above the text (negative value pulls it closer to the title) */
    margin-bottom: 20px; /* Add space below the text */
    color: #555; /* Optional: change the text color */
}

/* You might also want to adjust the layout of the main content
   if you want the boxes to appear side-by-side on larger screens.
   This would involve modifying the .main-content or creating a
   container for the boxes using Flexbox or Grid.
*/

/* Custom styles for side-by-side sections */
.side-by-side-container {
    display: flex;
    flex-wrap: wrap; /* Allow items to wrap on smaller screens */
    gap: 20px; /* Add space between the boxes */
    margin-bottom: 20px; /* Add space below the container */
}

.side-by-side-container .qui-sommes-nous-content {
    flex: 1; /* Allow sections to grow and shrink */
    min-width: 300px; /* Prevent sections from becoming too narrow */
    /* Ensure the info-box padding and border are included in the element's total width and height */
    box-sizing: border-box;
}

.side-by-side-container .info-box {
    height: 100%; /* Make info-boxes fill the height of the flex container */
    display: flex; /* Use flex to align content vertically within the info-box if needed */
    flex-direction: column; /* Stack content inside info-box */
}