/* ==========================================================================
   DaoGuo — feuille de style principale
   Charte : rouge #E5342C sur fond crème #EFE8CC, lettres bâton, encadrés fins.
   ========================================================================== */

:root {
  --red: #E5342C;
  --cream: #EFE8CC;
  --cream-dark: #E3DAB8;
  --ink: #2b1410;
  --white: #FFFFFF;
  --max-width: 720px;
  --header-height: 76px;
  --sticky-offset: 128px; /* recalculé en JS (updateStickyOffset) dès le chargement */
  --radius: 2px;
  --container-pad: 16px; /* doit rester égal au padding horizontal de .container,
                             utilisé aussi par .category--tinted pour border-à-border */
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--cream);
  color: var(--ink);
  font-family: "Helvetica Neue", Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  padding-top: var(--header-height);
}

img { max-width: 100%; display: block; }

a { color: inherit; }

.container {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 var(--container-pad);
}

/* --- En-tête / logo -------------------------------------------------- */

.site-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: var(--header-height);
  background: var(--cream);
  border-bottom: 2px solid var(--red);
  z-index: 100;
  display: flex;
  align-items: center;
}

.site-header .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}

.site-header__logo {
  display: flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
}

.site-header__logo img {
  height: 60px;
  width: auto;
}

.lang-switch {
  display: flex;
  gap: 4px;
}

.lang-switch a {
  display: inline-block;
  padding: 4px 8px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-decoration: none;
  color: var(--red);
  border: 1px solid var(--red);
  border-radius: var(--radius);
  text-transform: uppercase;
}

.lang-switch a.is-active {
  background: var(--red);
  color: var(--white);
}

/* --- Navigation scroll-spy -------------------------------------------- */

.section-nav {
  position: sticky;
  top: var(--header-height);
  z-index: 90;
  background: var(--cream);
  border-bottom: 1px solid var(--red);
  overflow-x: auto;
  white-space: nowrap;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

.section-nav::-webkit-scrollbar { display: none; }

.section-nav__list {
  display: flex;
  list-style: none;
  /* centrage robuste : si la liste tient dans l'écran, "width:max-content" +
     "margin:auto" la centre ; si elle déborde (souvent le cas avec ~10
     catégories), le navigateur ramène les marges auto à 0 au lieu d'un
     nombre négatif, donc on retombe sur un alignement à gauche scrollable
     (scrollLeft=0 montre bien le début) au lieu de couper le premier
     élément hors champ, inatteignable au scroll (bug constaté avec
     justify-content:center + min-width:100% seuls). */
  width: max-content;
  min-width: 100%;
  margin: 0 auto;
  padding: 8px 16px;
  gap: 6px;
}

.section-nav__link {
  display: inline-block;
  padding: 6px 12px;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  text-decoration: none;
  color: var(--ink);
  border: 1px solid transparent;
  border-radius: var(--radius);
  white-space: nowrap;
}

.section-nav__link.is-active {
  border-color: var(--red);
  color: var(--red);
}

/* --- Titres de section (encadré rouge fin) ---------------------------- */

/* Le titre et l'illustration partagent une même ligne (au lieu de
   l'illustration seule, centrée, sous le titre : ça laissait un grand vide
   avant le premier plat). S'il n'y a pas d'illustration, .category__header
   ne contient que le titre et se comporte comme avant.
   Pas de flex-wrap : pour un nom de catégorie trop long pour tenir à côté de
   l'illustration (ex. "Raviolis en Cocotte (Jiaozi)"), le titre se comprime
   et son propre texte repasse sur plusieurs lignes (comportement normal
   d'un flex-item qui rétrécit), plutôt que de renvoyer l'illustration sur
   une ligne à part — ce qui annulerait l'intérêt du changement pile pour
   les titres les plus longs. */
.category__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin: 32px 0 16px;
}

.category__header .section-title {
  margin: 0;
  min-width: 0;
}

.section-title {
  display: inline-block;
  padding: 8px 20px;
  border: 2px solid var(--red);
  border-radius: var(--radius);
  background: var(--cream);
}

.section-title__text {
  margin: 0;
  font-size: 22px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--red);
}

.section-note {
  font-style: italic;
  font-size: 13px;
  color: var(--ink);
  opacity: 0.85;
  margin: 0 0 16px;
}

.category__header .section-illustration {
  width: 48px;
  margin: 0;
  flex-shrink: 0;
}

.section-illustration {
  display: block;
  height: auto;
  opacity: 0.9;
}

/* --- Fond alterné, une catégorie sur deux --------------------------------
   Bande légèrement teintée qui déborde jusqu'aux bords du conteneur (pas
   jusqu'au bord de l'écran, pour rester cohérent quelle que soit la largeur),
   pour casser la monotonie du fond crème uni sans ajouter de contraste qui
   nuirait à la lisibilité des plats. */
