/*GENERAL*/
:root{
    --noir:#0d0a07;
    --brun:#1a120a;
    --brun2:#251a0f;
    --or:#c9a15a;
    --or2:#e2c283;
    --creme:#efe3cc;
    --gris:#a89878;
    --vin:#5a1a22;
    --r:6px
}
*{
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}
html{
    scroll-behavior: smooth;
}
body{
    background-color: var(--noir);
    color: var(--creme);
    font-family: 'Jost' ,Arial, Helvetica, sans-serif;
    line-height: 1.65;
    font-size: 1rem;
}
h1,h2,h3{
    font-family: 'Cormorant Garamond',Georgia, serif;
    line-height: 1.15;
    color: var(--creme);
}
h1{
    font-size:clamp(2.4rem,6vw,4.2rem);
}
h2{
    font-size:clamp(1.8rem,4vw,2.6rem);
}
h3{
    font-size:1.5rem;
}
a{
    color:inherit;
    text-decoration:none;
}
img{
    max-width: 100%;
    display: block;
}
:focus-visible{
    outline: 2px solid var(--or);
    outline-offset: 3px;
}
.wrap{
    width: min(1120px,92%);
    margin-inline: auto;
}
section{
    padding:clamp(3rem,8vw,5.5rem) 0;
}
.titre{
    text-align:center;
    margin-bottom:2.5rem;
}
.titre p{
    color:var(--gris);
    font-style:italic;
    font-family:'Cormorant Garamond',Georgia,serif;
    font-size:1.2rem;
}
.titre::after{
    content:"";
    display:block;
    width:90px;
    height:1px;
    background:var(--or);
    margin:1rem auto 0}
