/* =========================================================================
 * Vandeto Vendor Card v1.1.0 — reskin premium enrichi de .ad-owner-detail-box
 * Couleur douce + animations orchestrées. Actif seulement sous body.vdvc-on.
 * Zéro modification thème. Harmonisé avec « Vandeto — Click To Contact ».
 * ========================================================================= */

body.vdvc-on {
	--vdvc-ink: #11151c;
	--vdvc-ink-50: rgba(17, 21, 28, 0.52);
	--vdvc-ink-35: rgba(17, 21, 28, 0.35);
	--vdvc-hairline: rgba(17, 21, 28, 0.07);
	--vdvc-accent: #ff1700;
	--vdvc-surface: #ffffff;
	--vdvc-call: #5b6ef5;
	--vdvc-call-bg: rgba(91, 110, 245, 0.09);
	--vdvc-wa: #10b981;
	--vdvc-wa-bg: rgba(16, 185, 129, 0.10);
	--vdvc-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
	--vdvc-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* ---------------------------------------------------------------- carte */
body.vdvc-on .ad-owner-detail-box {
	background: var(--vdvc-surface);
	border: 1px solid var(--vdvc-hairline);
	border-radius: 0;
	box-shadow: none;
	padding: 32px 18px 20px;
	position: relative;
	overflow: hidden;
	text-align: center;
	opacity: 0;
	transform: translateY(14px) scale(0.985);
	animation: vdvc-card-in 0.7s var(--vdvc-ease) forwards;
}
@keyframes vdvc-card-in { to { opacity: 1; transform: none; } }

/* halo couleur diffus derrière l'en-tête */
body.vdvc-on .ad-owner-detail-box::before {
	content: "";
	position: absolute;
	inset: -40% -20% auto -20%;
	height: 190px;
	background:
		radial-gradient(60% 100% at 30% 0%, rgba(91, 110, 245, 0.13), transparent 70%),
		radial-gradient(60% 100% at 80% 10%, rgba(16, 185, 129, 0.11), transparent 70%);
	filter: blur(6px);
	opacity: 0;
	animation: vdvc-halo-in 1.1s var(--vdvc-ease) 0.15s forwards;
	pointer-events: none;
	z-index: 0;
}
@keyframes vdvc-halo-in { to { opacity: 1; } }

/* tout le contenu passe au-dessus du halo */
body.vdvc-on .ad-owner-detail-box > * { position: relative; z-index: 1; }

/* ------------------------------------------------- badge rôle « Vendeur » */
body.vdvc-on .ad-owner-detail-box > .owner-status {
	position: absolute;
	top: 16px;
	right: 16px;
	z-index: 2;
	font-size: 10.5px;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--vdvc-ink-50);
	background: rgba(255, 255, 255, 0.7);
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
	border: 1px solid var(--vdvc-hairline);
	border-radius: 100px;
	padding: 5px 11px;
	line-height: 1;
	opacity: 0;
	animation: vdvc-fade-up 0.6s var(--vdvc-ease) 0.35s forwards;
}

/* ------------------------------------------------------ avatar + anneau */
body.vdvc-on .ad-owner-detail-box a.vdvc-avatar-wrap {
	position: relative;
	display: block;
	width: 98px;
	height: 98px;
	margin: 0 auto 16px;
	padding: 0;
	border: 0;
	z-index: 2;
	opacity: 0;
	transform: scale(0.9);
	animation: vdvc-fade-up 0.6s var(--vdvc-spring) 0.25s forwards;
}
body.vdvc-on .vdvc-ring {
	position: absolute;
	inset: -3px;
	border-radius: 50%;
	background: conic-gradient(from 0deg, #5b6ef5, #7aa2ff, #10b981, #ffc220, #5b6ef5);
	opacity: 0.85;
	-webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 3px));
	mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 3px));
}
body.vdvc-ring-anim .vdvc-ring { animation: vdvc-spin 9s linear infinite; }
@keyframes vdvc-spin { to { transform: rotate(360deg); } }

