/* ==========================================================================
   Single Post Template - HcomZ Blog (Fidèle aux Maquettes)
   ========================================================================== */

.hcomz-single-post {
	background-color: var(--hcomz-bg, #FAF7F0);
	color: #2d3748;
	min-height: 100vh;
}

/* ==========================================================================
   1. Hero Banner Supérieur
   ========================================================================== */
.hcomz-post-hero {
	position: relative;
	background-size: cover;
	background-position: center center;
	background-repeat: no-repeat;
	padding: 5.5rem 1.5rem 4.5rem 1.5rem;
	overflow: hidden;
}

.hcomz-post-hero-overlay {
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(14, 59, 62, 0.85) 0%, rgba(14, 59, 62, 0.92) 100%);
	z-index: 1;
}

.hcomz-post-hero-content {
	position: relative;
	z-index: 2;
	max-width: 960px;
	margin: 0 auto;
	text-align: center;
}

.hcomz-post-hero-title {
	font-size: clamp(1.85rem, 3.6vw, 2.75rem) !important;
	font-weight: 800 !important;
	color: #ffffff !important;
	text-transform: uppercase !important;
	line-height: 1.28 !important;
	margin: 0 auto 1.35rem auto !important;
	letter-spacing: -0.01em !important;
	font-family: 'Montserrat', sans-serif !important;
}

.hcomz-post-hero-subtitle {
	font-size: clamp(1.02rem, 1.8vw, 1.18rem) !important;
	color: rgba(255, 255, 255, 0.92) !important;
	line-height: 1.65 !important;
	max-width: 780px !important;
	margin: 0 auto 1.85rem auto !important;
	font-weight: 400 !important;
}

.hcomz-post-hero-badge {
	display: inline-flex !important;
	align-items: center !important;
	gap: 0.55rem !important;
	background-color: #ffffff !important;
	color: #0E3B3E !important;
	padding: 0.55rem 1.35rem !important;
	border-radius: 50px !important;
	font-weight: 600 !important;
	font-size: 0.88rem !important;
	box-shadow: 0 4px 14px rgba(0, 0, 0, 0.12) !important;
	user-select: none !important;
}

.hcomz-post-hero-badge-icon {
	display: inline-flex;
	align-items: center;
	color: #0E3B3E;
}

/* ==========================================================================
   2. Bandeau Sous-Hero Teal Foncé (#0E3B3E)
   ========================================================================== */
.hcomz-post-subbar {
	background-color: #0E3B3E !important;
	padding: 0.85rem 1.5rem !important;
	border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
}

.hcomz-post-subbar-container {
	display: flex !important;
	justify-content: space-between !important;
	align-items: center !important;
	max-width: 1200px !important;
	margin: 0 auto !important;
}

.hcomz-post-subbar-back {
	display: inline-flex !important;
	align-items: center !important;
	gap: 0.5rem !important;
	color: #ffffff !important;
	text-decoration: none !important;
	font-weight: 600 !important;
	font-size: 0.92rem !important;
	transition: opacity 0.2s ease, transform 0.2s ease !important;
}

.hcomz-post-subbar-back:hover {
	opacity: 0.85 !important;
	transform: translateX(-2px) !important;
	color: #ffffff !important;
}

.hcomz-subbar-arrow {
	font-size: 1.15rem !important;
	line-height: 1 !important;
}

.hcomz-post-subbar-date {
	color: rgba(255, 255, 255, 0.9) !important;
	font-size: 0.9rem !important;
	font-weight: 500 !important;
}

/* ==========================================================================
   3. Grille Principale 2 Colonnes (Article à gauche, Services à droite)
   ========================================================================== */
.hcomz-post-container {
	max-width: 1200px !important;
	margin: 3.5rem auto 5rem auto !important;
	padding: 0 1.5rem !important;
}

.hcomz-post-layout {
	display: grid !important;
	grid-template-columns: minmax(0, 1fr) 350px !important;
	gap: 3.5rem !important;
	align-items: start !important;
}

@media (max-width: 980px) {
	.hcomz-post-layout {
		grid-template-columns: 1fr !important;
		gap: 2.5rem !important;
	}
}

/* ==========================================================================
   4. Boîte de Résumé IA (Fidèle à la Capture 2)
   ========================================================================== */
