/* Titres */

h4.interactivite {
  display: flex;
  align-items: center;
  font-size: 1.28em;
  font-weight: 700;
  margin: 1.7em 0 .8em 0;
  color: #000000 !important; /* Couleur principale, peut être overridée par <span style> */
  background: #fff;
  border-radius: 40px 22px 22px 40px / 40px 40px 22px 22px;
  box-shadow: 0 3px 18px 0 #e71e8036;
  padding: 0.35em 1.4em 0.35em 2.6em;
  position: relative;
  overflow: visible;
}

h4.interactivite::before {
  content: '';
  display: block;
  position: absolute;
  left: 1.1em;
  width: 1.1em;
  height: 1.1em;
  border-radius: 50%;
  background: #e71e80;
  box-shadow: 0 0 0 3px #fff;
  z-index: 1;
}
h4.interactivite::after {
  content: '';
  position: absolute;
  left: .2em;
  top: 50%;
  width: 1.5em;
  height: 0.18em;
  background: linear-gradient(90deg, #e71e80 60%, #fff0f5 100%);
  border-radius: 3px;
  transform: translateY(-50%);
  z-index: 2;
}

h4.interactivite span {
  color: inherit; /* Hérite, mais tu peux overrider dans le HTML */
  font-weight: inherit;
  font-size: inherit;
  background: none;
  padding: 0;
  margin: 0;
}

/* Effet flèche SVG décorative à gauche */
h4.interactivite .interac-h4-arrow {
  display: inline-block;
  vertical-align: middle;
  margin-right: 0.85em;
  margin-left: -2.2em;
  width: 1.8em;
  height: 1.2em;
}

h5.interactivite {
  position: relative;
  color: #41246d;
  font-size: 1.07em;
  font-weight: 600;
  background: linear-gradient(90deg, #f2f1fa 80%, transparent);
  border-radius: 16px 5px 16px 5px / 16px 16px 5px 5px;
  margin: 1.2em 0 .7em 0;
  padding: 0.45em 1.2em 0.45em 2em;
  letter-spacing: 0.02em;
  box-shadow: 0 1px 9px 0 #41246d11;
  transition: background 0.2s;
}

h5.interactivite::before {
  content: '';
  display: block;
  position: absolute;
  left: 0.7em;
  top: 18%;
  width: 0.32em;
  height: 64%;
  border-radius: 5px;
  background: linear-gradient(180deg, #41246d 78%, #a893e7 100%);
  box-shadow: 0 0 4px #41246d22;
}

/* Styles pour les tooltips utilisateur et absences */
.user-tooltip, .absence-tooltip {
  position: relative;
  cursor: pointer;
}
.user-tooltip .user-tooltip-content,
.absence-tooltip .absence-tooltip-content {
  display: none;
  position: absolute;
  left: 105%;
  top: 0;
  background: #fff;
  color: #333;
  border: 1px solid #bbb;
  border-radius: 6px;
  padding: 10px 14px;
  min-width: 220px;
  box-shadow: 0 8px 24px #2222;
  z-index: 999;
  white-space: normal;
}
.user-tooltip:hover .user-tooltip-content,
.absence-tooltip:hover .absence-tooltip-content {
  display: block;
}

.tableau-diplomes-plus th,
.tableau-diplomes-plus td {
  min-width: 10px;
  text-align: center;
}

.mini-cal-perso th, .mini-cal-perso td {
  min-width:22px;
  height:30px;
  font-size:12px;
  padding: 5px;
}

table th, table td {
  padding: 5px !important;
  color:#000000;
}