@import url('https://fonts.googleapis.com/css2?family=Chivo+Mono:wght@700&family=Roboto+Condensed:wght@100..900&family=Roboto:wght@100..900&display=swap');
/* Reset */
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, input,textarea, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
}

a{
	text-decoration:none;
}
table {
    border-spacing: 0;    
}
fieldset,img {
    border: 0;
}
ol,ul {
    list-style: none;
    margin:0;
    padding:0;
}
caption,th {
    text-align: left;

}

q:before,q:after {
    content:'';
}

textarea { resize:none;}
a img{ border:none;}

/* Box Model */
*, *:before, *:after {
		box-sizing: border-box;
}

/* Fin Reset CSS
 * --------------------------------------- */
 
 
 /* masque la valeur du placeholder au clic*/
::-webkit-input-placeholder { opacity: 1;}  /* Chrome 56, Safari 9 */
:-moz-placeholder { opacity: 1;} /* FF 4-18 */
::-moz-placeholder { opacity: 1;} /* FF 19-51 */
:-ms-input-placeholder { opacity: 1;} /* IE 10+ */
::placeholder { opacity: 1;} /* Modern Browsers */

*:focus::-webkit-input-placeholder { opacity: 0; } /* Chrome 56, Safari 9 */
*:focus:-moz-placeholder { opacity: 0; } /* FF 4-18 */
*:focus::-moz-placeholder { opacity: 0; } /* FF 19-50 */
*:focus:-ms-input-placeholder { opacity: 0; } /* IE 10+ */
*:focus::placeholder { opacity: 0; } /* Modern Browsers */


html {
background-color:#FFF;
color:#424242;
text-align:center;
font-family: 'Roboto', sans-serif;
font-optical-sizing: auto;
font-weight: 400;
font-style: normal;
font-size: 62.5%;
}

body {
background-color:#fff;
color:#424242;
text-align:center;
font-family: 'Roboto', sans-serif;
font-optical-sizing: auto;
font-weight: 400;
font-style: normal;
font-size: 1.7rem;
overflow-wrap: break-word;
}

a:link {color:#fff;text-decoration:none;}
a:visited {color:#fff;}
a:hover {color: #fff;}
a:active {color:#fff;}


h1{
font-family: 'Roboto', sans-serif;font-size:2.2rem; font-weight:700;font-style:normal;margin:0rem 0rem 0.5rem 0rem; color:#fff;
}

h2{
font-family: 'Roboto', sans-serif;font-size:1.7rem; font-weight:400;font-style:normal;margin:0rem 0rem 0.0rem 0rem; color:#fff;
}

h3{
font-family: 'Roboto', sans-serif;font-size:1.6rem; font-weight:600;font-style:normal;margin:0rem 0rem 0rem 0rem; color:#424242;
}

/* Pour éviter que le texte des labels ( comme ceux des checkbox par exemple soient surlignés / sélectionnés */
label {
  -webkit-user-select: none; /* Pour Chrome, Safari */
  -moz-user-select: none;    /* Pour Firefox */
  -ms-user-select: none;     /* Pour Internet Explorer/Edge */
  user-select: none;         /* Standard */
}

#boiteAlerte {
padding: 1.5em;
border: none;
border-radius: 8px;
font-family: 'Roboto', sans-serif;
font-size: 1.5rem;
background-color:#e6e8eb;
max-width: 40rem;
text-align:center;
}

#boiteAlerte::backdrop {
background: rgba(0, 0, 0, 0.4);
}

#bloc_contenu_dialog {
display:flex;
justify-content:center;
text-align:left;
}

#fermerAlerte {
margin-top: 2rem;
padding: 0.6rem 2rem 0.6rem 2rem;
border: none;
border-radius: 4px;
background-color:#275c89;
color:#fff;
cursor: pointer;
text-align:center;
font-family: 'Roboto', sans-serif;
font-size:1.4rem;
font-weight:700;
outline: none;
}

#boiteAlerteSos {
padding: 1.5em;
border: none;
border-radius: 8px;
font-family: 'Roboto', sans-serif;
font-size: 1.7rem;
font-weight:700;
line-height:3rem;
background-color:#ff0000;
min-width: 30rem;
max-width: 40rem;
text-align:center;
color:white;
}

#boiteAlerteSos::backdrop {
background: rgba(0, 0, 0, 0.4);
}

#bloc_contenu_dialogSos {
display:flex;
justify-content:center;
text-align:center;
}

#fermerAlerteSos {
margin-top: 2rem;
padding: 0.6rem 2rem 0.6rem 2rem;
border: none;
border-radius: 4px;
background-color:#e6e8eb;
color:#1f1f1f;
cursor: pointer;
text-align:center;
font-family: 'Roboto', sans-serif;
font-size:1.4rem;
font-weight:700;
outline: none;
}


