body{
  font:20px/1.1em arial, sans-serif;
  background:rgb(255, 255, 255);
  overflow: scroll; 
  margin: 0 auto;
  overflow-y: hidden;
}

audio{
  transform-origin: top;
  transform: scale(.5);
}

@font-face {
  font-family: 'Compagnon-Light';
  src: url(Compagnon-Light.otf);
}

@font-face {
  font-family: 'Compagnon-Light-Italic';
  src: url(Compagnon-LightItalic.otf);
}

@font-face {
  font-family: 'Squatina';
  src: url(Squatina-Regular.otf);
}

@font-face {
  font-family: 'GHAITHSANS-Bold';
  src: url(GHAITHSANS-Bold.otf);

}

@font-face {
  font-family: 'simpo';
  src: url(simpo.ttf);
}

#page{
  position: relative;
  display: flex;
  width: 720vw;
  height: 100%;
  background-color:transparent;
  align-content: space-between;   
  background-color: transparent;
  }

#titrefr{
  position: fixed;
  display: block;
  background-color: transparent;
  width: 25vw;
  height: 20vh;
  top: 1vw;
  left: 3vh;
  font-family: Squatina;
  font-size: 5vw;
  text-align: left;
  line-height: 1;
  z-index: 2;
  
}
.titrearticle{
  position: absolute;
  display: flex;
  background-color: transparent;
  top: -23%;
  width: 40vw;
  height: 10vh;
  position: absolute;  
  font-family: Squatina ;
  font-size: 4vw;
  text-align: left; 
  line-height: 3vw;
  color: rgb(0, 136, 255);
}
.titrepoeme{
  position: relative;
  display: flex;
   /*  top: -1%;
    width: 40vw;
  height: 10vh;
  position: absolute;

  */
  background-color: transparent;
  font-family: Squatina;  
  font-size: 2vw;
  text-align: left;
    
}
.soustitrefr{
  position: relative;
  display: flex;
  font-family:Compagnon-Light-Italic ;  
  color: rgb(0, 0, 0);
  top: 2%;
  /*

  */
}

.titreetsous{
  display: block;
  position: absolute;
  transform: translate(0, -100%);
}

.article{
  display: flex;
  position: relative;
  flex-direction: column;
  top: 13vw; 
  left: 8vw;
  width: 45vw;
  height: 45vw;
  background-color:transparent;  
  margin-left: 20vw;  
  font-family: Compagnon-Light;
  font-size: .85vw;
  line-height: 1;   
}
.decal{
  margin-left: 30vw;
  top: 6vw;
}

.article:first-of-type{
  margin-left: 5vw;
}
.article-content { 
  margin-top: 2vw;   
  column-count: 2;           
  column-gap: 3vw;         
  column-fill: balance;
  width: 45vw;     
     
}
.troiscolonnes{
  column-count: 3;
  width: 70vw;
}
.quatrecolonnes{
  column-count: 4;
  width: 90vw;
}
.bas{
  top: 8vw;
  background-color: transparent;
  margin-left: 55vw;
}
.décaler{
  top: -25vw;
  margin-left: 50vw;
  margin-right: 30vw;
  background-color: transparent;
}
.margin{
  padding-right: 10vw;
  margin-left:10vw;
  background-color: transparent;
}
#images{
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content:flex-start; 
  flex-wrap: wrap;
  background-color: transparent;
  width: auto;
  height: 55vw; 
  margin-left: 60vw;
  top: 3vw;
  font-family: Compagnon-Light-Italic;
  font-size: 0.8vw;
  
}
.im{
  position: relative;
  display: block;  
  background-color: transparent;
  margin: 2vw;
  width: 10vw;
 
}
.wi{
  width: 100%;
  height: auto;
}
#légendefrancais{
  position: relative;
  display: inline-block; 
  width: 25vw;
  height: 10vw;
  transform: translate(70%, 0);
  background-color: transparent;
  bottom: 35%;
  margin-right: 2vw;
}
#légendearabe{
  position: absolute;
  display: block; 
  margin-right: 2vw;
  width: 25vw;
  height: 10vw;
  background-color: transparent;  
  right: 0%;
  bottom: -115%;
}
#legendefr{
  font-family: Compagnon-Light;
  font-size:.8vw ;
  line-height: 1.5;
  text-align: bottom;
}
#legendear{
  font-family: simpo ;
  font-size: 0.8vw ;
  line-height: 1.5;
  direction: rtl;
  text-align: right;
}
.composition{
  background-color: rgb(0, 136, 255);;
}
.composition img{
  mix-blend-mode: lighten;
  width: 100%;
  height: auto;
}
#com1{
  position: absolute;
  display: flex;
  width: 20vw;
  height: auto;  
  bottom: 25%;
  left: 37%;
  
}
#com2{
  position: absolute;
  display: flex;
  width: 10vw;
  right: -40%;
  top: 37%;
  
}
#com3{
  position: absolute;
  display: flex;
  width: 16vw;
  height: 24vw; 
  top: 10%;
  left: -50%;
  
}
#com4{
  position: absolute;
  display: flex;
  width: 20vw;
  height: auto;
  top: 40%;
  right: -167%;  
}


.poster{
  display: block;
  position:absolute; 
  width: 25vw;
  height: 10vw;
  background-color: transparent;
  
}
.poster img{
  width: 100%;
  height: auto;
  transition: .2s;

}
.un{
  top: 20vw;
  width: 17vw;
  bottom: 35vw;
  left: 252vw;  
  rotate: -10deg;
}

.un audio{
 transform: translate(-25%, 110%) scale(.5);
}

.deux{
  top: 30vw;
  left: 460vw;  
  rotate: -100deg;
}
.trois{
  top: 35vw;
  bottom: 15vw;
  left: 335vw;  
  rotate: 110deg;
}


.recto{
  transition: .2s;
  background-color: rgb(1, 79, 147);;
}

.recto img{
  mix-blend-mode: lighten;
}

.verso{
  display: block;
  position:absolute; 
  width: 20vw;
  top: 0;
  left: 0;
  height: 10vw;
  transition: .2s;
  opacity: 0;
  transform: scaleY(-1);
}
.verso img{
  width: 60%;
  height: auto;
  transition: .2s;
  
}
.turn .recto{
  opacity: 0;
  transform: scaleY(-1);
}

.turn .verso{
  opacity: 1;
  transform: scaleY(1);
}


.titrepoemear{
  direction: rtl;
  text-align: right;
  font-family: 'GHAITHSANS-Bold';
  position: relative;
  display: flex;
   /*  top: -1%;
    width: 40vw;
  height: 10vh;
  position: absolute;

  */
  background-color: transparent;
  font-family: Squatina;  
  font-size: 2vw;
  text-align: left;

}
#titrearabe {
  direction: rtl;
  text-align: right;    
  font-family: 'simpo';
  font-size: 3vw;
  color: rgb(0, 136, 255);;
  margin-bottom: 2vw;
}
.soustitrear{
  direction: rtl;
  text-align: right;
  font-family: 'GHAITHSANS-Bold';
  position: relative;
  display: flex;
  font-family:Compagnon-Light-Italic ;  
  color: rgb(0, 0, 0);
  top: 2%;
}

.ar{
  direction: rtl;
  text-align: right;    
  font-family: 'simpo'; 
}