/* Vide.Maison Mode sombre.
 * Tout ce qui suit ne s'applique que sous html.vm-sombre, posée par le script de tête.
 * Le mode clair n'est jamais touché. Les !important sont voulus : les snippets WPCode
 * et les plugins posent eux-mêmes leurs couleurs en !important. */

/* ---------- Le bouton (visible dans les deux modes) ---------- */
.site-header .inside-header {
	position: relative;
}
.site-header button.vms-bouton {
	position: absolute;
	top: 50%;
	right: 12px;
	transform: translateY(-50%);
	z-index: 5;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 42px;
	height: 42px;
	margin: 0;
	padding: 0;
	border: 2px solid #3a3a3a;
	border-radius: 50%;
	background: #ffffff;
	color: #3a3a3a;
	cursor: pointer;
	line-height: 1;
	-webkit-tap-highlight-color: transparent;
}
.site-header button.vms-bouton:hover,
.site-header button.vms-bouton:focus {
	background: #f0f0f0;
	color: #3a3a3a;
}
.site-header button.vms-bouton:focus-visible {
	outline: 3px solid #1e73be;
	outline-offset: 2px;
}
.vms-bouton svg {
	display: block;
	width: 22px;
	height: 22px;
}
.vms-bouton .vms-soleil,
html.vm-sombre .vms-bouton .vms-lune {
	display: none;
}
html.vm-sombre .vms-bouton .vms-soleil {
	display: block;
}
/* Place pour le bouton à droite du badge Google Play. */
.site-header .inside-header .header-widget {
	margin-right: 60px;
}
/* Sur téléphone, le badge passe au-dessus du logo : le bouton monte dans le coin
   haut droit, sinon il chevauche le texte de l'en-tête sur les écrans de 320 px. */
@media (max-width: 768px) {
	.site-header button.vms-bouton {
		top: 10px;
		right: 10px;
		transform: none;
	}
	.site-header .inside-header .header-widget {
		margin-right: 0;
	}
}
/* Dans l'application, le badge est masqué et l'en-tête réduit : bouton centré verticalement. */
@media all and (display-mode: standalone), all and (display-mode: fullscreen), all and (display-mode: minimal-ui) {
	.site-header button.vms-bouton {
		top: 50%;
		transform: translateY(-50%);
	}
}

/* ---------- La palette ---------- */
html.vm-sombre {
	color-scheme: dark;
	--vms-fond: #121418;
	--vms-surface: #1b1e23;
	--vms-surface-2: #252930;
	--vms-surface-3: #2e333b;
	--vms-bord: #3b414a;
	--vms-trait: #6b7480;
	--vms-texte: #e3e5e8;
	--vms-doux: #a7aeb8;
	--vms-lien: #7ab8f0;
	--vms-vert: #5cc98f;
	/* Les couleurs globales de GeneratePress. */
	--contrast: #e3e5e8;
	--contrast-2: #b9bec6;
	--contrast-3: #6b7480;
	--base: #2e333b;
	--base-2: #252930;
	--base-3: #1b1e23;
	--accent: #7ab8f0;
}

