/* ========================================================================== */
/* 1. Styles spécifiques à la page d'accueil                                  */
/* ========================================================================== */

a { color: #4C989C; text-decoration: none; }
a:hover { color: #3a7478; }

/* ========================================================================== */
/* 2. Section Intro                                                           */
/* ========================================================================== */

.page-section1 {
  display: flex;
  margin-top: 2rem;
  justify-content: center;
  padding: 0 1rem;
}

.intro {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2rem;
  padding: 2rem 1rem;
  width: 100%;
  margin: 0 auto;
}

.intro-content {
  display: flex;
  flex-direction: column;
  gap: 2rem;
  width: 100%;
  align-items: center;
}

.intro-img2 { 
  object-fit: cover; 
  width: 80%; 
  padding-top: 1rem;
}

.intro-text {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  width: 100%;
  position: relative;
}

.intro1 {
  color: white;
  background-color: #4C989C;
  border-radius: 15px;
  padding: 1.5rem 2rem;
  font-size: calc(1rem + 0.5vw);
  margin-bottom: 1.5rem;
  box-shadow: 0 4px 15px rgba(76, 152, 156, 0.3);
}

.intro2 {
  color: #333;
  font-size: calc(0.9rem + 0.3vw);
  font-weight: 500;
  line-height: 1.6;
  margin: 0;
}

.intro3, .intro4 {
  color: black;
  font-family: "Segoe print", Arial, Helvetica, sans-serif;
  font-size: calc(0.7rem + 0.45vw);
  width: 90%;
  text-align: center;
  align-self: center;
}

.intro4 { margin-top: 1rem; line-height: 1.5; }

/* Image décorative cachée en mobile */
.intro-img1 { display: none; }

/* Variantes intro-nouv */
.intro-nouv1, .intro-nouv2, .intro-nouv3 {
  font-size: 1rem;
  padding: 1rem;
  justify-self: center;
  z-index: 2;
}
.intro-nouv1 { grid-column: 1 / 3; grid-row: 4; align-self: center; }
.intro-nouv2 { grid-column: 1 / 3; grid-row: 1; }
.intro-nouv3 { grid-column: 1; grid-row: 1; z-index: 1; }


/* ========================================================================== */
/* 3. Boutons (général + variantes)                                           */
/* ========================================================================== */

button,
.btn-pillar,
.btn-cta,
.btn-avis {
  border-radius: 300px;
  cursor: pointer;
  font-weight: 600;
  transition: all 0.3s ease;
  font-size: calc(0.8rem + 0.2vw);
}

.intro-nouv2 button,
.intro-nouv3 button {
  background-color: white;
  font-size: calc(0.7rem + 0.45vw);
  padding: 9px;
  border: 2px solid #ACE0E3;
  color: #1d286d;
}
.intro-nouv2 button:hover,
.intro-nouv3 button:hover {
  background-color: #ACE0E3;
  box-shadow: 0 0 5px #777;
}

.intro-nouv1 button,
.rendez-vous button {
  background-color: #4C989C;
  font-size: calc(0.7rem + 0.3vw);
  border: 2px solid #dcabc1;
  color: #1d286d;
}
.intro-nouv1 button:hover,
.rendez-vous button:hover {
  background-color: #dcabc1;
  color: #fff;
  box-shadow: 0 0 5px #777;
}

.btn-pillar {
  display: inline-block;
  background-color: #4C989C;
  color: white;
  padding: 0.6rem 1.2rem;
  border: none;
  border-radius: 30px;
  margin-top: auto;
  font-family: "Segoe print", Arial, Helvetica, sans-serif;
}
.btn-pillar:hover { background-color: #3a7a7d; transform: translateY(-2px); box-shadow: 0 4px 8px rgba(0,0,0,0.1); }

.btn-cta {
  background-color: #4C989C;
  color: white;
  border: 2px solid #dcabc1;
  padding: 9px 20px;
}
.btn-cta:hover { background-color: #dcabc1; }

.btn-avis {
  background-color: #dcabc1;
  color: #ACE0E3;
  padding: 12px 24px;
  border: none;
  border-radius: 50px;
}
.btn-avis:hover { background-color: #d19aad; transform: translateY(-2px); }


/* ========================================================================== */
/* 4. Section "Ma mission" & Piliers                                          */
/* ========================================================================== */

.section-heading { margin-bottom: 1.5rem; color: #333; text-align: center; }

.pillars-grid {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  margin-top: 2rem;
}

.pillar-card {
  background: #f0f7f7;
  border-radius: 10px;
  padding: 1.5rem;
  border-left: 4px solid #dcabc1;
  box-shadow: 0 4px 10px rgba(0,0,0,0.05);
  transition: transform 0.3s, box-shadow 0.3s;
}
.pillar-card:hover { transform: translateY(-5px); box-shadow: 0 8px 20px rgba(0,0,0,0.1); }

.pillar-card h3 { color: #4C989C; margin-bottom: 1rem; font-size: 1.3rem; text-align: center; }

.pillar-card ul { list-style: none; padding: 0; margin: 0 0 1.5rem; }
.pillar-card ul li { margin-bottom: 0.5rem; padding-left: 1.5rem; position: relative; }
.pillar-card ul li:before { content: "✔"; position: absolute; left: 0; color: #4C989C; font-weight: bold; }


/* ========================================================================== */
/* 5. Section Contact                                                         */
/* ========================================================================== */

.bleu { background-color: #4C989C; }
.bandeau { width: 80%; margin: 0 auto; }

.contact { display: flex; flex-direction: column; gap: 2rem; }
.contact1 { order: 1; display: flex; flex-direction: column; height: 100%; }
.contact2 { order: 2; }
.contact3 { order: 3; padding: 1.5rem; color: black; height: 100%; }

.logo { max-width: 2em; }
#nom { font-weight: 600; font-size: 1.5rem; margin-bottom: 1rem; color: black; }

.img_cec { max-width: 200px; margin: 1vw; background-size: cover; min-width: 200px; }

.souscontact1 { display: flex; justify-content: space-between; align-items: center; gap: 1rem; }
.souscontact2 a { color: black; text-decoration: none; display: block; margin-bottom: 0.5rem; padding: 8px; border-radius: 8px; }
.souscontact2 a:hover { background-color: rgba(255,255,255,0.2); transform: translateX(5px); }
.souscontact2 a div { display: flex; align-items: center; gap: 8px; }

.contact3 h2 { font-size: 1.3rem; margin-bottom: 1rem; color: black; }
.contact3 ul { list-style: none; padding: 0; }
.contact3 li { margin-bottom: 0.8rem; font-size: 1rem; line-height: 1.4; color: black; padding-left: 1.5rem; position: relative; }
.contact3 li:before { content: "✔"; position: absolute; left: 0; color: #4C989C; font-weight: bold; }

.contact-grid { display: flex; flex-wrap: wrap; gap: 2rem; margin-top: 2rem; }
.contact-block, .why-block, .photo-block { flex: 1; min-width: 250px; transition: transform 0.3s, box-shadow 0.3s; }

.contact-block h3, .why-block h3 { margin-bottom: 1rem; }
.contact-block a, .photo-block a, .why-block a { color: #333; text-decoration: none; }
.contact-block a:hover, .photo-block a:hover, .why-block a:hover { color: #000; }

.contact-block a[href^="tel"],
.contact-block a[href^="mailto"] { display: inline-block; padding: 8px; border-radius: 8px; transition: all 0.3s; }
.contact-block a[href^="tel"]:hover,
.contact-block a[href^="mailto"]:hover { background-color: rgba(255,255,255,0.2); transform: translateX(5px); }

.photo-block { text-align: center; }
.social-links { display: flex; justify-content: center; gap: 1rem; margin-top: 1rem; }
.social-links img { width: 30px; height: 30px; transition: transform 0.3s; }
.social-links img:hover { transform: scale(1.1); }

.cta-section { margin-top: 1rem; padding: 1rem; background-color: #dcabc1; border-radius: 8px; color: white; text-align: center; }
.cta-section .gift-icon { font-size: 2rem; }
.cta-section p { margin: 0.5rem 0; font-weight: bold; }


/* ========================================================================== */
/* 6. Section Avis                                                            */
/* ========================================================================== */

.avis-header h2 { font-size: 1.8rem; color: #333; margin-bottom: 1rem; }

.google-avis-box {
  background-color: #f8f9fa;
  border-radius: 12px;
  padding: 2rem;
  max-width: 350px;
  margin: 0 auto;
  text-align: center;
  box-shadow: 0 4px 20px rgba(0,0,0,0.08);
}
.google-avis-box .avis-source { font-size: 1.2rem; font-weight: 600; margin-bottom: 1rem; }

.google-rating { display: flex; justify-content: center; align-items: center; gap: 0.75rem; margin-bottom: 1.5rem; }
.google-rating img { width: 28px; height: 28px; }
.google-rating .stars { color: #fbbc04; font-size: 1.5rem; }
.google-rating .score { font-size: 1.2rem; font-weight: 700; }


/* ========================================================================== */
/* 7. Media Queries                                                           */
/* ========================================================================== */

@media (min-width: 625px) and (max-width: 767px) {
  .contact { flex-direction: row; flex-wrap: wrap; }
  .contact1 { flex: 2; order: 1; }
  .contact2 { flex: 1; order: 2; margin: auto; }
  .contact3 { flex: 100%; order: 3; }
  .logo { max-width: 3em; }
  #nom { font-size: 1.4rem; }
}

@media (min-width: 992px) {
  .pillars-grid { flex-direction: row; justify-content: space-between; }
  .pillar-card { flex: 1; margin: 0 1rem; }
  .contact-grid { flex-direction: row; }
}

@media (min-width: 1200px) {
  .intro { gap: 3rem; padding: 3rem 2rem; }
  .intro1 { font-size: calc(1.2rem + 0.5vw); padding: 2rem 2.5rem; }

  .intro-content { flex-direction: row; align-items: center; gap: 4rem; width: 80%; position: relative; }
  .intro-img2 { width: 80%; flex-shrink: 0; }
  .intro-text { width: 50%; position: relative; z-index: 2; left: 10%; }
  .intro2 { font-size: calc(1rem + 0.3vw); line-height: 1.7; display: flex; align-items: center; gap: 1.5rem; }
  .intro-img1 { display: block; position: absolute; right: 0; top: 40%; transform: translateY(-50%); width: 45%; object-fit: contain; z-index: 1; }

  .contact { flex-direction: row; flex-wrap: nowrap; }
  .contact1, .contact2, .contact3 { flex: 1; order: initial; }
}