/**
 * Accueil — sections situées sous le hero (refonte du 16/10/2026).
 *
 * Continuité avec la direction A+ du hero : bleu nuit, blanc froid, bleu
 * VENTIGO ; Instrument Serif (titres) + Archivo (texte), polices déjà
 * auto-hébergées et déclarées dans hero-v2.css (dont ce fichier dépend).
 * Les jetons reprennent à l'identique les valeurs du hero (scope .vg-home,
 * hero-v2.css restant intouché).
 *
 * Parti pris : compositions éditoriales sur filets fins, pas de cartes
 * arrondies, pas de glassmorphism, aucun effet 3D, aucune animation
 * d'apparition. Seules transitions : survol des liens/boutons, et affichage
 * de la barre d'estimation mobile une fois le hero dépassé — toutes
 * neutralisées par prefers-reduced-motion.
 *
 * Chargé uniquement sur l'accueil (voir inc/enqueue.php).
 */

.vg-home {
	--vg-night:      #07111F;
	--vg-night-2:    #0A1421;
	--vg-surface:    #101D33;
	--vg-blue:       #175CD3;
	--vg-blue-hover: #2F72E8;
	--vg-light:      #4C8DFF;
	--vg-cold:       #F5F7FA;
	--vg-cold-2:     #E9EEF5;
	--vg-ink:        #07111F;
	--vg-ink-2:      #33445C; /* texte courant sur fond clair — 8:1 */
	--vg-ink-3:      #566882; /* texte secondaire sur fond clair — 5,3:1 */
	--vg-line-l:     #CFD9E6;
	--vg-line-d:     #22344F;
	--vg-text-d:     #C9D3E0; /* texte courant sur fond sombre */
	--vg-muted-d:    #93A3B8; /* texte secondaire sur fond sombre — 7:1 */
	--vg-font-display: 'Instrument Serif', Georgia, serif;
	--vg-font-body:    'Archivo', system-ui, sans-serif;

	font-family: var(--vg-font-body);
	font-size: 16px;
	line-height: 1.6;
	color: var(--vg-ink-2);
}
.vg-home *, .vg-home *::before, .vg-home *::after { box-sizing: border-box; }
/* Remises à zéro à spécificité nulle (:where) : elles ne doivent jamais l'emporter
   sur les classes de composants ci-dessous. */
:where(.vg-home) :is(h2, h3, p, dl, dd, ol) { margin: 0; }
:where(.vg-home) :is(h2, h3) { color: inherit; font-weight: inherit; line-height: inherit; }
:where(.vg-home) ol { padding: 0; list-style: none; }

/* --------------------------------------------------------------------------
   Sections : fonds alternés, gabarit commun
   -------------------------------------------------------------------------- */
