.c-item-modal-overlay { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.7); display: flex; align-items: center; justify-content: center; z-index: 200; } .c-item-modal-overlay__content { background: var(--misaju-color-primary); color: var(--misaju-color-text); max-width: 40rem; width: 90%; max-height: 85vh; overflow-y: auto; padding: var(--misaju-spacing-lg); border-radius: 0.5rem; } .c-item-modal-overlay__close { position: absolute; top: var(--misaju-spacing-md); right: var(--misaju-spacing-md); background: none; border: none; color: var(--misaju-color-text); font-size: 1.5rem; cursor: pointer; } /* * La modale injecte directement le
récupéré en fetch * (cf. C_ItemModal.js), sans le de la page produit : la contrainte de taille posée * par P_ItemDetail.css (chargée via @push('page-styles')) n'atteint donc jamais l'image * une fois dans la modale. On la reproduit ici, seule feuille garantie présente dans ce * contexte, pour éviter qu'une image source en pleine résolution ne fasse déborder la modale. */ .c-item-modal-overlay__content .c-item-detail__image { width: 100%; max-height: 360px; object-fit: cover; border-radius: var(--misaju-radius, 12px); }