body, html {
	margin: 0;
	padding: 0;
	width: 100%;
	height: 100%;
	overflow: hidden;
	font-family: 'Roboto', sans-serif;
	 cursor: none;
}
#openseadragon {
	width: 100vw; 
	height: 100vh;
	/*overflow: auto;*/
	z-index: 1;
	position: relative;
	background-color: black;
	/*border: 1px solid yellow;
	image-rendering: pixelated !important;
    image-rendering: -moz-crisp-edges !important;
    image-rendering: crisp-edges !important;*/
}
/*
.openseadragon > img {
    image-rendering: pixelated !important;
    image-rendering: -moz-crisp-edges !important;
    image-rendering: crisp-edges !important;
}
*/

#canvas {
	position: absolute; /* Permet de superposer les canvas */
	top: 0;
	left: 0;
	width: 100vw;
	height: 100vh;
	z-index: 10;
	pointer-events: none;
	/*border: 1px solid red;*/
}		
/*
#echelle-convection {
    position: fixed; 
    top: 10px;        
    right: 10px;      
    z-index: 9; 
	transform: scale(0.7);
	opacity: 0;
}
*/

/* ========================================================================= */
/* Slider */
/* ========================================================================= */
/* 1. Mise à jour de l'Overlay du Slider */
#slider-overlay {
    position: absolute; 
    bottom: 20px; 
    left: 50%;
    transform: translateX(-50%); 
    z-index: 100; 
    background: rgba(0, 0, 0, 0); 
    padding: 10px 20px 30px; /* Espace en bas pour les graduations */
    border-radius: 5px;
    color: white;
    
    /* Largeur du conteneur extérieur (80vw) */
    width: 80vw; 
    max-width: none; 

    text-align: center;
    display: flex; 
    align-items: center; 
    justify-content: center; /* Centrer le contenu (slider-container) */
}

/* 3. Conteneur principal du Slider et des Ticks */
#slider-container {
    /* Il prend la totalité de la largeur disponible dans l'overlay */
    flex-grow: 1; 
    flex-basis: 0; 
    
    text-align: left; 
    position: relative; 
}

/* 4. Style du conteneur noUiSlider */
#slider-container #imageSlider {
    margin-top: 25px; /* Ajoute de l'espace au-dessus du slider */
	height: 5px;
}

#imageSlider .noUi-base {
    height: 7px; /* Épaisseur de la piste */
}

/* Style du CURSEUR UNIQUE (le handle 0) */
#imageSlider .noUi-handle[data-handle="0"] {
    background: rgb(255, 180, 0, 0.7); /*#FF004C; /* Curseur unique bien visible (Rouge/Magenta) */
    border-color: black; /*#AA0030;*/
    /*box-shadow: 0px 0px 5px rgba(255, 0, 76, 0.8);*/
	top: -10px;
}
#imageSlider .noUi-connect {
    background: #007bff; /* Bleu standard */
}

/* 5. NOUVELLES RÈGLES : Style du Tooltip (Date/Heure) */
#imageSlider .noUi-tooltip {
    /* Permet au contenu d'aller à la ligne (essentiel pour l'affichage sur 2 lignes) */
    white-space: normal; 
    
    /* Ajuster la largeur pour accommoder la date */
    min-width: 90px; 
    max-width: 140px; 
    
    /* Centrer le texte */
    text-align: center; 
    
    /* Augmenter la hauteur pour accommoder 2 lignes */
    padding: 1px 2px; 
    
    /* Optionnel : Ajuster la position pour le nouveau format */
    bottom: 150%; 
    
    /* Optionnel : Légèrement plus grand pour la lisibilité */
    font-size: 0.9em;
}

/* 6. Structure et Style des Graduations Temporelles (Inchangé) */
#slider-ticks {
    position: absolute;
    top: 0px; /*55px; */
    left: 0;
    right: 0;
    height: 35px; 
    z-index: 1;
    pointer-events: none; 
}

/* ... (Le reste des styles .tick, .hour-tick, .hour-12, .hour-00, .day-label reste inchangé) ... */
.tick {
    position: absolute;
    width: 1px;
    height: 10px; 
    background: rgba(255, 255, 255, 0.7); 
    bottom: 0;
    transform: translateX(-50%); 
}

