/* ════════════════════════════════════════════════════════════════════════════
   Friperie O Petit Coin — feuille de style unique, sans dépendance.

   Aucune photo de lieu ou de vêtements exploitable sans accord (leurs photos
   Facebook montrent des visages identifiables ou sont bloquées techniquement
   à l'extraction — voir prospect-opetitcoin en mémoire). Le logo (girafe),
   lui, a été fourni directement par le commerce via Mehdi, puis retravaillé
   en médaillon rond façon Starbucks (anneau double trait, texte « O PETIT
   COIN · TROIS-RIVIÈRES » courbé, cornes/pattes adoucies en fondu plutôt que
   coupées net par le cadre carré d'origine) — img/logo.png. L'identité tient
   donc sur ce logo + la typographie et la couleur : un vert sapin profond et
   une terre cuite chaude, inspirés d'une friperie de quartier, nette et
   accueillante, jamais criarde malgré la clientèle enfant.
   Titres en Fraunces (serif éditorial, italique en accent), texte en Work Sans.
   ════════════════════════════════════════════════════════════════════════════ */

/* ── 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: #2e3b2e;               /* vert sapin profond, presque noir */
  --ink-soft: #3f4f3d;
  --paper: #faf6ef;             /* crème chaud */
  --card: #ffffff;
  --line: #e4dcc8;
  --text: #272f23;
  --muted: #6e7363;             /* gris décalé vers le vert */
  --crust: #c96a3d;             /* terre cuite — l'accent, dépensé avec parcimonie */
  --crust-soft: #f3e3d3;
  --wheat: #e0a35c;             /* ambre clair, pour les fonds sombres */
  --on-dark: #f5f1e6;
  --on-dark-muted: #b9c2ae;
  --shadow: 0 1px 2px rgba(20, 24, 18, .05), 0 8px 24px -12px rgba(20, 24, 18, .16);
  --shadow-lg: 0 2px 6px rgba(20, 24, 18, .06), 0 24px 60px -28px rgba(20, 24, 18, .3);
  --r: 14px;
  --wrap: 1200px;
  --pad: clamp(20px, 5vw, 40px);
  --sans: "Work Sans", "Helvetica Neue", Arial, sans-serif;
  --serif: "Fraunces", "Iowan Old Style", Georgia, serif;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper: #171d16;
    --card: #212a1f;
    --line: #3a4537;
    --text: #ecefe6;
    --muted: #a3ac98;
    --crust: #e08654;
    --crust-soft: #3a2a1e;
    --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: #171d16;
  --card: #212a1f;
  --line: #3a4537;
  --text: #ecefe6;
  --muted: #a3ac98;
  --crust: #e08654;
  --crust-soft: #3a2a1e;
  --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: #faf6ef; animation: splash-out .5s ease forwards; animation-delay: 1.5s;
}
.splash__logo { width: 130px; height: auto; animation: splash-logo-in .6s cubic-bezier(.22,1,.36,1) both .1s; }
.splash__word { font-family: var(--serif); font-style: italic; font-weight: 500; font-size: 2.6rem; color: var(--ink); animation: splash-logo-in .6s cubic-bezier(.22,1,.36,1) both .1s; }
@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__logo, .splash__word { 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; }
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: #2e3b2e; box-shadow: 0 10px 24px -14px rgba(224, 163, 92, .9); }
.btn--gold:hover { background: #b5743a; }
.btn--ink { background: var(--ink); color: var(--on-dark); }
.btn--ink:hover { background: var(--ink-soft); }
.btn--ghost { background: transparent; border-color: rgba(245, 241, 230, .45); color: var(--on-dark); }
.btn--ghost:hover { border-color: var(--on-dark); background: rgba(245, 241, 230, .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 ───────────────────────────────────────────────────────────── */
/* Toujours la palette claire ici, même en mode sombre : le logo est une encre
   brune sur fond transparent, il lui faut un fond clair pour rester lisible. */
.top {
  --paper: #faf6ef; --card: #ffffff; --line: #e4dcc8; --text: #272f23;
  --muted: #6e7363; --crust: #c96a3d; --crust-soft: #f3e3d3;
  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(46, 59, 46, .8); }
.top__row { display: flex; align-items: center; justify-content: space-between; gap: 20px; min-height: 74px; }
.brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; }
.brand__logo { height: 54px; width: auto; display: block; }
.brand__word { font-family: var(--serif); font-style: italic; font-weight: 500; font-size: 1.5rem; color: var(--ink); white-space: nowrap; }
.foot__logo { width: 46px; height: 46px; display: block; margin-bottom: 10px; }
.foot__brand .brand__word { font-size: 1.7rem; display: block; margin-bottom: 14px; color: var(--ink); }

.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(46, 59, 46, .8) 0%, rgba(46, 59, 46, .3) 34%, rgba(46, 59, 46, .86) 100%),
    linear-gradient(95deg, rgba(46, 59, 46, .72) 0%, rgba(46, 59, 46, .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, 241, 230, .72); }
.hero .lede { color: rgba(245, 241, 230, .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, 241, 230, .22);
  font-size: .86rem; font-weight: 600; color: var(--on-dark);
  backdrop-filter: blur(6px);
}
.hero__status .dot { width: 8px; height: 8px; border-radius: 50%; background: #67c27a; box-shadow: 0 0 0 0 rgba(103, 194, 122, .7); }
.hero__status:not(.is-closed) .dot { animation: dot-pulse 2.4s ease-out infinite; }
.hero__status.is-closed .dot { background: #cf7b5a; animation: none; }
@keyframes dot-pulse { 0% { box-shadow: 0 0 0 0 rgba(103, 194, 122, .6); } 70% { box-shadow: 0 0 0 9px rgba(103, 194, 122, 0); } 100% { box-shadow: 0 0 0 0 rgba(103, 194, 122, 0); } }

.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, 241, 230, .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, 241, 230, .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(auto-fit, minmax(230px, 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; }
.price:not(:empty)::after { content: " $"; font-size: .8em; color: var(--muted); }

.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; }
.feature--plain { padding: 26px 24px; }
.feature--plain b { font-family: var(--serif); font-weight: 600; font-size: 1.15rem; margin-bottom: .4em; }

/* ── Histoire ──────────────────────────────────────────────────────────── */
.split { background: var(--paper); color: var(--text); 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; border: 1px solid var(--line); }
.split__media img { width: 100%; aspect-ratio: 8 / 3; object-fit: cover; }
.split__text { position: sticky; top: 104px; }
.split__text .eyebrow { color: var(--muted); }
.split__text h2 { color: var(--text); }
.split__text h2 em { color: var(--crust); }
.split__p { color: var(--muted); 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 var(--line); 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(--crust);
  box-shadow: 0 0 0 4px var(--paper);
}
.timeline b { font-family: var(--serif); font-size: 1.12rem; font-weight: 600; color: var(--crust); font-variant-numeric: tabular-nums; }
.timeline span { font-size: .95rem; color: var(--muted); 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(46, 59, 46, .88) 10%, rgba(46, 59, 46, .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, 241, 230, .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(--paper); color: var(--text); 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: var(--muted); }
.contact h2 { color: var(--text); font-size: clamp(1.75rem, 3.1vw, 2.45rem); hyphens: none; }
.contact h2 em { color: var(--crust); }
.contact__lede { color: var(--muted); 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: var(--muted); }
.contact__list a { color: var(--text); text-decoration: none; border-bottom: 1px solid var(--line); justify-self: start; transition: border-color .18s, color .18s; }
.contact__list a:hover { color: var(--crust); border-bottom-color: var(--crust); }

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

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

/* ── Pied ──────────────────────────────────────────────────────────────── */
/* Même raison qu'en en-tête : le grand logo (encre brune) a besoin d'un fond clair fixe. */
.foot {
  --paper: #faf6ef; --card: #ffffff; --line: #e4dcc8; --text: #272f23;
  --muted: #6e7363; --crust: #c96a3d; --crust-soft: #f3e3d3;
  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; }
.foot__logo { height: 170px; width: auto; display: block; 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) {
  .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; }
  .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; }
}