/* Dynamic Paragraph Section */
.paragraph-explication {
    border-radius: 8px;
    padding: 20px;
    margin: 0 20px 35px;
    background-color: #ddead8;
    text-align: center;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.dynamic-paragraph {
    background-color: #f9f5f0;
    padding: 15px;
    border-radius: 8px;
}

.dynamic-paragraph p {
    font-size: 1em;
    line-height: 1.5;
    color: #406145;
    text-align: left;
}

/* Responsive Design */

/* Téléphones */
@media (max-width: 767px) {
    .paragraph-explication {
        padding: 15px;
        margin: 0 15px 25px;
    }

    .dynamic-paragraph {
        padding: 12px;
    }

    .dynamic-paragraph p {
        font-size: 0.9em;
    }
}

/* Tablettes */
@media (min-width: 768px) and (max-width: 1024px) {
    .paragraph-explication {
        padding: 18px;
        margin: 0 18px 30px;
    }

    .dynamic-paragraph {
        padding: 14px;
    }

    .dynamic-paragraph p {
        font-size: 1em;
    }
}



/* Section Carte Age patients */
.titre {
    background: #ddead8;
    margin: 20px;
    padding: 5px;
    border-radius: 10px;
    text-align: center; /* Centralisation du texte */
}

.titre h2 {
    font-size: 1.6em;
    line-height: 1.3;
    color: #406145;
    margin: 30px 0 0;
}

/* Disposition en trois colonnes */
.grid-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* Trois colonnes */
    gap: 15px;
    margin: 20px;
    padding: 10px;
}

.card {
    position: relative;
    background: white;
    border-radius: 10px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    padding: 10px 15px;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    font-size: 0.9em;
}

.card p {
    text-align: left;
    line-height: 1.5;
}

.card ul {
    margin-top: 10px; /* Espacement au-dessus de la liste */
    padding-left: 0; /* Décalage à gauche pour la liste */
    list-style-type: none;
    text-align: left;
}

.card ul li {
    margin-bottom: 5px; /* Espacement entre les éléments de la liste */
    font-size: 0.8rem; /* Taille de texte uniforme pour la liste */
    color: #6b6d68; /* Couleur de texte gris */
    line-height: 1.2; /* Espacement entre les lignes des éléments de la liste */
}

.card ul li::before {
    content: "\27A4"; /* Symbole avant chaque élément */
    margin-right: 10px; /* Espacement entre le symbole et le texte */
    color: #89a873; /* Couleur verte pour le symbole */
}


.card h3 {
    color: #406145;
    font-size: 1.4em;
    margin-bottom: 10px;
}

/* Styles pour card-details */
.card-details {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0.9); /* Initialement réduit */
    width: 60%;
    max-width: 800px;
    background: white;
    border-radius: 12px;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
    padding: 20px;
    z-index: 1000;
    visibility: hidden; /* Masqué par défaut */
    opacity: 0;
    pointer-events: none; /* Empêche l'interaction avec la souris lorsqu'il est masqué */
    transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s ease; /* Limiter la hauteur et permettre le défilement */
    max-height: 80vh; /* 80% de la hauteur de la fenêtre */
    overflow-y: auto; /* Ajoute une barre de défilement si nécessaire */
    padding-right: 10px; /* Ajoute un peu d'espace pour ne pas gêner la barre de défilement */
}

.card-details p {
    text-align: left;
}

.card-details h3 {
    color: #406145;
    font-size: 1.4em;
    margin-bottom: 10px;
}

.card-details h4 {
    color: #13110f;
    font-size: 1em;
    margin-bottom: 10px;
    text-align: left;
}

.card-details li {
    margin-bottom: 20px;
    text-align: left;
}

.card-details.show {
    visibility: visible; /* Devient visible lorsqu'il est affiché */
    opacity: 1;
    transform: translate(-50%, -50%) scale(1); /* Animation d'agrandissement */
    pointer-events: auto; /* Permet l'interaction avec la souris */
}

