body {
	background-color: #19001e;
	font-color: #898889;
	background-image: url("/images/fonds/oceans8.png");
	background-size:     cover;
	display: inline-block;
  margin: 0px auto;
  text-align: center;
	max-Width : 100%;
}

@font-face {
    font-family: 'DS-Digital';
    src:url('../font/DS-Digital.ttf.woff') format('woff'),
        url('../font/DS-Digital.ttf.svg#DS-Digital') format('svg'),
        url('../font/DS-Digital.ttf.eot'),
        url('../font/DS-Digital.ttf.eot?#iefix') format('embedded-opentype');
    font-weight: normal;
    font-style: normal;
}

.generalboxes {
  color: #a5cdd7;
  box-shadow: 0px 0px 7px 3px #960101;
	background-color:#11ffee00;
}

.logoTimer {
  max-width:135px;
  padding-top:2px;
}


.blackFormTimer {
  font-size: 13px;
  background-color:#000000;
  color: #FFFFFF;
  font-family: formula1;
}

.blackFormAddGame {
  font-size: 15px;
  background-color:#000000;
  color: #FFFFFF;
  font-family: formula1;
  width:50px;
}

.tableAddGame{
  font-size: 15px;
  font-family: formula1;
  padding : 10px;
}

.smallNumbers {
  font-size: 15px;
  color: #FFFFFF;
  width: 35px;
  height: 35px;
  top: 0px;
  position: absolute;
}



.generalboxes {

  position: absolute;
  box-shadow: none;
  border-width:2px;
  border-left-width: 2px;
  top: 60px;
	height: 300px;
}

.timerForm {
  font-size:20px;
  font-weight: bold;
  width:130px;
  background-color:transparent;
  align:center;
  color:white;
}

.invisibleDiv {
  font-size:0px;
  height:0px;
  width:0px;
}

.compteurJoueurs {
  font-size:20px;
  font-weight:800;
  font-family: formula1;
  padding : 2px;
}

#myChart{
	top: 0px;
  left : 0px;
  position: absolute;
  height : 350px;
  width : 350px;
  z-index:-1;
}

.boxPlayers {
  width: 140px;
  color:white;
  font-family: formula1;
}



.AllGraphs{
	top: 400px;
  left : 400px;
  position: absolute;
  height : 400px;
  width : 700px;
  z-index:-1;
}

.AllGraphsTitle {
  top: 0px;
  left : 0px;
  position: absolute;
  height : 50px;
  color:#a5cdd7;
  font-size:16px;
  font-weight: 800;
  text-align: center;
}

#BGTimerTitle {
  position:absolute;
  top:10px;
  left : 275px;
}

#gameSelectDiv {
  position:absolute;
  top : 13px;
  left : 1130px;
  width : 450px;
  font-size:15px;
  font-weight:800;
  color:#FFFFFF;
  padding-top:0px;
  font-family:formula1;
}

#playersSelectDiv {
  position:absolute;
  top : 5px;
  left : 720px;
  width : 400px;
}

#playersSelectTitle {
  position:absolute;
  top : 8px;
  left : 0px;
  font-size:15px;
  font-weight:800;
  color:#FFFFFF;
  font-family:formula1;
}


#gameDiv {
  position:absolute;
  top:0px;
  left : 0px;
  width : 300px;
}
.gamePicture{
  max-height : 230px;
  max-width : 230px ;
  right:0px;
  position:absolute;
}

#gamePictureDiv {
  position:absolute;
  top:0px;
  left : 0px;
  width : 230px;
}
#gameDetails {
  position:absolute;
  top:25px;
  left : 235px;
  width:100px;
  font-size:13px;
  font-family:formula1;
  text-align: left;
}
#randomizeDiv {
  position:absolute;
  top:260px;
  left : 380px;
  width: 150px;
  height: 70px;
  position:absolute;
  z-index: 100;
}
#randomizeButton {
  font-size:15px;
  font-weight:800;
  width: 150px;
  height:70px;
  position:absolute;
}



.whiteBorder{
  border: solid;
  border-color: #FFFFFF;
  background-color:#11ffee00;
  border-width: 3px;
  border-radius: 10px;
  font-size:15px;
  font-weight:800;
  color:#FFFFFF;
  padding-top:0px;
  font-family:formula1;
  text-align: center;

}

