/* La Cassole Rose — feuille du design, portée telle quelle */
/* La Cassole Rose — feuille de style unique.
   Thème sombre par défaut sur :root, thème clair sur :root[data-theme="light"]. */

*, *::before, *::after { border-radius: 0 !important; box-sizing: border-box; }
  :root {
    --ground: #100e0c;
    --ground-2: #171310;
    --ground-3: #1e1815;
    --ink: #f2e7da;
    --ink-2: #c8b4a3;
    --muted: #94806f;
    --brique: #cf6f52;
    --brique-deep: #8f3f2b;
    --cuivre: #c99a5f;
    --violette: #a583cf;
    --sauge: #9cb28f;
    --line: rgba(201, 154, 95, 0.24);
    --line-soft: rgba(242, 231, 218, 0.11);
    --on-brique: #16100d;
    --on-ink: #16100d;
    --shade: 16, 14, 12;
    --media: brightness(0.44) saturate(0.78) contrast(1.08);
    --media-hero: saturate(0.85) contrast(1.05) brightness(0.62);
    --gutter: clamp(16px, 5vw, 92px);
    --maxw: 1440px;
  }
  :root[data-theme="light"] {
    --ground: #fbf7f2;
    --ground-2: #f3ece2;
    --ground-3: #eae0d3;
    --ink: #231711;
    --ink-2: #5a4638;
    --muted: #7d6653;
    --brique: #a3482f;
    --brique-deep: #8a3a25;
    --cuivre: #8a5a28;
    --violette: #59397f;
    --sauge: #4e6146;
    --line: rgba(163, 72, 47, 0.28);
    --line-soft: rgba(35, 23, 17, 0.14);
    --on-brique: #fdf8f3;
    --on-ink: #fdf8f3;
    --shade: 250, 246, 240;
    --media: saturate(0.9) contrast(0.96) brightness(1.08);
    --media-hero: saturate(0.88) contrast(0.94) brightness(1.12);
  }
  html { background: var(--ground); }
  body {
    margin: 0;
    background: var(--ground);
    color: var(--ink);
    font-family: "Archivo", "Helvetica Neue", Arial, sans-serif;
    font-size: 16px;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
  }
  img { max-width: 100%; display: block; }
  a { color: inherit; text-decoration: none; }
  ::selection { background: var(--brique); color: #150f0c; }
  :focus-visible { outline: 2px solid var(--violette); outline-offset: 3px; }

  .wrap { max-width: var(--maxw); margin: 0 auto; padding-inline: var(--gutter); }
  .eyebrow {
    font-size: 11px; font-weight: 600; letter-spacing: 0.26em; text-transform: uppercase;
    color: var(--cuivre); margin: 0;
  }
  .eyebrow--muted { color: var(--muted); }
  .serif { font-family: "Fraunces", Georgia, serif; font-weight: 300; }
  .rule { height: 1px; background: var(--line); border: 0; margin: 0; }
  .num { font-variant-numeric: tabular-nums; }

  /* ---------- nav ---------- */
  .nav {
    position: fixed; top: 0; left: 0; right: 0; z-index: 60;
    padding-top: env(safe-area-inset-top, 0px);
    background: linear-gradient(to bottom, rgba(var(--shade), 0.92), rgba(var(--shade), 0));
    transition: background 400ms ease, border-color 400ms ease;
    border-bottom: 1px solid transparent;
  }
  .nav.is-solid { background: rgba(var(--shade), 0.94); border-bottom-color: var(--line); backdrop-filter: blur(8px); }
  .nav__in {
    max-width: var(--maxw); margin: 0 auto; padding-inline: var(--gutter);
    height: 72px; display: flex; align-items: center; gap: 24px;
  }
  .brandmark { display: flex; align-items: center; gap: 12px; margin-right: auto; }
  .brandmark svg { width: 26px; height: 26px; flex: none; }
  .brandmark span {
    font-size: 12px; font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase;
  }
  .nav__links { display: flex; gap: 28px; }
  .nav__links a {
    font-size: 11px; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase;
    color: var(--ink-2); padding: 6px 0; border-bottom: 1px solid transparent; transition: color 200ms, border-color 200ms;
  }
  .nav__links a:hover { color: var(--ink); border-bottom-color: var(--brique); }
  .btn {
    display: inline-block; font-size: 11px; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase;
    padding: 13px 22px; border: 1px solid var(--brique);
    background-color: var(--brique); color: var(--on-brique);
    cursor: pointer; font-family: inherit;
  }
  .btn--ghost { background-color: transparent; color: var(--ink); border-color: var(--line-soft); }
  @media (max-width: 860px) { .nav__links { display: none; } }

  /* ---------- hero ---------- */
  .hero { position: relative; height: clamp(600px, 88vh, 900px); overflow: hidden; background: #0c0a09; }
  .hero canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
  .hero__fallback {
    position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
    filter: var(--media-hero);
  }
  .hero__veil {
    position: absolute; inset: 0;
    background:
      linear-gradient(to top, rgba(var(--shade), 0.95) 4%, rgba(var(--shade), 0.25) 46%, rgba(var(--shade), 0.6) 100%),
      linear-gradient(to right, rgba(var(--shade), 0.72), rgba(var(--shade), 0) 62%);
  }
  .hero__in {
    position: relative; z-index: 2; height: 100%;
    max-width: var(--maxw); margin: 0 auto; padding-inline: var(--gutter);
    display: flex; flex-direction: column; justify-content: flex-end;
    padding-bottom: clamp(28px, 5vh, 56px);
  }
  .hero h1 {
    font-size: clamp(52px, 12.4vw, 184px);
    line-height: 0.86; font-weight: 800; letter-spacing: -0.035em;
    margin: 18px 0 0; text-wrap: balance; text-transform: none;
  }
  .hero h1 em { font-family: "Fraunces", Georgia, serif; font-style: italic; font-weight: 300; letter-spacing: -0.02em; color: var(--brique); }
  .hero__lede {
    font-family: "Fraunces", Georgia, serif; font-weight: 300; font-size: clamp(17px, 2vw, 22px);
    line-height: 1.5; color: var(--ink-2); max-width: 46ch; margin: 22px 0 0;
  }
  .hero__cta { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 30px; }
  .hero__meta {
    display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
    border-top: 1px solid var(--line); margin-top: clamp(24px, 4vh, 48px);
  }
  .hero__meta div { padding: 16px 18px 2px 0; }
  .hero__meta dt { font-size: 10px; letter-spacing: 0.24em; text-transform: uppercase; color: var(--muted); margin: 0 0 6px; }
  .hero__meta dd { margin: 0; font-size: 13px; color: var(--ink-2); }
  @media (max-width: 700px) {
    .hero__meta { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .hero__meta div { padding-right: 10px; }
  }
  .scrollcue {
    position: absolute; right: var(--gutter); bottom: clamp(28px, 5vh, 56px); z-index: 3;
    writing-mode: vertical-rl; font-size: 10px; letter-spacing: 0.3em; text-transform: uppercase;
    color: var(--muted); display: flex; align-items: center; gap: 12px;
  }
  .scrollcue::after { content: ""; width: 1px; height: 56px; background: linear-gradient(var(--cuivre), transparent); }
  @media (max-width: 860px) { .scrollcue { display: none; } }

  /* ---------- manifeste ---------- */
  .manifeste { padding-block: clamp(80px, 13vh, 168px); border-bottom: 1px solid var(--line-soft); }
  .manifeste p {
    font-family: "Fraunces", Georgia, serif; font-weight: 300;
    font-size: clamp(24px, 4.2vw, 54px); line-height: 1.22; letter-spacing: -0.015em;
    margin: 0; max-width: 20ch;
  }
  .manifeste .line { display: block; overflow: hidden; }
  .manifeste p mark { background: none; color: var(--brique); font-style: italic; }
  .manifeste__foot { display: flex; flex-wrap: wrap; gap: 40px; margin-top: 54px; align-items: flex-start; }
  .manifeste__foot p { font-family: "Archivo", sans-serif; font-size: 15px; line-height: 1.75; color: var(--ink-2); max-width: 44ch; font-weight: 400; }

  /* ---------- maison ---------- */
  .maison { padding-block: clamp(72px, 12vh, 150px); }
  .maison__grid { display: grid; grid-template-columns: 1.08fr 0.92fr; gap: clamp(28px, 5vw, 80px); align-items: center; }
  .figure { position: relative; overflow: hidden; }
  .figure img { width: 100%; height: 100%; object-fit: cover; will-change: transform; }
  .figure--tall { aspect-ratio: 4 / 5; }
  .figure--wide { aspect-ratio: 16 / 10; }
  .figure--carre { aspect-ratio: 1 / 1; max-height: 620px; }
  .figure--portrait { aspect-ratio: 3 / 4; max-height: 640px; }
  .figure--paysage { aspect-ratio: 4 / 3; }
  .figure figcaption {
    position: absolute; left: 0; bottom: 0; padding: 10px 14px;
    background: rgba(var(--shade), 0.88); border-top: 1px solid var(--brique);
    font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--ink-2);
  }
  h2.section-title {
    font-size: clamp(30px, 4.4vw, 60px); line-height: 1.02; font-weight: 700; letter-spacing: -0.03em;
    margin: 14px 0 0; text-wrap: balance;
  }
  .body-copy { font-size: 16px; line-height: 1.8; color: var(--ink-2); max-width: 58ch; }
  .stats { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--line); margin-top: 36px; }
  .stats div { padding-top: 18px; padding-right: 12px; }
  .stats b { display: block; font-size: clamp(26px, 3vw, 40px); font-weight: 700; letter-spacing: -0.03em; color: var(--cuivre); }
  .stats span { font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--muted); }
  @media (max-width: 900px) { .maison__grid { grid-template-columns: 1fr; } }
  /* ---------- signature / three ---------- */
  .signature { position: relative; background: var(--ground-2); border-block: 1px solid var(--line-soft); }
  .signature__in { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(24px, 4vw, 64px); align-items: center; padding-block: clamp(64px, 10vh, 120px); }
  .stage { position: relative; display: flex; flex-direction: column; aspect-ratio: 1 / 1; max-height: 620px; background:
      radial-gradient(60% 60% at 50% 42%, rgba(207,111,82,0.14), rgba(var(--shade), 0) 70%); }
  .stage canvas { width: 100%; flex: 1 1 auto; min-height: 0; display: block; }
  .stage__hint {
    position: absolute; top: 0; right: 0; z-index: 2;
    font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase;
    color: var(--ink); border: 1px solid var(--line);
    padding: 7px 11px; pointer-events: none; background: rgba(var(--shade), 0.82);
  }
  .stage__label {
    flex: 0 0 auto; margin-top: 14px; font-size: 11px; letter-spacing: 0.16em;
    text-transform: uppercase; color: var(--ink-2); border-top: 1px solid var(--line); padding-top: 12px; width: 100%;
    display: flex; justify-content: space-between; gap: 12px;
  }
  .signature__copy .dish-name {
    font-family: "Fraunces", Georgia, serif; font-weight: 300; font-size: clamp(30px, 4.6vw, 62px);
    line-height: 1.04; letter-spacing: -0.02em; margin: 14px 0 0;
  }
  .spec { border-top: 1px solid var(--line-soft); display: grid; grid-template-columns: 160px 1fr; gap: 0 24px; padding: 14px 0; font-size: 14px; }
  .spec dt { color: var(--muted); font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; padding-top: 3px; }
  .spec dd { margin: 0; color: var(--ink-2); }
  @media (max-width: 900px) { .signature__in { grid-template-columns: 1fr; } .stage { aspect-ratio: 4 / 3; } }

  /* ---------- carte (horizontal) ---------- */
  .carte { background: var(--ground); overflow: hidden; }
  .carte__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; padding-block: clamp(56px, 9vh, 104px) 32px; flex-wrap: wrap; }
  .track { display: flex; gap: 0; align-items: stretch; will-change: transform; }
  .plat {
    flex: 0 0 clamp(268px, 33vw, 420px); border-left: 1px solid var(--line-soft);
    padding: 0 clamp(16px, 2vw, 30px) 28px; display: flex; flex-direction: column;
  }
  .plat:last-child { border-right: 1px solid var(--line-soft); }
  .plat__img { aspect-ratio: 3 / 4; overflow: hidden; margin-bottom: 22px; background: var(--ground-3); }
  .plat__img img { width: 100%; height: 100%; object-fit: cover; filter: saturate(0.9) contrast(1.04); transition: transform 900ms cubic-bezier(.16,.84,.32,1), filter 600ms; }
  .plat:hover .plat__img img { transform: scale(1.06); filter: saturate(1.02) contrast(1.06); }
  .plat__tag { font-size: 10px; letter-spacing: 0.24em; text-transform: uppercase; color: var(--cuivre); }
  .plat__tag--vege { color: var(--sauge); }
  .plat h3 { font-family: "Fraunces", Georgia, serif; font-weight: 400; font-size: clamp(19px, 2vw, 25px); line-height: 1.22; margin: 10px 0 0; }
  .plat p { font-family: "Fraunces", Georgia, serif; font-weight: 300; font-size: 14.5px; line-height: 1.6; color: var(--ink-2); margin: 10px 0 0; }
  .plat__price { margin-top: auto; padding-top: 20px; display: flex; align-items: baseline; justify-content: space-between; border-top: 1px solid var(--line-soft); }
  .plat__price b { font-size: 20px; font-weight: 600; color: var(--cuivre); }
  .plat__price span { font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--muted); }
  .carte__foot { padding-block: 28px clamp(56px, 9vh, 104px); display: flex; gap: 20px; flex-wrap: wrap; align-items: center; justify-content: space-between; border-top: 1px solid var(--line-soft); margin-top: 34px; }

  /* ---------- marche ---------- */
  .marche { padding-block: clamp(72px, 12vh, 150px); border-top: 1px solid var(--line-soft); }
  .marche__grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: clamp(14px, 2vw, 26px); margin-top: 46px; }
  .marche__grid .figure:nth-child(1) { grid-column: span 7; aspect-ratio: 5 / 4; }
  .marche__grid .figure:nth-child(2) { grid-column: span 5; aspect-ratio: 4 / 5; align-self: end; }
  .producteurs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 clamp(20px, 4vw, 60px); margin-top: 46px; }
  .producteur { display: grid; grid-template-columns: 1fr auto; gap: 16px; padding: 16px 0; border-top: 1px solid var(--line-soft); align-items: baseline; }
  .producteur b { font-family: "Fraunces", Georgia, serif; font-weight: 400; font-size: 17px; }
  .producteur span { font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); }
  @media (max-width: 760px) {
    .marche__grid .figure:nth-child(1), .marche__grid .figure:nth-child(2) { grid-column: span 12; }
    .producteurs { grid-template-columns: 1fr; }
  }

  /* ---------- cave ---------- */
  .cave { position: relative; min-height: 640px; display: flex; align-items: center; overflow: hidden; border-block: 1px solid var(--line-soft); }
  .cave__bg { position: absolute; inset: 0; }
  .cave__bg img { width: 100%; height: 120%; object-fit: cover; filter: var(--media); }
  .cave__veil { position: absolute; inset: 0; background: linear-gradient(to right, rgba(var(--shade), 0.94) 12%, rgba(var(--shade), 0.52) 70%); }
  .cave__in { position: relative; z-index: 2; padding-block: clamp(72px, 12vh, 140px); width: 100%; }
  .vins { max-width: 620px; margin-top: 36px; }
  .vin { display: grid; grid-template-columns: 1fr auto auto; gap: 8px 20px; align-items: baseline; padding: 15px 0; border-top: 1px solid var(--line); }
  .vin b { font-family: "Fraunces", Georgia, serif; font-weight: 400; font-size: 18px; }
  .vin i { font-style: normal; font-size: 12px; color: var(--muted); letter-spacing: 0.14em; text-transform: uppercase; }
  .vin u { text-decoration: none; font-size: 15px; color: var(--cuivre); font-weight: 600; min-width: 62px; text-align: right; white-space: nowrap; }
  .vin u::after { content: "\00a0€"; }

  /* ---------- reserver ---------- */
  .reserver { padding-block: clamp(72px, 12vh, 150px); }
  .reserver__grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 5vw, 76px); align-items: start; }
  form.resa { margin-top: 30px; border-top: 1px solid var(--line); }
  .field { display: grid; grid-template-columns: 150px 1fr; gap: 14px; align-items: center; padding: 14px 0; border-bottom: 1px solid var(--line-soft); }
  .field label { font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--muted); }
  .field input, .field select {
    font-family: inherit; font-size: 15px; color: var(--ink); background: transparent;
    border: 1px solid var(--line-soft); padding: 11px 13px; width: 100%;
  }
  .field select option { background: var(--ground-2); color: var(--ink); }
  .resa__submit { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; padding-top: 22px; }
  .resa__note { font-size: 12px; color: var(--muted); max-width: 34ch; line-height: 1.6; }
  .resa__ok { font-size: 14px; color: var(--sauge); line-height: 1.6; }
  .infos { border-top: 1px solid var(--line); }
  .info { display: grid; grid-template-columns: 150px 1fr; gap: 14px; padding: 16px 0; border-bottom: 1px solid var(--line-soft); }
  .info dt { font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--muted); }
  .info dd { margin: 0; font-size: 15px; color: var(--ink-2); line-height: 1.6; }
  @media (max-width: 900px) { .reserver__grid { grid-template-columns: 1fr; } .field, .info { grid-template-columns: 1fr; gap: 6px; } }

  /* ---------- footer ---------- */
  footer { border-top: 1px solid var(--line); padding-block: 54px 40px; }
  .footer__grid { display: flex; flex-wrap: wrap; gap: 32px; justify-content: space-between; align-items: flex-start; }
  .footer__grid p { font-size: 13px; color: var(--muted); line-height: 1.8; margin: 0; }
  .footer__mark { display: flex; gap: 14px; align-items: center; }
  .footer__mark svg { width: 44px; height: 44px; }
  .footer__mark strong { font-size: 13px; letter-spacing: 0.22em; text-transform: uppercase; font-weight: 700; }
  .mentions { margin-top: 38px; padding-top: 18px; border-top: 1px solid var(--line-soft); font-size: 11px; color: var(--muted); letter-spacing: 0.06em; display: flex; flex-wrap: wrap; gap: 8px 26px; }

  @media (prefers-reduced-motion: reduce) {
    * { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
  }

/* ---------- preloader ---------- */
  #preloader {
    position: fixed; inset: 0; z-index: 200; background: var(--ground);
    display: flex; flex-direction: column; justify-content: flex-end;
    padding: var(--gutter); padding-bottom: clamp(28px, 6vh, 64px);
  }
  #preloader .pl__mark { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -54%); width: clamp(70px, 9vw, 116px); color: var(--brique); }
  #preloader .pl__mark svg { width: 100%; height: auto; }
  .pl__row { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; }
  .pl__word { font-size: clamp(28px, 6vw, 72px); font-weight: 800; letter-spacing: -0.035em; line-height: 0.9; }
  .pl__word em { font-family: "Fraunces", Georgia, serif; font-style: italic; font-weight: 300; color: var(--brique); }
  .pl__pct { font-size: clamp(30px, 6vw, 72px); font-weight: 300; font-family: "Fraunces", Georgia, serif; color: var(--cuivre); font-variant-numeric: tabular-nums; }
  .pl__bar { height: 1px; background: var(--line); margin-top: 22px; position: relative; overflow: hidden; }
  .pl__bar i { position: absolute; inset: 0; background: var(--brique); transform: scaleX(0); transform-origin: left; }
  .pl__status { margin-top: 14px; font-size: 10px; letter-spacing: 0.26em; text-transform: uppercase; color: var(--muted); }

  /* ---------- transition curtain ---------- */
  #curtain { position: fixed; inset: 0; z-index: 150; pointer-events: none; display: flex; }
  #curtain .panel { flex: 1 1 0; background: var(--brique-deep); transform: scaleY(0); transform-origin: top; }
  #curtain .panel:nth-child(even) { background: #6e2f1f; }
  #curtain .curtain__in {
    position: absolute; inset: 0; display: flex; flex-direction: column;
    align-items: center; justify-content: center; gap: 14px; text-align: center;
    padding-inline: var(--gutter);
  }
  #curtain .curtain__mark { width: clamp(54px, 7vw, 88px); height: auto; color: #f7e0d3; opacity: 0; }
  #curtain .curtain__name {
    font-family: "Archivo", sans-serif; font-weight: 700; font-size: clamp(11px, 1.2vw, 13px);
    letter-spacing: 0.42em; text-transform: uppercase; color: #f1cdbc; opacity: 0;
  }
  #curtain .curtain__label {
    font-family: "Fraunces", Georgia, serif; font-weight: 300; font-style: italic;
    font-size: clamp(30px, 6vw, 76px); line-height: 1; color: #fff4ec; opacity: 0;
  }

  /* ---------- nav additions ---------- */
  .nav__links a.is-active { color: var(--brique); border-bottom-color: var(--brique); }
  .nav__progress {
    position: absolute; left: 0; right: 0; bottom: 0; height: 2px;
    background: var(--brique); transform: scaleX(0); transform-origin: left;
    opacity: 0.9;
  }
  #mobilemenu .mm__mark {
    display: flex; align-items: center; gap: 12px; margin-bottom: 26px;
    color: var(--brique);
  }
  #mobilemenu .mm__mark svg { width: 30px; height: 30px; }
  #mobilemenu .mm__mark span {
    font-family: "Archivo", sans-serif; font-size: 11px; font-weight: 700;
    letter-spacing: 0.24em; text-transform: uppercase; color: var(--ink-2);
  }
  #mobilemenu a.is-active { color: var(--brique); }
  #mobilemenu .mm__pied {
    margin: 30px 0 0; font-family: "Archivo", sans-serif; font-size: 12px;
    line-height: 1.8; color: var(--muted); letter-spacing: 0.04em;
  }
  #mobilemenu .mm__pied a { color: var(--cuivre); font-size: 12px; padding: 0; border: 0; }
  .lien { border-bottom: 1px solid var(--line); transition: color 220ms ease, border-color 220ms ease; }
  .lien:hover { color: var(--cuivre); border-bottom-color: var(--cuivre); }
  .mentions span { transition: color 220ms ease; }
  .mentions span:hover { color: var(--ink-2); }
  .footer__mark svg { transition: transform 500ms cubic-bezier(.2,.9,.3,1); }
  .footer__mark:hover svg { transform: rotate(-8deg) scale(1.06); }
  .themetoggle {
    width: 40px; height: 40px; flex: none; padding: 0;
    border: 1px solid var(--line-soft); background: transparent; color: var(--ink-2);
    display: inline-flex; align-items: center; justify-content: center; cursor: pointer;
    transition: color 220ms ease, border-color 220ms ease, transform 300ms cubic-bezier(.2,.9,.3,1);
  }
  .themetoggle svg { width: 17px; height: 17px; }
  .themetoggle:hover { color: var(--brique); border-color: var(--line); transform: rotate(-12deg); }
  .themetoggle .t-sun { display: none; }
  :root[data-theme="light"] .themetoggle .t-sun { display: block; }
  :root[data-theme="light"] .themetoggle .t-moon { display: none; }

  .burger {
    display: none; width: 40px; height: 40px; border: 1px solid var(--line-soft); background: transparent;
    cursor: pointer; padding: 0; align-items: center; justify-content: center; flex-direction: column; gap: 5px;
  }
  .burger i { display: block; width: 16px; height: 1px; background: var(--ink); }
  #mobilemenu {
    position: fixed; inset: 0; z-index: 90; background: var(--ground-2); display: none;
    flex-direction: column; justify-content: center; padding: var(--gutter);
  }
  #mobilemenu.is-open { display: flex; }
  #mobilemenu a {
    font-family: "Fraunces", Georgia, serif; font-weight: 300; font-size: clamp(30px, 9vw, 52px);
    padding: 10px 0; border-bottom: 1px solid var(--line-soft);
  }
  #mobilemenu .mm__close { position: absolute; top: calc(env(safe-area-inset-top, 0px) + 22px); right: var(--gutter); background: none; border: 0; color: var(--ink); font-size: 11px; letter-spacing: 0.24em; text-transform: uppercase; cursor: pointer; font-family: inherit; }
  @media (max-width: 860px) { .burger { display: flex; } }

  /* ---------- sub-page shells ---------- */
  .page { padding-top: 72px; }
  .phero { position: relative; overflow: hidden; border-bottom: 1px solid var(--line-soft); }
  .phero__media { position: absolute; inset: 0; }
  .phero__media img { width: 100%; height: 118%; object-fit: cover; filter: var(--media); }
  .phero--carte { min-height: clamp(400px, 58vh, 600px); display: flex; align-items: flex-end; }
  .phero__media--stack img { position: absolute; inset: 0; height: 100%; filter: brightness(0.3) saturate(0.6) contrast(1.1); }
  .phero__media--stack canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
  .phero__media canvas { width: 100%; height: 100%; display: block; }
  .phero__veil { position: absolute; inset: 0; background: linear-gradient(to top, var(--ground) 2%, rgba(var(--shade), 0.35) 60%, rgba(var(--shade), 0.7)); }
  .phero__in { position: relative; z-index: 2; padding-block: clamp(80px, 18vh, 190px) clamp(40px, 8vh, 80px); }
  .phero h1 { font-size: clamp(40px, 8.6vw, 116px); line-height: 0.92; font-weight: 800; letter-spacing: -0.035em; margin: 16px 0 0; text-wrap: balance; }
  .phero h1 em { font-family: "Fraunces", Georgia, serif; font-style: italic; font-weight: 300; color: var(--brique); }
  .phero__lede { font-family: "Fraunces", Georgia, serif; font-weight: 300; font-size: clamp(17px, 2vw, 23px); color: var(--ink-2); max-width: 48ch; margin: 22px 0 0; line-height: 1.5; }

  .band { padding-block: clamp(62px, 10vh, 132px); }
  .band--alt { background: var(--ground-2); border-block: 1px solid var(--line-soft); }
  .duo { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(26px, 5vw, 78px); align-items: center; }
  .duo--wide { grid-template-columns: 1.15fr 0.85fr; }
  @media (max-width: 900px) { .duo, .duo--wide { grid-template-columns: 1fr; } }

  /* ---------- menu (carte page) ---------- */
  .menu-group { border-top: 1px solid var(--line); padding-top: 26px; margin-top: 54px; }
  .menu-group > header { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
  .menu-group h3 { font-size: clamp(22px, 3vw, 34px); font-weight: 700; letter-spacing: -0.02em; margin: 0; }
  .menu-list { margin-top: 18px; }
  .ligne {
    display: grid; grid-template-columns: 1fr auto; column-gap: clamp(16px, 3vw, 40px);
    align-items: baseline; padding: 16px 10px 16px 0;
    border-bottom: 1px solid var(--line-soft);
    transition: background-color 260ms ease, padding-left 260ms ease;
  }
  .ligne__nom { display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px 10px; }
  .ligne b { font-family: "Fraunces", Georgia, serif; font-weight: 400; font-size: clamp(17px, 1.7vw, 20px); transition: color 220ms ease; }
  .ligne u {
    grid-column: 2; justify-self: end; text-decoration: none; font-weight: 600;
    color: var(--cuivre); font-variant-numeric: tabular-nums; white-space: nowrap;
    transition: color 220ms ease, transform 260ms cubic-bezier(.2,.9,.3,1);
  }
  .ligne u::after { content: "\00a0€"; }
  .ligne u.u--free::after { content: none; }
  .ligne p {
    grid-column: 1 / -1; margin: 5px 0 0;
    font-family: "Fraunces", Georgia, serif; font-weight: 300; font-size: 14.5px;
    color: var(--ink-2); max-width: 64ch; line-height: 1.55;
  }
  .ligne:hover { background: rgba(207, 111, 82, 0.07); padding-left: 12px; }
  .ligne:hover b { color: var(--brique); }
  .ligne:hover u { transform: translateX(-3px); color: var(--ink); }
  .tag { display: inline-block; font-family: "Archivo", sans-serif; font-size: 9.5px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--cuivre); border: 1px solid var(--line); padding: 3px 7px; vertical-align: middle; }
  .tag--vege { color: var(--sauge); border-color: rgba(156,178,143,0.4); }
  .tag--violette { color: var(--violette); border-color: rgba(165,131,207,0.4); }

  /* ---------- etapes (cassoulet page) ---------- */
  .etapes { counter-reset: e; margin-top: 46px; display: grid; gap: 0; }
  .etape { display: grid; grid-template-columns: 96px 1fr; gap: clamp(16px, 3vw, 40px); padding: 26px 0; border-top: 1px solid var(--line-soft); align-items: start; }
  .etape::before { counter-increment: e; content: "0" counter(e); font-family: "Fraunces", Georgia, serif; font-weight: 300; font-size: clamp(30px, 4vw, 48px); color: var(--brique); line-height: 1; }
  .etape h4 { margin: 0 0 8px; font-size: 18px; font-weight: 600; letter-spacing: -0.01em; }
  .etape p { margin: 0; color: var(--ink-2); font-size: 15px; line-height: 1.75; max-width: 62ch; }
  .etape time { display: block; margin-top: 8px; font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--muted); }
  @media (max-width: 640px) { .etape { grid-template-columns: 1fr; } }

  /* ---------- marquee ---------- */
  .marquee { overflow: hidden; border-block: 1px solid var(--line-soft); padding-block: 18px; background: var(--ground-2); }
  .marquee__track { display: flex; gap: 48px; white-space: nowrap; will-change: transform; }
  .marquee__track span { font-family: "Fraunces", Georgia, serif; font-weight: 300; font-size: clamp(18px, 2.4vw, 30px); color: var(--muted); }
  .marquee__track span b { color: var(--brique); font-weight: 300; }

  /* ---------- divers ---------- */
  .pagenav { display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap; border-top: 1px solid var(--line); padding-block: 34px; }
  .pagenav a { display: block; }
  .pagenav small { display: block; font-size: 10px; letter-spacing: 0.24em; text-transform: uppercase; color: var(--muted); margin-bottom: 8px; }
  .pagenav strong { font-family: "Fraunces", Georgia, serif; font-weight: 300; font-size: clamp(22px, 3vw, 34px); }
  .pagenav a:hover strong { color: var(--brique); }
  .quote { font-family: "Fraunces", Georgia, serif; font-weight: 300; font-style: italic; font-size: clamp(22px, 3.2vw, 40px); line-height: 1.32; max-width: 24ch; margin: 0; }
  .quote + .quote-by { margin-top: 20px; font-size: 10px; letter-spacing: 0.24em; text-transform: uppercase; color: var(--cuivre); }
  .tri { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(14px, 2vw, 26px); }
  @media (max-width: 760px) { .tri { grid-template-columns: 1fr; } }

