/**
 * Hero d'accueil — Direction A+ (handoff design_handoff_ventigo_hero),
 * corrigé suite à l'audit visuel du 25/09/2026 :
 * - contenu regroupé dans .vg2-hero__inner (max-width centré) pour ne plus
 *   jamais coller au bord sur très grand écran ni en déborder ;
 * - header simplifié (4 liens + logo agrandi + un seul CTA, plus de faux
 *   numéro de téléphone) ;
 * - module d'estimation renforcé (contraste, focus, erreur) ;
 * - rythme vertical resserré pour que l'étape 1 tienne dans 900px de haut.
 *
 * Portée : le hero de l'accueil uniquement. Chargé uniquement sur la page
 * d'accueil (voir inc/enqueue.php) — n'affecte aucune autre page du site.
 */

/* ==========================================================================
   Polices auto-hébergées (RGPD / performance — recommandation du handoff §2)
   ========================================================================== */
@font-face {
	font-family: 'Instrument Serif';
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url('../fonts/instrument-serif-400.woff2') format('woff2');
}
@font-face {
	font-family: 'Archivo';
	font-style: normal;
	font-weight: 100 900;
	font-display: swap;
	src: url('../fonts/archivo-variable.woff2') format('woff2-variations'), url('../fonts/archivo-variable.woff2') format('woff2');
}

/* ==========================================================================
   Jetons de design (design_handoff_ventigo_hero/tokens.css, repris à l'identique)
   ========================================================================== */
.vg2-hero {
	--vg-night:          #07111F;
	--vg-surface:        #101D33;
	--vg-surface-sunken: #0A1421;
	--vg-field:          #0A1526;
	--vg-blue:           #175CD3;
	--vg-blue-hover:     #2F72E8;
	--vg-light:          #4C8DFF;
	--vg-light-wash:     rgba(76,141,255,.14);
	--vg-light-ring:     rgba(76,141,255,.20);
	--vg-white:          #F5F7FA;
	--vg-text:           #C9D3E0;
	--vg-nav:            #DCE3EC;
	--vg-metal:          #AAB4C2;
	--vg-muted:          #93A3B8;
	--vg-faint:          #7D8B9E;
	--vg-error:          #F2555A;
	--vg-border:         #2A3E60;
	--vg-border-field:   #33486D;
	--vg-border-hover:   #4A6188;
	--vg-border-soft:    #1B2A40;
	--vg-border-faint:   #1C2740;
	--vg-border-nav:     #3A4864;
	--vg-font-display: 'Instrument Serif', Georgia, serif;
	--vg-font-body:    'Archivo', system-ui, sans-serif;
	--vg-radius-sm: 4px;
	--vg-radius:    6px;
	--vg-radius-lg: 8px;
	--vg-shadow-card:        0 26px 60px rgba(0,0,0,.5);
	--vg-shadow-card-mobile: 0 20px 44px rgba(0,0,0,.5);
	--vg-ease-tap:   cubic-bezier(.2,.7,.3,1);
	--vg-ease-enter: cubic-bezier(.16,.84,.24,1);
}

@keyframes vg-rise { from { opacity:0; transform:translateY(14px); } to { opacity:1; transform:none; } }

/* ==========================================================================
   Conteneur — plein viewport ; le CONTENU vit dans .vg2-hero__inner, un
   conteneur centré à largeur maximale, pour ne jamais coller au bord ni
   déborder sur très grand écran (audit du 25/09).
   ========================================================================== */
.vg2-hero {
	position: relative;
	width: 100%;
	background: var(--vg-night);
	overflow: hidden;
	font-family: var(--vg-font-body);
	box-sizing: border-box;
}
/* La hauteur pleine page + contenu centré n'a de sens qu'au-delà de 1200px :
   en dessous, le contenu est bien plus court que l'écran (moins de champs,
   pas de barre de preuves) et le forcer créait un grand vide au centre
   (constaté lors des captures de contrôle). En dessous de 1200px, le hero
   suit simplement la hauteur de son contenu. */
@media (min-width: 1200px) {
	.vg2-hero { min-height: 100svh; max-height: 900px; }
}

.vg2-hero__inner {
	position: relative;
	z-index: 4;
	max-width: 1440px;
	margin: 0 auto;
	display: flex;
	flex-direction: column;
}
@media (min-width: 1200px) {
	.vg2-hero__inner { height: 100%; min-height: inherit; max-height: inherit; }
}

