/* ============================================
   FICHIER : responsive.css
   VERSION : 2025.10.13
   OBJET   : Adaptations smartphone/tablette pour tables
              (games/info) sans débordement, compactage
              icône de vote et colonne "Pour jouer…"
   CHANGTS :
      - Séparation des comportements .info (scroll) vs #gamesRanking (grille fixe)
      - Suppression du nowrap sur #gamesRanking + wrapping agressif
      - Icône vote en largeur fixe (32px/24px) uniquement mobile
      - Sous-tables internes forcées à width:100% + table-layout:fixed
      - Masque "Score" en mobile
      - Colonne "Pour jouer…" à 30% max 240px
     - 2026.09.30e : le score n'est plus masqué (colonne "Votes" en 1re position,
       avec l'icône de vote) ; cette vue est de toute façon remplacée par
       .cards-mobile en dessous de 768 px.
   ============================================ */

/* Tableau/graphiques */ .cards-mobile { display: none; }

/* Masquer le sélecteur d'onglets en desktop (visible uniquement en mobile) */
.mobile-nav-select { display: none; }

/* Smartphones et tablettes <=768px */
@media (max-width: 768px) {
  .content {
    /* ✅ 2026.09.30 : 75px conservés en secours (ui.js applique la marge réelle
       en style inline sur ReZoo.html, qui possède le bandeau à 2 lignes). */
    margin-top: 75px;
    padding: 6px;
    overflow-x: visible;
  }

  #planning {
    margin-top: 5px;
    margin-bottom: 10px;
    margin-left: 0;
    margin-right: 0;
    padding: 6px;
  }
  /* Les 3 jours se ré-empilent sur tablette/mobile */
  #planning .planning-days {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  #planning table th,
  #planning table td {
    font-size: var(--font-small);
    padding: var(--padding-small);
  }

  /* Tableau d'infos (Option A) → fiches empilées en mobile :
     badge au-dessus du texte, plus de scroll horizontal */
  table.info tbody tr {
    flex-direction: column;
    gap: 6px;
    padding: 10px;  /* ✅ 2026.08.24-5 : cadre mobile réduit 12px → 10px */
  }
  table.info th {
    min-width: 0;
    align-self: flex-start;
  }

    /* ✅ 2026.08.24-5 : Cacher le tableau desktop, activer le layout carte */
  .table-desktop { display: none !important; }
  #gamesRanking { display: none !important; }
  .cards-mobile { display: block !important; }

  /* === Cartes mobiles : pile verticale === */
  #gamesRankingCards {
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: 100%;
  }

    .game-card {
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: 8px;
    padding: 10px;
    box-shadow: 0 1px 4px var(--card-shadow);
    display: flex;
    flex-direction: column;
    gap: 3px;
  }

  /* Header de la carte : rang + titre (l'icône de vote a sa propre ligne,
     `.card-vote-ligne`, juste en dessous depuis le lot 2026.09.30i) */
  .game-card .card-header {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: var(--font-small);
    font-weight: bold;
  }
  .game-card .card-rank   { flex: 0 0 auto; }
  .game-card .card-title   { flex: 1; font-size: 0.9rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  /* ✅ 2026.09.30i : l'icône de vote a SA PROPRE LIGNE, centrée horizontalement
     ET verticalement dans la carte (demande utilisateur). Elle était le 3e
     élément de `.card-header` (rang + titre + icône) : le titre occupant toute
     la place restante (`flex: 1`), l'icône se retrouvait collée au bord DROIT de
     la carte — jamais centrée, quelle que soit la taille du glyphe. */
  .game-card .card-vote-ligne {
    display: flex;
    align-items: center;       /* centrage VERTICAL dans la ligne */
    justify-content: center;   /* centrage HORIZONTAL dans la carte */
    width: 100%;
    min-height: 1.7em;
  }
  /* ✅ 2026.09.30h : BOÎTE CARRÉE centrée (et non plus une boîte qui épouse la
     seule largeur de l'encre). Les trois états 👉 / 👍 / 👎 ont des glyphes de
     largeurs différentes : sur une boîte « collante », chaque carte plaçait son
     icône à quelques dixièmes de pixel près, et un moteur qui ne centre pas le
     contenu d'un élément en ligne laissait l'icône à gauche. */
  .game-card .card-vote    {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.5em;
    height: 1.5em;
    line-height: 1;
    font-size: 1.2rem;
    cursor: pointer;
  }


  /* Lignes clés : label à gauche, valeur à droite */
  .game-card .card-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    font-size: var(--font-small);
    padding: 2px 0;
  }
  .game-card .card-label {
    color: var(--card-label-text);
    font-weight: 600;
    flex: 0 0 72px;
  }
  .game-card .card-value {
    flex: 1;
    text-align: right;
    word-break: break-word;
    text-align-last: right;
  }

  /* Liens (Steam, GoCleCD, etc.) — wrapping automatique */
  .game-card .card-row-links,
  .game-card .card-row-divers {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 4px 8px;
  }
  .game-card .card-row-links .card-label,
  .game-card .card-row-divers .card-label {
    flex: 0 0 auto;
    text-align: left;
    min-width: 48px;
  }
  .game-card .card-row-links .card-value,
  .game-card .card-row-divers .card-value {
    text-align: left;
    text-align-last: left;
  }
  .game-card .card-row-coop .card-label { flex: 0 0 72px; }
  .game-card .card-row-coop .card-value { font-size: 0.8rem; }
  .game-card .card-row-compact .card-label { flex: 0 0 72px; }
  .game-card .card-row-compact .card-value { font-size: 0.8rem; }

  /* Message de chargement */
  .card-loading {
    text-align: center;
    padding: 20px;
    font-size: var(--font-small);
    color: var(--card-loading-text);
  }

  table thead th { top: 0; }

  /* ✅ 2026.08.24-6 : Auth bouton dans le menu burger + banner empilée */
  .title-line .auth-btn { display: none !important; }
  /* ✅ 2026.09.30f : masquage du 🚪 du bandeau scopé aux pages qui ONT un menu
     ☰ (ReZoo.html) et donc un #mobileLogoutBtn de remplacement. Sur proposer
     (bandeau 1 ligne, sans menu ☰) le 🚪 doit rester : c'est le seul moyen de
     se déconnecter. */
  .page-header--ligne2 .logout-btn { display: none !important; }
  .mobile-menu-body .auth-btn { display: block; }
  .mobile-menu-body #mobileLogoutBtn { display: block; }
  #authBanner {
    flex-direction: column;
    text-align: center;
    gap: 8px;
    padding: 10px;
  }

  /* Menu navigation onglets — sticky (ne défile pas), collé au header */
  .mobile-nav-select {
    display: block;
    width: 100%;
    padding: 4px 8px;
    margin: -12px 0 2px 0;
    font-size: 0.85rem;
    border: 1px solid var(--card-border);
    border-radius: 6px;
    background: var(--card-bg, #fff);
    color: var(--header-text, #333);
    position: sticky;
    top: 27px;
    z-index: 99;
  }
}

/* Éviter que le scrollIntoView cache la section derrière le header + menu sticky (mobile)
   ✅ 2026.09.30 : valeur historique ; ui.js l'ajuste en style inline (bandeau à 2 lignes). */
#planning,
#pageDescription,
#gamesRankingCards,
.table-desktop {
  scroll-margin-top: 75px;
}

  /* Très petits écrans <=480px */
@media (max-width: 480px) {
  /* Planning : badge "selon vos votes" passe en dessous du titre pour éviter le débordement */
  #planning .badge-auto {
    display: block;
    width: fit-content;
    margin: 6px 0 0 0;
    font-size: 0.7em;
  }
  #planning h2 {
    font-size: 1.15rem;
  }
  /* Première colonne des tableaux planning : on autorise le retour à la ligne
     (heures / "📦 Dispo") pour ne pas forcer de débordement horizontal */
  #planning table th:first-child,
  #planning table td:first-child {
    white-space: normal;
  }

  table.info th,
  table.info td {
    font-size: var(--font-xsmall);
  }

  /* Cartes : texte plus petit */
  .game-card {
    padding: 8px;
    gap: 2px;
    font-size: var(--font-xsmall);
  }
  .game-card .card-title {
    font-size: 0.8rem;
  }
  .game-card .card-vote {
    font-size: 1.1rem;
  }
  .game-card .card-row {
    font-size: var(--font-xsmall);
  }
  .game-card .card-label {
    flex: 0 0 64px;
  }

  /* Icône thème plus petite */
  .theme-btn {
    font-size: 2rem;
  }

  /* Header adaptatif — titre seul sur la ligne, boutons en dessous */
  .title-line {
    flex-wrap: wrap;
    justify-content: center;
    row-gap: 2px;
  }
  .page-header .title-text {
    flex: 0 0 100%;
    text-align: center;
    margin: 0;
  }
  #togglePlanning {
    font-size: 0.75rem;
    padding: 2px 6px;
  }
  #statutZone .statut-toggle button {
    font-size: 0.9rem;
    min-width: 30px;
    padding: 2px 4px;
  }
  .page-header {
    padding: 6px 8px;
  }
  #transparencySlider {
    display: none;
  }
}