body.vdvc-on .ad-owner-detail-box .vdvc-avatar-wrap img {
	position: absolute;
	inset: 4px;
	width: calc(100% - 8px);
	height: calc(100% - 8px);
	box-sizing: border-box;
	padding: 0;
	margin: 0;
	border: 0;
	border-radius: 50%;
	object-fit: cover;
	display: block;
	outline: 3px solid var(--vdvc-surface);
	outline-offset: -1px;
}

/* pastille « vérifié » déplacée sur l'avatar par le JS */
body.vdvc-on .vdvc-avatar-wrap .vdvc-verif {
	position: absolute;
	right: -1px;
	bottom: -1px;
	z-index: 3;
	width: 28px;
	height: 28px;
	border-radius: 50%;
	background: linear-gradient(145deg, #12c37e, #0f9d63);
	border: 3px solid var(--vdvc-surface);
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 4px 12px -3px rgba(16, 185, 129, 0.5);
	top: auto;
	left: auto;
	margin: 0;
	padding: 0;
	opacity: 0;
	transform: scale(0);
	animation: vdvc-pop 0.55s var(--vdvc-spring) 0.6s forwards;
}
@keyframes vdvc-pop { to { opacity: 1; transform: scale(1); } }
body.vdvc-on .vdvc-avatar-wrap .vdvc-verif i {
	color: #fff;
	font-size: 12px;
	line-height: 1;
}

/* ------------------------------------------------------------- textes */
body.vdvc-on .ad-owner-detail-box h4 {
	font-size: 20px;
	font-weight: 700;
	letter-spacing: -0.02em;
	color: var(--vdvc-ink);
	margin: 0 0 5px;
	opacity: 0;
	animation: vdvc-fade-up 0.6s var(--vdvc-ease) 0.4s forwards;
}
body.vdvc-on .ad-owner-detail-box > p {
	font-size: 12.5px;
	font-weight: 500;
	color: var(--vdvc-ink-35);
	margin: 0 0 15px;
	opacity: 0;
	animation: vdvc-fade-up 0.6s var(--vdvc-ease) 0.47s forwards;
}

/* -------------------------------------------- « Voir toutes les annonces » */
body.vdvc-on .ad-owner-detail-box .view-all-ads-text {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 13px;
	font-weight: 600;
	color: var(--vdvc-ink);
	text-decoration: none;
	border: 1px solid var(--vdvc-hairline);
	border-radius: 100px;
	padding: 8px 16px;
	margin: 0 auto 18px;
	background: rgba(255, 255, 255, 0.6);
	transition: border-color 0.25s var(--vdvc-ease), transform 0.25s var(--vdvc-ease), box-shadow 0.25s var(--vdvc-ease);
	opacity: 0;
	animation: vdvc-fade-up 0.6s var(--vdvc-ease) 0.54s forwards;
}
body.vdvc-on .ad-owner-detail-box .view-all-ads-text:hover {
	border-color: rgba(91, 110, 245, 0.35);
	transform: translateY(-1px);
	box-shadow: 0 6px 16px -8px rgba(91, 110, 245, 0.4);
	color: var(--vdvc-ink);
	text-decoration: none;
}
body.vdvc-on .ad-owner-detail-box .view-all-ads-text::after {
	content: "\203A";
	font-size: 15px;
	line-height: 1;
	opacity: 0.5;
	transform: translateY(-1px);
	transition: transform 0.25s var(--vdvc-ease);
}
body.vdvc-on .ad-owner-detail-box .view-all-ads-text:hover::after { transform: translate(2px, -1px); }

/* ---------------------------------------------------- rangées contact */
body.vdvc-on .ad-owner-detail-box .contact-detail-box {
	display: flex;
	align-items: center;
	gap: 14px;
	text-align: left;
	background: var(--vdvc-surface);
	border: 1px solid var(--vdvc-hairline);
	border-radius: 17px;
	padding: 13px 14px;
	margin: 0 0 9px;
	cursor: pointer;
	position: relative;
	overflow: hidden;
	transition: transform 0.28s var(--vdvc-ease), box-shadow 0.28s var(--vdvc-ease), border-color 0.28s var(--vdvc-ease);
	opacity: 0;
	transform: translateY(8px);
	animation: vdvc-fade-up 0.55s var(--vdvc-ease) 0.62s forwards;
}
body.vdvc-on .ad-owner-detail-box .contact-detail-box:hover { transform: translateY(-2px); }
body.vdvc-on .ad-owner-detail-box .contact-detail-box:hover {
	border-color: rgba(91, 110, 245, 0.35);
	box-shadow: 0 10px 24px -12px rgba(91, 110, 245, 0.55);
}
body.vdvc-on .ad-owner-detail-box .contact-detail-box.green:hover {
	border-color: rgba(16, 185, 129, 0.35);
	box-shadow: 0 10px 24px -12px rgba(16, 185, 129, 0.55);
}

/* voile shimmer (élément injecté .vdvc-shine, jamais un pseudo -> pas de collision CTC) */
body.vdvc-on .vdvc-shine {
	position: absolute;
	inset: 0;
	pointer-events: none;
	background: linear-gradient(105deg, transparent 30%, rgba(255, 255, 255, 0.55) 50%, transparent 70%);
	transform: translateX(-120%);
	transition: transform 0.7s var(--vdvc-ease);
	z-index: 1;
}
body.vdvc-on .contact-detail-box:hover .vdvc-shine { transform: translateX(120%); }

body.vdvc-on .ad-owner-detail-box .contact-detail-box .icon-box {
	width: 40px;
	height: 40px;
	flex: none;
	border-radius: 13px;
	background: var(--vdvc-call-bg);
	color: var(--vdvc-call);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 15px;
	position: relative;
	z-index: 2;
	transition: transform 0.28s var(--vdvc-spring);
}
body.vdvc-on .contact-detail-box:hover .icon-box { transform: scale(1.06); }
body.vdvc-on .ad-owner-detail-box .contact-detail-box .icon-box i { color: inherit; font-size: inherit; line-height: 1; }
body.vdvc-on .ad-owner-detail-box .contact-detail-box.green .icon-box {
	background: var(--vdvc-wa-bg);
	color: var(--vdvc-wa);
}

body.vdvc-on .ad-owner-detail-box .contact-detail-box .meta-box {
	flex: 1;
	min-width: 0;
	width: auto;
	position: relative;
	z-index: 2;
	border: 0;
	background: none;
	border-radius: 0;
	padding: 0;
	line-height: 1.3;
}
body.vdvc-on .ad-owner-detail-box .contact-detail-box .meta-box a {
	display: flex;
	flex-direction: column;
	gap: 2px;
	text-decoration: none !important;
}
body.vdvc-on .ad-owner-detail-box .contact-detail-box .meta-box .toggle-contact-number {
	display: inline-block;
	font-size: 10.5px;
	font-weight: 600;
	letter-spacing: 0.07em;
	text-transform: uppercase;
	color: var(--vdvc-ink-35);
	line-height: 1.3;
	transition: color 0.25s var(--vdvc-ease);
}
body.vdvc-on .ad-owner-detail-box .contact-detail-box .meta-box .phone-number {
	display: block;
	font-size: 15.5px;
	font-weight: 600;
	letter-spacing: 0.02em;
	font-variant-numeric: tabular-nums;
	color: var(--vdvc-ink);
	line-height: 1.3;
}

/* affordance œil (injectée par le JS) */
body.vdvc-on .vdvc-eye {
	flex: none;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--vdvc-ink-35);
	font-size: 13px;
	position: relative;
	z-index: 2;
	transition: background 0.25s var(--vdvc-ease), transform 0.25s var(--vdvc-ease), opacity 0.25s var(--vdvc-ease);
}
body.vdvc-on .contact-detail-box:hover .vdvc-eye { transform: scale(1.05); }
body.vdvc-on .contact-detail-box:hover .vdvc-eye { background: var(--vdvc-call-bg); }
body.vdvc-on .contact-detail-box.green:hover .vdvc-eye { background: var(--vdvc-wa-bg); }
body.vdvc-on .vdvc-eye i { color: inherit; }

