/* ---------------------------------- RESET + GENERAL --------------------------------- */

*{
    list-style-type: none;
    text-decoration: none;
    margin: 0;
    padding: 0;
}
/* Définition des couleurs du site */
:root{
    --color-black: #0A0908;
    --color-white: #F2F4F3;
    --color-brown: #5E503F;
}

*:focus {
    outline: none;
}

html {
    scroll-behavior: smooth;
    background-color: var(--color-white);
}

/* Style de bouton principal */
.button-generic{
    cursor: pointer;
    transition: box-shadow 300ms ease-out, transform 300ms ease-out;
}
.button-generic:hover{
    box-shadow: 0 5px 5px rgba(0, 0, 0, 0.1);
    transform: scale(1.02) translate(0, -2px);
}

/* Pour que le texte sélectionné soit noir comme la couleur du site */
::selection {
    background-color: var(--color-black);
    color: var(--color-white);
}

/* Modification de toutes les images selon des règles voulues */
img{
  -webkit-user-drag: none;
  user-select: none;
  width: 100%;
}

/* ---------------------------------- FONT ---------------------------------- */

@import url("https://use.typekit.net/npp6ntg.css");

/* -------------------------------------------------------------------------- */
/*                                   MOBILE                                   */
/* -------------------------------------------------------------------------- */

/* Style sur la barre de navigation */
body nav {
    display: flex;
    height: 40px;
    justify-content: space-between;
    align-items: center;
    padding: 20px 20px 20px 20px;
    max-width: 1560px;
    margin: 0 auto;
}
/* Titre du site */
.menu-title{
    font-size: 2rem;
    font-family: bigmoore, serif;
    font-weight: 400;
    font-style: normal;
    transition: opacity 300ms ease-out;
}
/* Définition de la couleur pour éviter le bleu de base sur les liens */
.menu-title a{
    color: var(--color-black);
}
/* Boutons du menu */
.menu-btn {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: left;
    width: 2rem;
    height: 2rem;
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 0;
    z-index: 10;
}
/* Lignes pour le burger menu */
.btn-line {
    width: 2rem;
    height: 0.25rem;
    background: var(--color-black);
    border-radius: 10%;
}
.btn-line:nth-of-type(2){
    width: 1.7rem;
}
/* Cacher le menu en version mobile */
.nav-menu {
    display: none;
}
/* Mise en page du hero */
#hero{
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    background-image: url("../images/brown_restaurant.jpg");
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    /*background-color: darkkhaki;*/
    margin: 0 auto;
}

#hero-container{
    display: flex;
    height: calc(100vh - 100px);
    padding: 20px;
    gap: 30px;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    text-align: center;
}
/* H1 utilisé une seule fois, dans le hero */
h1{
    font-family: bigmoore, serif;
    color: var(--color-white);
    font-weight: 400;
    font-style: normal;
    max-width: 365px;
    text-transform: uppercase;
    transition: 300ms ease-out;
}
.hero-button{
    display: block;
    color: var(--color-white);
    background-color: var(--color-black);
    width: fit-content;
    padding: 10px 20px 10px 20px;
    border-radius: 10px;
    border: 2px solid var(--color-white);
    transition: 300ms ease-out;
}
.hero-button p{
    font-family: basic-sans, sans-serif;
    font-size: 1rem;
    font-weight: 400;
    font-style: normal;
}
.hero-button:hover{
    background-color: var(--color-white);
    border: 2px solid var(--color-white);
    transform: scale(1.02) translate(0, -2px);
}
.hero-button:hover p{
    color: var(--color-black);
}

.main-container{
    margin: 0px 20px;
    /* background-color: aqua; */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    max-width: 1560px;
}
/* Marge de 100px avec la partie d'au dessus */
section{
    margin-top: 100px;
}

.article-button{
    display: block;
    background-color: var(--color-black);
    width: fit-content;
    padding: 10px 40px 10px 40px;
    border-radius: 10px;
    transition: 300ms ease-out;
}

.article-button p{
    font-family: basic-sans, sans-serif;
    color: var(--color-white);
    font-size: 1rem;
    font-weight: 400;
    font-style: normal;
}

