/*Ajout des polices*/
@font-face {
    font-family: Bahnschrift;
    src: url(../fonts/bahnschrift.ttf);}
@font-face {
    font-family: Bahnschrift_light;
    src: url(../fonts/bahnschrift/light.ttf);}
    

/*Gridage du body pour faciliter l'alignement des éléments*/
body{
    width: 100vw;
    height: 100vh;
    margin:0;
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    grid-template-rows: repeat(1, 1fr) ;
    --couleurFond:#FFFFFF;
    background-color: var(--couleurFond);
    --couleurPolice:#0f0f0f;
    color: var(--couleurPolice);
}

/*A l'origine pour faire une partie de l'animation, mais nécessitera du Javascript.*/

main { 
    width: 100%;
    height: 100%;
    margin:0;
    grid-row: 1;
    grid-column: 1;
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    grid-template-rows: repeat(1, 1fr) ;
    transition: 1s;
}


h1{font-family: Bahnschrift;
    font-weight:bolder;
    font-size: 2vw;
    justify-self: center;  
}

p{display: none;}


/*Styles avec bordures / sans bordures mais ombrage,à décider plus tard*/

#checkboxNuit,.boutonAccueil, #box1, #box2, #box3, #box4,
#box2A, #box2B, #box4A, #box4B, #box4C,
#pageArticle1, #pageArticle2, #pageArticle3, #pageArticle4, #pageArticle5, #pageArticle6 {
    border: 1px solid var(--couleurBordure);
    /*box-shadow: 0 0 3vw 0.5vw rgba(131, 131, 131, 0.369);*/
    /*filter: drop-shadow(0 0 1.5rem rgba(0, 0, 0, 0.247));*/
}


/*cette classe sert à définir les dimensions et la position et les couleurs des box sous forme de variables.
Servira pour l'orientation de l'écran et le mode nuit*/
.var{
    --boxSideBig: 20vw;
    --boxSideMed: 10vw;
    --boxSideSmall: 7vw;

    --marge1Haut: -70vh;
    --marge3Haut: 70vh;
    --marge2Gauche: 50vw;
    --marge4Gauche : -50vw;
    --marge4BGauche: -75vw;
    --marge2_4AHaut:-50vh;
    --marge2_4_6hHaut:50vh;

    --couleurPolice:#0f0f0f;
    --couleurFond:#FFFFFF;
    --couleurBordure: #808080;
    --couleurBox: #0f0f0f ;

    --radiusLarge: 7vw;
    --radiusMedium: 4vw;
    --radiusSmall : 3vw ;
    
}

/*Le titre*/

#titre{
    display: block;
    z-index: 11;
    grid-row: 1;
    grid-column: 1;
    font-family: Bahnschrift;
    font-weight: bolder;
    font-size:7vw ;
    align-self: center;
    justify-self: center;
    opacity: 1;
    margin-top: -60vh;
    transition: 0.5s;
}

/*Le bouton accueil*/

.boutonAccueil{
    grid-row: 1;
    grid-column: 1;
    width : var(--boxSideBig);
    height: var(--boxSideBig);
    border-radius: var(--radiusLarge);
    background-color: var(--couleurFond);
    display: grid;
    align-self: center;
    justify-self: center;
    align-content: center;
    text-align: center ;
    font-family: Bahnschrift;
    font-weight:bolder;
    font-size: 2.6vw;
    z-index: 9;

}

/*La checkbox invisilbe (opacité 0%) par-dessus le bouton accueil*/
#accueilCheck{
    grid-row: 1;
    grid-column: 1;
    width: var(--boxSideBig);
    height: var(--boxSideBig);
    border-radius: var(--radiusLarge);
    align-self: center;
    justify-self: center;
    z-index: 10;
    opacity: 0;
}

/*les boites de sous-catégories*/
#box1, #box2, #box3, #box4{
    
    transition: 1s;
    grid-row: 1;
    grid-column: 1;
    background-color: var(--couleurFond);
    width: var(--boxSideMed) ;
    height: var(--boxSideMed) ;
    border-radius: var(--radiusMedium);
    display: grid;
    align-self: center;
    justify-self: center;
    align-content: center;
    text-align: center ;
    font-family: Bahnschrift;
    font-weight: bolder;
    font-size: 2.2vw;
    z-index: 5;
}
/*les checkboxes invisibles par-dessus les sous-catégories.
Elles commencent inactives car cachées (hidden). 
L'opacity ne fait que les rendre invisibles pour la suite, elles restent actives.*/
#boxcheck1, #boxcheck2, #boxcheck3, #boxcheck4{
    transition: 1s;
    grid-row: 1;
    grid-column: 1;
    width: var(--boxSideMed) ;
    height: var(--boxSideMed) ;
    border-radius: var(--radiusMedium);
    align-self: center;
    justify-self: center;
    z-index: 6;
    opacity: 0;
    visibility: hidden;
}

