/* La Cassole Rose — feuille du design, portée telle quelle */
/* ── Les deux familles du design, servies par notre stockage ──────────────
   Déclarations reprises TELLES QUELLES de Google Fonts (mêmes graisses,
   mêmes plages Unicode, même `font-display: swap`) : seules les adresses
   changent, et le sous-ensemble vietnamien est retiré — le site est en
   français. Voir la retouche 8 en bas de feuille pour le pourquoi. */
/* latin-ext */
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 400;
  font-stretch: 100%;
  font-display: swap;
  src: url(https://junsemvatdqpwwyivtys.supabase.co/storage/v1/object/public/media/sites/2274084e-2460-48b3-89ff-5e8f496f329b/polices/archivo-normal-latin-ext.ff4f17d2.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 400;
  font-stretch: 100%;
  font-display: swap;
  src: url(https://junsemvatdqpwwyivtys.supabase.co/storage/v1/object/public/media/sites/2274084e-2460-48b3-89ff-5e8f496f329b/polices/archivo-normal-latin.8f704806.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 500;
  font-stretch: 100%;
  font-display: swap;
  src: url(https://junsemvatdqpwwyivtys.supabase.co/storage/v1/object/public/media/sites/2274084e-2460-48b3-89ff-5e8f496f329b/polices/archivo-normal-latin-ext.ff4f17d2.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 500;
  font-stretch: 100%;
  font-display: swap;
  src: url(https://junsemvatdqpwwyivtys.supabase.co/storage/v1/object/public/media/sites/2274084e-2460-48b3-89ff-5e8f496f329b/polices/archivo-normal-latin.8f704806.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 600;
  font-stretch: 100%;
  font-display: swap;
  src: url(https://junsemvatdqpwwyivtys.supabase.co/storage/v1/object/public/media/sites/2274084e-2460-48b3-89ff-5e8f496f329b/polices/archivo-normal-latin-ext.ff4f17d2.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 600;
  font-stretch: 100%;
  font-display: swap;
  src: url(https://junsemvatdqpwwyivtys.supabase.co/storage/v1/object/public/media/sites/2274084e-2460-48b3-89ff-5e8f496f329b/polices/archivo-normal-latin.8f704806.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 700;
  font-stretch: 100%;
  font-display: swap;
  src: url(https://junsemvatdqpwwyivtys.supabase.co/storage/v1/object/public/media/sites/2274084e-2460-48b3-89ff-5e8f496f329b/polices/archivo-normal-latin-ext.ff4f17d2.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 700;
  font-stretch: 100%;
  font-display: swap;
  src: url(https://junsemvatdqpwwyivtys.supabase.co/storage/v1/object/public/media/sites/2274084e-2460-48b3-89ff-5e8f496f329b/polices/archivo-normal-latin.8f704806.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 800;
  font-stretch: 100%;
  font-display: swap;
  src: url(https://junsemvatdqpwwyivtys.supabase.co/storage/v1/object/public/media/sites/2274084e-2460-48b3-89ff-5e8f496f329b/polices/archivo-normal-latin-ext.ff4f17d2.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 800;
  font-stretch: 100%;
  font-display: swap;
  src: url(https://junsemvatdqpwwyivtys.supabase.co/storage/v1/object/public/media/sites/2274084e-2460-48b3-89ff-5e8f496f329b/polices/archivo-normal-latin.8f704806.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Fraunces';
  font-style: italic;
  font-weight: 300;
  font-display: swap;
  src: url(https://junsemvatdqpwwyivtys.supabase.co/storage/v1/object/public/media/sites/2274084e-2460-48b3-89ff-5e8f496f329b/polices/fraunces-italic-latin-ext.4983926d.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Fraunces';
  font-style: italic;
  font-weight: 300;
  font-display: swap;
  src: url(https://junsemvatdqpwwyivtys.supabase.co/storage/v1/object/public/media/sites/2274084e-2460-48b3-89ff-5e8f496f329b/polices/fraunces-italic-latin.066710ce.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Fraunces';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url(https://junsemvatdqpwwyivtys.supabase.co/storage/v1/object/public/media/sites/2274084e-2460-48b3-89ff-5e8f496f329b/polices/fraunces-italic-latin-ext.4983926d.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Fraunces';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url(https://junsemvatdqpwwyivtys.supabase.co/storage/v1/object/public/media/sites/2274084e-2460-48b3-89ff-5e8f496f329b/polices/fraunces-italic-latin.066710ce.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url(https://junsemvatdqpwwyivtys.supabase.co/storage/v1/object/public/media/sites/2274084e-2460-48b3-89ff-5e8f496f329b/polices/fraunces-normal-latin-ext.a2930b27.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url(https://junsemvatdqpwwyivtys.supabase.co/storage/v1/object/public/media/sites/2274084e-2460-48b3-89ff-5e8f496f329b/polices/fraunces-normal-latin.7234ed86.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(https://junsemvatdqpwwyivtys.supabase.co/storage/v1/object/public/media/sites/2274084e-2460-48b3-89ff-5e8f496f329b/polices/fraunces-normal-latin-ext.a2930b27.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(https://junsemvatdqpwwyivtys.supabase.co/storage/v1/object/public/media/sites/2274084e-2460-48b3-89ff-5e8f496f329b/polices/fraunces-normal-latin.7234ed86.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(https://junsemvatdqpwwyivtys.supabase.co/storage/v1/object/public/media/sites/2274084e-2460-48b3-89ff-5e8f496f329b/polices/fraunces-normal-latin-ext.a2930b27.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(https://junsemvatdqpwwyivtys.supabase.co/storage/v1/object/public/media/sites/2274084e-2460-48b3-89ff-5e8f496f329b/polices/fraunces-normal-latin.7234ed86.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* 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;
  /* ⚠ `appearance: none` retire aussi la hauteur intrinsèque du widget
     natif : le champ perdait 2 px et entraînait toute la colonne avec lui
     (mesuré au banc : .field 71 → 69 px, et .resa, .reserver__grid, .wrap
     derrière). On les rend, pour que la flèche dessinée ne coûte pas un
     pixel de mise en page. */
  padding-top: 12px; padding-bottom: 12px;
  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 ne touche PAS au retrait du champ. Une première version ajoutait
   `padding-right: 40px`, par symétrie avec la liste déroulante — mais les
   deux icônes ne vivent pas au même endroit : le chevron est une image de
   FOND, posée à 13 px du bord du cadre quoi qu'il arrive, tandis que le
   bouton calendrier est à l'intérieur de la BOÎTE DE CONTENU, donc tout
   retrait ajouté le pousse vers la gauche. Résultat mesuré : le calendrier à
   48 px du bord, les chevrons à 20 — les trois champs de nouveau désalignés,
   dans l'autre sens. Avec le retrait d'origine du design (13 px), les trois
   icônes tombent sur la même verticale. */
.field input[type="date"]::-webkit-calendar-picker-indicator {
  filter: invert(1) opacity(0.72);
  cursor: pointer;
  /* Chrome donne à son bouton une marge propre : mesuré au pixel sur la
     capture, le calendrier tombait à 17 px du bord du cadre quand les
     chevrons sont à 13. On rend les 4 px, et les trois icônes s'alignent. */
  margin-right: -4px;
}
:root[data-theme="light"] .field input[type="date"]::-webkit-calendar-picker-indicator {
  filter: opacity(0.6);
}

/* ══════════════════════════════════════════════════════════════════════════
   Retouche 7 — les sections d'ouverture prennent toute la hauteur d'écran

   Mesuré avant (outils/mesure-hero.mjs) : l'accueil ouvrait à 88 % de la
   fenêtre (792/900 px en grand écran, 743/844 px au téléphone) et les pages
   intérieures entre 48 % et 68 %. Le design d'origine plafonnait exprès
   (`height: clamp(600px, 88vh, 900px)` sur .hero, `min-height` posé en ligne
   sur chaque .phero) ; c'est cette valeur-là qu'on change.

   Pourquoi `svh` et pas `vh` : au téléphone, `100vh` compte la barre d'URL
   comme si elle était rétractée — le bas de la section passe donc sous la
   barre et le premier bouton devient inatteignable. `100svh` est la fenêtre
   la plus PETITE (barre visible), donc toujours entièrement à l'écran. Et
   surtout pas `dvh` : il change de valeur quand la barre se rétracte au
   scroll, ce qui remesurerait tous les rails épinglés en plein défilement —
   exactement la panne qu'on a passé une soirée à corriger. `100vh` reste
   déclaré au-dessus comme repli pour les navigateurs sans `svh`.

   Sur les .phero, le `min-height` vient d'un attribut `style` posé sur la
   balise : seule une déclaration `!important` peut le dépasser. On garde
   `min-height` (et non `height`) pour que le contenu puisse encore pousser
   la section si un titre passe à trois lignes sur un écran étroit.

   Et puisque la boîte devient plus haute que son contenu, on ancre le texte
   en bas, comme le fait déjà l'accueil (`.hero__in { justify-content:
   flex-end }`) et la carte : sans ça, le titre resterait collé en haut avec
   un grand vide en dessous. */
.hero {
  height: 100vh;
  height: 100svh;
}
.phero {
  min-height: 100vh !important;
  min-height: 100svh !important;
  display: flex;
  align-items: flex-end;
}
/* Les pages intérieures poussent leur contenu de 72 px (`.page { padding-top:
   72px }`) pour passer sous la barre de navigation, qui est en `position:
   fixed`. Une ouverture de 100svh posée là commencerait à 72 px du haut et
   déborderait donc de 72 px sous le bas de l'écran — mesuré à l'essai sur les
   cinq pages intérieures. On remonte la section dans ce retrait : la photo
   passe derrière la barre, exactement comme sur l'accueil, où le héros part
   de 0 et où la barre est transparente en haut de page (vérifié :
   `background-color: rgba(0,0,0,0)` sur les deux). Le texte étant ancré en
   bas, rien ne passe sous la barre. */
.page > .phero:first-child,
.page > *:first-child > .phero:first-child { margin-top: -72px; }
/* .phero__in est un `.wrap` : devenu élément de flex, il se rétracterait sur
   la largeur de son texte. On lui rend la largeur pleine ; son `max-width` et
   ses marges automatiques continuent de le centrer. */
.phero__in { width: 100%; }

/* ══════════════════════════════════════════════════════════════════════════
   Retouche 8 — les polices quittent Google et passent par notre stockage

   Mesuré après la retouche 7 : le LCP du téléphone (réseau bridé 4 Mb/s,
   120 ms de latence) passait de 1,5 s à 3,0 s. La cause n'est PAS un rendu
   plus lent — la photo arrive au même moment qu'avant. C'est que Chrome
   cesse de considérer une image qui couvre toute la fenêtre comme un
   candidat au LCP : il la tient pour un fond. Le héros faisant désormais
   exactement 100 % de la hauteur, le LCP retombe sur le TEXTE du héros — et
   ce texte, lui, se repeignait à 3,2 s, quand la police italique arrivait
   enfin. La faiblesse existait avant ; le plein écran l'a seulement mise en
   évidence, là où la photo la cachait.

   Trois allers-retours étaient en cause : ouvrir fonts.googleapis.com (qui
   n'était même pas préconnecté), y lire une feuille, puis ouvrir gstatic
   pour les fichiers. Les six .woff2 sont maintenant posés à côté de la
   feuille et des photos, sur une origine déjà préconnectée : une seule
   connexion, et deux d'entre eux sont demandés dès la tête du document
   (voir les `preload` dans depot.mjs).

   Les déclarations @font-face sont celles de Google, mot pour mot — mêmes
   graisses, mêmes plages Unicode, même `font-display: swap` — seules les
   adresses changent. Le sous-ensemble vietnamien est retiré : le site est en
   français, et c'était un tiers des fichiers. Les fichiers sont versionnés
   par leur empreinte (`archivo-normal-latin.8f704806.woff2`), donc
   immuables : le navigateur ne les redemande jamais. */