/* ============================================================
   1. STRUCTURE DU HEADER ET LOGO
   ============================================================ */

/* Force le fond noir partout (Pages normales et Page Freelancer) */
header, .site-header, .ast-primary-header-bar, .main-header-bar, .page-id-38 #masthead {
    background-color: #000000 !important;
    background: #000000 !important;
}

/* Taille du Logo */
.site-logo img, .custom-logo img, .ast-site-identity img {
    max-width: 250px !important;
    width: 250px !important;
    height: auto !important;
}

/* Hauteur du header pour les 2 lignes de menu */
header, .site-header, .ast-primary-header-bar {
    height: auto !important;
    min-height: 110px !important;
    padding: 15px 0 !important;
    overflow: visible !important;
}

/* ============================================================
   2. MENU PRINCIPAL (ÉTATS : NORMAL, SURVOL, ACTIF)
   ============================================================ */

/* Menu sur deux lignes */
.main-navigation ul, .ast-primary-menu {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
}

/* Couleur des onglets par défaut (Blanc) */
.main-navigation a, .ast-primary-menu a, .ast-builder-menu-1 .menu-item a {
    color: #ffffff !important;
}

/* Couleur au SURVOL (Bleu Logo #007bff) */
.main-navigation a:hover, 
.ast-primary-menu a:hover, 
.ast-builder-menu-1 .menu-item a:hover {
    color: #007bff !important;
    background-color: transparent !important;
}

/* Couleur de l'onglet PARENT (ex: Dessin, peinture) quand on est dans un sous-menu */
.main-header-menu li.current-menu-ancestor > a,
.main-header-menu li.current-menu-parent > a {
    color: #ffffff !important;
    background-color: transparent !important;
}

/* ============================================================
   3. SOUS-MENUS (ÉTATS : NORMAL, SURVOL, ACTIF)
   ============================================================ */

/* Fond du rectangle déroulant */
.ast-builder-menu-1 .main-header-menu .sub-menu,
.sub-menu {
    background-color: #000000 !important;
    border: 1px solid #222 !important;
    box-shadow: 0px 5px 15px rgba(0,0,0,0.8) !important;
}

/* Liens du sous-menu par défaut (Blanc) */
.sub-menu li a {
    color: #ffffff !important;
    background-color: #000000 !important;
    display: block !important;
    padding: 12px 20px !important;
}

/* LIEN ACTIF du sous-menu (ex: Vidéos quand on est dessus) */
/* On force le blanc et un fond gris foncé pour qu'il soit visible */
.ast-builder-menu-1 .sub-menu li.current-menu-item a,
.main-header-menu .sub-menu li.current-menu-item a {
    color: #ffffff !important;
    background-color: #222222 !important;
    opacity: 1 !important;
}

/* Survol des liens du sous-menu (Bleu) */
.sub-menu li a:hover {
    color: #007bff !important;
    background-color: #111111 !important;
}

/* ============================================================
   4. ANIMATION LUMIÈRE
   ============================================================ */
.ast-primary-header-bar::before {
    content: "";
    position: absolute;
    top: 0; left: -150%;
    width: 250px; height: 100%;
    background: linear-gradient(to right, transparent, rgba(255,255,255,0.3), transparent);
    transform: skewX(-25deg);
    animation: shine 6s infinite linear;
    pointer-events: none;
}
@keyframes shine {
    0% { left: -150%; }
    100% { left: 150%; }
}/* ============================================================
   1. STRUCTURE DU HEADER ET LOGO
   ============================================================ */

/* Fond noir forcé sur toutes les pages (y compris Freelancer) */
header, .site-header, .ast-primary-header-bar, .main-header-bar, .page-id-38 #masthead {
    background-color: #000000 !important;
    background: #000000 !important;
}

/* Taille du Logo */
.site-logo img, .custom-logo img, .ast-site-identity img {
    max-width: 250px !important;
    width: 250px !important;
    height: auto !important;
}

/* Hauteur du header pour accueillir le menu sur 2 lignes */
header, .site-header, .ast-primary-header-bar {
    height: auto !important;
    min-height: 110px !important;
    padding: 15px 0 !important;
    overflow: visible !important; /* Important pour voir le sous-menu */
}

