/* ============================================================
   Améliorations responsive (mobile / tablette)
   Chargé après styles.css et pages.css.
   ============================================================ */

/* Aucun défilement horizontal, jamais */
html, body { overflow-x: hidden; max-width: 100%; }
img, svg, video, iframe { max-width: 100%; }
* { min-width: 0; }               /* permet aux enfants flex/grid de rétrécir */
.btn { white-space: normal; }      /* les boutons peuvent passer à la ligne si besoin */

/* ---------- Tablette ---------- */
@media (max-width: 900px){
  .admin-main{ padding: 20px 16px 50px; }
}

/* ---------- Mobile (≤ 640px) ---------- */
@media (max-width: 640px){
  .wrap{ padding-inline: 16px; }

  /* Hero */
  .hero h1{ font-size: clamp(28px, 8vw, 40px); overflow-wrap: break-word; }
  .hero h1 .heart-inline svg{ width: 26px; height: 26px; }
  .hero p.lead{ font-size: 16px; }
  .cta-row{ gap: 10px; }
  .cta-row .btn{ flex: 1 1 100%; justify-content: center; }

  /* Newsletter : empilée */
  .news{ flex-direction: column; align-items: stretch; padding: 22px; }
  .news-txt, .news-form{ min-width: 0; max-width: none; width: 100%; }
  .news-form{ flex-direction: column; }
  .news-form input, .news-form .btn{ width: 100%; }

  /* Rubriques / produits : 2 colonnes propres */
  .features{ grid-template-columns: 1fr 1fr; }
  .products, .shop-page-grid{ grid-template-columns: 1fr 1fr; gap: 14px; }

  /* Titres de section */
  .page-hero h1{ font-size: clamp(26px, 7.5vw, 38px); }
  .sec-title{ font-size: 24px; }

  /* Pied de page */
  .foot-bottom{ flex-direction: column; align-items: flex-start; text-align: left; gap: 8px; }

  /* Cartes CTA / bandeaux */
  .cta-band{ flex-direction: column; align-items: flex-start; }
  .cta-band-actions{ width: 100%; }
  .cta-band-actions .btn{ flex: 1; justify-content: center; }

  /* Boutons de la barre d'admin en pleine largeur */
  .admin-head{ flex-wrap: wrap; }
}

/* ---------- Petit mobile (≤ 430px) ---------- */
@media (max-width: 430px){
  .features, .products, .shop-page-grid{ grid-template-columns: 1fr; }
  .feature{ border-right: 0 !important; border-left: 0 !important; }

  /* En-tête : masquer le bouton Adhérer (repli dans le menu ☰) pour gagner de la place */
  .nav-actions .btn-coral{ display: none; }

  /* Formulaires de don : puces de montant sur toute la largeur */
  .amount-row{ flex-wrap: wrap; }
  .amount-chip{ flex: 1; text-align: center; }
}

/* ---------- Tableaux d'admin : défilement horizontal propre ---------- */
@media (max-width: 720px){
  .table-wrap{ -webkit-overflow-scrolling: touch; }
  .admin-table{ min-width: 520px; }
}

/* ---------- Bouton retour en haut ---------- */
.to-top{position:fixed;right:18px;bottom:18px;z-index:60;width:46px;height:46px;border-radius:50%;border:0;cursor:pointer;
  background:linear-gradient(135deg,#9a25d8,#7a1cc6);color:#fff;box-shadow:0 10px 24px rgba(139,31,201,.4);
  display:grid;place-items:center;opacity:0;visibility:hidden;transform:translateY(10px);transition:.2s}
.to-top svg{width:22px;height:22px}
.to-top.show{opacity:1;visibility:visible;transform:none}

/* ---------- Bandeau cookies ---------- */
.cookie-banner{position:fixed;left:14px;right:14px;bottom:14px;z-index:70;background:#fff;border:1px solid var(--line);
  border-radius:16px;box-shadow:var(--shadow-lg);padding:16px 18px;display:flex;align-items:center;gap:16px;flex-wrap:wrap;max-width:720px;margin-inline:auto}
.cookie-banner[hidden]{display:none!important}   /* prioritaire sur display:flex */
.cookie-banner p{margin:0;font-size:14px;color:var(--body);flex:1;min-width:220px}
.cookie-banner a{color:var(--violet);font-weight:600}
.cookie-banner .btn{white-space:nowrap}

/* ---------- Zones tactiles plus grandes ---------- */
@media (max-width: 640px){
  .nav-links a, .mobile-menu a{ padding-block: 12px; }
  .f-more, .link-more{ display: inline-flex; padding: 4px 0; }
}