/*Le second niveau de sous-catégories*/
#box2A, #box2B, #box4A, #box4B, #box4C { 
    transition: 1s;
    grid-row: 1;
    grid-column: 1;
    background-color: var(--couleurFond);
    width: var(--boxSideSmall) ;
    height: var(--boxSideSmall) ;
    border-radius: var(--radiusSmall);
    display: grid;
    align-self: center;
    justify-self: center;
    align-content: center;
    text-align: center ;
    font-family: Bahnschrift;
    font-weight: bolder;
    font-size: 1.7vw;
    z-index: 3;
    
}


/*Les checkboxes invisibles du second niveau de catégories*/
#box2Acheck, #box2Bcheck, #box4Acheck, #box4Bcheck, #box4Ccheck{
    transition: 1s;
    grid-row: 1;
    grid-column: 1;
    width: var(--boxSideSmall) ;
    height: var(--boxSideSmall) ;
    border-radius: var(--radiusSmall);
    align-self: center;
    justify-self: center;
    z-index: 4;
    opacity: 0;
    visibility: hidden;
}

#pageArticle1, #pageArticle2, #pageArticle3, #pageArticle4, #pageArticle5, #pageArticle6{
    display: grid;
    transition: 1s;
    grid-row: 1;
    grid-column: 1;
    background-color: var(--couleurFond);
    width: 0vw ;
    height: 0vh ;
    border-radius: var(--radiusSmall);
    align-self: center;
    justify-self: center;
    align-content: center;
    text-align: center ;
    font-family: Bahnschrift;
    font-weight: bolder;
    font-size: 1.5vw;
    z-index: 11;
    opacity: 0;
}

/*Bouton retour de base*/



/*Formulaire contact*/
#pageArticle4{
    margin-top: 50vh;
    margin-left: 50vw;
}

#pageArticle4 form {
    transition:1s;
    height:0vh;
    width: 0vw;
    border: 1px;
    border-radius: var(--radiusSmall);
    align-self: center;
    justify-self: center;
    visibility: hidden;

}

#formField{
    display: grid;
    visibility: hidden;
    grid-template-columns: 1fr ;
    grid-template-rows: repeat(5, 1fr) ;
    transition: 1s;
    grid-row: 1;
    grid-column: 1;
    background-color: transparent;
    width: 0vw ;
    height: 0vh ;
    border: 1px transparent;
    align-self: center;
    justify-self: center;
    align-content: center;
    text-align: center ;
    font-family: Bahnschrift;
    opacity: 0;

}

/*Taille police pour les input field (comprend le placeholder)*/
#formField textarea, #formField input {font-size: 2vh;}

/*Boutons du formfield*/
#boutonEnvoi{
    width: 0vw;
    height: 0vw ;
    background-color: var(--couleurPolice);
    border: 1px solid var(--couleurBordure);
    border-radius: 2vw;
    color: var(--couleurFond);
    font-family: Bahnschrift;
    font-size: 2vh;
    display: grid;
    align-items: center;
    justify-items: center;
    align-self: center;
    justify-self: center;
    grid-row: 5;
    grid-column: 1 ;
    display: none;
}


#courriel, #sujet, #message{
    width: 0vw;
    height: 0vh;
    justify-self: center;
    align-self: center;
    font-family: Bahnschrift;
    font-weight: lighter;
}

#courriel{
    grid-row: 2;
    grid-column: 1 ;
    
}
#sujet{
    grid-row: 3;
    grid-column: 1 ;
    
}
#message{
    grid-row: 4;
    grid-column: 1 ;
    text-align:start;
    
}

/*Fenêtre bio*/
#pageArticle3{
    margin-bottom: 50vh;
    margin-left: 50vw;
}

