/* Imagilire Studio — Cadre de redimensionnement des images
 *
 * Le pendant visuel de `js/imagilire-studio-image-resize.js` : le cadre qui
 * entoure une image sélectionnée, ses quatre poignées d'angle et la barre de
 * tailles nommées.
 *
 * ## 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 cadre 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). Aucune valeur littérale : le
 * thème sombre redéfinit les jetons, le cadre bascule avec lui sans une ligne
 * de plus. L'anneau de focus vient de `a11y.css` (lot 4.2) et n'est pas
 * redéfini ici.
 *
 * ## Les tailles de cible
 *
 * Les poignées font 14 px à la souris et 24 px au doigt, avec une zone
 * sensible portée à 44 px par un `::before` transparent — la recommandation
 * WCAG 2.5.5, et la réalité d'un élève qui vise sur une tablette posée à plat.
 */

/* Le cadre est un calque posé sur l'image : il ne reçoit le pointeur que là où
 * il y a quelque chose à saisir, sinon on ne pourrait plus cliquer dans le
 * texte qui passe dessous. */
#imagilire-studio-app .image-resize-overlay {
    position: absolute;
    z-index: 3;
    pointer-events: none;
}

#imagilire-studio-app .image-resize-overlay[hidden] {
    display: none;
}

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

#imagilire-studio-app .image-resize-frame {
    position: absolute;
    inset: 0;
    border: 2px solid var(--primary-color);
    border-radius: 6px;
}

/* --- Les poignées d'angle ------------------------------------------- */

#imagilire-studio-app .image-resize-handle {
    position: absolute;
    width: 14px;
    height: 14px;
    padding: 0;
    border: 2px solid var(--primary-color);
    border-radius: 50%;
    background-color: var(--surface-color);
    box-shadow: var(--shadow-sm);
    pointer-events: auto;
    /* Sans cela, le premier pixel de glissé fait défiler la page sur tablette
     * au lieu de redimensionner. */
    touch-action: none;
}

/* La zone sensible, portée à 44 px sans que la poignée grossisse. */
#imagilire-studio-app .image-resize-handle::before {
    content: '';
    position: absolute;
    inset: -15px;
}

#imagilire-studio-app .image-resize-handle:hover {
    background-color: var(--primary-color);
}

#imagilire-studio-app .image-resize-handle-nw {
    top: -8px;
    left: -8px;
    cursor: nwse-resize;
}

#imagilire-studio-app .image-resize-handle-ne {
    top: -8px;
    right: -8px;
    cursor: nesw-resize;
}

#imagilire-studio-app .image-resize-handle-sw {
    bottom: -8px;
    left: -8px;
    cursor: nesw-resize;
}

#imagilire-studio-app .image-resize-handle-se {
    bottom: -8px;
    right: -8px;
    cursor: nwse-resize;
}

/* --- La barre de tailles -------------------------------------------- */

/* Sous l'image. `top: 100%` et non `bottom: -…` : la barre suit le bord bas
 * quelle que soit la hauteur de l'image.
 *
 * Le décalage horizontal est posé par le JS (`replacerLaBarre()`), qui la
 * centre sous l'image **sans la laisser sortir** de la zone de rédaction :
 * centrée en CSS, elle perdait son premier bouton sous la marge gauche dès
 * qu'une image était posée près du bord. */
#imagilire-studio-app .image-resize-toolbar {
    position: absolute;
    top: 100%;
    left: 0;
    transform: translateY(var(--spacing-2));
    display: flex;
    /* Elle passe à la ligne plutôt que de sortir de l'écran : sur téléphone,
     * les quatre tailles ne tiennent pas sur la largeur d'une colonne de
     * texte. Le plafond est posé par le JS, qui seul connaît cette largeur. */
    flex-wrap: wrap;
    /* `max-content` borné par le plafond du JS : sans lui, la largeur d'un
     * élément positionné se calcule sur celle de **l'image**, et la barre se
     * replierait en quatre lignes sous une vignette. */
    width: max-content;
    justify-content: center;
    align-items: center;
    gap: var(--spacing-1);
    padding: var(--spacing-1) var(--spacing-2);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background-color: var(--surface-color);
    box-shadow: var(--shadow-md);
    pointer-events: auto;
}

#imagilire-studio-app .image-resize-preset {
    padding: var(--spacing-1) var(--spacing-2);
    border: 1px solid transparent;
    border-radius: 6px;
    background-color: transparent;
    color: var(--text-primary);
    font-family: inherit;
    font-size: var(--font-size-sm);
    line-height: 1.6;
    white-space: nowrap;
    cursor: pointer;
    transition: var(--transition-fast);
}

#imagilire-studio-app .image-resize-preset:hover {
    border-color: var(--border-color);
    background-color: var(--background-color);
}

/* La largeur obtenue, en chiffres. `role="status"` côté JS : elle n'est
 * annoncée qu'une fois posée, jamais pendant le glissé. */
#imagilire-studio-app .image-resize-size {
    padding-left: var(--spacing-2);
    border-left: 1px solid var(--border-color);
    color: var(--text-muted);
    font-size: var(--font-size-xs);
    font-variant-numeric: tabular-nums;
}

/* Pendant le glissé, la barre s'efface : elle gênerait la vue de ce qu'on est
 * précisément en train de régler. */
#imagilire-studio-app .image-resize-overlay.is-resizing .image-resize-toolbar {
    opacity: 0;
}

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

@media (pointer: coarse) {
    #imagilire-studio-app .image-resize-handle {
        width: 24px;
        height: 24px;
    }

    #imagilire-studio-app .image-resize-handle::before {
        inset: -10px;
    }

    #imagilire-studio-app .image-resize-handle-nw,
    #imagilire-studio-app .image-resize-handle-ne {
        top: -13px;
    }

    #imagilire-studio-app .image-resize-handle-sw,
    #imagilire-studio-app .image-resize-handle-se {
        bottom: -13px;
    }

    #imagilire-studio-app .image-resize-handle-nw,
    #imagilire-studio-app .image-resize-handle-sw {
        left: -13px;
    }

    #imagilire-studio-app .image-resize-handle-ne,
    #imagilire-studio-app .image-resize-handle-se {
        right: -13px;
    }

    #imagilire-studio-app .image-resize-preset {
        padding: var(--spacing-2) var(--spacing-3);
        font-size: var(--font-size-medium);
    }
}

/* --- Ce qui n'est pas le cadre --------------------------------------- */

/* Une image est cliquable : le curseur doit le dire. */
#imagilire-studio-app .ql-editor img {
    cursor: pointer;
}

/* L'aperçu syllabé recopie le HTML du document, attribut `width` compris. Sans
 * ces deux lignes, une image plus large que le volet y déborderait — l'éditeur
 * les avait, l'aperçu ne les a jamais eues. */
#imagilire-studio-app .preview-content img {
    max-width: 100%;
    height: auto;
}

/* Rien de tout cela ne s'imprime : le cadre est un outil d'édition. */
@media print {
    .image-resize-overlay {
        display: none;
    }
}