.hcomz-post-ai-summary-card {
	background: #9FB4B2 !important;
	border: 1px solid rgba(14, 59, 62, 0.2) !important;
	border-radius: 14px !important;
	padding: 1.25rem 1.6rem !important;
	margin-bottom: 2.5rem !important;
	box-shadow: 0 4px 15px rgba(14, 59, 62, 0.04) !important;
}

.hcomz-ai-summary-title {
	font-size: 0.98rem !important;
	font-weight: 600 !important;
	color: #0E3B3E !important;
	margin-bottom: 0.95rem !important;
	line-height: 1.4 !important;
}

.hcomz-ai-summary-buttons {
	display: flex !important;
	flex-wrap: wrap !important;
	align-items: center !important;
	gap: 0.75rem !important;
}

.hcomz-ai-btn {
	display: inline-flex !important;
	align-items: center !important;
	gap: 0.5rem !important;
	background: #ffffff !important;
	color: #1e293b !important;
	padding: 0.45rem 1rem !important;
	border-radius: 8px !important;
	font-size: 0.88rem !important;
	font-weight: 600 !important;
	text-decoration: none !important;
	border: 1px solid rgba(0, 0, 0, 0.06) !important;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06) !important;
	transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease, color 0.2s ease !important;
}

.hcomz-ai-btn:hover {
	background: #0E3B3E !important;
	border-color: #0E3B3E !important;
	color: #ffffff !important;
	transform: translateY(-2px) !important;
	box-shadow: 0 4px 10px rgba(14, 59, 62, 0.18) !important;
}

.hcomz-ai-icon {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	flex-shrink: 0 !important;
	color: currentColor !important;
}

/* ==========================================================================
   5. Barre de Partage Réseaux Sociaux (Placée à la fin de l'article)
   ========================================================================== */
.hcomz-post-share-card {
	background: #ffffff !important;
	border-radius: 14px !important;
	padding: 1.25rem 1.6rem !important;
	margin-top: 3.5rem !important;
	margin-bottom: 1.5rem !important;
	border: 1px solid rgba(14, 59, 62, 0.08) !important;
	box-shadow: 0 4px 15px rgba(14, 59, 62, 0.03) !important;
	display: flex !important;
	align-items: center !important;
	justify-content: space-between !important;
	flex-wrap: wrap !important;
	gap: 1rem !important;
}

.hcomz-share-label {
	font-weight: 700 !important;
	font-size: 0.92rem !important;
	color: #0E3B3E !important;
}

.hcomz-share-buttons {
	display: flex !important;
	flex-wrap: wrap !important;
	align-items: center !important;
	gap: 0.5rem !important;
}

.hcomz-share-btn {
	display: inline-flex !important;
	align-items: center !important;
	gap: 0.45rem !important;
	padding: 0.45rem 0.9rem !important;
	border-radius: 50px !important;
	font-size: 0.82rem !important;
	font-weight: 600 !important;
	color: #0E3B3E !important;
	background: #F4F6F6 !important;
	border: 1px solid rgba(14, 59, 62, 0.1) !important;
	text-decoration: none !important;
	cursor: pointer !important;
	transition: all 0.2s ease !important;
}

.hcomz-share-btn:hover {
	background: #0E3B3E !important;
	border-color: #0E3B3E !important;
	color: #ffffff !important;
	transform: translateY(-1px) !important;
}

.hcomz-share-btn svg {
	fill: currentColor !important;
}

/* ==========================================================================
   5. Corps du Contenu de l'Article
   ========================================================================== */
.hcomz-post-body {
	font-size: 1.05rem !important;
	line-height: 1.85 !important;
	color: #334155 !important;
}

.hcomz-post-body h2 {
	font-size: clamp(1.4rem, 2.4vw, 1.85rem) !important;
	font-weight: 800 !important;
	color: #0E3B3E !important;
	margin-top: 2.75rem !important;
	margin-bottom: 1.15rem !important;
	line-height: 1.35 !important;
	border-bottom: 2px solid rgba(14, 59, 62, 0.08) !important;
	padding-bottom: 0.5rem !important;
}

.hcomz-post-body h3 {
	font-size: clamp(1.2rem, 2vw, 1.45rem) !important;
	font-weight: 700 !important;
	color: #0E3B3E !important;
	margin-top: 2.25rem !important;
	margin-bottom: 0.85rem !important;
	line-height: 1.4 !important;
}

.hcomz-post-body p {
	margin-bottom: 1.5rem !important;
}