/* Styles pour overlay */
.overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6); /* Fond sombre */
    z-index: 900;
    display: none; /* Masqué par défaut */
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none; /* Permet de capturer les clics sur l'overlay */
}

.overlay.show {
    display: block;
    opacity: 1;
}

/* Boutons de contrôle */
.btn-details, .btn-close {
    margin-top: 10px;
    padding: 10px 15px;
    background-color: #ad7450;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.btn-details:hover, .btn-close:hover {
    background-color: #905f48;
}

/* Responsive Design */
/* Téléphones */
@media (max-width: 767px) {
    .titre h2 {
        font-size: 1.2em; /* Réduit la taille du titre sur téléphone */
        margin: 15px 12px 15px;
    }

    .grid-container {
        grid-template-columns: 1fr; /* Une seule colonne sur les petits écrans */
        margin: 10px 12px 10px 12px;
    }

    .card {
        margin-bottom: 15px;
    }

    .card h3 {
        font-size: 1.2em; /* Réduit la taille des titres dans les cartes */
    }
    .card p{
        font-size: 0.85em; /* Réduit la taille des éléments de la liste */

    }
    .card ul li {
        font-size: 0.8em; /* Réduit la taille des éléments de la liste */
    }

    .card-details {
        width: 90%; /* Plus large sur les petits écrans */
        max-width: 95%; /* S'ajuste mieux */
        padding: 15px; /* Réduit le padding */
    }

    .card-details h3 {
        font-size: 1.2em; /* Réduit la taille du titre */
    }

    .card-details h4 {
        font-size: 0.9em; /* Ajuste la taille du titre secondaire */
    }

    .overlay {
        opacity: 0.8; /* Augmente l'opacité sur téléphone pour mieux voir l'overlay */
    }
}

/* Tablettes */
@media (min-width: 768px) and (max-width: 1024px) {
    .titre h2 {
        font-size: 1.5em; /* Ajuste la taille du titre pour les tablettes */
    }

    .grid-container {
        grid-template-columns: repeat(2, 1fr); /* Deux colonnes sur les tablettes */
    }

    .card {
        font-size: 0.95em; /* Légèrement plus grand que sur les téléphones */
    }

    .card h3 {
        font-size: 1.3em; /* Ajuste la taille des titres */
    }

    .card ul li {
        font-size: 0.8rem; /* Ajuste la taille des éléments de la liste */
    }

    .card-details {
        width: 80%; /* Réduit légèrement la largeur pour s'adapter aux tablettes */
        max-width: 85%; /* Ajuste la largeur maximale */
        padding: 18px; /* Ajuste le padding */
    }

    .card-details h3 {
        font-size: 1.3em; /* Ajuste la taille du titre */
    }

    .card-details h4 {
        font-size: 1em; /* Ajuste la taille du titre secondaire */
    }
}



/* Les outils utilisés */
.paragrapheoutils h2 {
    color: #406145;
    text-align: center;
    margin: 12px 0px 25px;
    font-size: 1.6em;
}

.paragrapheoutils h3 {
    color: #96A27E;
    margin: 30px 40px;
    font-size: 1.2em;
}

.paragrapheoutils {
    padding: 20px;
    margin: 0 20px 35px;
    background: #ddead8;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.paragrapheoutils li {
    list-style-type: none;
    margin: 10px 40px;
    font-size: 0.9em;
}

.custom-margin {
    margin: -10px 0 40px 0;
}

.paragrapheoutils ul li::before {
    content: "\27A4"; /* Symbole avant chaque élément */
    margin-right: 10px; /* Espacement entre le symbole et le texte */
    color: #89a873; /* Couleur verte pour le symbole */
}

.paragrapheoutils p {
    margin: 20px 40px;
    font-size: 0.9em;
}

