/* ==========================================================================
   L'étage — L'Équerre · Cocotte · Temporalité · Boissons · Rhum M.A.D
   Page-scoped styles (prefix .et- / .dr- / .mc / .mad-). Loaded after main.css.
   ========================================================================== */

.et-page {
  --et-night: #0b0a08;
  --et-deep: #0a0907;
  --cc-bg: #0d2522;
  --cc-fg: #f1eadb;
  --cc-mute: rgba(241, 234, 219, .72);
  --cc-line: rgba(241, 234, 219, .16);
  --mad-bg: #17100b;
  background: var(--ink);
  color: var(--paper);
}
/* Tones: the page is brand; each chapter carries its own data-tone (see main.css).
   The whole page is a dark surface, so every tone scope uses the vivid accent for <em> and a light focus ring. */
.et-page, .et-page [data-tone] { --gold-em: var(--t); --focus: var(--t-2); --focus-halo: var(--ink); }
.et-page .btn--gold { --b-bg: var(--t); --b-fg: var(--t-on); } /* tone-coloured buttons: dark tone ink on the accent */
.et-page .img-reveal { background: var(--ink-3); }
.et-tone { color: var(--t); }
.et-privcard .eyebrow { color: var(--t-2); } /* light tint: AA over the photo + overlay */
.et-page .muted-inv { color: var(--muted-inv); }
.et-page .lead { color: var(--muted-inv); }
.et-page .phero__crumbs { color: var(--muted-inv); }
.et-page .phero__crumbs a:hover { color: var(--paper); }
.et-page .et-stats .stat { border-color: var(--line-inv); }
.et-page .et-stats .stat span { color: var(--muted-inv); }

/* Dark glass header on this nocturnal page */
.et-page .header.is-solid { color: var(--paper); }
.et-page .header.is-solid::before { background: color-mix(in srgb, var(--et-deep) 78%, transparent); border-bottom-color: var(--line-inv); }
.et-page .header.is-solid .brand img { filter: brightness(0) invert(1); }

/* ---------- Chapter scaffolding ---------- */
.et-ch { position: relative; overflow-x: clip; }
.et-ch__head {
  display: flex; align-items: center; gap: 16px; color: var(--t);
  font-size: 12px; font-weight: 600; letter-spacing: .22em; text-transform: uppercase;
}
.et-ch__head--center { justify-content: center; }
.et-ch__n { font-family: var(--f-display); font-size: 1.7rem; font-weight: 400; letter-spacing: 0; line-height: 1; }
.et-ch__rule { width: clamp(36px, 7vw, 110px); height: 1px; background: currentColor; opacity: .55; }
.et-ch__big {
  position: absolute; left: var(--gutter); top: clamp(30px, 5vw, 80px); z-index: 0; pointer-events: none; user-select: none;
  font-family: var(--f-display); font-size: clamp(9rem, 26vw, 26rem); line-height: .8; letter-spacing: -.04em;
  color: transparent; -webkit-text-stroke: 1px color-mix(in srgb, var(--t) 22%, transparent);
}
.et-ch > .wrap { position: relative; z-index: 1; }
.et-logo { display: block; height: auto; }

/* ---------- Hero ---------- */
.et-hero {
  position: relative; overflow: hidden; background: var(--ink); color: var(--paper);
  padding: calc(var(--header-h) + clamp(36px, 6vw, 90px)) 0 clamp(56px, 7vw, 110px);
}
.et-hero__bg {
  position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(55% 55% at 85% 0%, color-mix(in srgb, var(--t) 20%, transparent), transparent 70%),
    radial-gradient(40% 45% at 0% 100%, color-mix(in srgb, var(--t) 9%, transparent), transparent 70%);
}
.et-hero .wrap { position: relative; }
.et-hero__grid { display: grid; grid-template-columns: 1.3fr .7fr; gap: clamp(28px, 5vw, 90px); align-items: end; }
.et-hero__title {
  font-family: var(--f-display); font-weight: 400; font-size: clamp(3.6rem, 10.6vw, 11.5rem);
  line-height: .88; letter-spacing: -.03em;
}
.et-hero__title em { color: var(--t-2); }
.et-hero__side { padding-bottom: .6vw; }

/* Triptych of arches */
.et-tri {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(14px, 2.4vw, 36px);
  margin-top: clamp(56px, 8vw, 120px); align-items: end;
}
.et-arch { position: relative; display: block; color: var(--paper); }
.et-arch figure {
  position: relative; aspect-ratio: 4 / 5; overflow: hidden; background: var(--ink-3);
  border-radius: 999px 999px var(--radius) var(--radius);
}
.et-arch--mid figure { aspect-ratio: 4 / 5.7; }
.et-arch figure img {
  width: 100%; height: 100%; object-fit: cover; transform: scale(1.08);
  filter: saturate(.92) brightness(.82); transition: transform 1.6s var(--ease), filter .8s var(--ease);
}
.et-arch figure::after {
  content: ""; position: absolute; inset: 12px; pointer-events: none;
  border: 1px solid color-mix(in srgb, var(--t-2) 55%, transparent); border-radius: 999px 999px 12px 12px;
  transition: inset .9s var(--ease), border-color .5s;
}
.et-arch:hover figure img { transform: scale(1.01); filter: none; }
.et-arch:hover figure::after { inset: 20px; border-color: var(--t-2); }
.et-arch__cap {
  display: flex; align-items: baseline; gap: 14px; margin-top: 18px; padding-top: 14px;
  border-top: 1px solid var(--line-inv);
}
.et-arch__n { font-family: var(--f-display); font-size: 1.2rem; color: var(--t); }
.et-arch__cap b { font-family: var(--f-display); font-weight: 400; font-size: clamp(1.6rem, 2.5vw, 2.5rem); line-height: 1; transition: color .4s; }
.et-arch:hover .et-arch__cap b { color: var(--t-2); }
.et-arch__cap small { margin-left: auto; font-size: 11px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--muted-inv); white-space: nowrap; }

