/*pour la typo : la télécharger, la télécharger dans le dossier font du fichier, 
la charger dans le navigateur avec @font, font familly c'est pour indiquer le nom de la 
typo utilisée et src le dossier où elle doit aller la chercher avec le lien dans le fichier
font
toujours charger les polices en haut de la feuille de style*/


#page_1{
    position: fixed;
    overflow: hidden;
}

@font-face {
    font-family: police1;
    src: url(fonts/StingerWideTrial-Heavy.ttf);
}

@font-face {
    font-family:  police2;
    src: url(fonts/StingerWideTrial-Bold.ttf);
}

@font-face{
     font-family: police3;
    src: url(fonts/Speakeasy\ Script.ttf);
}

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

@font-face{
    font-family: police5;
   src: url(fonts/GeneralSans-Bold.otf);
}

@font-face{
    font-family: police6;
   src: url(fonts/GeneralSans-Medium.otf);
}

body{ /*balise qui concerne tout le corps de mon code*/
background-color: rgb(144, 255, 249); /*couleur d'arrière plan rgba le a correspond à l'opacité comprise entre 0 et 100 */ 
/*color: rgba(47, 63, 89, 0.5); l'opacité est comprise entre 0 (opaque) et 1 (transparent)*/

}


/************** DRAG iMG ******/
#drag-me {
    width: 25%;
    height: 100%;
    margin: 10%;


   

    -webkit-transform: translate(0px, 0px);
            transform: translate(0px, 0px);
}


.draggable {
   /* position: absolute;*/
}
#drag-me::before {
   /* content: "#" attr(id);*/
    color: #000;
}


/* resize */
.resize {
 
 
  padding: 20px;
  margin: 20px;

  /* The width is set in the element's HTML
   * so that it can be read by the resizing
   * function
   */
}

.resize-container {
  width: 100px;
  height:100px;
}

#rotate-area {
    overflow: hidden;
  width:100%;
    height:100%;
}
/**************************************************************/

.arrière-plan{
    font-family: police1;
    font-size: 4vw;
    margin-top: 0%;
    position: absolute;
    background-color: none;
}

#combinaison{
    background-color: none;

}

.zone {
	height: 100%;
	width: 100%;
	background: darkorange;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
	border-radius: 5px;
}
.zone-inner {
	position: relative;
	width: 100vw;
    height: 100vh;
}

/*.zone-inner {
	position: absolute;
	top: 5px;
	right: 5px;
	bottom: 5px;
	left: 5px;
}
.widget {
	position: absolute;
	width: 400px;
	height: 100px;
	cursor: grab;
	background: transparent;
	border-radius: 5px;
	transition: 0.1s;    
*/

.widget {
	position: absolute;
    
}
.widget-inner {
	position: absolute;
	top: 5px;
	right: 5px;
	bottom: 5px;
	left: 5px;
	border-radius: 5px;
}


.wig-txt {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
}
/*.collision {

}*/

.widget-inner{
    padding: 0%;
}

#menu_champignon {
    display: inline-block;
	top: 300;
	left: 0;
   height: 200px;
	width: 200px;
}
#menu_chorizo {
	top: 50px;
	right: 0px;	
   height: 200px;
	width: 200px;
     display: inline-block;
}
#menu_bananes {
     display: inline-block;
	bottom: 0px;
	left: 0px;
	height: 200px;
	width: 200px;
}
#menu_flocons_davoine {
     display: inline-block;
	bottom: 0px;
	right: 0px;
	height: 200px;
	width: 200px;
}

#menu_gingembre {
     display: inline-block;
	bottom: 0px;
	right: 300px;
	height: 200px;
	width: 200px;
   
   
}

#menu_pdt {
     display: inline-block;
	bottom: 0px;
	left: 300px;
	height: 200px;
	width: 200px;
}

#menu_pdn {
     display: inline-block;
	top: 100px;
	right: 300px;	
	height: 200px;
	width: 200px;
    
}

#menu_oeufs {
     display: inline-block;
	top: 100px;
	left: 300px;
	height: 200px;
	width: 200px;
}

.arrière-plan{
    background-color: aqua;
    z-index: 2;
}

