.elementor-20654 .elementor-element.elementor-element-17116f32{--display:flex;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-20654 .elementor-element.elementor-element-55caea7e.uael-nav-menu-toggle-label-yes .uael-nav-menu__toggle{flex-direction:row;}.elementor-20654 .elementor-element.elementor-element-55caea7e .menu-item a.uael-menu-item,.elementor-20654 .elementor-element.elementor-element-55caea7e .menu-item a.uael-sub-menu-item{padding-left:12px;padding-right:12px;}.elementor-20654 .elementor-element.elementor-element-55caea7e .menu-item a.uael-menu-item, .elementor-20654 .elementor-element.elementor-element-55caea7e .menu-item a.uael-sub-menu-item{padding-top:3px;padding-bottom:3px;}.elementor-20654 .elementor-element.elementor-element-55caea7e .sub-menu li a.uael-sub-menu-item,
						.elementor-20654 .elementor-element.elementor-element-55caea7e nav.uael-dropdown li a.uael-menu-item,
						.elementor-20654 .elementor-element.elementor-element-55caea7e nav.uael-dropdown li a.uael-sub-menu-item,
						.elementor-20654 .elementor-element.elementor-element-55caea7e nav.uael-dropdown-expandible li a.uael-menu-item,
						.elementor-20654 .elementor-element.elementor-element-55caea7e nav.uael-dropdown-expandible li a.uael-sub-menu-item{padding-left:15px;padding-right:15px;}.elementor-20654 .elementor-element.elementor-element-55caea7e .sub-menu a.uael-sub-menu-item,
						 .elementor-20654 .elementor-element.elementor-element-55caea7e nav.uael-dropdown li a.uael-menu-item,
						 .elementor-20654 .elementor-element.elementor-element-55caea7e nav.uael-dropdown li a.uael-sub-menu-item,
						 .elementor-20654 .elementor-element.elementor-element-55caea7e nav.uael-dropdown-expandible li a.uael-menu-item,
						 .elementor-20654 .elementor-element.elementor-element-55caea7e nav.uael-dropdown-expandible li a.uael-sub-menu-item{padding-top:15px;padding-bottom:15px;}.elementor-20654 .elementor-element.elementor-element-55caea7e .uael-nav-menu__toggle{text-align:center;}.elementor-20654 .elementor-element.elementor-element-55caea7e .sub-menu,
								.elementor-20654 .elementor-element.elementor-element-55caea7e nav.uael-dropdown,
								.elementor-20654 .elementor-element.elementor-element-55caea7e .uael-nav-menu nav.uael-dropdown-expandible,
								.elementor-20654 .elementor-element.elementor-element-55caea7e .uael-nav-menu nav.uael-dropdown-expandible .menu-item a.uael-menu-item,
								.elementor-20654 .elementor-element.elementor-element-55caea7e .uael-nav-menu nav.uael-dropdown-expandible .menu-item .sub-menu,
								.elementor-20654 .elementor-element.elementor-element-55caea7e nav.uael-dropdown .menu-item a.uael-menu-item,
								.elementor-20654 .elementor-element.elementor-element-55caea7e nav.uael-dropdown .menu-item a.uael-sub-menu-item{background-color:#fff;}.elementor-20654 .elementor-element.elementor-element-55caea7e .sub-menu li.menu-item:not(:last-child),
						.elementor-20654 .elementor-element.elementor-element-55caea7e nav.uael-dropdown li.menu-item:not(:last-child),
						.elementor-20654 .elementor-element.elementor-element-55caea7e nav.uael-dropdown-expandible li.menu-item:not(:last-child){border-bottom-style:solid;border-bottom-color:#c4c4c4;border-bottom-width:1px;}.elementor-20654 .elementor-element.elementor-element-55caea7e.uael-nav-menu-label-align-left .uael-nav-menu__toggle .uael-nav-menu-label{margin-right:15px;}.elementor-20654 .elementor-element.elementor-element-55caea7e.uael-nav-menu-label-align-right .uael-nav-menu__toggle .uael-nav-menu-label{margin-left:15px;}@media(max-width:767px){.elementor-20654 .elementor-element.elementor-element-55caea7e .menu-item a.uael-menu-item, .elementor-20654 .elementor-element.elementor-element-55caea7e .menu-item a.uael-sub-menu-item{padding-top:9px;padding-bottom:9px;}.elementor-20654 .elementor-element.elementor-element-55caea7e .uael-nav-menu__toggle .uael-nav-menu-label{font-size:14px;}}/* Start custom CSS *//* ==========================================================
   CARON — NAVIGATION SECONDAIRE FORMATIONS
   Version consolidée
========================================================== */


/* ==========================================================
   1. VARIABLES ET DIMENSIONS
========================================================== */

.caron-nav-formations {

    /* Couleurs */
    --nav-dark: #10152d;
    --nav-black: #111111;
    --nav-yellow: #ffdc00;

    --nav-red: #ed1017;
    --nav-blue: #1676c4;
    --nav-green: #1e6f53;

    /* Mise en page */
    --nav-gap: 8px;
    --nav-radius: 14px;
    --nav-padding: 4px 4px;

    /* Largeurs relatives des 5 cartes */
    --nav-columns: 1.6fr 2.35fr 1.05fr 1.02fr 1fr;

    /* Typographie */
    --nav-font-size: 11px;

    /* Ombres */
    --nav-shadow: 0 4px 18px rgba(0,0,0,.08);

    width: 100%;
    max-width: 1240px;
    margin-inline: auto;
}


/* ==========================================================
   2. GRILLE DES CINQ CARTES
========================================================== */

/* Conteneur Elementor, avec ou sans e-con-inner */

.caron-nav-formations,
.caron-nav-formations > .e-con-inner {

    display: grid !important;

    grid-template-columns: var(--nav-columns) !important;

    gap: var(--nav-gap) !important;

    align-items: stretch !important;
}

/* Éviter deux grilles superposées */

.caron-nav-formations:has(> .e-con-inner) {
    display: block !important;
}

.caron-nav-formations > .e-con-inner {
    width: 100%;
    max-width: 100%;
    min-width: 0;
}


/* ==========================================================
   3. CARTES PRINCIPALES
========================================================== */

.caron-nav-formations :is(
    .nav-formation,
    .nav-programmes-formation,
    .nav-entreprises,
    .nav-partenaire,
    .nav-gratuit
) {

    box-sizing: border-box;

    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;

    padding: var(--nav-padding) !important;

    background: #fff;
    border: 1px solid #f1f1f1;
    border-radius: var(--nav-radius);

    box-shadow: var(--nav-shadow);

    transition:
        background-color .2s ease,
        box-shadow .2s ease,
        transform .2s ease;
}


/* ==========================================================
   4. CONTENU DES CARTES
========================================================== */

/* Widgets HTML Elementor */

.caron-nav-formations .elementor-widget-html,
.caron-nav-formations .elementor-widget-container {
    width: 100%;
    min-width: 0;
}

/* Liens */

.caron-nav-formations .caron-nav-link {

    display: flex;
    flex-direction: row;
    align-items: center;

    width: 100%;
    height: 100%;

    gap: 4px;

    color: var(--nav-dark) !important;
    text-decoration: none !important;

    font-size: var(--nav-font-size);
    font-weight: 600;
    line-height: 1.15;
}

/* Texte */

.caron-nav-formations .caron-nav-text {
    flex: 1 1 auto;
    min-width: 0;
}

.caron-nav-formations .caron-nav-text strong {
    font-weight: 800;
}


/* ==========================================================
   5. ICÔNES PRINCIPALES
========================================================== */

.caron-nav-formations .caron-nav-icon {

    position: relative;
    display: block;

    flex: 0 0 38px;

    width: 38px;
    height: 38px;

    margin: 0;
    padding: 0;
}

/* Images superposées */

.caron-nav-formations .caron-nav-icon img {

    position: absolute;
    inset: 0;

    display: block;

    width: 100%;
    height: 100%;

    margin: 0 !important;
    padding: 0 !important;

    object-fit: contain;

    transition: opacity .2s ease;
}

.caron-nav-formations .icon-normal {
    opacity: 1;
}

.caron-nav-formations .icon-hover {
    opacity: 0;
}


/* ==========================================================
   6. FLÈCHES
========================================================== */

.caron-nav-formations .caron-nav-arrow {

    display: flex;
    align-items: center;
    justify-content: center;

    flex: 0 0 25px;

    width: 25px;
    height: 25px;

    margin-left: auto;

    border: 1px solid #e5e5e5;
    border-radius: 50%;

    background: #f5f5f5;
    color: var(--nav-dark);

    font-size: 22px;
    line-height: 1;

    transition:
        background-color .2s ease,
        border-color .2s ease,
        color .2s ease;
}


/* ==========================================================
   7. FORMATION TRILOGIE / ENTREPRISES / PARTENAIRE
========================================================== */

/* Centrage vertical */

.caron-nav-formations :is(
    .nav-formation,
    .nav-entreprises,
    .nav-partenaire
) {
    justify-content: center !important;
}

/* Widget HTML centré verticalement */

.caron-nav-formations :is(
    .nav-formation,
    .nav-entreprises,
    .nav-partenaire
) > .elementor-widget-html {

    display: flex;
    align-items: center;
    flex: 1 1 auto;
}

/* Dimensions des textes */

.caron-nav-formations :is(
    .nav-formation,
    .nav-entreprises,
    .nav-partenaire
) .caron-nav-link {

    font-size: 11px;
    line-height: 1.15;
    gap: 4px;
}

/* Icônes Entreprises et Partenaire */

.caron-nav-formations :is(
    .nav-entreprises,
    .nav-partenaire
) .caron-nav-icon {

    flex-basis: 38px;
    width: 38px;
    height: 38px;
}


/* ==========================================================
   8. PROGRAMMES DE FORMATION
========================================================== */

.caron-nav-formations .nav-programmes-formation {

    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;

    align-content: center;
    align-items: center;
    justify-content: space-between;

    column-gap: 0 !important;
    row-gap: 5px !important;
}

/* Widget contenant le titre */

.caron-nav-formations
.nav-programmes-formation > .elementor-widget-html {

    flex: 0 0 100% !important;
    width: 100% !important;
}

/* Titre du groupe */

.caron-nav-formations .caron-nav-programmes-title {

    width: 100%;

    margin: 3px 0 0;

    text-align: center;

    color: var(--nav-dark);

    font-size: 11px;
    font-weight: 800;
    line-height: 1.2;
}

/* Les trois mini-formations */

.caron-nav-formations
.nav-programmes-formation > :is(
    .nav-vente,
    .nav-prospection,
    .nav-negociation
) {

    flex: 0 0 auto !important;

    width: auto !important;
    max-width: none !important;
    min-width: 0 !important;

    padding: 2px 4px !important;

    border: 0;
    border-radius: 7px;
    box-shadow: none;

    background: transparent;

    transition: background-color .2s ease;
}

/* Liens des programmes */

.caron-nav-formations .caron-nav-module {

    display: flex;
    align-items: center;
    justify-content: center;

    gap: 3px;

    font-size: 10.5px;
    font-weight: 700;

    white-space: nowrap;
}

/* Icônes des programmes */

.caron-nav-formations
.caron-nav-module .caron-nav-icon {

    flex: 0 0 32px;

    width: 32px;
    height: 32px;
}


/* ==========================================================
   9. BLOC 3 LEÇONS GRATUITES
========================================================== */

.caron-nav-formations .nav-gratuit {

    display: flex !important;
    align-items: center;
    justify-content: center;

    background: var(--nav-black);

    border: 2px solid var(--nav-yellow);
}

/* Supprimer la loupe si elle reste dans le HTML */

.caron-nav-formations
.nav-gratuit .caron-nav-icon {
    display: none !important;
}

/* Lien */

.caron-nav-formations
.nav-gratuit .caron-nav-link {

    color: var(--nav-yellow) !important;
    gap: 5px;
}

/* Titre */

.caron-nav-formations
.nav-gratuit .caron-nav-text strong {

    display: block;

    color: var(--nav-yellow);

    font-size: 13px;
    font-weight: 800;
    line-height: 1.1;
}

/* Sous-titre */

.caron-nav-formations
.nav-gratuit .caron-nav-text small {

    display: block;

    margin-top: 3px;

    color: #fff;

    font-size: 9px;
    font-weight: 700;
    line-height: 1.15;
}

/* Flèche jaune */

.caron-nav-formations
.nav-gratuit .caron-nav-arrow {

    flex: 0 0 28px;

    width: 28px;
    height: 28px;

    background: transparent;

    border: 2px solid var(--nav-yellow);

    color: var(--nav-yellow);
}
.caron-nav-formations .nav-gratuit {
    padding-left: 14px !important;
}

/* ==========================================================
   10. HOVER — CARTES CLASSIQUES
========================================================== */

@media (hover: hover) and (pointer: fine) {

    /* Fonds noirs */

    .caron-nav-formations :is(
        .nav-formation,
        .nav-entreprises,
        .nav-partenaire
    ):hover {

        background: var(--nav-black);

        transform: translateY(-2px);

        box-shadow: 0 7px 22px rgba(0,0,0,.14);
    }

    /* Texte blanc */

    .caron-nav-formations :is(
        .nav-formation,
        .nav-entreprises,
        .nav-partenaire
    ):hover .caron-nav-link {

        color: #fff !important;
    }

    /* Images */

    .caron-nav-formations :is(
        .nav-formation,
        .nav-entreprises,
        .nav-partenaire
    ):hover .icon-normal {
        opacity: 0;
    }

    .caron-nav-formations :is(
        .nav-formation,
        .nav-entreprises,
        .nav-partenaire
    ):hover .icon-hover {
        opacity: 1;
    }

    /* Flèches jaunes */

    .caron-nav-formations :is(
        .nav-formation,
        .nav-entreprises,
        .nav-partenaire
    ):hover .caron-nav-arrow {

        background: var(--nav-yellow);
        border-color: var(--nav-yellow);

        color: var(--nav-black);
    }
}


/* ==========================================================
   11. HOVER — PROGRAMMES
========================================================== */

@media (hover: hover) and (pointer: fine) {

    .caron-nav-formations .nav-vente:hover {
        background: var(--nav-red);
    }

    .caron-nav-formations .nav-prospection:hover {
        background: var(--nav-blue);
    }

    .caron-nav-formations .nav-negociation:hover {
        background: var(--nav-green);
    }

    /* Texte blanc */

    .caron-nav-formations :is(
        .nav-vente,
        .nav-prospection,
        .nav-negociation
    ):hover .caron-nav-link {
        color: #fff !important;
    }

    /* Changement d'images */

    .caron-nav-formations :is(
        .nav-vente,
        .nav-prospection,
        .nav-negociation
    ):hover .icon-normal {
        opacity: 0;
    }

    .caron-nav-formations :is(
        .nav-vente,
        .nav-prospection,
        .nav-negociation
    ):hover .icon-hover {
        opacity: 1;
    }
}


/* ==========================================================
   12. HOVER — LEÇONS GRATUITES
========================================================== */

@media (hover: hover) and (pointer: fine) {

    .caron-nav-formations .nav-gratuit:hover {

        background: #fff;

        border-color: var(--nav-black);

        transform: translateY(-2px);
    }

    .caron-nav-formations
    .nav-gratuit:hover .caron-nav-link,
    .caron-nav-formations
    .nav-gratuit:hover .caron-nav-text strong,
    .caron-nav-formations
    .nav-gratuit:hover .caron-nav-text small {

        color: var(--nav-black) !important;
    }

    .caron-nav-formations
    .nav-gratuit:hover .caron-nav-arrow {

        background: var(--nav-black);
        border-color: var(--nav-black);

        color: #fff;
    }
}


/* ==========================================================
   13. TABLETTE
========================================================== */

@media (min-width: 768px) and (max-width: 1024px) {

    .caron-nav-formations {
        --nav-columns: repeat(6, minmax(0, 1fr));
    }

    .caron-nav-formations .nav-formation {
        grid-column: span 2;
    }

    .caron-nav-formations .nav-programmes-formation {
        grid-column: span 4;
    }

    .caron-nav-formations :is(
        .nav-entreprises,
        .nav-partenaire,
        .nav-gratuit
    ) {
        grid-column: span 2;
    }
}


/* ==========================================================
   14. MOBILE
========================================================== */

@media (max-width: 767px) {

    .caron-nav-formations {
        --nav-columns: minmax(0, 1fr);
        --nav-gap: 10px;
        --nav-padding: 12px 15px;
    }

    /* Cartes */

    .caron-nav-formations :is(
        .nav-formation,
        .nav-programmes-formation,
        .nav-entreprises,
        .nav-partenaire,
        .nav-gratuit
    ) {
        width: 100% !important;
    }

    /* Textes */

    .caron-nav-formations .caron-nav-link {
        font-size: 13px;
    }

    /* Programmes */

    .caron-nav-formations .nav-programmes-formation {
        row-gap: 10px !important;
    }

    .caron-nav-formations .caron-nav-module {

        flex-direction: column;

        gap: 5px;

        text-align: center;

        font-size: 11px;

        white-space: normal;
    }

    .caron-nav-formations
    .caron-nav-module .caron-nav-icon {

        flex: 0 0 30px;

        width: 30px;
        height: 30px;
    }
}

/* ==========================================================
   CARON — NAVIGATION FORMATIONS
   ÉTATS ACTIFS DES PAGES
   Desktop + mobile
========================================================== */


/* ----------------------------------------------------------
   1. PAGES ASSOCIÉES AUX ENTRÉES DU MENU
---------------------------------------------------------- */

/* Formation commerciale → Trilogie */
body.page-id-11658 .nav-formation,

/* Devenir partenaire + Offre Formateur */
body.page-id-11671 .nav-partenaire,
body.page-id-12015 .nav-partenaire,

/* Entreprise + Offre Entreprise */
body.page-id-11669 .nav-entreprises,
body.page-id-12013 .nav-entreprises,

/* Programmes */
body.page-id-11664 .nav-negociation,
body.page-id-11662 .nav-prospection,
body.page-id-11660 .nav-vente {

    background: #ffdc00 !important;
}


/* ----------------------------------------------------------
   2. TEXTE NOIR SUR LA PAGE ACTIVE
---------------------------------------------------------- */

:is(
    body.page-id-11658 .nav-formation,
    body.page-id-11671 .nav-partenaire,
    body.page-id-12015 .nav-partenaire,
    body.page-id-11669 .nav-entreprises,
    body.page-id-12013 .nav-entreprises,
    body.page-id-11664 .nav-negociation,
    body.page-id-11662 .nav-prospection,
    body.page-id-11660 .nav-vente
) .caron-nav-link {

    color: #111 !important;
}


/* ----------------------------------------------------------
   3. ICÔNES ACTIVES
---------------------------------------------------------- */

/* Masquer l'icône normale */

:is(
    body.page-id-11658 .nav-formation,
    body.page-id-11671 .nav-partenaire,
    body.page-id-12015 .nav-partenaire,
    body.page-id-11669 .nav-entreprises,
    body.page-id-12013 .nav-entreprises,
    body.page-id-11664 .nav-negociation,
    body.page-id-11662 .nav-prospection,
    body.page-id-11660 .nav-vente
) .icon-normal {

    opacity: 0 !important;
}


/* Afficher l'icône hover */

:is(
    body.page-id-11658 .nav-formation,
    body.page-id-11671 .nav-partenaire,
    body.page-id-12015 .nav-partenaire,
    body.page-id-11669 .nav-entreprises,
    body.page-id-12013 .nav-entreprises,
    body.page-id-11664 .nav-negociation,
    body.page-id-11662 .nav-prospection,
    body.page-id-11660 .nav-vente
) .icon-hover {

    opacity: 1 !important;
}


/* ----------------------------------------------------------
   4. FLÈCHE GRISE SUR LES CARTES ACTIVES
---------------------------------------------------------- */

:is(
    body.page-id-11658 .nav-formation,
    body.page-id-11671 .nav-partenaire,
    body.page-id-12015 .nav-partenaire,
    body.page-id-11669 .nav-entreprises,
    body.page-id-12013 .nav-entreprises
) .caron-nav-arrow {

    background: #f5f5f5 !important;
    border-color: #e5e5e5 !important;
    color: #10152d !important;
}/* End custom CSS */