:root{
    --couleur-beige : #DFCEB2 ;
    --couleur-noir : #252525 ;
    --couleur-blanc : #ffffff ;
    --couleur-jaune : #F7CE40 ;
    --couleur-bleu : #8EE4DA ;
    --couleur-orange : #FF6B36 ;
    
    --font-kufam: "Kufam", sans-serif;
    --font-weight-classico: 400 ;
    --font-weight-bold: 700 ;
      

}

body{
    margin: 0;
    background-color: var(--couleur-noir);
    color: var(--couleur-blanc);
    font-family: var(--font-kufam);
}

h4{
    font-size: 1.5rem;
}



.line {
    border-top: 0.1rem solid var(--couleur-beige);
    margin: 0 4rem 0 4rem;
}

nav{
    display: flex;
    justify-content: space-between;
    margin-inline: 2rem;
}

.nav-content{
    display: flex;
    text-decoration: none;
    font-size: 1rem;
    gap: 2rem;

}

.link-nav{
    text-decoration: none;
    color: var(--couleur-blanc);
}

.link-nav:hover{
    text-decoration: none;
    color: var(--couleur-beige);
}

.titre-page{
    margin-block: 6rem 0rem;
}

.image-projet{
    width: 80%;
    max-width: 300px;
}

.primary-button{
    color: var(--couleur-noir);
    background-color: var(--couleur-beige);
    font-family: var(--font-kufam);
    font-weight: var(--font-weight-bold);
    font-size: 1rem;
    border-radius: 2rem;
    border: solid 0rem;
    padding: 0.5rem 2rem;
}

.primary-button:hover{
    color: var(--couleur-blanc);
}

.projet{
    align-items: center;
    justify-content: center;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin-block: 0 8rem;
}

.projet-inverse{
    align-items: center;
    justify-content: center;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin-block: 0 8rem;
}

.header-projet{
    display: flex;
    justify-content: space-between;
    margin-inline: 1rem;
}

.forme-projet-mixsip{
    padding: 0.5rem 1rem;
    border: 0.1rem var(--couleur-jaune) solid;
    border-radius: 2rem;
    margin-inline: 2rem;
    max-width: 400px;
}

.forme-projet-snsm{
    padding: 0.5rem 1rem;
    border: 0.1rem var(--couleur-bleu) solid;
    border-radius: 2rem;
    margin-inline: 2rem;
    max-width: 400px;
}

.forme-projet-geocaching{
    padding: 0.5rem 1rem;
    border: 0.1rem var(--couleur-orange) solid;
    border-radius: 2rem;
    margin-inline: 2rem;
    max-width: 400px;
}

.forme-projet-fraunces{
    padding: 0.5rem 1rem;
    border: 0.1rem var(--couleur-blanc) solid;
    border-radius: 2rem;
    margin-inline: 2rem;
    max-width: 400px;
}

.button-projet{
    padding: 0.3rem 0.6rem;
    margin: 1rem;
    font-family: var(--font-kufam);
    font-weight: var(--font-weight-bold);
    border-radius: 2rem;
    border: solid 0rem;
    
}

.button-projet:hover{
    color: var(--couleur-blanc);
}

.button-Mixsip{
    color: var(--couleur-noir);
    background-color: var(--couleur-jaune);
}

.button-Mixsip:hover{
    background-color: #AF922D;
}

.button-snsm{
    color: var(--couleur-noir);
    background-color: var(--couleur-bleu);
}

.button-snsm:hover{
    background-color: #63B6AC;
}

.button-geocaching{
    color: var(--couleur-noir);
    background-color: var(--couleur-orange);
}

.button-geocaching:hover{
    background-color: #B9451C;
}

.button-fraunces{
    color: var(--couleur-noir);
    background-color: var(--couleur-blanc);
}

.button-fraunces:hover{
    background-color: #BBBBBB;
}

.titre-projet-mixsip{
    font-size: 1.5rem;
    margin: 1rem 0;
    color: var(--couleur-jaune);
    
}

