@charset "UTF-8";

/* ========================
   Variables & Reset
   ======================== */
:root {
  color-scheme: dark;
  --bg1: #070408;
  --bg2: #10070d;
  --bg3: #190912;
  --bg4: #37101e;

  --card: rgba(27, 12, 22, .86);
  --card-strong: rgba(10, 6, 11, .94);
  --field: rgba(43, 15, 29, .62);
  --field-hover: rgba(54, 18, 34, .72);
  --field-focus: rgba(31, 11, 22, .90);

  --muted: #cbbdc5;
  --text: #e7dce2;
  --text-soft: #e2d6dc;

  --accent: #912d4d;
  --accent-dark: #5b1732;
  --accent-warm: #d6c1cc;
  --accent-warm-light: #f1e7ec;
  --accent-warm-soft: #ead09b;
  --accent-warm-dark: #ac909e;
  --accent-rose: #ad3f61;

  --border: rgba(216, 182, 111, .27);
  --border-strong: rgba(216, 182, 111, .48);
  --outline: #d8b66f;

  --shadow-soft: 0 20px 50px rgba(0, 0, 0, .56);
  --shadow-glow: 0 0 28px rgba(145, 45, 77, .20);
  --accent-color: linear-gradient(135deg, rgba(216, 182, 111, .24), rgba(145, 45, 77, .28));
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
  color: var(--text);
  font-family: Poppins, Inter, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  overflow-x: hidden;
  position: relative;
}

body {
  line-height: 1.6;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

p,
li,
label,
.tagline,
.note {
  color: var(--text-soft);
}

small {
  color: var(--muted);
}

/* Texte */
h1 {
  letter-spacing: .8px;
  font-size: clamp(2rem, 4.3vw, 4rem);
  line-height: .94;
  margin: 0 0 10px;
  font-weight: 900;
  text-shadow: 0 2px 12px rgba(116, 55, 86, 0.18);
}

h2 {
  letter-spacing: .18px;
  margin: 10px 0 14px;
  font-size: 1.5rem;
  text-shadow: 0 2px 10px rgba(116, 55, 86, 0.18);
}

.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}

.chip {
  background: linear-gradient(135deg, rgba(216, 182, 111, .12), rgba(145, 45, 77, .18));
  color: var(--text);
  border: 1px solid rgba(216, 182, 111, .24);
  padding: 6px 10px;
  border-radius: 999px;
  font-size: .85rem;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.06),
    0 4px 12px rgba(0,0,0,.16);
}

.title {
  color: var(--accent-warm);

  background: linear-gradient(
    180deg,
    var(--accent-warm-light) 0%,
    var(--accent-warm) 52%,
    var(--accent-warm-dark) 100%
  );

  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}