/* ------------------------------------------------------------------
   MADEGEECO — raccord du menu Xpro sur la charte de la maquette.
   Chargee APRES fidelite.css. Trois sujets, et rien d'autre :
     1. habiller la liste Xpro comme .main-nav de la maquette ;
     2. deplacer le seuil de bascule de 1024 (ecrit en dur dans la feuille
        de Xpro, aucun reglage ne le change) vers 1120, celui de la maquette ;
     3. rendre le hamburger et le panneau hors-ecran lisibles sur la charte.
   ------------------------------------------------------------------ */

/* -- 1. la liste horizontale ---------------------------------------- */

/* Le conteneur du widget n'est pas une simple liste : viser .xpro-menu ou
   un <ul> enfant direct laisse le menu a 16 px sans gouttiere, et fait
   passer la derniere entree a la ligne dans un bandeau de 76 px. */
body .elementor.elementor .main-nav .xpro-elementor-horizontal-navbar-nav {
  display: flex;
  justify-content: center;
  gap: clamp(12px, 1.25vw, 24px);
  margin: 0;
  padding: 0;
  list-style: none;
}

body .elementor.elementor .main-nav .xpro-elementor-horizontal-navbar-nav > li > a {
  position: relative;
  display: block;
  padding: 11px 0;
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 500;
  color: var(--ink);
  white-space: nowrap;
  background: none;
  border: 0;
  min-height: 0;
}

body .elementor.elementor .main-nav .xpro-elementor-horizontal-navbar-nav > li > a::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 4px;
  left: 0;
  height: 1px;
  background: var(--turquoise-deep);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 220ms var(--ease-ui);
}

body .elementor.elementor .main-nav .xpro-elementor-horizontal-navbar-nav > li > a:hover::after,
body .elementor.elementor .main-nav .xpro-elementor-horizontal-navbar-nav > li.current-menu-item > a::after,
body .elementor.elementor .main-nav .xpro-elementor-horizontal-navbar-nav > li.current-menu-ancestor > a::after {
  transform: scaleX(1);
  transform-origin: left;
}

body .elementor.elementor .main-nav .xpro-elementor-horizontal-navbar-nav > li.current-menu-item > a,
body .elementor.elementor .main-nav .xpro-elementor-horizontal-navbar-nav > li.current-menu-ancestor > a {
  color: var(--turquoise-deep);
}

/* Sous-menu des villas, sur la meme charte que les cartes. */
body .elementor.elementor .main-nav .xpro-elementor-dropdown-menu {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 8px;
  box-shadow: var(--shadow-soft);
}
body .elementor.elementor .main-nav .xpro-elementor-dropdown-menu > li > a {
  font-family: var(--sans);
  font-size: 12px;
  color: var(--ink);
  padding: 10px 14px;
  border-radius: 9px;
  border: 0;
  background: transparent;
}
body .elementor.elementor .main-nav .xpro-elementor-dropdown-menu > li > a:hover {
  background: var(--paper);
  color: var(--turquoise-deep);
}

/* -- 2. le bouton hamburger ----------------------------------------- */

/* Xpro le rend en gris anthracite : sur un bandeau clair il passe, sur un
   fond sombre il est present, bien place, cliquable — et invisible.
   On l'aligne sur le bouton rond de la maquette, quel que soit le fond. */
body .elementor.elementor .main-nav .xpro-elementor-horizontal-menu-toggler {
  display: inline-grid;
  width: 46px;
  height: 46px;
  place-items: center;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: transparent;
  color: var(--ink);
  cursor: pointer;
}
body .elementor.elementor .main-nav .xpro-elementor-horizontal-menu-toggler svg,
body .elementor.elementor .main-nav .xpro-elementor-horizontal-menu-toggler i {
  color: inherit;
  font-size: 20px;
}
body .elementor.elementor .main-nav .xpro-elementor-horizontal-menu-toggler:hover {
  background: var(--stone);
}

/* Le panneau hors-ecran herite sinon du fond clair du theme et fait
   basculer toute la charte a l'ouverture. */