.article-button:hover{
    box-shadow: 0 5px 5px rgba(0, 0, 0, 0.1);
    transform: scale(1.02) translate(0, -2px);
}

#first-article, #third-article{
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    margin-bottom: 100px;
}

#second-article{
    background-color: #0A090810;
    font-family: basic-sans, sans-serif;
    font-size: 1rem;
    font-weight: 400;
    position: relative;
    left: -20px;
    width: 100%;
    padding: 100px 0;
    text-align: justify;
    margin-bottom: 100px;
    border-left: 20px solid #0A090800;
    border-right: 20px solid #0A090800;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
}

#second-article span{
    font-style: italic;
}

#second-article div{
    display: flex;
}

#second-article p{
    font-size: 2rem;
    transition: 300ms ease-out;
    cursor: none;
}

#second-article p:hover{
    transform: translate(0, -10px);
}

#second-article-stars:hover p:not(:hover){
    opacity: 0.5;
}

article img{
    border-radius: 10px;
}

article div h3{
    display: none;
}

#review-container{
    /*background-color: tomato;*/
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    gap: 30px;
}
/* Style pour le h2 qui est utilisée sur toutes les pages du site */
h2{
    font-size: 2.5rem;
    font-family: basic-sans, sans-serif;
    font-weight: 400;
    font-style: normal;
    text-align: center;
}

#partners-container h2, #socials-container h2{
    font-family: basic-sans, sans-serif;
    text-transform: none;
}

/* Mise en page des reviews */
.reviews-block{
    display: flex;
    width: fit-content;
    box-sizing: border-box;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 20px;
    align-items: center;
    justify-content: center;
}

.review-container-unique{
    transition: 300ms ease-out;
    margin-top: 40px;
    position: relative;
}

.review-profile-picture{
    border-radius: 100%;
    overflow: hidden;
    height: 80px;
    width: 80px;
    position: absolute;
    top: -40px;
    left: 30px;
}

.review-text-container{
    background-color: #0A090810;
    padding: 50px 30px 30px 30px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    border-radius: 10px;
}

.review-text-container p{
    font-family: basic-sans, sans-serif;
    font-size: 1rem;
    font-weight: 400;
    font-style: normal;
    max-width: 460px;
}
.review-text-container p:first-child{
    font-weight: 600;
}

.review-text-container p:nth-child(2){
    font-style: italic;
}

.review-note{
    font-family: basic-sans, sans-serif;
    font-size: 9rem;
    font-weight: 900;
    font-style: normal;
    color: #0A090810;
    position: absolute;
    right: 15px;
    bottom: 50%;
    transform: translate(0, 50%);
}

/* Partenaires et des réseaux sociaux */
#partners-container, #socials-container{
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    margin: 0 auto;
    margin-top: 100px;
    max-width: 450px;
}

#partners-images{
    width: 100%;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}

.partner-img{
    opacity: 0.5;
    height: 20px;
    width: auto;
    transition: 300ms ease-out;
}

.partner-img:hover{
    transform: scale(1.05);
    opacity: 0.8;
}

#socials-links{
    display: flex;
    gap: 30px;
}

#socials-links a img{
    height: 40px;
    opacity: 0.5;
    transition: 300ms ease-out;
}

#socials-links a:hover img{
    opacity: 1;
    transform: scale(1.05) translate(0, -2px);
}

/* Footer... */
footer{
    background-color: var(--color-brown);
}

#footer-container{
    padding-left: 20px;
    padding-right: 20px;
    padding-bottom: 30px;
    padding-top: 30px;
    height: fit-content;
    background-color: var(--color-brown);
    gap: 30px;
    display: flex;
    flex-direction: column;
    margin-top: 100px;
    max-width: 1560px;
}
#footer-link-container{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: flex-start;
    gap: 30px;
}

.footer-link{
    display: flex;
    width: 40%;
}

.footer-link ul li a{
    color: var(--color-white);
    font-family: basic-sans, sans-serif;
    font-weight: 300;
    font-style: normal;
}

