/* doc-project | projet/assets/css-client-v111/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;
    }
}

/* Grande fiche photo : le portail utilise la surface disponible, sans recadrage. */
.simple-catalog-description-modal{padding:16px}
.simple-catalog-description-modal__dialog{width:min(1680px,100%);height:min(940px,calc(100dvh - 32px));max-height:calc(100dvh - 32px);border-radius:22px}
.simple-catalog-description-modal__scroll{grid-template-columns:minmax(0,1fr) 300px;grid-template-rows:auto minmax(0,1fr);gap:16px;padding:20px;overflow:hidden}
.simple-catalog-description-modal__header{grid-column:1 / -1}
.simple-catalog-description-modal__header h3{font-size:clamp(24px,3vw,34px)}
.simple-catalog-description-modal__media{grid-column:1;grid-row:2;min-height:0;height:100%;aspect-ratio:auto;background:#29241f;border-radius:14px}
.simple-catalog-description-modal__media::before{opacity:.12;filter:blur(32px)}
#simple-catalog-description-modal-image{position:absolute;inset:0;width:100%;height:100%;max-width:100%;max-height:100%;object-fit:contain;cursor:zoom-in}
.simple-catalog-description-modal__content{grid-column:2;grid-row:2;overflow:auto;align-content:start;overscroll-behavior:contain;padding:10px 8px 10px 0;border:0}
.simple-catalog-description-modal__description-list li{font-size:14px;line-height:1.6}
.catalog-photo-expand{position:absolute;z-index:5;right:12px;bottom:12px;min-height:42px;border:1px solid #dfcfbc;border-radius:24px;padding:10px 16px;background:#fffaf3;color:#503720;font-family:inherit;font-size:13px;font-weight:700;box-shadow:0 3px 16px #0003;cursor:pointer}
.catalog-photo-expand:hover{background:#795235;color:#fff}.catalog-photo-expand:focus-visible{outline:3px solid #c08b52;outline-offset:3px}
.simple-catalog-description-modal.is-photo-expanded .simple-catalog-description-modal__scroll{grid-template-columns:minmax(0,1fr)}
.simple-catalog-description-modal.is-photo-expanded .simple-catalog-description-modal__content{display:none}
.simple-catalog-description-modal.is-photo-expanded #simple-catalog-description-modal-image{cursor:zoom-out}
@media(max-width:900px){
.simple-catalog-description-modal{padding:8px;align-items:center}
.simple-catalog-description-modal__dialog{height:auto;max-height:calc(100dvh - 16px);border-radius:18px}
.simple-catalog-description-modal__scroll{display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:auto auto auto;gap:12px;padding:14px;overflow:auto}
.simple-catalog-description-modal__media{grid-column:1;grid-row:2;height:min(58svh,540px);min-height:180px}
.simple-catalog-description-modal__content{grid-column:1;grid-row:3;overflow:visible}
.simple-catalog-description-modal__actions{padding:10px 14px}
.simple-catalog-description-modal.is-photo-expanded .simple-catalog-description-modal__dialog{height:calc(100dvh - 16px)}
.simple-catalog-description-modal.is-photo-expanded .simple-catalog-description-modal__scroll{grid-template-rows:auto minmax(0,1fr);overflow:hidden}
.simple-catalog-description-modal.is-photo-expanded .simple-catalog-description-modal__media{height:100%;min-height:0}
}
@media(max-height:500px) and (min-width:901px){.simple-catalog-description-modal__scroll{padding:12px;gap:8px}.simple-catalog-description-modal__header .eyebrow{display:none}.simple-catalog-description-modal__actions{padding:8px 14px}}