/* ===================================
   SYNAP'KIDS - LANDING PAGE ENHANCEMENTS (VERSION SIMPLIFIÉE)
   =================================== */

/* === 1. LIGNES SOUS LES TITRES === */
.section-title {
  position: relative;
}

.section-title::after {
  content: "";
  position: absolute;
  bottom: -8px;
  left: 50%;
  transform: translateX(-50%);
  width: 50%;
  height: 3px;
  background: linear-gradient(
    90deg,
    var(--orange-strong),
    var(--blue-strong)
  );
  border-radius: 2px;
}

/* === 2. EFFETS SUR LES BOUTONS === */
@keyframes shine {
  0% {
    transform: translateX(-100%) rotate(45deg);
  }
  100% {
    transform: translateX(200%) rotate(45deg);
  }
}

.btn-primary {
  position: relative;
  overflow: hidden;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 8px 24px rgba(78, 124, 216, 0.32),
              0 4px 12px rgba(255, 150, 64, 0.3);
}

.btn-primary::before {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 50%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.3),
    transparent
  );
  animation: shine 3s infinite;
}

.btn-primary:hover {
  transform: translateY(-3px) scale(1.02);
  box-shadow: 0 12px 32px rgba(78, 124, 216, 0.42),
              0 6px 16px rgba(255, 150, 64, 0.4);
}

.btn-primary:active {
  transform: translateY(-1px) scale(0.98);
}

.btn-secondary {
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.btn-secondary:hover {
  transform: translateY(-2px);
  background: rgba(255, 255, 255, 0.14);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
}

/* === 3. EFFETS DERRIÈRE LES IMAGES === */
.feature-illustration {
  transition: transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94), filter 0.5s cubic-bezier(0.4, 0, 0.2, 1);
  filter: brightness(0.95);
  transform-origin: center;
}

/* Réduire la translucidité des images de la section accompagnement */
.accompagnement-img {
  opacity: 1 !important;
  filter: brightness(1) !important;
}

/* .feature-row:hover .feature-illustration {
  transform: scale(1.05);
  filter: brightness(1);
}

.feature-row:hover .feature-illustration.feature-animate {
  animation: none;
} */

.blog-card-img {
  transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.blog-card:hover .blog-card-img {
  transform: scale(1.1);
}

/* Centrer les images de la section accompagnement sur desktop et mobile */
.section-accompagnement .feature-row,
.section-accompagnement .feature-row.reverse {
  flex-direction: column !important;
  align-items: center !important;
  text-align: center !important;
}

.section-accompagnement .feature-row .feature-illustration {
  max-width: 60% !important;
}

/* === 4. FIX SAMSUNG INTERNET - Dégradé noir entre héros et première section === */
/* Samsung Internet a besoin d'un dégradé noir explicite ET d'un padding en haut */

/* Forcer le background noir et réduire l'opacité des dégradés colorés */
.samsung-internet .flagship-section {
  background-color: #000000 !important;
}

.samsung-internet .flagship-section::before {
  opacity: 0.3 !important; /* Réduire l'intensité des dégradés colorés */
}

/* Augmenter le padding-top UNIQUEMENT sur Samsung Internet */
.samsung-internet .flagship-grid {
  padding-top: clamp(100px, 12vw, 150px) !important;
  background: linear-gradient(to bottom, #000000 0%, transparent 100px) !important;
}

/* Ajouter un overlay noir en haut de la section */
.samsung-internet .flagship-section::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 200px;
  /* Dégradé noir solide avec fallback */
  background: #000000;
  background: -webkit-linear-gradient(180deg, #000000 0%, rgba(0,0,0,0.95) 30%, rgba(0,0,0,0.7) 60%, transparent 100%);
  background: -moz-linear-gradient(180deg, #000000 0%, rgba(0,0,0,0.95) 30%, rgba(0,0,0,0.7) 60%, transparent 100%);
  background: linear-gradient(180deg, #000000 0%, rgba(0,0,0,0.95) 30%, rgba(0,0,0,0.7) 60%, transparent 100%);
  z-index: 1;
  pointer-events: none;
}

/* Responsive */
@media (max-width: 900px) {
  .btn-primary:hover,
  .btn-secondary:hover {
    transform: translateY(-2px) scale(1.01);
  }

  /* Désactiver l'effet zoom/shadow au hover sur mobile, garder l'animation de flottement */
  .feature-row:hover .feature-illustration {
    transform: none;
    filter: none;
  }

  /* Agrandir drastiquement les images de la section accompagnement sur mobile */
  .section-accompagnement .feature-row .feature-illustration {
    max-width: 95% !important;
  }

  /* Réduire la taille des cartes blog sur mobile */
  .blog-card {
    max-width: 90%;
    margin: 0 auto;
  }

  .blog-card-img {
    max-height: 180px;
    object-fit: cover;
  }

  .blog-card-content {
    padding: 16px;
  }

  .blog-card-content h3 {
    font-size: 18px;
  }

  .blog-card-content p {
    font-size: 14px;
  }

  /* Masquer le saut de ligne sur mobile */
  .desktop-break {
    display: none;
  }

  /* Réduire l'espace et la taille de seors.jpeg sur mobile */
  .seors-section {
    padding: 15px 0 10px !important;
  }

  .seors-image {
    max-width: 280px !important;
  }
}