/*
 Theme Name:   OpenCodeFinalDiGiProUnic
 Theme URI:    https://mediumslateblue-pheasant-348484.hostingersite.com
 Description:  Thème enfant GeneratePress pour DiGiProUnic — Tech, Web, IA & Business. Guides, services et ressources. Performances, accessibilité, RGPD, SEO et sécurité intégrés.
 Author:       DiGiProUnic
 Author URI:   https://mediumslateblue-pheasant-348484.hostingersite.com
 Template:     generatepress
 Version:      2.4.0
 Requires at least: 6.0
 Requires PHP: 7.4
 Tested up to: 6.8
 License:      GPL-2.0-or-later
 License URI:  https://www.gnu.org/licenses/gpl-2.0.html
 Text Domain:  hypervo
 Tags: e-commerce, blog, affiliate, responsive, translation-ready, accessibility-ready
*/

/* ==========================================================================
   DIGIPROUNIC DESIGN SYSTEM
   Palette : Teal / Bleu profond / Emeraude (pas de violet ni de mauve)
   ========================================================================== */

:root {
	--hv-primary: #0d4f6b;
	--hv-primary-dark: #0a3d54;
	--hv-primary-light: #e6f2f7;
	--hv-accent: #0891b2;
	--hv-accent-dark: #0e7490;
	--hv-success: #059669;
	--hv-warning: #d97706;
	--hv-danger: #dc2626;
	--hv-text: #1e293b;
	--hv-text-light: #64748b;
	--hv-bg: #f8fafc;
	--hv-surface: #ffffff;
	--hv-border: #e2e8f0;
	--hv-radius: 10px;
	--hv-radius-sm: 6px;
	--hv-shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.06);
	--hv-shadow: 0 4px 12px rgba(15, 23, 42, 0.08);
	--hv-shadow-lg: 0 12px 32px rgba(15, 23, 42, 0.12);
	--hv-transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ─── HEADER ─── */
.site-header {
        /*border-bottom: 1px solid var(--hv-primary);*/
}
.main-navigation a { font-weight: 600; color: var(--hv-primary); }
.main-navigation .current-menu-item > a { color: var(--hv-primary-dark); font-weight: 700; }
        
/* ─── FOOTER ─── */
/*
 * Footer toujours lisible : fond sombre explicite, texte clair, liens
 * contrastés. Le footer reste dans le flux normal et ne peut pas être
 * recouvert par une annonce ou le bandeau cookies (voir la section
 * « STABILISATION 2027 » en fin de fichier).
 */
.site-footer {
	position: relative;
	z-index: 2;
	clear: both;
	background: #0a2230;
	color: #cbd5e1;
	border-top: 3px solid var(--hv-accent);
	font-size: .9rem;
}

.site-footer h1,
.site-footer h2,
.site-footer h3,
.site-footer h4,
.site-footer h5,
.site-footer h6,
.site-footer .widget-title {
	color: #ffffff;
}

.site-footer a {
	color: #7dd3fc;
	text-decoration: none;
}

.site-footer a:hover,
.site-footer a:focus {
	color: #ffffff;
	text-decoration: underline;
}

.site-footer ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.site-footer li {
	margin: 6px 0;
}

.site-footer .inside-site-info,
.site-footer .inside-footer-widgets {
	max-width: 1200px;
	margin-left: auto;
	margin-right: auto;
	padding-left: 20px;
	padding-right: 20px;
	box-sizing: border-box;
}

.site-footer .site-info {
	background: transparent;
	color: #cbd5e1;
	padding: 20px 0;
	text-align: center;
	font-size: .85rem;
}

.site-info a { color: #7dd3fc; text-decoration: underline; }
.site-info a:hover { color: #ffffff; }

/* Zone de widgets du footer (GeneratePress) : même fond que le footer. */
#footer-widgets {
	position: relative;
	z-index: 2;
	clear: both;
	background: #0a2230;
	color: #cbd5e1;
	padding: 40px 0 12px;
}

#footer-widgets .widget {
	margin-bottom: 28px;
}

/* Follow Us Social Media Icons Links */
.wp-block-social-links,.wp-block-social-links .wp-social-link,.wp-block-social-links a,.wp-block-social-links svg{color: var(--hv-primary);}
.wp-block-social-links:hover,.wp-block-social-links:hover .wp-social-link:hover,.wp-block-social-links a:hover,.wp-block-social-links svg:hover{color: var(--hv-primary-dark);}

/* Menu Hamburger Toggle Button */
.menu-toggle{color: var(--hv-primary);}
.menu-toggle:hover{color: var(--hv-primary-dark);}

/* ==========================================================================
   BASE
   ========================================================================== */

body {
	color: var(--hv-text);
	background: var(--hv-bg);
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, "Helvetica Neue", Arial, sans-serif;
	line-height: 1.7;
	-webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 {
	color: var(--hv-text);
	font-weight: 700;
	line-height: 1.3;
}

/* Exclusion des tableaux : les titres dans les cellules ne doivent pas être affectés */
.entry-content table h1,
.entry-content table h2,
.entry-content table h3,
.entry-content table h4,
.entry-content table h5,
.entry-content table h6 {
	font-size: inherit;
	font-weight: inherit;
	line-height: inherit;
	color: inherit;
	margin: 0;
}

a {
	color: var(--hv-accent-dark);
	text-decoration: none;
	transition: var(--hv-transition);
}

a:hover {
	color: var(--hv-primary);
	text-decoration: underline;
}

img {
	max-width: 100%;
	height: auto;
}

/* Conteneur principal */
.hv-container {
	width: 100%;
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 20px;
	box-sizing: border-box;
}

/* ==========================================================================
   BOUTONS & CTA
   ========================================================================== */

.hv-btn,
button.hv-btn,
input[type="submit"].hv-btn {
	display: inline-block;
	padding: 12px 28px;
	background: var(--hv-primary);
	color: #fff;
	border: none;
	border-radius: var(--hv-radius-sm);
	font-weight: 600;
	font-size: 16px;
	cursor: pointer;
	transition: var(--hv-transition);
	text-decoration: none;
}

.hv-btn:hover,
.hv-btn:focus {
	background: var(--hv-primary-dark);
	color: #fff;
	transform: translateY(-1px);
	box-shadow: var(--hv-shadow);
}

.hv-btn-accent {
	background: var(--hv-accent);
}

.hv-btn-accent:hover,
.hv-btn-accent:focus {
	background: var(--hv-accent-dark);
}

.hv-btn-ghost {
	background: transparent;
	color: var(--hv-primary);
	border: 2px solid var(--hv-primary);
}

.hv-btn-ghost:hover,
.hv-btn-ghost:focus {
	background: var(--hv-primary);
	color: #fff;
}

/* CTA Affiliate */
.hv-cta-wrapper {
	margin: 24px 0;
	text-align: center;
}

.hv-cta {
	display: inline-block;
	padding: 14px 36px;
	border-radius: var(--hv-radius-sm);
	font-weight: 700;
	font-size: 17px;
	text-decoration: none;
	transition: var(--hv-transition);
	box-shadow: var(--hv-shadow);
}

.hv-cta:hover {
	transform: translateY(-2px);
	box-shadow: var(--hv-shadow-lg);
	text-decoration: none;
}

.hv-cta-amazon {
	background: linear-gradient(135deg, #f59e0b, #d97706);
	color: #1e293b;
}

.hv-cta-aliexpress {
	background: linear-gradient(135deg, #ef4444, #dc2626);
	color: #fff;
}

.hv-cta-primary {
	background: linear-gradient(135deg, var(--hv-primary), var(--hv-accent));
	color: #fff;
}

/* ==========================================================================
   AVERTISSEMENT AFFILIATION
   ========================================================================== */

.hv-affiliate-disclosure {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	padding: 16px 20px;
	margin: 0 0 24px;
	background: #fef9c3;
	border-left: 4px solid var(--hv-warning);
	border-radius: var(--hv-radius-sm);
	font-size: 14px;
	color: #78350f;
	line-height: 1.6;
}

.hv-affiliate-icon {
	flex-shrink: 0;
	color: var(--hv-warning);
	margin-top: 2px;
}

/* ==========================================================================
   TABLE DES MATIERES
   ========================================================================== */

.hv-toc {
	background: var(--hv-surface);
	border: 1px solid var(--hv-border);
	border-radius: var(--hv-radius);
	margin: 0 0 28px;
	overflow: hidden;
	box-shadow: var(--hv-shadow-sm);
}

.hv-toc-toggle {
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	padding: 14px 20px;
	background: var(--hv-primary-light);
	border: none;
	cursor: pointer;
	font-weight: 600;
	color: var(--hv-primary);
	font-size: 16px;
}

.hv-toc-toggle:hover {
	background: #d4e7ef;
}

.hv-toc-arrow {
	transition: transform 0.3s ease;
}

.hv-toc-toggle[aria-expanded="true"] .hv-toc-arrow {
	transform: rotate(180deg);
}

.hv-toc-list {
	list-style: none;
	margin: 0;
	padding: 12px 20px 16px;
	display: none;
}

.hv-toc-list > li {
	margin: 6px 0;
}

.hv-toc-sublist {
	list-style: none;
	margin: 4px 0 4px 20px;
	padding: 0;
}

.hv-toc-sublist li {
	margin: 3px 0;
}

.hv-toc-item a {
	color: var(--hv-accent-dark);
	font-size: 15px;
}

.hv-toc-h3 a {
	font-size: 14px;
	color: var(--hv-text-light);
}

.hv-toc-item a:hover {
	color: var(--hv-primary);
}

/* ==========================================================================
   PARTAGE SOCIAL
   ========================================================================== */

.hv-share {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 10px;
	padding: 20px 0;
	margin: 32px 0;
	border-top: 1px solid var(--hv-border);
	border-bottom: 1px solid var(--hv-border);
}

.hv-share-label {
	font-weight: 600;
	color: var(--hv-text);
	margin-right: 4px;
}

.hv-share-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: var(--hv-bg);
	color: var(--hv-text);
	border: 1px solid var(--hv-border);
	transition: var(--hv-transition);
}

.hv-share-btn:hover {
	background: var(--hv-primary);
	color: #fff;
	border-color: var(--hv-primary);
	transform: translateY(-2px);
}

/* ==========================================================================
   ARTICLES SIMILAIRES
   ========================================================================== */

.hv-related-posts {
	margin: 48px 0;
}

.hv-related-title {
	font-size: 24px;
	margin-bottom: 24px;
	padding-bottom: 12px;
	border-bottom: 3px solid var(--hv-accent);
	display: inline-block;
}

.hv-related-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 24px;
}

.hv-related-card {
	background: var(--hv-surface);
	border: 1px solid var(--hv-border);
	border-radius: var(--hv-radius);
	overflow: hidden;
	transition: var(--hv-transition);
	box-shadow: var(--hv-shadow-sm);
}

.hv-related-card:hover {
	transform: translateY(-4px);
	box-shadow: var(--hv-shadow);
}

.hv-related-thumb {
	display: block;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	background: var(--hv-bg);
}

.hv-related-thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.3s ease;
}

.hv-related-card:hover .hv-related-thumb img {
	transform: scale(1.05);
}

.hv-related-thumb-placeholder {
	width: 100%;
	height: 100%;
	background: linear-gradient(135deg, var(--hv-primary-light), var(--hv-bg));
}

.hv-related-body {
	padding: 18px;
}

.hv-related-cat {
	display: inline-block;
	font-size: 12px;
	font-weight: 600;
	text-transform: uppercase;
	color: var(--hv-accent-dark);
	margin-bottom: 8px;
	letter-spacing: 0.5px;
}

.hv-related-post-title {
	font-size: 17px;
	margin: 0 0 10px;
}

.hv-related-post-title a {
	color: var(--hv-text);
}

.hv-related-post-title a:hover {
	color: var(--hv-primary);
	text-decoration: none;
}

.hv-related-excerpt {
	font-size: 14px;
	color: var(--hv-text-light);
	margin: 0 0 12px;
	line-height: 1.6;
}

.hv-related-more {
	font-size: 14px;
	font-weight: 600;
	color: var(--hv-accent-dark);
}

/* ==========================================================================
   PAGE ACCUEIL
   ========================================================================== */

.hv-hero {
	position: relative;
	padding: 90px 0 100px;
	background: radial-gradient(circle at 85% 30%, rgba(8, 145, 178, 0.45) 0%, rgba(13, 79, 107, 0.95) 45%, #062837 100%);
	color: #fff;
	overflow: hidden;
}

.hv-hero-glow {
	position: absolute;
	top: -20%;
	right: -10%;
	width: 650px;
	height: 650px;
	background: radial-gradient(circle, rgba(56, 189, 248, 0.25) 0%, rgba(5, 150, 105, 0.15) 50%, transparent 70%);
	filter: blur(60px);
	border-radius: 50%;
	pointer-events: none;
	animation: hvGlowPulse 8s ease-in-out infinite alternate;
}

@keyframes hvGlowPulse {
	0% { transform: scale(0.9) translate(0, 0); opacity: 0.7; }
	100% { transform: scale(1.15) translate(-30px, 30px); opacity: 1; }
}

.hv-hero-grid {
	display: grid;
	grid-template-columns: 1.15fr 0.85fr;
	gap: 48px;
	align-items: center;
	position: relative;
	z-index: 2;
}

/* Pillule de statut en direct */
.hv-hero-pill {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 8px 18px;
	background: rgba(255, 255, 255, 0.1);
	border: 1px solid rgba(255, 255, 255, 0.22);
	border-radius: 999px;
	font-size: 13px;
	font-weight: 600;
	color: #e0f2fe;
	margin-bottom: 22px;
	backdrop-filter: blur(12px);
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.15);
}

.hv-pill-pulse {
	width: 9px;
	height: 9px;
	background: #34d399;
	border-radius: 50%;
	box-shadow: 0 0 0 0 rgba(52, 211, 153, 0.7);
	animation: hvPulseDot 2s infinite;
}

@keyframes hvPulseDot {
	0% { box-shadow: 0 0 0 0 rgba(52, 211, 153, 0.7); }
	70% { box-shadow: 0 0 0 10px rgba(52, 211, 153, 0); }
	100% { box-shadow: 0 0 0 0 rgba(52, 211, 153, 0); }
}

.hv-hero-title {
	color: #ffffff;
	font-size: clamp(32px, 4.5vw, 54px);
	font-weight: 800;
	line-height: 1.18;
	letter-spacing: -0.02em;
	margin: 0 0 22px;
}

