/* doc-project | projet/assets/css/simple-catalog-description-modal.css | styles dedies a la modal Voir plus de la home catalogue simplifiee avec overlay accessible, fermeture absolue hors flux pour ne jamais pousser ni chevaucher les contenus, zone de contenu scrollable, image portail contenue en media-frame dans un bloc distinct de la description, description complete en liste a puces issue des sauts de ligne admin et footer CTA persistant en bas de dialogue pour Devis express Configurer commander en responsive desktop mobile */
.simple-catalog-description-modal[hidden] {
    display: none !important;
}

.simple-catalog-description-modal {
    position: fixed;
    inset: 0;
    z-index: 950;
    display: grid;
    place-items: center;
    padding: 22px;
}

.simple-catalog-description-modal__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(28, 22, 17, 0.62);
    backdrop-filter: blur(7px);
}

.simple-catalog-description-modal__dialog {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-rows: minmax(0, 1fr) auto;
    grid-template-columns: minmax(0, 1fr);
    width: min(760px, 100%);
    max-height: min(86vh, 820px);
    min-width: 0;
    overflow: hidden;
    padding: 0;
    border: 1px solid rgba(138, 90, 43, 0.18);
    background:
        radial-gradient(circle at top left, rgba(255, 255, 255, 0.86), transparent 34%),
        linear-gradient(180deg, #fffaf3 0%, #f7efe3 100%);
    box-shadow: 0 24px 80px rgba(38, 28, 20, 0.32);
}

.simple-catalog-description-modal__scroll {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-auto-rows: max-content;
    gap: 18px;
    min-height: 0;
    min-width: 0;
    overflow: auto;
    overscroll-behavior: contain;
    padding: 22px;
}

.simple-catalog-description-modal__close {
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 20;
    display: inline-grid;
    place-items: center;
    width: 38px;
    height: 38px;
    border: 1px solid rgba(95, 60, 27, 0.18);
    border-radius: 999px;
    background: rgba(255, 251, 245, 0.94);
    color: var(--accent-dark);
    cursor: pointer;
    font-size: 26px;
    line-height: 1;
}

.simple-catalog-description-modal__close:hover,
.simple-catalog-description-modal__close:focus-visible {
    background: #fff;
    color: var(--accent);
}

.simple-catalog-description-modal__header {
    padding-right: 46px;
}

.simple-catalog-description-modal__header h3 {
    margin: 0;
    color: var(--accent-dark);
    font-size: clamp(24px, 4vw, 36px);
    line-height: 1.12;
}

.simple-catalog-description-modal__media {
    position: relative;
    display: grid;
    place-items: center;
    box-sizing: border-box;
    width: 100%;
    max-width: 100%;
    min-height: 260px;
    min-width: 0;
    overflow: hidden;
    border: 1px solid rgba(138, 90, 43, 0.12);
    border-radius: 22px;
    background: #eadfce;
}

.simple-catalog-description-modal__media .sabatier-media-frame__image {
    display: block;
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    object-position: center center;
}

.simple-catalog-description-modal__content {
    display: grid;
    gap: 8px;
    min-width: 0;
    min-height: 0;
    padding: 16px 0 0;
    border-top: 1px solid rgba(138, 90, 43, 0.16);
}

.simple-catalog-description-modal__content h4 {
    margin: 0;
    color: var(--accent-dark);
    font-size: 16px;
    font-weight: 900;
}

.simple-catalog-description-modal__description-list {
    display: grid;
    gap: 10px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.simple-catalog-description-modal__description-list li {
    position: relative;
    min-width: 0;
    margin: 0;
    padding-left: 20px;
    color: var(--muted);
    font-size: 16px;
    line-height: 1.7;
    overflow-wrap: anywhere;
}

.simple-catalog-description-modal__description-list li::before {
    content: "";
    position: absolute;
    top: 0.72em;
    left: 0;
    width: 8px;
    height: 8px;
    border-radius: 999px;
    background: var(--accent);
    box-shadow: 0 0 0 3px rgba(138, 90, 43, 0.12);
}

.simple-catalog-description-modal__actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    position: relative;
    z-index: 15;
    padding: 14px 22px 18px;
    border-top: 1px solid rgba(138, 90, 43, 0.16);
    background: linear-gradient(180deg, rgba(255, 250, 243, 0.86), #fffaf3 44%, #f7efe3 100%);
    box-shadow: 0 -14px 32px rgba(38, 28, 20, 0.12);
    backdrop-filter: blur(10px);
}

.simple-catalog-description-modal__cta {
    position: relative;
    width: 100%;
    min-height: 48px;
}

.simple-catalog-description-modal__cta--express {
    border: 1px solid rgba(95, 60, 27, 0.20);
    background: linear-gradient(180deg, rgba(255, 251, 245, 1), rgba(244, 230, 209, 0.98));
    color: var(--accent-dark);
}

.simple-catalog-description-modal__cta--configure {
    background: linear-gradient(135deg, var(--accent), var(--accent-dark));
    color: #fff;
}

body.has-simple-catalog-description-modal-open {
    overflow: hidden;
}

@media (max-width: 640px) {
    .simple-catalog-description-modal {
        align-items: end;
        padding: 12px;
    }

    .simple-catalog-description-modal__dialog {
        width: 100%;
        max-height: 90vh;
        border-radius: 24px 24px 18px 18px;
    }

    .simple-catalog-description-modal__scroll {
        gap: 16px;
        padding: 18px;
    }

    .simple-catalog-description-modal__media {
        min-height: 190px;
        border-radius: 18px;
    }

    .simple-catalog-description-modal__header {
        padding-right: 44px;
    }

    .simple-catalog-description-modal__description-list li {
        padding-left: 18px;
        font-size: 14px;
        line-height: 1.65;
        overflow-wrap: break-word;
    }

    .simple-catalog-description-modal__actions {
        grid-template-columns: 1fr;
        padding: 12px 18px 16px;
    }

    .simple-catalog-description-modal__cta {
        min-height: 46px;
    }
}