/* état révélé */
body.vdvc-on .contact-detail-box.vdvc-revealed .vdvc-eye {
	opacity: 0;
	transform: scale(0.6);
	width: 0;
	pointer-events: none;
}
body.vdvc-on .ad-owner-detail-box .contact-detail-box.vdvc-revealed .meta-box .toggle-contact-number { color: var(--vdvc-call); }
body.vdvc-on .ad-owner-detail-box .contact-detail-box.green.vdvc-revealed .meta-box .toggle-contact-number { color: var(--vdvc-wa); }
body.vdvc-on .contact-detail-box.vdvc-revealed .phone-number { animation: vdvc-num-in 0.5s var(--vdvc-ease); }
@keyframes vdvc-num-in {
	from { opacity: 0.3; filter: blur(3px); letter-spacing: 0.12em; }
	to { opacity: 1; filter: none; }
}

/* --------------------------------------- bouton « Message on WhatsApp » */
body.vdvc-on .ad-owner-detail-box .btn-whatsap {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 9px;
	width: 100%;
	background: var(--vdvc-wa);
	color: #fff;
	font-size: 15px;
	font-weight: 600;
	letter-spacing: -0.01em;
	border: none;
	border-radius: 100px;
	padding: 15px 16px;
	margin: 4px 0 8px;
	transition: transform 0.25s var(--vdvc-ease), box-shadow 0.25s var(--vdvc-ease);
}
body.vdvc-on .ad-owner-detail-box .btn-whatsap:hover {
	transform: translateY(-1px);
	box-shadow: 0 8px 24px -8px rgba(16, 185, 129, 0.55);
	color: #fff;
}