.separator {
    border-top: 2px solid #96A27E;
    margin: 30px 40px;
}

.imgbody {
    display: block;
    max-width: 60%;
    margin: 20px auto;
    border-radius: 8px;
}

.quotepourqui {
    font-style: italic;
    background-color: #d8deca;
    border-left: 4px solid #87a97a;
    padding: 10px 20px;
    margin: 30px 40px;
    color: #406145;
    text-align: center;
}

/* Responsive Design */
/* Téléphones */
@media (max-width: 767px) {
    .paragrapheoutils h2 {
        font-size: 1.4em; /* Réduit la taille du titre sur téléphone */
        margin: 12px 0 20px;
    }

    .paragrapheoutils h3 {
        font-size: 1.2em; /* Ajuste la taille des sous-titres */
        margin: 20px 20px;
    }

    .paragrapheoutils {
        padding: 15px;
        padding: 15px;
        margin: 38px 20px;
    }

    .paragrapheoutils li {
        margin: 12px 20px 10px 0; /* Réduit les marges sur les petits écrans */
        font-size: 0.8em;
    }

    .paragrapheoutils p {
        margin: 15px 20px;
        font-size: 0.85em; /* Réduit la taille du texte pour les paragraphes */
    }

    .separator {
        margin: 45px 20px 30px;
    }

    .imgbody {
        max-width: 80%; /* Réduit l'image pour qu'elle s'adapte aux petits écrans */
        margin: 15px auto;
    }

    .quotepourqui {
        margin: 20px 20px; /* Réduit les marges pour la citation */
        padding: 10px 15px;
        font-size: 0.85em; /* Réduit la taille du texte */
    }
}

/* Tablettes */
@media (min-width: 768px) and (max-width: 1024px) {
    .paragrapheoutils h2 {
        font-size: 1.5em; /* Ajuste la taille du titre pour tablettes */
        margin: 12px 0 22px;
    }

    .paragrapheoutils h3 {
        font-size: 1.1em; /* Ajuste la taille des sous-titres */
        margin: 25px 30px;
    }

    .paragrapheoutils {
        padding: 18px;
        margin: 0 15px 32px;
    }

    .paragrapheoutils li {
        margin: 8px 30px; /* Réduit légèrement les marges */
        font-size: 0.9em; /* Conserve une bonne lisibilité */
    }

    .paragrapheoutils p {
        margin: 18px 30px;
    }

    .separator {
        margin: 25px 30px;
    }

    .imgbody {
        max-width: 70%; /* Ajuste la largeur de l'image */
        margin: 18px auto;
    }

    .quotepourqui {
        margin: 25px 30px;
        padding: 10px 20px;
        font-size: 0.9em; /* Légèrement plus grand que sur téléphone */
    }
}


/* Partie Questions-Réponses */
.faq-questions-frequentes {
    background: url('./Questions.jpg');
    background-attachment: fixed; /* Fixer l'image de fond */
    background-size: cover; /* Ajuster l'image pour couvrir toute la section */
    padding: 40px 20px;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    color: #13110f;
}

.faq-questions-frequentes h2 {
    text-align: center;
    font-size: 1.8em; /* Taille importante pour indiquer la hiérarchie */
    color: #ffffff; /* Texte en blanc pour le contraste */
    background-color: #905f48; /* Couleur de fond chaude */
    padding: 20px 15px;
    margin: 0 30px 30px;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    letter-spacing: 1px; /* Espacement pour une lisibilité accrue */
    text-transform: uppercase; /* Mettre en majuscules pour plus d'impact */
}

.faq-item {
    background: #faf5ef;
    border-radius: 10px;
    margin: 15px 30px;
    padding: 0px 10px;
    border: 1px solid #bc7b50;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    position: relative;
    z-index: 2; /* Éviter que l'élément soit derrière l'image de fond */
}

