@font-face {
    font-family: 'Alte'; /* Nom que tu donnes à la police */
    src: url('../fonts/AlteHaasGroteskBold.ttf') format('truetype');
    font-weight: bold; /* Style bold */
    font-style: normal;
}

@font-face {
    font-family: 'Alte'; /* Même nom pour la famille */
    src: url('../fonts/AlteHaasGroteskRegular.ttf') format('truetype');
    font-weight: normal; /* Style normal */
    font-style: normal;
}


:root {
/* taille des typo */
    --titre1: 42px;
    --titre2: 28px;
    --titre3: 46px;
    --titre4: 28px;

    --texte1: 21px;
    --texte2: 18px;
    --texte3:32px;

/* couleurs */
    --blanc : #FFFDF2;
    --gris : #333333;
    --vert : #167070;
    --violet : #96527A;
    --jaune : #FFD700;

    --font-texte: 'Lato', sans-serif;
    --font-logo: 'Alte', sans-serif;

}




body {
    background-color: #FFFDF2;
    margin:0;
    font-family: var(--font-texte);
    overflow-x: hidden;
}

main {
    min-height: 100vh;

}

/***** HEADER *****/


.headerPhone {
    display: none;
}

.header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 70px;
    z-index: 1000;
    background-color: rgba(0,0,0,0.4) ;/* Header initialement transparent */
    box-shadow: none; /* Pas d'ombre initiale */
    backdrop-filter: blur(2px);          /* Applique un flou de 10px à l'arrière-plan */
    -webkit-backdrop-filter: blur(2px);     
    display: flex;
    justify-content: center;
    align-items: center;
    transition: background-color 0.4s ease-in-out;
}

.header.scrolled {
    background-color: #167070;
    opacity: 0.98;
    border-bottom: transparent;
}

.barre-nav {
    display: flex;
    width: 100%;    
    height: 60px;
    align-items: center;
    justify-content: space-between;
    padding: 0 2rem;
}

.barre-nav nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 70px;
}

.barre-nav nav a {
    text-decoration: none;
    color: var(--blanc);
    font-size: var(--texte2);
    font-weight: 400;
    padding: 0 10px;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color 0.3s ease-in-out; /* Ajout des transitions */
    transition: transform 0.3s ease;

}

.barre-nav nav a:hover {
    transform: translateY(-8px);
  }

.barre-nav img {
    height: 50px;
}


/****** FOOTER ******/


footer{
   /* background-image: url('../img/accueil/footer_fond_gris.png');
    background-size: 100% auto;
    background-position: top;
    background-repeat: no-repeat;*/
    color: var(--blanc);
    background-color: var(--gris);
    margin-top: 0.7rem;
    width:100%;
    height: 250px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}

footer a {
    text-decoration: none;
    color: #FFFDF2;

}

.infosFooter {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    padding: 0 0 0 10%;
    margin-bottom: 1rem;
    height: 40%;
    width: 40%;


}

.infosFooter .logo img {
    width: 400px;
    margin-bottom: 10px;
}

.infosFooter .reseaux img {
    height: 50px;
}

.bas_page  {
    display:flex;
    justify-content: center;
    align-items: center;
    padding:0rem 2rem;
    opacity: 0.6;
}

.bas_page .copyright{
    display: flex;
    align-items: center;
}

.bas_page .copyright i {
    padding : 0 0.7rem;
}


.pagesOblig {
    display: flex;
    align-items: center;
}

.pagesOblig p {
    padding: 0 10px;
}



/************* STYLE GENERAL DES COMPETENCES ****************/


.banniere #formeBann {
    width:100%;
    min-width:1100px;
    position: absolute;
    right: 0;
    bottom: -50px;
    object-fit: cover;
}


.competences {
    display: grid;
    grid-template-columns: repeat(2,1fr) ;
    grid-template-rows: repeat(3,1fr) ;
    grid-gap: 10%;
    row-gap: 140px;
    margin: 6rem 10%;
}

.comp h4 {
    color: var(--vert);
    font-weight: 400;
    font-size: var(--titre4);
    height: 15%;
    display: flex;
    align-items: center;
    padding: 0 1rem 0 25px;

}