.category--tinted {
  margin-left: calc(-1 * var(--container-pad));
  margin-right: calc(-1 * var(--container-pad));
  padding: 20px var(--container-pad) 4px;
  background-color: var(--cream);
  background-image: linear-gradient(180deg, rgba(229, 52, 44, 0.07), rgba(229, 52, 44, 0.015) 55%, transparent 85%);
}

.category--tinted .category__header {
  margin-top: 8px;
}

/* --- Catégorie : mise en page avec bandeau vertical (desktop) --------- */

.category {
  scroll-margin-top: calc(var(--sticky-offset) + 8px);
  margin-bottom: 40px;
}

.category__body {
  display: flex;
  gap: 16px;
}

.category__vertical-label {
  display: none; /* réapparaît en desktop, voir media query plus bas */
}

.category__products {
  flex: 1;
  min-width: 0;
}

/* --- Fiche produit ------------------------------------------------------ */

.product {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  padding: 10px 8px;
  margin: 0 -8px;
  border-radius: var(--radius);
  border-bottom: 1px solid rgba(229, 52, 44, 0.2);
  transition: background-color 0.18s ease, transform 0.18s ease;
}

.product:last-child { border-bottom: none; }

.product:hover {
  background-color: rgba(229, 52, 44, 0.05);
  transform: translateX(2px);
}

.product__main {
  min-width: 0;
}

.product__name-row {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.product__name {
  font-weight: 700;
  font-size: 15px;
}

.product__pieces {
  font-size: 12px;
  color: var(--red);
  font-weight: 700;
  white-space: nowrap;
}

.product__tags {
  display: inline-flex;
  gap: 3px;
}

.product__tags img {
  width: 16px;
  height: 16px;
}

.product__description {
  font-size: 13px;
  font-style: italic;
  opacity: 0.85;
  margin-top: 2px;
}

.product__price {
  font-weight: 700;
  white-space: nowrap;
  font-size: 15px;
  color: var(--red);
}

.product__price-note {
  font-size: 13px;
  font-style: italic;
  color: var(--red);
  white-space: nowrap;
}

.product__variants {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
}

.product__variant-row {
  font-size: 13px;
  white-space: nowrap;
}

.product__variant-row .label { opacity: 0.75; margin-right: 8px; }

/* --- Légende des pictogrammes ------------------------------------------ */

.legend {
  margin: 24px 0;
  padding: 12px 16px;
  border: 1px solid var(--red);
  border-radius: var(--radius);
  font-size: 12px;
}

.legend__title {
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--red);
  margin: 0 0 8px;
}