.hv-hero-gradient-text {
	background: linear-gradient(135deg, #38bdf8 0%, #a7f3d0 100%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	display: inline;
}

.hv-hero-description {
	font-size: 18px;
	line-height: 1.65;
	color: #cbd5e1;
	margin: 0 0 32px;
	max-width: 560px;
}

/* Actions CTA */
.hv-hero-actions {
	display: flex;
	align-items: center;
	gap: 16px;
	flex-wrap: wrap;
	margin-bottom: 36px;
}

.hv-btn-hero-primary {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	background: #ffffff;
	color: var(--hv-primary-dark);
	font-weight: 700;
	font-size: 16px;
	padding: 14px 30px;
	border-radius: var(--hv-radius-sm);
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
	transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
	position: relative;
	overflow: hidden;
}

.hv-btn-hero-primary:hover {
	transform: translateY(-2px);
	box-shadow: 0 12px 30px rgba(8, 145, 178, 0.4);
	color: var(--hv-primary);
	text-decoration: none;
}

.hv-btn-hero-primary .hv-btn-arrow {
	transition: transform 0.25s ease;
}

.hv-btn-hero-primary:hover .hv-btn-arrow {
	transform: translateX(4px);
}

.hv-btn-hero-ghost {
	display: inline-flex;
	align-items: center;
	background: rgba(255, 255, 255, 0.08);
	color: #ffffff;
	border: 1px solid rgba(255, 255, 255, 0.3);
	font-weight: 600;
	font-size: 16px;
	padding: 14px 26px;
	border-radius: var(--hv-radius-sm);
	backdrop-filter: blur(8px);
	transition: all 0.25s ease;
}

.hv-btn-hero-ghost:hover {
	background: rgba(255, 255, 255, 0.18);
	border-color: rgba(255, 255, 255, 0.6);
	color: #ffffff;
	text-decoration: none;
}

/* Preuve Sociale */
.hv-hero-social-proof {
	display: flex;
	align-items: center;
	gap: 16px;
	padding-top: 14px;
	border-top: 1px solid rgba(255, 255, 255, 0.12);
}

.hv-proof-avatars {
	display: flex;
}

.hv-avatar {
	width: 34px;
	height: 34px;
	border-radius: 50%;
	border: 2px solid #0d4f6b;
	margin-left: -8px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 11px;
	font-weight: 700;
	color: #ffffff;
}

.hv-avatar:first-child { margin-left: 0; }
.hv-av-1 { background: #0891b2; }
.hv-av-2 { background: #059669; }
.hv-av-3 { background: #3b82f6; }
.hv-av-4 { background: #f59e0b; }

.hv-proof-rating .hv-stars {
	color: #facc15;
	font-size: 15px;
	letter-spacing: 2px;
	line-height: 1;
	margin-bottom: 3px;
}

.hv-proof-text {
	font-size: 13px;
	color: #cbd5e1;
}

.hv-proof-text strong {
	color: #ffffff;
}

/* Colonne Droite - Showcase Visuel 3D & Badges Flottants */
.hv-hero-visual {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
}

.hv-showcase-card {
	position: relative;
	width: 100%;
	max-width: 440px;
	padding: 40px 24px;
	background: rgba(255, 255, 255, 0.04);
	border: 1px solid rgba(255, 255, 255, 0.16);
	border-radius: 24px;
	backdrop-filter: blur(16px);
	box-shadow: 0 20px 50px rgba(0, 0, 0, 0.35);
}

.hv-showcase-graphic {
	position: relative;
	z-index: 2;
	filter: drop-shadow(0 12px 24px rgba(0, 0, 0, 0.3));
	transition: transform 0.4s ease;
}

.hv-showcase-card:hover .hv-showcase-graphic {
	transform: translateY(-4px) scale(1.02);
}

/* Badges Flottants Glassmorphism */
.hv-floating-badge {
	position: absolute;
	z-index: 5;
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 10px 16px;
	background: rgba(13, 79, 107, 0.85);
	border: 1px solid rgba(255, 255, 255, 0.25);
	border-radius: 14px;
	backdrop-filter: blur(14px);
	box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3);
	color: #ffffff;
	pointer-events: none;
}

.hv-badge-icon {
	font-size: 20px;
}

.hv-badge-info strong {
	display: block;
	font-size: 13px;
	font-weight: 700;
	color: #ffffff;
	line-height: 1.2;
}

.hv-badge-info span {
	font-size: 11px;
	color: #94a3b8;
}

.hv-float-top-left {
	top: -15px;
	left: -20px;
	animation: hvFloatBadgeA 6s ease-in-out infinite alternate;
}

.hv-float-bottom-right {
	bottom: -20px;
	right: -15px;
	animation: hvFloatBadgeB 7s ease-in-out infinite alternate;
}

.hv-float-bottom-left {
	bottom: 25px;
	left: -25px;
	animation: hvFloatBadgeC 6.5s ease-in-out infinite alternate;
}

@keyframes hvFloatBadgeA {
	0% { transform: translateY(0); }
	100% { transform: translateY(-12px); }
}

@keyframes hvFloatBadgeB {
	0% { transform: translateY(0); }
	100% { transform: translateY(10px); }
}

@keyframes hvFloatBadgeC {
	0% { transform: translateX(0); }
	100% { transform: translateX(8px) translateY(-6px); }
}

@media (max-width: 992px) {
	.hv-hero {
		padding: 60px 0 70px;
	}
	.hv-hero-grid {
		grid-template-columns: 1fr;
		gap: 40px;
		text-align: center;
	}
	.hv-hero-description {
		margin-left: auto;
		margin-right: auto;
	}
	.hv-hero-actions {
		justify-content: center;
	}
	.hv-hero-social-proof {
		justify-content: center;
	}
	.hv-hero-visual {
		margin-top: 10px;
	}
	.hv-showcase-card {
		max-width: 380px;
		margin: 0 auto;
	}
	.hv-float-top-left { left: 5px; top: -10px; }
	.hv-float-bottom-right { right: 5px; bottom: -10px; }
	.hv-float-bottom-left { display: none; }
}

/* Réassurance */
.hv-reassurance {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 24px;
	padding: 48px 0;
}

.hv-reassurance-item {
	text-align: center;
	padding: 24px;
}

.hv-reassurance-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 56px;
	height: 56px;
	border-radius: 50%;
	background: var(--hv-primary-light);
	color: var(--hv-primary);
	margin-bottom: 14px;
}

.hv-reassurance-title {
	font-size: 16px;
	font-weight: 700;
	margin: 0 0 6px;
	color: var(--hv-text);
}

.hv-reassurance-desc {
	font-size: 14px;
	color: var(--hv-text-light);
	margin: 0;
}

/* Hub boutique / toolbox / blog */
.hv-hub {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 24px;
	padding: 0 0 56px;
}

.hv-hub-card {
	background: var(--hv-surface);
	border: 1px solid var(--hv-border);
	border-radius: var(--hv-radius);
	box-shadow: var(--hv-shadow-sm);
	padding: 32px 28px;
	text-align: center;
	display: flex;
	flex-direction: column;
	align-items: center;
	transition: var(--hv-transition);
}

.hv-hub-card:hover {
	transform: translateY(-4px);
	box-shadow: var(--hv-shadow);
}

.hv-hub-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 64px;
	height: 64px;
	border-radius: 16px;
	background: var(--hv-primary-light);
	color: var(--hv-primary);
	margin-bottom: 18px;
}

.hv-hub-text {
	font-size: 15px;
	line-height: 1.65;
	color: var(--hv-text-light);
	margin: 0 0 22px;
	flex-grow: 1;
}

.hv-hub-card .hv-btn {
	margin-top: auto;
}

/* Sections génériques */
.hv-section {
	padding: clamp(44px, 6vw, 72px) 0;
}

.hv-section-alt {
	background: var(--hv-surface);
}

/* Par défaut les sections sont alignées à gauche : plus lisible et plus
   « relax » qu'un centrage systématique. Seuls les CTA restent centrés. */
.hv-section-header {
	text-align: left;
	max-width: 780px;
	margin: 0 0 36px;
}

.hv-section-title {
	font-size: clamp(26px, 4vw, 36px);
	margin: 0 0 12px;
}

.hv-section-subtitle {
	font-size: 17px;
	color: var(--hv-text-light);
	max-width: 680px;
	margin: 0;
}

/* Produits vedettes - UNIQUEMENT sur l'accueil, ne touche pas /boutique */
.hv-products .hv-products-grid {
	display: grid;
	gap: 24px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.hv-products .hv-products-cols-2 {
	grid-template-columns: repeat(2, 1fr);
}

.hv-products .hv-products-cols-3 {
	grid-template-columns: repeat(3, 1fr);
}

.hv-products .hv-products-cols-4 {
	grid-template-columns: repeat(4, 1fr);
}

.hv-products .hv-product-item {
	list-style: none;
	background: var(--hv-surface);
	border: 1px solid var(--hv-border);
	border-radius: var(--hv-radius);
	overflow: hidden;
	transition: var(--hv-transition);
	box-shadow: var(--hv-shadow-sm);
	display: flex;
	flex-direction: column;
}

.hv-products .hv-product-item:hover {
	transform: translateY(-4px);
	box-shadow: var(--hv-shadow);
	border-color: var(--hv-accent);
}

.hv-products .hv-product-thumb {
	display: block;
	aspect-ratio: 1 / 1;
	overflow: hidden;
	background: var(--hv-bg);
}

.hv-products .hv-product-thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.3s ease;
}

.hv-products .hv-product-item:hover .hv-product-thumb img {
	transform: scale(1.05);
}

.hv-products .hv-product-thumb-placeholder {
	width: 100%;
	height: 100%;
	background: linear-gradient(135deg, var(--hv-primary-light), var(--hv-bg));
}

.hv-products .hv-product-body {
	padding: 16px;
	display: flex;
	flex-direction: column;
	flex-grow: 1;
}

.hv-products .hv-product-title {
	font-size: 16px;
	margin: 0 0 10px;
	line-height: 1.4;
}

.hv-products .hv-product-title a {
	color: var(--hv-text);
}

.hv-products .hv-product-title a:hover {
	color: var(--hv-primary);
	text-decoration: none;
}

.hv-products .hv-product-price {
	font-size: 18px;
	font-weight: 700;
	color: var(--hv-accent-dark);
	margin-bottom: 14px;
}

.hv-products .hv-product-price del {
	color: var(--hv-text-light);
	font-weight: 400;
	margin-right: 6px;
}

.hv-products .hv-product-price ins {
	text-decoration: none;
}

.hv-products .hv-product-add {
	margin-top: auto;
	text-align: center;
	padding: 10px 16px;
	font-size: 14px;
}

.hv-products-empty {
	grid-column: 1 / -1;
	text-align: center;
	color: var(--hv-text-light);
	padding: 40px 20px;
}

/* Témoignages */
.hv-testimonials {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 24px;
}

.hv-testimonial-card {
	background: var(--hv-surface);
	border: 1px solid var(--hv-border);
	border-radius: var(--hv-radius);
	padding: 28px;
	box-shadow: var(--hv-shadow-sm);
}

.hv-testimonial-stars {
	color: #f59e0b;
	margin-bottom: 14px;
	letter-spacing: 2px;
}

.hv-testimonial-text {
	font-size: 15px;
	color: var(--hv-text);
	margin: 0 0 18px;
	font-style: italic;
	line-height: 1.7;
}

.hv-testimonial-author {
	display: flex;
	align-items: center;
	gap: 12px;
}

.hv-testimonial-avatar {
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: linear-gradient(135deg, var(--hv-primary-light), var(--hv-bg));
	display: flex;
	align-items: center;
	justify-content: center;
	font-weight: 700;
	color: var(--hv-primary);
	font-size: 16px;
}

.hv-testimonial-name {
	font-weight: 600;
	color: var(--hv-text);
	font-size: 14px;
}

.hv-testimonial-role {
	font-size: 13px;
	color: var(--hv-text-light);
}

/* Blog récents */
.hv-blog-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 24px;
}

.hv-blog-card {
	background: var(--hv-surface);
	border: 1px solid var(--hv-border);
	border-radius: var(--hv-radius);
	overflow: hidden;
	transition: var(--hv-transition);
	box-shadow: var(--hv-shadow-sm);
	display: flex;
	flex-direction: column;
}

.hv-blog-card:hover {
	transform: translateY(-4px);
	box-shadow: var(--hv-shadow);
}

.hv-blog-thumb {
	display: block;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	background: var(--hv-bg);
	flex-shrink: 0;
}

.hv-blog-thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.3s ease;
}

.hv-blog-card:hover .hv-blog-thumb img {
	transform: scale(1.05);
}

.hv-blog-body {
	padding: 20px;
	display: flex;
	flex-direction: column;
	flex-grow: 1;
}

.hv-blog-meta {
	font-size: 13px;
	color: var(--hv-text-light);
	margin-bottom: 10px;
}

.hv-blog-title {
	font-size: 18px;
	margin: 0 0 10px;
	line-height: 1.4;
}

.hv-blog-title a {
	color: var(--hv-text);
}

.hv-blog-title a:hover {
	color: var(--hv-primary);
	text-decoration: none;
}

.hv-blog-excerpt {
	font-size: 14px;
	color: var(--hv-text-light);
	line-height: 1.6;
	margin: 0;
}

/* Newsletter */
.hv-newsletter {
	background: linear-gradient(135deg, var(--hv-primary), var(--hv-accent-dark));
	color: #fff;
	padding: 64px 40px;
	border-radius: var(--hv-radius);
	text-align: center;
}

.hv-newsletter h2 {
	color: #fff;
	margin-bottom: 12px;
}

.hv-newsletter p {
	opacity: 0.9;
	margin-bottom: 28px;
}

.hv-newsletter-form {
	display: flex;
	gap: 12px;
	max-width: 500px;
	margin: 0 auto;
	flex-wrap: wrap;
	justify-content: center;
}

.hv-newsletter-form input[type="email"] {
	flex: 1;
	min-width: 220px;
	padding: 14px 18px;
	border: none;
	border-radius: var(--hv-radius-sm);
	font-size: 16px;
}

.hv-newsletter-form button {
	padding: 14px 28px;
	background: #fff;
	color: var(--hv-primary);
	border: none;
	border-radius: var(--hv-radius-sm);
	font-weight: 700;
	font-size: 16px;
	cursor: pointer;
	transition: var(--hv-transition);
}

.hv-newsletter-form button:hover {
	background: var(--hv-primary-light);
}

.hv-form-message {
	width: 100%;
	margin-top: 14px;
	font-size: 14px;
	font-weight: 500;
}

.hv-form-message.is-success {
	color: var(--hv-success);
	background: #d1fae5;
	padding: 12px 16px;
	border-radius: var(--hv-radius-sm);
}

.hv-form-message.is-error {
	color: var(--hv-danger);
	background: #fee2e2;
	padding: 12px 16px;
	border-radius: var(--hv-radius-sm);
}

.hv-form-message.is-info {
	color: var(--hv-primary);
	background: #e0f2f1;
	padding: 12px 16px;
	border-radius: var(--hv-radius-sm);
}

/* Spinner de chargement */
.hv-spinner {
	display: inline-block;
	width: 16px;
	height: 16px;
	border: 2px solid rgba(255, 255, 255, 0.3);
	border-top-color: #fff;
	border-radius: 50%;
	animation: hv-spin 0.7s linear infinite;
	vertical-align: -2px;
	margin-right: 4px;
}

.hv-newsletter-form .hv-spinner,
.hv-contact-form .hv-btn .hv-spinner {
	border-color: rgba(13, 79, 107, 0.2);
	border-top-color: var(--hv-primary);
}

@keyframes hv-spin {
	to { transform: rotate(360deg); }
}

/* Honeypot */
.hv-hp {
	position: absolute !important;
	left: -10000px !important;
	width: 1px !important;
	height: 1px !important;
	overflow: hidden !important;
}

/* FAQ */
.hv-faq {
	max-width: 760px;
	margin: 0 auto;
}

.hv-faq-item {
	background: var(--hv-surface);
	border: 1px solid var(--hv-border);
	border-radius: var(--hv-radius-sm);
	margin-bottom: 12px;
	overflow: hidden;
}

.hv-faq-question {
	width: 100%;
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 18px 22px;
	background: none;
	border: none;
	cursor: pointer;
	font-size: 16px;
	font-weight: 600;
	color: var(--hv-text);
	text-align: left;
}

.hv-faq-question::after {
	content: "+";
	font-size: 22px;
	font-weight: 300;
	color: var(--hv-accent);
	transition: transform 0.3s ease;
}

.hv-faq-item.is-open .hv-faq-question::after {
	content: "-";
}

.hv-faq-answer {
	max-height: 0;
	overflow: hidden;
	transition: max-height 0.3s ease;
	padding: 0 22px;
}

.hv-faq-item.is-open .hv-faq-answer {
	max-height: 500px;
	padding: 0 22px 18px;
}

.hv-faq-answer p {
	margin: 0;
	color: var(--hv-text-light);
	line-height: 1.7;
}

/* ==========================================================================
   PAGE A PROPOS
   ========================================================================== */

.hv-about-hero {
	padding: 60px 0;
	text-align: left;
	background: var(--hv-primary-light);
}

.hv-about-hero h1 {
	font-size: clamp(28px, 4vw, 40px);
	margin-bottom: 16px;
}

.hv-about-hero p {
	max-width: 720px;
	margin: 0;
	font-size: 17px;
	color: var(--hv-text-light);
}

.hv-about-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 48px;
	align-items: center;
	padding: 64px 0;
}

.hv-about-image {
	border-radius: var(--hv-radius);
	overflow: hidden;
	box-shadow: var(--hv-shadow);
	aspect-ratio: 4 / 3;
	background: var(--hv-bg);
}

.hv-about-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.hv-values {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 24px;
	padding: 48px 0;
}

.hv-value-card {
	text-align: center;
	padding: 28px;
	background: var(--hv-surface);
	border-radius: var(--hv-radius);
	border: 1px solid var(--hv-border);
}

.hv-value-icon {
	width: 52px;
	height: 52px;
	margin: 0 auto 16px;
	border-radius: 12px;
	background: var(--hv-primary-light);
	color: var(--hv-primary);
	display: flex;
	align-items: center;
	justify-content: center;
}

/* ==========================================================================
   PAGE CONTACT
   ========================================================================== */

.hv-contact-grid {
	display: grid;
	grid-template-columns: 1fr 1.2fr;
	gap: 48px;
	padding: 48px 0;
}

.hv-contact-info {
	background: var(--hv-primary);
	color: #fff;
	padding: 40px;
	border-radius: var(--hv-radius);
}

.hv-contact-info h2 {
	color: #fff;
	margin-bottom: 16px;
}

.hv-contact-info p {
	opacity: 0.9;
	margin-bottom: 32px;
}

.hv-contact-detail {
	display: flex;
	align-items: center;
	gap: 14px;
	margin-bottom: 24px;
}

.hv-contact-detail-icon {
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.15);
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}

.hv-contact-detail-text {
	font-size: 14px;
}

.hv-contact-detail-label {
	font-size: 12px;
	opacity: 0.7;
	text-transform: uppercase;
	letter-spacing: 0.5px;
}

.hv-contact-detail-value {
	font-weight: 600;
}

.hv-contact-form {
	display: flex;
	flex-direction: column;
	gap: 18px;
}

.hv-form-group label {
	display: block;
	font-weight: 600;
	margin-bottom: 6px;
	font-size: 14px;
}

.hv-form-group input,
.hv-form-group textarea {
	width: 100%;
	padding: 12px 16px;
	border: 1px solid var(--hv-border);
	border-radius: var(--hv-radius-sm);
	font-size: 15px;
	font-family: inherit;
	transition: var(--hv-transition);
}

.hv-form-group input:focus,
.hv-form-group textarea:focus {
	outline: none;
	border-color: var(--hv-accent);
	box-shadow: 0 0 0 3px rgba(8, 145, 178, 0.15);
}

.hv-form-group textarea {
	min-height: 140px;
	resize: vertical;
}

.hv-contact-form .hv-form-message.is-success {
	color: var(--hv-success);
	background: #d1fae5;
	padding: 12px 16px;
	border-radius: var(--hv-radius-sm);
}

.hv-contact-form .hv-form-message.is-error {
	color: var(--hv-danger);
	background: #fee2e2;
	padding: 12px 16px;
	border-radius: var(--hv-radius-sm);
}

.hv-form-message.is-info {
	color: var(--hv-primary);
	background: #e0f2f1;
	padding: 12px 16px;
	border-radius: var(--hv-radius-sm);
}

/* ==========================================================================
   PAGE TOOLBOX
   ========================================================================== */

.hv-toolbox-header {
	padding: 48px 0 24px;
	text-align: center;
}

.hv-toolbox-filters {
	display: flex;
	gap: 10px;
	flex-wrap: wrap;
	justify-content: center;
	margin: 32px 0;
}

.hv-filter-btn {
	padding: 8px 20px;
	background: var(--hv-surface);
	border: 1px solid var(--hv-border);
	border-radius: 999px;
	cursor: pointer;
	font-size: 14px;
	font-weight: 500;
	color: var(--hv-text);
	transition: var(--hv-transition);
}

.hv-filter-btn:hover,
.hv-filter-btn.is-active {
	background: var(--hv-primary);
	color: #fff;
	border-color: var(--hv-primary);
}

.hv-toolbox-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 24px;
	padding: 24px 0 64px;
}

.hv-tool-card {
	background: var(--hv-surface);
	border: 1px solid var(--hv-border);
	border-radius: var(--hv-radius);
	padding: 28px;
	transition: var(--hv-transition);
	box-shadow: var(--hv-shadow-sm);
	display: flex;
	flex-direction: column;
}

.hv-tool-card:hover {
	transform: translateY(-4px);
	box-shadow: var(--hv-shadow);
	border-color: var(--hv-accent);
}

.hv-tool-category {
	font-size: 12px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	color: var(--hv-accent-dark);
	margin-bottom: 10px;
}

.hv-tool-title {
	font-size: 19px;
	margin: 0 0 10px;
}

.hv-tool-desc {
	font-size: 14px;
	color: var(--hv-text-light);
	line-height: 1.6;
	margin: 0 0 18px;
	flex-grow: 1;
}

.hv-tool-rating {
	display: flex;
	align-items: center;
	gap: 6px;
	margin-bottom: 16px;
	font-size: 14px;
}

.hv-tool-stars {
	color: #f59e0b;
}

.hv-tool-link {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-weight: 600;
	color: var(--hv-primary);
}

