/*
 * Renov'2CV - Megamenus
 * -----------------------------------------------------------------------------
 * Couche de presentation ajoutee par le plugin Renov Parcours.
 *
 * Regle de conduite : cette feuille ne fait que MISE EN FORME. Elle ne masque
 * aucun lien, ne reordonne aucune categorie et ne touche pas a l'arborescence
 * construite dans Elementor. Tout ce qui est affiche aujourd'hui reste affiche.
 *
 * Portee : uniquement l'interieur des menus (.nav-style-megamenu cote bureau,
 * .mobile-mega-menu cote mobile). Aucun selecteur global.
 *
 * Sommaire
 *   1. Variables
 *   2. Panneau (carte, largeur, hauteur maximale, ombre)
 *   3. Animation d'ouverture / fermeture
 *   4. Colonnes
 *   5. Titres de categorie
 *   6. Listes de liens et niveaux
 *   7. Etats : survol, focus clavier, element courant
 *   8. Barre de navigation (element actif, chevron)
 *   9. Mobile et tablette
 *  10. Preferences d'accessibilite
 */

/* -------------------------------------------------------------------------
 * 1. Variables
 * ---------------------------------------------------------------------- */

:root {
    --rn-mega-accent: var(--main-color, #fd604f);
    --rn-mega-ink: var(--main-text-color, #1a1d3e);
    --rn-mega-ink-soft: #5b6079;
    --rn-mega-rule: #ecedf3;
    --rn-mega-surface: #ffffff;
    --rn-mega-surface-hover: #fff3f0;
    --rn-mega-radius: 10px;
    /* Largeur calee sur la grille du site. Essai fait a 1 360 px pour
       reduire encore l'emprise : les libelles longs passaient alors sur
       deux lignes, ce qui rallongeait le panneau et nuisait au balayage.
       La densite se gagne en hauteur, pas en largeur. */
    --rn-mega-max: 1604px;
    --rn-mega-gutter: 20px;

    /* Densite. Le pas vertical d'une ligne de lien est la valeur qui
       gouverne la hauteur de tout le panneau : 100 liens sur quatre
       colonnes, chaque pixel gagne en vaut vingt-cinq sur la hauteur. */
    --rn-mega-row-pad: 2px;
    --rn-mega-row-lh: 1.35;
    --rn-mega-col-pad: 16px;
}

/* -------------------------------------------------------------------------
 * 2. Panneau
 * ---------------------------------------------------------------------- */

@media (min-width: 1036px) {

    /* La carte blanche est recentree sur la meme grille que l'en-tete et le
       contenu du site : le panneau debordait jusqu'aux bords de l'ecran alors
       que le reste de la page est contenu dans 1604 px. */
    .nav-style-megamenu > li.nav-item.mega-item > .dropdown-menu > .submenu-box {
        max-width: var(--rn-mega-max);
        margin-left: auto;
        margin-right: auto;
        background: var(--rn-mega-surface);
        border-radius: var(--rn-mega-radius);
        border-top: 3px solid var(--rn-mega-accent);
        box-shadow: 0 2px 6px rgba(26, 29, 62, .06),
                    0 24px 48px -12px rgba(26, 29, 62, .18);
        padding: 14px var(--rn-mega-gutter) 16px;
    }

    /* L'ombre du theme est portee par un pseudo-element carre : elle
       depasserait des angles arrondis. */
    .nav-style-megamenu > li.nav-item.mega-item > .dropdown-menu > .submenu-box:after {
        display: none;
    }

    /*
     * Hauteur du panneau.
     *
     * Le contenu est defilable a l'interieur de la carte, sans jamais rogner
     * un lien. Deux bornes plutot qu'une :
     *  - la part relative laisse le panneau se retracter sur un ecran bas ;
     *  - la borne absolue l'empeche de s'etaler sur un grand ecran, ou une
     *    valeur en vh donnerait un bloc inutilement haut.
     * Mesure : la carte fait 568 px sur une fenetre de 855 px et s'arrete
     * une quarantaine de pixels au-dessus de la ligne de flottaison, contre
     * 123 px en dessous avant ce reglage.
     */
    .nav-style-megamenu > li.nav-item.mega-item > .dropdown-menu .xpc-nav-block-shortcode {
        max-height: min(calc(100vh - 370px), 500px);
        min-height: 0;
        overflow-y: auto;
        overflow-x: hidden;
        overscroll-behavior: contain;
        scrollbar-width: thin;
        scrollbar-color: #d8dae6 transparent;
        padding-right: 4px;
    }

    .nav-style-megamenu > li.nav-item.mega-item > .dropdown-menu .xpc-nav-block-shortcode::-webkit-scrollbar {
        width: 8px;
    }

    .nav-style-megamenu > li.nav-item.mega-item > .dropdown-menu .xpc-nav-block-shortcode::-webkit-scrollbar-thumb {
        background: #d8dae6;
        border-radius: 8px;
    }

    .nav-style-megamenu > li.nav-item.mega-item > .dropdown-menu .xpc-nav-block-shortcode::-webkit-scrollbar-track {
        background: transparent;
    }
}

/* Rubriques a menu deroulant simple (« Pieces Ami ») : meme vocabulaire
   graphique que les grands panneaux, pour que la barre de navigation ne
   melange pas deux styles de menus. */
@media (min-width: 1036px) {

    .nav-style-megamenu > li.nav-item:not(.mega-item) > .dropdown-menu {
        background: var(--rn-mega-surface);
        border-radius: var(--rn-mega-radius);
        border-top: 3px solid var(--rn-mega-accent);
        box-shadow: 0 2px 6px rgba(26, 29, 62, .06),
                    0 18px 36px -12px rgba(26, 29, 62, .18);
        padding: 6px;
        min-width: 240px;
    }

    .nav-style-megamenu > li.nav-item:not(.mega-item) > .dropdown-menu > a,
    .nav-style-megamenu > li.nav-item:not(.mega-item) > .dropdown-menu .dropdown-item {
        display: block;
        padding: 6px 11px;
        border-radius: 6px;
        font-size: 13px;
        color: var(--rn-mega-ink);
        transition: background-color .14s ease, color .14s ease;
    }

    .nav-style-megamenu > li.nav-item:not(.mega-item) > .dropdown-menu > a:hover,
    .nav-style-megamenu > li.nav-item:not(.mega-item) > .dropdown-menu .dropdown-item:hover {
        background: var(--rn-mega-surface-hover);
        color: var(--rn-mega-accent);
    }
}

/* -------------------------------------------------------------------------
 * 3. Animation d'ouverture / fermeture
 * ---------------------------------------------------------------------- */

@media (min-width: 1036px) {

    /* Le theme animait l'opacite sur 0,4 s et une translation de 30 px sur
       0,5 s : l'ouverture paraissait molle. Course plus courte, courbe de
       sortie plus franche, fermeture plus rapide que l'ouverture. */
    .nav-style-megamenu > li.nav-item > .dropdown-menu {
        transition: opacity .18s cubic-bezier(.4, 0, .2, 1);
    }

    .nav-style-megamenu > li.nav-item > .dropdown-menu > .submenu-box {
        transform: translateY(14px);
        transition: transform .26s cubic-bezier(.16, .84, .28, 1),
                    opacity .2s cubic-bezier(.4, 0, .2, 1);
        will-change: transform, opacity;
    }

    .nav-style-megamenu > li.nav-item:hover > .dropdown-menu > .submenu-box {
        transform: translateY(0);
        opacity: 1;
    }

    /*
     * Ouverture pilotee au clavier ou au clic (tablette tactile) : meme rendu
     * que le survol, sans dependre de :hover.
     *
     * Le theme declare l'etat ferme sous .nikstore-m-menu, avec cinq classes.
     * La variante prefixee ci-dessous porte la meme portee, un cran au-dessus,
     * pour que l'ouverture clavier ne soit pas annulee par l'etat ferme.
     */
    .nikstore-m-menu .nav-style-megamenu > li.nav-item.rn-mega-open .dropdown-menu .submenu-box,
    .nav-style-megamenu > li.nav-item.rn-mega-open .dropdown-menu .submenu-box {
        transform: translateY(0);
        opacity: 1;
    }

    .nikstore-m-menu .nav-style-megamenu > li.nav-item.rn-mega-open .dropdown-menu,
    .nav-style-megamenu > li.nav-item.rn-mega-open > .dropdown-menu {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
        /* Ferme, le conteneur est reduit a une hauteur nulle par le theme :
           sans cela le panneau ouvert au clavier resterait replie derriere
           l'en-tete au lieu de se deployer sous la barre de navigation. */
        height: auto;
        min-height: 0;
    }
}

/* -------------------------------------------------------------------------
 * 4. Colonnes
 * ---------------------------------------------------------------------- */

@media (min-width: 1036px) {

    /* Filets verticaux discrets : les quatre colonnes se lisaient comme un
       bloc unique de cent liens. La rangee de colonnes est le conteneur
       .fdinobile des trois grands panneaux ; les panneaux Accessoires et
       Promotions, batis autrement, ne sont pas concernes. */
    .nav-style-megamenu .dropdown-menu .fdinobile > .e-con.e-child + .e-con.e-child {
        border-left: 1px solid var(--rn-mega-rule);
    }

    .nav-style-megamenu .dropdown-menu .fdinobile > .e-con.e-child {
        padding-left: var(--rn-mega-col-pad);
        padding-right: var(--rn-mega-col-pad);
        padding-top: 0;
        padding-bottom: 0;
    }

    /*
     * Chaque colonne est une pile flex dont l'ecart entre elements etait de
     * 20 px. Avec douze blocs par colonne, cela faisait 220 px de vide sur la
     * seule colonne, soit pres d'un quart de la hauteur du panneau. L'ecart
     * est ramene a 3 px : la respiration entre categories est desormais
     * portee uniquement par la marge des titres, ou elle est utile.
     */
    .nav-style-megamenu .dropdown-menu .fdinobile > .e-con.e-child {
        --gap: 3px;
        --row-gap: 3px;
        gap: 3px;
    }

    .nav-style-megamenu .dropdown-menu .fdinobile > .e-con.e-child:first-child {
        padding-left: 0;
    }

    .nav-style-megamenu .dropdown-menu .fdinobile > .e-con.e-child:last-child {
        padding-right: 0;
    }
}

/* Ecrans intermediaires : entre 1036 et 1280 px les quatre colonnes
   deviennent etroites, on resserre les gouttieres plutot que de tronquer. */
@media (min-width: 1036px) and (max-width: 1279px) {

    :root {
        --rn-mega-gutter: 14px;
        --rn-mega-col-pad: 10px;
    }

    .nav-style-megamenu .dropdown-menu .li_menu.elementor-widget .elementor-icon-list-text {
        font-size: 11.5px;
    }
}

/* -------------------------------------------------------------------------
 * 5. Titres de categorie
 * ---------------------------------------------------------------------- */

.nav-style-megamenu .dropdown-menu .t_menu.elementor-widget .elementor-image-box-title,
.mobile-mega-menu .t_menu.elementor-widget .elementor-image-box-title {
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--rn-mega-ink);
    margin: 0;
    line-height: 1.3;
    /* Le souligne d'origine faisait doublon avec le filet d'accent ajoute
       sous chaque titre. */
    text-decoration: none;
}

.nav-style-megamenu .dropdown-menu .t_menu.elementor-widget .elementor-image-box-title a,
.mobile-mega-menu .t_menu.elementor-widget .elementor-image-box-title a {
    color: inherit;
    text-decoration: none;
    transition: color .16s ease;
}

.nav-style-megamenu .dropdown-menu .t_menu.elementor-widget .elementor-image-box-title a:hover,
.mobile-mega-menu .t_menu.elementor-widget .elementor-image-box-title a:hover {
    color: var(--rn-mega-accent);
}

/* Filet d'accent sous chaque titre : repere visuel fort entre categorie et
   sous-categories, la ou l'ancien rendu ne proposait qu'un souligne. */
.nav-style-megamenu .dropdown-menu .t_menu.elementor-widget .elementor-image-box-content,
.mobile-mega-menu .t_menu.elementor-widget .elementor-image-box-content {
    position: relative;
    padding-bottom: 5px;
}

.nav-style-megamenu .dropdown-menu .t_menu.elementor-widget .elementor-image-box-content:after,
.mobile-mega-menu .t_menu.elementor-widget .elementor-image-box-content:after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 18px;
    height: 2px;
    border-radius: 2px;
    background: var(--rn-mega-accent);
}

