.sqelm-bref {
    --sqelm-bref-photo-h: 560px;
    --sqelm-bref-photo-r: 3px;
    --sqelm-bref-cadrage: center center;
    --sqelm-bref-fondu: 1000ms;
    --sqelm-bref-col: 5;
    --sqelm-bref-chev: 96px;
    --sqelm-bref-retrait: 48px;
    --sqelm-bref-fond: #3F5B5E;
    --sqelm-bref-bande-r: 3px;
    --sqelm-bref-align: left;
    --sqelm-bref-ligne: #6F8A8C;
    --sqelm-bref-icone: #A8A26C;
    --sqelm-bref-icone-t: 24px;
    --sqelm-bref-icone-e: 16px;
    --sqelm-bref-texte-e: 6px;
    --sqelm-bref-dir: column;
    --sqelm-bref-gap-x: 56px;
    --sqelm-bref-gap-y: 48px;
    position: relative;
    width: 100%;
}

/* Photo: cross-fading slides */
.sqelm-bref__media {
    position: relative;
    height: var(--sqelm-bref-photo-h);
    border-radius: var(--sqelm-bref-photo-r);
    overflow: hidden;
    background: #E4DDD0;
}

.sqelm-bref .sqelm-bref__photo {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    max-width: none;
    object-fit: cover;
    object-position: var(--sqelm-bref-cadrage);
    border-radius: 0;
    opacity: 0;
    transition: opacity var(--sqelm-bref-fondu) ease;
}

.sqelm-bref .sqelm-bref__photo.is-active {
    opacity: 1;
}

.sqelm-bref .sqelm-bref__mention {
    position: absolute;
    top: 16px;
    left: 16px;
    z-index: 2;
    margin: 0;
    padding: 6px 14px;
    border-radius: 999px;
    background: #FFFFFF;
    color: #1B1B1B;
    font-size: 13px;
    line-height: 1.3;
}

/* Pause button: top right, the band covers the bottom of the photo */
.sqelm-bref button.sqelm-bref__pause {
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 3px;
    background: rgba(255, 255, 255, 0.9);
    color: #1B1B1B;
    cursor: pointer;
}

.sqelm-bref button.sqelm-bref__pause[hidden] {
    display: none;
}

.sqelm-bref button.sqelm-bref__pause:hover {
    background: #FFFFFF;
}

.sqelm-bref button.sqelm-bref__pause:focus-visible {
    outline: 2px solid #1B1B1B;
    outline-offset: 3px;
}

.sqelm-bref__pause svg {
    fill: currentColor;
}

.sqelm-bref__ico-play,
.sqelm-bref__pause[aria-pressed="true"] .sqelm-bref__ico-pause {
    display: none;
}

.sqelm-bref__pause[aria-pressed="true"] .sqelm-bref__ico-play {
    display: block;
}

/* Band of facts, pulled up over the bottom of the photo */
.sqelm-bref__bande {
    position: relative;
    z-index: 1;
    margin: calc(var(--sqelm-bref-chev) * -1) var(--sqelm-bref-retrait) 0;
    padding: 40px;
    border-radius: var(--sqelm-bref-bande-r);
    background: var(--sqelm-bref-fond);
}

.sqelm-bref--sans-photo .sqelm-bref__bande {
    margin: 0;
}

.sqelm-bref .sqelm-bref__faits {
    display: grid;
    grid-template-columns: repeat(var(--sqelm-bref-col), minmax(0, 1fr));
    margin: 0;
    padding: 0;
    gap: var(--sqelm-bref-gap-y) var(--sqelm-bref-gap-x);
    list-style: none;
    overflow: hidden; /* clips the lines that would sit on the outer edges */
}

.sqelm-bref .sqelm-bref__fait {
    display: flex;
    flex-direction: var(--sqelm-bref-dir);
    align-items: stretch; /* the icon box spans the width, so the alignment setting moves the icon too */
    gap: var(--sqelm-bref-icone-e);
    position: relative;
    min-width: 0;
    margin: 0;
    padding: 0;
    text-align: var(--sqelm-bref-align);
}

.sqelm-bref__textes {
    display: flex;
    flex-direction: column;
    gap: var(--sqelm-bref-texte-e);
    flex: 1 1 auto;
    min-width: 0;
    width: 100%;
}

