body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
    background-color: #f4f4f4;
}

header {
    background-color: #333;
    color: #fff;
    padding: 1rem;
    text-align: center;
}

main {
    padding: 1rem;
    margin-bottom: 7.5rem;
}

footer {
    background-color: #333;
    color: #fff;
    text-align: center;
    padding: 1rem;
    position: fixed;
    width: 100%;
    bottom: 0;
}

.page-turn {
    transform: rotateY(-90deg);
    transform-origin: left;
    transition: transform 1s ease-in-out;
}

.page-turn.visible {
    transform: rotateY(0);
}

.fade-in {
    opacity: 0;
    transition: opacity 2s ease-in-out;
}

.fade-in.visible {
    opacity: 1;
}

.project {
    margin: 1rem auto;
    display: block;
    text-align: center;
    border: 1px solid transparent; /* Bordure initialement transparente */
    border-radius: 8px; /* Arrondir les angles */
    position: relative;
    overflow: hidden;
    opacity: 0; /* Initialement caché */
    transform: translateY(20px); /* Déplacement initial */
    transition: opacity 0.5s ease-in-out, transform 0.5s ease-in-out; /* Transition pour l'effet de chargement */
    width: 90%; /* Assurer que les vignettes s'affichent correctement sur les petits écrans */
}

.project.visible {
    opacity: 1; /* Visible */
    transform: translateY(0); /* Position finale */
}

.project:hover {
    transform: scale(1.05); /* Effet de zoom */
    transition: transform 0.3s ease-in-out; /* Transition pour l'effet de zoom */
}

.project::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 1px solid #ddd;
    border-radius: 8px;
    box-sizing: border-box;
    clip-path: polygon(0 0, 0 0, 0 0, 0 0); /* Initialement caché */
    transition: clip-path 3s ease-in-out; /* Transition pour le tracé */
}

.project.visible::before {
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%, 0 0); /* Tracé complet */
}

.project-banner {
    position: relative;
    width: 100%; /* Adapter la taille de l'image */
    height: 150px; /* Adapter la taille de l'image */
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    padding: 0; /* Supprimer le padding */
}

.project-overlay {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: rgba(0, 0, 0, 0.5);
    color: #fff;
    text-align: center;
    padding: 0.5rem;
    border-radius: 8px; /* Arrondir les angles de l'overlay */
}

.project-overlay h3 {
    margin: 0;
}

#projects {
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* Larger screens */
@media (min-width: 600px) {
    main {
        padding: 2rem;
    }

    .project-banner {
        height: 200px;
    }

    .project-overlay {
        padding: 1rem;
    }
}

@media (min-width: 900px) {
    header, footer, main {
        padding: 2rem;
    }

    #projects-title {
        width: 100%;
        text-align: left; /* Décaler sur la gauche */
        margin-bottom: 2rem; /* Ajouter un espace en dessous du titre */
        font-size: 2rem; /* Augmenter la taille de la police */
        color: #333; /* Changer la couleur du texte */
        text-transform: uppercase; /* Mettre le texte en majuscules */
        letter-spacing: 2px; /* Ajouter un espacement entre les lettres */
        animation: fadeInSlideUp 1s ease-in-out; /* Ajouter une animation */
        position: relative; /* Pour positionner le soulignement */
    }

    #projects-title::after {
        content: '';
        position: absolute;
        left: 0;
        bottom: -10px; /* Positionner le soulignement en dessous du texte */
        width: 50%;
        height: 4px;
        background: linear-gradient(to right, #333 0%, #333 50%, transparent 100%); /* Dégradé pour l'effet visuel */
    }

    @keyframes fadeInSlideUp {
        0% {
            opacity: 0;
            transform: translateY(20px);
        }
        100% {
            opacity: 1;
            transform: translateY(0);
        }
    }

    .project:hover {
        transform: scale(1.05); /* Effet de zoom */
        transition: transform 0.3s ease-in-out; /* Transition pour l'effet de zoom */
    }
   

    .project-banner {
        margin-bottom: 2rem;
        display: block;
        padding: 1.5rem; 
    }

    .project-overlay {
        padding: 1.5rem;
        border-radius: 8px; /* Arrondir les angles de l'overlay */
    }
}

#projects-title {
    width: 100%;
    text-align: left; /* Décaler sur la gauche */
    margin-bottom: 2rem; /* Ajouter un espace en dessous du titre */
    font-size: 2rem; /* Augmenter la taille de la police */
    color: #333; /* Changer la couleur du texte */
    text-transform: uppercase; /* Mettre le texte en majuscules */
    letter-spacing: 2px; /* Ajouter un espacement entre les lettres */
    animation: fadeInSlideUp 1s ease-in-out; /* Ajouter une animation */
    position: relative; /* Pour positionner le soulignement */
}