@media (min-width: 1036px) {

    /* Respiration entre deux categories d'une meme colonne : assez pour
       separer les blocs, pas au point de creer des trous. */
    .nav-style-megamenu .dropdown-menu .t_menu.elementor-widget {
        margin-top: 14px;
        margin-bottom: 2px;
    }

    .nav-style-megamenu .dropdown-menu .e-con.e-child > .t_menu:first-child {
        margin-top: 0;
    }
}

/* -------------------------------------------------------------------------
 * 6. Listes de liens et niveaux
 * ---------------------------------------------------------------------- */

.nav-style-megamenu .dropdown-menu .li_menu.elementor-widget .elementor-icon-list-items,
.mobile-mega-menu .li_menu.elementor-widget .elementor-icon-list-items {
    margin: 0;
    padding: 0;
}

.nav-style-megamenu .dropdown-menu .li_menu.elementor-widget .elementor-icon-list-item,
.mobile-mega-menu .li_menu.elementor-widget .elementor-icon-list-item {
    margin: 0;
}

/*
 * Marges negatives des blocs de liens.
 *
 * Les modeles portaient des marges basses negatives (jusqu'a -14 px) pour
 * rattraper l'ecart de 20 px entre blocs. Cet ecart etant ramene a 3 px,
 * ces marges feraient desormais se chevaucher les libelles. Elles sont
 * neutralisees : le rythme vertical est tenu par l'ecart de colonne et par
 * la marge haute des titres, nulle part ailleurs.
 */
