@charset "utf-8";
/* CSS Document */
/* --- RÉSÈT & BASES --- */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}
body {
    background-color: #f5f7fa;
    color: #333;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}
header {
    background-color: #ffffff;
    text-align: center;
    padding: 1px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}
/* --- STRUCTURE DES ONGLETS --- */
.tabs-container {
    display: flex;
    flex-direction: column;
    flex: 1;
}
/* Masquer les boutons radio natifs */
.tab-input {
    display: none;
}
/* --- BARRE D'ONGLETS (NAVIGATION) --- */
.tab-nav {
	background: black url(../Images/glossybackbleu.gif) repeat-x bottom left;
	box-shadow: inset 1px 1px 2px rgba(255, 255, 255, .6),
                inset -1px -1px 2px rgba(0, 0, 0, .6);
	color: white;
	display: flex;
	position: sticky; /*To help in the anchoring of the ".statusicon" icon image*/
	width: auto;
	padding-top: 4px;
	padding-left: 2px;
	padding-right: 0px;
	padding-bottom: 4px;
	text-decoration: none;
	border-radius: 7px;
    top: 0;
    z-index: 10;
}
.tab-label {
    flex: 1;
    text-align: center;
    padding: 2px 1px;
    font-size: 0.95rem;
    font-weight: 600;
    color: #666;
    cursor: pointer;
    transition: all 0.2s ease;
    border-bottom: 3px solid transparent;
    /* Évite la sélection de texte lors des clics répétés */
    -webkit-tap-highlight-color: transparent;
    user-select: none;
}
/* --- CONTENU DES ONGLETS --- */
.tab-panels {
    flex: 1;
    position: relative;
    /*background-image: url("../Images/PapierGris.png");*/
    background-color: #f5f7fa;
}
.tab-panel {
    padding: 5px;
    display: none; /* Masqué par défaut */
    animation: fadeIn 0.3s ease;
}
/* Zone de défilement propre pour le contenu long sur mobile */
.tab-panel h2 {
    margin-bottom: 5px;
    font-size: 1.1rem;
    text-align: center;
    color: darkred;
}
.tab-panel p {
    font-size: 0.8rem;
    line-height: 1.5;
    color: #555;
}
#ConteneurCanvas {
    display: flex;
    justify-content: center;
}
/* --- LOGIQUE D'AFFICHAGE (SANS JAVASCRIPT) --- */
#tab1:checked ~ .tab-nav label[for="tab1"],
#tab2:checked ~ .tab-nav label[for="tab2"],
#tab3:checked ~ .tab-nav label[for="tab3"],
#tab4:checked ~ .tab-nav label[for="tab4"],
#tab5:checked ~ .tab-nav label[for="tab5"],
#tab6:checked ~ .tab-nav label[for="tab6"],
#tab7:checked ~ .tab-nav label[for="tab7"],
#tab8:checked ~ .tab-nav label[for="tab8"],
#tab9:checked ~ .tab-nav label[for="tab9"] {
    color: #FFD700; /* Couleur iOS Blue */
    border-bottom-color: #FFD700;
}
#tab1:checked ~ .tab-panels #panel1,
#tab2:checked ~ .tab-panels #panel2,
#tab3:checked ~ .tab-panels #panel3,
#tab4:checked ~ .tab-panels #panel4,
#tab5:checked ~ .tab-panels #panel5,
#tab6:checked ~ .tab-panels #panel6,
#tab7:checked ~ .tab-panels #panel7,
#tab8:checked ~ .tab-panels #panel8,
#tab9:checked ~ .tab-panels #panel9 {
    display: block; /* Affiche le panneau actif */
}
/* Animation fluide à l'apparition */
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(4px); }
    to { opacity: 1; transform: translateY(0); }
}
.img-banniere {
    width: 100%;
    height: auto;
    max-width: 100%;
    display: block;
}
.statutstationOK {
    background-color: #32CD32;
    border-radius:10px;
    border-color:#006400;
    border-style:ridge;
    border-width:5px;
    color:#FFFFFF;
    font-family:Gotham, "Helvetica Neue", Helvetica, Arial, "sans-serif";
    font-size:0.7rem;
    font-style:italic;
    font-weight:bold;
    text-align:center;
    padding:5px;
}
.statutstationFail {
    background-color: #FFB6C1;
    border-radius:10px;
    border-color:#8B0000;
    border-style:ridge;
    border-width:5px;
    color:#FF0000;
    font-family:Gotham, "Helvetica Neue", Helvetica, Arial, "sans-serif";
    font-size:0.7rem;
    /*font-style:italic;*/
    font-weight:bold;
    text-align:center;
    padding:5px;
}
.texte-clignotant {
    animation: txtblink 1s steps(2, start) infinite;
}
@keyframes txtblink {
  to {
    visibility: hidden;
  }
}
.DIV_Parametre {
    background-color:#0080C0;
    border-radius:10px;
    border-color:#CC0000;
    border-style:ridge;
    border-width:5px;
    color:#FFFF00;
    font-family:Gotham, "Helvetica Neue", Helvetica, Arial, "sans-serif";
    font-size:0.8rem;
    font-style:italic;
    font-weight:bold;
    text-align:center;
    padding:5px;
}
.Table_Conteneur{
    border-width: 4px;
    border-color: gray;
    border-style: ridge;
    border-radius: 10px;
}
.EnteteDeTableau{
    border-color:#CCCCCC;
    font-family: Gotham, "Helvetica Neue", Helvetica, Arial, "sans-serif";
    font-size: 0.8rem;
    font-style: italic;
    font-weight: bold;
    padding: 3px 0px;
    text-align: center;
    color: red;
}
.TD_Header_Tooltip_MiniGraph {
	background-color:#0080C0;
	border-radius:3px;
	border-color:#00CCCC;
	border-style:ridge;
	border-width:3px;
	color:#FFFF00;
    font-family: Gotham, "Helvetica Neue", Helvetica, Arial, "sans-serif";
	font-size:10px;
	font-style:italic;
	font-weight:bold;
	text-align:center;
	padding:5px;
}
.Txt_Bleu_08rem{
    color: blue;
    font-size: 0.8rem;
    /*font-style: italic;
    font-weight: bold;*/
}
.Txt_Bleu_Normal{
    color: blue;
    font-size: 0.7rem;
    /*font-style: italic;
    font-weight: bold;*/
}
.Txt_Noir_08rem{
    color: black;
    font-size: 0.8rem;
    /*font-style: italic;
    font-weight: bold;*/
}
.Txt_Noir_08rem_Gras{
    color: black;
    font-size: 0.8rem;
    font-weight: bold;
}
.Txt_Noir_Normal{
    color: black;
    font-size: 0.7rem;
    /*font-style: italic;
    font-weight: bold;*/
}
.Txt_Noir_Normal_Justifie{
    color: black;
    font-size: 0.7rem;
    text-align: justify;
    font-weight: bold;
}
.Txt_Rouge_08rem{
    color: red;
    font-size: 0.8rem;
    /*font-weight: bold;*/
}
.Txt_Rouge_08rem_Gras{
    color: red;
    font-size: 0.8rem;
    font-weight: bold;
}
.Txt_RougeFonce_05rem{
    color: darkred;
    font-size: 0.6rem;
    font-weight: bold;
}

