/* ==========================================================================
   [VME-DEPOT-DA 02/10/2026] LE FORMULAIRE « DEPOSER UNE ANNONCE ».
   --------------------------------------------------------------------------
   Charles : « le formulaire n'a pas la meme DA que les nouvelles pages, avec
   des defauts sur les placements, les contours [...] cet effet de "double
   formulaire", comme si l'un superposait l'autre, a cause des contours ».

   Feuille DEDIEE a la page de depot, chargee sur elle seule
   (inc/depot-annonce.php). Elle remplace les huit couches de correctifs de
   vme-custom.css, toutes ancrees sur body.vme-submit-page-v7 : la page porte
   desormais body.vme-depot-v8, ces couches ne s'appliquent plus.
   Balisage : celui du theme parent, plus les elements « vme-dp-* » crees par
   assets/js/depot-annonce-v8.js (bande d'ouverture, fil, carte, en-tete
   d'etape, navigation).

   LA DA, celle de « Estimer mon entreprise » et des pages secteur : une bande
   en degrade en ouverture, UNE carte blanche qui remonte dessus, et dans la
   carte AUCUN filet ni cadre : les questions sont separees par du blanc,
   seuls les champs ont un contour. Inter partout, encres bleutees, pilules
   bleu roi a plat, rien sous 13,5 px.

   TROIS REGLES DE CONSTRUCTION.
   1. Les feuilles du parent sortent APRES celle-ci (add-listing.css est meme
      imprimee dans le corps de la page). On gagne par le poids du selecteur :
      tout ce qui est dans le formulaire est ancre sur
      « body.vme-depot-v8 #submit-job-form » (le parent ecrit
      « #submit-job-form .form-group »). !important n'est pose que la ou le
      parent en pose un lui-meme (liste fermee, relevee le 02/10).
   2. La mise en page de la PAGE (bande, carte) attend body.vme-dp-pret,
      posee par le script : sans JavaScript, ou sur les ecrans voisins de la
      meme adresse (choix du forfait, confirmation), rien n'est bouscule.
   3. Quatre familles vivent HORS du formulaire, a la fin de <body> : la liste
      deroulante ouverte, les suggestions d'adresse, la photo que l'on
      deplace, le voile d'envoi. Elles sont ancrees sur body.vme-depot-v8.

   REGLES DONT QUELQUE CHOSE DEPEND (ne pas les « simplifier ») : le masquage
   des etapes, le select d'origine garde a 1 px (jamais display:none : le
   script teste la largeur pour choisir sa validation), la hauteur de
   l'editeur revele depuis une etape masquee, et l'absence de tout « display »
   sur #form-section-auth (un script l'affiche et le masque par style en
   ligne).
   ========================================================================== */

body.vme-depot-v8 {
	--d-bleu: #1F4DBF;
	--d-bleu-survol: #163A94;
	--d-degrade: linear-gradient(135deg, #16305E 0%, #1F4DBF 62%, #2E5BD4 100%);
	--d-encre: #16233F;
	--d-texte: #3A4150;
	--d-texte-long: #2B3445;
	--d-aide: #5B6472;
	--d-substitut: #667085;
	--d-fond-clair: #EEF3FD;
	--d-fond-doux: #F5F7FA;
	--d-fond-encart: #F7F9FD;
	--d-bord-carte: #E4E8EF;
	--d-bord-clair: #DCE5F7;
	--d-bord-champ: #C9D4E6;
	--d-bord-pilule: #C9D5EB;
	--d-anneau: 0 0 0 3px rgba(31, 77, 191, .16);
	--d-erreur: #D14343;
	--d-erreur-fond: #FFF8F8;
	--d-erreur-texte: #B22B2B;
	--d-erreur-anneau: 0 0 0 4px rgba(209, 67, 67, .09);
	--d-vert: #0B6E4F;
	--d-vert-fond: #E8F5EE;
	--d-police: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
	--d-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235B6472' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
}

/* --- 1. La page --------------------------------------------------------- */
/* Une couleur de fond ne bouscule aucune mise en page : elle vaut aussi pour les ecrans du forfait et de la confirmation, qui retombaient sur le gris neutre du parent. */
body.vme-depot-v8,
body.vme-depot-v8 #c27-site-wrapper { background: var(--d-fond-doux); }
body.vme-depot-v8.vme-dp-pret .add-listing-step {
	color: var(--d-encre);
	font-family: var(--d-police);
	font-size: 16px;
	line-height: 1.6;
}
body.vme-depot-v8.vme-dp-pret .add-listing-step > .i-section {
	padding: 0 0 88px;
	background: transparent;
}
body.vme-depot-v8.vme-dp-pret .add-listing-step > .i-section > .container {
	width: auto;
	max-width: 832px;
	margin: 0 auto;
	padding: 0 16px;
}
/* Le titre « Votre annonce » du parent : la bande d'ouverture porte le titre de la page. */
body.vme-depot-v8.vme-dp-pret .add-listing-step .section-title,
html.vme-depot-attente body.vme-depot-v8 .add-listing-step .section-title { display: none; }
/* Le sommaire lateral du parent (« General », « Compte ») : sans objet dans un parcours par etapes. */
body.vme-depot-v8 .add-listing-nav { display: none; }

/* --- 2. La bande d'ouverture et le fil des etapes ----------------------- */
body.vme-depot-v8 .vme-dp-ouverture {
	padding: 40px 16px 104px;
	background: var(--d-degrade);
	color: #FFFFFF;
	font-family: var(--d-police);
}
body.vme-depot-v8 .vme-dp-ouverture__int { max-width: 800px; margin: 0 auto; }
body.vme-depot-v8 .vme-dp-ouverture__kick {
	margin: 0 0 10px;
	color: #C9D8FA;
	font-size: 15px;
	font-weight: 600;
	line-height: 1.4;
}
body.vme-depot-v8 .vme-dp-ouverture__titre {
	margin: 0 0 28px;
	color: #FFFFFF !important;
	font-family: var(--d-police);
	font-size: 38px;
	font-weight: 700;
	letter-spacing: -.02em;
	line-height: 1.12;
	text-wrap: balance;
}
body.vme-depot-v8 .vme-dp-fil__rang {
	display: none;
	margin: 0 0 12px;
	color: rgba(255, 255, 255, .88);
	font-size: 14.5px;
	font-weight: 600;
	line-height: 1.4;
}
body.vme-depot-v8 .vme-dp-fil__liste {
	display: flex;
	align-items: center;
	margin: 0;
	padding: 0;
	list-style: none;
}
body.vme-depot-v8 .vme-dp-fil__item {
	display: flex;
	align-items: center;
	flex: 0 0 auto;
	min-width: 0;
	margin: 0;
	padding: 0;
}
/* Le trait qui relie deux etapes : il prend la place qui reste. */
body.vme-depot-v8 .vme-dp-fil__item + .vme-dp-fil__item { flex: 1 1 auto; }
body.vme-depot-v8 .vme-dp-fil__item + .vme-dp-fil__item::before {
	content: "";
	flex: 1 1 auto;
	min-width: 8px;
	height: 1px;
	margin: 0 8px;
	background: rgba(255, 255, 255, .32);
}
body.vme-depot-v8 .vme-dp-fil__etape {
	display: inline-flex;
	align-items: center;
	flex: 0 0 auto;
	gap: 8px;
	width: auto;
	height: auto;
	min-height: 40px;
	margin: 0;
	padding: 5px 14px 5px 5px;
	border: 1px solid transparent;
	border-radius: 999px;
	background: transparent;
	box-shadow: none;
	color: rgba(255, 255, 255, .80);
	font-family: var(--d-police);
	font-size: 14px;
	font-weight: 600;
	letter-spacing: 0;
	line-height: 1.2;
	text-transform: none;
	white-space: nowrap;
	cursor: pointer;
	transition: background .15s ease, color .15s ease;
}
body.vme-depot-v8 .vme-dp-fil__etape b {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 28px;
	width: 28px;
	height: 28px;
	border: 1px solid rgba(255, 255, 255, .45);
	border-radius: 50%;
	color: #FFFFFF;
	font-size: 13.5px;
	font-weight: 700;
	line-height: 1;
	font-variant-numeric: tabular-nums;
}
body.vme-depot-v8 .vme-dp-fil__etape[disabled] { cursor: default; opacity: 1; }
body.vme-depot-v8 .vme-dp-fil__etape.is-done { color: #FFFFFF; }
body.vme-depot-v8 .vme-dp-fil__etape.is-done b { border-color: transparent; background: rgba(255, 255, 255, .22); }
body.vme-depot-v8 .vme-dp-fil__etape.is-done:hover { background: rgba(255, 255, 255, .12); }
body.vme-depot-v8 .vme-dp-fil__etape.is-active,
body.vme-depot-v8 .vme-dp-fil__etape.is-active:hover {
	background: #FFFFFF;
	color: var(--d-bleu);
	font-weight: 700;
	cursor: default;
}
body.vme-depot-v8 .vme-dp-fil__etape.is-active b { border-color: var(--d-bleu); background: var(--d-bleu); }
body.vme-depot-v8 .vme-dp-fil__etape:focus-visible { outline: 2px solid #FFFFFF; outline-offset: 2px; }
/* Zone tactile de 44 px sans toucher au dessin (une hauteur mini grossirait l'anneau de l'etape en cours et la bande). */
body.vme-depot-v8 .vme-dp-fil__etape { position: relative; }
body.vme-depot-v8 .vme-dp-fil__etape::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: max(100%, 44px);
	height: max(100%, 44px);
	transform: translate(-50%, -50%);
}

/* --- 3. La carte du formulaire ------------------------------------------ */
body.vme-depot-v8.vme-dp-pret .vme-dp-carte {
	position: relative;
	margin: -64px 0 0;
	border: 0; /* [VME-SANS-CONTOUR 19/10/2026] reprise : carte a cheval sur la bande, l'ombre seule la detache (comme Estimer et les secteurs) */
	border-radius: 16px;
	background: #FFFFFF;
	box-shadow: 0 14px 34px rgba(12, 26, 56, .13);
}
body.vme-depot-v8.vme-dp-pret #submit-job-form {
	float: none;
	width: auto;
	max-width: none;
	margin: 0;
	padding: 40px 48px 44px;
	border: 0;
	background: transparent;
	box-shadow: none;
}
body.vme-depot-v8 #submit-job-form {
	color: var(--d-encre);
	font-family: var(--d-police);
	font-size: 16px;
	line-height: 1.6;
}

/* Le masquage des etapes : c'est LE mecanisme du parcours. */
body.vme-depot-v8 #submit-job-form.vme-etapes--pret .vme-etape-hors-champ { display: none !important; }

/* L'en-tete d'etape : un titre, un chapeau. */
body.vme-depot-v8 #submit-job-form .vme-dp-tete { margin: 0 0 32px; }
body.vme-depot-v8 #submit-job-form .vme-dp-tete__titre {
	margin: 0 0 12px;
	color: var(--d-encre) !important;
	font-family: var(--d-police);
	font-size: 28px;
	font-weight: 700;
	letter-spacing: -.015em;
	line-height: 1.2;
	text-wrap: balance;
	outline: 0;
}
/* [VME-SANS-ORNEMENT 20/10/2026] Plus de trait bleu au-dessus du titre (Charles, 19/10 :
   « Le retirer partout ») : le titre reste seul, en gras, comme sur l'accueil. Le retrait
   haut de la carte (40 px, 26 au telephone) suffit a le detacher du bord. */
body.vme-depot-v8 #submit-job-form .vme-dp-tete__titre::before { content: none; }
body.vme-depot-v8 #submit-job-form .vme-dp-tete__conseil {
	max-width: 62ch;
	margin: 0;
	color: var(--d-texte);
	font-size: 16.5px;
	line-height: 1.6;
}

/* --- 4. Les enveloppes du parent, remises a plat ------------------------
   Le parent dessine une carte par section (fond, rayon, ombre), l'estompe a
   50 % et lui donne 700 px : c'etait le « second formulaire » dans le premier. */
body.vme-depot-v8 #submit-job-form .form-section-wrapper {
	float: none;
	width: auto;
	max-width: none;
	margin: 0;
	padding: 0;
}
body.vme-depot-v8 #submit-job-form .form-section-wrapper > .form-section,
body.vme-depot-v8 #submit-job-form #form-section-submit .form-section {
	float: none;
	width: auto;
	max-width: none;
	margin: 0 !important;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: transparent;
	box-shadow: none;
	opacity: 1;
	overflow: visible;
	transform: none;
	transition: none;
}
body.vme-depot-v8 #submit-job-form .pf-head { display: none; }
body.vme-depot-v8 #submit-job-form .pf-body {
	display: flex;
	flex-direction: column;
	gap: 28px;
	margin: 0;
	padding: 0;
}