/* ==========================================================================
   PAGES LEGALES
   ========================================================================== */

.hv-legal {
	max-width: 820px;
	margin: 0 auto;
	padding: 48px 20px;
}

.hv-legal h1 {
	font-size: clamp(24px, 4vw, 34px);
	margin-bottom: 12px;
}

.hv-legal .hv-legal-updated {
	font-size: 13px;
	color: var(--hv-text-light);
	margin-bottom: 32px;
	padding-bottom: 16px;
	border-bottom: 1px solid var(--hv-border);
}

.hv-legal h2 {
	font-size: 22px;
	margin: 36px 0 14px;
	color: var(--hv-primary);
}

.hv-legal h3 {
	font-size: 18px;
	margin: 28px 0 10px;
}

.hv-legal p {
	margin-bottom: 16px;
	line-height: 1.8;
	color: #334155;
}

.hv-legal ul,
.hv-legal ol {
	margin-bottom: 16px;
	padding-left: 24px;
}

.hv-legal li {
	margin-bottom: 8px;
	line-height: 1.7;
}

/* ==========================================================================
   ARCHIVE / BLOG - GRILLE MAGAZINE
   Utilise la classe body.hv-blog-listing ajoutée via functions.php.
   Respecte la configuration native GeneratePress (Sidebar personnalisable via Customizer).
   ========================================================================== */

/* En-tête éditorial page Blog */
.hv-blog-page-intro {
	grid-column: 1 / -1;
	background: var(--hv-surface);
	border: 1px solid var(--hv-border);
	border-radius: var(--hv-radius);
	padding: 36px 32px 30px;
	margin-bottom: 8px;
	box-shadow: var(--hv-shadow-sm);
}

.hv-blog-badge {
	display: inline-block;
	padding: 4px 14px;
	background: var(--hv-primary-light);
	color: var(--hv-primary);
	border-radius: 999px;
	font-size: 12px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	margin-bottom: 12px;
}

.hv-blog-page-title {
	font-size: clamp(26px, 3.5vw, 36px);
	font-weight: 800;
	color: var(--hv-text);
	margin: 0 0 10px;
	line-height: 1.25;
}

.hv-blog-page-desc {
	font-size: 16px;
	color: var(--hv-text-light);
	line-height: 1.6;
	margin: 0;
	max-width: 720px;
}

body.hv-blog-listing .site-main {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: 28px;
	/* Reset des marges GP qui causent un décalage */
	margin: 0;
	padding: 0;
}

/* Tous les enfants directs qui ne sont PAS des articles (header, intro, nav, no-results)
   doivent occuper la pleine largeur de la grille */
body.hv-blog-listing .site-main > *:not(article) {
	grid-column: 1 / -1;
}

body.hv-blog-listing .site-main > article {
	background: var(--hv-surface);
	border: 1px solid var(--hv-border);
	border-radius: var(--hv-radius);
	overflow: hidden;
	transition: var(--hv-transition);
	box-shadow: var(--hv-shadow-sm);
	margin: 0 !important;
	padding: 0 !important;
	display: flex;
	flex-direction: column;
}

body.hv-blog-listing .site-main > article:hover {
	transform: translateY(-4px);
	box-shadow: var(--hv-shadow);
}

body.hv-blog-listing .site-main > article .inside-article {
	padding: 0;
	display: flex;
	flex-direction: column;
	height: 100%;
}

body.hv-blog-listing .site-main > article .post-image {
	margin: 0;
}

body.hv-blog-listing .site-main > article .post-image img {
	width: 100%;
	height: 220px;
	object-fit: cover;
	transition: transform 0.3s ease;
}

body.hv-blog-listing .site-main > article:hover .post-image img {
	transform: scale(1.05);
}

body.hv-blog-listing .site-main > article .entry-header {
	padding: 20px 22px 0;
}

body.hv-blog-listing .site-main > article .entry-summary {
	padding: 0 22px 16px;
	flex-grow: 1;
	display: flex;
	flex-direction: column;
	gap: 10px;
}

body.hv-blog-listing .site-main > article .entry-summary p {
	margin: 0;
	font-size: 14px;
	line-height: 1.6;
	color: var(--hv-text-light);
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;
	overflow: hidden;
}

body.hv-blog-listing .site-main > article .entry-title {
	font-size: 18px;
	margin-bottom: 8px;
	line-height: 1.38;
}

body.hv-blog-listing .site-main > article .entry-title a {
	color: var(--hv-text);
}

body.hv-blog-listing .site-main > article .entry-title a:hover {
	color: var(--hv-primary);
	text-decoration: none;
}

body.hv-blog-listing .site-main > article .entry-meta {
	font-size: 13px;
	color: var(--hv-text-light);
}

body.hv-blog-listing .site-main > article .entry-summary p {
	margin: 0;
	font-size: 15px;
	color: var(--hv-text-light);
	line-height: 1.6;
}

body.hv-blog-listing .site-main > article .entry-summary .read-more-container {
	margin-top: 14px;
}

body.hv-blog-listing .site-main > article .read-more,
body.hv-blog-listing .site-main > article a.read-more {
	font-size: 14px;
	font-weight: 600;
	color: var(--hv-accent-dark);
}

body.hv-blog-listing .site-main > article .read-more:hover,
body.hv-blog-listing .site-main > article a.read-more:hover {
	color: var(--hv-primary);
}

/* Pagination centrée sous la grille */
body.hv-blog-listing .site-main .paging-navigation,
body.hv-blog-listing .site-main .navigation {
	margin-top: 24px;
}

body.hv-blog-listing .site-main > .page-header {
	margin-bottom: 8px;
}

body.search.hv-blog-listing .site-main > .page-header {
	background: var(--hv-surface);
	border: 1px solid var(--hv-border);
	border-radius: var(--hv-radius);
	padding: 32px 28px 24px;
	text-align: center;
	box-shadow: var(--hv-shadow-sm);
}

.hv-search-again {
	max-width: 520px;
	margin: 16px auto 0;
}

body.hv-blog-listing .site-main > .page-header .page-title {
	font-size: 32px;
	margin-bottom: 8px;
}

body.hv-blog-listing .site-main > .page-header .taxonomy-description {
	color: var(--hv-text-light);
	font-size: 16px;
}

/* Message "aucun résultat" sur la recherche */
body.hv-blog-listing .site-main .no-results {
	grid-column: 1 / -1;
	background: var(--hv-surface);
	border: 1px solid var(--hv-border);
	border-radius: var(--hv-radius);
	padding: 40px;
	text-align: center;
}

body.hv-blog-listing .site-main .no-results .page-title {
	font-size: 24px;
	margin-bottom: 12px;
}

body.hv-blog-listing .site-main .no-results p {
	color: var(--hv-text-light);
	margin-bottom: 20px;
}

body.hv-blog-listing .site-main .search-form {
	max-width: 500px;
	margin: 0 auto;
	display: flex;
	gap: 10px;
}

body.hv-blog-listing .site-main .search-form label {
	flex: 1;
}

body.hv-blog-listing .site-main .search-form .search-field {
	width: 100%;
	padding: 12px 16px;
	border: 1px solid var(--hv-border);
	border-radius: var(--hv-radius-sm);
	font-size: 16px;
}

body.hv-blog-listing .site-main .search-form .search-submit {
	padding: 12px 24px;
	background: var(--hv-primary);
	color: #fff;
	border: none;
	border-radius: var(--hv-radius-sm);
	font-weight: 600;
	cursor: pointer;
}

/* Single post - contenu centré et lisible */
.single-post .entry-header,
.single-post .entry-content {
	max-width: 720px;
	margin-left: auto;
	margin-right: auto;
}

.single-post .entry-content {
	margin-top: 24px;
	font-size: 17px;
	line-height: 1.8;
}

.single-post .entry-content img {
	border-radius: var(--hv-radius-sm);
}

/* Titres dans contenu article — distinction CLAIRE avec paragraphes */
.single-post .entry-content h2 {
	font-size: 1.75em !important;
	font-weight: 800 !important;
	line-height: 1.3 !important;
	color: var(--hv-text) !important;
	margin-top: 2em !important;
	margin-bottom: 0.7em !important;
	padding-bottom: 0.3em !important;
	border-bottom: 2px solid var(--hv-primary-light) !important;
}

.single-post .entry-content h3 {
	font-size: 1.45em !important;
	font-weight: 700 !important;
	line-height: 1.35 !important;
	color: var(--hv-primary) !important;
	margin-top: 1.7em !important;
	margin-bottom: 0.6em !important;
}

.single-post .entry-content h4 {
	font-size: 1.2em !important;
	font-weight: 700 !important;
	line-height: 1.4 !important;
	color: var(--hv-accent-dark) !important;
	margin-top: 1.4em !important;
	margin-bottom: 0.5em !important;
	text-transform: uppercase !important;
	letter-spacing: 0.03em !important;
}

.single-post .entry-content h5,
.single-post .entry-content h6 {
	font-size: 1.05em !important;
	font-weight: 700 !important;
	line-height: 1.4 !important;
	color: var(--hv-text) !important;
	margin-top: 1.2em !important;
	margin-bottom: 0.4em !important;
	text-transform: uppercase !important;
	letter-spacing: 0.02em !important;
}

/* ==========================================================================
   TABLEAUX RESPONSIVES (Gutenberg & HTML)
   Scroll horizontal fluide, aucune coupure de mot gênante
   ========================================================================== */

.entry-content .wp-block-table,
.entry-content .hv-table-wrapper {
	width: 100%;
	margin: 32px 0;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	border: 1px solid var(--hv-border);
	border-radius: var(--hv-radius-sm);
	box-shadow: var(--hv-shadow-sm);
	scrollbar-width: thin;
	scrollbar-color: var(--hv-accent) var(--hv-bg);
}

.entry-content .wp-block-table::-webkit-scrollbar,
.entry-content .hv-table-wrapper::-webkit-scrollbar {
	height: 8px;
}

.entry-content .wp-block-table::-webkit-scrollbar-track,
.entry-content .hv-table-wrapper::-webkit-scrollbar-track {
	background: var(--hv-bg);
}

.entry-content .wp-block-table::-webkit-scrollbar-thumb,
.entry-content .hv-table-wrapper::-webkit-scrollbar-thumb {
	background: var(--hv-accent);
	border-radius: 4px;
}

.entry-content table {
	width: 100%;
	border-collapse: collapse;
	font-size: 15px;
	line-height: 1.6;
	background: var(--hv-surface);
	margin: 0;
	table-layout: auto;
}

/* Ignore la classe "fixed width" de Gutenberg : colonnes dimensionnées par le contenu */
.entry-content .wp-block-table table.has-fixed-layout,
.entry-content .hv-table-wrapper table.has-fixed-layout {
	table-layout: auto;
}

.entry-content th {
	background: var(--hv-primary);
	color: #ffffff;
	font-weight: 700;
	font-size: 14px;
	padding: 12px 14px;
	text-align: left;
	border: none;
	min-width: 100px;
	overflow-wrap: break-word;
	word-wrap: break-word;
	word-break: normal;
	hyphens: auto;
	vertical-align: top;
}

.entry-content td {
	padding: 12px 14px;
	border-bottom: 1px solid var(--hv-border);
	color: var(--hv-text);
	min-width: 100px;
	overflow-wrap: break-word;
	word-wrap: break-word;
	word-break: normal;
	hyphens: auto;
	vertical-align: top;
}

.entry-content tbody tr:last-child td {
	border-bottom: none;
}

.entry-content tbody tr:nth-child(even) {
	background: #f8fafc;
}

.entry-content tbody tr:hover {
	background: var(--hv-primary-light);
}

/* Mobile : scroll horizontal pour tableaux larges */
@media (max-width: 768px) {
	.entry-content .wp-block-table,
	.entry-content .hv-table-wrapper {
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
	}

	.entry-content table {
		min-width: 600px;
	}

	.entry-content th,
	.entry-content td {
		padding: 10px 12px;
		font-size: 14px;
	}
}

/* ==========================================================================
   BLOCS DE CODE (Gutenberg) AVEC BOUTON COPIER
   ========================================================================== */

.entry-content pre,
.entry-content .wp-block-code {
	position: relative;
	background: #0f172a !important;
	color: #e2e8f0 !important;
	border: 1px solid #1e293b;
	border-radius: var(--hv-radius);
	padding: 26px 20px 20px !important;
	margin: 28px 0;
	overflow-x: auto;
	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
}

.entry-content pre code,
.entry-content .wp-block-code code {
	font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
	font-size: 14px;
	line-height: 1.65;
	color: #f1f5f9;
	background: transparent !important;
	padding: 0;
}

.hv-copy-code-btn {
	position: absolute;
	top: 10px;
	right: 10px;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 5px 12px;
	background: rgba(255, 255, 255, 0.12);
	border: 1px solid rgba(255, 255, 255, 0.25);
	border-radius: 6px;
	color: #ffffff;
	font-size: 12px;
	font-weight: 600;
	cursor: pointer;
	backdrop-filter: blur(6px);
	transition: all 0.2s ease;
	z-index: 5;
}

.hv-copy-code-btn:hover {
	background: rgba(255, 255, 255, 0.22);
	border-color: rgba(255, 255, 255, 0.45);
	transform: translateY(-1px);
}

.hv-copy-code-btn.is-copied {
	background: rgba(5, 150, 105, 0.35);
	border-color: #34d399;
	color: #34d399;
}

/* Éléments injectés (TOC, divulgation, partage, similaires) - s'adaptent à la largeur du contenu */
.single-post .entry-content .hv-affiliate-disclosure,
.single-post .entry-content .hv-toc,
.single-post .entry-content .hv-share,
.single-post .entry-content .hv-related-posts {
	margin-left: 0;
	margin-right: 0;
}

/* Grille articles similaires adaptée à la largeur du single post */
.single-post .entry-content .hv-related-grid {
	grid-template-columns: repeat(2, 1fr);
}

@media (max-width: 600px) {
	.single-post .entry-content .hv-related-grid {
		grid-template-columns: 1fr;
	}
}

/* ==========================================================================
   ADSENSE — CONTENEURS SÛRS
   Les unités sont isolées : largeur fluide, aucun débordement latéral,
   aucun espace réservé quand l'annonce ne peut pas s'afficher (bloqueur,
   refus de consentement, réseau indisponible). Le footer n'est jamais
   poussé ou recouvert par une unité publicitaire.
   ========================================================================== */

.hv-ads,
.hv-ad-region {
	display: block;
	width: 100%;
	max-width: 100%;
	margin: 28px 0;
	padding: 0;
	box-sizing: border-box;
	text-align: center;
	overflow: hidden;
}

.hv-ads-label {
	display: block;
	margin: 0 0 6px;
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--hv-text-light);
	opacity: 0.75;
}

.hv-ads-slot ins.adsbygoogle {
	display: block;
	width: 100%;
	max-width: 100%;
	min-width: 0;
	margin: 0 auto;
}

.hv-ads iframe {
	max-width: 100%;
}

.hv-ads-static-bottom {
	width: 100%;
	max-width: 1200px;
	margin: 36px auto 44px;
	padding-left: 20px;
	padding-right: 20px;
	box-sizing: border-box;
	text-align: center;
	clear: both;
}

/* Annonce après la newsletter de l'accueil. */
.hv-ads-home-newsletter {
	margin-top: 40px;
	margin-bottom: 40px;
}

/* L'unité interne n'ajoute pas de marge dans son conteneur dédié. */
.hv-ads-static-bottom .hv-ads {
	margin-top: 0;
	margin-bottom: 0;
}

/* Annonce après la pagination des archives du blog. */
.hv-ads-archive-bottom {
	margin: 40px auto 8px;
	padding-top: 28px;
	border-top: 1px solid var(--hv-border);
}

/* ==========================================================================
   SCROLL TO TOP
   ========================================================================== */

.hv-scroll-top {
	position: fixed;
	bottom: 28px;
	right: 28px;
	width: 48px;
	height: 48px;
	border-radius: 50%;
	background: var(--hv-primary);
	color: #fff;
	border: none;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: var(--hv-shadow-lg);
	opacity: 0;
	visibility: hidden;
	transform: translateY(12px);
	transition: all 0.3s ease;
	z-index: 999;
}

