html {
	overflow: hidden;
  height:100%;
}

body {
  font-family: "Open Sans", sans-serif;
  color: #444444;
  height:100%;
  margin:0;
  padding:0;
}

/* Annimation */
/* Add Zoom Animation */
.animate {
    -webkit-animation: animatezoom 0.6s;
    animation: animatezoom 0.6s
  }
  
  @-webkit-keyframes animatezoom {
    from {-webkit-transform: scale(0)} 
    to {-webkit-transform: scale(1)}
  }
    
  @keyframes animatezoom {
    from {transform: scale(0)} 
    to {transform: scale(1)}
  }
  /* fin annimation */
  .header-hamburger-style {
    font-size: 15px;
  }
  .my-modal-attente-center-content {
    text-align: -webkit-center;
}

.hidden {
  display: none;
}

.visible {
  display: block;
}

.centered {
  text-align: center;
}

.webkit-centered {
  text-align: -webkit-center;
}

.green-text {
  color: #04AA6D;
}

.modal-bg {
  background-color: #f1f1f1;
}

.font-size-15 {
  font-size:15px;
}

.home-img {
  position: absolute; 
  top: 5em; 
  bottom: 0; 
  width: 100%; 
  z-index: -1; 
  height: 100%;
}

  /******************************************************************************/
  /*                     DEBUT div du body                                      */
  /******************************************************************************/ 
/* PARTIE HEADER */
  header {
    transition: all 0.5s;
    background: rgb(255, 255, 255);
    z-index: 997;
    /*padding: 15px 0;*/
    height:5em;
    border-bottom: 1px solid;
    border-bottom-color: black;
  }

  header .afficher {
      display: block;
  }
  
  header .cacher {
    display: none;
  }
  
  header .logo { grid-area: logo; }
  header .titre { grid-area: titre; }
  header .topnav { grid-area: menu; }
  
/*
      'logo titre titre titre titre titre'
      'logo menu menu menu menu menu';
*/

  header .grid-container-header {
    display: grid;
    grid-template-areas:
      'logo titre menu menu';
    gap: 1px;
    padding: 1px;
    align-items: center;
  }
  
  header .grid-container-header > div {
    text-align: center;
  }
  
  header .titre .logo {
    display: block;
  }
  
  header .topnav {
    height: fit-content;
    overflow: hidden;
    background-color: white;
  }
  
  header .topnav a {
    float: left;

    color: black;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    font-size: 17px;
  }
  
  header .active {
    background-color: rgb(255, 255, 255);
    color: white;
  }
  
  header .topnav .icon {
    display: none;
  }
  
  header .dropdown {
    float: left;
    overflow: hidden;
  }
  
  header .dropdown .dropbtn {
    font-size: 17px;    
    border: none;
    outline: none;
    color: black;
    padding: 14px 16px;
    background-color: inherit;
    font-family: inherit;
    margin: 0;
  }
  
  header .dropdown-content {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
  }
  
  header .dropdown-content a {
    float: none;
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
    text-align: left;
  }
  
  header .topnav a:hover, .dropdown:hover .dropbtn {
    background-color: #555;
    border-radius: 50%;
    color: white;
  }
  
  header .topnav .dropdown-content a {
    border-radius: 0%;
  }

  header .dropdown-content a:hover {
    background-color: #ddd;
    color: black;
  }
  
  header .dropdown:hover .dropdown-content {
    display: block;
  }
  header .topnav a.icon {
    float: right;
    display: block;
  } 
  header .notification {
    background-color: #f9f9f9;
    color: white;
    text-decoration: none;
    padding: 15px 26px;
    position: relative;
    display: inline-block;
    border-radius: 2px;
  }
  
  header .notification:hover {
    background: red;
  }
  
  header .notification .badge {
    position: absolute;
    top: -10px;
    right: -10px;
    padding: 5px 10px;
    border-radius: 50%;
    background: red;
    color: white;
  }

/* PARTIE MAIN */
/*
  main {
    transition: all 0.5s;
    background: rgb(255, 255, 255);
    /* z-index: 997; */
    /*padding: 15px 0;*/
    /*position:absolute;
    width:100%;
    top:5em;
    bottom:3em;
    border: 1px solid;
    border-color: black;
    align-items: center;
  }*/

  main {
    position: absolute;
    top: 5em;              /* correspond à la hauteur de ton header */
    bottom: 3em;           /* correspond à la hauteur de ton footer */
    left: 0;
    right: 0;
    width: 100%;
    overflow-y: auto;      /* rend la zone scrollable */
    overflow-x: hidden;    /* évite le scroll horizontal */
    background: rgb(255, 255, 255);
    border: 1px solid black;
  }

  main .afficher {
      display: block;
  }
  
  main .cacher {
    display: none;
  }
  
  main .main_menu { grid-area: menu; }
  main .main_content { grid-area: content; }

  main .grid-container-main {
    display: grid;
    grid-template-areas:
      'menu content content content content';
    gap: 1px;
    padding: 1px;
    align-items: center;
  }

  main .grid-container-main-sans-menu {
    display: grid;
    grid-template-areas:
      'content content content content content';
    gap: 1px;
    padding: 1px;
    align-items: center;
  }  
  
  main .grid-container-main > div {
    text-align: center;
  }
  
  main .main_menu .main_content {
    display: block;
  }

