/* ============================================================
   PAGE D'ACCUEIL — règles propres au hero uniquement
   ------------------------------------------------------------
   Tout le reste de la page (sections, cartes, simulateur,
   formulaire, tarifs, FAQ, CTA) utilise les composants partagés
   de css/components.css et css/home.css, exactement comme
   courses.html. Ne pas ajouter ici de surcharge de typographie,
   de couleur de texte ou d'alignement des sections : c'est ce
   qui faisait diverger l'accueil du reste du site.
   ============================================================ */

/* ─── HERO : hauteur compacte ─── */
.header-carousel .owl-carousel-item { min-height: 430px; }
.header-carousel .owl-carousel-item img.yc-home-hero-image {
  width: 100%;
  height: 430px;
  object-fit: cover;
  object-position: center;
}

/* ─── HERO : typographie alignée sur les titres des autres pages ─── */
.header-carousel .yc-home-hero-content { padding-top: .5rem; padding-bottom: .5rem; }
.header-carousel .yc-home-hero-eyebrow {
  font-family: 'Nunito', sans-serif;
  font-size: 13px !important;           /* = .section-label */
  font-weight: 800;
  letter-spacing: .12em;
  margin-bottom: .6rem !important;
}
.header-carousel .yc-home-hero-title {
  font-family: 'Nunito', sans-serif;
  font-size: clamp(1.8rem, 3vw, 2.5rem) !important;  /* ≈ h1 des page-header (40px) */
  font-weight: 900;
  line-height: 1.15 !important;
  margin-bottom: .9rem !important;
}
.header-carousel .yc-home-hero-subtitle {
  font-size: 1rem !important;           /* = .section-desc */
  line-height: 1.7 !important;
  max-width: 580px;
  margin-bottom: 1.6rem !important;
  opacity: .9;
}

/* ─── HERO : boutons du design system (au lieu des boutons Bootstrap carrés) ─── */
.header-carousel .yc-hero-actions { gap: 12px; }
.header-carousel .yc-hero-actions .btn-primary-custom,
.header-carousel .yc-hero-actions .btn-ghost-custom { min-width: 170px; }
.header-carousel .btn-ghost-custom.yc-hero-ghost { color: #fff; border-color: #fff; }
.header-carousel .btn-ghost-custom.yc-hero-ghost:hover { background: #fff; color: var(--primary); }

/* ─── HERO : flèches du carrousel ─── */
.header-carousel .owl-nav .owl-prev,
.header-carousel .owl-nav .owl-next { border-radius: 8px; }

@media (max-width: 768px) {
  .header-carousel .owl-carousel-item { min-height: 400px; }
  .header-carousel .owl-carousel-item img.yc-home-hero-image { height: 400px; }
  .header-carousel .yc-home-hero-title { font-size: 1.75rem !important; }
  .header-carousel .yc-home-hero-subtitle { font-size: .92rem !important; }
  .header-carousel .yc-hero-actions .btn-primary-custom,
  .header-carousel .yc-hero-actions .btn-ghost-custom { min-width: 0; flex: 1 1 140px; padding: 12px 18px; }
  /* Les flèches chevauchaient le texte sur mobile : navigation au glisser/autoplay */
  .header-carousel .owl-nav { display: none !important; }
}