/* HFC - overrides maison. Charge en dernier, apres tout Elementor. */

/* ---------------------------------------------------------------
 * Le menu off-canvas est parque hors ecran a droite : sans ca il
 * ajoute ~70px de scroll horizontal sur mobile.
 * ------------------------------------------------------------- */
html,
body {
  overflow-x: hidden;
  max-width: 100%;
}

/* ---------------------------------------------------------------
 * Titre anime Elementor, animation "blinds" (lettre par lettre).
 * Les keyframes sont dans widget-animated-headline.min.css ; on ne
 * corrige ici que ce qui manquait pour que le mot actif soit visible.
 * ------------------------------------------------------------- */
/* Elementor faisait varier la largeur du conteneur mot par mot, ce qui
   demandait de mesurer chaque mot au pixel : mesure fausse = mot coupe ou
   decale. On prend l'inverse : conteneur pleine largeur, texte centre.
   Le mot est alors toujours exactement au milieu, quelle que soit sa taille. */
/* Elementor aligne ce bloc avec '.elementor-headline--style-rotate
   .elementor-headline-dynamic-wrapper { text-align: start }', plus
   specifique que nos regles : on reprend le meme selecteur pour passer
   devant, sinon le mot reste colle a gauche. */
.elementor-headline--style-rotate .elementor-headline-dynamic-wrapper,
.elementor-headline .elementor-headline-dynamic-wrapper {
  position: relative;
  display: block;
  width: 100% !important;
  text-align: center;
}

.elementor-headline .elementor-headline-dynamic-text {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  text-align: center;
  white-space: nowrap;
}

/* Elementor met opacity:0 sur TOUS les mots et comptait sur son JS
   pour reveler l'actif : on retablit la regle manquante. */
.elementor-headline-animation-type-blinds
  .elementor-headline-dynamic-text.elementor-headline-text-active {
  position: relative;
  opacity: 1;
}

/* les lettres du mot actif pivotent face a nous (la regle d'origine
   d'Elementor imbrique mal les classes et ne s'applique jamais) */
.elementor-headline-dynamic-text.elementor-headline-text-active
  .elementor-headline-dynamic-letter {
  transform: rotateY(0deg);
}

@media (prefers-reduced-motion: reduce) {
  .elementor-headline-dynamic-letter {
    animation: none !important;
    transform: none !important;
  }
}

/* ---------------------------------------------------------------
 * Mobile first : le titre du hero ne doit jamais deborder
 * ------------------------------------------------------------- */
@media (max-width: 767px) {
  /* Elementor passe le titre en text-align:end (colle a droite) sur mobile.
     On le recentre. */
  .elementor-headline {
    font-size: clamp(2rem, 11vw, 3.5rem) !important;
    line-height: 1.1 !important;
    text-align: center !important;
  }

  /* on garde nowrap : le mot doit rester d'un seul tenant */
  .elementor-headline-dynamic-text {
    white-space: nowrap;
  }

  /* Elementor pose un padding-right de 37px sur ce widget : sur un ecran
     de 375px, ca suffit a decaler visiblement le mot vers la gauche. */
  .elementor-widget-animated-headline > .elementor-widget-container {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
}

/* ---------------------------------------------------------------
 * Cal.com : hauteur correcte, pas de double scrollbar
 * ------------------------------------------------------------- */
#my-cal-inline-30min {
  min-height: 620px;
  overflow: visible !important;
}

@media (max-width: 767px) {
  #my-cal-inline-30min {
    min-height: 540px;
  }
}

/* ---------------------------------------------------------------
 * Le bouton d'envoi ne doit pas sauter pendant l'envoi
 * ------------------------------------------------------------- */
.elementor-form button[type="submit"] {
  min-width: 190px;
  justify-content: center;
  transition: opacity 0.2s ease;
}

.elementor-form button[type="submit"][disabled] {
  opacity: 0.6;
  cursor: progress;
}

/* Message de reponse du formulaire. En casse normale : le bouton du theme
   est en majuscules, illisible pour une phrase. */
.hfc-form-note {
  margin: 0.9rem 0 0;
  min-height: 1.4em;
  font-size: 0.95rem;
  line-height: 1.5;
  text-transform: none !important;
  letter-spacing: normal;
}

/* Pas de vert ni de rouge : le texte dit deja ce qui s'est passe, la
   couleur ne porte aucune information. On reste en noir et blanc. */
.hfc-form-note.is-ok {
  color: inherit;
  font-weight: 600;
}

.hfc-form-note.is-error {
  color: inherit;
  opacity: 0.75;
  border-left: 2px solid currentColor;
  padding-left: 0.7rem;
}

/* ---------------------------------------------------------------
 * MENU MOBILE + RECHERCHE
 *
 * Le theme colorait ces controles avec sa couleur de palette
 * (--inspiro-primary-color: #0bb4aa, un vert d'eau). Sur une marque
 * de luxe en noir et blanc, c'est hors charte : on force le blanc.
 * ------------------------------------------------------------- */