/* Emplacement de la scène automobile (actuellement vide — voir commentaire
   dans hero-v2.php). Reste en position absolue par rapport au hero plein
   viewport, pas à .vg2-hero__inner, pour pouvoir déborder plus tard comme
   prévu par le handoff. */
.vg2-hero__scene-wrap { position: absolute; left: 300px; right: -60px; top: 78px; height: 626px; z-index: 0; }
.vg2-hero__scene { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }
.vg2-hero__veil-v {
	position: absolute; left: 300px; right: -60px; top: 78px; height: 626px; z-index: 1; pointer-events: none;
	background: linear-gradient(180deg, rgba(7,17,31,.35) 0%, rgba(7,17,31,0) 24%, rgba(7,17,31,0) 44%, rgba(7,17,31,.72) 72%, #07111F 94%);
}
.vg2-hero__veil-h {
	position: absolute; left: 0; top: 0; bottom: 0; width: 820px; z-index: 2; pointer-events: none;
	background: linear-gradient(90deg, #07111F 0%, rgba(7,17,31,.94) 52%, rgba(7,17,31,0) 100%);
}
.vg2-hero__scene-spacer { display: none; }
@media (max-width: 1199px) {
	.vg2-hero__scene-wrap,
	.vg2-hero__veil-v { left: -70px; right: -70px; top: 52px; height: 200px; }
	.vg2-hero__veil-v { background: linear-gradient(180deg, rgba(7,17,31,.4), rgba(7,17,31,0) 30%, rgba(7,17,31,.85) 82%, #07111F 100%); }
	.vg2-hero__veil-h { display: none; }
	/* Réserve la hauteur de la scène dans le flux, pour que la promesse ne
	   chevauche jamais un futur visuel. Réduite (audit du 25/09) puisqu'il
	   n'y a plus de scène 3D à dégager pour l'instant. */
	.vg2-hero__scene-spacer { display: block; height: 64px; }
}

/* ==========================================================================
   En-tête — simplifié (audit du 25/09) : logo, 4 liens, un seul CTA.
   Plus de numéro de téléphone tant qu'il n'est pas validé.
   ========================================================================== */
.vg2-hero__header {
	position: relative; z-index: 4;
	display: flex; align-items: center;
	padding: 24px 64px;
	gap: 28px;
}
.vg2-hero__logo-link { display: block; flex: none; margin-right: 12px; }
.vg2-hero__logo { height: 58px; width: auto; display: block; }
.vg2-hero__nav { display: flex; align-items: center; gap: 30px; font-size: 15px; color: var(--vg-nav); flex: 1; }
.vg2-hero__nav a { color: var(--vg-nav); padding-bottom: 4px; border-bottom: 1px solid transparent; text-decoration: none; white-space: nowrap; transition: color .16s ease, border-color .16s ease; }
.vg2-hero__nav a:hover, .vg2-hero__nav a:focus-visible { color: #FFFFFF; border-bottom-color: var(--vg-light); }
.vg2-hero__cta {
	flex: none;
	background: var(--vg-blue); color: #FFFFFF !important; border: 0; border-radius: var(--vg-radius);
	padding: 12px 22px; text-decoration: none; font-size: 14.5px; font-weight: 600; white-space: nowrap;
	transition: background .16s ease;
}
.vg2-hero__cta:hover, .vg2-hero__cta:focus-visible { background: var(--vg-blue-hover); }
.vg2-hero__menu-toggle {
	display: none; flex-direction: column; gap: 5px; padding: 8px 4px; background: none; border: none; cursor: pointer; margin-left: auto;
}
.vg2-hero__menu-toggle span { width: 22px; height: 1px; background: var(--vg-white); }
.vg2-hero__mobile-nav { display: none; }

/* Écran intermédiaire (1200–1439px) : resserrer avant de passer au menu
   hamburger, sans jamais compresser un intitulé sur deux lignes (audit §9). */
@media (min-width: 1200px) and (max-width: 1439px) {
	.vg2-hero__header { padding: 22px 40px; gap: 20px; }
	.vg2-hero__nav { gap: 20px; }
	.vg2-hero__logo { height: 50px; }
}

@media (max-width: 1199px) {
	.vg2-hero__header { padding: 16px 22px; }
	.vg2-hero__logo { height: 42px; }
	.vg2-hero__nav, .vg2-hero__cta { display: none; }
	.vg2-hero__menu-toggle { display: flex; }
	.vg2-hero__mobile-nav {
		position: relative; z-index: 4; margin: 0 22px 8px;
		background: var(--vg-surface); border: 1px solid var(--vg-border); border-radius: var(--vg-radius-lg);
		padding: 10px; display: none; flex-direction: column;
	}
	.vg2-hero__mobile-nav.is-open { display: flex; }
	.vg2-hero__mobile-nav-head {
		display: flex; align-items: center; justify-content: space-between;
		padding: 6px 10px 10px; margin-bottom: 4px; border-bottom: 1px solid var(--vg-border-soft);
		font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--vg-faint);
	}
	.vg2-hero__mobile-nav-close {
		background: none; border: none; color: var(--vg-white); font-size: 22px; line-height: 1;
		width: 32px; height: 32px; cursor: pointer; border-radius: var(--vg-radius-sm);
	}
	.vg2-hero__mobile-nav-close:hover, .vg2-hero__mobile-nav-close:focus-visible { background: var(--vg-surface-sunken); }
	.vg2-hero__mobile-nav a {
		color: var(--vg-nav); text-decoration: none; font-size: 15px; padding: 13px 10px;
		border-bottom: 1px solid var(--vg-border-soft);
	}
	.vg2-hero__mobile-nav a:last-child { border-bottom: none; }
	.vg2-hero__mobile-nav a.vg2-hero__cta-mobile {
		color: var(--vg-white); font-weight: 600; text-align: center; margin-top: 8px;
		background: var(--vg-blue); border-radius: var(--vg-radius);
	}
}

/* ==========================================================================
   Colonne promesse + module (flux normal, cf. § Comportement responsive)
   ========================================================================== */
/* Deux colonnes équilibrées à partir de 1200px (audit du 25/09, passe 2) :
   la promesse occupe ~52% de la largeur disponible, le module ~42-44%,
   verticalement centrés l'un par rapport à l'autre. En dessous de 1200px,
   empilement vertical conservé (titre puis formulaire). */
.vg2-hero__column {
	position: relative; z-index: 4;
	display: flex; flex-direction: row; align-items: center;
	max-width: none;
	padding: 0 64px;
	flex: 1;
	gap: 64px;
	min-height: 0;
}
@media (max-width: 1199px) {
	.vg2-hero__column { flex-direction: column; align-items: stretch; padding: 8px 22px 40px; flex: none; justify-content: flex-start; gap: 22px; margin-top: 0; }
}

.vg2-hero__promise { flex: 1 1 52%; min-width: 0; opacity: 0; transform: translateY(14px); animation: vg-rise .8s .55s var(--vg-ease-enter) both; }
.vg2-hero__eyebrow { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; font-size: 15px; color: var(--vg-metal); }
.vg2-hero__eyebrow span.line { width: 26px; height: 1px; background: var(--vg-light); display: block; flex: none; }
.vg2-hero__promise h1 {
	margin: 0; font-family: var(--vg-font-display); font-weight: 400;
	font-size: 46px; line-height: 1.08; letter-spacing: -.015em; color: var(--vg-white);
	text-wrap: balance; max-width: 15ch;
}
.vg2-hero__subtitle { margin: 14px 0 0; max-width: 42ch; font-size: 16px; line-height: 1.5; color: var(--vg-text); }

/* Accès secondaire vers l'accompagnement import (demande client du 25/09) :
   simple lien texte, jamais un second bouton concurrent du formulaire. */
.vg2-hero__secondary-link {
	display: inline-block; margin: 18px 0 0; font-size: 14px; color: var(--vg-metal);
	text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--vg-border-field);
	transition: color .16s ease, text-decoration-color .16s ease;
}
.vg2-hero__secondary-link:hover, .vg2-hero__secondary-link:focus-visible { color: var(--vg-white); text-decoration-color: var(--vg-light); }

.vg2-hero__module { flex: 1 1 44%; max-width: 460px; min-width: 0; }

@media (max-width: 1199px) {
	.vg2-hero__promise { flex: none; }
	.vg2-hero__eyebrow { font-size: 13px; margin-bottom: 9px; }
	.vg2-hero__eyebrow span.line { display: none; }
	.vg2-hero__promise h1 { font-size: 28px; line-height: 1.1; max-width: none; }
	.vg2-hero__subtitle { display: none; }
	.vg2-hero__module { flex: none; max-width: none; }
}
@media (max-width: 767px) {
	.vg2-hero__eyebrow { display: none; }
	/* Le formulaire suit directement la promesse ; l'Import reste accessible par le menu,
	   sa section d'accueil et le pied de page (demande du 16/10). */
	.vg2-hero__secondary-link { display: none; }
}
/* Tablette : titre sur deux lignes équilibrées plutôt qu'une seule longue
   ligne (audit, point 2). */
@media (min-width: 768px) and (max-width: 1199px) {
	.vg2-hero__promise h1 { max-width: 460px; margin: 0 auto; font-size: 32px; line-height: 1.18; }
}

/* ==========================================================================
   Module d'estimation — contraste et états renforcés (audit §6)
   ========================================================================== */
.vg2-hero__module {
	background: var(--vg-surface); border: 1px solid var(--vg-border); border-radius: var(--vg-radius-lg);
	padding: 20px 22px 18px; box-shadow: var(--vg-shadow-card), inset 0 1px 0 rgba(255,255,255,.03);
	opacity: 0; transform: translateY(14px); animation: vg-rise .8s .95s var(--vg-ease-enter) both;
}
.vg2-hero__module-head { display: flex; align-items: center; justify-content: space-between; }
.vg2-hero__module-title { font-size: 16px; font-weight: 600; color: var(--vg-white); }
.vg2-hero__module-step { font-size: 13px; color: var(--vg-metal); font-variant-numeric: tabular-nums; }

.vg2-hero__progress { display: flex; gap: 5px; margin-top: 12px; }
.vg2-hero__progress span { flex: 1; height: 3px; border-radius: 2px; background: var(--vg-border); }
.vg2-hero__progress span.is-active { background: var(--vg-light); }

.vg2-hero__switch { display: flex; gap: 8px; margin-top: 12px; padding: 4px; background: var(--vg-surface-sunken); border: 1px solid var(--vg-border-soft); border-radius: var(--vg-radius); }
.vg2-hero__switch button {
	flex: 1; border: 0; border-radius: var(--vg-radius-sm); font-family: var(--vg-font-body);
	font-size: 14px; font-weight: 500; padding: 10px; cursor: pointer;
	background: transparent; color: var(--vg-metal);
	transition: background .16s ease, color .16s ease;
}
.vg2-hero__switch button:focus-visible { outline: 2px solid var(--vg-light); outline-offset: 2px; }
.vg2-hero__switch button.is-active { background: var(--vg-blue); color: #FFFFFF; }

.vg2-hero__field { display: flex; flex-direction: column; gap: 6px; margin-top: 12px; }
.vg2-hero__field span { font-size: 13.5px; font-weight: 500; color: var(--vg-text); }
.vg2-hero__field input {
	background: var(--vg-field); border: 1px solid var(--vg-border-field); border-radius: var(--vg-radius);
	color: var(--vg-white); font-family: var(--vg-font-body); font-size: 19px; letter-spacing: .04em;
	padding: 12px 14px; outline: none; width: 100%; box-sizing: border-box;
	transition: border-color .14s ease, box-shadow .14s ease;
}
.vg2-hero__field input::placeholder { color: var(--vg-faint); }
.vg2-hero__field input:hover { border-color: var(--vg-border-hover); }
.vg2-hero__field input:focus { border-color: var(--vg-light); box-shadow: 0 0 0 3px var(--vg-light-ring); }
.vg2-hero__field-error { display: none; font-size: 12.5px; color: var(--vg-error); }
.vg2-hero__field.is-invalid input { border-color: var(--vg-error); box-shadow: 0 0 0 3px rgba(242,85,90,.16); }
.vg2-hero__field.is-invalid .vg2-hero__field-error { display: block; }

.vg2-hero__submit {
	width: 100%; margin-top: 14px; background: var(--vg-blue); color: #FFFFFF; border: 0; border-radius: var(--vg-radius);
	font-family: var(--vg-font-body); font-size: 16px; font-weight: 600; padding: 14px; cursor: pointer;
	transition: background .16s ease, transform .16s var(--vg-ease-tap);
}
.vg2-hero__submit:hover { background: var(--vg-blue-hover); }
.vg2-hero__submit:focus-visible { outline: 2px solid var(--vg-light); outline-offset: 2px; }
.vg2-hero__submit:active { transform: translateY(1px) scale(.995); }

.vg2-hero__reassurance { margin: 9px 0 0; font-size: 13px; line-height: 1.4; color: var(--vg-muted); text-align: center; }

.vg2-hero__module-proof {
	display: none; margin: 12px 0 0; padding-top: 12px; border-top: 1px solid var(--vg-border-soft);
	font-size: 12px; line-height: 1.6; color: var(--vg-faint);
}

/* Libellés desktop / mobile du sélecteur de mode de saisie (immatriculation / marque et modèle) */
.vg2-hero .vg2-label-mobile { display: none; }
@media (max-width: 1199px) {
	.vg2-hero .vg2-label-desktop { display: none; }
	.vg2-hero .vg2-label-mobile { display: inline; }
}

@media (max-width: 1199px) {
	.vg2-hero__module { padding: 18px; box-shadow: var(--vg-shadow-card-mobile); }
	.vg2-hero__module-title { font-size: 15px; }
	.vg2-hero__module-step { font-size: 12.5px; }
	.vg2-hero__switch { gap: 6px; }
	.vg2-hero__switch button { font-size: 13px; padding: 11px 6px; }
	.vg2-hero__field input { font-size: 18px; padding: 13px; }
	.vg2-hero__submit { margin-top: 12px; font-size: 16px; padding: 15px; }
	.vg2-hero__submit:active { transform: scale(.99); }
	.vg2-hero__module-proof { display: block; }
}
/* Tablette (768–1199px) : gabarit mobile, module élargi et centré (§ responsive) */
@media (min-width: 768px) and (max-width: 1199px) {
	.vg2-hero__module { max-width: 568px; margin: 0 auto; }
	.vg2-hero__promise { text-align: center; }
	.vg2-hero__eyebrow { justify-content: center; }
}

/* Zones tactiles ≥44px (consigne du handoff) — déjà couvert par les padding ci-dessus. */

/* ==========================================================================
   Barre de preuves (desktop uniquement — reprise dans le module en mobile)
   ========================================================================== */
.vg2-hero__proof {
	position: relative; z-index: 4;
	display: flex; justify-content: space-between; align-items: center; gap: 24px;
	border-top: 1px solid var(--vg-border-faint);
	padding: 10px 64px 16px;
	font-size: 13px; color: var(--vg-muted);
}
.vg2-hero__proof a { color: var(--vg-nav); border-bottom: 1px solid var(--vg-border-nav); padding-bottom: 3px; text-decoration: none; transition: color .16s ease, border-color .16s ease; white-space: nowrap; }
.vg2-hero__proof a:hover, .vg2-hero__proof a:focus-visible { color: #FFFFFF; border-bottom-color: var(--vg-light); }
@media (max-width: 1199px) {
	.vg2-hero__proof { display: none; }
}

/* ==========================================================================
   Accessibilité — mouvement réduit (le contenu s'affiche directement,
   consigne explicite du handoff)
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
	.vg2-hero__promise, .vg2-hero__module { animation-duration: .001s !important; opacity: 1 !important; transform: none !important; }
}

/* ==========================================================================
   Finition desktop (16/10) — sans voiture 3D, la composition doit paraître
   volontairement minimaliste et non « en attente d'un visuel » : titre plus
   présent, module plus ample, colonnes rapprochées. Architecture inchangée
   (deux colonnes alignées sur les bords du header) ; tablette et mobile
   intouchés. Valeurs fluides : 1200 px -> 1440 px -> 1600 px.
   ========================================================================== */
@media (min-width: 1200px) {
	.vg2-hero__promise h1 { font-size: clamp(54px, 4.7vw, 70px); line-height: 1.04; max-width: 17ch; }
	.vg2-hero__subtitle { margin-top: 22px; max-width: 40ch; font-size: 18px; line-height: 1.55; }
	.vg2-hero__secondary-link { margin-top: 26px; font-size: 15px; }
	.vg2-hero__column { gap: 48px; }
	.vg2-hero__module { flex: 0 0 clamp(480px, 39vw, 560px); max-width: none; padding: 28px 30px 24px; }
	.vg2-hero__module-title { font-size: 18px; }
	.vg2-hero__module-step { font-size: 14px; }
	.vg2-hero__progress { margin-top: 16px; }
	.vg2-hero__switch { margin-top: 18px; }
	.vg2-hero__switch button { font-size: 15px; padding: 12px; }
	.vg2-hero__field { margin-top: 18px; gap: 8px; }
	.vg2-hero__field span { font-size: 14.5px; }
	.vg2-hero__field input { font-size: 21px; padding: 15px 16px; }
	.vg2-hero__submit { margin-top: 20px; padding: 17px; font-size: 17px; }
	.vg2-hero__reassurance { margin-top: 14px; font-size: 15px; }
}