/* ---------- Intro ---------- */
.et-intro { padding-top: clamp(40px, 6vw, 90px); border-top: 1px solid var(--line-inv); }
.et-stats { grid-template-columns: repeat(4, 1fr); }

/* ---------- 01 · L'Équerre ---------- */
.et-lq { background: radial-gradient(65% 55% at 100% 0%, color-mix(in srgb, var(--t) 12%, transparent), transparent 62%), var(--ink); }
.et-lq__ghost {
  position: absolute; right: -9vw; bottom: 4%; width: min(48vw, 680px); height: auto; z-index: 0;
  opacity: .05; filter: brightness(0) invert(1); pointer-events: none;
}
.et-lq__grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 6vw, 110px); align-items: start; margin-top: clamp(32px, 4vw, 56px); }
.et-logo--lq { height: clamp(120px, 13vw, 180px); width: auto; filter: brightness(0) invert(1); margin-bottom: clamp(26px, 3vw, 44px); }
.et-lq__copy .h1 { max-width: 8.5em; }
.et-lq__copy .lead { margin-top: 28px; }
.et-lq__copy .row { gap: 26px; }
.et-lq__media { display: grid; gap: clamp(22px, 3vw, 36px); padding-top: clamp(0px, 7vw, 110px); }
.et-lq__img { aspect-ratio: 3 / 2; }
.et-lq__hours .hours__row h3 { font-size: clamp(1.5rem, 2vw, 2rem); }
.et-lq__hours .hours__row .t { font-size: clamp(1.35rem, 1.8vw, 1.8rem); }

.et-formats {
  display: grid; grid-template-columns: .85fr 1.15fr; gap: clamp(28px, 5vw, 90px); align-items: start;
  margin-top: clamp(72px, 10vw, 150px); padding-top: clamp(40px, 5vw, 64px); border-top: 1px solid var(--line-inv);
}
.et-formats__head .h3 { max-width: 12em; }
.et-formats__list { border-top: 1px solid var(--line-inv); }
.et-formats__list li {
  display: grid; grid-template-columns: 54px 1fr auto; align-items: baseline; gap: 8px 16px;
  padding: clamp(16px, 2vw, 24px) 0; border-bottom: 1px solid var(--line-inv);
}
.et-formats__list .num { font-family: var(--f-display); font-style: italic; font-size: 1.2rem; color: var(--t); }
.et-formats__list b { font-family: var(--f-display); font-weight: 400; font-size: clamp(1.9rem, 3.3vw, 3.3rem); line-height: 1; transition: transform .6s var(--ease), color .4s; }
.et-formats__list li:hover b { transform: translateX(12px); color: var(--t-2); }
.et-formats__list small { color: var(--muted-inv); font-size: 13px; text-align: right; }

/* ---------- AfterWork band ---------- */
.et-aw { position: relative; overflow: hidden; background: var(--et-deep); color: var(--paper); padding-block: clamp(60px, 9vw, 130px); border-block: 1px solid var(--line-inv); }
.et-aw__big {
  font-family: var(--f-display); font-size: clamp(5rem, 19vw, 20rem); line-height: .86; letter-spacing: -.04em; white-space: nowrap;
  color: transparent; -webkit-text-stroke: 1px var(--t); padding-right: .12em;
}
.et-aw__big b { font-weight: 400; font-style: italic; color: var(--t); -webkit-text-stroke: 0; }
.et-aw__big i { font-style: normal; font-size: .28em; vertical-align: middle; color: var(--t); -webkit-text-stroke: 0; margin: 0 .25em; }
.et-aw__row { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; flex-wrap: wrap; margin-top: clamp(24px, 3vw, 44px); }
.et-aw__when { font-family: var(--f-display); font-size: clamp(1.9rem, 3.6vw, 3.6rem); line-height: 1; }
.et-aw__btn { color: var(--paper); --b-hover: var(--t); }
.et-aw .et-aw__btn:hover { --b-hover-fg: var(--t-on); }