.footer-link ul{
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.footer-link ul li:first-of-type a{
    font-weight: 600;
}

.footer-link li{
    width: fit-content;
    transition: 300ms ease-in-out;
}

/* Bouton pour souscrire à la newsletter */

#footer-subscribe{
    width: 100%;
    font-family: basic-sans, sans-serif;
    color: var(--color-white);
    font-size: 1rem;
    font-weight: 300;
    width: auto;
}

#footer-subscribe > p:first-of-type{
    color: var(--color-white);
    font-weight: 600;
    font-style: normal;
    font-size: 1.4rem;
}

#footer-subscribe div form{
    margin-top: 10px;
    display: flex;
}

form #subEmail{
    color: var(--color-white);
    background-color: var(--color-black);
    border: 3px solid var(--color-black);
    border-right: none;
    font-family: basic-sans, sans-serif;
    font-size: 1rem;
    font-weight: 300;
    border-radius: 10px 0 0 10px;
    padding: 10px 20px 10px 20px;
    transition: 300ms ease-out;
    box-sizing: border-box;
}

form #subEmail:hover{
    border: 3px solid var(--color-white);
    border-right: none;
}

form #subEmail:focus{
    border: 3px solid var(--color-white);
    border-right: none;
}

form #subButton{
    background-color: var(--color-white);
    color: var(--color-black);
    font-family: basic-sans, sans-serif;
    font-size: 1rem;
    font-weight: 600;
    border-top-right-radius: 10px;
    border-bottom-right-radius: 10px;
    -webkit-border-top-right-radius: 10px;
    -webkit-border-bottom-right-radius: 10px;
    padding: 10px 20px 10px 20px;
    border: 3px solid var(--color-white);
    border-left: none;
    cursor: pointer;
    transition: 300ms ease-out;
    box-sizing: border-box;
    width: 110px;
}

form #subButton:hover{
    background: var(--color-black);
    color: var(--color-white);
    border: 3px solid var(--color-black);
    border-left: none;
}

form #subButton[data-state="subEmailSelected"]:hover{
    border: 3px solid var(--color-white);
    border-left: none;
}

form #subButton:focus{
    border: 3px solid var(--color-black);
    border-left: none;
}

#copyright{
    font-family: "basic-sans", sans-serif;
    font-weight: 200;
    color: var(--color-white);
    text-align: left;
    box-sizing: border-box;
    padding-top: 10px;
    opacity: 0.5;
    transition: opacity 300ms ease-out;
}
#copyright:hover{
    opacity: 1;
}

/* Cette partie est uniquement pour la configuration du burger menu et permet de limiter son utilisation sur les appareils ne faisant que 767px maximum. */
@media screen and (max-width: 767px){

    html:has(.burger-nav-menu[data-state="open"]){
        width: 100vw;
        height: 100vh;
        overflow: hidden;
    }

    .burger-nav-menu{
        background: var(--color-white);
        width: 100vw;
        top: 80px;
        left: 0;
        position: absolute;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 30px;
        overflow: hidden;
        transition: 300ms ease-out;
        z-index: 100;
    }

    .burger-nav-menu li a{
        font-family: basic-sans, sans-serif;
        font-size: 2rem;
        font-weight: 600;
        font-style: normal;
        text-transform: uppercase;
        color: var(--color-black);
    }
    .burger-nav-menu[data-state="close"]{
        height: 0px;
    }

    .burger-nav-menu[data-state="open"]{
        height: calc(100% - 80px);
    }
    .btn-line{
        transition: translate 300ms ease-out 300ms, rotate 300ms ease-out, opacity 300ms ease-out 300ms;
        transform-origin: center;
    }

    #active{
        color: #0A090870;
        font-weight: 400;
    }
    .menu-btn[data-state="cross"] .btn-line{
        transition: translate 300ms ease-out, rotate 300ms ease-out 300ms, opacity 0ms ease-out 300ms;
    }

    .menu-btn[data-state="cross"] .btn-line:nth-child(2){
        opacity: 0;
    }

    .menu-btn[data-state="cross"] .btn-line:first-child{
        translate: 0 11px;
        rotate: -45deg;
    }

    .menu-btn[data-state="cross"] .btn-line:nth-child(3){
        translate: 0 -11px;
        rotate: 45deg;
    }
    

}
/* -------------------------------------------------------------------------- */
/*                                  TABLETTE                                  */
/* -------------------------------------------------------------------------- */