/* Une question. Aucun filet, aucun cadre : le blanc separe. */
body.vme-depot-v8 #submit-job-form .form-group {
	float: none;
	width: auto;
	min-width: 0;
	margin: 0;
	padding: 0;
	border: 0;
	background: transparent;
}
body.vme-depot-v8 #submit-job-form .field-head {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	align-items: baseline;
	column-gap: 12px;
	margin: 0;
	padding: 0;
}
body.vme-depot-v8 #submit-job-form .field-head > label {
	grid-column: 1;
	display: block;
	margin: 0;
	padding: 0;
	color: var(--d-encre);
	font-family: var(--d-police);
	font-size: 15.5px;
	font-weight: 600;
	letter-spacing: 0;
	line-height: 1.4;
	text-transform: none;
}
/* « (facultatif) » : sur la ligne du libelle, pas seul en dessous. */
body.vme-depot-v8 #submit-job-form .field-head > label > small {
	display: inline;
	/* 2 px, pas 6 : renvoye a la ligne sur un petit ecran, le mot s'aligne sur le libelle au lieu de partir en retrait. */
	margin: 0 0 0 2px;
	padding: 0;
	color: var(--d-aide);
	font-size: 13.5px;
	font-weight: 500;
	opacity: 1;
	white-space: nowrap;
}
/* Une question dont la reponse est deja cochee n'est pas « facultative ». */
body.vme-depot-v8 #submit-job-form .vme-choix-cartes .field-head > label > small { display: none; }
/* L'asterisque des champs obligatoires. La description (editeur) n'a pas d'attribut « required ». */
/* La classe est posee par le script (marquerChampsRequis) : pas de :has(), absent des navigateurs d'avant 2023.
   Espace insecable : l'asterisque ne passe jamais seul a la ligne (le script rogne aussi la fin du libelle). */
body.vme-depot-v8 #submit-job-form .form-group.vme-dp-requis > .field-head > label::after,
body.vme-depot-v8 #submit-job-form .fieldset-job_description > .field-head > label::after {
	content: "\00a0*";
	color: var(--d-erreur);
	font-weight: 700;
}
/* Le compteur de caracteres : discret, a droite du libelle. */
body.vme-depot-v8 #submit-job-form .field-head > .field-char-counter {
	grid-column: 2;
	grid-row: 1;
	margin: 0;
	padding: 0;
	color: var(--d-aide);
	font-size: 13.5px;
	font-weight: 500;
	line-height: 1.4;
	font-variant-numeric: tabular-nums;
	opacity: 1;
}
body.vme-depot-v8 #submit-job-form .field-head > .field-char-counter.max-exceeded,
body.vme-depot-v8 #submit-job-form .field-head > .field-char-counter.min-exceeded { color: var(--d-erreur-texte); }
body.vme-depot-v8 #submit-job-form .field-char-counter .counter-label:empty { display: none; }
/* Le texte d'aide : lisible, sous le libelle. */
body.vme-depot-v8 #submit-job-form small.description {
	display: block;
	grid-column: 1 / -1;
	margin: 6px 0 0;
	padding: 0;
	color: var(--d-aide);
	font-family: var(--d-police);
	font-size: 14.5px !important;
	font-weight: 400;
	line-height: 1.5;
	opacity: 1;
}
body.vme-depot-v8 #submit-job-form .field {
	position: relative;
	float: none;
	width: auto;
	margin: 10px 0 0;
	padding: 0;
}
/* Les mentions de limite du parent (« Une seule adresse possible. », « Un seul element possible. ») : l'ecran n'offre de toute facon qu'un emplacement. */
body.vme-depot-v8 #submit-job-form .field-type-location > .field > small.description,
body.vme-depot-v8 #submit-job-form .field-type-term-select > .field > small.description { display: none; }
/* La mention « * Champs obligatoires » : en bas, et seulement aux etapes qui en ont. */
body.vme-depot-v8 #submit-job-form .vme-mention-oblig {
	order: 99;
	margin: -8px 0 0;
	padding: 0;
	border: 0;
	background: transparent;
	color: var(--d-aide);
	font-size: 13.5px;
	line-height: 1.4;
}
body.vme-depot-v8 #submit-job-form.vme-dp--sans-requis .vme-mention-oblig { display: none; }

/* --- 5. Les champs de saisie -------------------------------------------- */
body.vme-depot-v8 #submit-job-form .field > input.input-text,
body.vme-depot-v8 #submit-job-form .location-field-wrapper > input.address-field,
body.vme-depot-v8 #submit-job-form .location-coords input {
	display: block;
	box-sizing: border-box;
	float: none;
	width: 100%;
	height: 52px;
	min-height: 52px;
	margin: 0;
	padding: 0 16px;
	border-style: solid;
	border-color: var(--d-bord-champ);
	border-width: 1px !important;
	border-radius: 10px;
	background: #FFFFFF;
	box-shadow: none;
	color: var(--d-encre);
	font-family: var(--d-police);
	font-size: 16px;
	font-weight: 500;
	line-height: 1.4;
	outline: 0;
	-webkit-appearance: none;
	appearance: none;
	text-overflow: ellipsis;
	transition: border-color .15s ease, box-shadow .15s ease;
}
body.vme-depot-v8 #submit-job-form .field > input.input-text::placeholder,
body.vme-depot-v8 #submit-job-form .location-field-wrapper > input.address-field::placeholder {
	color: var(--d-substitut);
	font-weight: 400;
	opacity: 1;
}
body.vme-depot-v8 #submit-job-form .field > input.input-text:hover,
body.vme-depot-v8 #submit-job-form .location-field-wrapper > input.address-field:hover { border-color: #9DB8F5; }
/* Le parent remet padding-left a 0 et retire l'anneau au focus : on tient les deux. */
body.vme-depot-v8 #submit-job-form .field > input.input-text:focus,
body.vme-depot-v8 #submit-job-form .location-field-wrapper > input.address-field:focus,
body.vme-depot-v8 #submit-job-form .location-coords input:focus {
	padding-left: 16px;
	border-color: var(--d-bleu);
	box-shadow: var(--d-anneau);
}
/* Un nombre ne s'ecrit pas sur 700 px de large, et n'a pas besoin de fleches. */
body.vme-depot-v8 #submit-job-form .field-type-number > .field > input.input-text {
	max-width: 340px;
	-moz-appearance: textfield;
	font-variant-numeric: tabular-nums;
}
/* [VME-LOCAUX 02/10/2026] La liste des murs : un champ court, comme les nombres qui l'entourent (surface, loyer, fin de bail). */
body.vme-depot-v8 #submit-job-form .fieldset-vme_murs > .field { max-width: 340px; }
body.vme-depot-v8 #submit-job-form .field-type-number > .field > input.input-text::-webkit-outer-spin-button,
body.vme-depot-v8 #submit-job-form .field-type-number > .field > input.input-text::-webkit-inner-spin-button {
	margin: 0;
	-webkit-appearance: none;
}

/* --- 6. Les listes deroulantes (select2) --------------------------------
   Meme hauteur et meme contour qu'un champ texte. */
body.vme-depot-v8 #submit-job-form .select2-container {
	display: block;
	width: 100% !important;
	min-width: 0;
	margin: 0;
}
/* Le select d'origine que select2 remplace : 1 px, jamais display:none ni 0 px (voir l'en-tete). */
body.vme-depot-v8 form#submit-job-form select.select2-hidden-accessible {
	position: absolute !important;
	display: block !important;
	float: none !important;
	width: 1px !important;
	min-width: 0 !important;
	max-width: 1px !important;
	height: 1px !important;
	min-height: 0 !important;
	max-height: 1px !important;
	margin: -1px !important;
	padding: 0 !important;
	border: 0 !important;
	overflow: hidden !important;
	clip: rect(0 0 0 0) !important;
	clip-path: inset(50%) !important;
	white-space: nowrap !important;
	background: none !important;
	box-shadow: none !important;
}
body.vme-depot-v8 #submit-job-form .select2-container--default .select2-selection--single {
	display: flex;
	align-items: center;
	box-sizing: border-box;
	height: 52px;
	min-height: 52px;
	margin: 0;
	padding: 0 44px 0 16px;
	border: 1px solid var(--d-bord-champ);
	border-radius: 10px;
	background: #FFFFFF var(--d-chevron) no-repeat right 16px center / 14px 14px;
	box-shadow: none;
	outline: 0;
	cursor: pointer;
	transition: border-color .15s ease, box-shadow .15s ease;
}
body.vme-depot-v8 #submit-job-form .select2-container--default .select2-selection--single .select2-selection__rendered {
	display: block;
	flex: 1 1 auto;
	min-width: 0;
	height: auto;
	/* Le parent lui donne 48 px de haut : le texte restait colle en haut du champ. */
	min-height: 0;
	margin: 0;
	padding: 0 !important;
	border: 0 !important;
	box-shadow: none !important;
	text-indent: 0;
	color: var(--d-encre);
	font-family: var(--d-police);
	font-size: 16px;
	font-weight: 500;
	line-height: 1.4;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
body.vme-depot-v8 #submit-job-form .select2-selection--single .select2-selection__rendered::after { content: none; }
body.vme-depot-v8 #submit-job-form .select2-selection--single .select2-selection__placeholder {
	color: var(--d-substitut);
	font-weight: 400;
}
/* La fleche du parent (icone de police ancree en haut a droite) : le chevron est en fond de champ. */
body.vme-depot-v8 #submit-job-form .select2-selection--single .select2-selection__arrow { display: none; }
body.vme-depot-v8 #submit-job-form .select2-selection--single .select2-selection__clear {
	position: static;
	float: right;
	width: 24px;
	height: 24px;
	margin: -1px 0 0 8px;
	border-radius: 50%;
	color: var(--d-aide);
	font-size: 19px;
	font-weight: 400;
	line-height: 24px;
	text-align: center;
	cursor: pointer;
}
body.vme-depot-v8 #submit-job-form .select2-selection--single .select2-selection__clear:hover { background: var(--d-fond-clair); color: var(--d-bleu); }
body.vme-depot-v8 #submit-job-form .select2-container--default .select2-selection--single:hover { border-color: #9DB8F5; }
body.vme-depot-v8 #submit-job-form .select2-container--default.select2-container--focus .select2-selection--single,
body.vme-depot-v8 #submit-job-form .select2-container--default.select2-container--open .select2-selection--single {
	border-color: var(--d-bleu);
	box-shadow: var(--d-anneau);
}

/* La liste a choix multiple (Region, un seul choix) : un champ comme les autres,
   sans la poignee « ≡ » ni le second cadre du champ de recherche. */
body.vme-depot-v8 #submit-job-form .select2-container--default .select2-selection--multiple,
body.vme-depot-v8 #submit-job-form .select2-container--default.select2-container--focus .select2-selection--multiple {
	display: block;
	box-sizing: border-box;
	height: auto;
	min-height: 52px;
	margin: 0;
	padding: 7px 44px 7px 10px;
	border: 1px solid var(--d-bord-champ) !important;
	border-radius: 10px;
	background: #FFFFFF var(--d-chevron) no-repeat right 16px center / 14px 14px;
	box-shadow: none;
	outline: 0;
	cursor: text;
	transition: border-color .15s ease, box-shadow .15s ease;
}
body.vme-depot-v8 #submit-job-form .select2-container--default .select2-selection--multiple:hover { border-color: #9DB8F5 !important; }
body.vme-depot-v8 #submit-job-form .select2-container--default.select2-container--focus .select2-selection--multiple,
body.vme-depot-v8 #submit-job-form .select2-container--default.select2-container--open .select2-selection--multiple {
	border-color: var(--d-bleu) !important;
	box-shadow: var(--d-anneau);
}
body.vme-depot-v8 #submit-job-form .select2-selection--multiple > ul.select2-selection__rendered {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px;
	box-sizing: border-box;
	width: 100%;
	min-height: 36px;
	margin: 0;
	padding: 0;
	overflow: visible;
	list-style: none;
}
body.vme-depot-v8 #submit-job-form .select2-selection--multiple > ul.select2-selection__rendered::before { content: none; display: none; }
/* Liste ouverte : le parent tire un trait bleu droit au bas du champ arrondi. */
body.vme-depot-v8 #submit-job-form .select2-selection--multiple > ul.select2-selection__rendered::after { content: none; }
body.vme-depot-v8 #submit-job-form .select2-selection--multiple .select2-selection__clear { display: none; }
body.vme-depot-v8 #submit-job-form .select2-container--default .select2-selection--multiple .select2-selection__rendered .select2-selection__choice {
	display: inline-flex;
	align-items: center;
	flex: 0 1 auto;
	float: none;
	box-sizing: border-box;
	/* Le parent lui donne width:100% : la pastille prenait toute la ligne et le champ doublait de hauteur. */
	width: auto;
	min-width: 0;
	max-width: 100%;
	min-height: 36px;
	margin: 0;
	padding: 4px 14px 4px 10px;
	border: 0;
	/* Arrondi de pilule sur une ligne, propre aussi quand un nom long passe sur deux lignes au telephone. */
	border-radius: 19px;
	white-space: normal;
	background-color: var(--d-fond-clair) !important;
	color: var(--d-bleu);
	font-family: var(--d-police);
	font-size: 15px;
	font-weight: 600;
	line-height: 1.3;
}
body.vme-depot-v8 #submit-job-form .select2-selection--multiple .select2-selection__choice__remove {
	position: relative;
	flex: 0 0 auto;
	float: none;
	margin: 0 6px 0 0;
	color: var(--d-bleu);
	cursor: pointer;
}
/* Tant qu'une region est choisie, le chevron s'efface : le nom le plus long dispose de toute la largeur. */
body.vme-depot-v8 #submit-job-form .select2-container--default .select2-selection--multiple:has(.select2-selection__choice) { padding-right: 10px; background-image: none; }
/* La croix est une icone du parent, en noir : bleu roi, avec une zone de clic de 44 px. */
body.vme-depot-v8 #submit-job-form .select2-selection--multiple .select2-selection__choice__remove::before { color: var(--d-bleu); font-size: 18px; }
body.vme-depot-v8 #submit-job-form .select2-selection--multiple .select2-selection__choice__remove::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 44px;
	height: 44px;
	transform: translate(-50%, -50%);
}
body.vme-depot-v8 #submit-job-form .select2-container .select2-selection--multiple .select2-search--inline {
	position: relative;
	flex: 1 1 80px;
	float: none;
	width: auto !important;
	min-width: 60px;
	margin: 0;
	padding: 0;
}
body.vme-depot-v8 #submit-job-form .select2-container .select2-selection--multiple .select2-search--inline .select2-search__field {
	box-sizing: border-box;
	width: 100% !important;
	min-width: 0;
	height: 36px;
	min-height: 0;
	margin: 0;
	padding: 0 6px;
	border: 0 !important;
	border-radius: 0;
	background: transparent;
	box-shadow: none;
	color: var(--d-encre);
	font-family: var(--d-police);
	font-size: 16px;
	font-weight: 500;
	line-height: 1.4;
	outline: 0;
}
/* Une region choisie : le champ de recherche ne reserve plus de place a cote de la pastille. */
body.vme-depot-v8 #submit-job-form .select2-selection--multiple .select2-selection__choice ~ .select2-search--inline {
	position: absolute;
	flex: 0 0 1px;
	width: 1px !important;
	min-width: 1px;
	height: 1px;
	opacity: 0;
	overflow: hidden;
}
/* select2 vide l'invite de ce champ : on l'ecrit, tant que rien n'est choisi ni en cours de recherche.
   La feuille select2 de WooCommerce (pages du compte) eteint tous les li::before : on redonne display. */
