*{
    margin:0;
    padding:0;
}
body{
    display:flex;
    flex-direction: column;
    align-items: center;
    background-color: rgb(210, 240, 240);
    width:100%;
    height:100vh;
    margin:0;
    padding:0;
    text-align: center;  
    font-size:15px;

    user-select: none; /* Empêche la sélection de texte dans tout le corps de la page */
    -webkit-user-select: none; /* Pour la compatibilité avec les navigateurs basés sur WebKit */
    -moz-user-select: none; /* Pour la compatibilité avec Firefox */
    -ms-user-select: none; /* Pour la compatibilité avec Internet Explorer/Edge */
}

  /* ------------------------------------------------- STYLE CONNEXION FORUMULAIRE --------------------------------------------- */

.form_connexion_inscription{
    display:flex;
    background-color: rgba(255,255,255,0.5);
    flex-direction: column;
    /* largeur du formulaire */
    width:350px;
    padding: 20px;
    border-radius: 6px;
    margin-top:20px;
}
.form_connexion_inscription label{
    margin:2px 0;
}

/* style des input */
.form_connexion_inscription input{
   padding:5px;
   outline:0;
   border-radius: 6px;  
}
.boutons{
    display:flex;
    flex-direction: row; 
    margin-top:15px;  
}
.form_connexion_inscription input[type='submit']{
    height:30px;
    font-size: 15px;
    width:100%;
    background-color: rgba(0,130, 150,0.5);
    color: black;
    transition: transform 300ms ease-in-out; 
}
.form_connexion_inscription input[type='submit']:hover{
    box-shadow:0 0 5px 4px  rgba(0,130, 150,1);
    font-size: 15px;
    transform: scale(1.02); 
    cursor: pointer; 
}

/* position de l oeil mot de passe */
.password-icon{
    left: 280px;
}

.password-container {
    position: relative;
    width: 100%;
}

.password-icon {
    width:35px;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    right: 45px;
    cursor: pointer;
}

/* style text area */
textarea{
    padding: 5px;
}

/* bouton creer compte */
.nx_compte{
    background-color: rgba(0, 141, 163, 0.3);
    color:black;
    height:25px;
    width: 150px;
    padding: 5px;
    font-size: 15px;
    cursor: pointer; 
    border-radius: 6px;
    line-height: 12px;
    transition: transform 300ms ease-in-out; 
}
.nx_compte:hover{
    box-shadow:0 0 5px 4px  rgba(0, 180, 207, 0.5);
    font-size: 15px;
    transform: scale(1.05); 
    cursor: pointer; 
}

/* Style bouton formulaire */
.annuler{
    color: black;
    margin-left:10px;
    font-family: Arial, Helvetica, sans-serif;
    background-color: rgba(255, 38, 0, 0.2);
    height:30px;
    width:25%;
    border-radius: 6px;
    font-size: 15px;
    transition: transform 300ms ease-in-out; 
}

.form_pass_oublie{
    display:flex;
    background-color: rgba(255,255,255,0.5);
    flex-direction: column;
    width:350px;
    padding: 20px;
    border-radius: 6px;
    margin-top:20px;
}
.form_pass_oublie label{
    margin:2px 0;
}
.form_pass_oublie input{
    margin:2px 0;
    padding:5px;
    outline:0;
    border-radius: 6px; 
}
.form_pass_oublie input[type='submit']{
    height:30px;
    font-size: 15px;
    width:100%;
    background-color: rgba(0,130, 150,0.5);
    color: black;
    transition: transform 300ms ease-in-out; 
}

.form_pass_oublie input[type='submit']:hover{
    box-shadow:0 0 5px 4px  rgba(0,130, 150,1);
    font-size: 15px;
    transform: scale(1.02); 
    cursor: pointer; 
}

.message, .rouge{
    color: red; /* ou toute autre couleur visible */
    font-size: 16px;
}


/* decale du bas le bouton annuler pour l inscription */
#annuler{
    margin-bottom: 60px; 
}

.annuler:hover{
    box-shadow:0 0 5px 4px  rgba(138, 21, 0, 0.5);
    font-size: 15px;
    transform: scale(1.05); 
    cursor: pointer; 
}
/* position bouton annuler connexion */
.annule{
    display:flex;
    justify-content: space-between;
    margin-top:15px;
}
.annuler-connexion{
    color:black;
    font-family: Arial, Helvetica, sans-serif;
    background-color: rgba(255, 38, 0, 0.2);
    height:25px;
    line-height: 12px;
    width:30%;
    border-radius: 6px;
    font-size: 15px;
    transition: transform 500ms ease-in-out; 
}
.annuler-connexion:hover{
    box-shadow:0 0 5px 4px  rgba(138, 21, 0, 0.5);
    font-size: 15px;
    transform: scale(1.02); 
    cursor: pointer; 
    padding:-5px;
}
.annuler-connexion.btn_sup:hover{
    box-shadow:0 0 5px 4px  rgba(0,130, 150,0.5);
    font-size: 15px;
    transform: scale(1.05); 
    cursor: pointer; 
}

 /* ---------------- captcha --------------- */