/* ---------- Le socle : fond, surfaces, textes, liens ---------- */
html.vm-sombre body {
	background-color: var(--vms-fond) !important;
	color: var(--vms-texte) !important;
}
html.vm-sombre .site-header,
html.vm-sombre .top-bar,
html.vm-sombre .separate-containers .inside-article,
html.vm-sombre .separate-containers .comments-area,
html.vm-sombre .separate-containers .page-header,
html.vm-sombre .separate-containers .paging-navigation,
html.vm-sombre .one-container .container,
html.vm-sombre .inside-page-header,
html.vm-sombre .sidebar .widget,
html.vm-sombre .footer-widgets,
html.vm-sombre .site-footer,
html.vm-sombre .site-info,
html.vm-sombre .wp-lightbox-overlay .scrim {
	background-color: var(--vms-surface) !important;
	color: var(--vms-texte) !important;
}
html.vm-sombre h1,
html.vm-sombre h2,
html.vm-sombre h3,
html.vm-sombre h4,
html.vm-sombre h5,
html.vm-sombre h6,
html.vm-sombre .entry-title,
html.vm-sombre .main-title a,
html.vm-sombre .main-title a:hover,
html.vm-sombre .site-header,
html.vm-sombre label,
html.vm-sombre legend {
	color: var(--vms-texte) !important;
}
html.vm-sombre .site-description,
html.vm-sombre .entry-meta,
html.vm-sombre small {
	color: var(--vms-doux) !important;
}
html.vm-sombre a {
	color: var(--vms-lien);
}
html.vm-sombre a:hover {
	color: #a9d2f7;
}
html.vm-sombre hr {
	border-color: var(--vms-bord);
	background-color: var(--vms-bord);
}
html.vm-sombre table,
html.vm-sombre th,
html.vm-sombre td {
	border-color: var(--vms-bord) !important;
}

/* ---------- Le bouton en mode sombre ---------- */
html.vm-sombre .site-header button.vms-bouton {
	border-color: var(--vms-trait);
	background: var(--vms-surface-2);
	color: #ffd75e;
}
html.vm-sombre .site-header button.vms-bouton:hover,
html.vm-sombre .site-header button.vms-bouton:focus {
	background: var(--vms-surface-3);
	color: #ffd75e;
}

/* ---------- Le menu, le pied de page (cadres noirs des snippets 29338 et 29339) ---------- */
html.vm-sombre .main-navigation,
html.vm-sombre .main-navigation ul ul {
	background-color: var(--vms-surface) !important;
}
html.vm-sombre .main-navigation,
html.vm-sombre #menu-menu-principal,
html.vm-sombre .site-footer {
	border-color: var(--vms-trait) !important;
}
html.vm-sombre .main-navigation .main-nav ul li a,
html.vm-sombre .main-navigation .menu-toggle {
	color: var(--vms-texte) !important;
	background-color: transparent !important;
}
html.vm-sombre .main-navigation .main-nav ul li a:hover,
html.vm-sombre .main-navigation .main-nav ul li.sfHover > a {
	color: var(--vms-lien) !important;
}
html.vm-sombre .main-navigation .main-nav ul li[class*="current-menu-"] > a {
	color: #ff5c8d !important;
}
html.vm-sombre #menu-menu-principal .sub-menu {
	background: var(--vms-surface-2) !important;
	border-color: var(--vms-trait) !important;
}
html.vm-sombre #menu-menu-principal .sub-menu li a {
	color: var(--vms-texte) !important;
}
html.vm-sombre #menu-menu-principal .sub-menu li a:hover {
	background: #3a2230 !important;
	color: #f9a8d4 !important;
}

/* ---------- La barre basse de l'application (snippet 29774) ---------- */
html.vm-sombre #vm-appbar {
	background: var(--vms-surface) !important;
	border-top-color: var(--vms-bord) !important;
	box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.5) !important;
}
html.vm-sombre #vm-appbar a {
	color: var(--vms-texte) !important;
}
html.vm-sombre #vm-appbar a.vm-current {
	color: #ff5c8d !important;
}

/* Le bandeau des titres dans l'application (CSS additionnel). */
@media all and (display-mode: standalone), all and (display-mode: fullscreen), all and (display-mode: minimal-ui) {
	html.vm-sombre h1,
	html.vm-sombre h1.entry-title {
		color: #cfe4f7 !important;
		background: #1a2c3d !important;
	}
}

