/* ============================================================================
   responsive-mobile.css — overrides mobile pour TKD Wiki
   Chargé APRÈS le CSS CDN du site. Ne touche jamais le desktop (>991px).

   Stratégie (audit 2026-06-07) :
   - La sidebar .navbar se détache du flux à <=991px (CSS du thème d'origine).
     => TOUT le layout structurel bascule en colonne dès <=991px (et pas <=767),
        sinon la plage 768-991px garde .content à 80% (gros vide à droite).
   - Galeries de cartes en 2 colonnes sur tout le mobile (rendu le plus propre) ;
     les conteneurs « larges » (cartes flip détail) repassent en 1 colonne <=479px.
   - Aucune règle de grille en double entre breakpoints (cascade déterministe).
   ========================================================================== */

/* ----- Global (tous écrans) ----- */
.device-blocker { display: none !important; }   /* overlay app-push « Oups serré » */
html, body { max-width: 100% !important; overflow-x: hidden !important; }

/* Éléments injectés par js/responsive-nav.js : cachés hors mobile */
.nav-hamburger { display: none; }
.nav-backdrop  { display: none; }

/* ============================================================================
   <= 991px : sidebar -> menu off-canvas + layout en colonne pleine largeur
   ========================================================================== */
@media screen and (max-width: 991px) {

  /* Conteneur racine (sidebar + contenu, flex row) -> colonne */
  .body-inside-container {
    flex-direction: column !important;
    height: auto !important;
    min-height: 100vh !important;
    padding-top: 64px !important;   /* place pour le hamburger fixe */
  }

  /* --- Navbar en off-canvas (glisse depuis la gauche) --- */
  .navbar {
    display: flex !important;
    position: fixed !important;
    top: 0 !important; left: 0 !important; bottom: 0 !important; right: auto !important;
    width: min(86vw, 320px) !important;
    height: 100vh !important;
    max-height: 100vh !important;
    margin: 0 !important;
    transform: translateX(-100%) !important;
    transition: transform .28s ease !important;
    z-index: 1001 !important;
    overflow: auto !important;
  }
  .navbar.is-open { transform: translateX(0) !important; }

  /* Le bouton « collapse » interne du thème (a.square.is--hamburger) déclenche
     une interaction qui anime le transform de .navbar -> conflit avec l'off-canvas.
     On le masque : notre hamburger externe gère l'ouverture/fermeture. */
  .navbar .square.is--hamburger { display: none !important; }

  /* Backdrop (injecté par le JS) */
  .nav-backdrop {
    display: block;
    position: fixed; inset: 0;
    background: rgba(0,0,0,.55);
    z-index: 1000;
    opacity: 0; pointer-events: none;
    transition: opacity .25s ease;
  }
  .nav-backdrop.is-open { opacity: 1; pointer-events: auto; }

  /* Verrou de scroll de l'arrière-plan quand le menu est ouvert */
  body.nav-open { overflow: hidden !important; }

  /* Bouton hamburger fixe en haut à gauche */
  .nav-hamburger {
    display: flex; align-items: center; justify-content: center;
    position: fixed; top: 12px; left: 12px; z-index: 1002;
    width: 46px; height: 46px;
    border-radius: 10px;
    border: 1px solid rgba(255,255,255,.22);
    background: #15110d; color: #fff;
    font-size: 22px; line-height: 1; cursor: pointer;
    box-shadow: 0 4px 14px rgba(0,0,0,.45);
  }

  /* --- Barre du haut + fil d'ariane + onglets --- */
  .top_nav {
    padding-left: 64px !important;   /* place pour le hamburger */
    height: auto !important;
    min-height: 56px !important;
  }
  .breadcrumb { flex-wrap: wrap !important; }

  /* Onglets : annuler le margin-top:-65px desktop (chevauchement) + passage à la ligne */
  .tabs-menu {
    margin-top: 8px !important;
    margin-right: 0 !important;
    align-self: stretch !important;
    justify-content: flex-start !important;
    width: 100% !important;
    height: auto !important;
    flex-wrap: wrap !important;
  }
  .tab { white-space: nowrap !important; }

  /* --- Zone de contenu principale : pleine largeur (corrige le vide 768-991) --- */
  .content {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    padding-left: 0 !important;
    overflow: visible !important;
  }

  /* --- Accueil : grille multi-colonnes -> sections empilées --- */
  .home_disposition {
    grid-template-columns: 1fr !important;
    grid-auto-rows: auto !important;
    height: auto !important;
    overflow: visible !important;
    gap: 1.25rem !important;
  }
  .home_disposition > .home_container,
  .home_container {
    grid-column: 1 / -1 !important;
    grid-row: auto !important;
    width: 100% !important;
  }

  /* --- Galeries de cartes -> 2 colonnes (accueil, listes, détails) --- */
  .home-sub-grid,
  .home-sub-grid-3,
  .home-sub-grid-4,
  [class*="home-sub-grid"],
  .grid_poomsae,
  .list_poomsae_grid,
  .overview_container_img {
    grid-template-columns: 1fr 1fr !important;
    aspect-ratio: auto !important;
    height: auto !important;
    overflow: visible !important;
    gap: .75rem !important;
  }

  /* Intro / page détail : grilles 3 & 2 colonnes -> 1 colonne.
     NB: les enfants placés en colonne 2 via #w-node-… créaient une colonne
     IMPLICITE (grid-auto-columns:1fr) -> on neutralise + reset #w-node plus bas. */
  .introduction_container,
  .introduction_container.resume,
  .grid_introduction {
    grid-template-columns: 1fr !important;
    grid-auto-columns: auto !important;
    grid-auto-flow: row !important;
  }

  /* Détails : 4 colonnes -> 2 colonnes */
  .details_container {
    grid-template-columns: 1fr 1fr !important;
    grid-auto-columns: auto !important;
    grid-auto-flow: row !important;
  }

  /* Carte flip : neutraliser les dimensions fixes (19rem x 29.5rem) */
  .details_card {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: 24rem !important;
  }

  /* Largeur fixe 400px -> fluide */
  .unit_programs { width: 100% !important; max-width: 100% !important; }

  /* Le thème place ses enfants de grille via des règles #w-node-… (grid-column /
     grid-area figés sur les colonnes du desktop). On annule ce placement pour
     qu'ils suivent le flux des grilles mobiles ci-dessus (sinon: colonnes
     implicites = contenu tassé sur la moitié de l'écran). */
  [id^="w-node-"] { grid-area: auto !important; }
}

/* ============================================================================
   <= 479px : petit mobile — les conteneurs « larges » repassent en 1 colonne
   (les galeries de cartes restent en 2 colonnes : rendu le plus lisible)
   ========================================================================== */
@media screen and (max-width: 479px) {
  .details_container { grid-template-columns: 1fr !important; }
  .details_card { min-height: 26rem !important; }
}