#bioContainer{
    transition:1s;
    height:0vh;
    width: 0vw;
    border: 1px;
    border-radius: var(--radiusSmall);
    align-self: center;
    justify-self: center;
    visibility: hidden;
}
#bioPhoto{
    transition: 1s;
    width: 0vw ;
    height: 0vw ;
    border-radius: 0vw ;
    border: 1px solid var(--couleurBordure) ;
    align-self: center;
    justify-self: center;
    
}

#pageArticle3 p{
    width: 0vw ;
    height: 0vw ;
    justify-self: center;
    align-self: center;
    text-align: justify;
}
/*Mentions legales */
#pageArticle5{
    margin-top: 50vh;
    margin-left: 50vw;
    margin-right: 50vw;
}

#mentionsLegalesContainer{
    transition:1s;
    height:0vh;
    width: 0vw;
    border: 1px;
    border-radius: var(--radiusSmall);
    align-self: center;
    justify-self: center;
    visibility: hidden;
}

#pageArticle5 p{
    width: 0vw ;
    height: 0vw ;
    justify-self: center;
    align-self: center;
    text-align: justify;
}

/*Page projets*/

#pageArticle1{
    margin-bottom: 50vh;
    margin-left: 50vw;
    margin-right: 50vw;
}

#projetsContainerA{
    display:grid;
    transition:1s;
    height:0vh;
    width: 0vw;
    border: 1px;
    border-radius: var(--radiusSmall);
    align-self: center;
    justify-self: center;
    visibility: hidden;
}


#imageContainer1, #imageContainer2, #imageContainer3, #imageContainer4 {
    transition: 1s;
    width: 0vw ;
    height: 0vw ;
    border-radius: 10% ;
    border: 1px solid var(--couleurBordure) ;
    align-self: center;
    justify-self: center;
    background-size:cover;
    background-position: center center;
    background-repeat: no-repeat;
    margin: 0px;
    
}

#imageContainer1{
    background-image: url(../images/ProjPlaceholderA.png);
    grid-row: 2;
    grid-column: 1;
}
#imageContainer2{
    background-image: url(../images/ProjPlaceholderB.png);
    grid-row:3 ;
    grid-column: 2;
}
#imageContainer3{
    background-image: url(../images/ProjPlaceholderC.png);
    grid-row: 4 ;
    grid-column: 1 ;
}
#imageContainer4{
    background-image: url(../images/ProjPlaceholderD.png);
    grid-row: 5 ;
    grid-column: 2;
}


#texteProj1, #texteProj2, #texteProj3, #texteProj4{
    width: 0vw ;
    height: 0vw ;
    justify-self: center;
    align-self: center;
    text-align: justify;
    align-items: center;
    overflow-y: scroll;
}


/*sur clic sur la checkbox invisible du bouton accueil,déploie les sous-catégories
et leurs checkboxes invisibles, les rendant actives via "visibility" (mais elles sont 
toujours invisibles car leur "opacity" reste à 0). Le titre s'efface.*/

#accueilCheck:checked ~ #titre {visibility: hidden; opacity: 0;}

#accueilCheck:checked ~ #box1, #accueilCheck:checked ~ #boxcheck1{margin-top: var(--marge1Haut); visibility: visible;}

#accueilCheck:checked ~ #box2, #accueilCheck:checked ~ #boxcheck2,
#accueilCheck:checked ~ #box2A, #accueilCheck:checked ~ #box2Acheck, 
#accueilCheck:checked ~ #box2B, #accueilCheck:checked ~ #box2Bcheck{
    margin-left: var(--marge2Gauche); 
    visibility: visible;
}

#accueilCheck:checked ~ #box3, #accueilCheck:checked ~ #boxcheck3{margin-top: var(--marge3Haut); visibility: visible;}

#accueilCheck:checked ~ #box4, #accueilCheck:checked ~ #boxcheck4,
#accueilCheck:checked ~ #box4A, #accueilCheck:checked ~ #box4Acheck, 
#accueilCheck:checked ~ #box4B, #accueilCheck:checked ~ #box4Bcheck,
#accueilCheck:checked ~ #box4C, #accueilCheck:checked ~ #box4Ccheck{
    margin-left: var(--marge4Gauche); 
    visibility: visible;
}

/*Sur clic sur la checkbox d'une sous catégorie, déploie les sous-catégories de second niveau.
Si clic sur accueil pendant que sous-cat de second niveau déployées, elles se replient automatiquement. 
Penser à zoomer et décaler le bouton accueil dans la direction voulue*/

