/* Réinitialisation de certains styles par défaut */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

.clearfix::after {
    content: "";
    display: table;
    clear: both;
}

/* Définition des paramètres globaux */
body, html {
    height: 100%;
    overflow-x: hidden;
}

body {
    font-family: var(--font1);
    color: var(--colorfont);
    background-color: var(--color1);
    line-height: 1.4;
    word-wrap: break-word; /* Permet de couper les mots trop longs */
    overflow-wrap: break-word; /* Ajout de compatibilité avec d'autres navigateurs */
    word-break: break-word; /* Ajout pour d'anciennes implémentations */
    white-space: normal; /* Assure que le texte s'adapte normalement au conteneur */
}

h1 {
    font-weight: normal;
    font-size: calc(1.3em + 0.5vw);
    padding: 0px;
    margin: 0px;
}

h2 {
    font-weight: normal;
    font-size: calc(1.1em + 0.5vw);
    padding: 0px;
    margin: 0px;
}

h3 {
    font-weight: normal;
    font-size: calc(0.9em + 0.5vw);
    padding: 0px;
    margin: 0px;
}

h4 {
    font-weight: normal;
    font-size: calc(0.8em + 0.5vw);
    padding: 0px;
    margin: 0px;
}

h5 {
    font-weight: normal;
    font-size: calc(0.4em + 0.5vw);
    padding: 0px;
    margin: 0px;
}

h6 {
    font-weight: normal;
    font-size: calc(0.8em + 0.5vw);
    padding: 0px;
    margin: 0px;
}

ul {
    list-style-type: none;
}

ol {
    list-style-type: none;
}

input, button, textarea, select {
    background-color: var(--color1);
    border: none;
    border-radius: 4px;
    color: var(--colorfont);
    cursor: pointer;
    padding: 4px 10px;
    margin-top: 4px;
    font-size: calc(0.8em + 0.5vw);
    resize: none;
}

::placeholder {
    color: var(--colorfont);
    font-size: calc(0.9em + 0.5vw);
}

a, a:visited {
    color: var(--colorfont);
    text-decoration: none;
}

a:active, a:hover {
    color: var(--colorfontaahover);
    text-decoration: none;
}

/* Index - page de connexion */

.cta-buttons {
    display: flex;
    justify-content: center;
    gap: 20px;
    margin-top: 30px;
}
.cta-buttons a {
    text-decoration: none;
    padding: 10px 20px;
    border-radius: 5px;
    font-size: 1.2em;
}
.cta-buttons a.donate {
    background-color: #4CAF50;
    color: #ffffff;
}
.cta-buttons a.login {
    background-color: #007BFF;
    color: #ffffff;
}
.cta-buttons a.signup {
    background-color: #4CAF50;
    color: #ffffff;
}

.main-logoindex {
    display: flex;
    justify-content: center;
    height: 35vh;
}

.main-logoindex img {
    width: auto;
    height: 35vh;
    max-height: 35vh;
}
    
.cadre {
    margin: auto; /* Centre le conteneur principal horizontalement */
    display: flex; /* Utilisation de Flexbox */
    flex-direction: column; /* Les enfants s'empilent verticalement */
    align-items: center; /* Centre les enfants horizontalement */
    height: 100vh; /* Utilisation de toute la hauteur de la fenêtre */
    padding: 5px;
}

.cadre > div {
    width: 100%; /* Les enfants remplissent toute la largeur de leur parent */
    /*max-width: 1200px; /* Largeur maximale */
    /*background-color: #f0f0f0; /* Exemple de couleur d'arrière-plan */
    /*padding: 20px; /* Espacement interne */
    /*margin-bottom: 10px; /* Espacement entre les div */
    /*box-sizing: border-box; /* Inclut les bordures et le padding dans la largeur */
}

.main-connection {
    
    width: 45vh;
    max-width: 400px;
    padding-bottom: 15vw;
    padding-top: 5vw;
    padding-left: 5vh;
    padding-right: 5vh;
    border-radius: 8px;
    text-align: center;
    justify-content: center;
    align-items: center;
    color: var(--colorfont);
}
.main-connection input {
    width: 100%;
    padding: 10px;
    margin-bottom: 15px;
    border: none;
    border-radius: 4px;
    font-size: 16px;
    background-color: var(--color2);
    color: var(--colorfont2);
    text-align: center;
}

