@charset "utf-8";

html, body {

color: #eee;
margin: 0;
padding: 0;
font-family: system-ui, sans-serif;
font-stretch: condensed;
font-weight: normal;
font-size: 100%;
width:100%;
height:100%;
overflow-x:hidden;
background-color:#000;
      /* desactive zoom si horiz */
text-size-adjust: 100%;
}

.pictorotation {
display:none;
position:fixed;
z-index:405;
width: 100%;
height:auto;
top:30vh;
text-align: center;
background-color: #fff;
}
.divmenu {
position: relative;
top: 0;
width: 100%;
height: auto;
padding: 4px 30px 10px 20px;
background-color: #000;
overflow: hidden;
}
a {
color: #5bf;
text-decoration: none;
}

/* BLOCS */
p {
width: 90%;
column-count: 1;
column-gap: 0;
margin: 10px;
}

/* TXT */
.txt-normal {
font-size: 1.2rem;
line-height: 1.6;
font-weight: 300;
}
h1 {
margin: 10px;
}
.vert {
color: #0d0;
font-weight: bold;
}







/* bigs img______________________________________ */
.divmachine {
position:relative;
top:0;
width:100%; 
height:auto;
overflow:hidden;
margin: 0;
}
.imgfondbig, .imageup {
width: 100%;
height: auto;
object-position: top left;
}
.imgfondbig {
position:absolute;
z-index:30;
}
.imageup {
position:relative;
z-index:220;
}

/* back____________________________________________*/
.rouecoindroit {
position:absolute;
z-index:1;
left:82%;
top:68.2%;
width:34.7%;
height: auto;
animation:rota 12s linear infinite;
}
@keyframes rota {
	100% {transform:rotate(-360deg);}
}
.ventilo {
position:absolute;
z-index:2;
left:5.3%;
top:8.4%;
width:8%;
height: auto;
animation:rote 600ms linear infinite;
}
@keyframes rote {
	100% {transform:rotate(360deg);}
}
.blocage {
z-index:74;
position:absolute;
width:14%;
height: auto;
top:44%;
left:27%;
animation:blo 4s ease-in-out infinite;
animation-delay:7.5s;
}
@keyframes blo {
	0%   {transform:rotate(0deg);}
	3.5% {transform:rotate(0deg);}
	10%  {transform:rotate(60deg);}
	30%  {transform:rotate(0deg);}
	100% {transform:rotate(0deg);}
}


/*numeros compteur______________________________*/
.units {
position:absolute;
z-index:12;
width:10%;
height: auto;
left:47%;
top:71%;
animation:countu 40s linear infinite;
animation-delay:8.8s;
}
@keyframes countu {
0% {transform:rotate(-0deg);}
2% {transform:rotate(-0deg);}
	3% {transform:rotate(-36deg);}
	12% {transform:rotate(-36deg);}
		13% {transform:rotate(-72deg);}
		22% {transform:rotate(-72deg);}
			23% {transform:rotate(-108deg);}
			32% {transform:rotate(-108deg);}
				33% {transform:rotate(-144deg);}
				42% {transform:rotate(-144deg);}
					43% {transform:rotate(-180deg);}
					52% {transform:rotate(-180deg);}
						53% {transform:rotate(-216deg);}
						62% {transform:rotate(-216deg);}
							63% {transform:rotate(-252deg);}
							72% {transform:rotate(-252deg);}
								73% {transform:rotate(-288deg);}
								82% {transform:rotate(-288deg);}
									83% {transform:rotate(-324deg);}
									92% {transform:rotate(-324deg);}
										93% {transform:rotate(-360deg);}
										93.01% {transform:rotate(-0deg);}
}
.dizaines {
position:absolute;
z-index:11;
width:10%;
height: auto;
left:45.15%;
top:71%;
animation:countd 400s linear infinite;
animation-delay:37.8s;
}
@keyframes countd {
0% {transform:rotate(-0deg);}
2% {transform:rotate(-0deg);}
	2.1% {transform:rotate(-36deg);}
	12% {transform:rotate(-36deg);}
		12.1% {transform:rotate(-72deg);}
		22% {transform:rotate(-72deg);}
			22.1% {transform:rotate(-108deg);}
			32% {transform:rotate(-108deg);}
				32.1% {transform:rotate(-144deg);}
				42% {transform:rotate(-144deg);}
					42.1% {transform:rotate(-180deg);}
					52% {transform:rotate(-180deg);}
						52.1% {transform:rotate(-216deg);}
						62% {transform:rotate(-216deg);}
							62.1% {transform:rotate(-252deg);}
							72% {transform:rotate(-252deg);}
								72.1% {transform:rotate(-288deg);}
								82% {transform:rotate(-288deg);}
									82.1% {transform:rotate(-324deg);}
									92% {transform:rotate(-324deg);}
										92.1% {transform:rotate(-360deg);}
										92.11% {transform:rotate(-0deg);}
}
.cents {
position:absolute;
z-index:10;
width:10%;
height: auto;
left:43.2%;
top:71%;
}



