/* =============================================================================
   Contenu et medias - miniature, galerie, choix d'image, visionneuse
   -----------------------------------------------------------------------------
   Comme pour les familles precedentes, ces regles vivaient dans des blocs <style>
   a l'interieur des composants. Elles employaient par ailleurs les variables
   --mud-palette-* et des couleurs ecrites en clair - #f9f9f9, #eee, #d8dde3 -
   qui ne suivaient donc aucune marque.
   ============================================================================= */


/* =============================================================================
   MyMiniatureImage
   ============================================================================= */

.my-miniature {
    flex: 0 0 auto;
    width: var(--my-miniature-taille, 40px);
    height: var(--my-miniature-taille, 40px);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--my-radius-sm);
    background: var(--my-surface-sunken);
    overflow: hidden;
}

/*  Recadrage et non ajustement : dans une liste, des miniatures de rapports
    differents doivent occuper la meme surface, sinon les lignes ne s'alignent plus.
    La contrepartie est que les bords peuvent etre coupes. */
.my-miniature__image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.my-miniature .mud-icon-root.my-miniature__repli {
    /* La moitie du cote : l'icone doit se lire comme un signe d'absence, pas comme
       une image en soi. */
    font-size: calc(var(--my-miniature-taille, 40px) / 2);
    color: var(--my-neutral-300);
}


/* =============================================================================
   MyProductGallery
   ============================================================================= */

.my-gallery {
    display: flex;
    flex-direction: column;
    gap: var(--my-space-md);
}

.my-gallery--collante {
    position: sticky;
}

/*  Cadre carre : les images de catalogue ont des rapports differents, et un cadre
    a hauteur variable ferait sauter la mise en page a chaque changement d'image. */
.my-gallery__cadre {
    width: 100%;
    aspect-ratio: 1 / 1;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--my-border-subtle);
    border-radius: var(--my-radius-lg);
    background: var(--my-surface-sunken);
    overflow: hidden;
}

/*  Ajustement et non recadrage, contrairement a la miniature : ici l'image est le
    sujet, et en couper un bord serait une perte d'information. */
.my-gallery__image {
    max-width: 100%;
    max-height: 100%;
    padding: var(--my-space-lg);
    object-fit: contain;
    transition: transform var(--my-transition-base);
}

.my-gallery__cadre:hover .my-gallery__image {
    transform: scale(1.06);
}

.my-gallery .mud-icon-root.my-gallery__repli {
    font-size: 5rem;
    color: var(--my-neutral-300);
}

.my-gallery__miniatures {
    display: flex;
    flex-wrap: wrap;
    gap: var(--my-space-sm);
}

/*  Les miniatures sont des boutons et non des div cliquables : une div ne recoit
    pas le focus et ne repond pas a la barre d'espace, ce qui rendait la galerie
    d'origine inutilisable au clavier. */
.my-gallery__miniature {
    flex: 0 0 auto;
    width: 68px;
    height: 68px;
    padding: 4px;
    border: 2px solid var(--my-border-subtle);
    border-radius: var(--my-radius-md);
    background: var(--my-surface-sunken);
    cursor: pointer;
    overflow: hidden;
    transition: border-color var(--my-transition-fast);
}

.my-gallery__miniature-image {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}

.my-gallery__miniature:hover,
.my-gallery__miniature.is-active {
    border-color: var(--my-action-primary);
}

@media (max-width: 600px) {
    .my-gallery__miniature {
        width: 56px;
        height: 56px;
    }
}


/* =============================================================================
   MyImageUploader
   -----------------------------------------------------------------------------
   Noms de classes repris a l'identique de l'original (my-image-uploader__*), pour
   qu'un projet qui ciblait ces classes n'ait rien a changer. Seules les couleurs
   ecrites en dur passent par les tokens.
   ============================================================================= */

.my-image-uploader {
    position: relative;
    width: var(--miu-taille, 100%);
    height: var(--miu-taille, 100%);
    min-height: 200px;
}

.my-image-uploader__input {
    position: absolute;
    inset: 0;
    opacity: 0;
    cursor: pointer;
    z-index: 10;
}

.my-image-uploader__zone {
    width: 100%;
    height: 100%;
    min-height: 200px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px dashed var(--my-border-default);
    border-radius: var(--my-radius-md);
    background: var(--my-surface-sunken);
    overflow: hidden;
    position: relative;
    transition: border-color var(--my-transition-fast), background var(--my-transition-fast);
}

.my-image-uploader__zone--drag-over {
    border-color: var(--my-action-primary);
    background: var(--my-brand-primary-subtle);
}

.my-image-uploader__zone--has-image {
    border-color: var(--my-action-primary);
    background: transparent;
    padding: 6px;
}