.main-connection a {
    color: var(--colorfontalt);
}

.main-connection input::placeholder {
    color: var(--colorfont);
    text-align: center;
}

.main-connection button {
    width: 100%;
    padding: 10px;
    background-color: #007BFF;
    border: none;
    border-radius: 4px;
    font-size: 18px;
    cursor: pointer;
    transition: background-color 0.3s ease;
    color: var(--colorfont);
}

.main-connection button:hover {
    background-color: #0056b3;
}

/* Footer */
.footer {
    padding-bottom: 25px;
    max-width: 1000px;
}

/* Début des pages */
.header {
    text-align: center;
    background-color: var(--color-header);
    padding: 8px 8px;
    margin-bottom: 15px;
    border-radius: 8px;
}

.header img {
    display: flex;
    justify-content: center;
    width: 100%;
}

.flash {
    background-color: var(--color2);
    max-width: 1000px;
    padding: 8px 8px;
    margin: 8px 8px;
    border-radius: 8px;
}

.flash h3 {
    text-align: center;
}

.flash input[type="text"],
.flash select {
    width: 100%;
    border: 1px solid var(--colorfont);
    border-radius: 4px;
    background-color: var(--color2);
    color: var(--colorfont);
}

.flash input[type="text"]::placeholder {
    color: var(--colorfont);
}

.flash select {
    appearance: none;
    color: var(--colorfont);
    background-color: var(--color2);
}

.flash input[type="submit"] {
    width: 100%;
    background-color: #007BFF;
    border: none;
    border-radius: 4px;
    color: var(--colorfont);
    cursor: pointer;
}

.flash input[type="submit"]:hover {
    background-color: #0056b3;
}

.flash input[type="submit"]:focus {
    outline: none;
    box-shadow: 0 0 5px rgba(0, 123, 255, 0.5);
}


[class^="content"] {
    background-color: var(--color2);
    max-width: 1000px;
    padding: 8px 8px;
    margin: 8px 8px;
    border-radius: 8px;
}

/* Content général */
.content-ui-install {
    background-color: var(--color2);
    color: var(--colorfont);
}
.apptime_button {
    background-color: var(--color5);
    color: var(--colorfont);
    padding: 10px 20px;
    border: none;
    border-radius: 5px;
    text-decoration: none;
}

/* Modal pour nouvelle conversation */
.content-new-conversation-modal {
    display: none;
    position: fixed;
    z-index: 1000;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: var(--color1);
    justify-content: center;
    align-items: center;
}

.new-conv-modal-content {
    padding: 20px;
    border-radius: 10px;
    width: 80%;
    max-width: 500px;
    text-align: center;
}

.new-conv-modal-close {
    position: absolute;
    top: 10px;
    right: 20px;
    font-size: 24px;
    font-weight: bold;
    cursor: pointer;
}

.new-conv-modal-search {
    width: 100%;
    padding: 10px;
    margin-bottom: 20px;
    border-radius: 5px;
    border: 1px solid #ccc;
}

.new-conv-modal-results {
    max-height: 200px;
    overflow-y: auto;
    margin-bottom: 20px;
}

.new-conv-modal-results div {
    padding: 10px;
    border-bottom: 1px solid #ccc;
    cursor: pointer;
}

.new-conv-modal-initial-message {
    margin-top: 20px;
}

.new-conv-modal-textarea {
    width: 100%;
    height: 100px;
    border-radius: 5px;
    border: 1px solid #ccc;
    padding: 10px;
    margin-bottom: 20px;
}

.new-conv-modal-send-button {
    padding: 10px 20px;
    border: none;
    border-radius: 5px;
    background-color: var(--color5);
    cursor: pointer;
}

.new-conv-modal-send-button:hover {
    background-color: var(--color4);
}

.new-conv-modal-result-item {
    padding: 10px;
    border-bottom: 1px solid #ccc;
    cursor: pointer;
    background-color: var(--color2);
    color: var(--colorfont);
}

