/* ---- VARIABLES ---- */
:root {
   /* --primary-green: #405d47; /* Vert inspiré de la nature et du terroir */
    --primary-green: #1C3B6A; /* Vert inspiré de la nature et du terroir */
    --light-bg: #f4f4f4;
    --dark-text: #333333;
    --white-text: #ffffff;
    --accent-red: #d9534f; /* Rouge pour les boutons, inspiré du logo */
    --font-title: 'Montserrat', sans-serif;
    --font-body: 'Lato', sans-serif;
}

/* ---- RESET & STYLES GLOBAUX ---- */
body {
    margin: 0;
    font-family: var(--font-body);
    color: var(--dark-text);
    line-height: 1.6;
}

.container {
    width: 90%;
    max-width: 1100px;
    margin: 0 auto;
    padding: 20px 0;
}
.container-grey {
    width: 100%;
    max-width: 1600px;
    margin: 0 ;
    padding:  0;
     background-color: var(--light-bg);
}

h1, h2, h3 {
    font-family: var(--font-title);
    color: var(--primary-green);
    margin-top: 0;
}

h2 {
    text-align: center;
    font-size: 2.2em;
    margin-bottom: 40px;
}

a {
    text-decoration: none;
    color: var(--primary-green);
}

/* ---- HEADER ---- */
header {
    background-color: #ffffff;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    position: sticky;
    top: 0;
    z-index: 1000;
}

header .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 10px;
    padding-bottom: 10px;
}

.logo {
    font-family: var(--font-title);
    font-size: 1.5em;
    color: var(--primary-green);
}

nav ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
}

nav ul li {
    margin-left: 30px;
}

nav ul li a {
    font-family: var(--font-title);
    font-weight: 700;
    font-size: 1em;
    padding: 5px 10px;
    transition: color 0.3s;
}

nav ul li a:hover, nav ul li a.active {
    color: var(--accent-red);
    border-bottom: 2px solid var(--accent-red);
}

.social-icons a {
    margin-left: 15px;
}

.social-icons img {
    width: 24px;
    height: 24px;
    transition: transform 0.3s;
}

.social-icons img:hover {
    transform: scale(1.1);
}

/* ---- NOUVEAU CTA DANS LA NAVIGATION (Desktop) ---- */
.cta-nav-button {
    background-color: var(--accent-red);
    color: var(--white-text) !important;
    /* CHANGEMENT ICI : Réduction du padding vertical (5px) */
    padding: 5px 15px; 
    border-radius: 50px; 
    font-family: var(--font-title);
    font-weight: 700;
    font-size: 0.9em;
    margin-left: 25px; 
    transition: background-color 0.3s, transform 0.3s;
    white-space: nowrap; 
}

.cta-nav-button:hover {
    background-color: #c9302c;
    transform: translateY(-2px);
}
/* ---- BANNER ---- */
.banner {
    display: flex;
    align-items: center;
    justify-content: space-around;
    padding: 60px 5%;
    background-color: var(--primary-green);
    color: var(--white-text);
    text-align: center;
}

.banner-content {
    max-width: 50%;
}

.banner h1 {
    font-size: 3em;
    margin-bottom: 10px;
    color: var(--white-text);
    text-align: center;
}

.banner h2 {
    font-size: 1.5em;
    font-family: var(--font-body);
    font-weight: 400;
    color: rgba(255, 255, 255, 0.9);
    text-align: center;
}

.banner-img {
    width: 250px;
    height: 250px;
    border-radius: 50%;
    border: 5px solid var(--white-text);
    object-fit: cover;
}

/* ---- SECTIONS DE CONTENU ---- */
.content-section {
    padding-top: 60px;
    padding-bottom: 60px;
    text-align: center;
}

.content-section p {
    max-width: 800px;
    margin: 0 auto 1em auto;
    /* ANCIEN: text-align: left; */
    text-align: justify; /* NOUVEAU : Justifie le texte */
    text-justify: inter-word; /* Améliore le rendu sur certains navigateurs */
    font-size: 1.1em;
}

.bg-light {
    background-color: var(--light-bg);
    padding-top: 60px;
    padding-bottom: 60px;
}

/* ---- PRIORITÉS ---- */
.priorities-grid {
    display: flex;
    justify-content: space-around;
    gap: 30px;
    text-align: center;
    margin-top: 40px;
}

.priority-card {
    background-color: #ffffff;
    padding: 30px;
    border-radius: 8px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.08);
    flex: 1;
    transition: transform 0.3s, box-shadow 0.3s;
}