/* champis______________________________________ */
.champi1, .champi2, .champi3, .champi4 {
position:absolute;
width:6.6%;
height: auto;
animation:champia 16s ease-in infinite;
}
.champi1 {animation-delay:0s}
.champi2 {animation-delay:4s;}
.champi3 {animation-delay:8s;}
.champi4 {animation-delay:12s;}
@keyframes champia {
0% {
z-index:20;
top:-1%;
left:35%;
transform:rotate(-30deg);
}
2% {
top:-1%;
left:35%;
transform:rotate(-30deg);
}
4% {
top:22%;
left:35%;
transform:rotate(-30deg);
}
7% {
top:22%;
left:35%;
transform:rotate(-30deg);
}
	12% {
	z-index:20;
	top:29.5%;
	left:45.2%;
	transform:rotate(110deg);
	}
	12.1% {
	z-index:40;
	top:29.5%;
	left:45.2%;
	transform:rotate(110deg);
	}
	17% {
	top:29.5%;
	left:45.2%;
	transform:rotate(110deg);
	}
		19% {
		top:44.3%;
		left:45.2%;
		transform:rotate(140deg);
		}
		22% {
		top:43%;
		left:45.2%;
		transform:rotate(140deg);
		}
		25% {
		top:43%;
		left:45.2%;
		transform:rotate(140deg);
		}
			31% {
			top:59%;
			left:34%;
			transform:rotate(-45deg);
			}
			48% {
			top:59%;
			left:34%;
			transform:rotate(-45deg);
			}
				50% {
				top:72%;
				left:31%;
				transform:rotate(-90deg);
				}
				54.5% {
				top:72%;
				left:31%;
				transform:rotate(-90deg);
				}
					57% {
					top:72.5%;
					left:19.5%;
					transform:rotate(60deg);
					}
					62.8% {
					top:72.5%;
					left:19.5%;
					transform:rotate(60deg);
					}
				72% {
				z-index:40;
				top:14%;
				left:19.5%;
				transform:rotate(90deg);
				}
				72.5% {
				z-index:20;
				top:14%;
				left:19.5%;
				transform:rotate(60deg);
				}
			75% {
			z-index:20;
			top:40%;
			left:17%;
			transform:rotate(10deg);
			}
			83.5% {
			z-index:40;
			}
		90% {
		top:56%;
		left:-12%;
		transform:rotate(-400deg);
		}
	100% {
	top:56%;
	left:-12%;
	transform:rotate(-400deg);
	}
}



/*lEDS________________________________________*/
.led1 {
position:absolute;
z-index:50;
width:4%;
height: auto;
left:14%;
top:64.9%;
opacity: 0;
animation:leds 4s infinite;
}
@keyframes leds {
	0%   {opacity:1;}
	50%  {opacity:0;}
	100% {opacity:0;}
}
.led2 {
position:absolute;
z-index:51;
width:2%;
height: auto;
left:81.6%;
top:30.2%;
opacity: 0;
animation:leds 4s infinite;
animation-delay: 0.8s;
}
.led3 {
position:absolute;
z-index:52;
width:2%;
height: auto;
left:77.6%;
top:88.4%;
opacity: 0;
animation:leds 4s infinite;
animation-delay: 1.8s;
}
.led4 {
position:absolute;
z-index:53;
width:2%;
height: auto;
left:57.1%;
top:64.2%;
opacity: 0;
animation:leds 4s infinite;
animation-delay: 0.2s;
}
.led5 {
position:absolute;
z-index:53;
width:2%;
height: auto;
left:28.9%;
top:21.3%;
opacity: 0;
animation:leds 4s infinite;
animation-delay: 0.5s;
}