body .elementor.elementor .main-nav .xpro-elementor-horizontal-navbar-wrapper {
  background-color: var(--white);
}
body .elementor.elementor .main-nav .xpro-elementor-horizontal-menu-close {
  color: var(--ink);
}

/* -- 3. debordement horizontal du panneau hors-ecran ---------------- */

/* Sous le seuil de bascule, Xpro laisse son panneau dans la page et le
   repousse par translate3d(100%). Une transformation ne retire pas
   l'element de la zone de defilement : toutes les pages debordaient
   lateralement de 288 a 384 px sur telephone, avec un defilement
   horizontal parasite que rien ne laissait deviner.
   "clip" plutot que "hidden" : il coupe sans creer de conteneur de
   defilement, et les blocs colles (fiche de reservation, colonne des
   engagements) continuent de tenir.
   La regle vit sur <html>, pas sur <body> : le panneau etant en position
   fixe, son bloc conteneur est la zone d'affichage, et seul le debordement
   de l'element racine s'y propage. Pose sur <body>, elle ne coupait rien. */
html {
  overflow-x: clip;
}

/* -- 4. la bande 1025-1120 ------------------------------------------ */

/* Sous 1120 la maquette masque .main-nav et .nav-actions et sort son propre
   bouton. Ici, .main-nav doit rester visible : c'est elle qui porte le
   hamburger de Xpro. */
@media (max-width: 1120px) {
  body .elementor.elementor .main-nav {
    display: flex !important;
    justify-content: flex-end;
  }
  body .elementor.elementor .nav-actions {
    display: none !important;
  }
  body .elementor.elementor .nav-shell {
    grid-template-columns: auto minmax(0, 1fr);
  }
}

/* Le seuil de Xpro est ecrit en dur a 1024 px et aucun reglage ne le
   deplace. Entre 1025 et 1120 on obtiendrait la liste horizontale complete
   sans les boutons d'appel que la maquette masque deja : on recopie ici les
   regles hors-ecran de sa propre feuille sur la bande manquante. */
@media screen and (min-width: 1025px) and (max-width: 1120px) {
  body .elementor.elementor .xpro-elementor-horizontal-menu-responsive-tablet {
    position: fixed;
    height: 100vh;
    width: 400px;
    max-width: 100%;
    right: 0;
    top: 0;
    text-align: right;
    background-color: var(--white);
    padding: 30px;
    overflow: auto;
    z-index: 999;
    transform: translate3d(100%, 0, 0);
    transition: transform 0.5s;
  }
  body.admin-bar .elementor.elementor .xpro-elementor-horizontal-menu-responsive-tablet {
    top: 32px;
  }
  body .elementor.elementor .xpro-elementor-horizontal-menu-responsive-tablet.active {
    transform: translate3d(0, 0, 0);
  }
  body .elementor.elementor .xpro-elementor-horizontal-menu-responsive-tablet ~ .xpro-elementor-horizontal-menu-overlay,
  body .elementor.elementor .xpro-elementor-horizontal-menu-responsive-tablet ~ .xpro-elementor-horizontal-menu-toggler-wrapper {
    display: block;
  }
  body .elementor.elementor .xpro-elementor-horizontal-menu-responsive-tablet .xpro-elementor-horizontal-menu-close {
    display: inline-flex;
  }
  body .elementor.elementor .xpro-elementor-horizontal-menu-responsive-tablet .xpro-elementor-horizontal-navbar-nav {
    flex-direction: column;
    align-items: flex-start;
    padding-top: 20px;
  }
  body .elementor.elementor .xpro-elementor-horizontal-menu-responsive-tablet .xpro-elementor-horizontal-navbar-nav > li {
    position: relative;
    width: 100%;
  }
  body .elementor.elementor .xpro-elementor-horizontal-menu-responsive-tablet .xpro-elementor-horizontal-navbar-nav > li > a {
    margin: 0;
    width: 100%;
    min-height: 30px;
    padding: 20px 0;
    justify-content: flex-start;
    border-bottom: 1px solid var(--line);
  }
  body .elementor.elementor .xpro-elementor-horizontal-menu-responsive-tablet .xpro-elementor-dropdown-menu {
    position: relative;
    left: 0;
    width: 100%;
    min-width: 100%;
    max-width: 100%;
    opacity: 1;
    visibility: visible;
    transform: none;
    display: none;
    box-shadow: none !important;
    border: 0;
    background: transparent;
  }
}