.hv-scroll-top.is-visible {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

.hv-scroll-top:hover {
	background: var(--hv-primary-dark);
	transform: translateY(-2px);
}

.hv-scroll-top:focus-visible {
	outline: 3px solid var(--hv-accent);
	outline-offset: 2px;
}

@media (max-width: 768px) {
	.hv-scroll-top {
		bottom: 18px;
		right: 18px;
		width: 42px;
		height: 42px;
	}
}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */

@media (max-width: 1024px) {
	.hv-reassurance {
		grid-template-columns: repeat(2, 1fr);
	}
	.hv-related-grid,
	.hv-blog-grid,
	.hv-toolbox-grid,
	.hv-products .hv-products-grid,
	.hv-testimonials,
	.hv-values {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 768px) {
	.hv-about-grid,
	.hv-contact-grid {
		grid-template-columns: 1fr;
	}

	.hv-reassurance,
	.hv-hub,
	.hv-related-grid,
	.hv-blog-grid,
	.hv-toolbox-grid,
	.hv-products .hv-products-grid,
	.hv-testimonials,
	.hv-values {
		grid-template-columns: 1fr;
	}

	body.hv-blog-listing .site-main {
		grid-template-columns: 1fr;
	}

	.hv-hero {
		padding: 60px 0;
	}

	.hv-hero-actions {
		flex-direction: column;
	}

	.hv-hero-actions .hv-btn {
		width: 100%;
	}

	.hv-share {
		justify-content: center;
	}

	.hv-newsletter {
		padding: 40px 24px;
	}

	.hv-newsletter-form {
		flex-direction: column;
	}

	.hv-newsletter-form input[type="email"],
	.hv-newsletter-form button {
		width: 100%;
	}
}

/* ==========================================================================
   17. PRIVACY CHECKBOX
   ========================================================================== */

.hv-privacy-checkbox {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	margin: 14px 0;
	font-size: 14px;
	color: var(--hv-text-light);
	line-height: 1.5;
	cursor: pointer;
}

.hv-privacy-checkbox input[type="checkbox"] {
	flex-shrink: 0;
	width: 18px;
	height: 18px;
	margin-top: 2px;
	accent-color: var(--hv-accent);
	cursor: pointer;
}

.hv-privacy-checkbox a {
	color: var(--hv-accent-dark);
	text-decoration: underline;
}

.hv-privacy-checkbox a:hover {
	color: var(--hv-primary);
}

/* Newsletter form : la checkbox en ligne */
.hv-newsletter-form .hv-privacy-checkbox {
	margin: 10px 0;
	width: 100%;
}

/* ==========================================================================
   18. SIDEBAR WIDGETS (shortcodes)
   ========================================================================== */

.hv-sidebar-widget {
	background: var(--hv-surface);
	border: 1px solid var(--hv-border);
	border-radius: var(--hv-radius);
	padding: 24px;
	margin-bottom: 24px;
	box-shadow: 0 1px 3px rgba(0,0,0,0.04);
}

.hv-sidebar-title {
	font-size: 18px;
	font-weight: 700;
	color: var(--hv-text);
	margin: 0 0 12px;
}

.hv-sidebar-desc {
	font-size: 14px;
	color: var(--hv-text-light);
	margin: 0 0 16px;
	line-height: 1.5;
}

/* Sidebar newsletter */
.hv-sidebar-newsletter .hv-newsletter-form {
	flex-direction: column;
	gap: 10px;
}

.hv-sidebar-newsletter .hv-newsletter-form input[type="email"],
.hv-sidebar-newsletter .hv-newsletter-form button {
	width: 100%;
}

.hv-sidebar-newsletter .hv-newsletter-form button {
	background: var(--hv-accent);
	color: #ffffff;
	font-weight: 700;
	transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease;
}

.hv-sidebar-newsletter .hv-newsletter-form button:hover,
.hv-sidebar-newsletter .hv-newsletter-form button:focus {
	background: var(--hv-accent-dark);
	color: #ffffff;
}

.hv-sidebar-newsletter .hv-privacy-checkbox {
	font-size: 13px;
}

/* Sidebar tools */
.hv-sidebar-tools-list {
	list-style: none;
	padding: 0;
	margin: 0;
}

.hv-sidebar-tool-item {
	padding: 12px 0;
	border-bottom: 1px solid var(--hv-border);
}

.hv-sidebar-tool-item:last-child {
	border-bottom: none;
}

.hv-sidebar-tool-link {
	display: flex;
	flex-direction: column;
	gap: 4px;
	text-decoration: none;
	color: inherit;
	transition: color var(--hv-transition);
}

.hv-sidebar-tool-link:hover {
	color: var(--hv-accent);
}

.hv-sidebar-tool-brand {
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: var(--hv-accent-dark);
}

.hv-sidebar-tool-title {
	font-size: 14px;
	font-weight: 600;
	color: var(--hv-text);
	line-height: 1.4;
}

.hv-sidebar-tool-link:hover .hv-sidebar-tool-title {
	color: var(--hv-accent);
}

.hv-sidebar-tools-more {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin-top: 14px;
	font-size: 13px;
	font-weight: 700;
	color: var(--hv-primary);
}

.hv-sidebar-tools-more:hover,
.hv-sidebar-tools-more:focus {
	color: var(--hv-accent);
	text-decoration: none;
}

/* ==========================================================================
   19. COMMENTAIRES - Single post
   ========================================================================== */

.comments-area {
	max-width: 720px;
	margin: 48px auto 0;
	padding: 32px;
	background: var(--hv-surface);
	border: 1px solid var(--hv-border);
	border-radius: var(--hv-radius);
	box-shadow: var(--hv-shadow-sm);
}

.comments-title,
.comment-reply-title {
	font-size: 22px;
	font-weight: 700;
	color: var(--hv-text);
	margin-bottom: 24px;
	padding-bottom: 14px;
	border-bottom: 2px solid var(--hv-primary-light);
}

.comment-list {
	list-style: none;
	padding: 0;
	margin: 0 0 32px;
}

.comment-list .comment {
	margin-bottom: 24px;
	padding-bottom: 24px;
	border-bottom: 1px solid var(--hv-border);
}

.comment-list .comment:last-child {
	border-bottom: none;
	margin-bottom: 0;
	padding-bottom: 0;
}

.comment-body {
	display: block;
}

.comment-author {
	display: flex;
	align-items: center;
	gap: 12px;
	flex-wrap: wrap;
}

.comment-author .avatar {
	width: 48px;
	height: 48px;
	border-radius: 50%;
	flex-shrink: 0;
}

.comment-author .fn {
	font-weight: 700;
	font-style: normal;
	color: var(--hv-text);
}

.comment-author .says {
	color: var(--hv-text-light);
	font-size: 13px;
}

.comment-metadata {
	font-size: 13px;
	color: var(--hv-text-light);
	margin-bottom: 10px;
}

.comment-metadata a {
	color: var(--hv-text-light);
}

.comment-metadata a:hover {
	color: var(--hv-accent);
}

.comment-content {
	font-size: 15px;
	line-height: 1.7;
	color: var(--hv-text);
}

.comment-content p {
	margin-bottom: 12px;
}

.reply {
	margin-top: 10px;
}

.reply a {
	font-size: 13px;
	font-weight: 600;
	color: var(--hv-accent-dark);
}

.reply a:hover {
	color: var(--hv-primary);
}

/* Formulaire de commentaire */
.comment-form {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.comment-form label {
	display: block;
	font-size: 14px;
	font-weight: 600;
	color: var(--hv-text);
	margin-bottom: 6px;
}

.comment-form input[type="text"],
.comment-form input[type="email"],
.comment-form input[type="url"],
.comment-form textarea {
	width: 100%;
	padding: 12px 16px;
	border: 1px solid var(--hv-border);
	border-radius: var(--hv-radius-sm);
	font-size: 15px;
	font-family: inherit;
	color: var(--hv-text);
	background: var(--hv-bg);
	transition: var(--hv-transition);
}

.comment-form input:focus,
.comment-form textarea:focus {
	outline: none;
	border-color: var(--hv-accent);
	background: var(--hv-surface);
	box-shadow: 0 0 0 3px rgba(8, 145, 178, 0.1);
}

.comment-form textarea {
	min-height: 140px;
	resize: vertical;
}

.comment-form .form-submit {
	margin: 8px 0 0;
}

.comment-form .submit {
	padding: 12px 32px;
	background: var(--hv-primary);
	color: #fff;
	border: none;
	border-radius: var(--hv-radius-sm);
	font-size: 16px;
	font-weight: 600;
	cursor: pointer;
	transition: var(--hv-transition);
}

.comment-form .submit:hover {
	background: var(--hv-primary-dark);
}

.comment-form .comment-notes,
.comment-form .logged-in-as {
	font-size: 13px;
	color: var(--hv-text-light);
}

.comment-form .comment-notes a,
.comment-form .logged-in-as a {
	color: var(--hv-accent-dark);
}

/* Pagination des commentaires */
.comment-navigation {
	margin-top: 24px;
	text-align: center;
}

.comment-navigation .nav-links a,
.comment-navigation .nav-links span {
	padding: 6px 12px;
	margin: 0 2px;
	border-radius: var(--hv-radius-sm);
	font-size: 14px;
}

.comment-navigation .nav-links a {
	color: var(--hv-accent-dark);
	background: var(--hv-primary-light);
}

.comment-navigation .nav-links a:hover {
	background: var(--hv-accent);
	color: #fff;
}

.comment-navigation .nav-links .current {
	background: var(--hv-primary);
	color: #fff;
}

/* ==========================================================================
   20. PAGE 404
   ========================================================================== */

.error404 .site-main {
	padding: 60px 0;
}

.hv-404 {
	max-width: 960px;
	margin: 0 auto;
	text-align: center;
	padding: 48px 32px;
	background: var(--hv-surface);
	border: 1px solid var(--hv-border);
	border-radius: var(--hv-radius);
	box-shadow: var(--hv-shadow);
}

.hv-404-icon {
	width: 80px;
	height: 80px;
	margin: 0 auto 24px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--hv-primary-light);
	border-radius: 50%;
	color: var(--hv-primary);
}

.hv-404 h1 {
	font-size: clamp(28px, 5vw, 40px);
	margin-bottom: 12px;
	color: var(--hv-text);
}

.hv-404-subtitle {
	font-size: 17px;
	color: var(--hv-text-light);
	margin-bottom: 32px;
	line-height: 1.6;
}

.hv-404-actions {
	display: flex;
	gap: 12px;
	justify-content: center;
	flex-wrap: wrap;
	margin-bottom: 48px;
}

.hv-404-actions .hv-btn {
	margin: 0;
}

.hv-404-search {
	max-width: 500px;
	margin: 0 auto 48px;
}

.hv-404-recent {
	text-align: left;
}

.hv-404-recent h2 {
	font-size: 22px;
	margin-bottom: 20px;
	text-align: center;
}

.hv-404-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 20px;
}

.hv-404-card {
	background: var(--hv-bg);
	border: 1px solid var(--hv-border);
	border-radius: var(--hv-radius-sm);
	overflow: hidden;
	transition: var(--hv-transition);
	text-decoration: none;
	display: flex;
	flex-direction: column;
}

.hv-404-card:hover {
	transform: translateY(-3px);
	box-shadow: var(--hv-shadow);
}

.hv-404-card-thumb {
	width: 100%;
	height: 140px;
	object-fit: cover;
}

.hv-404-card-placeholder {
	width: 100%;
	height: 140px;
	background: linear-gradient(135deg, var(--hv-primary-light), var(--hv-bg));
}

.hv-404-card-body {
	padding: 16px;
	flex-grow: 1;
}

.hv-404-card-cat {
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: var(--hv-accent);
	margin-bottom: 6px;
}

.hv-404-card-title {
	font-size: 15px;
	font-weight: 600;
	color: var(--hv-text);
	line-height: 1.4;
}

.hv-404-card:hover .hv-404-card-title {
	color: var(--hv-primary);
}

@media (max-width: 600px) {
	.hv-404-grid {
		grid-template-columns: 1fr;
	}
	.hv-404-actions {
		flex-direction: column;
	}
	.hv-404-actions .hv-btn {
		width: 100%;
	}
}

@media (max-width: 768px) {
	.comments-area {
		padding: 24px 18px;
	}
}

/* ==========================================================================
   21. FORMULAIRE DE RECHERCHE (général)
   ========================================================================== */

.search-form {
	display: flex;
	gap: 10px;
}

.search-form label {
	flex: 1;
	margin: 0;
}

.search-form .search-field {
	width: 100%;
	padding: 12px 16px;
	border: 1px solid var(--hv-border);
	border-radius: var(--hv-radius-sm);
	font-size: 16px;
	font-family: inherit;
	color: var(--hv-text);
	background: var(--hv-surface);
	transition: var(--hv-transition);
}

.search-form .search-field:focus {
	outline: none;
	border-color: var(--hv-accent);
	box-shadow: 0 0 0 3px rgba(8, 145, 178, 0.1);
}

.search-form .search-submit {
	padding: 12px 24px;
	background: var(--hv-primary);
	color: #fff;
	border: none;
	border-radius: var(--hv-radius-sm);
	font-size: 15px;
	font-weight: 600;
	cursor: pointer;
	transition: var(--hv-transition);
	white-space: nowrap;
}

.search-form .search-submit:hover {
	background: var(--hv-primary-dark);
}

/* ==========================================================================
   22. REFONTE DIGIPROUNIC — ACCUEIL, SERVICES & PAGES ÉDITORIALES
   ========================================================================== */

/* --- Coque pleine largeur, sans `100vw` ---------------------------------- */
/*
 * Ancienne technique : `width:100vw` + marges négatives. Elle provoquait des
 * débordements latéraux (barre de défilement, contenu coupé) et un rendu
 * instable sur tablette. On utilise désormais une largeur fluide `100%` :
 * la page occupe toute la largeur et chaque section centre son contenu avec
 * `.hv-container`. Aucun débordement n'est possible.
 */
body.hv-home-page,
body.hv-services-page,
body.hv-about-page,
body.hv-contact-page,
body.hv-privacy-page,
body.hv-terms-page,
body.hv-cgv-page,
body.hv-toolbox-page {
	/* `clip` évite de créer un conteneur de scroll qui casserait le header sticky. */
	overflow-x: hidden;
	overflow-x: clip;
}

body.hv-home-page #page,
body.hv-services-page #page,
body.hv-about-page #page,
body.hv-contact-page #page,
body.hv-privacy-page #page,
body.hv-terms-page #page,
body.hv-cgv-page #page,
body.hv-toolbox-page #page {
	width: 100%;
	max-width: 100%;
	margin-left: 0;
	margin-right: 0;
	padding-left: 0;
	padding-right: 0;
}

body.hv-home-page #content,
body.hv-home-page #primary.content-area,
body.hv-home-page .site-main,
body.hv-services-page #content,
body.hv-services-page #primary.content-area,
body.hv-services-page .site-main,
body.hv-about-page #content,
body.hv-about-page #primary.content-area,
body.hv-about-page .site-main,
body.hv-contact-page #content,
body.hv-contact-page #primary.content-area,
body.hv-contact-page .site-main,
body.hv-privacy-page #content,
body.hv-privacy-page #primary.content-area,
body.hv-privacy-page .site-main,
body.hv-terms-page #content,
body.hv-terms-page #primary.content-area,
body.hv-terms-page .site-main,
body.hv-cgv-page #content,
body.hv-cgv-page #primary.content-area,
body.hv-cgv-page .site-main,
body.hv-toolbox-page #content,
body.hv-toolbox-page #primary.content-area,
body.hv-toolbox-page .site-main {
	width: 100%;
	max-width: 100%;
	margin-left: 0;
	margin-right: 0;
	padding-left: 0;
	padding-right: 0;
}

body.hv-home-page .hv-home-hero,
body.hv-home-page .hv-newsletter-band,
body.hv-services-page .hv-services-hero,
body.hv-services-page .hv-services-cta {
	box-sizing: border-box;
}

body.hv-home-page .site-main > .hv-home-hero,
body.hv-home-page .site-main > .hv-newsletter-band,
body.hv-services-page .site-main > .hv-services-hero,
body.hv-services-page .site-main > .hv-services-cta {
	position: relative;
	width: 100%;
	max-width: 100%;
	margin-left: 0;
	margin-right: 0;
}

/* --- Kicker -------------------------------------------------------------- */
.hv-kicker {
	display: inline-block;
	font-size: 12px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.14em;
	color: var(--hv-accent-dark);
	margin-bottom: 10px;
}

.hv-kicker-light {
	color: #67e8f9;
}

/* ==========================================================================
   ACCUEIL — HERO
   ========================================================================== */

.hv-home-hero {
	background:
		radial-gradient(circle at 82% 12%, rgba(8, 145, 178, 0.32), transparent 42%),
		radial-gradient(circle at 12% 92%, rgba(5, 150, 105, 0.18), transparent 45%),
		linear-gradient(135deg, #071e2b 0%, #0a3d54 55%, #0d4f6b 100%);
	color: #e6f4f8;
	padding: 72px 0 0;
	overflow: hidden;
}

.hv-home-hero-bg {
	position: absolute;
	inset: 0;
	overflow: hidden;
	pointer-events: none;
}

.hv-home-orb {
	position: absolute;
	border-radius: 50%;
	filter: blur(6px);
	opacity: 0.55;
}

.hv-home-orb-1 {
	width: 520px;
	height: 520px;
	top: -220px;
	right: -140px;
	background: radial-gradient(circle, rgba(34, 211, 238, 0.5), transparent 66%);
}

.hv-home-orb-2 {
	width: 420px;
	height: 420px;
	bottom: -220px;
	left: -160px;
	background: radial-gradient(circle, rgba(16, 185, 129, 0.35), transparent 68%);
}

.hv-home-orb-3 {
	width: 260px;
	height: 260px;
	top: 40%;
	left: 46%;
	background: radial-gradient(circle, rgba(125, 211, 252, 0.2), transparent 70%);
}

.hv-home-grid-lines {
	position: absolute;
	inset: 0;
	background-image:
		linear-gradient(rgba(255, 255, 255, 0.045) 1px, transparent 1px),
		linear-gradient(90deg, rgba(255, 255, 255, 0.045) 1px, transparent 1px);
	background-size: 56px 56px;
	-webkit-mask-image: radial-gradient(circle at 60% 30%, #000 0%, transparent 72%);
	mask-image: radial-gradient(circle at 60% 30%, #000 0%, transparent 72%);
}

.hv-home-hero-grid {
	position: relative;
	z-index: 1;
	display: grid;
	grid-template-columns: 1.08fr 0.92fr;
	gap: 56px;
	align-items: center;
	padding-bottom: 52px;
}

.hv-home-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	padding: 7px 14px;
	border: 1px solid rgba(255, 255, 255, 0.18);
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.07);
	font-size: 11.5px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.13em;
	color: #a5f3fc;
}

.hv-home-dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: #22d3ee;
	box-shadow: 0 0 0 4px rgba(34, 211, 238, 0.18);
	animation: hv-dot-pulse 2.4s ease-in-out infinite;
}

.hv-home-title {
	font-size: clamp(2.1rem, 4.6vw, 3.55rem);
	line-height: 1.07;
	letter-spacing: -0.02em;
	color: #ffffff;
	margin: 22px 0 18px;
}

.hv-home-title-accent {
	display: block;
	background: linear-gradient(90deg, #22d3ee 0%, #7dd3fc 55%, #a7f3d0 100%);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	color: transparent;
}

.hv-home-lead {
	max-width: 550px;
	font-size: 1.03rem;
	line-height: 1.8;
	color: rgba(230, 244, 248, 0.78);
	margin: 0;
}

.hv-home-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
	margin-top: 30px;
}

.hv-home-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 9px;
	padding: 14px 26px;
	border: 1px solid transparent;
	border-radius: 12px;
	font-size: 15px;
	font-weight: 700;
	line-height: 1.2;
	text-decoration: none;
	cursor: pointer;
	transition: var(--hv-transition);
}

