/* ==========================================================================
   GlOffres — Public Badge Styles
   ========================================================================== */

.gl-offre-badges {
    /*
    position: absolute;
    bottom: 0;
    right: 0;
    left: 0;
    z-index: 10;
    pointer-events: none;
    height: 100%;
    width: 100%;
    */
}

.gl-offre-badge-item {
    position: relative;
}

/* --------------------------------------------------------------------------
   Ruban texte (offre sans image badge, ou texte véhicule prioritaire)
   -------------------------------------------------------------------------- */

.gl-offre-badge-item--ribbon {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
}

.gl-offre-badge-item--ribbon .gl-offre-badge-text,
.gl-offre-badge-item--override-text .gl-offre-badge-text {
    width: 100%;
    display: block;
    padding: 15px 0;
    text-align: center;
    white-space: nowrap;
    box-shadow: 0 -10px 10px rgba(0, 0, 0, 0.3);
    pointer-events: auto;
    font-size: 26px;
}

.gl-offre-badge-item--ribbon:after,
.gl-offre-badge-item--override-text:after {
    content: '';
    background-color: var(--gl-offre-color, #e74c3c);
    -webkit-mask: url('../images/bord.svg');
    mask: url('../images/bord.svg');
    position: absolute;
    top: 99%;
    left: 0;
    width: 50px;
    height: 50px;
    z-index: 10;
}

.gl-offre-badge-item--ribbon:nth-child(2) .gl-offre-badge-text,
.gl-offre-badge-item--override-text:nth-child(2) .gl-offre-badge-text {
    top: 50px;
}

.gl-offre-badge-item--ribbon:nth-child(3) .gl-offre-badge-text,
.gl-offre-badge-item--override-text:nth-child(3) .gl-offre-badge-text {
    top: 70px;
}

/* --------------------------------------------------------------------------
   Image badge : mise en page compacte (coin), sans ruban ni ::after SVG
   -------------------------------------------------------------------------- */

.gl-offre-badge-item--image {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 6px;
    padding: 0 8px 8px;
    pointer-events: none;
}

.gl-offre-badge-item--image:after {
    display: none;
}

.gl-offre-badge-image-wrap {
    pointer-events: auto;
    line-height: 0;
    border-radius: 6px;
    overflow: hidden;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.22);
    background: #fff;
}

.gl-offre-badge-item--image .gl-offre-badge-img {
    position: absolute;
    top: 0;
    left: 0;
    display: block;
    width: auto;
    height: auto;
    border-radius: 0;
    box-shadow: none;
    z-index: 999;
}

.gl-offre-badge-item--image .gl-offre-badge-desc {
    position: relative;
    top: auto;
    right: auto;
    max-width: 200px;
    text-align: right;
    font-size: 11px;
    color: #333;
    text-shadow: none;
    margin: 0;
    pointer-events: auto;
}

/* --------------------------------------------------------------------------
   Description sous le ruban (mode texte)
   -------------------------------------------------------------------------- */

.gl-offre-badge-item--ribbon .gl-offre-badge-desc,
.gl-offre-badge-item--override-text .gl-offre-badge-desc {
    position: absolute;
    top: 58px;
    right: 8px;
    font-size: 10px;
    color: #fff;
    line-height: 1.3;
    max-width: 130px;
    text-align: right;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6);
}