/* plus de flash colore au tap sur mobile */
.elementor-menu-toggle,
.elementor-search-form__toggle,
.elementor-nav-menu--dropdown a,
.navbar-toggle,
.site-header a {
  -webkit-tap-highlight-color: transparent;
}

/* le burger : blanc au repos comme a l'ouverture, jamais de fond colore */
.elementor-menu-toggle,
.elementor-menu-toggle:hover,
.elementor-menu-toggle:focus,
.elementor-menu-toggle:active,
.elementor-menu-toggle.elementor-active {
  color: #fff !important;
  background-color: transparent !important;
  border: 0;
  outline: none;
}

.elementor-menu-toggle i,
.elementor-menu-toggle svg,
.elementor-menu-toggle.elementor-active i,
.elementor-menu-toggle.elementor-active svg {
  color: #fff !important;
  fill: #fff !important;
}

/* accessibilite : on garde un repere visible au clavier, mais sobre */
.elementor-menu-toggle:focus-visible,
.elementor-search-form__toggle:focus-visible {
  outline: 1px solid rgba(255, 255, 255, 0.7);
  outline-offset: 4px;
}

/* le tiroir d'origine d'Elementor ne sert plus : hfc.js en construit un
   propre (.hfc-menu). On neutralise l'ancien pour eviter tout doublon. */
.elementor-nav-menu--dropdown.elementor-nav-menu__container {
  display: none !important;
}

/* ---------------------------------------------------------------
 * Panneau de menu plein ecran (mobile)
 * ------------------------------------------------------------- */
.hfc-menu {
  position: fixed;
  inset: 0;
  z-index: 9998;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #000;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.32s ease, visibility 0.32s;
}

.hfc-menu.is-open {
  opacity: 1;
  visibility: visible;
}

.hfc-menu ul {
  list-style: none;
  margin: 0;
  padding: 0 2rem;
  width: 100%;
  max-width: 30rem;
  text-align: center;
}

.hfc-menu li + li {
  margin-top: 0.35rem;
}

.hfc-menu a {
  display: block;
  padding: 1.05rem 0;
  color: #fff;
  font-size: 1.05rem;
  font-weight: 400;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  text-decoration: none;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  opacity: 0;
  transform: translateY(0.6rem);
  transition: opacity 0.4s ease, transform 0.4s ease, color 0.2s ease;
}

.hfc-menu.is-open a {
  opacity: 1;
  transform: none;
}

/* les entrees arrivent en cascade, comme les lettres du titre */
.hfc-menu.is-open li:nth-child(1) a { transition-delay: 0.06s; }
.hfc-menu.is-open li:nth-child(2) a { transition-delay: 0.12s; }
.hfc-menu.is-open li:nth-child(3) a { transition-delay: 0.18s; }
.hfc-menu.is-open li:nth-child(4) a { transition-delay: 0.24s; }
.hfc-menu.is-open li:nth-child(5) a { transition-delay: 0.30s; }
.hfc-menu.is-open li:nth-child(6) a { transition-delay: 0.36s; }

.hfc-menu a:hover,
.hfc-menu a:focus,
.hfc-menu a.is-current {
  color: #fff;
  opacity: 0.6;
}

.hfc-menu a:focus-visible {
  outline: 1px solid rgba(255, 255, 255, 0.7);
  outline-offset: 4px;
}

/* le bouton reste au-dessus du panneau pour pouvoir refermer */
.elementor-menu-toggle {
  position: relative;
  z-index: 9999;
}

@media (prefers-reduced-motion: reduce) {
  .hfc-menu,
  .hfc-menu a {
    transition: none;
  }
}

/* au-dela de la tablette, c'est le menu horizontal qui sert */
@media (min-width: 1025px) {
  .hfc-menu {
    display: none;
  }
}

/* la loupe */
.elementor-search-form__toggle,
.elementor-search-form__toggle:hover,
.elementor-search-form__toggle:focus {
  color: #fff !important;
  --e-search-form-toggle-color: #fff;
  --e-search-form-toggle-background-color: transparent;
}

/* resultats de recherche (rendus par hfc.js) */
.hfc-search-results {
  position: absolute;
  left: 50%;
  top: 58%;
  transform: translateX(-50%);
  width: min(90vw, 640px);
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}

.hfc-search-hit,
.hfc-search-none {
  display: block;
  color: #fff;
  font-size: 1rem;
  letter-spacing: 0.12em;
  text-align: center;
  text-transform: uppercase;
  padding: 0.9rem 0.2rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.15);
  text-decoration: none;
}

.hfc-search-hit:hover,
.hfc-search-hit:focus {
  color: #fff;
  opacity: 0.65;
}

.hfc-search-none {
  border-bottom: 0;
  opacity: 0.6;
  text-transform: none;
  letter-spacing: normal;
}

/* ---------------------------------------------------------------
 * Cible d'ancre : on decale sous le header fixe
 * ------------------------------------------------------------- */
#communications,
#events,
#premium-hospitality,
#invest-off-market,
#contact {
  scroll-margin-top: 120px;
}