* {
  box-sizing: border-box;
}

/* Style the body */
body {
  font-family: Arial, Helvetica, sans-serif;
  margin: 0;0border : 5px solid green;  
}

/* Header/logo Title */
.header {
  padding: 20px;
  text-align: center;
  background: #1abc9c;background: #56B7C7;
  color: white; height :150px;
}

.droite{
  width: 75%;
  height: 100px;

  float:right;
}

.gauche{
  width: 25%;
  height: 100px;
  float: left;
}

.header  {
witdh:100%;
}

/* Increase the font size of the heading */
.header h1 {
  font-size: 30px;
}

/* Sticky navbar - toggles between relative and fixed, depending on the scroll position. It is positioned relative until a given offset position is met in the viewport - then it "sticks" in place (like position:fixed). The sticky value is not supported in IE or Edge 15 and earlier versions. However, for these versions the navbar will inherit default position */
.navbar {display: none;
  overflow: hidden;
  background-color: #333;background-color: blue;
  position: sticky;
  position: -webkit-sticky;
  top: 0;
}

/* Style the navigation bar links */
.navbar a {
  float: left;
  display: block;
  color: white;
  text-align: center;
  padding: 14px 20px;
  text-decoration: none;
}


/* Right-aligned link */
.navbar a.right {
  float: right;
}

/* Change color on hover */
.navbar a:hover {
  background-color: #ddd;
  color: black;
}

/* Active/current link */
.navbar a.active {
  background-color: #666;
  color: white;
}

/* Column container */
.row {  
  display: -ms-flexbox; /* IE10 */
  display: flex;
  -ms-flex-wrap: wrap; /* IE10 */
  flex-wrap: wrap;
}

/* Create two unequal columns that sits next to each other */
/* Sidebar/left column */
.side {
  -ms-flex: 30%; /* IE10 */
  flex: 30%;
  background-color: #f1f1f1;
  padding: 20px;  
}

/* Main column */
.main {   
  -ms-flex: 70%; /* IE10 */
  flex: 70%;
  background-color: white;
  padding: 20px;
}

/* Fake image, just for this example */
.fakeimg {
  background-color: #aaa;
  width: 100%;
  padding: 20px;
}

/* Footer */
.footer {
  padding: 20px;
  text-align: center;
  background: #ddd;
}
.logocompt
{
width:125px; height:125px;
}

.titreimage {
   position: absolute;
  top: 50%;
  left: -25%;
  ;width:300px;

}

.button {
  border: none;
  color: white;
  padding: 15px ;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 4px 2px;
  cursor: pointer; width : 120px;height : 50px;
}
 
.fondvert {background-color: #04AA6D;} /* Green */
.fondbleu {background-color: #008CBA;} /* Blue */
.fondrouge {background-color: #f44336;} /* Red */ 
.fondgris {background-color: #e7e7e7; color: black;} /* Gray */ 
.fondnoir {background-color: #555555;} /* Black */



/* Bottom right text */
.bottom-right {
  position: absolute;
  bottom: 8px;
  right: 16px;
}

/* Centered text */
.centered {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);  
}
.titre
{
  position: relative ; left :33%; transform: translate(-33%, %);
}
.titretexte
{
position: absolute ;font-size: 28px; color : blue; border : 0px red solid ;
width :200px;
     position: absolute;
     top: 50px;
  left: -25%;
  }
.titretexte2
{
position: absolute ;font-size: 32px; color : blue;
width :200px;
     position: absolute;
	top: -10px;
  left: -25%;
  }  
 
  
  .boitee
  {
      position: absolute;
  
  width: 100%;
  text-align: center;
  font-size: 20px;
  }
  
 
* {
  box-sizing: border-box;
}

#myInput {
  background-image: url('recherche.png');
  background-position: 05px 05px;
  background-repeat: no-repeat;
  background-size: 30px 30px;
  width: 100%;
  font-size: 16px;
  padding: 12px 20px 12px 40px;
  border: 1px solid #ddd;
  margin-bottom: 12px;
}

#myTable {
  border-collapse: collapse;
  width: 100%;
  border: 1px solid #ddd;
  font-size: 18px;
}

#myTable th, #myTable td {
  text-align: left;
  padding: 12px;
}

#myTable tr {

}

