/* Styles de base de ton prototype HTML */
body {
    /* Nom du fichier : lerno-hearder.css */
    font-family: 'Nunito Sans', sans-serif;
    color: #191919;
}

.lerno-cta {
    background-color: #59F3E5;
    color: #1E1E1E;
    transition: all 0.3s ease;
    box-shadow: 0 4px 14px 0 rgba(89, 243, 229, 0.39);
}
.lerno-cta:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px 0 rgba(89, 243, 229, 0.5);
}

/* Mega Menu Styles */
.mega-menu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    background-color: white;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease;
    border-top: 1px solid #e2e8f0;
    box-shadow: 0 10px 30px -10px rgba(0,0,0,0.1);
}
.group:hover .mega-menu {
    display: block;
    opacity: 1;
    visibility: visible;
}

/* NOUVELLE RÈGLE AJOUTÉE */
.mega-menu .text-lg {
    line-height: normal;
}

.mega-menu-column .category-item {
    display: flex;
    align-items: flex-start; /* pour que la puce se cale bien sur la 1ère ligne */
}

.category-bullet {
    display: inline-block;          /* IMPORTANT : pour que width/height soient appliqués */
    width: 8px;
    height: 8px;
    border-radius: 50%;
    margin-right: 12px;
    margin-top: 6px;                /* petit ajustement vertical */
    flex-shrink: 0;
    background-color: #560CFF;      /* couleur par défaut, écrasée par Elementor si défini */
}

/* Mobile Menu */
.mobile-menu-panel {
    transition: transform 0.3s ease-in-out;
}

.mobile-category-item {
    display: flex;
    align-items: flex-start; /* Aligner au début pour le sous-titre */
    padding: 0.35rem 0;
}

.mobile-category-bullet {
    display: inline-block;          /* IMPORTANT : idem desktop */
    width: 6px;
    height: 6px;
    border-radius: 50%;
    margin-right: 12px;
    margin-top: 8px;                /* Ajuster la position verticale de la puce */
    flex-shrink: 0;
    background-color: #560CFF;      /* couleur par défaut, écrasée par Elementor si défini */
}

/* =============================================== */
/* --- Corrections Conflits Thème/Elementor --- */
/* (Ciblage par widget) */
/* =============================================== */

/* On cible le conteneur unique de notre widget */
.elementor-widget-lerno-header {
    width: 100%;
}

/* 1. Correction du Logo Principal (Header) */
/* Force la classe 'h-5' (1.25rem = 20px) */
.elementor-widget-lerno-header .flex-shrink-0 a img {
    height: 1.25rem !important; /* h-5 */
    width: auto !important;
    max-width: none !important;
}

/* 2. Correction des logos du Mega Menu (LernoLab, etc) */
/* Force la classe 'h-6' (1.5rem = 24px) */
.elementor-widget-lerno-header .mega-menu-column img {
    height: 1.5rem !important;  /* h-6 */
    width: auto !important;
    max-width: none !important; /* Ajouté pour plus de sécurité */
}

/* 3. Correction des images "sillage" (photos Unsplash) */
/* Force la classe 'h-24' (6rem = 96px) */
.elementor-widget-lerno-header .mega-menu-column .relative img {
    width: 100% !important;
    height: 100% !important;        /* l’image prend toute la hauteur du conteneur */
    object-fit: cover !important;   /* et là "couvrir" fait ce que tu attends */
    display: block;
}

/* 4. Correction des logos du Menu Mobile (Accordion) */
/* Force la classe 'h-6' (1.5rem = 24px) */
.elementor-widget-lerno-header .accordion-toggle img {
    height: 1.5rem !important;  /* h-6 */
    width: auto !important;
    max-width: none !important; /* Très important pour contrer "max-width: 100%" */
}

/* 5. Suppression du fond bleu au survol des boutons accordion */
.elementor-widget-lerno-header .accordion-toggle:hover {
    background: none !important;
    background-color: transparent !important;
}

/* =============================================== */
/* --- 6. FORÇAGE OUVERTURE MENU MOBILE (LIVE) --- */
/* =============================================== */

/* Cache le menu par défaut (remplace .hidden) */
#mobile-menu {
    display: none;
}

/* Affiche le fond noir quand la classe est ajoutée */
#mobile-menu.lerno-menu-ouvert {
    display: block !important;
}

/* Cache le panel par défaut (remplace .translate-x-full) */
#mobile-menu-panel {
    transform: translateX(100%);
}

/* Affiche le panel quand la classe est ajoutée */
#mobile-menu-panel.lerno-panel-ouvert {
    transform: translateX(0) !important;
}

/* NOUVEAU: 7. Suppression de l'effet de survol (fond bleu) sur les boutons d'ouverture/fermeture */
.elementor-widget-lerno-header #hamburger-button:hover,
.elementor-widget-lerno-header #close-menu-button:hover {
    background: none !important;
    background-color: transparent !important;
}

/* Correction style barre de recherche header */
.elementor-widget-lerno-header form[role="search"] {
    margin: 0 !important;
    padding: 0 !important;
    background: none !important;
    border: none !important;
}

.elementor-widget-lerno-header form[role="search"] input[type="search"] {
    background-color: #f1f5f9 !important; /* slate-100 */
    border: none !important;
    border-radius: 0.5rem !important;
    outline: none !important;
    box-shadow: none !important;
    padding: 0.5rem 1rem 0.5rem 2.5rem !important;
    width: 100% !important;
    font-family: 'Nunito Sans', sans-serif !important;
}

.elementor-widget-lerno-header form[role="search"] input[type="search"]:focus {
    outline: none !important;
    box-shadow: none !important;
    border: 1px solid #59F3E5 !important;
}