/* =========================================================
   VARIABLES
========================================================= */

:root{
    --noir:#151513;
    --noir-2:#211f1b;
    --creme:#f1ede5;
    --blanc:#faf9f5;
    --gris:#d5d1c8;
    --gris-fonce:#77736b;
    --accent:#9b7454;
    --accent-clair:#c8aa91;

    --serif:Georgia,"Times New Roman",serif;
    --sans:Arial,Helvetica,sans-serif;

    --largeur:1240px;
}


/* =========================================================
   RESET
========================================================= */

*{
    box-sizing:border-box;
    margin:0;
    padding:0;
}

html{
    scroll-behavior:smooth;
}

body{
    background:var(--creme);
    color:var(--noir);
    font-family:var(--sans);
    overflow-x:hidden;
}

body.menu-ouvert{
    overflow:hidden;
}

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

button,
input,
select{
    font-family:inherit;
}

button{
    cursor:pointer;
}

img{
    max-width:100%;
    display:block;
}


/* =========================================================
   OUTILS
========================================================= */

.conteneur{
    width:min(var(--largeur),calc(100% - 60px));
    margin:auto;
}

.surtitre{
    display:block;
    color:var(--accent);
    font-size:9px;
    font-weight:400;
    letter-spacing:4px;
    line-height:1.5;
    text-transform:uppercase;
	margin-bottom: 20px;
}

.titre-section{
    font-family:var(--serif);
    font-size:clamp(55px,7vw,105px);
    font-weight:400;
    letter-spacing:-5px;
    line-height:.88;
}

.titre-section em{
    color:var(--accent);
    font-style:italic;
}


/* =========================================================
   BOUTONS
========================================================= */

.bouton{
    position:relative;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:15px;
    min-height:48px;
    padding:0 22px;
    border:1px solid currentColor;
    overflow:hidden;
    isolation:isolate;
    font-size:9px;
    letter-spacing:2px;
    text-transform:uppercase;
    transition:
        color .4s ease,
        border-color .4s ease;
}

.bouton::before{
    content:"";
    position:absolute;
    inset:0;
    z-index:-1;
    background:var(--noir);
    transform:scaleY(0);
    transform-origin:bottom;
    transition:transform .45s cubic-bezier(.77,0,.18,1);
}

.bouton:hover{
    color:white;
    border-color:var(--noir);
}

.bouton:hover::before{
    transform:scaleY(1);
}

.bouton-clair{
    color:white;
}

.bouton-clair::before{
    background:white;
}

.bouton-clair:hover{
    color:var(--noir);
    border-color:white;
}

.bouton-accent::before{
    background:var(--accent);
}

.bouton-accent:hover{
    border-color:var(--accent);
}


/* =========================================================
   DIVS IMAGE — À REMPLACER PAR TES IMAGES
========================================================= */

.image{
    position:relative;
    overflow:hidden;
    background:#c8c8c5;
}

.image::before{
    position:absolute;
    inset:0;
    z-index:1;
    display:flex;
    align-items:center;
    justify-content:center;
    color:#777;
    font-size:8px;
    letter-spacing:4px;
}

.image::after{
    content:"";
    position:absolute;
    inset:0;
    background:linear-gradient(
        120deg,
        transparent 20%,
        rgba(255,255,255,.18),
        transparent 80%
    );
    transform:translateX(-100%);
    transition:transform .8s ease;
}

.image:hover::after{
    transform:translateX(100%);
}
.image img{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
    transition:transform .8s cubic-bezier(.22,1,.36,1);
}

.image:hover img{
    transform:scale(1.04);
}

/* =========================================================
   LOADER
========================================================= */

.chargement{
    position:fixed;
    inset:0;
    z-index:9999;
    display:flex;
    align-items:center;
    justify-content:center;
    background:var(--noir);
    color:var(--creme);
    transition:
        opacity .8s ease,
        visibility .8s ease;
}

.chargement.cache{
    opacity:0;
    visibility:hidden;
}

.chargement-logo{
    text-align:center;
}

.chargement-logo span{
    display:block;
    font-family:var(--serif);
    font-size:clamp(50px,8vw,90px);
    font-style:italic;
}

.chargement-logo small{
    display:block;
    margin-top:15px;
    font-size:8px;
    letter-spacing:5px;
    text-transform:uppercase;
}