.selectedBorder{
  border-color: #f72e7f;
}

#startGameDiv {
  font-weight:800;
  top:260px;
  left : 200px;
  width: 70px;
  position:absolute;
  z-index: 100;
}

#startButton {
  font-size:25px;
  font-weight:800;
  width: 120px;
  height:80px;
  position:absolute;
  border-width: 5px;
}

#endGameDiv {
  top:160px;
  left : 580px;
  width: 70px;
  position:absolute;
}

#endGameButton {
  font-size:20px;
  font-weight:800;
  width: 90px;
  height:90px;
  position:absolute;
  border-width: 5px;
}

#compteurRandom{
	top: 700px;
  left : 900px;
  font-size:200px;
  font-weight:800;
  color:#fc9900;
  font-family:formula1;
  position:absolute;
}

#ChartTimeLinesDiv{
	top: 460px;
  left : 720px;
  position: absolute;
  height : 520px;
  width : 900px;
  z-index:-1;
}

#ChartTimeLinesCanvas{
  height : 720px;
  width : 900px;
  z-index:-1;
  aspect-ratio: 2 / 1;
}

#ChartSumTimeDiv{
	top: 410px;
  left : 330px;
  position: absolute;
  height : 250px;
  width : 380px;
  z-index:-1;
  border: thin solid #a5cdd7;
  background-color: #00000010;
}
#ChartSumTimeTitle {
  width : 315px;
}
#ChartSumTimeCanvasDiv {
	top: 30px;
  left : 5px;
  position: absolute;
  width : 210px;
  height : 230px;
}
#ChartSumTimeText{
	top: 25px;
  left : 250px;
  position: absolute;
  z-index:-1;
  font-size:25px;
  font-weight: 800;
  border: thin solid #FFFFFF;
  padding : 5px;
}

#ChartRepartTimeDiv{
	top: 410px;
  left : 10px;
  position: absolute;
  height : 250px;
  width : 315px;
  border: thin solid #a5cdd7;
  background-color: #00000010;
}
#ChartRepartTimeTitle {
  width : 315px;
}
#ChartrepartTimeCanvasDiv {
	top: 60px;
  position: absolute;
  width : 310px;
}


#ChartToursJoueursDiv{
	top: 670px;
  left : 10px;
  position: absolute;
  height : 250px;
  width : 315px;
  z-index:-1;
  border: thin solid #a5cdd7;
  background-color: #00000010;
}
#ChartToursJoueursTitle {
  width : 320px;
}
#ChartToursJoueursCanvasDiv {
	top: 60px;
  position: absolute;
  width : 320px;
  
}
#AlertToursJoueursDiv{
	top: 550px;
  left : 1050px;
  position: absolute;
  height : 200px;
  width : 400px;
  z-index:99;
  font-size:80px;
  font-weight:800;
  text-align: center;
	font-family:formula1;
}

#ChartTAllTourTimesDiv{
	top: 670px;
  left : 330px;
  position: absolute;
  height : 250px;
  width : 380px;
  z-index:-1;
  border: thin solid #a5cdd7;
  background-color: #00000010;
}
#ChartAllTourTimesTitle {
  width : 380px;
}
#ChartAllTourTimesCanvasDiv {
  top: 30px;
  position: absolute;
  width : 380px;
}

#showValue{
	top: 600px;
  left : 800px;
  position: absolute;
  height : 500px;
  width : 300px;
  z-index:-1;
  font-size:50px;
  font-weight:800;
  color:white;
}


.invisibleForm {
  width:50px;
  background-color:transparent;
  align:center;
  color:black;
}

.cercle {
  background-color: transparent;
  border: 10px solid transparent;
  border-radius: 50%;
  position: absolute;
}

.compteurs {
  width : 250px;
  font-size:20px;
  font-weight:800;
  text-align: center;
}
.bigCompteurs {
  font-size:25px;
  font-weight:800;
  text-align: center;
}

#compteursGeneraux {
  top : 50px;
  left : 320px;
  width : 270px;
  height : 200px;
  position: absolute;
  text-align: center;
}

#heureActuelleDiv {
  top : 25px;
  position: absolute;
  text-align: center;
}

