/* ==========================================================================
   HiTech Media — habillage du thème Martfury
   ========================================================================== */

:root {
	--htm-navy: #0a2c4e;
	--htm-navy-2: #134e80;
	--htm-cyan: #17b9d6;
	--htm-cyan-d: #0e93ad;
	--htm-ink: #10202f;
	--htm-muted: #62778c;
	--htm-line: #e2e8ef;
	--htm-bg: #f5f8fb;
	--htm-radius: 12px;
	--htm-shadow: 0 2px 4px rgba(10, 44, 78, .05), 0 12px 28px rgba(10, 44, 78, .07);
}

.htm-wrap {
	max-width: 1300px;
	margin: 0 auto;
	padding: 0 18px;
}

.htm-ico {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: var(--htm-cyan-d);
	flex: 0 0 auto;
}

/* --------------------------------------------------------------- Accueil */
.htm-home .page-header,
.htm-home .martfury-page-header,
.htm-home .page-title-bar,
.htm-home .entry-header,
.htm-home .site-content > .container > .page-title,
.htm-home .breadcrumb-noheading {
	display: none !important;
}

.htm-home .site-content,
.htm-home #content {
	padding-top: 0 !important;
}

.htm-home .site-content > .container,
.htm-home .site-content > .martfury-container,
.htm-home .entry-content > .container {
	max-width: 100% !important;
	width: 100% !important;
	padding-left: 0 !important;
	padding-right: 0 !important;
}

.htm-home .entry-content,
.htm-home .page-content {
	margin: 0 !important;
}

/* ------------------------------------------------------------ Diaporama */
.htm-hero {
	position: relative;
	overflow: hidden;
	background: var(--htm-navy);
}

.htm-hero-track {
	position: relative;
	width: 100%;
	/* ratio 1920x720 */
	aspect-ratio: 8 / 3;
	min-height: 240px;
}

.htm-slide {
	position: absolute;
	inset: 0;
	opacity: 0;
	visibility: hidden;
	transition: opacity .55s ease;
	display: block;
}

.htm-slide.is-active {
	opacity: 1;
	visibility: visible;
}

.htm-slide img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.htm-hero-nav {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 46px;
	height: 46px;
	border: 0;
	border-radius: 50%;
	background: rgba(255, 255, 255, .9);
	color: var(--htm-navy);
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 4px 14px rgba(0, 0, 0, .18);
	opacity: 0;
	transition: opacity .25s ease, background .2s ease;
	z-index: 3;
}

.htm-hero:hover .htm-hero-nav {
	opacity: 1;
}

.htm-hero-nav:hover {
	background: #fff;
}

.htm-prev { left: 18px; }
.htm-next { right: 18px; }

.htm-hero-dots {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 16px;
	display: flex;
	justify-content: center;
	gap: 9px;
	z-index: 3;
}

.htm-hero-dots button {
	width: 9px;
	height: 9px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: rgba(255, 255, 255, .45);
	cursor: pointer;
	transition: all .25s ease;
}

.htm-hero-dots button.is-active {
	background: var(--htm-cyan);
	width: 26px;
	border-radius: 5px;
}

/* ------------------------------------------------------------ Arguments */
.htm-usp {
	background: #fff;
	border-bottom: 1px solid var(--htm-line);
}

.htm-usp-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 26px;
	padding: 26px 0;
}

.htm-usp-item {
	display: flex;
	gap: 14px;
	align-items: flex-start;
}

.htm-usp-item strong {
	display: block;
	font-size: 15px;
	color: var(--htm-ink);
	line-height: 1.3;
}

.htm-usp-item p {
	margin: 3px 0 0;
	font-size: 13px;
	color: var(--htm-muted);
	line-height: 1.45;
}

/* ------------------------------------------------------------ Bannières */
.htm-banners { padding: 40px 0 0; }
.htm-banners-3 { padding: 8px 0 0; }

.htm-bgrid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 24px;
}

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

.htm-banner {
	display: block;
	border-radius: var(--htm-radius);
	overflow: hidden;
	box-shadow: var(--htm-shadow);
	transition: transform .25s ease, box-shadow .25s ease;
}

.htm-banner img {
	display: block;
	width: 100%;
	height: auto;
}

a.htm-banner:hover {
	transform: translateY(-3px);
	box-shadow: 0 6px 10px rgba(10, 44, 78, .07), 0 18px 38px rgba(10, 44, 78, .12);
}

/* ------------------------------------------------------- Titres section */
.htm-sec-head {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 24px;
	margin: 0 0 26px;
}

.htm-sec-head h2 {
	margin: 0;
	font-size: 27px;
	line-height: 1.2;
	font-weight: 800;
	color: var(--htm-ink);
	letter-spacing: -.4px;
}

.htm-sec-head p {
	margin: 8px 0 0;
	max-width: 720px;
	color: var(--htm-muted);
	font-size: 15px;
	line-height: 1.55;
}

