:root {
    --background-body: white;
    --background-footer: rgba(1,82,138,255);
    --police-body: black;
    --background-hover: rgba(1,82,138,255);
    --police-hover: white;

    --background-btn: rgba(1,82,138,255);
    --police-btn: white;

    --redmaa: rgba(224,8,21);
    --redmaahoover: rgb(87, 0, 6);

    --background-apropos: rgba(46, 46, 46, 0.8);
    --police-apropos: white;
    --background-navtabs-blog: rgba(41, 50, 115);
    --police-navtabs-blog: white;
    --background-navtabs-blog-hover: rgba(224,8,21);
    --police-navtabs-blog-hover: white;
    --background-cardbody: #e2e2e2;
    --police-cardbody: black;
    --contentbackground: rgba(46, 46, 46, 0.8);
    --bluemaa: rgba(41, 50, 115);

    --bluemaahoover: rgb(0, 6, 48);

    --background-login: black;
    --police-login: white;
    --background-navtabs-tabcontent: rgba(41, 50, 115);
}
body {
    font-family: 'Nunito', sans-serif;
    font-size: 16px;
    color: var(--police-body);
    background-color: var(--background-body);
    line-height: 1.6;
}
h1, h2, h3, h4, h5, h6 {
    font-family: 'Raleway', sans-serif; /* Avant Garde alternative */
}
html {
    scroll-behavior: smooth;
}
a:hover {
    text-decoration: none;
    color: white;
}
/* NAVBAR ------------------------------------------------------------------*/
.navbarheader {
    font-size: 1.6rem;
}
.nav-item:hover {
    color: var(--police-btn);
    background-color: var(--background-btn);
}
.nav-item a:hover {
    color: var(--police-hover);
    background-color: var(--background-hover);
}
/* HOME PAGE----------------------------------------------------------------*/
.bt-services {
    color: var(--police-hover);
    background-color: var(--background-hover);
}
.home-title {
    font-size: 2.6rem;
    text-decoration: bold;
}
.home-subtitle {
    font-size: 1.8rem;
    text-decoration: bold;
}
.bg-maablue {
    color: var(--police-hover);
    background-color: var(--background-hover);
}
.home-infosclients {
    font-size: 0.9rem;
}
.bt-adherer {
    color: var(--police-hover);
    background-color: var(--redmaa);
}
/* FOOTER ------------------------------------------------------------------*/
footer {
    background-color: var(--background-footer);
    font-size: 0.9rem;
}
footer h5 {
    text-decoration: bold;
}
footer .cooptitle {
    font-family: 'Raleway', sans-serif;
    text-decoration: bold;
    font-size: 1.5rem;
}
footer .moreinfo {
    font-family: 'Raleway', sans-serif;
    text-decoration: bold;
    font-size: 1.1rem;
    margin-bottom: 15px;
}
footer .moreinfolist li {
    padding: 5px 0 10px 0;
}
footer .adresslist li {
    padding: 5px 0 10px 0;
}
footer .resosoc {
    font-size: 1.7rem;
}
footer .cerclesocial {
    background-color: red;
    width: 50px;

}
/* LOGOUT ------------------------------------------------------------------*/
.backgroundlogout-image {
    background-image: url('../img/logout.png');
    background-size: cover;
    background-position: center;
    height: calc(100vh - 110px);
    display: flex;
    align-items: center;
    justify-content: center;
}

/* FORMULAIRE CONTACT ------------------------------------------------------------------*/
.backgroundcontact-image {
    background-image: url('../img/contact.png');
    background-size: cover;
    background-position: center;
    height: calc(100vh - 110px);
    display: flex;
    align-items: center;
    justify-content: center;
}
.form-container {
    background-color: rgba(255, 255, 255, 0.8);
    padding: 20px;
    border-radius: 10px;
}
.confirmation {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
}
/* FORMULAIRE LOGIN ------------------------------------------------------------------*/
.contentlog {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    height: calc(100vh - 110px);
    background-color: var(--background-login);
}

.contentlog img {
    max-width: 50%;
    max-height: 100%;
    height: auto;
}
.contentlog h2 {
    color: var(--police-login);
}
.contentlog form {
    width: 50%;
    height: 100%;
    padding: 4vw;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    border-radius: 5px;
    box-shadow: 0 0 10px rgba(255, 255, 255, 0.3);
}
.contentlog form input,
.contentlog form .password-container input {
    margin-bottom: 15px;
    padding: 10px;
    width: 40vw;
    border: none;
    border-radius: 5px;
    box-shadow: 0 0 10px rgba(255, 255, 255, 0.3);
}

.contentlog form button {
    padding: 10px;
    width: 80%;
    border: none;
    border-radius: 5px;
    background-color: var(--bluemaa);
    color: white;
    cursor: pointer;
}
.contentlog form button:hover {
    background-color: var(--redmaa);
}
.password-container {
    position: relative;
    padding: 17px;
    width: 100%;
    margin-bottom: 10px;
}
.password-container i {
    position: absolute;
    top: 45%;
    right: calc(2vw + 17px);
    transform: translateY(-50%);
    cursor: pointer;
    color : black;
}
.checkbox-container {
    display: flex;
    justify-content: start;
    align-items: center;
    margin-bottom: 10px;
    right: calc(2vw + 17px);
    width: 100%; /* Ajustez si nécessaire pour contrôler la largeur du conteneur */
}

.checkbox-container label {
    margin-left: 10px;
    color: var(--police-login);
    cursor: pointer;
}

.checkbox-container input[type=checkbox] {
    width: 20px;
    cursor: pointer;
}

.error-message {
    background-color: #f8d7da;
    color: #721c24;
    padding: 0.75rem;
    margin-bottom: 1rem;
    border: 1px solid #f5c6cb;
    border-radius: 3px;
}
/* Styles personnalisés pour le lien 'Mot de passe oublié ?' */
.forgot-password-link {
    font-size: 1rem; /* Taille de police */
    font-weight: bold; /* Gras pour la visibilité */
    color: #01528a; /* Couleur personnalisée */
    text-decoration: none; /* Supprime la sous-ligne */
    transition: color 0.3s ease; /* Transition pour l'effet de survol */
}

.forgot-password-link:hover {
    color: #ff0000; /* Couleur de survol */
    text-decoration: underline; /* Sous-ligne sur survol */
}

@media (orientation: portrait) {
    .contentlog {
        flex-direction: column;
        height: auto;
        padding: 20px;
    }
    .contentlog img, .contentlog form {
        max-width: 100%;
        width: 100%;
    }
    .contentlog form .password-container input {
        width: 80vw;
    }
}