/* Overlay mousse qui recouvre l'écran */
#foam-overlay {
  position: fixed;
  top: 0; left: 0; width: 100vw; height: 100vh;
  background: #e9c46a;
  opacity: 0;
  z-index: 10;
  pointer-events: none;
  transition: opacity 1.2s;
}
/* Ajout du style terracotta/minimaliste et responsive */
body {
  margin: 0;
  padding: 0;
  font-family: 'Inter', Arial, sans-serif;
  background: #f4f1ee;
  color: #222;
  overflow-x: hidden;
  overflow-y: auto;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
.main-stage { flex:1; display:flex; align-items:center; justify-content:center; position:relative; padding: calc(var(--header-h,64px) + 10px) 0 110px; }
@media (max-width:600px){ .main-stage { padding: calc(var(--header-h,64px) + 4px) 0 124px; } }
:root { --header-h:64px; }
.container {
  background: transparent; /* laisser voir le gradient bière */
  border-radius: 24px;
  box-shadow: 0 4px 32px rgba(201,122,87,0.18);
  padding: 32px 24px;
  text-align: center;
  min-width: 320px;
  z-index: 2;
  max-width: 95vw;
  position: relative;
  overflow: hidden;
}
/* Calque de lisibilité léger au-dessus du liquide mais sous le texte */
#beer-card::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(255,255,255,0.35), rgba(255,255,255,0.15));
  mix-blend-mode: normal;
  z-index: 1;
  pointer-events: none;
}
/* Contenu au-dessus */
#beer-card > *:not(#beer-fill-layer) {
  position: relative;
  z-index: 2;
}
/* Couche liquide derrière tout mais dans la carte */
#beer-fill-layer { z-index:0 !important; }
h1 {
  font-size: 2.2rem;
  font-weight: 700;
  margin-bottom: 16px;
  letter-spacing: 1px;
  color: #c97a57;
}
.qr-row {
  display: flex;
  justify-content: center;
  gap: 32px;
  margin-top: 24px;
  flex-wrap: wrap;
}
.qr-block {
  background: #f4f1ee;
  border-radius: 16px;
  padding: 16px;
  box-shadow: 0 2px 12px rgba(201,122,87,0.10);
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 160px;
}
.qr-block img {
  width: 128px;
  height: 128px;
  margin-bottom: 8px;
}
.qr-block a {
  color: #c97a57;
  text-decoration: none;
  font-size: 1rem;
  margin-top: 4px;
  transition: color 0.2s;
}
.qr-block a:hover {
  color: #e9c46a;
}
.desc {
  font-size: 1.1rem;
  margin-bottom: 8px;
  color: #c97a57;
}
#beer-canvas { display:none; }
.container { position:relative; z-index:5; }
.logo {
  width: 96px;
  height: 96px;
  margin-bottom: 16px;
  border-radius: 24px;
  box-shadow: 0 2px 12px rgba(201,122,87,0.10);
  background: #fff;
  object-fit: contain;
}
@media (max-width: 600px) {
  .container {
    padding: 16px 4px;
    min-width: 0;
  }
  h1 {
    font-size: 1.3rem;
  }
  .qr-row {
    gap: 12px;
  }
  .logo {
    width: 64px;
    height: 64px;
  }
}