.new-conv-modal-result-item:hover {
    background-color: var(--color4);
}

.new-conv-random-contacts,
.new-conv-modal-results {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.new-conv-random-item,
.new-conv-modal-result-item {
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    padding: 8px;
    border: 1px solid var(--colorfont);
    border-radius: 8px;
    transition: background-color 0.3s;
}

.new-conv-random-item:hover,
.new-conv-modal-result-item:hover {
    background-color: var(--color2);
}

.new-conv-profile-picture {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
}
/* Style général du modal pour smartphones */
.modal {
    display: none;
    position: fixed;
    z-index: 900;
    margin-top: 0px;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: var(--color1);
    justify-content: center;
    align-items: center;
    overflow: hidden;
}

/* Classe spécifique pour la section de messagerie */
.messaging-collapsed {
    display: none;
}

/* Contenu du modal */
.modal-content {
    margin: 5% auto;
    width: 100%;
    max-height: 100%;
    overflow-y: auto;
}

/* Bouton pour fermer le modal */
.close {
    position: absolute;
    top: 15px;
    right: 25px;
    font-size: 40px;
    font-weight: bold;
    color: var(--colorfont2inv);
    cursor: pointer;
}

.close:hover,
.close:focus {
    color: black;
    cursor: pointer;
}

/* Modal d'image plein écran */
.image-modal {
    display: none;
    position: fixed;
    z-index: 1000;
    pointer-events: auto;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: var(--color1);
    justify-content: center;
    align-items: center;
    touch-action: pan-y;
}

/* Contenu du modal (image) */
.image-modal-content {
    max-width: 90%;
    max-height: 90%;
    object-fit: contain;
    border-radius: 8px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
}

/* Bouton de fermeture */
.image-modal-close {
    position: absolute;
    top: 15px;
    right: 25px;
    font-size: 40px;
    font-weight: bold;
    color: var(--colorfont2inv);
    cursor: pointer;
}

.image-modal-close:hover {
    color: var(--colorfont);
}

/* Messages */
.content-messaging-section-content {
    margin: 0;
    padding: 0;
}

.content-messaging-form {
    display: flex;
    flex-direction: column;
    max-height: 400px;
}

.content-messaging-message-input {
    width: 100%;
    height: 100px;
    background-color: var(--color4);
    margin-left: 0px;
    margin-bottom: 0px;
    padding-bottom: 0px;
}

.content-messaging-message-input button {
    margin-top: 0px;
    padding-bottom: 0px;
}

.content-messaging-conversations {
    background-color: var(--color2);
}

/* Styles des conversations */
.content-messaging-user-conversation h3 {
    cursor: pointer;
    font-weight: bold;
}

.content-messaging-user-conversation {
    background-color: var(--color1);
}

.message-container {
    padding: 10px;
    margin-bottom: 10px;
    border-radius: 5px;
    list-style-type: none;
}

.message-container img {
    max-width: 50%;
    height: auto;
    border: 1px solid var(--colorfontalt);
    border-radius: 8px;
}

/* Messages envoyés et reçus */
.sent-message {
    background-color: var(--color4);
    margin-left: 30%;
    text-align: right;
}

.received-message {
    background-color: var(--color4b);
    margin-right: 30%;
    text-align: left;
}
.last-message {
    font-size: 0.8em;
    color: var(--colorfont1);
    margin-top: 5px;
    font-weight: lighter;
}

/* Style de l'heure des messages */
.message-time {
    font-size: 0.8em;
    color: var(--colorfont1);
    font-weight: lighter;
    text-align: right;
}

/* Style du modal de messagerie */
body.modal-open {
    overflow: hidden; /* Empêche le défilement vertical */
    position: fixed; /* Bloque la position de la page */
    width: 100%; /* Assure que la largeur de la page reste inchangée */
}

.content-messaging-modal {
    display: none;
    position: fixed;
    z-index: 1;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.724);
    margin: 0px;
    padding: 0px;
    border-radius: 0px;
}

