/* ============================================================
   MOBILE QUALITY v1 — confort & performance sur téléphone
   ============================================================ */

/* --- 1. Cibles tactiles ≥ 44px (Apple HIG / Material) --- */
nav a,nav a::after{padding-top:12px;padding-bottom:12px}
.btn{min-height:48px}
.header-cta{min-height:44px}
.tier .btn,.form-card .btn,.pitch-card .btn{min-height:44px}
.qdots i{width:12px;height:12px}          /* points du slider plus larges */
.gal figure{min-height:120px}
.socials a,.to-top{width:48px;height:48px}

/* --- 2. Supprimer le flash gris au tap (iOS/Android) --- */
*{-webkit-tap-highlight-color:transparent}
a,button,[data-goto]{-webkit-touch-callout:default}

/* --- 3. Anti-débordement horizontal (très fréquent) --- */
html,body{max-width:100vw;overflow-x:clip}
.hero-strip,.stats-grid,.news-grid,.cards{min-width:0}
.container{width:min(1180px,94%)}
.tier{flex-wrap:wrap}                     /* lignes « £25 + bouton » jamais coupées */
.tier .btn{margin-left:auto}

/* --- 4. Texte natif toujours lisible (pas de zoom auto iOS) --- */
input,select,textarea{font-size:16px}      /* iOS ne zoome plus au focus */
::placeholder{opacity:.6}

/* --- 5. Header mobile compact --- */
@media(max-width:760px){
  header .inner{padding:12px 0}
  header .brand img{width:38px;height:38px}
  header .brand .bt b{font-size:.92rem}
}
/* nav ouverte : plein écran lisible */
@media(max-width:760px){
  nav ul.open{padding:26px 24px 34px;gap:4px}
  nav ul.open a{display:block;padding:14px 8px;font-size:1.05rem;border-bottom:1px solid rgba(255,255,255,.08)}
  nav ul.open li:last-child a{border-bottom:0}
}

/* --- 6. Hero mobile : plein écran utile, collage caché proprement --- */
@media(max-width:1020px){
  .hero2{min-height:100svh}
  .hero-content,.hero-grid{padding-top:112px;padding-bottom:64px}
  .h-copy h1{font-size:clamp(2rem,8.2vw,2.9rem)}
  .h-copy p{font-size:1rem}
  .hero-actions .btn{flex:1 1 100%;justify-content:center}   /* boutons pleine largeur, faciles d'attaque */
}

/* --- 7. CTA « Soutenir » collant en bas (conversion mobile) --- */
#stickycta{display:none}
@media(max-width:760px){
  #stickycta{
    display:flex;position:fixed;left:12px;right:12px;bottom:12px;z-index:940;
    background:linear-gradient(120deg,var(--green2),var(--green));
    border-radius:999px;padding:14px 22px;justify-content:center;
    box-shadow:0 14px 34px rgba(8,61,28,.45);color:var(--cream);
    font-weight:800;font-size:.95rem;align-items:center;gap:10px;
  }
  #stickycta svg{width:18px;height:18px}
  /* laisser la place au-dessus du footer */
  body{padding-bottom:76px}
  .to-top{bottom:82px}
}

/* --- 8. Performance : ombres plus légères, blur réduit --- */
@media(max-width:760px){
  .shadow,.pcard,.ncard,.form-card,.spot{box-shadow:0 6px 18px -8px rgba(14,109,44,.18)}
  header.scrolled{backdrop-filter:none;background:rgba(242,245,238,.97)}
  .marquee,.vticker{will-change:auto}
}

/* --- 9. Cartes plein bénéfice sur petit écran --- */
@media(max-width:560px){
  .stats2 .wrap{grid-template-columns:1fr 1fr;gap:16px}
  .stat{padding:20px 14px;min-height:96px}          /* 6 stats → 2 colonnes confortables */
  .ncard .ph{height:150px}
  .footer .top{gap:34px}
  .donate-band{padding:40px 22px}
  .tier{padding:14px 16px}
  .form-grid{gap:14px}
}

/* --- 10. Réveil des reveals sur mobile (certains vieux Chrome iOS) --- */
@media(max-width:760px){
  .reveal{transition-duration:.5s}
}

/* --- 11. Galerie : 2 colonnes, pas de zoom surprise --- */
@media(max-width:760px){
  .gal{grid-template-columns:repeat(2,1fr);gap:12px}
  .gal figcaption{font-size:.68rem;padding:20px 10px 8px}
}

/* --- 12. Tables du back-office déjà responsives; vitrine : espacement des sections réduit --- */
@media(max-width:760px){
  .section{padding:60px 0}
  .section-head{margin-bottom:36px}
}