/* Mon Puzzle Intérieur — Shared theme CSS (v3)
   Charger après /assets/brand.css sur toutes les pages.
   Pose les styles de base communs : typographie, corps, titres, liens. */

:root {
  --ease:       cubic-bezier(0.16, 1, 0.3, 1);
  --max:        1180px;
  --read:       680px;
  --text-scale: 100%;
  --density:    1;
}

html { font-size: var(--text-scale, 100%); scroll-behavior: smooth; }

*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0; padding: 0;
  font-family: var(--font-sans);
  font-weight: 300;
  font-size: 16px;
  line-height: 1.65;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
  transition: background-color 0.25s ease, color 0.25s ease;
}

/* ── Typographie ────────────────────────────────────────────── */

h1, h2, h3 {
  font-family: var(--font-serif);
  font-weight: 700;
  color: var(--text);
  line-height: 1.12;
  margin: 0 0 .6em;
}
h1 { font-size: clamp(32px, 4.5vw, 60px); letter-spacing: -.025em; }
h2 { font-size: clamp(26px, 3.2vw, 44px); letter-spacing: -.015em; }
h3 { font-size: clamp(18px, 2vw, 28px);   letter-spacing: -.01em;  }

/* Labels de section */
h4, h5, h6 {
  font-family: var(--font-sans);
  font-size: 10px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: .3em;
  color: var(--copper);
  line-height: 1.4;
  margin: 0 0 .5em;
}

p { margin: 0 0 1.1em; }
p:last-child { margin-bottom: 0; }

em { font-style: italic; }
strong { font-weight: 600; color: var(--text); }

/* ── Prose — corps long comme les Tomes (Times-Roman justifié) ── */

.prose {
  font-family: var(--font-serif);
  font-size: 15px;
  line-height: 1.85;
  text-align: justify;
  color: var(--text);
}
.prose p { text-indent: 1.2em; margin: 0 0 .2em; }
.prose p:first-child,
.prose p.no-indent { text-indent: 0; }
.prose p:last-child { margin-bottom: 0; }

/* ── Pull-quote — filet or gauche, italic, comme les Tomes ──── */

blockquote, .pullquote {
  border-left: 2px solid var(--gold);
  padding: 6px 0 6px 20px;
  margin: 1.4em 0;
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 15px;
  line-height: 1.7;
  color: var(--text-soft);
}

/* ── Liens ──────────────────────────────────────────────────── */

a {
  color: var(--copper);
  text-decoration: none;
  transition: color .2s var(--ease), opacity .2s var(--ease);
}
a:hover { color: var(--copper-dark); }

/* ── Sélection ──────────────────────────────────────────────── */

::selection { background: var(--copper); color: var(--night-deep, #4A3B26); }

/* ── Helpers typographiques ─────────────────────────────────── */

.serif  { font-family: var(--font-serif); }
.sans   { font-family: var(--font-sans);  }
.italic { font-style: italic; }

.eyebrow {
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: .28em;
  color: var(--copper);
  display: inline-block;
}

.copper { color: var(--copper); }
.ivory  { color: var(--text);   }
.muted  { color: var(--muted);  }

.rule {
  display: block;
  width: 48px; height: 1px;
  background: var(--copper);
  opacity: .7;
}

/* ── Boutons partagés ───────────────────────────────────────── */

.btn {
  font-family: var(--font-sans);
  display: inline-flex; align-items: center; gap: 10px;
  padding: 14px 28px;
  border-radius: 5px;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  cursor: pointer;
  border: 1px solid transparent;
  transition: all .3s var(--ease);
  white-space: nowrap;
  text-decoration: none;
}
.btn-primary {
  background: var(--hp-btn-bg, #A63828);
  color: var(--hp-btn-txt, #DEC89E);
  border-radius: var(--hp-btn-r, 5px);
  box-shadow:
    0 1px 0 rgba(255,160,140,.2) inset,
    0 -1px 0 rgba(60,0,0,.3) inset,
    0 8px 24px -10px rgba(166,56,40,.45);
}
.btn-primary:hover {
  background: var(--hp-btn-bg, #A63828);
  filter: brightness(.88);
  transform: translateY(-1px);
  color: var(--hp-btn-txt, #DEC89E);
  box-shadow:
    0 1px 0 rgba(255,160,140,.2) inset,
    0 -1px 0 rgba(60,0,0,.35) inset,
    0 12px 30px -10px rgba(166,56,40,.55);
}
.btn-outline {
  background: transparent;
  color: var(--text);
  border: 1px solid var(--line);
}
.btn-outline:hover {
  background: color-mix(in srgb, var(--text) 6%, transparent);
  color: var(--text);
  border-color: var(--line-strong);
}

/* ── Layout helpers ─────────────────────────────────────────── */

.wrap       { max-width: var(--max); margin: 0 auto; padding: 0 32px; }
.wrap-read  { max-width: var(--read); margin: 0 auto; padding: 0 32px; }

/* ── Topbar commune ─────────────────────────────────────────── */

.topbar {
  position: sticky; top: 0; z-index: 50;
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  backdrop-filter: blur(14px) saturate(140%);
  border-bottom: 1px solid var(--rule, rgba(192,138,90,.18));
  padding: 16px 0;
}
.topbar-inner {
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 32px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}
.topbar .brand {
  display: flex; align-items: center; gap: 12px;
  font-family: var(--font-serif);
  font-size: 17px;
  font-weight: 500;
  color: var(--text);
  letter-spacing: .04em;
  text-decoration: none;
}
.topbar .brand:hover { color: var(--copper); }
.topbar .brand em { font-style: italic; }

/* ── Responsive ─────────────────────────────────────────────── */

@media (max-width: 700px) {
  .wrap, .wrap-read { padding: 0 20px; }
  .topbar-inner     { padding: 0 20px; }
}

/* iOS Safari : background-attachment:fixed cassé sur mobile/tablette */
@media (hover: none) and (pointer: coarse), (max-width: 1024px) {
  body { background-attachment: scroll !important; }
}