/* LE TÉLÉPHONE — ce qui fait de Novastar une application au pouce.
 *
 * 90 % des visiteurs sont sur téléphone. L'audit mobile du 9 octobre 2026
 * (docs/audit-mobile.md) concluait que l'interface était « pensée ordinateur
 * rétréci » : navigation en haut, hors de portée du pouce ; boutons de 30 à
 * 40 px quand Apple en demande 44 ; aucune réaction au toucher.
 *
 * Ce fichier est chargé EN DERNIER : il ne fait qu'ajuster, pour le
 * téléphone, ce que les autres feuilles décident pour tout le monde. Rien
 * ici ne change l'ordinateur, à part la réaction au toucher, qui ne
 * s'y voit pas.
 *
 * Le texte, lui, grandit ailleurs : par l'échelle --texte-* de tokens.css.
 */

/* --- La barre d'onglets ---------------------------------------------------
 *
 * Masquée par défaut : sur ordinateur, la barre du haut a la place de tout. */
.barre-onglets { display: none; }

@media (max-width: 760px) {
  :root {
    /* Hauteur de la barre d'onglets, SANS la zone de la barre d'accueil de
       l'iPhone (ajoutée à part) : tout ce qui doit rester au-dessus d'elle
       (bas de page, menu) s'en sert. */
    --hauteur-onglets: 58px;
  }

  .barre-onglets {
    position: fixed; z-index: 65;          /* au-dessus du voile du menu (55) */
    left: 0; right: 0; bottom: 0;
    display: grid; grid-template-columns: repeat(5, minmax(0, 1fr));
    min-height: var(--hauteur-onglets);
    padding: 4px calc(6px + var(--encoche-droite)) calc(4px + var(--encoche-bas)) calc(6px + var(--encoche-gauche));
    background: rgba(255, 255, 255, .95);
    -webkit-backdrop-filter: blur(22px) saturate(150%); backdrop-filter: blur(22px) saturate(150%);
    border-top: 1px solid var(--line);
  }
  .barre-onglets a, .barre-onglets button {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
    min-height: 50px; padding: 0; border: 0; background: none;
    border-radius: var(--rayon-interieur);
    /* 12 px écrits en dur, et non --texte-12 : le libellé d'un onglet ne
       doit pas grandir avec le texte, il doit tenir sous son icône. */
    font-size: 12px; font-weight: 620; letter-spacing: -.01em; line-height: 1.1;
    color: var(--muted); text-decoration: none;
    -webkit-tap-highlight-color: transparent;
  }
  .barre-onglets span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .icone-onglet { width: 25px; height: 25px; fill: currentColor; transition: transform var(--duree-courte) var(--courbe); }
  /* L'onglet de la page courante : icône pleine ET couleur, pas la couleur
     seule (lisible par un daltonien). */
  .barre-onglets [aria-current="page"],
  .barre-onglets .onglet-plus.actif,
  .barre-onglets .onglet-plus[aria-expanded="true"] { color: var(--violet-dark); }
  .barre-onglets [aria-current="page"] .icone-onglet,
  .barre-onglets .onglet-plus.actif .icone-onglet,
  .barre-onglets .onglet-plus[aria-expanded="true"] .icone-onglet { color: var(--violet); }
  /* « Plus » porte ses deux dessins : au trait, puis plein. */
  .onglet-plus .icone-onglet + .icone-onglet { display: none; }
  .onglet-plus.actif .icone-onglet:first-of-type,
  .onglet-plus[aria-expanded="true"] .icone-onglet:first-of-type { display: none; }
  .onglet-plus.actif .icone-onglet + .icone-onglet,
  .onglet-plus[aria-expanded="true"] .icone-onglet + .icone-onglet { display: block; }
  .barre-onglets a:active .icone-onglet, .barre-onglets button:active .icone-onglet { transform: scale(.86); }
  .barre-onglets a:focus-visible, .barre-onglets button:focus-visible { outline: 2px solid var(--violet); outline-offset: -2px; }

  /* Le bas de page s'arrête au-dessus de la barre, pas dessous. */
  .coque { padding-bottom: calc(40px + var(--hauteur-onglets) + var(--encoche-bas)); }

  /* --- La barre du haut, allégée ------------------------------------------
   *
   * Le menu est passé dans « Plus », Jouer et Analyser dans les onglets et
   * dans le menu : il reste le logo, le solde de stars et le compte. Chaque
   * bouton fait 44 px, la taille recommandée par Apple. */
  .bouton-menu, .bascule-mode { display: none !important; }
  .topbar-inner { padding-top: calc(6px + var(--encoche-haut)); padding-bottom: 6px; }
  /* La capsule du compte et les boutons du visiteur règlent eux-mêmes
     leur taille et leur zone de toucher (pages.css, « Capsule du compte »). */

  /* --- Le menu devient une feuille qui monte du bas ------------------------
   *
   * Ouvert par « Plus », il apparaît juste au-dessus de la barre d'onglets,
   * là où le pouce vient de toucher — et non plus accroché en haut à droite.
   * Glisser vers le bas le referme (web/js/gestes.js). */
  .menu-mobile {
    top: auto;
    left: calc(8px + var(--encoche-gauche)); right: calc(8px + var(--encoche-droite));
    width: auto;
    bottom: calc(var(--hauteur-onglets) + var(--encoche-bas) + 8px);
    max-height: calc(100dvh - var(--hauteur-onglets) - var(--encoche-bas) - var(--encoche-haut) - 72px);
    border-radius: 22px;
    padding-top: 22px;
  }
  /* La poignée : le signe, connu sur iOS, qu'on peut faire glisser. */
  .menu-mobile::before {
    content: ""; position: absolute; top: 8px; left: 50%; width: 38px; height: 5px; margin-left: -19px;
    border-radius: 3px; background: var(--line-strong);
  }
}