#dureeTotaleDiv {
  top : 25px;
	left : 130px;
  position: absolute;
  text-align: center;
}
#tempsRestantDiv {
  top : 100px;
	left : 130px;
  text-align: center;
  position: absolute;
}
#heureFinDiv {
  top : 100px;
  text-align: center;
  position: absolute;
}



.smallTimers {
  font-size:30px;
  font-weight:800;
  color:#FFFFFF;
  padding-top:0px;
  font-family:formula1;
}
.tinyTimers {
  font-size:20px;
  font-weight:800;
  color:#FFFFFF;
  padding-top:0px;
  font-family:formula1;
}


.smallTimersDiv {
  font-size:15px;
  width : 150px;
  position: absolute;
}



#tempsMort {
  left : 100px;
  top : 100px;
  font-weight:800;
  position: absolute;
}

#boutonsJoueursDiv {
  width : 600px;
  height : 45px;
  left : 40px;
  top : 250px;
  position: absolute;
  text-align: center;
}
#boutonsJoueursLine {
  position: absolute;
}

.boutonsJoueurs {
  width : 70px;
  height : 70px;
  font-size:59px;
  font-weight: 800;
  box-shadow: none;
  border-width:2px;
  border : solid #FFFFFF;
  border-radius: 70px;
  color : #000000;
  position: absolute;
  text-align: center;
  z-index: 200;
  font-family: formula1;
}

#actionEncours {
  width : 600px;
  height : 45px;
  left : 50px;
  top : 335px;
  position: absolute;
}

#k3input {
  left : 235px;
  top : 0px;
  position: absolute;
}

.actionEncours {
  font-size:40px;
  font-weight:800;
  text-align: center;
  position: absolute;
  font-family: formula1;
}

#joueurEnCours {
  width : 200px;
  left : 0px;
  position: absolute;
}
#joueurEnCoursTour {
  width : 200px;
  left : 200px;
  position: absolute;
}
#joueurEnCoursTemps {
  width : 200px;
  left : 400px;
  position: absolute;
}



.hugeCompteurs {
  font-size:40px;
  font-weight:800;
  text-align: center;
}

.fontFormula1{
  font-family:formula1;
}

.fontDigital{
  font-family: "Digital Numbers";
}


.generalboxes2 {
  position: absolute;
}

.timerNumber {
  style="font-size:50px;
  font-weight:800;
  font-family: "Digital Numbers";
  height:150px;
}



#box0 {
	left: 10px;
	top: 10px;
  box-shadow: none;
  width : 700px;
  height : 300px;
}

#box00 {
	top: 10px;
  box-shadow: none;
  width : 450px;
  height : 450px;
  z-index:-1;
}



.boxt1 {
	left: 720px;
}
.boxt2 {
  left: 870px;
}
.boxt3 {
  left: 1020px;
}

.boxt4 {
  left: 1170px;
}
.boxt5 {
  left: 1320px;
}
.boxt6 {
  left: 1470px;
}

.boxPlayersNumbers{
	top: 0px;
  left : 0px;
  text-align: center;
  font-size:50px;
  font-weight:800;
  font-family: formula1;
  width:140px;
  height:55px;
  position: absolute;
  z-index: 0;
  opacity: 1;

}
.boxPlayersAvatars{
	top: 55px;
  left : 0px;
  width : 140px;
  text-align: center;
  position: absolute;
  z-index: 255;
}
.boxPlayersName{
	top: 200px;
  text-align: center;
  position: absolute;
}
.inputPlayersName{
  font-size:25px;
  text-align: center;
  position: absolute;
  font-family:formula1;
}
.boxPlayersVariance{
	top: 230px;
  text-align: center;
  position: absolute;
  font-size:20px;
  font-weight:800;
}
.boxPlayersTempsAvg{
	top: 310px;
  text-align: center;
  position: absolute;
  font-size:18px;
  font-weight:800;
  color: #000000;
}
.boxPlayersPerfMensuelle{
	top: 278px;
  text-align: center;
  position: absolute;
  font-size:20px;
  font-weight:800;
}
.boxPlayersCouleur{
	top: 260px;
  text-align: center;
  position: absolute;
}
.boxPlayersResultat{
	top: 170px;
  text-align: center;
  position: absolute;
}
.boxPlayersNombreTours{
	top: 140px;
  text-align: center;
  position: absolute;
}
.boxPlayersLastTour{
	top: 185px;
  text-align: center;
  position: absolute;
}
.boxPlayersTempsTotal{
	top: 272px;
  text-align: center;
  position: absolute;
}
.boxPlayersLastScore{
	top: 345px;
  text-align: center;
  position: absolute;
  font-size:15px;
}