/* ---------- 02 · Cocotte ---------- */
.et-cc { --accent-em: var(--t-2); background: var(--cc-bg); color: var(--cc-fg); padding-bottom: clamp(80px, 12vw, 180px); }
.et-cc .lead { color: var(--cc-mute); }
.et-cc__hero { position: relative; height: min(92vh, 980px); min-height: 560px; overflow: hidden; display: flex; align-items: flex-end; }
.et-cc__img { position: absolute; inset: 0; overflow: hidden; }
.et-cc__img img { position: absolute; left: 0; top: -10%; width: 100%; height: 120%; max-width: none; object-fit: cover; object-position: center 55%; }
.et-cc__hero::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(13, 37, 34, .6) 0%, rgba(13, 37, 34, .08) 32%, rgba(13, 37, 34, .55) 50%, rgba(13, 37, 34, .68) 68%, var(--cc-bg) 100%);
}
.et-cc__over { position: relative; z-index: 2; padding-bottom: clamp(36px, 6vw, 90px); }
.et-cc__over .et-ch__head { color: var(--t-2); }
.et-cc__over .h1 { max-width: 9em; text-shadow: 0 2px 40px rgba(0, 0, 0, .3); }
.et-cc__grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: clamp(40px, 6vw, 110px); align-items: center; margin-top: clamp(36px, 5vw, 70px); }
.et-cc__points { margin-top: 36px; border-top: 1px solid var(--cc-line); }
.et-cc__points li { display: grid; grid-template-columns: 54px 1fr; gap: 16px; padding: 22px 0; border-bottom: 1px solid var(--cc-line); }
.et-cc__points .num { font-family: var(--f-display); font-size: 1.3rem; color: var(--t); line-height: 1.4; }
.et-cc__points b { display: block; font-family: var(--f-display); font-weight: 400; font-size: clamp(1.6rem, 2.4vw, 2.3rem); line-height: 1.05; }
.et-cc__points p { margin-top: 6px; color: var(--cc-mute); max-width: 34em; }
.et-cc__copy .row { gap: 22px; }
.et-cc__btn { --b-bg: var(--cc-fg); --b-fg: var(--cc-bg); --b-hover: var(--t); --b-hover-fg: var(--t-on); }
.et-cc .link { color: var(--cc-fg); }
.et-cc__wide { aspect-ratio: 16 / 7; margin-top: clamp(64px, 9vw, 130px); }
.et-cc__wide img { object-position: center 45%; }

