/* VAGUES */

:root
{
 --completion0: 0%; 
 --completion1: 1%; 
 --completion2: 2%; 
 --completion3: 3%; 
 --completion4: 4%; 
 --completion5: 5%; 
 --completion6: 6%; 
 --completion7: 7%; 
 --completion8: 8%; 
 --completion9: 9%; 
 --completion10: 10%; 
 --completion11: 11%; 
 --completion12: 12%; 
 --completion13: 13%; 
 --completion14: 14%; 
 --completion15: 15%; 
 --completion16: 16%; 
 --completion17: 17%; 
 --completion18: 18%; 
 --completion19: 19%; 
 --completion20: 20%; 
 --completion21: 21%; 
 --completion22: 22%; 
 --completion23: 23%; 
 --completion24: 24%; 
 --completion25: 25%; 
 --completion26: 26%; 
 --completion27: 27%; 
 --completion28: 28%; 
 --completion29: 29%; 
 --completion30: 30%; 
 --completion31: 31%; 
 --completion32: 32%; 
 --completion33: 33%; 
 --completion34: 34%; 
 --completion35: 35%; 
 --completion36: 36%; 
 --completion37: 37%; 
 --completion38: 38%; 
 --completion39: 39%; 
 --completion40: 40%; 
 --completion41: 41%; 
 --completion42: 42%; 
 --completion43: 43%; 
 --completion44: 44%; 
 --completion45: 45%; 
 --completion46: 46%; 
 --completion47: 47%; 
 --completion48: 48%; 
 --completion49: 49%; 
 --completion50: 50%; 
 --completion51: 51%; 
 --completion52: 52%; 
 --completion53: 53%; 
 --completion54: 54%; 
 --completion55: 55%; 
 --completion56: 56%; 
 --completion57: 57%; 
 --completion58: 58%; 
 --completion59: 59%; 
 --completion60: 60%; 
 --completion61: 61%; 
 --completion62: 62%; 
 --completion63: 63%; 
 --completion64: 64%; 
 --completion65: 65%; 
 --completion66: 66%; 
 --completion67: 67%; 
 --completion68: 68%; 
 --completion69: 69%; 
 --completion70: 70%; 
 --completion71: 71%; 
 --completion72: 72%; 
 --completion73: 73%; 
 --completion74: 74%; 
 --completion75: 75%; 
 --completion76: 76%; 
 --completion77: 77%; 
 --completion78: 78%; 
 --completion79: 79%; 
 --completion80: 80%; 
 --completion81: 81%; 
 --completion82: 82%; 
 --completion83: 83%; 
 --completion84: 84%; 
 --completion85: 85%; 
 --completion86: 86%; 
 --completion87: 87%; 
 --completion88: 88%; 
 --completion89: 89%; 
 --completion90: 90%; 
 --completion91: 91%; 
 --completion92: 92%; 
 --completion93: 93%; 
 --completion94: 94%; 
 --completion95: 95%; 
 --completion96: 96%; 
 --completion97: 97%; 
 --completion98: 98%; 
 --completion99: 99%; 
 --completion100: 100%; 
	
--offset: 2vh;

/* MES COULEURS */

--rouge: 240,90,8;
--jaune: 240,183,47; 
--orange: 245,124,0; 
--vert: 193,222,105; 
--gris: 49,49,49; 
--gris-clair: 221,221,221; 
--gris-baleine: 162,162,162; 
--noir: 0,0,0; 
--blanc: 255,255,255; 
--bleu: 112,183,245; 
--bleu-facebook: 58,101,253; 
--bleu-fonce: 105,173,167;
--ricard: 23,33,90; 
--jaune-ricard: 249,207,0; 
--cannabis: 109,166,88; 
--rose: 225,146,171; 
--violet: 110,62,172; 

}



/* MONOCHROME :-) */
// :root {
// --rouge: 120,120,120;
// --jaune: 143,143,143; 
// --vert: 165,165,165; 
// --gris: 49,49,49; 
// --gris-clair: 221,221,221; 
// --gris-baleine: 162,162,162; 
// --noir: 0,0,0; 
// --blanc: 255,255,255; 
// --orange: 143,143,143; 
// --bleu: 176,176,176; 
// --ricard: 56,56,56; 
// --jaune-ricard: 124,124,124; 
// --cannabis: 58,58,58; 
// --rose: 181,181,181; 
// }
// img {
	// filter: grayscale(100%);
// }





 .indicator0,  .indicator1,  .indicator2,  .indicator3,  .indicator4,  .indicator5,  .indicator6,  .indicator7,  .indicator8,  .indicator9,  .indicator10,  .indicator11,  .indicator12,  .indicator13,  .indicator14,  .indicator15,  .indicator16,  .indicator17,  .indicator18,  .indicator19,  .indicator20,  .indicator21,  .indicator22,  .indicator23,  .indicator24,  .indicator25,  .indicator26,  .indicator27,  .indicator28,  .indicator29,  .indicator30,  .indicator31,  .indicator32,  .indicator33,  .indicator34,  .indicator35,  .indicator36,  .indicator37,  .indicator38,  .indicator39,  .indicator40,  .indicator41,  .indicator42,  .indicator43,  .indicator44,  .indicator45,  .indicator46,  .indicator47,  .indicator48,  .indicator49,  .indicator50,  .indicator51,  .indicator52,  .indicator53,  .indicator54,  .indicator55,  .indicator56,  .indicator57,  .indicator58,  .indicator59,  .indicator60,  .indicator61,  .indicator62,  .indicator63,  .indicator64,  .indicator65,  .indicator66,  .indicator67,  .indicator68,  .indicator69,  .indicator70,  .indicator71,  .indicator72,  .indicator73,  .indicator74,  .indicator75,  .indicator76,  .indicator77,  .indicator78,  .indicator79,  .indicator80,  .indicator81,  .indicator82,  .indicator83,  .indicator84,  .indicator85,  .indicator86,  .indicator87,  .indicator88,  .indicator89,  .indicator90,  .indicator91,  .indicator92,  .indicator93,  .indicator94,  .indicator95,  .indicator96,  .indicator97,  .indicator98,  .indicator99,  .indicator100	
{
  position: relative;
  overflow: hidden;
  display: flex;
  border-radius: 50%;
  border-width: 6px;
  border-style: solid;
  border-color: rgba(255,255,255,1);

}

/* VAGUE */


.indicator0::after {
  display: block;
  width: 40vh;
  height: 40vh;
  content: "";
  background-image: linear-gradient(to bottom, rgba(var(--jaune),0.88) 28%, rgba(var(--jaune),1.0) 100%);
  
  border-radius: 15vh;
  position: absolute;
  left: 50%;
  top: calc(100% - var(--completion0) + var(--offset));
  translate: -50% 0;
  -webkit-animation: spin 5s linear infinite;
          animation: spin 5s linear infinite;
  opacity: 1; 
}

	
	    

.indicator1::after {
  display: block;
  width: 40vh;
  height: 40vh;
  content: "";
  background-image: linear-gradient(to bottom, rgba(var(--jaune),0.88) 28%, rgba(var(--jaune),1.0) 100%);
  
  border-radius: 15vh;
  position: absolute;
  left: 50%;
  top: calc(100% - var(--completion1) + var(--offset));
  translate: -50% 0;
  -webkit-animation: spin 5s linear infinite;
          animation: spin 5s linear infinite;
  opacity: 1; 
}

	
	    

.indicator2::after {
  display: block;
  width: 40vh;
  height: 40vh;
  content: "";
  background-image: linear-gradient(to bottom, rgba(var(--jaune),0.88) 28%, rgba(var(--jaune),1.0) 100%);
  
  border-radius: 15vh;
  position: absolute;
  left: 50%;
  top: calc(100% - var(--completion2) + var(--offset));
  translate: -50% 0;
  -webkit-animation: spin 5s linear infinite;
          animation: spin 5s linear infinite;
  opacity: 1; 
}

	
	    

.indicator3::after {
  display: block;
  width: 40vh;
  height: 40vh;
  content: "";
  background-image: linear-gradient(to bottom, rgba(var(--jaune),0.88) 28%, rgba(var(--jaune),1.0) 100%);
  
  border-radius: 15vh;
  position: absolute;
  left: 50%;
  top: calc(100% - var(--completion3) + var(--offset));
  translate: -50% 0;
  -webkit-animation: spin 5s linear infinite;
          animation: spin 5s linear infinite;
  opacity: 1; 
}

	
	    

.indicator4::after {
  display: block;
  width: 40vh;
  height: 40vh;
  content: "";
  background-image: linear-gradient(to bottom, rgba(var(--jaune),0.88) 28%, rgba(var(--jaune),1.0) 100%);
  
  border-radius: 15vh;
  position: absolute;
  left: 50%;
  top: calc(100% - var(--completion4) + var(--offset));
  translate: -50% 0;
  -webkit-animation: spin 5s linear infinite;
          animation: spin 5s linear infinite;
  opacity: 1; 
}

	
	    

.indicator5::after {
  display: block;
  width: 40vh;
  height: 40vh;
  content: "";
  background-image: linear-gradient(to bottom, rgba(var(--jaune),0.88) 28%, rgba(var(--jaune),1.0) 100%);
  
  border-radius: 15vh;
  position: absolute;
  left: 50%;
  top: calc(100% - var(--completion5) + var(--offset));
  translate: -50% 0;
  -webkit-animation: spin 5s linear infinite;
          animation: spin 5s linear infinite;
  opacity: 1; 
}

	
	    

.indicator6::after {
  display: block;
  width: 40vh;
  height: 40vh;
  content: "";
  background-image: linear-gradient(to bottom, rgba(var(--jaune),0.88) 28%, rgba(var(--jaune),1.0) 100%);
  
  border-radius: 15vh;
  position: absolute;
  left: 50%;
  top: calc(100% - var(--completion6) + var(--offset));
  translate: -50% 0;
  -webkit-animation: spin 5s linear infinite;
          animation: spin 5s linear infinite;
  opacity: 1; 
}

	
	    

.indicator7::after {
  display: block;
  width: 40vh;
  height: 40vh;
  content: "";
  background-image: linear-gradient(to bottom, rgba(var(--jaune),0.88) 28%, rgba(var(--jaune),1.0) 100%);
  
  border-radius: 15vh;
  position: absolute;
  left: 50%;
  top: calc(100% - var(--completion7) + var(--offset));
  translate: -50% 0;
  -webkit-animation: spin 5s linear infinite;
          animation: spin 5s linear infinite;
  opacity: 1; 
}

	
	    

.indicator8::after {
  display: block;
  width: 40vh;
  height: 40vh;
  content: "";
  background-image: linear-gradient(to bottom, rgba(var(--jaune),0.88) 28%, rgba(var(--jaune),1.0) 100%);
  
  border-radius: 15vh;
  position: absolute;
  left: 50%;
  top: calc(100% - var(--completion8) + var(--offset));
  translate: -50% 0;
  -webkit-animation: spin 5s linear infinite;
          animation: spin 5s linear infinite;
  opacity: 1; 
}

	
	    

.indicator9::after {
  display: block;
  width: 40vh;
  height: 40vh;
  content: "";
  background-image: linear-gradient(to bottom, rgba(var(--jaune),0.88) 28%, rgba(var(--jaune),1.0) 100%);
  
  border-radius: 15vh;
  position: absolute;
  left: 50%;
  top: calc(100% - var(--completion9) + var(--offset));
  translate: -50% 0;
  -webkit-animation: spin 5s linear infinite;
          animation: spin 5s linear infinite;
  opacity: 1; 
}

	
	    

.indicator10::after {
  display: block;
  width: 40vh;
  height: 40vh;
  content: "";
  background-image: linear-gradient(to bottom, rgba(var(--jaune),0.88) 28%, rgba(var(--jaune),1.0) 100%);
  
  border-radius: 15vh;
  position: absolute;
  left: 50%;
  top: calc(100% - var(--completion10) + var(--offset));
  translate: -50% 0;
  -webkit-animation: spin 5s linear infinite;
          animation: spin 5s linear infinite;
  opacity: 1; 
}

	
	    

.indicator11::after {
  display: block;
  width: 40vh;
  height: 40vh;
  content: "";
  background-image: linear-gradient(to bottom, rgba(var(--jaune),0.88) 28%, rgba(var(--jaune),1.0) 100%);
  
  border-radius: 15vh;
  position: absolute;
  left: 50%;
  top: calc(100% - var(--completion11) + var(--offset));
  translate: -50% 0;
  -webkit-animation: spin 5s linear infinite;
          animation: spin 5s linear infinite;
  opacity: 1; 
}

	
	    

.indicator12::after {
  display: block;
  width: 40vh;
  height: 40vh;
  content: "";
  background-image: linear-gradient(to bottom, rgba(var(--jaune),0.88) 28%, rgba(var(--jaune),1.0) 100%);
  
  border-radius: 15vh;
  position: absolute;
  left: 50%;
  top: calc(100% - var(--completion12) + var(--offset));
  translate: -50% 0;
  -webkit-animation: spin 5s linear infinite;
          animation: spin 5s linear infinite;
  opacity: 1; 
}

	
	    

.indicator13::after {
  display: block;
  width: 40vh;
  height: 40vh;
  content: "";
  background-image: linear-gradient(to bottom, rgba(var(--jaune),0.88) 28%, rgba(var(--jaune),1.0) 100%);
  
  border-radius: 15vh;
  position: absolute;
  left: 50%;
  top: calc(100% - var(--completion13) + var(--offset));
  translate: -50% 0;
  -webkit-animation: spin 5s linear infinite;
          animation: spin 5s linear infinite;
  opacity: 1; 
}

	
	    

