@font-face {
    font-family: 'Chal';
    src: url("../../../News/mytupi.ttf") format('truetype');
    font-style: normal;
    font-weight: 400;
  }
  
#pages-container2{
	padding: 2.5vw 0vw 0px 0vw;
}

main{
    font-family: 'Chal';
}

#search-container_Design {
    margin-bottom: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
}

#searchInput_Design {
    padding: 8px;
    margin-right: 10px;
    border-radius: 30px;
    border: 1  ;
}

button {
    text-decoration: none;
    font-size: 15px;
    width: 5.7em;
    height: 2em;
    line-height: 2em;
    text-align: center;
    background-size: 300%;
    border-radius: 30px;
    border: 0;
    background-color: #ffffff00;
    font-weight:700;
    font-size: 1rem;
    color: #000000;
    z-index: 2;
}

.Porte_Design{
    padding-top: 20px;
    top: 150px;
    width: 80%;
    height: 100%;
    margin: 0 auto; /* Cette ligne centre l'élément horizontalement */
}

.carte_Design {
    height: 200px;
    width: 100%;
    border-radius: 25px;
    position: relative;
    overflow: hidden; /* Assurez-vous que le coin plié ne dépasse pas la carte */
    transition: padding-bottom 0.5s ease, transform 0.2s ease; /* Ajoutez la transition ici */

    /* Styles pour l'effet de coin plié */
    cursor: pointer; /* Changez le curseur au survol pour indiquer que la carte est cliquable */
}

.carte_Design::before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 80px 50px 0;
    border-color: transparent rgba(255, 255, 255, 0);
    transition: width 0s ease, height 0s ease, border-color 0s ease;
}

.carte_Design::after {
    content: '+';
    position: absolute;
    top: 1px; /* Ajustez la position verticale selon vos besoins */
    right: 13px; /* Ajustez la position horizontale pour placer le "+" à droite dans le coin plié */
    font-size: 30px;
    font-weight: bold;
    color: #000;
    transition: opacity 0.3s ease 0.3s; /* Ajoutez une transition pour le rendre visible de manière fluide */
    opacity: 0; /* Rend le "+" invisible au départ */
}

.carte_Design:hover::before {
    border-color: transparent rgba(255, 255, 255, 1);
    transition: border-color 2s ease 0.3s;
}

.carte_Design:hover::after {
    opacity: 1; /* Rend le "+" visible au survol */
}


/* Carte 1 */
#C1_Design {
    z-index: 1;
    background: linear-gradient(45deg, #c979a9, #c979a9);
    box-shadow:  50px -50px 100px rgba(255, 255, 255, 0),
    0px 80px 80px 30px #c979a9;
}


/* Carte 2 */
#C2_Design {
    z-index: 2;
    background: linear-gradient(45deg, #e6e8d2, #e6e8d2);
    box-shadow:  50px -50px 100px rgba(255, 255, 255, 0),
    0px 80px 80px 30px #e6e8d2;
    top: -140px; /* Ajustez la position verticale */
}


/* Carte 3 */
#C3_Design {
    z-index: 3;
    background: linear-gradient(45deg, #f6110b, #f6110b);
    box-shadow:  50px -50px 100px rgba(255, 255, 255, 0),
    0px 80px 80px 30px #f6110b;
    top: -280px; /* Ajustez la position verticale */
}


/* Carte 4 */
#C4_Design {
    z-index: 4;
    background: linear-gradient(45deg, #2f543f, #2f543f);
    box-shadow:  50px -50px 100px rgba(255, 255, 255, 0),
    0px 80px 80px 30px #2f543f;
    top: -420px; /* Ajustez la position verticale */
}


/* Carte 5 */
#C5_Design {
    z-index: 5;
    background: linear-gradient(45deg, #d6d69b, #d6d69b);
    box-shadow:  50px -50px 100px rgba(255, 255, 255, 0),
    0px 80px 80px 30px #d6d69b;
    top: -560px; /* Ajustez la position verticale */
}


/* Carte 6 */
#C6_Design {
    z-index: 6;
    background: linear-gradient(45deg, #9187ba, #9187ba);
    box-shadow:  50px -50px 100px rgba(255, 255, 255, 0),
    0px 80px 80px 30px #9187ba;
    top: -700px; /* Ajustez la position verticale */
}


/* Carte 7 */
#C7_Design {
    z-index: 7;
    background: linear-gradient(45deg, #d10547, #d10547);
    box-shadow:  50px -50px 100px rgba(255, 255, 255, 0),
    0px 80px 80px 30px #d10547;
    top: -840px; /* Ajustez la position verticale */
}