.titre-projet-snsm{
    font-size: 1.5rem;
    margin: 1rem 0;
    color: var(--couleur-bleu);
    
}

.titre-projet-geocaching{
    font-size: 1.5rem;
    margin: 1rem 0;
    color: var(--couleur-orange);
    
}

.titre-projet-fraunces{
    font-size: 1.5rem;
    margin: 1rem 0;
    color: var(--couleur-blanc);
    
}

p{
    font-size: 0.75rem;
    text-align: left;
    margin-inline: 1rem;
}

.article-projet{
    display: flex;
    flex-direction: column;
    
}

.titre-parties{
    margin: 0rem 2rem 8rem 2rem;
    color: var(--couleur-beige);
}

.photo-profil{
    border-radius: 2rem;
    border: 0.2rem var(--couleur-beige) solid;
    width: 50%;
    max-width: 400px;

}


article{
    margin-block: 3rem;
}

.image-a-propos{
    display: flex;
    margin: 2rem;
}

.a-propos{
    margin: 2rem;
}

.adresse-mail{
    display: flex;
    margin-block: 1rem; 
}

.image-ecran-geocaching{
    width: 33%;
}

.triple-ecran-geocaching{
    display: flex;
    gap: 0.5rem;
    width: 70%;
}

.footer{

    font-size: 0.75rem;
}

.lien-bento{
    color: var(--couleur-blanc);
    text-decoration: none;
    font-size: 0.75rem;
    margin: 0;
    padding: 0;
}

.lien-bento:hover{
    color: var(--couleur-beige);
}

.fin-de-page{
    display: flex;
    justify-content: center;
    align-items: center;
    line-height: 100%;
}

@media screen and (min-width: 744px){


    body{
        margin: 0;
        background-color:var(--couleur-noir);
        color: var(--couleur-blanc);
        font-family: var(--font-kufam);
    }

    h3{
        font-size: 1.3rem;
    }

    p{
        font-size: 0.75rem;
        text-align: left;
        margin-inline: 1rem;
    }

    .projet{
        display: flex;
        flex-direction: row;
        margin: 10rem 2rem;

    }

    .projet-inverse{
        display: flex;
        flex-direction: row-reverse;
        margin: 10rem 2rem;
    }

    .image-projet{
        width: 100%;
        max-width: 600px;
    }

    .titre-parties{
        font-size: 1.75rem;
    }

    .a-propos{
        display: grid;
        grid-template-columns: 1fr 1fr;
    }

    .photo-profil{
        width: 300px;     
    }

    .photo{
        text-align: center;
    }

    
}

@media screen and (min-width: 1044px){

    h3{
        font-size: 1.6rem;
    }

    p{
        font-size: 1rem;
        text-align: left;
        margin-inline: 1rem;
    }

    .titre-projet{
        font-size: 2rem;
    }

    .titre-parties{
        font-size: 2rem;
    }

    .button-projet{
        padding: 0.5rem 1rem;
        margin: 1rem;
        font-family: var(--font-kufam);
        font-weight: var(--font-weight-bold);
        border-radius: 2rem;
        border: solid 0rem;
        font-size: 1.25rem;
        
    }
    
    .photo-profil{
        width: 350px;     
    }

}

@media screen and (min-width: 1440px){

    h3{
        font-size: 2rem;
    }

    p{
        font-size: 1rem;
        text-align: left;
        margin-inline: 1rem;
    }

    .titre-projet{
        font-size: 3rem;
    }

    .titre-parties{
        font-size: 3rem;
    }

    .forme-projet-mixsip{
        max-width: 100%;
    }
    
    .forme-projet-snsm{
        max-width: 100%;
    }
    
    .forme-projet-geocaching{
        max-width: 100%;
    }
    
    .forme-projet-fraunces{
        max-width: 100%;
    }

    .photo-profil{
        width: 400px;     
    }

    nav{
        margin-inline: 3em;
    }

    .nav-content{
        gap: 6rem;
    }
}