.htm-sec-link {
	flex: 0 0 auto;
	font-weight: 700;
	font-size: 14px;
	color: var(--htm-navy);
	border-bottom: 2px solid var(--htm-cyan);
	padding-bottom: 2px;
	white-space: nowrap;
}

.htm-sec-link:hover { color: var(--htm-cyan-d); }

/* --------------------------------------------------------- Bloc produits */
.htm-products { padding: 52px 0 8px; }
.htm-products ul.products { margin-bottom: 0 !important; }

/* --------------------------------------------------------------- Guide */
.htm-guide { padding: 52px 0 12px; }

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

.htm-guide-card {
	background: #fff;
	border: 1px solid var(--htm-line);
	border-radius: var(--htm-radius);
	padding: 28px 26px;
}

.htm-guide-card .htm-ico {
	width: 54px;
	height: 54px;
	border-radius: 14px;
	background: rgba(23, 185, 214, .12);
	margin-bottom: 16px;
}

.htm-guide-card h3 {
	margin: 0 0 10px;
	font-size: 18px;
	font-weight: 700;
	color: var(--htm-ink);
}

.htm-guide-card p {
	margin: 0;
	font-size: 14.5px;
	line-height: 1.65;
	color: var(--htm-muted);
}

/* -------------------------------------------------------------- Marques */
.htm-brands { padding: 52px 0 12px; }

.htm-brand-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 20px;
}

.htm-brand {
	background: linear-gradient(135deg, var(--htm-navy), var(--htm-navy-2));
	color: #fff;
	border-radius: var(--htm-radius);
	padding: 26px 24px;
}

.htm-brand strong {
	display: block;
	font-size: 20px;
	letter-spacing: 1.5px;
	font-weight: 800;
}

.htm-brand span {
	display: block;
	margin-top: 6px;
	font-size: 13.5px;
	color: rgba(255, 255, 255, .75);
	line-height: 1.5;
}

/* ------------------------------------------------------------------ FAQ */
.htm-faq { padding: 52px 0 60px; }

.htm-faq-list {
	border: 1px solid var(--htm-line);
	border-radius: var(--htm-radius);
	overflow: hidden;
	background: #fff;
}

.htm-faq-item + .htm-faq-item { border-top: 1px solid var(--htm-line); }

.htm-faq-item summary {
	cursor: pointer;
	padding: 18px 52px 18px 22px;
	font-weight: 700;
	font-size: 16px;
	color: var(--htm-ink);
	list-style: none;
	position: relative;
}

.htm-faq-item summary::-webkit-details-marker { display: none; }

.htm-faq-item summary::after {
	content: "";
	position: absolute;
	right: 22px;
	top: 50%;
	width: 9px;
	height: 9px;
	border-right: 2px solid var(--htm-cyan-d);
	border-bottom: 2px solid var(--htm-cyan-d);
	transform: translateY(-70%) rotate(45deg);
	transition: transform .2s ease;
}

.htm-faq-item[open] summary::after { transform: translateY(-25%) rotate(-135deg); }

.htm-faq-a {
	padding: 0 22px 20px;
	color: var(--htm-muted);
	font-size: 14.5px;
	line-height: 1.7;
}

.htm-faq-a p { margin: 0; }

/* ------------------------------------------------------- Fiche produit */
.htm-single-top {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0 0 14px;
}

.htm-chip {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 12.5px;
	font-weight: 600;
	padding: 5px 11px;
	border-radius: 999px;
	background: var(--htm-bg);
	color: var(--htm-muted);
	border: 1px solid var(--htm-line);
	line-height: 1.4;
}

