/* ==========================================================================
   Design system Kris Officiant — palette crème / sable / terracotta / encre
   Introduit via Claude Design sur la page d'accueil, propagé à tout le site.
   ========================================================================== */

[x-cloak]{display:none!important;}

/* ===== Palette — élégante & émotionnelle ===== */
:root{
  --cream:#FAF6F0;
  --cream-deep:#F3EBDF;
  --sable:#E7D8C0;
  --sable-deep:#DBC7A5;
  --ink:#2A241E;
  --ink-70:rgba(42,36,30,.7);
  --ink-50:rgba(42,36,30,.5);
  --terracotta:#C1714A;
  --terracotta-deep:#A15A38;
  --line:#E6D9C4;
}

body{ background:var(--cream); }

/* ===== Couleurs de base ===== */
.bg-cream{ background-color:var(--cream); }
.bg-cream-deep{ background-color:var(--cream-deep); }
.bg-sable{ background-color:var(--sable); }
.bg-ink{ background-color:var(--ink); }
.bg-ink\/5{ background-color:rgba(42,36,30,.05); }
.bg-terracotta{ background-color:var(--terracotta); }
.bg-sable\/30{ background-color:rgba(231,216,192,.3); }
.bg-sable\/50{ background-color:rgba(231,216,192,.5); }
.text-ink{ color:var(--ink); }
.text-ink-70{ color:var(--ink-70); }
.text-ink-50{ color:var(--ink-50); }
.text-terracotta{ color:var(--terracotta); }
.text-cream{ color:var(--cream); }
.border-line{ border-color:var(--line); }
.border-terracotta{ border-color:var(--terracotta); }
.border-ink{ border-color:var(--ink); }
.decoration-terracotta{ text-decoration-color:var(--terracotta); }

a, button{ transition:color .3s ease, background-color .3s ease, border-color .3s ease, transform .3s ease, box-shadow .3s ease; }

/* ===== États hover/focus/group-hover (équivalents des anciennes classes Tailwind or-discret/gray-*) ===== */
.hover\:bg-terracotta:hover{ background-color:var(--terracotta); }
.hover\:text-terracotta:hover{ color:var(--terracotta); }
.hover\:border-terracotta:hover{ border-color:var(--terracotta); }
.focus\:border-terracotta:focus{ border-color:var(--terracotta); }
.group:hover .group-hover\:text-terracotta{ color:var(--terracotta); }

.hover\:bg-ink:hover{ background-color:var(--ink); }
.hover\:text-ink:hover{ color:var(--ink); }
.hover\:bg-cream-deep:hover{ background-color:var(--cream-deep); }
.hover\:text-cream:hover{ color:var(--cream); }

.kb-nav-link:hover{ color:var(--terracotta); }

#site-header{ background:#FAF7F2; box-shadow:0 1px 4px rgba(43,43,43,0.08); }

/* ===== Boutons ===== */
.kb-btn-primary{
  display:inline-block; background:var(--terracotta); color:var(--cream);
  font-weight:700; letter-spacing:.18em; text-transform:uppercase; font-size:.8rem;
  padding:1.15rem 2.5rem; border-radius:999px; box-shadow:0 18px 40px -18px rgba(161,90,56,.55);
}
.kb-btn-primary:hover{ background:var(--ink); transform:translateY(-2px); }

.kb-btn-dark{
  display:inline-block; background:var(--ink); color:var(--cream);
  font-weight:700; letter-spacing:.18em; text-transform:uppercase; font-size:.8rem;
  padding:1.15rem 2.5rem; border-radius:999px;
}
.kb-btn-dark:hover{ background:var(--terracotta); transform:translateY(-2px); }

.kb-btn-outline-cream{
  display:inline-block; border:1px solid var(--cream); color:var(--cream);
  font-weight:700; letter-spacing:.18em; text-transform:uppercase; font-size:.8rem;
  padding:1.1rem 2.4rem; border-radius:999px;
}
.kb-btn-outline-cream:hover{ background:var(--cream); color:var(--ink); }

.kb-btn-outline-terracotta{
  display:inline-block; border:1px solid var(--terracotta); color:var(--terracotta);
  font-weight:700; letter-spacing:.18em; text-transform:uppercase; font-size:.75rem;
  padding:.9rem 2rem; border-radius:999px;
}
.kb-btn-outline-terracotta:hover{ background:var(--terracotta); color:var(--cream); }

.kb-eyebrow{ letter-spacing:.35em; text-transform:uppercase; font-size:.72rem; font-weight:700; color:var(--terracotta); }
.kb-eyebrow-light{ letter-spacing:.35em; text-transform:uppercase; font-size:.72rem; font-weight:700; color:rgba(250,246,240,.85); }

.kb-card{ background:var(--cream); border:1px solid var(--line); border-radius:1.5rem; }
.kb-card:hover{ box-shadow:0 30px 60px -30px rgba(42,36,30,.25); transform:translateY(-4px); }

.kb-hairline{ border-color:var(--line); }

/* Scroll reveal (utilisé sur l'accueil uniquement) */
.reveal{ opacity:0; transform:translateY(28px); transition:opacity .9s ease, transform .9s ease; }
.reveal.is-visible{ opacity:1; transform:none; }
.reveal-delay-1.is-visible{ transition-delay:.12s; }
.reveal-delay-2.is-visible{ transition-delay:.24s; }
.reveal-delay-3.is-visible{ transition-delay:.36s; }
@media (prefers-reduced-motion: reduce){
  .reveal{ opacity:1; transform:none; transition:none; }
}

/* ===== Espacement éditorial ===== */
main p{ line-height:1.7 !important; }
main p + p{ margin-top:24px; }