/* Chevalet (easel) */
.et-board { position: relative; justify-self: center; width: min(100%, 430px); padding: 14px 0 96px; }
.et-board__sheet {
  position: relative; z-index: 2; text-align: center; color: #0f4f4b; border-radius: 6px;
  padding: clamp(44px, 5vw, 60px) clamp(24px, 3vw, 38px) clamp(34px, 4vw, 44px);
  background: #f4ecda radial-gradient(rgba(15, 79, 75, .06) 1px, transparent 1.2px) 0 0 / 7px 7px;
  box-shadow: inset 0 0 0 10px #f4ecda, inset 0 0 0 11px rgba(15, 79, 75, .35), 0 50px 90px -35px rgba(0, 0, 0, .7);
  transform: rotate(-2.2deg); transition: transform 1s var(--ease);
}
.et-board:hover .et-board__sheet { transform: rotate(0deg) translateY(-4px); }
.et-board__clip {
  position: absolute; top: -13px; left: 50%; width: 110px; height: 26px; transform: translateX(-50%);
  border-radius: 6px; background: linear-gradient(#3a332c, #1b1814); box-shadow: 0 6px 14px -6px rgba(0, 0, 0, .6);
}
.et-board__logo { width: 84%; margin: 0 auto; }
.et-board__label { margin-top: 26px; font-size: 11.5px; font-weight: 600; letter-spacing: .24em; text-transform: uppercase; }
.et-board__txt { margin-top: 12px; font-family: var(--f-display); font-size: clamp(1.35rem, 1.8vw, 1.6rem); line-height: 1.18; color: #173b38; }
.et-board__legs { position: absolute; z-index: 1; left: 50%; bottom: 0; width: 72%; height: 170px; transform: translateX(-50%); }
.et-board__legs::before, .et-board__legs::after {
  content: ""; position: absolute; top: 0; width: 11px; height: 100%; border-radius: 4px;
  background: linear-gradient(90deg, #3b2a20, #5e4535 45%, #33241b);
}
.et-board__legs::before { left: 10%; transform: rotate(9deg); transform-origin: top center; }
.et-board__legs::after { right: 10%; transform: rotate(-9deg); transform-origin: top center; }

/* ---------- 03 · Temporalité ---------- */
.et-tp { background: var(--et-night); color: var(--paper); }
.et-burst {
  position: absolute; left: 50%; top: clamp(120px, 14vw, 220px); width: min(1200px, 160vw); aspect-ratio: 1;
  translate: -50% -50%; pointer-events: none; opacity: .5;
  background: repeating-conic-gradient(from 0deg, color-mix(in srgb, var(--t-2) 75%, transparent) 0deg .4deg, transparent .4deg 3.6deg);
  -webkit-mask: radial-gradient(closest-side, transparent 20%, #000 21%, #000 38%, transparent 70%), repeating-radial-gradient(circle, #000 0 2px, transparent 2px 8px);
  -webkit-mask-composite: source-in;
  mask: radial-gradient(closest-side, transparent 20%, #000 21%, #000 38%, transparent 70%), repeating-radial-gradient(circle, #000 0 2px, transparent 2px 8px);
  mask-composite: intersect;
  animation: et-spin 160s linear infinite;
}
@keyframes et-spin { to { rotate: 360deg; } }
.et-tp__intro { position: relative; display: grid; justify-items: center; gap: clamp(22px, 3vw, 40px); text-align: center; }
.et-logo--tp { width: min(520px, 78vw); filter: brightness(0) invert(1); }
.et-tp__intro .h1 { max-width: 12em; }
.et-tp__grid { display: grid; grid-template-columns: 1.15fr .85fr; gap: clamp(36px, 6vw, 110px); align-items: center; margin-top: clamp(64px, 9vw, 140px); }
.et-tp__media { position: relative; padding: 0 13% 16% 0; }
.et-tp__big { aspect-ratio: 3 / 2; }
.et-tp__small { position: absolute; right: 0; bottom: 0; width: 38%; }
.et-tp__small .img-reveal { aspect-ratio: 3 / 4; box-shadow: 0 0 0 6px var(--et-night), 0 40px 70px -30px rgba(0, 0, 0, .8); }
.et-tp__copy { display: grid; gap: 22px; }
.et-tp__copy > p:not(.lead) { color: var(--muted-inv); max-width: 34em; }
.et-tp__honey { display: grid; gap: 8px; padding-top: 22px; border-top: 1px solid var(--line-inv); font-size: .95rem; }

.et-tp__menu { display: grid; grid-template-columns: 1.1fr .9fr; gap: clamp(32px, 6vw, 110px); align-items: center; margin-top: clamp(80px, 11vw, 170px); }
.mc { position: relative; background: #f3ecdf; color: #1b1814; border-radius: 4px; padding: 12px; box-shadow: 0 60px 110px -45px rgba(0, 0, 0, .9); }
.mc__frame {
  position: relative; text-align: center; padding: clamp(34px, 5vw, 66px) clamp(20px, 4vw, 56px) clamp(26px, 3.5vw, 44px);
  border: 1px solid color-mix(in srgb, var(--t-ink) 60%, transparent); outline: 1px solid color-mix(in srgb, var(--t-ink) 30%, transparent); outline-offset: -8px;
}
.mc__kicker { font-size: 11px; font-weight: 600; letter-spacing: .32em; text-transform: uppercase; color: var(--t-ink); }
.mc__title { margin-top: 12px; font-family: var(--f-display); font-weight: 400; font-size: clamp(2.5rem, 4.2vw, 4rem); line-height: 1; }
.mc__title em { color: var(--t-ink); }
.mc__sig { margin-top: 6px; font-family: var(--f-display); font-style: italic; font-size: 1.15rem; color: var(--muted); }
.mc__head { padding-bottom: clamp(20px, 3vw, 34px); }
.mc-course { padding: clamp(22px, 3vw, 34px) 0; border-top: 1px solid rgba(27, 24, 20, .12); }
.mc-course h4 { margin-bottom: 14px; font-size: 11px; font-weight: 600; letter-spacing: .32em; text-transform: uppercase; color: var(--t-ink); }
.mc-course p { max-width: 24em; margin-inline: auto; font-family: var(--f-display); font-size: clamp(1.25rem, 1.75vw, 1.6rem); line-height: 1.2; }
.mc-or { display: flex; align-items: center; justify-content: center; gap: 12px; margin: 10px 0; font-family: var(--f-display); font-style: italic; color: var(--t-ink); }
.mc-or::before, .mc-or::after { content: ""; width: 34px; height: 1px; background: currentColor; opacity: .5; }
.mc__foot { display: grid; gap: 10px; padding-top: 24px; border-top: 1px solid rgba(27, 24, 20, .12); font-size: 13px; color: var(--muted); }
.mc__foot span { margin-right: 6px; font-size: 11px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--t-ink); }
.mc__note { font-style: italic; }

.et-priv { display: grid; gap: 18px; align-content: start; }
.et-priv .h2 { max-width: 10em; }
.et-priv__big { display: flex; align-items: baseline; gap: 14px; margin-top: 8px; }
.et-priv__big b { font-family: var(--f-display); font-weight: 400; font-size: clamp(6rem, 12vw, 11rem); line-height: .8; color: var(--t-2); letter-spacing: -.03em; }
.et-priv__big small { font-size: 12px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--muted-inv); }
.et-priv > p.muted-inv { max-width: 30em; }

.et-plates { margin-top: clamp(80px, 11vw, 160px); }
.et-plates__row { display: grid; grid-template-columns: repeat(5, 1fr); gap: clamp(10px, 1.6vw, 22px); margin-top: 28px; align-items: start; }
.et-plate { aspect-ratio: 3 / 4; border-radius: 16px; }
.et-plate:nth-child(even) { margin-top: clamp(30px, 6vw, 90px); }

/* ---------- 04 · Carte des boissons ---------- */
.et-dr { background: var(--ink-2); }
.drinks { --u-fg: var(--paper); --u-soft: var(--ink-2); margin-top: clamp(40px, 5vw, 72px); }
.drinks__tabs { flex-wrap: nowrap; margin-top: 0; box-shadow: inset 0 0 0 1px var(--line-inv); }
.drinks .tab { color: var(--paper); box-shadow: inset 0 0 0 1px rgba(246, 241, 232, .18); }
.drinks .tab:hover { box-shadow: inset 0 0 0 1px var(--t); }
.drinks .tab[aria-selected="true"] { background: var(--t); color: var(--t-on); box-shadow: none; }
.drinks__grid { display: grid; grid-template-columns: .78fr 1.22fr; gap: clamp(28px, 5vw, 90px); margin-top: clamp(28px, 4vw, 52px); align-items: start; }
.drinks__aside { position: sticky; top: calc(var(--header-h) + 90px); }
.drinks__img { aspect-ratio: 4 / 5; }
.drinks__cap { display: grid; gap: 4px; margin-top: 16px; font-size: 13px; color: var(--muted-inv); }
.drinks__cap b { font-family: var(--f-display); font-weight: 400; font-size: 1.5rem; line-height: 1.1; color: var(--paper); }

.dr-panel { display: block; animation: et-pop .7s var(--ease) both; }
.js .dr-panel[hidden] { display: none; }
html:not(.js) .drinks__tabs { display: none; }
html:not(.js) .dr-panel + .dr-panel { margin-top: 64px; }
@keyframes et-pop { from { opacity: 0; transform: translateY(18px); } }
.dr-panel__head { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding-bottom: 18px; border-bottom: 1px solid rgba(246, 241, 232, .5); }
.dr-panel__head h3 { font-family: var(--f-display); font-weight: 400; font-style: italic; font-size: clamp(2.4rem, 4.4vw, 4.4rem); line-height: 1; }
.dr-panel__head span { flex-shrink: 0; font-size: 11.5px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--t); }
.dr-row {
  display: grid; grid-template-columns: minmax(0, 1fr) repeat(var(--cols, 1), minmax(72px, auto));
  gap: 6px 22px; align-items: baseline; padding: 16px 0; border-bottom: 1px solid var(--line-inv);
}
.dr-row--head { padding: 14px 0 10px; font-size: 11px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--muted-inv); }
.dr-row--head span:not(:first-child) { text-align: right; }
.dr-name b { font-family: var(--f-display); font-weight: 400; font-size: clamp(1.35rem, 1.9vw, 1.8rem); line-height: 1.1; transition: color .3s; }
.dr-row:not(.dr-row--head):hover .dr-name b { color: var(--t-2); }
.dr-det { display: block; margin-top: 4px; font-size: 12.5px; color: var(--muted-inv); letter-spacing: .01em; }
.dr-price { text-align: right; font-size: 15px; font-weight: 500; white-space: nowrap; }
.dr-lbl { display: none; }
.dr-na { color: var(--muted-inv); opacity: .55; }
.dr-group { margin-top: 34px; padding-bottom: 6px; font-size: 12px; font-weight: 600; letter-spacing: .24em; text-transform: uppercase; color: var(--t); }
.dr-row--head + .dr-group { margin-top: 20px; }
.dr-more { margin-top: 28px; }
.drinks__legal { margin-top: 40px; font-size: 13px; color: var(--muted-inv); line-height: 1.7; }
.drinks__legal strong { color: var(--paper); font-weight: 500; }

/* ---------- 05 · Rhum M.A.D ---------- */
/* overflow: clip on both axes — the floating line-art never bleeds into the neighbouring chapters */
.et-mad { overflow: clip; background: radial-gradient(60% 45% at 50% 0%, color-mix(in srgb, var(--t) 20%, transparent), transparent 70%), var(--mad-bg); color: var(--paper); }
/* Gold line-art (cacao pod, vanilla flower) from the M.A.D label: decorative, behind the photos, never under text.
   Positioned with top/left only: main.js writes the parallax translate into `transform`. */
.et-mad__illu { position: absolute; z-index: -1; height: auto; max-width: none; opacity: .45; pointer-events: none; user-select: none; }
/* Banner: M.A.D logo over the baobabs. No text on it — the title sits below. */
.et-mad__top { position: relative; margin-top: clamp(28px, 4vw, 56px); }
.et-mad__banner { aspect-ratio: 2000 / 676; border-radius: var(--radius); box-shadow: 0 50px 90px -50px rgba(0, 0, 0, .8); }
.et-mad__banner img { object-position: 50% 50%; }
/* The real M.A.D seal, cut out of the banner and layered exactly over it (centre 50% / 49.83%, 65.66% of the
   image height — true at every breakpoint because the banner is always cropped by its height). It lifts off the
   photo, tilts with the pointer like a medal and catches a passing light. */
.et-mad__banner { perspective: 900px; }
.et-mad__banner::after { content: ""; position: absolute; left: 50%; top: 50%; width: 34%; height: 90%; transform: translate(-50%, -50%);
  background: radial-gradient(closest-side, rgba(0, 0, 0, .38), transparent); pointer-events: none; z-index: 1; }
.et-mad__seal { position: absolute; z-index: 2; left: 50%; top: 49.83%; height: 65.66%; aspect-ratio: 589 / 568;
  transform: translate(-50%, -50%) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) scale(var(--ss, 1.035));
  transition: transform .6s var(--ease); transform-style: preserve-3d; pointer-events: none;
  filter: drop-shadow(0 18px 22px rgba(0, 0, 0, .45)) drop-shadow(0 3px 5px rgba(0, 0, 0, .35)); }
.js .img-reveal[data-reveal] .et-mad__seal img, .et-mad__seal img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; clip-path: none; transform: none; }
.et-mad__seal::after { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(115deg, transparent 38%, rgba(255, 250, 225, .55) 50%, transparent 62%) 0 0 / 260% 100% no-repeat;
  -webkit-mask: url("../../img/mad/logo-mad.webp") center / contain no-repeat; mask: url("../../img/mad/logo-mad.webp") center / contain no-repeat;
  animation: madSheen 6.5s var(--ease-in-out) 1.2s infinite; mix-blend-mode: screen; }
