/*
Theme Name: Astra Retro Personnalisé
Theme URI: https://wpastra.com/
Template: astra
Author: Votre Nom (ou "Culture Rétro")
Author URI: (Votre URL de site ou vide)
Description: Thème enfant personnalisé pour l'univers du rétro, basé sur Astra.
Tags: custom-menu,custom-logo,entertainment,one-column,two-columns,left-sidebar,e-commerce,right-sidebar,custom-colors,editor-style,featured-images,full-width-template,microformats,post-formats,rtl-language-support,theme-options,threaded-comments,translation-ready,blog
Version: 1.0.4
Updated: 2025-06-30 06:25:00
*/

/* Votre CSS rétro ira ici */
body {
    background-color: #000022; /* Fond sombre général pour le corps */
    color: #FFFFFF; /* Couleur de texte par défaut */
}

/* Ciblage de la zone principale de l'en-tête d'Astra */
.ast-primary-header-bar {
    background-color: #000044;
    font-family: 'Arial', sans-serif; /* À remplacer plus tard par une police rétro */
    padding: 10px 0;
    text-align: center;
}

/* Ciblage du menu principal d'Astra (UL) */
.main-navigation ul.ast-nav-menu {
    list-style: none;
    margin: 0;
    padding: 0;
    display: inline-flex; /* Pour que les éléments soient côte à côte */
    gap: 15px; /* Espace entre les éléments du menu principal */
}

/* Ciblage des éléments de liste du menu principal (LI) */
.main-navigation ul.ast-nav-menu li {
    position: relative; /* Nécessaire pour le positionnement des sous-menus */
}

/* Ciblage des liens du menu principal (A) */
.main-navigation ul.ast-nav-menu > li > a {
    color: lime;
    padding: 10px 15px;
    text-decoration: none;
    font-weight: bold;
    display: inline-block;
}

/* Effet survol sur les liens du menu principal */
.main-navigation ul.ast-nav-menu li:hover > a {
    background-color: #111166;
}

/* Styles pour les sous-menus (UL des sous-menus) - Astra utilise souvent .sub-menu */
.main-navigation ul.sub-menu {
    display: none; /* Cache les sous-menus par défaut */
    position: absolute;
    top: 100%; /* Positionne le sous-menu juste en dessous de l'élément parent */
    left: 0;   /* Alignement à gauche de son parent LI */
    background-color: #111144;
    list-style: none;
    padding: 0;
    margin: 0;
    min-width: 200px; /* Largeur minimale des sous-menus */
    max-width: 280px; /* Largeur maximale pour éviter des sous-menus trop larges */
    white-space: normal; /* Permet au texte de passer à la ligne si besoin */
    text-align: left;
    z-index: 1000; /* Assure que le sous-menu apparaît au-dessus d'autres éléments */
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); /* Légère ombre */
}

/* Styles pour les éléments de liste des sous-menus (LI) */
.main-navigation ul.sub-menu li {
    position: relative; /* Important pour les sous-sous-menus */
}

/* Styles pour les liens des sous-menus (A) */
.main-navigation ul.sub-menu li a {
    display: block;
    padding: 10px 15px; /* Remplissage interne pour le texte des éléments */
    color: white;
    text-decoration: none;
    font-size: 14px; /* Ajustez si le texte est trop grand/petit */
    line-height: 1.2; /* Espacement entre les lignes du texte */
}

/* Effet survol sur les liens des sous-menus */
.main-navigation ul.sub-menu li a:hover {
    background-color: #222288;
}

/* Afficher les sous-menus au survol */
/* Ceci cible le sous-menu du LI principal ET les sous-sous-menus du LI d'un sous-menu */
.main-navigation ul.ast-nav-menu li:hover > ul.sub-menu,
.main-navigation ul.sub-menu li:hover > ul.sub-menu {
    display: block;
    /* Pour les sous-sous-menus, les faire apparaître à côté (cascade latérale) */
    top: 0;
    left: 100%;
}

/* Fix pour le positionnement des sous-sous-menus si le parent direct n'est pas assez large */
.main-navigation ul.sub-menu li:hover > ul.sub-menu {
    left: 100%; /* S'assure que les sous-sous-menus s'ouvrent à droite */
    margin-left: 0; /* Réinitialise toute marge potentielle */
}


/* Ajustements pour le conteneur du site pour correspondre au fond sombre */
.site-content {
    background-color: #000033; /* Couleur de fond pour le contenu principal */
    padding: 20px;
    margin-top: 20px;
    border: 1px solid #00FFFF; /* Bordure néon pour l'effet rétro */
    box-shadow: 0 0 10px #00FFFF;
}

/* Styles pour les titres */
h1, h2, h3, h4, h5, h6 {
    color: #00FFFF; /* Couleur néon pour les titres */
}

/* Pour le copyright et le footer */
#colophon {
    background-color: #000022; /* Même fond que le corps */
    color: #AAAAAA;
    padding: 20px 0;
    text-align: center;
}

#colophon a {
    color: #00FFFF; /* Liens du footer */
}