/* ============================================================
   2. MENU PRINCIPAL (LIGNES ET COULEURS)
   ============================================================ */

/* Force le menu sur deux lignes si nécessaire */
.main-navigation ul, .ast-primary-menu {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
}

/* Couleur des onglets par défaut (Blanc) */
.main-navigation a, .ast-primary-menu a {
    color: #ffffff !important;
}

/* Couleur au survol (Bleu Logo) */
.main-navigation a:hover, .ast-primary-menu a:hover {
    color: #007bff !important;
}

/* Onglet de la page active (Blanc avec trait bleu) */
.current-menu-item > a, .current_page_item > a {
    color: #ffffff !important;
    position: relative;
}

.current-menu-item > a::after {
    content: "";
    position: absolute;
    bottom: -5px;
    left: 0;
    width: 100%;
    height: 2px;
    background-color: #007bff;
}

/* ============================================================
   3. SOUS-MENUS (FLIP BOOK, VIDEO, ETC.) - LA CORRECTION
   ============================================================ */

/* Force le FOND NOIR du bloc déroulant */
.ast-builder-menu-1 .main-header-menu .sub-menu,
.main-header-menu .sub-menu,
.sub-menu {
    background-color: #000000 !important;
    background: #000000 !important;
    box-shadow: 0px 5px 15px rgba(0,0,0,0.8) !important;
    border: 1px solid #222 !important;
}

/* Force le TEXTE BLANC sur fond noir pour les liens du sous-menu */
.main-header-menu .sub-menu li a,
.ast-builder-menu-1 .sub-menu li a {
    color: #ffffff !important;
    background-color: #000000 !important;
    display: block !important;
    padding: 12px 20px !important;
    width: 100% !important;
    text-shadow: none !important;
}

/* Effet au survol des sous-menus (Fond Bleu) */
.main-header-menu .sub-menu li a:hover {
    background-color: #007bff !important;
    color: #ffffff !important;
}

/* ============================================================
   4. ANIMATION LUMIÈRE (OPTIONNEL)
   ============================================================ */
.ast-primary-header-bar::before {
    content: "";
    position: absolute;
    top: 0;
    left: -150%;
    width: 250px;
    height: 100%;
    background: linear-gradient(to right, transparent, rgba(255,255,255,0.3), transparent);
    transform: skewX(-25deg);
    animation: shine 6s infinite linear;
    pointer-events: none;
}

@keyframes shine {
    0% { left: -150%; }
    100% { left: 150%; }
	
	/* ============================================================
   CORRECTION FINALE : COULEUR AU SURVOL (HOVER)
   ============================================================ */

/* Force le texte en bleu au survol pour tous les menus */
.main-navigation a:hover, 
.ast-primary-menu a:hover, 
.ast-builder-menu-1 .menu-item a:hover,
.sub-menu li a:hover {
    color: #007bff !important; /* Bleu royal de votre logo */
    background-color: transparent !important; /* Évite qu'un fond gris n'apparaisse */
}

/* Force aussi la couleur pour les sous-menus spécifiques (Flip Book, Video) */
.main-header-menu .sub-menu li a:hover {
    color: #007bff !important;
    background-color: #111111 !important; /* Un noir légèrement plus clair pour le relief */
}
}
/* ============================================================
   SYNCHRONISATION COULEUR BLEU LOGO (SURVOL ET ACTIF)
   ============================================================ */

/* 1. On définit la couleur Bleu Royal du logo */
:root {
    --bleu-creagif: #007bff; 
}

/* 2. Application au survol sur tous les menus (Principal et Sous-menus) */
.main-navigation a:hover, 
.ast-primary-menu a:hover, 
.ast-builder-menu-1 .menu-item a:hover,
.sub-menu li a:hover,
.main-header-menu .sub-menu li a:hover {
    color: var(--bleu-creagif) !important;
    transition: color 0.3s ease !important; /* Animation fluide */
}

/* 3. On change aussi la barre sous l'onglet actif pour qu'elle soit de ce bleu */
.current-menu-item > a::after, 
.current_page_item > a::after {
    background-color: var(--bleu-creagif) !important;
}

