/* Imagilire Studio — Le crayon de correction des formules
 *
 * Le pendant visuel de `js/imagilire-studio-formula-edit.js` : le bouton qui
 * paraît au coin d'une formule visée, et le message d'aide qui l'accompagne
 * une seule fois.
 *
 * ## Pourquoi une feuille, et pas un bloc injecté
 *
 * Ces règles étaient écrites en JavaScript, dans `addFormulaClickableStyles()`
 * — deux cents lignes de CSS dans une chaîne de caractères, ajoutées au
 * `<head>` au premier passage. C'est ce qui a permis au défaut de durer : une
 * feuille de style se relit, un `style.textContent` se parcourt. Deux crayons
 * s'y superposaient depuis le début, parce que le même `::after` était posé sur
 * `.ql-formula` **et** sur `.katex`, qui est son enfant. Le bloc portait aussi
 * un sélecteur qui n'existe pas (`::after:active`, un pseudo-élément suivi
 * d'une pseudo-classe) et un `min-height: 44px` qui faisait monter une formule
 * en ligne à 70 px de haut.
 *
 * Le lot 2.4 avait déjà sorti l'habillage des formules de
 * `mathquill-integration.js` vers `imagilire-studio-mathquill.css`. Ceci
 * termine le déménagement.
 *
 * ## Deux contraintes de forme, héritées des lots précédents
 *
 * **Pas un seul `!important`** (lot 5.4). Tout est porté sous
 * `#imagilire-studio-app`, la racine de l'application : un identifiant pèse
 * plus lourd que n'importe quel empilement de classes, donc plus lourd que
 * tout ce que Quill écrit. Le bouton vit dans `.ql-container`, en territoire
 * Quill ; c'est exactement le cas que cette hiérarchie a été faite pour régler.
 *
 * **Rien qu'en jetons de couleur** (lot 4.4), pour que le thème sombre suive
 * sans une ligne de plus. L'anneau de focus vient de `a11y.css` (lot 4.2) et
 * n'est pas redéfini ici.
 *
 * Le message d'aide, lui, est fils de `<body>` : le porter sous la racine ne
 * l'atteindrait jamais. Même raison que l'infobulle du correcteur.
 */

/* --- Le crayon -------------------------------------------------------- */

/* Un disque clair cerclé de la couleur de marque, comme les poignées de
 * redimensionnement des images : c'est le même geste — « ceci se règle » — et
 * il vaut mieux qu'il se dise deux fois de la même manière.
 *
 * L'ancien dispositif posait un émoji blanc sur un disque rouge. Le rouge
 * annonce une erreur, ce que n'est pas une formule à corriger ; et un émoji ne
 * se recolore pas, donc ne suit ni le thème sombre ni les palettes. */
#imagilire-studio-app .formula-edit-button {
    position: absolute;
    z-index: 4;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    padding: 0;
    border: 2px solid var(--primary-color);
    border-radius: 50%;
    background-color: var(--surface-color);
    color: var(--text-primary);
    box-shadow: var(--shadow-md);
    cursor: pointer;
    transition: var(--transition-fast);
}

#imagilire-studio-app .formula-edit-button[hidden] {
    display: none;
}

/* Une formule défilée hors de la zone visible emporterait son crayon par-dessus
 * la barre d'outils. Le JS pose la classe, la feuille le fait disparaître. */
#imagilire-studio-app .formula-edit-button.is-out-of-view {
    visibility: hidden;
}

#imagilire-studio-app .formula-edit-button svg {
    width: 16px;
    height: 16px;
    pointer-events: none;
}

#imagilire-studio-app .formula-edit-button:hover,
#imagilire-studio-app .formula-edit-button:focus-visible {
    background-color: var(--primary-color);
    color: var(--surface-color);
}

#imagilire-studio-app .formula-edit-button:active {
    transform: scale(0.94);
}

/* --- Au doigt --------------------------------------------------------- */

/* La cible passe à 44 px — la recommandation WCAG 2.5.5 — sans que le disque
 * grossisse d'autant : un crayon de 44 px recouvrirait la ligne au-dessus.
 * C'est la même solution que les poignées d'images : un `::before`
 * transparent, qui n'est visible de personne et attrapable par tout le monde.
 *
 * `inset: -7px` et non `-5px` pour un disque de 34 px : le bloc conteneur d'un
 * enfant positionné est la **boîte de rembourrage**, bordure exclue. Les deux
 * pixels de bordure de chaque côté sont donc déjà retirés, et `-5px` ne donnait
 * que 40 px de cible — mesuré dans l'application, avec le pointeur grossier
 * émulé. 30 + 2 × 7 = 44.
 *
 * `pointer: coarse` et non une largeur d'écran : c'est le doigt qui appelle une
 * grande cible, pas une petite fenêtre. */
@media (pointer: coarse) {
    #imagilire-studio-app .formula-edit-button {
        width: 34px;
        height: 34px;
    }

    #imagilire-studio-app .formula-edit-button::before {
        content: '';
        position: absolute;
        inset: -7px;
    }

    #imagilire-studio-app .formula-edit-button svg {
        width: 19px;
        height: 19px;
    }
}

/* --- La formule en cours de correction -------------------------------- */

/* `highlightFormulaForEditing()`, dans `editor.js`, pose cette classe deux
 * secondes au moment où la fenêtre de saisie s'ouvre. Elle dit *laquelle* des
 * formules du document est en train d'être corrigée — ce qui compte quand il y
 * en a plusieurs, et qui était précisément le cas où l'ancien code se
 * trompait de cible. */
#imagilire-studio-app .ql-editor .ql-formula.formula-being-edited {
    outline: 2px solid var(--primary-color);
    outline-offset: 2px;
    border-radius: 4px;
}

/* --- L'aide, une fois ------------------------------------------------- */

/* `pointer-events: none` est indispensable : le message se pose au coin
 * bas-droit de la fenêtre, et sans lui il intercepterait les clics sur ce
 * qu'il recouvre. Même règle que l'ancien message d'aide aux formules, dont il
 * reprend la place. */
.formula-edit-hint {
    position: fixed;
    right: var(--spacing-4);
    bottom: var(--spacing-4);
    z-index: 1000;
    max-width: 300px;
    padding: var(--spacing-3) var(--spacing-4);
    border-radius: 8px;
    background-color: var(--primary-hover);
    color: var(--surface-color);
    font-family: var(--font-family-base);
    font-size: var(--font-size-small);
    line-height: 1.5;
    box-shadow: var(--shadow-lg);
    pointer-events: none;
    animation: formula-edit-hint-entree 0.4s ease-out;
}

@keyframes formula-edit-hint-entree {
    from { opacity: 0; transform: translateX(var(--spacing-4)); }
    to { opacity: 1; transform: translateX(0); }
}

/* Une animation d'entrée n'a rien d'indispensable, et coûte cher à qui souffre
 * de troubles vestibulaires. */
@media (prefers-reduced-motion: reduce) {
    .formula-edit-hint {
        animation: none;
    }

    #imagilire-studio-app .formula-edit-button {
        transition: none;
    }

    #imagilire-studio-app .formula-edit-button:active {
        transform: none;
    }
}

/* --- À l'impression --------------------------------------------------- */

/* Un outil d'édition n'a rien à faire sur une feuille de papier. */
@media print {
    #imagilire-studio-app .formula-edit-button,
    .formula-edit-hint {
        display: none;
    }
}