body.vme-depot-v8 #submit-job-form .field-type-term-select .select2-container:not(.select2-container--open) .select2-search--inline:only-child::before {
	content: "Choisissez dans la liste";
	display: block;
	position: absolute;
	top: 50%;
	left: 6px;
	transform: translateY(-50%);
	color: var(--d-substitut);
	font-size: 16px;
	font-weight: 400;
	line-height: 1.4;
	white-space: nowrap;
	pointer-events: none;
}

/* La liste ouverte : elle est accrochee a la fin de <body>, hors du formulaire. */
body.vme-depot-v8 > .select2-container--open .select2-dropdown {
	margin-top: 6px;
	border: 1px solid var(--d-bord-champ) !important;
	border-radius: 10px;
	background: #FFFFFF;
	box-shadow: 0 14px 34px rgba(12, 26, 56, .13);
	font-family: var(--d-police);
	overflow: hidden;
}
body.vme-depot-v8 > .select2-container--open .select2-dropdown--above { margin-top: -6px; }
body.vme-depot-v8 > .select2-container--open .select2-search--dropdown {
	padding: 10px;
	border-bottom: 1px solid #EDF0F5;
	background: #FFFFFF;
}
body.vme-depot-v8 > .select2-container--open .select2-search--dropdown .select2-search__field {
	box-sizing: border-box;
	width: 100%;
	height: 44px;
	margin: 0;
	padding: 0 12px;
	border: 1px solid var(--d-bord-champ);
	border-radius: 8px;
	background: #FFFFFF;
	box-shadow: none;
	color: var(--d-encre);
	font-family: var(--d-police);
	font-size: 16px;
	outline: 0;
}
body.vme-depot-v8 > .select2-container--open .select2-search--dropdown .select2-search__field:focus {
	border-color: var(--d-bleu);
	box-shadow: var(--d-anneau);
}
body.vme-depot-v8 > .select2-container--open .select2-results__options { max-height: 300px; margin: 0; padding: 6px; }
body.vme-depot-v8 > .select2-container--open .select2-results__option {
	margin: 0;
	padding: 11px 12px;
	border: 0;
	border-radius: 8px;
	background: transparent;
	color: var(--d-encre);
	font-family: var(--d-police);
	font-size: 15.5px;
	font-weight: 500;
	line-height: 1.35;
	transform: none;
	transition: none;
}
body.vme-depot-v8 > .select2-container--open .select2-results__option--highlighted,
body.vme-depot-v8 > .select2-container--open .select2-results__option--highlighted[aria-selected] {
	padding-left: 12px;
	background: var(--d-fond-clair);
	color: var(--d-bleu);
}
body.vme-depot-v8 > .select2-container--open .select2-results__option[aria-selected="true"] { color: var(--d-bleu); font-weight: 700; }
body.vme-depot-v8 > .select2-container--open .select2-results__message { color: var(--d-aide); font-weight: 400; }

/* --- 7. L'adresse et la carte ------------------------------------------- */
body.vme-depot-v8 #submit-job-form .field-type-location .repeater-custom,
body.vme-depot-v8 #submit-job-form .field-type-location .repeater-custom > div,
body.vme-depot-v8 #submit-job-form .field-type-location .repeater-item {
	display: block;
	margin: 0;
	padding: 0;
	border: 0;
}
body.vme-depot-v8 #submit-job-form .location-field-wrapper {
	display: flex;
	flex-direction: column;
	position: relative;
	margin: 0;
	padding: 0;
}
body.vme-depot-v8 #submit-job-form .location-field-wrapper > input.address-field { order: 1; padding-right: 56px; }
body.vme-depot-v8 #submit-job-form .location-field-wrapper > input.address-field:focus { padding-right: 56px; }
/* « Me localiser » : dans le champ, avec une vraie zone de clic.
   [VME-ICONE-SOUS-BARRE] z-index 1 : le parent lui donne 50 (add-listing.css). Sur l'ecran « Modifier »,
   elle passait par-dessus la barre d'enregistrement collante (z-index 5) et prenait le clic sur
   « Enregistrer ». 1 suffit pour rester au-dessus du champ ; garder cette valeur SOUS celle de la barre. */
body.vme-depot-v8 #submit-job-form .location-field-wrapper > i.cts-custom-get-location {
	position: absolute;
	top: 4px;
	right: 4px;
	z-index: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	margin: 0;
	border-radius: 8px;
	color: var(--d-bleu);
	font-size: 20px;
	cursor: pointer;
	transition: background .15s ease;
}
body.vme-depot-v8 #submit-job-form .location-field-wrapper > i.cts-custom-get-location:hover { background: var(--d-fond-clair); }
body.vme-depot-v8 #submit-job-form .location-field-wrapper > .c27-custom-map {
	order: 2;
	width: auto;
	height: 220px;
	margin: 12px 0 0;
	border: 1px solid var(--d-bord-champ);
	border-radius: 10px;
	box-shadow: none;
	overflow: hidden;
}
body.vme-depot-v8 #submit-job-form .c27-custom-map .leaflet-bar {
	border: 1px solid var(--d-bord-champ);
	border-radius: 8px;
	box-shadow: none;
	overflow: hidden;
}
body.vme-depot-v8 #submit-job-form .c27-custom-map .leaflet-bar a { color: var(--d-encre); border-bottom-color: var(--d-bord-carte); }
body.vme-depot-v8 #submit-job-form .c27-custom-map .leaflet-bar a:hover { background: var(--d-fond-clair); color: var(--d-bleu); }
/* Au clavier : l'anneau bleu du site, pas le contour noir du navigateur ni rien du tout sur le zoom. */
body.vme-depot-v8 #submit-job-form .location-field-wrapper > .c27-custom-map:focus-visible { outline: 2px solid var(--d-bleu); outline-offset: 2px; }
body.vme-depot-v8 #submit-job-form .c27-custom-map .leaflet-marker-icon:focus-visible { outline: 2px solid var(--d-bleu); outline-offset: 2px; border-radius: 6px; }
body.vme-depot-v8 #submit-job-form .c27-custom-map .leaflet-bar a:focus-visible { outline: 2px solid var(--d-bleu); outline-offset: -2px; background: var(--d-fond-clair); color: var(--d-bleu); }
body.vme-depot-v8 #submit-job-form .c27-custom-map .leaflet-control-attribution a:focus-visible { outline: 2px solid var(--d-bleu); outline-offset: 1px; }
body.vme-depot-v8 #submit-job-form .c27-custom-map .leaflet-control-attribution { color: var(--d-aide); font-family: var(--d-police); }
body.vme-depot-v8 #submit-job-form .c27-custom-map .leaflet-control-attribution a { color: var(--d-bleu); }
body.vme-depot-v8 #submit-job-form .location-field-wrapper > .location-actions {
	order: 3;
	display: block;
	margin: 0;
	padding: 0;
}
body.vme-depot-v8 #submit-job-form .location-field-wrapper > .location-coords { order: 4; }
body.vme-depot-v8 #submit-job-form .location-actions .lock-pin { float: none; width: auto; margin: 0; padding: 0; }
body.vme-depot-v8 #submit-job-form .location-actions .lock-pin label {
	box-sizing: border-box;
	min-height: 44px;
	padding-top: 10px;
	padding-bottom: 10px;
	color: var(--d-bleu);
	font-family: var(--d-police);
	font-size: 14.5px;
	font-weight: 600;
	line-height: 1.6;
}
body.vme-depot-v8 #submit-job-form .location-actions .lock-pin label:hover { text-decoration: underline; text-underline-offset: 3px; }
/* [VME-REPERE-CLAVIER] La case « Fixer le repere sur la carte » etait en display:none
   (vme-custom.css, .lock-pin input) : jamais atteinte au clavier. Elle reste invisible
   mais redevient focalisable ; l'anneau de focus se dessine sur son libelle. */
body.vme-depot-v8 #submit-job-form .location-actions .lock-pin { position: relative; }
body.vme-depot-v8 #submit-job-form .location-actions .lock-pin input[type="checkbox"] {
	display: block !important;
	position: absolute;
	top: 0;
	left: 0;
	width: 1px;
	height: 1px;
	min-height: 0;
	margin: 0;
	padding: 0;
	border: 0;
	opacity: 0;
	pointer-events: none;
}
body.vme-depot-v8 #submit-job-form .location-actions .lock-pin input[type="checkbox"]:focus-visible ~ label {
	outline: 2px solid var(--d-bleu);
	outline-offset: 2px;
	border-radius: 6px;
}
/* « Saisir les coordonnees a la main » : un dirigeant ne tape pas une latitude. La case reste dans la page, le site s'en sert pour placer le repere. */
body.vme-depot-v8 #submit-job-form .location-actions .enter-coordinates-toggle { display: none; }
/* [VME-ADRESSE-INCONNUE 14/10/2026] Adresse tapee et non reconnue (decision de Charles du 14/10) : un avis
   sous le champ, pose par le script du parcours (depot-annonce-v8.js) dans la ligne d'adresse, au rang du
   champ (order 1), donc avant la carte. Ton « attention » des encarts du site (or sur fond creme, comme la
   pastille « A la une ») : ce n'est pas une erreur, le vendeur peut passer. Vide, il ne prend aucune place
   (jamais de display:none : c'est une region lue par les lecteurs d'ecran, elle doit rester dans la page). */
body.vme-depot-v8 #submit-job-form .location-field-wrapper > .vme-adresse-avis { order: 1; margin: 0; padding: 0; }
body.vme-depot-v8 #submit-job-form .location-field-wrapper > .vme-adresse-avis:not(:empty) {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 4px;
	margin: 10px 0 0;
	padding: 14px 16px;
	border: 1px solid #EBD39B;
	border-radius: 12px;
	background: #FDF6E7;
	color: var(--d-texte);
	font-family: var(--d-police);
	font-size: 14.5px;
	line-height: 1.5;
}
body.vme-depot-v8 #submit-job-form .vme-adresse-avis__titre { display: block; color: #6B4E00; font-size: 15px; font-weight: 700; line-height: 1.4; }
body.vme-depot-v8 #submit-job-form .vme-adresse-avis__suite { display: block; color: var(--d-texte); }
/* Le bouton vit dans le repetiteur de l'adresse, que le parent habille comme celui des reseaux sociaux
   (frontend.css du parent : .social-networks-repeater div div button[type="button"] { padding: 0 !important }) : le
   remplissage de la pilule doit donc etre force, sinon le texte touche le bord. */
body.vme-depot-v8 #submit-job-form .vme-adresse-avis .vme-adresse-avis__passer { min-height: 44px; margin: 8px 0 0; padding: 9px 22px !important; font-size: 14.5px; }
body.vme-depot-v8 #submit-job-form .location-field-wrapper.vme-adresse--inconnue > input.address-field:not(:focus) { border-color: #D9A84A; }
/* Les suggestions d'adresse : accrochees a la fin de <body>. La boite du theme a une hauteur
   nulle (sa liste est en position:absolute) : le cadre se pose sur la LISTE, jamais sur la boite,
   sinon la liste est rognee et plus rien ne s'affiche (regression vue a la relecture du 02/10). */
