/* Direction "signalétique", validée le 08/08.
   Les valeurs viennent de chantiers/padel-matchmaking/ux/DESIGN.md (dépôt redsmite).
   Règles dures reprises ici pour qu'on ne les perde pas :
     - le jaune ne porte JAMAIS de texte : il est fond, jamais couleur de lettre
     - un seul jaune actif par écran (le jaune de sélection ne compte pas)
     - aucun élément ne code un niveau : ni jauge, ni étoile, ni rang
     - la photo et la voix ne sont jamais des cases de tableau              */

:root{
  --sol:#1F5C7A; --grille:#14161A; --verre:#DCE7E9; --balle:#D7E93F;
  --papier:#F1F2F0; --gris:#5E6B70; --r:2px;
  --disp:"Barlow Condensed", Haettenschweiler, Impact, sans-serif;
  --corps:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
  background:var(--papier); color:var(--grille);
  font-family:var(--corps); font-size:16px; line-height:1.45;
  -webkit-text-size-adjust:100%;           /* la taille système du téléphone est respectée */
}
#app{max-width:520px;margin:0 auto;min-height:100%;display:flex;flex-direction:column;
     background:var(--papier);border-left:1px solid var(--verre);border-right:1px solid var(--verre)}

/* ------- barre haute ------- */
.bar{padding:14px 16px;display:flex;justify-content:space-between;align-items:baseline;
     border-bottom:1px solid var(--grille);gap:12px}
.bar .nm{font-family:var(--disp);font-size:22px;font-weight:700;letter-spacing:.04em;text-transform:uppercase}
.bar .lien{font-size:12px;color:var(--gris);background:none;border:0;cursor:pointer;text-decoration:underline}

/* ------- geste central ------- */
.dispo{margin:16px;background:var(--balle);border:1px solid var(--grille);border-radius:var(--r);
       padding:22px 18px;display:flex;justify-content:space-between;align-items:center;
       cursor:pointer;width:calc(100% - 32px);text-align:left;font-family:inherit;color:var(--grille)}
/* un <button> ne peut pas contenir de <div> : ses enfants sont des <span>, il faut donc
   leur rendre le comportement de bloc, sinon titre et sous-titre se collent sur une ligne.
   Trouvé au rendu réel du 09/08. */
.dispo > span{display:block}
.dispo .t{display:block;font-family:var(--disp);font-size:34px;font-weight:700;line-height:.95;text-transform:uppercase}
.dispo .s{display:block;font-size:12px;opacity:.75;margin-top:4px}
.dispo .fl{font-family:var(--disp);font-size:40px;font-weight:700}
.dispo[disabled]{opacity:.55;cursor:default}

.section{margin:10px 16px 6px;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--gris)}

/* ------- carte de partie ------- */
.carte{margin:0 16px 10px;border:1px solid var(--grille);border-radius:var(--r);background:#fff;
       display:flex;width:calc(100% - 32px);text-align:left;font-family:inherit;color:var(--grille);cursor:pointer}
