/* ==========================================================================
   NJANSANG — Table afro-contemporaine · « Clair-obscur gourmand »
   Feuille unique, organisée en couches. Mobile d'abord.
   ========================================================================== */
@layer reset, tokens, base, layout, components, utilities, pages;

/* ---------- reset ---------- */
@layer reset {
  *, *::before, *::after { box-sizing: border-box; }
  * { margin: 0; }
  html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
  body { min-height: 100svh; }
  img, picture, svg, video { display: block; max-width: 100%; }
  img { height: auto; }
  input, button, textarea, select { font: inherit; color: inherit; }
  button { cursor: pointer; background: none; border: 0; padding: 0; }
  ul[role="list"], ol[role="list"] { list-style: none; padding: 0; }
  table { border-collapse: collapse; }
  [hidden] { display: none !important; }
  dialog { padding: 0; border: 0; }
  fieldset { border: 0; padding: 0; min-width: 0; }
  legend { padding: 0; }
  summary { cursor: pointer; }
}

/* ---------- tokens ---------- */
@layer tokens {
  :root {
    color-scheme: light;
    --color-creme: #F8F1E3;
    --color-lin: #EFE3CC;
    --color-ivoire: #FFFBF3;
    --color-sable: #E9D9BC;
    --color-encre: #271610;
    --color-encre-2: #5E4636;
    --color-terracotta: #B34F2A;
    --color-terracotta-texte: #9A3F1E;
    --color-ocre: #E1A035;
    --color-ocre-texte: #8A5A10;
    --color-foret: #244D2E;
    --color-foret-clair: #A9C9A4;
    --color-nuit: #1C110C;
    --color-nuit-2: #2A1A12;
    --color-creme-attenue: #CDBBA3;
    --color-terracotta-nuit: #E8835C;
    --color-piment: #C2361F;
    --color-erreur: #A42A1A;
    --color-ligne: rgb(39 22 16 / .16);
    --color-ligne-nuit: rgb(248 241 227 / .16);

    --font-display: "Fraunces", "Iowan Old Style", "Palatino Linotype", Georgia, serif;
    --font-body: "Hanken Grotesk", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;

    --fs-display: clamp(2.5rem, 1.45rem + 5vw, 5.75rem);
    --fs-h1: clamp(2.25rem, 1.5rem + 3.6vw, 4.5rem);
    --fs-h2: clamp(1.875rem, 1.4rem + 2.2vw, 3.25rem);
    --fs-h3: clamp(1.25rem, 1.1rem + .6vw, 1.625rem);
    --fs-h4: 1.1875rem;
    --fs-body: clamp(1rem, .95rem + .25vw, 1.125rem);
    --fs-lead: clamp(1.125rem, 1rem + .55vw, 1.375rem);
    --fs-small: .875rem;
    --fs-label: .8125rem;

    --space-1: .25rem; --space-2: .5rem; --space-3: .75rem; --space-4: 1rem; --space-5: 1.5rem;
    --space-6: 2rem; --space-7: 3rem; --space-8: 4rem; --space-9: 6rem;
    --space-section: clamp(4rem, 3rem + 5vw, 8rem);
    --gutter: clamp(1rem, 4vw, 3rem);
    --w-text: 40rem; --w-content: 76rem; --w-wide: 90rem;

    --radius-s: .375rem; --radius-m: .75rem; --radius-l: 1.25rem; --radius-pill: 999px;
    --radius-arch: 999px 999px .5rem .5rem;

    --shadow-s: 0 1px 2px rgb(39 22 16 / .08), 0 2px 8px rgb(39 22 16 / .06);
    --shadow-m: 0 2px 6px rgb(39 22 16 / .08), 0 12px 32px rgb(39 22 16 / .10);
    --shadow-l: 0 8px 20px rgb(28 17 12 / .18), 0 30px 60px rgb(28 17 12 / .22);

    --ease-out: cubic-bezier(.2, .8, .2, 1);
    --ease-in-out: cubic-bezier(.65, 0, .35, 1);
    --dur-1: 100ms; --dur-2: 150ms; --dur-3: 250ms; --dur-4: 400ms; --dur-5: 500ms;

    --header-h: 4.25rem;

    --ndop-ocre: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='12' viewBox='0 0 56 12'%3E%3Cg fill='none' stroke='%23E1A035' stroke-width='1.2' stroke-opacity='.45'%3E%3Cpath d='M1 6 7 1l6 5-6 5z'/%3E%3Cpath d='M16 9l3-6 3 6 3-6 3 6'/%3E%3Ccircle cx='35' cy='6' r='2.2'/%3E%3Cpath d='M42 6l6-5 6 5-6 5z'/%3E%3C/g%3E%3C/svg%3E");
    --ndop-encre: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='12' viewBox='0 0 56 12'%3E%3Cg fill='none' stroke='%23271610' stroke-width='1.1' stroke-opacity='.28'%3E%3Cpath d='M1 6 7 1l6 5-6 5z'/%3E%3Cpath d='M16 9l3-6 3 6 3-6 3 6'/%3E%3Ccircle cx='35' cy='6' r='2.2'/%3E%3Cpath d='M42 6l6-5 6 5-6 5z'/%3E%3C/g%3E%3C/svg%3E");
    --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    --msd-accent: #E1A035;
    --msd-font: var(--font-body);
  }
  @media (min-width: 64em) { :root { --header-h: 5rem; } }
}

/* ---------- base ---------- */
@layer base {
  html { scroll-padding-top: calc(var(--header-h) + 1rem); }
  body {
    background: var(--color-creme);
    color: var(--color-encre);
    font-family: var(--font-body);
    font-size: var(--fs-body);
    line-height: 1.6;
    font-variant-numeric: lining-nums;
    -webkit-font-smoothing: antialiased;
    overflow-x: clip;
  }
  h1, h2, h3, h4 {
    font-family: var(--font-display);
    font-variation-settings: "SOFT" 100;
    font-synthesis: none;
    text-wrap: balance;
    color: inherit;
  }
  h1 { font-size: var(--fs-h1); font-weight: 360; line-height: 1.02; letter-spacing: -.02em; }
  h2 { font-size: var(--fs-h2); font-weight: 400; line-height: 1.08; letter-spacing: -.015em; }
  h3 { font-size: var(--fs-h3); font-weight: 500; line-height: 1.2; letter-spacing: -.005em; }
  h4 { font-size: var(--fs-h4); font-weight: 500; line-height: 1.25; }
  :is(h1, h2, h3) em { font-style: italic; font-weight: 400; color: var(--color-terracotta-texte); }
  .lead, .prose > p, .manifeste__body, .faq__a p { text-wrap: pretty; }
  a { color: var(--color-terracotta-texte); text-decoration-thickness: 1px; text-underline-offset: .18em; transition: color var(--dur-2); }
  a:hover { color: var(--color-encre); }
  :focus-visible { outline: 2px solid var(--color-encre); outline-offset: 3px; border-radius: 2px; }
  ::selection { background: var(--color-ocre); color: var(--color-encre); }
  strong, b { font-weight: 650; }
  address { font-style: normal; }
  code { font-size: .9em; background: var(--color-lin); padding: .1em .35em; border-radius: .25rem; }
  hr { border: 0; border-top: 1px solid var(--color-ligne); }
  input, select, textarea { font-size: max(16px, 1rem); }
}

