/* Vayanji — la page « histoire » (histoire.php).
   Autonome : ne dépend ni de app.css, ni de landing.css, ni de install.css.
   C'est une page de RÉCIT, pas une scène de vente : ici le texte a le droit d'être
   le sujet, en serif, avec de l'air. Mobile-first. Lora vendorée (jamais de police
   distante : la politique de confidentialité affirme qu'elles sont auto-hébergées). */

@font-face {
  font-family: 'Lora';
  src: url('fonts/Lora-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Lora';
  src: url('fonts/Lora-Bold.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

:root {
  --cream: #faf8f3;
  --ink: #1a1a1a;
  --muted: #6b6862;
  --wood: #c6a47b;
  --spark: #c2853a;
  --deep: #101a16;
  --serif: 'Lora', Georgia, "Times New Roman", serif;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--cream);
  color: var(--ink);
  font-family: var(--serif);
  font-size: 18px;
  line-height: 1.75;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img { max-width: 100%; }
p { margin: 0 0 22px; }

.hw { max-width: 600px; margin: 0 auto; padding: 0 26px; }

/* ================= Ouverture ================= */
.h-hero {
  position: relative;
  background: var(--deep);
  color: #ece9e2;
  /* Le haut porte seul l'air que donnait la marque, retirée du hero. */
  padding: 64px 0 60px;
  text-align: center;
  overflow: hidden;
}
.h-hero::before {
  content: '';
  position: absolute; left: 50%; top: -140px;
  width: 460px; height: 460px; transform: translateX(-50%);
  background: radial-gradient(circle, rgba(194, 133, 58, .26), rgba(194, 133, 58, 0) 70%);
  pointer-events: none;
}
.h-hero > * { position: relative; }
.h-eyebrow {
  font-family: var(--sans);
  font-size: 12px; letter-spacing: .22em; text-transform: uppercase;
  color: var(--wood);
  margin: 0 0 18px;
}
.h-open {
  font-family: var(--serif); font-weight: 400;
  font-size: 32px; line-height: 1.3;
  color: #faf8f3;
  margin: 0;
}

/* ================= Le récit ================= */
.h-chap { padding: 40px 0 0; }
.h-chap h2 {
  font-family: var(--serif); font-weight: 400;
  font-size: 24px; line-height: 1.3;
  color: var(--spark);
  margin: 0 0 20px;
}

/* La phrase qu'on laisse respirer seule. */
.h-beat {
  font-size: 22px; line-height: 1.5;
  text-align: center;
  margin: 34px 0;
}
.h-beat em { font-style: italic; color: var(--spark); }

/* Ce que dit la notification, ou une citation : en retrait, en italique. */
.h-quote {
  font-style: italic;
  color: var(--muted);
  border-left: 2px solid var(--wood);
  padding-left: 18px;
  margin: 0 0 22px;
}

.h-photo {
  display: block;
  width: min(380px, 84vw); height: auto;
  margin: 30px auto;
  border-radius: 20px;
  box-shadow: 0 16px 44px rgba(26, 26, 26, .18);
}

/* Le séparateur : une étincelle, rien d'autre. */
.h-sep {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--spark);
  margin: 46px auto;
  box-shadow: 0 0 0 6px rgba(194, 133, 58, .12);
}

/* ================= Fin ================= */
.h-end {
  text-align: center;
  padding: 20px 0 0;
}
.h-end .h-slogan {
  font-family: var(--serif); font-style: italic;
  font-size: 21px; color: var(--spark);
  margin: 0 0 30px;
}
.h-cta {
  display: inline-block;
  padding: 14px 40px;
  border: 1px solid var(--spark); border-radius: 999px;
  background: transparent; color: var(--spark);
  font-family: var(--sans); font-size: 16px; letter-spacing: .04em;
  text-decoration: none;
}
.h-cta:hover { background: rgba(194, 133, 58, .09); }

.h-foot {
  text-align: center;
  padding: 46px 0;
  font-family: var(--sans); font-size: 13px; color: var(--muted);
}
.h-foot a { color: var(--muted); }

@media (min-width: 620px) {
  .h-open { font-size: 40px; }
  .h-chap h2 { font-size: 27px; }
  .h-beat { font-size: 25px; }
}