/*manometre________________________________*/
.manogauche {
position:absolute;
z-index:61;
left:35.2%;
top:42.6%;
width:4.6%;
height: auto;
transform:rotate(-90deg);
animation:manos 4s infinite ease-out;
animation-delay: 7.3s;
}
.manodroite {
position:absolute;
z-index:62;
left:60.2%;
top:57.5%;
width:3%;
height: auto;
animation:manos 4s infinite;
animation-delay: 1.8s;
}
@keyframes manos {
	0%    {transform:rotate(-90deg);}
	90%   {transform:rotate(170deg);}
	100%  {transform:rotate(-90deg);}
}
.manosync {
position:absolute;
z-index:60;
left:5.8%;
top:72%;
width:7%;
height: auto;
animation:manoc 4s linear infinite;
}
@keyframes manoc {
	100% {transform: rotate(360deg)}
	}

/* leviers _________________________________ */
.levier1 {
position:absolute;
z-index:230;
left:46.2%;
top:26%;
width:20%;
height: auto;
animation:levb 4s ease-in infinite;
}
@keyframes levb {
	0%    {transform:rotate(0deg);}
	60.5% {transform:rotate(0deg);}
	72%   {transform:rotate(36deg);}
	90%   {transform:rotate(0deg);}
	100%  {transform:rotate(0deg);}
}
.levier2 {
position:absolute;
z-index:73;
left:59%;
top:44.5%;
width:12.6%;
height: auto;
animation:levc 4s ease-in infinite;
}
@keyframes levc {
	0%   {transform:rotate(-21deg);}
	4%   {transform:rotate(34deg);}
	36%  {transform:rotate(-21deg);}
	100% {transform:rotate(-21deg);}
}
.levier3 {
position:absolute;
z-index:71;
left:43.5%;
top:36%;
width:18%;
height: auto;
animation:lev 4s ease-in infinite;
}
@keyframes lev {
	0%   {transform:rotate(0deg);}
	0.5% {transform:rotate(0deg);}
	6%   {transform:rotate(-52deg);}
	43%  {transform:rotate(0deg);}
	74%  {transform:rotate(0deg);}
	78%  {transform:rotate(-8deg);}
	87%  {transform:rotate(0deg);}
	100% {transform:rotate(0deg);}
}
.ressort1 {
position:absolute;
z-index:72;
width:2.3%;
height: auto;
left:55.3%;
top:53.2%;
animation:ressorta 4s ease-in infinite;
transform-origin:bottom;
}
@keyframes ressorta {
	0%   {transform:scaleY(1);}
	1%   {transform:scaleY(1);}
	6%   {transform:scaleY(1.42) rotate(-5deg);}
	43%  {transform:scaleY(1);}
	73%  {transform:scaleY(1);}
	78%  {transform:scaleY(1.1);}
	86%  {transform:scaleY(1);}
	100% {transform:scaleY(1);}
}



/*module droit______________________________*/
.levierpiston {
position:absolute;
z-index:80;
left:86%;
top:54.6%;
width:12%;
height: auto;
animation:came 4s infinite;
}
@keyframes came {
	0%   {transform:rotate(30deg);}
	51%  {transform:rotate(30deg);}
	60%  {transform:rotate(60deg);}
	90%  {transform:rotate(30deg);}
	100% {transform:rotate(30deg);}
}
.vispiston {
position:absolute;
z-index:81;
left:86.6%;
width:2%;
height: auto;
animation:bille 4s infinite;
}
@keyframes bille {
	0%   {top:63.5%;}
	51%  {top:63.5%;}
	60%  {top:59.7%;}
	90%  {top:63.5%;}
	100% {top:63.5%;}
}
.bulle {
position:absolute;
z-index:82;
width:22px;
height: auto;
top: 9.5%;
left:89%; 
font-size:1.4rem;
opacity: 0;
color:#ced;
animation:bul 4s linear infinite;
}
@keyframes bul {
	0%   {opacity: 0;}
	50%  {opacity: 0;}
	54%  {top: 9.5%; opacity: 1;}
	100% {top: 0;    opacity: 0;}
}



/*pignons 8-16__________________________________*/
.pignon8 {
position:absolute;
z-index:90;
left:75%;
top:39.8%;
width:10.4%;
height: auto;
animation:rotd 2s linear infinite;
}
@keyframes rotd {
	0%   {transform:rotate(0deg);}
	100% {transform:rotate(360deg);}
}
.pignon16a {
position:absolute;
z-index:91;
left:66.8%;
top:21.7%;
width:13.5%;
height: auto;
animation:rots 4s linear infinite;
}
@keyframes rots {
	0%   {transform:rotate(-60deg);}
	100% {transform:rotate(-420deg);}
}
.pignon16b {
position:absolute;
z-index:92;
left:66.8%;
top:51.8%;
width:13.5%;
height: auto;
animation:rots 4s linear infinite;
animation-delay: 0.38s;
}