#accueilCheck:checked ~ #boxcheck2:checked ~ #box2A,
#accueilCheck:checked ~ #boxcheck2:checked ~ #box2Acheck {margin-top: var(--marge2_4AHaut);}

#accueilCheck:checked ~ #boxcheck2:checked ~ #box2B,
#accueilCheck:checked ~ #boxcheck2:checked ~ #box2Bcheck {margin-top: var(--marge2_4_6hHaut);}


#accueilCheck:checked ~ #boxcheck4:checked ~ #box4A,
#accueilCheck:checked ~ #boxcheck4:checked ~ #box4Acheck {margin-top: var(--marge2_4AHaut);}

#accueilCheck:checked ~ #boxcheck4:checked ~ #box4B,
#accueilCheck:checked ~ #boxcheck4:checked ~ #box4Bcheck {margin-left: var(--marge4BGauche)}

#accueilCheck:checked ~ #boxcheck4:checked ~ #box4C,
#accueilCheck:checked ~ #boxcheck4:checked ~ #box4Ccheck {margin-top: var(--marge2_4_6hHaut);}




/*Niveau 3 des sous-catégories : articles, formulaires, etc.*/


/*CONTACT FORM*/
/*Déploiement page article pour contact form*/
#accueilCheck:checked ~ #boxcheck2:checked ~ #box2Bcheck:checked ~ #pageArticle4 {
    grid-template-rows: 1fr 4fr;
    margin-top: 0vh;
    margin-left: 0vw;
    width: 80vw ;
    height: 80vh ;
    opacity: 1;
}

/*Utilisation de la box de sous-catégorie niveau 2 pour servir de bouton retour*/
#accueilCheck:checked ~ #boxcheck2:checked ~ #box2Bcheck:checked,
#accueilCheck:checked ~ #boxcheck2:checked ~ #box2B:has(+ #box2Bcheck:checked){
    margin-top: -72vh ;
    margin-left: -72vw ;
    z-index: 22;
    width: var(--boxSideMed) ;
    height: var(--boxSideMed) ;
}

#accueilCheck:checked ~ #boxcheck2:checked ~ #box2B:has(+ #box2Bcheck:checked) span{display:none;}
#accueilCheck:checked ~ #boxcheck2:checked ~ #box2B:has(+ #box2Bcheck:checked):after {content:"RETOUR"}

/*Déploiement contact form*/
#accueilCheck:checked ~ #boxcheck2:checked ~ #box2Bcheck:checked ~ #pageArticle4 form {
 width: 74vw ;
 height: 74vh ;
 visibility: visible;
}

/*Déploiement fieldset du formulaire*/
#accueilCheck:checked ~ #boxcheck2:checked ~ #box2Bcheck:checked ~ #pageArticle4 form #formField {
    margin-top: 0vh;
    margin-left: 0vw;
    visibility:visible;
    opacity: 1;
    display: grid;
    height: 60vh;
    width: 72vw;
    padding: 0;
    
}

/*Déploiement de tous les éléments dans le fieldset du formulaire (paramètres généraux) */
#accueilCheck:checked ~ #boxcheck2:checked ~ #box2Bcheck:checked ~ #pageArticle4 form #formField *{
    transition: 1s; 
    display: grid;
    width: 50vw;
    height: 5vh;
}

/*paramètres supplémentaires bouton "envoi"*/
#accueilCheck:checked ~ #boxcheck2:checked ~ #box2Bcheck:checked ~ #pageArticle4 form #formField #boutonEnvoi {
    display: grid;

    height: fit-content;
}

/*paramètres supplémentaires field message*/
#accueilCheck:checked ~ #boxcheck2:checked ~ #box2Bcheck:checked ~ #pageArticle4 form #formField #message {
    height: 20vh;
} 


/*BIO - Déploiement*/

/*Déploiement page article bio*/
#accueilCheck:checked ~ #boxcheck2:checked ~ #box2Acheck:checked ~ #pageArticle3 {
    margin-bottom: 0vh;
    margin-left: 0vw;
    width: 80vw ;
    height: 80vh ;
    opacity: 1;
}

/*Utilisation de la box de sous-catégorie niveau 2 pour servir de bouton retour*/