.indicator14::after {
  display: block;
  width: 40vh;
  height: 40vh;
  content: "";
  background-image: linear-gradient(to bottom, rgba(var(--jaune),0.88) 28%, rgba(var(--jaune),1.0) 100%);
  
  border-radius: 15vh;
  position: absolute;
  left: 50%;
  top: calc(100% - var(--completion14) + var(--offset));
  translate: -50% 0;
  -webkit-animation: spin 5s linear infinite;
          animation: spin 5s linear infinite;
  opacity: 1; 
}

	
	    

.indicator15::after {
  display: block;
  width: 40vh;
  height: 40vh;
  content: "";
  background-image: linear-gradient(to bottom, rgba(var(--jaune),0.88) 28%, rgba(var(--jaune),1.0) 100%);
  
  border-radius: 15vh;
  position: absolute;
  left: 50%;
  top: calc(100% - var(--completion15) + var(--offset));
  translate: -50% 0;
  -webkit-animation: spin 5s linear infinite;
          animation: spin 5s linear infinite;
  opacity: 1; 
}

	
	    

.indicator16::after {
  display: block;
  width: 40vh;
  height: 40vh;
  content: "";
  background-image: linear-gradient(to bottom, rgba(var(--jaune),0.88) 28%, rgba(var(--jaune),1.0) 100%);
  
  border-radius: 15vh;
  position: absolute;
  left: 50%;
  top: calc(100% - var(--completion16) + var(--offset));
  translate: -50% 0;
  -webkit-animation: spin 5s linear infinite;
          animation: spin 5s linear infinite;
  opacity: 1; 
}

	
	    

.indicator17::after {
  display: block;
  width: 40vh;
  height: 40vh;
  content: "";
  background-image: linear-gradient(to bottom, rgba(var(--jaune),0.88) 28%, rgba(var(--jaune),1.0) 100%);
  
  border-radius: 15vh;
  position: absolute;
  left: 50%;
  top: calc(100% - var(--completion17) + var(--offset));
  translate: -50% 0;
  -webkit-animation: spin 5s linear infinite;
          animation: spin 5s linear infinite;
  opacity: 1; 
}

	
	    

.indicator18::after {
  display: block;
  width: 40vh;
  height: 40vh;
  content: "";
  background-image: linear-gradient(to bottom, rgba(var(--jaune),0.88) 28%, rgba(var(--jaune),1.0) 100%);
  
  border-radius: 15vh;
  position: absolute;
  left: 50%;
  top: calc(100% - var(--completion18) + var(--offset));
  translate: -50% 0;
  -webkit-animation: spin 5s linear infinite;
          animation: spin 5s linear infinite;
  opacity: 1; 
}

	
	    

.indicator19::after {
  display: block;
  width: 40vh;
  height: 40vh;
  content: "";
  background-image: linear-gradient(to bottom, rgba(var(--jaune),0.88) 28%, rgba(var(--jaune),1.0) 100%);
  
  border-radius: 15vh;
  position: absolute;
  left: 50%;
  top: calc(100% - var(--completion19) + var(--offset));
  translate: -50% 0;
  -webkit-animation: spin 5s linear infinite;
          animation: spin 5s linear infinite;
  opacity: 1; 
}

	
	    

.indicator20::after {
  display: block;
  width: 40vh;
  height: 40vh;
  content: "";
  background-image: linear-gradient(to bottom, rgba(var(--jaune),0.88) 28%, rgba(var(--jaune),1.0) 100%);
  
  border-radius: 15vh;
  position: absolute;
  left: 50%;
  top: calc(100% - var(--completion20) + var(--offset));
  translate: -50% 0;
  -webkit-animation: spin 5s linear infinite;
          animation: spin 5s linear infinite;
  opacity: 1; 
}

	
	    

.indicator21::after {
  display: block;
  width: 40vh;
  height: 40vh;
  content: "";
  background-image: linear-gradient(to bottom, rgba(var(--jaune),0.88) 28%, rgba(var(--jaune),1.0) 100%);
  
  border-radius: 15vh;
  position: absolute;
  left: 50%;
  top: calc(100% - var(--completion21) + var(--offset));
  translate: -50% 0;
  -webkit-animation: spin 5s linear infinite;
          animation: spin 5s linear infinite;
  opacity: 1; 
}

	
	    

.indicator22::after {
  display: block;
  width: 40vh;
  height: 40vh;
  content: "";
  background-image: linear-gradient(to bottom, rgba(var(--jaune),0.88) 28%, rgba(var(--jaune),1.0) 100%);
  
  border-radius: 15vh;
  position: absolute;
  left: 50%;
  top: calc(100% - var(--completion22) + var(--offset));
  translate: -50% 0;
  -webkit-animation: spin 5s linear infinite;
          animation: spin 5s linear infinite;
  opacity: 1; 
}

	
	    

.indicator23::after {
  display: block;
  width: 40vh;
  height: 40vh;
  content: "";
  background-image: linear-gradient(to bottom, rgba(var(--jaune),0.88) 28%, rgba(var(--jaune),1.0) 100%);
  
  border-radius: 15vh;
  position: absolute;
  left: 50%;
  top: calc(100% - var(--completion23) + var(--offset));
  translate: -50% 0;
  -webkit-animation: spin 5s linear infinite;
          animation: spin 5s linear infinite;
  opacity: 1; 
}

	
	    

.indicator24::after {
  display: block;
  width: 40vh;
  height: 40vh;
  content: "";
  background-image: linear-gradient(to bottom, rgba(var(--jaune),0.88) 28%, rgba(var(--jaune),1.0) 100%);
  
  border-radius: 15vh;
  position: absolute;
  left: 50%;
  top: calc(100% - var(--completion24) + var(--offset));
  translate: -50% 0;
  -webkit-animation: spin 5s linear infinite;
          animation: spin 5s linear infinite;
  opacity: 1; 
}

	
	    

.indicator25::after {
  display: block;
  width: 40vh;
  height: 40vh;
  content: "";
  background-image: linear-gradient(to bottom, rgba(var(--jaune),0.88) 28%, rgba(var(--jaune),1.0) 100%);
  
  border-radius: 15vh;
  position: absolute;
  left: 50%;
  top: calc(100% - var(--completion25) + var(--offset));
  translate: -50% 0;
  -webkit-animation: spin 5s linear infinite;
          animation: spin 5s linear infinite;
  opacity: 1; 
}

	
	    

.indicator26::after {
  display: block;
  width: 40vh;
  height: 40vh;
  content: "";
  background-image: linear-gradient(to bottom, rgba(var(--jaune),0.88) 28%, rgba(var(--jaune),1.0) 100%);
  
  border-radius: 15vh;
  position: absolute;
  left: 50%;
  top: calc(100% - var(--completion26) + var(--offset));
  translate: -50% 0;
  -webkit-animation: spin 5s linear infinite;
          animation: spin 5s linear infinite;
  opacity: 1; 
}

	
	    

.indicator27::after {
  display: block;
  width: 40vh;
  height: 40vh;
  content: "";
  background-image: linear-gradient(to bottom, rgba(var(--jaune),0.88) 28%, rgba(var(--jaune),1.0) 100%);
  
  border-radius: 15vh;
  position: absolute;
  left: 50%;
  top: calc(100% - var(--completion27) + var(--offset));
  translate: -50% 0;
  -webkit-animation: spin 5s linear infinite;
          animation: spin 5s linear infinite;
  opacity: 1; 
}

	
	    

.indicator28::after {
  display: block;
  width: 40vh;
  height: 40vh;
  content: "";
  background-image: linear-gradient(to bottom, rgba(var(--jaune),0.88) 28%, rgba(var(--jaune),1.0) 100%);
  
  border-radius: 15vh;
  position: absolute;
  left: 50%;
  top: calc(100% - var(--completion28) + var(--offset));
  translate: -50% 0;
  -webkit-animation: spin 5s linear infinite;
          animation: spin 5s linear infinite;
  opacity: 1; 
}

	
	    

.indicator29::after {
  display: block;
  width: 40vh;
  height: 40vh;
  content: "";
  background-image: linear-gradient(to bottom, rgba(var(--jaune),0.88) 28%, rgba(var(--jaune),1.0) 100%);
  
  border-radius: 15vh;
  position: absolute;
  left: 50%;
  top: calc(100% - var(--completion29) + var(--offset));
  translate: -50% 0;
  -webkit-animation: spin 5s linear infinite;
          animation: spin 5s linear infinite;
  opacity: 1; 
}

	
	    

.indicator30::after {
  display: block;
  width: 40vh;
  height: 40vh;
  content: "";
  background-image: linear-gradient(to bottom, rgba(var(--jaune),0.88) 28%, rgba(var(--jaune),1.0) 100%);
  
  border-radius: 15vh;
  position: absolute;
  left: 50%;
  top: calc(100% - var(--completion30) + var(--offset));
  translate: -50% 0;
  -webkit-animation: spin 5s linear infinite;
          animation: spin 5s linear infinite;
  opacity: 1; 
}

	
	    

.indicator31::after {
  display: block;
  width: 40vh;
  height: 40vh;
  content: "";
  background-image: linear-gradient(to bottom, rgba(var(--jaune),0.88) 28%, rgba(var(--jaune),1.0) 100%);
  
  border-radius: 15vh;
  position: absolute;
  left: 50%;
  top: calc(100% - var(--completion31) + var(--offset));
  translate: -50% 0;
  -webkit-animation: spin 5s linear infinite;
          animation: spin 5s linear infinite;
  opacity: 1; 
}

	
	    

.indicator32::after {
  display: block;
  width: 40vh;
  height: 40vh;
  content: "";
  background-image: linear-gradient(to bottom, rgba(var(--jaune),0.88) 28%, rgba(var(--jaune),1.0) 100%);
  
  border-radius: 15vh;
  position: absolute;
  left: 50%;
  top: calc(100% - var(--completion32) + var(--offset));
  translate: -50% 0;
  -webkit-animation: spin 5s linear infinite;
          animation: spin 5s linear infinite;
  opacity: 1; 
}

	
	    

.indicator33::after {
  display: block;
  width: 40vh;
  height: 40vh;
  content: "";
  background-image: linear-gradient(to bottom, rgba(var(--jaune),0.88) 28%, rgba(var(--jaune),1.0) 100%);
  
  border-radius: 15vh;
  position: absolute;
  left: 50%;
  top: calc(100% - var(--completion33) + var(--offset));
  translate: -50% 0;
  -webkit-animation: spin 5s linear infinite;
          animation: spin 5s linear infinite;
  opacity: 1; 
}

	
	    

.indicator34::after {
  display: block;
  width: 40vh;
  height: 40vh;
  content: "";
  background-image: linear-gradient(to bottom, rgba(var(--jaune),0.88) 28%, rgba(var(--jaune),1.0) 100%);
  
  border-radius: 15vh;
  position: absolute;
  left: 50%;
  top: calc(100% - var(--completion34) + var(--offset));
  translate: -50% 0;
  -webkit-animation: spin 5s linear infinite;
          animation: spin 5s linear infinite;
  opacity: 1; 
}

	
	    

.indicator35::after {
  display: block;
  width: 40vh;
  height: 40vh;
  content: "";
  background-image: linear-gradient(to bottom, rgba(var(--jaune),0.88) 28%, rgba(var(--jaune),1.0) 100%);
  
  border-radius: 15vh;
  position: absolute;
  left: 50%;
  top: calc(100% - var(--completion35) + var(--offset));
  translate: -50% 0;
  -webkit-animation: spin 5s linear infinite;
          animation: spin 5s linear infinite;
  opacity: 1; 
}

	
	    

.indicator36::after {
  display: block;
  width: 40vh;
  height: 40vh;
  content: "";
  background-image: linear-gradient(to bottom, rgba(var(--jaune),0.88) 28%, rgba(var(--jaune),1.0) 100%);
  
  border-radius: 15vh;
  position: absolute;
  left: 50%;
  top: calc(100% - var(--completion36) + var(--offset));
  translate: -50% 0;
  -webkit-animation: spin 5s linear infinite;
          animation: spin 5s linear infinite;
  opacity: 1; 
}

	
	    

.indicator37::after {
  display: block;
  width: 40vh;
  height: 40vh;
  content: "";
  background-image: linear-gradient(to bottom, rgba(var(--jaune),0.88) 28%, rgba(var(--jaune),1.0) 100%);
  
  border-radius: 15vh;
  position: absolute;
  left: 50%;
  top: calc(100% - var(--completion37) + var(--offset));
  translate: -50% 0;
  -webkit-animation: spin 5s linear infinite;
          animation: spin 5s linear infinite;
  opacity: 1; 
}

	
	    

.indicator38::after {
  display: block;
  width: 40vh;
  height: 40vh;
  content: "";
  background-image: linear-gradient(to bottom, rgba(var(--jaune),0.88) 28%, rgba(var(--jaune),1.0) 100%);
  
  border-radius: 15vh;
  position: absolute;
  left: 50%;
  top: calc(100% - var(--completion38) + var(--offset));
  translate: -50% 0;
  -webkit-animation: spin 5s linear infinite;
          animation: spin 5s linear infinite;
  opacity: 1; 
}

	
	    