/* =========================================================
   NAVIGATION
========================================================= */

.navbar{
    position:fixed;
    top:0;
    left:0;
    right:0;
    z-index:800;
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:24px 30px;
    color:white;
    transition:
        background .4s ease,
        color .4s ease,
        padding .4s ease,
        box-shadow .4s ease;
}

.navbar.scrolled{
    padding-top:14px;
    padding-bottom:14px;
    background:rgba(241,237,229,.94);
    color:var(--noir);
    backdrop-filter:blur(14px);
    box-shadow:0 1px 0 rgba(0,0,0,.08);
}

.logo{
    position:relative;
    z-index:2;
    font-family:var(--serif);
    font-size:25px;
    font-style:italic;
    letter-spacing:-1px;
}

.logo small{
    display:block;
    margin-top:-3px;
    font-family:var(--sans);
    font-size:7px;
    font-style:normal;
    letter-spacing:4px;
    text-transform:uppercase;
}

.navigation{
    display:flex;
    align-items:center;
    gap:34px;
    font-size:9px;
    letter-spacing:2px;
    text-transform:uppercase;
}

.navigation a{
    position:relative;
}

.navigation a:not(.reservation-nav)::after{
    content:"";
    position:absolute;
    left:0;
    bottom:-7px;
    width:0;
    height:1px;
    background:currentColor;
    transition:width .3s ease;
}

.navigation a:not(.reservation-nav):hover::after{
    width:100%;
}

.reservation-nav{
    padding:11px 17px;
    border:1px solid currentColor;
    transition:.3s ease;
}

.reservation-nav:hover{
    background:var(--noir);
    color:white;
}

.navbar:not(.scrolled) .reservation-nav:hover{
    background:white;
    color:var(--noir);
}

.menu-mobile{
    position:relative;
    z-index:900;
    display:none;
    width:40px;
    height:40px;
    align-items:center;
    justify-content:center;
    flex-direction:column;
    gap:5px;
    border:1px solid currentColor;
    background:transparent;
    color:inherit;
}

.menu-mobile span{
    width:16px;
    height:1px;
    background:currentColor;
    transition:.35s ease;
}

.menu-mobile.ouvert span:first-child{
    transform:translateY(3px) rotate(45deg);
}

.menu-mobile.ouvert span:last-child{
    transform:translateY(-3px) rotate(-45deg);
}


/* =========================================================
   HERO
========================================================= */

.hero{
    position:relative;
    min-height:100svh;
    display:flex;
    align-items:flex-end;
    overflow:hidden;
    background:var(--noir);
    color:white;
}

.hero-image{
    position:absolute;
    inset:-4%;
    background:
        radial-gradient(
            circle at 72% 30%,
            rgba(166,126,89,.65),
            transparent 28%
        ),
        radial-gradient(
            circle at 25% 65%,
            rgba(97,74,54,.75),
            transparent 35%
        ),
        linear-gradient(
            130deg,
            #171512 0%,
            #584636 50%,
            #211e1a 100%
        );
    animation:heroZoom 14s ease-in-out infinite alternate;
}

@keyframes heroZoom{
    from{transform:scale(1.03);}
    to{transform:scale(1.1);}
}

.hero-image::after{
    content:"";
    position:absolute;
    inset:0;
    background:
        linear-gradient(
            to bottom,
            rgba(0,0,0,.25),
            rgba(0,0,0,.05) 35%,
            rgba(0,0,0,.82) 100%
        );
}

.hero-contenu{
    position:relative;
    z-index:2;
    width:min(var(--largeur),calc(100% - 60px));
    margin:auto;
    padding:0 0 100px;
    display:grid;
    grid-template-columns:minmax(0,1fr) 290px;
    gap:80px;
    align-items:end;
}

.hero-titre .surtitre{
    color:white;
    opacity:.75;
    margin-bottom:24px;
}

.hero-titre h1{
    max-width:900px;
    font-family:var(--serif);
    font-size:clamp(75px,12vw,165px);
    font-weight:400;
    letter-spacing:-8px;
    line-height:.78;
}

.hero-titre h1 em{
    font-style:italic;
}

.hero-description{
    max-width:290px;
    padding-left:24px;
    border-left:1px solid rgba(255,255,255,.4);
    font-size:11px;
    line-height:1.9;
    color:rgba(255,255,255,.8);
}

