/* ===================================
   HALLOWEEN COBWEB - Texture cotonneuse
   =================================== */
:root {
  --violet-top: #2d1b3d;
  --violet-bottom: #1e1228;
  --pumpkin: #ff9500;
  --pumpkin-deep: #ff6f00;
  --fog: rgba(255,255,255,0.08);
  --fog-strong: rgba(255,255,255,0.16);
}

/* Fond */
body { 
  background: linear-gradient(180deg, var(--violet-top) 0%, var(--violet-bottom) 100%) !important;
  color: #f5f5f5; 
}

/* Titres & textes – visibilité et harmonie */
h1, h2, h3, h4, h5, h6 { font-family: 'Creepster', cursive !important; letter-spacing: .5px; }
h1 { color: #ffb15a !important; text-shadow: 0 0 14px rgba(255,149,0,.35), 0 0 28px rgba(255,111,0,.25); }
h2, h3 { color: #ffb15a !important; text-shadow: 0 0 10px rgba(255,149,0,.28); }
.section-label { color: #ffb15a !important; text-shadow: 0 0 12px rgba(255,149,0,.28); margin: 18px 0 10px 0 !important; }
p { color: rgba(245,245,245,.92) !important; }

/* Header Navbar - voile cotonneux + maillage toile très léger */
.navbar-halloween {
  background:
    /* voile brume cotonneuse */
    radial-gradient(120px 40px at 20% 5%, var(--fog-strong) 0%, transparent 60%),
    radial-gradient(140px 50px at 70% 15%, var(--fog) 0%, transparent 65%),
    /* micro-maillage toile (coton) */
    repeating-linear-gradient(45deg, transparent 0 22px, rgba(255,255,255,0.025) 22px 23px),
    repeating-linear-gradient(-45deg, transparent 0 22px, rgba(255,255,255,0.02) 22px 23px),
    linear-gradient(180deg, var(--violet-top) 0%, var(--violet-bottom) 100%);
  border-bottom: 3px solid var(--pumpkin-deep);
  box-shadow: 0 6px 24px rgba(0,0,0,0.6), 0 0 30px rgba(255,111,0,0.25), inset 0 -1px 0 rgba(255,149,0,0.25);
  padding: 1.2rem 0;
  position: sticky;
  top: 0; z-index: 1000;
}

/* Navbar Bottom - orange texturé + voile coton */
.navbar-halloween-bottom {
  background:
    /* voile brume cotonneuse */
    radial-gradient(160px 50px at 30% -10%, var(--fog-strong) 0%, transparent 60%),
    radial-gradient(120px 40px at 80% -5%, var(--fog) 0%, transparent 70%),
    /* striures douces citrouille */
    repeating-linear-gradient(90deg, rgba(0,0,0,0.18) 0 3px, transparent 3px 34px),
    radial-gradient(ellipse at top, #ff9f1a 0%, #ff7a00 55%, #ff6f00 100%);
  border-top: 3px solid #ff4500;
  border-bottom: 2px solid rgba(255,69,0,0.55);
  box-shadow: 0 -6px 24px rgba(0,0,0,0.6), inset 0 2px 10px rgba(255,149,0,0.25), inset 0 -2px 14px rgba(139,69,19,0.35);
  padding: .6rem 0; position: relative;
}

/* Liens */
.halloween-nav-link { color: #1a1a1a !important; font-weight: 600; padding: .5rem 1rem; border-radius: 8px; }
.halloween-nav-link:hover { color:#fff !important; background: rgba(139,69,19,0.4); transform: translateY(-2px); }
.halloween-menu-title { color:#1a1a1a !important; font-weight:700; text-shadow: 0 1px 2px rgba(255,255,255,.4); }
.halloween-toggler i { color:#1a1a1a !important; }

/* Dropdown */
.halloween-dropdown { background: linear-gradient(180deg, rgba(30,18,40,.98) 0%, rgba(20,10,30,.98) 100%); border:2px solid var(--pumpkin-deep); box-shadow: 0 8px 30px rgba(0,0,0,.6), 0 0 20px rgba(255,111,0,.35), inset 0 0 26px rgba(255,111,0,.08); }
.halloween-dropdown-item { color:#f5f5f5; }
.halloween-dropdown-item:hover { background: rgba(255,111,0,.15); color: var(--pumpkin); }

/* Araignée + fil (cohérent avec coton) */
#app::before { /* fil allégé et plus transparent */
  content: '';
  position: fixed; top:0; right: calc(50% + 62px); width:1px; height:0;
  background:
    linear-gradient(180deg, rgba(255,255,255,.35), rgba(255,255,255,.15)),
    repeating-linear-gradient(180deg, rgba(255,149,0,.30) 0 6px, rgba(255,111,0,.25) 6px 9px, rgba(255,255,255,.25) 9px 10px);
  mix-blend-mode: screen;
  filter: drop-shadow(0 0 0.5px rgba(255,111,0,.2)); z-index: 1; pointer-events:none;
  animation: cob-thread 14s ease-in-out infinite;
}
#app::after { /* araignée */
  content:'🕷'; position: fixed; top:-24px; right: calc(50% + 56px); font-size:1.25rem;
  filter: grayscale(100%) brightness(1.2); opacity:0; z-index:999; pointer-events:none;
  animation: cob-spider 14s ease-in-out infinite, cob-sway 3.8s ease-in-out infinite;
}
@keyframes cob-thread { 0%{height:0; opacity:0} 12%{height:9vh; opacity:1} 52%{height:38vh} 88%{height:9vh} 100%{height:0; opacity:0} }
@keyframes cob-spider { 0%{top:-24px; opacity:0} 12%{top:9vh; opacity:.85} 52%{top:38vh; opacity:.9} 88%{top:9vh; opacity:.85} 100%{top:-24px; opacity:0} }
@keyframes cob-sway { 0%,100%{ transform: translateX(0) rotate(-3deg);} 50%{ transform: translateX(6px) rotate(3deg);} }

/* Fantômes flottants en arrière-plan */
#main-container::before {
  content: '👻'; position: fixed; top: 18%; right: 8%; font-size: 2.6rem;
  opacity: .14; pointer-events: none; z-index: 0;
  animation: cob-ghost 10s ease-in-out infinite;
}
#main-container::after {
  content: '👻'; position: fixed; bottom: 24%; left: 6%; font-size: 2.2rem;
  opacity: .12; pointer-events: none; z-index: 0;
  animation: cob-ghost 12s ease-in-out infinite reverse;
}
@keyframes cob-ghost {
  0%,100% { transform: translate(0,0) rotate(0deg); opacity:.14; }
  25% { transform: translate(8px,-14px) rotate(4deg); opacity:.10; }
  50% { transform: translate(-6px,-20px) rotate(-3deg); opacity:.08; }
  75% { transform: translate(-10px,-8px) rotate(3deg); opacity:.12; }
}

/* ===================================
   Cartes des plats - look séduisant
   =================================== */
.dishes-table { width:100%; border-collapse: separate; border-spacing: 0 14px; }
.dishes-table tr { 
  background: rgba(0,0,0,0.25);
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 6px 20px rgba(0,0,0,0.35);
  transition: transform .35s cubic-bezier(.4,0,.2,1), box-shadow .35s ease, background .35s ease;
}
.dishes-table tr:hover {
  transform: translateY(-3px);
  background: rgba(255, 111, 0, 0.08);
  box-shadow: 0 10px 26px rgba(255,111,0,0.18), 0 6px 18px rgba(0,0,0,0.4);
}

/* cellules sans bordure classique */
table td { border:none !important; vertical-align: middle; padding: 0 !important; }

/* Titre du plat */
.dish-label {
  color: #ffb15a !important;
  font-weight: 600;
  font-size: 1.1rem;
  padding: 16px 18px 6px 18px !important;
  letter-spacing: .2px;
  position: relative;
}

/* Mini fantôme discret qui apparait au hover (clin d'œil) */
.dishes-table tr:hover .dish-label::after {
  content:'👻'; position:absolute; right: 12px; top: 10px; font-size: 1.1rem; opacity:.22;
}

/* Description */
.dish-description {
  color: rgba(245,245,245,.9) !important;
  font-size: .95rem; line-height: 1.65;
  padding: 0 18px 16px 18px !important;
}

/* Pastille de prix à droite */
.dish-price {
  font-weight: 700 !important; color:#2a0f00 !important; font-size: 1.05rem;
  background: linear-gradient(135deg, #ffb15a 0%, #ff8a00 50%, #ff6f00 100%);
  padding: 10px 14px !important; border-radius: 12px; margin: 0 14px 0 0;
  box-shadow: 0 6px 16px rgba(255,111,0,.35), inset 0 1px 0 rgba(255,255,255,.35);
  text-align: center; min-width: 70px;
}

/* Séparateur lumineux très fin sous le titre */
.dish-label::before {
  content:''; position:absolute; left:18px; right:18px; bottom: -4px; height:1px;
  background: linear-gradient(90deg, transparent, rgba(255,149,0,.45), transparent);
  opacity:.7;
}

/* Etat au focus/keyboard */
.dishes-table tr:focus-within {
  outline: 2px solid rgba(255,149,0,.55);
  outline-offset: 4px;
}

/* Dish options - contraste renforcé (Cobweb) */
.dish-options {
  color: rgba(245,245,245,0.95) !important;
  border-left: 2px dotted var(--pumpkin);
  margin-left: 1rem;
  padding-left: 0.75rem;
}

.dish-options, .dish-options * { text-shadow: 0 1px 2px rgba(0,0,0,.65); }

.dish-options .option,
.dish-options .extra,
.dish-options .supplement,
.dish-options li,
.dish-options span { color: #fff !important; }

.dish-options a { color: var(--pumpkin) !important; text-decoration: none; }
.dish-options a:hover { color: #ffd199 !important; }

.dish-options .price,
.dish-options .supplement-amount { color: var(--pumpkin-deep) !important; font-weight: 700; }

/* Responsive */
@media (max-width: 768px){
  .dish-label{ font-size:1.05rem; padding: 14px 14px 6px 14px !important; }
  .dish-description{ font-size: .9rem; padding: 0 14px 14px 14px !important; }
  .dish-price{ padding: 8px 12px !important; min-width: 64px; }
}