/* ==========================================================================
   1. IMPORTATION DES POLICES
   ========================================================================== */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: normal;
  src: url('/clubdesk/webpage/webfonts/roboto-v20-latin_latin-ext-regular.woff2') format('woff2');
}

@font-face {
  font-family: 'Oswald';
  font-style: normal;
  font-weight: 700;
  src: url('/clubdesk/webpage/webfonts/oswald-v26-latin_latin-ext-regular.woff2') format('woff2');
}

/* ==========================================================================
   2. STYLE GÉNÉRAL SOMBRE
   ========================================================================== */
body {
    position: relative;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    margin: 0;
    background-color: #2b2b2b;
    color: #ffffff;
    font-family: 'Roboto', sans-serif;
}

/* ==========================================================================
   3. BARRE DE NAVIGATION SUPÉRIEURE
   ========================================================================== */
.cd-navigation-bar-container {
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 30000;
    background-color: rgba(43, 43, 43, 0.95);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.cd-navigation-bar-content {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    width: 100% !important;
    padding: 15px 30px !important;
    box-sizing: border-box !important;
}

.cd-filler {
    flex-grow: 1 !important;
}

a.cd-club-name {
    font-family: 'Oswald', sans-serif;
    font-size: 26px;
    font-weight: 700;
    color: #ffffff !important;
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.cd-megamenu-button,
#custom-menu-toggle {
    margin-left: auto !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    color: #ffffff !important;
    font-size: 22px;
    cursor: pointer;
    text-decoration: none;
}

/* ==========================================================================
   4. HERO HEADER (IMAGE DE FOND)
   ========================================================================== */

/* Hero Header ajusté sans grand espace */
.hero-header {
    height: auto;
    min-height: 0;
    padding-top: 80px;    /* Espace juste suffisant sous la barre fixe */
    padding-bottom: 20px; /* Espace sous le titre */
    background-image: url('Page d\'accueil.png');
    background-size: cover;
    background-position: center;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    margin-top: 0;        /* Supprime le décalage de 60px */
}

.hero-header::after {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: linear-gradient(180deg, rgba(0,0,0,0.2) 0%, rgba(43,43,43,0.8) 100%);
}

.hero-content {
    position: relative;
    z-index: 2;
    padding-bottom: 40px;
    text-align: center;
}

.hero-content h1 {
    font-family: 'Oswald', sans-serif;
    font-size: clamp(2.5rem, 6vw, 5rem);
    font-weight: 700;
    color: #ffffff !important;
    margin: 0;
    letter-spacing: 2px;
    text-shadow: 0 4px 12px rgba(0,0,0,0.6);
}

/* ==========================================================================
   5. DISPOSITION PRINCIPALE ET DISPOSITION EN COLONNES
   ========================================================================== */
.main {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}

.columns-wrapper {
    display: flex;
    flex-direction: row;
    max-width: 1400px;
    width: 100%;
    margin: 0 auto;
    padding: 40px 20px;
    box-sizing: border-box;
    flex-grow: 1;
}

/* Sidebar de navigation gauche */
.sidebar-navigation {
    width: 260px;
    flex-shrink: 0;
    padding-right: 40px;
    border-right: 1px solid rgba(255, 255, 255, 0.1);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.sidebar-menu ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.sidebar-menu li {
    margin-bottom: 16px;
}

.sidebar-menu a.nav-link {
    color: #cccccc !important;
    text-decoration: none;
    font-size: 18px;
    font-weight: 400;
    transition: color 0.2s ease;
}

.sidebar-menu a.nav-link:hover,
.sidebar-menu a.nav-link.active {
    color: #ffffff !important;
    font-weight: 700;
}

.sidebar-footer {
    font-size: 13px;
    color: #888888;
    margin-top: 40px;
}

/* Zone de contenu */
.content-wrapper {
    flex-grow: 1;
    padding-left: 40px;
    min-height: 400px;
}

/* ==========================================================================
   6. FOOTER ET BOUTONS
   ========================================================================== */
footer {
    background-color: #1e1e1e;
    padding: 20px;
    text-align: center;
    font-size: 14px;
    color: #888888;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
}

.cd-totop-button {
    position: fixed;
    right: 20px;
    bottom: 20px;
    width: 45px;
    height: 45px;
    background-color: rgba(255, 255, 255, 0.15);
    color: #ffffff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 99;
    transition: background-color 0.3s;
}

.cd-totop-button:hover {
    background-color: rgba(255, 255, 255, 0.3);
}

/* ==========================================================================
   7. ADAPTATION MOBILE
   ========================================================================== */
@media (max-width: 850px) {
    .columns-wrapper {
        flex-direction: column;
    }

    .sidebar-navigation {
        width: 100%;
        border-right: none;
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
        padding-right: 0;
        padding-bottom: 20px;
        margin-bottom: 30px;
    }

    .content-wrapper {
        padding-left: 0;
    }
}

/* ==========================================================================
   8. CORRECTION DE LA COULEUR DES LIENS DU MENU ET DU CONTENU
   ========================================================================== */

/* Forcer la couleur blanche sur tous les types et états de liens */
a, 
a:link, 
a:visited,
.cd-menu a,
.cd-menu a:link,
.cd-menu a:visited,
.cd-megamenu a,
.cd-megamenu a:link,
.cd-megamenu a:visited,
.content-wrapper a,
.content-wrapper a:link,
.content-wrapper a:visited {
    color: #ffffff !important;
}

/* Effet au survol (hover) et au focus */
a:hover,
a:focus,
.cd-menu a:hover,
.cd-megamenu a:hover,
.content-wrapper a:hover {
    color: #cccccc !important;
}

/* Puces des listes et texte brut des listes en blanc */
.cd-menu, 
.cd-menu ul, 
.cd-menu li,
.cd-megamenu, 
.cd-megamenu ul, 
.cd-megamenu li,
.content-wrapper ul,
.content-wrapper li {
    color: #ffffff !important;
}

/* ==========================================================================
   9. GESTION DU MENU DÉROULANT ET DES LIENS
   ========================================================================== */

/* Conteneur du menu (masqué par défaut) */
.cd-megamenu-container {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    background-color: #1e1e1e !important;
    padding: 20px 30px !important;
    box-sizing: border-box;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5);
    z-index: 30001;
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
}

/* Affichage instantané dès le clic */
.cd-megamenu-container.is-active {
    display: block !important;
}

/* Forcer la visibilité des éléments enfants */
.cd-megamenu-container .cd-megamenu,
.cd-megamenu-container .cd-megamenu-content,
.cd-megamenu-container .cd-menu-level-1 {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    height: auto !important;
}

/* Reset des listes dans le menu déroulant */
.cd-megamenu-container ul {
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

.cd-megamenu-container li {
    margin: 10px 0 !important;
    display: block !important;
}

/* Style et couleur des liens */
.cd-megamenu-container a.cd-menu-item,
.cd-megamenu-container a {
    color: #ffffff !important;
    text-decoration: none !important;
    font-size: 1.1rem !important;
    display: inline-block !important;
    transition: color 0.2s ease;
}

.cd-megamenu-container a:hover {
    color: #cccccc !important;
}

/* Alignement du bouton Menu */
.cd-megamenu-button {
    display: flex;
    align-items: center;
    gap: 8px;
    text-decoration: none;
    color: #ffffff !important;
    font-size: 1rem;
}

.cd-menu-text {
    color: #ffffff !important;
    font-weight: 500;
}

/* ==========================================================================
   10. CORRECTION DE LA COULEUR DES TITRES ET DU TEXTE DU CONTENU
   ========================================================================== */

/* Forcer tout le texte principal et les paragraphes en blanc */
.content-wrapper,
.content-wrapper p,
.content-wrapper div,
.content-wrapper span,
.content-wrapper td,
.content-wrapper th,
.main,
.columns-wrapper {
    color: #ffffff !important;
}

/* Forcer les grands titres (ex: "Art Champéry 2023", "Impressions...") en blanc */
.content-wrapper h1,
.content-wrapper h2,
.content-wrapper h3,
.content-wrapper h4,
.content-wrapper h5,
.content-wrapper h6,
h1, h2, h3, h4, h5, h6 {
    color: #ffffff !important;
    opacity: 1 !important;
}

/* Cibler spécifiquement les styles générés par ClubDesk */
.cd-content-area,
.cd-content-area *,
.cd-text-block,
.cd-text-block * {
    color: #ffffff !important;
}

/* ==========================================================================
   11. MÉGA-MENU GROUPÉ EN COLONNES
   ========================================================================== */

.cd-megamenu-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 30px;
    max-width: 1300px;
    margin: 0 auto;
    padding: 20px 0;
}

.cd-menu-column {
    display: flex;
    flex-direction: column;
}

.cd-menu-title {
    font-family: 'Oswald', sans-serif;
    font-size: 1.25rem;
    color: #ffffff !important;
    text-transform: uppercase;
    letter-spacing: 1px;
    border-bottom: 2px solid rgba(255, 255, 255, 0.2);
    padding-bottom: 8px;
    margin-bottom: 12px;
}

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

.cd-menu-column li {
    margin: 6px 0 !important;
}

.cd-menu-subhead {
    font-size: 0.9rem;
    font-weight: bold;
    color: #aaaaaa !important;
    margin-top: 12px !important;
    margin-bottom: 4px !important;
    text-transform: uppercase;
}

.cd-menu-column a {
    color: #dddddd !important;
    text-decoration: none !important;
    font-size: 0.95rem !important;
    transition: color 0.2s ease, transform 0.2s ease;
    display: inline-block !important;
}

.cd-menu-column a:hover {
    color: #ffffff !important;
    transform: translateX(4px);
}

/* Adaptabilité pour écran mobile */
@media (max-width: 768px) {
    .cd-megamenu-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }
}

/* ==========================================================================
   12. FORCE L'OUVERTURE DU MÉGA-MENU
   ========================================================================== */

/* Masqué par défaut */
#megamenu {
    display: none !important;
}

/* Affiché quand la classe .is-open est présente */
#megamenu.is-open {
    display: block !important;
    position: fixed !important;
    top: 60px !important;
    left: 0 !important;
    width: 100% !important;
    max-height: calc(100vh - 60px) !important;
    overflow-y: auto !important;
    background-color: #1e1e1e !important;
    z-index: 999999 !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.8) !important;
    padding: 30px !important;
    box-sizing: border-box !important;
}

/* ==========================================================================
   ANNULATION STRICTE DU BLOCAGE DE SCROLL
   ========================================================================== */
/* Correction spécifique du scroll */
.content-wrapper {
    overflow: visible !important;
}

#megamenu:not(.is-open) {
    display: none !important;
}

#megamenu.is-open {
    display: block !important;
}