body {
  background-color: #544;
}
.grille {
  /* background-color: #acd; */
  
  background-color: #f2f2f2;
  width: 99vw;
  height: 98vh; 
  border: 0px solid lime;
  border-radius: 10px;
  overflow-y: auto;
  overflow-x: hidden;
  min-height: 0;
  margin: auto;
  display: grid;
  grid-template-rows: 40px 90% 1fr;
  grid-template-columns: 2fr 74% 2fr;
  grid-template-areas: 
  "hautGauche haut haut"
  "gauche centre droite"
  "bas bas bas";
  /* MOD */
  
}

.cellule-2-1 { grid-area: gauche;background-color: #f2f2f2; padding: 1rem; padding-top: 1vh; max-width: 320px; border: 0px solid red}



.cellule-2-2 {
  
   grid-area: centre;
   background-color: rgba(210,250,35,0.8);
   background: linear-gradient(rgba(255, 255, 255, 0.8), rgba(255, 255, 150, 0.5)), url(./img/plast3c_blue.png);
   background-repeat: no-repeat;
   background-size:cover;
   border: 3px solid #acd;
   border-radius: 10px 0px 0px 10px;
   min-width: 70vw;
   overflow-y: scroll;
   overflow-x: hidden;
   padding: 5px;

   /* animation: changeFond 2s linear both;
   animation-iteration-count: 1; */
  }
 
.cellule-2-3 { grid-area: droite; background-color: #f1f1f1; padding: 5px; padding-left: 10px; font-size: 0.9em; max-width: 220px;}
.cellule-2-3 h3 { width: 21em; font-size: 0.9em;}

.cellfooter { 
              grid-area: bas; background-color: #f2f2f2; margin-top: 5px;
             }
.cellheaderG { 
              grid-area: hautGauche; background-color: #f2f2f2; padding: 5px; 
              padding-top: 3px; font-size: 1rem; padding-left: 1rem;
              }
.cellheaderD { 
              grid-area: haut; background-color: #f2f2f2;
              font-size: 0.9rem;
              padding: 5px; margin-bottom: 2px; padding-top: 3px;
             }



.donate {
position: static;
display: flex;
background:  radial-gradient(ellipse, #acd 10%, #f1f1f1 70%);
border: 0px solid orange;
border-radius: 30% 10%;
align-items: start;
align-content: start;
max-width: 56%;
max-height: 50%;
margin-top: 4em;
}


.donate #formdon{
  display: flex;
  position: static;
  background-color: transparent;
  /* margin: auto; */
  padding-top: 2.5em;
  justify-content: flex-start;
  
  border: 0px solid yellowgreen;
 }

.donate #buttdon:hover {
  background-color: transparent;
  border: 2px solid transparent;
}

.donate #formdon #buttdon img { 
  /* object-fit: contain; */
  
  width: 152px;
  height: 116px;
 
}
.donate #formdon #buttdon img:hover { 
  /* object-fit: contain; */
  width: 152px;
  height: 116px;
  background-color: #454;
  
}


#clef2val2 {
  background: #d5d5d5;
}

.cellule-2-3 p {
  padding-left: 10px;
}

#span1 { margin-left: 5%; padding-right: 30%; background-color: transparent; max-width: 50vw; color: #222; font-weight: bold; padding-bottom: 0px;}
#span2 { margin-left: 5%; padding-right: 5%; color: #333; max-width: 82%;}
h1 {
  position: absolute;
  border: 2px solid #acd;
  border-radius: 5px;
  background-color: #fff;
  padding: 3px;
  font-size: 1rem;
  top: 16px;
  right : 28px;
  float:right;
  color: darkolivegreen;
}

select { font-size: 1em; width: 100%;}
.cellule-2-1 button { width: 8em; }

input { font-size: 1em; }

.grosBlanc {
	display: block;
	width: 90%;
  color: darkred;
  font-size: 1.2em;
  /* margin: 2em; */
  margin-top : 1em;
  margin-left: 1em;
  padding-left: 1vw;
  padding-top: 0em;
  /* background-color: #acd; */
  background-color: transparent;
  /* background-clip: content-box; */
  border : 3px solid rgba(0,0,0,.4);
  border-radius: 10px;
  z-index: -6;
}
.grosBlanc::before {
    content: " ";
    white-space: pre;
}
.grosBlanc::after {
    content: " ";
    white-space: pre;
}


.marty {
  /* position: absolute; */
 
  float:left;
  margin-left: 3vw;
  margin-top: 12vh;
  /* padding-top: 13vh; */
  width: 280px;
  height: 210px;
  border: 5px solid gray;
  border-radius: 50%;
  background-color: #f2f2f2;
  background-image: url(./img/full-docEmmett2.png);
  background-repeat: no-repeat;
  background-size: cover;
  visibility: visible;
}
/* #clef2val2 th { background-color: lemonchiffon;} */
/* td:nth-child(2n+4) { background-color: yellow;} */
#clef2val2 th:nth-child(2n-1) { background-color: orange;}