#SimDiv{
	top: 390px;
  left: 720px;
  text-align: left;
  position: absolute;
  font-size:15px;
}


#simTable{
	top: 20px;
  text-align: left;
  position: absolute;
  font-size:15px;
  border: thin solid #FFFFFF;
}

#simTable td{
padding-top : 5px;
padding-left : 10px;
text-align:center;
}

.clignote {
  animation: clignoter 1s infinite;
}

@keyframes clignoter {
  0% { opacity: 1; }
  50% { opacity: 0.2; }
  100% { opacity: 1; }
}


/* =====================================================================
   STRUCTURE V4 : 3 bandeaux horizontaux, 7 zones.
   Ces règles annulent les positions absolues historiques ci-dessus
   (calées pour un écran d'environ 1600 px) au profit d'une grille
   qui suit la taille de l'écran.
   ===================================================================== */

#timerV4 {
  display: flex;
  flex-direction: column;
  gap: 8px;
  height: calc(100vh - 24px);   /* 24px = marges de #wrapper */
  box-sizing: border-box;
  text-align: left;
}

.bandeauTimer {
  display: grid;
  gap: 8px;
  min-height: 0;
}
/* Jeu, simulation et partie à largeur fixe ;
   les joueurs prennent tout le reste et absorbent les différences de largeur d'écran */
#bandeauHaut  {
  --largeurZoneJeu: 190px;
  --largeurZoneSimulation: 250px;
  --largeurZonePartie: 280px;
  flex: 40;
  grid-template-columns: var(--largeurZoneJeu) var(--largeurZoneSimulation) var(--largeurZonePartie) minmax(0, 1fr);
}
#bandeauStats { flex: 40; grid-template-columns: minmax(0, 35fr) minmax(0, 50fr); }
/* Zone 3.1 (temps moyen par tour) alignée sur les cartes « Perf Temps » / « + long tour de chaque joueur » juste au-dessus :
   colonne des 4 stats (35/85 du bandeau 2, moins un espacement), moins son padding + bordures (14px) et l'espacement
   entre cartes (6px), dont la carte de gauche prend 2/5 ; on rajoute 7px (bordure + padding de gauche du bloc 5)
   pour que le bord droit de la zone 3.1 tombe sur le bord droit des cartes */
#bandeauBas   { flex: 20; grid-template-columns: calc(((100% - 8px) * 35 / 85 - 20px) * 2 / 5 + 7px) minmax(0, 1fr); }

.zoneTimer {
  position: relative;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  box-sizing: border-box;
  padding: 6px;
  border: 1px solid rgba(165, 205, 215, 0.35);
  border-radius: 6px;
  color: #a5cdd7;
}

/* Conteneur de graphe : prend toute la place restante de sa zone */
.zoneCanvas {
  position: relative;
  flex: 1;
  min-height: 0;
}


/* ---------- Zone 1.1 : le jeu ---------- */
#box0, #gameDiv, #gamePictureDiv, #gameDetails {
  position: static;
  width: auto;
  height: auto;
}
.gamePicture {
  position: static;
  display: block;
  max-width: 100%;
  /* 40 % de la hauteur du bandeau du haut (40 % de l'écran, moins marges et espacements) */
  max-height: calc(0.16 * (100vh - 40px));
  margin: 0 auto 6px auto;
}


