/* Couleurs du titre */
#header-title {
    background: linear-gradient(to bottom,rgb(245,245,220),rgb(245,245,220),rgba(255, 25, 0, 0.75));
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
} 

/* Corps de la page */
#myBody {
    background-image:linear-gradient(to bottom right, rgba(255, 90, 70, 0.75), rgba(150, 216, 255, 0.8), rgba(221, 208, 31, 0.75));
}

/* Titre de section apparaissant à gauche */
.sub-title-g {
    font-size: xx-large;
    font-family: cursive;
    background: linear-gradient(to bottom,rgb(224,224,224),rgb(224,224,224),rgb(224,224,224),rgb(224,224,224),rgba(255, 25, 0, 0.75));
    padding: 1% 2% 1% 10%;
    border-bottom-right-radius: 30px;
    border-top-right-radius: 30px;
    align-self: flex-start;
    margin: 5% 0 5% 0;
}

/* Le premier titre de section */
.first {
    margin-top: 9%;
}

/* Titre de section apparaissant à droite */
.sub-title-d {
    font-size: xx-large;
    font-family: cursive;
    background: linear-gradient(to bottom,rgb(224,224,224),rgb(224,224,224),rgb(224,224,224),rgb(224,224,224),rgba(255, 25, 0, 0.75));
    padding: 1% 10% 1% 2%;
    border-bottom-left-radius: 30px;
    border-top-left-radius: 30px;
    align-self: flex-end;
    margin: 5% 0 5% 0;
}

/* Chaque section */
.paragraph {
    width: 90%;
    font-size: large;
    margin: 4% 0 4% 0;
    text-align: justify;
}

/* Image + Texte côte à côte */
.paragraph .imgTxt {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 5%;
    max-width: 100%;
}

/* Image en question */
.paragraph .imgTxt img {
    max-width: 40%;
    max-height: 40%;
    object-fit: contain;
}

/* Texte en question si plusieurs paragraphes */
.paragraph .imgTxt .column {
    display: flex;
    flex-direction: column;
    gap: 5px;
    background-color: rgba(255,255,255,0.6);
    background-color: rgba(30, 143, 255, 0.5);
    border-radius: 20px;
    padding: 1%;
}

/* Textes */
.paragraph p {
    margin-top: 1%;
}

/* Liste de divisions rectangulaires */
.paragraph .rect {
    display: flex;
    justify-content: center;
    gap: 5%;
    max-width: 100%;
}

/* Chaque division rectangulaire en format 1 */
.paragraph .rect .rect1 {
    background-color: rgba(255, 255, 255, 0.6);
    background-color: rgb(0, 71, 141);
    color: white;
    border-radius: 20px;
    display: flex;
    flex-direction: column;
    max-width: 45%;
    padding: 1%;
    height: fit-content;
}

/* Titre d'une division rectangulaire */
.paragraph .rect .rect1 h3, .paragraph .rect .rect2 h3 {
    text-align: center;
    margin: 2% 0 2% 0;
    padding-bottom: 2%;
    /*border-bottom: 1px solid black;*/
    font-size: larger;
    /*width:100%;*/
}

/* Chaque division rectangulaire en format 2 */
.paragraph .rect .rect2 {
    background-color: rgba(255, 255, 255, 0.6);
    background-color: rgba(30, 143, 255, 0.5);
    justify-self: center;
    border-radius: 20px;
    display: flex;
    flex-direction: column;
    width: 80%;
    padding: 2%;
    height: fit-content;
}

/* Le lien qui permet de déplier/replier une section (comprend l'image de + et le nom de la section) */
.paragraph .rect .rect2 .targetLink {
    color: black;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    border-bottom: 1px solid black;
}

/* Quand une section est active */
#jv:target .targetLink, #prog:target .targetLink, #write:target .targetLink, #read:target .targetLink {
    border-bottom: none;
}

/* Idem mais excluant #read */
#jv:target, #prog:target, #write:target {
    border-bottom: 1px solid black;
}

/* L'image + */
.plus {
    display: inline;
    max-height: 20px;
    padding-bottom: 2%;
    padding-right: 5px;
}

/* L'image - (unused content) */
.moins {
    display: none;
    max-height: 20px;
    padding-bottom: 2%;
    padding-right: 5px;
}

/* Quand une section est active -> effet sur l'image + */
#jv:target .plus, #prog:target .plus, #write:target .plus, #read:target .plus {
    display: none;
}

/* Quand une section est active -> effet sur l'image - */
#jv:target .moins, #prog:target .moins, #write:target .moins, #read:target .moins {
    display: inline;
}

/* Contenu à cacher */
.paragraph .hide {
    display: none;
    margin: 0 0 2% 0;
    padding-bottom: 2%;
    
}

/* Quand une section est survolée */
#jv:hover h3, #prog:hover h3, #write:hover h3, #read:hover h3 {
    color: rgb(64, 64, 0);
}

/* <a href="https://www.flaticon.com/fr/icones-gratuites/prochain" title="prochain icônes">Prochain icônes créées par Roundicons - Flaticon</a> */
/* <a href="https://www.flaticon.com/fr/icones-gratuites/la-fleche" title="la flèche icônes">La flèche icônes créées par Freepik - Flaticon</a> */

/* <a href="https://www.flaticon.com/fr/icones-gratuites/signe-moins" title="signe moins icônes">Signe moins icônes créées par Mayor Icons - Flaticon</a> */
/* <a href="https://www.flaticon.com/fr/icones-gratuites/ajouter" title="ajouter icônes">Ajouter icônes créées par Pixel perfect - Flaticon</a> */

/* Quand une section est active (encore) */
#jv:target .hide, #prog:target .hide, #write:target .hide, #read:target .hide {
    border-top: 1px dashed black;
}

/* idem */
#jv:target .hide, #prog:target .hide, #write:target .hide, #read:target .hide {
    display: flex;
    flex-direction: column;
    align-items: flex-start;   
}

@media only screen and (max-width:768px)  {

    .sub-title-g, .sub-title-d {
        font-size: x-large;
    }

    .paragraph {
        display: flex;
        flex-direction: column;
        width: 95%;
    }

    .paragraph .rect {
        flex-direction: column;
        align-items: center;
    }

    .paragraph .imgTxt {
        flex-direction: column;
        align-items: center;
    }

    .paragraph .imgTxt .column {
        max-width: 90%;
    }

    .paragraph .imgTxt img {
        max-width: 90%;
        margin:5% 0;
    }

    .paragraph .rect .rect1 {
        max-width: 90%;
        margin-bottom: 5%;
    }

    .paragraph .rect .rect2 {
        width: 90%;
    }
}

@media only screen and (max-width:500px)  {

    .sub-title-g, .sub-title-d {
        font-size: larger;
    }

    .paragraph {
       font-size: medium;
    }

}

@media only screen and (max-width:300px)  {

    .sub-title-g, .sub-title-d {
        font-size: large;
    }

    .paragraph {
       font-size: small;
    }

}