.hcomz-post-body ul,
.hcomz-post-body ol {
	margin-bottom: 1.75rem !important;
	padding-left: 1.5rem !important;
}

.hcomz-post-body li {
	margin-bottom: 0.5rem !important;
}

.hcomz-post-body blockquote {
	border-left: 4px solid #0E3B3E !important;
	background: #ffffff !important;
	padding: 1.25rem 1.5rem !important;
	margin: 2rem 0 !important;
	border-radius: 0 12px 12px 0 !important;
	font-style: italic !important;
	color: #1e293b !important;
	box-shadow: 0 3px 10px rgba(0, 0, 0, 0.03) !important;
}

/* Images Gutenberg & Images Additionnelles */
.hcomz-post-body .wp-block-image,
.hcomz-post-secondary-image {
	margin: 2.5rem 0 !important;
	border-radius: 18px !important;
	overflow: hidden !important;
	box-shadow: 0 8px 24px rgba(14, 59, 62, 0.06) !important;
	border: 1px solid rgba(14, 59, 62, 0.08) !important;
	background: #ffffff !important;
}

.hcomz-post-body .wp-block-image img,
.hcomz-post-secondary-image img {
	width: 100% !important;
	height: auto !important;
	display: block !important;
	border-radius: 18px 18px 0 0 !important;
}

.hcomz-post-body .wp-element-caption,
.hcomz-post-secondary-image figcaption {
	padding: 0.85rem 1.25rem !important;
	font-size: 0.86rem !important;
	color: #64748b !important;
	text-align: center !important;
	background: #ffffff !important;
	margin: 0 !important;
}

/* ==========================================================================
   6. Boîte Bio de l'Auteur
   ========================================================================== */
.hcomz-post-author-box {
	background: #ffffff !important;
	border-radius: 20px !important;
	padding: 2rem !important;
	margin-top: 1.5rem !important;
	border: 1px solid rgba(14, 59, 62, 0.08) !important;
	box-shadow: 0 6px 20px rgba(14, 59, 62, 0.04) !important;
	display: flex !important;
	align-items: center !important;
	gap: 1.75rem !important;
}

@media (max-width: 600px) {
	.hcomz-post-author-box {
		flex-direction: column !important;
		text-align: center !important;
		gap: 1.25rem !important;
	}
}

.hcomz-author-avatar-img,
.hcomz-author-avatar-fallback {
	width: 80px !important;
	height: 80px !important;
	border-radius: 50% !important;
	object-fit: cover !important;
	border: 3px solid #0E3B3E !important;
	flex-shrink: 0 !important;
}

.hcomz-author-avatar-fallback {
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	background: #0E3B3E !important;
	color: #ffffff !important;
	font-size: 1.5rem !important;
	font-weight: 800 !important;
}

.hcomz-author-role {
	font-size: 0.82rem !important;
	text-transform: uppercase !important;
	letter-spacing: 0.05em !important;
	color: #64748b !important;
	font-weight: 600 !important;
}

.hcomz-author-name {
	font-size: 1.35rem !important;
	font-weight: 800 !important;
	color: #0E3B3E !important;
	margin: 0.15rem 0 0.6rem 0 !important;
}

.hcomz-author-bio {
	font-size: 0.94rem !important;
	line-height: 1.65 !important;
	color: #475569 !important;
	margin-bottom: 1rem !important;
}

.hcomz-author-contact-btn {
	display: inline-flex !important;
	align-items: center !important;
	gap: 0.4rem !important;
	color: #0E3B3E !important;
	font-weight: 700 !important;
	font-size: 0.92rem !important;
	text-decoration: none !important;
	transition: color 0.2s ease, transform 0.2s ease !important;
}

.hcomz-author-contact-btn:hover {
	color: #175256 !important;
	transform: translateX(3px) !important;
}

/* ==========================================================================
   7. Encart Latéral Sticky des Services (Fidèle à la Capture 2)
   ========================================================================== */
.hcomz-post-sidebar-column {
	position: sticky !important;
	top: 100px !important;
}

.hcomz-services-sidebar-card {
	background: #ffffff !important;
	border-radius: 20px !important;
	padding: 1.75rem 1.6rem !important;
	border: 1px solid rgba(14, 59, 62, 0.08) !important;
	box-shadow: 0 10px 30px rgba(14, 59, 62, 0.05) !important;
}

