/* ==========================================================================
   Voyaliste — Design tokens
   Palette : relevée sur la carte de visite — marine #12283F, bleu #2589DE,
             turquoise #3FA8BE, doré #E8C36A, sur blanc et brume #E9F3FA.
   Type    : Space Grotesk (display) · Inter (body) · JetBrains Mono (data)
   ========================================================================== */

:root {
	/* ------------------------------------------------------------------
	   Palette de marque, relevée sur la carte de visite Voyaliste.
	   Elle est faite d'un dégradé marine → bleu → turquoise, avec un angle
	   doré. C'est le doré qui remplace l'ancien orange.

	   Une conséquence à connaître : le doré de la carte est une couleur
	   claire. Du texte blanc dessus serait illisible. Un aplat doré porte
	   donc toujours du texte marine — exactement ce que fait la carte. Et
	   comme un doré clair ne se voit pas sur du blanc, deux teintes plus
	   profondes existent pour le texte et les petits éléments graphiques.
	   ------------------------------------------------------------------ */
	--cloud: #FFFFFF;
	--mist: #E9F3FA;
	--navy: #12283F;
	--midnight: #0C1B2C;
	--ink: #12283F;

	/* Les bleus du dégradé, du plus vif au plus profond. */
	--horizon: #2589DE;
	--horizon-dark: #1B5FA8;
	--horizon-texte: #175A9E;   /* bleu lisible sur blanc */

	/* Le turquoise du bas de la carte : troisième couleur de la marque. */
	--lagoon: #3FA8BE;
	--lagoon-dark: #2C8195;

	/* L'angle doré. */
	--gold: #E8C36A;            /* aplat — porte du texte marine */
	--gold-dark: #D4A73F;       /* aplat au survol */
	--gold-fonce: #A87613;      /* traits, points, bordures sur blanc */
	--gold-texte: #8A6218;      /* texte et pictogrammes sur blanc */

	/* Anciens noms de l'orange, conservés parce que le code les emploie encore
	   à des dizaines d'endroits. Ce sont de simples renvois vers le doré :
	   ainsi une seule valeur reste à modifier, et chaque usage a par ailleurs
	   été revu pour son rôle réel (aplat, trait ou texte). */
	--orange: var(--gold);
	--orange-dark: var(--gold-dark);
	--orange-texte: var(--gold-texte);

	--steel: #5E7488;
	--steel-light: #93A6B5;
	--border: #D8E7F2;

	/* Le dégradé de la carte de visite, composé à partir des jetons ci-dessus
	   plutôt que de valeurs recopiées : changer une couleur de marque suffit
	   à le mettre à jour. */
	--degrade-marque: linear-gradient(118deg,
		var(--midnight) 0%,
		var(--navy) 22%,
		var(--horizon-dark) 52%,
		var(--lagoon) 82%,
		var(--gold) 100%);

	--font-display: 'Space Grotesk', 'Inter', sans-serif;
	--font-body: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
	--font-mono: 'JetBrains Mono', ui-monospace, monospace;

	/* Échelle typographique — une seule source de vérité, fluide par clamp().
	   Avant, chaque composant définissait son propre clamp() : les tailles ne
	   se répondaient pas d'une section à l'autre. Tout titre/texte doit
	   désormais référencer un de ces paliers plutôt qu'une valeur en dur. */
	--text-2xs: 0.7rem;
	--text-xs: 0.78rem;
	--text-sm: 0.85rem;
	--text-base: 0.95rem;
	--text-md: 1rem;
	--text-lg: 1.08rem;
	--text-xl: clamp(1.05rem, 1.4vw, 1.2rem);
	--text-2xl: clamp(1.25rem, 2vw, 1.5rem);
	--text-3xl: clamp(1.5rem, 3vw, 2.1rem);
	--text-4xl: clamp(1.7rem, 3vw, 2.4rem);
	--text-5xl: clamp(2.1rem, 4vw, 3.2rem);

	/* Échelle d'espacement — rythme vertical/horizontal cohérent partout.
	   Les valeurs en dur dispersées par composant créaient des décalages
	   visibles entre sections. */
	--space-1: 4px;
	--space-2: 8px;
	--space-3: 12px;
	--space-4: 16px;
	--space-5: 24px;
	--space-6: 32px;
	--space-7: 48px;
	--space-8: 64px;
	--space-9: 96px;
	--space-10: 128px;

	--radius-sm: 8px;
	--radius-md: 14px;
	--radius-lg: 24px;
	--shadow-card: 0 12px 32px -16px rgba(18, 40, 63, 0.18);
	--shadow-form: 0 24px 60px -20px rgba(18, 40, 63, 0.28);
	--shadow-header: 0 6px 24px -12px rgba(18, 40, 63, 0.22);
}
/* Note alias : le gabarit historique référence `--gold-light` et `--midnight`
   à plusieurs endroits (boutons, widget devis, entête). Plutôt que de
   réécrire tous les fichiers PHP, ces variables sont mappées ici sur la
   nouvelle palette (orange / navy) pour que tout reste cohérent visuellement. */

/* ==========================================================================
   Reset
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
	margin: 0;
	font-family: var(--font-body);
	color: var(--ink);
	background: var(--cloud);
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
ul, ol { margin: 0; padding: 0; list-style: none; }
h1, h2, h3, h4 {
	font-family: var(--font-display);
	font-weight: 700;
	color: var(--navy);
	margin: 0 0 0.5em;
	line-height: 1.15;
	letter-spacing: -0.01em;
}
p { margin: 0 0 1em; color: var(--text-2); }
button { font-family: inherit; cursor: pointer; }
input, select, textarea { font-family: inherit; font-size: 1rem; }

.sr-only {
	position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
	overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
.skip-link {
	position: absolute; left: -999px; top: 0; background: var(--navy); color: #fff;
	padding: 12px 20px; z-index: 200; border-radius: 0 0 8px 0;
}
.skip-link:focus { left: 0; }

:focus-visible { outline: 3px solid var(--gold-fonce); outline-offset: 2px; }

.wrap { max-width: 1200px; margin: 0 auto; padding: 0 24px; }

@media (min-width: 1440px) { .wrap { max-width: 1320px; } }
@media (min-width: 1800px) { .wrap { max-width: 1440px; } }
@media (max-width: 420px) { .wrap { padding: 0 16px; } }

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
}

/* ==========================================================================
   Icônes (trait unique, currentColor — voir inc/icons.php)
   ========================================================================== */

.voyaliste-icon { display: inline-flex; flex-shrink: 0; line-height: 0; }
.voyaliste-icon svg { display: block; }

/* ==========================================================================
   Buttons
   ========================================================================== */

.btn, .voyaliste-btn-gold, .voyaliste-btn-navy, .voyaliste-btn-ghost {
	display: inline-flex; align-items: center; justify-content: center; gap: 8px;
	padding: 14px 28px; border-radius: 999px; font-weight: 600; font-size: 0.95rem;
	border: 2px solid transparent; transition: transform 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
	white-space: nowrap; cursor: pointer;
}
.btn--primary, .voyaliste-btn-gold {
	background: var(--orange); color: var(--navy);
	box-shadow: 0 10px 24px -8px rgba(168, 118, 19, 0.5);
}
.btn--primary:hover, .voyaliste-btn-gold:hover { background: var(--orange-dark); transform: translateY(-1px); }
.btn--light { background: var(--cloud); color: var(--horizon-dark); }
.btn--light:hover { transform: translateY(-1px); }
.btn--outline-light, .voyaliste-btn-ghost {
	background: transparent; border-color: rgba(255,255,255,0.35); color: #fff; padding: 10px 18px;
}
.btn--outline-light:hover, .voyaliste-btn-ghost:hover { border-color: #fff; }
.voyaliste-btn-navy { background: var(--navy); color: #fff; }
.voyaliste-btn-navy:hover { background: var(--horizon-dark); }

/* ==========================================================================
   Header
   ========================================================================== */

.site-header {
	position: sticky; top: 0; z-index: 100;
	background: rgba(255,255,255,0.92);
	backdrop-filter: blur(10px);
	border-bottom: 1px solid var(--border);
	transition: box-shadow 0.25s ease, background-color 0.25s ease;
}
/* État "défilé" : l'entête se compacte légèrement et se détache du contenu.
   Repère visuel discret, sans changement de structure. */
.site-header.is-scrolled {
	background: rgba(255,255,255,0.97);
	box-shadow: var(--shadow-header);
}
.site-header__inner {
	display: flex; align-items: center; justify-content: space-between; height: 76px;
	transition: height 0.25s ease;
}
.site-header.is-scrolled .site-header__inner { height: 64px; }
.site-logo { display: flex; align-items: center; gap: 10px; color: var(--navy); }
.site-logo .custom-logo-link { display: flex; align-items: center; }
.site-logo img.custom-logo { height: 48px; width: auto; max-width: 200px; object-fit: contain; transition: height 0.25s ease; }
.site-header.is-scrolled .site-logo img.custom-logo { height: 40px; }
.site-logo__mark { color: var(--gold-texte); display: inline-flex; }
.site-logo__text { font-family: var(--font-display); font-weight: 700; font-size: 1.3rem; letter-spacing: -0.02em; }
.site-logo__text--light { color: var(--cloud); font-size: 1.4rem; }

.site-nav { display: flex; align-items: center; gap: 22px; }

/* Un seul repère doré, qui glisse d'un lien à l'autre.
   Auparavant chaque lien faisait pousser puis disparaître son propre
   soulignement : autant de petits mouvements sans lien entre eux. Avec un
   repère unique, l'œil suit une trajectoire continue et sait toujours où il
   se trouve. Il revient de lui-même sur la page courante quand on quitte le
   menu. Les deux mesures viennent du script, qui lit la position réelle du
   lien visé — rien n'est codé en dur. */
.site-nav__list { display: flex; gap: 2px; position: relative; }
.site-nav__list::after {
	content: ""; position: absolute; left: 0; bottom: -7px;
	height: 3px; border-radius: 3px; background: var(--gold-fonce);
	width: var(--nav-repere-largeur, 0);
	transform: translateX(var(--nav-repere-x, 0));
	opacity: var(--nav-repere-opacite, 0);
	transition: transform 0.34s cubic-bezier(0.22, 1, 0.36, 1),
	            width 0.34s cubic-bezier(0.22, 1, 0.36, 1),
	            opacity 0.2s ease;
	pointer-events: none;
}
.site-nav__list > li > a {
	display: inline-flex; align-items: center; gap: 6px;
	padding: 9px 13px; border-radius: 9px;
	font-weight: 500; font-size: 0.94rem; color: var(--navy);
	position: relative; white-space: nowrap;
	transition: background-color 0.18s ease, color 0.18s ease;
}
.site-nav__list > li > a:hover,
.site-nav__list > li > a:focus-visible {
	background: var(--mist); color: var(--horizon-texte);
}
/* « Espace client » est une destination, pas une note de bas de page : il lui
   faut la forme d'un bouton pour exister à côté du bouton orange voisin.
   Contour bleu plutôt que plein, pour ne pas concurrencer l'appel à l'action
   principal (« Demander un devis »). */
.site-nav__client {
	display: inline-flex; align-items: center; gap: 7px; white-space: nowrap;
	padding: 11px 18px; border: 1.5px solid var(--horizon); border-radius: var(--radius-sm);
	font-size: 0.88rem; font-weight: 600; color: var(--horizon-dark); background: transparent;
	transition: background-color 0.2s ease, color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}
.site-nav__client .voyaliste-icon { color: currentColor; }
.site-nav__client:hover {
	background: var(--horizon); color: #fff; transform: translateY(-2px);
	box-shadow: 0 10px 22px -12px rgba(44, 156, 219, 0.7);
}
.site-nav__client:active { transform: none; }

/* Raccourci compact du bandeau, réservé aux écrans où le menu est replié. */
.site-header__client-compact {
	display: none; align-items: center; justify-content: center; gap: 7px;
	margin-left: auto; margin-right: var(--space-2);
	/* 44px de haut : la taille minimale confortable pour un appui au doigt. */
	min-height: 44px; padding: 0 15px;
	border: 1.5px solid var(--horizon); border-radius: var(--radius-sm);
	color: var(--horizon-dark); font-size: 0.82rem; font-weight: 600; white-space: nowrap;
}
.site-header__client-compact:hover { background: var(--horizon); color: #fff; }
.site-header__client-compact .voyaliste-icon { color: currentColor; }
.site-nav__cta { padding: 11px 22px; font-size: 0.9rem; }

.nav-toggle { display: none; flex-direction: column; gap: 5px; background: none; border: none; padding: 8px; }
.nav-toggle span { width: 22px; height: 2px; background: var(--navy); border-radius: 2px; }

/* ==========================================================================
   Dropdown submenus
   ========================================================================== */

.site-nav__list li { position: relative; }

.menu-item-has-children > a {
	display: inline-flex;
	align-items: center;
	gap: 6px;
}
.menu-item-has-children > a::after {
	content: "";
	width: 7px;
	height: 7px;
	border-right: 1.5px solid currentColor;
	border-bottom: 1.5px solid currentColor;
	transform: rotate(45deg) translateY(-2px);
	transition: transform 0.2s ease;
	opacity: 0.6;
}
.menu-item-has-children.is-open > a::after,
.menu-item-has-children.is-survole > a::after,
.menu-item-has-children:hover > a::after,
.menu-item-has-children:focus-within > a::after { transform: rotate(225deg) translateY(2px); }

.sub-menu {
	position: absolute;
	top: calc(100% + 14px);
	left: 50%;
	transform: translateX(-50%) translateY(10px) scale(0.97);
	transform-origin: top center;
	min-width: 230px;
	background: var(--cloud);
	border: 1px solid var(--border);
	border-radius: var(--radius-md);
	box-shadow: var(--shadow-card);
	padding: 8px;
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition: opacity 0.18s ease,
	            transform 0.28s cubic-bezier(0.22, 1, 0.36, 1),
	            visibility 0s linear 0.28s;
	z-index: 50;
}
/* Passerelle invisible qui comble les 14 px entre le lien et le panneau.
   Sans elle, descendre vers le sous-menu fait traverser un vide : le survol
   se perd et le panneau se referme au milieu du geste. C'est la gêne la plus
   courante de ce type de menu, et elle se règle ici, sans script. */
.sub-menu::after {
	content: ""; position: absolute;
	top: -16px; left: -8px; right: -8px; height: 18px;
}
.sub-menu::before {
	content: "";
	position: absolute;
	top: -6px;
	left: 50%;
	transform: translateX(-50%) rotate(45deg);
	width: 12px;
	height: 12px;
	background: var(--cloud);
	border-left: 1px solid var(--border);
	border-top: 1px solid var(--border);
}
.sub-menu li { margin: 0; }
.sub-menu a {
	display: block;
	padding: 10px 14px;
	border-radius: var(--radius-sm);
	font-size: 0.88rem;
	font-weight: 500;
	color: var(--navy);
	white-space: nowrap;
}
.sub-menu a::after { display: none; }
.sub-menu a:hover { background: var(--mist); color: var(--horizon-dark); }

.menu-item-has-children:hover > .sub-menu,
.menu-item-has-children:focus-within > .sub-menu,
.menu-item-has-children.is-survole > .sub-menu,
.menu-item-has-children.is-open > .sub-menu {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
	transform: translateX(-50%) translateY(0) scale(1);
	transition: opacity 0.18s ease,
	            transform 0.28s cubic-bezier(0.22, 1, 0.36, 1),
	            visibility 0s;
}

/* Les entrées arrivent l'une après l'autre, très légèrement décalées : le
   panneau se déplie au lieu d'apparaître d'un bloc. Le retard reste sous le
   dixième de seconde, il se ressent sans se remarquer. */
.sub-menu li {
	opacity: 0; transform: translateY(-4px);
	transition: opacity 0.2s ease, transform 0.2s ease;
}
.menu-item-has-children:hover > .sub-menu li,
.menu-item-has-children:focus-within > .sub-menu li,
.menu-item-has-children.is-survole > .sub-menu li,
.menu-item-has-children.is-open > .sub-menu li { opacity: 1; transform: none; }
.sub-menu li:nth-child(1) { transition-delay: 0.02s; }
.sub-menu li:nth-child(2) { transition-delay: 0.05s; }
.sub-menu li:nth-child(3) { transition-delay: 0.08s; }
.sub-menu li:nth-child(4) { transition-delay: 0.11s; }
.sub-menu li:nth-child(n+5) { transition-delay: 0.14s; }

/* Le survol d'une entrée la décale d'un cheveu vers la droite : un retour
   tactile discret qui confirme la cible sous le curseur. */
.sub-menu a {
	transition: background-color 0.16s ease, color 0.16s ease, padding-left 0.16s ease;
}
.sub-menu a:hover, .sub-menu a:focus-visible { padding-left: 18px; }

/* ==========================================================================
   Hero + signature route-line element
   ========================================================================== */

.hero {
	background:
		radial-gradient(120% 100% at 100% 0%, var(--mist) 0%, transparent 55%),
		#FFFFFF;
	padding: 72px 0 96px;
	overflow: hidden;
}
.hero__inner { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 64px; align-items: start; }
.eyebrow {
	display: inline-block; font-family: var(--font-mono); font-size: 0.78rem; letter-spacing: 0.08em;
	text-transform: uppercase; color: var(--horizon-dark); background: var(--mist);
	padding: 6px 14px; border-radius: 999px; margin-bottom: 20px;
}
.eyebrow--center { display: block; width: fit-content; margin-left: auto; margin-right: auto; }

.hero__title { color: var(--navy); font-size: var(--text-5xl); font-weight: 700; max-width: 14ch; }
.hero__subtitle { font-size: var(--text-lg); max-width: 46ch; margin-bottom: var(--space-6); color: var(--text-2); }

.hero__badges { display: flex; flex-direction: column; gap: var(--space-3); margin-bottom: var(--space-7); }
.hero__badges li {
	font-family: var(--font-mono); font-size: var(--text-sm); color: var(--navy);
	display: flex; align-items: center; gap: var(--space-2);
}
.hero__badges .voyaliste-icon { color: var(--gold-texte); flex-shrink: 0; }

/* Signature: animated route line between two pins */
.route-line { position: relative; display: flex; align-items: center; height: 64px; max-width: 480px; }
.route-line__svg { flex: 1; height: 8px; overflow: visible; }
.route-line__svg path {
	fill: none; stroke: var(--horizon); stroke-width: 2; stroke-linecap: round;
	stroke-dasharray: 4 8; animation: dash-travel 1.6s linear infinite;
}
@keyframes dash-travel { to { stroke-dashoffset: -24; } }
.route-line__pin { display: flex; flex-direction: column; align-items: center; gap: 8px; flex-shrink: 0; z-index: 1; }
.route-line__dot { width: 14px; height: 14px; border-radius: 50%; background: var(--navy); border: 3px solid var(--cloud); box-shadow: 0 0 0 2px var(--navy); }
.route-line__pin--end .route-line__dot { background: var(--gold-fonce); box-shadow: 0 0 0 2px var(--gold-fonce); }
.route-line__label { font-family: var(--font-mono); font-size: 0.72rem; color: var(--text-2); white-space: nowrap; }
.route-line__car {
	position: absolute; left: 10%; top: 50%; transform: translate(-50%, -50%);
	color: var(--horizon); background: var(--cloud); border-radius: 999px; padding: 4px;
	animation: car-travel 3.2s ease-in-out infinite;
}
@keyframes car-travel { 0% { left: 10%; } 50% { left: 88%; } 100% { left: 10%; } }

/* ==========================================================================
   Carrousel "preuve terrain" (photos convoyeur)
   ========================================================================== */

.proof-carousel { position: relative; height: clamp(420px, 56vw, 620px); overflow: hidden; background: var(--navy); }
.proof-carousel__track { position: relative; width: 100%; height: 100%; }
.proof-carousel__slide {
	position: absolute; inset: 0; background-size: contain; background-repeat: no-repeat; background-position: center;
	opacity: 0; visibility: hidden; transition: opacity 0.9s ease;
	display: flex; align-items: flex-end;
}
.proof-carousel__slide.is-active { opacity: 1; visibility: visible; }
.proof-carousel__slide::before {
	content: ""; position: absolute; inset: 0;
	background: linear-gradient(0deg, rgba(18, 40, 63,0.88) 0%, rgba(18, 40, 63,0.35) 55%, rgba(18, 40, 63,0.05) 100%);
}
.proof-carousel__content { position: relative; z-index: 1; padding-bottom: 64px; max-width: 640px; }
.proof-carousel__content .eyebrow { background: rgba(255,255,255,0.14); color: var(--cloud); }
.proof-carousel__title {
	font-family: var(--font-display); font-weight: 700; color: var(--cloud);
	font-size: var(--text-3xl); margin: var(--space-3) 0; text-wrap: balance;
}
.proof-carousel__lede { color: rgba(255,255,255,0.88); font-size: 1rem; max-width: 52ch; }
.proof-carousel__dots {
	position: absolute; left: 0; right: 0; bottom: 24px; z-index: 2;
	display: flex; justify-content: center; gap: 10px;
}
.proof-carousel__dots button {
	width: 10px; height: 10px; border-radius: 50%; border: 1.5px solid rgba(255,255,255,0.7);
	background: rgba(255,255,255,0.25); padding: 0; cursor: pointer; transition: background 0.2s ease, transform 0.2s ease;
}
.proof-carousel__dots button.is-active { background: var(--orange); border-color: var(--gold-fonce); transform: scale(1.15); }

@media (max-width: 760px) {
	.proof-carousel { height: 520px; }
	.proof-carousel__content { padding-bottom: 48px; }
}

/* ==========================================================================
   Devis widget (formulaire + estimation en direct)
   ========================================================================== */

.hero__form-wrap { position: relative; }
.voyaliste-devis-widget {
	display: grid; grid-template-columns: 1fr; gap: 20px;
	background: var(--cloud); border-radius: var(--radius-lg); box-shadow: var(--shadow-form);
	padding: 32px; border: 1px solid var(--border); min-width: 0;
}
/* Sur un petit téléphone, 32px de marge intérieure de chaque côté mangent un
   cinquième de l'écran : on les réduit pour rendre les champs confortables. */
@media (max-width: 480px) {
	.voyaliste-devis-widget { padding: 20px 16px; border-radius: var(--radius-md); }
}
.voyaliste-devis-form h2, .voyaliste-devis-form .quote-form__title { font-size: 1.35rem; margin-bottom: 4px; }
.vf-field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; }
.vf-field label { font-size: 0.82rem; font-weight: 600; color: var(--navy); }
.vf-field input, .vf-field select, .vf-field textarea {
	padding: 12px 14px; border: 1.5px solid var(--border); border-radius: var(--radius-sm);
	background: var(--mist); color: var(--navy); transition: border-color 0.15s ease, background 0.15s ease;
	/* Un <select> prend par défaut la largeur de sa plus longue option
	   (« Expert — convoyeur senior, créneau prioritaire ») et débordait de
	   l'écran sur un téléphone. On force la contrainte du conteneur. */
	width: 100%; max-width: 100%; min-width: 0;
}
.vf-field select { text-overflow: ellipsis; }
.vf-field textarea { resize: vertical; }
.vf-field input:focus, .vf-field select:focus, .vf-field textarea:focus {
	border-color: var(--horizon); background: var(--cloud); outline: none;
}
.vf-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.vf-feedback { margin: 10px 0 0; font-size: 0.85rem; min-height: 1.2em; }
.vf-feedback.success { color: var(--horizon-dark); }
.vf-feedback.error { color: var(--orange-dark); }
.vf-distance-status { font-size: 0.76rem; color: var(--text-2); min-height: 1.1em; }
.vf-distance-status.is-error { color: var(--orange-dark); }
.vf-distance-status.is-ok { color: var(--horizon-dark); }

.vf-field--autocomplete { position: relative; }
.vf-suggestions {
	position: absolute; top: calc(100% + 4px); left: 0; right: 0; z-index: 20;
	margin: 0; padding: 6px; list-style: none;
	background: var(--cloud); border: 1px solid var(--border); border-radius: var(--radius-sm);
	box-shadow: var(--shadow-card); max-height: 240px; overflow-y: auto;
}
.vf-suggestions li {
	padding: 9px 10px; border-radius: 6px; font-size: 0.88rem; color: var(--navy);
	cursor: pointer; line-height: 1.3;
}
.vf-suggestions li.is-active, .vf-suggestions li:hover { background: var(--mist); color: var(--horizon-dark); }

.voyaliste-devis-preview {
	background: var(--navy); color: #fff; border-radius: var(--radius-md); padding: 22px; text-align: center;
}
.vf-preview-label { font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-2); }
.vf-preview-price { display: block; font-family: var(--font-mono); font-size: 2.2rem; font-weight: 600; color: var(--gold); margin: 8px 0; }
.vf-preview-breakdown { text-align: left; font-family: var(--font-mono); font-size: 0.72rem; color: #C9D9E3; border-top: 1px solid rgba(255,255,255,0.15); padding-top: 12px; }
.vf-preview-breakdown div { display: flex; justify-content: space-between; padding: 3px 0; }

/* ==========================================================================
   Trust bar
   ========================================================================== */

.trust-bar { background: var(--navy); padding: 18px 0; }
.trust-bar__inner { display: flex; justify-content: center; flex-wrap: wrap; gap: 12px 40px; }
.trust-bar__inner span { font-family: var(--font-mono); font-size: 0.78rem; letter-spacing: 0.03em; color: rgba(255,255,255,0.85); }

/* ==========================================================================
   Sections (shared)
   ========================================================================== */

.section { padding: var(--space-9) 0; }
.section--tint { background: var(--mist); }
.section__title { font-size: var(--text-4xl); max-width: 22ch; }
.section__title--center { text-align: center; margin-left: auto; margin-right: auto; }
.section__lede { font-size: var(--text-md); max-width: 60ch; }
.section__lede--center { text-align: center; margin: 0 auto var(--space-7); }

/* Steps (legitimate sequence — numbered) */
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-6); margin-top: var(--space-7); }
.steps__item { position: relative; padding: var(--space-6) var(--space-5) var(--space-5); border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--cloud); }
.steps__num { display: block; font-family: var(--font-mono); font-size: var(--text-sm); color: var(--gold-texte); margin-bottom: var(--space-3); }
.steps__item h3 { font-size: var(--text-xl); margin-bottom: var(--space-2); }
.steps__item p { font-size: var(--text-base); margin: 0; }

/* Services cards */
.cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-5); margin-top: var(--space-7); }
.card {
	background: var(--navy); color: #fff; border-radius: var(--radius-md); padding: var(--space-6) var(--space-5);
	box-shadow: var(--shadow-card); border-top: 3px solid var(--gold-fonce); transition: transform 0.2s ease;
}
.card:nth-child(2n) { border-top-color: var(--horizon); }
.card:hover { transform: translateY(-4px); }
.card__icon { color: var(--gold-texte); display: inline-flex; margin-bottom: var(--space-3); }
.card:nth-child(2n) .card__icon { color: var(--horizon); }
.card h3 { color: #fff; font-size: var(--text-xl); margin-bottom: var(--space-2); }
.card p { color: #C9D9E3; font-size: var(--text-base); margin: 0; }

/* Features (pourquoi) */
.features { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: var(--space-7); align-items: start; }
.features__lede { font-size: var(--text-lg); }
.features__grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-6); }
.feature { padding-left: var(--space-5); border-left: 3px solid var(--gold-fonce); }
.feature__icon { color: var(--horizon-dark); display: inline-flex; margin-bottom: var(--space-2); }
.feature h3 { font-size: var(--text-md); margin-bottom: var(--space-1); }
.feature p { font-size: var(--text-base); margin: 0; }
.feature__link { display: inline-block; margin-top: var(--space-3); font-size: var(--text-sm); font-weight: 600; color: var(--horizon-dark); }
.feature__link:hover { color: var(--gold-texte); }

/* Pricing journey (paliers) */
.journey { position: relative; display: grid; grid-template-columns: repeat(2, minmax(0, 340px)); justify-content: center; gap: var(--space-5); margin-top: var(--space-5); }
.waypoint { background: var(--cloud); border: 1px solid var(--border); border-radius: var(--radius-md); padding: var(--space-5); box-shadow: var(--shadow-card); }
.waypoint__marker {
	display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px;
	border-radius: 50%; background: var(--orange); color: var(--navy);
	font-family: var(--font-mono); font-weight: 700; margin-bottom: var(--space-3);
}
.waypoint h3 { font-size: var(--text-xl); }
.waypoint p { font-size: var(--text-sm); margin: var(--space-1) 0 var(--space-3); }
.waypoint__coef { font-family: var(--font-mono); font-size: var(--text-2xl); color: var(--horizon-dark); font-weight: 600; }

/* CTA banner */
.cta-banner {
	position: relative;
	/* La moitié sombre du dégradé de la carte : marine vers bleu. Le
	   turquoise et le doré de la carte sont trop clairs pour porter du texte
	   blanc, ils reviennent en liseré juste au-dessus. */
	background: linear-gradient(118deg, var(--midnight) 0%, var(--navy) 34%, var(--horizon-dark) 100%);
	padding: var(--space-8) 0;
}
.cta-banner::before {
	content: ""; position: absolute; inset: 0 0 auto; height: 3px;
	background: var(--degrade-marque);
}
.cta-banner__inner { text-align: center; }
.cta-banner h2 { color: var(--cloud); font-size: var(--text-4xl); }
.cta-banner p { color: rgba(255,255,255,0.85); margin-bottom: 28px; }