/* ---------- survols ---------- */
  .figure img { transition: transform 900ms cubic-bezier(.16,.84,.32,1), filter 500ms ease; }
  .figure:hover img { transform: scale(1.04); filter: brightness(1.06); }
  .figure figcaption { transition: color 220ms ease, border-color 220ms ease; }
  .figure:hover figcaption { color: var(--ink); border-top-color: var(--cuivre); }

  .vin { transition: background-color 240ms ease, padding-left 240ms ease; padding-inline: 0 10px; }
  .vin b { transition: color 220ms ease; }
  .vin:hover { background: rgba(207,111,82,0.07); padding-left: 12px; }
  .vin:hover b { color: var(--brique); }
  .vin:hover u { color: var(--ink); }

  .producteur { transition: background-color 240ms ease, padding-left 240ms ease; }
  .producteur:hover { background: rgba(207,111,82,0.06); padding-left: 10px; }
  .producteur:hover b { color: var(--brique); }
  .producteur b, .producteur span { transition: color 220ms ease; }
  .producteur:hover span { color: var(--cuivre); }

  .info { transition: background-color 240ms ease; }
  .info:hover { background: rgba(242,231,218,0.04); }

  .etape { transition: background-color 260ms ease; }
  .etape::before { transition: color 260ms ease, transform 300ms cubic-bezier(.2,.9,.3,1); display: inline-block; }
  .etape:hover::before { color: var(--cuivre); transform: translateX(6px); }
  .etape:hover { background: rgba(207,111,82,0.05); }

  .pagenav a strong { display: inline-block; transition: transform 320ms cubic-bezier(.2,.9,.3,1), color 220ms ease; }
  .pagenav a:hover strong { transform: translateX(8px); }
  .pagenav a small { transition: color 220ms ease; }
  .pagenav a:hover small { color: var(--cuivre); }

  .nav__links a { position: relative; border-bottom-color: transparent !important; }
  .nav__links a::after {
    content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
    background: var(--brique); transform: scaleX(0); transform-origin: left;
    transition: transform 340ms cubic-bezier(.2,.9,.3,1);
  }
  .nav__links a:hover::after, .nav__links a.is-active::after { transform: scaleX(1); }

  .brandmark svg { transition: transform 500ms cubic-bezier(.2,.9,.3,1); }
  .brandmark:hover svg { transform: rotate(-8deg) scale(1.08); }

  .btn {
    background-image: linear-gradient(var(--ink), var(--ink));
    background-repeat: no-repeat; background-size: 100% 0%; background-position: 50% 100%;
    transition: background-color 240ms ease, color 240ms ease, border-color 240ms ease,
                background-size 380ms cubic-bezier(.2,.9,.3,1), transform 180ms ease;
  }
  .btn:hover { background-size: 100% 100%; color: var(--on-ink); border-color: var(--ink); }
  .btn--ghost:hover { color: var(--on-ink); border-color: var(--ink); }
  .btn:focus-visible { background-size: 100% 100%; color: var(--on-ink); }
  .btn:active { transform: scale(0.97) !important; }

  .stats div { transition: transform 300ms cubic-bezier(.2,.9,.3,1); }
  .stats div:hover { transform: translateY(-3px); }
  .stats b { transition: color 240ms ease; }
  .stats div:hover b { color: var(--brique); }

  .menu-group > header h3 { transition: color 240ms ease; }
  .menu-group:hover > header h3 { color: var(--brique); }

  .stage { transition: box-shadow 400ms ease; }
  .stage:hover { box-shadow: inset 0 0 0 1px var(--line); }

