/*
                  ___ ___ _ _ ___ ___ ___ ___ ___
                | _ ) __| \| |/ __|_ _| _ ) _ ) __|
                | _ \ _|| .` | (_ || || _ \ _ \__ \
                |___/___|_|\_|\___|___|___/___/___/ 

*/

/* ---------------------------styles.css---------------------------------------------- */

/*definition des couleurs-------------------------------------------------------------*/

:root {
    --blue: #008DD5;
    --gris1:#323031;
    --gris2: #3D3B3C;
    --gris3: #C1BDB3;
    --rouge: rgb(255,0,0);
    --noir: rgb(0,0,0);
    --blanc: rgb(255,255,255);
    --hover:  rgb(91, 111, 177);
    
}

/*parametrage des images--------------------------------------------------------------*/
img         {
  margin: auto;
  margin-bottom: 10px;
  display: block; /* Pour résoudre un problème dans certains navigateurs */

/*chargement des polices d'evriture---------------------------------------------------*/  
}
@font-face {
    font-family: 'Bazinga'; 
    src: url('/police/Bazinga.otf') format('opentype'); 
    font-weight: normal;
    font-style: normal;
  }

 @font-face {
    font-family: 'Smario';
    src: url('/police/Smario.ttf') format('truetype'); 
    font-weight: normal;
    font-style: normal;
  }
  
  @font-face {
    font-family: 'Neonblitz'; 
    src: url('/macollection/police/Neonblitz.ttf') format('truetype'); 
    font-weight: normal;
    font-style: normal;
  }

  @font-face {
    font-family: 'Vintage'; 
    src: url('/macollection/police/Vintage.ttf') format('truetype'); 
    font-weight: normal;
    font-style: normal;
  }

  @font-face {
    font-family: 'Classroom'; 
    src: url('/macollection/police/Classroom.ttf') format('truetype'); 
    font-weight: normal;
    font-style: normal;
  }

  @font-face {
    font-family: 'clock'; 
    src: url('/police/clock.ttf') format('truetype'); 
    font-weight: normal;
    font-style: normal;
  }

  @font-face {
    font-family: 'Abrosia';
    src: url('/police/Abrosia.ttf') format('truetype'); 
    font-weight: normal;
    font-style: normal;
  }
/*parametrage du corp de la page--------------------------------------------------------*/

body {
    background-image: url('/image/code.jpg');
    background-color: var(--gris2);
    margin: 0 auto;
    margin-bottom: 150px;
    padding: 0;
}

h2 {
    color: var(--blue);
    font-family: 'Bazinga', sans-serif;
    font-size: 200%;
    text-align: center;
}

h4 {
  color: var(--blue);
  font-family: 'Bazinga', sans-serif;
  font-size: 300%;
  text-align: center;
  margin-top: 0%;
}

/*parametrage des boutons-----------------------------------------------------------------*/


.ButtonLinkPage 
              {
                font-family: 'Smario';
                font-weight: bold;
                display: inline; /* Les éléments seront affichés en ligne les uns à côté des autres. */
                margin: 0 auto;/* Marge de 0 en haut et en bas, 10px à gauche et à droite. */
                text-align: center;
                width: 110px;/*largeur du bouton*/
                height: 40px;/*hauteur du bouton*/
                background-color: var(--gris2);/* Couleur de fond des boutons */
                color: var(--blue);/* Couleur du texte des boutons */
                border: none; /* Pas de bordure autour des boutons. */
                border-radius: 7px; /* Rayon de bordure de 5px pour arrondir les coins des boutons. */
                cursor: pointer; /* Le curseur prendra la forme d'une main pour indiquer que les boutons sont cliquables. */
                font-size: 16px; /* Taille de la police du texte à 16px. */
                transition: background-color 0.3s ease;/* Transition fluide de la couleur de fond sur une durée de 0.3 seconde avec une fonction d'accélération. */
                position: relative; /* Ajoutez cette ligne pour permettre le positionnement relatif. */
  
              }


/*effet de survole---------------------------------------------------------------------------------*/

/*changement de couleur quand la sourie survole un bouton*/

.ButtonLinkPage:hover
              {
                background-color: var(--hover);
              }
