/* TimeEcosTooltip — socle unique d'infobulles V3 (web responsive). */

.time-ecos-tooltip {
  --te-tooltip-bg: color-mix(in srgb, var(--surface, #fff) 96%, var(--text, #04151f) 4%);
  --te-tooltip-fg: var(--text, #04151f);
  --te-tooltip-border: color-mix(in srgb, var(--line, #e5e7eb) 78%, var(--text, #04151f) 22%);
  --te-tooltip-arrow-x: 50%;
  --te-tooltip-arrow-y: 50%;
  position: fixed;
  z-index: 2147483000;
  width: max-content;
  max-width: min(22rem, calc(100vw - 16px));
  padding: 9px 11px;
  border: 1px solid var(--te-tooltip-border);
  border-radius: 8px;
  background: var(--te-tooltip-bg);
  color: var(--te-tooltip-fg);
  box-shadow: 0 8px 24px color-mix(in srgb, var(--text, #04151f) 20%, transparent);
  font: inherit;
  font-size: 0.875rem;
  line-height: 1.4;
  overflow-wrap: anywhere;
  /* `pre-line` (et non `normal`) : une infobulle peut porter des retours à la ligne
     explicites pour séparer ses blocs, sans quoi la bulle coupe au milieu d'un libellé.
     Le contenu passe par `textContent` : aucun risque d'injection HTML. */
  white-space: pre-line;
  pointer-events: none;
  animation: te-tooltip-in 120ms ease-out;
}

.time-ecos-tooltip[hidden] {
  display: none !important;
}

.time-ecos-tooltip::after {
  content: '';
  position: absolute;
  width: 8px;
  height: 8px;
  background: var(--te-tooltip-bg);
  transform: rotate(45deg);
}

.time-ecos-tooltip[data-placement='top']::after {
  left: var(--te-tooltip-arrow-x);
  bottom: -5px;
  margin-left: -4px;
  border-right: 1px solid var(--te-tooltip-border);
  border-bottom: 1px solid var(--te-tooltip-border);
}

.time-ecos-tooltip[data-placement='bottom']::after {
  left: var(--te-tooltip-arrow-x);
  top: -5px;
  margin-left: -4px;
  border-top: 1px solid var(--te-tooltip-border);
  border-left: 1px solid var(--te-tooltip-border);
}

.time-ecos-tooltip[data-placement='left']::after {
  right: -5px;
  top: var(--te-tooltip-arrow-y);
  margin-top: -4px;
  border-top: 1px solid var(--te-tooltip-border);
  border-right: 1px solid var(--te-tooltip-border);
}

.time-ecos-tooltip[data-placement='right']::after {
  left: -5px;
  top: var(--te-tooltip-arrow-y);
  margin-top: -4px;
  border-left: 1px solid var(--te-tooltip-border);
  border-bottom: 1px solid var(--te-tooltip-border);
}

.time-ecos-tooltip[data-variant='info'] {
  --te-tooltip-border: color-mix(in srgb, var(--info, #3b82f6) 58%, var(--line, #e5e7eb) 42%);
}

.time-ecos-tooltip[data-variant='warning'] {
  --te-tooltip-border: color-mix(in srgb, var(--warning, #ff7700) 64%, var(--line, #e5e7eb) 36%);
}

.time-ecos-tooltip[data-variant='danger'] {
  --te-tooltip-border: color-mix(in srgb, var(--danger, #a30000) 62%, var(--line, #e5e7eb) 38%);
}

.te-tooltip-help-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 30px;
  min-height: 30px;
  padding: 5px;
  border: 1px solid var(--line, #e5e7eb);
  border-radius: 999px;
  background: color-mix(in srgb, var(--accent, #00afb5) 12%, var(--surface, #fff) 88%);
  color: var(--brand, #004777);
  cursor: help;
}

.te-tooltip-help-button:hover,
.te-tooltip-help-button.te-tooltip-is-open {
  background: color-mix(in srgb, var(--accent, #00afb5) 22%, var(--surface, #fff) 78%);
}

.te-tooltip-help-button:focus-visible,
[data-tooltip-disabled-wrapper]:focus-visible {
  outline: 2px solid var(--accent, #00afb5);
  outline-offset: 2px;
}

[data-tooltip-disabled-wrapper] {
  display: inline-flex;
  cursor: not-allowed;
}

[data-tooltip-disabled-wrapper] > :disabled {
  pointer-events: none;
}

[data-tooltip][aria-disabled='true'] {
  cursor: not-allowed;
}

@keyframes te-tooltip-in {
  from { opacity: 0; transform: translateY(2px); }
  to { opacity: 1; transform: translateY(0); }
}

@media (max-width: 480px) {
  .time-ecos-tooltip {
    max-width: calc(100vw - 16px);
    padding: 10px 12px;
  }

  .te-tooltip-help-button {
    min-width: 36px;
    min-height: 36px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .time-ecos-tooltip {
    animation: none;
  }
}

@media (forced-colors: active) {
  .time-ecos-tooltip,
  .time-ecos-tooltip::after,
  .te-tooltip-help-button {
    forced-color-adjust: auto;
    border-color: CanvasText;
  }
}