.tick.hour-tick {
    height: 10px;
    background: rgba(255, 255, 255, 0.5);
}

.tick.hour-12 {
    height: 14px; 
    width: 2px;
    background: rgb(150, 250, 255); 
}

.tick.hour-00 {
    height: 18px; 
    width: 3px;
    background: rgb(255, 180, 0); 
}

.day-label {
    position: absolute;
    top: 0px; 
    font-size: 0.8em
	font-weight: 300;
    color: #fff;
    white-space: nowrap; 
    transform: translateX(-50%);
}

/* Style pour les mentions "00h" et "12h" */
.hour-label {
    position: absolute;
    /* Position verticale : sous le tick (les ticks commencent en bas de #slider-ticks) */
    bottom: -20px; /* Déplacer sous les ticks de 10px */
    font-size: 1.0em;
    font-weight: 300;
    color: #fff; /*rgba(255, 255, 255, 0.7); /* Gris clair */
    white-space: nowrap; 
    /* Centrage horizontal sur la position 'left' */
    transform: translateX(-50%); 
}

/* ========================================================================= */
/* Coordinates Box */
/* ========================================================================= */
#coord-box {
	position: fixed;
	top: 30px;
	left: 10px;
	background-color: #fff;
	color: #222;
	border: 1px solid #ccc;
	padding: 5px 5px;
	box-shadow: 2px 2px 8px rgba(0,0,0,0.08);
	z-index: 2000;
	font-family: monospace;
	font-size: 18px;
	min-width: 180px;
	line-height: 1.6;
	text-align: left;
}		

/* ========================================================================= */
/* Toolbar */
/* ========================================================================= */
.icon-bar {
	position: absolute;
	top: 100px;
	left: 20px;
	width: 50px;
	background: rgba(255, 255, 255, 0.7);
	border-radius: 8px;
	box-shadow: 2px 2px 5px rgba(0,0,0,0.2);
	border: 1px solid #ccc;
	z-index: 1000;
	display: flex;
	flex-direction: column;
	align-items: center;
	user-select: none;
	cursor: grab;
	font-size: 14px; /* taille texte fixe */  /* ajout recent */
	/*transform-origin: top left;*/
}

.icon-bar .drag-handle {
	width: 100%;
	height: 15px;
	background: #f3f3f3;
	border-bottom: 1px solid #ccc;
	cursor: grab;
	border-radius: 8px 8px 0 0;
	margin-bottom: 5px;
}

.icon-bar button {
	background: none;
	border: none;
	margin: 1px 0;
	width: 44px;
	height: 44px;
	cursor: pointer;
	padding: 0;
	font-size: inherit; /* hérite du parent */  /* ajout recent */
}

.icon-bar button img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

/*
.icon-bar button:hover {
	background: #eee;
}		
*/

/* Clic sur un bouton de la barre d'icônes (sélection) */
.icon-bar button.selected {
    background-color: #ccc; /* Fond gris pour simuler un bouton enfoncé */
    transform: translateY(4px); /* Enfoncement du bouton */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); /* Ombre pour donner un effet 3D */
}

/* Effet au survol du bouton */
.icon-bar button:hover {
    background: #eee;
    transform: scale(1.05); /* Légère augmentation de la taille pour l'interaction */
    transition: transform 0.2s ease-in-out;
}

/* Effet lors du clic (enfoncement immédiat) */
.icon-bar button:active {
    transform: translateY(2px); /* Enfoncer encore un peu plus lors du clic */
    box-shadow: none; /* Pas d'ombre pour un effet totalement enfoncé */
}

.highlighted {
    background-color: #212121; /* Gris anthracite pour l'effet enfoncé */
    transform: translateY(2px); /* Légère translation pour l'effet 3D */
    box-shadow: inset 0 6px 12px rgba(0, 0, 0, 0.8), /* Ombre intérieure pour l'enfoncement */
                0 2px 6px rgba(0, 0, 0, 0.6); /* Ombre extérieure pour simuler la profondeur */
	/*background-color: #ccc; */
	/*box-shadow: 0 0 0 4px black;*/
}	

