/* ==========================================================================
   mobile-principal.css
   Design premium mobile page principale MichaelOr
   ========================================================================== */

@media (max-width: 768px) {
  /* ———> 1) MASQUAGE DU BADGE “MichaelOr” */
  /* cible le premier <span> dans la section hero (celui avec mb-5) */
  section.relative.z-10 > span {
    display: none !important;
  }

  /* ———> 2) Slider = image en fond, jamais rognée */
  #slider img {
    object-fit: cover !important;
    min-height: 60vh;
    max-height: 70vh;
  }

  /* Overlay dégradé bas pour lisibilité */
  .slider-overlay-gradient {
    position: absolute;
    left: 0; right: 0; bottom: 0;
    height: 48%;
    background: linear-gradient(to top, #fff 80%, rgba(255,255,255,0.15) 100%);
    z-index: 1;
    pointer-events: none;
  }

  /* Container central : padding + centrage */
  .home-hero-content {
    position: relative;
    z-index: 2;
    padding: 0 1.1rem;
    margin-top: 8vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    max-width: 95vw;
    margin-bottom: 3.5vh;
  }

  /* Logo-badge (desktop only) */
  .badge-michaelor {
    font-size: 0.9rem;
    letter-spacing: 0.12em;
    font-weight: 700;
    color: #D4AF37;
    background: #fffbe9;
    border-radius: 99px;
    padding: 7px 24px;
    margin-bottom: 1.5rem;
    box-shadow: 0 1px 12px #d4af3740;
    border: 1.2px solid #d4af37;
    text-transform: uppercase;
    backdrop-filter: blur(2.5px);
  }

  /* Titre principal */
  .home-hero-title {
    font-family: 'Playfair Display', serif;
    font-size: 2.2rem;
    font-weight: 900;
    line-height: 1.08;
    text-align: center;
    margin-bottom: 1rem;
    color: #16191E;
    text-shadow: 0 2px 12px #fff8;
  }

  /* Sous-titre */
  .home-hero-desc {
    font-size: 1.08rem;
    color: #444;
    text-align: center;
    margin-bottom: 1.2rem;
    font-weight: 500;
    background: rgba(255,255,255,0.85);
    padding: 0.8rem 0.7rem;
    border-radius: 20px;
    box-shadow: 0 1px 8px #eee;
    line-height: 1.35;
  }

  /* Badge “nouveauté” */
  .badge-nouveaute {
    display: inline-block;
    margin-top: 0.6rem;
    background: #D4AF37;
    color: #fff;
    font-size: 0.98rem;
    padding: 6px 20px;
    border-radius: 24px;
    font-weight: 600;
    box-shadow: 0 2px 8px #d4af3760;
  }

  /* Bouton CTA principal */
  .btn-cta-boutique {
    display: block;
    margin: 1.5rem auto 1.1rem auto;
    background: #D4AF37;
    color: #fff;
    font-size: 1.2rem;
    font-weight: 700;
    padding: 15px 32px;
    border-radius: 999px;
    box-shadow: 0 4px 18px #d4af3725;
    border: none;
    transition: all 0.18s cubic-bezier(.7,.2,.1,1);
    letter-spacing: 0.03em;
  }
  .btn-cta-boutique:active,
  .btn-cta-boutique:focus,
  .btn-cta-boutique:hover {
    background: #b28d28;
    transform: scale(1.03);
    box-shadow: 0 6px 28px #b28d2820;
  }

  /* Badges avantages */
  .advantage-badge {
    display: flex;
    align-items: center;
    gap: 8px;
    background: #fff;
    color: #473e1d;
    font-size: 0.99rem;
    padding: 7px 15px;
    border-radius: 32px;
    box-shadow: 0 1px 8px #e2ce7c2c;
    margin: 0 0.3rem 0.8rem 0.3rem;
    border: 1.2px solid #ece1be;
    font-weight: 500;
  }
  .advantage-badge svg {
    width: 1.1em;
    height: 1.1em;
    color: #D4AF37;
    flex-shrink: 0;
  }
}
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.animate-fade-in-up {
  animation: fadeInUp 0.8s ease-out both;
}