/* ════════════════════════════════════════════════════════════════════════════
   Miam's Resto Café — feuille de style unique, sans dépendance.

   Identité reprise de leur enseigne (façade, 4887 Bd des Forges) : script blanc
   « Miam's » et accent or sur fond marine — couleurs mesurées directement sur
   la photo de l'enseigne (marine ~#233c6b, or ~#c0a386). Logo fourni en texte
   (voir prospect-maison-parc-delormier pour le même choix) : l'extraction
   photo de l'enseigne, prise en angle sous un ciel bleu, ne donnait rien de
   propre — un seuillage classique y confondait le ciel et le bâtiment blanc
   avec les lettres blanches du script. Papier crème, titres en Fraunces,
   texte en Karla, script du nom en Pacifico. Le marine sert de fond sombre
   (hero, bandeau, pied de page) ; l'or sert d'accent sur fond clair et sombre.
   ════════════════════════════════════════════════════════════════════════════ */

/* ── Jetons ─────────────────────────────────────────────────────────────────
   Le bloc :root nu porte la palette claire complète. Les deux blocs qui
   suivent ne redéfinissent QUE des jetons, jamais des composants — sinon une
   couleur définie seulement sous @media ne s'applique pas en mode « système ».
   ────────────────────────────────────────────────────────────────────────── */
:root {
  --ink: #1f3660;              /* marine de leur enseigne */
  --ink-soft: #2a4474;
  --paper: #faf7f1;            /* papier crème */
  --card: #fffdf9;
  --line: #e7ddca;
  --text: #1c1a16;
  --muted: #6d6456;            /* gris-brun, décalé vers l'accent */
  --crust: #b8863f;            /* or de leur enseigne, assombri pour rester lisible en texte */
  --crust-soft: #f3e8d4;
  --wheat: #e3b968;            /* or éclairci, pour les fonds sombres */
  --on-dark: #f3efe4;
  --on-dark-muted: #aab1c4;
  --shadow: 0 1px 2px rgba(31, 54, 96, .05), 0 8px 24px -12px rgba(31, 54, 96, .16);
  --shadow-lg: 0 2px 6px rgba(31, 54, 96, .06), 0 24px 60px -28px rgba(31, 54, 96, .3);
  --r: 14px;
  --wrap: 1200px;
  --pad: clamp(20px, 5vw, 40px);
  --sans: "Karla", "Helvetica Neue", Arial, sans-serif;
  --serif: "Fraunces", "Iowan Old Style", Georgia, serif;
  --script: "Pacifico", cursive;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper: #10152a;
    --card: #19203a;
    --line: #2b3454;
    --text: #eef0f5;
    --muted: #a9aec4;
    --crust: #e3b968;
    --crust-soft: #2e2719;
    --shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 8px 24px -12px rgba(0, 0, 0, .6);
    --shadow-lg: 0 2px 6px rgba(0, 0, 0, .45), 0 24px 60px -28px rgba(0, 0, 0, .8);
  }
}
:root[data-theme="dark"] {
  --paper: #10152a;
  --card: #19203a;
  --line: #2b3454;
  --text: #eef0f5;
  --muted: #a9aec4;
  --crust: #e3b968;
  --crust-soft: #2e2719;
  --shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 8px 24px -12px rgba(0, 0, 0, .6);
  --shadow-lg: 0 2px 6px rgba(0, 0, 0, .45), 0 24px 60px -28px rgba(0, 0, 0, .8);
}

/* ── Socle ─────────────────────────────────────────────────────────────── */
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0;
  background: var(--paper);
  color: var(--text);
  font: 400 17px/1.65 var(--sans);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img { max-width: 100%; height: auto; display: block; }
