/* ==========================================================================
   Hopopope – Template article
   Tout est scoppé sous .hp-tpl pour ne pas entrer en conflit
   avec le thème ou les styles globaux d'Elementor.
   ========================================================================== */

.hp-tpl {
	--hp-orange: #EE5A1F;
	--hp-orange-dark: #D94810;
	--hp-orange-soft: #FFF2EA;
	--hp-navy: #1B2B5B;
	--hp-text: #424A60;
	--hp-muted: #8A90A0;
	--hp-line: #ECEDF1;
	--hp-green: #1F9D6B;
	--hp-green-soft: #EAF7F1;
	--hp-radius: 14px;
	--hp-sidebar-width: 316px;
	--hp-gap: 26px;
	--hp-max-width: 1040px;
	--hp-gutter: 28px;

	font-family: var(--hp-font, 'Manrope', Arial, Helvetica, sans-serif);
	font-size: 15px;
	line-height: 1.6;
	color: var(--hp-text);
	-webkit-font-smoothing: antialiased;
}

/* ---------- Reset local (neutralise les styles du thème / kit Elementor) ---------- */
.hp-tpl,
.hp-tpl *,
.hp-tpl *::before,
.hp-tpl *::after { box-sizing: border-box; }

.hp-tpl h1, .hp-tpl h2, .hp-tpl h3, .hp-tpl h4, .hp-tpl h5, .hp-tpl h6 {
	font-family: inherit;
	letter-spacing: normal;
	text-transform: none;
}
.hp-tpl a { text-decoration: none; }
.hp-tpl img { max-width: 100%; height: auto; }
.hp-tpl ul.hp-related__list { list-style: none; margin: 0; padding: 0; }
.hp-tpl .hp-icon { flex-shrink: 0; display: block; }

.hp-tpl button.hp-like,
.hp-tpl button.hp-share__btn {
	font: inherit;
	margin: 0;
	border: 0;
	border-radius: 0;
	box-shadow: none;
	text-transform: none;
	letter-spacing: normal;
	cursor: pointer;
}

.hp-tpl a:focus-visible,
.hp-tpl button:focus-visible {
	outline: 2px solid var(--hp-orange);
	outline-offset: 3px;
	border-radius: 6px;
}

/* ==========================================================================
   STRUCTURE
   ========================================================================== */

.hp-tpl--full {
	max-width: var(--hp-max-width);
	margin-inline: auto;
	padding-inline: var(--hp-gutter);
}

.hp-tpl .hp-layout {
	display: grid;
	grid-template-columns: minmax(0, 1fr) var(--hp-sidebar-width);
	gap: var(--hp-gap);
	align-items: start;
}
.hp-tpl .hp-layout--single { grid-template-columns: minmax(0, 1fr); }

.hp-tpl .hp-main,
.hp-tpl .hp-sidebar { min-width: 0; }

.hp-tpl .hp-sidebar {
	display: flex;
	flex-direction: column;
	gap: 30px;
}

/* ---------- Fil d'Ariane ---------- */
.hp-tpl .hp-breadcrumb {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 8px;
	padding: 18px 0 14px;
	font-size: 11.5px;
	color: var(--hp-muted);
}
.hp-tpl .hp-breadcrumb a { color: var(--hp-muted); }
.hp-tpl .hp-breadcrumb a:hover { color: var(--hp-orange); }
.hp-tpl .hp-breadcrumb__current { color: var(--hp-navy); }

/* ==========================================================================
   HERO (image mise en avant + titre, superposés via grid)
   ========================================================================== */