/* ---------- Zone 1.3 : la partie ---------- */
#zonePartie {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
#BGTimerTitle {
  position: static;
  text-align: center;
}
#BGTimerTitle img {
  max-width: 100%;
  max-height: 6vh;
}
#mainform, #gameSelectDiv, #playersSelectDiv, #playersSelectTitle {
  position: static;
  width: auto;
  padding: 0;
}
#gameSelectDiv select {
  width: 100%;
  margin-top: 2px;
}
#playersSelectDiv {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
  margin-top: 6px;
}
#playersSelectTitle {
  width: 100%;
}
.smallNumbers {
  position: static;
}
#compteursGeneraux {
  position: static;
  width: auto;
  height: auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  text-align: center;
}
#compteursGeneraux .smallTimersDiv,
#heureActuelleDiv, #dureeTotaleDiv, #heureFinDiv, #tempsRestantDiv {
  position: static;
  width: auto;
}
#boutonsPartie {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin-top: auto;
}
#randomizeDiv, #startGameDiv, #endGameDiv {
  position: static;
  width: auto;
  height: auto;
}
/* Choix du jeu / des joueurs et joueur en cours superposés dans la même case de grille, sous les compteurs :
   avant le lancement on voit le choix, ensuite timerV4.js le vide et le joueur en cours prend sa place */
#zoneChoixEnCours {
  display: grid;
}
#zoneChoixEnCours > #mainform,
#zoneChoixEnCours > #actionEncours {
  grid-area: 1 / 1;
  min-width: 0;
}
/* Le formulaire passe devant le bloc « joueur en cours » (vide avant le lancement) pour rester cliquable */
#zoneChoixEnCours > #mainform {
  position: relative;
  z-index: 1;
}
/* Action en cours, entre les compteurs et les boutons : pseudo sur toute la largeur, temps de tour | temps total dessous */
#actionEncours {
  position: static;
  width: auto;
  height: auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  row-gap: 2px;
  padding: 4px 6px;
  margin-top: 20px;   /* un peu d'air sous les compteurs */
  border-radius: 10px;
}
#actionEncours .actionEncours {
  position: static;
  width: auto;
  left: auto;
  font-size: 22px;
}
#actionEncours #joueurEnCours {
  grid-column: 1 / -1;
  font-size: 30px;
}
/* « Tour » / « Total » au-dessus des deux temps : invisibles tant qu'aucun tour n'a commencé */
.labelEnCours {
  font-family: formula1;
  font-size: 12px;
  text-align: center;
  color: transparent;
}

/* Pause et End Game côte à côte : pause en gris (couleurNeutre, posé par timerV4.js), End Game en rouge */
#pauseDiv {
  position: static;
}
/* Les div de boutons vides (Random/Start une fois la partie lancée, Pause/End avant) ne prennent pas de place,
   pour que Pause/End arrivent exactement à l'emplacement de Random/Start */
#boutonsPartie > div:empty {
  display: none;
}
.boutonPause {
  color: #000000;
}
#endGameButton {
  background-color: #c0392b;
  color: #FFFFFF;
}
#randomButton, #startButton, #endGameButton {
  position: static;
}
/* Même gabarit carré pour les 4 boutons : Random (violet) / Start (vert) avant le lancement,
   remplacés au même endroit par Pause (gris) / End Game (rouge) */
#randomButton, #startButton, .boutonPause, #endGameButton {
  width: 90px;
  height: 90px;
  border-width: 5px;
  font-size: 20px;
  font-weight: 800;
  cursor: pointer;
}
#randomButton {
  font-size: 15px;
  background-color: #8e44ad;
}
#startButton {
  background-color: #27ae60;
}


/* ---------- Zone 1.4 : les joueurs ---------- */
#zoneJoueurs {
  display: flex;
  gap: 10px;
  justify-content: center;
  /* Marge latérale pour le halo du joueur actif (box-shadow de 15px posé par timerV4.js) */
  padding-left: 16px;
  padding-right: 16px;
}
/* Chaque carte joueur garde sa mise en page interne (positions absolues à l'intérieur de la carte) */
/* Les cartes se partagent la largeur de la zone (1/N chacune pour N joueurs), sans dépasser 180px
   (largeur d'une carte à 6 joueurs sur un écran de 1920) ; plafonnées, elles restent centrées */
#zoneJoueurs > .generalboxes {
  position: relative;
  top: auto;
  left: auto;
  flex: 1 1 0;
  min-width: 0;
  max-width: 180px;
  width: auto;
  height: calc(100% - 20px);   /* place pour le halo en haut et en bas */
  align-self: center;
  box-sizing: border-box;   /* la bordure de 5px posée par timerV4.js reste dans la largeur */
}
/* Le contenu de la carte (fixé à 140px historiquement) suit la nouvelle largeur */
#zoneJoueurs > .generalboxes .boxPlayers {
  width: 100%;
}