/*///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
/////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
/////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
/////////////////////////////////////////////////////////                      //////////////////////////////////////////////////////////////////////
/////////////////////////////////////////////////////////                      //////////////////////////////////////////////////////////////////////
/////////////////////////////////////////////////////////        MAP           //////////////////////////////////////////////////////////////////////
/////////////////////////////////////////////////////////                      //////////////////////////////////////////////////////////////////////
/////////////////////////////////////////////////////////                      //////////////////////////////////////////////////////////////////////
/////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
/////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/
#page{
display: flex;
height: 100svh;
}

#map {
position:relative;
flex: 1; /* occupe le reste de l'espace */
}

#map canvas {
image-rendering: -webkit-optimize-contrast;
image-rendering: crisp-edges;
image-rendering: pixelated;
transform: none !important;
will-change: auto;
}

.marker {
width: 30px;
height: 30px;
background-size: cover;
border-radius: 50%;
cursor: pointer;
}
		
.mapboxgl-popup {
display: flex !important;
max-width:35rem !important;
cursor: pointer;
z-index:9999;
}

.mapboxgl-popup-content {
text-align: center;
background-color:#e6e8eb;
color: #424242;
font-size:1.2rem;
}

.popup-content-marqueur {
display:inline-grid;
grid-template-columns:1fr 1fr;
text-align: left;
font-size:1.2rem;
color: #424242;
white-space: nowrap;
}

.mapboxgl-popup-close-button {
background-image: none !important;
background-color:#275c89 !important;
color: #fff;
font-size: 2rem;
/* Autres styles personnalisés */
}

.mapboxgl-popup-anchor-top .mapboxgl-popup-tip {
border-bottom-color: #e6e8eb; /* Change la couleur de la flèche en rouge */
}

.mapboxgl-popup-anchor-bottom .mapboxgl-popup-tip {
  border-top-color: #e6e8eb;
}

.mapboxgl-popup-anchor-left .mapboxgl-popup-tip {
  border-right-color: #e6e8eb;
}

.mapboxgl-popup-anchor-right .mapboxgl-popup-tip {
  border-left-color: #e6e8eb;
}

.titre_popup {
grid-column:span 2;
display: flex;
justify-content: space-between;
border-bottom:1px solid #c8c8c8;
padding-bottom:0.5rem;
margin-bottom:0.5rem;;
}

.axes_popup {
grid-column:span 2;
display: flex;
justify-content: center;
border-top:1px solid #c8c8c8;
margin-top:0.5rem;
padding-top:0.5rem;
}

.axe_y{
border-left: 1px solid #c8c8c8;
border-right: 1px solid #c8c8c8;
}

.axes_popup > p {
flex: 1;
text-align:center;
}

.footer_popup {
grid-column:span 2;
display: flex;
justify-content: space-between;
gap: 2rem;
border-top:1px solid #c8c8c8;
margin-top:0.5rem;
padding-top:0.5rem;
}

.bloc_right_popup{
padding-left:1rem;
border-left: 1px solid #c8c8c8;
}

.bloc_left_popup{
padding-right:1rem;
}

.titre-popup-carte{
font-size:1.3rem;
font-weight:600;
}

.trace-bouton {
font-size:1.4rem;
font-weight:500;
font-family: 'Roboto Condensed', sans-serif;
}

/*///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
/////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
/////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
/////////////////////////////////////////////////////////                      //////////////////////////////////////////////////////////////////////
/////////////////////////////////////////////////////////                      //////////////////////////////////////////////////////////////////////
/////////////////////////////////////////////////////////        Menu          //////////////////////////////////////////////////////////////////////
/////////////////////////////////////////////////////////                      //////////////////////////////////////////////////////////////////////
/////////////////////////////////////////////////////////                      //////////////////////////////////////////////////////////////////////
/////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
/////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/


#page_menu {
display: flex;
flex-direction: column;
background-color:#e6e8eb;
height: 100svh;
min-width:35.6rem;
}

#bloc_titre{
padding:1.5rem 0rem 1.5rem 0rem;
background-color:#275c89;
color:#fff;
height:8.3rem;
}

#bloc_titre sup{
font-size:1.2rem;	
}

#bloc_titre_horloge{
padding:1.7rem 0rem 0.8rem 0rem;
background-color:#275c89;
color:#fff;
-webkit-user-select: none; /* Pour Chrome, Safari */
-moz-user-select: none;    /* Pour Firefox */
-ms-user-select: none;     /* Pour Internet Explorer/Edge */
user-select: none;         /* Standard */
display:none;
height:8.3rem;
}

