/* 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);
}

/* [2026-09-28, Lot 35] Bulle INTERACTIVE (`TimeEcosTooltip.setInteractive`) : elle reçoit la souris
   et le focus, et porte une ligne de commande ou d'état sous son texte. Sans effet sur les autres. */
.time-ecos-tooltip[data-interactive='true'] {
  pointer-events: auto;
}

.time-ecos-tooltip__text {
  display: block;
}

.time-ecos-tooltip__row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid var(--te-tooltip-border);
}

.time-ecos-tooltip__action {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 32px;
  padding: 5px 10px;
  border: 1px solid var(--brand, #004777);
  border-radius: 6px;
  background: var(--surface, #fff);
  color: var(--brand, #004777);
  font: inherit;
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
}

.time-ecos-tooltip__action:hover {
  background: color-mix(in srgb, var(--brand, #004777) 8%, var(--surface, #fff) 92%);
}

.time-ecos-tooltip__action:focus-visible {
  outline: 2px solid var(--accent, #00afb5);
  outline-offset: 2px;
}

.time-ecos-tooltip__action:disabled {
  opacity: 0.6;
  cursor: progress;
}

.time-ecos-tooltip__note {
  font-size: 0.82rem;
  color: var(--muted, #6b7280);
}

/* [2026-09-28, DROITS ÉPREUVES Lot 54, cases 2 et 6 gardées par QG, maquette
   `mockups/demander-droit-discret/`] Bulle d'un droit manquant (`data-droit`, posé par le socle
   quand le texte suit la tournure « Il faut le droit « X » … ») : réduite, et « Demander ce droit »
   en lien texte, sans trait au-dessus. Le délai d'ouverture au survol (500 ms) est dans le JS. */
.time-ecos-tooltip[data-droit='true'] {
  max-width: min(16rem, calc(100vw - 16px));
  padding: 6px 9px;
  font-size: 0.8rem;
}

.time-ecos-tooltip[data-droit='true'] .time-ecos-tooltip__row {
  margin-top: 5px;
  padding-top: 0;
  border-top: 0;
}

.time-ecos-tooltip[data-droit='true'] .time-ecos-tooltip__action {
  min-height: 0;
  padding: 0;
  border: 0;
  border-radius: 2px;
  background: none;
  font-size: 0.82rem;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.time-ecos-tooltip[data-droit='true'] .time-ecos-tooltip__action:hover {
  background: none;
  text-decoration-thickness: 2px;
}

.time-ecos-tooltip[data-droit='true'] .time-ecos-tooltip__note {
  font-size: 0.78rem;
}

/* Au doigt (iPad), le lien garde une zone d'appui de 32 px de haut, sans changer d'aspect. */
@media (pointer: coarse) {
  .time-ecos-tooltip[data-droit='true'] .time-ecos-tooltip__action {
    min-height: 32px;
  }
}

.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;
  }

  .time-ecos-tooltip__action {
    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;
  }
}