/*
 * pages/home.css — Styles spécifiques à la page d'accueil.
 * Chargé conditionnellement via inc/enqueue.php (body.front-page).
 * Sections ajoutées progressivement :
 *   - B1 : hero-home (actuel)
 *   - B2 : carrousel logos clients (à venir)
 *   - B3 : stats anthracite (à venir)
 *   - B4 : témoignages (à venir)
 *   - B5 : CTA final rouge (à venir)
 */

/* ════════════════════════════════════════════════════════════════════
 * HERO HOME — B1
 * ════════════════════════════════════════════════════════════════════ */

.hero-home {
	position:   relative;
	padding:    var(--space-24) 0 var(--space-16);
	background: var(--surface);
	overflow:   hidden;
}

/* Halo rouge radial très subtil en haut — 7 % opacité, charte stricte. */
.hero-home__bg-pattern {
	position:       absolute;
	inset:          0;
	pointer-events: none;
	z-index:        0;
	background:     radial-gradient(
		ellipse 60% 50% at 50% 0%,
		color-mix(in srgb, var(--bw-red) 7%, transparent) 0%,
		transparent 60%
	);
}

.hero-home__container {
	position: relative;
	z-index:  1;
}

.hero-home__content {
	max-width:  860px;
	margin:     0 auto;
	text-align: center;
}

/* ── Kicker — pill outline rouge ──────────────────────────────────── */

.hero-home__kicker {
	display:         inline-block;
	padding:         var(--space-2) var(--space-4);
	border:          1px solid var(--bw-red);
	border-radius:   999px;
	background:      transparent;
	color:           var(--bw-red);
	font-size:       var(--text-xs);
	font-weight:     var(--fw-semi);
	letter-spacing:  0.8px;
	text-transform:  uppercase;
	margin-bottom:   var(--space-8);
}

/* ── Titre principal ──────────────────────────────────────────────── */

.hero-home__title {
	font-family:     var(--font-display);
	font-size:       var(--text-5xl);
	font-weight:     700;
	line-height:     var(--lh-tight);
	color:           var(--fg);
	margin:          0 0 var(--space-6);
	letter-spacing:  -0.015em;
}

.hero-home__title--accent {
	color:       var(--bw-red);
	display:     inline-block;
	font-style:  italic;
	font-weight: 700;
}

/* Caret clignotant pendant la frappe typewriter (JS gère le contenu). */
.hero-home__title--accent[data-typewriter]::after {
	content:         '';
	display:         inline-block;
	width:           3px;
	height:          0.9em;
	margin-left:     4px;
	background:      var(--bw-red);
	vertical-align:  text-bottom;
	animation:       heroCaretBlink 0.9s steps(2) infinite;
}

.hero-home__title--accent[data-typewriter].is-done::after {
	animation: none;
	opacity:   0;
}

@keyframes heroCaretBlink {
	0%, 50%      { opacity: 1; }
	50.01%, 100% { opacity: 0; }
}

/* ── Subtitle ─────────────────────────────────────────────────────── */

.hero-home__subtitle {
	font-size:    var(--text-lg);
	font-weight:  var(--fw-regular);
	color:        var(--fg-muted);
	line-height:  var(--lh-relaxed);
	max-width:    640px;
	margin:       0 auto var(--space-16);
	text-align:   center;
}

/* ── CTAs ─────────────────────────────────────────────────────────── */

.hero-home__ctas {
	display:         flex;
	gap:             var(--space-4);
	justify-content: center;
	flex-wrap:       wrap;
	margin-bottom:   var(--space-16);
}

.hero-home__ctas .btn__arrow {
	display:        inline-block;
	font-family:    var(--font-mono);
	font-size:      0.95em;
	letter-spacing: 0;                   /* annule 0.02em hérité du .btn-primary */
	transition:     transform var(--transition);
}

.hero-home__ctas .btn:hover .btn__arrow,
.hero-home__ctas .btn:focus-visible .btn__arrow {
	transform: translateX(3px);
}

/* ── Badges qualifications ────────────────────────────────────────── */

.hero-home__badges {
	list-style:      none;
	padding:         0;
	margin:          0;
	display:         flex;
	justify-content: center;
	flex-wrap:       wrap;
	gap:             var(--space-3) var(--space-6);
}

.hero-home__badge {
	display:     inline-flex;
	align-items: center;
	gap:         var(--space-2);
	font-size:   var(--text-sm);
	font-weight: var(--fw-medium);
	color:       var(--fg-muted);
}

.hero-home__badge-dot {
	width:         6px;
	height:        6px;
	border-radius: 50%;
	background:    var(--bw-red);
	flex-shrink:   0;
}