#carteViewport { overflow: hidden; }
  .track { padding-left: var(--gutter); padding-right: var(--gutter); }

/* ═══════════════════════════════════════════════════════════════════════
   RETOUCHES DEMANDÉES APRÈS LA MISE EN LIGNE (21/09/2026)
   Tout ce qui suit s'ajoute au design d'origine, sans rien y reprendre.
   Chaque bloc dit ce qu'on a corrigé et pourquoi.
   ═══════════════════════════════════════════════════════════════════════ */

/* 1. LE PRIX DES PLATS N'AVAIT PAS SON EURO.
   [stated] « sur l'accueil dans la partie la carte il y a un chiffre mais
   pas de € a coté ». C'est un oubli du design : la carte des vins et la
   carte complète ajoutent bien l'euro (`.vin u::after`, `.ligne u::after`),
   la carte défilante de l'accueil ne l'ajoutait nulle part. Même motif, même
   espace insécable, pour que les trois se ressemblent. */
.plat__price b::after { content: "\00a0€"; }

/* 2. LA BARRE DU HAUT SUR TÉLÉPHONE.
   [stated] « le menu du haut sur téléphone est moche ». À 390 px, la barre
   devait tenir le monogramme, le nom en capitales espacées, le bouton de
   thème, « Réserver » et le menu : le nom passait sur trois lignes et la
   barre doublait de hauteur.
   On garde les cinq éléments — rien n'est retiré du design — mais sous
   560 px le nom cède la place au seul monogramme (il reste lisible par les
   lecteurs d'écran, via l'aria-label du lien), et le bouton se resserre. */