p { margin: 0 0 1em; }
a { color: inherit; }
:focus-visible { outline: 2.5px solid var(--crust); outline-offset: 3px; border-radius: 4px; }
.wrap { width: min(100% - 2 * var(--pad), var(--wrap)); margin-inline: auto; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip { position: absolute; left: -9999px; }
.skip:focus { left: 12px; top: 12px; z-index: 100; background: var(--ink); color: var(--on-dark); padding: 10px 16px; border-radius: 8px; }

/* ── Écran d'ouverture ─────────────────────────────────────────────────── */
.splash {
  position: fixed; inset: 0; z-index: 999; display: flex; align-items: center; justify-content: center;
  background: var(--ink); animation: splash-out .5s ease forwards; animation-delay: 1.5s;
}
.splash__mark { animation: splash-logo-in .6s cubic-bezier(.22,1,.36,1) both .1s; }
.logo-mark { display: block; }
.splash .logo-mark { width: min(80vw, 460px); height: auto; }
@keyframes splash-logo-in { from { opacity: 0; transform: translateY(8px) scale(.96); } to { opacity: 1; transform: none; } }
@keyframes splash-out { to { opacity: 0; visibility: hidden; pointer-events: none; } }
@media (prefers-reduced-motion: reduce) {
  .splash { animation-duration: .01s; animation-delay: .3s; }
  .splash__mark { animation: none; }
}

h1, h2, h3 { font-family: var(--serif); font-weight: 600; line-height: 1.08; letter-spacing: -.015em; text-wrap: balance; margin: 0 0 .5em; font-variation-settings: "SOFT" 20; }
h1 { font-size: clamp(2.5rem, 6.4vw, 4.6rem); }
h2 { font-size: clamp(1.9rem, 4vw, 3rem); }
h3 { font-size: 1.15rem; line-height: 1.25; }
h1 em, h2 em { font-style: italic; font-weight: 400; color: var(--crust); }

.eyebrow {
  font-family: var(--sans); font-size: .76rem; font-weight: 700;
  letter-spacing: .13em; text-transform: uppercase; color: var(--muted);
  margin: 0 0 .9em;
}
.lede { font-size: clamp(1.05rem, 1.7vw, 1.22rem); line-height: 1.6; }

/* ── Boutons ───────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5em;
  padding: 13px 24px; border-radius: 999px; border: 1.5px solid transparent;
  font: 600 .96rem/1 var(--sans); letter-spacing: .01em; text-decoration: none;
  cursor: pointer; transition: transform .18s, background-color .18s, border-color .18s, color .18s, box-shadow .18s;
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }
.btn--gold { background: var(--wheat); color: #0d1613; box-shadow: 0 10px 24px -14px rgba(79, 156, 120, .75); }
.btn--gold:hover { background: #63ab84; }
.btn--ink { background: var(--ink); color: var(--on-dark); }
.btn--ink:hover { background: var(--ink-soft); }
.btn--ghost { background: transparent; border-color: rgba(245, 238, 226, .45); color: var(--on-dark); }
.btn--ghost:hover { border-color: var(--on-dark); background: rgba(245, 238, 226, .1); }
.btn--outline { background: transparent; border-color: var(--line); color: var(--text); }
.btn--outline:hover { border-color: var(--crust); color: var(--crust); }
.btn--lg { padding: 16px 30px; font-size: 1.02rem; }

.tag {
  display: inline-block; margin-left: .7em; padding: 3px 10px; border-radius: 999px;
  background: var(--crust-soft); color: var(--crust);
  font: 600 .66rem/1.5 var(--sans); letter-spacing: .09em; text-transform: uppercase;
  vertical-align: middle;
}

/* ── Bandeau d'annonce ─────────────────────────────────────────────────── */
.announce { background: var(--ink); color: var(--on-dark); font-size: .92rem; padding: 10px 0; text-align: center; }
.announce a { color: var(--wheat); font-weight: 600; }
.announce[hidden] { display: none; }

/* ── En-tête ───────────────────────────────────────────────────────────── */
.top {
  position: sticky; top: 0; z-index: 50;
  background: color-mix(in srgb, var(--paper) 88%, transparent);
  backdrop-filter: saturate(150%) blur(12px);
  transition: box-shadow .25s, background-color .25s, border-color .25s;
  border-bottom: 1px solid transparent;
}
.top.is-scrolled { border-bottom-color: var(--line); box-shadow: 0 6px 24px -20px rgba(23, 19, 15, .8); }
.top__row { display: flex; align-items: center; justify-content: space-between; gap: 20px; min-height: 88px; }
.brand { display: inline-flex; align-items: baseline; gap: .5em; text-decoration: none; line-height: 1; }
.logo-mark--brand { height: 58px; width: auto; }

.nav { display: flex; align-items: center; gap: 26px; }
.nav a { text-decoration: none; font-size: .95rem; font-weight: 500; color: var(--muted); transition: color .18s; }
.nav a:hover { color: var(--text); }
.nav__cta {
  padding: 9px 18px; border-radius: 999px; background: var(--ink); color: var(--on-dark) !important;
  font-weight: 600 !important; font-variant-numeric: tabular-nums;
}
.nav__cta:hover { background: var(--crust); }

.burger { display: none; width: 44px; height: 44px; border: 0; background: none; cursor: pointer; padding: 10px; }
.burger span { display: block; height: 2px; background: var(--text); border-radius: 2px; transition: transform .25s, opacity .2s; }
.burger span + span { margin-top: 6px; }
.burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

@media (max-width: 900px) {
  .burger { display: block; margin-left: auto; }
  .nav {
    position: absolute; inset: 100% 0 auto; display: none; flex-direction: column;
    align-items: stretch; gap: 0; padding: 10px var(--pad) 22px;
    background: var(--paper); border-bottom: 1px solid var(--line); box-shadow: var(--shadow);
  }
  .nav.is-open { display: flex; }
  .nav a { padding: 13px 0; border-bottom: 1px solid var(--line); font-size: 1.05rem; }
  .nav__cta { margin-top: 14px; text-align: center; border-bottom: 0 !important; }
}

/* ── Héros ─────────────────────────────────────────────────────────────── */
.hero { position: relative; isolation: isolate; color: var(--on-dark); background: var(--ink); overflow: hidden; }
.hero__media { position: absolute; inset: -6% 0 0; z-index: -2; will-change: transform; }
.hero__media img { width: 100%; height: 112%; object-fit: cover; filter: brightness(.42) saturate(1.05); }
.hero::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(180deg, rgba(23, 19, 15, .8) 0%, rgba(23, 19, 15, .3) 34%, rgba(23, 19, 15, .86) 100%),
    linear-gradient(95deg, rgba(23, 19, 15, .72) 0%, rgba(23, 19, 15, .1) 66%);
}
.hero__inner { position: relative; padding: clamp(84px, 15vh, 150px) 0 clamp(60px, 10vh, 104px); max-width: 860px; }
.hero h1 { color: #fff; margin-bottom: .34em; }
.hero h1 em { color: var(--wheat); }
.hero .eyebrow { color: rgba(245, 238, 226, .72); }
.hero .lede { color: rgba(245, 238, 226, .9); max-width: 60ch; }

.hero__status {
  display: inline-flex; align-items: center; gap: 9px; margin: 0 0 22px;
  padding: 7px 15px 7px 12px; border-radius: 999px;
  background: rgba(20, 17, 14, .55); border: 1px solid rgba(245, 238, 226, .22);
  font-size: .86rem; font-weight: 600; color: var(--on-dark);
  backdrop-filter: blur(6px);
}

.hero__actions { display: flex; flex-wrap: wrap; gap: 12px; margin: 30px 0 34px; }
.hero__proof { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; font-size: .9rem; color: rgba(245, 238, 226, .8); }
.hero__proof b { font-family: var(--serif); font-size: 1.22rem; font-weight: 600; color: var(--wheat); margin-right: .25em; font-variant-numeric: tabular-nums; }
.hero__proof i { width: 4px; height: 4px; border-radius: 50%; background: rgba(245, 238, 226, .35); }

/* ── Promo (publiée depuis l'admin) ────────────────────────────────────── */
.promo { background: var(--crust-soft); border-bottom: 1px solid var(--line); }
.promo__row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 22px; padding: 30px 0; }
.promo h2 { font-size: 1.5rem; margin-bottom: .25em; }
.promo p { margin: 0; color: var(--muted); max-width: 62ch; }