/* ════════════════════════════════════════════════════════════════════
 * RESPONSIVE — HERO HOME
 * ════════════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {
	.hero-home {
		padding: var(--space-16) 0 var(--space-12);
	}
	.hero-home__title {
		font-size: var(--text-4xl);
	}
	.hero-home__subtitle {
		font-size: var(--text-base);
	}
	.hero-home__ctas {
		flex-direction: column;
		align-items:    stretch;
	}
	.hero-home__ctas .btn {
		width: 100%;
	}
}

@media (max-width: 480px) {
	.hero-home__title {
		font-size: var(--text-3xl);
	}
}

/* ════════════════════════════════════════════════════════════════════
 * CLIENT LOGOS — B2 (bande défilante infinie)
 * ════════════════════════════════════════════════════════════════════ */

.client-logos {
	padding:       var(--space-12) 0;
	background:    var(--bg);
	overflow:      hidden;
	border-top:    1px solid var(--border);
	border-bottom: 1px solid var(--border);
}

.client-logos__label {
	text-align:      center;
	font-size:       var(--text-xs);
	font-weight:     var(--fw-semi);
	letter-spacing:  1.5px;
	text-transform:  uppercase;
	color:           var(--fg-muted);
	margin:          0 0 var(--space-8);
}

/* Wrapper avec mask fade gauche/droite pour entrée/sortie en fondu. */
.client-logos__track-wrap {
	overflow: hidden;
	mask-image: linear-gradient(
		to right,
		transparent 0,
		black var(--space-16),
		black calc(100% - var(--space-16)),
		transparent 100%
	);
	-webkit-mask-image: linear-gradient(
		to right,
		transparent 0,
		black var(--space-16),
		black calc(100% - var(--space-16)),
		transparent 100%
	);
}

/* Track défilant — width: fit-content pour inclure l'ensemble des items.
   L'animation translate de 0 à -50% : le second set (dupliqué) arrive
   exactement là où le premier commençait → boucle seamless. */
.client-logos__track {
	display:   flex;
	width:     fit-content;
	animation: clientLogosScroll 40s linear infinite;
}

.client-logos__track:hover {
	animation-play-state: paused;
}

/* Items = étiquettes typographiques monospace uppercase. Séparateur ·
   rouge via ::after (cf. règle suivante) — y compris après le dernier
   item de chaque set pour maintenir le loop seamless à -50%. */
.client-logos__item {
	display:        inline-flex;
	align-items:    center;
	padding:        0;
	margin:         0;
	border:         none;
	border-radius:  0;
	background:     none;
	color:          var(--fg-muted);
	font-family:    var(--font-mono);
	font-size:      var(--text-sm);
	font-weight:    var(--fw-semi);
	text-transform: uppercase;
	letter-spacing: 0.14em;
	white-space:    nowrap;
	flex-shrink:    0;
}

.client-logos__item::after {
	content:     '·';
	color:       var(--bw-red);
	margin:      0 var(--space-6);
	font-size:   1.3em;
	line-height: 1;
	font-weight: var(--fw-bold);
}

/* Logos clients réels (PNG N&B alpha, recadrés tight autour du contenu).
   Approche "surface fixe" : chaque img occupe un rectangle 120×48 px,
   object-fit: contain adapte le contenu. Les logos larges (Thales 7.88:1)
   sont letterboxés verticalement, les logos compacts (CNP 1.39:1, Clear
   Channel 1.5:1) sont letterboxés horizontalement — mais chaque logo a
   la même empreinte perçue dans la bande.
   Contrebalance le crop tight : les PNG ayant des ratios très différents,
   le slot uniforme empêche Thales de dominer.
   grayscale + opacity homogénéisent la palette ; hover ramène à 100% (la
   bande se met en pause au hover du track, l'effet est perceptible). */
.client-logos__img {
	display:         block;
	width:           160px;
	height:          64px;
	object-fit:      contain;
	object-position: center;
	filter:          grayscale(1);
	opacity:         0.65;
	transition:      opacity 300ms ease, filter 300ms ease;
}

.client-logos__item:hover .client-logos__img,
.client-logos__track:hover .client-logos__img {
	opacity: 1;
}

/* Dark mode : les PNG N&B ont des pixels ~noirs, invisibles sur anthracite.
   invert(1) + brightness(1.2) les rend blancs avec un léger éclat ; le
   grayscale préserve l'absence de couleur pour une bande homogène. */
[data-theme="dark"] .client-logos__img {
	filter: grayscale(1) invert(1) brightness(1.2);
}

@keyframes clientLogosScroll {
	0%   { transform: translateX(0); }
	100% { transform: translateX(-50%); }
}

/* ── Responsive B2 ────────────────────────────────────────────────── */

@media (max-width: 768px) {
	.client-logos {
		padding: var(--space-8) 0;
	}
	.client-logos__item {
		font-size:      var(--text-xs);
		letter-spacing: 0.1em;
	}
	.client-logos__img {
		width:  120px;
		height: 48px;
	}
	.client-logos__item::after {
		margin: 0 var(--space-4);
	}
	.client-logos__track {
		animation-duration: 30s;
	}
}

/* Stats grid .home-stats — pattern partagé (base + responsive + stagger
   + red line draw + reduced-motion) promu dans components.css pour
   partage avec tpl-a-propos.php. Le template-part block-stats.php reste
   le point d'entrée unique du markup. */

