/* Global styles */
body {
    margin: 0;
    font-family: Arial, sans-serif;
    background-color: #EAF2CE;
    line-height: 1.6;
    padding : 0;
}

.container {
    display: grid;
}

/* Header Section */

.header {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    background-color: #012606;
    color: #F8F8F8;

    /* Utilisation de grid-auto-flow pour inverser l'ordre */
    grid-auto-flow: dense;
}

.header-image {
    grid-column: 1; /* Force l'image à se placer dans la première colonne */
    text-align: left;
    height: 728px;
}

.header-text {
    grid-column: 2; /* Place le texte dans la deuxième colonne */
    text-align: left;
}

.header-text h1 {

    font-family: 'bebas neue', 'sans-serif';
    font-size: 173px;
    font-weight: 400;
    color: #EAF2CE;
    margin: 50px 0 0 0;
    line-height: 90%;
}

.header-text h2 {
    font-family: 'Bodoni Moda', 'serif';
    font-size: 56px;
    font-weight: 600;
    color: #E4A4A5;
    margin: 0;
}

.titreh3 {
    margin-top: 100px;
}

h3 {
    font-family: 'afacad', 'serif';
    font-size: 38px;
    font-weight: 600;
    color: #E4A4A5;
    text-align: right;
    margin: 0 80px 0 0;
    line-height: 1.2;
}

.header-text span {
    color: #EAC3B8;
}

.header-text p {
    margin: 0;
    font-size: 1.4rem;
}

@media screen and (max-width: 768px) {
    .header {
        display: grid;
        grid-template-columns: 1fr; /* Une seule colonne */
        grid-template-rows: repeat(2, 1fr); /* Deux lignes : image puis texte */

    }

    .header-image {
        grid-row: 1; /* Place l'image dans la première ligne */
        grid-column: 1;
        text-align: center;
        height: 400px;
    }

    .header-text {
        grid-row: 2; /* Place le texte dans la deuxième ligne */
        margin-top: 20px; /* Ajoute un espace entre l'image et le texte */
        grid-column: 1;
    }

    .header-image img {
        width: 100%; /* Réduction de la taille de l'image */
        height: auto; /* Garde les proportions */
        text-align: center;


    }

    .header-text h1 {
        font-size: 50px; /* Réduction de la taille du titre principal */
        line-height: 1.2;
        margin: 10px 0;
        text-align: center;
    }

    .header-text h2 {
        font-size: 30px; /* Taille plus petite pour le sous-titre */
        margin: 10px 0;
        text-align: center;
    }

    .titreh3 {
        margin-top: 20px; /* Ajuste l'espacement entre les éléments */
        text-align: center;
    }

    h3 {
        font-size: 20px; /* Taille réduite pour les h3 */
        margin: 5px 0;
        text-align: center;
    }
}

@media (max-width: 1024px) and (min-width: 769px) {
    .header{
        align-items: start;
        height: 450px;
    }
    .header-text h1 {
        font-size: 100px; /* Taille de texte ajustée pour tablettes */
    }

    .header-text h2 {
        font-size: 36px; /* Réduction légère */
    }

    .titreh3 h3 {
        font-size: 24px; /* Taille réduite pour rester lisible */
        margin: 0 30px 0 0;
    }
    .titreh3{
        margin-top: 50px;
        padding-bottom: 15px;
    }

    .header-image img {
        max-width: 92%; /* Réduction de la taille de l'image */
    }
}

/* About Section */

.roles {
    margin-top: 1rem;
    font-style: italic;
}
.cv-button {
    display: inline-block;
    padding: 10px 20px 12px 20px;
    margin-top: 50px;
    font-family: 'afacad', 'serif';
    font-size: 20px;
    font-weight: 400;
    color: #012606;
    background-color: #9DD97A;
    border: none;
    border-radius: 30px;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    box-shadow: 5px 5px 5px rgb(179, 179, 179);
    transition: background-color 0.3s;
}

.cv-button:hover {
    background-color: #012606;
    color: #EAF2CE;
    box-shadow: 5px 5px 5px rgb(103, 103, 103);
}
.button{
    text-indent: 0px;
}


.about {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    padding-bottom: 100px;
    background-color: #EAF2CE;
    align-items: start;
}

