/* Transition */

#transition {

    width: 100vw;
    position: fixed;
    z-index: 1000;
    background: var(--Blue);
    display: flex;
    justify-content: center;
    align-items: center;
    transition : ease-in 0.4s;
    overflow: hidden;

    pointer-events: none;
}

#transition > img {
    height: 100px;
}

.coucou {
    height: 0vh;
}

.bye {
    bottom: 0vh;
    height: 100vh;
}

/* header */

#header {
    position: fixed;
    left: 1vh;
    right: 1vh;

    display: grid;
    grid-template-columns: fit-content(100%) 1fr fit-content(100%);
    grid-template-rows: repeat(2, fit-content(100%));
    align-items: center;
    padding: 20px;
    gap: 0px 10px;
    grid-template-areas: 
        "Logo . burger"
        "menu menu menu";

    font-family: var(--Barracuda);
    font-size: 1.2rem;
    font-weight: 700;
    border-radius: var(--Rad-ext);    

    transition: 0.3s;

    z-index: 100;
}

.headTop {
    top: 1vh;
}

.Burger {
    grid-area: burger;

    background: #00000000;
    border: 0px;
}

.Burger img {
    height: 40px;
}

.Burger .CloseIcon {
    display: none;
}

.change_BG_color {
    background-color: var(--Black);
}

.Menu {
    grid-area: menu;

    display: grid;
    grid-template-columns: repeat(3,fit-content(100%));
    grid-template-rows: 1fr;
    align-items: center;
    gap: 0px 10px;

    height: 0px;
    margin-top: 0px;
    overflow: hidden;
    transition: 0.3s;
}

.ouvert {
    height: 40px;
}

.ferme {
    height: 0px;
}

.NavLink {
    display: block;
    height: 40px;
    padding: 10px;
    color: var(--White);
    text-decoration: none;
    border-radius: 30px;
    background: radial-gradient(61.67% 61.67% at 50% 50%, var(--Blue) 0%, rgba(38, 77, 228, 0.00) 100%) no-repeat;
    background-position: -100px 0px;
    /* border: solid 5px var(--White); */
    /* background-position: -10px 0px; */
    transition: 0.5s;
}

.NavLink:hover{
    background: radial-gradient(61.67% 61.67% at 50% 50%, var(--Blue) 0%, rgba(38, 77, 228, 0.00) 100%) no-repeat;
    background-position: -10px 0px;
}

.NavLink::after {
    display: block;
    content: "";
    background-color: var(--White);
    height: 3px;
    width: 0%;
    transition: 0.3s;
}

.NavLink:hover::after {
    width: 90%;
}
/* #NavAc {
    grid-area: Ac;
}

#NavProj {
    grid-area: Proj;
}

#NavProp {
    grid-area: Prop;
} */

.logo {
    display: flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    grid-area: Logo;
}

.logo > img {
    height: 40px;
}

.logo > p {
    margin: 0px;
    color: var(--White);
}

.contentTag {
    height: -webkit-max-content;
    height: -moz-max-content;
    height: max-content;
    width: 100%;
    overflow: hidden;
}

.tagDiv {
    display: flex;
    gap: 5px;
    height: -webkit-fit-content;
    height: -moz-fit-content;
    height: fit-content;
    width: -webkit-fit-content;
    width: -moz-fit-content;
    width: fit-content;
}

.tag {

    --Bck : #254be4e6;
    --Txt : var(--White);

    padding: 5px 10px;
    margin: 0px;
    border-radius: var(--Rad-ext);
    background-color: var(--Bck);
    font-size: 0.688rem;
    width: -webkit-max-content;
    width: -moz-max-content;
    width: max-content;
    font-weight: 500;
    color: var(--Txt);
}

.voirProj {
    display: flex;
    gap: 5px;
    align-items: center;
    height: -webkit-fit-content;
    height: -moz-fit-content;
    height: fit-content;
    width: -webkit-fit-content;
    width: -moz-fit-content;
    width: fit-content;
    padding: 5px 15px;
    background-color: var(--White);
    border-radius: var(--Rad-ext);
    color: var(--Black);
}

.voirProj > .arrowR {
    height: 30px;
    width: 30px;
    border-radius: var(--Rad-ext);
}

.outil {
    height: 40px;
    width: 40px;
}

/* Cards projet */

.CardsProj {
    --urlCover : url(../img/projet/IME/IME_01.png);
    --BckHover : var(--White);

    position: relative;
    display: grid;
    gap: 10px;
    width: 270px;
    height: -webkit-fit-content;
    height: -moz-fit-content;
    height: fit-content;
    padding: 10px;
    border-radius: var(--Rad-ext);
    background-color: var(--Black);
    text-decoration: none;
    text-align: left;
    color: var(--White);
    transition: 0.3s;
    overflow: hidden;
    z-index: 2;
}

.CardsProj:hover {
    box-shadow: -10px 10px 0px var(--BckHover);
    transform: translate(5px, -5px);
    z-index: 3;
}

.CardsProj * {
    margin: 0px;
}

.cover {
    display: flex;
    justify-content: end;
    width: auto;
    height: 185px;
    border-radius: var(--Rad-int);
    background: var(--urlCover);
    background-position: center;
    background-size: cover;
    transition: 0.3s;
}

.titleCards {
    display: flex;
    flex-direction: column;
    gap: 5px;
    align-items: start;
    max-width: 100%;
    overflow: hidden;
}

