/* --- Layout General --- */
	:root {
	  --primary-green: #2a9d8f;
	  --primary-green-dark: #21867c;
	  --text-color: #333;
	  --bg-color: #fff;
	  --bg-color-Section:#fff;
	  --light-bg: #fafafa;
	  --shadow-color: rgba(0,0,0,0.1);
	  --shadow-hover: rgba(0,0,0,0.15);
	}
/*----------------------------------------------------------------------------------------------*/
/*Format des Colonne*/	
/*----------------------------------------------------------------------------------------------*/
.services-row {
  display: flex;
  flex-wrap: wrap;         /* permet aux sections de passer à la ligne si trop large */
  gap: 20px;               /* espace entre les sections */
  justify-content: center; /* centre les sections si elles ne remplissent pas toute la ligne */
  max-width: 1000px;       /* limite la largeur totale de la ligne */
  margin: 0 auto;          /* centre horizontalement dans la page */
}
/*----------------------------------------------------------------------------------------------*/
/*Format des Colonne*/
/*----------------------------------------------------------------------------------------------*/
.special-section {
  flex: 1 1 300px;         /* largeur minimale 300px, peut grandir */
  max-width: calc((1000px - 2 * 20px) / 4); /* largeur max par section si tu veux exactement 3 sections par ligne */
  box-sizing: border-box;
/*----------------------------------------------------------------------------------------------*/
}.special-section {
	  background-color: var(--bg-color-Section); /*Fond*/
	  padding: 3rem 1rem;
	  border-radius: 16px; /*bon arrondi*/
	  box-shadow: 0 4px 10px var(--shadow-color); /*Shaddow normal*/
	  transition: box-shadow 0.3s ease; /*transition*/
	  margin: 2rem auto;
	  max-width: 1000px;
	}

	.special-section:hover {
	  box-shadow: 0 6px 16px var(--shadow-hover); /*Shaddow survol*/
	}

	.special-section h2 {
	  color: var(--primary-green-dark);
	  text-align: center;
	  margin-bottom: 2rem;
	}
	/*----------------------------------------------------------------------------------------------*/
	/*Format des Container*/
	/*----------------------------------------------------------------------------------------------*/
	.special-section .container {
	  display: flex;
	  align-items: flex-start;
	  justify-content: center;
	  gap: 2rem;
	  flex-wrap: wrap;
	}
	/*----------------------------------------------------------------------------------------------*/
	/*Format des photos*/
	/*----------------------------------------------------------------------------------------------*/

	/* Image */
	.special-section .container .photo  img {
	width: 260px;
	  height: auto;
	  border-radius: 16px;
	  object-fit: cover;
	  box-shadow: 0 4px 8px var(--shadow-color);
	  transition: transform 0.3s ease, box-shadow 0.3s ease;
	}

	.services-section .container img {
	  width: 100%;
	  height: 200px;
	  object-fit: cover;
	}

/*----------------------------------------------------------------------------------------------*/
/*Format des texte*/
/*----------------------------------------------------------------------------------------------*/

	/* Texte */
	.special-section .comment {
	  max-width: 650px;
	  color: var(--text-color);
	}

	.special-section .comment h3 {
	  color: var(--primary-green-dark);
	  margin-top: 0;
	  margin-bottom: 0.5rem;
	  font-size: 1.6rem;
	}

	.special-section .comment p {
	  line-height: 1.7;
	  text-align: justify;
	}

	.special-section .comment a {
	  color: var(--primary-green);
	  text-decoration: none;
	}

	.special-section .comment a:hover {
	  text-decoration: underline;
	}
/*----------------------------------------------------------------------------------------------*/
/*Meditation - Calendrier*/
/*----------------------------------------------------------------------------------------------*/

.special-section .rendezvous-calendrier {
  flex: 1 1 50%;
  min-width: 350px;
  display: flex; /* permet au widget de prendre toute la hauteur */
}

.special-section .rendezvous-calendrier .calendly-inline-widget {
  flex: 1; /* prend toute la hauteur du parent */
  width: 100%;
  min-height: 600px; /* hauteur du calendrier sur desktop */
  border-radius: 12px;
  overflow: hidden;
}
/*----------------------------------------------------------------------------------------------*/
	/* --- Pour la gestion des mobiles --- */
/*----------------------------------------------------------------------------------------------*/

@media (max-width: 992px) {
  .special-section .team-container,
  .services-section .services-container {
    gap: 1.5rem;
  }
}

@media (max-width: 768px) {
  .special-section .team-container,
  .services-section .services-container {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }

  .special-section .team-photo img,
  .services-section .service-card img {
    width: 80%;
    max-width: 320px;
  }

  .special-section .team-comment,
  .services-section .service-card {
    max-width: 90%;
  }
}