/* Carte 8 */
#C8_Design {
    z-index: 8;
    background: linear-gradient(45deg, #ae4198, #ae4198);
    box-shadow:  50px -50px 100px rgba(255, 255, 255, 0),
    0px 80px 80px 30px #ae4198;
    top: -980px; /* Ajustez la position verticale */
}


/* Carte 9 */
#C9_Design {
    z-index: 9;
    background: linear-gradient(45deg, #4f6849, #4f6849);
    box-shadow:  50px -50px 100px rgba(255, 255, 255, 0),
    0px 80px 80px 30px #4f6849;
    top: -1120px; /* Ajustez la position verticale */
}


/* Carte 10 */
#C10_Design {
    z-index: 10;
    background: linear-gradient(45deg, #109fc5, #109fc5);
    box-shadow:  50px -50px 100px rgba(255, 255, 255, 0),
    0px 80px 80px 30px #109fc5;
    top: -1260px; /* Ajustez la position verticale */
}


/* Carte 11 */
#C11_Design {
    z-index: 11;
    background: linear-gradient(45deg, #010f16, #010f16);
    box-shadow:  50px -50px 100px rgba(255, 255, 255, 0),
    0px 80px 80px 30px #010f16;
    top: -1400px; /* Ajustez la position verticale */
}


/* Carte 12 */
#C12_Design {
    z-index: 12;
    background: linear-gradient(45deg, #a1b212, #a1b212);
    box-shadow:  50px -50px 100px rgba(255, 255, 255, 0),
    0px 80px 80px 30px #a1b212;
    top: -1540px; /* Ajustez la position verticale */
}


/* Carte 13 */
#C13_Design {
    z-index: 13;
    background: linear-gradient(45deg, #111e2c, #111e2c);
    box-shadow:  50px -50px 100px rgba(255, 255, 255, 0),
    0px 80px 80px 30px #111e2c;
    top: -1680px; /* Ajustez la position verticale */
}


/* Carte 14 */
#C14_Design {
    z-index: 14;
    background: linear-gradient(45deg, #7fd821, #7fd821);
    box-shadow:  50px -50px 100px rgba(255, 255, 255, 0),
    0px 80px 80px 30px #7fd821;
    top: -1820px; /* Ajustez la position verticale */
}


/* Carte 15 */
#C15_Design {
    z-index: 15;
    background: linear-gradient(45deg, #8895a5, #8895a5);
    box-shadow:  50px -50px 100px rgba(255, 255, 255, 0),
                 0px 80px 80px 30px #8895a5;
    top: -1960px; /* Ajustez la position verticale */
}


/* Carte 16 */
#C16_Design {
    z-index: 16;
    background: linear-gradient(45deg, #118e32, #118e32);
    box-shadow:  50px -50px 100px rgba(255, 255, 255, 0),
                 0px 80px 80px 30px #118e32;
    top: -2100px; /* Ajustez la position verticale */
}

/* Carte New Design */



#i-carte_Design{
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 10px;
}

.NOM_Design {
    font-weight: bold;
    font-size: 30px;
    margin: 0 auto; /* Centre le nom horizontalement */
    padding-left: 10%;
}

.Pays {
    font-weight: bold;
    font-size: 15px;
    padding-right: 5%;
    padding-top: 2px;
}

/* Élément factice pour pousser le pays à droite */
.Pays::after {
    content: "";
    flex-grow: 1; /* Pousse le pays vers la droite */
}

.date_naissance{
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 10px;
    font-weight: bold;
    font-size: 20px;
}

.Naissance {
    font-weight: bold;
    padding-left: 15%;
}

.Décès {
    font-weight: bold;
    padding-right: 15%;
}

.Style {
    display: flex;
    justify-content: start;
    align-items: center;
    font-weight: bold;
    font-size: 20px;
    padding-top: 10px;
    padding-left: 5%;
}

.Matériaux {
    display: flex;
    justify-content: end;
    align-items: center;
    font-weight: bold;
    font-size: 20px;
    padding-top: 10px;
    padding-right: 5%;
}

.Influence {
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: bold;
    font-size: 20px;
    padding-top: 10px;
}

.zoomed-card {
    transform: scale(1.1); /* Zoom de 110% */
    z-index: 4; /* Assurez-vous que la carte zoomée est au-dessus des autres */
}

.buttonDesign {
    display: flex;
    flex-wrap: nowrap;
    flex-direction: row;
    justify-content: space-between;
    margin-left: 15%;
    margin-right: 15%;
}

.buttonDesign button{
    text-decoration: none;
    font-size: 15px;
    width: 6.7em;
    height: 2em;
    line-height: 2em;
    text-align: center;
    background-size: 300%;
    border-radius: 30px;
    border: 0;
    background-color: #ffffff;
    font-weight:700;
    font-size: 1rem;
    color: #000000;
    z-index: 2;
}

