@font-face { font-family: "Barlow Condensed"; font-weight: 700; font-display: swap; src: url(fonts/barlow-condensed-latin-700-normal.woff2) format("woff2"); }
@font-face { font-family: "Barlow Condensed"; font-weight: 800; font-display: swap; src: url(fonts/barlow-condensed-latin-800-normal.woff2) format("woff2"); }
@font-face { font-family: "Barlow"; font-weight: 400; font-display: swap; src: url(fonts/barlow-latin-400-normal.woff2) format("woff2"); }
@font-face { font-family: "Barlow"; font-weight: 600; font-display: swap; src: url(fonts/barlow-latin-600-normal.woff2) format("woff2"); }

:root {
  --terrain: #17402A;
  --terrain-clair: #21573A;
  --craie: #EDF2EC;
  --encre: #0E2A1B;
  --or: #F2C230;
  --juste: #4DB874;
  --faux: #D6453D;
  --club: #F2C230;
  --titre: "Barlow Condensed", "Arial Narrow", "Roboto Condensed", sans-serif;
  --texte: "Barlow", system-ui, -apple-system, "Segoe UI", sans-serif;
  box-sizing: border-box;
  padding-top: env(safe-area-inset-top, 0px);
  padding-bottom: env(safe-area-inset-bottom, 0px);
}
*, *::before, *::after { box-sizing: inherit; }

html, body { margin: 0; min-height: 100%; overflow-x: hidden; }
body {
  background-color: var(--terrain);
  /* lignes de craie du terrain, très discrètes */
  background-image:
    linear-gradient(to bottom, transparent calc(50% - 1px), rgba(237,242,236,.07) calc(50% - 1px), rgba(237,242,236,.07) calc(50% + 1px), transparent calc(50% + 1px)),
    repeating-linear-gradient(to bottom, transparent 0 139px, rgba(237,242,236,.04) 139px 141px);
  background-attachment: fixed;
  color: var(--craie);
  font: 400 1.0625rem/1.5 var(--texte);
  -webkit-font-smoothing: antialiased;
}

.app { max-width: 30rem; margin: 0 auto; padding: 1.25rem 1.25rem 2rem; }
.ecran { display: flex; flex-direction: column; gap: 1rem; }
[hidden] { display: none !important; }

/* Accueil */
.entete { padding: 1.5rem 0 .5rem; }
.titre {
  margin: 0;
  font: 800 clamp(3.2rem, 17vw, 4.6rem)/.86 var(--titre);
  letter-spacing: -.01em;
  color: var(--craie);
}
.accroche { margin: .75rem 0 0; color: rgba(237,242,236,.8); max-width: 22rem; }
.sous-titre { margin: .75rem 0 0; font: 700 1.35rem/1.2 var(--titre); color: rgba(237,242,236,.85); }

.champ { display: flex; flex-direction: column; gap: .35rem; font-size: .95rem; color: rgba(237,242,236,.8); }
.champ input, .champ select {
  font: 600 1.1rem var(--texte);
  color: var(--encre);
  background: var(--craie);
  border: 0;
  border-radius: .4rem;
  padding: .75rem .9rem;
  width: 100%;
}

.btn {
  font: 700 1.3rem/1.1 var(--titre);
  border: 0;
  border-radius: .4rem;
  padding: 1rem 1.1rem;
  cursor: pointer;
  width: 100%;
  -webkit-tap-highlight-color: transparent;
}
.btn-principal { background: var(--or); color: var(--encre); }
.btn-principal:active { transform: translateY(1px); }
.btn-secondaire { background: transparent; color: var(--craie); box-shadow: inset 0 0 0 2px rgba(237,242,236,.6); }
.btn-lien { background: none; color: var(--craie); text-decoration: underline; text-underline-offset: .2em; font: 600 1rem var(--texte); padding: .6rem; }

:focus-visible { outline: 3px solid var(--or); outline-offset: 3px; }

.clubs { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; }
.club {
  display: flex; align-items: center; gap: .6rem;
  text-align: left;
  font: 700 1.1rem/1.1 var(--titre);
  color: var(--craie);
  background: var(--terrain-clair);
  border: 0; border-radius: .4rem;
  padding: .85rem .75rem;
  cursor: pointer;
}
.club::before { content: ""; flex: none; width: .5rem; align-self: stretch; border-radius: 2px; background: var(--c); }