.vg-sec { position: relative; padding: 112px 0; }
.vg-sec--light { background: var(--vg-cold); color: var(--vg-ink-2); }
.vg-sec--white { background: #FFFFFF; color: var(--vg-ink-2); }
.vg-sec--alt   { background: #FFFFFF; }
.vg-sec--tint  { background: var(--vg-cold-2); color: var(--vg-ink-2); }
.vg-sec--dark  { background: var(--vg-night); color: var(--vg-text-d); }
.vg-sec--deep  { background: var(--vg-night-2); }

.vg-sec__in { max-width: 1440px; margin: 0 auto; padding: 0 64px; }

.vg-eyebrow {
	display: flex; align-items: center; gap: 14px;
	margin-bottom: 20px;
	font-size: 13px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase;
	color: var(--vg-blue);
}
.vg-eyebrow::before { content: ""; width: 26px; height: 1px; background: currentColor; flex: none; }
.vg-sec--dark .vg-eyebrow { color: var(--vg-light); }

.vg-h2 {
	font-family: var(--vg-font-display); font-weight: 400;
	font-size: clamp(34px, 3.7vw, 54px); line-height: 1.06; letter-spacing: -.015em;
	color: var(--vg-ink); text-wrap: balance; max-width: 20ch;
}
.vg-sec--dark .vg-h2 { color: #F5F7FA; }

.vg-lead { margin-top: 22px; max-width: 58ch; font-size: 18px; line-height: 1.6; color: var(--vg-ink-2); }
.vg-sec--dark .vg-lead { color: var(--vg-text-d); }

.vg-head--row { display: flex; align-items: flex-end; justify-content: space-between; gap: 32px; margin-bottom: 56px; }

/* Règle graduée (clin d'œil à un cadran de tableau de bord), très discrète */
.vg-ticks {
	display: block; height: 14px; margin: 56px 0 0; color: var(--vg-ink); opacity: .28;
	background:
		linear-gradient(currentColor, currentColor) left bottom / 100% 1px no-repeat,
		repeating-linear-gradient(90deg, currentColor 0 1px, transparent 1px 12px) left bottom / 100% 6px no-repeat,
		repeating-linear-gradient(90deg, currentColor 0 1px, transparent 1px 60px) left bottom / 100% 14px no-repeat;
}
.vg-sec--dark .vg-ticks { color: #FFFFFF; opacity: .22; }

/* --------------------------------------------------------------------------
   Liens et boutons
   -------------------------------------------------------------------------- */
.vg-link {
	display: inline-flex; align-items: center; gap: 10px; align-self: flex-start;
	min-height: 44px; /* zone de toucher confortable ; le soulignement est un text-decoration, pas une bordure */
	font-size: 15.5px; font-weight: 600; color: var(--vg-blue);
	text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 6px;
	transition: color .16s ease;
}
.vg-link::after { content: "→"; display: inline-block; text-decoration: none; transition: transform .16s ease; }
.vg-link:hover::after, .vg-link:focus-visible::after { transform: translateX(4px); }
.vg-sec--dark .vg-link { color: var(--vg-light); }
.vg-link:hover { color: var(--vg-blue-hover); }

.vg-btn {
	display: inline-flex; align-items: center; justify-content: center; align-self: flex-start;
	padding: 15px 26px; border: 1px solid var(--vg-blue); border-radius: 6px;
	background: var(--vg-blue); color: #FFFFFF;
	font-family: var(--vg-font-body); font-size: 15.5px; font-weight: 600; text-decoration: none;
	transition: background .16s ease, color .16s ease, border-color .16s ease;
}
.vg-btn:hover, .vg-btn:focus-visible { background: var(--vg-blue-hover); border-color: var(--vg-blue-hover); color: #FFFFFF; }
.vg-btn--ghost { background: transparent; border-color: var(--vg-ink); color: var(--vg-ink); }
.vg-btn--ghost:hover, .vg-btn--ghost:focus-visible { background: var(--vg-ink); border-color: var(--vg-ink); color: #FFFFFF; }
.vg-btn--lg { padding: 18px 34px; font-size: 16.5px; }

.vg-home a:focus-visible, .vg-home summary:focus-visible { outline: 2px solid var(--vg-blue); outline-offset: 4px; }
.vg-sec--dark a:focus-visible { outline-color: var(--vg-light); }

/* --------------------------------------------------------------------------
   1. Solutions
   -------------------------------------------------------------------------- */
.vg-solutions { display: grid; grid-template-columns: repeat(3, 1fr); }
.vg-solution {
	position: relative; display: flex; flex-direction: column; gap: 16px;
	padding: 48px 40px 44px; border-left: 1px solid var(--vg-line-l);
}
.vg-solution:first-child { border-left: 0; padding-left: 0; }
.vg-solution:last-child { padding-right: 0; }
.vg-solution--featured { background: #FFFFFF; box-shadow: inset 0 3px 0 var(--vg-blue); }
.vg-solution__idx { font-size: 13px; font-weight: 600; letter-spacing: .12em; color: var(--vg-blue); font-variant-numeric: tabular-nums; }
.vg-solution__flag { position: absolute; top: 48px; right: 40px; font-size: 12px; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; color: var(--vg-blue); }
.vg-solution h3 { font-family: var(--vg-font-display); font-size: 36px; line-height: 1.08; letter-spacing: -.01em; color: var(--vg-ink); }
.vg-solution p { font-size: 16.5px; color: var(--vg-ink-2); }
.vg-solution .vg-solution__meta {
	margin-top: auto; padding-top: 20px; font-size: 15px; color: var(--vg-ink-3);
}

/* --------------------------------------------------------------------------
   Mise en page en deux colonnes (titre | contenu)
   -------------------------------------------------------------------------- */
.vg-split { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 96px; align-items: start; }

/* --------------------------------------------------------------------------
   2. Pourquoi VENTIGO
   -------------------------------------------------------------------------- */
.vg-reasons { border-top: 1px solid var(--vg-line-d); }
.vg-reason { display: grid; grid-template-columns: 64px 1fr; padding: 32px 0; border-bottom: 1px solid var(--vg-line-d); }
.vg-reason__idx { padding-top: 4px; font-size: 14px; font-weight: 600; letter-spacing: .12em; color: var(--vg-light); font-variant-numeric: tabular-nums; }
.vg-reason h3 { margin-bottom: 8px; font-size: 21px; font-weight: 600; line-height: 1.3; color: #F5F7FA; }
.vg-reason p { max-width: 56ch; font-size: 16.5px; color: var(--vg-text-d); }

/* --------------------------------------------------------------------------
   3. Fonctionnement — la ligne pointillée reprend un marquage de chaussée
   -------------------------------------------------------------------------- */
.vg-steps { position: relative; display: grid; grid-template-columns: repeat(3, 1fr); gap: 56px; margin-top: 64px; }
.vg-steps::before { content: ""; position: absolute; left: 0; right: 0; top: 38px; border-top: 2px dashed var(--vg-line-l); }
.vg-step { position: relative; }
.vg-step__num {
	position: relative; display: inline-block; padding-right: 24px; background: #FFFFFF;
	font-family: var(--vg-font-display); font-size: 76px; line-height: 1; color: var(--vg-blue);
}
.vg-step h3 { margin: 24px 0 8px; font-size: 21px; font-weight: 600; line-height: 1.3; color: var(--vg-ink); }
.vg-step p { max-width: 36ch; font-size: 16.5px; color: var(--vg-ink-2); }

/* --------------------------------------------------------------------------
   4. Import — activité secondaire, identifiable sans concurrencer l'estimation
   -------------------------------------------------------------------------- */
.vg-sec--tint { padding: 96px 0; }
.vg-import { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 88px; align-items: center; }
.vg-import__main { padding-left: 40px; border-left: 3px solid var(--vg-blue); }
.vg-import__main .vg-btn { margin-top: 32px; }
.vg-import__facts { border-bottom: 1px solid #BCC9DB; }
.vg-import__facts > div, .vg-facts > div { padding: 20px 0; border-top: 1px solid #BCC9DB; }
.vg-import__facts dt, .vg-facts dt { font-size: 13px; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; color: var(--vg-ink-3); }
.vg-import__facts dd, .vg-facts dd { margin-top: 4px; font-size: 17px; font-weight: 500; line-height: 1.45; color: var(--vg-ink); }

/* --------------------------------------------------------------------------
   5. Véhicules
   -------------------------------------------------------------------------- */
.vg-vehicles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; }
.vg-vehicle {
	display: flex; flex-direction: column; text-decoration: none; color: inherit;
	background: var(--vg-night); border: 1px solid var(--vg-line-d);
	transition: border-color .16s ease;
}
.vg-vehicle:hover, .vg-vehicle:focus-visible { border-color: var(--vg-light); }
.vg-vehicle__media { display: block; aspect-ratio: 4 / 3; overflow: hidden; background: var(--vg-surface); }
.vg-vehicle__media img { display: block; width: 100%; height: 100%; object-fit: cover; }
.vg-vehicle__body { display: flex; flex-direction: column; gap: 6px; padding: 24px; }
.vg-vehicle__status { font-size: 12px; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; color: var(--vg-light); }
.vg-vehicle__title { font-family: var(--vg-font-display); font-size: 28px; line-height: 1.1; color: #F5F7FA; }
.vg-vehicle__meta { font-size: 15px; color: var(--vg-muted-d); }
.vg-vehicle__price { margin-top: 12px; font-size: 18px; font-weight: 600; color: #F5F7FA; }

/* --------------------------------------------------------------------------
   6. Transparence (informations vérifiables)
   -------------------------------------------------------------------------- */
.vg-facts { display: grid; grid-template-columns: 1fr 1fr; column-gap: 56px; border-bottom: 1px solid #BCC9DB; }
.vg-facts > div { border-top-color: var(--vg-line-l); }
.vg-facts { border-bottom-color: var(--vg-line-l); }
.vg-inline { margin-left: 8px; font-size: 15px; font-weight: 500; color: var(--vg-blue); text-underline-offset: 3px; }
.vg-inline--plain { margin-left: 0; font-size: inherit; color: inherit; font-weight: 500; }
.vg-legal-links { display: flex; flex-wrap: wrap; gap: 14px 36px; margin-top: 36px; }

/* --------------------------------------------------------------------------
   7. FAQ (balisage du shortcode [ventigo_faq], restylé)
   -------------------------------------------------------------------------- */
.vg-split__head .vg-link { margin-top: 28px; }
.vg-faq .faq-list { max-width: none; margin: 0; border-top: 1px solid var(--vg-line-l); }
.vg-faq .faq-item { border-bottom: 1px solid var(--vg-line-l); }
.vg-faq .faq-item summary {
	display: flex; justify-content: space-between; align-items: flex-start; gap: 24px;
	padding: 26px 0; list-style: none; cursor: pointer;
	font-size: 18px; font-weight: 600; line-height: 1.4; color: var(--vg-ink);
}
.vg-faq .faq-item summary::-webkit-details-marker { display: none; }
.vg-faq .faq-item summary::after {
	content: ""; flex: none; width: 14px; height: 14px; margin-top: 6px; font-size: 0;
	background:
		linear-gradient(currentColor, currentColor) center / 14px 1.5px no-repeat,
		linear-gradient(currentColor, currentColor) center / 1.5px 14px no-repeat;
	color: var(--vg-blue);
}
.vg-faq .faq-item[open] summary::after { background: linear-gradient(currentColor, currentColor) center / 14px 1.5px no-repeat; }
.vg-faq .faq-item > div { padding: 0 48px 26px 0; max-width: 64ch; }
.vg-faq .faq-item p { margin: 0 0 12px; padding: 0; font-size: 16.5px; color: var(--vg-ink-2); }
.vg-faq .faq-item p:last-child { margin-bottom: 0; }
.vg-faq .faq-item a { color: var(--vg-blue); text-underline-offset: 3px; }

/* --------------------------------------------------------------------------
   8. CTA final
   -------------------------------------------------------------------------- */
.vg-sec--final { padding: 64px 0 88px; }
.vg-sec--final .vg-ticks { margin: 0 0 56px; }
.vg-final { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); gap: 80px; align-items: center; }
.vg-sec--final .vg-h2 { max-width: 18ch; font-size: clamp(38px, 4.2vw, 60px); }
/* Le texte et l'action forment un seul bloc : le bouton suit directement l'explication. */
.vg-final__action { display: flex; flex-direction: column; align-items: flex-start; gap: 32px; padding-left: 40px; border-left: 3px solid var(--vg-blue); }
.vg-final__action .vg-lead { margin: 0; font-size: 19px; }
.vg-final .vg-btn--lg {
	gap: 14px; padding: 21px 44px; font-size: 18px;
	box-shadow: 0 0 0 6px rgba(76, 141, 255, .18);
}
.vg-final .vg-btn--lg::after { content: "→"; }

/* --------------------------------------------------------------------------
   Barre d'estimation mobile (déjà présente dans footer.php) : sur l'accueil,
   elle n'apparaît qu'une fois le hero — et son formulaire — dépassé, avec les
   formes et la couleur de la direction A+.
   -------------------------------------------------------------------------- */
.home .mobile-cta-bar,
.vg-a-plus .mobile-cta-bar {
	background: #175CD3; border-radius: 6px; box-shadow: 0 14px 30px -12px rgba(0, 0, 0, .55);
	font-family: 'Archivo', system-ui, sans-serif; letter-spacing: 0;
	/* visibility:hidden retire aussi la barre de l'ordre de tabulation et des lecteurs
	   d'écran tant qu'elle est masquée (opacity seule la laisserait atteignable). */
	opacity: 0; visibility: hidden; pointer-events: none; transform: translateY(10px);
	transition: opacity .2s ease, transform .2s ease, visibility 0s linear .2s;
}
.home .mobile-cta-bar.is-shown,
.vg-a-plus .mobile-cta-bar.is-shown { opacity: 1; visibility: visible; pointer-events: auto; transform: none; transition-delay: 0s; }
.home .mobile-cta-bar:focus-visible,
.vg-a-plus .mobile-cta-bar:focus-visible { outline: 3px solid #FFFFFF; outline-offset: 2px; box-shadow: 0 0 0 6px #175CD3; }

/* Pied de page : réserve la place du bandeau (premier passage) pour qu'aucun lien légal
   ne reste caché derrière lui ; la barre mobile a déjà sa réserve (premium.css, 84 px). */
@media (max-width: 640px) {
	.home .site-footer { padding-bottom: 104px; } /* barre d'estimation (62 px) + marge : jamais de lien masqué */
	.home:has(#ventigo-cookie-banner.is-visible) .site-footer, .vg-a-plus:has(#ventigo-cookie-banner.is-visible) .site-footer { padding-bottom: 216px; }
}

/* --------------------------------------------------------------------------
   Tablette et mobile
   -------------------------------------------------------------------------- */
@media (max-width: 1199px) {
	.vg-sec { padding: 88px 0; }
	.vg-sec__in { padding: 0 40px; }
	.vg-split { gap: 56px; }
	.vg-import { gap: 56px; }
	.vg-solution { padding-left: 28px; padding-right: 28px; }
	.vg-solution:first-child { padding-left: 0; }
	.vg-solution:last-child { padding-right: 0; }
	.vg-solution__flag { right: 28px; }
}

@media (max-width: 1023px) {
	.vg-split, .vg-import { grid-template-columns: 1fr; gap: 48px; }
	.vg-solutions { grid-template-columns: 1fr; }
	.vg-solution, .vg-solution:first-child, .vg-solution:last-child { padding: 36px 0; border-left: 0; border-top: 1px solid var(--vg-line-l); }
	.vg-solution:first-child { border-top: 0; }
	.vg-solution--featured { order: -1; padding: 36px 28px; border-top: 0; }
	.vg-solution__flag { top: 36px; right: 28px; }
	.vg-solution__idx { display: none; } /* numérotation 01-03 sans objet une fois empilé (ordre modifié) */
	.vg-solution .vg-solution__meta { margin-top: 0; padding-top: 4px; }
	.vg-vehicles { grid-template-columns: repeat(2, 1fr); gap: 24px; }
	.vg-final { grid-template-columns: 1fr; gap: 36px; }
	.vg-sec--final .vg-h2 { max-width: 20ch; }
	.vg-final__action { padding-left: 28px; }
}

@media (max-width: 899px) {
	.vg-steps { grid-template-columns: 1fr; gap: 0; margin-top: 48px; }
	.vg-steps::before { display: none; }
	.vg-step { display: grid; grid-template-columns: 64px 1fr; column-gap: 20px; padding-bottom: 40px; }
	.vg-step:last-child { padding-bottom: 0; }
	.vg-step::before { content: ""; position: absolute; left: 22px; top: 70px; bottom: 6px; border-left: 2px dashed var(--vg-line-l); }
	.vg-step:last-child::before { display: none; }
	.vg-step__num { grid-row: 1 / span 2; padding: 0; font-size: 64px; background: transparent; }
	.vg-step h3 { margin: 8px 0 6px; }
}

@media (max-width: 767px) {
	.vg-sec { padding: 56px 0; }
	.vg-sec--tint { padding: 48px 0; }
	.vg-sec--final { padding: 48px 0 64px; }
	.vg-sec--final .vg-ticks { margin-bottom: 40px; }
	.vg-sec__in { padding: 0 22px; }
	.vg-eyebrow { font-size: 12px; margin-bottom: 16px; }
	.vg-lead { font-size: 17px; margin-top: 16px; }
	.vg-ticks { margin-top: 40px; }
	.vg-head--row { flex-direction: column; align-items: flex-start; gap: 20px; margin-bottom: 36px; }
	.vg-solution h3 { font-size: 32px; }
	.vg-solution, .vg-solution:first-child, .vg-solution:last-child { padding: 28px 0; }
	.vg-solution--featured { padding: 28px 22px; margin: 0 -22px; }
	.vg-solution__flag { right: 22px; top: 28px; }
	.vg-reason { grid-template-columns: 48px 1fr; padding: 26px 0; }
	.vg-import__main { padding-left: 22px; }
	.vg-import__main .vg-btn { margin-top: 28px; }
	.vg-vehicles { grid-template-columns: 1fr; }
	.vg-facts { column-gap: 20px; }
	.vg-facts > div { padding: 16px 0; }
	.vg-facts__wide { grid-column: 1 / -1; }
	.vg-faq .faq-item summary { font-size: 17px; padding: 22px 0; }
	.vg-faq .faq-item > div { padding-right: 0; }
	.vg-final__action { padding-left: 20px; gap: 28px; }
	.vg-final .vg-btn--lg { align-self: stretch; padding: 20px 24px; }
}

@media (prefers-reduced-motion: reduce) {
	.vg-home *, .vg-home *::before, .vg-home *::after, .home .mobile-cta-bar,
.vg-a-plus .mobile-cta-bar { transition: none !important; }
}