/* Héros des appartements */
.sqelm-uh {
    --sqelm-uh-h: 800px;
    --sqelm-uh-pad: 56px;
    --sqelm-uh-larg: 72ch;
    --sqelm-uh-vpos: center;
    --sqelm-uh-sens: row;
    --sqelm-uh-r: 6px;
    --sqelm-uh-pos: center center;
    --sqelm-uh-voile-angle: 90deg;
    --sqelm-uh-voile: rgba(20, 30, 30, .78);
    --sqelm-uh-voile-mi: rgba(20, 30, 30, .35);
    --sqelm-uh-texte: #FFFFFF;
    --sqelm-uh-etiquette: #C9D4D3;
    --sqelm-uh-bande: #FFFFFF;
    --sqelm-uh-case-texte: #1B1B1B;
    --sqelm-uh-case-doux: #55524A;
    --sqelm-uh-pieces: #3F5B5E;
    --sqelm-uh-lignes: #CFCBB5;
    --sqelm-uh-actif: #2F4547;
    --sqelm-uh-actif-texte: #FFFFFF;
    --sqelm-uh-prog: #A8A26C;
    --sqelm-uh-pastille: #3F5B5E;
    --sqelm-uh-pastille-texte: #FFFFFF;
    --sqelm-uh-fondu: 1200ms;
    --sqelm-uh-duree: 7200ms;
    --sqelm-uh-ease: cubic-bezier(.22, .61, .36, 1);
    position: relative;
    isolation: isolate;
    display: flex;
    flex-direction: column;
    gap: 32px;
    min-height: var(--sqelm-uh-h);
    padding: var(--sqelm-uh-pad);
    box-sizing: border-box;
    border-radius: var(--sqelm-uh-r);
    overflow: hidden;
    background: var(--sqelm-uh-actif);
    color: var(--sqelm-uh-texte);
}

