/* ==========================================================================
   Melia Café — V2 « Olivier & lin » — socle commun
   ========================================================================== */
:root {
  --linen: #f3eee3;
  --linen-2: #eae3d4;
  --paper: #fbf8f1;
  --sand: #d9c9a8;
  --olive: #4a5a3a;
  --olive-2: #6c7c55;
  --olive-d: #2f3a25;
  --sage: #aab596;
  --espresso: #231e18;
  --espresso-2: #2f2922;
  --gold: #b48a4a;
  --gold-2: #d9bb85;
  --text: #2a241d;
  --muted: #776c5e;
  --muted-l: #b9ae9c;
  --line: rgba(42, 36, 29, .13);
  --line-l: rgba(243, 238, 227, .16);
  --ok: #6f9a55;
  --warn: #b0703a;

  --serif: "Fraunces", Georgia, "Times New Roman", serif;
  --sans: "Figtree", system-ui, -apple-system, "Segoe UI", sans-serif;

  --gutter: clamp(20px, 5vw, 76px);
  --radius: 26px;
  --ease: cubic-bezier(.22, 1, .36, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
body {
  margin: 0;
  background: var(--linen);
  color: var(--text);
  font-family: var(--sans);
  font-weight: 400;
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}
img, svg, video, canvas { display: block; max-width: 100%; }
a { color: inherit; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
::selection { background: var(--olive); color: var(--linen); }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; border-radius: 6px; }

.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; }

/* Typo ------------------------------------------------------------------ */
.eyebrow {
  display: inline-flex; align-items: center; gap: .7em; margin: 0;
  font-family: var(--sans); font-weight: 600;
  font-size: 11.5px; letter-spacing: .2em; text-transform: uppercase;
  color: var(--olive);
}
.eyebrow::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--gold); flex: none; }
.eyebrow--center::after { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--gold); }

.display {
  font-family: var(--serif); font-weight: 350; font-variation-settings: "SOFT" 50, "opsz" 144;
  font-size: clamp(2.6rem, 6vw, 5.4rem);
  line-height: 1; letter-spacing: -.025em;
  margin: .4em 0 0;
  text-wrap: balance;
}
.display em { font-style: italic; font-weight: 300; color: var(--olive-2); }

.lead {
  font-family: var(--serif); font-weight: 350; font-variation-settings: "SOFT" 100, "opsz" 40;
  font-size: clamp(1.25rem, 2vw, 1.6rem); line-height: 1.45; letter-spacing: -.01em;
  text-wrap: pretty;
}

/* Boutons ---------------------------------------------------------------- */
.btn {
  --bg: var(--espresso); --fg: var(--linen);
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: .65em;
  min-height: 54px; padding: 0 28px;
  border: 1.5px solid transparent; border-radius: 16px;
  background: var(--bg); color: var(--fg);
  font-family: var(--sans); font-weight: 600; font-size: 15px; letter-spacing: .01em;
  text-decoration: none; white-space: nowrap;
  transition: background .35s var(--ease), color .35s var(--ease), border-color .35s, transform .35s var(--ease), box-shadow .35s;
  -webkit-tap-highlight-color: transparent;
}
.btn:hover { transform: translateY(-2px); box-shadow: 0 12px 26px -12px rgba(35, 30, 24, .45); }
.btn:active { transform: translateY(0) scale(.98); }
.btn svg { width: 18px; height: 18px; flex: none; }

.btn--accent { --bg: var(--olive); --fg: var(--paper); }
.btn--accent:hover { --bg: var(--olive-d); }

.btn--ghost { --bg: transparent; --fg: var(--text); border-color: rgba(42, 36, 29, .25); }
.btn--ghost:hover { --bg: var(--paper); border-color: var(--text); box-shadow: none; }

.btn--light { --bg: var(--paper); --fg: var(--text); }
.btn--ghost-light { --bg: transparent; --fg: var(--linen); border-color: rgba(243, 238, 227, .35); }
.btn--ghost-light:hover { --bg: rgba(243, 238, 227, .08); border-color: var(--linen); box-shadow: none; }

.link-arrow {
  display: inline-flex; align-items: center; gap: .6em;
  font-weight: 600; font-size: 15px; text-decoration: none;
}
.link-arrow svg { width: 18px; transition: transform .4s var(--ease); }
.link-arrow:hover svg { transform: translateX(5px); }

/* Statut ouvert/fermé ---------------------------------------------------- */
.status {
  display: inline-flex; align-items: center; gap: .55em;
  font-size: 13px; font-weight: 500; white-space: nowrap;
}
.status i { position: relative; width: 8px; height: 8px; border-radius: 50%; background: var(--muted-l); flex: none; }
.status.is-open i { background: var(--ok); }
.status.is-open i::after {
  content: ""; position: absolute; inset: -4px; border-radius: 50%;
  border: 1.5px solid var(--ok); animation: ping 2.4s var(--ease) infinite;
}
.status.is-closed i { background: var(--warn); }
@keyframes ping { 0% { transform: scale(.4); opacity: 1; } 100% { transform: scale(1.7); opacity: 0; } }

/* Texture papier ---------------------------------------------------------- */
.grain {
  position: fixed; inset: 0; z-index: 90; pointer-events: none; opacity: .35; mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .55 0 0 0 0 .5 0 0 0 0 .42 0 0 0 .09 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
}