.hv-home-btn-primary {
	background: linear-gradient(135deg, #0891b2, #0e7490);
	color: #ffffff;
	box-shadow: 0 12px 28px rgba(8, 145, 178, 0.35);
}

.hv-home-btn-primary:hover,
.hv-home-btn-primary:focus {
	background: linear-gradient(135deg, #0ea5c6, #0b5f77);
	color: #ffffff;
	text-decoration: none;
	transform: translateY(-2px);
	box-shadow: 0 16px 34px rgba(8, 145, 178, 0.45);
}

.hv-home-btn-ghost {
	background: rgba(255, 255, 255, 0.06);
	border-color: rgba(255, 255, 255, 0.28);
	color: #e6f4f8;
}

.hv-home-btn-ghost:hover,
.hv-home-btn-ghost:focus {
	background: rgba(255, 255, 255, 0.13);
	border-color: rgba(255, 255, 255, 0.55);
	color: #ffffff;
	text-decoration: none;
	transform: translateY(-2px);
}

.hv-home-trust {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 20px;
	list-style: none;
	padding: 0;
	margin: 28px 0 0;
	font-size: 13px;
	color: rgba(230, 244, 248, 0.72);
}

.hv-home-trust li {
	display: inline-flex;
	align-items: center;
	gap: 7px;
}

.hv-home-trust li::before {
	content: "✓";
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 18px;
	height: 18px;
	border-radius: 50%;
	background: rgba(52, 211, 153, 0.16);
	color: #34d399;
	font-size: 11px;
	font-weight: 800;
}

/* Fenêtre visuelle */
.hv-home-visual {
	position: relative;
	min-height: 400px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.hv-home-window {
	width: 100%;
	max-width: 460px;
	background: #082532;
	border: 1px solid rgba(255, 255, 255, 0.14);
	border-radius: 16px;
	overflow: hidden;
	box-shadow: 0 30px 70px rgba(0, 0, 0, 0.45);
}

.hv-home-window-bar {
	display: flex;
	align-items: center;
	gap: 6px;
	padding: 12px 16px;
	background: rgba(255, 255, 255, 0.05);
	border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.hv-home-window-bar > span:not(.hv-home-window-url) {
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.22);
}

.hv-home-window-bar > span:nth-child(1) { background: #f87171; }
.hv-home-window-bar > span:nth-child(2) { background: #fbbf24; }
.hv-home-window-bar > span:nth-child(3) { background: #34d399; }

.hv-home-window-url {
	margin-left: 8px;
	padding: 3px 12px;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.06);
	font-size: 11px;
	color: rgba(255, 255, 255, 0.68);
	letter-spacing: 0.02em;
}

.hv-home-window-body {
	padding: 24px;
}

.hv-home-window-head {
	display: flex;
	align-items: center;
	gap: 11px;
}

.hv-home-window-mark {
	width: 38px;
	height: 38px;
	border-radius: 10px;
	background: linear-gradient(135deg, #22d3ee, #0e7490);
	color: #ffffff;
	font-size: 19px;
	font-weight: 800;
	display: flex;
	align-items: center;
	justify-content: center;
}

.hv-home-window-brand {
	display: flex;
	flex-direction: column;
	font-size: 15px;
	font-weight: 700;
	color: #ffffff;
	line-height: 1.25;
}

.hv-home-window-brand small {
	font-size: 9.5px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.13em;
	color: rgba(255, 255, 255, 0.5);
}

.hv-home-window-kicker {
	margin: 22px 0 0;
	font-size: 10.5px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.15em;
	color: #67e8f9;
}

.hv-home-window-title {
	margin: 6px 0 16px;
	font-size: 20px;
	line-height: 1.38;
	font-weight: 700;
	color: #ffffff;
}

.hv-home-window-tags {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}

.hv-home-window-tags span {
	padding: 4px 10px;
	border-radius: 999px;
	border: 1px solid rgba(34, 211, 238, 0.26);
	background: rgba(8, 145, 178, 0.16);
	font-size: 11px;
	font-weight: 600;
	color: #a5f3fc;
}

.hv-home-code {
	margin-top: 18px;
	padding: 14px 16px;
	border-radius: 10px;
	border: 1px solid rgba(255, 255, 255, 0.08);
	background: rgba(0, 0, 0, 0.3);
	font-family: Consolas, "SFMono-Regular", Menlo, monospace;
	font-size: 12px;
	line-height: 1.75;
	color: #cbd5e1;
}

.hv-code-key { color: #f472b6; }
.hv-code-var { color: #7dd3fc; }
.hv-code-indent { padding-left: 16px; }

.hv-home-float {
	position: absolute;
	display: flex;
	flex-direction: column;
	gap: 2px;
	padding: 12px 16px;
	border-radius: 12px;
	background: rgba(255, 255, 255, 0.97);
	box-shadow: 0 18px 40px rgba(0, 0, 0, 0.28);
}

.hv-home-float strong {
	font-size: 18px;
	line-height: 1.1;
	color: var(--hv-primary);
}

.hv-home-float span {
	font-size: 10.5px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--hv-text-light);
}

.hv-home-float-1 {
	bottom: -18px;
	left: -14px;
	animation: hv-float-bob 5s ease-in-out infinite;
}

.hv-home-float-2 {
	top: 6px;
	right: -12px;
	animation: hv-float-bob 6.5s ease-in-out infinite reverse;
}

/* Statistiques */
.hv-home-stats {
	position: relative;
	z-index: 1;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 16px;
	margin: 8px 0 44px;
	padding: 22px 28px;
	border-radius: 16px;
	border: 1px solid rgba(255, 255, 255, 0.14);
	background: rgba(255, 255, 255, 0.055);
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
}

.hv-home-stat {
	text-align: center;
	padding: 4px 8px;
}

.hv-home-stat + .hv-home-stat {
	border-left: 1px solid rgba(255, 255, 255, 0.12);
}

.hv-home-stat strong {
	display: block;
	font-size: 28px;
	line-height: 1.15;
	color: #ffffff;
}

.hv-home-stat span {
	display: block;
	margin-top: 4px;
	font-size: 11px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	color: rgba(230, 244, 248, 0.6);
}

/* ==========================================================================
   ACCUEIL — POURQUOI DIGIPROUNIC
   ========================================================================== */

.hv-why {
	padding: 80px 0;
}

.hv-why-content {
	min-width: 0;
}

.hv-why-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 0;
}

.hv-brand-panel {
	position: relative;
	overflow: hidden;
	padding: 34px;
	border-radius: 20px;
	color: #ffffff;
	background:
		radial-gradient(circle at 88% 8%, rgba(34, 211, 238, 0.32), transparent 46%),
		linear-gradient(160deg, #0d4f6b 0%, #083344 100%);
	box-shadow: var(--hv-shadow-lg);
	min-height: 350px;
}

.hv-brand-panel-head {
	display: flex;
	align-items: center;
	gap: 12px;
}

.hv-brand-panel-mark {
	width: 44px;
	height: 44px;
	border-radius: 12px;
	background: linear-gradient(135deg, #22d3ee, #0e7490);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 22px;
	font-weight: 800;
	color: #ffffff;
}

.hv-brand-panel-name {
	display: flex;
	flex-direction: column;
	font-size: 17px;
	font-weight: 700;
	line-height: 1.25;
}

.hv-brand-panel-name small {
	font-size: 9.5px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.14em;
	color: rgba(255, 255, 255, 0.52);
}

.hv-brand-panel-quote {
	margin: 30px 0 22px;
	font-size: 20px;
	line-height: 1.5;
	font-weight: 500;
	color: #e6f4f8;
}

.hv-brand-panel-tags {
	display: flex;
	flex-wrap: wrap;
	gap: 7px;
}

.hv-brand-panel-tags span {
	padding: 5px 12px;
	border-radius: 999px;
	border: 1px solid rgba(255, 255, 255, 0.18);
	background: rgba(255, 255, 255, 0.07);
	font-size: 11.5px;
	font-weight: 600;
	color: #cffafe;
}

.hv-brand-panel-lines {
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin-top: 30px;
}

.hv-brand-panel-lines span {
	height: 6px;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.16);
}

.hv-brand-panel-lines span:nth-child(1) { width: 82%; }
.hv-brand-panel-lines span:nth-child(2) { width: 58%; }
.hv-brand-panel-lines span:nth-child(3) { width: 38%; }

.hv-brand-chip {
	position: absolute;
	padding: 10px 16px;
	border-radius: 999px;
	background: #ffffff;
	color: var(--hv-primary);
	font-size: 12.5px;
	font-weight: 700;
	box-shadow: 0 14px 32px rgba(15, 23, 42, 0.18);
	white-space: nowrap;
}

.hv-brand-chip-1 {
	top: -14px;
	left: -10px;
}

.hv-brand-chip-2 {
	right: -10px;
	bottom: 26px;
}

.hv-why-title {
	font-size: clamp(26px, 3.6vw, 36px);
	line-height: 1.18;
	margin: 0 0 14px;
	letter-spacing: -0.01em;
}

.hv-why-lead {
	font-size: 16.5px;
	line-height: 1.75;
	color: var(--hv-text-light);
	margin: 0;
	max-width: 560px;
}

.hv-why-list {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 22px 26px;
	margin-top: 32px;
}

.hv-why-item {
	display: flex;
	gap: 13px;
	align-items: flex-start;
}

.hv-why-icon {
	flex-shrink: 0;
	width: 42px;
	height: 42px;
	border-radius: 11px;
	background: var(--hv-primary-light);
	color: var(--hv-primary);
	display: flex;
	align-items: center;
	justify-content: center;
}

.hv-why-item h3 {
	font-size: 15.5px;
	margin: 2px 0 4px;
}

.hv-why-item p {
	font-size: 14px;
	line-height: 1.65;
	color: var(--hv-text-light);
	margin: 0;
}

/* ==========================================================================
   ACCUEIL — BLOG & NEWSLETTER
   ========================================================================== */

.hv-blog-thumb-fallback {
	width: 100%;
	height: 100%;
	background:
		radial-gradient(circle at 28% 18%, rgba(8, 145, 178, 0.32), transparent 55%),
		linear-gradient(135deg, var(--hv-primary-light) 0%, #cffafe 55%, #e0f2fe 100%);
}

.hv-blog-empty {
	grid-column: 1 / -1;
	text-align: center;
	padding: 40px 20px;
	color: var(--hv-text-light);
}

.hv-section-actions {
	text-align: center;
	margin-top: 38px;
}

.hv-newsletter-band {
	background:
		radial-gradient(circle at 15% 20%, rgba(34, 211, 238, 0.28), transparent 42%),
		radial-gradient(circle at 85% 80%, rgba(16, 185, 129, 0.18), transparent 45%),
		linear-gradient(120deg, #071e2b 0%, #0a3d54 60%, #0d4f6b 100%);
	color: #ffffff;
	padding: 64px 0;
	overflow: hidden;
}

.hv-newsletter-band-glow {
	position: absolute;
	inset: 0;
	pointer-events: none;
	background-image:
		linear-gradient(rgba(255, 255, 255, 0.04) 1px, transparent 1px),
		linear-gradient(90deg, rgba(255, 255, 255, 0.04) 1px, transparent 1px);
	background-size: 48px 48px;
	-webkit-mask-image: radial-gradient(circle at 70% 40%, #000, transparent 75%);
	mask-image: radial-gradient(circle at 70% 40%, #000, transparent 75%);
}

.hv-newsletter-band-grid {
	position: relative;
	z-index: 1;
	display: grid;
	grid-template-columns: 1.05fr 0.95fr;
	gap: 48px;
	align-items: center;
}

.hv-newsletter-band-copy h2 {
	color: #ffffff;
	font-size: clamp(24px, 3.4vw, 34px);
	line-height: 1.2;
	margin: 0 0 12px;
}

.hv-newsletter-band-copy p {
	color: rgba(230, 244, 248, 0.75);
	font-size: 15.5px;
	line-height: 1.7;
	margin: 0;
	max-width: 520px;
}

.hv-newsletter-band-form-wrap {
	max-width: 480px;
	width: 100%;
}

.hv-newsletter-band .hv-newsletter-band-form {
	display: block;
	max-width: none;
	margin: 0;
}

.hv-newsletter-band-field {
	display: flex;
	gap: 6px;
	padding: 6px;
	border-radius: 14px;
	background: #ffffff;
	box-shadow: 0 18px 40px rgba(0, 0, 0, 0.25);
}

.hv-newsletter-band .hv-newsletter-band-field input[type="email"] {
	flex: 1;
	min-width: 0;
	padding: 12px 14px;
	border: none;
	border-radius: 9px;
	font-size: 15px;
	color: var(--hv-text);
	background: transparent;
}

.hv-newsletter-band .hv-newsletter-band-field input[type="email"]:focus {
	outline: none;
	box-shadow: 0 0 0 3px rgba(8, 145, 178, 0.18);
}

.hv-newsletter-band .hv-newsletter-band-field button {
	flex-shrink: 0;
	padding: 12px 22px;
	border: none;
	border-radius: 9px;
	background: linear-gradient(135deg, #0891b2, #0e7490);
	color: #ffffff;
	font-size: 14.5px;
	font-weight: 700;
	cursor: pointer;
	transition: var(--hv-transition);
}

.hv-newsletter-band .hv-newsletter-band-field button:hover {
	background: linear-gradient(135deg, #0ea5c6, #0b5f77);
}

.hv-newsletter-band .hv-privacy-checkbox {
	color: rgba(230, 244, 248, 0.62);
	font-size: 12.5px;
	margin: 12px 0 0;
}

.hv-newsletter-band .hv-privacy-checkbox a {
	color: #a5f3fc;
}

.hv-newsletter-band .hv-privacy-checkbox a:hover {
	color: #ffffff;
}

.hv-newsletter-band .hv-form-message {
	font-size: 13px;
}

.hv-newsletter-band .hv-form-message.is-success { color: #a7f3d0; }
.hv-newsletter-band .hv-form-message.is-error { color: #fecaca; }
.hv-newsletter-band .hv-form-message.is-info { color: #bae6fd; }

.hv-newsletter-band-note {
	margin: 12px 0 0;
	font-size: 12px;
	color: rgba(230, 244, 248, 0.5);
}

/* ==========================================================================
   PAGE SERVICES
   ========================================================================== */

.hv-services-hero {
	background:
		radial-gradient(circle at 82% 10%, rgba(34, 211, 238, 0.3), transparent 44%),
		linear-gradient(135deg, #071e2b 0%, #0a3d54 58%, #0d4f6b 100%);
	color: #e6f4f8;
	padding: 72px 0 64px;
	overflow: hidden;
}

.hv-services-hero-bg {
	position: absolute;
	inset: 0;
	pointer-events: none;
	background-image:
		linear-gradient(rgba(255, 255, 255, 0.04) 1px, transparent 1px),
		linear-gradient(90deg, rgba(255, 255, 255, 0.04) 1px, transparent 1px);
	background-size: 52px 52px;
	-webkit-mask-image: radial-gradient(circle at 50% 40%, #000, transparent 74%);
	mask-image: radial-gradient(circle at 50% 40%, #000, transparent 74%);
}

.hv-services-hero-inner {
	position: relative;
	z-index: 1;
	text-align: left;
}

.hv-services-title {
	font-size: clamp(2rem, 4.2vw, 3.1rem);
	line-height: 1.12;
	letter-spacing: -0.02em;
	color: #ffffff;
	margin: 20px auto 16px;
	max-width: 900px;
}

.hv-services-lead {
	max-width: 720px;
	margin: 0 auto;
	font-size: 16.5px;
	line-height: 1.75;
	color: rgba(230, 244, 248, 0.76);
}

.hv-services-actions {
	justify-content: center;
	margin-top: 28px;
}

.hv-services-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 24px;
}

.hv-service-card {
	position: relative;
	display: flex;
	flex-direction: column;
	padding: 30px;
	background: var(--hv-surface);
	border: 1px solid var(--hv-border);
	border-radius: 18px;
	box-shadow: var(--hv-shadow-sm);
	transition: var(--hv-transition);
}

.hv-service-card:hover {
	transform: translateY(-5px);
	border-color: rgba(8, 145, 178, 0.45);
	box-shadow: var(--hv-shadow);
}

.hv-service-icon {
	width: 54px;
	height: 54px;
	border-radius: 14px;
	background: var(--hv-primary-light);
	color: var(--hv-accent-dark);
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 18px;
}

.hv-service-title {
	font-size: 19px;
	margin: 0 0 9px;
}

.hv-service-desc {
	font-size: 14.5px;
	line-height: 1.68;
	color: var(--hv-text-light);
	margin: 0 0 18px;
}

.hv-service-list {
	list-style: none;
	padding: 16px 0 0;
	margin: auto 0 0;
	border-top: 1px solid var(--hv-border);
	display: grid;
	gap: 7px;
}

.hv-service-list li {
	position: relative;
	padding-left: 22px;
	font-size: 13.5px;
	font-weight: 500;
	color: var(--hv-text);
}

.hv-service-list li::before {
	content: "✓";
	position: absolute;
	left: 0;
	top: 0;
	color: var(--hv-success);
	font-weight: 800;
}

.hv-services-cta {
	background: linear-gradient(120deg, #0d4f6b 0%, #0e7490 100%);
	color: #ffffff;
	padding: 52px 0;
	overflow: hidden;
}

.hv-services-cta-inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 32px;
}

.hv-services-cta h2 {
	color: #ffffff;
	font-size: clamp(23px, 3vw, 30px);
	margin: 0 0 8px;
}

.hv-services-cta p {
	color: rgba(255, 255, 255, 0.82);
	margin: 0;
	max-width: 620px;
	line-height: 1.7;
}

.hv-services-cta .hv-home-btn {
	flex-shrink: 0;
	background: #ffffff;
	color: var(--hv-primary);
	box-shadow: 0 14px 30px rgba(0, 0, 0, 0.2);
}

.hv-services-cta .hv-home-btn:hover,
.hv-services-cta .hv-home-btn:focus {
	background: var(--hv-primary-light);
	color: var(--hv-primary-dark);
}

/* Méthode */
.hv-method-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 20px;
	list-style: none;
	padding: 0;
	margin: 0;
}

.hv-method-step {
	position: relative;
	padding: 26px;
	background: var(--hv-surface);
	border: 1px solid var(--hv-border);
	border-radius: 16px;
	box-shadow: var(--hv-shadow-sm);
	transition: var(--hv-transition);
}

.hv-section-alt .hv-method-step {
	background: var(--hv-bg);
}

.hv-method-step:hover {
	transform: translateY(-3px);
	box-shadow: var(--hv-shadow);
}

.hv-method-number {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	margin-bottom: 14px;
	border-radius: 10px;
	background: linear-gradient(135deg, #0891b2, #0e7490);
	color: #ffffff;
	font-size: 13px;
	font-weight: 800;
	letter-spacing: 0.04em;
}

.hv-method-step h3 {
	font-size: 17px;
	margin: 0 0 7px;
}

.hv-method-step p {
	font-size: 14px;
	line-height: 1.65;
	color: var(--hv-text-light);
	margin: 0;
}

.hv-method-grid-3 {
	margin-bottom: 0;
}

/* Témoignages */
.hv-testimonials-section .hv-testimonials-6 {
	gap: 22px;
}

.hv-testimonials-6 .hv-testimonial-card {
	display: flex;
	flex-direction: column;
}

.hv-testimonials-6 .hv-testimonial-author {
	margin-top: auto;
}

/* ==========================================================================
   PAGES LÉGALES
   ========================================================================== */

.hv-legal-hero {
	padding: 58px 0 50px;
	text-align: left;
	background:
		radial-gradient(circle at 80% 0%, rgba(8, 145, 178, 0.16), transparent 48%),
		linear-gradient(135deg, var(--hv-primary-light) 0%, #e0f2fe 100%);
	border-bottom: 1px solid var(--hv-border);
}

.hv-legal-hero h1 {
	font-size: clamp(28px, 4vw, 40px);
	margin: 16px 0 12px;
}

.hv-legal-hero p {
	max-width: 720px;
	margin: 0;
	font-size: 16.5px;
	line-height: 1.75;
	color: var(--hv-text-light);
}

.hv-legal-intro {
	font-size: 17px;
	line-height: 1.75;
	color: var(--hv-text-light);
	margin-bottom: 8px;
}

.hv-legal .hv-blog-badge {
	margin-bottom: 12px;
}

/* ==========================================================================
   PAGE À PROPOS
   ========================================================================== */

.hv-about-mission-visual {
	position: relative;
}

.hv-about-mission-visual .hv-brand-panel {
	min-height: 330px;
}

.hv-about-mission-text h2 {
	font-size: clamp(25px, 3.4vw, 33px);
	line-height: 1.2;
	margin: 0 0 16px;
}

.hv-about-mission-text p {
	font-size: 15.5px;
	line-height: 1.8;
	color: var(--hv-text-light);
	margin: 0 0 14px;
}

.hv-about-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin-top: 24px;
}

.hv-values-3 {
	padding: 0;
}

.hv-about-note {
	margin-top: 34px;
	padding: 18px 22px;
	border-radius: 10px;
	border-left: 4px solid var(--hv-warning);
	background: #fffbeb;
	color: #78350f;
	font-size: 14px;
	line-height: 1.7;
}

.hv-about-note strong {
	color: #92400e;
}

/* ==========================================================================
   PAGE CONTACT
   ========================================================================== */

.hv-contact-hero {
	padding: 58px 0 50px;
	text-align: left;
	background:
		radial-gradient(circle at 18% 0%, rgba(8, 145, 178, 0.15), transparent 46%),
		linear-gradient(135deg, var(--hv-primary-light) 0%, #e0f2fe 100%);
	border-bottom: 1px solid var(--hv-border);
}

.hv-contact-hero h1 {
	font-size: clamp(28px, 4vw, 40px);
	margin: 16px 0 12px;
}

.hv-contact-hero p {
	max-width: 720px;
	margin: 0;
	font-size: 16.5px;
	line-height: 1.75;
	color: var(--hv-text-light);
}

.hv-contact-form-wrap {
	padding: 36px;
	background: var(--hv-surface);
	border: 1px solid var(--hv-border);
	border-radius: 16px;
	box-shadow: var(--hv-shadow);
}

.hv-contact-form-wrap h2 {
	font-size: 24px;
	margin: 0 0 8px;
}

.hv-contact-form-wrap > p {
	color: var(--hv-text-light);
	font-size: 14.5px;
	line-height: 1.7;
	margin: 0 0 22px;
}

/* ==========================================================================
   PAGE TOOLBOX
   ========================================================================== */

.hv-toolbox-note {
	padding: 20px 24px;
	background: var(--hv-primary-light);
	border: 1px solid rgba(8, 145, 178, 0.22);
	border-radius: 12px;
	text-align: center;
}

.hv-toolbox-note p {
	margin: 0;
	font-size: 14.5px;
	line-height: 1.7;
	color: var(--hv-primary-dark);
}

.hv-toolbox-note a {
	font-weight: 700;
	text-decoration: underline;
}

/* ==========================================================================
   ANIMATIONS
   ========================================================================== */

@keyframes hv-dot-pulse {
	0%, 100% {
		box-shadow: 0 0 0 4px rgba(34, 211, 238, 0.18);
		opacity: 1;
	}
	50% {
		box-shadow: 0 0 0 8px rgba(34, 211, 238, 0.05);
		opacity: 0.75;
	}
}

@keyframes hv-float-bob {
	0%, 100% { transform: translateY(0); }
	50% { transform: translateY(-9px); }
}

@media (prefers-reduced-motion: reduce) {
	.hv-home-dot,
	.hv-home-float-1,
	.hv-home-float-2 {
		animation: none;
	}
}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */

@media (max-width: 1024px) {
	.hv-home-hero-grid {
		gap: 36px;
	}

	.hv-why-grid {
		grid-template-columns: 1fr;
		gap: 44px;
	}

	.hv-why-list {
		grid-template-columns: repeat(2, 1fr);
	}

	.hv-services-grid,
	.hv-method-grid {
		grid-template-columns: repeat(2, 1fr);
	}

	.hv-values-3 {
		grid-template-columns: repeat(3, 1fr);
	}
}

@media (max-width: 900px) {
	.hv-home-hero {
		padding-top: 56px;
	}

	.hv-home-hero-grid {
		grid-template-columns: 1fr;
		gap: 48px;
		padding-bottom: 40px;
	}

	.hv-home-hero-copy {
		text-align: center;
	}

	.hv-home-lead {
		margin-left: auto;
		margin-right: auto;
	}

	.hv-home-actions,
	.hv-home-trust {
		justify-content: center;
	}

	.hv-home-visual {
		min-height: 0;
		max-width: 500px;
		margin: 0 auto;
		width: 100%;
	}

	.hv-home-float-1 { left: 0; }
	.hv-home-float-2 { right: 0; }

	.hv-newsletter-band-grid {
		grid-template-columns: 1fr;
		gap: 28px;
		text-align: center;
	}

	.hv-newsletter-band-copy p {
		margin-left: auto;
		margin-right: auto;
	}

	.hv-newsletter-band-form-wrap {
		margin: 0 auto;
	}

	.hv-newsletter-band .hv-privacy-checkbox {
		justify-content: center;
		text-align: left;
	}

	.hv-services-cta-inner {
		flex-direction: column;
		text-align: center;
	}

	.hv-services-cta p {
		margin-left: auto;
		margin-right: auto;
	}

	.hv-about-grid {
		grid-template-columns: 1fr;
		gap: 36px;
		padding: 44px 0;
	}

	.hv-about-mission-visual {
		max-width: 560px;
	}

	.hv-contact-grid {
		grid-template-columns: 1fr;
		gap: 28px;
	}

	.hv-values-3 {
		grid-template-columns: 1fr;
	}
}

@media (max-width: 768px) {
	.hv-home-stats {
		grid-template-columns: 1fr;
		gap: 12px;
		padding: 20px;
	}

	.hv-home-stat + .hv-home-stat {
		border-left: none;
		border-top: 1px solid rgba(255, 255, 255, 0.12);
		padding-top: 14px;
	}

	.hv-why {
		padding: 56px 0;
	}

	.hv-why-list {
		grid-template-columns: 1fr;
	}

	.hv-newsletter-band {
		padding: 48px 0;
	}

	.hv-services-hero {
		padding: 56px 0 48px;
	}

	.hv-services-grid,
	.hv-method-grid {
		grid-template-columns: 1fr;
	}

	.hv-testimonials-6 {
		grid-template-columns: 1fr !important;
	}

	.hv-contact-form-wrap {
		padding: 26px;
	}
}

@media (max-width: 560px) {
	.hv-home-hero {
		padding-top: 44px;
	}

	.hv-home-actions {
		flex-direction: column;
		align-items: stretch;
	}

	.hv-home-btn {
		width: 100%;
	}

	.hv-home-trust {
		justify-content: flex-start;
		gap: 8px 14px;
	}

	.hv-home-window-body {
		padding: 20px;
	}

	.hv-home-float {
		padding: 10px 13px;
	}

	.hv-home-float-1 { bottom: -12px; left: -6px; }
	.hv-home-float-2 { top: 2px; right: -6px; }

	.hv-brand-panel {
		padding: 26px;
	}

	.hv-brand-chip-1 { left: 6px; }
	.hv-brand-chip-2 { right: 6px; bottom: 16px; }

	.hv-newsletter-band-field {
		flex-direction: column;
		gap: 8px;
	}

	.hv-newsletter-band .hv-newsletter-band-field button {
		width: 100%;
	}

	.hv-newsletter-band .hv-privacy-checkbox {
		text-align: center;
	}

	.hv-legal-hero,
	.hv-contact-hero {
		padding: 42px 0 36px;
	}

	.hv-contact-info,
	.hv-contact-form-wrap {
		padding: 24px;
	}
}

/* ==========================================================================
   EN-TÊTES DE PAGES ÉDITORIALES & LÉGALES — PLEINE LARGEUR
   Motif bleu clair commun : À propos, Contact, Confidentialité, CGU, Toolbox.
   Le blog réutilise le même bandeau avant la grille d'articles.
   ========================================================================== */

body.hv-about-page,
body.hv-contact-page,
body.hv-privacy-page,
body.hv-terms-page,
body.hv-toolbox-page,
body.hv-blog-listing {
	/* `clip` évite de créer un conteneur de scroll qui casserait le header sticky. */
	overflow-x: hidden;
	overflow-x: clip;
}

/* Bandeaux éditoriaux : ils restent dans le flux à 100 % de leur parent.
   Aucune marge négative, donc aucun débordement latéral. */
body.hv-about-page .site-main > .hv-about-hero,
body.hv-contact-page .site-main > .hv-contact-hero,
body.hv-privacy-page .site-main > .hv-legal-hero,
body.hv-terms-page .site-main > .hv-legal-hero,
body.hv-toolbox-page .site-main > .hv-toolbox-header,
body.hv-blog-listing .hv-blog-page-intro {
	position: relative;
	box-sizing: border-box;
	width: 100%;
	max-width: 100%;
	margin-left: 0;
	margin-right: 0;
	text-align: left;
	background:
		radial-gradient(circle at 18% 0%, rgba(8, 145, 178, 0.15), transparent 46%),
		linear-gradient(135deg, var(--hv-primary-light) 0%, #e0f2fe 100%);
	border: 0;
	border-bottom: 1px solid var(--hv-border);
	border-radius: 0;
	box-shadow: none;
}

/* Les sections avec conteneur interne gardent 20px de respiration via .hv-container. */
body.hv-about-page .site-main > .hv-about-hero,
body.hv-contact-page .site-main > .hv-contact-hero,
body.hv-privacy-page .site-main > .hv-legal-hero,
body.hv-terms-page .site-main > .hv-legal-hero,
body.hv-toolbox-page .site-main > .hv-toolbox-header {
	padding: 64px 0 56px;
}

body.hv-blog-listing .hv-blog-page-intro {
	padding: 56px 24px 48px;
	margin: 0 0 8px;
}

/* Blog avec sidebar : le bandeau reste dans la colonne de contenu. */
body.hv-blog-listing.right-sidebar .hv-blog-page-intro,
body.hv-blog-listing.left-sidebar .hv-blog-page-intro,
body.hv-blog-listing.both-sidebars .hv-blog-page-intro,
body.hv-blog-listing.both-left .hv-blog-page-intro,
body.hv-blog-listing.both-right .hv-blog-page-intro {
	width: 100%;
	max-width: 100%;
	margin-left: 0;
	margin-right: 0;
}

/* Typographie homogène des bandeaux. */
body.hv-about-page .hv-about-hero h1,
body.hv-contact-page .hv-contact-hero h1,
body.hv-privacy-page .hv-legal-hero h1,
body.hv-terms-page .hv-legal-hero h1,
body.hv-toolbox-page .hv-toolbox-header h1,
body.hv-blog-listing .hv-blog-page-title {
	font-size: clamp(28px, 4vw, 40px);
	line-height: 1.2;
	margin: 16px 0 12px;
}

body.hv-about-page .hv-about-hero p,
body.hv-contact-page .hv-contact-hero p,
body.hv-privacy-page .hv-legal-hero p,
body.hv-terms-page .hv-legal-hero p,
body.hv-toolbox-page .hv-toolbox-header p,
body.hv-blog-listing .hv-blog-page-desc {
	max-width: 720px;
	margin: 0;
	font-size: 16.5px;
	line-height: 1.75;
	color: var(--hv-text-light);
}

body.hv-blog-listing .hv-blog-page-title {
	color: var(--hv-text);
}

/* Éviter que les paddings de #primary décalent le fond pleine largeur. */
body.hv-about-page #primary.content-area,
body.hv-contact-page #primary.content-area,
body.hv-privacy-page #primary.content-area,
body.hv-terms-page #primary.content-area,
body.hv-toolbox-page #primary.content-area {
	width: 100%;
	max-width: 100%;
	padding-left: 0;
	padding-right: 0;
}

/* Le contenu éditorial reste centré et lisible sous le bandeau. */
body.hv-terms-page .hv-legal,
body.hv-privacy-page .hv-legal {
	padding-top: 40px;
}

@media (max-width: 768px) {
	body.hv-about-page .site-main > .hv-about-hero,
	body.hv-contact-page .site-main > .hv-contact-hero,
	body.hv-privacy-page .site-main > .hv-legal-hero,
	body.hv-terms-page .site-main > .hv-legal-hero,
	body.hv-toolbox-page .site-main > .hv-toolbox-header {
		padding: 48px 0 42px;
	}

	body.hv-blog-listing .hv-blog-page-intro {
		padding: 48px 18px 42px;
	}
}

@media (max-width: 560px) {
	body.hv-about-page .site-main > .hv-about-hero,
	body.hv-contact-page .site-main > .hv-contact-hero,
	body.hv-privacy-page .site-main > .hv-legal-hero,
	body.hv-terms-page .site-main > .hv-legal-hero,
	body.hv-toolbox-page .site-main > .hv-toolbox-header {
		padding: 44px 0 38px;
	}

	body.hv-blog-listing .hv-blog-page-intro {
		padding: 44px 18px 38px;
	}
}

/* ==========================================================================
   COMPOSANTS 2.0 — CONSENTEMENT, FIL D'ARIANE, ACCESSIBILITÉ
   Cette section complète les styles existants sans les remplacer.
   ========================================================================== */

/*
 * L'attribut HTML `hidden` doit toujours l'emporter sur les display:flex/grid.
 * Il est utilisé par le bandeau cookies, les filtres Toolbox et le sommaire.
 */
[hidden] {
	display: none !important;
}

/* Lien d'évitement et contenu réservé aux lecteurs d'écran. */
.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.screen-reader-text:focus {
	position: static !important;
	width: auto;
	height: auto;
	margin: 0;
	padding: 12px 18px;
	overflow: visible;
	clip: auto;
	background: var(--hv-surface);
	color: var(--hv-primary);
	border-radius: var(--hv-radius-sm);
	box-shadow: var(--hv-shadow);
	z-index: 100000;
}

/* Focus visible homogène sur tout le site. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
	outline: 3px solid var(--hv-accent);
	outline-offset: 2px;
}

/* --------------------------------------------------------------------------
   FIL D'ARIANE
   ------------------------------------------------------------------------ */

.hv-breadcrumbs {
	margin: 0;
	padding: 16px 0 0;
	font-size: 13px;
	color: var(--hv-text-light);
}

.hv-breadcrumbs ol {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.hv-breadcrumbs li {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin: 0;
	line-height: 1.5;
}

.hv-breadcrumbs li + li::before {
	content: "/";
	color: #94a3b8;
}

.hv-breadcrumbs a {
	color: var(--hv-text-light);
	text-decoration: none;
}

.hv-breadcrumbs a:hover {
	color: var(--hv-primary);
	text-decoration: underline;
}

.hv-breadcrumbs [aria-current="page"] {
	color: var(--hv-text);
	font-weight: 600;
}

body.hv-home-page .hv-breadcrumbs,
body.hv-error-page .hv-breadcrumbs {
	display: none;
}

/* --------------------------------------------------------------------------
   BANDEAU COOKIES (RGPD)
   ------------------------------------------------------------------------ */

.hv-consent {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 99999;
	padding: 18px;
	background: rgba(15, 23, 42, 0.92);
	backdrop-filter: blur(10px);
	border-top: 1px solid rgba(255, 255, 255, 0.14);
	color: #f8fafc;
	box-shadow: 0 -12px 32px rgba(15, 23, 42, 0.28);
}

/*
 * Tant que le bandeau est affiché, on réserve sa hauteur réelle (mesurée
 * par theme.js) pour que le footer reste visible et cliquable au-dessus.
 */
body.hv-consent-visible {
	padding-bottom: calc(var(--hv-consent-offset, 0px) + 16px);
}

.hv-consent-inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	max-width: 1120px;
	margin: 0 auto;
}

.hv-consent-copy {
	max-width: 760px;
}

.hv-consent-title {
	margin: 0 0 6px;
	font-size: 17px;
	line-height: 1.35;
	color: #ffffff;
}

.hv-consent-desc {
	margin: 0;
	font-size: 13.5px;
	line-height: 1.6;
	color: #e2e8f0;
}

.hv-consent-link {
	color: #7dd3fc;
	text-decoration: underline;
	text-underline-offset: 2px;
}

.hv-consent-link:hover {
	color: #bae6fd;
}

.hv-consent-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	flex-shrink: 0;
}

.hv-consent-actions .hv-btn {
	white-space: nowrap;
}

.hv-consent-link-button {
	background: none;
	border: 0;
	padding: 0;
	margin: 0;
	color: inherit;
	font: inherit;
	text-decoration: underline;
	text-underline-offset: 2px;
	cursor: pointer;
}

.hv-consent-link-button:hover {
	color: var(--hv-accent);
}

/* Sans JavaScript, le bandeau ne peut pas enregistrer de choix : on le masque. */
.no-js .hv-consent {
	display: none !important;
}

/* --------------------------------------------------------------------------
   ADSENSE — AUCUNE ANNONCE SANS CONSENTEMENT
   ------------------------------------------------------------------------ */

body:not(.hv-consent-granted) .hv-ads,
body:not(.hv-consent-granted) .hv-ad-region {
	display: none !important;
}

/*
 * Aucun `min-height` imposé : si l'annonce ne se charge pas (bloqueur,
 * réseau, absence d'inventaire), aucun bloc vide ne déforme la page.
 * Google réserve lui-même la hauteur utile lorsqu'une unité s'affiche.
 */

/* --------------------------------------------------------------------------
   SOMMAIRE — OUVERTURE ET SECTION ACTIVE
   ------------------------------------------------------------------------ */

.hv-toc-toggle[aria-expanded="true"] + .hv-toc-list,
.hv-toc-list:not([hidden]) {
	display: block;
}

.hv-toc-item a.is-active {
	color: var(--hv-primary);
	font-weight: 700;
	text-decoration: none;
}

.hv-toc-item a.is-active::before {
	content: "";
	display: inline-block;
	width: 4px;
	height: 4px;
	margin-right: 6px;
	border-radius: 50%;
	background: var(--hv-accent);
	vertical-align: middle;
}

/* --------------------------------------------------------------------------
   FORMULAIRES — ÉTATS ET ERREURS
   ------------------------------------------------------------------------ */

.hv-form-message.is-loading {
	color: var(--hv-text-light);
}

.hv-contact-form input.is-invalid,
.hv-contact-form textarea.is-invalid,
.hv-newsletter-form input.is-invalid {
	border-color: var(--hv-danger) !important;
	box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.15);
}

.hv-form-message.is-error {
	color: var(--hv-danger);
}

.hv-newsletter-band .hv-form-message.is-error {
	color: #fecaca;
}

.hv-inline-required {
	color: var(--hv-danger);
}

.hv-contact-detail-value a {
	color: #ffffff;
	text-decoration: underline;
	text-underline-offset: 2px;
}

.hv-contact-detail-value a:hover {
	color: var(--hv-primary-light);
}

/* --------------------------------------------------------------------------
   TOOLBOX — FILTRES
   ------------------------------------------------------------------------ */

.hv-filter-btn[aria-pressed="true"] {
	background: var(--hv-primary);
	border-color: var(--hv-primary);
	color: #ffffff;
}

.hv-toolbox-count {
	margin: 14px 0 0;
	font-size: 13px;
	color: var(--hv-text-light);
}

.hv-tool-card[hidden] {
	display: none !important;
}

/* --------------------------------------------------------------------------
   UTILITAIRES DE MISE EN PAGE
   ------------------------------------------------------------------------ */

.hv-text-center {
	text-align: center;
}

.hv-mb-28 {
	margin-bottom: 28px;
}

.hv-actions-inline {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 12px;
}

.hv-actions-inline .hv-btn {
	margin: 0;
}

/* --------------------------------------------------------------------------
   ANIMATIONS — RESPECT DE LA PRÉFÉRENCE SYSTÈME
   ------------------------------------------------------------------------ */

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}

/* --------------------------------------------------------------------------
   RESPONSIVE — BANDEAU COOKIES
   ------------------------------------------------------------------------ */

@media (max-width: 782px) {
	.hv-consent {
		padding: 14px;
	}

	.hv-consent-inner {
		flex-direction: column;
		align-items: stretch;
		gap: 14px;
	}

	.hv-consent-actions {
		justify-content: stretch;
	}

	.hv-consent-actions .hv-btn {
		flex: 1 1 auto;
	}
}

@media (max-width: 480px) {
	.hv-breadcrumbs {
		font-size: 12px;
	}

	.hv-consent-title {
		font-size: 15px;
	}

	.hv-consent-desc {
		font-size: 12.5px;
	}
}

/* ==========================================================================
   STABILISATION 2027 — MISE EN PAGE FLUIDE & SIDEBAR
   Objectif : aucune section ne déborde, tout reste lisible et aligné sur
   desktop, tablette et mobile. Interdiction des 100vw et marges négatives.
   En-têtes/héros/bandeaux alignés à gauche ; seuls les CTA centrés.
   Grilles fluides auto-fit + minmax(min(100%, …)) : aucune carte ne déborde.
   ========================================================================== */

/* --- 1. Grilles fluides -------------------------------------------------- */
/*
 * `minmax(min(100%, 300px), 1fr)` garantit qu'une carte ne peut jamais
 * dépasser la largeur disponible. Fini les colonnes fixes qui débordent.
 * Interdiction stricte de 100vw/marges négatives pour éviter toute fuite horizontale.
 */
html,
body {
	max-width: 100%;
	overflow-x: hidden;
}

#page,
#content,
.content-area,
.site-main,
.site-content {
	width: 100%;
	max-width: 100%;
	box-sizing: border-box;
}

.hv-container {
	width: 100%;
	max-width: 1200px;
	margin-left: auto;
	margin-right: auto;
	padding-left: clamp(16px, 4vw, 20px);
	padding-right: clamp(16px, 4vw, 20px);
	box-sizing: border-box;
}

.hv-hub,
.hv-blog-grid,
.hv-testimonials,
.hv-values,
.hv-toolbox-grid,
.hv-services-grid,
.hv-method-grid,
.hv-related-grid {
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
	gap: clamp(16px, 2.2vw, 24px);
}

/* Archives Blog / Catégorie / Tag : grille type "Derniers guides" fluide */
body.hv-blog-listing .site-main {
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
	gap: clamp(18px, 2.4vw, 26px);
	align-items: stretch;
}

body.hv-blog-listing .site-main > article {
	width: 100%;
	max-width: 100%;
	box-sizing: border-box;
}

body.hv-blog-listing .site-main > article .hv-card-actions {
	margin-top: auto;
}

/* Alignement : en-têtes/héros/bandeaux à gauche ; seuls les CTA centrés */
.hv-section-header,
.hv-page-header,
.hv-hero,
.hv-newsletter-band,
.hv-blog-hero,
.hv-legal-hero {
	text-align: left;
}

.hv-section-header .hv-section-actions,
.hv-hero .hv-hero-actions,
.hv-newsletter-band .hv-newsletter-actions {
	justify-content: flex-start;
}

.hv-cta-center,
.text-center .hv-btn,
.is-centered .hv-btn {
	text-align: center;
	justify-content: center;
}

/* Les grilles de 4 éléments courts gardent leurs 4 colonnes sur desktop. */
.hv-reassurance,
.hv-products .hv-products-grid {
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
	gap: clamp(16px, 2vw, 24px);
}

.hv-about-grid,
.hv-contact-grid {
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr));
	gap: clamp(24px, 3.4vw, 44px);
}

.hv-home-hero-grid,
.hv-newsletter-band-grid {
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr));
	gap: clamp(28px, 4vw, 52px);
}

/* Une grille ne doit jamais être plus large que son conteneur. */
.site-main {
	min-width: 0;
}

.hv-section,
.hv-container,
.hv-home-hero,
.hv-services-hero,
.hv-newsletter-band,
.hv-services-cta {
	min-width: 0;
}

/* --- 2. Bandeaux et en-têtes alignés à gauche ---------------------------- */
/*
 * La page est pleine largeur : on rend au header et au footer la même
 * gouttière que `.hv-container` pour que tout soit aligné au pixel.
 */
body.hv-home-page .inside-header,
body.hv-services-page .inside-header,
body.hv-about-page .inside-header,
body.hv-contact-page .inside-header,
body.hv-privacy-page .inside-header,
body.hv-terms-page .inside-header,
body.hv-cgv-page .inside-header,
body.hv-toolbox-page .inside-header {
	width: 100%;
	max-width: 1200px;
	margin-left: auto;
	margin-right: auto;
	padding-left: 20px;
	padding-right: 20px;
	box-sizing: border-box;
}

.hv-home-hero-grid,
.hv-services-hero-inner,
.hv-blog-page-intro,
.hv-about-hero,
.hv-contact-hero,
.hv-legal-hero,
.hv-toolbox-header {
	text-align: left;
}

.hv-services-actions,
.hv-home-actions {
	justify-content: flex-start;
}

.hv-actions-inline,
.hv-cta-wrapper,
.hv-services-cta .hv-actions-inline {
	justify-content: center;
	text-align: center;
}

.hv-services-cta-inner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
}

/* --- 3. Publicités & Sidebar : jamais de débordement ni de footer masqué -- */
.hv-ads,
.hv-ad-region {
	max-width: 100%;
	width: 100%;
	margin-left: auto;
	margin-right: auto;
	box-sizing: border-box;
	overflow: hidden;
}

/* Sidebar colonne latérale droite (GeneratePress)
 * On ne touche pas à la largeur : GeneratePress gère la répartition
 * contenu / sidebar. On sécurise seulement les widgets et les images.
 */
.sidebar .widget,
.widget-area .widget {
	max-width: 100%;
	box-sizing: border-box;
}

.sidebar .widget img,
.widget-area .widget img {
	max-width: 100%;
	height: auto;
}

/* Le conteneur « après le contenu » garde la largeur du site (1200 px). */
.hv-ads-static-bottom {
	width: 100%;
	max-width: 1200px;
	margin-left: auto;
	margin-right: auto;
	box-sizing: border-box;
}

body.hv-blog-listing .site-main > .hv-ads-static-bottom,
body.hv-blog-listing .site-main > .hv-ads-archive-bottom {
	grid-column: 1 / -1;
}

/* --- 4. Footer : toujours visible et lisible ---------------------------- */
.site-footer,
#footer-widgets {
	background: #0a2230;
	color: #cbd5e1;
}

#footer-widgets h1,
#footer-widgets h2,
#footer-widgets h3,
#footer-widgets h4,
#footer-widgets h5,
#footer-widgets h6,
#footer-widgets .widget-title {
	color: #ffffff;
}

#footer-widgets a {
	color: #7dd3fc;
}

#footer-widgets a:hover,
#footer-widgets a:focus {
	color: #ffffff;
}

.site-footer .site-info,
.site-footer .site-info a {
	color: #cbd5e1;
}

.site-footer .site-info a {
	color: #7dd3fc;
}

/* --- 5. Contenus longs et médias ---------------------------------------- */
/*
 * Attention : ne jamais imposer de hauteur ou de ratio aux iframes du
 * contenu, car les unités AdSense injectées dans l'article en font partie.
 * WordPress gère déjà les embeds responsives via `.wp-embed-responsive`.
 */
.entry-content img,
.entry-content video,
.entry-content embed,
.entry-content object,
.hv-legal img {
	max-width: 100%;
}

.entry-content pre,
.hv-legal pre {
	max-width: 100%;
	overflow-x: auto;
}

.hv-legal {
	text-align: left;
}

/* --- 6. Rythme vertical responsive -------------------------------------- */
@media (max-width: 768px) {
	.hv-section,
	.hv-why {
		padding: 44px 0;
	}

	.hv-section-header {
		margin-bottom: 26px;
	}

	.hv-ads,
	.hv-ad-region {
		margin: 22px 0;
	}

	.hv-ads-static-bottom {
		margin: 28px auto;
		padding-left: 16px;
		padding-right: 16px;
	}

	.site-info {
		padding: 18px 16px;
	}
}

@media (max-width: 480px) {
	.hv-container {
		padding-left: 16px;
		padding-right: 16px;
	}

	.hv-home-hero,
	.hv-services-hero {
		padding-top: 48px;
	}

	.hv-home-title {
		font-size: clamp(1.85rem, 8.5vw, 2.6rem);
	}

	.hv-home-actions,
	.hv-services-actions {
		flex-direction: column;
		align-items: stretch;
	}

	.hv-home-actions .hv-home-btn,
	.hv-services-actions .hv-home-btn {
		width: 100%;
		justify-content: center;
	}
}

/* ==========================================================================
   BLOG 2027 — ARCHIVES, ARTICLES SIMILAIRES & DIVULGATION
   Couche finale volontairement placée en fin de fichier : elle modernise
   les cartes d'archives (Blog, catégorie, étiquette, auteur, date) et les
   articles similaires sans modifier les templates de GeneratePress.
   Tout est fluide : aucune largeur fixe, aucun débordement horizontal.
   ========================================================================== */

/* --- 1. Grille des archives --------------------------------------------- */
body.hv-blog-listing .site-main {
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 310px), 1fr));
	gap: 28px;
	align-items: stretch;
}

/*
 * Gouttière de 40 px entre la grille d'archives et la sidebar droite.
 * La sidebar conserve sa largeur et sa position : c'est #primary qui se
 * rétrécit de 40 px, ce qui reproduit l'espace visuel du single post.
 * Le minmax est abaissé à 270 px dans la media query 1024 px pour
 * conserver deux colonnes de cartes malgré ces 40 px en moins.
 */
@media (min-width: 769px) {
	body.hv-blog-listing.right-sidebar #primary {
		width: calc(70% - 40px);
	}

	body.hv-blog-listing.right-sidebar #right-sidebar {
		margin-left: auto;
	}
}

body.hv-blog-listing .site-main > article {
	border: 1px solid var(--hv-border);
	border-radius: 16px;
	background: var(--hv-surface);
	box-shadow: var(--hv-shadow-sm);
	transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}

body.hv-blog-listing .site-main > article:hover {
	transform: translateY(-4px);
	box-shadow: var(--hv-shadow-lg);
	border-color: #cbd5e1;
}

body.hv-blog-listing .site-main > article:focus-within {
	outline: 3px solid rgba(8, 145, 178, 0.35);
	outline-offset: 3px;
}

/* --- 2. Visuel de carte -------------------------------------------------- */
body.hv-blog-listing .site-main > article .post-image {
	position: relative;
	aspect-ratio: 16 / 10;
	overflow: hidden;
	background: linear-gradient(135deg, var(--hv-primary-light), #e0f2fe);
}

body.hv-blog-listing .site-main > article .post-image img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* --- 3. Contenu de carte ------------------------------------------------- */
body.hv-blog-listing .site-main > article .entry-header {
	padding: 22px 24px 0;
}

body.hv-blog-listing .site-main > article .entry-title {
	font-size: clamp(19px, 1.5vw, 22px);
	line-height: 1.35;
	letter-spacing: -0.01em;
	margin: 0 0 8px;
}

body.hv-blog-listing .site-main > article .entry-title a {
	color: var(--hv-text);
	text-decoration: none;
}

body.hv-blog-listing .site-main > article .entry-title a:hover {
	color: var(--hv-primary);
}

body.hv-blog-listing .site-main > article .entry-meta {
	display: flex;
	flex-wrap: wrap;
	gap: 4px 14px;
	margin: 0;
	font-size: 12.5px;
	color: var(--hv-text-light);
}

body.hv-blog-listing .site-main > article .entry-meta a {
	color: var(--hv-text-light);
	text-decoration: none;
}

body.hv-blog-listing .site-main > article .entry-meta a:hover {
	color: var(--hv-primary);
	text-decoration: underline;
}

body.hv-blog-listing .site-main > article .entry-summary {
	display: flex;
	flex-direction: column;
	gap: 10px;
	padding: 10px 24px 14px;
	flex-grow: 1;
}

body.hv-blog-listing .site-main > article .entry-summary p {
	margin: 0;
	font-size: 14px;
	line-height: 1.6;
	color: var(--hv-text-light);
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;
	overflow: hidden;
}

body.hv-blog-listing .site-main > article .entry-content {
	padding: 12px 24px 0;
	font-size: 15px;
	line-height: 1.65;
	color: var(--hv-text-light);
	flex-grow: 1;
}

body.hv-blog-listing .site-main > article .entry-content > *:first-child {
	margin-top: 0;
}

/* Badge de catégorie affiché au-dessus du titre. */
.hv-card-cat {
	display: inline-flex;
	align-items: center;
	align-self: flex-start;
	gap: 6px;
	margin: 0 0 10px;
	padding: 4px 12px;
	background: var(--hv-primary-light);
	color: var(--hv-accent-dark);
	border-radius: 999px;
	font-size: 11px;
	font-weight: 800;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	text-decoration: none;
	transition: background 0.2s ease, color 0.2s ease;
}

.hv-card-cat:hover,
.hv-card-cat:focus {
	background: var(--hv-accent);
	color: #ffffff;
	text-decoration: none;
}

/* --- 4. Bouton « Lire l'article » --------------------------------------- */
body.hv-blog-listing .site-main > article .hv-card-actions {
	margin-top: auto;
	padding: 0 24px 18px;
}

body.hv-blog-listing .site-main > article .hv-card-cta {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 10px 18px;
	background: var(--hv-primary);
	color: #ffffff;
	border-radius: 999px;
	font-size: 14px;
	font-weight: 700;
	text-decoration: none;
	transition: background 0.2s ease, transform 0.2s ease;
}

body.hv-blog-listing .site-main > article .hv-card-cta:hover {
	background: var(--hv-accent-dark);
	color: #ffffff;
	transform: translateX(2px);
	text-decoration: none;
}

body.hv-blog-listing .site-main > article .hv-card-cta-arrow {
	font-size: 15px;
	transition: transform 0.2s ease;
}

body.hv-blog-listing .site-main > article .hv-card-cta:hover .hv-card-cta-arrow {
	transform: translateX(2px);
}

/* Un seul appel à l'action : le bouton personnalisé remplace le lien GP. */
body.hv-blog-listing .site-main > article .read-more-container,
body.hv-blog-listing .site-main > article .read-more {
	display: none;
}

/* --- 5. En-têtes d'archives --------------------------------------------- */
body.hv-blog-listing .site-main > .page-header,
body.search.hv-blog-listing .site-main > .page-header {
	position: relative;
	overflow: hidden;
	margin: 0 0 6px;
	padding: 34px 34px 30px;
	text-align: left;
	background:
		radial-gradient(circle at 15% 0%, rgba(8, 145, 178, 0.16), transparent 46%),
		linear-gradient(135deg, #f0f9ff 0%, #ffffff 72%);
	border: 1px solid var(--hv-border);
	border-radius: 18px;
	box-shadow: var(--hv-shadow-sm);
}

body.hv-blog-listing .site-main > .page-header::before,
body.search.hv-blog-listing .site-main > .page-header::before {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	width: 5px;
	background: linear-gradient(180deg, var(--hv-accent), var(--hv-primary));
}

body.hv-blog-listing .site-main > .page-header .page-title,
body.search.hv-blog-listing .site-main > .page-header .page-title {
	margin: 0 0 8px;
	font-size: clamp(26px, 3.4vw, 38px);
	font-weight: 800;
	line-height: 1.2;
	letter-spacing: -0.02em;
	color: var(--hv-text);
}

body.hv-blog-listing .site-main > .page-header .taxonomy-description,
body.search.hv-blog-listing .site-main > .page-header .taxonomy-description {
	max-width: 760px;
	margin: 0;
	font-size: 15.5px;
	line-height: 1.65;
	color: var(--hv-text-light);
}

body.hv-blog-listing .site-main > .page-header .taxonomy-description p:last-child {
	margin-bottom: 0;
}

.hv-archive-count {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin: 14px 0 0;
	padding: 6px 14px;
	background: #ecfeff;
	color: #155e75;
	border: 1px solid #a5f3fc;
	border-radius: 999px;
	font-size: 12.5px;
	font-weight: 700;
	letter-spacing: 0.02em;
}

/* Pagination lisible et centrée sous la grille. */
body.hv-blog-listing .site-main > .paging-navigation,
body.hv-blog-listing .site-main > .navigation {
	grid-column: 1 / -1;
	margin-top: 12px;
}

body.hv-blog-listing .site-main .nav-links {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 8px;
}

body.hv-blog-listing .site-main .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 38px;
	min-height: 38px;
	padding: 0 10px;
	border: 1px solid var(--hv-border);
	border-radius: 10px;
	background: var(--hv-surface);
	color: var(--hv-text);
	font-weight: 600;
	text-decoration: none;
}

body.hv-blog-listing .site-main .page-numbers.current {
	background: var(--hv-primary);
	border-color: var(--hv-primary);
	color: #ffffff;
}

body.hv-blog-listing .site-main .page-numbers:hover {
	border-color: var(--hv-accent);
	color: var(--hv-primary);
	text-decoration: none;
}

/* --- 6. Articles similaires --------------------------------------------- */
.single-post .entry-content .hv-related-posts {
	margin: 36px 0 8px;
	padding-top: 8px;
}

.hv-related-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 10px 16px;
	margin-bottom: 14px;
	padding-bottom: 10px;
	border-bottom: 1px solid var(--hv-border);
}

.hv-related-title {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	margin: 0;
	padding: 0;
	border: 0;
	font-size: clamp(18px, 2vw, 22px);
	font-weight: 800;
	line-height: 1.25;
	letter-spacing: -0.02em;
	color: var(--hv-text);
}

.hv-related-title::before {
	content: "";
	flex: 0 0 auto;
	width: 5px;
	height: 22px;
	border-radius: 999px;
	background: linear-gradient(180deg, var(--hv-accent), var(--hv-primary));
}

.hv-related-all {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 13px;
	font-weight: 700;
	color: var(--hv-accent-dark);
	text-decoration: none;
}

.hv-related-all:hover {
	color: var(--hv-primary);
	text-decoration: underline;
}

.hv-related-grid,
.single-post .entry-content .hv-related-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr));
	gap: 16px;
	align-items: stretch;
}

