/* L'ecran « Custom My Player » (maquette de Frederic du 19/09). A gauche le
   joueur en 3D sur toute la hauteur ; a droite le titre, les six onglets, le
   panneau (grille, couleur, style) et « Valider mon style ».

   Comme l'ecran des raquettes, tout se mesure en hauteur d'ecran (vh) : la
   page garde ses proportions de l'ordinateur au telephone couche. Le kit
   ne livrait que des decoupes opaques de la maquette (fond compris) : tout
   est redessine ici, textes traduits. */

#tenue.screen { display: block; padding: 0; overflow: hidden; }
#tenue.screen.hidden { display: none; }

.tn-page {
  position: absolute; inset: 0;
  background: url('../assets/ui/raquettes/fond.webp') center / cover no-repeat, #081640;
  font-family: 'Montserrat', var(--font);
  color: #fff;
  --lettrage: 'Lilita One', 'Arial Rounded MT Bold', 'Segoe UI Black', var(--font);
  --bleu: linear-gradient(180deg, rgba(28, 86, 196, 0.95), rgba(10, 36, 110, 0.95));
  --or: linear-gradient(180deg, #ffe97a 0%, #ffc61f 55%, #f39c00 100%);
  --bord: rgba(110, 215, 255, 0.75);
}

/* ---- Colonne de gauche ---- */
.tn-retour {
  position: absolute; top: 3vh; left: 2vw; z-index: 3;
  padding: 1.2vh 2.4vw; border-radius: 99vh;
  background: rgba(8, 30, 96, 0.9); color: #cfe3ff;
  border: 0.3vh solid var(--bord);
  font-family: var(--lettrage); font-size: 2.4vh; letter-spacing: 0.04em; text-transform: uppercase; cursor: pointer;
}
.tn-logo { position: absolute; top: 9vh; left: 2vw; height: 17vh; pointer-events: none; }
.tn-photos {
  position: absolute; top: 3vh; left: 13vw; z-index: 3;
  padding: 1.2vh 1.6vw; border-radius: 99vh;
  background: rgba(8, 30, 96, 0.7); color: #cfe3ff; border: 0.25vh solid rgba(110, 215, 255, 0.5);
  font-size: 1.7vh; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; cursor: pointer;
}

.tn-joueur { position: absolute; left: 14vw; top: 4vh; bottom: 3vh; width: 32vw; }
.tn-3d, .tn-portrait {
  position: absolute; left: 0; right: 0; top: 0; bottom: 12vh; width: 100%; height: calc(100% - 12vh);
}
.tn-3d { touch-action: none; cursor: grab; }
.tn-3d:active { cursor: grabbing; }
.tn-portrait { object-fit: contain; object-position: center 30%; }
.tn-3d[hidden], .tn-portrait[hidden] { display: none; }
.tn-choix-joueur {
  position: absolute; left: 0; right: 0; bottom: 5vh;
  display: flex; align-items: center; justify-content: center; gap: 1.2vw;
}
.tn-nom {
  min-width: 14vw; text-align: center;
  font-family: var(--lettrage); font-size: 3.6vh; text-transform: uppercase; text-shadow: 0 0.4vh 0 #0a1a4a;
}
.tn-fleche {
  width: 6vh; height: 6vh; border-radius: 50%;
  border: 0.3vh solid var(--bord); background: rgba(8, 30, 96, 0.9); color: #fff;
  font-size: 4vh; line-height: 1; cursor: pointer;
}
.tn-tourner {
  position: absolute; left: -11vw; top: 52vh;
  display: flex; flex-direction: column; align-items: center; gap: 0.6vh;
  width: 10vw; padding: 1vh 0; border: 0; background: none; color: #fff; cursor: pointer;
  font-size: 1.7vh; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; text-align: center;
}
.tn-tourner svg { width: 6vh; height: 3vh; }

.tn-aleatoire {
  position: absolute; left: 2vw; bottom: 6vh;
  display: flex; align-items: center; gap: 1vw;
  padding: 1.3vh 2.2vw; border-radius: 99vh;
  border: 0.3vh solid var(--bord); background: rgba(8, 30, 96, 0.92); color: #fff;
  font-size: 2.1vh; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; cursor: pointer;
}
.tn-aleatoire svg { width: 3.4vh; height: 3.4vh; color: #fff; }

/* ---- Colonne de droite ---- */
.tn-titre {
  position: absolute; top: 3vh; right: 3vw; width: 50vw; margin: 0;
  display: flex; align-items: center; justify-content: center; gap: 1vw;
  padding: 1.6vh 0; border-radius: 3vh;
  background: rgba(8, 30, 96, 0.72); border: 0.3vh solid rgba(110, 215, 255, 0.45);
  font-family: var(--lettrage); font-weight: 400; font-size: 5.6vh; line-height: 1; font-style: italic;
  letter-spacing: 0.02em; color: #fff; text-shadow: 0 0.5vh 0 #0a1a4a;
}
.tn-titre b {
  font-weight: 400; font-size: 6.6vh; color: #ffc61f;
  text-shadow: 0 0.5vh 0 #0a1a4a, 0 0 1.6vh rgba(255, 198, 31, 0.45);
}
.tn-titre svg { width: 5vh; height: 3.6vh; color: #ffc61f; }

.tn-onglets {
  position: absolute; top: 15.5vh; right: 3vw; width: 50vw;
  display: grid; grid-template-columns: repeat(6, 1fr); gap: 0.7vw;
}
.tn-onglet {
  position: relative;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.6vh;
  height: 11vh; border-radius: 2vh;
  border: 0.3vh solid var(--bord); background: var(--bleu); color: #fff;
  font-size: 1.6vh; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; cursor: pointer;
}
.tn-onglet .tn-icone { width: 5.4vh; height: 4.4vh; }
.tn-onglet.actif { background: var(--or); color: #0f2360; border-color: #fff3b0; box-shadow: 0 0 2.4vh rgba(255, 200, 60, 0.55); }
.tn-onglet.bientot { opacity: 0.8; }
.tn-onglet.bientot::after {
  content: ''; position: absolute; top: 0.6vh; right: 0.6vh; width: 1.2vh; height: 1.2vh; border-radius: 50%;
  background: #8fb2e6;
}
.tn-icone { display: inline-flex; align-items: center; justify-content: center; }
.tn-icone svg { width: 100%; height: 100%; }

.tn-panneau {
  position: absolute; top: 29vh; right: 3vw; width: 50vw; bottom: 17vh;
  padding: 1.8vh 1.6vw; border-radius: 2.4vh;
  border: 0.35vh solid rgba(110, 215, 255, 0.85);
  background: rgba(8, 30, 96, 0.8);
  box-shadow: 0 0 3vh rgba(10, 120, 255, 0.4), inset 0 0 4vh rgba(10, 60, 170, 0.5);
  display: flex; flex-direction: column;
}
.tn-panneau-tete { display: flex; align-items: center; gap: 1vw; margin-bottom: 1.2vh; }
.tn-panneau-tete .tn-icone { width: 4.4vh; height: 3vh; }
.tn-panneau-tete h2 { margin: 0; font-size: 2.4vh; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; }
.tn-compte { margin-left: auto; font-size: 1.9vh; font-weight: 800; color: #cfe3ff; }

.tn-grille { display: grid; grid-template-columns: repeat(6, 1fr); gap: 1vh 0.7vw; }
.tn-grille.tn-acc { grid-template-columns: repeat(3, 1fr); }
.tn-carte {
  position: relative; height: 10vh; border-radius: 1.6vh; padding: 0;
  border: 0.3vh solid rgba(110, 215, 255, 0.4);
  background: linear-gradient(180deg, rgba(40, 80, 170, 0.75), rgba(12, 32, 96, 0.9));
  cursor: pointer; overflow: hidden;
}
.tn-carte img { width: 100%; height: 100%; object-fit: contain; }
.tn-carte.tn-acc { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.6vh; height: 13vh;
  color: #fff; font-size: 1.8vh; font-weight: 800; letter-spacing: 0.05em; text-transform: uppercase; }
.tn-carte.tn-acc .tn-icone { width: 8vh; height: 6vh; }
.tn-carte.tn-acc.active { border-color: #fff; }
.tn-carte.choisie {
  border-color: #ffd23a;
  background: linear-gradient(180deg, rgba(255, 233, 122, 0.95), rgba(243, 156, 0, 0.9));
  box-shadow: 0 0 2vh rgba(255, 200, 60, 0.6);
}
.tn-carte.tn-acc.choisie { color: #0f2360; }
.tn-carte.choisie::after {
  content: ''; position: absolute; top: 0.6vh; right: 0.6vh; width: 2.8vh; height: 2.8vh; border-radius: 50%;
  background: #1f9d45 url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M20 6 9 17l-5-5' fill='none' stroke='white' stroke-width='3.6' stroke-linecap='round' stroke-linejoin='round'/></svg>") center / 70% no-repeat;
  border: 0.25vh solid #fff;
}

.tn-aide { margin: 1vh 0 0; font-size: 1.6vh; color: #9fc4f2; }
.tn-reglages { display: flex; gap: 1vw; margin-top: auto; padding-top: 1.4vh; }
.tn-bloc {
  flex: 1; padding: 1.2vh 1vw; border-radius: 1.8vh;
  border: 0.25vh solid rgba(110, 215, 255, 0.4); background: rgba(6, 20, 62, 0.6);
}
.tn-bloc h3 { margin: 0 0 1vh; font-size: 1.7vh; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: #cfe3ff; }
.tn-couleurs { display: flex; flex-wrap: wrap; gap: 0.7vh 0.6vw; }
.tn-couleur {
  width: 3.6vh; height: 3.6vh; border-radius: 50%; padding: 0; cursor: pointer;
  border: 0.3vh solid rgba(255, 255, 255, 0.35); box-shadow: inset 0 -0.4vh 0.6vh rgba(0, 0, 0, 0.25);
}
.tn-couleur.actif { border-color: #ffd23a; box-shadow: 0 0 0 0.35vh #0a1a4a, 0 0 1.4vh rgba(255, 210, 58, 0.9); }
/* « D'origine » : la couleur livree avec la paire. */
.tn-couleur.origine { background: conic-gradient(#16181d 0 25%, #f4f6fa 0 50%, #1f6fe5 0 75%, #d8222c 0); }
.tn-styles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.5vw; }
.tn-style {
  padding: 1.1vh 0; border-radius: 1.2vh;
  border: 0.25vh solid rgba(110, 215, 255, 0.45); background: rgba(10, 36, 110, 0.9); color: #fff;
  font-size: 1.6vh; font-weight: 800; letter-spacing: 0.05em; text-transform: uppercase; cursor: pointer;
}
.tn-style.actif { background: var(--or); color: #0f2360; border-color: #fff3b0; }
.tn-bientot { flex: 1; display: flex; align-items: center; justify-content: center; text-align: center; }
.tn-bientot p { max-width: 30vw; font-size: 2.4vh; font-weight: 800; color: #cfe3ff; line-height: 1.3; }
#tn-lunettes, #tn-accessoires { display: flex; flex-direction: column; flex: 1; min-height: 0; }
#tn-lunettes[hidden], #tn-accessoires[hidden], .tn-bientot[hidden] { display: none; }

.tn-valider {
  position: absolute; right: 3vw; bottom: 4.5vh; width: 30vw;
  display: flex; align-items: center; justify-content: center; gap: 1.2vw;
  padding: 1.8vh 0; border: 0; border-radius: 99vh;
  background: var(--or); color: #0f2360; box-shadow: 0 1vh 0 #0a1a4a;
  font-family: var(--lettrage); font-size: 3vh; letter-spacing: 0.04em; text-transform: uppercase; cursor: pointer;
}
.tn-valider svg { width: 3.6vh; height: 3.6vh; }
.tn-valider:active { transform: translateY(0.6vh); box-shadow: 0 0.4vh 0 #0a1a4a; }

/* ---- Ecran large mais court (telephone couche) ---- */
@media (min-aspect-ratio: 16/10) {
  .tn-grille { gap: 0.8vh 0.6vw; }
  .tn-carte { height: 9vh; }
}

/* ---- Ecran debout : tout s'empile ---- */
@media (max-aspect-ratio: 1/1) {
  .tn-page { overflow-y: auto; }
  .tn-logo { display: none; }
  .tn-joueur { position: relative; left: auto; top: auto; bottom: auto; width: auto; height: 42vh; margin-top: 8vh; }
  .tn-tourner { display: none; }
  .tn-aleatoire { position: static; margin: 1vh auto 0; }
  .tn-titre { position: static; width: auto; margin: 2vh 3vw 0; font-size: 3.4vh; }
  .tn-titre b { font-size: 4vh; }
  .tn-onglets { position: static; width: auto; margin: 1.5vh 3vw 0; }
  .tn-onglet { height: 8vh; font-size: 1.2vh; }
  .tn-panneau { position: static; width: auto; margin: 1.5vh 3vw 0; min-height: 40vh; }
  .tn-grille { grid-template-columns: repeat(4, 1fr); }
  .tn-reglages { flex-direction: column; }
  .tn-valider { position: static; width: auto; margin: 2vh 3vw 12vh; }
}