/* Variables pour les couleurs */
:root {
    --primary-color: #95a58d;
    --secondary-color: #f8f3f2;
    --dark-color: #485342;
    --text-color: #95a58d;
    --text-light-color: #f8f3f2;
    --background-color: #f8f3f2;
    --menu-active-bg: rgba(255, 255, 255, 0.2); /* Couleur de fond active */
}
html, body{
    min-height: 100%;
}
/* Élements de style de base */
body {
    font-family: 'Libre Baskerville', serif;
!important;
    color: var(--text-color);
}

/* Bouton vert */
.btn-green {
    background-color: var(--primary-color);
    border-color: var(--primary-color);
    color: var(--text-light-color);
}
/* Bouton vert - surbrillance */
.btn-green:hover {
    background-color: var(--dark-color);
    border-color: var(--dark-color);
    color: var(--text-light-color);
}

/* Bouton clair */
.btn-light {
    background-color: var(--text-light-color);
    border-color: var(--text-light-color);
    color: var(--primary-color);
}

/* Bouton clair - surbrillance */
.btn-light:hover {
    background-color: var(--dark-color);
    border-color: var(--dark-color);
    color: var(--text-light-color);
}

/* Styles menus */
.menuLateral {
    display: none;
}

/* Div qui gère l'image de fond */
.container-fluid.accueil .background-image {
    position: absolute; /* L'image de fond est en position absolue */
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: -1; /* Placer l'image derrière le contenu */
}

/* Style titre accueil */
#titreAccueil {
    background-color: var(--background-color);
    opacity: 0.5;
}

p {
    text-align: justify;
}

/* Style des headers */
h1, h3, h5 {
    color: var(--dark-color);
}

/* SSP : Source Sans Pro */
.SSP {
    font-family: 'Source Sans Pro', sans-serif;
    font-weight: 200;
}

/* Ombres */
.shadow {
    box-shadow: inset 0 10px 15px rgba(0, 0, 0, 0.05) !important;
}

/* Styles des fonds et textes*/
.background-light {
    background-color: var(--background-color);
}

.background-green {
    background-color: var(--primary-color);
}

.text-light {
    color: var(--secondary-color);
}

/* hauteurs des menus */
.menu {
    height: 75px;
}

.menu .row {
    height: 100%;
}

.menu .col {
    position: relative;
    border-right: 1px solid white; /* Ligne verticale */
}

 /* Supprime le bord du dernier élement du menu */
.menu .col:last-child {
    border-right: none;
}

/* Elements du menu */
.nav-link {
    color: var(--text-light-color); /* Couleur par défaut */
    font-weight: normal;
    cursor: pointer;
}

/* Style menu selectionné */
.nav-link.active {
    font-weight: bold;
    color: var(--dark-color);
}

/* Style contenu */
.content {
    opacity: 0;
    height: 0;
    overflow: hidden;
}

.content.active {
    opacity: 1;
    height: auto;
}

.text-small {
    font-size: smaller;
}

/* Taille map */
.mapgoogle {
    width: 600px;
    height: 450px;
}
/* Menu latéral masqué en grand écran */
.menuLateral {
    display: none;
}

/* Style des horaires */
.card.horaires {
    background-color: transparent !important;
    border: none;
    color: var(--dark-color);
}

.footer {
    background-color: var(--dark-color);
    color: white;
    text-align: center;
    padding: 10px 0;
    bottom: 0;
    width: 100%;
    font-size: smaller;
    a{
        color: var(--primary-color);
    }
}
/* Media Query pour les petits écrans */
@media (max-width: 768px) {
    .menu {
        display: none;
    }

    .menuLateral {
        display: flex;
    }

    .contenu {
        padding-right: 0 !important;
    }

    .textContenu {
        padding-top: 50px;

        .pe-5 {
            padding-right: 15px !important;
            padding-left: 15px !important;
        }
    }
    .background-image{
        height : 20vh;
    }

    #divTitre.py-5 {
        padding-top: 0 !important;  /* Retirer le padding en haut */
        padding-bottom: 0 !important; /* Retirer le padding en bas */
    }

    #titreAccueil {
        margin: 0 !important;
    }

    .rowTarifs{
        padding-top: 0 !important;

    }

    .photoTarifs{
        padding-left: 0;
        padding-right: 0;
        padding-top: 0;
    }

    .card.horaires {
        margin-left: 10px;
        margin-right : 25px;
    }

    .mapgoogle {
        max-width: 100%;
        height: auto;
    }
}