/* ============================================================
   RESPONSIVE — mobile et petits écrans
   ============================================================
   Surcharges pour les écrans étroits. Vient après les feuilles d'écrans, dont il modifie les valeurs.

   Chargé par index.html. L'ORDRE DES BALISES <link> COMPTE :
   base → ecrans → stats → responsive → theme-pixel. Le responsive
   et les thèmes surchargent ce qui précède par la cascade.
   ============================================================ */

/* ============================================================
   Responsive (mobile et petits écrans)
   ============================================================ */

/* Le nom d'un deck se tronque proprement plutôt que de pousser
   les badges hors de la case */
.deck-btn > span:first-child {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Sauf dans une tuile du menu principal : le libellé y est centré, seul sur
   sa ligne, et rien ne le pousse à droite. Coupé, il perdrait sa fin sur une
   demi-largeur (« Statistiques », « Dizionario ») ; ici il passe à la ligne.
   Cette correction doit vivre DANS ce fichier : à spécificité égale, c'est
   lui qui l'emporte, étant chargé après css/ecrans.css. */
.home-btn > span:first-child {
    flex: none;
    overflow: visible;
    text-overflow: clip;
    white-space: normal;
}

.deck-side {
    flex-shrink: 0;
}

@media (max-width: 600px) {
    body {
        padding: 10px;
        /* La note du bas se resserre d'un cran, et l'air au-dessus d'elle
           avec : la hauteur manque ici plus qu'ailleurs, et 40px de vide
           coûteraient une ligne de deck. Le cadre lui réserve sa bande tout
           seul, la règle qui s'en charge lisant ces deux variables
           (css/ecrans.css). */
        --motd-hauteur: 28px;
        --motd-ecart: 26px;
    }

    /* Le plafond des deux menus se déduit du padding ci-dessus (voir
       --marge-page dans css/ecrans.css). Le laisser à 40px céderait 20px de
       hauteur pour rien, et la hauteur est ce qui manque le plus ici. */
    body.on-home,
    body.on-folders,
    body.on-decks {
        --marge-page: 20px;
    }

    .container {
        padding: 20px 14px;
    }

    /* Le titre descend sous les boutons de coin, réduits */
    h1 {
        font-size: 22px;
        margin-top: 30px;
    }

    .subtitle {
        margin-bottom: 18px;
    }

    .btn-back,
    .btn-settings,
    .btn-info,
    .btn-mute,
    .btn-matiere {
        width: 34px;
        height: 34px;
        font-size: 18px;
    }

    .btn-info {
        top: 56px;
        font-size: 15px;
    }

    /* Menus (dossiers et decks) : cases hautes et lisibles, faciles à
       viser au pouce (cible tactile d'environ 56px de haut) */
    .deck-list {
        gap: 12px;

        /* Pas d'ascenseur au doigt : il ne sert à rien pour saisir, et le
           fondu des bords dit déjà qu'il reste du contenu. On récupère du
           même coup les 20px de gouttière, précieux sur un écran étroit.

           --barre DOIT suivre : c'est la largeur de la bande que la seconde
           couche du masque garde opaque pour épargner l'ascenseur. La
           laisser à 20px alors qu'il n'y a plus d'ascenseur ferait s'arrêter
           le fondu 20px avant le bord droit. */
        --barre: 0px;
    }

    .deck-list::-webkit-scrollbar {
        width: 0;
    }

    /* La liste s'étend jusqu'à la bordure du cadre, et reprend à son compte
       les 14px que le cadre lui mettait de côté : les boutons ne bougent pas
       d'un pixel, mais la SURFACE TACTILE, elle, gagne ces 14px de chaque
       côté.

       C'est la correction d'un défaut mesuré : un doigt posé à moins de 26px
       du bord de l'écran ne touchait pas la liste mais le cadre ou la page
       (10px de marge de page, 2px de bordure, 14px de padding du cadre). Tant
       que la page ne défilait pas, il ne se passait rien ; depuis qu'elle se
       laisse entraîner par le geste (voir .deck-list dans css/ecrans.css), ce
       même doigt part en rebond et il faut attendre la fin de l'élan pour
       reprendre la main. Or le bord de l'écran est précisément là où se pose
       le pouce.

       Il reste 12px morts, hors du cadre : on n'y pose pas le doigt pour
       faire défiler une liste.

       Le masque du fondu n'en souffre pas : son dégradé est vertical. */
    .home-menu,
    body.on-folders .deck-list,
    body.on-decks .deck-list {
        margin-left: -14px;
        margin-right: -14px;
        padding-left: 14px;
        padding-right: 14px;
    }

    /* Firefox : même règle que dans css/base.css, les propriétés standard
       ne doivent jamais sortir de cette bascule, sous peine de désactiver
       ::-webkit-scrollbar sur Chrome. */
    @supports not selector(::-webkit-scrollbar) {
        .deck-list {
            scrollbar-width: none;
        }
    }

    .deck-btn {
        font-size: 17px;
        padding: 16px 14px;
    }

    /* Uniquement dans les menus : .deck-icon sert aussi aux boutons des
       écrans Paramètres et Apparence, qui restent compacts */
    body.on-folders .deck-icon,
    body.on-decks .deck-icon {
        width: 20px;
        height: 20px;
        margin-right: 8px;
    }

    .deck-side {
        gap: 8px;
    }

    .deck-btn .count {
        font-size: 13px;
        padding: 4px 10px;
    }

    /* Les tuiles se resserrent, la rangée du bas reste à deux : c'est la
       disposition qui fait lire le menu, pas la place disponible. */
    .home-btn {
        min-height: 60px;
    }

    .home-btn-grand {
        min-height: 96px;
        font-size: 22px;
    }

    .mode-btn {
        padding: 7px 10px;
        font-size: 13px;
    }

    /* Choix du mode, sur le menu des decks.
       Sur 360 px de large il reste 312 px utiles (10 px de marge du body et
       14 px de padding du cadre, de chaque côté). Les trois libellés complets
       en réclament près de 380 : « Mix » passait donc à la ligne, et la
       rangée prenait le double de hauteur, d'autant plus gênant depuis que le
       cadre est plafonné à la hauteur de l'écran.
       On bascule donc sur les libellés courts, et les trois boutons se
       partagent la largeur en parts égales. nowrap rend le retour à la ligne
       impossible plutôt que simplement improbable. */
    .mode-toggle {
        gap: 8px;
        margin-bottom: 24px;
        flex-wrap: nowrap;
    }

    .mode-toggle .mode-btn {
        flex: 1 1 0;      /* trois parts égales, quelle que soit la largeur du texte */
        min-width: 0;     /* sans lui, un enfant flex refuse de passer sous sa taille de contenu */
        padding: 12px 4px;
        font-size: 14px;
        white-space: nowrap;
    }

    .mode-toggle .mode-long {
        display: none;
    }

    .mode-toggle .mode-court {
        display: inline;
    }

    /* Titre des deux menus : l'écran de révision garde le sien (22px),
       auquel se réfère --card-title de l'aperçu */
    body.on-home h1,
    body.on-folders h1,
    body.on-decks h1 {
        font-size: 26px;
    }

    body.on-folders .subtitle,
    body.on-decks .subtitle {
        font-size: 15px;
    }

    /* Flashcard : le caractère est l'élément à lire, il occupe la
       hauteur disponible ; toute modification de ces valeurs doit être
       reportée dans les variables --card-* de l'aperçu Apparence */
    .hanzi {
        --hanzi-size: 130px;
        min-height: 156px; /* 130 × 1.2 */
        margin-bottom: 22px;
    }

    .hanzi.text-prompt {
        font-size: 26px;
    }

    .audio-player {
        margin-bottom: 22px;
    }

    .result .hanzi-answer {
        font-size: 60px;
    }

    .result .translation {
        font-size: 28px;
    }

    .result .pinyin {
        font-size: 32px;
    }

    .result.hanzi-mode .pinyin {
        font-size: 24px;
    }

    /* Assez haute pour contenir la réponse complète : les notes ne
       bougent pas quand la carte se retourne.
       audio 24 + 22, hanzi 60 × 1.2 + 8, pinyin 32 × 1.2 = 165 */
    .answer-zone {
        min-height: 165px;
    }

    /* .btn-reveal, le plus haut ici : 18 + 19 × 1.2 + 18 */
    .buttons {
        gap: 6px;
        min-height: 59px;
    }

    /* Retourner la carte : pleine largeur, facile à viser au pouce */
    .btn-reveal {
        flex: 1 1 100%;
        padding: 18px 24px;
        font-size: 19px;
    }

    .btn-grade {
        padding: 10px 4px;
        font-size: 14px;
    }

    /* Paramètres : une seule colonne de boutons, qui prend la largeur
       disponible (le max-width de 308px la plafonne sur écran large) */
    #settingsScreen .mode-btn {
        height: 40px;
        font-size: 13px;
    }

    /* Liste des cartes */
    .card-table th,
    .card-table td {
        padding: 6px 8px;
    }

    /* « td » comme sur le palier large : les <th> portent les mêmes classes
       et hériteraient sinon de la taille du contenu. Cette spécificité doit
       être au moins celle de css/ecrans.css, sans quoi la règle large
       l'emporterait ici malgré l'ordre de la cascade. */
    .card-table td.col-hanzi {
        font-size: 22px;
    }

    .card-table td.col-pinyin {
        font-size: 15px;
    }

    .card-table td.col-translation {
        font-size: 13px;
    }

    /* Le deck d'origine (écran « Explorer ») saute : quatre colonnes ne
       tiennent pas sur un téléphone, et c'est la moins utile des quatre
       pour reconnaître une carte. */
    .card-table .col-deck {
        display: none;
    }

    /* La note du bas : un cran plus petite, la largeur manquant plus que
       tout ici. Sa hauteur est posée plus haut, avec le padding qu'elle
       impose au body. */
    .motd-texte {
        font-size: 12px;
    }

    /* Les entrées du Dictionnaire, un cran plus serrées. Le nom du deck
       saute : sur un téléphone il ne resterait de lui qu'un trois-points,
       et la lecture a plus besoin de cette largeur que lui. */
    .explorer-entree {
        padding: 4px 8px;
    }

    .explorer-hanzi {
        font-size: 19px;
    }

    .explorer-pinyin {
        font-size: 14px;
    }

    .explorer-trad {
        font-size: 12px;
    }

    .explorer-deck {
        display: none;
    }

    /* La zone défilante des résultats : la fenêtre est courte, et le
       cadre doit rester entièrement visible. */
    .explorer-resultats {
        max-height: 52vh;
    }

    /* Deux tuiles de matière côte à côte : 2 x 130 plus la gouttière tiennent
       dans les 327 px d'un téléphone, 2 x 150 non. */
    .matiere-toggle .mode-btn {
        width: 130px;
        height: 130px;
        gap: 10px;
        font-size: 15px;
    }

    .matiere-toggle .mode-btn .deck-icon {
        width: 50px;
        height: 50px;
    }

    /* Aide */
    .info-content {
        font-size: 13px;
    }

    /* Le gap de .buttons tombe à 6px sur ce palier : la largeur des répliques
       de notes suit, pour rester celle des vrais boutons. Le reste (padding et
       font-size réduits) leur est déjà appliqué par la règle .btn-grade. */
    .info-content .aide-notes {
        --aide-note-largeur: calc((100% - 18px) / 4);
    }

    /* Statistiques : les tuiles passent à deux par rangée, et la grille d'un
       an défile dans son conteneur (jamais la page) */
    .stat-tile {
        flex: 1 1 calc(50% - 5px);
        padding: 12px 8px;
    }

    .stat-tile b {
        font-size: 19px;
    }

    /* Rien de particulier pour la grille d'assiduité : elle a la même hauteur
       et la même pleine largeur qu'ailleurs. Le cas du téléphone (y étirer
       l'année écraserait ses cases à 5 px) est traité en JS, à partir de la
       largeur RÉELLEMENT disponible, et non plus par un palier de media query
       qui ne connaissait ni la fenêtre choisie ni le nombre de colonnes. */

    .day-deck {
        font-size: 13px;
    }

    .progress-chart {
        height: 110px;
    }

    /* Le filtre de fenêtre reprend une cible tactile confortable : les boutons
       compacts du bureau tomberaient à ~26px de haut. Règle explicite, la
       version compacte étant plus spécifique que le .mode-btn ci-dessus. */
    .stats-range-toggle .mode-btn {
        padding: 8px 12px;
        font-size: 13px;
    }

    /* Écran Apparence : les deux colonnes n'entrent plus, on repasse en pile.
       L'aperçu passe au-dessus des réglages : c'est lui que l'on regarde en
       changeant un réglage, et sous les cinq rangées de boutons il tombait
       hors de l'écran, donc hors de vue au moment précis où il sert.

       order plutôt que flex-direction: column-reverse, qui inverserait aussi
       l'origine du défilement si le cadre venait à déborder. L'ordre du DOM
       (donc celui du clavier et des lecteurs d'écran) reste inchangé, et
       l'aperçu n'a rien de focalisable : ses boutons sont désactivés et
       aria-hidden. */
    body.on-appearance .container {
        max-width: 100%;
    }

    body.on-appearance #appearanceScreen.show {
        flex-direction: column;
        align-items: stretch;
        gap: 0;
    }

    body.on-appearance .appearance-settings {
        flex: 0 0 auto;
    }

    body.on-appearance .preview-card {
        order: -1;
        margin: 0 auto 18px;   /* l'écart passe sous l'aperçu, qui est maintenant en tête */
    }

    #appearanceScreen {
        --toggle-largeur: 242px;   /* 118 × 2 + 6 */
    }

    #appearanceScreen .mode-btn {
        height: 34px;
        font-size: 12px;
    }

    /* 77px par bouton ici : le libellé passe d'un cran en dessous, sans quoi
       « Système » et « Sistema » débordent */
    #appearanceScreen .theme-toggle .mode-btn {
        font-size: 11px;
    }

    /* Mêmes proportions, mais calées sur la flashcard version mobile :
       --card-width = largeur réelle du conteneur (100vw - 2×10px de
       padding du body), --card-pad-top = padding 20px + h1 margin-top 30px */
    .preview-card {
        --card-width: calc(100vw - 20px);
        --card-pad-top: 50px;
        --card-pad-x: 14px;
        --card-pad-bottom: 20px;
        --card-title: 22px;
        --card-subtitle-gap: 18px;
        --card-corner: 34px;
        --card-hanzi: 130px;
        --card-hanzi-box: 156px;
        --card-hanzi-gap: 22px;
        --card-audio-gap: 22px;
        --card-translation: 28px;
        --card-pinyin: 24px;
        --card-zone-min: 165px;
        --card-buttons-gap: 6px;
        --card-buttons-min: 59px;
        --card-grade-pad-x: 4px;
        --card-grade-font: 14px;
    }
}

