/* ================================
   VARIABLES DE STYLE HARMONYE
================================ */
:root {
    --harmonye-bg: #fafafa;
    --harmonye-primary: #c0392b;
    --harmonye-secondary: #7f8c8d;
    --harmonye-dark: #2c3e50;
    --harmonye-light: #ffffff;
    --harmonye-border: #e0e0e0;

    --header-height: 120px;
    --container-width: 1100px;
    --radius: 8px;
    --shadow: 0 4px 12px rgba(0,0,0,0.08);
}

/* ================================
   RESET SIMPLE
================================ */
body {
    margin: 0;
    padding: 0;
    font-family: "Segoe UI", Roboto, sans-serif;
    background: var(--harmonye-bg);
    color: var(--harmonye-dark);
}

/* ================================
   HEADER BOMBÉ
================================ */
#header-bombe {
    background: var(--harmonye-light);
    height: var(--header-height);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 40px;
    box-shadow: var(--shadow);
    border-bottom: 3px solid var(--harmonye-primary);
}

.logo-container img.logo {
    height: 70px;
    width: auto;
}

/* ================================
   MENU PRINCIPAL
================================ */
#main-menu {
    display: flex;
    align-items: center;
}

#main-menu ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    gap: 25px;
}

#main-menu li a {
    text-decoration: none;
    color: var(--harmonye-dark);
    font-weight: 600;
    padding: 8px 12px;
    border-radius: var(--radius);
    transition: 0.2s;
}

#main-menu li a:hover {
    background: var(--harmonye-primary);
    color: var(--harmonye-light);
}

/* ================================
   CONTAINER PRINCIPAL
================================ */
.container {
    width: var(--container-width);
    max-width: 95%;
    margin: 40px auto;
}

/* Fil d’Ariane */
#breadcrumb {
    margin-bottom: 20px;
}

/* ================================
   ZONES TOP / CONTENT-TOP / CONTENT-BOTTOM
================================ */
#top,
#content-top,
#content-bottom {
    margin-bottom: 30px;
}

/* ================================
   SIDEBAR
================================ */
#sidebar {
    width: var(--container-width);
    max-width: 95%;
    margin: 40px auto;
    padding: 20px;
    background: var(--harmonye-light);
    border: 1px solid var(--harmonye-border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
}

/* ================================
   FOOTER
================================ */
#footer {
    background: var(--harmonye-dark);
    color: var(--harmonye-light);
    padding: 20px 0;
    text-align: center;
    margin-top: 60px;
}

#footer .container {
    font-size: 14px;
}

/* ================================
   RESPONSIVE
================================ */
@media (max-width: 768px) {

    #header-bombe {
        flex-direction: column;
        height: auto;
        padding: 20px;
        text-align: center;
    }

    #main-menu ul {
        flex-direction: column;
        gap: 10px;
    }

    #sidebar {
        margin-top: 20px;
    }
}
/* ================================
   HEADER BOMBÉ PROFOND
================================ */
#header-bombe {
    background: linear-gradient(
        to bottom,
        #ffffff 0%,
        #f7f7f7 20%,
        #e0e0e0 50%,
        #d0d0d0 70%,
        #f2f2f2 100%
    );
    padding: 25px 40px;
    border-bottom: 4px solid var(--harmonye-primary);

    /* Bombé très prononcé */
    border-radius: 0 0 80px 80px;

    /* Ombre externe forte */
    box-shadow:
        0 8px 20px rgba(0,0,0,0.25),

        /* Ombres internes pour le galbe */
        inset 0 10px 20px rgba(255,255,255,0.7),
        inset 0 -10px 20px rgba(0,0,0,0.15);

    display: flex;
    align-items: center;
    justify-content: space-between;
}
/* ================================
   BOMBÉ HARMONYE POUR BLOCS IMPORTANTS
================================ */

/* Modules (sidebar, top, content-top, content-bottom) */
.module,
#sidebar,
#top,
#content-top,
#content-bottom {
    background: linear-gradient(
        to bottom,
        #ffffff 0%,
        #f7f7f7 30%,
        #e5e5e5 70%,
        #f2f2f2 100%
    );
    border-radius: 25px;
    padding: 25px;
    margin-bottom: 30px;

    box-shadow:
        0 6px 15px rgba(0,0,0,0.15),
        inset 0 8px 16px rgba(255,255,255,0.6),
        inset 0 -8px 16px rgba(0,0,0,0.12);
}

/* Pour éviter que les modules Joomla ajoutent des marges parasites */
.module > *:first-child {
    margin-top: 0;
}
.module > *:last-child {
    margin-bottom: 0;
}
/* Centrer le menu horizontal sous le logo */
.container-nav {
    display: flex;
    justify-content: center;
    align-items: center;
}

.mod-menu {
    text-align: center;
}
/* Espacement entre les items du menu */
.mod-menu li {
    margin: 0 14px;
}
/* Style des liens + hover moderne */
.mod-menu a {
    padding: 6px 10px;
    border-radius: 4px;
    transition: background-color 0.25s ease, color 0.25s ease;
}

.mod-menu a:hover {
    background-color: #eaeaea;
    color: #333;
}
/* Barre de menu sticky sous le logo */
.container-nav {
    position: sticky;
    top: 0;
    z-index: 999;
    background: #ffffff; /* tu peux changer la couleur */
    padding-top: 6px;
    padding-bottom: 6px;
}

/* Empêche le menu de se compresser */
.container-nav .mod-menu {
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Style des liens (optionnel mais recommandé) */
.container-nav .mod-menu a {
    padding: 6px 12px;
    border-radius: 4px;
    transition: background-color 0.25s ease;
}

.container-nav .mod-menu a:hover {
    background-color: #f0f0f0;
}
/* Masquer les métadonnées des articles */
.article-info,
.article-info-term {
    display: none !important;
}
/* Masquer toutes les métadonnées d'un article Cassiopeia */
.com-content-article .com-content-article__info,
.com-content-article .com-content-article__details,
.com-content-article .article-info,
.com-content-article .article-info-term,
.com-content-article__info,
.com-content-article__details {
    display: none !important;
}
/* Masquer le titre automatique de la page (page-title / page-header) */
.page-title,
.page-header h1,
.page-header {
    display: none !important;
}