.content-messaging-modal-content {
    margin: 5% auto;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

/* Messages dans le modal */
.content-messaging-modal-messages {
    max-height: 400px;
    overflow-y: auto;
    margin-bottom: 10px;
}

/* Bouton de fermeture du modal */
.content-messaging-close {
    font-size: 40px;
    cursor: pointer;
}

.content-messaging-form textarea {
    width: 100%;
    height: 100px;
}

/* !!Nouveau modal conversation */

.mess-modal {
    display: flex;
    position: fixed;
    z-index: 1000;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7);
    justify-content: center;
    align-items: center;
}

.mess-modal-content {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    background-color: var(--color1);
    color: var(--colorfont);
    overflow: hidden;
}

.mess-modal-header {
    flex: 0 0 auto;
    padding: 10px;
    background-color: var(--color2);
    display: flex;
    justify-content: space-between;
    align-items: center;
    min-height: 20px;
}

.mess-modal-header h2 {
    text-align: center;
    margin: 0 auto;
    font-size: 1.2em;
}

.mess-modal-body {
    flex: 1 1 auto;
    padding: 10px;
    overflow-y: auto;
    background-color: var(--color3);
}

.mess-modal-footer {
    flex: 0 0 auto;
    padding: 10px;
    display: flex;
    gap: 10px;
    align-items: center;
    background-color: var(--color2);
    min-height: 80px;
}

textarea {
    flex: 1;
    padding: 10px;
    border-radius: 5px;
    border: 1px solid var(--colorfontalt);
    background-color: var(--color3);
    color: var(--colorfont);
}

button {
    padding: 10px 20px;
    background-color: var(--color5);
    color: var(--colorfontinv);
    border: none;
    border-radius: 5px;
    cursor: pointer;
}

button:hover {
    background-color: var(--color4);
}

/* !! Fin de nouveau modal conversation*/

/* Wrapper pour les champs du formulaire et les boutons */
.content-appointments-form-group input,
.content-appointments-form-group select,
.content-appointments-submit-button {
    width: 100%;
    max-width: 600px;
    box-sizing: border-box;
    padding: 10px;
    margin-top: 5px;
    margin-bottom: 10px;
}

/* Style du bouton d'envoi */
.content-appointments-submit-button, .content-appointments-delete-button {
    width: 100%;
    max-width: 600px;
    padding: 10px;
    background-color: #007bff;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
}

/* Changement de couleur au survol */
.content-appointments-submit-button:hover,
.content-appointments-delete-button:hover {
    background-color: #0056b3;
}

/* Formulaire et liste d'applications - Styles de flexibilité */
.content-appointments-wrapper {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}

.content-appointments-form, .content-appointments-list {
    flex: 1;
    margin: auto;
    padding: 20px;
    max-width: 600px;
}


  
    /* chat.php */
/* Limiter la hauteur de la boîte d'affichage des messages */
.chat-box, .chat-box-texte, .chat-box {
    background-color: var(--color1);
    overflow-y: auto; /* Ajoute une barre de défilement verticale si nécessaire */
    border-radius: 5px;
    padding: 5px 5px;
    margin-top: 5px;
    width: 100%;
}
.chat-box {
    max-height: 350px;
    min-height: 150px;
}
.chat-box-texte {
    max-height: 100px;
    min-height: 40px;
}

.chat-message {
    margin-bottom: 10px;
    }
    .message-input::-webkit-scrollbar {
        display: none;  /* Chrome, Safari et Opera */
    }