/* ---------- Les champs de formulaire ---------- */
html.vm-sombre input[type="text"],
html.vm-sombre input[type="email"],
html.vm-sombre input[type="url"],
html.vm-sombre input[type="password"],
html.vm-sombre input[type="search"],
html.vm-sombre input[type="tel"],
html.vm-sombre input[type="number"],
html.vm-sombre input[type="date"],
html.vm-sombre textarea,
html.vm-sombre select {
	background-color: var(--vms-surface-2) !important;
	color: var(--vms-texte) !important;
	border-color: var(--vms-trait) !important;
}
html.vm-sombre input:focus,
html.vm-sombre textarea:focus,
html.vm-sombre select:focus {
	background-color: var(--vms-surface-3) !important;
}
html.vm-sombre ::placeholder {
	color: #8a929d !important;
}
/* Le remplissage automatique de Chrome repeint le champ en clair : on le recouvre. */
html.vm-sombre input:-webkit-autofill,
html.vm-sombre input:-webkit-autofill:hover,
html.vm-sombre input:-webkit-autofill:focus {
	-webkit-text-fill-color: var(--vms-texte) !important;
	box-shadow: 0 0 0 1000px var(--vms-surface-3) inset !important;
	caret-color: var(--vms-texte);
}

/* ---------- Le dépôt et la modification (vm-annonces) ---------- */
html.vm-sombre .vman-dictee {
	background: var(--vms-surface-2);
	border-color: var(--vms-trait);
	color: var(--vms-texte);
}
html.vm-sombre .vman-dictee.vman-ecoute {
	background: #d32f2f;
	border-color: #d32f2f;
	color: #ffffff;
}
html.vm-sombre .vman-dictee-etat,
html.vm-sombre .vman-coup-doeil th,
html.vm-sombre .vman-carte th {
	color: var(--vms-doux);
}
html.vm-sombre .vman-cgu,
html.vm-sombre .vman-carte {
	background: var(--vms-surface-2);
	border-color: var(--vms-bord);
}
html.vm-sombre .vman-carte tr + tr th,
html.vm-sombre .vman-carte tr + tr td,
html.vm-sombre .vman-supprimer {
	border-color: var(--vms-bord);
}
html.vm-sombre .vman-forfait {
	border-color: var(--vms-trait);
}
html.vm-sombre .vman-vedette {
	background: #2a2516;
}
html.vm-sombre .vman-modif-alerte {
	background: #3d1f1f;
	border-color: #7a3a3a;
	color: #f6c9c9;
}
html.vm-sombre .vman-modif-succes {
	background: #17301f;
	border-color: #2f6b45;
	color: #b5e8c6;
}
html.vm-sombre .vman-requis,
html.vm-sombre .vman-modif-aide.vman-coupon-refus,
html.vm-sombre .vman-alerte td,
html.vm-sombre .vman-alerte td a {
	color: #f08a8a;
}
html.vm-sombre .vman-modif-aide.vman-coupon-ok {
	color: var(--vms-vert);
}

/* Le logo a un fond blanc carré : coins arrondis pour qu'il ne fasse pas tache. */
html.vm-sombre .site-header .header-image {
	border-radius: 12px;
}

