.background{

    background-image: url('images/fond1.jpg');
    background-size: cover; 
    background-position: center;   
  }

.conteneur_flex_body{
        
    display: flex;
    flex-direction: column;      
    justify-content: space-between;

    align-items: center;
    height: 50vh;

    background-color: rgba(201, 22, 22, 0);
}

.conteneur_titre{
    
    background-color: rgba(194, 24, 24, 0);   
}

.conteneur_flex_creation_liste{

    display: flex;
    flex-direction: row;      
    justify-content: space-between;

    align-items: center;
   

    background-color: rgba(255, 255, 255, 0);

}


.conteneur_creation_entree_gauche{

   
    background-color: rgba(255, 255, 255, 0);
   
}

.conteneur_flex_creation_gauche_droite{
  
    display: flex;
    flex-direction: row; 
    gap: 10%;
    background-color: rgba(255, 255, 255, 0);
}

.conteneur_creation_option_droite{
    
    background-color: rgba(255, 255, 255, 0);
   
}
.conteneur_creation_soumission{
    margin-right: 12px;
    background-color: rgba(255, 255, 255, 0);
}

.conteneur_liste_droit{
    
    width: 80%;
    
    text-align: center;
    background-color: rgb(255, 255, 255);
      
}

.conteneur_flex_recherche{

    display: flex;
    flex-direction: column;
    gap: 10%;
    text-align: center;

    width: 80%;
    border: 1px solid;
    padding: 3%;

    background-color: rgba(255, 255, 255, 0);

}
.btnRecherche{

   margin-top: 15px;

    width: 50%;
    height: 30px;
    border: none;
    border-radius: 15px;
    background-color: rgb(255, 193, 122);
    
}

.btnSoumettre{

    width: 110px;
    height: 30px;
    border: none;
    border-radius: 15px;
    background-color: rgb(255, 193, 122);

}

.btnReinitialise{

    margin-top: 10px;
    border-radius: 15px;
    background-color: rgba(255, 255, 255, 0.411);

}

@media only screen and (max-width: 770px) {

    body {
        
        background-size: cover; 
        background-position: center; 
        background-attachment: fixed;

        overflow-x: hidden; /* Empêche le défilement horizontal si la fenêtre est redimensionnée en dessous de la taille spécifiée */
        /*min-width: 565px;*/
    }
    .conteneur_flex_body{
        
        /*height: 50vh;*/
    
        background-color: rgba(219, 17, 17, 0);
    }
    
    .conteneur_titre{

        width: 60%;
        text-align: center;
        background-color: rgba(255, 255, 255, 0);
       
    }
    
    .conteneur_flex_creation_liste{
    
        width: 80%;
        align-items: center;
        text-align: center;
       
        gap: 8%;

}
    
    
    .conteneur_creation_entree_gauche{
    
       
        background-color: rgba(255, 255, 25,0);
       
    }
    
    .conteneur_flex_creation_gauche_droite_soumission{
        
        display: flex;
        flex-direction: row; 
        align-items: center;
        text-align: center;
        gap: 8%;
        background-color: rgba(70, 177, 180, 0);
    }
    
    .conteneur_creation_option_droite{
        
        background-color: rgba(255, 255, 255, 0);
       
    }
    .conteneur_creation_soumission{
        /*margin-right: 12px;*/
        background-color: rgba(255, 255, 255, 0);
    }
    
    .conteneur_liste_droit{
        
        width: 80%;
        
        text-align: center;
        background-color: rgb(255, 255, 255);
          
    }
    
    .conteneur_flex_recherche{
    
        display: flex;
        flex-direction: column;
        gap: 10%;
        text-align: center;
    
        width: 80%;
        border: 1px solid;
        padding: 3%;
    
        background-color: rgba(255, 255, 255, 0);
    
    }

    .btnRecherche{
    
       margin-top: 15px;
    
        width: 50%;
        height: 30px;
        border: none;
        border-radius: 15px;
    }
    
    .btnSoumettre{
    
        width: 110px;
        height: 30px;
        margin-top: 20%;
        border: none;
        border-radius: 15px;
    }
    
    .btnReinitialise{
    
        margin-top: 10px;
        border-radius: 15px;
        
    
    }
}

/* Tablette (Écrans moyens) */
@media only screen and (min-width: 771px) and (max-width: 991px) {
    /* Styles spécifiques aux écrans moyens (tablettes) */

    body {
        
        background-size: cover; 
        background-position: center; 
        background-attachment: fixed;

        overflow-x: hidden; /* Empêche le défilement horizontal si la fenêtre est redimensionnée en dessous de la taille spécifiée */
        min-width: 565px;
}

.conteneur_flex_creation_liste{
    
    width: 80%;
    align-items: center;
    text-align: center;       
    gap: 8%;

}

.conteneur_flex_creation_gauche_droite_soumission{
      
        display: flex;
        flex-direction: row;         
        gap: 8%;        
        background-color: rgba(153, 153, 17,0);
        width: 100%;
}

.conteneur_creation_option_droite{
        
    background-color: rgba(255, 255, 255, 0);
   
}

.conteneur_creation_soumission{
    /*margin-right: 12px;*/
    background-color: rgba(255, 255, 255, 0);
}

.conteneur_creation_entree_gauche{
   
    background-color: rgba(255, 255, 255, 0);
   
}

.btnSoumettre{
    
    width: 110px;
    height: 30px;
    margin-top: 20%;
    border: none;
    border-radius: 15px;
}
    
    
}

/* Desktop (Grands écrans) */
@media only screen and (min-width: 992px) {
    /* Styles spécifiques aux grands écrans (ordinateurs de bureau, ordinateurs portables) */

    body {
        
        background-size: cover; 
        background-position: center; 
        background-attachment: fixed;

        overflow-x: hidden; /* Empêche le défilement horizontal si la fenêtre est redimensionnée en dessous de la taille spécifiée */
        min-width: 565px;
    }

    .conteneur_flex_creation_liste{
    
        width: 80%;
        justify-content: center;
        align-items: center;
        text-align: center;       
        gap: 8%;
    
    }
    
    .conteneur_flex_creation_gauche_droite_soumission{
          
            display: flex;
            flex-direction: row;      
            align-items: center;  
            text-align: center; 
            gap: 10%;        
            background-color: rgba(84, 35, 175, 0);
            width: 50%;
            justify-content: space-between;
    }
    
    .conteneur_creation_option_droite{
            
        background-color: rgba(255, 255, 255, 0);
       
    }
    
    .conteneur_creation_soumission{
        /*margin-right: 12px;*/
        background-color: rgba(255, 255, 255, 0);
    }
    
    .conteneur_creation_entree_gauche{
       
        background-color: rgba(255, 255, 255, 0);
       
    }
    
    .btnSoumettre{
        
        width: 110px;
        height: 30px;    
        margin-top: 20%;
        border: none;
        border-radius: 15px;
    }
    
    .conteneur_flex_recherche{
        
        display: flex;
        flex-direction: column;
        gap: 10%;
        text-align: center;
    
        width: 50%;
        border: 1px solid;
        padding: 3%;
    
        background-color: rgba(255, 255, 255, 0);
    
    }
    
    .conteneur_liste_droit{
            
        width: 50%;
        
        text-align: center;
        background-color: rgb(255, 255, 255);
          
    }
}

.note{
   
    /*border: 2px solid blue;*/
    background-color: rgb(183, 225, 245);
}

.email{    
    
     /*border: 2px solid green;*/

    background-color: rgba(255, 237, 187, 0.836);
}

.todo{
    
     /*border: 2px solid red;*/
     background-color: rgb(248, 206, 190);
}