/* ========================================================================= */
/* Toolbar secondaire pour le choix de grille */
/* ========================================================================= */
.grid-toolbar {
	position: absolute;
	display: flex;
	flex-direction: row;
	align-items: center;
	background: rgba(255, 255, 255, 0.7);
	border-radius: 8px;
	box-shadow: 2px 2px 5px rgba(0,0,0,0.2);
	border: 1px solid #ccc;
	z-index: 1000;
	padding: 4px;
	user-select: none;
}

.grid-toolbar button {
	background: none;
	border: none;
	margin: 0 2px;
	width: 44px;
	height: 44px;
	cursor: pointer;
	padding: 0;
}

.grid-toolbar button img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.grid-toolbar button:hover {
	background: #eee;
}

/* ========================================================================= */
/* Gestion des boites modales */
/* ========================================================================= */
#modalBackdrop {                                 /* Fond semi-transparent couvrant l'écran */
  display: none;                                 /* Masque l'élément par défaut */
  position: fixed;                               /* Position fixe sur toute la page */
  top: 0; left: 0; right: 0; bottom: 0;          /* Étend sur tout l'écran */
  background-color: rgba(0,0,0,0.45);            /* Fond noir semi-transparent */
  z-index: 1000;                                 /* Place au-dessus des autres éléments */
}

#modalBox {                                      /* Boîte modale principale */
  display: none;                                 /* Masque l'élément par défaut */
  position: fixed;                               /* Position fixe au centre */
  top: 50%; left: 50%;                           /* Centre la boîte */
  transform: translate(-50%, -50%);              /* Ajuste au centre exact */
  background: white;                              /* Fond blanc */
  border-radius: 6px;                            /* Coins arrondis */
  width: 400px;                                  /* Largeur de la boîte modale */
  max-width: 90vw;                               /* Largeur max 90% viewport */
  max-height: 80vh;                              /* Hauteur max 80% viewport */
  overflow-y: auto;                              /* Défilement vertical si besoin */
  box-shadow: 0 2px 12px rgba(0,0,0,0.5);        /* Ombre portée */
  z-index: 1001;                                 /* Au-dessus du backdrop */
  font-family: Arial, sans-serif;                 /* Police de caractère */
  box-sizing: border-box;                        /* Inclut padding/bordure dans taille */
  flex-direction: column;                        /* Organisation en colonne */
}

/* Header */
#modalHeader {                                   /* En-tête de la modale */
  padding: 5px 8px;                              /* Espacement interne */
  font-weight: bold;                             /* Texte en gras */
  font-size: 1.0em;                              /* Taille police "Satellite Info" */
  /*border-bottom: 1px solid #ddd;*/                 /* Bordure inférieure grise */
  display: flex;                                 /* Affichage flex pour alignement */
  justify-content: space-between;                /* Espace entre éléments */
  align-items: center;                           /* Alignement vertical centré */
}

#modalTitle {                                    /* Titre de la modale */
  padding: 5px 8px;                              /* Espacement interne */
  background-color: #f0f0f0;                     /* Fond gris très clair */
  color: #000000;                                /* Texte noir */
  border-radius: 4px;                            /* Coins arrondis */
  user-select: none;                             /* Désactive sélection texte */
  font-weight: bold;                             /* Texte en gras */
  font-size: 1.2em;                              /* Taille de police */
  flex-grow: 1;                                  /* Occupe l'espace disponible */

}
#satelliteImg {
	margin-top: -10px;
	margin-bottom: 10px;
	padding: 0;
	display: block;
	border-radius: 4px;
	max-width: 450px;
	width: 100%;
	height: auto;
}
/* Contenu */
#modalContent {                                  /* Contenu principal de la modale */
  padding: 5px 8px;                            /* Espacement interne */
  flex-grow: 1;                                  /* Occupe l'espace disponible */
  overflow-y: auto;                              /* Défilement vertical si besoin */
}