.comp{
    height: 100%;
    overflow: visible;
    position: relative;
    border-radius: 15px;
}

.textPhare p {
    font-size: var(--texte1);
}

.comp .txtComp {
    padding: 1rem 1rem;
    display: flex;
    height: 100%;
    flex-direction: column;
    border-radius: 24px;
    background: #FFFDF2;
    box-shadow: 4px 4px 50px 3px rgba(30, 30, 30, 0.20);
    position: relative;
    z-index: 2;
    color: #333333;
    transition: 0.2s ease-in-out;
}

.txtComp ul {
    margin: 0;
    flex-grow: 1;
    display: flex;
    font-size: var(--texte2);
    flex-direction: column;
    justify-content: flex-start;
    list-style: none;
    padding: 0;
}
 
.txtComp li {
    padding-left: 25px;
    margin: 0 0 15px 0;
    position: relative;
    line-height: 1.5rem;
    font-size: var(--texte2);
 }

 .txtComp span, .txtComp p {
    padding: 0 25px;
 }
/*
 .txtComp ul li::before {
    content: '';
    position: absolute;
    left: 0;
    top:0;
    width: 20px; 
    height: 20px; 
    background-size: contain;
    background-repeat: no-repeat;
    background-image: url('../img/puce_feuille.png');
  }
*/
.txtComp ul li::before {
    content:'/ ';
    color: var(--vert);
    font-family: var(--font-texte);
    font-weight: bold;
}
.comp img {
    position: absolute;
    height: auto;
    z-index: 1; /* Met l'image devant la carte si nécessaire */
    top :-5rem;
    left: -5rem;
    width: 12rem;

}

.txtComp:hover{
    transform: scale(1.05);
}

/**** GALLERIE ****/

.gallery {
    margin: 15rem auto 10rem auto;
}

.grille {
    display: grid;
    width: 90%;
    height: 37rem;
    margin: 0 auto;
    grid-template-columns: repeat(8,1fr);
    grid-template-rows: repeat(4,1fr);
    gap: 20px;
    grid-template-areas: 
    "img1 img1 img2 img3 img3 img3 img4 img4"
    "img1 img1 img2 img3 img3 img3 img4 img4"
    "img5 img5 img5 img3 img3 img3 img6 img6"
    "img5 img5 img5 img3 img3 img3 img6 img6";
}

.photo-container {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.grille img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease-in-out; /* Transition douce pour le zoom */
}

.grille img:hover {
    transform: scale(1.05); /* Zoom sur l'image au survol */
    transition: transform 0.3s ease-in-out; /* Transition douce pour le zoom */
    cursor: pointer; /* Change le curseur au survol */
}

#container1 { 
    grid-area: img1; 
    border-radius: 40px 0 0px 40px;
}
#container2 { 
    grid-area: img2; 
    border-radius: 20px;
}
#container3 { 
    grid-area: img3;
    border-radius: 30px; }
#container4 { 
    grid-area: img4; 
    border-radius: 40px 0px 40px 0px;
}
#container5 { 
    grid-area: img5;
    border-radius: 0 200px 0 200px; }
#container6 { 
    grid-area: img6;
    border-radius: 0 80px 80px 0px; }

#bot1 {
    grid-area: img1;
}
#bot2 {
    grid-area: img2;
}
#bot3 {
    grid-area: img3;
}
#bot4{
    grid-area: img4;
}
#bot5{
    grid-area: img5;
}
#bot6{
    grid-area: img6;
}

.modal {
    display: none;
    position: fixed;
    z-index: 10000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    max-height: 100vh;
    background-color: rgba(0, 0, 0, 0.9);
}

.modal.active {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.modal-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 80%;
    max-width: 60%;
    height: 100%;
}

.modal img {
    max-width: 100%;
    max-height: 80%;
    object-fit: contain;
    border-radius: 5px;
}


#overlay-content {
    font-size: 18px;
    color: var(--blanc);
}

#overlay-content span {
    font-style: italic;
}