#titre_horloge{
display:flex;
align-items: center;
justify-content: center;
font-size:1.5rem;
font-weight:700;
}

#titre_horloge sup{
font-size:1.1rem;
}

#horloge{
font-size:3.2rem;
font-family: "Chivo Mono", monospace;
font-optical-sizing: auto;
font-weight: 700;
font-style: normal;
margin-top:0.1rem;
}

#bloc_menu{
display:flex;
padding:1rem 0rem 0rem 0rem;
flex-wrap: nowrap;
width:100%;
background-color:#44484d;
color:#fff;
}

/* Pour éviter que les textes P puissent etre surlignés/sélectionnés*/
#bloc_menu p { 
  -webkit-user-select: none; /* Pour Chrome, Safari */
  -moz-user-select: none;    /* Pour Firefox */
  -ms-user-select: none;     /* Pour Internet Explorer/Edge */
  user-select: none;         /* Standard */
}

.bouton_bloc_menu_suivi{
position:relative;
background-color:#e6e8eb;
text-align:center;
border-top-right-radius: 8px;
font-size:1.5rem;
font-weight:700;
flex: 1;
margin:0rem 0rem 0rem 0rem;
padding:0.5rem 0rem 0.6rem 0rem;
color:#424242;
}

.bouton_bloc_menu_replay{
background-color:#e6e8eb;
text-align:center;
border-top-right-radius: 8px;
border-top-left-radius: 8px;
font-size:1.5rem;
font-weight:700;
flex: 1;
margin:0rem 0rem 0rem 0rem;
padding:0.5rem 0rem 0.6rem 0rem;
color:#424242;
}

.bouton_bloc_menu_options{
background-color:#e6e8eb;
text-align:center;
border-top-left-radius: 8px;
font-size:1.5rem;
font-weight:700;
flex: 1;
margin:0rem 0rem 0rem 0rem;
padding:0.5rem 0rem 0.6rem 0rem;
color:#424242;
}

.bouton_bloc_menu_off{
text-align:center;
border-radius: 0px;
font-size:1.5rem;
font-weight:700;
flex: 1;
margin:0rem 0rem 0rem 0rem;
padding:0.5rem 0rem 0.6rem 0rem;
cursor:pointer;
}

#suiviplus{
font-size:1.6rem;
font-weight:700;
color:#275c89;
cursor:pointer;
position:absolute;
top:0.2rem;
right:1.2rem;
}


#bloc_voitures_filtre{
padding:0.5rem 0rem 0.5rem 0.5rem;
border-bottom: 1px solid #aaafb4;
font-size:1.2rem;
display:flex;
align-items: center;
justify-content: flex-start;
}

.bloc_chk{
padding:1.2rem 0rem 1.2rem 0rem;
display:flex;
align-items: center;
flex: 1;
}

.bloc_chk > label{
margin-top:0.1rem;
}

input[type="checkbox"] {
  -webkit-appearance: none; /* pour Safari et Chrome */
  -moz-appearance: none; /* pour Firefox */
  appearance: none;
  width: 16px;
  height: 16px;
  border: 1px solid #555a60;
  border-radius: 2px;
  cursor: pointer;
  position: relative;
  background-color: #fff;
  margin:0rem 0.4rem 0rem 1.1rem;
}

input[type="checkbox"]:checked {
  background-color: #275c89;
  border-color: #275c89;
}

input[type="checkbox"]:checked::after {
  content: "";
  position: absolute;
  left: 4px;
  top: 1px;
  width: 6px;
  height: 10px;
  border: solid white;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

/*///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
/////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
/////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
/////////////////////////////////////////////////////////                      //////////////////////////////////////////////////////////////////////
/////////////////////////////////////////////////////////                      //////////////////////////////////////////////////////////////////////
/////////////////////////////////////////////////////////     Liste voitures   //////////////////////////////////////////////////////////////////////
/////////////////////////////////////////////////////////                      //////////////////////////////////////////////////////////////////////
/////////////////////////////////////////////////////////                      //////////////////////////////////////////////////////////////////////
/////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
/////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/

#ligne_voiture_titre{
padding:0.5rem 1rem 0.5rem 1rem;
display: none;
align-items: center;
border-bottom: 1px solid #aaafb4;
background-color: #fff;
font-weight:500;
text-align:left;
font-size:1.4rem;
font-family: 'Roboto Condensed', sans-serif;
}

/* Ce bloc ne sera appliqué que dans Firefox */
@-moz-document url-prefix() {
  #ligne_voiture_titre {
    /* Propriété spécifique à Firefox 
    padding:0.5rem 4rem 0.5rem 1rem;*/
  }
}