.pied { display: flex; flex-direction: column; align-items: center; margin-top: .5rem; }
.etat { margin: 0; text-align: center; font-size: .9rem; color: rgba(237,242,236,.65); min-height: 1.4em; }

/* Partie : l'écran de jeu occupe exactement la hauteur visible, sans défilement */
body.en-jeu { overflow: hidden; }
body.en-jeu .app {
  height: 100vh;
  height: calc(100dvh - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px));
  padding-top: .6rem; padding-bottom: .75rem;
  display: flex; flex-direction: column;
}
#ecran-jeu { flex: 1; min-height: 0; gap: .55rem; }

.tableau { display: flex; align-items: center; gap: .6rem; flex: none; min-width: 0; }
.tableau-infos { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.15; }
.tableau-mode { font: 700 1.15rem/1.1 var(--titre); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.compteur { font-size: .82rem; color: rgba(237,242,236,.7); }
.tableau-score { flex: none; background: var(--encre); color: var(--or); padding: .4rem .65rem; border-radius: .3rem; font: 700 1.3rem/1 var(--titre); font-variant-numeric: tabular-nums; }
.btn-quitter { flex: none; background: none; border: 0; color: var(--craie); font-size: 1.3rem; width: 2.25rem; height: 2.25rem; cursor: pointer; border-radius: .3rem; }
.retour { flex: none; font: 800 1.2rem/1 var(--titre); }
.retour.gagne { color: var(--or); animation: gain .5s ease-out; }
.retour.rate { color: #F2A19B; }
@keyframes gain { from { transform: translateY(6px); opacity: 0; } to { transform: none; opacity: 1; } }

.progression { flex: none; height: 4px; background: rgba(237,242,236,.15); border-radius: 2px; overflow: hidden; }
#jeu-barre { height: 100%; width: 0; background: var(--or); transition: width .3s; }

/* La carte prend toute la place restante et se redimensionne pour y tenir */
.zone-carte { flex: 1 1 0; min-height: 0; container-type: size; display: flex; align-items: center; justify-content: center; }
.carte {
  --bandeau: 4rem;
  /* côté de la photo : le plus grand carré qui tient dans la zone, bandeau compris */
  --cote: min(17.8rem, calc(100cqw - 2rem), calc(100cqh - var(--bandeau) - 2rem));
  width: calc(var(--cote) + 1.2rem);
  margin: 0;
  background: var(--craie);
  padding: .6rem .6rem 0;
  border-radius: .5rem;
  transform: rotate(-1.5deg);
  box-shadow: 0 12px 26px rgba(0,0,0,.35);
}
.carte-photo { width: var(--cote); height: var(--cote); overflow: hidden; border-radius: .25rem; background: var(--terrain-clair); }
.carte-photo img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top center; }
.carte-bandeau {
  height: var(--bandeau);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  margin: .6rem -.6rem 0; padding: .3rem .6rem;
  background: var(--club); color: #fff;
  border-radius: 0 0 .5rem .5rem;
  overflow: hidden;
}
.carte-nom { font: 800 1.7rem/1 var(--titre); text-align: center; }
.carte-nom.long { font-size: 1.35rem; }
.carte-infos { font: 600 .82rem/1.25 var(--texte); opacity: .9; text-align: center; min-height: 1.1em; }
.carte.revelee .carte-nom { animation: devoile .45s ease-out; }
@keyframes devoile { from { transform: rotateX(90deg); opacity: 0; } to { transform: none; opacity: 1; } }

.choix { flex: none; display: flex; flex-direction: column; gap: .45rem; }
.choix button {
  font: 700 1.3rem/1.05 var(--titre);
  color: var(--encre); background: var(--craie);
  border: 0; border-radius: .4rem;
  padding: .75rem .8rem;
  cursor: pointer;
  transition: background .15s, color .15s;
}
.choix button:disabled { cursor: default; opacity: .55; }
.choix button.juste { background: var(--juste); color: #fff; opacity: 1; }
.choix button.faux { background: var(--faux); color: #fff; opacity: 1; }

/* le bouton « Joueur suivant » garde toujours sa place : rien ne saute quand il apparaît */
.btn-suivant { flex: none; padding: .85rem 1rem; }
.btn-suivant:disabled { visibility: hidden; }

/* très petits écrans (ou navigateur avec barres épaisses) : on resserre encore */
@media (max-height: 600px) {
  #ecran-jeu { gap: .4rem; }
  .choix button { padding: .6rem .8rem; font-size: 1.2rem; }
  .btn-suivant { padding: .7rem 1rem; }
  .carte { --bandeau: 3.4rem; }
  .carte-nom { font-size: 1.45rem; }
  .choix button .mini { width: 1.6rem; height: 1.6rem; }
}

/* Accueil : bascule partie classée / entraînement */
.bascule { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; }
.bascule button {
  display: flex; flex-direction: column; align-items: flex-start; gap: .15rem;
  text-align: left; cursor: pointer; font-family: var(--texte);
  background: transparent; color: var(--craie);
  border: 2px solid rgba(237,242,236,.35); border-radius: .4rem;
  padding: .65rem .75rem;
}
.bascule button span { font: 700 1.2rem/1.1 var(--titre); }
.bascule button small { font-size: .8rem; line-height: 1.25; opacity: .8; }
.bascule button[aria-checked="true"] { background: var(--craie); color: var(--encre); border-color: var(--craie); }


/* Après la réponse, chaque proposition montre le visage du joueur correspondant */
.choix button { display: flex; align-items: center; justify-content: center; gap: .6rem; }
.choix button .mini {
  width: 1.9rem; height: 1.9rem; margin: -.3rem 0; flex: none;
  object-fit: cover; object-position: top center;
  border-radius: .25rem; background: rgba(255,255,255,.3);
  animation: apparait .3s ease-out;
}
@keyframes apparait { from { opacity: 0; transform: scale(.7); } to { opacity: 1; transform: none; } }

/* Bilan de l'entraînement */
#ecran-bilan { padding-top: 1.5rem; }
.bilan-titre { margin: 0; font: 800 2.4rem/1 var(--titre); }
.bilan-resume { margin: 0; font-size: 1.1rem; }
.bilan-bravo { margin: 0; color: var(--or); font-weight: 600; }
.bilan-erreurs { list-style: none; margin: 0 0 .5rem; padding: 0; display: flex; flex-direction: column; gap: .45rem; }
.bilan-erreurs li { display: flex; gap: .75rem; align-items: center; background: var(--terrain-clair); border-radius: .4rem; padding: .5rem; }
.bilan-erreurs img { width: 3.6rem; height: 3.6rem; flex: none; object-fit: cover; object-position: top center; border-radius: .3rem; background: var(--craie); }
.bilan-erreurs div { display: flex; flex-direction: column; min-width: 0; }
.bilan-erreurs strong { font: 700 1.2rem/1.1 var(--titre); }
.bilan-erreurs span { font-size: .85rem; opacity: .85; }
.bilan-erreurs .confondu { color: #F2A19B; opacity: 1; }

/* Fin */
#ecran-fin { text-align: center; padding-top: 2rem; }
.fin-mode { margin: 0; font: 700 1.3rem var(--titre); color: rgba(237,242,236,.8); }
.fin-score { margin: 0; font: 800 6rem/1 var(--titre); color: var(--or); display: flex; flex-direction: column; font-variant-numeric: tabular-nums; }
.fin-score small { font: 700 1.3rem var(--titre); color: var(--craie); }
.fin-detail { margin: 0; font-size: 1.1rem; }
.fin-envoi { margin: 0 0 1rem; font-size: .9rem; color: rgba(237,242,236,.7); min-height: 1.3em; }

/* Classement */
.classement, .records { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .35rem; }
.classement li, .records li {
  display: flex; align-items: baseline; gap: .75rem;
  background: var(--terrain-clair);
  padding: .65rem .8rem;
  border-radius: .35rem;
}
.classement .rang { font: 800 1.4rem var(--titre); color: var(--or); width: 2rem; font-variant-numeric: tabular-nums; }
.classement .nom, .records .nom { flex: 1; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.classement .pts, .records .pts { font: 700 1.25rem var(--titre); font-variant-numeric: tabular-nums; }
.classement li.moi { box-shadow: inset 0 0 0 2px var(--or); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}