.tCards {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.date {
    font-weight: 500;
    font-size: 0.875rem;
    color: var(--Grey);
}

.basCards {
    display: flex;
    justify-content: space-between;
}

.outilCards {
    display: flex;
    gap: 5px;
}

.cache {
    height: 0px;
    overflow: hidden;
    transition: 0.3s;
    display: none;
}

.voirProj {
    padding: 5px;
    transform: translate(15%, -15%) scale(1) rotate(-40Deg);
    transition: 0.3s;
    transition-timing-function: cubic-bezier(0.870, 0.075, 0.300, 1.650);
    
}

.voirProj > .arrowR {
    height: 20px;
    width: 20px;
}


/* Bouton */

.Btn {
    background-color: var(--Blue);
    color: var(--White);
    padding: 24px;
    font-size: 1.25rem;
    height: -webkit-fit-content;
    height: -moz-fit-content;
    height: fit-content;
    width: -webkit-fit-content;
    width: -moz-fit-content;
    width: fit-content;
    border-radius: var(--Rad-int);
    transition: 0.3s;
    margin-top: 20px;
}

.BtnProj {
    padding: 16px 24px ;
}

.Btn:hover {
    background-color: var(--Black);
    transform: scale(1.1);
}

/* Figure */

figure {
    margin: 0px;
    height: -webkit-fit-content;
    height: -moz-fit-content;
    height: fit-content;
    width: -webkit-fit-content;
    width: -moz-fit-content;
    width: fit-content;
    text-align: center;
}

/* Footer */

footer {
    display: grid;
    grid-template-columns: 1fr fit-content(100%);
    grid-template-rows: 1fr;
    grid-template-areas: 
        "NL RF"
        "M M"
        "P P"
        "FI FI";
    align-items: center;
    gap: 10px;

    padding: 40px 20px 50px;
    background-color: var(--White);
}

footer > p {
    margin: 5px 0px;
}

footer .mask {
    display: none;
}

#NameLink {
    grid-area: NL;
}

#Email {
    grid-area: M;
}

#Print {
    grid-area: P;
}

#FootInfo {
    grid-area: FI;
}

#ResFoot {
    grid-area: RF;

    display: grid;
    grid-template-columns: repeat(6, -webkit-min-content);
    grid-template-columns: repeat(6, min-content);
    gap: 5px;
    justify-content: end;
}

.FootIcon {
    height: 25px;
    width: 25px;
}


.Active::after {
    content: "";
    display: block;
    height: 3px;
    width: 90%;
    background: var(--Blue);
}

/*p {
    cursor: url(../img/asset/Txt_perso.svg) 9 10, auto;
}*/


@media (min-width: 600px) {

    footer {
        grid-template-columns: 1fr -webkit-min-content;
        grid-template-columns: 1fr min-content;
        grid-template-rows: -webkit-min-content -webkit-min-content 20px -webkit-min-content;
        grid-template-rows: min-content min-content 20px min-content;
        grid-template-areas: 
            "NL M"
            "P ."
            ". ."
            "FI RF";
        gap: 0px;
    
        padding: 40px 40px 50px;
    }

    
}

@media (min-width: 800px) {
    /* * {
        background-color: red;
    } */

    #header {
        
        grid-template-columns: fit-content(100%) 1fr fit-content(100%);
        grid-template-rows: 1fr;
        grid-template-areas: "Logo . menu";
    }

    .Burger {
        display: none;
    }

    .Menu {
        height: -webkit-fit-content;
        height: -moz-fit-content;
        height: fit-content;
        margin-top: 0px;
    }

    .CardsProj {
        width: 400px;
        height: 366px;
        padding: 20px;
        gap: 10px;
    }
    
    .CardsProj:hover {
        box-shadow: -10px 10px 0px var(--BckHover);
        transform: translate(5px, -5px);
        z-index: 3;
    }

    .cover {
        display: flex;
        justify-content: end;
        width: auto;
        height: 250px;
        border-radius: var(--Rad-int);
        background: var(--urlCover);
        background-position: center;
        background-size: cover;
        transition: 0.3s;
    }
    
    .CardsProj:hover .cover{
        height: 185px;
    }

    .titleCards {
        flex-direction: row;
        align-items: center;
        overflow: visible;
        gap: 10px;
    }

    .tagDiv {
        flex-wrap: nowrap;
    }
    
    .tag {
        font-size: 0.875rem;
    }
    
    .voirProj {
        padding: 5px;
        transform: translate(25%, -25%) scale(0) rotate(0Deg);
        transition: 0.3s;
        transition-timing-function: cubic-bezier(0.870, 0.075, 0.300, 1.650);
        
    }
    
    .voirProj > .arrowR {
        height: 20px;
        width: 20px;
    }

    .cache {
        display: initial;
    }
    
    .CardsProj:hover .cache {
        height: -webkit-fit-content;
        height: -moz-fit-content;
        height: fit-content;
    }

    .CardsProj:hover .voirProj {
        transform: translate(25%, -25%) scale(1) rotate(-40Deg);
    }
}

@media (min-width: 900px) {
    footer {
        
        padding: 40px 100px 50px;
    }

    footer .mask {
        display: initial;
    }
}



/*   _____     _____
    |  _  |   |  _  |
   -| | | |---| | | |-
    |_____| 7 |_____|  ~B!nro~
*/