/*page projet*/
/*correction marge*/
.listeProjet>.containeurInfosProjet:last-child, .textcontent>p:last-child{
    margin-bottom: 0;
}


.page{
    margin-top: var(--header_height);
    display: grid;
    grid-template: auto / 50% 50%;
    height: calc(100vh - var(--header_height));
}
.listeProjet{
    background-color: white;
    grid-column: 1;
    grid-row: 1 / 2;
    display: flex;
    flex-direction: column;
}


/*@keyframes delay-overflow {
    from {
        height: 100%;
        overflow: scroll;
        background-color: aqua;
    }
}*/

/* je crois que ça sert à rien
.lien{
    height: 100%;
}*/
.containeurInfosProjet{
    padding-bottom: var(--marge_general1);
}


.partieDroite{
    z-index: 5;
    grid-column: 2;
    grid-row: 1 / 2;
    height: 100%;
    background-color: white;

    border-left:  var(--borderThikness) solid;
}

/*Gestion orga images*/
.imagesContaineur {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--marge_general1);
    grid-auto-flow: dense; /* Permet de combler les trous intelligemment */
}

/* Les images horizontales s'étendent sur deux colonnes */
.lienImage[data-orientation="landscape"] {
    grid-column: span 2;
}

/* Ajustement automatique pour les images verticales */
.lienImage[data-orientation="portrait"] {
    grid-column: span 1;
}


/*text content*/
.surLeCote{
    margin-left: 100% !important;
}
.containeurTextcontentProjet{
    z-index: 1;
    grid-column: 1;
    grid-row: 1 / 2;
    background-color: white;
    min-height: 100%;
    width: 100%;

    margin-left: calc(var(--borderThikness) * -1);
    border-left:  var(--borderThikness) solid;

    transition: margin-left var(--timing1) ease-in-out,
                height 0s var(--timing1);
}
.containeurTextcontentProjet{
    transition: margin-left var(--timing1) ease-in-out,
                height 0s var(--timing1);
}
.containeurInfosProjet{
    display: grid;
    grid-template: auto auto / auto auto;
}

.titreProjetPortfolio{
    grid-column: 1 / 2;
    grid-row: 1 / 2;
}
.tags{
    grid-column: 1 / 3;
    grid-row: 2 / 3;
}
.retourZone{
    grid-column: 2 / 3;
    grid-row: 1 / 2;
    text-align: right;
}

.retour{
    cursor: pointer;
    margin-left: var(--marge_general1);
}


.tags{
    margin-top: 0;
    font-size: 1.2rem;
    color: gray;
}
.tag{
    text-wrap: nowrap;
    padding: 2px 0px;
    font-family: "Inter";
}
.tag::after{
    content: ",";
}
.tag:last-child::after{
    content: "";
}

/*comportement du scroll*/
.containeurTextcontentProjet, .listeProjet, .partieDroite{
    /* transition: height 0s var(--timing1); */
    height: 100%;
    overflow: scroll;

    /*Vire la scroll bar*/
    -ms-overflow-style: none;  /* IE and Edge */
    scrollbar-width: none;  /* Firefox */
}

.scrolHidden{
    overflow-y: hidden !important;
}

 /* Hide scrollbar for Chrome, Safari and Opera */
.containeurTextcontentProjet::-webkit-scrollbar, .listeProjet::-webkit-scrollbar, .partieDroite::-webkit-scrollbar {
    display: none;
}



/*image pleine page*/
.blocImagePleinePage{
    display: none;    
}

/*ici*/
/*.blocImagePleinePage:target{
    z-index: 1000;
    position: fixed;
    top: 0;
    left: 0;
    display: flex;
    width: 100vw;
    height: 100vh;
    background-color: white;
}*/

.blocImagePleinePage>img{
    margin: auto;
    max-height: 100%;
}
.signeFermetureImagePleinePage{
    z-index: 1001;
    position: fixed;
    top: var(--marge_general1);
    right: var(--marge_general1);
    color: white;
    mix-blend-mode: difference;
}
.signeFermetureImagePleinePage{
   text-decoration: none !important;
}

.lien:hover{
    cursor: pointer;
}

.lien:hover > .textGrand1 {
    text-decoration: underline;
    text-decoration-thickness: var(--underlineSize);
    text-underline-offset: var(--underlineOffset);
}

.DisplayNoneOrdi{
    display: none;
}

/*une seul colone d'image*/
@media (max-width: 1100px) {
    .lienImage[data-orientation="portrait"] {
        grid-column: span 2;
    }
}

/*passage en burger pour projet*/
@media (max-width: 900px) {
    .page{
        overflow-x: hidden;
        grid-template: none; 
        height: auto;
    }
    .listeProjet{
        grid-column: 1 / 3;
        grid-row: 1 / 2;
        display: flex;
        flex-direction: column;
    }
    .containeurTextcontentProjet{
        grid-column: 1 / 3;
        grid-row: 1 / 2;
        
        min-height: 0;
        width: 100%;
    }
    .partieDroite{
        padding-top: 0; /*correction marge entre bloc*/
        grid-column: 1 / 3;
        grid-row: 2 / 3;

        margin-left: calc(var(--borderThikness) * -1);

        transition: margin-left var(--timing1) ease-in-out;

        width: 100%;
    }
    .surLeCotePhone{
        margin-left: 100% !important;
    }
    .DisplayPhone{
        display: block;
    }

    .hauteurNul{
        height: 0;
        overflow: visible;
    }
    .lien:hover > .textGrand1 {
        text-decoration: none;
    }


    /*.labelInfoMenu{
        font-family: "Inter";
        font-size: 1rem;
        grid-column: 1 / 3;
        grid-row: 1 / 1;
        margin: var(--marge_general1) var(--marge_general1) 0 var(--marge_general1);
        display: flex;
        justify-content: center;
    }*/
    
}



/* J'ai l'impression que ça servait à rien donc à suprimer si ça reste longtemps
.seg1-guzenshlag #listeProjet{
    display: none !important;
    transition: display 0s var(--timing1);
}
/*
            setTimeout(() => {
                listeProjet.classList.add("none");
            }, 500);
*/