/* ========== NetScope styles extracted from NetScope.html ========== */
/* =============================
   GLOBAL / LAYOUT
============================= */
body {
  margin: 0;
  height: 100vh;
  background: #381A0A;
  font-family: Arial, sans-serif;
}
.app {
  display: flex;
  height: 100vh;
}
/* =============================
   PANNEAU GAUCHE
============================= */
.sidebar {
  width: 20%;
  height: 100%;
  padding: 20px;
  box-sizing: border-box;
  background: #424242;
  color: #f2f2f2;
}
.logo-container {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  margin-bottom: 18px;   /* espace avant "Paramètres" */
}
.logo-container img {
  width: 100%;
  max-width: 100%;
  height: auto;
  display: block;
}
.sidebar * {
  box-sizing: border-box;
}
.sidebar h3 {
  color: #f2f2f2;
  margin-bottom: 15px;
}
.sidebar label,
.sidebar span {
  font-size: 12px;
  color: #f2f2f2;
}
/* Inputs */
.sidebar input[type="number"],
.sidebar input[type="text"],
.sidebar select {
  background: #ffffff;
  color: #000000;
  border: 1px solid #cccccc;
  border-radius: 4px;
  padding: 6px 8px;
  font-size: 12px;
  max-width: 90px;
}
#enveloppe {
  font-weight: 700;
  font-size: 14px;
}
/* =============================
   INFO-BULLE IMAGE
============================= */
.field-with-tooltip label {
  display: flex;
  align-items: center;
  gap: 6px;
}
/* icône */
.info-icon {
  position: relative;
  font-size: 12px;
  cursor: help;
  color: #fe7d19;
  font-weight: bold;
}
/* bulle */
.tooltip-image {
  display: none;
  position: absolute;
  top: 18px;
  left: 0;
  z-index: 1000;
  background: #ffffff;
  border: 2px solid #fe7d19;
  border-radius: 10px;
  padding: 6px;
  box-shadow: 0 6px 20px rgba(0,0,0,0.25);
}
/* image */
.tooltip-image img {
  max-width: 420px;   /* ajuste selon ta capture */
  height: auto;
  display: block;
}
/* affichage au survol */
.info-icon:hover .tooltip-image {
  display: block;
}
.sidebar input#enveloppe {
  max-width: 140px;
}
/* Checkboxes */
.sidebar input[type="checkbox"] {
  accent-color: #fe7d19;
}
/* Slider */
#abondementSlider {
  appearance: none;
  width: 100%;
  height: 6px;
  border-radius: 999px;
  background: #d9d9d9;
  outline: none;
  cursor: pointer;
}
#abondementSlider::-webkit-slider-thumb {
  appearance: none;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #7a7a7a;
  border: 1px solid #6b6b6b;
}
#abondementSlider::-moz-range-thumb {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #7a7a7a;
  border: 1px solid #6b6b6b;
}
/* Toggle buttons */
.sidebar .toggle-group {
  display: flex;
  gap: 5px;
}
.sidebar .toggle-group button {
  padding: 6px 10px;
  background: #F2F2F2;
  color: #381A0A;
  border: 1px solid #1e1e1e;
  cursor: pointer;
}
.sidebar .toggle-group button.active {
  background: #fe7d19;
  color: #381a0a;
  font-weight: bold;
}
/* Grille paramètres */
.sidebar .param-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px 12px;
  margin-bottom: 12px;
}
.sidebar .param-grid .full-width {
  grid-column: 1 / -1;
}
/* Checkbox alignée TNS */
.sidebar .checkbox-line {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  margin-top: 22px;
  flex-wrap: nowrap;
  white-space: nowrap;
}
/* Ajustement Abattement 10% IR */
.sidebar .checkbox-line.checkbox-ir {
  margin-top: 6px;
  opacity:0.9;    
  margin-bottom: 16px;   /* espace avant IS */
}
/* =============================
   PARTIE DROITE / TABLEAU
============================= */
.content {
  width: 80%;
  height: 100%;
  background: #ffffff;
  padding: 24px;
  box-sizing: border-box;
  overflow-x: auto;       /* ✅ scroll horizontal */
  position: relative;
}
/* LARGEUR FIXE DE LA COLONNE LIBELLÉS */
.content td.label,
.content thead th:first-child {
  width: 200px;
  min-width: 200px;
}
/* Structure */
table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  table-layout: auto;     /* ✅ laisse le contenu décider */
}
.content table th {
  padding: 8px 12px;
}
.content table td {
  font-size: 13px;
  padding: 5px 10px;
}
/* Espace sous les capsules SARL / SAS */
.content thead tr.group-row th {
  padding-bottom: 6px;   /* ajuste : 8–12px selon ton goût */
}
/* =====================================================
   EN-TÊTE COLONNES – SCÉNARIOS (CARTOUCHES ORANGE)
===================================================== */
.content thead th {
  position: sticky;
  top: 0;
  z-index: 4;
  background: #ffffff;      
  color: #333;
  padding: 0;                
  text-align: center;
  vertical-align: middle;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.2px;
}
/* Séparateurs verticaux discrets */
.content thead th:not(:last-child) {
  border-right: 1px solid rgba(0, 0, 0, 0.06);
}
/* Séparateurs verticaux discrets – CORPS DU TABLEAU */
.content tbody td:not(:last-child) {
  border-right: 1px solid rgba(0, 0, 0, 0.06);
}
/* =====================================================
   WRAPPER DE TITRE (MIROIR DE .eff-wrap)
===================================================== */
.content thead th .th-wrap {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 48px;               /* ✅ MÊME hauteur que l’efficacité */
  width: 100%;
}
/* =====================================================
   CARTOUCHE ORANGE (COMMUNE TITRES + EFFICACITÉ + GROUPE)
===================================================== */
.orange-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 2px solid #FE7D19;
  border-radius: 12px;
  padding: 8px 10px;
  line-height: 1.15;
  background: #f9f7f7;
  font-weight: 600;
}
/* =============================
   SÉPARATIONS LÉGÈRES ENTRE LIGNES
============================= */
tbody tr {
  border-bottom: 1px solid rgba(56, 26, 10, 0.25);
}
tbody tr:last-child {
  border-bottom: none;
}
/* =============================
   1ère COLONNE – LIBELLÉS (sticky)
============================= */
td.label {
  position: sticky;
  font-size:13px;
  left: 0;
  z-index: 3;
  background: #ffffff;
  color: #38310A;
  font-weight: 550;
  text-align: left;
}
/* =============================
   COLONNES DE VALEURS
============================= */
tbody td:not(.label) {
  background: #ffffff;
  color: #381A0A;
  text-align: right;
}
/* =============================
   LIGNE DE CHIFFRES EN GRAS
============================= */
.valeur-gras {
  font-weight: 700;
}
/* =============================
   VALEURS SECONDAIRES
============================= */
.valeur-secondaire {
  font-size: 12px;
  opacity: 0.55;
  font-style: italic;
  opacity: 0.65;
}
/* Valeurs génératrices de droits retraite (informative, bleu) */
.content tbody td.valeur-generatrice {
  color: #0052FF;
  font-style: italic;
}
/* Label pour les lignes "dont génératrices de retraite" dans la première colonne */
.content td.label.label-generatrice {
  color: #0052FF;
  padding-left: 28px; /* petit retrait vers la droite */
  font-style: italic;
  font-weight: 400;
}
/* =============================
   VALEURS CLÉS
============================= */
.valeur-cle {
  font-weight: bold;
  color: #FE7D19;
  font-size: 14px;
}
tbody td.valeur-cle {
  color: #424242;
  font-size: 17px;
  font-weight: bold;
}
/* Remonter légèrement le % dans la capsule efficacité */
.eff-wrap .eff-text {
  transform: translateY(-10px); /* ajuste : -1px à -3px */
}
/* =============================
   VALEURS COMPOSANT L’ENVELOPPE
   (icône AVANT le chiffre, alignement parfait)
============================= */
tbody td.valeur-enveloppe {
  text-align: right;
  direction: ltr;
  unicode-bidi: plaintext;
}
/* If the value is present, show the icon inside the value-pill, to the left of the amount */
.valeur-enveloppe .value-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding-left: 8px;
}
.valeur-enveloppe .value-pill::before {
  content: "📩";
  font-size: 12px;
  opacity: 0.6;
  display: inline-block;
}
.valeur-enveloppe td:empty .value-pill::before,
.valeur-enveloppe .value-pill:empty::before {
  display: none;
}
/* For cells that don't use a pill, keep the old behaviour: show icon before the cell content. */
/* Uses :has() to detect absence of a .value-pill; falls back to showing icon on the TD when no pill present. */
tbody td.valeur-enveloppe:not(:has(.value-pill))::before {
  content: "📩";
  font-size: 11px;
  opacity: 0.5;
  padding: 0 4px;
}
/* Hide the td pseudo when a pill exists (prevent duplicate icons) */
tbody td.valeur-enveloppe:has(.value-pill)::before {
  display: none;
}
/* =============================
   BLOCS IMPORTANTS
============================= */
tr.efficacite td,
tr:last-child td {
  padding-top: 0;
}
/* Efficacité */
.eff-box {
  font-weight: bold;
  text-align: center;
  color: #424242;
  background: transparent;
}
/* =====================================================
   LIGNE EFFICACITÉ (STRUCTURE TABLE SAFE)
===================================================== */
/* La ligne efficacité ne pousse rien au-dessus */
tr.efficacite td {
  padding: 6px 12px;          /* padding normal */
  vertical-align: bottom;     /* ancre le contenu en bas */
}
/* -----------------------------------------------------
   WRAPPER INTERNE
----------------------------------------------------- */
td .eff-wrap {
  display: flex;
  justify-content: flex-end;
  align-items: flex-end;
  gap: 10px;
  padding-top : 6px;
  overflow: hidden;           /* 🔑 confinement total */
  box-sizing: border-box;
  position: relative;
}
/* -----------------------------------------------------
   TEXTE %
----------------------------------------------------- */
.eff-wrap .eff-text {
  white-space: nowrap;
  font-weight: bold;
  font-size: 20px;
}
/* -----------------------------------------------------
   MINI-GRAPHE VERTICAL
----------------------------------------------------- */
.eff-wrap .eff-viz {
  --H: 42px;                  /* hauteur 100 % */
  position: relative;
  width: 44px;                /* largeur totale du mini-graphe */
  height: var(--H) ;
}
/* Barre 100 % (référence) */
.eff-viz .bar100 {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 10px;
  height: 100%;
  border-radius: 6px;
  background: rgba(0,0,0,0.08);
}
/* Barre efficacité */
.eff-viz .barEff {
  position: absolute;
  left: 14px;
  bottom: 0;
  width: 10px;
  height: var(--effH, 0px);   /* piloté en JS */
  border-radius: 6px;
  background: rgba(254,125,25,0.65);
}
/* -----------------------------------------------------
   LIGNE POINTILLÉE
----------------------------------------------------- */
.eff-viz::before {
  content: "";
  position: absolute;
  left: 4px;                  /* centre barre 100 % */
  top: 0;
  width: var(--lineLen, 0px); /* piloté en JS */
  border-top: 1px dashed rgba(0,0,0,0.35);
  transform-origin: 0 0;
  transform: rotate(var(--lineAngle, 0deg));
  pointer-events: none;
}
/* =====================================================
   ENCADRÉ ORANGE RÉFÉRENCE (titres + efficacité)
===================================================== */
.orange-pill {
  box-sizing: border-box;
  border: 2px solid #FE7D19;
  border-radius: 12px;
  padding: 6px 8px;
}
/* TITRES : pillule pleine largeur comme l'efficacité */
.content thead th .orange-pill {
  width: 88%;
  font-size: 16px;
}
/* =============================
   HISTOGRAMME EFFICACITÉS (6 barres)
============================= */
.eff-histogram {
  margin-left: 212px;                 /* même largeur que td.label */
  width: calc(100% - 212px);          /* occupe uniquement les 6 colonnes */
  box-sizing: border-box;
  margin-top: 18px;
  padding: 14px 14px 10px;
  border: 1px solid rgba(0,0,0,0.08);
  border-radius: 14px;
  background: #ffffff;
}
.eff-histogram .title {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 10px;
  color: #424242;
  font-weight: 700;
  font-size: 13px;
}
.eff-histogram .subtitle {
  color: rgba(56,26,10,0.65);
  font-weight: 600;
  font-size: 12px;
}
.eff-histogram .bars {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); /* 👈 Adaptatif ! */
  gap: 14px;
  align-items: end;
  height: 140px; /* hauteur totale du graphe */
  padding: 8px 6px 4px;
  border-top: 1px solid rgba(0,0,0,0.06);
}
.eff-histogram .bar {
  position: relative;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 6px;
}
.eff-histogram .bar .cap {
  text-align: center;
  font-size: 12px;
  font-weight: 700;
  color: #424242;
}
.eff-histogram .bar .track {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 10px;
  background: rgba(254,125,25,0.08);
  overflow: hidden;
}
.eff-histogram .bar .fill {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: var(--h, 0%);
  border-radius: 10px;
  background: rgba(254,125,25,0.55);
}
.eff-histogram .bar.best .fill {
  background: rgba(254,125,25,0.85);
}
.eff-histogram .bar .label {
  text-align: center;
  font-size: 11px;
  color: rgba(56,26,10,0.75);
  line-height: 1.1;
}
/* ========== TABS ========== */
.tabs {
  display: flex;
  gap: 8px;
  margin-bottom: 12px;
}
.tabs button {
  padding: 8px 12px;
  border-radius: 8px;
  border: 1px solid rgba(0,0,0,0.06);
  background: #fff;
  cursor: pointer;
  font-weight: 700;
}
.tabs button.active {
  background: #FE7D19;
  color: #424242;
}
/* Salarié view: hide most columns except labels + Prime Salarié (col 5) + Dividendes SAS (col 6) */
.content .salarie-group-row { display: none; }
.content.mode-salarie .salarie-group-row { display: table-row; }
/* ========== NEW: TITLE & VALUE PILLS ========== */
.label-pill,
.value-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  box-sizing: border-box;
  border-radius: 10px;
  padding: 6px 10px;
  font-weight: 700;
  color: #ffffff;
}
/* Brown / enveloppe */
.label-pill.brown-pill,
.value-pill.brown-pill {
  background: #424242;
  border: 2px solid rgba(0,0,0,0.06);
  text-align: center;
}
/* Blue for top 3 rows */
.label-pill.blue-pill,
.value-pill.blue-pill {
  background: #0052FF;
  border: 2px solid rgba(0,0,0,0.08);
  text-align: center;
}
/* Make label cell background extend full title column */
.content td.label .label-pill {
  display: block;
  text-align: left;
  padding-left: 12px;
  width: 100%;
  height: 100%;
}
/* Align value pills to right within their cell */
.content td:not(.label) .value-pill {
  justify-content: flex-end;
}
/* Ensure pill width is similar to header orange pill */
.content td:not(.label) .value-pill,
.content thead th .orange-pill { width: 88%; }
/* Row-specific helpers applied via JS-generated row classes */
/* Center title and value pills for specified rows */
.row-resultat td.label .label-pill,
.row-brut td.label .label-pill,
.row-epargneAbondement td.label .label-pill,
.row-enveloppe td.label .label-pill {
  text-align: center;
  padding-left: 0;
  display: flex;
  justify-content: center;
  align-items: center;
}
.row-resultat td .value-pill,
.row-brut td .value-pill,
.row-epargneAbondement td .value-pill,
.row-enveloppe td .value-pill {
  justify-content: center;
}
/* Force centering and neutralize rtl/text-align on cells (enveloppe uses rtl) */
.row-resultat td .value-pill,
.row-brut td .value-pill,
.row-epargneAbondement td .value-pill,
.row-enveloppe td .value-pill {
  display: flex;
  justify-content: center !important;
  align-items: center;
  margin: 0 auto;
  direction: ltr;
  text-align: center;
}
/* Infobulles (tooltips) */
[data-tooltip] {
  position: relative;
  cursor: help;
}