/* Le panneau hors-ecran ne doit jamais recevoir pointer-events: none :
   au-dessus du seuil, c'est lui qui porte la barre horizontale, et le
   neutraliser rendrait toute la navigation incliquable sans que rien
   ne le laisse voir. */

/* Entrees du panneau, sur la typographie de la maquette. */
@media (max-width: 1120px) {
  body .elementor.elementor .xpro-elementor-horizontal-menu-responsive-tablet .xpro-elementor-horizontal-navbar-nav > li > a {
    font-family: var(--serif);
    font-size: 26px;
    font-weight: 500;
    color: var(--ink);
  }
}

/* ---- Le sous-menu « Villas » doit être atteignable ---------------- */

/* Xpro pose son sous-menu 36 px sous l'entrée de menu : une marge de
   16 px, plus le décalage de son animation. Entre les deux, du vide.
   La souris quitte le <li>, :hover retombe, le menu se ferme avant
   qu'on ait pu descendre dessus — on voit les villas passer sans
   jamais pouvoir en choisir une.

   On étend la zone sensible du <li> vers le bas par une passerelle
   invisible. Elle est en position absolue : la mise en page ne bouge
   pas, le menu reste où il est, seule la zone survolée s'allonge.
   Elle n'existe que pendant le survol : hors de là, elle n'attrape
   aucun clic destiné à ce qui se trouve dessous. */
.xpro-elementor-horizontal-navbar-nav > li.dropdown:hover::after {
  content: "";
  position: absolute;
  z-index: 98;
  top: 100%;
  left: 0;
  right: 0;
  height: 40px;
}

/* La petite flèche que Xpro pointe vers l'entrée de menu est un petit
   losange qui hérite d'un fond sombre : sur un menu crème, il apparaît
   comme une tache noire. Il reprend la couleur du menu. */
.xpro-elementor-horizontal-navbar-nav > li > .xpro-elementor-dropdown-menu::after {
  background-color: #fbfbf8;
}

/* ---- Le menu ne passe jamais a la ligne (RETOUR A LA LIGNE) ------- */

/* Huit entrees de premier niveau, plus le logo, la loupe, le selecteur
   de langue, « Espace proprietaire » et le bouton Reserver : sous
   environ 1300 px de fenetre, la colonne du menu tombe en dessous des
   700 px dont la liste a besoin, et « Contact » repasse SOUS la barre.

   Le defaut visible n'est pas la : il est que cette seconde ligne se
   pose exactement en travers du chemin qui mene au sous-menu des
   villas. La souris quitte « Villas », survole « Contact », :hover
   retombe, et le sous-menu se ferme avant qu'on ait pu descendre
   dessus. On voyait les cinq villas passer sans jamais pouvoir en
   choisir une — le meme symptome que la passerelle avait deja corrige
   une fois, pour une autre cause.

   Deux regles, dans cet ordre.

   1. La liste ne se replie plus. Un menu trop large qui deborde se
      voit et se corrige ; un menu qui passe a la ligne casse le survol
      sans que rien ne le laisse deviner. */
body .elementor.elementor .main-nav .xpro-elementor-horizontal-navbar-nav {
  flex-wrap: nowrap;
}

/*  2. On rend au menu la place qui lui manque plutot que de retrecir sa
      typographie. « Espace proprietaire » quitte la barre sous 1400 px :
      il libere 131 px — davantage que les 65 qui manquaient — et il
      reste atteignable depuis le pied de page et depuis la page
      Proprietaire. C'est le seul element de la barre qui ne s'adresse
      pas au visiteur venu reserver. */
