/* Après le bip — blanc nacré & dorures */
:root {
  --ink: #3b3226;
  --soft: #8b7d68;
  --gold: #b08d3c;
  --gold-deep: #8a6a24;
  --gold-grad: linear-gradient(135deg, #8a6a24 0%, #d2b05a 28%, #f6e7a8 50%, #c79f45 72%, #8a6a24 100%);
  --pearl: #f8f5ef;
  --line: rgba(176, 141, 60, .45);
}
* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
body {
  font-family: 'Jost', 'Helvetica Neue', sans-serif;
  font-weight: 300;
  color: var(--ink);
  background:
    radial-gradient(60% 50% at 12% 8%, #ffffff 0, transparent 70%),
    radial-gradient(45% 40% at 88% 18%, #f7ecee 0, transparent 70%),
    radial-gradient(50% 45% at 25% 92%, #ecf1f6 0, transparent 70%),
    radial-gradient(55% 45% at 85% 88%, #f9f0de 0, transparent 70%),
    var(--pearl);
  background-attachment: fixed;
  min-height: 100vh;
  min-height: 100dvh;
  -webkit-font-smoothing: antialiased;
}
[hidden] { display: none !important; }

/* Typographie */
.script { font-family: 'Pinyon Script', cursive; font-weight: 400; line-height: 1.15; }
.serif { font-family: 'Cormorant Garamond', Georgia, serif; }
.gold {
  background: var(--gold-grad);
  -webkit-background-clip: text; background-clip: text;
  color: transparent; -webkit-text-fill-color: transparent;
}
.caps { text-transform: uppercase; letter-spacing: .32em; font-size: .72rem; font-weight: 400; color: var(--soft); }
h1, h2, h3, p { margin: 0; }
.names { font-size: clamp(2.9rem, 13vw, 4.6rem); padding: .1em .15em; }
.lead { font-family: 'Cormorant Garamond', Georgia, serif; font-size: 1.35rem; font-style: italic; line-height: 1.45; color: var(--ink); }
.hint { font-size: .85rem; color: var(--soft); letter-spacing: .04em; }

/* Ornement */
.orn { display: flex; align-items: center; justify-content: center; gap: 14px; margin: 22px auto; width: min(260px, 80%); }
.orn::before, .orn::after { content: ''; flex: 1; height: 1px; background: linear-gradient(90deg, transparent, var(--gold)); }
.orn::after { transform: scaleX(-1); }
.orn i { width: 7px; height: 7px; transform: rotate(45deg); background: var(--gold-grad); }

/* Carte encadrée */
.card {
  position: relative;
  background: linear-gradient(160deg, rgba(255,255,255,.92), rgba(255,253,248,.78));
  border: 1px solid var(--line);
  box-shadow: 0 30px 70px -30px rgba(120, 95, 40, .35), inset 0 0 0 1px rgba(255,255,255,.9);
  backdrop-filter: blur(6px);
}
.card::before {
  content: ''; position: absolute; inset: 9px; pointer-events: none;
  border: 1px solid transparent;
  border-image: var(--gold-grad) 1;
  opacity: .8;
}

/* Boutons */
button { font: inherit; color: inherit; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  padding: 15px 30px; min-height: 50px;
  border: 1px solid var(--gold); background: transparent; color: var(--gold-deep);
  text-transform: uppercase; letter-spacing: .26em; font-size: .74rem; font-weight: 400;
  transition: background .25s, color .25s, box-shadow .25s;
}
.btn:hover { background: rgba(176,141,60,.08); }
.btn.fill { background: var(--gold-grad); color: #fff; border-color: transparent; text-shadow: 0 1px 2px rgba(90,65,10,.45); box-shadow: 0 12px 26px -12px rgba(138,106,36,.7); }
.btn.fill:hover { box-shadow: 0 16px 30px -12px rgba(138,106,36,.9); }
.btn:disabled { opacity: .45; cursor: default; }
.link { background: none; border: 0; padding: 10px; color: var(--soft); font-size: .8rem; letter-spacing: .14em; text-transform: uppercase; text-decoration: underline; text-underline-offset: 5px; text-decoration-color: var(--line); }

.round {
  width: 132px; height: 132px; border-radius: 50%; border: 0; padding: 0;
  display: grid; place-items: center; position: relative;
  background: var(--gold-grad); color: #fff;
  box-shadow: 0 18px 40px -14px rgba(138,106,36,.75), inset 0 0 0 5px rgba(255,255,255,.55), inset 0 0 0 6px rgba(138,106,36,.35);
  transition: transform .2s;
}
.round:active { transform: scale(.96); }
.round svg { width: 46px; height: 46px; filter: drop-shadow(0 1px 2px rgba(90,65,10,.5)); }
.round::after {
  content: ''; position: absolute; inset: -12px; border-radius: 50%;
  border: 1px solid var(--gold); opacity: .5;
  animation: halo 2.6s ease-out infinite;
}
.round.rec::after { animation: none; opacity: .7; transform: scale(calc(1 + var(--lvl, 0) * .35)); transition: transform .08s linear; }
@keyframes halo { 0% { transform: scale(.92); opacity: .7; } 100% { transform: scale(1.28); opacity: 0; } }

/* Champs */
input[type=text], input[type=date] {
  font: inherit; font-family: 'Cormorant Garamond', Georgia, serif; font-size: 1.3rem; color: var(--ink);
  width: 100%; padding: 10px 4px; text-align: center;
  background: transparent; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; outline: none;
}
input:focus { border-bottom-color: var(--gold-deep); }
input::placeholder { color: #b9ad99; font-style: italic; }
audio { width: 100%; height: 44px; }

/* Barres d'écoute */
.bars { display: flex; gap: 7px; align-items: center; justify-content: center; height: 70px; }
.bars span { width: 4px; height: 100%; background: var(--gold-grad); border-radius: 2px; animation: bar 1.1s ease-in-out infinite; transform-origin: center; }
.bars span:nth-child(2) { animation-delay: .15s; } .bars span:nth-child(3) { animation-delay: .3s; }
.bars span:nth-child(4) { animation-delay: .45s; } .bars span:nth-child(5) { animation-delay: .6s; }
.bars span:nth-child(6) { animation-delay: .75s; } .bars span:nth-child(7) { animation-delay: .9s; }
@keyframes bar { 0%, 100% { transform: scaleY(.2); } 50% { transform: scaleY(1); } }

.fade { animation: fade .7s ease both; }
@keyframes fade { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { * { animation: none !important; } }