.carte .quand{display:block;background:var(--sol);color:#fff;padding:12px 8px;width:94px;flex:0 0 94px;text-align:center}
.carte .jour{display:block;font-family:var(--disp);font-size:15px;font-weight:600;text-transform:uppercase;letter-spacing:.06em}
.carte .heure{display:block;font-family:var(--disp);font-size:28px;font-weight:700;line-height:1;letter-spacing:-.01em}
.carte .corps{display:block;padding:11px 12px;flex:1;min-width:0}
.carte .ou{display:block;font-family:var(--disp);font-size:19px;font-weight:600;text-transform:uppercase}
.carte .qui{display:block;font-size:12px;color:var(--gris);margin-top:2px}
.carte .raison{font-size:12px;margin-top:8px;padding-top:8px;border-top:1px solid var(--verre);
               display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.place{display:inline-block;background:var(--grille);color:var(--papier);border-radius:var(--r);
       font-family:var(--disp);font-size:13px;font-weight:700;text-transform:uppercase;padding:3px 8px;letter-spacing:.05em}

/* Une partie déjà jouée se consulte, elle n'appelle plus à agir : la bande de date perd le bleu
   du sol et prend le gris, sans ajouter de couleur au langage (palette inchangée, six teintes). */
.carte.terne .quand{background:var(--gris)}
.carte.terne .ou{color:var(--gris)}

/* ------- l'écran vide ne l'est jamais ------- */
.vide{margin:0 16px;border:1px dashed var(--gris);border-radius:var(--r);padding:18px;text-align:center;
      color:var(--gris);font-size:13px}
.vide b{display:block;font-family:var(--disp);font-size:20px;color:var(--grille);text-transform:uppercase;margin-bottom:6px}

/* ------- formulaires ------- */
.champ{margin:0 16px 14px}
.champ label{display:block;font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--gris);margin-bottom:6px}
.champ input, .champ select{width:100%;font-family:inherit;font-size:16px;padding:12px;
  border:1px solid var(--grille);border-radius:var(--r);background:#fff;color:var(--grille);min-height:44px}
/* UNE GRILLE, PAS UN FLUX QUI S'ÉTIRE. Avec un flux, la dernière rangée incomplète répartit
   l'espace entre ses seuls boutons : « 21h » et « 21h30 » se retrouvaient deux fois plus larges
   que « 19h » juste au-dessus. Charles l'a vu à l'image le 10/08 et il a raison, ce n'est pas un
   détail : deux boutons de tailles différentes disent au lecteur qu'ils n'ont pas le même poids.
   Une grille à colonnes égales rend toutes les cases identiques, rangée pleine ou non. */
.choix{display:grid;grid-template-columns:repeat(2,1fr);gap:6px}
.choix button{min-height:44px;font-family:inherit;font-size:13px;
  padding:10px 8px;border:1px solid var(--grille);border-radius:var(--r);background:#fff;color:var(--grille);cursor:pointer}
.choix button[aria-pressed="true"]{background:var(--balle);font-weight:600}

.principal{margin:18px 16px;width:calc(100% - 32px);min-height:56px;background:var(--balle);
  border:1px solid var(--grille);border-radius:var(--r);font-family:var(--disp);font-size:26px;font-weight:700;
  text-transform:uppercase;color:var(--grille);cursor:pointer}
.principal[disabled]{opacity:.5;cursor:default}
.secondaire{margin:0 16px 18px;width:calc(100% - 32px);min-height:44px;background:#fff;
  border:1px solid var(--grille);border-radius:var(--r);font-family:inherit;font-size:14px;color:var(--grille);cursor:pointer}

.titre{margin:20px 16px 4px;font-family:var(--disp);font-size:32px;font-weight:700;text-transform:uppercase;line-height:.98}
.chapo{margin:0 16px 18px;font-size:14px;color:var(--gris)}
.pied{margin-top:auto;padding:14px 16px;border-top:1px solid var(--verre);font-size:11px;color:var(--gris)}
.mot{margin:12px 16px;padding:12px;border:1px solid var(--grille);border-radius:var(--r);background:#fff;font-size:14px}
/* Un mot d'échec se signale par l'épaisseur du trait, pas par une septième couleur : la colonne
   visuelle fixe six teintes et écarte nommément la brique. Le rouge #8c2f16 qui vivait ici était
   la seule entorse à la palette dans tout le produit, relevée le 10/08. Soldée en passant. */
.mot.raté{border-width:2px}
.cache{display:none}

/* ------- lot 2 : le profil, la photo, la voix ------- */
/* La photo et la voix sont les deux seuls endroits où le produit se réchauffe :
   ils occupent la place qui le dit, ils ne sont jamais des cases de tableau. */
.ph{height:min(58vh,420px);overflow:hidden;border-bottom:1px solid var(--grille);background:var(--sol)}
.ph img{width:100%;height:100%;object-fit:cover;object-position:50% 30%;display:block}
/* Le nom passe SOUS la photo, jamais dessus : posé dessus il exige un voile qui mange
   l'image, et sa lisibilité dépend alors de chaque cliché (cadrage du 08/08). */
.bande{background:var(--grille);color:var(--papier);padding:12px 16px;display:flex;
       justify-content:space-between;align-items:baseline;gap:12px}
.bande .nomj{font-family:var(--disp);font-size:34px;font-weight:700;text-transform:uppercase;line-height:.95}
.bande .meta{font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:#9aa4a8;text-align:right}
.cri{margin:16px;border:1px solid var(--grille);border-radius:var(--r);padding:14px;
     display:flex;align-items:center;gap:14px;background:#fff}
.cri .play{width:52px;height:52px;flex:0 0 52px;background:var(--balle);border:1px solid var(--grille);
           border-radius:var(--r);display:flex;align-items:center;justify-content:center;font-size:19px;
           color:var(--grille);cursor:pointer;font-family:inherit}
.cri .lab{display:block;font-family:var(--disp);font-size:20px;font-weight:600;text-transform:uppercase;letter-spacing:.03em}
.cri .sub{display:block;font-size:12px;color:var(--gris)}
.pal{margin:0 16px;display:flex;border:1px solid var(--grille);border-radius:var(--r);background:#fff}
.pal div{flex:1;padding:12px 8px;text-align:center;border-right:1px solid var(--verre)}
.pal div:last-child{border-right:0}
.pal .n{display:block;font-family:var(--disp);font-size:32px;font-weight:700;line-height:1}
.pal .l{display:block;font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--gris);margin-top:2px}
.cherche{margin:12px 16px;font-size:13px;color:var(--gris)}
.cherche b{color:var(--grille)}
.mini{font-family:inherit;font-size:12px;padding:7px 12px;min-height:36px;border:1px solid var(--grille);
      border-radius:var(--r);background:#fff;color:var(--grille);cursor:pointer}

/* ------- les formes de la refonte du 10/08 -------
   Trois règles tenues partout ici : cible tactile d'au moins 44 points (seuil AAA du référentiel
   d'accessibilité, et le bon seuil quand on touche debout au bord d'un terrain), aucune couleur
   nouvelle (la palette reste à six teintes), et un état sélectionné qui se voit AUTREMENT que par
   la couleur seule — les écrans bon marché rendent mal le jaune de la balle. */

/* Le ruban de jours : « Auj. » d'abord, et les trois premières pastilles visibles sans glisser. */
.ruban{display:flex;gap:8px;overflow-x:auto;padding-bottom:4px;-webkit-overflow-scrolling:touch}
.ruban button{flex:0 0 auto;min-width:60px;min-height:52px;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:2px;font-family:inherit;
  border:1px solid var(--grille);border-radius:var(--r);background:#fff;color:var(--grille);cursor:pointer}
.ruban button[aria-pressed="true"]{background:var(--grille);color:var(--papier);font-weight:700}
.ruban .j{font-family:var(--disp);font-size:15px;font-weight:600;text-transform:uppercase;letter-spacing:.04em}
.ruban .q{font-size:11px;opacity:.75}

/* La grille de créneaux : quatre colonnes, des pastilles qui tiennent sans défilement vertical. */
.choix.grille{grid-template-columns:repeat(4,1fr)}
.choix.grille button{font-family:var(--disp);font-size:16px;font-weight:600;padding:11px 4px}
.choix.pastilles{grid-template-columns:repeat(7,1fr);gap:4px}
.choix.pastilles button{padding:10px 2px;font-weight:600}

/* Un lieu se reconnaît à son signe et à son repère, jamais à son seul nom. */
.lieux{display:flex;flex-direction:column;gap:8px}
.lieux button{display:flex;align-items:center;gap:10px;min-height:56px;padding:8px 10px;text-align:left;
  font-family:inherit;border:1px solid var(--grille);border-radius:var(--r);background:#fff;color:var(--grille);cursor:pointer}
.lieux button[aria-pressed="true"]{background:var(--balle);font-weight:600}
.lieux img,.lieux .init{flex:0 0 auto;width:44px;height:44px;border-radius:var(--r);object-fit:contain;background:var(--verre)}
.lieux .init{display:flex;align-items:center;justify-content:center;font-family:var(--disp);font-size:22px;font-weight:700}
.lieux .txt{display:flex;flex-direction:column;min-width:0}
.lieux .nom{font-family:var(--disp);font-size:17px;font-weight:600;text-transform:uppercase;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lieux .rep{font-size:12px;color:var(--gris);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* Trois choix tiennent sur une ligne : à 50 % de large minimum, le troisième tombe seul en
   dessous et l'écran ment sur l'importance relative des options. Vu à l'image le 10/08. */
.choix.trois{grid-template-columns:repeat(3,1fr)}
/* Le groupe de jours et les pastilles sont deux rangées d'un MÊME geste : elles se touchent,
   au lieu de flotter à la même distance que deux champs sans rapport. Vu à l'image le 10/08. */
.choix.trois.rapproche{margin-bottom:6px}
.depliant{display:block;margin-bottom:6px;font-size:13px;color:var(--gris);background:none;border:0;
  text-decoration:underline;cursor:pointer;font-family:inherit;padding:6px 0;min-height:44px;text-align:left}
/* Les créneaux déjà posés se lisent d'un coup : un jour, une plage, un retrait. */
.regles{display:flex;flex-direction:column;gap:6px}
.regle{display:flex;align-items:center;gap:10px;border:1px solid var(--grille);border-radius:var(--r);
  background:#fff;padding:10px 12px}
.regle .q{font-family:var(--disp);font-size:16px;font-weight:600;text-transform:uppercase;letter-spacing:.04em}
.regle .h{flex:1;font-family:var(--disp);font-size:16px;font-weight:600;color:var(--gris)}
.pied.sous{margin-top:6px;padding:0;border:0}
/* Un bouton secondaire posé DANS un champ hérite de la marge du champ : il se retrouvait décalé
   de seize points par rapport à la grille qu'il commande, ce qui casse l'alignement de la colonne.
   Vu à l'image le 10/08. Dans un champ, il occupe la largeur du champ, sans marge propre. */
.champ > .secondaire{margin:8px 0 0;width:100%}
/* Un mot posé DANS une grille doit pouvoir la traverser, sinon son texte tombe en colonne d'un
   mot par ligne. Vu sur le téléphone de Charles le 10/08. */
.choix .mot.pleine{grid-column:1 / -1;margin:0}
/* Les moments de la journée commandent la grille qui les suit : ils s'en détachent, sinon les
   deux rangées se lisent comme un seul bloc de boutons de même nature. */
.choix + .choix.grille{margin-top:10px}
/* La carte d'aide de la première visite : on la quitte, elle ne revient plus. */
.aide{position:relative;margin:12px 16px;padding:14px 40px 14px 14px;border:1px solid var(--grille);
  border-radius:var(--r);background:#fff;font-size:13px;color:var(--gris)}
.aide b{display:block;font-family:var(--disp);font-size:18px;color:var(--grille);text-transform:uppercase;margin-bottom:4px}
.aide .fermer{position:absolute;top:4px;right:4px;width:40px;height:40px;background:none;border:0;
  font-size:22px;line-height:1;color:var(--gris);cursor:pointer}
.plus{font-family:var(--disp);font-size:20px;font-weight:700;margin-right:4px}
/* Un lieu porte trois états : rien, préféré, jamais. L'état se lit en toutes lettres à droite,
   jamais par la seule couleur : les écrans bon marché rendent mal le jaune. */
.lieux.etats button[data-etat="prefere"]{background:var(--balle);font-weight:600}
.lieux.etats button[data-etat="exclu"]{background:var(--verre);color:var(--gris)}
.lieux .etat{margin-left:auto;font-size:11px;letter-spacing:.1em;text-transform:uppercase;white-space:nowrap}

/* ------- la barre basse, proposition 3 retenue le 10/08 -------
   Retour à gauche, geste principal à droite. Les deux choses qu'on touche le plus arrivent sous
   le pouce, et le bouton de validation quitte le bas de la page où il fallait défiler.
   Collée au bas de la fenêtre, elle ne défile pas ; elle respecte la zone sûre des téléphones
   à encoche, sinon le geste se retrouve sous la barre système du système d'exploitation. */
/* FIXÉE, PAS COLLANTE. Une barre collante se pose là où elle tombe dans le document : elle
   s'affichait donc au milieu de l'écran quand un bloc la suivait, et par-dessus le contenu.
   Fixée au bas de la fenêtre, sa place dans le document ne compte plus. Elle reprend la largeur
   du contenant pour rester alignée sur lui au-delà de 520 points. Vu à l'image le 10/08. */
.navbasse{position:fixed;bottom:0;left:50%;transform:translateX(-50%);
  width:100%;max-width:520px;z-index:10;display:flex;align-items:stretch;
  min-height:60px;background:var(--papier);border-top:1px solid var(--grille);
  padding-bottom:env(safe-area-inset-bottom,0)}
/* Le contenu se termine AU-DESSUS de la barre, sinon la dernière carte se cache dessous. */
#app{padding-bottom:calc(72px + env(safe-area-inset-bottom,0))}
.nav-retour{flex:0 0 96px;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:2px;background:none;border:0;border-right:1px solid var(--verre);font-family:inherit;
  font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--grille);cursor:pointer}
.nav-retour .fl{font-family:var(--disp);font-size:26px;font-weight:700;line-height:1}
.nav-geste{flex:1;background:var(--balle);border:0;border-left:1px solid var(--grille);
  font-family:var(--disp);font-size:24px;font-weight:700;text-transform:uppercase;
  letter-spacing:.02em;color:var(--grille);cursor:pointer}
.nav-geste[disabled]{opacity:.5;cursor:default}
.nav-titre{flex:1;display:flex;align-items:center;justify-content:center;font-family:var(--disp);
  font-size:17px;text-transform:uppercase;letter-spacing:.04em;color:var(--gris)}
/* Un peu d'air sous le bandeau : le premier libellé touchait le trait de séparation. */
.bar + .champ, .bar + .aide, .bar + .titre{margin-top:14px}

/* ------- l'axe des trois modes de jeu -------
   Trois positions ordonnées : compétitif, équilibré, détente. On choisit la sienne, et
   éventuellement sa voisine. Le rang est un chiffre, jamais une couleur seule : c'est un ORDRE de
   préférence, et une couleur ne sait pas dire lequel vient en premier. */
.axe{display:grid;grid-template-columns:1fr;gap:6px}
.axe button{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:1px;
  min-height:56px;padding:10px 12px 10px 14px;text-align:left;font-family:inherit;
  border:1px solid var(--grille);border-radius:var(--r);background:#fff;color:var(--grille);cursor:pointer}
.axe button[aria-pressed="true"]{background:var(--balle);font-weight:600}
.axe .lab{font-family:var(--disp);font-size:19px;font-weight:600;text-transform:uppercase}
.axe .sub{font-size:12px;color:var(--gris)}
.axe button[aria-pressed="true"] .sub{color:var(--grille);opacity:.7}
.axe .rang{position:absolute;top:8px;right:10px;width:26px;height:26px;border-radius:50%;
  background:var(--grille);color:var(--papier);font-family:var(--disp);font-size:16px;font-weight:700;
  display:flex;align-items:center;justify-content:center}