/*
 * Sldproducticon — styles front.
 * Voir SPECS section 9 (positions) et 10 (responsive).
 */

.sldproducticon {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 8px 0;
}

.sldproducticon--cartouche {
    align-items: center;
    margin-bottom: 12px;
}

.sldproducticon__badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 8px;
    border-radius: 3px;
    line-height: 1.2;
    white-space: nowrap;
}

/* Fond par défaut pour les badges textuels : visible même si le BO n'a pas
   défini de bg_color. Le style inline du template surcharge cette valeur. */
.sldproducticon__badge--text,
.sldproducticon__badge--icon_text {
    background-color: #333;
    color: #fff;
}

.sldproducticon__badge--icon {
    padding: 2px;
    background: transparent !important;
}

.sldproducticon__icon {
    max-height: 24px;
    width: auto;
    display: block;
}

.sldproducticon__badge--size-S { font-size: 11px; }
.sldproducticon__badge--size-M { font-size: 13px; }
.sldproducticon__badge--size-L { font-size: 15px; }
.sldproducticon__badge--size-XL { font-size: 18px; }

.sldproducticon__badge--size-S .sldproducticon__icon { max-height: 18px; }
.sldproducticon__badge--size-L .sldproducticon__icon { max-height: 28px; }
.sldproducticon__badge--size-XL .sldproducticon__icon { max-height: 32px; }

/* Couche d'ancrage calée par le JS sur la boîte exacte de l'image : épouse sa géométrie
   (position + taille) et sert de référence aux badges, indépendamment du padding ou du
   centrage (letterboxing) du conteneur. Les badges en bas restent ainsi dans les coins
   de l'image et ne débordent plus dans la zone de padding. */
.sldproducticon--stage {
    position: absolute;
    pointer-events: none;
    z-index: 5;
}

/* Positions sur la photo LP (étape 6 du HANDOFF). */
.sldproducticon--photo {
    position: absolute;
    z-index: 5;
    pointer-events: none;
    margin: 0;
    flex-direction: column;
    gap: 4px;
    max-width: calc(100% - 12px);
}
.sldproducticon--photo .sldproducticon__badge { pointer-events: auto; }
.sldproducticon--top-left,
.sldproducticon--bottom-left { align-items: flex-start; }
.sldproducticon--top-right,
.sldproducticon--bottom-right { align-items: flex-end; }
.sldproducticon--top-left { top: 6px; left: 6px; }
.sldproducticon--top-right { top: 6px; right: 6px; }
.sldproducticon--bottom-left { bottom: 6px; left: 6px; }
.sldproducticon--bottom-right { bottom: 6px; right: 6px; }

/* Cas "Réservé" : masque la réassurance haute injectée par le thème. */
body.sldproducticon-reserved-active .reassurance-top,
body.sldproducticon-reserved-active .product-reassurance-top { display: none; }

/* Responsive — SPECS §10. */
@media (max-width: 992px) {
    .sldproducticon--photo .sldproducticon__icon { transform: scale(0.8); transform-origin: left center; }
    .sldproducticon--top-right .sldproducticon__icon,
    .sldproducticon--bottom-right .sldproducticon__icon { transform-origin: right center; }
    .sldproducticon--cartouche .sldproducticon__icon { transform: scale(0.85); transform-origin: left center; }
    .sldproducticon--cartouche .sldproducticon__badge { padding: 3px 6px; }
}

@media (max-width: 576px) {
    /* Les quotas mobile (SLDPRODUCTICON_MOBILE_MAX_PHOTO / _CARTOUCHE) sont appliqués dynamiquement
       via une règle inline dans hookDisplayHeader. */
    .sldproducticon--photo .sldproducticon__icon { transform: scale(0.65); transform-origin: left center; }
    .sldproducticon--top-right .sldproducticon__icon,
    .sldproducticon--bottom-right .sldproducticon__icon { transform-origin: right center; }
    .sldproducticon--cartouche .sldproducticon__icon { transform: scale(0.7); transform-origin: left center; }
}