/* Style the tab */
main .main_menu {
  float: left;
  border: 1px solid #ccc;
  background-color: #f1f1f1;
}

/* Style the buttons inside the tab */
main .main_menu a {
  display: block;
  background-color: inherit;
  color: black;
  padding: 22px 16px;
  width: 100%;
  border: none;
  outline: none;
  text-align: left;
  cursor: pointer;
  transition: 0.3s;
  font-size: 17px;
}

/* Change background color of buttons on hover */
main .main_menu a:hover {
  background-color: #ddd;
}

/* Create an active/current "tab button" class */
main .main_menu a.active {
  background-color: #ccc;
}

/* Style the tab content */
main .main_content {
  float: left;
  padding: 0px 12px;
}

main .main-modal-content {
  text-align: center;
}

/* PARTIE FOOTER */

  footer {
    position:absolute;
    width:100%;
    height:3em;
    left: 0;
    bottom: 0;
    width: 100%;
    background-color: white;
    color: black;
    text-align: center;
    border-top: 1px solid;
    border-top-color: black;
  }
  
  /******************************************************************/
  /*                       MODAL                                    */
  /******************************************************************/
  /* The Modal (background) */
  .modal {
     /*display: none; Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 1; /* Sit on top */
    padding-top: 100px; /* Location of the box */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
  }
  
  /* Modal Content */
  .modal-content {
    border-radius: 30px;
    background-color: #fefefe;
    margin: auto;
    padding: 20px;
    border: 1px solid #888;
    width: 80%;
  }
  
  /* The Close Button */
  .modal .close {
    color: #aaaaaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
  }
  
  .modal .close:hover,
  .modal .close:focus {
    color: #000;
    text-decoration: none;
    cursor: pointer;
  }
  
  /* Clear floats */
  .modal .container {
    padding: 16px;
  }
  
  .modal .container .clearfix::after {
    content: "";
    clear: both;
    display: table;
  }
  
  /* Set a style for all buttons */
  .modal .messagebtn {
    background-color: #bfc2c1;
    color: white;
    padding: 14px 20px;
    margin: 8px 0;
    border: none;
    cursor: pointer;
    width: 100%;
  }
  
  /* Full-width input fields */
  .modal .inputFormLogin {
    width: 100%;
    padding: 12px 20px;
    margin: 8px 0;
    display: inline-block;
    border: 1px solid #ccc;
    box-sizing: border-box;
  }
  
  /* Set a style for all buttons */
  .modal .loginbtn {
    background-color: #04AA6D;
    color: white;
    padding: 14px 20px;
    margin: 8px 0;
    border: none;
    cursor: pointer;
    width: 100%;
  }
  .modal .loginbtn:hover {
    opacity: 0.8;
  }

    /* Set a style for all buttons */
    .modal .logoutbtn {
      background-color: #ff0606;
      color: white;
      padding: 14px 20px;
      margin: 8px 0;
      border: none;
      cursor: pointer;
      width: 100%;
    }
    .modal .logoutbtn:hover {
      opacity: 0.8;
    }

  .modal .messagebtn:hover {
    opacity: 0.8;
  }
  /* Center the image and position the close button */
  .modal .imgcontainer {
    text-align: center;
    margin: 24px 0 12px 0;
    position: relative;
  }
  
  .modal img.avatar {
    width: 40%;
    border-radius: 50%;
  }
  
  /* Extra styles for the cancel button */
  .modal .cancelloginbtn {
    width: auto;
    color: white;
    padding: 10px 18px;
    background-color: #f44336;
    cursor: pointer;
    border: none;
  }
  
  /* Set a style for all buttons */
  .modal .annulerQuestionbtn, .validerQuestionbtn {
    padding: 14px 20px;
    margin: 8px 0;
    border: none;
    cursor: pointer;
    width: 100%;
    opacity: 0.9;
  }
  
 /* The Close Button */
 .modal .close {
  color: #aaaaaa;
  float: right;
  font-size: 28px;
  font-weight: bold;
}

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

  /* Float cancel and delete buttons and add an equal width */
  .modal .annulerQuestionbtn, .validerQuestionbtn {
    float: left;
    width: 50%;
  }
  
  /* Add a color to the cancel button */
  .modal .validerQuestionbtn {
    background-color: #04AA6D;
    color: black;
  }
  
  /* Add a color to the delete button */
  .modal .annulerQuestionbtn {
    background-color: #f44336;
  }
  
  .modal span.psw {
    float: right;
    padding-top: 9px;
  }
  /******************************************************************************/
  /*                      MODAL SCROLL                                          */
  /******************************************************************************/
  /* The modal-scroll (background) */
  .modal-scroll {
    /*display: none;  Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 1; /* Sit on top */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
  }
  
  /* modal-scroll Content */
  .modal-scroll-content {
    background-color: #fefefe;
    margin: auto;
    padding: 20px;
    border: 1px solid #888;
    width: 80%;
  }
  
  /* The Close Button */
  .modal-scroll .close {
    color: #aaaaaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
  }
  
  .modal-scroll .close:hover,
  .modal-scroll .close:focus {
    color: #000;
    text-decoration: none;
    cursor: pointer;
  }
  
  /* Clear floats */
  .modal-scroll .container {
    padding: 16px;
  }
  
  .modal-scroll .container .clearfix::after {
    content: "";
    clear: both;
    display: table;
  }
  
  /* Set a style for all buttons */
  .modal-scroll .messagebtn {
    background-color: #bfc2c1;
    color: white;
    padding: 14px 20px;
    margin: 8px 0;
    border: none;
    cursor: pointer;
    width: 100%;
  }
  
  /* Full-width input fields */
  .modal-scroll .inputFormLogin {
    width: 100%;
    padding: 12px 20px;
    margin: 8px 0;
    display: inline-block;
    border: 1px solid #ccc;
    box-sizing: border-box;
  }
  
  /* Set a style for all buttons */
  .modal-scroll .loginbtn {
    background-color: #04AA6D;
    color: white;
    padding: 14px 20px;
    margin: 8px 0;
    border: none;
    cursor: pointer;
    width: 100%;
  }
  .modal-scroll .loginbtn:hover {
    opacity: 0.8;
  }
  .modal-scroll .messagebtn:hover {
    opacity: 0.8;
  }
  /* Center the image and position the close button */
  .modal-scroll .imgcontainer {
    text-align: center;
    margin: 24px 0 12px 0;
    position: relative;
  }
  
  .modal-scroll img.avatar {
    width: 40%;
    border-radius: 50%;
  }
  
  /* Extra styles for the cancel button */
  .modal-scroll .cancelloginbtn {
    width: auto;
    color: white;
    padding: 10px 18px;
    background-color: #f44336;
    cursor: pointer;
    border: none;
  }
  
  /* Set a style for all buttons */
  .modal-scroll .annulerQuestionbtn, .validerQuestionbtn {
    padding: 14px 20px;
    margin: 8px 0;
    border: none;
    cursor: pointer;
    width: 100%;
    opacity: 0.9;
  }
  
  
  /* Float cancel and delete buttons and add an equal width */
  .modal-scroll .annulerQuestionbtn, .validerQuestionbtn {
    float: left;
    width: 50%;
  }
  
  /* Add a color to the cancel button */
  .modal-scroll .validerQuestionbtn {
    background-color: #04AA6D;
    color: black;
  }
  
  /* Add a color to the delete button */
  .modal-scroll .annulerQuestionbtn {
    background-color: #f44336;
  }
  
  .modal-scroll span.psw {
    float: right;
    padding-top: 9px;
  }
  
  .modal .topnav {
    height: fit-content;
    overflow: hidden;
    background-color: white;
  }
  
  .modal .topnav a {
    float: left;
    color: black;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    font-size: 17px;
  }
  
  .modal .active {
    background-color: rgb(255, 255, 255);
    color: white;
  }
  
  .modal .topnav .icon {
    display: none;
  }
  
  .modal .dropdown {
    float: left;
    overflow: hidden;
  }
  
  .modal .dropdown .dropbtn {
    font-size: 17px;    
    border: none;
    outline: none;
    color: black;
    padding: 14px 16px;
    background-color: inherit;
    font-family: inherit;
    margin: 0;
  }
  
  .modal .dropdown-content {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
  }
  
  .modal .dropdown-content a {
    float: none;
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
    text-align: left;
  }
  
  .modal .topnav a:hover, .dropdown:hover .dropbtn {
    background-color: #555;
    color: white;
  }

  .modal .dropdown-content a:hover {
    background-color: #ddd;
    color: black;
  }
  
  .modal .dropdown:hover .dropdown-content {
    display: block;
  }
  .modal .topnav a.icon {
    float: right;
    display: block;
  } 
  
  /******************************************************************************/
  /*                       FIN DES MODAL                                        */
  /******************************************************************************/

  /******************************************************************************/
  /*                       SPINNER                                              */
  /******************************************************************************/

  .lds-spinner {
    color: official;
    display: inline-block;
    position: relative;
    width: 80px;
    height: 80px;
  }
  .lds-spinner div {
    transform-origin: 40px 40px;
    animation: lds-spinner 1.2s linear infinite;
  }
  .lds-spinner div:after {
    content: " ";
    display: block;
    position: absolute;
    top: 3px;
    left: 37px;
    width: 6px;
    height: 18px;
    border-radius: 20%;
    background: black;
  }
  .lds-spinner div:nth-child(1) {
    transform: rotate(0deg);
    animation-delay: -1.1s;
  }
  .lds-spinner div:nth-child(2) {
    transform: rotate(30deg);
    animation-delay: -1s;
  }
  .lds-spinner div:nth-child(3) {
    transform: rotate(60deg);
    animation-delay: -0.9s;
  }
  .lds-spinner div:nth-child(4) {
    transform: rotate(90deg);
    animation-delay: -0.8s;
  }
  .lds-spinner div:nth-child(5) {
    transform: rotate(120deg);
    animation-delay: -0.7s;
  }
  .lds-spinner div:nth-child(6) {
    transform: rotate(150deg);
    animation-delay: -0.6s;
  }
  .lds-spinner div:nth-child(7) {
    transform: rotate(180deg);
    animation-delay: -0.5s;
  }
  .lds-spinner div:nth-child(8) {
    transform: rotate(210deg);
    animation-delay: -0.4s;
  }
  .lds-spinner div:nth-child(9) {
    transform: rotate(240deg);
    animation-delay: -0.3s;
  }
  .lds-spinner div:nth-child(10) {
    transform: rotate(270deg);
    animation-delay: -0.2s;
  }
  .lds-spinner div:nth-child(11) {
    transform: rotate(300deg);
    animation-delay: -0.1s;
  }
  .lds-spinner div:nth-child(12) {
    transform: rotate(330deg);
    animation-delay: 0s;
  }
  @keyframes lds-spinner {
    0% {
      opacity: 1;
    }
    100% {
      opacity: 0;
    }
  }

  /******************************************************************************/
  /*                       FIN SPINNER                                          */
  /******************************************************************************/
  .message-erreur {
    font-weight: bold;
    padding: 5px;
    background-color: #ffe6e6;
    border: 1px solid #ff0000;
    border-radius: 5px;
    display: none;
  }
  /******************************************************************************/
  /*                       DEBUT CASSURE a ECRAN 600px width                    */
  /******************************************************************************/ 

  @media screen and (max-width: 600px) {
    main {
      top: 5em;
      bottom: 3em;
    }
    main .grid-container-main {
      display: grid;
      grid-template-areas:
        'content content content content';
      gap: 1px;
      padding: 1px;
      align-items: center;
    }
    main .main_menu {
      display: none;
    }
    .modal .topnav a.icon {
      float: right;
      display: block;
    }
    .modal .topnav{position: relative;}
    .modal .topnav .icon {
      position: absolute;
      right: 0;
      top: 0;
    }
    .modal #accueil {
      float: none;
      display: block;
      text-align: left;
    }
    .modal .topnav a {
      float: none;
      /*display: block;*/
      text-align: left;
    }
    .modal .topnav .dropdown {float: none;}
    .modal .topnav .dropdown-content {position: relative;}
    .modal .topnav .dropdown .dropbtn {
      display: block;
      width: 100%;
      text-align: left;
      border-radius: inherit;
    }
  }

  /******************************************************************************/
  /*                         FIN CASSURE a ECRAN 600px width                    */
  /******************************************************************************/   

  /******************************************************************************/
  /*                       DEBUT CASSURE a ECRAN 500px width                    */
  /******************************************************************************/ 

  /* Change styles for span and cancel button on extra small screens */

  @media screen and (max-width: 500px) {
  /* The modal-scroll (background) */
  /*.modal {
    padding-top: 0px;
  }*/
    .modal span.psw {
       display: block;
       float: none;
    }
    .modal .cancelloginbtn {
       width: 100%;
    }
    .annulerQuestionbtn, .validerQuestionbtn {
      width: 100%;
    }
    .modal-scroll span.psw {
      display: block;
      float: none;
   }
   .modal-scroll .cancelloginbtn {
      width: 100%;
   }
  }