.nav-style-megamenu .dropdown-menu .li_menu.elementor-widget,
.mobile-mega-menu .li_menu.elementor-widget {
    margin-top: 0;
    margin-bottom: 0;
}

/* Espacement entre deux lignes d'une meme liste. Elementor le pilote par une
   variable reglee a 5 px dans les modeles : additionnee aux marges internes
   des liens, elle portait le pas vertical a 32 px pour un texte de 12,5 px.
   Sur cote bureau on la ramene a 1 px ; le tiroir tactile garde de quoi viser. */
.nav-style-megamenu .dropdown-menu .li_menu.elementor-widget {
    --e-icon-list-item-spacing: 1px;
}

.mobile-mega-menu .li_menu.elementor-widget {
    --e-icon-list-item-spacing: 2px;
}

.nav-style-megamenu .dropdown-menu .li_menu.elementor-widget .elementor-icon-list-item > a,
.mobile-mega-menu .li_menu.elementor-widget .elementor-icon-list-item > a {
    display: flex;
    align-items: flex-start;
    gap: 5px;
    padding: var(--rn-mega-row-pad) 7px;
    border-radius: 5px;
    transition: background-color .14s ease, color .14s ease, transform .14s ease;
}

.nav-style-megamenu .dropdown-menu .li_menu.elementor-widget .elementor-icon-list-text,
.mobile-mega-menu .li_menu.elementor-widget .elementor-icon-list-text {
    font-size: 12.5px;
    line-height: var(--rn-mega-row-lh);
    color: var(--rn-mega-ink);
    transition: color .14s ease;
}

