/* ============================================================
   LA BOULANGERIE EFFEL — La carte (page privée)
   Palette & typo identiques à l'accueil (rouge sang + crème)
   ============================================================ */

:root {
  --ink:       #800202;
  --ink-deep:  #5e0101;
  --ink-soft:  #9a1414;
  --cream:     #f1e6d8;
  --cream-dim: rgba(241, 230, 216, 0.72);
  --cream-faint: rgba(241, 230, 216, 0.4);
  --white:     #fbf5ec;

  --font-mono: "DM Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
  --font-hand: "Cormorant Garamond", Georgia, "Times New Roman", serif;

  --pad:  clamp(1.25rem, 4vw, 3.25rem);
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; }

body {
  font-family: var(--font-mono);
  background: var(--ink);
  background-image: radial-gradient(120% 70% at 50% 0%, var(--ink-soft) 0%, var(--ink) 46%, var(--ink-deep) 100%);
  background-attachment: fixed;
  color: var(--cream);
  min-height: 100vh;
  min-height: 100dvh;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ---------- Grain ---------- */
.grain {
  position: fixed; inset: 0; z-index: 60; pointer-events: none;
  opacity: 0.4; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- Cadre décoratif ---------- */
.frame {
  position: fixed; inset: clamp(0.75rem, 1.6vw, 1.5rem); z-index: 40;
  pointer-events: none;
  border: 1px solid rgba(241, 230, 216, 0.26);
  outline: 1px solid rgba(241, 230, 216, 0.12); outline-offset: 4px;
}
.tick { position: absolute; width: 9px; height: 9px; border: 1px solid var(--cream); opacity: 0.7; }
.tick--tl { top:-1px; left:-1px; border-right:0; border-bottom:0; }
.tick--tr { top:-1px; right:-1px; border-left:0; border-bottom:0; }
.tick--bl { bottom:-1px; left:-1px; border-right:0; border-top:0; }
.tick--br { bottom:-1px; right:-1px; border-left:0; border-top:0; }

/* ---------- Structure ---------- */
.page {
  position: relative; z-index: 10;
  width: 100%; max-width: 680px; margin: 0 auto;
  padding: clamp(2.4rem, 6vw, 4rem) var(--pad) clamp(2rem, 5vw, 3.5rem);
}

/* ===================== EN-TÊTE ===================== */
.masthead { text-align: center; display: flex; flex-direction: column; align-items: center; }
.emblem { width: 26px; height: auto; fill: var(--cream); opacity: 0.85; margin-bottom: 1.1rem; }
.masthead__mark { width: clamp(220px, 56vw, 360px); line-height: 0; }
.masthead__mark img { width: 100%; height: auto; display: block; }
.masthead__eyebrow {
  display: flex; align-items: center; gap: 0.9rem;
  margin-top: clamp(1rem, 3vw, 1.6rem);
  font-size: 0.7rem; letter-spacing: 0.4em; text-transform: uppercase;
  color: var(--cream-dim);
}
.masthead__eyebrow .rule { display: block; width: clamp(24px, 6vw, 50px); height: 1px; background: var(--cream-faint); }

/* ===================== CARTE ===================== */
.menu {
  margin-top: clamp(2.4rem, 6vw, 3.6rem);
  display: flex; flex-direction: column; gap: clamp(1.8rem, 5vw, 2.8rem);
}

.course__title {
  font-family: var(--font-hand);
  font-style: italic;
  font-weight: 600;
  font-size: clamp(1.5rem, 4.5vw, 2.1rem);
  color: var(--white);
  text-align: center;
  margin-bottom: clamp(1rem, 3vw, 1.5rem);
  position: relative;
}
.course__title::after {
  content: "";
  display: block;
  width: 38px; height: 1px;
  background: var(--cream-faint);
  margin: 0.7rem auto 0;
}

.items { list-style: none; display: flex; flex-direction: column; gap: 1.05rem; }

.item {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: baseline;
  column-gap: 0.6rem;
}
.item__name {
  font-size: 0.92rem;
  letter-spacing: 0.01em;
  color: var(--cream);
}
.item__dots {
  border-bottom: 1px dotted rgba(241, 230, 216, 0.32);
  transform: translateY(-3px);
  min-width: 1rem;
}
.item__price {
  font-size: 0.92rem;
  color: var(--white);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.item__desc {
  grid-column: 1 / -1;
  font-family: var(--font-hand);
  font-style: italic;
  font-size: 1.02rem;
  line-height: 1.3;
  color: var(--cream-dim);
  margin-top: 0.2rem;
}

/* Plat mis en avant (formule) */
.item--feature {
  padding: 0.9rem 1.05rem;
  border: 1px solid rgba(241, 230, 216, 0.28);
  border-radius: 10px;
  background: rgba(241, 230, 216, 0.05);
  margin-top: 0.3rem;
}
.item--feature .item__dots { border-bottom-color: rgba(241, 230, 216, 0.22); }

/* ===================== PIED ===================== */
.foot {
  margin-top: clamp(2.6rem, 6vw, 3.6rem);
  padding-top: clamp(1.4rem, 3vw, 1.8rem);
  border-top: 1px solid rgba(241, 230, 216, 0.16);
  text-align: center;
}
.foot__addr { font-size: 0.74rem; letter-spacing: 0.08em; color: var(--cream); }
.foot__note {
  margin-top: 0.6rem;
  font-size: 0.66rem;
  letter-spacing: 0.04em;
  color: var(--cream-faint);
}

/* ===================== ANIMATIONS ===================== */
.reveal {
  opacity: 0; transform: translateY(16px);
  animation: reveal 0.9s var(--ease) forwards;
  animation-delay: var(--d, 0s);
}
@keyframes reveal { to { opacity: 1; transform: translateY(0); } }

@media (prefers-reduced-motion: reduce) {
  .reveal { animation: none; opacity: 1; transform: none; }
}

/* ===================== RESPONSIVE ===================== */
@media (max-width: 480px) {
  .item__name, .item__price { font-size: 0.86rem; }
  .item__desc { font-size: 0.96rem; }
}