/* Commodités en Z */
.sqelm-zb {
    --sqelm-zb-gap: 96px;
    --sqelm-zb-pad: 72px;
    --sqelm-zb-photo-h: 600px;
    --sqelm-zb-detail-w: 200px;
    --sqelm-zb-detail-h: 180px;
    --sqelm-zb-detail-x: -28px;
    --sqelm-zb-detail-y: -28px;
    --sqelm-zb-r: 6px;
    --sqelm-zb-ligne: #CFCBB5;
    --sqelm-zb-vide: #8A9093;
    --sqelm-zb-cadre: #FFFFFF;
    --sqelm-zb-ombre: none;
    --sqelm-zb-li: 16px;
    --sqelm-zb-ico: 22px;
    --sqelm-zb-ico-c: #3F5B5E;
    --sqelm-zb-opt: #6E6B45;
    --sqelm-zb-opt-bord: #B9B5A3;
    --sqelm-zb-inc: #3F5B5E;
    --sqelm-zb-inc-txt: #FFFFFF;
    --sqelm-zb-past-r: 3px;
    --sqelm-zb-btn: #A8A26C;
    --sqelm-zb-btn-txt: #1B1B1B;
    --sqelm-zb-btn-h: #97915E;
    --sqelm-zb-ease: cubic-bezier(.22, .61, .36, 1);
    color: #1B1B1B;
}

.sqelm-zb__bloc {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-areas: "media contenu";
    gap: var(--sqelm-zb-gap);
    align-items: center;
    padding: var(--sqelm-zb-pad) 0;
}
.sqelm-zb__bloc + .sqelm-zb__bloc { border-top: 1px solid var(--sqelm-zb-ligne); }
.sqelm-zb__bloc.is-inverse { grid-template-areas: "contenu media"; }
.sqelm-zb__media { grid-area: media; position: relative; }
.sqelm-zb__contenu { grid-area: contenu; display: flex; flex-direction: column; align-items: flex-start; gap: 18px; min-width: 0; }

/* Photos */
.sqelm-zb__photo { height: var(--sqelm-zb-photo-h); border-radius: var(--sqelm-zb-r); overflow: hidden; background: var(--sqelm-zb-vide); }
.sqelm-zb__img { display: block; width: 100% !important; height: 100% !important; max-width: none !important; object-fit: cover; border-radius: 0 !important; }
.sqelm-zb__detail {
    position: absolute;
    right: var(--sqelm-zb-detail-x);
    bottom: var(--sqelm-zb-detail-y);
    width: var(--sqelm-zb-detail-w);
    height: var(--sqelm-zb-detail-h);
    padding: 8px;
    box-sizing: content-box;
    background: var(--sqelm-zb-cadre);
    border: 1px solid var(--sqelm-zb-ligne);
    border-radius: var(--sqelm-zb-r);
    box-shadow: var(--sqelm-zb-ombre);
}
.sqelm-zb__detail .sqelm-zb__img { border-radius: calc(var(--sqelm-zb-r) / 2) !important; }
.sqelm-zb__bloc.is-inverse .sqelm-zb__detail { right: auto; left: var(--sqelm-zb-detail-x); }