.Txt_Rouge_Normal{
    color: red;
    font-size: 0.7rem;
    /*font-style: italic;
    font-weight: bold;*/
}
.Txt_Vert_08rem{
    color: green;
    font-size: 0.8rem;
    /*font-weight: bold;*/
}
.Txt_Vert_08rem_Gras{
    color: green;
    font-size: 0.8rem;
    font-weight: bold;
}
.Txt_Vert_Normal{
    color: red;
    font-size: 0.7rem;
    /*font-style: italic;
    font-weight: bold;*/
}
.td_GaugesCirculaire_Bleu{
	background-image: url(../Images/PapierBleu.png);
	border-color:#EDD110;
	border-radius:10px;
	border-style:groove;
	border-width:1px;
	box-shadow:5px 5px 20px 5px #666666;
	height:240px;
	width:240px;
    align-items: center;
    align-content: center;
}
.td_GaugesDouble_Bleu{
	background-image: url(../Images/PapierBleu.png);
	border-color:#EDD110;
	border-radius:10px;
	border-style:groove;
	border-width:1px;
	box-shadow:5px 5px 20px 5px #666666;
	height:240px;
	width: 100vw;
    align-items: center;
    align-content: center;
}
.canvasCirculaire{
    display: block;
    margin: 0 auto;
	vertical-align: middle;
	border-radius:210px;
	box-shadow:3px 3px 5px 3px #666666;
	height: 220px;
	width: 220px;
}
.canvasLineaireVertical{
	border-radius: 10px;
	box-shadow:3px 3px 5px 3px #666666;
	height: 220px;
	width: 123px;
}
.canvasLineaireVerticalUnique{
	border-radius: 10px;
	box-shadow:3px 3px 5px 3px #666666;
	height: 250px;
	width: 140px;
}
.canvasLineaireVertical{
	border-radius: 10px;
	box-shadow:3px 3px 5px 3px #666666;
	height: 220px;
	width: 123px;
}
.canvasLineaireHorizontal{
	border-radius: 10px;
	box-shadow:3px 3px 5px 3px #666666;
	height: 123px;
	width: 220px;
}
.EnteteCommentGauge{
    font-family: Gotham, "Helvetica Neue", Helvetica, Arial, "sans-serif";
	font-size: 1rem;
	font-style:italic;
	font-weight:bold;
	text-align:center;
    color: darkblue;
}