/* -------------------------------------- bouton « Démarrer le chat » */
body.vdvc-on .ad-owner-detail-box .adt-button-dark {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 9px;
	width: 100%;
	background: linear-gradient(135deg, #1b2130, #11151c);
	color: #fff;
	font-size: 15px;
	font-weight: 600;
	letter-spacing: -0.01em;
	border: none;
	border-radius: 100px;
	padding: 16px;
	margin: 4px 0 0;
	cursor: pointer;
	position: relative;
	overflow: hidden;
	box-shadow: 0 8px 22px -12px rgba(17, 21, 28, 0.6);
	transition: transform 0.25s var(--vdvc-ease), box-shadow 0.25s var(--vdvc-ease);
	opacity: 0;
	animation: vdvc-fade-up 0.55s var(--vdvc-ease) 0.8s forwards;
}
body.vdvc-on .ad-owner-detail-box .adt-button-dark::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(105deg, transparent 35%, rgba(255, 255, 255, 0.16) 50%, transparent 65%);
	transform: translateX(-120%);
	transition: transform 0.8s var(--vdvc-ease);
}
body.vdvc-on .ad-owner-detail-box .adt-button-dark:hover {
	transform: translateY(-2px);
	box-shadow: 0 14px 30px -12px rgba(17, 21, 28, 0.6);
	color: #fff;
}
body.vdvc-on .ad-owner-detail-box .adt-button-dark:hover::after { transform: translateX(120%); }
body.vdvc-on .ad-owner-detail-box .adt-button-dark::before {
	content: "";
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--vdvc-accent);
	flex: none;
	box-shadow: 0 0 0 0 rgba(255, 23, 0, 0.5);
	animation: vdvc-pulse 2.4s var(--vdvc-ease) infinite;
	position: relative;
	z-index: 1;
}
@keyframes vdvc-pulse {
	0% { box-shadow: 0 0 0 0 rgba(255, 23, 0, 0.45); }
	70% { box-shadow: 0 0 0 7px rgba(255, 23, 0, 0); }
	100% { box-shadow: 0 0 0 0 rgba(255, 23, 0, 0); }
}