body.vme-depot-v8 > .cts-autocomplete-dropdown {
	margin-top: 6px;
	border: 0;
	border-radius: 0;
	background: transparent;
	box-shadow: none;
	overflow: visible;
	font-family: var(--d-police);
}
body.vme-depot-v8 > .cts-autocomplete-dropdown .suggestions-list {
	box-sizing: border-box;
	width: 100%;
	padding: 6px;
	border: 1px solid var(--d-bord-champ) !important;
	border-radius: 10px;
	background: #FFFFFF;
	box-shadow: 0 14px 34px rgba(12, 26, 56, .13);
	overflow: hidden;
}
/* Le theme rend la boite « active » des le focus, liste vide : une liste vide ne se dessine pas. */
body.vme-depot-v8 > .cts-autocomplete-dropdown .suggestions-list:empty { display: none; }
body.vme-depot-v8 > .cts-autocomplete-dropdown.active .suggestions-list .suggestion:last-child { border-bottom: 0; }
/* Le theme accroche DEUX listes au meme champ, l'une sur l'autre : une seule ombre. */
body.vme-depot-v8 > .cts-autocomplete-dropdown ~ .cts-autocomplete-dropdown .suggestions-list { box-shadow: none; }
/* Il rouvre aussi la liste 500 ms apres la derniere frappe, meme champ quitte : on la referme hors focus (:active garde la liste le temps du clic). */
body.vme-depot-v8:not(:has(input.address-field:focus)) > .cts-autocomplete-dropdown:not(:active) .suggestions-list { display: none; }
body.vme-depot-v8 > .cts-autocomplete-dropdown .suggestion {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0;
	padding: 10px 12px;
	border: 0;
	border-radius: 8px;
	color: var(--d-encre);
	font-size: 15.5px;
	font-weight: 500;
	line-height: 1.35;
	cursor: pointer;
}
body.vme-depot-v8 > .cts-autocomplete-dropdown .suggestion i { position: static; flex: 0 0 auto; color: var(--d-bleu); font-size: 18px; }
body.vme-depot-v8 > .cts-autocomplete-dropdown .suggestion.active,
body.vme-depot-v8 > .cts-autocomplete-dropdown .suggestion:hover { background: var(--d-fond-clair); color: var(--d-bleu); }

/* --- 8. Les choix : cartes Oui / Non, pastilles du prix ------------------ */
/* La liste d'origine des cartes et son select2 restent hors du champ visuel, sans display:none. */
body.vme-depot-v8 #submit-job-form .vme-choix-cartes select,
body.vme-depot-v8 #submit-job-form .vme-choix-cartes .select2-container {
	position: absolute !important;
	width: 1px !important;
	min-width: 0 !important;
	height: 1px !important;
	min-height: 0 !important;
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	opacity: 0 !important;
	overflow: hidden !important;
	clip: rect(0 0 0 0);
	pointer-events: none;
}
/* Le conteneur select2 des cartes (pas le select lui-meme, dont le script teste la largeur) sort aussi de l'ordre de tabulation. */
body.vme-depot-v8 #submit-job-form .vme-choix-cartes .select2-container { visibility: hidden; }
body.vme-depot-v8 #submit-job-form .vme-cartes-choix {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 12px;
	margin: 0;
}
body.vme-depot-v8 #submit-job-form label.vme-carte-choix {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	width: auto;
	margin: 0;
	padding: 16px 18px;
	border: 1px solid #E2E7EF;
	border-radius: 12px;
	background: #FFFFFF;
	box-shadow: none;
	cursor: pointer;
	transition: border-color .15s ease, background .15s ease;
}
body.vme-depot-v8 #submit-job-form label.vme-carte-choix:hover { border-color: #BFD0F5; }
body.vme-depot-v8 #submit-job-form label.vme-carte-choix.est-choisi { border-color: var(--d-bleu); background: #F7F9FE; }
/* Le parent donne a tout bouton radio nu un bloc, un retrait et un filet : on le ramene a un bouton radio. */
body.vme-depot-v8 #submit-job-form label.vme-carte-choix input[type="radio"],
body.vme-depot-v8 #submit-job-form .vme-perimetre__choix input[type="radio"] {
	display: inline-block;
	flex: 0 0 auto;
	width: 18px;
	height: 18px;
	margin: 2px 0 0;
	padding: 0;
	border: 0;
	accent-color: var(--d-bleu);
	cursor: pointer;
}
/* Le contour du bouton rond n'est retire que si la carte peut le reprendre a son compte (:has) : sinon le focus clavier serait invisible. */
@supports selector(:has(a)) {
	body.vme-depot-v8 #submit-job-form label.vme-carte-choix input[type="radio"]:focus-visible,
	body.vme-depot-v8 #submit-job-form .vme-perimetre__choix input[type="radio"]:focus-visible { outline: 0; }
}
body.vme-depot-v8 #submit-job-form label.vme-carte-choix:has(input:focus-visible),
body.vme-depot-v8 #submit-job-form label.vme-perimetre__choix:has(input:focus-visible) { outline: 2px solid var(--d-bleu); outline-offset: 2px; }
body.vme-depot-v8 #submit-job-form .vme-carte-choix__corps { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
body.vme-depot-v8 #submit-job-form .vme-carte-choix__titre { color: var(--d-encre); font-size: 15.5px; font-weight: 600; line-height: 1.35; }
body.vme-depot-v8 #submit-job-form .vme-carte-choix__detail { color: var(--d-aide); font-size: 14px; font-weight: 400; line-height: 1.5; }

body.vme-depot-v8 #submit-job-form .vme-perimetre {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 22px 0 0;
	opacity: 1;
}
body.vme-depot-v8 #submit-job-form .vme-perimetre__question small {
	margin-left: 2px;
	color: var(--d-aide);
	font-size: 13.5px;
	font-weight: 500;
	opacity: 1;
	white-space: nowrap;
}
body.vme-depot-v8 #submit-job-form .vme-perimetre__question {
	order: 1;
	flex: 0 0 100%;
	display: block;
	margin: 0;
	color: var(--d-encre);
	font-size: 15.5px;
	font-weight: 600;
	line-height: 1.4;
}
body.vme-depot-v8 #submit-job-form label.vme-perimetre__choix {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	order: 3;
	width: auto;
	min-height: 44px;
	margin: 0;
	padding: 8px 16px;
	border: 1px solid var(--d-bord-pilule);
	border-radius: 999px;
	background: #FFFFFF;
	box-shadow: none;
	color: var(--d-encre);
	font-family: var(--d-police);
	font-size: 15px;
	font-weight: 500;
	line-height: 1.3;
	cursor: pointer;
	transition: border-color .15s ease, background .15s ease, color .15s ease;
}
body.vme-depot-v8 #submit-job-form label.vme-perimetre__choix input[type="radio"] { margin: 0; }
body.vme-depot-v8 #submit-job-form label.vme-perimetre__choix:hover { border-color: var(--d-bleu); }
/* L'etat choisi suit la case elle-meme : la pastille s'allume au clic, sans script. */
body.vme-depot-v8 #submit-job-form label.vme-perimetre__choix:has(input:checked) {
	border-color: var(--d-bleu);
	background: #F7F9FE;
	color: var(--d-bleu);
	font-weight: 600;
}
body.vme-depot-v8 #submit-job-form .vme-perimetre__aide {
	order: 2;
	flex: 0 0 100%;
	display: block;
	max-width: none;
	margin: -2px 0 2px;
	color: var(--d-aide);
	font-size: 14.5px;
	line-height: 1.5;
}

/* --- 9. La carte du registre, sous le SIREN ------------------------------ */
body.vme-depot-v8 #submit-job-form .vme-siren-nom {
	display: flex;
	flex-direction: column;
	gap: 4px;
	margin: 10px 0 0;
	padding: 14px 16px;
	border: 0; /* [VME-SANS-CONTOUR 19/10/2026] fond seul, un ton plus soutenu pour rester visible */
	border-radius: 12px;
	background: #F3F6FB;
	color: var(--d-texte);
	font-size: 14.5px;
	line-height: 1.5;
}
/* L'attribut hidden ne tient que par une regle de faible poids du parent : on l'ecrit. */
body.vme-depot-v8 #submit-job-form .vme-siren-nom[hidden] { display: none; }
body.vme-depot-v8 #submit-job-form .vme-siren-nom strong { display: block; color: var(--d-encre); font-size: 15.5px; font-weight: 700; line-height: 1.35; }
body.vme-depot-v8 #submit-job-form .vme-siren-nom span { display: block; color: var(--d-texte); font-size: 14.5px; line-height: 1.5; }
body.vme-depot-v8 #submit-job-form .vme-siren-nom--ok { border-color: #BFE0CE; background: var(--d-vert-fond); }
body.vme-depot-v8 #submit-job-form .vme-siren-nom--ok strong { color: var(--d-vert); }
body.vme-depot-v8 #submit-job-form .vme-siren-nom--radiee,
body.vme-depot-v8 #submit-job-form .vme-siren-nom--introuvable { background: #FCEEEC; } /* [VME-SANS-CONTOUR 19/10/2026] */
body.vme-depot-v8 #submit-job-form .vme-siren-nom--radiee strong,
body.vme-depot-v8 #submit-job-form .vme-siren-nom--introuvable strong { color: #B42318; }
body.vme-depot-v8 #submit-job-form .vme-siren-nom--choix { gap: 8px; }
body.vme-depot-v8 #submit-job-form .vme-siren-nom__prop {
	display: block;
	width: 100%;
	min-height: 46px;
	margin: 0;
	padding: 10px 14px;
	border: 1px solid var(--d-bord-champ);
	border-radius: 10px;
	background: #FFFFFF;
	box-shadow: none;
	color: var(--d-encre);
	font-family: var(--d-police);
	font-size: 15px;
	font-weight: 500;
	line-height: 1.4;
	text-align: left;
	text-transform: none;
	white-space: normal;
	cursor: pointer;
}
body.vme-depot-v8 #submit-job-form .vme-siren-nom__prop:hover,
body.vme-depot-v8 #submit-job-form .vme-siren-nom__prop:focus-visible { border-color: var(--d-bleu); background: var(--d-fond-clair); color: var(--d-bleu); outline: 0; }

/* --- 10. Le bandeau d'estimation, sous le prix --------------------------- */
body.vme-depot-v8 #submit-job-form .vme-depot-estimer {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 16px;
	margin: 24px 0 0;
	padding: 24px 26px 26px;
	border-radius: 14px;
	background: var(--d-bleu);
	color: #FFFFFF;
}
body.vme-depot-v8 #submit-job-form .vme-depot-estimer__textes { flex: 0 0 auto; min-width: 0; max-width: 62ch; }
body.vme-depot-v8 #submit-job-form .vme-depot-estimer__titre { color: #FFFFFF; font-size: 17px; font-weight: 700; line-height: 1.3; }
body.vme-depot-v8 #submit-job-form .vme-depot-estimer__detail { margin-top: 5px; color: rgba(255, 255, 255, .88); font-size: 14.5px; line-height: 1.55; }
body.vme-depot-v8 #submit-job-form a.vme-depot-estimer__lien {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	min-height: 52px;
	padding: 12px 28px;
	border-radius: 999px;
	background: #FFFFFF;
	color: var(--d-bleu);
	font-size: 15.5px;
	font-weight: 700;
	line-height: 1.25;
	text-align: center;
	text-decoration: none;
	/* Sur deux lignes (telephone), elles s'equilibrent : « 69 € » ne reste plus seul en dessous. */
	text-wrap: balance;
	transition: background .15s ease;
}
body.vme-depot-v8 #submit-job-form a.vme-depot-estimer__lien:hover { background: var(--d-fond-clair); color: var(--d-bleu); }
body.vme-depot-v8 #submit-job-form a.vme-depot-estimer__lien:focus-visible { outline: 2px solid #FFFFFF; outline-offset: 2px; }