#accueilCheck:checked ~ #boxcheck2:checked ~ #box2Acheck:checked,
#accueilCheck:checked ~ #boxcheck2:checked ~ #box2A:has(+ #box2Acheck:checked){
    margin-top: -72vh ;
    margin-left: -72vw ;
    z-index: 22;
    width: var(--boxSideMed) ;
    height: var(--boxSideMed) ;
}
#accueilCheck:checked ~ #boxcheck2:checked ~ #box2A:has(+ #box2Acheck:checked) span{display:none;}
#accueilCheck:checked ~ #boxcheck2:checked ~ #box2A:has(+ #box2Acheck:checked):after {content:"RETOUR"}

/*Déploiement Container bio*/
#accueilCheck:checked ~ #boxcheck2:checked ~ #box2Acheck:checked ~ #pageArticle3 #bioContainer{
    display: grid;
    width: 74vw ;
    height: 74vh ;
    visibility: visible;
    grid-template-columns: 1fr;
    grid-template-rows: repeat(3, 1fr);
    overflow-y: scroll;
}

/*Déploiement cadre photo bio*/

#accueilCheck:checked ~ #boxcheck2:checked ~ #box2Acheck:checked ~ #pageArticle3 #bioPhoto{
    grid-row: 1;
    grid-column: 1;
    width: 20vw ;
    height: 20vw ;
    border-radius: 10vw ;
    content: url(../images/photo_placeholder.png);
    object-fit: cover;
}

#accueilCheck:checked ~ #boxcheck2:checked ~ #box2Acheck:checked ~ #pageArticle3 p{
    grid-row: 2;
    grid-column: 1;
    width: 70vw ;
    height: fit-content;
    display: block; 
}

/*Déploiement Mentions légales*/

#accueilCheck:checked ~ #boxcheck3:checked ~ #pageArticle5 {
    margin-top: 0vh;
    margin-left: 0vw;
    margin-right: 0vw;
    width: 80vw ;
    height: 80vh ;
    opacity: 1;
}



/*Utilisation de la box de sous-catégorie pour servir de bouton retour*/

#accueilCheck:checked ~ #boxcheck3:checked,
#accueilCheck:checked ~ #box3:has(+ #boxcheck3:checked){
    margin-top: -72vh ;
    margin-left: -72vw ;
    z-index: 22;
}

#accueilCheck:checked ~ #box3:has(+ #boxcheck3:checked) span{display:none;}
#accueilCheck:checked ~ #box3:has(+ #boxcheck3:checked):after {content:"RETOUR"}

/*Container sous forme de grid, plus pratique*/

#accueilCheck:checked ~ #boxcheck3:checked ~ #pageArticle5 #mentionsLegalesContainer{
    display: grid;
    width: 74vw ;
    height: 74vh ;
    visibility: visible;
    grid-template-columns: 1fr;
    grid-template-rows: repeat(3, 1fr);
    overflow-y: scroll;
    
}
#accueilCheck:checked ~ #boxcheck3:checked ~ #pageArticle5 #mentionsLegalesContainer h1{
    grid-row: 1;
    grid-column: 1;
    width: 50vw ;
    height: fit-content;
    z-index: 19;
}

#accueilCheck:checked ~ #boxcheck3:checked ~ #pageArticle5 #mentionsLegalesContainer p{
    grid-row: 2;
    grid-column: 1;
    width: 69vw ;
    height: fit-content;
    display:block;
    z-index: 15;
    
}


#accueilCheck:checked ~ #boxcheck3:checked ~ #pageArticle5 #mentionsLegalesContainer a {
    
    grid-row: 3;
    grid-column: 1;
    z-index: 19;
}

/*Déploiement Projets*/
#accueilCheck:checked ~ #boxcheck1:checked ~ #pageArticle1{
    margin-bottom: 0vh;
    margin-left: 0vw;
    margin-right: 0vw;
    width: 80vw ;
    height: 80vh ;
    opacity: 1;
}

/*Utilisation de la box de sous-catégorie pour servir de bouton retour*/

#accueilCheck:checked ~ #boxcheck1:checked,
#accueilCheck:checked ~ #box1:has(+ #boxcheck1:checked){
    margin-top: -72vh ;
    margin-left: -72vw ;
    z-index: 22;
}

#accueilCheck:checked ~ #box1:has(+ #boxcheck1:checked) span{display:none;}
#accueilCheck:checked ~ #box1:has(+ #boxcheck1:checked):after {content:"RETOUR"}


/*déploiement container sous forme de grid pour les projets*/