.hero-description .bouton{
    margin-top:28px;
}

.hero-bas{
    position:absolute;
    z-index:3;
    right:30px;
    bottom:25px;
    left:30px;
    display:flex;
    justify-content:space-between;
    align-items:center;
    color:rgba(255,255,255,.65);
    font-size:7px;
    letter-spacing:3px;
    text-transform:uppercase;
}

.scroll-indication{
    display:flex;
    align-items:center;
    gap:12px;
}

.scroll-indication i{
    width:35px;
    height:1px;
    background:currentColor;
}


/* =========================================================
   INTRODUCTION
========================================================= */

.introduction{
    padding:150px 0;
}

.introduction-grille{
    display:grid;
    grid-template-columns:.8fr 1.4fr;
    gap:100px;
}

.introduction-gauche{
    padding-top:10px;
}

.introduction-gauche p{
    max-width:280px;
    margin-top:35px;
    color:#706c64;
    font-size:11px;
    line-height:2;
}

.signature{
    margin-top:40px;
    font-family:var(--serif);
    font-size:25px;
    font-style:italic;
}

.introduction-droite h2{
    font-family:var(--serif);
    font-size:clamp(40px,5.8vw,78px);
    font-weight:400;
    letter-spacing:-3px;
    line-height:1;
}

.introduction-droite h2 em{
    color:var(--accent);
}


/* =========================================================
   BANDEAU
========================================================= */

.bandeau{
    overflow:hidden;
    padding:21px 0;
    background:var(--noir);
    color:white;
}

.bandeau-piste{
    display:flex;
    width:max-content;
    animation:defilement 30s linear infinite;
}

.bandeau-item{
    display:flex;
    align-items:center;
    gap:35px;
    padding-right:35px;
    white-space:nowrap;
    font-family:var(--serif);
    font-size:24px;
    font-style:italic;
}

.bandeau-item span{
    color:var(--accent-clair);
    font-family:var(--sans);
    font-size:8px;
    font-style:normal;
    letter-spacing:3px;
}

@keyframes defilement{
    to{
        transform:translateX(-50%);
    }
}


/* =========================================================
   CARTE
========================================================= */

.carte-section{
    padding:145px 0;
    background:var(--blanc);
}

.carte-entete{
    display:flex;
    justify-content:space-between;
    align-items:flex-end;
    gap:50px;
    margin-bottom:75px;
}

.carte-entete-description{
    max-width:275px;
    color:#77736c;
    font-size:10px;
    line-height:1.9;
}

.onglets{
    display:flex;
    gap:8px;
    margin-bottom:45px;
}

.onglet{
    position:relative;
    overflow:hidden;
    padding:12px 18px;
    border:1px solid #d2cec5;
    background:transparent;
    color:var(--noir);
    font-size:8px;
    letter-spacing:2px;
    text-transform:uppercase;
    transition:.4s ease;
}

.onglet::before{
    content:"";
    position:absolute;
    inset:0;
    z-index:0;
    background:var(--noir);
    transform:translateY(101%);
    transition:transform .4s cubic-bezier(.77,0,.18,1);
}

.onglet span{
    position:relative;
    z-index:1;
}

.onglet:hover,
.onglet.actif{
    border-color:var(--noir);
    color:white;
}

.onglet:hover::before,
.onglet.actif::before{
    transform:translateY(0);
}

.menu-liste{
    border-top:1px solid #d5d1c8;
    transition:
        opacity .35s ease,
        transform .35s ease;
}

.menu-liste.changement{
    opacity:0;
    transform:translateY(12px);
}

.menu-item{
    display:grid;
    grid-template-columns:65px minmax(0,1fr) 80px;
    gap:30px;
    align-items:start;
    padding:27px 0;
    border-bottom:1px solid #d5d1c8;
    transition:
        background .3s ease,
        padding .3s ease;
}

.menu-item:hover{
    padding-left:15px;
    padding-right:15px;
    background:#f5f2eb;
}

.numero-plat{
    color:var(--accent);
    font-family:var(--serif);
    font-size:15px;
    font-style:italic;
}

.menu-item h3{
    margin-bottom:7px;
    font-family:var(--serif);
    font-size:22px;
    font-weight:400;
}

