/* =========================================================
   RESTO QR — Espace client
   Direction artistique : "marché d'épices" — chaleureux, gourmand,
   inspiré des étals et tickets de marché.
   ========================================================= */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400;9..144,600;9..144,700&family=Plus+Jakarta+Sans:wght@400;500;600;700;800&family=JetBrains+Mono:wght@500;700&display=swap');

:root{
  --clay-50:#FBF3E7;
  --clay-100:#F3E4CE;
  --clay-line:#E6D3B5;
  --ink:#2B2118;
  --ink-soft:#6B5D4F;
  --paprika:#B8441F;
  --paprika-dark:#8E3216;
  --turmeric:#E3A23C;
  --teal:#1F5C52;
  --teal-dark:#153F38;
  --white:#FFFDF9;
}

*{ box-sizing:border-box; }

body{
  background:var(--clay-50);
  color:var(--ink);
  font-family:'Plus Jakarta Sans', system-ui, sans-serif;
}

h1,h2,h3,h4,h5,.font-display{
  font-family:'Fraunces', Georgia, serif;
  letter-spacing:-0.01em;
}

/* ---------- En-tête / Hero ---------- */
.rq-hero{
  background:linear-gradient(135deg,var(--paprika) 0%,var(--paprika-dark) 100%);
  color:var(--white);
  padding:1.5rem 1.25rem 2.75rem;
  position:relative;
  overflow:hidden;
}
.rq-hero::after{
  content:"";
  position:absolute; left:0; right:0; bottom:-1px; height:22px;
  background:
    radial-gradient(circle at 10px 0, transparent 12px, var(--clay-50) 12.5px) repeat-x;
  background-size:24px 24px;
}
.rq-hero .eyebrow{
  font-family:'JetBrains Mono', monospace;
  font-size:.72rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  opacity:.85;
}
.rq-hero h1{
  font-size:1.9rem;
  font-weight:600;
  margin:.15rem 0 .1rem;
}
.rq-hero .meta{
  font-size:.85rem;
  opacity:.9;
}
.rq-hero .table-chip{
  display:inline-flex;
  align-items:center;
  gap:.4rem;
  background:rgba(255,255,255,.16);
  border:1px solid rgba(255,255,255,.35);
  border-radius:999px;
  padding:.35rem .9rem;
  font-size:.82rem;
  font-weight:600;
  margin-top:.6rem;
}

/* ---------- Onglets catégories : étiquettes de bocaux ---------- */
.cat-pills{
  display:flex;
  gap:.5rem;
  overflow-x:auto;
  padding:0 0 .3rem;
  margin:-1.6rem 0 1.25rem;
  position:relative;
  z-index:2;
}
.cat-pills::-webkit-scrollbar{ display:none; }
.cat-pill{
  flex:0 0 auto;
  background:var(--white);
  border:1.5px solid var(--clay-line);
  color:var(--ink-soft);
  font-weight:700;
  font-size:.85rem;
  padding:.55rem 1.1rem;
  border-radius:999px;
  cursor:pointer;
  white-space:nowrap;
  box-shadow:0 2px 6px rgba(43,33,24,.06);
  transition:all .15s ease;
}
.cat-pill.active{
  background:var(--teal);
  border-color:var(--teal);
  color:var(--white);
}

/* ---------- Fiches plats : ticket de marché ---------- */
.menu-card{
  background:var(--white);
  border:1px solid var(--clay-line);
  border-radius:1rem;
  padding:.9rem;
  margin-bottom:.75rem;
  display:flex;
  gap:.9rem;
  align-items:center;
  transition:box-shadow .15s ease;
}
.menu-card:hover{ box-shadow:0 6px 18px rgba(43,33,24,.08); }
.menu-card .thumb{
  width:64px; height:64px; border-radius:.7rem;
  object-fit:cover; flex:0 0 auto;
  background:var(--clay-100);
}
.menu-card .thumb-fallback{
  width:64px; height:64px; border-radius:.7rem;
  display:flex; align-items:center; justify-content:center;
  background:var(--clay-100); font-size:1.5rem; flex:0 0 auto;
}
.menu-card .name{ font-weight:700; margin:0; font-size:1rem; }
.menu-card .desc{ font-size:.78rem; color:var(--ink-soft); margin:.1rem 0 .35rem; }
.menu-card .price-tag{
  font-family:'JetBrains Mono', monospace;
  font-weight:700;
  color:var(--paprika-dark);
  font-size:.88rem;
}

