/* =====================================================================
   Pétanque Manager — app.css : le mode application (pages outils : direct, club,
   administration). DESIGN.md § Mode application. Se charge après tokens.css, SANS
   components.css : une page de boulodrome ne paie pas la vitrine. D'où une base ici.
   Lues dehors, vite, sur téléphone : corps de 18 px, textes à 7:1 au moins (--app-*),
   cibles de 44 px. Aucun des sept mouvements : seuls le survol (couleurs) et le focus.
   ===================================================================== */
*,*::before,*::after{box-sizing:inherit}
body.app{margin:0;background:var(--paper);color:var(--ink);font-family:var(--font);font-size:18px;line-height:1.45;-webkit-font-smoothing:antialiased;text-size-adjust:100%;-webkit-text-size-adjust:100%}
.app img,.app svg{max-width:100%;display:block}
.app button{font:inherit}
.app a{color:var(--accent);text-decoration:underline;text-underline-offset:3px}
.app :focus-visible{outline:3px solid var(--accent);outline-offset:3px;border-radius:8px}
.app h1,.app h2,.app h3{margin:0;color:var(--ink);overflow-wrap:break-word;letter-spacing:-.02em;line-height:1.15}
.app h1{font-size:clamp(26px,6vw,36px);font-weight:700}
.app h2{font-size:22px;font-weight:700}
.app h3{font-size:19px;font-weight:600}
.app [hidden]{display:none !important}
.app p{margin:0}
@media (prefers-reduced-motion:reduce){.app *,.app *::before,.app *::after{transition:none !important}}
.app-wrap{max-width:var(--max);margin:0 auto;padding:16px 16px 32px;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
.app-stack{display:grid;gap:12px}
.app-sub{color:var(--app-muted);margin:4px 0 0}
.app-num{font-variant-numeric:tabular-nums}

/* Carte : fond de page, filet. Pas d'ombre ni d'élévation (rien n'est cliquable en entier). */
.app-card{background:var(--paper);border:1px solid var(--hairline);border-radius:16px;padding:14px 16px}
.app-card>h2,.app-card>h3{margin:0 0 10px}

/* Bandeau de fraîcheur : dernière mise à jour et état du rafraîchissement.
   data-etat : ok (pastille victoire), charge (pastille accent), perdu (erreur). Pastille fixe. */
.app-fresh{border:1px solid var(--hairline);border-radius:14px;padding:10px 14px;font-size:17px;color:var(--ink)}
/* Pastille en ligne avec le texte : elle reste devant le premier mot quand la phrase passe à la ligne. */
.app-fresh::before{content:"";display:inline-block;vertical-align:.05em;width:12px;height:12px;margin-right:10px;border-radius:50%;background:var(--app-win)}
.app-fresh[data-etat="charge"]::before{background:var(--accent)}
.app-fresh[data-etat="perdu"]{border:2px solid var(--app-danger);font-weight:600}
.app-fresh[data-etat="perdu"]::before{background:var(--app-danger)}
.app-fresh__detail{color:var(--app-muted)}

/* Badge d'état : à venir (contour), en cours (plein, accent), terminé (sourd). */
.app-badge{display:inline-flex;align-items:center;gap:6px;font-size:16px;font-weight:700;line-height:1.2;padding:4px 10px;border-radius:999px;border:2px solid currentColor;white-space:nowrap}
.app-badge--venir{color:var(--app-muted)}
.app-badge--cours{background:var(--accent);border-color:var(--accent);color:var(--paper)}
.app-badge--fini{background:var(--cloud);border-color:var(--cloud);color:var(--ink)}

/* Score en très grand : chiffres tabulaires, le vainqueur en encre, le perdant en sourd. */
.app-score{font-size:clamp(40px,11vw,60px);font-weight:800;line-height:1;font-variant-numeric:tabular-nums;letter-spacing:-.02em}

/* Carte de match : en-tête (terrain, état), puis une ligne par équipe, nom et score face à face.
   --gagne sur la ligne du vainqueur ; .app-match--mien : la partie de l'équipe suivie, seule mise
   en valeur or de l'écran (filet --rule, 3:1 au moins dans les deux thèmes). */
.app-match{background:var(--paper);border:1px solid var(--hairline);border-radius:16px;padding:12px 16px}
.app-match--mien{border-left:6px solid var(--rule);padding-left:12px}
.app-match__tete{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:6px;color:var(--app-muted);font-size:17px}
.app-match__terrain{font-weight:700;color:var(--ink)}
.app-match__eq{display:grid;grid-template-columns:1fr auto;align-items:center;gap:12px;padding:2px 0}
.app-match__eq+.app-match__eq{border-top:1px solid var(--hairline)}
.app-match__nom{font-size:21px;font-weight:600;overflow-wrap:break-word;min-width:0;color:var(--app-muted)}
.app-match__eq .app-score{color:var(--app-muted)}
.app-match__eq--gagne .app-match__nom,.app-match__eq--gagne .app-score{color:var(--ink);font-weight:800}
.app-match--attente .app-match__nom{color:var(--ink)}
.app-match--attente .app-score{color:var(--app-muted)}

/* Tableau de scores : les cartes de match d'un tour ou d'une poule, une colonne sur téléphone,
   deux puis trois sur tablette et à la table de marque (1 280 px). */
.app-grille{display:grid;gap:12px}
@media (min-width:720px){.app-grille{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1100px){.app-grille{grid-template-columns:repeat(3,minmax(0,1fr))}}

/* Filtre de poule, de tour ou de tableau : boutons à bascule, défilement horizontal. */
.app-filter{display:flex;gap:8px;overflow-x:auto;padding:2px 2px 6px;margin:0 -2px;scrollbar-width:thin}
.app-filter button{flex:0 0 auto;min-height:44px;padding:0 16px;border-radius:999px;border:2px solid var(--app-muted);background:var(--paper);color:var(--ink);font-size:17px;font-weight:600;cursor:pointer;transition:background-color .2s,color .2s}
.app-filter button[aria-pressed="true"]{background:var(--accent);border-color:var(--accent);color:var(--paper)}
.app-filter__n{font-weight:500;margin-left:6px;font-variant-numeric:tabular-nums}
@media (hover:hover) and (pointer:fine){.app-filter button:not([aria-pressed="true"]):hover{background:var(--cloud)}}

/* Classement : rang, équipe, colonnes de nombres alignées à droite. Le podium en gras, sans or. */
.app-rank{width:100%;border-collapse:collapse;font-size:18px}
.app-rank th{font-size:16px;font-weight:600;color:var(--app-muted);text-align:left;padding:6px 8px;border-bottom:2px solid var(--hairline)}
.app-rank td{padding:10px 8px;border-bottom:1px solid var(--hairline);vertical-align:middle}
.app-rank tr:last-child td{border-bottom:0}
.app-rank .n{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.app-rank__rang{width:2.6em;font-weight:800;font-variant-numeric:tabular-nums}
.app-rank__eq{font-weight:600;overflow-wrap:anywhere}
.app-rank tr.app-rank--podium td{font-weight:800}
.app-plus{color:var(--app-win)}
.app-moins{color:var(--app-loss)}

/* Messages : attente, vide, erreur (role="alert" pour cette dernière). */
.app-msg{border:2px solid var(--hairline);border-radius:16px;padding:18px 20px;text-align:center}
.app-msg__titre{font-size:21px;font-weight:700;margin:0 0 4px}
.app-msg p{margin:0;color:var(--app-muted)}
.app-msg--erreur{border-color:var(--app-danger);text-align:left}
.app-msg--erreur .app-msg__titre{color:var(--app-danger)}

/* Boutons d'application : rectangles doux de 48 px, sans élévation ni déplacement. */
.app-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:0 18px;border-radius:12px;border:2px solid transparent;font-size:17px;font-weight:600;line-height:1.2;cursor:pointer;transition:background-color .2s,border-color .2s,color .2s;text-decoration:none}
.app-btn--primaire{background:var(--btn-bg);color:var(--btn-fg)}
/* Un lien habillé en bouton garde les couleurs du bouton (et pas celles des liens de .app a). */
.app a.app-btn{text-decoration:none}
.app a.app-btn--primaire{color:var(--btn-fg)}
.app a.app-btn--discret{color:var(--ink)}
.app-btn--discret{background:var(--paper);border-color:var(--app-muted);color:var(--ink)}
.app-btn--danger{background:var(--paper);border-color:var(--app-danger);color:var(--app-danger)}
@media (hover:hover) and (pointer:fine){
  .app-btn--primaire:hover{background:var(--btn-bg-hover)}
  .app-btn--discret:hover,.app-btn--danger:hover{background:var(--cloud)}
}

/* Barre d'actions : collée en bas sur mobile, dans le flux au-delà de 720 px. */
.app-actions{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.app-actions--barre{position:sticky;bottom:0;z-index:5;background:var(--paper);border-top:1px solid var(--hairline);margin:16px -16px 0;padding:12px 16px calc(12px + env(safe-area-inset-bottom,0px))}
.app-actions--barre .app-btn{flex:1 1 auto}
@media (min-width:720px){.app-actions--barre{position:static;border-top:0;margin:16px 0 0;padding:0}.app-actions--barre .app-btn{flex:0 0 auto}}

/* Formulaire dense (administration) : libellé au-dessus, champ de 48 px, deux colonnes au-delà de 720 px. */
.app-form{display:grid;gap:14px}
@media (min-width:720px){.app-form--deux{grid-template-columns:1fr 1fr}.app-form--deux .app-field--large{grid-column:1/-1}}
.app-field{display:grid;gap:6px}
.app-field label,.app-field legend{font-size:16px;font-weight:600;color:var(--ink)}
.app-field input:not([type="checkbox"]):not([type="radio"]),.app-field select,.app-field textarea{width:100%;min-height:48px;padding:10px 12px;border:2px solid var(--app-muted);border-radius:12px;background:var(--paper);color:var(--ink);font:inherit;font-size:18px}
.app-field textarea{min-height:96px;resize:vertical}
.app-field__aide{font-size:16px;color:var(--app-muted)}
.app-field--erreur input,.app-field--erreur select,.app-field--erreur textarea{border-color:var(--app-danger)}
.app-field__erreur{font-size:16px;font-weight:600;color:var(--app-danger)}
.app-check{display:flex;align-items:center;gap:10px;min-height:44px;font-size:18px}
.app-check input{width:22px;height:22px;accent-color:var(--accent)}

/* ---------- Composants du direct (phase C) ---------- */
/* En-tête : marque, titre, formule et état. */
.app-marque{font-size:16px;font-weight:700;color:var(--accent);margin:0 0 4px}
.app-fresh[data-etat="fini"]::before{background:var(--app-muted)}
.app-fresh[hidden]{display:none}

/* Chiffres clés : trois cases, libellé au-dessus, nombre en grand. */
.app-chiffres{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin:0}
.app-chiffres>div{border:1px solid var(--hairline);border-radius:14px;padding:8px 12px}
.app-chiffres dt{font-size:16px;color:var(--app-muted)}
.app-chiffres dd{margin:0;font-size:28px;font-weight:800;font-variant-numeric:tabular-nums;line-height:1.15}

/* Section : titre et compte à droite, puis le contenu. */
.app-section{margin-top:20px}
.app-section__tete{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:10px}
.app-section h3{margin:14px 0 8px;color:var(--app-muted)}
.app-match--direct .app-match__nom,.app-match--direct .app-score{color:var(--ink)}
.app-defile{overflow-x:auto}
.app-exaequo{font-size:16px;color:var(--app-muted);margin-left:2px}

/* Équipe suivie : la partie du moment (seule mise en valeur or de l'écran), puis son parcours. */
.app-now{border:1px solid var(--hairline);border-left:6px solid var(--rule);border-radius:14px;padding:12px 14px;margin:10px 0}
.app-now__libelle{font-size:16px;font-weight:700;color:var(--app-muted);margin:0 0 4px}
.app-now__vs{font-size:20px;margin:0}
.app-now__terrain{font-size:clamp(30px,9vw,44px);font-weight:800;line-height:1.1;margin:6px 0 0}
.app-now__terrain--absent{font-size:18px;font-weight:600;color:var(--app-muted)}
.app-parcours{list-style:none;margin:0;padding:0}
.app-parcours li{display:grid;grid-template-columns:5.2em 1fr auto;gap:10px;align-items:center;padding:8px 0;border-top:1px solid var(--hairline)}
.app-parcours__tour{font-size:16px;font-weight:700;color:var(--app-muted)}
.app-parcours__adv{overflow-wrap:anywhere}
.app-parcours__adv small{display:block;font-size:16px;color:var(--app-muted)}
.app-parcours__score{font-weight:700;font-variant-numeric:tabular-nums;white-space:nowrap}
.app-attente{color:var(--app-muted);font-weight:600}
.app-vide{color:var(--app-muted);margin:0}

/* Recherche d'équipe : champ et bouton d'effacement côte à côte. */
.app-cherche{display:flex;gap:8px}
.app-cherche input{flex:1;min-width:0}
.app-cherche .app-btn{min-width:48px;padding:0 12px}

.app-pied{margin-top:28px;display:grid;gap:4px;justify-items:center;text-align:center;font-size:16px;color:var(--app-muted)}
.app-pied p{margin:0}
.app-pied .app-btn{margin-top:10px}

/* Table de marque (1 100 px et plus, hors grand écran) : matchs à gauche, classement à droite,
   qui reste en vue pendant le défilement. */
@media (min-width:1100px){
  body.app:not(.app--ecran) #contenu:has(>.app-section--classement){display:grid;grid-template-columns:minmax(0,1.7fr) minmax(0,1fr);column-gap:24px;align-items:start}
  body.app:not(.app--ecran) #contenu:has(>.app-section--classement)>.app-section:not(.app-section--classement){grid-column:1}
  body.app:not(.app--ecran) #contenu>.app-section--classement{grid-column:2;grid-row:1/span 20;position:sticky;top:16px}
  body.app:not(.app--ecran) #contenu:has(>.app-section--classement) .app-grille{grid-template-columns:repeat(2,minmax(0,1fr))}
}

/* ---------- Composants du classement club (phase D) ---------- */
/* Bandeau de mise à jour et relecture à la demande (lien permanent : pas de rafraîchissement automatique). */
.app-releve{display:flex;gap:8px;align-items:stretch}
.app-releve .app-fresh{flex:1;min-width:0}
.app-field__titre{font-size:16px;font-weight:600;color:var(--ink)}
.app-chiffres--deux{grid-template-columns:repeat(2,minmax(0,1fr))}
/* Période : deux dates côte à côte, la remise à zéro dessous. */
.app-periode{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.app-periode .app-btn{grid-column:1/-1;justify-self:start}
/* Un champ de date garde sinon sa largeur naturelle et déborde sur son voisin. */
.app-periode .app-field{min-width:0}
.app-periode input{min-width:0;padding-left:8px;padding-right:8px}
/* Safari iOS garde au champ de date natif une largeur minimale qui ignore min-width : apparence
   neutralisée (le sélecteur natif s'ouvre toujours au toucher), valeur alignée à gauche. */
.app-periode input[type="date"]{-webkit-appearance:none;appearance:none;display:block;width:100%;max-width:100%}
.app-periode input[type="date"]::-webkit-date-and-time-value{text-align:left;margin:0}
/* Joueur : un bouton qui ouvre son détail (clavier compris), à l'allure du texte. */
.app-joueur{display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:0;border:0;background:none;color:var(--ink);font:inherit;font-weight:600;text-align:left;cursor:pointer;overflow-wrap:break-word}
.app-joueur__chev{color:var(--app-muted);font-weight:700}
.app-joueur[aria-expanded="true"] .app-joueur__chev{display:inline-block;transform:rotate(90deg)}
@media (hover:hover) and (pointer:fine){.app-joueur:hover{text-decoration:underline;text-underline-offset:3px}}
.app-rank--club td,.app-rank--club th{padding-left:6px;padding-right:6px}
.app-rank tr.app-detail td{padding:0 6px 10px;border-left:4px solid var(--accent)}
.app-hist{list-style:none;margin:0;padding:0}
.app-hist li{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:8px 6px;border-top:1px solid var(--hairline)}
.app-hist li:first-child{border-top:0}
.app-hist__nom{font-weight:600}
.app-hist__date{font-size:16px;color:var(--app-muted)}
.app-hist__stats{white-space:nowrap;font-variant-numeric:tabular-nums}
/* Table de marque (1 100 px et plus) : filtres à gauche, qui restent en vue, classement à droite. */
@media (min-width:1100px){
  .app-club{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2fr);gap:24px;align-items:start}
  .app-club__filtres{position:sticky;top:16px}
  .app-club__classement{margin-top:0}
}
.app-club__classement h2{margin-bottom:10px}
@media (max-width:1099px){.app-club__classement{margin-top:20px}}

/* ---------- Administration et modération (phase E) : composants denses ---------- */
.app-admin .app-wrap{max-width:960px}
.app-admin__tete{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.app-admin__nav{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.app-admin__nav a{font-weight:600}
.app-admin__titre{margin:28px 0 12px}
.app-admin__connexion{max-width:420px;min-height:100vh;display:grid;align-content:center}
.app-admin__connexion h2{margin-bottom:4px}
/* Message de la dernière action : succès sur filet victoire, erreur sur filet erreur (role="alert"). */
.app-msg--ok{border-color:var(--app-win);text-align:left}
.app-msg--ok p,.app-msg--erreur p{color:var(--ink)}
/* Compteurs : un lien par section, qui l'ouvre ; ce qui attend en gras et cerclé. */
.app-compteurs{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:8px;margin:16px 0}
.app-compteurs a{display:block;border:2px solid var(--hairline);border-radius:14px;padding:10px 12px;color:var(--ink);text-decoration:none}
.app-compteurs strong{display:block;font-size:28px;font-weight:800;color:var(--app-muted);font-variant-numeric:tabular-nums}
.app-compteurs a.app-compteurs--attente{border-color:var(--accent)}
.app-compteurs a.app-compteurs--attente strong{color:var(--ink)}
@media (hover:hover) and (pointer:fine){.app-compteurs a:hover{background:var(--cloud)}}
/* Section pliable (details) : l'intitulé se pilote au clavier, le focus se voit. */
.app-pli{border:1px solid var(--hairline);border-radius:16px;margin-bottom:12px;background:var(--paper)}
.app-pli>summary{padding:14px 16px;font-size:19px;font-weight:700;cursor:pointer;min-height:48px;border-radius:16px}
.app-pli>summary:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
.app-pli__corps{padding:0 16px 16px;display:grid;gap:12px}
.app-pli__corps>h2{font-size:19px;margin:8px 0 0}
/* Carte de décision : filet à gauche, or réservé ; alerte = filet erreur, actif = filet victoire. */
.app-carte{border:1px solid var(--hairline);border-left:5px solid var(--accent);border-radius:12px;padding:12px 14px;display:grid;gap:8px;background:var(--paper)}
.app-carte--alerte{border-left-color:var(--app-danger)}
.app-admin main>.app-carte{margin-bottom:12px}
.app-carte--actif{border-left-color:var(--app-win)}
.app-carte h3{margin:0}
.app-meta{font-size:16px;color:var(--app-muted)}
.app-meta a{color:var(--accent)}
.app-tag{display:inline-block;font-size:16px;font-weight:700;padding:0 8px;border-radius:6px;border:2px solid currentColor;color:var(--ink)}
.app-alerte{color:var(--app-danger)}
.app-vide{color:var(--app-muted);margin:0}
.app-champs{width:100%;border-collapse:collapse;font-size:16px}
.app-champs th,.app-champs td{text-align:left;padding:6px 8px;border-bottom:1px solid var(--hairline);vertical-align:top;overflow-wrap:anywhere}
.app-champs th{color:var(--app-muted);font-weight:600}
.app-champs input{width:22px;height:22px;accent-color:var(--accent)}
.app-champs label{cursor:pointer}
.app-champs__avant{color:var(--app-muted);text-decoration:line-through}
.app-json{border:1px solid var(--hairline);border-radius:10px;padding:6px 10px}
.app-json summary{font-size:16px;font-weight:600;cursor:pointer;min-height:32px}
.app-json pre{font-size:16px;overflow-x:auto;white-space:pre-wrap;margin:6px 0 0;color:var(--ink)}
.app-photos{display:flex;gap:6px;flex-wrap:wrap}
.app-photos img{width:80px;height:60px;object-fit:cover;border-radius:6px}
.app-video{grid-template-columns:120px minmax(0,1fr);align-items:start}
.app-video img{width:120px;aspect-ratio:16/9;object-fit:cover;border-radius:8px}
@media (max-width:480px){.app-video{grid-template-columns:1fr}.app-video img{width:100%}}
.app-refus{display:grid;gap:8px}
.app-siege{display:flex;justify-content:space-between;align-items:center;gap:8px;flex-wrap:wrap}
.app-admin .app-field textarea{min-height:72px}

/* ---------- Grand écran (buvette, bureau, table de marque) ----------
   Automatique à partir de 1 600 px de large en paysage, forcé par ?ecran=1 (et retiré par
   ?ecran=0) : classe posée par la page. Sans recherche ni fiche d'équipe, scores en très grand,
   tour en cours seulement, sans défilement : matchs à gauche, classement à droite, chaque
   colonne (.app-colonne, posée par la page) paginée toutes les 15 s si elle dépasse. */
body.app--ecran{height:100vh;height:100dvh;overflow:hidden;font-size:clamp(18px,1.5vw,30px)}
.app--ecran .app-wrap{max-width:none;height:100%;display:grid;grid-template-rows:auto minmax(0,1fr) auto;gap:1.4vh;padding:2vh 2.2vw}
.app--ecran #cherche,.app--ecran #fiche,.app--ecran #nav,.app--ecran #theme,.app--ecran #chiffres{display:none}
.app--ecran h1{font-size:clamp(28px,3vw,56px)}
.app--ecran .app-fresh{font-size:clamp(18px,1.6vw,32px)}
.app--ecran .app-fresh::before{width:.7em;height:.7em}
/* Contenu : deux colonnes de toute la hauteur, qui ne défilent pas (la page les pagine). */
.app--ecran #contenu{display:grid;grid-template-columns:minmax(0,1.7fr) minmax(0,1fr);grid-template-rows:minmax(0,1fr);column-gap:2vw;min-height:0}
.app--ecran .app-colonne{overflow:hidden;min-height:0}
.app-colonne__fin{grid-column:1/-1}
.app--ecran .app-colonne>.app-section,.app--ecran .app-colonne>.app-msg{margin-top:0;margin-bottom:1.4vh}
/* Sans classement (phase de poules…) : une seule colonne, dont les sections se partagent la largeur. */
.app--ecran .app-colonne--seule{grid-column:1/-1;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:2vw;align-content:start;align-items:start}
.app--ecran .app-colonne--seule .app-match__nom{font-size:clamp(18px,1.4vw,30px)}
.app--ecran .app-colonne--seule .app-score{font-size:clamp(34px,3.2vw,72px)}
.app--ecran .app-grille{grid-template-columns:repeat(2,minmax(0,1fr));gap:1.2vh 1.2vw}
.app--ecran .app-match{padding:1vh 1.2vw}
.app--ecran .app-match__nom{font-size:clamp(21px,1.9vw,40px)}
.app--ecran .app-match__tete,.app--ecran .app-badge{font-size:clamp(16px,1.2vw,26px)}
.app--ecran .app-score{font-size:clamp(40px,4.4vw,96px)}
.app--ecran .app-section h2{font-size:clamp(22px,1.9vw,40px)}
.app--ecran .app-rank{font-size:clamp(18px,1.5vw,32px)}
.app--ecran .app-rank th{font-size:clamp(16px,1.1vw,24px)}
.app--ecran .app-rank td{padding:.6vh .5vw}
.app--ecran .app-pied{margin-top:0;display:flex;justify-content:center;gap:1.5em;font-size:clamp(16px,1vw,22px)}
.app--ecran .app-pied p{margin:0}
.app-pages{font-weight:700;color:var(--ink);font-variant-numeric:tabular-nums}
.app-pied a[aria-current]{font-weight:700;text-decoration:none;color:var(--ink)}
.app-pied .app-btn{margin-top:10px}

/* ---------- Téléphone (moins de 720 px) : le direct par onglets ----------
   Mon équipe / Matchs / Classement, barre collée en haut ; cartes de match compactes (terrain à
   gauche, numéro, un seul nom, score), ouvertes au toucher sur les membres complets ; classement en
   lignes. Au-delà de 720 px et en grand écran, la barre et les vues du téléphone sont cachées. */
.app-onglets,#classement-tel{display:none}
/* Champ de recherche : ni croix ni flèche du navigateur, la page a son bouton d'effacement. */
.app-cherche input::-webkit-search-cancel-button{-webkit-appearance:none;appearance:none}
.app-cherche input::-webkit-calendar-picker-indicator{display:none !important}
@media (max-width:719px){
  body.app:not(.app--ecran) .app-wrap{padding-top:12px}
  body.app:not(.app--ecran) h1{font-size:23px;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2;overflow:hidden}
  body.app:not(.app--ecran) .app-stack{gap:8px}
  body.app:not(.app--ecran) .app-fresh{font-size:16px;padding:6px 12px}
  body.app:not(.app--ecran) #chiffres,body.app:not(.app--ecran) .app-pied__affichage{display:none}
  body.app:not(.app--ecran) #contenu>.app-section--classement{display:none}

  /* Onglets : trois parts égales, collées en haut, l'actif plein marine (or en sombre). */
  body.app:not(.app--ecran) .app-onglets{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:4px;position:sticky;top:0;z-index:10;margin:12px -16px 0;padding:8px 16px;background:var(--paper);border-bottom:1px solid var(--hairline)}
  .app-onglets button{min-height:48px;padding:0 6px;border-radius:12px;border:2px solid var(--hairline);background:var(--paper);color:var(--ink);font-size:17px;font-weight:700;cursor:pointer;white-space:nowrap}
  .app-onglets button[aria-selected="true"]{background:var(--accent);border-color:var(--accent);color:var(--paper)}

  /* Un onglet à la fois. */
  body[data-onglet="equipe"]:not(.app--ecran) :is(#nav,#contenu){display:none}
  body[data-onglet="matchs"]:not(.app--ecran) :is(#cherche,#fiche){display:none}
  body[data-onglet="classement"]:not(.app--ecran) :is(#cherche,#fiche,#nav,#contenu){display:none}
  body[data-onglet="classement"]:not(.app--ecran) #classement-tel{display:block}
  body.app:not(.app--ecran) #cherche{margin-top:16px}

  /* Tours : le débordement se voit (fondu à droite), la page centre le tour choisi. */
  body.app:not(.app--ecran) .app-filter{margin-top:14px;-webkit-mask-image:linear-gradient(to right,#000 85%,transparent);mask-image:linear-gradient(to right,#000 85%,transparent);padding-right:40px}
  body.app:not(.app--ecran) .app-section{margin-top:16px}
  .app-grille{gap:8px}

  /* Carte de match compacte : details/summary, le toucher ouvre le détail des membres. */
  .app-mt{border:1px solid var(--hairline);border-radius:14px;background:var(--paper)}
  .app-mt>summary{display:grid;grid-template-columns:64px minmax(0,1fr);gap:10px;align-items:center;padding:8px 10px 8px 8px;list-style:none;cursor:pointer;border-radius:14px;min-height:44px}
  .app-mt>summary::-webkit-details-marker{display:none}
  .app-mt__terrain{display:grid;justify-items:center;align-content:center;align-self:stretch;border-radius:10px;background:var(--cloud);color:var(--ink);font-size:28px;font-weight:800;line-height:1;font-variant-numeric:tabular-nums;padding:6px 2px}
  .app-mt__terrain small{font-size:16px;font-weight:600;color:var(--ink);margin-bottom:4px}
  .app-mt__eqs{display:grid;min-width:0}
  .app-mt__eq{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:8px;min-height:40px}
  .app-mt__eq+.app-mt__eq{border-top:1px solid var(--hairline)}
  .app-mt__num{display:inline-block;min-width:2.2em;text-align:center;font-size:16px;font-weight:800;font-variant-numeric:tabular-nums;color:var(--ink);border:2px solid var(--hairline);border-radius:8px;padding:0 4px;line-height:1.5}
  .app-mt__num:empty{display:none}
  .app-mt__nom{font-size:19px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--app-muted)}
  .app-mt__score{font-size:32px;font-weight:800;line-height:1;font-variant-numeric:tabular-nums;color:var(--app-muted);min-width:1.3em;text-align:right}
  .app-mt__eq--gagne .app-mt__nom,.app-mt__eq--gagne .app-mt__score{color:var(--ink);font-weight:800}
  .app-mt--direct .app-mt__nom,.app-mt--direct .app-mt__score{color:var(--ink)}
  .app-mt.app-match--mien{border-left:6px solid var(--rule)}
  .app-mt.app-match--mien{padding-left:0}
  .app-mt.app-match--mien>summary{padding-left:3px}
  .app-mt__detail{list-style:none;margin:0;padding:4px 12px 12px 82px;display:grid;gap:8px;font-size:17px;color:var(--ink)}
  .app-mt__detail li{display:flex;gap:8px;align-items:baseline}
  .app-mt[open]>summary{border-bottom-left-radius:0;border-bottom-right-radius:0}

  /* Parcours de la fiche : l'adversaire tient sur une ligne. */
  .app-parcours li{grid-template-columns:4.2em minmax(0,1fr) auto}
  .app-parcours__adv{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-weight:600}

  /* Classement en lignes : rang, numéro, nom, V, écart ; détail au toucher. */
  #classement-tel .app-section{margin-top:16px}
  .app-cl__tete,.app-cl summary{display:grid;grid-template-columns:2.4em auto minmax(0,1fr) 1.6em 3em;gap:8px;align-items:center}
  .app-cl__tete{font-size:16px;font-weight:600;color:var(--app-muted);padding:0 10px 6px;border-bottom:2px solid var(--hairline)}
  .app-cl__tete span:nth-child(2){grid-column:2/4}
  .app-cl__tete span:nth-child(n+3){text-align:right}
  .app-cl{list-style:none;margin:0;padding:0}
  .app-cl>li{border-bottom:1px solid var(--hairline)}
  .app-cl summary{list-style:none;min-height:48px;padding:4px 10px;cursor:pointer;font-size:18px}
  .app-cl summary::-webkit-details-marker{display:none}
  .app-cl__rang{font-weight:800;font-variant-numeric:tabular-nums}
  .app-cl__nom{font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .app-cl__v,.app-cl__diff{text-align:right;font-variant-numeric:tabular-nums}
  .app-cl>li.app-rank--podium .app-cl__nom,.app-cl>li.app-rank--podium .app-cl__v{font-weight:800}
  .app-cl__detail{padding:2px 10px 12px calc(2.4em + 18px);display:grid;gap:4px;font-size:17px}
  .app-cl__pts{color:var(--app-muted);font-size:16px}
  .app-cl__legende{margin-top:10px;font-size:16px;color:var(--app-muted)}
  .app-cl summary:not(:has(.app-mt__num:not(:empty))) .app-cl__nom{grid-column:2/4}
}