@media (max-width: 560px) {
  .nav__in { gap: 12px; padding-inline: 16px; }
  .brandmark span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .brandmark svg { width: 30px; height: 30px; }
  .nav .btn { padding: 11px 14px; font-size: 10px; letter-spacing: 0.14em; }
  .themetoggle { flex: none; }
}

/* 3. « LA MÉTHODE » EN RAIL HORIZONTAL.
   [stated] « dans la page Le cassoulet dans la partie La méthode j'aimerais
   avoir quelque chose en scroll horizontale ».
   Les sept étapes étaient une liste verticale. Elles deviennent des cartes
   dans un rail épinglé — exactement la mécanique de la carte de l'accueil
   (`.track` dans un `…Viewport`), pour que le runtime n'ait qu'un motif à
   connaître. L'habillage reprend celui des plats : filet à gauche, contenu
   en colonne, l'horaire calé en bas par `margin-top: auto`. */
#methodeViewport { overflow: hidden; }
.etapes--rail { counter-reset: e; margin-top: 46px; display: flex; gap: 0; align-items: stretch; will-change: transform; }
.etapes--rail .etape {
  flex: 0 0 clamp(272px, 30vw, 400px);
  display: flex; flex-direction: column; align-items: stretch;
  grid-template-columns: none; gap: 0;
  border-top: 0; border-left: 1px solid var(--line-soft);
  padding: 0 clamp(16px, 2vw, 30px) 24px;
}
.etapes--rail .etape:last-child { border-right: 1px solid var(--line-soft); }
.etapes--rail .etape > div { display: flex; flex-direction: column; flex: 1 1 auto; }
.etapes--rail .etape::before { display: block; margin-bottom: 18px; }
.etapes--rail .etape h4 { font-family: "Fraunces", Georgia, serif; font-weight: 400; font-size: clamp(19px, 2vw, 24px); line-height: 1.22; letter-spacing: 0; margin: 0 0 10px; }
.etapes--rail .etape p { max-width: none; font-size: 14.5px; }
.etapes--rail .etape time { margin-top: auto; padding-top: 20px; border-top: 1px solid var(--line-soft); }
/* Le rail file d'un bord à l'autre, mais son premier et son dernier bord
   restent alignés sur la gouttière, comme la carte de l'accueil. */
