.flex-container-horizontal {
    display: flex;
    flex-direction: column;
    max-width: calc(100vh -40px);
    margin-bottom:30px;
}

.card-content-wrapper {
    background-color: white;
    border-radius: 20px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    overflow: hidden;
    padding: 20px; 
}

.main-content-horizontal {
    display: flex;
    align-items: center; /* Aligne l'image et le texte verticalement */
    justify-content: center;
    gap: 40px; /* Crée un espace propre de 40px entre l'image et le texte */
    flex-wrap: wrap; /* Permet de passer à la ligne sur mobile automatiquement */
}

.card-limit-card {
    /* Définit une largeur maximale pour l'ensemble de la carte */
    max-width: 1200px; /* Ajustez cette valeur selon vos besoins (par exemple, 900px, 1000px, 1200px) */
    width: 100%; /* Assure que le bloc est réactif sur les petits écrans */
    
    /* Le 'margin: auto' n'est pas strictement nécessaire ici grâce au justify-content: center
       sur .flex-container-horizontal, mais il est souvent utile pour un centrage autonome. */
    margin-left: auto; 
    margin-right: auto;
}

.card-horizontal-image {
    flex: 0 1 400px; /* L'image essaiera de faire 400px maximum */
    margin: 0 !important; /* On supprime tes margin-left: 50px qui décalent tout */
    display: flex;
    justify-content: center;
}

.card-horizontal-image img {
    width: 100%;
    height: auto;
    border-radius: 20px;
    object-fit: cover;
}

.card-content-horizontal {
    flex: 1; /* Le texte prend le reste de l'espace */
    min-width: 300px; /* Si l'écran fait moins de 700px (400+300), ça passe à la ligne */
    margin: 0 !important; /* On enlève le margin-right: 70px */
}

.card-content-horizontal h3 {
    margin-top: 0;
	
}

/* Media Query pour les petits écrans */
@media (max-width: 600px) {
    .card-horizontal {
        flex-direction: column; /* Les éléments s'empilent sur les petits écrans */
        text-align: center;
    }
    .card-horizontal img {
        margin-right: 0;
        margin-bottom: 10px;
    }
}

/* Styles pour la section des fondateurs */
.founders-title {
    color: #000; /* Couleur bleue institutionnelle */
    border-bottom: 3px solid #004d00; /* Soulignement jaune pour le dynamisme */
    padding-bottom: 10px;
    text-align: center;
}

.profile-name {
    color: #004d00; /* Bleu plus clair pour les titres de profils */
    font-weight: 600;
    margin-top: 20px;
}

.key-points {
    list-style-type: none; /* Retirer les puces par défaut */
    padding-left: 0;
}

.key-points li {
    margin-bottom: 10px;
    padding-left: 25px;
    position: relative;
}

.key-points li::before {
    content: "✅"; /* Ajouter une icône */
    position: absolute;
    left: 0;
    font-weight: bold;
}

.separator {
    border: none;
    border-top: 1px dashed #ccc; /* Séparateur discret */
    margin: 30px 0;
}

@media (max-width: 768px) {
    
    .main-content-horizontal {
        flex-direction: column; /* L'image passe au-dessus du texte */
gap: 20px;
    }

.card-horizontal-image {
        flex: 0 1 100%; /* L'image prend toute la largeur sur mobile */
        max-width: 300px; /* Ici, tu règles la taille de l'image sur mobile (ex: 300px) */
        margin: 0 auto !important; /* Centre l'image horizontalement */
    }

    .card-horizontal-image img {
        width: 100% !important; /* L'image s'adapte à la largeur du téléphone */
        height: auto;
        max-width: 400; /* Elle ne dépasse JAMAIS son parent */
    }

.card-content-horizontal {
        text-align: center; /* Plus joli sur mobile */
        padding: 0 10px;
    }

    .card-content-wrapper {
        padding: 15px;    /* On réduit un peu le padding global sur mobile */
    }
}


.text-content-card-expert {
    flex: 1; /* Le texte prend l'espace dont il a besoin */
    min-width: 300px; /* En dessous de 300px, il poussera l'image en dessous */
}


.text-content-card-expert h2 {
    font-size: 2em;
    color: #333;
    margin-bottom: 10px;
}

.text-content-card-expert p {
    line-height: 1.6;
    color: #666;
}


.flex-container-horizontal-card-expert {
    display: flex;
	align-items: flex-start;
    justify-content: center;
    gap: 50px; /* Un bel espace propre entre texte et image */
    padding: 40px;
    background-color: #f9f9f9;
    border-radius: 20px;
    flex-wrap: wrap; /* Crucial pour le mobile */
}


