/* ==========================================================================
   Section hero « Nouveau prospect »
   Préfixe .hro- partout, pour ne jamais croiser les classes du thème.
   ========================================================================== */

.hro {
	--hro-red: #E80000;
	--hro-ink: #0B0D14;
	--hro-text: #404452;
	--hro-bg: #F1F0F2;
	--hro-card: #FAFAFA;
	--hro-pale: #FEF2F3;
	--hro-badge-bg: #CC1818;
	--hro-badge-ink: #FFFFFF;
	--hro-line: #E6E5E8;
	--hro-radius: 22px;
	--hro-max: 1800px;

	position: relative;
	background: var(--hro-bg);
	padding: clamp(24px, 3vw, 48px) clamp(16px, 3.5vw, 56px);
	color: var(--hro-text);
}

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

.hro-inner {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.06fr);
	grid-template-rows: 1fr;
	min-height: clamp(420px, 33vw, 560px);
	max-width: var(--hro-max);
	margin: 0 auto;
	background: var(--hro-card);
	border-radius: var(--hro-radius);
	overflow: hidden;
	box-shadow: 0 18px 50px rgba(19, 21, 34, .08);
}

/* --------------------------------------------------------------------------
   Colonne image
   -------------------------------------------------------------------------- */

.hro-media {
	position: relative;
}

/* Les min-width et min-height résistent aux « img { width: auto } » et
   « img { height: auto } » que déclarent presque tous les thèmes. Sur une
   image, qui est un élément remplacé, « auto » vaut la dimension d'origine :
   la photo garde alors ses proportions et laisse une bande vide sur un côté. */
.hro .hro-media img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	min-width: 100%;
	min-height: 100%;
	max-width: none;
	max-height: none;
	object-fit: cover;
	object-position: var(--hro-image-pos, 50% 50%);
	display: block;
}

/* --------------------------------------------------------------------------
   Colonne texte
   -------------------------------------------------------------------------- */

.hro-content {
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: clamp(34px, 3.6vw, 60px);
}

/* Ne remet à zéro que les MARGES héritées du thème. Toucher au padding ici
   écraserait celui de la pilule, qui est un enfant direct de la colonne. */
.hro .hro-inner .hro-content > * {
	margin: 0;
}

/* Le thème pose aussi du PADDING sur les <p> et les titres. La remise à zéro
   ci-dessus ne peut pas viser tous les enfants, sous peine d'écraser celui de
   la pilule : on nomme donc les seuls éléments de texte. */
.hro .hro-inner .hro-title,
.hro .hro-inner .hro-sub,
.hro .hro-inner .hro-text {
	padding: 0 !important;
}

/* Un paragraphe vide n'a l'air de rien mais occupe toute une hauteur de ligne.
   Il en apparaît dès qu'un éditeur laisse une ligne blanche dans le contenu. */
.hro .hro-inner .hro-content > p:empty,
.hro .hro-inner .hro-content > br {
	display: none;
}

.hro .hro-inner .hro-badge {
	display: flex;
	align-items: center;
	gap: 11px;
	width: fit-content;
	margin: 0 0 24px;
	padding: 13px 26px;
	background: var(--hro-badge-bg);
	border-radius: 999px;
	color: var(--hro-badge-ink);
	font-size: 20px;
	font-weight: 300;
	text-transform: none;
	line-height: 1;
	box-shadow: 0 6px 20px rgba(11, 13, 20, .06);
}

.hro .hro-inner .hro-badge-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 21px;
	height: 21px;
	flex: 0 0 auto;
}

.hro .hro-inner .hro-badge-icon svg { width: 21px; height: 21px; display: block; }
.hro .hro-inner .hro-badge-icon i {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	font-size: 17px;
	line-height: 1;
}

.hro .hro-inner .hro-title {
	margin: 0 0 12px;
	color: var(--hro-ink);
	font-size: clamp(28px, 2.4vw, 38px);
	font-weight: 800;
	line-height: 1.14;
	letter-spacing: -.025em;
}

.hro .hro-inner .hro-title span {
	display: block;
	color: var(--hro-red);
}

.hro .hro-inner .hro-sub {
	/* Le !important est assumé : cet écart a résisté à trois relèvements de
	   spécificité. Il ne porte que sur ce seul élément. */
	margin: 0 0 8px !important;
	color: var(--hro-ink);
	font-size: clamp(20px, 1.7vw, 26px);
	font-weight: 400;
	line-height: 1.3;
}

/* Le mot souligné : un trait rouge posé sous la ligne de base, pas un
   text-decoration, qui ne se laisse ni épaissir ni arrondir. */
.hro .hro-inner .hro-sub strong {
	position: relative;
	font-weight: 700;
}

.hro .hro-inner .hro-sub strong::after {
	content: "";
	position: absolute;
	left: -2px;
	right: -2px;
	bottom: -6px;
	height: 3px;
	background: var(--hro-red);
	border-radius: 999px;
}

.hro .hro-inner .hro-text {
	margin: 0 !important;
	max-width: 46ch;
	font-size: 17px;
	line-height: 1.7;
	color: var(--hro-text);
}

/* --------------------------------------------------------------------------
   Les quatre points
   -------------------------------------------------------------------------- */

.hro-points {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	margin: clamp(26px, 2.6vw, 38px) 0 0;
	padding: clamp(24px, 2.4vw, 34px) 0 0;
	border-top: 1px solid var(--hro-line);
	list-style: none;
}

.hro-points--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.hro-points--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }

.hro-point {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 14px;
	padding: 0 10px;
	text-align: center;
}

.hro-point + .hro-point { border-left: 1px solid var(--hro-line); }

.hro-point-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 74px;
	height: 74px;
	background: var(--hro-pale);
	border-radius: 50%;
	color: var(--hro-red);
}

.hro-point-icon svg { width: 32px; height: 32px; display: block; }
.hro-point-icon i { font-size: 29px; line-height: 1; }

.hro .hro-point p {
	margin: 0;
	font-size: 14.5px;
	line-height: 1.45;
	color: var(--hro-text);
}

.hro .hro-point p strong {
	display: block;
	color: var(--hro-red);
	font-weight: 700;
}

/* --------------------------------------------------------------------------
   Adaptatif
   -------------------------------------------------------------------------- */

@media (max-width: 1080px) {
	.hro-inner { grid-template-columns: minmax(0, 1fr); min-height: 0; }
	.hro-media { min-height: 0; height: clamp(300px, 50vw, 440px); }
}

@media (max-width: 720px) {
	/* Quatre colonnes deviennent illisibles : on repasse à deux, et les traits
	   de séparation verticaux n'ont plus de sens entre des lignes empilées. */
	.hro-points { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 26px 0; }
	.hro-point + .hro-point { border-left: 0; }
	.hro-point:nth-child(even) { border-left: 1px solid var(--hro-line); }

	.hro-point-icon { width: 64px; height: 64px; }
	.hro-point-icon i { font-size: 25px; }
}

@media (max-width: 560px) {
	.hro .hro-inner .hro-badge { font-size: 16px; padding: 11px 20px; }
	.hro .hro-inner .hro-text { font-size: 16px; }
}