/* Pick6 Challenge. Un seul thème en v1 (O9), tout par variables.
   Public : 8 ans, 10 ans, et un grand-père qui lit l'écran de l'autre bout du salon (D26d).

   Refonte du 2026-09-08 (D48). La première version était propre et adulte — Samuel : « je
   trippe pas sur le design, ça manque de vie pour des jeunes ». Cinq leviers, tous ici :
   1. une typo de sport (Big Shoulders, auto-hébergée) pour les titres et les CHIFFRES ;
   2. les couleurs de TON équipe deviennent celles de l'app, du bandeau jusqu'aux accents ;
   3. les joueurs choisis sont traités comme des cartes de collection, pas des cellules ;
   4. du relief : dégradés, ombres portées, lignes de terrain en fond ;
   5. du mouvement : ça rebondit quand tu choisis, les points montent, ça fête à 6 sur 6. */

/* Anton, la police des graphiques sportifs. Big Shoulders était le premier choix ; son A
   majuscule porte une barre très haute qui surprend l'oeil, et Samuel l'a relevé tout de
   suite. Anton a des formes conventionnelles et le même poids de titre.
   La plage 100-900 est déclarée sur l'unique graisse du fichier pour que le navigateur
   n'invente PAS un faux gras par-dessus une police déjà très noire. */
@font-face {
  font-family: 'Anton';
  src: url('/static/polices/anton.woff2') format('woff2');
  font-weight: 100 900;
  font-display: swap;
}

:root {
  --fond: #eef0f4;
  --papier: #ffffff;
  --encre: #10131a;
  --encre-doux: #5c6270;
  --trait: #dde1e8;
  --accent: #d8232a;
  --accent-doux: #fdecec;
  --or: #f5b301;
  --vert: #12a150;
  /* L'équipe de la personne connectée repeint l'app. Valeur de repli avant la connexion. */
  --equipe: #10131a;
  --equipe-encre: #ffffff;
  --ombre: 0 1px 2px rgba(16,19,26,.06), 0 10px 28px rgba(16,19,26,.10);
  --ombre-carte: 0 2px 4px rgba(16,19,26,.08), 0 14px 34px rgba(16,19,26,.16);
  --rayon: 18px;
  --touche: 44px;
  --titre: 'Anton', 'Arial Narrow', system-ui, sans-serif;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }

html, body {
  margin: 0; padding: 0; color: var(--encre);
  font: 16px/1.45 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  -webkit-text-size-adjust: 100%;
  /* Les lignes de terrain, en fond, très pâles : de la texture, jamais du bruit. */
  background:
    repeating-linear-gradient(90deg, rgba(16,19,26,.035) 0 1px, transparent 1px 68px),
    linear-gradient(180deg, #f4f6f9, var(--fond));
  background-attachment: fixed;
  min-height: 100dvh;
}

/* Règle iOS (D17) : sous 16 px, Safari zoome sur un champ et casse la mise en page. */
input, select, textarea, button { font-size: 16px; font-family: inherit; }
button { cursor: pointer; border: 0; background: none; color: inherit; }
h1, h2, h3 { margin: 0; line-height: 1.05; }

.titre-sport {
  font-family: var(--titre); font-weight: 900; text-transform: uppercase;
  letter-spacing: .015em; line-height: .95;
}

/* ------------------------------------------------------------------ porte */

.ecran.plein { min-height: 100dvh; display: grid; place-items: center; padding: 28px 16px; }
.porte-boite { width: 100%; max-width: 470px; }

.logo-titre {
  font-family: var(--titre); font-weight: 900; text-transform: uppercase;
  font-size: clamp(56px, 16vw, 92px); text-align: center; line-height: .9;
  letter-spacing: -.005em; margin-bottom: 10px;
  background: linear-gradient(180deg, #23283a, #0b0d13);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.logo-titre span {
  -webkit-text-fill-color: var(--accent); color: var(--accent);
}
.sous {
  text-align: center; color: var(--encre-doux); margin: 0 0 26px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .1em; font-size: 13px;
}

.carte {
  background: var(--papier); border: 1px solid var(--trait); border-radius: var(--rayon);
  padding: 24px; box-shadow: var(--ombre-carte);
}
.carte h2 {
  font-family: var(--titre); font-weight: 900; text-transform: uppercase;
  font-size: 30px; margin-bottom: 16px;
}

label { display: block; font-weight: 800; font-size: 14px; margin: 16px 0 6px;
        text-transform: uppercase; letter-spacing: .04em; color: var(--encre-doux); }
input {
  width: 100%; min-height: 50px; padding: 10px 14px; font-weight: 600;
  border: 2px solid var(--trait); border-radius: 13px; background: #fff; color: var(--encre);
}
input:focus { outline: 3px solid var(--accent-doux); border-color: var(--accent); }
input.code { text-transform: uppercase; letter-spacing: .2em; font-weight: 800; }

.aide { color: var(--encre-doux); font-size: 14px; margin: 6px 0 0; }
.gros-aide { font-size: 16px; font-weight: 700; color: var(--encre); margin-bottom: 14px; }

button.gros {
  width: 100%; min-height: 56px; margin-top: 20px; border-radius: 15px;
  background: linear-gradient(180deg, #e8353c, var(--accent));
  color: #fff; font-family: var(--titre); font-weight: 900; text-transform: uppercase;
  font-size: 24px; letter-spacing: .03em;
  box-shadow: 0 4px 0 #9c161c, 0 10px 20px rgba(216,35,42,.3);
  transition: transform .08s ease, box-shadow .08s ease, filter .15s ease;
}
button.gros:hover { filter: brightness(1.05); }
button.gros:active { transform: translateY(3px); box-shadow: 0 1px 0 #9c161c, 0 4px 10px rgba(216,35,42,.3); }
button.gros[disabled] {
  background: var(--trait); color: #98a0ae; box-shadow: none; cursor: default;
}

button.lien {
  display: block; width: 100%; margin-top: 14px; padding: 10px; min-height: var(--touche);
  color: var(--encre-doux); font-weight: 700; text-decoration: underline; font-size: 15px;
}
.rangee { display: flex; gap: 10px; align-items: center; }
.rangee button.gros { flex: 1; }
.rangee button.lien { width: auto; margin-top: 20px; }

.mot { min-height: 20px; margin: 12px 0 0; font-size: 15px; font-weight: 700; color: var(--accent); }

.pas { display: flex; gap: 6px; list-style: none; padding: 0; margin: 0 0 20px; }
.pas li {
  flex: 1; text-align: center; font-size: 12px; font-weight: 800; color: var(--encre-doux);
  padding-top: 9px; border-top: 5px solid var(--trait); border-radius: 3px;
  text-transform: uppercase; letter-spacing: .06em;
}
.pas li.on { color: var(--accent); border-top-color: var(--accent); }

.grille-equipes { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
@media (min-width: 520px) { .grille-equipes { grid-template-columns: repeat(6, 1fr); } }
.grille-equipes button {
  aspect-ratio: 1; border-radius: 14px; border: 2px solid var(--trait); background: #fff;
  display: grid; place-items: center; padding: 7px;
  transition: transform .12s cubic-bezier(.2,.9,.3,1.4), border-color .12s, box-shadow .12s;
}
.grille-equipes button:hover { transform: translateY(-3px); box-shadow: var(--ombre); }
.grille-equipes button img { width: 100%; height: 100%; object-fit: contain; }
.grille-equipes button[aria-pressed="true"] {
  border-color: var(--accent); border-width: 3px; transform: scale(1.1);
  box-shadow: 0 8px 18px rgba(216,35,42,.28);
}

/* ------------------------------------------------------------------ l'app */

.tete {
  position: sticky; top: 0; z-index: 5; display: flex; align-items: center;
  justify-content: space-between; gap: 12px; padding: 12px 18px;
  /* Le bandeau prend les couleurs de TON équipe : c'est le premier signe que l'app est à toi. */
  background: linear-gradient(105deg, var(--equipe), color-mix(in srgb, var(--equipe) 72%, #000));
  color: var(--equipe-encre);
  box-shadow: 0 3px 0 rgba(0,0,0,.16), 0 10px 24px rgba(16,19,26,.18);
}
.tete-gauche { display: flex; align-items: center; gap: 10px; min-width: 0; }
.logo-mini {
  font-family: var(--titre); font-weight: 900; text-transform: uppercase;
  font-size: 26px; letter-spacing: .02em; color: inherit;
}
.logo-mini span { color: #ffd23f; }
.chip-ligue {
  background: rgba(255,255,255,.18); color: inherit; border-radius: 999px;
  padding: 6px 14px; font-weight: 800; font-size: 14px; min-height: 34px;
  max-width: 34vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.chip-ligue:hover { background: rgba(255,255,255,.3); }
.liste-ligues { display: grid; gap: 8px; margin-bottom: 8px; }
.ligne-ligue {
  display: flex; align-items: center; gap: 12px; padding: 13px 15px; border-radius: 14px;
  border: 2px solid var(--trait); background: var(--papier); text-align: left; width: 100%;
  font-weight: 800; font-size: 17px; min-height: 58px;
}
.ligne-ligue[aria-pressed="true"] {
  border-color: var(--equipe); background: color-mix(in srgb, var(--equipe) 8%, #fff);
}
.ligne-ligue small { display: block; font-weight: 600; color: var(--encre-doux); font-size: 13px; }
.ligne-ligue .coche { margin-left: auto; font-size: 20px; color: var(--vert); }
.mini-bouton {
  margin-left: auto; background: var(--fond); border: 2px solid var(--trait);
  border-radius: 999px; padding: 8px 14px; font-weight: 800; font-size: 14px; min-height: 40px;
}
.mini-bouton:hover { border-color: var(--accent); color: var(--accent); }
.actions-membre { margin-left: auto; display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.actions-membre .mini-bouton { margin-left: 0; }
.mini-bouton.retirer[data-sur="1"] { border-color: var(--accent); background: var(--accent); color: #fff; }
.nip-neuf {
  margin-left: auto; font-family: var(--titre); font-weight: 900; font-size: 30px;
  letter-spacing: .12em; color: var(--vert);
}

.bloc-code {
  background: var(--fond); border-radius: 16px; padding: 14px 16px; margin: 16px 0 6px;
}
.bloc-code label { margin-top: 0; }
.note-partage {
  background: color-mix(in srgb, var(--or) 16%, #fff); border-left: 5px solid var(--or);
  border-radius: 10px; padding: 11px 14px; font-weight: 700; color: var(--encre);
  margin: 0 0 6px;
}
.ligne-ligue .monde { margin-left: auto; font-weight: 700; color: var(--encre-doux); font-size: 14px; }
.liste-invitations { display: grid; gap: 6px; margin-top: 12px; }
.invitation {
  display: flex; align-items: center; gap: 10px; background: var(--papier);
  border: 2px solid var(--trait); border-radius: 12px; padding: 10px 13px; font-weight: 800;
}
.invitation code {
  font-family: var(--titre); font-weight: 900; font-size: 26px; letter-spacing: .06em;
  color: var(--accent);
}
.invitation .qui { color: var(--encre-doux); font-weight: 700; font-size: 14px; }
.invitation .actions { margin-left: auto; display: flex; gap: 6px; }
.invitation .actions button {
  width: 38px; height: 38px; border-radius: 999px; background: var(--fond); font-size: 15px;
}
.rangee-code { display: flex; align-items: center; gap: 12px; }
.rangee-code input { flex: 1; min-width: 0; }
.rangee-code b {
  font-family: var(--titre); font-weight: 900; font-size: 38px; letter-spacing: .1em;
}

.moi {
  display: flex; align-items: center; gap: 9px; font-weight: 800; color: inherit;
  min-width: 0; max-width: 42vw; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
  background: rgba(255,255,255,.16); border-radius: 999px; padding: 5px 14px 5px 5px;
  min-height: var(--touche);
}
.moi:hover { background: rgba(255,255,255,.26); }

.onglets {
  display: flex; gap: 6px; padding: 12px 16px 0; max-width: 1140px; margin: 0 auto;
}
.onglets button {
  flex: 1; min-width: 0; min-height: 48px; padding: 10px 6px; border-radius: 13px 13px 0 0;
  font-family: var(--titre); font-weight: 800; text-transform: uppercase; font-size: 19px;
  letter-spacing: .01em; color: var(--encre-doux); border-bottom: 5px solid transparent;
}
.onglets button.on {
  color: var(--encre); border-bottom-color: var(--equipe); background: rgba(255,255,255,.7);
}

main { max-width: 1140px; margin: 0 auto; padding: 20px 16px 70px; }
.titre-section {
  font-family: var(--titre); font-weight: 900; text-transform: uppercase; font-size: 27px;
  letter-spacing: .01em; margin: 34px 0 14px; display: flex; align-items: baseline; gap: 12px;
}
.titre-section::before {
  content: ''; width: 8px; height: 26px; background: var(--equipe); border-radius: 3px;
  transform: skewX(-12deg);
}
.titre-section:first-of-type { margin-top: 14px; }
.compte {
  font-family: -apple-system, system-ui, sans-serif; font-size: 15px; font-weight: 700;
  color: var(--encre-doux); text-transform: none; letter-spacing: 0;
}

.rebours {
  background: linear-gradient(100deg, var(--papier), #fbfcfe);
  border: 1px solid var(--trait); border-left: 7px solid var(--or);
  border-radius: 14px; padding: 14px 18px; font-weight: 700; box-shadow: var(--ombre);
}
.rebours.ferme { border-left-color: var(--encre-doux); color: var(--encre-doux); }

/* ------------------------------------------- les six cases, en cartes de collection */

.pige { display: grid; grid-template-columns: repeat(6, 1fr); gap: 12px; }
@media (max-width: 1000px) { .pige { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 620px) { .pige { grid-template-columns: repeat(2, 1fr); } }

.case {
  position: relative; overflow: hidden; border-radius: var(--rayon);
  background: var(--papier); border: 2px dashed var(--trait);
  padding: 0 12px 14px; min-height: 232px;
  display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center;
  transition: transform .14s cubic-bezier(.2,.9,.3,1.4), box-shadow .14s, border-color .14s;
}
.case:hover { transform: translateY(-4px); border-color: var(--encre-doux); box-shadow: var(--ombre); }
.case:active { transform: translateY(0); }
.case.pleine {
  border-style: solid; border-color: transparent; box-shadow: var(--ombre-carte);
  background: var(--papier);
}
/* Le bandeau prend la couleur de l'équipe DU JOUEUR, incliné comme sur une carte de
   collection. Un dégradé diagonal sur tout le fond ressortait en bas de la carte ;
   un bandeau détouré, lui, s'arrête où il doit. */
.case.pleine::before {
  content: ''; position: absolute; left: -12%; right: -12%; top: -22px; height: 152px;
  background: linear-gradient(150deg, var(--eq, #33405a), color-mix(in srgb, var(--eq, #33405a) 62%, #000));
  transform: rotate(-4deg); transform-origin: top left;
}
.case > * { position: relative; z-index: 1; }
.case .poste {
  align-self: stretch; margin: 0 -12px; padding: 9px 0 6px;
  font-family: var(--titre); font-weight: 900; font-size: 15px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--encre-doux); background: rgba(16,19,26,.05);
}
.case.pleine .poste { color: rgba(255,255,255,.95); background: transparent; }
.case .photo, .case .initiales {
  width: 96px; height: 96px; border-radius: 999px; object-fit: cover; margin-top: 6px;
  border: 4px solid rgba(255,255,255,.9); background: #dfe3ea;
  box-shadow: 0 6px 16px rgba(16,19,26,.22);
}
.case .initiales { display: grid; place-items: center; font-weight: 900; font-size: 28px; color: #fff; }
.case .nom {
  font-family: var(--titre); font-weight: 800; font-size: 19px; line-height: 1.02;
  text-transform: uppercase; margin-top: 4px;
}
.case .eq, .case .cadenas { font-size: 12px; color: var(--encre-doux); font-weight: 800; letter-spacing: .05em; }
.case .vide { color: var(--encre-doux); font-weight: 800; font-size: 15px; }
.case .plus {
  width: 60px; height: 60px; margin: 30px 0 6px; border-radius: 999px;
  display: grid; place-items: center; font-size: 34px; line-height: 1;
  color: #fff; background: var(--equipe); box-shadow: 0 6px 16px rgba(16,19,26,.22);
}
.case.verrouille { opacity: .9; cursor: default; }
.case.verrouille:hover { transform: none; box-shadow: var(--ombre-carte); }
/* Quand un choix se pose, la carte rebondit : le geste a une réponse visible (D26). */
@keyframes atterrit {
  0% { transform: scale(.82) rotate(-3deg); opacity: 0; }
  60% { transform: scale(1.05) rotate(1deg); opacity: 1; }
  100% { transform: scale(1) rotate(0); }
}
.case.neuf { animation: atterrit .42s cubic-bezier(.2,.9,.3,1.3); }

/* ------------------------------------------- la grille de pronostics */

.grille-matchs { display: grid; gap: 10px; }
@media (min-width: 900px) { .grille-matchs { grid-template-columns: 1fr 1fr; } }
.match {
  background: var(--papier); border: 1px solid var(--trait); border-radius: 16px;
  padding: 9px; display: grid; gap: 6px;
  /* minmax(0,1fr) et pas 1fr : une colonne « 1fr » ne descend jamais sous la largeur de
     son contenu, donc une rangée de match débordait de l'écran d'un téléphone. */
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center; box-shadow: var(--ombre); transition: box-shadow .15s;
}
.match.repondu { border-color: color-mix(in srgb, var(--vert) 45%, var(--trait)); }
.match.verrouille { opacity: .74; background: #f7f8fa; box-shadow: none; }
.match.verrouille .cote, .match.verrouille .nulle { cursor: default; }
.cote {
  display: flex; align-items: center; gap: 10px; min-height: 60px; padding: 6px 10px;
  min-width: 0;
  border-radius: 13px; border: 2px solid transparent; font-weight: 800; font-size: 16px;
  transition: background .14s, border-color .14s, transform .1s;
}
.cote:hover { background: var(--fond); }
.match:not(.verrouille) .cote:active { transform: scale(.97); }
.cote img { width: 40px; height: 40px; object-fit: contain; flex: none; }
.cote span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cote.droite { flex-direction: row-reverse; text-align: right; }
.cote[aria-pressed="true"] {
  border-color: var(--vert); background: linear-gradient(180deg, #f2fbf5, #e6f7ec);
  box-shadow: inset 0 0 0 1px rgba(18,161,80,.25);
}
.milieu { display: grid; gap: 4px; justify-items: center; min-width: 68px; }
.milieu .h {
  font-size: 11px; color: var(--encre-doux); font-weight: 800; white-space: nowrap;
  text-transform: uppercase; letter-spacing: .06em;
}
.nulle {
  font-size: 11px; font-weight: 900; padding: 5px 10px; border-radius: 999px;
  border: 2px solid var(--trait); color: var(--encre-doux); min-height: 30px;
  text-transform: uppercase; letter-spacing: .05em;
}
.nulle[aria-pressed="true"] { border-color: var(--or); background: #fff6da; color: #7a5600; }
.score { font-family: var(--titre); font-weight: 900; font-size: 26px; }

/* ------------------------------------------- le tableau de la semaine */

.moi-grand {
  position: relative; overflow: hidden; border-radius: 24px; padding: 22px;
  margin-bottom: 16px; color: #fff;
  background: linear-gradient(120deg, var(--equipe), color-mix(in srgb, var(--equipe) 60%, #000));
  box-shadow: var(--ombre-carte);
}
.moi-grand::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: repeating-linear-gradient(100deg, rgba(255,255,255,.07) 0 2px, transparent 2px 46px);
}
.moi-grand .haut { display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.moi-grand .gros-total {
  font-family: var(--titre); font-weight: 900; font-size: clamp(58px, 14vw, 92px);
  line-height: .84; letter-spacing: -.01em; text-shadow: 0 4px 0 rgba(0,0,0,.18);
}
.moi-grand .rang-mot {
  font-weight: 800; text-transform: uppercase; letter-spacing: .09em; font-size: 13px;
  color: rgba(255,255,255,.82);
}
.paliers {
  margin-top: 8px; font-weight: 800; font-size: 14px; color: #fff;
  background: rgba(255,255,255,.16); border-radius: 999px; padding: 6px 14px;
  display: inline-block;
}

.mini-pige { display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; margin-top: 18px; position: relative; }
@media (max-width: 700px) { .mini-pige { grid-template-columns: repeat(3, 1fr); } }
.mini {
  display: grid; justify-items: center; gap: 5px; border-radius: 14px; padding: 11px 6px;
  text-align: center; background: rgba(255,255,255,.14);
}
.mini img, .mini .initiales {
  width: 48px; height: 48px; border-radius: 999px; object-fit: cover;
  border: 2px solid rgba(255,255,255,.6); background: #dfe3ea;
}
.mini .initiales { display: grid; place-items: center; font-size: 15px; font-weight: 900; color: #fff; }
.initiales.vide-mini { background: #c9ccd3; }
.mini .n { font-size: 11px; font-weight: 800; line-height: 1.15; color: rgba(255,255,255,.9); }
.mini .p { font-family: var(--titre); font-weight: 900; font-size: 24px; }

.ligne-participant {
  display: flex; align-items: center; gap: 12px; background: var(--papier);
  border: 1px solid var(--trait); border-radius: 14px; padding: 10px 14px; margin-bottom: 7px;
  box-shadow: var(--ombre);
}
.ligne-participant.moi { border-color: var(--equipe); border-width: 2px; }
.ligne-participant .qui { flex: 1; font-weight: 800; min-width: 0; font-size: 17px; }
.ligne-participant .qui small { display: block; font-weight: 600; color: var(--encre-doux); font-size: 13px; }
.ligne-participant .tot { font-family: var(--titre); font-weight: 900; font-size: 30px; }
.rang-bulle {
  width: 34px; height: 34px; border-radius: 999px; display: grid; place-items: center;
  background: var(--fond); font-family: var(--titre); font-weight: 900; font-size: 19px; flex: none;
}
.rang-bulle.or { background: linear-gradient(160deg, #ffd75e, var(--or)); color: #4a3400; }
.rang-bulle.argent { background: linear-gradient(160deg, #eef1f5, #c7cdd7); }
.rang-bulle.bronze { background: linear-gradient(160deg, #f0cba6, #d69a63); }

/* L'écusson : le logo de l'équipe préférée tient lieu d'avatar (D45). */
.ecusson {
  width: 42px; height: 42px; flex: none; display: grid; place-items: center;
  background: var(--papier); border: 1px solid var(--trait); border-radius: 999px; padding: 4px;
}
.ecusson img { width: 100%; height: 100%; object-fit: contain; }
.ecusson.vide { font-weight: 900; font-size: 13px; color: var(--encre-doux); padding: 0; }
.ecusson.grand { width: 74px; height: 74px; padding: 9px; background: rgba(255,255,255,.94); border: 0; }
.moi .ecusson { width: 34px; height: 34px; padding: 3px; border: 0; }

.vide-doux {
  background: var(--papier); border: 2px dashed var(--trait); border-radius: var(--rayon);
  padding: 34px 22px; text-align: center; color: var(--encre-doux); font-weight: 700;
}

/* ------------------------------------------- tiroir de choix */

.tiroir { position: fixed; inset: 0; z-index: 20; background: rgba(10,12,18,.55); display: grid; }
.tiroir-boite {
  background: var(--papier); width: 100%; max-width: 580px; margin: auto auto 0; padding: 18px;
  border-radius: 26px 26px 0 0; max-height: 90dvh; display: flex; flex-direction: column; gap: 12px;
}
@media (min-width: 700px) { .tiroir-boite { margin: auto; border-radius: 26px; max-height: 84dvh; } }
.tiroir-tete { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.tiroir-tete h2 {
  font-family: var(--titre); font-weight: 900; text-transform: uppercase; font-size: 30px;
}
.rond {
  width: var(--touche); height: var(--touche); border-radius: 999px; background: var(--fond);
  font-size: 18px; font-weight: 800; display: grid; place-items: center;
}
.tiroir-tete, #tiroir-q, .bande-logos { flex: none; }
.bande-logos {
  display: flex; gap: 7px; overflow-x: auto; padding: 4px 0 10px; scrollbar-width: thin;
  border-bottom: 1px solid var(--trait); min-height: 64px; align-items: center;
}
.logo-filtre {
  flex: none; width: 50px; height: 50px; border-radius: 13px; border: 2px solid var(--trait);
  background: #fff; display: grid; place-items: center; padding: 5px; transition: transform .12s;
}
.logo-filtre:hover { transform: translateY(-2px); }
.logo-filtre img { width: 100%; height: 100%; object-fit: contain; }
.logo-filtre.tout {
  width: auto; padding: 0 14px; font-family: var(--titre); font-weight: 900; font-size: 17px;
  text-transform: uppercase;
}
.logo-filtre[aria-pressed="true"] {
  border-color: var(--equipe); border-width: 3px;
  background: color-mix(in srgb, var(--equipe) 10%, #fff);
}
.profil-corps { overflow-y: auto; }

.liste-joueurs { overflow-y: auto; display: grid; gap: 6px; -webkit-overflow-scrolling: touch; }
.joueur {
  display: flex; align-items: center; gap: 13px; padding: 8px 10px; border-radius: 14px;
  border: 2px solid transparent; text-align: left; min-height: 66px;
}
.joueur:hover { background: var(--fond); }
.joueur[aria-pressed="true"] { border-color: var(--accent); background: var(--accent-doux); }
.joueur[disabled] { opacity: .42; cursor: not-allowed; }
.joueur img, .joueur .initiales {
  width: 52px; height: 52px; border-radius: 999px; object-fit: cover; flex: none;
  background: #dfe3ea; border: 2px solid var(--trait);
}
.joueur .initiales { display: grid; place-items: center; font-weight: 900; color: #fff; }
.joueur .info { flex: 1; min-width: 0; }
.joueur .info b { display: block; font-family: var(--titre); font-weight: 800; font-size: 21px; text-transform: uppercase; }
.joueur .info small { color: var(--encre-doux); font-weight: 800; letter-spacing: .04em; }
.joueur .pourquoi { display: block; font-size: 12px; font-weight: 800; color: var(--accent); }
.joueur .pts { font-family: var(--titre); font-weight: 900; font-size: 24px; color: var(--encre-doux); }

/* Le gif : plein écran quand les six choix sont faits, bandeau au-dessus du classement.
   Il se ferme au toucher, et tout seul — un enfant ne doit jamais rester bloqué devant. */
.gif-plein {
  position: fixed; inset: 0; z-index: 45; background: rgba(10,12,18,.82);
  display: grid; place-items: center; padding: 20px; animation: parait .2s ease;
}
@keyframes parait { from { opacity: 0; } }
.gif-boite { max-width: 560px; width: 100%; text-align: center; }
.gif-boite img, .gif-boite video {
  width: 100%; max-height: 62dvh; object-fit: contain; border-radius: 20px;
  box-shadow: 0 20px 60px rgba(0,0,0,.5);
}
.gif-mot {
  font-family: var(--titre); font-weight: 900; text-transform: uppercase; color: #fff;
  font-size: clamp(30px, 8vw, 52px); margin: 16px 0 0; text-shadow: 0 4px 0 rgba(0,0,0,.35);
}
.gif-bandeau { margin-bottom: 14px; border-radius: 18px; overflow: hidden; box-shadow: var(--ombre-carte); }
.gif-bandeau img, .gif-bandeau video { width: 100%; max-height: 260px; object-fit: cover; display: block; }

.rotule {
  position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%);
  background: var(--encre); color: #fff; padding: 13px 22px; border-radius: 999px;
  font-weight: 800; z-index: 40; box-shadow: var(--ombre-carte); max-width: 92vw; text-align: center;
  animation: monte .28s cubic-bezier(.2,.9,.3,1.3);
}
@keyframes monte { from { transform: translate(-50%, 18px); opacity: 0; } }
.rotule.mauvais { background: var(--accent); }

/* La fête quand les six cases sont pleines. Rien de bruyant : trois secondes, puis ça part. */
.confettis { position: fixed; inset: 0; pointer-events: none; z-index: 50; overflow: hidden; }
.confettis i {
  position: absolute; top: -14px; width: 10px; height: 16px; border-radius: 2px;
  animation: tombe linear forwards;
}
@keyframes tombe {
  to { transform: translateY(104vh) rotate(720deg); opacity: .9; }
}

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


/* ------------------------------------------- téléphone
   Testé à 390 px de large dans un vrai viewport, pas à l'oeil. */
/* Quand un panneau est ouvert, la page derrière ne bouge plus. Sans ça, sur téléphone,
   un doigt qui glisse dans la liste fait défiler la page en dessous et on perd sa place. */
body.fige { overflow: hidden; }

@media (max-width: 480px) {
  .tete { padding: 10px 12px; }
  /* Cibles tactiles : 40 px minimum, jamais moins, y compris le bouton « nulle »
     et la pastille de ligue — mesurés à 30 et 34 px avant correction. */
  .chip-ligue { min-height: 40px; }
  .nulle { min-height: 40px; padding: 8px 12px; font-size: 12px; }
  .milieu { gap: 6px; }
  .logo-mini { font-size: 26px; }
  .chip-ligue { font-size: 13px; padding: 5px 11px; max-width: 30vw; }
  .onglets { padding: 10px 10px 0; gap: 3px; }
  .onglets button { font-size: 15px; padding: 9px 3px; }
  main { padding: 16px 12px 64px; }
  .titre-section { font-size: 23px; margin: 26px 0 12px; }
  .titre-section::before { height: 22px; width: 7px; }
  .rebours { padding: 12px 14px; font-size: 15px; }
  .case { min-height: 206px; }
  .case .photo, .case .initiales { width: 84px; height: 84px; }
  .case .nom { font-size: 17px; }
  .cote { gap: 7px; padding: 6px 8px; font-size: 15px; }
  .cote img { width: 34px; height: 34px; }
  .milieu { min-width: 58px; }
  .moi-grand { padding: 18px 16px; border-radius: 20px; }
  .ligne-participant { padding: 9px 12px; }
  .ligne-participant .tot { font-size: 26px; }
  .tiroir-boite { padding: 14px 14px calc(14px + env(safe-area-inset-bottom)); }
  .rangee-code b { font-size: 32px; }
}

/* L'encoche et la barre du bas d'un iPhone : le contenu ne se glisse jamais dessous. */
.tete { padding-top: max(12px, env(safe-area-inset-top)); }
main { padding-bottom: calc(70px + env(safe-area-inset-bottom)); }