/* --- Analyser en onglets --------------------------------------------------
 *
 * Les onglets n'existent que sur téléphone (analyser.js). Sur ordinateur, ils
 * sont cachés et toutes les parties restent visibles, en deux colonnes. */
.onglets-analyser { display: none; }
@media (min-width: 761px) {
  .choix-en-tete { display: none; }
}
@media (max-width: 760px) {
  .vue .onglets-analyser {
    display: flex; position: sticky; z-index: 20;
    top: calc(58px + var(--encoche-haut));
    margin: 0 0 14px;
    background: rgba(238, 240, 243, .94);
    -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
  }
  .onglets-analyser button { flex: 1 1 0; }
  /* analyser.css range la vue en colonne avec un ordre explicite : les
     onglets se placent entre le ruban (1) et les panneaux (2). */
  section[data-vue="app-analyser"] > .onglets-analyser { order: 1; margin-top: 14px; }
  section[data-vue="app-analyser"] > .ruban { order: 0; }
  [data-vue="app-analyser"] .panneau-analyser:not(.actif) { display: none; }
  /* Le bouton du bas de la liste fait doublon avec celui de la tête. */
  [data-vue="app-analyser"] #ouvrir-choix { display: none; }
  .choix-en-tete { width: 100%; justify-content: center; margin: 0 0 12px; min-height: 44px; }
  /* « + Ajouter » de Jouer : à droite du titre, à hauteur de pouce. */
  #jouer-ajouter { margin-left: auto; min-height: 44px; }
}

/* --- Des listes compactes ------------------------------------------------
 *
 * Classement et Joueurs faisaient cinq et six écrans de haut : chaque joueur
 * était une carte de 86 à 160 px. Sur téléphone, ils deviennent des listes
 * à la manière d'iOS — des lignes séparées d'un filet, le chiffre qu'on
 * cherche aligné à droite. Même balisage : seule la présentation change. */