.priority-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 8px 25px rgba(0,0,0,0.12);
}

.priority-card .icon {
    width: 60px;
    height: auto;
    margin-bottom: 15px;
}

.priority-card h3 {
    font-size: 1.5em;
    margin-bottom: 10px;
}
/* Le style pour vos liens transformés en boutons */
.btn-programme {
    display: inline-block;
    padding: 5px 10px;
    background-color: #1C3B6A; /* Un rouge dynamique */
    color: white !important;    /* Force le texte en blanc */
    text-decoration: none;      /* Enlève le soulignement */
    border-radius: 30px;
    font-weight: bold;
    transition: background 0.3s ease;
    border: none;
    cursor: pointer;
}

.btn-programme:hover {
    background-color: #C1272D; /* Rouge plus sombre au survol */
}
/* ---- BOUTONS D'APPEL A L'ACTION (CTA) ---- */
.cta-button-container {
    text-align: center;
    margin-top: 40px;
}

.cta-button {
    background-color: var(--accent-red);
    color: var(--white-text);
    padding: 15px 30px;
    border-radius: 50px;
    font-family: var(--font-title);
    font-weight: 700;
    font-size: 1.1em;
    transition: background-color 0.3s, transform 0.3s;
    display: inline-block;
}

.cta-button:hover {
    background-color: #c9302c;
    transform: translateY(-3px);
}


/* ---- FOOTER ---- */
footer {
    background-color: var(--dark-text);
    color: var(--white-text);
    text-align: center;
    padding: 30px 0;
}

footer .container {
    padding: 0 20px;
}

footer p {
    margin: 10px 0;
}

footer a {
    color: var(--white-text);
    text-decoration: underline;
}

footer .social-icons {
    margin-top: 15px;
}

footer .social-icons img {
    filter: brightness(0) invert(1);
    opacity: 0.8;
}
footer .social-icons img:hover {
    opacity: 1;
}

.mentions-legales {
    font-size: 0.8em;
    opacity: 0.7;
    margin-top: 20px;
}/* ---- STYLES AJOUTÉS POUR LES PAGES EQUIPE ET PROGRAMME ---- */

/* En-tête de page générique */
.page-title-header {
    text-align: center;
    padding: 60px 0;
}
.page-title-header h1 {
    font-size: 2.8em;
    margin-bottom: 15px;
}
.page-title-header .subtitle {
    font-size: 1.2em;
    max-width: 800px;
    margin: 0 auto;
    color: #555;
}

/* Page Équipe */
.membre-details {
    display: flex;
    align-items: center;
    gap: 40px;
   /* AJOUTER OU MODIFIER CETTE LIGNE */
    text-align: justify; 
    
    /* Pour éviter un mot seul sur la dernière ligne */
    text-justify: inter-word; /* Recommandé pour la justification */
    margin-top: 40px;
}
.membre-photo {
    width: 200px;
    height: 200px;
    border-radius: 50%;
    object-fit: cover;
    object-position: 50% 20%;
    border: 4px solid var(--primary-green);
}
.membre-bio h3 {
    font-size: 2em;
    margin-bottom: 5px;
}
.membre-bio h4 {
    font-family: var(--font-body);
    font-weight: 700;
    color: #666;
    margin-top: 0;
    margin-bottom: 20px;
    font-size: 1.1em;
}
.team-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 30px;
}
.team-card {
    background-color: #ffffff;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.08);
    text-align: center;
}
.team-photo {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    object-fit: cover;
    object-position: 50% 20%;
    margin-bottom: 15px;
}
.team-card h3 {
    margin-bottom: 5px;
    font-size: 1.4em;
}
.team-card .competence {
    font-weight: 700;
    color: var(--primary-green);
    margin-bottom: 10px;
}
.team-card .bio-courte {
    font-size: 0.9em;
    line-height: 1.5;
    /* AJOUTER OU MODIFIER CETTE LIGNE */
    text-align: justify; 
    
    /* Pour éviter un mot seul sur la dernière ligne */
    text-justify: inter-word; /* Recommandé pour la justification */
}

/* Page Programme */
.programme-axe {
    margin-bottom: 60px;
    text-align: center;
    border-bottom: 1px solid #e0e0e0;
    padding-bottom: 40px;
}
.programme-axe:last-of-type {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
}
.programme-axe h2 {
    margin-bottom: 15px;
}
.programme-axe p {
    font-size: 1.1em;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
  
}