.menu-item p{
    max-width:600px;
    color:#77736c;
    font-size:10px;
    line-height:1.7;
}

.prix{
    text-align:right;
    font-family:var(--serif);
    font-size:18px;
}


/* =========================================================
   EXPERIENCE
========================================================= */

.experience{
    padding:150px 0;
    background:var(--creme);
}

.experience-entete{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:100px;
    align-items:end;
}

.experience-entete p{
    max-width:330px;
    color:#6e6a63;
    font-size:11px;
    line-height:2;
}

.mosaique{
    display:grid;
    grid-template-columns:1.15fr .85fr;
    gap:16px;
    margin-top:85px;
}

.image-grand{
    min-height:650px;
}

.colonne-images{
    display:grid;
    grid-template-rows:1fr 1fr;
    gap:16px;
}

.image-petit{
    min-height:317px;
}

.texte-experience{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:100px;
    margin-top:90px;
}

.texte-experience h3{
    max-width:450px;
    font-family:var(--serif);
    font-size:50px;
    font-weight:400;
    letter-spacing:-2px;
    line-height:.98;
}

.texte-experience p{
    max-width:480px;
    color:#6d6961;
    font-size:11px;
    line-height:2;
}

.lien{
    display:inline-flex;
    align-items:center;
    gap:15px;
    margin-top:28px;
    font-size:8px;
    letter-spacing:2px;
    text-transform:uppercase;
}

.lien i{
    width:35px;
    height:1px;
    background:currentColor;
    transition:.35s ease;
}

.lien:hover i{
    width:60px;
}


/* =========================================================
   DEGUSTATION
========================================================= */

.degustation{
    position:relative;
    overflow:hidden;
    padding:150px 0;
    background:var(--noir);
    color:white;
}

.degustation::before{
    content:"MENU";
    position:absolute;
    top:5%;
    right:-4%;
    color:rgba(255,255,255,.025);
    font-family:var(--serif);
    font-size:35vw;
    line-height:.7;
}

.degustation-interieur{
    position:relative;
    z-index:1;
    max-width:1050px;
    margin:auto;
    text-align:center;
}

.degustation h2{
    margin-top:25px;
    font-family:var(--serif);
    font-size:clamp(55px,8vw,100px);
    font-weight:400;
    letter-spacing:-4px;
    line-height:.88;
}

.degustation h2 em{
    color:var(--accent-clair);
}

.degustation-intro{
    max-width:480px;
    margin:35px auto 75px;
    color:#a3a09a;
    font-size:10px;
    line-height:2;
}

.etapes{
    max-width:720px;
    margin:auto;
}

.etape{
    display:grid;
    grid-template-columns:55px 1fr 70px;
    gap:25px;
    padding:25px 0;
    border-top:1px solid #373633;
    text-align:left;
}

.etape:last-child{
    border-bottom:1px solid #373633;
}

.etape-num{
    color:var(--accent-clair);
    font-family:var(--serif);
    font-style:italic;
}

.etape h3{
    font-family:var(--serif);
    font-size:19px;
    font-weight:400;
}

.etape p{
    margin-top:5px;
    color:#85827b;
    font-size:9px;
    line-height:1.5;
}

.etape-prix{
    text-align:right;
    font-family:var(--serif);
}


/* =========================================================
   GALERIE
========================================================= */

.galerie{
    padding:145px 0;
    background:var(--blanc);
}

.galerie-entete{
    display:flex;
    justify-content:space-between;
    align-items:flex-end;
    gap:50px;
}

.galerie-entete p{
    max-width:260px;
    color:#77736c;
    font-size:10px;
    line-height:1.9;
}

.galerie-grille{
    display:grid;
    grid-template-columns:repeat(12,1fr);
    grid-auto-rows:75px;
    gap:14px;
    margin-top:70px;
}

.galerie .image:nth-child(1){
    grid-column:span 5;
    grid-row:span 6;
}

.galerie .image:nth-child(2){
    grid-column:span 4;
    grid-row:span 4;
}

.galerie .image:nth-child(3){
    grid-column:span 3;
    grid-row:span 5;
}

.galerie .image:nth-child(4){
    grid-column:span 4;
    grid-row:span 5;
}

