*{
    cursor: crosshair;
}

@font-face{
    font-family:"D bold";
    src:url("polices/ARK-ES-DenseBold.woff") format("woff");
}
@font-face{
    font-family:"D light";
    src:url("polices/ARK-ES-DenseLight.woff") format("woff");
}
@font-face{
    font-family:"D med";
    src:url("polices/ARK-ES-DenseMedium.woff") format("woff");
}
@font-face{
    font-family:"D reg";
    src:url("polices/ARK-ES-DenseRegular.woff") format("woff");
}
@font-face{
    font-family:"S bold";
    src:url("polices/ARK-ES-SolidBold.woff") format("woff");
}
@font-face{
    font-family:"S light";
    src:url("polices/ARK-ES-SolidLight.woff") format("woff");
}
@font-face{
    font-family:"S med";
    src:url("polices/ARK-ES-SolidMedium.woff") format("woff");
}
@font-face{
    font-family:"S reg";
    src:url("polices/ARK-ES-SolidRegular.woff") format("woff");
}
body{
    background-color: #E5E5E5;
    font-family: Arial, Helvetica, sans-serif;
    color: #767676;
    font-size: calc(1pt + 1vh);
    line-height: calc(2pt + 1vh);
    text-shadow: 0px 0px 4px #767676;
    padding: 5%;
    padding-top: 2%;
    
}
/* gauche-le menu */
.G{
    display: flex;
    justify-content: center;
    padding-top: 0%;
    align-items: center;
    flex-wrap: wrap;
}
.TOC{
     width: 420px;
    background-color: transparent;
    height: 630px;
    border-radius: 20px;
    padding: 5%;
    padding-top: 2%;
    padding-bottom: 2%;
    flex-wrap: wrap;
    background-color: #E5E5E5;
    border: 1px solid #767676;
}
.imgs{
    width: 130px;
    position: relative;
    border: 1px dashed #767676;
    padding: 1%;
    background-color: #E5E5E5;
    border-radius: 20px;
}
.imgm2{
    width:100px;
    position: relative;
    border: 1px dashed #767676;
    background-color: #E5E5E5;
    padding: 1%;
    border-radius: 20px;
}
.imgm3{
    width:260px;
    position: relative;
    border: 1px dashed #767676;
    padding: 1%;
    background-color: #E5E5E5;
    border-radius: 20px;
    bottom:80px;
}
.imgm6{
    width:200px;
    position: relative;
    border: 1px dashed #767676;
    padding: 1%;
    background-color: #E5E5E5;
    border-radius: 20px;
    bottom: 80px;
    left: 60px;
}
.imgm4{
    width:130px;
    position: relative;
    border: 1px dashed #767676;
    background-color: #E5E5E5;
    padding: 1%;
    border-radius: 20px;
    left: 0px;
}
.imgm5{
    width:150px;
    position: relative;
    border: 1px dashed #767676;
    background-color: #E5E5E5;
    padding: 1%;
    border-radius: 20px;
    bottom: 73px;
    left: 60px;
}
.barcode{
    transform: rotate(-90deg);
    width: 140px;
    position:relative;
    right: 40px;
    bottom: 180px;
}
.mart{
    font-family:"D bold";
    font-size: calc(18pt + 1vh);
    line-height: calc(8pt + 1vh);
    -webkit-text-stroke: .6px #767676;
    text-shadow: none;
    color: #FAFF04;
    top: 0%;
   
}
.logo{
    width: 270px;
    position: relative;
    z-index: 4;
    right: 20px;
    bottom: 5px;
}
.logo2{
    width: 100px;
    height: auto;
    position: absolute;
}
.logo3{
    width: 100px;
    height: auto;
    position: absolute;
}
.logo4{
    width: 100px;
    height: auto;
    position: absolute;
}
.texte2{
    width: 20vh;
    padding-left: 2%;
    animation-name: ferment;
    animation-duration: 10s; 
    animation-iteration-count: infinite;
    animation-timing-function: ease-in-out; /* or: ease, ease-in, ease-in-out, linear, cubic-bezier(x1, y1, x2, y2) */
    animation-delay: 5s;
    position: fixed;
    right:5%;
    top: 200px;
    border: 1px dashed #767676;
    background-color: #E5E5E5;
    padding: 1%;
    border-radius: 20px;
    
}
@keyframes ooo {
    
    0%,100% {
        font-family:"S light";
    }
    50% {
        font-family:"S reg";
    }
  }
  @keyframes o {
    
    0%,100% {
        font-size: calc(40pt + 1vh);
    }
    50% {
        font-size: calc(48pt + 1vh);
    }
  }
  @keyframes o {
    
    0%,100% {
        color: #FAFF04;
    }
    50% {
        color: transparent;
    }
  }


