/*****************************************************************************************************************************************/
/*                                                          ELEMENTS DE BASE                                                             */
/*****************************************************************************************************************************************/

html
{
  height: 100%;
  background-image: URL(../images/background.png);
  background-repeat: no-repeat;
  background-position: bottom right;
  background-attachment: fixed;
  font: 14px/20px 'Arial', Tahoma, Verdana, sans-serif;
}

html, body
{
  margin: 0;
}

body
{
  min-height: 100%;
  position: relative;
  display: flex;
  flex-flow: column;
}

header {
  flex: 0 1 auto;
  position: relative;
}

main {
  flex: 1 1 auto;
  position: relative;
}

footer {
  flex: 0 1 40px;
  position: relative;
  height: 40px;
  bottom: 0;
  z-index: -1;
}

/*****************************************************************************************************************************************/
/*                                                                    LIENS                                                              */
/*****************************************************************************************************************************************/
a:hover
{
  text-decoration : none;
}

/*****************************************************************************************************************************************/
/*                                                                     GRIDS                                                             */
/*****************************************************************************************************************************************/
.wrapper {
  display: grid;
  grid-auto-rows: minmax(60px, auto);
  grid-template-columns: repeat(3, 1fr);
  grid-template-areas: ". center right";
  grid-gap: 10px;
}

.wrapper > .wrapper-center {
  grid-area: center;
}

.wrapper > .wrapper-right {
  grid-area: right;
}

/*****************************************************************************************************************************************/
/*                                                                   ALIGNEMENT                                                          */
/*****************************************************************************************************************************************/
.d-flex
{
  display: flex;
}

.justify-content-center
{
  justify-content: center;
}

.justify-content-end
{
  justify-content: end;
}

.align-items-center
{
  align-items: center;
}

/*****************************************************************************************************************************************/
/*                                                                   FONT                                                                */
/*****************************************************************************************************************************************/

.fs-14px
{
  font-size: 14px;
}

.fs-20px
{
  font-size: 20px;
}

.fs-35px
{
  font-size: 35px;
}

.fw-bold
{
  font-weight:bold;
}

.fw-normal
{
  font-weight:normal;
}

.text-red
{
  color: red;
}

.text-green
{
  color: green;
}

.text-white
{
  color: white;
}

.text-rgb-56-57-57
{
  color : rgb(56,57,57);
}

.text-rgb-127-127-127
{
  color: rgb(127,127,127);
}

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

.text-deco-none
{
  text-decoration: none;
}

/*****************************************************************************************************************************************/
/*                                                                 CURSOR                                                                */
/*****************************************************************************************************************************************/

.cursor-pointer
{
  cursor: pointer;
}


/*****************************************************************************************************************************************/
/*                                                                 MARGIN                                                                */
/*****************************************************************************************************************************************/
/*margin_top*/
.mt-2
{
  margin-top: 10px;
}
.mt-3
{
  margin-top: 20px;
}
.mt-4
{
  margin-top: 30px;
}
.mt-minus-4
{
  margin-top: -25px;
}
.mt-minus-5
{
  margin-top: -35px;
}

/*margin_bottom*/
.mb-3
{
  margin-bottom: 20px;
}

/*margin_left*/
.ml-5
{
  margin-left: 110px;
}
.ml-85
{
  margin-left: 85%;
}

/*margin_right*/
.mr-2
{
  margin-right: 10px;
}
.mr-5
{
  margin-right: 50px;
}

/*****************************************************************************************************************************************/
/*                                                                 WIDTH                                                                 */
/*****************************************************************************************************************************************/

.w-25
{
  width: 25%;
}

.w-100
{
  width: 100%;
}

.w-100px
{
  width: 100px;
}


/*****************************************************************************************************************************************/
/*                                                                 HEIGHT                                                                */
/*****************************************************************************************************************************************/

.h-30px
{
  height: 30px;
}
.h-40px
{
  height: 40px;
}
.h-60px
{
  height: 60px;
}


/*****************************************************************************************************************************************/
/*                                                        BACKGROUND COLOR                                                               */
/*****************************************************************************************************************************************/

.bg-grey
{
  background: linear-gradient(to right, rgb(51, 51, 51), rgb(31, 31, 31));
}


/*****************************************************************************************************************************************/
/*                                                              LINE                                                                     */
/*****************************************************************************************************************************************/

.lh-normal
{
  line-height: normal;
}


/*****************************************************************************************************************************************/
/*                                                          FORMULAIRE                                                                   */
/*****************************************************************************************************************************************/

button, input, optgroup, select, textarea {
  margin: 0;
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
}

.form-control
{
  display:block;
  width:100%;
  box-sizing: border-box;
  line-height:1.5;
  color:#212529;
  border:1px solid #ced4da;
  border-radius:.375rem;
  padding:.75rem 1rem;
  transition:border-color .20s ease-in-out,box-shadow .20s ease-in-out;
}

.form-control:focus
{
  border-color:#86b7fe;
  outline:0;
  box-shadow:0 0 0 .25rem rgba(13,110,253,.25);
}

.form-control::-moz-placeholder
{
  color:#6c757d;
  opacity:1;
}

.form-control::placeholder
{
  color:#6c757d;
  opacity:1;
}

textarea
{
  font: 14px/20px 'Arial', Tahoma, Verdana, sans-serif;
  resize: none;
}


/**************************************************************************************************************************/
/*                                                        BUTTON                                                          */
/**************************************************************************************************************************/

button
{
  background-color: rgb(189,186,189);
  border: none;
  border-radius: 5%;
  box-shadow: inset 0 1px white, 0 1px 2px rgba(0, 0, 0, 0.15);
}

button:hover
{
  border-color: #9eb9c2 #b3c0c8 #b4ccce;
  box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
}

button:active
{
  border-color: #92abb1 #a6afb7 #a9babb;
  box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.3);
}

.btn
{
  display: inline-block;
  padding: 8px 32px;
  margin-bottom: 0;
  font-size: 14px;
  cursor: pointer;
  border-radius: 4px;
}

.btn-lg
{
  padding: 10px 120px;
}

.btn-blue
{
  color: white;
  font-weight: bold;
  background: linear-gradient(to right,#0095ca,#50beff);
  border: 0 !important;
}

.btn-blue:hover,
.btn-blue:focus
{
  background: #0085b1 !important;
}

/*****************************************************************************************************************************************/
/*                                                          FORMULAIRE                                                                   */
/*****************************************************************************************************************************************/

.container
{
  border: 15px solid rgb(99,97,99);
  border-top-width : 45px;
  border-radius : 10px;
  margin-left : 25%;
  margin-right : 25%;
  height : auto;
  width : auto;
}

/*****************************************************************************************************************************************/
/*                                                          PARTIE LOGIN                                                                 */
/*****************************************************************************************************************************************/

.login
{
  position: relative;
  margin: 150px;
  width: 400px;
  height: 400px;
  padding: 20px;
  background-color: rgba(255, 255, 255, 0.3);
  border-radius: 8px;
  display:flex;
  flex-direction: column;
}

.login-form
{
  height: 100%;
  padding: 0 30px;
  display: flex;
  justify-content: center;
  flex-direction: column;
}

/*****************************************************************************************************************************************/
/*                                                       PARTIE FORMULAIRE                                                               */
/*****************************************************************************************************************************************/

section
{
  padding: 20px;
  background: linear-gradient(to right, rgb(51, 51, 51), rgb(31, 31, 31));
  border-radius: 8px;
}