/* Brûlerie du Cher — feuille unique. Palette café : grains torréfiés, crème, cuivre. */
:root{
  --noir:#241812; --grain:#2b1d16; --creme:#f7f1e8; --papier:#fffdfa;
  --cuivre:#b06b3a; --doux:#7b6a5d; --trait:rgba(36,24,18,.12);
}
*{box-sizing:border-box; margin:0; padding:0;}
body{font-family:'Work Sans',sans-serif; background:var(--creme); color:var(--noir);
  line-height:1.65; font-weight:300; -webkit-font-smoothing:antialiased;}
h1,h2,h3{font-family:'Fraunces',Georgia,serif; font-weight:600; line-height:1.15;}
img{display:block; max-width:100%;} a{color:inherit;}
.wrap{max-width:1100px; margin:0 auto; padding:0 22px;}

/* accessibilité */
.skip{position:absolute; left:16px; top:-60px; z-index:1000; background:var(--grain); color:#fff;
  padding:11px 18px; border-radius:0 0 10px 10px; font:600 14px/1.2 system-ui,sans-serif;
  text-decoration:none; transition:top .15s ease;}
.skip:focus{top:0;}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,[tabindex]:focus-visible{
  outline:2px solid currentColor; outline-offset:3px; border-radius:4px;}
@media (prefers-reduced-motion: reduce){*,*::before,*::after{
  animation-duration:.01ms !important; transition-duration:.01ms !important; scroll-behavior:auto !important;}}

/* barre */
nav.top{position:sticky; top:0; z-index:50; background:rgba(247,241,232,.92);
  backdrop-filter:blur(10px); border-bottom:1px solid var(--trait);}
nav.top .wrap{display:flex; align-items:center; justify-content:space-between; height:66px; gap:16px;}
.marque{font-family:'Fraunces',serif; font-weight:600; font-size:19px; text-decoration:none; letter-spacing:-.01em;}
.marque em{font-style:normal; color:var(--cuivre);}
nav.top ul{display:flex; gap:22px; list-style:none; align-items:center;}
nav.top ul a{font-size:14px; text-decoration:none; color:var(--doux);}
nav.top ul a:hover{color:var(--noir);}
.lien-panier{position:relative; display:inline-flex; align-items:center; gap:8px;
  border:1px solid var(--trait); background:var(--papier); border-radius:999px;
  padding:8px 15px; font-size:14px; text-decoration:none; white-space:nowrap;}
.lien-panier:hover{border-color:var(--cuivre); color:var(--cuivre);}
#badge-panier{background:var(--cuivre); color:#fff; font-size:11.5px; font-weight:600;
  min-width:19px; height:19px; border-radius:999px; display:inline-flex;
  align-items:center; justify-content:center; padding:0 5px;}
@media (max-width:620px){ nav.top ul li.masquable{display:none;} }

/* en-tête */
.hero{padding:clamp(48px,8vw,92px) 0 clamp(28px,4vw,44px);}
.hero .sur{font-size:12px; letter-spacing:2.5px; text-transform:uppercase; color:var(--cuivre); margin-bottom:12px;}
.hero h1{font-size:clamp(34px,6vw,60px); max-width:16ch;}
.hero p{margin-top:18px; max-width:56ch; color:var(--doux); font-size:clamp(15px,2vw,17px);}
.demo{display:inline-block; margin-top:22px; font-size:12.5px; color:var(--doux);
  background:var(--papier); border:1px dashed var(--trait); border-radius:999px; padding:7px 15px;}

/* catalogue */
section{padding:clamp(34px,5vw,58px) 0;}
.titre-sec{font-size:clamp(22px,3vw,30px); margin-bottom:6px;}
.sous-sec{color:var(--doux); font-size:14.5px; margin-bottom:26px;}
.grille{display:grid; gap:20px; grid-template-columns:repeat(auto-fill,minmax(250px,1fr));}
.carte{background:var(--papier); border:1px solid var(--trait); border-radius:16px; overflow:hidden;
  display:flex; flex-direction:column; transition:transform .2s, box-shadow .2s;}