.qty-control{ display:flex; align-items:center; gap:.5rem; flex:0 0 auto; }
.qty-btn{
  width:30px; height:30px; border-radius:50%;
  border:1.5px solid var(--clay-line); background:var(--white);
  color:var(--ink); font-weight:700; line-height:1;
  display:flex; align-items:center; justify-content:center;
}
.qty-btn:active{ background:var(--clay-100); }
.qty-val{ min-width:1.1rem; text-align:center; font-weight:700; }

/* ---------- Barre panier flottante ---------- */
.cart-bar{
  position:fixed; left:0; right:0; bottom:0;
  background:var(--teal);
  color:var(--white);
  padding:.9rem 1.1rem;
  box-shadow:0 -6px 20px rgba(21,63,56,.25);
  z-index:1030;
}
.cart-bar .total{ font-family:'JetBrains Mono', monospace; font-weight:700; font-size:1.05rem; }
.cart-bar .count{ font-size:.75rem; opacity:.85; }
.cart-bar .btn{
  background:var(--turmeric); color:var(--ink);
  border:none; font-weight:700; border-radius:.6rem;
  padding:.55rem 1.3rem;
}

/* ---------- Etapes de suivi ---------- */
.status-track{ display:flex; gap:0; margin:1rem 0 .25rem; }
.status-step{
  flex:1; text-align:center; font-size:.65rem; font-weight:700;
  color:var(--ink-soft); position:relative; padding-top:1.4rem;
  text-transform:uppercase; letter-spacing:.02em;
}
.status-step::before{
  content:""; position:absolute; top:.35rem; left:-50%; right:50%;
  height:3px; background:var(--clay-line); z-index:0;
}
.status-step:first-child::before{ display:none; }
.status-step::after{
  content:""; position:absolute; top:0; left:50%; transform:translateX(-50%);
  width:.7rem; height:.7rem; border-radius:50%; background:var(--clay-line); z-index:1;
}
.status-step.active{ color:var(--teal-dark); }
.status-step.active::after{ background:var(--teal); }
.status-step.active::before{ background:var(--teal); }

/* ---------- Cartes génériques / modales ---------- */
.rq-card{
  background:var(--white);
  border:1px solid var(--clay-line);
  border-radius:1rem;
  overflow:hidden;
}
.rq-card .rq-card-header{
  background:var(--clay-100);
  font-weight:700;
  padding:.8rem 1rem;
  border-bottom:1px solid var(--clay-line);
}
.rq-btn-primary{
  background:var(--paprika); border:none; color:var(--white); font-weight:700;
  border-radius:.65rem;
}
.rq-btn-primary:hover{ background:var(--paprika-dark); color:var(--white); }
.rq-btn-outline{
  background:transparent; border:1.5px solid var(--clay-line); color:var(--ink);
  border-radius:.65rem; font-weight:600;
}

.pay-option{
  display:flex; align-items:center; gap:.7rem;
  border:1.5px solid var(--clay-line); border-radius:.8rem;
  padding:.8rem 1rem; font-weight:700; background:var(--white); color:var(--ink);
  width:100%; text-align:left;
}
.pay-option:hover{ border-color:var(--teal); }

@media (min-width:576px){
  .rq-hero h1{ font-size:2.3rem; }
}

/* =========================================================
   VITRINE (page d'accueil) — navbar, hero illustré, grille produits
   ========================================================= */
.rq-navbar{
  background:var(--white);
  border-bottom:1px solid var(--clay-line);
  padding:.7rem 1rem;
  position:sticky; top:0; z-index:1040;
}
.rq-navbar .brand{
  font-family:'Fraunces', serif; font-weight:700; font-size:1.15rem; color:var(--ink);
  display:flex; align-items:center; gap:.5rem; text-decoration:none;
}
.rq-navbar .brand svg{ width:30px; height:30px; }

