:root{
  --app-min-w: 700px; /* ajuste à ton goût */
  --app-min-h: 450px;  /* ajuste à ton goût */
}


html, body {
    height: 100%;
    width:100%;
    margin: 0;
}

body {
    min-width: var(--app-min-w);
    min-height: var(--app-min-h);
    display: block;
    align-items: start; 
    background-color: white;
    font-size: 0.7em;
    font-family:'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif; 
    overflow: hidden;    
    margin: 0;
}

/* Empêche les gestes tactiles (scroll/zoom) SUR les contrôles custom */
[id*="Knob"],         /* ex : #nbHarmonicsKnob, #speedKnob, #rank1AmpKnobDiv, etc. */
[id*="KnobDiv"],
.sliderDiv, 
.selectWaveDiv, 
.traceChk, 
.chkDiv {
  touch-action: none;           /* iOS 13.4+ / navigateurs modernes */
  -webkit-user-select: none; 
  user-select: none;
}

/* L’astuce [id*="Knob"] couvre tous les IDs existants contenant “Knob” / “KnobDiv”  */
/* (pas d'ajout de classes). */

/* Évite la “propagation” du rebond vers la page */
#vContainer { overscroll-behavior: contain; }

/* Le conteneur hérite des min pour éviter les “shrink” internes */
.vContainer {
    /* taille minimale de l’ensemble */
    min-width: var(--app-min-w);
    min-height: var(--app-min-h);
    /* occupe la fenêtre et fournit le scroll si ça dépasse */
    width: 100vw;
    height: 100vh;
    /* ← le scroll se fait ici */
    overflow: auto;
    display: flex;
    flex-direction: column;
    /* justify-content: flex-start; */
    /* position: relative; */
    
    /* -webkit-overflow-scrolling: touch; */
}

/* Rail vertical : prend 100vh en hauteur et “shrink-wrap” en largeur */
#widthRail{
  display: inline-flex;       /* shrink-wrap horizontal */
  flex-direction: column;
  min-width: var(--app-min-w);
  min-height: 100vh;          /* ← clé : occupe la fenêtre */
}

/* Sections à hauteur fixe (tes rangées et ombres n’occupent PAS l’espace restant) */
#upperSettingsCont,
#lowerSettingsCont,
#ombre1, #ombre2, #ombre3{
  flex: 0 0 auto;
}

#upperSettingsCont{
    height: 116px;            /* fixe en px */
    flex: 0 0 116px;          /* pas de rétrécissement vertical */
    display: flex;
    align-items: flex-start;
    width:100%;
}

#lowerSettingsCont{
    height: 124px;            /* fixe en px */
    flex: 0 0 124px;
    display: flex;
    align-items: flex-start;
    width:100%;
}

/* Les rangées : PAS de scroll interne, et largeur = somme des colonnes */
#upperSettingsCont,
#lowerSettingsCont{
    overflow: visible;           /* ← pas de scrollbar interne */
    min-width: 0;   /* évite que le container impose une largeur mini aux enfants */
}


/* colonnes du haut : idéal 11% chacune, mini 160px, pas de max contraignant */
.slidersColumn{
    display: flex;
    position: relative;
    flex-direction: column;
    flex: 0 0 clamp(90px, 12%, 10000px);   /* basis = clamp(min, idéal%, max) */
     /* IMPORTANT : permettre le shrink en dessous de la largeur intrinsèque du contenu */
    min-inline-size: 0;      /* équiv. min-width:0 mais RTL-safe */
    min-width: 0;            /* ceinture et bretelles */
    height: 116px;                          /* on garde la hauteur fixe */
    /* box-sizing: border-box; */
    margin-right: 1px;
    background: silver;
    padding: 0 10px;
}

#upperSettings5{
    display:flex;
    position: relative;
    flex-direction: column;
    /* flex: 0 0 11%; */
    flex: 0 0 clamp(120px, 14%, 10000px);   /* basis = clamp(min, idéal%, max) */
     /* IMPORTANT : permettre le shrink en dessous de la largeur intrinsèque du contenu */
    min-inline-size: 0;      /* équiv. min-width:0 mais RTL-safe */
    min-width: 0;            /* ceinture et bretelles */
    height: 116px;
    padding: 0px 10px 0px 10px;
    margin: 0px 1px 0px 0px;
    background-color: silver;
}

.sliderDiv {
    display: flex;
    /* height: 124px; */
}

#upperSettings6 {
    /* display:flex; */
    position: relative;
    flex-direction: column;
    flex: 0 0 clamp(100px, 11%, 10000px);   /* basis = clamp(min, idéal%, max) */
    height: 116px;                          /* on garde la hauteur fixe */
    box-sizing: border-box;
    margin-right: 1px;
    background: silver;
    padding: 0 10px;
}