.ligne-captcha{
    display:flex;
    justify-content: space-evenly;
    margin-top:10px;
}
input.captcha{
    font-family:'plume';
    font-size: 28px;  
    color:grey;/* Couleur du texte gris */
    width:65px;
    height:30px;
    border-radius: 0px;
    background-color: rgba(95, 95, 95, 0.3);
} 
.captcha-logo:hover{
  /* animation:paused; */
  animation-play-state: paused;
}
@keyframes horizontalAnimation {
  0% {
      transform: rotate(0deg);
  }
  50% {
      transform: rotate(180deg);
  }
  100% {
      transform: rotate(360deg);
  }
}

.captcha-img{
    height:42px;
    width:80px;   
}
.captcha-logo{
    height:45px;
    width:45px; 
    animation: horizontalAnimation 10s linear infinite;   
}
.recaptcha{
    font-family: 'Times New Roman', Times, serif;
    font-size: 12px;
    text-align: center;
    width:115px;
}
/* ----------------------------------------------------- captcha fin ----------------------------------------------- */

/*--------------------------------------------------------------------------------------------------------------
------------------------------------------------- Ajout de styles CSS ------------------------------------------
---------------------------------------------------------------------------------------------------------------- */

 
h2.titre{
    text-align: center;
    background-color: rgba(240,128,128,0.2);
    line-height:40px;
}
.titre-evenements {
    display:flex;
    justify-content: center; 
    background-color: rgba(240,128,128,0.2);
}
/* Aucune dépense pour cette date */
.titre-evenements-aucun{
    line-height: 30px;
    font-size: 18px;
    display:flex;
    justify-content: center; 
    background-color: rgba(144,238,144,0.2);
}

.total-depenses {
    color: red;
    font-weight: bold;
    font-size: 20px;
}
/* affichage disposition des mois */
.calendrier{
    display: flex;
    flex-wrap:wrap;
    justify-content:center;
}
.recherche-montant{
    display: flex;
    justify-content:center;
    background-color: rgba(0,0,200,0.1);
}
.saisie{
    display: flex;
    justify-content:center;
}
.mois-annee {
        color: rgba(0,0,255,0.8); /* Couleur bleue pour le mois et l'année */
        font-weight: bold; /* Gras pour mettre en valeur */
        font-size: 18px;
    }
table.calendrierhaut {
    border-collapse: collapse;
    margin: 2px;
    width: 100%; /* Adapte la largeur du tableau à la largeur disponible */
    max-width: 10%; /* Largeur maximale du tableau */
}
th, td {
    padding: 3px; /* Espace intérieur pour les cellules */
    font-size: 18px; /* Taille de la police */
    text-align: center; /* Centrer le texte */
    vertical-align: middle; /* Aligner le texte en haut */
}
th {
    background-color: rgba(0,0,200,0.1); /* Couleur de fond des en-têtes de colonnes */
}

.valide-event.rouge{
    color: green; /* Couleur verte pour les événements valides */
    background-color: rgba(144,238,144,0.5);
    font-weight: bold;
}
.valide-event{
    color: green; /* Couleur verte pour les événements valides */
    background-color: rgba(144,238,144,0.5);
    font-weight: bold;
}
.red-text {
    color: red; /* Couleur rouge pour le texte des dépenses si non nul */
}
.nonvalide-event {
    color: black; /* Couleur rouge pour les événements non valides */
}
.rouge{
    color:red;
    font-weight: bold;
}

.bleue{
    color:rgba(0,0,255,0.8);
    font-weight: bold;
}

/* couleur des cases sur les jours du calendrier*/
.valid-date {
    background-color: lightgreen; /* Couleur de fond verte pour les dates avec tous les événements validés */
}
.invalid-date {
    background-color: lightcoral; /* Couleur de fond rouge pour les dates avec au moins un événement non validé */
}
.aucune-date{
    background-color: rgba(240,240,240,1); 
}
/******************************** */
.tableau-evenement{
    display:flex;    
    justify-content: center; 
    flex-wrap: wrap;
}
.choix-annee{
    margin:20px 20px 0 0;  
    display:flex;        
    justify-content: center;
}
a.annee{
    text-decoration: none;
    color : black;
    font-weight: bold; 
}
/* Style du bouton submit dans ajout*/
.submit-btn {
    background-color: rgba(0,200,0,0.6); /* Couleur de fond verte */
    color: black; /* Couleur du texte blanche */
    border: none; /* Pas de bordure */
    padding: 3px ; /* Espacement interne */
    width:66px;
    text-align: center; /* Centrer le texte */
    text-decoration: none; /* Pas de soulignement */
    display: inline-block; /* Permet de définir la largeur du bouton */
    font-size: 15px; /* Taille de la police */
    margin: 0 4px; /* Espacement autour du bouton */
    cursor: pointer; /* Curseur en forme de main au survol */
    border-radius: 4px; /* Coins arrondis */
    transition: background-color 0.3s ease; /* Transition douce pour le survol */
}
/* Style au survol du bouton */
.submit-btn:hover {
    background-color: rgba(0,200,0,1); /* Couleur de fond plus foncée au survol */
}