.image-container-card-expert {
    flex: 0 1 450px; /* L'image fait 450px max, mais peut rétrécir */
    display: flex;
    justify-content: center;
}

.image-container-card-expert img {
    width: 100%;
    height: auto;
    border-radius: 15px;
    box-shadow: 0 10px 20px rgba(0,0,0,0.1); /* Petite ombre portée pour le relief */
}



@media (max-width: 768px) {
.flex-container-horizontal-card-expert {
        flex-direction: column-reverse; /* Met l'image au-dessus du texte sur mobile */
        padding: 20px;
        gap: 25px;
    }

    .image-container-card-expert {
        flex: 0 1 100%;
        max-width: 320px; /* On bride la taille de l'image sur smartphone */
        margin: 0 auto;
    }

    .text-content-card-expert {
        text-align: center;
    }

    .text-content-card-expert h2 {
        font-size: 1.6rem;
    }

    .image-container-card-expert img {
        width: 100%;
        max-width: 500px; /* On limite pour ne pas qu'elle soit géante sur tablette */
        margin: 0 auto;
    }

    .text-content-card-expert {
        width: 100%;
        text-align: center; /* Optionnel : centre le texte pour un look plus mobile */
    }

}

.text-container {
    max-width: 400px; /* Largeur max, mais peut rétrécir */
    width: 100%;      /* Prend toute la place si l'écran est petit */
    margin: 10px auto;
    font-family: Arial, sans-serif;
    line-height: 1.6;
}

.more-text {
    display: none; /* This hides the additional text */
}

.text-container.show-more .more-text {
    display: inline; /* This makes the additional text visible */
}

.read-more-btn {
    background-color: #004d00;
    color: white;
    border: none;
    padding: 10px 15px;
    cursor: pointer;
    border-radius: 20px;
    margin-top: 10px;
}

.read-more-btn:hover {
    background-color: #008000;
}


/* Conteneur principal avec fond blanc ou gris léger */
.card-expert-wrapper {
    background-color: white; /* Ou #f9f9f9 selon ton choix */
    padding: 30px;
    border-radius: 20px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    max-width: 1200px;
    margin: 20px auto;
    overflow: hidden; /* Important pour le float */
}

/* Style du texte pour l'habillage */
.text-content-card-expert {
    display: block; 
    font-family: Arial, sans-serif;
    line-height: 1.6;
    color: #333;
}

/* Style du texte */
.text-content-card-expert {
    display: block; /* On reste en bloc classique pour permettre l'incrustation */
}

.text-content-card-expert h2 {
    margin-top: 0;
    color: #333;
    font-size: 1.8rem;
}

.text-content-card-expert p {
    line-height: 1.6;
    color: #444;
    margin-bottom: 15px;
    text-align: justify; /* Optionnel : rend l'incrustation encore plus propre */
}


/* Bouton Contact */
.main-btn {
    background-color: #004d00;
    color: white;
    border: none;
    padding: 12px 25px;
    cursor: pointer;
    border-radius: 5px;
    font-weight: bold;
    transition: background 0.3s;
}

.main-btn:hover {
    background-color: #ffcc00;
}



/* L'image à gauche avec incrustation */
.image-float-left {
    float: left;
    width: 35%;          /* On réduit un peu la largeur pour ce texte dense */
    max-width: 400px;
    margin-right: 30px;  /* Espace pour le texte à droite */
    margin-bottom: 20px; /* Espace pour le texte qui passe dessous */
}

.image-float-left img {
    width: 100%;
    height: auto;
    border-radius: 15px;
    box-shadow: 0 8px 15px rgba(0,0,0,0.1);
}



/* Styles spécifiques aux fondateurs */
.founders-title {
    color: #000;
    border-bottom: 3px solid #004d00;
    padding-bottom: 10px;
    margin-top: 30px;
}

.profile-name {
    color: #004d00;
    font-weight: 600;
    margin-bottom: 10px;
}

.separator {
    border: none;
    border-top: 1px dashed #ccc;
    margin: 20px 0;
}


/* Adaptation Mobile (Smartphone) */
@media (max-width: 768px) {
    .image-float-left {
        float: none;    /* On annule l'incrustation sur mobile pour empiler */
        width: 100%;
        max-width: 350px;
        margin: 0 auto 25px auto;
        display: block;
    }


    .text-content-card-expert {
        text-align: center;
    }
    
    .text-content-card-expert p {
        text-align: center;
    }
}