/* ---------- Zone 2.1 : le carré des 4 stats ---------- */
#zoneQuatreStats {
  display: grid;
  /* minmax(0, …) : les canevas des graphes ne doivent pas élargir les colonnes au-delà de la zone */
  /* colonne de gauche (Perf Temps, Plus long tour) plus étroite que celle de droite (Répartition, 10 plus longs tours) */
  grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
  grid-template-rows: repeat(2, minmax(0, 1fr));
  gap: 6px;
}
.carteStat,
#ChartRepartTimeDiv, #ChartSumTimeDiv, #ChartToursJoueursDiv, #ChartTAllTourTimesDiv {
  position: relative;
  top: auto;
  left: auto;
  width: auto;
  height: auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  z-index: auto;
}
/* Titres : les anciennes largeurs fixes (#Chart…Title) sont annulées, le titre passe à la ligne s'il est trop long */
.carteStat .AllGraphsTitle,
#ChartRepartTimeTitle, #ChartSumTimeTitle, #ChartToursJoueursTitle, #ChartAllTourTimesTitle {
  position: static;
  width: auto;
  text-align: center;
  white-space: normal;
  height: auto;
  padding: 2px 0;
}
#ChartrepartTimeCanvasDiv, #ChartSumTimeCanvasDiv, #ChartToursJoueursCanvasDiv, #ChartAllTourTimesCanvasDiv {
  position: relative;
  top: auto;
  left: auto;
  width: auto;
  height: auto;
}
/* Répartition du temps : titre et camembert à gauche, temps cumulés à droite sur toute la hauteur de la carte
   (grille sur la carte ; #ChartSumTimeCorps s'efface pour que ses enfants deviennent des cases de cette grille) */
#ChartSumTimeDiv {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-rows: auto minmax(0, 1fr);
  column-gap: 6px;
  container-type: size;   /* sert de référence (cqh / cqw) à la taille de police des temps */
}
#ChartSumTimeTitle {
  grid-column: 1;
  grid-row: 1;
}
#ChartSumTimeCorps {
  display: contents;
}
#ChartSumTimeCorps #ChartSumTimeCanvasDiv {
  grid-column: 1;
  grid-row: 2;
  min-width: 0;
}
#ChartSumTimeText {
  position: static;
  grid-column: 2;
  grid-row: 1 / 3;
  align-self: center;
  z-index: auto;
  /* Police adaptée au nombre de lignes pour remplir toute la hauteur,
     plafonnée en largeur (11cqw) pour laisser la place au camembert, et bornée entre 13 et 48px */
  font-size: clamp(13px, min(calc(96cqh / (var(--lignes, 7) * 1.2)), 11cqw), 48px);
  line-height: 1.2;
  text-align: right;
}
#ChartSumTimeText:empty {
  display: none;
}


/* ---------- Zone 1.2 : la simulation ---------- */
#zoneSimulation {
  overflow: auto;
}
#SimDiv, #simTable {
  position: static;
}
/* Tableau à largeur fixe : toute la largeur du bloc, colonnes de largeur fixe (portrait, puis Actuel / Lose / Win égales) */
#simTable {
  width: 100%;
  table-layout: fixed;
  box-sizing: border-box;
}
#simTable td {
  padding-left: 2px;
  padding-right: 2px;
}
#simTable td:first-child {
  width: 30px;
}
/* Cellules de calcul cachées : ne prennent plus de colonne (timerV4.js les lit toujours par leur id) */
#simTable td.invisibleDiv {
  display: none;
}


/* ---------- Zone 2.2 : le graphe de temps de jeu ---------- */
#zoneTempsJeu {
  display: flex;
  flex-direction: column;
}
#ChartTimeLinesDiv {
  position: relative;
  top: auto;
  left: auto;
  width: auto;
  height: auto;
  z-index: auto;
}
#ChartTimeLinesCanvas {
  width: auto;
  height: auto;
  aspect-ratio: auto;
}


/* Numéro du joueur : bandeau plein à sa couleur sur toute la largeur de la carte (comme showtm quand il est actif).
   Couleurs de fond / texte posées par timerV4.js. */
