/* Container global du bloc */
.sabp-transfo-block {
    text-align: center;
    margin: 163px auto 110px;
}

/* 1. Titre */
.sabp-transfo__title {
	font-family: 'Raleway';
	font-style: normal;
	font-weight: 400;
	font-size: 50px;
	line-height: 115%;
	text-align: center;
	color: #000000;
	margin-bottom: 90px;
}

.sabp-transfo__title strong{
	font-weight: 700;
}

/* 2. Wrapper de l'image (Position Relative pour l'overlay) */
.sabp-transfo__visual {
    position: relative;
    display: inline-block; /* S'adapte à la largeur de l'image */
    max-width: 100%;
    margin-bottom: 40px;
    border-radius: 20px; /* Arrondi de l'image */
    overflow: hidden; /* Coupe l'image pour suivre l'arrondi */
}

.sabp-transfo__img {
    display: block;
	width: 1136px;
	height: 620px;
	border-radius: 30px;
	        overflow: hidden;
        background-repeat: no-repeat !important;
        background-size: cover !important;
        background-position: center !important;
}

/* 3. Les Labels Bleus (Overlay) */
.sabp-transfo__tags {
    position: absolute;
    bottom: 42px; /* Ajuster la hauteur verticale */
    left: 60px;   /* Ajuster la position horizontale */
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px; /* Espace entre les deux lignes bleues */
    z-index: 2;
}

.sabp-tag {
	font-family: 'Raleway';
	font-style: normal;
	font-weight: 700;
	font-size: 53px;
	line-height: 115%;
	text-align: center;
	color: #FFFFFF;
	background-color: #0084FF;
    padding: 10px 25px;
    border-radius: 20px; /* Forme de pilule */
    white-space: nowrap; /* Empêche le texte de passer à la ligne */
}

/* 4. Description du bas */
.sabp-transfo__desc {
	width: 1097px;
	font-family: 'Raleway';
	font-style: normal;
	font-weight: 400;
	font-size: 20px;
	line-height: 158%;
	text-align: center;
	color: #000000;
	margin: 0 auto;
}
@media (max-width: 1499px) and (min-width: 769px) {
    
    /* 1. Reduce Vertical Margins */
    .sabp-transfo-block {
        margin: 100px auto 80px; /* Reduced from 163px/110px */
    }

    /* 2. Scale Title */
    .sabp-transfo__title {
        font-size: 40px; /* Reduced from 50px */
        margin-bottom: 50px;
    }

    /* 3. Resize Image Container */
    /* 1136px is too wide for a 1280px screen (leaves no room).
       We constrain it to 900-1000px range. */
    .sabp-transfo__visual {
        max-width: 960px;
    }

    .sabp-transfo__img {
        height: 500px; /* Reduced from 620px to see content without scrolling */
    }

    /* 4. Resize Blue Tags */
    .sabp-tag {
        font-size: 38px; /* Reduced from 53px */
        padding: 8px 20px;
    }

    .sabp-transfo__tags {
        bottom: 30px;
        left: 40px; /* Bring it slightly closer to edge */
        gap: 8px;
    }

    /* 5. Resize Description Text */
    .sabp-transfo__desc {
        max-width: 900px; /* Match image width roughly */
        font-size: 18px; /* Reduced from 20px */
    }
}
/* --- Responsive Mobile --- */
@media (max-width: 768px) {
	.sabp-transfo__desc{
		display: none;
	}
	.sabp-transfo-block {
    margin: 121px auto 118px;
}
    .sabp-transfo__title {
		font-size: 26px;
		line-height: 110%;
		text-align: center;
		color: #000000;
		font-weight: 400;
    }
	
	.sabp-transfo__title strong{
		font-weight: 700;
	}

    .sabp-tag {
                font-size: 30px;
        padding: 8px 15px;
        line-height: 139%;
    }
    
    .sabp-transfo__tags {
        bottom: 109px;
        left: 11px;
    }
	.sabp-transfo__img {
	width: 100%;
	height: 620px;
}
.sabp-transfo__visual {
    display: block;
}
.sab-cta-wrapper-mobile a {
display: flex;
flex-direction: row;
align-items: center;
padding: 0px 28px 0px 22px;
gap: 13px;
width: 239px;
height: 80px;
background: #0084FF;
border-radius: 20px;
font-family: 'Raleway';
font-style: normal;
font-weight: 600;
font-size: 14px;
line-height: 293%;
letter-spacing: 0.04em;
text-transform: uppercase;
color: #FFFFFF;    margin: 0 auto;
}
}