/* Style du bouton annulé dans ajout*/
.cancel-btn{
    background-color: rgba(250,200,0,0.6); /* Couleur de fond rouge */
    color: black; /* Couleur du texte blanche */
    border: none; /* Pas de bordure */
    padding: 3px ; /* Espacement interne */
    width:66px;
    text-align: center; /* Centrer le texte */
    text-decoration: none; /* Pas de soulignement */
    display: inline-block; /* Permet de définir la largeur du bouton */
    font-size: 15px; /* Taille de la police */
    margin: 0 4px; /* Espacement autour du bouton */
    cursor: pointer; /* Curseur en forme de main au survol */
    border-radius: 4px; /* Coins arrondis */
    transition: background-color 0.3s ease; /* Transition douce pour le survol */
}

.cancel-btn:hover{
    background-color: rgba(250,200,0,1); /* Couleur de fond plus foncée au survol */
}

a.lien-modif{
        color: black; /* Couleur du texte blanche */            
        text-align: center; /* Centrer le texte */
        text-decoration: none; /* Pas de soulignement */          
        cursor: pointer; /* Curseur en forme de main au survol */
        transition: background-color 0.3s ease; /* Transition douce pour le survol */
}
    td.lien-modif{
    background-color: rgba(240,128,128,0.8); /* Couleur de fond rouge */
}
    td.lien-modif:hover {
    background-color: rgba(240,128,128,1); /* Couleur de fond plus foncée au survol */
}
.selected-date {
    background-color: rgba(46,46,255,0.8);
    color:white;
}

/* Formulaire modifications */

.submit-mod-btn {
    background-color: rgba(0,200,0,0.6); /* Couleur de fond verte */
    color: black; /* Couleur du texte blanche */
    border: none; /* Pas de bordure */
    padding: 5px 10px; /* Espacement interne */
    text-align: center; /* Centrer le texte */
    text-decoration: none; /* Pas de soulignement */
    display: inline-block; /* Permet de définir la largeur du bouton */
    margin: 2px 2px; /* Espacement autour du bouton */
    cursor: pointer; /* Curseur en forme de main au survol */
    border-radius: 4px; /* Coins arrondis */
    transition: background-color 0.3s ease; /* Transition douce pour le survol */
}
/* Style au survol du bouton */
.submit-mod-btn:hover {
    background-color: rgba(0,200,0,1); /* Couleur de fond plus foncée au survol */
}

.submit-sup-btn {
    background-color: rgba(240,128,128,0.6); /* Couleur de fond rouge */
    color: black; /* Couleur du texte blanche */
    border: none; /* Pas de bordure */
    text-align: center; /* Centrer le texte */
    text-decoration: none; /* Pas de soulignement */
    display: inline-block; /* Permet de définir la largeur du bouton */
    margin: 2px 2px; /* Espacement autour du bouton */
    cursor: pointer; /* Curseur en forme de main au survol */
    border-radius: 4px; /* Coins arrondis */
    transition: background-color 0.3s ease; /* Transition douce pour le survol */
}
/* Style au survol du bouton */
.submit-sup-btn:hover {
    background-color: rgba(240,128,128,1); /* Couleur de fond plus foncée au survol */
}

.cancel-btn-mod{
    background-color: rgba(250,200,0,0.6); /* Couleur de fond rouge */
    color: black; /* Couleur du texte blanche */
    border: none; /* Pas de bordure */
    text-align: center; /* Centrer le texte */
    text-decoration: none; /* Pas de soulignement */
    display: inline-block; /* Permet de définir la largeur du bouton */
    margin: 2px 2px; /* Espacement autour du bouton */
    cursor: pointer; /* Curseur en forme de main au survol */
    border-radius: 4px; /* Coins arrondis */
    transition: background-color 0.3s ease; /* Transition douce pour le survol */
}
/* Style au survol du bouton */
.cancel-btn-mod:hover {
    background-color: rgba(250,200,0,1); /* Couleur de fond plus foncée au survol */
}

label.mod {
    display: block; /* Affiche le label comme un bloc pour qu'il soit au-dessus de l'input */
    margin-bottom: 0.2em; /* Espace entre le label et le champ de saisie */
}