#upperSettings7 {
    display: flex;
    flex: 1 1 auto;                /* capte l’espace restant */
    min-width: 120px;          
    padding: 0px 10px 0px 0px;
    height: 116px;
}


#ombre2 {
    position: relative;
    height: 7px;
    /* width: 100vw; */
    background-color: red;
    box-shadow: inset 0px 4px 6px -1px black;
}

#ombre3 {
    position: relative;
    height: 8px;
    /* width: 100vw; */
    background-color: red;
    box-shadow: inset 0px -3px 7px -2px black;
}

/* #stage {
  position: relative;             
  display: flex;
  flex-direction: column;          
  min-height: 0;            
} */

/* Le canvas prend TOUT le reste de la hauteur disponible */
#canvasCont {
    /* flex: 1 1 auto; */
    min-height: 120px;              /* indispensable en flex column */
    position:relative;
    z-index: 1;
    /* height: auto; */
    width: 100%;
}

#canvas, #canvas canvas {
    display: block;
    /* height: 40vh; */
    height: 100%;
    width: 100%;
    touch-action: auto;           /* iOS 13.4+ / modernes */
    -webkit-user-select: none;    /* pas de sélection */
    -webkit-touch-callout: none;  /* pas de menu “copier” */
    user-select: none;
    margin: 0;
}

#formulaDiv{
    position: absolute;
    top:22px;
    left:15px;
    height: auto;
    width: auto;
    z-index: 2;
}

.slidersValue{
    color: black;
    font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
}

label {
    color: white;
    font-family:'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif 
}

#chkLimiter { 
    position: absolute;
    top: 40px;
    left: 13px;
}

#limiterKnob {
    top: 35%;
    left: 55%;
}

#chkDisto {
    position: absolute;
    top: 40%;
    left: 7%;
}

/* panneaux du bas : idéal ~7.5%, mini 100px */
.rankKnobDiv{
    position: relative;
    flex-direction: column;
    flex: 0 0 clamp(50px, 7.5%, 10000px);
    height: 124px;
    box-sizing: border-box;
    margin-right: 1px;
    background: silver;
    margin: 0px 1px 0px 0px;
}

#rankNKnobsDiv{
    /* width:12.5%; */
    /* flex: 0 0 12.5%; */
    position: relative;
    flex-direction: column;
    flex: 0 0 clamp(100px, 11%, 10000px);
    height: 124px;
    box-sizing: border-box;
    margin-right: 1px;
    background: silver;
    margin: 0px 1px 0px 0px;
}

#separatedSignalsDiv{
    /* width:13%; */
    /* flex: 0 0 13%; */
    display:flex;
    flex-direction: column;
    flex: 1 1 auto;   /* = grow:1, shrink:1, basis:0 → capte tout le “reste” */
    min-width: 120px;
    margin: 0px 1px 0px 0px;
    height: 124px;
    align-items: center;
}

.ampKnobDiv {
    display: block;
    top: 20%;
    left: 1%;
}

#rankChoiceKnobForTrace {
    top: 58px;
    left: 50%;
}

#rankNChoiceKnob {
    top: 23%;
    left: 60%;
}

#nbHarmonicsKnob {
    top: 29%;
    left: 12%;
}

#speedKnob {
    position: absolute;
    top: 35%;
    left: 14%;
}

#zoomKnob {
    top: 43%;
    left: 63%;
}



#chkDisto .coches,
#chkDisto .coches label,
#chkDisto .coches span {
    white-space: normal;           /* autorise les retours à la ligne */
    display: inline-block;         /* permet un max-width effectif */
    max-width: 80px;               /* ajuste la largeur pour déclencher le wrap */
    line-height: 1.1;
}

.coches,
.coches label,
.coches span{
  white-space: normal;          /* au lieu de nowrap */
  overflow-wrap: anywhere;      /* force le wrap si besoin */
  word-break: break-word;       /* secours */
  color: black;
}

#chkDisplayFormula {
    position: absolute;
    top: 27%;
    left: 4%;
}

#chkTraceLoop {
    position: absolute;
    top: 27%;
    left: 63%;
}

#chkSumOsc {
    position: absolute;
    top: 52%;
    left: 4%;
}

#chkFactoryWave {
    position: absolute;
    top: 70%;
    left: 4%;
}

#volSynthesizedWave {
    top: 39%;
    left: 54%;
}

#volFactoryWave {
    top: 58%;
    left: 71%;
}

#fondFreqKnob {
    top: 37%;
    left: 60%;
}

.oddEvenAmpKnobDiv {
    position: absolute;
    top: 16%;
    left: -5%;
}

.oddEvenPhaseKnobDiv {
    top: 42%;
    left: 60%;
}

.phaseKnobDiv {
    display: block;
    top: 60%;
    left: 55%;
}

#rankNPhaseKnobDiv {
    display: block;
    top: 60%;
    left: 35%;
}

