@charset "utf-8";

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

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

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

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

/* 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________________________________________*/
@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);}
}

/* TV CHAMPI VERT__________________________ */
.tvsync {
position: absolute;
z-index: 60;
left: 5.6%;
top: 71%;
width: 7%;
height: auto;
opacity: 0.3;
animation: tvsynch 4s linear infinite;
animation-delay: 9.5s;
}
@keyframes tvsynch {
0%    {opacity: 0.3;}
10%   {opacity: 0.3;}
10.1% {opacity: 1;}
30%   {opacity: 1;}
60%   {opacity: 0.3;}
100%  {opacity: 0.3;}
}

/* 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.5%;
top: 85.3%;
width: 7%;
height: auto;
animation: rotpp 4s linear infinite;
animation-delay: 8s;
}
@keyframes rotpp {
0%    {transform: rotate(0deg); left: 13.5%;}
30%   {transform: rotate(0deg); left: 13.5%;}
50.5% {transform: rotate(0deg); left: 15.2%;}
88%   {transform: rotate(-750deg); left: 15.2%}
91%   {transform: rotate(-720deg); left:13.5%;}
100%  {transform: rotate(-720deg); left:13.5%;}
}

.levier9 {
position: absolute;
z-index: 102;
left: 16%;
top: 89.2%;
width: 5%;
height: auto;
animation: levv 4s linear infinite;
animation-delay: 8s;
transform-origin: bottom;
transform: rotate(-7deg);
}
@keyframes levv {
0%    {transform: rotate(-7deg);}
30%   {transform: rotate(-7deg);}
50.5% {transform: rotate(0deg);}
88%   {transform: rotate(0deg);}
91%   {transform: rotate(-7deg);}
100%  {transform: rotate(-7deg);}
}

.ressort2 {
position: absolute;
z-index: 103;
width: 4.8%;
height: auto;
left: 11.5%;
top: 91.3%;
animation: ressortc 4s linear infinite;
animation-delay: 8s;
transform-origin: left;
}
@keyframes ressortc {
0%    {transform: scaleX(1);}
30%   {transform: scaleX(1);}
50.5% {transform: scaleX(1.33);}
88%   {transform: scaleX(1.33);}
91%   {transform: scaleX(1);}
100%  {transform: scaleX(1);}
}

/* 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;
}
}