/* ---------- layout ---------- */
@layer layout {
  .container { width: min(100% - 2 * var(--gutter), var(--w-content)); margin-inline: auto; }
  .container--wide { width: min(100% - 2 * var(--gutter), var(--w-wide)); margin-inline: auto; }
  .container--text { width: min(100% - 2 * var(--gutter), var(--w-text)); margin-inline: auto; }
  .section { padding-block: var(--space-section); position: relative; }
  .section--tight { padding-block: clamp(2.5rem, 2rem + 2.5vw, 4.5rem); }
  .section--lin { background: var(--color-lin); }
  .section--foret { background: var(--color-foret); color: var(--color-creme); }
  .section--nuit, .page-head--nuit, .site-footer, .notfound { background: var(--color-nuit); color: var(--color-creme); isolation: isolate; }
  .section--nuit::after, .page-head--nuit::after, .site-footer::after {
    content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
    background-image: var(--grain); opacity: .05; mix-blend-mode: screen;
  }
  .section--nuit::before, .site-footer::before, .page-head--nuit::before {
    content: ""; position: absolute; inset-inline: 0; inset-block-start: 0; height: 12px;
    background: var(--ndop-ocre) repeat-x left center; pointer-events: none;
  }
  :is(.section--nuit, .section--foret, .page-head--nuit, .site-footer, .notfound, .site-nav) :focus-visible { outline-color: var(--color-ocre); }
  :is(.section--nuit, .page-head--nuit, .notfound) a:not(.btn) { color: var(--color-terracotta-nuit); }
  :is(.section--nuit, .page-head--nuit, .notfound) a:not(.btn):hover { color: var(--color-creme); }
  :is(.section--nuit, .page-head--nuit, .notfound) :is(h1, h2, h3) em { color: var(--color-ocre); }
  .section--foret :is(h1, h2, h3) em { color: var(--color-ocre); }
  .section--foret a:not(.btn) { color: var(--color-creme); }

  .section-head { display: grid; gap: var(--space-3); margin-block-end: clamp(2rem, 1.5rem + 2vw, 3.5rem); max-width: 48rem; }
  .section-head--split { max-width: none; }
  .section-head__aside { color: var(--color-encre-2); max-width: 34rem; }
  .section--nuit .section-head__aside, .page-head--nuit .lead { color: var(--color-creme-attenue); }
  @media (min-width: 48em) {
    .section-head--split { grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); align-items: end; gap: var(--space-6); }
    .section-head--split > :last-child { justify-self: end; }
  }
  .form-grid { display: grid; gap: var(--space-4) var(--space-5); }
  @media (min-width: 40em) { .form-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
}

