/* ============================================================
   ACERDC — Correctifs responsive (mobile & tablette)
   Chargé APRÈS style.css : ces règles complètent la feuille
   principale sans la modifier.
   ============================================================ */

/* ---------- Garde-fou général ---------- */
html, body { max-width: 100%; overflow-x: hidden; }
img, video, iframe { max-width: 100%; height: auto; }

/* Les mots très longs ne débordent jamais de leur bloc */
h1, h2, h3, p, li, td, a { overflow-wrap: break-word; }

/* ============================================================
   TABLETTE ET MOBILE  (≤ 980 px)
   ============================================================ */
@media (max-width: 980px) {

  /* --- Page « Nous soutenir » : la carte de don passait hors écran --- */
  .donation-screen,
  .donation-screen-pro {
    grid-template-columns: 1fr !important;
    gap: 20px;
  }
  .donation-trust { min-height: auto; }
  .donation-card { width: 100%; }

  /* --- En-tête : logo à gauche, ACERDC au centre, menu à droite --- */
  .site-header .nav,
  .site-header .nav-compact { position: relative; justify-content: flex-start; }

  /* Le logo reste dans le flux, donc collé à gauche */
  .site-header .brand { position: static; gap: 0; }
  .site-header .brand img { width: 48px; height: 48px; }

  /* Le nom est centré sur la barre, indépendamment du logo */
  .site-header .brand span {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    white-space: nowrap;
    font-size: 1.14rem;
    letter-spacing: -.02em;
  }
  .site-header .brand small { display: block; font-size: .66rem; letter-spacing: .12em; }

  /* Le menu reste au bord droit et passe au-dessus de la zone du logo */
  .hamb {
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    margin: 0;
    z-index: 3;
  }

  /* --- Menu mobile : reste lisible même sur petit écran --- */
  .menu {
    max-height: calc(100vh - 110px);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
  /* Zones tactiles confortables (recommandation WCAG : 44 px) */
  .menu a {
    min-height: 44px;
    display: flex;
    align-items: center;
    padding: 10px 14px;
  }
  .hamb {
    min-width: 46px;
    min-height: 46px;
    font-size: 1.15rem;
    line-height: 1;
  }

  /* --- Boutons d'action visibles dans le menu mobile --- */
  .menu-cta { display: flex !important; gap: 10px; margin-top: 12px; }
  .menu-cta .btn { flex: 1; text-align: center; min-height: 46px;
                   display: flex; align-items: center; justify-content: center; }

  /* --- Barre de contact du haut : liens cliquables au doigt --- */
  .topbar { font-size: .92rem; }
  .topbar a { display: inline-block; padding: 6px 2px; min-height: 32px; }

  /* --- Pied de page : un lien par ligne, zone tactile confortable --- */
  .site-footer .footer-grid a { display: flex; align-items: center; min-height: 44px; }
  .site-footer .footer-grid .btn { display: inline-flex; justify-content: center; }
  .site-footer .footer-bottom a { display: inline-block; min-height: 0; }
}

/* Le bloc d'action du menu n'existe que sur mobile */
@media (min-width: 981px) { .menu-cta { display: none !important; } }

/* ============================================================
   MOBILE  (≤ 620 px)
   ============================================================ */
@media (max-width: 620px) {

  /* --- Titres : évite les coupures disgracieuses --- */
  .hero h1 { font-size: 2.05rem; line-height: 1.12; }
  .page-hero h1 { font-size: 1.85rem; line-height: 1.15; }
  .hero p, .page-hero p { font-size: 1rem; }
  .section-title h2, .content h2, .feature h2 { font-size: 1.5rem; }

  /* --- Boutons du hero : pleine largeur, empilés --- */
  .hero-card .btn,
  .page-hero .btn { width: 100%; justify-content: center; }
  .hero-card > div[style*="flex"] { flex-direction: column; }

  /* --- Formulaires : 16 px minimum sinon l'iPhone zoome au focus --- */
  input, select, textarea, button {
    font-size: 16px !important;
    max-width: 100%;
  }
  input, select, textarea {
    min-height: 48px;
    box-sizing: border-box;
  }
  textarea { min-height: 120px; }
  .form button[type="submit"],
  .auth-form button,
  .donation-inner-form button { width: 100%; min-height: 50px; }

  /* --- Le champ anti-robots reste invisible en toutes circonstances --- */
  .hp-field { position: absolute !important; left: -9999px !important;
              width: 1px !important; height: 1px !important; overflow: hidden !important; }

  /* --- Moyens de paiement : une colonne, cible tactile large --- */
  .payment-methods { grid-template-columns: 1fr !important; }
  .pay-method { min-height: 62px; }

  /* --- Galeries et cartes --- */
  .gallery { grid-template-columns: 1fr !important; }
  .grid-3, .grid-2 { grid-template-columns: 1fr !important; }
  .card-pad, .content { padding: 20px; }

  /* --- Barre du haut : deux lignes bien séparées --- */
  .topbar .container { display: block; text-align: center; line-height: 1.6; }

  /* --- Messages de confirmation --- */
  .pro-alert { padding: 14px; }
  .pro-alert .btn { width: 100%; margin-top: 10px; }
}

/* ============================================================
   TRÈS PETITS ÉCRANS  (≤ 380 px)
   ============================================================ */
@media (max-width: 380px) {
  .container { padding-left: 14px; padding-right: 14px; }
  .hero h1 { font-size: 1.8rem; }
  .brand span { font-size: .92rem; }
  .brand img { width: 44px; height: 44px; }
}

/* ============================================================
   CONFORT DE LECTURE ET ACCESSIBILITÉ
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
  .reveal { opacity: 1 !important; transform: none !important; }
}

/* Mise en évidence claire au clavier (navigation sans souris) */
a:focus-visible, button:focus-visible,
input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 3px solid #f5c518;
  outline-offset: 2px;
}