/* Réinitialisation des marges et padding */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

.ligne-centree {
    width: 50%;
    margin: auto;
}


.intro-section{
    display:flex;
    align-items:center;
    gap:40px;

    margin:40px 0;
}

.intro-text{
    flex:2;
}

.intro-video{
    flex:1;

    display:flex;
    justify-content:center;
}

.intro-video video{
    width:100%;
    max-width:350px;

    border-radius:12px;
}

/* Responsive mobile */

@media(max-width:900px){

    .intro-section{
        flex-direction:column;
    }

    .intro-video video{
        max-width:250px;
    }
}


/* ======================================================================================= */
/* ======================================================================================= */


footer {
    font-size: 0.8em; /* Réduit la taille du texte à 80% de la taille par défaut */
}


/* ======================================================================================= */
/* ======================================================================================= */


/* Style général pour les mentions légales */
.mentions-legales {
    font-size: 0.8em; /* Taille réduite */
    line-height: 1.4; /* Espacement entre les lignes pour une meilleure lisibilité */
    max-width: 800px; /* Largeur maximale pour éviter des lignes trop longues */
    margin: 0 auto; /* Centre le contenu */
    padding: 20px; /* Espacement interne */
    color: #333; /* Couleur de texte */
}

/* Style pour les titres dans les mentions légales */
.mentions-legales h1,
.mentions-legales h2 {
    color: #2c3e50; /* Couleur plus foncée pour les titres */
    margin-top: 1.5em; /* Espacement avant le titre */
    margin-bottom: 0.5em; /* Espacement après le titre */
}

/* Style pour les liens dans les mentions légales */
.mentions-legales a {
    color: #3498db; /* Couleur bleue pour les liens */
    text-decoration: none; /* Supprime le soulignement par défaut */
}

.mentions-legales a:hover {
    text-decoration: underline; /* Souligne au survol */
}

/* ======================================================================================= */
/* ======================================================================================= */

/* ===== Style du menu (centré et responsive) ===== */
nav {
    /* background-color: rgba(255, 255, 255, 0.95); */
    position: relative;
    top: 0;
    width: 100%;
    height: auto;
    z-index: 1000;
    display: flex;
    justify-content: center; /* Centre horizontalement */
    align-items: center;
    padding: 10px 0; /* Supprime le padding horizontal pour éviter le décalage */
    /* box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); */
}

/* Conteneur pour la liste du menu (centré) */
nav .menu-container {
    display: flex;
    justify-content: center; /* Centre la liste */
    width: 100%;
    max-width: 1200px; /* Largeur maximale pour éviter que le menu ne soit trop large */
}

/* Style de la liste du menu */
nav ul {
    list-style: none;
    display: flex;
    margin: 0;
    padding: 0;
    justify-content: center; /* Centre les éléments de la liste */
}

/* Espacement entre les éléments du menu */
nav ul li {
    margin: 0 15px;
}

/* Style des liens */
nav ul li a {
    color: darkgreen;
    text-decoration: none;
    padding: 10px 15px;
    display: block;
    transition: color 0.3s;
}

nav ul li a:hover {
    color: lightgreen;
}

nav ul li a.active {
    font-weight: bold;
    color: green;
}

.menu-toggle {
    display: none;
    cursor: pointer;
}

/* ===== Style pour mobile ===== */
@media (max-width: 768px) {
    /* Désactive le centrage horizontal pour mobile */
    nav {
        justify-content: flex-start; /* Aligne à gauche pour laisser de la place au bouton hamburger */
        min-height: 50px; /* Hauteur minimale pour le menu */
        padding: 10px 20px; /* Ajoute un padding pour espacer le bouton */
    }

    /* Masque la liste du menu par défaut */
    nav ul {
        display: none;
        flex-direction: column;
        position: absolute;
        top: 100%; /* Positionne sous le menu */
        left: 0;
        width: 100%;
        background-color: rgba(255, 255, 255, 0.95);
        padding: 10px 0;
        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    }

    /* Affiche la liste quand la classe "active" est ajoutée */
    nav ul.active {
        display: flex;
    }

    /* ===== Menu hamburger (pour mobile) ===== */
    .menu-toggle {
       display: block;
       position: relative;
       right: auto;
       font-size: 24px;
       top: 10px;
       color: darkgreen;
       background-color: rgba(255, 255, 255, 0.95); /* Ajoute un fond blanc */
       padding: 5px 10px; /* Espacement pour éviter que le bouton ne touche les bords */
       border-radius: 3px; /* Optionnel : coins arrondis */
       margin-left: auto; /* Aligne à droite dans le conteneur */
       order: 1; /* Place le bouton avant la liste du menu */
    }

    /* Style des liens en mobile */
    nav ul li {
        margin: 5px 0;
        text-align: center;
    }

    nav ul li a {
        padding: 10px;
        display: block;
        width: 100%;
    }
}

/* ======================================================================================= */
/* ======================================================================================= */

.bannerODD {
    width: 100%;
    min-height: 150px;
    margin-top: 20px;

    display: flex;
    align-items: center;

    /* background-color: #f5f5f5; */
    background-color: white;
    /* border: 1px solid #ddd; */
}