.btn{
    display:inline-block;
    background:linear-gradient(var(--or2),var(--or));
    color:#1a1007;
    padding:.7rem 1.6rem;
    border:0;
    border-radius:3px;
    font:500 1rem 'Jost',Arial,sans-serif;
    cursor:pointer;
    transition:filter .2s
}
.btn:hover{
    filter:brightness(1.12)
}
.btn.sec{
    background:none;
    border:1px solid var(--or);
    color:var(--or2)
}
/* En-tête */
header
{position:sticky;
    top:0;
    z-index:20;
    background:rgba(13,10,7,.94);
    border-bottom:1px solid rgba(201,161,90,.35);
    backdrop-filter:blur(6px);
}
.nav{
    display:grid;
    grid-template-columns:auto 1fr auto;
    align-items:center;
    gap:1rem;
    padding:.9rem 0;
}
.logo{
    font-family:'Cormorant Garamond',Georgia,serif;
    font-size:1.6rem;
    color:var(--or2);
}
.nav ul{
    list-style: none;
    display: flex;
    gap: 1.8rem;
    justify-content: center;
}
.nav ul a{
    padding:.3rem 0;
    border-bottom:1px solid transparent;
    color:var(--creme);
}
.nav ul a:hover,.nav ul a.actif{
    border-color:var(--or);
    color:var(--or2);
}
.panier-lien{
    border:1px solid var(--or);
    padding:.35rem .9rem;
    border-radius:3px;
    color:var(--or2);
}
.panier-lien b{
    background:var(--or);
    color:#1a1007;
    border-radius:50%;
    padding:0 .45rem;
    margin-left:.3rem;
    font-size:.85rem;
}
.burger{
    display:none;
    background:none;
    border:1px solid var(--or);
    color:var(--or2);
    padding:.35rem .7rem;
    font-size:1.2rem;
    border-radius:3px;
    cursor:pointer;
}
/*ACCUEIL*/
.hero{
    padding: 0;
    background: linear-gradient(90deg,rgba(13,10,7,.95) 35%,rgba(13,10,7,.35)),var(--img,none) center/cover no-repeat,radial-gradient(circle at 75% 50%,#4a2f14,var(--noir) 70%);
}
.hero .wrap{
    display:grid;
    grid-template-columns:1.1fr 1fr;
    align-items:center;
    gap:2rem;
    min-height:min(78vh,620px);
    padding-block:3rem;
}
.hero em{
    font-family:'Cormorant Garamond',Georgia,serif;
    font-size:2rem;color:var(--or2);
}
.hero p{
    margin:1rem 0 1.8rem;
    color:var(--gris);
    max-width:42ch;
}
.assiette{
    justify-self:center;
    width:min(380px,80%);
    aspect-ratio:1;
    border-radius:50%;
    background:var(--img,none) center/cover no-repeat,radial-gradient(circle at 35% 35%,#7a4a22,#2a1a0d 70%);
    border:8px solid #f2ead8;
    box-shadow:0 20px 60px rgba(0,0,0,.7);
}
.duo{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:2rem;
}
.carte-img{
    display:grid;
    gap:.8rem;
    text-align:center;
}
.ph{
    aspect-ratio:16/10;
    border-radius:var(--r);
    border:1px solid rgba(201,161,90,.4);
    background:var(--img,none) center/cover no-repeat,radial-gradient(circle at 30% 30%,#5b3a1a,#140d07 75%);
    display:grid;
    place-items:center;
    font-size:3rem;
}
.ambiance{
    background:linear-gradient(90deg,rgba(13,10,7,.2),rgba(13,10,7,.92) 65%),var(--img,none) center/cover no-repeat,radial-gradient(circle at 20% 50%,#6b4620,var(--brun));
}
.ambiance .wrap{
    display:grid;
    grid-template-columns:1fr 1fr;
    align-items:center;
}
.ambiance .txt{
    grid-column:2;
    text-align:right;
    display:grid;
    gap:1rem;
    justify-items:end;
}
.bandeau{
    background:var(--brun);
    border-block:1px solid rgba(201,161,90,.3);
}
.reserver{
    display:grid;
    grid-template-columns:repeat(4,1fr) auto;
    gap:.8rem;
    align-items:end;
}
.avantages{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:1.5rem;
    text-align:center;
    margin-top:2.5rem;
    color:var(--gris);
}
.avantages span{
    display:block;
    font-size:1.8rem;
    color:var(--or);
}
/* Formulaires */
label{
    display:grid;
    gap:.3rem;
    font-size:.92rem;
    color:var(--gris);
}
input,select,textarea{
    background:var(--brun2);
    color:var(--creme);
    border:1px solid rgba(201,161,90,.45);
    border-radius:3px;
    padding:.65rem .8rem;
    font:inherit;
    width:100%;
}
.form{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:1rem;
}
.form .plein{
    grid-column:1/-1;
}
.msg{
    margin-top:1rem;
    padding:.9rem;
    border:1px solid var(--or);
    border-radius:3px;color:var(--or2);
    display:none}
/* Menu / catalogue */
.filtres{
    display:flex;
    flex-wrap:wrap;
    gap:.6rem;
    justify-content:center;
    margin-bottom:2rem;
}
.filtres button{
    background:none;
    border:1px solid rgba(201,161,90,.5);
    color:var(--creme);
    padding:.4rem 1.1rem;
    border-radius:30px;
    cursor:pointer;
    font:inherit;
}
.filtres button.actif{
    background:var(--or);
    color:#1a1007;
}
.grille{
    display:grid;
    grid-template-columns:repeat(auto-fill,minmax(250px,1fr));
    gap:1.6rem;
}
.plat{
    background:var(--brun);
    border:1px solid rgba(201,161,90,.25);
    border-radius:var(--r);
    overflow:hidden;
    display:grid;
    grid-template-rows:auto 1fr auto;
}
.plat .ph{
    border:0;
    border-radius:0;
    aspect-ratio:4/3;
}
.plat .corps{
    padding:1rem 1.1rem;
    display:grid;
    gap:.3rem;
    align-content:start;
}
.plat p{
    color:var(--gris);
    font-size:.93rem;
}
.plat .bas{
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:0 1.1rem 1.1rem;
}
.prix{
    color:var(--or2);
    font-family:'Cormorant Garamond',Georgia,serif;
    font-size:1.4rem;
}
.entete-page{
    padding:3.5rem 0 1rem;
    text-align:center;
    background:linear-gradient(var(--brun),var(--noir));
}
.entete-page p{
    color:var(--gris);
    font-style:italic;
    font-family:'Cormorant Garamond',Georgia,serif;
    font-size:1.25rem;
}
/* Galerie, équipe, valeurs */
.galerie{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    grid-auto-rows:170px;
    gap:.8rem;
}
.galerie .ph{
    aspect-ratio:auto;
    height:100%;
}
.galerie .g1{
    grid-column:span 2;
    grid-row:span 2;
}
.galerie .g4{
    grid-row:span 2;
}
.galerie .g6{
    grid-column:span 2;
}
.cols3{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:1.6rem;
}
.bloc{
    background:var(--brun);
    border:1px solid rgba(201,161,90,.25);
    border-radius:var(--r);
    padding:1.5rem;
    display:grid;
    gap:.5rem;
    align-content:start;
}
.bloc p{
    color:var(--gris);
}
.apropos{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:3rem;
    align-items:center;
}
.apropos p+p{
    margin-top:1rem;
}
/*CONTACT*/
.contact{
    display:grid;
    grid-template-columns:1fr 1.3fr;
    gap:2.5rem;
}
.contact ul{
    list-style:none;
    display:grid;
    gap:1rem;
    color:var(--gris);
}
.contact li b{
    color:var(--or2);
    display:block;
    font-weight:500;
}
/*PANIER*/
.panier{
    display:grid;
    grid-template-columns:2fr 1fr;
    gap:2rem;
    align-items:start;
}
table{
    width:100%;
    border-collapse:collapse;
}
th,td{
    padding:.8rem .5rem;
    border-bottom:1px solid rgba(201,161,90,.25);
    text-align:left;
}
th{
    color:var(--or2);
    font-weight:500;
}
.qte button{
    background:none;
    border:1px solid var(--or);
    color:var(--or2);
    width:1.8rem;
    height:1.8rem;
    border-radius:3px;
    cursor:pointer;
}
.recap{
    display:grid;
    gap:.9rem;
}
.total{
    display:flex;
    justify-content:space-between;
    font-size:1.3rem;
    color:var(--or2);
    border-top:1px solid var(--or);
    padding-top:.8rem;
}
.options{
    display:grid;
    gap:.5rem;
}
.options label{
    display:flex;
    gap:.6rem;
    align-items:center;
    color:var(--creme);
}
.options input{
    width:auto;
}
.vide{
    text-align:center;
    color:var(--gris);
    padding:2rem;
}
/*FOOTER*/
footer{
    background:var(--brun);
    border-top:1px solid rgba(201,161,90,.35);
    padding:2.5rem 0 1.5rem;
    color:var(--gris);
}
.pied{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:2rem;
}
.pied h3{
    font-size:1.2rem;
    margin-bottom:.5rem;
    color:var(--or2);
}
.pied a{
    display:block;
}
.copy{
    text-align:center;
    margin-top:2rem;
    font-size:.85rem;
}
.photo{
    background: linear-gradient(180deg,rgba(8, 4, 0, 0.2)100%),var(--img,none) center/cover no-repeat,radial-gradient(circle at 20% 50%,#6b4620,var(--brun));
}
@media(max-width:900px){
    .hero .wrap,.apropos,.contact,.panier{
        grid-template-columns:1fr;
    }
    .hero{
        background:linear-gradient(rgba(13,10,7,.85),rgba(13,10,7,.7)),var(--img,none) center/cover,var(--noir);
    }
    .cols3,.avantages{
        grid-template-columns:1fr;
    }
    .reserver{
        grid-template-columns:repeat(2,1fr);
    }
    .reserver .btn{
        grid-column:1/-1;
    }
    .galerie{
        grid-template-columns:repeat(2,1fr);
    }
    .galerie .g1{
        grid-column:span 2;
    }
    .galerie .g6{
        grid-column:span 2;
    }
    .ambiance .wrap{
        grid-template-columns:1fr;
    }
    .ambiance .txt{
        grid-column:1;
        text-align:center;
        justify-items:center;
    }
    .pied{
        grid-template-columns:1fr 1fr;
    }
    .pied div:first-child{
        grid-column: 1/-1;
    }
}
/* Mobile : menu burger */
@media(max-width:720px){
    .nav{
        grid-template-columns:1fr auto auto;
    }
    .burger{
        display:block;
    }
    .nav ul{
        grid-column:1/-1;
        grid-row:2;
        display:none;
        flex-direction:column;
        gap:3px;
        text-align:center;
        padding-bottom:13px;
    }
    .nav ul.ouvert{
        display:flex;
    }
    .duo,.form{
        grid-template-columns:1fr;
    }
    .reserver{
        grid-template-columns:1fr;
    }
    .galerie{
        grid-auto-rows:130px;
    }
    .pied{
        grid-template-columns:1fr;
    }
    th:nth-child(2),td:nth-child(2){display:none}
}
@media(prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}