html, body
{
	margin: 0;
  padding: 0;
  height: 100%;
  scroll-behavior: smooth;
}

html
{
  scroll-padding-top: 100px;
}


body
{
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	background-attachment: fixed;
	background-color: rgb(254, 236, 248) !important;
}

.overlay {
  position: fixed;
  inset: 0;
  background: rgba(255,255,255,0.6);
}

main
{
	padding:70px 0px 0px 0px;
}

.bg-doula
{
	background-color: #feecf8;
}

.titre-logo {
  font-family: 'Montserrat', sans-serif;
  font-size: 2.2rem;
  font-weight: 600;
  color: #5b3556;
  margin: 2rem 0 1rem;
  position: relative;
  padding-top:1.5rem;
  padding-bottom: 0.5rem;
  border-bottom: 2px solid #e8c8d8; /* couleur douce type rose poudré */
  transition: all 0.3s ease;
}

.titre-logo:hover {
  color: #8b5e83;
  border-color: #d89cb6;
}

.logo-petit {
  height: 2.2rem;
  width: auto;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.15));
  transition: transform 0.3s ease;
}

.titre-logo:hover .logo-petit {
  transform: rotate(-5deg) scale(1.1);
}

#carousel_photos {
  border-radius: 20px;
  overflow: hidden;
  background-color: transparent;
}

.carousel-inner {
  margin-top : 50px;
  max-height: 80vh; /* ou la taille que tu veux */
  background: rgb(254, 236, 248) ; /* ou un pastel doux */
}

.carousel-inner img {
  width: 100%;
  height: auto;
  max-height: 80vh;
  object-fit: cover; /* ✅ tout l’image visible */
  border-radius: 20px; /* arrondi de l’image elle-même */
  background-color: rgb(254, 236, 248); /* couleur identique au fond */
  padding: 10px; /* petit “coussin” autour de l’image */
}

.carousel-item {
  position: relative;
  aspect-ratio: 16/9; /* ✅ fixe bien ton format */
}


.carousel-control-prev-icon,
.carousel-control-next-icon {
  background-size: 50% 50%;
  background-color: rgba(0,0,0,0.2);
  border-radius: 50%;
  padding: 15px;
  transition: background-color 0.3s ease;
}
.carousel-control-prev-icon:hover,
.carousel-control-next-icon:hover {
  background-color: rgba(0,0,0,0.7);
}

.Citation-text
{
  font-family: 'Times New Roman', Times, serif;
  font-size : 1.6rem;
  font-weight: normal;
  font-style: italic;
}

.Accueil-img {
  width: 100%;
  height: auto;
  object-fit: cover;
  border-radius: 25px;
  /* Effet carte photo élégante */
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.30);
  filter: brightness(1.05) contrast(0.95) saturate(1.1);
}

h2
{
  font-family: Verdana, sans-serif;
  font-size:2.5rem;
  font-weight:bold, normal;
}

.thick-separator {
  border: none;           /* Supprime la bordure par défaut */
  height: 4px;            /* Augmente l’épaisseur */
  background-color: #999; /* Couleur de la ligne */
  width: auto;             /* Largeur personnalisée */
  margin: auto;           /* Centrage horizontal */
}

.classic-text
{
  font-family:'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
  font-size: 0.875em;
  font-weight: normal;
}

/*
.custom-color-btn {
  display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.6rem 1.2rem;
	background-color: #fc7edc; 
	color : #fff;
	border : none;
	border-radius: 50px;
	cursor: pointer;
	transition: background-color 0.3s ease;
	text-decoration: none;
}*/
.custom-color-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 1.5rem;
  background: linear-gradient(135deg, #fc7edc, #ff47c2); /* Dégradé moderne */
  color: #fff;
  font-weight: 600;
  font-size: 1rem;
  border: none;
  border-radius: 999px;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(252, 126, 220, 0.4);
  transition: all 0.3s ease;
  text-decoration: none;
  position: relative;
  overflow: hidden;
}

.custom-color-btn::before {
  content: "";
  position: absolute;
  top: 0;
  left: -75%;
  width: 50%;
  height: 100%;
  background: rgba(255, 255, 255, 0.2);
  transform: skewX(-20deg);
  transition: left 0.5s ease;
}

.custom-color-btn:hover::before {
  left: 130%;
}

.custom-color-btn:hover {
  background: linear-gradient(135deg, #ff47c2, #fc7edc);
  box-shadow: 0 6px 18px rgba(252, 126, 220, 0.5);
  transform: translateY(-2px);
}

.btn-card-rose {
  background-color: #fc7edc !important;
  color: white !important;
  border: none;
  transition: background-color 0.3s ease;
}

.btn-card-rose:hover {
  background-color: #e83e8c !important;
  color: white !important;
}

.card {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  max-width:300px;
}

.card:hover {
  transform: translateY(-5px);
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.15);
}

.card-img-top {
  width: 100%;
  height: 100%;          
  object-fit: contain;       /* rogne sans déformer */
  border-radius: 12px;     /* coins arrondis (facultatif) */
  margin: 0 auto;          /* centre horizontalement */
  display: block;
  transition: transform 0.4s ease;
}

.card-img-top-Rencontre
{
  width: 100%;
  height: 200px;           /* fixe la hauteur */
  object-fit: cover;       /* rogne sans déformer */
  border-radius: 0px 0px 12px 12px;     /* coins arrondis (facultatif) */
  margin: 0 auto;          /* centre horizontalement */
  display: block;
  transition: transform 0.4s ease;
}


.card:hover .card-img-top {
  transform: scale(1.05);
}

.object-fit-cover {
  object-fit: cover;
  height: 100%;
}

.carousel-container {
  overflow: hidden;
  position: relative;
}

.carousel-track {
  display: flex;
  transition: transform 0.5s ease-in-out;
}

.carousel-card {
  flex: 0 0 33.3333%; /* 3 cartes par slide */
  box-sizing: border-box;
  padding: 1rem;
}

.review-card {
  background: #fff;
  border-radius: 12px;
  padding: 1.5rem;
  box-shadow: 0 2px 10px rgba(0,0,0,0.08);
  height: 100%;
}

.review-avatar {
  width: 48px;
  height: 48px;
  background: #ddd;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  color: #555;
  margin-right: 10px;
}

.review-stars {
  color: #fbbc04;
}

.carousel-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: #000;
  color: white;
  border: none;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  z-index: 1;
}

.carousel-btn.prev { left: 10px; }
.carousel-btn.next { right: 10px; }