.rankLabel, .rankLabel2 {
    text-align: center;
    color: black;
    font-family:'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
    margin: 2px 0px 0px 0px;
    white-space: nowrap;
}

.rankLabel2 {
    top : 10px;
    font-size: 0.8em;
    white-space: nowrap;
}




.chkDiv {
    display: flex;
    top: 55px;
    left: 40px;
    height: auto;
    white-space: nowrap;
    display: inline-block;
}

.traceChk {
    position: absolute;
    top: 84px;
    left: 9px;
}

.nbHarmonicsKnobClass {
    text-align: center;
    width: 100%;
    margin: 0px auto;
    font-size: 15px;
    font-weight:900;
    color: rgb(75, 55, 0);
    margin: 3px 0px 0px 1px;
}

.ampKnobLabelClass {
    text-align: center;
    width: 100%;
    margin: 0px auto;
    font-size: 10px;
    color: black;
    margin: -3px 0px 0px 0px;
}

.phaseKnobLabelClass {
    text-align: center;
    width: 100%;
    margin: 0px auto;
    font-size: 10px;
    color: rgb(19, 32, 63);
    margin: 0px 0px 0px 2px;
}

.oddEvenAmpKnobLabelClass {
    text-align: center;
    width: 100%;
    margin: 0px auto;
    font-size: 12px;
    color: black;
    margin: -11px 0px 0px 0px;
}

.waveVolKnobLabelClass {
    text-align: center;
    width: 100%;
    margin: 0px auto;
    font-size: 10px;
    color: black;
    margin: 0px 0px 0px 2px;
}

.rankChoiceLabelClass {
    text-align: center;
    width: 100%;
    margin: 0px auto;
    font-size: 12px;
    color: black;
    margin: -4px 0px 0px 2px;
}

/* ********************************************************************** */
/* Commands buttons ***************************************************** */
/* ********************************************************************** */

#commandsContDiv {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 4px 0px 2px 0px;
}

.gvgButton{
    color: #fff;
    font-family: 'Arial', sans-serif;
    font-size: 12px;
    padding: 2px 9px;
    border-radius: 8px;
    border: 1px solid black;
    box-shadow: 1px 1px 3px black;
    transition: all 0.03s ease;
    margin: 2px 0px 3px 0px;
    white-space: nowrap;
}

.gvgButton:active:hover {
    transform: translateY(1px);
    box-shadow: 0px 0px 8px rgba(0,0,0,0.3);
}

.gvgButton:hover {
    box-shadow: 1px 1px 3px black, 1px 1px 8px rgba(0,0,0,0.3);
}
.epicycleButton {
    background: silver;
    color: black;
    padding: 1px 15px 3px 15px;
}
.epicycleButton:hover { 
    background: linear-gradient(-12deg, silver, silver 40%, white 100%);
}

#toggleStartStopButton {
    background: linear-gradient(-10deg, #333, #333 40%, #91bfe1 100%);
    width : 90px;
}
#toggleStartStopButton:hover {
    background: linear-gradient(-12deg, #333, #333 40%, #f5f7f8 100%);
}

#waveSelect {
    background-color: rgb(226, 226, 226);
    color: black;
    border: 3px solid rgb(5, 129, 138);
    border-radius: 8px;
    padding: 1px 15px 3px 15px;
    font-family: 'Arial', sans-serif;
    font-size: 12px;
    margin: 1px 0px 2px 0px;
}

/* ********************************************************************** */
/* Epicycle mode controls *********************************************** */
/* ********************************************************************** */


#epicycleModeControlsDiv {
  display: none;                   /* off par défaut */
  position: absolute;              /* absolu, mais RELATIF à #stage */
  right: 170px;
  bottom: 90px;                     /* chevauche légèrement l’ombre */
  z-index: 2;                      /* au-dessus de l’ombre */
  /* gap: 12px; */
  align-items: center;
  width: max-content;
  pointer-events: auto;
}

#epicycleModeControlsDiv.on {
   display: flex;            /* visible quand “on” */
   /* gap: 12px; */
}


#epicycleSpeedKnobLabel {
    display: flex;
    position: absolute;
    top: 64px;
    left: -37px;
    margin: 0px 0px 0px 0px;

}

#speedKnobForEpicycleDiv {
    display: flex;
    position: absolute;
    top: 14px;
    left: 0px;
    margin: 0px 0px 0px 0px;

}

#closeButtonForEpicycleDiv {
    display: flex;
    position: absolute;
    top: 22px;
    left: 80px;
    margin: 0px 0px 0px 0px;
}

#epicycleNbHarmKnobLabel {
    display: flex;
    position: absolute;
    top: 64px;
    left: -246px;
    margin: 0px 0px 0px 0px;
}

#epicycleNbHarmKnobDiv {
    display: flex;
    position: absolute;
    top: 8px;
    left: -110px;
    margin: 0px 0px 0px 0px;
}