/* ---- Hero vitrine avec illustration ---- */
.storefront-hero{
  background:linear-gradient(135deg,#FBF3E7 0%,#F3E0C4 100%);
  overflow:hidden;
  position:relative;
}
.storefront-hero .wrap{
  max-width:1100px; margin:0 auto; padding:2.4rem 1.25rem 2rem;
  display:grid; grid-template-columns:1fr; gap:1.5rem; align-items:center;
}
@media (min-width:768px){
  .storefront-hero .wrap{ grid-template-columns:1.1fr .9fr; padding:3.5rem 2rem; }
}
.storefront-hero .eyebrow{
  font-family:'JetBrains Mono', monospace; font-size:.72rem; letter-spacing:.14em;
  text-transform:uppercase; color:var(--paprika-dark); font-weight:700;
}
.storefront-hero h1{ font-size:2.1rem; line-height:1.1; margin:.4rem 0 .6rem; }
.storefront-hero p{ color:var(--ink-soft); font-size:1rem; max-width:32rem; }
.storefront-hero .search-box{
  display:flex; gap:.5rem; background:var(--white); border:1.5px solid var(--clay-line);
  border-radius:.8rem; padding:.5rem .6rem; margin-top:1.1rem; max-width:26rem;
}
.storefront-hero .search-box input{ border:none; outline:none; flex:1; background:transparent; font-family:inherit; }
@media (min-width:768px){ .storefront-hero h1{ font-size:2.7rem; } }

/* ---- Chips catégories sticky ---- */
.chip-nav{
  position:sticky; top:56px; z-index:1030;
  background:var(--clay-50);
  border-bottom:1px solid var(--clay-line);
  padding:.7rem 0;
}
.chip-nav .inner{ display:flex; gap:.5rem; overflow-x:auto; max-width:1100px; margin:0 auto; padding:0 1.25rem; }
.chip-nav::-webkit-scrollbar{ display:none; }

/* ---- Grille produits ---- */
.cat-section{ max-width:1100px; margin:0 auto; padding:1.75rem 1.25rem 0; scroll-margin-top:120px; }
.cat-section h2{ font-size:1.3rem; margin-bottom:.9rem; display:flex; align-items:center; gap:.5rem; }
.cat-section h2 .count{ font-family:'JetBrains Mono', monospace; font-size:.7rem; color:var(--ink-soft); font-weight:500; }
.product-grid{
  display:grid; grid-template-columns:repeat(2,1fr); gap:.9rem;
}
@media (min-width:576px){ .product-grid{ grid-template-columns:repeat(3,1fr); } }
@media (min-width:900px){ .product-grid{ grid-template-columns:repeat(4,1fr); } }

.product-card{
  background:var(--white); border:1px solid var(--clay-line); border-radius:1rem;
  overflow:hidden; display:flex; flex-direction:column; transition:box-shadow .15s ease, transform .15s ease;
}
.product-card:hover{ box-shadow:0 10px 24px rgba(43,33,24,.1); transform:translateY(-2px); }
.product-card .img-wrap{
  aspect-ratio:1/1; background:var(--clay-100); display:flex; align-items:center; justify-content:center;
  overflow:hidden; font-size:2.2rem; position:relative;
}
.product-card .img-wrap img{ width:100%; height:100%; object-fit:cover; }
.product-card .body{ padding:.7rem .8rem .85rem; display:flex; flex-direction:column; gap:.15rem; flex:1; }
.product-card .name{ font-weight:700; font-size:.9rem; line-height:1.2; margin:0; }
.product-card .desc{ font-size:.72rem; color:var(--ink-soft); min-height:1.4em; }
.product-card .foot{ display:flex; justify-content:space-between; align-items:center; margin-top:auto; }
.product-card .price-tag{ font-size:.85rem; }
.product-card .add-btn{
  width:30px; height:30px; border-radius:50%; border:none; background:var(--teal); color:#fff;
  font-weight:700; font-size:1rem; line-height:1; display:flex; align-items:center; justify-content:center;
}
.product-card .qty-control{ gap:.4rem; }
.product-card .qty-btn{ width:26px; height:26px; }

/* ---- Illustration hero (SVG maison) ---- */
.hero-illus{ width:100%; max-width:360px; margin:0 auto; display:block; }

/* ---- Modal compte client ---- */
.auth-tabs{ display:flex; border-bottom:1px solid var(--clay-line); margin-bottom:1rem; }
.auth-tab{
  flex:1; text-align:center; padding:.6rem; font-weight:700; color:var(--ink-soft);
  border-bottom:2px solid transparent; cursor:pointer; background:none; border-top:none; border-left:none; border-right:none;
}
.auth-tab.active{ color:var(--paprika); border-bottom-color:var(--paprika); }
.auth-panel{ display:none; }
.auth-panel.active{ display:block; }

.account-pill{
  display:flex; align-items:center; gap:.5rem; background:var(--clay-100);
  border-radius:999px; padding:.4rem .9rem .4rem .5rem; font-weight:700; font-size:.85rem;
}
.account-pill .avatar{
  width:26px; height:26px; border-radius:50%; background:var(--teal); color:#fff;
  display:flex; align-items:center; justify-content:center; font-size:.75rem;
}