/* Lines between facts, centred in the gaps.
   Vertical: on the left of each fact. Horizontal: above each fact, running to the end of the row
   so a short last row still gets a full line. Lines on the outer edges are clipped by the list. */
.sqelm-bref-lignes-yes .sqelm-bref .sqelm-bref__fait::before,
.sqelm-bref-lignes-yes .sqelm-bref .sqelm-bref__fait::after {
    content: "";
    position: absolute;
    background: var(--sqelm-bref-ligne);
    pointer-events: none;
}

.sqelm-bref-lignes-yes .sqelm-bref .sqelm-bref__fait::before {
    top: 0;
    bottom: 0;
    left: calc(var(--sqelm-bref-gap-x) / -2 - 0.5px);
    width: 1px;
}

.sqelm-bref-lignes-yes .sqelm-bref .sqelm-bref__fait::after {
    top: calc(var(--sqelm-bref-gap-y) / -2 - 0.5px);
    left: calc(var(--sqelm-bref-gap-x) / -2);
    width: 400vw;
    height: 1px;
}

/* Icon (Elementor icon library or uploaded SVG) */
.sqelm-bref .elementor-icon-wrapper {
    text-align: var(--sqelm-bref-align, left);
    flex: none;
    line-height: 0;
}


.sqelm-bref .elementor-icon {
    /* Square frame the size of the icon: any glyph, narrow ($) or wide, fits inside it */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--sqelm-bref-icone-t);
    height: var(--sqelm-bref-icone-t);
    padding: 0;
    margin: 0;
    font-size: var(--sqelm-bref-icone-t);
    line-height: 1;
    color: var(--sqelm-bref-icone);
    vertical-align: top;
}

/* "Ajuster à la taille": the frame takes the icon's own width, height stays the chosen size */
.sqelm-bref-ajuster-yes .sqelm-bref .elementor-icon {
    width: auto;
}

.sqelm-bref-ajuster-yes .sqelm-bref .elementor-icon svg {
    width: auto;
}

.sqelm-bref .elementor-icon i {
    font-size: inherit;
    line-height: 1;
    color: inherit;
}

.sqelm-bref .elementor-icon svg {
    display: block;
    width: 100%;
    height: 100%;
    max-width: none;
    fill: currentColor;
}

.sqelm-bref .sqelm-bref__libelle {
    font-size: 13px;
    line-height: 1.4;
    color: #C9D6D6;
}

.sqelm-bref .sqelm-bref__valeur {
    overflow-wrap: break-word; /* a long word wraps instead of being cut */
    hyphens: auto;
    font-size: 24px;
    font-weight: 400;
    line-height: 1.2;
    color: #FFFFFF;
}

.sqelm-bref .sqelm-bref__legende {
    font-size: 14px;
    line-height: 1.45;
    color: #C9D6D6;
}

.sqelm-bref__aide {
    padding: 24px;
    border: 1px dashed #C4C4C4;
    text-align: center;
    font-size: 14px;
    color: #666666;
}

@media (max-width: 1024px) {
    .sqelm-bref {
        --sqelm-bref-col: 3;
        --sqelm-bref-chev: 72px;
        --sqelm-bref-retrait: 24px;
        --sqelm-bref-photo-h: 440px;
    }
}

@media (max-width: 767px) {
    .sqelm-bref {
        --sqelm-bref-col: 1;
        --sqelm-bref-dir: row;
        --sqelm-bref-gap-x: 24px;
        --sqelm-bref-gap-y: 40px;
        --sqelm-bref-chev: 48px;
        --sqelm-bref-retrait: 12px;
        --sqelm-bref-photo-h: 300px;
    }
    .sqelm-bref__bande {
        padding: 28px 20px;
    }
    .sqelm-bref .elementor-icon-wrapper {
        padding-top: 2px; /* lines the icon up with the first line of text */
    }
    .sqelm-bref .sqelm-bref__valeur {
        font-size: 20px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .sqelm-bref .sqelm-bref__photo {
        transition: none;
    }
}

.elementor-widget-sqelm-bref.elementor-invisible:not([data-settings]) {
    visibility: visible;
}