/* Ajuster la hauteur de la boîte de saisie des messages */
.chat-box-texte {
    height: auto; /* Permet à la boîte de s'ajuster automatiquement */
    min-height: 50px; /* Hauteur minimale */
    max-height: 150px; /* Hauteur maximale */
    overflow-y: auto; /* Ajoute une barre de défilement si le contenu dépasse la hauteur maximale */
    resize: none; /* Permet à l'utilisateur de redimensionner la hauteur */
}
.chat-box-texte-redaction {
    height: auto; /* Permet à la boîte de s'ajuster automatiquement */
    min-height: 50px; /* Hauteur minimale */
    max-height: 150px; /* Hauteur maximale */
    overflow-y: auto; /* Ajoute une barre de défilement si le contenu dépasse la hauteur maximale */
    resize: none; /* Permet à l'utilisateur de redimensionner la hauteur */
    background-color: var(--color2);
    padding: 5px 5px;
    margin: 5px 5px;
}

    

    .chat-button, .chat-button button, .chat-button::placeholder {
        /*font-family: 'Times New Roman', Times, sans-serif;*/
        font-weight: normal;
        font-size: calc(0.7em + 1vw);
        border: none; /* Removes the default border */
        border-radius: 5px; /* Optional: Adds rounded corners to the button */
        cursor: pointer; /* Changes cursor to pointer when hovering over the button */
        /*background-color: var(--color4); /* Example background color */
        text-align: center;
        margin-left: auto;
        margin-right: 5px;
        padding-left: 5px;
        padding-right: 5px;
        padding-bottom: 5px;
        padding-top: 5px;
        color: var(--colorfont);
        background-color: var(--color5);
        width: 100%;
    }

    .chat-button-little, .chat-button-little button, .chat-button-little::placeholder {
        /*font-family: 'Times New Roman', Times, sans-serif;*/
        font-weight: normal;
        font-size: calc(0.4em + 1vw);
        border: none; /* Removes the default border */
        border-radius: 5px; /* Optional: Adds rounded corners to the button */
        cursor: pointer; /* Changes cursor to pointer when hovering over the button */
        /*background-color: var(--color4); /* Example background color */
        text-align: center;
        /*margin-left: auto;*/
        /*margin-right: 5px;*/
        padding-left: 5px;
        padding-right: 5px;
        padding-bottom: 2px;
        padding-top: 2px;
        /*padding-bottom: 5px;
        /*padding-top: 5px;
        /*color: var(--colorfont);*/
        background-color: var(--color5);
        /*width: 100%;*/
    }


.custom-file-label {
    display: inline-block;
    background-color: var(--color5);
    color: white;
    padding: 10px;
    border-radius: 5px;
    cursor: pointer;
    width: 40%;
    margin-top: 10px;
}

.custom-file-label:hover {
    background-color: #0056b3;
}


#file-name {
    display: block;
    margin-top: 10px;
    font-style: italic;
    color: var(--colorfont);
}

.chat-button {
    background-color: var(--color5);
    color: white;
    padding: 10px 20px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    width: 100%;
    margin-top: 10px;
}

.chat-button:hover {
    background-color: #0056b3;
}

.content-chat-bottom {
    background-color: var(--color4);
}

    /* contacts.php */.contacts-container {
    max-width: 800px;
    margin: auto;
    padding: 20px;
}

.contacts-search,
.contacts-requests,
.contacts-allowed {
    margin-bottom: 20px;
}

.contacts-search input {
    width: 100%;
    padding: 10px;
    margin-bottom: 10px;
    border-radius: 5px;
    background-color: var(--color4);
    color: var(--colorfont);
}

.contacts-search-results,
.contacts-requests-list,
.contacts-allowed-list {
    list-style: none;
    padding: 0;
}

.contacts-search-results li,
.contacts-requests-list li,
.contacts-allowed-list li {
    background-color: var(--color4);
    padding: 10px;
    margin-bottom: 5px;
    border-radius: 5px;
    display: flex;
    justify-content: space-between;
}

.contacts-modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7);
    justify-content: center;
    align-items: center;
}

.contacts-modal-content {
    background-color: white;
    padding: 20px;
    border-radius: 5px;
    width: 300px;
    text-align: center;
}

.contacts-modal-close {
    position: absolute;
    top: 10px;
    right: 20px;
    cursor: pointer;
}

    /* contacts.php */
    .content-contacts-list {
        background-color: var(--color1);
    }

    /* Style des boutons */
.content-contacts-list button {
    background-color: var(--color2); /* Couleur du bouton */
    color: var(--colorfont);
    font-size: calc(0.7em + 0.5vw); /* Taille responsive */
    border: none;
    border-radius: 5px; /* Coins arrondis */
    padding: 8px 12px;
    cursor: pointer;
    margin-top: 10px;
}