.tige1 {
position:absolute;
z-index:93;
left:63.6%;
top:27%;
width:20%;
height: auto;
animation:tga 4s linear infinite;
}
@keyframes tga {
	0%   {transform:rotate(-120deg);}
	100% {transform:rotate(-480deg);}
}
/*devant courroie rouge_________________*/
.tige2 {
position:absolute;
z-index:224;
left:63.6%;
top:57%;
width:20%;
height: auto;
animation:tgb 4s linear infinite;
}
@keyframes tgb {
	0%   {transform:rotate(60deg);}
	100% {transform:rotate(-300deg);}
}



/*cremaillere________________________________*/
.crem {
position:absolute;
z-index:100;
width:7%;
height: auto;
left:19.2%;
top:80%;
animation:ressortb 4s ease-in infinite;
animation-delay:8s;
transform-origin:bottom;
}
@keyframes ressortb {
	0%    {top:80%;}
	50.5% {top:80%;}
	88%   {top:21%;}
	100%  {top:80%;}
}
.pignoncrem {
position:absolute;
z-index:101;
left:13%;
top:85.3%;
width:7%;
height: auto;
animation:rotpp 4s ease-in infinite;
animation-delay:8s;
}
@keyframes rotpp {
	0%    {transform:rotate(0deg); left: 13%}
	30%   {transform:rotate(0deg); left: 13%}
	50.5% {transform:rotate(0deg); left: 15.2%}
	88%   {transform:rotate(-750deg); left: 15.2%}
	92%   {transform:rotate(-720deg); left:13%;}
	100%  {transform:rotate(-720deg); left:13%;}
}
.levier9 {
position: absolute;
z-index: 102;
left: 15.6%;
top: 89.2%;
width: 4%;
height: auto;
animation: levv 4s ease-in infinite;
animation-delay: 8s;
transform-origin: bottom;
transform: rotate(-7deg);
}
@keyframes levv {
0%    {transform: rotate(-7deg);}
30%   {transform: rotate(-7deg);}
50.5% {transform: rotate(6deg);}
88%   {transform: rotate(6deg);}
92%   {transform: rotate(-7deg);}
100%  {transform: rotate(-7deg);}
}

/*compteur____________________________________*/
.rouecurs {
position:absolute;
z-index:110;
left:25.3%;
top:70%;
width:17.2%;
height: auto;
animation:curs 4s ease-in infinite;
animation-delay:8.7s;
transform:rotate(0deg);
}
@keyframes curs {
	0%   {transform:rotate(0deg);}
	7%   {transform:rotate(-80deg);}
	28%  {transform:rotate(80deg);}
	70%  {transform:rotate(0deg);}
	100% {transform:rotate(0deg);}
}
.cliquetcompteur {
position:absolute;
z-index:111;
left:41%;
top:83%;
width:10.5%;
height: auto;
animation:cliccompt 4s ease-in infinite;
animation-delay:9.6s;
}
@keyframes cliccompt {
	0%   {transform:rotate(0deg);}
	4%   {transform:rotate(-150deg);}
	8%   {transform:rotate(-150deg);}
	60%  {transform:rotate(0deg);}
	100% {transform:rotate(0deg);}
}

.smoke {
position: absolute;
z-index: 132;
left: 62.6%;
top: 76%;
width: 3%;
height: auto;
opacity: 0;
animation: smok 4s linear infinite;
}
@keyframes smok {
	50%  {left: 62.5%; top: 76%; width: 4%; opacity: 0;}
	55%  {opacity: 1;}
	100% {left: 56%; top: 30%; width: 20%; opacity: 0;}
}
.tuyvap {
position: absolute;
z-index: 133;
left: 57.7%;
top: 69%;
width: 12%;
height: auto;
animation: tuv 4s linear infinite;
transform-origin: top;
}
@keyframes tuv {
	49% {transform: scaleY(1.0);}
	53% {transform: scaleY(1.15);}
	78% {transform: scaleY(1.0);}
}



/* vertical */
@media only screen and (orientation: portrait){
.pictorotation {
display:block;
}
}


/* XL */
@media screen and (min-width: 961px) {
p {
column-count: 2;
column-gap: 40px;
}
}