/* --- 11. La description (editeur) ---------------------------------------- */
body.vme-depot-v8 #submit-job-form .fieldset-job_description > .field { margin-top: 0; }
body.vme-depot-v8 #submit-job-form .wp-editor-container { margin: 0; padding: 0; border: 0; overflow: visible; }
/* Le parent fige cette boite a 292 px et lui laisse 20 px de vide en bas. */
body.vme-depot-v8 #submit-job-form .wp-editor-wrap {
	height: auto !important;
	margin: 0 !important;
	padding: 0;
	border: 0;
}
body.vme-depot-v8 #submit-job-form .wp-editor-wrap > small.description { margin: 6px 0 10px; }
body.vme-depot-v8 #submit-job-form .wp-editor-wrap .mce-tinymce {
	box-sizing: border-box;
	height: auto !important;
	border: 1px solid var(--d-bord-champ) !important;
	border-radius: 10px;
	background: #FFFFFF;
	box-shadow: none;
	overflow: hidden;
}
body.vme-depot-v8 #submit-job-form .wp-editor-wrap .mce-top-part::before { content: none; box-shadow: none; }
body.vme-depot-v8 #submit-job-form .wp-editor-wrap .mce-toolbar-grp {
	padding: 6px 8px;
	border: 0;
	border-bottom: 1px solid var(--d-bord-carte);
	border-radius: 0;
	background: var(--d-fond-doux);
}
body.vme-depot-v8 #submit-job-form .wp-editor-wrap .mce-toolbar .mce-container-body { display: flex; flex-wrap: wrap; gap: 2px 6px; }
body.vme-depot-v8 #submit-job-form .wp-editor-wrap .mce-toolbar .mce-btn-group { margin: 0; padding: 0; border: 0; }
body.vme-depot-v8 #submit-job-form .wp-editor-wrap .mce-toolbar .mce-btn {
	margin: 0;
	border: 0;
	border-radius: 6px;
	background: transparent;
	box-shadow: none;
}
body.vme-depot-v8 #submit-job-form .wp-editor-wrap .mce-toolbar .mce-btn button { min-width: 34px; min-height: 34px; padding: 6px 7px; }
body.vme-depot-v8 #submit-job-form .wp-editor-wrap .mce-toolbar .mce-btn:hover,
body.vme-depot-v8 #submit-job-form .wp-editor-wrap .mce-toolbar .mce-btn.mce-active { background: var(--d-fond-clair); }
body.vme-depot-v8 #submit-job-form .wp-editor-wrap .mce-toolbar .mce-ico { color: var(--d-texte); }
body.vme-depot-v8 #submit-job-form .wp-editor-wrap .mce-edit-area { border: 0 !important; }
/* L'editeur montre qu'il a le focus, comme un champ. La classe est posee par le script : :focus-within ne voit pas dans une iframe. */
body.vme-depot-v8 #submit-job-form .wp-editor-wrap.vme-editeur-actif .mce-tinymce { border-color: var(--d-bleu) !important; box-shadow: var(--d-anneau); }
/* L'editeur demarre dans une etape masquee et se calcule une hauteur nulle ; le parent decale aussi son cadre de 9 px. */
body.vme-depot-v8 #submit-job-form .wp-editor-wrap .mce-edit-area iframe {
	min-height: 240px !important;
	margin: 0;
}
/* Variante sans editeur riche (servie selon le navigateur qui a rempli le cache) : une zone de texte simple. */
body.vme-depot-v8 #submit-job-form .wp-editor-wrap.html-active textarea.wp-editor-area {
	display: block;
	box-sizing: border-box;
	width: 100%;
	min-height: 240px;
	margin: 0;
	padding: 14px 16px;
	border: 1px solid var(--d-bord-champ) !important;
	border-radius: 10px;
	background: #FFFFFF;
	box-shadow: none;
	color: var(--d-encre);
	font-family: var(--d-police);
	font-size: 16px;
	line-height: 1.6;
	outline: 0;
	resize: vertical;
}
body.vme-depot-v8 #submit-job-form .wp-editor-wrap.html-active textarea.wp-editor-area:focus { border-color: var(--d-bleu) !important; box-shadow: var(--d-anneau); }
body.vme-depot-v8 #submit-job-form .wp-editor-wrap.html-active .wp-editor-tools,
body.vme-depot-v8 #submit-job-form .wp-editor-wrap.html-active .quicktags-toolbar { display: none; }
/* [VME-EDITEUR-LIEN] La bulle de lien de l'editeur de description.
   TinyMCE la pose directement dans <body>, hors du formulaire : aucune regle
   ancree sur #submit-job-form ne l'atteint, elle gardait l'habillage de
   l'administration WordPress (gris #F6F7F7, bord #A7AAAD, bouton bleu WordPress).
   La roue dentee (fenetre « Inserer/modifier un lien » de l'administration)
   est retiree par le script du parcours, pas ici : voir depot-annonce-v8.js. */
body.vme-depot-v8 > div.mce-inline-toolbar-grp {
	border: 1px solid var(--d-bord-champ);
	border-radius: 10px;
	background: #FFFFFF;
	box-shadow: 0 8px 24px rgba(22, 35, 63, .12);
	color: var(--d-encre);
	font-family: var(--d-police);
}
body.vme-depot-v8 > div.mce-inline-toolbar-grp > div.mce-stack-layout { padding: 6px 8px; }
body.vme-depot-v8 > div.mce-inline-toolbar-grp.mce-arrow-up::before { border-bottom-color: var(--d-bord-champ); }
body.vme-depot-v8 > div.mce-inline-toolbar-grp.mce-arrow-up::after { border-bottom-color: #FFFFFF; }
body.vme-depot-v8 > div.mce-inline-toolbar-grp.mce-arrow-down::before { border-top-color: var(--d-bord-champ); }
body.vme-depot-v8 > div.mce-inline-toolbar-grp.mce-arrow-down::after { border-top-color: #FFFFFF; }
body.vme-depot-v8 > div.mce-inline-toolbar-grp div.wp-link-input label { color: var(--d-aide); font-size: 14px; line-height: 1.4; }
body.vme-depot-v8 > div.mce-inline-toolbar-grp div.wp-link-input input {
	min-height: 36px;
	padding: 6px 10px;
	border: 1px solid var(--d-bord-champ);
	border-radius: 8px;
	background: #FFFFFF;
	color: var(--d-encre);
	font-size: 16px;
}
/* Le parent retire le bord bas et l'ombre du champ au focus, en !important (frontend.css : div.wp-link-input input:focus). */
body.vme-depot-v8 > div.mce-inline-toolbar-grp div.wp-link-input input:focus {
	border-color: var(--d-bleu);
	border-bottom: 1px solid var(--d-bleu) !important;
	box-shadow: var(--d-anneau) !important;
	outline: 0;
}
body.vme-depot-v8 > div.mce-inline-toolbar-grp div.wp-link-preview { align-self: center; }
body.vme-depot-v8 > div.mce-inline-toolbar-grp div.wp-link-preview a { color: var(--d-bleu); }
body.vme-depot-v8 > div.mce-inline-toolbar-grp .mce-btn-group .mce-btn {
	border-color: transparent;
	border-radius: 8px;
	background: transparent;
	box-shadow: none;
}
body.vme-depot-v8 > div.mce-inline-toolbar-grp .mce-btn-group .mce-btn button { min-width: 34px; min-height: 34px; padding: 6px 7px; }
body.vme-depot-v8 > div.mce-inline-toolbar-grp .mce-btn-group .mce-btn:hover,
body.vme-depot-v8 > div.mce-inline-toolbar-grp .mce-btn-group .mce-btn:focus { border-color: transparent; background: var(--d-fond-clair); box-shadow: none; }
body.vme-depot-v8 > div.mce-inline-toolbar-grp .mce-btn-group .mce-btn:focus { box-shadow: var(--d-anneau); }
body.vme-depot-v8 > div.mce-inline-toolbar-grp .mce-btn-group .mce-btn .mce-ico { color: var(--d-texte); }
body.vme-depot-v8 > div.mce-inline-toolbar-grp .mce-btn-group .mce-btn.mce-primary,
body.vme-depot-v8 > div.mce-inline-toolbar-grp .mce-btn-group .mce-btn.mce-primary:active { border-color: var(--d-bleu); background: var(--d-bleu); box-shadow: none; }
body.vme-depot-v8 > div.mce-inline-toolbar-grp .mce-btn-group .mce-btn.mce-primary:hover,
body.vme-depot-v8 > div.mce-inline-toolbar-grp .mce-btn-group .mce-btn.mce-primary:focus { border-color: var(--d-bleu-survol); background: var(--d-bleu-survol); }
body.vme-depot-v8 > div.mce-inline-toolbar-grp .mce-btn-group .mce-btn.mce-primary:focus { box-shadow: var(--d-anneau); }
body.vme-depot-v8 > div.mce-inline-toolbar-grp .mce-btn-group .mce-btn.mce-primary .mce-ico { color: #FFFFFF; }
/* La liste de suggestions de la bulle (recherche d'un contenu du site), posee elle aussi dans <body>. */
body.vme-depot-v8 > .ui-autocomplete.wplink-autocomplete {
	border: 1px solid var(--d-bord-champ);
	border-radius: 10px;
	box-shadow: 0 8px 24px rgba(22, 35, 63, .12);
	color: var(--d-encre);
	font-family: var(--d-police);
	font-size: 14px;
}
body.vme-depot-v8 > .ui-autocomplete.wplink-autocomplete li { padding: 8px 12px; }
/* jQuery UI marque la suggestion active sur ses <span> (ui-state-active), plus sur la ligne : la regle de WordPress (li.ui-state-focus) ne s'applique jamais. */
body.vme-depot-v8 > .ui-autocomplete.wplink-autocomplete li:hover,
body.vme-depot-v8 > .ui-autocomplete.wplink-autocomplete li:has(> .ui-state-active) { background-color: var(--d-fond-clair); cursor: pointer; }

/* --- 12. Les photos ------------------------------------------------------ */
body.vme-depot-v8 #submit-job-form .file-upload-field { margin: 0; padding: 0; }
body.vme-depot-v8 #submit-job-form .file-upload-field::after { content: none; }
body.vme-depot-v8 #submit-job-form .uploaded-files-list {
	display: grid;
	/* [VME-LOCAUX 02/10/2026] Trois par rangee : six photos font deux rangees pleines. */
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 12px;
	margin: 0;
	padding: 0;
}
/* Les deux pseudo-elements du parent (remise a plat des flottants) deviendraient des cases vides de la grille. */
body.vme-depot-v8 #submit-job-form .uploaded-files-list::before,
body.vme-depot-v8 #submit-job-form .uploaded-files-list::after,
body.vme-depot-v8 #submit-job-form .job-manager-uploaded-files::after { content: none; display: none; }
body.vme-depot-v8 #submit-job-form .job-manager-uploaded-files { display: contents; }
body.vme-depot-v8 #submit-job-form .field-type-file .review-gallery-add {
	position: relative;
	display: block;
	float: none;
	width: auto;
	height: 124px;
	margin: 0;
	border: 1.5px dashed #9DB8F5;
	border-radius: 12px;
	background: var(--d-fond-encart);
	color: var(--d-bleu);
	font-size: 0;
	transition: border-color .15s ease, background .15s ease;
}
body.vme-depot-v8 #submit-job-form .field-type-file .review-gallery-add:hover { border: 1.5px dashed var(--d-bleu); background: var(--d-fond-clair); }
body.vme-depot-v8 #submit-job-form .field-type-file .review-gallery-add:focus-within { border-color: var(--d-bleu); box-shadow: var(--d-anneau); }
body.vme-depot-v8 #submit-job-form .field-type-file .review-gallery-add > i {
	top: 40px;
	color: var(--d-bleu);
	font-size: 26px;
}
/* La case du parent ne porte aucun texte. */
body.vme-depot-v8 #submit-job-form .field-type-file .review-gallery-add::after {
	content: "Ajouter une photo";
	position: absolute;
	right: 8px;
	bottom: 26px;
	left: 8px;
	color: var(--d-bleu);
	font-family: var(--d-police);
	font-size: 14.5px;
	font-weight: 600;
	line-height: 1.3;
	text-align: center;
	pointer-events: none;
}
/* Le champ fichier, invisible, couvre toute la case. */
body.vme-depot-v8 #submit-job-form .field-type-file .review-gallery-add .content {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	width: auto;
	height: auto;
	padding: 0 !important;
}
body.vme-depot-v8 #submit-job-form .field-type-file .review-gallery-add .content input {
	position: absolute;
	top: 0;
	left: 0;
	display: block;
	width: 100%;
	height: 100%;
	min-height: 0;
	margin: 0;
	padding: 0;
	border: 0;
	cursor: pointer;
}
body.vme-depot-v8 #submit-job-form .field-type-file .job-manager-uploaded-file,
body.vme-depot-v8 #submit-job-form .field-type-file .job-manager-uploaded-files progress {
	display: block;
	float: none;
	width: auto;
	height: 124px;
	margin: 0;
	border: 1px solid var(--d-bord-carte);
	border-radius: 12px;
	background: var(--d-fond-doux);
	overflow: hidden;
}
body.vme-depot-v8 #submit-job-form .field-type-file .job-manager-uploaded-file .uploaded-file-preview,
body.vme-depot-v8 #submit-job-form .field-type-file .job-manager-uploaded-file .job-manager-uploaded-file-preview { display: block; height: 100%; }
body.vme-depot-v8 #submit-job-form .field-type-file .job-manager-uploaded-file .job-manager-uploaded-file-preview img {
	display: block;
	width: 100%;
	height: 124px !important;
	margin: 0 !important;
	object-fit: cover;
}
/* Le bouton de retrait : toujours visible (au repos il ne l'etait qu'au survol, donc jamais au doigt ni au clavier). */
body.vme-depot-v8 #submit-job-form .field-type-file .job-manager-uploaded-file a.review-gallery-image-remove {
	top: 8px;
	right: 8px;
	bottom: auto;
	width: 32px;
	height: 32px;
	background: rgba(22, 35, 63, .78);
	opacity: 1;
	visibility: visible;
}
body.vme-depot-v8 #submit-job-form .field-type-file .job-manager-uploaded-file a.review-gallery-image-remove:hover { background: var(--d-erreur-texte); }
/* Au clavier : le parent retire le contour de tous les liens (a:focus { outline: none }). */
body.vme-depot-v8 #submit-job-form .field-type-file .job-manager-uploaded-file a.review-gallery-image-remove:focus-visible { outline: 2px solid #FFFFFF; outline-offset: 2px; background: var(--d-bleu); box-shadow: 0 0 0 5px var(--d-bleu); }
body.vme-depot-v8 #submit-job-form .field-type-file .job-manager-uploaded-file a.review-gallery-image-remove::after { content: ""; position: absolute; top: -6px; right: -6px; bottom: -6px; left: -6px; }
body.vme-depot-v8 #submit-job-form .field-type-file .job-manager-uploaded-files progress {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	background: var(--d-fond-clair);
}
/* [VME-LOCAUX 02/10/2026] Six cases prises (photos posees ou envois en cours, la limite du champ) : la case
   « Ajouter une photo » n'a plus lieu d'etre proposee. La cale que le tri pose le temps d'un deplacement
   (ui-sortable-placeholder) ne compte pas : sinon la case disparaitrait pendant le geste. */
