/* =====================================================
           🎯 INSUFFLE TOOLTIP · beautiful, accessible, CSS-only
           Réutilisable partout : <span class="insuffle-tt">trigger
           <span class="insuffle-tt-content" role="tooltip">...</span></span>
           ===================================================== */
        .insuffle-tt {
            position: relative;
            display: inline-flex;
            align-items: center;
        }
        .insuffle-tt-content {
            position: absolute;
            bottom: calc(100% + 12px);
            left: 50%;
            transform: translateX(-50%) translateY(6px);
            background: linear-gradient(135deg, #1a0518 0%, #4a0e44 100%);
            color: #fff;
            padding: 14px 18px;
            border-radius: 12px;
            width: 280px;
            max-width: calc(100vw - 32px);
            font-size: 0.86rem;
            line-height: 1.55;
            font-weight: 500;
            text-align: left;
            text-transform: none;
            letter-spacing: 0;
            box-shadow: 0 18px 50px rgba(0,0,0,0.32);
            border: 1px solid rgba(255,212,102,0.35);
            opacity: 0;
            visibility: hidden;
            pointer-events: none;
            transition: opacity .22s ease, transform .25s cubic-bezier(.34,1.3,.64,1), visibility .22s;
            z-index: 99999;
            white-space: normal;
        }
        .insuffle-tt-content::before {
            content: '';
            position: absolute;
            top: -6px; right: -6px;
            width: 80px; height: 80px;
            background: radial-gradient(circle, rgba(255,212,102,0.18), transparent 65%);
            border-radius: 50%;
            pointer-events: none;
        }
        .insuffle-tt-content::after {
            content: '';
            position: absolute;
            top: 100%;
            left: 50%;
            transform: translateX(-50%);
            border: 8px solid transparent;
            border-top-color: #4a0e44;
            filter: drop-shadow(0 4px 4px rgba(0,0,0,0.15));
        }
        .insuffle-tt:hover .insuffle-tt-content,
        .insuffle-tt:focus-within .insuffle-tt-content,
        .insuffle-tt.is-open .insuffle-tt-content {
            opacity: 1;
            visibility: visible;
            transform: translateX(-50%) translateY(0);
            pointer-events: auto;
        }
        .insuffle-tt-title {
            display: block;
            color: #FFD466;
            font-weight: 900;
            font-size: 0.74rem;
            text-transform: uppercase;
            letter-spacing: 1.5px;
            margin-bottom: 8px;
        }
        .insuffle-tt-content ul {
            margin: 8px 0 0;
            padding: 0 0 0 18px;
            color: rgba(255,255,255,0.92);
        }
        .insuffle-tt-content li {
            margin: 4px 0;
            font-size: 0.82rem;
            line-height: 1.5;
        }
        .insuffle-tt-content strong { color: #FFD466; font-weight: 800; }
        .insuffle-tt-cta {
            display: inline-block;
            margin-top: 10px;
            font-size: 0.78rem;
            color: #FFD466;
            font-weight: 800;
            border-top: 1px solid rgba(255,212,102,0.25);
            padding-top: 8px;
        }
        /* Positionnement alternatif (en bas) */
        .insuffle-tt[data-tt-pos="bottom"] .insuffle-tt-content {
            bottom: auto;
            top: calc(100% + 12px);
        }
        .insuffle-tt[data-tt-pos="bottom"] .insuffle-tt-content::after {
            top: auto;
            bottom: 100%;
            border-top-color: transparent;
            border-bottom-color: #1a0518;
        }
        @media (max-width: 640px) {
            .insuffle-tt-content {
                width: 240px;
                font-size: 0.82rem;
                padding: 12px 14px;
            }
            .insuffle-tt-title { font-size: 0.68rem; }
        }

        /* --- PREMIUM NAVIGATION STYLES --- */
        :root {
            --nav-height: 90px;
            --primary: #8E2183;
            --secondary: #FFD466;
            --text-dark: #1a0518;
            --text-light: #FFFFFF;
        }

        /* Reset & Layout */
        html, body {
            margin: 0;
            padding: 0;
            overflow-x: hidden;
        }

        body {
            padding-top: var(--nav-height);
        }

        /* Admin Bar Fix */
        body.admin-bar #site-header {
            top: 32px;
        }

        @media screen and (max-width: 782px) {
            body.admin-bar #site-header {
                top: 46px;
            }
        }

        #site-header {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: var(--nav-height);
            background: var(--primary); /* Purple background */
            box-shadow: 0 5px 30px rgba(0,0,0,0.15);
            z-index: 9999; /* Au-dessus de TOUT le contenu */
            transition: all 0.3s ease;
            display: flex;
            align-items: center;
        }

        .nav-container {
            display: flex;
            justify-content: space-between;
            align-items: center;
            width: 100%;
            max-width: 1400px;
            margin: 0 auto;
            padding: 0 30px;
        }

        .nav-logo {
            height: 50px;
            width: auto;
            max-width: none;
            flex: 0 0 auto;              /* le flex ne doit jamais compresser le logo */
            object-fit: contain;
            transition: transform 0.3s ease;
            filter: brightness(0) invert(1); /* Make logo white */
        }

        .nav-logo:hover {
            transform: scale(1.05);
        }

        /* Desktop Menu */
        .nav-menu {
            display: flex;
            align-items: center;
            gap: 22px;
            list-style: none;
            margin: 0;
            padding: 0;
        }

        /* Séparation plus marquée avant la zone CTA */
        .nav-menu .menu-item-rappel { margin-left: 12px; }

        .nav-menu > li {
            position: relative;
        }

        .nav-menu > li > a {
            color: var(--text-light); /* White text */
            text-decoration: none;
            font-weight: 600;
            font-size: 1rem;
            text-transform: uppercase;
            letter-spacing: 1px;
            padding: 10px 0;
            position: relative;
            transition: color 0.3s;
        }

        .nav-menu > li > a::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 0;
            width: 0;
            height: 2px;
            background: var(--secondary); /* Yellow underline */
            transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        }

        .nav-menu > li > a:hover {
            color: var(--secondary);
        }

        .nav-menu > li > a:hover::after {
            width: 100%;
        }

        /* Dropdown · sous-menu N-2 (formations) · refonte pour lisibilité */
        .nav-menu .sub-menu {
            position: absolute;
            top: 100%;
            left: 50%;
            transform: translateX(-50%) translateY(20px);
            background: white;
            /* Largeur plus généreuse pour que les titres tiennent sur 1-2 lignes max */
            min-width: 460px;
            max-width: 540px;
            padding: 12px 8px;
            border-radius: 16px;
            box-shadow: 0 20px 50px rgba(26, 5, 24, 0.18), 0 4px 12px rgba(0,0,0,0.06);
            opacity: 0;
            visibility: hidden;
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
            border: none;
            list-style: none;
            /* z-index très élevé pour passer AU-DESSUS de tout (formulaires, sliders, etc.) */
            z-index: 99999;
        }

        .nav-menu .sub-menu::before {
            content: '';
            position: absolute;
            top: -7px;
            left: 50%;
            transform: translateX(-50%) rotate(45deg);
            width: 14px;
            height: 14px;
            background: white;
            box-shadow: -2px -2px 4px rgba(0,0,0,0.04);
        }

        .nav-menu > li:hover .sub-menu {
            opacity: 1;
            visibility: visible;
            transform: translateX(-50%) translateY(10px);
        }

        .nav-menu .sub-menu li {
            display: block;
        }

        /* Items du sous-menu : titre seul, aéré, sans picto à gauche */
        .nav-menu .sub-menu a {
            display: block;
            padding: 14px 22px;
            margin: 2px 4px;
            border-radius: 10px;
            color: var(--text-dark, #1a0518);
            font-size: 0.95rem;
            font-weight: 600;
            line-height: 1.4;
            transition: all 0.18s ease;
            text-decoration: none;
            white-space: normal;
            word-break: normal;
            overflow-wrap: break-word;
            position: relative;
        }

        .nav-menu .sub-menu a:hover {
            background: rgba(142, 33, 131, 0.06);
            color: var(--primary);
            padding-left: 28px; /* léger slide */
        }

        /* Petit chevron → à droite au hover */
        .nav-menu .sub-menu a::after {
            content: '→';
            position: absolute;
            right: 18px;
            top: 50%;
            transform: translateY(-50%) translateX(-4px);
            color: var(--primary);
            opacity: 0;
            transition: all 0.2s ease;
            font-weight: 800;
            font-size: 1rem;
            background: transparent;
            width: auto;
            height: auto;
        }

        .nav-menu .sub-menu a:hover::after {
            opacity: 1;
            transform: translateY(-50%) translateX(0);
        }

        /* ==== CTA SECONDAIRE : "Livre blanc" (leadmagnet gratuit) ==== */
        /* Fond blanc semi-opaque pour garantir le contraste sur header violet */
        /* CTA secondaire "Livre blanc"
           Default : VIOLET sur fond BLANC (max contraste sur header violet)
           Hover   : BLANC sur fond VIOLET (inverse, animation claire) */
        .nav-cta {
            background: #fff !important;
            color: var(--primary) !important;
            padding: 7px 16px !important;
            border-radius: 40px;
            font-weight: 800 !important;
            border: 1.5px solid #fff !important;
            transition: all 0.3s !important;
            text-transform: none !important;
            letter-spacing: 0.2px !important;
            text-align: center;
            line-height: 1.15 !important;
            font-size: 0.74rem !important;
            white-space: nowrap;
            box-shadow: 0 4px 10px rgba(0,0,0,0.12);
        }

        .nav-cta:hover {
            background: var(--primary) !important;
            color: #fff !important;
            border-color: var(--primary) !important;
            transform: translateY(-1px);
            box-shadow: 0 6px 18px rgba(142, 33, 131, 0.4);
        }

        .nav-cta::after { display: none !important; }

        /* Sous-titre "gratuit · la facilitation"
           Default : VIOLET (couleur primaire avec opacity) · Hover : BLANC */
        .nav-cta small {
            display: block;
            font-size: 0.78em;
            font-weight: 600;
            opacity: 0.85;
            color: var(--primary) !important;
            margin-top: 2px;
            letter-spacing: 0.1px;
        }
        .nav-cta:hover small { color: #fff !important; opacity: 0.95; }

        /* ==== CTA PRIMAIRE : "Ma formation sur mesure" ==== */
        /* Default : texte VIOLET sur fond JAUNE / Hover : texte BLANC sur fond VIOLET */
        .nav-sur-mesure {
            background: linear-gradient(135deg, var(--secondary) 0%, #ffdb80 100%) !important;
            color: var(--primary) !important;
            padding: 8px 22px !important;
            border-radius: 50px;
            font-weight: 800 !important;
            border: 2px solid var(--secondary) !important;
            box-shadow: 0 8px 20px rgba(255, 212, 102, 0.25), 0 2px 6px rgba(0,0,0,0.08);
            transition: all 0.3s !important;
            font-size: 0.88rem !important;
            text-transform: uppercase;
            letter-spacing: 0.4px;
            line-height: 1.1 !important;
            white-space: nowrap;
            text-align: center;
            display: inline-flex !important;
            align-items: center;
            gap: 10px;
        }

        .nav-sur-mesure:hover {
            background: var(--primary) !important;
            color: #fff !important;
            border-color: var(--primary) !important;
            transform: translateY(-2px);
            box-shadow: 0 14px 32px rgba(142, 33, 131, 0.45), 0 4px 12px rgba(0,0,0,0.15);
        }

        .nav-sur-mesure::after { display: none !important; }

        .nav-sur-mesure .sm-label { display: inline-block; text-align: left; line-height: 1.05; }
        .nav-sur-mesure .sm-label strong { display: block; font-size: 1em; font-weight: 900; letter-spacing: 0.3px; color: var(--primary); }
        .nav-sur-mesure .sm-label small { display: block; font-size: 0.72em; font-weight: 700; opacity: 0.9; color: var(--primary); text-transform: none; letter-spacing: 0.1px; margin-top: 1px; }
        /* Au hover : tout (titre + sous-titre) passe en BLANC */
        .nav-sur-mesure:hover .sm-label strong,
        .nav-sur-mesure:hover .sm-label small { color: #fff !important; opacity: 1; }

        .nav-sur-mesure svg { flex-shrink: 0; width: 18px; height: 18px; }

        /* Clignotement marqué pour ATTIRER L'ŒIL sur le CTA principal */
        @keyframes navSurMesureFlash {
            0%, 100% {
                box-shadow: 0 8px 20px rgba(255, 212, 102, 0.3), 0 2px 6px rgba(0,0,0,0.08);
                transform: scale(1);
            }
            50% {
                box-shadow: 0 0 0 6px rgba(255, 212, 102, 0.45), 0 12px 32px rgba(255, 212, 102, 0.7), 0 4px 10px rgba(0,0,0,0.1);
                transform: scale(1.04);
            }
        }
        .nav-sur-mesure { animation: navSurMesureFlash 2s ease-in-out infinite; }
        .nav-sur-mesure:hover { animation: none; transform: translateY(-2px) scale(1); }

        /* Petite pastille rouge qui pulse pour signaler "nouveau" */
        .nav-sur-mesure::before {
            content: '';
            position: absolute;
            top: -3px;
            right: -3px;
            width: 12px;
            height: 12px;
            background: #ef4444;
            border: 2px solid #fff;
            border-radius: 50%;
            animation: navDotPulse 1.5s ease-in-out infinite;
            z-index: 2;
        }
        .nav-sur-mesure { position: relative; }
        @keyframes navDotPulse {
            0%, 100% { transform: scale(1); opacity: 1; }
            50% { transform: scale(1.4); opacity: 0.7; }
        }

        /* Tablette : le rappel s'efface pour laisser respirer les CTA */
        @media (max-width: 1180px) and (min-width: 993px) {
            .menu-item-rappel { display: none !important; }
            .nav-menu { gap: 18px; }
        }

        /* Être rappelé : pastille discrète, ouvre la popin.
           Elle ne doit hériter ni des majuscules ni du soulignement des liens. */
        .nav-menu > li > a.nav-rappel {
            display: inline-flex;
            align-items: center;
            gap: 7px;
            font-weight: 700;
            font-size: 0.86rem;
            text-transform: none;
            letter-spacing: 0.2px;
            color: rgba(255,255,255,0.92) !important;
            padding: 8px 15px;
            border-radius: 50px;
            border: 1.5px solid rgba(255,255,255,0.28);
            white-space: nowrap;
            transition: background .18s, border-color .18s, color .18s;
        }
        .nav-menu > li > a.nav-rappel::after { display: none; }   /* pas de trait sous une pastille */
        .nav-menu > li > a.nav-rappel:hover {
            color: #fff !important;
            border-color: rgba(255,255,255,0.6);
            background: rgba(255,255,255,0.12);
        }

        /* Mobile Menu Toggle */
        .mobile-menu-toggle {
            display: none;
            background: none;
            border: none;
            cursor: pointer;
            padding: 10px;
            z-index: 1001;
        }

        .mobile-menu-toggle span {
            display: block;
            width: 25px;
            height: 2px;
            background: white; /* White hamburger on purple */
            margin: 6px 0;
            transition: 0.3s;
            border-radius: 2px;
        }

        /* =====================================================================
         *  MENU MOBILE · un seul tiroir, un seul endroit
         *
         *  Il y en avait deux qui se marchaient dessus (un déroulant par le
         *  haut dans style.css, un tiroir par la droite ici) : le panneau
         *  sortait à gauche, recouvrait le logo, et les libellés gardaient
         *  la taille des pastilles du bureau. Tout est refait ici.
         * ===================================================================== */

        /* Sur grand écran, le conteneur du tiroir se comporte comme une simple
           boîte au milieu de la barre : rien ne change. */
        .nav-drawer { display: flex; align-items: center; }
        .nav-drawer-top { display: none; }

        @media (max-width: 992px) {
            .mobile-menu-toggle { display: block; }

            .nav-drawer {
                position: fixed;
                top: 0;
                right: 0;
                bottom: 0;
                width: min(90%, 390px);
                height: 100vh;
                height: 100dvh;                 /* la barre d'adresse des mobiles ne coupe plus le bas */
                background: linear-gradient(170deg, #8E2183 0%, #5c1256 58%, #3a0b36 100%);
                box-shadow: -18px 0 50px rgba(0,0,0,.45);
                flex-direction: column;
                align-items: stretch;
                transform: translateX(102%);
                transition: transform .32s cubic-bezier(.4, 0, .2, 1);
                z-index: 10000;                 /* au-dessus du voile */
                overscroll-behavior: contain;
                visibility: hidden;
            }
            .nav-drawer.active { transform: none; visibility: visible; }

            /* Tête du tiroir : le logo ramène à l'accueil, la croix ferme. */
            .nav-drawer-top {
                display: flex;
                align-items: center;
                justify-content: space-between;
                gap: 12px;
                flex: 0 0 auto;
                padding: 14px 16px 14px 20px;
                border-bottom: 1px solid rgba(255,255,255,.16);
            }
            .nav-drawer-logo { display: inline-flex; align-items: center; }
            .nav-drawer-logo .nav-logo { height: 40px; }
            .nav-drawer-close {
                display: inline-flex;
                align-items: center;
                justify-content: center;
                width: 44px;
                height: 44px;
                flex: 0 0 auto;
                border: 1px solid rgba(255,255,255,.3);
                border-radius: 50%;
                background: rgba(255,255,255,.1);
                color: #fff;
                cursor: pointer;
            }
            .nav-drawer-close svg { width: 20px; height: 20px; }
            .nav-drawer-close:active { background: rgba(255,255,255,.22); }

            /* La liste : elle défile, les boutons du bas restent atteignables. */
            .nav-drawer .nav-menu {
                position: static;
                flex: 1 1 auto;
                flex-direction: column;
                align-items: stretch;
                gap: 2px;
                width: 100%;
                max-width: none;
                height: auto;
                padding: 12px 16px calc(28px + env(safe-area-inset-bottom));
                margin: 0;
                background: none;
                box-shadow: none;
                overflow-y: auto;
                -webkit-overflow-scrolling: touch;
                overscroll-behavior: contain;
            }

            .nav-drawer .nav-menu > li {
                width: 100%;
                margin: 0;
                padding: 0;
                border-bottom: 1px solid rgba(255,255,255,.1);
            }
            .nav-drawer .nav-menu > li:last-child { border-bottom: none; }

            /* Des vraies zones de touche : 56 px, pas une pastille de 0,86 rem. */
            .nav-drawer .nav-menu > li > a.nav-link,
            .nav-drawer .nav-menu > li > a.nav-rappel {
                display: flex;
                align-items: center;
                gap: 13px;
                width: 100%;
                min-height: 56px;
                padding: 14px 10px;
                border-radius: 12px;
                background: none;
                border: none;
                box-shadow: none;
                color: #fff;
                font-size: 1.02rem;
                font-weight: 700;
                letter-spacing: .3px;
                white-space: normal;
            }
            .nav-drawer .nav-menu > li > a.nav-link:active { background: rgba(255,255,255,.12); }
            .nav-drawer .nav-menu > li > a.nav-link.is-active {
                background: rgba(255,212,102,.14);
                color: var(--secondary);
                box-shadow: inset 3px 0 0 var(--secondary);
            }
            .nav-drawer .nav-menu .nav-ico { width: 19px; height: 19px; opacity: .95; }

            /* Chevron calé au bord droit, qui bascule à l'ouverture.
               En position absolue : l'ordre des éléments souples ne peut plus
               l'envoyer se poser ailleurs. */
            .nav-drawer .nav-menu > li.menu-item-has-children > a.nav-link .nav-label::after { display: none !important; }
            .nav-drawer .nav-menu > li.menu-item-has-children > a.nav-link {
                position: relative;
                padding-right: 36px;
            }
            .nav-drawer .nav-menu > li.menu-item-has-children > a.nav-link::after {
                content: '';
                display: block;
                position: absolute;
                left: auto;
                right: 14px;
                top: 50%;
                bottom: auto;
                width: 9px;
                height: 9px;
                margin: 0;
                float: none;
                background: none;
                border-right: 2px solid currentColor;
                border-bottom: 2px solid currentColor;
                transform: translateY(-70%) rotate(45deg);
                transition: transform .2s ease;
                opacity: .85;
            }
            .nav-drawer .nav-menu > li.submenu-open > a.nav-link::after { transform: translateY(-30%) rotate(225deg); }

            /* Sous-menu : replié, et surtout LISIBLE (les titres étaient
               écrits en violet foncé sur fond violet foncé). */
            .nav-drawer .nav-menu .sub-menu {
                position: static;
                transform: none;
                opacity: 1;
                visibility: visible;
                display: none;
                width: 100%;
                min-width: 0;
                max-width: none;
                margin: 0 0 10px;
                padding: 6px;
                background: rgba(0,0,0,.22);
                border: none;
                border-radius: 12px;
                box-shadow: none;
            }
            .nav-drawer .nav-menu .sub-menu::before { display: none; }
            .nav-drawer .nav-menu > li.submenu-open .sub-menu { display: block; }

            .nav-drawer .nav-menu .sub-menu li { border: none; }
            .nav-drawer .nav-menu .sub-menu a {
                display: block;
                min-height: 48px;
                padding: 11px 14px !important;
                margin: 0 !important;
                border-radius: 9px;
                background: none;
                box-shadow: none;
                color: #fff !important;
            }
            .nav-drawer .nav-menu .sub-menu a::after { display: none !important; }
            .nav-drawer .nav-menu .sub-menu a .sm-t { color: #fff; font-size: .97rem; font-weight: 700; }
            .nav-drawer .nav-menu .sub-menu a .sm-m { color: rgba(255,255,255,.72); font-size: .8rem; }
            .nav-drawer .nav-menu .sub-menu a:active { background: rgba(255,255,255,.12); }
            .nav-drawer .nav-menu .sub-menu li.current-menu-item > a {
                background: rgba(255,212,102,.16);
                box-shadow: inset 3px 0 0 var(--secondary);
            }
            .nav-drawer .nav-menu .sub-menu li.current-menu-item > a .sm-t { color: var(--secondary); }

            /* Les trois actions, en bas, pleine largeur */
            .nav-drawer .nav-menu .menu-item-rappel,
            .nav-drawer .nav-menu .menu-item-cta,
            .nav-drawer .nav-menu .menu-item-sur-mesure {
                border-bottom: none;
                margin: 0;
            }
            .nav-drawer .nav-menu .menu-item-rappel { margin-top: 14px; }
            .nav-drawer .nav-menu .menu-item-cta,
            .nav-drawer .nav-menu .menu-item-sur-mesure { margin-top: 10px; }
            .nav-drawer .nav-menu > li > a.nav-rappel {
                justify-content: center;
                border: 1.5px solid rgba(255,255,255,.45);
                border-radius: 12px;
            }
            .nav-drawer .nav-menu .nav-cta,
            .nav-drawer .nav-menu .nav-sur-mesure {
                display: flex !important;
                width: 100% !important;
                min-height: 58px;
                justify-content: center !important;
                align-items: center;
                padding: 12px 18px !important;
                border-radius: 12px !important;
                font-size: .98rem !important;
                animation: none !important;
            }
            /* Le libellé au-dessus, la précision en dessous : sur une seule
               ligne, « Livre blanc gratuit · la facilitation » se lisait mal. */
            .nav-drawer .nav-menu .nav-cta {
                flex-direction: column;
                gap: 2px;
                line-height: 1.25;
            }
            .nav-drawer .nav-menu .nav-cta {
                background: rgba(255,255,255,.14) !important;
                color: #fff !important;
                border: 1.5px solid rgba(255,255,255,.55) !important;
            }
            .nav-drawer .nav-menu .nav-cta small { color: rgba(255,255,255,.8) !important; }
            .nav-drawer .nav-menu .nav-sur-mesure .sm-label { text-align: center; }
            .nav-drawer .nav-menu .nav-sur-mesure .sm-label strong { font-size: 1rem; }
            .nav-drawer .nav-menu .nav-sur-mesure .sm-label small { font-size: .78em; }

            /* Croix du hamburger */
            .mobile-menu-toggle.active span:nth-child(1) { transform: rotate(-45deg) translate(-5px, 6px); }
            .mobile-menu-toggle.active span:nth-child(2) { opacity: 0; }
            .mobile-menu-toggle.active span:nth-child(3) { transform: rotate(45deg) translate(-5px, -6px); }

            /* Voile : il ferme le menu au toucher, et il passe SOUS le tiroir */
            body.menu-open::before {
                content: '';
                position: fixed;
                inset: 0;
                background: rgba(26, 5, 24, .72);
                backdrop-filter: blur(4px);
                z-index: 9998;
            }
            /* Le fond ne bouge plus derrière le tiroir */
            body.menu-open { overflow: hidden; }
        }

        @media (max-width: 992px) and (prefers-reduced-motion: reduce) {
            .nav-drawer { transition: none; }
        }

        /* Responsive intermédiaire : on peut raccourcir le label du CTA principal */
        @media (min-width: 993px) and (max-width: 1280px) {
            .nav-sur-mesure { padding: 8px 18px !important; }
            .nav-sur-mesure .sm-label strong { font-size: 0.9em; }
            .nav-menu { gap: 16px; }
            /* Libellés sur UNE ligne (sinon « Nos formations », « Le blog »,
               « Notre ADN » passaient sur deux lignes entre 993 et 1280 px) */
            .nav-menu > li > a { white-space: nowrap; font-size: 0.86rem; letter-spacing: 0.5px; }
        }
        @media (min-width: 993px) and (max-width: 1120px) {
            .nav-menu { gap: 12px; }
            .nav-menu > li > a { font-size: 0.78rem; letter-spacing: 0.2px; }
            .nav-logo { height: 38px; width: auto; }
        }

        /* =====================================================================
         *  MENU PRINCIPAL · refonte 2026-09
         *  Pastilles, icônes, rubrique en cours toujours visible (doré), sous-menu
         *  « Nos formations » enrichi (durée · prochaine session · note).
         * ===================================================================== */
        .nav-menu { gap: 4px; }
        /* Respiration devant la zone d'action : les rubriques d'un côté, les boutons de l'autre */
        .nav-menu .menu-item-cta { margin-left: 8px; }
        .nav-menu .menu-item-sur-mesure { margin-left: 6px; }
        @media (max-width: 1280px) {
            .nav-menu .menu-item-rappel { margin-left: 4px; }
            .nav-menu .menu-item-cta,
            .nav-menu .menu-item-sur-mesure { margin-left: 4px; }
        }
        .nav-menu > li > a.nav-link {
            display: inline-flex;
            align-items: center;
            gap: 7px;
            padding: 9px 14px;
            border-radius: 999px;
            color: rgba(255, 255, 255, 0.92);
            font-size: 0.86rem;
            font-weight: 700;
            letter-spacing: 0.7px;
            white-space: nowrap;
            transition: background 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
        }
        .nav-menu > li > a.nav-link::after { display: none; } /* remplace l'ancien soulignement */
        .nav-menu > li > a.nav-link:hover,
        .nav-menu > li:hover > a.nav-link,
        .nav-menu > li > a.nav-link:focus-visible {
            background: rgba(255, 255, 255, 0.12);
            color: #fff;
            outline: none;
        }
        .nav-menu > li > a.nav-link:focus-visible { box-shadow: 0 0 0 2px rgba(255, 212, 102, 0.9); }
        /* Rubrique en cours : pastille dorée */
        .nav-menu > li > a.nav-link.is-active,
        .nav-menu > li:hover > a.nav-link.is-active {
            background: rgba(255, 212, 102, 0.16);
            color: var(--secondary);
            box-shadow: inset 0 0 0 1.5px rgba(255, 212, 102, 0.6);
        }
        .nav-ico { width: 16px; height: 16px; flex: 0 0 auto; }
        .nav-rappel { white-space: nowrap; }
        @media (min-width: 1200px) and (max-width: 1440px) {
            .nav-menu > li > a.nav-link { padding: 8px 11px; letter-spacing: 0.5px; }
        }
        /* Chevron du menu déroulant */
        .nav-menu > li.menu-item-has-children > a.nav-link .nav-label::after {
            content: '';
            display: inline-block;
            width: 6px;
            height: 6px;
            margin-left: 8px;
            border-right: 2px solid currentColor;
            border-bottom: 2px solid currentColor;
            transform: translateY(-3px) rotate(45deg);
            opacity: 0.85;
            transition: transform 0.2s ease;
        }
        .nav-menu > li.menu-item-has-children:hover > a.nav-link .nav-label::after,
        .nav-menu > li.submenu-open > a.nav-link .nav-label::after { transform: translateY(0) rotate(225deg); }

        /* Sous-menu : titre court + ligne d'infos réelles */
        .nav-menu .sub-menu a { padding-right: 46px; }
        .nav-menu .sub-menu a .sm-t { display: block; font-weight: 700; color: #1a0518; }
        .nav-menu .sub-menu a:hover .sm-t { color: var(--primary); }
        .nav-menu .sub-menu a .sm-m {
            display: block;
            margin-top: 3px;
            font-size: 0.78rem;
            font-weight: 600;
            line-height: 1.35;
            color: #7a6a77;
            text-transform: none;
            letter-spacing: 0;
        }
        .nav-menu .sub-menu li.current-menu-item > a {
            background: rgba(142, 33, 131, 0.08);
            box-shadow: inset 3px 0 0 var(--primary);
        }
        .nav-menu .sub-menu li.current-menu-item > a .sm-t { color: var(--primary); }

        @media (min-width: 993px) and (max-width: 1280px) {
            .nav-menu > li > a.nav-link { padding: 8px 10px; font-size: 0.8rem; letter-spacing: 0.4px; }
        }
        @media (min-width: 993px) and (max-width: 1199px) {
            .nav-ico { display: none; } /* place comptée : texte seul */
        }
        @media (min-width: 993px) and (max-width: 1120px) {
            .nav-menu > li > a.nav-link { padding: 7px 8px; font-size: 0.76rem; letter-spacing: 0.2px; }
        }
        @media (max-width: 992px) {
            .nav-menu > li > a.nav-link {
                display: flex;
                width: 100%;
                padding: 12px 14px;
                font-size: 1.12rem;
                border-radius: 12px;
                letter-spacing: 0.5px;
            }
            .nav-menu > li > a.nav-link:hover { padding-left: 14px; }
            .nav-menu > li > a.nav-link.is-active { box-shadow: inset 4px 0 0 var(--secondary); }
            .nav-ico { width: 20px; height: 20px; }
            .nav-menu .sub-menu a { padding-right: 16px !important; }
            .nav-menu .sub-menu a .sm-t { color: #fff; }
            .nav-menu .sub-menu a .sm-m { color: rgba(255, 255, 255, 0.68); }
            .nav-menu .sub-menu li.current-menu-item > a { background: rgba(255, 255, 255, 0.08); box-shadow: inset 3px 0 0 var(--secondary); }
            .nav-menu .sub-menu li.current-menu-item > a .sm-t { color: var(--secondary); }
            /* « Livre blanc » : texte blanc sur fond translucide (il héritait du violet : illisible) */
            .nav-menu > li > a.nav-cta, .nav-menu > li > a.nav-cta span, .nav-menu > li > a.nav-cta small { color: #fff !important; }
        }
        @media (prefers-reduced-motion: reduce) {
            .nav-menu > li > a.nav-link, .nav-menu > li.menu-item-has-children > a.nav-link .nav-label::after { transition: none; }
        }