/* ═══════════════════════════════════════════════════════════════════════
   Speak to Me — identité visuelle commune (28/09/2026)
   Couleurs du restaurant actif : /api/theme.css (variables --st-*),
   à charger AVANT ce fichier. Polices : Outfit (titres) + Nunito (texte).
   ═══════════════════════════════════════════════════════════════════════ */
:root {
  --st-titre: 'Outfit', 'Nunito', system-ui, sans-serif;
  --st-texte-police: 'Nunito', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --st-r-s: 12px; --st-r-m: 18px; --st-r-l: 28px; --st-r-pilule: 999px;
  --st-ombre: 0 10px 30px rgba(20, 30, 25, .12);
  --st-ombre-forte: 0 24px 60px rgba(10, 20, 15, .28);
  --st-verre: rgba(255, 255, 255, .16);
  --st-verre-bord: rgba(255, 255, 255, .32);
  --st-verre-clair: rgba(255, 255, 255, .72);
  --st-nav-h: 64px;
}

/* ── Base ── */
body.st {
  margin: 0; font-family: var(--st-texte-police); color: var(--st-texte);
  background: var(--st-fond-clair); -webkit-font-smoothing: antialiased;
}
body.st h1, body.st h2, body.st h3, body.st h4, .st-titre { font-family: var(--st-titre); letter-spacing: -.01em; }
body.st button { font-family: inherit; }
@media (prefers-reduced-motion: reduce) { .st *, .st *::before, .st *::after { animation: none !important; transition: none !important; } }