/* Footer */
#modalFooter {                                   /* Pied de page de la modale */
  padding: 5px 8px;                            /* Espacement interne */
  /*border-top: 1px solid #ddd;*/                    /* Bordure supérieure grise */
  text-align: right;                             /* Alignement texte à droite */
}

#doneBtn {                                       /* Bouton "Done" */
  padding: 6px 14px;                             /* Espacement interne */
  border: none;                                  /* Pas de bordure */
  background-color: #26a69a;                     /* Fond vert teal */
  color: white;                                  /* Texte blanc */
  border-radius: 4px;                            /* Coins arrondis */
  cursor: pointer;                               /* Curseur main au survol */
  font-weight: bold;                             /* Texte en gras */
}

#doneBtn:hover {                                 /* Style au survol du bouton */
  background-color: #2bbbad;                     /* Fond vert plus clair */
}

/* Liste éléments type (satellite, channels, etc.) */
.item {                                         /* Conteneur pour élément de liste */
  padding: 10px;                                /* Espacement interne */
  display: flex;                                /* Affichage flex pour alignement */
  cursor: pointer;                              /* Curseur main au survol */
  align-items: center;                          /* Alignement vertical centré */
}

.item:hover {                                   /* Style au survol de l'élément */
  background-color: #eef;                       /* Fond bleu clair */
}

.checkbox {                                     /* Style de la case à cocher */
  width: 20px;                                  /* Largeur de la case */
  height: 20px;                                 /* Hauteur de la case */
  border: 1.5px solid #000;                     /* Bordure noire */
  margin-right: 8px;                            /* Marge à droite */
  position: relative;                           /* Positionnement pour ::after */
}

.checkbox.checked::after {                      /* Coche dans case cochée */
  content: '';                                  /* Contenu vide pour coche */
  position: absolute;                           /* Position absolue dans case */
  top: 2px; left: 6px;                          /* Position de la coche */
  width: 5px; height: 10px;                     /* Taille de la coche */
  border: solid black;                          /* Bordure noire pour coche */
  border-width: 0 2px 2px 0;                    /* Forme de la coche */
  transform: rotate(45deg);                     /* Rotation pour forme de coche */
}

.item-text {                                    /* Texte de l'élément */
  flex: 1;                                      /* Occupe l'espace disponible */
}

.channel-line1 {                                /* Première ligne de texte canal */
  font-weight: bold;                            /* Texte en gras */
}

.channel-line2 {                                /* Deuxième ligne de texte canal */
  font-size: 0.85em;                            /* Taille police 85% parent */
  color: #555;                                  /* Couleur gris foncé */
}

/* Section d’information type infoSatellite */
.info-section {                                /* Conteneur section info */
  margin-bottom: 10px;                         /* Marge inférieure */
  /*border: 2px solid red;                       /* Ajoute une bordure rouge pour voir le padding */
  /*outline: 2px solid blue;                     /* Contour bleu pour visualiser l'élément + margin */  

}

.info-section h3 {                             /* Titre de section info */
  background-color: #f0f0f0;                   /* Fond gris très clair */
  color: #000000;                              /* Texte noir */
  padding: 4px 8px;                           /* Espacement interne */
  border-radius: 4px;                          /* Coins arrondis */
  user-select: none;                           /* Désactive sélection texte */
  /*border: 2px solid red;                       /* Ajoute une bordure rouge pour voir le padding */
  /*outline: 2px solid blue;                     /* Contour bleu pour visualiser l'élément + margin */
  margin: 0px;
}

table {                                        /* Style du tableau */
  width: 100%;                                 /* Largeur pleine */
  border-collapse: collapse;                    /* Fusionne bordures cellules */
}

th, td {                                       /* Cellules du tableau */
  padding: 2px 2px;                            /* Espacement interne */
  border-bottom: 1px solid #ccc;                /* Bordure inférieure grise */
  vertical-align: top;                         /* Alignement vertical haut */
  font-size: 1.0em;                            /* Taille police 85% parent */
}

th {                                           /* En-têtes du tableau */
  text-align: left;                            /* Alignement texte à gauche */
  width: 40%;                                  /* Largeur 40% du tableau */
  font-weight: 600;                        /* Texte en gras */
}