.indicator39::after {
  display: block;
  width: 40vh;
  height: 40vh;
  content: "";
  background-image: linear-gradient(to bottom, rgba(var(--jaune),0.88) 28%, rgba(var(--jaune),1.0) 100%);
  
  border-radius: 15vh;
  position: absolute;
  left: 50%;
  top: calc(100% - var(--completion39) + var(--offset));
  translate: -50% 0;
  -webkit-animation: spin 5s linear infinite;
          animation: spin 5s linear infinite;
  opacity: 1; 
}

	
	    

.indicator40::after {
  display: block;
  width: 40vh;
  height: 40vh;
  content: "";
  background-image: linear-gradient(to bottom, rgba(var(--jaune),0.88) 28%, rgba(var(--jaune),1.0) 100%);
  
  border-radius: 15vh;
  position: absolute;
  left: 50%;
  top: calc(100% - var(--completion40) + var(--offset));
  translate: -50% 0;
  -webkit-animation: spin 5s linear infinite;
          animation: spin 5s linear infinite;
  opacity: 1; 
}

	
	    

.indicator41::after {
  display: block;
  width: 40vh;
  height: 40vh;
  content: "";
  background-image: linear-gradient(to bottom, rgba(var(--jaune),0.88) 28%, rgba(var(--jaune),1.0) 100%);
  
  border-radius: 15vh;
  position: absolute;
  left: 50%;
  top: calc(100% - var(--completion41) + var(--offset));
  translate: -50% 0;
  -webkit-animation: spin 5s linear infinite;
          animation: spin 5s linear infinite;
  opacity: 1; 
}

	
	    

.indicator42::after {
  display: block;
  width: 40vh;
  height: 40vh;
  content: "";
  background-image: linear-gradient(to bottom, rgba(var(--jaune),0.88) 28%, rgba(var(--jaune),1.0) 100%);
  
  border-radius: 15vh;
  position: absolute;
  left: 50%;
  top: calc(100% - var(--completion42) + var(--offset));
  translate: -50% 0;
  -webkit-animation: spin 5s linear infinite;
          animation: spin 5s linear infinite;
  opacity: 1; 
}

	
	    

.indicator43::after {
  display: block;
  width: 40vh;
  height: 40vh;
  content: "";
  background-image: linear-gradient(to bottom, rgba(var(--jaune),0.88) 28%, rgba(var(--jaune),1.0) 100%);
  
  border-radius: 15vh;
  position: absolute;
  left: 50%;
  top: calc(100% - var(--completion43) + var(--offset));
  translate: -50% 0;
  -webkit-animation: spin 5s linear infinite;
          animation: spin 5s linear infinite;
  opacity: 1; 
}

	
	    

.indicator44::after {
  display: block;
  width: 40vh;
  height: 40vh;
  content: "";
  background-image: linear-gradient(to bottom, rgba(var(--jaune),0.88) 28%, rgba(var(--jaune),1.0) 100%);
  
  border-radius: 15vh;
  position: absolute;
  left: 50%;
  top: calc(100% - var(--completion44) + var(--offset));
  translate: -50% 0;
  -webkit-animation: spin 5s linear infinite;
          animation: spin 5s linear infinite;
  opacity: 1; 
}

	
	    

.indicator45::after {
  display: block;
  width: 40vh;
  height: 40vh;
  content: "";
  background-image: linear-gradient(to bottom, rgba(var(--jaune),0.88) 28%, rgba(var(--jaune),1.0) 100%);
  
  border-radius: 15vh;
  position: absolute;
  left: 50%;
  top: calc(100% - var(--completion45) + var(--offset));
  translate: -50% 0;
  -webkit-animation: spin 5s linear infinite;
          animation: spin 5s linear infinite;
  opacity: 1; 
}

	
	    

.indicator46::after {
  display: block;
  width: 40vh;
  height: 40vh;
  content: "";
  background-image: linear-gradient(to bottom, rgba(var(--jaune),0.88) 28%, rgba(var(--jaune),1.0) 100%);
  
  border-radius: 15vh;
  position: absolute;
  left: 50%;
  top: calc(100% - var(--completion46) + var(--offset));
  translate: -50% 0;
  -webkit-animation: spin 5s linear infinite;
          animation: spin 5s linear infinite;
  opacity: 1; 
}

	
	    

.indicator47::after {
  display: block;
  width: 40vh;
  height: 40vh;
  content: "";
  background-image: linear-gradient(to bottom, rgba(var(--jaune),0.88) 28%, rgba(var(--jaune),1.0) 100%);
  
  border-radius: 15vh;
  position: absolute;
  left: 50%;
  top: calc(100% - var(--completion47) + var(--offset));
  translate: -50% 0;
  -webkit-animation: spin 5s linear infinite;
          animation: spin 5s linear infinite;
  opacity: 1; 
}

	
	    

.indicator48::after {
  display: block;
  width: 40vh;
  height: 40vh;
  content: "";
  background-image: linear-gradient(to bottom, rgba(var(--jaune),0.88) 28%, rgba(var(--jaune),1.0) 100%);
  
  border-radius: 15vh;
  position: absolute;
  left: 50%;
  top: calc(100% - var(--completion48) + var(--offset));
  translate: -50% 0;
  -webkit-animation: spin 5s linear infinite;
          animation: spin 5s linear infinite;
  opacity: 1; 
}

	
	    

.indicator49::after {
  display: block;
  width: 40vh;
  height: 40vh;
  content: "";
  background-image: linear-gradient(to bottom, rgba(var(--jaune),0.88) 28%, rgba(var(--jaune),1.0) 100%);
  
  border-radius: 15vh;
  position: absolute;
  left: 50%;
  top: calc(100% - var(--completion49) + var(--offset));
  translate: -50% 0;
  -webkit-animation: spin 5s linear infinite;
          animation: spin 5s linear infinite;
  opacity: 1; 
}

	
	    

.indicator50::after {
  display: block;
  width: 40vh;
  height: 40vh;
  content: "";
  background-image: linear-gradient(to bottom, rgba(var(--jaune),0.88) 28%, rgba(var(--jaune),1.0) 100%);
  
  border-radius: 15vh;
  position: absolute;
  left: 50%;
  top: calc(100% - var(--completion50) + var(--offset));
  translate: -50% 0;
  -webkit-animation: spin 5s linear infinite;
          animation: spin 5s linear infinite;
  opacity: 1; 
}

	
	    

.indicator51::after {
  display: block;
  width: 40vh;
  height: 40vh;
  content: "";
  background-image: linear-gradient(to bottom, rgba(var(--jaune),0.88) 28%, rgba(var(--jaune),1.0) 100%);
  
  border-radius: 15vh;
  position: absolute;
  left: 50%;
  top: calc(100% - var(--completion51) + var(--offset));
  translate: -50% 0;
  -webkit-animation: spin 5s linear infinite;
          animation: spin 5s linear infinite;
  opacity: 1; 
}

	
	    

.indicator52::after {
  display: block;
  width: 40vh;
  height: 40vh;
  content: "";
  background-image: linear-gradient(to bottom, rgba(var(--jaune),0.88) 28%, rgba(var(--jaune),1.0) 100%);
  
  border-radius: 15vh;
  position: absolute;
  left: 50%;
  top: calc(100% - var(--completion52) + var(--offset));
  translate: -50% 0;
  -webkit-animation: spin 5s linear infinite;
          animation: spin 5s linear infinite;
  opacity: 1; 
}

	
	    

.indicator53::after {
  display: block;
  width: 40vh;
  height: 40vh;
  content: "";
  background-image: linear-gradient(to bottom, rgba(var(--jaune),0.88) 28%, rgba(var(--jaune),1.0) 100%);
  
  border-radius: 15vh;
  position: absolute;
  left: 50%;
  top: calc(100% - var(--completion53) + var(--offset));
  translate: -50% 0;
  -webkit-animation: spin 5s linear infinite;
          animation: spin 5s linear infinite;
  opacity: 1; 
}

	
	    

.indicator54::after {
  display: block;
  width: 40vh;
  height: 40vh;
  content: "";
  background-image: linear-gradient(to bottom, rgba(var(--jaune),0.88) 28%, rgba(var(--jaune),1.0) 100%);
  
  border-radius: 15vh;
  position: absolute;
  left: 50%;
  top: calc(100% - var(--completion54) + var(--offset));
  translate: -50% 0;
  -webkit-animation: spin 5s linear infinite;
          animation: spin 5s linear infinite;
  opacity: 1; 
}

	
	    

.indicator55::after {
  display: block;
  width: 40vh;
  height: 40vh;
  content: "";
  background-image: linear-gradient(to bottom, rgba(var(--jaune),0.88) 28%, rgba(var(--jaune),1.0) 100%);
  
  border-radius: 15vh;
  position: absolute;
  left: 50%;
  top: calc(100% - var(--completion55) + var(--offset));
  translate: -50% 0;
  -webkit-animation: spin 5s linear infinite;
          animation: spin 5s linear infinite;
  opacity: 1; 
}

	
	    

.indicator56::after {
  display: block;
  width: 40vh;
  height: 40vh;
  content: "";
  background-image: linear-gradient(to bottom, rgba(var(--jaune),0.88) 28%, rgba(var(--jaune),1.0) 100%);
  
  border-radius: 15vh;
  position: absolute;
  left: 50%;
  top: calc(100% - var(--completion56) + var(--offset));
  translate: -50% 0;
  -webkit-animation: spin 5s linear infinite;
          animation: spin 5s linear infinite;
  opacity: 1; 
}

	
	    

.indicator57::after {
  display: block;
  width: 40vh;
  height: 40vh;
  content: "";
  background-image: linear-gradient(to bottom, rgba(var(--jaune),0.88) 28%, rgba(var(--jaune),1.0) 100%);
  
  border-radius: 15vh;
  position: absolute;
  left: 50%;
  top: calc(100% - var(--completion57) + var(--offset));
  translate: -50% 0;
  -webkit-animation: spin 5s linear infinite;
          animation: spin 5s linear infinite;
  opacity: 1; 
}

	
	    

.indicator58::after {
  display: block;
  width: 40vh;
  height: 40vh;
  content: "";
  background-image: linear-gradient(to bottom, rgba(var(--jaune),0.88) 28%, rgba(var(--jaune),1.0) 100%);
  
  border-radius: 15vh;
  position: absolute;
  left: 50%;
  top: calc(100% - var(--completion58) + var(--offset));
  translate: -50% 0;
  -webkit-animation: spin 5s linear infinite;
          animation: spin 5s linear infinite;
  opacity: 1; 
}

	
	    

.indicator59::after {
  display: block;
  width: 40vh;
  height: 40vh;
  content: "";
  background-image: linear-gradient(to bottom, rgba(var(--jaune),0.88) 28%, rgba(var(--jaune),1.0) 100%);
  
  border-radius: 15vh;
  position: absolute;
  left: 50%;
  top: calc(100% - var(--completion59) + var(--offset));
  translate: -50% 0;
  -webkit-animation: spin 5s linear infinite;
          animation: spin 5s linear infinite;
  opacity: 1; 
}

	
	    

.indicator60::after {
  display: block;
  width: 40vh;
  height: 40vh;
  content: "";
  background-image: linear-gradient(to bottom, rgba(var(--jaune),0.88) 28%, rgba(var(--jaune),1.0) 100%);
  
  border-radius: 15vh;
  position: absolute;
  left: 50%;
  top: calc(100% - var(--completion60) + var(--offset));
  translate: -50% 0;
  -webkit-animation: spin 5s linear infinite;
          animation: spin 5s linear infinite;
  opacity: 1; 
}

	
	    

.indicator61::after {
  display: block;
  width: 40vh;
  height: 40vh;
  content: "";
  background-image: linear-gradient(to bottom, rgba(var(--jaune),0.88) 28%, rgba(var(--jaune),1.0) 100%);
  
  border-radius: 15vh;
  position: absolute;
  left: 50%;
  top: calc(100% - var(--completion61) + var(--offset));
  translate: -50% 0;
  -webkit-animation: spin 5s linear infinite;
          animation: spin 5s linear infinite;
  opacity: 1; 
}

	
	    

.indicator62::after {
  display: block;
  width: 40vh;
  height: 40vh;
  content: "";
  background-image: linear-gradient(to bottom, rgba(var(--jaune),0.88) 28%, rgba(var(--jaune),1.0) 100%);
  
  border-radius: 15vh;
  position: absolute;
  left: 50%;
  top: calc(100% - var(--completion62) + var(--offset));
  translate: -50% 0;
  -webkit-animation: spin 5s linear infinite;
          animation: spin 5s linear infinite;
  opacity: 1; 
}

	
	    

.indicator63::after {
  display: block;
  width: 40vh;
  height: 40vh;
  content: "";
  background-image: linear-gradient(to bottom, rgba(var(--jaune),0.88) 28%, rgba(var(--jaune),1.0) 100%);
  
  border-radius: 15vh;
  position: absolute;
  left: 50%;
  top: calc(100% - var(--completion63) + var(--offset));
  translate: -50% 0;
  -webkit-animation: spin 5s linear infinite;
          animation: spin 5s linear infinite;
  opacity: 1; 
}

	
	    

.indicator64::after {
  display: block;
  width: 40vh;
  height: 40vh;
  content: "";
  background-image: linear-gradient(to bottom, rgba(var(--jaune),0.88) 28%, rgba(var(--jaune),1.0) 100%);
  
  border-radius: 15vh;
  position: absolute;
  left: 50%;
  top: calc(100% - var(--completion64) + var(--offset));
  translate: -50% 0;
  -webkit-animation: spin 5s linear infinite;
          animation: spin 5s linear infinite;
  opacity: 1; 
}

	
	    

