/* --- Bloc style #1 (extrait de header.php) --- */

@media (max-width: 1024px) {
        /* Pseudo-élément d'origine (espaceur de 140px) : avec notre
           réordonnancement flex (order sur les vrais enfants), cet
           ::after sans order explicite remontait en haut du menu
           (order:0 par défaut) et créait un grand vide visuel. */
        #arbree-mobile-menu::after {
            content: none !important;
            display: none !important;
            height: 0 !important;
        }
        .arbree-logo img,
        .arbree-nav.scrolled .arbree-logo img {
            filter: brightness(0) invert(1) !important;
        }
        .arbree-burger > div,
        .arbree-burger.open > div,
        .arbree-nav.scrolled .arbree-burger > div,
        .arbree-nav.scrolled #burgerBtn > div {
            background: #ffffff !important;
            background-color: #ffffff !important;
        }
        .arbree-mobile-menu,
        .arbree-mobile-menu * {
            font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif !important;
        }
        /* ---- Icônes du haut (accueil / recherche / connexion) ----
           Remplacées en SVG inline dans le HTML (fiable, sans
           dépendance à un CDN de police d'icônes). Le CSS du site
           les stylait déjà via .mobile-top-icons a:not(.btn) svg
           (couleur, taille) : on ne fait que garantir le stroke. */
        .mobile-top-icons a:not(.btn) svg {
            stroke: #fff !important;
            width: 20px !important;
            height: 20px !important;
        }
        /* ---- Flèche (chevron) des sous-menus ----
           Remplacée en SVG inline dans le HTML (fiable, sans
           dépendance à FontAwesome). On gère juste sa rotation
           à l'ouverture, comme prévu par le CSS du site sur <i>. */
        .mobile-chevron {
            transition: transform 0.3s ease !important;
            flex-shrink: 0 !important;
        }
        .mobile-accordion-trigger[aria-expanded="true"] .mobile-chevron {
            transform: rotate(180deg) !important;
        }
        /* ---- Bouton CONTACT ----
           On ne touche pas à sa forme (déjà stylée en pilule orange
           par style00.css), seulement à sa lisibilité de texte. */
        .mobile-top-icons .btn {
            white-space: nowrap !important;
            font-size: 11px !important;
        }
        /* ---- Boutons FORMATIONS / ÉCOLE / DIPLÔMES / FINANCEMENT / ESPACE APPRENANT ----
           Le site les affiche en grille 4 colonnes très compacte
           (police 9px) : on passe en 1 colonne pour un texte lisible. */
        .mobile-main-buttons {
            display: flex !important;
            flex-direction: column !important;
            gap: 10px !important;
        }
        .mobile-main-btn {
            width: 100% !important;
            font-size: 16px !important;
            padding: 18px 20px !important;
            text-align: left !important;
            letter-spacing: 0.2px !important;
            display: flex !important;
            align-items: center !important;
            box-sizing: border-box !important;
            margin: 0 0 12px 0 !important;
            line-height: 1 !important;
            min-height: 54px !important;
        }
        /* ---- Contenu de chaque onglet juste sous son bouton ----
           Le HTML place tous les boutons ensemble, puis tout le
           contenu des 5 onglets à la suite. On réordonne visuellement
           avec flex + order, sans toucher au HTML ni au JS. */
        .arbree-mobile-menu {
            display: flex !important;
            flex-direction: column !important;
        }
        .mobile-main-buttons {
            display: contents !important;
        }
        .mobile-top-icons { order: 1 !important; }
        .mobile-main-btn[data-tab="formations"] { order: 2 !important; }
        #tab-formations { order: 3 !important; }
        .mobile-main-btn[data-tab="ecole"] { order: 4 !important; }
        #tab-ecole { order: 5 !important; }
        .mobile-main-btn[data-tab="diplomes"] { order: 6 !important; }
        #tab-diplomes { order: 7 !important; }
        .mobile-main-btn[data-tab="financement"] { order: 8 !important; }
        #tab-financement { order: 9 !important; }
        .mobile-main-btn[data-tab="service"] { order: 10 !important; }
        #tab-service { order: 11 !important; }
        .arbree-mobile-menu > a.btn { order: 12 !important; }
        .mobile-tab-content.active {
            margin-bottom: 16px !important;
        }
        /* ---- Titres et liens des accordéons (sections dans chaque onglet) ----
           Plusieurs versions concurrentes de ces règles existent déjà
           dans le CSS du site (tailles 0.7rem à 1.15rem selon la
           media query) : on force une taille confortable et cohérente. */
        .mobile-accordion-trigger h3 {
            font-size: 19px !important;
            line-height: 1.4 !important;
            font-style: normal !important;
            font-weight: 700 !important;
            color: #ffffff !important;
            -webkit-text-fill-color: #ffffff !important;
            opacity: 1 !important;
        }
        .mobile-accordion-panel a {
            font-size: 14.5px !important;
            line-height: 1.5 !important;
        }
        .mobile-direct-link a {
            font-size: 14.5px !important;
        }
        /* ---- Bouton "Demande de documentation" ----
           Le rendre visuellement distinct des 5 boutons principaux,
           aligné à gauche, sans pleine largeur. */
        .arbree-mobile-menu > a.btn {
            display: inline-flex !important;
            align-items: center !important;
            justify-content: center !important;
            width: auto !important;
            text-align: center !important;
            font-size: 13px !important;
            font-weight: 700 !important;
            padding: 13px 20px !important;
            border-radius: 999px !important;
            margin: 4px 0 24px !important;
            background: transparent !important;
            border: 1.5px solid rgba(255,255,255,0.35) !important;
            color: #fff !important;
        }
        /* Le robot du chat flotte par-dessus le menu mobile ouvert :
           on le masque tant que le menu est ouvert. */
        body.menu-open #chatbot-2iia {
            display: none !important;
        }
    }

