/* =========================================================================
   RGD Renova — sous-menus de la navigation

   Les menus déroulants d'Elementor apparaissent d'un bloc, sans relief :
   un rectangle blanc à angles vifs qui surgit sans transition.

   On en fait une carte posée sur la page — coins arrondis, ombre douce,
   petite flèche vers l'entrée parente — qui se déplie en glissant. Chaque
   ligne s'éclaire au survol d'une pastille crème et d'un chevron.

   Tout est cantonné au bureau : sur mobile, Elementor replie le menu en
   accordéon vertical, et l'animation d'ouverture n'y a pas de sens.
   ========================================================================= */

@media (min-width: 1025px) {

  /* L'entrée parente ancre la carte et lui laisse de la place pour respirer */
  .elementor-nav-menu--main .menu-item-has-children {
    position: relative;
  }

  /* ---- La carte ---------------------------------------------------------
     Elementor bascule le sous-menu en display:none, ce qui interdit toute
     transition. On le garde affiché mais escamoté, et l'on anime l'opacité
     et la position — seul moyen d'obtenir un dépliage progressif. */
  .elementor-nav-menu--main .sub-menu.elementor-nav-menu--dropdown {
    display: block !important;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(10px);

    /* La carte se règle sur sa ligne la plus longue : à largeur fixe,
       « Isolation – Plâtrerie – Peinture » débordait du cadre. */
    min-width: 248px;
    width: max-content;
    max-width: min(420px, calc(100vw - 40px));
    /* Collée sous l'entrée : une marge laissait voir une bande sombre du
       bandeau entre la pastille et la carte. */
    margin-top: 0;
    padding: 10px;
    /* Le kit Elementor impose border: 0 et border-radius: 0 aux sous-menus,
       avec une priorité qu'aucun sélecteur raisonnable ne dépasse. */
    border: 1px solid rgba(253, 122, 45, .14) !important;
    border-radius: 16px !important;
    background: #FFFFFF;
    box-shadow:
      0 2px 6px rgba(20, 18, 16, .05),
      0 18px 40px -12px rgba(20, 18, 16, .28);
    transition: opacity .22s ease, transform .22s cubic-bezier(.22, 1, .36, 1),
                visibility 0s linear .22s;
  }

  .elementor-nav-menu--main .menu-item-has-children:hover > .sub-menu,
  .elementor-nav-menu--main .menu-item-has-children:focus-within > .sub-menu {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0);
    transition-delay: 0s;
  }

  /* Un pont invisible sous l'entrée parente : la carte est collée, mais un
     demi-pixel d'arrondi suffirait à faire décrocher le curseur.
     Il occupe ::before, car ::after porte le soulignement d'Elementor. */
  .elementor-nav-menu--main .menu-item-has-children > a::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    height: 6px;
    background: none;
    width: auto;
  }

  /* ---- Les entrées principales ------------------------------------------
     Le soulignement noir animé d'Elementor est remplacé par la même pastille
     que dans les sous-menus : un seul langage visuel pour toute la
     navigation. Les entrées portent déjà 13px/20px de marge interne, la
     pastille s'y loge sans décaler quoi que ce soit. */
  .elementor-nav-menu--main a.elementor-item::after {
    display: none !important;
  }

  .elementor-nav-menu--main a.elementor-item {
    border-radius: 10px !important;
    transition: background-color .18s ease, color .18s ease;
  }

  .elementor-nav-menu--main a.elementor-item:hover,
  .elementor-nav-menu--main a.elementor-item:focus-visible {
    background-color: #FFF4EA !important;
    color: #C9551A !important;
  }

  /* La flèche du menu déroulant suit la couleur du texte */
  .elementor-nav-menu--main a.elementor-item:hover .sub-arrow svg {
    fill: #C9551A;
  }

  /* La page où l'on se trouve : l'orange suffit, une seconde pastille
     entrerait en concurrence avec celle du survol. */
  .elementor-nav-menu--main a.elementor-item.elementor-item-active {
    color: #FD7A2D !important;
    background-color: transparent !important;
  }
  .elementor-nav-menu--main a.elementor-item.elementor-item-active:hover {
    background-color: #FFF4EA !important;
    color: #C9551A !important;
  }

  /* ---- Les lignes --------------------------------------------------------
     Elementor pose ses propres règles de survol sur ces liens, en !important.
     Les classes doublées ci-dessous relèvent la spécificité juste assez pour
     reprendre la main, sans recourir à un sélecteur illisible. */
  .elementor-nav-menu--main .sub-menu > li {
    margin: 0;
  }

  .elementor-nav-menu--main .sub-menu a.elementor-sub-item {
    position: relative;
    display: flex;
    align-items: center;
    padding: 11px 14px 11px 16px !important;
    border-radius: 10px !important;
    /* Taille et couleur viennent aussi du kit : l'orange partout affadit la
       lecture, on le garde pour le survol et l'on pose un anthracite au repos. */
    font-size: 15px !important;
    font-weight: 600;
    line-height: 1.35;
    white-space: nowrap;
    color: #2A2724 !important;
    background: transparent;
    transition: background .18s ease, color .18s ease, padding-left .18s ease;
  }

  /* Le trait orange se déploie depuis la gauche */
  .elementor-nav-menu--main .sub-menu a.elementor-sub-item::before {
    content: "";
    position: absolute;
    left: 8px;
    top: 50%;
    width: 3px;
    height: 0;
    border-radius: 3px;
    background: #FD7A2D;
    transform: translateY(-50%);
    transition: height .2s ease;
  }

  /* Le chevron arrive en glissant, aligné à droite */
  .elementor-nav-menu--main .sub-menu a.elementor-sub-item::after {
    content: "›";
    margin-left: auto;
    padding-left: 12px;
    font-size: 19px;
    line-height: 1;
    color: #FD7A2D;
    opacity: 0;
    transform: translateX(-6px);
    transition: opacity .18s ease, transform .18s ease;
  }

  .elementor-nav-menu--main .sub-menu.sub-menu a.elementor-sub-item.elementor-sub-item:hover,
  .elementor-nav-menu--main .sub-menu.sub-menu a.elementor-sub-item.elementor-sub-item:focus-visible,
  .elementor-nav-menu--main .sub-menu.sub-menu .current-menu-item > a.elementor-sub-item.elementor-sub-item {
    background: #FFF4EA !important;
    color: #C9551A !important;
    padding-left: 22px !important;
  }

  .elementor-nav-menu--main .sub-menu.sub-menu a.elementor-sub-item.elementor-sub-item:hover::before,
  .elementor-nav-menu--main .sub-menu.sub-menu a.elementor-sub-item.elementor-sub-item:focus-visible::before,
  .elementor-nav-menu--main .sub-menu.sub-menu .current-menu-item > a.elementor-sub-item.elementor-sub-item::before {
    height: 18px;
  }

  .elementor-nav-menu--main .sub-menu.sub-menu a.elementor-sub-item.elementor-sub-item:hover::after,
  .elementor-nav-menu--main .sub-menu.sub-menu a.elementor-sub-item.elementor-sub-item:focus-visible::after {
    opacity: 1;
    transform: translateX(0);
  }

  /* La petite flèche de l'entrée parente pivote quand la carte s'ouvre */
  .elementor-nav-menu--main .menu-item-has-children > a .sub-arrow svg {
    transition: transform .22s ease;
  }
  .elementor-nav-menu--main .menu-item-has-children:hover > a .sub-arrow svg {
    transform: rotate(180deg);
  }

  @media (prefers-reduced-motion: reduce) {
    .elementor-nav-menu--main .sub-menu.elementor-nav-menu--dropdown,
    .elementor-nav-menu--main .sub-menu a.elementor-sub-item,
    .elementor-nav-menu--main .sub-menu a.elementor-sub-item::before,
    .elementor-nav-menu--main .sub-menu a.elementor-sub-item::after,
    .elementor-nav-menu--main .menu-item-has-children > a .sub-arrow svg {
      transition: none !important;
    }
    .elementor-nav-menu--main .sub-menu.elementor-nav-menu--dropdown {
      transform: none;
    }
  }
}