.indicator65::after {
  display: block;
  width: 40vh;
  height: 40vh;
  content: "";
  background-image: linear-gradient(to bottom, rgba(var(--jaune),0.88) 28%, rgba(var(--jaune),1.0) 100%);
  
  border-radius: 15vh;
  position: absolute;
  left: 50%;
  top: calc(100% - var(--completion65) + var(--offset));
  translate: -50% 0;
  -webkit-animation: spin 5s linear infinite;
          animation: spin 5s linear infinite;
  opacity: 1; 
}

	
	    

.indicator66::after {
  display: block;
  width: 40vh;
  height: 40vh;
  content: "";
  background-image: linear-gradient(to bottom, rgba(var(--jaune),0.88) 28%, rgba(var(--jaune),1.0) 100%);
  
  border-radius: 15vh;
  position: absolute;
  left: 50%;
  top: calc(100% - var(--completion66) + var(--offset));
  translate: -50% 0;
  -webkit-animation: spin 5s linear infinite;
          animation: spin 5s linear infinite;
  opacity: 1; 
}

	
	    

.indicator67::after {
  display: block;
  width: 40vh;
  height: 40vh;
  content: "";
  background-image: linear-gradient(to bottom, rgba(var(--jaune),0.88) 28%, rgba(var(--jaune),1.0) 100%);
  
  border-radius: 15vh;
  position: absolute;
  left: 50%;
  top: calc(100% - var(--completion67) + var(--offset));
  translate: -50% 0;
  -webkit-animation: spin 5s linear infinite;
          animation: spin 5s linear infinite;
  opacity: 1; 
}

	
	    

.indicator68::after {
  display: block;
  width: 40vh;
  height: 40vh;
  content: "";
  background-image: linear-gradient(to bottom, rgba(var(--jaune),0.88) 28%, rgba(var(--jaune),1.0) 100%);
  
  border-radius: 15vh;
  position: absolute;
  left: 50%;
  top: calc(100% - var(--completion68) + var(--offset));
  translate: -50% 0;
  -webkit-animation: spin 5s linear infinite;
          animation: spin 5s linear infinite;
  opacity: 1; 
}

	
	    

.indicator69::after {
  display: block;
  width: 40vh;
  height: 40vh;
  content: "";
  background-image: linear-gradient(to bottom, rgba(var(--jaune),0.88) 28%, rgba(var(--jaune),1.0) 100%);
  
  border-radius: 15vh;
  position: absolute;
  left: 50%;
  top: calc(100% - var(--completion69) + var(--offset));
  translate: -50% 0;
  -webkit-animation: spin 5s linear infinite;
          animation: spin 5s linear infinite;
  opacity: 1; 
}

	
	    

.indicator70::after {
  display: block;
  width: 40vh;
  height: 40vh;
  content: "";
  background-image: linear-gradient(to bottom, rgba(var(--jaune),0.88) 28%, rgba(var(--jaune),1.0) 100%);
  
  border-radius: 15vh;
  position: absolute;
  left: 50%;
  top: calc(100% - var(--completion70) + var(--offset));
  translate: -50% 0;
  -webkit-animation: spin 5s linear infinite;
          animation: spin 5s linear infinite;
  opacity: 1; 
}

	
	    

.indicator71::after {
  display: block;
  width: 40vh;
  height: 40vh;
  content: "";
  background-image: linear-gradient(to bottom, rgba(var(--jaune),0.88) 28%, rgba(var(--jaune),1.0) 100%);
  
  border-radius: 15vh;
  position: absolute;
  left: 50%;
  top: calc(100% - var(--completion71) + var(--offset));
  translate: -50% 0;
  -webkit-animation: spin 5s linear infinite;
          animation: spin 5s linear infinite;
  opacity: 1; 
}

	
	    

.indicator72::after {
  display: block;
  width: 40vh;
  height: 40vh;
  content: "";
  background-image: linear-gradient(to bottom, rgba(var(--jaune),0.88) 28%, rgba(var(--jaune),1.0) 100%);
  
  border-radius: 15vh;
  position: absolute;
  left: 50%;
  top: calc(100% - var(--completion72) + var(--offset));
  translate: -50% 0;
  -webkit-animation: spin 5s linear infinite;
          animation: spin 5s linear infinite;
  opacity: 1; 
}

	
	    

.indicator73::after {
  display: block;
  width: 40vh;
  height: 40vh;
  content: "";
  background-image: linear-gradient(to bottom, rgba(var(--jaune),0.88) 28%, rgba(var(--jaune),1.0) 100%);
  
  border-radius: 15vh;
  position: absolute;
  left: 50%;
  top: calc(100% - var(--completion73) + var(--offset));
  translate: -50% 0;
  -webkit-animation: spin 5s linear infinite;
          animation: spin 5s linear infinite;
  opacity: 1; 
}

	
	    

.indicator74::after {
  display: block;
  width: 40vh;
  height: 40vh;
  content: "";
  background-image: linear-gradient(to bottom, rgba(var(--jaune),0.88) 28%, rgba(var(--jaune),1.0) 100%);
  
  border-radius: 15vh;
  position: absolute;
  left: 50%;
  top: calc(100% - var(--completion74) + var(--offset));
  translate: -50% 0;
  -webkit-animation: spin 5s linear infinite;
          animation: spin 5s linear infinite;
  opacity: 1; 
}

	
	    

.indicator75::after {
  display: block;
  width: 40vh;
  height: 40vh;
  content: "";
  background-image: linear-gradient(to bottom, rgba(var(--jaune),0.88) 28%, rgba(var(--jaune),1.0) 100%);
  
  border-radius: 15vh;
  position: absolute;
  left: 50%;
  top: calc(100% - var(--completion75) + var(--offset));
  translate: -50% 0;
  -webkit-animation: spin 5s linear infinite;
          animation: spin 5s linear infinite;
  opacity: 1; 
}

	
	    

.indicator76::after {
  display: block;
  width: 40vh;
  height: 40vh;
  content: "";
  background-image: linear-gradient(to bottom, rgba(var(--jaune),0.88) 28%, rgba(var(--jaune),1.0) 100%);
  
  border-radius: 15vh;
  position: absolute;
  left: 50%;
  top: calc(100% - var(--completion76) + var(--offset));
  translate: -50% 0;
  -webkit-animation: spin 5s linear infinite;
          animation: spin 5s linear infinite;
  opacity: 1; 
}

	
	    

.indicator77::after {
  display: block;
  width: 40vh;
  height: 40vh;
  content: "";
  background-image: linear-gradient(to bottom, rgba(var(--jaune),0.88) 28%, rgba(var(--jaune),1.0) 100%);
  
  border-radius: 15vh;
  position: absolute;
  left: 50%;
  top: calc(100% - var(--completion77) + var(--offset));
  translate: -50% 0;
  -webkit-animation: spin 5s linear infinite;
          animation: spin 5s linear infinite;
  opacity: 1; 
}

	
	    

.indicator78::after {
  display: block;
  width: 40vh;
  height: 40vh;
  content: "";
  background-image: linear-gradient(to bottom, rgba(var(--jaune),0.88) 28%, rgba(var(--jaune),1.0) 100%);
  
  border-radius: 15vh;
  position: absolute;
  left: 50%;
  top: calc(100% - var(--completion78) + var(--offset));
  translate: -50% 0;
  -webkit-animation: spin 5s linear infinite;
          animation: spin 5s linear infinite;
  opacity: 1; 
}

	
	    

.indicator79::after {
  display: block;
  width: 40vh;
  height: 40vh;
  content: "";
  background-image: linear-gradient(to bottom, rgba(var(--jaune),0.88) 28%, rgba(var(--jaune),1.0) 100%);
  
  border-radius: 15vh;
  position: absolute;
  left: 50%;
  top: calc(100% - var(--completion79) + var(--offset));
  translate: -50% 0;
  -webkit-animation: spin 5s linear infinite;
          animation: spin 5s linear infinite;
  opacity: 1; 
}

	
	    

.indicator80::after {
  display: block;
  width: 40vh;
  height: 40vh;
  content: "";
  background-image: linear-gradient(to bottom, rgba(var(--jaune),0.88) 28%, rgba(var(--jaune),1.0) 100%);
  
  border-radius: 15vh;
  position: absolute;
  left: 50%;
  top: calc(100% - var(--completion80) + var(--offset));
  translate: -50% 0;
  -webkit-animation: spin 5s linear infinite;
          animation: spin 5s linear infinite;
  opacity: 1; 
}

	
	    

.indicator81::after {
  display: block;
  width: 40vh;
  height: 40vh;
  content: "";
  background-image: linear-gradient(to bottom, rgba(var(--jaune),0.88) 28%, rgba(var(--jaune),1.0) 100%);
  
  border-radius: 15vh;
  position: absolute;
  left: 50%;
  top: calc(100% - var(--completion81) + var(--offset));
  translate: -50% 0;
  -webkit-animation: spin 5s linear infinite;
          animation: spin 5s linear infinite;
  opacity: 1; 
}

	
	    

.indicator82::after {
  display: block;
  width: 40vh;
  height: 40vh;
  content: "";
  background-image: linear-gradient(to bottom, rgba(var(--jaune),0.88) 28%, rgba(var(--jaune),1.0) 100%);
  
  border-radius: 15vh;
  position: absolute;
  left: 50%;
  top: calc(100% - var(--completion82) + var(--offset));
  translate: -50% 0;
  -webkit-animation: spin 5s linear infinite;
          animation: spin 5s linear infinite;
  opacity: 1; 
}

	
	    

.indicator83::after {
  display: block;
  width: 40vh;
  height: 40vh;
  content: "";
  background-image: linear-gradient(to bottom, rgba(var(--jaune),0.88) 28%, rgba(var(--jaune),1.0) 100%);
  
  border-radius: 15vh;
  position: absolute;
  left: 50%;
  top: calc(100% - var(--completion83) + var(--offset));
  translate: -50% 0;
  -webkit-animation: spin 5s linear infinite;
          animation: spin 5s linear infinite;
  opacity: 1; 
}

	
	    

.indicator84::after {
  display: block;
  width: 40vh;
  height: 40vh;
  content: "";
  background-image: linear-gradient(to bottom, rgba(var(--jaune),0.88) 28%, rgba(var(--jaune),1.0) 100%);
  
  border-radius: 15vh;
  position: absolute;
  left: 50%;
  top: calc(100% - var(--completion84) + var(--offset));
  translate: -50% 0;
  -webkit-animation: spin 5s linear infinite;
          animation: spin 5s linear infinite;
  opacity: 1; 
}

	
	    

.indicator85::after {
  display: block;
  width: 40vh;
  height: 40vh;
  content: "";
  background-image: linear-gradient(to bottom, rgba(var(--jaune),0.88) 28%, rgba(var(--jaune),1.0) 100%);
  
  border-radius: 15vh;
  position: absolute;
  left: 50%;
  top: calc(100% - var(--completion85) + var(--offset));
  translate: -50% 0;
  -webkit-animation: spin 5s linear infinite;
          animation: spin 5s linear infinite;
  opacity: 1; 
}

	
	    

.indicator86::after {
  display: block;
  width: 40vh;
  height: 40vh;
  content: "";
  background-image: linear-gradient(to bottom, rgba(var(--jaune),0.88) 28%, rgba(var(--jaune),1.0) 100%);
  
  border-radius: 15vh;
  position: absolute;
  left: 50%;
  top: calc(100% - var(--completion86) + var(--offset));
  translate: -50% 0;
  -webkit-animation: spin 5s linear infinite;
          animation: spin 5s linear infinite;
  opacity: 1; 
}

	
	    

.indicator87::after {
  display: block;
  width: 40vh;
  height: 40vh;
  content: "";
  background-image: linear-gradient(to bottom, rgba(var(--jaune),0.88) 28%, rgba(var(--jaune),1.0) 100%);
  
  border-radius: 15vh;
  position: absolute;
  left: 50%;
  top: calc(100% - var(--completion87) + var(--offset));
  translate: -50% 0;
  -webkit-animation: spin 5s linear infinite;
          animation: spin 5s linear infinite;
  opacity: 1; 
}

	
	    

.indicator88::after {
  display: block;
  width: 40vh;
  height: 40vh;
  content: "";
  background-image: linear-gradient(to bottom, rgba(var(--jaune),0.88) 28%, rgba(var(--jaune),1.0) 100%);
  
  border-radius: 15vh;
  position: absolute;
  left: 50%;
  top: calc(100% - var(--completion88) + var(--offset));
  translate: -50% 0;
  -webkit-animation: spin 5s linear infinite;
          animation: spin 5s linear infinite;
  opacity: 1; 
}

	
	    

.indicator89::after {
  display: block;
  width: 40vh;
  height: 40vh;
  content: "";
  background-image: linear-gradient(to bottom, rgba(var(--jaune),0.88) 28%, rgba(var(--jaune),1.0) 100%);
  
  border-radius: 15vh;
  position: absolute;
  left: 50%;
  top: calc(100% - var(--completion89) + var(--offset));
  translate: -50% 0;
  -webkit-animation: spin 5s linear infinite;
          animation: spin 5s linear infinite;
  opacity: 1; 
}

	
	    

.indicator90::after {
  display: block;
  width: 40vh;
  height: 40vh;
  content: "";
  background-image: linear-gradient(to bottom, rgba(var(--jaune),0.88) 28%, rgba(var(--jaune),1.0) 100%);
  
  border-radius: 15vh;
  position: absolute;
  left: 50%;
  top: calc(100% - var(--completion90) + var(--offset));
  translate: -50% 0;
  -webkit-animation: spin 5s linear infinite;
          animation: spin 5s linear infinite;
  opacity: 1; 
}

	
	    