@keyframes madSheen { 0% { background-position: 130% 0; } 45%, 100% { background-position: -130% 0; } }
.et-mad__banner.is-tilting .et-mad__seal { --ss: 1.07; transition-duration: .25s; }
@media (prefers-reduced-motion: reduce) { .et-mad__seal { transform: translate(-50%, -50%) scale(1.035) !important; } .et-mad__seal::after { animation: none; opacity: 0; } }
/* The vanilla flower rises from behind the banner's right end (its cut stem stays hidden behind the photo) */
.et-mad__illu--vanille { right: calc(-.5 * var(--gutter)); top: calc(-1 * clamp(110px, 14vw, 210px)); width: clamp(220px, 29vw, 420px); rotate: 8deg; }
.et-mad__head { margin-top: clamp(36px, 4.5vw, 70px); }
.et-mad__tag { font-family: var(--f-display); font-weight: 400; font-size: clamp(2.4rem, 4.6vw, 4.8rem); line-height: 1; letter-spacing: -.01em; max-width: 14em; }
.et-mad__tag em { color: var(--t-2); }
/* Bottle photo next to the lead + the four facts */
.et-mad__product { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 6vw, 110px); align-items: center; margin-top: clamp(56px, 7vw, 110px); }
.et-mad__visual { position: relative; padding-left: clamp(48px, 9vw, 140px); }
.et-mad__bottle { aspect-ratio: 1; box-shadow: 0 60px 100px -50px rgba(0, 0, 0, .85); }
/* The cacao pod is cut on its left edge: it is pinned to the section's left edge (= viewport edge, also above 1440px),
   tucks under the photo, and never grows taller than 86% of the photo (100% - padding = the photo's side). */