body.vme-depot-v8 #submit-job-form .uploaded-files-list:has(.job-manager-uploaded-files > :nth-child(6 of :not(.ui-sortable-placeholder))) > .review-gallery-add { display: none; }
body.vme-depot-v8 #submit-job-form .field-type-file .job-manager-uploaded-files progress[value]::-webkit-progress-bar { background: var(--d-fond-clair); }
body.vme-depot-v8 #submit-job-form .field-type-file .job-manager-uploaded-files progress[value]::-webkit-progress-value { background: #C9D8FA; }
body.vme-depot-v8 #submit-job-form .field-type-file .job-manager-uploaded-files progress::before { border-top-color: var(--d-bleu); border-right-color: var(--d-bleu); border-bottom-color: #FFFFFF; border-left-color: #FFFFFF; }
body.vme-depot-v8 #submit-job-form .file-upload-field > small.description { margin: 10px 0 0; font-size: 13.5px !important; }
/* « Jusqu'a 6 fichiers. » : l'aide du champ le dit deja. */
body.vme-depot-v8 #submit-job-form .file-upload-field > small.description + small.description { display: none; }
/* La photo que l'on deplace sort du formulaire le temps du geste. */
body.vme-depot-v8 > .job-manager-uploaded-file.ui-sortable-helper {
	border: 1px solid var(--d-bleu);
	border-radius: 12px;
	box-shadow: 0 14px 34px rgba(12, 26, 56, .2);
	overflow: hidden;
}
/* Un visiteur n'a pas encore de zone d'envoi : il ne voit que le message qui le lui dit. */
body.vme-depot-v8.vme-depot-visiteur #submit-job-form .fieldset-job_gallery > .field-head,
body.vme-depot-v8.vme-depot-visiteur #submit-job-form .fieldset-job_gallery > .field { display: none; }

/* --- 13. Messages -------------------------------------------------------- */
body.vme-depot-v8 #submit-job-form .vme-depot-info {
	margin: 0 0 28px;
	padding: 16px 20px;
	border: 1px solid var(--d-bord-clair);
	border-radius: 12px;
	background: var(--d-fond-encart);
	color: var(--d-texte-long);
	font-size: 15.5px;
	line-height: 1.55;
}
body.vme-depot-v8 #submit-job-form .form-group > .vme-depot-info { margin: 0; }
body.vme-depot-v8 #submit-job-form .vme-depot-info__bouton {
	display: block;
	width: auto;
	height: auto;
	min-height: 0;
	margin: 6px 0 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	line-height: inherit;
	text-align: left;
	white-space: normal;
	background: none;
	box-shadow: none;
	color: var(--d-bleu);
	font: inherit;
	font-weight: 700;
	text-decoration: underline;
	text-underline-offset: 3px;
	text-transform: none;
	cursor: pointer;
}
/* Un champ fautif, et son message juste dessous. */
body.vme-depot-v8 #submit-job-form .vme-champ-en-erreur .field > input.input-text,
body.vme-depot-v8 #submit-job-form .vme-champ-en-erreur input.address-field,
body.vme-depot-v8 #submit-job-form .vme-champ-en-erreur .select2-container--default .select2-selection--single,
body.vme-depot-v8 #submit-job-form .vme-champ-en-erreur .select2-container--default .select2-selection--multiple,
body.vme-depot-v8 #submit-job-form .vme-champ-en-erreur .wp-editor-wrap .mce-tinymce,
body.vme-depot-v8 #submit-job-form .vme-champ-en-erreur .wp-editor-wrap.html-active textarea.wp-editor-area {
	border-color: var(--d-erreur) !important;
	background-color: var(--d-erreur-fond);
	box-shadow: var(--d-erreur-anneau);
}
body.vme-depot-v8 #submit-job-form .vme-champ-message {
	margin: 8px 0 0;
	padding: 0;
	color: var(--d-erreur-texte);
	font-size: 14px;
	font-weight: 600;
	line-height: 1.45;
}
/* [VME-DESC-REQUISE] Le message de la description se pose au-dessus du cadre de l'editeur : dessous, il sortait de l'ecran d'un telephone. */
body.vme-depot-v8 #submit-job-form .wp-editor-wrap > .vme-champ-message { margin: 0 0 10px; }
/* Les erreurs renvoyees par le serveur, en tete de la carte. */
body.vme-depot-v8 .vme-dp-erreurs { display: grid; gap: 10px; padding: 28px 48px 0; }
/* [VME-A11Y-ERREURS] La boite recoit le focus par script a l'arrivee (jamais par Tab) : pas de cadre autour du message. */
body.vme-depot-v8 .vme-dp-erreurs:focus { outline: 0; }
body.vme-depot-v8 .vme-dp-erreurs .job-manager-error {
	position: relative;
	width: auto;
	max-width: none;
	margin: 0 !important;
	padding: 14px 18px 14px 50px;
	border: 1px solid #E9BDB7 !important;
	border-radius: 12px;
	background: #FDF6F5;
	box-shadow: none !important;
	color: #B42318;
	font-family: var(--d-police);
	font-size: 15px;
	font-weight: 600;
	line-height: 1.5;
}

body.vme-depot-v8 .vme-dp-erreurs .job-manager-error::before { color: #B42318; }

/* --- 14. La navigation et l'envoi ----------------------------------------
   Un seul dessin de bouton : la pilule a plat des pages recentes. */
body.vme-depot-v8 #submit-job-form .vme-dp-bouton,
body.vme-depot-v8 #submit-job-form .listing-form-submit-btn > button.buttons,
body.vme-depot-v8 #submit-job-form #form-section-auth a.buttons {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	float: none;
	width: auto;
	height: auto;
	min-height: 52px;
	margin: 0;
	padding: 12px 28px;
	border: 1px solid transparent;
	border-radius: 999px;
	background: transparent;
	box-shadow: none;
	font-family: var(--d-police);
	font-size: 15.5px;
	font-weight: 700;
	letter-spacing: 0;
	line-height: 1.2;
	text-align: center;
	text-decoration: none;
	text-transform: none;
	white-space: nowrap;
	overflow: visible;
	cursor: pointer;
	transition: background .15s ease, border-color .15s ease, color .15s ease, transform .15s ease;
}
body.vme-depot-v8 #submit-job-form .vme-dp-bouton--principal,
body.vme-depot-v8 #submit-job-form .listing-form-submit-btn > button.skip-preview-btn,
body.vme-depot-v8 #submit-job-form #form-section-auth a.buttons:first-of-type {
	border-color: var(--d-bleu);
	background: var(--d-bleu);
	color: #FFFFFF;
}
body.vme-depot-v8 #submit-job-form .vme-dp-bouton--principal:hover,
body.vme-depot-v8 #submit-job-form .listing-form-submit-btn > button.skip-preview-btn:hover,
body.vme-depot-v8 #submit-job-form #form-section-auth a.buttons:first-of-type:hover {
	border-color: var(--d-bleu-survol);
	background: var(--d-bleu-survol);
	color: #FFFFFF;
	transform: translateY(-1px);
}
body.vme-depot-v8 #submit-job-form .vme-dp-bouton--secondaire,
body.vme-depot-v8 #submit-job-form .listing-form-submit-btn > button.save-listing-button,
body.vme-depot-v8 #submit-job-form #form-section-auth a.buttons:not(:first-of-type) {
	border-color: var(--d-bord-pilule);
	background: #FFFFFF;
	color: var(--d-bleu);
}
body.vme-depot-v8 #submit-job-form .vme-dp-bouton--secondaire:hover,
body.vme-depot-v8 #submit-job-form .listing-form-submit-btn > button.save-listing-button:hover,
body.vme-depot-v8 #submit-job-form #form-section-auth a.buttons:not(:first-of-type):hover {
	border-color: var(--d-bord-pilule);
	background: var(--d-fond-clair);
	color: var(--d-bleu);
}
body.vme-depot-v8 #submit-job-form .vme-dp-bouton:focus-visible,
body.vme-depot-v8 #submit-job-form .listing-form-submit-btn > button.buttons:focus-visible,
body.vme-depot-v8 #submit-job-form #form-section-auth a.buttons:focus-visible { outline: 2px solid var(--d-bleu); outline-offset: 2px; }
/* Pendant l'envoi d'une photo, le parent desactive les boutons d'envoi : cela doit se voir. */
body.vme-depot-v8 #submit-job-form .listing-form-submit-btn > button.buttons[disabled] { opacity: .55; transform: none; cursor: not-allowed; }
/* Les pictogrammes (avion, disquette, personnage) : trois polices d'icones differentes, aucune dans la DA. */
body.vme-depot-v8 #submit-job-form .listing-form-submit-btn > button.buttons > i,
body.vme-depot-v8 #submit-job-form #form-section-auth a.buttons > i { display: none; }

body.vme-depot-v8 #submit-job-form .vme-dp-nav {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin: 36px 0 0;
}
body.vme-depot-v8 #submit-job-form .vme-dp-suivant { min-width: 190px; }
/* Etape 1 : « Retour » n'a pas lieu d'etre, mais garde sa place pour que « Continuer » ne saute pas. */
body.vme-depot-v8 #submit-job-form .vme-dp-retour[disabled] { visibility: hidden; pointer-events: none; }
/* Derniere etape : Retour a gauche, Brouillon et Publier a droite, sur une rangee. */
body.vme-depot-v8 #submit-job-form #form-section-submit { margin: 36px 0 0; }
body.vme-depot-v8 #submit-job-form #form-section-submit .pf-body { display: block; }
body.vme-depot-v8 #submit-job-form .listing-form-submit-btn {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: flex-end;
	gap: 12px;
	float: none;
	width: auto;
	margin: 0;
	padding: 0;
	border: 0;
}
body.vme-depot-v8 #submit-job-form .listing-form-submit-btn > button.buttons { flex: 0 0 auto; }
body.vme-depot-v8 #submit-job-form .listing-form-submit-btn > .vme-dp-retour { order: 1; margin-right: auto; }
body.vme-depot-v8 #submit-job-form .listing-form-submit-btn > .save-listing-button { order: 2; }
body.vme-depot-v8 #submit-job-form .listing-form-submit-btn > .skip-preview-btn { order: 3; min-width: 220px; }
/* Un visiteur s'identifie d'abord (bloc ci-dessous) : « Publier » ne lui est pas montre comme s'il pouvait servir. */
body.vme-depot-v8.vme-depot-visiteur #submit-job-form .listing-form-submit-btn > button[type="submit"] { display: none; }

/* Entre le seuil du telephone et 760 px, les trois pilules ne tenaient pas sur la rangee. */
@media (min-width: 701px) and (max-width: 760px) {
	body.vme-depot-v8 #submit-job-form .listing-form-submit-btn { gap: 8px; }
	body.vme-depot-v8 #submit-job-form .listing-form-submit-btn > .vme-dp-bouton,
	body.vme-depot-v8 #submit-job-form .listing-form-submit-btn > button.buttons { padding-left: 18px; padding-right: 18px; }
	body.vme-depot-v8 #submit-job-form .listing-form-submit-btn > .skip-preview-btn { min-width: 0; }
}

/* --- 15. Le bloc d'identification (visiteur, derniere etape) -------------
   JAMAIS de « display » sur #form-section-auth : un script l'affiche et le masque par style en ligne. */