.hv-related-card {
	display: flex;
	flex-direction: column;
	height: 100%;
	background: var(--hv-surface);
	border: 1px solid var(--hv-border);
	border-radius: 14px;
	overflow: hidden;
	box-shadow: var(--hv-shadow-sm);
	transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}

.hv-related-card:hover {
	transform: translateY(-3px);
	box-shadow: var(--hv-shadow-lg);
	border-color: #cbd5e1;
}

.hv-related-thumb {
	position: relative;
	display: block;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	background: var(--hv-bg);
}

.hv-related-thumb-placeholder {
	display: block;
	width: 100%;
	height: 100%;
	background:
		radial-gradient(circle at 30% 20%, rgba(8, 145, 178, 0.35), transparent 55%),
		linear-gradient(135deg, var(--hv-primary-light), #e0f2fe);
}

.hv-related-body {
	display: flex;
	flex-direction: column;
	gap: 6px;
	flex-grow: 1;
	padding: 12px 14px 14px;
}

.hv-related-cat {
	align-self: flex-start;
	margin: 0;
	padding: 3px 9px;
	background: var(--hv-primary-light);
	color: var(--hv-accent-dark);
	border-radius: 999px;
	font-size: 10px;
	font-weight: 800;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	text-decoration: none;
}

.hv-related-cat:hover {
	background: var(--hv-accent);
	color: #ffffff;
	text-decoration: none;
}

.hv-related-post-title {
	margin: 0;
	font-size: 14px;
	line-height: 1.32;
}

.hv-related-excerpt {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	overflow: hidden;
	margin: 0;
	font-size: 12.5px;
	line-height: 1.55;
	color: var(--hv-text-light);
}

.hv-related-footer {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: auto;
	padding-top: 8px;
}

.hv-related-date {
	font-size: 11.5px;
	color: var(--hv-text-light);
}

.hv-related-more {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	font-size: 12.5px;
	font-weight: 700;
	color: var(--hv-accent-dark);
	text-decoration: none;
	transition: color 0.2s ease, gap 0.2s ease;
}

.hv-related-more:hover {
	gap: 9px;
	color: var(--hv-primary);
	text-decoration: none;
}

/* Le lien « Lire l'article » des cartes reste lisible par les lecteurs d'écran. */
.hv-related-more .screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* --- 7. Titre single + taxonomies/navigation ---------------------------- */
.single-post .entry-header h1,
.single-post .entry-title {
	font-size: clamp(28px, 4vw, 42px);
	line-height: 1.12;
	letter-spacing: -0.02em;
}

/* Catégories, étiquettes et navigation précédent/suivant juste avant le partage. */
.hv-single-taxnav {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px 18px;
	margin: 28px 0 0;
	font-size: 14px;
}

.hv-single-taxnav .cat-links,
.hv-single-taxnav .tags-links {
	display: inline;
	margin: 0;
}

/* Icône par défaut de GeneratePress (dossier / étiquettes), même gabarit. */
.hv-single-taxnav .hv-meta-icon {
	display: inline-flex;
	align-items: center;
	margin-right: 0.5em;
	opacity: 0.7;
	vertical-align: middle;
}

.hv-single-taxnav .hv-meta-icon svg {
	position: relative;
	top: 0.125em;
	width: 1em;
	height: 1em;
	fill: currentColor;
}

.hv-single-taxnav a {
	text-decoration: none;
}

.hv-single-taxnav a:hover {
	text-decoration: underline;
}

.hv-single-post-nav {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 16px;
	margin: 22px 0 0;
	padding-top: 18px;
	border-top: 1px solid var(--hv-border);
}

.hv-single-post-nav .nav-previous,
.hv-single-post-nav .nav-next {
	max-width: 48%;
}

.hv-single-post-nav a {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-weight: 600;
	text-decoration: none;
}

.hv-single-post-nav a:hover {
	text-decoration: underline;
}

@media (max-width: 680px) {
	.hv-single-post-nav .nav-previous,
	.hv-single-post-nav .nav-next {
		max-width: 100%;
	}
}

/* --- 8. Divulgation d'affiliation --------------------------------------- */
.hv-affiliate-disclosure {
	display: flex;
	align-items: flex-start;
	gap: 14px;
	margin: 0 0 26px;
	padding: 16px 18px;
	background: linear-gradient(135deg, #fffbeb 0%, #fef9c3 100%);
	border: 1px solid #fde68a;
	border-left: 5px solid var(--hv-warning);
	border-radius: 12px;
	box-shadow: var(--hv-shadow-sm);
	font-size: 14px;
	line-height: 1.65;
	color: #78350f;
}

.hv-affiliate-disclosure > span {
	min-width: 0;
}

.hv-affiliate-icon {
	flex: 0 0 auto;
	width: 26px;
	height: 26px;
	margin-top: 2px;
	padding: 4px;
	background: rgba(217, 119, 6, 0.14);
	border-radius: 50%;
	color: #b45309;
}

.hv-affiliate-label {
	font-weight: 800;
	color: #92400e;
}

/* --- 8. Accessibilité : focus visible ----------------------------------- */
body.hv-blog-listing .site-main > article a:focus-visible,
.hv-blog-listing .page-numbers:focus-visible,
.hv-related-posts a:focus-visible {
	outline: 3px solid rgba(8, 145, 178, 0.5);
	outline-offset: 3px;
	border-radius: 6px;
}

/* --- 9. Responsive ------------------------------------------------------- */
@media (max-width: 1024px) {
	body.hv-blog-listing .site-main {
		grid-template-columns: repeat(auto-fill, minmax(min(100%, 270px), 1fr));
		gap: 24px;
	}

	body.hv-blog-listing .site-main > .page-header,
	body.search.hv-blog-listing .site-main > .page-header {
		padding: 28px 26px 24px;
	}
}

@media (max-width: 768px) {
	body.hv-blog-listing .site-main {
		grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr));
		gap: 20px;
	}

	.hv-related-grid,
	.single-post .entry-content .hv-related-grid {
		grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
		gap: 18px;
	}

	body.hv-blog-listing .site-main > article .entry-header {
		padding: 18px 20px 0;
	}

	body.hv-blog-listing .site-main > article .entry-summary,
	body.hv-blog-listing .site-main > article .entry-content {
		padding-left: 20px;
		padding-right: 20px;
	}

	body.hv-blog-listing .site-main > article .hv-card-actions {
		padding: 0 20px 20px;
	}
}