#bloc_voitures{
flex: 1;         /* Occupe tout l'espace restant */
overflow-y: scroll; /* Affiche la barre de défilement verticale si nécessaire */
text-align:left;
font-size:1.4rem;
font-family: 'Roboto Condensed', sans-serif;
font-optical-sizing: auto;
-webkit-user-select: none; /* Pour Chrome, Safari */
-moz-user-select: none;    /* Pour Firefox */
-ms-user-select: none;     /* Pour Internet Explorer/Edge */
user-select: none;         /* Standard */
}

.ligne_voiture{
padding:0.5rem 1rem 0.5rem 1rem;
display: flex;
align-items: center;
border-bottom: 1px solid #aaafb4;
}

.concurrent_titre{
width:16rem;
}

.batterie_titre{
width: 2.6rem;
text-align:center;
margin-left:1.5rem;
}

.date_maj_titre{
width:4.0rem;
margin-left:1rem;
text-align:right;
padding-right:0.5rem;
background-color: transparent;
}

.circle_numero_0 {
/* Taille du cercle */
width: 3rem;
height: 3rem;

/* Mise en page : centrer le texte */
display: inline-flex;
justify-content: center;
align-items: center;

/* Apparence du cercle */
border-radius: 50%;
background-color: #585c61; /* gris foncé / eteint */
color: #fff;

/* Style de texte */
font-weight: 700;
font-size:1.4rem;
cursor:pointer;
padding-top:0.1rem;
}

.circle_numero_1 {
width: 3rem;
height: 3rem;
display: inline-flex;
justify-content: center;
align-items: center;
border-radius: 50%;
background-color: #fff; /* blanc / arret*/
color: #424242; 
border: 0.1rem solid #424242;
font-weight: 700;
font-size:1.4rem;
cursor:pointer;
padding-top:0.1rem;
}

.circle_numero_2 {
width: 3rem;
height: 3rem;
display: inline-flex;
justify-content: center;
align-items: center;
border-radius: 50%;
background-color: #00c800; /* vert / mouvement*/
color: #fff;
font-weight: 700;
font-size:1.4rem;
cursor:pointer;
padding-top:0.1rem;
}

.circle_numero_3 {
width: 3rem;
height: 3rem;
display: inline-flex;
justify-content: center;
align-items: center;
border-radius: 50%;
background-color: #00c800; /* vert-noir / arret < 2mn*/
color: #002800;
font-weight: 700;
font-size:1.4rem;
cursor:pointer;
padding-top:0.1rem;
}

.circle_numero_4 {
width: 3rem;
height: 3rem;
display: inline-flex;
justify-content: center;
align-items: center;
border-radius: 50%;
background-color: #f0f000; /* vert foncé / Pas de signal GPS*/
color: #1f1f1f;
border: 0.1rem solid #424242;
font-weight: 700;
font-size:1.4rem;
cursor:pointer;
padding-top:0.1rem;
}

.circle_numero_5 {
width: 3rem;
height: 3rem;
display: inline-flex;
justify-content: center;
align-items: center;
border-radius: 50%;
background-color: #f0f000; /* vert foncé / Pas de réseau 4G - timeout*/
color: #1f1f1f;
border: 0.1rem solid #424242;
font-weight: 700;
font-size:1.4rem;
cursor:pointer;
padding-top:0.1rem;
}

.circle_numero_6 {
width: 3rem;
height: 3rem;
display: inline-flex;
justify-content: center;
align-items: center;
border-radius: 50%;
background-color: #ff8000; /* orange / arreté sur l'ES*/
color: #1f1f1f;
font-weight: 700;
font-size:1.4rem;
cursor:pointer;
padding-top:0.1rem;
}

.circle_numero_7 {
width: 3rem;
height: 3rem;
display: inline-flex;
justify-content: center;
align-items: center;
border-radius: 50%;
background-color: #ff0000; /* rouge / SOS*/
color: #fff;
font-weight: 700;
font-size:1.4rem;
cursor:pointer;
padding-top:0.1rem;
}

.circle_numero_mark {
width: 3rem;
height: 3rem;
display: inline-flex;
justify-content: center;
align-items: center;
border-radius: 50%;
background-color: #fff; /* blanc / arret*/
color: #424242; 
border: 0.2rem solid #424242;
font-weight: 700;
font-size:1.4rem;
cursor: pointer;
}

.circle_numero_mark_100 {
width: 3rem;
height: 3rem;
display: inline-flex;
justify-content: center;
align-items: center;
border-radius: 50%;
background-color: #fff; /* blanc / arret*/
color: #424242; 
border: 0.2rem solid #424242;
font-weight: 700;
font-size:1.2rem;
cursor: pointer;
}