.about-text {
    max-width: 600px;
    font-family: 'afacad', 'sans-serif';
    font-size: 18px;
    font-weight: 400;
    color: #012606;
    text-indent: 2em;
    margin-left: 80px;
    margin-top: 25px;

}
.lien {
    font-family: 'afacad', 'serif';
    font-size: 18px;
    font-weight: 700;
    color: #012606;
    text-decoration: none;
}
.lien:hover {
    color: #9DD97A;
}
.I {
    font-family: 'Bodoni Moda', 'serif';
    font-size: 30px;
    font-weight: 600;
    font-style: italic;
    color: #012606;
}

.about-text p {
    margin-bottom: 1rem;
}

.about-image img {
    max-width: 100%;
    float: right;

}

@media screen and (max-width: 768px) {
    .about {
        display: grid;
        grid-template-columns: 1fr; /* Une seule colonne */
        grid-template-rows: auto auto; /* Deux lignes : une pour l'image, une pour le texte */
    }

    .about-image img {
        grid-row: 1; /* Place l'image dans la première ligne */
        width: 100%;
        float: none;
        display: grid;
    }

    .about-text {
        grid-row: 2; /* Place le texte dans la deuxième ligne */
        margin: 20px auto; /* Centre le texte et ajoute de l'espace autour */
        text-indent: 0; /* Supprime le retrait pour les petits écrans */
        font-size: 16px; /* Réduit légèrement la taille du texte */
        max-width: 90%; /* Réduit la largeur pour éviter que le texte soit trop large */
        text-align: center;
    }

    .cv-button {
        margin-top: 20px; /* Réduit l'espace autour du bouton */
    }

    .I {
        font-size: 24px; /* Réduction de la taille du texte en italique */
    }
}

/*ABOUT TABLETTE*/

@media (max-width: 1024px) and (min-width: 769px) {
    .about {
        grid-template-columns: 1fr 1fr; /* Conserve deux colonnes */
        gap: 20px; /* Ajout d'un espace entre les colonnes */
    }

    .about-text {
        font-size: 16px; /* Réduction de la taille du texte */
        margin-left: 25px;
    }

    .about-text .I {
        font-size: 24px; /* Réduction légère */
    }

    .about-image img {
        max-width: 100%; /* Taille de l'image ajustée pour tablette */
        float: none;
        align-self: start;

    }
}

/* Skills Section*/
.skills {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 1rem;
    padding: 2rem;
    background-color: #F7F7E7;
}

.skill {
    background-color: #2A3D30;
    color: #FFF;
    text-align: center;
    padding: 1rem;
    border-radius: 5px;
    font-size: 1rem;
    display: grid;
    place-items: center;
}



.colonnes {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    grid-template-rows: repeat(6, 1fr);
    grid-column-gap: 100px;
    grid-row-gap: 25px;
    background: url(../images/Skills.png);
   background-size: contain ;
    background-repeat: no-repeat;


}
.zone1{
    grid-column: 2;
    grid-row: 3;
}
.zone2{
    grid-column: 3;
    grid-row: 3;
}
.zone3{
    grid-column: 4;
    grid-row: 3;
}
.zone4{
    grid-column: 5;
    grid-row: 3;
}
.zone5{
    grid-column: 2;
    grid-row: 4;
}
.zone6{
    grid-column: 3;
    grid-row: 4;
}
.zone7{
    grid-column: 4;
    grid-row: 4;
}
.zone8{
    grid-column: 5;
    grid-row: 4;
}

@media (max-width: 768px) {
    .colonnes {
        display: grid;
        grid-template-columns: 1fr; /* Une seule colonne */
        grid-template-rows: repeat(8, auto); /* 8 lignes, une pour chaque item */
        gap: 20px; /* Espacement entre chaque ligne */
        justify-items: center; /* Centrer horizontalement le contenu de chaque ligne */
        padding: 20px;
        background: none;
    }

    .zone1{
        grid-column: 1;
        grid-row: 1;
    }
    .zone2{
        grid-column: 1;
        grid-row: 2;
    }
    .zone3{
        grid-column: 1;
        grid-row: 3;
    }
    .zone4{
        grid-column: 1;
        grid-row: 4;
    }
    .zone5{
        grid-column: 1;
        grid-row: 5;
    }
    .zone6{
        grid-column: 1;
        grid-row: 6;
    }
    .zone7{
        grid-column: 1;
        grid-row: 7;
    }
    .zone8{
        grid-column: 1;
        grid-row: 8;
    }
}

/*TABLETTE SKILLS*/