@media (max-width: 600px) {
	body.hv-blog-listing .site-main {
		grid-template-columns: 1fr;
	}

	body.hv-blog-listing .site-main > .page-header,
	body.search.hv-blog-listing .site-main > .page-header {
		padding: 24px 20px 22px;
		border-radius: 14px;
	}

	.hv-related-head {
		align-items: flex-start;
		flex-direction: column;
	}

	.hv-related-grid,
	.single-post .entry-content .hv-related-grid {
		grid-template-columns: 1fr;
	}

	.hv-affiliate-disclosure {
		gap: 10px;
		padding: 14px 15px;
		font-size: 13.5px;
	}
}

/* --- 10. Mouvement réduit ------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
	body.hv-blog-listing .site-main > article,
	.hv-related-card,
	.hv-card-cta,
	.hv-card-cta-arrow,
	.hv-related-more {
		transition: none !important;
	}

	body.hv-blog-listing .site-main > article:hover,
	.hv-related-card:hover,
	.hv-card-cta:hover,
	.hv-related-more:hover {
		transform: none !important;
	}
}

/* ==========================================================================
   LOT 2 — ACCESSIBILITÉ & CONTRASTES (correctifs ciblés)
   ========================================================================== */

/*
 * Turnstile applique une opacité de 0,5 au bouton de commentaire tant que la
 * vérification n'est pas terminée : le fond devient #86a7b5 et le contraste
 * tombe à 2,55:1. On neutralise cette opacité : le bouton reste lisible, et le
 * script de Turnstile continue de le désactiver pendant la vérification.
 */