.indicator91::after {
  display: block;
  width: 40vh;
  height: 40vh;
  content: "";
  background-image: linear-gradient(to bottom, rgba(var(--jaune),0.88) 28%, rgba(var(--jaune),1.0) 100%);
  
  border-radius: 15vh;
  position: absolute;
  left: 50%;
  top: calc(100% - var(--completion91) + var(--offset));
  translate: -50% 0;
  -webkit-animation: spin 5s linear infinite;
          animation: spin 5s linear infinite;
  opacity: 1; 
}

	
	    

.indicator92::after {
  display: block;
  width: 40vh;
  height: 40vh;
  content: "";
  background-image: linear-gradient(to bottom, rgba(var(--jaune),0.88) 28%, rgba(var(--jaune),1.0) 100%);
  
  border-radius: 15vh;
  position: absolute;
  left: 50%;
  top: calc(100% - var(--completion92) + var(--offset));
  translate: -50% 0;
  -webkit-animation: spin 5s linear infinite;
          animation: spin 5s linear infinite;
  opacity: 1; 
}

	
	    

.indicator93::after {
  display: block;
  width: 40vh;
  height: 40vh;
  content: "";
  background-image: linear-gradient(to bottom, rgba(var(--jaune),0.88) 28%, rgba(var(--jaune),1.0) 100%);
  
  border-radius: 15vh;
  position: absolute;
  left: 50%;
  top: calc(100% - var(--completion93) + var(--offset));
  translate: -50% 0;
  -webkit-animation: spin 5s linear infinite;
          animation: spin 5s linear infinite;
  opacity: 1; 
}

	
	    

.indicator94::after {
  display: block;
  width: 40vh;
  height: 40vh;
  content: "";
  background-image: linear-gradient(to bottom, rgba(var(--jaune),0.88) 28%, rgba(var(--jaune),1.0) 100%);
  
  border-radius: 15vh;
  position: absolute;
  left: 50%;
  top: calc(100% - var(--completion94) + var(--offset));
  translate: -50% 0;
  -webkit-animation: spin 5s linear infinite;
          animation: spin 5s linear infinite;
  opacity: 1; 
}

	
	    

.indicator95::after {
  display: block;
  width: 40vh;
  height: 40vh;
  content: "";
  background-image: linear-gradient(to bottom, rgba(var(--jaune),0.88) 28%, rgba(var(--jaune),1.0) 100%);
  
  border-radius: 15vh;
  position: absolute;
  left: 50%;
  top: calc(100% - var(--completion95) + var(--offset));
  translate: -50% 0;
  -webkit-animation: spin 5s linear infinite;
          animation: spin 5s linear infinite;
  opacity: 1; 
}

	
	    

.indicator96::after {
  display: block;
  width: 40vh;
  height: 40vh;
  content: "";
  background-image: linear-gradient(to bottom, rgba(var(--jaune),0.88) 28%, rgba(var(--jaune),1.0) 100%);
  
  border-radius: 15vh;
  position: absolute;
  left: 50%;
  top: calc(100% - var(--completion96) + var(--offset));
  translate: -50% 0;
  -webkit-animation: spin 5s linear infinite;
          animation: spin 5s linear infinite;
  opacity: 1; 
}

	
	    

.indicator97::after {
  display: block;
  width: 40vh;
  height: 40vh;
  content: "";
  background-image: linear-gradient(to bottom, rgba(var(--jaune),0.88) 28%, rgba(var(--jaune),1.0) 100%);
  
  border-radius: 15vh;
  position: absolute;
  left: 50%;
  top: calc(100% - var(--completion97) + var(--offset));
  translate: -50% 0;
  -webkit-animation: spin 5s linear infinite;
          animation: spin 5s linear infinite;
  opacity: 1; 
}

	
	    

.indicator98::after {
  display: block;
  width: 40vh;
  height: 40vh;
  content: "";
  background-image: linear-gradient(to bottom, rgba(var(--jaune),0.88) 28%, rgba(var(--jaune),1.0) 100%);
  
  border-radius: 15vh;
  position: absolute;
  left: 50%;
  top: calc(100% - var(--completion98) + var(--offset));
  translate: -50% 0;
  -webkit-animation: spin 5s linear infinite;
          animation: spin 5s linear infinite;
  opacity: 1; 
}

	
	    

.indicator99::after {
  display: block;
  width: 40vh;
  height: 40vh;
  content: "";
  background-image: linear-gradient(to bottom, rgba(var(--jaune),0.88) 28%, rgba(var(--jaune),1.0) 100%);
  
  border-radius: 15vh;
  position: absolute;
  left: 50%;
  top: calc(100% - var(--completion99) + var(--offset));
  translate: -50% 0;
  -webkit-animation: spin 5s linear infinite;
          animation: spin 5s linear infinite;
  opacity: 1; 
}

	
	    

.indicator100::after {
  display: block;
  width: 40vh;
  height: 40vh;
  content: "";
  background-image: linear-gradient(to bottom, rgba(var(--jaune),0.88) 28%, rgba(var(--jaune),1.0) 100%);
  
  border-radius: 15vh;
  position: absolute;
  left: 50%;
  top: calc(100% - var(--completion100) + var(--offset));
  translate: -50% 0;
  -webkit-animation: spin 5s linear infinite;
          animation: spin 5s linear infinite;
  opacity: 1; 
}

	
	    	
@-webkit-keyframes spin {
  100% {
    rotate: 360deg;
  }
}
@keyframes spin {
  100% {
    rotate: 360deg;
  }
}





	.date-credit {
		display: inline-block; 
		
	}
	.boutons-commande {
		// background-color: magenta; 
		display: inline-block; 
		float: right; 
		margin-top:-68px;
	}


.contenant {
	height: 33px;
}

.montant-credit {
	display: inline-block;
	margin-top: 3x;
}


.commande-texte {
	font-size: 140%;
	margin: 0px; 
	padding: 0px; 
}


.petit-coeur {
	margin-top: -30px; margin-left: 75px; font-family: quicksand, sans-serif;
}



.bock {
	display: inline-block; 
	margin-bottom: -2px; 
}
.quantite {
	display: inline-block; 
	// margin-bottom: 1px;
	margin-left: -2px; 
}

	.biere-date {
		margin-left: -33px;
	}




.bouton-recompenses {
	margin-left: -4px; 
	// background-color:pink;
}
@media (max-width: 2500px) {
	.bouton-recompenses {
	max-width:440px;
	margin-left: -4px;
	// background-color:red;
	}
}
@media (max-width: 800px) {
	.bouton-recompenses {
	margin-left: 4px; 
	max-width:298px;
	// background-color:blue;
	}
}




.social {
	margin-left: 2px;
	margin-top: -1px; 
	// background-color: green;
	margin-top: 4px; 
	vertical-align:top;  
	width:100%;
	font-size: 20px; 
	color: #333333; 
}



.popup {
					display: block;
					text-align: center;
					font-style: italic;
					width: 60%; 
					font-weight: bold; 
					padding: 10px 20px 10px 20px; 
					color: #FFFFFF;
					font-family: quicksand;
					background-color: rgba(0,0,0,0.6); 
					font-size: 250%; 
					border-radius: 7px; 
					
					// border-radius: 7px;
					z-index: 100;
					position:relative;
					top: 70px; 
					margin: 0;
					transform: skew(0, -5.0deg);	
	

}



	.pseudo-skew {
		margin-top: -3px; 
		font-family: lilita;
		text-transform: uppercase ;
		font-weight: 100;
		// color: magenta; 
		letter-spacing: 0px; 
		// font-size: 60%; 
		
		// border-top: solid 5px white; 
		border-bottom: solid 5px white; 
		
		font-size:60% ; 
		transform: skew(0, -3.0deg);
		
	}




.boite-profil {
	text-align: center; 
	float:left;
	margin-right: 4px; 
	margin-bottom: 4px;
	display:inline-block;
	background: rgba(var(--gris),1); 
	width: 67px; 
	padding-top: 0px;
	padding-bottom: 0px;
	border-radius:7px;
	// border: 1px solid rgba(var(--gris-clair), 1);

	// border: 1px dashed rgba(var(--jaune), 1);
}
.boite-profil i {
	margin-left:3px; 
}

.detail-txt-profil {
	font-size:23.5%;
	padding-top: 0px; 
	font-family: "roboto";
	text-transform: uppercase ;
	height: 21px;
	// background-color: magenta;
	
	border-radius:7px;
	
	display: flex;
    align-items: center;
	justify-content: center;
	align-items: center;
}

.badge {
	// height: 22px; 
}












/* Pour les ascenseurs verticaux */
::-webkit-scrollbar {
  width: 12px; 
  background-color: rgba(var(--jaune),1.0); /* Couleur de fond */
}

/* Pour la poignée (thumb) des ascenseurs verticaux */
::-webkit-scrollbar-thumb {
  background-color: rgba(var(--rouge),1.0); /* Couleur de la poignée */
  border-radius: 4px; 
}

/* Pour les ascenseurs horizontaux */
::-webkit-scrollbar-horizontal {
  height: 12px; 
  background-color: rgba(var(--jaune),1.0); /* Couleur de fond */
}

/* Pour la poignée (thumb) des ascenseurs horizontaux */
::-webkit-scrollbar-thumb:horizontal {
  background-color: rgba(var(--rouge),1.0); /* Couleur de la poignée */
  border-radius: 4px; /* Bords arrondis */
}



























/* BADGE V2 CSS */
.badge-v2 {
  position: relative;
  margin: 12px 0 12px 0;
  
  width: 60px;
  height: 60px;
  border-radius: 5px;
  display: inline-block;
  top: 0;
  transition: all 0.2s ease;
  
  
  /* border: 2px solid red; */
  
}
.badge-v2:before, .badge-v2:after {
  position: absolute;
  width: inherit;
  height: inherit;
  border-radius: inherit;
  background: inherit;
  content: "";
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
}
.badge-v2:before {
  transform: rotate(60deg);
}
.badge-v2:after {
  transform: rotate(-60deg);
}

.badge-v2 .circle {
  width: 60px;
  height: 60px;
  position: absolute;
  background: #fff;
  z-index: 10;
  border-radius: 50%;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
}
.badge-v2 .circle i.fa {
  font-size: 38px;
  margin-top: 9px;
}
.badge-v2 .font {
  display: inline-block;
  margin-top: 1em;
}
.badge-v2 .ribbon {
  position: absolute;
  border-radius: 4px;
  padding: 5px 3px 5px 3px;
  width: 70px;
  z-index: 11;
  // color: #fff;
  bottom: -10px;
  left: 50%;
  margin-left: -36px;
  
  
  // height: 15px;
  font-size: 9.5px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.27);
  text-shadow: 0 2px 2px rgba(0, 0, 0, 0.1);
  text-transform: uppercase;
  background: linear-gradient(to bottom right, #555 0%, #333 100%);
  cursor: default;
}