/* ==========================================================================
   Footer
   ========================================================================== */

.site-footer { background: var(--navy); color: rgba(255,255,255,0.75); padding: 72px 0 24px; }
.footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.2fr; gap: 40px; padding-bottom: 48px; border-bottom: 1px solid rgba(255,255,255,0.12); }
.footer-col p { color: rgba(255,255,255,0.65); font-size: 0.9rem; }
.footer-contact a { color: var(--cloud); }
.footer-widget__title { color: var(--cloud); font-size: 0.95rem; margin-bottom: 16px; }
.footer-col ul li { margin-bottom: 10px; }
.footer-col ul a { font-size: 0.9rem; color: rgba(255,255,255,0.72); }
.footer-col ul a:hover { color: var(--gold); }
.footer-newsletter { display: flex; gap: 8px; margin-top: 8px; }
.footer-newsletter input {
	flex: 1; padding: 10px 12px; border-radius: var(--radius-sm); border: 1px solid rgba(255,255,255,0.2);
	background: rgba(255,255,255,0.06); color: var(--cloud);
}
.footer-bottom { display: flex; justify-content: space-between; align-items: center; padding-top: 24px; font-size: 0.82rem; flex-wrap: wrap; gap: 12px; }
.footer-legal-nav { display: flex; gap: 20px; }

/* Generic page template */
.page-hero { padding-top: 64px; }
.page-content { max-width: 72ch; }
.post-list__item { margin-bottom: 40px; padding-bottom: 40px; border-bottom: 1px solid var(--border); }

/* ==========================================================================
   Espace client
   ========================================================================== */

.voyaliste-login-box { max-width: 420px; margin: 40px auto; background: var(--cloud); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 32px; box-shadow: var(--shadow-card); }
.voyaliste-login-box h3 { margin-bottom: 6px; }
.voyaliste-login-box input { width: 100%; height: 44px; border: 1.5px solid var(--border); border-radius: var(--radius-sm); padding: 0 14px; margin-bottom: 12px; background: var(--mist); }
.voyaliste-login-box input:focus { border-color: var(--horizon); background: var(--cloud); outline: none; }
.voyaliste-login-box .button { width: 100%; }

/* --------------------------------------------------- Écran de connexion */

