* { margin:0; padding:0; }

html { 
    font-size: 14px; 
    line-height: 1.1;
    max-height:100vh;
}

body{
    font-family:arial;
    overflowy:hide;
    position:fixed;
    top:0;
}

/*MENU -------------------------------*/
/*------------------------------------*/

nav{
    display:flex;
    flex-direction:row;
    justify-content: space-between;
    align-items: center;
    padding:1.1vh 1vh 0.9vh 1vh;
    height:2vh;
}

ul, li{
    list-style:none;
    padding:0;
    margin:0;
    display:flex;
}

ul.name{ gap:3vw; }

ul.contact{ gap:1vw; justify-content:flex-end }

a{
    color:black;
    text-decoration:none;
}

a:hover{
    color:red;
}

/*CALENDRIER -------------------------*/
/*------------------------------------*/

.image-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr); /* 7 colonnes comme une semaine */
    height:calc(96vh - 1px);
    width:100vw;
}

.image-grid .day {
    border-top:0.25px solid grey;
    border-right:0.25px solid grey;
    min-height:60px;
    position:relative;
}

.image-grid .day img {
    width: auto;
    max-width:50vw;
    height: 100%;
    object-fit: cover;
}

.image-grid .day .jour{
    text-align:right;
    padding-right:1vh;
    padding-top:1vh;
    position:absolute;
    top:0;
    right:0;
    font-size:10px;
    color:grey;
}

.current-month{
    position:fixed;
}

.month{
    text-align:left !important;
    padding:1vh;
    position:relative;
    top:0;
    left:0;
    font-size:14px !important;
    color:gray;
    z-index:-1;
    margin:0 !important;
}

.month.desktop{
    display:block;
}

.month.mobile{
    display:none;
}

.current-day{
    display:none;
}

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

    body{
    }

    nav{
        height:auto;
        column-gap:2vw;
        flex-wrap:wrap;
    }

    ul.name{
        gap:10px;
    }

    ul.contact{
        order: 2;
    }

    nav p{
        order: 3;
        width:100%;

    }

    .month.mobile{
        display:block;
        max-width:200px;
    }

    .month.desktop{
        display:none;
    }

    .current-day{
        display:none;
    }

}

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

html { 
    font-size: 12.5px; 
    line-height: 1.1;
}

    nav{
        height:4vh;
    }

    .image-grid {
        display: grid;
        grid-template-columns: repeat(1, 1fr); /* 7 colonnes comme une semaine */
        height:85vh;
        width:100vw;
    }

    .image-grid .day {
        /*min-height:2.83vh;*/
        display:flex;
        min-height:1px;
        align-items: center;
        border-right:none;

    }

    .image-grid .day img {
        width: auto;
        height:25vh;
        max-width:80vw;
        object-fit: cover;
        transform: translateX(1vh);
    }

    .image-grid .day .jour{
        padding-right:1vh;
        padding-top:0.5vh;
    font-size:9px;


    }

    .current-month{
        display:none;
    }


    .supp{
        display:none !important;
    }

    .current-day{
        display:block;
        text-align:right;
        padding-right:1vh;
        padding-top:1vh;
        position:absolute;
        bottom:0.5vh;
        right:0;
        font-size:10px;
        color:grey;

    }

}