/* Bouch.ee — Variante D "Le carnet de Camille"
   Crème lumineux · Fraunces éditorial · Inter clean · accents tampons + surligneur
   Mobile-first. Pas saturé. Joyeux. */

:root {
  /* ── Surfaces lumineuses ──────────────────────────────────────── */
  --paper:        #fbf7ee;          /* crème très clair, lumineux */
  --paper-warm:   #f5efde;          /* note légère */
  --paper-card:   #ffffff;          /* cards, contraste doux */
  --paper-edge:   #e8dfc6;
  --line:         #e0d5b8;
  --line-soft:    #ece2c8;
  --line-strong:  #c9bd9a;

  /* ── Encres ──────────────────────────────────────────────────── */
  --ink:          #1f1a14;
  --ink-soft:     #443c2f;
  --ink-faint:    #7d7361;
  --ink-ghost:    #b9b09a;

  /* ── Accents ─────────────────────────────────────────────────── */
  --stamp:        #b23029;          /* tampon rouge */
  --stamp-soft:   rgba(178,48,41,.10);
  --olive:        #5a6b3d;          /* végé */
  --highlight:    #f4d35e;          /* surligneur */
  --ink-blue:     #1f3d5e;          /* signature manuscrite */

  /* ── Brand (ambre chaleureux, mais doux) ─────────────────────── */
  --brand:        #c87a3c;
  --brand-soft:   rgba(200,122,60,.12);
  --brand-deep:   #9a5a26;

  /* ── Type ────────────────────────────────────────────────────── */
  --font-display: "Fraunces", Georgia, serif;
  --font-script:  "Caveat", cursive;
  --font-body:    "Inter", system-ui, sans-serif;
  --font-mono:    "JetBrains Mono", ui-monospace, monospace;

  /* ── Spacing ─────────────────────────────────────────────────── */
  --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px;
  --s-5: 24px; --s-6: 32px; --s-7: 48px; --s-8: 64px;

  --r-xs: 4px; --r-sm: 8px; --r-md: 12px; --r-lg: 18px; --r-pill: 999px;

  --shadow-card: 0 1px 2px rgba(31,26,20,0.04), 0 4px 12px rgba(31,26,20,0.06);
  --shadow-pop:  0 8px 28px rgba(31,26,20,0.12);
}

.bouch-d * { box-sizing: border-box; }
.bouch-d {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  background-image:
    repeating-linear-gradient(90deg, transparent 0 3px, rgba(184,166,128,0.018) 3px 4px),
    radial-gradient(circle at 20% 10%, rgba(244,211,94,0.06), transparent 60%);
}
.bouch-d h1,.bouch-d h2,.bouch-d h3,.bouch-d h4 {
  font-family: var(--font-display);
  font-weight: 500; letter-spacing: -0.02em; margin: 0; color: var(--ink);
}
.bouch-d p { margin: 0; }
.bouch-d button { font-family: inherit; }

/* Tampons légers (réutilisés de C, mais plus discrets) */
.dstamp {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 3px 9px;
  border: 1.2px solid var(--stamp);
  color: var(--stamp);
  border-radius: var(--r-xs);
  font-family: var(--font-mono);
  font-size: 9.5px; font-weight: 600;
  letter-spacing: 0.12em; text-transform: uppercase;
  filter: opacity(0.92);
}
.dstamp.olive { border-color: var(--olive); color: var(--olive); }
.dstamp.blue  { border-color: var(--ink-blue); color: var(--ink-blue); }
.dstamp.tilt  { transform: rotate(-1.5deg); }

.dscript { font-family: var(--font-script); color: var(--ink-blue); font-size: 19px; line-height: 1.3; }
.dscript.red { color: var(--stamp); }

.dhighlight {
  background-image: linear-gradient(180deg, transparent 55%, rgba(244,211,94,0.55) 55%, rgba(244,211,94,0.55) 92%, transparent 92%);
  padding: 0 2px;
}

/* Voice waveform — only animates when .active (user is actually speaking) */
.dwave span {
  display: inline-block;
  width: 3px; height: 4px; margin: 0 1.5px;
  background: var(--ink-ghost);
  border-radius: 2px;
}
.dwave.active span {
  background: var(--stamp);
  animation: dwave 1.1s ease-in-out infinite;
}
.dwave.active span:nth-child(2){animation-delay:.1s}
.dwave.active span:nth-child(3){animation-delay:.2s}
.dwave.active span:nth-child(4){animation-delay:.3s}
.dwave.active span:nth-child(5){animation-delay:.4s}
.dwave.active span:nth-child(6){animation-delay:.5s}
@keyframes dwave { 0%,100%{height:6px} 50%{height:24px} }
@keyframes dblink { 0%,49%{opacity:1} 50%,100%{opacity:0} }
@keyframes dfade { from{opacity:0; transform:translateY(8px)} to{opacity:1; transform:none} }
@keyframes dpulse { 0%,100%{opacity:1} 50%{opacity:.5} }