.boite-generale {
    background-color: #f9f5f0; /* Marron */
    padding: 22.5px; /* Réduction du padding de 25% */
    margin: 15px; /* Réduction de la marge de 25% */
    border-radius: 9px; /* Réduction du rayon de bord de 25% */
    box-shadow: 0px 3px 7.5px rgba(0, 0, 0, 0.15); /* Réduction de l'ombre de 25% */
}

.boite-generale h3 {
    font-size: 1.3em; /* Réduction de la taille de la police de 25% */
    color: #bc7b50;
    margin-bottom: 11.25px; /* Réduction de la marge de 25% */
    text-align: center;
}

/* Paragraphes */
.boite-generale p {
    font-size: 1em; /* Réduction de la taille de la police de 25% */
    color: #4a4a4a;
    margin: 9px 0; /* Réduction de la marge de 25% */
    text-align: justify;
    line-height: 1.2; /* Réduction de l'interligne de 25% */
}

/* Conteneur interne */
.grid-sections {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px; /* Réduction de l'écart de 25% */
}

/* Blocs internes */
.consultation-individual, .psychotherapie, .consultation-group {
    background: #e5d5c5;
    padding: 15px; /* Réduction du padding de 25% */
    border-radius: 6px; /* Réduction du rayon de bord de 25% */
    box-shadow: 0px 1.5px 4.5px rgba(0, 0, 0, 0.1); /* Réduction de l'ombre de 25% */
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    border: #3b2d25 solid 1.5px; /* Réduction de l'épaisseur de bordure de 25% */
}

/* Listes */
.plus-de-texte ul {
    margin: 7.5px 7.5px; /* Réduction de la marge de 25% */
    padding: 0px 7.5px; /* Réduction du padding de 25% */
}

.plus-de-texte li {
    font-size: 1em; /* Réduction de la taille de la police de 25% */
    text-align: justify;
    line-height: 1.2; /* Réduction de l'interligne de 25% */
    color: #4a4a4a;
    padding: 0px 0 13.5px; /* Réduction du padding de 25% */
}

.plus-de-texte {
    display: none;
}

