/* ============================================================
   1. style de index.php — Éco'Mam
   ============================================================ */

html {
  scroll-behavior: smooth;
}

/* ══════════════════════════════════════════
   HERO
   ══════════════════════════════════════════ */
#accueil {
  position:    relative;
  min-height:  90vh;
  display:     flex;
  align-items: center;
  overflow:    hidden;
  margin-top:  0;
  padding:     0;
}
 
 
/* ══════════════════════════════════════════
   IMAGE DE FOND
   ══════════════════════════════════════════ */
.hero-bg {
  position:              absolute;
  inset:                 0;
  z-index:               0;
  background:            url('../img/imgIndexHeader.jpg') center / cover no-repeat;
}
 
/* Overlay dégradé sombre */
.hero-bg::after {
  content:    '';
  position:   absolute;
  inset:      0;
  background: linear-gradient(
    105deg,
    rgba(20, 14, 8, .84) 0%,
    rgba(20, 14, 8, .62) 45%,
    rgba(20, 14, 8, .22) 100%
  );
}
 
 
/* ══════════════════════════════════════════
   CONTENU TEXTE
   ══════════════════════════════════════════ */
.hero-content {
  position:  relative;
  z-index:   10;
  max-width: 600px;
  padding:   120px 72px 100px;
}
 
/* Tag "Assistante maternelle agréée" */
.hero-tag {
  display:         inline-flex;
  align-items:     center;
  gap:             8px;
  background:      rgba(255, 255, 255, .10);
  border:          1px solid rgba(255, 255, 255, .20);
  backdrop-filter: blur(8px);
  color:           rgba(255, 255, 255, .88);
  font-size:       .72rem;
  font-weight:     800;
  letter-spacing:  2px;
  text-transform:  uppercase;
  padding:         6px 16px;
  border-radius:   20px;
  margin-bottom:   24px;
  user-select : none;
}
 
.hero-tag i {
  color:     var(--vert);
  font-size: .75rem;
}
 
/* Titre */
.hero-content h1 {
  font-family:   var(--font-titre);
  font-size:     4.2rem;
  line-height:   1.05;
  color:         #fff;
  margin-bottom: 20px;
	user-select : none;
}
 
.hero-content h1 span {
  color: var(--peche);
	user-select : none;
}
 
/* Texte */
.hero-content p {
  font-size:     1.05rem;
  line-height:   1.8;
  color:         rgba(255, 255, 255, .72);
  max-width:     460px;
  margin-bottom: 38px;
	user-select : none;

}
 
/* Boutons */
.hero-ctas {
  display:     flex;
  align-items: center;
  gap:         14px;
  flex-wrap:   wrap;
}
 
.cta-primary {
  display:         inline-flex;
  align-items:     center;
  gap:             10px;
  padding:         14px 32px;
  border-radius:   12px;
  background:      var(--belge);
  color:           #fff;
  font-family:     var(--font-texte);
  font-weight:     800;
  font-size:       .92rem;
  text-decoration: none;
  border:          none;
  cursor:          pointer;
  transition:      background .2s, transform .18s;
}
 
.cta-primary:hover {
  background: #9a6e32;
  transform:  translateY(-2px);
}
 
.cta-primary i { font-size: .82rem; }
 
.cta-secondary {
  display:         inline-flex;
  align-items:     center;
  gap:             8px;
  padding:         14px 28px;
  border-radius:   12px;
  border:          1.5px solid rgba(255, 255, 255, .35);
  color:           rgba(255, 255, 255, .88);
  font-family:     var(--font-texte);
  font-weight:     700;
  font-size:       .88rem;
  text-decoration: none;
  transition:      border-color .2s, color .2s;
}
 
.cta-secondary:hover {
  border-color: rgba(255, 255, 255, .75);
  color:        #fff;
}
 
.cta-secondary i { font-size: .82rem; }
 
 
/* ══════════════════════════════════════════
   RESPONSIVE
   ══════════════════════════════════════════ */
@media (max-width: 1050px) {
  .hero-content {
    padding: 100px 48px 80px;
  }
 
  .hero-content h1 {
    font-size: 3.4rem;
  }
 
  .hero-bg::after {
    background: linear-gradient(
      105deg,
      rgba(20, 14, 8, .80) 0%,
      rgba(20, 14, 8, .60) 100%
    );
  }
}
 
@media (max-width: 650px) {
 
  .hero-bg {
    background-attachment: scroll;
  }
 
  .hero-bg::after {
    background: rgba(20, 14, 8, .72);
  }
 
  .hero-content {
    padding:    80px 24px 60px;
    max-width:  100%;
    text-align: center;
  }
 
  .hero-content h1 {
    font-size: 2.8rem;
  }
 
  .hero-content p {
    font-size: .95rem;
    max-width: 100%;
  }
 
  .hero-ctas {
    justify-content: center;
  }
}