/* Formulaire de suggestion */
.suggestion-form {
    max-width: 600px;
    margin: 30px auto 0 auto;
    display: flex;
    flex-direction: column;
    gap: 15px;
}
.suggestion-form input,
.suggestion-form textarea {
    padding: 15px;
    border: 1px solid #ccc;
    border-radius: 5px;
    font-family: var(--font-body);
    font-size: 1em;
}
.suggestion-form textarea {
    min-height: 120px;
    resize: vertical;
}
.suggestion-form button {
    align-self: center;
    border: none;
    cursor: pointer;
}

/* ---- PAGE EQUIPE - Resume des competences (Desktop) */
.team-summary {
    max-width: 900px;
    margin: 30px auto 40px auto; /* Centré, espacé */
    padding: 20px 30px;
    background-color: #ffffff; 
    border-left: 5px solid var(--primary-green); /* Bande verte pour le faire ressortir */
    font-size: 1.1em;
    line-height: 1.7;
    
    /* STYLE JUSTIFIÉ DEMANDÉ */
    text-align: justify; 
    text-justify: inter-word;
}
/* ---- STYLE LIRE PLUS/LIRE MOINS ---- */

/* Conteneur du texte masqué */
.more-content {
    overflow: hidden; /* Cache le contenu qui dépasse la hauteur max */
    /* La hauteur max est contrôlée par JavaScript */
    transition: max-height 0.3s ease-in-out; 
    display: block;
    margin-bottom: 10px;
}

/* Style du bouton "Lire plus/Lire moins" */
.read-more-toggle {
    display: inline-block;
    padding: 5px 10px;
    background-color: var(--primary-green);
    color: var(--white-text);
    border-radius: 5px;
    font-size: 0.9em;
    font-weight: 700;
    cursor: pointer;
    margin-top: 10px;
    transition: background-color 0.3s;
    
}

.read-more-toggle:hover {
    background-color: var(--accent-red);
}

/* Assurez-vous que les paragraphes dans les bios ne créent pas de marges excessives */
.membre-bio .more-content p:last-child {
    margin-bottom: 0;
}
/* =========================================
   VERSION MOBILE (CORRIGÉE : CTA et SOCIAUX sur la même ligne)
   ========================================= */
	.mobile-hint { display: none; }
		
