/* =====================================================================
   THE BIRTHDAY RITUAL — responsive.css
   Mobile : composition réellement redessinée (pas un simple zoom arrière).
   ===================================================================== */

/* grands écrans 4K */
@media (min-width: 2200px) {
  body { font-size: 24px; }
  .hud-btn { font-size: 18px; min-height: 56px; padding: 10px 20px; }
}

/* tablette */
@media (max-width: 1024px) {
  .whisper { letter-spacing: .32em; text-indent: .32em; }
  .kicker { letter-spacing: .45em; text-indent: .45em; }
}

/* smartphone */
@media (max-width: 640px) {
  body { font-size: 16px; }
  .act { padding: calc(74px + var(--safe-t)) 14px calc(96px + var(--safe-b)); }
  .whisper { font-size: clamp(17px, 6vw, 28px); letter-spacing: .2em; text-indent: .2em; line-height: 1.5; }
  .logo-huge { width: 98vw; }
  .logo-title { width: 98vw; margin-top: 2vw; }
  .hfb { font-size: clamp(22px, 8.2vw, 44px); line-height: 1.05; padding: 0 6px; }
  .btn { width: min(92vw, 420px); padding: 18px 16px 15px; font-size: clamp(17px, 5vw, 24px); }
  .btn-ghost { font-size: 14px; }
  .hint { letter-spacing: .18em; font-size: 12px; }
  .kicker { font-size: 13px; letter-spacing: .4em; text-indent: .4em; }
  .hud { gap: 6px; right: 8px; top: calc(8px + var(--safe-t)); }
  .hud-btn { padding: 6px 10px; font-size: 12px; letter-spacing: .14em; min-height: 44px; }
  .hud-bottom { left: 8px; bottom: calc(8px + var(--safe-b)); }
  .secret { bottom: calc(90px + var(--safe-b)); letter-spacing: .12em; }
  .final { gap: 4px; }
  .final-line { font-size: clamp(26px, 10vw, 54px); }
  .final-line[data-i="2"] { font-size: clamp(22px, 8.4vw, 46px); }
  .long-live { font-size: clamp(36px, 14vw, 80px); }
  .msg-en { max-width: 24ch; font-size: clamp(17px, 5.2vw, 24px); }
  .msg-fr { font-size: clamp(14px, 4.2vw, 18px); max-width: 28ch; }
  .signature { letter-spacing: .22em; text-indent: .22em; }
  #cake-svg { width: min(70vw, 34vh); }
}

/* paysage bas (téléphone couché) */
@media (max-height: 480px) and (orientation: landscape) {
  .act { padding-top: 56px; padding-bottom: 28px; }
  .kicker { margin-bottom: 6px; }
  .hint { margin-top: 8px; }
  .hfb { font-size: clamp(18px, 5vh, 36px); }
  .secret { bottom: 60px; }
  .cake-actions { flex-direction: row; flex-wrap: wrap; justify-content: center; gap: 10px; }
  .final-line { font-size: clamp(20px, 8vh, 44px); }
  .long-live { font-size: clamp(28px, 13vh, 70px); margin-top: 1vh; }
  .msg-en { margin-top: 1vh; max-width: 60ch; font-size: clamp(14px, 4vh, 20px); }
  .msg-fr { font-size: clamp(12px, 3.4vh, 16px); max-width: 70ch; }
  .signature { margin: 2vh 0 6px; }
  .logo-huge, .logo-title { width: min(80vw, 150vh); }
}

/* appareils tactiles : pas de curseur personnalisé, cibles plus larges */
@media (hover: none), (pointer: coarse) {
  .cursor { display: none; }
  body.has-cursor, body.has-cursor * { cursor: auto !important; }
  .btn:hover { transform: none; }
}