/* ---------- Les annonces (anciennes classes AWPCP reprises par vm-annonces) ---------- */
html.vm-sombre .displayaditemsodd,
html.vm-sombre .displayaditemseven,
html.vm-sombre [class*="displayaditem"],
html.vm-sombre .awpcp-listing-excerpt,
html.vm-sombre .awpcplatestthumb,
html.vm-sombre .thumbshow,
html.vm-sombre table.displayads td,
html.vm-sombre table.listcatsh td,
html.vm-sombre #awpcpqsearch,
html.vm-sombre .awpcp-box,
html.vm-sombre .awpcp-submit-listing-section,
html.vm-sombre .awpcp-payment-terms-list .awpcp-payment-term,
html.vm-sombre .awpcp-payment-terms-list .awpcp-payment-term .awpcp-payment-term-duration-price label,
html.vm-sombre .awpcp-payment-terms-table tr,
html.vm-sombre .awpcp-payment-terms-table-payment-term-price,
html.vm-sombre .awpcp-payment-methods-list .awpcp-payment-methods-list-payment-method label,
html.vm-sombre .awpcp-form-steps .awpcp-form-steps-step,
html.vm-sombre .awpcp-form-steps .awpcp-form-steps-pending-step,
html.vm-sombre .awpcp-table th,
html.vm-sombre .awpcp-button,
html.vm-sombre .awpcp-action-button,
html.vm-sombre .upload-conditions,
html.vm-sombre .awpcp-uploaded-files-group-title,
html.vm-sombre .awpcp-uploaded-file-action,
html.vm-sombre .finishbutton,
html.vm-sombre .buywith,
html.vm-sombre p.maincategoryclass,
html.vm-sombre .dropdownparentcategory,
html.vm-sombre div.unsetsavedlocationslink,
html.vm-sombre .cl-adsense,
html.vm-sombre #showawpcpadpage .adtitle,
html.vm-sombre #showawpcpadpage .awpcp-title {
	background-color: var(--vms-surface-2) !important;
	color: var(--vms-texte) !important;
	border-color: var(--vms-bord);
}
html.vm-sombre [class*="displayaditem"] {
	border-color: #3d6fa3 !important;
}
html.vm-sombre .awpcp-button:hover,
html.vm-sombre .awpcp-payment-terms-table-payment-term-price:hover,
html.vm-sombre .awpcp-payment-terms-list .awpcp-payment-term .awpcp-payment-term-duration-price label:hover,
html.vm-sombre .awpcp-payment-methods-list .awpcp-payment-methods-list-payment-method label:hover {
	background-color: var(--vms-surface-3) !important;
}

/* Les messages : jaune, rouge, bleu, en version sombre. */
html.vm-sombre .messagedisplay,
html.vm-sombre .awpcp-message,
html.vm-sombre .awpcp-page .awpcp-preview-ad-form,
html.vm-sombre p.uploaderror,
html.vm-sombre .is-awaiting-approval {
	background-color: #3a3418 !important;
	color: #f3e7b0 !important;
	border-color: #6b5f2a !important;
}
html.vm-sombre .awpcp-error,
html.vm-sombre .awpcp-form-field .error,
html.vm-sombre .awpcp-page .awpcp-delete-ad-form,
html.vm-sombre #js_error,
html.vm-sombre .is-rejected,
html.vm-sombre .awpcp-uploaded-file-rejected-label {
	background-color: #3d1f1f !important;
	color: #f6c9c9 !important;
	border-color: #7a3a3a !important;
}
html.vm-sombre .awpcp-message.info,
html.vm-sombre .awpcp-message-info {
	background-color: #1b2a35 !important;
	color: #cfe4f7 !important;
}

/* Les annonces Vedette (plugin vm-vedettes). La carte porte aussi la classe
   displayaditem* des annonces normales : le sélecteur doit passer devant la règle
   générale, sinon elle hérite du fond gris et de la bordure bleue. */