/* Couleur de surbrillance lors du survol d'une cellule du tableau  */
tr:hover td   
              {
                background-color: var(--hover); 
              }
/*definition du Entete/pied de page----------------------------------------------------------------*/

#footer 
              {
                font-family: 'classroom', sans-serif;
                position: fixed;
                bottom: 0;
                left: 0;
                width: 100%;
                background-color: #3333336c;
                color: #fff;
                text-align: center;
                padding: 10px;
                line-height: 0.5;
              }

/* Style pour le paragraphe dans le pied de page */
#footer p {
  font-family: 'Courier New', Courier, monospace;
  margin: 0; /* Supprime la marge par défaut du paragraphe */
}

/* Style pour l'icône de courrier électronique */
#footer i.fas.fa-envelope {
  margin-top: 10px; /* Ajoute une marge au-dessus de l'icône pour l'espacement */
  font-size: 24px; /* Ajuste la taille de l'icône */
  color: #fff; /* Couleur de l'icône */
}


/*definition des formulaires----------------------------------------------------------------------*/

/*formulaire pour la page todolist*/

/*formulaire qui englobe la barre de saisie #taskInput et le bouton #ButtonAjouter*/

#taskForm 
              {
                text-align: center;
              }

/*champ de saisie à l'intérieur du formulaire*/

#taskInput
              {
                margin: 0 auto;
                border-radius: 7px;
                font-size: 16px;
                display: inline;
                position: relative;
                margin: 0 auto;
                width: 30%;
                height: 40px;
              }

/*formulaire pour la page connexion*/

/* Style pour le cadre avec ombre */
#login-container {
  background-color: var(--gris2);
  align-items: center;
  width: 30%;
  margin: 0 auto;
  margin-top: 100px;
  padding: 20px;
  border: 5px solid var(--blue);
  border-radius: 8px;
  box-shadow: 0 0 30px rgba(40, 61, 131, 0.616);
  text-align: center;
}

/* Style pour les champs de formulaire connexion */
#InputUser {
  background-color: var(--gris3);
  display: block;
  margin: 0 auto;
  width: 50%;
  padding: 10px;
  margin-bottom: 10px;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
}

#InputPassword {
  background-color: var(--gris3);
  display: block;
  margin: 0 auto;
  width: 50%;
  padding: 10px;
  margin-bottom: 10px;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
}

/*style pour les tableau---------------------------------------------------------------------------*/

/*parametrage du fond du tableau todolist*/

#TacheTable td div 
              {
                display: flex;
                justify-content: space-between;
                align-items: right;
                color: var(--gris2);/*definie la couleur du texte des taches*/
                font-weight: bold;
                font-family: sans-serif;
              }

/*pour que le bouton supprimer soit a droite de la cellule*/

td.position-relative 
              {
                position: relative;
              }

.cell-content-container 
              {
                display: flex;
                justify-content: space-between;
                align-items: center;
                width: 80%; /* Assurez-vous que la div occupe toute la largeur de la cellule */
                white-space: normal;/* permet au contenu de la cellule de passer a la ligne normalement*/
              }

/* Ajoute une règle pour ajuster le texte à côté du bouton de suppression */

td div span 
              {
                flex: 1; /* La partie texte utilise tout l'espace disponible */
                margin-right: 10px; /* Marge entre le texte et le bouton */
              }

/*definie les parametre du tableau avec les taches */

table 
              {
                border-collapse: separate;
                border-spacing: 7px;
                border-radius: 10px;
                width: 80%;
                margin: 0px auto;
                background-color: var(--gris2);
  
              }

/*definie les parametre des cellules*/

td 
              {
                font-family: '', sans-serif;
                border: 1px solid var(--gris2); 
                border-radius: 10px;
                padding: 10px;
                height: 20%;
                text-align: left;
                font-size: 150%;
                background-color: var(--blue);
                color: var(--gris2); /* Couleur du texte dans les cellules du tableau */
                transition: background-color 0.3s ease; /* Ajout de la transition pour un effet en douceur */
                white-space: nowrap;/*empeche le text de passer a la ligne avant le logo*/
              }



/* Ajoutez d'autres règles CSS en utilisant vos variables */