/* ── Valeurs ───────────────────────────────────────────────────────────── */
.values { padding: clamp(56px, 8vw, 88px) 0 0; }
.values__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; }
.value { background: var(--card); padding: 30px 26px; }
.value h3 { font-family: var(--sans); font-weight: 700; font-size: .95rem; letter-spacing: -.005em; margin-bottom: .55em; }
.value p { margin: 0; font-size: .93rem; color: var(--muted); line-height: 1.6; }

/* ── La semaine : le bloc signature ────────────────────────────────────── */
.week { padding: clamp(60px, 9vw, 104px) 0 clamp(20px, 4vw, 40px); }
.section-head { max-width: 680px; margin-bottom: 40px; }
.section-head__note { color: var(--muted); font-size: 1rem; margin: 0; }
.section-head--row { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 24px; max-width: none; }

.week__scroll { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--r); background: var(--card); box-shadow: var(--shadow); }
.week__table { width: 100%; border-collapse: collapse; min-width: 620px; font-size: .95rem; }
.week__table th, .week__table td { padding: 15px 12px; border-bottom: 1px solid var(--line); text-align: center; }
.week__table tbody tr:last-child th, .week__table tbody tr:last-child td { border-bottom: 0; }
.week__table thead th { padding-block: 17px; background: var(--paper); }
.week__table thead th span { font: 700 .74rem/1 var(--sans); letter-spacing: .13em; text-transform: uppercase; color: var(--muted); }
.week__table thead th:first-child { text-align: left; padding-left: 22px; }
.week__table thead th.is-feature span { color: var(--crust); }
.week__table tbody th {
  text-align: left; padding-left: 22px; font: 600 .97rem/1.35 var(--sans);
  min-width: 250px;
}
.week__table tbody th small { display: block; font-weight: 400; font-size: .82rem; color: var(--muted); margin-top: 3px; }
.week__table td { color: var(--crust); font-size: 1.05rem; width: 12%; }
.week__table td.is-off { color: var(--line); }
.week__table td.is-feature { background: color-mix(in srgb, var(--crust-soft) 60%, transparent); }
.week__star td.is-feature { font-size: 1.25rem; color: var(--wheat); }
.week__star th { color: var(--crust); }
.week__note { margin: 20px 0 0; font-size: .93rem; color: var(--muted); }
.week__note a { color: var(--crust); font-weight: 600; font-variant-numeric: tabular-nums; }

