.theme-light {
   
    --color-fondHTML: whitesmoke; /*gris très pâle*/
    --color-fond-button: #ECFCCA;;  /**/
    --color-fondRange:#DADADD;  /*gris*/
    --color-fondFormulaire:#gray; /*gris*/
    --color-showP:blue; 
    --color-affichagePT:red; 
    --color-fondCnvs:lightyellow; 
    --color-button: #cbeef8;
    --font-color: #000000;
    --color-input:#fef9e7   ;
    --color-results: #fffde6cc;
    --color-tableauTp:blue;
  }
.theme-dark {

    --color-fondHTML: black;  /*gris moyen*/
    --color-fond-button: #104E64;;/* #116179*/
    --color-input:navy ; /*gris bleuté*/
    --color-fondRange:#4E4F56;  /*gris moyen*/
    --color-fondFormulaire:#222225; /*gris bleu moyen*/
    --color-showP:white;  
    --color-affichagePT:lime;
    --color-fondCnvs:#222225; 
    --color-button: #116179;
    --font-color: #ffffff;
    --color-results:#4A5565b8;/*#FFFFFF08;*/
    --color-tableauTp:skyBlue;

  }


html {
    background: var(--color-fondHTML);
   
}


header {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    width: 90%;
    height: 50px;
    padding : 5px;
    border: 1px solid var(--font-color);
    margin: 2%;
    margin-bottom: 10px;
    overflow: auto;
  }



#formulaire
{
  display: none;

}

#choix
{
  /*flex: 1;*/
  min-width: 100px;
  color: var(--font-color);
  height:100%;
  margin: 40px 5px 10px 5px;
  padding: 5px 5px 10px 5px;
  background-color:  var(--color-fondRange)  ;
  font-size: 0.8em;
}

#btnRetour
{
  display:block;
  width: 82px;
  height:20px;
  margin-top: -35px;
  margin-bottom: 15px;
  color: white;
  background-color: #104E64;/*#5f6a6a  ; */
  border-bottom: 1px outset #760001;
  border-radius: 6px;
  font-size: 0.9em;
  font-weight: bold;
}

#lancer
{
  display: flex;
  flex-direction: column;
  max-height: 60px;
  max-width: 100px;
  text-align: center;
  margin: 10px 15px 5px 25px;
  padding: 5px;
  background-color: var(--color-fondRange);
  
}

.btnsLancer{
    width: 60px;
    height:22px;
    margin:5px;
    text-align: center;
    text-decoration: none;
    border-width: 1px;
    border-radius: 6px;
    color :var(--font-color);
    font-size: 0.8em;
    //font-weight: bold;
}


#btnValider
{
  margin-top: 5px;
  border-width: 2px;
  background-color: var(--color-fond-button);
  color : var(--font-color);
}

#btnImprimer 
{
  margin-top: 5px;
  border-width: 2px;
  color : var(--font-color);
  background-color:  var(--color-fond-button);
  
}

.smallButton
{
  font-size: 0.8em;
  color: var(--font-color);
  padding: 2px 5px 2px 5px;
  margin:5px;
  text-decoration: none;
  border-bottom: 1px outset #760001;
  border-radius: 4px;
  background-color: var(--color-button);
}


label {
    font-size: 0.8em;
    color : var(--font-color);
}


#main
{
  display :flex;
  flex-direction: column;
  justify-content: center;
  align-items: stretch;
  max-width: 95vw;
  padding : 20px;
}

#formulaire,
#dessin,
#zAtteint {
  min-height: 0;
}





#formulaire{
  flex:1;
  border: 1px solid var(--font-color);
  margin-bottom: 10px;
}

#dessin{
  
    flex:2;
    padding :10px;
    border: 1px solid blue;
  /*  max-width: 50%;
   max-height: 100vw;*/
}

#cnvs
{

  background-color: var(--color-fondCnvs);/*var(--color-input);*/
  border: 1px solid var(--font-color);;
   /*aspect-ratio: 1 /1;*/
  width: min(100%, 100%);
  /*height: auto;*/
  max-height: 100%;
}

#zAtteint{
  display: flex;
    flex: 0.5;
    align-items: center;
}


#param
{
  /*flex:2;*/
  width : 480px;
  margin-top: 10px;
  margin-left: 10px;
  font-size: 0.9em;
  
}



#btnZp, #btnZd
{
  height:22px;
  font-size: 0.9em;
  border-bottom: 1px outset #760001;
  border-radius: 6px;
  font-size: 0.8em;
}

.affichagePT{
  background-color: var(--color-affichagePT);
}


#labelShowP{
  color:var(--color-showP);

}

#showZp, #showZd 
{
  width: 55px;
  border-style: none;
  font-size: 0.9em;
  font-weight: bold;
  color:var(--color-affichagePT);
}

#tpISA {
  width: 120px;
  border-style: none;
  font-size: 1em;
  font-weight: bold;
  color:var(--color-affichagePT);
}

#cible{
    border : none;
}


.inputPerf
{
  margin: 5px;
  font-size: 0.8em;
  color:var( --font-color);
  padding-left: 5px;
  padding-right: 5px;
  text-decoration: none;
  border-radius: 4px;
  background-color: var(--color-input);
}


#qnh {width: 50px;}

#zTerrain {width: 35px;}

#tp {width: 25px;}  

#vent {width: 20px;}

#masse {width: 40px;}


#immat {
    white-space: pre;
    font-size: 0.8em;
    display: block; 
    margin-left: 5%;
     margin-bottom: 10px;
    /* background-color: var(--color-input);*/
     color:  var(--font-color);
}


#warning{
  font-size: 0.75em;
  margin-top: 20px;
  margin-left: 25px;
  color:red;
  text-align: center;
}

#results{
 font-size: 0.8em;
 background : var(--color-results)  ;

   color:  var(--font-color);
}

  .contener {
    border-radius: 8px;
    margin-left: 20px;
    margin-top: 0px;
    /*position: relative;             /* conteneur référence pour le positionnement */
    /*margin: 0 auto;*/
   /* background: white;*/
    overflow: hidden;
  }


  #info, #displayInfo{
    display : none;
    color:  var(--font-color);

  }


.draggable {
    width: 300px;
    height: 120px;
    padding : 10px;
    font-size: 0.75em;
   /* background: #FFFFFFB8;
    color: black;*/
    border-radius: 6px;
    position: absolute;             /* on positionne via transform */
    left: 40px;                     /* position initiale */
    top: 200px;                      /* position initiale */
    touch-action: none;             /* important pour Pointer Events (prévenir le scroll) */
    user-select: none;
    cursor: grab;
    border: 1px solid gray;
    box-shadow: 0 6px 18px rgba(30,41,59,0.12);
    will-change: transform;
    overflow: auto;
  }

  .draggable:active,
  .draggable.dragging {
    cursor: grabbing;
    filter: brightness(.98);
    transform-origin: 0 0; /* assure que transform translate fonctionne proprement */
  }

#tableauTp{
  color : var(--color-tableauTp);

}