/* En-tete COMMUN (enseigne aux couleurs du restaurant : retour au menu, langue, logo, nom). Charge par les pages annexes (via _annex_head.php) ET par la page commande :
   il s'appuie sur les jetons --an-hero* de annex_theme_style() et ne depend d'aucune classe de page (pas de .an-body) ; sa police, sa grille et ses marges sont donc definies ici. */
.an-hero {
  --an-gutter: 20px;
  --an-w: 62rem;
  --an-hero-font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
  font-family: var(--an-hero-font);
  font-size: 1rem;
  line-height: 1.6;
  -webkit-text-size-adjust: 100%;
  text-rendering: optimizeLegibility;
}
@media (min-width: 720px) { .an-hero { --an-gutter: 32px; } }
.an-hero *, .an-hero *::before, .an-hero *::after { box-sizing: border-box; }
.an-hero img { max-width: 100%; }
.an-hero a { text-decoration: none; }
.an-back { touch-action: manipulation; }
/* ── Enseigne : compacte, aux couleurs du restaurant ; retour au menu, langue, logo entier et nom ── */
.an-hero {
  background: var(--an-hero);
  color: var(--an-hero-text);
  border-bottom: 1px solid var(--an-hero-edge);
  border-radius: 0 0 28px 28px; /* coins inferieurs arrondis, a toutes les largeurs */
}
.an-hero__in {
  max-width: var(--an-w);
  margin: 0 auto;
  padding: calc(4px + env(safe-area-inset-top, 0px)) var(--an-gutter) 18px;
  display: grid;
  gap: 6px;
}
.an-hero__bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 52px; }
.an-back {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  margin-inline-start: -8px;
  padding: 0 8px;
  color: var(--an-hero-text);
  font-size: .9375rem;
  font-weight: 600;
  text-decoration: none;
}
.an-back svg { flex: none; }
[dir="rtl"] .an-back svg { transform: scaleX(-1); }
.an-back:hover span { text-decoration: underline; text-underline-offset: 4px; }
.an-hero :focus-visible { outline: 3px solid var(--an-hero-text); outline-offset: 3px; border-radius: 4px; }
.an-hero .lang-trigger {
  min-height: 44px;
  color: var(--an-hero-text);
  background: transparent;
  border: 1px solid var(--an-hero-line);
}
.an-hero .lang-trigger:hover { background: color-mix(in srgb, var(--an-hero-text) 10%, transparent); border-color: color-mix(in srgb, var(--an-hero-text) 40%, transparent); }

.an-hero__id { display: flex; align-items: center; gap: 14px; min-width: 0; min-height: 52px; }
.an-hero__logo {
  display: block;
  flex: none;
  width: auto;
  height: auto;
  max-height: 56px;
  max-width: min(42vw, 170px);
  object-fit: contain;
}
.an-hero__name {
  min-width: 0;
  margin: 0;
  font-weight: 700;
  font-size: clamp(1.15rem, 1rem + 1vw, 1.5rem);
  line-height: 1.15;
  letter-spacing: .005em;
  color: var(--an-hero-text);
  overflow-wrap: anywhere;
  text-wrap: balance;
}

.an-hero.an-narrow .an-hero__in { max-width: 48rem; }

/* Ordinateur : identite a gauche, navigation a droite, une seule ligne ; bandeau pleine largeur, coins inferieurs arrondis */
@media (min-width: 900px) {
  .an-hero__in { grid-template-columns: 1fr auto; align-items: center; gap: 24px; padding-top: 10px; padding-bottom: 14px; }
  .an-hero__id { grid-column: 1; grid-row: 1; min-height: 64px; gap: 18px; }
  .an-hero__bar { grid-column: 2; grid-row: 1; gap: 18px; min-height: 0; }
  .an-hero__logo { max-height: 64px; max-width: 200px; }
  .an-hero__name { font-size: 1.5rem; }
}