/* Nouveau footer plein largeur */
.site-footer {
  position: fixed;
  inset: auto 0 0 0;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 24px;
  background: linear-gradient(90deg,#c97a57 0%,#b7633c 50%,#c97a57 100%);
  color: #fff;
  padding: 10px clamp(12px,4vw,40px) calc(10px + env(safe-area-inset-bottom,0));
  font-size: .8rem;
  font-family: 'Inter', system-ui, Arial, sans-serif;
  letter-spacing: .4px;
  box-shadow: 0 -4px 14px -6px rgba(0,0,0,0.25);
  z-index: 30;
}
.site-footer::before {
  content:"";
  position:absolute; inset:0;
  background:radial-gradient(circle at 50% 0%,rgba(255,255,255,0.25),rgba(255,255,255,0) 60%);
  mix-blend-mode: overlay;
  pointer-events:none;
}
.footer-inner { position:relative; display:flex; align-items:center; gap:20px; }
.site-footer a, .site-footer button.footer-link {
  position: relative;
  color: #fff;
  text-decoration: none;
  padding: 6px 18px;
  border-radius: 999px;
  background: rgba(255,255,255,0.14);
  backdrop-filter: blur(8px) saturate(140%);
  -webkit-backdrop-filter: blur(8px) saturate(140%);
  box-shadow: 0 2px 8px -2px rgba(0,0,0,0.25), 0 0 0 1px rgba(255,255,255,0.2) inset;
  font-weight: 500;
  transition: background .35s, transform .25s, box-shadow .35s;
  border: none;
  cursor: pointer;
}
.site-footer a:hover, .site-footer button.footer-link:hover {
  background: rgba(255,255,255,0.26);
  transform: translateY(-2px);
  box-shadow: 0 6px 20px -6px rgba(0,0,0,0.35), 0 0 0 1px rgba(255,255,255,0.25) inset;
}
.site-footer a:active, .site-footer button.footer-link:active {
  transform: translateY(0);
}
.footer-brand { font-size:.75rem; opacity:.85; font-weight:400; }
@media (max-width:600px){
  .site-footer { gap:12px; padding:8px 12px calc(8px + env(safe-area-inset-bottom,0)); }
  .site-footer a, .site-footer button.footer-link { padding:6px 14px; }
  .footer-brand { display:none; }
}

/* Header */
.site-header { position:fixed; top:0; left:0; right:0; height:var(--header-h); display:flex; align-items:center; justify-content:flex-start; padding:0 clamp(18px,4vw,60px); background:linear-gradient(90deg,#f6eee9,#f1e2da); backdrop-filter: blur(10px) saturate(140%); -webkit-backdrop-filter: blur(10px) saturate(140%); box-shadow:0 4px 18px -8px rgba(0,0,0,0.25); z-index:40; border-bottom:1px solid #e7d3c9; gap:10px; }
.site-header .brand { display:flex; align-items:center; gap:12px; font-weight:600; color:#b45f37; letter-spacing:.5px; font-size:1rem; }
.site-header .brand img { width:42px; height:42px; border-radius:14px; box-shadow:0 2px 6px rgba(0,0,0,0.08); object-fit:contain; background:#fff; }
.main-nav { display:flex; align-items:center; gap:22px; margin-left:0; position:absolute; left:50%; top:50%; transform:translate(-50%, -50%); }
.main-nav .nav-link { position:relative; font-size:.85rem; letter-spacing:.05em; text-transform:uppercase; text-decoration:none; color:#9a5b38; font-weight:600; padding:10px 14px; border-radius:14px; background:rgba(255,255,255,0.55); border:1px solid #e3d1c9; box-shadow:0 2px 8px -4px rgba(0,0,0,0.15); transition:.3s; }
.main-nav .nav-link:hover { background:#fff; color:#b45f37; }
.main-nav .nav-link:active { transform:translateY(1px); }
.lang-menu-wrapper { position:relative; margin-left:auto; }
.burger-btn { background: rgba(255,255,255,0.65); border:1px solid #e3d1c9; width:48px; height:48px; border-radius:16px; display:flex; flex-direction:column; justify-content:center; align-items:center; gap:6px; cursor:pointer; box-shadow:0 4px 12px -4px rgba(0,0,0,0.18); transition:background .3s, transform .3s; }
.burger-btn span { width:24px; height:3px; background:#b45f37; border-radius:2px; transition:.45s; }
.burger-btn:hover { background: rgba(255,255,255,0.9); }
.burger-btn.active span:nth-child(1){ transform:translateY(9px) rotate(45deg); }
.burger-btn.active span:nth-child(2){ opacity:0; }
.burger-btn.active span:nth-child(3){ transform:translateY(-9px) rotate(-45deg); }
.lang-dropdown { position:absolute; top:58px; right:0; min-width:190px; background:#fff; border:1px solid #e5d3c9; border-radius:20px; padding:12px 12px 14px; box-shadow:0 18px 42px -14px rgba(0,0,0,0.28); display:flex; flex-direction:column; gap:8px; opacity:0; transform:translateY(-6px); pointer-events:none; transition:.38s; }
.lang-dropdown.open { opacity:1; transform:translateY(0); pointer-events:auto; }
.lang-option { background:#f4ece8; color:#8d4f2d; border:none; padding:10px 16px; border-radius:14px; text-align:left; font-size:.9rem; cursor:pointer; display:flex; justify-content:space-between; align-items:center; gap:10px; transition:.28s; }
.lang-option:hover { background:#ecd8cf; }
.lang-option.active { background:#c97a57; color:#fff; box-shadow:0 2px 10px -2px rgba(0,0,0,0.25); }
.lang-option small { font-size:.6rem; letter-spacing:.08em; opacity:.7; text-transform:uppercase; }
@media (max-width:600px){ .site-header { padding:0 14px; } .site-header .brand span { font-size:.9rem; } }
@media (max-width:700px){
  .main-nav { position:static; transform:none; margin-left:16px; }
}