/* IGNORE */
.profile-contain {
  position: fixed;
  bottom: 0;
  left: 0;
  margin: 0 0 20px 20px;
	transition: 0.5s;
}

#more-btn {
  border: 1px solid #7fb2ff;
  background-color: #7fb2ff;
  padding: 5px 10px 5px 10px;
  font-weight: bold;
  color: #2f5691;
  display: inline;
  outline: none;
  box-shadow: 5px 5px #111;
  margin-right: 5px;
}
#more-btn:hover {
  cursor: pointer;
  background-color: #6f9de2;
  border: 1px solid #6f9de2;
  color: #2f5691;
	box-shadow: 3px 3px #111;
	transition: 0.5s;
}
.profile {
  color: #444;
  display: inline;
  font-weight: bold;
  font-size: 19px;
	margin-left: 10px;
}
.profile:hover {
  cursor: pointer;
  color: #333;
}


/*.retourmenu a {
    font-size: 50px;
    text-decoration: none; 
    color: rgb(114, 232, 158);
   transform: rotate(180deg);   
    background-color: blue;
    margin-top: 0px;
   margin-left: 0px;
}*/

.en-tête {
    text-align: center;
    margin-bottom: 20px;
  }

.titre_principal{
    font-family: police1;
    font-size: 7vw;  
    z-index: 2;
    text-decoration: none;
    margin-bottom: 0;
    text-align: center;
    color: rgb(11, 0, 167);
    background-color: darkorange;
    padding: 10px 10px; /* 0px en haut/bas, 10px à gauche/droite */
    border-radius: 15px; /* Arrondit les coins */
    display: inline-block; /* Ajuste la taille du rectangle au texte */
   
}

.y_de_Maya{
    z-index: 1;
    position: relative;
    top : 10%;
    color: rgb(11, 0, 167);
}

.ligne_ondulée {
    width: 100%;
    max-width: 100%;
    margin: 2px auto 0 auto;
    height: 20px;
    overflow: hidden;
    margin-top: -25px;
}

.ligne_ondulée svg{
    width: 100%;
    height: 100%;
    display: block;
}

.ondulation {
    stroke-dasharray: 200; 
    stroke-dashoffset: 0;
    animation: wave-move 2s linear infinite;
  }
 


.droit {
    width: 40%;
    display: inline-block;
    vertical-align: top;
    margin-top: 0px;
    margin-right: 0%;
    margin-left: 3%;
   
}

.gauche {
    width: 50%;
    display: inline-block;
    vertical-align: top;
    
}



.grid-item { 
    width: 32.7%; 
margin: 3px;}


span{
    color: rgb(234, 0, 84);
    position: relative;
    top: -20px; /*valeur x de gauche à droite et y de haut en bas*/
}

h1{
    font-family: police1;
    font-size: 8vw; /*la norme c'est le pixel mais le vw s'adapte selon les largeurs d'écran
    qui vont différer et 100px = 5vw à peu près*/
    color: darkorange;
    margin-left: 10px;
    margin-top: 0px;
    margin-bottom: 5px;
    text-align: center;
   
    
}

#nbrdepers{
    font-family: police5;
    font-size: 3vw; 
    width: 100%;
    background-color: aquamarine;
    
 
}

#ingredients p {
width: 100%;
margin: 0px;
margin-left: 10px;
font-family: police5;
font-size: 2vw;

}

.type{
    font-size: 3vw;
    font-family: police2;
    margin-left: 10px;
    color:  darkorange;


    

 

top:0px;
    padding: 0;
    width: 100%;
    
}

h2{
    font-family: police2;
    font-size: 4vw; 
    color: rgb(234, 0, 84);
    margin-left: 10px;
    background-color: aquamarine;
    margin-top: 0%;
    margin-bottom: 10px;
   
}



#ingrédients{
    font-family: police5;
    font-size: 2vw;
    margin-left: 10px;
    margin-top: 5%;
    width: 100%;
    
}

/*.partie_ingrédients{
    background-color: #2f5691;
}*/

