/* Animation 3D lettre par lettre - 12 mots avec alignement haut */

.hero-title .rotating-word-wrapper {
  display: inline-flex;
  position: relative;
  min-width: 350px; /* Plus large pour "Contrôle d'accès" */
  height: 1.3em;
  vertical-align: top; /* ALIGNEMENT EN HAUT */
  margin: 0;
}

.hero-title .title-line {
  vertical-align: top; /* ALIGNEMENT EN HAUT aussi */
}

.hero-title .rotating-word {
  position: absolute;
  display: none !important;
  top: 0;
  left: 0;
  white-space: nowrap;
  /* Annuler le gradient du titre */
  background: none !important;
  -webkit-background-clip: initial !important;
  background-clip: initial !important;
}

/* SEUL le premier mot visible */
.hero-title .rotating-word:first-child {
  display: flex !important;
  opacity: 1 !important;
}

/* Quand un mot reçoit opacity:1 du JS, l'afficher */
.hero-title .rotating-word[style*="opacity: 1"],
.hero-title .rotating-word[style*="opacity:1"] {
  display: flex !important;
}

/* Les lettres individuelles */
.hero-title .rotating-word .letter {
  transform-origin: center center 25px;
  display: inline-block;
}

/* Animation de sortie */
.hero-title .rotating-word .letter.out {
  transform: rotateX(90deg);
  transition: 0.32s cubic-bezier(0.6, 0, 0.7, 0.2);
}

/* Animation d'entrée */
.hero-title .rotating-word .letter.in {
  transition: 0.38s ease;
  transform: rotateX(0deg);
}

/* Position derrière (avant d'entrer) */
.hero-title .rotating-word .letter.behind {
  transform: rotateX(-90deg);
}

/* ========================================
   12 COULEURS DIFFÉRENTES
   ======================================== */

/* 1. IT - Rouge vif */
.hero-title .rotating-word.color-1,
.hero-title .rotating-word.color-1 .letter { 
  color: #e74c3c !important;
  -webkit-text-fill-color: #e74c3c !important;
}

/* 2. Cloud - Violet */
.hero-title .rotating-word.color-2,
.hero-title .rotating-word.color-2 .letter { 
  color: #9b59b6 !important;
  -webkit-text-fill-color: #9b59b6 !important;
}

/* 3. Microsoft 365 - Bleu */
.hero-title .rotating-word.color-3,
.hero-title .rotating-word.color-3 .letter { 
  color: #3498db !important;
  -webkit-text-fill-color: #3498db !important;
}

/* 4. Téléphonie IP - Vert */
.hero-title .rotating-word.color-4,
.hero-title .rotating-word.color-4 .letter { 
  color: #2ecc71 !important;
  -webkit-text-fill-color: #2ecc71 !important;
}

/* 5. Cybersécurité - Orange */
.hero-title .rotating-word.color-5,
.hero-title .rotating-word.color-5 .letter { 
  color: #f39c12 !important;
  -webkit-text-fill-color: #f39c12 !important;
}

/* 6. Mobile - Rose */
.hero-title .rotating-word.color-6,
.hero-title .rotating-word.color-6 .letter { 
  color: #e91e63 !important;
  -webkit-text-fill-color: #e91e63 !important;
}

/* 7. Contrôle d'accès - Cyan */
.hero-title .rotating-word.color-7,
.hero-title .rotating-word.color-7 .letter { 
  color: #00bcd4 !important;
  -webkit-text-fill-color: #00bcd4 !important;
}

/* 8. Vidéo-protection - Indigo */
.hero-title .rotating-word.color-8,
.hero-title .rotating-word.color-8 .letter { 
  color: #5c6bc0 !important;
  -webkit-text-fill-color: #5c6bc0 !important;
}

/* 9. Alarme - Rouge orange */
.hero-title .rotating-word.color-9,
.hero-title .rotating-word.color-9 .letter { 
  color: #ff5722 !important;
  -webkit-text-fill-color: #ff5722 !important;
}

/* 10. Infogérance - Teal */
.hero-title .rotating-word.color-10,
.hero-title .rotating-word.color-10 .letter { 
  color: #009688 !important;
  -webkit-text-fill-color: #009688 !important;
}

/* 11. Réseaux - Bleu clair */
.hero-title .rotating-word.color-11,
.hero-title .rotating-word.color-11 .letter { 
  color: #03a9f4 !important;
  -webkit-text-fill-color: #03a9f4 !important;
}

/* 12. Serveurs - Gris bleuté */
.hero-title .rotating-word.color-12,
.hero-title .rotating-word.color-12 .letter { 
  color: #607d8b !important;
  -webkit-text-fill-color: #607d8b !important;
}

/* ========================================
   RESPONSIVE - MOBILE (Centrage sans casser l'animation)
   ======================================== */

@media (max-width: 768px) {
  /* Centrer tout le titre */
  .hero-title {
    text-align: center !important;
  }
  
  /* Le wrapper en inline-flex pour centrer */
  .hero-title .rotating-word-wrapper {
    min-width: 280px;
    display: inline-flex;
    justify-content: center;
  }
  
  /* Centrer les mots SANS écraser le display du JS */
  .hero-title .rotating-word {
    left: 50%;
    transform: translateX(-50%);
    text-align: center;
    width: auto;
  }
  
  /* Garder les animations 3D */
  .hero-title .rotating-word .letter {
    display: inline-block;
  }
}

@media (max-width: 480px) {
  /* Sur très petits écrans */
  .hero-title .rotating-word-wrapper {
    min-width: 230px;
  }
}