.vauth {
	display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 0;
	max-width: 1040px; margin: var(--space-7) auto;
	border-radius: var(--radius-lg); overflow: hidden;
	box-shadow: var(--shadow-form); background: var(--cloud);
}
.vauth__aside {
	padding: var(--space-7) var(--space-6);
	background: linear-gradient(150deg, var(--navy) 0%, #1B3345 60%, var(--horizon-dark) 160%);
	color: var(--cloud); display: flex; flex-direction: column; justify-content: center;
	position: relative; overflow: hidden;
}
/* Halo orange discret : donne de la profondeur sans image de fond. */
.vauth__aside::after {
	content: ''; position: absolute; width: 320px; height: 320px; right: -120px; top: -80px;
	background: radial-gradient(circle, rgba(168, 118, 19,0.28), transparent 68%);
	pointer-events: none;
}
.vauth__eyebrow {
	font-family: var(--font-mono); font-size: var(--text-2xs); letter-spacing: 0.16em;
	text-transform: uppercase; color: var(--gold-texte); margin-bottom: var(--space-3); display: block;
}
.vauth__title { font-size: var(--text-3xl); color: var(--cloud); line-height: 1.2; margin-bottom: var(--space-5); }
.vauth__points { list-style: none; display: grid; gap: var(--space-3); position: relative; z-index: 1; }
.vauth__points li { display: flex; align-items: flex-start; gap: var(--space-3); font-size: var(--text-sm); color: #C8D8E2; }
.vauth__points .voyaliste-icon { color: var(--gold-texte); margin-top: 1px; }
.vauth__panels { padding: var(--space-6); display: grid; gap: var(--space-5); align-content: center; }
.vauth__card h3 { font-size: var(--text-xl); margin-bottom: var(--space-1); }
.vauth__lede { font-size: var(--text-sm); color: var(--text-2); margin-bottom: var(--space-4); }
.vauth__card--alt { border-top: 1px solid var(--border); padding-top: var(--space-5); }
.vauth__card input[type="text"], .vauth__card input[type="email"],
.vauth__card input[type="password"], .vauth__card .input {
	width: 100%; height: 46px; border: 1.5px solid var(--border); border-radius: var(--radius-sm);
	padding: 0 14px; background: var(--mist); transition: border-color 0.2s ease, background 0.2s ease;
}
.vauth__card input:focus { border-color: var(--horizon); background: var(--cloud); outline: none; }
.vauth__card .login-submit .button, .vauth__submit { width: 100%; margin-top: var(--space-2); }
.vauth__card label { display: block; font-size: var(--text-xs); font-weight: 600; color: var(--navy); margin-bottom: var(--space-1); }
.vauth__card .login-remember { font-size: var(--text-xs); color: var(--text-2); }
.vauth__card .login-remember label { display: inline; font-weight: 400; }
.vf-hint { display: block; font-size: var(--text-2xs); color: var(--text-2); margin-top: var(--space-1); }

@media (max-width: 860px) {
	.vauth { grid-template-columns: 1fr; margin: var(--space-5) auto; }
	.vauth__aside { padding: var(--space-6) var(--space-5); }
}

/* ------------------------------------------- Renvoi des comptes équipe */

.vteam {
	max-width: 560px; margin: var(--space-8) auto; text-align: center;
	background: var(--cloud); border: 1px solid var(--border); border-radius: var(--radius-lg);
	padding: var(--space-7) var(--space-6); box-shadow: var(--shadow-card);
}
.vteam__icon {
	display: inline-flex; width: 64px; height: 64px; align-items: center; justify-content: center;
	border-radius: 50%; background: var(--mist); color: var(--horizon-dark); margin-bottom: var(--space-4);
}
.vteam h2 { font-size: var(--text-2xl); margin-bottom: var(--space-3); }
.vteam p { color: var(--text-2); font-size: var(--text-base); margin-bottom: var(--space-5); }
.vteam__actions { display: flex; gap: var(--space-3); justify-content: center; flex-wrap: wrap; }
.vteam__note { font-size: var(--text-xs); color: var(--text-2); margin: var(--space-5) 0 0; }
.vteam__apercu { margin-top: var(--space-6); padding-top: var(--space-5); border-top: 1px solid var(--border); text-align: left; }
.vteam__apercu h3 { font-size: var(--text-lg); margin-bottom: var(--space-1); }
.vteam__apercu > p { font-size: var(--text-sm); color: var(--text-2); margin-bottom: var(--space-4); }
.vteam__apercu ul { list-style: none; display: grid; gap: var(--space-2); }
.vteam__apercu a {
	display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3);
	background: var(--mist); border-radius: var(--radius-sm); text-decoration: none; color: var(--navy);
	transition: background 0.18s ease, transform 0.18s ease;
}
.vteam__apercu a:hover { background: #DCEEF8; transform: translateX(3px); }
.vteam__apercu .voyaliste-icon { color: var(--horizon); }
.vteam__apercu strong { display: block; font-size: var(--text-sm); }
.vteam__apercu em { font-style: normal; font-size: var(--text-2xs); color: var(--text-2); }

/* Barre d'aperçu : elle doit être impossible à confondre avec l'espace réel. */
.vapercu-barre {
	display: flex; align-items: center; justify-content: space-between; gap: var(--space-4);
	flex-wrap: wrap; padding: var(--space-3) var(--space-4); margin-bottom: var(--space-4);
	background: var(--navy); color: var(--cloud); border-radius: var(--radius-sm);
	font-size: var(--text-sm);
}
.vapercu-barre span { display: flex; align-items: center; gap: var(--space-2); }
.vapercu-barre .voyaliste-icon { color: var(--gold-texte); }
.vapercu-barre strong { color: var(--gold-texte); }
.vapercu-barre a { color: var(--cloud); text-decoration: underline; font-weight: 600; white-space: nowrap; }
.vapercu-note {
	font-size: var(--text-sm); color: var(--text-2); font-style: italic;
	padding: var(--space-3); background: var(--mist); border-radius: var(--radius-sm);
}
.vauth__oubli { margin-top: var(--space-3); font-size: var(--text-sm); }

/* ------------------------------------------------------------- Portail */

.vportal {
	display: grid; grid-template-columns: 248px 1fr; gap: var(--space-6);
	align-items: start; margin: var(--space-5) 0 var(--space-8);
}
.vportal__flash {
	grid-column: 1 / -1; padding: var(--space-3) var(--space-4); border-radius: var(--radius-sm);
	background: var(--mist); color: var(--navy); font-size: var(--text-sm);
	border-left: 3px solid var(--steel-light);
}
.vportal__flash.is-ok { border-left-color: var(--horizon); color: var(--horizon-dark); }

.vportal__side {
	/* Le décalage suit la hauteur réelle du bandeau, publiée par le script dans
	   --hauteur-entete. La valeur était figée à 92px, calée sur le bandeau du
	   site vitrine : en plein écran, où la barre est plus fine, la colonne
	   collait 20px trop bas sans que rien ne le signale. */
	position: sticky; top: calc(var(--hauteur-entete, 76px) + var(--space-4));
	background: var(--cloud); border: 1px solid var(--border);
	border-radius: var(--radius-md); padding: var(--space-4); box-shadow: var(--shadow-card);
	/* Sans min-width:0, un élément de grille ne peut pas devenir plus étroit
	   que son contenu : les onglets élargissaient toute la page sur mobile. */
	min-width: 0;
}
.vportal__identity { display: flex; align-items: center; gap: var(--space-3); padding-bottom: var(--space-4); border-bottom: 1px solid var(--border); margin-bottom: var(--space-3); }
.vportal__avatar {
	width: 42px; height: 42px; flex-shrink: 0; border-radius: 50%;
	background: linear-gradient(140deg, var(--horizon), var(--horizon-dark));
	color: #fff; display: flex; align-items: center; justify-content: center;
	font-weight: 700; font-size: var(--text-sm); letter-spacing: 0.02em;
}
.vportal__identity-text { min-width: 0; display: flex; flex-direction: column; }
.vportal__identity-text strong { font-size: var(--text-sm); color: var(--navy); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vportal__identity-text span { font-size: var(--text-2xs); color: var(--text-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.vportal__nav { display: grid; gap: 2px; }
.vportal__tab {
	display: flex; align-items: center; gap: var(--space-3); width: 100%;
	padding: var(--space-3); border: none; background: transparent; border-radius: var(--radius-sm);
	font-family: var(--font-body); font-size: var(--text-sm); font-weight: 500; color: var(--text-2);
	cursor: pointer; text-align: left; position: relative;
	transition: background 0.18s ease, color 0.18s ease, transform 0.18s ease;
}
.vportal__tab .voyaliste-icon { color: var(--text-2); transition: color 0.18s ease; }
.vportal__tab:hover { background: var(--mist); color: var(--navy); }
.vportal__tab:hover .voyaliste-icon { color: var(--horizon); }
.vportal__tab.is-active { background: var(--navy); color: var(--cloud); font-weight: 600; }
.vportal__tab.is-active .voyaliste-icon { color: var(--gold-texte); }
.vportal__count {
	margin-left: auto; font-style: normal; font-family: var(--font-mono); font-size: var(--text-2xs);
	background: var(--mist); color: var(--horizon-dark); padding: 1px 7px; border-radius: 999px;
}
.vportal__tab.is-active .vportal__count { background: rgba(255,255,255,0.16); color: var(--cloud); }
/* Pastille « non lu » : la seule qui attire volontairement l'œil. */
.vportal__count--alerte { background: var(--orange); color: var(--navy); }
.vportal__tab.is-active .vportal__count--alerte { background: var(--orange); color: var(--navy); }

/* Bandeau « vous avez de nouveaux messages » en tête de la vue d'ensemble. */
.vnotif {
	display: flex; align-items: center; gap: var(--space-3); width: 100%; text-align: left;
	padding: var(--space-4); margin-bottom: var(--space-5); cursor: pointer;
	background: #FBF4E2; border: 1px solid #EFDFB2; border-left: 3px solid var(--gold-fonce);
	border-radius: var(--radius-md); font-family: var(--font-body);
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.vnotif:hover { transform: translateY(-2px); box-shadow: var(--shadow-card); }
.vnotif > .voyaliste-icon { color: var(--gold-texte); flex-shrink: 0; }
.vnotif span { display: block; }
.vnotif strong { display: block; color: var(--navy); font-size: var(--text-base); }
.vnotif span span, .vnotif > span { font-size: var(--text-sm); color: var(--text-2); }
.vnotif__fleche { margin-left: auto; color: var(--gold-texte); display: flex; }

/* Texte réservé aux lecteurs d'écran. */
.screen-reader-text {
	position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
	overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* Focus visible : indispensable pour la navigation au clavier. */
.vportal__tab:focus-visible, .vmission__head:focus-visible, .vnotif:focus-visible {
	outline: 2px solid var(--horizon); outline-offset: 2px;
}

.vportal__logout {
	display: flex; align-items: center; gap: var(--space-3); margin-top: var(--space-4);
	padding: var(--space-3); border-top: 1px solid var(--border); color: var(--text-2);
	font-size: var(--text-sm); text-decoration: none; transition: color 0.18s ease;
}
.vportal__logout:hover { color: var(--orange-dark); }

.vportal__main { min-width: 0; }

/* Panneaux : un seul visible, avec une entrée en douceur. */
.vpanel { display: none; }
.vpanel.is-active { display: block; animation: vpanel-in 0.34s cubic-bezier(0.22, 1, 0.36, 1); }
@keyframes vpanel-in {
	from { opacity: 0; transform: translateY(10px); }
	to   { opacity: 1; transform: none; }
}
.vpanel__head { margin-bottom: var(--space-5); }
.vpanel__head h2 { font-size: var(--text-3xl); margin-bottom: var(--space-1); }
.vpanel__head p { color: var(--text-2); font-size: var(--text-base); }

/* ------------------------------------------------------ Chiffres clés */

.vstats { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-3); margin-bottom: var(--space-6); }
.vstat {
	background: var(--cloud); border: 1px solid var(--border); border-radius: var(--radius-md);
	padding: var(--space-4); transition: transform 0.22s ease, box-shadow 0.22s ease;
}
.vstat:hover { transform: translateY(-3px); box-shadow: var(--shadow-card); }
.vstat__value { display: block; font-family: var(--font-mono); font-size: var(--text-2xl); font-weight: 600; color: var(--navy); line-height: 1.1; }
.vstat__label { display: block; font-size: var(--text-2xs); color: var(--text-2); margin-top: var(--space-1); text-transform: uppercase; letter-spacing: 0.06em; }

@media (max-width: 700px) { .vstats { grid-template-columns: repeat(2, 1fr); } }

/* --------------------------------------------------- Mission en vedette */

.vfeature {
	background: linear-gradient(150deg, var(--navy), #1C3446);
	color: var(--cloud); border-radius: var(--radius-md); padding: var(--space-6);
	margin-bottom: var(--space-6); position: relative; overflow: hidden;
}
.vfeature::after {
	content: ''; position: absolute; width: 300px; height: 300px; right: -110px; bottom: -140px;
	background: radial-gradient(circle, rgba(44,156,219,0.32), transparent 70%);
	pointer-events: none;
}
.vfeature__eyebrow {
	font-family: var(--font-mono); font-size: var(--text-2xs); letter-spacing: 0.14em;
	text-transform: uppercase; color: var(--gold-texte); display: block; margin-bottom: var(--space-2);
}
.vfeature__head h3 { color: var(--cloud); font-size: var(--text-2xl); margin-bottom: var(--space-5); }
.vfeature .voyaliste-btn-ghost { border-color: rgba(255,255,255,0.3); color: var(--cloud); margin-top: var(--space-4); position: relative; z-index: 1; }
.vfeature .voyaliste-btn-ghost:hover { background: rgba(255,255,255,0.1); border-color: var(--gold); }

/* ------------------------------------------------ Frise de progression */

.vtimeline {
	list-style: none; display: grid; grid-auto-flow: column; grid-auto-columns: 1fr;
	position: relative; margin: var(--space-5) 0; padding: 0;
}
/* Rail + remplissage : la progression est pilotée par --vtimeline-progress. */
.vtimeline::before, .vtimeline::after {
	content: ''; position: absolute; top: 9px; height: 2px; border-radius: 2px;
}
.vtimeline::before { left: 0; right: 0; background: var(--border); }
.vtimeline::after {
	left: 0; width: var(--vtimeline-progress, 0%); background: var(--gold-fonce);
	transition: width 0.8s cubic-bezier(0.22, 1, 0.36, 1);
}
.vfeature .vtimeline::before { background: rgba(255,255,255,0.18); }

.vtimeline__step { position: relative; padding-top: var(--space-5); text-align: center; }
.vtimeline__dot {
	position: absolute; top: 3px; left: 50%; transform: translateX(-50%);
	width: 15px; height: 15px; border-radius: 50%; background: var(--cloud);
	border: 2px solid var(--border); display: flex; align-items: center; justify-content: center;
	color: #fff; transition: background 0.3s ease, border-color 0.3s ease, transform 0.3s ease;
}
.vfeature .vtimeline__dot { background: var(--navy); border-color: rgba(255,255,255,0.3); }
.vtimeline__step.is-done .vtimeline__dot { background: var(--gold-fonce); border-color: var(--gold-fonce); }
.vtimeline__step.is-current .vtimeline__dot {
	background: var(--gold-fonce); border-color: var(--gold-texte); transform: translateX(-50%) scale(1.25);
	box-shadow: 0 0 0 4px rgba(168, 118, 19,0.22);
}
/* Pulsation sur l'étape en cours : signale que c'est vivant, sans distraire. */
.vtimeline__step.is-current .vtimeline__dot::before {
	content: ''; position: absolute; inset: -3px; border-radius: 50%;
	border: 2px solid var(--gold-fonce); animation: vpulse 2s ease-out infinite;
}
@keyframes vpulse {
	0%   { transform: scale(1); opacity: 0.7; }
	100% { transform: scale(2.1); opacity: 0; }
}
.vtimeline__label { display: block; font-size: var(--text-2xs); color: var(--text-2); line-height: 1.3; padding: 0 2px; }
.vfeature .vtimeline__label { color: #A8BECD; }
.vtimeline__step.is-current .vtimeline__label { color: var(--navy); font-weight: 700; }
.vfeature .vtimeline__step.is-current .vtimeline__label { color: var(--cloud); }
.vtimeline__step.is-done .vtimeline__label { color: var(--navy); }
.vfeature .vtimeline__step.is-done .vtimeline__label { color: #D3E2EC; }
.vtimeline__detail { display: block; font-size: var(--text-2xs); color: var(--text-2); margin-top: 2px; }
.vfeature .vtimeline__detail { color: #8FA9BA; }
.vtimeline__annulee {
	display: flex; align-items: center; gap: var(--space-2); padding: var(--space-3) var(--space-4);
	background: #FBE7E4; color: var(--orange-dark); border-radius: var(--radius-sm);
	font-size: var(--text-sm); font-weight: 600; margin: var(--space-4) 0;
}

@media (max-width: 640px) {
	.vtimeline { grid-auto-flow: row; grid-auto-columns: auto; gap: var(--space-4); }
	.vtimeline::before { left: 7px; right: auto; top: 0; bottom: 0; width: 2px; height: auto; }
	.vtimeline::after { left: 7px; top: 0; width: 2px; height: var(--vtimeline-progress, 0%); transition: height 0.8s ease; }
	.vtimeline__step { padding: 0 0 0 var(--space-6); text-align: left; }
	.vtimeline__dot { top: 2px; left: 0; transform: none; }
	.vtimeline__step.is-current .vtimeline__dot { transform: scale(1.2); }
}

/* ------------------------------------------------------ Carte mission */

.vmission {
	background: var(--cloud); border: 1px solid var(--border); border-radius: var(--radius-md);
	margin-bottom: var(--space-4); overflow: hidden;
	transition: box-shadow 0.25s ease, border-color 0.25s ease;
}
.vmission:hover { box-shadow: var(--shadow-card); }
.vmission.is-open { border-color: var(--horizon); box-shadow: var(--shadow-card); }
.vmission__head {
	display: flex; align-items: center; justify-content: space-between; gap: var(--space-4);
	width: 100%; padding: var(--space-4) var(--space-5); border: none; background: transparent;
	cursor: pointer; text-align: left; font-family: var(--font-body);
	transition: background 0.18s ease;
}
.vmission__head:hover { background: var(--mist); }
.vmission__route strong { display: block; font-size: var(--text-lg); color: var(--navy); font-weight: 600; }
.vmission__route strong span { color: var(--gold-texte); }
.vmission__meta { display: block; font-size: var(--text-2xs); color: var(--text-2); margin-top: 2px; }
.vmission__head-right { display: flex; align-items: center; gap: var(--space-3); flex-shrink: 0; }
.vmission__price { font-family: var(--font-mono); font-weight: 600; color: var(--navy); font-size: var(--text-sm); }
.vmission__chevron { color: var(--text-2); display: flex; transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1); }
.vmission.is-open .vmission__chevron { transform: rotate(90deg); color: var(--horizon); }

/* Dépliage : grid-template-rows anime une hauteur inconnue sans JS de mesure. */
.vmission__body {
	display: grid; grid-template-rows: 0fr;
	transition: grid-template-rows 0.38s cubic-bezier(0.22, 1, 0.36, 1);
}
.vmission__body > * { overflow: hidden; }
.vmission.is-open .vmission__body { grid-template-rows: 1fr; }
.vmission__inner { padding: 0 var(--space-5) var(--space-5); }

.vbadge {
	display: inline-block; padding: 4px 11px; border-radius: 999px;
	background: var(--mist); color: var(--horizon-dark);
	font-size: var(--text-2xs); font-weight: 700; letter-spacing: 0.02em; white-space: nowrap;
}
.vbadge--livree, .vbadge--payee { background: #E4F5EA; color: #1E7A42; }
.vbadge--annulee { background: #FBE7E4; color: var(--orange-dark); }
.vbadge--en_cours { background: #FFF1E7; color: var(--orange-dark); }
.vbadge--confirmee { background: var(--mist); color: var(--horizon-dark); }
.vbadge--nouvelle, .vbadge--devis_envoye { background: #F1F5F8; color: var(--text-2); }

/* Détails factuels */
.vmission__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-3); margin-bottom: var(--space-5); }
.vfact { background: var(--mist); border-radius: var(--radius-sm); padding: var(--space-3); }
.vfact__label { display: flex; align-items: center; gap: 6px; font-size: var(--text-2xs); color: var(--text-2); text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 4px; }
.vfact__label .voyaliste-icon { color: var(--horizon); }
.vfact__value { display: block; font-size: var(--text-base); font-weight: 600; color: var(--navy); }
@media (max-width: 760px) { .vmission__grid { grid-template-columns: repeat(2, 1fr); } }

.vmission__note { background: var(--mist); border-left: 3px solid var(--horizon); border-radius: var(--radius-sm); padding: var(--space-3) var(--space-4); margin-bottom: var(--space-5); }
.vmission__note-label { display: block; font-size: var(--text-2xs); text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-2); margin-bottom: 4px; }
.vmission__note p { font-size: var(--text-sm); color: var(--navy); }

.vblock { margin-bottom: var(--space-5); }
.vblock__label {
	display: flex; align-items: center; gap: 6px; font-family: var(--font-mono);
	font-size: var(--text-2xs); letter-spacing: 0.08em; text-transform: uppercase;
	color: var(--text-2); margin-bottom: var(--space-3);
}
.vblock__label .voyaliste-icon { color: var(--horizon); }

.vphotos { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); }
.vphotos figure { margin: 0; }
.vphotos img {
	width: 100%; height: 160px; object-fit: cover; border-radius: var(--radius-sm);
	border: 1px solid var(--border); transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.vphotos a:hover img { transform: scale(1.02); box-shadow: var(--shadow-card); }
.vphotos figcaption { font-size: var(--text-2xs); color: var(--text-2); margin-top: var(--space-1); text-align: center; }

.vdocs { list-style: none; display: grid; gap: var(--space-2); }
.vdocs a {
	display: flex; align-items: center; gap: var(--space-2); padding: var(--space-3);
	background: var(--mist); border-radius: var(--radius-sm); color: var(--navy);
	font-size: var(--text-sm); font-weight: 500; text-decoration: none;
	transition: background 0.18s ease, transform 0.18s ease;
}
.vdocs a:hover { background: #DCEEF8; transform: translateX(3px); }
.vdocs .voyaliste-icon { color: var(--horizon); }

.vmission__foot { border-top: 1px solid var(--border); padding-top: var(--space-4); }
.vmission__foot .voyaliste-btn-ghost { display: inline-flex; align-items: center; gap: var(--space-2); }

/* ------------------------------- Étapes validées par le convoyeur (client) */

.vetapes { margin: var(--space-5) 0 0; }
.vetapes__label {
	display: flex; align-items: center; gap: 6px; font-family: var(--font-mono);
	font-size: var(--text-2xs); letter-spacing: 0.08em; text-transform: uppercase;
	color: var(--text-2); margin-bottom: var(--space-3);
}
.vetapes__label .voyaliste-icon { color: var(--horizon); }
.vfeature .vetapes__label { color: #A8BECD; }
.vetapes__liste { list-style: none; display: grid; gap: var(--space-2); margin: 0; padding: 0; }
.vetapes__item { display: flex; align-items: center; gap: var(--space-3); }
.vetapes__puce {
	width: 22px; height: 22px; flex-shrink: 0; border-radius: 50%;
	border: 2px solid var(--border); background: var(--cloud);
	display: flex; align-items: center; justify-content: center; color: #fff;
}
.vfeature .vetapes__puce { background: transparent; border-color: rgba(255,255,255,0.25); }
.vetapes__item.is-faite .vetapes__puce { background: var(--horizon); border-color: var(--horizon); }
.vetapes__texte { display: flex; align-items: baseline; gap: var(--space-3); flex-wrap: wrap; font-size: var(--text-sm); }
.vetapes__texte strong { color: var(--navy); font-weight: 600; }
.vfeature .vetapes__texte strong { color: #D3E2EC; }
.vetapes__item.is-attente strong { color: var(--text-2); font-weight: 400; }
.vfeature .vetapes__item.is-attente strong { color: #7C93A5; }
.vetapes__texte time { font-family: var(--font-mono); font-size: var(--text-2xs); color: var(--horizon-dark); }
.vfeature .vetapes__texte time { color: var(--gold-texte); }
.vetapes__attente { font-size: var(--text-2xs); color: var(--text-2); font-style: italic; }

.vfeature__carte { margin: var(--space-5) 0 0; }
.vfeature__carte .vc-tracking-map { height: 260px; border-color: rgba(255,255,255,0.18); }
.vfeature .vc-tracking-status { color: #A8BECD; }
.vfeature .vc-tracking-status.is-ok { color: var(--gold-texte); }

/* ------------------------------------------------------- Fils de discussion */

.vthread {
	background: var(--cloud); border: 1px solid var(--border); border-radius: var(--radius-md);
	padding: var(--space-5); margin-bottom: var(--space-4);
	transition: border-color 0.3s ease, box-shadow 0.3s ease;
}
.vthread.is-highlighted { border-color: var(--gold-fonce); box-shadow: 0 0 0 3px rgba(168, 118, 19, 0.16); }
.vthread.has-unread { border-left: 3px solid var(--gold-fonce); }
.vthread__nouveau {
	font-style: normal; background: var(--orange); color: var(--navy); padding: 2px 9px;
	border-radius: 999px; font-size: var(--text-2xs); font-weight: 700; margin-right: var(--space-2);
}
/* Un message reçu depuis la dernière visite se distingue sans crier. */
.vc-message.is-nouveau { box-shadow: 0 0 0 2px rgba(168, 118, 19,0.35); }
.vthread__head { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-3); margin-bottom: var(--space-4); flex-wrap: wrap; }
.vthread__head strong { font-size: var(--text-lg); color: var(--navy); }
.vthread__head strong span { color: var(--gold-texte); }
.vthread__head > span { font-size: var(--text-2xs); color: var(--text-2); }

/* --------------------------------------------------------- Mon compte */

.vaccount { background: var(--cloud); border: 1px solid var(--border); border-radius: var(--radius-md); padding: var(--space-5); max-width: 520px; }
.vaccount .vf-field { margin-bottom: var(--space-4); }
.vaccount label { display: block; font-size: var(--text-xs); font-weight: 600; color: var(--navy); margin-bottom: var(--space-1); }
.vaccount input {
	width: 100%; height: 46px; border: 1.5px solid var(--border); border-radius: var(--radius-sm);
	padding: 0 14px; background: var(--mist); transition: border-color 0.2s ease, background 0.2s ease;
}
.vaccount input:focus { border-color: var(--horizon); background: var(--cloud); outline: none; }
.vaccount input:disabled { color: var(--text-2); cursor: not-allowed; }
.vaccount__aside { margin-top: var(--space-5); padding: var(--space-5); background: var(--mist); border-radius: var(--radius-md); max-width: 520px; }
.vaccount__aside h3 { font-size: var(--text-lg); margin-bottom: var(--space-2); }
.vaccount__aside p { font-size: var(--text-sm); color: var(--text-2); margin-bottom: var(--space-4); }

/* ------------------------------------------------------- États vides */

.vempty {
	text-align: center; padding: var(--space-8) var(--space-5);
	background: var(--cloud); border: 1px dashed var(--border); border-radius: var(--radius-md);
}
.vempty__icon {
	display: inline-flex; width: 68px; height: 68px; align-items: center; justify-content: center;
	border-radius: 50%; background: var(--mist); color: var(--horizon); margin-bottom: var(--space-4);
}
.vempty h3 { font-size: var(--text-xl); margin-bottom: var(--space-2); }
.vempty p { color: var(--text-2); font-size: var(--text-sm); margin-bottom: var(--space-5); max-width: 42ch; margin-inline: auto; }

/* ------------------------------------------------ Bandeau de réassurance */

.vreassure { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-3); }
.vreassure > div {
	display: flex; align-items: center; gap: var(--space-3); padding: var(--space-4);
	background: var(--mist); border-radius: var(--radius-sm); font-size: var(--text-sm); color: var(--navy);
}
.vreassure .voyaliste-icon { color: var(--horizon); flex-shrink: 0; }
@media (max-width: 760px) { .vreassure { grid-template-columns: 1fr; } }

/* --------------------------------------------------- Portail : mobile */

@media (max-width: 900px) {
	.vportal { grid-template-columns: minmax(0, 1fr); gap: var(--space-4); }
	.vportal__side { position: static; }
	.vportal__identity { padding-bottom: var(--space-3); }
	/* Onglets en ligne, chaque colonne autorisée à se réduire (minmax(0,1fr)). */
	.vportal__nav { grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: var(--space-1); min-width: 0; }
	.vportal__tab {
		flex-direction: column; gap: 4px; padding: var(--space-3) var(--space-1);
		text-align: center; font-size: var(--text-2xs); min-width: 0;
	}
	.vportal__tab span { white-space: normal; overflow-wrap: anywhere; line-height: 1.2; }
	.vportal__count { position: absolute; top: 3px; right: 4px; margin: 0; }
	.vportal__logout { justify-content: center; }
}

/* Sous 560px, quatre onglets côte à côte deviennent illisibles : on passe en
   deux colonnes plutôt que d'imposer un défilement latéral. */
@media (max-width: 560px) {
	.vportal__nav { grid-auto-flow: row; grid-template-columns: 1fr 1fr; grid-auto-columns: auto; }
	.vportal__tab { flex-direction: row; gap: var(--space-2); text-align: left; padding: var(--space-3); font-size: var(--text-xs); }
	.vportal__count { position: static; margin-left: auto; }
}

/* Suivi en direct (Leaflet) */
.vc-tracking { margin-bottom: var(--space-4); }
.vc-tracking-label {
	display: block; font-family: var(--font-mono); font-size: var(--text-2xs); letter-spacing: 0.08em;
	text-transform: uppercase; color: var(--text-2); margin-bottom: var(--space-2);
}
.vc-tracking-map { width: 100%; height: 240px; border-radius: var(--radius-sm); border: 1px solid var(--border); }
.vc-tracking-status { display: block; font-size: var(--text-sm); color: var(--text-2); margin-top: var(--space-2); }
.vc-tracking-status.is-ok { color: var(--horizon-dark); }
.vc-tracking-status.is-warn { color: var(--orange-dark); }
.vc-tracking-placeholder { font-size: var(--text-sm); color: var(--text-2); font-style: italic; margin-bottom: var(--space-4); }
.vc-tracking-marker span {
	display: block; width: 16px; height: 16px; border-radius: 50%;
	background: var(--gold-fonce); border: 3px solid var(--cloud); box-shadow: 0 0 0 2px var(--gold-fonce);
}

/* Acompte en ligne (Stripe) */
.vc-acompte {
	margin-bottom: var(--space-4); padding: var(--space-4);
	border: 1px solid var(--border); border-left: 3px solid var(--gold-fonce);
	border-radius: var(--radius-sm); background: var(--mist);
}
.vc-acompte-label {
	display: block; font-family: var(--font-mono); font-size: var(--text-2xs); letter-spacing: 0.08em;
	text-transform: uppercase; color: var(--text-2); margin-bottom: var(--space-2);
}
.vc-acompte p { font-size: var(--text-sm); color: var(--navy); margin-bottom: var(--space-3); }
.vc-acompte p strong { font-size: var(--text-lg); }
.vc-acompte .vc-acompte-feedback:empty { display: none; }
.vc-acompte-paye {
	border-left-color: var(--horizon); color: var(--horizon-dark);
	font-size: var(--text-sm); font-weight: 600;
}

/* Discussion en bulles : le client à droite, Voyaliste à gauche — la lecture
   est immédiate, comme dans une messagerie du quotidien. */
.vc-messages { display: flex; flex-direction: column; gap: var(--space-3); margin-bottom: var(--space-4); max-height: 420px; overflow-y: auto; padding-right: var(--space-1); }
.vc-message { max-width: 78%; padding: var(--space-3) var(--space-4); border-radius: var(--radius-md); animation: vmsg-in 0.3s cubic-bezier(0.22, 1, 0.36, 1); }
@keyframes vmsg-in {
	from { opacity: 0; transform: translateY(8px); }
	to   { opacity: 1; transform: none; }
}
.vc-message-client { align-self: flex-end; background: var(--navy); color: var(--cloud); border-bottom-right-radius: 4px; }
.vc-message-admin  { align-self: flex-start; background: var(--mist); color: var(--navy); border-bottom-left-radius: 4px; }
.vc-message-author { display: block; font-size: var(--text-2xs); font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; margin-bottom: 3px; opacity: 0.75; }
.vc-message p { font-size: var(--text-sm); line-height: 1.55; }
.vc-message time { display: block; font-size: var(--text-2xs); margin-top: 4px; opacity: 0.6; }

/* Zone de réponse : présentée comme une réponse, pas comme une barre de
   recherche. Le libellé change selon qu'il y a un message à répondre ou non. */
.vc-message-form { display: flex; flex-direction: column; gap: var(--space-2); }
.vc-message-form__label {
	display: flex; align-items: center; gap: var(--space-2);
	font-size: var(--text-sm); font-weight: 600; color: var(--navy);
}
.vc-message-form__label svg { color: var(--horizon); }
/* min-width:0 : sans lui, le champ refuse de se réduire sous la largeur de son
   texte et pousse le pied de formulaire hors de l'écran sur un téléphone. */
.vc-message-form textarea {
	width: 100%; min-width: 0; max-width: 100%; min-height: 62px; resize: vertical;
	border: 1.5px solid var(--border); border-radius: var(--radius-sm);
	padding: 12px 14px; background: var(--mist);
	font-family: var(--font-body); font-size: var(--text-sm); color: var(--navy);
	line-height: 1.5; transition: border-color 0.2s ease, background 0.2s ease;
}
.vc-message-form textarea:focus { border-color: var(--horizon); background: var(--cloud); outline: none; }
.vc-message-form__pied {
	display: flex; align-items: center; justify-content: space-between;
	gap: var(--space-3); flex-wrap: wrap;
}
.vc-message-form__aide { font-size: var(--text-2xs); color: var(--text-2); }
.vc-message-form button {
	background: var(--orange); color: var(--navy); border: none; border-radius: var(--radius-sm);
	min-height: 44px; padding: 0 22px; font-family: var(--font-body); font-weight: 600; cursor: pointer;
	transition: background 0.2s ease, transform 0.2s ease;
}
.vc-message-form button:hover { background: var(--orange-dark); transform: translateY(-1px); }
.vc-message-form button:active { transform: none; }
.vc-message-form button:disabled { opacity: 0.6; cursor: default; transform: none; }
.vc-no-messages { font-size: var(--text-sm); color: var(--text-2); font-style: italic; }

@media (max-width: 460px) {
	.vc-message-form__pied { flex-direction: column; align-items: stretch; }
	.vc-message-form__aide { order: 2; text-align: center; }
	.vc-message-form button { width: 100%; }
	.vc-message { max-width: 92%; }
}

/* ==========================================================================
   Blocs illustrés : image/texte alterné, galerie, marques
   ========================================================================== */

.vsplit {
	display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 5vw, 72px);
	align-items: center;
}
/* Alternance : une section sur deux inverse l'ordre, ce qui donne le rythme
   en zigzag caractéristique des pages éditoriales soignées. */
.vsplit--inverse .vsplit__media { order: 2; }
.vsplit--sans-image { grid-template-columns: 1fr; max-width: 72ch; margin-inline: auto; text-align: center; }

.vsplit__media {
	position: relative; border-radius: var(--radius-lg); overflow: hidden;
	box-shadow: var(--shadow-card); background: var(--mist);
	/* Proportion imposée : des photos de tailles différentes déposées par le
	   client donnent malgré tout une page régulière. */
	aspect-ratio: 4 / 3;
}
.vsplit__media img {
	width: 100%; height: 100%; object-fit: cover; display: block;
	transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}
.vsplit:hover .vsplit__media img { transform: scale(1.04); }
/* Filet orange discret, rappel de la marque sans surcharger la photo. */
.vsplit__media::after {
	content: ''; position: absolute; left: 0; bottom: 0; width: 84px; height: 5px;
	background: var(--orange);
}

.vsplit__eyebrow {
	display: block; font-family: var(--font-mono); font-size: var(--text-2xs);
	letter-spacing: 0.14em; text-transform: uppercase; color: var(--gold-texte);
	margin-bottom: var(--space-3);
}
.vsplit__titre { font-size: var(--text-3xl); line-height: 1.2; margin-bottom: var(--space-4); }
.vsplit__lede { font-size: var(--text-lg); color: var(--text-2); line-height: 1.65; margin-bottom: var(--space-5); }
.vsplit__points { list-style: none; display: grid; gap: var(--space-3); margin-bottom: var(--space-5); }
.vsplit__points li { display: flex; align-items: flex-start; gap: var(--space-3); font-size: var(--text-base); color: var(--navy); }
.vsplit__points .voyaliste-icon {
	color: #fff; background: var(--horizon); border-radius: 50%; padding: 3px;
	flex-shrink: 0; margin-top: 1px;
}
.vsplit__lien { display: inline-flex; }

@media (max-width: 860px) {
	.vsplit { grid-template-columns: 1fr; gap: var(--space-5); }
	.vsplit--inverse .vsplit__media { order: 0; }
	.vsplit__media { aspect-ratio: 16 / 10; }
}

/* Galerie : mosaïque régulière, portraits légèrement allongés. */
.vgalerie {
	display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
	gap: var(--space-4); margin-top: var(--space-6);
}
.vgalerie__item {
	margin: 0; border-radius: var(--radius-md); overflow: hidden;
	aspect-ratio: 3 / 4; background: var(--mist); box-shadow: var(--shadow-card);
}
.vgalerie__item img {
	width: 100%; height: 100%; object-fit: cover; display: block;
	transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}
.vgalerie__item:hover img { transform: scale(1.05); }
@media (max-width: 560px) {
	.vgalerie { grid-template-columns: 1fr 1fr; gap: var(--space-3); }
}

/* Véhicules vectoriels : sans fond par nature, ils prennent la couleur du
   texte parent et fonctionnent donc sur fond clair comme sur fond foncé. */
.vvehicule { display: block; width: 100%; line-height: 0; }
.vvehicule svg { display: block; width: 100%; height: auto; }
.vvehicule--photo img { display: block; width: 100%; height: auto; }
.vvehicule.is-miroir { transform: scaleX(-1); }

/* Filigrane : un véhicule dans un angle de section.
   Règle retenue pour tout le site : le décor vit dans les marges blanches de
   la page, jamais sous une ligne de texte. Tant que l'écran est trop étroit
   pour dégager une marge, la voiture reste un filigrane très atténué ; dès
   qu'une marge existe, elle s'y installe franchement. C'est ce qui permet de
   bien la voir sans jamais toucher à la lisibilité. */
.vsection-filigrane { position: relative; overflow: hidden; }
.vsection-filigrane > .wrap, .vsection-filigrane > .voyaliste-wrap { position: relative; z-index: 1; }

.vfiligrane {
	position: absolute; bottom: -6%; width: 42%; max-width: 560px;
	z-index: 0; pointer-events: none;
}
.vfiligrane--droite { right: -6%; }
.vfiligrane--gauche { left: -6%; }
.vfiligrane .vvehicule { color: var(--navy); opacity: 0.07; }
.vfiligrane--gauche .vvehicule { transform: scaleX(-1); }
/* Écran étroit : aucune marge libre, la photo croiserait le texte. Elle reste
   donc au niveau d'un filigrane. */
.vfiligrane .vvehicule--photo { opacity: 0.1; filter: grayscale(0.3); }

/* À partir de 1560 px la page dégage une vraie marge de chaque côté. La
   voiture s'y installe, entière et franche. Sa largeur suit la marge
   réellement disponible : la moitié de ce qui dépasse du conteneur. */
@media (min-width: 1560px) {
	.vfiligrane {
		width: clamp(110px, calc((100vw - 1330px) / 2 - 10px), 220px);
		max-width: none; bottom: 4%;
	}
	.vfiligrane--gauche { left: 10px; right: auto; }
	.vfiligrane--droite { right: 10px; left: auto; }
	.vfiligrane .vvehicule { opacity: 0.5; }
	.vfiligrane .vvehicule--photo {
		opacity: 0.85;
		filter: saturate(1.05) drop-shadow(0 12px 20px rgba(18, 40, 63, 0.16));
	}
}
/* Au-delà de 1800 px le conteneur passe à 1440 px : la marge se recalcule. */
@media (min-width: 1800px) {
	.vfiligrane { width: clamp(120px, calc((100vw - 1450px) / 2 - 10px), 240px); }
}
@media (max-width: 900px) { .vfiligrane { display: none; } }

/* Section encadrée par deux véhicules. */
.vflanque {
	display: grid; grid-template-columns: minmax(0, 200px) 1fr minmax(0, 200px);
	align-items: center; gap: var(--space-6);
}
.vflanque > .vvehicule { color: currentColor; opacity: 0.28; }
.vflanque__contenu { min-width: 0; }
/* Sous 1100 px l'espace doit revenir au texte : le décor s'efface. */
@media (max-width: 1100px) {
	.vflanque { grid-template-columns: 1fr; }
	.vflanque > .vvehicule { display: none; }
}

/* Section « véhicule qui déborde ».
   Le véhicule est volontairement plus large que sa moitié d'écran et sort du
   cadre : c'est ce débordement qui donne l'échelle et l'impression de
   puissance. Le dégradé descend du navy vers le bleu pâle, si bien que la
   voiture paraît se poser sur une surface claire. */
.vfond {
	position: relative; overflow: hidden; isolation: isolate;
	min-height: 560px; display: flex; align-items: center;
	padding: var(--space-9) 0 var(--space-10);
	background: linear-gradient(172deg, var(--navy) 0%, #1B3E5C 46%, #7FB4D6 78%, var(--mist) 100%);
	color: var(--cloud);
	/* Découpe en chevron haut et bas, comme une flèche qui pousse vers l'avant. */
	clip-path: polygon(0 0, 50% 3.5%, 100% 0, 100% 100%, 50% 96.5%, 0 100%);
	margin-block: calc(var(--space-5) * -1);
}
.vfond__vehicule {
	position: absolute; right: -9%; bottom: 4%; width: 66%; max-width: 1000px;
	z-index: -1; pointer-events: none;
}
/* Dessin vectoriel : simple filigrane. Photo détourée : pleine présence. */
.vfond__vehicule .vvehicule { color: rgba(255,255,255,0.16); }
.vfond__vehicule .vvehicule--photo { filter: drop-shadow(0 32px 44px rgba(0,0,0,0.42)); }
/* Voile de lecture, uniquement du côté du texte. */
.vfond::before {
	content: ''; position: absolute; inset: 0; z-index: -1;
	background: linear-gradient(95deg, rgba(18, 40, 63,0.92) 30%, rgba(18, 40, 63,0.55) 52%, transparent 76%);
}
.vfond__inner { max-width: 560px; position: relative; }
.vfond__eyebrow {
	display: block; font-family: var(--font-mono); font-size: var(--text-2xs);
	letter-spacing: 0.18em; text-transform: uppercase; color: var(--gold-texte); margin-bottom: var(--space-3);
}
/* Titre très espacé, à la manière des grands bandeaux automobiles. */
.vfond__titre {
	font-size: var(--text-4xl); color: var(--cloud); line-height: 1.18;
	letter-spacing: 0.06em; text-transform: uppercase; margin-bottom: var(--space-4);
}
.vfond__texte { font-size: var(--text-lg); color: #CFE0EC; line-height: 1.65; margin-bottom: var(--space-5); }

/* Variante : le véhicule déborde par la gauche, le texte passe à droite. */
.vfond--inverse .vfond__vehicule { right: auto; left: -9%; }
.vfond--inverse .vfond__vehicule .vvehicule { transform: scaleX(-1); }
.vfond--inverse::before {
	background: linear-gradient(265deg, rgba(18, 40, 63,0.92) 30%, rgba(18, 40, 63,0.55) 52%, transparent 76%);
}
.vfond--inverse .vfond__inner { margin-left: auto; text-align: right; }

@media (max-width: 900px) {
	/* Sur mobile, un véhicule qui déborde écraserait le texte : il s'efface,
	   le dégradé et la découpe restent pour garder le caractère. */
	.vfond { min-height: 0; padding: var(--space-7) 0; clip-path: polygon(0 0, 50% 2%, 100% 0, 100% 100%, 50% 98%, 0 100%); }
	.vfond__vehicule { display: none; }
	.vfond::before, .vfond--inverse::before { background: linear-gradient(180deg, rgba(18, 40, 63,0.9), rgba(18, 40, 63,0.55)); }
	.vfond__inner, .vfond--inverse .vfond__inner { max-width: none; text-align: left; margin-left: 0; }
}

/* Rangée des gabarits pris en charge. */
.vgabarits {
	display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-5);
	margin-top: var(--space-7);
}
.vgabarit {
	text-align: center; padding: var(--space-6) var(--space-4);
	background: var(--cloud); border: 1px solid var(--border); border-radius: var(--radius-md);
	transition: transform 0.28s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.28s ease, border-color 0.28s ease;
}
.vgabarit:hover { transform: translateY(-5px); box-shadow: var(--shadow-card); border-color: var(--horizon); }
.vgabarit .vvehicule { color: var(--navy); max-width: 220px; margin: 0 auto var(--space-4); }
.vgabarit:hover .vvehicule { color: var(--horizon-dark); }
.vgabarit h3 { font-size: var(--text-lg); margin-bottom: var(--space-2); }
.vgabarit p { font-size: var(--text-sm); color: var(--text-2); margin: 0; }
@media (max-width: 860px) {
	.vgabarits { grid-template-columns: 1fr; gap: var(--space-4); }
	.vgabarit { display: grid; grid-template-columns: 130px 1fr; align-items: center; gap: var(--space-4); text-align: left; padding: var(--space-4); }
	.vgabarit .vvehicule { margin: 0; }
}
@media (max-width: 420px) {
	.vgabarit { grid-template-columns: 1fr; text-align: center; }
	.vgabarit .vvehicule { margin: 0 auto var(--space-3); max-width: 180px; }
}

/* Marques convoyées : une ligne sobre, en toutes lettres. */
.vmarques { padding: var(--space-7) 0; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.vmarques__label {
	display: block; text-align: center; font-family: var(--font-mono);
	font-size: var(--text-2xs); letter-spacing: 0.14em; text-transform: uppercase;
	color: var(--text-2); margin-bottom: var(--space-5);
}
.vmarques__liste {
	list-style: none; display: flex; flex-wrap: wrap; justify-content: center;
	gap: var(--space-3) var(--space-6); margin: 0; padding: 0;
}
.vmarques__liste li {
	font-family: var(--font-display); font-size: var(--text-lg); font-weight: 600;
	color: var(--text-2); letter-spacing: 0.01em;
	transition: color 0.25s ease;
}
.vmarques__liste li:hover { color: var(--navy); }
@media (max-width: 560px) {
	.vmarques { padding: var(--space-6) 0; }
	.vmarques__liste { gap: var(--space-2) var(--space-4); }
	.vmarques__liste li { font-size: var(--text-base); }
}

/* ==========================================================================
   Devenir partenaire convoyeur
   ========================================================================== */

.vpartenaire-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 5vw, 64px); align-items: start; }
.vpartenaire-infos .section__title { text-align: left; margin-bottom: var(--space-5); }

/* Étapes numérotées : le compteur CSS évite de coder les chiffres en dur. */
.vetapes-num { list-style: none; counter-reset: etape; display: grid; gap: var(--space-4); margin: 0 0 var(--space-5); padding: 0; }
.vetapes-num li {
	counter-increment: etape; position: relative; padding-left: 52px;
	display: flex; flex-direction: column; gap: 2px;
}
.vetapes-num li::before {
	content: counter( etape ); position: absolute; left: 0; top: 0;
	width: 34px; height: 34px; border-radius: 50%;
	background: var(--navy); color: #fff; font-family: var(--font-mono); font-weight: 700;
	display: flex; align-items: center; justify-content: center; font-size: var(--text-sm);
}
.vetapes-num strong { color: var(--navy); font-size: var(--text-md); }
.vetapes-num span { color: var(--text-2); font-size: var(--text-sm); line-height: 1.55; }

.vpartenaire-note {
	display: flex; align-items: flex-start; gap: var(--space-3);
	padding: var(--space-4); border-radius: var(--radius-sm);
	background: #FBF4E2; border-left: 3px solid var(--gold-fonce);
	font-size: var(--text-sm); color: var(--navy);
}
.vpartenaire-note .voyaliste-icon { color: var(--gold-texte); flex-shrink: 0; margin-top: 1px; }

.vpartenaire-form h2 { font-size: var(--text-2xl); margin-bottom: var(--space-1); }
.vpartenaire-form .vf-lede { font-size: var(--text-sm); color: var(--text-2); margin-bottom: var(--space-5); }
.vpartenaire-submit { width: 100%; margin-top: var(--space-2); }

/* Cases à cocher : la zone cliquable couvre tout le libellé, pas juste la case. */
.vf-field--case label { display: flex; align-items: flex-start; gap: var(--space-3); cursor: pointer; font-size: var(--text-sm); color: var(--navy); font-weight: 400; }
.vf-field--case input[type="checkbox"] { width: 18px; height: 18px; flex-shrink: 0; margin-top: 2px; accent-color: var(--gold-texte); }

/* Encart de recrutement sur l'accueil. */
.vrecrute { background: var(--mist); }
.vrecrute__inner { display: grid; grid-template-columns: 1fr auto; gap: var(--space-6); align-items: center; }
.vrecrute__eyebrow {
	display: block; font-family: var(--font-mono); font-size: var(--text-2xs);
	letter-spacing: 0.14em; text-transform: uppercase; color: var(--gold-texte); margin-bottom: var(--space-2);
}
.vrecrute h2 { font-size: var(--text-2xl); margin-bottom: var(--space-2); }
.vrecrute p { color: var(--text-2); font-size: var(--text-base); max-width: 60ch; margin: 0; }

@media (max-width: 900px) {
	.vpartenaire-grid { grid-template-columns: 1fr; }
	.vrecrute__inner { grid-template-columns: 1fr; text-align: left; }
}

/* ==========================================================================
   Page convoyeur — pensée pour un téléphone, en extérieur, souvent d'une
   seule main : gros boutons, contrastes francs, aucune fioriture.
   ========================================================================== */

.vconv { max-width: 560px; margin: 0 auto; }
.vconv__head { text-align: center; margin-bottom: var(--space-6); }
.vconv__eyebrow {
	display: block; font-family: var(--font-mono); font-size: var(--text-2xs);
	letter-spacing: 0.14em; text-transform: uppercase; color: var(--gold-texte); margin-bottom: var(--space-2);
}
.vconv__head h2 { font-size: var(--text-2xl); line-height: 1.25; }
.vconv__head h2 span { color: var(--gold-texte); }
.vconv__vehicule { font-size: var(--text-sm); color: var(--text-2); margin-top: var(--space-2); }

.vconv__bloc {
	background: var(--cloud); border: 1px solid var(--border); border-radius: var(--radius-md);
	padding: var(--space-5); margin-bottom: var(--space-4); box-shadow: var(--shadow-card);
}
.vconv__bloc h3 { font-size: var(--text-lg); margin-bottom: var(--space-1); }
.vconv__aide { font-size: var(--text-sm); color: var(--text-2); margin-bottom: var(--space-4); }

.vconv__etapes { list-style: none; display: grid; gap: var(--space-3); margin: 0; padding: 0; }
.vconv__etape {
	display: grid; grid-template-columns: auto 1fr; gap: var(--space-3);
	align-items: center; padding: var(--space-3); border-radius: var(--radius-sm);
	border: 1px solid transparent; transition: background 0.2s ease, border-color 0.2s ease;
}
.vconv__etape.is-faite { background: #EAF7EF; }
.vconv__etape.is-active { background: #FBF4E2; border-color: #EFDFB2; }
.vconv__etape.is-attente { opacity: 0.55; }
.vconv__puce {
	width: 30px; height: 30px; border-radius: 50%; display: flex; align-items: center;
	justify-content: center; background: var(--mist); color: var(--text-2); flex-shrink: 0;
}
.vconv__etape.is-faite .vconv__puce { background: #1E7A42; color: #fff; }
.vconv__etape.is-active .vconv__puce { background: var(--orange); color: var(--navy); }
.vconv__texte { display: flex; flex-direction: column; }
.vconv__texte strong { font-size: var(--text-base); color: var(--navy); }
.vconv__heure { font-style: normal; font-family: var(--font-mono); font-size: var(--text-2xs); color: var(--text-2); }
.vconv__etape.is-faite .vconv__heure { color: #1E7A42; }
/* Le bouton passe sous le libellé et occupe toute la largeur : cible large,
   atteignable au pouce sans viser. */
.vconv__valider { grid-column: 1 / -1; width: 100%; margin-top: var(--space-2); min-height: 52px; font-size: var(--text-base); }
.vconv.is-termine .vconv__bloc { opacity: 0.75; }

@media (max-width: 420px) {
	.vconv__bloc { padding: var(--space-4); }
	.vconv__head h2 { font-size: var(--text-xl); }
}

/* ==========================================================================
   Animations transverses
   ========================================================================== */

/* Le masquage initial est conditionné à la classe `js-reveal`, posée par
   main.js uniquement s'il est capable d'animer. Sans JavaScript — ou si le
   script échoue — aucun contenu n'est jamais masqué. */
.js-reveal [data-reveal] {
	opacity: 0; transform: translateY(18px);
	transition: opacity 0.65s cubic-bezier(0.22, 1, 0.36, 1), transform 0.65s cubic-bezier(0.22, 1, 0.36, 1);
	will-change: opacity, transform;
}
.js-reveal [data-reveal].is-revealed { opacity: 1; transform: none; }
/* Décalage en cascade pour les groupes (cartes, étapes, colonnes). */
.js-reveal [data-reveal][data-reveal-delay="1"] { transition-delay: 0.08s; }
.js-reveal [data-reveal][data-reveal-delay="2"] { transition-delay: 0.16s; }
.js-reveal [data-reveal][data-reveal-delay="3"] { transition-delay: 0.24s; }
.js-reveal [data-reveal][data-reveal-delay="4"] { transition-delay: 0.32s; }

/* --- Micro-interactions des composants publics --- */

/* Boutons : léger soulèvement + reflet qui traverse au survol. */
.voyaliste-btn-gold, .voyaliste-btn-ghost, .hero__cta .button {
	position: relative; overflow: hidden;
	transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease, border-color 0.2s ease;
}
.voyaliste-btn-gold::after {
	content: ''; position: absolute; top: 0; left: -80%; width: 45%; height: 100%;
	background: linear-gradient(100deg, transparent, rgba(255,255,255,0.32), transparent);
	transform: skewX(-18deg); pointer-events: none;
}
.voyaliste-btn-gold:hover::after { animation: vshine 0.7s ease; }
@keyframes vshine { to { left: 130%; } }
.voyaliste-btn-gold:hover, .voyaliste-btn-ghost:hover { transform: translateY(-2px); box-shadow: 0 10px 22px -12px rgba(18, 40, 63,0.45); }
.voyaliste-btn-gold:active, .voyaliste-btn-ghost:active { transform: translateY(0); }

/* Cartes et blocs de contenu : profondeur au survol, jamais de saut brusque. */
.card { transition: transform 0.28s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.28s ease; }
.card:hover { transform: translateY(-6px); box-shadow: 0 22px 44px -22px rgba(18, 40, 63,0.5); }
.card__icon, .feature__icon { transition: transform 0.28s cubic-bezier(0.22, 1, 0.36, 1); }
.card:hover .card__icon, .feature:hover .feature__icon { transform: translateY(-2px) scale(1.06); }

.steps__item, .waypoint { transition: transform 0.28s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.28s ease, border-color 0.28s ease; }
.steps__item:hover, .waypoint:hover { transform: translateY(-4px); box-shadow: var(--shadow-card); border-color: var(--horizon); }

/* Le trait de gauche des « features » se colore et s'épaissit à l'approche. */
.feature { transition: border-color 0.25s ease, padding-left 0.25s ease; }
.feature:hover { border-left-color: var(--horizon); }
.feature__link { position: relative; }
.feature__link::after {
	content: ''; position: absolute; left: 0; bottom: -2px; width: 0; height: 1.5px;
	background: var(--gold-fonce); transition: width 0.25s ease;
}
.feature__link:hover::after { width: 100%; }

/* L'ancien soulignement par lien a été remplacé par le repère glissant unique
   défini plus haut ; il ne reste ici que le positionnement. */
.site-nav__list > li > a { position: relative; }

/* ==========================================================================
   Impression — un client imprime son récapitulatif de mission (assurance,
   comptabilité, remise du véhicule). Tout doit sortir, sans le décor.
   ========================================================================== */

@media print {
	.site-header, .site-footer, .voyaliste-modal, .proof-carousel,
	.vportal__side, .vc-message-form, .vaccount, .vaccount__aside,
	.vnotif, .vmission__foot, .cta-banner, #nav-toggle,
	.vapp__pied, .vapp__bar, .vprofil, .vconf__actions { display: none !important; }

	/* En plein écran le contenu n'est plus contraint par une largeur de page :
	   on la rend à l'impression, sinon le compte rendu sort en pleine laize. */
	.voyaliste-app .vapp__main { padding: 0; }
	.voyaliste-app .vapp__zone { max-width: none; padding: 0; }

	/* Tous les panneaux et toutes les cartes s'impriment, y compris repliés. */
	.vpanel { display: block !important; }
	.vmission__body { grid-template-rows: 1fr !important; }
	.vmission__body > * { overflow: visible !important; }
	.js-reveal [data-reveal] { opacity: 1 !important; transform: none !important; }

	.vportal { display: block; }
	.vmission, .vthread, .vfeature { break-inside: avoid; page-break-inside: avoid; border: 1px solid #ccc; box-shadow: none; }
	.vfeature, .vc-message-client { background: #fff !important; color: #000 !important; }
	.vc-messages { max-height: none; overflow: visible; }
	.vc-tracking-map { display: none; }

	body { background: #fff; color: #000; font-size: 11pt; }
	a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 9pt; color: #555; }
}

/* Le réglage système prime : aucune animation, aucun décalage. */
@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
	.js-reveal [data-reveal] { opacity: 1; transform: none; }
}

/* ==========================================================================
   Premier contact
   ========================================================================== */

.voyaliste-premier-contact { background: var(--cloud); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 32px; box-shadow: var(--shadow-card); }
.voyaliste-premier-contact h3 { margin-bottom: 6px; }

/* ==========================================================================
   Popup "Être rappelé"
   ========================================================================== */

.voyaliste-callback-overlay {
	position: fixed; inset: 0; z-index: 400;
	background: rgba(18, 40, 63, 0.55);
	display: flex; align-items: center; justify-content: center;
	padding: 20px;
	opacity: 0; visibility: hidden; transition: opacity 0.2s ease;
}
.voyaliste-callback-overlay.is-open { opacity: 1; visibility: visible; }
.voyaliste-callback-modal {
	position: relative; width: 100%; max-width: 440px; max-height: 90vh; overflow-y: auto;
	background: var(--cloud); border-radius: var(--radius-lg); box-shadow: var(--shadow-form);
	padding: 36px 32px 32px;
	transform: translateY(12px); transition: transform 0.2s ease;
}
.voyaliste-callback-overlay.is-open .voyaliste-callback-modal { transform: translateY(0); }
.voyaliste-callback-modal h3 { margin-bottom: 6px; }
.voyaliste-callback-modal > p { margin-bottom: 20px; }
.voyaliste-callback-close {
	position: absolute; top: 14px; right: 14px; width: 32px; height: 32px;
	display: flex; align-items: center; justify-content: center;
	background: var(--mist); border: none; border-radius: 50%;
	font-size: 1.3rem; line-height: 1; color: var(--navy); cursor: pointer;
}
.voyaliste-callback-close:hover { background: var(--border); }

@media (max-width: 480px) {
	.voyaliste-callback-modal { padding: 30px 22px 26px; }
}

/* ==========================================================================
   Bandeau cookies
   ========================================================================== */

.voyaliste-cookie-banner {
	position: fixed; left: 0; right: 0; bottom: 0; z-index: 300;
	background: var(--navy); border-top: 1px solid rgba(255,255,255,0.12);
	box-shadow: 0 -8px 24px rgba(0,0,0,0.25);
}
.voyaliste-cookie-banner__inner {
	display: flex; align-items: center; justify-content: space-between; gap: 20px;
	padding: 18px 24px; flex-wrap: wrap;
}
.voyaliste-cookie-banner p { color: #C9D9E3; font-size: 0.85rem; margin: 0; max-width: 60ch; }
.voyaliste-cookie-banner a { color: var(--gold); text-decoration: underline; }
.voyaliste-cookie-banner__actions { display: flex; gap: 10px; flex-shrink: 0; }

/* ==========================================================================
   Responsive
   Breakpoints: 2000+ (grand écran), 1440 (large desktop), 1200 (desktop),
   980 (tablette paysage), 760 (tablette portrait), 480 (mobile), 360 (petit mobile)
   ========================================================================== */

@media (min-width: 1440px) { .hero__inner { gap: 88px; } .section { padding: 112px 0; } }

@media (max-width: 1200px) { .hero__inner { gap: 48px; } .cards { grid-template-columns: repeat(3, 1fr); } }

@media (max-width: 980px) {
	.hero { padding: 56px 0 72px; }
	.hero__inner { grid-template-columns: 1fr; gap: 48px; }
	.hero__form-wrap { order: -1; }
	.proof-photos__inner { grid-template-columns: 1fr; }
	.hero__media { max-width: 420px; margin: 0 auto; }
	.features { grid-template-columns: 1fr; }
	.cards { grid-template-columns: 1fr 1fr; }
	.steps { grid-template-columns: 1fr; }
	.journey { grid-template-columns: 1fr; }
	.footer-grid { grid-template-columns: 1fr 1fr; }
	.section { padding: 72px 0; }
}

/* Le menu de bureau resserré, entre 1220 et 1440 px.
   ------------------------------------------------------------------
   MESURÉ, PAS SUPPOSÉ : le menu déployé réclame 1 098 px, le logo 176,
   les marges 48 — soit 1 322 px. En dessous, il débordait, et c'est la PAGE
   ENTIÈRE qui se mettait à défiler de côté : sur l'accueil comme sur les
   tarifs, à 1 009 px de large, le document faisait 1 299 px. Un ordinateur
   portable de 1 280 px — le plus répandu — était concerné.
   Resserrer les espacements et la typographie du menu le ramène à 1 190 px,
   ce qui couvre les portables de 1 280 px et au-delà. En dessous de 1 220 px,
   c'est le menu déroulant qui prend le relais. Les trois seuils ont été
   mesurés dans le navigateur, pas estimés. */
@media (min-width: 1221px) and (max-width: 1439px) {
	.site-nav { gap: 12px; }
	.site-nav__list > li > a { padding: 9px 8px; font-size: 0.9rem; }
	.site-nav__client { padding: 9px 12px; font-size: 0.86rem; }
	.site-nav__cta { padding: 10px 14px; font-size: 0.9rem; }
	.site-logo img { max-width: 150px; }
}

/* Menu : bascule en menu déroulant dès 1220px.
   L'iPad en portrait fait exactement 768px : avec l'ancien seuil à 760px, il
   affichait le menu complet, qui débordait de 109px. Le seuil est ensuite
   passé à 900px, puis à 1220px une fois le débordement mesuré sur les
   portables : même resserré, le menu de bureau ne tient pas en dessous. */
@media (max-width: 1220px) {
	.site-header__inner { height: 68px; }
	.nav-toggle { display: flex; }
	/* Le menu est replié : on sort « Espace client » du menu pour le poser
	   directement dans le bandeau, toujours atteignable en un geste.
	   SORTIR veut dire le retirer du menu — sans cette seconde ligne, il
	   s'affichait aux DEUX endroits, une fois dans le bandeau et une fois dans
	   le panneau déroulant, juste au-dessus de « Demander un devis ». */
	.site-header__client-compact { display: inline-flex; }
	.site-nav__client { display: none; }
	.site-nav {
		position: absolute; top: 68px; left: 0; right: 0; background: var(--cloud);
		flex-direction: column; align-items: stretch; padding: 20px 24px 28px;
		border-bottom: 1px solid var(--border); display: none; gap: 20px;
		border-top: 1px solid var(--border);
		max-height: calc(100vh - 68px); overflow-y: auto;
	}
	/* Le panneau ne peut pas s'animer sur `display`, mais il peut s'ouvrir en
	   glissant : une courte animation à l'apparition suffit à ce que le menu
	   se déploie au lieu de surgir. */
	.site-nav.is-open { display: flex; animation: vnav-deplier 0.26s cubic-bezier(0.22, 1, 0.36, 1); }
	.site-nav__list { flex-direction: column; gap: 4px; }
	.site-nav__list > li > a { padding: 13px 12px; border-radius: 10px; }
	.site-nav__cta { text-align: center; }
	/* Le repère glissant n'a pas de sens dans un menu vertical. */
	.site-nav__list::after { display: none; }

	/* Chaque entrée entre à son tour, de haut en bas. */
	.site-nav.is-open .site-nav__list > li {
		animation: vnav-entree 0.3s cubic-bezier(0.22, 1, 0.36, 1) backwards;
	}
	.site-nav.is-open .site-nav__list > li:nth-child(1) { animation-delay: 0.03s; }
	.site-nav.is-open .site-nav__list > li:nth-child(2) { animation-delay: 0.06s; }
	.site-nav.is-open .site-nav__list > li:nth-child(3) { animation-delay: 0.09s; }
	.site-nav.is-open .site-nav__list > li:nth-child(4) { animation-delay: 0.12s; }
	.site-nav.is-open .site-nav__list > li:nth-child(n+5) { animation-delay: 0.15s; }

	/* Sous-menus en accordéon */
	.sub-menu {
		position: static; transform: none; opacity: 1; visibility: visible;
		pointer-events: auto; box-shadow: none; border: none;
		border-left: 2px solid var(--mist); border-radius: 0;
		padding: 4px 0 4px 14px; margin-top: 6px;
		max-height: 0; overflow: hidden; transition: max-height 0.25s ease;
	}
	.sub-menu::before { display: none; }
	.menu-item-has-children.is-open > .sub-menu { max-height: 400px; padding: 4px 0 4px 14px; }
	/* Replié veut dire invisible. « max-height: 0 » seul laissait le
	   remplissage et le filet de gauche : deux petits traits bleus flottaient
	   sous « Nos services » et sous « Contact », sans rien signifier. */
	.menu-item-has-children:not(.is-open) > .sub-menu {
		max-height: 0; padding-top: 0; padding-bottom: 0; border-left-color: transparent;
	}
	.sub-menu a { padding: 8px 0; font-size: 0.86rem; }
}

@media (max-width: 760px) {
	.hero__title { max-width: none; }
	.hero__subtitle { max-width: none; }
	.vf-row { grid-template-columns: 1fr; }
	.route-line { max-width: 100%; }

	/* Sous-menus en accordéon sur mobile */
	.sub-menu {
		position: static;
		transform: none;
		opacity: 1;
		visibility: visible;
		pointer-events: auto;
		box-shadow: none;
		border: none;
		border-left: 2px solid var(--mist);
		border-radius: 0;
		padding: 4px 0 4px 14px;
		margin-top: 6px;
		max-height: 0;
		overflow: hidden;
		transition: max-height 0.25s ease;
	}
	.sub-menu::before { display: none; }
	.menu-item-has-children.is-open > .sub-menu { max-height: 400px; padding: 4px 0 4px 14px; }
	/* Replié veut dire invisible. « max-height: 0 » seul laissait le
	   remplissage et le filet de gauche : deux petits traits bleus flottaient
	   sous « Nos services » et sous « Contact », sans rien signifier. */
	.menu-item-has-children:not(.is-open) > .sub-menu {
		max-height: 0; padding-top: 0; padding-bottom: 0; border-left-color: transparent;
	}
	.sub-menu a { padding: 8px 0; font-size: 0.86rem; }

	.cards { grid-template-columns: 1fr; }
	.features__grid { grid-template-columns: 1fr; }
	.footer-grid { grid-template-columns: 1fr; gap: var(--space-6); }
	.footer-bottom { flex-direction: column; align-items: flex-start; }
	.trust-bar__inner { gap: 10px 24px; justify-content: flex-start; overflow-x: auto; flex-wrap: nowrap; padding-bottom: 2px; }
	.section { padding: var(--space-7) 0; }
	.cta-banner { padding: var(--space-7) 0; }
	.vc-photos { flex-direction: column; }
}

@media (max-width: 480px) {
	.hero__title { font-size: clamp(1.8rem, 8vw, 2.4rem); }
	.hero__subtitle { font-size: var(--text-md); }
	.eyebrow { font-size: var(--text-2xs); padding: 5px 12px; }
	.route-line__label { display: none; }
	.steps__item, .card, .waypoint { padding: var(--space-5) var(--space-4); }
	.cta-banner h2 { font-size: var(--text-2xl); }
	.site-logo__text { font-size: 1.15rem; }
	.vf-preview-price { font-size: 1.85rem; }
	.vc-mission-head { flex-direction: column; align-items: flex-start; }
	.voyaliste-cookie-banner__inner { flex-direction: column; align-items: stretch; text-align: center; }
	.voyaliste-cookie-banner__actions { justify-content: center; }
}

/* Très petit écran : on garde l'icône seule, le libellé passerait à la ligne.
   Attention : voyaliste_icon() enveloppe le SVG dans un <span>, donc masquer
   « span » masquerait aussi l'icône et laisserait un bouton vide. On ne vise
   que le libellé. */
@media (max-width: 420px) {
	.site-header__client-compact { padding: 0 12px; min-width: 44px; }
	.site-header__client-compact > span:not(.voyaliste-icon) { display: none; }
}

@media (max-width: 360px) {
	.wrap { padding: 0 14px; }
	.voyaliste-devis-widget { padding: 20px 16px; }
	.btn, .voyaliste-btn-gold { padding: 13px 20px; font-size: 0.9rem; }
}

@media (min-width: 2000px) { html { font-size: 18px; } }

/* =========================================================================
   État des lieux photo — jauge, prise de vue, galerie de consultation
   ========================================================================= */

.vedl-jauge { margin-bottom: var(--space-4); }
.vedl-jauge__tete {
	display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-3);
	margin-bottom: var(--space-2); font-size: var(--text-sm);
}
.vedl-jauge__tete strong { color: var(--navy); font-family: var(--font-display); }
.vedl-jauge__tete span { color: var(--text-2); font-variant-numeric: tabular-nums; white-space: nowrap; }
.vedl-jauge__piste { height: 6px; border-radius: 999px; background: var(--mist); overflow: hidden; }
.vedl-jauge__piste span {
	display: block; height: 100%; width: 0; border-radius: 999px;
	background: linear-gradient(90deg, var(--horizon), var(--horizon-dark));
	transition: width 0.4s ease;
}
.vedl-jauge.is-complet .vedl-jauge__piste span { background: linear-gradient(90deg, var(--horizon), #3FBF7F); }
.vedl-jauge.is-complet .vedl-jauge__tete span { color: var(--horizon-dark); font-weight: 600; }

.vedl-clos, .vedl-vide, .vedl-rien {
	display: flex; align-items: center; gap: var(--space-2);
	font-size: var(--text-sm); color: var(--text-2); margin: var(--space-3) 0;
}
.vedl-rien { color: var(--horizon-dark); }
.vedl-clos { color: var(--navy); background: var(--mist); padding: var(--space-3); border-radius: var(--radius-sm); }

/* ----------------------------------------- Prise de vue (page convoyeur) */

.vedl-slots {
	display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
	gap: var(--space-3); margin-bottom: var(--space-5);
}
.vedl-slot {
	display: flex; flex-direction: column; min-width: 0;
	border: 1px solid var(--border); border-radius: var(--radius-sm);
	background: var(--cloud); overflow: hidden; transition: border-color 0.2s ease;
}
.vedl-slot.is-fait { border-color: var(--horizon); }
.vedl-slot.is-envoi { opacity: 0.55; pointer-events: none; }
.vedl-slot__apercu {
	position: relative; aspect-ratio: 4 / 3; background: var(--mist);
	display: flex; align-items: center; justify-content: center;
}
.vedl-slot__apercu img { width: 100%; height: 100%; object-fit: cover; display: block; }
.vedl-slot__creux { color: var(--text-2); }
.vedl-slot__ok {
	position: absolute; top: 6px; right: 6px; width: 24px; height: 24px; border-radius: 50%;
	background: var(--horizon); color: #fff; display: flex; align-items: center; justify-content: center;
}
.vedl-slot__info { padding: var(--space-3); display: flex; flex-direction: column; gap: 2px; flex: 1; }
.vedl-slot__info strong { font-size: var(--text-sm); color: var(--navy); }
.vedl-slot__aide { font-size: var(--text-2xs); color: var(--text-2); font-style: normal; line-height: 1.4; }
.vedl-slot.is-fait .vedl-slot__aide { color: var(--horizon-dark); font-variant-numeric: tabular-nums; }

/* Le champ fichier reste dans le flux mais invisible : le label porte
   l'apparence du bouton, et le clic dessus ouvre l'appareil photo. */
.vedl-slot__bouton, .vedl-ajout__bouton {
	position: relative; overflow: hidden;
	display: flex; align-items: center; justify-content: center; gap: var(--space-2);
	min-height: 44px; padding: 0 var(--space-3); cursor: pointer;
	background: var(--mist); color: var(--horizon-dark);
	font-size: var(--text-sm); font-weight: 600; border-top: 1px solid var(--border);
	transition: background 0.2s ease, color 0.2s ease;
}
.vedl-slot__bouton:hover, .vedl-ajout__bouton:hover { background: var(--horizon); color: #fff; }
.vedl-slot__bouton input, .vedl-ajout__bouton input {
	position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none;
}
.vedl-slot__bouton:focus-within, .vedl-ajout__bouton:focus-within {
	outline: 2px solid var(--horizon); outline-offset: -2px;
}

.vedl-anomalies { border-top: 1px solid var(--border); padding-top: var(--space-4); }
.vedl-anomalies h4 {
	display: flex; align-items: center; gap: var(--space-2);
	font-size: var(--text-md); color: var(--navy); margin-bottom: var(--space-1);
}
.vedl-anomalies__liste { list-style: none; margin: var(--space-3) 0; padding: 0; display: grid; gap: var(--space-2); }
.vedl-anomalies__liste li {
	display: flex; align-items: center; gap: var(--space-3); min-width: 0;
	padding: var(--space-2); border: 1px solid var(--border); border-radius: var(--radius-sm);
	background: var(--cloud);
}
.vedl-anomalies__liste img {
	width: 52px; height: 52px; object-fit: cover; border-radius: 6px; flex: none;
}
.vedl-anomalies__texte { display: flex; flex-direction: column; gap: 1px; min-width: 0; flex: 1; }
.vedl-anomalies__texte strong { font-size: var(--text-sm); color: var(--navy); }
.vedl-anomalies__texte em { font-size: var(--text-xs); color: var(--text-2); font-style: normal; }
.vedl-anomalies__texte time { font-size: var(--text-2xs); color: var(--text-2); font-variant-numeric: tabular-nums; }
.vedl-supprimer {
	flex: none; width: 32px; height: 32px; border-radius: 50%; border: 1px solid var(--border);
	background: var(--cloud); color: var(--text-2); font-size: 18px; line-height: 1; cursor: pointer;
}
.vedl-supprimer:hover { border-color: #D64545; color: #D64545; }

.vedl-ajout { display: grid; gap: var(--space-2); }
.vedl-ajout select, .vedl-ajout input[type="text"] {
	width: 100%; max-width: 100%; min-width: 0; min-height: 44px;
	padding: 0 var(--space-3); border: 1px solid var(--border); border-radius: var(--radius-sm);
	font-family: var(--font-body); font-size: var(--text-sm); color: var(--navy); background: var(--cloud);
}
.vedl-ajout__bouton { border: 1px solid var(--border); border-radius: var(--radius-sm); }

/* -------------------------------------- Galerie de consultation (client) */

.vedl-phase + .vedl-phase { margin-top: var(--space-6); padding-top: var(--space-5); border-top: 1px solid var(--border); }
.vedl-sous-titre {
	display: flex; align-items: center; gap: var(--space-2);
	font-size: var(--text-sm); color: var(--navy); margin: var(--space-4) 0 var(--space-2);
}
.vedl-grille {
	display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: var(--space-3);
}
.vedl-vignette {
	margin: 0; min-width: 0; border: 1px solid var(--border); border-radius: var(--radius-sm);
	overflow: hidden; background: var(--cloud);
}
.vedl-vignette img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.vedl-vignette figcaption { padding: var(--space-2) var(--space-3); display: flex; flex-direction: column; gap: 1px; }
.vedl-vignette figcaption strong { font-size: var(--text-xs); color: var(--navy); }
.vedl-vignette time { font-size: var(--text-2xs); color: var(--text-2); font-variant-numeric: tabular-nums; }
.vedl-vignette .vedl-note { font-size: var(--text-2xs); color: var(--text-2); }
.vedl-vignette.is-manquante { border-style: dashed; background: transparent; }
.vedl-vignette__creux {
	display: flex; align-items: center; justify-content: center;
	aspect-ratio: 4 / 3; background: var(--mist); color: var(--text-2);
}
.vedl-vignette.is-manquante em { font-size: var(--text-2xs); color: var(--text-2); font-style: normal; }
.vedl-vignette.is-anomalie { border-color: var(--gold-fonce); }
.vedl-vignette.is-anomalie figcaption strong { color: var(--orange-dark); }

/* =========================================================================
   Compte rendu détaillé (espace client)
   ========================================================================= */

.vcr {
	margin: var(--space-5) 0; padding: var(--space-5);
	border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--cloud);
}
.vcr__tete {
	display: flex; align-items: center; justify-content: space-between;
	gap: var(--space-3); flex-wrap: wrap; margin-bottom: var(--space-4);
}
.vcr__imprimer { padding: 8px var(--space-3); font-size: var(--text-xs); min-height: 40px; }

.vcr__verdict {
	display: flex; align-items: flex-start; gap: var(--space-3);
	padding: var(--space-4); border-radius: var(--radius-sm);
	font-size: var(--text-sm); line-height: 1.55; margin-bottom: var(--space-4);
}
.vcr__verdict svg { flex: none; margin-top: 2px; }
.vcr__verdict.is-ok { background: rgba(63, 191, 127, 0.1); color: #1F6B47; border-left: 3px solid #3FBF7F; }
.vcr__verdict.is-alerte { background: rgba(168, 118, 19, 0.10); color: var(--orange-dark); border-left: 3px solid var(--gold-fonce); }
.vcr__verdict strong { display: block; }

.vcr__resume {
	display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
	gap: var(--space-3); margin-bottom: var(--space-5);
}
.vcr__resume > div {
	min-width: 0; padding: var(--space-3); background: var(--mist); border-radius: var(--radius-sm);
	display: flex; flex-direction: column; gap: 2px;
}
.vcr__resume span { font-size: var(--text-2xs); text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-2); }
.vcr__resume strong { font-size: var(--text-sm); color: var(--navy); font-family: var(--font-display); }

.vcr__chrono { margin-bottom: var(--space-5); }
.vcr__chrono h5 { font-size: var(--text-sm); color: var(--navy); margin-bottom: var(--space-3); }
.vcr__chrono ol { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-2); }
.vcr__chrono li {
	display: flex; align-items: baseline; gap: var(--space-3); flex-wrap: wrap;
	font-size: var(--text-sm); color: var(--navy);
	padding-left: var(--space-4); border-left: 2px solid var(--horizon);
}
.vcr__chrono time {
	font-family: var(--font-mono); font-size: var(--text-xs); color: var(--text-2);
	font-variant-numeric: tabular-nums; white-space: nowrap;
}
.vcr__mention {
	font-size: var(--text-2xs); color: var(--text-2); line-height: 1.6;
	margin-top: var(--space-4); padding-top: var(--space-3); border-top: 1px dashed var(--border);
}

/* =========================================================================
   Avis clients — notation par étoiles
   ========================================================================= */

.vetoiles { display: inline-flex; gap: 2px; color: var(--text-2); }
.vetoile { display: inline-flex; line-height: 0; }
.vetoile.is-pleine { color: #F5A623; }

.vavis {
	margin: var(--space-5) 0 0; padding: var(--space-5);
	border: 1px solid var(--border); border-radius: var(--radius-md);
	background: linear-gradient(140deg, var(--mist), var(--cloud) 65%);
}
.vavis h5 { font-size: var(--text-md); color: var(--navy); margin-bottom: var(--space-1); }
.vavis__aide { font-size: var(--text-sm); color: var(--text-2); margin-bottom: var(--space-4); }

.vavis__notes { display: flex; gap: var(--space-1); border: 0; padding: 0; margin: 0 0 var(--space-3); }
.vavis__etoile { cursor: pointer; color: var(--text-2); line-height: 0; transition: color 0.15s ease, transform 0.15s ease; }
.vavis__etoile input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.vavis__etoile.is-survol { color: #F5A623; transform: scale(1.08); }
/* La sélection persiste après le survol : l'étoile cochée et toutes celles
   qui la précèdent restent allumées, ce que `:has` exprime sans JS. */
.vavis__notes:has(input:checked) .vavis__etoile { color: var(--text-2); }
.vavis__notes .vavis__etoile:has(~ .vavis__etoile input:checked),
.vavis__notes .vavis__etoile:has(input:checked) { color: #F5A623; }
.vavis__etoile:focus-within { outline: 2px solid var(--horizon); outline-offset: 3px; border-radius: 4px; }

.vavis__form textarea {
	width: 100%; max-width: 100%; min-width: 0; padding: var(--space-3);
	border: 1px solid var(--border); border-radius: var(--radius-sm);
	font-family: var(--font-body); font-size: var(--text-sm); color: var(--navy);
	background: var(--cloud); margin-bottom: var(--space-3); resize: vertical;
}
.vavis__depose blockquote {
	margin: var(--space-3) 0 0; padding-left: var(--space-4);
	border-left: 3px solid var(--horizon); font-size: var(--text-sm);
	color: var(--navy); font-style: italic;
}
.vavis__date { font-size: var(--text-xs); color: var(--text-2); margin-top: var(--space-2); }

/* =========================================================================
   Page convoyeur — fil de discussion avec le client
   ========================================================================= */

.vconv__bloc--replie summary { cursor: pointer; list-style: none; }
.vconv__bloc--replie summary::-webkit-details-marker { display: none; }
.vconv__bloc--replie summary h3 { display: inline-flex; align-items: center; gap: var(--space-2); }
.vconv__bloc--replie summary h3::after { content: '\25BE'; color: var(--text-2); font-size: 0.8em; }
.vconv__bloc--replie details[open] summary h3::after { content: '\25B4'; }

.vconv__fil {
	max-height: 320px; overflow-y: auto; display: grid; gap: var(--space-3);
	padding: var(--space-3); background: var(--mist); border-radius: var(--radius-sm);
	margin-bottom: var(--space-3);
}
.vconv__fil-vide { font-size: var(--text-sm); color: var(--text-2); margin: 0; }
.vconv__msg {
	max-width: 85%; padding: var(--space-3); border-radius: var(--radius-sm);
	background: var(--cloud); border: 1px solid var(--border);
}
.vconv__msg.is-convoyeur { margin-left: auto; background: var(--navy); border-color: var(--navy); }
.vconv__msg.is-convoyeur p, .vconv__msg.is-convoyeur time { color: #fff; }
.vconv__msg.is-convoyeur .vconv__msg-auteur { color: var(--text-2); }
.vconv__msg.is-equipe { border-left: 3px solid var(--horizon); }
.vconv__msg-auteur {
	display: block; font-size: var(--text-2xs); text-transform: uppercase;
	letter-spacing: 0.06em; color: var(--text-2); margin-bottom: 2px;
}
.vconv__msg p { font-size: var(--text-sm); color: var(--navy); margin: 0 0 4px; word-break: break-word; }
.vconv__msg time { font-size: var(--text-2xs); color: var(--text-2); }

.vconv__form { display: flex; gap: var(--space-2); }
.vconv__form input {
	flex: 1; min-width: 0; min-height: 44px; padding: 0 var(--space-3);
	border: 1px solid var(--border); border-radius: var(--radius-sm);
	font-family: var(--font-body); font-size: var(--text-sm); color: var(--navy);
}
.vconv__form button {
	flex: none; min-height: 44px; padding: 0 var(--space-4); border: 0; cursor: pointer;
	border-radius: var(--radius-sm); background: var(--orange); color: var(--navy);
	font-family: var(--font-body); font-size: var(--text-sm); font-weight: 600;
}
.vconv__form button:hover { background: var(--orange-dark); }

/* Message du convoyeur dans l'espace client : distinct de celui de l'équipe,
   le client doit savoir qui lui parle. */
.vc-message--convoyeur { border-left: 3px solid var(--gold-fonce); }
.vc-message--convoyeur .vc-message-author {
	display: inline-flex; align-items: center; gap: 5px; color: var(--orange-dark);
}

/* =========================================================================
   Décor véhicules — espace client
   ========================================================================= */

.vportal { position: relative; }
.vportal__side, .vportal__main { position: relative; z-index: 1; }

.vportal__side-vehicule {
	display: block; margin: var(--space-4) calc(var(--space-4) * -1) calc(var(--space-2) * -1);
	opacity: 0.5; filter: grayscale(0.25);
}

.vempty { position: relative; overflow: hidden; }
.vempty__vehicule {
	position: absolute; right: -8%; bottom: -18%; width: 46%; max-width: 260px;
	opacity: 0.12; filter: grayscale(0.5); pointer-events: none;
}
.vempty > *:not(.vempty__vehicule) { position: relative; z-index: 1; }

@media (max-width: 900px) {
	/* Sur téléphone et tablette, la place revient au contenu : le décor
	   n'apporte rien et consommerait de la largeur utile. */
	.vportal__decor, .vportal__side-vehicule { display: none; }
	.vedl-slots { grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); }
}

/* =========================================================================
   Impression du compte rendu
   ========================================================================= */

@media print {
	/* Impression ciblée : quand l'utilisateur imprime UN compte rendu, tout le
	   reste du portail disparaît, y compris les autres missions. */
	body.is-impression .vportal__main > *,
	body.is-impression .vmission { display: none !important; }
	body.is-impression .vpanel,
	body.is-impression .vmission:has(.vcr--imprime),
	body.is-impression .vmission:has(.vcr--imprime) .vmission__body,
	body.is-impression .vmission:has(.vcr--imprime) .vmission__inner { display: block !important; }
	body.is-impression .vmission:has(.vcr--imprime) .vmission__head,
	body.is-impression .vpanel__head { display: none !important; }

	.vcr { border: 1px solid #999; page-break-inside: auto; }
	.vcr__tete button, .vcr__imprimer { display: none !important; }
	.vedl-vignette, .vcr__verdict, .vcr__resume > div { break-inside: avoid; page-break-inside: avoid; }
	.vedl-grille { grid-template-columns: repeat(3, 1fr); }
	.vedl-vignette.is-manquante { border: 1px dashed #999; }
	.vavis, .vportal__decor, .vempty__vehicule, .vportal__side-vehicule { display: none !important; }
	/* Les vignettes pointent vers l'image en pleine taille : imprimer l'URL
	   complète sous chacune rendrait la planche illisible. */
	.vedl-vignette a[href^="http"]::after { content: ""; }
}

.vcr__verdict.is-incomplet { background: rgba(100, 121, 138, 0.12); color: var(--navy); border-left: 3px solid var(--steel); }

/* Page convoyeur : colonne étroite sur téléphone — c'est là qu'elle est
   réellement utilisée — mais élargie dès qu'il y a la place, pour que la
   planche de prise de vue affiche quatre angles par ligne au lieu de deux. */
.vconv-wrap { padding: var(--space-7) 0; max-width: 520px; }
@media (min-width: 900px) { .vconv-wrap { max-width: 860px; padding: var(--space-8) 0; } }
@media (min-width: 900px) { .vconv { max-width: 860px; } }

/* =========================================================================
   Avis clients — section publique
   ========================================================================= */

.vavis-public__moyenne {
	display: flex; align-items: center; justify-content: center;
	flex-wrap: wrap; gap: var(--space-2) var(--space-3);
	margin-bottom: var(--space-3);
}
.vavis-public__moyenne strong {
	font-family: var(--font-display); font-size: var(--text-2xl); color: var(--navy);
}
.vavis-public__moyenne span { font-size: var(--text-sm); color: var(--text-2); }

.vavis-public__mention {
	display: flex; align-items: center; justify-content: center; gap: var(--space-2);
	flex-wrap: wrap; text-align: center;
	font-size: var(--text-xs); color: var(--text-2);
	margin-bottom: var(--space-6); max-width: 56ch; margin-inline: auto;
}
.vavis-public__mention svg { flex: none; color: var(--horizon); }

.vavis-public__grille {
	display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	gap: var(--space-4);
}
.vavis-carte {
	margin: 0; min-width: 0; display: flex; flex-direction: column; gap: var(--space-3);
	padding: var(--space-5); background: var(--cloud);
	border: 1px solid var(--border); border-radius: var(--radius-md);
	box-shadow: var(--shadow-card);
}
.vavis-carte blockquote {
	margin: 0; font-size: var(--text-base); line-height: 1.65; color: var(--navy);
	/* La citation prend la place restante pour que les signatures s'alignent
	   sur une même ligne d'une carte à l'autre, quelle que soit sa longueur. */
	flex: 1;
}
.vavis-carte blockquote::before { content: '\201C'; color: var(--horizon); font-size: 1.3em; line-height: 0; }
.vavis-carte blockquote::after { content: '\201D'; color: var(--horizon); font-size: 1.3em; line-height: 0; }
.vavis-carte figcaption {
	display: flex; flex-direction: column; gap: 2px;
	padding-top: var(--space-3); border-top: 1px solid var(--border);
}
.vavis-carte figcaption strong { font-size: var(--text-sm); color: var(--navy); }
.vavis-carte figcaption span { font-size: var(--text-xs); color: var(--text-2); }
.vavis-carte figcaption time { font-size: var(--text-2xs); color: var(--text-2); text-transform: capitalize; }

/* Invitation à noter : mêmes proportions que la notification de message, mais
   dans le bleu de la marque — c'est une invitation, pas une alerte. */
.vnotif--avis { background: var(--mist); border-color: var(--border); border-left-color: var(--horizon); }
.vnotif--avis .vnotif__fleche { color: var(--horizon); }
.vnotif__etoiles { flex-shrink: 0; line-height: 0; }
.vnotif__etoiles .vetoile.is-pleine { color: #F5A623; }

/* =========================================================================
   Relecture avant envoi
   ========================================================================= */

.vrecap {
	position: fixed; inset: 0; z-index: 9999;
	display: flex; align-items: center; justify-content: center;
	padding: var(--space-4);
	background: rgba(18, 40, 63, 0.62);
	backdrop-filter: blur(3px);
	animation: vrecap-fondu 0.18s ease-out;
}
@keyframes vrecap-fondu { from { opacity: 0; } to { opacity: 1; } }

.vrecap__boite {
	width: 100%; max-width: 520px; max-height: 88vh; overflow-y: auto;
	background: var(--cloud); border-radius: var(--radius-lg);
	padding: var(--space-6); box-shadow: var(--shadow-form);
	animation: vrecap-monte 0.22s cubic-bezier(0.2, 0.8, 0.3, 1);
}
@keyframes vrecap-monte { from { transform: translateY(14px); opacity: 0; } to { transform: none; opacity: 1; } }

.vrecap__boite h3 { font-size: var(--text-2xl); color: var(--navy); margin-bottom: var(--space-2); }
.vrecap__lede { font-size: var(--text-sm); color: var(--text-2); margin-bottom: var(--space-5); line-height: 1.6; }

.vrecap__liste { margin: 0 0 var(--space-5); display: grid; gap: 0; }
.vrecap__liste dt {
	font-size: var(--text-2xs); text-transform: uppercase; letter-spacing: 0.06em;
	color: var(--text-2); padding-top: var(--space-3);
}
.vrecap__liste dd {
	margin: 0; display: flex; align-items: baseline; justify-content: space-between;
	gap: var(--space-3); padding-bottom: var(--space-3); border-bottom: 1px solid var(--border);
}
.vrecap__valeur {
	font-size: var(--text-base); color: var(--navy); font-weight: 500;
	min-width: 0; overflow-wrap: anywhere;
}
.vrecap__corriger {
	flex: none; background: none; border: 0; cursor: pointer; padding: 4px 6px;
	font-family: var(--font-body); font-size: var(--text-xs); color: var(--horizon-dark);
	text-decoration: underline; text-underline-offset: 2px; border-radius: 4px;
}
.vrecap__corriger:hover { color: var(--orange-dark); }
.vrecap__corriger:focus-visible { outline: 2px solid var(--horizon); outline-offset: 1px; }

.vrecap__pied { display: flex; gap: var(--space-3); flex-wrap: wrap; }
.vrecap__pied button { flex: 1 1 auto; min-height: 48px; justify-content: center; }

@media (max-width: 480px) {
	.vrecap__boite { padding: var(--space-5); }
	.vrecap__liste dd { flex-direction: column; align-items: flex-start; gap: 2px; }
	.vrecap__pied { flex-direction: column-reverse; }
}

/* =========================================================================
   Champ mot de passe : bouton afficher / masquer
   ========================================================================= */

.vmdp { position: relative; display: block; }
.vmdp input { width: 100%; padding-right: 46px !important; }
.vmdp__oeil {
	position: absolute; right: 4px; top: 50%; transform: translateY(-50%);
	width: 38px; height: 38px; display: flex; align-items: center; justify-content: center;
	background: none; border: 0; cursor: pointer; color: var(--text-2); border-radius: 50%;
	transition: color 0.2s ease, background 0.2s ease;
}
.vmdp__oeil:hover { color: var(--horizon-dark); background: var(--mist); }
.vmdp__oeil:focus-visible { outline: 2px solid var(--horizon); outline-offset: -2px; }
.vmdp__oeil[aria-pressed="true"] { color: var(--horizon-dark); }

/* =========================================================================
   Barre de menu — finitions
   ========================================================================= */

/* Page courante : le soulignement orange reste affiché en permanence, au lieu
   de n'apparaître qu'au survol. Un visiteur arrivé par un lien direct sait
   ainsi où il se trouve. */
.site-nav__list .current-menu-item,
.site-nav__list .current-menu-item > a,
.site-nav__list li.current-menu-item > a { color: var(--horizon-dark); font-weight: 600; }
.site-nav__list a.current-menu-ancestor,
.site-nav__list li.current-menu-ancestor > a { color: var(--horizon-dark); }

/*
 * Ici se trouvaient deux règles « width: 100% » sur le ::after de l'entrée
 * courante. Elles dataient du soulignement par lien, remplacé depuis par le
 * repère glissant de .site-nav__list::after — le soulignement n'existe plus,
 * mais les règles, elles, sont restées.
 *
 * Or le ::after existe encore sur une entrée à sous-menu : c'est son chevron,
 * un carré de 7 px bordé à droite et en bas, tourné de 45°. Lui imposer
 * « width: 100% » en faisait une barre de 211 px toujours tournée de 45° —
 * la diagonale bleue qui traversait le menu déroulant sur téléphone, en
 * partant du chevron de « Nos services ».
 *
 * Elle se voyait sur ordinateur aussi, mais en tout petit : c'est le panneau
 * vertical du téléphone, haut et large, qui a rendu le défaut évident.
 *
 * L'entrée courante reste signalée : couleur, graisse, et le filet doré à sa
 * gauche sur mobile.
 */

.sub-menu a[aria-current="page"],
.sub-menu .current-menu-item > a { background: var(--mist); color: var(--horizon-dark); font-weight: 600; }

/* Le focus clavier doit être visible partout dans la barre : c'est le seul
   repère d'un utilisateur qui navigue sans souris. */
.site-nav a:focus-visible,
.site-header__client-compact:focus-visible,
.nav-toggle:focus-visible {
	outline: 2px solid var(--horizon); outline-offset: 3px; border-radius: 4px;
}

/* Bouton menu : les trois barres se transforment en croix à l'ouverture.
   Sans cela, rien n'indique que le même bouton referme le panneau. */
.nav-toggle {
	position: relative; width: 44px; height: 44px; align-items: center; justify-content: center;
	cursor: pointer; border-radius: var(--radius-sm); transition: background-color 0.2s ease;
}
.nav-toggle:hover { background: var(--mist); }
.nav-toggle span:not(.sr-only) {
	display: block; width: 22px; height: 2px; background: var(--navy); border-radius: 2px;
	transition: transform 0.28s cubic-bezier(0.2, 0.8, 0.3, 1), opacity 0.18s ease;
}
.nav-toggle[aria-expanded="true"] span:not(.sr-only):nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:not(.sr-only):nth-child(2) { opacity: 0; transform: scaleX(0.4); }
.nav-toggle[aria-expanded="true"] span:not(.sr-only):nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Défilement bloqué tant que le panneau est ouvert. */
body.nav-ouvert { overflow: hidden; }

@media (max-width: 900px) {
	/* Le panneau se cale sous le bandeau, dont la hauteur varie au défilement :
	   la valeur est publiée par le script dans --hauteur-entete. */
	.site-nav {
		top: var(--hauteur-entete, 68px);
		max-height: calc(100vh - var(--hauteur-entete, 68px));
		box-shadow: 0 18px 40px -22px rgba(18, 40, 63, 0.5);
		padding-bottom: var(--space-7);
	}
	/* Voile sombre derrière le panneau : il détache le menu du contenu et
	   rend évident qu'un clic à côté referme. */
	/* Le voile sombre derrière le menu ouvert.
	   En écriture longue plutôt qu'avec `inset` : le raccourci portait une
	   variable, et là où elle n'est pas définie toute la déclaration tombe —
	   le voile se retrouvait alors haut de zéro pixel, donc invisible, et le
	   contenu de la page restait en pleine lumière derrière le menu. */
	.site-nav.is-open::after {
		content: ""; position: fixed;
		top: 68px; right: 0; bottom: 0; left: 0;
		background: rgba(18, 40, 63, 0.35); z-index: -1;
	}
	/* La flèche du sous-menu ne vaut que pour l'infobulle de l'ordinateur :
	   dans l'accordéon du téléphone, elle apparaît en losange égaré. */
	.sub-menu::before { display: none; }
	.site-nav__list { gap: 2px; }
	.site-nav__list > li > a {
		display: flex; align-items: center; min-height: 48px; padding: 4px 12px;
		border-radius: var(--radius-sm); font-size: 1rem;
		transition: background-color 0.15s ease;
	}
	.site-nav__list > li > a:hover { background: var(--mist); }
	.site-nav__list li.current-menu-item > a,
	.site-nav__list a.current-menu-item {
		background: var(--mist); color: var(--horizon-dark);
		box-shadow: inset 3px 0 0 var(--gold-fonce);
	}
	.sub-menu a { min-height: 44px; display: flex; align-items: center; }
	/* Séparation entre les liens et les deux boutons d'action. */
	.site-nav__client { margin-top: var(--space-2); border-top: 0; }
}

/* Bandeau de confirmation d'adresse : informatif, pas alarmant — le compte
   fonctionne, seule l'attestation manque. */
.vnotif--verif { background: var(--mist); border-color: var(--border); border-left-color: var(--horizon); align-items: flex-start; }
.vnotif--verif > .voyaliste-icon { color: var(--horizon); margin-top: 2px; }
.vnotif--verif .voyaliste-btn-ghost { flex: none; margin-left: auto; padding: 9px 16px; font-size: var(--text-xs); min-height: 40px; }
.vnotif__retour { display: block; width: 100%; margin-top: var(--space-2); font-size: var(--text-xs); font-style: normal; }
.vnotif__retour.is-ok { color: var(--horizon-dark); }
.vnotif__retour.is-erreur { color: #B3261E; }

/* Verdict de concordance des mots de passe. */
.vf-hint.is-ok { color: var(--horizon-dark); font-weight: 600; }
.vf-hint.is-erreur { color: #B3261E; font-weight: 600; }

.vauth__aide-connexion {
	margin-top: var(--space-3); padding-top: var(--space-3);
	border-top: 1px solid var(--border);
	font-size: var(--text-xs); color: var(--text-2); line-height: 1.5;
}

@media (max-width: 560px) {
	.vnotif--verif { flex-wrap: wrap; }
	.vnotif--verif .voyaliste-btn-ghost { margin-left: 0; width: 100%; justify-content: center; }
}
/* =========================================================================
   Lisibilité — corrections de contraste
   -------------------------------------------------------------------------
   Aucun code couleur de la charte n'est modifié. Les valeurs d'origine
   (--orange, --steel…) restent celles définies plus haut ; on ajoute
   seulement deux nuances DÉRIVÉES, réservées au texte, là où les couleurs
   de marque ne peuvent pas porter des caractères lisibles.

   Mesures relevées sur le site avant correction :
     blanc sur --orange .............. 2,60  (bouton principal — très en deçà)
     --orange en texte sur blanc ..... 2,60
     --steel sur --mist .............. 4,11  (texte courant des sections teintées)
   Le seuil AA pour du texte courant est 4,5.
   ========================================================================= */

:root {
	/* Nuance sombre de --steel, pour le texte courant uniquement.
	   Lisible aussi bien sur blanc que sur --mist. */
	--text-2: #52677A;

	/* Nuance profonde du doré, pour le texte et les liens dorés. Le doré de
	   marque reste intact pour les aplats ; il ne se lit pas sur du blanc. */
	--orange-texte: #8A6218;
}

/* Bouton principal : encre marine sur le doré de marque. C'est ainsi que
   fonctionne la carte de visite — l'angle doré porte du texte sombre — et
   c'est aussi la seule combinaison lisible : du blanc sur ce doré tomberait
   à 1,8 pour 1. */
.btn--primary,
.voyaliste-btn-gold {
	color: var(--navy);
}
.btn--primary:hover,
.voyaliste-btn-gold:hover {
	/* Le doré de survol est plus profond : l'encre marine y gagne encore. */
	color: var(--navy);
}
/* Le reflet qui balaie le bouton était blanc : sur encre sombre il devient
   un voile clair discret plutôt qu'un éclair. */
.voyaliste-btn-gold::after {
	background: linear-gradient(100deg, transparent, rgba(255,255,255,0.45), transparent);
}

/* Texte courant : la nuance dérivée remplace --steel partout où le texte
   porte de l'information. --steel reste en place pour les mentions
   discrètes et les éléments décoratifs. */
.hero__subtitle,
.section__lede,
.feature p,
.vf-lede,
.vauth__lede,
.vpanel__head p,
.vempty p,
.vcr__resume span,
.vavis__aide,
.vavis-public__mention,
.vconv__aide,
.vedl-slot__aide,
.vedl-anomalies__texte em,
.vc-message-form__aide,
.vauth__aide-connexion,
.vcr__mention,
.vrecap__lede { color: var(--text-2); }

/* Liens et libellés orange : nuance texte, jamais l'orange d'aplat. */
.feature__link,
a.feature__link { color: var(--horizon-dark); }
.feature__link:hover { color: var(--orange-texte); }

.eyebrow { color: var(--horizon-dark); }
/* Sur fond sombre (héros, carrousel, bandeaux navy), l'eyebrow reste clair. */
.proof-carousel .eyebrow,
.vfond .eyebrow,
.cta-banner .eyebrow { color: #EFDFB2; background: rgba(255,255,255,0.14); }

/* --steel-light ne porte plus de texte informatif : réservé aux séparateurs
   et aux icônes décoratives. Les horodatages et compteurs passent en --text-2. */
.vedl-vignette time,
.vedl-anomalies__texte time,
.vconv__msg time,
.vc-message time,
.vavis-carte figcaption time,
.vcr__chrono time { color: var(--text-2); }

/* -------------------------------------------------------------------------
   Deuxième passe de lisibilité, après mesure.
   --horizon-dark tenait tout juste sur blanc (4,52) mais échouait sur --mist
   (4,11) — or c'est précisément sur le fond teinté que se trouvent les
   eyebrows et les liens de section. Nuance dérivée, réservée au texte.
   ------------------------------------------------------------------------- */

:root {
	/* Bleu de marque assombri pour le texte : lisible sur blanc comme sur
	   --mist, là où se trouvent les eyebrows et les liens de section. */
	--horizon-texte: #175A9E;
}

.eyebrow { color: var(--horizon-texte); }
.feature__link, a.feature__link { color: var(--horizon-texte); }
.feature__link:hover { color: var(--orange-texte); }

/* Pied de page : la mention de copyright était à 65 % d'opacité, soit 3,51
   sur le navy. Le gris-bleu clair de la charte donne 6,55. */
.site-footer .footer-legal,
.site-footer__bottom,
.site-footer p.footer-copyright { color: var(--text-2); }

/* -------------------------------------------------------------------------
   Zone de widgets du pied de page
   -------------------------------------------------------------------------
   Le fond est navy. Sans ces règles, tout widget ajouté depuis WordPress
   s'affiche avec ses couleurs par défaut — c'est-à-dire du texte sombre sur
   fond sombre, illisible. C'est ce qui rendait les widgets « Archives » et
   « Categories » invisibles.
   ------------------------------------------------------------------------- */

.site-footer .footer-widget,
.site-footer .footer-widget p,
.site-footer .footer-widget li,
.site-footer .footer-widget label { color: var(--border); }

.site-footer .footer-widget h1,
.site-footer .footer-widget h2,
.site-footer .footer-widget h3,
.site-footer .footer-widget h4,
.site-footer .footer-widget h5,
.site-footer .footer-widget .wp-block-heading,
.site-footer .footer-widget .widget-title {
	color: var(--cloud); font-family: var(--font-display);
	font-size: var(--text-md); margin-bottom: var(--space-3);
}

.site-footer .footer-widget a { color: var(--border); text-decoration: none; }
.site-footer .footer-widget a:hover { color: var(--gold); }
.site-footer .footer-widget ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.site-footer .footer-widget select,
.site-footer .footer-widget input[type="search"],
.site-footer .footer-widget input[type="text"] {
	width: 100%; max-width: 100%; min-height: 40px; padding: 8px 12px;
	background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.2);
	border-radius: var(--radius-sm); color: var(--cloud);
}
.site-footer .footer-widget select option { color: var(--navy); }

/* Derniers points relevés à la mesure. */
.route-line__label { color: var(--text-2); }
.vrecrute__eyebrow { color: var(--orange-texte); }
.vrecrute__inner p, .vrecrute p { color: var(--text-2); }
.footer-bottom p { color: var(--text-2); }
/* Bandeau d'appel à l'action : le texte à 85 % d'opacité sur le dégradé bleu
   tombait à 2,62. En pleine opacité sur ce même dégradé, il passe. */
.cta-banner__inner p { color: #FFFFFF; }

/* Reprise de la moitié sombre du dégradé de la carte : marine profond vers
   bleu de marque. Le turquoise et le doré, trop clairs pour porter du texte
   blanc, ne reviennent qu'en liseré au-dessus du bandeau. */
.cta-banner { background: linear-gradient(118deg, var(--midnight) 0%, var(--navy) 34%, var(--horizon-dark) 100%); }

/* =========================================================================
   Corrections finales de lisibilité, après mesure page par page
   ========================================================================= */

/* 1. Pied de page — fond navy : tout texte y est clair.
   Le remplacement global des couleurs de texte avait rendu ces lignes trop
   sombres ; on rétablit explicitement, en une règle qui couvre le bloc
   entier plutôt qu'élément par élément. */
.site-footer,
.site-footer p,
.site-footer li,
.site-footer span,
.site-footer a { color: var(--border); }
.site-footer a:hover { color: var(--gold); }
.site-footer .footer-bottom,
.site-footer .footer-bottom p,
.site-footer .footer-bottom a { color: #B7C9D6; }
.site-footer h4, .site-footer .footer-widget__title, .site-footer .site-logo__text { color: var(--cloud); }

/* 2. L'orange de marque ne porte jamais de petit texte : 2,60 sur blanc.
   Les pastilles, numéros d'étape et eyebrows passent à la nuance texte. */
.vsplit__eyebrow,
.waypoint__marker,
.steps__num,
.vgabarit__num,
.vetapes-num > span:first-child { color: var(--orange-texte); }

/* 3. Bouton fantôme : il est dessiné pour les fonds sombres (texte et bordure
   blancs). Posé sur une section claire il devenait invisible — ratio 1,00.
   Sur fond clair, il prend l'encre navy. */
.vsplit .voyaliste-btn-ghost,
.section .voyaliste-btn-ghost,
.vcr .voyaliste-btn-ghost,
.vnotif .voyaliste-btn-ghost,
.vportal .voyaliste-btn-ghost,
.vrecap .voyaliste-btn-ghost {
	color: var(--navy); border-color: var(--navy);
}
.vsplit .voyaliste-btn-ghost:hover,
.section .voyaliste-btn-ghost:hover,
.vcr .voyaliste-btn-ghost:hover,
.vnotif .voyaliste-btn-ghost:hover,
.vportal .voyaliste-btn-ghost:hover,
.vrecap .voyaliste-btn-ghost:hover {
	background: var(--navy); color: var(--cloud); border-color: var(--navy);
}
/* Les contextes réellement sombres gardent la version claire. */
.vfond .voyaliste-btn-ghost,
.cta-banner .voyaliste-btn-ghost,
.voyaliste-cookie-banner .voyaliste-btn-ghost,
.hero--sombre .voyaliste-btn-ghost {
	color: #fff; border-color: rgba(255,255,255,0.55);
}
.vfond .voyaliste-btn-ghost:hover,
.cta-banner .voyaliste-btn-ghost:hover,
.voyaliste-cookie-banner .voyaliste-btn-ghost:hover {
	background: rgba(255,255,255,0.16); color: #fff;
}

/* 4. Libellés de l'aperçu du devis. */
.vf-preview-label { color: var(--text-2); }

/* Deux éléments posés sur un fond coloré, que la règle générale avait
   assombris à tort — ils réclament au contraire un texte clair. */

/* Pastille numérotée : encre navy sur l'aplat orange = 6,10. */
.waypoint__marker { color: var(--navy); }

/* Aperçu du devis : le bloc est sur fond navy. */
.voyaliste-devis-preview .vf-preview-label,
.vf-preview-label { color: #B7C9D6; }

/* =========================================================================
   Avancement du trajet (carte client) et suggestions d'adresse européennes
   ========================================================================= */

.vc-avancement {
	margin-top: var(--space-3); padding: var(--space-3);
	background: var(--mist); border-radius: var(--radius-sm);
}
.vc-avancement__tete {
	display: flex; align-items: baseline; justify-content: space-between;
	gap: var(--space-3); margin-bottom: var(--space-2);
}
.vc-avancement__tete strong { font-size: var(--text-sm); color: var(--navy); }
.vc-avancement__tete span {
	font-family: var(--font-display); font-size: var(--text-lg);
	color: var(--horizon-texte); font-variant-numeric: tabular-nums;
}
.vc-avancement__barre { height: 8px; border-radius: 999px; background: var(--cloud); overflow: hidden; }
.vc-avancement__barre span {
	display: block; height: 100%; width: 0; border-radius: 999px;
	background: linear-gradient(90deg, var(--horizon), var(--horizon-dark));
	transition: width 0.6s ease;
}
.vc-avancement em {
	display: block; margin-top: var(--space-2);
	font-size: var(--text-xs); color: var(--text-2); font-style: normal;
}

/* Pays rappelé sur les suggestions hors de France. */
.vf-suggestion__pays {
	display: block; font-size: var(--text-2xs); color: var(--text-2);
	font-style: normal; margin-top: 1px;
}

/* Bouton de partage de position : son état doit se lire d'un coup d'œil,
   au volant, sans avoir à déchiffrer le libellé. */
#vtrack-toggle.is-actif {
	background: var(--horizon); color: #fff; border-color: var(--horizon);
}

/* Documents contractuels — espace client et page convoyeur. */
.vdocs-contrat__aide { font-size: var(--text-sm); color: var(--text-2); margin-bottom: var(--space-3); }
.vconv__documents { display: flex; flex-wrap: wrap; gap: var(--space-3); }
.vconv__documents .voyaliste-btn-ghost { flex: 1 1 200px; justify-content: center; min-height: 48px; }

/* Mention de date de mise à jour en tête des pages légales. */
.vlegal-maj {
	display: inline-block; padding: 4px 12px; border-radius: 999px;
	background: var(--mist); color: var(--horizon-texte);
	font-family: var(--font-mono); font-size: var(--text-2xs);
	letter-spacing: 0.06em; text-transform: uppercase; margin-bottom: var(--space-5);
}

/* Tableaux dans les pages légales — délais des formules, barème.
   Le conteneur déborde tout seul plutôt que d'élargir la page : un tableau
   de trois colonnes sur un téléphone ne rentre pas, et c'est le corps de la
   page qui se mettait à défiler latéralement. */
.vlegal-table {
	width: 100%; border-collapse: collapse; margin: var(--space-4) 0;
	font-size: var(--text-sm);
	display: block; overflow-x: auto;
}
.vlegal-table thead th {
	text-align: left; padding: 10px 14px 10px 0;
	border-bottom: 2px solid var(--horizon);
	font-family: var(--font-mono); font-size: var(--text-2xs);
	letter-spacing: 0.07em; text-transform: uppercase; color: var(--text-2);
	white-space: nowrap;
}
.vlegal-table td {
	padding: 10px 14px 10px 0; border-bottom: 1px solid var(--border);
	vertical-align: top;
}
.vlegal-table td:first-child { white-space: nowrap; }
.vlegal-table tr:last-child td { border-bottom: 0; }

/* ==========================================================================
   Décor véhicules — mise en lumière
   --------------------------------------------------------------------------
   Ce qu'a montré la mesure : les voitures du portail n'étaient visibles qu'à
   28 % pour celle de gauche et à 0 % pour celle de droite. Elles n'étaient
   pas trop discrètes, elles étaient au mauvais endroit — posées derrière la
   barre latérale blanche et les cartes, qui sont opaques et peintes au-dessus
   (z-index 1). Monter l'opacité n'y aurait rien changé.

   La correction consiste donc à les sortir de sous les panneaux et à les
   installer dans les marges blanches de la page, où rien ne passe devant.
   Elles y sont entièrement visibles, franches, et ne peuvent plus gêner la
   lecture d'aucun texte.
   ========================================================================== */

.vportal__decor {
	position: fixed; z-index: 0; pointer-events: none;
	filter: saturate(1.05) drop-shadow(0 14px 22px rgba(18, 40, 63, 0.16));
	opacity: 0.85;
}

/* Halo : la voiture est posée sur une surface lumineuse plutôt que flottante
   sur du blanc pur. */
.vportal__decor::before {
	content: ""; position: absolute; inset: 4% -14% -10% -14%; z-index: -1;
	background: radial-gradient(ellipse at 50% 60%, rgba(44, 156, 219, 0.18) 0%, rgba(234, 246, 252, 0.55) 45%, rgba(255, 255, 255, 0) 75%);
}

/* En dessous de 1560 px la marge est trop étroite pour accueillir une voiture
   sans mordre sur le contenu : on ne l'affiche pas. Le véhicule de la colonne
   latérale, lui, reste présent à toutes les largeurs. */
.vportal__decor { display: none; }

@media (min-width: 1560px) {
	/* Largeur calée sur la marge réellement disponible : la moitié de ce qui
	   dépasse du conteneur (1320 px à cette taille), moins une respiration. */
	.vportal__decor {
		display: block;
		width: clamp(110px, calc((100vw - 1330px) / 2 - 10px), 220px);
	}
	.vportal__decor--gauche { left: 10px; right: auto; top: 20%; bottom: auto; }
	.vportal__decor--droite { right: 10px; left: auto; top: 54%; bottom: auto; }
}

@media (min-width: 1800px) {
	/* Au-delà de 1800 px le conteneur passe à 1440 px : la marge se recalcule. */
	.vportal__decor { width: clamp(120px, calc((100vw - 1450px) / 2 - 10px), 240px); }
}

/* Véhicule du bas de la colonne latérale : il occupe un vide réel, sur un
   panneau blanc où aucun texte ne passe. Il peut donc être franc, et il est
   le seul décor conservé sur les écrans étroits. */
.vportal__side-vehicule {
	display: block; position: relative;
	margin: var(--space-5) calc(var(--space-4) * -1) calc(var(--space-3) * -1);
	opacity: 0.9; filter: saturate(1.05) drop-shadow(0 10px 18px rgba(18, 40, 63, 0.18));
}
.vportal__side-vehicule::before {
	content: ""; position: absolute; inset: 12% -6% -6% -6%; z-index: -1;
	background: radial-gradient(ellipse at 50% 60%, rgba(44, 156, 219, 0.18) 0%, rgba(234, 246, 252, 0.55) 45%, rgba(255, 255, 255, 0) 75%);
}

/* États vides : la voiture y remplit un espace qui, sans elle, ne dit rien. */
.vempty__vehicule {
	position: absolute; right: -4%; bottom: -12%; width: 48%; max-width: 300px;
	opacity: 0.38; filter: grayscale(0.1) saturate(1.05);
	pointer-events: none;
}

/* Filigranes de section : même logique, un cran plus discret puisqu'ils
   passent derrière du texte. */

/* Véhicules encadrant une section : ils ne portent aucun texte, ils peuvent
   donc s'afficher pleinement. */
.vflanque > .vvehicule { opacity: 0.85; filter: saturate(1.05) drop-shadow(0 12px 20px rgba(18, 40, 63, 0.14)); }

@media (max-width: 900px) {
	.vportal__side-vehicule { opacity: 0.85; }
}

/* ==========================================================================
   Conteneur des espaces personnels
   --------------------------------------------------------------------------
   Constat : .voyaliste-wrap n'avait ni largeur maximale ni marges
   automatiques, alors que tout le reste du site tient dans .wrap. Deux
   conséquences visibles : l'espace client s'étirait d'un bord à l'autre de
   l'écran, et les formulaires « premier contact » et « demande de RDV »,
   limités à 640 px par un style en ligne, restaient collés à gauche faute de
   centrage. On aligne donc ces gabarits sur le conteneur du site.
   ========================================================================== */

.voyaliste-wrap {
	max-width: 1200px;
	margin-left: auto; margin-right: auto;
	padding: var(--space-7) 24px;
}
.voyaliste-wrap--etroit { max-width: 640px; }

@media (min-width: 1440px) { .voyaliste-wrap--large { max-width: 1320px; } }
@media (min-width: 1800px) { .voyaliste-wrap--large { max-width: 1440px; } }
@media (max-width: 420px)  { .voyaliste-wrap { padding-left: 16px; padding-right: 16px; } }

/* ==========================================================================
   Barre de navigation — animations et état actif
   ========================================================================== */

@keyframes vnav-deplier {
	from { opacity: 0; transform: translateY(-10px); }
	to   { opacity: 1; transform: none; }
}
@keyframes vnav-entree {
	from { opacity: 0; transform: translateY(-6px); }
	to   { opacity: 1; transform: none; }
}

/* Page courante : le lien porte déjà le repère doré, il lui faut simplement
   une encre plus affirmée que celle de ses voisins. */
.site-nav__list .current-menu-item > a,
.site-nav__list .current-menu-ancestor > a,
.site-nav__list .current_page_item > a {
	color: var(--horizon-texte); font-weight: 600;
}

/* Pendant qu'un sous-menu est ouvert, son parent reste visiblement actif :
   sans cela on ne sait plus de quel menu vient le panneau affiché. */
.site-nav__list > .menu-item-has-children:hover > a,
.site-nav__list > .menu-item-has-children:focus-within > a,
.site-nav__list > .menu-item-has-children.is-survole > a,
.site-nav__list > .menu-item-has-children.is-open > a {
	background: var(--mist); color: var(--horizon-texte);
}

/* Le bandeau prend une pointe de la couleur de marque au défilement : un
   liseré dégradé, assez discret pour ne pas peser sur le contenu. */
.site-header::after {
	content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px;
	background: var(--degrade-marque);
	background-size: 100% 100%;
	opacity: 0; transition: opacity 0.3s ease; pointer-events: none;
}
.site-header.is-scrolled::after { opacity: 1; }
.site-header { position: sticky; }

/* Sur un écran tactile, le survol n'existe pas : le repère glissant n'a rien
   à suivre et les entrées de sous-menu ne doivent pas rester invisibles. */
@media (hover: none) {
	.sub-menu li { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
	/* Le repère cesse de glisser : il se place, sans trajet. */
	.site-nav__list::after { transition: opacity 0.2s ease; }
	.sub-menu li { opacity: 1; transform: none; transition: none; }
	.site-nav.is-open, .site-nav.is-open .site-nav__list > li { animation: none; }
}

/* --------------------------------------------------------------------------
   Textes dorés posés sur une section sombre
   --------------------------------------------------------------------------
   Le doré profond sert à écrire sur du blanc ; sur une photo assombrie il
   disparaît. Ces sections-là prennent donc la nuance claire du doré, celle de
   l'angle de la carte de visite, qui s'y détache nettement.
   -------------------------------------------------------------------------- */

.vfond__eyebrow,
.vfeature__eyebrow { color: #EFDFB2; }

/* .vconv__eyebrow n'a pas été ajouté ici : la page de suivi convoyeur est sur
   fond clair, le doré profond y reste le bon choix. */

.vfond .vfond__titre strong,
.vfond__texte strong { color: var(--gold); }

/* ==========================================================================
   Étape 1 du convoyage : règlement et contrat
   --------------------------------------------------------------------------
   C'est la première chose que voit le client sur une mission confirmée, et
   tant qu'elle n'est pas franchie rien ne part. Elle est donc traitée comme
   un bloc à part entière, pas comme une ligne parmi d'autres.
   ========================================================================== */

.vc-etape1 { border-left: 3px solid var(--gold-fonce); }
.vc-etape1.is-complete { border-left-color: #1B7A45; }
.vc-etape1__intro { color: var(--text-2); font-size: var(--text-sm); margin: 0 0 var(--space-4); }
.vc-etape1__ok {
	display: flex; align-items: center; gap: 8px; margin: 0 0 var(--space-3);
	color: #1B7A45; font-weight: 600;
}

.vc-etape1__liste { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-4); }
.vc-etape1__point { display: flex; gap: var(--space-3); align-items: flex-start; }
.vc-etape1__puce {
	flex: none; width: 24px; height: 24px; border-radius: 50%;
	display: inline-flex; align-items: center; justify-content: center;
	font-size: var(--text-xs); font-weight: 700;
	background: var(--mist); color: var(--horizon-texte); border: 1px solid var(--border);
}
.vc-etape1__point.is-fait .vc-etape1__puce { background: #1B7A45; border-color: #1B7A45; color: #fff; }
.vc-etape1__corps { flex: 1; min-width: 0; }
.vc-etape1__corps > strong { display: block; color: var(--navy); }
.vc-etape1__detail { margin: 4px 0 8px; font-size: var(--text-sm); color: var(--text-2); }
.vc-etape1__lien {
	display: inline-block; font-weight: 600; color: var(--horizon-texte);
	text-decoration: underline; font-size: var(--text-sm);
}

/* ---------- signature ---------- */
.vc-signature {
	margin-top: var(--space-3); padding: var(--space-4);
	background: var(--mist); border-radius: var(--radius-sm);
	display: grid; gap: var(--space-3);
}
.vc-signature__case { display: flex; gap: 9px; align-items: flex-start; font-size: var(--text-sm); }
.vc-signature__case input { margin-top: 3px; flex: none; width: 17px; height: 17px; accent-color: var(--gold-fonce); }
.vc-signature__nom { display: grid; gap: 5px; }
.vc-signature__nom span { font-size: var(--text-xs); font-weight: 600; color: var(--text-2); }
.vc-signature__nom input {
	padding: 10px 12px; border: 1px solid var(--border); border-radius: var(--radius-sm);
	font-size: var(--text-base); background: var(--cloud); color: var(--navy); font-family: inherit;
}
.vc-signature__nom input:focus { outline: 2px solid var(--horizon); outline-offset: 1px; }
.vc-signature button { justify-self: start; }
.vc-signature__mention { margin: 0; font-size: var(--text-2xs); color: var(--text-2); }
.vc-signature__retour:empty { display: none; }

@media (max-width: 600px) {
	.vc-signature button { justify-self: stretch; width: 100%; }
}

/* ---------- Moyens de règlement, après signature ---------- */
.vc-moyens { display: grid; gap: var(--space-3); margin-top: var(--space-2); }
.vc-moyen {
	border: 1px solid var(--border); border-radius: var(--radius-sm);
	padding: var(--space-3) var(--space-4); background: var(--cloud);
}
.vc-moyen--carte { border-color: var(--gold-fonce); background: #FBF4E2; }
.vc-moyen__titre {
	display: flex; align-items: center; gap: 7px; font-weight: 700;
	color: var(--navy); font-size: var(--text-sm); margin-bottom: 6px;
}
.vc-moyen__detail { margin: 6px 0 0; font-size: var(--text-xs); color: var(--text-2); }
.vc-moyen__coord { display: grid; grid-template-columns: auto 1fr; gap: 3px 12px; margin: 0; font-size: var(--text-sm); }
.vc-moyen__coord dt { color: var(--text-2); font-size: var(--text-xs); }
.vc-moyen__coord dd { margin: 0; color: var(--navy); font-weight: 600; }
/* L'IBAN se recopie : caractères de largeur fixe, sélection facile. */
.vc-moyen__iban { font-family: var(--font-mono); letter-spacing: 0.03em; user-select: all; word-break: break-all; }
.vc-moyen button { margin-top: 8px; }

/* ---------- Espace professionnel ----------
 * Toute la couleur du panneau vient de --vpro, posée en attribut style depuis
 * le profil du client. Une seule variable : changer de marque repeint le
 * panneau entier sans qu'aucune règle ne connaisse le nom d'un constructeur.
 * Aucun logo de marque n'est affiché — une couleur d'accent n'est pas une
 * marque, un logo en est une.
 */
.vpro { --vpro: var(--navy); --vpro-pale: var(--mist); }
.vpro__head { border-left: 4px solid var(--vpro); padding-left: var(--space-3); }
.vpro__head h2 { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.vpro__marque {
	font-family: var(--font-body); font-size: var(--text-xs); font-weight: 700;
	letter-spacing: .04em; text-transform: uppercase;
	color: #fff; background: var(--vpro);
	padding: 3px 10px; border-radius: 999px;
}

.vpro__chiffres {
	display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
	gap: var(--space-2); margin: var(--space-4) 0 0;
}
.vpro__chiffres > div {
	padding: var(--space-3); border-radius: var(--radius-sm);
	background: var(--vpro-pale); border: 1px solid var(--border);
}
.vpro__chiffres dt { margin: 0 0 4px; font-size: var(--text-2xs); text-transform: uppercase; letter-spacing: .05em; color: var(--text-2); }
.vpro__chiffres dd { margin: 0; font-size: var(--text-lg); font-weight: 700; color: var(--vpro); font-family: var(--font-display); }
.vpro__chiffres .is-du dd { color: var(--gold-texte); }

.vpro__bloc {
	margin-top: var(--space-4); padding: var(--space-4);
	border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--cloud);
}
.vpro__bloc h3 { margin: 0 0 var(--space-2); color: var(--vpro); }
.vpro__promesses { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.vpro__promesses li { display: flex; align-items: flex-start; gap: 9px; font-size: var(--text-sm); }
.vpro__promesses svg { flex: 0 0 auto; margin-top: 2px; color: var(--vpro); }
.vpro__cta { margin-top: var(--space-3); }

/* L'écran de choix, pour un client qui n'a pas encore dit son métier. */
.vpro__choix { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: var(--space-3); margin-top: var(--space-3); }
.vpro__carte { padding: var(--space-4); border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--cloud); }
.vpro__carte h3 { margin: 0 0 6px; font-size: var(--text-sm); color: var(--navy); }
.vpro__carte p { margin: 0; font-size: var(--text-xs); color: var(--text-2); }

.vpro__form { margin-top: var(--space-4); }
.vprofil__couleur { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.vprofil__couleur input[type="color"] {
	width: 52px; height: 34px; padding: 2px; cursor: pointer;
	border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--cloud);
}
.vprofil__couleur-defaut {
	border: 1px solid var(--border); background: var(--cloud); color: var(--text-2);
	font-size: var(--text-2xs); padding: 6px 11px; border-radius: 999px; cursor: pointer;
}
.vprofil__couleur-defaut:hover { color: var(--navy); border-color: var(--steel-light); }
.vprofil__couleur-defaut:disabled { opacity: .5; cursor: default; }

/* Ce qu'il reste à écrire sur le contrat, dit avant la signature. */
.vc-etape1__manque {
	display: flex; align-items: flex-start; gap: 7px;
	margin: 8px 0 0; padding: 9px 11px;
	font-size: var(--text-xs); color: var(--navy);
	background: #FBF0E4; border-radius: var(--radius-sm);
}
.vc-etape1__manque svg { flex: 0 0 auto; margin-top: 1px; }

/* ---------- « Paiement effectué » : le client signale son virement ----------
 * Détaché du reste du bloc par un filet : ce n'est plus une coordonnée à lire,
 * c'est un geste à faire, et l'oeil doit le repérer au retour de la banque.
 */
.vc-declare { margin-top: var(--space-3); padding-top: var(--space-3); border-top: 1px dashed var(--border); }
.vc-declare__intro { margin: 0 0 8px; font-size: var(--text-xs); color: var(--text-2); }
.vc-declare__mention { margin: 8px 0 0; font-size: var(--text-2xs); color: var(--text-2); }
.vc-declare__refus {
	margin: 0 0 8px; padding: 8px 10px; font-size: var(--text-xs);
	color: var(--navy); background: #FBF0E4; border-radius: var(--radius-sm);
}
.vc-declare__etat {
	display: flex; align-items: flex-start; gap: 8px; margin: 0;
	font-size: var(--text-xs); color: var(--navy);
	padding: 10px 12px; background: var(--mist); border-radius: var(--radius-sm);
}
.vc-declare__etat svg { flex: 0 0 auto; margin-top: 1px; }
.vc-declare__retour:empty { display: none; }

/* ---------- Signature manuscrite du convoyeur ---------- */
.vconv__signature {
	margin-top: var(--space-4); padding: var(--space-4);
	border: 1px solid var(--border); border-radius: var(--radius-sm);
	background: var(--mist); display: grid; gap: var(--space-3);
}
.vconv__signature-titre { display: flex; align-items: center; gap: 7px; font-weight: 700; color: var(--navy); }
/* touch-action none : sans cela, signer au doigt fait défiler la page. */
.vconv__pad {
	width: 100%; height: 170px; touch-action: none; cursor: crosshair;
	background: var(--cloud); border: 1px dashed var(--steel-light);
	border-radius: var(--radius-sm);
}
.vconv__signature-actions { display: flex; justify-content: flex-end; }
.vconv__signature-nom { display: grid; gap: 5px; }
.vconv__signature-nom span { font-size: var(--text-xs); font-weight: 600; color: var(--text-2); }
.vconv__signature-nom input {
	padding: 11px 12px; border: 1px solid var(--border); border-radius: var(--radius-sm);
	font-size: var(--text-md); background: var(--cloud); color: var(--navy); font-family: inherit;
}
.vconv__signature--faite { background: #EEF8F2; border-color: #BFE3CD; }
.vconv__signature-trace { max-width: 260px; background: var(--cloud); border-radius: var(--radius-sm); }
.vconv__signature-mention { margin: 0; font-size: var(--text-xs); color: var(--text-2); }
.vconv__signature-retour:empty { display: none; }

/* Corriger une étape, côté convoyeur. */
.vconv__revenir {
	background: none; border: 0; color: var(--text-2); font-size: var(--text-xs);
	text-decoration: underline; cursor: pointer; font-family: inherit; padding: 6px 4px;
}
.vconv__revenir:hover { color: var(--navy); }
.vconv__attente { font-size: var(--text-xs); color: var(--text-2); font-style: italic; }
.vf-optionnel { font-weight: 400; color: var(--text-2); font-size: 0.9em; }

/* ---------- « En route » : état automatique, pas une étape à valider ----------
   Il porte une puce vide et un liseré turquoise plutôt qu'une coche : c'est un
   état en cours, pas un jalon franchi. Le client comprend d'un coup d'œil que
   personne n'a rien à cocher là. */
.vetapes__item--route .vetapes__puce {
	background: var(--lagoon); border-color: var(--lagoon);
	animation: vroute-pulse 2.4s ease-in-out infinite;
}
.vetapes__item--route strong { color: var(--lagoon-dark); }
.vetapes__route { display: block; font-size: var(--text-xs); color: var(--text-2); margin-top: 2px; }

@keyframes vroute-pulse {
	0%, 100% { box-shadow: 0 0 0 0 rgba(63, 168, 190, 0.5); }
	50%      { box-shadow: 0 0 0 5px rgba(63, 168, 190, 0); }
}
@media (prefers-reduced-motion: reduce) {
	.vetapes__item--route .vetapes__puce { animation: none; }
}

/* ---------- Revenir dans son espace ---------- */
.vauth__lien {
	margin-top: var(--space-4); padding-top: var(--space-3);
	border-top: 1px solid var(--border);
}
.vauth__lien > summary {
	cursor: pointer; font-size: var(--text-sm); font-weight: 600;
	color: var(--horizon-texte); list-style: none; padding: 4px 0;
}
.vauth__lien > summary::-webkit-details-marker { display: none; }
.vauth__lien > summary::before { content: "＋ "; font-weight: 400; }
.vauth__lien[open] > summary::before { content: "− "; }
.vauth__lien > summary:hover { text-decoration: underline; }
.vauth__lien-aide { font-size: var(--text-xs); color: var(--text-2); margin: 8px 0 12px; }
.vauth__lien label { display: block; font-size: var(--text-xs); font-weight: 600; color: var(--text-2); margin-bottom: 5px; }
.vauth__lien input {
	width: 100%; padding: 11px 12px; border: 1px solid var(--border);
	border-radius: var(--radius-sm); font-size: var(--text-base);
	background: var(--cloud); color: var(--navy); font-family: inherit; margin-bottom: 10px;
}
.vauth__lien input:focus { outline: 2px solid var(--horizon); outline-offset: 1px; }
.vauth__lien button { width: 100%; justify-content: center; }

.vauth__card--oubli { max-width: 460px; }
.vauth__card--oubli label { display: block; font-size: var(--text-xs); font-weight: 600; color: var(--text-2); margin-bottom: 5px; }
.vauth__card--oubli input {
	width: 100%; padding: 12px; border: 1px solid var(--border);
	border-radius: var(--radius-sm); font-size: var(--text-base);
	background: var(--cloud); color: var(--navy); font-family: inherit; margin-bottom: 14px;
}
.vauth__card--oubli input:focus { outline: 2px solid var(--horizon); outline-offset: 1px; }
.vauth__card--oubli button { width: 100%; justify-content: center; }

/* ==========================================================================
   ESPACE CLIENT PLEIN ÉCRAN
   --------------------------------------------------------------------------
   L'espace client n'est plus une page du site vitrine prise entre un bandeau
   et un pied de page : il occupe tout l'écran. Le gabarit
   page-templates/template-espace-client.php n'appelle donc ni get_header()
   ni get_footer(), et réémet lui-même la coquille du document.

   La barre porte volontairement id="site-header" et les classes .site-header
   .vapp__bar. Les règles ci-dessous ne remplacent pas .site-header : elles la
   corrigent, avec une spécificité suffisante pour gagner sans !important. On
   garde ainsi tout ce qui dépend déjà de ces noms — le script de menu, la
   publication de --hauteur-entete, l'état is-scrolled, et la feuille
   d'impression qui masque .site-header par son nom.
   ========================================================================== */

.voyaliste-app {
	min-height: 100vh;
	min-height: 100dvh;
	display: flex;
	flex-direction: column;
	background: var(--mist);
}

/* ---------------------------------------------------- La barre d'application */

.site-header.vapp__bar {
	position: sticky; top: 0; z-index: 60;
	background: var(--navy);
	border-bottom: 1px solid rgba(255, 255, 255, .10);
	box-shadow: 0 1px 0 rgba(18, 40, 63, .06);
}
.site-header.vapp__bar.is-scrolled { box-shadow: 0 6px 24px -12px rgba(12, 27, 44, .55); }

.vapp__bar-inner {
	max-width: 1440px; margin: 0 auto;
	padding: 0 24px;
	min-height: 58px;
	display: flex; align-items: center; gap: var(--space-4);
}

.vapp__logo { display: flex; align-items: center; gap: var(--space-3); min-width: 0; }
.vapp__logo a { display: inline-flex; align-items: center; gap: 9px; color: #fff; text-decoration: none; }
.vapp__logo .site-logo__mark { color: var(--gold); display: inline-flex; }
.vapp__logo .site-logo__text { font-weight: 700; letter-spacing: .2px; color: #fff; font-size: 15px; }

/* Le mot « Espace client » dit où l'on se trouve. Il disparaît sous 560px,
   où la place doit aller au nom du client et au bouton de menu.

   `voyaliste_logo()` produit désormais `.site-logo__mention` ; l'ancienne
   classe `.vapp__mention` reste stylée à l'identique parce qu'elle vit encore
   dans du contenu enregistré en base, et qu'une mention qui perdrait son
   filet de séparation se verrait immédiatement. */
.vapp__mention,
.vapp__logo .site-logo__mention {
	padding-left: var(--space-3);
	border-left: 1px solid rgba(255, 255, 255, .22);
	color: rgba(255, 255, 255, .72);
	font-size: 13px; white-space: nowrap;
}

/* Hors barre sombre — l'espace professionnel —, la mention se pose sur clair. */
.site-logo__mention {
	padding-left: var(--space-3);
	border-left: 1px solid var(--border);
	color: var(--steel);
	font-size: 13px; white-space: nowrap;
}

.vapp__actions { margin-left: auto; display: flex; align-items: center; gap: var(--space-3); }

.vapp__qui {
	display: inline-flex; align-items: center; gap: 7px;
	max-width: 220px;
	padding: 6px 12px; border-radius: 999px;
	background: rgba(255, 255, 255, .08);
	color: #fff; font-size: 13px; font-weight: 600;
}
.vapp__qui > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vapp__qui svg { flex-shrink: 0; color: var(--gold); }

.vapp__retour {
	display: inline-flex; align-items: center; gap: 6px;
	color: rgba(255, 255, 255, .78); font-size: 13px; text-decoration: none;
	padding: 6px 10px; border-radius: var(--radius-sm);
	transition: color .18s ease, background-color .18s ease;
}
.vapp__retour:hover, .vapp__retour:focus-visible { color: #fff; background: rgba(255, 255, 255, .08); }
/* Le thème ne fournit pas de flèche : on retourne le chevron existant plutôt
   que d'ajouter un SVG pour une seule flèche. */
.vapp__retour svg { transform: rotate(180deg); flex-shrink: 0; }

.vapp__menu-btn span:not(.sr-only) { background: #fff; }

/* Le menu du site reste replié derrière le bouton, à toutes les tailles :
   en plein écran on ne veut pas d'une seconde barre de navigation en
   concurrence avec les onglets du portail. */
.vapp__nav {
	position: absolute; top: 100%; right: 24px;
	display: none;
	min-width: 230px; padding: var(--space-3);
	background: var(--cloud); border: 1px solid var(--border);
	border-radius: var(--radius-md); box-shadow: 0 18px 40px -20px rgba(12, 27, 44, .45);
}
.vapp__nav.is-open { display: block; }
.vapp__nav .site-nav__list { display: flex; flex-direction: column; gap: 2px; list-style: none; margin: 0; padding: 0; }
.vapp__nav .site-nav__list a {
	display: block; padding: 9px 12px; border-radius: var(--radius-sm);
	color: var(--navy); text-decoration: none; font-size: 14px;
}
.vapp__nav .site-nav__list a:hover, .vapp__nav .site-nav__list a:focus-visible { background: var(--mist); color: var(--horizon-texte); }
.vapp__nav .site-nav__cta { display: block; margin-top: var(--space-3); text-align: center; }

.site-header.vapp__bar { position: sticky; }
.vapp__bar-inner { position: relative; }

/* ------------------------------------------------------------- Le contenu */

.vapp__main { flex: 1 1 auto; }

/* Le bandeau est bien plus fin que celui du site vitrine : la respiration
   haute du conteneur, calibrée pour une page, devient excessive ici. */
.vapp__zone { padding-top: var(--space-5); padding-bottom: var(--space-6); }
.voyaliste-app .vportal { margin-top: var(--space-4); }

/* ------------------------------------------------------------ Le pied légal */

.vapp__pied {
	flex-shrink: 0;
	background: var(--cloud);
	border-top: 1px solid var(--border);
}
.vapp__pied-inner {
	max-width: 1440px; margin: 0 auto; padding: var(--space-4) 24px;
	display: flex; align-items: center; justify-content: space-between;
	gap: var(--space-4); flex-wrap: wrap;
	font-size: 12.5px; color: var(--text-2);
}
.vapp__pied-liens { display: flex; align-items: center; gap: var(--space-4); flex-wrap: wrap; }
.vapp__pied-liens a { color: var(--text-2); text-decoration: none; }
.vapp__pied-liens a:hover, .vapp__pied-liens a:focus-visible { color: var(--horizon-texte); text-decoration: underline; }

/* -------------------------------------------------------------- Téléphone */

@media (max-width: 700px) {
	.vapp__bar-inner { padding: 0 16px; gap: var(--space-3); }
	.vapp__retour span { display: none; }
	.vapp__nav { right: 16px; left: 16px; min-width: 0; }
	.vapp__zone { padding-top: var(--space-4); }
	.vapp__pied-inner { padding: var(--space-4) 16px; justify-content: center; text-align: center; }
}
@media (max-width: 560px) {
	.vapp__mention { display: none; }
	.vapp__qui { max-width: 130px; }
}

/* --------------------------------------------------- Barre d'administration */

/* WordPress injecte html{margin-top:32px !important} quand la barre
   d'administration est présente. Le bandeau collant doit s'en décaler
   d'autant, sans quoi il passe dessous pour l'équipe. */
.admin-bar .site-header.vapp__bar { top: 32px; }
@media (max-width: 782px) { .admin-bar .site-header.vapp__bar { top: 46px; } }

/* ==========================================================================
   MODE APERÇU — signalé à l'écran, et pas seulement par un bandeau
   --------------------------------------------------------------------------
   La classe .is-apercu était posée sur le portail depuis l'origine mais
   n'était stylée nulle part : le seul repère du mode lecture seule était une
   barre en haut de page, invisible dès qu'on avait défilé. Un membre de
   l'équipe pouvait croire agir sur le dossier alors qu'il consultait.
   ========================================================================== */

.vapercu-barre { position: sticky; top: 0; z-index: 70; }

.vportal.is-apercu { position: relative; }
.vportal.is-apercu::before {
	content: "Aperçu — lecture seule";
	position: fixed; z-index: 65;
	right: 18px; bottom: 18px;
	padding: 7px 14px; border-radius: 999px;
	background: var(--gold); color: var(--navy);
	font-size: 12px; font-weight: 700; letter-spacing: .2px;
	box-shadow: 0 8px 22px -10px rgba(12, 27, 44, .5);
	pointer-events: none;
}
.vportal.is-apercu .vpanel { position: relative; }

/* ==========================================================================
   PROFIL CLIENT — les informations retenues d'une mission à l'autre
   ========================================================================== */

.vprofil { display: grid; gap: var(--space-5); }

.vprofil__groupe {
	border: 1px solid var(--border); border-radius: var(--radius-md);
	padding: var(--space-4) var(--space-4) var(--space-3);
	margin: 0; background: var(--cloud);
}
.vprofil__groupe legend {
	padding: 0 8px; font-weight: 700; color: var(--navy); font-size: 14.5px;
}
.vprofil__aide { margin: 0 0 var(--space-4); color: var(--text-2); font-size: var(--text-sm); }

.vprofil__champs {
	display: grid; gap: var(--space-3);
	grid-template-columns: repeat(auto-fit, minmax(215px, 1fr));
}
.vprofil__champs .vf-field--large { grid-column: 1 / -1; }
.vprofil__champs textarea { resize: vertical; min-height: 74px; }

/* Avancement du profil : une barre, pas un pourcentage seul — un chiffre nu
   ne dit pas ce qu'il reste à faire. */
.vprofil__etat {
	display: flex; align-items: center; gap: var(--space-3);
	padding: var(--space-3) var(--space-4); margin-bottom: var(--space-4);
	background: var(--mist); border-radius: var(--radius-sm);
	font-size: var(--text-sm); color: var(--navy);
}
.vprofil__jauge {
	flex: 1 1 auto; height: 6px; min-width: 90px;
	background: var(--border); border-radius: 999px; overflow: hidden;
}
.vprofil__jauge span {
	display: block; height: 100%; border-radius: 999px;
	background: linear-gradient(90deg, var(--horizon), var(--lagoon));
}
.vprofil__manque { color: var(--text-2); font-size: 12.5px; margin: 0; }

/* ==========================================================================
   ONGLETS DOCUMENTS, PAIEMENTS ET CONFIDENTIALITÉ
   ========================================================================== */

.vdoc-groupe { border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--cloud); margin-bottom: var(--space-4); overflow: hidden; }
.vdoc-groupe__tete {
	display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-3);
	padding: var(--space-3) var(--space-4); background: var(--mist); border-bottom: 1px solid var(--border);
}
.vdoc-groupe__tete h3 { margin: 0; font-size: 14.5px; color: var(--navy); }
.vdoc-groupe__tete span { font-size: 12.5px; color: var(--text-2); }
.vdoc-liste { list-style: none; margin: 0; padding: 0; }
.vdoc-liste li { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--border); }
.vdoc-liste li:last-child { border-bottom: 0; }
.vdoc-liste svg { color: var(--horizon); flex-shrink: 0; }
.vdoc-liste a { color: var(--horizon-texte); font-weight: 600; text-decoration: none; }
.vdoc-liste a:hover, .vdoc-liste a:focus-visible { text-decoration: underline; }
.vdoc-liste em { margin-left: auto; font-style: normal; font-size: 12.5px; color: var(--text-2); }

.vpay { width: 100%; border-collapse: collapse; font-size: var(--text-sm); }
.vpay th, .vpay td { padding: var(--space-3); text-align: left; border-bottom: 1px solid var(--border); }
.vpay th { font-size: 12px; text-transform: uppercase; letter-spacing: .4px; color: var(--text-2); font-weight: 700; }
.vpay td strong { color: var(--navy); }
.vpay__etat { display: inline-block; padding: 2px 10px; border-radius: 999px; font-size: 11.5px; font-weight: 700; }
.vpay__etat.is-paye { background: rgba(63, 168, 190, .16); color: var(--lagoon-dark); }
.vpay__etat.is-du { background: rgba(232, 195, 106, .3); color: var(--gold-texte); }
/* Signalé mais pas encore constaté : un troisième état, volontairement
   distinct des deux autres — le confondre avec « réglé » ferait croire au
   client que son convoyage est débloqué. */
.vpay__etat.is-verif { background: rgba(27, 95, 168, .12); color: var(--navy); }
.vpay__reste { color: var(--text-2); font-size: 12.5px; }
.vpay__total { display: flex; gap: var(--space-5); flex-wrap: wrap; margin-bottom: var(--space-4); }
.vpay__total div { background: var(--mist); border-radius: var(--radius-sm); padding: var(--space-3) var(--space-4); }
.vpay__total dt { font-size: 12px; color: var(--text-2); margin: 0 0 3px; }
.vpay__total dd { margin: 0; font-size: 20px; font-weight: 700; color: var(--navy); }

.vconf__bloc { border: 1px solid var(--border); border-radius: var(--radius-md); padding: var(--space-4); margin-bottom: var(--space-4); background: var(--cloud); }
.vconf__bloc h3 { margin: 0 0 var(--space-2); font-size: 14.5px; color: var(--navy); display: flex; align-items: center; gap: 8px; }
.vconf__bloc h3 svg { color: var(--horizon); }
.vconf__bloc p { color: var(--text-2); font-size: var(--text-sm); }
.vconf__actions { display: flex; gap: var(--space-3); flex-wrap: wrap; margin-top: var(--space-3); }
.vconf__danger { border-color: rgba(168, 118, 19, .35); }
.vconf__danger h3 svg { color: var(--gold-fonce); }
.vconf__liste { list-style: none; margin: var(--space-3) 0 0; padding: 0; display: grid; gap: 6px; }
.vconf__liste li { display: flex; justify-content: space-between; gap: var(--space-3); padding: 7px 0; border-bottom: 1px dashed var(--border); font-size: var(--text-sm); }
.vconf__liste li:last-child { border-bottom: 0; }
.vconf__liste span:first-child { color: var(--text-2); }
.vconf__liste span:last-child { color: var(--navy); font-weight: 600; text-align: right; }
.vconf__attente { background: var(--mist); border-left: 3px solid var(--gold-dark); padding: var(--space-3) var(--space-4); border-radius: var(--radius-sm); font-size: var(--text-sm); color: var(--navy); }

/* Tableau des paiements : sur téléphone il déborde plutôt que d'écraser les
   colonnes. Le conteneur défile seul, la page ne défile jamais en largeur. */
.vpanel__scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.vpanel__scroll table { min-width: 560px; }

/* Case à cocher alignée sur son libellé, texte cliquable compris. */
.vf-check { display: flex; align-items: flex-start; gap: 10px; cursor: pointer; font-weight: 500; }
.vf-check input { margin: 2px 0 0; flex-shrink: 0; width: 16px; height: 16px; accent-color: var(--horizon); }
.vf-check span { color: var(--navy); }

/* Mention de pré-remplissage sous le formulaire de devis. */
.vf-prerempli { display: flex; align-items: center; gap: 7px; color: var(--lagoon-dark); }
.vf-prerempli svg { flex-shrink: 0; }

/* Le rappel de sécurité sous la case « rester connecté » : un avertissement
   qu'on ne lit pas ne protège personne, il est donc posé contre le champ. */
.vauth__note-session {
	display: flex; align-items: flex-start; gap: 8px;
	margin: var(--space-3) 0 0; padding: 10px 12px;
	background: var(--mist); border-radius: var(--radius-sm);
	font-size: 12.5px; line-height: 1.5; color: var(--text-2);
}
.vauth__note-session svg { flex-shrink: 0; margin-top: 1px; color: var(--horizon); }

/* Six onglets ne tiennent plus sur deux lignes de deux sur petit écran : la
   colonne de navigation passe en liste simple sous 900px plutôt qu'en grille,
   où les libellés se tronquaient. */
@media (max-width: 900px) {
	.vportal__nav { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 560px) {
	.vportal__nav { grid-template-columns: repeat(2, 1fr); }
	.vportal__tab span { font-size: 12px; }
}

/* --------------------------------------------------------------------------
   Le formulaire de compte porte désormais seize informations réparties en
   cinq groupes, là où il en portait trois. Deux réglages hérités devenaient
   gênants : une largeur de 520px qui forçait tout en colonne unique, et un
   cadre qui, chaque groupe ayant maintenant le sien, produisait une boîte
   dans une boîte. On les neutralise pour cette variante seulement.
   -------------------------------------------------------------------------- */

.vaccount.vprofil {
	max-width: 940px;
	background: none; border: 0; padding: 0;
}
.vaccount.vprofil .vf-field { margin-bottom: 0; }

/* Le style des champs ne visait que les <input> : les listes déroulantes et
   les zones de texte du profil seraient restées aux styles du navigateur. */
.vaccount select,
.vaccount textarea {
	width: 100%; border: 1.5px solid var(--border); border-radius: var(--radius-sm);
	padding: 12px 14px; background: var(--mist); color: var(--navy);
	font-family: inherit; font-size: inherit;
	transition: border-color 0.2s ease, background 0.2s ease;
}
.vaccount select { height: 46px; padding: 0 14px; }
.vaccount select:focus,
.vaccount textarea:focus { border-color: var(--horizon); background: var(--cloud); outline: none; }
.vaccount select:disabled,
.vaccount textarea:disabled { color: var(--text-2); cursor: not-allowed; }

.vaccount.vprofil > button[type="submit"] { margin-top: var(--space-2); }

/* La jauge d'avancement se replie sous 700px : les trois informations
   qu'elle porte ne tiennent pas côte à côte sur un téléphone. */
@media (max-width: 700px) {
	.vprofil__etat { flex-wrap: wrap; }
	.vprofil__etat .vprofil__manque { flex-basis: 100%; }
	.vaccount.vprofil { max-width: none; }
}

/* --------------------------------------------------------------------------
   Sous 900px, la colonne de navigation n'est plus collante : elle passe
   au-dessus du contenu. Le position:static prevu pour cela (l.1137) etait
   toutefois annule plus bas par .vportal__side{position:relative} (l.2172),
   posee pour l'empilement du decor. La colonne restait donc positionnee, et
   son decalage `top` creusait un vide de la hauteur du bandeau au-dessus
   d'elle -- 92px a l'origine, sans que rien ne le signale.

   On neutralise le decalage plutot que la position, pour ne pas defaire
   l'empilement du decor.
   -------------------------------------------------------------------------- */

@media (max-width: 900px) {
	.vportal__side { top: auto; }
}

/* ==========================================================================
   BARRE DE L'ESPACE CLIENT : alignee sur l'en-tete du site
   --------------------------------------------------------------------------
   La barre etait bleu marine. Deux consequences, decouvertes en septembre
   2026 : le logo de l'entreprise n'y etait pas appele du tout, et il n'y
   aurait de toute facon pas ete lisible -- un logo dessine pour l'en-tete
   blanc du site (.site-header, rgba(255,255,255,0.92)) disparait sur du bleu
   marine.

   On aligne donc la barre sur l'en-tete du site. Le client retrouve sa marque
   a l'identique d'une page a l'autre, et l'espace cesse de ressembler a un
   autre produit. L'accent bleu marine reste la ou il porte du sens :
   l'onglet actif du portail.
   ========================================================================== */

.site-header.vapp__bar {
	background: rgba(255, 255, 255, 0.94);
	backdrop-filter: blur(10px);
	border-bottom: 1px solid var(--border);
	box-shadow: none;
}
.site-header.vapp__bar.is-scrolled {
	background: rgba(255, 255, 255, 0.98);
	box-shadow: var(--shadow-header);
}

.vapp__bar-inner { min-height: 66px; }

/* Le logo depose par l'entreprise. Un peu plus bas que sur le site vitrine :
   la barre de l'espace est volontairement plus fine. */
.vapp__logo img.custom-logo { height: 40px; width: auto; max-width: 180px; object-fit: contain; }
.vapp__logo .site-logo__text { color: var(--navy); }
.vapp__logo .site-logo__mark { color: var(--gold-texte); }

.vapp__mention {
	border-left-color: var(--border);
	color: var(--text-2);
}

.vapp__qui {
	background: var(--mist);
	color: var(--navy);
}
.vapp__qui svg { color: var(--horizon); }

.vapp__retour { color: var(--text-2); }
.vapp__retour:hover,
.vapp__retour:focus-visible { color: var(--horizon-texte); background: var(--mist); }

.vapp__menu-btn span:not(.sr-only) { background: var(--navy); }

/* Lien de connexion sans mot de passe, mis en avant apres un refus.
   Un client a qui l'on repond « mot de passe incorrect » alors qu'il est sur
   du sien n'a plus d'issue si l'alternative reste repliee. */
.vauth__lien.is-mis-en-avant {
	border: 1px solid var(--horizon);
	background: var(--mist);
	border-radius: var(--radius-sm);
	padding: var(--space-3) var(--space-4);
}
.vauth__lien.is-mis-en-avant > summary { color: var(--horizon-texte); font-weight: 700; }
.vauth__lien.is-mis-en-avant .vauth__lien-aide { color: var(--navy); }

/* ==========================================================================
   REGLEMENT AVANT PRISE EN CHARGE — l'ecran de blocage du convoyeur
   --------------------------------------------------------------------------
   Le convoyeur est devant le vehicule, souvent presse. L'avertissement doit
   se lire d'un coup d'oeil et ne pas pouvoir passer pour un detail : c'est
   la seule chose qui l'empeche de partir avec un vehicule non regle.
   ========================================================================== */

.vconv__bloque {
	border-left: 4px solid var(--gold-dark);
	background: linear-gradient(180deg, rgba(232, 195, 106, .16), rgba(232, 195, 106, .06));
}
.vconv__bloque h3 {
	display: flex; align-items: center; gap: 9px;
	color: var(--gold-texte);
}
.vconv__bloque h3 svg { flex-shrink: 0; }
.vconv__bloque-texte { color: var(--navy); margin: 0 0 var(--space-3); }
.vconv__bloque-liste {
	margin: 0 0 var(--space-3); padding-left: 20px;
	color: var(--gold-texte); font-weight: 600;
}
.vconv__bloque-liste li { margin-bottom: 4px; }
.vconv__bloque-suite { color: var(--text-2); font-size: var(--text-sm); margin: 0; }

/* La signature du client, prise sur le telephone du convoyeur. On la
   distingue nettement de celle du convoyeur : deux cadres identiques cote a
   cote sur un petit ecran, et l'un signe a la place de l'autre. */
.vconv__signature--client {
	border: 1px solid var(--horizon);
	background: var(--mist);
}
.vconv__signature--client .vconv__signature-titre { color: var(--horizon-texte); }

/* ==========================================================================
   PAIEMENT PAR CARTE DANS LA PAGE
   --------------------------------------------------------------------------
   L'emplacement est volontairement neutre : Stripe y insere ses propres
   fenetres, et l'on ne peut pas styler ce qu'elles contiennent -- c'est
   precisement ce qui garantit que ce site ne voit jamais un numero de carte.
   On habille donc le pourtour, pas les champs.
   ========================================================================== */

.vcarte { display: block; }
.vcarte__champs { margin: var(--space-4) 0 var(--space-3); min-height: 48px; }
.vcarte__attente { color: var(--text-2); font-size: var(--text-sm); margin: 0; }
.vcarte__payer { width: 100%; justify-content: center; }
.vcarte__retour:empty { display: none; }
.vcarte__retour { margin-top: var(--space-3); }

.vcarte__mention {
	display: flex; align-items: flex-start; gap: 8px;
	margin: var(--space-3) 0 0; padding: 10px 12px;
	background: var(--mist); border-radius: var(--radius-sm);
	font-size: 12.5px; line-height: 1.5; color: var(--text-2);
}
.vcarte__mention svg { flex-shrink: 0; margin-top: 2px; color: var(--lagoon-dark); }

/* ==========================================================================
   « REGLER LA FACTURE » — la meme action, partout ou la dette apparait
   --------------------------------------------------------------------------
   Vue d'ensemble, onglet Paiements, onglet Mes documents : trois endroits ou
   le client constate qu'il doit quelque chose. Chacun porte desormais le
   bouton qui mene au paiement, plutot qu'une phrase le renvoyant chercher
   ailleurs.
   ========================================================================== */

.vnotif--facture {
	border-left: 3px solid var(--gold-dark);
	background: linear-gradient(180deg, rgba(232, 195, 106, .18), rgba(232, 195, 106, .07));
}
.vnotif--facture strong { color: var(--gold-texte); }
.vnotif--facture > svg { color: var(--gold-fonce); }

.vpay__regler {
	display: inline-flex; align-items: center; gap: 7px;
	margin-top: var(--space-3); padding: 7px 14px;
	font-size: 13px;
}
.vpay__regler svg { flex-shrink: 0; }

.vdoc-groupe__du {
	display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
	margin: 0; padding: var(--space-3) var(--space-4);
	background: rgba(232, 195, 106, .14);
	border-bottom: 1px solid var(--border);
	font-size: var(--text-sm); color: var(--gold-texte);
}
.vdoc-groupe__du svg { flex-shrink: 0; }
.vdoc-groupe__lien {
	background: none; border: 0; padding: 0; cursor: pointer;
	font: inherit; color: var(--horizon-texte); font-weight: 700;
	text-decoration: underline;
}
.vdoc-groupe__lien:hover { color: var(--navy); }

/* La carte visee par un renvoi se signale un instant, sinon on ne sait pas
   ou l'on vient d'atterrir. */
.vmission.is-highlighted,
.vc-thread.is-highlighted {
	outline: 2px solid var(--horizon);
	outline-offset: 3px;
	transition: outline-color .3s ease;
}

/* ==========================================================================
   Grille tarifaire — formules, barème, majorations
   --------------------------------------------------------------------------
   Tout ce bloc sert un seul objectif : rendre le prix VÉRIFIABLE. Le barème
   est un tableau, pas une suite de cartes, parce qu'un professionnel qui
   compare trois formules lit en colonnes. Les chiffres sont en chasse fixe et
   alignés sur la virgule, sans quoi 1 127 € et 80 € ne se comparent pas d'un
   coup d'œil.
   ========================================================================== */

/* --- Les trois formules, côte à côte --- */

.vformules {
	display: grid; gap: var(--space-5);
	grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
	margin-top: var(--space-7); align-items: stretch;
}

.vformule {
	position: relative; display: flex; flex-direction: column;
	background: var(--cloud); border: 1px solid var(--border);
	border-radius: var(--radius-md); padding: var(--space-6) var(--space-5) var(--space-5);
	text-align: center;
}

/* Une seule formule est mise en avant : deux cartes en relief ne hiérarchisent
   plus rien. Le liseré doré marque la plus demandée, pas la plus chère. */
.vformule--phare {
	border-color: var(--gold-fonce); border-width: 2px;
	box-shadow: var(--shadow-card);
}

.vformule__ruban {
	position: absolute; top: 0; left: 50%; transform: translate(-50%, -50%);
	background: var(--gold); color: var(--navy);
	font-family: var(--font-mono); font-size: var(--text-2xs);
	letter-spacing: 0.08em; text-transform: uppercase;
	padding: 5px 14px; border-radius: 999px; margin: 0; white-space: nowrap;
}

.vformule__nom {
	font-family: var(--font-display); font-size: var(--text-2xl);
	margin: 0 0 var(--space-1); color: var(--ink);
}

.vformule__delai {
	font-family: var(--font-mono); font-size: var(--text-xs);
	letter-spacing: 0.05em; color: var(--horizon-texte);
	margin: 0 0 var(--space-5);
}

.vformule__prix { margin: 0 0 var(--space-4); display: grid; gap: 2px; }

.vformule__apartir,
.vformule__jusqua {
	font-size: var(--text-2xs); color: var(--steel);
	letter-spacing: 0.04em; text-transform: uppercase;
}

.vformule__prix strong {
	font-family: var(--font-display); font-size: var(--text-4xl);
	color: var(--ink); line-height: 1; font-variant-numeric: tabular-nums;
}

.vformule__promesse {
	margin: auto 0 0; font-size: var(--text-sm); color: var(--steel);
	line-height: 1.5;
}

/* --- Le choix de catégorie --- */

.vbareme__choix {
	display: flex; flex-wrap: wrap; gap: var(--space-2);
	justify-content: center; margin-top: var(--space-6);
}

.vbareme__onglet {
	padding: 9px 18px; border-radius: 999px; text-decoration: none;
	border: 1.5px solid var(--border); color: var(--steel);
	font-size: var(--text-sm); font-weight: 600; background: var(--cloud);
}

.vbareme__onglet:hover { border-color: var(--horizon); color: var(--horizon-texte); }

.vbareme__onglet.is-actif {
	background: var(--navy); border-color: var(--navy); color: #fff;
}

.vbareme__onglet:focus-visible { outline: 2px solid var(--horizon); outline-offset: 3px; }

.vbareme__precision {
	text-align: center; font-size: var(--text-sm); color: var(--steel);
	max-width: 58ch; margin: var(--space-4) auto var(--space-5);
}

/* --- Le barème lui-même --- */

/* Le tableau déborde dans SON cadre, jamais dans la page : trois colonnes de
   prix ne tiennent pas sur un téléphone, et c'est le corps entier qui se
   mettrait à défiler de côté. */
.vbareme__cadre {
	overflow-x: auto; -webkit-overflow-scrolling: touch;
	background: var(--cloud); border: 1px solid var(--border);
	border-radius: var(--radius-md); margin-bottom: var(--space-5);
}

.vbareme {
	width: 100%; border-collapse: collapse; min-width: 420px;
	font-size: var(--text-base);
}

.vbareme__legende {
	caption-side: top; text-align: left;
	padding: var(--space-4) var(--space-5) var(--space-2);
	font-family: var(--font-mono); font-size: var(--text-2xs);
	letter-spacing: 0.09em; text-transform: uppercase; color: var(--steel);
}

.vbareme thead th {
	text-align: right; padding: var(--space-3) var(--space-5);
	font-family: var(--font-display); font-size: var(--text-sm);
	color: var(--ink); border-bottom: 2px solid var(--navy);
	white-space: nowrap;
}

.vbareme thead th:first-child { text-align: left; }

.vbareme tbody th {
	text-align: left; font-weight: 500; color: var(--ink);
	padding: var(--space-3) var(--space-5);
	border-bottom: 1px solid var(--border);
}

.vbareme tbody th span {
	display: block; font-size: var(--text-2xs); color: var(--steel);
	font-weight: 400; letter-spacing: 0.03em;
}

.vbareme td {
	padding: var(--space-3) var(--space-5);
	border-bottom: 1px solid var(--border);
	text-align: right; white-space: nowrap;
}

.vnum {
	font-family: var(--font-mono); font-variant-numeric: tabular-nums;
	color: var(--ink);
}

.vbareme__unite { font-size: var(--text-2xs); color: var(--steel); }

/* La ligne du forfait ouvre le barème : c'est le seul montant que paient tous
   les trajets, elle mérite d'être détachée du reste. */
.vbareme__forfait th,
.vbareme__forfait td {
	background: var(--mist); border-bottom: 1px solid var(--horizon);
}

.vbareme__forfait td { font-weight: 600; }

.vbareme tbody tr:last-child th,
.vbareme tbody tr:last-child td { border-bottom: 0; }

.vbareme--exemples td { font-weight: 600; }

.vbareme__erreur {
	padding: var(--space-5); background: #FDF3E3; border-radius: var(--radius-md);
	color: var(--gold-texte); font-size: var(--text-sm);
}

/* --- Majorations et remises --- */

.vsupp {
	display: grid; gap: var(--space-6);
	grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
	margin-top: var(--space-6);
}

.vsupp__col h3 {
	font-family: var(--font-display); font-size: var(--text-lg);
	margin: 0 0 var(--space-4); padding-bottom: var(--space-2);
	border-bottom: 2px solid var(--gold); color: var(--ink);
}

.vsupp__liste { margin: 0; display: grid; gap: var(--space-3); }

.vsupp__liste > div {
	display: flex; justify-content: space-between; align-items: baseline;
	gap: var(--space-4);
}

.vsupp__liste dt { color: var(--ink); font-size: var(--text-sm); }

.vsupp__liste dd {
	margin: 0; font-family: var(--font-mono); font-variant-numeric: tabular-nums;
	font-weight: 600; color: var(--horizon-texte); white-space: nowrap;
}

.vsupp__note {
	margin: var(--space-4) 0 0; font-size: var(--text-xs);
	color: var(--steel); line-height: 1.55;
}

/* --- Compris / non compris --- */

.vcompris {
	display: grid; gap: var(--space-6);
	grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
	margin-top: var(--space-6);
}

.vcompris__col h3 {
	font-family: var(--font-display); font-size: var(--text-lg);
	margin: 0 0 var(--space-4); color: var(--ink);
}

.vcompris__col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-3); }

.vcompris__col li {
	display: grid; grid-template-columns: 1.3rem 1fr; gap: var(--space-2);
	font-size: var(--text-sm); color: var(--steel); line-height: 1.5;
}

.vcompris__col li::before { font-family: var(--font-mono); font-weight: 600; }
.vcompris__col--oui li::before { content: "+"; color: var(--horizon); }
.vcompris__col--non li::before { content: "\2013"; color: var(--gold-texte); }

.vcompris__horsbareme {
	margin: var(--space-6) 0 0; padding: var(--space-4) var(--space-5);
	background: var(--mist); border-radius: var(--radius-md);
	font-size: var(--text-sm); color: var(--ink); line-height: 1.6;
}

@media (max-width: 560px) {
	.vformule { padding: var(--space-6) var(--space-4) var(--space-4); }
	.vbareme thead th,
	.vbareme tbody th,
	.vbareme td { padding-left: var(--space-3); padding-right: var(--space-3); }
	.vbareme__legende { padding-left: var(--space-3); padding-right: var(--space-3); }
}

/* --- Les options qui changent le prix, dans le formulaire de devis ---
   Elles sont cochables, donc elles doivent annoncer leur effet AVANT d'être
   cochées : un client qui découvre « +15 % » après coup se sent piégé, même
   quand le chiffre était juste. */

.vf-options {
	border: 1px solid var(--border); border-radius: var(--radius-sm);
	padding: var(--space-4) var(--space-4) var(--space-3);
	margin: 0 0 var(--space-4); display: grid; gap: var(--space-2);
	background: var(--cloud);
}

.vf-options legend {
	font-family: var(--font-mono); font-size: var(--text-2xs);
	letter-spacing: 0.08em; text-transform: uppercase; color: var(--steel);
	padding: 0 var(--space-2);
}

.vf-case {
	display: grid; grid-template-columns: 1.1rem 1fr; gap: var(--space-3);
	align-items: start; cursor: pointer; font-size: var(--text-sm);
	color: var(--ink); line-height: 1.45; padding: 3px 0;
}

.vf-case input { margin-top: 3px; accent-color: var(--horizon); }

.vf-case__effet {
	display: inline-block; margin-left: var(--space-2);
	font-family: var(--font-mono); font-size: var(--text-2xs);
	background: var(--mist); color: var(--horizon-texte);
	padding: 2px 8px; border-radius: 999px; white-space: nowrap;
}

.vf-case--alerte .vf-case__effet {
	background: #FDF3E3; color: var(--gold-texte);
}

.vf-case input:focus-visible { outline: 2px solid var(--horizon); outline-offset: 2px; }

/* Lignes particulières du détail du devis. */
.vf-sous-total { font-weight: 600; }
.vf-remise span:last-child { color: var(--lagoon-dark); font-weight: 600; }

.vf-surmesure {
	display: block; padding: var(--space-3) 0; line-height: 1.5;
	color: var(--gold-texte); font-size: var(--text-sm);
}

/* ==========================================================================
   Espace professionnel
   --------------------------------------------------------------------------
   Une page d'outil, pas une page de lecture : elle se balaie du regard et on
   y agit. Les chiffres du haut répondent aux quatre questions qu'un
   gestionnaire de flotte se pose en ouvrant son écran — combien en cours,
   combien engagé, combien ce mois, quelle remise —, et le reste est un
   tableau. L'accent reprend la couleur de marque du client quand il en a
   choisi une : c'est la variable --vpro-accent, posée en ligne sur .vpro.
   ========================================================================== */

.vpro-page { padding-bottom: var(--space-8); }

.vpro { --vpro-accent: var(--horizon); }

/* --- Messages --- */

.vpro-succes,
.vpro-erreur {
	padding: var(--space-4) var(--space-5); border-radius: var(--radius-sm);
	font-size: var(--text-sm); line-height: 1.55; margin: 0 0 var(--space-6);
}
.vpro-succes { background: #E7F4EC; color: #1B5E32; border-left: 4px solid #2E8B57; }
.vpro-erreur { background: #FDECEA; color: #8A1C13; border-left: 4px solid #C0392B; }

.vpro-note {
	background: var(--mist); border-radius: var(--radius-md);
	padding: var(--space-5); font-size: var(--text-sm);
}

/* --- L'accueil : argumentaire + inscription --- */

.vpro-accueil__grille {
	display: grid; gap: var(--space-7);
	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
	margin-top: var(--space-7); align-items: start;
}

.vpro-argumentaire h2,
.vpro-inscription h2 {
	font-family: var(--font-display); font-size: var(--text-2xl);
	margin: 0 0 var(--space-5); color: var(--ink);
}

.vpro-atouts { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-5); }

.vpro-atouts li {
	font-size: var(--text-base); line-height: 1.6; color: var(--steel);
	padding-left: var(--space-5); border-left: 2px solid var(--gold);
}
.vpro-atouts strong { display: block; color: var(--ink); margin-bottom: 2px; }

.vpro-inscription {
	background: var(--cloud); border: 1px solid var(--border);
	border-radius: var(--radius-md); padding: var(--space-6);
	box-shadow: var(--shadow-card);
}

.vpro-inscription__lede {
	margin: -8px 0 var(--space-5); font-size: var(--text-sm); color: var(--steel);
}

.vpro-inscription__deja {
	margin: var(--space-5) 0 0; padding-top: var(--space-4);
	border-top: 1px solid var(--border);
	font-size: var(--text-sm); color: var(--steel);
}

/* --- Formulaires --- */

.vpro-form { display: grid; gap: var(--space-4); }
.vpro-form__duo { display: grid; gap: var(--space-4); grid-template-columns: 1fr 1fr; }
.vpro-form__ligne { display: grid; gap: 5px; }

.vpro-form label {
	font-size: var(--text-sm); font-weight: 600; color: var(--ink);
}
.vpro-form label span { font-weight: 400; color: var(--steel); }

.vpro-form input,
.vpro-form select {
	width: 100%; padding: 11px 13px; font: inherit; font-size: var(--text-base);
	border: 1.5px solid var(--border); border-radius: var(--radius-sm);
	background: #fff; color: var(--ink);
}
.vpro-form input:focus,
.vpro-form select:focus {
	outline: none; border-color: var(--horizon);
	box-shadow: 0 0 0 3px rgba(37, 137, 222, 0.16);
}

.vpro-form__aide { font-size: var(--text-xs); color: var(--steel); line-height: 1.45; }

.vpro-form__legal {
	margin: 0; font-size: var(--text-xs); color: var(--steel); line-height: 1.5;
}

.vpro-form button { justify-self: start; }

/* --- En attente d'accès --- */

.vpro-attente {
	max-width: 62ch; margin: var(--space-7) auto 0; text-align: center;
	background: var(--cloud); border: 1px solid var(--border);
	border-radius: var(--radius-md); padding: var(--space-7) var(--space-6);
}
.vpro-attente h2 { font-family: var(--font-display); margin: 0 0 var(--space-4); }
.vpro-attente__liste {
	list-style: none; margin: var(--space-4) 0; padding: 0;
	display: grid; gap: var(--space-2); text-align: left;
}
.vpro-attente__liste li {
	background: var(--mist); border-radius: var(--radius-sm);
	padding: 10px 14px; font-size: var(--text-sm); color: var(--ink);
}
.vpro-attente__note { font-size: var(--text-sm); color: var(--steel); margin-bottom: 0; }

/* --- Le portail --- */

.vpro__tete {
	display: flex; flex-wrap: wrap; gap: var(--space-4);
	align-items: flex-end; justify-content: space-between;
	padding-bottom: var(--space-5); border-bottom: 3px solid var(--vpro-accent);
}

.vpro__metier {
	margin: 0 0 2px; font-family: var(--font-mono); font-size: var(--text-2xs);
	letter-spacing: 0.09em; text-transform: uppercase; color: var(--vpro-accent);
}
.vpro__societe {
	margin: 0; font-family: var(--font-display); font-size: var(--text-3xl);
	color: var(--ink); line-height: 1.15;
}
.vpro__deconnexion { font-size: var(--text-sm); color: var(--steel); }

.vpro__chiffres {
	display: grid; gap: 1px; margin: var(--space-6) 0 0;
	grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
	background: var(--border); border: 1px solid var(--border);
	border-radius: var(--radius-md); overflow: hidden;
}
.vpro__chiffre { background: var(--cloud); padding: var(--space-5) var(--space-4); }
.vpro__chiffre--actif { background: var(--mist); }

.vpro__valeur {
	display: block; font-family: var(--font-display); font-size: var(--text-2xl);
	font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums;
	line-height: 1.1;
}
.vpro__chiffre--actif .vpro__valeur { color: var(--vpro-accent); }
.vpro__etiquette {
	display: block; margin-top: 3px; font-size: var(--text-xs);
	color: var(--steel); line-height: 1.35;
}

.vpro__onglets {
	display: flex; flex-wrap: wrap; gap: var(--space-2);
	margin: var(--space-6) 0 var(--space-5);
	border-bottom: 1px solid var(--border);
}
.vpro__onglet {
	padding: 11px 16px; text-decoration: none; font-size: var(--text-base);
	font-weight: 600; color: var(--steel); border-bottom: 3px solid transparent;
	margin-bottom: -1px;
}
.vpro__onglet:hover { color: var(--ink); }
.vpro__onglet.is-actif { color: var(--ink); border-bottom-color: var(--vpro-accent); }
.vpro__onglet:focus-visible { outline: 2px solid var(--horizon); outline-offset: 2px; }

/* --- Tableaux --- */

.vpro-tableau__cadre {
	overflow-x: auto; -webkit-overflow-scrolling: touch;
	border: 1px solid var(--border); border-radius: var(--radius-md);
	background: var(--cloud);
}
.vpro-tableau { width: 100%; border-collapse: collapse; min-width: 640px; font-size: var(--text-sm); }

.vpro-tableau thead th {
	text-align: left; padding: var(--space-3) var(--space-4);
	font-family: var(--font-mono); font-size: var(--text-2xs);
	letter-spacing: 0.07em; text-transform: uppercase; color: var(--steel);
	border-bottom: 2px solid var(--vpro-accent); white-space: nowrap;
}
.vpro-tableau td {
	padding: var(--space-4); border-bottom: 1px solid var(--border);
	vertical-align: top; color: var(--ink);
}
.vpro-tableau tbody tr:last-child td { border-bottom: 0; }

.vpro-tableau__immat,
.vpro-tableau__delai {
	display: block; font-family: var(--font-mono); font-size: var(--text-2xs);
	color: var(--steel); margin-top: 2px;
}
.vpro-tableau__fleche { color: var(--vpro-accent); padding: 0 4px; }
.vpro-tableau__montant {
	font-family: var(--font-mono); font-variant-numeric: tabular-nums;
	font-weight: 600; white-space: nowrap;
}
.vpro-tableau__signe { font-size: var(--text-xs); color: var(--steel); }
.vpro-tableau__note {
	margin: var(--space-4) 0 0; font-size: var(--text-sm); color: var(--steel);
}

.vpro-etape {
	display: inline-block; padding: 3px 10px; border-radius: 999px;
	background: var(--mist); color: var(--horizon-texte);
	font-size: var(--text-xs); font-weight: 600; white-space: nowrap;
}

.vpro-etat {
	display: inline-block; padding: 3px 10px; border-radius: 999px;
	font-size: var(--text-xs); font-weight: 600; white-space: nowrap;
	background: var(--mist); color: var(--horizon-texte);
}
.vpro-etat--signe { background: #E7F4EC; color: #1B5E32; }
.vpro-etat--propose { background: #FDF3E3; color: var(--gold-texte); }
.vpro-etat--expire,
.vpro-etat--resilie { background: #EEF1F4; color: var(--steel); }

.vpro-lien { font-weight: 600; color: var(--horizon-texte); }

/* --- Vide --- */

.vpro-vide {
	text-align: center; padding: var(--space-8) var(--space-5);
	background: var(--cloud); border: 1px dashed var(--border);
	border-radius: var(--radius-md); color: var(--steel);
}
.vpro-vide p { margin: 0 0 var(--space-3); }
.vpro-vide p:last-child { margin-bottom: 0; margin-top: var(--space-5); }

/* --- Devis --- */

.vpro-devis__lede {
	margin: 0 0 var(--space-5); font-size: var(--text-base);
	color: var(--steel); line-height: 1.6; max-width: 66ch;
}

/* --- Contrats --- */

.vpro-contrats { display: grid; gap: var(--space-7); }

.vpro-cadre {
	background: var(--cloud); border: 1px solid var(--border);
	border-left: 4px solid var(--vpro-accent);
	border-radius: var(--radius-md); padding: var(--space-6);
}
.vpro-cadre--absent { border-left-color: var(--border); border-left-style: dashed; }

.vpro-cadre__etiquette {
	margin: 0 0 4px; font-family: var(--font-mono); font-size: var(--text-2xs);
	letter-spacing: 0.09em; text-transform: uppercase; color: var(--steel);
}
.vpro-cadre h3 {
	margin: 0 0 var(--space-4); font-family: var(--font-display);
	font-size: var(--text-xl); color: var(--ink);
}

.vpro-cadre__conditions {
	display: grid; gap: var(--space-4); margin: 0 0 var(--space-4);
	grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
}
.vpro-cadre__conditions dt {
	font-size: var(--text-2xs); letter-spacing: 0.05em; text-transform: uppercase;
	color: var(--steel); margin-bottom: 2px;
}
.vpro-cadre__conditions dd {
	margin: 0; font-weight: 600; color: var(--ink); font-size: var(--text-base);
}

.vpro-cadre__note,
.vpro-signature__mention {
	margin: 0; font-size: var(--text-xs); color: var(--steel); line-height: 1.55;
}

.vpro-contrats__liste h3 {
	font-family: var(--font-display); font-size: var(--text-xl);
	margin: 0 0 var(--space-4); color: var(--ink);
}

.vpro-signature {
	background: var(--mist); border-radius: var(--radius-md);
	padding: var(--space-6); scroll-margin-top: 90px;
}
.vpro-signature h3 {
	margin: 0 0 var(--space-4); font-family: var(--font-display);
	font-size: var(--text-xl); color: var(--ink);
}
.vpro-signature__objet {
	background: var(--cloud); border-radius: var(--radius-sm);
	padding: var(--space-4); font-size: var(--text-sm); line-height: 1.6;
	margin: 0 0 var(--space-5);
}
.vpro-signature .vpro-form input { background: #fff; }

@media (max-width: 560px) {
	.vpro-form__duo { grid-template-columns: 1fr; }
	.vpro__societe { font-size: var(--text-2xl); }
	.vpro__onglet { padding: 10px 12px; font-size: var(--text-sm); }
	.vpro-inscription { padding: var(--space-5) var(--space-4); }
}

/* --- Le logo Voyaliste dans l'espace professionnel ---
   Le portail est peint à la couleur du client et porte sa raison sociale en
   gros : sans repère, on ne sait plus chez qui on est. La signature se pose
   donc au-dessus, plus petite que le nom du client — c'est son écran, notre
   service. */

.vpro__signature {
	margin-bottom: var(--space-5);
	padding-bottom: var(--space-4);
}
.vpro__signature img.custom-logo { height: 34px; }
.vpro__signature .site-logo__text { font-size: 1.05rem; }

/* Sur la carte d'inscription et sur l'écran d'attente, le logo est centré au
   sommet : c'est le moment où l'on confie un SIRET et un mot de passe, et
   savoir à qui n'est pas décoratif. */
.vpro-inscription__logo,
.vpro-attente__logo {
	justify-content: flex-start;
	margin-bottom: var(--space-4);
	padding-bottom: var(--space-4);
	border-bottom: 1px solid var(--border);
}
.vpro-attente__logo { justify-content: center; }

.vpro-inscription__logo img.custom-logo,
.vpro-attente__logo img.custom-logo { height: 36px; }

.vpro-inscription__logo .site-logo__text,
.vpro-attente__logo .site-logo__text { font-size: 1.15rem; }

@media (max-width: 560px) {
	.vpro__signature img.custom-logo,
	.vpro-inscription__logo img.custom-logo,
	.vpro-attente__logo img.custom-logo { height: 30px; }
}

/* --- Le raccourci vers l'espace professionnel ---
   Ce n'est pas un onglet : il quitte la page. Il en porte donc l'allure pour
   rester dans la colonne, mais s'en détache par un filet au-dessus et par la
   flèche qui dit qu'on s'en va. Le confondre avec un onglet ferait cliquer en
   croyant rester. */

.vportal__tab--ailleurs {
	display: flex; align-items: center; gap: 10px;
	text-decoration: none;
	margin-top: var(--space-3);
	padding-top: var(--space-4);
	border-top: 1px solid rgba(255, 255, 255, .16);
}

.vportal__ailleurs {
	margin-left: auto; font-style: normal; opacity: .7; font-size: 13px;
}

.vportal__tab--ailleurs:hover .vportal__ailleurs { opacity: 1; }

/* --- Les tarifs vus du côté professionnel --- */

.vpro-tarifs { display: grid; gap: var(--space-7); }

.vpro-tarifs__bandeau {
	margin: 0; padding: var(--space-4) var(--space-5);
	background: var(--mist); border-left: 4px solid var(--vpro-accent);
	border-radius: var(--radius-sm);
	font-size: var(--text-sm); line-height: 1.6; color: var(--ink);
}
.vpro-tarifs__bandeau--neutre { border-left-color: var(--border); }

.vpro-tarifs__bloc h3 {
	font-family: var(--font-display); font-size: var(--text-xl);
	margin: 0 0 var(--space-3); color: var(--ink);
}

.vpro-tarifs__lede {
	margin: 0 0 var(--space-5); font-size: var(--text-sm);
	color: var(--steel); line-height: 1.6; max-width: 70ch;
}

.vpro-offres {
	display: grid; gap: var(--space-4);
	grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
}

.vpro-offre {
	background: var(--cloud); border: 1px solid var(--border);
	border-top: 3px solid var(--vpro-accent);
	border-radius: var(--radius-md); padding: var(--space-5);
}

.vpro-offre h4 {
	margin: 0 0 2px; font-family: var(--font-display);
	font-size: var(--text-lg); color: var(--ink);
}

.vpro-offre__delai {
	margin: 0 0 var(--space-4); font-family: var(--font-mono);
	font-size: var(--text-2xs); letter-spacing: .05em;
	text-transform: uppercase; color: var(--steel);
}

.vpro-offre__prix { margin: 0 0 var(--space-3); display: grid; gap: 2px; }
.vpro-offre__prix > span:first-child {
	font-size: var(--text-2xs); text-transform: uppercase;
	letter-spacing: .04em; color: var(--steel);
}
.vpro-offre__prix strong {
	font-family: var(--font-display); font-size: var(--text-2xl);
	color: var(--ink); line-height: 1; font-variant-numeric: tabular-nums;
}

/* Le prix barré ne s'affiche que s'il y a une remise : barrer un prix qui
   n'a pas bougé est un procédé de camelot, et un professionnel le voit. */
.vpro-offre__barre,
.vpro-tableau__barre {
	font-size: var(--text-xs); color: var(--steel);
	text-decoration: line-through; font-variant-numeric: tabular-nums;
}
.vpro-tableau__barre { display: block; margin-top: 1px; }

.vpro-offre__promesse {
	margin: 0; font-size: var(--text-xs); color: var(--steel); line-height: 1.5;
}

.vpro-tableau--tarifs tbody th { font-weight: 600; white-space: nowrap; }
.vpro-tableau--tarifs td { text-align: right; }

/* --- L'espace réservé --- */

.vpro-reserve {
	max-width: 62ch; margin: var(--space-7) auto 0; text-align: center;
	background: var(--cloud); border: 1px solid var(--border);
	border-radius: var(--radius-md); padding: var(--space-7) var(--space-6);
}

.vpro-reserve h2 {
	font-family: var(--font-display); font-size: var(--text-2xl);
	margin: 0 0 var(--space-4); color: var(--ink);
}

.vpro-reserve__lede {
	font-size: var(--text-base); color: var(--steel);
	line-height: 1.65; margin: 0 0 var(--space-5);
}

.vpro-reserve__metiers {
	list-style: none; margin: 0 0 var(--space-6); padding: 0;
	display: flex; flex-wrap: wrap; gap: var(--space-2);
	justify-content: center;
}
.vpro-reserve__metiers li {
	background: var(--mist); color: var(--horizon-texte);
	border-radius: 999px; padding: 5px 14px;
	font-size: var(--text-xs); font-weight: 600;
}

.vpro-reserve__actions {
	display: flex; flex-wrap: wrap; gap: var(--space-3);
	justify-content: center; margin-bottom: var(--space-5);
}

.vpro-reserve__note {
	margin: 0; font-size: var(--text-sm); color: var(--steel); line-height: 1.6;
}

/* --- Le compte professionnel --- */

.vpro-compte { display: grid; gap: var(--space-7); }
.vpro-compte .vpro-form { max-width: 560px; }

/* --- Le renvoi vers l'espace pro, sur l'inscription client ---
   Après le formulaire, jamais avant : un particulier — la grande majorité —
   s'inscrit sans avoir à le lire. */

.vauth__pro {
	margin: var(--space-5) 0 0; padding-top: var(--space-4);
	border-top: 1px solid var(--border);
	font-size: var(--text-sm); color: var(--steel); line-height: 1.6;
}
.vauth__pro-titre { display: block; font-weight: 600; color: var(--ink); margin-bottom: 2px; }
.vauth__pro a { display: inline-block; margin-top: var(--space-2); font-weight: 600; }

/* --- L'aperçu du portail, montré avant l'inscription ---
   Il imite le portail sans en être un : rien n'y est cliquable, et l'étiquette
   dit que les chiffres sont un exemple. Un écran qui aurait l'air vivant mais
   ne répondrait pas ferait croire à une panne. */

.vpro-apercu { margin: var(--space-7) 0 0; }

.vpro-apercu__etiquette {
	margin: 0 0 var(--space-3);
	font-family: var(--font-mono); font-size: var(--text-2xs);
	letter-spacing: 0.09em; text-transform: uppercase; color: var(--gold-texte);
}
.vpro-apercu__etiquette span { color: var(--steel); letter-spacing: 0.04em; }

/* L'écran est légèrement en retrait et non sélectionnable : on le regarde,
   on ne s'en sert pas. */
.vpro-apercu__ecran {
	background: var(--cloud); border: 1px solid var(--border);
	border-radius: var(--radius-md); padding: var(--space-5);
	box-shadow: var(--shadow-card);
	user-select: none; overflow-x: auto;
}

.vpro-apercu__tete {
	display: flex; flex-wrap: wrap; gap: var(--space-3);
	align-items: flex-end; justify-content: space-between;
	padding-bottom: var(--space-4); border-bottom: 3px solid var(--horizon);
}
.vpro-apercu__metier {
	display: block; font-family: var(--font-mono); font-size: var(--text-2xs);
	letter-spacing: 0.09em; text-transform: uppercase; color: var(--horizon-texte);
}
.vpro-apercu__societe {
	display: block; font-family: var(--font-display);
	font-size: var(--text-2xl); color: var(--ink); line-height: 1.15;
}
.vpro-apercu__sortie { font-size: var(--text-xs); color: var(--steel-light); }

.vpro-apercu__chiffres {
	display: grid; gap: 1px; margin: var(--space-5) 0 0;
	grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
	background: var(--border); border: 1px solid var(--border);
	border-radius: var(--radius-sm); overflow: hidden;
}
.vpro-apercu__chiffres > div { background: var(--cloud); padding: var(--space-4) var(--space-3); }
.vpro-apercu__chiffre--actif { background: var(--mist) !important; }

.vpro-apercu__valeur {
	display: block; font-family: var(--font-display); font-size: var(--text-xl);
	font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums;
	line-height: 1.1;
}
.vpro-apercu__chiffre--actif .vpro-apercu__valeur { color: var(--horizon-texte); }
.vpro-apercu__etiq {
	display: block; margin-top: 2px; font-size: var(--text-2xs);
	color: var(--steel); line-height: 1.3;
}

.vpro-apercu__onglets {
	display: flex; flex-wrap: wrap; gap: var(--space-3);
	margin: var(--space-5) 0 0; padding-bottom: var(--space-2);
	border-bottom: 1px solid var(--border);
}
.vpro-apercu__onglets span {
	font-size: var(--text-xs); font-weight: 600; color: var(--steel-light);
	padding-bottom: var(--space-2); border-bottom: 2px solid transparent;
	white-space: nowrap;
}
.vpro-apercu__onglets .is-actif {
	color: var(--ink); border-bottom-color: var(--horizon);
}

.vpro-apercu__tableau { margin-top: var(--space-4); min-width: 560px; }

.vpro-apercu__ligne {
	display: grid; gap: var(--space-3);
	grid-template-columns: 1.3fr 1.7fr 1fr 0.9fr 0.8fr;
	padding: var(--space-3) 0; border-bottom: 1px solid var(--border);
	font-size: var(--text-xs); color: var(--ink); align-items: start;
}
.vpro-apercu__ligne:last-child { border-bottom: 0; }

.vpro-apercu__ligne--tete {
	font-family: var(--font-mono); font-size: var(--text-2xs);
	letter-spacing: 0.06em; text-transform: uppercase; color: var(--steel);
	border-bottom: 2px solid var(--horizon); padding-bottom: var(--space-2);
}

.vpro-apercu__ligne strong { display: block; font-weight: 600; }
.vpro-apercu__ligne em {
	display: block; font-style: normal; font-family: var(--font-mono);
	font-size: var(--text-2xs); color: var(--steel); margin-top: 1px;
}

.vpro-apercu__etape {
	display: inline-block; font-style: normal;
	background: var(--mist); color: var(--horizon-texte);
	border-radius: 999px; padding: 2px 9px;
	font-size: var(--text-2xs); font-weight: 600; white-space: nowrap;
}

.vpro-apercu__prix {
	text-align: right; font-family: var(--font-mono);
	font-variant-numeric: tabular-nums; font-weight: 600; white-space: nowrap;
}

.vpro-apercu__note {
	margin: var(--space-3) 0 0; font-size: var(--text-xs);
	color: var(--steel); line-height: 1.55; max-width: 74ch;
}

@media (max-width: 560px) {
	.vpro-apercu__ecran { padding: var(--space-4) var(--space-3); }
	.vpro-apercu__societe { font-size: var(--text-lg); }
}

/* =========================================================================
   LA PAGE TARIFS SIMPLIFIEE

   Elle a porte deux baremes complets, quatre tranches chacun, les majorations
   et les exclusions. Un particulier n'ouvre pas une page de prix pour lire une
   grille d'imposition. Le detail a donc demenage dans l'espace professionnel
   et il ne reste ici que trois offres, trois phrases et cinq exemples : d'ou
   ces classes, qui n'existaient pas.
   ========================================================================= */

.vtarifs__socle {
	max-width: 62ch; margin: var(--space-6) auto 0; text-align: center;
	font-size: var(--text-sm); line-height: 1.65; color: var(--steel);
}
.vtarifs__socle strong { color: var(--ink); }

.vtarifs__simple {
	display: grid; gap: var(--space-5); margin: 0 auto var(--space-7);
	max-width: 980px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}

/* Le chiffre compte vraiment : les trois phrases forment une suite, la
   deuxieme ne se lit pas sans la premiere. La numerotation n'est pas un
   ornement, elle dit l'ordre. */
.vtarifs__point {
	display: grid; gap: var(--space-3); align-content: start;
	padding: var(--space-5); background: var(--cloud);
	border: 1px solid var(--border); border-radius: var(--radius-md);
	box-shadow: var(--shadow-card);
}
.vtarifs__point p {
	margin: 0; font-size: var(--text-sm); line-height: 1.65; color: var(--steel);
}
.vtarifs__point strong { color: var(--ink); }

.vtarifs__num {
	display: inline-grid; place-items: center;
	width: 34px; height: 34px; border-radius: 50%;
	background: var(--navy); color: var(--gold);
	font-family: var(--font-mono); font-size: var(--text-sm); font-weight: 600;
	font-variant-numeric: tabular-nums;
}

.vtarifs__pro {
	display: flex; flex-wrap: wrap; gap: var(--space-5);
	align-items: center; justify-content: center;
	max-width: 900px; margin: var(--space-6) auto 0;
	padding: var(--space-6); background: var(--cloud);
	border: 1px solid var(--border); border-radius: var(--radius-lg);
	box-shadow: var(--shadow-card);
}

.vtarifs__pro-remise {
	display: grid; gap: var(--space-2); margin: 0; flex: 1 1 320px;
}
.vtarifs__pro-remise span {
	display: flex; flex-wrap: wrap; gap: var(--space-2);
	align-items: baseline; justify-content: space-between;
	padding-bottom: var(--space-2); border-bottom: 1px dashed var(--border);
	font-size: var(--text-sm); color: var(--steel);
}
.vtarifs__pro-remise span:last-child { border-bottom: 0; padding-bottom: 0; }
.vtarifs__pro-remise strong { color: var(--ink); font-variant-numeric: tabular-nums; }
.vtarifs__pro-remise em {
	font-style: normal; font-family: var(--font-mono); font-weight: 600;
	font-size: var(--text-md); color: var(--gold-texte);
	font-variant-numeric: tabular-nums;
}

@media (max-width: 560px) {
	.vtarifs__pro { padding: var(--space-5) var(--space-4); }
	.vtarifs__pro .voyaliste-btn-gold { width: 100%; text-align: center; }
}

/* =========================================================================
   LE LOGO DEPOSE PAR LE PROFESSIONNEL
   ========================================================================= */

.vpro-tarifs__bandeau--alerte {
	border-left-color: #B3261E; background: rgba(179, 38, 30, 0.06); color: #7A1A15;
}

/* En tete du portail, a cote de la raison sociale. Hauteur bornee et
   object-fit: contain : un logo tres large ou tres haut ne doit pas pouvoir
   deformer l'en-tete, et on ne recadre jamais le logo de quelqu'un. */
.vpro__logo {
	flex: 0 0 auto; width: auto; height: 52px; max-width: 180px;
	object-fit: contain; object-position: left center;
}

.vpro-logo__zone {
	display: flex; flex-wrap: wrap; gap: var(--space-5); align-items: flex-start;
}

/* Le damier dit « transparent » sans l'ecrire : un PNG detoure se lit
   immediatement comme detoure, et un JPEG sur fond blanc se distingue de son
   cadre. */
.vpro-logo__apercu {
	flex: 0 0 auto; display: grid; place-items: center;
	width: 168px; height: 118px; padding: var(--space-3);
	border: 1px dashed var(--border); border-radius: var(--radius-md);
	background-color: var(--cloud);
	background-image:
		linear-gradient(45deg, var(--mist) 25%, transparent 25%, transparent 75%, var(--mist) 75%),
		linear-gradient(45deg, var(--mist) 25%, transparent 25%, transparent 75%, var(--mist) 75%);
	background-size: 16px 16px;
	background-position: 0 0, 8px 8px;
}
.vpro-logo__apercu img { max-width: 100%; max-height: 100%; object-fit: contain; }
.vpro-logo__vide {
	font-size: var(--text-xs); color: var(--steel-light); text-align: center;
}

.vpro-logo__form { flex: 1 1 280px; display: grid; gap: var(--space-3); }

.vpro-logo__label {
	font-size: var(--text-sm); font-weight: 600; color: var(--ink);
}

.vpro-logo__form input[type="file"] {
	width: 100%; max-width: 100%; font-size: var(--text-sm); color: var(--steel);
	padding: var(--space-3); background: var(--cloud);
	border: 1px solid var(--border); border-radius: var(--radius-sm);
}
.vpro-logo__form input[type="file"]::file-selector-button {
	margin-right: var(--space-3); padding: 6px 12px; cursor: pointer;
	font: inherit; font-size: var(--text-xs); color: var(--navy);
	background: var(--mist); border: 1px solid var(--border);
	border-radius: var(--radius-sm);
}
.vpro-logo__form input[type="file"]:focus-visible {
	outline: 2px solid var(--vpro-accent); outline-offset: 2px;
}

.vpro-logo__aide {
	margin: 0; font-size: var(--text-xs); line-height: 1.6; color: var(--steel);
}

.vpro-logo__actions { display: flex; flex-wrap: wrap; gap: var(--space-3); }

@media (max-width: 560px) {
	.vpro__logo { height: 40px; max-width: 130px; }
	.vpro-logo__apercu { width: 100%; }
}

/* Le bouton fantome a ete dessine pour les fonds sombres : texte blanc, bord
   blanc translucide. L'espace professionnel est sur fond clair, ou il devenait
   litteralement invisible — « Retirer » et « Modifier mes informations »
   etaient bien la, cliquables, et ne se voyaient pas. On le rehabille ici
   plutot que de le remplacer : c'est le meme role, sur l'autre fond. */
.vpro .voyaliste-btn-ghost,
.vpro-compte .voyaliste-btn-ghost {
	color: var(--horizon-texte); border-color: var(--border); background: var(--cloud);
}
.vpro .voyaliste-btn-ghost:hover,
.vpro-compte .voyaliste-btn-ghost:hover {
	border-color: var(--vpro-accent, var(--horizon)); background: var(--mist);
}

/* L'en-tete du portail est en space-between. Avec deux enfants — le bloc de
   titre et la deconnexion — cela donnait titre a gauche, lien a droite. Le
   logo en a fait un TROISIEME, et space-between a centre le titre. On pousse
   donc la deconnexion par la marge : logo et raison sociale restent colles a
   gauche, quel que soit le nombre d'elements. */
.vpro__tete > .vpro__deconnexion { margin-left: auto; }

/* --- Les exemples de prix, rediges --- */

.vexemples {
	max-width: 68ch; margin: 0 auto var(--space-6);
	display: grid; gap: var(--space-4);
}
.vexemples__p {
	margin: 0; font-size: var(--text-lg); line-height: 1.7; color: var(--ink);
}
/* Les montants sont en chasse fixe : c'est ce qui permet de les retrouver du
   regard dans un paragraphe, la ou une colonne les alignait. */
.vexemples__p strong {
	font-family: var(--font-mono); font-weight: 600;
	word-spacing: -0.12em;   /* l'espace insecable est tres large en chasse fixe */
	font-variant-numeric: tabular-nums; color: var(--navy);
	white-space: nowrap;
}
.vexemples__note {
	margin: 0; padding-top: var(--space-4); border-top: 1px solid var(--border);
	font-size: var(--text-sm); line-height: 1.6; color: var(--steel);
}

@media (max-width: 560px) {
	.vexemples__p { font-size: var(--text-base); }
}