/* da-lagoon.css — Coachly « Lagon » design layer.
   Loaded AFTER styles.css: turns the flat UI into the sticker-cartoon D.A. —
   chunky ink borders, pressable 3D buttons, bouncy entrances, dotted sky. */

/* ---------- foundation: dotted aqua sky ---------- */
.app {
  background-image: radial-gradient(color-mix(in srgb, var(--ink) 7%, transparent) 1.6px, transparent 1.6px);
  background-size: 30px 30px;
}
.ambient .blob { filter: blur(60px); opacity: .55; }
.ambient .b1 { background: color-mix(in srgb, var(--accent) 22%, transparent); animation: blobFloat 14s ease-in-out infinite; }
.ambient .b2 { background: color-mix(in srgb, var(--pop-2) 26%, transparent); animation: blobFloat 18s ease-in-out infinite reverse; }
.ambient .b3 {
  width: 300px; height: 300px; border-radius: 50%;
  background: color-mix(in srgb, var(--pop) 24%, transparent);
  top: 30%; left: 58%; filter: blur(70px); position: absolute; opacity: .4;
  animation: blobFloat 22s ease-in-out infinite;
}
@keyframes blobFloat {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(-24px, 18px) scale(1.06); }
}

/* ---------- display type: Lilita is single-weight, needs no tightening ---------- */
.app[data-pairing="lilita"] .hero-h1,
.app[data-pairing="lilita"] .title,
.app[data-pairing="lilita"] .brand-word,
.app[data-pairing="lilita"] .step-card h3,
.app[data-pairing="lilita"] .choice h4,
.app[data-pairing="lilita"] .cc-name,
.app[data-pairing="lilita"] .sim-question,
.app[data-pairing="lilita"] .preview-q,
.app[data-pairing="lilita"] .gauge-num b,
.app[data-pairing="lilita"] .recap-row .v,
.app[data-pairing="lilita"] .fb-panel h3,
.app[data-pairing="lilita"] .verdict,
.app[data-pairing="lilita"] .coach-tag .nm,
.app[data-pairing="lilita"] .qcount,
.app[data-pairing="lilita"] .step-num {
  font-weight: 400;
  letter-spacing: 0.01em;
}
.app[data-pairing="lilita"] .hero-h1 { line-height: 1.04; }
.app[data-pairing="lilita"] .title { line-height: 1.12; }

/* ---------- edge + hard-shadow tokens ---------- */
.app {
  --edge: color-mix(in srgb, var(--ink) 86%, transparent);
  --edge-soft: color-mix(in srgb, var(--ink) 16%, transparent);
}

/* ---------- buttons: pressable 3D ---------- */
.btn {
  transition: transform .1s ease, box-shadow .1s ease, background .18s;
  font-weight: 750;
}
.btn-primary {
  background: var(--accent);
  box-shadow: 0 5px 0 color-mix(in srgb, var(--accent) 62%, var(--ink));
}
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 7px 0 color-mix(in srgb, var(--accent) 62%, var(--ink)); }
.btn-primary:active { transform: translateY(3px) scale(1); box-shadow: 0 1px 0 color-mix(in srgb, var(--accent) 62%, var(--ink)); }
.btn-ink {
  background: var(--ink); color: var(--bg);
  box-shadow: 0 5px 0 color-mix(in srgb, var(--ink) 55%, black);
}
.btn-ink:hover { transform: translateY(-2px); }
.btn-ink:active { transform: translateY(3px); box-shadow: 0 1px 0 color-mix(in srgb, var(--ink) 55%, black); }
.btn-ghost {
  background: var(--surface);
  box-shadow: inset 0 0 0 2px var(--edge), 0 4px 0 var(--edge-soft);
  color: var(--ink);
}
.btn-ghost:hover { transform: translateY(-2px); box-shadow: inset 0 0 0 2px var(--edge), 0 6px 0 var(--edge-soft); background: var(--surface); }
.btn-ghost:active { transform: translateY(2px); box-shadow: inset 0 0 0 2px var(--edge), 0 1px 0 var(--edge-soft); }
.btn:disabled { transform: none; box-shadow: none; }