/* --- Bloc style #2 (extrait de header.php) --- */

@media (min-width: 1025px) {
        .arbree-nav-group {
            display: flex !important;
            align-items: center !important;
            gap: 8px !important;
        }
        .arbree-nav-link.arbree-menu-trigger {
            position: relative !important;
            display: inline-flex !important;
            align-items: center !important;
            gap: 6px !important;
            padding: 9px 14px !important;
            border-radius: 8px !important;
            font-family: 'Inter', sans-serif !important;
            font-size: 0.78rem !important;
            font-weight: 500 !important;
            letter-spacing: 0.01em !important;
            color: #ffffff !important;
            -webkit-text-fill-color: #ffffff !important;
            background: transparent !important;
            border: 0 !important;
            transition: background-color 0.2s ease !important;
        }
        .arbree-nav-link.arbree-menu-trigger:hover {
            background: rgba(255,255,255,0.06) !important;
        }
        .arbree-dropdown.active .arbree-nav-link.arbree-menu-trigger {
            background: rgba(255,255,255,0.09) !important;
        }
        /* ---- Liens simples de même niveau (DIPLÔMES / RNCP) :
               même blanc, même taille, seul le poids de police
               les distingue des menus (plus léger). ---- */
        a.arbree-nav-link:not([href*="contactez-nous"]):not(.arbree-menu-trigger) {
            position: relative !important;
            display: inline-flex !important;
            align-items: center !important;
            padding: 9px 14px !important;
            border-radius: 8px !important;
            font-family: 'Inter', sans-serif !important;
            font-size: 0.78rem !important;
            font-weight: 400 !important;
            letter-spacing: 0.01em !important;
            color: #ffffff !important;
            -webkit-text-fill-color: #ffffff !important;
            background: transparent !important;
            border: 0 !important;
            transition: background-color 0.2s ease !important;
        }
        a.arbree-nav-link:not([href*="contactez-nous"]):not(.arbree-menu-trigger):hover {
            background: rgba(255,255,255,0.06) !important;
        }
        .arbree-dropdown .arbree-arrow {
            font-size: 0.6em !important;
            opacity: 0.7 !important;
            color: currentColor !important;
            transition: transform 0.3s cubic-bezier(.2,.8,.2,1) !important;
        }
        .arbree-dropdown.active .arbree-arrow {
            transform: rotate(180deg) !important;
        }
        /* ---- Panneau du mega-dropdown : un seul bloc uni, pleine
               largeur de page plutôt que compact, pour afficher
               toutes les colonnes sans barre de défilement. ---- */
        .mega-dropdown {
            font-family: 'Inter', sans-serif !important;
            position: fixed !important;
            top: 78px !important;
            left: 50% !important;
            transform: translateX(-50%) translateY(-10px) !important;
            width: min(94vw, 1400px) !important;
            max-width: 94vw !important;
            min-width: 0 !important;
            max-height: calc(100vh - 100px) !important;
            overflow-y: auto !important;
            background: #131316 !important;
            background-image: none !important;
            border: 1px solid rgba(255,255,255,0.08) !important;
            border-radius: 22px !important;
            box-shadow: 0 30px 70px -20px rgba(0,0,0,0.8) !important;
            padding: 2.4rem 3rem !important;
            opacity: 0 !important;
            visibility: hidden !important;
            pointer-events: none !important;
            transition:
                opacity 0.25s ease,
                transform 0.3s cubic-bezier(.2,.8,.2,1),
                visibility 0s linear 0.25s !important;
            z-index: 9999999 !important;
        }
        .mega-dropdown.active {
            opacity: 1 !important;
            visibility: visible !important;
            pointer-events: auto !important;
            transform: translateX(-50%) translateY(0) !important;
            transition:
                opacity 0.3s ease,
                transform 0.35s cubic-bezier(.2,.8,.2,1) !important;
        }
        /* ---- Label discret en haut du panneau (ex : "Ressources") :
               on réutilise la 1ère colonne comme porteuse du label
               si elle existe, sinon ce label n'apparaît simplement
               pas — pas de contenu inventé. ---- */
        .mega-dropdown-label {
            display: block !important;
            font-family: 'Inter', sans-serif !important;
            font-size: 0.72rem !important;
            font-weight: 400 !important;
            color: rgba(255,255,255,0.4) !important;
            margin: 0 0 1.4rem !important;
        }
        .mega-container {
            display: grid !important;
            grid-template-columns: repeat(4, 1fr) !important;
            gap: 8px 48px !important;
            max-width: 100% !important;
            margin: 0 !important;
        }
        .service-container {
            grid-template-columns: repeat(5, 1fr) !important;
        }
        /* ---- Colonnes : plus de carte, plus d'icône — juste un
               conteneur transparent qui empile les liens. ---- */
        .mega-col {
            padding: 0 !important;
            background: transparent !important;
            border: 0 !important;
            border-radius: 0 !important;
            min-width: 0 !important;
            display: flex !important;
            flex-direction: column !important;
        }
        .mega-col .futuristic-icon,
        .mega-col .service-icon {
            display: none !important;
        }
        /* ---- Titres de section : discrets, servent seulement à
               grouper visuellement, pas de style Lovable dédié ---- */
        .mega-col h4 {
            font-family: 'Inter', sans-serif !important;
            font-size: 1.15rem !important;
            font-weight: 700 !important;
            font-style: normal !important;
            letter-spacing: 0.02em !important;
            text-transform: none !important;
            color: #ffffff !important;
            -webkit-text-fill-color: #ffffff !important;
            margin: 1.2rem 0 0.6rem !important;
            padding: 0 !important;
            border: 0 !important;
            text-align: left !important;
        }
        .mega-col h4:first-child {
            margin-top: 0 !important;
        }
        /* Retire la petite barre décorative sous chaque titre de
           section (venait de style00.css, .mega-col h4::after). */
        .mega-col h4::after {
            content: none !important;
            display: none !important;
        }
        /* ---- Liens : titre en gras + description en gris juste
               dessous, sans puce, sans fond, léger décalage au
               survol façon Lovable. ---- */
        .mega-col ul {
            list-style: none !important;
            padding: 0 !important;
            margin: 0 !important;
        }
        .mega-col ul li {
            margin: 0 !important;
            padding: 0 !important;
            font-size: initial !important;
            text-align: left !important;
        }
        .mega-col ul li::before,
        .mega-col ul li::marker {
            content: none !important;
            display: none !important;
        }
        .mega-col ul li a,
        .mega-col a {
            display: block !important;
            padding: 0.5rem 0 !important;
            margin: 0 !important;
            border-radius: 0 !important;
            font-family: 'Inter', sans-serif !important;
            font-size: 0.82rem !important;
            font-weight: 400 !important;
            line-height: 1.3 !important;
            color: rgba(255,255,255,0.72) !important;
            -webkit-text-fill-color: rgba(255,255,255,0.72) !important;
            text-decoration: none !important;
            text-transform: none !important;
            background: transparent !important;
            border: 0 !important;
            transition: transform 0.2s ease !important;
        }
        .mega-col ul li a::before,
        .mega-col ul li a::after {
            content: none !important;
            display: none !important;
        }
        .mega-col ul li a:hover,
        .mega-col a:hover {
            background: transparent !important;
            transform: translateX(4px) !important;
        }
        /* Description grise sous chaque titre de lien, injectée via
           l'attribut data-desc porté par le <a> (voir HTML). */
        .mega-col ul li a[data-desc]::after {
            content: attr(data-desc) !important;
            display: block !important;
            font-size: 0.78rem !important;
            font-weight: 400 !important;
            color: rgba(255,255,255,0.45) !important;
            -webkit-text-fill-color: rgba(255,255,255,0.45) !important;
            margin-top: 0.2rem !important;
        }
        /* ---- Bouton d'appel à l'action : orange plein, bien
               visible, aligné à gauche comme le reste des liens. ---- */
        .mega-col .btn-ridan {
            display: inline-block !important;
            text-align: center !important;
            margin-top: 1.4rem !important;
            margin-right: auto !important;
            padding: 0.55rem 1.1rem !important;
            font-size: 0.78rem !important;
            font-weight: 600 !important;
            letter-spacing: 0.01em !important;
            text-transform: none !important;
            min-width: 0 !important;
            width: fit-content !important;
            max-width: max-content !important;
            border-radius: 999px !important;
            background: #ff4d1c !important;
            border: 0 !important;
            box-shadow: 0 4px 14px -4px rgba(255,77,28,0.5) !important;
            color: #ffffff !important;
            -webkit-text-fill-color: #ffffff !important;
        }
        .mega-col .btn-ridan:hover {
            background: #ff6a3d !important;
            color: #ffffff !important;
            -webkit-text-fill-color: #ffffff !important;
        }
        .mega-overlay {
            position: fixed !important;
            inset: 0 !important;
            background: rgba(0,0,0,0.6) !important;
            opacity: 0 !important;
            visibility: hidden !important;
            pointer-events: none !important;
            transition: opacity 0.25s ease, visibility 0s linear 0.25s !important;
            z-index: 999998 !important;
        }
        .mega-overlay.active {
            opacity: 1 !important;
            visibility: visible !important;
            pointer-events: auto !important;
            transition: opacity 0.25s ease !important;
        }
        .mega-dropdown::-webkit-scrollbar {
            width: 6px;
        }
        .mega-dropdown::-webkit-scrollbar-thumb {
            background: rgba(255,255,255,0.15);
            border-radius: 3px;
        }
    }

/* --- Bloc style #3 (extrait de header.php) --- */

html.high-contrast *:not(img):not(svg):not(picture):not(video):not(.lx-card__media):not(.lx-card__media-overlay) {
        background-color: #0f0f0f !important;
        -webkit-background-clip: initial !important;
        background-clip: initial !important;
        -webkit-text-fill-color: #ffff00 !important;
        color: #ffff00 !important;
    }
    html.high-contrast img,
    html.high-contrast svg,
    html.high-contrast picture,
    html.high-contrast video {
        background: transparent !important;
        opacity: 1 !important;
    }
    html.high-contrast .lx-card__media,
    html.high-contrast .lx-card__media-overlay {
        background-color: transparent !important;
    }

/* Classes utilitaires (remplacent les anciens style="" inline) */
.lx-mt-sm { margin-top: 0.6rem; }
.lx-mr-auto { margin-right: auto; }
.lx-hidden { display: none; }