/* Spliff — Product Title + Badge */

.spliff-ptitle {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 14px;
    /* nowrap : le badge ne tombe JAMAIS sous le titre. C'est le titre qui rétrécit
       (min-width:0 ci-dessous) et passe sur 2 lignes, le badge reste sur sa ligne. */
    flex-wrap: nowrap;
}

.spliff-ptitle *,
.spliff-ptitle *::before,
.spliff-ptitle *::after {
    box-sizing: border-box;
}

.spliff-ptitle__title {
    margin: 0;
    line-height: 1.15;
    color: #0F0F10;
    /* min-width:0 lève la largeur mini "auto" du flex item : le titre peut donc
       rétrécir sous sa largeur 1-ligne et son texte passe naturellement sur 2 lignes. */
    min-width: 0;
}

.spliff-ptitle__badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 8px 18px;
    border-radius: 50px;
    background: #3D5BFF;
    color: #FFFFFF;
    font-weight: 700;
    font-size: 14px;
    line-height: 1;
    letter-spacing: 0.02em;
    white-space: nowrap;
    text-transform: uppercase;
    /* le badge garde sa taille pleine et ne rétrécit jamais → reste sur la ligne du titre. */
    flex-shrink: 0;
    /* Aligné en HAUT du bloc titre (et non centré verticalement) : le badge se cale
       sur la 1re ligne du titre. margin-top affine l'alignement optique avec la cap-height.
       Desktop = 12px (gros titre) ; mobile = 2px (titre plus petit, voir media query). */
    align-self: flex-start;
    margin-top: 12px;
}

@media (max-width: 767px) {
    .spliff-ptitle__badge {
        margin-top: 2px;
    }
}