body{
    background: url(/cdv/images/bg) repeat-x #FDFEF6;;
}
h1{
    font-style: italic;
    color: #2b663b;
}


footer{
    background: #85b875;
}
footer a{
    background: #85b875;
    color: rgb(255 255 255);
}

header{
position: relative;
}

#logo{
    float: left;
}
/* Style pour le menu */
.menu-container {
    float: right;
    margin-right: -17px;
    margin-top: 2px;
}
.menu {
    float: left;
    margin: 45px 0 0 0;
}
.menu > li {
    float:left;
    list-style: none;
    position: relative;
}
.menu > li > a {
    background: #85b875;
    color: rgb(255 255 255);
    text-decoration: none;
    padding: 5px 10px;
    font-weight: bold;
    font-size: 1.6em;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    margin: 0 5px;
    opacity: 0.9;
}
.menu > li > a:hover {
    background-color: #2b663b;
    color:#ffffff;
    border-radius: 5px;
}
.submenu {
    display:none;
    position: absolute;
    top: 100%;
    left: 0;
    background-color: #85b875;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
    z-index: 1000;
    min-width: 200px;
    width: 100%;
    padding: 10px;
    opacity: 0.9;
    margin-left: 5px;
}
.submenu li {
    list-style: none;
    border-bottom: 1px solid #ddd;
}
.submenu li:last-child {
    border-bottom: none;
}
.submenu a {
    display: block;
    color: #333;
    text-decoration: none;
    padding: 10px;
}
.submenu a:hover {
    background-color: #f0f0f0;
}
.menu > li:hover .submenu {
    display: block;
}
.calendar-container {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}
.month {
    border-radius: 5px;
    overflow: hidden;
    text-align: center;
}
.month-header {
    background-color: #85B875;
    color: white;
    padding: 3px;
    font-size: 1.2em;
    font-weight: bold;
}
.month-table {
    width: 100%;
    border-collapse: collapse;
}
.month-table th,
.month-table td {
    position:relative;
    border: 1px solid #ddd;
    text-align: center;
    padding: 5px;
}
.month-table .saturday {
    background-color: #f0f8ff;
}
.month-table .sunday {
    background-color: #ffe4e1;
}
.month-table .empty {
    background-color: #f9f9f9;
}
.month-table .faded {
    color: #aaa;
    opacity: 0.5;
}
.month-table .highlight {
    background-color: #ffeb3b;
    font-weight: bold;
}
.month-table .dayoff {
    background-color:rgb(194, 43, 43);
    color:#fff;
    font-weight: bold;
}
.numberWeek{
    background-color:#f3f3f3;
    font-style:italic;
}

.holidays_line{
    position:absolute;
    height:3px;
    width:100%;
    left:0px;
}
.zone_a {
    background:rgb(24, 181, 48) !important;
    color: #fff !important;
    bottom: 0;
}

.zone_b {
    background: #000091!important;
    color: #fff!important;
    bottom: 3px;
}

.zone_c {
    background: #FFCA00!important;
    color: #fff!important;
    bottom: 6px;
}

.navigation-buttons a{
    color : #506849;
    border-color : #506849;
}
.navigation-buttons a:hover{
    background-color : #85B875;
    border-color : #85B875;
    color : #FFF;
}

.navigation-buttons a.disabled{
    color: #aaa;
    border-color: #aaa;
}
#main-content{
    background: #ffffff;
    border-radius: 5px;
    border: 7px solid #85B875;
    margin-top: 0 !important;
    box-shadow: 0px 0px 20px #060606;
    clear: both;
}

/*
#vacances-scolaires{
    width: 100%;
    border: 0;
}

#vacances-scolaires th{
    text-align: center;
    border: 1px solid #c3c3c3;
}

#vacances-scolaires td{
    border: 1px solid #c3c3c3;
    text-align: center;
}
*/

/* 📌 Fixe la largeur du tableau */
#vacances-scolaires {
    width: 100%; /* Prend toute la largeur du conteneur */
    table-layout: fixed; /* Fixe la largeur des colonnes */
    border-collapse: collapse;
}

/* 📌 Fixe la largeur des colonnes */
#vacances-scolaires th, 
#vacances-scolaires td {
    width: 25%; /* Ajuste selon le nombre de colonnes */
    text-align: center;
    padding: 10px;
    border: 1px solid #c3c3c3;
    word-wrap: break-word; /* Permet de couper les mots si besoin */
}