input[type='text']
select {   
    padding: 0.2em; /* Espacement intérieur du champ de saisie */
    box-sizing: border-box; /* Inclut le padding et la bordure dans la largeur totale */
}
select#types{
    margin-top: 2
    0px;
}
input.cancel-btn-mod{
    margin-top: 20px;
    height:20px;
    width:65px;
}
input.submit-mod-btn{
    margin-top: 20px;
    height:20px;
    width:65px;
    line-height: 10px;
}
input.submit-sup-btn{
    margin-top: 20px;
    height:20px;
    width:65px;
}


.blue-background {
    background-color: blue;
    color: white;
}

/* Couleur de fond des tupes de paiement suivant les cartes */
.blue-color {
    background-color: rgba(10,220,255,0.8);
    color: black; 
}
.darkblue-color {
    background-color: rgba(0,0,200,1);
    color: white; 
}
.yellow-color {
    background-color: rgba(255,215,130,0.8);
    color: black; 
}
.green-color {
    background-color: rgba(150,255,150,0.8);
    color: black; 
}
.default-color {
    background-color: white;  /* Couleur par défaut, si nécessaire */
    color: black; 
}
.readonly{
    background-color: rgba(233,233,237,1);
    color: black;
    border-radius: 4px;
    border:solid 1px rgba(143,143,157,1);
    height:18px
}
.valider{   
    margin-top:-13px;
}
.case-valider{
    display:flex;   
}
.autrepaiement{
    margin-top:3px;
}
.pseudo{
    color:blue;
}

/* Styles généraux pour les boutons */
button.deconnexion{
    display: inline-block; /* Affichage en ligne */
    padding: 5px 5px; /* Espacement autour du texte */
    margin: 3px; /* Espacement entre les boutons */
    background-color: rgba(250,200,0,0.6); /* Couleur de fond */
    color: white; /* Couleur du texte */
    text-decoration: none; /* Supprime le soulignement */
    border-radius: 5px; /* Coins arrondis */
    transition: background-color 0.3s ease; /* Effet de transition */
}
/* Style au survol des boutons */
button.deconnexion:hover {
    background-color: rgba(250,200,0,1); /* Couleur de fond au survol */
}


/* Style pour la fenêtre modale */
.modal {
    display: none; /* Masquer par défaut */
    position: fixed;
    z-index: 1;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.4); /* Fond sombre transparent */
    justify-content: center; /* Centrer horizontalement */
    align-items: center; /* Centrer verticalement */
}

/* Contenu de la modale */
.modal-content {
    background-color: white;
    border: 1px solid #888;
    padding: 20px;
    width: 80%;
    max-width: 600px;
    margin: auto; /* Centrer le contenu */
    border-radius: 8px; /* Bords arrondis */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Ombre */
}
.form-group {
    margin-bottom: 15px; /* Ajustez la valeur selon vos besoins */
}

/* Styles généraux pour les boutons */
.btn-nav, .maj-validation{
    display: inline-block; /* Affichage en ligne */
    padding: 5px 5px; /* Espacement autour du texte */
    margin: 3px; /* Espacement entre les boutons */
    background-color: #007BFF; /* Couleur de fond */
    border-radius: 5px; /* Coins arrondis */
    transition: background-color 0.3s ease; /* Effet de transition */
}

/* Style au survol des boutons */
.btn-nav:hover {
    background-color: #0056b3; /* Couleur de fond au survol */
}

/* Style pour le bouton "Afficher l'année" */
.btn-nav.annee,.maj-validation {
    background-color: #28a745; /* Couleur de fond différente */
    color: white; /* Couleur du texte */
}

.btn-nav.annee,.maj-validation:hover {
    background-color: #218838; /* Couleur de fond au survol pour le bouton "Afficher l'année" */
}





/* ***************************************************************************************************
/* ------------------------  responsive pour les évènements et calendrier  ---------------------------
/* ---------------------------------------------------------------------------------------------------

/* Styles de base pour le tableau */

@media (max-width: 700px) {
    /* Transformer le tableau en cartes pour mobile */
    .tableau-evenement table,
    .tableau-evenement thead,
    .tableau-evenement tbody,
    .tableau-evenement th,
    .tableau-evenement td,
    .tableau-evenement tr {
      font-size: 12px;     
    }
    .calendrier{
    display: flex;
    flex-wrap:wrap;
    justify-content:center;
    }
    
    
}
@media (max-width: 500px) {
    /* Transformer le tableau en cartes pour mobile */
    .tableau-evenement table,
    .tableau-evenement thead,
    .tableau-evenement tbody,
    .tableau-evenement th,
    .tableau-evenement td,
    .tableau-evenement tr {
      font-size: 9px;   
    } 
}

.espacement{
    margin:2px;
}