/*---------------------------------------- CSS utile à plusieurs composants ------------------------------------*/

body {
  padding: 0px;
  margin: 0px;
  height: 100%;
  min-height: 500px;
  background-color: #F5F5F5;
  font-family: 'Playfair Display', serif;
  position: relative;
  overflow-x: hidden;
}

.btn{
  color: #000;
  background-color: #dae3f3;
  border-color: #000;
}

.btn:hover{
  background-color: #000;
  color: #dae3f3;
}

/*---------------------------------------- Header ------------------------------------*/

.logoEntete{
  width: 8%;
}

.ttrEntete{
  font-family: 'Playfair Display', serif;
}

/*---------------------------------------- Filtre ------------------------------------*/

.menufiltre{
  display: grid;
  grid-template-columns: repeat(2, 1fr);
}

/*---------------------------------------- Menu------------------------------------*/

.menu{
  z-index: 999;
}

.itemMenu:active{
  background-color: #fff;
  color: #000;
}

.btn-unstyled{
  border: none;
  background-color: transparent; 
}

.btnMeLi:active{
  background-color: #fff;
  color: #000;
}

/*---------------------------------------- Footer ------------------------------------*/

.logofooter{
  width: 10%;
  height: 10%;
  margin-bottom: 1%;
  padding-left: 1%;
}

.trtFoot{
  margin-bottom: 1%;
}

/*---------------------------------------- Page de connexion ------------------------------------*/

.banConnex{
  background-color: #dae3f3;
  padding-top: 5%;
  margin-top: 10%;
}

.logoCapsix{
  width: 10%;
  padding-bottom: 2%;
}

.iyuMassage{
  width: 50%;
}

.keycloak{
  font-size: small;
  color: grey;
}

/*---------------------------------------- Tableau------------------------------------*/

/*titre avant les tableaux*/
.tabTitre{
  background-color: #dae3f3;
  color: #000;
  margin-top: 5%;
  padding: 1%;
  width: 30%;
}

.table{
  margin-bottom: 2%;
  margin-top: 2%;
  width: 80%;
}

.tableIncid{
  margin-bottom: 2%;
  margin-top: 2%;
  margin-left: 0%;
}

.tabTr{
  background: #dae3f3;
}

.tabTr:nth-child(even){
  background-color: #fff;
}

.table td:first-child,
.table th:first-child {
  border-right: 1px solid #000; /* Remplacez #000 par la couleur de votre choix */
}

/*---------------------------------------- Chart Donut ------------------------------------*/

.tabchart{
  margin-top: 20%;
}

.chartDonut{
  height: 100%;
  width: 160%;
}

/*---------------------------------------- Page Accueil  ------------------------------------*/


.ListeRobot{
  margin-top: 2%;
}

.wrapper{
  display: inline-flex;
  width: 40%;
}

.listiYU{
  width: 100%;
  margin: 2%;
  position: relative;
  left: 25%;
}

.liiYU{
  background-color: #dae3f3;
}

.titreiYU{
  font-family: 'Playfair Display', serif;
  font-style: normal;
  font-size: 150%;
  block-size: 50px;
}

.icoiYU{
  width: 80%;
}

/*---------------------------------------- Bannière page iYU ------------------------------------*/

.banniere{
  background-color: #dae3f3;
  width: 100%;
  height: 2%;
  margin-top: -2.5%;
}

/*---------------------------------------- Diagramme ------------------------------------*/

.chart{
  margin-top: 5%;
  padding: 5%;
}

.tempTable{
  display: inline-flex;
  padding: 5%;
  width: 80%;
}

.tableTemp{
  width: 100%;
}

.charttemp{
  margin-left : 20%;
  width: 60%;
}

.chartAfflu{
  display: inline-flex;
  width: 60%;
  height: 100%;
  margin-left: -4%;
}

/*---------------------------------------- Date Filtre ------------------------------------*/

.dateFilter{
  width: 50%;
}

.banDate{
  background-color: #dae3f3;
  width: 100%;
  /*pour une banière qui descend en même temps que le scroll */
  position: sticky;
}

.datefilterbtn{
  width: 10%;
}

.nomiYU{
  margin-top: 2%;
  /*pour une banière qui descend en même temps que le scroll
  margin-top: 10%;*/
}

.iYU{
  text-decoration: none;
  font-family: 'Playfair Display', serif;
}

/*
.load{
  display: inline-flex;
  margin-left: 3%;
}

.titreiYU{
  font-family: 'Playfair Display', serif;
  font-style: normal;
  font-weight: normal;
}
*/
/*---------------------------------------- Scroll Top ------------------------------------*/

.scrolltop{
  width: 5%;
  height: 5%;
  bottom: 15%;
  position: fixed;
  right: 1.5%;
}

.icofleche{
  width: 60%;
  height: 60%;
}

.btnScroll{
  border: none;
  background-color: #F5F5F5;
}

/*---------------------------------------- Map ------------------------------------*/

.map{
  border: 'solid 1px black'; 
  padding-top: 5%;
  padding-bottom: 5%;
}

.rectangle {
  width: 100px;
  height: 50px;
  background-color: #f00;
  margin: 10px;
}

/*---------------------------------------- Onglet page ------------------------------------*/

.onglet{
  margin-top: 5%;
  color : black;
}

/*---------------------------------------- Rating ------------------------------------*/

.star {
  position: absolute;
  background-image: url('./components/images/star_empty.png'); /* Image de l'étoile vide 50x50px */
  height:50px;
  width: 50px;
  background-repeat: no-repeat; 
  vertical-align: middle;
  top : 0%;
}

.star.filled {
  background-image: url('./components/images/star.png'); /* Image de l'étoile remplie 50x50px */
}

.star-container {
  height: 50px;
  position: relative;
  margin-top: 2%;
}

.printStar{
  color: gray;
  font-size: small;
  margin-left: 6%;
}