@media (max-width: 768px) {

    /* --- GLOBAL MOBILE --- */
    .container { width: 95%; padding: 10px 0; }
    h1 { font-size: 1.5em; } 
    h2 { font-size: 1.3em; margin-bottom: 15px; text-align: center; } 
    
    /* --- HEADER (Structure 3 lignes CENTRÉES) --- */
    header { padding: 5px 0; }

    header .container {
        flex-direction: column; 
        align-items: center;    /* Centre horizontalement tous les blocs */
        padding: 0 15px; 
    }
    
    /* Ligne 1 : Logo (Centré) */
    .logo {
        text-align: center; 
        font-size: 1.3em;
        margin-bottom: 5px; 
        width: 100%; 
        order: 1; 
    }

    /* --- NOUVEAU CONTENEUR POUR LIGNE 2 (CTA + Sociaux) --- */
    /* Créons un conteneur temporaire invisible pour grouper le CTA et les icônes sur la Ligne 2 */
    header .container::before {
        content: "";
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100%;
        margin: 5px 0 10px 0;
        order: 2;
    }
    
    /* Remplacement de l'ancien conteneur pour la Ligne 2 :
       Le CTA et les Icônes sont maintenant forcés à être en ligne (row) 
       dans le conteneur principal, mais alignés dans le flex-start/end du header .container
    */
    
    /* Ligne 2 : CTA Button */
    

    /* Ligne 2 : Icônes Sociales */
    .social-icons {
        order: 2; 
        margin: 5px 0 5px 0; 
        /* Important : On change l'alignement pour coller au CTA */
        /* Aligne les icônes à gauche */
    }
    .cta-nav-button {
    order: 2; 
    /* AJUSTEMENT MARGE ET TAILLE */
    margin: 8px 15px 8px 0; /* Marge réduite pour plus de compacité */
    font-size: 0.9em; /* Légèrement plus petit pour s'aligner aux icônes */
    width: auto;
    /* Ajoutez le même padding pour uniformiser le rendu */
    padding: 5px 15px; 
}
    /* Nouvelle Ligne 2 (Virtuelle) : Grouper le CTA et les Sociaux sur une seule ligne centrée */
    /* Nous devons utiliser flexbox sur le conteneur principal, puis centrer le groupe lui-même */
    /* Pour la simplicité, nous allons faire un centrage via une div englobante si possible, mais ici, 
       nous devons manipuler les orders. La meilleure solution est de les faire flotter au centre. */
    
    /* La solution la plus propre et la plus simple est de créer une wrapper DIV dans le HTML, 
       mais puisque je ne peux modifier le HTML qu'une fois, je vais utiliser un flexbox bidirectionnel */

    header .container {
        /* On réactive le mode row pour la ligne CTA + Social Icons */
        display: flex;
        flex-direction: row; 
        flex-wrap: wrap; /* Permet aux éléments de passer à la ligne suivante */
        justify-content: center; /* Centre les éléments */
    }
    
    /* Ordre des éléments pour forcer l'empilement souhaité */
    .logo { order: 1; flex: 1 1 100%; text-align: center; } /* Ligne 1 : Logo (Pleine largeur) */
    
    .social-icons { order: 2; margin: 10px 15px 10px 0; display: flex; justify-content: flex-start; } /* Ligne 2 - Droite */
     .cta-nav-button { order: 3; margin: 10px 0 10px 15px; font-size: 0.8em; width: auto; } /* Ligne 2 - Gauche */
   
    nav { order: 4; flex: 1 1 100%; } /* Ligne 3 : Navigation (Pleine largeur) */


    /* Ligne 3 : Navigation (Centrée, Compacte) */
    nav {
        width: 100%;
        margin-top: 5px;
        order: 4; 
    }
    
    /* FIX CRUCIAL : Raccourcissement des liens de navigation */
    nav ul {
        flex-direction: row;
        justify-content: center; 
        margin: 5px 0; 
        gap: 8px; 
        flex-wrap: absolute; 
    }
    
    /* 1. Masque le texte d'origine en le rendant transparent */
    nav ul li a {
        color: transparent !important; 
       /* border: 1px solid #ccc !important; */
        padding: 3px 6px !important; 
      /*  border-radius: 4px; */
        position: relative; 
        line-height: 1; 
        display: inline-block;
        font-size: 0.85em !important; 
    }

    /* 2. Style et positionnement du nouveau texte court */
    nav ul li a::after {
        content: "ERREUR"; 
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%); 
        
        color: var(--primary-green) !important;
        font-size: 1em !important;
        white-space: nowrap; 
        
        padding: 0;
        border: none;
    }
    
    /* 3. Définition du contenu raccourci pour chaque lien */
    nav ul li a[href="index.html"]::after { content: "Accueil"; }
    nav ul li a[href="equipe.html"]::after { content: "Équipe"; }
    nav ul li a[href="programme.html"]::after { content: "Programme"; } 

    /* --- BANNIERE (INDEX) VERSION COMPACTE --- */
    .banner { flex-direction: column; padding: 20px 15px; gap: 10px; min-height: auto; }
    .banner > img:first-child, .banner .banner-content:nth-child(2) { display: none; }
    .banner .banner-content:nth-child(3) { order: -1; width: 100%; max-width: 100%; }
    .banner h1 { font-size: 1.4em; line-height: 1.2; margin-bottom: 5px; }
    .banner h2 { font-size: 1em; margin: 0; opacity: 0.9; }
    .banner-img { width: 120px; height: 120px; margin: 5px auto 0 auto; border-width: 3px; }
    .mobile-hint { display: block; }
    
    /* --- PRIORITÉS (ACCUEIL) --- */
    .priorities-grid { flex-direction: column; gap: 20px; }

    /* --- CARROUSEL ÉQUIPE --- */
    .team-grid {
        display: flex;
        overflow-x: auto;
        scroll-snap-type: x mandatory; 
        -webkit-overflow-scrolling: touch;
        gap: 0;
        margin: 0 -5%;
        padding-bottom: 20px;
        grid-template-columns: none;
    }

    .team-card {
        flex: 0 0 100%; 
        width: 100%;
        scroll-snap-align: center;
        box-sizing: border-box;
        padding: 20px; 
        box-shadow: none;
        border-right: 1px solid #f0f0f0; 
    }

    .team-photo { width: 130px; height: 130px; }
    
    /* --- RÉSUMÉ ÉQUIPE / BIO MEMBRES --- */
    .team-summary{ text-align: justify; 
        text-justify: inter-word;}, 
    .team-card .bio-courte {
        text-align: left !important; 
        text-justify: auto;
    }

    /* --- AUTRES --- */
    .membre-details { flex-direction: column; text-align: center; gap: 15px; }
    .suggestion-form { width: 100%; }
}