/* ==========================================================================
   Home — SPÉCIFIQUE à la page.
   Bande CTA sombre, badge de héro, bande de section, liens sur fond sombre,
   chiffres-clés, cartes produit et étoiles viennent de components.css :
   ne rien redéclarer ici, seulement ajuster par variables CSS.
   ========================================================================== */

/* --- Héro ---------------------------------------------------------------- */

.hm-hero {
	overflow: hidden;
}

.hm-hero-inner {
	--grid-min: 330px;
	--grid-gap: clamp(24px, 4vw, 52px);
	--hero-pt: clamp(36px, 5vw, 68px);
	--hero-pb: clamp(30px, 4vw, 52px);
	align-items: center;
}

.hm-hero-lead {
	--lead-gap: 26px;
	--lead-width: 44ch;
}

/* Visuel : boîtier + mockup téléphone */
.hm-hero-visual {
	position: relative;
	min-height: clamp(360px, 38vw, 460px);
	display: flex;
	align-items: flex-end;
	justify-content: center;
}

.hm-device {
	position: relative;
	z-index: 2;
	margin-right: -10px;
}

.hm-device img {
	width: clamp(132px, 13.9vw, 157px);
	height: auto;
	object-fit: contain;
}

.hm-device .hm-slot {
	width: clamp(132px, 13.9vw, 157px);
	height: clamp(230px, 24vw, 274px);
	border-radius: var(--k-r-card);
}

.hm-shadow {
	width: 80%;
	height: 15px;
	margin: 4px auto 0;
	border-radius: 50%;
	background: radial-gradient(ellipse, rgba(20, 25, 35, 0.26) 0%, transparent 70%);
	filter: blur(3px);
}

.hm-phone {
	position: relative;
	z-index: 1;
}

.hm-phone-body {
	width: clamp(228px, 24vw, 270px);
	background: var(--k-blue-light);
	border-radius: 42px;
	padding: 9px;
	box-shadow: var(--k-shadow-drama);
}

.hm-phone-screen {
	background: var(--k-tile);
	border-radius: 34px;
	overflow: hidden;
	aspect-ratio: 9/19;
	position: relative;
}

.hm-phone-screen img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.hm-shadow-phone {
	width: 70%;
	height: 17px;
	margin: 6px auto 0;
	border-radius: 50%;
	background: radial-gradient(ellipse, rgba(20, 25, 35, 0.24) 0%, transparent 70%);
	filter: blur(4px);
}

/* Emplacement d'image en attente du fichier définitif. */
.hm-slot {
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	padding: 18px;
	background: repeating-linear-gradient(45deg, var(--k-bg-alt), var(--k-bg-alt) 10px, var(--k-border) 10px, var(--k-border) 20px);
	color: #8A8272;
	font-size: var(--k-text-s);
	font-weight: 600;
	line-height: 1.4;
}

/* --- 3 étapes ------------------------------------------------------------ */

.hm-grid3 {
	--grid-min: 250px;
	--grid-gap: clamp(16px, 2.5vw, 24px);
}

/* Lien article voyants sous les 3 étapes (repris de la home legacy FR). */
.hm-how-more {
	text-align: center;
	margin: clamp(18px, 3vw, 26px) 0 0;
	font-size: var(--k-text-l);
}

.hm-step-top {
	display: flex;
	align-items: center;
	gap: 14px;
	margin-bottom: 16px;
}

.hm-step-ico {
	--tile-size: 48px;
}

.hm-step-n {
	font-family: var(--k-font-title);
	font-weight: 800;
	font-size: var(--k-text-l);
	color: #E2C9A6;
}
/* --- Vidéo --------------------------------------------------------------- */

.hm-video-section {
	padding-bottom: clamp(44px, 6vw, 72px);
}

/* --- Qui sommes-nous (bande bleue) --------------------------------------- */

.hm-about {
	background: var(--k-blue);
	color: var(--k-dark-strong);
}

/* Ces deux sections utilisent 76px (et non les 78px de .kk-section). */
.hm-about-inner,
.hm-reviews-inner {
	padding-top: clamp(44px, 6vw, 76px);
	padding-bottom: clamp(44px, 6vw, 76px);
}

.hm-about-head {
	--grid-min: 280px;
	--grid-gap: clamp(24px, 4vw, 48px);
	align-items: center;
	margin-bottom: clamp(28px, 4vw, 40px);
}

.hm-about .kk-eyebrow {
	color: var(--k-orange-glow);
	text-align: left;
}

.hm-about h2 {
	font-size: var(--k-h2-xl);
	margin: 0 0 14px;
}

.hm-about-p {
	font-size: var(--k-text-xl);
	line-height: var(--k-lh);
	color: var(--k-dark-body);
	margin: 0;
}