.faq-title {
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    font-size: 1.2em;
    color: #905f48;
    padding: 12px 20px;
    background: #faf5ef;
    border-bottom: 3px solid #905f48;
    border-radius: 8px;
    margin: 15px 10px 5px;
}

.faq-title::after {
    content: "+";
    font-size: 1.5em;
    color: #905f48; /* Même couleur que la bordure */
    transition: transform 0.3s ease;
    padding: 0px 0px 0 30px;  
  }
  
  .faq-title.open::after {
    content: "-";
    transform: rotate(180deg);
    font-weight: bold;
    padding: 0px 0px 0 30px;
  }
  

.faq-la-therapie {
    padding: 0px 20px 15px; /* Ajustement des marges pour le responsive */
    font-size: 1em;
    line-height: 1.5em;
    color: #13110f;
    background: #f9f5f0;
    border-radius: 5px;
    overflow: hidden;
    max-height: 0;
    transition: max-height 0.3s ease-out;
}
.faq-la-therapie li{
    font-size: 1em;
    line-height: 1.2em;
    margin-bottom: 10px;
}

/* Responsive Design */
/* Téléphones */
@media (max-width: 767px) {
    .faq-questions-frequentes {
        padding: 20px 10px; /* Réduit l'espace sur les côtés */
    }
  
    .faq-questions-frequentes h2 {
        font-size: 1.1em; /* Réduit la taille du titre */
        margin: 0 15px 20px;
    }
    .faq-category h3 {
      font-size: 1.1em;
      margin: 35px 20px 20px;
    }
   
    .faq-item {
        margin: 10px 15px;
        padding: 0 0 8px;
      }
  
    .faq-title {
        font-size: 0.9em; /* Réduit la taille du texte */
        padding: 10px 15px;
    }
  
    .faq-title::after {
        font-size: 1em;
    }
  
    .faq-la-therapie {
      padding: 0px 40px 10px;
      font-size: 0.8em; /* Réduit la taille de police pour une meilleure lisibilité */
      line-height: 1.3em;
    }
  
    .faq-la-therapie li{
        font-size: 1em;
        line-height: 1.2em;
        margin-bottom: 10px;
    }
  }



/* Page suivante */
.basdepage {
    display: block;
    background-color: #96A27E; /* Couleur de fond */
    padding: 15px;
    margin: 65px 0 50px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Ombre légère pour un effet de profondeur */
}

.basdepage-nav {
    text-align: center;
    margin: 5px;
}

.btn-next { /* Bouton "page suivante" */
    display: inline-block;
    padding: 12px 25px;
    background: #b0c096; /* Couleur du bouton */
    color: #fff; /* Texte blanc */
    text-decoration: none; /* Supprime le soulignement */
    border-radius: 25px; /* Bouton arrondi */
    font-size: 1rem;
    font-weight: bold;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Légère ombre */
}

.btn-next:hover {
    background: #8fa379; /* Couleur plus foncée au survol */
    transform: translateY(-2px); /* Léger décalage vers le haut */
    box-shadow: 0 6px 10px rgba(0, 0, 0, 0.2); /* Ombre accentuée */
}

.btn-next:active {
    background: #7b8f64; /* Couleur légèrement plus foncée lors du clic */
    transform: translateY(1px); /* Effet de clic */
}

/* Responsive Design */

/* Téléphones */
@media (max-width: 767px) {
    .basdepage {
        padding: 10px; /* Réduction du padding pour les petits écrans */
        margin: 60px 0 30px;
    }

    .btn-next {
        padding: 10px 20px; /* Bouton plus compact */
        font-size: 0.9rem; /* Réduction de la taille de la police */
    }
}

/* Tablettes */
@media (min-width: 768px) and (max-width: 1024px) {
    .basdepage {
        padding: 12px;
        margin: 25px 0;
    }

    .btn-next {
        padding: 12px 22px; /* Ajustement du bouton pour tablettes */
        font-size: 1rem;
    }
}