/* Bouton de fermeture du modal */
.close {
    position: absolute;
    top: 15px;
    right: 35px;
    color: var(--blanc);
    font-size: 40px;
    font-weight: bold;
    transition: 0.3s;
}

.close:hover,
.close:focus {
    color: #bbb;
    text-decoration: none;
    cursor: pointer;
}


/**************  VERSION MOBILE  ****************************************/



@media (max-width:800px) {

    /*******************MENU************************/
        *{
            padding:0;
            margin: 0;
        }

        .header {
            display: none;    
        }
    
        .headerPhone {
            display: block;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 60px;
            background-color:var(--vert);
            color:var(--blanc); 
            z-index: 1000;
            transition: top 0.3s ease; /* Animation fluide */
        }
    
        #menuPhone {
            display: flex;
            justify-content: space-between;
            align-items: center;
            height: 100%;
            width: 100%;
        }
    
        #menuPhone #logoMaxime img {
            height: 50px;
            margin-left: 2rem;
        }

        .burger-icon {
            display: flex; /* Montre l'icône burger */
        }
    
        .menu-overlay {
            display: block; /* Permet l'affichage du menu */
        }
    
        .burger-menu {
            position: relative;
        }
    
        /* Icône de menu burger */
        .burger-icon {
            position: fixed;
            top: 20px;
            right: 20px;
            width: 30px;
            height: 25px;
            cursor: pointer;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
        }
    
        .burger-icon span {
            display: block;
            height: 5px;
            background-color:#FFFDF2;
            border-radius: 2px;
            transition: 0.3s;
        }
    
    
        /* Menu overlay */
        .menu-overlay {
            position: fixed;
            top: 0;
            right: -100%;
            width: 50%;
            height: 100%;
            background-color:#167070;;
            z-index: 10;
            transition: 0.3s ease-in-out;
            padding-right: 10%;
        }
    
        .menu-overlay nav ul {
            list-style: none;
            padding-top: 10px;
            margin-top: 100px;
            height: 100%;
            width: 100%;
            text-align: right;
        }
    
        .menu-overlay nav ul li {
            margin: 30px 0;
        }
    
        .menu-overlay nav ul li a {
            text-decoration: none;
            color:#FFFDF2;
            font-size:var(--texte2);
            width: 100%;
            text-transform: none;
        }

        .menu-overlay #contactLien a {
            background-color: var(--blanc);
            padding: 10px 20px;
            border-radius: 80px;
            color: var(--gris);
        }
        #contactLien {
            margin-top: 40px;
        }
    
        .menu-overlay .close-icon {
            font-size: 4rem;
            cursor: pointer;
            position: absolute;
            top: 20px;
            right: 10%;
            color:var(--blanc);
        }
    
        /* Animation ouverture */
        .menu-overlay.open {
            right: 0;
        }

        .bas_page {
            flex-direction: column;
            padding:20px 3%;
            align-items: flex-start;
        }
        .pagesOblig p {
            display: none;
        }
        .pagesOblig a {
            padding-left: 40px;
            padding-top: 15px;
        }
        .infosFooter{
            flex-direction: column;
            padding: 30px 3%;
            width: auto;
        }
        .infosFooter .logo img {
            width: 300px;
            margin: 30px 0;
        }
        footer {
            height:auto
        }

    /************* STYLE GENERAL DES COMPETENCES ****************/
    .botanique .banniere, .zonesHumides .banniere, .suiviSc .banniere , .monParcours .banniere, .contact .banniere {
        background-size: 100% 100%, 100% 50%, cover;
        height: 35rem;
    }
    .botanique .banniere h2, .zonesHumides .banniere h2, .suiviSc .banniere h2 , .monParcours .banniere h2, .contact .banniere h21 {
        font-size: var(--titre2);
    }
    .botanique .textPhare, .zonesHumides .textPhare , .suiviSc .textPhare, .monParcours .textPhare, .contact .textPhare, .portrait {
        width: auto !important;
    }
    .botanique .textPhare p, .zonesHumides .textPhare p , .suiviSc .textPhare p, .monParcours .textPhare p, .contact .textPhare p {
        font-size: var(--texte);
    }

    .competences {
        display: flex !important;
        flex-direction: column;
        margin: 6rem 5%;
        margin: 50px 5% !important;
    }

    .comp h4 {
    padding : 20px 1rem 20px 25px;

    }
    .comp .txtComp {
        border-radius: 15px;
    }

    .comp img {
        width: 12rem;
        top: -5rem;
        left: -2rem;
        width: 15rem;
    }

    .gallery {
        margin: 10rem auto 5rem auto;
    }
    .grille {
        display: grid;
        width: 90%;
        height: 40rem;
        margin: 0 auto;
        grid-template-columns: repeat(3, 1fr);
        grid-template-rows: repeat(7, 1fr);
        gap: 10px;
        row-gap: 20px;
        grid-template-areas:
            "img1 img1 img2"
            "img1 img1 img2"
            "img3 img3 img3"
            "img3 img3 img3"
            "img4 img6 img6"
            "img4 img6 img6 "
            "img5 img6 img6";
    }
    #container1 {
        border-radius: 0 200px 0 200px;
    }
    #container4 {
        border-radius: 50px 50px 0px 50px;
    }
    #container5{
        border-radius: 80px 0px 0px 80px;
    }
    #container6 {
        border-radius: 100px 0 100px 0;
    }

    .photo-container:hover .overlay {
        opacity: 0; /* Désactive l'effet de survol */
    }
    .modal-content {
        max-width: 100%;
    }

    .modal img {
        height: auto;
        max-width: 100%;
    }