.etapes--rail { padding-left: var(--gutter); padding-right: var(--gutter); }
/* Sous 760 px le rail n'est plus épinglé (le runtime rend la main au
   défilement tactile) : il faut alors que les cartes gardent leur hauteur. */
@media (max-width: 760px) { #methodeViewport { overflow-x: auto; } }
@media (prefers-reduced-motion: reduce) { #methodeViewport { overflow-x: auto; } }

/* 4. LE THÈME CLAIR, FINI.
   [stated] « fini la version light / dark du design car la light n'est pas
   fini du tout ». Le design tokenise presque tout ; ce qui restait écrit en
   dur supposait le fond sombre, et ne se voyait donc qu'en clair. */
:root {
  /* le fond derrière la photo du héros, le temps qu'elle arrive */
  --hero-fond: #0c0a09;
  /* le voile de survol des lignes d'information : clair sur fond sombre */
  --survol: rgba(242, 231, 218, 0.05);
}
:root[data-theme="light"] {
  --hero-fond: #ece2d5;
  /* en clair, un voile clair sur fond clair ne se voit pas : on l'inverse */
  --survol: rgba(35, 23, 17, 0.05);
}
.hero { background: var(--hero-fond); }
/* La sélection : le texte doit contraster avec la brique, qui est claire en
   thème sombre et foncée en thème clair — c'est exactement `--on-brique`. */
::selection { background: var(--brique); color: var(--on-brique); }
.info:hover { background: var(--survol); }

/* 5. LA HIÉRARCHIE DES TITRES, SANS TOUCHER AU RENDU.
   Deux sauts de niveau relevés à l'audit : les étapes du cassoulet étaient
   des <h4> sous un <h2>, les groupes de la carte des <h3> sous le <h1> —
   avec un <h2> qui arrivait APRÈS eux. Les balises sont corrigées ; la
   feuille vise maintenant les deux niveaux, pour que rien ne bouge à
   l'écran. */
.etapes--rail .etape h3, .etape h4, .etape h3 { margin: 0 0 8px; font-size: 18px; font-weight: 600; letter-spacing: -0.01em; }
.etapes--rail .etape h3 { font-family: "Fraunces", Georgia, serif; font-weight: 400; font-size: clamp(19px, 2vw, 24px); line-height: 1.22; letter-spacing: 0; margin: 0 0 10px; }
.menu-group h3, .menu-group h2 { font-size: clamp(22px, 3vw, 34px); font-weight: 700; letter-spacing: -0.02em; margin: 0; }

/* 6. LES TROIS ICÔNES DU FORMULAIRE DE RÉSERVATION.
   [stated] « 1 - l'icone est noir / 2 et 3 - l'icone est trop a droite ».
   Vérifié : les trois champs sont rendus à l'identique dans le zip — c'est le
   design qui laisse faire le navigateur, pas le portage qui dérive.

   Ce que le navigateur faisait, et pourquoi ça se voyait :
   — le bouton calendrier d'un champ `date` est dessiné en NOIR, ce qui est
     juste sur un fond clair et invisible sur le fond encre de la maison ;
   — la flèche d'un `select` natif se colle au bord droit du cadre et ignore
     les 13 px de retrait des autres champs : les trois champs n'étaient pas
     alignés entre eux. */

/* La flèche : on la dessine, pour qu'elle respecte le retrait du champ et
   qu'elle suive le thème. `appearance: none` retire celle du navigateur. */
.field select {
  appearance: none; -webkit-appearance: none;
  padding-right: 40px;
  background-repeat: no-repeat;
  background-position: right 13px center;
  background-size: 11px 7px;
  /* chevron encre clair — thème sombre */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='7' viewBox='0 0 11 7'%3E%3Cpath d='M1 1l4.5 4.5L10 1' fill='none' stroke='%23c8b4a3' stroke-width='1.6' stroke-linecap='square'/%3E%3C/svg%3E");
}
:root[data-theme="light"] .field select {
  /* chevron encre foncé — thème clair */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='7' viewBox='0 0 11 7'%3E%3Cpath d='M1 1l4.5 4.5L10 1' fill='none' stroke='%235a4638' stroke-width='1.6' stroke-linecap='square'/%3E%3C/svg%3E");
}
.field select:focus-visible { background-image: none; }

/* Le bouton calendrier : le navigateur le dessine en noir. On l'inverse sur
   le thème sombre seulement — en clair, le noir est le bon choix. Et on le
   ramène dans le retrait du champ, comme la flèche. */
.field input[type="date"] { padding-right: 40px; }
.field input[type="date"]::-webkit-calendar-picker-indicator {
  filter: invert(1) opacity(0.72);
  cursor: pointer;
  margin-right: -4px;
}
:root[data-theme="light"] .field input[type="date"]::-webkit-calendar-picker-indicator {
  filter: opacity(0.6);
}