#myTable tr.header, #myTable tr:nth-child(even) {
  background-color: DeepSkyBlue;       background-color: white;      
}
#myTable tr.header, #myTable tr:nth-child(even):hover {
     border: 5px solid black;      
}
#myTable tr.header, #myTable tr:nth-child(odd):hover {
        border: 5px solid black;
}
 #myTable tr.header, #myTable tr:nth-child(odd) {               
  background-color: DeepSkyBlue;      
}
#myTable tr.header, #myTable tr:nth-child(1):hover {             
  background-color: DeepSkyBlue;              border: 0px solid black;
}
 #myTable tr.header, #myTable tr:nth-child(1) {
  background-color: DeepSkyBlue;          border: 0px solid black; 
}

.EQUIPAGEbtn {
  background-color: #04AA6D;  background-color: transparent;
  color0: white;
  padding: 6px;
  font-size: 16px;
  border: none;
}

.EQUIPAGEdown {
  position: relative;
  display: inline-block;
}

.EQUIPAGEdown-content {
  display: none;
  position: absolute;
  background-color: #f1f1f1;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}

.EQUIPAGEdown-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}

.EQUIPAGEdown-content a:hover {background-color	: #ddd; background-color	: red;}

.EQUIPAGEdown:hover .EQUIPAGEdown-content {display: block; }

.EQUIPAGEdown:hover .EQUIPAGEbtn {background-color: #3e8e41;   background-color: transparent;}

  
  
  * {
  box-sizing: border-box;
}

/* Style the body */
body {
  font-family: Arial, Helvetica, sans-serif;
  margin: 0;
}

/* Header/logo Title */
.header {
  padding: 0px;
  text-align: center;
  background: #1abc9c;background: #56B7C7;
  color: white; height :150px;
}

.droite{
  width: 75%;
  height: 100px;

  float:right;
}

.gauche{
  width: 25%; 
  height: 100px;
  float: left;
}

.header  {
witdh:100%;
}

/* Increase the font size of the heading */
.header h1 {
  font-size: 30px;
}

/* Sticky navbar - toggles between relative and fixed, depending on the scroll position. It is positioned relative until a given offset position is met in the viewport - then it "sticks" in place (like position:fixed). The sticky value is not supported in IE or Edge 15 and earlier versions. However, for these versions the navbar will inherit default position */
.navbar {display: none;
  overflow: hidden;
  background-color: #333;background-color: blue;
  position: sticky;
  position: -webkit-sticky;
  top: 0;
}

/* Style the navigation bar links */
.navbar a {
  float: left;
  display: block;
  color: white;
  text-align: center;
  padding: 14px 20px;
  text-decoration: none;
}


/* Right-aligned link */
.navbar a.right {
  float: right;
}

/* Change color on hover */
.navbar a:hover {
  background-color: #ddd;
  color: black;
}

/* Active/current link */
.navbar a.active {
  background-color: #666;
  color: white;
}

/* Column container */
 
/* Create two unequal columns that sits next to each other */
/* Sidebar/left column */
.side {
  -ms-flex: 30%; /* IE10 */
  flex: 30%;
  background-color: #f1f1f1;
  padding: 20px;  
}

/* Main column */
.main {   
  -ms-flex: 70%; /* IE10 */
  flex: 70%;
  background-color: white;
  padding: 20px;
}

 

/* Footer */
.footer {
  padding: 20px;
  text-align: center;
  background: #ddd;
}
.logocompt
{ 
width:125px; height:125px;
}

.titreimage {
   position: absolute;
  top: 50%;
  left: -25%;
  width:300px;

}

.boutton {
  border: none;
  color: white;
  padding: 15px ;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 4px 2px;
  cursor: pointer; width : 120px;height : 50px;
}
 
.fondvert {background-color: #04AA6D;} /* Green */
.fondbleu {background-color: #008CBA;} /* Blue */
.fondrouge {background-color: #f44336;} /* Red */ 
.fondgris {background-color: #e7e7e7; color: black;} /* Gray */ 
.fondnoir {background-color: #555555;} /* Black */



/* Bottom right text */
.boutton-right {
  position: absolute;
  bottom: 8px;
  right: 16px;
}

/* Centered text */
.centered {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);  
}
.titre
{
  position: relative ; left :33%; transform: translate(-33%, %);
}
.titretexte
{
position: absolute ;font-size: 28px; color : blue; border0 : 0px red solid ;
width :200px;
     position: absolute;
     top: 50px;
  left: -25%;
  }
.titretexte2
{
position: absolute ;font-size: 32px; color : blue;
width :200px;
     position: absolute;
	top: -10px;
  left: -25%;
  }  
 
  
  .boitee
  {
      position: absolute;
  
  width: 100%;
  text-align: center;
  font-size: 20px;
  }
  
 
  
/* Responsive layout - when the screen is less than 700px wide, make the two columns stack on top of each other instead of next to each other */
@media screen and (max-width: 700px) {
  .row {   
    flex-direction: column;
  }
	 .logocompt
{ 
width:100px; height:100px;
}
.header {
  padding: 20px;
  text-align: center;
  background: #1abc9c;background:  ;
  color: white; height :150px;  
}

	   .titreimage {
   position: absolute;
  top: -85%;
  left: -25%;
  ;width:210px;

}

 .side {
			 width :90%; padding:10px;
  background-color: #f1f1f1;    background-color: yellow;
 
}

}              
     /* Responsive layout - when the screen is less than 400px wide, make the navigation links stack on top of each other instead of next to each other */
@media screen and (max-width: 400px) {
  .navbar a {
    float: none;
    width: 100%;
  }
}

body {
  font-family: Arial;
  font-size: 17px;
  padding: 8px;
}

* {
  box-sizing: border-box;
}

.row {
  display: -ms-flexbox; /* IE10 */
  display: flex;
  -ms-flex-wrap: wrap; /* IE10 */
  flex-wrap: wrap;
  margin: 0 -16px;  margin: 0px 0px 0px 0px  ;
}

.col-25 {
  -ms-flex: 25%; /* IE10 */
  flex: 25%;
}

.col-50 {
  -ms-flex: 50%; /* IE10 */
  flex: 50%;
}

.col-75 {
  -ms-flex: 75%; /* IE10 */
  flex: 75%;
}

.col-100 {
  -ms-flex: 90%; /* IE10 */
  flex: 90%;
}
.col-25,
.col-50,
.col-75  {
  padding: 0 16px;
}

.col-100 {
  padding: 0px;
}
.container2 {
  background-color: #f2f2f2;
  padding: 5px 20px 15px 20px;  padding: 5px 5px 5px 5px;  
  width : 100%;
  border: 1px solid lightgrey;
  border-radius: 3px;
}

input[type=text] {
  width: 100%;
  margin-bottom: 20px;
  padding: 12px;
  border: 1px solid #ccc;
  border-radius: 3px;
}

label {
  margin-bottom: 10px;
  display0: block;
}

.icon-container {
  margin-bottom: 20px;
  padding: 7px 0;
  font-size: 24px;
}

.btn {
  background-color: #04AA6D;  background-color: blue;
  color: white;
  padding: 12px;
  margin: 10px 0;
  border: none;
  width: 100%;
  border-radius: 3px;
  cursor: pointer;
  font-size: 17px;
}

.btn:hover {
  background-color: #45a049;
}

a {
  color: #2196F3;
}

hr {
  border: 1px solid lightgrey;
}
.bordure01 { margin: px;
  border: 3px solid lightgrey;
}

span.price {
  float: right;
  color: grey;
}

/* Responsive layout - when the screen is less than 800px wide, make the two columns stack on top of each other instead of next to each other (also change the direction - make the "cart" column go on top) */
@media (max-width: 800px) {
  .row {
    flex-direction0: column-reverse;
  }
  .col-25 {
    margin-bottom: 20px;
  }
}



body {font-family: Arial, Helvetica, sans-serif;}
* {box-sizing: border-box;}

/* Full-width input fields */
input[type=text], input[type=password] {
  width: 100%;
  padding: 15px;
  margin: 5px 0 22px 0;
  display: inline-block;
  border: none;
  background: #f1f1f1;
}

/* Add a background color when the inputs get focus */
input[type=text]:focus, input[type=password]:focus {
  background-color: #ddd;
  outline: none;
}

/* Set a style for all buttons */
button {
  background-color: #04AA6D;       background-color: red;
  color: white;
  padding: 14px 20px;
  margin: 8px 0;
  border: none;
  cursor: pointer;
  width: 100%;
  opacity: 0.9;
}

button:hover {
  opacity:1;
}

/* Extra styles for the cancel button */
.cancelbtn {
  padding: 14px 20px;
  background-color: #f44336;
}

/* Float cancel and signup buttons and add an equal width */
.cancelbtn, .signupbtn {
  float: left;
  width: 50%;
}

/* Add padding to container elements */
.container {
  padding: 16px;
}

/* The Modal (background) */
.modal {
  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: #474e5d;
  padding-top: 50px;
}

/* Modal Content/Box */
.modal-content {
  background-color: #fefefe;
  margin: 5% auto 15% auto; /* 5% from the top, 15% from the bottom and centered */
  border: 1px solid #888;
  width: 80%; /* Could be more or less, depending on screen size */
}

/* Style the horizontal ruler */
hr {
  border: 1px solid #f1f1f1;
  margin-bottom: 25px;
}
 
/* The Close Button (x) */
.close {
  position: absolute;
  right: 35px;
  top: 15px;
  font-size: 40px;
  font-weight: bold;
  color: #f1f1f1;
}

.close:hover,
.close:focus {
  color: #f44336;
  cursor: pointer;
}

/* Clear floats */
.clearfix::after {
  content: "";
  clear: both;
  display: table;
}

/* Change styles for cancel button and signup button on extra small screens */
@media screen and (max-width: 300px) {
  .cancelbtn, .signupbtn {
     width: 100%;
  }
}

body {font-family: Arial, Helvetica, sans-serif;}
* {box-sizing: border-box;}

/* Full-width input fields */
input[type=text], input[type=password] {
  width: 100%;
  padding: 15px;
  margin: 5px 0 22px 0;
  display: inline-block;
  border: none;
  background: #f1f1f1;
}

/* Add a background color when the inputs get focus */
input[type=text]:focus, input[type=password]:focus {
  background-color: #ddd;
  outline: none;
}

/* Set a style for all buttons */
button {
  background-color: #04AA6D;                background-color: white;
  color: white;       color: #035AF9;
  padding: 14px 20px;
  margin: 8px 0;
  border: none;      border: 2px solid  #035AF9;
  cursor: pointer;
  width: 100%;
  opacity: 0.9;
}

button:hover {
  opacity:1;
}

/* Extra styles for the cancel button */
.cancelbtn {
  padding: 14px 20px;
  background-color: #f44336;
}

/* Float cancel and signup buttons and add an equal width */
.cancelbtn, .signupbtn {
  float: left;
  width: 50%;
}

/* Add padding to container elements */
.containerfenetredeplacement {
  padding: 16px;
}

/* The Modal (background) */
.fenetredeplacement {
  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: #474e5d;
  padding-top: 50px;
}

/* Modal Content/Box */
.fenetredeplacement-content {
  background-color: #fefefe;
  margin: 5% auto 15% auto; /* 5% from the top, 15% from the bottom and centered */
  border: 1px solid #888;
  width: 80%; /* Could be more or less, depending on screen size */
}

/* Style the horizontal ruler */
hr {
  border: 1px solid #f1f1f1;
  margin-bottom: 25px;
}
 
/* The Close Button (x) */
.close {
  position: absolute;
  right: 35px;
  top: 15px;
  font-size: 40px;
  font-weight: bold;
  color: #f1f1f1;
}

.close:hover,
.close:focus {
  color: #f44336;
  cursor: pointer;
}

/* Clear floats */
.clearfix::after {
  content: "";
  clear: both;
  display: table;
}

/* Change styles for cancel button and signup button on extra small screens */
@media screen and (max-width: 300px) {
  .cancelbtn, .signupbtn {
     width: 100%;
  }
}


body {
  font-family: Arial;
  font-size: 17px;
  padding: 8px;           background-color : #BFBFBF ;   
}

* {
  box-sizing: border-box;
}

.row {
  display: -ms-flexbox; /* IE10 */
  display: flex;
  -ms-flex-wrap: wrap; /* IE10 */
  flex-wrap: wrap;
  margin: 0 -16px;  margin: 0px 0px 0px 0px  ;
}

.col-25 {
  -ms-flex: 25%; /* IE10 */
  flex: 25%;
}

.col-50 {
  -ms-flex: 50%; /* IE10 */
  flex: 50%;
}

.col-75 {
  -ms-flex: 75%; /* IE10 */
  flex: 75%;
}

.col-100 {
  -ms-flex: 100%; /* IE10 */
  flex: 100%;         
}
.col-25,
.col-50,
.col-75  {
  padding: 0 16px;
}

.col-100 {
  padding: 0px;
}
.container2 {
  background-color: #f2f2f2;
  padding: 5px 20px 15px 20px;  padding: 5px 5px 5px 5px;  
  width : 100%;                                      background-color : #BFBFBF ;   
  border: 1px solid lightgrey;
  border-radius: 3px;
}

input[type=text] {
  width: 100%;
  margin-bottom: 20px;
  padding: 12px;
  border: 1px solid #ccc;
  border-radius: 3px;
}

label {
  margin-bottom: 10px;
  display: 0block;
}

.icon-container {
  margin-bottom: 20px;
  padding: 7px 0;
  font-size: 24px;
}

.btn {
  background-color: #04AA6D;  background-color: blue;
  color: white;
  padding: 12px;
  margin: 10px 0;
  border: none;
  width: 100%;
  border-radius: 3px;
  cursor: pointer;
  font-size: 17px;
}

.btn:hover {
  background-color: #45a049;
}

a {
  color: #2196F3;
}

hr {
  border: 1px solid lightgrey;
}
.bordure01 { margin: px;
  border: 3px solid lightgrey;
}

span.price {
  float: right;
  color: grey;
}

/* Responsive layout - when the screen is less than 800px wide, make the two columns stack on top of each other instead of next to each other (also change the direction - make the "cart" column go on top) */
@media (max-width: 800px) {
  .row {
    flex-direction0: column-reverse;
  }
  .col-25 {
    margin-bottom: 2px;
  }

}
}


body {font-family: Arial, Helvetica, sans-serif;}


input[type=text] {
  width: 100%;
  padding: 12px;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
  margin-top: 6px;
  margin-bottom: 16px;
  resize: vertical;
}
input[type=number] {
  width: 20%;
  padding: 12px;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
  margin-top: 6px;
  margin-bottom: 16px;
  resize: vertical;
}
input[type=submit] {
  background-color: #04AA6D;
  color: white;
  padding: 12px 20px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

input[type=submit]:hover {
  background-color: #45a049;
}

.container00 {
  border-radius: 5px;
  background-color: #f2f2f2;
  padding: 20px;
}


.btnajout {
  background-color: DodgerBlue;
  border: none;
  color: white;
  padding: 12px 16px;
  font-size: 16px;
  cursor: pointer;
}

/* Darker background on mouse-over */
.btnajout:hover {color :DodgerBlue;
  background-color: white;
}

.liensvide
{
	color: black; text-decoration : none;
}
 /* unvisited link */
liensvide:link {
  color: black;     text-decoration : none;
}

/* visited link */
liensvide:visited {
  color: black;        text-decoration : none;
}

/* mouse over link */
liensvide:hover {
  color: black;        text-decoration : none;
}

/* selected link */
liensvide:active {
  color: black;      text-decoration : none;
}

.titreA {   width : 50%;
  margin-bottom: 15px;
  padding: 4px 12px;
}

.rouge {
  background-color: #ffdddd;
  border-left: 6px solid #f44336;
}
  .rougeTITRE {      font-size: 20px;
  background-color: #f44336;
  border-left: 6px solid #f44336;
}
.vert {
  background-color: #ddffdd;
  border-left: 6px solid #04AA6D;
}
 .vertTITRE {      font-size: 20px;
  background-color: #04AA6D;
  border-left: 6px solid #04AA6D;
}
.bleu {
  background-color: #e7f3fe;
  border-left: 6px solid #2196F3;
}
  .bleuTITRE {      font-size: 20px;
  background-color: #2196F3;
  border-left: 6px solid #2196F3;
}
  .jauneTITRE {      font-size: 20px;
  background-color: #ffeb3b;
  border-left: 6px solid #ffeb3b;
}
.jaune {
  background-color: #ffffcc;
  border-left: 6px solid #ffeb3b;
}