/* Le chevron du theme reste, mais efface : il balisait chaque ligne avec le
   meme poids que le texte. */
/* Le modele Elementor declare ces chevrons en blanc, comme le texte avant
   correction : ils etaient invisibles sur le fond blanc du panneau. */
.nav-style-megamenu .dropdown-menu .li_menu.elementor-widget .elementor-icon-list-icon,
.mobile-mega-menu .li_menu.elementor-widget .elementor-icon-list-icon {
    color: #a9adc0;
    opacity: 1;
    flex: 0 0 auto;
    transition: color .14s ease, transform .14s ease;
}

.nav-style-megamenu .dropdown-menu .li_menu.elementor-widget .elementor-icon-list-icon svg,
.mobile-mega-menu .li_menu.elementor-widget .elementor-icon-list-icon svg {
    fill: currentColor;
}

/*
 * Niveaux de sous-menu.
 *
 * L'arborescence n'est pas portee par des <ul> imbriques : chaque bloc de
 * liens est un widget Elementor dont le retrait a gauche (20 / 30 / 40 px)
 * encode le niveau. Le script releve ce retrait et pose data-rn-lvl, ce qui
 * permet de differencier les niveaux autrement que par un simple decalage.
 * Sans le script, l'affichage reste celui d'Elementor : rien n'est perdu.
 */