/* Infobulles (tooltips) */
[data-tooltip] {
  position: relative;
  cursor: help;
}

/* Style de l'infobulle */
[data-tooltip]::after {
  content: attr(data-tooltip);
  position: absolute;
  top: 100%; /* 👈 Positionne EN DESSOUS de la cellule (au lieu de bottom: 100%) */
  left: 50%;
  transform: translateX(-50%); /* Centre horizontalement */

  /* Style visuel */
  background-color: #424242; /* Fond marron */
  color: #ffffff;
  padding: 10px 14px;
  border-radius: 6px;
  font-size: 13px;
  line-height: 1.5;
  white-space: pre-line; /* Permet les retours à la ligne */
  width: 180px;
  max-width: 320px;

  /* Animation */
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s ease, visibility 0.2s ease;

  /* Flèche pointant VERS LE HAUT (car l'infobulle est en dessous) */
  border-top: 8px solid #FE7D19; /* 👈 Flèche vers le haut */
  border-bottom: none; /* 👈 Pas de flèche en bas */
  margin-top: 8px; /* 👈 Espace entre la cellule et la flèche */

  /* Positionnement */
  z-index: 9999;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
}

/* Affichage au survol */
[data-tooltip]:hover::after {
  opacity: 0.9;
  visibility: visible;
}

/* Fine tuning: keep existing generatrice styles intact */
.content tbody td.valeur-generatrice { color: #0052FF; font-style: italic; }
/* end of styles */