.circle_numero_mark_100B {
width: 3rem;
height: 3rem;
display: inline-flex;
justify-content: center;
align-items: center;
border-radius: 50%;
background-color: #fff; /* blanc / arret*/
color: #424242; 
border: 0.2rem solid #424242;
font-weight: 700;
font-size:0.9rem;
cursor: pointer;
}

.nom_pilote{
font-weight:500;
margin-left:1rem;
width:12rem;
overflow:hidden;
white-space:nowrap;
text-overflow: ellipsis;
}

.txt_legende{
font-weight:500;
margin-left:1rem;
flex:1;
overflow:hidden;
white-space:nowrap;
text-overflow: ellipsis;
}

/* Conteneur principal de la batterie */
.batterie {
position: relative;     /* Nécessaire pour le positionnement absolu interne */
width: 2.6rem;
height: 1.7rem;
border: 2px solid #6e737d;
border-radius: 0.4rem;
box-sizing: border-box;
margin-left:1.5rem;
background-color: #fff;
}

/* Le "bout" de la batterie */
.batterie::after {
content: "";
position: absolute;
right: -0.4rem;
top: 0.2rem;
width: 0.2rem;
height: 0.9rem;
background: #6e737d;
border-top-right-radius: 2px;
border-bottom-right-radius: 2px;
}

/* Barre de niveau de charge (verte) */
.niveau_batterie {
position: absolute;   /* Pour pouvoir l’étirer sur la largeur */
top: 0;
left: 0;
height: 100%;
background-color: #1eff00;
/* width sera ajustée dynamiquement, ex: 50% */
}

.niveau_batterie_faible {
position: absolute;   /* Pour pouvoir l’étirer sur la largeur */
top: 0;
left: 0;
height: 100%;
background-color: #ff8000;
/* width sera ajustée dynamiquement, ex: 50% */
}

/* Texte du pourcentage, centré sur tout l’élément .batterie */
.batterie-text {
position: absolute;   /* Se place par-dessus la barre de niveau */
top: 0px;
left: 0;
width: 100%;
height: 100%;
display: flex;
/*align-items: center;*/
justify-content: center;
font-weight:500;
pointer-events: none; /* Pour ne pas bloquer d’éventuels clics en dessous */
font-size:1.2rem;
}

.vitesse{
margin-left:1rem;
width:5.8rem;
text-align:right;
background-color: transparent;
}

.infos_track{
width:2.7rem;
margin-left:1rem;
text-align:center;
background-color: transparent;
display: none;
}

.date_maj{
width:4.0rem;
margin-left:1rem;
text-align:right;
background-color: transparent;
}


/*///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
/////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
/////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
/////////////////////////////////////////////////////////                      //////////////////////////////////////////////////////////////////////
/////////////////////////////////////////////////////////                      //////////////////////////////////////////////////////////////////////
/////////////////////////////////////////////////////////     bloc options     //////////////////////////////////////////////////////////////////////
/////////////////////////////////////////////////////////                      //////////////////////////////////////////////////////////////////////
/////////////////////////////////////////////////////////                      //////////////////////////////////////////////////////////////////////
/////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
/////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/

#bloc_options{
display: none;
padding:2.5rem 1rem 2.5rem 1rem;
font-weight:500;
font-size:1.7rem;
text-align:center;
flex: 1;
-webkit-user-select: none; /* Pour Chrome, Safari */
-moz-user-select: none;    /* Pour Firefox */
-ms-user-select: none;     /* Pour Internet Explorer/Edge */
user-select: none;         /* Standard */
}

#bloc_options_legende{
text-align:left;
font-size:1.4rem;
font-family: 'Roboto Condensed', sans-serif;
margin-top:3rem;
}

#bloc_lignes_option{
border:1px solid #aaafb4;
border-radius:5px;
padding:1rem;
}

.ligne_option{
padding:0.4rem 1rem 0.4rem 1rem;
display: flex;
align-items: center;
justify-content: space-between;
font-size:1.5rem;
}

.toggle-switch {
  position: relative;
  width: 3.5rem;
  height: 2rem;
}

.toggle-switch input {
  display: none;
}

.slider {
  position: absolute;
  cursor: pointer;
  background-color: #a2a4a8;
  border-radius: 2rem;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  transition: 0.3s;
}

.slider::before {
  content: "";
  position: absolute;
  height: 1.4rem;
  width: 1.4rem;
  left: 0.3rem;
  top: 0.3rem;
  background-color: white;
  border-radius: 50%;
  transition: 0.3s;
}

input:checked + .slider {
  background-color: #275c89;
}

input:checked + .slider::before {
  transform: translateX(15px);
}

.toggle-switch input:disabled + .slider {
  background-color: #ccc;
  cursor: not-allowed;
}