html.vm-sombre body [class*="displayaditem"].awpcp_featured_ad_wrapper {
	background-color: #3b301a !important;
	border-color: #c9a94f !important;
}
html.vm-sombre body .awpcp_featured_ad_wrapper::before {
	color: #e0c36a !important;
}
html.vm-sombre .vm-vedette {
	background: linear-gradient(135deg, #2e2716 0%, #24211a 100%);
	border-color: #6b5a26;
	color: var(--vms-texte);
}
html.vm-sombre .vm-vedette .vm-vedette-titre {
	color: #f0b849;
}

/* Le calendrier des dates (vm-champs-extras). */
html.vm-sombre .ui-datepicker {
	background: var(--vms-surface-2) !important;
	color: var(--vms-texte) !important;
	border-color: var(--vms-bord) !important;
}
html.vm-sombre .ui-datepicker .ui-datepicker-header {
	background: var(--vms-surface-3) !important;
	color: var(--vms-texte) !important;
}
html.vm-sombre .ui-datepicker .ui-datepicker-prev,
html.vm-sombre .ui-datepicker .ui-datepicker-next {
	background: var(--vms-surface-2) !important;
	color: var(--vms-texte) !important;
	border-color: var(--vms-trait) !important;
}
html.vm-sombre .ui-datepicker td a,
html.vm-sombre .ui-datepicker td span {
	background: var(--vms-surface-3) !important;
	color: var(--vms-texte) !important;
	border-color: var(--vms-bord) !important;
}
html.vm-sombre .ui-datepicker td a.ui-state-active,
html.vm-sombre .ui-datepicker td a.ui-state-highlight {
	background: #1e73be !important;
	color: #ffffff !important;
}

/* ---------- Nos plugins ---------- */
/* Départements et régions. */
html.vm-sombre .vmd-region .vmd-tuile {
	background: var(--vms-surface-2);
	border-color: var(--vms-bord);
}
html.vm-sombre .vmd-region .vmd-tuile-nom {
	color: var(--vms-lien);
}
html.vm-sombre .vmd-region .vmd-tuile-code,
html.vm-sombre .vmd-region .vmd-tuile-detail,
html.vm-sombre .vmd-region .vmd-tuile-compte {
	color: var(--vms-doux);
}
html.vm-sombre .vmd-region .vmd-tuile-compte.vmd-actif,
html.vm-sombre .vmj-nombre,
html.vm-sombre .vmj-merci {
	color: var(--vms-vert);
}
html.vm-sombre .vmd-departement .vmd-liste li {
	border-bottom-color: var(--vms-bord);
}

/* Tournée. */
html.vm-sombre button.vmt-ajout,
html.vm-sombre button.vmt-onglet {
	background: transparent;
	color: var(--vms-vert);
	border-color: var(--vms-vert);
}
html.vm-sombre button.vmt-ajout:hover,
html.vm-sombre button.vmt-ajout:focus {
	background: #17301f;
	color: var(--vms-vert);
}
html.vm-sombre button.vmt-ajout.vmt-dedans,
html.vm-sombre button.vmt-onglet.vmt-actif {
	background: #267a48;
	color: #ffffff;
	border-color: #267a48;
}
html.vm-sombre .vmt-etape {
	border-bottom-color: var(--vms-bord);
}
html.vm-sombre .vmt-details,
html.vm-sombre .vmt-note,
html.vm-sombre .vmal-mention {
	color: var(--vms-doux);
}
html.vm-sombre button.vmt-retirer {
	color: #f08a8a;
}

/* J'y vais. */
html.vm-sombre .vmj .vmj-lien {
	color: var(--vms-vert);
	border-color: var(--vms-vert);
}
html.vm-sombre .vmj .vmj-lien:hover,
html.vm-sombre .vmj .vmj-lien:focus {
	background: #267a48;
	color: #ffffff;
}

/* Alertes. */
html.vm-sombre .vmal {
	background: var(--vms-surface-2);
	border-color: var(--vms-bord);
}
html.vm-sombre .vmal-ok {
	background: #17301f;
	color: #b5e8c6;
}
html.vm-sombre .vmal-erreur {
	background: #3d1f1f;
	color: #f6c9c9;
}

/* Affiche : l'encadré « Imprimer mon affiche » de fin de dépôt. Son style est écrit
   en ligne, sans classe (vm-affiche fin-depot.php et vm-annonces depot-page.php) :
   on le reconnaît à son fond bleu clair. */
html.vm-sombre div[style*="background:#eef5fb"] {
	background: #1a2c3d !important;
	color: var(--vms-texte) !important;
}

/* Brouillon et Coupons. */
html.vm-sombre .vmb-bandeau {
	background: #3a3418;
}
html.vm-sombre .vmc-coupon .vmc-ok {
	color: var(--vms-vert);
}
html.vm-sombre .vmc-coupon .vmc-refus {
	color: #f08a8a;
}