.galerie .image:nth-child(5){
    grid-column:span 3;
    grid-row:span 4;
}

.galerie .image:nth-child(6){
    grid-column:span 5;
    grid-row:span 4;
}


/* =========================================================
   AVIS
========================================================= */

.avis{
    padding:125px 30px;
    background:var(--accent);
    color:white;
    text-align:center;
}

.avis-slider{
    width:min(820px,100%);
    margin:auto;
    overflow:hidden;
}

.avis-piste{
    display:flex;
    transition:transform .7s cubic-bezier(.77,0,.18,1);
}

.avis-item{
    min-width:100%;
}

.avis-item blockquote{
    font-family:var(--serif);
    font-size:clamp(28px,4vw,48px);
    font-style:italic;
    line-height:1.2;
}

.avis-item cite{
    display:block;
    margin-top:30px;
    font-size:8px;
    font-style:normal;
    letter-spacing:3px;
    text-transform:uppercase;
}

.avis-commandes{
    display:flex;
    justify-content:center;
    gap:8px;
    margin-top:40px;
}

.avis-bouton{
    width:36px;
    height:36px;
    border:1px solid rgba(255,255,255,.5);
    background:transparent;
    color:white;
    transition:.3s ease;
}

.avis-bouton:hover{
    background:white;
    color:var(--accent);
}


/* =========================================================
   RESERVATION
========================================================= */

.reservation{
    padding:150px 0;
    background:var(--noir);
    color:white;
}

.reservation-grille{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:120px;
}

.reservation h2{
    max-width:600px;
    font-family:var(--serif);
    font-size:clamp(60px,8vw,100px);
    font-weight:400;
    letter-spacing:-5px;
    line-height:.84;
}

.reservation h2 em{
    color:var(--accent-clair);
}

.reservation-description{
    max-width:370px;
    margin-top:30px;
    color:#93908a;
    font-size:10px;
    line-height:1.9;
}

.formulaire{
    display:grid;
    gap:22px;
}

.champ{
    position:relative;
}

.champ input,
.champ select{
    width:100%;
    padding:16px 0;
    border:0;
    border-bottom:1px solid #484641;
    outline:none;
    background:transparent;
    color:white;
    font-size:11px;
}

.champ select option{
    background:var(--noir);
}

.champ label{
    position:absolute;
    top:16px;
    left:0;
    color:#77746d;
    font-size:9px;
    pointer-events:none;
    transition:.25s ease;
}

.champ input:focus + label,
.champ input:not(:placeholder-shown) + label{
    top:-5px;
    color:var(--accent-clair);
    font-size:7px;
}

.formulaire .bouton{
    width:100%;
    margin-top:10px;
    background:white;
    color:var(--noir);
}

.formulaire .bouton::before{
    background:var(--accent);
}

.formulaire .bouton:hover{
    color:white;
}


/* =========================================================
   INFORMATIONS
========================================================= */

.informations{
    padding:90px 0;
    background:var(--creme);
}

.infos-grille{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    border-top:1px solid #cbc7bf;
    border-bottom:1px solid #cbc7bf;
}

.info{
    padding:35px 25px;
    border-right:1px solid #cbc7bf;
}

.info:last-child{
    border-right:0;
}

.info small{
    display:block;
    margin-bottom:15px;
    color:var(--accent);
    font-size:7px;
    letter-spacing:3px;
    text-transform:uppercase;
}

.info strong{
    display:block;
    font-family:var(--serif);
    font-size:18px;
    font-weight:400;
    line-height:1.4;
}

.info p{
    margin-top:8px;
    color:#77736c;
    font-size:9px;
    line-height:1.7;
}


/* =========================================================
   FOOTER
========================================================= */

footer{
    padding:75px 30px 30px;
    background:var(--creme);
}

.footer-haut{
    width:min(var(--largeur),100%);
    margin:auto;
    display:flex;
    justify-content:space-between;
    align-items:flex-end;
    gap:50px;
}

.footer-logo{
    font-family:var(--serif);
    font-size:clamp(55px,8vw,90px);
    font-style:italic;
    letter-spacing:-5px;
}

.footer-links{
    display:flex;
    flex-wrap:wrap;
    gap:25px;
    font-size:8px;
    letter-spacing:2px;
    text-transform:uppercase;
}

.footer-links a{
    transition:color .25s ease;
}