.toggle-switch input:disabled + .slider::before {
  background-color: white;
}

/*///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
/////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
/////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
/////////////////////////////////////////////////////////                             ///////////////////////////////////////////////////////////////
/////////////////////////////////////////////////////////                             ////////////////////////////////////////////////////////////////
/////////////////////////////////////////////////////////     bloc message erreur     ////////////////////////////////////////////////////////////////
/////////////////////////////////////////////////////////                             ////////////////////////////////////////////////////////////////
/////////////////////////////////////////////////////////                             ////////////////////////////////////////////////////////////////
/////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
/////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/

#bloc_mess_erreur{
display: none;
position: absolute;   /* Se place par-dessus la barre de niveau */
bottom: 5.5rem;
left: 36rem;
right:2rem;
background-color: transparent;
z-index:9999;
-webkit-user-select: none; /* Pour Chrome, Safari */
-moz-user-select: none;    /* Pour Firefox */
-ms-user-select: none;     /* Pour Internet Explorer/Edge */
user-select: none;         /* Standard */
}

#bloc_mess_erreur_txt{
display: inline-flex;
flex-direction:column;
justify-content: center;
align-items: center;
text-align:center;
background-color: #ff0000;
padding:1.5rem 3rem 1.5rem 3rem;
border:1px solid #ff0000;
border-radius: 0.5rem;
min-width:25%;
max-width:60%;
}

#mess_erreur{
color:#fff;
font-weight:400;
font-size:1.5rem;
}

#mess_erreur_action{
color:#fff;
font-weight:500;
font-size:1.3rem;
margin-top:1.5rem;
padding:0.8rem 0rem;
border:1px solid #fff;
border-radius: 0.2rem;
width:18rem;
}

#bloc_mess_erreur_ws{
display:none;
position: absolute;   /* Se place par-dessus la barre de niveau */
top: 2rem;
left: 36rem;
right:2rem;
background-color: transparent;
z-index:9999;
-webkit-user-select: none; /* Pour Chrome, Safari */
-moz-user-select: none;    /* Pour Firefox */
-ms-user-select: none;     /* Pour Internet Explorer/Edge */
user-select: none;         /* Standard */
}

#bloc_mess_erreur_txt_ws{
display: inline-flex;
flex-direction:column;
justify-content: center;
align-items: center;
text-align:center;
background-color: #ff0000;
padding:1.5rem 3rem 1.5rem 3rem;
border:1px solid #ff0000;
border-radius: 0.5rem;
min-width:25%;
max-width:60%;
}

#mess_erreur_ws{
color:#fff;
font-weight:400;
font-size:1.5rem;
}


/*///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
/////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
/////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
/////////////////////////////////////////////////////////                      //////////////////////////////////////////////////////////////////////
/////////////////////////////////////////////////////////                      //////////////////////////////////////////////////////////////////////
/////////////////////////////////////////////////////////     bloc replay     //////////////////////////////////////////////////////////////////////
/////////////////////////////////////////////////////////                      //////////////////////////////////////////////////////////////////////
/////////////////////////////////////////////////////////                      //////////////////////////////////////////////////////////////////////
/////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
/////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/

#bloc_replay{
display: none;
padding:2.5rem 1rem 1.0rem 1rem;
font-weight:500;
font-size:1.7rem;
text-align:left;
}

#bloc_replay label{
display:block;
font-size:1.5rem;
margin:0rem 0rem 0.5rem 0.3rem;
}

.input_date {
position:relative;
background-color:#fff;
border:1px solid #c8c8c8;
font-family: inherit;
font-size:1.5rem;
font-weight:400;
color:#424242;
padding:1rem;
border-radius: 2px;
width:100%;
text-align:left;
margin-bottom:2rem;
}

#bloc_voitures_replay{
flex: 1;         /* Occupe tout l'espace restant */
overflow-y: auto; /* Affiche la barre de défilement verticale si nécessaire */
text-align:left;
font-size:1.4rem;
font-family: 'Roboto Condensed', sans-serif;
font-optical-sizing: auto;
border-top: 1px solid #aaafb4;
display: none;
-webkit-user-select: none; /* Pour Chrome, Safari */
-moz-user-select: none;    /* Pour Firefox */
-ms-user-select: none;     /* Pour Internet Explorer/Edge */
user-select: none;         /* Standard */
}

.ligne_voiture_replay{
display: grid;
grid-template-columns: auto 1fr auto auto;
padding:0.5rem 1rem 0.5rem 1rem;
border-bottom: 1px solid #aaafb4;
}

.circle_numero_replay {
width: 3rem;
height: 3rem;
display: inline-flex;
justify-content: center;
align-items: center;
border-radius: 50%;
background-color: #fff;
color: #424242; 
border: 0.1rem solid #787878;
font-weight: 700;
font-size:1.4rem;
padding-top:0.1rem;
}