.nav-style-megamenu .dropdown-menu .li_menu.elementor-widget[data-rn-lvl],
.mobile-mega-menu .li_menu.elementor-widget[data-rn-lvl] {
    margin-left: 0 !important;
    margin-bottom: 0 !important;
    padding-left: 0;
}

.nav-style-megamenu .dropdown-menu .li_menu.elementor-widget[data-rn-lvl="2"] > .elementor-icon-list-items > .elementor-icon-list-item > a,
.mobile-mega-menu .li_menu.elementor-widget[data-rn-lvl="2"] > .elementor-icon-list-items > .elementor-icon-list-item > a {
    padding-left: 6px;
}

/* Niveau 3 : rail vertical plutot qu'un simple retrait, pour rattacher
   visuellement les enfants a leur parent. */
.nav-style-megamenu .dropdown-menu .li_menu.elementor-widget[data-rn-lvl="3"],
.nav-style-megamenu .dropdown-menu .li_menu.elementor-widget[data-rn-lvl="4"],
.mobile-mega-menu .li_menu.elementor-widget[data-rn-lvl="3"],
.mobile-mega-menu .li_menu.elementor-widget[data-rn-lvl="4"] {
    margin-left: 9px !important;
    border-left: 1px solid var(--rn-mega-rule);
    padding-left: 7px;
}

.nav-style-megamenu .dropdown-menu .li_menu.elementor-widget[data-rn-lvl="4"],
.mobile-mega-menu .li_menu.elementor-widget[data-rn-lvl="4"] {
    margin-left: 18px !important;
}

.nav-style-megamenu .dropdown-menu .li_menu.elementor-widget[data-rn-lvl="3"] .elementor-icon-list-text,
.nav-style-megamenu .dropdown-menu .li_menu.elementor-widget[data-rn-lvl="4"] .elementor-icon-list-text,
.mobile-mega-menu .li_menu.elementor-widget[data-rn-lvl="3"] .elementor-icon-list-text,
.mobile-mega-menu .li_menu.elementor-widget[data-rn-lvl="4"] .elementor-icon-list-text {
    font-size: 12px;
    color: var(--rn-mega-ink-soft);
}

.nav-style-megamenu .dropdown-menu .li_menu.elementor-widget[data-rn-lvl="3"] .elementor-icon-list-icon,
.nav-style-megamenu .dropdown-menu .li_menu.elementor-widget[data-rn-lvl="4"] .elementor-icon-list-icon,
.mobile-mega-menu .li_menu.elementor-widget[data-rn-lvl="3"] .elementor-icon-list-icon,
.mobile-mega-menu .li_menu.elementor-widget[data-rn-lvl="4"] .elementor-icon-list-icon {
    color: #c6c9d6;
}

/* -------------------------------------------------------------------------
 * 7. Etats
 * ---------------------------------------------------------------------- */

.nav-style-megamenu .dropdown-menu .li_menu.elementor-widget .elementor-icon-list-item > a:hover,
.mobile-mega-menu .li_menu.elementor-widget .elementor-icon-list-item > a:hover {
    background: var(--rn-mega-surface-hover);
}

