/* Thème sombre par défaut */
:root[data-theme="sombre1"] {
    --bg:                rgb(25, 27, 33);      /* fond canevas */
    --live:              white;
    --fourier:           #f17300ff;
    --odd-rank-circles:  #65AFFFff;
    --even-rank-circles: #70F8BAff;
    --rank-centers:      rgb(254, 202, 126);
    --rank-radius:       rgb(244, 232, 165);
}


/* Thème clair */
:root[data-theme="clair"] {
    --bg:            #F7F7F2ff;
    --live:          #442F38ff;
    --fourier:       rgb(147, 0, 34);    /* safety orange */
    --odd-rank-circles:  rgb(77, 112, 40);
    --even-rank-circles: rgb(57, 73, 130);
    --rank-centers:      rgb(68, 131, 195);
    --rank-radius:       rgb(83, 86, 172);
}

/* Optionnel: style du panneau de contrôle pour matcher le thème */
#controlsDiv { color: var(--live); }


body {
    position: fixed;
    font-family:'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif; 
    font-size: .8em;
    height: 100%; 
    overflow: hidden;
}


#canvasDiv {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    position: relative;
    width: 100vw;
    height: 100vh;
    z-index: 2;
}

#canvasDiv canvas {
    touch-action: none;
}

#controlsDiv {
    display: flex;
    position:absolute;
    justify-content: space-around;
    align-items: flex-end;
    width: 100vw;
    margin: 0px 0px 0px 0px;
}

#title {
    font-size: 1.2em;
    color:white;
    text-align: center;
    margin : 0px 0px 5px 0px;
    /* pour enlever la sélection de texte agaçante : */
	-webkit-user-select: none;
	user-select: none;
	-webkit-touch-callout: none;
	cursor: pointer;
}

#controlsAndTitle {
    /* display: flex; */
    flex-direction: column;
    position: absolute;
    width: auto;
    height: auto;
    border-radius: 30px;
    border: 1px solid;
    border-color: rgb(black);
    background-color: #3e5e79;
    justify-content: space-evenly;
    padding: 20px;
    margin: 20px 20px 0px 20px;
    z-index: 5;
    box-shadow:inset 5px 5px 15px 0px black;
}


#settingsCont {
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    align-items: flex-end;
    margin: 10px;
}


.slider {
    margin: 0px 10px 0px 10px;
}


#slidersDiv {
    display: flex;
    flex-direction: column;
    margin: 8px 0px 0px 0px;
    align-items: flex-start;
}

#SpeedSlider {
    margin: 8px 0px 0px 31px;
}

#buttonsAndSelectsContainer {
    display: flex;
    flex-direction: row;
}

#buttonsDiv  {
    display: flex;
    flex-direction: column;
    margin: 0px 15px 0px 15px;
    align-items: flex-end;
}

#selectsDiv {
    display: flex;
    flex-direction: column;
    margin: 0px 15px 0px 15px;
    align-items: flex-end;
}

.selectRowDiv {
    display: flex;
    flex-direction: row;
    /* margin: 0px 15px 0px 15px; */
    /* align-items: flex-end; */
}

.selectRowLabel {
    display: flex;
    color:white;
    margin: 0px 8px 0px 0px;
    /* pour enlever la sélection de texte agaçante : */
	-webkit-user-select: none;
	user-select: none;
	-webkit-touch-callout: none;
	cursor: pointer;
}

#SGV_Div {
    display: flex;
    flex-direction: column;
    margin: 0px 0px 0px 15px;
    align-items: flex-start;
}

.sliderLabel, .sliderValue {
    color: white;
    margin: 0px 0px 0px 0px;
    /* pour enlever la sélection de texte agaçante : */
	-webkit-user-select: none;
	user-select: none;
	-webkit-touch-callout: none;
	cursor: pointer;
}

.sliderRow {
    display: flex;
    margin: 0px 0px 5px 0px;
}

.buttons {
    height: max-content;
    width: 85px;
    height: 20px;
    margin: 0px 0px 5px 0px;
}

.selects {
    height: max-content;
    width: 85px;
    height: 20px;
    margin: 0px 0px 5px 0px;
}



.hidden {
    display: none;
}

.notInIOS {
    opacity: 1;
    filter: none;
    cursor: auto;
    pointer-events: auto;
}


/* **************************************************** */
/* HIDE CONTROLS BUTT ********************************* */
/* **************************************************** */

#hideButtContainer {
    display: flex;
    /* position: relative; */
    position: absolute;
    /* width:auto; */
    /* height:auto; */
    width: 100%;
    flex-direction: row;
    justify-content: flex-end;
    /* justify-content: center; */
    margin: 0px 0px 0px 0px;
    z-index: 100;
}


#hideControlsButtDiv {
    display: flex;
    position: relative;
    align-items: flex-start;
    margin: 0.5% 1% 0px 0px;
    /* top: 3%; */
    /* left: 5%; */
}

#hideControlsButt {
    position: absolute;
    /* position: relative; */

    /* top: -10%; */
    /* left: 87%; */
    z-index: 10;
    white-space: nowrap;
}


/* **************************************************** */
/* INFO BULLE ***************************************** */
/* **************************************************** */


.tooltiptext {
    display: inline-block;
    white-space: normal;
    max-width: 100px;
    word-wrap: break-word;
}

.tooltip {
  /* position: relative; */
  position: absolute;
  cursor: pointer; /* optionnel */
}

.tooltip .tooltiptext {
  visibility: hidden;
  position: relative;
  /* position: absolute; */
  /* width: 50px; */
  background-color: #faeed1;
  color: black;
  text-align: center;
  border-radius: 8px;
  padding: 5px 12px;
  z-index: 20;
  top:12px;
  left:-108px;
  /* transform: translateX(-50%); */
  opacity: 0;
  transition: opacity 0.4s;
  font-size: 0.8em;
  box-shadow: 0 0 10px rgba(0,0,0,0.4);
}



.tooltip:hover .tooltiptext {
  visibility: visible;
  opacity: 1;
}


/* pour mettre en colonnes à partir d'une taille mini de la fenetre */
@media only screen and (max-width: 700px) {

    
    #settingsCont {
        flex-direction: column;
        justify-content: space-around;
        align-items: flex-end;
    }

    .notInIOS {
        opacity: 0.5;
        filter: saturate(.2) contrast(.9);
        cursor: not-allowed !important;
        pointer-events: none;           /* optionnel : rend inactif */
    }

    #buttonsAndSelectsContainer {
        display: flex;
        flex-direction: column;
        width : 100%;
    }

    #buttonsDiv{
        margin:0;
    }

    #selectsDiv{
        margin:0;
    }

    #SGV_Div {
        /* display: flex;
        flex-direction: column;
        margin: 0px 0px 0px 15px; */
        align-items: flex-end;
    }
}