/* === Slider fond === */
.custom-hero-slider {
  position: relative;
  width: 100%;
  height: 100vh;
  overflow: hidden;
}

.custom-hero-slider .slide {
  position: absolute;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  animation: fadeSlider 24s infinite;
  opacity: 0;
}

.custom-hero-slider .slide:nth-child(1) { animation-delay: 0s; }
.custom-hero-slider .slide:nth-child(2) { animation-delay: 8s; }
.custom-hero-slider .slide:nth-child(3) { animation-delay: 16s; }

@keyframes fadeSlider {
  0%, 100% { opacity: 0; }
  10%, 30% { opacity: 1; }
  40%, 90% { opacity: 0; }
}

/* === Contenu texte === */
.hero__content {
  position: absolute;
  top: 50%;
  left: 0; right: 0;
  transform: translateY(-50%);
  z-index: 2;
  text-align: center;
  padding: 20px;
  color: white;
  text-shadow: 2px 2px 4px #000;
}

.hero__content h2 {
  font-size: 2rem;
  font-weight: 800;
  margin-bottom: 10px;
}

.hero-names {
  position: relative;
  display: block;
  min-height: 1.5em;
}

/* Tous les noms */
.hero-names .name {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  opacity: 0;
  text-align: center;
  font-weight: bold;
  color: #38b000;
  animation-duration: 12s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
  animation-fill-mode: both;
}


/* === Animation indépendante, sans chevauchement === */
.name-1 {
  animation: fade1 12s linear infinite;
}
.name-2 {
  animation: fade2 12s linear infinite;
}
.name-3 {
  animation: fade3 12s linear infinite;
}
.name-4 {
  animation: fade4 12s linear infinite;
}

/* === Chaque nom a sa propre plage de 3s (sans recouvrement) === */
/* === Nom 1 === */
.name-1 {
  animation-name: fade1;
}
@keyframes fade1 {
  0%   { opacity: 0; }
  4%   { opacity: 1; }
  21%  { opacity: 1; }
  25%  { opacity: 0; }
  100% { opacity: 0; }
}

/* === Nom 2 === */
.name-2 {
  animation-name: fade2;
}
@keyframes fade2 {
  0%, 24%  { opacity: 0; }
  25%      { opacity: 1; }
  42%      { opacity: 1; }
  46%      { opacity: 0; }
  100%     { opacity: 0; }
}

/* === Nom 3 === */
.name-3 {
  animation-name: fade3;
}
@keyframes fade3 {
  0%, 45%  { opacity: 0; }
  46%      { opacity: 1; }
  63%      { opacity: 1; }
  67%      { opacity: 0; }
  100%     { opacity: 0; }
}

/* === Nom 4 ("Vous ?") === */
.name-4 {
  animation-name: fade4;
}
@keyframes fade4 {
  0%, 66%  { opacity: 0; }
  67%      { opacity: 1; }
  84%      { opacity: 1; }
  88%      { opacity: 0; }
  100%     { opacity: 0; }
}

/* === Style spécial "Vous ?" === */
.hero-names .special {
  color: #e63946;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.4);
}

/* === Effet pulse discret pendant que "Vous ?" est visible === */
.name-4.special {
  animation-name: fade4, pulse;
  animation-duration: 12s, 2s;
  animation-delay: 0s, 67%;
  animation-timing-function: linear, ease-in-out;
  animation-iteration-count: infinite;
  animation-fill-mode: both;
}

@keyframes pulse {
  0%   { transform: scale(1); }
  50%  { transform: scale(1.08); }
  100% { transform: scale(1); }
}

/* === Texte secondaire === */
.hero-small-text {
  font-size: 1em;
  line-height: 1.5;
  text-shadow: 1px 1px 3px rgba(0,0,0,0.6);
  margin-top: 20px;
  margin-bottom: 30px;
}

.hero-small-text strong {
  color: #38b000;
}

/* === Bouton === */
.btn-theme-primary {
  background-color: #38b000;
  border: none;
  color: #fff;
  padding: 10px 25px;
  font-weight: bold;
  border-radius: 5px;
  text-decoration: none;
  box-shadow: 1px 1px 5px rgba(0,0,0,0.3);
}

.btn-theme-primary:hover {
  background-color: #2f8700;
}

/* === Responsive === */
@media screen and (max-width: 768px) {
  .hero__content h2 {
    font-size: 1.4rem;
  }
  .hero-names {
    font-size: 1.3rem;
  }
  .hero-small-text {
    font-size: 0.95rem;
  }
}