.et-mad__illu--cacao {
  left: calc(-1 * var(--gutter) - max(0px, (100vw - var(--max)) / 2)); top: 10%;
  width: min(calc(var(--gutter) + max(0px, (100vw - var(--max)) / 2) + clamp(48px, 9vw, 140px) + 38%), calc((100% - clamp(48px, 9vw, 140px)) * .86));
}
.et-mad__copy { display: grid; gap: clamp(28px, 3.4vw, 48px); }
.et-mad__copy .lead { max-width: 34em; }
.et-page .et-mad__facts { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 0; }
.et-page .et-mad__facts .stat { padding: clamp(20px, 2.4vw, 32px) 16px clamp(20px, 2.4vw, 32px) 0; border-right: 0; border-left: 0; border-bottom: 1px solid var(--line-inv); }
.et-page .et-mad__facts .stat:nth-child(even) { padding-left: clamp(16px, 2.4vw, 32px); border-left: 1px solid var(--line-inv); }
.et-page .et-mad__facts .stat:nth-last-child(-n + 2) { border-bottom: 0; }
.mad-scale { display: flex; align-items: center; gap: 16px; margin-top: clamp(56px, 7vw, 100px); font-size: 11px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--muted-inv); }
.mad-scale i { flex: 1; height: 3px; border-radius: 3px; background: linear-gradient(90deg, #141110, #3b2219 33%, #a7b196 66%, #f0e3c6); box-shadow: 0 0 0 1px rgba(246, 241, 232, .14); }
.mad-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(12px, 1.4vw, 20px); margin-top: 22px; }
.mad-card { position: relative; }
.mad-card__frame {
  position: relative; isolation: isolate; overflow: hidden; height: 100%;
  display: flex; flex-direction: column; gap: 14px; padding: clamp(22px, 2vw, 30px);
  background: var(--c-bg); color: var(--c-fg); border-radius: 20px;
  box-shadow: inset 0 0 0 1px var(--c-line); transition: transform .8s var(--ease), box-shadow .8s var(--ease);
}
.mad-card__frame::before {
  content: ""; position: absolute; inset: 0; z-index: -1; opacity: 0; transition: opacity .6s;
  background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 0%), color-mix(in srgb, var(--c-ac) 26%, transparent), transparent 62%);
}
.mad-card__frame::after { content: ""; position: absolute; inset: 8px; border: 1px solid var(--c-line); border-radius: 14px; pointer-events: none; }
.mad-card:hover .mad-card__frame { transform: translateY(-8px); box-shadow: inset 0 0 0 1px var(--c-line), 0 44px 80px -34px rgba(0, 0, 0, .75); }
.mad-card:hover .mad-card__frame::before { opacity: 1; }
.mad-card__top { display: flex; justify-content: space-between; gap: 8px; font-size: 11px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--c-mute); }
/* Bottle photo: framed by the card's own flavour colour */
.mad-card__photo { position: relative; aspect-ratio: 1; margin-top: 4px; overflow: hidden; border-radius: 12px; background: color-mix(in srgb, var(--c-fg) 8%, var(--c-bg)); }
.mad-card__photo::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 1px var(--c-line); pointer-events: none; }
.mad-card__photo img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.4s var(--ease); }
.mad-card:hover .mad-card__photo img { transform: scale(1.05); }
.mad-card__origin { margin-top: 4px; font-size: 11px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--c-ac); }
.mad-card__name { font-family: var(--f-display); font-weight: 400; font-size: clamp(2.3rem, 2.9vw, 3.1rem); line-height: .95; letter-spacing: -.01em; }
.mad-card__name em { color: var(--c-ac); }
.mad-card__notes { display: flex; flex-wrap: wrap; gap: 6px; }
.mad-card__notes li { font-size: 12px; padding: 5px 10px; border-radius: 999px; box-shadow: inset 0 0 0 1px var(--c-line); }
.mad-card__desc { font-size: 14.5px; line-height: 1.55; color: var(--c-mute); }
.mad-card__moment { margin-top: auto; padding-top: 6px; font-family: var(--f-display); font-style: italic; font-size: 1.28rem; line-height: 1.2; }
.mad-card__foot { display: flex; justify-content: space-between; gap: 12px; padding-top: 14px; border-top: 1px solid var(--c-line); }
.mad-card__foot span { display: grid; gap: 2px; }
.mad-card__foot span:last-child { text-align: right; }
.mad-card__foot small { font-size: 10.5px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--c-mute); }
.mad-card__foot b { font-family: var(--f-display); font-weight: 400; font-size: 1.7rem; line-height: 1; }

