/* ==========================================================================
   MOBILE D'ABORD — chargé APRÈS style_unifie.css et themes.css
   Lot 2 : en-tête compact, saisie des pronos au pouce, zones tactiles.
   Toutes les règles sont dans @media (max-width: 768px) : l'affichage
   sur ordinateur n'est pas modifié. Les !important servent uniquement à
   passer devant des styles écrits en ligne (style="...") dans le HTML.
   ========================================================================== */

@media (max-width: 768px) {

    /* ── En-tête compact : moins de place perdue avant le contenu ── */
    .cdm-logo { height: 44px !important; }              /* était 70px (style en ligne) */
    .header-title { font-size: 1.15rem; line-height: 1.1; }

    /* ── Zones tactiles : 44 px minimum (recommandation Apple / Google) ── */
    .btn-filter-match,
    .btn-save,
    .btn-valider-compte,
    .btn-deconnexion { min-height: 44px; }

    /* ── Saisie des pronos : gros champs de score faciles à viser ── */
    .score-bloc[style] { flex: 0 0 150px !important; }  /* un peu plus large que 140px */
    input[data-score-input] {
        width: 56px !important;
        height: 52px !important;
        font-size: 1.5rem !important;
        border-radius: 12px !important;
        background: var(--surface-2);                   /* suit le thème (clair / sombre) */
        color: var(--text-dark);
        border: 2px solid var(--border) !important;
    }
    /* Pas de petites flèches +/- : on saisit au clavier numérique du téléphone */
    input[data-score-input] { -moz-appearance: textfield; appearance: textfield; text-align: center; padding: 0 !important; }
    input[data-score-input]::-webkit-inner-spin-button,
    input[data-score-input]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
    input[data-score-input]:focus {
        outline: none;
        border-color: var(--accent-color) !important;
        box-shadow: 0 0 0 3px rgba(255, 183, 3, .25);
    }

    /* ── Bouton « Enregistrer » : collé au-dessus de la barre du bas ── */
    .sticky-footer {
        /* 68 px = hauteur de la barre du bas ; env() = barre d'accueil iPhone */
        bottom: calc(68px + env(safe-area-inset-bottom) + 8px);
        background: transparent;
        padding: 0 4px;
    }
    .sticky-footer .btn-save {
        width: 100%;
        max-width: 520px;
        padding: 14px 20px;
        font-size: 1.05rem;
        font-weight: 700;
    }
    .match-grid { margin-bottom: 20px; padding-bottom: 20px; }
}

/* ==========================================================================
   LOT 3 — Classement lisible sur téléphone
   ========================================================================== */
@media (max-width: 520px) {
    /* 7 colonnes ne tiennent pas dans 390 px : on garde # / Joueur / Pts / Diff
       et on masque le détail 3 pts / 1 pt / 0 pt (visible sur ordinateur et
       dans la fiche du joueur). Pour les ré-afficher : supprimer cette règle. */
    .table-classement th:nth-child(n+5),
    .table-classement td:nth-child(n+5) { display: none; }

    /* Les paddings sont écrits en ligne dans le PHP : on les resserre avec !important */
    .table-classement td:first-child { padding: 10px 6px !important; }
    .table-classement td:nth-child(2) { padding: 10px 6px !important; text-align: left; }
    .table-classement td { font-size: .95rem; }

    /* Filtres du classement : lignes qui se replient plutôt que de déborder */
    .btn-filter { padding: 8px 12px; min-height: 36px; margin: 3px 3px 3px 0; }
}

/* ==========================================================================
   LOT 4 — Comptoir (forum) : plus de place pour le texte sur téléphone
   ========================================================================== */
@media (max-width: 768px) {
    .forum-container { padding: 8px; margin: 8px auto; border-radius: 12px; }
    .msg-card { padding: 14px; margin-bottom: 16px; border-radius: 12px; }
    /* Boutons « j'aime », citer, pagination : assez grands pour le pouce */
    .action-btn, .like-btn, .page-link { min-height: 40px; }
}