/* --- Variables de base (à adapter selon les variables globales de ton thème si elles existent) --- */
:root {
    --color-brand: #ea5b10;
    --color-brand-hover: #cf4f0d;
    --color-text-main: #1a1a1a;
    --color-text-muted: #666666;
    --font-main: 'Arial', sans-serif; /* A remplacer par ta police */
}

/* --- Layout Principal --- */
.block-hero-hub {
    width: 100%;
    padding: 0px;
    font-family: var(--font-main);
    overflow: hidden; /* Empêche le débordement de la carte/badge sur mobile */
}

.hero-hub__container {
    display: flex;
	flex-direction: row;
	justify-content: space-between;
	align-items: center;
	padding: 80px;
	gap: 32px;
	isolation: isolate;
	width: 1280px;
	height: 522px;
	margin: 0 auto;
}

.hero-hub__content {
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		padding: 0px;
		gap: 32px;
		margin: 0 auto;
		width: 481px;
    }
    .hero-hub__media {
		width: 585px;
		height: 362px;
		background: #EFEEEB;
        position: relative;    overflow: hidden;

    }
	.hero-hub__media img{
		width: 585px;
		height: 362px;
	}

/* --- Contenu Texte --- */
.hero-hub__title {
	width: 481px;
	font-family: 'Open Sans';
	font-style: normal;
	font-weight: 400;
	font-size: 40px;
	line-height: 110%;
	color: #111111;
	margin: 0;
}

.text-brand {
    color: var(--color-brand);
}

.hero-hub__desc {
	width: 481px;
	font-family: 'Open Sans';
	font-style: normal;
	font-weight: 400;
	font-size: 14px;
	line-height: 19px;
	display: flex;
	align-items: center;
	color: #5A5A5A;
}

/* --- Boutons --- */
.hero-hub__actions {
	display: flex;
	flex-direction: row;
	align-items: center;
	padding: 0px;
	gap: 16px;
	width: 481px;
	height: 57px;
}

@media (min-width: 768px) {
    .hero-hub__actions {
        flex-direction: row;
    }
}

.btn-hero--primary {
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;
	gap: 10px;
	width: 282px;
	height: 57px;
	background: #EA5B0C;
	font-family: 'Open Sans';
	font-style: normal;
	font-weight: 700;
	font-size: 11px;
	line-height: 15px;
	letter-spacing: 0.42px;
	text-transform: uppercase;
	color: #FFFFFF;
}

.btn-hero--primary:hover {
    background-color: var(--color-brand-hover);
    border-color: var(--color-brand-hover);
}

.btn-hero--secondary {
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
gap: 10px;
width: 183px;
height: 57px;
background: #FFFFFF;
border: 1px solid #111111;
font-family: 'Open Sans';
font-style: normal;
font-weight: 700;
font-size: 11px;
line-height: 15px;
letter-spacing: 0.42px;
text-transform: uppercase;
color: #111111;
}

.btn-hero--secondary:hover {
    background-color: var(--color-text-main);
    color: #ffffff;
}

/* --- Média et Carte --- */
.hero-hub__media {
    position: relative;
}

.hero-hub__image-wrapper {
    margin: 0;
    padding: 0;
    display: block;
}

.hero-hub__image {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
}

/* --- Badge Absolu --- */
.hero-hub__badge {
        position: absolute;
    bottom: 0px;
    right: 0px;
    background: #ffffff;
    height: 74px;
    width: 203.11000061035156px;
    display: flex;
    gap: 15px;
    justify-content: center;
	align-items: center;
}
.hero-hub__badge-icon {
    width: 45px;
    height: 45px;
    background-color: var(--color-brand);
    border-radius: 8px; /* Léger arrondi visible sur la maquette */
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.hero-hub__badge-text {
    display: flex;
    flex-direction: column;
}

.hero-hub__badge-title {
	font-family: 'Inter';
	font-style: normal;
	font-weight: 700;
	font-size: 15px;
	line-height: 18px;
	display: flex;
	align-items: center;
	color: #111111;
}

.hero-hub__badge-sub {
    font-family: 'Inter';
	font-style: normal;
	font-weight: 400;
	font-size: 12px;
	line-height: 18px;
	display: flex;
	align-items: center;
	color: #111111;
}
@media (max-width: 50em) {
.hero-hub__container {
    display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
padding: 60px 40px 60px 5px;
gap: 20px;
isolation: isolate;
height: 694px;
        width: 90%;
}
.hero-hub__content {
    gap: 20px;
    width: 100%;
}
.hero-hub__actions {
    height: auto;
    flex-direction: column;
    width: 100%;
}

.btn-hero--primary,
.btn-hero--secondary{
	width: 100%;
}

.hero-hub__media img {
    width: 100%;
    height: 220px;
}
.hero-hub__media {
    width: 100%;
    height: 220px;
 
}
.hero-hub__desc{
	width: 100%;
}
.hero-hub__title {
   width: 100%;
font-size: 28px;
line-height: 38px;
}
}