/* droite-le contenu */
.D{
    display: flex;
    flex-wrap: wrap;
    flex-grow: initial;
    
    overflow-y: scroll;
    overflow-x: hidden;
    overflow: scroll;
    -webkit-overflow-scrolling: auto !important;
    padding-top: 8%;
    align-items: center;
    justify-content: center;
    margin-left: 20%;
    margin-right: 20%;
}
.p{
    width:auto;
    background-color: #E5E5E5;
    height: auto;
    border-radius: 20px;
    margin: 2%;
    padding: 2%;
    padding-top: 1%;
    padding-bottom:1%;
    border: 1px dashed #767676;
   
}
.texte{
    width: 30vh;
    padding-left: 2%;
    animation-name: ferment;
    animation-duration: 10s; 
    animation-iteration-count: infinite;
    animation-timing-function: ease-in-out; /* or: ease, ease-in, ease-in-out, linear, cubic-bezier(x1, y1, x2, y2) */
    animation-delay: 5s;
}
.texte:hover{
    animation: none;
}
.titre:hover{
    animation: none;
}
.titre{
    animation-name: ferment;
    animation-duration: 10s; 
    animation-iteration-count: infinite;
    animation-timing-function: ease-in-out; /* or: ease, ease-in, ease-in-out, linear, cubic-bezier(x1, y1, x2, y2) */
    animation-delay: 5s;
}
.page{
    text-align: right;
}
.imgm{
    width: 25vh;
}
.imgmm{
    width: 15vh;
}
.s1{
    position: absolute;
    top:115%;
    right: 32%;
    font-size: calc(48pt + 1vh);
    line-height: calc(48pt + 1vh);
}
@keyframes ferment {
    0%{
        text-shadow: 0px 0px 0px #767676;
    }
    50% {
        text-shadow: 0px 0px 10px #767676;
    }
    100% {
        text-shadow: 0px 0px 0px #767676;
    }
  }
.s1{
    position: absolute;
    top:7%;
    right: 32%;
    font-size: calc(30pt + 1vh);
    line-height: calc(30pt + 1vh);
    transform: rotate(25deg);
    animation-name: ooo;
    animation-duration: 4s; 
    animation-iteration-count: infinite;
    animation-timing-function: ease-in-out; /* or: ease, ease-in, ease-in-out, linear, cubic-bezier(x1, y1, x2, y2) */
    animation-delay: 2s;
}
.s2{
    position: absolute;
    top:50%;
    right: 50%;
    font-size: calc(40pt + 1vh);
    line-height: calc(40pt + 1vh);
    animation-name: oo;
    animation-duration: 4s; 
    animation-iteration-count: infinite;
    animation-timing-function: ease-in-out; /* or: ease, ease-in, ease-in-out, linear, cubic-bezier(x1, y1, x2, y2) */
    animation-delay: 2s;
}
.s3{
    position: absolute;
    top:69%;
    right: 35%;
    font-size: calc(48pt + 1vh);
    line-height: calc(28pt + 1vh);
    animation-name: o;
    animation-duration: 4s; 
    animation-iteration-count: infinite;
    animation-timing-function: ease-in-out; /* or: ease, ease-in, ease-in-out, linear, cubic-bezier(x1, y1, x2, y2) */
    animation-delay: 2s;
}

.bottom{
    font-size: calc(30pt + 1vh);
    line-height: calc(30pt + 1vh);
    z-index: -1;
    font-family:"S bold";
}