/** Tooltips, focus-visible, scrollbars, sélection texte */
/* ═══════════════════════════════════════════════════════════════════════
   14a. TOOLTIPS — Indications contextuelles légères (CSS pur, sans JS)
   ───────────────────────────────────────────────────────────────────────
   Pour expliquer un badge, un bouton, un statut sans alourdir l'UI.

   USAGE :
     <span data-tooltip="Texte de l'info">Élément</span>
     <span data-tooltip="Multiligne possible" data-tooltip-pos="top">…</span>

   Positions disponibles via `data-tooltip-pos` : top (défaut), bottom, right, left.

   Le tooltip apparaît au hover OU au focus clavier (accessibilité), avec un
   petit fade-in + délai 200ms pour ne pas être intrusif. Largeur max 220px,
   wrap en multi-lignes si besoin. Le pointer-events:none évite qu'il
   intercepte le clic ou bloque l'élément en dessous.

   IMPORTANT : si l'élément cible est `position: static` (par défaut), on
   le passe en `position: relative` automatiquement pour que le ::after soit
   bien positionné par rapport à lui.
   ─────────────────────────────────────────────────────────────────────── */

[data-tooltip] {
    position: relative;
}
[data-tooltip]::after {
    content: attr(data-tooltip);
    position: absolute;
    bottom: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%) translateY(4px);
    background: #0f172a;
    color: #f8fafc;
    font-size: 0.75rem;
    font-weight: 500;
    line-height: 1.35;
    padding: 6px 10px;
    border-radius: 6px;
    white-space: normal;
    width: max-content;
    max-width: 220px;
    text-align: center;
    pointer-events: none;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.15s ease, transform 0.15s ease, visibility 0s linear 0.15s;
    z-index: 9000;
    box-shadow: 0 8px 18px rgba(15, 23, 42, 0.22);
    /* font-weight uniforme même si le parent porte autre chose */
    letter-spacing: 0;
    text-transform: none;
    font-variant-numeric: normal;
}
[data-tooltip]:hover::after,
[data-tooltip]:focus-visible::after,
[data-tooltip]:focus::after {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
    transition-delay: 200ms, 200ms, 0s;
}

/* Variantes de position ─────────────────────────────────────────────── */
[data-tooltip][data-tooltip-pos="bottom"]::after {
    bottom: auto; top: calc(100% + 8px);
    transform: translateX(-50%) translateY(-4px);
}
[data-tooltip][data-tooltip-pos="bottom"]:hover::after,
[data-tooltip][data-tooltip-pos="bottom"]:focus-visible::after {
    transform: translateX(-50%) translateY(0);
}
[data-tooltip][data-tooltip-pos="right"]::after {
    bottom: 50%; left: calc(100% + 8px); top: 50%;
    transform: translateY(-50%) translateX(-4px);
}
[data-tooltip][data-tooltip-pos="right"]:hover::after,
[data-tooltip][data-tooltip-pos="right"]:focus-visible::after {
    transform: translateY(-50%) translateX(0);
}
[data-tooltip][data-tooltip-pos="left"]::after {
    bottom: 50%; right: calc(100% + 8px); left: auto; top: 50%;
    transform: translateY(-50%) translateX(4px);
}
[data-tooltip][data-tooltip-pos="left"]:hover::after,
[data-tooltip][data-tooltip-pos="left"]:focus-visible::after {
    transform: translateY(-50%) translateX(0);
}


/* ═══════════════════════════════════════════════════════════════════════
   14b. MICRO-INTERACTIONS GLOBALES (refonte UI 2026, réf Pennylane/Linear)
   ───────────────────────────────────────────────────────────────────────
   Touches finales qui font la différence entre "site OK" et "outil premium" :

   1. FOCUS-VISIBLE — ring bleu cohérent sur tout ce qui est interactif au
      clavier (Tab). N'apparaît PAS au clic souris (`:focus-visible` natif).
      Important pour l'accessibilité ET pour le sentiment de qualité.

   2. SCROLLBARS DISCRÈTES — remplace les barres de défilement OS hideuses
      (épaisses, grises Windows ou trop visibles macOS) par une barre fine
      qui s'efface en hover. Appliqué globalement.

   3. SÉLECTION DE TEXTE colorée à la marque (au lieu du bleu OS).
   ─────────────────────────────────────────────────────────────────────── */

/* Focus-visible global : ring bleu offset. On l'applique aux éléments
   interactifs natifs ET aux composants custom. Les anciens styles inline
   :focus restent prioritaires sur leur scope (ex: .app-input:focus). */
button:focus-visible,
a:focus-visible,
[role="button"]:focus-visible,
[tabindex]:focus-visible,
summary:focus-visible {
    outline: 2px solid var(--brand-blue);
    outline-offset: 2px;
    border-radius: 4px;
}
/* Inputs/textarea/select — ring DOUX via box-shadow (pas d'outline qui
   casserait le layout sur les bordures arrondies). */
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
    outline: none;
}

/* Scrollbars custom — webkit (Chrome, Safari, Edge) */
::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}
::-webkit-scrollbar-track {
    background: transparent;
}
::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 8px;
    border: 2px solid transparent;
    background-clip: padding-box;
    transition: background 0.15s ease;
}
::-webkit-scrollbar-thumb:hover {
    background: #94a3b8;
    background-clip: padding-box;
    border: 2px solid transparent;
}
/* Firefox */
* {
    scrollbar-width: thin;
    scrollbar-color: #cbd5e1 transparent;
}

/* Sélection de texte aux couleurs Cali&Co (au lieu du bleu OS) */
::selection {
    background: rgba(0, 110, 185, 0.18);
    color: #002940;
}