.nav-style-megamenu .dropdown-menu .li_menu.elementor-widget .elementor-icon-list-item > a:hover .elementor-icon-list-text,
.mobile-mega-menu .li_menu.elementor-widget .elementor-icon-list-item > a:hover .elementor-icon-list-text {
    color: var(--rn-mega-accent);
}

.nav-style-megamenu .dropdown-menu .li_menu.elementor-widget .elementor-icon-list-item > a:hover .elementor-icon-list-icon,
.mobile-mega-menu .li_menu.elementor-widget .elementor-icon-list-item > a:hover .elementor-icon-list-icon {
    color: var(--rn-mega-accent);
    transform: translateX(2px);
}

/* Focus clavier : l'ancien rendu n'affichait aucun contour, la navigation au
   clavier etait donc invisible. */
.nav-style-megamenu .dropdown-menu a:focus-visible,
.mobile-mega-menu a:focus-visible,
.nav-style-megamenu > li.nav-item > a:focus-visible {
    outline: 2px solid var(--rn-mega-accent);
    outline-offset: 2px;
    border-radius: 7px;
}

/* Rubrique en cours de consultation, reperee par le script a partir de
   l'adresse de la page. */
.nav-style-megamenu .dropdown-menu .li_menu.elementor-widget a.rn-mega-current,
.mobile-mega-menu .li_menu.elementor-widget a.rn-mega-current {
    background: var(--rn-mega-surface-hover);
}

.nav-style-megamenu .dropdown-menu .li_menu.elementor-widget a.rn-mega-current .elementor-icon-list-text,
.mobile-mega-menu .li_menu.elementor-widget a.rn-mega-current .elementor-icon-list-text {
    color: var(--rn-mega-accent);
    font-weight: 600;
}

.nav-style-megamenu .dropdown-menu .li_menu.elementor-widget a.rn-mega-current .elementor-icon-list-icon,
.mobile-mega-menu .li_menu.elementor-widget a.rn-mega-current .elementor-icon-list-icon {
    color: var(--rn-mega-accent);
}

/* -------------------------------------------------------------------------
 * 8. Barre de navigation
 * ---------------------------------------------------------------------- */

@media (min-width: 1036px) {

    .nav-style-megamenu > li.nav-item > a {
        position: relative;
        transition: color .16s ease;
    }

    /* Le theme neutralise ce pseudo-element (.nav-link:after {display:none}) :
       il faut au moins la meme specificite pour le reactiver. */
    .nav-style-megamenu > li.nav-item > a.nav-link:after {
        content: "";
        position: absolute;
        left: 10px;
        right: 10px;
        bottom: -6px;
        height: 2px;
        border-radius: 2px;
        background: var(--rn-mega-accent);
        transform: scaleX(0);
        transform-origin: left center;
        transition: transform .22s cubic-bezier(.16, .84, .28, 1);
        display: block;
    }

    .nav-style-megamenu > li.nav-item:hover > a.nav-link:after,
    .nav-style-megamenu > li.nav-item.rn-mega-open > a.nav-link:after,
    .nav-style-megamenu > li.nav-item.current-menu-item > a.nav-link:after,
    .nav-style-megamenu > li.nav-item.current-menu-ancestor > a.nav-link:after,
    .nav-style-megamenu > li.nav-item.rn-mega-active > a.nav-link:after {
        transform: scaleX(1);
    }

    .nav-style-megamenu > li.nav-item:hover > a,
    .nav-style-megamenu > li.nav-item.rn-mega-open > a,
    .nav-style-megamenu > li.nav-item.rn-mega-active > a {
        color: var(--rn-mega-accent);
    }

    /* Chevron du libelle : il pivote a l'ouverture. */
    .nav-style-megamenu > li.nav-item.rn-mega-open > a .rn-mega-caret,
    .nav-style-megamenu > li.nav-item:hover > a i,
    .nav-style-megamenu > li.nav-item.rn-mega-open > a i {
        transform: rotate(180deg);
        transition: transform .22s ease;
    }

    .nav-style-megamenu > li.nav-item > a i {
        transition: transform .22s ease;
        display: inline-block;
    }
}