/* Onglets de sélection des services */
.hcomz-services-tabs {
	display: flex !important;
	gap: 0.35rem !important;
	margin-bottom: 1.5rem !important;
	padding-bottom: 0.85rem !important;
	border-bottom: 1px solid rgba(14, 59, 62, 0.08) !important;
	overflow-x: auto !important;
}

.hcomz-service-tab-btn {
	padding: 0.35rem 0.75rem !important;
	font-size: 0.76rem !important;
	font-weight: 600 !important;
	border-radius: 20px !important;
	border: 1px solid rgba(14, 59, 62, 0.15) !important;
	background: transparent !important;
	color: #0E3B3E !important;
	cursor: pointer !important;
	white-space: nowrap !important;
	transition: all 0.2s ease !important;
}

.hcomz-service-tab-btn:hover {
	background: rgba(14, 59, 62, 0.08) !important;
}

.hcomz-service-tab-btn.is-active {
	background: #0E3B3E !important;
	color: #ffffff !important;
	border-color: #0E3B3E !important;
}

/* Panneaux des services */
.hcomz-service-panel {
	display: none;
}

.hcomz-service-panel.is-active {
	display: block !important;
	animation: hcomzFadeIn 0.25s ease-out;
}

@keyframes hcomzFadeIn {
	from { opacity: 0; transform: translateY(4px); }
	to { opacity: 1; transform: translateY(0); }
}

/* Pastille icône du service en cercle (Exact capture 2) */
.hcomz-service-badge-icon {
	text-align: center !important;
	margin-bottom: 1.15rem !important;
}

.hcomz-wp-logo-svg {
	display: inline-block !important;
	vertical-align: middle !important;
}

.hcomz-service-badge-circle {
	width: 56px !important;
	height: 56px !important;
	border-radius: 50% !important;
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	margin: 0 auto !important;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08) !important;
}

.badge-seo {
	background: #F9AB00 !important;
	color: #ffffff !important;
	font-weight: 800 !important;
	font-size: 1.1rem !important;
}

.badge-maintenance {
	background: #0E3B3E !important;
}

.badge-debogage {
	background: #C97C64 !important;
}

/* Titre du service */
.hcomz-service-title {
	text-align: center !important;
	color: #0E3B3E !important;
	font-size: 1.25rem !important;
	font-weight: 800 !important;
	line-height: 1.35 !important;
	margin: 0 0 1.6rem 0 !important;
	font-family: 'Montserrat', sans-serif !important;
}

/* Liste des fonctionnalités avec coches circulaires turquoise (Exact capture 2) */
.hcomz-service-features-list {
	list-style: none !important;
	padding: 0 !important;
	margin: 0 0 1.75rem 0 !important;
}

.hcomz-service-features-list li {
	display: flex !important;
	align-items: flex-start !important;
	gap: 0.75rem !important;
	margin-bottom: 0.95rem !important;
	font-size: 0.94rem !important;
	line-height: 1.45 !important;
	color: #334155 !important;
	font-weight: 500 !important;
}

.hcomz-feature-check-icon {
	flex-shrink: 0 !important;
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	margin-top: 1px !important;
	color: #2596be !important;
}

.hcomz-feature-check-icon svg {
	stroke: #2596be !important;
}

.hcomz-feature-text {
	flex: 1 !important;
}

/* Bouton d'action pilule "En savoir plus ⊕" Teal Foncé (#0E3B3E) */
.hcomz-service-cta-wrap {
	text-align: center !important;
}

.hcomz-service-cta-btn {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	gap: 0.6rem !important;
	width: 100% !important;
	background-color: #0E3B3E !important;
	color: #ffffff !important;
	padding: 0.85rem 1.4rem !important;
	border-radius: 50px !important;
	font-weight: 700 !important;
	font-size: 0.98rem !important;
	text-decoration: none !important;
	box-shadow: 0 4px 12px rgba(14, 59, 62, 0.15) !important;
	border: 1.5px solid #0E3B3E !important;
	transition: all 0.25s ease !important;
}

.hcomz-service-cta-btn:hover {
	background-color: #175256 !important;
	border-color: #175256 !important;
	color: #ffffff !important;
	transform: translateY(-2px) !important;
	box-shadow: 0 6px 16px rgba(14, 59, 62, 0.22) !important;
}

.hcomz-cta-plus-icon {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
}

.hcomz-cta-plus-icon svg {
	stroke: currentColor !important;
}