.legend__items {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.legend__items li {
  display: flex;
  align-items: center;
  gap: 6px;
}

.legend__items img {
  width: 18px;
  height: 18px;
}

/* --- Plat à composer (soupes) ------------------------------------------ */

.composer {
  border: 2px solid var(--red);
  border-radius: var(--radius);
  padding: 16px;
  background: var(--white);
}

.composer__description {
  font-style: italic;
  font-size: 13px;
  margin: 0 0 16px;
}

.composer__step {
  margin-bottom: 20px;
}

.composer__step-title {
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 13px;
  color: var(--red);
  margin: 0 0 4px;
}

.composer__step-description {
  font-size: 12px;
  opacity: 0.8;
  margin: 0 0 8px;
}

.composer__choices {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.composer__choice {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 8px 10px;
  border: 1px solid rgba(229, 52, 44, 0.35);
  border-radius: var(--radius);
  cursor: pointer;
}

.composer__choice:has(input:checked) {
  border-color: var(--red);
  background: rgba(229, 52, 44, 0.06);
}

.composer__choice input { margin-top: 3px; }

.composer__choice-label {
  font-weight: 700;
  font-size: 14px;
}

.composer__choice-desc {
  font-size: 12px;
  opacity: 0.8;
}

.composer__choice-price {
  margin-left: auto;
  font-weight: 700;
  color: var(--red);
  white-space: nowrap;
}

.composer__supplements {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.composer__supplement {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 5px 10px;
  border: 1px solid rgba(229, 52, 44, 0.35);
  border-radius: 999px;
  font-size: 12px;
  cursor: pointer;
}

.composer__supplement:has(input:checked) {
  background: var(--red);
  color: var(--white);
  border-color: var(--red);
}

.composer__total {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 16px;
  padding-top: 12px;
  border-top: 2px solid var(--red);
  font-weight: 800;
  font-size: 18px;
}

.composer__total-value { color: var(--red); }

/* --- Boissons : sous-catégories ----------------------------------------- */

.drinks-subcategory {
  margin-bottom: 24px;
}

.drinks-subcategory__title {
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 14px;
  color: var(--red);
  margin: 0 0 8px;
  padding-bottom: 4px;
  border-bottom: 1px solid var(--red);
}

/* --- Popup annonce -------------------------------------------------------
   IMPORTANT (leçon MoMA Coffee) : toute règle qui montre/cache cet overlay
   via une classe doit avoir son pendant [hidden]. Une règle d'auteur sur un
   sélecteur de classe l'emporte toujours sur [hidden]{display:none} du
   navigateur, donc sans la ligne ci-dessous le popup ne se fermerait jamais
   visuellement même si le JS pose bien l'attribut hidden.
   -------------------------------------------------------------------- */

.announcement-overlay {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(43, 20, 16, 0.55);
}

.announcement-overlay[hidden] {
  display: none;
}

.announcement-box {
  position: relative;
  max-width: 420px;
  width: 100%;
  background: var(--cream);
  border: 3px solid var(--red);
  border-radius: var(--radius);
  padding: 28px 20px 20px;
  text-align: center;
}

.announcement-box__message {
  font-size: 15px;
  margin: 0 0 16px;
}

/* Popup multilingue : une étiquette FR/EN/... par ligne quand plusieurs
   langues sont cochées dans l'admin (voir render_announcement_message() dans
   index.php), séparateur fin entre chaque ligne. Le cas courant (une seule
   langue) garde le style centré de .announcement-box__message ci-dessus,
   sans aucune de ces règles. */
.announcement-box__message--labeled {
  text-align: left;
  margin: 0 0 12px;
}

.announcement-box__message--labeled + .announcement-box__message--labeled {
  padding-top: 10px;
  border-top: 1px solid rgba(229, 52, 44, 0.15);
}

.announcement-box__lang {
  display: block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--red);
  margin-bottom: 2px;
}

.announcement-box__close-x {
  position: absolute;
  top: 8px;
  right: 12px;
  background: none;
  border: none;
  font-size: 20px;
  line-height: 1;
  color: var(--red);
  cursor: pointer;
}

.announcement-box__ok {
  display: inline-block;
  padding: 8px 24px;
  background: var(--red);
  color: var(--white);
  border: none;
  border-radius: var(--radius);
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  cursor: pointer;
}

/* --- Pied de page / infos pratiques -------------------------------------- */

.site-footer {
  margin-top: 48px;
  padding: 32px 0 40px;
  background: var(--red);
  color: var(--white);
}

.site-footer a { color: var(--white); }

.footer-block {
  margin-bottom: 20px;
}

.footer-block:last-child { margin-bottom: 0; }

.footer-block__title {
  display: flex;
  align-items: center;
  gap: 6px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 13px;
  margin: 0 0 6px;
  opacity: 0.9;
}

.footer-block__body {
  font-size: 14px;
  line-height: 1.5;
}

.icon {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

.social-links {
  display: flex;
  gap: 10px;
  margin-top: 8px;
}

.social-links__link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
  border: 1px solid rgba(255, 255, 255, 0.6);
  border-radius: 999px;
  transition: background-color 0.15s ease, transform 0.15s ease;
}

.social-links__link .icon {
  width: 15px;
  height: 15px;
}

.social-links__link:hover,
.social-links__link:focus-visible {
  background: rgba(255, 255, 255, 0.15);
  transform: translateY(-1px);
}

.footer-empty-notice {
  font-size: 12px;
  opacity: 0.75;
  font-style: italic;
}

/* --- Apparition douce des sections au défilement -------------------------
   [data-reveal] est posé en PHP sur chaque <section class="category">. Le
   JS (initSectionReveal dans app.js) ajoute .is-visible via
   IntersectionObserver quand la section entre dans l'écran, ou tout de suite
   si prefers-reduced-motion est actif (voir la media query plus bas et le
   JS, qui applique la même règle des deux côtés). */
[data-reveal] {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

[data-reveal].is-visible {
  opacity: 1;
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  [data-reveal] {
    opacity: 1;
    transform: none;
    transition: none;
  }
  .product {
    transition: none;
  }
}

/* --- Responsive : desktop / tablette ------------------------------------- */

@media (min-width: 640px) {
  :root { --header-height: 92px; }

  .site-header__logo img {
    height: 72px;
  }

  .section-nav__list {
    justify-content: center;
  }

  .category__vertical-label {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    width: 34px;
    flex-shrink: 0;
    background: var(--red);
    color: var(--white);
    border-radius: var(--radius);
    padding: 12px 0;
    font-weight: 800;
    letter-spacing: 0.15em;
    font-size: 14px;
    line-height: 1.6;
  }

  .category__vertical-label span {
    writing-mode: vertical-rl;
    transform: rotate(180deg);
  }
}

@media (min-width: 900px) {
  :root { --max-width: 860px; }
}