/* ===================================================
   1. FOND DE PAGE ET TYPOGRAPHIE GENERALES
   =================================================== */

body {
    background-color: #f4f6f8 !important;
    color: #2c3e50 !important;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
}

/* ===================================================
   2. BANDEAU D'EN-TÊTE AVEC LÉMURIEN (HÉBERGÉ EN LOCAL)
   =================================================== */

#header, .header {
    background: linear-gradient(rgba(15, 32, 67, 0.55), rgba(15, 32, 67, 0.55)), 
                url('../images/lemurien.jpg') center 30%/cover no-repeat !important;
    color: #ffffff !important;
    padding: 3.5rem 1rem !important;
    text-align: center !important;
    border-bottom: 4px solid #0284c7 !important;
}

#header a, .header a,
#header .nom-site, .header .nom-site {
    color: #ffffff !important;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.8) !important;
    text-decoration: none !important;
}

#header .slogan, .header .slogan {
    color: #e0f2fe !important;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8) !important;
    font-style: italic !important;
}

/* ===================================================
   3. STRUCTURE DU MENU PRINCIPAL
   =================================================== */

.menu-principal {
    background-color: #0f172a !important;
    border-bottom: 3px solid #0284c7 !important;
}

.dropdown-menu {
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
    display: flex !important;
    justify-content: center !important;
    flex-wrap: wrap !important;
}

.dropdown-menu > li {
    position: relative !important;
}

.dropdown-menu > li > a {
    display: block !important;
    padding: 0.9rem 1.2rem !important;
    color: #ffffff !important;
    font-weight: bold !important;
    text-decoration: none !important;
}

.dropdown-menu > li:hover > a,
.dropdown-menu > li.on > a {
    background-color: #0284c7 !important;
}

/* ===================================================
   4. HIÉRARCHIE VISUELLE DU DÉROULÉ (SUB-MENU)
   =================================================== */

.sub-menu {
    display: none !important;
    position: absolute !important;
    top: 100% !important;
    left: 0 !important;
    background-color: #0f172a !important;
    width: 320px !important;
    list-style: none !important;
    margin: 0 !important;
    padding: 0.5rem 0 !important;
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.5) !important;
    z-index: 9999 !important;
    max-height: 82vh !important;
    overflow-y: auto !important;
    border: 1px solid #1e293b !important;
}

.dropdown-menu li:hover > .sub-menu {
    display: block !important;
}

.sub-menu ul, .sub-sub-menu {
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

.sub-menu a {
    text-decoration: none !important;
    transition: all 0.15s ease-in-out !important;
}

/* NIVEAU 1 : Les Classes */
.titre-sous-rub.depth-1,
.sub-menu .titre-sous-rub.depth-1 {
    display: block !important;
    background-color: #1e293b !important;
    color: #38bdf8 !important;
    font-weight: 800 !important;
    font-size: 0.95rem !important;
    padding: 0.7rem 1.2rem !important;
    border-left: 4px solid #0284c7 !important;
    border-top: 1px solid #334155 !important;
    margin-top: 0.4rem !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
}

/* NIVEAU 2 : Les Parties / Thèmes */
.titre-sous-rub.depth-2,
.sub-menu .titre-sous-rub.depth-2 {
    display: block !important;
    background-color: #0f172a !important;
    color: #fbbf24 !important;
    font-weight: 700 !important;
    font-size: 0.88rem !important;
    padding: 0.5rem 1.2rem 0.5rem 1.8rem !important;
    border-bottom: 1px dashed #1e293b !important;
}

/* ARTICLES DANS LE MENU */
.niveau-article a,
.sub-menu .niveau-article a {
    display: block !important;
    color: #cbd5e1 !important;
    font-size: 0.85rem !important;
    padding: 0.4rem 1.2rem 0.4rem 2.4rem !important;
}

.sub-menu a:hover {
    background-color: #0284c7 !important;
    color: #ffffff !important;
}

/* ===================================================
   5. COULEUR BLEUE POUR LES TITRES D'ARTICLES
   =================================================== */

/* Remplace le magenta fuchsia par le même bleu que la bannière et du trait (#0284c7) */
.page_sommaire .main h2,
.page_sommaire .main h2 a,
.page_sommaire .main h3,
.page_sommaire .main h3 a,
.page_sommaire .main .entry-title,
.page_sommaire .main .entry-title a,
.main h2.h2-title,
.main h2.h2-title a {
    color: #0284c7 !important;
    text-decoration: none !important;
}

.page_sommaire .main h2 a:hover,
.page_sommaire .main h3 a:hover {
    color: #0369a1 !important; /* Bleu un peu plus foncé au survol */
    text-decoration: underline !important;
}

/* ===================================================
   6. TRAIT VERTICAL BLEU SEPARATEUR DE FORUM
   =================================================== */

.page_sommaire .aside,
.page_sommaire .navigation,
.comments,
.forum,
#forum,
.box.comments {
    border-left: 3.5px solid #0284c7 !important;
    padding-left: 1.2rem !important;
}

/* ===================================================
   7. MASQUAGE DES MENUS SECONDAIRES LATÉRAUX
   =================================================== */

.aside .menu-rubriques,
.aside .rubriques,
.navigation .menu-rubriques,
.aside .nav {
    display: none !important;
}

/* ===================================================
   8. ALIGNEMENT ET REDUCTION DU LOGO DANS LE MENU
   =================================================== */


/* Masquer tout logo restant dans le bandeau d'en-tête */
#header .logo, .header .logo, #header img, .header .spip_logo {
    display: none !important;
}

/* Alignement flexbox pour pousser le logo tout à droite */
.menu-container {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    width: 100% !important;
    padding: 0 1rem !important;
}

.dropdown-menu {
    margin-right: auto !important; /* Pousse les liens vers la gauche */
}

/* Réduction et style du logo à droite du menu */
.logo-nav {
    display: flex !important;
    align-items: center !important;
    margin-left: 1rem !important;
}

.logo-nav img {
    height: 32px !important; /* Taille très discrète ajustée à la barre noire */
    width: auto !important;
    border-radius: 4px !important;
}
/* ===================================================
  9. MASQUAGE DU NOM DU SITE DANS L'EN-TÊTE
   =================================================== */

#header .nom-site,
#header .nom-site-spip,
#header #nom_site_spip,
.header .nom-site,
.header h1.nom-site {
    display: none !important;
}