/* ============================================================
   VR Médiation — Système de design partagé
   ============================================================ */
:root {
  /* Neutres chauds */
  --cream-50:  #FBF5EE;
  --cream-100: #F6ECDF;
  --cream-200: #EFE0CB;
  --cream-300: #E5CFB1;

  /* Jade — signature */
  --jade-300: #6FC3B0;
  --jade-500: #3DAE99;
  --jade-600: #2F9583;
  --jade-700: #1F7466;
  --jade-tint: #E8F4F1;

  /* Accents */
  --raspberry-500: #B83E5A;
  --raspberry-600: #9B2F49;
  --peach-300:  #F2C9A4;
  --peach-400:  #EDB079;
  --apricot-500:#E89A4E;
  --rose-200:   #F2D5CE;

  /* Réseaux (brand-locked, on ne touche pas) */
  --fb: #1877F2;
  --ig: #E1306C;
  --li: #0077B5;

  /* Encres */
  --ink-900: #20272C;
  --ink-700: #3D4750;
  --ink-500: #6B7680;
  --ink-300: #B6BDC4;
  --ink-200: #D9DEE3;
  --paper:   #FFFFFF;

  /* États */
  --success-bg: #E5F2EC;
  --success-bd: #B5D9C7;
  --success-tx: #1F7466;
  --warn-bg:    #FFF2E2;
  --warn-bd:    #F2C9A4;
  --warn-tx:    #8A531C;
  --danger:     #B83E5A;

  /* Typographie */
  --font-sans:   "Open Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-script: "Caveat", "Brush Script MT", cursive;
  --font-mono:   "JetBrains Mono", ui-monospace, "SFMono-Regular", monospace;

  /* Rayons */
  --r-sm: 6px;
  --r-md: 12px;
  --r-lg: 20px;
  --r-xl: 32px;
  --r-full: 999px;

  /* Ombres */
  --shadow-sm: 0 1px 2px rgba(32,39,44,.04), 0 1px 3px rgba(32,39,44,.06);
  --shadow-md: 0 4px 12px rgba(32,39,44,.06), 0 2px 6px rgba(32,39,44,.05);
  --shadow-lg: 0 18px 40px -12px rgba(32,39,44,.18);
  --shadow-cta: 0 6px 20px -4px rgba(184,62,90,.35);
  --shadow-jade: 0 6px 20px -4px rgba(61,174,153,.35);
}

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

body {
  font-family: var(--font-sans);
  background: var(--cream-50);
  color: var(--ink-700);
  -webkit-font-smoothing: antialiased;
  font-size: 15px;
  line-height: 1.55;
}

/* ---- Typographie ---- */
.eyebrow {
  font-family: var(--font-script);
  font-size: 24px;
  color: var(--jade-500);
  line-height: 1;
  font-weight: 500;
}
.t-display {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 32px;
  line-height: 1.15;
  letter-spacing: -.015em;
  color: var(--ink-900);
}
.t-h1 { font-weight: 700; font-size: 22px; line-height: 1.25; color: var(--ink-900); }
.t-h2 { font-weight: 600; font-size: 17px; line-height: 1.3; color: var(--ink-900); }
.t-mono {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink-500);
}

/* ---- Header décoratif (bandeau hero des pages) ---- */
.vr-hero {
  background:
    radial-gradient(700px 280px at 92% 20%, var(--peach-300) 0%, transparent 60%),
    radial-gradient(620px 260px at 10% 30%, var(--jade-300) 0%, transparent 60%),
    var(--cream-100);
  padding: 32px 24px 28px;
  position: relative;
  overflow: hidden;
  border-bottom: 1px solid var(--cream-200);
}
.vr-hero .eyebrow { margin-bottom: 4px; display: block; }

/* ---- Status dot ---- */
.dot-live {
  width: 7px; height: 7px;
  background: var(--jade-500);
  border-radius: 50%;
  box-shadow: 0 0 0 4px rgba(61,174,153,.18);
  animation: pulseLive 2.4s ease-in-out infinite;
}
@keyframes pulseLive {
  0%, 100% { box-shadow: 0 0 0 4px rgba(61,174,153,.18); }
  50%      { box-shadow: 0 0 0 8px rgba(61,174,153,0); }
}

/* ---- Pills & chips ---- */
.pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  border-radius: var(--r-full);
  background: rgba(255,255,255,.7);
  border: 1px solid var(--cream-300);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ink-700);
  backdrop-filter: blur(6px);
}

/* ---- Boutons ---- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 22px;
  border-radius: var(--r-full);
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 14px;
  border: 1px solid transparent;
  cursor: pointer;
  text-decoration: none;
  transition: transform .15s ease, box-shadow .18s ease, background .15s ease, border-color .15s ease;
  line-height: 1;
}
.btn:hover  { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
.btn:disabled { opacity: .55; cursor: not-allowed; transform: none; }

.btn-primary    { background: var(--raspberry-500); color: #fff; box-shadow: var(--shadow-cta); }
.btn-primary:hover    { background: var(--raspberry-600); }
.btn-secondary  { background: var(--jade-500); color: #fff; box-shadow: var(--shadow-jade); }
.btn-secondary:hover  { background: var(--jade-600); }
.btn-ghost      { background: transparent; color: var(--ink-900); border-color: var(--cream-300); }
.btn-ghost:hover{ background: var(--cream-100); border-color: var(--cream-300); }
.btn-dark       { background: var(--ink-900); color: #fff; }
.btn-dark:hover { background: #000; }

.btn-block { display: flex; width: 100%; padding: 15px 22px; font-size: 15px; }

/* ---- Cartes ---- */
.card {
  background: var(--paper);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--cream-200);
  overflow: hidden;
}

/* ---- Champs de saisie ---- */
.field {
  width: 100%;
  border: 1px solid var(--cream-300);
  border-radius: var(--r-md);
  padding: 12px 16px;
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 1.55;
  color: var(--ink-900);
  background: var(--paper);
  outline: none;
  transition: border-color .15s, box-shadow .15s;
  resize: vertical;
}
.field:focus {
  border-color: var(--jade-500);
  box-shadow: 0 0 0 4px rgba(61,174,153,.14);
}
.field::placeholder { color: var(--ink-500); }

/* ---- Spinner ---- */
.spinner {
  display: inline-block;
  width: 16px; height: 16px;
  border: 2px solid rgba(255,255,255,.4);
  border-top-color: #fff;
  border-radius: 50%;
  animation: spin .7s linear infinite;
  flex-shrink: 0;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ---- Helpers ---- */
.flex { display: flex; }
.flex-col { display: flex; flex-direction: column; }
.items-center { align-items: center; }
.justify-center { justify-content: center; }
.gap-2 { gap: 8px; } .gap-3 { gap: 12px; } .gap-4 { gap: 16px; }

/* ---- Décor géométrique ---- */
.deco-circle { position: absolute; border-radius: 50%; pointer-events: none; }