/* Boutons Lire plus */
.lire-plus {
    padding: 7.5px 11.25px; /* Réduction du padding de 25% */
    font-size: 0.9em; /* Réduction de la taille de la police de 25% */
    font-weight: bold;
    background-color: #905f48;
    color: #fff;
    border: none;
    border-radius: 3.75px; /* Réduction du rayon de bord de 25% */
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.lire-plus:hover {
    background-color: #bc7b50;
}

/* Conteneur principal */
.boite-generale {
    background-color: #f9f5f0; /* Marron clair */
    padding: 22.5px; /* Réduction de padding */
    margin: 15px; /* Réduction des marges */
    border-radius: 9px; /* Coins légèrement arrondis */
    box-shadow: 0px 3px 7.5px rgba(0, 0, 0, 0.15); /* Ombre subtile */
}

.boite-generale h3 {
    font-size: 1.3em; /* Taille du titre légèrement réduite */
    color: #bc7b50; /* Couleur chaude */
    margin-bottom: 11.25px; /* Espace sous le titre */
    text-align: center; /* Centrage du titre */
}

/* Paragraphes */
.boite-generale p {
    font-size: 1em; /* Taille classique pour un texte */
    color: #4a4a4a; /* Couleur de texte neutre */
    margin: 9px 0; /* Espacement vertical */
    text-align: justify; /* Texte justifié */
    line-height: 1.5; /* Interligne resserré */
}

/* Grille interne */
.grid-sections {
    display: grid;
    grid-template-columns: 1fr 1fr; /* Deux colonnes égales */
    gap: 15px; /* Espacement entre les colonnes */
}

/* Blocs de contenu */
.consultation-individual, .psychotherapie, .consultation-group {
    background: #e5d5c5; /* Fond doux */
    padding: 15px; /* Espacement interne réduit */
    border-radius: 6px; /* Coins arrondis */
    box-shadow: 0px 1.5px 4.5px rgba(0, 0, 0, 0.1); /* Ombre subtile */
    transition: transform 0.3s ease, box-shadow 0.3s ease; /* Animations douces */
    border: 1.5px solid #3b2d25; /* Bordure fine et élégante */
}

/* Listes */
.plus-de-texte ul {
    margin: 7.5px 7.5px; /* Marges internes */
    padding: 0px 7.5px; /* Espacements réduits */
}

.plus-de-texte li {
    font-size: 1em; /* Taille du texte classique */
    text-align: justify;
    line-height: 1.5; /* Espacement resserré */
    color: #4a4a4a; /* Couleur neutre */
    padding: 0px 0 13.5px; /* Espacement entre les éléments */
}

.plus-de-texte {
    display: none; /* Masquer par défaut */
}

/* Boutons Lire plus */
.lire-plus {
    padding: 7.5px 11.25px; /* Bouton compact */
    font-size: 0.9em; /* Texte légèrement réduit */
    font-weight: bold;
    background-color: #905f48; /* Couleur chaude */
    color: #fff; /* Texte blanc */
    border: none; /* Pas de bordure */
    border-radius: 3.75px; /* Coins arrondis */
    cursor: pointer; /* Indicateur cliquable */
    transition: background-color 0.3s ease; /* Animation douce */
}

.lire-plus:hover {
    background-color: #bc7b50; /* Couleur au survol */
}

/* Responsive Design */

/* Pour les petits écrans */
@media (max-width: 767px) {
    .grid-sections {
        grid-template-columns: 1fr; /* Une seule colonne sur les petits écrans */
        gap: 10px; /* Réduction de l'espacement */
    }

    .boite-generale {
        padding: 15px; /* Réduction du padding */
        margin: 10px; /* Marges plus étroites */
    }

    .boite-generale h3 {
        font-size: 1.1em; /* Taille du titre réduite */
    }

    .boite-generale p {
        font-size: 0.9em; /* Texte légèrement plus petit */
        text-align: left;
    }

    .lire-plus {
        padding: 7px 10px; /* Bouton compact */
        font-size: 0.85em; /* Taille ajustée */
    }

    .plus-de-texte li {
        font-size: 0.9em; /* Texte légèrement plus petit */
        text-align: left;
    }
}

/* Pour les tablettes */
@media (min-width: 768px) and (max-width: 1024px) {
    .grid-sections {
        grid-template-columns: 1fr 1fr; /* Deux colonnes */
        gap: 12px; /* Espacement intermédiaire */
    }

    .boite-generale {
        padding: 20px; /* Légère réduction */
    }
}


/* Style général pour la section des groupes thérapeutiques */
.consultation-group {
    grid-column: span 2; /* Prend toute la largeur sur deux colonnes */
    text-align: justify;
    line-height: 1.2; /* Réduction de l'interligne de 25% */
    color: #4a4a4a;
    border-radius: 6px; /* Réduction du rayon de bord de 25% */
    padding: 22.5px; /* Réduction du padding de 25% */
    margin: 22.5px auto; /* Réduction de la marge de 25% */
}

/* Titre de la section */
.consultation-group h3 {
    font-size: 1.3em; /* Réduction de la taille de la police de 25% */
    font-weight: bold;
    color: #bc7b50; /* Couleur du titre */
    margin-bottom: 15px; /* Réduction de la marge de 25% */
    text-align: center;
}

.consultation-group p {
    font-size: 1em; /* Réduction de la taille de la police de 25% */
    line-height: 1.5; /* Réduction de l'interligne de 25% */
    color: #4a4a4a; 
    margin: 15px 0 0; /* Réduction de la marge de 25% */
}

.consultation-group ul {
    list-style-type: none;
    padding-left: 15px; /* Réduction du padding de 25% */
}

.consultation-group ul li {
    font-size: 1rem; /* Réduction de la taille de la police de 25% */
    line-height: 1.5; /* Réduction de l'interligne de 25% */
    color: #4a4a4a;
    margin-bottom: 18.75px; /* Réduction de la marge de 25% */
}

/* Mettre en gras les titres des éléments de la liste */
.consultation-group ul li strong {
    color: #905f48; /* Couleur pour les titres de la liste */
    font-weight: bold;
}

/* Espaces et images pour illustration (facultatif) */
.consultation-group ul li::before {
    content: "•"; /* Ajouter un point avant chaque item */
    color: #905f48; /* Couleur des points */
    margin-right: 7.5px; /* Réduction de l'espace de 25% */
}

/* Mise en valeur du bouton "En savoir plus" */
.boutongauche {
    text-align: right;
    margin-top: 22.5px; /* Réduction de la marge de 25% */
}

.roll-button-savoir-plus {
    padding: 7.5px 15px; /* Réduction du padding de 25% */
    font-size: 0.9em; /* Réduction de la taille de la police de 25% */
    font-weight: bold;
    background-color: #905f48; /* Couleur de fond du bouton */
    color: #fff; /* Texte blanc */
    border: none;
    border-radius: 3.75px; /* Réduction du rayon de bord de 25% */
    cursor: pointer;
    transition: background-color 0.3s ease, transform 0.3s ease; /* Animation au survol */
    text-decoration: none;
}

.roll-button-savoir-plus:hover {
    background-color: #bc7b50; /* Couleur du bouton au survol */
    transform: translateY(-1.5px); /* Réduction de l'élévation de 25% */
}

.roll-button-savoir-plus:focus {
    outline: none; /* Retirer le contour bleu par défaut */
}


/* Mise en forme responsive pour les petits écrans */
@media (max-width: 768px) {
    .consultation-group {
        padding: 20px;
    }

    .consultation-group h3 {
        font-size: 1.1em;
    }
    .consultation-group ul li {
        font-size: 1em;
    }

    .roll-button-savoir-plus {
        width: 100%; /* Bouton large sur les petits écrans */
        padding: 12px;
        font-size: 0.9em;
    }
}




/* Structure de la grille */
.content-container {
    display: block;    
    gap: 15px; /* Réduction de l'espacement de 25% */
    padding: 15px; /* Réduction du padding de 25% */
}

/* Bloc de contenu */
.content-block {
    display: flex;
    padding: 15px 30px 15px 15px; /* Réduction du padding de 25% */
    background-color: #fff;    
    border-radius: 11.25px; /* Réduction du rayon de bord de 25% */
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.1); /* Réduction de l'ombre */
    margin: 0px 0 22.5px 0; /* Réduction de la marge de 25% */
}

/* Icône */
.content-icon {
    margin-right: 15px; /* Réduction de l'espacement de 25% */
    flex-shrink: 0;
}

.content-icon img {
    width: 80px; /* Réduction de la taille de l'image de 25% */
    height: 80px; /* Réduction de la taille de l'image de 25% */
    margin-top: 15px;
    object-fit: cover;
    border-radius: 37.5%; /* Réduction du rayon de bord de 25% */
    background-color: #ffe6cc;
}

.content-text h2 {
    font-size: 1.5em; /* Réduction de la taille de la police de 25% */
    color: #905f48;
}

.content-text p {
    font-size: 1em; /* Réduction de la taille de la police de 25% */
    line-height: 1.2; /* Réduction de l'interligne de 25% */
    color: #4a4a4a;
    margin: 10px 0;
}


/* Responsive Design */
@media (max-width: 768px) {
    .content-container {
        grid-template-columns: 1fr;
    }

    .content-block {
        flex-direction: column;
        text-align: center;
    }

    .content-icon {
        margin-bottom: 5px;
    }

    .content-text h2 {
        font-size: 1.3em;
    }

}