/* ── La carte ──────────────────────────────────────────────────────────── */
.menus { padding: clamp(60px, 9vw, 104px) 0; }
.tabs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 34px; border-bottom: 1px solid var(--line); padding-bottom: 16px; }
.tab {
  padding: 10px 18px; border-radius: 999px; border: 1.5px solid var(--line); background: transparent;
  font: 600 .93rem/1 var(--sans); color: var(--muted); cursor: pointer;
  transition: background-color .18s, color .18s, border-color .18s;
}
.tab:hover { color: var(--text); border-color: var(--muted); }
.tab.is-active { background: var(--ink); border-color: var(--ink); color: var(--on-dark); }
.menu-panel[hidden] { display: none; }

.carte { display: grid; grid-template-columns: repeat(auto-fit, minmax(310px, 1fr)); gap: clamp(28px, 4vw, 56px); align-items: start; }
.carte__intro { max-width: 68ch; color: var(--muted); margin-bottom: 30px; }
.carte__h { display: flex; align-items: baseline; flex-wrap: wrap; font-size: 1.32rem; margin: 34px 0 14px; padding-bottom: 10px; border-bottom: 1px solid var(--line); }
.carte__col > .carte__h:first-child { margin-top: 0; }
.carte__secnote { font-size: .88rem; color: var(--muted); margin: -6px 0 14px; line-height: 1.55; }
.carte__note { margin: 34px 0 0; font-size: .88rem; color: var(--muted); max-width: 78ch; }

.dishes { list-style: none; margin: 0; padding: 0; }
.dishes li { display: flex; align-items: baseline; gap: 14px; padding: 11px 0; border-bottom: 1px dotted var(--line); }
.dishes li:last-child { border-bottom: 0; }
.dish { flex: 1; }
.dish b { font-weight: 600; font-size: 1rem; }
.dish small { display: block; font-size: .875rem; color: var(--muted); line-height: 1.5; margin-top: 2px; }
.price { font-family: var(--serif); font-weight: 600; font-size: 1rem; white-space: nowrap; font-variant-numeric: tabular-nums; }
.price:empty { display: none; }