#accueilCheck:checked ~ #boxcheck1:checked ~ #pageArticle1  #projetsContainerA{
    display: grid;
    width: 76vw ;
    height: 78vh ;
    grid-template-columns:repeat(2, 1fr);
    grid-template-rows: repeat(6, 1fr);
    column-gap: 5vw;
    row-gap: 10vh;
    visibility: visible;
    overflow-y: scroll;
}

#accueilCheck:checked ~ #boxcheck1:checked ~ #pageArticle1  #projetsContainerA h1{
    grid-row: 1;
    grid-column: 1 / span 2;
    width: 50vw ;
    height: fit-content;
   
    
}

/*Images de la galerie*/
#accueilCheck:checked ~ #boxcheck1:checked ~ #pageArticle1 #projetsContainerA #imageContainer1, 
#accueilCheck:checked ~ #boxcheck1:checked ~ #pageArticle1 #projetsContainerA #imageContainer2, 
#accueilCheck:checked ~ #boxcheck1:checked ~ #pageArticle1 #projetsContainerA #imageContainer3, 
#accueilCheck:checked ~ #boxcheck1:checked ~ #pageArticle1 #projetsContainerA #imageContainer4{
    visibility: visible;
    width: 99%;
    height: 99%; 
}

/*Texte de la galerie*/

#accueilCheck:checked ~ #boxcheck1:checked ~ #pageArticle1 #projetsContainerA p{
    display: block;
    visibility: visible;
}

#accueilCheck:checked ~ #boxcheck1:checked ~ #pageArticle1 #projetsContainerA #texteProj1{
    width: 100%;
    height: 100%;
    grid-row: 2;
    grid-column: 2;

}

#accueilCheck:checked ~ #boxcheck1:checked ~ #pageArticle1 #projetsContainerA #texteProj2{
    width: 100%;
    height: 100%;
    grid-row: 3;
    grid-column: 1;

}

#accueilCheck:checked ~ #boxcheck1:checked ~ #pageArticle1 #projetsContainerA #texteProj3{
    width: 100%;
    height: 100%;
    grid-row: 4;
    grid-column: 2;

}

#accueilCheck:checked ~ #boxcheck1:checked ~ #pageArticle1 #projetsContainerA #texteProj4{
    width: 100%;
    height: 100%;
    grid-row: 5;
    grid-column: 1;

}


/*RESEAUX - Déploiement*/

#box4A, #box4B,#box4C {
    object-fit: contain;
    object-fit: contain;
}

#box4A { 
    content:url(../images/facebook.png)

}
#box4B {
    content: url(../images/github.png);

}
#box4C {
    content: url(../images/stacko.png);

}


/*Responsive design, portrait ou paysage*/

/*mode paysage*/

@media only screen and (orientation: landscape){

    #formField textarea, #formField input, #boutonEnvoi{
        font-size: 2vw;
    }
    #pageArticle1, #pageArticle2, #pageArticle3, #pageArticle4, #pageArticle5, #pageArticle6{
        font-size: 2vw;
    }

    h1{font-size: 3vw}

    #accueilCheck:checked ~ #boxcheck1:checked ~ #pageArticle1 #projetsContainerA #texteProj1{

        width: 100%;
        height: 20vw;
    }
    
    #accueilCheck:checked ~ #boxcheck1:checked ~ #pageArticle1 #projetsContainerA #texteProj2{
        width: 100%;
        height: 20vw; 
    }
    
    #accueilCheck:checked ~ #boxcheck1:checked ~ #pageArticle1 #projetsContainerA #texteProj3{
        width: 100%;
        height: 20vw;  
    }
    
    #accueilCheck:checked ~ #boxcheck1:checked ~ #pageArticle1 #projetsContainerA #texteProj4{
        width: 100%;
        height: 20vw;
    }
   
    #accueilCheck:checked ~ #boxcheck1:checked ~ #pageArticle1 #projetsContainerA #imageContainer1{
        height: 25vw;
        
    }
    #accueilCheck:checked ~ #boxcheck1:checked ~ #pageArticle1 #projetsContainerA #imageContainer2{
        height: 25vw;
    }
    #accueilCheck:checked ~ #boxcheck1:checked ~ #pageArticle1 #projetsContainerA #imageContainer3{
        height: 25vw;
    }
    #accueilCheck:checked ~ #boxcheck1:checked ~ #pageArticle1 #projetsContainerA #imageContainer4{
        height: 25vw;
    }
    
}