th {font-size: 0.8rem; color: #fecebe;}

.fieldGauche {
    max-width: 88%;
}
.fieldGauche form {
  border: 1px solid #acd;
  border-radius: 5px;
  margin: 0 5px;
  padding: 0 2px;
}

.fieldGauche table td{
  background-color: rgb(250,200,200,0.2);
  border: 1px solid white;
  border-radius: 5px;
  padding: 3px;
  /* padding-bottom: 8px; */
  max-height: 25px;
  height: 5px;
  
}

.fieldGauche td:nth-child(3){
  background-color: red;
}

.fieldGauche fieldset {
	padding: 10px;
}

.blux {
    background-color: #acd;
    color: darkred;
}


.titreV { /* span */
    background: #fff;
	 font-size: 1rem;
	 color: darkred;
	 padding: 3px;
   margin: 5px;
   margin-left: 0px;
   
	 border: 2px solid #acd;
   border-radius: 5px;
 }
 #localisation {font-size: 0.8em;color: #333;}

 #ulModif {
font-weight: bold;
color : darkred;
 }

.bloc-fixe1 {
background-color:red;
  position:fixed;
  border:solid 1px;
  width:30px;
  top:10px;
  left:12px;
  /* bottom:10px; */
  right:10px;
}

.bloc-fixe2 {
background-color:#aaa;
  position:fixed;
  border:solid 1px;
  width:80%;
  height:100%;
  top:10px;
  left:50px;
}

#fieldGauche { max-width: fit-content; padding: 6px; padding-top: 10px; margin-left: 0px; color: green}

.container {
  display: block;
  position: absolute;
  background-color: darkolivegreen;
  overflow: scroll;
 
}

.bloctable3 {
  display: inline-block;
  position: relative;
  border : 0px solid #ddd;
  border-radius: 0 10px 0 0;
  background: linear-gradient(to right, #a44 , transparent, transparent);
  /* background-color: #8c8c8c; */
  overflow: hidden;
  min-width: 260px;
  width: 20%;
  margin-right: 1.1vw;
  opacity: 1;
  z-index: 36;
  /* margin: auto; */
  /* white-space: nowrap; */
  }
  

.largeWidth {
  min-width: 42vw;
  margin-left: 3%;
  background: linear-gradient(black, #8b8, transparent);
}
.mediumWidth {
  /* background-color: #312; */
  font-size: 1em;
  max-width: 35%;
  white-space: nowrap;
  margin-top: 0.2em;
  padding: 10px;
  border-width: 0.5em;
}

.bloctable3 table{
	border-collapse: collapse;
	overflow: hidden;

}


.bloctable3 tr {
  overflow-x: hidden;
}  

.bloctable3 th{
	min-width: 40px;
	padding-left: 5px;
	padding-right: 5px;

}

.bloctable3 td { /* sert pour le contenu des résultats au centre */
  
  padding: 5px;
  padding-top: 2px;
  padding-bottom: 2px;
  margin: 15px;
  /* font-size: normal; */
  font-size: 0.9rem;
  border: 1px solid gray;
  border-radius: 0px;
  /* max-width: 90px; */
  overflow:hidden;
  opacity: 1;  
  z-index: 37;
}



.bloctable3 td:nth-child(odd){
	background-color: #eef;
}
.bloctable3 td:nth-last-child(-n+1){
	background-color: #fea;
	min-width: 2.2em;
}
.bloctable3 img {
	opacity: 1;
	z-index: 38;
	}

#fieldGauche tr td{
  padding-top: 3px;
  padding-bottom: 2px;
}

  .bloctable3b {
    
    display: inline-block;
    position: relative;
    /* background-color: #aaa; */
    
    }

footer {
  background : red;
  position : sticky;
  float: inline-end;
}

/* ===================================== visibility sélection jour / heure */
.hidden {

  display: none;
  /* visibility: collapse; */
  
  /* width: 20%; */
}
/* ====================================== effet de flou 04/05/24 */
.blurry{
  /* filter: blur(4px); */
  /* filter: brightness(50%); */
  /* background-image: url(./img/fireCirclesM2.png); */
}
@keyframes changeFond {
  0% {
    filter: blur(0px);
    filter: brightness(1);
    
  }
 
  100% {
    filter: blur(10px);
    filter: brightness(0.5);
  }
}

.information{
  display: flex;
  position: relative;
  justify-content: center;
  align-content: center;
  color: red;
  font-size: 3em;
  backdrop-filter: blur(10px);
  top: 2em;
}

td #butsub{
  font-weight: bold;
  width: 100%;
}


#butsub2{
	/* background-color: #d8ffa4; */
  font-size: 0.8em;
  font-weight: 400;
  width: 100%;
  margin-top: 5px;
  height: 2.2em;
  border-radius: 3px;
	border: 1px solid gray;
}

#butsub2:hover{
	/* background-color: #dcefa3; */

	border: 1px solid black;
}

#graphButt {
	height: 2em;
	margin-bottom: 5px;
	background-color: #ffeebb;
	border-radius: 3px;
	border: 1px solid gray;
}

