@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;1,300;1,400&family=Montserrat:wght@300;400&display=swap');

/* ── Reset ──────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* ── Design tokens ──────────────────────────── */
:root {
  /* Palette */
  --cream:       #FAF8F5;
  --olive:       #4D502D;
  --olive-dark:  #3a3c21;
  --rose:        #985658;
  --rose-light:  #C4948E;
  --card-bg:     #F5F3EE;
  --text:        #5a4a45;

  /* Typography */
  --font-serif:  'Cormorant Garamond', serif;
  --font-sans:   'Montserrat', sans-serif;

  /* Easings */
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-out:    cubic-bezier(0.25, 0.46, 0.45, 0.94);

  /* Shadows */
  --shadow-sm:          0 6px 22px rgba(0,0,0,0.12);
  --shadow-card:        0 8px 28px rgba(0,0,0,0.12);
  --shadow-card-hover:  0 20px 48px rgba(0,0,0,0.16), 0 6px 16px rgba(0,0,0,0.08);
  --shadow-badge:       0 5px 18px rgba(0,0,0,0.14);
  --shadow-badge-hover: 0 14px 36px rgba(0,0,0,0.22);
  --shadow-envelope:    drop-shadow(0 14px 44px rgba(0,0,0,0.15));
  --shadow-polaroid:    0 8px 32px rgba(0,0,0,0.14);
}

/* ── Base ───────────────────────────────────── */
html {
  overflow-x: hidden;
}

body {
  background: var(--cream);
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  width: 100%;
}

img {
  display: block;
  max-width: 100%;
  height: auto;
  border: none;
  outline: none;
  user-select: none;
  -webkit-user-drag: none;
}

/* ── Back navigation — details.html + histoire.html ── */
.back-nav {
  position: absolute;
  top: 1.2rem;
  left: 1.5rem;
  z-index: 10;
  text-decoration: none;
  font-family: var(--font-sans);
  font-weight: 300;
  font-size: 0.6rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.65);
  transition: color 0.2s;
}
.back-nav:hover { color: #fff; }

/* ── Shared keyframe — details.html + histoire.html ── */
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: translateY(0); }
}