@media (max-width: 1400px) {
  body .elementor.elementor .nav-actions .owner-link {
    display: none;
  }
}
/*  3. Juste au-dessus du seuil du hamburger — 1120 px — le menu tenait
      sur une ligne mais touchait le logo et la loupe a 3 px pres. La
      gouttiere se resserre sur cette bande (GOUTTIERE SERREE) : elle
      rend une vingtaine de pixels sans toucher a la typographie, qui
      est ce qui se voit. */
@media (max-width: 1250px) {
  body .elementor.elementor .main-nav .xpro-elementor-horizontal-navbar-nav {
    gap: clamp(9px, 0.85vw, 16px);
  }
}
/* ---- Un sous-menu long tient dans l'ecran (SOUS-MENU LONG) -------- */

/* Les douze journees en colonne font 487 px. Sur un portable dont la
   zone utile mesure 601 px, le bas du sous-menu tombe a 638 : les trois
   dernieres sorties sont sous la ligne de flottaison. Faire defiler
   pour les atteindre ferme le menu — c'est le meme symptome que le
   sous-menu des villas, par une autre cause.

   Deux colonnes plutot qu'un defilement interne : un menu qui se ferme
   des qu'on le quitte ne doit rien demander d'autre qu'un mouvement
   vers lui. Six lignes au lieu de douze, et tout tient.

   Le seuil est le nombre d'entrees, pas le nom du menu : la regle vaut
   pour tout sous-menu de neuf entrees ou plus, celui des activites
   aujourd'hui, un autre demain. Elle ne vaut qu'au-dessus du seuil du
   hamburger : dans le panneau hors-ecran, le sous-menu est une pile,
   pas une boite flottante. */
@media (min-width: 1121px) {
  body .elementor.elementor .main-nav .xpro-elementor-dropdown-menu:has( > li:nth-child(9) ) {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 4px;
    width: max-content;
    max-width: min(460px, calc(100vw - 48px));
  }
}
/* ---- L'entree "Croisieres" (mgc-420, 25/09/2026) -----------------------
   Elle n'apparait qu'avec un bateau en ligne, et ajoute une neuvieme
   entree a un menu qui ne passe jamais a la ligne. Mesure faite dans les
   sept langues entre 1121 et 1600 px : sans compensation, elle debordait
   sur le logo et la loupe (jusqu'a 60 px de plus en allemand et en grec).
   Tout est conditionne a sa presence (:has), pour que le menu d'aujourd'hui
   ne bouge pas d'un pixel tant qu'aucune croisiere n'est publiee. */
@media (min-width: 1121px) {
  body .elementor.elementor .main-nav .xpro-elementor-horizontal-navbar-nav:has(> li.mgc-menu-croisieres) {
    gap: clamp(5px, 1.6vw - 12px, 20px);
  }
}

@media (min-width: 1121px) and (max-width: 1320px) {
  body .elementor.elementor .main-nav .xpro-elementor-horizontal-navbar-nav:has(> li.mgc-menu-croisieres) > li > a {
    font-size: 10.5px;
  }
}

/* Les plus etroits des ecrans de bureau : la fleche des sous-menus se
   rapproche de son libelle, et la grille de l'en-tete resserre ses
   gouttieres. */
@media (min-width: 1121px) and (max-width: 1240px) {
  body .elementor.elementor .main-nav .xpro-elementor-horizontal-navbar-nav:has(> li.mgc-menu-croisieres) .xpro-dropdown-menu-toggle {
    margin-left: 5px;
  }
  body:has(li.mgc-menu-croisieres) .elementor.elementor .nav-shell {
    column-gap: 12px;
  }
}

/* Au-dela de 1400 px, le lien "Espace proprietaire" revient dans l'en-tete
   et reprend la place gagnee : avec les croisieres, il attend 1560 px. Il
   reste accessible par l'entree "Proprietaire" du menu et le pied de page. */
@media (min-width: 1401px) and (max-width: 1560px) {
  body:has(li.mgc-menu-croisieres) .elementor.elementor .nav-actions .owner-link {
    display: none;
  }
}