body {font-family: "Arial Narrow",Arial,sans-serif; }
p {text-align: justify;}


#cmd {font-family: Courier New; color:blue;}

#bluehr {   border-top: 3px solid blue; /* Définit une bordure supérieure bleue */}
#redhr {   border-top: 3px solid red; /* Définit une bordure supérieure rouge */}

/* **************************** LINK NAVY BLUE ******************************** */
#bluelink a  {   text-decoration : none;    font-weight:bold;    color:#000080;  }
#bluelink a:hover  {   text-decoration : none;    font-weight:bold;    background-color:#000080  ;   color:White;  }


/* **************************** LINK STANDARD BLUE ******************************** */
#stdbluelink a  {   text-decoration : none;    font-weight:bold;    color:blue;  }
#stdbluelink a:hover  {   text-decoration : none;    font-weight:bold;    background-color:blue  ;   color:White;  }

/* **************************** LINK RED ******************************** */
#redlink a  { text-decoration : none; font-weight:bold; color:red;  }
#redlink a:hover  {   text-decoration : none;    font-weight:bold;    background-color:red  ;   color:White;  }


/*   ********************************** SOUS MENUS **********************************  */
#menu ul { margin:0; padding:0; list-style-type:none; text-align:center; }
#menu li { float:left; margin:auto; padding:0; background-color:#3366CC; }
#menu li a { display:block; width:100px;  color:white; text-decoration:none; padding:5px;  }
#menu li a:hover { color:#3366CC; }
#menu ul li ul { display:none;  background-color:#3366CC; }
#menu ul li:hover ul { display:block; }
#menu li:hover ul li { float:none; }
#menu li ul { position:absolute; }


.menu {   background-color:#3366CC  ;  background-attachment:fixed;  list-style-type:none ; }
.menu li { display:inline; padding-right:20px; }
.menu li :hover 	{	background-color:white;	}
.menu a {	font-weight:bold; 	color:white;	text-decoration :none;  }
.menu a:hover {  color:#3366CC;}




#fid {border-radius:60px; background-color:#000080; border: none;}
#fid-1 {border-radius:60px; background-color:#3366CC; border: none;}

table { border-collapse: collapse; /* Table Border line Traced  */ }


/*   CHAPTERS  */

/* Configuration générale */
/*
body {
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  font-size: 13px;
  color: #000;
  background-color: #fff;
  margin: 20px;
}*/

/* Conteneur principal */
.treeview {
  width: 280px;
  padding: 10px;
  user-select: none;
}

/* Réinitialisation des listes */
.treeview ul {
  list-style: none;
  padding-left: 16px;
  margin: 0;
  position: relative;
}

/* Ligne verticale pointillée */
.treeview ul::before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 10px;
  left: 7px;
  border-left: 1px dotted #888;
}

/* Éléments de la liste */
.treeview li {
  position: relative;
  margin: 2px 0;
}

/* Ligne horizontale pointillée reliée aux sous-dossiers/fichiers */
.treeview li::before {
  content: '';
  position: absolute;
  top: 10px;
  left: -9px;
  width: 8px;
  border-top: 1px dotted #888;
}

/* En-têtes de dossiers (<summary>) */
.treeview summary {
  display: flex;
  align-items: center;
  cursor: pointer;
  outline: none;
  list-style: none;
}

/* Masquer la flèche par défaut du navigateur */
.treeview summary::-webkit-details-marker {
  display: none;
}

/* Flèche personnalisée (› et rotate à 90 deg) */
.treeview summary::before {
  content: '›';
  display: inline-block;
  width: 12px;
  font-weight: bold;
  color: #444;
  transition: transform 0.1s;
  margin-right: 2px;
  font-size: 12px;
  text-align: center;
}

.treeview details[open] > summary::before {
  transform: rotate(90deg);
}

/* Style général des nœuds (fichiers et dossiers) */
.tree-item {
  display: inline-flex;
  align-items: center;
  padding: 1px 4px;
  gap: 5px;
  border: 1px solid transparent;
  text-decoration: none; /* Supprime le soulignement pour les liens <a> */
  color: inherit;        /* Conserve la couleur standard */
  box-sizing: border-box;
}

.tree-item:hover {
  background-color: #e5f3ff;
}

/* Fichier sélectionné (ex: DATA_MODEL.bg) */
.tree-item.selected {
  background-color: #cce8ff;
  border-color: #99d1ff;
}

/* Icônes SVG intégrées */
.icon {
  width: 16px;
  height: 16px;
  display: inline-block;
  background-size: contain;
  background-repeat: no-repeat;
}

.icon-root {
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%23d96b6b"><path d="M14 2H6c-1.1 0-1.99.9-1.99 2L4 20c0 1.1.89 2 1.99 2H18c1.1 0 2-.9 2-2V8l-6-6zm2 16H8v-2h8v2zm0-4H8v-2h8v2zm-3-5V3.5L18.5 9H13z"/></svg>');
}

.icon-folder {
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%23e8c86b"><path d="M10 4H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.89 2 1.99 2H20c1.1 0 2-.9 2-2V8c0-1.1-.9-2-2-2h-8l-2-2z"/></svg>');
}

.icon-file {
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%23a0a0a0"><path d="M6 2c-1.1 0-1.99.9-1.99 2L4 20c0 1.1.89 2 1.99 2H18c1.1 0 2-.9 2-2V8l-6-6H6zm7 7V3.5L18.5 9H13z"/></svg>');
}