@media (max-width: 1024px) and (min-width: 769px)  {
.colonnes {
    display: grid;
    grid-template-columns: repeat(2, auto); /* Une seule colonne */
    grid-template-rows: repeat(4, auto); /* 8 lignes, une pour chaque item */
    gap: 20px; /* Espacement entre chaque ligne */
    justify-items: center; /* Centrer horizontalement le contenu de chaque ligne */
    padding: 20px;
    background: none;
}

.zone1{
    grid-column: 1;
    grid-row: 1;
}
.zone2{
    grid-column: 1;
    grid-row: 2;
}
.zone3{
    grid-column: 1;
    grid-row: 3;
}
.zone4{
    grid-column: 1;
    grid-row: 4;
}
.zone5{
    grid-column: 2;
    grid-row: 1;
}
.zone6{
    grid-column: 2;
    grid-row: 2;
}
.zone7{
    grid-column: 2;
    grid-row: 3;
}
.zone8{
    grid-column: 2;
    grid-row: 4;
}
}


 /*Section Projet*/

.projets {

    background-color: #012606;
    margin-bottom: 100px;
    display: grid;
    place-items: center; /* Centre le contenu horizontalement et verticalement*/
    padding-top: 80px;
    padding-bottom: 80px;
}

.header-projet{
    font-family: 'bebas neue', 'sans-serif';
    color: #E4A4A5;
    font-size: 280px;
    line-height: 0px;
    margin: 0px;
    background-color: #012606;
}


.projet1{
    display: grid;
    grid-template-columns: 3fr 2fr 2fr  ;
    grid-template-rows: 1fr;
    grid-column-gap: 40px;
    align-items: center;

}

.projet-img1{
    max-width: 600px;
    height: auto;
    margin-left: 80px;
    transition: opacity 0.3s ease;
}

.color-image {
    display: block;
}

.bw-image {
    display: none;
}

.color-image:hover, .bw-image:hover {
    transform: scale(1.05); /* Augmente légèrement la taille de l'image */
}

.projet-text{
    display:grid
    grid-template-rows: auto auto auto;
    gap: 10px;
    justify-self: start;

}
.sites{
    font-family: 'afacad', 'sans-serif';
    font-size: 25px;
    color: #E4A4A5;
    text-decoration: none;


}

.sites:hover{
    color: #EAF2CE;
}
.projet2{
    display: grid;
    grid-template-columns: 1fr 2fr 2fr;
    grid-template-rows: 1fr;
    grid-column-gap: 50px;
    margin-top: 80px;
    align-items: center;

}

.projet-text2{
    display:grid
    grid-template-rows: auto auto auto ;
    gap: 10px;
    justify-self: start;
    grid-column: 3;

}
.projet-img2{

    max-width: 600px;
    height: auto;
    grid-column: 2;
    transition: opacity 0.3s ease;


}
.color-image2 {
    display: block;
}

.bw-image2 {
    display: none;
}

.color-image2:hover, .bw-image2:hover {
    transform: scale(1.05); /* Augmente légèrement la taille de l'image */
}

.projet3{

    display: grid;
    grid-template-columns: 2fr 2fr 3fr;
    grid-template-rows: 1fr;
    margin-top: 80px;
    align-items: center;
    column-gap: 50px;
}


.projet-text3{
    display: grid
    grid-template-rows: auto auto auto;
    gap: 10px;
    justify-self: start;
    grid-column: 2;

}

.projet-img3{
    max-width: 600px;
    height: auto;
    grid-column: 3;
    transition:opacity 0.3ms ease ;

}

.color-image3 {
    display: block;
}

.bw-image3 {
    display: none;
}

.color-image3:hover, .bw-image3:hover {
    transform: scale(1.05); /* Augmente légèrement la taille de l'image */
}


.projet4{
    display: grid;
    grid-template-columns: 2fr 1.95fr 3fr 2fr;
    grid-template-rows: 1fr;
    margin-top: 80px;
    align-items: center;

}
.projet-text4{
    display: grid
    grid-template-rows: auto auto auto;
    gap: 10px;
    justify-self: start;
    grid-column: 2;
}
.projet-img4{
    max-width: 600px;
    height: auto;
    grid-column: 3;
    transition: opacity 0.3s ease;
}
.color-image4 {
    display: block;
}

.bw-image4 {
    display: none;
}

.color-image4:hover, .bw-image4:hover {
    transform: scale(1.05); /* Augmente légèrement la taille de l'image */
}

.projet5{
    display: grid;
    grid-template-columns: 3fr 2fr 2fr  ;
    grid-template-rows: 1fr;
    grid-column-gap: 40px;
    align-items: center;
    margin-top: 80px;

}