@media screen and (min-width: 768px){
    /* Rendre visible le menu */
    .nav-menu{
        display: flex;
        gap: 30px;
    }
    /* Changement des marges pour adapter un style tablette */
    body nav{
        padding: 30px 70px 30px 70px;
    }

    .nav-menu li a{
        font-family: basic-sans, sans-serif;
        font-size: 1rem;
        font-weight: 400;
        font-style: normal;
        color: #0A090886;
        transition: color 300ms ease-out;
    }

    /* Contrairement aux croyances, les tablettes peuvent avoir une souris. Il est donc intéressant d'ajouter les actions de hover sur ces derniers. */
    .nav-menu:hover #active:not(:hover){
        color: #0A090886;
    }


    .nav-menu li:hover a{
        color: var(--color-black);
    }

    .nav-menu li #active{
        color: var(--color-black);
    }

    .nav-menu:hover #active:not(:hover){
        color: #0A090886;
    }

    .nav-menu li{
        transition: 300ms ease-out;
    }

    #reserve-now-button{
        background-color: #0A090818;
        padding: 10px 20px 10px 20px;
        border-radius: 10px;
        color: var(--color-black);
        transition: background-color 300ms ease-out, color 300ms ease-out;
    }

    #reserve-now-button:hover {
        background-color: var(--color-black);
        color: var(--color-white);
        box-shadow: 0 5px 5px rgba(0, 0, 0, 0.1);
        transform: scale(1.02) translate(0, -2px);
    }

    .nav-menu li:last-child:hover{
        transform: scale(1.02) translate(0, -2px);
    }

    .menu-btn{
        display: none;
    }

    
    .main-container section{
        display: flex;
        align-items: center;
        flex-direction: column;
    }

    #second-article{
        font-size: 1.2rem;
        left: 0px;
    }

    #review-container, #partners-container, #socials-container{
        width: 100%;
    }

    .reviews-block{
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        gap: 20px;
        align-items: center;
        justify-content: center;
    }

    .review-container-unique{
        width: 40%;
    }

    .review-text-container{
        height: 110px;
    }

    #section-autres{
        width: 90%;

    }

    .footer-link{
        width: 100px;
        
    }

    #footer-link-container{
        display: flex;
        flex-wrap: wrap;
        justify-content: flex-start;
    }

    #footer-container{
        flex-direction: row;
        justify-content: space-between;
        padding-left: 70px;
        padding-right: 70px;
    }

}



/* -------------------------------------------------------------------------- */
/*                              PETIT ORDINATEUR                              */
/* -------------------------------------------------------------------------- */