/* Textes */
.sqelm-zb__petit { margin: 0; font-size: 13px; color: #6E6B45; }
.sqelm-zb__titre { margin: 0; font-size: 40px; font-weight: 300; line-height: 1.08; letter-spacing: -0.02em; color: #1B1B1B; }
.sqelm-zb__texte { margin: 0; font-size: 17px; line-height: 1.7; color: #3A3A35; }

/* Liste */
.sqelm-zb__liste { align-self: stretch; margin: 0; padding: 0; list-style: none; border-bottom: 1px solid var(--sqelm-zb-ligne); }
.sqelm-zb__item {
    display: grid;
    grid-template-columns: var(--sqelm-zb-ico) 1fr auto;
    gap: 14px;
    align-items: center;
    padding: var(--sqelm-zb-li) 0;
    border-top: 1px solid var(--sqelm-zb-ligne);
}
.sqelm-zb__item.sans-ico { grid-template-columns: 1fr auto; }
.sqelm-zb__ico { display: flex; width: var(--sqelm-zb-ico); height: var(--sqelm-zb-ico); color: var(--sqelm-zb-ico-c); }
.sqelm-zb__ico svg, .sqelm-zb__ico img { width: 100%; height: 100%; display: block; }
.sqelm-zb__ico svg { fill: currentColor; }
.sqelm-zb__txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.sqelm-zb__nom { font-size: 17px; line-height: 1.4; color: #1B1B1B; }
.sqelm-zb__marque { font-size: .7em; margin-left: 1px; color: #6E6B45; }
.sqelm-zb__note { font-size: 13px; line-height: 1.45; color: #55524A; }
.sqelm-zb__notes { margin: -6px 0 0; font-size: 13px; color: #55524A; display: flex; flex-direction: column; gap: 2px; }
.sqelm-zb__pastille {
    padding: 3px 9px;
    border-radius: var(--sqelm-zb-past-r);
    background: var(--sqelm-zb-inc);
    color: var(--sqelm-zb-inc-txt);
    font-size: 12px;
    line-height: 1.5;
    white-space: nowrap;
}
.sqelm-zb__pastille.is-option { background: transparent; color: var(--sqelm-zb-opt); outline: 1px dashed var(--sqelm-zb-opt-bord); outline-offset: -1px; }

/* Bouton */
.sqelm-zb__bouton {
    display: inline-flex;
    align-items: center;
    margin-top: 6px;
    padding: 14px 22px;
    border-radius: 4px;
    background: var(--sqelm-zb-btn);
    color: var(--sqelm-zb-btn-txt);
    font-size: 15px;
    line-height: 1.2;
    text-decoration: none;
    transition: background-color .2s ease;
}
.sqelm-zb__bouton:hover, .sqelm-zb__bouton:focus { background: var(--sqelm-zb-btn-h); color: var(--sqelm-zb-btn-txt); text-decoration: none; }
.sqelm-zb__bouton:focus-visible { outline: 2px solid #1B1B1B; outline-offset: 3px; }

/* Apparition au défilement (class added by JS only, so content stays visible without it) */
.sqelm-zb.is-js .sqelm-zb__media, .sqelm-zb.is-js .sqelm-zb__contenu { opacity: 0; transform: translateY(28px); transition: opacity .9s var(--sqelm-zb-ease), transform 1.1s var(--sqelm-zb-ease); }
.sqelm-zb.is-js .sqelm-zb__contenu { transition-delay: .12s; }
.sqelm-zb.is-js .sqelm-zb__detail { opacity: 0; transform: translateY(18px) scale(.96); transition: opacity .8s .35s var(--sqelm-zb-ease), transform 1s .35s var(--sqelm-zb-ease); }
.sqelm-zb.is-js .is-vu .sqelm-zb__media, .sqelm-zb.is-js .is-vu .sqelm-zb__contenu, .sqelm-zb.is-js .is-vu .sqelm-zb__detail { opacity: 1; transform: none; }

@media (max-width: 1024px) {
    .sqelm-zb { --sqelm-zb-gap: 64px; --sqelm-zb-pad: 56px; --sqelm-zb-photo-h: 460px; --sqelm-zb-detail-w: 160px; --sqelm-zb-detail-h: 140px; --sqelm-zb-detail-x: -20px; --sqelm-zb-detail-y: -24px; }
    .sqelm-zb__titre { font-size: 34px; }
}
@media (max-width: 767px) {
    .sqelm-zb { --sqelm-zb-gap: 20px; --sqelm-zb-pad: 36px; --sqelm-zb-photo-h: 280px; --sqelm-zb-detail-w: 120px; --sqelm-zb-detail-h: 100px; --sqelm-zb-detail-x: 12px; --sqelm-zb-detail-y: -24px; --sqelm-zb-li: 13px; }
    .sqelm-zb__bloc, .sqelm-zb__bloc.is-inverse { grid-template-columns: 1fr; grid-template-areas: "media" "contenu"; }
    .sqelm-zb__contenu { padding-top: 28px; }
    .sqelm-zb__titre { font-size: 28px; }
    .sqelm-zb__texte { font-size: 16px; }
    .sqelm-zb__nom { font-size: 15px; }
}

@media (prefers-reduced-motion: reduce) {
    .sqelm-zb.is-js .sqelm-zb__media, .sqelm-zb.is-js .sqelm-zb__contenu, .sqelm-zb.is-js .sqelm-zb__detail { opacity: 1; transform: none; transition: none; }
}

.sqelm-zb__aide { padding: 16px; border: 1px dashed #B9B5A3; font-size: 14px; color: #1B1B1B; background: #FFF; }