#recette{
    font-family: police6;
    font-size: 2vw;
    margin-left: 0%;
    margin-top: 20px;
    width: 100%;
    line-height: 1.3;
    text-align: justify;
    line-height: 25px;
    padding: 5px;
    color:  darkorange;


    
}
#champi {
    position: absolute;
    top:0px;
    width: 30%;
}
#carottes {
    position: absolute;
    top:0px;
    width: 30%;
}
#poulet {
    position: absolute;
    top:0px;
    width: 30%;
}
#gingembre {
    position: absolute;
    top:0px;
    width: 30%;
}
#curcuma {
    position: absolute;
    top:0px;
    width: 30%;
}
#piment {
    position: absolute;
    top:0px;
    width: 30%;
}
#poireaux {
    position: absolute;
    top:0px;
    width: 30%;
}
#oignons {
    position: absolute;
    top:0px;
    width: 30%;
}
#chorizo {
    position: absolute;
    top:0px;
    width: 30%;
}#oignons_rouges {
    position: absolute;
    top:0px;
    width: 30%;
}#ail {
    position: absolute;
    top:0px;
    width: 30%;
}#parmesan {
    position: absolute;
    top:0px;
    width: 30%;
}#pomme_de_terre {
    position: absolute;
    top:0px;
    width: 30%;
}#échalotte {
    position: absolute;
    top:0px;
    width: 30%;
}#curcuma {
    position: absolute;
    top:0px;
    width: 30%;
}#poudre_de_noisettes {
    position: absolute;
    top:0px;
    width: 30%;
}#farine_blanche {
    position: absolute;
    top:0px;
    width: 30%;
}#sucre {
    position: absolute;
    top:0px;
    width: 30%;
}
#oeufs {
    position: absolute;
    top:0px;
    width: 30%;
}#bananes {
    position: absolute;
    top:0px;
    width: 30%;
}#chocolat {
    position: absolute;
    top:0px;
    width: 30%;
}#beurre {
    position: absolute;
    top:0px;
    width: 30%;
}#lait {
    position: absolute;
    top:0px;
    width: 30%;
}#vanille {
    position: absolute;
    top:0px;
    width: 50%;
}
img, a { /*je peux appeler plusieurs éléments simultanément en utilisant une virgule pour
    les appeler*/
    display: block;
}

img{
    width: 100%; /*correspond à la largeur de l'image
    max width permet d'éviter de dénaturer l'image*/
    margin:0 auto; /*va cherhcer à centrer l'élément*/
}

p{
    width: 25%;
    color: rgb(234, 0, 84);


}

#article{
    text-align: center;
}



/* SMARTPHONE MODE PORTRAIT */
@media screen and (orientation: portrait) {
    .gauche, .droit {
        display: block;
        width: 90%;
        margin: 0 auto;
    }

    h1 {
        font-size: 10vw;
    }

    h2 {
        font-size: 6vw;
    }

    .titre_principal {
        font-size: 10vw;
        padding: 5px;
    }

    .type {
        font-size: 5vw;
    }

    #ingredients p {
        font-size: 4vw;
        margin-left: 5px;
    }

    #nbrdepers {
        font-size: 5vw;
        text-align: center;
    }

    #recette {
        font-size: 4vw;
        padding: 10px;
    }

    img {
        width: 80%;
        margin: 10px auto;
    }

    .vertical-line {
        display: none !important;
    }

    .ligne_ondulée {
        display: none !important;
    }  
    
    .zone {
        width: 100vw;
        height: 100vh;
        position: relative;
    }

    .zone-inner {
        width: 100%;
        height: 100%;
        position: relative;
    }

    .widget {
        width: 30vw !important;
        height: 30vw !important;
        position: absolute !important;
    }

    .widget img {
        width: 100%;
        height: auto;
        display: block;
    }

    .widget-inner {
        width: 100%;
        height: 100%;
    }

    /* Repositionnement des widgets pour qu’ils soient visibles */
    #menu_champignon {
        top: 5%;
        left: 5%;
    }
    #menu_chorizo {
        top: 5%;
        left: 40%;
    }
    #menu_banane {
        top: 5%;
        left: 75%;
    }
    #menu_flocons_davoine {
        top: 40%;
        left: 5%;
    }
    #menu_gingembre {
        top: 40%;
        left: 40%;
    }
    #menu_pdt {
        top: 40%;
        left: 75%;
    }
    #menu_pdn {
        top: 75%;
        left: 20%;
    }
    #menu_oeufs {
        top: 75%;
        left: 55%;
    }


}