/*** BOTANIQUE ***/

    
    .botanique #comp4 img {
        left: -2rem;
    }
    .botanique #comp5 img {
        left: -3rem;
        top: -3rem;
        width: 11rem;
    }
    .botanique #comp6 img {
        width: 9rem;
        top: -4.5rem;
        left: -2rem;
    }


/*** ZONES HUMIDES ***/
    .zonesHumides #comp1 img {
        width: 10rem;
        left: -2rem;
    }
    .zonesHumides #comp2 img {
        width: 13rem;
        top: -4rem;
    }
    .zonesHumides #comp3 img {
        width: 8rem;
        top: -5rem;
    }
    .zonesHumides #comp4 img {
        width: 7rem;
        left: -2rem;
        top: -3rem;
    }
    .zonesHumides #comp5 img {
        width: 8rem;
        top: -5rem;
        left: -2rem;
    }
    .zonesHumides #comp6 img {
        width: 8rem;
        top: -4rem;
        left: -2rem;
    }


/*** SUIVI SCIENTIFIQUE ***/

    .suiviSc .competences {
        display: grid;
        grid-template-columns: 1fr;
        grid-template-rows: repeat(2,minmax(20rem, auto)); ;
        grid-gap: 10%;
        row-gap: 180px;
        margin: 6rem 10%;
    }

    .suiviSc #comp1 img {
        width: 10rem;
        left: -2rem;
        top:-6rem;
    }
    .suiviSc #comp2 img {
        width: 10rem;
        top: -5rem;
    }

/*** MON PARCOURS ***/
    .portrait {
        flex-direction: column;
        align-items: center;
        height: auto;
        max-width: 90%;
    }
    .portrait .photo {
        height: 25rem;
    }
    .partenaires {
        padding-top: 3rem;
        gap: 1rem;
        padding-left: 0;
    }
    .partenaires li {
        width: auto;
    }
    .partenaires li p {
        font-size: var(--texte1);
    }
    .formation, .experience {
        width: 75%;
        gap: 1rem;
    }
    .formation li, .experience li {
        padding: 5px 0;
        margin: 0;  
    }
    .expPro {
        margin: 0 auto 5rem auto; 
    } 
    .formContent, .experiences {
        margin-top: 1rem;
    }

/* CONTACT*/

.infosContact h2 {
    padding-left: 0;
}
.infosContact{
    margin: 0 auto 5rem auto ;
}
.contactContent {
    flex-direction: column;
    width: 90%;
}
.coordonnees, .infosEntreprise {
    width: 100%;
}
.coordonnees div, .infosEntreprise div {
    padding: 1rem 0;

}    
}