/* ---------- components ---------- */
@layer components {
  /* Liens et étiquettes */
  .skip-link { position: absolute; inset-inline-start: 1rem; inset-block-start: -4rem; z-index: 100; background: var(--color-encre); color: var(--color-creme); padding: .75rem 1rem; border-radius: var(--radius-s); font-weight: 600; transition: top var(--dur-2); }
  .skip-link:focus { inset-block-start: 1rem; color: var(--color-creme); }
  .eyebrow { font-family: var(--font-body); font-size: var(--fs-label); font-weight: 650; text-transform: uppercase; letter-spacing: .14em; color: var(--color-ocre-texte); display: flex; align-items: center; gap: .6rem; }
  .eyebrow::before { content: ""; inline-size: 1.75rem; block-size: 1px; background: currentColor; opacity: .7; }
  .eyebrow--ocre { color: var(--color-ocre); }
  .eyebrow--light { color: var(--color-lin); }
  .lead { font-size: var(--fs-lead); line-height: 1.5; color: var(--color-encre-2); max-width: 40rem; }
  .muted { color: var(--color-encre-2); }
  :is(.section--nuit, .site-footer, .page-head--nuit, .notfound) .muted { color: var(--color-creme-attenue); }
  .small { font-size: var(--fs-small); line-height: 1.5; color: var(--color-encre-2); }
  .h3 { font-size: var(--fs-h3); font-weight: 500; line-height: 1.2; }
  .h4 { font-size: var(--fs-h4); font-weight: 500; line-height: 1.25; }
  .prose > * + * { margin-block-start: 1em; }
  .prose { max-width: 42rem; }
  .prose ul { padding-inline-start: 1.25rem; }
  .icon { flex: none; }
  .link-arrow { display: inline-flex; align-items: center; gap: .45rem; font-weight: 600; text-decoration: none; color: var(--color-terracotta-texte); min-height: 44px; }
  .link-arrow .icon { transition: transform var(--dur-3) var(--ease-out); }
  .link-arrow:hover .icon { transform: translateX(4px); }
  .link-arrow--dark, .site-footer .link-arrow { color: var(--color-terracotta-nuit); }
  .note-fictive { display: flex; align-items: center; gap: .5rem; font-size: var(--fs-small); color: var(--color-encre-2); margin-block-start: var(--space-5); }
  .note-fictive--dark { color: var(--color-creme-attenue); }
  .callout { display: flex; gap: .75rem; align-items: flex-start; background: var(--color-ivoire); border: 1px solid var(--color-sable); border-inline-start: 3px solid var(--color-ocre); padding: 1rem 1.125rem; border-radius: var(--radius-s); font-size: .95rem; }
  .callout .icon { margin-block-start: .15rem; color: var(--color-ocre-texte); }
  .ticks { list-style: none; padding: 0; display: grid; gap: .65rem; }
  .ticks li { display: flex; gap: .65rem; align-items: flex-start; }
  .ticks .icon { margin-block-start: .2rem; color: var(--color-foret); }
  .ticks--light .icon { color: var(--color-ocre); }
  .badge { display: inline-flex; align-items: center; gap: .3rem; font-size: .75rem; font-weight: 650; letter-spacing: .04em; text-transform: uppercase; padding: .2rem .55rem; border-radius: var(--radius-pill); background: var(--color-sable); color: var(--color-encre); line-height: 1.4; }
  .badge--sig { background: var(--color-ocre); }
  .badge--alc { background: transparent; border: 1px solid var(--color-ligne); color: var(--color-encre-2); }

  /* Boutons */
  .btn {
    --_bg: transparent; --_fg: var(--color-encre); --_bd: transparent;
    display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
    min-height: 3rem; padding: .7rem 1.4rem; border-radius: var(--radius-pill);
    background: var(--_bg); color: var(--_fg); border: 1.5px solid var(--_bd);
    font-family: var(--font-body); font-weight: 650; font-size: .9875rem; letter-spacing: .01em; line-height: 1.2;
    text-decoration: none; text-align: center; cursor: pointer;
    transition: background-color var(--dur-2), color var(--dur-2), border-color var(--dur-2), transform var(--dur-1), box-shadow var(--dur-2);
  }
  .btn:hover { color: var(--_fg); }
  .btn:active { transform: scale(.97); }
  .btn--primary { --_bg: var(--color-terracotta); --_fg: var(--color-ivoire); --_bd: var(--color-terracotta); box-shadow: 0 6px 18px -8px rgb(179 79 42 / .7); }
  .btn--primary:hover { --_bg: var(--color-terracotta-texte); --_bd: var(--color-terracotta-texte); --_fg: var(--color-ivoire); }
  .btn--outline { --_bd: var(--color-encre); }
  .btn--outline:hover { --_bg: var(--color-encre); --_fg: var(--color-creme); }
  .btn--light { --_bd: rgb(248 241 227 / .7); --_fg: var(--color-creme); }
  .btn--light:hover { --_bg: var(--color-creme); --_fg: var(--color-encre); --_bd: var(--color-creme); }
  .btn--ocre { --_bg: var(--color-ocre); --_fg: var(--color-encre); --_bd: var(--color-ocre); }
  .btn--ocre:hover { --_bg: #EDB653; --_bd: #EDB653; }
  .btn--ghost { --_fg: var(--color-terracotta-texte); padding-inline: .75rem; }
  .btn--ghost:hover { --_bg: var(--color-lin); }
  .btn--sm { min-height: 2.75rem; padding: .5rem 1.1rem; font-size: .9375rem; }
  .btn--lg { min-height: 3.375rem; padding: .85rem 1.75rem; font-size: 1.03rem; }
  .btn--block { width: 100%; }
  .btn:disabled, .btn[aria-disabled="true"] { opacity: .5; cursor: not-allowed; transform: none; box-shadow: none; }
  .icon-btn { display: inline-grid; place-items: center; inline-size: 2.75rem; block-size: 2.75rem; border-radius: 50%; color: inherit; transition: background-color var(--dur-2); }
  .icon-btn:hover { background: rgb(39 22 16 / .08); }

  /* Statut d'ouverture */
  .status { display: inline-flex; align-items: center; gap: .6rem; font-size: .9375rem; font-weight: 600; line-height: 1.35; padding: .45rem .9rem .45rem .75rem; border-radius: var(--radius-pill); background: var(--color-ivoire); border: 1px solid var(--color-sable); color: var(--color-encre); max-width: 100%; }
  .status__dot { --_c: var(--color-encre-2); position: relative; flex: none; inline-size: .6rem; block-size: .6rem; border-radius: 50%; background: var(--_c); }
  .status[data-state="open"] .status__dot { --_c: #2E7D45; }
  .status[data-state="soon"] .status__dot, .status[data-state="special"] .status__dot { --_c: var(--color-ocre); }
  .status[data-state="exception"] .status__dot { --_c: var(--color-terracotta); }
  .status--on-dark { background: rgb(28 17 12 / .55); border-color: rgb(248 241 227 / .2); color: var(--color-creme); }
  .status--on-dark .status__dot { --_c: var(--color-creme-attenue); }
  .status--on-dark[data-state="open"] .status__dot { --_c: var(--color-foret-clair); }
  .status--small { font-size: .875rem; padding: .3rem .7rem .3rem .6rem; }
  .status--hero { -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
  @media (prefers-reduced-motion: no-preference) {
    .status[data-state="open"] .status__dot::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: var(--_c); animation: pulse 2400ms var(--ease-out) infinite; }
  }
  @keyframes pulse { 0% { transform: scale(1); opacity: .55; } 70%, 100% { transform: scale(2.6); opacity: 0; } }
  .status-clock { font-size: var(--fs-small); color: var(--color-encre-2); margin-block-start: .5rem; }

  /* Prix, régimes, piment */
  .price { font-weight: 650; font-variant-numeric: tabular-nums lining-nums; white-space: nowrap; }
  .price__eur { font-size: .85em; font-weight: 500; color: var(--color-encre-2); white-space: nowrap; margin-inline-start: .35em; }
  :is(.section--nuit, .page-head--nuit) .price__eur { color: var(--color-creme-attenue); }
  .diet { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: .3rem .75rem; font-size: .8125rem; color: var(--color-foret); font-weight: 600; }
  .diet__item { display: inline-flex; align-items: center; gap: .3rem; }
  .diet--compact { font-size: .78rem; }
  .chili { display: inline-flex; align-items: center; gap: 1px; color: var(--color-piment); font-size: .8125rem; font-weight: 600; }
  .chili--0 { color: var(--color-encre-2); font-weight: 500; }
  .stars { display: flex; gap: 2px; color: var(--color-ocre); }
  .star { fill: currentColor; stroke: none; }
  .star--off { fill: none; stroke: currentColor; }

  /* Formes signatures */
  .arch { border-radius: var(--radius-arch); overflow: hidden; background: var(--color-nuit-2); }
  .arch img { width: 100%; height: 100%; object-fit: cover; }

  /* En-tête */
  .site-header { position: sticky; inset-block-start: 0; z-index: 50; background: var(--color-creme); color: var(--color-encre); border-block-end: 1px solid var(--color-ligne); transition: background-color var(--dur-3), color var(--dur-3), box-shadow var(--dur-3), border-color var(--dur-3); }
  .site-header--overlay { position: fixed; inset-inline: 0; background: transparent; color: var(--color-creme); border-color: transparent; }
  .site-header--overlay.is-solid { background: var(--color-creme); color: var(--color-encre); border-color: var(--color-ligne); box-shadow: 0 6px 24px -14px rgb(39 22 16 / .35); }
  .site-header__bar { position: relative; z-index: 2; display: flex; align-items: center; gap: var(--space-4); min-height: var(--header-h); width: min(100% - 2 * var(--gutter), var(--w-wide)); margin-inline: auto; flex-wrap: wrap; }
  .logo { display: inline-flex; align-items: center; gap: .5rem; text-decoration: none; color: inherit; font-family: var(--font-display); font-variation-settings: "SOFT" 100; font-weight: 600; font-size: 1.3rem; letter-spacing: .14em; min-height: 44px; position: relative; z-index: 2; }
  .logo:hover { color: inherit; }
  .logo__seed { transition: transform var(--dur-4) var(--ease-out); }
  .logo:hover .logo__seed { transform: rotate(-18deg); }
  .site-nav__list { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: .25rem 1.4rem; }
  .site-nav__link { position: relative; color: inherit; text-decoration: none; font-weight: 550; font-size: .9875rem; padding-block: .5rem; display: inline-block; }
  .site-nav__link::after { content: ""; position: absolute; inset-inline: 0; inset-block-end: .25rem; height: 1.5px; background: currentColor; transform: scaleX(0); transform-origin: left; transition: transform var(--dur-3) var(--ease-out); }
  .site-nav__link:hover { color: inherit; }
  .site-nav__link:hover::after, .site-nav__link[aria-current="page"]::after { transform: scaleX(1); }
  .site-nav__link[aria-current="page"] { color: var(--color-terracotta-texte); }
  .site-header--overlay:not(.is-solid) .site-nav__link[aria-current="page"] { color: var(--color-ocre); }
  .site-nav__extra { display: none; }
  .site-header__actions { display: flex; align-items: center; gap: .6rem; margin-inline-start: auto; position: relative; z-index: 2; }
  .order-pill { display: inline-flex; align-items: center; gap: .4rem; min-height: 2.75rem; padding: .35rem .85rem; border-radius: var(--radius-pill); background: var(--color-ocre); color: var(--color-encre); font-weight: 650; font-size: .875rem; text-decoration: none; white-space: nowrap; }
  .order-pill:hover { color: var(--color-encre); background: #EDB653; }
  .menu-toggle { display: inline-flex; align-items: center; gap: .55rem; min-height: 2.75rem; padding: .4rem .85rem; border-radius: var(--radius-pill); border: 1.5px solid currentColor; font-weight: 650; font-size: .9375rem; color: inherit; }
  .menu-toggle__icon { display: grid; gap: 5px; inline-size: 18px; }
  .menu-toggle__icon span { display: block; height: 1.5px; background: currentColor; border-radius: 2px; transition: transform var(--dur-3) var(--ease-out); }
  .menu-toggle[aria-expanded="true"] .menu-toggle__icon span:first-child { transform: translateY(3.25px) rotate(45deg); }
  .menu-toggle[aria-expanded="true"] .menu-toggle__icon span:last-child { transform: translateY(-3.25px) rotate(-45deg); }
  /* sans JS : navigation en ligne qui passe à la ligne */
  .site-nav { order: 3; flex-basis: 100%; padding-block-end: .5rem; }
  @media (min-width: 64em) {
    .site-nav { order: 0; flex-basis: auto; padding: 0; margin-inline-start: auto; }
    .site-header__actions { margin-inline-start: 1.5rem; }
  }
  /* avec JS, sous 64em : panneau plein écran */
  @media (max-width: 63.99em) {
    .js .site-nav { position: fixed; inset: 0; z-index: 1; padding: calc(var(--header-h) + 1.5rem) var(--gutter) var(--nav-pad-end, 2rem); background: var(--color-nuit); color: var(--color-creme); overflow-y: auto; display: none; flex-direction: column; gap: 2rem; }
    .js .site-nav::before { content: ""; position: absolute; inset-inline: 0; inset-block-start: var(--header-h); height: 12px; background: var(--ndop-ocre) repeat-x; }
    .js.menu-open .site-nav { display: flex; }
    .js.menu-open .site-header { background: var(--color-nuit); color: var(--color-creme); border-color: transparent; box-shadow: none; }
    .js .site-nav__list { flex-direction: column; gap: 0; }
    .js .site-nav__link { font-family: var(--font-display); font-variation-settings: "SOFT" 100; font-weight: 400; font-size: clamp(1.75rem, 1.3rem + 2.5vw, 2.5rem); line-height: 1.15; padding-block: .45rem; letter-spacing: -.01em; }
    .js .site-nav__link[aria-current="page"] { color: var(--color-ocre); }
    .js .site-nav__link::after { display: none; }
    .js .site-nav__extra { display: grid; gap: 1rem; max-width: 26rem; }
    .site-nav__contact { display: flex; flex-wrap: wrap; gap: .5rem 1.25rem; }
    .site-nav__contact a { display: inline-flex; align-items: center; gap: .4rem; color: var(--color-creme); text-decoration: none; min-height: 44px; font-weight: 600; }
    .site-nav__addr { color: var(--color-creme-attenue); font-size: var(--fs-small); }
    .js .menu-toggle { display: inline-flex; }
  }
  @media (max-width: 29.99em) { .site-header__cta { display: none; } .logo { font-size: 1.15rem; letter-spacing: .12em; } .order-pill__label { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } .order-pill { padding-inline: .7rem; } }
  @media (max-width: 63.99em) { .js .site-header__bar { flex-wrap: nowrap; } }
  .js.menu-open { overflow: hidden; }
  @media (min-width: 64em) { .menu-toggle { display: none; } }
  .site-header--overlay::before { content: ""; position: absolute; inset: 0 0 -2.5rem; background: linear-gradient(180deg, rgb(28 17 12 / .62), rgb(28 17 12 / 0)); pointer-events: none; transition: opacity var(--dur-3); }
  .site-header--overlay.is-solid::before, .menu-open .site-header--overlay::before { opacity: 0; }
  .site-header--overlay:not(.is-solid) .menu-toggle { background: rgb(28 17 12 / .45); border-color: rgb(248 241 227 / .75); }

  /* Barre d'actions mobile */
  .action-bar { position: fixed; inset-inline: 8px; inset-block-end: 8px; z-index: 40; padding: .45rem .45rem calc(.45rem + env(safe-area-inset-bottom)); background: rgb(248 241 227 / .97); border: 1px solid var(--color-ligne); border-radius: var(--radius-m); box-shadow: 0 -8px 24px -16px rgb(39 22 16 / .4), var(--shadow-s); transition: transform var(--dur-3) var(--ease-out); }
  .action-bar__row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .25rem; }
  .action-bar__item { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .15rem; min-height: 3rem; border-radius: var(--radius-s); color: var(--color-encre); text-decoration: none; font-size: .75rem; font-weight: 650; }
  .action-bar__item:hover { background: var(--color-lin); color: var(--color-encre); }
  .action-bar__item--primary { background: var(--color-terracotta); color: var(--color-ivoire); }
  .action-bar__item--primary:hover { background: var(--color-terracotta-texte); color: var(--color-ivoire); }
  .order-bar { display: flex; align-items: center; gap: .6rem; min-height: 3rem; padding: .4rem .8rem; margin-block-end: .4rem; border-radius: var(--radius-s); background: var(--color-foret); color: var(--color-creme); text-decoration: none; font-size: .875rem; }
  .order-bar:hover { color: var(--color-creme); }
  .order-bar__text { flex: 1; min-width: 0; }
  .order-bar__cta { display: inline-flex; align-items: center; gap: .3rem; font-weight: 700; color: var(--color-ocre); }
  @media (min-width: 48em) { .action-bar { display: none; } }

  /* Bloc final */
  .cta-final { background: var(--color-lin); padding-block: clamp(3.5rem, 2.5rem + 4vw, 6rem); position: relative; overflow: hidden; }
  .cta-final::before { content: ""; position: absolute; inset-inline: 0; inset-block-start: 0; height: 12px; background: var(--ndop-encre) repeat-x; }
  .cta-final__inner { display: grid; gap: var(--space-6); align-items: end; }
  .cta-final__text { display: grid; gap: var(--space-4); justify-items: start; }
  .cta-final__title { font-size: clamp(2.25rem, 1.5rem + 3.5vw, 4.25rem); font-weight: 360; }
  .cta-final__actions { display: grid; gap: .75rem; justify-items: start; }
  .cta-final__alt { color: var(--color-encre-2); font-size: .95rem; }
  @media (min-width: 48em) { .cta-final__inner { grid-template-columns: 1.4fr 1fr; } .cta-final__actions { justify-items: end; text-align: end; } }

  /* Fil d'Ariane et en-têtes de page */
  .breadcrumb ol { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: .4rem; font-size: var(--fs-small); color: var(--color-encre-2); }
  .breadcrumb li + li::before { content: "/"; margin-inline-end: .4rem; opacity: .5; }
  .breadcrumb a { color: inherit; }
  .page-head { padding-block: clamp(2rem, 1.5rem + 3vw, 4.5rem) clamp(2.5rem, 2rem + 3vw, 4.5rem); position: relative; }
  .page-head .container { display: grid; gap: var(--space-4); justify-items: start; }
  .page-head__title { font-size: var(--fs-h1); margin-block-start: var(--space-2); }
  .page-head--nuit .breadcrumb ol { color: var(--color-creme-attenue); }
  .page-head__band { margin-block-start: clamp(2rem, 1.5rem + 3vw, 4rem); position: relative; }
  .page-head__band img { width: 100%; height: clamp(14rem, 10rem + 22vw, 34rem); object-fit: cover; }
  .page-head--nuit .page-head__band::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, var(--color-nuit) 0%, rgb(28 17 12 / 0) 30%, rgb(28 17 12 / 0) 70%, rgb(28 17 12 / .35)); }
  .page-head__actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-block-start: var(--space-2); }
  .page-head__tools { display: grid; gap: var(--space-4); margin-block-start: var(--space-2); width: 100%; }
  .toc { display: flex; flex-wrap: wrap; gap: .3rem 1rem; font-size: var(--fs-small); }
  .toc span { color: var(--color-encre-2); }

  /* Interrupteur */
  .switch { display: inline-flex; align-items: center; gap: .75rem; min-height: 44px; font-weight: 600; font-size: .9375rem; color: inherit; text-align: start; }
  .switch__track { position: relative; flex: none; inline-size: 2.75rem; block-size: 1.6rem; border-radius: var(--radius-pill); background: var(--color-sable); border: 1.5px solid var(--color-encre-2); transition: background-color var(--dur-2); }
  .switch__thumb { position: absolute; inset-block-start: 2px; inset-inline-start: 2px; inline-size: 1.15rem; block-size: 1.15rem; border-radius: 50%; background: var(--color-ivoire); box-shadow: var(--shadow-s); transition: transform var(--dur-3) var(--ease-out); }
  .switch[aria-checked="true"] .switch__track { background: var(--color-foret); border-color: var(--color-foret); }
  .switch[aria-checked="true"] .switch__thumb { transform: translateX(1.15rem); }

  /* Champs de formulaire */
  .field { display: grid; gap: .4rem; align-content: start; }
  .field > label, .fieldset > legend, .swatches > legend { font-weight: 600; font-size: .9375rem; }
  .opt { font-weight: 400; color: var(--color-encre-2); font-size: .875rem; }
  .field :is(input, select, textarea) { width: 100%; min-height: 3rem; padding: .7rem .9rem; border: 1.5px solid #8C7462; border-radius: var(--radius-s); background: var(--color-ivoire); color: var(--color-encre); transition: border-color var(--dur-2), box-shadow var(--dur-2); }
  .field textarea { min-height: 7rem; resize: vertical; line-height: 1.5; }
  .field select { appearance: none; padding-inline-end: 2.5rem; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%23271610' stroke-width='1.6' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right .75rem center; }
  .field :is(input, select, textarea):hover { border-color: var(--color-encre); }
  .field :is(input, select, textarea):focus-visible { outline: 2px solid var(--color-encre); outline-offset: 1px; border-color: var(--color-encre); }
  .field :is(input, select, textarea)[aria-invalid="true"] { border-color: var(--color-erreur); box-shadow: 0 0 0 1px var(--color-erreur); }
  .field__hint, .field__count { font-size: .8125rem; color: var(--color-encre-2); }
  .field__error { display: flex; gap: .35rem; align-items: flex-start; font-size: .875rem; font-weight: 600; color: var(--color-erreur); }
  .field--dark > label, .form--dark .field > label, .form--dark legend { color: var(--color-creme); }
  .form--dark .field__hint, .form--dark .opt { color: var(--color-creme-attenue); }
  .form--dark .field__error { color: #F4A58A; }
  .field--dark input { background-color: var(--color-nuit-2); border-color: rgb(248 241 227 / .35); color: var(--color-creme); }
  .form--dark .field :is(input, select, textarea) { background-color: var(--color-nuit-2); border-color: rgb(248 241 227 / .35); color: var(--color-creme); }
  .form--dark .field select { background-repeat: no-repeat; background-position: right .75rem center; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%23F8F1E3' stroke-width='1.6' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); }
  .form--dark .field select option { background: var(--color-nuit-2); }
  .form--dark .field :is(input, select, textarea):focus-visible, .field--dark input:focus-visible { outline-color: var(--color-ocre); border-color: var(--color-ocre); }
  .form--dark .field :is(input, select, textarea)[aria-invalid="true"] { border-color: #F4A58A; box-shadow: 0 0 0 1px #F4A58A; }
  .check { display: flex; gap: .7rem; align-items: flex-start; font-size: .9375rem; line-height: 1.45; }
  .check input { flex: none; inline-size: 1.35rem; block-size: 1.35rem; margin-block-start: .1rem; accent-color: var(--color-terracotta); }
  .check--dark { color: var(--color-creme-attenue); font-size: .875rem; }
  .check--dark input { accent-color: var(--color-ocre); }
  .form { display: grid; gap: var(--space-5); }
  .form-errors { border: 1.5px solid var(--color-erreur); background: #FBE9E2; color: var(--color-encre); border-radius: var(--radius-s); padding: 1rem 1.125rem; font-size: .9375rem; }
  .form-errors:focus-visible { outline-offset: 2px; }
  .form-errors ul { margin-block-start: .4rem; padding-inline-start: 1.1rem; }
  .form-errors a { color: var(--color-erreur); font-weight: 600; }
  .form-legal { font-size: .8125rem; color: var(--color-encre-2); }
  .form--dark .form-legal { color: var(--color-creme-attenue); }
  .form-success-panel { border-radius: var(--radius-m); padding: 1.25rem 1.375rem; background: #E4EEDF; border: 1px solid #A9C9A4; color: var(--color-encre); display: grid; gap: .5rem; }
  .form-success-panel:focus-visible { outline-offset: 3px; }
  .form-success-panel h3 { font-size: 1.25rem; }
  .form-success { color: var(--color-foret-clair); font-weight: 600; font-size: .9375rem; }
  .hp { position: absolute; inset-inline-start: -10000px; inline-size: 1px; block-size: 1px; overflow: hidden; }
  .fieldset > legend { margin-block-end: .75rem; }
  .checks-grid { display: grid; gap: .6rem 1.5rem; }
  @media (min-width: 40em) { .checks-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

  /* Puces bascule, segmenté, cartes radio */
  .chips { display: flex; flex-wrap: wrap; gap: .5rem; }
  .chip { display: inline-flex; align-items: center; gap: .4rem; min-height: 2.75rem; padding: .4rem .95rem; border-radius: var(--radius-pill); border: 1.5px solid rgb(39 22 16 / .3); background: var(--color-ivoire); color: var(--color-encre); font-size: .9rem; font-weight: 600; line-height: 1.2; transition: background-color var(--dur-2), border-color var(--dur-2), color var(--dur-2); }
  .chip:hover { border-color: var(--color-encre); }
  .chip[aria-pressed="true"] { background: var(--color-encre); border-color: var(--color-encre); color: var(--color-creme); }
  .chip--sans[aria-pressed="true"] { background: var(--color-terracotta); border-color: var(--color-terracotta); color: var(--color-ivoire); }
  .chip--sans::before { content: "Sans "; font-weight: 500; opacity: .75; }
  .chip--sans[aria-pressed="true"]::before { opacity: .9; }
  .chip:active { transform: scale(.97); }
  .seg { display: inline-flex; flex-wrap: nowrap; max-width: 100%; padding: .25rem; gap: .2rem; border-radius: var(--radius-pill); background: var(--color-lin); border: 1px solid var(--color-sable); }
  .seg__opt { position: relative; }
  .seg__opt input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
  .seg__opt span { display: inline-flex; align-items: center; min-height: 2.5rem; padding: .3rem .8rem; white-space: nowrap; border-radius: var(--radius-pill); font-weight: 600; font-size: .9rem; transition: background-color var(--dur-2), color var(--dur-2); }
  .seg__opt input:checked + span { background: var(--color-encre); color: var(--color-creme); }
  .seg__opt input:focus-visible + span { outline: 2px solid var(--color-encre); outline-offset: 2px; }
  .radio-cards { display: grid; gap: .75rem; }
  @media (min-width: 40em) { .radio-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } .radio-cards--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
  .radio-card { position: relative; display: block; cursor: pointer; }
  .radio-card input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
  .radio-card__body { display: grid; gap: .25rem; height: 100%; padding: 1rem 1.1rem; border-radius: var(--radius-m); border: 1.5px solid rgb(39 22 16 / .22); background: var(--color-ivoire); transition: border-color var(--dur-2), box-shadow var(--dur-2), background-color var(--dur-2); }
  .radio-card:hover .radio-card__body { border-color: var(--color-encre-2); }
  .radio-card input:checked + .radio-card__body { border-color: var(--color-terracotta); box-shadow: 0 0 0 1.5px var(--color-terracotta), var(--shadow-s); background: #FFF6EC; }
  .radio-card input:focus-visible + .radio-card__body { outline: 2px solid var(--color-encre); outline-offset: 3px; }
  .radio-card input:disabled + .radio-card__body { opacity: .55; cursor: not-allowed; background: repeating-linear-gradient(135deg, var(--color-lin) 0 6px, var(--color-ivoire) 6px 12px); }
  .radio-card__title { display: flex; align-items: center; gap: .45rem; font-weight: 650; }
  .radio-card__text { font-size: .875rem; color: var(--color-encre-2); }
  .radio-card__price { font-weight: 650; font-size: .95rem; }
  .radio-card--sm .radio-card__body { padding: .75rem .9rem; }

  /* Tableaux */
  .table-wrap { overflow-x: auto; border-radius: var(--radius-m); border: 1px solid var(--color-sable); background: var(--color-ivoire); }
  .table { width: 100%; font-size: .9375rem; }
  .table :is(th, td) { padding: .85rem 1rem; text-align: start; vertical-align: top; border-block-end: 1px solid var(--color-sable); }
  .table thead th { font-size: var(--fs-label); text-transform: uppercase; letter-spacing: .08em; color: var(--color-encre-2); font-weight: 650; background: var(--color-lin); }
  .table tbody th { font-weight: 650; }
  .table tr:last-child :is(th, td) { border-block-end: 0; }
  .table .num { text-align: end; white-space: nowrap; }

  /* FAQ */
  .faq { display: grid; border-block-start: 1px solid var(--color-ligne); }
  .faq__item { border-block-end: 1px solid var(--color-ligne); }
  .faq__item summary { list-style: none; display: flex; justify-content: space-between; gap: 1rem; align-items: center; padding-block: 1.1rem; font-family: var(--font-display); font-variation-settings: "SOFT" 100; font-size: 1.2rem; font-weight: 500; line-height: 1.3; min-height: 44px; }
  .faq__item summary::-webkit-details-marker { display: none; }
  .faq__icon { transition: transform var(--dur-3) var(--ease-out); color: var(--color-terracotta); }
  .faq__item[open] .faq__icon { transform: rotate(45deg); }
  .faq__a { padding-block-end: 1.25rem; color: var(--color-encre-2); max-width: 44rem; }
  .faq-grid { display: grid; gap: var(--space-6); }
  @media (min-width: 64em) { .faq-grid { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: var(--space-8); } .faq-grid > :first-child { position: sticky; top: calc(var(--header-h) + 2rem); align-self: start; display: grid; gap: var(--space-4); } }

  /* Dialogues */
  .modal { width: min(100% - 2rem, 32rem); max-height: calc(100svh - 2rem); overflow: auto; border-radius: var(--radius-l); background: var(--color-creme); color: var(--color-encre); padding: clamp(1.25rem, 1rem + 2vw, 2rem); box-shadow: var(--shadow-l); }
  .modal::backdrop, .sheet::backdrop, .lightbox::backdrop { background: rgb(28 17 12 / .62); }
  .modal > form, .modal { display: grid; gap: 1rem; }
  .modal:not([open]) { display: none; }
  .modal__head { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; }
  .modal__title { font-size: 1.5rem; }
  .modal__meta { color: var(--color-encre-2); font-size: .9375rem; }
  .modal__actions { display: flex; flex-wrap: wrap; gap: .75rem; justify-content: flex-end; }
  html:has(dialog[open]:modal) { overflow: hidden; }
  @media (prefers-reduced-motion: no-preference) {
    dialog[open] { transition: opacity var(--dur-3) var(--ease-out), translate var(--dur-3) var(--ease-out); }
    @starting-style { dialog[open] { opacity: 0; translate: 0 16px; } }
  }

  /* Carte cadeau (visuel) */
  .giftcard { --_bg: var(--color-terracotta); --_fg: var(--color-ivoire); --_acc: var(--color-ocre);
    position: relative; aspect-ratio: 1.586; width: 100%; border-radius: 4.5% / 7%; color: var(--_fg); container-type: inline-size; }
  .giftcard__face { position: absolute; inset: 0; border-radius: inherit; overflow: hidden; padding: 6.5cqi 7cqi; display: flex; flex-direction: column; background: var(--_bg); box-shadow: var(--shadow-l); backface-visibility: hidden; }
  .giftcard__face::before { content: ""; position: absolute; inset: 0; background: radial-gradient(120% 90% at 100% 0%, rgb(255 255 255 / .16), transparent 55%), var(--grain); opacity: .9; mix-blend-mode: soft-light; pointer-events: none; }
  .giftcard__face::after { content: ""; position: absolute; inset-inline: 0; inset-block-end: 0; height: 3.2cqi; background: var(--ndop-ocre) repeat-x center / auto 100%; opacity: .9; }
  .giftcard--terre { --_bg: linear-gradient(140deg, #B34F2A, #8E3A1C 70%); }
  .giftcard--foret { --_bg: linear-gradient(140deg, #2C5C38, #1B3B23 70%); }
  .giftcard--nuit { --_bg: linear-gradient(140deg, #2E1C13, #140B07 70%); --_fg: var(--color-creme); --_acc: var(--color-ocre); }
  .giftcard--nuit .giftcard__title { color: var(--color-ocre); }
  .giftcard__brand { display: flex; align-items: center; gap: 2cqi; font-family: var(--font-display); font-weight: 600; letter-spacing: .16em; font-size: 4.4cqi; }
  .giftcard__brand .logo__seed { width: 5cqi; height: 5cqi; }
  .giftcard .logo__seed path:first-child { fill: var(--color-ivoire); }
  .giftcard .logo__seed path:last-child { stroke: var(--color-terracotta); }
  .giftcard__kind { margin-block-start: auto; font-size: 3.2cqi; text-transform: uppercase; letter-spacing: .16em; opacity: .85; font-weight: 650; }
  .giftcard__title { font-family: var(--font-display); font-variation-settings: "SOFT" 100; font-size: 7.4cqi; line-height: 1.05; font-weight: 400; letter-spacing: -.01em; }
  .giftcard__for { font-size: 3.6cqi; font-weight: 600; margin-block-start: 1.6cqi; }
  .giftcard__msg { font-family: var(--font-display); font-style: italic; font-size: 3.5cqi; line-height: 1.3; opacity: .92; margin-block-start: 1.2cqi; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
  .giftcard__foot { display: flex; justify-content: space-between; gap: 2cqi; margin-block-start: 2.4cqi; margin-block-end: 2.6cqi; font-size: 2.8cqi; letter-spacing: .06em; }
  .giftcard__num { font-variant-numeric: tabular-nums; font-weight: 650; }
  .giftcard__cond { font-size: 3.2cqi; line-height: 1.45; margin-block-start: 4cqi; opacity: .92; }
  .giftcard__addr { margin-block-start: auto; margin-block-end: 3cqi; font-size: 3cqi; opacity: .85; }
  .giftcard__face--back { transform: rotateY(180deg); }
  .giftcard--demo .giftcard__face { position: absolute; }
  .giftcard--demo .giftcard__title { margin-block-start: auto; }
}

/* ---------- utilities ---------- */
@layer utilities {
  /* Rendu différé des blocs hors écran : la mise en page initiale ne porte que sur la première vue. */
  .site-footer, .cta-final { content-visibility: auto; contain-intrinsic-size: auto 26rem; }
  .js .cv-auto > section:nth-of-type(n+5) { content-visibility: auto; contain-intrinsic-size: auto 42rem; }
  .js .cv-auto--3 > section:nth-of-type(n+3):not(#commande):not(#devis) { content-visibility: auto; contain-intrinsic-size: auto 38rem; }
  .nowrap { white-space: nowrap; }
  .vh { position: absolute !important; inline-size: 1px !important; block-size: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip-path: inset(50%) !important; white-space: nowrap !important; border: 0 !important; }
  .js [data-reveal] { opacity: 0; transform: translateY(20px); transition: opacity var(--dur-5) var(--ease-out), transform var(--dur-5) var(--ease-out); transition-delay: calc(var(--i, 0) * 60ms); }
  .js [data-reveal].is-visible, .js.reveal-done [data-reveal] { opacity: 1; transform: none; }
  @media (prefers-reduced-motion: reduce) {
    .js [data-reveal] { opacity: 1; transform: none; transition: none; }
    *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
  }
}

/* ---------- pages ---------- */
@layer pages {
  /* Les conteneurs défilants servent de bloc conteneur : les textes masqués (.vh) restent rognés à l'intérieur. */
  .sig-list, .atable-wrap, .table-wrap, .hours-wrap, .terrain-wrap, .tablist, .sheet__body, .wa-bubble, .slots { position: relative; }
  .legal > *, .faq-grid > *, .hours-grid > *, .resa-layout > *, .order-grid > *, .gift-layout > *, .devis__grid > *, .zones__grid > *, .contact-form-grid > *, .acces__grid > * { min-width: 0; }
  .status-slot { min-height: 3.6rem; display: flex; align-items: flex-start; }
  @media (max-width: 47.99em) { .page-head__status { min-height: 6.6rem; align-content: start; } }
  .page-head--nuit .lead, .section--nuit .lead, .section--nuit .section-head__aside { color: var(--color-creme-attenue); }
  @media (max-width: 22em) { .seg { flex-wrap: wrap; } }
  .page-head__status { display: grid; gap: .25rem; justify-items: start; }
  .alert { display: flex; gap: .75rem; align-items: flex-start; padding: .9rem 1rem; border-radius: var(--radius-s); font-size: .95rem; background: #FBEBDC; border: 1px solid #E8B79A; }
  .alert .icon { margin-block-start: .15rem; color: var(--color-terracotta-texte); }
  .alert--info { background: #EEF3EC; border-color: #BFD4BC; }
  .alert--info .icon { color: var(--color-foret); }
  .alert--error { background: #FBE6E0; border-color: var(--color-erreur); }
  .alert--error .icon { color: var(--color-erreur); }
  .alert > div { display: grid; gap: .4rem; justify-items: start; }
  .slots { display: grid; grid-template-columns: repeat(auto-fill, minmax(5.5rem, 1fr)); gap: .5rem; }
  .slot { position: relative; }
  .slot input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
  .slot span { display: grid; place-items: center; gap: 0; min-height: 3rem; padding: .35rem .25rem; border-radius: var(--radius-pill); border: 1.5px solid rgb(39 22 16 / .3); background: var(--color-creme); font-weight: 650; font-size: .95rem; text-align: center; line-height: 1.15; font-variant-numeric: tabular-nums; transition: background-color var(--dur-2), color var(--dur-2), border-color var(--dur-2); }
  .slot small { font-size: .68rem; font-weight: 650; text-transform: uppercase; letter-spacing: .04em; }
  .slot:hover input:not(:disabled) + span { border-color: var(--color-encre); }
  .slot input:checked + span { background: var(--color-terracotta); border-color: var(--color-terracotta); color: var(--color-ivoire); }
  .slot span { position: relative; }
  .slot input:checked + span::before { content: "✓"; position: absolute; inset-block-start: -7px; inset-inline-end: -3px; display: grid; place-items: center; inline-size: 18px; block-size: 18px; border-radius: 50%; background: var(--color-foret); color: var(--color-ivoire); font-size: 11px; font-weight: 700; box-shadow: 0 0 0 2px var(--color-ivoire); }
  .slot input:focus-visible + span { outline: 2px solid var(--color-encre); outline-offset: 2px; }
  .slot--last span { border-color: var(--color-ocre); }
  .slot--last small { color: var(--color-ocre-texte); }
  .slot--last input:checked + span small { color: var(--color-ivoire); }
  .slot--full span { text-decoration: line-through; color: rgb(94 70 54 / .7); background: repeating-linear-gradient(135deg, var(--color-lin) 0 4px, var(--color-ivoire) 4px 8px); border-color: transparent; cursor: not-allowed; }
  .slot--full small { text-decoration: none; }
  .slot--mine span { border-color: var(--color-foret); background: #E4EEDF; color: var(--color-foret); cursor: default; }
  .allergy-chips { display: flex; flex-wrap: wrap; gap: .4rem; }
  .allergy-chips .chip { min-height: 2.5rem; font-size: .85rem; padding-inline: .8rem; }
  .confirm__actions { display: flex; flex-wrap: wrap; gap: .75rem; }
  .hours-grid { display: grid; gap: var(--space-6); }
  .hours-grid > div:first-child { display: grid; gap: var(--space-4); align-content: start; justify-items: start; }
  @media (min-width: 64em) { .hours-grid { grid-template-columns: .85fr 1.15fr; gap: var(--space-8); } }
  .hours-wrap { overflow-x: auto; border-radius: var(--radius-m); border: 1px solid var(--color-sable); background: var(--color-ivoire); }
  .hours { width: 100%; font-size: .95rem; }
  .hours :is(th, td) { padding: .75rem 1rem; text-align: start; border-block-end: 1px solid var(--color-sable); vertical-align: top; }
  .hours thead th { font-size: var(--fs-label); text-transform: uppercase; letter-spacing: .08em; color: var(--color-encre-2); background: var(--color-lin); }
  .hours tbody th { font-weight: 650; white-space: nowrap; }
  .hours tr.is-today :is(th, td) { background: #FBEBDC; }
  .hours tr.is-today th { box-shadow: inset 3px 0 0 var(--color-terracotta); }
  .hours__today { color: var(--color-terracotta-texte); }
  .closures { margin-block-start: var(--space-5); display: grid; gap: .5rem; }
  .closures__list { padding-inline-start: 1.1rem; display: grid; gap: .35rem; font-size: .95rem; }
  .contact-cards { display: grid; gap: var(--space-4); }
  @media (min-width: 48em) { .contact-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
  .contact-card { padding: 1.5rem; border-radius: var(--radius-m); background: var(--color-ivoire); border: 1px solid var(--color-sable); display: grid; gap: .5rem; align-content: start; transition: box-shadow var(--dur-3), transform var(--dur-3) var(--ease-out); }
  .contact-card:hover { box-shadow: var(--shadow-m); transform: translateY(-2px); }
  .contact-card__link { display: grid; gap: .35rem; text-decoration: none; color: var(--color-encre); }
  .contact-card__link .icon { color: var(--color-terracotta); margin-block-end: .5rem; }
  .contact-card__title { font-family: var(--font-display); font-size: 1.4rem; font-weight: 500; }
  .contact-card__value { font-weight: 650; color: var(--color-terracotta-texte); text-decoration: underline; text-underline-offset: .18em; overflow-wrap: anywhere; }
  .contact-card p { font-size: .9rem; color: var(--color-encre-2); }
  .hours-card { display: grid; gap: .6rem; justify-items: start; padding: 1.25rem 1.5rem; border-radius: var(--radius-m); background: var(--color-lin); border: 1px solid var(--color-sable); font-size: .95rem; }
  .hours-card__title { display: flex; align-items: center; gap: .45rem; font-weight: 700; }
  .legal { display: grid; gap: var(--space-6); }
  .legal__toc { padding: 1.25rem 1.4rem; border-radius: var(--radius-m); background: var(--color-lin); align-self: start; }
  .legal__toc-title { font-weight: 700; margin-block-end: .5rem; }
  .legal__toc ol { padding-inline-start: 1.2rem; display: grid; gap: .3rem; font-size: .93rem; }
  .legal__body { max-width: 46rem; }
  .legal__sec { scroll-margin-top: calc(var(--header-h) + 1rem); padding-block-end: var(--space-5); border-block-end: 1px solid var(--color-ligne); }
  .legal__sec + .legal__sec { margin-block-start: var(--space-5); }
  .legal__sec > * + * { margin-block-start: .8em; }
  .credits { font-size: .9rem; display: grid; gap: .5rem; padding-inline-start: 1.1rem; }
  .clear-data { display: grid; gap: .75rem; justify-items: start; padding: 1.25rem; border-radius: var(--radius-m); background: var(--color-lin); }
  .clear-data__msg { font-weight: 600; color: var(--color-foret); }
  @media (min-width: 64em) { .legal { grid-template-columns: 17rem 1fr; gap: var(--space-8); } .legal__toc { position: sticky; top: calc(var(--header-h) + 1.5rem); } }
  .notfound { min-height: 70svh; display: grid; align-items: center; position: relative; }
  .notfound__inner { display: grid; gap: var(--space-4); justify-items: start; }
  .notfound__seed { color: var(--color-terracotta-nuit); }
  .notfound__title { font-size: var(--fs-display); font-weight: 340; line-height: 1; letter-spacing: -.02em; max-width: 14ch; }
  .notfound .lead { color: var(--color-creme-attenue); }
  .notfound__links { display: flex; flex-wrap: wrap; gap: .75rem; margin-block-start: var(--space-3); }
  .sitemap { columns: 2; column-gap: 2rem; padding-inline-start: 1.1rem; }
  .sitemap li { break-inside: avoid; }
  .site-footer { position: relative; padding-block: clamp(3.5rem, 2.5rem + 4vw, 6rem) calc(2rem + var(--stack-pad, 0px)); font-size: .95rem; }
  .site-footer__inner { width: min(100% - 2 * var(--gutter), var(--w-wide)); margin-inline: auto; display: grid; gap: var(--space-6); }
  .site-footer__brand { display: grid; gap: .9rem; justify-items: start; align-content: start; }
  .logo--footer { color: var(--color-creme); font-size: 1.6rem; }
  .site-footer__sig { font-family: var(--font-display); font-variation-settings: "SOFT" 100; font-size: 1.35rem; line-height: 1.3; max-width: 20ch; }
  .site-footer__sig em { color: var(--color-ocre); }
  .site-footer__addr { color: var(--color-creme-attenue); line-height: 1.55; }
  .site-footer__title { font-family: var(--font-body); font-size: var(--fs-label); text-transform: uppercase; letter-spacing: .14em; font-weight: 650; color: var(--color-ocre); margin-block-end: .9rem; }
  .site-footer__list { list-style: none; padding: 0; display: grid; gap: .1rem; }
  .site-footer__list a { display: inline-flex; align-items: center; gap: .5rem; color: var(--color-creme); text-decoration: none; min-height: 40px; }
  .site-footer__list a:hover { color: var(--color-ocre); text-decoration: underline; }
  .site-footer__list a[aria-current="page"] { color: var(--color-ocre); }
  .site-footer__small { font-size: .875rem; color: var(--color-creme-attenue); }
  .site-footer__hours { color: var(--color-creme-attenue); line-height: 1.6; margin-block-end: .9rem; }
  .site-footer__news { display: grid; gap: .75rem; align-content: start; color-scheme: dark; }
  @media (min-width: 64em) { .site-footer__list--nav { gap: 0; } .site-footer__list--nav a { min-height: 34px; } }
  .newsletter { display: grid; gap: .8rem; }
  .newsletter__row { display: flex; gap: .5rem; }
  .newsletter__row input { flex: 1; min-width: 0; min-height: 3rem; padding: .6rem .9rem; border-radius: var(--radius-pill); }
  .newsletter__row .btn { flex: none; }
  .field--dark label { font-size: .875rem; font-weight: 600; }
  .site-footer__bottom { width: min(100% - 2 * var(--gutter), var(--w-wide)); margin: clamp(2.5rem, 2rem + 2vw, 4rem) auto 0; padding-block-start: 1.5rem; border-block-start: 1px solid var(--color-ligne-nuit); display: grid; gap: .6rem; }
  .site-footer__legal { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: .25rem 1.25rem; }
  .site-footer__legal a { color: var(--color-creme); min-height: 40px; display: inline-flex; align-items: center; }
  .site-footer__demo { color: var(--color-creme); font-size: .9rem; }
  .site-footer__demo a { color: var(--color-ocre); font-weight: 650; }
  .site-footer a:not(.btn):focus-visible { outline-color: var(--color-ocre); }
  @media (min-width: 40em) { .site-footer__inner { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
  @media (min-width: 64em) {
    .site-footer__inner { grid-template-columns: 1.3fr 1fr .9fr .9fr 1.4fr; gap: var(--space-6); }
  }
}


/* ---------- impression ---------- */
@media print {
  .site-footer, .cta-final, .cv-auto > section, .cv-auto--3 > section { content-visibility: visible !important; }
  .site-header, .action-bar, .site-footer, .cta-final, .msd-badge, .msd-toasts, .filters-wrap, .tablist { display: none !important; }
  body { background: #fff; color: #000; padding: 0; }
  .section--nuit, .page-head--nuit { background: #fff; color: #000; }
  a { color: #000; }
  .js [data-reveal] { opacity: 1; transform: none; }
  .js .menu-section[hidden] { display: block !important; }
}

/* ---------- sélecteur de langue FR | EN ---------- */
@layer components {
  .lang { display: inline-flex; align-items: center; gap: .1rem; font-weight: 650; font-size: .875rem; letter-spacing: .06em; }
  .lang a { display: inline-flex; align-items: center; justify-content: center; min-inline-size: 44px; min-block-size: 44px; padding-inline: .35rem; color: inherit; text-decoration: none; position: relative; }
  .lang a::after { content: ""; position: absolute; inset-inline: .5rem; inset-block-end: .55rem; height: 2px; background: currentColor; transform: scaleX(0); transition: transform var(--dur-3) var(--ease-out); }
  .lang a:hover { color: inherit; }
  .lang a:hover::after, .lang a[aria-current="true"]::after { transform: scaleX(1); }
  .lang a[aria-current="true"] { cursor: default; }
  .lang .sep { opacity: .45; }
  .lang--header { display: none; }
  @media (min-width: 64em) { .lang--header { display: inline-flex; } }
  .lang--panel { display: inline-flex; margin-inline-start: -.35rem; }
  @media (min-width: 64em) { .lang--panel { display: none; } }
  .lang--footer { color: var(--color-creme); justify-self: start; margin-inline-start: -.35rem; }
  .site-header--overlay:not(.is-solid) .lang--header { color: var(--color-creme); }
  :lang(en) .chip--sans::before { content: "No "; }
}