header{width: 100%;max-height: 263px;}

.mon_compte h1{font-size: 45px;color: white;text-align: center;margin-bottom: 23px;}
.mon_compte .clef{width: 50%;display: block;margin: auto;}
p.dispo{
  font-size: 20px;
  font-weight: bold;
  text-align: center;
  background-color: rgba(255,255,255,0.7);
  color: black;
  border-radius: 10px;
  width: 60%;
  margin: auto;
  padding: 5px;
}
#header {
  margin-top: 50px;
  background-image: url('/photos/banniere-tal.jpg');
  background-position: 0% -10%;
  background-attachment: fixed;
  background-repeat: no-repeat;
  overflow: hidden;
  transition: 0.4s;
  position: relative;
  width: 100%;
  box-shadow: 0px 10px 10px black; 

}
#logoNav{
	width: 25%;
  min-width: 325px;

  -webkit-transition: transform 2s;
  -webkit-animation-name: turn; /* Safari 4.0 - 8.0 */  
  animation-name: turn;
  transition: transform 2s;
}

.logins{width: 100%;height: 100%;}
.backLog{background-image: url("/photos/fond-2.jpg");padding-top: 30px;padding-bottom: 70px;}
.logoLog{max-width: 500px;width: 100%;margin: auto;}
.supLog{max-width: 500px;width: 100%;margin: auto;height: 550px;background-image: url("/photos/fond-2.jpg");background-position: 50% 0%;border-radius: 10px 10px 10px 10px;}

.letout{display: flex;width: 100%;}
.cotecote{width: 50%;margin: auto;}
.login {width: 100%;max-width: 400px;margin: 16px auto;font-size: 16px;}
/* Reset top and bottom margins from certain elements */
.login-header,.login p {margin-top: 0;margin-bottom: 0;}

/* The triangle form is achieved by a CSS hack */
.login-triangle {width: 0;margin-right: auto;margin-left: auto;border: 12px solid transparent;border-bottom-color: rgba(0,0,0,0.4);}
.login-header {
  background-color: rgba(0,0,0,0.4);
  padding: 20px;
  font-size: 1.4em;
  font-weight: normal;
  text-align: center;
  text-transform: uppercase;
  color: #fff;
  border-radius: 10px 10px 0px 0px;
}

.login-container {background-color: rgba(0,0,0,0.5);padding: 12px;border-radius: 0px 0px 10px 10px;}

.reset{ background-color: rgba(255,0,0,0.4);}
.reset2{  background-color: rgba(255,0,0,0.5);}

/* Every row inside .login-container is defined with p tags */
.login p {padding: 12px;}

.login input {
  box-sizing: border-box;
  border-radius: 50px 50px 50px 50px;
  display: block;
  width: 100%;
  border-width: 1px;
  border-style: solid;
  padding: 10px;
  outline: 0;
  font-family: inherit;
  font-size: 0.95em;
  transition: 0.4s all;
}

