/* 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;
  /* [2026-10-02, capture QG sur iPhone] `border-box` : la largeur maximale compte les marges et la
     bordure. En `content-box`, « écran moins 16 px » donnait 385 px de bulle sur un écran de 375 px,
     coupée à droite. */
  box-sizing: border-box;
  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;
}

/* [2026-10-03, RÉSULTATS · Lot 26] Bulle de graphique (charte § 5.6) : le nom en gras, la valeur,
   puis la référence en gris ; chiffres alignés. Posés par `data-tooltip-titre` / `-detail`. */
.time-ecos-tooltip__titre { display: block; font-weight: 700; margin-bottom: 2px; }
.time-ecos-tooltip__detail { display: block; color: var(--muted, #6b7280); margin-top: 2px; }
.time-ecos-tooltip:has(.time-ecos-tooltip__titre) { font-variant-numeric: tabular-nums; }

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

/* [2026-10-04, RÉSULTATS · Lot 64] Thème sombre : le fond du « ? » suit `--surface` (sombre), mais
   `--brand` (#004777) ne change pas avec le thème : l'icône, bleu marine sur bleu nuit, ne se voyait
   plus et le bouton paraissait un cercle vide (« pq ya pas d'icone ici? », QG, carte « Simuler les
   résultats » d'owner-config ; vrai sur toutes les pages). L'icône passe à la couleur d'accent. */
:root.theme-dark .te-tooltip-help-button {
  color: var(--accent, #00afb5);
}

@media (prefers-color-scheme: dark) {
  :root.theme-system .te-tooltip-help-button {
    color: var(--accent, #00afb5);
  }
}

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

/* [2026-10-03, capture QG sur iPhone] Safari iOS n'envoie le « click » d'un toucher qu'à un élément
   qu'il juge cliquable (écouteur posé sur lui ou `cursor: pointer`) ; l'écoute du socle sur le
   document ne compte pas. Une enveloppe grisée (`cursor: not-allowed`) ou un déclencheur sans
   commande n'ouvrait donc jamais sa bulle au doigt. Sans souris, le curseur ne se voit pas : le
   rendu ne change pas, seul le toucher est rétabli. `!important` : plusieurs pages reposent
   `cursor: not-allowed` sur leurs enveloppes avec un sélecteur plus précis. */
@media (hover: none) {
  [data-tooltip] {
    cursor: pointer !important;
  }
}

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