.cf-turnstile-comment {
	opacity: 1 !important;
}

/*
 * Nuage d'étiquettes : les liens héritent d'une taille de police calculée par
 * WordPress et descendent parfois sous 12 px de haut. On garantit une cible
 * tactile d'au moins 26 px sans changer la taille du texte.
 */
.wp-block-tag-cloud {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
}

.wp-block-tag-cloud a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 26px;
	min-height: 26px;
	padding: 1px 7px;
	line-height: 1.4;
}

/* ==========================================================================
   LOT 1 — BANDEAU ANTI-BLOQUEUR (non bloquant)
   ========================================================================== */

.hv-adblock-notice {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 10px 18px;
	margin: 24px 0 0;
	padding: 12px 16px;
	background: var(--hv-surface);
	border: 1px solid var(--hv-border);
	border-left: 3px solid var(--hv-accent);
	border-radius: var(--hv-radius-sm);
	color: var(--hv-text);
	font-size: 14px;
	line-height: 1.5;
}

.hv-adblock-notice[hidden] {
	display: none;
}

.hv-adblock-notice-text {
	margin: 0;
}

.hv-adblock-notice-close {
	flex: none;
	padding: 6px 12px;
	background: transparent;
	border: 1px solid var(--hv-border);
	border-radius: var(--hv-radius-sm);
	color: var(--hv-primary);
	font-size: 13px;
	font-weight: 600;
	line-height: 1.4;
	cursor: pointer;
	transition: var(--hv-transition);
}

.hv-adblock-notice-close:hover,
.hv-adblock-notice-close:focus-visible {
	background: var(--hv-bg);
	border-color: var(--hv-primary);
	color: var(--hv-primary-dark);
}

/* ==========================================================================
   23. SIDEBAR — WIDGETS GUTENBERG EN CARTES AÉRÉES
   Reprise de la section déjà déployée sur la staging, alignée sur le langage
   visuel du blog 2027 : cartes blanches, coins doux, titres courts avec filet
   teal, vignettes carrées, catégories alignées et étiquettes en pastilles.
   Le contenu et l'ordre des widgets restent gérés dans WordPress
   (Apparence → Widgets). Le footer n'est pas concerné.
   ========================================================================== */

/* --- 1. La carte de widget --------------------------------------------- */
.sidebar .widget {
	padding: 24px 22px;
	margin: 0 0 28px;
	background: var(--hv-surface);
	border: 1px solid var(--hv-border);
	border-radius: 14px;
	box-shadow: var(--hv-shadow-sm);
	box-sizing: border-box;
	transition: border-color 0.25s ease, box-shadow 0.25s ease;
}

.sidebar .widget:last-child {
	margin-bottom: 0;
}

/* Survole de carte très discret, comme les cartes du blog. */
.sidebar .widget:hover,
.sidebar .widget:focus-within {
	border-color: #cbd5e1;
	box-shadow: var(--hv-shadow);
}

/* Les shortcodes portaient déjà leur propre carte : pas de cadre dans le cadre. */
.sidebar .widget .hv-sidebar-widget {
	margin: 0;
	padding: 0;
	background: none;
	border: 0;
	border-radius: 0;
	box-shadow: none;
}

/* --- 2. Titres de widgets ---------------------------------------------- */
.sidebar .widget .wp-block-heading,
.sidebar .widget .widget-title,
.sidebar .widget .hv-sidebar-title {
	position: relative;
	margin: 0 0 16px;
	padding: 0 0 12px;
	font-size: 17px;
	font-weight: 700;
	line-height: 1.35;
	color: var(--hv-primary);
	border-bottom: 1px solid var(--hv-border);
}

.sidebar .widget .wp-block-heading::after,
.sidebar .widget .widget-title::after,
.sidebar .widget .hv-sidebar-title::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: -1px;
	width: 34px;
	height: 2px;
	border-radius: 2px;
	background: var(--hv-accent);
}

/* --- 3. Contenu générique ---------------------------------------------- */
.sidebar .widget .wp-block-group > p {
	font-size: 14.5px;
	line-height: 1.7;
	color: var(--hv-text-light);
}

.sidebar .widget .wp-block-group > *:last-child {
	margin-bottom: 0;
}

/* Paragraphes vides laissés par l'éditeur de blocs. */
.sidebar .widget p:empty {
	display: none;
}

.sidebar .widget img,
.sidebar .widget iframe {
	max-width: 100%;
	height: auto;
}

.sidebar .widget .hv-ads {
	margin: 0;
}

/* --- 4. Guides récents : vignette 75 × 75 et titre sur deux lignes ------ */
.sidebar .widget .wp-block-latest-posts {
	margin: 0;
	padding: 0;
	list-style: none;
}

.sidebar .widget .wp-block-latest-posts > li {
	display: flex;
	align-items: center;
	gap: 12px;
	margin: 0;
	padding: 14px 0;
	border-bottom: 1px solid var(--hv-border);
}

.sidebar .widget .wp-block-latest-posts > li:first-child {
	padding-top: 0;
}

.sidebar .widget .wp-block-latest-posts > li:last-child {
	padding-bottom: 0;
	border-bottom: 0;
}

.sidebar .widget .wp-block-latest-posts__featured-image {
	float: none;
	flex: 0 0 75px;
	width: 75px;
	height: 75px;
	margin: 0;
	overflow: hidden;
	border-radius: 8px;
	background: var(--hv-bg);
}

.sidebar .widget .wp-block-latest-posts__featured-image img {
	display: block;
	width: 100%;
	height: 100%;
	max-width: 100%;
	max-height: 100%;
	object-fit: cover;
	border-radius: 0;
	transition: transform 0.3s ease;
}

.sidebar .widget .wp-block-latest-posts > li:hover .wp-block-latest-posts__featured-image img {
	transform: scale(1.05);
}

.sidebar .widget .wp-block-latest-posts__post-title {
	display: block;
	margin-bottom: 4px;
	font-size: 14.5px;
	font-weight: 600;
	line-height: 1.45;
	color: var(--hv-text);
	text-decoration: none;
}

.sidebar .widget .wp-block-latest-posts__post-title:hover,
.sidebar .widget .wp-block-latest-posts__post-title:focus-visible {
	color: var(--hv-accent-dark);
}

.sidebar .widget .wp-block-latest-posts__post-date {
	display: block;
	font-size: 12.5px;
	color: var(--hv-text-light);
}

/* --- 5. Catégories : libellé à gauche, compteur discret à droite -------- */
.sidebar .widget .wp-block-categories {
	margin: 0;
	padding: 0;
	list-style: none;
}

.sidebar .widget .wp-block-categories > li {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
	margin: 0;
	padding: 11px 0;
	font-size: 14.5px;
	color: var(--hv-text-light);
	font-variant-numeric: tabular-nums;
	border-bottom: 1px solid var(--hv-border);
}

.sidebar .widget .wp-block-categories > li:first-child {
	padding-top: 0;
}

.sidebar .widget .wp-block-categories > li:last-child {
	padding-bottom: 0;
	border-bottom: 0;
}

.sidebar .widget .wp-block-categories a {
	font-size: 14.5px;
	font-weight: 500;
	color: var(--hv-text);
	text-decoration: none;
}

.sidebar .widget .wp-block-categories a:hover,
.sidebar .widget .wp-block-categories a:focus-visible {
	color: var(--hv-accent-dark);
	text-decoration: none;
}

/* --- 6. Thématiques : pastilles teal ----------------------------------- */
.sidebar .widget .wp-block-tag-cloud {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0;
	padding: 0;
}

.sidebar .widget .wp-block-tag-cloud a {
	display: inline-block;
	padding: 7px 12px;
	background: var(--hv-primary-light);
	color: var(--hv-primary-dark);
	border-radius: 999px;
	line-height: 1.2;
	text-decoration: none;
	transition: var(--hv-transition);
}

.sidebar .widget .wp-block-tag-cloud a:hover,
.sidebar .widget .wp-block-tag-cloud a:focus-visible {
	background: var(--hv-accent-dark);
	color: #ffffff;
	text-decoration: none;
}

/* --- 7. Responsive ------------------------------------------------------ */
@media (max-width: 1024px) {
	.sidebar .widget {
		padding: 22px 20px;
		margin-bottom: 24px;
	}
}

@media (max-width: 768px) {
	.sidebar .widget {
		padding: 22px 18px;
		margin-bottom: 22px;
	}

	.sidebar .widget .wp-block-heading,
	.sidebar .widget .widget-title,
	.sidebar .widget .hv-sidebar-title {
		font-size: 16.5px;
	}
}

@media (max-width: 560px) {
	.sidebar .widget {
		padding: 20px 16px;
	}
}