` qui contient le contenu principal. */ padding: 10px; /* Rembourrage intérieur de 10px. */ width: 100%; /* S'assure que l'élément `

` prend 100% de la largeur disponible de son parent. */ max-width: 2560px; /* Limite la largeur maximale à 2560px, pour éviter que le contenu ne s'étire trop sur de très grands écrans. */ margin: 0 auto; /* Centre l'élément `

` horizontalement dans son parent en définissant des marges automatiques gauche et droite. */ } /* Styles pour les lignes d'en-tête et de données des tableaux (grids) */ .header-row, .data-row { /* Appliqué aux éléments avec les classes `header-row` (en-tête de tableau) et `data-row` (ligne de données). */ display: grid; /* Active le modèle de boîte de grille CSS (CSS Grid) pour ces éléments. */ grid-template-columns: repeat(auto-fit, minmax(10px, 1fr)); /* * Définit les colonnes de la grille. * - `repeat(auto-fit, ...)`: Crée autant de colonnes que possible qui tiendront dans l'espace disponible. * - `minmax(10px, 1fr)`: Chaque colonne aura une largeur minimale de 10px et une largeur maximale de 1 fraction de l'espace disponible. * Cela permet une disposition fluide et adaptative pour les colonnes du tableau. */ padding: 6px 0; /* Rembourrage de 6px en haut/bas, 0 à gauche/droite. */ align-items: center; /* Aligne verticalement le contenu de chaque cellule au centre de la ligne. */ border-bottom: 1px solid rgba(255, 255, 255, 0.1); /* Ajoute une bordure inférieure fine et semi-transparente. */ } .header-row { /* Styles spécifiques à la ligne d'en-tête. */ color: var(--header-color); /* Couleur du texte de l'en-tête. */ font-weight: bold; /* Texte en gras. */ text-transform: uppercase; /* Transforme le texte en majuscules. */ letter-spacing: 0.8px; /* Espacement des lettres. */ font-size: 0.75em; /* Taille de police plus petite pour l'en-tête. */ background-color: rgba(0, 0, 0, 0.2); /* Couleur de fond semi-transparente noire. */ border-radius: 8px 8px 0 0; /* Arrondit les coins supérieurs gauche et droit. */ padding: 8px 0; /* Rembourrage spécifique pour l'en-tête. */ } .header-row > div { /* Styles pour les cellules individuelles (direct children `div`) de la ligne d'en-tête. */ text-align: center; /* Centre le texte dans chaque cellule. */ display: flex; /* Active Flexbox pour le contenu de la cellule. */ flex-direction: column; /* Empile le contenu de la cellule verticalement. */ align-items: center; /* Centre horizontalement le contenu de la cellule. */ justify-content: center; /* Centre verticalement le contenu de la cellule. */ gap: 3px; /* Ajoute un espace de 3px entre les éléments enfants (par exemple, icône et texte). */ white-space: nowrap; /* Empêche le texte de passer à la ligne. */ overflow: hidden; /* Masque tout contenu qui dépasse. */ text-overflow: ellipsis; /* Affiche des points de suspension (...) si le texte est tronqué. */ } .header-row img { /* Styles pour les images à l'intérieur des cellules d'en-tête (probablement des icônes de service). */ width: 40px; /* Largeur fixe. */ height: auto; /* Hauteur ajustée automatiquement pour maintenir les proportions. */ filter: drop-shadow(0 0 3px rgba(255, 255, 255, 0.2)); /* Ajoute une ombre légère à l'image. */ } .legend { /* Styles pour le texte de la légende sous les icônes dans l'en-tête. */ font-size: 0.7em; /* Taille de police plus petite. */ display: block; /* S'assure que la légende prend une nouvelle ligne. */ } .host-name { /* Styles pour le nom de l'hôte dans la table. */ text-align: left !important; /* Aligne le texte à gauche (surpasse toute autre règle `text-align`). */ font-weight: bold; /* Texte en gras. */ color: var(--host-name-color); /* Couleur spécifique pour le nom d'hôte. */ padding-left: 15px; /* Rembourrage à gauche. */ font-size: 0.9em; /* Taille de police légèrement plus petite. */ cursor: pointer; /* Change le curseur en pointeur pour indiquer que l'élément est cliquable. */ transition: color 0.2s ease-in-out; /* Ajoute une transition fluide à la couleur du texte lors du survol. */ white-space: nowrap; /* Empêche le texte de passer à la ligne. */ overflow: hidden; /* Masque le contenu débordant. */ text-overflow: ellipsis; /* Affiche des points de suspension si le texte est tronqué. */ } .host-name:hover { /* Styles appliqués au nom d'hôte lorsque la souris le survole. */ color: var(--accent-color); /* Change la couleur du texte à la couleur d'accentuation. */ text-decoration: underline; /* Souligne le texte. */ } .header-row div:first-child { /* Styles spécifiques pour la *première* cellule `div` de la ligne d'en-tête. Il s'agit probablement de la cellule "Client" ou "Hôte" qui est le titre de la première colonne. */ text-align: left !important; /* Aligne le texte à gauche (surpasse toute autre règle). */ padding-left: 15px; /* Rembourrage à gauche. */ align-items: flex-start; /* Aligne les éléments enfants au début de l'axe transversal (ici, à gauche pour une colonne). */ font-family: var(--section-title-font); /* Utilise la police des titres de section. */ color: var(--section-title-color); /* Utilise la couleur des titres de section. */ font-size: 1.05em; /* Taille de police légèrement plus grande. */ text-transform: uppercase; /* Met le texte en majuscules. */ letter-spacing: 1.5px; /* Espacement des lettres. */ text-shadow: 0 0 5px rgba(0, 188, 212, 0.5); /* Effet de lueur. */ white-space: normal; /* Autorise le texte à passer à la ligne (contrairement aux autres cellules d'en-tête). */ overflow: visible; /* Le contenu débordant est visible. */ text-overflow: clip; /* Le texte débordant est coupé (pas de points de suspension). */ } /* Styles pour les nouvelles icônes Avamar et Windows Update */ .avamar-icon, .wu-icon { /* Appliqué aux éléments avec la classe `avamar-icon` ou `wu-icon` (probablement des icônes Font Awesome). */ font-size: 2.5em; /* Taille de police élevée pour que l'icône soit grande. */ margin-bottom: 3px; /* Marge en bas. */ flex-shrink: 0; /* Empêche l'icône de rétrécir dans un conteneur flex. */ } .avamar-icon.green-icon, .wu-icon.green-icon { /* Appliqué aux icônes Avamar ou WU qui ont aussi la classe `green-icon`. */ color: var(--avamar-green); /* Couleur verte (utilisant la variable). */ } .avamar-icon.red-icon, .wu-icon.red-icon { /* Appliqué aux icônes Avamar ou WU qui ont aussi la classe `red-icon`. */ color: var(--avamar-red); /* Couleur rouge. */ } .avamar-icon.unknown-icon, .wu-icon.unknown-icon { /* Appliqué aux icônes Avamar ou WU qui ont aussi la classe `unknown-icon`. */ color: var(--avamar-unknown); /* Couleur "inconnu". */ } /* Styles pour le lien de déconnexion */ .logout-link { /* Appliqué à l'élément conteneur du lien de déconnexion (votre

dans le HTML). */ text-align: center; /* Centre le contenu textuel du paragraphe. */ margin-top: 40px; /* Marge supérieure. */ margin-bottom: 20px; /* Marge inférieure. */ } .logout-link a { /* Styles pour le lien () à l'intérieur de `.logout-link`. */ color: var(--text-color); /* Couleur du texte du lien. */ text-decoration: none; /* Supprime le soulignement par défaut des liens. */ font-size: 1.1em; /* Taille de police légèrement plus grande. */ padding: 10px 20px; /* Rembourrage intérieur (10px haut/bas, 20px gauche/droite). */ border-radius: 8px; /* Coins légèrement arrondis. */ background-color: rgba(221, 190, 15, 0.4); /* Couleur de fond semi-transparente pour le bouton/lien. */ transition: background-color 0.3s ease, transform 0.2s ease; /* * Ajoute des transitions fluides pour les changements de `background-color` et `transform` * (quand la souris survole, par exemple). */ display: inline-flex; /* * Affiche le lien comme une boîte flexible en ligne, ce qui permet d'aligner l'icône et le texte. * `inline-flex` permet au conteneur lui-même de se comporter comme un élément `inline` * tout en utilisant les propriétés Flexbox pour ses enfants. */ align-items: center; /* Centre verticalement les éléments enfants (icône et texte). */ gap: 8px; /* Ajoute un espace de 8px entre les éléments enfants (icône et texte). */ box-shadow: 0 2px 5px rgba(0,0,0,0.3); /* Ajoute une ombre au bouton. */ } .logout-link a:hover { /* Styles appliqués au lien de déconnexion lorsque la souris le survole. */ background-color: rgba(255, 0, 0, 0.6); /* Change la couleur de fond en rouge semi-transparent. */ transform: translateY(-2px); /* Déplace le bouton de 2px vers le haut, créant un effet de "clic" ou d'interactivité. */ } .logout-link a .fas { /* Styles pour l'icône Font Awesome (élément avec la classe `fas`) à l'intérieur du lien de déconnexion. */ font-size: 1.2em; /* Rend l'icône légèrement plus grande que le texte adjacent. */ }