#zoneJoueurs .boxPlayersNumbers {
  top: 0;              /* collé à la bordure de la carte */
  left: 0;
  width: 100%;
  height: 50px;        /* bas du bandeau inchangé (50px) */
  line-height: 50px;
  font-size: 36px;
  box-sizing: border-box;
}
/* Carte joueur cliquable une fois la partie initialisée : lance le tour du joueur */
.carteCliquable {
  cursor: pointer;
  user-select: none;   /* pas de sélection de texte en cliquant vite */
}
/* Au survol, le logo grossit très légèrement */
.carteCliquable .logoTimer {
  transition: transform 0.15s ease;
}
.carteCliquable:hover .logoTimer {
  transform: scale(1.06);
}

/* Logo du joueur dans un cercle à sa couleur, comme dans le classement du mois (.portraitRond) */
#zoneJoueurs .logoTimer {
  width: 125px;
  max-width: 100%;
  aspect-ratio: 1 / 1;
  height: auto;
  padding: 0;
  margin-top: 4px;
  border-radius: 50%;
  object-fit: cover;
  box-sizing: border-box;
  border: 3px solid var(--couleurJoueur, #316673);
}


/* ---------- Bandeau 3 : temps moyen par tour et graphe de tous les tours ---------- */
#zoneTempsMoyenTour {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
#ChartTempsMoyenTourTitle {
  position: static;
  width: auto;
  height: auto;
  text-align: center;
}
#zoneBas {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
#ChartTousLesToursTitle {
  position: static;
  width: auto;
  height: auto;
  text-align: center;
}


/* ---------- Messages ponctuels, centrés par-dessus la page ---------- */
#compteurRandom {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 500;
  pointer-events: none;
}
/* « Nouveau tour le + long » : centré dans la zone 2.3 (graphe de temps de jeu), par-dessus le graphe */
#zoneTempsJeu #AlertToursJoueursDiv {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 90%;
  height: auto;
  font-size: 60px;
  z-index: 500;
  pointer-events: none;
}

/* Zone 1.1 : scores moyens des joueurs à ce jeu (affichés une fois la partie lancée) */
#scoresMoyensJeu {
  margin-top: 10px;
  font-size: 15px;
  font-family: Arial, sans-serif;
  font-weight: bold;
  line-height: 1.5;
}
.scoresMoyensTitre {
  color: #a5cdd7;
  font-family: formula1;
}
.scoresMoyensNb {
  font-weight: normal;
  opacity: 0.7;
}

/* Carte joueur : « Temps Total » au-dessus du temps cumulé, sans décaler ce dernier */
.labelTempsTotal {
  position: absolute;
  bottom: 100%;
  left: 0;
  width: 100%;
  font-family: formula1;
  font-size: 14px;
  text-align: center;
  color: var(--couleurJoueur, #a5cdd7);
}
/* Le temps total lui-même, un peu plus gros que les autres compteurs de la carte */
#zoneJoueurs .boxPlayersTempsTotal .compteurJoueurs {
  font-size: 24px;
}

/* Carte joueur : la variance (%) n'est affichée qu'avant le lancement (la carte devient .carteCliquable au lancement) */
.carteCliquable .boxPlayersVariance {
  display: none;
}
/* Partie lancée : Temps Total remonte un peu (place libérée par la variance et la couleur) pour laisser la place au Temps Ghost dessous */
#zoneJoueurs .carteCliquable .boxPlayersTempsTotal {
  top: 248px;
}
#zoneJoueurs .boxPlayersTempsAvg {
  top: 312px;   /* un peu d'air sous la ligne du choix de couleur */
  left: 0;
  color: #000000;
}
/* « Temps Ghost » au-dessus du temps, masqué tant qu'il n'y a pas de temps moyen pour ce joueur */
.labelTempsGhost {
  position: absolute;
  bottom: 100%;
  left: 0;
  width: 100%;
  font-family: formula1;
  font-size: 13px;
  text-align: center;
  color: var(--couleurJoueur, #a5cdd7);
}
.boxPlayersTempsAvg:has(> .tempsGhost:empty) .labelTempsGhost {
  display: none;
}
.tempsGhost {
  font-size: 18px;
  color: #000000;
  border-radius: 4px;
}