: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);
}

nav{
    display: flex;
    justify-content: space-between;
    padding-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);
}

.image-presentation{
    width: 100%;
    border-top:var(--couleur-orange) 0.1rem solid;
    border-bottom:var(--couleur-orange) 0.1rem solid;

}

section{
    margin: 2rem;
}

p{
    font-size: 0.75rem;
}

.style-contexte-geocaching{
    color: var(--couleur-noir);
    background-color: var(--couleur-orange);
    border-radius: 1rem;
    padding: 0.5rem;
}

.test-appli{
    font-weight: var(--font-weight-bold);
}

.image-test{
    width: 100%;
}

.grid-image-test{
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    width: 100%;
}

li{
    font-size: 0.8rem;
}

.ecran-geocaching-analyse{
    display: flex;
    align-items: center;
    width: 100%;
}

.triple-ecran-geocaching{
    display: flex;
    gap: 0.5rem;
    margin-block: 4rem;
    width: 100%;
    
    
}

.second-button{
    background-color: var(--couleur-orange);
    border-radius: 2rem;
    border: solid 0rem;
    margin: 3rem;
    padding: 0.5rem 1rem;
    font-weight: var(--font-weight-bold);
}

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

.button-test{
    text-align: center;    
}

.aide{
    text-align: center;
    margin-top: 3rem;
    margin: 2rem;
}

.button-end{
    display: flex;
    flex-direction: row;
    justify-content: center;
    gap: 4rem;
    margin: 5rem 2rem;
}

.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);
}

.image-ecran{
    width: 40%;
}

.image-creation{
    display: flex;
    flex-direction: column;
    margin-block: 1rem;
    width: 80%;
    max-width: 300px;
}

.analyse-appli{
    margin-inline:1rem;
}

.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){

    h3{
        font-size: 1.3rem;
    }

    .style-contexte-geocaching{
        font-size: 2rem;
    }

    h4{
        font-size: 1.75rem;
    }

    h5{
        font-size: 1.5rem;
    }

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

    .image-ecran{
        max-width: 400px;
    }

    .grid-image-test{
        width: 80%;
    }

    .ecran-geocaching-analyse{
        width: 80%;
    }

    .triple-ecran-geocaching{
        width: 80%;
        gap: 2rem;
    }

    .image-creation{
        max-width: 500px;
    }


}

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

    h3{
        font-size: 1.6rem;
    }

    .style-contexte-geocaching{
        font-size: 2.5rem;
    }

    h4{
        font-size: 2rem;
    }

    h5{
        font-size: 1.75rem;
    }

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

    .image-ecran{
        max-width: 500px;
    }

    .grid-image-test{
        width: 70%;
    }

    .triple-ecran-geocaching{
        width: 70%;
        gap: 4rem;
    }

    .image-creation{
        max-width: 600px;
    }

    .second-button{
        font-size: 1rem;
    }
    

}

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

    h3{
        font-size: 2rem;
    }

    .style-contexte-geocaching{
        font-size: 2.5rem;
    }

    h4{
        font-size: 2rem;
    }

    h5{
        font-size: 1.75rem;
    }

    nav{
        margin-inline: 3em;
    }

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

    .grid-image-test{
        width: 60%;
    }

    .triple-ecran-geocaching{
        width: 60%;
        gap: 6rem;
    }
    
    .second-button{
        font-size: 1.25rem;
    }
    

}