/* ============================================================
   Carte QR — enveloppe d'application
   Écran d'accueil + chrome partagé + sélecteur d'ambiance.
   Direction-agnostique ; les surcharges par ambiance sont
   portées par body.dir-A (Carte gravée) / body.dir-B (Ardoise).
   ============================================================ */

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Le fond du body est posé par styleA / styleB (l'ambiance active).
   En attendant l'entrée dans la carte, l'accueil couvre l'écran. */

/* ----- bascule des marques (ink vs ivoire) ----- */
.mark-ink, .mark-ivory { display: none; }
body.dir-A .mark-ink  { display: block; }
body.dir-B .mark-ivory { display: block; }

/* ============================================================
   ÉCRAN D'ACCUEIL
   ============================================================ */
.w-screen {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 48px 30px calc(40px + env(safe-area-inset-bottom));
  overflow-y: auto;
  transition: opacity .5s ease, visibility .5s ease;
}
.w-screen.is-hidden { opacity: 0; visibility: hidden; pointer-events: none; }

/* ambiance backgrounds for the welcome layer */
body.dir-A .w-screen {
  background:
    radial-gradient(120% 80% at 50% -10%, var(--paper), transparent 60%),
    var(--cream);
  color: var(--ink-800);
}
body.dir-B .w-screen {
  background:
    radial-gradient(120% 80% at 50% -8%, #2a221d, transparent 62%),
    var(--ink-900);
  color: var(--cream);
}

.w-inner {
  width: 100%;
  max-width: 380px;
  margin: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
}

.w-eyebrow {
  font-family: var(--font-label);
  font-weight: 500;
  font-size: 11px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--brass-600);
}
body.dir-B .w-eyebrow { color: var(--brass-400); }

.w-mark { width: 96px; height: 96px; object-fit: contain; margin-top: 2px; }

.w-name {
  font-family: var(--font-script);
  font-weight: 400;
  font-size: 40px;
  line-height: 0.98;
  margin: -2px 0 0;
  color: inherit;
}

.w-rule { display: flex; align-items: center; gap: 12px; width: 180px; color: var(--brass-600); }
body.dir-B .w-rule { color: var(--brass-400); }
.w-rule span { height: 1px; flex: 1; background: currentColor; opacity: 0.6; }
.w-rule i { font-style: normal; font-size: 11px; line-height: 1; }

.w-tagline {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 500;
  font-size: 20px;
  line-height: 1.35;
  margin: 0;
  color: var(--ink-700);
  max-width: 300px;
}
body.dir-B .w-tagline { color: var(--fg-on-dark-muted); }

.w-meta {
  font-family: var(--font-label);
  font-weight: 400;
  font-size: 10.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  line-height: 1.9;
  color: var(--ink-300);
}
body.dir-B .w-meta { color: var(--fg-on-dark-muted); opacity: 0.85; }

.w-enter {
  margin-top: 8px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  border: none;
  font-family: var(--font-label);
  font-weight: 500;
  font-size: 13px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  padding: 16px 38px;
  border-radius: var(--r-pill);
  box-shadow: var(--shadow-md);
  transition: transform .18s ease, background .18s ease, box-shadow .18s ease;
}
.w-enter::after { content: '\2192'; font-size: 15px; letter-spacing: 0; transition: transform .2s ease; }
.w-enter:active { transform: scale(0.98); }
.w-enter:hover::after { transform: translateX(4px); }
body.dir-A .w-enter { background: var(--bordeaux-600); color: var(--cream); }
body.dir-A .w-enter:hover { background: var(--bordeaux-700); }
body.dir-B .w-enter { background: var(--brass-600); color: var(--ink-900); }
body.dir-B .w-enter:hover { background: var(--brass-400); }

/* language toggle (welcome, top-right) */
.w-lang {
  position: absolute;
  top: calc(32px + env(safe-area-inset-top));
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 2px;
  border-radius: var(--r-pill);
  padding: 2px;
  border: 1px solid;
}
.w-flag-slot { display: flex; align-items: center; padding: 0 5px; }
.w-flag { width: 18px; height: 12px; display: block; border-radius: 1.5px; box-shadow: 0 0 0 0.5px rgba(0,0,0,0.12); }
.m-lang { align-items: center; }
.m-lang .w-flag-slot { padding: 0 4px; }
.m-lang .w-flag { width: 16px; height: 11px; }

/* Menu courses — Entrée / Plat / Dessert */
.m-courses { display: flex; flex-direction: column; gap: 12px; margin: 4px 0 2px; }
.m-course { display: flex; flex-direction: column; gap: 5px; }
.m-course-label {
  font-family: var(--font-label); font-weight: 500; font-size: 11px; letter-spacing: 0.16em;
  text-transform: uppercase;
}
.m-course-choix { font-size: 9.5px; letter-spacing: 0.1em; opacity: 0.75; }
.m-course-opts { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 3px; }
.m-course-opts li {
  font-family: var(--font-body); font-style: italic; font-size: 15px; line-height: 1.35;
  padding-left: 16px; position: relative;
}
.m-course-opts li::before { content: '—'; position: absolute; left: 0; font-style: normal; }
.m-course-single { font-family: var(--font-body); font-style: italic; font-size: 15px; line-height: 1.4; }
.m-vdf { height: 20px; width: auto; vertical-align: -5px; margin-left: 7px; display: inline-block; }
.m-course-opts li .m-vdf { vertical-align: -4px; }
.m-namewrap { display: inline; }
.m-namewrap .m-vdf { height: 22px; vertical-align: -6px; margin-left: 8px; }
.m-seclabel-note { font-weight: 400; text-transform: none; letter-spacing: 0.06em; font-style: italic; font-family: var(--font-body); font-size: 0.82em; opacity: 0.8; }
.m-seclabel .m-maison-inline { height: 22px; vertical-align: -7px; margin-left: 9px; }
.m-accomp { font-family: var(--font-body); font-size: 13px; line-height: 1.4; margin-top: 4px; }
.m-accomp span { font-family: var(--font-label); font-weight: 500; font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; }
.m-formats { font-family: var(--font-body); font-weight: 500; font-size: 16px; letter-spacing: normal; text-align: right; margin-top: 4px; }
.m-sec-pichet .m-price { text-align: right; }
.m-vol { font-size: 0.84em; font-style: italic; font-weight: 400; opacity: 0.85; }
.m-name-note { font-family: var(--font-body); font-style: italic; font-size: 14px; }
body.dir-A .m-name-note { color: var(--fg-muted); }
body.dir-B .m-name-note { color: var(--fg-on-dark-muted); }
body.dir-A .m-formats { color: var(--ink-700); }
body.dir-B .m-formats { color: var(--cream); }
.m-secprice { text-align: right; margin-top: 14px; }
.m-secprice .m-per { font-family: var(--font-label); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; }
.m-subhead { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.m-subhead .m-price { font-family: var(--font-body); font-weight: 500; font-size: 16px; letter-spacing: normal; }
body.dir-A .m-subhead .m-price { color: var(--ink-700); }
body.dir-B .m-subhead .m-price { color: var(--cream); }
body.dir-A .m-secprice .m-per { color: var(--fg-subtle); }
body.dir-B .m-secprice .m-per { color: var(--fg-on-dark-muted); }
body.dir-A .m-accomp { color: var(--fg-muted); }
body.dir-A .m-accomp span { color: var(--brass-600); }
body.dir-B .m-accomp { color: var(--fg-on-dark-muted); }
body.dir-B .m-accomp span { color: var(--brass-400); }
.m-formule-namerow { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.m-maison-picto { height: 30px; width: auto; flex: none; }
.m-legends { display: flex; flex-direction: column; align-items: center; gap: 6px; margin-top: 22px; }
.m-legend { display: flex; align-items: center; gap: 8px; font-family: var(--font-label); font-weight: 400; font-size: 10.5px; letter-spacing: 0.1em; text-transform: uppercase; text-align: center; }
.m-legend img { height: 22px; width: auto; flex: none; }
body.dir-A .m-legend { color: var(--ink-300); }
body.dir-B .m-legend { color: var(--fg-on-dark-muted); }
body.dir-A .m-course-label { color: var(--brass-600); }
body.dir-A .m-course-opts li, body.dir-A .m-course-single { color: var(--ink-700); }
body.dir-A .m-course-opts li::before { color: var(--brass-600); }
body.dir-B .m-course-label { color: var(--brass-400); }
body.dir-B .m-course-opts li, body.dir-B .m-course-single { color: var(--fg-on-dark-muted); }
body.dir-B .m-course-opts li::before { color: var(--brass-400); }
.m-course + .m-course { border-top: 1px solid; padding-top: 12px; }
body.dir-A .m-course + .m-course { border-top-color: rgba(120,110,95,0.18); }
body.dir-B .m-course + .m-course { border-top-color: rgba(198,168,103,0.16); }
body.dir-A .w-lang { border-color: var(--sand-deep); background: var(--cream); }
body.dir-B .w-lang { border-color: var(--brass-700); }
.w-lang-btn {
  background: none; border: none; cursor: pointer;
  font-family: var(--font-label); font-weight: 500; font-size: 10px;
  letter-spacing: 0.08em; padding: 5px 11px; border-radius: var(--r-pill);
}
body.dir-A .w-lang-btn { color: var(--ink-300); }
body.dir-B .w-lang-btn { color: var(--fg-on-dark-muted); }
body.dir-A .w-lang-btn.is-active { background: var(--bordeaux-600); color: var(--cream); }
body.dir-B .w-lang-btn.is-active { background: var(--brass-600); color: var(--ink-900); }

/* ----- ambiance chooser (review affordance) ----- */
.w-amb {
  margin-top: 26px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}
.w-amb-label {
  font-family: var(--font-label);
  font-weight: 500;
  font-size: 9.5px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--ink-300);
}
body.dir-B .w-amb-label { color: var(--fg-on-dark-muted); }
.w-amb-seg { display: flex; gap: 6px; }
.w-amb-btn {
  cursor: pointer;
  font-family: var(--font-label);
  font-weight: 500;
  font-size: 10.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 9px 16px;
  border-radius: var(--r-pill);
  background: transparent;
  transition: background .18s, color .18s, border-color .18s;
  border: 1px solid;
}
body.dir-A .w-amb-btn { color: var(--ink-500); border-color: var(--sand-deep); }
body.dir-B .w-amb-btn { color: var(--fg-on-dark-muted); border-color: var(--brass-700); }
body.dir-A .w-amb-btn.is-active { background: var(--ink-800); color: var(--cream); border-color: var(--ink-800); }
body.dir-B .w-amb-btn.is-active { background: var(--brass-600); color: var(--ink-900); border-color: var(--brass-600); }

/* ============================================================
   AMBIANCE TOGGLE — inside the menu header (review affordance)
   ============================================================ */
.m-amb {
  position: absolute;
  top: 16px;
  left: 14px;
  display: flex;
  gap: 2px;
  border-radius: var(--r-pill);
  padding: 2px;
  border: 1px solid;
  z-index: 5;
}
body.dir-A .m-amb { border-color: var(--sand-deep); background: var(--cream); }
body.dir-B .m-amb { border-color: var(--brass-700); }
.m-amb-btn {
  background: none; border: none; cursor: pointer;
  font-family: var(--font-label); font-weight: 500; font-size: 9.5px;
  letter-spacing: 0.1em; text-transform: uppercase;
  padding: 5px 10px; border-radius: var(--r-pill);
}
body.dir-A .m-amb-btn { color: var(--ink-300); }
body.dir-B .m-amb-btn { color: var(--fg-on-dark-muted); }
body.dir-A .m-amb-btn.is-active { background: var(--ink-800); color: var(--cream); }
body.dir-B .m-amb-btn.is-active { background: var(--brass-600); color: var(--ink-900); }

/* the menu app stays hidden until the guest enters */
.m-app { transition: opacity .5s ease; }
.m-app.is-pending { opacity: 0; }

/* dual marks inside the menu header share the .m-mark sizing from style A/B */

/* ============================================================
   Badge « Fait maison » — logo officiel redessiné (currentColor)
   Remplace la pastille décorative du badge maison.
   ============================================================ */
.m-badge--maison::before { display: none !important; }
.m-badge--maison { white-space: nowrap; }
.m-badge--maison .fm-glyph {
  width: 17px;
  height: 13px;
  flex: none;
  display: block;
  margin-right: 1px;
}

/* ============================================================
   ÉVÉNEMENT — Réveillon de la Saint-Sylvestre (nuit étoilée & or)
   ============================================================ */
.ev-card{--ev-night:oklch(0.29 0.085 262);--ev-night-2:oklch(0.36 0.09 260);--ev-gold:#C9A961;--ev-ivory:#F6F0E2;position:relative;margin:4px 0 30px;padding:34px 22px 28px;text-align:center;color:var(--ev-ivory);background:radial-gradient(120% 60% at 50% 0%,var(--ev-night-2),transparent 70%),var(--ev-night);border-radius:120px 120px 6px 6px;box-shadow:var(--shadow-md)}
.ev-card::before{content:'';position:absolute;inset:8px;border:1px solid var(--ev-gold);border-radius:113px 113px 3px 3px;opacity:.75;pointer-events:none}
.ev-eyebrow{display:flex;align-items:center;justify-content:center;gap:10px;font-family:var(--font-label);font-weight:500;font-size:10.5px;letter-spacing:.26em;text-transform:uppercase;color:var(--ev-ivory);margin-top:14px}
.ev-eyebrow span{height:1px;width:22px;background:var(--ev-gold)}
.ev-eyebrow2{font-family:var(--font-label);font-weight:400;font-size:9.5px;letter-spacing:.24em;text-transform:uppercase;color:var(--ev-ivory);opacity:.85;margin-top:6px}
.ev-title{font-family:var(--font-script);font-weight:400;font-size:34px;line-height:1.05;color:var(--ev-gold);margin:12px 0 14px;text-wrap:balance}
.ev-deposit{background:var(--ev-gold);color:oklch(0.22 0.06 262);font-family:var(--font-label);font-weight:500;font-size:10px;letter-spacing:.2em;text-transform:uppercase;padding:9px 10px;margin:0 -4px}
.ev-courses{display:flex;flex-direction:column;align-items:center;gap:12px;margin:22px 0 4px}
.ev-sep{font-size:6px;letter-spacing:.6em;color:var(--ev-gold);padding-left:.6em}
.ev-course{display:flex;flex-direction:column;gap:3px}
.ev-course-label{font-family:var(--font-label);font-weight:500;font-size:9.5px;letter-spacing:.24em;text-transform:uppercase;color:var(--ev-gold);margin-bottom:3px}
.ev-course-name{font-family:var(--font-display);font-weight:600;font-size:21px;line-height:1.2;color:var(--ev-ivory);text-wrap:balance}
.ev-course-desc{font-family:var(--font-body);font-style:italic;font-size:15px;line-height:1.35;color:var(--ev-ivory);opacity:.85}
.ev-summary{font-family:var(--font-body);font-style:italic;font-size:14.5px;line-height:1.4;color:var(--ev-ivory);margin:20px 0 0;padding-top:16px;border-top:1px solid color-mix(in oklch,var(--ev-gold) 45%,transparent);text-wrap:balance}
.ev-group{margin-top:16px;display:flex;flex-direction:column;gap:8px}
.ev-group-label{font-family:var(--font-label);font-weight:500;font-size:9.5px;letter-spacing:.22em;text-transform:uppercase;color:var(--ev-gold)}
.ev-price-row{display:flex;align-items:baseline;gap:8px;text-align:left}
.ev-price-name{font-family:var(--font-display);font-weight:500;font-size:18px;line-height:1.25;color:var(--ev-ivory)}
.ev-leader{flex:1;min-width:12px;border-bottom:1px dotted color-mix(in oklch,var(--ev-ivory) 45%,transparent);transform:translateY(-4px)}
.ev-price{font-family:var(--font-body);font-weight:500;font-size:17px;color:var(--ev-gold);white-space:nowrap}
.ev-contact{margin-top:22px;padding-top:16px;border-top:1px solid color-mix(in oklch,var(--ev-gold) 45%,transparent);display:flex;flex-direction:column;align-items:center;gap:10px}
.ev-contact-btns{display:flex;flex-direction:column;align-items:stretch;gap:8px;width:100%;max-width:300px}
.ev-btn{display:flex;align-items:center;justify-content:center;min-height:44px;padding:10px 16px;border-radius:var(--r-pill);font-family:var(--font-label);font-weight:500;font-size:12px;letter-spacing:.12em;text-decoration:none;background:var(--ev-gold);color:oklch(0.22 0.06 262);transition:filter .18s ease}
.ev-btn:hover{filter:brightness(1.08)}
.ev-btn--ghost{background:transparent;color:var(--ev-ivory);border:1px solid var(--ev-gold);letter-spacing:.04em;font-weight:400}
.ev-btn--ghost:hover{background:color-mix(in oklch,var(--ev-gold) 18%,transparent);filter:none}
.ev-address{font-family:var(--font-label);font-weight:400;font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--ev-ivory);opacity:.85}

/* accès depuis l'écran d'accueil */
.w-event{margin-top:4px;display:flex;flex-direction:column;align-items:center;gap:3px;cursor:pointer;border:1px solid #C9A961;border-radius:14px;padding:11px 22px;background:oklch(0.29 0.085 262);color:#F6F0E2;transition:filter .18s ease}
.w-event:hover{filter:brightness(1.12)}
.w-event-k{font-family:var(--font-display);font-weight:600;font-size:17px}
.w-event-cta{font-family:var(--font-label);font-weight:500;font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:#C9A961}
.w-event-cta::after{content:' \2192';letter-spacing:0}

/* page à part */
.ev-page{position:fixed;inset:0;z-index:120;overflow-y:auto;-webkit-overflow-scrolling:touch;background:radial-gradient(110% 55% at 50% 0%,oklch(0.33 0.09 261),transparent 70%),oklch(0.22 0.07 263)}
.ev-bar{position:sticky;top:0;z-index:2;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:calc(12px + env(safe-area-inset-top)) 14px 12px;background:color-mix(in oklch,oklch(0.22 0.07 263) 82%,transparent);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.ev-bar .ev-lang{position:static;border-color:#8a7445;background:transparent}
.ev-bar .ev-lang .m-lang-btn{color:#F6F0E2}
.ev-bar .ev-lang .m-lang-btn.is-active{background:#C9A961;color:oklch(0.22 0.06 262)}
.ev-back{cursor:pointer;background:none;border:1px solid #C9A961;border-radius:var(--r-pill);color:#F6F0E2;font-family:var(--font-label);font-weight:500;font-size:11px;letter-spacing:.14em;text-transform:uppercase;min-height:40px;padding:8px 16px}
.ev-back:hover{background:color-mix(in oklch,#C9A961 18%,transparent)}
.ev-page-inner{max-width:460px;margin:0 auto;padding:8px 16px calc(36px + env(safe-area-inset-bottom));display:flex;flex-direction:column;align-items:center}
.ev-page-inner .ev-card{width:100%;margin:6px 0 22px;box-shadow:0 0 0 1px color-mix(in oklch,#C9A961 30%,transparent),0 20px 50px rgba(0,0,0,.35)}
.ev-back--foot{width:100%;max-width:300px;min-height:44px}

/* accès depuis l'onglet Les Menus */
.ev-link{width:100%;margin:2px 0 22px;display:flex;flex-direction:column;align-items:center;gap:3px;cursor:pointer;border:1px solid #C9A961;border-radius:8px;padding:14px 18px;background:oklch(0.29 0.085 262);color:#F6F0E2;transition:filter .18s ease}
.ev-link:hover{filter:brightness(1.12)}

/* bouton Réveillon : petites étoiles scintillantes */
.w-event,.ev-link{position:relative;overflow:hidden;isolation:isolate}
.w-event-k,.w-event-cta{position:relative;z-index:1}
.ev-star{position:absolute;z-index:0;line-height:1;color:#E6CF94;pointer-events:none;transform:translate(-50%,-50%);text-shadow:0 0 6px rgba(230,207,148,.7);animation:ev-twinkle 2.8s ease-in-out infinite}
.ev-star:nth-child(even){color:#F6F0E2}
.w-event-cta::after{display:inline-block;animation:ev-nudge 3.2s ease-in-out infinite}
@keyframes ev-twinkle{0%,100%{opacity:.9;transform:translate(-50%,-50%) scale(1) rotate(0)}45%{opacity:.15;transform:translate(-50%,-50%) scale(.45) rotate(25deg)}70%{opacity:1;transform:translate(-50%,-50%) scale(1.25) rotate(0)}}
@keyframes ev-nudge{0%,60%,100%{transform:none}75%{transform:translateX(4px)}}
@media (prefers-reduced-motion:reduce){.ev-star,.w-event-cta::after{animation:none}}

.ev-book{margin:2px 0 6px;font-size:11px;letter-spacing:.1em;text-transform:uppercase;text-align:center;line-height:1.3}

.ev-link--head{width:auto;max-width:320px;margin:14px auto 2px;padding:9px 22px;border-radius:14px}
.ev-link--head .w-event-k{font-size:15px}

.ev-start{font-family:var(--font-display);font-style:italic;font-weight:500;font-size:18px;color:var(--ev-ivory);margin-top:12px}
.ev-deposit-info{font-family:var(--font-body);font-size:14px;line-height:1.45;color:var(--ev-ivory);margin:18px 0 0;padding:12px 14px;border:1px solid color-mix(in oklch,var(--ev-gold) 50%,transparent);border-radius:4px;text-wrap:pretty}
.ev-lastminute{font-family:var(--font-display);font-weight:600;font-size:17px;color:var(--ev-gold)}