/* ============================================================
   XAU Reserve Access — Durcissement responsive (mobile + tablette)
   Chargé après styles/espace/admin. Corrige les débordements
   horizontaux et les grilles qui ne se repliaient pas.
   ============================================================ */

/* Empêche tout défilement horizontal parasite (ex. tiroir de menu mobile
   hors-écran). `clip` ne casse pas les en-têtes sticky, contrairement à
   overflow:hidden. */
html, body { overflow-x: clip; }

/* Sécurité images / médias : jamais plus large que leur conteneur. */
img, svg, video, canvas { max-width: 100%; }

/* ---- Tablette & en dessous (<= 980px) ---- */
@media (max-width: 980px) {
  /* Landing : la grille "membre" débordait (contenu 434px sur 390px). */
  .member-grid { grid-template-columns: 1fr !important; gap: 34px; }
  .member-bar { justify-self: start; }

  /* Dashboard : ponts écosystème repliés + bouton qui débordait. */
  .db-eco { grid-template-columns: 1fr !important; }
  .db-trade { grid-template-columns: 1fr !important; gap: 16px; }
  .db-trade .btn { justify-self: start; }
}

/* ---- Petites tablettes / grands mobiles (<= 720px) ---- */
@media (max-width: 720px) {
  .hero { padding-top: 118px; }
  .db-wrap { padding-top: 24px; }
  .db-banner { height: 120px; }
}

/* ---- Mobiles (<= 560px) ---- */
@media (max-width: 560px) {
  .gold-opts { grid-template-columns: 1fr !important; }

  /* En-tête d'espace : on empile proprement le bloc + l'onglet Trade. */
  .db-hello { align-items: flex-start; }
  .db-trade-tab { align-self: flex-start; }

  /* Formulaires : champs côte à côte -> empilés. */
  .field-row { flex-direction: column; gap: 0; }
  .field-row .field { margin-bottom: 14px; }

  /* Récap paiement passe au-dessus du formulaire. */
  .pay-recap { order: -1; }

  /* CTA pleine largeur pour le pouce. Les actions s'empilent proprement
     (sinon le bouton en lingot déborde et son texte est coupé). */
  .tunnel-actions { flex-direction: column; align-items: stretch; gap: 12px; }
  .tunnel-actions .btn,
  .db-trade .btn,
  .accomp-contact .btn { width: 100%; text-align: center; justify-content: center; }
  .tunnel-actions .back-link { justify-content: center; text-align: center; }
  /* Le lingot doit pouvoir revenir à la ligne au lieu d'être tronqué. */
  .btn-ingot { padding-left: 22px; padding-right: 22px; white-space: normal; line-height: 1.3; }

  /* Marges latérales resserrées. */
  .db-wrap, .tunnel-wrap { padding-left: 18px; padding-right: 18px; }
}

/* ---- Admin : la barre latérale devient une barre supérieure ---- */
@media (max-width: 900px) {
  .aside {
    position: static;
    height: auto;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    overflow-x: auto;
  }
  .aside .brand { padding: 0 10px 0 0; }
  .a-nav { flex-direction: row; flex-wrap: wrap; flex: 1; }
  .a-nav button { width: auto; }
  .a-back { display: none; }
  .a-tablewrap { overflow-x: auto; }
}