/* ------------------------------------------------------ réassurance */
body.vdvc-on .vdvc-reassure {
	text-align: center;
	font-size: 11px;
	font-weight: 500;
	color: var(--vdvc-ink-35);
	margin: 12px 0 0;
	opacity: 0;
	animation: vdvc-fade-up 0.55s var(--vdvc-ease) 0.9s forwards;
}

/* ------------------------------------------------------ lien site web */
body.vdvc-on .ad-owner-detail-box .adt-website_link { margin-top: 14px; }
body.vdvc-on .ad-owner-detail-box .adt-website_link a {
	font-size: 12.5px;
	font-weight: 500;
	color: var(--vdvc-ink-50);
	text-decoration: none;
}
body.vdvc-on .ad-owner-detail-box .adt-website_link a:hover { color: var(--vdvc-ink); }

@keyframes vdvc-fade-up {
	from { opacity: 0; transform: translateY(8px); }
	to { opacity: 1; transform: none; }
}

/* =========================================================================
 * HARMONISATION avec « Vandeto — Click To Contact » (.vct-*)
 * On préserve tout son FONCTIONNEL (tel:/wa.me, mesure d'intentions, a11y,
 * cursor, focus clavier) et on neutralise uniquement son DÉCOR qui ferait
 * double emploi avec le reskin (ombre/bordure/puce/pulse). Aucun de ses
 * fichiers n'est modifié : simple surcharge chargée après (priorité 30).
 * ========================================================================= */

/* puce texte « Appeler/WhatsApp » en haut à droite -> remplacée par mon label */
body.vdvc-on .contact-detail-box.vct-ready::after {
	content: none !important;
	display: none !important;
}
/* pulse d'apparition de CTC -> mon reskin gère déjà l'entrée */
body.vdvc-on .contact-detail-box.vct-phone.vct-ready,
body.vdvc-on .contact-detail-box.vct-whatsapp.vct-ready {
	animation: vdvc-fade-up 0.55s var(--vdvc-ease) 0.62s forwards;
}
/* ombres/bordures de survol de CTC -> les miennes priment déjà, on neutralise
   son box-shadow bleu/vert brut pour éviter le cumul de deux ombres */
body.vdvc-on .contact-detail-box.vct-phone.vct-ready:hover,
body.vdvc-on .contact-detail-box.vct-whatsapp.vct-ready:hover,
body.vdvc-on .contact-detail-box.vct-phone.vct-ready:focus-visible,
body.vdvc-on .contact-detail-box.vct-whatsapp.vct-ready:focus-visible {
	box-shadow: 0 10px 24px -12px rgba(91, 110, 245, 0.55);
}
body.vdvc-on .contact-detail-box.green.vct-whatsapp.vct-ready:hover,
body.vdvc-on .contact-detail-box.green.vct-whatsapp.vct-ready:focus-visible {
	box-shadow: 0 10px 24px -12px rgba(16, 185, 129, 0.55);
}

/* -------------------------------------- réduction de mouvement (a11y) */
@media (prefers-reduced-motion: reduce) {
	body.vdvc-on .ad-owner-detail-box,
	body.vdvc-on .ad-owner-detail-box::before,
	body.vdvc-on .ad-owner-detail-box > .owner-status,
	body.vdvc-on .vdvc-avatar-wrap,
	body.vdvc-on .vdvc-avatar-wrap .vdvc-verif,
	body.vdvc-on .ad-owner-detail-box h4,
	body.vdvc-on .ad-owner-detail-box > p,
	body.vdvc-on .ad-owner-detail-box .view-all-ads-text,
	body.vdvc-on .ad-owner-detail-box .contact-detail-box,
	body.vdvc-on .ad-owner-detail-box .adt-button-dark,
	body.vdvc-on .vdvc-reassure {
		animation: none !important;
		opacity: 1 !important;
		transform: none !important;
	}
	body.vdvc-on .vdvc-ring { animation: none !important; }
	body.vdvc-on .ad-owner-detail-box .adt-button-dark::before { animation: none !important; }
	body.vdvc-on .vdvc-shine { display: none; }
}