/* 📌 Empêche la distorsion des colonnes */
#vacances-scolaires th:first-child,
#vacances-scolaires td:first-child {
    width: 30%; /* Colonne des vacances plus large */
}

#vacances-scolaires th:nth-child(2),
#vacances-scolaires th:nth-child(3),
#vacances-scolaires th:nth-child(4),
#vacances-scolaires td:nth-child(2),
#vacances-scolaires td:nth-child(3),
#vacances-scolaires td:nth-child(4) {
    width: 20%;
}

/* 📌 Gérer l'affichage sur mobile */
@media (max-width: 768px) {
    #vacances-scolaires {
        display: block;
        overflow-x: auto; /* Permet le défilement horizontal sur mobile */
        /* white-space: nowrap; */
    }

    #vacances-scolaires th,
    #vacances-scolaires td {
        width: auto;
    }
}


#logo img {
    width:299px;
}

@media (max-width: 1400px) {
    #logo {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 1200px) {
    .calendar-container {
        grid-template-columns: repeat(3, 1fr);
    }
    .menu {
        margin:58px 0 0 0;
    }
    .menu-container{
        margin-top: -25px;
    }
    #logo img{
        height: 60px;
        width: initial;
    }
    #logo {
        width: 60px;
    }
    .menu > li > a {
        font-size: 1.1em;
    }
}

@media (max-width: 992px) {
    .calendar-container {
        grid-template-columns: repeat(2, 1fr);
    }
    .menu > li > a > span {
        display: none;
    }
    .menu > li > a {
        font-size: 1.1em;
    }
}

@media (max-width: 767px) {
    /* .menu-container {
        margin-top: -55px;
    } */
    h1{
        font-size: 20px; 
    }
    #logo{
        margin-left: 70px;
    }
     /* Affichage du bouton menu burger */
     .menu-toggle {
        display: block !important;
    }

    /* Masquer le menu par défaut */
    .menu-container {
        display: none;
        flex-direction: column;
        position: absolute;
        top: 60px;
        left: 0;
        width: 100%;
        background-color: white;
        z-index: 1000;
        padding: 20px 0;
        box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
    }

    /* Affichage du menu lorsqu'il est actif */
    .menu-container.active {
        display: block;
        margin-top: 0px;
        padding: 0;
    }

    /* Organisation du menu */
    .menu {
        width: 100%;
        text-align: center;
        padding: 0;
        margin: 0;
    }

    .menu li {
        width: 100%;
        padding: 0;
        text-align: center;
    }

    .menu li a {
        display: block;
        width: 100%;
        padding: 10px;
        font-size: 1.4em;
        text-align: left;
        margin: 0;
        border-radius: 0;
        border-bottom: 1px solid #506849;
    }

    .menu li a span{
        display: inline-block;
    }

    .menu > li > a:hover{
        border-radius: 0;
    }

    /* Masquer les sous-menus */
    .submenu {
        display: none;
        background-color: #85b875;
        padding: 10px;
        border-radius: 5px;
    }

    /* Afficher le sous-menu lorsqu'on clique sur un élément */
    .menu li:hover .submenu {
        display: block;
    }
}



@media (max-width: 680px) {
    .calendar-container {
        grid-template-columns: repeat(1, 1fr);
    }
    .navigation-buttons a span {
        display:none !important;
    }
}



/* Bouton du menu burger */
.menu-toggle {
    display: none;
    cursor: pointer;
    padding: 10px;
    position: absolute;
    left: 20px;
    top: 5px;
    z-index: 2000;
}

.bar {
    background-color: #2b663b;
    height: 4px;
    width: 30px;
    margin: 5px 0;
    transition: 0.4s;
    display: block;
}

/* 📌 Cacher les sous-menus par défaut */
.submenu {
    display: block;
    max-height: 0;
    overflow: hidden;
    background-color: #85b875;
    padding: 0;
    border-radius: 5px;
    transition: max-height 0.3s ease-in-out;
}

/* 📌 Afficher les sous-menus en mode accordéon */
.submenu.open {
    max-height: 500px; /* Ajustable selon le contenu */
}