/* ============================================================
   RMI — Mobile Menu Overrides
   ============================================================ */

/* 1. Full height
   --rmi-menu-top est défini dynamiquement par menu-mobile.js
   à partir du top: inline style d'Elementor
   ============================================================ */
/* Font — TikTok Sans pour tous les éléments du dropdown */
.elementor-nav-menu--dropdown.elementor-nav-menu__container,
.elementor-nav-menu--dropdown.elementor-nav-menu__container * {
    font-family: 'TikTok Sans', sans-serif !important;
}

.elementor-nav-menu--dropdown.sub-menu {
    margin-left: 1rem !important;
}

/* Base : flex column pour le footer sticky */
.elementor-nav-menu--dropdown.elementor-nav-menu__container {
    max-height: none !important;
    display: flex !important;
    flex-direction: column !important;
    box-sizing: border-box;
}

/* Menu ouvert : position:fixed, hauteur = reste du viewport, nav scrollable */
body.rmi-menu-open .elementor-nav-menu--dropdown.elementor-nav-menu__container {
    position: fixed !important;
    top: var(--rmi-menu-top, 50px) !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    height: calc(100vh - var(--rmi-menu-top, 33px)) !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
    z-index: 9999;
}

/* Empêcher le ul d'avoir son propre scroll — CSS + renforcé en JS inline */
.elementor-nav-menu--dropdown .sm-vertical {
    overflow: visible !important;
    max-height: none !important;
    height: auto !important;
}

.elementor-nav-menu--dropdown>ul>li>a:first-child {
    color: #9E6D19
}

/* 2. Scroll lock quand le menu mobile est ouvert
   ============================================================ */
html.rmi-menu-open,
body.rmi-menu-open {
    overflow: hidden;
}

/* Liens des items du sub-menu (hors section labels) */
.elementor-nav-menu--dropdown .sub-menu li:not(.rmi-section-label)>a {
    color: #000 !important;
}

/* Labels de section à l'intérieur du submenu fusionné */
.sm-vertical li.rmi-section-label {

    margin-top: 22px;
    padding: 12px 28px 4px;
    font-size: 16px;
    font-weight: 700;
    color: #9E6D19;
    pointer-events: none;
    user-select: none;
    list-style: none;
    background: transparent;
}

/* Sub-arrow : remplace le caret FontAwesome par un chevron SVG */
.elementor-nav-menu--dropdown .sub-arrow {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    background: none !important;
    border: none !important;
}

.elementor-nav-menu--dropdown .sub-arrow i {
    display: none !important;
}

.elementor-nav-menu--dropdown .sub-arrow::after {
    content: '';
    display: block;
    width: 12px;
    height: 7px;
    background-image: url("data:image/svg+xml,%3Csvg width='12' height='7' viewBox='0 0 12 7' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 0.7L5.66 6.36L11.32 0.7L10.61 0L5.66 4.95L0.71 0L0 0.7Z' fill='%239E6D19'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    transform-origin: center center;
    transition: transform 0.2s ease;
}

/* Rotation sur ::after directement pour éviter le décalage latéral */
.elementor-nav-menu--dropdown li.highlighted>a .sub-arrow::after,
.elementor-nav-menu--dropdown a[aria-expanded="true"] .sub-arrow::after {
    transform: rotate(180deg);
}

.elementor-7904 .elementor-element.elementor-element-1881b2c .elementor-nav-menu--dropdown a:hover {
    font-weight: normal;
    color: #9E6D19 !important;
}

.elementor-7904 .elementor-element.elementor-element-1881b2c .elementor-nav-menu--dropdown a.highlighted,
.elementor-7904 .elementor-element.elementor-element-1881b2c .elementor-menu-toggle:hover {
    color: #9E6D19 !important;
    font-weight: bold;
}


/* Premier label : pas de padding-top en trop */
.sm-vertical li.rmi-section-label:first-child {
    padding-top: 4px;
}

/* 3. Footer
   ============================================================ */
.rmi-menu-footer {
    bottom: 0;
    flex-shrink: 0;
    padding: 16px 20px 28px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    background: #fff;
    margin-top: 2rem;
}

/* Language switcher */
.rmi-lang-switcher {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    text-decoration: none;
    color: #9E6D19;
    width: fit-content;
}

.rmi-lang-switcher svg {
    flex-shrink: 0;
}

.rmi-lang-code {
    font-size: 14px;
    font-weight: 600;
    line-height: 1;
    color: #9E6D19;

}

/* Boutons génériques */
.rmi-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 11px 20px;
    border-radius: 10px;
    font-size: 14px;
    text-decoration: none;
    text-align: center;
    cursor: pointer;
    transition: opacity 0.15s ease;
    font-size: 16px;
}

.rmi-btn:hover {
    opacity: 0.82;
    text-decoration: none;
}

/* Contact */
.rmi-btn--contact {
    background-color: transparent;
    color: #9E6D19 !important;
    border: 2px solid #9E6D19;
}

/* Login */
.rmi-btn--login {
    color: #ffffff !important;
    background-color: #9E6D19;
    border: 1.5px solid #9E6D19;
}

/* "Join us" : titre au-dessus des réseaux sociaux */
.rmi-join-label {
    margin: 4px 0 0;
    font-size: 16px;
    font-weight: 600;
    color: #9E6D19;
    margin-top: 3rem;
}

/* Ligne réseaux sociaux */
.rmi-social-row {
    display: flex;
    align-items: center;
    gap: 14px;
}

/* Icônes réseaux sociaux — sans cercle */
.rmi-social {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    padding: 0 !important;
    height: auto !important;
    text-decoration: none;
    opacity: 0.85;
    transition: opacity 0.15s ease;
    line-height: 0;
}

.rmi-social svg {
    display: block;
    width: 18px;
    height: 18px;
    flex-shrink: 0;
}

.rmi-social:hover {
    opacity: 1;
}


.elementor-nav-menu__align-end .elementor-nav-menu {
    margin-inline-start: inherit !important;
}