.carte:hover{transform:translateY(-3px); box-shadow:0 12px 26px rgba(36,24,18,.10);}
.carte .sachet{height:150px; display:flex; align-items:flex-end; padding:14px;}
.carte .sachet span{font-family:'Fraunces',serif; color:#fff; font-size:15px; opacity:.92;}
.carte .corps{padding:18px 18px 20px; display:flex; flex-direction:column; flex:1;}
.carte h3{font-size:18px;}
.carte .notes{font-size:13.5px; color:var(--doux); margin:7px 0 14px; flex:1;}
.carte .bas{display:flex; align-items:baseline; justify-content:space-between; gap:10px;}
.prix{font-family:'Fraunces',serif; font-weight:600; font-size:19px;}
.poids{font-size:12.5px; color:var(--doux);}
.carte a.voir{margin-top:14px; text-align:center; text-decoration:none; font-size:14px; font-weight:500;
  border:1px solid var(--trait); border-radius:10px; padding:10px; transition:background .2s,color .2s;}
.carte a.voir:hover{background:var(--grain); color:#fff; border-color:var(--grain);}

/* fiche produit */
.fiche{display:grid; grid-template-columns:1fr 1fr; gap:40px; align-items:start;
  padding:clamp(28px,5vw,54px) 0;}
@media (max-width:760px){ .fiche{grid-template-columns:1fr; gap:26px;} }
.fiche .visuel{border-radius:18px; min-height:320px; display:flex; align-items:flex-end; padding:22px;}
.fiche .visuel span{font-family:'Fraunces',serif; color:#fff; font-size:19px;}
.fiche h1{font-size:clamp(28px,4vw,42px);}
.fiche .prix-gros{font-family:'Fraunces',serif; font-size:28px; margin:12px 0 4px;}
.fiche dl{display:grid; grid-template-columns:auto 1fr; gap:8px 18px; margin:22px 0; font-size:14px;}
.fiche dt{color:var(--doux);} .fiche dd{font-weight:500;}
.champ{margin:18px 0;}
.champ label{display:block; font-size:13px; color:var(--doux); margin-bottom:7px;}
select,input[type=number]{font:inherit; font-size:15px; padding:11px 13px; border-radius:10px;
  border:1px solid var(--trait); background:var(--papier); color:inherit; width:100%; max-width:260px;}
.bouton{display:inline-flex; align-items:center; justify-content:center; gap:9px;
  background:var(--grain); color:#fff; border:none; border-radius:12px; cursor:pointer;
  font:600 15px/1 'Work Sans',sans-serif; padding:15px 26px; transition:background .2s, transform .15s;}
.bouton:hover{background:var(--cuivre); transform:translateY(-1px);}
.bouton.pale{background:var(--papier); color:var(--noir); border:1px solid var(--trait);}
.bouton.pale:hover{background:var(--creme); color:var(--noir);}
.bouton[disabled]{opacity:.55; cursor:not-allowed; transform:none;}
.retour-ligne{margin-top:14px; font-size:13.5px; color:var(--cuivre); min-height:20px;}

/* panier */
.lignes{border:1px solid var(--trait); border-radius:16px; background:var(--papier); overflow:hidden;}
.ligne{display:grid; grid-template-columns:64px 1fr auto auto; gap:16px; align-items:center;
  padding:16px 18px; border-bottom:1px solid var(--trait);}
.ligne:last-child{border-bottom:none;}
@media (max-width:620px){ .ligne{grid-template-columns:48px 1fr auto; gap:10px;} .ligne .sous{display:none;} }
.vignette{width:64px; height:64px; border-radius:12px;}
@media (max-width:620px){ .vignette{width:48px; height:48px;} }
.ligne h3{font-size:15.5px; font-family:'Work Sans',sans-serif; font-weight:600;}
.ligne .sous{font-size:13px; color:var(--doux);}
.qte{display:flex; align-items:center; gap:6px;}
.qte button{width:30px; height:30px; border-radius:8px; border:1px solid var(--trait);
  background:var(--papier); cursor:pointer; font-size:16px; line-height:1;}
.qte button:hover{border-color:var(--cuivre); color:var(--cuivre);}
.qte span{min-width:22px; text-align:center; font-variant-numeric:tabular-nums;}
.recap{margin-top:22px; display:flex; justify-content:space-between; align-items:center;
  flex-wrap:wrap; gap:16px; padding-top:20px; border-top:2px solid var(--grain);}
.recap .somme{font-family:'Fraunces',serif; font-size:26px;}
.vide{text-align:center; padding:60px 20px; color:var(--doux);}

/* bandeau démonstration */
.bandeau{background:var(--grain); color:#f2e4d7; font-size:13px; text-align:center; padding:9px 18px;}
.bandeau b{color:#fff; font-weight:600;}
.bandeau a{color:#fff;}

footer{border-top:1px solid var(--trait); margin-top:40px; padding:26px 0 46px;
  font-size:13px; color:var(--doux);}
footer .wrap{display:flex; justify-content:space-between; gap:12px 24px; flex-wrap:wrap;}
footer a{color:var(--doux);}