html {font-size: 100%;}
    body {
        font-size: .8em;
        background-color: #888;

    }
    #corps {
        width: auto;
    }
    
    .conteneur_infos {
        display:grid;
        text-align: center;
        height: fit-content;
    }
    .conteneur_infos > * {
        margin:auto;
        margin-top:20px;
        display:inline-block;
        
    }
    
    #affiche_da,#affiche_dt {
        width:160px;
        height: 50px;
        border: outset;
        border-radius: 14px;
        background-color: rgba(0,0,0,0.6);
        font-size: 20px;
        font-weight: bold;
        font-family: arial;
        color:#8D8;
        padding: 6px;
        text-align: center;        
    }
    #affiche_dt {
        color:#DD8;
    }
    
    select {
        width:220px;
        height:24px;
    }
    
    
    
    .cadre {
        border: solid 1px #465;
        border-radius: 4px;
        background-color: rgba(200,230,210,0.4);
        font-size: 0.6em;
        color:#465;
        padding: 6px;
        margin: 6px;
        text-align: center;
        display:flex; 
    }
        .cadre_p {
            display:flex;
            text-align: center;
        }
        
    @media screen and (max-width: 980px) {
        .cadre {
            font-size:0.4em;
            display:block;
        }
        .cadre_p {
            display:block;
        }        
        .conteneur_infos {
            display:flex;
        }
        #affiche_da,#affiche_dt {
            font-size: 16px;
            width:110px;
            height: 40px;            
        }
    }  
    



    
    
    .cadre__ {
        display:inline-block;
    }
    #phenaki {
        margin-left: 20px;
    }
    
    .cadre_ {
        font-family: verdana;
        color:#A82;
        text-align: center;
        margin: 6px;
      /*  font-size: 11px;*/
      font-size:1.3em;
    }
    .source {
        font-style: italic;
        font-weight: bolder;
        margin-left: 30px;
    }
    #disque {
        width:100%;
        height:100%;    
    }
    #conteneur_disque {
        display:inline-block;
        width:700px;
        height:700px;
        margin: auto;
        overflow: hidden;
    }
    #direction polygon:hover {
        fill:#8E8;
    }
    #direction polygon:active {
        fill:#9F9;
    }
    #sens_ polygon:hover {
        fill:#E8E;
    }
    #sens_ polygon:active {
        fill:#F9F;
    }    
    g circle:hover {
        stroke:#6AD;
    }
    g circle:active {
        stroke:#7BE;
    } 
    
    input[type=range] {
  -webkit-appearance: none;
  width: 40%;
  margin: 10px;
}
input[type=range]:focus {
  outline: none;
}
input[type=range]::-webkit-slider-runnable-track {
  width: 100%;
  height: 8.4px;
  cursor: pointer;
  box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
  background: #37A;
  border-radius: 1.3px;
  border: 0.2px solid #010101;
}
input[type=range]::-webkit-slider-thumb {
  box-shadow: 1px 1px 1px #030000, 0px 0px 1px #1d0000;
  border: 1px solid #000000;
  height: 28px; /*hauteur des boutons*/
  width: 20px;
  border-radius: 5px;
  background: #48B;
  cursor: pointer;
  -webkit-appearance: none;
  margin-top: -10.5px;
}
input[type=range]:focus::-webkit-slider-runnable-track {
  background: #59C;
}
input[type=range]::-moz-range-track {
  width: 100%;
  height: 8.4px;
  cursor: pointer;
  box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
  background: #3071a9;
  border-radius: 1.3px;
  border: 0.2px solid #010101;
}
input[type=range]::-moz-range-thumb {
  box-shadow: 1px 1px 1px #030000, 0px 0px 1px #1d0000;
  border: 1px solid #000000;
  height: 30px;
  width: 16px;
  border-radius: 3px;
  background: #70afff;
  cursor: pointer;
}
input[type=range]::-ms-track {
  width: 100%;
  height: 8.4px;
  cursor: pointer;
  background: transparent;
  border-color: transparent;
  color: transparent;
}
input[type=range]::-ms-fill-lower {
  background: #2a6495;
  border: 0.2px solid #010101;
  border-radius: 2.6px;
  box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
}
input[type=range]::-ms-fill-upper {
  background: #3071a9;
  border: 0.2px solid #010101;
  border-radius: 2.6px;
  box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
}
input[type=range]::-ms-thumb {
  box-shadow: 1px 1px 1px #030000, 0px 0px 1px #1d0000;
  border: 1px solid #000000;
  height: 30px;
  width: 16px;
  border-radius: 3px;
  background: #70afff;
  cursor: pointer;
  height: 8.4px;
}
input[type=range]:focus::-ms-fill-lower {
  background: #3071a9;
}
input[type=range]:focus::-ms-fill-upper {
  background: #367ebd;
}
  
 
    #curseur_a_fin::-webkit-slider-runnable-track {
        background: #7AE;
    }
    #curseur_a_fin:focus::-webkit-slider-runnable-track {
        background: #9CF;
    }    
    #curseur_a_fin::-webkit-slider-thumb {
        background: #8BF;
    }
    
    
    #curseur_t::-webkit-slider-runnable-track {
        background: #B53;
    }
    #curseur_t:focus::-webkit-slider-runnable-track {
        background: #D75;
    }    
    #curseur_t::-webkit-slider-thumb {
        background: #C64;
    }