.hm-about-p strong {
	color: var(--k-dark-strong);
}

.hm-about-photo {
	position: relative;
	aspect-ratio: 4/3;
	border-radius: var(--k-r-lg);
	overflow: hidden;
	border: 1px solid var(--k-dark-line);
	box-shadow: var(--k-shadow-drama);
}

.hm-about-photo img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.hm-stats {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: clamp(12px, 2vw, 24px);
	max-width: 760px;
	margin: clamp(28px, 4vw, 40px) auto;
	text-align: center;
}

.hm-stats > div:nth-child(2) {
	border-left: 1px solid var(--k-dark-line);
	border-right: 1px solid var(--k-dark-line);
}

.hm-pillars {
	--grid-gap: clamp(16px, 2.5vw, 24px);
	margin-bottom: clamp(30px, 4vw, 40px);
}

.hm-pillar .kk-card-t {
	margin-top: 14px;
}


/* CTA de la bande sombre : ombre neutre plutôt qu'orange. */
.hm-about-ctas .kk-btn--primary,
.hm-about-ctas .kk-btn--ghost {
	--btn-padding: 14px 24px;
	--btn-gap: 8px;
}

/* Bande avis : bordure HAUTE seulement — pas .kk-band-alt, qui en ajouterait
   une en bas et modifierait le rendu. */
.hm-reviews {
	background: var(--k-bg-alt);
	border-top: 1px solid var(--k-border);
}

.hm-reviews-lead {
	font-size: var(--k-text-l);
	color: var(--k-nav);
	margin: 0;
	display: inline-flex;
	align-items: center;
	gap: 8px;
}

.hm-reviews-grid {
	--grid-min: 290px;
	--grid-gap: clamp(14px, 2vw, 22px);
}

.hm-review {
	--card-radius: var(--k-r-card);
	--card-padding: 26px;
}

.hm-review p {
	font-size: var(--k-text-l);
	line-height: var(--k-lh);
	color: var(--k-body);
	margin: 12px 0 16px;
}

.hm-review-author {
	display: flex;
	align-items: center;
	gap: 10px;
}

.hm-review-ini {
	--tile-size: 34px;
	--tile-radius: 50%;
	--tile-bg: var(--k-border);
	--tile-color: var(--k-orange-dark);
	font-weight: 700;
	font-size: var(--k-text-m);
	font-family: var(--k-font-title);
}

.hm-review-name {
	font-weight: 700;
	font-size: var(--k-text-m);
}

.hm-review-date {
	font-size: var(--k-text-s);
	color: var(--k-faint);
}

/* --- Vidéo témoignage client (tête de la section avis, maquette Accueil) -- */

.hm-testi {
	--card-padding: clamp(16px, 2vw, 20px);
	--card-shadow: var(--k-shadow-lift);
	display: grid;
	grid-template-columns: 0.92fr 1fr;
	gap: clamp(18px, 2.6vw, 30px);
	align-items: center;
	margin-bottom: clamp(22px, 3vw, 32px);
}

@media (max-width: 820px) {
	.hm-testi {
		grid-template-columns: 1fr;
	}
}

/* Média : façade vidéo STANDARD (kk-video, 16/9, lecture centrée) — identique
   aux autres vidéos du site ; seul l'arrondi s'aligne sur la carte. */
.hm-testi-media .kk-video {
	border-radius: var(--k-r-card);
}

.hm-testi-body {
	padding: clamp(4px, 1vw, 12px) clamp(4px, 1.4vw, 16px) clamp(4px, 1vw, 12px) 0;
}

.hm-testi-badge {
	gap: 7px;
	background: var(--k-orange-tint);
	color: var(--k-orange-dark);
	font-family: var(--k-font-title);
	font-size: var(--k-text-xs);
	letter-spacing: 0.06em;
	text-transform: uppercase;
	padding: 6px 12px;
}

/* Auteur : avatar et nom légèrement plus grands que dans la grille d'avis. */
.hm-testi .hm-review-author {
	gap: 11px;
	margin-bottom: 18px;
}

.hm-testi .hm-review-ini {
	--tile-size: 40px;
	font-size: var(--k-text-l);
	font-weight: 800;
}

.hm-testi .hm-review-name {
	font-size: var(--k-text-l);
	display: flex;
	align-items: center;
	gap: 6px;
}

.hm-testi .hm-review-date {
	font-size: var(--k-text-s);
}

.hm-testi-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-bottom: 20px;
}

/* --- Presse -------------------------------------------------------------- */

/* La bande presse « Ils parlent de nous » est un composant commun : kk-press
   (components.css), réutilisé par la home et la page véhicule. */