* {
    margin: 0px;
    padding: 0px;
    font-family: 'Inter var';
}



html {
    scroll-behavior: smooth;
  }

/*Typo inter*/
:root { font-family: 'Inter', sans-serif; }
@supports (font-variation-settings: normal) {
:root { font-family: 'Inter var', sans-serif; }
}

p {
    text-align: justify;
}

.title-box {
    padding: 30px 10vw ;
}

h2{
    line-height: 2em;
}

h3{
    line-height: 3em;
}

.w3 {
width: 50vw;
}

.w2 {
    width: 35vw;
    }

.background-white {
    background-color: #ffffffde;
}

.fit-cont {
    height: fit-content;
    padding: 10px;
}

/* generales */ 

body {
    width: 100vw;
}

/*MENU*/

label, #toggle
{
    display: none;
}

#navbarfixed {
    position: fixed;
    top: 0;
    width: 100%;
    height: 93px;
    background-color: white;
    display: flex;
    justify-content: flex-end;
    box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
    z-index: 10;
}

nav {
    align-self: flex-end;
    display: flex;
    padding-right: 5vw;
    padding-bottom: 20px;
}

nav a {
    color: black;
    text-decoration: none;
    padding: 20px;
}

#bouton-top{
    position: fixed;
    background-color:#12769b ;
    padding:20px 15px;
    margin-top: 60vh;
    right: 0;
    border-radius: 0px 20px 20px 0px;
    rotate: 180deg;
    z-index: 10;
}

#main_home_screen {
    height: 100vh;
    background-image: url(../jpg/decors-fond.jpg);
    background-size: cover;
    display: flex;
    justify-content: center;
    flex-direction: column;
}

.logo_screen {
    height: 250px;
    width: auto;
    align-self: center;
    margin-top: 10vh;
}

.bouton_resa {
    font-size: 20px;
    padding: 15px 30px;
    border-radius: 60px;
    background-color: #c6a989;
    color: white;
    border-style: none;
    align-self: center;
    margin-top: 10vh;
    text-decoration: none;
}

#lequipe-section {
    background-image: url(../jpg/fond-texture-bleu-creme.jpg);
    background-position: bottom;
    background-repeat: no-repeat;
    background-size: 100vw 20vh;
    display: flex;
    justify-content: space-around;
    padding: 5vh 5vw;
}

#creperie-section {
    background-image: url(../jpg/brush-bleu.png);
    background-position: bottom right;
    background-repeat: no-repeat;
    display: flex;
    justify-content: space-between;
    padding: 5vh 5vw 5vh 0px;
}

#galerie-creme {
    display: flex;

}

.photo-couillon {
    margin: 10px 10px -10vh 10px;
    width: 30vw;
}

.photo-creperie {
    width: 50vw;
}

.photos {
    margin: 10px;
}

/*Grille images*/

#galerie-creme {
    display: flex;
    justify-content: center;
}

.galerie-image {
    display: grid;
    gap: 0px; 
    grid-template-rows: repeat(2, 30vh); /* Deux lignes de 20vh de haut */
    width: 100vw;

}

.galerie-image div:nth-child(1) {
    grid-column: 1 / 3; /* Première colonne */
}
.galerie-image div:nth-child(2) {
    grid-column: 3 / 5; /* Deuxième colonne */
}
.galerie-image div:nth-child(3) {
    grid-column: 5 / 8; /* Troisième colonne */
}

/* Deuxième ligne : colonnes spécifiques */
.galerie-image div:nth-child(4) {
    grid-column: 1 / 4; /* Largeur différente : fusionne les deux premières colonnes */
}
.galerie-image div:nth-child(5) {
    grid-column: 4 / 6; /* Troisième colonne */
}
.galerie-image div:nth-child(6) {
    grid-column: 6 / 8; /* Largeur différente : fusionne deux colonnes */
}

.photo-galerie {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Ajuste les images pour remplir les blocs */
}


  .photo-galerie:hover {
    transform: scale(1.1);
    rotate: 1deg;
    border-radius: 30px;
    transition: 1s;
  }


  /*La carte de la creperie*/


.bloc-flex {
    width: 100vw;
    display: flex;
    justify-content: space-around;
}

.bloc-flex li {
        list-style: none;
        padding: 10px;
}

#carte-galettes {
    width: 35vw;
}

#carte-crepes {
    width: 35vw;
}

#horaires li {
    padding: 5px;
    font-size: 1em;
}

.bottom-bg {
height: 200px;

}

/*Bloc réservation et horaires*/

#adresse {
    line-height: 1.8em;
}

#bloc-resa {
    background-image: url(../jpg/brush-bleu-gauche.png);
    background-position: bottom left;
    background-repeat: no-repeat;
    padding-bottom: 225px;
}

/*Footer*/

#legal {
    background-color: #c6a989;
    color: white;
    padding: 80px 0 0 20px;
}
#legal a{
    color: white;
    font-weight: 600;
    text-decoration: none;
}

/*menu responsive - cache checkbox et burger en desktop*/

label, #toggle
{
    display: none;
}

@media only screen and (max-width: 800px) {
    .w3 {
        width: 90vw;
    }
    .w2 {
        width: 90vw;
    }

    #main_home_screen {
        height: 70vh;
        background-image: url(../jpg/decors-fond.jpg);
        background-size: cover;
        display: flex;
        justify-content: center;
        flex-direction: column;
    }

    .logo_screen {
        height: 153px;
        width: auto;
        align-self: center;
        margin-top: 200px;
    }

    #creperie-section {
        display: flex;
        justify-content: space-between;
        padding: 5vh 5vw 5vh 0px;
        flex-direction: column;
        align-items: center;
    
    }

    #lequipe-section {
        display: flex;
        padding: 5vh 5vw;
        flex-direction: column;
        align-items: center;
        padding-bottom: 20vh;
    }

    #carte-galettes {
        width: 90vw;
        border-bottom: 3px solid #c6a989;
    }

    #carte-crepes {
        width: 90vw;
        border-bottom: 3px solid #c6a989;
    }

    .bloc-flex {
        justify-content: space-around;
        flex-direction: column;
        align-items: center;
    }

    .photo-couillon {
        margin: 10px 10px -10vh 10px;
        width: 90vw;
        overflow: hidden;
    }
    .photo-creperie {
        width: 90vw;
    }

    #bloc-resa {
        font-size: 120%;
    }

    .galerie-image {
        display:none;
    }

    /*menu responsive*/

    #navbarfixed {
        height: fit-content;
    }
    
    nav {
        display: flex;
        flex-direction: column;
        width: 100vw;
        text-align: center;
        padding: 5px;
    }

    nav .main_pages 
    {
        display: none;
        flex-direction: column;
        background: #fff;
        height: 220px;
    }
    label {
        width: 30px;
        display: flex;
        justify-content: center;
        align-items: center;
        margin: 0 auto;
        font-size: 40px;
        color: rgb(0, 0, 0);
        cursor: pointer;
    }

    #toggle:checked + .main_pages {
        display: flex;
    }



  }