/* Style de la photo de profil */
.content-contacts-list img {
    width: 60px; /* Largeur fixe pour la photo */
    height: 60px; /* Hauteur fixe */
    object-fit: cover; /* Ajuster l'image dans le cadre */
    border-radius: 50%; /* Rendre l'image circulaire */
    margin-right: 15px; /* Espace entre l'image et le nom */
}


/* Style des informations du contact */
.content-contacts-list li {
    list-style-type: none; /* Retirer les puces de liste */
    font-size: 1em;
    color: var(--colorfont); /* Utiliser la couleur de texte définie */
    flex: 1; /* Prendre toute la place restante */
}



    /* Le conteneur du modal */
.profile-modal {
    display: none; /* Masqué par défaut */
    position: fixed; /* Reste fixe à l'écran */
    z-index: 1; /* Au-dessus des autres éléments */
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto; /* Scroll si nécessaire */
    background-color: rgba(0, 0, 0, 0.8); /* Fond noir avec transparence */
    justify-content: center;
    align-items: center;
}

/* Le contenu du modal (l'image) */
/* Le conteneur du modal spécifique aux images de profil */
.profile-modal {
    display: none; /* Masqué par défaut */
    position: fixed; /* Reste fixe à l'écran */
    z-index: 1000; /* Au-dessus des autres éléments */
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto; /* Scroll si nécessaire */
    background-color: rgba(0, 0, 0, 0.8); /* Fond noir avec transparence */
    justify-content: center;
    align-items: center;
}

/* Le contenu du modal (l'image de profil) */
.profile-modal-content {
    margin: auto;
    display: block;
    width: 300px; /* Largeur fixe de 300px */
    height: 300px; /* Hauteur fixe de 300px */
    object-fit: cover; /* Garder les proportions de l'image */
    border-radius: 5px;
}

/* Le bouton de fermeture */
.profile-modal-close {
    position: absolute;
    top: 15px;
    right: 35px;
    color: #ffffff;
    font-size: 40px;
    font-weight: bold;
    cursor: pointer;
}


/* Conteneur pour le texte et le bouton */
.contact-item {
    display: flex;
    flex-direction: column;
}

    /* vision.php */


    /* vision.php */
    .content-vision-special {
        background-color: var(--color4);
    }

    .call-pending {
        background-color: var(--color4);
    }
    
    .call-connected {
        background-color: var(--color4);
    }
    .call-history {
        max-height: 100px;
        overflow-y: auto;
        border: 1px solid #ccc;
        padding: 5px;
        margin-bottom: 10px;
    }
    .call-history-item {
        padding: 5px;
    }
    
    /* profile.php */


.profile-info img {
    max-width: 25%;  /* Limite la largeur à 600px */
    max-height: 25%; /* Limite la hauteur à 600px */
    object-fit: cover; /* Recadre l'image pour remplir l'espace tout en gardant les proportions */
    margin: 0 auto;  /* Centre l'image horizontalement */
}
            /* Style du modal */

            /* Styles du modal *//* Modal Styles */
/* Modal Styles */
#openModalBtn, .openModalBtn {
    background-color: #28a745;
    padding: 10px 20px;
    cursor: pointer;
    border: none;
    border-radius: 5px;
    display: block;
    margin: 10px auto;  /* Centre le bouton */
}

/* Styles pour le modal 
.modal {
    display: none;
    position: fixed;
    z-index: 999;
    padding-top: 100px;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0, 0, 0, 0.5);
}*/

/* Modal container - ajustement de la hauteur et ajout du défilement si nécessaire */
.modal-content-crop {
    background-color: white;
    margin: auto;
    /*padding: 20px;*/
    border: 1px solid #ccc;
    width: 80%;
    max-width: 400px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    max-height: 80vh; /* Limiter la hauteur maximale du modal */
    overflow-y: auto; /* Ajout du défilement vertical si le contenu dépasse */
}

/* Conteneur pour l'image */
/* Conteneur pour l'image recadrée */
#preview {
    width: 8%;  /* Ajuste la largeur à 100% du conteneur */
    height: auto; /* Ajuste automatiquement la hauteur en fonction de la largeur */
    max-height: 6vh; /* Ne dépasse pas 90% de la hauteur de la fenêtre */
    max-width: 6vw;  /* Ne dépasse pas 90% de la largeur de la fenêtre */
}

