/* ==========================================================================
   L'Auberge Créole — habillage « Varangue » du site (2026-11-04, maquette validée)
   Fichier PROPRE à l'Auberge (stack-aubergecreole/api/public/site-brand/, jamais écrasé
   par deploy.sh). Chargé par index.aubergecreole.html après style.css.
   Vert forêt (fond), crème (cartes), laiton (détails), terre cuite (actions).
   Titres : Cormorant Garamond ; interface : Manrope.
   ========================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,500;0,600;0,700;1,500;1,600&family=Manrope:wght@400;500;600;700;800&display=swap');

:root {
  --bg-abyss: #0F1A14;
  --bg-primary: #16241D;
  --bg-secondary: #121C17;
  --bg-card: #1C2E25;
  --bg-surface2: #22382C;
  --bg-elevated: #2A4234;
  --bg-input: #1A2A22;
  --braise-deep: #24392D;

  --ember: #A8502C;
  --ember-deep: #8E3F20;
  --amber: #E9CF94;
  --amber-soft: #C9A45C;
  --rouge-four: #A8502C;
  --rouge-sombre: #7A3415;

  --text-primary: #F4ECDC;
  --text-secondary: #C8C0AE;
  --text-muted: #9DA79C;
  --text-on-cta: #FBF6EC;
  --text-on-amber: #16241D;

  --hairline: rgba(201, 164, 92, 0.16);
  --hairline-strong: rgba(201, 164, 92, 0.30);
  --overlay: rgba(10, 16, 13, 0.72);
  --glow-ember: rgba(168, 80, 44, 0.30);
  --glow-hearth: rgba(201, 164, 92, 0.10);
  --focus-ring: rgba(201, 164, 92, 0.30);
  --grad-cta: linear-gradient(180deg, #B45A33 0%, #9A4523 100%);
  --grad-bandeau: linear-gradient(180deg, #C9A45C, #A9853F);

  --font-display: 'Cormorant Garamond', Georgia, serif;
  --font-body: 'Manrope', -apple-system, 'Segoe UI', sans-serif;
  --font: 'Manrope', -apple-system, 'Segoe UI', sans-serif;

  --brand: #C9A45C;
  --brand-hover: #E9CF94;
  --brand-dark: #A9853F;
  --brand-deep: #16241D;
  --brand-glow: rgba(201, 164, 92, 0.30);
  --brand-primary: #C9A45C;
  --brand-secondary: #A8502C;
  --bg: #16241D;
  --bg2: #1C2E25;
  --text: #F4ECDC;
  --text-dim: #9DA79C;
  --border: rgba(201, 164, 92, 0.16);
  --border-subtle: rgba(201, 164, 92, 0.12);
  --info: #E9CF94;
}

body {
  background:
    radial-gradient(110% 60% at 50% -5%, #24392D, transparent 65%),
    linear-gradient(#16241D, #0F1A14);
  background-attachment: fixed;
  background-color: #16241D;
}
::selection { background: rgba(201, 164, 92, 0.35); color: #FFFFFF; }
::-webkit-scrollbar-thumb { background: rgba(201, 164, 92, 0.22); }

/* ---------- Accueil ---------- */
.hero-gradient {
  background:
    radial-gradient(110% 60% at 50% 0%, #24392D 0%, rgba(22, 36, 29, 0) 70%),
    linear-gradient(180deg, #16241D 0%, #0F1A14 100%);
}
.floating-pizzas { display: none; }
.hero-logo[hidden], .header-logo[hidden] { display: none; }
.hero-logo {
  display: block;
  width: min(300px, 74vw);
  height: auto;
  margin: 6px auto 0;
  animation: fadeInUp 0.6s ease 0.05s both;
}
.has-logo .hero-title .title-emoji,
.has-logo .hero-title .title-text {
  position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}
/* filet laiton avec losange sous le logo */
.hero-title::after {
  width: min(300px, 74vw);
  height: 9px;
  margin-top: 16px;
  border-radius: 0;
  background:
    linear-gradient(45deg, transparent 46%, #C9A45C 46% 54%, transparent 54%) center / 9px 9px no-repeat,
    linear-gradient(-45deg, transparent 46%, #C9A45C 46% 54%, transparent 54%) center / 9px 9px no-repeat,
    linear-gradient(90deg, rgba(201,164,92,0) 0%, #C9A45C 44%, transparent 44% 56%, #C9A45C 56%, rgba(201,164,92,0) 100%) center / 100% 1px no-repeat;
}
.hero-tagline {
  font-family: var(--font-display);
  font-size: 1.9rem;
  font-weight: 600;
  line-height: 1.1;
  color: #F4ECDC;
}
.hero-tagline em { font-style: italic; color: #E9CF94; }
.hero-location { color: #C8C0AE; }
.info-value { font-family: var(--font-display); font-weight: 700; letter-spacing: 0; color: #E9CF94; }
.hero-cta {
  max-width: 340px;
  min-height: 56px;
  border-radius: 14px;
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.2px;
  color: #FBF6EC;
  box-shadow: 0 10px 26px rgba(168, 80, 44, 0.30);
}
.hero-resa {
  display: flex; align-items: center; justify-content: center;
  width: 100%; max-width: 340px; min-height: 52px; margin-top: 10px;
  border-radius: 14px; border: 1px solid rgba(201, 164, 92, 0.55);
  color: #F4ECDC; font-weight: 600; font-size: 0.95rem; text-decoration: none;
}
.hero-resa[hidden] { display: none; }
.feature { color: #C8C0AE; }
.action-pill { background: rgba(15, 26, 20, 0.7); border-color: rgba(201, 164, 92, 0.30); }
.pill-text { font-weight: 700; }

/* ---------- Carte / commande ---------- */
.menu-header, .categories-nav, .simple-header, .tracking-header { background: rgba(15, 26, 20, 0.90); }
.header-logo { display: block; height: 38px; width: auto; }
.has-logo .header-brand .brand-icon { display: none; }
.brand-name, .section-title, .product-name { font-family: var(--font-display); font-weight: 700; letter-spacing: 0; }
.cart-badge { border-color: #16241D; background: #A8502C; color: #FBF6EC; }
.product-card { background: linear-gradient(180deg, #1C2E25, #16241D); border-color: rgba(201, 164, 92, 0.18); }
.cat-btn.active {
  background: #C9A45C;
  border-color: #C9A45C;
  color: #16241D;
  box-shadow: 0 4px 14px rgba(201, 164, 92, 0.30);
}
.cat-btn.active .cat-name { color: #16241D; }
.tracking-view {
  background: radial-gradient(110% 60% at 50% -5%, #24392D, transparent 65%), linear-gradient(#16241D, #0F1A14);
}
.sheet-close { background: rgba(10, 16, 13, 0.6); }
.unavailable-overlay { background: rgba(10, 16, 13, 0.55); }
.unavailable-overlay-small, .card-variants-badge { background: rgba(10, 16, 13, 0.72); }
body .notification-prompt .prompt-btn-secondary { background: #22382C !important; }
.half-select-input option { background-color: #1C2E25; }

/* Restaurant a tables, commande en ligne coupee : site vitrine (carte consultable, pas de statut ni de suivi de commande) */
.hero-badge, .hero-info, .hero-actions { display: none !important; }
.hero-cta[disabled] { background: var(--grad-cta); color: #FBF6EC; cursor: pointer; box-shadow: 0 10px 26px rgba(168, 80, 44, 0.30); }

/* Carte sans photos (en attendant les photos des plats) : cartes sobres facon menu, sans grosse icone */
.card-img:not(.has-photo) { display: none; }
.popular-section { display: none !important; }
.product-card { border-radius: 16px; }
.card-body { padding: 16px 16px 14px; }
.card-title { font-family: var(--font-display); font-size: 1.3rem; font-weight: 700; line-height: 1.15; color: #F4ECDC; }
.card-desc { color: #B9B3A2; }
.card-price { font-family: var(--font-display); font-size: 1.35rem; font-weight: 700; color: #E9CF94; }
.card-add { background: #A8502C; color: #FBF6EC; }