.hp-tpl .hp-hero {
	display: grid;
	min-height: 258px;
	border-radius: var(--hp-radius);
	overflow: hidden;
	background: linear-gradient(120deg, #1B2B5B 0%, #34477E 100%);
	color: #fff;
}
.hp-tpl .hp-hero > * { grid-area: 1 / 1; }

.hp-tpl .hp-hero__img {
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
	object-position: center right;
	display: block;
}

.hp-tpl .hp-hero__overlay {
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	align-items: flex-start;
	padding: 32px 32px 28px;
	background: linear-gradient(90deg, rgba(15, 24, 52, .88) 0%, rgba(15, 24, 52, .6) 45%, rgba(15, 24, 52, 0) 75%);
}
.hp-tpl .hp-hero--no-image .hp-hero__overlay { background: none; }

.hp-tpl .hp-badge {
	display: inline-block;
	margin-bottom: 14px;
	padding: 5px 9px;
	border-radius: 6px;
	background: var(--hp-orange);
	color: #fff;
	font-size: 11px;
	font-weight: 600;
	line-height: 1.3;
	text-transform: uppercase;
}
.hp-tpl .hp-badge:hover { background: var(--hp-orange-dark); color: #fff; }

.hp-tpl .hp-hero__title {
	max-width: 360px;
	margin: 0 0 20px;
	color: #fff;
	font-size: 28px;
	line-height: 1.12;
	font-weight: 700;
}

.hp-tpl .hp-hero__meta {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 28px;
	font-size: 12px;
}
.hp-tpl .hp-hero__meta-item {
	display: flex;
	align-items: center;
	gap: 8px;
}

/* ==========================================================================
   CONTENU DE L'ARTICLE (généré par l'éditeur WordPress)
   ========================================================================== */

.hp-tpl .hp-content {
	padding-top: 22px;
	counter-reset: hp-step;
}

.hp-tpl .hp-content > * { margin-top: 0; }

.hp-tpl .hp-content p {
	margin: 0 0 14px;
	color: var(--hp-text);
	font-size: 15px;
	line-height: 1.6;
}

/* Introduction : premier paragraphe */
.hp-tpl .hp-content > p:first-of-type {
	color: var(--hp-navy);
	font-size: 15.5px;
	line-height: 1.55;
	font-weight: 500;
}

.hp-tpl .hp-content strong,
.hp-tpl .hp-content b { color: var(--hp-navy); font-weight: 700; }

.hp-tpl .hp-content a:not([class]) {
	color: var(--hp-orange);
	text-decoration: underline;
	text-underline-offset: 2px;
}
.hp-tpl .hp-content a:not([class]):hover { color: var(--hp-orange-dark); }

/* H2 numérotés automatiquement */
.hp-tpl .hp-content h2 {
	display: flex;
	align-items: flex-start;
	gap: 20px;
	margin: 34px 0 18px;
	color: var(--hp-navy);
	font-size: 21.5px;
	line-height: 1.2;
	font-weight: 700;
}
.hp-tpl .hp-content h2::before {
	counter-increment: hp-step;
	content: counter(hp-step);
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	width: 34px;
	height: 34px;
	margin-top: -4px;
	border-radius: 50%;
	background: var(--hp-orange);
	color: #fff;
	font-size: 16px;
	font-weight: 700;
	line-height: 1;
}
.hp-tpl .hp-content--plain h2::before,
.hp-tpl .hp-content h2.hp-no-number::before { content: none; display: none; }


/* Titres non numérotés (H1 placé dans le contenu, H3 à H6, H2 sans numéro, titres Elementor) :
   même police et même graisse que les titres numérotés + trait orange sous le début du titre */
.hp-tpl .hp-content :is(h1, h3, h4, h5, h6),
.hp-tpl .hp-content--plain h2,
.hp-tpl .hp-content h2.hp-no-number,
.hp-tpl .hp-content .elementor-heading-title:not(h2) {
	display: block;
	margin: 30px 0 16px;
	color: var(--hp-navy);
	font-family: var(--hp-font, 'Manrope', Arial, Helvetica, sans-serif);
	font-weight: 700;
	line-height: 1.25;
	letter-spacing: normal;
	text-transform: none;
}
.hp-tpl .hp-content :is(h1, h3, h4, h5, h6)::after,
.hp-tpl .hp-content--plain h2::after,
.hp-tpl .hp-content h2.hp-no-number::after,
.hp-tpl .hp-content .elementor-heading-title:not(h2)::after {
	content: "";
	display: block;
	width: 44px;
	height: 3px;
	margin-top: 10px;
	border-radius: 3px;
	background: var(--hp-orange);
}
.hp-tpl .hp-content h1,
.hp-tpl .hp-content--plain h2,
.hp-tpl .hp-content h2.hp-no-number { font-size: 21.5px; }
.hp-tpl .hp-content h3 { font-size: 18px; }
.hp-tpl .hp-content h4 { font-size: 16px; }
.hp-tpl .hp-content :is(h5, h6) { font-size: 15px; }
.hp-tpl .hp-content :is(h4, h5, h6)::after { width: 32px; margin-top: 8px; }
/* Les sous-titres collés à un H2 numéroté restent proches */
.hp-tpl .hp-content h2 + :is(h3, h4) { margin-top: 0; }

.hp-tpl .hp-content ul,
.hp-tpl .hp-content ol { margin: 0 0 16px; padding-left: 22px; }
.hp-tpl .hp-content li { margin-bottom: 6px; }
.hp-tpl .hp-content li::marker { color: var(--hp-orange); }

/* Citation */
.hp-tpl .hp-content blockquote {
	display: flex;
	gap: 16px;
	margin: 18px 0 22px;
	padding: 18px 22px;
	border: 0;
	border-radius: var(--hp-radius);
	background: var(--hp-orange-soft);
	quotes: none;
}
.hp-tpl .hp-content blockquote::before {
	content: "\201C";
	flex-shrink: 0;
	color: var(--hp-orange);
	font-family: Georgia, serif;
	font-size: 52px;
	font-weight: 800;
	line-height: .8;
	height: 26px;
}
.hp-tpl .hp-content blockquote p {
	margin: 0 0 6px;
	color: var(--hp-navy);
	font-size: 14px;
	font-style: italic;
	line-height: 1.55;
	font-weight: 400;
}
.hp-tpl .hp-content blockquote p:last-of-type { margin-bottom: 0; }
.hp-tpl .hp-content blockquote cite {
	display: block;
	margin-top: 8px;
	color: var(--hp-muted);
	font-size: 12px;
	font-style: normal;
}

/* Images et médias */
.hp-tpl .hp-content figure { margin: 0 0 22px; }
.hp-tpl .hp-content img { border-radius: var(--hp-radius); }
.hp-tpl .hp-content figcaption {
	margin-top: 8px;
	color: var(--hp-muted);
	font-size: 12px;
	text-align: center;
}

/* Bloc Gutenberg « Média & texte » (texte + image côte à côte) */
.hp-tpl .hp-content .wp-block-media-text { margin: 0 0 22px; gap: 20px; }
.hp-tpl .hp-content .wp-block-media-text .wp-block-media-text__content { padding: 0; }
.hp-tpl .hp-content .wp-block-media-text img {
	width: 100%;
	aspect-ratio: 2 / 1;
	object-fit: cover;
}

/* ---------- Encadré [hp_conseil] ---------- */
.hp-tpl .hp-tip {
	display: flex;
	align-items: center;
	gap: 26px;
	margin: 30px 0;
	padding: 22px 24px;
	border-radius: var(--hp-radius);
	background: var(--hp-green-soft);
}
.hp-tpl .hp-tip__icon { align-self: flex-start; margin-top: 4px; color: var(--hp-green); }
.hp-tpl .hp-tip__body { flex: 1; min-width: 0; }
.hp-tpl .hp-tip__tag {
	display: inline-block;
	margin-bottom: 6px;
	padding: 3px 8px;
	border-radius: 6px;
	background: var(--hp-green);
	color: #fff;
	font-size: 11px;
	font-weight: 600;
	line-height: 1.4;
}
.hp-tpl .hp-content .hp-tip .hp-tip__title,
.hp-tpl .hp-tip__title {
	margin: 0 0 4px;
	color: var(--hp-navy);
	font-size: 15px;
	font-weight: 700;
	line-height: 1.4;
}
.hp-tpl .hp-content .hp-tip__text p,
.hp-tpl .hp-tip__text p {
	margin: 0;
	color: var(--hp-text);
	font-size: 13.5px;
	line-height: 1.5;
	font-weight: 400;
}
.hp-tpl .hp-tip__btn {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	flex-shrink: 0;
	padding: 10px 20px;
	border: 2px solid var(--hp-green);
	border-radius: 10px;
	background: #fff;
	color: var(--hp-green);
	font-size: 14px;
	font-weight: 700;
	white-space: nowrap;
	transition: background-color .15s, color .15s;
}
.hp-tpl .hp-tip__btn:hover { background: var(--hp-green); color: #fff; }

/* ==========================================================================
   PARTAGE + J'AIME
   ========================================================================== */

.hp-tpl .hp-share {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 20px;
	margin-top: 34px;
	padding: 18px 0;
	border-top: 1px solid var(--hp-line);
}
.hp-tpl .hp-share__links {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 12px;
}
.hp-tpl .hp-share__label {
	margin-right: 12px;
	color: var(--hp-navy);
	font-size: 12.5px;
	font-weight: 500;
}
.hp-tpl .hp-share__btn {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	padding: 0;
	border-radius: 7px;
	color: #fff;
	transition: opacity .15s;
}
.hp-tpl .hp-share__btn:hover { opacity: .85; color: #fff; }
.hp-tpl .hp-share__btn--facebook { background: #1F4FA8; }
.hp-tpl .hp-share__btn--linkedin { background: #1767B4; }
.hp-tpl .hp-share__btn--twitter  { background: #1DA1F2; }
.hp-tpl button.hp-share__btn--copy {
	border-radius: 50%;
	background: var(--hp-line);
	color: var(--hp-navy);
}
.hp-tpl button.hp-share__btn--copy:hover { color: var(--hp-navy); background: #E1E3E9; }
.hp-tpl button.hp-share__btn--copy.is-copied { background: var(--hp-green-soft); color: var(--hp-green); }
.hp-tpl .hp-share__status { color: var(--hp-green); font-size: 12px; }

.hp-tpl button.hp-like {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 0;
	background: none;
	color: var(--hp-navy);
	font-size: 12.5px;
}
.hp-tpl button.hp-like:hover,
.hp-tpl button.hp-like:focus { background: none; color: var(--hp-navy); }
.hp-tpl .hp-like .hp-icon { color: var(--hp-orange); transition: transform .15s; }
.hp-tpl .hp-like[aria-pressed="true"] .hp-icon path { fill: var(--hp-orange); }
.hp-tpl .hp-like:active .hp-icon { transform: scale(.9); }

/* ==========================================================================
   ARTICLE PRÉCÉDENT / SUIVANT
   ========================================================================== */

.hp-tpl .hp-postnav {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 24px;
	margin-bottom: 24px;
}
.hp-tpl .hp-postnav__link {
	display: flex;
	align-items: center;
	gap: 16px;
	padding: 12px 16px;
	border: 1px solid var(--hp-line);
	border-radius: 12px;
	background: #fff;
	transition: border-color .15s;
}
.hp-tpl .hp-postnav__link:hover { border-color: var(--hp-orange); }
.hp-tpl .hp-postnav__link--next { justify-content: flex-end; text-align: right; }
.hp-tpl .hp-postnav__text { min-width: 0; }
.hp-tpl .hp-postnav__text small {
	display: block;
	margin-bottom: 2px;
	color: var(--hp-muted);
	font-size: 10.5px;
}
.hp-tpl .hp-postnav__text strong {
	display: block;
	color: var(--hp-navy);
	font-size: 13px;
	font-weight: 600;
	line-height: 1.3;
}
.hp-tpl .hp-postnav__arrow {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	background: var(--hp-orange-soft);
	color: var(--hp-orange);
}

/* ==========================================================================
   SIDEBAR : CTA
   ========================================================================== */

.hp-tpl .hp-cta {
	padding: 20px 20px 22px;
	border-radius: var(--hp-radius);
	background: var(--hp-orange-soft);
}
.hp-tpl .hp-cta__icon { display: block; color: var(--hp-orange); }
.hp-tpl .hp-cta__title {
	margin: 12px 0;
	color: var(--hp-orange);
	font-size: 16px;
	line-height: 1.3;
	font-weight: 700;
}
.hp-tpl .hp-cta__text {
	margin: 0 0 16px;
	color: var(--hp-text);
	font-size: 13px;
	line-height: 1.5;
}
.hp-tpl .hp-cta__btn {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	width: 100%;
	min-height: 50px;
	padding: 12px 18px 12px 22px;
	border-radius: 999px;
	background: var(--hp-orange);
	color: #fff;
	font-size: 14px;
	font-weight: 700;
	line-height: 1.25;
	box-shadow: 0 6px 16px rgba(238, 90, 31, .28);
	transition: background-color .15s, box-shadow .15s, transform .15s;
}
.hp-tpl .hp-cta__btn:hover {
	background: var(--hp-orange-dark);
	color: #fff;
	box-shadow: 0 8px 20px rgba(238, 90, 31, .36);
	transform: translateY(-1px);
}
/* Libellé sur une seule ligne ; s'il est trop long, il passe à la ligne DANS le bouton */
.hp-tpl .hp-cta__btn-label { min-width: 0; white-space: nowrap; }
.hp-tpl .hp-cta__btn.is-wrapping .hp-cta__btn-label { white-space: normal; }
.hp-tpl .hp-cta__btn .hp-icon { transition: transform .15s; }
.hp-tpl .hp-cta__btn:hover .hp-icon { transform: translateX(3px); }

/* ==========================================================================
   SIDEBAR : ARTICLES SUGGÉRÉS
   ========================================================================== */

.hp-tpl .hp-related__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-bottom: 6px;
}
.hp-tpl .hp-related__title {
	margin: 0;
	padding-left: 14px;
	border-left: 3px solid var(--hp-orange);
	color: var(--hp-navy);
	font-size: 16px;
	line-height: 1.2;
	font-weight: 600;
}
.hp-tpl .hp-related__all {
	display: flex;
	align-items: center;
	gap: 6px;
	color: var(--hp-orange);
	font-size: 11px;
	white-space: nowrap;
}
.hp-tpl .hp-related__all:hover { color: var(--hp-orange-dark); }
.hp-tpl .hp-related__all-short { display: none; }

.hp-tpl .hp-related__item { margin: 0; border-bottom: 1px solid var(--hp-line); }
.hp-tpl .hp-related__item:last-child { border-bottom: 0; }

.hp-tpl .hp-related__link {
	display: flex;
	gap: 14px;
	padding: 14px 0;
}
.hp-tpl .hp-related__img {
	display: block;
	flex-shrink: 0;
	width: 106px;
	height: 74px;
	border-radius: 10px;
	object-fit: cover;
}
.hp-tpl .hp-related__img--empty { background: linear-gradient(135deg, var(--hp-orange-soft), #F6E1D4); }
.hp-tpl .hp-related__body {
	display: flex;
	flex-direction: column;
	min-width: 0;
}
.hp-tpl .hp-related__name {
	margin: 4px 0 8px;
	color: var(--hp-navy);
	font-size: 12.5px;
	font-weight: 500;
	line-height: 1.35;
	transition: color .15s;
}
.hp-tpl .hp-related__link:hover .hp-related__name { color: var(--hp-orange); }
.hp-tpl .hp-related__date {
	display: flex;
	align-items: center;
	gap: 6px;
	color: var(--hp-muted);
	font-size: 10.5px;
}

/* ==========================================================================
   TABLETTE : sidebar sous l'article
   ========================================================================== */

@media (max-width: 900px) {
	.hp-tpl .hp-layout { grid-template-columns: minmax(0, 1fr); }
	.hp-tpl .hp-sidebar { gap: 26px; }
}

/* ==========================================================================
   MOBILE
   ========================================================================== */

@media (max-width: 767px) {
	.hp-tpl { --hp-gutter: 22px; }

	.hp-tpl .hp-breadcrumb { display: none; }

	/* Hero */
	.hp-tpl .hp-hero { min-height: 400px; margin-top: 6px; }
	.hp-tpl .hp-hero__overlay {
		padding: 24px 18px 26px;
		background: linear-gradient(90deg, rgba(15, 24, 52, .85) 0%, rgba(15, 24, 52, .45) 60%, rgba(15, 24, 52, .1) 100%);
	}
	.hp-tpl .hp-hero__title { max-width: 260px; font-size: 28px; line-height: 1.2; }
	.hp-tpl .hp-hero__meta { flex-direction: column; gap: 10px; font-size: 14px; }

	/* Contenu */
	.hp-tpl .hp-content { padding-top: 26px; }
	.hp-tpl .hp-content > p:first-of-type { font-size: 15px; }
	.hp-tpl .hp-content h2 {
		gap: 18px;
		margin-top: 26px;
		padding-top: 26px;
		border-top: 1px solid var(--hp-line);
		font-size: 21px;
	}
	.hp-tpl .hp-content blockquote { padding: 18px; }
	.hp-tpl .hp-content blockquote p { font-size: 15px; }
	.hp-tpl .hp-content .wp-block-media-text img { aspect-ratio: 1.6 / 1; }

	/* Encadré conseil : le bouton devient une simple flèche */
	.hp-tpl .hp-tip { align-items: flex-start; gap: 14px; padding: 18px 16px; }
	.hp-tpl .hp-tip__btn {
		padding: 4px;
		border: 0;
		background: transparent;
	}
	.hp-tpl .hp-tip__btn:hover { background: transparent; color: var(--hp-green-dark, #17805A); }
	.hp-tpl .hp-tip__btn-label { display: none; }

	/* Partage */
	.hp-tpl .hp-share { flex-direction: column; align-items: flex-start; margin-top: 26px; }
	.hp-tpl .hp-share__label { font-size: 14px; }
	.hp-tpl .hp-share__btn { width: 34px; height: 34px; border-radius: 50%; }
	.hp-tpl button.hp-like { padding-left: 10px; font-size: 14px; }

	/* Précédent / suivant : cartes compactes, flèches en débord via marges négatives */
	.hp-tpl .hp-postnav { gap: 12px; padding-inline: 16px; }
	.hp-tpl .hp-postnav__link { gap: 6px; padding: 14px 10px; text-align: center; }
	.hp-tpl .hp-postnav__link--next { text-align: center; }
	.hp-tpl .hp-postnav__text { flex: 1; }
	.hp-tpl .hp-postnav__text strong { font-size: 12px; }
	.hp-tpl .hp-postnav__arrow {
		background: #fff;
		box-shadow: 0 2px 8px rgba(27, 43, 91, .12);
	}
	.hp-tpl .hp-postnav__link--prev .hp-postnav__arrow { margin-left: -27px; }
	.hp-tpl .hp-postnav__link--next .hp-postnav__arrow { margin-right: -27px; }

	/* Sidebar */
	.hp-tpl .hp-related__title { font-size: 18px; }
	.hp-tpl .hp-related__all { font-size: 14px; }
	.hp-tpl .hp-related__all-long { display: none; }
	.hp-tpl .hp-related__all-short { display: inline; }
	.hp-tpl .hp-related__item { border-bottom: 0; }
	.hp-tpl .hp-related__item:nth-child(n+3) { display: none; }
	.hp-tpl .hp-related__link { padding: 10px 0; }
	.hp-tpl .hp-related__img { width: 132px; height: 94px; }
	.hp-tpl .hp-related__name { font-size: 14.5px; font-weight: 600; }
}

/* Bloc « Média & texte » empilé : texte d'abord, image ensuite (comme la maquette) */
@media (max-width: 600px) {
	.hp-tpl .hp-content .wp-block-media-text.is-stacked-on-mobile.has-media-on-the-right .wp-block-media-text__content { grid-row: 1; }
	.hp-tpl .hp-content .wp-block-media-text.is-stacked-on-mobile.has-media-on-the-right .wp-block-media-text__media { grid-row: 2; }
}

@media (prefers-reduced-motion: reduce) {
	.hp-tpl * { transition: none !important; }
}

/* Espacement de la page quand le template automatique est utilisé */
.hp-page-main { padding: 8px 0 48px; }
.hp-page-main > .hp-tpl--full { width: 100%; }

/* ==========================================================================
   HEADER / FOOTER / BARRE D'ONGLETS HOPOPOPE
   ========================================================================== */

body.hp-own-layout { margin: 0; background: #fff; }
.hp-site { min-height: 100vh; display: flex; flex-direction: column; }
.hp-site > .hp-page-main { flex: 1; }

.hp-tpl .hp-icon { flex-shrink: 0; }

/* ---------- Logo ---------- */
.hp-tpl .hp-logo {
	position: relative;
	display: inline-flex;
	align-items: flex-end;
	color: var(--hp-orange);
	font-size: 26px;
	font-weight: 800;
	letter-spacing: -.5px;
	line-height: 1;
	padding-bottom: 6px;
}
.hp-tpl .hp-logo:hover { color: var(--hp-orange); }
.hp-tpl .hp-logo img { display: block; height: 36px; width: auto; max-width: none; border-radius: 0; }
.hp-tpl .hp-logo__beta {
	align-self: flex-end;
	margin: 0 0 -6px -4px;
	color: var(--hp-navy);
	font-size: 8px;
	font-weight: 700;
	letter-spacing: .5px;
}
.hp-tpl .hp-logo--small { font-size: 18px; padding-bottom: 0; }
.hp-tpl .hp-logo--small img { height: 22px; }
.hp-tpl .hp-logo--small .hp-logo__beta { display: none; }

/* ---------- Header ---------- */
.hp-tpl.hp-site-header {
	position: sticky;
	top: var(--wp-admin--admin-bar--height, 0px);
	z-index: 100;
	background: #fff;
	border-bottom: 1px solid var(--hp-line);
}
.hp-tpl .hp-site-header__inner {
	display: flex;
	align-items: center;
	gap: 36px;
	max-width: 1040px;
	height: 64px;
	margin-inline: auto;
	padding-inline: 28px;
}
.hp-tpl .hp-site-nav { display: flex; align-items: stretch; gap: 26px; flex: 1; height: 100%; }
.hp-tpl .hp-site-nav__link {
	display: flex;
	align-items: center;
	border-bottom: 3px solid transparent;
	padding-top: 3px;
	color: var(--hp-navy);
	font-size: 14.5px;
	font-weight: 500;
	white-space: nowrap;
	transition: color .15s;
}
.hp-tpl .hp-site-nav__link:hover { color: var(--hp-orange); }
.hp-tpl .hp-site-nav__link.is-active { color: var(--hp-orange); font-weight: 600; border-bottom-color: var(--hp-orange); }
.hp-tpl .hp-site-header__actions { display: flex; align-items: center; gap: 22px; margin-left: auto; }
.hp-tpl .hp-site-header__icon { display: flex; color: var(--hp-navy); }
.hp-tpl .hp-site-header__icon:hover { color: var(--hp-orange); }
.hp-tpl .hp-site-header__avatar {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: #E9EAEE;
	color: #9AA0AE;
}

/* ---------- Footer ---------- */
.hp-tpl.hp-site-footer { position: relative; margin-top: 10px; padding: 14px 0; background: #fff; }
.hp-tpl.hp-site-footer::before {
	content: "";
	display: block;
	height: 3px;
	margin: -14px 0 14px;
	background: linear-gradient(90deg, #EE5A1F, #F5A623, #1F9D6B, #1DA1F2, #1B2B5B);
}
.hp-tpl .hp-site-footer__inner {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 16px 26px;
	max-width: 1040px;
	margin-inline: auto;
	padding-inline: 28px;
}
.hp-tpl .hp-site-footer__social { display: flex; gap: 12px; }
.hp-tpl .hp-site-footer__social a { display: flex; color: var(--hp-navy); }
.hp-tpl .hp-site-footer__social a:hover { color: var(--hp-orange); }
.hp-tpl .hp-site-footer__links { display: flex; flex-wrap: wrap; gap: 8px 26px; margin-left: auto; }
.hp-tpl .hp-site-footer__links a { color: var(--hp-navy); font-size: 11.5px; }
.hp-tpl .hp-site-footer__links a:hover { color: var(--hp-orange); }

/* ---------- Barre d'onglets (mobile uniquement) ---------- */
.hp-tpl.hp-tabbar,
.hp-tabbar-spacer { display: none; }

@media (max-width: 1024px) {
	.hp-tpl .hp-site-header__inner { gap: 24px; }
	.hp-tpl .hp-site-nav { gap: 18px; }
}

@media (max-width: 900px) {
	.hp-tpl .hp-site-nav,
	.hp-tpl .hp-site-header__actions { display: none; }
	.hp-tpl .hp-site-header__inner { justify-content: center; height: 58px; }
	.hp-tpl.hp-site-header { position: static; border-bottom: 0; }
}

@media (max-width: 767px) {
	.hp-tpl .hp-site-header__inner { padding-inline: 22px; }

	.hp-tpl .hp-site-footer__inner { flex-direction: column; justify-content: center; padding-inline: 22px; text-align: center; }
	.hp-tpl .hp-site-footer__links { justify-content: center; margin-left: 0; gap: 8px 18px; }

	.hp-tpl.hp-tabbar {
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 100;
		display: flex;
		align-items: flex-end;
		justify-content: space-around;
		padding: 10px 6px calc(10px + env(safe-area-inset-bottom, 0px));
		background: #FAF8F6;
		border-top: 1px solid var(--hp-line);
	}
	.hp-tabbar-spacer { display: block; height: calc(84px + env(safe-area-inset-bottom, 0px)); }

	.hp-tpl .hp-tabbar__item {
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 5px;
		min-width: 60px;
		color: #8A90A0;
		font-size: 10px;
		line-height: 1.2;
		text-align: center;
	}
	.hp-tpl .hp-tabbar__item.is-active { color: var(--hp-orange); }
	.hp-tpl .hp-tabbar__item--center { margin-top: -30px; }
	.hp-tpl .hp-tabbar__pin {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 52px;
		height: 52px;
		border-radius: 50%;
		background: var(--hp-orange);
		color: #fff;
		box-shadow: 0 4px 12px rgba(238, 90, 31, .35);
	}
	.hp-tpl .hp-tabbar__brand { display: flex; align-items: flex-start; gap: 2px; color: var(--hp-orange); font-size: 12px; font-weight: 800; }
	.hp-tpl .hp-tabbar__brand small { color: var(--hp-navy); font-size: 7px; font-weight: 700; }
}

/* ==========================================================================
   PAGE BLOG (tous les articles, catégories, recherche)
   ========================================================================== */

.hp-sr-only {
	position: absolute !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

.hp-tpl--wide { max-width: 1240px; }
body.hp-blog-page .hp-site-header__inner,
body.hp-blog-page .hp-site-footer__inner { max-width: 1240px; }

/* ---------- En-tête ---------- */
.hp-tpl .hp-blog-hero {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
	align-items: center;
	gap: 40px;
	padding: 24px 0 28px;
}
.hp-tpl .hp-blog-hero--no-image { grid-template-columns: minmax(0, 1fr); }
.hp-tpl .hp-blog-hero__kicker {
	display: inline-block;
	margin-bottom: 12px;
	padding: 4px 9px;
	border-radius: 6px;
	background: var(--hp-orange-soft);
	color: var(--hp-orange);
	font-size: 10.5px;
	font-weight: 600;
	letter-spacing: .3px;
	text-transform: uppercase;
}
.hp-tpl .hp-blog-hero__title {
	max-width: 440px;
	margin: 0 0 14px;
	color: var(--hp-navy);
	font-size: 30px;
	line-height: 1.15;
	font-weight: 700;
}
.hp-tpl .hp-blog-hero__desc {
	max-width: 460px;
	margin: 0;
	color: var(--hp-text);
	font-size: 14px;
	line-height: 1.6;
}
.hp-tpl .hp-blog-hero__media img {
	display: block;
	width: 100%;
	height: auto !important;
	aspect-ratio: 3.8 / 1 !important;
	object-fit: cover;
	border-radius: 16px;
}

/* ---------- Recherche + filtres ---------- */
.hp-tpl .hp-blog-toolbar {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 14px 20px;
	margin-bottom: 24px;
}
.hp-tpl .hp-blog-search {
	display: flex;
	align-items: center;
	gap: 10px;
	flex: 0 1 290px;
	min-width: 220px;
	height: 38px;
	padding: 0 16px;
	border: 1px solid var(--hp-line);
	border-radius: 999px;
	background: #fff;
	color: var(--hp-navy);
}
.hp-tpl .hp-blog-search:focus-within { border-color: var(--hp-orange); }
.hp-tpl .hp-blog-search input[type="search"] {
	flex: 1;
	min-width: 0;
	height: 100%;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	outline: 0;
	box-shadow: none;
	background: transparent;
	color: var(--hp-navy);
	font: inherit;
	font-size: 12.5px;
	-webkit-appearance: none;
	appearance: none;
}
.hp-tpl .hp-blog-search input[type="search"]::placeholder { color: var(--hp-muted); opacity: 1; }
.hp-tpl .hp-blog-filters { display: flex; flex-wrap: wrap; gap: 10px; min-width: 0; }
.hp-tpl .hp-pill {
	display: inline-flex;
	align-items: center;
	height: 32px;
	padding: 0 14px;
	border: 1px solid var(--hp-line);
	border-radius: 999px;
	background: #fff;
	color: var(--hp-navy);
	font-size: 11.5px;
	font-weight: 500;
	white-space: nowrap;
	transition: border-color .15s, color .15s;
}
.hp-tpl .hp-pill:hover { border-color: var(--hp-orange); color: var(--hp-orange); }
.hp-tpl .hp-pill.is-active { border: 1.5px solid var(--hp-orange); background: var(--hp-orange-soft); color: var(--hp-orange); font-weight: 600; }

/* ---------- Grille de cartes ---------- */
.hp-tpl .hp-card-grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 24px;
}
.hp-tpl .hp-card {
	display: flex;
	flex-direction: column;
	min-width: 0;
	overflow: hidden;
	border-radius: 12px;
	background: #fff;
	box-shadow: 0 2px 14px rgba(27, 43, 91, .08);
	transition: box-shadow .2s, transform .2s;
}
.hp-tpl .hp-card:hover { box-shadow: 0 6px 22px rgba(27, 43, 91, .13); transform: translateY(-2px); }
.hp-tpl .hp-card__media {
	display: block;
	overflow: hidden;
	background: var(--hp-orange-soft);
}
/* !important : certains thèmes / WordPress imposent le ratio d'origine des images */
.hp-tpl .hp-card__media .hp-card__img {
	display: block;
	width: 100%;
	max-width: none;
	height: auto !important;
	max-height: none;
	aspect-ratio: 2.6 / 1 !important;
	object-fit: cover;
	border-radius: 0;
}
.hp-tpl .hp-card__img--empty { background: linear-gradient(135deg, var(--hp-orange-soft), #F6E1D4); }
.hp-tpl .hp-card__body {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	flex: 1;
	padding: 0 16px 16px;
}

.hp-tpl .hp-cat-badge {
	position: relative; /* passe au-dessus de l'image grâce à la marge négative */
	display: inline-block;
	margin: -11px 0 10px;
	padding: 3px 10px;
	border-radius: 999px;
	background: var(--hp-orange);
	color: #fff;
	font-size: 10.5px;
	font-weight: 600;
	line-height: 1.5;
}
.hp-tpl .hp-cat-badge:hover { color: #fff; filter: brightness(.95); }
.hp-tpl .hp-cat-badge--green { background: #22B573; }
.hp-tpl .hp-cat-badge--blue  { background: #1E9BEA; }
.hp-tpl .hp-cat-badge--navy  { background: var(--hp-navy); }

.hp-tpl .hp-card__title {
	margin: 0 0 8px;
	font-size: 13.5px;
	line-height: 1.3;
	font-weight: 700;
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.hp-tpl .hp-card__title a { color: var(--hp-navy); }
.hp-tpl .hp-card__title a:hover { color: var(--hp-orange); }
.hp-tpl .hp-card__excerpt {
	margin: 0 0 14px;
	color: var(--hp-text);
	font-size: 12px;
	line-height: 1.55;
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.hp-tpl .hp-card__meta {
	display: flex;
	flex-wrap: wrap;
	gap: 6px 22px;
	margin-top: auto;
	color: var(--hp-text);
	font-size: 10.5px;
}
.hp-tpl .hp-card__meta span { display: flex; align-items: center; gap: 7px; }
.hp-tpl .hp-card__meta .hp-icon { color: var(--hp-navy); }

/* ---------- Pagination ---------- */
.hp-tpl .hp-pagination {
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	gap: 8px;
	margin: 34px 0 10px;
}
.hp-tpl .hp-pagination :is(a, span) {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 36px;
	height: 36px;
	padding: 0 10px;
	border: 1px solid var(--hp-line);
	border-radius: 999px;
	background: #fff;
	color: var(--hp-navy);
	font-size: 13px;
	font-weight: 500;
}
.hp-tpl .hp-pagination a:hover { border-color: var(--hp-orange); color: var(--hp-orange); }
.hp-tpl .hp-pagination .current { border-color: var(--hp-orange); background: var(--hp-orange); color: #fff; font-weight: 700; }
.hp-tpl .hp-pagination .dots { border: 0; background: none; }
.hp-tpl .hp-blog-empty { padding: 40px 0; color: var(--hp-text); text-align: center; }

/* ---------- Responsive blog ---------- */
@media (max-width: 1100px) {
	.hp-tpl .hp-card-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
	.hp-tpl .hp-blog-hero { grid-template-columns: minmax(0, 1fr); gap: 22px; }
	.hp-tpl .hp-card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
}
@media (max-width: 767px) {
	.hp-tpl .hp-blog-hero { padding-top: 10px; }
	.hp-tpl .hp-blog-hero__title { font-size: 26px; }
	.hp-tpl .hp-blog-hero__media img { aspect-ratio: 2.4 / 1 !important; }
	.hp-tpl .hp-blog-toolbar { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; }
	.hp-tpl .hp-blog-search { min-width: 0; }
	.hp-tpl .hp-blog-filters { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 4px; scrollbar-width: none; }
	.hp-tpl .hp-blog-filters::-webkit-scrollbar { display: none; }
}
@media (max-width: 600px) {
	.hp-tpl .hp-card-grid { grid-template-columns: minmax(0, 1fr); }
	.hp-tpl .hp-card__media .hp-card__img { aspect-ratio: 2 / 1 !important; }
	.hp-tpl .hp-card__title { font-size: 15px; }
	.hp-tpl .hp-card__excerpt { font-size: 13px; }
	.hp-tpl .hp-card__meta { font-size: 11.5px; }
}

/* ==========================================================================
   HEADER / FOOTER DU SITE PRINCIPAL (zones isolées)
   ========================================================================== */
.hp-remote { display: block; position: relative; z-index: 100; }
.hp-remote:not(.is-ready) { visibility: hidden; animation: hp-remote-show 0s linear 2.5s forwards; }
@keyframes hp-remote-show { to { visibility: visible; } }
.hp-remote--sticky { position: sticky; bottom: 0; z-index: 90; }
.hp-has-bottom-bar .hp-remote--sticky { position: relative; }
body.hp-remote-layout .hp-page-main { padding-top: 24px; }

/* ==========================================================================
   BARRE DE PROGRESSION DE LECTURE (articles)
   ========================================================================== */
.hp-tpl .hp-progress {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 101; /* au-dessus du header */
	height: 4px;
	pointer-events: none;
	opacity: 0;
	transition: opacity .2s;
}
.hp-tpl .hp-progress.is-active { opacity: 1; }
.hp-tpl .hp-progress__bar {
	display: block;
	width: 100%;
	height: 100%;
	background: #EE5A1F;
	border-radius: 0 2px 2px 0;
	transform: scaleX(0);
	transform-origin: 0 50%;
	will-change: transform;
}
@media (max-width: 767px) {
	.hp-tpl .hp-progress { height: 3px; }
}

/* ==========================================================================
   BOUTON « RETOUR EN HAUT »
   ========================================================================== */
html body .hp-totop {
	position: fixed;
	right: 20px;
	bottom: var(--hp-totop-bottom, 20px);
	z-index: 95;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: #EE5A1F;
	color: #fff;
	box-shadow: 0 6px 16px rgba(238, 90, 31, .35);
	cursor: pointer;
	opacity: 0;
	visibility: hidden;
	transform: translateY(12px);
	transition: opacity .2s, visibility .2s, transform .2s, background-color .15s, box-shadow .15s;
}
html body .hp-totop.is-visible { opacity: 1; visibility: visible; transform: none; }
html body .hp-totop:hover,
html body .hp-totop:focus { background: #D94810; color: #fff; box-shadow: 0 8px 20px rgba(238, 90, 31, .45); }
html body .hp-totop:focus-visible { outline: 2px solid #1B2B5B; outline-offset: 3px; }
html body .hp-totop svg { display: block; }
@media (max-width: 767px) {
	html body .hp-totop { right: 16px; width: 44px; height: 44px; }
}
@media (prefers-reduced-motion: reduce) {
	html body .hp-totop { transition: opacity .2s, visibility .2s; transform: none; }
}

/* ==========================================================================
   PAGE BLOG : ARTICLE À LA UNE (dernier article publié)
   ========================================================================== */
.hp-tpl .hp-featured {
	display: grid;
	grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
	margin: 28px 0 26px;
	overflow: hidden;
	border-radius: 16px;
	background: #fff;
	box-shadow: 0 2px 14px rgba(27, 43, 91, .08);
	transition: box-shadow .2s;
}
.hp-tpl .hp-featured:hover { box-shadow: 0 6px 24px rgba(27, 43, 91, .13); }
.hp-tpl .hp-featured__media {
	display: block;
	min-height: 290px;
	max-height: 340px;
	overflow: hidden;
	background: var(--hp-orange-soft);
}
/* !important : certains thèmes imposent la taille d'origine des images */
.hp-tpl .hp-featured__media .hp-featured__img {
	display: block;
	width: 100%;
	height: 100% !important;
	max-width: none;
	max-height: none;
	aspect-ratio: auto !important;
	object-fit: cover;
	border-radius: 0;
	transition: transform .4s;
}
.hp-tpl .hp-featured:hover .hp-featured__img { transform: scale(1.03); }
.hp-tpl .hp-featured__img--empty { background: linear-gradient(135deg, var(--hp-orange-soft), #F6E1D4); min-height: 290px; }

.hp-tpl .hp-featured__body {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: center;
	gap: 0;
	padding: 28px 34px;
	min-width: 0;
}
.hp-tpl .hp-featured__tags { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 14px; }
.hp-tpl .hp-featured__kicker {
	display: inline-block;
	padding: 4px 10px;
	border-radius: 6px;
	background: var(--hp-orange-soft);
	color: var(--hp-orange);
	font-size: 10.5px;
	font-weight: 700;
	letter-spacing: .3px;
	text-transform: uppercase;
	line-height: 1.5;
}
.hp-tpl .hp-featured__tags .hp-cat-badge { margin: 0; }
.hp-tpl .hp-featured__title {
	margin: 0 0 10px;
	font-size: 24px;
	line-height: 1.25;
	font-weight: 700;
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.hp-tpl .hp-featured__title a { color: var(--hp-navy); }
.hp-tpl .hp-featured__title a:hover { color: var(--hp-orange); }
.hp-tpl .hp-featured__excerpt {
	margin: 0 0 14px;
	color: var(--hp-text);
	font-size: 14px;
	line-height: 1.6;
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.hp-tpl .hp-featured .hp-card__meta { margin: 0 0 18px; font-size: 11.5px; }
.hp-tpl .hp-featured__btn {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	padding: 11px 22px;
	border-radius: 999px;
	background: var(--hp-orange);
	color: #fff;
	font-size: 14px;
	font-weight: 700;
	white-space: nowrap;
	box-shadow: 0 6px 16px rgba(238, 90, 31, .28);
	transition: background-color .15s, box-shadow .15s, transform .15s;
}
.hp-tpl .hp-featured__btn:hover { background: var(--hp-orange-dark); color: #fff; transform: translateY(-1px); box-shadow: 0 8px 20px rgba(238, 90, 31, .36); }
.hp-tpl .hp-featured__btn .hp-icon { transition: transform .15s; }
.hp-tpl .hp-featured__btn:hover .hp-icon { transform: translateX(3px); }
.hp-tpl .hp-blog-spacer { height: 24px; }

@media (max-width: 900px) {
	.hp-tpl .hp-featured { grid-template-columns: minmax(0, 1fr); }
	.hp-tpl .hp-featured__media { min-height: 0; max-height: none; aspect-ratio: 16 / 9; }
	.hp-tpl .hp-featured__body { padding: 22px 22px 24px; }
}
@media (max-width: 600px) {
	.hp-tpl .hp-featured { margin-top: 14px; }
	.hp-tpl .hp-featured__title { font-size: 20px; }
	.hp-tpl .hp-featured__excerpt { font-size: 13.5px; }
}
@media (prefers-reduced-motion: reduce) {
	.hp-tpl .hp-featured__img, .hp-tpl .hp-featured:hover .hp-featured__img { transition: none; transform: none; }
}

/* ==========================================================================
   BANNIÈRE « TÉLÉCHARGER L'APPLICATION » (dans les articles)
   ========================================================================== */
.hp-tpl .hp-content .hp-app {
	container-type: inline-size;
	margin: 34px 0;
	overflow: hidden;
	border-radius: 18px;
	background: #FDF8F3;
	box-shadow: 0 2px 14px rgba(27, 43, 91, .07);
}
.hp-tpl .hp-content .hp-app__inner {
	display: grid;
	grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
}
.hp-tpl .hp-content .hp-app__content {
	display: flex;
	flex-direction: column;
	justify-content: center;
	min-width: 0;
	padding: 26px 10px 26px 28px;
}
.hp-tpl .hp-content .hp-app__brand {
	display: inline-flex;
	flex-direction: column;
	align-items: flex-end;
	align-self: flex-start;
	margin-bottom: 14px;
	line-height: 1;
}
.hp-tpl .hp-content .hp-app__logo {
	display: block;
	width: auto;
	height: 34px;
	max-width: none;
	border-radius: 0;
}
.hp-tpl .hp-content .hp-app__beta {
	margin-top: 1px;
	color: #5b6170;
	font-size: 10px;
	font-weight: 700;
	letter-spacing: .5px;
}
.hp-tpl .hp-content .hp-app .hp-app__title {
	margin: 0 0 12px;
	color: #13325B;
	font-size: clamp(17px, 3.4cqi, 23px);
	font-weight: 700;
	line-height: 1.25;
}
/* Effet « surligneur » sur la fin du titre, comme sur la maquette */
.hp-tpl .hp-content .hp-app__mark {
	padding: 0 .12em;
	background: linear-gradient(176deg, transparent 0 38%, #F8CD99 38% 92%, transparent 92%);
	-webkit-box-decoration-break: clone;
	box-decoration-break: clone;
}
.hp-tpl .hp-content .hp-app .hp-app__text {
	margin: 0 0 18px;
	color: #13325B;
	font-size: clamp(13px, 2.15cqi, 15px);
	font-weight: 400;
	line-height: 1.45;
}
.hp-tpl .hp-content .hp-app__stores { display: flex; flex-wrap: wrap; gap: 10px; }
.hp-tpl .hp-content .hp-store {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-height: 46px;
	padding: 6px 14px 6px 11px;
	border-radius: 10px;
	background: #111214;
	color: #fff;
	text-decoration: none;
	transition: transform .15s, box-shadow .15s, background-color .15s;
}
.hp-tpl .hp-content .hp-store:hover { background: #000; color: #fff; transform: translateY(-1px); box-shadow: 0 6px 14px rgba(0, 0, 0, .18); }
.hp-tpl .hp-content .hp-store:focus-visible { outline: 2px solid var(--hp-orange); outline-offset: 3px; }
.hp-tpl .hp-content .hp-store__icon { flex-shrink: 0; width: 24px; height: 24px; }
.hp-tpl .hp-content .hp-store__label { display: flex; flex-direction: column; line-height: 1.05; white-space: nowrap; }
.hp-tpl .hp-content .hp-store__label small { color: #fff; font-size: 9.5px; font-weight: 500; letter-spacing: .2px; }
.hp-tpl .hp-content .hp-store__label strong { color: #fff; font-size: 16px; font-weight: 600; letter-spacing: -.2px; }

.hp-tpl .hp-content .hp-app__visual { position: relative; min-width: 0; overflow: hidden; }
/* L'image remplit sa zone sans en dicter la hauteur (c'est le texte qui fixe la hauteur de la bannière) */
.hp-tpl .hp-content .hp-app__pic { position: absolute; inset: 0; }
.hp-tpl .hp-content .hp-app__pic,
.hp-tpl .hp-content .hp-app__pic img {
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
	border-radius: 0;
	margin: 0;
}
.hp-tpl .hp-content .hp-app__pic img { object-fit: cover; object-position: 0 0; } /* ancré en haut à gauche : les 3 traits orange restent entiers */
.hp-tpl .hp-content .hp-app__pic--square { display: none; }

/* ---------- Format portrait 3:4 (petits écrans / colonne étroite) ---------- */
/* Colonne intermédiaire (tablette) : boutons un peu plus compacts pour rester côte à côte */
@container (min-width: 561px) and (max-width: 660px) {
	.hp-tpl .hp-content .hp-app__content { padding-left: 24px; }
	.hp-tpl .hp-content .hp-app__stores { gap: 8px; }
	.hp-tpl .hp-content .hp-store { padding: 6px 11px 6px 9px; gap: 7px; }
	.hp-tpl .hp-content .hp-store__label strong { font-size: 15px; }
}
@container (max-width: 560px) {
	.hp-tpl .hp-content .hp-app__inner {
		grid-template-columns: minmax(0, 1fr);
		grid-template-rows: auto minmax(150px, 1fr);
		aspect-ratio: 3 / 4; /* format portrait 3:4 : plus de place pour le téléphone */
	}
	.hp-tpl .hp-content .hp-app__content { padding: 18px 20px 10px; }
	.hp-tpl .hp-content .hp-app__brand { align-self: center; margin-bottom: 10px; }
	.hp-tpl .hp-content .hp-app__logo { height: 26px; }
	.hp-tpl .hp-content .hp-app__beta { font-size: 9px; }
	.hp-tpl .hp-content .hp-app .hp-app__title { font-size: clamp(16.5px, 5.3cqi, 20px); line-height: 1.22; margin-bottom: 8px; }
	.hp-tpl .hp-content .hp-app .hp-app__text { font-size: 13px; line-height: 1.4; margin-bottom: 12px; }
	.hp-tpl .hp-content .hp-app__stores { flex-wrap: nowrap; gap: 8px; }
	.hp-tpl .hp-content .hp-store { flex: 1 1 0; min-width: 0; min-height: 42px; justify-content: center; padding: 5px 8px; gap: 6px; }
	.hp-tpl .hp-content .hp-store__icon { width: 20px; height: 20px; }
	.hp-tpl .hp-content .hp-store__label small { font-size: 8.5px; }
	.hp-tpl .hp-content .hp-store__label strong { font-size: 14px; }
	.hp-tpl .hp-content .hp-app__pic--wide { display: none; }
	.hp-tpl .hp-content .hp-app__pic--square { display: block; }
	.hp-tpl .hp-content .hp-app__pic--square img { object-position: 50% 0; }
}
@media (prefers-reduced-motion: reduce) {
	.hp-tpl .hp-content .hp-store { transition: none; }
}