/*
 * La couche de mouvement, pour toutes les pages.
 *
 * Ce fichier ne touche **que** la rétroaction d'interaction : transitions,
 * survol, appui, apparition des messages. Jamais la mise en page, jamais un
 * comportement — un écran avec ce fichier désactivé fonctionne à
 * l'identique, il répond juste plus sèchement.
 *
 * Trois règles, tenues partout :
 *
 *   1. **le mouvement signale, il ne décore pas.** Une transition n'existe
 *      que si elle répond à un geste — survol, appui, ouverture, arrivée
 *      d'un message. Rien ne bouge tout seul, rien ne boucle : une
 *      animation qui se répète pendant qu'on lit est une distraction ;
 *
 *   2. **court et sortant.** 140 à 200 ms, ease-out : l'interface paraît
 *      répondre, pas exécuter une chorégraphie. Au-delà, on attend après
 *      elle — exactement ce qu'on veut éviter ;
 *
 *   3. **`prefers-reduced-motion` coupe tout.** Le vestibule de certains
 *      lecteurs ne supporte pas le mouvement ; le réglage existe pour être
 *      respecté, pas pour être contourné par « c'est subtil ».
 *
 * Les styles de focus clavier sont ici aussi, hors garde : la visibilité
 * du focus n'est pas du mouvement, et personne ne doit la perdre.
 */

/* -- focus clavier, toujours ------------------------------------------- */

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
    outline: 2px solid #2f6fed;
    outline-offset: 2px;
    border-radius: 4px;
}

/* Un résumé de <details> est cliquable : le curseur doit le dire. */
summary { cursor: pointer; }

@media (prefers-reduced-motion: no-preference) {

    html { scroll-behavior: smooth; }

    /* -- rétroaction des commandes ------------------------------------- */

    .btn,
    button,
    .nav-link,
    .config-link,
    a.finding,
    .pill,
    input.form-control,
    select.form-control,
    textarea.form-control,
    .checkbox-row,
    summary {
        transition:
            background-color 140ms ease-out,
            border-color 140ms ease-out,
            box-shadow 140ms ease-out,
            color 140ms ease-out,
            transform 140ms ease-out;
    }

    /* L'appui se sent : le bouton cède d'un demi-pixel sous le doigt.
       Assez pour confirmer le clic, pas assez pour déplacer la cible. */
    .btn:active,
    button:not(.call-popup-close):active {
        transform: translateY(0.5px) scale(0.985);
    }

    /* -- surfaces interactives ------------------------------------------ */

    /* Seules les surfaces **cliquables** s'élèvent au survol. Élever
       toutes les cartes ferait croire que tout est un bouton. */
    .config-link:hover,
    a.finding:hover {
        transform: translateY(-1px);
        box-shadow: 0 6px 18px rgba(16, 30, 54, 0.10);
    }

    /* Balayage des tableaux : la ligne sous le curseur se distingue, sur
       tous les écrans — files, facturation, éditeur de base. */
    .data-table tbody tr,
    .table tbody tr {
        transition: background-color 120ms ease-out;
    }
    .data-table tbody tr:hover,
    .table tbody tr:hover {
        background-color: rgba(47, 111, 237, 0.045);
    }

    /* -- apparitions ----------------------------------------------------- */

    /* Un message de confirmation arrive, il ne surgit pas. Une seule
       exécution, jamais de boucle. */
    .flash-messages .flash-message,
    .ai-page .alert {
        animation: motion-rise 180ms ease-out;
    }

    /* Le contenu d'un guide déplié apparaît en fondu : le dépliage
       lui-même reste natif, donc instantané et fiable. */
    details[open] > *:not(summary) {
        animation: motion-fade 160ms ease-out;
    }

    @keyframes motion-rise {
        from { opacity: 0; transform: translateY(4px); }
        to   { opacity: 1; transform: none; }
    }
    @keyframes motion-fade {
        from { opacity: 0; }
        to   { opacity: 1; }
    }
}