.degrade-jaune, .degrade-jaune-ricard {
  background: linear-gradient(to bottom right, #ffeb3b 0%, #fbc02d 100%);
  color: #ffb300;
}

.degrade-orange {
  background: linear-gradient(to bottom right, #ffc107 0%, #f57c00 100%);
  color: #f68401;
}

.degrade-rose {
  background: linear-gradient(to bottom right, #F48FB1 0%, #d81b60 100%);
  color: #dc306f;
}

.degrade-rouge {
  background: linear-gradient(to bottom right, #f4511e 0%, #b71c1c 100%);
  color: #c62828;
}

.degrade-purple {
  background: linear-gradient(to bottom right, #ab47bc 0%, #4527a0 100%);
  color: #7127a8;
}

.degrade-teal {
  background: linear-gradient(to bottom right, #4DB6AC 0%, #00796B 100%);
  color: #34a297;
}

.degrade-bleu {
  background: linear-gradient(to bottom right, #4FC3F7 0%, #2196F3 100%);
  color: #259af3;
}

.degrade-bleu-facebook {
  background: linear-gradient(to bottom right, #1976D2 0%, #283593 100%);
  color: #1c68c5;
}

.degrade-green {
  background: linear-gradient(to bottom right, #cddc39 0%, #8bc34a 100%);
  color: #7cb342;
}

.degrade-cannabis {
  background: linear-gradient(to bottom right, #4CAF50 0%, #1B5E20 100%);
  color: #00944a;
}

.degrade-gris-baleine {
  background: linear-gradient(to bottom right, #888 0%, #666 100%);
  color: #9e9e9e;
}

.degrade-gold {
  background: linear-gradient(to bottom right, #e6ce6a 0%, #b7892b 100%);
  color: #b7892b;
}










































/* MODAL */

.fade {
  opacity: 0;
  transition: opacity 0.15s linear;
}

.fade.show {
  opacity: 1;
}

.modal-open {
  overflow: hidden;
}

.modal {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1050;
  display: none;
  overflow: hidden;
  outline: 0;
}

.modal.fade .modal-dialog {
  transition: -webkit-transform 0.3s ease-out;
  transition: transform 0.3s ease-out;
  transition: transform 0.3s ease-out, -webkit-transform 0.3s ease-out;
  -webkit-transform: translate(0, -25%);
          transform: translate(0, -25%);
}

.modal.show .modal-dialog {
  -webkit-transform: translate(0, 0);
          transform: translate(0, 0);
}

.modal-open .modal {
  overflow-x: hidden;
  overflow-y: auto;
}

.modal-dialog {
  position: relative;
  width: auto;
  margin: 10px;
  pointer-events: none;
}

.modal-content {
  position: relative;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-direction: column;
      flex-direction: column;
  pointer-events: auto;
  background-color: rgba(var(--blanc),1);
  background-clip: padding-box;
  border: 1px solid rgba(0, 0, 0, 0.2);
  border-radius: 0.3rem;
  outline: 0;
}

.modal-backdrop {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1040;
  background-color: rgba(var(--noir),1);
}

.modal-backdrop.fade {
  opacity: 0;
}

.modal-backdrop.show {
  opacity: 0.5;
}

.modal-header {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-align: start;
      align-items: flex-start;
  -ms-flex-pack: justify;
      justify-content: space-between;
  padding: 15px;
  border-bottom: 1px solid #e9ecef;
  border-top-left-radius: 0.3rem;
  border-top-right-radius: 0.3rem;
}

.modal-header .close {
  padding: 15px;
  margin: -15px -15px -15px auto;
  background-color: rgba(var(--gris-clair),1); 
}

/*
.modal-title {
  margin-bottom: 0;
  line-height: 1.5;
}
*/

.modal-body {
  position: relative;
  -ms-flex: 1 1 auto;
      flex: 1 1 auto;
  padding: 15px;
}

.modal-footer {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-align: center;
      align-items: center;
  -ms-flex-pack: end;
      justify-content: flex-end;
  padding: 15px;
  border-top: 1px solid #e9ecef;
}

.modal-footer > :not(:first-child) {
  margin-left: .25rem;
}

.modal-footer > :not(:last-child) {
  margin-right: .25rem;
}

.modal-scrollbar-measure {
  position: absolute;
  top: -9999px;
  width: 50px;
  height: 50px;
  overflow: scroll;
}

@media (min-width: 576px) {
  .modal-dialog {
    max-width: 500px;
    margin: 30px auto;
  }
  .modal-sm {
    max-width: 300px;
  }
}

@media (min-width: 992px) {
  .modal-lg {
    max-width: 800px;
  }
}










.avatar-part1, .avatar-part2, .avatar-part3 {
	float: left; 
	display;inline-block;
	font-weight: bold;
}
.avatar-part3 {
	margin-right: 5px; 
}

.icones-membre {
	font-size: 0.3em;
	// background-color: pink;
	margin: 0;
	padding: 0;
	
	
	max-width: 100%; 
	text-align:center;
}

.icones-membre i {
	margin-right: 5px; 
}






















	.smileys {

		padding-left: 3px; 
		display: inline-block;
		margin: 0px 0 0 -6px ; 
		
		
	}
	.mini-chiffre
	{
		color: rgba(var(--gris),1);
		font-size: 45%; 
		border-radius: 3px;
		font-weight: 500;
		background-color: white;
		float: right;
		padding: 2px;
		margin-right: -5px; 
		margin-left: 4px;
		
	}









@font-face {
    font-family: "quicksand";
    src: url("fonts/Quicksand-VariableFont_wght.ttf");
}
@font-face {
    font-family: "bebas";
    src: url("fonts/BebasNeue-webfont.ttf");
}
@font-face {
    font-family: "roboto";
    src: url("fonts/RobotoCondensed-Regular.ttf");
}
@font-face {
    font-family: "pacifico";
    src: url("fonts/Pacifico-Regular.ttf");
}
@font-face {
    font-family: "lilita";
    src: url("fonts/LilitaOne-Regular.ttf");
}










	.courbure1 {
		margin-left: -246px; margin-top: -13px; 
	}
	.courbure2 {
		margin-left: -280px; margin-top: -15px;
	}





.grille {
	background: url(images/diagonale-rouge2.png);
	
}
.element-grille {
    float: left; 
	margin-right: 10px; 
	margin-bottom: 10px; 
	width: auto; 

	// margin-top: 20px;
	padding: 12px;
	background-color: #f2f2f2;
	border-radius: 5px;
	// paddin-top: -20px;

	border-radius: 4px;
	border-style: solid;
	border-color: rgba(var(--gris-clair),1);
	text-align: center;
}



.element-grille-profil {
    
	// float: left; 
	display: inline-block;
	
	// background-color: rgba(255,0,0,0.30);
	// width: auto; 

	padding: 0;
	margin: 0;

	text-align: left;
	border-radius: 6px;
	
	word-wrap: break-word;
}
#profil1{
	vertical-align: top; 
	padding-top: 15px; 
	padding-left: 20px; 
	
	
	
	// background : linear-gradient(to bottom, rgba(var(--rouge),0.3), rgba(var(--jaune),0.3), rgba(var(--rouge),0.3));
	// background-size: 100% 1000%; /* Taille du dégradé pour l'effet d'animation */
	// animation: degradeAnimation 5s linear infinite; /* Animation du dégradé */

	// border-radius: 10px;
	// border-width: 5px;
	// border-style: solid;
	// border-color: rgba(var(--blanc),1);
}


.conteneur-profil-blanc {
	background : linear-gradient(to left, rgba(var(--blanc),0.6), rgba(var(--jaune),0.5) 40%, rgba(var(--jaune),0.0) );
	border-radius:7px;
}
.conteneur-profil-rouge {
	background : linear-gradient(to left, rgba(var(--rouge),0.9), rgba(var(--jaune),0.5) 40%, rgba(var(--jaune),0.0) );
	border-radius:7px;
}
.conteneur-profil-ricard {
	background : linear-gradient(to left, rgba(var(--jaune),0.0), rgba(var(--jaune),0.5) 40%, rgba(var(--jaune),0.0) );
	border-radius:7px;
}
.conteneur-profil-rose {
	background : linear-gradient(to left, rgba(var(--rose),0.6), rgba(var(--jaune),0.5) 40%, rgba(var(--jaune),0.0) );
	border-radius:7px;
}

@keyframes degradeAnimation {
  0% {
    background-position: 0 0; /* Position de départ */
  }
  100% {
    background-position: 0 -100%; /* Position de fin */
  }
}



canvas{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    min-height: 100vh;
    height: 100vh;
    resize: both;
	z-index:-20;
}

#foam{
    display: block;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 150px;
    background-image: url('images/foam.png');
    background-size: auto 150px;
    background-repeat: repeat-x;
	z-index:20;
}
canvas#bubbles {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}













body, .background
{
	margin: 0;
	padding: 0;
	color: rgba(var(--gris),1);
	font-size: 1.2em;
	min-height: 100vh; 
	height: 100vh; 
}




/*
body:before 
{
	content: "Attention, nouvel algorithme";
	display: block;
	text-align: center;
	font-style: italic;
	font-weight: bold; 
	padding: 10px 20px 10px 20px; 
	color: rgba(var(--blanc),1);
	font-family: quicksand, sans-serif;
	background-color: rgba(var(--rouge),1); 
	font-size: 150%; 
}
*/
	




.invisible {
	}


.biere-erreur, .camembert-erreur {
	visibility: hidden;
	display: none;
}

a:link, a:visited, a:active , a:hover
{ 
	color: rgba(var(--gris),1);
	text-decoration: none;
}
a:link.rouge, a:visited.rouge, a:active.rouge , a:hover.rouge
{ 
	color: rgba(var(--rouge),1);
	text-decoration: none;
}

.titre-partie-haute a:link, a:visited, a:active , a:hover
{ 
	color: rgba(var(--blanc),1);
	text-decoration: none;
}


td a:link, td a:visited, td a:active , td a:hover
{ 
	color: rgba(var(--blanc),1);
	text-decoration: none;
}

// .bouton-bas-haut a:link, .bouton-bas-haut a:visited, .bouton-bas-haut a:active , .bouton-bas-haut a:hover, .bouton-bas-bas a:link, .bouton-bas-bas a:visited, .bouton-bas-bas a:active , .bouton-bas-bas a:hover
// { 
	// color: rgba(var(--blanc),1);
	// text-decoration: none;
// }

html
{
	background: url(images/fond1.svg) ; 
	
	width: 100%;
	height: 100%;
	
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	
	
	



	background-size: cover;
	background-position: center center;
	background-repeat: no-repeat;									



}






















.page-centrale1
{
	margin-left: auto;
    margin-right: auto;
	padding-top: 0px;

    width: 96%;
	max-width: 1150px;
	// background-color: blue; 
}
.page-centrale2
{
	/* border-radius: 10px; */
	/* border-style: solid; */
	/* border-color: #DEE2EE; */
	/* border-width: 10px; */
	/* background: url(images/blanc-transparent-30.png); */
	/* opacity: 1; */
	
	margin: 0px;
	padding-top: 155px;
	z-index:10;
}

.page-centrale3, button, input, textarea, select, td, p, li, ul, ol, label, .champ, .tts, .faux-bouton
{
	font-family: quicksand, sans-serif;
	font-size: 1em;
}
td {
	font-size: 1.2em;
	
}
.page-centrale3, button, input, textarea, select, td, .champ, label, .faux-bouton
{
	text-align: left;
	padding: 0px;
}


p, li, ul, ol {
	text-align: justify;
}









.partie-jaune
{
	margin: 0;
	margin-bottom: 14px;

	
	background : linear-gradient(to bottom, rgba(var(--jaune),1) 25%, rgba(var(--jaune),0.73));
	
	color: rgba(var(--blanc),1);
	padding: 15px;
	font-weight: normal;
	border-radius: 8px;
	text-align: left; 

	border-style: solid;
	border-color: rgba(var(--jaune), 1);
	border-width: 3px;
	
	
}
.partie-grise
{
	margin: 0;
	/* background-color: #DEE2EE; */
	/* padding: 15px; */
	height: 40px;
}


.partie-blanche
{
	margin: 0;
	padding: 15px;
	border-radius: 8px;

	border-style: solid;
	border-color: rgba(var(--jaune),1);
	border-width: 3px;
	
	/* background: no-repeat url("images/degrade.png"), rgba(var(--blanc),1); */
	// background-color: rgba(var(--blanc),1);
	// background-color: rgba(255,255,255,0.78);

	background : linear-gradient(to bottom, rgba(255,255,255,0.95) 25%, rgba(255,255,255,0.70));
	
	text-align: left; 
}

.partie-jaune, .partie-blanche
{
	margin-bottom: 22px;
}











.partie-jaune, .partie-blanche
{
	box-shadow: 0   0.5rem 0.5rem 0.5rem rgba(0,0,0,0.20),
                0 -0.25rem 1.5rem rgba(15, 15, 15, 0.40) inset;
}



.titre-partie-haute
{
	font-size: 4em;
	font-family: bebas, sans-serif;
	font-weight: normal;
	padding: 0px;
	margin: 0px 0px 0px 0px;
}

.sous-titre-partie-haute, .sous-titre-partie-basse
{
	font-size: 1.7em;
	font-family: bebas, sans-serif;
	font-weight: normal;
}

.sous-titre-partie-haute
{
	float: right;
	margin-top:-10px;
	font-family: quicksand, sans-serif;
}
.sous-titre-partie-basse
{
	font-family: quicksand, sans-serif;
	text-transform: uppercase ;
	padding-bottom: 12px; 
}




.nom-haut {
	font-family: "Roboto", sans-serif;
	letter-spacing: 0.015em;
}


h1, h2, h3, h4 {
	font-family: "Roboto", sans-serif;
	text-transform: uppercase ;
	font-weight: normal;
	/*
	background-color: #FF0000;
	text-align: justify;
	*/
}
h1, h2, h3, h4 {
	
	padding: 0 0 0 6px; 
	margin-bottom: 10px;

	/* background-color: #ff0000; */
	background-color: rgba(var(--gris-clair),1);
	border-radius: 4px;
}
h2 {
	font-size: 1.4em; 
	background-color: rgba(var(--gris),1);
	color: rgba(var(--blanc),1); 
	padding: 5px;
	padding-left: 12px;

	/*
	font-weight: bold; 
	margin-bottom: 35px;
	*/
}
h3, h4 {
	margin: 0 0 10px 0 ;
	color: rgba(var(--noir),1);
	font-size: 1.3em; 

	padding: 5px;
	padding-left: 12px;
}
h4 {
	font-size: 1.2em; 
}







.pseudo {
	font-size: 4em;
	font-family: bebas, sans-serif;
	font-weight: normal;
	padding: 0px;
	margin: 0px 0px 0px 0px;

	text-transform: uppercase; 
	letter-spacing: -0.1rem; 
	vertical-align: top; 
	margin-top: -3px; 
	margin-left: 2px;

}


.role {
	
	line-height: 1.17em; 
	text-transform: uppercase ;
	
	font-family: "Roboto", sans-serif;
	font-size: 0.30em;
	font-weight: 600;
	// font-family: "quicksand", sans-serif;
	// font-size: 0.35em;
	// letter-spacing:-1px;
	// font-weight: 900;


	padding: 0 10px 0 10px;
	margin: -9px 0 24px -9px; ;
	max-width: 343px;
	transform: skew(0, -3.0deg);
	// background-color: green; 
}



button, input, select, textarea, .faux-bouton {
	padding: 7px;
	margin: 0px 0px 4px 0px;
	display: inline;
	border-radius: 4px;
	font-weight: bold;
	border: none;
	
	padding-right: 12px;
	padding-left: 12px;
}
button, .faux-bouton {
	cursor: pointer;
	color: rgba(var(--blanc),1);
}

button:disabled {
	cursor: not-allowed;
}

.bouton-noir {
	background-color: rgba(var(--noir),1);
	min-height: 36px;
}
.bouton-orange {
	background-color: rgba(var(--orange),1);
	min-height: 36px;
}
.bouton-rouge {
	background-color: rgba(var(--rouge),1);
	min-height: 36px;
}
.bouton-vert {
	background-color: rgba(var(--vert),1);
	min-height: 36px;
}
.bouton-bleu {
	background-color: rgba(var(--bleu),1);
	min-height: 36px;
}
.bouton-gris {
	background-color: rgba(var(--gris),1);
	min-height: 36px;
}
.bouton-gris-clair {
	background-color: rgba(var(--gris-clair),1);
	min-height: 36px;
}
.bouton-ricard {
	background-color: rgba(var(--ricard),1);
	min-height: 36px;
}
.bouton-cannabis {
	background-color: rgba(var(--cannabis),1);
	min-height: 36px;
}
.bouton-rose {
	background-color: rgba(var(--rose),1);
	min-height: 36px;
}
.bouton-transparent {
	background-color: rgba(var(--blanc),0);
	min-height: 36px;
}



.shiny {
    overflow: hidden;
	transition: all 0.3s ease;
  position: relative;
  display: inline-block;
}


/* SHINY */
.shiny:before {
    position: absolute;
    content: '';
    display: inline-block;
    top: -180px;
    left: 0;
    width: 30px;
    height: 100%;
    background-color: rgba(var(--blanc),1);
    animation: shiny-btn 3s ease-in-out infinite;
}
@-webkit-keyframes shiny-btn {
    0% { -webkit-transform: scale(0) rotate(45deg); opacity: 0; }
    80% { -webkit-transform: scale(0) rotate(45deg); opacity: 0.5; }
    81% { -webkit-transform: scale(4) rotate(45deg); opacity: 1; }
    100% { -webkit-transform: scale(50) rotate(45deg); opacity: 0; }
}









.noir {
	color: rgba(var(--gris),1);
}
.rouge, a.rouge {
	color: rgba(var(--rouge),1);
}
.vert {
	color: rgba(var(--vert),1);
}
.bleu {
	color: rgba(var(--bleu),1);
}
.bleu-fonce {
	color: rgba(var(--bleu-fonce),1);
}
.bleu-facebook {
	color: rgba(var(--bleu-facebook),1);
}
.rose {
	color: rgba(var(--rose),1);
}
.violet {
	color: rgba(var(--violet),1);
}
.orange {
	color: rgba(var(--orange),1);
}
.blanc {
	color: rgba(var(--blanc),1);
}
.gris {
	color: rgba(var(--gris),1);
}
.gris-clair {
	color: rgba(var(--gris-clair),1);
}
.gris-baleine {
	color: rgba(var(--gris-baleine),1);
}
.cannabis {
	color: rgba(var(--cannabis),1); 
}
.jaune {
	color: rgba(var(--jaune),1); 
}
.rose {
	color: rgba(var(--rose),1);
}
.marron {
	color: #A26A36;
}
.jaune-ricard {
	color:  rgba(var(--jaune-ricard), 1);
}
.ricard {
	color:  rgba(var(--ricard), 1);
}


.fond-ricard {
	background-color:  rgba(var(--ricard), 1);
}
.fond-rouge {
	background-color:  rgba(var(--rouge), 1);
}







.commande, .biere, input, select, textarea {
	background-color: #f8f8f8;
	border-radius: 4px;
	border-style: solid;
	border-color: rgba(var(--gris-clair),1);
	border-width: 3px;
}

/*
.tres-important {
	border-radius: 6px;
	border-style: solid;
	border-color: rgba(var(--rouge),1);
	border-width: 6px;
 }
 */

.biere {
	margin-bottom: 10px;
	padding: 5px;
	height: 81px;
	/* background-color: #ff0000; */
}

.biere-gris {
	border-color: rgba(var(--gris-clair),1);
}
.biere-vert {
	border-color: rgba(var(--vert),1);
}
.biere-rouge {
	border-color: rgba(var(--rouge),1);
}
.biere-orange {
	border-color: rgba(var(--orange),1);
}

.commande {
	margin-bottom: 10px;
	padding: 5px;
	height: 47px;
	/* background-color: #ff0000; */
}


.biere-boutons-1 {
	float: right;
	margin-top: 50px;
	/* background-color: #ff0000; */
}
.biere-boutons-2 {
	float: left;
	// margin-top: 4px;
	/* background-color: #0000ff; */
}






.biere-colonne1, .biere-colonne2, .biere-colonne3 {
    vertical-align: middle;
	float: left;
	padding: 0;
	position: absolute;
	
}
.biere-colonne1 {
	margin-top: 0px;
	margin-left: 0px;
	background-color: rgba(var(--gris-clair),1);
	border-radius: 4px;
	// width: 78px;
	height: 76px;
	padding: 4px 2px 0 2px;
	// background-color: magenta;
}
.biere-colonne2 {
	margin-top: 0px;
	margin-left: 87px;

	background-color: rgba(var(--gris-clair),0);
	border-radius: 4px;
	height: 70px;
	width: 25px;
	padding: 7px  4px 4px 4px;
}
.biere-colonne3 {
	margin-top: 0px;
	margin-left: 120px;
}

.biere-contenance {
	font-size: 0.75em;
	font-style: italic;
}
.biere-quantite {
	font-size: 140%;
	font-weight: bold; 
	margin-top: 7px; 
	/* font-style: italic; */
}



img.icone1, img.icone2 {
	width: 22px;
}
img.icone1 {
	opacity: 0.30;
}img.icone2 {
	opacity: 1;
}








/* .compte-informations { */
	/* float: right; */
	/* margin-top: -33px; */
	/* margin-right: 30px; */
	/* padding: 0px; */

	/* background-color: #0000ff; */
	/* width: 700px; */
/* } */


.fond-blanc {
	background-color: #FF0000;
	padding: 4px 8px 4px 8px; 
	margin-left: 14px;
	border-radius: 4px; 
	background: url(images/blanc-transparent-10.png);
}
.fond-blanc-30 {
	background-color: #FF0000;
	padding: 4px 8px 4px 8px; 
	margin-left: 14px;
	border-radius: 4px; 
	background: url(images/blanc-transparent-30.png);
}



 .icone-profil {
	 padding-bottom: 20px;
	 font-size: 2.6em;
 }
 
 
 
 



















.child1 {
    position: absolute;
    top: 0;
    left: 0;
	width: auto; 
    // background: pink;
}
.child2 {
    z-index: 1;
    margin: 0px;
    // background: emerald;
}











.div-vignette {
	float: left;
	padding: 0; 
	margin-left: 0px; 
	margin-top : 13px; 
	margin-bottom : 13px; 
	
	/* width: 150px;  */
	padding: 0; 
	/* margin: 0; */
	// background-color: #00ff00;
}

.div-vignette, .courbure1
{
	// background: url(images/fond2.jpg); 
	// background-color: red;
}

.div-vignette-mini {
	float: left; 
	margin-left: 0px; 
	margin-top: -4px; 
	padding: 0; 
}


.vignette {
	width: 210px; 
	height: 210px; 
	/*
	border-radius: 50%;
	border-style: solid;
	border-color: rgba(var(--blanc),1);
	border-width: 6px;
	margin-top: 10px;
	*/
	margin: 0;
	padding: 0;
	
}


.vignette-mini {
	width: 35px; 
	height: 35px; 
	border-radius: 4px;
	
	/*
	border-style: solid;
	border-color: rgba(var(--blanc),1);
	border-width: 2px;
	*/
	
	margin: 0;
	padding: 0;
	
	// margin-top: 7px;
}





























.houblon {
	width: 200px;
	opacity: 0.03;
	position: absolute;
	top: 35px; right: 680px;
}










@keyframes float {
	0% {
		box-shadow: 0 5px 15px 0px rgba(0,0,0,0.6);
		transform: translatey(0px);
	}
	50% {
		box-shadow: 0 25px 15px 0px rgba(0,0,0,0.2);
		transform: translatey(-30px);
	}
	100% {
		box-shadow: 0 5px 15px 0px rgba(0,0,0,0.6);
		transform: translatey(0px);
	}
}

.cercle-numero
{
	box-shadow: 0 5px 15px 0px rgba(0,0,0,0.6);
	transform: translatey(0px);
	animation: float 6s ease-in-out infinite;
	img { width: 100%; height: auto; }
}










/* ************************** FORMULAIRES ********************************* */

label {
	/* width: 50%; */
	display: block;
}

input, select, textarea {
  width: 100%;
  padding: 12px 20px;
  margin: 8px 0;
  display: inline-block;
  /* border: 1px solid #ccc; */
  /* border-radius: 4px; */
  box-sizing: border-box;
}
@media (max-width: 480px) {
    input, select, textarea
	{
        width: 100%;
    }
}



input[type=number] {
  width: 200px;
}
input[type=submit] {
  /* width: 24.82%; */
  /* background-color: rgba(var(--vert),1); */
  /* color: white; */
  /* padding: 14px 20px; */
  /* margin: 8px 0; */
  /* border: none; */
  /* border-radius: 4px; */
  cursor: pointer;
}



/* AGRANDIT LE INPUT SUR FOCUS */
/* input { */
  /* transition: width 0.4s ease-in-out; */
/* } */
/* input:focus { */
  /* width: 100%; */
/* } */


/* input[type=submit]:hover { */
  /* background-color: rgba(var(--vert),1); */
/* } */








input::-webkit-outer-spin-button, input::-webkit-inner-spin-button {
  /* -webkit-appearance: none; */
  /* -moz-appearance: none; */
  /* appearance: none; */

 -webkit-transform: scale(200%);
  transform: scale(200%);  
}


.titre {
	font-family: "Roboto", sans-serif;
	text-transform: uppercase ;
	
	// background-color:#FF0000;
	
	padding: 0;
	margin: 0;
	// width: 100%;

	font-size: 0.4em;
	
	margin-left: 0px; 
	margin-top: 100px;
	
	line-height: 1em; 

	max-width: 300px;
	word-wrap: break-word;
	white-space: normal;
}





.boutons-haut {
	text-align: center;
	padding: 14px 0px 0px 0px;

	z-index:22;
	position: fixed;
	top: 0;
	margin-bottom: 150px; 
	// background-color:green;
	min-width: 100%;
}







footer {

	
 position: fixed;
  left: 0;
  bottom: 0;
  width: 100%;
  text-align: center;	
	
  /*
  background-color: red;
  color: white;
  */
	
}



.algo
{
	/* font-style: italic; */
	padding-bottom: 12px;
	font-size: 0.9em;
	color: #BBBBBB;
	font-family: quicksand, sans-serif;

}



.gros-chiffre {
	
	font-size: 1.7em;
	font-weight: bold;
	text-align : center;
	
	border-radius: 50%;
	border-style: solid;
	border-color: rgba(var(--gris-clair),1);
	border-width: 6px;
	
	padding: 0;
	margin-right: 12px;
	
	color: white;
	height: 80px;
	width: 80px;
	float: left;
	font-family: quicksand, sans-serif;

}
.gros-chiffre-interieur {
	padding-top: 20px;
}



.message {
	margin-top: 20px;
	padding: 4px;
	background-color: #f2f2f2;
	border-radius: 5px;

	/*
	width: 750px;
	height: 85px;
	border-style: solid;
	border-color: rgba(var(--jaune),1);
	border-width: 4px;
	*/
}





.commande-rapide {
	
	font-size: 3em;
	font-weight: bold;
	text-align : center;
	
	border-radius: 50%;
	border-style: solid;
	border-color: rgba(var(--gris-clair),1);
	border-width: 6px;
	
	padding: 0;
	margin-right: 12px;
	margin-bottom: 12px;
	color: white;
	height: 150px;
	width: 150px;
	float: left;
}
.commande-rapide-interieur {
	padding-top: 23px;
}






.points {
	font-family: "Roboto", sans-serif;
	border-radius: 5px;
	background-color: rgba(var(--blanc),1); 
	color: rgba(var(--jaune),1);
	font-size: 1.6em;
	font-weight: bold;
	text-align: center;
	padding-top: 6px;
	height: 62px;
	vertical-align : middle;
	
	margin:0;
	padding:4px 0 0 0; 

	/*
	text-transform: uppercase ;
	margin: 0px;
	transform: rotate(-90deg);
	*/
}


.photo-arrondie {
	border-radius: 8px;
	border-style: solid;
	border-color: rgba(var(--jaune),1);
	border-width: 4px;
}
/*
@media (max-width: 480px) {
    .photo-arrondie
	{
        width: 100%;
    }
}
*/




.etoile {
	padding: 0;
	margin: 0;
	float: left; 
	padding-right: 8px; 
	margin-bottom: 12px;

	/*
	background-color: #0000FF; 
	padding: 0px 8px 20px; 0px; 
	*/
}













// .encart-rouge-1 {
	// border-color: none; 
	// border-width: 0px;

	// padding: 14px;
	// border-radius: 8px;
	// border-style: solid;

	// background: url(images/diagonale-rouge2.png);

	// margin-bottom: 20px;


// }
.encart-rouge-2 {
	border-color: rgba(var(--rouge),1); 
	border-width: 35x;
	margin-bottom: 0px;
	// background-color:rgba(var(--blanc),1);
}



// .encart-ricard-1 {
	// border-color: none; 
	// border-width: 0px;

	// padding: 14px;
	// border-radius: 8px;
	// border-style: solid;

	// background: url(images/diagonale-ricard.png);

	// margin-bottom: 20px;
// }

.encart-ricard-2 {
	border-color: rgba(var(--ricard),1); 
	border-width: 35x;
	margin-bottom: 0px;
	// background-color:rgba(var(--blanc),1);
}




.message-ia {
	color: rgba(var(--blanc),1);
	font-size: 1em; 
	font-family: quicksand, sans-serif;
	padding: 13px;
}















.nom {
	
	margin-left: 230px; 
	margin-top: -10px; 
	padding: 0; 
	
	/*
	float: left;
	width: 700px; 
	background-color: red;
	 */
}





















/* BOUTONS LATERAUX */



/* A GAUCHE */
.bouton-bas-podium {
	position: fixed;
	bottom: 0px;
	left:0px;
	margin-left: 5px; 
	margin-bottom: 172px; 
	z-index: 100;
}
.bouton-bas-stats {
	position: fixed;
	bottom: 0px;
	left:0px;
	margin-left: 5px; 
	margin-bottom: 130px; 
	z-index: 100;
}
.bouton-bas-robot {
	position: fixed;
	bottom: 0px;
	left:0px;
	margin-left: 5px; 
	margin-bottom: 88px; 
	z-index: 100;
}
.bouton-bas-recherche {
	position: fixed;
	bottom: 0px;
	left:0px;
	margin-left: 5px; 
	margin-bottom: 46px; 
	z-index: 100;
}
.bouton-bas-faq {
	position: fixed;
	bottom: 0px;
	left:0px;
	margin-left: 5px; 
	margin-bottom: 5px; 
	z-index: 100;
}




/* A DROITE */
.bouton-bas-admin {
	position: fixed;
	bottom: 0px;
	right:0px;
	margin-right: 5px; 
	margin-bottom: 130px; 
	z-index: 100;
}
.bouton-bas-superadmin {
	position: fixed;
	bottom: 0px;
	right:0px;
	margin-right: 5px; 
	margin-bottom: 88px; 
	z-index: 100;
}
.bouton-bas-ricard {
	position: fixed;
	bottom: 0px;
	right:0px;
	margin-right: 5px; 
	margin-bottom: 46px; 
	z-index: 100;
}
.bouton-bas-logout {
	position: fixed;
	bottom: 0px;
	right:0px;
	margin-right: 5px; 
	margin-bottom: 5px; 
	z-index: 100;
}



.bouton-bas-admin button, .bouton-bas-superadmin button, .bouton-bas-logout button, .bouton-bas-podium button, .bouton-bas-stats button, .bouton-bas-ricard button, .bouton-bas-robot button, .bouton-bas-faq button, .bouton-bas-bas button, .bouton-bas-recherche button, .bouton-bas-haut button {
	border-radius: 50%;
	padding: 0 0 0 9px;
	margin: 0;
	width: 38px; 

border: 0.5px dashed #f8f8f8;

	// background: url(images/vignettes/pg-04.gif);
	// background-size: cover;
	// background-position: center;
}




















input[type="radio"] {
  -webkit-appearance: none;
  appearance: none;
  background-color: white;
  
  margin: 0;
  margin-top: 12px; 
  margin-left: 17px; 

  // font: inherit;
  color: #66CC99;
  width: 1.0em;
  height: 2.5em;
  border: 0.30em solid rgba(var(--noir),1);
  border-radius: 50%;
  // transform: translateY(-0.075em);

  display: grid;
  place-content: center;
}

input[type="radio"]::before {
  content: "";
  width: 1.5em;
  height: 1.5em;
  border-radius: 50%;
  transform: scale(0);
  transition: 120ms transform ease-in-out;
  box-shadow: inset 1em 1em var(--form-control-color);
  background-color: rgba(var(--vert),1);
}

input[type="radio"]:checked::before {
  transform: scale(1);
}

/*
input[type="radio"]:focus {
  outline: max(2px, 0.15em) solid green;
  outline-offset: max(2px, 0.15em);
}
*/































.clear {
	text-align: left; display: table; clear: both; width:100%;
}
.bouton-avatar {
		display: inline-block;
		height:40px;
		margin-bottom: 0px; 
		// background-color: green; 
}















@media (max-width: 840px) {

	.smileys, .ecrire {
		display: block;
		margin: 0 0 0 -3px;
		
	}
	.social {
		max-width: 300px;
	}


}








@media (max-width: 800px) {

	// .camembert {
			// visibility: hidden;
			// display: none;
		// }	

	// .camembert-erreur {
		// visibility: visible;
		// display: contents;
		// color: rgba(var(--rouge),1);
		// font-weight: bold;
	// }
	
	
	/* TITRES PLUS PETITS */ 
	.sous-titre-partie-basse {
		font-size: 1.5em;
		font-weight: 600; 
	}
	h2 {
		font-size: 1.2em;
		font-weight: 600; 
	}
	h3 {
		font-size: 1.1em;
		font-weight: 600; 
	}
	h4 {
		font-size: 1.0em;
		font-weight: 600; 
	}

}













@media (max-width: 620px) 
{
	* {
		box-sizing: border-box;
	}
	
	/* passer body (et tous les éléments de largeur fixe) en largeur automatique */

	body {
		width: auto;
		margin: 0;
		padding: 0;
	}
	



	/* gestion des mots longs */

	textarea,
	table,
	td,
	th,
	code,
	pre,
	samp {
		-webkit-hyphens: auto; /* césure propre */
		-moz-hyphens: auto;
		hyphens: auto;
		word-wrap: break-word; /* passage à la ligne forcé */
	}
	
	code,
	pre,
	samp {
		white-space: pre-wrap; /* passage à la ligne spécifique pour les éléments à châsse fixe */
	}
	
	/* Passer à une seule colonne (à appliquer aux éléments multi-colonnes) */

	.element1,
	.element2 {
		float: none;
		width: auto;
	}
	

	/* TITRES PLUS PETITS */ 
	.sous-titre-partie-basse {
		font-size: 1.2em;
		font-weight: 800; 
	}
	h2 {
		font-size: 1.0em;
		font-weight: 600; 
	}
	h3 {
		font-size: 0.9em;
		font-weight: 600; 
	}
	h4 {
		font-size: 0.7em;
		font-weight: 600; 
	}
	

	.nom {
		margin-left: 0px; 
		padding: 0; 
	}
	

	.biere, .commande, .classement-graphique, .concours {
		visibility: hidden;
		display: none;
		// background-color: blue; 
	}
	.biere-erreur {
		visibility: visible;
		display: contents;
		color: rgba(var(--rouge),1);
		font-weight: bold;
	}
	
	
	
	
	/* CONTRE MESURE INVISIBILITE DES TRUCS GROS POUR SMARTPHONE */
	.classement-graphique {
		visibility: visible;
		display: block;
		margin-top: -165px;
		// background-color: blue; 
		font-size: 1em;
		

		width: 100%;
		flex-basis: 100%; /* Occupe toute la largeur disponible */
		display: flex;
		flex-direction: column; 
		justify-content: left;
		align-items: left;
	}
	.concours {
		visibility: visible;
		display: block;
		// margin-left: -60px;
		// margin-top: -165px;
		// background-color: blue; 
		// transform: scale(0.60);

		width: 100%;
		flex-basis: 100%; /* Occupe toute la largeur disponible */
		display: flex;
		justify-content: center;
		align-items: center;
	}
	div.better, div.worst {
		font-size: 75%;
		line-height: 100%;
	}
	
	.commande {
		visibility: visible;
		display: block;
		// background-color: magenta; 
		height: 61px;
	}
	.commande-texte {
		font-size: 90%;
		margin-top: -8px;
	}
	.boutons-commande {
		float: right; 
		margin-top: -61px;
	}
	.montant-credit {
		display: block;
	}

	.biere {
		visibility: visible;
		display: block;
		// background-color: magenta; 
		height: 86px;
		// transform: scale(0.40);

		// width: 150%;
		// margin-left: 0;
		// margin-right: auto;
		// flex-basis: 150%; /* Occupe toute la largeur disponible */
		// display: flex;
		// justify-content: flex-start;
		// align-items: flex-start;
	}
	.biere-colonne1 ,.biere-colonne2 , .biere-colonne3 
	{
		font-size: 65%;
	}
	
	
	.biere-colonne1 {
		height: 69px; 
		// width: 41px;
		// background-color: magenta;
		margin: 0;
	}
	.biere-colonne1 img {
		// transform: scale(0.8);
		margin-left:-0px; 
		margin-top: 14px;
		width: 40px;
	}
	.biere-colonne2 {
		height: 69px; 
		width: 60px;
		// margin-left: -0px; 
		// background-color: blue;
		margin-left: 45px;
	}
	.contenant {
		// transform: scale(0.8);
		margin-left:-6px; 
		margin-top: 10px;
		height: 22px; 
	}
	.petit-coeur {
		margin-left: 40px;
		margin-top: -27px;
	}
	.biere-colonne3 {
		// width: 265px;
		// margin-left: -0px; 
		// background-color: black;
		margin-left: 60px;
	}
	.bock {
		margin-top: -15px:
		margin-left: 22px;
	}
	.quantite {
		margin-top: 5px:
		margin-left: -20px;
	}
	.biere-quantite {
		margin-left: 7px; 
	}
	.petit-coeur {
		margin-top: -37px;
		margin-left: 33px; 
		// background-color: magenta; 
	}
	.offert {
		visibility: hidden;
		display: none;
	}
	

	.date-credit {
		margin-top:-3px;
		width: auto;
	}

	.biere-date {
		margin-left: -12px;
	}



















	.points {
		height: 66px;
	}	

	.pseudo {
		font-size: 2.3em;
		font-family: bebas, sans-serif;
		font-weight: normal;
		padding: 0px 0px 0px 0px;
		margin:  13px 0px 0px 2px;
		letter-spacing: 0.0rem; 
	}	

	
	
	.titre {
		font-size: 0.29em;
	}
	
	
	
	.element-grille {
		width: 100%; 
	}	
	
	
	
	
}













@media (max-width: 710px) 
{
	/* LE PROFIL BASCULE EN CENTRAGE MODE PORTRAIT */
	
	.pseudo-barre, .titre, .conteneur-profil-rouge, .conteneur-profil-blanc, .conteneur-profil-ricard, .conteneur-profil-rose, .points-adn, .nom-haut {
		text-align: center;
		// background-color: blue;
		margin-bottom: 4px;
		
	}
	
	
	.social {
		justify-content: center;
		align-items: center;
		text-align: center;
		display: inline; 
		max-width: 200px;
		// background-color:red;
	}
	
	

	.role {
		justify-content: center;
		align-items: center;
		text-align: center;
		display: inline; 
		// margin: -3px 0 25px 0 ;
		// background-color: blue;
	}
	
	.xyxyxy {
		justify-content: center;
		align-items: center;
		text-align: center;
		// background-color: blue;
		width: 100%; 
		display: flex;
	}
	
	
	.conteneur-profil-blanc, .conteneur-profil-rouge, .conteneur-profil-ricard, .conteneur-profil-rose {
		  display: flex;
		  flex-wrap: wrap;
		  justify-content: center; /* Centre les divs horizontalement */
		  align-items: center; /* Centre les divs horizontalement et leur contenu verticalement */
	}
	
	#profil1, #profil2, .points-adn {
		display: flex;
		justify-content: center;
		align-items: center;
	}
	
	#profil1 {
		// flex-basis: 100%; /* Occupe toute la largeur disponible */
		text-align: center;
		padding-right: 16px;
		padding-top: 0; 
		width: 100%; 

		
	}
.conteneur-profil-blanc {
	background : linear-gradient(to top, rgba(var(--blanc),0.6), rgba(var(--jaune),0.5) 40%, rgba(var(--jaune),0.0) );
	border-radius:7px;
}
.conteneur-profil-rouge {
	background : linear-gradient(to top, rgba(var(--rouge),0.9), rgba(var(--jaune),0.5) 40%, rgba(var(--jaune),0.0) );
	border-radius:7px;
}
.conteneur-profil-ricard {
	background : linear-gradient(to top, rgba(var(--jaune),0.0), rgba(var(--jaune),0.5) 40%, rgba(var(--jaune),0.0) );
	border-radius:7px;
}
.conteneur-profil-rose {
	background : linear-gradient(to top, rgba(var(--rose),0.6), rgba(var(--jaune),0.5) 40%, rgba(var(--jaune),0.0) );
	border-radius:7px;
}


	#profil1-int {
		flex-basis: 100%; /* Occupe toute la largeur disponible */
		display: flex;
		justify-content: center;
		align-items: center;

		transform: scale(1.2);
		padding-bottom: 26px;
		margin: 0 20px;
		
		// background-color: green; 		
		// width: 222px; 
	}

	#profil2 {
		flex-basis: 100%; /* Occupe toute la largeur disponible */
		// background-color: blue;
		text-align: center;
	}
	
	

	.courbure1 {
		margin-top: 38px; 
	}
	.courbure2 {
		margin-top: 20px; 
	}
	.div-vignette {
		margin-top: 38px; 
	}
	.cercle-numero {
		margin-top: -110px; 
	}
	
	
.biere-boutons-1 {
	float: right;
	margin-top: 40px;
}
	
	
	
.popup {	
					display: block;
					text-align: center;
					font-style: italic;
					width: 100%; 
					font-weight: bold; 
					padding: 10px 20px 10px 20px; 
					color: #FFFFFF;
					font-family: quicksand;
					background-color: rgba(0,0,0,0.6); 
					font-size: 160%; 
					// border-radius: 0;
					
					// border-radius: 7px;
					z-index: 100;
					position:absolute;
					top: 70px; 
					margin: 0;
					transform: skew(0, -5.0deg);	
	

}





.symbol {
  position: relative;
  top: 2px;
  left: -140px; 
  font-size: 130%;
  font-weight: 700;
}