.login input[type="email"],
.login input[type="password"],
 .login input[type="text"]{background-color: rgba(0,0,0,0.5);border-color: #bbb;color: white;}
/* Text fields' focus effect */
.login input[type="email"]:focus,
.login input[type="text"]:focus,
.login input[type="password"]:focus {border-color: #FF4200;}
.login input[type="submit"] {background-color: rgba(255,66,0,0.5);border-color: transparent;color: #fff;cursor: pointer;}
.login input[type="submit"]:hover {background-color: rgba(255,66,0,0.8);}
/* Buttons' focus effect */
.login input[type="submit"]:focus {border-color: #05a;}
.login input[type="password"]:invalid{background-color: rgba(0,0,0,0.5);}
.login input[type="password"]:valid{border-color: #00D641;}
.alert{width: 90%; margin: auto;background-color: red;color: white;}
.fond{width: 100%;background-color: grey;}

/**************************************** CSS COMPTE **********************/
.mon_compte{padding-top: 8px;background: linear-gradient(#0094DA,#E1E1E1);width: 100%;height: 100%;}

/****MENU ****/

.sidenav-m {
  height: 100%;
  max-height: 400px;
  width: 0;
  position: fixed;
  z-index: 1;
  top: 200;
  left: 0;
  background-color: rgba(0,0,0,0.95);
  overflow-x: hidden;
  transition: 0.4s;
  padding-top: 60px;
  border-radius: 0px 20px 20px 0px;
}

.sidenav-m a {padding: 8px 8px 3px 32px;text-decoration: none;font-size: 20px;color: white;display: block;transition: 0.2s;}
.sidenav-m a:hover {color: #FF7000;text-decoration: unset;}
.sidenav-m .closebtn-m {position: absolute;top: 0;right: 25px;font-size: 36px;margin-left: 50px;}
.scrollbar-m::-webkit-scrollbar {width: 12px;}
    /* Track */
.scrollbar-m::-webkit-scrollbar-track {box-shadow: inset 0 0 5px white;border-radius: 10px;}  
    /* Handle */
.scrollbar-m::-webkit-scrollbar-thumb {background: #878787;border-radius: 10px;}
    /* Handle on hover */
.scrollbar-m::-webkit-scrollbar-thumb:hover {background: #555555;}
span.spane-m{
  position: fixed;
  font-size:30px;
  cursor:pointer;
  color: white;
  background-color: rgba(0,0,0,0.9);
  padding: 4px 8px;
  border-radius: 0px 20px 20px 0px;
  transition: all 0.2s;
  margin-top: 50px;
}
span.spane-m:hover{color: #FF8300;transition: all 0.2s;padding: 4px 22px;}
.sidenav-m span.closer-m{font-size: 45px; color: white; transition: all 0.2s;cursor: pointer;}
.sidenav-m span.closer-m:hover{color: #FF8300;}


/**** FIN MEENU *****/

/***************** AFFICHAGE DES TABLEAUX *********************************/
h2{font-size: 25px; color: black;}
.prods{width: 98%;background-color: rgba(0,0,0,0.7);margin: auto;margin-bottom: 50px;border-radius: 10px;padding: 4px 0px;}
.prods table {border: 1px solid #ccc;border-collapse: collapse;margin: 0;padding: 0;width: 100%;table-layout: fixed;}
.prods table caption {font-size: 1.5em;margin: .5em 0 .75em;}
.prods table caption.titles {font-size: 25px;font-weight: bold;text-align: center;color: #FF4D00;}
.prods table tr {background-color: #f8f8f8;border: 2px solid #878787;}
.prods table th,.prods table td {padding: .628em;text-align: center;font-size: 17px;max-width: 428px;overflow: auto;}
.prods table th {font-size: 1.3em;letter-spacing: .1em;text-transform: uppercase;}
.prods .delete,.prods table.demandes i.delete,.detail table.table i.delete{color: red;font-size: 35px;}
td img{width: 100%;max-width: 140px;}
/******************** FIN AFFICHAGE DES TABLEAUX *******************/


/******************** DEBUT TABLEAU DEMANDES **************************/
.prods table.demandes {border: 1px solid #ccc;border-collapse: collapse;margin: 0;padding: 0;width: 100%;table-layout: fixed;}
.prods table.demandes caption {font-size: 1.5em;margin: .5em 0 .75em;}
.prods table.demandes caption.titles {font-size: 25px;font-weight: bold;text-align: center;color: #FF4D00;}
.prods table.demandes tr.tr {background-color: #f8f8f8;border: 2px solid #878787;}
.prods table.demandes tr.tr {background-color: #f8f8f8;border: 2px solid #878787;overflow: hidden;white-space: nowrap;padding: 2px;}
.prods table.demandes tr.trs {background-color: #62FF5C;border: 2px solid #878787; overflow: hidden; white-space: nowrap;padding: 2px;}
.prods table.demandes td {padding: .625em;text-align: center;font-size: 14px;font-weight: bold;overflow: auto;}
.prods table.demandes th {font-size: 1em;letter-spacing: .1em;text-transform: uppercase;color: #FF2300;}
.prods a i.add,a i.add{color: #33EA00;font-size: 35px;margin-top: 5px;}
table i.edit{color: black;font-size: 25px;}
/********************* FIN TABLEAU DES DEMANDES *******************************/



/************* TABLEAU DE DETAIL ********************/
.detail,.detail_clt{width: 70%;margin: auto;background-color: rgba(0,0,0,0.7);border-radius: 20px;padding-bottom: 1px;margin-bottom: 40px;}
.detail table.table tbody{}
.detail table.table caption,.detail_clt table.table caption{font-size: 1.9em;color: #FF4D00;font-weight: bold;text-align: center;}
.detail table.table caption span{float: left;margin-left: 5%;font-size: 30px;color: white}
.detail table.table caption i{float: right;margin-right: 5%;font-size: 35px;margin-top: 4px;color: white}
div.detail table.table tbody tr td {  max-width: 150px;overflow: auto;}
.detail table.table td,.detail_clt table.table td{font-size: 17px;font-weight: bold;background-color: white;overflow: auto;}
.detail table.table th, .detail_clt table.table th {font-size: 20px;color: #F07C00;font-weight: bold;background-color: white;}
.scrollbar::-webkit-scrollbar {width: 8px;height: 12px;}
    /* Track */
.scrollbar::-webkit-scrollbar-track {box-shadow: inset 0 0 5px black;border-radius: 10px 0px 0px 10px;}
    /* Handle */
.scrollbar::-webkit-scrollbar-thumb {background: black;border-radius: 10px;}
    /* Handle on hover */
.scrollbar::-webkit-scrollbar-thumb:hover {background: #555555;}
/*************************** FIN DETAIL **************************/


/***************** MESSAGERIE *************************************/
.messagerie{width: 80%;margin: auto;background-color: rgba(0,0,0,0.7);margin-bottom: 50px;color: white;border-radius: 20px;}
#soumission{border-radius: 20px;}
.messagerie label{font-size: 18px;}
.messagerie h4{font-size: 25px; color: #FF4D00;text-align: center;margin-bottom: 0;margin-top: 2px;}
button.hoverr{background-color: rgba(0,0,0,0.5);border-radius: 5px;}
/************* FIN MESSAGERIE ************************************/


/********************MESSAGE RETOUR *************************/
h2.resolu{width: 90%;margin: auto;background-color: rgba(255,77,0,0.8);color: black;text-align: center;font-size: 28px;border-radius: 40px;margin-bottom: 20px;}
.chat {margin: 0 auto;max-width: 800px;padding: 0 20px;margin-bottom: 50px;}
.box-chat {background-color: #F8F8F8;border-radius: 5px;padding: 10px;margin: 20px 0;box-shadow: 0px 3px 10px black;}
.darker {background-color: #DFDFDF;}
.box-chat::after {content: "";clear: both;display: table;}
.box-chat img {float: left;max-width: 60px;width: 100%;margin-right: 20px;border-radius: 50%;}
.box-chat img.right {float: right;margin-left: 20px;margin-right:0;}
.time-right {float: right;color: #aaa;}
.time-left {float: left;color: #818181;}
.box-chat p{display: block;margin-block-start: 1em;margin-block-end: 1em;margin-inline-start: 0px;margin-inline-end: 0px;font-size: 18px;text-align: justify;}
.box-chat span{display: block;bottom: 0}

/******************** FIN BOX MESSAGE RETOUR *************************/


/*****************************   POPUP    POPUP         POPUP  **********************/

/* Full-width input fields */
.modalEdit input[type=text],.modalEdit  input[type=password],.modalEdit  input[type=date] {
  width: 100%;
  padding: 12px 20px;
  margin: 8px 0;
  display: inline-block;
  border: 1px solid #ccc;
  box-sizing: border-box;
}
button.bouttonModalEdit{background-color: rgba(200,200,200,0.7);padding: 3px 4px;border-radius: 10px;color: black;}
/* Set a style for all buttons */
.modalEdit button{background-color: #4CAF50;color: white;padding: 14px 20px;margin: 8px 0;border: none;cursor: pointer;width: 100%;}
.modalEdit button:hover {opacity: 0.8;}
button.bouttonModalEdit:hover {opacity: 0.8;}
/* Extra styles for the cancel button */
.modalEdit button.cancelbtnEdit {width: auto;padding: 10px 18px;background-color: #f44336;}
/* Center the image and position the close button */
.imgcontainerEdit {text-align: center;margin: 15px 0 0px 0;position: relative;}
.modalEdit img.avatarEdit {width: 40%;border-radius: 50%;}
.containerEdit {padding: 2px 16px;}
.modalEdit span.psw {float: right;padding-top: 16px;}

/* The Modal (background) */
.modalEdit {
  display: none;
  position: fixed;
  z-index: 1;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgb(0,0,0);
  background-color: rgba(0,0,0,0.4); 
  padding-top: 60px;
}

/* Modal Content/Box */
.modal-content-Edit {background-color: #fefefe;margin: 5% auto 15% auto;border: 1px solid #888;width: 40%; }
.imgcontainerEdit img{display: block;max-width: 80px;min-width: 50px;margin: auto;}
/* The Close Button (x) */
.closeEdit {position: absolute;right: 25px;top: 0;color: #000;font-size: 35px;font-weight: bold;}
.closeEdit:hover,
.closeEdit:focus {color: red;cursor: pointer;}
/* Add Zoom Animation */
.animateEdit {-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  POPUP    POPUP         POPUP  **********************/


/***************************** AVATAAAAAAAAAAAAAAAAR ***************************************/
a.middleImg{display: block;margin: auto;border-radius: 75px;max-width: 170px;background-color: white;padding: 5px 0px 0px 0px;transition: 0.5s all;}
a.middleImg img{width: 75%;display: block;margin: auto;opacity: 1;transition: .5 ease;backface-visibility: hidden;}
a.middleImg .textImg{          
          transition: .4s ease;
          opacity: 0;
          position: absolute;
          top: 40%;
          left: 50%;
          transform: translate(-50%, -50%);
          -ms-transform: translate(-50%, -50%);
          text-align: center;
          background-color: rgba(0,0,0,0.9);
          color: white;
          font-size: 15px;
          padding: 8px 16px;
          border-radius: 5px;
}
a.middleImg:hover{opacity: 0.7;}
a.middleImg:hover .textImg{opacity: 1;}

.avatar-box-alb{margin: auto;border-radius: 75px;max-width: 170px;background-color: white;padding: 5px 0px 0px 0px;}
.avatar-box-alb img{width: 75%;display: block;margin: auto;}
/******page ded modification ******/

div.choix-avatar{margin-top: 50px;margin-bottom: 50px;background-color: rgba(255,255,255,0.2);display: flex;padding: 20px 0px;}

div.choix-image-M,div.choix-image-F{width: 40%;max-height: 500px;overflow: auto;padding: 20px;box-shadow: 0px 10px 10px black; }
div.choix-utilisateur{width: 20%;display: flex;flex-direction: column;}

div.choix-image-F{border-radius: 40px 0px 0px 40px;background-color: rgba(158,0,158,0.9);}
div.choix-image-M{border-radius: 0px 40px 40px 0px;background-color: rgba(0,0,158,0.9);}


.choisi{width: 100%;margin: auto;}
.plateau{width: 100%;bottom: 0;margin-bottom: 10px;}
div.choix-utilisateur form{display: flex;flex-direction: column;}
div.choix-utilisateur button.valider{
  padding: 5px;
  background-color: rgba(0,208,9,0.8);
  border: none;
  text-align: center;
  transition: all 0.5s;
  cursor: pointer;
  font-size: 20px;
  border-radius: 10px;
  margin: auto;
  width: 80%;
  box-shadow: 0px 2px 2px black;
}

div.choix-utilisateur button.valider:hover{
    background-color: rgba(0,208,9,0.6);
    box-shadow: 0px 10px 10px black;
}

div.choix-avatar button{background-color: rgba(0,0,0,0);border: none;text-align: center;margin-left: 8px;margin-bottom: 8px;width: 20%;}

div.choix-avatar img.logo-avatar{
  width: 100%;
  padding: 4px;
  background-color: white;
  border-radius: 120px;
  text-align: center;
  box-shadow: 0px 3px 10px black;
}
/***************************** FIN AVATAAAAAAAAAAAAAAAAR ***************************************/



/***** barre de recherche*******/
#body_search {
  font-family: 'Montserrat Alternates', sans-serif;
  color: #FFFFFF;
  width: 100%;
  max-width: 400px;
  padding: 0;
  margin: auto;
}

#body_search a,#body_search a:visited,#body_search a:hover {color: inherit;text-decoration: none;}
#body_search main {
  top: 0;
  left: 0;
  margin: 0 auto;
  padding: 0 26px;
  width: 100%;
  background: linear-gradient(0.25turn, #B65300, #505050, #3f87a6);
  border-radius: 120px;
  box-shadow: 0px 10px 10px black; 
}

#body_search .box-recherche {
  position: relative;
  padding: 5px 0px;
  width: 100%;
  max-width: 840px;
  margin-bottom: 15px;
}
#body_search .search-box {
  position: relative;
  width: 100%;
  max-width: 360px;
  height: 60px;
  border-radius: 120px;
  margin: 0 auto;
}
#body_search .search-icon, .go-icon {
  position: absolute;
  top: 0;
  height: 60px;
  width: 86px;
  line-height: 61px;
  text-align: center;
}
#body_search .search-icon {
  left: 0;
  pointer-events: none;
  font-size: 1.22em;
  will-change: transform;
  transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  transform-origin: center center;
  -webkit-transform-origin: center center;
  -moz-transform-origin: center center;
  -o-transform-origin: center center;
  transition: transform 400ms 220ms cubic-bezier(0.190, 1.000, 0.220, 1.000);
  -webkit-transition: transform 400ms 220ms cubic-bezier(0.190, 1.000, 0.220, 1.000);
  -moz-transition: transform 400ms 220ms cubic-bezier(0.190, 1.000, 0.220, 1.000);
  -o-transition: transform 400ms 220ms cubic-bezier(0.190, 1.000, 0.220, 1.000);
}
#body_search .si-rotate {
  transform: rotate(0deg);
  -webkit-transform: rotate(0deg);
  -moz-transform: rotate(0deg);
  -o-transform: rotate(0deg);
}

#body_search .go-in {
  opacity: 1;
  pointer-events: all;
  cursor: pointer;
  transform: rotate(0);
  -webkit-transform: rotate(0);
  -moz-transform: rotate(0);
  -o-transform: rotate(0);
  transition: opacity 190ms ease-out, transform 260ms 20ms cubic-bezier(0.190, 1.000, 0.220, 1.000);
  -webkit-transition: opacity 190ms ease-out, transform 260ms 20ms cubic-bezier(0.190, 1.000, 0.220, 1.000);
  -moz-transition: opacity 190ms ease-out, transform 260ms 20ms cubic-bezier(0.190, 1.000, 0.220, 1.000);
  -o-transition: opacity 190ms ease-out, transform 260ms 20ms cubic-bezier(0.190, 1.000, 0.220, 1.000);
}
#body_search .search-bordure {display: block;width: 100%;max-width: 360px;height: 60px;}
#body_search .bordure {fill: none;stroke: #FFFFFF;stroke-width: 5;stroke-miterlimit: 10;}
#body_search .bordure {
  stroke-dasharray: 740;
  stroke-dashoffset: 0;
  transition: stroke-dashoffset 400ms cubic-bezier(0.600, 0.040, 0.735, 0.990);
  -webkit-transition: stroke-dashoffset 400ms cubic-bezier(0.600, 0.040, 0.735, 0.990);
  -moz-transition: stroke-dashoffset 400ms cubic-bezier(0.600, 0.040, 0.735, 0.990);
  -o-transition: stroke-dashoffset 400ms cubic-bezier(0.600, 0.040, 0.735, 0.990);
}
#body_search .bordure-searching .bordure {
  stroke-dasharray: 740;
  stroke-dashoffset: 459;
  transition: stroke-dashoffset 650ms cubic-bezier(0.755, 0.150, 0.205, 1.000);
  -webkit-transition: stroke-dashoffset 650ms cubic-bezier(0.755, 0.150, 0.205, 1.000);
  -moz-transition: stroke-dashoffset 650ms cubic-bezier(0.755, 0.150, 0.205, 1.000);
  -o-transition: stroke-dashoffset 650ms cubic-bezier(0.755, 0.150, 0.205, 1.000);
}
#body_search #myInput {
  font-family: 'Montserrat Alternates', sans-serif;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 120px;
  border: none;
  background: rgba(255,255,255,0);
  padding: 0 68px 0 68px;
  color: #FFFFFF;
  font-size: 1.32em;
  font-weight: 400;
  letter-spacing: -0.015em;
  outline: none;
}
#body_search #myInput::-webkit-input-placeholder {color: #FFFFFF;}
#body_search #myInput::-moz-placeholder {color: #FFFFFF;}
#body_search #myInput:-ms-input-placeholder {color: #FFFFFF;}
#body_search #myInput:-moz-placeholder {color: #FFFFFF;}
#body_search #myInput::-moz-selection {color: #FFFFFF; background: rgba(0,0,0,0.25);}
#body_search #myInput::selection {color: #FFFFFF; background: rgba(0,0,0,0.25);}

/***** FIN barre de recherche*******/




/********* NOTATION ET COMMENTAIRE CLIENT *****************/
.alCenter h2{color: #ffffff;font-size: 30px;font-family: 'Trebuchet MS', Helvetica, sans-serif;}
.star{
    background-image:url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAABQCAYAAAAZQFV3AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAABOFJREFUeNrsmEFoHFUYx9/MdHfTJRKzUhBaFiL1YghZCFQUIV6UQJuLWCgr8eKpIoiFSqsHQYrmYj14KHqxKAl6MbA5eCgKRVAMBhpCwIJQCETRQzTsNtnO7s74+17fbGc3M7OzZhUsHfjzdvd97/++973vff99Y/m+rwb5WL0Idz60h2nckTc8Nw2hncLmAnhtIB7i3VGan8VD8Dhebh+U8FOaX8Bh4EB48R8TQlai+QnkgMTxD/AYpFt9EULk0EyBD8Dn4BPT9TZ4CrwD6Wos4V+XrUdpXzQk4tUEkAFXwNUu+1fAWWO7anADLDLJTkCYpf0K3DQe3Ui5oUI6B8ShlyBstZfMMiXoX4MV8GZKQgnJcXA6nKPtGJoE/gZ8Cy6mIJPwnIJsL3ZTIB2h+U6WANZjyE6Aj8Cz3WT7TooJ7HUwneDdc+BaFFnc0SuCzQTCTWOT+iwfN6cjWJ6clo9NzOS5Bcb6IZTZj5pU+syEYNV8XzA2Y6lOCptyhGbDeDFPnJa6TlGZ5rxJ/nxkSRPCACR5EUyHf4sCNjOgENVn/ecVe+CEy8vLWgJmZ2fd1IRra2vxSbe5eYlmu1gsXo6zmZycTKcpkEn6vC61kM+FQYiUeDdvauP5Ay0ZjyIlgKVv9bVkiBwQVJRX2YwWkKLxrhxB+qYSPaxUKrESANHVrh2PlQAzqSbskAA6UkkA5B0SICvRSzb5ddrMWu4jh8umSLwckLVjSKClWJ6SwsrM76fwLpCAM4x1I9OGjhrN8+AkAyYSyGTDnhEHjCPxeYhBagmIIvtXJOBQkgSY5Z01/76umAy4lbpiG5IqzQuG6Alz9LLmf+IP5hh+AfmxnoSQdUgAg5a6JuuQgMiSFi7fJHkR9JQAbGbA/SoBi4uLWgLK5XIqCdBpkyQBZne3sTm4BGxsbLQlgM+DkYBsNjucyWQKaSXATvCuZFnWHIQqlxMVUOeMx/0RMsgBWgIgcyBVgqwwIwH0JUvAwsJChwQwuOQ4jrJtO/CsfQBc11We56lWqyXfOySALNgJdlmuWzNSB/P5vBKyyJnxMjxBs9mc2tvbEye+DN1l7uYhuaZvAXg1LaQyOOkRL3d3d8XLishHOEd1DMfHx7UEYLjCrCop2aXP2Mht4QxjoyWADi0BxGddZm80GjpWYSL5TfpkYnHAOBK/yxhoCZAl1et1PbharWrUajX9m/SJBESRJUlAr6fvW0CvZyyxOIQPN4kbnv1mlwQERGPhMbHli/Q5Yv5lSdDnSYelrlLWIQGRJS1cvjk1RdBTArCZAferBPT7IkjvcuP7t3pKADaxEpB5+r10FXv3x3kKqqUlgM+DkQB76OFhKzdycAnAo5KynTlraFTZQ4/gqH3ursd9EjLIAVoC7KGCAxFWNqSjWgLoS5aAfS+C7EzJcrLKOjSkrNwoFu0ToPz6n8pv3dFQXjPyRdA9CbDsk/ZDx5SQxWiAsg4X7vE361NedQsn/P0SELwIgmzaHiZMtpMcKK+pWlUuVF6j0v0iSMcw/+QFLQF+y13xbv/GpF4CWUt5tV+FTEsAY6MlgA4tASxlnaUo362yLGLlh2Lo1iCjj4nFAeNI/H9sDHbYxesEfcK//XvSoq9Fkf0/JCDqDWfV3I+TJGCLne19CzAvgtoS8OBF0APC6OdvAQYAj2xzC/IfXBsAAAAASUVORK5CYII=');
    background-position:left -2px;
    display:block;
    width:20px;
    height:16px;
    line-height:16px;
    float:left;
    cursor: pointer;
    zoom:1;
}
.fullStar{background-position:left -59px;}
.stars{overflow: hidden;}
.tmp_es{background-position:left -21px;}
.tmp_fs{background-position:left -40px;}
.checked{color: orange;}
.alCenter{width: 100%;display: flex;justify-content: space-around;padding: 5px;margin-bottom: 30px;margin-top: 10px;}
.alCenter label{font-size: 17px;}
.alCenter .alLeft{width: 45%;padding: 5px;}
.alCenter .alLeft .coms{padding: 0px 10px;background-color: rgba(197,197,197,0.7);box-shadow: 0px 3px 10px white;border-radius: 5px;}
.alCenter .alLeft .coms h3{font-size: 23px;font-weight: bold;color: black;padding: 10px 0px;}
.alCenter .alLeft .coms span{}
.alCenter .alLeft .coms .commentaire{font-size: 17px;color: black;padding-bottom: 10px;}
.alCenter .alRight{width: 45%;padding: 5px;}
.alCenter #soumission{background-color: rgba(255,255,255,0.7);}
.alCenter #sending{border: black 1px solid;border-radius: 5px;color: white}
.box-note{margin-bottom: 20px;}

/*********FIN  NOTATION ET COMMENTAIRE CLIENT *****************/








/********* RESPONSIVE DESIGN **********************/
@media screen and (max-width: 807px) {
  .alCenter{flex-direction: column-reverse;margin-top: 0}
  .alCenter h2{font-size: 24px;margin-top: 10px;margin-bottom: 5px;}
  .alCenter .alLeft{width: 90%;padding: 5px; margin: auto;padding:  10px 5px;}
  .alCenter .alRight{width: 90%;padding: 5px;margin: auto;}
}


@media screen and (max-width: 600px) {
.detail table.table caption,.detail_clt table.table caption{font-size: 1.5em;font-weight: normal;}
.detail table.table caption span{margin-left: 2%;font-size: 20px;}
.detail table.table caption i{font-size: 25px;margin-top: 2px;}
.detail table.table td,.detail_clt table.table td{font-size: 14px;font-weight: bold;}
.detail table.table th, .detail_clt table.table th {font-size: 16px;font-weight: bold;}
.messagerie h4{font-size: 1.5em;font-weight: normal;padding: 2px;}
.prods table {border: 0;}
.prods table caption {font-size: 1.3em;}
.prods table.demandes caption.titles {font-size: 20px;}
.prods table thead {border: none;clip: rect(0 0 0 0);height: 1px;margin: -1px;overflow: hidden;padding: 0;position: absolute;width: 1px;}
.prods table tr {border-bottom: 3px solid #ddd;display: block;margin-bottom: .625em;}
.prods table td {border-bottom: 1px solid #ddd;display: block;font-size: .8em;text-align: right;}
.prods table td::before {content: attr(data-label);float: left;font-weight: bold;text-transform: uppercase;}
.prods table td:last-child {border-bottom: 0;}
.prods table.demandes th,.prods table.demandes td{text-align: right;}
.prods .delete,.prods table.demandes i.delete,.detail table.table i.delete{font-size: 25px;}
.box-chat p{font-size: 15px;}
.modal-content-Edit {margin: 5% auto 15% auto;width: 80%;}
}

@media screen and (max-width: 580px) {
#header {background-position: 18% 0%;}
.letout{display: flex;flex-direction: column;}
.cotecote{width: 95%;}
}

@media screen and (max-width: 550px) {
.detail,.detail_clt{width: 90%;}
p.dispo{font-size: 20px;width: 100%;}
.mon_compte h1{font-size: 30px;}
.mon_compte .clef{width: 35%;}
.login {width: 90%;}
h2.login-header{font-size: 1em;}
.messagerie{width: 90%;}
div.avatar-box{max-width: 100px;margin: auto;}
div.avatar-box img{width: 80%;}
.avatar-box-alb{max-width: 100px;}
.avatar-box-alb img{width: 80%;}
a.middleImg {top: 44%;left: 50%;max-width: 80px;}
.textImg {font-size: 12px;padding: 4px 8px;border-radius: 5px;}
a.middleImg .textImg{top: 37%;left: 50%;font-size: 12px;padding: 4px 8px;}
}

@media screen and (max-width: 450px) {
  .sidenav-m {padding-top: 15px;}
  .sidenav-m a {font-size: 18px;}
  .detail,.detail_clt{width: 95%;}
  .detail table.table caption,.detail_clt table.table caption{font-size: 1.6em;}
  .detail table.table td,.detail_clt table.table td{font-size: 14px;}
  .detail table.table th, .detail_clt table.table th {font-size: 16px;}

  .alCenter h2{font-size: 24px;margin-top: 10px;margin-bottom: 5px;}
  .alCenter .alLeft{width: 98%;}
  .alCenter .alRight{width: 98%;}
}

@media screen and (max-width: 400px) {
#logoNav{width: 30%;min-width: 300px;}
.detail table.table caption,.detail_clt table.table caption{font-size: 1.3em;font-weight: normal;}
.detail table.table caption span{margin-left: 2%;font-size: 17px;}
.detail table.table caption i{font-size: 20px;margin-top: 2px;}
.detail table.table td,.detail_clt table.table td{font-size: 12px;font-weight: bold;}
.detail table.table th, .detail_clt table.table th {font-size: 14px;font-weight: bold;}
 }