/* Photos */
.sqelm-uh__media { position: absolute; inset: 0; z-index: -2; }
.sqelm-uh__photo {
    position: absolute;
    inset: 0;
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    object-fit: cover;
    object-position: var(--sqelm-uh-pos);
    opacity: 0;
    transition: opacity var(--sqelm-uh-fondu) var(--sqelm-uh-ease);
    will-change: opacity, transform;
}
.sqelm-uh__photo--vide { background: #6F8A86; }
.sqelm-uh__photo.is-active { opacity: 1; }
.sqelm-uh.has-zoom .sqelm-uh__photo { transform: scale(1.06); transition: opacity var(--sqelm-uh-fondu) var(--sqelm-uh-ease), transform var(--sqelm-uh-fondu) var(--sqelm-uh-ease); }
.sqelm-uh.has-zoom .sqelm-uh__photo.is-active { transform: scale(1); transition: opacity var(--sqelm-uh-fondu) var(--sqelm-uh-ease), transform var(--sqelm-uh-duree) cubic-bezier(.16, .5, .3, 1); }

.sqelm-uh__voile {
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background: linear-gradient(var(--sqelm-uh-voile-angle), var(--sqelm-uh-voile) 0%, var(--sqelm-uh-voile-mi) 55%, rgba(0, 0, 0, 0) 100%);
}

/* Titre */
.sqelm-uh__contenu {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    justify-content: var(--sqelm-uh-vpos);
    gap: 20px;
    max-width: var(--sqelm-uh-larg);
}
.sqelm-uh__etiquette { margin: 0; font-size: 13px; letter-spacing: .06em; text-transform: uppercase; color: var(--sqelm-uh-etiquette); }
.sqelm-uh__titre { margin: 0; font-size: clamp(34px, 4.6vw, 64px); font-weight: 300; line-height: 1.03; letter-spacing: -.03em; color: var(--sqelm-uh-texte); }
.sqelm-uh__texte { margin: 0; font-size: 17px; line-height: 1.7; color: var(--sqelm-uh-texte); opacity: .9; }

/* Bande des formats */
.sqelm-uh__bande {
    display: flex;
    flex-direction: var(--sqelm-uh-sens);
    border-radius: var(--sqelm-uh-r);
    overflow: hidden;
    /* Clean clipping of the rounded corners: nothing from behind bleeds at the edge */
    isolation: isolate;
    -webkit-mask-image: -webkit-radial-gradient(white, black);
    transform: translateZ(0);
}
.sqelm-uh__case {
    position: relative;
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    padding: 22px 28px;
    background: var(--sqelm-uh-bande);
    color: var(--sqelm-uh-case-texte);
    text-decoration: none;
    font-size: 14px;
    line-height: 1.4;
    transition: background-color .6s var(--sqelm-uh-ease), color .6s var(--sqelm-uh-ease);
}
/* A line before each case: on the left when side by side, on top when stacked (the other one is clipped) */
.sqelm-uh__case + .sqelm-uh__case { box-shadow: -1px 0 0 0 var(--sqelm-uh-lignes), 0 -1px 0 0 var(--sqelm-uh-lignes); }
.sqelm-uh__case:hover, .sqelm-uh__case:focus { color: var(--sqelm-uh-case-texte); text-decoration: none; }
.sqelm-uh__case:focus-visible { outline: 2px solid var(--sqelm-uh-prog); outline-offset: -4px; }
.sqelm-uh__gauche, .sqelm-uh__droite { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.sqelm-uh__droite { align-items: flex-end; text-align: right; }
.sqelm-uh__pieces { font-size: 34px; font-weight: 300; line-height: 1; color: var(--sqelm-uh-pieces); white-space: nowrap; transition: color .6s var(--sqelm-uh-ease); }
.sqelm-uh__sup, .sqelm-uh__des { white-space: nowrap; }
.sqelm-uh__sup { color: var(--sqelm-uh-case-doux); transition: color .6s var(--sqelm-uh-ease); }
.sqelm-uh__pastille {
    display: inline-block;
    padding: 3px 9px;
    border-radius: 3px;
    background: var(--sqelm-uh-pastille);
    color: var(--sqelm-uh-pastille-texte);
    font-size: 12px;
    white-space: nowrap;
    transition: background-color .6s var(--sqelm-uh-ease), color .6s var(--sqelm-uh-ease);
}
.sqelm-uh__case.is-complet .sqelm-uh__pastille { background: transparent; color: var(--sqelm-uh-case-doux); box-shadow: inset 0 0 0 1px var(--sqelm-uh-lignes); }

/* Case mise en avant */
.sqelm-uh__case.is-active, .sqelm-uh__case.is-active:hover, .sqelm-uh__case.is-active:focus { background: var(--sqelm-uh-actif); color: var(--sqelm-uh-actif-texte); }
.sqelm-uh__case.is-active .sqelm-uh__pieces,
.sqelm-uh__case.is-active .sqelm-uh__sup { color: var(--sqelm-uh-actif-texte); }
.sqelm-uh__case.is-active .sqelm-uh__pastille { background: var(--sqelm-uh-actif-texte); color: var(--sqelm-uh-actif); }

/* Ligne de progression */
.sqelm-uh__barre { position: absolute; left: 0; right: 0; top: 0; height: 2px; overflow: hidden; }
.sqelm-uh__barre i { display: block; height: 100%; background: var(--sqelm-uh-prog); transform: scaleX(0); transform-origin: left center; }
.sqelm-uh__case.is-active .sqelm-uh__barre i { transform: scaleX(1); }
.sqelm-uh.is-running .sqelm-uh__case.is-active .sqelm-uh__barre i { animation: sqelm-uh-prog var(--sqelm-uh-progress, 6000ms) linear forwards; }
.sqelm-uh.is-paused .sqelm-uh__case.is-active .sqelm-uh__barre i { animation-play-state: paused; }
@keyframes sqelm-uh-prog { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* Pause */
.sqelm-uh__pause {
    position: absolute;
    top: 16px;
    right: 16px;
    width: 36px;
    height: 36px;
    padding: 0;
    border: 0;
    border-radius: 4px;
    background: rgba(255, 255, 255, .16);
    color: var(--sqelm-uh-texte);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(4px);
    transition: background-color .3s ease;
}
.sqelm-uh__pause:hover, .sqelm-uh__pause:focus { background: rgba(255, 255, 255, .28); color: var(--sqelm-uh-texte); }
.sqelm-uh__pause:focus-visible { outline: 2px solid var(--sqelm-uh-texte); outline-offset: 2px; }
.sqelm-uh__ico-pause { width: 10px; height: 12px; border-left: 3px solid currentColor; border-right: 3px solid currentColor; box-sizing: border-box; }
.sqelm-uh__ico-lecture { display: none; width: 0; height: 0; border-left: 10px solid currentColor; border-top: 6px solid transparent; border-bottom: 6px solid transparent; margin-left: 3px; }
.sqelm-uh.is-user-paused .sqelm-uh__ico-pause { display: none; }
.sqelm-uh.is-user-paused .sqelm-uh__ico-lecture { display: block; }

@media (max-width: 767px) {
    .sqelm-uh { gap: 24px; --sqelm-uh-sens: column; --sqelm-uh-pad: 20px; --sqelm-uh-voile-angle: 180deg; --sqelm-uh-vpos: flex-start; --sqelm-uh-h: 680px; }
    .sqelm-uh__case { padding: 14px 16px; }
    .sqelm-uh__contenu { padding-right: 44px; }
    .sqelm-uh__pieces { font-size: 26px; }
    .sqelm-uh__texte { font-size: 15px; }
}

@media (prefers-reduced-motion: reduce) {
    .sqelm-uh__photo, .sqelm-uh.has-zoom .sqelm-uh__photo, .sqelm-uh.has-zoom .sqelm-uh__photo.is-active { transition: opacity .2s linear; transform: none; }
    .sqelm-uh__barre { display: none; }
}

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