.footer-links a:hover{
    color:var(--accent);
}

.footer-bas{
    width:min(var(--largeur),100%);
    margin:75px auto 0;
    padding-top:20px;
    border-top:1px solid #cbc7bf;
    display:flex;
    justify-content:space-between;
    gap:30px;
    color:#8b877f;
    font-size:7px;
    letter-spacing:2px;
    line-height:1.8;
    text-transform:uppercase;
}


/* =========================================================
   ANIMATIONS SCROLL
========================================================= */

.revelation{
    opacity:0;
    transform:translateY(35px);
    transition:
        opacity .9s ease,
        transform .9s cubic-bezier(.22,1,.36,1);
}

.revelation.visible{
    opacity:1;
    transform:none;
}

.revelation-gauche{
    opacity:0;
    transform:translateX(-35px);
    transition:.9s cubic-bezier(.22,1,.36,1);
}

.revelation-gauche.visible{
    opacity:1;
    transform:none;
}

.revelation-droite{
    opacity:0;
    transform:translateX(35px);
    transition:.9s cubic-bezier(.22,1,.36,1);
}

.revelation-droite.visible{
    opacity:1;
    transform:none;
}


/* =========================================================
   TOAST
========================================================= */

.toast{
    position:fixed;
    right:25px;
    bottom:25px;
    z-index:1000;
    padding:17px 22px;
    background:var(--noir);
    color:white;
    font-size:8px;
    letter-spacing:1px;
    transform:translateY(120px);
    transition:.45s ease;
}

.toast.visible{
    transform:none;
}


/* =========================================================
   RESPONSIVE — TABLETTE
========================================================= */

@media(max-width:1000px){

    .navigation{
        gap:20px;
    }

    .hero-contenu{
        grid-template-columns:1fr 240px;
        gap:50px;
    }

    .introduction-grille,
    .experience-entete{
        gap:60px;
    }

    .reservation-grille{
        gap:70px;
    }
}


/* =========================================================
   RESPONSIVE — MOBILE < 800px
========================================================= */