#graphButt:hover {
	height: 2em;
	margin-bottom: 5px;
	background-color: #f5e2b2;
	border: 1px solid black;
}

.petitH{
  display: inline-block;
  max-height: 8px;
  /* width: max-width; */
  background-color: transparent;
  border: 0px solid red;
  
}

#graphFonc{
  /* white-space: nowrap; */
  background-color: #acd;
display: flex;
justify-content: center;
align-items: center;
align-content: center;
border: 1px dotted #544;
border-radius: 5px;
/* width: fit-content; */
/* width: 100%; */
max-width: 182px;
margin-left: 0.4em;
margin-top: 12px;
padding: 0.5em; 5px; 0.5em; 5px;

}

/*
#graphFoncButt {
  margin: 4px;
  padding: 8px;
  height: 2em;
  
  max-width: 80px;
  background-color: #aae;
  color: rgb(97, 59, 46);
  font-size: 14px;
}
*/
.blocinfo0{
	display: flex;
	 flex-direction: column; justify-content: center;
	  margin-top: 5%; padding: 2em 0 2em 0;
	   background-color: rgb(250,250,250,0.8);
	    width: 94%;  border: 3px solid #acd;
	     border-radius: 20px;
	      margin-left: 1em;
	      font-size: 0.9rem;
}

.infos {
	color: #555;
	font-size: smaller;
	margin-left: 1em;
	max-width: 90%;
}


@media screen and (max-width: 1925px) {

.grille {
  grid-template-columns: 2fr 74% 2fr;
  }
  .cellule-2-2 {
   border-radius: 10px 0px 0px 10px;
   }
.cellule-2-3 h3 { width: 11em; font-size: 0.9em; color : #454; }
}

@media screen and (max-width: 1900px) {

.grille {
  grid-template-columns: 2fr 73% 2fr;
  }
  .cellule-2-2 {
   /* border: 2px solid #444; */
   min-width: 0;
   }
.cellule-2-3 h3 { width: 11em; font-size: 0.9em; color : darkgreen; }
}

@media screen and (max-width: 1800px) {

.grille {
  grid-template-columns: 1fr 72% 1fr;
  }
.cellule-2-3 h3 { width: 11em; font-size: 0.9em; color : darkgreen; }
.cellheaderD #span1 { max-width: 75%; background-color: transparent; color: #555; }
.mediumWidth {
max-width: 100%;
width: 90%;
}
}

@media screen and (max-width: 1600px) {

.grille {
  grid-template-columns: 1fr 68% 1fr;
  }
.cellule-2-3 h3 { width: 11em; font-size: 0.9em; color: #312; }
.cellheaderD #span1 { max-width: 72%; background-color: transparent; }
/* .cellheaderD h1 { font-size: 0.8rem; max-width: 120px; } */
}


@media screen and (max-width: 1400px) { /* Ecran Dell petit */

.grille {
  grid-template-columns: 1fr 65% 1fr;
  }
/* .cellule-2-2 {  background-image: none; } */
.cellule-2-3 h3 { width: 11em; font-size: 0.9em; color: #444; }
.cellheaderD #span1 { max-width: 66%; background-color: transparent; }
/* .cellheaderD h1 { font-size: 0.8rem; max-width: 120px; } */
}

@media screen and (max-width: 1278px) { /* Ipad air 2 */

.grille {
  grid-template-rows: 1fr 70% 1fr;
  grid-template-columns: 1fr 56% 1fr;

  }
.bloctable3b {
    background-color: #f22;
    }
    
.cellule-2-2 {
   /* border: 3px solid #444; */
   min-width: 0;
   overflow-y: scroll;
   padding: 5px;
  
/*   max-height: 300px; */
  }
.cellule-2-3 h3 { width: 11em; font-size: 0.9em; color : #345; }

.cellheaderD h1 { max-width: 170px; }
.cellheaderD #span1 { max-width: 78%; background-color: transparent; }

h1{
  font-size: 12px;
  min-width: fit-content;
}

.ladivnew{ display: none; }
.mediumWidth {
max-width: 100%;
width: 90%;
}
}

@media screen and (max-width: 960px) { /* Ipad Air 2 Vertical */

.grille {
  grid-template-columns: 1fr 90% 0;
  overflow-x: scroll;
  }
.bloctable3b {
    background-color: #f22;
    } 
.cellule-2-2 {
   /* border: 2px solid #444; */
   min-width: 0;
   overflow-y: scroll;
   overflow-x: scroll; 
   padding: 2px;
  }
  
.bloctable3.largeWidth {
	min-width: 100%;
}
.mediumWidth {
max-width: 100%;
width: 90%;
}
.cellule-2-3 {display: none;}  
.cellule-2-3 h3 { width: 11em; font-size: 0.9em; color : #543; }
.cellheaderD h1 { font-size: 0.8rem; max-width: 120px; }
.cellheaderD #span1 { max-width: 75%; background-color: transparent; }
h1{
  visibility: hidden;
}
.ladivnew{ display: none; }
}