/* ---------- sticker eyebrow ---------- */
.eyebrow {
  background: var(--pop);
  color: var(--ink);
  box-shadow: inset 0 0 0 2px var(--edge), 0 3px 0 var(--edge-soft);
  transform: rotate(-1.2deg);
  font-weight: 800;
}
.eyebrow .dot { background: var(--ink); }

/* ---------- cards: sticker outlines ---------- */
.step-card, .choice, .preview-card, .recap-card, .fb-panel, .filechip,
.coach-card, .peptalk-card, .textarea, .seg2 {
  box-shadow: inset 0 0 0 2px var(--edge), 0 6px 0 var(--edge-soft);
  border-radius: var(--radius-lg);
}
.textarea { box-shadow: inset 0 0 0 2px var(--edge); }
.textarea:focus { box-shadow: inset 0 0 0 2.5px var(--accent); }
.seg2 { background: var(--surface); padding: 5px; box-shadow: inset 0 0 0 2px var(--edge); }
.seg2 button[data-on="1"] { background: var(--pop); color: var(--ink); box-shadow: inset 0 0 0 2px var(--edge); font-weight: 750; }

.choice { transition: transform .16s cubic-bezier(.34,1.56,.64,1), box-shadow .16s; }
.choice:hover {
  transform: translateY(-5px) rotate(-0.6deg);
  box-shadow: inset 0 0 0 2px var(--edge), 0 11px 0 var(--edge-soft);
}
.choice-ic {
  background: color-mix(in srgb, var(--accent) 14%, var(--surface));
  box-shadow: inset 0 0 0 2px var(--edge);
  color: var(--accent);
}
.coach-card { transition: transform .16s cubic-bezier(.34,1.56,.64,1), box-shadow .16s; }
.coach-card:hover { transform: translateY(-5px) rotate(0.6deg); box-shadow: inset 0 0 0 2px var(--edge), 0 11px 0 var(--edge-soft); }
.coach-card.on { box-shadow: inset 0 0 0 3px var(--accent), 0 8px 0 color-mix(in srgb, var(--accent) 30%, transparent); }

/* logo badge */
.pep-badge {
  background: var(--surface);
  box-shadow: inset 0 0 0 2px var(--edge), 0 3px 0 var(--edge-soft);
  overflow: hidden;
}
.brand-word { color: var(--ink); }

/* ---------- hero ---------- */
.hero-h1 .hl {
  color: var(--accent);
}
.hero-meta .sep { background: var(--pop-2); width: 6px; height: 6px; }

/* ---------- progress: candy bar ---------- */
.bars { gap: 8px; }
.bar { height: 12px; background: var(--surface); box-shadow: inset 0 0 0 2px var(--edge); }
.bar > i { background: var(--pop); margin: 3px; border-radius: 999px; inset: 0; }
.bar.done > i { background: var(--accent); }

