/**
 * Rogneur d'image — feuille de style commune à l'administration et à l'espace
 * client.
 *
 * ## Pourquoi un fichier à part
 *
 * `main.min.css` est produit par Tailwind : l'éditer à la main serait perdu à la
 * prochaine génération. Dupliquer ces règles dans `admin-theme.css` et
 * `espace-client.css` les ferait diverger. Un fichier neutre, chargé par les
 * deux interfaces, évite les deux ennuis.
 *
 * ## Elle ne style pas Cropper.js
 *
 * La bibliothèque construit elle-même son canevas, ses poignées et sa grille,
 * et injecte ses propres règles. Une feuille qui réécrirait son apparence ne
 * ferait que créer deux vérités concurrentes à corriger. Ici on ne fait que
 * dimensionner son conteneur et habiller la fenêtre.
 *
 * ## Uniquement des classes propres
 *
 * Aucune classe Tailwind. L'administration se?style avec Tailwind, l'espace
 * client avec ses propres classes ; ces règles ne dépendent donc d'aucun des
 * deux.
 */

/* --- Bloc ------------------------------------------------------------- */

.rogneur {
    display: block;
    margin-top: 0.5rem;
}

/* --- Champ de fichier -------------------------------------------------- */

.rogneur__fichier {
    display: block;
    width: 100%;
    font-size: 0.875rem;
    color: #334155;
    background: #fff;
    border: 1px solid #cbd5e1;
    border-radius: 0.75rem;
    padding: 0.625rem 0.875rem;
}

.rogneur__fichier:focus-visible {
    outline: 2px solid #0f172a;
    outline-offset: 1px;
    border-color: #0f172a;
}

/* --- Vignette et bouton ------------------------------------------------ */

.rogneur__apercu {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem;
    margin-top: 0.75rem;
}

.rogneur__apercu[hidden] {
    display: none;
}

.rogneur__vignette {
    display: block;
    width: 5rem;
    height: 5rem;
    object-fit: cover;
    border-radius: 0.5rem;
    border: 1px solid #cbd5e1;
    background: #f8fafc;
}

/* --- Boutons ----------------------------------------------------------- */

.rogneur__bouton {
    display: inline-block;
    padding: 0.5rem 0.875rem;
    font-size: 0.8125rem;
    font-weight: 700;
    color: #334155;
    background: #fff;
    border: 1px solid #cbd5e1;
    border-radius: 0.5rem;
    cursor: pointer;
    transition: background-color 0.15s ease, border-color 0.15s ease;
}

.rogneur__bouton:hover {
    background: #f1f5f9;
    border-color: #94a3b8;
}

.rogneur__bouton:focus-visible {
    outline: 2px solid #0f172a;
    outline-offset: 2px;
}

.rogneur__bouton--principal {
    color: #fff;
    background: #0f172a;
    border-color: #0f172a;
}

.rogneur__bouton--principal:hover {
    background: #1e293b;
    border-color: #1e293b;
}

.rogneur__bouton--calme {
    color: #475569;
    background: transparent;
}

/* --- La fenêtre -------------------------------------------------------- */

/*
 * La fenêtre couvre l'écran, et non le formulaire. Rogner demande de l'espace :
 * c'est tout l'intérêt de la fenêtre plutôt que d'un bloc inséré dans la page.
 */
.rogneur__fenetre {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    background: rgba(15, 23, 42, 0.75);
}

.rogneur__fenetre[hidden] {
    display: none;
}

.rogneur__fenetre-boite {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    width: 100%;
    max-width: 56rem;
    max-height: 100%;
    overflow: auto;
    padding: 1rem;
    background: #fff;
    border-radius: 1rem;
    box-shadow: 0 25px 60px rgba(15, 23, 42, 0.35);
}

.rogneur__fenetre-entete {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.rogneur__fenetre-titre {
    margin: 0;
    font-size: 1rem;
    font-weight: 800;
    color: #0f172a;
}

.rogneur__fermer {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    font-size: 1.25rem;
    line-height: 1;
    color: #475569;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 0.5rem;
    cursor: pointer;
}

.rogneur__fermer:hover {
    background: #f1f5f9;
    border-color: #cbd5e1;
}

.rogneur__fermer:focus-visible {
    outline: 2px solid #0f172a;
    outline-offset: 1px;
}

.rogneur__fenetre-pied {
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
}

.rogneur__consigne {
    margin: 0;
    font-size: 0.8125rem;
    color: #475569;
}

/* --- Zone d'aperçu de Cropper.js --------------------------------------- */

/*
 * Cropper.js y insère son composant.
 *
 * La zone a une **hauteur définie**, et non seulement une largeur : le
 * canevas la remplit (voir ci-dessous), donc une petite photo n'y fait plus
 * une bande étroite avec un grand vide en dessous.
 *
 * `svh` est préféré à `vh` : sur un téléphone, la barre d'adresse du
 * navigateur rend `vh` plus grand que l'écran visible, et le bas de la zone
 * disparaîtrait derrière. `svh` exclut cette barre.
 */
.rogneur__zone {
    display: block;
    width: 100%;
    /*
     * Hauteur fixe : le canevas remplit la zone, même pour une petite image.
     *
     * Sans hauteur, le canevas épouse l'image : une petite photo donnait une
     * bande étroite en haut et un grand vide en dessous. Ici le damier occupe
     * toute la zone, et le carré s'ajuste sur l'image au lieu de se perdre
     * dans le vide. Validé à l'œil sur une vraie petite photo.
     */
    height: 60vh;
    height: 60svh;
    min-height: 14rem;
    max-height: 32rem;
    overflow: hidden;
    border-radius: 0.75rem;
    background: #f8fafc;
}

.rogneur__zone > img {
    display: block;
    max-width: 100%;
    height: auto;
}

/*
 * Le canevas remplit la zone : c'est du dimensionnement, pas du style. La
 * feuille n'habille toujours pas la bibliothèque, elle donne une taille à
 * son conteneur et à son canevas.
 */
.rogneur__zone cropper-canvas {
    display: block;
    width: 100%;
    height: 100%;
}

/* --- Texte d'aide ------------------------------------------------------ */

.rogneur__aide {
    display: block;
    flex: 1 1 12rem;
    font-size: 0.8125rem;
    line-height: 1.4;
    color: #475569;
}

/* --- Les quatre champs cachés ----------------------------------------- */

/*
 * Ils ne sont pas `display: none` mais hors écran. Ces valeurs ne sont pas
 * destinées à être lues, seulement transportées : les sortir du flux les rend
 * invisibles sans les sortir du formulaire.
 */
.rogneur__mesures {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

/* --- Le corps pendant l'ouverture -------------------------------------- */

/*
 * Le défilement de l'arrière-plan est neutralisé tant que la fenêtre est
 * ouverte : sans cela, un geste sur l'image fait bouger la page derrière, et le
 * cadre semble partir tout seul.
 */
body.rogneur-ouvert {
    overflow: hidden;
}