/* Prisme, la mise en page de l'appli, téléphone d'abord. Reprise de la maquette (maquette/maquette.css), sans ce
   qui était propre à la démo. N'écrit aucune couleur : tout passe par les variables de style/tokens.css. */

html { background: var(--fond); }
body { margin: 0; }
[hidden] { display: none !important; }

.appli {
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  align-items: center;
  background: var(--fond);
}

.ecran {
  box-sizing: border-box;
  position: relative;
  width: 100%;
  max-width: 430px;
  flex: 1;
  display: flex;
  flex-direction: column;
  background: var(--fond);
}
.ecran__contenu { flex: 1; display: flex; flex-direction: column; gap: var(--e-3); padding: 0 var(--e-4) var(--e-6); }
.ecran__contenu--haut { padding-top: var(--e-4); }
.ecran .nav-basse { position: sticky; bottom: 0; z-index: 3; box-shadow: 0 -1px 0 var(--ligne); }

@media (min-width: 600px) {
  .appli { padding: 24px 0 40px; }
  .ecran { flex: none; min-height: 760px; border-radius: 28px; overflow: clip; box-shadow: 0 0 0 1px var(--ligne); }
}

/* Titre d'écran posé sur le bandeau ; il reçoit le focus à chaque changement d'écran */
.bandeau h1 { margin: 0; }
h1[tabindex="-1"]:focus, h2[tabindex="-1"]:focus { outline: none; }
.bandeau__club { position: relative; display: flex; align-items: center; gap: var(--e-2); }
.bandeau__club-nom { font-size: var(--t-petit); font-weight: 700; color: var(--sur-bandeau-doux); }
/* La marque de l'appli tant que le club n'a pas de logo dans l'appli */
.bandeau__marque { display: inline-flex; width: 28px; height: 28px; align-items: center; justify-content: center; color: var(--club-accent-lisible); }
.bandeau__marque .icone { width: 22px; height: 22px; }

