/* Café Delyssa · pages intérieures : Menu, VIP, Adresses, Histoire */

/* ===== Menu : barre de catégories, une seule ligne, défilante, collée sous la navigation ===== */
.barre-categories {
  position: sticky; top: var(--hauteur-nav); z-index: 40;
  background: rgba(11, 9, 6, .94); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  border-block: 1px solid var(--ligne);
}
.barre-categories .conteneur { display: flex; align-items: center; gap: 16px; }
.barre-categories ul {
  list-style: none; margin: 0; padding: 0; display: flex; gap: 6px; overflow-x: auto; flex: 1;
  scrollbar-width: none; -webkit-mask-image: linear-gradient(90deg, #000 90%, transparent); mask-image: linear-gradient(90deg, #000 90%, transparent);
}
.barre-categories ul::-webkit-scrollbar { display: none; }
.barre-categories a {
  display: block; white-space: nowrap; padding: 16px 14px; font: 500 12px/1 var(--police-texte); letter-spacing: .1em; text-transform: uppercase;
  color: var(--or-pale); border-bottom: 2px solid transparent; border-radius: var(--rayon-image);
}
.barre-categories a:hover { color: var(--or-clair); }
.barre-categories a.actif { background: var(--or-doux); }
.barre-categories a.actif { color: var(--or-clair); border-bottom-color: var(--or); }
.recherche { position: relative; flex: none; }
.recherche input {
  width: 220px; height: 44px; padding: 0 12px 0 34px; background: transparent; color: var(--creme);
  border: 1px solid var(--ligne-forte); border-radius: var(--rayon-image); font: 400 14px var(--police-texte);
}
.recherche input::placeholder { color: var(--texte-doux); }
.recherche input:focus { outline: none; border-color: var(--or); }
.recherche svg { position: absolute; left: 11px; top: 50%; transform: translateY(-50%); width: 15px; height: 15px; color: var(--texte-doux); }
@media (max-width: 760px) {
  .barre-categories .conteneur { flex-direction: column-reverse; align-items: stretch; gap: 0; padding-top: 10px; }
  .recherche input { width: 100%; }
}
.aucun-resultat { padding: 48px 0; color: var(--or-pale); text-align: center; }

/* Bandeau canette : la signature de service de toutes les boissons */
.bandeau-canette { display: grid; grid-template-columns: 160px 1fr; gap: 28px; align-items: center; padding: 28px 0 8px; }
.bandeau-canette img { height: 220px; width: auto; margin-inline: auto; filter: drop-shadow(0 14px 18px rgba(0,0,0,.6)); }
.bandeau-canette p { color: var(--or-pale); max-width: 52ch; }
.bandeau-canette strong { display: block; color: var(--creme); font: 600 18px/1.3 var(--police-titre); margin-bottom: 6px; }
@media (max-width: 640px) { .bandeau-canette { grid-template-columns: 90px 1fr; gap: 18px; } .bandeau-canette img { height: 140px; } }

.categorie { padding: clamp(48px, 7vw, 88px) 0; border-top: 1px solid var(--ligne); }
.categorie:nth-of-type(even) { background: var(--noir-veine); }
.categorie .entete { display: grid; grid-template-columns: 1fr auto; align-items: end; gap: 24px; margin-bottom: 36px; }
.categorie .entete img { height: 150px; width: auto; filter: drop-shadow(0 16px 20px rgba(0,0,0,.6)); }
.categorie h2 { font-size: clamp(26px, 3.4vw, 38px); margin-top: 12px; }
.groupes { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 24px clamp(32px, 5vw, 56px); }
/* Une catégorie à un seul groupe ne s'étire pas sur toute la largeur : le nom et le prix restent proches */
.groupes > :only-child { max-width: 720px; }
.groupe h3 { font: italic 500 22px/1.2 var(--police-accent); color: var(--or-pale); margin-bottom: 6px; }
.groupe .note { font-size: 13px; color: var(--texte-doux); margin-bottom: 6px; }
.groupe .prix-groupe { font-size: 13px; color: var(--or); margin-bottom: 6px; }
.ligne-carte { display: flex; align-items: baseline; gap: 12px; padding: 13px 0; border-bottom: 1px dotted rgba(191,145,73,.3); }
.ligne-carte .nom { font-weight: 500; }
.ligne-carte .desc { display: block; font-size: 13px; color: var(--texte-doux); margin-top: 2px; line-height: 1.5; }
.ligne-carte .gauche { flex: 1; min-width: 0; }
.ligne-carte .prix { color: var(--or); font-weight: 500; white-space: nowrap; text-align: right; font-size: 14px; }
.ligne-carte .prix .option { display: block; }
.ligne-carte .prix .option + .option { margin-top: 2px; }
.ligne-carte .prix small { font-size: 11px; color: var(--texte-doux); font-weight: 400; letter-spacing: .04em; margin-left: 4px; }
@media (max-width: 640px) { .categorie .entete img { height: 96px; } }

/* ===== Page VIP ===== */
.page-vip { background: var(--noir-pur); }
.hero-vip { padding: calc(var(--hauteur-nav) + clamp(40px, 7vw, 96px)) 0 clamp(56px, 8vw, 104px); background: var(--noir-pur); text-align: center; }
.hero-vip .vip-titre { margin-top: 18px; }
.hero-vip .accroche-vip { font-size: clamp(19px, 2.2vw, 24px); color: var(--or-pale); margin-top: 16px; }
.hero-vip .carte-vip { max-width: 680px; margin-top: 48px; }
.section-noire { background: var(--noir); }
.conditions { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 6vw, 80px); }
.conditions ul { list-style: none; margin: 18px 0 0; padding: 0; }
.conditions li { padding: 14px 0; border-bottom: 1px solid var(--ligne); }
.conditions ul.avantages { padding-left: 22px; margin-top: 30px; }
.conditions ul.avantages li { border-bottom: 0; padding: 4px 0; }
@media (max-width: 760px) { .conditions { grid-template-columns: 1fr; } }

/* ===== Page Adresses ===== */
.section-sans-haut { padding-top: 0; }
.surtitre-horaires { margin-bottom: 8px; }

/* ===== Page Histoire ===== */
.entete-page .titre-recit { text-transform: none; font-size: clamp(32px, 5vw, 56px); line-height: 1.1; max-width: 18ch; }
.entete-page .chapeau-recit { font-size: 20px; }
.section-recit { padding-top: 12px; }
/* Récit : occupe toute la largeur ; sur grand écran, le titre et le texte se placent côte à côte */
.recit p { max-width: 62ch; }
@media (min-width: 901px) {
  .recit article > div { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 0 clamp(24px, 4vw, 64px); align-items: baseline; }
  .recit h2 { margin-bottom: 0; }
}
.recit article { display: grid; grid-template-columns: 72px 1fr; gap: 20px; padding: 36px 0; border-top: 1px solid var(--ligne); }
.recit .numero { font: 600 34px/1 var(--police-titre); color: var(--bronze); }
.recit h2 { font-size: 22px; margin-bottom: 10px; }
.recit p { color: var(--or-pale); }
@media (max-width: 600px) {
  .recit article { grid-template-columns: 1fr; gap: 10px; padding: 28px 0; }
  .recit .numero { font-size: 24px; }
}