/* Feuille de style du site : couleurs et polices en haut (:root), le reste en dessous */
:root{
  --cacao:#2A1A14;      /* fond principal */
  --cacao-2:#33211A;    /* fond des sections alternées */
  --caramel:#C68642;    /* accent unique */
  --praline:#8A5A3B;    /* filets, détails */
  --sucre:#F3EBE0;      /* texte */
  --serif:"Cormorant Garamond","Cormorant",Georgia,"Times New Roman",serif;
  --sans:"Jost","Helvetica Neue",Arial,sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--cacao);color:var(--sucre);font:300 1.0625rem/1.7 var(--sans);-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:inherit}
:focus-visible{outline:2px solid var(--caramel);outline-offset:4px}
section[id]{scroll-margin-top:4rem}

/* En-tête */
.top{position:fixed;inset:0 0 auto 0;z-index:10;display:flex;align-items:center;justify-content:space-between;padding:1rem 1.5rem;background:linear-gradient(var(--cacao) 40%,rgba(42,26,20,0));}
.logo{font:500 1.7rem/1 var(--serif);letter-spacing:.04em;text-decoration:none}
.btn{display:inline-block;font:500 .95rem/1 var(--sans);letter-spacing:.06em;text-decoration:none;padding:.95rem 1.8rem;border:1px solid var(--caramel);color:var(--caramel);border-radius:2px;transition:background .25s,color .25s}
.btn:hover{background:var(--caramel);color:var(--cacao)}
.btn.plein{background:var(--caramel);color:var(--cacao)}
.btn.plein:hover{background:var(--sucre);border-color:var(--sucre)}
.top .btn{padding:.65rem 1.2rem;font-size:.88rem}

/* Accueil */
.hero{min-height:100svh;display:grid;place-content:center;text-align:center;padding:6rem 1.5rem 5rem;position:relative}
.hero h1{font:400 clamp(5.5rem,22vw,15rem)/.9 var(--serif);letter-spacing:.01em;animation:entree 1.4s ease-out both}
.hero p{margin-top:1.6rem;font:italic 400 clamp(1.3rem,3.2vw,1.9rem)/1.2 var(--serif);color:var(--caramel);animation:entree 1.4s .35s ease-out both}
.defile{position:absolute;left:50%;bottom:1.5rem;width:1px;height:4rem;background:linear-gradient(var(--caramel),transparent);animation:entree 1.4s .8s ease-out both}
@keyframes entree{from{opacity:0;letter-spacing:.12em}to{opacity:1}}
.hero h1,.hero p{will-change:opacity}

/* Saveurs */
.saveur{min-height:92svh;display:grid;align-items:center;gap:2rem;padding:5rem 1.5rem;max-width:72rem;margin:0 auto}
.fond-2{background:var(--cacao-2)}
.fond-2 .saveur{}
.disque{position:relative;width:min(80vw,30rem);aspect-ratio:1;justify-self:center;filter:drop-shadow(0 28px 34px rgba(0,0,0,.5))}
.disque::before{content:"";position:absolute;inset:-14%;border-radius:50%;background:radial-gradient(circle,rgba(198,134,66,.22),rgba(198,134,66,0) 65%);z-index:-1;filter:none}
.disque img{width:100%;height:100%;object-fit:contain;display:block;will-change:transform}
.texte h2{font:500 clamp(2.8rem,7vw,5rem)/1 var(--serif);margin-bottom:1rem}
.texte p{max-width:24rem;color:rgba(243,235,224,.82)}
.texte .filet{display:block;width:3rem;height:1px;background:var(--caramel);margin-bottom:1.4rem}
@media(min-width:820px){
  .saveur{grid-template-columns:1fr 1fr;gap:4rem}
  .saveur.inverse .disque{order:2}
  .saveur.inverse .texte{justify-self:end}
}

/* Carte */
.carte{padding:6rem 1.5rem;border-top:1px solid var(--praline)}
.cadre{max-width:40rem;margin:0 auto}
h3{font:500 clamp(2.4rem,6vw,3.6rem)/1 var(--serif);margin-bottom:.6rem;text-align:center}
.intro{text-align:center;color:rgba(243,235,224,.7);margin-bottom:3rem}
.liste{list-style:none}
.liste li{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;padding:1.1rem 0;border-bottom:1px solid rgba(138,90,59,.55)}
.liste .nom{font:500 1.5rem/1.2 var(--serif)}
.liste small{display:block;font:300 .92rem/1.4 var(--sans);color:rgba(243,235,224,.65);margin-top:.15rem}
.liste .prix{font:500 1.35rem var(--serif);color:var(--caramel);white-space:nowrap}

/* Commander */
.commander{padding:6rem 1.5rem 7rem;background:var(--cacao-2);text-align:center}
.etapes{list-style:none;counter-reset:e;max-width:60rem;margin:3rem auto;display:grid;gap:2.2rem;text-align:left}
.etapes li{counter-increment:e;padding-top:1.1rem;border-top:1px solid var(--caramel)}
.etapes li::before{content:counter(e);display:block;font:italic 400 2.2rem/1 var(--serif);color:var(--caramel);margin-bottom:.4rem}
.etapes b{display:block;font:500 1.5rem/1.2 var(--serif);margin-bottom:.3rem}
.etapes span{color:rgba(243,235,224,.75)}
@media(min-width:760px){.etapes{grid-template-columns:repeat(3,1fr);gap:2.5rem}}
.note{margin-top:1.8rem;font-size:.92rem;color:rgba(243,235,224,.6)}

footer{padding:2.5rem 1.5rem;text-align:center;font-size:.92rem;color:rgba(243,235,224,.6);border-top:1px solid var(--praline)}
footer a{color:var(--caramel);text-decoration:none}

@media(prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
  html{scroll-behavior:auto}
}