.hero {
    text-align: center;
    padding: 50px 30px;
    position: relative;
    overflow: hidden;
}

.hero p {
    margin-bottom: 20px;
    color: var(--texte-secondaire);
}

#nom {
    color: var(--texte);
    letter-spacing: -1px;
    margin-bottom: 12px;
}

#presentation {
    font-size: 22px;
    font-weight: 400;
    color: var(--accent);
    letter-spacing: 2px;
    text-transform: uppercase;
    text-shadow: 0 0 10px var(--ombre),
    0 0 25px var(--ombre);
}



.bouton {
    display: inline-block;
    padding: 10px 20px;
    background-color: var(--accent);
    color: #FFFFFF;
    border-radius: 4px;
    margin: 0 5px;
}

.bouton:hover {
    background-color: var(--accent-hover);
}


.bouton-secondaire {
    background-color: var(--fond);
    color: var(--accent);
    border: 1px solid var(--accent);
}

.bouton-secondaire:hover {
    background-color: var(--fond);
    color: var(--accent-hover);
    border-color: var(--accent-hover);
}

.hero-boutons {
    opacity: 1;
}


.zone {
    width: 100%;
    height: 500px;
}

canvas {
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
}


.technos {
    margin-top: 70px;
    margin-bottom: 70px;
    opacity: 0;
}

.technos ul {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.technos li {
    background-color: var(--technologie);
    padding: 5px 12px;
}


/* =========================
   APERÇU DES PROJETS
   ========================= */

.projects-title {
    opacity: 0;
    transform: translateY(50px);
}

.projects-title.visible {
    opacity: 1;
    transform: translateY(0);
}

.apercu-projets {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    width: 95vw;
    max-width: none;
    margin: 0 auto;
    padding: 16px 24px;
}


.carousel-conteneur {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    perspective: 1000px;
}

.carousel-3d {
    position: relative;
    width: 450px;
    height: 360px;
    margin: 60px auto;
    transform-style: preserve-3d;
}

.carte-3d {
    position: absolute;
    top: 0;
    left: 0;

    width: 450px;
    height: 360px;

    display: grid;
    grid-template-rows: 20% 80%;

    background-color: var(--carte);
    border: 1px solid var(--accent);
    border-radius: 8px;

    overflow: hidden;
    text-align: center;
    cursor: pointer;

    transition: transform 0.2s ease, opacity 0.5s ease;
}

.carte-3d h3 {
    display: flex;
    align-items: center;
    justify-content: center;

    margin: 0;
    padding: 8px;
    font-size: 18px;
}

.image-carte {
    width: 100%;
    height: 100%;
    min-height: 0;
    overflow: hidden;
}

.image-carte img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}



/*@media (max-width: 600px) {*/

/*    !* =========================*/
/*       STRUCTURE GÉNÉRALE*/
/*       ========================= *!*/

/*    .hero,*/
/*    .technos,*/
/*    .apercu-projets {*/
/*        width: calc(100% - 30px);*/
/*        max-width: 500px;*/
/*        margin-left: auto;*/
/*        margin-right: auto;*/
/*        text-align: center;*/
/*    }*/


/*    !* =========================*/
/*       HERO*/
/*       ========================= *!*/

/*    .hero {*/
/*        padding: 35px 0;*/
/*    }*/

/*    #presentation {*/
/*        font-size: 16px;*/
/*        letter-spacing: 1px;*/
/*        text-align: center;*/
/*    }*/

/*    .hero p {*/
/*        text-align: center;*/
/*        margin-bottom: 15px;*/
/*    }*/

/*    .hero-boutons {*/
/*        display: flex;*/
/*        flex-direction: column;*/
/*        align-items: center;*/
/*        justify-content: center;*/
/*        gap: 10px;*/
/*        width: 100%;*/
/*    }*/

/*    .bouton {*/
/*        width: 100%;*/
/*        max-width: 240px;*/
/*        margin: 0;*/
/*        text-align: center;*/
/*    }*/


/*    !* =========================*/
/*       ZONE THREE.JS*/
/*       ========================= *!*/

/*    .zone {*/
/*        width: 100%;*/
/*        height: 350px;*/
/*    }*/


/*    !* =========================*/
/*       TECHNOLOGIES*/
/*       ========================= *!*/

/*    .technos {*/
/*        margin-top: 40px;*/
/*        margin-bottom: 40px;*/
/*    }*/

/*    .technos ul {*/
/*        display: flex;*/
/*        justify-content: center;*/
/*        align-items: center;*/
/*        flex-wrap: wrap;*/
/*        gap: 8px;*/
/*    }*/

/*    .technos li {*/
/*        padding: 5px 10px;*/
/*    }*/


/*    !* =========================*/
/*       PROJETS*/
/*       ========================= *!*/

/*    .apercu-projets {*/
/*        padding: 16px 0;*/
/*    }*/

/*    .projects-title {*/
/*        text-align: center;*/
/*        width: 100%;*/
/*    }*/

/*    .carousel-conteneur {*/
/*        width: 100%;*/
/*        display: flex;*/
/*        align-items: center;*/
/*        justify-content: center;*/
/*    }*/

/*    .carousel-3d {*/
/*        width: 280px;*/
/*        height: 220px;*/
/*        margin: 35px auto;*/
/*    }*/

/*    .carte-3d {*/
/*        width: 280px;*/
/*        height: 220px;*/
/*        padding: 16px;*/
/*        text-align: center;*/

/*    }*/

/*    .carte-3d h3 {*/
/*        font-size: 20px;*/
/*        text-align: center;*/
/*    }*/

/*    .carte-3d p {*/
/*        font-size: 14px;*/
/*        line-height: 1.5;*/
/*        text-align: center;*/
/*    }*/

/*    .carousel-astuce {*/
/*        width: 100%;*/
/*        padding: 0 15px;*/
/*        text-align: center;*/
/*        font-size: 12px;*/
/*        line-height: 1.4;*/
/*    }*/