@media(max-width:800px){

    :root{
        --largeur:100%;
    }

    .conteneur{
        width:calc(100% - 40px);
    }


    /* ---------- NAVIGATION ---------- */

    .navbar{
        padding:18px 20px;
    }

    .navbar.scrolled{
        padding-top:13px;
        padding-bottom:13px;
    }

    .navigation{
        position:fixed;
        inset:0;
        z-index:800;
        display:flex;
        flex-direction:column;
        align-items:center;
        justify-content:center;
        gap:28px;
        background:var(--noir);
        color:white;
        font-size:12px;
        opacity:0;
        visibility:hidden;
        transform:translateY(-15px);
        transition:
            opacity .35s ease,
            visibility .35s ease,
            transform .35s ease;
    }

    .navigation.ouvert{
        opacity:1;
        visibility:visible;
        transform:none;
    }

    .navigation a:not(.reservation-nav)::after{
        display:none;
    }

    .reservation-nav{
        padding:13px 20px;
    }

    .menu-mobile{
        display:flex;
    }


    /* ---------- HERO ---------- */

    .hero{
        min-height:100svh;
        align-items:flex-end;
    }

    .hero-image{
        inset:-8%;
    }

    .hero-contenu{
        width:calc(100% - 40px);
        display:block;
        padding-bottom:105px;
    }

    .hero-titre{
        width:100%;
    }

    .hero-titre .surtitre{
        max-width:240px;
        margin-bottom:20px;
        font-size:7px;
        letter-spacing:2.5px;
        line-height:1.7;
    }

    .hero-titre h1{
        width:100%;
        max-width:100%;
        font-size:clamp(62px,18vw,105px);
        letter-spacing:-4px;
        line-height:.8;
    }

    .hero-description{
        max-width:290px;
        margin-top:35px;
        margin-left:5px;
        padding-left:17px;
        font-size:9px;
        line-height:1.8;
    }

    .hero-description .bouton{
        margin-top:22px;
    }

    .hero-bas{
        right:20px;
        bottom:18px;
        left:20px;
        font-size:6px;
        letter-spacing:2px;
    }

    .scroll-indication i{
        width:25px;
    }


    /* ---------- TITRES ---------- */

    .titre-section{
        font-size:clamp(53px,15vw,75px);
        letter-spacing:-4px;
    }


    /* ---------- INTRO ---------- */

    .introduction{
        padding:90px 0;
    }

    .introduction-grille{
        display:block;
    }

    .introduction-droite{
        margin-top:55px;
    }

    .introduction-droite h2{
        font-size:clamp(40px,11vw,57px);
        letter-spacing:-2px;
    }

    .introduction-gauche p{
        max-width:290px;
        margin-top:25px;
    }


    /* ---------- BANDEAU ---------- */

    .bandeau-item{
        font-size:20px;
        gap:25px;
        padding-right:25px;
    }


    /* ---------- CARTE ---------- */

    .carte-section{
        padding:90px 0;
    }

    .carte-entete{
        display:block;
        margin-bottom:50px;
    }

    .carte-entete .titre-section{
        margin-bottom:20px;
    }

    .carte-entete-description{
        max-width:290px;
    }

    .onglets{
        display:grid;
        grid-template-columns:repeat(3,1fr);
        gap:5px;
        margin-bottom:35px;
    }

    .onglet{
        width:100%;
        padding:12px 5px;
        font-size:7px;
        letter-spacing:1px;
    }

    .menu-item{
        grid-template-columns:32px minmax(0,1fr);
        gap:12px;
        padding:24px 0;
    }

    .menu-item:hover{
        padding-left:5px;
        padding-right:5px;
    }

    .numero-plat{
        font-size:13px;
    }

    .menu-item h3{
        font-size:19px;
    }

    .menu-item p{
        font-size:9px;
        line-height:1.7;
    }

    .prix{
        grid-column:2;
        margin-top:8px;
        text-align:left;
        font-size:16px;
    }


    /* ---------- EXPERIENCE ---------- */

    .experience{
        padding:90px 0;
    }

    .experience-entete{
        display:block;
    }

    .experience-entete p{
        margin-top:30px;
        max-width:290px;
    }

    .mosaique{
        display:block;
        margin-top:50px;
    }

    .image-grand{
        min-height:430px;
    }

    .colonne-images{
        margin-top:14px;
        grid-template-columns:1fr 1fr;
        grid-template-rows:none;
        gap:14px;
    }

    .image-petit{
        min-height:230px;
    }

    .texte-experience{
        display:block;
        margin-top:60px;
    }

    .texte-experience h3{
        font-size:39px;
        letter-spacing:-1px;
    }

    .texte-experience > div + div{
        margin-top:40px;
    }


    /* ---------- DEGUSTATION ---------- */

    .degustation{
        padding:90px 0;
    }

    .degustation-interieur{
        width:calc(100% - 40px);
    }

    .degustation h2{
        font-size:clamp(55px,15vw,80px);
        letter-spacing:-3px;
    }

    .degustation-intro{
        margin-bottom:55px;
    }

    .etape{
        grid-template-columns:30px minmax(0,1fr);
        gap:14px;
        padding:22px 0;
    }

    .etape h3{
        font-size:17px;
    }

    .etape p{
        font-size:8px;
    }

    .etape-prix{
        grid-column:2;
        margin-top:-5px;
        text-align:left;
        font-size:15px;
    }


    /* ---------- GALERIE ---------- */

    .galerie{
        padding:90px 0;
    }

    .galerie-entete{
        display:block;
    }

    .galerie-entete p{
        margin-top:30px;
    }

    .galerie-grille{
        grid-template-columns:1fr 1fr;
        grid-auto-rows:150px;
        gap:10px;
        margin-top:45px;
    }

    .galerie .image:nth-child(n){
        grid-column:auto;
        grid-row:auto;
    }

    .galerie .image:nth-child(1){
        grid-column:span 2;
    }

    .galerie .image:nth-child(4){
        grid-column:span 2;
    }


    /* ---------- AVIS ---------- */

    .avis{
        padding:90px 20px;
    }

    .avis-item blockquote{
        font-size:28px;
    }


    /* ---------- RESERVATION ---------- */

    .reservation{
        padding:90px 0;
    }

    .reservation-grille{
        display:block;
    }

    .reservation h2{
        font-size:clamp(58px,15vw,85px);
        letter-spacing:-4px;
    }

    .reservation-formulaire{
        margin-top:65px;
    }


    /* ---------- INFORMATIONS ---------- */

    .informations{
        padding:65px 0;
    }

    .infos-grille{
        grid-template-columns:1fr 1fr;
    }

    .info{
        min-height:145px;
        padding:25px 15px;
        border-right:1px solid #cbc7bf;
        border-bottom:1px solid #cbc7bf;
    }

    .info:nth-child(2n){
        border-right:0;
    }

    .info:nth-child(n+3){
        border-bottom:0;
    }

    .info strong{
        font-size:16px;
    }


    /* ---------- FOOTER ---------- */

    footer{
        padding:60px 20px 25px;
    }

    .footer-haut{
        display:block;
    }

    .footer-logo{
        font-size:57px;
    }

    .footer-links{
        margin-top:30px;
        gap:18px;
        line-height:2;
    }

    .footer-bas{
        display:block;
        margin-top:55px;
    }

    .footer-bas span{
        display:block;
        margin-bottom:8px;
    }


    /* ---------- TOAST ---------- */

    .toast{
        right:15px;
        bottom:15px;
        left:15px;
        text-align:center;
    }
}