/*Mode portrait*/

@media only screen and (orientation:portrait){

    .var{
    --boxSideBig:20vh;
    --boxSideMed:10vh;
    --boxSideSmall: 7vh;

    --radiusLarge: 7vh;
    --radiusMedium: 4vh;
    --radiusSmall : 3vh ;


    --marge2Gauche: 55vw;
    --marge4Gauche : -55vw;
    --marge1Haut:-50vh;
    --marge3Haut:50vh;
    --marge4BGauche: -87vw;
    --marge2_4AHaut:-35vh;
    --marge2_4_6hHaut:35vh;


    }

    #titre{
        font-size: 7vh;

    }
    #pageArticle1, #pageArticle2, #pageArticle3, #pageArticle4, #pageArticle5, #pageArticle6{
        font-size: 2vh;
    }
    .boutonAccueil {
        font-size: 3vh;
    }
    
    #box1, #box2, #box3, #box4 {
        font-size: 2vh;
    }
    
    #box2A, #box2B, #box4A, #box4B, #box4C {
        font-size: 1.7vh;
    }

    h1{font-size: 3vh;}

    #accueilCheck:checked ~ #boxcheck1:checked ~ #pageArticle1  #projetsContainerA{
        grid-template-columns:1fr;
        grid-template-rows: repeat(9, 1fr);
        row-gap: 2vh;
    }

    #accueilCheck:checked ~ #boxcheck1:checked ~ #pageArticle1  #projetsContainerA h1{
        grid-row: 1;
        grid-column: 1 ;
        
    }

    #accueilCheck:checked ~ #boxcheck1:checked ~ #pageArticle1 #projetsContainerA #texteProj1{
        grid-row: 3;
        grid-column: 1;
        width: 100%;
        height: 20vh;
    }
    
    #accueilCheck:checked ~ #boxcheck1:checked ~ #pageArticle1 #projetsContainerA #texteProj2{
        grid-row: 5;
        grid-column: 1;
        width: 100%;
        height: 20vh;    
    }
    
    #accueilCheck:checked ~ #boxcheck1:checked ~ #pageArticle1 #projetsContainerA #texteProj3{
        grid-row: 7;
        grid-column: 1;
        width: 100%;
        height: 20vh;    
    }
    
    #accueilCheck:checked ~ #boxcheck1:checked ~ #pageArticle1 #projetsContainerA #texteProj4{
        grid-row: 9;
        grid-column: 1;
        width: 100%;
        height: 20vh;
    }
   
    #accueilCheck:checked ~ #boxcheck1:checked ~ #pageArticle1 #projetsContainerA #imageContainer1{
        grid-row: 2;
        grid-column: 1;
        height: 25vh;
        
    }
    #accueilCheck:checked ~ #boxcheck1:checked ~ #pageArticle1 #projetsContainerA #imageContainer2{
        grid-row:4 ;
        grid-column: 1;
        height: 25vh;
    }
    #accueilCheck:checked ~ #boxcheck1:checked ~ #pageArticle1 #projetsContainerA #imageContainer3{
        grid-row: 6 ;
        grid-column: 1 ;
        height: 25vh;
    }
    #accueilCheck:checked ~ #boxcheck1:checked ~ #pageArticle1 #projetsContainerA #imageContainer4{
        grid-row: 8 ;
        grid-column: 1;
        height: 25vh;
    }
   
}

/*Bonus : mode nuit (en construction)*/
/*

#checkboxNuit{
    grid-row: 1;
    grid-column: 1;
    width: 5vw;
    height: 5vw;
    margin-top: -90vh;
    margin-left: 90vw;
    border: 2px solid black;
    align-self: center;
    justify-self: center;
    z-index: 30;
    opacity: 1;
}

#checkboxNuit:checked ~ #modeNuitLabel{color:#FFFFFF}
body:has(main #checkboxNuit:checked) {
   --couleurFond:#0f0f0f;
   --couleurPolice : #FFFFFF;
   --CouleurBordure: #808080;
   --CouleurBox : #FFFFFF ;
}

#checkboxNuit:checked ~.var{
   --couleurFond:#0f0f0f;
   --couleurPolice : #FFFFFF;
   --CouleurBordure: #808080;
   --CouleurBox : #FFFFFF ;
}
*/