/* General Styles */
:root {
  --primary-light: #ddead8;
  --primary-medium: #87a97a;
  --primary-dark: #406145;
  --secondary: #b1d887;
  --white: #ffffff;
}

/* 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;
  }
}



/* Motifs Section */
.motifs-section {
  border-radius: 8px;
  padding: 20px;
  margin: 0 20px 35px;
  background-color: #ddead8; /* Fond doux */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Ombre légère */
}

.motifs-section h2 {
  text-align: center;
  font-size: 1.6em;
  margin-bottom: 25px;
  color: #406145; /* Couleur principale */
}

.motif-item {
  margin-bottom: 20px;
  padding: 20px;
  background-color: #f9f5f0; /* Fond clair */
  border-left: 6px solid #96A27E; /* Bordure verte à gauche */
  border-radius: 8px; /* Coins arrondis */
  transition: transform 0.3s ease, box-shadow 0.3s ease; /* Effet de transformation */
}

.motif-item h3 {
  font-size: 1.2em;
  margin-bottom: 10px;
  color: #406145; /* Couleur titre */
}

.motif-item p {
  margin: 0;
  font-size: 1em;
  line-height: 1.5; /* Espacement pour une meilleure lisibilité */
}

/* Responsive Design */

/* Téléphones */
@media (max-width: 767px) {
  .motifs-section {
      margin: 0 10px 25px; /* Réduit les marges */
  }
  .motifs-section h2 {
    font-size: 1.4em;
    margin-bottom: 25px;
  }
  .motif-item {
    padding: 5px 15px 20px;
    font-size: 0.9em; /* Réduit la taille du texte */
  }
  .motif-item p {
    font-size: 0.85em;
  }
  
  .motif-item h3 {
      font-size: 1.1em; /* Réduit la taille des titres */
  }
}

/* Tablettes */
@media (min-width: 768px) and (max-width: 1024px) {
  .motifs-section {
      margin: 0 15px 30px; /* Ajuste les marges */
  }

  .motif-item {
      padding: 18px; /* Réduit légèrement le padding */
  }

  .motif-item h3 {
      font-size: 1.15em; /* Légère réduction de la taille des titres */
  }
}




/*Partie Questions-Réponse*/
.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::before {
  content: "";
  position: absolute;
}


.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-category h3 {
  font-size: 1.6em; /* Taille visible, mais pas écrasante */
  color: #bc7b50; /* Couleur chaleureuse en harmonie avec le thème */
  text-align: left;
  margin: 60px 30px 30px;
  padding: 10px 15px;
  font-weight: bold; /* Texte bien mis en valeur */
  background:  #e5d7cc; 
  border-radius: 5px;
  box-shadow: 4px 4px 6px rgba(0, 0, 0, 0.1);
  text-shadow: 0px 1px 2px rgba(0, 0, 0, 0.3);
}

.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 { /*Paragraphe*/
  padding: 0px 80px 15px;
  font-size: 1em;
  line-height: 1.5em;
  color: #13110f;
  background: #faf5ef; 
  border-radius: 5px;
  overflow: hidden;
  max-height: 0;
  transition: max-height 0.3s ease-out;
}
.psychologist-tips {
  list-style-type: none;
  padding-left: 0;
  font-size: 0.9em;
  line-height: 1.5em;
  margin-bottom: 20px;
}

.psychologist-tips li {
  background: #e5d7cc; 
  margin: 12px 0;
  padding: 18px 20px; /* Plus de padding pour une meilleure aération */
  border-radius: 12px; /* Coins arrondis plus marqués */
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15); /* Ombre plus prononcée */
  color: #3e3b2f; /* Texte d'une couleur plus foncée pour un meilleur contraste */
  font-weight: 500; /* Poids de texte légèrement réduit pour un effet plus élégant */
  transition: background-color 0.3s ease, transform 0.3s ease; /* Transition pour l'effet de survol */
}

/* 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;
  }
}

/* Tablettes */
@media (min-width: 768px) and (max-width: 1024px) {
  .faq-questions-frequentes {
      padding: 30px 15px;
  }

  .faq-questions-frequentes h2 {
      font-size: 1.6em;
      margin: 0 20px 25px;
  }

  .faq-item {
      margin: 15px 20px;
      padding: 0px 10px;
  }

  .faq-title {
      font-size: 1.1em;
      padding: 12px 18px;
  }

  .faq-title::after {
      font-size: 1.3em;
  }

  .faq-la-therapie {
      padding: 0px 18px 12px;
      font-size: 0.95em;
  }
}


/* Section Contact */
.contact-pour-rendez-vous {
  background-color: rgb(150, 162, 126); /* Fond doux avec une nuance de vert clair */
  padding: 20px 15px 30px; /* Ajuste le padding */
  margin: 65px 0 50px;
  text-align: center;
  border-radius: 10px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15); /* Ombre douce */
}

/* Titre */
.contact-pour-rendez-vous h2 {
  font-size: 1.8em;
  color: #ffffff; /* Texte blanc */
  margin-bottom: 20px;
  font-weight: bold;
}

/* Texte */
.contact-pour-rendez-vous p {
  font-size: 1em;
  color: #ffffff; /* Texte blanc pour contraste */
  line-height: 1.6; /* Espacement pour meilleure lisibilité */
  margin: 0 auto 30px; /* Centré et espacements */
  max-width: 600px; /* Limite la largeur pour éviter les lignes trop longues */
}

/* Bouton */
.Prendre-rendez-vous {
  background-color: rgba(188, 123, 80, 0.9); /* Couleur chaude et translucide */
  color: #ffffff; /* Texte blanc */
  font-size: 1em;
  padding: 12px 30px; /* Taille du bouton */
  border: none; /* Supprime la bordure */
  border-radius: 5px; /* Coins arrondis */
  text-decoration: none; /* Pas de soulignement */
  cursor: pointer; /* Curseur main */
  transition: background-color 0.3s ease, transform 0.3s ease; /* Animations */
}

.Prendre-rendez-vous:hover {
  background-color: rgb(200, 132, 89); /* Couleur plus claire au survol */
  transform: translateY(-3px); /* Légère élévation */
}

/* Responsive Design */

/* Pour les téléphones */
@media (max-width: 767px) {
  .contact-pour-rendez-vous h2 {
      font-size: 1.4em; /* Réduit la taille du titre */
  }

  .contact-pour-rendez-vous p {
      font-size: 0.9em; /* Réduit légèrement le texte */
      margin-bottom: 20px;
  }

  .Prendre-rendez-vous {
      font-size: 0.9em; /* Taille du bouton adaptée */
      padding: 10px 20px; /* Réduction des dimensions */
  }
}

/* Pour les tablettes */
@media (min-width: 768px) and (max-width: 1024px) {
  .contact-pour-rendez-vous {
      padding: 20px 15px 30px; /* Ajustement du padding */
      margin: 0 15px 50px; /* Espaces plus adaptés */
  }

  .contact-pour-rendez-vous h2 {
      font-size: 1.7em; /* Ajuste la taille du titre */
  }

  .Prendre-rendez-vous {
      padding: 12px 25px; /* Ajustement du bouton */
  }
}