html, body{
  width: 100%;
  margin: 0;
  padding: 0;
  overflow-x: visible;
}

body{
  background:#f7f5f2;
  font-family:'Poppins', sans-serif;
}

.app-container{
  width: 100%;
  max-width: 420px;
  margin: 0 auto;
  padding: 16px;
}

/* 🔥 SUR MOBILE : PAS D’ESPACE À GAUCHE / DROITE */
@media (max-width: 480px){
  .app-container{
    max-width: 100%;
    margin: 0;
    padding: 16px;
  }
}

/* Tabs */
.top-tabs{
  background:#fff;
  border-radius:30px;
  display:flex;
  padding:5px;
  box-shadow:0 8px 20px rgba(0,0,0,.08);
}

.top-tabs a{
  flex:1;
  text-align:center;
  padding:10px;
  border-radius:25px;
  text-decoration:none;
  color:#777;
  font-weight:600;
}

.top-tabs a.active{
  background:#b07a5a;
  color:#fff;
}

/* ============================= */
/* 🔥 SUB-TABS CENTRÉS + SCROLL */
/* ============================= */
.sub-tabs{
  margin:20px -16px;
  padding: 10px 16px 18px;   /* 🔥 un peu plus d’espace haut & bas */
  display:flex;
  gap:14px;                 /* 🔥 espace un peu plus large entre boutons */

  overflow-x: auto;
  overflow-y: visible;
  white-space: nowrap;
  -webkit-overflow-scrolling: touch;

  scrollbar-width: none;
  position: relative;

  align-items: center;

  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
}

.sub-tabs::-webkit-scrollbar{
  display: none;
}

.sub-tabs a{
  background:#fff;
  border-radius:22px;        /* 🔥 un peu plus arrondi */
  padding:12px 22px;        /* 🔥 catégories plus grandes */
  text-decoration:none;
  color:#666;
  font-size:15px;           /* 🔥 texte légèrement plus grand */
  box-shadow:0 7px 18px rgba(0,0,0,.10); /* 🔥 ombre un peu plus large */

  flex: 0 0 auto;
  line-height: 1;

  transition:
    transform .15s ease,
    box-shadow .15s ease,
    background-color .25s ease,
    color .25s ease;

  scroll-snap-align: start;
}

/* 🔥 Petit bounce tactile iOS-style */
.sub-tabs a:active{
  transform: scale(0.94);
  box-shadow:0 4px 12px rgba(0,0,0,.10);
}

/* ============================= */
/* 🔥 HIGHLIGHT ANIMÉ AU CLIC */
/* ============================= */
.sub-tabs a.active{
  background:#b07a5a;
  color:#fff;

  animation: highlight-pop .35s ease;
}

@keyframes highlight-pop{
  0%{
    transform: scale(0.92);
    box-shadow:0 0 0 rgba(176,122,90,0);
  }
  60%{
    transform: scale(1.06);
    box-shadow:0 12px 28px rgba(176,122,90,.35);
  }
  100%{
    transform: scale(1);
    box-shadow:0 7px 18px rgba(0,0,0,.10);
  }
}

/* ============================= */
/* 🔥 VIBRATION VISUELLE AUX BORDS */
/* ============================= */
@keyframes edge-bounce{
  0%   { transform: translateX(0); }
  30%  { transform: translateX(-6px); }
  60%  { transform: translateX(4px); }
  100% { transform: translateX(0); }
}

.sub-tabs.edge-left{
  animation: edge-bounce .25s ease;
}

.sub-tabs.edge-right{
  animation: edge-bounce .25s ease reverse;
}

/* Cards */
.menu-card{
  background:#fff;
  border-radius:20px;
  padding:12px;
  display:flex;
  gap:12px;
  margin-bottom:15px;
  box-shadow:0 10px 25px rgba(0,0,0,.08);
}

.menu-card img{
  width:90px;
  height:90px;
  border-radius:15px;
  object-fit:cover;
}


/*
 .menu-info h5{
  margin:0;
  font-size:16px;
  font-weight:600;
}
*/

.menu-info h5{
  margin:0;
  font-size:15px;              /* 🔹 taille légèrement plus petite */
  font-weight:700;
  font-family: 'Merriweather', serif;  /* police élégante et sobre */
  letter-spacing: .3px;
  color:#2c2c2c;
}





.menu-info p{
  margin:5px 0;
  font-size:13px;
  color:#777;
}

.price{
  font-weight:700;
  color:#b07a5a;
}















/* ========================= */
/* DASHBOARD (STYLE MENU)   */
/* ========================= */

.dashboard-logout{
  background:#b07a5a;
  color:#fff;
  padding:8px 14px;
  border-radius:18px;
  text-decoration:none;
  font-size:13px;
  font-weight:600;
  box-shadow:0 6px 16px rgba(0,0,0,.15);
}

.dashboard-actions{
  display:flex;
  gap:14px;
  flex-wrap:wrap;
}

.dashboard-btn-link{
  flex:1;
  text-align:center;
  background:#fff;
  border-radius:20px;
  padding:16px 14px;
  text-decoration:none;
  color:#444;
  font-weight:600;
  box-shadow:0 8px 20px rgba(0,0,0,.10);
  transition:transform .15s ease, box-shadow .15s ease;
}

.dashboard-btn-link:active{
  transform:scale(.96);
  box-shadow:0 5px 14px rgba(0,0,0,.10);
}

.dashboard-btn-link.secondary{
  background:#f7f5f2;
  border:1px dashed rgba(0,0,0,.08);
}










.menu-info {
  flex: 1;              /* 🔹 prend tout l’espace restant à côté de l’image */
  min-width: 0;         /* 🔹 permet au texte de se réduire correctement */
}

.menu-info p {
  margin: 5px 0;
  font-size: 13px;
  color: #777;
  word-break: break-word; /* 🔹 coupe les mots trop longs */
  overflow-wrap: break-word;
  white-space: normal;    /* 🔹 force le texte à aller à la ligne */
}