.projet-img5{
    max-width: 600px;
    height: auto;
    margin-left: 80px;
    transition: opacity 0.3s ease;
}

.projet-text5{
    display:grid
    grid-template-rows: auto auto auto;
    gap: 10px;
    justify-self: start;

}

.color-image5 {
    display: block;
}

.bw-image5 {
    display: none;
}

.color-image5:hover, .bw-image5:hover {
    transform: scale(1.05); /* Augmente légèrement la taille de l'image */
}

.projet6{
    display: grid;
    grid-template-columns: 1fr 2fr 2fr;
    grid-template-rows: 1fr;
    grid-column-gap: 50px;
    margin-top: 80px;
    align-items: center;

}

.projet-text6{
    display:grid
    grid-template-rows: auto auto auto;
    gap: 10px;
    justify-self: start;
    grid-column: 3;

}
.projet-img6{

    max-width: 600px;
    height: auto;
    grid-column: 2;
    transition: opacity 0.3s ease;

}

.color-image6 {
    display: block;
}

.bw-image6 {
    display: none;
}

.color-image6:hover, .bw-image6:hover {
    transform: scale(1.05); /* Augmente légèrement la taille de l'image */
}

.h4{
    font-family: 'bebas neue', 'sans-serif';
    font-size: 81px;
    color: #E4A4A5;
    line-height: 0px;
    margin: 0px;
    text-decoration: none;

}

.text-bas{
    color: #FFFFFF;
    font-family: 'afacad', 'sans-serif';
    font-size: 18px;
    float: left;
    margin: 25px;

}
.text-haut{
    color: #FFFFFF;
    font-family: 'afacad', 'sans-serif';
    font-size: 18px;
    text-align: right;
    margin: 30px;
}

.button2{
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    grid-template-rows: 1fr;
}

.projet-button {
    display: inline-block;
    padding: 10px 20px 12px 20px;
    margin-top: 80px;
    font-family: 'afacad', 'serif';
    font-size: 20px;
    font-weight: 400;
    color: #012606;
    background-color: #9DD97A;
    border: none;
    border-radius: 30px;
    text-decoration: none;
    cursor: pointer;
    transition: background-color 0.3s;
    grid-column: 1;
    grid-row: 1;
    box-shadow: 5px 5px 5px rgb(68, 68, 68);
}
.projet-button:hover{
    background-color: #EAF2CE;
    box-shadow: 5px 5px 5px rgb(92, 92, 92);
}

.back-button {
    display: inline-block;
    padding: 10px 20px 12px 20px;
    margin-top: 20px;
    font-family: 'afacad', 'serif';
    font-size: 20px;
    font-weight: 400;
    color: #012606;
    background-color: #9DD97A;
    border: none;
    border-radius: 30px;
    text-decoration: none;
    cursor: pointer;
    transition: background-color 0.3s;
    box-shadow: 5px 5px 5px rgb(68, 68, 68);
    position: fixed;
    top: 1%;
    right: 1%;
    z-index: 9999;
}

.back-button:hover {
    background-color: #EAF2CE;
    box-shadow: 5px 5px 5px rgb(92, 92, 92);
}


@media screen and (max-width: 768px) {
    .projets {
        grid-template-columns: 1fr;
        padding-top: 20px;
        padding-bottom: 20px;
    }

    .projet1, .projet2, .projet3, .projet4, .projet5, .projet6 {
        display: flex;
        flex-direction: column;
        align-items: center;
        margin-top: 40px; /* Réduire les marges */
    }
    .projet-img1{
        margin-left: 0;
    ;
    }

    .projet-img5{
        margin-left: 0;
    }

    .projet-text, .projet-text2, .projet-text3, .projet-text4, .projet-text5, .projet-text6 {
        text-align: center; /* Centrer le texte */
        margin-top: 20px;
    }

    .h4 {
        font-size: 36px; /* Réduction pour le mobile */
    }

    .text-bas, .text-haut {
        font-size: 14px; /* Réduire les tailles de texte */
    }

    .projet-img1, .projet-img2, .projet-img3, .projet-img4, .projet-img5, .projet-img6 {
        max-width: 90%; /* Réduction pour s'adapter à la largeur de l'écran */
    }

    .button2 {
        margin: 20px 0;
        display: flex;
        justify-content: center;
    }

    .projet-button {
        font-size: 16px;
        padding: 8px 16px;
    }
}