body.vme-depot-v8 #submit-job-form #form-section-auth {
	margin: 32px 0 0;
	padding: 26px 28px 28px;
	border: 1px solid var(--d-bord-clair);
	border-radius: 14px;
	background: var(--d-fond-encart);
}
body.vme-depot-v8 #submit-job-form #form-section-auth .pf-body { gap: 18px; text-align: left; }
body.vme-depot-v8 #submit-job-form .vme-dp-compte__tete { display: flex; flex-direction: column; gap: 6px; }
body.vme-depot-v8 #submit-job-form .vme-dp-compte__tete strong { color: var(--d-encre); font-size: 19px; font-weight: 700; line-height: 1.3; }
body.vme-depot-v8 #submit-job-form .vme-dp-compte__tete span { color: var(--d-texte); font-size: 15.5px; line-height: 1.55; }
body.vme-depot-v8 #submit-job-form .vme-depot-google { max-width: 380px; margin: 0; padding: 0; }
body.vme-depot-v8 #submit-job-form .vme-depot-google .nsl-container,
body.vme-depot-v8 #submit-job-form .vme-depot-google .nsl-container-buttons {
	display: block;
	margin: 0;
	padding: 0;
	text-align: left;
}
body.vme-depot-v8 #submit-job-form .vme-depot-google a {
	display: block;
	width: auto;
	max-width: none;
	margin: 0;
	padding: 0;
	border-radius: 999px;
	text-decoration: none;
}
body.vme-depot-v8 #submit-job-form .vme-depot-google .nsl-button {
	display: flex !important;
	align-items: center;
	justify-content: center;
	gap: 10px;
	box-sizing: border-box;
	min-height: 52px;
	margin: 0 !important;
	padding: 0 22px !important;
	border: 1px solid var(--d-bord-pilule) !important;
	border-radius: 999px !important;
	background: #FFFFFF !important;
	box-shadow: none !important;
	color: var(--d-encre) !important;
	transition: background .15s ease;
}
body.vme-depot-v8 #submit-job-form .vme-depot-google a:hover .nsl-button { background: var(--d-fond-clair) !important; }
body.vme-depot-v8 #submit-job-form .vme-depot-google a:focus-visible { outline: 2px solid var(--d-bleu); outline-offset: 2px; }
body.vme-depot-v8 #submit-job-form .vme-depot-google .nsl-button-svg-container {
	display: flex;
	flex: 0 0 auto;
	width: 20px;
	height: 20px;
	margin: 0;
	padding: 0;
}
body.vme-depot-v8 #submit-job-form .vme-depot-google .nsl-button-svg-container svg { width: 20px; height: 20px; }
body.vme-depot-v8 #submit-job-form .vme-depot-google .nsl-button-label-container {
	flex: 0 1 auto;
	margin: 0 !important;
	padding: 0 !important;
	color: var(--d-encre);
	font-family: var(--d-police) !important;
	font-size: 15.5px;
	font-weight: 600;
	line-height: 1.2;
	text-align: center;
}
body.vme-depot-v8 #submit-job-form .vme-depot-google__ou {
	display: flex;
	align-items: center;
	gap: 12px;
	margin: 18px 0 0;
	color: var(--d-aide);
	font-size: 14px;
	line-height: 1.4;
}
body.vme-depot-v8 #submit-job-form .vme-depot-google__ou::before,
body.vme-depot-v8 #submit-job-form .vme-depot-google__ou::after { content: ""; flex: 1 1 auto; height: 1px; background: var(--d-bord-clair); }
body.vme-depot-v8 #submit-job-form #form-section-auth fieldset.fieldset-login_required {
	min-width: 0;
	max-width: 380px;
	margin: 0;
	padding: 0;
	border: 0;
}
/* « Connectez-vous a votre compte, ou creez-en un... » : le titre du bloc le dit deja. */
body.vme-depot-v8 #submit-job-form #form-section-auth .fieldset-login_required > p:not(:has(a)) { display: none; }
body.vme-depot-v8 #submit-job-form #form-section-auth .fieldset-login_required > p:has(a) {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	width: auto !important;
	margin: 0;
	padding: 0;
	text-align: left;
}
body.vme-depot-v8 #submit-job-form #form-section-auth .fieldset-login_required > p > span { display: none; }
body.vme-depot-v8 #submit-job-form #form-section-auth .fieldset-login_required > p > a.buttons { flex: 1 1 150px; padding: 12px 18px; }

/* --- 16. Le voile d'envoi : la phrase dans la police du site ------------- */
body.vme-depot-v8 .add-listing-loader .add-listing-loading-message {
	color: var(--d-texte);
	font-family: var(--d-police);
	font-size: 16px;
}

body.vme-depot-v8 .add-listing-loader .spinner-layer { border-color: var(--d-bleu) !important; }

/* --- Ecrans moyens : le fil ne nomme que l'etape en cours ---------------- */
@media (max-width: 900px) {
	body.vme-depot-v8 .vme-dp-fil__etape:not(.is-active) { padding: 5px; }
	body.vme-depot-v8 .vme-dp-fil__etape:not(.is-active) span { display: none; }
}

/* --- Telephone ----------------------------------------------------------- */
@media (max-width: 700px) {
	body.vme-depot-v8.vme-dp-pret .add-listing-step > .i-section { padding-bottom: 56px; }
	body.vme-depot-v8.vme-dp-pret .add-listing-step > .i-section > .container { padding: 0 12px; }

	body.vme-depot-v8 .vme-dp-ouverture { padding: 26px 16px 72px; }
	body.vme-depot-v8 .vme-dp-ouverture__kick { margin-bottom: 8px; font-size: 14px; }
	body.vme-depot-v8 .vme-dp-ouverture__titre { margin-bottom: 18px; font-size: 28px; }
	/* Cinq pastilles et, au-dessus, le nom de l'etape en toutes lettres. */
	body.vme-depot-v8 .vme-dp-fil__rang { display: block; }
	body.vme-depot-v8 .vme-dp-fil__etape,
	body.vme-depot-v8 .vme-dp-fil__etape:not(.is-active) { min-height: 36px; padding: 3px; }
	body.vme-depot-v8 .vme-dp-fil__etape span { display: none; }
	body.vme-depot-v8 .vme-dp-fil__item + .vme-dp-fil__item::before { margin: 0 6px; }

	body.vme-depot-v8.vme-dp-pret .vme-dp-carte { margin-top: -44px; border-radius: 14px; }
	body.vme-depot-v8.vme-dp-pret #submit-job-form { padding: 26px 20px 28px; }
	body.vme-depot-v8 .vme-dp-erreurs { padding: 20px 20px 0; }

	body.vme-depot-v8 #submit-job-form .vme-dp-tete { margin-bottom: 26px; }
	body.vme-depot-v8 #submit-job-form .vme-dp-tete__titre { font-size: 23px; text-wrap: wrap; }
	body.vme-depot-v8 #submit-job-form .vme-dp-tete__titre::before { margin-bottom: 14px; }
	body.vme-depot-v8 #submit-job-form .vme-dp-tete__conseil { font-size: 15.5px; }
	body.vme-depot-v8 #submit-job-form .pf-body { gap: 24px; }

	body.vme-depot-v8 #submit-job-form .field-type-number > .field > input.input-text { max-width: none; }
	body.vme-depot-v8 #submit-job-form .fieldset-vme_murs > .field { max-width: none; }
	body.vme-depot-v8 #submit-job-form .vme-cartes-choix { grid-template-columns: 1fr; gap: 10px; }
	body.vme-depot-v8 #submit-job-form label.vme-perimetre__choix { display: flex; flex: 1 1 100%; border-radius: 12px; }
	body.vme-depot-v8 #submit-job-form .location-field-wrapper > .c27-custom-map { height: 200px; }
	body.vme-depot-v8 #submit-job-form .uploaded-files-list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
	/* Les huit boutons de l'editeur : une rangee de cases egales, hautes de 44 px. */
	body.vme-depot-v8 #submit-job-form .wp-editor-wrap .mce-toolbar-grp { padding: 4px; }
	body.vme-depot-v8 #submit-job-form .wp-editor-wrap .mce-toolbar .mce-container-body { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 0; }
	body.vme-depot-v8 #submit-job-form .wp-editor-wrap .mce-toolbar .mce-btn-group,
	body.vme-depot-v8 #submit-job-form .wp-editor-wrap .mce-toolbar .mce-btn-group > div { display: contents; }
	body.vme-depot-v8 #submit-job-form .wp-editor-wrap .mce-toolbar .mce-btn { display: block; float: none; width: auto; }
	body.vme-depot-v8 #submit-job-form .wp-editor-wrap .mce-toolbar .mce-btn button { display: block; width: 100%; min-width: 0; min-height: 44px; padding: 0; }
	body.vme-depot-v8 #submit-job-form .c27-custom-map .leaflet-bar a { width: 44px; height: 44px; line-height: 44px; }

	body.vme-depot-v8 #submit-job-form .vme-depot-estimer { align-items: stretch; padding: 20px; }

	/* [VME-LISTES-TEL] Un nom de liste trop long passe sur deux lignes au lieu d'etre coupe par « … ».
	   Ne pas mettre overflow: visible sur la zone rendue : elle cache le « × » texte du parent, a droite de la croix. */
	body.vme-depot-v8 #submit-job-form .select2-container--default .select2-selection--single { height: auto; padding-top: 8px; padding-bottom: 8px; }
	body.vme-depot-v8 #submit-job-form .select2-container--default .select2-selection--single .select2-selection__rendered { display: flex; align-items: center; gap: 8px; line-height: 1.3; text-overflow: clip; white-space: normal; }
	body.vme-depot-v8 #submit-job-form .select2-selection--single .select2-selection__clear { order: 2; flex: 0 0 24px; float: none; min-width: 0; margin: 0 0 0 auto; white-space: nowrap; }
	body.vme-depot-v8 #submit-job-form a.vme-depot-estimer__lien { white-space: normal; }

	/* Les boutons prennent la largeur ; l'action principale d'abord. */
	body.vme-depot-v8 #submit-job-form .vme-dp-nav { flex-direction: column-reverse; align-items: stretch; margin-top: 30px; }
	body.vme-depot-v8 #submit-job-form .vme-dp-bouton,
	body.vme-depot-v8 #submit-job-form .listing-form-submit-btn > button.buttons { width: 100%; min-width: 0; white-space: normal; }
	body.vme-depot-v8 #submit-job-form .vme-dp-retour[disabled] { display: none; }
	body.vme-depot-v8 #submit-job-form #form-section-submit { margin-top: 30px; }
	body.vme-depot-v8 #submit-job-form .listing-form-submit-btn { flex-direction: column; align-items: stretch; }
	body.vme-depot-v8 #submit-job-form .listing-form-submit-btn > .skip-preview-btn { order: 1; }
	body.vme-depot-v8 #submit-job-form .listing-form-submit-btn > .save-listing-button { order: 2; }
	body.vme-depot-v8 #submit-job-form .listing-form-submit-btn > .vme-dp-retour { order: 3; margin-right: 0; }

	body.vme-depot-v8 #submit-job-form #form-section-auth { margin-top: 28px; padding: 22px 18px 22px; }
	body.vme-depot-v8 #submit-job-form .vme-dp-compte__tete strong { font-size: 18px; }
	body.vme-depot-v8 #submit-job-form .vme-depot-google,
	body.vme-depot-v8 #submit-job-form #form-section-auth fieldset.fieldset-login_required { max-width: none; }
}

/* --- Petits telephones (moins de 360 px) --------------------------------- */
@media (max-width: 359px) {
	/* « Continuer avec Google » etait coupe apres le G. */
	body.vme-depot-v8 #submit-job-form .vme-depot-google .nsl-button { gap: 8px; padding: 0 12px !important; }
	body.vme-depot-v8 #submit-job-form .vme-depot-google .nsl-button-label-container { font-size: 14.5px; white-space: nowrap; }
	body.vme-depot-v8 #submit-job-form .vme-depot-google__ou { gap: 8px; font-size: 13.5px; white-space: nowrap; }
	body.vme-depot-v8 #submit-job-form #form-section-auth { padding: 20px 14px; }
}
/* [VME-TACTILE-44] Zones tactiles de 44 px (depot et « Modifier une annonce »). */
/* Croix d'effacement des listes simples : la boite de la croix (24 px) ne change pas, une zone invisible de 44 px
   s'ancre sur le champ. La croix reste en position statique : la zone echappe ainsi a la coupe de
   .select2-selection__rendered (overflow: hidden). 34 px = retrait droit du champ (44 px) moins 10 px. */