@media (max-width: 760px) {
  /* Classement : une ligne par joueur. Rang | nom, puis ATP et pays | Elo,
     puis forme sur 30 jours. On lit la colonne de droite d'un coup d'œil. */
  /* La liste est UNE surface blanche, et non plus une pile de cartes : le
     court ne se voit plus entre les lignes. */
  .tbl-classement tbody {
    background: var(--card); border: 1px solid var(--line); border-radius: var(--rayon-petit);
  }
  .tbl-classement tbody tr {
    grid-template-columns: 38px minmax(0, 1fr) auto;
    column-gap: 8px; row-gap: 1px;
    padding: 9px 12px 9px 6px; margin: 0;
    border: 0; border-bottom: 1px solid var(--line); border-radius: 0;
    background: none; box-shadow: none;
  }
  .tbl-classement tbody tr:last-child { border-bottom: 0; }
  .tbl-classement td.td-rang {
    grid-column: 1; grid-row: 1 / span 2; justify-self: center; width: auto; font-size: 16px; white-space: nowrap;
  }
  .tbl-classement td.td-nom {
    grid-column: 2; grid-row: 1; min-width: 0; flex-wrap: nowrap; align-items: center; gap: 4px;
  }
  /* Un nom trop long se coupe d'une ellipse au lieu de passer à la ligne
     (« Alejandro Davidovich / Fokina » doublait la hauteur de sa ligne). */
  .tbl-classement td.td-nom .lien-joueur { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .tbl-classement td.td-nom .meta, .tbl-classement td.td-nom .suivre { flex: none; }
  .tbl-classement td[data-libelle="ATP"] { grid-column: 2; grid-row: 2; color: var(--muted); }
  .tbl-classement td[data-libelle="Elo"] { grid-column: 3; grid-row: 1; justify-content: flex-end; font-size: 17px; }
  .tbl-classement td[data-libelle="Elo"]::before { content: none; }
  .tbl-classement td[data-libelle="30 j"] { grid-column: 3; grid-row: 2; justify-content: flex-end; }
  /* La pagination (« Afficher plus ») borne déjà la liste sur téléphone :
     un cadre qui défile seul, dans une page qui défile, ne servait qu'à
     piéger le pouce. */
  .classement-defilable { max-height: none; overflow: visible; }

  /* Joueurs : l'étoile de suivi revient sur la ligne du nom (elle prenait
     une ligne à elle seule), et la carte perd 44 px. */
  .carte-joueur h3 { display: flex; align-items: center; gap: 2px; min-width: 0; }
  .carte-joueur h3 .lien-joueur { flex: 0 1 auto; min-width: 0; }
  .carte-joueur h3 .suivre { flex: none; }
  .carte-joueur h3 .jeton-equipe { display: none; }   /* le filet violet de la carte le dit déjà */
  .carte-joueur { padding: 10px 12px; row-gap: 4px; }
  .carte-joueur .boutons-carte { margin-top: 2px; }
}

/* --- Des cibles de 44 px ---------------------------------------------------
 *
 * Tout ce qui se touche du doigt fait au moins 44 × 44 px (règle d'Apple,
 * et WCAG 2.5.5). Sur un écran tactile seulement : à la souris, des boutons
 * plus serrés restent confortables et la densité de l'ordinateur est gardée.
 * Les marges négatives, là où il y en a, agrandissent la zone de toucher
 * sans pousser la mise en page. */
@media (pointer: coarse) {
  .segmente button { min-height: 44px; min-width: 44px; }
  .carte-joueur h3 .suivre, .tbl-classement .suivre { width: 44px; height: 44px; margin: -14px -8px -14px -4px; }
  /* La croix garde son dessin de 30 px ; c'est sa zone de toucher, invisible,
     qui déborde jusqu'à 44 px. */
  .puces-cmp .retirer { position: relative; flex: none; }
  .puces-cmp .retirer::after { content: ""; position: absolute; inset: -7px; }
  .voir-mdp { min-height: 44px; padding: 0 12px; right: 3px; }
  .champ-mdp input { padding-right: 96px; }
  .retour, .liens-formulaire a, .lien-texte, .btn-lien {
    display: inline-flex; align-items: center; min-height: 44px;
  }
  .evitement { min-height: 44px; display: inline-flex; align-items: center; }

  /* --- Réagir au toucher -------------------------------------------------
   *
   * Un léger enfoncement à l'instant où le doigt se pose : la preuve que le
   * toucher a été pris, avant même que la page change. Seulement `transform`
   * (aucun recalcul de mise en page), et court. iOS n'ajoute plus son
   * rectangle gris : c'est cet enfoncement qui le remplace. */
  .carte-joueur, .match-carte, .carte-journee .match, .tbl-classement tbody tr, .position-equipe,
  .btn, .btn-principal, .btn-doux, .jeton-stars, .menu-mobile a, .menu-mobile button {
    -webkit-tap-highlight-color: transparent;
    transition: transform var(--duree-courte) var(--courbe), background var(--duree-courte), color var(--duree-courte);
  }
  .carte-joueur:active, .match-carte:active, .carte-journee .match:active, .position-equipe:active { transform: scale(.985); }
  .btn:active, .btn-principal:active, .btn-doux:active, .jeton-stars:active { transform: scale(.96); }
  .tbl-classement tbody tr:active { background: var(--lilac-softer); }
  .menu-mobile a:active, .menu-mobile button:active { background: var(--lilac-soft); }
}

@media (prefers-reduced-motion: reduce) {
  .carte-joueur:active, .match-carte:active, .carte-journee .match:active, .position-equipe:active,
  .btn:active, .btn-principal:active, .btn-doux:active, .jeton-stars:active,
  .barre-onglets a:active .icone-onglet, .barre-onglets button:active .icone-onglet { transform: none; }
}

/* --- Les gestes (web/js/gestes.js) ------------------------------------------ */
@media (max-width: 760px) {
  /* La fiche d'un joueur monte du bas : une poignée dit qu'on peut la faire
     redescendre du doigt. */
  .fiche::before {
    content: ""; position: absolute; top: calc(6px + var(--encoche-haut)); left: 50%;
    width: 38px; height: 5px; margin-left: -19px; border-radius: 3px; background: var(--line-strong);
  }
}

/* Tirer pour actualiser : une pastille ronde descend sous la barre du haut,
   l'icône tourne avec le doigt, devient violette quand on peut lâcher, puis
   tourne seule pendant l'actualisation. */
.tirer-actualiser {
  position: fixed; z-index: 58; left: 50%; top: calc(52px + var(--encoche-haut));
  width: 38px; height: 38px; display: grid; place-items: center;
  border-radius: 50%; background: var(--card); color: var(--muted);
  box-shadow: 0 6px 18px -8px rgba(36, 28, 54, .35);
  transform: translate(-50%, -60px); opacity: 0; pointer-events: none;
  transition: transform var(--duree) var(--courbe), opacity var(--duree-courte);
}
.tirer-actualiser svg { width: 20px; height: 20px; }
.tirer-actualiser.visible { opacity: 1; transition: none; }
.tirer-actualiser.pret { color: var(--violet); }
.tirer-actualiser.tourne { opacity: 1; color: var(--violet); transform: translate(-50%, 24px); }
.tirer-actualiser.tourne svg { animation: tirer-tourne .8s linear infinite; }
@keyframes tirer-tourne { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .tirer-actualiser.tourne svg { animation: none; }
}

/* --- Un court plus léger à dessiner ------------------------------------------
 *
 * Le fond est texturé par des filtres SVG de bruit (feTurbulence), calculés
 * pixel par pixel. Sur un téléphone, à trois pixels réels par point, c'est le
 * travail le plus lourd du premier affichage — et le grain le plus fin, à
 * cette densité et sous le voile clair, ne se voit plus. On le retire, ainsi
 * que les lignes « poudrées » de la terre battue ; les textures propres à
 * chaque surface (traîne, résine, tonte) restent : le court reste reconnaissable. */
@media (max-width: 760px) {
  .court .tex.tex-grain { display: none; }
  .court[data-surface="terre"] .court-lignes { filter: none; }
}

/* Analyser et pied de page, sur téléphone (23 octobre 2026). Hors du bloc
   « pointer: coarse » : la largeur suffit, la souris n'y change rien. */
@media (max-width: 760px) {
  /* Les joueurs comparés deux par deux (23 octobre 2026) : en rangées
     souples, quatre noms faisaient quatre lignes et repoussaient la courbe
     d'un écran entier. Un nom trop long est coupé, la fiche le donne. */
  .puces-cmp { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .puces-cmp { gap: 6px; }
  .puces-cmp li { min-width: 0; gap: 6px; padding: 3px 3px 3px 9px; justify-content: space-between; font-size: var(--texte-12-5); }
  .puces-cmp .retirer { width: 26px; height: 26px; }
  .puces-cmp .retirer::after { inset: -9px; }   /* 26 + 2 × 9 = 44 px de cible */
  .puces-cmp li.vide { grid-column: 1 / -1; }
  .puces-cmp li .lien-joueur { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .pied { text-align: center; }
  .pied-liens { justify-content: center; }
}

/* Le bandeau de consentement passe au-dessus de la barre d'onglets. */
@media (max-width: 760px) {
  .bandeau-consentement {
    left: 12px; right: 12px;
    bottom: calc(var(--hauteur-onglets) + var(--encoche-bas) + 10px);
  }
}