@media screen and (min-width: 768px) and (max-width: 1024px) {
    .projets {
        display: grid;
        grid-template-columns: 1fr 1fr; /* Deux colonnes */
        grid-auto-rows: auto;
        grid-gap: 40px; /* Espacement entre les projets */
        padding: 20px; /* Réduction des marges */
    }

    .projet1, .projet2, .projet3, .projet4, .projet5, .projet6 {
        display: flex;
        flex-direction: column; /* Aligne les images et le texte verticalement */
        align-items: center; /* Centrer les éléments */
        gap: 15px; /* Espacement entre l'image et le texte */
    }

    .projet-img1, .projet-img2, .projet-img3, .projet-img4, .projet-img5, .projet-img6 {
        max-width: 100%; /* Les images s'adaptent à la largeur de leur conteneur */
        height: auto;
    }
    .projet-img1{
        margin-left: 0px;
        margin-top: 80px;
    }

    .projet-img5{
        margin-left: 0px;
    }

    .h4 {
        font-size: 36px; /* Taille ajustée pour éviter les chevauchements */
        text-align: center; /* Centrer les titres */
    }

    .text-haut, .text-bas {
        font-size: 16px; /* Réduction de la taille pour un meilleur rendu tablette */
        text-align: center;
        margin: 0; /* Suppression des marges inutiles */
    }
    .button2{
        grid-template-columns: 1fr;
        grid-template-rows: 1fr;
    }
}

@media screen and (min-width: 768px) and (max-width: 1024px) {
    .projet-text, .projet-text2, .projet-text3, .projet-text4, .projet-text5, .projet-text6 {
        display: flex;
        flex-direction: column;
        align-items: center; /* Aligner les textes au centre */
        gap: 10px; /* Espacement interne entre les lignes */
    }

}

/* Section Contact */

.contact {
    margin-bottom: 50px;

}

.contact_png {
    width: 100%;
    height: 100%;
    margin-bottom: 30px;
}

.contact_infos {
    display: grid;
    margin: 0 50px;
    text-align: center;
    grid-template-columns: 0.7fr 1fr 1fr 1fr 1fr ;
    grid-template-rows: 1fr;
    align-items: center;
}

.cv-button2 {
    display: inline-block;
    padding: 10px 20px 12px 20px;
    margin-left: 15px;
    font-family: 'afacad', 'serif';
    font-size: 20px;
    font-weight: 400;
    color: #012606;
    background-color: #9DD97A;
    border: none;
    border-radius: 30px;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    box-shadow: 5px 5px 5px rgb(179, 179, 179);
    transition: background-color 0.3s;
}

.cv-button2:hover {
    background-color: #012606;
    color: #EAF2CE;
    box-shadow: 5px 5px 5px rgb(103, 103, 103);
}

.mail {
    font-family: 'afacad', 'sans-serif';
    font-size: 20px;
    font-weight: 800;
    color: #012606;
    text-decoration: none;
    align-items: center;
    grid-column: 3;
    grid-row: 1;

}

.mail:hover{
    color: #E4A4A5;

}
.reseau{
    grid-column: 5;
    grid-row: 1;
}

.insta{
    width: 70px;
    height: 70px;
    fill: #9DD97A;
    transition: fill 0.3s ease, transform 0.3s ease;
}

.insta:hover {
    fill: #012606;

}

/* Media Queries */
@media (max-width: 768px) {

    .contact_infos {
        margin: 0 20px; /* Réduire les marges sur les petits écrans */
        gap: 15px; /* Réduire l'espacement vertical */
        grid-template-columns: 1fr;
        grid-template-rows: repeat(3, 1fr);
    }

    .cv-button2 {
        font-size: 18px; /* Taille de texte plus petite */
        padding: 8px 15px; /* Réduire le padding */
        grid-column: 1;
        grid-row: 1;
    }

    .mail {
        font-size: 18px; /* Taille de texte plus petite */
        grid-column: 1;
        grid-row: 2;
    }

    .insta {
        width: 50px; /* Réduire la taille de l'icône */
        height: 50px;
        grid-column: 1;
        grid-row: 3;
    }
}

@media screen and (min-width: 768px) and (max-width: 1024px) {
    .contact_infos {
        display: grid;
        margin: 0 50px;
        text-align: center;
        grid-template-columns: 2fr 1fr 1fr 1fr 1fr;
        grid-template-rows: 1fr;
        align-items: center;
    }
}