: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.da9a72b7e840.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 retire : ../img/contact.png absent du depot et du
       bucket depuis l'origine. La regle etait sans effet (404 silencieux
       sur Cloud Storage) et faisait echouer collectstatic en mode
       manifeste. Fournir le fichier puis retablir la declaration. */
    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;
    }
}