/* ==========================================================================
   Animations portées depuis Framer Motion (motion/react) de la maquette.
   Valeurs reprises à l'identique :
     - opacity 0 -> 1, translation y 30px -> 0
     - durée 0.8s, courbe cubic-bezier(0.22, 1, 0.36, 1)
     - déclenchement à -100px de la zone visible, une seule fois
   ========================================================================== */

:root {
  --hmlc-ease: cubic-bezier(0.22, 1, 0.36, 1);
}

/* État initial : uniquement si JS est actif, pour ne jamais masquer
   le contenu chez un visiteur sans JavaScript ni pour les moteurs. */
.js [data-reveal] {
  opacity: 0;
  will-change: opacity, transform;
  transition-property: opacity, transform;
  transition-duration: 0.8s;
  transition-timing-function: var(--hmlc-ease);
}

.js [data-reveal="up"]    { transform: translateY(30px); }
.js [data-reveal="up-sm"] { transform: translateY(20px); }
.js [data-reveal="left"]  { transform: translateX(-30px); }
.js [data-reveal="fade"]  { transform: none; }

/* Durée 1s pour les apparitions de la bannière (transition={{ duration: 1 }}) */
.js [data-reveal-duration="1"]   { transition-duration: 1s; }
.js [data-reveal-duration="0.6"] { transition-duration: 0.6s; }

.js [data-reveal].is-visible {
  opacity: 1;
  transform: none;
}

/* Transition d'entrée de page : initial opacity 0 / y 20, durée 0.6s */
.js .hmlc-page-enter {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s var(--hmlc-ease), transform 0.6s var(--hmlc-ease);
}
.js .hmlc-page-enter.is-visible {
  opacity: 1;
  transform: none;
}

/* Menu mobile : ressort Framer (stiffness 400, damping 30) approché par une
   courbe équivalente, avec déploiement de la hauteur comme dans la maquette. */
.hmlc-mobile-nav {
  overflow: hidden;
  max-height: 0;
  opacity: 0;
  transition: max-height 0.42s cubic-bezier(0.2, 0.9, 0.25, 1), opacity 0.3s ease;
}
.hmlc-mobile-nav.is-open {
  max-height: 32rem;
  opacity: 1;
}

/* Soulignement doré au survol de la navigation (bg-gold, 2px) */
.hmlc-nav-link::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  background-color: var(--color-gold);
  opacity: 0;
  transition: opacity 0.25s cubic-bezier(0.2, 0.9, 0.25, 1);
}
.hmlc-nav-link:hover::after {
  opacity: 1;
}

/* Respect des préférences système d'accessibilité */
@media (prefers-reduced-motion: reduce) {
  .js [data-reveal],
  .js .hmlc-page-enter {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  .hmlc-mobile-nav { transition: none; }
}

/* Carrousel : barre de défilement masquée, le pilotage se fait aux flèches. */
.hmlc-carousel-track { scrollbar-width: none; -ms-overflow-style: none; }
.hmlc-carousel-track::-webkit-scrollbar { display: none; }
.hmlc-carousel-track:focus-visible { outline: 2px solid var(--color-gold); outline-offset: 4px; }

/* ==========================================================================
   Sous-menus de navigation (Expertise, Service Packages)
   Ouverture au survol ET au focus clavier : le menu reste utilisable
   sans souris.
   ========================================================================== */
.hmlc-submenu {
  /* Position fixe, centree sur la fenetre : un panneau de 1000 px ne peut pas
     etre centre sur un element de menu situe a gauche sans deborder. */
  position: fixed;
  top: 8rem;                       /* hauteur de l'en-tete (h-32) */
  left: 50%;
  width: 800px;
  max-width: calc(100vw - 3rem);   /* jamais hors ecran */
  opacity: 0;
  visibility: hidden;
  transform: translateX(-50%) translateY(10px);
  transition: opacity .28s var(--hmlc-ease), transform .28s var(--hmlc-ease), visibility .28s;
}
@media (min-width: 1280px) {
  .hmlc-submenu { width: 1000px; }
}
.hmlc-nav-item:hover .hmlc-submenu,
.hmlc-nav-item:focus-within .hmlc-submenu {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}
.hmlc-nav-item:hover .hmlc-caret,
.hmlc-nav-item:focus-within .hmlc-caret {
  transform: rotate(180deg);
}

/* ==========================================================================
   Popup « Vision into Success »
   ========================================================================== */
.hmlc-modal[hidden] { display: none; }
.hmlc-modal { opacity: 0; transition: opacity .3s var(--hmlc-ease); }
.hmlc-modal.is-open { opacity: 1; }
.hmlc-modal-panel {
  transform: translateY(14px) scale(.98);
  transition: transform .35s var(--hmlc-ease);
}
.hmlc-modal.is-open .hmlc-modal-panel { transform: none; }
body.hmlc-modal-open { overflow: hidden; }

@media (prefers-reduced-motion: reduce) {
  .hmlc-submenu, .hmlc-modal, .hmlc-modal-panel { transition: none; }
}