/* ═══════════════════════════════════════════════
   Pour Imane — « une lettre au fond du lagon »
   Palette : lagon #8fc6e8 · lilas #b9a5e3 · corail #f29ca3
             écume #f7f3fc · encre #4a3f78 · flamme #ffc66b
   ═══════════════════════════════════════════════ */

:root {
  --lagon: #8fc6e8;
  --lilas: #b9a5e3;
  --corail: #f29ca3;
  --corail-fonce: #e5808a;
  --ecume: #f7f3fc;
  --encre: #4a3f78;
  --encre-douce: #7a6fa3;
  --flamme: #ffc66b;
  --carte: rgba(255, 255, 255, 0.72);
}

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

[hidden] { display: none !important; }

html { -webkit-text-size-adjust: 100%; }

html, body {
  touch-action: pan-y;          /* autorise le défilement vertical, bloque le pincer-zoomer */
}

body {
  font-family: "Nunito Sans", system-ui, sans-serif;
  color: var(--encre);
  background: linear-gradient(180deg, #f7f3fc 0%, #dbeafa 38%, #cfe0f5 62%, #c3b4e9 100%) fixed;
  min-height: 100dvh;
  overflow-x: hidden;
  -webkit-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

/* ── bouton sourdine ── */
.mute-btn {
  position: fixed;
  top: max(12px, env(safe-area-inset-top));
  right: 14px;
  z-index: 60;
  width: 42px;
  height: 42px;
  border: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.65);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow: 0 6px 16px -8px rgba(74, 63, 120, 0.5);
  font-size: 19px;
  line-height: 1;
  cursor: pointer;
  transition: transform 0.15s ease;
}
.mute-btn:active { transform: scale(0.9); }
.mute-btn:focus-visible { outline: 3px solid var(--encre); outline-offset: 2px; }

.sound-cue {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--encre-douce);
  background: rgba(255, 255, 255, 0.55);
  padding: 6px 14px;
  border-radius: 999px;
  animation: cuePulse 2s ease-in-out infinite;
}
@keyframes cuePulse {
  0%, 100% { opacity: 0.7; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.04); }
}

/* ── canvases d'ambiance ── */
#bubbles, #confetti {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
#bubbles { z-index: 0; }
#confetti { z-index: 50; }

/* ── écrans ── */
#app { position: relative; z-index: 1; }

.screen { display: none; }
.screen.active { display: block; animation: screenIn 0.7s ease both; }

@keyframes screenIn {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: none; }
}

.screen-inner {
  max-width: 460px;
  margin: 0 auto;
  min-height: 100dvh;
  padding: max(24px, env(safe-area-inset-top)) 22px max(32px, env(safe-area-inset-bottom));
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 18px;
}

/* ── typo ── */
.eyebrow {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--encre-douce);
}

.display {
  font-family: "Fraunces", serif;
  font-weight: 600;
  font-size: clamp(34px, 9vw, 44px);
  line-height: 1.08;
  letter-spacing: -0.01em;
}
.display em {
  font-style: italic;
  font-weight: 500;
  background: linear-gradient(90deg, #7f6fc4, #d17f95);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.lead {
  font-size: 17px;
  line-height: 1.55;
  color: var(--encre-douce);
  font-weight: 600;
}

.script {
  font-family: "Caveat", cursive;
  font-weight: 600;
}

.tiny-hint {
  font-size: 13px;
  color: var(--encre-douce);
  opacity: 0.8;
}

/* ── boutons ── */
.btn {
  appearance: none;
  border: none;
  cursor: pointer;
  font-family: inherit;
  font-size: 17px;
  font-weight: 700;
  color: #fff;
  padding: 15px 34px;
  border-radius: 999px;
  background: linear-gradient(115deg, var(--lagon), var(--lilas));
  box-shadow: 0 10px 24px -8px rgba(122, 111, 163, 0.55);
  transition: transform 0.18s ease, box-shadow 0.18s ease;
  margin-top: 6px;
}
.btn:active { transform: scale(0.96); }
.btn:focus-visible { outline: 3px solid var(--encre); outline-offset: 3px; }

.btn.ghost {
  background: transparent;
  color: var(--encre-douce);
  box-shadow: none;
  border: 2px solid rgba(122, 111, 163, 0.35);
  font-size: 15px;
  padding: 11px 24px;
}

/* ── cartes ── */
.card {
  background: var(--carte);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(255, 255, 255, 0.8);
  border-radius: 26px;
  padding: 28px 24px;
  box-shadow: 0 18px 40px -18px rgba(74, 63, 120, 0.35);
  width: 100%;
}

/* ═══ ÉCRAN 1 · intro ═══ */
.intro-layout { gap: 14px; }

.crab-stage { position: relative; margin: 14px 0 6px; }

.crab {
  width: 190px;
  height: auto;
  display: block;
  animation: crabBob 3.2s ease-in-out infinite;
}
@keyframes crabBob {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-9px); }
}