.carte__photo { margin: 28px 0 0; border-radius: var(--r); overflow: hidden; background: var(--card); border: 1px solid var(--line); }
.carte__photo img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
.carte__photo figcaption { padding: 12px 16px; font-size: .86rem; color: var(--muted); }

/* ── Incontournables ───────────────────────────────────────────────────── */
.features { padding: 0 0 clamp(60px, 9vw, 104px); }
.features__note { max-width: 40ch; font-size: .92rem; color: var(--muted); margin: 0; }
.features__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 22px; }
.feature { margin: 0; border-radius: var(--r); overflow: hidden; background: var(--card); border: 1px solid var(--line); box-shadow: var(--shadow); }
.feature img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; transition: transform .6s cubic-bezier(.22, 1, .36, 1); }
.feature:hover img { transform: scale(1.04); }
.feature figcaption { padding: 20px 22px 24px; }
.feature b { display: block; font-family: var(--serif); font-weight: 600; font-size: 1.2rem; margin-bottom: .3em; }
.feature span { font-size: .92rem; color: var(--muted); line-height: 1.55; }

/* ── Galerie ───────────────────────────────────────────────────────────── */
.gallery { padding: 0 0 clamp(60px, 9vw, 104px); }
.gallery__grid { display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: 190px; gap: 14px; }
.gallery__grid figure { margin: 0; border-radius: var(--r); overflow: hidden; background: var(--card); box-shadow: var(--shadow); }
.gallery__grid figure:nth-child(3n+1) { grid-column: span 2; grid-row: span 2; }
.gallery__grid img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s cubic-bezier(.22, 1, .36, 1); }
.gallery__grid figure:hover img { transform: scale(1.045); }
@media (max-width: 760px) {
  .gallery__grid { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 160px; }
  .gallery__grid figure:nth-child(3n+1) { grid-column: span 2; grid-row: span 1; }
}

/* ── Histoire (bande sombre) ───────────────────────────────────────────── */
.split { background: var(--ink); color: var(--on-dark); padding: clamp(64px, 9vw, 110px) 0; }
.split__grid { display: grid; grid-template-columns: .9fr 1fr; gap: clamp(32px, 5vw, 72px); align-items: start; margin-top: clamp(36px, 5vw, 60px); }
.split__media { margin: 0; border-radius: var(--r); overflow: hidden; }
.split__media img { width: 100%; aspect-ratio: 8 / 3; object-fit: cover; }
.split__text { position: sticky; top: 104px; }
.split__text .eyebrow { color: rgba(245, 238, 226, .6); }
.split__text h2 { color: #fff; }
.split__text h2 em { color: var(--wheat); }
.split__p { color: rgba(245, 238, 226, .78); font-size: .97rem; margin: 22px 0 0; max-width: 48ch; }

.timeline { list-style: none; margin: 0; padding: 0 0 0 26px; border-left: 1px solid rgba(245, 238, 226, .2); display: grid; gap: 20px; }
.timeline li { position: relative; display: grid; gap: 4px; }
.timeline li::before {
  content: ""; position: absolute; left: -30px; top: .55em;
  width: 9px; height: 9px; border-radius: 50%; background: var(--wheat);
  box-shadow: 0 0 0 4px var(--ink);
}
.timeline b { font-family: var(--serif); font-size: 1.12rem; font-weight: 600; color: var(--wheat); font-variant-numeric: tabular-nums; }
.timeline span { font-size: .95rem; color: rgba(245, 238, 226, .8); line-height: 1.55; }

/* ── Bandeau pain du partage ───────────────────────────────────────────── */
.banner { position: relative; isolation: isolate; color: var(--on-dark); background: var(--ink-soft); overflow: hidden; }
.banner__media { position: absolute; inset: 0; z-index: -2; }
.banner__media img { width: 100%; height: 100%; object-fit: cover; filter: brightness(.34) saturate(.9); }
.banner::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(92deg, rgba(23, 19, 15, .88) 10%, rgba(23, 19, 15, .42) 92%); }
.banner__content { position: relative; padding: clamp(60px, 9vw, 104px) 0; max-width: 620px; }
.banner .eyebrow { color: var(--wheat); }
.banner h2 { color: #fff; }
.banner h2 em { color: var(--wheat); }
.banner p { color: rgba(245, 238, 226, .88); margin-bottom: 28px; }

/* ── L'équipe ──────────────────────────────────────────────────────────── */
.community { padding: clamp(60px, 9vw, 104px) 0; }
.community__grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 5vw, 72px); align-items: center; }
.community__text p { color: var(--muted); max-width: 54ch; }
.community__p { font-size: .92rem; font-style: italic; }
.community__media { margin: 0; border-radius: var(--r); overflow: hidden; border: 1px solid var(--line); }
.community__media img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; }