#projects-title::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: -10px; /* Positionner le soulignement en dessous du texte */
    width: 50%;
    height: 4px;
    background: linear-gradient(to right, #333 0%, #333 50%, transparent 100%); /* Dégradé pour l'effet visuel */
}

/* Définir l'animation */
@keyframes fadeInSlideUp {
    0% {
        opacity: 0;
        transform: translateY(20px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

#about {
    background: #fff; /* Couleur de fond de l'encart */
    padding: 2rem; /* Ajouter du padding à l'encart */
    border-radius: 8px; /* Arrondir les angles de l'encart */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Ajouter un ombrage léger */
    margin-bottom: 2rem; /* Ajouter un espace en dessous de l'encart */
}

#about-details {
    background: #fff; /* Couleur de fond de l'encart */
    padding: 2rem; /* Ajouter du padding à l'encart */
    border-radius: 8px; /* Arrondir les angles de l'encart */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Ajouter un ombrage léger */
    margin-bottom: 2rem; /* Ajouter un espace en dessous de l'encart */
    transition: transform 2s ease-in-out, max-height 2s ease-in-out; /* Transition douce pour l'effet d'ascenseur */
}

#about-details:hover {
    transform: translateY(-10px); /* Effet de flottaison au passage de la souris */
}

#about p {
    text-align: justify; /* Mettre le texte en justify */
}

#about-details {
    display: block; /* Assurer que les balises <p> s'affichent les unes sous les autres */
    transition: max-height 5s ease-in-out; /* Transition douce pour l'effet d'ascenseur */
}

#about img {
    width: 100%; /* Occuper au moins 50% de la largeur de l'écran sur mobile */
    max-width: 300px; /* Limiter la taille maximale de l'image pour les petits écrans */
    height: auto; /* Maintenir le ratio de l'image */
    display: inline-block; /* Afficher l'image en ligne avec le texte */
    vertical-align: middle; /* Aligner verticalement l'image avec le texte */
    margin: 0; /* Supprimer les marges */
}

.close-button {
    position: absolute;
    top: 10px;
    right: 10px;
    background: none;
    border: none;
    font-size: 1.5rem;
    cursor: pointer;
}

#toggle-about {
    background-color: #333;
    color: #fff;
    border: none;
    padding: 0.5rem 1rem;
    border-radius: 5px;
    cursor: pointer;
    font-size: 1rem;
    transition: background-color 0.3s ease, transform 0.3s ease;
}

#toggle-about:hover {
    background-color: #555;
    transform: scale(1.05);
}

@media (min-width: 600px) {
    main {
        padding: 2rem;
    }

    .project-banner {
        height: 200px;
    }

    .project-overlay {
        padding: 1rem;
    }

    #about img {
        max-width: 400px; /* Ajuster la taille maximale de l'image pour les écrans plus larges */
    }
}

@media (min-width: 900px) {
    header, footer, main {
        padding: 2rem;
    }

    #projects-title {
        width: 100%;
        text-align: left; /* Décaler sur la gauche */
        margin-bottom: 2rem; /* Ajouter un espace en dessous du titre */
        font-size: 2rem; /* Augmenter la taille de la police */
        color: #333; /* Changer la couleur du texte */
        text-transform: uppercase; /* Mettre le texte en majuscules */
        letter-spacing: 2px; /* Ajouter un espacement entre les lettres */
        animation: fadeInSlideUp 1s ease-in-out; /* Ajouter une animation */
        position: relative; /* Pour positionner le soulignement */
    }

    #projects-title::after {
        content: '';
        position: absolute;
        left: 0;
        bottom: -10px; /* Positionner le soulignement en dessous du texte */
        width: 50%;
        height: 4px;
        background: linear-gradient(to right, #333 0%, #333 50%, transparent 100%); /* Dégradé pour l'effet visuel */
    }

    @keyframes fadeInSlideUp {
        0% {
            opacity: 0;
            transform: translateY(20px);
        }
        100% {
            opacity: 1;
            transform: translateY(0);
        }
    }

    .project:hover {
        transform: scale(1.05); /* Effet de zoom */
        transition: transform 0.3s ease-in-out; /* Transition pour l'effet de zoom */
    }
   

    .project-banner {
        margin-bottom: 2rem;
        display: block;
        padding: 1.5rem; 
    }

    .project-overlay {
        padding: 1.5rem;
        border-radius: 8px; /* Arrondir les angles de l'overlay */
    }

    #about img {
        max-width: 500px; /* Ajuster la taille maximale de l'image pour les écrans encore plus larges */
    }
}