@font-face {
    font-family: myFont; 
    src: url(/fonts/OldStandardTT-Regular.ttf); 
  }

  @font-face {
    font-family: myFont2; 
    src: url(/fonts/OldStandardTT-Italic.ttf); 
  }




  @font-face {
    font-family: myFont3; 
    src: url(/fonts/Kommuna-NarrowBold.ttf); 
  }




html, body {
  
    margin: 0px;
    padding: 0px;
}


.responsive {

  display: none;
}

/* .responsive {
  
  display: none;
} */

.h1{

  font-family: myFont;
  font-size: 5px;

}


a{
    text-decoration: none;
    color: gray;
}

a:hover{

    color: black;
}

.divprincipale {

  
    background-color: white;
    width: 100%;
    height: 100%;
}

.bandeau {

    color: gray;
    font-family: myFont;
    font-size: 25px;
    margin-top: -10px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    background-color: rgb(255, 255, 255);
    
}

.enfant {
    margin-left: 15px;      
    flex-grow: 1;
    display: flex;
}


.langue:hover{

    color:black;
}
p {

    font-family: myFont;
    /* background-color: green; */
}

.apropos{

    margin-right: 15px;   
    justify-content: end;
}

.langue {
    justify-content: center;
    margin-left: 35px;
}

.parentTexte {
  
    
    color: gray; 
    margin-left: 15px;
    justify-content: left;
}

.texte {
 
  line-height: 3vw;
    text-align: left;
    width: 80%;
    font-size: 3vw;
    transition: all 1s;

}

#mot1 {

  color: gray; 
}

#mot1:hover {

  background: linear-gradient(
    to left,
    gray 20%,
    #fef8a6 50%,
    gray 80%
  );
    
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;

}

#mot2 {

  color: gray; 
}

#mot2:hover {

  background: linear-gradient(
    to left,
    gray,
    #fef8a6 10%,
    gray 90%,
    gray 10%
  );
    
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;

}

#mot3 {

  color: gray; 
}

#mot3:hover {

  background: linear-gradient(
    to left,
    gray,
    gray 30%,
    #fef8a6 90%
  );
    
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;

}


#mot4 {

  color: gray; 
}

#mot4:hover {

  background: linear-gradient(
    to left,
    gray,
    #fef8a6 10%,
    gray 90%,
    gray 10%
  );
    
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;

}



#mot5 {

  color: gray; 
}

#mot5:hover {

  background: linear-gradient(
    to left,
    gray,
    gray 30%,
    #fef8a6 90%
  );
    
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;

}


#mot6 {

  color: gray; 
}

#mot6:hover {

  background: linear-gradient(
    to left,
    gray 20%,
    #fef8a6 50%,
    gray 80%
  );
    
    
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;

}


#mot8 {

  color: gray; 
}

#mot8:hover {

  background: linear-gradient(
    to left,
    gray,
    gray 30%,
    #fef8a6 90%
  );
    
    
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;

}


#mot7 {

  color: gray; 
}

#mot7:hover {

  background: linear-gradient(
    to left,
    gray 20%,
    #fef8a6 50%,
    gray 80%
  );
    
    
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;

}

#mot9 {

  color: gray; 
}

#mot9:hover {

  background: linear-gradient(
    to left,
    gray 20%,
    #fef8a6 50%,
    gray 80%
  );
    
    
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;

}


/* #mot1:hover
{
    font-style: italic;
} */

/* .italique {
    font-style: italic;
} */

img{

  display: none;
  width: 130px;
  height: auto;
  position: fixed;       /* ← STOP le tremblement */
  pointer-events: none;  /* ← STOP l'effet hover qui boucle */
  z-index: 9999; 

    /* display: none;
    width: 130px;
    height: auto;
    position: absolute; */
}


#legende {
  
 
  width: 100%;
  font-size: 3.5vw;
  background-color: white;
  position: fixed;
  bottom: 0;
  width: calc(60% - 500px);
  color: black;
  text-align: left;
}



h1 {
  font-size: 35px;
font-family: myFont;
color: gray;
}

#description{

  margin-top: -25px;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 1vw;
}

#astérix{
color: gray;
  margin-top: -25px;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 15px;
}



.img1 {

  cursor: crosshair;
  position: absolute;
  right: 0;
  top: 72px;
  width: calc(100% - 20px);
  height: 100%;
  display: none;
  height: calc(100% - 72px);
  overflow-y: scroll;
  padding-right: 10px;
  text-align: -webkit-right;
}

.img2 {
  cursor: crosshair;
  position: absolute;
  right: 0;
  top: 72px;
  width: calc(100% - 20px);
  height: 100%;
  display: none;
  height: calc(100% - 72px);
  overflow-y: scroll;
  padding-right: 10px;
  text-align: -webkit-right;
}

.img3 {
  cursor: crosshair;
  position: absolute;
  right: 0;
  top: 72px;
  width: calc(100% - 20px);
  height: 100%;
  display: none;
  height: calc(100% - 72px);
  overflow-y: scroll;
  padding-right: 10px;
  text-align: -webkit-right;
}

.img4 {
  cursor: crosshair;
  position: absolute;
  right: 0;
  top: 72px;
  width: calc(100% - 20px);
  height: 100%;
  display: none;
  height: calc(100% - 72px);
  overflow-y: scroll;
  padding-right: 10px;
  text-align: -webkit-right;
}

.img5 {
  cursor: crosshair;
  position: absolute;
  right: 0;
  top: 72px;
  width: calc(100% - 20px);
  height: 100%;
  display: none;
  height: calc(100% - 72px);
  overflow-y: scroll;
  padding-right: 10px;
  text-align: -webkit-right;
}


.img6 {
  cursor: crosshair;
  position: absolute;
  right: 0;
  top: 72px;
  width: calc(100% - 20px);
  height: 100%;
  display: none;
  height: calc(100% - 72px);
  overflow-y: scroll;
  padding-right: 10px;
  text-align: -webkit-right;
}

.img8 {
  cursor: crosshair;
  position: absolute;
  right: 0;
  top: 72px;
  width: calc(100% - 20px);
  height: 100%;
  display: none;
  height: calc(100% - 72px);
  overflow-y: scroll;
  padding-right: 10px;
  text-align: -webkit-right;
}

.img9 {
  cursor: crosshair;
  position: absolute;
  right: 0;
  top: 72px;
  width: calc(100% - 20px);
  height: 100%;
  display: none;
  height: calc(100% - 72px);
  overflow-y: scroll;
  padding-right: 10px;
  text-align: -webkit-right;
}



  img.contenu {
    cursor: s-resize;
    width: 690px;
    height: auto;
    display: block;
    position: relative;
    margin-bottom: 10px;
}


.contenu1 {

  bottom: 0;
  margin-top: -40px;
  cursor: s-resize;
  width: 690px;
  height: 600px;
  object-fit: cover;
  display: block;
  position: relative;
 
}
  




/* SMARTPHONE MODE PORTRAIT */
@media screen and (orientation: portrait) {


body {

  
}

.divprincipale{

  display: none;
}

.responsive {

 
  display: block;
}
.phonedécoration {

  font-family: myFont2;
  background: linear-gradient(
    to left,
    gray 20%,
    #fef8a6 50%,
    gray 80%
  );
  
    
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;

}

    


/* #h2 
{

  font-family: myFont;
  font-size: 5px;
} */


}