.claw-left  { transform-origin: 75px 78px;  animation: waveL 2.6s ease-in-out infinite; }
.claw-right { transform-origin: 145px 78px; animation: waveR 2.6s ease-in-out infinite 0.4s; }
@keyframes waveL { 0%,100% { transform: rotate(0deg); } 50% { transform: rotate(-14deg); } }
@keyframes waveR { 0%,100% { transform: rotate(0deg); } 50% { transform: rotate(14deg); } }

.crab-bubble {
  position: absolute;
  top: -14px;
  right: -34px;
  background: #fff;
  color: var(--encre);
  font-size: 21px;
  padding: 6px 16px;
  border-radius: 18px 18px 18px 4px;
  box-shadow: 0 8px 20px -10px rgba(74, 63, 120, 0.4);
  transform: rotate(6deg);
}

/* ═══ ÉCRAN 2 · bougies ═══ */
.cake-stage { width: 100%; max-width: 360px; }

#cake { width: 100%; height: auto; display: block; }

.flame-g {
  transform-origin: 0px 75px;
  transform-box: view-box;
  animation: flicker 0.85s ease-in-out infinite;
  transition: opacity 0.45s ease, transform 0.45s ease;
}
/* chaque flamme vacille à son propre rythme */
.candle[data-i="0"] .flame-g { animation-duration: 0.82s; }
.candle[data-i="1"] .flame-g { animation-duration: 0.97s; animation-delay: 0.2s; }
.candle[data-i="2"] .flame-g { animation-duration: 0.74s; animation-delay: 0.45s; }
.candle[data-i="3"] .flame-g { animation-duration: 1.05s; animation-delay: 0.15s; }
.candle[data-i="4"] .flame-g { animation-duration: 0.9s;  animation-delay: 0.35s; }

@keyframes flicker {
  0%   { transform: scale(1, 1)       translateX(0)     rotate(0deg); }
  25%  { transform: scale(0.93, 1.07) translateX(0.5px) rotate(1.6deg); }
  50%  { transform: scale(1.04, 0.96) translateX(-0.4px) rotate(-1.2deg); }
  75%  { transform: scale(0.96, 1.05) translateX(0.3px) rotate(1deg); }
  100% { transform: scale(1, 1)       translateX(0)     rotate(0deg); }
}

.flame-halo {
  transform-origin: 0px 60px;
  transform-box: view-box;
  animation: haloPulse 1.5s ease-in-out infinite alternate;
}
@keyframes haloPulse {
  from { opacity: 0.6; transform: scale(0.9); }
  to   { opacity: 1;   transform: scale(1.12); }
}

.candle { cursor: pointer; }
.candle.out .flame-g { opacity: 0; transform: scale(0.2, 0.05); animation: none; }
.candle.out .flame-halo { opacity: 0; animation: none; }
.candle.out .smoke { animation: smokeUp 1.4s ease-out forwards; }

@keyframes smokeUp {
  0%   { opacity: 0.7; transform: translateY(0) scale(0.6); }
  100% { opacity: 0;   transform: translateY(-44px) scale(1.8); }
}

.candles-left {
  font-size: 14px;
  font-weight: 700;
  color: var(--encre-douce);
  margin-top: 4px;
}

.cake-actions { display: flex; flex-direction: column; align-items: center; gap: 10px; }

.btn.listening {
  background: linear-gradient(115deg, var(--corail), var(--lilas));
  animation: pulse 1.2s ease-in-out infinite;
}
@keyframes pulse {
  0%, 100% { box-shadow: 0 10px 24px -8px rgba(229, 128, 138, 0.55); }
  50% { box-shadow: 0 10px 34px -4px rgba(229, 128, 138, 0.85); }
}

.cake-done { display: flex; flex-direction: column; align-items: center; gap: 10px; animation: screenIn 0.8s ease both; }
.wish { font-size: 34px; color: var(--encre); }

/* ═══ ÉCRAN 3 · lettre ═══ */
.letter { text-align: left; }

.letter-title {
  font-size: clamp(26px, 7vw, 32px);
  text-align: center;
  margin-bottom: 22px;
}

.letter p.reveal {
  font-size: 16px;
  line-height: 1.7;
  margin-bottom: 16px;
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.8s ease, transform 0.8s ease;
}
.letter p.reveal.shown { opacity: 1; transform: none; }

