/*
 * Styles specifiques a la page d'accueil (front-page.php)
 * Charges uniquement sur is_front_page() — voir functions.php
 */

/* ==========================================================================
   1. HERO / BANDEAU PRINCIPAL (image de fond + degrade sombre)
   ========================================================================== */
.hero {
	position: relative;
	overflow: hidden;
	padding-block: var(--space-2xl) calc(var(--space-2xl) + 1rem);
	color: var(--color-text-inverse);
}

/* Photo de fond du hero — repli mobile et image de base sous la video. */
.hero__bg {
	position: absolute;
	inset: 0;
	background-image: url('../images/hero/ales-nesetril-Im7lZjxeLhg-unsplash.jpg');
	background-size: cover;
	background-position: center;
}

/* Video de fond du hero (desktop/tablette uniquement — voir wp_is_mobile() dans front-page.php).
   object-position ajuste car le fichier source est au format portrait (9:16) :
   decale le cadrage vers le tiers superieur pour garder l'ecran/tableau de bord
   visible plutot qu'un centrage strict qui montrerait surtout l'epaule. */
.hero__video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center 30%;
}

/* Degrade sombre superpose a la photo/video pour garder le texte blanc lisible. */
.hero__overlay {
	position: absolute;
	inset: 0;
	background-image: linear-gradient(135deg, rgba(15,38,71,0.94) 0%, rgba(8,23,41,0.92) 55%, rgba(15,38,71,0.86) 100%);
}

.hero__inner { position: relative; z-index: 2; }
.hero__content { max-width: 760px; }
.hero__content h1 { color: var(--color-white); }
/* Accroche du hero agrandie pour plus de presence, tout en gardant un ecart net avec le H1. */
.hero__content .eyebrow { font-size: 1.15rem; }
.hero__lead { color: rgba(255,255,255,0.85); max-width: 620px; }
.hero__actions { display: flex; flex-wrap: wrap; gap: var(--space-sm); margin-top: var(--space-lg); }

@media (max-width: 600px) {
	.hero__actions { flex-direction: column; align-items: stretch; }
}

/* ==========================================================================
   2. BANDE "FAITS SAILLANTS"
   ========================================================================== */
.highlights {
	background-color: var(--color-white);
	border-bottom: 1px solid var(--color-border);
}
.highlights__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--space-lg);
	padding-block: var(--space-lg);
}
.highlight-item {
	display: flex;
	align-items: flex-start;
	gap: var(--space-sm);
}
.highlight-item__icon {
	flex: 0 0 auto;
	width: 48px;
	height: 48px;
	border-radius: 50%;
	background-color: var(--color-bg-light);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 1.35rem;
}
.highlight-item__body h3 { font-size: 1.05rem; margin-bottom: 0.3rem; }
.highlight-item__body p { color: var(--color-text-light); font-size: 0.92rem; margin-bottom: 0.4rem; }
.highlight-item__link { display: inline-block; font-weight: 700; font-size: 0.9rem; color: var(--color-teal); }
.highlight-item__link:hover { color: var(--color-navy); }

@media (max-width: 780px) {
	.highlights__grid { grid-template-columns: 1fr; gap: var(--space-md); }
}

/* La section "Pourquoi choisir AlliaTechnologie" reutilise les composants
   partages ".cards-grid" / ".service-card" definis dans style.css. */

/* ==========================================================================
   4. APERCU DES SECTEURS (meme format que l'apercu des services : voir
      les composants ".cards-grid" / ".service-card" partages dans style.css)
   ========================================================================== */
.sectors-preview__more { text-align: center; margin-top: var(--space-lg); }