.formes-container {
    position: relative;
    min-height: 95vh;
    min-width: 100%;
    /* border: solid #efad20;
    border-width: 1em; */
    /* margin-top: 10px; */
}

.ast-single-post .entry-content a {
    text-decoration: none;
}

.formes {
    font-family:"Playfair Display", serif;
    font-style: italic;
    text-align: center;
    align-content: center;
    flex-wrap: wrap;
    box-shadow: 0 0 20px #15382886;
    cursor: pointer;
    position: absolute;  
}

.formes a {
    display: block;
    width: 100%;
    height: 100%;
    position: relative;
    text-decoration: none;
}

.formes-icon,
.formes-title {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    transition: opacity 0.5s ease;
    text-align: center;
    font-size: 2em;

}


.formes-icon {
    max-width: 100%;
    max-height: 100%;
    transition: opacity 0.5s ease;
    align-content: center;
    align-items: center;
    justify-content: center;
    z-index: 1;
}

.formes:hover .formes-icon {
    opacity: 0;
}


.formes-title {
    opacity: 0;
}

.formes:hover .formes-title {
    opacity: 1;
}

.formes:hover {
    transition: all 0.8s ease;
    background-color: transparent !important;
    box-shadow: 0 0 0;
    transform:scale(0.8);

}

.formes > span {
	width: 100%;
	user-select: none;
}


#rectangle{
    width: 450px;
    height: 200px;
    background-color: #89673A;
}

#square{
    background-color: #00788E;
    width: 250px;
    height: 250px;
}

#poly1{
    background-color: #FCF5E7;
    width: 250px;
    height: 400px;
    border-radius : 0% 0% 0% 144px;
}
  
#poly2{
    background-color: #FFA9A6;
    width: 250px;
    height: 350px;
    border-radius : 206px 206px 0px 0px;
}

#poly3{
    background-color: #153828;
    width: 200px;
    height: 350px;
    border-radius : 153px 0px 0px 0px;
}


  /*responsive*/
  @media (min-width:1200px) {
    .formes {
        transition: all 0.3s ease; /* Ajoute une transition fluide lors du changement de taille */
        }
    
    /* position formes*/
    #rectangle { left:30%; top:0%; }
    #square { left:53%; top:30%; }
    #poly1 { left:0%; top:20%; } 
    #poly2 { left:27%; top:55%; }
    #poly3 { left:82%; top: 52%; }
  }



@media(max-width:1200px){
    .formes-container {
         padding-bottom: 0px; 
     } /* Réduire l'espace en bas sur mobile */
     
    #square,#poly1,#poly2,#poly3{
      margin:20px auto;
    }    
    
    #rectangle {
        margin:0px;
        width: 40%;
        height: auto;
        aspect-ratio: 2.25/1;
        left:30%;
        top:0%;
    }

    #square {
        width: 25%;
        aspect-ratio: 1/1;
        height: auto;
        left:53%;
        top:30%;
    }

    #poly1 {
        width: 25%;
        height: auto;
        aspect-ratio: 1/1.6;
        border-radius : 0% 0% 0% 84px;
        left:0%;
        top:20%;
    }
   

    #poly2 {
        width: 25%;
        height: auto;
        aspect-ratio: 1/1.4;
        left:27%;
        top:60%;
        }      
    

    #poly3 {
        width: 25%;
        height: auto;
        aspect-ratio: 1/1.52;
        border-radius : 92px 0% 0% 0% ;
        left:78%;
        top: 52%;
    }
}



@media (max-width: 720px) {
    .formes-container {
        min-height: 85vh;
        padding-bottom: 0px; 
     } /* Réduire l'espace en bas sur mobile */
     

    #square,#poly1,#poly2,#poly3{
      /* display: flex; */
      margin:20px auto;
    }    
    
    #rectangle {
        margin:0px;
        width: 60%;
        height: auto;
        aspect-ratio: 2.25/1;
        left:20%;
        top:0%;
    }

    #square {
        width: 40%;
        aspect-ratio: 1/1;
        height: auto;
        left:5%;
        top:22%;
    }

    #poly1 {
        width: 40%;
        height: auto;
        aspect-ratio: 1/1.6;
        border-radius : 0% 0% 0% 84px;
        left:55%;
        top:18%;
    }
   
    #poly2 {
        width: 40%;
        height: auto;
        aspect-ratio: 1/1.4;
        left:5%;
        top:50%;       
    }

    #poly3 {
        width: 40%;
        height: auto;
        aspect-ratio: 1/1.75;
        border-radius : 92px 0% 0% 0% ;
        left:55%;
        top:55%;
    }
}

@media (max-width: 480px) {
    #square,#poly1,#poly2,#poly3{
        margin:20px auto;
    }       
}


/*Animation lettres*/
.letter {
    position: absolute;
    transition: all 0.6s ease;
    width: 8vw;
    height: auto;  
}

.cls-1 {
        fill: #0097B2;
        stroke: #0097B2;
        stroke-miterlimit: 10;
        stroke-width: .25px;
      }

/* Position initiale : ton style actuel avec top/left */
#M {top:0%;  left:20%; }
#A1 {top:35%; left:30%; }
#N {top:35%; left:85%;}
#A2 {top:12%;left:3%;}
#Z {top:80%;left:10%;}
#A3 {top:70%;left:70%;}
#E1 {top:75%;left:20%;}
#L {top:45%;left:48%; }
#E2 {top:10%;left:95%;}

/* Position finale en bas quand le container a la classe `assembled` */
.formes-container.assembled #M  {bottom:10px;left: 6%; top:auto; }
.formes-container.assembled #A1 {bottom: 1px;left: 20%; top: auto; }
.formes-container.assembled #N {bottom: 1px;left: 30%; top: auto; }
.formes-container.assembled #A2 {bottom: 1px;left: 40%; top: auto; }
.formes-container.assembled #Z {bottom: 1px;left: 50%; top: auto; }
.formes-container.assembled #A3 {bottom: 1px;left: 60%; top: auto; }
.formes-container.assembled #E1 {bottom: 1px;left: 70%; top: auto; }
.formes-container.assembled #L {bottom: 10px; left: 80%; top: auto; }
.formes-container.assembled #E2 { bottom: 1px;left: 88%; top: auto; }



/* Zoom */
.formes-container.zoomed .letter {
    transform: scale(1.4);
}