.letter strong { color: #7f6fc4; }

.love-line {
  font-weight: 700;
  font-size: 18px !important;
  text-align: center;
}

.signature {
  font-size: 30px !important;
  text-align: right;
  color: var(--encre);
  margin-bottom: 0 !important;
}

/* ═══ ÉCRAN 4 · souvenirs ═══ */
.carousel {
  display: flex;
  gap: 18px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  width: calc(100% + 44px);
  margin: 8px -22px 0;
  padding: 18px 22px 26px;
  scrollbar-width: none;
}
.carousel::-webkit-scrollbar { display: none; }
.carousel { touch-action: pan-x; }

.polaroid {
  flex: 0 0 78%;
  max-width: 300px;
  scroll-snap-align: center;
  background: #fff;
  border-radius: 14px;
  padding: 12px 12px 16px;
  box-shadow: 0 16px 34px -16px rgba(74, 63, 120, 0.45);
  transform: rotate(-2deg);
}
.polaroid:nth-child(even) { transform: rotate(2deg); }

.polaroid-frame {
  aspect-ratio: 3 / 4;              /* colle au format réel des photos → aucun recadrage */
  border-radius: 8px;
  overflow: hidden;
  background: linear-gradient(150deg, #dbeafa, #e3d8f6);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.polaroid-frame img { width: 100%; height: 100%; object-fit: cover; object-position: center top; display: block; }

.polaroid-placeholder { font-size: 44px; }
.polaroid-placeholder-text { font-size: 13px; color: var(--encre-douce); font-weight: 700; }

.polaroid-caption {
  font-family: "Caveat", cursive;
  font-weight: 600;
  font-size: 22px;
  margin-top: 10px;
  color: var(--encre);
}

.dots { display: flex; gap: 7px; justify-content: center; }
.dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: rgba(122, 111, 163, 0.3);
  transition: background 0.25s ease, transform 0.25s ease;
}
.dot.on { background: var(--encre-douce); transform: scale(1.35); }

/* ═══ ÉCRAN 5 · quiz ═══ */
.quiz-title { font-size: clamp(28px, 8vw, 36px); }

.quiz-card { display: flex; flex-direction: column; gap: 14px; }

.quiz-question {
  font-size: 18px;
  font-weight: 700;
  line-height: 1.45;
}

.quiz-options { display: flex; flex-direction: column; gap: 10px; }

.quiz-option {
  appearance: none;
  font-family: inherit;
  font-size: 16px;
  font-weight: 600;
  color: var(--encre);
  text-align: left;
  padding: 14px 18px;
  border-radius: 16px;
  border: 2px solid rgba(122, 111, 163, 0.25);
  background: rgba(255, 255, 255, 0.65);
  cursor: pointer;
  transition: transform 0.15s ease, border-color 0.2s ease, background 0.2s ease;
}
.quiz-option:active { transform: scale(0.98); }

.quiz-option.correct {
  border-color: #6cbf84;
  background: #e3f6e9;
}
.quiz-option.wrong {
  border-color: var(--corail-fonce);
  background: #fdeaec;
  animation: shakeNo 0.4s ease;
}
.quiz-option:disabled { cursor: default; opacity: 0.85; }

@keyframes shakeNo {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-6px); }
  75% { transform: translateX(6px); }
}

.quiz-feedback { font-size: 24px; line-height: 1.3; color: var(--encre); }

.quiz-next { align-self: center; }

.quiz-result { display: flex; flex-direction: column; align-items: center; gap: 12px; animation: screenIn 0.8s ease both; }
.quiz-score { font-size: 54px; }

/* ═══ ÉCRAN 6 · final ═══ */
.counter {
  display: flex;
  gap: 12px;
  justify-content: center;
}

.counter-cell {
  background: var(--carte);
  backdrop-filter: blur(14px);
  border: 1px solid rgba(255, 255, 255, 0.8);
  border-radius: 20px;
  padding: 14px 18px;
  min-width: 86px;
  box-shadow: 0 14px 30px -16px rgba(74, 63, 120, 0.4);
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.counter-num {
  font-family: "Fraunces", serif;
  font-size: 34px;
  font-weight: 600;
}
.counter-label {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--encre-douce);
}

.counter-live {
  font-size: 14px;
  font-weight: 700;
  color: var(--encre-douce);
  font-variant-numeric: tabular-nums;
}

.final-title { font-size: clamp(44px, 13vw, 62px); margin-top: 8px; }

.bigheart {
  appearance: none;
  border: none;
  background: none;
  cursor: pointer;
  font-size: 84px;
  line-height: 1;
  animation: heartbeat 1.6s ease-in-out infinite;
  transition: transform 0.12s ease;
  padding: 8px;
}
.bigheart:active { transform: scale(1.25); }

@keyframes heartbeat {
  0%, 100% { transform: scale(1); }
  12% { transform: scale(1.12); }
  24% { transform: scale(1); }
  36% { transform: scale(1.08); }
  48% { transform: scale(1); }
}

.final-wish {
  font-size: 16px;
  font-weight: 700;
  line-height: 1.55;
  color: var(--encre-douce);
  max-width: 340px;
  margin-top: 6px;
}

.final-sign { font-size: 32px; }

/* ── accessibilité mouvement ── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.15s !important;
  }
}

/* ── écrans plus larges : le lagon respire ── */
@media (min-width: 700px) {
  .screen-inner { max-width: 520px; }
}