/* ---------- coach avatars: palette trio ---------- */
.cav-empathique { background: var(--pop-2); color: #fff; box-shadow: inset 0 0 0 2px var(--edge), 0 3px 0 var(--edge-soft); }
.cav-neutre { background: var(--accent); color: #fff; box-shadow: inset 0 0 0 2px var(--edge), 0 3px 0 var(--edge-soft); }
.cav-severe { background: var(--ink); color: var(--bg); box-shadow: inset 0 0 0 2px var(--edge), 0 3px 0 var(--edge-soft); }

/* ---------- mic + wave ---------- */
.mic-btn {
  box-shadow: 0 6px 0 color-mix(in srgb, var(--accent) 62%, var(--ink));
  transition: transform .1s, box-shadow .1s, background .2s;
}
.mic-btn:hover { transform: translateY(-2px); box-shadow: 0 8px 0 color-mix(in srgb, var(--accent) 62%, var(--ink)); }
.mic-btn:active { transform: translateY(4px) scale(1); box-shadow: 0 1px 0 color-mix(in srgb, var(--accent) 62%, var(--ink)); }
.mic-btn[data-on="1"] { box-shadow: 0 6px 0 color-mix(in srgb, var(--ink) 55%, black); }
.wave span { background: var(--accent); }
.wave.me.on span { background: var(--pop-2); }

/* ---------- feedback ---------- */
.gauge .val { stroke: var(--accent); }
.metric .mt { height: 12px; background: var(--surface); box-shadow: inset 0 0 0 2px var(--edge); }
.metric .mt > i { background: var(--pop); margin: 3px; border-radius: 999px; height: auto; position: absolute; inset: 0; }
.metric .mt { position: relative; }
.fb-panel.good h3 .ic { background: color-mix(in srgb, var(--success) 18%, var(--surface)); box-shadow: inset 0 0 0 2px var(--edge); }
.fb-panel.grow h3 .ic { background: color-mix(in srgb, var(--pop-2) 22%, var(--surface)); box-shadow: inset 0 0 0 2px var(--edge); color: color-mix(in srgb, var(--pop-2) 70%, var(--ink)); }
.fb-panel.grow .dot { background: color-mix(in srgb, var(--pop-2) 22%, transparent); color: color-mix(in srgb, var(--pop-2) 70%, var(--ink)); }
.chip {
  background: var(--pop);
  color: var(--ink);
  box-shadow: inset 0 0 0 2px var(--edge);
  font-weight: 750;
}
.chip.plain { background: var(--surface); color: var(--ink-soft); box-shadow: inset 0 0 0 2px var(--edge-soft); }

/* ---------- entrances: bouncy ---------- */
.screen-enter { animation: screenPop .55s cubic-bezier(.34,1.56,.64,1) both; }
@keyframes screenPop {
  from { opacity: 0; transform: translateY(22px) scale(.985); }
  to { opacity: 1; transform: none; }
}
.filechip { animation: screenPop .45s cubic-bezier(.34,1.56,.64,1) both; }

/* landing steps stagger */
.steps-strip .step-card { animation: screenPop .55s cubic-bezier(.34,1.56,.64,1) both; }
.steps-strip .step-card:nth-child(1) { animation-delay: .12s; }
.steps-strip .step-card:nth-child(2) { animation-delay: .22s; }
.steps-strip .step-card:nth-child(3) { animation-delay: .32s; }
.step-ic { background: color-mix(in srgb, var(--accent) 12%, var(--surface)); box-shadow: inset 0 0 0 2px var(--edge-soft); color: var(--accent); }
.step-num { color: color-mix(in srgb, var(--pop-2) 75%, var(--ink)); }

/* preview card tilt sticker */
.preview-card { transform: rotate(1.1deg); }
.preview-card::before { background: radial-gradient(120% 80% at 80% -10%, color-mix(in srgb, var(--pop) 22%, transparent), transparent 60%); }

/* ---------- mascot image (Egyptian cat) ---------- */
.pep-img { filter: drop-shadow(0 6px 10px rgba(12,59,73,.18)); }
.pep-img.pep-bob { animation: catBob 3.6s ease-in-out infinite; transform-origin: 50% 90%; }
@keyframes catBob {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(-6px) rotate(-1deg); }
}
.pep-img.pep-talking { animation: catTalk 1.1s ease-in-out infinite; transform-origin: 50% 88%; }
.pep-img.pep-bob.pep-talking { animation: catBob 3.6s ease-in-out infinite, catTalk 1.1s ease-in-out infinite; }
@keyframes catTalk {
  0%, 100% { scale: 1; }
  50% { scale: 1.025 0.985; }
}
/* Le cadrage du chat dans le badge est calculé au pixel près dans mascot-shim.jsx
   (chat centré sur son axe, posé sur l'arête basse) : plus de retouche ici. */

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .ambient .blob, .steps-strip .step-card { animation: none !important; }
}