.nom_pilote_replay{
display:flex;
justify-content: left;
align-items: center;
font-weight:500;
margin-left:1.0rem;
overflow:hidden;
white-space:nowrap;
text-overflow: ellipsis;
}

.icomenu_replay{
display:flex;
justify-content: center;
align-items: center;
margin-left:1.5rem;
text-align:right;
-webkit-user-select: none; /* Pour Chrome, Safari */
-moz-user-select: none;    /* Pour Firefox */
-ms-user-select: none;     /* Pour Internet Explorer/Edge */
user-select: none;         /* Standard */
}

.imgmenu_replay {
width: 2.6rem;
height: 2.6rem;
cursor:pointer;
}

#bloc_replay_console{
display: none;
position: absolute;   /* Se place par-dessus la barre de niveau */
bottom: 0;
left: 35.6rem;
right:0;
background-color: #e6e8eb;
justify-content: center;
align-items:stretch;
font-weight:500;
font-size:2rem;
z-index:9999;
padding:0;
height:5rem;
-webkit-user-select: none; /* Pour Chrome, Safari */
-moz-user-select: none;    /* Pour Firefox */
-ms-user-select: none;     /* Pour Internet Explorer/Edge */
user-select: none;         /* Standard */
}

#bloc_intervalle{
display: flex;
justify-content: center;
align-items:center;
background-color: #275c89;	
color:#fff;
width:13rem;
padding:0rem 1rem;
}

#intervalle_moins{
cursor:pointer;
}

#vitessex{
margin-top: 0.1rem;
font-size:2.0rem;
flex: 1;
}

#intervalle_plus{
cursor:pointer;
}


#bloc_play{
display: flex;
justify-content: space-evenly;
align-items:center;
background-color: #275c89;	
color:#fff;
border-left:0.1rem solid #aeb0b4;
width:13rem;
}

#play{
cursor:pointer;
}

#step_prec{
cursor:pointer;
width:1.7rem;
height:1.7rem;
}

#step_suiv{
cursor:pointer;
width:1.7rem;
height:1.7rem;
}

#bloc_range{
display: flex;
justify-content: center;
align-items:center;
flex: 1;
}

/* Désactive l’apparence native */
input[type="range"] {
  -webkit-appearance: none;
  width: 90%;
  height: 1rem;
  border-radius: 0.5rem;
  cursor: pointer;
  outline: none;
  background: #b4b6b9;
}

/* Style de la barre (track) */ 
input[type="range"]::-webkit-slider-runnable-track {
  width: 100%;
  height: 1rem;
  border-radius: 0.5rem;
  cursor: pointer;
  /* background: #b4b6b9; */
}

/* Style du "rond" (thumb) */
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 2.4rem;
  height: 2.4rem;
  border-radius: 50%;
  background: #fff;
  border: 0.2rem solid #3f78ae; /* couleur de bordure par défaut */
  cursor: pointer;
  margin-top: -0.7rem; /* pour centrer verticalement le thumb par rapport au track */
  transition: background 0.2s, border-color 0.2s;
}

input[type="range"]::-moz-range-thumb {
  width: 2.4rem;
  height: 2.4rem;
  border-radius: 50%;
  background: #fff;
  border: 0.2rem solid #3f78ae;
  cursor: pointer; /* Cursor on hover */
  transition: background 0.2s, border-color 0.2s;
}

/* Lorsque le thumb est actif (clic ou glissé) */
input[type="range"]:active::-webkit-slider-thumb {
  background: #3f78ae; /* couleur de fond du thumb actif */
  border-color: #3f78ae;
}

input[type="range"]:active::-moz-range-thumb {
  background: #3f78ae; /* couleur de fond du thumb actif */
  border-color: #3f78ae;
}

/*
input[type="range"].active-track::-webkit-slider-runnable-track {
  background: linear-gradient(to right, #3f78ae 50%, #b4b6b9 50%);
}


input[type="range"].active-track::-moz-range-progress {
  background: #3f78ae; couleur de la partie active
  height: 1rem;
  border-radius: 0.5rem;
}

input[type="range"].active-track::-moz-range-track {
  background: #b4b6b9; couleur de la partie inactive
  height: 1rem;
  border-radius: 0.5rem;
}
*/


#bloc_heure{
display: flex;
justify-content: center;
align-items:center;
background-color: #275c89;	
color:#fff;
font-size:2.4rem;
width:21rem;
}