/* Grand écran (PC en plein écran) : l'écran Apparence prend plus de
   place — aperçu agrandi et réglages plus lisibles. Le palier en
   hauteur évite de déborder sur un écran large mais peu haut. */
@media (min-width: 1180px) and (min-height: 800px) {
    .preview-card {
        --preview-scale: 0.85;
    }

    body.on-appearance .container {
        max-width: 1007px;  /* 360 réglages + 40 gap + 527 carte + 80 padding */
    }

    body.on-appearance #appearanceScreen.show {
        gap: 40px;
    }

    body.on-appearance .appearance-settings {
        flex: 0 0 360px;
    }

    #appearanceScreen .setting-row {
        margin-bottom: 22px;
    }

    #appearanceScreen .setting-label {
        margin-bottom: 9px;
        font-size: 14px;
    }

    #appearanceScreen {
        --toggle-largeur: 358px;   /* 176 × 2 + 6 */
    }

    #appearanceScreen .mode-btn {
        height: 46px;
        font-size: 15px;
    }

    /* Menu principal (dossiers) et menu des decks : cadre plus large et
       cases plus grandes, pour remplir l'écran sans changer l'écran de
       révision (les variables --card-* de l'aperçu s'y réfèrent) */
    body.on-home .container,
    body.on-folders .container,
    body.on-decks .container {
        max-width: 820px;
        padding: 52px;
    }

    /* Le padding ci-dessus écrase la réserve que le cadre doit à la note du
       jour (css/ecrans.css), qui est posée en absolu et passerait donc sous
       les boutons. Il faut la redire : la règle partagée a exactement la
       même spécificité, et vient après. Vu en production, sur grand écran
       seulement, ce qui est précisément le piège de ce fichier. */
    body.on-home .container {
        padding-bottom: calc(var(--motd-hauteur) + var(--motd-ecart));
    }

    body.on-home h1,
    body.on-folders h1,
    body.on-decks h1 {
        font-size: 40px;
    }

    body.on-folders .subtitle,
    body.on-decks .subtitle {
        font-size: 16px;
        margin-bottom: 30px;
    }

    body.on-decks .mode-toggle {
        gap: 10px;
        margin-bottom: 28px;
    }

    body.on-decks .mode-toggle .mode-btn {
        padding: 12px 22px;
        font-size: 16px;
    }

    body.on-folders .deck-list,
    body.on-decks .deck-list {
        gap: 14px;
    }

    body.on-folders .deck-btn,
    body.on-decks .deck-btn {
        padding: 13px 22px;
        font-size: 20px;
    }

    body.on-folders .deck-icon,
    body.on-decks .deck-icon {
        width: 20px;
        height: 20px;
        margin-right: 8px;
    }

    body.on-folders .deck-btn .count,
    body.on-decks .deck-btn .count {
        font-size: 15px;
        padding: 5px 12px;
    }
}