.buttonDesign button:hover {
    animation: ani2 8s linear infinite;
    color:white;
  }

  @keyframes ani2 {
    0% {
        transform: scale(1); /* Zoom de 110% */
    }
  
    20% {
        transform: scale(1.3); /* Zoom de 110% */
    }
  }
  
  #sortButtonDesign_A{
    background: linear-gradient(90deg, #7c8ef7, #7c8ef7be, #7c8ef78a, #7c8ef74b);
}

#resetButtonDesign{
    background: linear-gradient(90deg, #7c8ef7a4, #7c8ef794, #9ba9f750, #c5ccf528);
}

#sortButtonDesign_Z{
    background: linear-gradient(90deg, #95fd99, #4bd056, #22a522, #169916);
}

#sortButtonDesign_Birthdate{
    background: linear-gradient(90deg, #7cf7864b, #7cf7868a, #7cf786be, #7cf786);
}

#sortButtonDESIGN_NEW_Mobil{
    background: #8895a5;
}

#sortButtonDESIGN_NEW_Other{
    background: #8895a5;
}

.Nouveaux_designer{
position: absolute;
    background-color: #8895a5;
    height: 15px;
    width: 100%;
    left: 0px;
    top:1031px;
    z-index: 14;
}



/*#reverseButton{
    background: linear-gradient(90deg,#7c8ef750,#7c8ef728,#7cf78628,#7cf78650);
}*/


@media screen and (max-width: 800px) {
    .Style {
        display: flex;
        justify-content: center;
        align-items: center;
        font-weight: bold;
        font-size: 20px;
        padding-top: 10px;
        padding-left: 0%;
    }
    
    .Matériaux {
        display: flex;
        justify-content: center;
        align-items: center;
        font-weight: bold;
        font-size: 20px;
        padding-top: 10px;
        padding-right: 0%;
    }
    
    .Influence {
        display: flex;
        justify-content: center;
        align-items: center;
        font-weight: bold;
        font-size: 20px;
        padding-top: 10px;
    }

    .buttonDesign {
        display: grid;
        flex-direction: column;
        margin-left: 15%;
        margin-right: 15%;
        flex-wrap: wrap;
        align-items: center;
        justify-items: center;
        grid-template-columns: repeat(2, 1fr);
        grid-gap: 20px;
        margin-bottom: 2px;
      }
    
      .buttonDesign > * {
        justify-self: center;
      }
      
      .buttonDesign > :nth-child(5) {
        grid-column: span 2;
      }

      .Nouveaux_designer{
        position: absolute;
            background-color: #8895a5;
            height: 15px;
            width: 100%;
            left: 0px;
            top:1131px;
            z-index: 14;
        }

  }


  