/* 4. Pour les sous-menus (Flip Book, Video), on s'assure que le texte passe au bleu au survol */
.main-header-menu .sub-menu li a:hover {
    color: var(--bleu-creagif) !important;
    background-color: rgba(255, 255, 255, 0.05) !important; /* Très léger éclaircissement du fond */
}
/* ============================================================
   FORCE ABSOLUE : BLEU LOGO AU SURVOL (SÉCURITÉ)
   ============================================================ */

/* On cible l'état de survol (hover) sur tous les sélecteurs possibles d'Astra */
html body #masthead a:hover,
html body .site-header a:hover,
html body .ast-builder-menu-1 .menu-item a:hover,
html body .main-navigation a:hover,
html body .sub-menu li a:hover {
    color: #007bff !important; /* Bleu Royal du logo */
    fill: #007bff !important;
    background-color: transparent !important;
}

/* On s'assure que même si le lien est "visité", il reste bleu au survol */
html body #masthead a:visited:hover {
    color: #007bff !important;
}

/* Correction spécifique pour les sous-menus de la page Freelancer */
.page-id-38 .sub-menu li a:hover {
    color: #007bff !important;
    background-color: #111111 !important; /* Fond gris très sombre pour détacher le bleu */
}
/* ============================================================
   FIX : COULEUR DU PARENT (DESSIN, PEINTURE) QUAND UNE SOUS-PAGE EST ACTIVE
   ============================================================ */

/* Force le parent à rester BLANC quand on est sur une de ses sous-pages */
.main-navigation .current-menu-ancestor > a,
.main-navigation .current-menu-parent > a,
.ast-builder-menu-1 .current-menu-ancestor > a {
    color: #ffffff !important;
}

/* Force le parent à passer en BLEU au survol, même si on est sur une sous-page */
.main-navigation .current-menu-ancestor > a:hover,
.ast-builder-menu-1 .current-menu-ancestor > a:hover {
    color: #007bff !important;
}

/* On s'assure qu'aucun fond noir ne vient masquer le texte du parent */
.main-navigation li.current-menu-ancestor {
    background-color: transparent !important;
}
/* ============================================================
   FIX : LIEN DU SOUS-MENU SÉLECTIONNÉ (EX: VIDÉO)
   ============================================================ */

/* 1. Force le lien du sous-menu à rester blanc lorsqu'on est sur sa page */
.main-navigation ul.sub-menu li[class*="current-menu-"] > a,
.ast-builder-menu-1 .sub-menu li[class*="current-menu-"] > a {
    color: #ffffff !important;
    background-color: #111111 !important; /* Un gris très sombre pour marquer la sélection */
}

/* 2. Optionnel : Si vous voulez que le lien sélectionné soit Bleu comme le logo */
/*
.main-navigation ul.sub-menu li[class*="current-menu-"] > a,
.ast-builder-menu-1 .sub-menu li[class*="current-menu-"] > a {
    color: #007bff !important;
}
*/
/* 3. On s'assure que le survol fonctionne toujours même si la page est active */
.main-navigation ul.sub-menu li[class*="current-menu-"] > a:hover {
    color: #007bff !important;
    background-color: #000000 !important;
}
/* LIENS SOUS-MENU – toujours lisibles */
.main-navigation a {
    color: #333333 !important;  /* Couleur texte par défaut */
}

/* Survol */
.main-navigation li:hover > a,
.main-navigation a:hover,
.main-navigation a:focus {
    color: #000000 !important;  /* Couleur au survol */
}

/* Lien actif / page courante */
.main-navigation .current-menu-item > a,
.main-navigation .current-page-ancestor > a,
.main-navigation .current-menu-parent > a {
    color: #000000 !important;  /* Couleur de l’élément sélectionné */
}

/* Si le fond est clair, blanc ou pastel */
.main-navigation ul li a {
    color: #222 !important;
}

/* Correction du sous-menu blanc */
.main-navigation ul li a {
    background: #fff !important;  /* fond clair */
    color: #222 !important;       /* texte lisible */
}