.bannerTexte {
    width: 70%;
    padding: 20px;
    font-size: 1.6em;
    line-height: 1.4;
    font-weight: 500;
    text-align: center;
    color: #009edb; /* bleu ONU */
}

.bannerLogo {
    width: 30%;
    text-align: center;
}

.bannerLogo img {
    width: auto;
    height: auto;
    max-width: 100%;
}

/* RESPONSIVE */
@media (max-width: 768px) {
    .bannerODD {
        flex-direction: column;
        text-align: center;
        padding: 10px;
    }

    .bannerTexte {
        width: 100%;
        font-size: 1em;
        padding: 10px;
    }

    .bannerLogo {
        width: 100%;
        margin-top: 10px;
    }

    .bannerLogo img {
        max-height: 100px;
    }
}


/* Style de la bannière d'image */
.bannerODD-IMG {
    width: 100%;
    height: 150px; /* Hauteur de la bannière */
    background-image: url('/Images/bannerODD.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    margin-top: 20px; /* Pour éviter que l'image soit cachée sous le menu */
    position: relative;
}


/* Style de la bannière d'image */
.banner {
    width: 100%;
    height: 300px; /* Hauteur de la bannière */
    background-image: url('Images/BuissonVie.jpg');
    background-size: cover;
    background-position: center;
    /* margin-top: 10px; */
    position: relative;
}

/* Style du contenu principal */
main {
    padding-top: 0; /* Plus besoin de padding-top car la bannière est sous le menu */
}

.content-container {
    width: 80%;
    max-width: 1280px;
    margin: 80px auto; /* Centre le contenu avec un espacement en haut */
    padding: 20px;
    background-color: white; /* Fond blanc pour le contenu */
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); /* Ombre légère pour le contenu */
}

h1, h2 {
    color: #2c5a2c;
    margin-bottom: 15px;
}

p {
    margin-bottom: 15px;
    line-height: 1.6;
}

ul {
    margin-left: 30px;
    margin-bottom: 15px;
}

a {
    color: #2c5a2c;
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}


/* Style des rapports en PDF */

/* ===============================
   Grille PDF
   =============================== */

.pdf-grid{
    display:grid;
    grid-template-columns:repeat(4, 1fr);
    gap:25px;
    margin-top:30px;
}

/* tablette */

@media(max-width:1000px){
    .pdf-grid{
        grid-template-columns:repeat(2, 1fr);
    }
}

/* mobile */
@media(max-width:600px){
    .pdf-grid{
        grid-template-columns:1fr;
    }
}

/* ===============================
   Carte PDF
   =============================== */

.pdf-card{
    background:white;
    border-radius:12px;
    padding:25px;
    text-align:center;
    box-shadow:0 2px 8px rgba(0,0,0,0.1);
    transition:transform 0.2s;
}

.pdf-card:hover{
    transform:translateY(-3px);
}

/* ===============================
   style de l'icone PDF
   =============================== */

.pdf-icon{
    width:70px;
    height:auto;
    margin-bottom:15px;
}

/* ===============================
   Titre des vignettes PDF
   =============================== */

.pdf-title{
    font-weight:bold;
    margin-bottom:10px;
    color:#222;
}

/* ===============================
   Texte descriptif pour les documents pdf
   =============================== */

.pdf-text{
    color:#555;
    line-height:1.5;
    font-size:0.95em;
}


/* ======================================================================================= */
/* ======================================================================================= */



/* =================================
 * Annuaire
 * ================================= */
 
 body{
    font-family:Arial,sans-serif;
    margin:40px;
    background:#f5f5f5;
}

h1{
    margin-bottom:30px;
}

/* ===============================
   Grille responsive pour l'affichage des annuaires sapiteurs et conseil scientifique
   =============================== */

.photo-grid{
    display:grid;
    /* 4 colonnes max */
    grid-template-columns:repeat(4, 1fr);
    gap:25px;
}

/* 2 colonnes sur écran moyen */
@media(max-width:1000px){
    .photo-grid{
        grid-template-columns:repeat(2, 1fr);
    }
}

/* 1 colonne sur mobile */
@media(max-width:600px){
    .photo-grid{
        grid-template-columns:1fr;
    }
}

.person{
    background:white;
    border-radius:10px;
    overflow:hidden;
    box-shadow:0 2px 8px rgba(0,0,0,0.1);
}

.person img{
    width:100%;
    height:320px;
    object-fit:cover;
    display:block;
}

.person-content{
    padding:15px;
}

.person-name{
    font-size:18px;
    font-weight:bold;
    margin-bottom:10px;
}

.person-text{
    color:#555;
    line-height:1.5;
}


/* ======================================================================================= */
/*  Mise en page portrait photo de Maria / Page Liens utiles */
/* ======================================================================================= */


.portrait-flex {
    display: flex;
    align-items: center;
    gap: 40px;
    margin: 20px 0;
}

.portrait-texte {
    flex: 3;
}

.portrait-photo {
    flex: 1;
    text-align: center;
}

.portrait-photo img {
    max-width: 80px;
    width: 100%;
    height: auto;
    border-radius: 10px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
}

/* Mode mobile */

@media (max-width: 800px) {
    .portrait-flex {
        flex-direction: column-reverse;
    }
    .portrait-photo img {
        max-width: 200px;
    }
}