/* Modal container */
.modal-content-crop img {
    max-width: 100%;
    max-height: 100%;
    display: block;
    margin: 0 auto;
}


/* Conteneur spécifique de l'image */
.cropper-container {
    max-width: 100%;
    max-height: 70vh;  /* Limite la taille visible de l'image à la hauteur de la fenêtre */
    margin: 0 auto;
    object-fit: contain;
}


/* Le bouton doit rester visible sous l'image */
button#cropButton {
    background-color: #dc3545;
    padding: 10px 20px;
    border-radius: 5px;
    border: none;
    margin-top: 10px;
    align-self: center; /* Centrer le bouton sous l'image */
}

button#cropButton:hover {
    background-color: #c82333;
}

/* Bouton de fermeture du modal */
.close {
    color: #aaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
}

.close:hover,
.close:focus {
    color: black;
    text-decoration: none;
    cursor: pointer;
}

    
/* Styles pour l'image de profil */

.profile-picture-container {
    text-align: center;  /* Centre le contenu */
    margin-bottom: 20px;  /* Espace sous l'image et le bouton */
}

.profile-picture-container img {
    display: block;
    margin: 0 auto;  /* Centre l'image horizontalement */
}
            
            
/*.content-newuser button {
    width: 100%;
    padding: 10px;
    margin-bottom: 15px;
    box-sizing: border-box;
}*/

.content-newuser button {
    background-color: #007BFF;
    border: none;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.content-newuser button:hover {
    background-color: #0056b3;
}

.content-newusertext button:hover {
    background-color: black;
    color: var(--colorfont2);
}

.content-newuser a, .content-newusertext a {
    color: var(--colorfont2);
}


.content-newusertext {
    background-color: var(--color3);
}

.content-newuser-main, .content-newuser-main input, .content-newuser-main button {
    width: 100%;
    margin: auto;
    background-color: var(--color2);
    width: auto;
    color: var(--colorfont2inv);

}

.content-newuser-main input, .content-newuser-main button {
    width: 100%;
    background-color: var(--color1);
    color: var(--colorfont2);

}
.content-newuser-main button {
    width: 100%;
    background-color: var(--color4);
    color: var(--colorfont2inv);

}

    /* admin/admin.php */
.admin-header, .admin-sidebar, .admin-footer {
    background-color: #333;
    color: #fff;
    padding: 10px;
}

.admin-header-logo a, .admin-header-menu a {
    color: #fff;
    text-decoration: none;
}

.admin-container {
    display: flex;
}

.admin-sidebar {
    width: 200px;
    background-color: #444;
    padding: 15px;
}

.admin-main-content {
    flex: 1;
    padding: 20px;
}

.admin-stat {
    margin-bottom: 20px;
}

.admin-progress-bar {
    height: 20px;
    background-color: #76c7c0;
}

.admin-user-table {
    width: 100%;
    border-collapse: collapse;
}

.admin-user-table th, .admin-user-table td {
    border: 1px solid #ddd;
    padding: 8px;
}

.admin-add-user {
    display: inline-block;
    margin-top: 10px;
    padding: 10px;
    background-color: #28a745;
    color: white;
    text-decoration: none;
}


.admin-db-stats {
    margin-top: 20px;
}

.admin-db-stat {
    margin-bottom: 20px;
}

.admin-db-stat h3 {
    margin-bottom: 5px;
    font-weight: bold;
}

.admin-db-stat p,
.admin-db-stat ul {
    margin-left: 15px;
}

.admin-db-size-chart {
    margin-top: 20px;
}

.admin-db-size-chart h2 {
    margin-bottom: 10px;
    font-weight: bold;
}

    /* notifications.php */
.content-notifications-messages-list {
    background-color: var(--color4) !important;
}

    /* manage_users.php */

    .content-listusers {
        margin: 0;
        margin-top: 4px;
    }

    /* reset_password.php */
    
    /* FIN DES PAGES*/
    
    /* ESSAIS */