@media screen and (min-width: 1024px){

    body nav {
        height: 40px;
    }

    #hero-container{
        align-items: center;
        height: 81vh;
    }

    .menu-title{
        font-size: 3rem;
    }

    .menu-title:hover{
        opacity: 0.7;
    }
    
    h1{
        text-align: center;
        max-width: 950px;
        font-size: 3rem;
    }

    .hero-button p{
        font-size: 1.4rem;
    }
    
    .article-button p{
        font-size: 1.4rem;
    }

    #first-article{
        flex-direction: row;
        justify-content: flex-start;
        align-items: center;
        gap: 50px;
    }

    #first-article-img-container, #third-article-img-container{
        box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15);
    }

    #first-article-img-container{
        width: 50%;
        border-radius: 0 10px 10px 0;
        overflow: hidden;
        box-sizing: content-box;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    #first-article-img-container img{
        border-radius: 0 10px 10px 0;
        transition: 300ms ease-out;

    }

    #first-article-img-container:hover img{
        transform: scale(1.05);
    }

    #first-article-text{
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 20px;
    }

    #first-article-text h3{
        font-size: 2.5rem;
        text-align: left;
        font-family: bigmoore, serif;
        font-weight: 400;
        font-style: normal;
        display: block;
        padding-right: 50px;
        max-width: 400px;
    }

    #first-article-text .article-button{
        margin-right: 50px;
    }

    #second-article{
        font-size: 1.4rem;
        border-radius: 0;
        padding: 150px;
        box-sizing: border-box;
    }




    #third-article{
        flex-direction: row-reverse;
        align-items: center;
        justify-content: flex-start;
        gap: 50px;
    }

    #third-article-img-container{
        width: 50%;
        border-radius: 10px 0 0 10px;
        display: flex;
        align-items: center;
        justify-content: center;
        overflow: hidden;
    }

    #third-article-img-container img{
        transition: 300ms ease-out;
        border-radius: 10px 0 0 10px;
    }

    #third-article-img-container:hover img{
        transform: scale(1.05);
    }

    #third-article-text{
        display: flex;
        flex-direction: column;
        align-items: flex-end;
        gap: 20px;
    }

    #third-article-text h3{
        font-size: 2.5rem;
        text-align: right;
        display: block;
        font-family: bigmoore, serif;
        font-weight: 400;
        font-style: normal;
        max-width: 400px;
    }

    #third-article-text .article-button{
        margin-left: 50px;
    }
    
    .review-text-container{
        font-size: 1.4rem;
    }

    .reviews-block:has(.review-container-unique:hover):hover .review-container-unique:not(:hover) {
        opacity: 0.2;
    }

    .review-container-unique:hover{
        transform: scale(1.05);
    }
      

    .main-container{
        margin: 0;
    }

    .footer-link{
        width: 180px;
    }

    #footer-link-container:has(li:hover):hover li:not(:hover, :first-of-type){
        opacity: 0.5;
    }
    
    .footer-link li:hover:not(:first-of-type){
        transform: translate(10px);
    }
    
    .footer-link li:hover:not(:first-of-type) a::before{
        left: -10px;
        position: absolute;
        content: "> ";
    }



}



/* -------------------------------------------------------------------------- */
/*                               MAX SIZE 1560px                              */
/* -------------------------------------------------------------------------- */

/* Cette partie défini les limites du site, c'est à dire 1560px, au delà de cette taille, le site ne change plus visuellement */
@media screen and (min-width: 1560px){
    /* Centre le contenu sur la page */
    .main-container{
        margin: 0 auto;
    }

    body nav{
        padding: 60px 0 60px 0;
    }

    #hero{
        height: 88vh;
    }

    #first-article-img-container, #third-article-img-container{
        border-radius: 10px;
    }

    #second-article{
        border: 0;
        background: linear-gradient(90deg, rgba(10,9,8,0) 0%, rgba(10,9,8,0.05) 25%, rgba(10,9,8,0.05) 75%, rgba(10,9,8,0) 100%);
    }

    .reviews-block{
        gap: 50px;
    }

    #footer-container{
        margin: 0 auto;
        margin-top: 100px;
    }
}


/* -------------------------------------------------------------------------- */
/*                    MINI SCREEN (YES WE THOUGH ABOUT YOU)                   */
/* -------------------------------------------------------------------------- */
/* Cette partie inclu les utilisateurs d'appareils mobiles tout petit sur la page principale seulement. Cette fonction est en test et si beaucoup des visiteurs ont des appareils de cette taille, les autres pages pourront intégrer le même système. */
@media screen and (max-width: 360px) {
    #partners-images{
        display: flex;
        flex-direction: column;
        gap: 20px;
        justify-content: center;
        align-items: center;
        flex-wrap: wrap;
    }
    #footer-subscribe{
        display: none;
    }
    
}

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

    #hero{
        margin-top: 60px;
        height: 30px;
        background-image: none;
    }

    #hero-container{
        padding: 0;
    }

    section{
        margin-top: 30px;
    }

    #first-article, #third-article{
        margin-bottom: 30px;
    }

    #first-article-img-container, #third-article-img-container, #second-article, #section-autres{
        display: none;
    }

    .partner-img{
        opacity: 0.5;
        height: 30px;
        width: auto;
    }

    .review-note{
        display: none;
    }

    h1{
        display: none;
    }
    
}