@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_Archi {
    margin-bottom: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
}

#searchInput_Archi {
    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_Archi{
    padding-top: 20px;
    top: 150px;
    width: 80%;
    height: 100%;
    margin: 0 auto; /* Cette ligne centre l'élément horizontalement */
}

.carte_Archi {
    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_Archi::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_Archi::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_Archi:hover::before {
    border-color: transparent rgba(255, 255, 255, 1);
    transition: border-color 2s ease 0.3s;
}

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

#C1_Archi{
    z-index: 1;
    background: linear-gradient(45deg, #9a88ff, #5630ff);
    box-shadow:  50px -50px 100px rgba(255, 255, 255, 0),
                 0px 80px 80px 30px #d0bcff;
}


#C2_Archi{
    z-index: 2;
    background: linear-gradient(45deg, #8a88ff, #3045ff);
    box-shadow:  50px -50px 100px #ffffff00,
                 0px 80px 80px 30px #bcc3ff;
    top:-140px;
}

#C3_Archi{
    z-index: 3;    
    background: linear-gradient(45deg, #88a4ff, #3067ff);
    box-shadow:  50px -50px 100px #ffffff00,
                 0px 80px 80px 30px #bcd9ff;
    top:-280px;
}

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

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

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

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

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

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

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



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


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


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


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


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


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


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


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


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


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


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


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


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

/* Carte New Archi */



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

.NOM_Archi {
    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 */
}

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

.buttonArchi 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;
}

.buttonArchi 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% */
    }
  }
  
  #sortButtonARCHI_A{
    background: linear-gradient(90deg, #7c8ef7, #7c8ef7be, #7c8ef78a, #7c8ef74b);
}

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

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

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

#sortButtonARCHI_NEW_Mobil{
    background: #a0a5af;
}

#sortButtonARCHI_NEW_Other{
    background: #a0a5af;
}

.Nouveaux_architecte{
position: absolute;
    background-color: #a0a5af;
    height: 15px;
    width: 100%;
    left: 0px;
    top:1456px;
    z-index: 21;
}



/*#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;
    }

        .buttonArchi {
          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;
        }

        .buttonArchi > * {
            justify-self: center;
          }
          
          .buttonArchi > :nth-child(5) {
            grid-column: span 2;
          }

          .Nouveaux_architecte{
            position: absolute;
                background-color: #a0a5af;
                height: 15px;
                width: 100%;
                left: 0px;
                top:1552px;
                z-index: 21;
            }
            


    
  }

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

    .Nouveaux_architecte{
        position: absolute;
            background-color: #a0a5af;
            height: 15px;
            width: 100%;
            left: 0px;
            top:1121px;
            z-index: 21;
        }        

    .NOM_Archi {
        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_Archi{
        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 */
    
    }

    #C1_Archi{
        z-index: 1;
        background: linear-gradient(45deg, #9a88ff, #5630ff);
        box-shadow:  50px -50px 100px rgba(255, 255, 255, 0),
                     0px 80px 80px 30px #d0bcff;
    }
    
    
    #C2_Archi{
        z-index: 2;
        background: linear-gradient(45deg, #8a88ff, #3045ff);
        box-shadow:  50px -50px 100px #ffffff00,
                     0px 80px 80px 30px #bcc3ff;
        top:-160px;
    }
    
    #C3_Archi{
        z-index: 3;    
        background: linear-gradient(45deg, #88a4ff, #3067ff);
        box-shadow:  50px -50px 100px #ffffff00,
                     0px 80px 80px 30px #bcd9ff;
        top:-320px;
    }
    
    /* Carte 4 */
    #C4_Archi {
        z-index: 4;
        background: linear-gradient(45deg, #0059b3, #0079e6);
        box-shadow:  50px -50px 100px rgba(255, 255, 255, 0),
                     0px 80px 80px 30px #80BFFF;
        top: -480px; /* Ajustez la position verticale */
    }
    
    /* Carte 5 */
    #C5_Archi {
        z-index: 5;
        background: linear-gradient(45deg, #0079e6, #0099ff);
        box-shadow:  50px -50px 100px rgba(255, 255, 255, 0),
                     0px 80px 80px 30px #80BFFF;
        top: -640px; /* Ajustez la position verticale */
    }
    
    /* Carte 6 */
    #C6_Archi {
        z-index: 6;
        background: linear-gradient(45deg, #0099ff, #00b3ff);
        box-shadow:  50px -50px 100px rgba(255, 255, 255, 0),
                     0px 80px 80px 30px #80BFFF;
        top: -800px; /* Ajustez la position verticale */
    }
    
    /* Carte 7 */
    #C7_Archi {
        z-index: 7;
        background: linear-gradient(45deg, #00b3ff, #00ccff);
        box-shadow:  50px -50px 100px rgba(255, 255, 255, 0),
                     0px 80px 80px 30px #80BFFF;
        top: -960px; /* Ajustez la position verticale */
    }
    
    /* Carte 8 */
    #C8_Archi {
        z-index: 8;
        background: linear-gradient(45deg, #00ccff, #00e6ff);
        box-shadow:  50px -50px 100px rgba(255, 255, 255, 0),
                     0px 80px 80px 30px #80BFFF;
        top: -1120px; /* Ajustez la position verticale */
    }
    
    /* Carte 9 */
    #C9_Archi {
        z-index: 9;
        background: linear-gradient(45deg, #00e6ff, #00ffcc);
        box-shadow:  50px -50px 100px rgba(255, 255, 255, 0),
                     0px 80px 80px 30px #80BFFF;
        top: -1280px; /* Ajustez la position verticale */
    }

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



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


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


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


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


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


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


/* Carte 17 */
#C17_Archi {
    z-index: 17;
    background: linear-gradient(45deg, #d7fcdc, #d7fcdc);
    box-shadow:  50px -50px 100px rgba(255, 255, 255, 0),
                 0px 80px 80px 30px #80BFFF;
    top: -2560px; /* Ajustez la position verticale */
}


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


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


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


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


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


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

/* Carte New Archi ajust */

    
    
  }


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