.mad-price {
  display: flex; align-items: center; justify-content: space-between; gap: 24px 40px; flex-wrap: wrap;
  margin-top: clamp(40px, 5vw, 72px); padding: clamp(24px, 3vw, 38px); border-radius: var(--radius);
  box-shadow: inset 0 0 0 1px var(--line-inv); background: rgba(246, 241, 232, .02);
}
.mad-price .eyebrow { color: var(--t); }
.mad-price__v { display: flex; gap: clamp(28px, 5vw, 72px); flex-wrap: wrap; }
.mad-price__v span { display: grid; gap: 6px; }
.mad-price__v small { font-size: 11px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--muted-inv); }
.mad-price__v b { font-family: var(--f-display); font-weight: 400; font-size: clamp(2.8rem, 4.6vw, 4.6rem); line-height: 1; color: var(--t-2); }
.et-legal { margin-top: 26px; text-align: center; font-size: 13px; color: var(--muted-inv); }

/* ---------- Infos & privatisation ---------- */
.et-infos { border-top: 1px solid var(--line-inv); }
.et-infos__grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 6vw, 110px); align-items: stretch; }
.et-contact a { border-bottom-color: var(--line-inv); }
.et-contact a small { color: var(--muted-inv); }
.et-privcard {
  position: relative; isolation: isolate; overflow: hidden; min-height: 640px; border-radius: var(--radius);
  display: flex; flex-direction: column; justify-content: flex-end; gap: 16px; padding: clamp(24px, 3vw, 40px); color: var(--paper);
}
.et-privcard > img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; transition: transform 1.6s var(--ease); }
.et-privcard:hover > img { transform: scale(1.05); }
.et-privcard::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(10, 9, 8, .05) 15%, rgba(10, 9, 8, .9) 72%); }
.et-privcard h3 { font-family: var(--f-display); font-weight: 400; font-size: clamp(2.3rem, 3.8vw, 3.8rem); line-height: 1; }
.et-privcard h3 em { color: var(--t-2); }
.et-privcard ul { display: grid; gap: 8px; margin-bottom: 8px; }
.et-privcard li { display: flex; gap: 10px; align-items: baseline; color: rgba(246, 241, 232, .86); }
.et-privcard li::before { content: "✦"; color: var(--t); font-size: 10px; }
.et-privcard .btn { width: fit-content; }
.et-privcard:hover .btn::before { transform: translateY(0); }
.et-privcard:hover .btn { color: var(--ink); }

