/* ==========================================================
   mobile.css — confort sur téléphone + bandeau d'installation (PWA).
   Chargé en DERNIER : il ajuste le site sans changer son identité.
   ========================================================== */

/* Base : pas de défilement horizontal, encoche/barre d'accueil respectées, pas de flash gris au toucher */
html { overflow-x: clip; -webkit-tap-highlight-color: transparent; }
body { overflow-x: clip; padding-inline: env(safe-area-inset-left) env(safe-area-inset-right); }
a, button, .chip { touch-action: manipulation; }

/* ---------- Tablette / téléphone ---------- */
@media (max-width: 820px) {
  :root { --header-h: 60px; }

  .brand img { height: 34px; }
  .nav-toggle { min-width: 46px; min-height: 46px; }

  /* Menu : panneau plein largeur, grandes zones de toucher, page courante bien visible */
  .primary-nav { max-height: calc(100svh - var(--header-h)); overflow-y: auto; box-shadow: 0 24px 40px rgba(0, 0, 0, .75); }
  .primary-nav.is-open { animation: navIn .25s var(--ease); }
  .primary-nav a { display: flex; align-items: center; min-height: 54px; font-size: 1.05rem; letter-spacing: .14em; padding-block: 0; }
  .primary-nav a:hover { border-color: var(--border); background: rgba(176, 18, 30, .1); }
  .primary-nav a[aria-current="page"] { border-bottom-color: var(--border); background: rgba(176, 18, 30, .16); box-shadow: inset 4px 0 0 var(--c-crimson); }
  .primary-nav li:last-child a { border-bottom: 0; }

  /* Rythme vertical plus serré */
  .section { padding-block: var(--sp-7); }
  .section--tight { padding-block: var(--sp-6); }
  .page-hero { padding-block: var(--sp-7) var(--sp-5); }
  .section-head { margin-bottom: var(--sp-5); }
  .site-footer { margin-top: var(--sp-7); }
}
@keyframes navIn { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }

/* ---------- Téléphone ---------- */
@media (max-width: 600px) {
  body { font-size: 1rem; }

  /* Accueil : même ambiance, mieux calé sur un écran vertical */
  .hero__inner { padding-block: var(--sp-6) 4.5rem; }
  .hero__kicker { letter-spacing: .14em; font-size: var(--fs-xs); }
  .hero__subtitle { padding-inline: var(--sp-2); }
  .hero__cta { flex-direction: column; align-items: stretch; width: min(100%, 340px); margin-inline: auto; }
  .hero__cta .btn { width: 100%; }
  .marquee__track span { font-size: .95rem; padding-block: .55rem; }

  /* Boutons et champs faciles à toucher (16 px = pas de zoom automatique sur iPhone) */
  .btn { min-height: 48px; }
  .btn--small { min-height: 44px; }
  .form .btn, .contact-form-wrap .btn[type="submit"] { width: 100%; }
  .input, .field input, .field textarea, .field select { font-size: 16px; min-height: 50px; }
  .field textarea { min-height: 160px; }
  .check input { width: 24px; min-height: 24px; }
  .chip { min-height: 44px; }

  /* Cartes et photos */
  .card__body { padding: var(--sp-4); }
  .framed--portrait { max-width: min(100%, 340px); }
  .framed::before { inset: -6px 6px 6px -6px; }
  .ornament { width: 150px; }

  /* Concerts */
  .concert__date { min-width: 64px; padding-inline: var(--sp-3); }
  .concert__day { font-size: 2.2rem; }
  .concert .btn-row .btn { flex: 1 1 100%; }

  /* Setlist */
  .setlist__item { padding: .85rem .25rem; gap: var(--sp-3); }
  .setlist__title { font-size: 1.15rem; }
  .setlist__pos { font-size: 1.5rem; }

  /* Pied de page : une colonne, liens faciles à toucher */
  .footer-grid { grid-template-columns: 1fr; gap: var(--sp-5); }
  .site-footer li a, .site-footer li span { display: inline-block; padding-block: .3rem; }
  .site-footer { padding-bottom: calc(var(--sp-5) + env(safe-area-inset-bottom)); }
  .footer-bottom { text-align: left; }
}

/* ---------- Écrans tactiles : pas de survol « collé » ---------- */
@media (hover: none) {
  .btn:hover { transform: none; box-shadow: none; }
  .btn::after { display: none; }
  .card:hover { transform: none; border-color: var(--border); box-shadow: none; }
  .card:hover .card__media img { transform: none; filter: grayscale(.4) contrast(1.1); }
  /* sans survol, les photos gardent un peu de couleur au lieu d'être presque en noir et blanc */
  .framed img, .framed:hover img { filter: grayscale(.45) contrast(1.15); }
  .framed--portrait img, .framed--portrait:hover img { filter: none; }
  .setlist__item:hover { background: none; padding-left: .5rem; }
}

/* ---------- Bandeau « Installer l'application » ---------- */
.install-banner {
  position: fixed; z-index: 150;
  left: max(.75rem, env(safe-area-inset-left)); right: max(.75rem, env(safe-area-inset-right));
  bottom: max(.75rem, env(safe-area-inset-bottom));
  max-width: 560px; margin-inline: auto;
  display: grid; grid-template-columns: auto 1fr auto; gap: .8rem; align-items: center;
  padding: .75rem .6rem .75rem .8rem;
  background: linear-gradient(160deg, #1d0b0f, var(--c-ink));
  border: 1px solid var(--c-blood); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-deep), var(--shadow-red);
  animation: bannerIn .5s var(--ease) both;
}
@keyframes bannerIn { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }
.install-banner__icon { width: 48px; height: 48px; border-radius: 12px; box-shadow: 0 0 0 1px var(--c-dried); }
.install-banner__title { display: block; font-family: var(--font-display); font-weight: 400; text-transform: uppercase; letter-spacing: .06em; font-size: 1.1rem; line-height: 1.1; color: var(--c-white); }
.install-banner__text { margin-top: .25rem; font-size: var(--fs-xs); line-height: 1.4; color: var(--text-muted); max-width: none; }
.install-banner__text b { color: var(--c-bone); font-weight: 600; }
.install-banner__share { display: inline-block; vertical-align: -4px; color: var(--c-ember); }
.install-banner__actions { display: flex; align-items: center; gap: .2rem; }
.install-banner__close { min-width: 44px; min-height: 44px; background: none; border: 0; color: var(--text-muted); font-size: 1.25rem; line-height: 1; }
.install-banner__close:hover { color: var(--c-white); }

/* ---------- Page hors ligne ---------- */
.offline { min-height: 100svh; display: grid; place-content: center; justify-items: center; gap: var(--sp-4); text-align: center; padding: var(--sp-6) var(--sp-4); background: radial-gradient(ellipse at 50% 0%, rgba(176, 18, 30, .3), transparent 65%); }
.offline p { margin-inline: auto; }
.offline__logo { width: 220px; height: auto; }
.offline__cta { margin-top: var(--sp-3); }