.visuellement-cache { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.sans-script { margin: 24px; font: 600 1rem/1.5 var(--police-texte); color: var(--encre); }

/* Petits outils de mise en page */
.rangee { display: flex; align-items: center; gap: var(--e-2); }
.rangee--espace { justify-content: space-between; }
.rangee--haut { align-items: flex-start; }
.pile { display: flex; flex-direction: column; gap: var(--e-2); }
.pile--serree { gap: 4px; }
.texte-petit { font-size: var(--t-petit); }
.marge-0 { margin: 0; }
.chiffres { font-variant-numeric: tabular-nums; }

/* La pile qui chevauche le bandeau garde l'espacement entre ses cartes */
.pile.chevauche { gap: var(--e-3); }

.qui-voit { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; }
.qui-voit li { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: var(--e-3); padding: 10px 0; font-size: var(--t-petit); }
.qui-voit li + li { border-top: 1px solid var(--ligne); }

/* Lignes d'une liste dans une carte ; une ligne peut être un bouton qui ouvre une feuille */
.liste { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; }
.liste > li + li { border-top: 1px solid var(--ligne); }
.ligne {
  display: flex;
  align-items: center;
  gap: var(--e-3);
  min-height: 60px;
  padding: 6px 0;
  color: var(--encre);
  text-decoration: none;
}
.ligne--bouton { width: 100%; border: 0; background: none; font: inherit; text-align: left; cursor: pointer; }
.ligne--bouton:focus-visible { outline: 3px solid var(--club-principal); outline-offset: 2px; border-radius: var(--r-note); }
.ligne .avatar { width: 40px; height: 40px; border-radius: var(--r-note); font-size: 1.125rem; }
.ligne__texte { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.ligne__titre { font-weight: 800; }
.ligne__fin { display: flex; align-items: center; gap: 6px; color: var(--encre-douce); }

/* Bandeau de confirmation flottant, au-dessus de la barre du bas */
.toast--flottant {
  position: fixed;
  left: 50%;
  bottom: 92px;
  z-index: 9;
  box-sizing: border-box;
  width: min(398px, calc(100% - 32px));
  transform: translateX(-50%);
}

/* Feuille de choix en surimpression de l'écran */
.voile--plein { position: fixed; inset: 0; z-index: 8; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; }
.voile--plein .feuille { box-sizing: border-box; width: 100%; max-width: 430px; max-height: 92vh; overflow-y: auto; }

/* QR code du code d'accès : sombre sur blanc, une marge blanche autour, pour que tout téléphone le lise */
.qr-cadre { display: flex; justify-content: center; }
.qr { width: min(240px, 70vw); height: auto; border-radius: var(--r-note); }
.qr__fond { fill: var(--surface); }
.qr__point { fill: var(--encre); }

/* Le logo du club dans le bandeau */
.bandeau__logo { width: 44px; height: 44px; object-fit: contain; flex: none; }

/* Réglages du club : aperçu du logo sur blanc et sur la couleur principale, nuancier, pipette, fichier à choisir */
.apercu-logo { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.apercu-logo div { display: flex; align-items: center; justify-content: center; min-height: 96px; border-radius: var(--r-tuile); }
.apercu-logo div:first-child { background: var(--surface); box-shadow: inset 0 0 0 1px var(--ligne); }
.apercu-logo div:last-child { background: var(--club-principal); }
.apercu-logo img { width: 72px; height: 72px; object-fit: contain; }
.apercu-icone { flex: none; width: 56px; height: 56px; border-radius: 13px; border: 1px solid var(--ligne); }
.nuancier { display: flex; flex-wrap: wrap; gap: 10px; }
.nuancier__case { display: flex; align-items: center; gap: 8px; font-size: var(--t-petit); }
.nuancier__couleur { width: 36px; height: 36px; border-radius: var(--r-note); box-shadow: inset 0 0 0 1px var(--ligne); }
.pipette { display: block; width: 100%; max-width: 260px; height: auto; margin: 0 auto; border-radius: var(--r-tuile); background: var(--surface); box-shadow: inset 0 0 0 1px var(--ligne); cursor: crosshair; touch-action: manipulation; }
.fichier { position: relative; overflow: hidden; }
.fichier input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
input[type="color"] { width: 56px; height: 48px; padding: 2px; border: 2px solid var(--controle); border-radius: var(--r-note); background: var(--surface); cursor: pointer; }

/* Grilles : un critère dépliable avec ses 4 niveaux */
.critere-grille { border-top: 1px solid var(--ligne); }
.critere-grille summary { display: flex; align-items: center; justify-content: space-between; min-height: 52px; font-weight: 800; cursor: pointer; list-style: none; }
.critere-grille summary::-webkit-details-marker { display: none; }
.critere-grille summary .icone { transition: transform var(--duree-courte) var(--courbe); }
.critere-grille[open] summary .icone { transform: rotate(180deg); }
.critere-grille ol { margin: 0 0 12px; padding-left: 22px; display: flex; flex-direction: column; gap: 4px; font-size: var(--t-petit); color: var(--encre-2); }

/* Tableau compact (objectifs de jongles par catégorie) */
.tableau { width: 100%; border-collapse: collapse; font-size: var(--t-petit); font-variant-numeric: tabular-nums; }
.tableau th { padding: 0 0 8px; text-align: left; font-size: var(--t-mini); font-weight: 700; color: var(--encre-douce); }
.tableau td { padding: 6px 0; border-top: 1px solid var(--ligne); vertical-align: middle; }
.tableau td + td, .tableau th + th { padding-left: 8px; }
.tableau .champ__saisie { min-width: 0; width: 100%; box-sizing: border-box; padding-inline: 8px; }

/* Saisie : barre d'actions en bas d'écran, à portée de pouce */
.actions-bas {
  position: sticky;
  bottom: 0;
  z-index: 3;
  display: flex;
  gap: 10px;
  padding: 12px var(--e-4) calc(14px + env(safe-area-inset-bottom, 0px));
  background: var(--fond);
  box-shadow: 0 -1px 0 var(--ligne);
}
.actions-bas .bouton--principal { flex: 1; }
.absent-note { margin: 0; padding: 14px; border-radius: var(--r-bouton); background: var(--champ); color: var(--encre-2); font-size: var(--t-petit); text-align: center; }
.bandeau__extra { position: relative; display: flex; align-items: center; gap: 12px; }
.bandeau__compteur { font-size: 1.375rem; color: var(--club-accent-lisible); }

/* Petites barres de valeur (part du temps de jeu) */
.barre-note { position: relative; height: 6px; border-radius: 3px; background: var(--piste); min-width: 60px; }
.barre-note span { display: block; height: 100%; width: var(--valeur); border-radius: 3px; background: var(--club-principal); }

/* Accueil du coach : une tâche par ligne, avec son icône */
.tache__icone { width: 40px; height: 40px; flex: none; display: flex; align-items: center; justify-content: center; border-radius: var(--r-note); background: var(--club-principal-doux); color: var(--club-principal); }
.tache__icone .icone { width: 22px; height: 22px; }

/* Test de jongles : trois nombres par joueur sur une ligne */
.jongles-ligne { display: grid; grid-template-columns: minmax(0, 1fr) repeat(3, 64px); gap: 8px; align-items: center; padding: 8px 0; }
.jongles-ligne + .jongles-ligne { border-top: 1px solid var(--ligne); }
.jongles-ligne .champ__saisie { width: 100%; box-sizing: border-box; padding-inline: 6px; text-align: center; }
.jongles-entete { font-size: var(--t-mini); font-weight: 700; color: var(--encre-douce); text-align: center; }

/* Fiche de transmission : les deux pages A4 de style/pdf.css, réduites à la largeur de l'écran (vues-fiche.js) */
.fiche-zone { min-width: 0; }
.fiche-zone .fiche-pages { align-items: flex-start; }

/* À l'impression (export PDF de la fiche), seules les deux pages A4 restent, à leur taille réelle */
@media print {
  html, body, .appli, .ecran { background: none !important; }
  .appli { display: block; padding: 0; min-height: 0; }
  .ecran { display: block; max-width: none; min-height: 0; border-radius: 0; box-shadow: none; overflow: visible; }
  .ecran__contenu { display: block; padding: 0; }
  .ecran > :not(.ecran__contenu), .ecran__contenu > :not(.fiche-zone), .toast, .voile { display: none !important; }
}

/* Une ligne de liste dont la partie principale est un lien, avec un bouton à part (« Gérer ») */
.ligne__principal { flex: 1; min-width: 0; display: flex; align-items: center; gap: var(--e-3); min-height: 56px; color: inherit; text-decoration: none; }
.ligne__principal:focus-visible { outline: 3px solid var(--club-principal); outline-offset: 2px; border-radius: var(--r-note); }

/* Les badges du joueur : objectifs confirmés et paliers de jongles */
.badges { display: flex; flex-wrap: wrap; gap: 18px 12px; align-items: flex-start; }

/* Un message qui porte un bouton */
.message__corps .bouton { margin-top: var(--e-2); align-self: flex-start; }
.message__corps { display: flex; flex-direction: column; }