.facts-list { list-style: none; margin: 26px 0; padding: 0; display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; }
.facts-list li { background: var(--card); padding: 18px 22px; }
.facts-list b { display: block; font-family: var(--serif); font-size: 1.1rem; font-weight: 600; margin-bottom: .18em; }
.facts-list span { font-size: .92rem; color: var(--muted); }

/* ── Avis ──────────────────────────────────────────────────────────────── */
.reviews { background: var(--crust-soft); padding: clamp(60px, 9vw, 104px) 0; }
.reviews__head { max-width: 620px; margin-bottom: 38px; }
.reviews__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(255px, 1fr)); gap: 18px; }
.review { margin: 0; background: var(--card); border: 1px solid var(--line); border-radius: var(--r); padding: 26px 24px 22px; box-shadow: var(--shadow); }
.review p { font-size: .96rem; line-height: 1.62; margin-bottom: 1.1em; }
.review footer { font-size: .82rem; color: var(--muted); font-weight: 600; }

.chips { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 28px; }
.chip { display: inline-flex; align-items: baseline; gap: .45em; padding: 7px 15px; border-radius: 999px; background: var(--card); border: 1px solid var(--line); font-size: .87rem; color: var(--muted); }
.chip b { font-family: var(--serif); font-size: 1.02rem; font-weight: 600; color: var(--crust); font-variant-numeric: tabular-nums; }
.chips__note { font-size: .82rem; color: var(--muted); }

/* ── Grosses commandes ─────────────────────────────────────────────────── */
.groups { padding: 0 0 clamp(60px, 9vw, 104px); }
.groups__grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 5vw, 64px); align-items: center; padding-top: clamp(60px, 9vw, 104px); }
.groups__text p { color: var(--muted); max-width: 52ch; margin-bottom: 28px; }
.facts { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; margin: 0; background: var(--line); border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; }
.facts div { background: var(--card); padding: 22px 20px; transition: background-color .2s; }
.facts div:hover { background: var(--paper); }
.facts dt { font: 700 .74rem/1 var(--sans); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); margin-bottom: .7em; }
.facts dd { margin: 0; font-size: .95rem; line-height: 1.5; }