.htm-chip svg { width: 15px; height: 15px; }
.htm-chip-ok { background: #e8f7ee; color: #1a7f45; border-color: #c6ebd5; }
.htm-chip-ko { background: #fdeceb; color: #a72a20; border-color: #f6cfcc; }
.htm-chip-brand { background: #eaf1f8; color: var(--htm-navy); border-color: #d2e0ee; }

.htm-single-trust {
	margin: 22px 0 6px;
	border: 1px solid var(--htm-line);
	border-radius: var(--htm-radius);
	background: #fff;
	overflow: hidden;
}

.htm-st-row {
	display: flex;
	gap: 13px;
	align-items: flex-start;
	padding: 13px 16px;
}

.htm-st-row + .htm-st-row { border-top: 1px solid var(--htm-line); }

.htm-st-row strong {
	display: block;
	font-size: 14px;
	color: var(--htm-ink);
	line-height: 1.3;
}

.htm-st-row span {
	display: block;
	margin-top: 2px;
	font-size: 12.8px;
	color: var(--htm-muted);
	line-height: 1.45;
}

/* Description longue enrichie */
.htm-desc h2 {
	font-size: 22px;
	font-weight: 800;
	color: var(--htm-ink);
	margin: 34px 0 12px;
	letter-spacing: -.3px;
}

.htm-desc h2:first-child { margin-top: 0; }

.htm-desc h3 {
	font-size: 17px;
	font-weight: 700;
	color: var(--htm-ink);
	margin: 22px 0 8px;
}

.htm-desc p {
	font-size: 15px;
	line-height: 1.75;
	color: #43596d;
	margin: 0 0 14px;
}

.htm-desc ul { margin: 0 0 16px; padding-left: 0; list-style: none; }

.htm-desc ul li {
	position: relative;
	padding-left: 26px;
	margin-bottom: 9px;
	font-size: 15px;
	line-height: 1.6;
	color: #43596d;
}

.htm-desc ul li::before {
	content: "";
	position: absolute;
	left: 2px;
	top: 7px;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--htm-cyan);
}

.htm-keyfacts {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 14px;
	margin: 0 0 26px;
}

.htm-keyfact {
	border: 1px solid var(--htm-line);
	border-radius: 10px;
	padding: 15px 16px;
	background: var(--htm-bg);
}

.htm-keyfact span {
	display: block;
	font-size: 11.5px;
	text-transform: uppercase;
	letter-spacing: .6px;
	color: var(--htm-muted);
	font-weight: 700;
}

.htm-keyfact strong {
	display: block;
	margin-top: 5px;
	font-size: 16px;
	color: var(--htm-navy);
	font-weight: 800;
}

table.htm-specs {
	width: 100%;
	border-collapse: collapse;
	margin: 0 0 24px;
	font-size: 14.5px;
	border: 1px solid var(--htm-line);
}

table.htm-specs th,
table.htm-specs td {
	padding: 11px 15px;
	border-bottom: 1px solid var(--htm-line);
	text-align: left;
	vertical-align: top;
}

table.htm-specs th {
	width: 38%;
	font-weight: 600;
	color: var(--htm-muted);
	background: #fafcfe;
}

table.htm-specs td { color: var(--htm-ink); }
table.htm-specs tr:last-child th,
table.htm-specs tr:last-child td { border-bottom: 0; }

/* ---------------------------------------------------------- Réassurance */
.htm-reassurance {
	background: #fff;
	border-top: 1px solid var(--htm-line);
	border-bottom: 1px solid var(--htm-line);
}

.htm-reassurance-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 24px;
	padding: 26px 0;
}

.htm-rea {
	display: flex;
	gap: 13px;
	align-items: center;
}

.htm-rea strong {
	display: block;
	font-size: 14.5px;
	color: var(--htm-ink);
}

.htm-rea span {
	display: block;
	font-size: 12.8px;
	color: var(--htm-muted);
	margin-top: 2px;
}

/* ----------------------------------------------------------- Pied de page */
.footer-widgets .widget-title {
	font-size: 15px !important;
	font-weight: 800 !important;
	letter-spacing: .2px;
	margin-bottom: 16px !important;
}

.htm-foot p { margin: 0 0 12px; line-height: 1.7; font-size: 14px; }
.htm-foot ul { list-style: none; margin: 0; padding: 0; }
.htm-foot ul li { margin-bottom: 9px; font-size: 14px; line-height: 1.5; }
.htm-foot ul li a { text-decoration: none; }
.htm-foot ul li a:hover { text-decoration: underline; }

.htm-foot-logo {
	max-width: 210px;
	height: auto;
	display: block;
	margin-bottom: 16px;
}

.htm-foot-contact li {
	display: flex;
	gap: 9px;
	align-items: flex-start;
}

.htm-foot-contact .htm-ico { color: var(--htm-cyan); margin-top: 2px; }

/* --------------------------------------------------------------- Mobile */
@media (max-width: 1024px) {
	.htm-usp-grid,
	.htm-reassurance-grid { grid-template-columns: repeat(2, 1fr); }
	.htm-guide-grid { grid-template-columns: 1fr; }
	.htm-brand-grid { grid-template-columns: repeat(2, 1fr); }
	.htm-keyfacts { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 782px) {
	.htm-hero-track { aspect-ratio: 16 / 11; }
	.htm-slide img { object-position: 22% center; }
	.htm-bgrid,
	.htm-bgrid-3 { grid-template-columns: 1fr; }
	.htm-sec-head { flex-direction: column; align-items: flex-start; gap: 12px; }
	.htm-sec-head h2 { font-size: 22px; }
	.htm-banners { padding-top: 28px; }
	.htm-products,
	.htm-guide,
	.htm-brands { padding-top: 36px; }
	.htm-faq { padding: 36px 0 44px; }
	.htm-hero-nav { display: none; }
}

@media (max-width: 560px) {
	.htm-usp-grid,
	.htm-reassurance-grid { grid-template-columns: 1fr; gap: 16px; }
	.htm-keyfacts { grid-template-columns: 1fr; }
}