@media screen and (max-width: 600px) {

    .Nouveaux_designer{
        position: absolute;
            background-color: #8895a5;
            height: 15px;
            width: 100%;
            left: 0px;
            top:840px;
            z-index: 14;
        }  

    .NOM_Design {
        font-weight: bold;
        font-size: 22px;
        margin: 0 auto; /* Centre le nom horizontalement */
        padding-left: 5%;
    }

    .Pays {
        font-weight: bold;
        font-size: 10px;
        padding-right: 5%;
        padding-top: 2px;
    }

    .Style {
        display: flex;
        justify-content: center;
        align-items: center;
        font-weight: bold;
        font-size: 12px;
        padding-top: 15px;
    }
    
    .Matériaux {
        display: flex;
        justify-content: center;
        align-items: center;
        font-weight: bold;
        font-size: 12px;
        padding-top: 15px;
    }
    
    .Influence {
        display: flex;
        justify-content: center;
        align-items: center;
        font-weight: bold;
        font-size: 12px;
        padding-top: 15px;
    }

    .date_naissance{
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding-top: 30px;
        font-weight: bold;
        font-size: 12px;
    }


    .carte_Design{
        height: 200px;
        width: 100%;
        border-radius: 25px;
        position: relative;
        transition: padding-bottom 0.5s ease; /* Ajoutez la transition ici */
        transition-delay: 0.1s; /* Ajoutez un délai pour une transition plus fluide */
        transition: transform 0.2s ease; /* Ajoutez une transition de zoom */
    
    }



/* Carte 1 */
#C1_Design {
    z-index: 1;
    background: linear-gradient(45deg, #c979a9, #c979a9);
    box-shadow:  50px -50px 100px rgba(255, 255, 255, 0),
                 0px 80px 80px 30px #c979a9;
}


/* Carte 2 */
#C2_Design {
    z-index: 2;
    background: linear-gradient(45deg, #e6e8d2, #e6e8d2);
    box-shadow:  50px -50px 100px rgba(255, 255, 255, 0),
                 0px 80px 80px 30px #e6e8d2;
    top: -160px; /* Ajustez la position verticale */
}


/* Carte 3 */
#C3_Design {
    z-index: 3;
    background: linear-gradient(45deg, #f6110b, #f6110b);
    box-shadow:  50px -50px 100px rgba(255, 255, 255, 0),
                 0px 80px 80px 30px #f6110b;
    top: -320px; /* Ajustez la position verticale */
}


/* Carte 4 */
#C4_Design {
    z-index: 4;
    background: linear-gradient(45deg, #2f543f, #2f543f);
    box-shadow:  50px -50px 100px rgba(255, 255, 255, 0),
                 0px 80px 80px 30px #2f543f;
    top: -480px; /* Ajustez la position verticale */
}


/* Carte 5 */
#C5_Design {
    z-index: 5;
    background: linear-gradient(45deg, #d6d69b, #d6d69b);
    box-shadow:  50px -50px 100px rgba(255, 255, 255, 0),
                 0px 80px 80px 30px #d6d69b;
    top: -640px; /* Ajustez la position verticale */
}


/* Carte 6 */
#C6_Design {
    z-index: 6;
    background: linear-gradient(45deg, #9187ba, #9187ba);
    box-shadow:  50px -50px 100px rgba(255, 255, 255, 0),
                 0px 80px 80px 30px #9187ba;
    top: -800px; /* Ajustez la position verticale */
}


/* Carte 7 */
#C7_Design {
    z-index: 7;
    background: linear-gradient(45deg, #d10547, #d10547);
    box-shadow:  50px -50px 100px rgba(255, 255, 255, 0),
                 0px 80px 80px 30px #d10547;
    top: -960px; /* Ajustez la position verticale */
}


/* Carte 8 */
#C8_Design {
    z-index: 8;
    background: linear-gradient(45deg, #ae4198, #ae4198);
    box-shadow:  50px -50px 100px rgba(255, 255, 255, 0),
                 0px 80px 80px 30px #ae4198;
    top: -1120px; /* Ajustez la position verticale */
}


/* Carte 9 */
#C9_Design {
    z-index: 9;
    background: linear-gradient(45deg, #4f6849, #4f6849);
    box-shadow:  50px -50px 100px rgba(255, 255, 255, 0),
                 0px 80px 80px 30px #4f6849;
    top: -1280px; /* Ajustez la position verticale */
}


/* Carte 10 */
#C10_Design {
    z-index: 10;
    background: linear-gradient(45deg, #109fc5, #109fc5);
    box-shadow:  50px -50px 100px rgba(255, 255, 255, 0),
                 0px 80px 80px 30px #109fc5;
    top: -1440px; /* Ajustez la position verticale */
}


/* Carte 11 */
#C11_Design {
    z-index: 11;
    background: linear-gradient(45deg, #010f16, #010f16);
    box-shadow:  50px -50px 100px rgba(255, 255, 255, 0),
                 0px 80px 80px 30px #010f16;
    top: -1600px; /* Ajustez la position verticale */
}


/* Carte 12 */
#C12_Design {
    z-index: 12;
    background: linear-gradient(45deg, #a1b212, #a1b212);
    box-shadow:  50px -50px 100px rgba(255, 255, 255, 0),
                 0px 80px 80px 30px #a1b212;
    top: -1760px; /* Ajustez la position verticale */
}


/* Carte 13 */
#C13_Design {
    z-index: 13;
    background: linear-gradient(45deg, #111e2c, #111e2c);
    box-shadow:  50px -50px 100px rgba(255, 255, 255, 0),
                 0px 80px 80px 30px #111e2c;
    top: -1920px; /* Ajustez la position verticale */
}


/* Carte 14 */
#C14_Design {
    z-index: 14;
    background: linear-gradient(45deg, #7fd821, #7fd821);
    box-shadow:  50px -50px 100px rgba(255, 255, 255, 0),
                 0px 80px 80px 30px #7fd821;
    top: -2080px; /* Ajustez la position verticale */
}


/* Carte 15 */
#C15_Design {
    z-index: 15;
    background: linear-gradient(45deg, #8895a5, #8895a5);
    box-shadow:  50px -50px 100px rgba(255, 255, 255, 0),
                 0px 80px 80px 30px #8895a5;
    top: -2240px; /* Ajustez la position verticale */
}


/* Carte 16 */
#C16_Design {
    z-index: 16;
    background: linear-gradient(45deg, #118e32, #118e32);
    box-shadow:  50px -50px 100px rgba(255, 255, 255, 0),
                 0px 80px 80px 30px #118e32;
    top: -2400px; /* Ajustez la position verticale */
}

/* Carte New Design ajust */

    
    
  }


  @media screen and (max-width: 350px) {
    .my-custom-class {
        font-size: 18px !important;
        /* Ajoutez d'autres styles si nécessaire */
    }
  }