/* -------------------------------------------------------------------------
 * 9. Mobile et tablette (menu deroulant en accordeon, < 1036 px)
 * ---------------------------------------------------------------------- */

@media (max-width: 1035px) {

    /* Zones tactiles : les lignes mesuraient une quinzaine de pixels de haut,
       sous le minimum confortable au doigt. */
    /*
     * Cible tactile : 32 px de haut, largement au-dessus du minimum de
     * 24 px des criteres d'accessibilite, tout en resserrant la liste.
     *
     * Le theme habille les liens du tiroir par des selecteurs d'identifiant
     * (#mayosis-sidemenu ...) qu'aucune combinaison de classes ne peut
     * depasser. Le meme jeu de regles est donc redonne prefixe par cet
     * identifiant. Si le theme change ce nom, le selecteur cesse simplement
     * de correspondre et la version en classes reprend la main : aucune
     * regression, pas de !important.
     */
    .mobile-mega-menu .li_menu.elementor-widget .elementor-icon-list-item > a,
    #mayosis-sidemenu .mobile-mega-menu .li_menu.elementor-widget .elementor-icon-list-item > a {
        display: flex;
        gap: 8px;
        padding: 5px 9px;
        min-height: 32px;
        align-items: center;
    }

    /* Meme resserrement que cote bureau sur l'ecart entre blocs. */
    .mobile-mega-menu .e-con.e-child,
    .mobile-mega-menu .fdinobile {
        --gap: 4px;
        --row-gap: 4px;
        gap: 4px;
    }

    .mobile-mega-menu .li_menu.elementor-widget .elementor-icon-list-text {
        font-size: 13px;
        line-height: 1.3;
    }

    .mobile-mega-menu .t_menu.elementor-widget .elementor-image-box-title {
        font-size: 12px;
    }

    .mobile-mega-menu .t_menu.elementor-widget {
        margin-top: 12px;
        margin-bottom: 2px;
    }

    .mobile-mega-menu .li_menu.elementor-widget[data-rn-lvl="3"],
    .mobile-mega-menu .li_menu.elementor-widget[data-rn-lvl="4"] {
        margin-left: 12px !important;
        padding-left: 12px;
    }

    /* Rappel : le libelle passait sous le chevron quand il tenait sur deux
       lignes. La mise en forme est portee par la regle prefixee ci-dessus. */

    .mobile-mega-menu .li_menu.elementor-widget .elementor-icon-list-icon {
        margin-top: 1px;
    }

    /* Entetes de premier niveau du tiroir : plus lisibles, cible plus large. */
    .mobile--nav-menu .menu > li.menu-item > a {
        padding-top: 9px;
        padding-bottom: 9px;
        font-size: 14.5px;
        font-weight: 600;
    }

    .mobile--nav-menu .menu > li.menu-item.rn-mega-active > a {
        color: var(--rn-mega-accent);
    }

    /* Le contenu deploye est encadre pour le distinguer du niveau superieur. */
    .mobile-mega-menu {
        border-left: 2px solid var(--rn-mega-rule);
        margin-left: 4px;
        padding-left: 8px;
    }
}

/* -------------------------------------------------------------------------
 * 10. Preferences d'accessibilite
 * ---------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {

    .nav-style-megamenu > li.nav-item > .dropdown-menu,
    .nav-style-megamenu > li.nav-item > .dropdown-menu > .submenu-box,
    .nav-style-megamenu > li.nav-item > a.nav-link:after,
    .nav-style-megamenu .dropdown-menu .li_menu.elementor-widget .elementor-icon-list-item > a,
    .mobile-mega-menu .li_menu.elementor-widget .elementor-icon-list-item > a {
        transition: none !important;
    }

    .nav-style-megamenu > li.nav-item > .dropdown-menu > .submenu-box {
        transform: none !important;
    }
}