/* ── Logo « Speak to Me » ── */
.st-logo { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: inherit; }
.st-logo-barres { display: inline-flex; align-items: center; gap: 3px; height: 30px; }
.st-logo-barres i { display: block; width: 5px; border-radius: 3px; }
.st-logo-barres i:nth-child(1) { height: 14px; background: #EF4B3F; }
.st-logo-barres i:nth-child(2) { height: 22px; background: #F7941D; }
.st-logo-barres i:nth-child(3) { height: 30px; background: #F9C22E; }
.st-logo-barres i:nth-child(4) { height: 20px; background: #3FB37F; }
.st-logo-barres i:nth-child(5) { height: 12px; background: #F7941D; }
.st-logo-nom { font-family: var(--st-titre); font-weight: 600; font-size: 1.45rem; letter-spacing: -.01em; white-space: nowrap; }

/* ── Menu commun ── */
.st-nav {
  position: fixed; inset: 0 0 auto 0; z-index: 9999; height: var(--st-nav-h);
  display: flex; align-items: center; gap: 16px; padding: 0 20px;
  background: rgba(18, 26, 22, .78); backdrop-filter: blur(14px) saturate(1.3); -webkit-backdrop-filter: blur(14px) saturate(1.3);
  border-bottom: 1px solid rgba(255, 255, 255, .08); color: #fff; font-family: var(--st-texte-police);
}
.st-nav .st-logo-nom { color: #fff; font-size: 1.25rem; }
.st-nav-liens { display: flex; gap: 4px; margin-left: auto; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
.st-nav-liens a {
  display: inline-flex; align-items: center; gap: 7px; min-height: 40px; padding: 0 14px; border-radius: var(--st-r-pilule);
  color: rgba(255, 255, 255, .74); text-decoration: none; font-weight: 700; font-size: .92rem; white-space: nowrap;
  transition: background .2s, color .2s;
}
.st-nav-liens a:hover { background: rgba(255, 255, 255, .1); color: #fff; }
.st-nav-liens a[aria-current="page"] { background: var(--st-accent); color: var(--st-accent-texte); }
.st-nav-liens a:focus-visible, .st-nav-menu:focus-visible { outline: 3px solid var(--st-accent); outline-offset: 2px; }
.st-nav-menu {
  display: none; margin-left: auto; width: 46px; height: 46px; border-radius: 50%; border: 0;
  background: rgba(255, 255, 255, .92); color: #1b1b1b; font-size: 1.3rem; cursor: pointer;
}
.st-nav-espace { height: var(--st-nav-h); }
/* Restaurant réglé (plusieurs restaurants dans la même instance) */
.st-resto {
  min-height: 40px; max-width: 16rem; padding: 0 34px 0 14px; border-radius: var(--st-r-pilule);
  border: 1px solid rgba(255, 255, 255, .22); background: rgba(255, 255, 255, .08); color: #fff;
  font: 700 .9rem var(--st-texte-police); text-overflow: ellipsis; cursor: pointer;
  appearance: none; -webkit-appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, #fff 50%), linear-gradient(135deg, #fff 50%, transparent 50%);
  background-position: calc(100% - 18px) 50%, calc(100% - 13px) 50%; background-size: 5px 5px; background-repeat: no-repeat;
}
.st-resto option { color: #1b1b1b; }
.st-resto:focus-visible { outline: 3px solid var(--st-accent); outline-offset: 2px; }
@media (max-width: 560px) { .st-nav .st-logo-nom { display: none; } .st-resto { max-width: 11rem; } }
@media (max-width: 1180px) {
  .st-nav-menu { display: inline-flex; align-items: center; justify-content: center; }
  .st-nav-liens {
    display: none; position: absolute; top: calc(var(--st-nav-h) + 8px); right: 12px; left: auto;
    flex-direction: column; gap: 4px; padding: 10px; min-width: 240px; border-radius: var(--st-r-m);
    background: rgba(18, 26, 22, .96); box-shadow: var(--st-ombre-forte); overflow: visible;
  }
  .st-nav.ouvert .st-nav-liens { display: flex; }
  .st-nav-liens a { min-height: 48px; }
}

/* ── Boutons ── */
.st-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 52px; padding: 0 26px; border-radius: var(--st-r-pilule); border: 0; cursor: pointer;
  font-family: var(--st-titre); font-weight: 600; font-size: 1.08rem; text-decoration: none;
  background: var(--st-accent); color: var(--st-accent-texte);
  box-shadow: 0 8px 22px color-mix(in srgb, var(--st-accent) 45%, transparent);
  transition: transform .15s ease-out, box-shadow .2s, filter .2s;
}
.st-btn:hover { filter: brightness(1.05); transform: translateY(-1px); }
.st-btn:active { transform: translateY(1px) scale(.98); }
.st-btn:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
.st-btn[disabled] { opacity: .5; cursor: not-allowed; transform: none; }
.st-btn .fleche { font-size: 1.2em; line-height: 1; }
.st-btn-verre { background: var(--st-verre); color: #fff; border: 1px solid var(--st-verre-bord); box-shadow: none; backdrop-filter: blur(10px); }
.st-btn-sobre { background: #fff; color: var(--st-texte); border: 1px solid rgba(0, 0, 0, .1); box-shadow: none; }

/* ── Cartes ── */
.st-carte { background: #fff; border-radius: var(--st-r-l); box-shadow: var(--st-ombre); border: 1px solid rgba(0, 0, 0, .05); }
.st-verre {
  background: var(--st-verre); border: 1px solid var(--st-verre-bord); border-radius: var(--st-r-l);
  backdrop-filter: blur(16px) saturate(1.2); -webkit-backdrop-filter: blur(16px) saturate(1.2);
}

/* ═══ Décor (scène dessinée en SVG, couleurs du thème) ═══ */
.st-scene {
  position: relative; overflow: hidden; isolation: isolate; color: #fff;
  background: linear-gradient(180deg, var(--st-ciel-haut) 0%, var(--st-ciel-bas) 42%, var(--st-colline-3) 78%, var(--st-fond) 100%);
}
.st-decor { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.st-decor svg { width: 100%; height: 100%; display: block; }
.st-decor .particule { animation: st-flotte 9s ease-in-out infinite; transform-box: fill-box; }
.st-decor .particule:nth-child(2n) { animation-duration: 12s; animation-delay: -3s; }
.st-decor .particule:nth-child(3n) { animation-duration: 15s; animation-delay: -6s; }
.st-decor .nuage { animation: st-derive 60s linear infinite alternate; }
@keyframes st-flotte { 0%, 100% { transform: translate(0, 0); } 50% { transform: translate(8px, -14px); } }
@keyframes st-derive { from { transform: translateX(-30px); } to { transform: translateX(40px); } }

/* Emblème du restaurant (à la place de l'illustration) */
.st-embleme {
  position: relative; display: grid; place-items: center;
  width: clamp(150px, 22vw, 230px); aspect-ratio: 1; margin: 0 auto;
  animation: st-plane 6s ease-in-out infinite;
}
.st-embleme::before {
  content: ''; position: absolute; inset: 8%; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, rgba(255, 255, 255, .55), rgba(255, 255, 255, .12) 60%, transparent 72%);
  box-shadow: 0 30px 60px rgba(0, 0, 0, .18);
}
.st-embleme::after { content: var(--st-embleme); position: relative; font-size: clamp(90px, 13vw, 140px); filter: drop-shadow(0 18px 18px rgba(0, 0, 0, .28)); }
@keyframes st-plane { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }

/* ═══ Micro lumineux + onde sonore ═══ */
.st-onde { display: flex; align-items: center; justify-content: center; gap: 5px; height: 64px; }
.st-onde i {
  display: block; width: 4px; height: 8px; border-radius: 4px; background: var(--st-accent);
  box-shadow: 0 0 10px var(--st-accent); opacity: .9; transition: height .09s linear;
}
.st-onde i.point { width: 5px; height: 5px; }
.st-onde.repos i { animation: st-respire 2.4s ease-in-out infinite; }
.st-onde.repos i:nth-child(odd) { animation-delay: -.8s; }
@keyframes st-respire { 0%, 100% { opacity: .45; } 50% { opacity: .95; } }

.st-micro {
  position: relative; width: 112px; height: 112px; border-radius: 50%; border: 0; cursor: pointer;
  display: grid; place-items: center; color: var(--st-accent-texte);
  background: radial-gradient(circle at 50% 35%, #fff 0%, color-mix(in srgb, var(--st-accent) 55%, #fff) 70%);
  box-shadow: 0 0 0 10px color-mix(in srgb, var(--st-accent) 22%, transparent), 0 0 44px color-mix(in srgb, var(--st-accent) 75%, transparent);
  transition: transform .15s ease-out, box-shadow .25s;
}
.st-micro svg { width: 44px; height: 44px; }
.st-micro:hover { transform: scale(1.04); }
.st-micro:focus-visible { outline: 3px solid #fff; outline-offset: 6px; }
.st-micro.ecoute { animation: st-pulse 1.8s ease-out infinite; }
@keyframes st-pulse {
  0% { box-shadow: 0 0 0 10px color-mix(in srgb, var(--st-accent) 30%, transparent), 0 0 44px var(--st-accent); }
  70% { box-shadow: 0 0 0 28px transparent, 0 0 60px var(--st-accent); }
  100% { box-shadow: 0 0 0 10px transparent, 0 0 44px var(--st-accent); }
}
.st-statut { font-family: var(--st-titre); font-size: 1.3rem; font-weight: 500; letter-spacing: .01em; color: #fff; text-shadow: 0 2px 10px rgba(0, 0, 0, .25); text-align: center; }

/* ═══ Barre de commande en pilule ═══ */
.st-pilule {
  display: flex; align-items: center; gap: 14px; padding: 10px 10px 10px 12px;
  border-radius: var(--st-r-pilule); background: rgba(255, 255, 255, .18); border: 1px solid rgba(255, 255, 255, .34);
  backdrop-filter: blur(18px) saturate(1.3); -webkit-backdrop-filter: blur(18px) saturate(1.3);
  box-shadow: 0 18px 40px rgba(0, 0, 0, .25); color: #fff;
}
.st-pilule .vignette {
  width: 56px; height: 56px; flex: 0 0 56px; border-radius: 50%; display: grid; place-items: center; font-size: 34px;
  background: radial-gradient(circle at 35% 30%, rgba(255, 255, 255, .7), rgba(255, 255, 255, .25));
}
.st-pilule .texte { flex: 1; min-width: 0; font-family: var(--st-titre); font-weight: 500; font-size: 1.1rem; cursor: pointer; background: none; border: 0; color: inherit; text-align: left; }
.st-pilule .texte small { display: block; font-family: var(--st-texte-police); font-weight: 600; font-size: .85rem; opacity: .85; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.st-pilule .separateur { width: 1px; align-self: stretch; margin: 6px 0; background: rgba(255, 255, 255, .35); }