/* ── Nous trouver ──────────────────────────────────────────────────────── */
.contact { background: var(--ink); color: var(--on-dark); padding: clamp(60px, 9vw, 104px) 0; }
.contact__grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 5vw, 64px); align-items: start; }
.contact .eyebrow { color: rgba(245, 238, 226, .6); }
.contact h2 { color: #fff; font-size: clamp(1.75rem, 3.1vw, 2.45rem); hyphens: none; }
.contact h2 em { color: var(--wheat); }
.contact__lede { color: rgba(245, 238, 226, .8); max-width: 48ch; }

.contact__list { list-style: none; margin: 30px 0; padding: 0; display: grid; gap: 16px; }
.contact__list li { display: grid; gap: 3px; }
.contact__list b { font: 700 .72rem/1 var(--sans); letter-spacing: .12em; text-transform: uppercase; color: rgba(245, 238, 226, .55); }
.contact__list a { color: var(--on-dark); text-decoration: none; border-bottom: 1px solid rgba(245, 238, 226, .3); justify-self: start; transition: border-color .18s, color .18s; }
.contact__list a:hover { color: var(--wheat); border-bottom-color: var(--wheat); }

.hours { width: 100%; border-collapse: collapse; margin-top: 26px; font-size: .95rem; }
.hours th, .hours td { padding: 9px 0; border-bottom: 1px solid rgba(245, 238, 226, .14); text-align: left; }
.hours th { font-weight: 500; color: rgba(245, 238, 226, .78); }
.hours td { text-align: right; font-variant-numeric: tabular-nums; }
.hours .closed { color: rgba(245, 238, 226, .45); }
.hours tr.is-today th, .hours tr.is-today td { color: var(--wheat); font-weight: 600; }
.hours__exc { list-style: none; margin: 16px 0 0; padding: 0; font-size: .88rem; color: rgba(245, 238, 226, .7); display: grid; gap: 6px; }

.contact__map { border-radius: var(--r); overflow: hidden; border: 1px solid rgba(245, 238, 226, .18); min-height: 420px; }
.contact__map iframe { width: 100%; height: 100%; min-height: 420px; border: 0; display: block; filter: grayscale(.25); }

/* ── Pied ──────────────────────────────────────────────────────────────── */
.foot { background: var(--paper); border-top: 1px solid var(--line); padding: clamp(48px, 7vw, 72px) 0 28px; }
.foot__grid { display: grid; grid-template-columns: 1.6fr repeat(3, 1fr); gap: 34px; }
.logo-mark--foot { height: 86px; width: auto; margin-bottom: 16px; }
.foot__brand p { font-size: .92rem; color: var(--muted); max-width: 34ch; }
.foot h3 { font-family: var(--sans); font-size: .74rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); margin-bottom: 1.1em; }
.foot ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; font-size: .93rem; }
.foot a { text-decoration: none; color: var(--text); transition: color .18s; }
.foot a:hover { color: var(--crust); }
.foot li { color: var(--muted); }
.foot__bar { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; margin-top: 44px; padding-top: 22px; border-top: 1px solid var(--line); font-size: .84rem; color: var(--muted); }
.foot__credit a { color: var(--crust); font-weight: 600; }

/* ── Adaptation ────────────────────────────────────────────────────────── */
@media (max-width: 900px) {
  .values__grid { grid-template-columns: repeat(2, 1fr); }
  .split__grid, .community__grid, .groups__grid, .contact__grid { grid-template-columns: 1fr; }
  .split__text { position: static; }
  .split__media img { aspect-ratio: 16 / 9; }
  .community__media img { aspect-ratio: 16 / 11; }
  .contact__map, .contact__map iframe { min-height: 300px; }
  .foot__grid { grid-template-columns: 1fr 1fr; }
  .foot__brand { grid-column: 1 / -1; }
}
@media (max-width: 560px) {
  body { font-size: 16px; }
  .values__grid { grid-template-columns: 1fr; }
  .hero__inner { padding-top: 58px; padding-bottom: 54px; }
  .hero__media { inset: -3% 0 0; }
  .facts { grid-template-columns: 1fr; }
  .foot__grid { grid-template-columns: 1fr; }
  .hero__proof { gap: 10px; font-size: .84rem; }
  .btn { width: 100%; }
  .hero__actions .btn { width: auto; flex: 1 1 200px; }
}

/* ════════════════════════════════════════════════════════════════════════
   Mouvement — voir anim.js.
   Sans JavaScript, en impression, ou si l'utilisateur préfère réduire les
   animations : la classe js-anim n'est jamais posée (ou elle est retirée) et
   tout reste visible. On ne masque donc jamais rien « par défaut ».
   ════════════════════════════════════════════════════════════════════════ */
.js-anim [data-reveal]:not([data-revealed]) { opacity: 0; }
.js-anim [data-reveal-group]:not([data-revealed]) > :not([hidden]) { opacity: 0; }
/* Pendant l'entrée, la transition CSS des images gênerait l'animation de scale. */
.js-anim [data-reveal="media"]:not([data-revealed]) img { transition: none; }
.js-anim .hero__media { transform: translate3d(0, 0, 0); }

/* Titre révélé mot par mot : chaque mot vit dans un masque qui coupe la montée. */
.w { display: inline-block; overflow: hidden; vertical-align: bottom; padding-bottom: .06em; margin-bottom: -.06em; }
.w > span { display: inline-block; will-change: transform; }

@media print {
  .top, .burger, .hero__actions, .contact__map, .tabs { display: none !important; }
  .hero { background: none; color: #000; }
  .hero__media, .banner__media { display: none; }
  body { background: #fff; color: #000; }
}