/* ---------- Sticky chapter nav ---------- */
.et-toc {
  position: fixed; z-index: 60; left: 50%; bottom: calc(18px + env(safe-area-inset-bottom, 0px)); display: flex; padding: 0;
  max-width: calc(100vw - 32px);
  border-radius: 999px; background: color-mix(in srgb, var(--et-deep) 80%, transparent);
  backdrop-filter: blur(14px) saturate(1.3); -webkit-backdrop-filter: blur(14px) saturate(1.3);
  box-shadow: inset 0 0 0 1px var(--line-inv), 0 20px 40px -20px rgba(0, 0, 0, .7);
  transform: translate(-50%, 160%); opacity: 0; transition: transform .7s var(--ease), opacity .5s var(--ease);
}
.et-toc__track {
  position: relative; display: flex; gap: 2px; min-width: 0; padding: 6px; overflow-x: auto; scrollbar-width: none; border-radius: 999px;
  --fade-l: #000; --fade-r: #000;
  -webkit-mask-image: linear-gradient(90deg, var(--fade-l), #000 28px, #000 calc(100% - 28px), var(--fade-r));
  mask-image: linear-gradient(90deg, var(--fade-l), #000 28px, #000 calc(100% - 28px), var(--fade-r));
}
.et-toc__track::-webkit-scrollbar { display: none; }
/* Edge fades only while there is more to scroll that way (classes set by etage.js) */
.et-toc__track.is-more-l { --fade-l: transparent; }
.et-toc__track.is-more-r { --fade-r: transparent; }
.et-toc.is-on { transform: translate(-50%, 0); opacity: 1; }
.et-toc a {
  display: flex; align-items: center; gap: 8px; height: 38px; padding: 0 16px; border-radius: 999px; flex-shrink: 0;
  font-size: 13px; font-weight: 500; white-space: nowrap; color: rgba(246, 241, 232, .74); transition: background .35s, color .35s;
}
.et-toc a .num { font-family: var(--f-display); font-size: 14px; color: var(--t); transition: color .35s; }
.et-toc a:hover { color: var(--t-2); }
.et-toc a.is-cur { background: var(--t); color: var(--t-on); }
.et-toc a.is-cur .num { color: var(--t-on); }
html:not(.js) .et-toc { display: none; }

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .et-burst { animation: none; }
  .et-page .marquee__track { animation: none; }
}

/* ---------- Responsive ---------- */
@media (max-width: 1100px) {
  .mad-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 900px) {
  .et-hero__grid, .et-lq__grid, .et-formats, .et-cc__grid, .et-tp__grid, .et-tp__menu,
  .drinks__grid, .et-mad__product, .et-infos__grid { grid-template-columns: 1fr; }
  .et-mad__banner { aspect-ratio: 2 / 1; }
  .et-mad__visual { width: min(100%, 620px); }
  .et-tri {
    grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 70%;
    overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none;
    margin-inline: calc(-1 * var(--gutter)); padding-inline: var(--gutter); scroll-padding-inline: var(--gutter);
  }
  .et-tri::-webkit-scrollbar { display: none; }
  .et-arch { scroll-snap-align: start; }
  .et-arch figure, .et-arch--mid figure { aspect-ratio: 4 / 5; }
  .et-stats { grid-template-columns: repeat(2, 1fr); }
  .et-page .et-stats .stat:last-child { grid-column: auto; }
  .et-page .et-stats .stat:nth-last-child(-n + 2) { border-bottom: 0; }
  .et-lq__media { padding-top: 0; }
  .et-lq__ghost { width: 90vw; right: -30vw; }
  .et-formats__list small { grid-column: 2; text-align: left; }
  .et-cc__hero { height: 78vh; min-height: 480px; }
  .et-board { margin-top: 16px; }
  .et-cc__wide { aspect-ratio: 4 / 3; }
  .drinks__aside { order: 2; position: relative; top: auto; display: grid; grid-template-columns: 38% 1fr; gap: 18px; align-items: end; }
  .drinks__cap { margin-top: 0; }
  .et-plates__row {
    grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 56%;
    overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none;
    margin-inline: calc(-1 * var(--gutter)); padding-inline: var(--gutter); scroll-padding-inline: var(--gutter);
  }
  .et-plates__row::-webkit-scrollbar { display: none; }
  .et-plate { scroll-snap-align: start; }
  .et-plate:nth-child(even) { margin-top: 36px; }
  .et-privcard { min-height: 540px; }
  .et-privcard::after { background: linear-gradient(180deg, rgba(10, 9, 8, .15) 0%, rgba(10, 9, 8, .75) 20%, rgba(10, 9, 8, .92) 55%); }
}
@media (max-width: 640px) {
  .et-hero__title { font-size: clamp(3.4rem, 17vw, 5.4rem); }
  .et-arch__cap { flex-wrap: wrap; gap: 4px 12px; }
  .et-arch__cap small { margin-left: 0; width: 100%; }
  .et-tri { grid-auto-columns: 78%; }
  .et-formats__list li { grid-template-columns: 38px 1fr; }
  .et-tp__media { padding: 0 8% 22% 0; }
  .et-tp__small { width: 44%; }
  .et-mad__banner { aspect-ratio: 3 / 2; } /* crops the baobabs, keeps the whole logo */
  .et-mad__illu--vanille { display: none; } /* no free corner beside the chapter heading on a phone */
  .et-mad__visual { padding-left: 18%; }
  .et-mad__illu--cacao { top: 10%; width: calc(var(--gutter) + 18% + 30%); } /* stays within the photo's height, parallax included */
  .mad-grid {
    grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 86%;
    overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none;
    margin-inline: calc(-1 * var(--gutter)); padding: 12px var(--gutter) 18px; scroll-padding-inline: var(--gutter);
  }
  .mad-grid::-webkit-scrollbar { display: none; }
  .mad-card { scroll-snap-align: start; }
  .mad-card:hover .mad-card__frame { transform: none; }
  .dr-panel--multi .dr-row { grid-template-columns: repeat(var(--cols), minmax(0, 1fr)); gap: 8px 12px; }
  .dr-panel--multi .dr-name { grid-column: 1 / -1; }
  .dr-panel--multi .dr-row--head { display: none; }
  .dr-panel--multi .dr-price { text-align: left; display: grid; gap: 2px; }
  .dr-panel--multi .dr-lbl { display: block; font-size: 10px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--muted-inv); }
  .dr-row { gap: 6px 14px; }
  .drinks__aside { grid-template-columns: 42% 1fr; }
  .et-toc__track { gap: 0; padding: 4px; }
  .et-toc a { height: 40px; padding: 0 8px; font-size: 12px; }
  .et-toc a .num { display: none; }
  .et-privcard { min-height: 520px; }
}