body.vme-depot-v8 #submit-job-form .select2-container--default .select2-selection--single { position: relative; }
body.vme-depot-v8 #submit-job-form .select2-selection--single .select2-selection__clear::after {
	content: "";
	position: absolute;
	top: 50%;
	right: 34px;
	width: 44px;
	height: 44px;
	margin-top: -22px;
}
/* Telephone : huit boutons sur une rangee font 29 a 41 px de large ; deux rangees de quatre. */
@media (max-width: 420px) {
	body.vme-depot-v8 #submit-job-form .wp-editor-wrap .mce-toolbar .mce-container-body { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
/* Tablette tactile : boutons de l'editeur et zoom de la carte a 44 px, comme au telephone. */
@media (min-width: 701px) and (pointer: coarse) {
	body.vme-depot-v8 #submit-job-form .wp-editor-wrap .mce-toolbar .mce-btn button { min-width: 44px; min-height: 44px; }
	body.vme-depot-v8 #submit-job-form .c27-custom-map .leaflet-bar a { width: 44px; height: 44px; line-height: 44px; }
}
/* [/VME-TACTILE-44] */
/* [/VME-DEPOT-DA] */

/* ==========================================================================
   [VME-MODIF-ANNONCE 02/10/2026] L'ECRAN « MODIFIER UNE ANNONCE » (compte).
   --------------------------------------------------------------------------
   Meme formulaire que le depot, rendu dans /mon-compte/mes-annonces/ : il
   porte body.vme-depot-v8 (tout ce qui precede s'y applique : champs, listes,
   cartes de choix, photos, editeur, erreurs) et body.vme-modif-annonce.
   Choix de Charles : UNE SEULE PAGE, cinq parties sous cinq intertitres, un
   bouton « Enregistrer ».
   Le CADRE est celui du compte (fil d'Ariane, titre a gauche, pas de bande) ;
   l'INTERIEUR de la carte est celui du depot. Balisage : inc/woocommerce.php
   (fil, en-tete), inc/depot-annonce.php (regroupement en cinq sections du
   parent), depot-annonce-v8.js en mode « page » (carte, messages, retour).
   ========================================================================== */

/* Le fil d'Ariane, l'en-tete et la carte partagent la meme colonne de 800 px. */
body.vme-modif-annonce .woocommerce-MyAccount-content { font-family: var(--d-police); }
body.vme-modif-annonce .woocommerce-MyAccount-content > .vme-ariane,
body.vme-modif-annonce .woocommerce-MyAccount-content > .vme-modif-entete,
body.vme-modif-annonce .woocommerce-MyAccount-content > .i-section > .container {
	box-sizing: border-box;
	float: none;
	width: auto;
	max-width: 800px;
	margin-right: auto;
	margin-left: auto;
	padding-right: 0;
	padding-left: 0;
}
body.vme-modif-annonce .woocommerce-MyAccount-content > .vme-ariane { margin-bottom: 14px; font-family: var(--d-police); font-size: 13.5px; }
/* Zone tactile de 47 px sur les liens du fil, sans toucher au dessin : sous 700 px c'est le seul retour direct a la liste. */
body.vme-modif-annonce .woocommerce-MyAccount-content > .vme-ariane a { display: inline-block; margin: -14px 0; padding: 14px 0; }
/* [VME-MODIF-CONTRASTE] Fil d'Ariane et badge d'etat : contraste de 4,5 au moins. Le survol est repose, sinon la regle du lien l'ecrase. */
body.vme-modif-annonce .vme-ariane,
body.vme-modif-annonce .vme-ariane a { color: var(--d-aide); }
body.vme-modif-annonce .vme-ariane a:hover { color: var(--d-bleu); }
body.vme-modif-annonce .vme-badge--vert { color: #0B6E4F; }
body.vme-modif-annonce .vme-badge--or { color: #8A5A00; }
/* Sous 1200 px, le parent remet 30 px !important (20 px sous 768 px) au-dessus et au-dessous de la section du formulaire,
   contre sa propre regle a 0 : l'ecart sous l'en-tete passait de 22 a 52 px. */
body.vme-modif-annonce .woocommerce-MyAccount-content > .i-section { padding-top: 0 !important; padding-bottom: 0 !important; }

/* L'en-tete : le titre a gauche, « Voir l'annonce » a droite, comme « Mes annonces ». */
body.vme-modif-annonce .vme-modif-entete {
	display: flex;
	flex-wrap: nowrap;
	align-items: flex-end;
	justify-content: space-between;
	gap: 14px 24px;
	margin-bottom: 22px;
}
/* Titre long : il se replie dans sa colonne, « Voir l'annonce » reste a droite (il tombait dessous, a gauche). */
body.vme-modif-annonce .vme-modif-entete__titre { flex: 1 1 auto; min-width: 0; }
body.vme-modif-annonce .vme-modif-entete > .vme-annonces__deposer { flex: 0 0 auto; }
body.vme-modif-annonce .vme-modif-entete h1 {
	margin: 0 0 8px;
	color: var(--d-encre) !important;
	font-family: var(--d-police);
	font-size: 30px;
	font-weight: 700;
	letter-spacing: -.02em;
	line-height: 1.15;
}
body.vme-modif-annonce .vme-modif-entete__annonce {
	display: flex;
	flex-wrap: nowrap;
	align-items: flex-start;
	gap: 8px 10px;
	margin: 0;
	color: var(--d-texte);
	font-size: 15.5px;
	font-weight: 500;
	line-height: 1.4;
}
body.vme-modif-annonce .vme-modif-entete__annonce > .vme-badge { flex: 0 0 auto; }
body.vme-modif-annonce .vme-modif-entete__annonce > span:not(.vme-badge) { min-width: 0; overflow-wrap: anywhere; }
body.vme-modif-annonce .vme-modif-entete--vide { display: block; }
body.vme-modif-annonce .vme-modif-entete--vide p { margin: 0 0 14px; color: var(--d-texte); font-size: 16px; line-height: 1.6; }
/* Focus clavier : le parent retire le contour de tous les liens (a:focus { outline: none }). */
body.vme-modif-annonce .vme-ariane a:focus-visible { outline: 2px solid var(--d-bleu); outline-offset: 2px; border-radius: 4px; color: var(--d-bleu); }
body.vme-modif-annonce .vme-modif-entete a.vme-annonces__deposer:focus-visible { outline: 2px solid var(--d-bleu); outline-offset: 2px; }

/* Le titre « Votre annonce » du parent : l'en-tete de l'ecran porte deja le titre. */
body.vme-modif-annonce .woocommerce-MyAccount-content .section-title { display: none; }

/* La carte : celle du depot, sans la remontee sur une bande (il n'y en a pas) ni son ombre forte. */
body.vme-modif-annonce.vme-dp-pret .vme-dp-carte {
	margin: 0;
	border: 1px solid var(--d-bord-carte); /* [VME-SANS-CONTOUR 19/10/2026] reprise : hors bande, filet neutre seul, sans ombre */
	box-shadow: none;
}
/* Tant que le script n'a pas pose la carte, le formulaire la porte lui-meme. */
body.vme-modif-annonce:not(.vme-dp-pret) #submit-job-form {
	margin: 0;
	padding: 40px 48px 44px;
	border: 1px solid var(--d-bord-carte);
	border-radius: 16px;
	background: #FFFFFF;
}
body.vme-modif-annonce #submit-job-form > .vme-mention-oblig { margin: 0 0 26px; }

/* Les cinq parties : un intertitre (le trait de marque, puis le titre), puis les questions. */
body.vme-modif-annonce #submit-job-form .form-section-wrapper + .form-section-wrapper { margin-top: 48px; }
body.vme-modif-annonce #submit-job-form .pf-head {
	display: block;
	margin: 0 0 24px;
	padding: 0;
	border: 0;
	background: transparent;
}
body.vme-modif-annonce #submit-job-form .pf-head .title-style-1 { display: block; margin: 0; padding: 0; }
body.vme-modif-annonce #submit-job-form .pf-head .title-style-1::after { content: none; }
body.vme-modif-annonce #submit-job-form .pf-head .title-style-1 > i { display: none; }
body.vme-modif-annonce #submit-job-form .pf-head h5 {
	/* Le parent le pose en flottant decale (7 px, 10 px) a cote de sa pastille : sans hauteur, il recouvrait la premiere question. */
	position: static;
	float: none;
	margin: 0;
	padding: 0;
	color: var(--d-encre);
	font-family: var(--d-police);
	font-size: 22px;
	font-weight: 700;
	letter-spacing: -.01em;
	line-height: 1.25;
	text-transform: none;
}
/* [VME-SANS-ORNEMENT 20/10/2026] Plus de trait bleu au-dessus des titres de partie (Charles, 19/10 : « Le retirer partout »). */
body.vme-modif-annonce #submit-job-form .pf-head h5::before { content: none; }
/* La feuille du compte ajoute un element de degagement en fin de section : dans une colonne flex, il devenait 28 px de vide. */
body.vme-modif-annonce #submit-job-form .pf-body::after { content: none; display: none; }

/* La barre d'enregistrement : elle reste au bas de l'ecran pendant qu'on fait defiler la page,
   pour enregistrer une correction sans descendre jusqu'au dernier champ. */
body.vme-modif-annonce.vme-dp-pret #submit-job-form #form-section-submit {
	position: sticky;
	bottom: 0;
	z-index: 5;
	margin: 40px -48px -44px;
	padding: 16px 48px;
	border-radius: 0 0 16px 16px;
	background: #FFFFFF;
	transition: box-shadow .2s ease;
}
/* L'ombre ne vit que pendant que la barre flotte au-dessus des questions (classe posee par le script) :
   arrivee au bas de la carte, elle n'est plus qu'un pied de formulaire, sans effet de bandeau rapporte. */
body.vme-modif-annonce.vme-dp-pret #submit-job-form #form-section-submit.vme-dp-flotte { box-shadow: 0 -10px 24px rgba(12, 26, 56, .07); }
body.vme-modif-annonce .vme-dp-carte > .vme-dp-repere { position: absolute; bottom: 0; left: 0; width: 1px; height: 1px; pointer-events: none; }
/* [VME-MODIF-FOCUS] Au clavier, le champ qui recoit le focus ne reste ni sous l'en-tete fixe ni sous la
   barre d'enregistrement : leur place est reservee dans le defilement. La classe est posee par le script
   (demarrerPage) a la premiere touche Tab et retiree au premier clic : en permanence, cette reserve faisait
   sauter la page a la souris (102 px a la premiere frappe, 403 px au clic sur la region).
   En-tete mesure : 162 px au-dessus de 1200 px, 122 px de 901 a 1200, 80 px de 701 a 900, 60 px au telephone.
   Barre : 84 px, 76 px au telephone. 16 px d'air. */
html.vme-modif-clavier { scroll-padding-top: calc(178px + var(--wp-admin--admin-bar--height, 0px)); scroll-padding-bottom: 100px; }
@media (max-width: 1200px) { html.vme-modif-clavier { scroll-padding-top: calc(138px + var(--wp-admin--admin-bar--height, 0px)); } }
@media (max-width: 900px) { html.vme-modif-clavier { scroll-padding-top: calc(96px + var(--wp-admin--admin-bar--height, 0px)); } }
@media (max-width: 700px) { html.vme-modif-clavier { scroll-padding-bottom: 92px; } }
/* Une annonce sans adresse : le parent ne montre qu'un bouton. Le script ouvre le champ d'office ;
   ceci habille le bouton pour le cas ou il resterait a l'ecran (le script n'a pas pu ouvrir la ligne). */
body.vme-depot-v8 #submit-job-form .field-type-location input.add-location {
	display: block;
	width: 100%;
	height: 52px;
	margin: 0;
	padding: 0 18px;
	border: 1.5px dashed var(--d-bord-champ);
	border-radius: 10px;
	background: var(--d-fond-clair);
	/* Le parent impose color et font-size en !important (frontend.css, .social-networks-repeater > input[type=button]). */
	color: var(--d-bleu) !important;
	font-size: 15px !important;
	font-family: var(--d-police);
	font-weight: 600;
	line-height: 1;
	cursor: pointer;
	transition: border-color .15s ease, background .15s ease;
}
body.vme-depot-v8 #submit-job-form .field-type-location input.add-location:hover { border-color: var(--d-bleu); background: #FFFFFF; }
body.vme-modif-annonce #submit-job-form .listing-form-submit-btn > button.preview-btn {
	order: 3;
	min-width: 220px;
	border-color: var(--d-bleu);
	background: var(--d-bleu);
	color: #FFFFFF;
}
body.vme-modif-annonce #submit-job-form .listing-form-submit-btn > button.preview-btn:hover {
	border-color: var(--d-bleu-survol);
	background: var(--d-bleu-survol);
	color: #FFFFFF;
	transform: translateY(-1px);
}
body.vme-modif-annonce #submit-job-form .listing-form-submit-btn > a.vme-dp-retour { text-decoration: none; }

/* Le message de retour du serveur, en tete de la carte : « modifications enregistrees ». */
body.vme-depot-v8 .vme-dp-erreurs .job-manager-message {
	position: relative;
	left: 0;
	width: auto;
	max-width: none;
	margin: 0 !important;
	padding: 14px 18px 14px 50px;
	border: 1px solid #BFE0CE !important;
	border-radius: 12px;
	background: var(--d-vert-fond);
	box-shadow: none !important;
	color: var(--d-vert);
	font-family: var(--d-police);
	font-size: 15px;
	font-weight: 600;
	line-height: 1.5;
}
body.vme-depot-v8 .vme-dp-erreurs .job-manager-message::before { color: var(--d-vert) !important; }
body.vme-depot-v8 .vme-dp-erreurs .job-manager-message a { margin-left: 6px; color: var(--d-vert); text-decoration: underline; text-underline-offset: 3px; }
body.vme-modif-annonce .vme-dp-erreurs .job-manager-error { left: 0; }

@media (max-width: 700px) {
	body.vme-modif-annonce .vme-modif-entete { flex-wrap: wrap; align-items: flex-start; margin-bottom: 18px; }
	body.vme-modif-annonce .vme-modif-entete__annonce { flex-wrap: wrap; align-items: center; }
	body.vme-modif-annonce .vme-modif-entete h1 { font-size: 26px; }
	body.vme-modif-annonce .vme-modif-entete > .vme-annonces__deposer { width: 100%; }
	body.vme-modif-annonce:not(.vme-dp-pret) #submit-job-form { padding: 26px 20px 28px; border-radius: 14px; }
	body.vme-modif-annonce #submit-job-form .form-section-wrapper + .form-section-wrapper { margin-top: 40px; }
	body.vme-modif-annonce #submit-job-form .pf-head { margin-bottom: 20px; }
	body.vme-modif-annonce #submit-job-form .pf-head h5 { font-size: 20px; }
	body.vme-modif-annonce.vme-dp-pret #submit-job-form #form-section-submit { margin: 32px -20px -28px; padding: 12px 20px; border-radius: 0 0 14px 14px; }
	body.vme-modif-annonce #submit-job-form .listing-form-submit-btn > button.preview-btn { order: 1; }
	/* Telephone : deux boutons empiles dans la barre collante mangeaient un cinquieme de l'ecran.
	   La barre ne garde que « Enregistrer » ; le retour a la liste reste dans le fil d'Ariane. */
	body.vme-modif-annonce #submit-job-form .listing-form-submit-btn > a.vme-dp-retour { display: none; }
}
/* [/VME-MODIF-ANNONCE] */