/* Variables et Couleurs du site */
:root{
    --main-color : #f3efe0 ;
    --sec-color : #d1c7b7 ;
    --ter-color : #6b705c ;

    --header-color1 : #95a595;
    --header-color2 : #485c50;
    
    --text-color : #3c3c3c;

    --espacement-nav : 1em;
    --espacement-en-bas-nav : 1.4em;
    --espacement-commun : 1.5em;
    --longeur-boutton-nav: 8em;
}



/* Polices du sites */
@font-face {
    font-family: 'Quintessential';
    src: url('./fonts/quintessential/Quintessential-Regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Quintessential';
    src: url('./fonts/quintessential/Quintessential-Regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}
  
@font-face {
    font-family: 'Lora';
    src: url('./fonts/consola_mono/ConsolaMono-Book.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

html{
    margin: 0;
}


.box::before {
    content: "";
    position: fixed;
    inset: 0;
    background-image: url('images/bg.jpg');
    background-color: var(--main-color);
    background-size:cover;
    background-repeat: no-repeat;

    filter: blur(20px);
    z-index: -1;
  }
body{

    /* initialiser les bodure a 0 */
    margin: 0;
    padding: 0;

    font-size: 120%;
    font-family: 'Lora';
    background-color: var(--main-color);

    color: var(--text-color);
    margin-top: 12em;
    text-align: start;
    
    word-spacing: 4px;
    line-height: 2.2em;
}

p{
    text-align: justify;
}

div > p {
    text-align: start;
}


h1, h2, h3 {
    margin: 0;
    font-family: 'Quintessential';    
}

h2{
    font-size: 130%;
}

h1{
    color: var(--text-color);
}


p a:hover, main li a:hover{
    text-decoration:underline;
    color: var(--ter-color);
    font-style:oblique;
}

a, header ul li a, p a, li a{
    text-decoration: none;
    color: var(--text-color);
}

figure img{
    width: 40%;
}

figcaption{
    font-size: medium;
    position: relative;
    font-style: italic;
    top: -5px;
    left: 50px;
}


.cible{ /* Fait en sorte que tout les lien interne ramène 100px plus bas (prise en compte du header) */
    scroll-margin-top: 200px;
}

li{
    margin: 0.7em;
}

/* Radius des éléments */
article, li, article > div > a {
    border-radius: 4px 40px;
} 

/* Section */
main > section{
    width: 90%;
    margin: 5%;
    border-radius: 15px;
    justify-content: space-between;
    display: flex;
}

main > section > section{
    flex-wrap: wrap;
    justify-content:flex-start;
    width: 80%;
    margin-right: 5em;
}


/* Article */
main article{
    box-shadow: 0 0 20px var(--sec-color);
    background-color: var(--sec-color);
    
    padding: var(--espacement-commun);
    margin: var(--espacement-commun);
  
    transition-duration: 0.2s;
}  

main article:hover{
    box-shadow: 0 0 30px var(--ter-color);
    backdrop-filter: blur(13px);
}

main > section > section article{
    width: 100%;
    flex-wrap: wrap;
}

/* Projet annexe */
.PA h2{
    margin: 2em;
    text-align: left;
}
.PA{
    text-align: center;
}
main > section > section > .PA > div > img{
    width: 80%;
}

/* Article pour la pages des projets*/
main > article{
    margin: 7em 4em 0% 25%;
}

main > article > section{
    
    display: flex;
    text-align: left;
    justify-content: space-around;
    flex-wrap: wrap;
    width: 100%;
}

main > article > section > p{
    width: 80%;
} 
main > article > section > figure{
    width: 50%;
}
main > article > section > figure > img{
    width: 100%;
}
main > article > section > div > img{
    width: 45%;
    height: 100%;
}
main > article > section > div{
    justify-content: space-between;
    flex-wrap: nowrap;
    display: flex;
    width: 80%;
    height: 100%;
    margin: 1em 1em;
}

main > article > div{
    margin: 0 15%;
}

main > section > article{
    width: 40%;
}

/*
###################
#                 #
#                 #
#     Profil      #
#                 #
#                 #
###################
*/

article > span > p{
    width: 100%;
}

article > span > div {
    margin: 10px;

    width: 100%;
    background-image: url("images/tests/IMG_20250607_145303.jpg");
    background-size: 100%;
    background-repeat:repeat-x;
    background-position-y: -4em ;
    
    background-position-x: center;
    padding: 0  ;
}

section > section > article > span > div{
    padding: 0;
    margin: 0;
    width: 100%;
}

article > span > div > img{
    width: 25%;
    margin: 0;
    height: 100%;
}

section > article > span {
    display: flex;
    flex-wrap: wrap;
}


/*
###################
#                 #
#                 #
#      Aside      #
#                 #
#                 #
###################
*/
aside{
    
    background-color: var(--sec-color);
    padding: 0.5em;
    top: 12em;
    position: fixed;
    width: 20%;
    
    z-index: 1;
    transition-duration: 0.2s;
    line-height: 1.2em;

}

#Contact ul li{
    list-style-type: none;
}

/*
###################
#                 #
#                 #
#   Format tel    #
#                 #
#                 #
###################
*/
@media only screen and (max-width: 1300px) {

    section > article{
        margin: 0;
        width: 100%;
    }

    main > section{
        flex-wrap: wrap;
    }

    main > section > section:nth-child(1){
        width: 100%;
    }

    main > section > article{
        width: 100%;
    }

    section > article, main > section > section > article{
        margin: 1em;
        
    }

    aside{
        position: relative;
        background-color: var(--main-color);
        width: 80%;
        margin: 10%;
        margin-bottom: 0;
        padding: 0;
        z-index: 0;
        top: 0;
        margin-top: 0;
        height: 100%;
    }


    main > article{
        margin: 10%;
        padding: 0;
        padding-top: 1em;
        width: 80%;
    }

    main > article > h2, main > article > p, main > article > img, main > article > div, main > article > ul > li{  
        padding: 1em;
    }
    
    aside h3, aside ul li{
        width: 50%;
        margin: 0.2em;
        padding: 0.7em;
    }

    section section article span, section section article h3, section section article h2, section section article p, section section article ul, section section article div{
        width: 80%;
        margin: 1em 10%;
        padding: 0.5em;
    }

}
@media only screen and (max-width: 650px) {
    body{
        font-size: 120%;
        margin: 0;
        padding: 0;
        width: 100%;
        padding-top: 15em;
    }


    section section article span, section section article h3, section section article h2, section section article p, section section article ul, section section article div{
        margin: 1em 2%;
        padding: 0.5em;
    }

    p{
        text-align: left;
    }


    main article{
        box-shadow: 0 0 0;
    }

    main article:hover{
        box-shadow: 0 0 0;
    }

    header li{
        font-size:  89%;
    }
    h1{
        font-size: 210%;
    }
    header p{
        top: 13px;
    }

    main > section{
        flex-wrap: wrap;
        
    }
    
    main section, main section section article, main article,main section section{
        border-radius: 0;
        margin: 0;
        padding: 0;
        width: 100%;
    }

    main section section article{
        padding: 0.5em;
    }

    p, h2{
        padding: 0.8em;
    }

    footer > section > article:nth-child(1), footer > section > article:nth-child(2) > ul {
        display:none;
    }

    aside{
        position:sticky;
        background-color: var(--main-color);
        top: 0;
        width: 100%;
        height: 80%;
        margin: 0;
        z-index: -1;
        padding: 0.5em 0 0.5em 0;
    }

    main > article img, main > article section figure{
        width: 80%;
    }

    main > article > section{
        background-color: var(--main-color);
    }

    main section section article{
        padding: 0.5em 0 0.5em 0;
    }
    
}