/* ════════════════════════════════════════════════════════════════════
 * REDUCED MOTION
 * ════════════════════════════════════════════════════════════════════ */

@media (prefers-reduced-motion: reduce) {
	.hero-home__title--accent[data-typewriter]::after {
		animation: none;
		display:   none;
	}
	.hero-home__ctas .btn__arrow {
		transition: none;
	}
	.client-logos__track {
		animation:        none;
		transform:        none;
		flex-wrap:        wrap;
		justify-content:  center;
		gap:              var(--space-4);
	}
	.client-logos__item {
		margin-right: 0;
	}
}

/* ════════════════════════════════════════════════════════════════════
 * V3 — MOTION ORCHESTRÉ
 * Reveals (P7) / Hero sequence (E3) / Red line draw (E1) /
 * Signature clip-path (B3).
 *
 * Tout est gaté par .js-reveals-ready sur <html> : sans JS (ou avant
 * exécution), les éléments restent visibles par défaut. Le gate est
 * posé en tout début d'IIFE par home-animations.js → pas de FOUC.
 * ════════════════════════════════════════════════════════════════════ */

/* ── P7 stagger — scopé aux grilles home (règle générique .bw-reveal
       promue dans components.css) ──────────────────────────────────── */

/* Stagger 0/80/160/240 ms scopé aux deux grilles 4-items */
.block-piliers .auto-grid > .bw-reveal:nth-child(1) { --bw-reveal-delay:   0ms; }
.block-piliers .auto-grid > .bw-reveal:nth-child(2) { --bw-reveal-delay:  80ms; }
.block-piliers .auto-grid > .bw-reveal:nth-child(3) { --bw-reveal-delay: 160ms; }
.block-piliers .auto-grid > .bw-reveal:nth-child(4) { --bw-reveal-delay: 240ms; }

/* Stagger .home-stats__items + red line draw .home-stats::before :
   promus dans components.css avec le reste du pattern stats. */

/* ── E1 — Red line draw footer home uniquement ───────────────────── */

/* Footer : override du border-top statique (layout.css) sur home uniquement —
   on le remplace par un ::before animé. Sur les autres pages, le border-top
   fallback reste actif (home.css n'est pas chargé). */
body.front-page .site-footer {
	border-top: 0;
}

html.js-reveals-ready body.front-page .site-footer::before {
	content:    '';
	position:   absolute;
	top:        0;
	left:       0;
	height:     1px;
	width:      0;
	background: var(--bw-red);
	transition: width 700ms cubic-bezier(.22, .61, .36, 1);
	z-index:    2;
}

html.js-reveals-ready body.front-page .site-footer.is-visible::before {
	width: 100%;
}

/* ── B3 — Signature footer : clip-path reveal "signée au stylo" ──── */

html.js-reveals-ready body.front-page .site-footer__signature {
	clip-path:  inset(0 100% 0 0);
	transition: clip-path 900ms cubic-bezier(.22, .61, .36, 1);
}

html.js-reveals-ready body.front-page .site-footer.is-visible .site-footer__signature {
	clip-path: inset(0 0 0 0);
}

/* ── E3 — Hero orchestré first-load sequence ─────────────────────── */
/*
 * Pas de JS requis : les animations démarrent au parse du CSS (first
 * paint). `both` fill-mode → élément à opacity:0 pendant le delay, puis
 * anime vers opacity:1. Le typewriter JS existant joue en parallèle sur
 * .hero-home__title--accent (startDelay 300ms côté JS).
 */

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

@keyframes bwHeroEnterScale {
	from { opacity: 0; transform: scale(0.98); }
	to   { opacity: 1; transform: scale(1); }
}

.hero-home__kicker   { animation: bwHeroEnter      500ms cubic-bezier(.22, .61, .36, 1)   0ms both; }
.hero-home__title    { animation: bwHeroEnter      500ms cubic-bezier(.22, .61, .36, 1) 120ms both; }
.hero-home__subtitle { animation: bwHeroEnter      500ms cubic-bezier(.22, .61, .36, 1) 180ms both; }
.hero-home__ctas     { animation: bwHeroEnterScale 500ms cubic-bezier(.22, .61, .36, 1) 320ms both; }
.hero-home__badges   { animation: bwHeroEnter      500ms cubic-bezier(.22, .61, .36, 1) 460ms both; }

/* ── prefers-reduced-motion : tout neutraliser ───────────────────── */

@media (prefers-reduced-motion: reduce) {
	html.js-reveals-ready body.front-page .site-footer::before {
		width:      100%;
		transition: none;
	}

	html.js-reveals-ready body.front-page .site-footer__signature {
		clip-path:  none;
		transition: none;
	}

	.hero-home__kicker,
	.hero-home__title,
	.hero-home__subtitle,
	.hero-home__ctas,
	.hero-home__badges {
		animation: none;
	}
}