/*///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
/////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
/////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
/////////////////////////////////////////////////////////                      //////////////////////////////////////////////////////////////////////
/////////////////////////////////////////////////////////                      //////////////////////////////////////////////////////////////////////
/////////////////////////////////////////////////////////       CONNEXION      //////////////////////////////////////////////////////////////////////
/////////////////////////////////////////////////////////                      //////////////////////////////////////////////////////////////////////
/////////////////////////////////////////////////////////                      //////////////////////////////////////////////////////////////////////
/////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
/////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/
#arrplan {
margin: 0;
padding: 0;
background-image: url("../images/arrplanconex.webp");
background-size: cover;           /* adapte l'image à la taille de l'écran */
background-position: center;      /* centre l'image */
background-repeat: no-repeat;     /* empêche la répétition */
height: 100vh;
}

#entete {
display:flex;
color:white;
font-size:2.4rem;
font-weight:700;flex: auto;
background-color:#215c94;
justify-content: space-between;
align-items: center;
padding:1rem 2rem 1rem 2rem;
}

#bloc-form {
display:inline-block;
padding:5rem;
margin-top:8rem;
background-color:#f0f0f0;
border-radius:0.5rem;
text-align:right;
}

.label_form{
font-size:1.6rem;
font-weight:700;
text-align:right;
display:inline-block;
text-align:right;
padding:0rem 0.5rem 0rem 0rem;
}

#login{
background-color:#fff;
border:1px solid #c8c8c8;
font-family: 'Roboto', sans-serif;
font-weight: 400;
font-size:1.6rem;
color:#333;
padding:0.5rem;
width:17rem;
margin-bottom:1rem;
}

#mdp{
background-color:#fff;
border:1px solid #c8c8c8;
font-family: 'Roboto', sans-serif;
font-weight: 400;
font-size:1.6rem;
color:#333;
padding:0.5rem;
width:17rem;
margin-bottom:1rem;
}

#mdpinvalide {
width:17rem;
margin-bottom:1rem;
text-align:left;
float:right;
color:red;
font-size:1.4rem;
font-weight:700;
}

.bouton{
display:inline-block;
background-color:#215c94;
width:17rem;
padding: 0.6rem 3rem 0.8rem 3rem;
color:#fff;
text-align:center;
border-radius: 2px;
font-family: 'Roboto', sans-serif;
font-size:1.6rem;
cursor: pointer;
font-weight:700;
}


/*///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
/////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
/////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
/////////////////////////////////////////////////////////                      //////////////////////////////////////////////////////////////////////
/////////////////////////////////////////////////////////                      //////////////////////////////////////////////////////////////////////
/////////////////////////////////////////////////////////     Media Queries    //////////////////////////////////////////////////////////////////////
/////////////////////////////////////////////////////////                      //////////////////////////////////////////////////////////////////////
/////////////////////////////////////////////////////////                      //////////////////////////////////////////////////////////////////////
/////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
/////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/



/* ****************** ecran 4k 3840 ************************************* */

@media (min-width: 3200px) {
html{font-size: 125%;}
}



/* ****************** ecran 2560 ************************************* */
@media (min-width: 2300px) and (max-width: 3000px) {
html{font-size: 84%;}
}

@media (max-width: 700px) {
/* page connexion */
#logosuivi{display:none;}
#logolsar{display:none;}
#entete {justify-content: center;}
#bloc-form {margin: 8rem 2rem 0rem 2rem;padding:3rem 3rem;}
#login{width:15rem;}
#mdp{width:15rem;}
#mdpinvalide {width:15rem;}
.bouton{width:15rem;}
#arrplan {height: 100svh;}
}



/* **********************************************************************************************************************  */
/* **********************************************************************************************************************  */
/* **********************************************************************************************************************  */
/* **********************************************************************************************************************  */
/* **********************************************************************************************************************  */
/* **********************************************************************************************************************  */
/* **********************************************************************************************************************  */
/* **********************************************************************************************************************  */
/* **********************************************************************************************************************  */
/* **********************************************************************************************************************  */
/* **********************************************************************************************************************  */
/* **********************************************************************************************************************  */
/* **********************************************************************************************************************  */
/* **********************************************************************************************************************  */
/* **********************************************************************************************************************  */
/* **********************************************************************************************************************  */
/* **********************************************************************************************************************  */
/* **********************************************************************************************************************  */
/* **********************************************************************************************************************  */
/* **********************************************************************************************************************  */
/* **********************************************************************************************************************  */
/* **********************************************************************************************************************  */
/* **********************************************************************************************************************  */
/* **********************************************************************************************************************  */
/* **********************************************************************************************************************  */
/* **********************************************************************************************************************  */
/* **********************************************************************************************************************  */
/* **********************************************************************************************************************  */
/* **********************************************************************************************************************  */
/* **********************************************************************************************************************  */