/* =========================================================
   PETITS MOBILES
========================================================= */

@media(max-width:420px){

    .hero-titre h1{
        font-size:clamp(57px,17vw,75px);
        letter-spacing:-3px;
    }

    .hero-description{
        max-width:250px;
    }

    .onglet{
        font-size:6px;
    }

    .colonne-images{
        grid-template-columns:1fr;
    }

    .image-petit{
        min-height:260px;
    }

    .galerie-grille{
        grid-auto-rows:125px;
    }

    .footer-logo{
        font-size:50px;
    }
}


/* =========================================================
   REDUCTION DES ANIMATIONS
========================================================= */

@media(prefers-reduced-motion:reduce){

    *,
    *::before,
    *::after{
        scroll-behavior:auto!important;
        animation-duration:.01ms!important;
        animation-iteration-count:1!important;
        transition-duration:.01ms!important;
    }
}

/* =========================================================
   CORRECTION DU DEBORDEMENT HORIZONTAL
========================================================= */

html,
body{
    max-width:100%;
    overflow-x:clip;
}

main,
footer,
section,
.bandeau,
.avis,
.avis-slider{
    min-width:0;
    max-width:100%;
    overflow-x:clip;
}

.conteneur,
.hero-contenu,
.degustation-interieur,
.reservation-grille,
.infos-grille,
.footer-haut,
.footer-bas{
    min-width:0;
}

button,
input,
select{
    max-width:100%;
}

.revelation-gauche,
.revelation-droite{
    transform:translateY(35px);
}

@media(max-width:800px){
    .revelation-gauche,
    .revelation-droite{
        transform:translateY(24px);
    }

    .navigation{
        width:100%;
        max-width:100%;
    }

    .hero-contenu,
    .degustation-interieur{
        max-width:calc(100% - 40px);
    }

    .formulaire,
    .champ,
    .champ input,
    .champ select{
        width:100%;
        min-width:0;
    }
}

/* BOUTON DE RETOUR */

.bouton_retour{
	position:fixed;
	left:50%;
	transform:translateX(-50%);
	bottom:24px;
	z-index:9999;
	display:inline-flex;
	align-items:center;
	justify-content:center;
	gap:10px;
	padding:14px 20px;
	border:1px solid rgba(32,35,33,.12);
	border-radius:999px;
	background:#fff;
	color:#202321;
	box-shadow:0 12px 35px rgba(0,0,0,.16);
	text-decoration:none;
	font:600 14px "DM Sans",sans-serif;
	transition:transform .25s ease,box-shadow .25s ease;
}

.bouton_retour:hover{
	transform:translateX(-50%) translateY(-3px);
	box-shadow:0 16px 40px rgba(0,0,0,.22);
}

.bouton_retour:focus-visible{
	outline:3px solid #202321;
	outline-offset:4px;
}

.bouton_retour span{
	font-size:18px;
	line-height:1;
}

@media(max-width:600px){

	.bouton_retour{
		bottom:max(15px,env(safe-area-inset-bottom));
		padding:12px 16px;
		font-size:13px;
	}
}

@media(prefers-reduced-motion:reduce){

	.bouton_retour{
		transition:none;
	}
}