.my-image-uploader__zone--has-image:hover {
    background: var(--my-brand-primary-subtle);
}

.my-image-uploader__content {
    width: 100%;
    height: 100%;
}

.my-image-uploader__preview {
    width: 100%;
    height: 100%;
    border-radius: var(--my-radius-sm);
}

.my-image-uploader__overlay {
    position: absolute;
    inset: 6px;
    border-radius: var(--my-radius-sm);
    background: rgba(var(--my-neutral-800-rgb), 0.55);
    color: var(--my-neutral-0);
    opacity: 0;
    transition: opacity var(--my-transition-fast);
    pointer-events: none;
}

.my-image-uploader__zone--has-image:hover .my-image-uploader__overlay {
    opacity: 1;
}

/*  Mode lecture seule (cartes catalogue) : pas de bordure ni de marge, image nette
    et carree - c'est un visuel affiche, pas une zone de depot. */
.my-image-uploader:has(.my-image-uploader__zone--readonly) {
    height: auto;
    min-height: 0;
}

.my-image-uploader__zone--readonly {
    border: none;
    padding: 0;
    background: transparent;
    aspect-ratio: 1 / 1;
    height: auto;
    min-height: 0;
}

.my-image-uploader__zone--readonly .my-image-uploader__preview {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    border-radius: var(--my-radius-md);
}

.my-image-uploader__zone--readonly .my-image-uploader__overlay {
    inset: 0;
    border-radius: var(--my-radius-md);
}

.my-image-uploader__overlay--clickable {
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: auto;
    cursor: pointer;
}

.my-image-uploader__overlay-icon {
    width: 48px;
    height: 48px;
    border-radius: var(--my-radius-full);
    background: var(--my-action-primary);
    color: var(--my-action-primary-text);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: var(--my-shadow-md);
}

.my-image-uploader__overlay-icon .mud-icon-root {
    font-size: 1.4rem;
}

.my-image-uploader__overlay-text {
    font-weight: var(--my-font-weight-bold);
    letter-spacing: 0.3px;
}

.my-image-uploader__icon {
    width: 52px;
    height: 52px;
    border-radius: var(--my-radius-full);
    background: var(--my-brand-primary-subtle);
    color: var(--my-action-primary);
    display: flex;
    align-items: center;
    justify-content: center;
}

.my-image-uploader__icon .mud-icon-root {
    font-size: 1.7rem;
}

.my-image-uploader__title {
    font-weight: var(--my-font-weight-bold);
    color: var(--my-text-heading);
    margin: 4px 0 0;
    text-align: center;
}

.my-image-uploader__hint {
    color: var(--my-text-muted);
    margin: 0;
    text-align: center;
}


/* =============================================================================
   MyDocumentViewer
   ============================================================================= */

.my-viewer {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    min-height: 0;
}

.my-viewer__image {
    max-width: 100%;
    max-height: 100%;
    margin: auto;
    object-fit: contain;
    display: block;
    border-radius: var(--my-radius-sm);
    box-shadow: var(--my-shadow-sm);
}

/* L'objet et le cadre occupent toute la place disponible : c'est la fenetre qui
   borne la hauteur, pas le document. */
.my-viewer__cadre {
    flex: 1 1 auto;
    width: 100%;
    min-height: 0;
    border: none;
    border-radius: var(--my-radius-sm);
    box-shadow: var(--my-shadow-sm);
    background: var(--my-surface-card);
}

.my-viewer__indisponible {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--my-space-sm);
    height: 100%;
    padding: var(--my-space-xl);
    text-align: center;
}

/* 5rem et la couleur d'erreur, comme l'original : un format qui ne s'affiche pas
   est signale, pas seulement constate. La couleur vient de Color.Error pose sur
   l'icone, seule la taille est fixee ici. */
.my-viewer .mud-icon-root.my-viewer__icone {
    font-size: 5rem;
}

.my-viewer__titre {
    margin: 0;
    font-size: var(--my-font-size-lg);
    font-weight: var(--my-font-weight-bold);
    color: var(--my-text-heading);
}

.my-viewer__detail {
    max-width: 44ch;
    margin: 0;
    line-height: var(--my-line-height-loose);
    color: var(--my-text-muted);
}


/* =============================================================================
   MyDocumentViewerDialog
   ============================================================================= */

/*  Le corps de la fenetre n'a pas de marge interne : le document doit occuper toute
    la surface disponible. La marge est portee par la visionneuse elle-meme quand
    elle en a besoin. Trois declarations forcees disparaissent avec ce selecteur,
    dont la specificite suffit. */
.mud-dialog.my-viewer-dialog .mud-dialog-content {
    padding: var(--my-space-md);
}

.mud-dialog.my-viewer-dialog .my-modal__body {
    height: 100%;
}